@import url("fonts.css");

/* radr landing page.
   Page theme lock: light, whole page. Type: Geist (display + body), Geist Mono (data only).

   One object carries the page and it is the radar, rendered in WebGL. Every feature below it
   gets its own looping scene instead of a screenshot of the app.

   Colour system: clean paper and near-black ink, with mint and yellow carrying the page. Mint is
   the brand and the primary action (a light fill, so it always takes dark text); yellow marks
   what was learned and doubles as a highlighter under key phrases. Pink (the moment to act) and
   indigo (a reply) are accents only, kept to small marks. The five beats of the follow story take one colour each, and the
   same colours return in the hero beacons, the bento cells and the pricing tiers. Each colour
   has a fill, a darker ink for text (all pass AA on white) and a soft tint.

   Shape rule, applied everywhere: surfaces 18px, inner rows 12px, buttons and chips fully round.

   z-index scale: 0 splashes, 1 content and canvases, 3 act copy, 4 radar cards, 5 follow stage
   (mobile), 60 nav. Red exists for form errors only. */

:root {
  --bg: #f7f8f6;
  --card: #fefffe;
  --tint: #eef1ee;
  --ink: #151a18;
  --muted: #5b635f;
  --faint: #727a76;
  --line: #e1e6e2;
  --line-2: #c8cfca;

  --blue: #3ddc97;
  --blue-deep: #0b7a55;
  --blue-soft: #dcf8ec;
  --coral: #ff6fb1;
  --coral-ink: #b0236b;
  --coral-soft: #ffe8f3;
  --sun: #ffd43b;
  --sun-ink: #7a5b00;
  --sun-soft: #fff6cf;
  --mint: #5b4dff;
  --mint-ink: #3b2ed1;
  --mint-soft: #ecebff;
  --night: #151a18;
  --bad: #b3261e;
  --bad-soft: #fbe9e7;

  --r: 18px;
  --r-in: 12px;
  --nav-h: 56px;
  --gutter: clamp(16px, 5vw, 60px);
  --max: 1180px;
  --measure: 34rem;

  /* Slow and weighted. Nothing on this page springs. */
  --ease: cubic-bezier(0.22, 0.85, 0.28, 1);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shadow: 0 1px 2px rgba(21, 26, 24, 0.04), 0 18px 40px -24px rgba(21, 26, 24, 0.22);
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
mark { background: none; color: inherit; }

::selection { background: #c9f2df; color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }

.shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.lede { color: var(--muted); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; }
/* Key phrases get a yellow highlighter stroke instead of a colour, so they stay fully legible. */
.blue {
  color: var(--ink);
  background-image: linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: 0.06em;
}

/* ============================================================ navigation */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(247, 248, 246, 0.74);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav .shell { display: flex; align-items: center; gap: 30px; }

/* The lockup: the radar mark, the name, and under the name what it is in three words. */
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand .mark { width: 40px; height: 40px; flex: none; }
.brand-text { display: grid; gap: 4px; }
.brand-text b { font-size: 26px; line-height: 0.86; font-weight: 650; letter-spacing: -0.045em; }
.brand-text span { font-size: 12px; line-height: 1.15; color: var(--muted); white-space: nowrap; }
@media (max-width: 520px) { .brand-text span { display: none; } }

.nav-links { display: flex; gap: 26px; }
.nav-links a { font-size: 13px; color: var(--muted); transition: color 0.3s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-signin { font-size: 13px; font-weight: 500; margin-right: -14px; }
.nav-signin:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .nav-links { display: none; } }

/* ============================================================ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.18s var(--ease);
}
.btn:active { transform: scale(0.97); }

/* Ink on mint is well past AA; white on mint would not be. */
.btn-primary { background: var(--blue); color: var(--ink); }
.btn-primary:hover { background: #2cc585; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { height: 34px; padding: 0 16px; font-size: 13px; }

/* ============================================================ the act

   One tall section, first thing on the page. The nav is fixed above it, so the pinned frame is
   stuck from scroll position zero and never travels before it locks. */

.act { position: relative; height: 300vh; }
.pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding-top: var(--nav-h);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center; align-items: center;
  padding-inline: 16px;
  overflow: hidden;
}

.act-copy { position: relative; z-index: 3; text-align: center; padding-top: clamp(20px, 5vh, 60px); width: 100%; }

.act-lines { --display: clamp(34px, min(5.6vw, 8.4vh), 80px); position: relative; height: calc(var(--display) * 2.3); }
.act-line {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: var(--display);
  line-height: 1.08;
  letter-spacing: -0.04em;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.16s linear, transform 0.16s var(--ease);
  padding-inline: var(--gutter);
  will-change: opacity, transform;
}
.act-line.is-on { opacity: 1; transform: none; transition: opacity 0.26s var(--ease) 0.1s, transform 0.34s var(--ease) 0.1s; }

.act-sub {
  margin-top: 12px; color: var(--muted);
  font-size: clamp(15px, 1.6vw, 19px);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.16s linear, transform 0.16s var(--ease);
}
.act-sub.is-on { opacity: 1; transform: none; transition: opacity 0.3s var(--ease) 0.16s, transform 0.36s var(--ease) 0.16s; }

.act-cta {
  display: flex; gap: 14px; justify-content: center; margin-top: 22px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.18s linear, transform 0.18s var(--ease);
  pointer-events: none;
}
.act-cta.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.3s var(--ease) 0.08s, transform 0.36s var(--ease) 0.08s; }
/* The dial grows up behind the buttons as it locks on; the outlined one must not show it through. */
.act-cta .btn-ghost { background: var(--bg); }

.scope { position: relative; z-index: 1; height: min(100%, 540px); width: auto; max-width: 100%; aspect-ratio: 1; }
.scope canvas { display: block; width: 100%; height: 100%; }

/* The WebGL field fills the whole pinned frame; the cards ride on a layer of the same size. */
.field { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: none; }
.locks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.lock {
  position: absolute; z-index: 4;
  width: 226px; padding: 13px 15px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 24px 48px -20px rgba(0, 0, 0, 0.18);
  display: grid; gap: 3px;
  opacity: 0;
  translate: 0 -50%;
  transition: opacity 0.18s linear, transform 0.18s var(--ease);
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
}
.lock::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lc, var(--blue)); }
.lock[data-color="coral"] { --lc: var(--coral); --lc-ink: var(--coral-ink); }
.lock[data-color="mint"] { --lc: var(--mint); --lc-ink: var(--mint-ink); }
.lock.is-on { opacity: 1; transform: none; transition: opacity 0.3s var(--ease), transform 0.34s var(--ease); }
.lock b { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.lock span { font-size: 12px; color: var(--muted); line-height: 1.4; }

.tally {
  position: relative; z-index: 3;
  display: flex; align-items: baseline; gap: 9px; justify-content: center;
  padding-bottom: clamp(20px, 5vh, 56px);
  font-size: 13px; color: var(--faint);
}
.tally b { font-family: var(--mono); font-weight: 500; font-size: 26px; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .act { height: 270vh; }
  .scope { width: min(100%, 400px); height: auto; }
  .lock { width: min(300px, calc(100vw - 48px)); padding: 11px 13px 11px 15px; }
  .lock b { font-size: 13px; }
}

/* ============================================================ section frame */

/* Close enough together that a heading and what it introduces share one screen. */
.section { padding-block: clamp(44px, 5.4vw, 76px); position: relative; }
.section-head { max-width: 50rem; margin: 0 auto clamp(24px, 3vw, 38px); text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.5vw, 46px); }
.section-head .lede { margin: 12px auto 0; max-width: 40rem; font-size: clamp(16px, 1.35vw, 19px); text-wrap: balance; }

/* ============================================================ follow

   One pinned frame. The track is tall; the frame inside it sticks under the nav for the whole
   length, so the stage never drifts while you read. Invisible marks split the track into five
   equal stretches and whichever one crosses the middle of the viewport picks the beat.

   Left: a short carousel. The current beat sits in the middle, the one before and the one after
   stay in view above and below it, smaller and softened, so the column never looks empty.
   Right: the stage, with two cards stacked behind it so it reads as a deck of five. */

/* --stage-h: the stage takes whatever one screen has left under the nav and the heading, up to
   its full 520px. On a short screen the line under the heading goes, so the stage keeps its room. */
.follow { --head-room: 262px; --stage-h: clamp(380px, calc(100svh - var(--nav-h) - var(--head-room)), 520px); padding-block: clamp(8px, 1.6vw, 24px); }
@media (max-height: 800px) { .follow { --head-room: 168px; } .follow .section-head .lede { display: none; } }
.follow .section-head { margin-bottom: 0; }
.follow-track { position: relative; height: calc(100vh + 6 * 46vh); height: calc(100svh + 6 * 46vh); }
/* The marks cover exactly the stretch where the frame is pinned (the middle of the viewport runs
   from half a frame below the track's top to half a frame above its bottom), so every beat,
   the first and the last included, plays while the frame is locked. */
.follow-marks {
  position: absolute; left: 0; right: 0; pointer-events: none;
  top: calc(50vh + var(--nav-h) / 2); bottom: calc(50vh - var(--nav-h) / 2);
  top: calc(50svh + var(--nav-h) / 2); bottom: calc(50svh - var(--nav-h) / 2);
  /* The last beat gets a double stretch, so its animation and text finish while still locked. */
  display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)) minmax(0, 2fr);
}
.follow-pin {
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.4vh, 38px);
}
.follow-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.beats-col { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 30px; align-items: center; height: var(--stage-h); }

/* A thin rail of five stops that fills as you go. Each stop jumps to its beat. */
.beat-dots { position: relative; display: grid; gap: 22px; justify-items: center; }
.beat-dots::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; translate: -50% 0; background: var(--line); border-radius: 2px; }
.beat-dots::after {
  content: ""; position: absolute; top: 6px; left: 50%; width: 2px; translate: -50% 0; border-radius: 2px; background: var(--ink);
  height: calc((100% - 12px) * var(--fill, 0)); transition: height 0.7s var(--ease);
}
.beat-dots button {
  position: relative; z-index: 1; width: 12px; height: 12px; padding: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg); border: 2px solid var(--line-2);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.beat-dots button.done { background: var(--ink); border-color: var(--ink); }
.beat-dots button[aria-current="step"] { background: var(--blue); border-color: var(--blue); transform: scale(1.25); box-shadow: 0 0 0 5px var(--blue-soft); }
.beat-dots button:hover { border-color: var(--ink); }

.beats {
  position: relative; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.beat {
  position: absolute; left: 0; right: 0; top: 50%;
  display: grid; gap: 14px; transform-origin: 0 50%;
  translate: 0 -50%;
  transition: transform 0.85s var(--ease), opacity 0.6s var(--ease), filter 0.6s var(--ease);
}
.beat h3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.035em; line-height: 1.1; }
.beat p { font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); max-width: 30rem; transition: opacity 0.4s var(--ease); }
.beat[data-pos="0"] { transform: none; opacity: 1; filter: none; }
.beat[data-pos="-1"] { transform: translateY(calc(var(--stage-h) * -0.36)) scale(0.72); opacity: 0.34; filter: blur(1.5px); }
.beat[data-pos="1"] { transform: translateY(calc(var(--stage-h) * 0.36)) scale(0.72); opacity: 0.34; filter: blur(1.5px); }
.beat[data-pos="-2"] { transform: translateY(-300px) scale(0.6); opacity: 0; filter: blur(8px); }
.beat[data-pos="2"] { transform: translateY(300px) scale(0.6); opacity: 0; filter: blur(8px); }
.beat:not([data-pos="0"]) p { opacity: 0; }

/* The heading of the beat that arrives writes itself in word by word, out of a slight blur. */
.beat .w { display: inline-block; white-space: pre; }
.beat.is-on .w { animation: word-in 0.7s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 80ms); }
.beat.is-on p { animation: rise-in 0.7s var(--ease) 0.28s both; }
@keyframes word-in { from { opacity: 0; transform: translateY(0.45em); filter: blur(6px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

.stage-wrap { position: relative; isolation: isolate; }
.stage-wrap::before, .stage-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); pointer-events: none;
}
.stage-wrap::before { transform: translateY(14px) scale(0.955); opacity: 0.8; box-shadow: var(--shadow); }
.stage-wrap::after { transform: translateY(27px) scale(0.91); opacity: 0.45; z-index: -1; }

.stage {
  --accent: var(--blue); --accent-ink: var(--blue-deep); --accent-soft: var(--blue-soft);
  position: relative; z-index: 1;
  height: var(--stage-h);
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(21, 26, 24, 0.05), 0 30px 60px -34px rgba(21, 26, 24, 0.3);
  padding: 22px;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px;
  overflow: hidden;
}

.who { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mono-avatar {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: linear-gradient(145deg, #dff5ea, #bfeed8);
  color: #0d6b4b; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.mono-avatar.sm { width: 32px; height: 32px; font-size: 11px; }
.who-text { display: grid; line-height: 1.3; }
.who-text b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.who-text span { font-size: 13px; color: var(--muted); }
.who-tag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue-deep); font-size: 12.5px; font-weight: 500;
}
.who-step { display: inline-block; }
.who-step.flip { animation: word-in 0.5s var(--ease) both; }
.stage[data-step="1"] { --accent: var(--sun); --accent-ink: var(--sun-ink); --accent-soft: var(--sun-soft); }
.stage[data-step="2"] { --accent: var(--coral); --accent-ink: var(--coral-ink); --accent-soft: var(--coral-soft); }
.stage[data-step="3"] { --accent: var(--mint); --accent-ink: var(--mint-ink); --accent-soft: var(--mint-soft); }

.panes { position: relative; }
.pane {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(28px) scale(1.06); filter: blur(12px);
  transition: opacity 0.45s var(--ease), transform 0.75s var(--ease), filter 0.55s var(--ease);
  pointer-events: none;
}
.pane.is-past { transform: translateY(-24px) scale(0.88); }
.pane.is-on { opacity: 1; transform: none; filter: none; transition-delay: 0.1s; }

.pane-title { font-size: 13px; color: var(--faint); }
.pane-foot { margin-top: auto; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); }
.pane-foot i { color: var(--blue); }

/* 0. trail */
.trail { display: grid; gap: 4px; }
.trail-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 10px; border-radius: var(--r-in);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), background 0.6s var(--ease);
}
.trail-row > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--tint); color: var(--ink); font-size: 15px; }
.trail-row div { display: grid; line-height: 1.35; min-width: 0; }
.trail-row b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.trail-row span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trail-row time { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.trail-row.on { opacity: 1; transform: none; }
.trail-row.is-new { display: none; }
.trail-row.is-new.show { display: grid; }
.trail-row.is-new.on { background: var(--blue-soft); }
.trail-row.is-new.on > i { background: var(--blue); color: var(--ink); }
.trail-row.is-new.on time { color: var(--blue); }

/* 1. themes */
.themes { display: grid; gap: 14px; margin-top: 4px; }
.themes li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 28px; align-items: center; gap: 14px; font-size: 14px; }
.themes .bar, .segue .bar { height: 8px; border-radius: 999px; background: var(--blue); width: 0; transition: width 0.9s var(--ease); justify-self: start; }
.themes .bar { background: var(--sun); }
.themes li:not(:first-child) .bar { background: #ffe68a; }
.themes.on .bar, .segues.on .bar { width: var(--w); }
.themes b { font-family: var(--mono); font-weight: 500; font-size: 13px; text-align: right; }
.insight {
  margin-top: auto; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-in); background: var(--tint);
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.insight.on { opacity: 1; transform: none; }
.insight i { color: var(--blue); font-size: 20px; flex: none; margin-top: 1px; }
.insight p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.insight b { color: var(--ink); font-weight: 600; }

.tone { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); opacity: 0; transition: opacity 0.5s var(--ease) 0.5s; }
.themes.on + .tone { opacity: 1; }
.tone li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; font-size: 14px; }
.tone span { color: var(--faint); }
.tone b { font-weight: 500; }
@media (max-width: 900px) { .tone { display: none; } }

/* 2. engage */
.post { border: 1px solid var(--line); border-radius: var(--r-in); padding: 14px 16px; display: grid; gap: 10px; }
.post-head { display: flex; align-items: center; gap: 10px; }
.post-head div { display: grid; line-height: 1.25; }
.post-head b { font-size: 13.5px; font-weight: 600; }
.post-head span { font-size: 12px; color: var(--faint); }
.post > p { font-size: 14.5px; line-height: 1.5; }
.post-stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--faint); }
.post-stats span { display: inline-flex; align-items: center; gap: 5px; }
.post-stats .ph-heart { color: #c9cfcb; transition: color 0.3s var(--ease); }
.post-stats b { font-weight: 500; font-variant-numeric: tabular-nums; }
.pane.liked .post-stats .ph-heart { color: var(--blue); }

.draft { border-radius: var(--r-in); background: var(--tint); padding: 14px 16px; display: grid; gap: 8px; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.draft-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); }
.draft-label i { color: var(--coral-ink); }
.draft-text { font-size: 14px; line-height: 1.5; min-height: 42px; }
.caret { display: inline-block; width: 1.5px; height: 1.05em; background: var(--accent, var(--blue)); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.draft-actions { display: flex; align-items: center; gap: 12px; }
.approve {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-2); color: var(--ink); font-size: 13px; font-weight: 500;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease);
}
.approve.ready { background: var(--coral-ink); border-color: var(--coral-ink); color: #fff; }
.approve.press { transform: scale(0.95); }
.draft-note { font-size: 12px; color: var(--faint); }

.thread { display: grid; gap: 8px; }
.bubble { padding: 10px 14px; border-radius: var(--r-in); display: grid; gap: 2px; max-width: 92%; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.45s var(--ease); display: none; }
.bubble b { font-size: 12px; font-weight: 600; }
.bubble p { font-size: 13.5px; line-height: 1.45; }
.bubble.mine { background: var(--coral-soft); }
.bubble.theirs { background: var(--tint); margin-left: 8%; }
.bubble.show { display: grid; }
.bubble.on { opacity: 1; transform: none; }
.draft.gone { display: none; }

/* 3. segues */
.segues { display: grid; gap: 10px; }
.segue {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 10px; align-items: center;
  padding: 12px 14px; border-radius: var(--r-in); border: 1px solid var(--line);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.segue.on { opacity: 1; transform: none; }
.segue-from { font-size: 13px; color: var(--muted); }
.segue-to { font-size: 13.5px; font-weight: 500; }
.segue > .ph { color: var(--faint); }
.segue .bar { grid-column: 1 / -1; height: 4px; margin-top: 6px; background: #a8ebcd; }
.segue .best {
  position: absolute; top: -10px; right: 12px;
  height: 22px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center;
  background: var(--blue); color: var(--ink); font-size: 11.5px; font-weight: 500;
  opacity: 0; transform: scale(0.9); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.segue.best-on { border-color: var(--blue); background: #f3fbf7; }
.segue.best-on .bar { background: var(--blue); }
.segue.best-on .best { opacity: 1; transform: none; }

/* 4. approach */
.channels { display: grid; gap: 8px; }
.channel {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--r-in); border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), opacity 0.4s var(--ease);
}
.channel > .ph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--tint); font-size: 17px; }
.channel div { display: grid; line-height: 1.3; }
.channel b { font-size: 13.5px; font-weight: 600; }
.channel span { font-size: 12.5px; color: var(--muted); }
.channel .tick { color: var(--blue); font-size: 20px; opacity: 0; transition: opacity 0.3s var(--ease); }
.pane.chosen .channel.pick { border-color: var(--blue); background: #f3fbf7; }
.pane.chosen .channel.pick .tick { opacity: 1; }
.pane.chosen .channel:not(.pick) { opacity: 0.5; }

.week-label { font-size: 12.5px; color: var(--faint); margin-bottom: 8px; }
.week-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.week-grid span { font-size: 11.5px; color: var(--faint); text-align: center; font-family: var(--mono); }
.week-grid i {
  height: 18px; border-radius: 6px; background: var(--blue);
  opacity: 0.06; transition: opacity 0.6s var(--ease);
}
.week-grid.on i { opacity: calc(var(--a) * 0.85 + 0.06); }
.week-grid.on i.slot { opacity: 1; box-shadow: 0 0 0 3px var(--blue-soft); animation: slot 1.8s var(--ease) infinite; }
@keyframes slot { 50% { box-shadow: 0 0 0 6px rgba(61, 220, 151, 0.12); } }

.opener { border-radius: var(--r-in); background: var(--tint); padding: 12px 14px; font-size: 13.5px; line-height: 1.5; min-height: 64px; }

@media (max-width: 900px) {
  .follow-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: center; }
  .follow-pin { justify-content: flex-start; gap: 10px; padding-top: 10px; }
  .follow .section-head h2 { font-size: 21px; }
  .follow .section-head .lede { display: none; }
  .stage-wrap { order: -1; }
  .stage { height: min(440px, 52svh); padding: 16px; gap: 12px; }
  .stage-wrap::before { transform: translateY(9px) scale(0.96); }
  .stage-wrap::after { transform: translateY(17px) scale(0.92); }
  .who { padding-bottom: 12px; }
  .beats-col { height: calc(100svh - var(--nav-h) - min(440px, 52svh) - 96px); grid-template-columns: minmax(0, 1fr); }
  .beat-dots { display: none; }
  .beats { -webkit-mask-image: none; mask-image: none; }
  .beat { top: 12px; translate: none; }
  .beat[data-pos="-1"], .beat[data-pos="1"] { opacity: 0; }
  .beat[data-pos="-1"] { transform: translateY(-60px) scale(0.9); }
  .beat[data-pos="1"] { transform: translateY(60px) scale(0.9); }
  .beat h3 { font-size: 23px; }
  .beat p { font-size: 15px; }
  .themes li { grid-template-columns: 120px minmax(0, 1fr) 22px; gap: 10px; font-size: 13px; }
  .trail-row:nth-child(n+5) { display: none; }
  .post > p { font-size: 13.5px; }
}
@media (max-width: 420px) {
  .who-tag { display: none; }
}

/* ============================================================ features bento

   E E S
   A Q S
   R R R   */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Two rows, so the five cells and their heading sit on about one screen. */
  grid-template-areas: "ev ev sg" "mp sq rp";
  gap: 14px;
}
.cell {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
  overflow: hidden;
}
.cell-evidence { grid-area: ev; }
.cell-signals { grid-area: sg; }
.cell-map { grid-area: mp; }
.cell-seq { grid-area: sq; }
.cell-replies { grid-area: rp; }

.viz { position: relative; min-height: 196px; padding: 16px 20px; display: grid; place-items: center; }
.cell-text { padding: 16px 22px 20px; display: grid; gap: 6px; align-content: start; }
.cell-text h3 { font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.cell-text p { font-size: 14.5px; color: var(--muted); line-height: 1.45; max-width: 38rem; }

/* evidence: a soft blue field behind the page */
.viz-evidence { background: linear-gradient(160deg, #e8f8f0 0%, #f4faf7 70%); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.page { background: var(--card); border-radius: var(--r-in); box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; width: 100%; }
.page-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.page-bar i { width: 7px; height: 7px; border-radius: 999px; background: var(--line-2); }
.page-bar span { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.page-body { padding: 14px 16px 16px; display: grid; gap: 9px; }
.sk { display: block; height: 7px; border-radius: 999px; background: var(--tint); width: var(--w); }
.proof, .claim { font-size: 13.5px; line-height: 1.45; }
.proof mark {
  background-image: linear-gradient(#ffe68a, #ffe68a);
  background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0;
  transition: background-size 1.1s var(--ease);
  border-radius: 3px; padding: 1px 2px;
}
.viz-evidence.s1 .proof mark { background-size: 100% 100%; }
.claim s { text-decoration-color: transparent; text-decoration-thickness: 1.5px; color: var(--ink); transition: text-decoration-color 0.4s var(--ease), color 0.5s var(--ease); }
.viz-evidence.s3 .claim s { text-decoration-color: var(--muted); color: var(--faint); }
.checks { display: grid; gap: 10px; width: 100%; }
.check {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: var(--r-in); background: var(--card); box-shadow: var(--shadow);
  opacity: 0; transform: translateX(-10px); transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
}
.check i { font-size: 20px; }
.check div { display: grid; line-height: 1.35; }
.check b { font-size: 13.5px; font-weight: 600; }
.check span { font-size: 12.5px; color: var(--muted); }
.check-keep i { color: var(--blue); }
.check-drop i { color: var(--faint); }
.viz-evidence.s2 .check-keep, .viz-evidence.s4 .check-drop { opacity: 1; transform: none; }

/* signals: a tall feed moving through a fit gate */
.viz-signals { background: linear-gradient(180deg, var(--sun-soft), #fffbe8); padding: 0; overflow: hidden; }
.feed {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.feed-track { display: grid; gap: 8px; padding: 0 18px 8px; animation: feed 22s linear infinite; animation-play-state: paused; }
.viz-signals.is-live .feed-track { animation-play-state: running; }
@keyframes feed { to { transform: translateY(-100%); } }
.feed-track li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 11px 13px; border-radius: var(--r-in); background: rgba(255, 255, 255, 0.55);
  font-size: 13px; color: var(--faint);
}
.feed-track li i { font-size: 16px; }
.feed-track li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-track li b { font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.feed-track li.fit { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 26, 24, 0.05); }
.feed-track li.fit i, .feed-track li.fit b { color: var(--sun-ink); }
.feed-track:first-child { padding-top: 8px; }

/* account map */
.viz-map { background: radial-gradient(circle at 50% 50%, #e8f8f0 0%, var(--card) 70%); }
.map { width: 100%; max-width: 340px; overflow: visible; }
.map .links line { stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 0.8s var(--ease), stroke 0.5s var(--ease); }
.map .core { fill: var(--ink); }
.map .core-t { fill: #fff; font-size: 9px; font-weight: 600; text-anchor: middle; font-family: var(--sans); }
.map .node circle { fill: var(--card); stroke: var(--line-2); stroke-width: 1.5; transition: fill 0.4s var(--ease), stroke 0.4s var(--ease); }
.map .node text { font-size: 11px; fill: var(--muted); text-anchor: middle; font-family: var(--sans); opacity: 0; transition: opacity 0.4s var(--ease); }
.map .node.on circle { stroke: var(--ink); }
.map .node.on text { opacity: 1; }
.map .links line.on { stroke-dashoffset: 0; }
.map .start.lit circle:first-child { fill: var(--blue); stroke: var(--blue); }
.map .start.lit text { fill: var(--blue); font-weight: 600; }
.map .links line.lit { stroke: var(--blue); }
.map .halo { fill: none !important; stroke: var(--blue) !important; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map .start.lit .halo { animation: halo 1.8s var(--ease) infinite; }
@keyframes halo { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }

/* sequence */
.viz-seq { background: linear-gradient(170deg, var(--blue-soft), var(--card) 85%); align-content: center; gap: 18px; }
.seq { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
.seq::before { content: ""; position: absolute; left: 10%; right: 10%; top: 7px; height: 2px; background: #c9c4ff; }
.seq::after {
  content: ""; position: absolute; left: 10%; top: 7px; height: 2px; background: var(--mint);
  width: calc(80% * var(--p, 0)); transition: width 0.7s var(--ease);
}
.seq li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 5px; text-align: center; }
.seq li i { width: 16px; height: 16px; border-radius: 999px; background: var(--card); border: 2px solid var(--line-2); transition: background 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease); }
.seq li span { font-size: 12.5px; font-weight: 500; transition: color 0.3s var(--ease), opacity 0.3s; }
.seq li em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.seq li.done i { background: var(--mint); border-color: var(--mint); }
.seq li.off { opacity: 0.35; }
.seq li.off span { text-decoration: line-through; }
.seq-reply, .seq-stop { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.45s var(--ease); }
.seq-reply { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--r-in); background: var(--card); box-shadow: var(--shadow); width: 100%; }
.seq-reply i { color: var(--mint); font-size: 20px; }
.seq-reply p { font-size: 13.5px; }
.seq-stop { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); justify-self: start; }
.viz-seq.replied .seq-reply, .viz-seq.stopped .seq-stop { opacity: 1; transform: none; }

/* replies */
.viz-replies { background: linear-gradient(200deg, var(--sun-soft) 0%, #fffbe8 80%); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 12px; align-items: center; padding-block: 14px; }
.incoming { display: grid; gap: 10px; width: 100%; }
.incoming-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); }
.incoming-msg {
  background: var(--card); border-radius: var(--r-in); box-shadow: var(--shadow); padding: 11px 13px; min-height: 64px;
  font-size: 13px; line-height: 1.4; display: flex; align-items: center;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.incoming-msg.out { opacity: 0; transform: translateX(28px) scale(0.96); }
.incoming-msg.pre { opacity: 0; transform: translateY(-14px); transition: none; }
.lanes { display: grid; gap: 5px; width: 100%; }
.lanes li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px;
  padding: 4px 11px; border-radius: 10px; background: rgba(255, 255, 255, 0.6);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.lanes b { font-size: 13px; font-weight: 500; }
.lanes .n { grid-row: span 2; align-self: center; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.lanes em { font-style: normal; font-size: 11.5px; color: var(--faint); height: 0; opacity: 0; overflow: hidden; transition: opacity 0.3s var(--ease); }
.lanes li.hit { background: var(--card); box-shadow: 0 0 0 1.5px var(--coral); transform: translateX(-4px); }
.lanes li.hit em { height: auto; opacity: 1; color: var(--coral-ink); }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ev ev" "mp sq" "sg sg" "rp rp"; }
  .viz-signals { min-height: 300px; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ev" "sg" "mp" "sq" "rp"; }
  .viz-evidence, .viz-replies { grid-template-columns: minmax(0, 1fr); }
  .viz { padding: 18px; }
  .cell-text { padding: 18px 20px 20px; }
  .seq li span { font-size: 11px; }
}

/* ============================================================ how it works

   Four cards in a row, built like the feature cells: a tinted scene on top, the words under it.
   A numbered marker sits on the seam between the two, and a short arrow in the gap carries the
   eye to the next card. Everything is readable as it stands; with scripts on, each card's scene
   comes on in turn the first time the row is seen. */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
/* Each card takes its two rows from the row of cards, so every scene is the same height and the
   numbers and headings line up across the row. */
.step {
  position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
}
.step-viz {
  position: relative; display: grid; align-content: center; gap: 10px;
  min-height: 210px; padding: 20px 20px 28px;
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}
.step-site .step-viz { background: linear-gradient(165deg, #e8f8f0 0%, #f4faf7 80%); }
.step-find .step-viz { background: linear-gradient(180deg, var(--sun-soft), #fffbe8); }
.step-person .step-viz { background: linear-gradient(170deg, var(--mint-soft), #f6f5ff 85%); }
.step-write .step-viz { background: linear-gradient(190deg, var(--coral-soft), #fff5fa 85%); }

.step-text { position: relative; padding: 28px 22px 22px; display: grid; gap: 7px; align-content: start; }
.step-n {
  position: absolute; top: -17px; left: 20px;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px;
  background: var(--ink); color: #fff; font-family: var(--mono); font-size: 13px;
  box-shadow: 0 0 0 4px var(--card);
}
.step-text h3 { font-size: clamp(18px, 1.55vw, 21px); letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.step-text p { font-size: 15px; color: var(--muted); line-height: 1.5; }

/* The arrow in the gap, pointing at the next card. */
.step:not(:last-child) .step-viz::after {
  content: ""; position: absolute; z-index: 2; top: 50%; right: -22px;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151a18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M13 7l5 5-5 5'/%3E%3C/svg%3E") center / 14px no-repeat;
  border: 1px solid var(--line-2);
  translate: 0 -50%;
}

/* 1. the website, and what is read from it */
.mini-site {
  display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  font-size: 15px;
}
.mini-site i { font-size: 18px; color: var(--blue-deep); }
.mini-site span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-read { display: grid; gap: 7px; padding: 6px 4px 0 16px; }
.mini-read li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mini-read i { font-size: 17px; color: var(--blue); }

/* 2. companies, each with its sign */
.mini-rows { display: grid; gap: 8px; }
.mini-rows li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px;
  padding: 10px 13px; border-radius: var(--r-in); background: var(--card); box-shadow: 0 1px 2px rgba(21, 26, 24, 0.05);
}
.mini-rows div { display: grid; line-height: 1.3; }
.mini-rows b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; }
.mini-rows span { font-size: 12.5px; color: var(--muted); }
.mini-rows em { justify-self: start; font-style: normal; font-size: 11px; font-weight: 500; color: var(--sun-ink); background: var(--sun-soft); padding: 2px 8px; border-radius: 999px; }

/* 3. the person, and how to reach them */
.mini-person { display: grid; gap: 12px; padding: 15px; border-radius: var(--r-in); background: var(--card); box-shadow: var(--shadow); }
.mini-who { display: flex; align-items: center; gap: 10px; }
.mini-who div { display: grid; line-height: 1.3; min-width: 0; }
.mini-who b { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.mini-who span { font-size: 12.5px; color: var(--muted); }
.mini-person ul { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); }
.mini-person li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.mini-person li i { font-size: 16px; color: var(--mint); }
.mini-person li em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--mint-ink); background: var(--mint-soft); padding: 2px 8px; border-radius: 999px; }

/* 4. the message, waiting to be sent */
.mini-msg { display: grid; gap: 9px; padding: 15px; border-radius: var(--r-in); background: var(--card); box-shadow: var(--shadow); }
.mini-msg-to { font-size: 12px; color: var(--faint); }
.mini-msg-body { font-size: 13.5px; line-height: 1.5; }
.mini-msg-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.mini-msg-foot span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 13px; border-radius: 999px; background: var(--coral-ink); color: #fff; font-size: 12.5px; font-weight: 500; }
.mini-msg-foot em { font-style: normal; font-size: 12px; color: var(--faint); }

/* Coming on in turn, once. Without scripts nothing here is ever hidden. */
.js .steps .step-viz > * { transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.js .steps:not(.is-on) .step-viz > * { opacity: 0; transform: translateY(10px); }
.js .steps .step-n { transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.js .steps:not(.is-on) .step-n { background: var(--tint); color: var(--faint); }
.steps .step:nth-child(2) .step-viz > *, .steps .step:nth-child(2) .step-n { transition-delay: 0.3s; }
.steps .step:nth-child(3) .step-viz > *, .steps .step:nth-child(3) .step-n { transition-delay: 0.6s; }
.steps .step:nth-child(4) .step-viz > *, .steps .step:nth-child(4) .step-n { transition-delay: 0.9s; }

@media (max-width: 1060px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(n+3) { margin-top: 16px; }
  .step:nth-child(2) .step-viz::after { display: none; }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-inline: auto; }
  .step:nth-child(n+2) { margin-top: 30px; }
  .step-viz { min-height: 0; padding-top: 26px; }
  /* Stacked, the arrow moves to the gap under each card and points down. */
  .step:not(:last-child) .step-viz::after, .step:nth-child(2) .step-viz::after { display: none; }
  .step:not(:last-child)::after {
    content: ""; position: absolute; z-index: 2; left: 50%; bottom: -29px; width: 26px; height: 26px; border-radius: 999px;
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151a18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12M7 13l5 5 5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
    border: 1px solid var(--line-2); translate: -50% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .steps .step-viz > *, .js .steps .step-n { transition: none; }
}

/* ============================================================ limits */

.band { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.limits-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.limits-copy h2 { font-size: clamp(28px, 3.5vw, 46px); }
.limits-copy .lede { margin-top: 16px; max-width: 30rem; }
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.cap .n { font-family: var(--mono); font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.cap .n em { font-style: normal; font-size: 0.38em; color: var(--faint); margin-left: 4px; }
.cap span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }


.day { border-radius: var(--r); background: var(--tint); padding: 28px; display: grid; gap: 14px; }
.day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.day-head > b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.day-count { font-family: var(--mono); font-size: 13px; color: var(--faint); }
.day-count b { font-size: 22px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.day.full .day-count b { color: var(--blue); }
.day-bar { position: relative; height: 96px; border-radius: var(--r-in); background: var(--card); overflow: hidden; }
.day-bar .hours { position: absolute; top: 0; bottom: 0; left: 37.5%; width: 37.5%; background: var(--blue-soft); }
.ticks { position: absolute; inset: 0; }
.ticks i {
  position: absolute; bottom: 14px; width: 3px; border-radius: 999px; background: var(--blue);
  height: 0; transition: height 0.5s var(--ease);
}
.ticks i.on { height: var(--h); }
.day-axis { position: relative; height: 14px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.day-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.day-axis span:nth-child(1) { left: 0; transform: none; }
.day-axis span:nth-child(2) { left: 37.5%; }
.day-axis span:nth-child(3) { left: 75%; }
.day-axis span:nth-child(4) { right: 0; transform: none; }
.day-note { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); }
.day-note i { color: var(--blue); font-size: 16px; }

@media (max-width: 860px) { .limits-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ questions */

.faq-shell { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq h2 { font-size: clamp(28px, 3.5vw, 46px); position: sticky; top: calc(var(--nav-h) + 40px); }
.qs { display: grid; }
.qs details { border-bottom: 1px solid var(--line); }
.qs details:first-child { border-top: 1px solid var(--line); }
.qs summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; letter-spacing: -0.02em;
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary i { flex: none; font-size: 18px; color: var(--faint); transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.qs details[open] summary i { transform: rotate(45deg); color: var(--coral); }
.qs details p { padding: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 40rem; }
.qs details[open] p { animation: open 0.4s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 860px) { .faq-shell { grid-template-columns: minmax(0, 1fr); } .faq h2 { position: static; } }

/* ============================================================ close + footer */

.close { text-align: center; padding-block: clamp(80px, 11vw, 150px); overflow: hidden; border-top: 1px solid var(--line); }
.close .shell { position: relative; z-index: 1; }
.close h2 { font-size: clamp(32px, 5vw, 68px); margin-bottom: 18px; letter-spacing: -0.04em; }
.close .lede { margin-inline: auto; max-width: 34rem; text-wrap: balance; }
.close-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* A faint echo of the hero dial behind the last call to action, still turning. */
.close-scope { position: absolute; left: 50%; top: 50%; width: min(900px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.close-scope i { position: absolute; border-radius: 999px; border: 1px solid var(--line); }
.close-scope i:nth-child(1) { inset: 0; }
.close-scope i:nth-child(2) { inset: 18%; }
.close-scope i:nth-child(3) { inset: 36%; }
.close-beam {
  position: absolute; inset: 0; border-radius: 999px;
  background: conic-gradient(from 0deg, rgba(61, 220, 151, 0) 0deg, rgba(61, 220, 151, 0.07) 44deg, rgba(61, 220, 151, 0) 46deg);
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.foot { border-top: 1px solid var(--line); padding-block: 34px; }
.foot .shell { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot .brand { margin-right: 0; }
.foot p { font-size: 12.5px; color: var(--faint); }
.foot .spacer { flex: 1; }
.foot-links { display: flex; gap: 20px; }
.foot-links a { font-size: 13px; color: var(--muted); }
.foot-links a:hover { color: var(--ink); }

/* ============================================================ splashes

   Soft pools of the signal colours behind the big moments. Radial gradients, no blur filter, and
   only transform animates, so they cost nothing to scroll past. */

.splash {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  animation: drift 24s var(--ease) infinite alternate; will-change: transform;
}
.splash-a { width: 48vw; height: 48vw; left: -14vw; top: 6vh; background: radial-gradient(closest-side, rgba(61, 220, 151, 0.16), rgba(61, 220, 151, 0)); }
.splash-b { width: 42vw; height: 42vw; right: -12vw; top: 20vh; background: radial-gradient(closest-side, rgba(255, 111, 177, 0.14), rgba(255, 111, 177, 0)); animation-duration: 28s; animation-delay: -7s; }
.splash-c { width: 38vw; height: 38vw; left: 30vw; bottom: -16vh; background: radial-gradient(closest-side, rgba(255, 212, 59, 0.16), rgba(255, 212, 59, 0)); animation-duration: 32s; animation-delay: -13s; }
.splash-d { width: 54vw; height: 54vw; right: -18vw; top: 4%; background: radial-gradient(closest-side, rgba(91, 77, 255, 0.1), rgba(91, 77, 255, 0)); }
.splash-e { width: 54vw; height: 54vw; left: -20vw; top: 18%; background: radial-gradient(closest-side, rgba(255, 111, 177, 0.08), rgba(255, 111, 177, 0)); animation-delay: -9s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vw, -3vh, 0) scale(1.12); } }
.follow .shell, .features-section .shell { position: relative; z-index: 1; }
/* clip, not hidden: hidden would make these scroll containers and break the sticky stage. */
.follow, .features-section { overflow-x: clip; }
.features-section { padding-block: clamp(36px, 3.4vw, 46px); }
.features-section .section-head { margin-bottom: clamp(20px, 2vw, 26px); }

/* ============================================================ 3D on, 3D off

   Nothing 3D shows until the module has confirmed WebGL (.three-on). A scene that fails to build
   marks its host .flat and that one host goes back to the HTML version. */

.three-on .field { display: block; }
.three-on #radar { visibility: hidden; }

.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.map-labels { position: absolute; inset: 0; display: none; pointer-events: none; }
.three-on .cell-map:not(.flat) .map-canvas,
.three-on .cell-map:not(.flat) .map-labels { display: block; }
.three-on .cell-map:not(.flat) .map { visibility: hidden; }

.close-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: none; }
.three-on .close:not(.flat) .close-field { display: block; }
.three-on .close:not(.flat) .close-scope { display: none; }

/* ============================================================ buying group

   Same light surface as the other cells: ink structure, one blue for where to start, and labels
   as white chips like the rest of the page. */

.three-on .cell-map:not(.flat) .viz-map { background: radial-gradient(circle at 50% 48%, #ecf9f3 0%, #f7fbf9 55%, var(--card) 80%); }
.map-labels span {
  position: absolute; left: 0; top: 0; translate: -50% -38px; opacity: 0;
  white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--ink);
  padding: 4px 10px; border-radius: 999px; background: var(--card);
  box-shadow: 0 1px 2px rgba(21, 26, 24, 0.08), 0 6px 16px -8px rgba(21, 26, 24, 0.25);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.map-labels span.lit { background: var(--blue); color: var(--ink); }
.map-labels span.core { translate: -50% -50%; opacity: 1; background: none; box-shadow: none; padding: 0; font-size: 10.5px; font-weight: 600; color: #fff; }

/* ============================================================ follow: beat 1, what they are working on */

.working {
  margin-top: auto; display: grid; gap: 5px;
  padding: 16px 18px; border-radius: var(--r-in); background: var(--sun-soft);
  opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.55s var(--ease);
}
.working.on { opacity: 1; transform: none; }
.working-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--sun-ink); }
.working-text { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.working-src { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); }

/* ============================================================ follow: beat 3, the segue in plain words */

.bridge { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.bridge-side {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-in); background: var(--sun-soft);
  opacity: 0; transform: translateX(-14px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.bridge-side.you { background: var(--blue-soft); transform: translateX(14px); }
.bridge-side span { font-size: 11.5px; color: var(--muted); }
.bridge-side b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.bridge-side em { font-style: normal; font-size: 11.5px; color: var(--faint); }
.bridge-link { font-size: 22px; color: var(--mint); opacity: 0; transform: scale(0.4) rotate(-45deg); transition: opacity 0.4s var(--ease) 0.35s, transform 0.5s var(--ease) 0.35s; }
.pane.bridged .bridge-side, .pane.bridged .bridge-link { opacity: 1; transform: none; }

.compose { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--card); }
.compose-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); }
.compose-label i { color: var(--mint-ink); }
.compose-text { font-size: 14px; line-height: 1.55; }
.compose-text.slop { color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease); }
.pane.slop-on .compose-text.slop { max-height: 90px; opacity: 1; }
.pane.swapped .compose-text.slop { max-height: 0; opacity: 0; }
.compose-text.slop s { text-decoration: none; border-radius: 4px; padding: 0 2px; transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.pane.struck .compose-text.slop s { text-decoration: line-through 2px var(--coral); background: var(--coral-soft); color: var(--coral-ink); }
.compose-text.plain { display: none; }
.pane.swapped .compose-text.plain { display: block; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flags span {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--mint-soft); color: var(--mint-ink); font-size: 12px; font-weight: 500;
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--ease), transform 0.4s var(--ease);
}
.pane.flagged .flags span { opacity: 1; transform: none; }
.pane.flagged .flags span:nth-child(2) { transition-delay: 0.12s; }
.pane.flagged .flags span:nth-child(3) { transition-delay: 0.24s; }

/* ============================================================ follow: beat 4, send when they are around */

.heat { position: relative; height: 204px; border-radius: var(--r-in); background: linear-gradient(180deg, #f4f7f5, var(--card)); overflow: hidden; }
.heat .week-grid { padding: 16px 14px; }
.heat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.heat-labels { position: absolute; inset: 0; display: none; pointer-events: none; }
.three-on .heat:not(.flat) .heat-canvas, .three-on .heat:not(.flat) .heat-labels { display: block; }
.three-on .heat:not(.flat) .week-grid { display: none; }
.heat-labels span { position: absolute; left: 0; top: 0; translate: -100% -50%; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.heat-peak {
  position: absolute; left: 0; top: 0; translate: -50% -100%;
  font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: var(--coral-ink); color: #fff;
  opacity: 0; transition: opacity 0.3s var(--ease), background 0.3s var(--ease);
}
.heat-peak.on { opacity: 1; }
.heat-peak.done { background: var(--mint-ink); }
.pane.s-heat .week-grid i { opacity: calc(var(--a) * 0.85 + 0.06); }
.heat-note { font-size: 12px; color: var(--faint); }

.sends { display: grid; gap: 8px; }
.send {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: var(--r-in); border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), opacity 0.4s var(--ease);
}
.send > .ph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--tint); font-size: 17px; }
.send div { display: grid; line-height: 1.3; min-width: 0; }
.send b { font-size: 13.5px; font-weight: 600; }
.send span { font-size: 12.5px; color: var(--muted); }
.send .state { font-style: normal; font-size: 12px; font-weight: 500; color: var(--faint); white-space: nowrap; }
.pane.s-queued .send-dm { border-color: var(--coral); }
.pane.s-queued .send-dm .state { color: var(--coral-ink); }
.pane.s-sent .send-dm .state { color: var(--blue-deep); }
.pane.s-replied .send-dm { border-color: var(--mint); background: #f1f0ff; }
.pane.s-replied .send-dm .state { color: var(--mint-ink); }
.pane.s-replied .send-mail { opacity: 0.55; }

@media (max-width: 900px) {
  .heat { height: 146px; }
  .heat-note, .bridge-side em { display: none; }
  .working-text { font-size: 16px; }
}
@media (max-width: 480px) {
  .send { grid-template-columns: 34px minmax(0, 1fr); row-gap: 2px; }
  .send .state { grid-column: 2; }
  .send span { display: none; }
  .bridge { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bridge-link { display: none; }
  .flags span:nth-child(3) { display: none; }
}

/* ============================================================ free tier band */

.free { background: linear-gradient(125deg, var(--blue-soft) 0%, var(--sun-soft) 55%, var(--bg) 100%); border-top: 1px solid var(--line); overflow: hidden; }
.free-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.free h2 { font-size: clamp(28px, 3.5vw, 46px); }
.coral { color: var(--coral-ink); }
.free .lede { margin: 16px 0 30px; max-width: 30rem; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #26302c; }
.free-pair { position: relative; height: 300px; }
.pair-card {
  position: absolute; display: flex; align-items: center; gap: 12px;
  width: min(330px, 92%); padding: 14px 16px; border-radius: var(--r);
  background: var(--card); box-shadow: 0 1px 2px rgba(120, 30, 70, 0.05), 0 22px 44px -24px rgba(120, 30, 70, 0.3);
  animation: float 7s ease-in-out infinite alternate;
}
.pair-card div { display: grid; line-height: 1.3; }
.pair-card b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.pair-card span { font-size: 13px; color: var(--muted); }
.pair-card > .ph-fill { margin-left: auto; font-size: 20px; color: var(--coral); }
.pc-a { top: 6%; left: 2%; }
.pc-b { top: 38%; right: 0; animation-delay: -2.5s; }
.pc-b .mono-avatar { background: linear-gradient(145deg, #ffe0ee, #ffc2dd); color: #b0236b; }
.pc-c { bottom: 2%; left: 12%; background: rgba(255, 255, 255, 0.5); box-shadow: none; border: 1.5px dashed #f5b3d0; animation-delay: -4.5s; }
.pc-c .mono-avatar { background: var(--card); color: var(--coral-ink); font-size: 18px; }
@keyframes float { to { transform: translateY(-12px); } }
@media (max-width: 860px) {
  .free-grid { grid-template-columns: minmax(0, 1fr); }
  .free-pair { height: 250px; }
}

/* ============================================================ pricing page

   A plain heading and three cards. Each card says the same six things in the same order, so the
   plans can be compared by reading across. */

.price-top { text-align: center; padding: calc(var(--nav-h) + clamp(36px, 5vw, 64px)) 0 0; }
.price-top h1 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.04em; }
.price-top .lede { margin-top: 12px; }

.plans-section { padding-top: clamp(28px, 3.4vw, 44px); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan {
  --pc: var(--blue); --pc-ink: var(--blue-deep);
  position: relative; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  padding: 30px 28px 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
}
.plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pc); }
.plan-free { --pc: var(--coral); --pc-ink: var(--coral-ink); }
.plan-team { --pc: var(--mint); --pc-ink: var(--mint-ink); }
.plan-name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--pc-ink); }
.plan-price { display: flex; align-items: baseline; gap: 7px; min-height: 52px; }
.plan-price .amount { font-size: clamp(40px, 4vw, 52px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price .per { font-size: 15px; color: var(--muted); }
.plan-lead { font-size: 16px; color: var(--muted); line-height: 1.45; }
.plan-facts { margin: 6px 0 10px; display: grid; }
.plan-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.plan-facts dt { font-size: 15px; color: var(--muted); line-height: 1.35; }
.plan-facts dd { margin: 0; font-size: 15.5px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan .btn { margin-top: auto; width: 100%; }
.plans-note { margin-top: 22px; text-align: center; font-size: 15px; color: var(--muted); }

/* A two-way switch in one pill. The sign-in page uses it for "Sign in" and "Create account". */
.billing-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tint); }
.billing-toggle button {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.billing-toggle button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(21, 26, 24, 0.12); }
@media (max-width: 960px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; }
}

/* ============================================================ sign in / create account

   A form on the left and the home page's radar on the right, filling the page behind both. The
   card is the one raised surface, because it sits on top of a moving field. Form rule: label
   above, hint and error below, 12px corners like every inner row on the site. */

.auth {
  position: relative; overflow: clip;
  min-height: 100vh; min-height: 100dvh;
  display: grid; align-items: center;
  padding: calc(var(--nav-h) + 28px) 0 48px;
}
.auth [hidden] { display: none !important; }
.auth-field { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: none; }
.auth-tags { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
.three-on .auth:not(.flat) .auth-field, .three-on .auth:not(.flat) .auth-tags { display: block; }
.three-on .auth:not(.flat) .auth-scope .close-scope { display: none; }

.auth-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 432px) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 96px); align-items: center;
}

.auth-card {
  display: grid; gap: 22px; padding: 30px;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.auth-modes { display: grid; grid-template-columns: 1fr 1fr; }
.auth-modes button { justify-content: center; }
.auth-head h1 { font-size: clamp(27px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.auth-head p { margin-top: 10px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }

#auth-form { display: grid; gap: 16px; }
.f { display: grid; gap: 7px; }
.f label { font-size: 13.5px; font-weight: 500; }
.f-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.f-input { position: relative; }
.f input {
  width: 100%; height: 46px; padding: 0 14px;
  border-radius: var(--r-in); border: 1px solid var(--line-2); background: var(--card);
  font: inherit; font-size: 15.5px; color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.f-input input { padding-right: 46px; }
.f input:hover { border-color: #aab3ad; }
.f input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--blue-soft); }
.f input[aria-invalid="true"] { border-color: var(--bad); }
.f input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--bad-soft); }
.f-peek {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer;
}
.f-peek:hover { background: var(--tint); color: var(--ink); }
.f-hint { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); transition: color 0.25s var(--ease); }
.f-hint i { font-size: 15px; color: var(--line-2); transition: color 0.25s var(--ease); }
.f-hint.is-ok, .f-hint.is-ok i { color: var(--blue-deep); }
.f-err { font-size: 12.5px; color: var(--bad); }
.f-err:empty { display: none; }
.f-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--blue-deep); cursor: pointer;
}
.f-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.auth-note { padding: 12px 14px; border-radius: var(--r-in); font-size: 13.5px; line-height: 1.45; background: var(--sun-soft); color: var(--sun-ink); }
.auth-note.bad { background: var(--bad-soft); color: var(--bad); }
.auth-note.good { background: var(--blue-soft); color: var(--blue-deep); }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-submit i { font-size: 17px; transition: transform 0.25s var(--ease); }
.auth-submit:hover i { transform: translateX(3px); }
.auth-submit:disabled { cursor: progress; opacity: 0.75; }
.auth-back { justify-self: center; }

/* The dial is drawn on the page-wide canvas and centred on this box. */
.auth-scope { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; justify-self: center; pointer-events: none; }
.auth-scope .close-scope { width: 100%; }
.auth-state {
  position: absolute; left: 50%; top: calc(100% + 30px); translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 12.5px; color: var(--muted);
}
.auth-state i { width: 7px; height: 7px; border-radius: 999px; background: var(--blue); transition: background 0.3s var(--ease); }
.auth-state[data-tone="quiet"] i { background: var(--line-2); }
.auth-state[data-tone="ready"] i { background: var(--sun); }

.auth-slot {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  border-radius: 999px; background: var(--card);
  box-shadow: 0 1px 2px rgba(21, 26, 24, 0.08), 0 6px 16px -8px rgba(21, 26, 24, 0.25);
  font-size: 12.5px; white-space: nowrap;
  opacity: 0; transition: opacity 0.35s var(--ease); will-change: transform;
}
.auth-slot.is-on { opacity: 1; }
.auth-slot b { font-weight: 500; }
.auth-slot em { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--coral-ink); background: var(--coral-soft); }

@media (max-width: 900px) {
  .auth { align-items: start; padding-top: calc(var(--nav-h) + 8px); }
  .auth-grid { grid-template-columns: minmax(0, 1fr); gap: 58px; justify-items: center; }
  .auth-scope { order: -1; max-width: 250px; aspect-ratio: 5 / 4; }
  .auth-state { top: calc(100% + 22px); }
  .auth-card { width: 100%; max-width: 460px; padding: 24px 20px; }
  .auth-slot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .f input, .f-hint, .f-hint i, .auth-slot, .auth-submit i { transition: none; }
}

/* ============================================================ sections

   Plain scrolling. Each section is opaque and positioned, so the pinned hero and the splashes
   never show through the one after. */

main > section { position: relative; }
:where(main > section) { background-color: var(--bg); }

/* ============================================================ scene loop plumbing

   Between loops a scene fades its contents out, resets with transitions suspended, then fades
   back in. Only direct children fade, so a cell keeps its background while it restarts. */

.fading > * { opacity: 0 !important; transition: opacity 0.38s var(--ease) !important; }
.fading-in > * { transition: opacity 0.42s var(--ease) !important; }
.resetting, .resetting * { transition: none !important; }

/* ============================================================ scroll reveal

   Scoped to .js so the page is fully readable when the script is blocked, slow or broken. */

.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.65s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: 0.08s; }
.js [data-reveal][data-delay="2"] { transition-delay: 0.16s; }

/* ============================================================ reduced motion

   Every loop on the page stops and every scene shows its finished state. */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .act-line, .act-sub, .act-cta, .lock, .pane, .beat, .beat p, .beat-dots::after { transition: none; }
  .beat.is-on .w, .beat.is-on p, .who-step.flip { animation: none; }
  .btn:active { transform: none; }
  .btn, .nav { transition: none; }
  .feed-track, .close-beam, .caret, .map .halo, .week-grid i.slot, .splash, .pair-card { animation: none !important; }
}

/* ============================================================ the website box

   One field and one button in a single pill: the hero, the last section and the free look all
   ask for the same thing in the same shape. */

.site-form {
  display: flex; align-items: center; gap: 6px;
  width: min(100%, 470px); margin-inline: auto;
  padding: 6px 6px 6px 22px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 999px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.site-form:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--blue-soft), var(--shadow); }
.site-form input {
  flex: 1; min-width: 0; height: 46px; padding: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 17px; color: var(--ink);
}
.site-form input::placeholder { color: var(--faint); }
.site-form .btn { flex: none; height: 46px; padding: 0 24px; }
.site-note { margin-top: 14px; font-size: 13.5px; color: var(--faint); text-align: center; }
.site-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.site-note a:hover { color: var(--ink); }
.site-note.is-bad { color: var(--bad); }
.act-cta .site-form { margin: 0; }
.act-copy .site-note { position: relative; margin-top: 12px; }
@media (max-width: 480px) {
  .site-form { padding-left: 18px; }
  .site-form input { font-size: 16px; }
  .site-form .btn { padding: 0 18px; }
}

/* ============================================================ the free look (demo.html)

   Three states on one page: ask, work, found. The found state is the nearest the site comes to
   the app, so it is calmer than the rest: white cards on paper, one fact per row. */

.try-page { min-height: 100vh; display: flex; flex-direction: column; }
.try { flex: 1; padding-top: var(--nav-h); }
.try [hidden] { display: none !important; }
.try-narrow { max-width: 46rem; text-align: center; }

.try-ask, .try-work { position: relative; overflow: hidden; min-height: calc(100vh - var(--nav-h) - 110px); display: grid; align-items: center; padding-block: clamp(56px, 10vh, 120px); }
.try-ask h1, .try-work h1 { font-size: clamp(38px, 6.4vw, 80px); letter-spacing: -0.04em; line-height: 1.06; }
.try-work h1 { font-size: clamp(30px, 4.6vw, 54px); overflow-wrap: anywhere; }
.try-ask .lede { margin: 18px auto 30px; max-width: var(--measure); text-wrap: balance; }
.try-ask .shell, .try-work .shell { position: relative; z-index: 1; }

.try-steps { display: grid; gap: 4px; width: fit-content; max-width: 100%; margin: 34px auto 6px; text-align: left; }
.try-steps li { display: flex; align-items: center; gap: 13px; padding: 8px 0; font-size: 17px; color: var(--faint); transition: color 0.3s var(--ease); }
.try-dot { flex: none; width: 12px; height: 12px; border-radius: 999px; border: 1.5px solid var(--line-2); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
.try-steps li.is-done { color: var(--muted); }
.try-steps li.is-done .try-dot { background: var(--blue); border-color: var(--blue); }
.try-steps li.is-now { color: var(--ink); font-weight: 500; }
.try-steps li.is-now .try-dot { border-color: var(--mint); background: var(--mint); animation: try-pulse 1.4s var(--ease) infinite; }
@keyframes try-pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 77, 255, 0.4); } 100% { box-shadow: 0 0 0 12px rgba(91, 77, 255, 0); } }

.try-done { padding-block: clamp(44px, 7vw, 84px) clamp(64px, 9vw, 120px); }
.try-done .shell { max-width: 60rem; }
.try-head { text-align: center; margin-bottom: clamp(30px, 5vw, 52px); }
.try-head h1 { font-size: clamp(30px, 4.8vw, 58px); letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.try-head .lede { margin: 18px auto 0; max-width: 38rem; text-wrap: balance; }
.try-h2 { font-size: clamp(22px, 2.6vw, 30px); margin: clamp(38px, 5vw, 60px) 0 18px; }

.try-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 30px); }
.try-label { font-size: 13px; font-weight: 500; color: var(--faint); margin-bottom: 8px; }
.try-oneliner { font-size: clamp(19px, 2.2vw, 24px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.try-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.try-chips li { padding: 6px 13px; border-radius: 999px; background: var(--tint); font-size: 14px; }
.try-understood .try-label:not(:first-child) { margin-top: 24px; }
.try-buyers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.try-buyers li { display: grid; gap: 5px; align-content: start; padding: 15px 16px; border-radius: var(--r-in); background: var(--bg); border: 1px solid var(--line); }
.try-buyers b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; }
.try-buyers span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.try-buyers em { display: flex; gap: 7px; align-items: baseline; margin-top: 4px; font-style: normal; }
.try-buyers em i { color: var(--blue-deep); font-size: 15px; translate: 0 2px; flex: none; }
.try-buyers em span { color: var(--ink); font-size: 13.5px; }

.try-found { display: grid; gap: 14px; }
.found { display: grid; gap: 16px; }
.found-head { display: flex; align-items: flex-start; gap: 13px; }
.found-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--tint); font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.found-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.found-company { font-size: 19px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; overflow-wrap: anywhere; }
a.found-company:hover { text-decoration: underline; text-underline-offset: 3px; }
.found-name > span:last-child { font-size: 14px; color: var(--muted); }
.found-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tag { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: var(--tint); color: var(--muted); }
.tag-strong, .tag-good { background: var(--blue-soft); color: var(--blue-deep); }
.tag-where { background: var(--sun-soft); color: var(--sun-ink); }
.found-why { font-size: 16px; line-height: 1.5; }
.found-proof { display: grid; gap: 9px; padding: 14px 16px; border-radius: var(--r-in); background: var(--bg); border: 1px solid var(--line); }
.found-quote { font-size: 14.5px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.found-source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13.5px; }
.found-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
a.found-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.found-checked { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-deep); }
.found-checked i { font-size: 16px; }
.found-unchecked { color: var(--faint); }
.found-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px 28px; margin: 0; }
.found-next dt { font-size: 13px; color: var(--faint); margin-bottom: 3px; }
.found-next dd { margin: 0; font-size: 15px; line-height: 1.45; }

.try-message { display: grid; gap: 10px; }
.msg-to { font-size: 14.5px; color: var(--muted); }
.msg-to b { color: var(--ink); font-weight: 600; }
.msg-subject { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; padding-top: 12px; border-top: 1px solid var(--line); }
.msg-body { font-size: 16px; line-height: 1.6; white-space: pre-wrap; }
.msg-note { font-size: 13.5px; color: var(--faint); padding-top: 12px; border-top: 1px solid var(--line); }

.try-join { margin-top: clamp(40px, 6vw, 72px); padding: clamp(28px, 5vw, 52px); border-radius: var(--r); background: var(--night); color: #f3f6f4; text-align: center; }
.try-join h2 { font-size: clamp(26px, 3.8vw, 44px); letter-spacing: -0.035em; }
.try-gets { display: grid; gap: 10px; width: fit-content; max-width: 100%; margin: 24px auto 28px; text-align: left; }
.try-gets li { display: flex; gap: 10px; align-items: baseline; font-size: 16px; }
.try-gets i { color: var(--blue); font-size: 17px; translate: 0 3px; flex: none; }
.try-join-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.try-join .btn-ghost { color: #f3f6f4; border-color: rgba(255, 255, 255, 0.28); }
.try-join .btn-ghost:hover { border-color: #f3f6f4; }
.try-join .site-note { color: rgba(243, 246, 244, 0.6); }

@media (max-width: 640px) {
  .found-head { flex-wrap: wrap; }
  .found-tags { justify-content: flex-start; width: 100%; padding-left: 41px; }
  .found-next { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .try-steps li.is-now .try-dot { animation: none; } }