/* ---------------------------------------------------------------------------
   BOB marketing site
   Custom token system. Not a vendored design system. The accent and the theme
   swatches are lifted from the product's own palette so the page and the
   screenshots read as one thing:
     react-app/src/index.css            (--brand, --blue)
     react-app/src/styles/ThemeColors.css (--theme-*-primary)
   Page is light-locked by default with a full dark-mode token swap.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --accent:        #2456d6;
  --accent-hover:  #1c46b4;
  --accent-soft:   #eef2fd;
  --accent-line:   #c9d7f7;

  --bg:            #ffffff;
  --bg-sunken:     #f6f7f9;
  --bg-raised:     #ffffff;
  --bg-inverse:    #12151c;

  --ink:           #14171f;
  --ink-2:         #444b5a;
  --ink-3:         #6b7383;
  --ink-inverse:   #f2f4f8;
  --ink-inverse-2: #a8b0c0;

  --line:          #e4e7ec;
  --line-strong:   #cfd4dd;
  --line-inverse:  #2a2f3b;

  /* Product theme swatches, used only as small identity marks */
  --th-health:  #e53e3e;
  --th-growth:  #3182ce;
  --th-wealth:  #38a169;
  --th-tribe:   #805ad5;
  --th-home:    #d69e2e;
  --th-work:    #2563eb;
  --th-sidegig: #14b8a6;

  /* One radius scale: interactive is pill, surfaces are 14, insets are 8 */
  --r-pill: 999px;
  --r-lg:   14px;
  --r-sm:   8px;

  --shadow-sm: 0 1px 2px rgba(20, 23, 31, .05), 0 1px 3px rgba(20, 23, 31, .04);
  --shadow-md: 0 8px 24px -6px rgba(20, 23, 31, .10), 0 2px 6px rgba(20, 23, 31, .05);
  --shadow-lg: 0 32px 64px -24px rgba(20, 23, 31, .22), 0 8px 20px -8px rgba(20, 23, 31, .10);

  --page: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --accent:       #6f95ef;
    --accent-hover: #87a7f3;
    --accent-soft:  #1a2338;
    --accent-line:  #2f3f63;

    --bg:         #0e1116;
    --bg-sunken:  #14181f;
    --bg-raised:  #171c24;
    --bg-inverse: #f2f4f8;

    --ink:           #eef1f6;
    --ink-2:         #b3bbc9;
    --ink-3:         #868e9d;
    --ink-inverse:   #14171f;
    --ink-inverse-2: #444b5a;

    --line:        #242a34;
    --line-strong: #333b47;
    --line-inverse:#d7dce4;

    --th-health:  #e87d87;
    --th-growth:  #6aabdf;
    --th-wealth:  #68d391;
    --th-tribe:   #b794f4;
    --th-home:    #f6c05a;
    --th-work:    #7aadff;
    --th-sidegig: #4fd1c5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, .5);
    --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, .7), 0 8px 20px -8px rgba(0, 0, 0, .5);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -.022em;
  line-height: 1.12;
  font-weight: 640;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 3.7rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); letter-spacing: -.028em; }
h3 { font-size: 1.2rem; }
p  { margin: 0; text-wrap: pretty; }

.num { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
       font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(72px, 9vw, 128px); }
.section--sunken { background: var(--bg-sunken); }
.lede { color: var(--ink-2); font-size: 1.08rem; max-width: 62ch; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: 68px; display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.nav__inner { display: flex; align-items: center; gap: 28px; width: 100%;
              max-width: var(--page); margin-inline: auto; padding-inline: 24px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; align-items: center; }
/* Scoped to plain links only. `.nav__links a` would otherwise out-specify
   `.btn--primary` and repaint the nav CTA's label in the muted link colour,
   which fails contrast against the accent fill. */
.nav__links a:not(.btn) { color: var(--ink-2); font-size: .95rem; font-weight: 500; white-space: nowrap; }
.nav__links a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.nav__links .btn { padding: 10px 18px; font-size: .92rem; }
/* Phone: the four section anchors will not fit beside the CTA. The row measured 513px in a
   375px viewport and dragged the whole document out to 640px, so every section on the page
   scrolled sideways — the single worst thing that can happen to a link opened from
   Instagram, which is where most first visits arrive from. The anchors go (the page is one
   continuous scroll, so they only shortcut what scrolling reaches anyway); the CTA stays. */
@media (max-width: 639px) {
  .nav__links a:not(.btn) { display: none; }
  .nav__links { gap: 0; }
  .nav__links .btn { padding: 9px 15px; font-size: .87rem; }
  .nav__inner { gap: 12px; }
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--ink);
         font-weight: 660; letter-spacing: -.02em; font-size: 1.06rem; }
.brand:hover { text-decoration: none; }
/* The product's own mark, copied from react-app/public/logo-bob.svg, so the site
   and the app are unmistakably the same thing. It carries its own dark ground
   and rounded corners, so nothing is layered on top of it here. */
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: block;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid transparent;
  font: inherit; font-size: .96rem; font-weight: 570; white-space: nowrap;
  cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease),
                               transform .12s var(--ease), color .18s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
@media (prefers-color-scheme: dark) { .btn--primary { color: #0b0e14; } }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--bg-sunken); }
.btn--lg { padding: 14px 28px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ── hero: asymmetric split ──────────────────────────────────────────────── */
.hero { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 96px);
        overflow: hidden; }
.hero__grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center;
              grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 0.88fr 1.12fr; } }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  padding: 5px 13px 5px 8px; border-radius: var(--r-pill);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-size: .8rem; font-weight: 570; letter-spacing: .005em;
}
.hero p.lede { margin-top: 20px; font-size: 1.15rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── browser frame around real product screenshots ───────────────────────── */
.shot { border-radius: var(--r-lg); overflow: hidden; background: var(--bg-raised);
        border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.shot__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px;
             background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.shot__dot { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--line-strong); }
.shot__path { margin-left: 10px; font-size: .74rem; color: var(--ink-3);
              font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.shot img { width: 100%; height: auto; }
.shot--bleed { margin-right: clamp(-140px, -8vw, 0px); }
@media (max-width: 999px) { .shot--bleed { margin-right: 0; } }
.shot__caption { margin-top: 12px; font-size: .85rem; color: var(--ink-3); }

/* Pre-heading concession. Set apart from the h2 by rule and colour rather than size, so it
   reads as an aside the reader is allowed to agree with before the argument starts. */
.aiclaim { max-width: 66ch; margin: 0 0 22px; padding-left: 18px;
           border-left: 3px solid var(--accent-line);
           font-size: 1.02rem; line-height: 1.65; color: var(--ink-3); }
.aiclaim em { font-style: normal; font-weight: 600; color: var(--ink-2); }

/* ── vocabulary cards ────────────────────────────────────────────────────── */
.words { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .words { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.words__card { background: var(--bg-raised); border: 1px solid var(--line);
               border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px); }
.words__term { display: inline-block; margin-bottom: 10px; font-size: .76rem; font-weight: 650;
               letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.words__def { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--ink-2); }
/* Examples are set in the reader's own register, so they read as things a person would
   actually write down rather than as product copy. */
.words__def em { font-style: normal; color: var(--ink); font-weight: 550; }
.words__note { margin-top: clamp(28px, 3.5vw, 44px); font-size: 1.02rem; color: var(--ink-2);
               max-width: 62ch; }

/* ── horizon: the same plan at five distances ────────────────────────────── */
.horizon__rail { display: flex; gap: 6px; list-style: none; margin: 0 0 20px; padding: 0;
                 overflow-x: auto; scrollbar-width: none; }
.horizon__rail::-webkit-scrollbar { display: none; }
.horizon__rail li { flex: 1 1 0; min-width: 116px; }
.horizon__step {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  display: grid; gap: 2px; padding: 11px 13px;
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  /* The rail is a progress indicator as much as a control: the top edge fills in on the
     active step, so the eye reads position along the horizon, not just which tab is on. */
  border-top-width: 3px; border-top-color: var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.horizon__step:hover { color: var(--ink-2); border-color: var(--line-strong); }
.horizon__step.is-active { color: var(--ink); background: var(--bg-raised);
                           border-color: var(--line-strong); border-top-color: var(--accent); }
.horizon__when { font-size: .74rem; letter-spacing: .02em; text-transform: uppercase; opacity: .8; }
.horizon__what { font-size: .98rem; font-weight: 600; }

/* Panes are stacked and cross-faded rather than swapped, so the frame never collapses
   between two differently-tall screenshots and the section does not jump on advance. */
.horizon__stage { display: grid; }
.horizon__pane { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
                 transform: scale(.994); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.horizon__pane.is-active { opacity: 1; visibility: visible; transform: none; }
.horizon__caption { margin-top: 14px; min-height: 2.6em; font-size: .93rem; color: var(--ink-2); }
.horizon__caption em { color: var(--ink); font-style: normal; font-weight: 600; }

.horizon__end { display: grid; gap: clamp(24px, 3vw, 48px); margin-top: clamp(48px, 6vw, 76px); }
@media (min-width: 900px) { .horizon__end { grid-template-columns: 1fr 1fr; align-items: start; } }
.horizon__end h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.02em; margin: 0 0 12px; }
.horizon__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.horizon__facts li { padding-left: 16px; border-left: 2px solid var(--accent-line);
                     font-size: .95rem; color: var(--ink-2); }
.horizon__facts b { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .horizon__pane { transition: none; transform: none; }
}

/* ── claim band ──────────────────────────────────────────────────────────── */
.band { border-block: 1px solid var(--line); background: var(--bg-sunken); }
.band__inner { display: grid; gap: 1px; background: var(--line);
               grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .band__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.band__cell { background: var(--bg-sunken); padding: 28px 24px; }
.band__n { font-size: 1.7rem; font-weight: 640; letter-spacing: -.03em; display: block; }
.band__l { color: var(--ink-3); font-size: .88rem; margin-top: 4px; display: block; }

/* ── editorial statement ─────────────────────────────────────────────────── */
.statement { max-width: 27ch; font-size: clamp(1.9rem, 3.6vw, 2.7rem);
             font-weight: 620; letter-spacing: -.028em; line-height: 1.16; }
.statement em { font-style: italic; color: var(--accent); line-height: 1.14;
                padding-bottom: 2px; display: inline-block; }
.statement-grid { display: grid; gap: clamp(28px, 4vw, 56px);
                  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .statement-grid { grid-template-columns: 1.1fr 1fr; align-items: end; } }

/* ── feature rows ────────────────────────────────────────────────────────── */
.feature { display: grid; gap: clamp(32px, 4.5vw, 72px); align-items: center;
           grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .feature { grid-template-columns: 0.82fr 1.18fr; }
  .feature--flip > .feature__media { order: -1; }
  .feature--flip { grid-template-columns: 1.18fr 0.82fr; }
}
.feature + .feature { margin-top: clamp(64px, 8vw, 116px); }
.feature__tag { display: inline-flex; align-items: center; gap: 8px;
                font-size: .84rem; font-weight: 570; color: var(--ink-3); margin-bottom: 14px; }
.feature__swatch { width: 9px; height: 9px; border-radius: var(--r-pill); }
.feature h3 { font-size: clamp(1.45rem, 2.3vw, 1.9rem); letter-spacing: -.026em; }
.feature p { margin-top: 14px; color: var(--ink-2); }
.feature__points { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.feature__points li { display: grid; grid-template-columns: 18px 1fr; gap: 10px;
                      color: var(--ink-2); font-size: .96rem; }
.feature__points svg { margin-top: 5px; color: var(--accent); }

/* Five-across variant of the claim band, for the planning ladder. */
@media (min-width: 760px) {
  .band__inner--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The acronym, small and after the wordmark. It explains the name without
   turning the logo into a slogan. Hidden below tablet, where the nav is tight. */
.brand__expand {
  display: none; margin-left: 9px; padding-left: 9px;
  border-left: 1px solid var(--line-strong);
  font-size: .78rem; font-weight: 450; letter-spacing: 0; color: var(--ink-3);
}
@media (min-width: 900px) { .brand__expand { display: inline; } }

/* ── why we built it: asymmetric editorial, used once ────────────────────── */
.why { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .why { grid-template-columns: 0.72fr 1.28fr; align-items: start; } }
.why__body p { color: var(--ink-2); font-size: 1.03rem; line-height: 1.62; max-width: 62ch; }
.why__body p + p { margin-top: 18px; }
.why__kicker {
  margin-top: 26px !important; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 1.12rem !important; font-weight: 560; color: var(--ink) !important;
  letter-spacing: -.014em;
}
.why__sig { margin-top: 14px !important; font-size: .95rem !important; }
@media (min-width: 900px) { .why__lead { position: sticky; top: 104px; } }

/* ── model section: the one inverted block on the page ───────────────────── */
.models { background: var(--bg-inverse); color: var(--ink-inverse); }
.models__grid { display: grid; gap: clamp(32px, 4.5vw, 64px); align-items: center;
                grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .models__grid { grid-template-columns: 0.85fr 1.15fr; } }
.models .feature__points svg { color: var(--accent); }

/* ── numbered steps: onboarding, a layout family used once ───────────────── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step;
         display: grid; gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; background: var(--bg); padding: 26px 24px;
            display: grid; gap: 8px; align-content: start; }
.steps li::before {
  content: counter(step); width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
  display: grid; place-items: center; font-size: .8rem; font-weight: 640;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.steps b { font-weight: 600; letter-spacing: -.012em; }
.steps span { color: var(--ink-2); font-size: .94rem; }

/* Two-column pricing. */
@media (min-width: 900px) {
  .tiers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
}

/* A button that has to sit in a list of links without looking like a button. */
.linklike { background: none; border: 0; padding: 0; font: inherit; font-size: .93rem;
            color: var(--ink-2); cursor: pointer; text-align: left; }
.linklike:hover { color: var(--ink); text-decoration: underline; }

/* ── capability gallery: horizontal scroll-snap ──────────────────────────── */
.gallery {
  margin-top: clamp(36px, 4vw, 56px);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(680px, 82vw);
  gap: 22px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: max(24px, calc((100vw - var(--page)) / 2 + 24px));
  padding-inline: max(24px, calc((100vw - var(--page)) / 2 + 24px));
  padding-block: 6px 26px;
}
.gallery__item { scroll-snap-align: start; margin: 0; }
.gallery__item figcaption { margin-top: 14px; font-size: .93rem; color: var(--ink-2);
                            line-height: 1.5; max-width: 58ch; }
.gallery__item figcaption b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.gallery:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Keep the scrollbar visible enough to read as scrollable on desktop. */
.gallery::-webkit-scrollbar { height: 10px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill);
                                    border: 3px solid var(--bg); }
.gallery::-webkit-scrollbar-track { background: transparent; }

/* ── persona split ───────────────────────────────────────────────────────── */
.persona-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.persona-tab {
  padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-2); font: inherit; font-size: .93rem;
  font-weight: 540; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.persona-tab:hover { border-color: var(--ink-3); }
.persona-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.persona-panel[hidden] { display: none; }
.persona-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .persona-grid { grid-template-columns: 0.78fr 1.22fr; align-items: center; } }
.persona-who { font-size: .88rem; color: var(--ink-3); margin-bottom: 10px; }
.persona-quote { font-size: 1.16rem; line-height: 1.45; font-weight: 500; letter-spacing: -.012em; }
.persona-meta { margin-top: 18px; display: grid; gap: 8px; }
.persona-meta div { display: flex; gap: 10px; font-size: .93rem; color: var(--ink-2); }
.persona-meta b { font-weight: 570; color: var(--ink); min-width: 88px; }

/* ── bento ───────────────────────────────────────────────────────────────── */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 599px) { .bento { grid-template-columns: minmax(0, 1fr); } }
.tile { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-lg);
        padding: 26px; box-shadow: var(--shadow-sm); }
.tile h3 { font-size: 1.08rem; letter-spacing: -.018em; }
.tile p { margin-top: 9px; color: var(--ink-2); font-size: .95rem; }
@media (min-width: 900px) {
  .tile--wide { grid-column: span 4; }
  .tile--half { grid-column: span 2; }
  .tile--third { grid-column: span 2; }
}
.tile--accent { background: linear-gradient(150deg, var(--accent-soft), var(--bg-raised) 72%);
                border-color: var(--accent-line); }
.tile--ink { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--ink-inverse); }
.tile--ink h3 { color: var(--ink-inverse); }
.tile--ink p { color: var(--ink-inverse-2); }
.tile__figure { margin-top: 18px; border-radius: var(--r-sm); overflow: hidden;
                border: 1px solid var(--line); }
.tile--ink .tile__figure { border-color: var(--line-inverse); }

/* ── pricing ─────────────────────────────────────────────────────────────── */
.tiers { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-lg);
        padding: 30px; display: flex; flex-direction: column; }
.tier--feature { border-color: var(--accent); box-shadow: var(--shadow-md); }
.tier__name { font-size: 1.06rem; font-weight: 620; letter-spacing: -.018em; }
.tier__note { color: var(--ink-3); font-size: .89rem; margin-top: 5px; min-height: 2.6em; }
.tier__price { margin-top: 20px; display: flex; align-items: baseline; gap: 6px; }
.tier__price b { font-size: 2.35rem; font-weight: 650; letter-spacing: -.034em; }
.tier__price span { color: var(--ink-3); font-size: .9rem; }
.tier__list { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 11px; }
.tier__list li { display: grid; grid-template-columns: 17px 1fr; gap: 10px;
                 font-size: .93rem; color: var(--ink-2); }
.tier__list svg { margin-top: 5px; color: var(--accent); }
.tier__list li.is-off { color: var(--ink-3); }
.tier__list li.is-off svg { color: var(--line-strong); }
.tier .btn { margin-top: auto; }
.tier__flag { display: inline-block; margin-bottom: 12px; padding: 3px 11px;
              border-radius: var(--r-pill); background: var(--accent); color: #fff;
              font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
@media (prefers-color-scheme: dark) { .tier__flag { color: #0b0e14; } }
.tier__flag--empty { visibility: hidden; }

/* ── forms ───────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: .9rem; font-weight: 550; color: var(--ink); }
.field .hint { font-size: .82rem; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .97rem;
  color: var(--ink); background: var(--bg-raised);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 108px; resize: vertical; }
/* Phone: exactly 16px, not .97rem (15.52px). Under 16px, iOS Safari zooms the page the
   moment a field takes focus and does not zoom back out — so the visitor types the rest of
   the form at 1.3x, scrolling sideways to read it. Most of this form's traffic arrives from
   Instagram on iOS, so this is the common path. */
@media (max-width: 639px) {
  .field input, .field select, .field textarea { font-size: 16px; }
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field .err { font-size: .84rem; color: #c22b3d; display: none; }
@media (prefers-color-scheme: dark) { .field .err { color: #f0808f; } }
.field.is-invalid input, .field.is-invalid select { border-color: #c22b3d; }
.field.is-invalid .err { display: block; }
.field-row { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Radio pair rendered as cards. A select would hide half of a two-way decision
   behind a click; here both consequences are readable without interacting. */
.pick { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .pick { grid-template-columns: 1fr 1fr; } }
.pick__opt { display: block; cursor: pointer; }
/* Off-screen rather than display:none, which takes the input out of the tab order. */
.pick__opt > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick__box {
  display: grid; gap: 4px; height: 100%; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg-raised);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.pick__box b { font-size: .93rem; font-weight: 570; color: var(--ink); }
/* Explicit weight: these spans sit inside a <label>, which .field label sets to 550. */
.pick__box span { font-size: .83rem; font-weight: 400; line-height: 1.45; color: var(--ink-3); }
.pick__opt:hover .pick__box { border-color: var(--ink-3); }
.pick__opt > input:checked + .pick__box { border-color: var(--accent); background: var(--accent-soft); }
.pick__opt > input:focus-visible + .pick__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.field.is-invalid .pick__box { border-color: #c22b3d; }

.form-card { background: var(--bg-raised); border: 1px solid var(--line);
             border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 40px);
             box-shadow: var(--shadow-md); }

.notice { border-radius: var(--r-sm); padding: 14px 16px; font-size: .92rem;
          border: 1px solid var(--accent-line); background: var(--accent-soft);
          color: var(--ink-2); }

/* ── chat dock ───────────────────────────────────────────────────────────── */
.chat-launch {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border: none; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font: inherit; font-size: .94rem; font-weight: 560;
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
@media (prefers-color-scheme: dark) { .chat-launch { color: #0b0e14; } }
.chat-launch:hover { background: var(--accent-hover); transform: translateY(-2px); }
.chat-launch:active { transform: translateY(0); }
.chat-launch[hidden] { display: none; }

.chat {
  position: fixed; right: 22px; bottom: 22px; z-index: 61;
  width: min(392px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 44px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.chat[hidden] { display: none; }
.chat__head { display: flex; align-items: center; gap: 11px; padding: 15px 16px;
              border-bottom: 1px solid var(--line); background: var(--bg-sunken); }
.chat__title { font-weight: 590; font-size: .97rem; }
.chat__sub { font-size: .79rem; color: var(--ink-3); }
.chat__close { margin-left: auto; background: transparent; border: none; cursor: pointer;
               color: var(--ink-3); padding: 5px; border-radius: var(--r-sm); font-size: 1.1rem;
               line-height: 1; }
.chat__close:hover { color: var(--ink); background: var(--bg); }
.chat__log { flex: 1; overflow-y: auto; padding: 18px 16px; display: grid; gap: 12px;
             align-content: start; }
.msg { max-width: 85%; padding: 11px 14px; border-radius: var(--r-lg); font-size: .93rem;
       line-height: 1.5; }
.msg--bot { background: var(--bg-sunken); border: 1px solid var(--line);
            border-bottom-left-radius: var(--r-sm); justify-self: start; }
.msg--me { background: var(--accent); color: #fff; border-bottom-right-radius: var(--r-sm);
           justify-self: end; }
@media (prefers-color-scheme: dark) { .msg--me { color: #0b0e14; } }
.msg--sys { justify-self: center; text-align: center; font-size: .82rem; color: var(--ink-3);
            background: transparent; padding: 2px; }
/* Quick replies. Stacked rather than inline because the labels are sentences,
   and a wrapped pill row reads as broken. */
.chat__choices { display: grid; gap: 7px; justify-items: start; }
a.chat__choice { text-decoration: none; display: block; }
a.chat__choice:hover { text-decoration: none; }
.chat__choice {
  font: inherit; font-size: .89rem; text-align: left; cursor: pointer;
  padding: 9px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--accent); font-weight: 520;
  transition: background .16s var(--ease), transform .12s var(--ease);
}
.chat__choice:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg-raised)); }
.chat__choice:active { transform: translateY(1px); }

.chat__foot { border-top: 1px solid var(--line); padding: 13px 14px; background: var(--bg-raised); }
.chat__row { display: flex; gap: 9px; align-items: flex-end; }
.chat__row input, .chat__row textarea {
  flex: 1; padding: 10px 13px; font: inherit; font-size: .93rem;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); resize: none;
}
.chat__row input::placeholder { color: var(--ink-3); opacity: 1; }
.chat__row input:focus { outline: none; border-color: var(--accent);
                         box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.chat__send { border: none; background: var(--accent); color: #fff; cursor: pointer;
              width: 40px; height: 40px; border-radius: var(--r-pill); display: grid;
              place-items: center; flex: none; }
@media (prefers-color-scheme: dark) { .chat__send { color: #0b0e14; } }
.chat__send:hover { background: var(--accent-hover); }
.chat__send:disabled { opacity: .45; cursor: not-allowed; }
.chat__hint { font-size: .76rem; color: var(--ink-3); margin-top: 9px; }

.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--ink-3);
            display: block; animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding-block: 52px; background: var(--bg-sunken); }
.footer__grid { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer h4 { font-size: .84rem; text-transform: uppercase; letter-spacing: .07em;
             color: var(--ink-3); font-weight: 600; margin-bottom: 13px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { color: var(--ink-2); font-size: .93rem; }
.footer a:hover { color: var(--ink); }
/* Phone: footer links sit at their 17px line-height, well under a comfortable thumb target,
   and stacked lists put the next link a couple of pixels away. Padding rather than a height,
   so the hit area grows without moving anything visually. */
@media (max-width: 639px) {
  .footer__grid a,
  .footer__grid .linklike { display: inline-block; padding-block: 7px; }
}
.footer__legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
                 color: var(--ink-3); font-size: .85rem; display: flex; gap: 16px;
                 flex-wrap: wrap; justify-content: space-between; }

/* ── scroll reveal. Communicates reading order as sections enter. ────────── */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none;
                transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .typing i { animation: none; opacity: .6; }
}

/* ── lightbox ────────────────────────────────────────────────────────────────
   The screenshots are 2880px wide and the page shows them at ~600. That is not
   blur, it is scale: a whole 1440px app squeezed into a column, so its own UI
   text falls below legibility. Rather than crop or fake a zoom, let people open
   the real thing at full size. */
.shot img { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  /* Column flex, not absolute positioning: the caption used to be pinned to the
     bottom and the image simply grew over it on short viewports. Stacking them
     means the image gets whatever height is left after the caption, always. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 10, 14, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%; min-height: 0; flex: 0 1 auto;
  width: auto; height: auto;
  border-radius: var(--r-sm);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  /* The point of opening it is to read the UI inside, so never upscale past 1:1
     and never let the browser smooth it on the way. */
  image-rendering: -webkit-optimize-contrast;
  cursor: zoom-out;
}
.lightbox__cap {
  flex: none; max-width: 70ch;
  text-align: center; color: #cfd4dd; font-size: .87rem; line-height: 1.45;
  pointer-events: none;
}
/* The caption is context, not the point. On a short viewport it gives way. */
@media (max-height: 520px) { .lightbox__cap { display: none; } }
.lightbox__close {
  position: absolute; top: max(12px, 2vh); right: max(12px, 2vw);
  width: 42px; height: 42px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .2); }

.lightbox img { animation: lb-in .22s var(--ease) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lightbox img { animation: none; } }