/* ============================================================
   Desk — landing page styles
   Manrope/Geist · #6EB704 green (from the wordmark) · #F5F5F4 bg · #1A1A1A ink
   Tone: minimal, modular, slightly futuristic (Sage × Creator)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap');

:root {
  --green: #6EB704;
  --green-ink: #4A7A03;     /* readable green for text on light */
  --green-deep: #3F6903;
  --green-tint: #EEF6DF;    /* soft green wash */
  --green-tint-2: #E2F0C8;
  --on-green: #00312D;      /* pine — text/glyphs ON the brand green · 5.71:1 */
  --bg: #F7F6F3;
  --ink: #1A1A1A;
  --ink-2: #3d3d3b;
  --muted: #76776f;
  --muted-2: #9a9b92;
  --nav-link: #6b6c64;      /* receded nav links that still clear AA at 14.5px */
  --line: #e4e4df;
  --line-2: #ececE7;
  --card: #ffffff;
  --dark: #161613;
  /* type: Manrope (the wordmark's own face) sets display, Geist sets text */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", monospace;
  --radius: 18px;
  --radius-lg: 26px;
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 1px 2px rgba(20,24,12,.04), 0 8px 24px rgba(20,24,12,.05);
  --shadow-md: 0 2px 4px rgba(20,24,12,.05), 0 18px 50px rgba(20,24,12,.09);
  --shadow-lg: 0 8px 16px rgba(20,24,12,.06), 0 40px 90px rgba(20,24,12,.14);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--green); color: var(--on-green); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
[id] { scroll-margin-top: 88px; }

/* type helpers */
/* section labels: quiet mono, closed by the brand's green full stop —
   the label recedes, the mark carries the green */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: inline-block;
}
.eyebrow::after {
  content: ".";
  color: var(--green);
  font-size: 14px;
  letter-spacing: 0;
  margin-left: -0.14em;
}
html[data-theme="dark"] .eyebrow { color: rgba(255,255,255,.46); }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.024em; line-height: 1.05; font-weight: 600; margin: 0; }

.section { padding: 120px 0; position: relative; }
.hero + .section { padding-top: 90px; }
.section.tight { padding: 92px 0; }

/* ======================= NAV ======================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 0;
}
/* one layer carries the tint AND the blur, so they cannot fade at different rates, and
   it runs 34px past the bar so the ramp finishes in open space rather than on an edge */
.nav::before {
  content: ""; position: absolute; inset: 0 0 -34px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(247,246,243,.86) 0%, rgba(247,246,243,.80) 34%, rgba(247,246,243,.56) 58%,
    rgba(247,246,243,.28) 76%, rgba(247,246,243,.08) 90%, rgba(247,246,243,0) 100%);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.9) 48%,
    rgba(0,0,0,.66) 62%, rgba(0,0,0,.38) 76%, rgba(0,0,0,.15) 88%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.9) 48%,
    rgba(0,0,0,.66) 62%, rgba(0,0,0,.38) 76%, rgba(0,0,0,.15) 88%, rgba(0,0,0,0) 100%);
}
html[data-theme="dark"] .nav::before {
  background: linear-gradient(180deg,
    rgba(27,29,24,.9) 0%, rgba(27,29,24,.84) 34%, rgba(27,29,24,.58) 58%,
    rgba(27,29,24,.3) 76%, rgba(27,29,24,.09) 90%, rgba(27,29,24,0) 100%);
}
.nav.scrolled { border-bottom-color: transparent; }
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
  height: 68px; display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.brand img { width: 28px; height: 28px; }
.brand .brand-word, .brand .brand-word-rev { width: auto; height: 18px; }
.brand .brand-word-rev { display: none; }
html[data-theme="dark"] .brand .brand-word { display: none; }
html[data-theme="dark"] .brand .brand-word-rev { display: block; }
.foot-brand .brand-word, .foot-brand .brand-word-rev { height: 20px; }
.brand b { font-size: 19px; font-weight: 600; letter-spacing: -0.04em; }
.nav-links { display: flex; align-items: center; gap: 2px; position: relative; padding-left: 17px; }
.nav-links::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 7px; height: 20px; background: #B9D48C; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207%2020%22%3E%3Cpath%20d%3D%22M3.57%201.50Q3.80%203.63%204.02%205.75Q3.96%207.88%204.08%2010.00Q3.73%2012.13%203.84%2014.25Q3.22%2016.38%203.35%2018.50%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207%2020%22%3E%3Cpath%20d%3D%22M3.57%201.50Q3.80%203.63%204.02%205.75Q3.96%207.88%204.08%2010.00Q3.73%2012.13%203.84%2014.25Q3.22%2016.38%203.35%2018.50%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
}
html[data-theme="dark"] .nav-links::before { background: rgba(110,183,4,.3); }
.nav-link {
  font-size: 14.5px; font-weight: 450; color: var(--nav-link);
  padding: 8px 13px; border-radius: 9px; white-space: nowrap;
  transition: background .18s, color .18s;
}
.nav-link:hover { background: var(--green-tint-2); color: var(--green-deep); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-ghost {
  font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap;
  padding: 8px 14px; border-radius: 10px; transition: background .18s;
}
.nav-ghost:hover { background: rgba(26,26,26,.05); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  border-radius: 13px; padding: 11px 18px; cursor: pointer; border: 1px solid transparent;
  transition: transform .16s var(--ease), box-shadow .18s, border-color .18s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px) scale(1.035); }
.btn-primary {
  background: var(--green); color: var(--on-green);
  box-shadow: 0 1px 2px rgba(63,105,3,.25), 0 8px 20px rgba(110,183,4,.30);
}
.btn-primary:hover { background: #63A303; transform: translateY(-1px) scale(1.035); box-shadow: 0 2px 4px rgba(63,105,3,.28), 0 14px 30px rgba(110,183,4,.38); }
.btn-primary:active { transform: translateY(0) scale(1); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: #d4d4cd; transform: translateY(-1px) scale(1.035); }
.btn-lg { font-size: 16px; padding: 14px 24px; border-radius: 15px; }
.btn-sm { font-size: 14px; padding: 9px 15px; border-radius: 12px; }
.btn-dark { background: var(--ink); color: #fff; }

/* waitlist CTA — the page's one dark object: pine box, white label, and both green marks
   (the full stop and the go circle) at #8FD213. On hover the wordmark's own #6EB704 floods
   the box from the circle outward while the arrow leaves through the circle and the next
   one follows it in; the pine shadow cross-fades to a green glow. Colours are literals —
   the box stays pine in dark mode and on the dark band. */
.btn-cta {
  display: inline-flex; align-items: center; gap: 13px; position: relative; overflow: hidden;
  background: #00312D; border: 0; border-radius: 100px;
  padding: 5px 6px 5px 18px; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: -0.012em;
  color: #fff; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,49,45,.20), 0 8px 20px rgba(0,49,45,.15);
  transition: color .2s ease, box-shadow .3s ease, background 0s linear 0s;
}
.btn-cta:hover { transition: color .26s ease, box-shadow .34s ease, background 0s linear .44s; }
/* the flood. inset -1px so the parent's radius clip cannot leave a hairline on the curve,
   and the background hands over to the same green as the sweep lands. */
.btn-cta::before {
  content: ""; position: absolute; z-index: 1; inset: -1px; border-radius: 100px;
  background: #6EB704; transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.btn-cta:hover::before { transition: transform .44s cubic-bezier(.16,1,.3,1); }
.btn-cta-t { position: relative; z-index: 2; }
.btn-cta-t i { font-style: normal; display: inline-block; color: #6EB704; transition: color .2s ease; }
.btn-cta-go {
  position: relative; z-index: 2; overflow: hidden;
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: #6EB704; color: #00312D; display: grid; place-items: center;
  transition: background .2s ease .14s, color .2s ease .14s;
}
.btn-cta:hover .btn-cta-go { transition: background .26s ease, color .26s ease; }
.btn-cta-go svg {
  position: absolute; left: calc(50% - 7.5px); top: calc(50% - 7.5px); width: 15px; height: 15px;
  transform: rotate(90deg); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.btn-cta:hover .btn-cta-go svg { transition: transform .36s cubic-bezier(.4,0,.2,1); }
.btn-cta-go svg.g { transform: rotate(90deg) translateY(-150%); }
.btn-cta:hover { background: #6EB704; color: #00312D;
  box-shadow: 0 1px 2px rgba(110,183,4,.34), 0 10px 26px rgba(110,183,4,.44), 0 2px 8px rgba(110,183,4,.34); }
.btn-cta:hover::before { transform: scaleX(1); }
.btn-cta:hover .btn-cta-t i { color: #00312D; }
.btn-cta:hover .btn-cta-go { background: #00312D; color: #6EB704; }
.btn-cta:hover .btn-cta-go svg.p { transform: rotate(90deg) translateY(150%); }
.btn-cta:hover .btn-cta-go svg.g { transform: rotate(90deg); }
.btn-cta-sm { font-size: 13.5px; gap: 10px; padding: 3px 4px 3px 14px; }
.btn-cta-sm .btn-cta-go { width: 26px; height: 26px; }
.btn-cta-sm .btn-cta-go svg { width: 14px; height: 14px; left: calc(50% - 7px); top: calc(50% - 7px); }
/* on the dark closing band and in dark mode the box needs to lift off its ground */
.cta-band .btn-cta,
html[data-theme="dark"] .btn-cta { background: #242720; }
.cta-band .btn-cta:hover,
html[data-theme="dark"] .btn-cta:hover { background: #6EB704; }
/* the Basic tier: outlined rather than solid, so the two tiers read as a hierarchy */
.btn-cta-quiet { background: transparent; box-shadow: inset 0 0 0 1px #C9D6BC; color: #00312D; }
.btn-cta-quiet .btn-cta-t i { color: #4A7A03; }
.btn-cta-quiet .btn-cta-go { background: #EEF6DF; color: #3F6903; }
.btn-cta-quiet:hover { background: #6EB704; color: #00312D;
  box-shadow: inset 0 0 0 1px #6EB704, 0 8px 22px rgba(110,183,4,.32); }
html[data-theme="dark"] .btn-cta-quiet { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #fff; }
html[data-theme="dark"] .btn-cta-quiet .btn-cta-go { background: rgba(110,183,4,.2); color: #6EB704; }
html[data-theme="dark"] .btn-cta-quiet:hover { color: #00312D; box-shadow: inset 0 0 0 1px #6EB704, 0 8px 22px rgba(110,183,4,.32); }
@media (prefers-reduced-motion: reduce) {
  .btn-cta, .btn-cta::before, .btn-cta-go, .btn-cta-go svg { transition: none; }
}
.price-cta { width: 100%; justify-content: space-between; }
.btn-dark:hover { background: #000; transform: translateY(-1px) scale(1.035); }


/* ======================= PAPER =======================
   Ruled and squared grounds in the page's outer margins only — never behind the copy.
   One band per gutter, sized to the margin itself (so the wedge below scales with the
   viewport rather than being computed against the whole section). Ink is currentColor, so
   light and dark need one override rather than four, and the heavier graph rules are the
   same colour laid twice on coincident lines. All CSS gradients: nothing is fetched and
   --bg (#F7F6F3) is untouched. */
.paper { position: relative;
  /* the inner fade sits mostly behind the interface, so a rule disappears under its edge
     rather than stopping short of it */
  --paper-in: linear-gradient(90deg, #000 0 86%, transparent 100%);
  --paper-in-r: linear-gradient(270deg, #000 0 86%, transparent 100%);
  /* no wedge by default — mid-page bands have straight inner edges */
  --paper-w: linear-gradient(#000, #000);
  --paper-w-r: linear-gradient(#000, #000);
  /* the ruling runs down to the arcade sketch's deck line and stops there — measured from
     the hero's foot, like the sketch itself, so the two always meet */
  --paper-v: linear-gradient(180deg, transparent 0 30%, #000 36%, #000 calc(100% - 356px), transparent calc(100% - 314px));
}
.paper > .wrap { position: relative; z-index: 1; }
.paper::before, .paper::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  width: calc((100% - var(--maxw)) / 2 + 168px);
  color: rgba(26,26,26,.038);
  background-image: var(--paper);
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect;
}
.paper::before { left: 0;
  -webkit-mask-image: var(--paper-in), var(--paper-w), var(--paper-v);
  mask-image: var(--paper-in), var(--paper-w), var(--paper-v); }
.paper::after { right: 0;
  -webkit-mask-image: var(--paper-in-r), var(--paper-w-r), var(--paper-v);
  mask-image: var(--paper-in-r), var(--paper-w-r), var(--paper-v); }
/* the hero's rules are measured from its foot, so they hold phase with the bottom-anchored
   arcade: ink lands 21.72px above the hero's bottom edge and every 30px above that, which
   puts one exactly on the sketch's deck line. */
.hero.paper::before, .hero.paper::after { background-size: 100% 30px; background-position: 0 calc(100% - 12.64px); }

/* mid-page bands fade at both ends rather than only the foot */
.paper-mid { --paper-v: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%); }

/* feint ruled notepad — the hero's ground, 30px leading. The wedge is what makes the run
   read as arriving: the first rule stops close to the page edge and each one below reaches
   a step further in, until the interface takes over. "to top right" ties the diagonal to
   the gutter's own corners, so the stepping holds at any width. */
.paper-ruled { --paper: repeating-linear-gradient(180deg, transparent 0 29px, currentColor 29px 30px); }
/* only the hero steps: the first rule stops near the page edge and each one below reaches
   a step further in, until the interface takes over. Tied to the gutter's own corners so
   the stepping holds at any width. */
.hero.paper {
  /* the step is spent early: only the top few rules are clipped, and everything below runs
     at full length into the sketch. Opaque from 58% of the gutter's diagonal. */
  --paper-w: linear-gradient(to top right, #000 0 58%, transparent 80%);
  --paper-w-r: linear-gradient(to top left, #000 0 58%, transparent 80%);
}
/* maths squares, 24px, both axes equal */
.paper-squares { --paper:
  repeating-linear-gradient(180deg, transparent 0 23px, currentColor 23px 24px),
  repeating-linear-gradient(90deg, transparent 0 23px, currentColor 23px 24px); }
/* graph paper — 12px squares with every fifth rule laid twice, so it doubles in weight */
.paper-graph { --paper:
  repeating-linear-gradient(180deg, transparent 0 11px, currentColor 11px 12px),
  repeating-linear-gradient(90deg, transparent 0 11px, currentColor 11px 12px),
  repeating-linear-gradient(180deg, transparent 0 59px, currentColor 59px 60px),
  repeating-linear-gradient(90deg, transparent 0 59px, currentColor 59px 60px); }
/* dot grid — intersections only. A dot inks far less area than a rule, so it carries its
   own weight: without the bump it reads as noise rather than as paper. */
.paper-dots { --paper: radial-gradient(currentColor 1.05px, transparent 1.4px); }
.paper-dots::before, .paper-dots::after { background-size: 18px 18px; color: rgba(26,26,26,.065); }
/* below 1080px the margins are too narrow to hold a texture: the mask would clip it to a
   sliver against the copy, which reads as a stripe rather than as paper */
@media (max-width: 1080px) { .paper::before, .paper::after { display: none; } }

html[data-theme="dark"] .paper::before, html[data-theme="dark"] .paper::after { color: rgba(255,255,255,.038); }
html[data-theme="dark"] .paper-dots::before, html[data-theme="dark"] .paper-dots::after { color: rgba(255,255,255,.065); }

/* ======================= HERO ======================= */
/* the credit was dropped 82px to sit by the sketch's column feet; the hero's foot padding
   gives that space back so the hero's height — and the arch sketch pinned to its foot —
   does not move with it */
.hero { padding: 78px 0 118px; position: relative; overflow: hidden; }
/* the fall sits above the hero's clip so an edge glyph's centred label is never cut off */
.hero-fall { overflow: visible; }
/* the sketch's deck line must land ON a rule. Rules ink 13.64px above the hero's foot and
   every 30px above that; the deck sits 209.14px above this box's foot (280 - 70.86 in the
   SVG), so the box's own foot has to be 134.5px up — putting the deck at 343.64px = 13.64 +
   11 rules. At the previous 126.5px it fell 22px below the nearest rule. */
.hero-arches { position: absolute; left: 0; right: 0; bottom: 134.5px; height: 280px; pointer-events: none; z-index: 0;
  color: rgba(26,26,26,.058);
  -webkit-mask-image: linear-gradient(180deg, #000 0 90%, rgba(0,0,0,.55) 95%, transparent 97%),
    radial-gradient(58% 24% at 50% 97%, transparent 0 34%, rgba(0,0,0,.4) 66%, rgba(0,0,0,.85) 88%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.78) 9%, rgba(0,0,0,.82) 26%, rgba(0,0,0,.78) 50%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.78) 91%, rgba(0,0,0,.5) 100%);
  mask-image: linear-gradient(180deg, #000 0 90%, rgba(0,0,0,.55) 95%, transparent 97%),
    radial-gradient(58% 24% at 50% 97%, transparent 0 34%, rgba(0,0,0,.4) 66%, rgba(0,0,0,.85) 88%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.78) 9%, rgba(0,0,0,.82) 26%, rgba(0,0,0,.78) 50%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.78) 91%, rgba(0,0,0,.5) 100%);
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; }
.hero-edge-pier {
  position: absolute; bottom: 48px; height: 167px; width: 1px; z-index: 0; pointer-events: none;
  background: rgba(26,26,26,.062);
  -webkit-mask-image: linear-gradient(180deg, #000 0 66%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 66%, transparent 100%);
}
.hero-edge-pier.l { left: 0; }
.hero-edge-pier.r { right: 0; }
@media (max-width: 1080px) { .hero-edge-pier { display: none; } }

html[data-theme="dark"] .hero-edge-pier { background: rgba(255,255,255,.068); }
.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;  letter-spacing: .19em; text-transform: uppercase; color: var(--nav-link); position: relative;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
/* one notebook rule under the eyebrow, no wider than the phrase itself. Kept at .07 — heavy
   enough to register as a line, light enough that the paper stays a ground and not a motif. */
.hero-badge::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: rgba(26,26,26,.07);
}
html[data-theme="dark"] .hero-badge::after { background: rgba(255,255,255,.10); }
/* the badge is also used as a link elsewhere; keep a hit area without re-boxing it */
.hero-badge-link { padding: 4px 2px; }
.hero-badge-link { text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; }
.hero-badge-link:hover { color: var(--ink-2); }
.hero-badge .dot-pulse { animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110,183,4,.5); }
  50% { box-shadow: 0 0 0 6px rgba(110,183,4,0); }
}
@media (prefers-reduced-motion: reduce) { .hero-badge .dot-pulse { animation: none; } }
.hero h1 {
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.02; letter-spacing: -0.03em; font-weight: 600;
  max-width: 16ch; margin: 0 auto;
  text-wrap: balance;
}
/* display-size green words carry the wordmark's exact #6EB704 so they match the full
   stop; --green-ink stays for small text, where the brand green would be too light. */
.hero h1 .g, .feature h2 .g, .band-head h2 .g { color: var(--green); }
/* 46ch: the widest measure that still nests inside the headline, so the block keeps a
   clear silhouette. Wider than this and centred text starts to fray. */
.hero-sub {
  font-size: clamp(16.5px, 1.7vw, 18px); color: var(--ink-2); font-weight: 420;
  max-width: 46ch; margin: 34px auto 0; line-height: 1.6; letter-spacing: -0.012em;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
/* 4a — one action, held to the eyebrow's own measure (246px) so the block tapers to a
   point rather than widening at its foot. The secondary action is a link, not a button. */
.hero-act { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 208px; margin-inline: auto; }
.hero-act .btn-cta { justify-content: space-between; }
.hero-act-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 14.5px; font-weight: 500; color: var(--nav-link); text-decoration: none; transition: color .16s; }
.hero-act-link:hover { color: var(--ink); }
.hero-act-link svg { width: 14px; height: 14px; }

/* video frame */
/* negative: the screenshot rides up over the lower half of the scatter, so those icons
   run under it instead of stopping short of its edge */
/* the study-tool field. Stacking is the whole trick: the icons sit at z-index 0 and the
   mockup at 2, so anything low enough is simply occluded by the interface — no mask, no
   fade. Nothing animates; the fall is implied by scale, tilt and tone alone (small,
   steeply tilted and faint high up; larger, nearly upright and firmer low down). */
.hero-lower { position: relative; margin-top: 32px; }
/* the field breaks out of the text column and spans the hero, so the set can sit well
   clear of the copy on both sides; it starts up beside the headline and runs down into
   the mockup, which still occludes whatever crosses its top edge. */
.hero-fall { position: absolute; top: -34px; left: 0; right: 0; height: 330px; z-index: 0; pointer-events: none; }
.hero-fall .hf-i {
  position: absolute; left: var(--x); top: var(--y);
  --sf: 1.05;
  width: calc(var(--s) * var(--sf)); height: calc(var(--s) * var(--sf));
  margin: calc(var(--s) * var(--sf) / -2) 0 0 calc(var(--s) * var(--sf) / -2);
  display: grid; place-items: center; pointer-events: auto;
  border-radius: 11px; border: 1px solid transparent; background: transparent;
  color: rgba(26,26,26,.247); transform: rotate(var(--r));
  transition: color .2s ease, background .2s ease, border-color .2s ease,
              box-shadow .22s ease, transform .3s var(--ease);
}
/* the tiles run 28px to 46px, so a stroke-width in viewBox units was being scaled with them —
   the big glyphs read heavier than the small ones. non-scaling-stroke pins the weight in screen
   pixels instead, so every glyph is drawn with the same pencil whatever its size. */
.hero-fall .hf-i svg { width: 56%; height: 56%; stroke-width: 1.35px; }
.hero-fall .hf-i svg * { vector-effect: non-scaling-stroke; }
/* the four faintest are the smallest and highest, so the field recedes upward */
.hero-fall .hf-i.hf-faint { color: rgba(26,26,26,.171); }
.hero-fall .hf-i:hover, .hero-fall .hf-i:focus-visible {
  color: rgba(110,183,4,.72); background: rgba(255,255,255,.6); border-color: transparent;
  -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1);
  box-shadow: 0 1px 2px rgba(20,24,12,.05);
  transform: rotate(0deg); outline: none;
}
/* the label sits above the tile so the mockup below can never clip it */
/* the labels are prompts now, so they wrap inside a capped box and read in sentence case */
.hero-fall .hf-i em {
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(200px, 22vw); text-align: center;
  font-family: var(--font-sans); font-style: normal; font-size: 11px; font-weight: 500;
  letter-spacing: -.005em; line-height: 1.4; color: var(--muted);
  white-space: normal; text-wrap: pretty; opacity: 0; transition: opacity .18s ease;
}
.hero-fall .hf-i:hover em, .hero-fall .hf-i:focus-visible em { opacity: 1; }
@media (max-width: 1080px) { .hero-fall { display: none; } }

html[data-theme="dark"] .hero-fall .hf-i { color: rgba(255,255,255,.247); }
html[data-theme="dark"] .hero-fall .hf-i.hf-faint { color: rgba(255,255,255,.171); }
html[data-theme="dark"] .hero-fall .hf-i:hover,
html[data-theme="dark"] .hero-fall .hf-i:focus-visible {
  color: #A8DE3C; background: rgba(255,255,255,.07); border-color: transparent;
  -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1);
  box-shadow: 0 1px 2px rgba(0,0,0,.20);
}
@media (prefers-reduced-motion: reduce) { .hero-fall .hf-i { transition: none; } }

.hero-act { margin: 18px auto 0; position: relative; z-index: 1; }
.hero-stage { margin-top: 78px; position: relative; z-index: 2; }
.hero-stage .window-link { display: block; margin: 0 auto; }
/* the hero frame gets a tighter shadow than --shadow-lg: that token's 90px-blur layer at a
   40px offset washed the 84px of ground below the interface, which read as a change in
   background colour rather than as a shadow. This seats the frame without tinting the
   arcade sketch underneath it. */
.hero-stage .window { box-shadow: 0 2px 6px rgba(20,24,12,.05), 0 16px 38px rgba(20,24,12,.07); }
html[data-theme="dark"] .hero-stage .window { box-shadow: 0 2px 6px rgba(0,0,0,.24), 0 16px 38px rgba(0,0,0,.30); }

/* hero prompt-typing showcase */
.hero-prompts { max-width: 600px; margin: 80px auto 0; text-align: center; }
.hp-label { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.hp-bar { display: flex; align-items: center; gap: 13px; margin-top: 13px; background: var(--card); border: 1px solid var(--line);
  border-radius: 100px; padding: 13px 12px 13px 22px; box-shadow: var(--shadow-sm); text-align: left; }
.hp-leaf { width: 32px; height: 32px; border-radius: 50%; background: var(--green-tint); display: grid; place-items: center; flex: 0 0 auto; }
.hp-leaf svg { width: 18px; height: 18px; }
.hp-text { flex: 1; min-width: 0; font-size: 16.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hp-caret { width: 2px; height: 20px; background: var(--green); border-radius: 1px; flex: 0 0 auto; margin: 0 auto 0 -7px;
  animation: hpBlink 1s steps(1) infinite; }
@keyframes hpBlink { 50% { opacity: 0; } }
.hp-send { width: 36px; height: 36px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: 0 0 auto; }
.hp-send svg { width: 17px; height: 17px; color: var(--on-green); }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.hp-chips span { font-size: 13px; font-weight: 500; color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-radius: 100px; padding: 6px 13px; }
@media (prefers-reduced-motion: reduce) { .hp-caret { animation: none; } }
.feat-cta { margin-top: 24px; align-self: flex-start; }

/* keeps-you-motivated: cycling metric cards */
.metric-cycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 760px; margin: 44px auto 0; }
.mc-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px 24px;
  box-shadow: var(--shadow-sm); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity .4s ease, transform .4s ease; }
.mc-card.swap { opacity: 0; transform: translateY(10px); }
.mc-ic { display: none; }
.mc-num { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.mc-lab { font-size: 14.5px; color: var(--muted); line-height: 1.35; max-width: 16ch; }
@media (max-width: 720px) { .metric-cycle { grid-template-columns: 1fr; max-width: 360px; } }

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

/* tracks-what-you-know: cycling topic with sub-topic ratings */
.topics-strip { margin: 84px auto 0; max-width: 540px; }
.ts-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px;
  box-shadow: var(--shadow-md); transition: opacity .28s ease, transform .28s ease; }
.ts-card.swap { opacity: 0; transform: translateY(8px); }
.ts-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.ts-deg { font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--green-deep); background: var(--green-tint); border-radius: 100px; padding: 4px 11px; flex: 0 0 auto; }
.ts-topic { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-subs { display: flex; flex-direction: column; }
.ts-sub { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line-2, #f0efeb); }
.ts-sub:first-child { border-top: 0; }
.ts-sname { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  border-radius: 100px; padding: 4px 11px 4px 9px; }
.ts-state i { width: 8px; height: 8px; border-radius: 50%; animation: tsDot 1.8s ease-in-out infinite; }
@keyframes tsDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
.ts-state.s { color: var(--green-ink); background: var(--green-tint); } .ts-state.s i { background: var(--green); }
.ts-state.m { color: #b06a0e; background: #fbeccf; } .ts-state.m i { background: #e0a33c; animation-delay: .5s; }
.ts-state.w { color: #b23950; background: #fbe7ea; } .ts-state.w i { background: #d4596f; animation-delay: 1s; }
@media (max-width: 560px) { .topics-strip { max-width: none; } .ts-topic { font-size: 15px; } .ts-sname { font-size: 14px; } }

@media (prefers-reduced-motion: reduce) { .ts-card, .ts-state i { transition: none; animation: none; } }

/* knows-when: cycling insight card */
.insight-cycle { margin: 26px 0 0; max-width: 440px; }
.ic-card { display: flex; align-items: center; gap: 15px; background: var(--card); border: 1px solid var(--line);
  border-radius: 15px; padding: 17px 19px; box-shadow: var(--shadow-md); transition: opacity .28s ease, transform .28s ease; }
.ic-card.swap { opacity: 0; transform: translateY(8px); }
.ic-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--green-tint); color: var(--green-deep);
  display: grid; place-items: center; }
.ic-ic svg { width: 22px; height: 22px; }
.ic-body { display: flex; flex-direction: column; min-width: 0; }
.ic-label { font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted-2); }
.ic-value { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin-top: 3px; line-height: 1.25; }
@media (max-width: 560px) { .insight-cycle { max-width: none; } }

.insight-cycle-center { margin: 64px auto 0; }
@media (prefers-reduced-motion: reduce) { .ic-card { transition: none; } }

/* keeps-you-motivated cell + footer green + larger UCL */
.mot-diagram { display: flex; align-items: center; justify-content: center; }
.mot-diagram .insight-cycle { margin: 0; width: 100%; }

/* distinct background band for motivated + focused sections */
.section-band { background: #efeee8; }
html[data-theme="dark"] .section-band { background: #16170f; }

/* module-mastery ring diagram (motivation) */
.ring-graphic { width: 100%; max-width: 440px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 24px; }
.rg-ring { position: relative; flex: 0 0 auto; width: 130px; height: 130px; }
.rg-ring svg { width: 130px; height: 130px; transform: rotate(-90deg); }
.rg-bg { fill: none; stroke: var(--line); stroke-width: 11; }
.rg-fg { fill: none; stroke: var(--green); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) .3s; }
.rg-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.rg-center b { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.rg-center span { font-size: 12px; color: var(--muted); }
.rg-mods { flex: 1; min-width: 0; }
.rg-mhead { font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
.mr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.mr-row:last-child { margin-bottom: 0; }
.mr-name { flex: 0 0 auto; width: 92px; font-size: 13px; font-weight: 500; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-track { flex: 1; height: 7px; border-radius: 5px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); }
.mr-track i { display: block; height: 100%; border-radius: 5px; background: var(--green); width: 0; transition: width 1.1s cubic-bezier(.4,0,.2,1); }
.mr-pct { flex: 0 0 auto; width: 36px; text-align: right; font-family: "Geist Mono", monospace; font-size: 12px; font-weight: 600; color: var(--green-deep); }
@media (max-width: 460px) { .ring-graphic { flex-direction: column; } .mr-name { width: 110px; } }

@media (prefers-reduced-motion: reduce) { .rg-fg, .mr-track i { transition: none; } }

/* milestones achievement diagram (motivation) */
.ach-graphic { width: 100%; max-width: 440px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow-md); }
.ach-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ach-title { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.ach-count { font-family: "Geist Mono", monospace; font-size: 12.5px; color: var(--muted); }
.ach-count b { color: var(--green-deep); font-weight: 700; }
.ach-list { display: flex; flex-direction: column; }
.ach-row { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--line-2, #f0efeb); }
.ach-row:first-child { border-top: 0; }
.ach-dot { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #ececE6; color: #fff; }
.ach-dot svg { width: 14px; height: 14px; }
.ach-dot.done { background: var(--green); color: var(--on-green); }
.ach-dot.now { background: transparent; border: 2px solid var(--green); position: relative; }
.ach-dot.now::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: tsDot 1.6s ease-in-out infinite; }
.ach-row.next .ach-dot { border: 2px dashed #cfcdc6; }
.ach-label { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.ach-row.next .ach-label { color: var(--muted); }
.ach-when { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--muted-2); flex: 0 0 auto; }
.ach-prog { font-family: "Geist Mono", monospace; font-size: 12px; font-weight: 600; color: var(--green-deep);
  background: var(--green-tint); border-radius: 100px; padding: 4px 10px; flex: 0 0 auto; }
.ach-reveal-stagger { opacity: 0; }
.reveal.in .ach-graphic .ach-row { animation: achIn .45s ease forwards; opacity: 0; }
.ach-row:nth-child(1){animation-delay:.1s} .ach-row:nth-child(2){animation-delay:.18s}
.ach-row:nth-child(3){animation-delay:.26s} .ach-row:nth-child(4){animation-delay:.34s}
.ach-row:nth-child(5){animation-delay:.42s} .ach-row:nth-child(6){animation-delay:.5s}
@keyframes achIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
html[data-theme="dark"] .ach-dot { background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) { .reveal.in .ach-graphic .ach-row { animation: none; opacity: 1; } .ach-dot.now::after { animation: none; } }

/* live metrics dashboard (motivation) */
.mot-dash { width: 100%; max-width: 440px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px; box-shadow: var(--shadow-md); }
.md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.md-tile { background: var(--bg); border: 1px solid var(--line); border-radius: 13px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 2px; transition: opacity .3s ease, transform .3s ease; }
.md-tile.swap { opacity: 0; transform: translateY(6px); }
.md-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--green-tint); color: var(--green-deep);
  display: grid; place-items: center; margin-bottom: 8px; }
.md-ic svg { width: 17px; height: 17px; }
.md-val { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.md-lab { font-size: 12.5px; color: var(--muted); }
.md-spark { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 10px; }
.md-spark i { flex: 1; border-radius: 2px 2px 0 0; background: #CDE59F; }
.md-spark i.on { background: var(--green); }
.md-foot { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: "Geist Mono", monospace; font-size: 12px; font-weight: 600; color: var(--green-deep); }
.md-foot i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: tsDot 1.8s ease-in-out infinite; }
html[data-theme="dark"] .md-tile { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .md-spark i { background: rgba(110,183,4,.4); }
html[data-theme="dark"] .md-spark i.on { background: var(--green); }
@media (prefers-reduced-motion: reduce) { .md-tile { transition: none; } .md-foot i { animation: none; } }

/* progress-so-far motivation diagram */
.prog-graphic { width: 100%; max-width: 440px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow-md); }
.pg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pg-title { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.pg-trend { display: inline-flex; align-items: center; gap: 7px; font-family: "Geist Mono", monospace; font-size: 12px;
  font-weight: 600; color: var(--green-deep); background: var(--green-tint); border-radius: 100px; padding: 5px 11px; }
.pg-trend svg { width: 14px; height: 14px; }
.pg-bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; margin-top: 20px; }
.pg-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; height: 100%; justify-content: flex-end; }
.pg-fill { width: 100%; max-width: 30px; height: 0; border-radius: 7px 7px 0 0; background: #CDE59F; }
.pg-fill.on { background: var(--green); box-shadow: 0 6px 16px rgba(110,183,4,.34); }
.pg-bar em { font-style: normal; font-family: "Geist Mono", monospace; font-size: 11px; color: var(--muted-2); }
.reveal.in .prog-graphic .pg-fill { animation: pgGrow .8s cubic-bezier(.4,0,.2,1) forwards; }
.pg-bar:nth-child(1) .pg-fill { animation-delay: .1s; } .pg-bar:nth-child(2) .pg-fill { animation-delay: .17s; }
.pg-bar:nth-child(3) .pg-fill { animation-delay: .24s; } .pg-bar:nth-child(4) .pg-fill { animation-delay: .31s; }
.pg-bar:nth-child(5) .pg-fill { animation-delay: .38s; } .pg-bar:nth-child(6) .pg-fill { animation-delay: .45s; }
.pg-bar:nth-child(7) .pg-fill { animation-delay: .52s; } .pg-bar:nth-child(8) .pg-fill { animation-delay: .59s; }
@keyframes pgGrow { to { height: var(--h); } }
.pg-stats { display: flex; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.pg-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pg-stat b { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--green-deep); }
.pg-stat span { font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .prog-graphic .pg-fill { height: var(--h); animation: none; } }

/* goal-gradient motivation diagram */
.goal-graphic { width: 100%; max-width: 440px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow-md); }
.gg-top { display: flex; align-items: baseline; justify-content: space-between; }
.gg-title { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.gg-pct { font-family: "Geist Mono", monospace; font-size: 22px; font-weight: 600; color: var(--green-deep); letter-spacing: -0.01em; }
.gg-plot { position: relative; margin-top: 12px; }
.gg-plot svg { width: 100%; height: 150px; display: block; overflow: visible; }
.gg-area { fill: url(#ggFill); opacity: 0; transition: opacity .6s ease .5s; }
.gg-line { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 520; stroke-dashoffset: 520; }
.reveal.in .goal-graphic .gg-line { animation: ggDraw 1.5s cubic-bezier(.4,0,.2,1) .2s forwards; }
.reveal.in .goal-graphic .gg-area { opacity: 1; }
@keyframes ggDraw { to { stroke-dashoffset: 0; } }
.gg-flag { position: absolute; right: -6px; top: -10px; width: 38px; height: 38px; border-radius: 11px;
  background: var(--green); color: var(--on-green); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(110,183,4,.4);
  opacity: 0; transform: scale(.4); }
.gg-flag svg { width: 20px; height: 20px; }
.reveal.in .goal-graphic .gg-flag { animation: ggFlag .5s cubic-bezier(.34,1.56,.64,1) 1.4s forwards; }
@keyframes ggFlag { to { opacity: 1; transform: scale(1); } }
.gg-axis { display: flex; justify-content: space-between; margin-top: 9px;
  font-family: "Geist Mono", monospace; font-size: 12px; color: var(--muted-2); }
.gg-cue { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 13px; font-weight: 600;
  color: var(--green-deep); background: var(--green-tint); border-radius: 100px; padding: 8px 14px; }
.gg-cue i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: tsDot 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gg-line { stroke-dashoffset: 0; animation: none; } .gg-area, .gg-flag { opacity: 1; transform: none; animation: none; } .gg-cue i { animation: none; } }
.foot-brand p .g { color: var(--green); }
.sup-logos img.sup-ucl { height: 150px; }
.supporters { margin: 64px auto 0; text-align: center; }
.sup-label { font-family: "Geist Mono", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2); }
.sup-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 56px; margin-top: 30px; }
.sup-logos img { height: 64px; width: auto; opacity: 0.78; transition: opacity .2s; }
.sup-logos img:hover { opacity: 1; }
html[data-theme="dark"] .sup-logos img { filter: invert(1) brightness(1.6); }
@media (max-width: 560px) { .sup-logos { gap: 36px; } .sup-logos img { height: 48px; } }


.window {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; max-width: 1040px; margin: 0 auto;
  position: relative;
}
.window::after { /* faint green ambient under the frame */
  content: ""; position: absolute; inset: auto -8% -40px -8%; height: 120px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(110,183,4,.22), transparent 70%);
  filter: blur(20px); z-index: -1;
}
/* the mark below the frame — the hand-off from hero into the content sections. It sits inside
   the hero, so the ruled paper and the arcade sketch still meet exactly as they did. */
.hero-sign { position: absolute; left: 0; right: 0; bottom: 13.14px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero-sign-by { background: var(--bg); padding: 0 14px; line-height: 1;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2); }
.avail-note { display: flex; flex-direction: column; align-items: center; gap: 26px; margin: -77px 0 106px; }
.hero-sign-dot { background: var(--bg); padding: 0 14px; margin: 0; line-height: 0; }
.hero-sign-dot::before { content: ""; display: inline-block; width: 16px; height: 1px; background: var(--green); vertical-align: middle; }
.hero-sign-note { background: var(--bg); padding: 0 14px; line-height: 1;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2); }
.hero-sign-note .hsn-all { color: var(--green-ink); }
.hero-sign-clear { display: flex; align-items: baseline; background: var(--bg); padding: 0 24px; }
.hero-sign img { height: 35px; width: auto; display: block; }
.hero-sign img.hero-sign-d { display: none; }
html[data-theme="dark"] .hero-sign img.hero-sign-l { display: none; }
html[data-theme="dark"] .hero-sign img.hero-sign-d { display: block; }

/* the interface is the page's biggest object, so it is also its biggest target: the whole
   frame links to the waitlist. The cue only appears on approach — a permanent button over
   the screenshot would compete with the CTA above it. */
.window-link { display: block; position: relative; text-decoration: none; color: inherit;
  border-radius: var(--radius-lg); transition: transform .22s var(--ease); }
.window-link .window { transition: box-shadow .36s ease, border-color .18s ease; }
.window-link:focus-visible { outline: none; }
.window-link:hover .window, .window-link:focus-visible .window {
  box-shadow: 0 4px 12px rgba(20,24,12,.075), 0 30px 70px rgba(20,24,12,.145); }
.window-link:hover .url, .window-link:focus-visible .url { background: #ebeae6; color: var(--muted); }
html[data-theme="dark"] .window-link:hover .url,
html[data-theme="dark"] .window-link:focus-visible .url { background: rgba(255,255,255,.12); color: var(--ink-2); }
.window-cue { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  background: #00312D; color: #fff; border-radius: 100px; padding: 6px 8px 6px 13px;
  font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,49,45,.20), 0 10px 26px rgba(0,49,45,.18);
  opacity: 0; pointer-events: auto; cursor: pointer;
  transition: opacity .18s ease, transform .18s var(--ease), background .18s ease, color .18s ease, box-shadow .18s ease; }
.window-cue svg { transition: transform .24s var(--ease), color .2s ease; }
.window-cue:hover { background: #6EB704; color: #00312D;
  box-shadow: 0 2px 6px rgba(110,183,4,.30), 0 12px 32px rgba(110,183,4,.28); }
.window-cue:hover svg { color: #00312D; transform: translateX(3px); }
html[data-theme="dark"] .window-cue:hover { background: #6EB704; color: #00312D; }
.window-cue svg { width: 12px; height: 12px; color: #8FD213; }
.window-link:hover .window-cue, .window-link:focus-visible .window-cue { opacity: 1; }
.window-cue { transform: translate(-50%, calc(50% + 5px)); }
.window-link:hover .window-cue, .window-link:focus-visible .window-cue { transform: translate(-50%, 50%); }
html[data-theme="dark"] .window-cue { color: #A8DE3C; }
@media (prefers-reduced-motion: reduce) {
  .window-link, .window-link .window, .window-cue { transition: none; }
}
.window-bar {
  position: relative;
  height: 44px; display: flex; align-items: center; gap: 16px; padding: 0 16px;
  border-bottom: 1px solid var(--line-2); background: #fbfbfa;
}
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dots i:nth-child(1){ background:#f0605c;} .dots i:nth-child(2){ background:#f7bd45;} .dots i:nth-child(3){ background:#62c655;}
/* the pill is centred on the FRAME, not in the space left over beside the traffic lights —
   `margin: 0 auto` in a flex row put it 31px right of centre, so it never lined up with the
   app's own centred search bar below. Width is 41% to match that bar's proportion. */
.url {
  transition: background .18s ease, color .18s ease;
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 41%; max-width: 430px; height: 26px; border-radius: 8px;
  background: #f1f1ef; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: "Geist Mono", monospace; font-size: 12px; color: var(--muted);
}
.url svg { width: 11px; height: 11px; }
/* matches the hero screenshot's own 1518x821 — the full interface, uncropped */
.window-body { position: relative; aspect-ratio: 1518 / 821; background: var(--bg); }
.window-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero-caption {
  text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--muted-2);
  font-family: "Geist Mono", monospace; letter-spacing: 0.02em;
}

/* ======================= FEATURES ======================= */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.feature + .feature { margin-top: 130px; }
.feature.flip .feat-text { order: 2; }
.feat-text { max-width: 460px; }
.feature.flip .feat-text { margin-left: auto; }
.feat-text h2 {
  font-size: clamp(28px, 3.2vw, 40px); margin: 18px 0 0; letter-spacing: -0.026em;
  text-wrap: balance;
}
.feat-text p { font-size: 17.5px; color: var(--muted); margin: 18px 0 0; line-height: 1.55; max-width: 44ch; }
.feat-meta { margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap; }
.feat-meta .m { display: flex; flex-direction: column; gap: 2px; }
.feat-meta .m b { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.feat-meta .m span { font-size: 13px; color: var(--muted-2); }


/* image stage */
.stage-img {
  position: relative; border-radius: var(--radius-lg); padding: 38px;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(110,183,4,.12), transparent 55%),
    linear-gradient(180deg, #fbfcf9, #f1f3ec);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  overflow: hidden;
}
.stage-img::before { /* dotted grid texture */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(26,26,26,.05) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .6;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 80%);
  mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 80%);
}
.stage-img img { position: relative; width: 100%; border-radius: 14px; box-shadow: var(--shadow-md); }
.stage-img.bleed { padding: 40px 0 0 40px; }
.stage-img.bleed img { border-radius: 14px 0 0 0; box-shadow: -18px 18px 50px rgba(20,24,12,.14); }
.stage-tag { position: absolute; z-index: 3; }
.stage-img > *:not(.stage-bar):not(.stage-tag) { padding: 18px 24px 0; }
.stage-img > *:not(.stage-bar):not(.stage-tag) + *:not(.stage-tag) { padding-top: 0; }
.stage-img > .topics-strip, .stage-img > .insight-cycle, .stage-img > .metric-cycle,
.stage-img > .hero-prompts, .stage-img > .ring-graphic, .stage-img > .ach-graphic,
.stage-img > .mot-dash, .stage-img > .prog-graphic, .stage-img > .goal-graphic { margin-top: 0; margin-bottom: 0; }
.stage-img img { position: relative; width: 100%; border-radius: 10px; box-shadow: none; }
.stage-img.bleed { padding: 0; }
.stage-img.bleed img { border-radius: 10px; box-shadow: none; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature.flip .feat-text { order: 0; }
  .feat-text, .feature.flip .feat-text { padding: 48px 0 28px; }
  .stage-img { margin: 0 0 24px; }
}

.stage-tag {
  position: absolute; z-index: 3; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); border-radius: 12px; padding: 10px 13px;
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500;
}
.stage-tag .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--green-tint); color: var(--green-deep); }
.stage-tag .ic svg { width: 15px; height: 15px; }

/* tailored explanation popover under the Explain button */
.explain-pop {
  position: absolute; z-index: 4; top: 72px; right: 20px; width: 290px; max-width: 72%;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; box-shadow: var(--shadow-lg);
  transform-origin: top right;
}
.explain-pop::before {
  content: ""; position: absolute; top: -7px; right: 30px; width: 13px; height: 13px;
  background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.ep-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ep-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--green); color: var(--on-green); flex: 0 0 auto; }
.ep-ic svg { width: 14px; height: 14px; }
.ep-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.ep-body { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.ep-body b { font-weight: 600; color: var(--ink); }
.ep-body em { font-style: italic; color: var(--green-deep); }
.ep-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ep-chip { font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--green-deep); background: var(--green-tint); border-radius: 100px; padding: 4px 10px; }
.ep-cursor { width: 8px; height: 16px; background: var(--green); border-radius: 2px; opacity: .85;
  animation: epBlink 1.1s steps(1) infinite; }
@keyframes epBlink { 50% { opacity: 0; } }
.reveal .explain-pop { opacity: 0; transform: translateY(-8px) scale(.96); }
.reveal.in .explain-pop { animation: epIn .5s cubic-bezier(.34,1.56,.64,1) .7s forwards; }
@keyframes epIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal .explain-pop, .reveal.in .explain-pop { opacity: 1; transform: none; animation: none; }
  .ep-cursor { animation: none; }
}
html[data-theme="dark"] .explain-pop::before { background: var(--card); }
@media (max-width: 560px) { .explain-pop { width: 220px; top: 64px; } }


/* learning-style fan diagram */
.style-graphic { margin-top: 28px; max-width: 440px; }
.sg-concept { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 16px; box-shadow: var(--shadow-sm); }
.sg-concept .sg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.sg-fan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; position: relative; }
.sg-fan::before { content: ""; position: absolute; top: -14px; left: 16.6%; right: 16.6%; height: 14px;
  border-top: 2px solid var(--line); border-left: 2px solid var(--line); border-right: 2px solid var(--line);
  border-radius: 8px 8px 0 0; }
.sg-way { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 10px;
  font-size: 13px; font-weight: 500; color: var(--muted); box-shadow: var(--shadow-sm); position: relative;
  cursor: pointer; font-family: inherit; transition: border-color .18s, background .18s, color .18s, transform .14s; }
.sg-way:hover { transform: translateY(-2px); border-color: #CBE5B4; }
.sg-way .sg-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: #f1f1ee; color: var(--muted); }
.sg-way .sg-ic svg { width: 19px; height: 19px; }
.sg-way.on { border-color: transparent; background: var(--green-tint); color: var(--green-deep); font-weight: 600; }
.sg-way.on .sg-ic { background: var(--green); color: var(--on-green); }
html[data-theme="dark"] .sg-way .sg-ic { background: rgba(255,255,255,.06); }

/* image placeholder */
.img-placeholder {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 14px;
  border: 2px dashed var(--line); background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--muted-2);
}
.img-placeholder svg { width: 48px; height: 48px; }
.img-placeholder span { font-family: "Geist Mono", monospace; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ======================= STUDENTS / PILLARS ======================= */
.band-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.band-head h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 16px; letter-spacing: -0.028em; }
.band-head p { font-size: 18px; color: var(--muted); margin: 18px auto 0; max-width: 56ch; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* supported-by institution band */
.inst-band { margin-top: 64px; text-align: center; }
.inst-label { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 30px; }
.inst-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px 52px; }
.inst-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--muted); opacity: .82; filter: grayscale(1); transition: opacity .2s ease, color .2s ease; }
.inst-logo:hover { opacity: 1; color: var(--ink-2); filter: grayscale(0); }
.inst-logo svg { width: 30px; height: 30px; flex: 0 0 auto; }
.inst-logo b { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.inst-logo b span { font-weight: 400; }
@media (max-width: 620px) { .inst-logos { gap: 22px 34px; } .inst-logo b { font-size: 18px; } }

.pillar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm); position: relative;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pillar .pic { width: 46px; height: 46px; border-radius: 13px; background: var(--green-tint); color: var(--green-deep); display: grid; place-items: center; margin-bottom: 22px; }
.pillar .pic svg { width: 23px; height: 23px; }
.pillar h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.pillar p { font-size: 15px; color: var(--muted); margin: 12px 0 0; line-height: 1.55; }

/* ======================= TESTIMONIALS ======================= */
.tcols { columns: 3; column-gap: 22px; margin-top: 8px; }
@media (max-width: 900px){ .tcols { columns: 2; } }
@media (max-width: 620px){ .tcols { columns: 1; } }


.tcard {
  break-inside: avoid; margin-bottom: 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.tcard.feature-quote { background: var(--ink); border-color: var(--ink); color: #fff; }
.tcard.feature-quote .t-body { color: #f0f0ee; font-size: 18px; }
.tcard.feature-quote .t-name { color: #fff; }
.tcard.feature-quote .t-meta { color: #b9bbb1; }
.t-body { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); letter-spacing: -0.011em; }
.t-body .hl { background: linear-gradient(transparent 62%, rgba(110,183,4,.34) 0); padding: 0 1px; }
.t-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.t-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--green-tint); }
.t-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.t-meta { font-size: 12.5px; color: var(--muted-2); margin-top: 1px; }

/* ======================= DESK VS GENERIC CHATBOTS ======================= */
.vs-prompts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 860px; margin: 8px auto 34px; }
.vs-prompt-col { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px 28px; overflow: hidden; }
.vs-prompt-col::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #d8dad5; }
.vs-prompt-col.vs-desk { border-color: var(--green); }
.vs-prompt-col.vs-desk::before { background: var(--green); }
.vs-prompt-head { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 18px; }
.vs-q { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin-bottom: 12px; }
.vs-a { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.vs-a b { color: var(--green-deep); font-weight: 600; }
.vs-grid { display: flex; flex-direction: column; max-width: 860px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; background: var(--card); }
.vs-head-row, .vs-row { display: grid; grid-template-columns: 1fr 1fr; }
.vs-cell { position: relative; padding: 13px 34px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.vs-cell:first-child { border-right: 1px solid var(--line); }
.vs-cell:last-child { background: var(--green-tint); }
.vs-head-row .vs-cell { padding-top: 32px; padding-bottom: 22px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--muted); display: flex; align-items: center; }
.vs-head-row .vs-cell.vs-desk-head { gap: 12px; color: var(--ink); }
.vs-row:last-of-type .vs-cell { padding-bottom: 32px; }
.vs-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: var(--on-green); display: grid; place-items: center; flex: 0 0 auto; }
.vs-ic svg { width: 18px; height: 18px; }
.vs-ic.muted { background: #eceeea; color: var(--muted); }
.vs-ic.vs-ic-logo { background: #fff; padding: 7px; border: 1px solid var(--line); }
.vs-ic.vs-ic-logo img { width: 100%; height: 100%; object-fit: contain; }
html[data-theme="dark"] .vs-ic.muted { background: rgba(255,255,255,.08); }
.vs-cell.no, .vs-cell.yes { padding-left: 66px; }
.vs-cell.no::before, .vs-cell.yes::before { content: ""; position: absolute; left: 34px; top: 13px; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; }
.vs-cell.yes::before { background: var(--green); }
.vs-cell.yes::after { content: ""; position: absolute; left: 39.5px; top: 18.5px; width: 7px; height: 4px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg); }
.vs-cell.no { color: var(--muted); }
.vs-cell.no::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.vs-cell.no::after { content: ""; position: absolute; left: 39px; top: 21px; width: 8px; height: 1.6px; background: var(--muted-2); border-radius: 1px; }
@media (max-width: 640px) { .vs-head-row, .vs-row { grid-template-columns: 1fr; } .vs-cell:first-child { border-right: none; border-bottom: 1px solid var(--line); } .vs-cell:last-child { border-top: none; } .vs-head-row .vs-cell:last-child { padding-top: 18px; } }


/* vs-demo — animated prompt/response comparison */
.vs-demo { max-width: 600px; margin: 52px auto 0; }
.vs-demo-q { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); min-height: 29px; }
.vs-demo-q::before { content: "\201C"; } .vs-demo-q:not(:empty)::after { content: "\201D"; }
.vs-demo-cur { display: inline-block; width: 2px; height: 18px; background: var(--green); vertical-align: -3px; margin-left: 1px; animation: vsDemoBlink 1s steps(1) infinite; }
@keyframes vsDemoBlink { 50% { opacity: 0; } }
.vs-demo-a { margin-top: 18px; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; min-height: 90px; }
.vs-demo-a.show { opacity: 1; transform: none; }
.vs-demo-tag { display: inline-block; font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: #eceeea; border-radius: 100px; padding: 4px 11px; margin-bottom: 12px; }
.vs-demo-tag.desk { color: var(--green-deep); background: var(--green-tint); }
.vs-demo-text { display: block; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.vs-demo-text b { color: var(--green-deep); font-weight: 600; }

/* ======================= PRICING ======================= */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 860px; margin: 8px auto 0; }
.price-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg,24px);
  padding: 38px 34px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.price-card.premium { border-color: var(--green); box-shadow: 0 10px 30px rgba(110,183,4,.14), var(--shadow-sm); }
.price-badge { position: absolute; top: -13px; left: 34px; font-family: "Geist Mono", monospace; font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--on-green); background: var(--green); border-radius: 100px; padding: 5px 13px; }
.price-top h3 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.price-amt { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -.024em; color: var(--ink); margin-top: 10px; }
.price-amt span { font-size: 16px; font-weight: 500; color: var(--muted); }
.price-amt .price-permonth { color: var(--green-deep); font-weight: 600; }
.price-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.price-list li { position: relative; font-size: 15px; color: var(--ink-2); line-height: 1.45; display: flex; align-items: center; gap: 13px; }
.price-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.price-ic svg { width: 16px; height: 16px; }
.price-list li.yes .price-ic { background: var(--green-tint); color: var(--green-deep); }
.price-list li.no { color: var(--muted-2); }
.price-list li.no .price-ic { background: #f1f1ee; color: var(--muted-2); }
html[data-theme="dark"] .price-list li.no .price-ic { background: rgba(255,255,255,.07); }
.price-cta { margin-top: 28px; width: 100%; }
.price-note { text-align: center; font-size: 13.5px; color: var(--muted-2); margin: 22px auto 0; max-width: 48ch; }
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; max-width: 440px; } }


/* token comparison diagram */
.token-compare { max-width: 620px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 20px; }
.token-row { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 18px; }
.token-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.token-bar { height: 14px; border-radius: 8px; background: #eceeea; overflow: hidden; }
.token-fill { height: 100%; border-radius: 8px; }
.token-fill.basic { background: var(--muted); }
.token-fill.premium { background: var(--green); }
.token-amt { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; text-align: right; }
.token-amt span { color: var(--muted-2); }
@media (max-width: 560px) { .token-row { grid-template-columns: 60px 1fr; } .token-amt { grid-column: 1 / -1; text-align: left; } }


/* ======================= HOW IT WORKS ======================= */
.how { position: relative; }
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 64px; position: relative;
}

/* onboarding -> auto group-chat demo (How it works) */
.hero-fomo{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; font-size:13.5px; font-weight:600; color:var(--green-deep); background:var(--green-tint); border-radius:100px; padding:8px 16px; }
.hero-fomo-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:heroFomoPulse 1.6s ease-in-out infinite; }
@keyframes heroFomoPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .hero-fomo-dot{ animation:none; } }

.onboard-demo{ max-width:600px; margin:56px auto 0; }
.ob-window.window{ margin:0; }
.ob-body{ padding:26px 28px 28px; display:flex; flex-direction:column; gap:16px; transition:opacity .25s ease; }
.ob-field label{ display:block; font-family:"Geist Mono", monospace; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); margin-bottom:7px; }
.ob-val{ min-height:22px; font-size:17px; font-weight:500; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 14px; display:flex; align-items:center; }
.ob-caret{ width:2px; height:19px; background:var(--green); margin-left:2px; opacity:0; animation:obBlink 1s steps(1) infinite; }
@keyframes obBlink{ 50%{ opacity:0; } }
.ob-btn{ align-self:flex-start; margin-top:4px; font-size:14.5px; font-weight:600; color:var(--on-green); background:var(--green); border-radius:11px; padding:11px 22px; transition:transform .15s ease, box-shadow .15s ease; }
.ob-btn.pressed{ transform:scale(.96); box-shadow:0 0 0 4px rgba(110,183,4,.22); background:var(--green-deep); }
.ob-loading{ display:none; flex-direction:column; gap:14px; padding:28px 28px 30px; }
.ob-loading.show{ display:flex; }
.ob-stage{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:500; color:var(--muted); opacity:.4; transition:opacity .3s ease, color .3s ease; }
.ob-stage.active{ opacity:1; color:var(--ink); }
.ob-stage.done{ opacity:1; color:var(--ink); }
.ob-stage-ic{ position:relative; width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; }
.ob-spinner{ width:18px; height:18px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--green); animation:obSpin .8s linear infinite; opacity:0; transition:opacity .2s ease; }
.ob-stage.active .ob-spinner{ opacity:1; }
@keyframes obSpin{ to{ transform:rotate(360deg); } }
.ob-check-ic{ position:absolute; inset:0; width:22px; height:22px; border-radius:50%; background:var(--green); color:var(--on-green); padding:4px; box-sizing:border-box; opacity:0; transform:scale(.5); transition:opacity .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1); }
.ob-stage.done .ob-check-ic{ opacity:1; transform:scale(1); }
.ob-stage-chats{ display:none; flex-direction:column; gap:10px; margin:2px 0 0 34px; }
.ob-stage-chats.show{ display:flex; }
.ob-chat-row{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 15px; opacity:0; transform:translateY(10px) scale(.98); transition:opacity .3s ease, transform .3s ease; }
.ob-chat-row.show{ opacity:1; transform:none; }
.ob-chat-ic{ width:34px; height:34px; border-radius:9px; background:var(--green-tint); color:var(--green-deep); display:grid; place-items:center; flex:0 0 auto; }
.ob-chat-ic svg{ width:17px; height:17px; }
.ob-chat-meta{ display:flex; flex-direction:column; flex:1; min-width:0; }
.ob-chat-meta b{ font-size:14.5px; font-weight:600; color:var(--ink); }
.ob-chat-meta span{ font-size:12.5px; color:var(--muted); margin-top:1px; }
.ob-check{ width:24px; height:24px; border-radius:50%; background:var(--line); color:transparent; display:grid; place-items:center; flex:0 0 auto; transition:background .2s ease, color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1); transform:scale(.6); }
.ob-check svg{ width:14px; height:14px; }
.ob-check.show{ background:var(--green); color:var(--on-green); transform:scale(1); }
.ob-step{ display:flex; flex-direction:column; gap:16px; }
.ob-modules-list{ display:flex; flex-direction:column; gap:8px; min-height:22px; }
.ob-module-chip{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 13px; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; }
.ob-module-chip.show{ opacity:1; transform:none; }
.ob-module-chip svg{ width:15px; height:15px; color:var(--green); flex:0 0 auto; opacity:0; }
.ob-module-caret{ width:2px; height:16px; margin-left:1px; }
@media (max-width:560px){ .onboard-demo{ margin-top:40px; } .ob-body{ padding:20px; } }

/* connecting line through the step numbers */
.steps::before {
  content: ""; position: absolute; top: 33px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--green) 0 9px, transparent 9px 18px);
  opacity: .4;
}
.step {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 0 14px; position: relative; text-align: center;
}
.step .num {
  font-family: "Geist Mono", monospace; font-size: 26px; font-weight: 600;
  color: var(--green-deep); background: var(--bg); border: 2px solid var(--green);
  border-radius: 50%; width: 66px; height: 66px; display: grid; place-items: center;
  letter-spacing: 0; margin: 0 auto; position: relative; z-index: 1;
  box-shadow: 0 0 0 8px var(--bg);
}
.step h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 26px 0 0; }
.step p { font-size: 15px; color: var(--muted); margin: 11px auto 0; line-height: 1.55; max-width: 30ch; }
.step .arch-mini { display: none; }

/* ======================= CTA BAND ======================= */
.cta-band { background: var(--dark); color: #fff; border-radius: var(--radius-lg); padding: 72px 56px; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.028em; max-width: 18ch; margin: 0 auto; }
.cta-band p { color: #b9bbb1; font-size: 18px; margin: 18px auto 0; max-width: 50ch; }
.cta-band .hero-cta { margin-top: 32px; }
.cta-arches { position: absolute; inset: 0; opacity: .14; pointer-events: none; }

/* ======================= FOOTER ======================= */
/* fades to nothing at both ends, so the page's foot is not sealed off with a ruled box */
.footer { padding: 70px 0 40px; border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line) 14%, var(--line) 86%, transparent) 1; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand .brand { margin-bottom: 16px; }
.foot-brand p { font-size: 14.5px; color: var(--muted); max-width: 30ch; line-height: 1.55; }
.foot-col h4 { font-family: "Geist Mono", monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green-ink); margin: 0 0 16px; font-weight: 600; }
.foot-col a { display: block; font-size: 14.5px; color: var(--ink-2); padding: 6px 0; width: fit-content; transition: color .18s, transform .18s; }
.foot-col a:hover { color: var(--green-ink); transform: translateX(3px); }
.foot-col a[aria-current="page"] { color: var(--green-ink); font-weight: 600; }
/* the inner rule runs from the left edge and gives out early — a shorter line than the one
   above it, so the two are not the same mark twice */
.foot-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 54px; padding-top: 26px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--line-2), var(--line) 8%, var(--line) 62%, transparent 92%) 1;
  gap: 18px; flex-wrap: wrap; }
.foot-bottom small { font-size: 13px; color: var(--muted-2); }
.foot-news { display: flex; gap: 8px; }
/* the success message replaces the form, so both reserve the same height —
   otherwise the footer columns jump when an email is sent */
.foot-news, .foot-news-done { min-height: 46px; align-items: center; }
.foot-news input { font-family: inherit; font-size: 14px; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); width: 100%; max-width: 200px; color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease; }
.foot-news input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(110,183,4,.18); }
/* merged newsletter pill: the field holds the go arrow as its submit */
.news-merge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 16px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); transition: border-color .18s ease, box-shadow .18s ease; }
.news-merge:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(110,183,4,.18); }
.foot-news .news-merge input, .foot-news .news-merge input:focus { border: 0; background: transparent; box-shadow: none; width: 100%; max-width: 146px; padding: 7px 0; }
.news-go { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: var(--green); color: #00312D; display: grid; place-items: center; cursor: pointer; transition: background .22s ease, color .22s ease; }
.news-go svg { width: 17px; height: 17px; transform: rotate(90deg); transition: transform .22s var(--ease); }
.news-go:hover { background: #00312D; color: var(--green); }
html[data-theme="dark"] .news-merge { background: #15160f; }
.foot-news-done { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--green-ink); line-height: 1.5; max-width: 260px; animation: fnDone .35s var(--ease); }
.foot-news-done svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--green); }
@keyframes fnDone { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ======================= reveal ======================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ======================= responsive ======================= */
@media (max-width: 980px) {
  .feature { grid-template-columns: 1fr; gap: 36px; }
  .feature.flip .feat-text { order: 0; }
  .feat-text, .feature.flip .feat-text { max-width: none; margin: 0; }
  .pillars { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .section { padding: 84px 0; }
  .hero { padding: 54px 0 64px; }
  .wrap { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }
  .nav-right .nav-ghost.support, .nav-right .nav-ghost.news { display: none; }
  .cta-band { padding: 54px 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-stage { margin-top: 44px; }
}



/* ---------- Footer social icons ---------- */
.foot-social { display: flex; gap: 12px; margin-top: 20px; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--muted); background: var(--card);
  transition: color .18s, border-color .18s, transform .18s, background .18s;
}
.foot-social a:hover { color: #00312D; background: var(--green); border-color: var(--green); transform: translateY(-2px); }
.foot-social svg { width: 18px; height: 18px; display: block; }
html[data-theme="dark"] .foot-social a { background: rgba(255,255,255,.04); }

/* ---------- Study rhythm day-curve graphic ---------- */
.rhythm-graphic { margin-top: 30px; max-width: 440px; }
.rg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rg-label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.rg-peak { font-family: "Geist Mono", monospace; font-size: 13px; font-weight: 600; color: var(--green-deep);
  background: var(--green-tint); border-radius: 100px; padding: 5px 12px; }
.rhythm-graphic svg { display: block; overflow: visible; }

.rg-curve { position: relative; }
.rg-curve svg { width: 100%; height: 170px; }
.rg-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 6; }
.rg-area { fill: url(#rgGrad); opacity: 0; transition: opacity .6s ease .5s; }
.rg-line { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 620; stroke-dashoffset: 620; }
.rg-dot { opacity: 0; }
.rg-dot circle:first-child { fill: var(--green); opacity: .2; }
.rg-dot circle:last-child { fill: var(--green); }
.reveal.in .rhythm-graphic .rg-line { animation: rgDraw 1.4s cubic-bezier(.4,0,.2,1) .2s forwards; }
.reveal.in .rhythm-graphic .rg-area { opacity: 1; }
.reveal.in .rhythm-graphic .rg-dot { animation: rgDotIn .5s cubic-bezier(.34,1.56,.64,1) 1.3s forwards; }
@keyframes rgDraw { to { stroke-dashoffset: 0; } }
@keyframes rgDotIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.rg-dot { transform-box: fill-box; transform-origin: center; }
.rg-axis { display: flex; justify-content: space-between; margin-top: 10px;
  font-family: "Geist Mono", monospace; font-size: 12px; color: var(--muted-2); }

.rg-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rg-tags span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2);
  background: var(--card); border: 1px solid var(--line); border-radius: 100px; padding: 7px 13px; }
.rg-tags span i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); }
.rg-tags span.on { background: var(--green-tint); border-color: transparent; color: var(--green-deep); font-weight: 600; }
.rg-tags span.on i { background: var(--green); }
@media (prefers-reduced-motion: reduce) {
  .rg-line { stroke-dashoffset: 0; animation: none; }
  .rg-area, .rg-dot { opacity: 1; animation: none; }
}

/* ---------- Knowledge map constellation graphic ---------- */
.km-graphic { margin-top: 30px; max-width: 420px; }
.km-graphic svg { display: block; overflow: visible; }
.km-links line { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.reveal.in .km-links line { animation: kmLink .7s ease forwards; }
.km-links line:nth-child(1){ animation-delay:.35s } .km-links line:nth-child(2){ animation-delay:.42s }
.km-links line:nth-child(3){ animation-delay:.49s } .km-links line:nth-child(4){ animation-delay:.56s }
.km-links line:nth-child(5){ animation-delay:.63s } .km-links line:nth-child(6){ animation-delay:.7s }
.km-links line:nth-child(7){ animation-delay:.77s } .km-links line:nth-child(8){ animation-delay:.84s }
@keyframes kmLink { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
.km-links line { pathLength: 1; }
.kn { opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; }
.reveal.in .kn { animation: kmPop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
.kn.core { fill: #4A7A03; }
.kn.s { fill: #3aa425; } .kn.m { fill: #e8a72e; } .kn.w { fill: #d8453b; }
.kn.core { animation-delay: .15s; }
.reveal.in .kn.s:nth-of-type(2){ animation-delay:.9s } 
.km-nodes .kn:nth-child(2){ animation-delay:.95s } .km-nodes .kn:nth-child(3){ animation-delay:1.02s }
.km-nodes .kn:nth-child(4){ animation-delay:1.09s } .km-nodes .kn:nth-child(5){ animation-delay:1.16s }
.km-nodes .kn:nth-child(6){ animation-delay:1.23s } .km-nodes .kn:nth-child(7){ animation-delay:1.3s }
@keyframes kmPop { to { opacity: 1; transform: scale(1); } }
.km-graphic .kn.core { animation-name: kmPopCore; }
@keyframes kmPopCore { 0%{opacity:0;transform:scale(0)} 70%{opacity:1;transform:scale(1)} 100%{opacity:1;transform:scale(1)} }
.km-core-pulse { transform-origin: center; transform-box: fill-box; }
.km-legend { display: flex; gap: 18px; margin-top: 16px; }
.km-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.km-legend i { width: 12px; height: 12px; border-radius: 50%; }
.km-legend i.s { background: #3aa425; } .km-legend i.m { background: #e8a72e; } .km-legend i.w { background: #d8453b; }
@media (prefers-reduced-motion: reduce) {
  .km-links line { opacity: 1; stroke-dashoffset: 0; }  .kn { opacity: 1; transform: none; }
}

/* ---------- Mini-UI graphics (knowledge map + study rhythm) ---------- */
.mini-ui { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 30px; gap: 12px;
  font-family: "Geist", -apple-system, sans-serif; overflow: hidden; }
.mini-ui b { font-weight: 600; }

/* knowledge map */
.kg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kg-head b { font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.kg-tabs { display: inline-flex; gap: 4px; background: #f0efeb; border-radius: 100px; padding: 4px; }
.kg-tabs span { font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 5px 12px; border-radius: 100px; }
.kg-tabs .on { background: var(--green); color: var(--on-green); }
.kg-sub { font-size: 13.5px; color: var(--muted); }
.kg-bar { display: flex; gap: 5px; margin-top: 2px; }
.kg-bar i { height: 9px; border-radius: 5px; }
.kg-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.kg-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.kg-legend i { width: 11px; height: 11px; border-radius: 50%; }
.kg-legend i.ring { border: 2px dashed #c7c5be; box-sizing: border-box; }
.kg-next { background: #fbeceb; border: 1px solid #f3d6d4; border-radius: 14px; padding: 14px 16px; margin-top: 2px; }
.kg-next-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kg-next-top b { font-size: 16px; color: #1f2421; }
.kg-flag { font-size: 11px; font-weight: 600; color: #fff; background: #d8453b; border-radius: 100px; padding: 4px 11px; }
.kg-next-tags { display: flex; gap: 8px; margin-top: 10px; }
.kg-next-tags span { font-size: 12px; color: var(--ink-2); background: #fff; border: 1px solid #f0d3d1; border-radius: 100px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 6px; }
.kg-next-tags em { font-style: normal; color: #d8453b; font-weight: 700; }
.kg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.kg-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 100px; }
.kg-chip svg { width: 14px; height: 14px; }
.kg-chip.s { background: #e6f4dd; color: #3a7d22; }
.kg-chip.m { background: #fbeed2; color: #9a6b16; }
.kg-chip.w { background: #fbe0de; color: #b23a32; }

/* study rhythm */
.sr-top { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.sr-week, .sr-peak { border-radius: 16px; padding: 16px; }
.sr-week { background: var(--card); border: 1px solid var(--line); }
.sr-cap { font-size: 13px; color: var(--muted); }
.sr-cap.light { color: rgba(255,255,255,0.72); }
.sr-big { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin-top: 2px; }
.sr-big.light { color: #fff; }
.sr-bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; margin-top: 14px; }
.sr-bars i { flex: 1; background: #bfe39a; border-radius: 5px 5px 0 0; }
.sr-bars i.hot { background: var(--green); }
.sr-days { display: flex; gap: 7px; margin-top: 7px; }
.sr-days span { flex: 1; text-align: center; font-size: 11px; color: var(--muted-2); }
.sr-peak { position: relative; background: #23241f; overflow: hidden; }
.sr-stars { position: absolute; inset: 0; background-image:
  radial-gradient(1.5px 1.5px at 78% 22%, rgba(255,255,255,0.8), transparent),
  radial-gradient(1.5px 1.5px at 90% 40%, rgba(255,255,255,0.55), transparent),
  radial-gradient(2px 2px at 70% 16%, rgba(255,255,255,0.5), transparent),
  radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,0.4), transparent); }
.sr-peak .sr-cap, .sr-peak .sr-big, .sr-owl { position: relative; z-index: 1; }
.sr-owl { font-size: 12.5px; color: rgba(255,255,255,0.78); line-height: 1.35; margin-top: 18px; }
.sr-sessions { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-top: 2px; }
.sr-stitle { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.sr-donuts { display: flex; justify-content: space-between; gap: 8px; }
.sr-donut { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  --deg: calc(var(--p) * 3.6deg); }
.sr-donut::before { content: ""; width: 50px; height: 50px; border-radius: 50%;
  background: conic-gradient(var(--c) var(--deg), #ededea 0);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
  mask: radial-gradient(circle, transparent 56%, #000 57%); }
.sr-donut b { position: absolute; top: 25px; left: 0; right: 0; transform: translateY(-50%); text-align: center;
  font-size: 12px; font-weight: 600; color: var(--ink); }
.sr-donut em { font-style: normal; font-size: 12px; color: var(--muted); }

/* dark mode tweaks */
html[data-theme="dark"] .kg-tabs { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .kg-next { background: rgba(216,69,59,.14); border-color: rgba(216,69,59,.3); }
html[data-theme="dark"] .kg-next-tags span { background: rgba(255,255,255,.06); border-color: rgba(216,69,59,.3); }
html[data-theme="dark"] .sr-donut::before { background: conic-gradient(var(--c) var(--deg), rgba(255,255,255,.12) 0); }
@media (max-width: 700px) {
  .mini-ui { padding: 20px; gap: 10px; }
  .sr-top { grid-template-columns: 1fr; }
}


.focus-graphic { margin-top: 30px; max-width: 460px; }
.focus-graphic svg { display: block; overflow: visible; }
.fg-noise { opacity: 0; }
.fg-flow { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fg-dot { opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; }
.reveal.in .focus-graphic .fg-noise { animation: fgNoise .6s ease .2s forwards; }
.reveal.in .focus-graphic .fg-flow { animation: fgDraw 1.1s cubic-bezier(.4,0,.2,1) .55s forwards; }
.reveal.in .focus-graphic .fg-dot { animation: fgPop .4s cubic-bezier(.34,1.56,.64,1) 1.55s forwards; }
@keyframes fgNoise { to { opacity: 1; } }
@keyframes fgDraw { to { stroke-dashoffset: 0; } }
@keyframes fgPop { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .fg-noise { opacity: 1; }
  .fg-flow { stroke-dashoffset: 0; }
  .fg-dot { opacity: 1; transform: scale(1); }
}

/* ---------- Deep-focus "one workspace" diagram ---------- */
.zone-diagram { width: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.zd-row { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px;
  box-shadow: var(--shadow-sm); }
.zd-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.zd-chip { font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: var(--bg);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; transform: rotate(var(--r)); }
@keyframes zdChip { from { opacity: 0; transform: rotate(var(--r)) translateY(6px); } to { opacity: 1; transform: rotate(var(--r)); } }

.zd-meter { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.zd-meter-label { font-family: "Geist Mono", monospace; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted-2); white-space: nowrap; }
.zd-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); }
.zd-fill { display: block; height: 100%; border-radius: 5px; }
.zd-fill.hi { background: linear-gradient(90deg, #e0a35a, #d8556a); }
.zd-fill.lo { background: linear-gradient(90deg, #93CE2B, var(--green)); }
.zd-tag { font-family: "Geist Mono", monospace; font-size: 12px; font-weight: 600; border-radius: 100px; padding: 4px 11px; white-space: nowrap; }
.zd-tag.hi { color: #b23a4a; background: #fbe9ea; }
.zd-tag.lo { color: var(--green-deep); background: var(--green-tint); }

.zd-arrow { display: grid; place-items: center; color: var(--muted-2); margin: -4px 0; }
.zd-arrow svg { width: 24px; height: 24px; }

.zd-after { background: linear-gradient(150deg, var(--green-tint), var(--card) 70%); border-color: #dcebc6; }
.zd-one { display: flex; align-items: center; gap: 14px; }
.zd-one-text { display: flex; flex-direction: column; }
.zd-one-text b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.zd-one-text em { font-style: normal; font-size: 14px; color: var(--muted); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .zd-fill.hi { width: 88%; } .zd-fill.lo { width: 26%; }
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid transparent; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--muted);
  transition: border-color .18s, color .18s, background .18s;
  padding: 0;
}
.theme-toggle:hover { background: rgba(26,26,26,.05); color: var(--ink-2); }
.theme-toggle:active { transform: none; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ic-sun { display: none; }

/* ============================================================
   DARK THEME
   ============================================================ */
html[data-theme="dark"] {
  --green: #8FD213;         /* the brand green lifted for dark, blue channel still ~0 */
  --on-green: #11140a;
  --green-ink: #B6E062;     /* readable green text on dark */
  --green-deep: #CCE9A0;    /* glyphs on green tint */
  --green-tint: rgba(110,183,4,.16);
  --green-tint-2: rgba(110,183,4,.24);
  --bg: #1b1d18;
  --ink: #eceee7;
  --ink-2: #cfd1c7;
  --muted: #9fa195;
  --muted-2: #82847a;
  --nav-link: #9fa195;
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.055);
  --card: #23251f;
  --dark: #14150f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.22), 0 8px 22px rgba(0,0,0,.24);
  --shadow-md: 0 2px 4px rgba(0,0,0,.26), 0 16px 42px rgba(0,0,0,.34);
  --shadow-lg: 0 8px 16px rgba(0,0,0,.3), 0 34px 78px rgba(0,0,0,.44);
  color-scheme: dark;
}

/* smooth cross-fade when switching */
body, .nav, .pillar, .step, .tcard, .help-card, .role, .adviser, .post-card,
.tip-block, .form-card, .window-bar, .url, .field input, .field select, .field textarea,
.theme-toggle, .stage-img, .legal-toc a {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .nav, .pillar, .step, .tcard, .help-card, .role, .adviser, .post-card,
  .tip-block, .form-card, .window-bar, .url, .field input, .field select, .field textarea,
  .theme-toggle, .stage-img, .legal-toc a { transition: none; }
}

/* toggle icon swap */
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.07); color: var(--ink-2); }

/* nav glass */
html[data-theme="dark"] .nav { background: transparent; }
html[data-theme="dark"] .nav-link:hover { background: rgba(255,255,255,.07); color: var(--ink); }
html[data-theme="dark"] .nav-ghost:hover { background: rgba(255,255,255,.07); }

/* arches — flip to light strokes */
html[data-theme="dark"] .hero-arches,
html[data-theme="dark"] .ed-hero .hero-arches { color: rgba(255,255,255,.068); }

/* inverted (dark-surface) elements need real contrast in dark mode */
html[data-theme="dark"] .btn-dark { background: #f1f2ec; color: #15170f; }
html[data-theme="dark"] .btn-dark:hover { background: #fff; }
html[data-theme="dark"] .btn-primary { color: #11140a; }

/* device window */
html[data-theme="dark"] .window-bar { background: #15160f; border-bottom-color: var(--line-2); }
html[data-theme="dark"] .url { background: rgba(255,255,255,.06); }

/* feature image stage */
html[data-theme="dark"] .stage-img {
  background: radial-gradient(120% 120% at 80% 0%, rgba(110,183,4,.10), transparent 55%),
    linear-gradient(180deg, #1f211b, #191b15);
  border-color: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .stage-img::before { opacity: .35; }

/* dark-surface bands keep contrast against the (now dark) page */
html[data-theme="dark"] .tcard.feature-quote { background: #16170f; border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .cta-band { border: 1px solid rgba(255,255,255,.09); }

/* footer newsletter input */
html[data-theme="dark"] .foot-news input { background: #15160f; }

/* ======================= OPENING ANIMATION =======================
   Pure CSS, no class toggling and no JS: the end state IS the normal state, so a script
   failure can never leave the first screen blank (it did — rAF is suspended while the
   document is hidden, so the reveal was scheduled into a frame that never arrived).
   The scale sits on .hero rather than a wrapper: a transform on an ancestor re-bases the
   sticky nav and the fixed chat widget, and the hero IS the first screen. */
@keyframes deskFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes deskHeroIn { from { transform: scale(.955); } to { transform: none; } }

.nav { animation: deskFadeIn .34s ease both; }
.hero { transform-origin: 50% 38%; animation: deskHeroIn .62s cubic-bezier(.2,1.5,.4,1) both; }
.hero-inner > * { animation: deskFadeIn .34s ease both; }
.hero-inner > *:nth-child(2) { animation-delay: .05s; }
.hero-inner > *:nth-child(3) { animation-delay: .10s; }
.hero-inner > *:nth-child(4) { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .nav, .hero, .hero-inner > * { animation: none; }
}
/* the paragraph's explanatory half steps back, so the promise reads first */
.hero-sub .tail { color: var(--nav-link); }

/* ---------- Cross-page transitions ---------- */
/* Each page carries a paper-coloured veil in its own <head> that lifts once the page is
   composed (html.page-ready) — that owns the transition; no view-transition double-fade. */
html { background: var(--bg); }

/* nav log in: the CTA's faded twin — wakes into the pine resting coat on hover (3B) */
.nav-login { display: inline-flex; align-items: center; height: 32px; padding: 0 17px;
  border-radius: 100px; background: rgba(0,49,45,.04); color: #00312D;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.008em; text-decoration: none;
  white-space: nowrap; transition: background .22s ease, color .22s ease; }
.nav-login:hover { background: #00312D; color: #fff; }
html[data-theme="dark"] .nav-login { background: rgba(255,255,255,.04); color: #EDEDE8; }
html[data-theme="dark"] .nav-login:hover { background: #EFEEE9; color: #00312D; }

/* cross-page crossfade removed: the paper veil above owns the transition, and the
   cross-document view-transition kept surfacing "Transition was skipped" rejections */

/* footer shelf sketch (ported from the features page) */
.foot-shelf{position:absolute;bottom:100%;left:calc((100% - var(--maxw)) / 2 - 8px);width:300px;margin-bottom:0;pointer-events:none;color:rgba(26,26,26,.22);transform:translateZ(0);backface-visibility:hidden}
.foot-shelf svg{display:block;width:100%;height:112px}
html[data-theme="dark"] .foot-shelf{color:rgba(255,255,255,.2)}

/* ======================= PROPORTIONAL MARKS =======================
   A mark that rides on a surface should scale with that surface, not stay a fixed
   pixel size while the surface shrinks. Each surface becomes its own size container,
   so the cq values below equal today's desktop pixels and shrink proportionally.
   The px line is the fallback for engines without container queries. */
.window-body { container-type: inline-size; }
.window-body .win-mark {
  position: absolute; z-index: 1; width: auto; pointer-events: none;
  top: 18px; left: 22px; height: 17px;
  top: 1.59cqw; left: 1.94cqw; height: 1.5cqw;
}
.cta-band .cta-markbox {
  position: absolute; inset: 0; container-type: inline-size; pointer-events: none; z-index: 2;
}
.cta-band .cta-markbox .cta-mark {
  right: 34px; bottom: 28px; height: 19px;
  right: 2.99cqw; bottom: 2.46cqw; height: 1.67cqw;
}

/* =====================================================================
   MOBILE RESTRUCTURE LAYER
   Appended last so it wins on equal specificity. Two breakpoints only:
   768px (tablet) and 1200px (desktop). Below 768px everything is one
   column, nothing is absolutely positioned for layout, and no element
   may exceed the viewport. Structure only — no visual redesign.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas { max-width: 100%; height: auto; }
/* SVGs get the width cap but keep their authored height: the instrument diagrams
   carry intrinsic width/height and collapse if height is forced to auto */
svg { max-width: 100%; }

/* the container padding and the type scale below are the MOBILE spec, so they are
   scoped to the phone. Above 768px the authored hero scale, measures and 32px wrap
   padding stand exactly as designed. */
input, select, textarea, button { font-size: max(16px, 1em); }
@media (max-width: 767.98px) {
  .wrap { padding-inline: 20px; }
  .hero .wrap h1, .hero .wrap .hero-title { font-size: clamp(32px, 8vw, 56px); line-height: 1.1; text-wrap: balance; max-width: none; }
  .band-head h2, .feat-text h2, .section-head h2, .cta-band h2 { font-size: clamp(24px, 5vw, 40px); }
  /* a measure ceiling only where none was authored — named measures keep their own */
  p:not([class]), li:not([class]) { max-width: 68ch; }
}

@media (max-width: 767.98px) {
  /* --- one column, no exceptions --- */
  .feature, .pillars, .steps, .foot-grid, .price-grid, .metric-cycle, .md-grid,
  .vs-prompts, .vs-head-row, .vs-row, .token-row, .sg-fan, .trip, .duo,
  .help-cards, .culture-strip, .blog-grid, .legal, .ix-panel, .ixkey, .ixb-grid,
  .ap-hero, .ap-duo, .role, .price-cols, .kn-grid { grid-template-columns: 1fr; }
  .tcols { columns: 1; }
  .ring-graphic, .ic-card, .role, .ixtray-hd, .endband { flex-direction: column; align-items: flex-start; }
  .ixkey { grid-auto-flow: row; grid-template-rows: none; }

  /* text before image, always */
  .feature .feat-text, .feature.flip .feat-text { order: 0; margin-left: 0; max-width: none; }
  .feature .stage-img, .feature .stage, .feature .ktk, .feature .nstage { order: 1; }
  .ap-hero { grid-template-areas: "head" "rows" "art"; }

  /* vertical rhythm */
  .section, .section.tight { padding: 56px 0; }
  .hero { padding: 40px 0 48px; }
  .feature + .feature, .fseq .feature + .feature { margin-top: 56px; }
  .band-head { margin-bottom: 36px; }
  .cta-band { padding: 40px 20px; }

  /* --- absolute positioning returned to flow (or dropped where purely decorative) --- */
  .hero-arches, .hero-edge-pier, .hero-fall, .foot-shelf, .tray-books, .seqbk,
  .jhow, .mco, .ncta, .hs-caret, .hs-note, .kco, .stage-tag,
  #pricing .bnote, .paper::before, .paper::after { display: none; }
  .explain-pop { position: static; width: auto; max-width: none; margin-top: 14px; }
  .explain-pop::before { display: none; }
  .window-cue { position: static; transform: none; opacity: 1; margin: 12px auto 0; width: fit-content; }
  .foot-shelf, .seqbk, .tray-books { position: static; }

  /* --- touch targets --- */
  .nav-link, .foot-col a, .ns-link, .ix-chip, .btn, .btn-cta, .nav-login,
  .sg-way, .role-cta a, .fx-toc a { min-height: 44px; }
  .nav-link, .foot-col a, .fx-toc a { display: flex; align-items: center; }
  .foot-social a, .theme-toggle { min-width: 44px; min-height: 44px; }
  .nav-links, .foot-social, .hero-cta, .ix-chips, .fx-toc, .inst-logos { gap: 12px; }
  .foot-col a { padding-block: 10px; }

  /* nothing may exceed the viewport */
  .window, .stage-img, .onboard-demo, .vs-demo, .token-compare, .hero-prompts,
  .topics-strip, .insight-cycle, .km-graphic, .rhythm-graphic, .style-graphic,
  .ring-graphic, .ach-graphic, .mot-dash, .prog-graphic, .goal-graphic { max-width: 100%; }
}

/* ---------- mobile nav: burger + full-screen panel ---------- */
.nav-burger { display: none; }
.nav-panel { display: none; }
@media (min-width: 768px) { .nav-burger, .nav-panel { display: none !important; } }
@media (max-width: 767.98px) {
  .nav-links { display: none; }
  .nav-right .nav-login, .nav-right .nav-cta-w { display: none; }
  .nav-burger {
    display: grid; align-content: center; justify-items: end; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; margin-right: -8px;
    background: none; border: 0; cursor: pointer; color: var(--ink);
  }
  .nav-burger i { display: block; width: 22px; height: 1.8px; border-radius: 2px; background: currentColor;
    transition: transform .26s var(--ease), width .2s; }
  .nav-burger i:last-child { width: 15px; }
  .nav-burger.on i:first-child { transform: translateY(3.4px) rotate(45deg); }
  .nav-burger.on i:last-child { width: 22px; transform: translateY(-3.4px) rotate(-45deg); }

  .nav-panel {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1400;
    background: var(--bg); padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .24s var(--ease), transform .28s var(--ease), visibility .24s;
  }
  .nav-panel.on { opacity: 1; visibility: visible; transform: none; }
  html[data-theme="dark"] .nav-panel { background: #1b1d18; }
  .np-top { display: flex; align-items: center; height: 68px; flex: 0 0 auto; }
  .np-word, .np-word-rev { height: 18px; width: auto; }
  .np-word-rev { display: none; }
  html[data-theme="dark"] .np-word { display: none; }
  html[data-theme="dark"] .np-word-rev { display: block; }
  .np-x { margin-left: auto; width: 44px; height: 44px; margin-right: -10px; display: grid;
    place-items: center; background: none; border: 0; cursor: pointer; color: var(--muted); }
  .np-x svg { width: 20px; height: 20px; }
  .np-links { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .np-link {
    display: flex; align-items: center; min-height: 52px; text-decoration: none;
    font-family: var(--font-display); font-size: 24px; font-weight: 600;
    letter-spacing: -0.03em; color: var(--ink); border-bottom: 1px solid var(--line);
  }
  .np-link.on { color: var(--green-ink); }
  .np-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }
  .np-ghost, .np-cta {
    display: grid; place-items: center; width: 100%; min-height: 48px; border-radius: 14px;
    text-decoration: none; font-size: 16px; font-weight: 600;
  }
  .np-ghost { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
  .np-cta { min-height: 52px; border-radius: 100px; background: #00312D; color: #fff; }
  html[data-theme="dark"] .np-ghost { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .nav-panel, .nav-burger i { transition: none; } }

/* ---------- offenders found by the 360/390/430 overflow test ----------
   Selectors are one class deeper than the page-level rules they correct, since those
   live in each page's own <style> and would otherwise win on document order. */
@media (max-width: 767.98px) {
  /* the group-study carousel bleeds -26px each side to sit under the desktop wrap
     padding; at 20px page padding that pushed 6px past the viewport on both edges */
  .sg-car .sg-caps {
    margin-inline: -20px; padding-inline: 20px; scroll-padding: 0 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
  /* the metrics tray's two-column rows kept desktop tracks, so the right tile ran out */
  .mx .mx-row2, .mx .mx-row { grid-template-columns: 1fr; }
  .mx .mx-ringrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  /* the setup band's fixed 210px rail column pushed its pane (and the pane's absolutely
     placed buttons) past the viewport */
  .section.how .hwA { grid-template-columns: 1fr; gap: 24px; }
  /* the attention diagram labels are absolutely placed by percentage inside each lane —
     reserving their own width as trailing space keeps the right-most one on screen */
  .bf-fig { padding-right: 62px; }
  .bf-fig .bf-lane { grid-template-columns: 84px 1fr; gap: 12px; }
}