/* The landing page: the app's own look (ink on paper, one rose accent, serif for scripture) as plain files: no build step.
   The only script is the small demo (landing.js). */
/* The app's own typefaces (the same files the app uses): Literata for scripture and headings, Instrument Sans for everything else. Latin covers Spanish. */
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --gutter: 1.75rem;
  --bg: #f8f8f6;
  --fg: #17171a;
  --muted: #5e5e5a;
  --surface: #eeeeea;
  --border: #d9d8d3;
  --accent: #d96878;
  --link: #8a1f30;
  --primary: #17171a;
  --primary-fg: #f8f8f6;
  --again: #c62828;
  --hard: #b45309;
  --good: #15803d;
  --easy: #0369a1;
  color-scheme: light;
}
@media (min-width: 48rem) {
  :root {
    --gutter: 2.5rem;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131312;
    --fg: #f1f0ec;
    --muted: #a4a29b;
    --surface: #1d1d1b;
    --border: #333330;
    --link: #e8909c;
    --primary: #f1f0ec;
    --primary-fg: #131312;
    --again: #f2837d;
    --hard: #f5a03a;
    --good: #5bc48a;
    --easy: #7cc6f2;
    color-scheme: dark;
  }
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  overflow-x: clip;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font:
    1.0625rem/1.65 'Instrument Sans',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}
h1,
h2,
h3,
.brand,
.d-ref,
.d-verse {
  font-family: Literata, Georgia, 'Times New Roman', serif;
}
h1,
h2,
h3,
p {
  text-wrap: balance;
}
a {
  color: var(--link);
  text-underline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 0.375rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.icon {
  flex: none;
}

/* top bar */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem max(var(--gutter), calc((100% - 64rem) / 2));
  border-bottom: 1px solid transparent;
}
/* See-through at the top of the page so the light behind the hero shows; it gets a background once the page scrolls (landing.js adds .scrolled), so text never runs under it. */
.top.scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
}
.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.95rem;
}
.link {
  color: var(--fg);
  text-decoration: none;
}
.link:hover {
  color: var(--link);
  text-decoration: underline;
}
@media (max-width: 40rem) {
  .top nav .link:not([hreflang]) {
    display: none;
  }
  .top nav {
    gap: 0.75rem;
  }
  .brand {
    font-size: 1rem;
  }
}
@media (max-width: 30rem) {
  .brand {
    font-size: 0;
    gap: 0;
  }
} /* small phones: just the logo, so the bar fits */

/* buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  font: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  background: var(--primary);
  color: var(--primary-fg);
  cursor: pointer;
}
.button:hover {
  opacity: 0.9;
}
.button.small {
  min-height: 2.5rem;
  padding: 0 1rem;
}
.button.secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.button.secondary:hover {
  background: var(--surface);
  opacity: 1;
}
.button.soon,
.button:disabled {
  background: transparent;
  color: var(--fg);
  border: 1px dashed var(--border);
  cursor: default;
  opacity: 1;
}

main {
  display: block;
}
section {
  max-width: 64rem;
  margin: 0 auto;
  padding: 6.5rem var(--gutter) 0;
}
h2 {
  font-size: clamp(1.6rem, 4vw, 2.125rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  text-align: center;
}
.sub {
  color: var(--muted);
  text-align: center;
  margin: 0 auto 2.5rem;
}

/* hero */
/* An old page of scripture behind the hero (bg-light.webp / bg-dark.webp), under the paper grain. It fades out at the top and bottom, and is dimmed so the headline stays easy to read. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: -5rem;
  bottom: -4rem;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.55;
  background-image: url('/bg-light.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent);
}
@media (prefers-color-scheme: dark) {
  .hero::before {
    background-image: url('/bg-dark.webp');
    opacity: 0.9;
  }
}
/* Paper behind the hero: fine grain, like the page of a book, and a soft light from above. No script, nothing moves.
   Dark specks on the light page, pale specks on the dark page. It fades out at the top and bottom so it never shows an edge. */
.prism {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lift: 255 255 255;
  --lift-a: 1;
  --grain-a: 0.3;
  position: absolute;
  z-index: -1;
  top: -5rem;
  bottom: -4rem;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: var(--grain-a);
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, rgb(var(--lift) / var(--lift-a)), transparent 75%),
    var(--grain);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
}
@media (prefers-color-scheme: dark) {
  .prism {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.4 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --lift-a: 0;
    --grain-a: 0.05;
  }
} /* dark mode: just a whisper of grain, so the black stays black */
.hero {
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 5rem; /* phones: more room, so "Try it right here" starts lower on the screen */
}
@media (min-width: 48rem) {
  .hero {
    padding-top: 10rem;
    padding-bottom: 9rem;
  }
  .lead {
    margin-bottom: 2.75rem;
  }
}
h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 auto 1rem;
  font-weight: 500;
}
.lead {
  color: var(--fg);
  font-size: 1.25rem;
  max-width: 32rem;
  margin: 0 auto 2rem;
}
.actions {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
}
.stores .badge {
  display: block;
}
.stores .badge img {
  display: block;
  height: 100%;
  width: auto;
}
/* the two store badges, the same height */
.stores .badge {
  height: 3.75rem;
}
/* on a phone they stack, all the same width */
@media (max-width: 47.99rem) {
  .stores {
    flex-direction: column;
  }
  .stores .badge {
    width: 10.5rem;
    height: auto;
  }
  .stores .badge img {
    width: 100%;
    height: auto;
  }
}

/* demo: it looks like the app's own study screen (the card in the middle, the buttons along the bottom) */
.demo {
  max-width: 26rem;
  margin: 0 auto;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0 auto 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.tab {
  min-height: 2.5rem;
  padding: 0.25rem 0.4rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
@media (max-width: 30rem) {
  .tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* On a tablet or desktop the demo is laid out sideways, as wide as the screenshots below: the ways to study down the left, the card on the right */
@media (min-width: 48rem) {
  .demo {
    display: grid;
    grid-template-columns: 15rem 1fr;
    column-gap: 2rem;
    align-items: stretch; /* the sidebar runs the whole height of the card */
    max-width: 56rem;
  }
  .tabs {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0.25rem;
    margin: 0;
  }
  .tab {
    min-height: 3rem;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.9375rem;
  }
  .demo-card {
    grid-column: 2;
    min-height: 31rem;
  }
}
.tab[aria-pressed='true'] {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--border);
}
.demo-card {
  display: flex;
  flex-direction: column;
  min-height: 30rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--border);
}
.d-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.5rem 1.75rem 1rem;
  text-align: center;
}
.d-bar {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem 1.75rem 1.75rem;
}
.d-ref {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.d-ref.big {
  font-size: 1.875rem;
}
.d-verse {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.7;
}
.d-verse.left {
  text-align: left;
  font-size: 1.125rem;
}
/* a verse set in left-aligned lines stays a column in the middle of the card, so on a wide card it lines up with the title and the buttons */
.d-verse.left,
.d-verse.blanks {
  width: 100%;
  max-width: 30rem;
}
.d-verse.blanks {
  text-align: left;
  line-height: 2.3;
}
.d-msg {
  margin: 0;
  color: var(--muted);
  font-size: 0.975rem;
}
.button.full {
  width: 100%;
}
.d-rates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.rate {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.25rem 0;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--bg);
  font: inherit;
  cursor: pointer;
}
.rate:hover {
  border-color: var(--fg);
}
.rate small {
  font-size: 0.75rem;
  color: var(--muted);
}
.rate-name {
  font-size: 0.9375rem;
  font-weight: 600;
}
.again {
  color: var(--again);
}
.hard {
  color: var(--hard);
}
.good {
  color: var(--good);
}
.easy {
  color: var(--easy);
}
.d-verse .blank {
  display: inline-block;
  margin: 0 0.1rem;
  border-bottom: 2px dashed var(--muted);
  vertical-align: baseline;
}
.d-verse .blank.current {
  border: 2px solid var(--fg);
  border-radius: 0.375rem;
  background: var(--surface);
}
.d-verse .wrong {
  color: var(--again);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.d-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.word {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-family: Literata, Georgia, serif;
  font-size: 1.1rem;
  cursor: pointer;
}
.word:hover {
  border-color: var(--fg);
}
.note {
  text-align: center;
  color: var(--muted);
}

/* typing: a plain line to type on that turns rose while you type (like the app's), then your answer and the correct verse */
.d-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-family: Literata, Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.7;
  resize: none;
  overflow: hidden;
  text-align: left;
}
.d-input::placeholder {
  color: var(--muted);
}
.d-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}
.d-results {
  width: 100%;
  display: grid;
  gap: 1.25rem;
  text-align: left;
}
.d-label {
  margin: 0 0 0.25rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}
.ok {
  color: var(--good);
}
.bad {
  color: var(--again);
}
.miss {
  color: var(--again);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  padding: 0 0.1rem;
}

/* speaking: a short explanation with the mic, not a demo */
.mic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
}
.mic.on {
  background: var(--surface);
  color: var(--fg);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mic.on {
    animation: none;
  }
}
.d-explain {
  margin: 0;
  max-width: 21rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* screenshots */
.screens h2 {
  margin-bottom: 3.5rem;
} /* room between the heading and the first screenshot */
.shots {
  scrollbar-width: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  justify-items: center;
  max-width: 56rem;
  margin: 0 auto;
}
.shot {
  margin: 0;
  width: 100%;
  max-width: 17rem;
}
.phone {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.75rem;
  background: var(--surface);
  box-shadow:
    0 1px 0 var(--border),
    0 12px 32px -16px rgb(0 0 0 / 0.25);
  line-height: 0;
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
}
.shot figcaption {
  margin-top: 0.9rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}
@media (max-width: 48rem) {
  .shots::-webkit-scrollbar {
    display: none;
  }
  .shots {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    max-width: none;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0.25rem calc((100vw - min(15rem, 68vw)) / 2) 1.25rem;
    justify-content: flex-start;
  }
  .shot {
    flex: 0 0 min(15rem, 68vw);
    max-width: none;
    scroll-snap-align: center;
  }
}

/* features */
.grid {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) {
  /* desktop: the cards line up with the phone screenshots above (the same 56rem, centered; both shrink together on smaller screens) */
  .grid {
    max-width: 56rem;
    margin-inline: auto;
  }
}
.grid li {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  min-height: 8.4rem; /* as tall as on a phone, even where the text fits on one line */
}
@media (min-width: 40.01rem) {
  .grid li {
    padding-block: 3rem; /* taller cards on desktop */
    justify-content: center; /* the icon and its text sit in the middle of the card, as one group */
  }
}
.grid .icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--fg);
} /* the text color: white in dark mode, black in light mode */
.grid h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
}
.grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.975rem;
  line-height: 1.55;
}
@media (max-width: 40rem) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* free + donation */
.free {
  text-align: center;
}
.free h2 {
  margin-bottom: 1.25rem;
}
.free p {
  color: var(--muted);
  max-width: 32rem;
  margin: 0 auto 2.5rem; /* room before the button, like the space under the other headings */
}

/* text reveal: each word blurs in from below, one after another, and stays (landing.js splits the headings into words) */
.reveal-pending .hero h1,
.reveal-pending .hero .lead,
.reveal-pending main h2,
.reveal-pending .top .brand,
.reveal-pending .top nav .button,
.reveal-pending .hero .button {
  visibility: hidden;
}
.rv-word {
  display: inline-block;
  animation: rv-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards paused;
  animation-delay: calc(var(--i) * 80ms + var(--base, 0ms));
}
.rv-go .rv-word {
  animation-play-state: running;
}
@keyframes rv-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
/* cards, screenshots, the demo, the donation button and the footer: fade, rise and sharpen once they come into view */
.rv-block {
  opacity: 0 !important; /* beats a button's own :hover and disabled opacity while it is still hidden */
  transform: translateY(16px);
  filter: blur(6px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv-block.rv-go {
  opacity: 1 !important;
  transform: none;
  filter: none;
  transition-delay: var(--d, 0ms); /* the delay applies only while it appears; landing.js removes these classes afterwards */
}
@media (prefers-reduced-motion: reduce) {
  .rv-word {
    animation: none;
  }
  .rv-block {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Google's Spanish Play badge comes without the grey outline the English one has: it is drawn here, so it matches the others on a dark page */
img[src*='play-es'] {
  box-sizing: border-box;
  border: 1px solid #a6a6a6;
  border-radius: 0.45rem;
}

/* on the wide demo card the verse's lines are centered too (left-aligned lines in a column leave the empty space on the right, which looks off-center) */
@media (min-width: 48rem) {
  .d-verse.left,
  .d-verse.blanks {
    text-align: center;
    text-wrap: balance;
  }
}