/* ═══════════════════════════════════════════════════════════════════════════
   Creator Companion — Marketing Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --ink:        #06080f;
  --ink-2:      #0d1018;
  --ink-3:      #1a1d27;
  --white:      #ffffff;
  --off:        #f8f9fc;
  --surface:    #ffffff;
  --border:     #e4e7ef;

  /* Text */
  --text:       #0a0c14;
  --text-2:     #4b5568;
  --text-3:     #8892a4;

  /* Cyan accent — brand-locked per CLAUDE.md ("the only blue/cyan
     in the app/site"). Two colors only: #12C4E3 (primary) and
     #0bd2f0 (hover variant, brighter). Anything darker drifts to
     teal which the brand rule explicitly bans.
     The `--cyan-dark` and `--cyan-mid` names are vestigial — they
     used to hold a darker teal (#0891b2) and mid-teal (#0ba5c6)
     that violated the brand rule. The names are kept to avoid
     refactoring ~27 usages across this stylesheet; both now point
     to brand-correct colors, so the names mislead but the result
     is on-brand everywhere. */
  --cyan:       #12C4E3;
  --cyan-dark:  #12C4E3;   /* was #0891b2 — brand-locked to primary */
  --cyan-mid:   #0bd2f0;   /* was #0ba5c6 — now the brand hover variant */
  --cyan-dim:   rgba(18,196,227,0.12);
  --cyan-glow:  rgba(18,196,227,0.20);

  /* UI */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;

  --shadow-card: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lift: 0 8px 32px rgba(0,0,0,.10);

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --max-w: 1120px;

  /* Easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--ink); color: var(--text); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--font); line-height: 1.15; letter-spacing: -.025em; }
img { display: block; max-width: 100%; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 64px;
  background: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  border-color: var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.nav__inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 2rem;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav__logo { display: flex; align-items: center; gap: .625rem; text-decoration: none; }

/* Brand wordmark is live Fraunces 800 text (per CLAUDE.md — never a PNG).
   Dark hero: white text. Scrolled / inner pages: dark ink. */
.nav__logo-icon { height: 30px; width: auto; display: block; }
.nav__logo-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.0625rem; font-weight: 800; color: #fff;
  white-space: nowrap; letter-spacing: -.01em;
  transition: color .3s;
}

/* Scrolled white nav: keep live text, swap to dark ink. */
.nav--scrolled .nav__logo-name { color: var(--ink); }

.nav__links { display: flex; align-items: center; gap: 0.25rem; }
.nav__links a {
  font-size: .875rem; font-weight: 500; color: rgba(255,255,255,0.7);
  padding: .4rem .75rem; border-radius: var(--r-md);
  transition: color .15s, background .15s;
  text-decoration: none;
}
.nav__links a:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }
.nav--scrolled .nav__links a { color: var(--text-2); }
.nav--scrolled .nav__links a:hover { color: var(--text); background: var(--off); }
.nav__login { /* same as other links */ }

/* Nav CTA button */
.nav__links .btn {
  margin-left: .5rem;
  color: var(--ink) !important;
  background: #fff;
  border: none;
  box-shadow: none;
  font-size: .8125rem;
  padding: .45rem 1.1rem;
}
.nav__links .btn:hover { background: rgba(255,255,255,.85) !important; color: var(--ink) !important; text-decoration: none; transform: none; }
.nav--scrolled .nav__links .btn { background: var(--ink); color: #fff !important; }
.nav--scrolled .nav__links .btn:hover { background: var(--ink-3) !important; color: #fff !important; }

/* Hamburger */
.nav__hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 6px;
}
.nav__hamburger span {
  display: block; height: 2px; background: rgba(255,255,255,.85); border-radius: 2px;
  transform-origin: center; transition: transform .25s var(--ease), opacity .2s;
}
.nav--scrolled .nav__hamburger span { background: var(--text); }
.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 190;
  background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; padding: 1rem 2rem 1.5rem; gap: .25rem;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: transform .25s var(--ease), opacity .2s;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a {
  color: rgba(255,255,255,.7); font-size: 1rem; font-weight: 500;
  padding: .625rem 0; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobile-menu a:last-child { border-bottom: none; margin-top: .75rem; }
.mobile-menu .btn { text-align: center; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font); font-weight: 600; line-height: 1;
  border-radius: var(--r-lg); border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .15s var(--ease), box-shadow .15s, color .15s;
  font-size: .9375rem; padding: .75rem 1.5rem;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Hero buttons */
.btn--hero-primary {
  background: #fff; color: var(--ink);
  font-size: 1rem; padding: .9rem 2.25rem; border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 4px 24px rgba(0,0,0,.3);
}
.btn--hero-primary:hover { background: #f0f3ff; color: var(--ink); }

.btn--hero-ghost {
  color: rgba(255,255,255,.6); font-size: .9375rem; padding: .9rem 1.5rem;
  background: none; border-radius: var(--r-xl);
}
.btn--hero-ghost:hover { color: #fff; background: rgba(255,255,255,.07); }

/* Plan buttons */
.btn--plan-outline {
  width: 100%; padding: .875rem; border-radius: var(--r-lg);
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border); font-size: .9375rem;
}
.btn--plan-outline:hover { background: var(--off); border-color: var(--text-3); }

.btn--plan-primary {
  width: 100%; padding: .875rem; border-radius: var(--r-lg);
  background: var(--cyan); color: #fff; font-size: .9375rem;
  box-shadow: 0 4px 20px rgba(18,196,227,.35);
}
.btn--plan-primary:hover { background: var(--cyan-mid); }

/* Install */
.btn--install {
  background: var(--off); color: var(--text);
  font-size: .9375rem; padding: .75rem 1.75rem; border-radius: var(--r-lg);
  border: 1.5px solid var(--border); margin-top: 1.75rem;
}
.btn--install:hover { background: #edf0f7; }

/* Final CTA */
.btn--cta-primary {
  background: #fff; color: var(--ink);
  font-size: 1.0625rem; padding: 1rem 2.5rem; border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 8px 32px rgba(0,0,0,.4);
}
.btn--cta-primary:hover { background: #f0f3ff; }

/* Old compat */
.btn--primary { background: var(--cyan); color: #fff; box-shadow: 0 2px 8px rgba(18,196,227,.35); }
.btn--primary:hover { background: var(--cyan-mid); color: #fff; }
.btn--secondary { background: var(--cyan-dim); color: var(--cyan-dark); border: 1.5px solid var(--cyan); }
.btn--secondary:hover { background: var(--cyan); color: #fff; }
.btn--outline { background: transparent; color: var(--cyan-dark); border: 1.5px solid var(--cyan-dark); }
.btn--outline:hover { background: var(--cyan-dark); color: #fff; }
.btn--sm { padding: .5rem 1rem; font-size: .8125rem; border-radius: var(--r-md); }
.btn--lg { padding: .9rem 2rem; font-size: 1.0625rem; border-radius: var(--r-xl); }
.btn--full { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7rem 2rem 0;
  text-align: center;
}

/* Radial glow that gently cycles through cyan → violet → pink behind
   the waves. Sits at z-index unset so the waves (z-index: 1) layer on
   top of it. */
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 55%,
    rgba(18,196,227,.22) 0%, transparent 70%);
  pointer-events: none;
  animation: hero-glow-shift 18s ease-in-out infinite;
}
@keyframes hero-glow-shift {
  0%, 100% {
    background: radial-gradient(ellipse 60% 50% at 50% 55%,
      rgba(18,196,227,.22) 0%, transparent 70%);
  }
  33% {
    background: radial-gradient(ellipse 60% 50% at 50% 55%,
      rgba(168,85,247,.22) 0%, transparent 70%);
  }
  66% {
    background: radial-gradient(ellipse 60% 50% at 50% 55%,
      rgba(236,72,153,.22) 0%, transparent 70%);
  }
}

/* Three stroked waves drifting horizontally. The stroke uses the
   shared <linearGradient id="hero-rainbow"> defined inline at the top
   of the body — cyan → indigo → violet → pink → amber across the
   wave's length. The drop-shadow keeps the cyan/violet glow read
   from the original W7 design. */
.hero__wave {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.hero__wave path {
  fill: none;
  stroke: url(#hero-rainbow);
  stroke-width: 3;
  filter: drop-shadow(0 0 12px rgba(168,85,247,.5));
}
.hero__wave--1 {
  top: 0;
  animation: hero-wave-drift 22s ease-in-out infinite;
}
.hero__wave--1 path { opacity: .85; }
.hero__wave--2 {
  top: 0;
  animation: hero-wave-drift 28s ease-in-out infinite reverse;
}
.hero__wave--2 path { opacity: .50; stroke-width: 2; }
.hero__wave--3 {
  top: 0;
  animation: hero-wave-drift 34s ease-in-out infinite;
}
.hero__wave--3 path { opacity: .30; stroke-width: 1.5; }

@keyframes hero-wave-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-90px); }
}

/* Respect user motion preferences — pause the wave drift and glow
   shift to a static composition for anyone who's opted out. The
   gradient + glow still render. */
@media (prefers-reduced-motion: reduce) {
  .hero__wave,
  .hero__glow { animation: none !important; }
}

/* Bumped to z-index: 2 so the waves (z-index: 1) sit safely behind. */
/* max-width bumped 820 → 1100 May 2026 to give the title room to
   render on two lines at a bigger font (see .hero__title below).
   The .hero__sub keeps its own narrower max-width:580 so paragraph
   copy stays at a readable measure; only the title benefits from
   the extra width. */
.hero__content { position: relative; z-index: 2; max-width: 1100px; width: 100%; }

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  padding: .4rem 1rem; border-radius: 100px; margin-bottom: 2.5rem;
}
.hero__badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.hero__title {
  /* Sizing iterated twice in May 2026:
     · Original: clamp(3rem, 7.5vw, 5.5rem) — too big against the
       820px container; "The digital companion" wrapped before the
       manual <br> could fire, producing 3-4 lines on desktop.
     · First fix: clamp(2.25rem, 6.5vw, 4.25rem) — shrank the font
       so it fit the 820px container, but felt visibly small on
       both desktop and mobile.
     · Now: clamp(3rem, 7vw, 5rem) paired with the widened
       hero__content (1100px). Mobile min restored to 3rem (matches
       the original feel Chris liked). Desktop max held at 5rem so
       the longer 21-char title line fits in 1100px even at the
       weight-800 Plus Jakarta width — preserves the visible "hero
       headline" weight without the wrapping bug.
     text-wrap: balance is a modern CSS hint that asks the browser
     to balance line lengths intelligently; combined with the
     manual <br>, this delivers a clean two-line layout. Older
     browsers without support fall back to honoring the <br>. */
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 1.75rem;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  /* Gradient stops compressed May 2026 to push the cyan onto
     "creative" as well as "people". Previously white 30% → cyan
     100% kept the transition stretched across both words, so
     "creative" rendered mostly white and only "people" read as
     properly cyan. Now white 0% → cyan 45% means cyan dominates
     by the end of "creative" and "people" sits in solid cyan. */
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 45%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* .hero__audience rule lived here until May 2026 — the audience-
   naming line ("For writers, artists, musicians, filmmakers...")
   was removed once the new sub copy made the "support for
   creative practice" positioning explicit enough that the
   redundant audience callout could go. Rule deleted to keep the
   stylesheet honest; restore from git history if it ever
   returns. */

.hero__sub {
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  color: #fff; line-height: 1.75;
  max-width: 580px; margin: 0 auto 3rem;
}

.hero__actions {
  display: flex; align-items: center; justify-content: center;
  gap: .875rem; flex-wrap: wrap;
  margin-bottom: 0;
}

/* Strips used to be pinned to the hero's bottom edge via
   margin-top: auto, with a border-top giving them a "hero footer
   band" feel. On tall desktop viewports that produced a large
   blank gap between the CTA and the bullets that wasn't
   carrying its weight. Now they flow naturally below the
   centered hero__content with a small margin gap — the whole
   hero content (text + CTA + strips) reads as one centered
   block instead of two visually-separated pieces. The 100vw
   + border-top + padding still preserves the "horizontal rail
   of icons" visual rhythm. */
.hero__strips {
  position: relative; z-index: 1;
  width: 100vw;
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 1.375rem 2rem;
  margin-top: 2.5rem;
}
.hero__strip {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 500; color: rgba(255,255,255,.4);
  padding: .375rem 2rem;
}
.hero__strip svg { color: var(--cyan); opacity: .8; }
.hero__strip-div { width: 1px; height: 20px; background: rgba(255,255,255,.1); }

/* ── Shared section tokens ───────────────────────────────────────────────── */
.section-eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: 1.25rem;
}
.section-eyebrow--inv { color: rgba(255,255,255,.4); }

.section-heading {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800; letter-spacing: -.03em;
  color: var(--text); margin-bottom: 1.25rem;
}
.section-heading--inv { color: #fff; }

.section-sub {
  font-size: 1.0625rem; color: var(--text-2);
  max-width: 560px; line-height: 1.75; margin-bottom: 4rem;
}
.section-sub--inv { color: rgba(255,255,255,.45); }

/* ── Fade-in (shared) ────────────────────────────────────────────────────── */
.step, .plan, .feat {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.step.visible, .plan.visible, .feat.visible {
  opacity: 1; transform: translateY(0);
}

/* ── Feature sections ────────────────────────────────────────────────────── */
.feat-section {
  padding: 7rem 0 8rem;
  border-bottom: 1.5px solid var(--border);
}
.feat-section--light { background: var(--white); }
.feat-section--dim   { background: var(--off); }
.feat-section--dark  { background: #2a2f38; border-color: rgba(255,255,255,.07); }

/* Layout: text-left = copy|visual, text-right = visual|copy */
.feat {
  display: grid;
  gap: 5rem;
  align-items: center;
}
.feat--text-left  { grid-template-columns: 1.15fr 1fr; }
.feat--text-right { grid-template-columns: 1.15fr 1fr; }
.feat--text-right .feat__copy  { order: 2; }
.feat--text-right .feat__visual { order: 1; }

/* Copy */
.feat__eyebrow {
  display: block;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan-dark); margin-bottom: 1.25rem;
}
.feat__eyebrow--inv { color: var(--cyan); }

.feat__heading {
  font-size: clamp(2rem, 3.5vw, 2.875rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.18;
  color: var(--text); margin-bottom: 1.25rem;
}
.feat__heading--inv { color: #fff; }

.feat__body {
  font-size: 1.0625rem; color: var(--text-2); line-height: 1.78;
  margin-bottom: 2rem; max-width: 460px;
}
.feat__body--inv { color: rgba(255,255,255,.92); }

.feat__bullets {
  list-style: none; display: flex; flex-direction: column; gap: .75rem;
}
.feat__bullets li {
  display: flex; align-items: flex-start; gap: .625rem;
  font-size: .9375rem; color: var(--text-2); line-height: 1.5;
}
.feat__bullets li svg { flex-shrink: 0; margin-top: .15rem; color: var(--cyan-dark); }
.feat__bullets--inv li { color: rgba(255,255,255,.92); }
.feat__bullets--inv li svg { color: var(--cyan); }

/* Visual containers */
.feat__visual { display: flex; align-items: center; justify-content: center; }
.feat__visual--centered { justify-content: center; }

/* ── Phone mockup ────────────────────────────────────────────────────────── */
.mock-phone {
  width: 300px;
  background: #111318;
  border-radius: 48px;
  border: 8px solid #1e2130;
  /* Simple drop shadow only — no inner/outer 1px highlights.
     The original stack added a subtle inset white edge that read as
     a faint line on the left side once the screen interior went grey
     (#e8e9eb via the --img variant). */
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.mock-phone__notch {
  width: 110px; height: 30px;
  background: #c4c4c4;
  border-radius: 0 0 20px 20px;
  margin: 0 auto;
  position: relative; z-index: 2;
}
.mock-phone__screen {
  background: #111318;
  min-height: 580px;
  display: flex; flex-direction: column;
  padding-bottom: 0;
}
/* Variant: full-bleed image fills the screen (no .mapp-* children).
   The source screenshot has an iOS safe-area shadow baked into its
   left edge. To make that shadow flow continuously into the screen
   area around the notch, both .mock-phone (parent, via :has()) and
   .mock-phone__screen--img use the SAME 750x4 slice extracted from
   the screenshot's top row as a repeat-y background. The slice and
   the image both scale to 100% of the same container width, so
   their gradients line up pixel-for-pixel — no visible seam.

   Per-mockup customization: each .mock-phone instance sets
   `--mock-edge: url('images/<name>-edge.png')` inline. The custom
   property inherits from .mock-phone down to its --img child.  */
.mock-phone:has(.mock-phone__screen--img) {
  background-image: var(--mock-edge);
  background-repeat: repeat-y;
  background-position: top left;
  background-size: 100% auto;
}
.mock-phone__screen--img {
  background-image: var(--mock-edge);
  background-repeat: repeat-y;
  background-position: top left;
  background-size: 100% auto;
  min-height: 0;
  padding: 0;
}
.mock-phone__img {
  display: block;
  width: 100%;
  height: auto;
}

/* App header */
.mapp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .625rem 1.125rem .375rem;
}
.mapp-title { font-size: .9375rem; font-weight: 700; color: rgba(255,255,255,.9); }
.mapp-streak {
  display: flex; align-items: center; gap: .3rem;
  font-size: .875rem; font-weight: 700; color: var(--cyan);
  background: rgba(18,196,227,.1); border: 1px solid rgba(18,196,227,.2);
  padding: .3rem .6rem; border-radius: 100px;
}
.mapp-streak svg { color: #ff7a00; }

.mapp-month {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.3);
  padding: .25rem 1.125rem .5rem;
}

/* Week strip */
.mapp-week {
  display: flex; gap: .35rem; padding: 0 1.125rem .875rem;
}
.mw-day {
  flex: 1; aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.mw-day span { font-size: .6rem; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.25); }
.mw-day--done { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.mw-day--done span { color: rgba(255,255,255,.7); }
.mw-day--today { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(18,196,227,.5); }
.mw-day--today span { color: #fff; }

/* Entry list */
.mapp-entries { flex: 1; display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,.05); margin-top: .25rem; }
.mentry {
  background: #111318;
  padding: .875rem 1.125rem;
  cursor: pointer;
}
.mentry__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.mentry__date { font-size: .6875rem; font-weight: 600; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .05em; }
.mentry__mood { font-size: .875rem; }
.mentry__title { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: .25rem; line-height: 1.4; }
.mentry__preview { font-size: .75rem; color: rgba(255,255,255,.3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Mobile nav bar */
.mapp-nav {
  display: flex; background: #0d0f17;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: .5rem 0 .75rem;
}
.mnav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  color: rgba(255,255,255,.3); font-size: .55rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.mnav-item--active { color: var(--cyan); }

/* ── Reminders mockup (Section 2) ────────────────────────────────────────
   Lives inside .mock-phone__screen. Five-row list matching the actual
   Reminders screen in the app: time on the left, message in the middle,
   on/off toggle on the right. Empty/off rows are dimmed so the active
   ones read as the primary content. */
.mr-list {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 1px;
  background: rgba(255,255,255,.05);
  margin-top: .5rem;
}
.mr-row {
  background: #111318;
  display: grid;
  grid-template-columns: 66px 1fr 32px;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1.125rem;
}
.mr-row--empty { opacity: .35; }
.mr-time {
  font-size: .75rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.mr-msg {
  font-size: .75rem; font-weight: 500;
  color: rgba(255,255,255,.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mr-toggle {
  width: 26px; height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  position: relative;
  flex-shrink: 0;
  transition: background .15s;
}
.mr-toggle::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  top: 2px; left: 2px;
  transition: transform .15s;
}
.mr-toggle--on {
  background: var(--cyan);
}
.mr-toggle--on::after {
  background: #fff;
  transform: translateX(10px);
}

/* ── To-do mockup (Section 3) ────────────────────────────────────────────
   Persistent add-an-item bar at the top, drag-handle + circle-check +
   text rows, a "Done" divider, then completed rows with line-through. */
.mtodo-add {
  display: flex; align-items: center;
  gap: .5rem;
  padding: .625rem 1.125rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-top: .25rem;
}
.mtodo-add-plus {
  color: rgba(255,255,255,.35);
  font-size: 1rem; line-height: 1; font-weight: 300;
  width: 14px; text-align: center;
}
.mtodo-add-text {
  font-size: .75rem; color: rgba(255,255,255,.35); font-weight: 500;
}
.mtodo-list {
  flex: 1;
  display: flex; flex-direction: column;
}
.mtodo-item {
  display: flex; align-items: center;
  gap: .5rem;
  padding: .6875rem 1.125rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.mtodo-handle {
  font-size: .625rem; color: rgba(255,255,255,.2);
  letter-spacing: -2px;
  width: 10px;
  user-select: none;
}
.mtodo-handle--hidden { visibility: hidden; }
.mtodo-check {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  font-size: .625rem;
  color: #fff;
  background: transparent;
}
.mtodo-check--checked {
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 700;
}
.mtodo-text {
  font-size: .75rem; font-weight: 500;
  color: rgba(255,255,255,.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtodo-text--done {
  color: rgba(255,255,255,.3);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.2);
}
.mtodo-item--done { background: rgba(255,255,255,.015); }
.mtodo-divider {
  font-size: .625rem; font-weight: 700;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .875rem 1.125rem .5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: .25rem;
}

/* ── Browser mockup ──────────────────────────────────────────────────────── */
.mock-browser {
  background: #13151e;
  border-radius: var(--r-xl);
  border: 1.5px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
  width: 100%; max-width: 560px;
}
.mock-browser__bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  background: #0d0f17;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mock-browser__dots { display: flex; gap: .4rem; }
.mock-browser__dots span { width: 10px; height: 10px; border-radius: 50%; }
.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }
.mock-browser__url {
  flex: 1; background: rgba(255,255,255,.06); border-radius: 6px;
  font-size: .6875rem; color: rgba(255,255,255,.3); padding: .3rem .75rem; text-align: center;
}

/* Desktop layout inside browser */
.mock-browser__body { display: flex; min-height: 420px; }

.mdesk-sidebar {
  width: 52px; background: #0d0f17;
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem 0; gap: .5rem; flex-shrink: 0;
}
.mdesk-sidebar__logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--cyan); color: var(--ink);
  font-size: .625rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .75rem;
}
.mdesk-nav { display: flex; flex-direction: column; gap: .25rem; width: 100%; align-items: center; }
.mdesk-nav-item {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.25);
}
.mdesk-nav-item--active { background: rgba(255,255,255,.08); color: var(--cyan); }

/* Editor area */
.mdesk-editor { flex: 1; padding: 1.5rem 2rem; display: flex; flex-direction: column; }
.mdesk-editor__topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mdesk-editor__date { font-size: .75rem; color: rgba(255,255,255,.3); font-weight: 500; }
.mdesk-editor__actions { display: flex; align-items: center; gap: .5rem; }
.mdesk-tag {
  font-size: .6875rem; font-weight: 600;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06); border-radius: 100px; padding: .2rem .55rem;
}
.mdesk-mood { font-size: .875rem; }

.mdesk-editor__title {
  font-size: 1.0625rem; font-weight: 700; color: rgba(255,255,255,.9);
  margin-bottom: 1.125rem; line-height: 1.4;
}
.mdesk-editor__body { flex: 1; }
.mdesk-editor__para {
  font-size: .8125rem; color: rgba(255,255,255,.45); line-height: 1.75;
  margin-bottom: .875rem;
}
.mdesk-editor__cursor {
  display: inline-block; width: 2px; height: 1rem;
  background: var(--cyan); vertical-align: middle;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

.mdesk-editor__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .875rem; border-top: 1px solid rgba(255,255,255,.07); margin-top: auto;
}
.mdesk-wc  { font-size: .6875rem; color: rgba(255,255,255,.25); }
.mdesk-saved { font-size: .6875rem; color: rgba(18,196,227,.7); }

/* ── Daily Spark mockup ──────────────────────────────────────────────────── */
.mock-spark-wrap {
  position: relative;
  width: 100%; max-width: 460px;
}
.mock-spark--behind {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 40px);
  height: 80px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: var(--r-2xl);
  z-index: 0;
}
.mock-spark {
  background: #1a1d2e;
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--r-2xl);
  padding: 2.25rem;
  position: relative; z-index: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.mock-spark__label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan);
  background: rgba(18,196,227,.1); border: 1px solid rgba(18,196,227,.2);
  padding: .3rem .75rem; border-radius: 100px; margin-bottom: .75rem;
}
.mock-spark__category {
  font-size: .75rem; color: rgba(255,255,255,.35); font-weight: 500;
  margin-bottom: 1.5rem;
}
.mock-spark__quote {
  font-size: .9375rem; color: rgba(255,255,255,.8); line-height: 1.75;
  font-style: italic; margin-bottom: 1rem;
  border-left: 2px solid var(--cyan); padding-left: 1.125rem;
}
.mock-spark__author {
  font-size: .8125rem; color: rgba(255,255,255,.35); margin-bottom: 1.5rem;
}
.mock-spark__takeaway {
  font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.65;
  background: rgba(255,255,255,.04); border-radius: var(--r-lg);
  padding: 1rem 1.125rem; margin-bottom: 1.5rem;
}
.mock-spark__takeaway strong { color: rgba(255,255,255,.75); }
.mock-spark__actions { display: flex; gap: .625rem; }
.mock-spark__btn {
  font-size: .8125rem; font-weight: 600; font-family: var(--font);
  padding: .55rem 1.1rem; border-radius: var(--r-md); cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
}
.mock-spark__btn--fav {
  background: rgba(18,196,227,.15); border-color: rgba(18,196,227,.3);
  color: var(--cyan); display: flex; align-items: center; gap: .375rem;
}

/* ── Trust / Privacy + Ownership mockup ─────────────────────────────────── */
.mock-trust {
  display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 460px;
}
.mock-trust-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-2xl); padding: 2rem;
  box-shadow: var(--shadow-card);
}
.mock-trust-card__icon {
  width: 48px; height: 48px; border-radius: var(--r-lg);
  background: var(--off); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-dark); margin-bottom: 1rem;
}
.mock-trust-card h4 {
  font-size: 1rem; font-weight: 700; color: var(--text);
  margin-bottom: .5rem; letter-spacing: -.01em;
}
.mock-trust-card p { font-size: .875rem; color: var(--text-2); line-height: 1.65; margin-bottom: 1rem; }
.mock-trust-card__pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.mock-trust-card__pills span {
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan-dark);
  background: rgba(18,196,227,.08); border: 1px solid rgba(18,196,227,.18);
  padding: .25rem .65rem; border-radius: 100px;
}

/* ── How it works ────────────────────────────────────────────────────────── */
.how {
  background: var(--ink);
  padding: 8rem 0;
}

.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  margin-top: 1rem;
}
.step {
  position: relative; padding-top: 1.5rem;
}
.step__num {
  font-size: 4rem; font-weight: 800; letter-spacing: -.04em;
  color: rgba(255,255,255,.07); line-height: 1;
  margin-bottom: 1.25rem;
}
.step h3 {
  font-size: 1.0625rem; font-weight: 700; color: rgba(255,255,255,.9);
  margin-bottom: .625rem; letter-spacing: -.02em;
}
.step p { font-size: .9375rem; color: rgba(255,255,255,.4); line-height: 1.7; }

/* Connecting line */
.step::after {
  content: ''; position: absolute;
  top: calc(1.5rem + 2rem); right: -1rem;
  width: 2rem; height: 1px;
  background: rgba(255,255,255,.1);
}
.step:last-child::after { display: none; }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pricing-section {
  background: var(--off);
  padding: 8rem 0;
}

.plans {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem; max-width: 780px; margin: 0 auto;
}
/* Single-plan layout — trial-only model. One card, centered, wider. */
.plans--single {
  grid-template-columns: 1fr;
  max-width: 460px;
}

.plan {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2xl); padding: 2.75rem;
  position: relative; overflow: hidden;
}
.plan:hover { box-shadow: var(--shadow-lift); }

.plan--featured {
  background: var(--ink);
  border-color: transparent;
}

.plan__badge {
  display: inline-block;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--cyan);
  padding: .25rem .75rem; border-radius: 100px;
  margin-bottom: 1.5rem;
}

.plan__name {
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: .625rem;
}
.plan--featured .plan__name { color: rgba(255,255,255,.4); }

.plan__price { display: flex; align-items: baseline; gap: .25rem; margin-bottom: .75rem; }
.plan__amount { font-size: 3rem; font-weight: 800; letter-spacing: -.04em; color: var(--text); }
.plan__per { font-size: .9375rem; color: var(--text-3); }
.plan--featured .plan__amount { color: #fff; }
.plan--featured .plan__per { color: rgba(255,255,255,.4); }

.plan__annual {
  font-size: .8125rem; color: var(--cyan);
  margin-bottom: 2rem;
}
/* "— save $22" gets bumped to bold uppercase brand-cyan so it
   visually echoes the SAVE! call-out on the app's account-page
   subscribe row. Same hook, same treatment — brand consistency
   between the marketing pitch and the in-app upsell. */
.plan__save {
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--cyan);
  text-transform: uppercase;
  font-size: .75rem;
  margin-left: .25rem;
}

.plan__features {
  list-style: none; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.5rem;
}
.plan__features li {
  display: flex; align-items: center; gap: .625rem;
  font-size: .9375rem; color: var(--text-2);
}
.plan__features li svg { flex-shrink: 0; color: var(--cyan-dark); }
.plan__feature--dim { opacity: .4; }
.plan--featured .plan__features li { color: rgba(255,255,255,.65); }
.plan--featured .plan__features li svg { color: var(--cyan); }
.plan--featured .plan__feature--dim { opacity: .3; }

.pricing-link {
  text-align: center; margin-top: 2.5rem;
  font-size: .9375rem;
}
.pricing-link a { color: var(--cyan-dark); font-weight: 500; }
.pricing-link a:hover { color: var(--text); }

/* ── Feature showcase ────────────────────────────────────────────────────
   Comprehensive "everything-you-get" block that lives directly under
   pricing. Cream gradient surface matches the Daily Spark hero cards
   inside the app — feels "abundant and warm" against the white pricing
   card above and the white install strip below, so it reads as the
   value moment of the page.

   Layout: 2-column card grid on desktop, single-column on mobile.
   Each card is benefit-led copy + a long bulleted feature list. The
   list is meant to feel exhaustive on purpose — the more visible
   value the visitor can scan, the more "less than a coffee" feels
   like an understatement.

   Closing micro-CTA reframes the cost at the bottom of the scroll
   ("less than a single coffee") and offers the trial again with
   friction-killing fine print. */
.feature-showcase {
  background: linear-gradient(180deg, #fdfaf2 0%, #f6f1e6 100%);
  padding: 6rem 0;
  border-top: 1px solid rgba(190,170,130,.22);
  border-bottom: 1px solid rgba(190,170,130,.22);
  position: relative;
  overflow: hidden;
}
/* Subtle cyan glow in the top-right corner — matches the radial
   glow on the app's Daily Spark hero card. Sits behind the
   content, low opacity, decorative only. */
.feature-showcase::before {
  content: '';
  position: absolute;
  top: -10%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(18,196,227,.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.feature-showcase .container { position: relative; z-index: 1; }

.feature-showcase__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}
.feature-showcase__eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--cyan-dark);
  margin-bottom: 1rem;
}
.feature-showcase__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}
.feature-showcase__sub {
  font-size: 1.125rem;
  color: var(--text-2);
  line-height: 1.6;
}

.feature-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}
@media (max-width: 720px) {
  .feature-showcase__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0 1rem;
  }
}

.feat-card {
  background: #fff;
  border: 1px solid rgba(190,170,130,.18);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
@media (max-width: 720px) {
  .feat-card { padding: 1.75rem 1.5rem; }
}
.feat-card__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--cyan-dim);
  color: var(--cyan-dark);
  border-radius: 14px;
  margin-bottom: 1.25rem;
}
.feat-card__eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cyan-dark);
  margin-bottom: .5rem;
}
.feat-card__heading {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: .875rem;
}
.feat-card__benefit {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 1.5rem;
}
.feat-card__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: .625rem;
}
.feat-card__list li {
  display: flex; align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text);
}
.feat-card__list li svg {
  flex-shrink: 0;
  color: var(--cyan-dark);
  margin-top: .3125rem;
}

/* Closing block — sits at the bottom of the showcase, reframing
   the cost at the moment the visitor has finished absorbing the
   full value inventory. The price-line emphasizes the brand cyan
   to echo the SAVE callout on the pricing card above. */
.feature-showcase__close {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.feature-showcase__close-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .5rem;
  letter-spacing: -.015em;
}
.feature-showcase__close-price strong {
  color: var(--cyan-dark);
  font-weight: 800;
}
.feature-showcase__close-line {
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: 2rem;
  line-height: 1.55;
}
.feature-showcase__close-btn {
  /* Promoted to the dark-ink CTA-primary look matching the final
     CTA at the bottom of the page. Same visual language so the
     visitor recognizes "this is the action button" even after a
     long scroll. */
  background: var(--ink);
  color: #fff;
}
.feature-showcase__close-btn:hover {
  background: var(--cyan); color: #fff;
}
.feature-showcase__close-fine {
  font-size: .875rem;
  color: var(--text);
  margin-top: 1.5rem;
  letter-spacing: .005em;
}

/* ── Trust band ──────────────────────────────────────────────────────────
   Sits between Pricing and Install strip. Compact 3-icon row that
   replaces what used to be the full Privacy + Ownership feature
   section (~screen of scroll for a trust check). Off-white
   background contrasts gently with the white install-strip
   directly below; same border treatment as install-strip keeps the
   transition visually clean. Items stack on narrow viewports
   (< 720px). */
.trust-band {
  background: var(--off);
  border-top: 1.5px solid var(--border);
  padding: 3rem 0;
}
.trust-band__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 720px) {
  .trust-band__items {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.trust-item__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cyan-dim);
  color: var(--cyan-dark);
}
.trust-item__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .25rem;
  letter-spacing: -.01em;
}
.trust-item__sub {
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.5;
}

/* ── Install strip ───────────────────────────────────────────────────────── */
.install-strip {
  background: var(--white);
  border-top: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
  padding: 6rem 0;
}
.install-inner {
  display: flex; align-items: center; gap: 6rem; flex-wrap: wrap;
}
.install-text { flex: 1; min-width: 260px; }
.install-text h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800;
  letter-spacing: -.03em; color: var(--text); margin-bottom: .75rem;
}
.install-text p { font-size: 1rem; color: var(--text-2); line-height: 1.7; max-width: 380px; }

.install-steps { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 1rem; }
.install-step {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
}
.install-step__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-md);
  background: #fff; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-dark);
}
.install-step__label { font-size: .9375rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }
.install-step__desc { font-size: .875rem; color: var(--text-2); line-height: 1.55; }

/* ── Homepage FAQ accordion ──────────────────────────────────────────────
   Curated subset of the in-app FAQ. Renders from /v1/faq/public, filtered
   for admin-flagged `isFeaturedOnHomepage` entries. Uses native
   <details>/<summary> so it's keyboard-accessible and toggles without JS.
   Section starts `hidden` and is unhidden by the inline script after a
   successful fetch with at least one item. */
.faq-home {
  padding: 7rem 0 8rem;
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
}
.faq-home__heading {
  font-size: clamp(2rem, 3.5vw, 2.875rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.18;
  color: var(--text);
  text-align: center;
  margin: 0 auto 3rem;
  max-width: 720px;
}
.faq-home__list {
  max-width: 720px;
  margin: 0 auto;
}
.faq-home__item {
  border-bottom: 1px solid var(--border);
}
.faq-home__item:first-child {
  border-top: 1px solid var(--border);
}
/* Native <summary> renders a disclosure triangle by default — kill it so
   our custom + icon is the only affordance. */
.faq-home__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem; font-weight: 600; color: var(--text);
  line-height: 1.4;
}
.faq-home__q::-webkit-details-marker { display: none; }
.faq-home__q-text { flex: 1; }
.faq-home__icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  color: var(--text-2);
  transition: transform .25s ease, color .15s ease;
}
.faq-home__item:hover .faq-home__icon { color: var(--cyan); }
/* + → × on open */
.faq-home__item[open] .faq-home__icon { transform: rotate(45deg); color: var(--cyan); }
.faq-home__a {
  padding: 0 0 1.5rem;
  font-size: 1rem; color: var(--text-2); line-height: 1.65;
  /* Preserve admin-authored linebreaks (FAQ answers in seed migrations
     sometimes use \n for paragraph breaks). */
  white-space: pre-wrap;
}

/* ── Final CTA ───────────────────────────────────────────────────────────── */
.cta-final {
  position: relative; overflow: hidden;
  background: var(--ink);
  padding: 9rem 0 10rem;
  text-align: center;
}
.cta-final__glow {
  position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18,196,227,.14) 0%, transparent 70%);
  pointer-events: none;
}
.cta-final__eyebrow {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 1.5rem;
}
.cta-final__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800; letter-spacing: -.035em; color: #fff;
  margin-bottom: 1.5rem; position: relative;
}
.cta-final__title em {
  font-style: italic;
  background: linear-gradient(135deg, #fff 30%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-final__sub {
  font-size: 1.0625rem; color: rgba(255,255,255,.45);
  max-width: 460px; margin: 0 auto 3rem; line-height: 1.75;
}
/* Friction-killer line sits between the CTA button and the
   __note line. Brighter than __note (which is genuinely tertiary
   pricing + trial detail) because this is the actual anxiety-
   killer: "this isn't going to be a 10-form-field signup." */
.cta-final__friction {
  font-size: .9375rem; color: rgba(255,255,255,.65);
  margin-top: 1.25rem;
  font-weight: 500;
  letter-spacing: -.005em;
}
.cta-final__note {
  font-size: .8125rem; color: rgba(255,255,255,.25);
  margin-top: 1rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink-2);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 3rem 0 2.5rem;
}
.site-footer__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Footer logo: icon + live Fraunces wordmark, mirroring the nav.
   The icon is the cyan-on-black logo-icon.png; on the dark footer
   the black square blends in and only the cyan brand mark reads.
   No brightness/invert filter — render the icon as-is. */
.site-footer__logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
}
.site-footer__logo-icon {
  height: 26px;
  width: auto;
  display: block;
}
.site-footer__logo-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em;
  color: rgba(255,255,255,.6);
}
.site-footer__logo:hover .site-footer__logo-name { color: rgba(255,255,255,.9); }
.site-footer__nav { display: flex; gap: 2rem; flex-wrap: wrap; }
.site-footer__nav a { font-size: .875rem; color: rgba(255,255,255,.35); transition: color .15s; text-decoration: none; }
.site-footer__nav a:hover { color: rgba(255,255,255,.7); text-decoration: none; }
.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  font-size: .8125rem; color: rgba(255,255,255,.2);
}
/* Circular social links — clean monochrome marks (Bluesky, Mastodon,
   Substack) that read as a set; muted on the dark footer, cyan-accented
   on hover. Hover gated to pointer-fine so iOS doesn't two-tap. */
.site-footer__socials { display: flex; gap: .625rem; }
.site-footer__social {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.14);
  transition: color .15s, border-color .15s, background .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.site-footer__social svg { display: block; }
@media (hover: hover) and (pointer: fine) {
  .site-footer__social:hover {
    color: #fff;
    border-color: var(--cyan, #12C4E3);
    background: rgba(18,196,227,.12);
    transform: translateY(-1px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Inner pages — shared styles used by pricing.html, signup.html
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page chrome (inner pages have white background) */
body.page-inner { background: #fff; }

/* Inner nav override (always white) */
body.page-inner .nav {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
body.page-inner .nav__logo img { filter: none; }
body.page-inner .nav__links a { color: var(--text-2); }
body.page-inner .nav__links a:hover { color: var(--text); background: var(--off); }
body.page-inner .nav__links .btn { background: var(--ink); color: #fff !important; }
body.page-inner .nav__links .btn:hover { background: var(--ink-3) !important; color: #fff !important; }
body.page-inner .nav__hamburger span { background: var(--text); }
/* Inner pages always have white nav — keep the icon + live wordmark visible,
   just swap the text color to dark. Live Fraunces beats a PNG raster on any
   hi-DPI display, and avoids the brand-wordmark-as-PNG violation called out
   in CLAUDE.md. */
body.page-inner .nav__logo-name { color: var(--ink); }

/* Page hero */
.page-hero {
  padding: 6rem 0 5rem; text-align: center;
  background: var(--off);
  border-bottom: 1.5px solid var(--border);
  margin-top: 64px;
}
.page-hero__title {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--text); margin-bottom: .875rem;
}
.page-hero__sub { font-size: 1.0625rem; color: var(--text-2); max-width: 520px; margin: 0 auto; line-height: 1.7; }

/* ── Form card (signup.html) ─────────────────────────────────────────────── */
.form-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-2xl); padding: 3rem;
  box-shadow: var(--shadow-lift); max-width: 480px; margin: 0 auto;
}
.form-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; color: var(--text); margin-bottom: .375rem; }
.form-sub { font-size: .9375rem; color: var(--text-2); margin-bottom: 2rem; line-height: 1.6; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.125rem; }
.field label { font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.field input, .field select {
  font-family: var(--font); font-size: .9375rem; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: .7rem 1rem; width: 100%; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus {
  border-color: var(--cyan-dark);
  box-shadow: 0 0 0 3px rgba(18,196,227,.12);
}
.field input::placeholder { color: var(--text-3); }
.field-hint { font-size: .8125rem; color: var(--text-3); margin-top: .2rem; }
.form-divider { border: none; border-top: 1.5px solid var(--border); margin: 1.5rem 0; }
.form-error {
  background: #fef2f2; color: #b91c1c; border: 1.5px solid #fecaca;
  border-radius: var(--r-lg); padding: .75rem 1rem; font-size: .875rem;
  margin-bottom: 1rem; display: none;
}
.form-success {
  background: #f0fdf4; color: #15803d; border: 1.5px solid #bbf7d0;
  border-radius: var(--r-lg); padding: .75rem 1rem; font-size: .875rem;
  margin-bottom: 1rem; display: none;
}
.form-footer { font-size: .875rem; color: var(--text-3); text-align: center; margin-top: 1.25rem; }

/* ── Comparison table ────────────────────────────────────────────────────── */
.compare-table {
  width: 100%; border-collapse: collapse; font-size: .9375rem;
}
.compare-table th, .compare-table td {
  padding: .875rem 1rem; text-align: left;
  border-bottom: 1.5px solid var(--border);
}
.compare-table thead th {
  font-size: .8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); background: var(--off);
}
.compare-table thead th:nth-child(2),
.compare-table thead th:nth-child(3) { text-align: center; }
.compare-table td:nth-child(2),
.compare-table td:nth-child(3) { text-align: center; }
.compare-table tbody tr:hover { background: var(--off); }
.compare-table .section-row td {
  font-weight: 700; font-size: .875rem; color: var(--cyan-dark);
  background: rgba(18,196,227,.06); padding: .5rem 1rem; border-bottom: none;
}
.check-yes { color: var(--cyan-dark); font-size: 1.125rem; }
.check-no  { color: var(--text-3); font-size: 1.125rem; }

/* ── FAQ (pricing.html) ──────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 0; max-width: 720px; }
.faq-item { border-bottom: 1.5px solid var(--border); padding: 1.375rem 0; }
.faq-item:first-child { border-top: 1.5px solid var(--border); }
.faq-q {
  font-size: 1rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; list-style: none; user-select: none; color: var(--text);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+'; font-size: 1.375rem; font-weight: 300;
  color: var(--text-3); flex-shrink: 0;
}
details[open] .faq-q::after { content: '−'; }
.faq-a { font-size: .9375rem; color: var(--text-2); line-height: 1.75; padding-top: .875rem; }

/* ── Pricing page plan cards ─────────────────────────────────────────────── */
.pricing-preview {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  max-width: 780px; margin: 0 auto;
}
.plan-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-2xl); padding: 2.75rem;
}
.plan-card--featured { background: var(--ink); border-color: transparent; }
.plan-card__badge {
  display: inline-block; font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--cyan); color: var(--ink);
  padding: .25rem .75rem; border-radius: 100px; margin-bottom: 1.5rem;
}
.plan-card__name {
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: .625rem;
}
.plan-card--featured .plan-card__name { color: rgba(255,255,255,.4); }
.plan-card__price { margin-bottom: 1.5rem; }
.plan-card__price .amount { font-size: 3rem; font-weight: 800; letter-spacing: -.04em; color: var(--text); }
.plan-card--featured .plan-card__price .amount { color: #fff; }
.plan-card__price .per { font-size: .9375rem; color: var(--text-3); }
.plan-card--featured .plan-card__price .per { color: rgba(255,255,255,.4); }
.plan-card__price .annual { font-size: .8125rem; color: var(--cyan); margin-top: .25rem; }
.plan-features {
  list-style: none; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem;
}
.plan-features li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .9375rem; color: var(--text-2);
}
.plan-card--featured .plan-features li { color: rgba(255,255,255,.65); }
.plan-features li .check { color: var(--cyan-dark); flex-shrink: 0; margin-top: .1rem; }
.plan-card--featured .plan-features li .check { color: var(--cyan); }
.plan-features li .cross { color: var(--text-3); flex-shrink: 0; margin-top: .1rem; }

/* ── Section helpers (inner pages) ──────────────────────────────────────── */
.section { padding: 5.5rem 0; }
.section--alt { background: var(--off); }
.section__label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--cyan-dark); margin-bottom: .75rem;
}
.section__title {
  font-size: clamp(1.625rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing: -.025em; margin-bottom: 1rem; color: var(--text);
}
.section__sub {
  font-size: 1.0625rem; color: var(--text-2); max-width: 560px; line-height: 1.75; margin-bottom: 3rem;
}

/* CTA banner (inner pages) */
.cta-banner {
  background: var(--ink); color: #fff; padding: 6rem 0; text-align: center;
}
.cta-banner__title { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 1rem; }
.cta-banner__sub { font-size: 1.0625rem; opacity: .5; max-width: 460px; margin: 0 auto 2.5rem; line-height: 1.7; }
.cta-banner .btn--primary { background: #fff; color: var(--ink); }
.cta-banner .btn--primary:hover { background: #f0f3ff; color: var(--ink); }

/* Old footer (inner pages) */
.footer { background: var(--ink-2); border-top: 1px solid rgba(255,255,255,.06); padding: 3rem 0; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer__logo img { height: 22px; filter: brightness(0) invert(1); opacity: .5; }
.footer__logo--text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em;
  color: rgba(255,255,255,.5);
}
.footer__links { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer__links a { font-size: .875rem; color: rgba(255,255,255,.3); text-decoration: none; transition: color .15s; }
.footer__links a:hover { color: rgba(255,255,255,.7); }
.footer__copy { font-size: .8125rem; color: rgba(255,255,255,.2); }

/* PWA section */
.pwa-section { background: var(--white); }
.pwa-inner { display: flex; align-items: center; gap: 5rem; }
.pwa-text { flex: 1; }
.pwa-steps { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.pwa-step {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--off); border: 1.5px solid var(--border);
  border-radius: var(--r-xl); padding: 1.25rem 1.5rem;
}
.pwa-step__icon {
  flex-shrink: 0; width: 40px; height: 40px; background: #fff;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; color: var(--cyan-dark);
}
.pwa-step__label { font-weight: 700; font-size: .9375rem; margin-bottom: .2rem; color: var(--text); }
.pwa-step__desc { font-size: .875rem; color: var(--text-2); line-height: 1.55; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .feat--text-left,
  .feat--text-right { grid-template-columns: 1fr; gap: 3.5rem; }
  .feat--text-right .feat__copy  { order: 1; }
  .feat--text-right .feat__visual { order: 2; }
  .mock-phone { width: 280px; }
  .mock-browser { max-width: 100%; }
  .mock-spark-wrap { max-width: 100%; }
  .steps { grid-template-columns: 1fr 1fr; gap: 3rem 2rem; }
  .step::after { display: none; }
}

@media (max-width: 768px) {
  .plans { grid-template-columns: 1fr; max-width: 440px; }
  .pricing-preview { grid-template-columns: 1fr; max-width: 440px; }
  .install-inner { gap: 3rem; }
  .pwa-inner { flex-direction: column; gap: 2.5rem; }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .feat-section { padding: 5rem 0 6rem; }
  .mock-trust { max-width: 100%; }
}

@media (max-width: 640px) {
  .container { padding: 0 1.25rem; }
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .feat-section { padding: 4rem 0 5rem; }
  .how { padding: 5rem 0; }
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .pricing-section { padding: 5rem 0; }
  .cta-final { padding: 5rem 0 6rem; }
  .faq-home { padding: 4rem 0 5rem; }
  .faq-home__heading { margin-bottom: 2rem; }
  .hero__strips { gap: 0; }
  .hero__strip { padding: .375rem 1rem; font-size: .75rem; }
  .hero { padding-top: 6rem; }
  .section { padding: 4rem 0; }
  .form-card { padding: 2rem 1.5rem; }
  .mock-phone { width: 260px; }
  .feat__body { max-width: 100%; }
}