/* CACHET design pass, 2026-09-27. Loaded last on index and machine.
   1. Hero stage: plain near black, as in the concept sheet (neon lines, nothing else).
   2. Try a buy: the seal press. Four buy sizes are four lines; the piece lands behind a
      panel of flat sealed lines, a demo round counts down (marked site simulation),
      and the lines part to show the piece.
   3. Build a piece: the line bench. Each trait is one line, each option a stop on it,
      and the picked stop bends the line into an arch. A switch shows the same piece
      sealed or revealed.
   4. UI pass: flat public/private split, a ruled runtime list instead of a card grid,
      pills that never wrap, body copy under 65 characters, type on the token scale.
   Spacing is the 4pt scale from tokens.css. The only colours are the tokens plus the
   on-chain piece's own gradient stops. */
:root{
  --seal-1:#742bff;--seal-2:#ef19c7;--seal-3:#ff583b;--seal-4:#ffca36;
  --seal-gradient:linear-gradient(90deg,var(--seal-1),var(--seal-2) 37%,var(--seal-3) 69%,var(--seal-4));
}

/* ---------- 1. Hero stage ---------- */
.hook-stage,.hook-stage::before,.hook-mount,.hook-mount canvas,.hook-mount .object-still{background:var(--ground)}
.tag{white-space:nowrap}
p.tech-pill{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hero-heading .hero-sub{max-width:60ch}
.hero-heading .hero-secondary{max-width:52ch}
/* The nav badge only shows where it cannot crowd the full link row. */
@media(min-width:1160px) and (max-width:1679px){.nav-badge{display:none}}

/* ---------- 2. Try a buy: the seal press ---------- */
.buy-instrument.cachet-seal{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--ground)}
.cachet-seal .seal-head{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-12);min-width:0;margin:0;padding:var(--space-12) var(--space-24);border-bottom:1px solid var(--line);font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.seal-head-mark{flex:none;width:28px;height:16px}
.seal-head-mark path{fill:none;stroke:url(#sealHeadGrad);stroke-width:2;stroke-linecap:round}
.seal-head-note{margin-left:auto;overflow:hidden;text-overflow:ellipsis;color:var(--mute)}
.cachet-seal .buy-action,.cachet-seal .buy-result{min-width:0;margin:0;padding:var(--space-24)}
.cachet-seal .buy-action .component-caption{max-width:44ch}
/* Four sizes, four lines: the lit length of each line is the size of the buy. */
.cachet-seal .buy-buttons{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:var(--space-16);border-top:1px solid var(--line)}
.cachet-seal .buy-choice{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) 3.5rem;grid-template-areas:"label gauge amount";align-items:center;justify-items:start;gap:var(--space-16);min-height:56px;padding:var(--space-8) var(--space-4);border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:400 var(--fs-body)/1.3 var(--font-body);text-align:left;transform:none;transition:background var(--fx-hover) var(--ease-soft)}
.cachet-seal .buy-choice strong{grid-area:label;font:600 var(--fs-body)/1.3 var(--font-display);white-space:nowrap}
.cachet-seal .buy-choice small{grid-area:amount;justify-self:end;font:500 var(--fs-label)/1.3 var(--font-mono);letter-spacing:.04em;color:var(--ink-soft);white-space:nowrap}
.seal-gauge{grid-area:gauge;position:relative;display:block;width:100%;height:12px}
.seal-gauge::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;border-radius:2px;background:var(--line)}
.seal-gauge i{position:absolute;left:0;top:4px;width:calc(var(--size,.5) * 100%);height:4px;border-radius:4px;background:var(--seal-gradient);background-size:calc(100% / var(--size,.5)) 100%;box-shadow:0 0 8px color-mix(in srgb,var(--seal-2) 55%,transparent);transform-origin:left center;transition:transform 320ms var(--ease)}
.cachet-seal .buy-choice:hover{background:var(--tint);transform:none}
.cachet-seal .buy-choice:hover .seal-gauge i{transform:scaleX(1.04)}
.cachet-seal .buy-choice:active{background:var(--band)}
.cachet-seal .buy-choice:focus-visible{outline:3px solid var(--accent-deep);outline-offset:-3px}
.cachet-seal .buy-choice[aria-busy=true]{background:var(--tint)}
.cachet-seal .buy-choice[aria-busy=true] .seal-gauge i{animation:seal-charge 600ms var(--ease-soft) both}
@keyframes seal-charge{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cachet-seal .buy-session{margin-top:var(--space-16)}
/* The result: the sealed window, the round readout, the facts. */
.cachet-seal .buy-result{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);align-content:start;align-items:start;text-align:left;border-top:1px solid var(--line)}
.seal-window{position:relative;width:min(100%,272px);aspect-ratio:5/6;margin:0 auto;isolation:isolate}
.cachet-seal .seal-window .piece-preview{width:100%;min-width:0;height:100%;margin:0}
.cachet-seal .seal-window .empty-piece{width:100%;height:100%;border:1px dashed var(--line);border-radius:var(--radius);background:var(--card)}
.seal-cover{position:absolute;inset:0;z-index:2;display:grid;place-items:center;border-radius:var(--radius);background:var(--ground);box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;transition:background 480ms var(--ease) 360ms,box-shadow 480ms var(--ease) 360ms}
.seal-cover svg{display:block;width:100%;height:auto;overflow:visible}
.seal-line{fill:none;stroke:url(#sealGrad);stroke-width:3.3;stroke-linecap:round;opacity:.4;transition:transform 720ms var(--ease) calc(var(--d,0) * 40ms),opacity 480ms var(--ease) calc(var(--d,0) * 40ms)}
.seal-window.is-sealed .seal-line{opacity:1;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--seal-2) 70%,transparent))}
.seal-window.is-sealed .seal-cover{animation:seal-hum 1.8s ease-in-out infinite}
@keyframes seal-hum{50%{box-shadow:inset 0 0 0 1px var(--accent-2),0 0 24px color-mix(in srgb,var(--accent-2) 35%,transparent)}}
.seal-window.is-empty .seal-line{stroke:var(--line);opacity:1}
.seal-window.is-open .seal-cover{background:transparent;box-shadow:none;animation:none}
.seal-window.is-open .seal-line{opacity:0;transform:translateY(calc((var(--i) - 6) * 22px))}
.seal-window.is-open .seal-line.seal-mid{transform:scaleX(0);transform-origin:center;transform-box:fill-box}
/* The round readout: a small instrument, not a card. */
.round-readout{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-4) var(--space-16);padding:var(--space-16) 0;border-block:1px solid var(--line)}
.round-label{grid-column:1;margin:0;font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.round-readout .tag{grid-column:2;grid-row:1;justify-self:end}
.round-number{grid-column:1;margin:0;font:500 var(--fs-h3)/1.2 var(--font-mono);color:var(--ink)}
.round-clock{grid-column:2;grid-row:2;margin:0;font:500 var(--fs-h2)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--accent-deep)}
.round-state{grid-column:1/-1;margin:var(--space-8) 0 0;max-width:48ch;font:400 var(--fs-label)/1.5 var(--font-body);color:var(--ink-soft)}
.cachet-seal .buy-result-copy{min-width:0}
.cachet-seal #fireRead{font:600 var(--fs-h3)/1.3 var(--font-display)}
@media(min-width:768px){.cachet-seal .buy-result{grid-template-columns:240px minmax(0,1fr)}.cachet-seal .seal-window{grid-row:1/span 2;margin:0}.cachet-seal .round-readout{grid-column:2}.cachet-seal .buy-result-copy{grid-column:2}}
@media(min-width:1024px){.buy-instrument.cachet-seal{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.cachet-seal .buy-action,.cachet-seal .buy-result{padding:var(--space-32)}.cachet-seal .buy-result{border-top:0;border-left:1px solid var(--line);grid-template-columns:minmax(0,1fr)}.cachet-seal .seal-window{grid-row:auto;margin:0 auto}.cachet-seal .round-readout,.cachet-seal .buy-result-copy{grid-column:1}}
@media(min-width:1440px){.cachet-seal .buy-result{grid-template-columns:272px minmax(0,1fr)}.cachet-seal .seal-window{grid-row:1/span 2}.cachet-seal .round-readout,.cachet-seal .buy-result-copy{grid-column:2}}
@media(max-width:479px){.cachet-seal .seal-head{padding:var(--space-12) var(--space-16)}.seal-head-note{display:none}.cachet-seal .buy-action,.cachet-seal .buy-result{padding:var(--space-16)}.cachet-seal .buy-choice{grid-template-columns:minmax(0,6.5rem) minmax(0,1fr) 3rem;gap:var(--space-12)}}
@media(prefers-reduced-motion:reduce){
  .seal-line,.seal-cover,.seal-gauge i,.cachet-seal .buy-choice{transition:none}
  .seal-window.is-sealed .seal-cover,.cachet-seal .buy-choice[aria-busy=true] .seal-gauge i{animation:none}
  .seal-window.is-open .seal-line,.seal-window.is-open .seal-line.seal-mid{transform:none}
}

/* ---------- 3. Build a piece: the line bench ---------- */
#build .build-bench.cachet-bench{grid-template-columns:minmax(0,1fr);gap:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--ground)}
#build .cachet-bench .build-object{display:grid;gap:var(--space-16);align-content:start;margin:0;padding:var(--space-24);border:0;border-radius:0;background:transparent}
#build .cachet-bench .build-object+div{min-width:0;padding:var(--space-24);border-top:1px solid var(--line)}
.bench-state{display:inline-flex;justify-self:center;gap:0;padding:var(--space-4);border:1px solid var(--line);border-radius:999px}
.bench-state button{min-height:36px;padding:0 var(--space-16);border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font:500 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;white-space:nowrap;cursor:pointer}
.bench-state button[aria-pressed=true]{background:var(--tint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent-2)}
.bench-state button:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.bench-frame{position:relative;width:min(100%,288px);margin:0 auto}
#build .cachet-bench .build-card{width:100%;margin:0}
.bench-sealed{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--radius);background:var(--ground)}
.bench-sealed[hidden]{display:none}
.bench-sealed svg{display:block;width:100%;height:auto}
.bench-frame.is-sealed .build-card{visibility:hidden}
#build .cachet-bench .build-maths{margin:0;padding:var(--space-16) 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.bench-caption{margin:0 0 var(--space-16);font:500 var(--fs-label)/1.5 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
/* Each trait is one line; each option a stop; the picked stop bends the line. */
.cachet-bench #buildControls{display:grid;gap:var(--space-8);padding:0;border:0;background:transparent}
.cachet-bench #buildControls fieldset{min-width:0;margin:0;padding:0;border:0}
.cachet-bench #buildControls legend{margin-bottom:var(--space-4);padding:0;font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.cachet-bench #buildControls .segments{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;padding:0}
.cachet-bench #buildControls .segments::before{display:none}
.cachet-bench #buildControls .segments button{position:relative;flex:1 1 72px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--space-4);min-width:0;min-height:72px;padding:var(--space-24) var(--space-4) var(--space-8);border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink-soft);font:400 var(--fs-label)/1.3 var(--font-body);text-align:center;overflow:visible;cursor:pointer}
.cachet-bench #buildControls .segments button span{color:var(--ink);font-size:var(--fs-label);white-space:nowrap}
.cachet-bench #buildControls .segments button small{font:400 var(--fs-label)/1.3 var(--font-mono);color:var(--mute)}
/* The line segment each stop sits on. */
.cachet-bench #buildControls .segments button::before{content:"";position:absolute;left:0;right:0;top:12px;bottom:auto;width:auto;height:2px;background:var(--line);opacity:1;transform:none;transition:opacity var(--fx-hover) var(--ease-soft)}
/* The stop itself. */
.cachet-bench #buildControls .segments button::after{content:"";position:absolute;left:50%;top:9px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 2px var(--mute);transition:transform 320ms var(--ease),box-shadow var(--fx-hover) var(--ease-soft)}
.cachet-bench #buildControls .segments button:hover{background:var(--band)}
.cachet-bench #buildControls .segments button:hover::after{box-shadow:inset 0 0 0 2px var(--ink)}
.cachet-bench #buildControls .segments button:focus-visible{outline:3px solid var(--accent-deep);outline-offset:-3px}
/* Picked: the straight segment gives way to a neon arch rising over the stop. */
.cachet-bench #buildControls .segments button[aria-pressed=true]{background:transparent;color:var(--ink)}
.cachet-bench #buildControls .segments button[aria-pressed=true] span{color:var(--accent-deep);font-weight:600}
.cachet-bench #buildControls .segments button[aria-pressed=true]::before{top:0;height:14px;background:var(--seal-gradient);-webkit-mask:radial-gradient(ellipse 50% 100% at 50% 100%,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 100%,transparent 100%);mask:radial-gradient(ellipse 50% 100% at 50% 100%,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 100%,transparent 100%);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--seal-2) 60%,transparent))}
.cachet-bench #buildControls .segments button[aria-pressed=true]::after{transform:translateY(-8px);background:var(--seal-4);box-shadow:0 0 8px var(--seal-4)}
#build .cachet-bench .build-shortcuts{margin-top:var(--space-16)}
@media(min-width:1024px){#build .build-bench.cachet-bench{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}#build .cachet-bench .build-object{padding:var(--space-32)}#build .cachet-bench .build-object+div{padding:var(--space-32);border-top:0;border-left:1px solid var(--line)}}
@media(max-width:479px){#build .cachet-bench .build-object,#build .cachet-bench .build-object+div{padding:var(--space-16)}.cachet-bench #buildControls .segments button{flex-basis:84px}}
@media(prefers-reduced-motion:reduce){.cachet-bench #buildControls .segments button::after,.cachet-bench #buildControls .segments button::before{transition:none}}

/* ---------- 4. UI pass ---------- */
/* How the seal is meant to work: one panel, three steps split by hairlines. */
.privacy-band{border-radius:var(--radius);padding:var(--space-32) var(--space-24)}
.privacy-band-kicker{font-size:var(--fs-label)}
.privacy-step p{font-size:var(--fs-h3);line-height:1.35}
.privacy-step small{font-size:var(--fs-label);max-width:40ch}
/* Public and private: one split with a hairline between, not two cards. */
.public-private-grid{gap:0;border-block:1px solid var(--line)}
.public-private-col{padding:var(--space-24) 0;border:0;border-radius:0;background:transparent}
.public-private-col.is-public,.public-private-col.is-private{background:transparent}
.public-private-col+.public-private-col{padding-left:var(--space-24);border-left:1px solid var(--line)}
.public-private-kicker{font-size:var(--fs-label)}
.public-private-col li{font-size:var(--fs-body);max-width:48ch}
.public-private-note{margin-top:var(--space-16);max-width:65ch;color:var(--ink-soft)}
@media(max-width:767px){.public-private-col+.public-private-col{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
/* What runs when you buy: a ruled list, not a grid of cards. */
.runtime-row{gap:0;border-top:1px solid var(--line)}
.runtime-card{border:0;border-radius:0;background:transparent;box-shadow:none;padding:var(--space-24) var(--space-16);border-right:1px solid var(--line);transform:none}
.runtime-card:last-child{border-right:0}
.runtime-card:hover{background:var(--tint)}
@media(max-width:1023px){
  .runtime-row{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;padding:0;mask-image:none;-webkit-mask-image:none}
  .runtime-card{flex:none;max-width:none;min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--space-16);padding:var(--space-16) 0;border-right:0;border-bottom:1px solid var(--line)}
  .runtime-card svg{flex:none;width:40px;height:40px}
}
/* Body copy stays under 65 characters a line. */
.buy-proof>p,.proof-seed,#lookupStatus,.rail-section>p,.tech-section .tech-row dd,.tech-section .tech-limit,.demo-intro,.demo-status,.component-caption{max-width:65ch}
.private-by-strip p{font-size:var(--fs-label)}

/* ---------- 5. Odds readout: neon lines (Build a piece and The odds) ----------
   Every figure is js/snag-market.js output, drawn by js/snag-lab.js. The gradient sits on
   lines only; numbers stay ink. Motion is transform and opacity on the expo ease, and the
   reduced-motion branch shows the end state. */
#build .cachet-bench .build-maths{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-12);width:100%;max-width:none;text-align:left}
#build .cachet-bench .build-maths #buildRank{grid-column:1;grid-row:1;order:0;justify-self:start;margin:0;padding:var(--space-4) var(--space-12);border:1px solid var(--accent-2);border-radius:999px;background:transparent;color:var(--ink);font:600 var(--fs-label)/1.3 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase}
#build .cachet-bench .build-maths #buildOdds{grid-column:2;grid-row:1;margin:0;font:500 var(--fs-body)/1.4 var(--font-body);letter-spacing:0;color:var(--ink-soft)}
#build .cachet-bench .build-maths .odds-vis-mount{grid-column:1/-1;min-width:0}
#build .cachet-bench .build-maths #buildMath{grid-column:1/-1;margin:0;font:400 var(--fs-label)/1.5 var(--font-body);color:var(--mute)}
.odds-vis{--bend:.02;--tier-x:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);min-width:0;padding-top:var(--space-8)}
.odds-vis p{margin:0}
/* The arch: one line that bends upward more the rarer the mix (log scale between the ends). */
.odds-vis .odds-meter{display:grid;justify-items:center;gap:var(--space-8);min-width:0}
.odds-vis .odds-arch{display:block;width:min(100%,360px);height:auto;overflow:visible}
.odds-vis .odds-arch path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.odds-vis .odds-arch-base{stroke:var(--line);stroke-width:1}
.odds-vis .odds-arch-ceiling{stroke:var(--line);stroke-width:1;stroke-dasharray:2 6}
.odds-vis .odds-arch-line{stroke-width:3;transform-box:view-box;transform-origin:0 92px;transform:scaleY(var(--bend));filter:drop-shadow(0 0 5px color-mix(in srgb,var(--seal-2) 60%,transparent));transition:transform 900ms var(--ease);animation:odds-bend-in 900ms var(--ease) backwards}
.odds-vis .odds-arch-peak{fill:var(--seal-4);filter:drop-shadow(0 0 6px var(--seal-4));transform:translateY(calc((1 - var(--bend)) * 64px));transition:transform 900ms var(--ease);animation:odds-peak-in 900ms var(--ease) backwards}
@keyframes odds-bend-in{from{transform:scaleY(.02)}}
@keyframes odds-peak-in{from{transform:translateY(62.7px);opacity:0}}
.odds-vis .odds-ends{display:flex;justify-content:space-between;gap:var(--space-16);width:min(100%,360px);font:400 var(--fs-label)/1.4 var(--font-mono);color:var(--mute);font-variant-numeric:tabular-nums}
.odds-vis .odds-ends span{white-space:nowrap}
.odds-vis .odds-onein{display:grid;justify-items:center;gap:var(--space-4);text-align:center}
.odds-vis .odds-onein-lead{font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.odds-vis .odds-onein-value{display:flex;align-items:baseline;gap:var(--space-8);font:500 var(--fs-h3)/1 var(--font-mono);color:var(--ink-soft);white-space:nowrap}
.odds-vis .odds-n{font:600 clamp(2.25rem,1.7rem + 2vw,3.5rem)/1.1 var(--font-mono);letter-spacing:-.03em;color:var(--ink)}
/* The product: one small factor per trait group, multiplied. */
.odds-vis .odds-factors{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:var(--space-4) var(--space-8);font:500 var(--fs-label)/1.4 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.odds-vis .odds-factor{animation:odds-fade 480ms var(--ease) backwards}
.odds-vis .odds-factor.is-rarest{color:var(--accent-deep)}
.odds-vis .odds-times{color:var(--mute)}
@keyframes odds-fade{from{opacity:0;transform:translateY(4px)}}
/* The rank: five labelled bands on one neon scale, the current band lit, a marker at the share. */
.odds-vis .odds-tier{position:relative;min-width:0;padding-top:var(--space-4);container-type:inline-size}
.odds-vis .odds-tier-band{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4);margin:0;padding:0;list-style:none}
.odds-vis .odds-tier-band li{display:grid;align-content:start;gap:var(--space-8);min-width:0;margin:0}
.odds-vis .odds-tier-seg{display:block;height:3px;border-radius:3px;background:var(--seal-gradient);background-size:500% 100%;background-position:calc(var(--i) * 25%) 0;opacity:.16;transition:opacity 480ms var(--ease),transform 480ms var(--ease)}
.odds-vis .odds-tier-band li.is-below .odds-tier-seg{opacity:.5}
.odds-vis .odds-tier-band li.is-current .odds-tier-seg{opacity:1;transform:scaleY(1.67);box-shadow:0 0 10px color-mix(in srgb,var(--seal-2) 60%,transparent)}
.odds-vis .odds-tier-name{overflow:hidden;font:500 var(--fs-label)/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;color:var(--mute)}
.odds-vis .odds-tier-band li.is-current .odds-tier-name{color:var(--ink)}
.odds-vis .odds-tier-track{position:absolute;left:0;right:0;top:calc(var(--space-4) - 3px);height:0;pointer-events:none}
.odds-vis .odds-tier-mark{position:absolute;left:-4px;top:0;width:8px;height:8px;border-radius:50%;background:var(--seal-4);box-shadow:0 0 8px var(--seal-4);transform:translateX(calc(var(--tier-x) * 100cqw));transition:transform 900ms var(--ease)}
/* Trait groups: one line each, a segment per option, length and brightness = weight. */
.odds-vis .odds-rows{display:grid;gap:var(--space-12);padding-top:var(--space-16);border-top:1px solid var(--line)}
.odds-vis .odds-row{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr) minmax(0,7.5rem);align-items:center;gap:var(--space-12)}
.odds-vis .odds-row-key{overflow:hidden;font:500 var(--fs-label)/1.3 var(--font-mono);letter-spacing:.02em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.odds-vis .odds-row.is-rarest .odds-row-key{color:var(--accent-deep)}
.odds-vis .odds-row-val{justify-self:end;overflow:hidden;max-width:100%;font:400 var(--fs-label)/1.3 var(--font-body);text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.odds-vis .odds-row-val b{font:500 var(--fs-label)/1.3 var(--font-mono);color:var(--ink)}
.odds-seg-row{display:flex;align-items:center;gap:3px;min-width:0;height:10px}
.odds-seg{display:block;flex:1 1 0;min-width:2px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--seal-1) 55%,var(--ink));opacity:calc(.14 + var(--lvl,1) * .46);transition:opacity 480ms var(--ease),transform 480ms var(--ease);animation:odds-seg-in 720ms var(--ease) backwards;animation-delay:calc(var(--i,0) * 40ms)}
.odds-seg.is-lit{opacity:1;background:var(--seal-gradient);transform:scaleY(1.5);box-shadow:0 0 8px color-mix(in srgb,var(--seal-2) 65%,transparent)}
@keyframes odds-seg-in{from{opacity:0;transform:scaleX(.2)}}
/* The odds table: a big group line, then each option as a thin neon line. */
.odds-combined{grid-column:1/-1;padding:var(--space-24) 0;border-block:1px solid var(--line)}
.odds-combined .odds-vis{padding-top:0}
.odds-seg-row.odds-seg-row-lg{height:16px;margin-top:var(--space-16)}
.odds-seg-row-lg .odds-seg{height:4px}
.odds-group .odds-column{height:2px;border-radius:2px;background:var(--line);overflow:visible}
.odds-group .odds-column i{height:2px;border-radius:2px;background:color-mix(in srgb,var(--seal-1) 55%,var(--ink));opacity:calc(.25 + var(--lvl,1) * .5)}
.odds-group .odds-option.is-picked .odds-column i{background:var(--seal-gradient);opacity:1;box-shadow:0 0 8px color-mix(in srgb,var(--seal-2) 65%,transparent)}
.odds-group .odds-option.is-picked .odds-label{color:var(--ink)}
@media(min-width:1024px){
  .odds-combined .odds-vis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--space-24) var(--space-48)}
  .odds-combined .odds-meter{grid-row:1/span 2}
}
/* The readout sizes to its own column, not the viewport: Build sits in a half column. */
.odds-vis{container-type:inline-size}
@container (min-width:521px){.odds-vis .odds-row{grid-template-columns:minmax(0,11rem) minmax(0,1fr) minmax(0,8rem)}}
@container (max-width:520px){
  .odds-vis .odds-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8) var(--space-12)}
  .odds-vis .odds-row .odds-seg-row{grid-column:1/-1;grid-row:2}
}
@container (max-width:440px){
  .odds-vis .odds-tier-band li{grid-template-columns:minmax(0,1fr)}
  .odds-vis .odds-tier-name{justify-self:center;width:max-content;overflow:visible;text-overflow:clip;font-family:var(--font-body);letter-spacing:0;text-transform:none}
  .odds-vis .odds-tier-band li:first-child .odds-tier-name{justify-self:start}
  .odds-vis .odds-tier-band li:last-child .odds-tier-name{justify-self:end}
}
/* At phone widths the second and fourth names drop a line so no two labels touch. */
@container (max-width:330px){
  .odds-vis .odds-tier-band li:nth-child(even) .odds-tier-name{margin-top:1.6em}
  .odds-vis .odds-ends{flex-direction:column;align-items:center;gap:0}
}
@media(prefers-reduced-motion:reduce){
  .odds-vis .odds-arch-line,.odds-vis .odds-arch-peak,.odds-vis .odds-factor,.odds-vis .odds-tier-seg,.odds-vis .odds-tier-mark,.odds-seg,.odds-group .odds-column i{animation:none;transition:none}
}

/* ---------- Rhythm pass 2026-09-28 (owner: "the words are jammed up") ----------
   One vertical rhythm on the 4pt scale: eyebrow to heading 8, heading to body 16,
   body to CTA 24, CTA to the next block 48, section to section 96. Body copy 65ch,
   fine print 60ch in a smaller muted block, buttons never touch text, disabled buttons
   carry a short reason beside them. Ids, data attributes and copy untouched.
   CACHET: nothing here reaches #odds; that section belongs to its own redesign. */
:root{--rh-eyebrow:var(--space-8);--rh-body:var(--space-16);--rh-cta:var(--space-24);--rh-block:var(--space-48);--rh-fine:60ch}

/* Headings and short copy wrap without one-word orphans. */
:is(h1,h2,h3,.component-title,.kicker,summary,.line-row p,#closing-title):not(#odds *){text-wrap:balance}
:is(p,li,dd,figcaption,.component-caption):not(#odds *){text-wrap:pretty}

/* Eyebrow sits 8 above its heading; the heading group keeps its air above. */
.rail-section:not(#odds) :is(.kicker+h2,.kicker+.component-title){margin-top:var(--rh-eyebrow)}
.rail-section:not(#odds)>header>.kicker{margin:0}

/* Body copy measure. */
.rail-section:not(#odds)>p,.rail-section:not(#odds)>header>.component-caption,.privacy-split-note,#journeyStatus{max-width:65ch}

/* Fine print: one smaller, muted block with its own spacing and measure. */
.demo-status,.runtime-status,.publication-detail,#collectionTerms,.tech-section .tech-limit,#zcashPanel .field-help,#railHistoryNote{max-width:var(--rh-fine);font-size:.875rem;line-height:1.6;color:var(--ink-soft)}
.try-buy>.demo-status{margin-top:var(--rh-cta)}
.runtime-status,.publication-detail{margin-top:var(--rh-cta)}
.publication-detail+#collectionTerms{margin-top:var(--space-8)}
#rule>.btn{margin-top:var(--rh-cta)}
.privacy-strip{max-width:65ch;text-wrap:balance}

/* Disabled buttons read as disabled: dashed outline, muted label, no fill. */
:is(.btn:disabled,.btn[aria-disabled=true]):not(#odds *){opacity:1;border-style:dashed;border-color:color-mix(in srgb,var(--ink-soft) 60%,transparent);background:transparent;color:var(--ink-soft);box-shadow:none}
.btn-quiet:disabled:not(#odds *){border-color:transparent}

/* Numbered steps: one grid, equal gaps, the number on its own line above the step. */
.launch-invitation ol,.wallet-journey ol{counter-reset:rh-step;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);margin:var(--space-32) 0 0;padding:0;list-style:none}
.launch-invitation li,.wallet-journey ol li{counter-increment:rh-step;display:grid;align-content:start;gap:var(--space-8);min-width:0;margin:0;padding-top:var(--space-16);border-top:1px solid var(--line)}
.launch-invitation li::before,.wallet-journey ol li::before{content:counter(rh-step,decimal-leading-zero);font:600 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--track-label);color:var(--accent-deep)}
.launch-invitation li strong{margin:0;line-height:1.25}
@media(min-width:768px){.launch-invitation ol{grid-template-columns:repeat(3,minmax(0,1fr))}.wallet-journey ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.wallet-journey ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
.launch-invitation>.btn,.wallet-journey>.btn{margin-top:var(--rh-cta)}

/* The ZEC door: the disabled quote button leads with its reason beside it, the fine
   print below as a muted block, the claim form as its own labelled group. */
#zcashPanel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12) var(--space-16);width:auto;max-width:68ch;margin:var(--rh-block) 0 0;padding-top:var(--space-32);border-top:1px solid var(--line)}
#zcashPanel>.btn{order:1;margin:0}
#zcashPanel>p[role=status]{order:2;flex:1 1 20ch;max-width:none;margin:0;font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
#zcashPanel>.field-help{order:3;flex:1 1 100%;margin:0}
#zcashPanel>.field-help:first-of-type{margin-top:var(--space-12)}
#zcashPanel>div{order:4;flex:1 1 100%;display:grid;gap:var(--space-12);margin-top:var(--space-16)}
#zcashPanel>div[hidden]{display:none}
#zcashPanel>div .btn{justify-self:start;margin:0}
#zcashPanel>form{order:5;flex:1 1 100%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-8) var(--space-16);margin-top:var(--space-32);padding-top:var(--space-32);border-top:1px solid var(--line)}
#zcashPanel>form>*{grid-column:1/-1}
#zcashPanel>form h3{margin:0 0 var(--space-8);font:600 var(--fs-h3)/1.3 var(--font-display)}
#zcashPanel label{margin:var(--space-8) 0 0;font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:.04em;color:var(--ink-soft)}
#zcashPanel input{width:100%;min-height:44px;padding:var(--space-8) var(--space-12);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);font:400 var(--fs-body)/1.5 var(--font-mono)}
#zcashPanel>form .field-help{margin:var(--space-8) 0 0}
#zcashPanel>form>.btn{grid-column:1;justify-self:start;margin:var(--space-16) 0 0}
#zcashPanel>form:has(>.btn:disabled)::after{content:"Not open yet.";grid-column:2;margin-top:var(--space-16);font-size:.875rem;line-height:1.5;color:var(--ink-soft)}

/* My pieces: label above the sample, the visor control as its own row with a reason. */
#samplePiecesLabel{margin:var(--rh-cta) 0 var(--space-8);font:500 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
#privacyControls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12) var(--space-16);margin-top:var(--rh-cta)}
#privacyControls>button{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:var(--space-12) var(--space-20);border:1px solid var(--ink);border-radius:12px;background:transparent;color:var(--ink);font:400 1rem/1.25 var(--font-body);cursor:pointer}
#privacyControls>button:hover:not(:disabled){background:var(--tint)}
#privacyControls>button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#privacyControls>button:disabled{border-style:dashed;border-color:color-mix(in srgb,var(--ink-soft) 60%,transparent);color:var(--ink-soft);cursor:not-allowed}
#privacyControls>div{flex:1 1 24ch;margin:0;font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
#privacyControls:has(>button:disabled)>div:empty::before{content:"Not open yet."}

/* Check a buy: the disabled button keeps air above and below. */
#checkForm .btn{margin-top:var(--space-16)}
#checkResult{font-size:.875rem;line-height:1.6;color:var(--ink-soft)}

/* Closing: heading, CTA row, note. */
#closing-title+.hero-actions{margin-top:var(--rh-cta)}
#closing .publication-note{margin-top:var(--space-16)}

/* Section air: a band that follows the hero or a section keeps the rhythm. */
.rail-section+.privacy-band{margin-top:var(--space-96)}
.rail-hero+.privacy-band{margin-top:var(--space-48)}
/* The credits strip keeps 64 of air above the footer on desktop; phones and tablets already get 96 from the footer. */
@media(min-width:1024px){.privacy-strip,.private-by-strip{margin-bottom:var(--space-64)}}
/* A CTA that follows the ZEC door keeps block air above it. */
#zcashPanel+.btn{margin-top:var(--space-32)}

/* CACHET: the credits strip under the closing band gets section air and a 65ch measure. */
.closing-band+.private-by-strip{margin-top:var(--space-64)}
.private-by-strip p{max-width:65ch;margin-inline:auto;text-wrap:balance}

/* CACHET: the three seal steps share one grid on desktop. Every lock sits in the same
   gutter beside its number and title, so step 1 no longer drops below steps 2 and 3. */
@media(min-width:1024px){
  .privacy-step,.privacy-step:first-child{padding-left:44px}
  .privacy-step:first-child .privacy-step-lock{position:absolute;left:0;top:2px;margin:0}
  .privacy-step+.privacy-step{padding-left:calc(var(--space-24) + 44px)}
  .privacy-step+.privacy-step .privacy-step-lock{left:var(--space-24)}
}
/* Site pass: consistent leading, measured copy and a little air around every action. */
.hero-heading h1{line-height:1.08;margin-block:28px 24px;text-wrap:balance}
.hero-heading .hero-sub{font-size:clamp(16px,1.35vw,19px);line-height:1.7;max-width:57ch}
.hero-heading .hero-secondary{font-size:clamp(16px,1.35vw,19px);line-height:1.6;margin-top:20px;max-width:54ch}
.hero-heading .hero-actions{gap:12px;margin-top:28px}
.hero-heading .hero-helper{margin-top:20px;line-height:1.6}
.hero-heading .hero-piece-hint{line-height:1.6;margin-top:8px}
.rail-section .component-title,.how-strip .component-title,.try-buy .component-title{line-height:1.22}
.rail-section>header .component-caption,.try-buy .buy-action .component-caption{margin-top:16px;line-height:1.65}
.rail-section>header{margin-bottom:32px}
.privacy-band,.public-private{padding-block:40px}
.privacy-steps{gap:24px}
.privacy-step p{line-height:1.45}
.privacy-step small{margin-top:8px;line-height:1.6}
.build-controls fieldset{min-width:0}
.cachet-seal .buy-action>.field-help{margin-top:16px}
.cachet-seal .buy-session{gap:16px;flex-wrap:wrap}
.public-private-grid{margin-top:28px}
@media(min-width:1024px){.hero.rail-hero{min-height:820px}.hero-heading{padding-block:40px}.hero-heading h1{font-size:clamp(48px,5vw,72px)}.hook-mount{height:820px}.privacy-step+.privacy-step{padding-left:44px}}
@media(max-width:767px){.hero-heading h1{line-height:1.1;margin-block:24px}.rail-section>header{margin-bottom:24px}.privacy-band,.public-private{padding-block:32px}.privacy-steps{gap:28px}.cachet-seal .buy-action,.cachet-seal .buy-result{padding:24px 20px}}
/* Hidden detail faces must not widen the page behind their 3D front faces. */
.piece-card:not(.is-flipped) .piece-back{display:none}
.piece-card.is-flipped .piece-back{min-width:0;max-width:100%;overflow-wrap:anywhere}