/* askhigsby.com · Higsby
   One deliberate visual world: a dark ink page, and on it a warm-paper app you can use.
   Purple means "your move" and nothing else. Green means good, a go; red means out of range, a no-go.
   Scale: the page is sized in px. Everything inside the app is sized in rem, and the root font-size is the app's
   scale (--s): beside the copy on a desktop the app is 80% of its full size, like a device zoomed out, with text
   floors (13px body, 11px small labels). Phones, tablets and touch screens keep the full size. */

:root{
  --s:1; font-size:calc(var(--s) * 100%);
  /* page (always dark) */
  --pg:#121014; --pg-2:#1c1920; --pg-3:#27232c; --pg-ink:#f3efe7; --pg-ink-2:#dcd6cc; --pg-muted:#aaa49b;
  --pg-rule:rgb(243 239 231 / .12); --pg-rule-2:rgb(243 239 231 / .3); --pg-dot:#a291ff; --pg-em:#c3b8ff;
  --pg-tint:rgb(162 145 255 / .14); --glow:rgb(124 104 255 / .46); --glow-day:rgb(255 238 196 / .4);
  /* faces */
  --serif:"Source Serif 4","Source Serif Pro",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* motion */
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.65,0,.25,1);
  /* page gutter */
  --gut:40px;
  color-scheme:dark;
  background:var(--pg);
}
@media (min-width:901px) and (pointer:fine){:root{--s:.8}}

/* the app surface (always paper) */
.app{
  --bg:#faf8f3; --sheet:#fffdf9; --wash:#f3f0e8; --wash-2:#ebe7de;
  --ink:#18161b; --ink-2:#3a3741; --muted:#5f5c66;
  --rule:#e4e0d6; --rule-2:#d1ccc1; --field:#8a857b;
  --ring:#8f897c; --dot-gray:#77726a;
  --dot:#6a55d6; --go:#2f7a4f; --fail:#b8382a; --in:#1e6b3f; --out:#a5321f;
  --btn-bg:#18161b; --btn-fg:#faf8f3; --btn-hover:#2c2930;
  --slab-bg:#fefcf8; --slab-edge:#b7b1a5; --slab-label:#f5f2eb; --slab-face:#f8f6f0;
  --slab-lift:0 1px 0 var(--rule),0 1.125rem 1.875rem -1.5rem rgb(40 34 24 / .45);
  --tap:2.75rem; --sig-bg:var(--bg);
  color-scheme:light;
}
/* DAYLIGHT: Show Mode at the table. Brighter paper, darker ink, bigger targets. */
.app[data-daylight]{
  --bg:#fffefb; --sheet:#ffffff; --wash:#f4f1e9; --wash-2:#e9e4d8;
  --ink:#0b0a0d; --ink-2:#1d1b21; --muted:#3d3a43;
  --rule:#c9c2b4; --rule-2:#9b9487; --field:#4f4a42;
  --ring:#5a554c; --dot-gray:#4f4a42;
  --dot:#4b33c4; --go:#1b6a3c; --fail:#a3271a; --in:#13552f; --out:#8c2213;
  --btn-bg:#0b0a0d; --btn-fg:#fffefb; --btn-hover:#26232b; --tap:3rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--pg);color:var(--pg-ink);font:400 16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ol,ul,fieldset,legend{margin:0;padding:0}
ol,ul{list-style:none}
fieldset{border:0;min-width:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;
  -webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
input{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--pg-ink);outline-offset:3px;border-radius:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:9;background:var(--pg-ink);color:var(--pg);padding:12px 16px;
  border-radius:6px;font-weight:500;text-decoration:none}
.skip:focus{top:12px}

/* ---------- page frame ---------- */
.wrap{max-width:1400px;margin-inline:auto;padding-inline:var(--gut)}
/* a section rule that spans the content, not the gutters */
.rule{position:relative}
.rule::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:var(--pg-rule)}
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;
  min-height:72px;padding-block:14px}
.top-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;
  max-width:100%;margin-left:auto}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 12px;border:1px solid var(--pg-rule-2);border-radius:6px;font:500 13px/1.3 var(--sans);
  color:var(--pg-ink-2)}
.motion-toggle:hover{border-color:var(--pg-ink);background:var(--pg-2)}
.motion-toggle[aria-disabled="true"]{cursor:default}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;
  font:600 25px/1 var(--sans);letter-spacing:-.045em;color:var(--pg-ink)}
.brand svg{width:28px;height:28px;flex:none}
.mark-ring{fill:none;stroke:currentColor}
.mark-dot{fill:var(--pg-dot);stroke:var(--pg);stroke-width:1.6}
.top-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--pg-rule-2);
  border-radius:6px;font:500 14.5px/1 var(--sans);text-decoration:none;color:var(--pg-ink);
  transition:border-color .2s,background-color .2s}
.top-cta:hover{border-color:var(--pg-ink);background:var(--pg-2)}

/* the app's column is its full-size share (59%) times the scale, so the space it frees goes to the copy */
.hero{--gap:clamp(32px,4.2vw,68px);--app:.59;display:grid;align-items:center;gap:var(--gap);
  grid-template-columns:minmax(0,1fr) calc((100% - var(--gap)) * var(--app) * var(--s));
  padding-block:4px 36px;overflow-x:clip}

/* ---------- left: the owner's three lines, with the three actions inside them ---------- */
.copy{max-width:680px}
.copy h1{font:400 clamp(46px,5vw,76px)/.98 var(--serif);letter-spacing:-.035em;text-wrap:balance;margin-bottom:24px}
.copy h1 em{font-style:italic;color:var(--pg-em)}
.lede{font:400 clamp(19px,1.5vw,22px)/1.6 var(--sans);letter-spacing:-.01em;margin-bottom:18px;
  color:var(--pg-ink-2);text-wrap:pretty}
/* the actions read as part of the sentences, as on the original site: bold, a purple underline, a lavender
   highlight on hover and while their flow is open. A button stays one inline box, so a long phrase wraps whole. */
.act{display:inline-block;min-height:44px;padding:7px .14em;margin:0 -.14em;
  border:0;border-radius:4px;background:transparent;
  font:inherit;font-weight:600;letter-spacing:-.015em;line-height:1.45;color:var(--pg-ink);text-align:left;
  cursor:pointer;text-decoration:underline 2px var(--pg-dot);text-underline-offset:.24em;
  transition:background-color .2s,color .2s,text-decoration-color .2s}
.act{position:relative}
.act:hover{background:rgb(162 145 255 / .18)}
.act[aria-current="true"]{background:rgb(162 145 255 / .26);color:var(--pg-em);text-decoration-color:var(--pg-em)}
.act:focus-visible{outline-offset:3px}
/* the actions breathe all the time, so they read as interactive: the three highlights in turn, top to bottom. The
   open flow's phrase holds its highlight, and hover or focus stops the breathing. Reduced motion: a still tint. */
.act[data-flow="sell"]{--cue-d:.45s}
.act[data-flow="vend"]{--cue-d:.9s}
.act:not([aria-current="true"]):not(:hover):not(:focus-visible){background:rgb(162 145 255 / .12);
  animation:act-breathe 2.8s ease-in-out var(--cue-d,0s) infinite}
@keyframes act-breathe{0%,100%{background-color:rgb(162 145 255 / .02)}50%{background-color:rgb(162 145 255 / .24)}}

.access{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:28px}
.access p{font-size:14.5px;color:var(--pg-muted)}
.cta{display:inline-flex;align-items:center;gap:16px;min-height:52px;padding:0 22px;border-radius:6px;
  background:var(--pg-ink);color:var(--pg);font:500 16px/1 var(--sans);text-decoration:none;
  transition:background-color .2s,transform .14s var(--ease-out)}
.cta span{font:400 21px/1 var(--serif);transition:transform .25s var(--ease-out)}
.cta:hover{background:#fff}
.cta:hover span{transform:translateX(3px)}
.cta:active{transform:translateY(1px)}

/* ---------- right: the app on a soft signal glow ---------- */
.stage{position:relative;min-width:0;isolation:isolate}
.stage::before{content:"";position:absolute;inset:-12% -5% -12% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow) 55%,rgb(124 104 255 / 0) 100%)}
.stage:has(.app[data-daylight])::before{
  background:radial-gradient(closest-side,var(--glow-day) 55%,rgb(255 238 196 / 0) 100%)}

.app{position:relative;width:100%;height:clamp(37.5rem,calc((100svh - 108px) * var(--s)),50rem);display:flex;
  flex-direction:column;background:var(--bg);color:var(--ink);border-radius:1.125rem;overflow:clip;font-size:1rem;
  box-shadow:0 0 0 1px rgb(255 255 255 / .07),0 2.5rem 6.25rem -1.875rem rgb(0 0 0 / .85),
    0 2px .625rem rgb(0 0 0 / .3);
  container:app / inline-size;transition:background-color .4s,box-shadow .4s}
.app:focus{outline:none}
.app:focus-visible{outline:2px solid var(--pg-ink);outline-offset:4px}
.app[data-daylight]{
  box-shadow:0 0 0 .25rem #fffefb,0 0 5.625rem .75rem var(--glow-day),0 2.5rem 6.25rem -1.875rem rgb(0 0 0 / .85)}
.app[data-daylight]::after{content:"";position:absolute;inset:0;border:3px solid var(--ink);border-radius:inherit;
  pointer-events:none;z-index:4}
.app :focus-visible{outline-color:var(--ink)}
.app-bar{display:flex;align-items:center;gap:.625rem;min-height:3.75rem;padding:.5rem .75rem .5rem 1.125rem;flex:none;
  border-bottom:1px solid var(--rule);background:var(--bg);color:var(--ink);transition:background-color .4s,color .4s}
.app-brand{display:inline-flex;align-items:center;gap:.5rem;font:600 1.125rem/1 var(--sans);letter-spacing:-.04em}
.app-brand svg{width:1.25rem;height:1.25rem}
.app-brand .mark-dot{fill:var(--dot);stroke:var(--bg)}
/* the one honest marker inside the app: a small "demo" beside the name */
.demo-w{font:500 max(11px,.75rem)/1 var(--sans);letter-spacing:.02em;color:var(--muted)}
.pill{display:inline-block;padding:.25rem .625rem;border:1px solid var(--rule-2);border-radius:999px;
  font:500 max(11px,.75rem)/1.2 var(--sans);color:var(--muted);white-space:nowrap}
.restart{margin-left:auto;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .875rem;flex:none;
  border:1px solid var(--field);border-radius:.375rem;font:500 max(13px,.875rem)/1 var(--sans);
  transition:background-color .2s,border-color .2s}
.restart:hover{background:var(--wash);border-color:var(--ink)}
/* Show Mode turns the bar to ink so the switch to daylight is unmistakable */
.app[data-daylight] .app-bar{background:var(--ink);color:var(--bg);border-bottom-color:var(--ink)}
.app[data-daylight] .app-brand .mark-dot{stroke:var(--ink);fill:#b9acff}
.app[data-daylight] .pill{color:var(--ink);background:#ffe9a8;border-color:#ffe9a8;font-weight:600}
.app[data-daylight] .demo-w{color:rgb(255 254 251 / .72)}
.app[data-daylight] .restart{border-color:rgb(255 254 251 / .6)}
.app[data-daylight] .restart:hover{background:rgb(255 254 251 / .12);border-color:var(--bg)}
.app[data-daylight] .app-bar :focus-visible{outline-color:var(--bg)}
.app-status{display:flex;align-items:center;gap:.75rem;min-height:3.25rem;padding:.5rem 1.125rem;flex:none;
  border-bottom:1px solid var(--rule);background:var(--sheet);--sig-bg:var(--sheet)}
.app-status .words{font:500 max(13px,.90625rem)/1.35 var(--sans)}
.app-status .when{color:var(--muted);font-weight:400;white-space:nowrap}
/* both-edges keeps the screens centred where scrollbars take space; the padding keeps focus rings in view */
.app-body{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;scroll-padding-block:.75rem}
.nojs{padding:1.5rem;font-size:max(13px,.9375rem);color:var(--muted)}

/* the pinned action dock: always opaque, never over content */
/* one height in every state (the primary button's), so the screen above never jumps */
.dock{flex:none;display:flex;align-items:center;gap:.75rem;
  min-height:calc(4.8125rem + env(safe-area-inset-bottom,0px));
  padding:.75rem clamp(1rem,4.5cqi,2.125rem) calc(.75rem + env(safe-area-inset-bottom,0px));
  background:var(--bg);border-top:1px solid var(--rule);position:relative;z-index:2}
.dock .btn{margin-left:auto}
.dock-note{margin-left:auto;font:400 max(13px,.84375rem)/1.35 var(--sans);color:var(--muted);text-align:right;
  min-width:0}
.dock-note + .btn{margin-left:0}

/* ---------- the signal (ring + dot), drawn per instance; motion is CSS only ---------- */
.sig{--sig-ring:var(--ring);--sig-gray:var(--dot-gray);--sig-purple:var(--dot);--sig-glyph:var(--ink-2);
  display:block;flex:none;overflow:visible}
.sig-ring{fill:none;stroke:var(--sig-ring)}
.sig-arc{fill:none;stroke:var(--ink);stroke-linecap:round;transform:rotate(-90deg)}
.sig-knock{fill:var(--sig-bg)}
.sig-dot{fill:var(--sig-gray);transform-box:fill-box;transform-origin:center}
.sig-halo{fill:var(--sig-purple);opacity:0;transform-box:fill-box;transform-origin:center}
.sig-gl{fill:none;stroke:var(--sig-glyph);stroke-linecap:round;stroke-linejoin:round}
.sig-gl .fl{fill:var(--sig-glyph);stroke:none}
.sig-fill{fill:var(--go);transform-box:fill-box;transform-origin:center;
  animation:sig-settle .8s cubic-bezier(.3,.8,.2,1) backwards}
.sig:is([data-s="ready"],[data-s="draft"],[data-s="accepted"],[data-s="paid"],[data-s="handed"]) .sig-dot{
  fill:var(--sig-purple)}
.sig[data-s="ready"][data-m="still"] .sig-halo{opacity:.16;transform:scale(2.1)}
/* every signal motion ends within 5 seconds; the pulse then rests in the still halo */
.sig[data-m="pulse"] .sig-halo{opacity:.16;transform:scale(2.1);
  animation:sig-ripple 2.4s cubic-bezier(.2,.6,.35,1) 2}
.sig[data-m="pulse"] .sig-dot{animation:sig-throb 2.4s ease-in-out 2}
.sig[data-m="breathe"] .sig-dot{animation:sig-breathe 1.6s ease-in-out 3}
.sig[data-m="orbit"] .sig-orb{animation:sig-orbit 4.8s linear}
.sig[data-m="pulse"] .sig-orb{animation:sig-orbit 4.8s var(--ease-io)}
@keyframes sig-ripple{0%{opacity:.42;transform:scale(1)}75%,100%{opacity:0;transform:scale(2.9)}}
@keyframes sig-throb{0%,100%{transform:scale(1)}18%{transform:scale(1.12)}}
@keyframes sig-breathe{50%{transform:scale(1.25)}}
@keyframes sig-orbit{to{transform:rotate(360deg)}}
@keyframes sig-settle{from{transform:scale(.2);opacity:0}}

/* ---------- the next-step cue: after a few idle seconds the likely next control breathes a soft purple halo.
   No layout shift and no colour change; gone while the control is hovered or focused. ---------- */
.app [data-cue]:not(:hover):not(:focus-visible){box-shadow:0 0 0 .25rem rgb(106 85 214 / .2);
  animation:cue 2.8s ease-in-out infinite}
@keyframes cue{0%,100%{box-shadow:0 0 0 0 rgb(106 85 214 / 0)}
  50%{box-shadow:0 0 0 .3125rem rgb(106 85 214 / .16),0 0 1.25rem .3125rem rgb(106 85 214 / .16)}}

/* ---------- views ---------- */
.v{padding:1.375rem clamp(1rem,4.5cqi,2.125rem) 1.625rem;display:flex;flex-direction:column;gap:1.25rem;
  min-height:100%}
.v > *{flex:none;min-width:0}
/* Render each view at full opacity; transformed opacity layers can remain blank in Safari.
   Controls stay inert while the question types, but the content remains readable. */
/* the intro: one question before any action. The brand mark turns three times and settles upright, then its dot
   breathes until an action is picked; nothing takes a click. */
.v.intro{justify-content:center;align-items:center;text-align:center}
.intro-in{display:grid;justify-items:center;gap:1.75rem;max-width:28rem}
.intro-mark{width:min(16rem,56cqi);height:min(16rem,56cqi);overflow:visible;color:var(--ink)}
.intro-mark .mark-dot{fill:var(--dot);stroke:var(--bg)}
.im-turn{transform-box:view-box;transform-origin:12.6px 15px;animation:im-turn 3.6s cubic-bezier(.5,0,.2,1) both}
.im-dot,.im-halo{transform-box:fill-box;transform-origin:center}
.im-dot{animation:im-pulse 2.8s ease-in-out 3.6s infinite}
.im-halo{fill:var(--dot);opacity:0;animation:im-ripple 2.8s cubic-bezier(.2,.6,.35,1) 3.6s infinite}
@keyframes im-turn{from{transform:rotate(-1080deg)}}
@keyframes im-pulse{50%{transform:scale(1.1)}}
@keyframes im-ripple{0%{opacity:.35;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.9)}}
.intro h2{font:400 clamp(1.75rem,5.6cqi,2.625rem)/1.12 var(--serif);letter-spacing:-.022em;text-wrap:balance}
.intro .greet{display:block;margin-bottom:.45em;font-size:.6em;letter-spacing:-.01em;color:var(--muted)}
/* only where the actions sit above the demo (stacked layouts): a quiet pointer to them */
.intro-hint{display:none;font:400 max(13px,.875rem)/1.4 var(--sans);color:var(--muted)}
.kick{display:block;font:500 max(11px,.71875rem)/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-wrap:balance}
.flowhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem;
  padding-bottom:.625rem;border-bottom:1px solid var(--ink)}
.flowhead h2{font:400 clamp(1.4375rem,4.2cqi,1.875rem)/1.15 var(--serif);letter-spacing:-.02em}
.flowhead h2:focus,.intro h2:focus{outline:none}
.flowhead h2:focus-visible,.intro h2:focus-visible{outline:2px solid var(--dot);outline-offset:6px;border-radius:4px}
.steps ol{display:flex;gap:2px}
.steps button{display:inline-flex;align-items:center;gap:.4375rem;min-height:2.75rem;min-width:2.75rem;
  padding:0 .5rem;border-radius:999px;font:500 max(11px,.8125rem)/1 var(--sans);color:var(--muted);
  transition:background-color .2s,color .2s}
.steps button:not(:disabled):hover{background:var(--wash);color:var(--ink)}
.steps button:disabled{cursor:default;opacity:.62}
.steps .n{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border:1px solid var(--rule-2);
  border-radius:50%;font:500 max(11px,.75rem)/1 var(--sans);font-variant-numeric:tabular-nums}
.steps button:not([aria-current]) .sl{display:none}
.steps [aria-current="step"]{color:var(--ink)}
.steps [aria-current="step"] .n{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.steps .seen .n{border-color:var(--ink);color:var(--ink)}

/* conversation: what you asked, what they said; sent messages never change */
.thread{display:grid;gap:.625rem}
.you,.them{max-width:31em;width:fit-content;padding:.75rem 1rem;font:400 max(13px,1rem)/1.45 var(--sans)}
.you{margin-left:auto;border-radius:1rem 1rem .25rem 1rem;background:var(--ink);color:var(--bg)}
.them{margin-right:auto;border-radius:1rem 1rem 1rem .25rem;background:var(--wash-2);color:var(--ink)}
.you .k,.them .k{display:block;font:500 max(11px,.6875rem)/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.1875rem}
.you .k{opacity:.75}
.them .k{color:var(--muted)}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;
  animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.say{display:flex;gap:.75rem;align-items:flex-start;font:400 clamp(1.125rem,3.2cqi,1.3125rem)/1.4 var(--serif);
  letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.say svg{width:1.25rem;height:1.25rem;flex:none;margin-top:.25rem}
.say .mark-dot{fill:var(--dot);stroke:var(--bg)}
.note{font:400 max(13px,.84375rem)/1.45 var(--sans);color:var(--muted)}
.note strong{font-weight:500;color:var(--ink-2)}
.na{font-style:italic;color:var(--muted)}

.split{display:grid;grid-template-columns:minmax(0,11.875rem) minmax(0,1fr);gap:1.75rem;align-items:start}
.stack{display:grid;gap:1.125rem;align-content:start;min-width:0}
.ident h3{font:400 clamp(1.5rem,4.4cqi,1.875rem)/1.15 var(--serif);letter-spacing:-.015em}
.ident p{margin-top:.25rem;font-size:max(13px,.875rem);color:var(--muted)}

/* figures: every money figure carries its label */
.big{display:block;font:300 clamp(3.75rem,12.5cqi,6.75rem)/.92 var(--serif);letter-spacing:-.04em;
  white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;margin-top:.375rem}
.big.unknown{font:italic 400 clamp(1.875rem,6cqi,2.75rem)/1.1 var(--serif);letter-spacing:-.01em;
  color:var(--muted);white-space:normal}
/* seven characters or more (a big loss, say) steps down so the figure stays whole on one line */
.v .big.long{font-size:clamp(2.5rem,8.4cqi,4.5rem)}
.fig2{display:block;font:300 clamp(1.875rem,6cqi,2.75rem)/1 var(--serif);letter-spacing:-.03em;white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;margin-top:.25rem}
.settle{animation:settle .9s var(--ease-out) backwards}
@keyframes settle{from{transform:translateY(.25rem)}}
.figline{margin-top:.625rem;font:400 max(13px,.90625rem)/1.45 var(--sans);color:var(--ink-2)}
.figs{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.875rem 1.75rem}
/* the main figure's own width decides whether the side figure fits beside it or wraps below */
.figs > :first-child{flex:1 1 auto;min-width:min(100%,8.5em)}
.figs .side{padding-bottom:.5rem}

/* the reference slab: grader, grade, an icon for the game or sport and a short set line, never card art */
.slab{--w:11.875rem;width:var(--w);max-width:100%;aspect-ratio:62/100;container-type:inline-size;flex:none;
  position:relative;color:var(--ink)}
.slab-in{position:absolute;inset:0;display:flex;flex-direction:column;font-size:calc(100cqi / 12);padding:.55em;
  border-radius:.75em;background:var(--slab-bg);border:1px solid var(--slab-edge);
  box-shadow:inset 0 0 0 .22em var(--slab-bg),inset 0 0 0 calc(.22em + 1px) var(--rule),var(--slab-lift)}
.slab-label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4em;
  padding:.5em .6em .5em .7em;min-height:27%;background:var(--slab-label);border:1px solid var(--rule-2);
  border-radius:.32em}
.slab-label > span:first-child{align-self:start;min-width:0}
.slab-grader{display:block;font:600 .92em/1 var(--sans);letter-spacing:.16em}
.slab-name{display:block;margin-top:.5em;font:400 max(.62em,11px)/1.28 var(--sans);color:var(--muted);
  overflow-wrap:anywhere}
.slab-grade{font:400 2.6em/.9 var(--serif);letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;
  text-align:right}
.slab-window{flex:1;margin-top:.5em;display:grid;grid-template: minmax(0,1fr) / minmax(0,1fr);
  place-items:center;border:1px solid var(--rule-2);
  border-radius:.32em;background:var(--slab-face);min-height:0;padding:.55em}
.slab-card{height:100%;max-height:100%;min-height:0;aspect-ratio:63/88;max-width:100%;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5em;text-align:center;border:1px solid var(--field);border-radius:.45em;padding:.4em;
  min-width:0;box-shadow:inset 0 0 0 .32em var(--slab-face),inset 0 0 0 calc(.32em + 1px) var(--rule-2)}
.slab-ic{width:min(68%,5em);height:auto;aspect-ratio:1;color:var(--ink-2);overflow:visible}
.slab-ic *{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.slab-ic .f{fill:currentColor}
.slab-ic .b{fill:var(--slab-face)}
.slab-no{font:500 max(.8em,11px)/1.2 var(--mono);letter-spacing:.04em;color:var(--ink-2);text-wrap:balance}
/* container sizes in em follow the app's scale */
@container (max-width:8.25em){
  .slab-in{font-size:min(calc(100cqi / 7.4),.875rem);padding:.4em;border-radius:.6em}
  /* at tile size the slab keeps the grader, the grade, the icon and the set line, all at a readable size */
  .slab-name{display:none}
  .slab-label{min-height:30%;padding:.35em .45em}
  .slab-label > span:first-child{align-self:center}
  .slab-grader{font-size:max(.78em,11px);letter-spacing:.04em}
  .slab-grade{font-size:1.6em}
  .slab-window{margin-top:.35em;padding:.3em .2em}
  .slab-card{aspect-ratio:auto;width:100%;border:0;box-shadow:none;padding:0;gap:.2em}
  .slab-ic{min-height:0}
  .slab-no{flex:none}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:1.125rem;min-height:3.25rem;
  padding:0 1.25rem;border-radius:.3125rem;background:var(--btn-bg);color:var(--btn-fg);
  font:500 max(13px,1rem)/1.2 var(--sans);
  letter-spacing:-.005em;transition:background-color .2s,transform .14s var(--ease-out),box-shadow .2s}
.btn:hover{background:var(--btn-hover);box-shadow:0 .625rem 1.5rem -.875rem rgb(0 0 0 / .45)}
.btn:active{transform:translateY(1px) scale(.992)}
.btn:is(:disabled,[aria-disabled="true"]){background:var(--wash-2);color:var(--ink-2);box-shadow:none;transform:none}
.btn[aria-disabled="true"]{cursor:not-allowed}
.btn .arr{font:400 1.3125rem/1 var(--serif);transition:transform .25s var(--ease-out)}
.btn:hover .arr{transform:translateX(.1875rem)}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:max(2.875rem,var(--tap));
  padding:0 1rem;border:1px solid var(--field);border-radius:.3125rem;font:500 max(13px,.9375rem)/1.2 var(--sans);
  color:var(--ink);
  background:var(--sheet);transition:border-color .2s,background-color .2s,transform .14s var(--ease-out)}
.btn2:hover{border-color:var(--ink);background:var(--wash)}
.btn2:active{transform:translateY(1px)}
.btn2:disabled{color:var(--muted);border-style:dashed;background:none;transform:none}
.btn2 .arr{font:400 1.1875rem/1 var(--serif)}
.lnk{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:2.75rem;
  font:500 max(13px,.90625rem)/1.3 var(--sans);color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.3125rem;
  text-decoration-thickness:1px}
.lnk:hover{text-decoration-color:currentColor}
.row-btns{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem}

/* radio chips (round marks: single choice) */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips legend{flex-basis:100%;margin-bottom:.5rem;font:500 max(13px,.875rem)/1.35 var(--sans);color:var(--ink)}
.chip{position:relative;display:inline-flex;align-items:center;gap:.5625rem;min-height:var(--tap);
  padding:0 1rem 0 .75rem;border:1px solid var(--rule-2);border-radius:999px;background:var(--sheet);cursor:pointer;
  font:500 max(13px,.9375rem)/1 var(--sans);font-variant-numeric:tabular-nums;
  transition:border-color .2s,background-color .2s}
.chip:hover{border-color:var(--field)}
/* the hidden radio covers its whole label, so moving focus to it scrolls the whole card into view */
.chip input,.choice input,.tile input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  pointer-events:none}
.rm{width:1rem;height:1rem;border:1.4px solid var(--field);border-radius:50%;flex:none;display:grid;place-items:center}
.rm::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ink);transform:scale(0);
  transition:transform .2s var(--ease-out)}
:is(.chip,.choice,.tile):has(input:checked){border-color:var(--ink)}
:is(.chip,.choice,.tile):has(input:checked) .rm{border-color:var(--ink)}
:is(.chip,.choice,.tile):has(input:checked) .rm::after{transform:scale(1)}
:is(.chip,.choice,.tile):has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
:is(.chip,.choice,.tile):has(input:disabled){cursor:not-allowed;opacity:.6}

.choices{display:grid;gap:.5rem}
.choices legend{margin-bottom:.625rem;font:500 max(13px,.875rem)/1.35 var(--sans)}
.choice{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:center;
  min-height:3.5rem;padding:.625rem .875rem .625rem .75rem;border:1px solid var(--rule-2);border-radius:.5rem;
  background:var(--sheet);cursor:pointer;transition:border-color .2s,background-color .2s}
.choice:hover{border-color:var(--field)}
.choice-t{display:block;font:500 max(13px,.96875rem)/1.3 var(--sans)}
.choice-h{display:block;font:400 max(13px,.84375rem)/1.4 var(--sans);color:var(--muted);margin-top:2px}
.tag{font:500 max(11px,.6875rem)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap}
.tag.key{color:var(--ink)}

/* rows */
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.875rem;align-items:center;width:100%;
  padding:1rem 0;border-bottom:1px solid var(--rule);text-align:left;position:relative;isolation:isolate}
.row::before{content:"";position:absolute;inset:0 -.75rem;border-radius:.375rem;background:var(--wash);opacity:0;
  transition:opacity .2s;z-index:-1}
button.row:hover::before{opacity:1}
.row-t{display:block;font:400 1.1875rem/1.3 var(--serif);letter-spacing:-.005em}
.row-m{display:block;font:400 max(13px,.84375rem)/1.4 var(--sans);color:var(--muted);margin-top:.25rem}
.row-v{font:400 1.1875rem/1.2 var(--serif);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;
  text-align:right}
.row-v small{display:block;font:500 max(11px,.78125rem)/1.3 var(--sans);color:var(--muted);margin-top:.25rem}
.row.off .row-t,.row.off .row-v{color:var(--muted)}
.row.best .row-v small{color:var(--ink)}
.chev{width:.5rem;height:.5rem;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(-45deg);color:var(--muted);margin-right:.25rem;transition:transform .2s var(--ease-out)}
button.row:hover .chev{transform:translateX(2px) rotate(-45deg)}

/* math rows: money in is green, money out is red */
.math{border-top:1px solid var(--ink)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:baseline;padding:.6875rem 0;
  border-bottom:1px solid var(--rule-2)}
.mrow > span:first-child{font:400 max(13px,.90625rem)/1.4 var(--sans);color:var(--ink-2)}
.mrow > span:last-child{font:400 1.125rem/1.2 var(--serif);font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;text-align:right}
.mrow.total{border-top:1px solid var(--ink);border-bottom:3px double var(--ink)}
.mrow.total > span{font-weight:500;color:var(--ink)}
.mrow .in{color:var(--in)}
.mrow .out{color:var(--out)}
/* verdicts outside the math rows: green is good and a go, red is out of range and a no-go */
.app .good{color:var(--in)}
.app .bad{color:var(--out)}

/* stepper + money fields */
.stepper{display:inline-flex;align-items:center;gap:.375rem}
.stepper button{width:var(--tap);height:var(--tap);border:1px solid var(--field);border-radius:50%;display:grid;
  place-items:center;font:400 1.375rem/1 var(--sans);background:var(--sheet);
  transition:border-color .2s,background-color .2s}
.stepper button:hover:not([aria-disabled="true"]){border-color:var(--ink);background:var(--wash)}
.stepper button[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.stepper output{min-width:4.2em;text-align:center;font:400 1.75rem/1 var(--serif);
  font-variant-numeric:lining-nums tabular-nums}
.field-l{display:block;font:500 max(13px,.875rem)/1.35 var(--sans);margin-bottom:.375rem}
.money{display:flex;align-items:center;width:100%;max-width:12.5rem;min-height:3rem;border:1px solid var(--field);
  border-radius:.3125rem;background:var(--sheet);padding-left:.75rem;cursor:text}
.money:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.money span{font-size:max(13px,1.0625rem);color:var(--muted)}
.money input{flex:1;min-width:0;border:0;background:none;padding:0 .75rem 0 .25rem;height:2.875rem;outline:none;
  font:400 1.0625rem/1 var(--sans);font-variant-numeric:tabular-nums}
.err{margin-top:.375rem;font:500 max(13px,.84375rem)/1.4 var(--sans);color:var(--fail)}
.fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.875rem}
.fields > .fld{flex:0 1 11.25rem}
.fields.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.fields.two > .btn,.fields.two > .btn2{grid-column:1 / -1;justify-self:start}

/* message preview: the exact words */
.msg{border:1px solid var(--rule-2);border-radius:.625rem;background:var(--sheet);padding:.875rem 1rem}
.msg .kick{margin-bottom:.375rem}
.msg q{display:block;quotes:"“" "”";font:italic 400 clamp(1.125rem,3.3cqi,1.3125rem)/1.45 var(--serif);
  color:var(--ink)}
.msg + .note{margin-top:-.625rem}

/* evidence: the sales behind a price, each with where and when it sold */
.evid-list{margin-top:.5rem;border-top:1px solid var(--ink)}
.evid-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.625rem;align-items:baseline;
  padding:.625rem 0;border-bottom:1px solid var(--rule);font-size:max(13px,.90625rem)}
.evid-list .src{display:block;font:400 max(13px,.84375rem)/1.35 var(--sans);color:var(--muted);margin-top:2px}
.evid-list .p{font:400 1.0625rem/1.2 var(--serif);font-variant-numeric:tabular-nums;text-align:right}
.evid-list li.x{color:var(--muted)}
.evid-list li.x .p{text-decoration:line-through;color:var(--muted)}
.evid-sum{margin-top:.625rem;font:500 max(13px,.84375rem)/1.45 var(--sans);color:var(--ink-2)}

/* find: the price rail (recent sales settle into a fair price) */
.rail{position:relative;height:7.375rem;margin:0 .375rem}
.rail-axis{position:absolute;left:0;right:0;top:4rem;height:1px;background:var(--ink)}
.rail-tick{position:absolute;top:4rem;width:1px;height:.4375rem;background:var(--rule-2)}
.rail-dot{position:absolute;top:4rem;width:.875rem;height:.875rem;margin:-.4375rem 0 0 -.4375rem;border-radius:50%;
  background:var(--ink)}
.rail-dot.x{background:var(--bg);border:1.5px dashed var(--field)}
.rail-dl{position:absolute;top:5.75rem;transform:translateX(-50%);font:500 max(11px,.78125rem)/1 var(--sans);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rail-dl.x{color:var(--muted);text-decoration:line-through}
.rail-fair{position:absolute;top:1.125rem;height:3.625rem;width:2px;margin-left:-1px;background:var(--ink)}
.rail-fl{position:absolute;top:0;font:500 max(11px,.75rem)/1.2 var(--sans);white-space:nowrap;
  transform:translateX(-50%)}
.rail-budget{position:absolute;top:1.875rem;height:2.875rem;border-left:1.5px dashed var(--ink-2)}
.rail-bl{position:absolute;top:1.125rem;font:400 max(11px,.75rem)/1 var(--sans);color:var(--muted);white-space:nowrap;
  transform:translateX(-50%)}
.enter .rail-dot{animation:drop .6s var(--ease-out) backwards}
.enter .rail-dl{animation:fade .5s var(--ease-out) backwards}
.enter .rail-fair,.enter .rail-fl{animation:fade .5s .9s var(--ease-out) backwards}
@keyframes drop{from{opacity:0;transform:translateY(-1.625rem)}}
@keyframes fade{from{opacity:0}}

/* sell: card tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem}
.tile{position:relative;display:grid;gap:.75rem;justify-items:start;align-content:start;padding:.875rem;
  border:1px solid var(--rule-2);border-radius:.625rem;background:var(--sheet);cursor:pointer;
  transition:border-color .2s}
.tile:hover{border-color:var(--field)}
.tile:has(input:checked){box-shadow:inset 0 0 0 1px var(--ink)}
.tile .slab{--w:7.75rem}
.tile-t{display:block;font:400 1.125rem/1.25 var(--serif)}
.tile-h{display:block;margin-top:.25rem;font:400 max(13px,.84375rem)/1.4 var(--sans);color:var(--muted)}
.tile .rm{position:absolute;top:.875rem;right:.875rem}

/* payment and handoff taps: Higsby records them; money moves between the people */
.taps{display:flex;flex-wrap:wrap;gap:.625rem}
.tap{display:inline-flex;align-items:center;gap:.625rem;min-height:max(3rem,var(--tap));padding:0 1rem 0 .75rem;
  border:1px solid var(--field);border-radius:999px;background:var(--sheet);font:500 max(13px,.9375rem)/1.2 var(--sans);
  transition:border-color .2s,background-color .2s}
.tap:hover:not(:disabled){border-color:var(--ink);background:var(--wash)}
.tap .tk{width:1.25rem;height:1.25rem;border:1.4px solid var(--field);border-radius:50%;display:grid;
  place-items:center;flex:none}
.tap[aria-pressed="true"]{border-color:var(--ink)}
.tap[aria-pressed="true"] .tk{background:var(--ink);border-color:var(--ink)}
.tap[aria-pressed="true"] .tk::after{content:"";width:.5rem;height:.28125rem;border-left:1.6px solid var(--bg);
  border-bottom:1.6px solid var(--bg);transform:translateY(-1px) rotate(-45deg)}
.tap:disabled{cursor:default}

/* one deal's status, start to finish */
.deal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:center;padding:1rem;
  border:1px solid var(--rule-2);border-radius:.75rem;background:var(--sheet);--sig-bg:var(--sheet)}
.deal:focus{outline:none}
.deal:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.deal-t{font:500 max(13px,1rem)/1.35 var(--sans)}
.deal-m{font:400 max(13px,.875rem)/1.45 var(--sans);color:var(--muted);margin-top:2px}
.deal-x{grid-column:1 / -1}
.done-line{font:400 clamp(1.1875rem,3.6cqi,1.4375rem)/1.35 var(--serif)}
/* the result of Set this ask, right under the ask */
.listed{display:flex;align-items:center;gap:.625rem;font:500 max(13px,.90625rem)/1.4 var(--sans);color:var(--ink)}

/* end of a flow: keep exploring */
.next{display:grid;gap:.625rem;padding:1rem 1.125rem .875rem;border-radius:.75rem;background:var(--wash)}
.next .row-btns{gap:.5rem}
.next .note{margin-top:2px}
/* inline links inside a sentence: the padding grows the tap area without moving the text */
.note .lnk{display:inline;min-height:0;padding-block:.875rem}

/* vend: readiness ring (the show box turning ready) */
.ready-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem;align-items:center}
.rring{position:relative;width:9.25rem;height:9.25rem;flex:none;--sig-bg:var(--bg)}
.rring svg{width:100%;height:100%;overflow:visible}
.rr-track{fill:none;stroke:var(--rule-2);stroke-width:2}
.rr-arc{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);
  transition:stroke-dasharray .9s var(--ease-io),stroke .5s}
.rr-orb{transform:rotate(var(--rot,0deg));transition:transform .9s var(--ease-io)}
.rr-knock{fill:var(--bg)}
.rr-dot{fill:var(--dot);transition:fill .5s}
.rr-fill{fill:var(--go);transform-box:fill-box;transform-origin:center;transform:scale(0);
  transition:transform .8s cubic-bezier(.3,.8,.2,1)}
.rring.full .rr-arc{stroke:var(--go)}
.rring.full .rr-dot{fill:var(--go)}
.rring.full .rr-fill{transform:scale(1)}
.rr-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.rr-c b{font:300 2.375rem/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.rr-c span{font:500 max(11px,.6875rem)/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-top:.25rem}
.rring.full .rr-c,.rring.full .rr-c span{color:#fff}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;padding:1rem 0;
  border-bottom:1px solid var(--rule);align-items:start}
.ck{width:1.625rem;height:1.625rem;border:1.4px solid var(--field);border-radius:50%;display:grid;place-items:center;
  margin-top:1px}
.check.ok .ck{background:var(--ink);border-color:var(--ink)}
.check.ok .ck::after{content:"";width:.625rem;height:.34375rem;border-left:1.8px solid var(--bg);
  border-bottom:1.8px solid var(--bg);transform:translateY(-1px) rotate(-45deg)}
.check-t{display:block;font:400 1.125rem/1.3 var(--serif)}
.check-m{display:block;font:400 max(13px,.875rem)/1.45 var(--sans);color:var(--muted);margin-top:.1875rem}
.ready-hero .done-line{margin-top:.375rem}
.check .fields,.check .row-btns{margin-top:.75rem}
.check .fields{gap:.625rem}
.check .fields > .fld{flex:0 1 9.375rem}

/* vend: Show Mode */
.show{display:grid;gap:1.25rem 2rem;grid-template-areas:"tally" "open" "closed"}
.tally{grid-area:tally;padding:1.25rem;border:2px solid var(--ink);border-radius:.875rem;background:var(--sheet)}
.tally .big{font-size:clamp(4rem,13cqi,6.5rem)}
.show-open{grid-area:open;min-width:0}
.show-open .rows{margin-top:.5rem}
.show-note{margin-top:.75rem}
.show-closed{grid-area:closed;min-width:0}
.opensale{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;padding:1rem 0;
  border-bottom:1px solid var(--rule);--sig-bg:var(--bg)}
.opensale .taps{margin-top:.625rem}
.sold{margin-top:.5rem;border-top:1px solid var(--ink)}
.sold li{display:flex;justify-content:space-between;gap:.75rem;padding:.4375rem 0;border-bottom:1px solid var(--rule);
  font:400 max(13px,.945rem)/1.35 var(--sans)}
.sold li span:last-child{font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums}

/* vend: the next proposed move */
.move{display:grid;gap:1rem;padding:1.25rem;border:1px solid var(--rule-2);border-radius:.75rem;background:var(--sheet)}
.move:focus{outline:none}
.move:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.move h3{font:400 clamp(1.3125rem,4cqi,1.625rem)/1.25 var(--serif);letter-spacing:-.01em;margin-top:.375rem}

/* offer steps: named areas so the figure, its controls and the exact words stay together at every width */
.deck{display:grid;gap:1.125rem 2rem;align-items:start}
.deck > *{min-width:0;display:grid;gap:.875rem;align-content:start}
.a-fig{grid-area:fig}
.a-ctl{grid-area:ctl}
.a-msg{grid-area:msg}
.a-thr{grid-area:thr}
.a-math{grid-area:math}
.deck.f-draft{grid-template-areas:"fig" "ctl" "msg" "math"}
.deck.f-after{grid-template-areas:"fig" "thr" "math"}
.deck.s-draft{grid-template-areas:"fig" "ctl" "msg"}
.deck.s-after{grid-template-areas:"fig" "thr"}

/* two columns inside a wide app: the figure stays in view while you change the inputs beside it */
.duo{display:grid;gap:1.25rem 2rem;align-items:start}
.duo > *{min-width:0;display:grid;gap:1.125rem;align-content:start}
@container app (min-width:38.75em){
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .duo .ready-hero{grid-template-columns:minmax(0,1fr);gap:1rem}
  .show{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"tally open" "closed open"}
  .deck{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .deck .big{font-size:clamp(3.5rem,10cqi,5.5rem)}
  .deck.f-draft{grid-template-areas:"fig msg" "ctl math"}
  .deck.f-after{grid-template-areas:"fig thr" "math thr" ". thr";grid-template-rows:auto auto 1fr}
  .deck.s-draft{grid-template-areas:"fig ctl" "msg ctl" ". ctl";grid-template-rows:auto auto 1fr}
  .deck.s-after{grid-template-areas:"fig thr" ". thr";grid-template-rows:auto 1fr}
}

/* narrow app (phones, or a narrow column) */
@container app (max-width:35em){
  .split{grid-template-columns:6rem minmax(0,1fr);gap:1rem}
  .split > .slab{--w:6rem}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile{grid-template-columns:auto minmax(0,1fr);align-items:center;padding-right:2.75rem}
  .tile .slab{--w:4rem}
  .steps .sl{display:none}
  .ready-hero{grid-template-columns:auto minmax(0,1fr);gap:1.125rem}
  .rring{width:7rem;height:7rem}
  .rr-c b{font-size:1.875rem}
  .figs{gap:.75rem 1.5rem}
}
@container app (max-width:26.25em){
  .pill-x{display:none}
  .dock-note{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .dock-note + .btn{margin-left:auto}
  .rring{width:5.75rem;height:5.75rem}
  .rr-c b{font-size:1.625rem}
  .rr-c span{font-size:.625rem}
}
@container app (max-width:22.5em){
  /* the name gives way only to the Show Mode label; "demo" always stays */
  .app[data-daylight] .app-brand .brand-t{display:none}
  .split{grid-template-columns:minmax(0,1fr)}
  .split > .slab{--w:5.5rem}
  .dock{gap:.5rem}
  .dock .btn{flex:1 1 auto;min-width:0;padding:0 1rem;gap:.625rem}
  .dock .btn2{padding:0 .875rem}
  .figs .side{text-align:left}
}

/* ---------- below the hero: how it works, then the ask ---------- */
.how{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 40px;align-items:center;padding-block:26px}
.how h2{font:500 12px/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--pg-muted)}
.how ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px}
.how li{display:flex;align-items:center;gap:14px;min-width:0}
.how p{font-size:15px;line-height:1.4;color:var(--pg-muted);text-wrap:balance}
.how b{display:block;font-weight:500;font-size:16px;color:var(--pg-ink)}
.hs{width:34px;height:34px;flex:none;overflow:visible}
.hs-ring{fill:none;stroke:rgb(243 239 231 / .55);stroke-width:1.4}
.hs-arc{fill:none;stroke:var(--pg-ink);stroke-width:1.8;stroke-linecap:round}
.hs-knock{fill:var(--pg)}
.hs-dot{fill:var(--pg-dot)}
.hs-gray{fill:#8d877e}
.hs-go{fill:#43a06f}
.close{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;
  padding-block:48px 56px}
.close h2{font:400 clamp(32px,3.6vw,54px)/1.06 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.close-act{display:grid;gap:12px;justify-items:start;max-width:30em}
.preview-note{font-size:14px;line-height:1.45;color:var(--pg-muted)}
.foot{padding-block:20px 28px;font-size:13.5px;color:var(--pg-muted)}

/* ---------- page breakpoints ---------- */
@media (max-width:1180px){
  :root{--gut:28px}
  .hero{--gap:32px;--app:.58}
  .copy h1{font-size:clamp(40px,4.6vw,56px)}
  .how{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  :root{--gut:20px}
  .top{min-height:64px}
  .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:8px 32px}
  .copy{max-width:none}
  .copy h1{font-size:clamp(40px,9.6vw,60px);margin-bottom:18px}
  .app{height:clamp(480px,calc(100svh - 24px),760px)}
  .app-body{overscroll-behavior:auto}
  .intro-hint{display:block}
  .how ol{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  :root{--gut:16px}
  .brand{font-size:23px}
  .top-cta{padding:0 12px;font-size:14px}
  .copy h1{font-size:clamp(36px,11vw,46px)}
  .lede{margin-bottom:18px}
  .access{gap:10px 16px;margin-top:24px}
  .app{border-radius:14px}
  .app-bar{padding-left:14px;gap:8px}
  .app-status{padding-inline:14px}
  .close{padding-block:36px 40px}
}
@media (max-width:360px){
  .top-cta{padding:0 10px}
  .restart{padding:0 12px}
}

/* ---------- short viewports (landscape phones, small phones, 200% zoom): one page scroll ----------
   The frame grows to its content and the dock sticks to the bottom of the screen, so there is no
   scroller inside a scroller and the next action stays in reach. */
@media (max-height:600px){
  /* Tab keeps app content clear of the pinned dock. Where :has() works, the clearance holds only while focus is
     in the app's content, so tabbing to the dock's own buttons never scrolls the page. */
  html{scroll-padding-bottom:96px}
  html:not(:has(.app-body :focus)){scroll-padding-bottom:0}
  .app{height:auto}
  .app-body{overflow:visible;scrollbar-gutter:auto}
  .dock{position:sticky;bottom:0}
}

/* ---------- forced colors (Windows High Contrast): keep the chosen option and the marks visible ---------- */
@media (forced-colors:active){
  .rm::after{background:CanvasText;forced-color-adjust:none}
  :is(.chip,.choice,.tile):has(input:checked){outline:3px solid Highlight;outline-offset:-3px}
  .tap[aria-pressed="true"] .tk,.check.ok .ck,.steps [aria-current="step"] .n{forced-color-adjust:none;
    background:CanvasText;border-color:CanvasText;color:Canvas}
  .tap[aria-pressed="true"] .tk::after,.check.ok .ck::after{border-color:Canvas}
  .act[aria-current="true"]{outline:3px solid Highlight}
  .btn,.cta{border:1px solid ButtonText}
}

/* ---------- reduced motion: nothing moves; the key item and the cue keep a still halo ---------- */
html[data-motion-paused],html[data-motion-paused]::before,html[data-motion-paused]::after,
html[data-motion-paused] *,html[data-motion-paused] *::before,html[data-motion-paused] *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion-paused] .sig[data-m="pulse"] .sig-halo{opacity:.16;transform:scale(2.1)}
html[data-motion-paused] .caret{display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sig[data-m="pulse"] .sig-halo{opacity:.16;transform:scale(2.1)}
  .caret{display:none}
}