/* ==========================================================================
   Blurbl — readblurbl.com
   Tokens lifted verbatim from the iOS app's kit (components/theme.ts) so the
   web page and the app read as one product: same BRAND/NEUTRAL ramps, same
   button gradients, same radii, same Instrument Serif + Inter Tight pairing.
   ========================================================================== */

:root {
  /* Brand ramp */
  --brand-25: #fcfaf8;
  --brand-50: #f3e8dd;
  --brand-100: #e7d1bb;
  --brand-200: #dab895;
  --brand-300: #d1ab85;
  --brand-400: #c09468;
  --brand-600: #8e6133;
  --brand-700: #664320;
  --brand-900: #3e2913;

  /* Light surfaces */
  --bg: #fcf6ee;
  --panel: #fffcfa;
  --panel-2: #f3e8dd;
  --ink: #312e2a;
  --ink-2: #4c4743;
  --muted: #777069;
  --line: #d8cfc3;
  --accent: var(--brand-700);
  --on-accent: #fffcfa;

  /* The app's page + button gradients */
  --grad-page: linear-gradient(180deg, #ffffff 0%, #fef7ee 45%, #fce0ba 100%);
  --grad-button: linear-gradient(180deg, #62401e 0%, #3e2913 100%);

  /* Radii (RADIUS in the kit) */
  --r-sm: 6px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-xxl: 20px;
  --r-xxxl: 24px;
  --r-full: 999px;

  --shadow-cta: 0 6px 12px rgba(62, 41, 19, 0.28);
  --shadow-card: 0 10px 30px rgba(122, 90, 46, 0.1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dark = the app's midnight warm-black. Hue stays warm (~28°) but
   saturation is low, so it reads as a dark room rather than a lit ember. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120e;
    --panel: #211c17;
    --panel-2: #2c2620;
    --ink: #fcfaf8;
    --ink-2: #e7d1bb;
    --muted: #a2937f;
    --line: rgba(255, 253, 250, 0.12);
    --accent: var(--brand-300);
    --on-accent: #271a0c;

    --grad-page: linear-gradient(180deg, #2a2119 0%, #15120e 55%, #090806 100%);
    --grad-button: linear-gradient(180deg, #e9d1b9 0%, #d8ad82 100%);

    --shadow-cta: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  background-image: var(--grad-page);
  background-attachment: fixed;
  color: var(--ink-2);
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Instrument Serif has no bold cut — the app comments on this repeatedly,
   because asking for 600+ makes the browser synthesise one and it smears.
   Every display face here stays at 400. */
.display {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  margin: 0;
}
.display--xl {
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 1.08;
}
.display--lg {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.12;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

/* ── Redirect notice ────────────────────────────────────────────────────── */

.redirect-note {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.875rem;
  padding: 12px 24px;
  text-align: center;
}
.redirect-note__link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Nav ────────────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 8px;
}

.wordmark {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.wordmark--sm {
  font-size: 1.25rem;
}

.nav__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav__link:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0 88px;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

.lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
  margin: 20px 0 32px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.fineprint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 18px 0 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--r-xl);
  padding: 14px 26px;
  min-height: 54px; /* matches the app's `big` button */
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    filter 0.18s var(--ease);
}

.btn--primary {
  background-image: var(--grad-button);
  color: var(--on-accent);
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 20px rgba(62, 41, 19, 0.32);
}
.btn--primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.btn__glyph {
  width: 26px;
  height: 26px;
  flex: none;
}
.btn__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.btn__kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.btn__label {
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Keyboard focus needs to survive on both themes and on the gradient. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── Phone mockup ───────────────────────────────────────────────────────── */

.phone {
  justify-self: center;
  width: min(320px, 100%);
  border-radius: 44px;
  padding: 12px;
  background: linear-gradient(160deg, #3a332b, #17130f);
  box-shadow: 0 30px 60px rgba(48, 32, 14, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.4s var(--ease);
}
.phone:hover {
  transform: translateY(-6px) rotate(-0.6deg);
}

.phone__screen {
  background: var(--panel);
  border-radius: 34px;
  overflow: hidden;
  padding: 18px 16px 22px;
}

.phone__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
}
.phone__back {
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}
.phone__titles {
  display: flex;
  flex-direction: column;
}
.phone__title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.0625rem;
  color: var(--ink);
}
.phone__author {
  font-size: 0.75rem;
  color: var(--muted);
}

.phone__progress {
  height: 3px;
  background: var(--line);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: 18px;
}
.phone__progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-full);
}

/* ── Chat thread ────────────────────────────────────────────────────────── */

.thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Narration keeps the app's serif-italic, centred treatment. */
.narration {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
  margin: 0;
}
.narration--tight {
  font-size: 0.875rem;
  margin-top: 12px;
}

.turn {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.speaker {
  font-size: 0.6875rem;
  color: var(--muted);
  margin-left: 4px;
}

/* --bubble is the character's colour, assigned per book in the app from a
   curated palette; the two here are its first two ranks. */
.bubble {
  align-self: flex-start;
  max-width: 88%;
  background: var(--bubble, var(--panel-2));
  color: #fffcfa;
  border-radius: var(--r-xl);
  border-bottom-left-radius: 5px;
  padding: 11px 13px;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.section {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.section__title {
  text-align: center;
}

.section__sub {
  max-width: 52ch;
  margin: 16px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* ── Before / after ─────────────────────────────────────────────────────── */

.compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 48px;
}

.compare__side {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xxxl);
  padding: 26px;
  box-shadow: var(--shadow-card);
}

.compare__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.compare__before {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.compare__arrow {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Feature cards ──────────────────────────────────────────────────────── */

.cards {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xxl);
  padding: 26px 24px;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-300);
  box-shadow: var(--shadow-card);
}

.card__icon {
  display: block;
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 12px;
}

.card__title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.card__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Library ────────────────────────────────────────────────────────────── */

.books {
  list-style: none;
  padding: 0;
  margin: 44px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.book {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.book:hover {
  transform: translateY(-3px);
  border-color: var(--brand-300);
  box-shadow: var(--shadow-card);
}

.book__title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--ink);
}
.book__author {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq {
  max-width: 760px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 4px 20px;
  transition: border-color 0.2s var(--ease);
}
.faq__item:hover {
  border-color: var(--brand-300);
}
.faq__item[open] {
  border-color: var(--brand-300);
}

.faq__q {
  cursor: pointer;
  list-style: none; /* Firefox */
  padding: 16px 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq__q::-webkit-details-marker {
  display: none; /* Safari/Chrome */
}
/* Own chevron, so the disclosure state reads the same on every browser. */
.faq__q::after {
  content: "＋";
  color: var(--muted);
  font-weight: 400;
  flex: none;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.faq__item[open] .faq__q::after {
  content: "－";
  color: var(--accent);
}

.faq__a {
  margin: 0;
  padding: 0 0 18px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Closer + footer ────────────────────────────────────────────────────── */

.closer {
  text-align: center;
  padding: 88px 0;
  border-top: 1px solid var(--line);
}
.closer .btn {
  margin-top: 32px;
}

.footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.footer__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__links a {
  font-size: 0.9375rem;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.footer__links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.footer__note {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 40px 0 64px;
    text-align: center;
  }
  .lede {
    margin-inline: auto;
  }
  .cta-row {
    justify-content: center;
  }
  .phone {
    order: -1; /* lead with the product on a phone-sized screen */
  }

  .compare {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .compare__arrow {
    text-align: center;
  }
}

/* Respect the system setting: no transforms, no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .phone:hover,
  .card:hover,
  .btn--primary:hover {
    transform: none;
  }
}