/* Bible Translate landing page. Palette taken from the app icon: navy, brass, paper. */
:root {
  --paper: #f5f2ea;
  --paper-2: #ede8dc;
  --surface: #fbfaf6;
  --ink: #17242c;
  --muted: #56636a;
  --line: #dcd5c5;
  --navy: #16324a;
  --brass: #b88a2e;
  --brass-text: #82601a;
  --btn-bg: #16324a;
  --btn-fg: #ffffff;
  --shadow: 0 1px 0 rgba(23, 36, 44, .04), 0 2px 6px rgba(23, 36, 44, .05), 0 28px 60px -24px rgba(22, 50, 74, .32);
  --display: "CC Gentium Book Plus", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --heb: "CC Noto Serif Hebrew", "Noto Serif Hebrew", "SBL Hebrew", serif;
  --wide: 1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f181e;
    --paper-2: #131f27;
    --surface: #17242d;
    --ink: #ebe6da;
    --muted: #a1abad;
    --line: #283a45;
    --navy: #cfdbe6;
    --brass: #d9a441;
    --brass-text: #dcae55;
    --btn-bg: #d9a441;
    --btn-fg: #14202a;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 30px 70px -24px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.gk { font-family: var(--display); }
.he { font-family: var(--heb); }
kbd { font: 12px/1 ui-monospace, "SF Mono", Menlo, monospace; padding: 3px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--ink); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- top bar */
.top { max-width: var(--wide); margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 21px; letter-spacing: -.005em; }
.brand img { border-radius: 8px; }
.top-act { display: flex; align-items: center; gap: 20px; }
.lnk { font-size: 15px; text-decoration: none; color: var(--muted); }
.lnk:hover { color: var(--ink); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 10px; background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: .005em; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 20px -10px rgba(22, 50, 74, .6); }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, .lnk:focus-visible, .steps button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14.5px; border-radius: 8px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------------------------------------------------------------- hero */
.hero { max-width: 860px; margin: 0 auto; padding: 56px 24px 0; text-align: center; }
/* Greek and Hebrew share one baseline (the two fonts' line boxes differ, so centring the boxes would not line them up).
   Hebrew consonants stand about as tall as Greek capitals, so the Hebrew is set a little smaller to sit with the
   mostly x-height Greek, and the dot sits at the middle of the Greek x-height (0.47em). */
.incipit { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 22px; color: var(--navy); font-size: clamp(34px, 5vw, 54px); line-height: 1.25; }
.incipit .he { font-size: .86em; }
.incipit .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); flex: none; align-self: baseline; transform: translateY(calc(-.235em + 3.5px)); }
.incipit-note { margin: 6px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.07; letter-spacing: -.018em; margin: 36px auto 0; max-width: 15.5em; text-wrap: balance; }
.lede { font-size: clamp(17px, 1.6vw, 19.5px); color: var(--muted); max-width: 37em; margin: 22px auto 0; text-wrap: pretty; }
.cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
.cta-note { flex-basis: 100%; margin: 4px 0 0; font-size: 14.5px; color: var(--muted); }

/* ---------------------------------------------------------------- animated screens */
.player { margin: 0; }
.player .stage { position: relative; overflow: hidden; background: var(--surface); aspect-ratio: 16 / 10; }
.player .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s ease; }
.player .stage img.on { opacity: 1; }
.player .cursor { position: absolute; left: 0; top: 0; width: clamp(13px, 1.7%, 22px); z-index: 3; opacity: 0; pointer-events: none; transition: left .8s cubic-bezier(.45, 0, .2, 1), top .8s cubic-bezier(.45, 0, .2, 1), opacity .3s ease; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.player .cursor.on { opacity: 1; }
.player .ripple { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--brass); z-index: 2; opacity: 0; pointer-events: none; }
.player .ripple.go { animation: ripple .55s ease-out; }
@keyframes ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

.player-hero { max-width: var(--wide); margin: 64px auto 0; padding: 0 24px; }
.player-hero .frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.player-hero .chrome { height: 38px; display: flex; align-items: center; justify-content: center; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.player-hero .url { font-size: 12.5px; color: var(--muted); padding: 3px 14px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }

.feature .player .stage { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }

.steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; margin-top: 18px; }
.steps button { appearance: none; border: 0; background: none; color: var(--muted); font: 500 14px/1 var(--sans); padding: 9px 12px 11px; border-radius: 8px; cursor: pointer; position: relative; }
.steps button .n { font-family: var(--display); color: var(--brass-text); margin-right: 6px; font-size: 15px; }
.steps button::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--line); }
.steps button .bar { position: absolute; left: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--brass); width: 0; z-index: 1; }
.steps button.on { color: var(--ink); }
.steps button:hover { color: var(--ink); }
.feature .steps { justify-content: flex-start; margin-left: -12px; }

/* ---------------------------------------------------------------- features */
.feature { max-width: var(--wide); margin: 0 auto; padding: 128px 24px 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 64px; align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
.feature.flip .copy { order: 2; }
.kicker { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-text); }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -.012em; margin: 0 0 16px; text-wrap: balance; }
.copy p { margin: 0 0 14px; color: var(--muted); }
.copy p i { color: var(--ink); }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; }
.ticks li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line); font-size: 15.5px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }

/* ---------------------------------------------------------------- and more */
.more { max-width: var(--wide); margin: 0 auto; padding: 144px 24px 0; }
.more h2 { text-align: center; margin-bottom: 40px; }
.more dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.more dl > div { border-top: 1px solid var(--line); padding: 20px 0 28px; }
.more dt { font-family: var(--display); font-size: 21px; margin-bottom: 6px; }
.more dd { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ---------------------------------------------------------------- getting started */
.start { max-width: 920px; margin: 0 auto; padding: 128px 24px 0; text-align: center; }
.start ol { list-style: none; counter-reset: s; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: left; }
.start li { counter-increment: s; color: var(--muted); font-size: 15.5px; }
.start li::before { content: counter(s); display: block; font-family: var(--display); font-size: 44px; line-height: 1; color: var(--brass); margin-bottom: 12px; }
.start li b { display: block; color: var(--ink); font-weight: 600; font-size: 17px; margin-bottom: 2px; }

/* ---------------------------------------------------------------- closing */
.closing { margin: 144px auto 0; padding: 96px 24px 104px; text-align: center; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.closing-gk { margin: 0; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.15; color: var(--navy); }
.closing-en { margin: 10px 0 0; font-family: var(--display); font-style: italic; font-size: 20px; color: var(--muted); }
.cta-row.center { margin-top: 36px; }

/* ---------------------------------------------------------------- footer */
.foot { max-width: 820px; margin: 0 auto; padding: 40px 24px 56px; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; }
.foot b { color: var(--ink); font-weight: 600; }
.foot-sig { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; font-family: var(--display); font-size: 15px; color: var(--ink); }
.foot-sig img { border-radius: 4px; }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 960px) {
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 96px; }
  .feature.flip .copy { order: 0; }
  .more dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .top { padding: 14px 16px; }
  .top .lnk { display: none; }
  .brand { font-size: 19px; }
  .hero { padding: 36px 16px 0; }
  .incipit { gap: 14px; }
  h1 { margin-top: 26px; }
  .cta-row .btn { flex: 1 1 100%; }
  .player-hero { margin-top: 44px; padding: 0 16px; }
  .player-hero .chrome { height: 30px; }
  .player-hero .url { font-size: 11px; padding: 1px 10px; }
  .feature, .more, .start { padding-left: 16px; padding-right: 16px; }
  .feature { padding-top: 80px; }
  .more { padding-top: 96px; }
  .more dl { grid-template-columns: minmax(0, 1fr); }
  .start { padding-top: 96px; }
  .start ol { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .closing { margin-top: 96px; padding: 72px 16px 80px; }
  .steps button { font-size: 13px; padding: 8px 9px 10px; }
  .steps button::after, .steps button .bar { left: 9px; right: 9px; }
  .feature .steps { margin-left: -9px; }
}
@media (prefers-reduced-motion: reduce) {
  .player .stage img, .player .cursor, .btn { transition: none; }
}