/* ============================================================================
   FLLOWLY COMPONENT SYSTEM
   ----------------------------------------------------------------------------
   Loaded after app.css. app.css holds the spatial primitives (stage, tracks,
   fork, trail); this file holds the reusable components the product is built
   from, so no screen styles itself.

   Rules encoded here:
     · a card is an ARTIFACT — hairline, left branch colour, no soft shadow
     · there is no photograph anywhere; identity is a route, not a face
     · verification is a STATE with a sentence, never a tick
     · the map draws flows, never people
   ============================================================================ */

/* ── PRIMARY NAVIGATION ───────────────────────────────────────────────────
   Six words. Fllowly's own, not Home/Feed/Network/Notifications.           */
.nav { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 26px); }
.nav-item {
  position: relative; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .01em; color: var(--ink-3); padding: 6px 0;
  transition: color var(--dur) var(--ease); white-space: nowrap;
}
.nav-item:hover { color: var(--ink); }
.nav-item.is-on { color: var(--ink); }
.nav-item.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--grad);
}
.nav-cta { margin-left: clamp(8px, 1.6vw, 20px); }

/* ── IDENTITY GLYPH — Fllowly's answer to the avatar ──────────────────────
   No photograph, ever. The mark is generated from the route the person
   lived, so it identifies an experience rather than a face.                */
.glyph { display: inline-block; flex: none; vertical-align: middle; border-radius: var(--r-soft); }
.glyph-l { font-weight: 800; letter-spacing: -.04em; }
.who { display: inline-flex; align-items: center; gap: 12px; }
.who-name { font-weight: 700; letter-spacing: -.02em; }
.who-sub { font-size: var(--t-xs); color: var(--ink-3); }

/* ── EXPERIENCE CARD — the central object of the product ──────────────────
   A decision artifact: one hairline border, one coloured edge for the
   branch, a gradient thread at the top. No avatar, no like, no comment,
   no timestamp-as-recency, no author byline above the content.             */
.xcard {
  position: relative; display: block; width: 100%; text-align: left;
  background: linear-gradient(180deg, var(--wash), transparent 220px);
  border: 1px solid var(--line); border-left: 2px solid var(--path-go);
  border-radius: var(--r-hair);
  padding: clamp(26px, 3vw, 44px);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.xcard::before {
  content: ""; position: absolute; inset: -1px -1px auto -2px; height: 1px;
  background: var(--grad); opacity: .5;
  transition: opacity var(--dur) var(--ease);
}
.xcard.is-stayed   { border-left-color: var(--path-stay); }
.xcard.is-returned { border-left-color: var(--path-return); }
a.xcard:hover, button.xcard:hover { border-color: var(--line-2); background: linear-gradient(180deg, var(--wash-2), transparent 260px); }
a.xcard:hover::before, button.xcard:hover::before { opacity: 1; }

.xcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.xcard-title { font-size: clamp(19px, 1.7vw, 25px); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; max-width: 20ch; text-transform: none; }
.xcard-route { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: var(--t-xs); color: var(--ink-3); flex-wrap: wrap; }
.xcard-route b { color: var(--ink-2); font-weight: 600; }
/* An absent place or date is shown, never hidden and never guessed at. It is
   set in the same size as the value it replaces so the eye reads it as an
   answer of a different kind rather than as a rendering failure. */
.xcard-route .is-absent { color: var(--ink-4); font-style: italic; font-weight: 400; }
/* The one real account in a corpus of props. Quiet — it is a provenance
   note, not a badge, and nothing about it implies verification. */
.xcard-route .is-real { color: var(--blue-lit); letter-spacing: .06em; }
.vs-v.is-absent { color: var(--ink-4); font-style: italic; }
.xs.is-absent { color: var(--ink-4); font-style: italic; }
.xcard-quote {
  font-size: clamp(20px, 2.3vw, 31px); font-weight: 500; line-height: 1.36;
  letter-spacing: -.03em; margin: clamp(24px, 3vw, 38px) 0; max-width: 32ch;
}

/* expected → reality, the comparison the product exists to show */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2.4vw, 34px); align-items: stretch; }
.vs-col { min-width: 0; }
.vs-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag); text-transform: uppercase; margin-bottom: 12px; }
.vs-col:first-child .vs-k { color: var(--ink-4); }
.vs-col:last-child .vs-k  { color: var(--sky); }
.vs-v { font-size: var(--t-sm); line-height: 1.62; color: var(--ink-2); }
.vs-col:last-child .vs-v { color: var(--ink); }
.vs-arrow { width: 1px; background: linear-gradient(180deg, transparent, var(--line-2) 25%, var(--line-2) 75%, transparent); position: relative; }
.vs-arrow::after {
  content: "→"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--void); color: var(--ink-4); font-size: 13px; padding: 5px 3px;
}

.xcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  margin-top: clamp(24px, 3vw, 38px); padding-top: var(--s5);
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.repeat { display: inline-flex; align-items: baseline; gap: 12px; }
.repeat-k { font-size: var(--t-tag); letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-4); }
.repeat-v { font-size: var(--t-md); font-weight: 800; letter-spacing: -.02em; }
/* AN OUTCOME IS NOT A GRADE.
   These were green / red / amber, which renders "I would not do it again" as
   an error state — the visual language of a failed form field. It is not a
   failure, it is the single most useful sentence on the platform, and a person
   who wrote it down should not find it coloured like a mistake.

   So outcomes use the ROAD colours instead, which carry direction and no
   judgement: blue kept going, amber turned back, violet took the other path. */
.repeat-v.is-yes   { color: var(--blue-lit); }
.repeat-v.is-mixed { color: var(--amber); }
.repeat-v.is-no    { color: var(--violet-lit); }
.repeat-v.is-open  { color: var(--ink-2); }

/* ── ABSENT VALUES — the honesty machinery, made visible ─────────────────── */
.absent {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-sm); color: var(--ink-4); font-style: italic;
}
.absent::before { content: ""; width: 14px; height: 1px; background: var(--ink-4); flex: none; }
.absent.is-unknown { color: var(--ink-3); }

/* ── RANK — earned by helping. Never a leaderboard position. ─────────────── */
.rank { display: inline-flex; align-items: center; gap: 8px; }
.rank-mark { width: 15px; height: 15px; flex: none; }
.rank-label { font-size: var(--t-tag); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-lit); }
.rank-ladder { display: grid; gap: 0; margin-top: var(--s5); }
.rung {
  display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: var(--s4);
  align-items: center; padding: var(--s4) 0; border-top: 1px solid var(--line);
}
.rung:last-child { border-bottom: 1px solid var(--line); }
.rung.is-here { background: rgba(124,58,237,.06); }
.rung-n { font-size: var(--t-xs); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.rung-l { font-size: var(--t-body); font-weight: 600; }
.rung.is-here .rung-l { color: var(--violet-lit); }
.rung-d { font-size: var(--t-xs); color: var(--ink-4); }
.rung.is-future .rung-l, .rung.is-future .rung-n { color: var(--ink-4); font-weight: 500; }

/* ── VERIFICATION STATES ─────────────────────────────────────────────────── */
.vstate {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
}
.vstate i { font-style: normal; font-size: 11px; }
.vstate.is-0 { color: var(--ink-4); border-style: dashed; }
.vstate.is-1 { color: var(--ink-2); }
.vstate.is-2 { color: var(--sky); border-color: rgba(96,165,250,.3); }
.vstate.is-3 { color: var(--ok); border-color: rgba(63,191,143,.32); background: var(--ok-dim); }
.vstate.is-4 { color: var(--violet-lit); border-color: rgba(124,58,237,.36); background: rgba(124,58,237,.1); }
.vladder { display: grid; gap: 0; }
.vrow { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--line); align-items: start; }
.vrow:last-child { border-bottom: 1px solid var(--line); }
.vrow-d { font-size: var(--t-sm); color: var(--ink-3); }

/* ── NOTICES — safety, abuse, restriction ────────────────────────────────── */
.notice { border: 1px solid var(--line-2); border-left: 2px solid var(--warn); padding: var(--s5) var(--s6); border-radius: var(--r-hair); }
.notice.is-danger { border-left-color: var(--danger); }
.notice.is-ok { border-left-color: var(--ok); }
.notice.is-info { border-left-color: var(--blue); }
.notice-t { font-size: var(--t-body); font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.notice-d { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.66; max-width: 62ch; }
.notice-a { display: flex; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }

/* ── CHIPS — filters. Multi-select, never a closed taxonomy of input. ────── */
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: var(--t-xs); color: var(--ink-2); transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--line-3); color: var(--ink); }
.chip.is-on { border-color: var(--blue); background: rgba(37,99,255,.14); color: #fff; }
.chip-n { font-variant-numeric: tabular-nums; color: var(--ink-4); font-size: 11px; }
.chip.is-on .chip-n { color: rgba(255,255,255,.65); }
.chip:disabled { opacity: .32; pointer-events: none; }
.facet { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.facet-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; }

/* ── SEARCH BAR ──────────────────────────────────────────────────────────── */
.sbar { display: flex; align-items: center; gap: var(--s4); border-bottom: 1px solid var(--line-2); transition: border-color var(--dur) var(--ease); }
.sbar:focus-within { border-color: var(--blue); }
.sbar input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  padding: 16px 0; font-size: clamp(19px, 2.1vw, 28px); font-weight: 500; letter-spacing: -.025em;
}
.sbar input::placeholder { color: var(--ink-4); }
.sbar-n { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── WORLD MAP — experience flows. Not people. ───────────────────────────── */
.map { position: relative; width: 100%; }
.map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-dot { fill: var(--map-land); opacity: .55; }
.map-flow { fill: none; stroke-width: 1; stroke-linecap: round; opacity: .5; }
.map-flow.is-return { stroke-dasharray: 3 4; }
.map-node { cursor: pointer; }
.map-node .halo { fill: var(--blue); opacity: .14; transition: r 240ms var(--ease); }
.map-node:hover .halo { r: 22; opacity: .26; }
.map-node .core { fill: var(--blue); }
.map-node.is-origin .core, .map-node.is-origin .halo { fill: var(--violet); }
.map-label { font-size: 10.5px; font-weight: 700; fill: var(--ink-2); letter-spacing: .02em; pointer-events: none; }
.map-node:hover .map-label { fill: var(--ink); }
.map-n { font-size: 9.5px; fill: var(--ink-4); pointer-events: none; }
.map-legend { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.map-legend span { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-xs); color: var(--ink-3); }

.cstat { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s5); }
.cstat b { display: block; font-size: clamp(28px, 3vw, 42px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cstat span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 8px; }

/* ── LANDING ─────────────────────────────────────────────────────────────── */
.lp { padding-top: 0; }
.lp-hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 128px var(--gutter) var(--s8); position: relative; }
.lp-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.lp-line { font-size: clamp(24px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.03em; color: var(--ink-2); margin-top: var(--s5); }
.lp-line b { color: var(--ink); font-weight: 700; }
.lp-sub { font-size: var(--t-read); color: var(--ink-2); max-width: 54ch; margin-top: var(--s6); line-height: 1.7; }
.lp-cta { display: flex; gap: var(--s3); margin-top: var(--s7); flex-wrap: wrap; }
.lp-sec { padding: clamp(80px, 10vw, 150px) var(--gutter); border-top: 1px solid var(--line); }
.lp-sec-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--s6); }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 4vw, 64px); }
.lp-step-n { font-size: var(--t-tag); font-weight: 800; letter-spacing: .2em; color: var(--blue); }
.lp-step-t { font-size: var(--t-md); font-weight: 700; letter-spacing: -.025em; margin: 12px 0 10px; }
.lp-step-d { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.7; }
.lp-cats { display: flex; flex-wrap: wrap; gap: 0; }
.lp-cat {
  flex: 1 1 260px; padding: var(--s6) var(--s5) var(--s6) 0;
  border-top: 1px solid var(--line); text-align: left;
  font-size: clamp(19px, 1.9vw, 26px); font-weight: 700; letter-spacing: -.03em;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.lp-cat:hover { color: var(--sky); padding-left: 12px; }
.lp-cat i { display: block; font-style: normal; font-size: var(--t-xs); font-weight: 500; color: var(--ink-4); margin-top: 8px; letter-spacing: 0; }
.lp-foot { padding: var(--s7) var(--gutter) var(--s8); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; align-items: flex-end; }

/* ── ONBOARDING ──────────────────────────────────────────────────────────── */
.steps { display: flex; gap: 6px; margin-bottom: var(--s7); }
.step-pip { height: 2px; flex: 1; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.step-pip.is-done::after, .step-pip.is-on::after { content: ""; display: block; height: 100%; background: var(--grad); animation: widen 520ms var(--ease-out) both; }
.step-pip.is-done::after { opacity: .5; }
.picks { display: grid; gap: 0; margin-top: var(--s6); }
.pick {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s5); align-items: center;
  padding: var(--s6) 0; border-top: 1px solid var(--line); width: 100%;
  transition: padding-left var(--dur) var(--ease);
}
.pick:last-of-type { border-bottom: 1px solid var(--line); }
.pick:hover { padding-left: 12px; }
.pick:hover .pick-t { color: var(--sky); }
.pick.is-on .pick-t { color: var(--sky); }
.pick-t { font-size: clamp(20px, 2vw, 27px); font-weight: 700; letter-spacing: -.03em; transition: color var(--dur) var(--ease); }
.pick-d { font-size: var(--t-sm); color: var(--ink-4); margin-top: 7px; }
.pick-go { font-size: var(--t-xs); color: var(--ink-4); }

/* ── CONVERSATIONS ───────────────────────────────────────────────────────── */
.threads { display: grid; gap: 0; }
.thread {
  display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: var(--s5);
  align-items: start; padding: var(--s6) 0; border-top: 1px solid var(--line);
  width: 100%; transition: background var(--dur) var(--ease);
}
.thread:last-child { border-bottom: 1px solid var(--line); }
.thread:hover { background: var(--wash); }
.thread-t { font-size: var(--t-read); font-weight: 500; letter-spacing: -.02em; }
.thread-m { font-size: var(--t-sm); color: var(--ink-3); margin-top: 8px; line-height: 1.6; }
.thread-s { font-size: var(--t-xs); color: var(--ink-4); text-align: right; white-space: nowrap; }
.thread-s b { display: block; font-weight: 600; color: var(--ink-3); }

.msg { display: grid; gap: var(--s4); }
.bubble { max-width: 60ch; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-hair); font-size: var(--t-body); line-height: 1.66; }
.bubble.is-you { border-left: 2px solid var(--blue); background: var(--wash); }
.bubble.is-them { border-left: 2px solid var(--violet); margin-left: auto; }
.bubble-w { font-size: var(--t-tag); letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px; }

/* ── SHARE FLOW ──────────────────────────────────────────────────────────── */
.qcard { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.qcard-q { font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -.025em; }
.qcard-h { font-size: var(--t-xs); color: var(--ink-4); margin-top: 9px; max-width: 58ch; line-height: 1.6; }
.qcard textarea, .qcard input {
  width: 100%; margin-top: var(--s5); background: transparent; border: 0;
  border-bottom: 1px solid var(--line-2); padding: 12px 0; outline: none;
  font-size: var(--t-body); line-height: 1.7; resize: vertical;
  transition: border-color var(--dur) var(--ease);
}
.qcard textarea:focus, .qcard input:focus { border-color: var(--blue); }
.qskip { display: inline-flex; gap: var(--s4); margin-top: 14px; }
.qskip button { font-size: var(--t-xs); color: var(--ink-4); text-decoration: underline; text-underline-offset: 3px; }
.qskip button:hover { color: var(--ink-2); }
.qskip button.is-on { color: var(--sky); }

/* ── SPECTRUM (would-repeat, never choice-share) ─────────────────────────── */
.spectrum { display: grid; gap: 12px; }
.sp-row { display: grid; grid-template-columns: 200px minmax(0,1fr) 44px; gap: var(--s4); align-items: center; font-size: var(--t-sm); }
.sp-bar { height: 6px; background: var(--lift-2); border-radius: 3px; overflow: hidden; }
.sp-bar i { display: block; height: 100%; transform-origin: left; animation: widen 700ms var(--ease-out) both; }
.sp-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ── KPI strip ───────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--s5); }
.kpi b { display: block; font-size: clamp(30px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.kpi span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 10px; max-width: 22ch; }

/* ── SUCCESS ─────────────────────────────────────────────────────────────── */
.done { display: grid; gap: var(--s5); max-width: 52ch; }
.done-mark { width: 44px; height: 44px; }
.done-t { font-size: var(--t-lg); font-weight: 800; letter-spacing: -.035em; }

/* ── DEMO BANNER — visible on every screen that shows invented records ───── */
.demo-strip {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-tag); letter-spacing: .14em; text-transform: uppercase;
  color: var(--warn); border: 1px dashed rgba(224,164,88,.4);
  padding: 6px 12px; border-radius: var(--r-hair);
}

@media (max-width: 900px) {
  .vs { grid-template-columns: 1fr; gap: var(--s5); }
  .vs-arrow { height: 1px; width: 100%; background: var(--line-2); }
  .vs-arrow::after { content: "↓"; }
  .vrow { grid-template-columns: 1fr; gap: 8px; }
  .thread { grid-template-columns: 1fr; }
  .thread-s { text-align: left; }
  .sp-row { grid-template-columns: 130px minmax(0,1fr) 40px; }
}

/* ── SHEET — the ask flow. A takeover, not a modal card. ─────────────────── */
.sheet {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(3,5,10,.72); backdrop-filter: blur(10px);
  display: flex; justify-content: flex-end;
  animation: fade 240ms var(--ease-out) both;
}
.sheet-panel {
  width: min(680px, 100%); height: 100%; overflow-y: auto;
  background: var(--ground); border-left: 1px solid var(--line-2);
  animation: slidein 420ms var(--ease-out) both;
}
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-body { padding: clamp(28px, 4vw, 56px); }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--line);
}
.sheet-body .actions { padding-top: var(--s6); margin-top: var(--s6); }

/* ── CRUMBS — the path you walked, under the bar ─────────────────────────── */
.crumbs {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 45;
  padding: 10px var(--gutter); pointer-events: none;
}
.crumbs > * { pointer-events: auto; }
.is-landing .stage { padding-top: 0; }

/* A label that would collide with another is tucked away until hover. Losing
   the label is better than a pile of overlapping city names. */
.map-label.is-tucked { opacity: 0; transition: opacity var(--dur) var(--ease); }
.map-node:hover .map-label.is-tucked,
.map-node:focus-visible .map-label.is-tucked { opacity: 1; }
.map-node:hover { }
.map-view { display: flex; gap: 6px; }

/* ── SMALL SCREENS ────────────────────────────────────────────────────────
   The navigation does not disappear below a breakpoint. It becomes a second
   row that scrolls sideways — hiding it behind a hamburger would mean the
   product's six words, which are most of how it explains itself, are the
   first thing a phone user never sees.                                     */
@media (max-width: 900px) {
  .topbar {
    height: auto; flex-wrap: wrap; align-items: center;
    padding-top: 12px; padding-bottom: 0; row-gap: 0;
    background: var(--bar-solid); backdrop-filter: blur(14px);
  }
  .mark { order: 0; }
  .utilities { order: 1; }
  .nav {
    order: 2; width: 100%; margin-top: 12px; padding: 11px 0;
    border-top: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    flex-wrap: nowrap; gap: 20px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item { padding-bottom: 4px; }
  .crumbs { display: none; }            /* the nav row is the orientation now */
  .stage { padding-top: 150px; }
  .lp-hero { padding-top: 170px; min-height: 0; }
  .sheet-panel { width: 100%; border-left: 0; }
  .xcard-top { flex-direction: column; }
  .xcard-top > div:last-child { align-items: flex-start !important; flex-direction: row !important; }
  .kpis, .cstat { grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); }
}

/* ── EXPERIENCE CARD v2 ───────────────────────────────────────────────────
   The card is an artifact, and it is the loudest object in the product.    */
.xcard-shape {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--t-tag); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px;
}
.xcard-shape em { font-style: normal; color: var(--ink-4); letter-spacing: .1em; }
.xcard-shape em::before { content: "· "; }
.shape-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.xcard-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.xcard.is-brief { padding: clamp(20px, 2.2vw, 30px); }
.xcard.is-brief .xcard-quote { font-size: clamp(17px, 1.5vw, 21px); margin: 20px 0; }

/* the decision fork, at object scale */
.dfork { margin: clamp(26px, 3vw, 40px) 0; padding: var(--s5) 0; border-block: 1px solid var(--line); }
.dfork-body { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; margin-top: 16px; }
.dfork-svg { width: 100%; height: auto; overflow: visible; }
.dfork-line { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 900ms var(--ease-out) forwards; }
.dfork-line[stroke-dasharray="3 4"] { stroke-dasharray: 3 4; stroke-dashoffset: 0; animation: fade 700ms var(--ease-out) both; }
.dfork-legend { display: grid; gap: 10px; }
.dfork-legend li { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; font-size: var(--t-sm); color: var(--ink-4); }
.dfork-legend li.is-taken { color: var(--ink); }
.dfork-what { min-width: 0; }
.dfork-tag { font-size: var(--t-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
.dfork-legend li.is-taken .dfork-tag { color: var(--blue-lit); }

/* the four things nobody writes down */
.xgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 2.6vw, 38px); margin: clamp(26px, 3vw, 40px) 0; }

/* the verdict band */
.verdict {
  display: grid; gap: 8px; padding: var(--s5) var(--s6);
  border-left: 2px solid var(--ink-4); background: var(--wash);
  border-radius: var(--r-hair); margin: clamp(24px, 3vw, 36px) 0;
}
.verdict.is-yes   { border-left-color: var(--blue); }
.verdict.is-mixed { border-left-color: var(--amber); }
.verdict.is-no    { border-left-color: var(--violet); }
.verdict-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--ink-3); }
.verdict-v { font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.verdict.is-yes   .verdict-v { color: var(--blue-lit); }
.verdict.is-mixed .verdict-v { color: var(--amber); }
.verdict.is-no    .verdict-v { color: var(--violet-lit); }
/* NO ANSWER — the band still appears, because the absence is worth stating, but
   it does not shout. `is-open` covers a verbatim "too early to say" and the two
   states that mean we simply do not hold an answer. Sized down and muted: an
   answer we do not have must never carry more weight than one we do. */
.verdict.is-open  .verdict-v { color: var(--ink-3); font-size: clamp(19px, 1.9vw, 25px); }
.verdict-d { font-size: var(--t-sm); color: var(--ink-2); max-width: 62ch; margin-top: 4px; line-height: 1.65; }

/* what they wish they had known */
.wish { margin: clamp(24px, 3vw, 36px) 0 0; }
.wish-v {
  font-size: clamp(18px, 1.7vw, 23px); font-weight: 500; line-height: 1.45;
  letter-spacing: -.02em; color: var(--sky); max-width: 40ch; margin-top: 12px;
}

@media (max-width: 760px) {
  .dfork-body { grid-template-columns: 1fr; }
  .xcard-badges { flex-direction: row; align-items: center; }
}

/* ── CROSSROADS SCREEN ────────────────────────────────────────────────────
   Full width. The fork is the page, not a chart inside one.                */
.stage--wide { max-width: 1560px; margin: 0 auto; }
.xhead { padding-bottom: var(--s6); border-bottom: 1px solid var(--line); }
.xhead-said {
  font-size: clamp(19px, 1.9vw, 26px); font-weight: 500; letter-spacing: -.025em;
  line-height: 1.4; max-width: 46ch; margin-top: 14px; color: var(--ink);
}
.xhead-a { display: flex; align-items: center; gap: var(--s6); margin-top: 18px; flex-wrap: wrap; }

/* ── LANES — six kinds of person, including the empty ones ───────────────── */
.lanes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0; margin-top: var(--s6);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.lane {
  padding: var(--s6) var(--s5);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.lane-n { font-size: 40px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.lane-t { font-size: var(--t-body); font-weight: 700; letter-spacing: -.02em; }
.lane-d { font-size: var(--t-xs); color: var(--ink-4); line-height: 1.6; flex: 1; }
.lane-who { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.lane-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-xs); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 6px 13px;
  transition: all var(--dur) var(--ease);
}
.lane-chip:hover { border-color: var(--line-3); color: #fff; }
.lane-chip i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.lane.is-empty { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,.014) 9px 18px); }
.lane.is-empty .lane-n, .lane.is-empty .lane-t { color: var(--ink-4); }
.lane-gap {
  font-size: var(--t-tag); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4); border: 1px dashed var(--line-2); border-radius: var(--r-hair);
  padding: 8px 12px; align-self: flex-start; margin-top: 8px;
}

/* ── JOURNEY FLOW — decision → journey → outcome ─────────────────────────── */
.jflow svg { display: block; width: 100%; height: auto; overflow: visible; }
.jf-ribbon { animation: fade 800ms var(--ease-out) both; transition: fill-opacity var(--dur) var(--ease); }
.jflow:hover .jf-ribbon { fill-opacity: .12; }
.jflow .jf-ribbon:hover { fill-opacity: .5 !important; }
.jf-ribbon.is-untaken { }
.jf-head {
  font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  fill: var(--ink-4);
}
.jf-bar { fill-opacity: .1; transition: fill-opacity var(--dur) var(--ease); }
.jf-node.is-clickable { cursor: pointer; }
.jf-node:hover .jf-bar { fill-opacity: .24; }
.jf-label { font-size: 14px; font-weight: 700; fill: var(--ink); letter-spacing: -.02em; }
.jf-n { font-size: 10.5px; fill: var(--ink-3); }

/* ── DECISION SIGNATURE — what Fllowly has instead of a profile header ───── */
.sig { margin-top: var(--s6); }
.sig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sig-spine { stroke: var(--line-2); stroke-width: 1; fill: none; }
.sig-node { cursor: pointer; opacity: 0; animation: rise 640ms var(--ease-out) forwards; }
.sig-halo { opacity: .13; transition: opacity 240ms var(--ease), r 240ms var(--ease); }
.sig-dot  { transition: r 240ms var(--ease); }
.sig-node:hover .sig-halo, .sig-node:focus-visible .sig-halo { opacity: .3; r: 22; }
.sig-node:hover .sig-dot,  .sig-node:focus-visible .sig-dot  { r: 9; }
.sig-node:hover .sig-what { fill: #fff; }
.sig-year { font-size: 11px; font-weight: 800; letter-spacing: .16em; fill: var(--ink-4); }
.sig-what { font-size: 14px; font-weight: 700; letter-spacing: -.02em; fill: var(--ink); }
.sig-more { font-size: 11px; fill: var(--ink-3); }

/* ── IN THEIR WORDS ──────────────────────────────────────────────────────── */
.words { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; margin-top: var(--s5);
         border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.word { margin: 0; padding: var(--s6) var(--s5); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.word blockquote {
  margin: 0; font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; line-height: 1.55;
  letter-spacing: -.02em; color: var(--ink);
}
.word figcaption { margin-top: 16px; font-size: var(--t-tag); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4); line-height: 1.7; }

/* the fork with a branch missing — the empty state's whole argument */
.state-mark { display: block; margin-bottom: var(--s5); }

/* ── WIDE DIAGRAMS ON SMALL SCREENS ───────────────────────────────────────
   The fork, the flow and the map are ~1100 units wide. Scaled to fit a phone
   they stay inside the viewport and become illegible — 17px type renders at
   five. So they scroll sideways inside their own frame at a readable size,
   and the page itself never scrolls horizontally.                          */
@media (max-width: 900px) {
  .fork, .jflow, .map, .sig {
    min-width: 0;                       /* let the flex/grid parent shrink us */
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
  .fork > svg   { min-width: 780px; }
  .jflow > svg  { min-width: 720px; }
  .map > svg    { min-width: 700px; }
  .sig > svg    { min-width: 560px; }
  .fork::after, .jflow::after, .map::after, .sig::after {
    content: "Scroll sideways to see all of it →";
    display: block; padding-top: 10px;
    font-size: var(--t-tag); letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-4);
  }
  .lanes { grid-template-columns: 1fr; }
  .verdict-v { font-size: 28px; }
}

/* ── FIND SOMEONE WHO'S BEEN THERE ────────────────────────────────────────
   Whole situations as examples, not keyword chips — a chip teaches people to
   shrink "moving to Amsterdam for university" down to "Amsterdam" before we
   have understood anything about what they are deciding.                   */
.sit-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; margin-top: 34px;
            border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sit {
  padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: left; transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.sit:hover { background: var(--wash-2); padding-left: 28px; }
.sit-q { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.sit:hover .sit-q { color: var(--ink); }

/* the six outcomes for the current result set, before any names */
.outstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0;
            border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.outstrip-i { padding: 20px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.outstrip-i b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.outstrip-i span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 9px; line-height: 1.45; }
.outstrip-i.is-none b { color: var(--ink-4); }
.outstrip-i.is-none { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,.014) 9px 18px); }

/* results grouped by the road, never ranked into one list */
.rgroup { margin-bottom: 72px; }
.rgroup-h { display: flex; align-items: center; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.rgroup-t { font-size: clamp(19px, 1.8vw, 25px); font-weight: 800; letter-spacing: -.032em; }
.rgroup-n { font-size: var(--t-xs); color: var(--ink-3); margin-top: 6px; }
.rgroup.is-empty .rgroup-t { color: var(--ink-4); }
.rgroup.is-empty .road-glyph { opacity: .35; }
.facets { display: grid; margin-top: 12px; }

/* ── THE CARD LEADS WITH THEIR WORDS ──────────────────────────────────────
   The title is ours; the sentence is theirs. Theirs is bigger, and it is the
   first thing the eye lands on after the one-line outcome.                 */
.xcard-quote {
  border: 0; padding: 0;
  font-size: clamp(22px, 2.9vw, 40px); font-weight: 500; line-height: 1.26;
  letter-spacing: -.035em; margin: 20px 0 0; max-width: 26ch; color: var(--ink);
}
.xcard.is-brief .xcard-quote { font-size: clamp(18px, 1.8vw, 24px); max-width: 34ch; }
.xcard-cap { margin-top: clamp(22px, 2.4vw, 32px); padding-top: 18px; border-top: 1px solid var(--line); }
.xcard-title { font-size: var(--t-body); font-weight: 700; letter-spacing: -.015em; color: var(--ink-2); max-width: 46ch; }
.xcard-route { margin-top: 8px; }
.xcard-who { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap; }
.xcard-badges { flex-direction: row; align-items: center; gap: 14px; }

/* the row's outcome, as the same road shape used everywhere else */
.fitem-when { padding-top: 2px; }
.fitem-when .road-glyph { display: block; }

/* ── CONVERSATION CONTEXT — why this person, kept on screen throughout ──── */
.cx { border: 1px solid var(--line); border-left: 2px solid var(--blue); border-radius: var(--r-hair);
      background: linear-gradient(180deg, var(--wash), transparent 260px); }
.cx-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(16px, 3vw, 40px);
          padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 34px); border-top: 1px solid var(--line); }
.cx-row:first-child { border-top: 0; }
.cx-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
        text-transform: uppercase; color: var(--ink-4); padding-top: 4px; }
.cx-v { min-width: 0; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.cx-said { display: block; font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.022em;
           line-height: 1.4; color: var(--ink); margin: 0; max-width: 46ch; }
.cx-who { display: flex; align-items: center; gap: 14px; }
.cx-name { font-size: var(--t-md); font-weight: 700; letter-spacing: -.025em; }
.cx-sub { font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }
.cx-badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.cx-exp { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left;
          padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-hair);
          transition: all var(--dur) var(--ease); }
.cx-exp:hover { border-color: var(--line-3); background: var(--wash-2); }
.cx-exp-t { font-size: var(--t-body); font-weight: 700; letter-spacing: -.02em; }
.cx-exp-m { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; font-size: var(--t-xs); color: var(--ink-3); }
.cx-exp-go { margin-left: auto; font-size: var(--t-xs); color: var(--ink-4); white-space: nowrap; }
.cx-verdict { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cx-talk { margin-top: clamp(56px, 7vw, 96px); }
.reply-box { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
             padding: 12px 0; outline: none; font-size: var(--t-body); resize: vertical;
             transition: border-color var(--dur) var(--ease); }
.reply-box:focus { border-color: var(--blue); }

/* ── THREAD LIST — a decision you are working through, not a message ─────── */
.cthreads { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cthread { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: clamp(16px, 2.6vw, 36px);
           align-items: start; padding: var(--s6) 0; border-bottom: 1px solid var(--line);
           width: 100%; transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease); }
.cthread:hover { background: var(--wash); padding-left: 12px; }
.cthread-road { padding-top: 6px; }
.cthread-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
             text-transform: uppercase; color: var(--ink-4); }
.cthread-ctx { font-size: var(--t-sm); color: var(--ink-2); margin-top: 7px; }
.cthread-q { font-size: var(--t-read); font-weight: 500; letter-spacing: -.022em;
             line-height: 1.4; margin-top: 12px; }
.cthread-who { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: var(--t-xs); color: var(--ink-3); }
.cthread-s { text-align: right; font-size: var(--t-xs); color: var(--ink-4); white-space: nowrap; }
.cthread-s b { display: block; font-weight: 600; color: var(--ink-3); }
.cthread-s span { display: block; margin-top: 4px; }

/* ── "THAT HELPED" — the only thing that creates standing ────────────────── */
.helped { border: 1px solid var(--line-2); border-left: 2px solid var(--ok);
          border-radius: var(--r-hair); padding: clamp(24px, 3vw, 38px); background: var(--wash); }
.helped.is-quiet { border-left-color: var(--ink-4); }
.helped.is-done { border-left-color: var(--ok); background: linear-gradient(180deg, rgba(63,191,143,.06), transparent 70%); }
.helped-head { display: flex; align-items: center; gap: 16px; }
.helped-t { font-size: var(--t-md); font-weight: 700; letter-spacing: -.025em; }
.helped-d { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.66; max-width: 62ch; margin-top: 14px; }
.helped-opts { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.helped-opt { padding: 13px 26px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
              font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
              transition: all var(--dur) var(--ease); }
.helped-opt:hover { border-color: var(--line-3); color: var(--ink); }
.helped-opt.is-yes { border-color: rgba(63,191,143,.4); color: var(--ok); }
.helped-opt.is-yes:hover { background: var(--ok-dim); border-color: var(--ok); }
.helped-said { margin: 24px 0 0; border: 0; padding: 0;
               font-size: clamp(19px, 2vw, 27px); font-weight: 500; letter-spacing: -.028em;
               line-height: 1.35; color: var(--ok); max-width: 26ch; }
.helped-count { display: flex; align-items: baseline; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.helped-count b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; }
.helped-count span { font-size: var(--t-sm); color: var(--ink-2); }

@media (max-width: 760px) {
  .cx-row { grid-template-columns: 1fr; gap: 10px; }
  .cx-v { flex-direction: column; align-items: flex-start; }
  .cx-exp { flex-wrap: wrap; }
  .cx-exp-go { margin-left: 0; }
  .cthread { grid-template-columns: 46px minmax(0, 1fr); }
  .cthread-s { grid-column: 1 / -1; text-align: left; margin-top: 10px; }
  .cthread-s span { display: inline; margin-left: 10px; }
}

/* prompts derived from a person's own record — suggestions, never a script */
.prompts { display: grid; gap: 0; margin-top: 12px; border-top: 1px solid var(--line); }
.prompt {
  padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left;
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.prompt:hover { color: var(--ink); padding-left: 12px; }
.prompt::before { content: "“"; color: var(--ink-4); }
.prompt::after { content: "”"; color: var(--ink-4); }

/* trust context, before you spend a question on someone */
.asktrust { border: 1px solid var(--line); border-left: 2px solid var(--blue);
            border-radius: var(--r-hair); padding: 18px 20px; margin-bottom: var(--s6);
            display: grid; gap: 16px; background: var(--wash); }
.asktrust-road { display: flex; align-items: center; gap: 16px; }
.asktrust-t { font-size: var(--t-body); font-weight: 700; letter-spacing: -.02em; }
.asktrust-m { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-3); }
.asktrust-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
                padding-top: 14px; border-top: 1px solid var(--line); }

/* ── ASK, THE FRONT DOOR ──────────────────────────────────────────────────
   Not centred-and-locked any more: the answer appears underneath as you type,
   so the page has to be able to grow.                                      */
.stage--ask { display: block; padding-top: clamp(120px, 16vh, 200px); }
.stage--ask .ask { width: min(1100px, 100%); margin: 0 auto; padding: 0 var(--gutter); }

.peek { margin-top: clamp(56px, 7vw, 96px); animation: rise 520ms var(--ease-out) both; }
.peek:empty { display: none; }
.peek-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
          text-transform: uppercase; color: var(--ink-4); }
.peek-said { font-size: clamp(20px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.03em;
             line-height: 1.3; margin-top: 14px; max-width: 30ch; color: var(--ink); }
.peek-none { font-size: var(--t-read); color: var(--ink-2); margin-top: 24px; max-width: 54ch; line-height: 1.7; }
.peek-roads { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0;
              margin-top: 20px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.peek-road { padding: 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.peek-road b { display: block; font-size: 42px; font-weight: 800; letter-spacing: -.05em;
               line-height: 1; margin-top: 16px; }
.peek-road span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 9px; }
.peek-road.is-none b { color: var(--ink-4); }
.peek-road.is-none .road-glyph { opacity: .35; }
.peek-road.is-none { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,.014) 9px 18px); }
.peek-read { font-size: var(--t-xs); color: var(--ink-4); margin-top: 18px; }

/* what is waiting on the other side of onboarding */
.ob-roads { display: grid; gap: 0; margin-top: 14px; border-top: 1px solid var(--line); }
.ob-road { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ob-road b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.04em; margin-top: 8px; }
.ob-road span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }

/* ── SHARE — telling something that happened, not filling in a database ─── */
.sh-open { max-width: 900px; }
.sh-one { display: block; width: 100%; resize: none; overflow: hidden;
          background: none; border: 0; outline: none; padding: var(--s4) 0 var(--s5);
          font-size: clamp(21px, 2.6vw, 34px); font-weight: 500;
          letter-spacing: -.03em; line-height: 1.3; }
.sh-one::placeholder { color: var(--ink-4); }
.sh-num { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
          text-transform: uppercase; color: var(--blue-lit); }

/* the account assembling beside you */
.sh-peek { font-size: var(--t-sm); line-height: 1.5; color: var(--ink); margin-top: 12px;
           max-width: 22ch; font-weight: 500; }
.sh-built { display: grid; gap: 0; margin-top: 22px; border-left: 1px solid var(--line-2); }
.sh-step { position: relative; padding: 9px 0 9px 20px; font-size: var(--t-xs); color: var(--ink-4); }
.sh-step::before { content: ""; position: absolute; left: -4.5px; top: 15px;
                   width: 8px; height: 8px; border-radius: 50%; background: var(--ground);
                   border: 1.5px solid var(--line-3); }
.sh-step.is-done { color: var(--ink-2); }
.sh-step.is-done::before { background: var(--blue); border-color: var(--blue); }
.sh-step.is-now { color: var(--ink); font-weight: 700; }
.sh-step.is-now::before { background: var(--ink); border-color: var(--ink);
                          box-shadow: 0 0 0 4px rgba(237,241,250,.12); }

/* the honest completion state */
.sh-done { padding-bottom: var(--s7); border-bottom: 1px solid var(--line); }
.sh-can { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 0;
          border-top: 1px solid var(--line); }
.sh-can li { padding: 15px 0 15px 28px; border-bottom: 1px solid var(--line);
             font-size: var(--t-read); color: var(--ink); position: relative; }
.sh-can li::before { content: "→"; position: absolute; left: 0; color: var(--blue-lit); }
.sh-tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0;
            margin-top: 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sh-tally > div { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sh-tally b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.sh-tally span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 8px; }

/* ── MY FLLOWLY — a journey in three parts ───────────────────────────────── */
.mysec { padding: clamp(48px, 6vw, 84px) 0; border-bottom: 1px solid var(--line); }
.mysec-h { display: flex; align-items: baseline; gap: 20px; margin-bottom: var(--s6); }
.mysec-n { font-size: var(--t-tag); font-weight: 800; letter-spacing: .22em; color: var(--ink-4); }
.mysec-t { font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; letter-spacing: -.038em; }
.myrow { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px);
         padding: var(--s6) 0; border-top: 1px solid var(--line); align-items: start; }
.myrow-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
           text-transform: uppercase; color: var(--ink-4); padding-top: 4px; }
.myrow-v { min-width: 0; }
.my-said { font-size: clamp(19px, 2vw, 27px); font-weight: 500; letter-spacing: -.028em;
           line-height: 1.34; max-width: 30ch; }

/* standing: the label leads, the numbers stay small on purpose */
.stand { border-left: 2px solid var(--violet); padding-left: 20px; }
.stand-l { font-size: var(--t-md); font-weight: 700; letter-spacing: -.024em; color: var(--violet-lit); }
.stand-d { font-size: var(--t-sm); color: var(--ink-3); margin-top: 8px; max-width: 54ch; line-height: 1.6; }
.contrib { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
           margin-top: 28px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.contrib > div { padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contrib b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.contrib span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 8px; line-height: 1.45; }

/* the loop */
.loop { display: grid; gap: 0; border-left: 1px solid var(--line-2); margin-top: 8px; }
.loop-i { position: relative; padding: 13px 0 13px 26px; font-size: var(--t-body); color: var(--ink-4); }
.loop-i i { position: absolute; left: -5px; top: 19px; width: 9px; height: 9px; border-radius: 50%;
            background: var(--void); border: 1.5px solid var(--line-3); }
.loop-i.is-on { color: var(--ink); }
.loop-i.is-on i { background: var(--blue); border-color: var(--blue); }

@media (max-width: 760px) {
  .myrow { grid-template-columns: 1fr; gap: 12px; }
}

/* the context spine — the line that survives folding */
.cx-spine { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap;
            padding: 18px clamp(20px, 2.6vw, 34px); }
.cx-spine-v { min-width: 0; }
.cx-spine-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
              text-transform: uppercase; color: var(--ink-4); }
.cx-spine-t { font-size: var(--t-sm); color: var(--ink); margin-top: 5px;
              max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-fold { margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
           font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap;
           transition: color var(--dur) var(--ease); }
.cx-fold:hover { color: var(--ink); }
.cx-fold-i { font-size: 8px; }
.cx-full { border-top: 1px solid var(--line); }
.cx-full.is-folded { display: none; }
.cx-full .cx-row:first-child { border-top: 0; }

/* "you opened this" and "this actually helped" must not look alike */
.cthread-helped { color: var(--violet-lit); font-weight: 700;
                  letter-spacing: .08em; text-transform: uppercase; font-size: var(--t-tag); }

@media (max-width: 760px) {
  .cx-spine-t { white-space: normal; }
  .cx-fold { margin-left: 0; }
}

/* ── THE WAY BACK INTO THE LOOP — every exploratory screen ends here ────── */
.nextstep {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 52px);
  align-items: start; margin-top: clamp(80px, 10vw, 140px);
  padding: clamp(30px, 4vw, 52px) 0 0; border-top: 1px solid var(--line-2);
}
.nextstep-mark { display: grid; gap: 12px; opacity: .55; }
.nextstep-t { font-size: clamp(21px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.032em;
              line-height: 1.28; max-width: 26ch; margin-top: 14px; }
.nextstep-d { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.7; max-width: 56ch; margin-top: 16px; }
.nextstep-a { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: 28px; align-items: center; }

@media (max-width: 760px) {
  .nextstep { grid-template-columns: 1fr; }
  .nextstep-mark { grid-auto-flow: column; justify-content: start; gap: 18px; }
}

/* ── THE ASK BOX — shared by the landing hero and /ask ───────────────────── */
.askbox { width: 100%; }
.lp-tag { font-size: var(--t-xs); color: var(--ink-3); margin-left: 8px;
          padding-left: 16px; border-left: 1px solid var(--line-2); }
.peek-count { display: flex; align-items: baseline; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.peek-count b { font-size: clamp(34px, 4vw, 54px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.peek-count span { font-size: var(--t-read); color: var(--ink-2); }

.peek-snips { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0;
              margin-top: 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.peek-snip { padding: 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
             text-align: left; transition: background var(--dur) var(--ease); }
.peek-snip:hover { background: var(--wash-2); }
.peek-snip-q { font-size: var(--t-read); font-weight: 500; letter-spacing: -.022em;
               line-height: 1.42; margin-top: 14px; }
.peek-snip-m { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;
               font-size: var(--t-xs); color: var(--ink-3); }
.peek-go { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: 34px; }

/* ── LANDING: the roads section ──────────────────────────────────────────── */
.lp-roads { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0;
            margin-top: 48px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.lp-road { padding: clamp(24px, 3vw, 36px); text-align: left;
           border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
           transition: background var(--dur) var(--ease); }
.lp-road:hover { background: var(--wash-2); }
.lp-road b { display: block; font-size: clamp(38px, 4.4vw, 58px); font-weight: 800;
             letter-spacing: -.05em; line-height: 1; margin-top: 20px; }
.lp-road-t { font-size: var(--t-body); font-weight: 700; letter-spacing: -.02em; margin-top: 10px; }
.lp-road-q { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin-top: 16px; }
.lp-road-q.is-none { color: var(--ink-4); font-style: italic; }
.lp-road-m { font-size: var(--t-xs); color: var(--ink-4); margin-top: 12px; }
.lp-last { border-bottom: 1px solid var(--line); }

/* ── COMPOSER — a question, not a message ────────────────────────────────── */
.composer { border-top: 1px solid var(--line); padding-top: var(--s5); }
.composer-a { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: 14px; }

/* ── THE DECISION UPDATE ─────────────────────────────────────────────────
   A decision is not fixed. This is how a thread absorbs "I've now got the
   offer" three weeks later without becoming a feed.                        */
.dband {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  flex-wrap: wrap; padding: var(--s5) var(--s6);
  border: 1px dashed var(--line-2); border-radius: var(--r-hair);
}
.dband-t { font-size: var(--t-body); font-weight: 700; letter-spacing: -.02em; }
.dband-d { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.65; max-width: 56ch; margin-top: 8px; }

.dupdate {
  position: relative; margin: var(--s5) 0; padding: 18px 22px;
  border-left: 2px solid var(--amber); background: rgba(224,164,88,.05);
  border-radius: var(--r-hair);
}
.dupdate.is-editing { border-left-color: var(--blue); background: var(--wash); }
.dupdate-k {
  font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
  text-transform: uppercase; color: var(--amber);
}
.dupdate.is-editing .dupdate-k { color: var(--ink-3); }
.dupdate-t {
  font-size: var(--t-read); font-weight: 500; letter-spacing: -.022em;
  line-height: 1.42; margin-top: 12px; max-width: 46ch;
}
.dupdate-a { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: 14px; align-items: center; }

@media (max-width: 760px) {
  .dband { flex-direction: column; align-items: flex-start; }
}

/* ── TRUST, IN TWO AXES — never one badge ────────────────────────────────── */
.tpills { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.twoax { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
         gap: clamp(20px, 3vw, 44px); margin-top: 20px; }
.twoax-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
           text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }

/* the way out, always available and never a red button */
.safety-link {
  font-size: var(--t-xs); color: var(--ink-4);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}
.safety-link:hover { color: var(--ink-2); }
.pick.is-on .pick-go { color: var(--blue-lit); }
.pick.is-on { background: rgba(37,99,255,.06); }

/* ── SEEKING GUIDANCE IS A STATE, NOT AN EMPTY PROFILE ───────────────────── */
.seekbar {
  display: flex; align-items: baseline; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
  margin-top: 28px; padding: 20px 24px;
  border: 1px solid var(--line); border-left: 2px solid var(--blue);
  border-radius: var(--r-hair); background: var(--wash);
}
.seekbar-k { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
             text-transform: uppercase; color: var(--ink-4); }
.seekbar-v { font-size: var(--t-md); font-weight: 700; letter-spacing: -.025em;
             color: var(--blue-lit); margin-top: 6px; }
.seekbar-d { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.65;
             max-width: 58ch; flex: 1; min-width: 240px; }

/* ── GUIDANCE WHILE TYPING — help, never moderation ──────────────────────
   Deliberately not red and deliberately not an error box. Somebody learning
   how a product works ninety seconds after arriving has done nothing wrong,
   and the copy and the colour both have to say so.                        */
.guide { margin-top: 16px; display: none; }
.guide.is-guiding, .guide.is-blocked, .guide.is-good { display: block; }
.guide-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
             margin-right: 10px; vertical-align: 1px; background: var(--ink-4); }
.guide-t { font-size: var(--t-sm); font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); }
.guide-h { font-size: var(--t-xs); color: var(--ink-4); line-height: 1.6;
           margin-top: 8px; max-width: 52ch; padding-left: 17px; }

.guide.is-guiding .guide-dot { background: var(--ink-3); }
.guide.is-blocked .guide-dot { background: var(--amber); }
.guide.is-blocked .guide-t  { color: var(--amber); }
.guide.is-good .guide-dot   { background: var(--blue-lit); }
.guide.is-good .guide-t     { color: var(--blue-lit); }

.guide-try { font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--track-tag);
             text-transform: uppercase; color: var(--ink-4); margin: 22px 0 4px; }