/* LOCKET design pass, 2026-09-27. Loaded last on index and machine.
   Reference: evidence/privacy/parity-concept/locket.png, left half. A rounded glass
   locker with lime edges, a white ceramic robot inside, a frosted door plate with a lime
   keyhole on its right edge, on a pale mint ground.
   1. Try a buy: a keypad on the frosted door plate. Its readout is the robot's visor
      (ink glass, two lime eye lights). A key press runs four seal lights, turns the
      keyhole, and the glass locker door swings back on the piece.
   2. Build a piece: a combination lock. One numbered tumbler row per trait, the piece
      standing on a lime-edged glass shelf above an engraved odds plate.
   3. UI pass: one badge per fact, pills never wrap, a ruled runtime list instead of a
      card grid, body copy under 65ch, the honest-limits line in the privacy band.
   Spacing on the 4pt scale from tokens.css. No new hues: ink, white, mint, lime. */
:root{
  --ceramic:linear-gradient(180deg,#ffffff 0%,#f3f7f5 62%,#e6eee9 100%);
  --ceramic-edge:0 1px 0 #ffffff inset,0 -3px 0 rgba(15,25,20,.07) inset,0 8px 16px -10px rgba(15,25,20,.38);
  --frost:linear-gradient(118deg,rgba(255,255,255,.9) 0%,rgba(240,247,243,.82) 42%,rgba(255,255,255,.96) 43%,rgba(240,247,243,.84) 58%,rgba(255,255,255,.9) 100%);
  --locker-radius:28px;
}

/* ---------- 3. UI pass (shared) ---------- */
.tag{white-space:nowrap}
p.tech-pill{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hero-heading .hero-trading{max-width:58ch}
.hero-piece-hint{margin-top:var(--space-16);color:var(--ink-soft);font-size:14px}
.privacy-highlight-detail{max-width:40ch}
.privacy-highlight-limit{max-width:65ch;margin-top:var(--space-24);padding-top:var(--space-16);border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--ink)}
.privacy-locker-list li{max-width:60ch}
.buy-proof>p,.proof-seed,#lookupStatus,.rail-section>p,.tech-section .tech-row dd,.privacy-locker-honest{max-width:65ch}
/* 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-radius:0;background:transparent;padding:var(--space-24) var(--space-16);border-right:1px solid var(--line);transform:none;transition:background var(--fx-hover) var(--ease-soft)}
.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}
}

/* ---------- 1. Try a buy: keypad unlocks a glass locker ---------- */
.locker-rig{gap:var(--space-48);align-items:start}
.locker-rig .buy-action .component-caption{max-width:46ch}
/* The frosted door plate the keypad sits on. */
.keypad-plate{position:relative;max-width:440px;margin-top:var(--space-24);padding:var(--space-20);border:2px solid var(--glow);border-radius:var(--locker-radius);background:var(--frost);box-shadow:inset 0 0 0 6px rgba(255,255,255,.55),0 24px 48px -32px rgba(15,25,20,.45)}
/* The readout is the robot's visor: ink glass, two lime eye lights, lime text. */
.keypad-visor{display:flex;align-items:center;gap:var(--space-16);min-width:0;height:56px;padding:0 var(--space-20);border-radius:20px;background:radial-gradient(120% 140% at 30% 0%,#26313a 0%,var(--ink) 55%);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -8px 16px rgba(0,0,0,.45)}
.visor-eyes{display:flex;gap:var(--space-8);flex:none}
.visor-eyes i{display:block;width:16px;height:6px;border-radius:3px;background:var(--glow);box-shadow:0 0 8px var(--glow);transition:opacity 200ms var(--ease-soft)}
.visor-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--glow);font:600 16px/1 var(--font-mono);letter-spacing:.08em;text-shadow:0 0 6px color-mix(in srgb,var(--glow) 60%,transparent)}
.locker-try:has(#tryLocker[data-state=sealing]) .visor-eyes i{animation:visor-blink 600ms steps(1) 1}
.locker-try:has(#tryLocker[data-state=open]) .visor-eyes i{width:14px;height:8px;background:none;box-shadow:none;border:3px solid var(--glow);border-bottom:0;border-radius:8px 8px 0 0}
.locker-try:has(#tryLocker[data-state=denied]) .visor-eyes i{opacity:.4}
@keyframes visor-blink{0%,40%,100%{transform:none}20%,60%{transform:scaleY(.2)}}
/* Four ceramic keys, numbered like a keypad, the amount large. */
.locker-rig .keypad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12);max-width:none;margin-top:var(--space-16)}
.locker-rig .keypad-key{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"num amount" "label label";align-items:center;justify-items:start;gap:var(--space-8) var(--space-12);aspect-ratio:auto;min-height:88px;padding:var(--space-16);border:1px solid var(--line);border-radius:20px;background:var(--ceramic);box-shadow:var(--ceramic-edge);color:var(--ink);text-align:left;overflow:hidden;transition:transform var(--fx-hover) var(--ease),box-shadow var(--fx-hover) var(--ease)}
.locker-rig .keypad-key::before{display:none}
.locker-rig .keypad-key:hover{background:var(--ceramic);transform:translateY(-2px)}
.locker-rig .keypad-key:active{transform:translateY(2px);box-shadow:0 1px 0 #ffffff inset,0 2px 6px -4px rgba(15,25,20,.4)}
.locker-rig .keypad-key:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}
.locker-rig .keypad-key[aria-busy=true]{background:var(--ceramic);opacity:1;box-shadow:0 0 0 3px var(--glow),var(--ceramic-edge)}
.key-num{grid-area:num;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--glow);background:var(--card);font:600 12px/1 var(--font-mono);color:var(--ink)}
.locker-rig .keypad-key small{grid-area:amount;order:0;font:700 24px/1 var(--font-mono);color:var(--ink);white-space:nowrap}
.locker-rig .keypad-key strong{grid-area:label;order:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);opacity:1}
/* Four seal lights: they come on in order while a buy runs, and stay on once it lands. */
.locker-rig .seal-sequence{display:block;margin:var(--space-16) 0 0;padding:var(--space-16) 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.locker-rig .seal-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12) var(--space-16);margin:0;padding:0}
.locker-rig .seal-step{display:flex;align-items:flex-start;gap:var(--space-8);max-width:none;min-width:0;opacity:.55}
.seal-led{flex:none;width:10px;height:10px;margin-top:3px;border-radius:50%;background:var(--line);box-shadow:inset 0 1px 1px rgba(15,25,20,.2)}
.locker-rig .seal-step-label{font:600 12px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.locker-rig .seal-step-note{font-size:12px;line-height:1.45}
.locker-rig .seal-sequence.is-sealing .seal-led{animation:seal-led-on 200ms var(--ease) forwards}
.locker-rig .seal-sequence.is-sealing .seal-step:nth-child(2) .seal-led{animation-delay:150ms}
.locker-rig .seal-sequence.is-sealing .seal-step:nth-child(3) .seal-led{animation-delay:300ms}
.locker-rig .seal-sequence.is-sealing .seal-step:nth-child(4) .seal-led{animation-delay:450ms}
.locker-rig .seal-sequence.is-sealed .seal-step{opacity:1}
.locker-rig .seal-sequence.is-sealed .seal-led{background:var(--glow);box-shadow:0 0 8px var(--glow)}
@keyframes seal-led-on{to{background:var(--glow);box-shadow:0 0 8px var(--glow)}}
.keypad-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12);margin-top:var(--space-16);font-size:13px;line-height:1.4;color:var(--ink-soft)}
.locker-rig .buy-action>.field-help{margin-top:var(--space-16)}
/* The glass locker: the piece stands on a lime-edged glass shelf behind a frosted door
   that swings back on its left hinge. The door is decoration, never a click target. */
.glass-locker{position:relative;width:min(100%,280px);margin:0 auto;perspective:900px}
.glass-locker .piece-preview{width:100%;margin:0}
.glass-locker-shelf{display:block;height:12px;margin-top:var(--space-12);border:2px solid var(--glow);border-top-color:rgba(255,255,255,.95);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.9),color-mix(in srgb,var(--tint) 70%,transparent));box-shadow:0 14px 20px -12px rgba(15,25,20,.4)}
.glass-locker-door{position:absolute;top:0;left:0;right:0;height:calc(100% - 24px);z-index:2;border:2px solid var(--glow);border-radius:var(--locker-radius);background:var(--frost);box-shadow:inset 0 0 0 5px rgba(255,255,255,.6),0 18px 36px -24px rgba(15,25,20,.45);transform-origin:left center;transform:rotateY(0deg);pointer-events:none;transition:transform 560ms var(--ease-out-expo),opacity 240ms var(--ease-soft) 0ms}
.glass-locker-latch{position:absolute;top:50%;right:var(--space-12);display:grid;place-items:center;width:40px;height:96px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 #ffffff;transform:translateY(-50%)}
.glass-locker-latch svg{width:20px;height:20px;fill:var(--glow);filter:drop-shadow(0 0 1px rgba(15,25,20,.35));transition:transform 600ms var(--ease-out-expo)}
.glass-locker[data-state=sealing] .glass-locker-latch svg{transform:rotate(90deg)}
.glass-locker[data-state=sealing] .glass-locker-door{animation:door-edge 600ms var(--ease-soft) 1}
.glass-locker[data-state=open] .glass-locker-door{transform:rotateY(-104deg);opacity:0;transition:transform 560ms var(--ease-out-expo),opacity 200ms var(--ease-soft) 360ms}
.glass-locker[data-state=open] .glass-locker-latch svg{transform:rotate(90deg)}
.glass-locker[data-state=denied] .glass-locker-latch{animation:latch-refuse 360ms var(--ease-soft) 1}
@keyframes door-edge{50%{box-shadow:inset 0 0 0 5px rgba(255,255,255,.6),0 0 0 4px color-mix(in srgb,var(--glow) 45%,transparent),0 18px 36px -24px rgba(15,25,20,.45)}}
@keyframes latch-refuse{20%{transform:translate(-4px,-50%)}40%{transform:translate(4px,-50%)}60%{transform:translate(-2px,-50%)}80%{transform:translate(2px,-50%)}100%{transform:translateY(-50%)}}
@media(min-width:1024px){.locker-rig{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-64)}}
@media(max-width:1023px){.locker-rig{grid-template-columns:minmax(0,1fr)}.keypad-plate{max-width:none}}
@media(max-width:767px){.glass-locker{grid-row:1}}
@media(max-width:390px){.keypad-plate{padding:var(--space-16)}.keypad-visor{padding:0 var(--space-16);gap:var(--space-12)}.visor-text{font-size:14px}.locker-rig .keypad-key{min-height:80px;padding:var(--space-12)}.locker-rig .keypad-key small{font-size:20px}.locker-rig .seal-steps{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){
  .glass-locker-door,.glass-locker[data-state=open] .glass-locker-door{transition:opacity 160ms linear;transform:none}
  .glass-locker-latch svg{transition:none}
  .glass-locker[data-state=denied] .glass-locker-latch,.glass-locker[data-state=sealing] .glass-locker-door{animation:none}
  .locker-try .visor-eyes i{animation:none!important}
  .locker-rig .seal-sequence.is-sealing .seal-led{animation:none;background:var(--glow)}
  .locker-rig .keypad-key,.locker-rig .keypad-key:hover,.locker-rig .keypad-key:active{transition:none;transform:none}
}

/* ---------- 2. Build a piece: a combination lock ---------- */
.combo-bench{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40);margin-top:var(--space-32)}
.combo-stand{display:grid;justify-items:center;align-content:start}
.combo-piece{width:min(100%,320px)}
.combo-piece .build-card{width:100%}
.combo-shelf{display:block;width:min(100%,352px);height:12px;margin-top:var(--space-12);border:2px solid var(--glow);border-top-color:rgba(255,255,255,.95);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.9),color-mix(in srgb,var(--tint) 70%,transparent));box-shadow:0 14px 20px -12px rgba(15,25,20,.4)}
.combo-plate{width:min(100%,352px);margin-top:var(--space-24);text-align:center}
.combo-plate>strong{display:block;font:700 clamp(28px,3vw,40px)/1.1 var(--font-display);letter-spacing:-.03em}
.combo-plate>.tag{margin-top:var(--space-12)}
.combo-plate>p{max-width:40ch;margin:var(--space-12) auto 0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.combo-stand.is-swinging .combo-piece{animation:combo-settle 420ms var(--ease) 1}
.combo-stand.is-swinging .combo-shelf{animation:combo-glint 480ms var(--ease-soft) 1}
@keyframes combo-settle{from{transform:translateY(-8px)}to{transform:none}}
@keyframes combo-glint{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 40%,transparent),0 14px 20px -12px rgba(15,25,20,.4)}}
.combo-panel{display:grid;gap:var(--space-24);min-width:0}
.combo-panel .build-controls{display:grid;gap:var(--space-20)}
.combo-panel .build-shortcuts{margin-top:0}
/* One tumbler row per trait: a numbered stamped label over a recessed channel. */
.tumbler-row{display:grid;gap:var(--space-8);min-width:0;margin:0;padding:0;border:0}
.tumbler-label{display:inline-flex;align-items:center;gap:var(--space-8);float:none;margin:0 0 var(--space-8);padding:0;font:500 12px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.tumbler-index{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--glow);font:600 12px/1 var(--font-mono);letter-spacing:0}
.tumbler-track{display:flex;flex-wrap:wrap;gap:var(--space-8);min-width:0;padding:var(--space-8);border-radius:24px;background:var(--band);box-shadow:inset 0 2px 4px rgba(15,25,20,.10),inset 0 0 0 1px var(--line)}
.tumbler{display:inline-flex;align-items:center;gap:var(--space-8);min-height:44px;padding:var(--space-8) var(--space-12);border:1px solid var(--line);border-radius:16px;background:var(--ceramic);box-shadow:var(--ceramic-edge);color:var(--ink);font:500 14px/1.2 var(--font-body);white-space:nowrap;cursor:pointer;transition:transform 160ms var(--ease),background 160ms var(--ease-soft),color 160ms var(--ease-soft)}
.tumbler-led{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line)}
.tumbler-pct{font:400 12px/1 var(--font-mono);color:var(--ink-soft)}
.tumbler:hover{transform:translateY(-1px)}
.tumbler:active{transform:translateY(1px)}
.tumbler:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.tumbler[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--card);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 6px 12px -8px rgba(15,25,20,.6)}
.tumbler[aria-pressed=true] .tumbler-led{background:var(--glow);box-shadow:0 0 6px var(--glow)}
.tumbler[aria-pressed=true] .tumbler-pct{color:color-mix(in srgb,var(--card) 72%,transparent)}
@media(min-width:1024px){
  .combo-bench{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:var(--space-64);align-items:start}
  .combo-stand{position:sticky;top:calc(var(--nav-h) + var(--space-24))}
}
@media(max-width:390px){.tumbler{padding:var(--space-8) var(--space-12);font-size:13px}.tumbler-track{gap:var(--space-4);padding:var(--space-4)}}
@media(prefers-reduced-motion:reduce){
  .combo-stand.is-swinging .combo-piece,.combo-stand.is-swinging .combo-shelf{animation:none}
  .tumbler,.tumbler:hover,.tumbler:active{transition:none;transform: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. */
: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. */
h1,h2,h3,.component-title,.kicker,summary,.line-row p,#closing-title{text-wrap:balance}
p,li,dd,figcaption,.component-caption{text-wrap:pretty}

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

/* Body copy measure. */
.rail-section>p,.rail-section>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. */
.btn:disabled,.btn[aria-disabled=true]{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{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)}

/* LOCKET: tumbler keys keep 8 between them on phones too. */
@media(max-width:390px){.tumbler-track{gap:var(--space-8)}}
/* 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)}}