/* ══════════════════════════════════════════════════════════════════════
   Jeani · waitlist
   The v4 deck palette, set in Host Grotesk, carried on long exposure
   photography. Dark always, no light mode.
   Proportion per surface: 72 ground · 18 glass · 7 metal · 3 signal.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* the world */
  --ink:#070B1F;
  --field:#0E1E5B;
  --deep:#0B1740;
  --cobalt:#1D4AFF;
  --glow:#8FD9FF;
  --sand:#FBECCF;
  --sky:#4FA8FF;

  --text:var(--sand);
  --muted:rgba(251,236,207,.72);
  --faint:rgba(251,236,207,.44);
  --hairline:rgba(251,236,207,.16);
  --accent:var(--cobalt);
  --accent-ink:#FFFFFF;
  --flag:var(--sky);

  /* the medal index · every metal is a gradient, never a flat colour */
  --metal-gold:linear-gradient(160deg,#F2D27C 0%,#E3B44F 52%,#C8912E 100%);
  --metal-silver:linear-gradient(160deg,#EFF3F8 0%,#C7D0DA 52%,#9AA6B5 100%);
  --metal-bronze:linear-gradient(160deg,#E39A63 0%,#BE7647 52%,#8F5330 100%);
  --metal-slate:linear-gradient(160deg,#8B97BF 0%,#6E7BA8 52%,#5A6690 100%);

  --sans:"Host Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s22:22px;
  --s30:30px; --s44:44px; --s64:64px; --s96:96px; --s140:140px;
  --r-sm:12px; --r-md:16px; --r-dense:22px; --r-panel:26px; --r-hero:28px;
  --cap:1180px;
  --gutter:clamp(24px,5vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }
button,input{ font:inherit; color:inherit }

/* film across everything · grain at four percent, never a closing vignette */
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ── type ─────────────────────────────────────────────────────────────── */
.display{
  font-family:var(--sans); font-weight:700;
  letter-spacing:-.032em; line-height:1.02; margin:0; text-wrap:balance;
}
.h2{ font-size:clamp(30px,4.1vw,52px); max-width:17ch }
.h2-wide{ max-width:20ch }
.display-xl{ font-size:clamp(40px,6.2vw,86px); max-width:11ch }
.lede{
  font-weight:300; font-size:clamp(17px,1.5vw,21px); line-height:1.55;
  color:var(--muted); max-width:46ch; margin:var(--s22) 0 0;
}
.body{ font-weight:400; line-height:1.7; color:var(--muted); max-width:56ch; margin:var(--s22) 0 0; font-size:16px }
.body-lead{ font-size:18px; color:var(--text); max-width:52ch }
.sig{
  font-family:var(--mono); font-weight:400; font-size:12px;
  letter-spacing:.06em; color:var(--faint);
}
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
/* prose is never the signal layer */
.foot-note,.capture-note,.goal-note{
  font-family:var(--sans); font-size:13px; letter-spacing:0; line-height:1.6; color:var(--faint);
}

/* ── bands ────────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--cap); margin:0 auto; padding-inline:var(--gutter) }
.wrap-wide{ max-width:1320px }
.band{
  position:relative; padding-block:clamp(80px,10vw,120px); overflow:hidden;
  background:var(--ink);
}
.band-ink{ background:var(--ink) }
.band-claim{ padding-block:clamp(96px,12vw,150px) }
.claim{ margin-bottom:clamp(var(--s44),5vw,var(--s64)); max-width:15ch }

.split{ display:grid; gap:clamp(var(--s44),6vw,var(--s96)); align-items:center }
.split-7-5{ grid-template-columns:1.32fr 1fr }
.split-5-7{ grid-template-columns:1fr 1.32fr }
.split-top{ align-items:start }
.goals-head{ max-width:58ch; margin-bottom:clamp(var(--s44),5vw,var(--s64)) }

/* ── the mark ─────────────────────────────────────────────────────────── */
.masthead{
  position:relative; z-index:20; display:flex; align-items:baseline;
  justify-content:space-between; gap:var(--s22);
  padding:var(--s22) var(--gutter);
  background:var(--ink); border-bottom:1px solid var(--hairline);
}
/* the official wordmark, sized by height so it sits on the baseline grid.
   Files live in assets/logo: white, sand white and blue, wordmark and J.
   The deck says white on the dark ground and blue only on paper; sand white
   is used here because every other piece of type on the page is sand white. */
.wordmark{ display:inline-flex; align-items:center; text-decoration:none; line-height:0 }
.wordmark img{ height:26px; width:auto; display:block }
.wordmark-sm img{ height:21px }
.wordmark:hover{ opacity:.88 }

/* ── hero · the photograph is the whole first screen ────────────────── */
.hero{
  position:relative; display:flex; align-items:flex-start;
  background:var(--ink); min-height:clamp(600px,92vh,940px);
  overflow:hidden;
}
.hero-figure{
  position:absolute; inset:0; margin:0;
  /* the hero hands off to the Ink joints band, so its photo feathers out
     at the bottom rather than being cut at the section edge */
  --feather:linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  -webkit-mask-image:var(--feather); mask-image:var(--feather);
}
.hero-figure .photo{ object-position:50% 12% }
/* one plate, anchored to the corner the type sits in. Nothing else ever
   sits on a photograph. */
.hero-plate{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(122% 92% at 0% -8%,
      rgba(7,11,31,.9) 0%, rgba(7,11,31,.72) 28%, rgba(7,11,31,.3) 56%, transparent 78%),
    linear-gradient(180deg, rgba(7,11,31,.54) 0%, transparent 46%, transparent 70%, rgb(7,11,31) 100%);
}
/* sits between the lede and the call to action, where the plate is still
   dark. Further down the photograph is bright enough that sand type cannot
   hold contrast at any opacity, which is why the price lives in the button. */
.hero-compat{
  margin:var(--s16) 0 0;
  display:flex; align-items:center; gap:var(--s8);
  font-size:15px; line-height:1.5; letter-spacing:.01em;
  color:var(--muted);
}
.hero-compat-glyph{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.hero-body{
  position:relative; z-index:3; width:100%;
  padding-block:clamp(var(--s44),5vw,var(--s64));
}
.hero-h1{ font-size:clamp(38px,5.2vw,74px); max-width:12ch }
.hero-h1 span{ display:block }
.hero .lede{ max-width:44ch; margin-top:var(--s22) }
.hero .capture{ margin-top:var(--s30) }

/* ── photography · cast for the blue, then grade. One grade, never two. ── */
.photo{ display:block; width:100%; height:100%; object-fit:cover; object-position:center }
.grade-still  { filter:saturate(1.24) contrast(.99) brightness(1.09) hue-rotate(-3deg) }
.grade-calm   { filter:saturate(1.34) contrast(1.01) brightness(1.07) hue-rotate(-5deg) }
.grade-vibrant{ filter:saturate(1.50) contrast(1.06) brightness(1.05) hue-rotate(-7deg) }
.grade-strong { filter:saturate(1.70) contrast(1.08) brightness(1.06) hue-rotate(-10deg) }
/* A fifth, not in the deck. All four grades above lift a frame, which is right
   for a flat one. A frame that arrives already hot needs the opposite, or the
   highlights clip and it reads blown out. Measured on chamonix.jpg: 16% of
   pixels sat at clipping before any grade, 19% under vibrant, 0% under this. */
.grade-hold   { filter:saturate(1.02) contrast(1.06) brightness(0.90) hue-rotate(-6deg) }

/* ── a photograph behind a band ───────────────────────────────────────
   The band keeps its content and readability; the frame sits behind it as
   atmosphere, held back by a plate so the copy never fights the picture. */
.band-photo{
  position:relative; background:var(--ink);
  /* the plate is lighter here so the frame reads, so the copy carries more
     of its own weight. Measured: this holds body text above 4.5:1 against
     the brightest tenth of each frame. */
  --muted:rgba(251,236,207,.9);
  --faint:rgba(251,236,207,.66);
}

.band-photo > .wrap{ position:relative; z-index:2 }
/* Photograph bands used to end on a hard line: the plate resolved to Ink while
   the bands either side were Deep Field, so every seam was a black-to-blue step.
   Two things fix it. The plate resolves to whatever colour the neighbouring band
   actually is, and the figure is feathered so the photo's texture dissolves
   rather than being cut off. Both ends are set per band, since a band can have
   a different neighbour above and below. */
.band-figure{
  position:absolute; inset:0; margin:0; overflow:hidden;
  --feather:linear-gradient(180deg,
    transparent 0%,
    #000 var(--fade-in, 14%),
    #000 var(--fade-out, 84%),
    transparent 100%);
  -webkit-mask-image:var(--feather); mask-image:var(--feather);
}
.band-plate{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    var(--edge-top, rgb(7,11,31)) 0%,
    var(--veil-top, rgba(7,11,31,.46)) var(--ramp-top, 26%),
    var(--veil-bottom, rgba(7,11,31,.44)) var(--ramp-bottom, 74%),
    var(--edge-bottom, rgb(7,11,31)) 100%);
}
/* the connect band carries a bright frame, so its veil is deeper */
.band-plate-right{
  --veil-top:rgba(7,11,31,.64);
  --veil-bottom:rgba(7,11,31,.62);
}

/* connect and texts run back to back. Their two lower seams are cuts, not
   fades: the photograph runs to the last pixel and the next surface begins,
   with the frame dipping into shadow as it arrives so the join reads as depth
   rather than as an edge. Only the top of connect still dissolves, coming up
   out of the goals band. */
#data, #texts{ background:var(--ink) }
#data .band-plate{
  --edge-bottom:rgba(7,11,31,.93); --ramp-bottom:80%;
}
#texts .band-plate{
  --edge-top:rgba(7,11,31,.93); --ramp-top:20%;
  --edge-bottom:rgba(7,11,31,.93); --ramp-bottom:80%;
}
#data .band-figure{ --fade-out:100% }
#texts .band-figure{ --fade-in:0%; --fade-out:100% }

#texts .band-figure .photo{ object-position:58% 42% }
#data  .band-figure .photo{ object-position:36% 46% }

/* ── grounds ──────────────────────────────────────────────────────────── */
.orb{
  position:absolute; width:min(1100px,120vw); aspect-ratio:1; left:50%; top:-18%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle at 44% 40%,
    rgba(29,74,255,.34) 0%, rgba(29,74,255,.13) 38%, rgba(14,30,91,0) 70%);
  filter:blur(56px); animation:drift 18s var(--ease) infinite alternate;
}
.orb-low{ top:auto; bottom:-46%; opacity:.7 }
@keyframes drift{ from{ transform:translate(-50%,0) scale(1) } to{ transform:translate(-48%,-2.2%) scale(1.045) } }
.vortex{
  position:absolute; inset:auto 0 -30% auto; right:-14%; width:760px; aspect-ratio:1;
  pointer-events:none; opacity:.5;
  background:
    radial-gradient(circle,transparent 0 28%,var(--hairline) 28% calc(28% + 1px),transparent calc(28% + 1px)),
    radial-gradient(circle,transparent 0 40%,rgba(251,236,207,.09) 40% calc(40% + 1px),transparent calc(40% + 1px)),
    radial-gradient(circle,transparent 0 52%,rgba(251,236,207,.06) 52% calc(52% + 1px),transparent calc(52% + 1px));
}
.col-panel{ position:relative }
.col-panel::before{
  content:""; position:absolute; z-index:0; inset:-22% -16%;
  background:radial-gradient(circle at 52% 44%,
    rgba(29,74,255,.42) 0%, rgba(29,74,255,.16) 40%, rgba(14,30,91,0) 72%);
  filter:blur(48px); pointer-events:none; animation:drift 18s var(--ease) infinite alternate;
}
.col-panel > *{ position:relative; z-index:1 }

/* ── liquid glass · one layer maximum, never stacks on glass ─────────── */
.glass{
  position:relative;
  -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10); border-top-color:rgba(255,255,255,.22);
  border-radius:var(--r-panel);
  box-shadow:0 30px 70px -30px rgba(7,11,31,.75), 0 0 60px -30px rgba(29,74,255,.45);
  overflow:hidden;
}
.glass::before{ content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent) }
.glass::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.13) 50%,transparent 66%);
  transform:translateX(-120%); animation:sheen 1900ms var(--ease) 500ms 1 forwards;
}
@keyframes sheen{ to{ transform:translateX(120%) } }
.panel{ padding:clamp(var(--s22),3vw,var(--s30)) }

/* ── actions ──────────────────────────────────────────────────────────── */
.btn{
  appearance:none; border:0; cursor:pointer; border-radius:999px; min-height:44px;
  padding:0 var(--s22); text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:500; font-size:15px;
  transition:opacity 180ms var(--ease), transform 180ms var(--ease); white-space:nowrap;
}
.btn:hover{ opacity:.88 }
.btn:active{ transform:scale(.98) }
.btn:focus-visible{ outline:2px solid var(--flag); outline-offset:3px }
.btn-primary{
  color:var(--accent-ink);
  background:linear-gradient(150deg,#3D63FF 0%,var(--cobalt) 48%,#1338CE 100%);
  box-shadow:0 14px 30px -18px rgba(29,74,255,.65);
}
.btn-wide{ width:100%; margin-top:var(--s8) }

.chip{
  display:inline-flex; align-items:center; gap:var(--s8); border-radius:999px;
  padding:9px 15px; border:1px solid var(--hairline); background:rgba(251,236,207,.05);
  font-size:13px; font-weight:500; color:var(--muted); line-height:1; white-space:nowrap;
}
.chip-count,.chip-flag{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; font-weight:400; padding:7px 13px }
.flag-dot{ width:9px; height:9px; border-radius:999px; background:var(--flag); flex:none }
.chip-src{ font-weight:400; color:var(--faint); background:rgba(251,236,207,.04) }
.chip-goal{ cursor:pointer; min-height:44px; padding:0 var(--s22);
  transition:background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 180ms var(--ease) }
.chip-goal:hover{ opacity:.88 }
.chip-goal:active{ transform:scale(.98) }
.chip-goal:focus-visible{ outline:2px solid var(--flag); outline-offset:3px }
.chip-goal.is-on{
  color:#fff; border-color:transparent;
  background:linear-gradient(150deg,#3D63FF 0%,var(--cobalt) 48%,#1338CE 100%);
  box-shadow:0 12px 30px -16px rgba(29,74,255,.8);
}

.field{
  min-height:44px; min-width:0; width:100%; border-radius:999px; padding:0 var(--s22);
  background:rgba(251,236,207,.06); border:1px solid var(--hairline);
  color:var(--text); font-size:15px;
  transition:border-color 200ms var(--ease), background 200ms var(--ease);
}
.field::placeholder{ color:var(--faint) }
.field:hover{ border-color:rgba(251,236,207,.26) }
.field:focus{ outline:none; border-color:rgba(79,168,255,.55); background:rgba(251,236,207,.08) }
.field.is-bad{ border-color:var(--flag) }
.capture{ margin-top:var(--s44); max-width:520px }
.capture-row{ display:flex; gap:var(--s12); flex-wrap:wrap }
.capture-row .field{ flex:1 1 240px; width:auto }
.capture-note{ margin:var(--s12) 0 0 }
/* it only exists to carry a validation message, so it takes no room until
   there is one to show */
.capture-note:empty{ display:none }
.capture-note.is-bad{ color:var(--flag) }

/* ── readouts ─────────────────────────────────────────────────────────── */
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s16); margin-bottom:var(--s22) }
.group-label{ display:block; margin:0 0 var(--s16) }
.group-label-gap{ margin-top:var(--s30); padding-top:var(--s22); border-top:1px solid var(--hairline) }
.insight{ font-size:17px; line-height:1.6; color:var(--text); margin:var(--s30) 0 0; max-width:44ch }
.radar-panel .insight{ max-width:none; padding-top:var(--s22); border-top:1px solid var(--hairline) }
.insight-lg{ font-size:19px }
.metric{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; line-height:.9; font-variant-numeric:tabular-nums }
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s16); margin-top:var(--s30) }
.tile{ padding-top:var(--s16); border-top:1px solid var(--hairline) }
.tile-read{ display:flex; align-items:baseline; gap:6px; margin-bottom:var(--s8) }
.tile .metric{ font-size:clamp(26px,3vw,38px) }
.tile .unit{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--faint); white-space:nowrap }
.tile .sig{ display:block }

.bars{ display:grid; gap:var(--s16) clamp(var(--s30),4vw,var(--s64)); grid-template-columns:repeat(2,1fr) }
.radar-panel .bars{ grid-template-columns:1fr }
.bar-row{ display:grid; grid-template-columns:minmax(56px,132px) minmax(48px,1fr) 34px; align-items:center; gap:var(--s16) }
.bar-row .sig{ color:var(--muted) }
.bar-track{ display:block; height:6px; border-radius:999px; background:rgba(251,236,207,.09); overflow:hidden }
.bar-fill{ display:block; height:100%; border-radius:999px; width:0;
  transition:width 1500ms var(--ease); box-shadow:inset 0 1px 0 rgba(255,255,255,.45) }
.bar-val{ font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:-.02em;
  text-align:right; font-variant-numeric:tabular-nums; color:var(--muted) }

/* the drift line · a flag, not an alarm */
.spark{ width:100%; height:52px; display:block; overflow:visible }
.spark-line{ fill:none; stroke:var(--flag); stroke-width:1.6; stroke-linecap:round;
  stroke-linejoin:round; vector-effect:non-scaling-stroke }
.js .spark-line{ stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset 1500ms var(--ease) }
.js .is-in .spark-line{ stroke-dashoffset:0 }
.spark-foot{ display:flex; justify-content:space-between; margin-top:var(--s8) }

/* ── thread ───────────────────────────────────────────────────────────── */
.thread{ border-radius:var(--r-hero); padding:var(--s22);
  background:linear-gradient(168deg,#081231 0%,#0A1740 100%); border:1px solid var(--hairline) }
.thread-head{ display:flex; align-items:center; gap:var(--s12); padding-bottom:var(--s16);
  margin-bottom:var(--s22); border-bottom:1px solid var(--hairline) }
.thread-av{ width:30px; height:30px; border-radius:999px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,#1B3474,#0C1C52); border:1px solid var(--hairline) }
.thread-av img{ height:15px; width:auto; display:block }
.msgs{ display:flex; flex-direction:column; gap:var(--s12) }
.msg{ max-width:82%; padding:13px var(--s16); border-radius:20px; font-size:15px; line-height:1.55 }
.js .msg{ opacity:0; transform:translateY(8px); animation:msgin 400ms var(--ease) forwards }
.msg-in{ align-self:flex-start; border-bottom-left-radius:7px;
  background:rgba(251,236,207,.08); color:var(--text); border:1px solid var(--hairline) }
.msg-out{ align-self:flex-end; border-bottom-right-radius:7px; color:#fff;
  background:linear-gradient(150deg,#3D63FF,var(--cobalt)) }
.msg .sig{ display:block; margin-bottom:6px }
.msg-out .sig{ color:rgba(255,255,255,.6) }
@keyframes msgin{ to{ opacity:1; transform:none } }

.freq{ display:flex; align-items:center; gap:var(--s16); margin-top:var(--s30); flex-wrap:wrap }
.freq-track{ display:inline-flex; gap:var(--s4); padding:var(--s4); border-radius:999px;
  border:1px solid var(--hairline); background:rgba(251,236,207,.04) }
.freq-opt{ appearance:none; border:0; background:transparent; cursor:pointer; border-radius:999px;
  padding:9px var(--s16); min-height:36px; font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; color:var(--faint); transition:background 200ms var(--ease), color 200ms var(--ease) }
.freq-opt:hover{ opacity:.88 }
.freq-opt:focus-visible{ outline:2px solid var(--flag); outline-offset:2px }
.freq-opt.is-on{ color:#fff;
  background:linear-gradient(150deg,#3D63FF 0%,var(--cobalt) 48%,#1338CE 100%);
  box-shadow:0 10px 24px -16px rgba(29,74,255,.8) }

/* ── the ask examples ─────────────────────────────────────────────────
   Metrics taken from the reference page so the rhythm matches: a 632px
   column, 56px between examples, label 15/650, the sent bubble 15/400 and
   the answer 17.5/400. The answer is plain text beside the bubble, not a
   second bubble, which is what makes the exchange read as a reply rather
   than a chat mockup. Ours runs on the dark ground in Host Grotesk. */
/* 632px of content, so the gutter sits outside it */
.ask-wrap{ max-width:calc(632px + var(--gutter) * 2); margin-inline:auto }
.ask-head{ margin-bottom:clamp(var(--s44),6vw,88px) }
.ask-intro{
  margin:var(--s22) 0 0; max-width:52ch;
  font-size:16px; line-height:1.6; color:var(--muted);
}

.asks{ list-style:none; margin:0; padding:0; display:grid; gap:56px }
.ask{ max-width:none }
.ask-label{
  font-family:var(--sans); font-weight:650; font-size:15px; line-height:1.65;
  letter-spacing:-.005em; color:var(--text); margin:0 0 var(--s16);
}
.ask-thread{ display:block }
/* the thing you typed, sitting where a sent message sits */
.ask-q{
  margin:0 0 var(--s16); margin-left:auto; width:fit-content; max-width:78%;
  padding:9px 14px; border-radius:18px 18px 5px 18px;
  background:rgba(251,236,207,.09); border:1px solid var(--hairline);
  color:var(--text); font-size:15px; line-height:1.5;
}
/* the reply, plain text at reading size */
.ask-a{
  margin:0; max-width:88%;
  font-weight:400; font-size:17.5px; line-height:1.55;
  letter-spacing:-.005em; color:var(--text);
}
/* something you sent across, sitting where a sent message sits */
.ask-file{
  margin:0 0 var(--s16); margin-left:auto; width:fit-content; max-width:78%;
  display:flex; align-items:center; gap:var(--s12);
  padding:10px 14px; border-radius:18px 18px 5px 18px;
  background:rgba(251,236,207,.09); border:1px solid var(--hairline);
}
.ask-file-icon{
  width:20px; height:20px; flex:none; fill:none;
  stroke:var(--muted); stroke-width:1.5; stroke-linejoin:round;
}
.ask-file-meta{ display:grid; gap:2px; min-width:0 }
.ask-file-name{ font-size:14px; line-height:1.35; color:var(--text); word-break:break-all }

.ask-note{
  margin:14px 0 0; max-width:475px;
  font-family:var(--sans); font-size:13px; line-height:1.65;
  /* the usual faint tint sits too close to the reply here. At 58% on Ink it
     reads 6.4:1 and still stays clearly behind it. */
  color:rgba(251,236,207,.58);
}
.ask-chart{
  margin:var(--s22) 0 0; padding:var(--s16) var(--s22) var(--s12);
  border:1px solid var(--hairline); border-radius:var(--r-md);
  background:rgba(251,236,207,.04); max-width:88%;
}
.ask-chart figcaption{ display:block; margin-bottom:var(--s12) }
.ask-chart-foot{ display:flex; justify-content:space-between; margin-top:6px }
.ask-plot{ position:relative }
.ask-plot svg{ display:block; width:100%; height:84px; overflow:visible }
.plot-band{ fill:rgba(251,236,207,.07) }
.plot-line{
  fill:none; stroke:var(--sand); stroke-width:1.6; stroke-linecap:round;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
/* The one cobalt signal on this surface. It sits outside the svg because
   that is stretched to fill the card, which would squash a circle. */
.plot-dot{
  position:absolute; left:95%; top:18.75%; width:10px; height:10px;
  margin:-5px 0 0 -5px; border-radius:999px;
  background:var(--cobalt); box-shadow:0 0 0 1.5px var(--sand);
}
.plot-now{ position:absolute; right:8%; top:0; color:var(--muted) }
.plot-band-label{ position:absolute; right:10px; top:66%; color:var(--faint) }
.js .plot-line{ stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset 1500ms var(--ease) }
.js .is-in .plot-line{ stroke-dashoffset:0 }
.js .plot-dot{ opacity:0; transition:opacity 300ms var(--ease) 1400ms }
.js .is-in .plot-dot{ opacity:1 }

@media (max-width:560px){
  .asks{ gap:var(--s44) }
  .ask-q{ max-width:88%; font-size:14px }
  .ask-a{ font-size:16.5px; max-width:100% }
  .ask-chart{ max-width:100% }
}

/* ── lists and sources ────────────────────────────────────────────────── */
.ticks{ list-style:none; margin:var(--s30) 0 0; padding:0; display:grid; gap:var(--s12) }
.ticks li{ padding-top:var(--s12); border-top:1px solid var(--hairline);
  color:var(--muted); font-size:15px; line-height:1.6 }
.sources{ display:flex; flex-wrap:wrap; gap:var(--s12); margin-top:var(--s30) }
.connect{ max-width:64ch }
.connect .body{ max-width:56ch }
.goal-chips{ display:flex; flex-wrap:wrap; gap:var(--s12); margin-bottom:var(--s30) }
.goal-stage{ position:relative }
.goal-stage::before{
  content:""; position:absolute; z-index:0; inset:-24% -8%;
  background:radial-gradient(circle at 68% 46%,
    rgba(29,74,255,.38) 0%, rgba(29,74,255,.14) 40%, rgba(14,30,91,0) 72%);
  filter:blur(52px); pointer-events:none; animation:drift 18s var(--ease) infinite alternate;
}
.goal-stage > *{ position:relative; z-index:1 }
.goal-panel.is-swapping .tiles,.goal-panel.is-swapping .bars,.goal-panel.is-swapping .insight-lg{ opacity:0; transform:translateY(6px) }
.tiles,.bars,.insight-lg{ transition:opacity 260ms var(--ease), transform 260ms var(--ease) }
.goal-note{ margin:var(--s22) 0 0 }
.goal-ask .field{ max-width:520px }

.join-form{ display:grid; gap:var(--s30) }
.fieldset{ display:grid; gap:var(--s12) }
.lbl{ color:var(--muted) }
.done{ display:grid; gap:var(--s16); animation:msgin 400ms var(--ease) forwards }
.done .display{ font-size:clamp(24px,3vw,34px) }
.done .body{ margin-top:0 }

.foot{ background:var(--ink); padding-block:var(--s64); border-top:1px solid var(--hairline) }
.foot-wrap{ display:grid; gap:var(--s22) }
.foot-note{ margin:0; max-width:62ch }
.foot-meta{ margin:0; opacity:.7 }

/* ── motion ───────────────────────────────────────────────────────────── */
.js .stagger{ opacity:0; transform:translateY(14px); animation:rise 700ms var(--ease) forwards }
.js .stagger:nth-child(1){ animation-delay:80ms }
.js .stagger:nth-child(2){ animation-delay:180ms }
.js .stagger:nth-child(3){ animation-delay:280ms }
.hero-h1 .stagger{ animation-delay:120ms }
.hero-h1 .stagger:nth-child(2){ animation-delay:220ms }
@keyframes rise{ to{ opacity:1; transform:none } }
.js .reveal{ opacity:0; transform:translateY(18px) scale(.99) }
.reveal.is-in{ opacity:1; transform:none; transition:opacity 400ms var(--ease), transform 400ms var(--ease) }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .split,.split-7-5,.split-5-7{ grid-template-columns:1fr }
  .split-5-7 .col-panel{ order:2 }
  .tiles{ grid-template-columns:repeat(2,1fr) }
  .bars{ grid-template-columns:1fr }
  .hero{ min-height:clamp(560px,92vh,860px) }
  .hero-figure .photo{ object-position:24% 50% }
  /* A portrait viewport shows the whole frame, reflection and all. The empty
     part is then the water at the bottom, not the sky, so the type moves down
     to meet it and the peaks and runners are left alone. */
  .hero{ align-items:flex-end }
  .hero-plate{
    background:linear-gradient(180deg,
      rgba(7,11,31,.4) 0%, rgba(7,11,31,.08) 20%,
      rgba(7,11,31,.12) 40%, rgba(7,11,31,.68) 64%, rgba(7,11,31,.95) 100%);
  }
  .hero-body{ padding-bottom:clamp(var(--s44),9vw,var(--s64)) }
  .hero-h1{ font-size:clamp(34px,7.6vw,52px); max-width:14ch }
  .vortex{ display:none }
}
@media (max-width:560px){
  body{ font-size:16px }
  .capture-row .btn{ width:100% }
  .capture-row .field{ flex:1 1 100% }
  .panel-head{ flex-direction:column; align-items:flex-start; gap:var(--s12) }
  .bar-row{ grid-template-columns:1fr auto; gap:7px var(--s12) }
  .bar-row .sig{ grid-column:1; grid-row:1 }
  .bar-val{ grid-column:2; grid-row:1 }
  .bar-track{ grid-column:1 / -1; grid-row:2 }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important }
  .js .stagger,.js .reveal,.js .msg{ opacity:1 !important; transform:none !important }
  .glass::after{ display:none }
  .orb{ animation:none }
}