/* FM-Talk — every value comes from tokens.css (generated from data/design.yml). No hex here, no raw ms. */
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;color:var(--ink);font:var(--fw-regular) var(--fs-md)/1.55 var(--font);
  background:var(--grain), radial-gradient(1200px 520px at 0% -10%, var(--wash), transparent 60%), var(--paper);
  -webkit-font-smoothing:antialiased}
a{color:var(--given);text-underline-offset:3px}
code{font:var(--fs-sm) var(--mono);background:var(--wash);padding:1px 6px;border-radius:var(--r-sm)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}

/* ── header ─────────────────────────────────────────────────────────── */
header{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s4) var(--s6);
  border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--paper) 86%, transparent);backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:var(--s3);font-weight:var(--fw-bold);font-size:var(--fs-lg);letter-spacing:-.01em}
.brand small{font-weight:var(--fw-regular);color:var(--mute);font-size:var(--fs-sm)}
.dot{width:12px;height:12px;border-radius:var(--r-pill);background:var(--focus);box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent)}
.who{display:flex;align-items:center;gap:var(--s2);color:var(--mute);font-size:var(--fs-sm)}
.who input{border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 12px;font:inherit;background:var(--card);width:190px;color:var(--ink)}

#banner div{background:var(--given);color:var(--on-color);padding:var(--s2) var(--s6);font-size:var(--fs-sm)}

/* ── hero numbers + the loop ring ───────────────────────────────────── */
.ns{display:flex;gap:var(--s6);align-items:center;flex-wrap:wrap;padding:var(--s5) var(--s6) var(--s4)}
.ns .big{font-size:var(--fs-xxl);font-weight:var(--fw-bold);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.ns .lab{color:var(--mute);font-size:var(--fs-sm)}
.ring{width:64px;height:64px}
.ring circle{fill:none;stroke-width:7}
.ring .track{stroke:var(--line)}
.ring .fill{stroke:var(--focus);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset var(--t-reveal) var(--ease-out)}
.ring.closed .fill{stroke:var(--done)}
.ns select{font:inherit;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 12px;background:var(--card);color:var(--ink)}

/* ── navigation: 7 tabs you need, the rest under More ───────────────── */
nav{display:flex;gap:var(--s1);padding:0 var(--s6);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:flex-end}
nav button{position:relative;border:0;background:none;padding:var(--s3) var(--s3);font:inherit;color:var(--mute);cursor:pointer;
  transition:color var(--t-fast) var(--ease)}
nav button::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:-1px;height:2px;border-radius:2px;background:var(--focus);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)}
nav button:hover{color:var(--ink)}
nav button.on{color:var(--ink);font-weight:var(--fw-medium)}
nav button.on::after{transform:scaleX(1)}
nav .more{margin-left:auto;color:var(--mute);font-size:var(--fs-sm);padding-bottom:var(--s3)}
nav .sub{font-size:var(--fs-sm)}

main{padding:var(--s5) var(--s6);max-width:1200px}

/* ── surfaces ───────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4) var(--s5);margin:0 0 var(--s4);
  box-shadow:var(--sh-card);transition:box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease)}
.card:hover{box-shadow:var(--sh-lift)}
.card h3{margin:0 0 var(--s2);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.01em}
.card h3 + .sub, .lede{color:var(--mute);font-size:var(--fs-sm);margin:-2px 0 var(--s3)}
.mute{color:var(--mute)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s4)}

/* ── the nine steps ─────────────────────────────────────────────────── */
.stage{display:grid;grid-template-columns:36px 160px 1fr auto;gap:var(--s3);align-items:start;padding:var(--s3) 0;border-top:1px solid var(--line)}
.stage:first-of-type{border-top:0}
.mark{width:28px;height:28px;border-radius:var(--r-pill);display:grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-sm);
  color:var(--on-color);background:var(--line-2);transition:background var(--t-base) var(--ease), transform var(--t-base) var(--ease-out)}
.mark.ok{background:var(--done)}
.mark.no{background:var(--focus)}
.mark.stamp{animation:stamp var(--t-slow) var(--ease-out)}
@keyframes stamp{0%{transform:scale(.4) rotate(-12deg)}60%{transform:scale(1.18) rotate(3deg)}100%{transform:scale(1) rotate(0)}}

.pill{display:inline-block;border-radius:var(--r-pill);padding:2px 10px;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--on-color);
  letter-spacing:.02em;white-space:nowrap}
.ok{background:var(--done)}.no{background:var(--focus)}.adv{background:var(--given)}.ink{background:var(--ink)}

/* ── forms + controls ───────────────────────────────────────────────── */
details{margin-top:var(--s2)}
summary{cursor:pointer;color:var(--given);font-size:var(--fs-sm);list-style:none}
summary::before{content:"+ ";font-weight:var(--fw-bold)}
details[open] summary::before{content:"– "}
form.ev{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:end;margin:var(--s3) 0;padding:var(--s3);background:var(--wash);border-radius:var(--r-md)}
form.ev label{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-xs);color:var(--mute)}
form.ev input,form.ev select,form.ev textarea{font:inherit;font-size:var(--fs-sm);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 9px;
  background:var(--card);color:var(--ink);min-width:130px;transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
form.ev input:focus,form.ev textarea:focus,form.ev select:focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);outline:none}
form.ev textarea{min-width:440px;min-height:70px}
button.act{background:var(--ink);color:var(--on-color);border:0;border-radius:var(--r-pill);padding:8px 16px;font:inherit;font-weight:var(--fw-medium);
  font-size:var(--fs-sm);cursor:pointer;transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
button.act:hover{background:var(--focus)}
button.act:active,button.ghost:active{transform:scale(.97)}
button.ghost{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:5px 12px;font:inherit;font-size:var(--fs-sm);
  cursor:pointer;color:var(--ink);transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
button.ghost:hover{border-color:var(--focus);color:var(--focus)}

table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
td,th{border-top:1px solid var(--line);padding:var(--s2) var(--s3);text-align:left;vertical-align:top}
th{color:var(--mute);font-weight:var(--fw-medium);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;border-top:0}
textarea.cap{width:100%;min-height:200px;font:var(--fs-sm)/1.5 var(--mono);border:1px solid var(--line-2);border-radius:var(--r-md);padding:var(--s3);background:var(--card)}
.quote{font:var(--fs-xs) var(--mono);color:var(--mute);background:var(--wash);padding:4px 8px;border-radius:var(--r-sm);border-left:3px solid var(--line-2)}
.moment{margin:var(--s2) 0 0;padding:var(--s2) var(--s3);border-left:3px solid var(--focus);background:var(--wash);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm);font-style:italic;color:var(--ink)}
.kpi .v{font-size:var(--fs-xl);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.kpi .k{color:var(--mute);font-size:var(--fs-xs)}
.hyp{font-size:var(--fs-lg);line-height:1.5}
.seg{padding:var(--s2) var(--s3);border-radius:var(--r-sm);margin:var(--s1) 0;transition:background var(--t-base) var(--ease)}
.seg.now{background:var(--focus);color:var(--on-color)}
.leg{font-size:var(--fs-xxl);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.bar{height:8px;background:var(--wash);border-radius:var(--r-pill);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--focus);border-radius:var(--r-pill);transition:width var(--t-reveal) var(--ease-out)}
svg text{font:var(--fs-xs) var(--font);fill:var(--ink)}
.empty{color:var(--mute);font-style:italic}

/* ── entrance: a cascade, never a mass appearance (animate-anything's LaggedStart) ── */
.cascade > *{opacity:0;transform:translateY(6px);animation:rise var(--t-slow) var(--ease-out) forwards;animation-delay:calc(var(--i, 0) * var(--t-stagger))}
@keyframes rise{to{opacity:1;transform:none}}

/* ── toast + celebration ────────────────────────────────────────────── */
#toast{position:fixed;bottom:var(--s5);right:var(--s5);background:var(--ink);color:var(--on-color);padding:var(--s3) var(--s4);border-radius:var(--r-md);
  display:none;max-width:480px;box-shadow:var(--sh-lift);font-size:var(--fs-sm)}
#toast.show{display:block;animation:rise var(--t-base) var(--ease-out)}
#toast.err{background:var(--tension)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:20}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:fall var(--t-reveal) var(--ease) forwards}
@keyframes fall{to{transform:translateY(60vh) rotate(260deg);opacity:0}}
footer{padding:var(--s4) var(--s6);color:var(--mute);font-size:var(--fs-xs);border-top:1px solid var(--line);margin-top:var(--s6)}

/* ── ask-first home: one question, one answer, what else you could ask ── */
.brand{text-decoration:none;color:var(--ink)}
#menu{position:relative}
#menu > summary{list-style:none;cursor:pointer;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 14px;font-size:var(--fs-sm);
  color:var(--ink);background:var(--card);transition:border-color var(--t-fast) var(--ease)}
#menu > summary::-webkit-details-marker{display:none}
#menu > summary::before{content:""}
#menu[open] > summary,#menu > summary:hover{border-color:var(--focus)}
#menu .menu{position:absolute;right:0;top:calc(100% + var(--s2));width:min(560px, 92vw);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-lift);padding:var(--s3);z-index:10;animation:rise var(--t-base) var(--ease-out)}
#menu nav{border:0;padding:var(--s2) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1)}
#menu nav button{text-align:left;border-radius:var(--r-sm);padding:var(--s2) var(--s3)}
#menu nav button::after{display:none}
#menu nav button:hover,#menu nav button.on{background:var(--wash);color:var(--ink)}
.home{max-width:760px;margin:var(--s7) auto var(--s5);text-align:center}
.home .status{color:var(--mute);font-size:var(--fs-sm);margin:0 0 var(--s3)}
.home h1{font-size:var(--fs-xxl);letter-spacing:-.02em;margin:0 0 var(--s5);font-weight:var(--fw-bold)}
.askbar{display:flex;gap:var(--s2);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:var(--s2) var(--s2) var(--s2) var(--s5);
  box-shadow:var(--sh-card);transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease)}
.askbar:focus-within{border-color:var(--focus);box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 15%, transparent), var(--sh-lift)}
.askbar input{flex:1;border:0;outline:none;font:inherit;font-size:var(--fs-lg);background:transparent;color:var(--ink);min-width:0}
.chips,.follow{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s4)}
.follow{justify-content:flex-start;align-items:center;margin-top:var(--s4)}
.follow .mute{font-size:var(--fs-xs);margin-right:var(--s1)}
.chip{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:7px 14px;font:inherit;font-size:var(--fs-sm);color:var(--ink);
  cursor:pointer;transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.chip:hover{border-color:var(--focus);background:var(--wash)}
.chip:active{transform:scale(.97)}
.answer{max-width:760px;margin:0 auto var(--s6);padding:var(--s5) var(--s6)}
.answer .asked{color:var(--mute);font-size:var(--fs-sm);margin-bottom:var(--s2)}
.answer .asked::before{content:"You asked · "}
.answer h2{font-size:var(--fs-xl);line-height:1.3;margin:0 0 var(--s3);letter-spacing:-.01em}
.answer .number{display:inline-block;font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--focus);font-variant-numeric:tabular-nums;margin-bottom:var(--s3)}
.answer .primary{margin:var(--s2) 0}
.answer .more{margin-top:var(--s3)}
.answer .more summary{font-size:var(--fs-sm)}
.answer .more ul{margin:var(--s2) 0 0;padding-left:var(--s5);color:var(--ink);font-size:var(--fs-sm)}
.home .cant{color:var(--mute);font-size:var(--fs-xs);margin:var(--s5) auto 0;max-width:520px}
.answer .basis{color:var(--mute);font-size:var(--fs-xs);margin:var(--s2) 0 0}
.answer .basis::before{content:"◆ ";color:var(--given)}