/* ── AlphaWhisper marketing site ────────────────────────────────────────
   A calm, light-first page that gets out of the way of the product shots.
   Light is the default and dark is a real theme, not an inversion: both are
   defined as tokens on :root and every rule below reads the tokens, so there
   is one place to change a colour and never a hardcoded hex in a component.

   The product screenshots are the argument. Everything here is framing. */

:root {
  color-scheme: light;
  --bg:        #f7f7f4;   /* warm paper, not a cold white */
  --bg-tint:   #eeeef4;   /* the wash behind the hero */
  --surface:   #ffffff;
  --surface-2: #fafaf8;
  --border:    rgba(16, 18, 27, 0.09);
  --border-2:  rgba(16, 18, 27, 0.16);
  --text:      #0e0f14;
  --text-2:    #3d4150;
  --dim:       #676c7e;
  --accent:    #6d28d9;
  --accent-2:  #8b5cf6;
  --btn-bg:    #0e0f14;
  --btn-fg:    #ffffff;
  --shadow:    0 1px 2px rgba(16,18,27,.04), 0 12px 32px rgba(16,18,27,.07);
  --shadow-lg: 0 2px 6px rgba(16,18,27,.06), 0 40px 80px rgba(16,18,27,.14);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1140px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #06070d;
  --bg-tint:   #0b0d18;
  --surface:   #0d1018;
  --surface-2: #11151f;
  --border:    rgba(255, 255, 255, 0.09);
  --border-2:  rgba(255, 255, 255, 0.17);
  --text:      #e9ebf2;
  --text-2:    #b3b9c9;
  --dim:       #868da1;
  --accent:    #a78bfa;
  --accent-2:  #c4b5fd;
  --btn-bg:    #ffffff;
  --btn-fg:    #0e0f14;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.6), 0 40px 90px rgba(0,0,0,.6);
}

/* Someone arriving with the system set to dark and no stored preference
   should get dark, not a flash of paper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #06070d; --bg-tint: #0b0d18; --surface: #0d1018; --surface-2: #11151f;
    --border: rgba(255,255,255,0.09); --border-2: rgba(255,255,255,0.17);
    --text: #e9ebf2; --text-2: #b3b9c9; --dim: #868da1;
    --accent: #a78bfa; --accent-2: #c4b5fd;
    --btn-bg: #ffffff; --btn-fg: #0e0f14;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.6), 0 40px 90px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }
/* Any display value beats the browser's own [hidden] rule, so an element with
   display:flex stays visible while claiming to be hidden. That is how the
   Google button rendered on a site where Google sign-in is not configured,
   pointing at a route that immediately bounces back. */
[hidden] { display: none !important; }
html {
  /* No smooth scrolling. On a page this long, with this many images, the
     browser abandons the animation and the anchor never arrives: clicking
     Pricing moved 39px and stopped, or did nothing at all. Measured with it
     off, the same click lands at exactly scroll-padding-top. A nicety that
     breaks the navigation is not worth keeping, so the jump is instant and
     the header offset is handled by scroll-padding below. */
  -webkit-text-size-adjust: 100%;
  /* No overflow here. Overflow on the ROOT element propagates to the viewport,
     and `clip` there leaves nothing able to scroll at all. The horizontal
     guard lives on body, one level down, where it clips without touching the
     viewport's scrollability. */
  /* The header is sticky, so an anchor must stop below it, not under it. */
  scroll-padding-top: 84px;
}
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: clip, NOT hidden. `hidden` on body makes BODY the scrolling
     element instead of the document, which silently breaks every in-page
     anchor and the smooth scrolling declared on html: clicking Pricing did
     nothing at all. `clip` stops horizontal overflow without creating a
     scroll container. */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { margin: 0; letter-spacing: -0.028em; line-height: 1.08; font-weight: 800; }
h1 { font-size: clamp(38px, 6.4vw, 68px); }
h2 { font-size: clamp(28px, 4.2vw, 46px); }
h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.02em; line-height: 1.25; }
p  { margin: 0; }
/* Headings say the plain thing in full colour and the qualifier in grey. */
.muted { color: var(--dim); font-weight: 800; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 18px;
}
/* Section marker. This used to be a 22px rule, which was both Skylit's
   signature and a dash sitting where a dash must never sit. It is now a node:
   a small facet with a lit core and a halo, the same idea as the product
   marks, so a section heading reads as another point on the map. */
.kicker::before {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px;
  transform: rotate(45deg);
  border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent),
              0 0 9px color-mix(in srgb, var(--accent) 45%, transparent);
}
.sec { padding: clamp(44px, 5.5vw, 76px) 0; }
.sec-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head p { color: var(--dim); font-size: 17px; margin-top: 16px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 15px 28px; border-radius: 12px;
  font-size: 15.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* An inline SVG in a flex row has no intrinsic size and will happily grow to
   fill the line box, which turns every button into a tall slab. */
.btn svg, .prod-more svg, .docs-more svg { width: 17px; height: 17px; flex: 0 0 auto; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Header ───────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.hdr-in { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -0.02em; }
.brand img { width: 28px; height: 28px; }
.brand span { color: var(--accent); }
.hdr-nav { display: flex; gap: 22px; margin-left: 14px; }
.hdr-nav a { text-decoration: none; color: var(--dim); font-size: 14.5px; font-weight: 600; }
.hdr-nav a:hover { color: var(--text); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hdr-right .btn { min-height: 44px; padding: 10px 20px; font-size: 14.5px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
  cursor: pointer; padding: 0;
}
.icon-btn svg { width: 18px; height: 18px; }
.sign-in { text-decoration: none; color: var(--dim); font-weight: 600; font-size: 14.5px; padding: 10px 6px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(48px, 7vw, 92px) 0 0; text-align: center; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto; height: 720px; z-index: -1;
  background: radial-gradient(60% 60% at 50% 0%, var(--bg-tint) 0%, transparent 70%);
}
.hero h1 { max-width: 15ch; margin: 0 auto; }

/* ── The well ───────────────────────────────────────────────────────────
   The opener. It replaced a rounded chip holding a stack of overlapping
   marks, which was a competitor's device almost line for line. Here the
   seven products sit in a gravity well: lift, size and opacity all driven
   off one parabola, with the curve drawn underneath. The ornament and the
   argument are the same shape, which is the only reason it earns the space. */
.well { display: inline-block; text-decoration: none; padding: 4px 8px 0; margin-bottom: 18px; }
.well-row { display: flex; align-items: flex-end; gap: clamp(7px, 1.6vw, 14px); height: 86px; }
.wm {
  width: var(--s); height: var(--s); display: block; opacity: var(--o);
  transform: translateY(calc(var(--lift) * -1));
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.wm img { width: 100%; height: 100%; display: block; }
.well:hover .wm, .well:focus-visible .wm { transform: translateY(calc(var(--lift) * -1 - 5px)); opacity: 1; }
.well-curve { display: block; color: var(--border-2); margin-top: -14px; }
.well-curve svg { width: 100%; height: 30px; display: block; }
.well-cap {
  display: block; margin-top: 2px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.well:hover .well-cap, .well:focus-visible .well-cap { color: var(--accent); }
.well:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .wm { transition: none; } }
.hero-sub { max-width: 60ch; margin: 24px auto 30px; color: var(--text-2); font-size: clamp(16px, 1.7vw, 18.5px); }
.hero .btn-row { justify-content: center; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; margin-top: 28px; }
.trust li { display: flex; align-items: center; gap: 8px; list-style: none; font-size: 13.5px; color: var(--dim); }
.trust svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.trust ul { display: contents; }

/* ── The montage: our own screenshots, set in 3D ──────────────────────── */
/* Three real captures on a shared stage, tilted on one axis so they read as
   panes in space rather than stickers. Transform only, no library. */
.stage { margin-top: clamp(32px, 4.5vw, 56px); perspective: 2200px; padding-bottom: 8px; }
.stage-in {
  position: relative; max-width: 1180px; margin: 0 auto; height: clamp(240px, 26vw, 380px);
  transform-style: preserve-3d;
}
.pane {
  position: absolute; border-radius: 12px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
  text-decoration: none; color: inherit; display: block;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, opacity .35s ease;
}
.pane-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); padding: 7px 10px; border-bottom: 1px solid var(--border);
  background: var(--surface); display: flex; align-items: center; gap: 7px;
}
.pane-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.pane-shot { display: block; width: 100%; height: auto; }

/* Each pane is a link to the page for what it shows, so the label that says
   where it goes only appears on hover and never covers the screenshot. */
.pane-go {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(to top, rgba(10,12,20,.92), rgba(10,12,20,0));
  opacity: 0; transition: opacity .3s ease;
}
.pane-go svg { width: 16px; height: 16px; }
.pane:hover .pane-go, .pane:focus-visible .pane-go { opacity: 1; }
.pane:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The three panes sit side by side and only touch at the edges. An earlier
   version had the front one 66% wide and centred, which put it on top of both
   of the others and made the whole montage unreadable: three screenshots
   stacked into one smear. The rule is that every pane keeps a clear majority
   of itself visible. */
.pane-back-l { left: 0;    width: 33%; top: 2%;  transform: rotateY(19deg)  rotateX(4deg) scale(.9);  opacity: .8; z-index: 1; }
.pane-back-r { right: 0;   width: 33%; top: 2%;  transform: rotateY(-19deg) rotateX(4deg) scale(.9);  opacity: .8; z-index: 1; }
.pane-front  { left: 50%;  width: 46%; top: 12%; transform: translateX(-50%) rotateX(4deg); z-index: 3; }
.pane-back-l:hover { transform: rotateY(12deg)  rotateX(2deg) scale(.95) translateY(-6px); opacity: 1; z-index: 4; }
.pane-back-r:hover { transform: rotateY(-12deg) rotateX(2deg) scale(.95) translateY(-6px); opacity: 1; z-index: 4; }
.pane-front:hover  { transform: translateX(-50%) rotateX(2deg) translateY(-6px); }

/* A slot with no image yet says exactly what belongs there, in the product's
   own voice, and never pretends to be a screenshot. */
.shot-missing {
  display: grid; place-items: center; gap: 6px; padding: 32px 18px; text-align: center;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 12px, var(--surface) 12px, var(--surface) 24px);
  color: var(--dim); min-height: 160px;
}
.shot-missing b { font-size: 13px; color: var(--text-2); font-weight: 700; }
.shot-missing span { font-size: 12px; max-width: 34ch; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 16px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 26px; box-shadow: var(--shadow);
}
.card-ico {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 16px;
}
.card-ico svg { width: 20px; height: 20px; color: var(--accent); }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--dim); font-size: 14.5px; }

/* ── Product cards ────────────────────────────────────────────────────── */
.prod {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  overflow: hidden; box-shadow: var(--shadow); margin-bottom: 20px;
}
.prod-top { padding: 30px 30px 24px; }
.prod-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.prod-head img { width: 44px; height: 44px; }
.prod-head h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; }
.prod-top p { color: var(--text-2); font-size: 16px; max-width: 62ch; }
.prod-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; min-height: 44px;
  font-weight: 700; font-size: 14.5px; text-decoration: none; color: var(--pa, var(--accent));
}
.prod-shot { margin: 0 20px 20px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.prod-tag {
  display: inline-block; margin-left: auto; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--border-2); color: var(--dim); white-space: nowrap;
}
.prod-tag-live { color: #15803d; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.1); }
:root[data-theme="dark"] .prod-tag-live { color: #4ade80; }

/* ── Roadmap ──────────────────────────────────────────────────────────── */
.next { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.next .card { display: flex; flex-direction: column; }
.next-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.next-head img { width: 36px; height: 36px; }
.badge {
  display: inline-block; padding: 4px 9px; border-radius: 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; border: 1px solid var(--border-2); color: var(--dim);
}

/* ── Pricing ──────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); align-items: start; }
.plan { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 30px; box-shadow: var(--shadow); }
.plan-best { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.plan-rank { display: flex; gap: 4px; margin-bottom: 18px; }
.plan-rank i { width: 16px; height: 3px; border-radius: 2px; background: var(--border-2); }
.plan-rank i.on { background: var(--accent); }
.plan h3 { font-size: 26px; }
.plan-for { color: var(--dim); font-size: 14px; margin-top: 7px; min-height: 42px; }
.plan-price { margin: 20px 0 4px; font-size: 42px; font-weight: 800; letter-spacing: -0.04em; }
.plan-price small { font-size: 15px; font-weight: 600; color: var(--dim); letter-spacing: 0; }
.plan-note { color: var(--dim); font-size: 13px; margin-bottom: 20px; }
.plan .btn { width: 100%; }
.plan-sep { margin: 24px 0 16px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding-top: 20px; border-top: 1px solid var(--border); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-2); align-items: flex-start; }
.plan li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--accent); }
.plan li.off { color: var(--dim); }
.plan li.off svg { color: var(--dim); }

/* ── Founder, FAQ, close ──────────────────────────────────────────────── */

.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 4px 22px; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--dim); font-weight: 400; font-size: 22px; }
.faq details[open] summary::after { content: '\2212'; }
.faq p { padding: 0 0 20px; color: var(--dim); font-size: 15px; }

.close-cta { text-align: center; padding: clamp(52px, 7vw, 92px) 0; }
.close-cta h2 { max-width: 16ch; margin: 0 auto 18px; }
.close-cta p { color: var(--dim); margin-bottom: 28px; }
.close-cta .btn-row { justify-content: center; }

.ftr { border-top: 1px solid var(--border); padding: 44px 0 56px; color: var(--dim); font-size: 14px; }
.ftr-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 34px; }
.ftr h4 { margin: 0 0 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.ftr a { display: block; text-decoration: none; padding: 5px 0; color: var(--dim); }
.ftr a:hover { color: var(--text); }
.ftr-fine { border-top: 1px solid var(--border); padding-top: 22px; font-size: 12.5px; line-height: 1.7; }

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cards-3, .next, .plans { grid-template-columns: 1fr; }
  .ftr-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* One mobile layer. The montage flattens: a tilted pane on a 375px screen is
     unreadable, and an unreadable screenshot argues against the product. */
  .wrap { padding: 0 16px; }
  .hdr-nav { display: none; }
  .hdr-in { height: 60px; gap: 8px; }
  /* At 375px the header had four things competing and the trial button wrapped
     onto three lines. Sign in moves to the footer and the button keeps one. */
  .sign-in { display: none; }
  .hdr-right { gap: 8px; }
  .hdr-right .btn { padding: 10px 16px; font-size: 14px; white-space: nowrap; }
  .icon-btn { width: 44px; height: 44px; }
  /* The full lockup was being squeezed and clipping its own "AI" at 375px.
     The wordmark alone is still unmistakably the brand at this size. */
  .brand { font-size: 15px; gap: 8px; flex: 0 0 auto; }
  .brand span { display: none; }
  .brand img { width: 24px; height: 24px; }
  .hero { text-align: left; }
  .hero h1 { margin: 0; }
  /* Seven marks at desktop size overflow a 375px screen. Scale the set rather
     than dropping any of them: the count is the point. */
  .well { padding-left: 0; margin-bottom: 12px; }
  .well-row { height: 62px; gap: 5px; }
  .wm { width: calc(var(--s) * 0.66); height: calc(var(--s) * 0.66);
        transform: translateY(calc(var(--lift) * -0.62)); }
  .well:hover .wm { transform: translateY(calc(var(--lift) * -0.62 - 4px)); }
  .well-curve { margin-top: -10px; }
  .well-curve svg { height: 22px; }
  .well-cap { font-size: 10px; letter-spacing: .12em; }
  .hero-sub { margin: 20px 0 26px; }
  .hero .btn-row, .close-cta .btn-row { justify-content: stretch; flex-direction: column; }
  .hero .btn, .close-cta .btn { width: 100%; }
  .trust { justify-content: flex-start; gap: 10px 18px; }
  .stage { perspective: none; }
  .stage-in { height: auto; display: grid; gap: 14px; }
  /* position:relative makes the desktop left/top offsets apply as nudges, which
     pushed the front pane half its width off the right edge. Clear them. */
  .pane { position: relative; width: 100% !important; transform: none !important; opacity: 1 !important;
    left: auto !important; right: auto !important; top: auto !important; z-index: auto !important; }
  /* All three stay on a phone now that they are links worth following, and
     the go label is always visible because there is no hover to reveal it. */
  .pane-back-l, .pane-back-r { display: block; }
  .pane-go { position: static; opacity: 1; background: var(--surface); color: var(--accent);
    border-top: 1px solid var(--border); justify-content: flex-start; min-height: 44px; }
  .prod-top { padding: 22px 20px 18px; }
  .prod-shot { margin: 0 14px 14px; }
  .prod-head { flex-wrap: wrap; }
  .card, .plan { padding: 22px; }
  .close-cta { text-align: left; }
  .close-cta h2, .close-cta p { margin-left: 0; }
  .ftr-cols { grid-template-columns: 1fr; }
}

/* The grading panel gets the same frame as a product shot, because it is the
   same kind of evidence: a real screen, not a marketing graphic. */
.record-shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--surface-2); }

/* ── Live ──────────────────────────────────────────────────────────────
   Skylit's page moves because things animate. Ours moves because the
   numbers on it are real and changing. This card pulls the same engine the
   product runs on, so the marketing page is a demo rather than a claim. */
.live {
  max-width: 760px; margin: clamp(30px, 4vw, 44px) auto 0; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); overflow: hidden;
}
.live-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; position: relative; }
.live-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid #22c55e; opacity: .55; animation: livePing 2.4s ease-out infinite;
}
@keyframes livePing { 0% { transform: scale(.6); opacity: .7 } 100% { transform: scale(1.5); opacity: 0 } }
.live-age { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; font-family: var(--mono); font-size: 11.5px; }

.live-pick { display: flex; gap: 7px; flex-wrap: wrap; padding: 16px 20px 0; align-items: center; }
.live-pick button {
  font: 700 12.5px/1 var(--mono); letter-spacing: .04em; padding: 9px 12px; min-height: 36px;
  border-radius: 8px; border: 1px solid var(--border-2); background: transparent; color: var(--dim); cursor: pointer;
}
.live-pick button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.live-form { display: flex; gap: 7px; margin-left: auto; }
.live-form input {
  width: 116px; padding: 9px 11px; min-height: 36px; border-radius: 8px; font: 600 13px var(--mono);
  border: 1px solid var(--border-2); background: var(--bg); color: var(--text); text-transform: uppercase;
}
.live-form input::placeholder { text-transform: none; font-family: var(--sans); color: var(--dim); }
.live-form button { padding: 9px 14px; min-height: 36px; border-radius: 8px; border: 0; background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; font-size: 13px; cursor: pointer; }

.live-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; padding: 18px 20px 4px; }
.live-cell { text-align: left; }
.live-cell dt { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.live-cell dd { margin: 5px 0 0; font: 700 clamp(16px, 2vw, 21px)/1.1 var(--mono); letter-spacing: -0.02em; }
.live-note { padding: 10px 20px 18px; color: var(--dim); font-size: 13px; }
.live-note b { color: var(--text-2); font-weight: 700; }
.live[data-state="loading"] .live-grid { opacity: .35; }
.live-grip-firm { color: #15803d; } .live-grip-loose { color: #b45309; }
:root[data-theme="dark"] .live-grip-firm { color: #4ade80; }
:root[data-theme="dark"] .live-grip-loose { color: #fbbf24; }

/* ── The rotator ───────────────────────────────────────────────────────
   One line that cycles who this is for. The words are stacked and the box
   is sized to the longest, so nothing reflows as it changes. */
.rotator { display: inline-grid; vertical-align: bottom; }
.rotator span { grid-area: 1/1; opacity: 0; transform: translateY(0.35em); transition: opacity .4s ease, transform .4s ease; }
.rotator span.on { opacity: 1; transform: none; }

/* ── Reveal on scroll ──────────────────────────────────────────────────
   A short rise as each block arrives. Applied by script so that with
   JavaScript off, or motion turned down, everything is simply visible. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .live-dot::after { animation: none; }
  .rotator span { transition: none; }
}
@media (max-width: 640px) {
  .live-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .live-form { margin-left: 0; width: 100%; }
  .live-form input { flex: 1; width: auto; }
  .live-pick button, .live-form button, .live-form input { min-height: 44px; }
}

.hero-for { color: var(--dim); font-size: 15px; margin-top: 14px; font-weight: 600; }
.hero-for .rotator span { color: var(--text-2); }

/* ── Product pages ────────────────────────────────────────────────────── */
.prod-hero { padding: clamp(48px, 7vw, 86px) 0 clamp(26px, 3vw, 38px); text-align: center; }
.prod-hero-mark { width: 74px; height: 74px; margin: 0 auto 22px; }
.prod-page h1 { font-size: clamp(40px, 6vw, 62px); }
.prod-hero-tag { margin-top: 14px; font-size: clamp(17px, 2.2vw, 21px); font-weight: 700; color: var(--pa); letter-spacing: -0.02em; }
.prod-hero-lede { max-width: 62ch; margin: 20px auto 30px; color: var(--text-2); font-size: 17px; }
.prod-hero .btn-row { justify-content: center; }

.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 800px; }
.qlist li { display: flex; gap: 13px; align-items: flex-start; font-size: 17px; color: var(--text-2); }
.qlist svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 5px; color: var(--pa); }
.limits { max-width: 72ch; font-size: 17px; color: var(--text-2); padding: 24px 26px; border-left: 3px solid var(--pa); background: var(--surface); border-radius: 0 14px 14px 0; }

.rels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rel { display: flex; gap: 14px; align-items: center; text-decoration: none; padding: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.rel img { width: 38px; height: 38px; flex: 0 0 auto; }
.rel span { display: grid; gap: 3px; font-size: 13.5px; color: var(--dim); line-height: 1.4; }
.rel b { font-size: 16px; color: var(--text); font-weight: 800; }

@media (max-width: 900px) { .rels { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .prod-hero { text-align: left; }
  .prod-hero-mark { margin-left: 0; }
  .prod-hero-lede { margin-left: 0; }
  .prod-hero .btn-row { flex-direction: column; }
  .prod-hero .btn { width: 100%; }
}

/* A qualifier that belongs to the image above it, not to the page. */
.shot-cap { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.6; color: var(--dim); max-width: 78ch; }
.prod-shot .shot-cap { margin: 10px 4px 2px; }

/* A product page's second figure sits closer to the first than a full section
   gap would allow: they are one argument in two pictures, not two sections. */
.sec-tight { padding-top: clamp(20px, 2.5vw, 34px); }
.shot-cap-wide { max-width: 82ch; margin-top: 12px; }

/* A badge inside a card heading, for anything real but not yet released.
   Sits on the line rather than above it, so it reads as a qualifier on the
   claim rather than a separate announcement. */
.card h3 .badge-soon {
  margin-left: 9px; vertical-align: 3px;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Which plan a product comes with, on the product's own page, so a reader
   does not have to go back to pricing to find out. */
.prod-plan {
  display: inline-block; margin: -10px auto 26px; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--pa);
  border: 1px solid color-mix(in srgb, var(--pa) 34%, transparent);
  background: color-mix(in srgb, var(--pa) 9%, transparent);
}
@media (max-width: 640px) { .prod-plan { margin-left: 0; } }

/* With width and height on the img the browser reserves the right box before
   the file arrives, which is what stops every anchor link landing in the wrong
   place. These keep it fluid without giving that reservation back. */
.shot img, .pane img, .record-shot img, .prod-shot img { width: 100%; height: auto; }

/* ── The founder letter ────────────────────────────────────────────────
   One column of reading. Wider line height than the rest of the site
   because this is the only page somebody reads start to finish. */
.letter { max-width: 680px; margin: 0 auto; padding: clamp(46px, 7vw, 86px) 24px clamp(56px, 8vw, 90px); }
.letter h1 { font-size: clamp(30px, 5.4vw, 44px); line-height: 1.1; margin: 0 0 14px; }
.letter h2 { font-size: clamp(19px, 2.6vw, 24px); margin: 44px 0 14px; letter-spacing: -0.02em; }
.letter p { font-size: 17px; line-height: 1.78; color: var(--text-2); margin: 0 0 20px; }
.letter p b, .letter strong { color: var(--text); font-weight: 700; }
.letter .fl-kicker {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px;
}
.letter .fl-byline { color: var(--dim); font-size: 14.5px; margin: 0 0 34px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.letter hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.letter-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .letter { padding-left: 16px; padding-right: 16px; }
  .letter p { font-size: 16.5px; }
  .letter-cta { flex-direction: column; }
  .letter-cta .btn { width: 100%; }
}

/* The Playbook brings its own content styling and only needs the shared
   chrome to sit correctly around it. Its sub-navigation is sticky too, so it
   has to clear the site header rather than hide under it. */
body.pb .pb-subnav, .pb-subnav { top: 66px; }
@media (max-width: 640px) { .pb-subnav { top: 60px; } }

/* ── Sign up and sign in ───────────────────────────────────────────────
   These were the last pages on the old app stylesheet. The heading rule had
   no colour of its own, so it inherited a light-mode value onto a dark card
   and "Start your 14-day free trial" rendered almost invisible. Everything
   here reads the shared tokens, so both themes work. */
.auth { max-width: 520px; margin: 0 auto; padding: clamp(34px, 5vw, 64px) 24px clamp(56px, 8vw, 90px); }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; }
.auth-form { padding: clamp(24px, 4vw, 34px); display: grid; gap: 16px; }
.auth-heading { font-size: clamp(24px, 3.4vw, 31px); margin: 0; color: var(--text); }
.auth-para { color: var(--dim); font-size: 14.5px; margin: -6px 0 4px; line-height: 1.6; }

/* The trial, said once and loudly, at the top of the card rather than as a
   heading that competes with the form. */
.trial-banner {
  display: flex; align-items: center; gap: 20px; padding: 22px 26px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-bottom: 1px solid var(--border);
}
.trial-days { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.trial-days b { font-size: 42px; font-weight: 800; letter-spacing: -0.04em; color: var(--accent); line-height: 1; }
.trial-days span { font-size: 12px; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.trial-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.trial-points li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.trial-points svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }

.auth-field { display: grid; gap: 7px; }
.auth-field > span { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.auth-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .75; font-weight: 600; }
.auth-field input, .auth-field select {
  width: 100%; padding: 13px 14px; min-height: 48px; border-radius: 11px;
  border: 1px solid var(--border-2); background: var(--bg); color: var(--text);
  font: 400 16px var(--sans);            /* 16px: anything less zooms iOS on focus */
}
.auth-field input:focus, .auth-field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.auth-hint { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-alt { text-align: center; font-size: 14px; color: var(--dim); margin-top: 2px; }
.auth-alt a { color: var(--accent); font-weight: 700; text-decoration: none; }
.auth-error, .auth-success {
  padding: 13px 15px; border-radius: 11px; font-size: 14px; line-height: 1.55;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2);
}
.auth-error { border-color: rgba(220,38,38,.45); color: #b91c1c; background: rgba(220,38,38,.07); }
:root[data-theme="dark"] .auth-error { color: #fca5a5; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 18px; border-radius: 11px; text-decoration: none;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
  font-weight: 700; font-size: 15px;
}
.btn-google:hover { background: var(--surface-2); }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

@media (max-width: 640px) {
  .auth { padding: 20px 16px 48px; }
  .trial-banner { padding: 18px; gap: 14px; }
  .trial-days b { font-size: 34px; }
}

/* ── The product guide (docs.html) ─────────────────────────────────────
   One page that summarises every product, generated from the same table
   that builds the individual product pages. Narrower than the marketing
   layout because this one gets read rather than scanned. */
.docs { max-width: 800px; padding: clamp(34px, 5vw, 60px) 24px clamp(56px, 8vw, 90px); }
.docs-head h1 { font-size: clamp(34px, 5.4vw, 50px); line-height: 1.08; margin: 0 0 16px; }
.docs-lede { font-size: 18px; color: var(--text-2); max-width: 62ch; }
.docs h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 0 0 12px; letter-spacing: -0.02em; }
.docs h3 {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); font-weight: 800; margin: 22px 0 8px;
}
.docs p { color: var(--text-2); font-size: 16px; line-height: 1.6; }
.docs-idea { margin: 40px 0; padding-top: 30px; border-top: 1px solid var(--border); }

/* Each product block carries its own accent through --pa, the same custom
   property the product pages use, so the two surfaces stay in step. */
.docs-prod { margin: 44px 0; padding-top: 32px; border-top: 1px solid var(--border); }
.docs-prod-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.docs-mark { width: 40px; height: 40px; flex: none; }
.docs-prod-head h2 { margin: 0; }
.docs-tag { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--pa); }
.docs-ask, .docs-read { margin: 0; padding-left: 20px; }
.docs-ask li, .docs-read li {
  color: var(--text-2); font-size: 15px; line-height: 1.55; margin-bottom: 7px;
}
.docs-ask li { color: var(--text); font-weight: 600; }
.docs-read li strong { color: var(--text); }
.docs-limit {
  margin-top: 20px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 14px !important;
}
.docs-limit strong { color: var(--text); }
.docs-plan {
  display: inline-block; margin: 4px 0 0; padding: 5px 12px; border-radius: 999px;
  font-size: 13px !important; font-weight: 700; color: var(--pa);
  border: 1px solid color-mix(in srgb, var(--pa) 34%, transparent);
  background: color-mix(in srgb, var(--pa) 9%, transparent);
}
.docs-more { display: inline-flex; align-items: center; gap: 6px; color: var(--pa); font-weight: 700; font-size: 15px; text-decoration: none; }
.docs-more:hover { text-decoration: underline; }
.docs-cta {
  margin-top: 48px; padding: 30px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow);
}
.docs-cta .btn { margin: 10px 8px 0 0; }
@media (max-width: 640px) {
  .docs-prod-head { gap: 11px; }
  .docs-mark { width: 34px; height: 34px; }
  .docs-cta { padding: 22px 18px; }
}