/* ============================================================
   Sipher Audio, site stylesheet
   Presentation language: Limo Series (paper, hairlines, mono on
   every technical detail). The label grammar that used to live on
   the box art now lives on the page: armed square as section
   marker, hazard stripe, mono spec rows.
   ============================================================ */

:root{
  /* Type roles. Every rule below asks for a role, never a typeface, so the whole
     site's voice changes from these three lines. */
  --f-disp:'Archivo',Impact,sans-serif;
  --f-body:'Manrope',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --f-tech:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --paper:#EFECE3; --paper-deep:#E4E0D4; --paper-hi:#F8F6F0;
  --ink:#16150F; --ink-soft:#55524A; --ink-faint:#6F6B62;
  --line:rgba(22,21,15,.15); --line-soft:rgba(22,21,15,.09);
  --volt:#E4C21F;          /* graphic strength, bars, chips, rules */
  --volt-t:#7A6408;        /* text strength on paper, 4.9:1 */
  --plate:#0B0B0A;         /* the dark product plate */
  --ring:rgba(22,21,15,.10);
  --ok:#2F6B3A;
  --shadow-1:0 1px 2px rgba(22,21,15,.06), 0 18px 34px -22px rgba(22,21,15,.42);
  --shadow-2:0 2px 6px rgba(22,21,15,.08), 0 42px 70px -38px rgba(22,21,15,.55);
  --grain-blend:multiply; --grain-op:.30;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"]{
  --paper:#0C0C0B; --paper-deep:#121210; --paper-hi:#1A1917;
  --ink:#EFEDE4; --ink-soft:#9E9A90; --ink-faint:#8B8780;
  --line:rgba(239,237,228,.15); --line-soft:rgba(239,237,228,.08);
  --volt:#F0D43A;
  --volt-t:#F0D43A;        /* on black the brand yellow is legible at full strength */
  --plate:#000;
  --ring:rgba(239,237,228,.16);
  --ok:#7FC08C;
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 18px 34px -22px rgba(0,0,0,.9);
  --shadow-2:0 2px 6px rgba(0,0,0,.6), 0 42px 70px -38px rgba(0,0,0,1);
  --grain-blend:screen; --grain-op:.16;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body);
  font-size:16px; line-height:1.6; letter-spacing:-.005em;
  overflow-x:hidden; min-height:100vh;
  display:flex; flex-direction:column;
  transition:background .4s var(--ease), color .4s var(--ease);
}
main{flex:1 0 auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--volt);color:#16150F}
:focus-visible{outline:2px solid var(--volt-t);outline-offset:3px;border-radius:3px}

/* Press grain, the paper stock, and on dark a faint sensor noise. */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  mix-blend-mode:var(--grain-blend);opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  transition:opacity .4s var(--ease);
}

/* ---------- type roles ---------- */
.mono{font-family:var(--f-tech);
  font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.disp{font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  letter-spacing:-.02em;line-height:1.02}
h1.page-h{font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.035em;line-height:1.02}
h2.sec-h{font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 108,'wght' 700;
  font-size:clamp(1.32rem,3.4vw,2.15rem);letter-spacing:-.025em;line-height:1.1}
h3.sub-h{font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;
  font-size:1.14rem;letter-spacing:-.02em}

/* the armed square, this page's section marker, lifted from STATUS: ARMED */
.armed{display:inline-block;width:.38em;height:.38em;background:var(--volt);
  margin-left:.42em;vertical-align:.08em;animation:blip 2.6s steps(1,end) infinite}
@keyframes blip{0%,72%{opacity:1}73%,100%{opacity:.22}}

/* hazard rule, the box's corner stripe, used sparingly */
.hazard{height:7px;width:clamp(120px,20vw,210px);
  background:repeating-linear-gradient(115deg,var(--volt) 0 9px,transparent 9px 19px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.wrap{width:min(1120px,100% - 2.6rem);margin-inline:auto}
.wrap-n{width:min(860px,100% - 2.6rem);margin-inline:auto}
section{position:relative}
.rule{height:1px;background:var(--line-soft);border:0}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:1.2rem;
  padding:.85rem clamp(1rem,3vw,2rem);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease)}
.nav.solid{background:color-mix(in srgb,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.nav-mark{font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 122,'wght' 800;
  font-size:.82rem;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  opacity:0;transform:translateY(-4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.nav.solid .nav-mark{opacity:1;transform:none}
.nav-links{margin-left:auto;display:flex;gap:1.15rem;align-items:center;
  opacity:0;transition:opacity .35s var(--ease)}
.nav.solid .nav-links{opacity:1}
.nav-links a{font-family:var(--f-tech);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links a[aria-current]{box-shadow:inset 0 -2px 0 var(--volt)}
@media (max-width:860px){.nav-links a:nth-child(n+4){display:none}}
@media (max-width:620px){.nav-links a:nth-child(n+3){display:none}}
/* below this the cart and the mode chip are what matter, the links wrap badly */
@media (max-width:520px){.nav-links{display:none}.nav-right{margin-left:auto}}

/* cart pill */
.cart-btn{display:inline-flex;align-items:center;gap:.42rem;text-decoration:none;
  font-family:var(--f-tech);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:.3rem .62rem;color:var(--ink-soft);
  transition:border-color .25s,color .25s}
.cart-btn:hover{border-color:var(--volt-t);color:var(--ink)}
.cart-n{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--volt);color:#16150F;font-size:.58rem;font-weight:600;letter-spacing:0}
.cart-n[data-empty="1"]{background:var(--line);color:var(--ink-faint)}

/* theme control, styled as the pack's STATUS chip, always live, even over the hero */
.mode{display:flex;align-items:center;gap:.5rem;background:none;border:0;
  cursor:pointer;padding:.3rem .1rem;font-family:var(--f-tech);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.nav-right{margin-left:1.15rem;display:flex;align-items:center;gap:.9rem}
.nav-links:empty + .nav-right,.nav > .nav-right:nth-child(2){margin-left:auto}
.mode-chip{display:inline-flex;align-items:center;justify-content:center;min-width:56px;
  padding:.24rem .45rem;border:1px solid var(--volt-t);color:var(--volt-t);font-weight:600;
  letter-spacing:.16em;transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease)}
.mode:hover .mode-chip{background:var(--volt);color:#16150F;border-color:var(--volt)}
html[data-theme="dark"] .mode-chip{background:var(--volt);color:#0C0C0B;border-color:var(--volt)}
html[data-theme="dark"] .mode:hover .mode-chip{background:transparent;color:var(--volt)}
@media (max-width:560px){.mode-label{display:none}}

/* ---------- art slot ----------
   The reserved plate the new artwork drops into. Sized and labelled so
   there is no guessing about the frame or the export dimensions. */
.artslot{position:relative;background:var(--plate);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-2);outline:1px solid var(--ring);outline-offset:-1px;
  display:grid;place-items:center;aspect-ratio:3/2}
.artslot.sq{aspect-ratio:1/1}
.artslot.wide{aspect-ratio:16/9}
.artslot::before{content:"";position:absolute;inset:11px;border:1px dashed rgba(240,212,58,.20);
  border-radius:9px;pointer-events:none}
.artslot .as-hz{position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(115deg,#F0D43A 0 9px,transparent 9px 19px);opacity:.6}
.as-in{position:relative;z-index:1;text-align:center;padding:1.2rem}
.as-t{display:block;font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 122,'wght' 800;
  font-size:clamp(.78rem,1.9vw,1.02rem);letter-spacing:.2em;text-transform:uppercase;color:#EFEDE4}
.as-s{display:block;font-family:var(--f-tech);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#8B8780;margin-top:.5rem}
.as-badge{position:absolute;top:.7rem;left:.7rem;z-index:2;padding:.22rem .5rem;
  font-family:var(--f-tech);font-size:.55rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#F0D43A;border:1px solid rgba(240,212,58,.45);background:rgba(0,0,0,.4)}
.artslot.mini{border-radius:11px}
.artslot.mini .as-t{font-size:.6rem;letter-spacing:.14em}
.artslot.mini .as-s,.artslot.mini .as-badge,.artslot.mini .as-hz{display:none}
.artslot.mini::before{inset:6px}

/* a slot with real artwork in it: the plate becomes a frame, the placeholder
   furniture (dashed rule, hazard bar, spec label, ART TBD tag) gets out of the way */
.artslot > img{width:100%;height:100%;object-fit:cover;display:block}
.artslot.filled::before{display:none}
.artslot.filled .as-hz,.artslot.filled .as-in,.artslot.filled .as-badge{display:none}
.incl-ix .as-t,.line-art .as-t,.dl-art .as-t{display:none}

/* ---------- hero ---------- */
.hero{padding:7.5rem 0 3.4rem;text-align:center;overflow:hidden}
.hero-mark{font-family:var(--f-disp);font-weight:900;font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(3.6rem,17.5vw,13.5rem);line-height:.82;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--ink)}
.hero-sub{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1.6rem}
.hero-sub .hz{width:clamp(28px,6vw,52px);height:5px;
  background:repeating-linear-gradient(115deg,var(--volt) 0 7px,transparent 7px 15px)}
@media (max-width:560px){.hero-sub .hz{display:none}}
/* The art sits below the wordmark with real clearance and is capped at the width
   the source can actually carry, 815px of true detail. Stretching it wider was
   inventing resolution that isn't there. */
.hero-art{position:relative;margin:2.9rem auto 0;
  width:min(660px,100%);aspect-ratio:1.807;
  background:var(--plate);overflow:hidden;border-radius:16px;
  box-shadow:var(--shadow-2);outline:1px solid var(--ring);outline-offset:-1px}
@media (max-width:760px){.hero-art{width:min(420px,100%);aspect-ratio:1.15}}
.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-art .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s var(--ease)}
.hero-art.ready .hero-poster{opacity:0}
.hero-art.static canvas{display:none}
.hero-art.static .hero-poster{opacity:1}
.hero-strip{margin-top:1.7rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem}
.hero-strip span{white-space:nowrap}
/* Scrolling is the only thing to do on this screen, and it was set at caption
   size in the same mono as every other micro-label, indistinguishable from the
   furniture. It's a target now: a labelled circle with a chevron drifting down
   on a slow loop, and it takes you to the offer rather than just suggesting it. */
.scroll-cue{margin-top:2.2rem;display:inline-flex;flex-direction:column;align-items:center;
  gap:.65rem;text-decoration:none;color:var(--ink-faint);transition:color .25s var(--ease)}
.scroll-cue .mono{color:inherit;transition:color .25s var(--ease)}
.scroll-arrow{display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:50%;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.scroll-arrow i{display:block;width:9px;height:9px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  animation:cue-drift 2.8s var(--ease) infinite;
  transition:transform .25s var(--ease),opacity .25s var(--ease)}
@keyframes cue-drift{
  0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.5}
  50%    {transform:translateY(1px) rotate(45deg);opacity:1}
}
.scroll-cue:hover,.scroll-cue:focus-visible{color:var(--volt-t)}
.scroll-cue:hover .scroll-arrow,.scroll-cue:focus-visible .scroll-arrow{
  border-color:var(--volt-t);background:color-mix(in srgb,var(--volt) 14%,transparent)}
/* on hover the drift stops and the chevron settles, so the thing you are pointing
   at holds still while you aim at it */
.scroll-cue:hover i,.scroll-cue:focus-visible i{
  animation:none;transform:translateY(2px) rotate(45deg);opacity:1}

/* the fixed nav would otherwise cover whatever you just jumped to */
section[id],h2[id]{scroll-margin-top:5.2rem}

/* corner registration marks, printed-document furniture, hero only */
.crop{position:absolute;width:16px;height:16px;border:1px solid var(--line);pointer-events:none}
.crop.tl{top:74px;left:22px;border-right:0;border-bottom:0}
.crop.tr{top:74px;right:22px;border-left:0;border-bottom:0}
.crop.bl{bottom:22px;left:22px;border-right:0;border-top:0}
.crop.br{bottom:22px;right:22px;border-left:0;border-top:0}
@media (max-width:640px){.crop{display:none}}

/* ---------- page head (inner pages) ---------- */
.phead{padding:6.4rem 0 0}
.crumb{display:flex;gap:.5rem;align-items:center;margin-bottom:1.1rem}
.crumb a{text-decoration:none;color:var(--ink-faint)}
.crumb a:hover{color:var(--ink)}
.phead p.lede{margin-top:.9rem;font-size:1.02rem;color:var(--ink-soft);max-width:56ch}

/* ---------- section head ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  padding-bottom:1.1rem;margin-bottom:2rem;border-bottom:1px solid var(--line)}
.sec-head p{font-size:.95rem;color:var(--ink-soft);max-width:38ch}
/* a head with no supporting paragraph shouldn't keep the two-column gap open */
.sec-head.solo{display:block;padding-bottom:1rem;margin-bottom:1.6rem}
@media (max-width:640px){.sec-head{flex-direction:column;align-items:flex-start;gap:.6rem}}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-align:center;border:0;border-radius:11px;cursor:pointer;
  padding:1rem 1.4rem;background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;
  font-size:1rem;letter-spacing:-.01em;
  transition:transform .18s var(--ease),background .3s var(--ease),color .3s var(--ease),opacity .2s}
.btn:hover{transform:translateY(-2px)}
/* the one button that has to be pressed: shouted, and it inverts under the cursor
   so the yellow moves from the fill to the words */
.btn.shout{font-variation-settings:'wdth' 108,'wght' 800;font-weight:800;
  font-size:1.02rem;letter-spacing:.055em;text-transform:uppercase;
  padding:1.05rem 1.8rem;border:1px solid transparent}
.btn.shout:hover,.btn.shout:focus-visible{background:#0B0B0A;color:var(--volt);
  border-color:var(--volt)}
.btn.block{display:block;width:100%}
html[data-theme="dark"] .btn{background:var(--volt);color:#0C0C0B}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--volt-t)}
html[data-theme="dark"] .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:.62rem .95rem;font-size:.88rem;border-radius:9px}
/* a two-line button: the offer on top, the terms underneath, so the upsell can
   say what you get without being crammed onto one line */
.btn.stack{line-height:1.25;padding-block:.72rem}
.btn.stack b{display:block;font-weight:inherit;font-variation-settings:inherit}
.btn.stack span{display:block;margin-top:.22rem;font-family:var(--f-tech);
  font-size:.6rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.linky{color:var(--volt-t);text-underline-offset:3px}

/* ---------- how a bank is built ---------- */
.build{padding:4.5rem 0 4rem}
.build-grid{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:start}
@media (min-width:900px){
  .build-grid{grid-template-columns:1fr 1.02fr;gap:3.4rem}
  .build-grid.stack{grid-template-columns:1fr;gap:2.4rem}
}
.manifest{background:var(--paper-hi);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-1)}
.manifest-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--line)}
@media (max-width:560px){.manifest-top{flex-direction:column;align-items:flex-start;gap:.25rem}}
.roles{display:flex;flex-wrap:wrap;gap:.35rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line)}
.role-chip{font-family:var(--f-tech);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:5px;padding:.22rem .44rem;color:var(--ink-soft)}
.role-chip b{color:var(--volt-t);font-weight:600}
.manifest-list{position:relative;max-height:300px;overflow:hidden;padding:.35rem 0}
.manifest-list::after{content:"";position:absolute;inset:auto 0 0;height:96px;
  background:linear-gradient(180deg,transparent,var(--paper-hi))}
.mf-row{display:flex;align-items:center;gap:.75rem;padding:.34rem 1.1rem;
  font-family:var(--f-tech);font-size:.76rem;letter-spacing:-.01em;color:var(--ink-soft)}
.mf-role{flex:none;width:40px;font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--volt-t)}
.mf-name{color:var(--ink)}
.manifest-foot{padding:.8rem 1.1rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem}
.steps{display:flex;flex-direction:column}
.step{padding:1.15rem 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0;padding-top:0}
.step-n{font-family:var(--f-tech);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  color:var(--volt-t);display:block;margin-bottom:.35rem}
.step-t{font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;
  font-size:1.14rem;letter-spacing:-.02em;margin-bottom:.3rem}
.step-d{font-size:.94rem;color:var(--ink-soft);line-height:1.55;max-width:44ch}

html[data-theme="dark"] .artslot{background:#131311}

/* ---------- the three products ---------- */
.lineup{padding:clamp(3.2rem,6vw,4.4rem) 0 3.4rem}
.prods{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media (min-width:820px){.prods{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
.prod{display:flex;flex-direction:column;text-decoration:none;
  background:var(--paper-hi);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.prod:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--volt-t)}
.prod.lead{border-color:var(--volt-t)}
.prod-art{padding:.75rem .75rem 0}
.prod-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.prod-kind{display:block;margin-bottom:.35rem}
.prod-name{font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 110,'wght' 800;
  font-size:1.3rem;letter-spacing:-.03em;line-height:1.08}
.prod-d{margin:.55rem 0 1rem;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
/* margin-top:auto rather than flex:1 on the description, the price row has to sit
   on the same line across all three cards whatever length the copy runs to, and
   growing the paragraph only bottom-aligns it when every card wraps identically. */
.prod-foot{flex:none;margin-top:auto;padding-top:.85rem;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.prod-price,.prod-deal{flex:none;align-self:baseline}
/* The price is the loudest thing in this row and nothing else in it is a number.
   It previously tied with a yellow "Save $48" sitting right next to it, so the
   first figure a new visitor's eye landed on was not what the thing costs. The
   old price stays, but as a struck anchor attached to the price, read as
   "was / now", not as a second number to work out. */
.prod-price{font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 110,'wght' 800;
  font-size:1.5rem;letter-spacing:-.035em;font-feature-settings:'tnum'}
.prod-price s{margin-left:.42rem;font-family:var(--f-tech);font-size:.72rem;font-weight:500;
  letter-spacing:0;color:var(--ink-faint);vertical-align:.14em}
/* What you get, answering the price, not competing with it. Deliberately smaller
   than the price: this half of the row says what is in the box, and the only
   figure on the card is what it costs.
   Named is-free, not free, a bare .free already exists on the free-presets
   section and carries 4.4rem of bottom padding. */
.prod-deal{text-align:right;line-height:1.15}
.prod-deal b{display:block;font-family:var(--f-disp);
  font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;font-size:1.05rem;
  letter-spacing:-.02em;color:var(--volt-t)}
.prod-deal>span{display:block;margin-top:.1rem;font-size:.7rem;color:var(--ink-faint);
  letter-spacing:.01em}

/* ---------- offer / buy box ---------- */
.offer{padding:3.4rem 0 4.2rem}
.offer-grid{display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:start}
@media (min-width:940px){
  .offer-grid{grid-template-columns:.9fr 1fr;gap:2.6rem}
  /* product pages put the content left and the buy box right */
  .offer-grid.rev{grid-template-columns:1fr .82fr}
}
.card{background:var(--paper-hi);border:1px solid var(--line);border-radius:16px;
  padding:1.5rem;box-shadow:var(--shadow-1);position:relative}
.card.sticky{position:sticky;top:5.2rem}
@media (max-width:939px){.card.sticky{position:static}}
.card-head{display:flex;gap:1rem;align-items:center;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.card-thumb{flex:none;width:74px}
.card-name{font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 110,'wght' 800;
  font-size:1.5rem;letter-spacing:-.03em;line-height:1.05}
.card-lane{margin-top:.25rem}
.price-row{display:flex;align-items:baseline;gap:.6rem;padding:1.2rem 0 .2rem;flex-wrap:wrap}
.price{font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  font-size:2.9rem;letter-spacing:-.045em;line-height:1;font-feature-settings:'tnum'}
.price-was{font-family:var(--f-tech);font-size:.8rem;color:var(--ink-faint);text-decoration:line-through}
.price-save{font-family:var(--f-tech);font-size:.6rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#16150F;background:var(--volt);padding:.2rem .42rem}
.price-note{color:var(--ink-faint);margin-bottom:1.2rem}

/* included-with manifest inside the buy box */
.incl{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:1.2rem}
.incl-top{padding:.6rem .85rem;border-bottom:1px solid var(--line);background:var(--paper-deep)}
.incl-row{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-top:1px solid var(--line-soft)}
.incl-row:first-of-type{border-top:0}
.incl-ix{flex:none;width:34px}
.incl-t{flex:1;font-size:.88rem;line-height:1.35}
.incl-t b{font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 104,'wght' 700;
  display:block;font-size:.95rem;letter-spacing:-.015em}
.incl-t span{color:var(--ink-soft);font-size:.8rem}
.incl-p{flex:none;font-family:var(--f-tech);font-size:.68rem;letter-spacing:.06em;
  text-align:right;color:var(--ink-faint)}
.incl-p s{display:block;opacity:.7}
.incl-p b{color:var(--volt-t);letter-spacing:.1em;text-transform:uppercase;font-size:.6rem}

.assure{margin-top:1rem;display:flex;flex-direction:column;gap:.42rem}
.assure div{display:flex;gap:.55rem;font-size:.82rem;color:var(--ink-soft)}
.assure i{color:var(--volt-t);font-style:normal}
.checkout-note{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line-soft);text-align:center}
.checkout-note .mono{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.7rem}
.checkout-note .paylist{justify-content:center}

/* ---------- acceptance marks ----------
   Each SVG is a whole card: its own background, its own hairline. That is why the row
   needs no treatment on paper and only a rim light on black.

   Both dimensions are stated, never `width:auto`, WebKit can fail to resolve the
   intrinsic width of an SVG in an <img> and blows the box out to its full width, which
   forces one badge per line. Children are inline-block for the same reason: if the flex
   container ever fails to apply, the row still reads as a row. */
.paylist{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:0;line-height:0}
.paylist img{display:inline-block;vertical-align:middle;flex:0 0 auto;
  width:38px;height:24px;border-radius:2.5px}
.paylist.sm img{width:33px;height:21px}
.paylist.xs img{width:30px;height:19px}
html[data-theme="dark"] .paylist img{box-shadow:0 0 0 1px rgba(255,255,255,.16)}

/* ---------- spec table ---------- */
.spec{padding-top:.3rem}
.spec-row{display:grid;grid-template-columns:120px 1fr;gap:1.2rem;padding:.82rem 0;border-top:1px solid var(--line)}
.spec-row:first-of-type{border-top:0;padding-top:0}
@media (max-width:560px){.spec-row{grid-template-columns:1fr;gap:.25rem}}
.spec-v{font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.spec-v b{color:var(--ink);font-weight:700}
.delivery{margin-top:1.6rem;padding:1.05rem 1.2rem;background:var(--paper-deep);border-radius:12px;
  font-size:.88rem;color:var(--ink-soft);line-height:1.55}

/* ---------- how it works ---------- */
.flow{padding:0 0 4.2rem}
.flow-grid{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media (min-width:760px){.flow-grid{grid-template-columns:repeat(3,1fr)}}
.flow-step{border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.25rem;background:var(--paper-hi)}
.flow-n{font-family:var(--f-tech);font-size:.62rem;font-weight:600;letter-spacing:.16em;
  color:var(--volt-t);display:block;margin-bottom:.5rem}
.flow-t{font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;
  font-size:1.05rem;letter-spacing:-.02em;margin-bottom:.3rem}
.flow-d{font-size:.87rem;color:var(--ink-soft);line-height:1.5}

/* ---------- proof ---------- */
/* Social proof runs on the inverted brick that used to carry the claim line -
   black on paper, yellow on black. It is the one loud horizontal surface on the
   page, and it earns that by being the thing a stranger most needs: other people
   already bought this. Everything inside takes its ink from currentColor, because
   the page's own --line tokens are derived from the page ground and go invisible
   the moment the surface flips. */
.proof{padding:clamp(3.2rem,7vw,4.6rem) 0;
  background:var(--ink);color:var(--paper);
  transition:background .4s var(--ease),color .4s var(--ease)}
html[data-theme="dark"] .proof{background:var(--volt);color:#0C0C0B}
.proof .sec-h{color:currentColor}
/* the section marker is brand yellow, which disappears on the yellow brick */
.proof .armed{background:currentColor}
.proof .sec-head p{color:currentColor;opacity:.72}
.proof .mono{color:currentColor;opacity:.6}
.blanks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:820px){.blanks{grid-template-columns:1fr}}
.blank{border:1px dashed color-mix(in srgb,currentColor 30%,transparent);
  border-radius:14px;padding:1.2rem;min-height:132px;
  display:flex;flex-direction:column;gap:.7rem}
.blank-top{display:flex;align-items:center;gap:.6rem}
.blank-av{width:30px;height:30px;border-radius:50%;
  border:1px dashed color-mix(in srgb,currentColor 30%,transparent)}
.blank-ln{height:9px;border-radius:3px;background:color-mix(in srgb,currentColor 16%,transparent)}

/* ---------- the offer: one star, two things in the box with it ----------
   Three equal cards said "pick one of these", the opposite of the offer. The
   bank isn't one of three options, it's the product; the other two are what's
   inside the box. Scale, position and a physical connection carry that. A
   "BEST VALUE" ribbon would say it louder and mean it less. */
.star{display:grid;grid-template-columns:1fr;gap:1.5rem;
  background:var(--paper-hi);border:1px solid var(--volt-t);border-radius:18px;
  padding:clamp(1.1rem,3vw,1.8rem);box-shadow:var(--shadow-2)}
@media (min-width:880px){
  .star{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:2.4rem;align-items:center}
}
.star-body{display:flex;flex-direction:column;min-width:0}
.star-kind{display:block;margin-bottom:.4rem}
.star-name{margin:0;font-family:var(--f-disp);font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.035em;line-height:1.02}
.star-name a{text-decoration:none}
.star-name a:hover{color:var(--volt-t)}
.star-d{margin-top:.75rem;font-size:.98rem;color:var(--ink-soft);line-height:1.55;max-width:46ch}
.star-pts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.star-pts span{font-family:var(--f-tech);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.28rem .62rem}
.star-buy{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.1rem 1.4rem}
/* The figure alone stated a number; it didn't say what the number buys. The mono
   lead does that in three words and costs no extra digits, which is the whole
   trick: the eye still lands on one price. */
.star-price{display:flex;flex-direction:column;gap:.5rem}
.price-lead{display:flex;align-items:center;gap:.5rem;color:var(--volt-t)}
.price-lead i{flex:none;width:.42em;height:.42em;background:var(--volt);
  animation:blip 2.6s steps(1,end) infinite}
.price-fig{display:flex;align-items:baseline;gap:.6rem}
.price-fig b{font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(2.2rem,5vw,2.9rem);letter-spacing:-.045em;line-height:1;font-feature-settings:'tnum'}
/* The anchor has to be READ, not just present. At .85rem against a 2.9rem price it
   was decoration; at roughly half the price it registers as a number you are no
   longer paying. It stays neutral on purpose: red here would read as clearance and
   would pull the eye to the figure you are not charging. The accent is spent on
   FREE below, where it means something. */
.price-fig s{font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;
  font-size:clamp(1.2rem,2.7vw,1.6rem);letter-spacing:-.03em;color:var(--ink-faint);
  font-feature-settings:'tnum';
  text-decoration-line:line-through;text-decoration-thickness:2px;
  text-decoration-color:color-mix(in srgb,currentColor 70%,transparent)}
.star-act{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-left:auto}
.star-more{display:inline-block;padding:.5rem 0;font-family:var(--f-tech);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;white-space:nowrap;transition:color .2s}
.star-more:hover{color:var(--ink)}

/* the hairline drops out of the card above: these are attached to it, not
   sitting on the shelf beside it */
.withit{display:flex;align-items:center;gap:.85rem;margin:0;padding:1.25rem 0 .9rem}
.withit::before{content:"";flex:none;width:1px;height:24px;
  background:var(--volt-t);opacity:.55;margin-left:clamp(1.1rem,3vw,1.8rem)}
.withit .mono{color:var(--volt-t)}

.adds{display:grid;grid-template-columns:1fr;gap:.9rem}
@media (min-width:720px){.adds{grid-template-columns:1fr 1fr}}
/* These are $48 of gear being given away and they were reading as footnotes.
   Real cover art at 104px and room for a line about what each one is. */
.add{display:flex;align-items:center;gap:1.15rem;text-decoration:none;
  background:var(--paper-hi);border:1px solid var(--line);border-radius:16px;
  padding:1.15rem 1.3rem;
  transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.add:hover{border-color:var(--volt-t);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.add-art{flex:none;width:104px}
.add-t{flex:1;min-width:0;line-height:1.3;display:flex;flex-direction:column;gap:.3rem}
.add-t b{font-family:var(--f-disp);font-weight:700;
  font-variation-settings:'wdth' 108,'wght' 700;font-size:1.18rem;letter-spacing:-.02em}
.add-d{font-size:.84rem;color:var(--ink-soft);line-height:1.45}
.add-m{font-size:.6rem}
/* On a phone the three columns leave the description about six characters wide,
   which made the card taller than it is wide. Art spans both rows, text and price
   stack beside it, and the price goes inline instead of stacked. */
@media (max-width:560px){
  .add{display:grid;grid-template-columns:74px minmax(0,1fr);
    grid-template-areas:"art text" "art price";align-items:start;gap:.55rem .9rem;padding:1rem}
  .add-art{grid-area:art;width:74px}
  .add-t{grid-area:text}
  .add-p{grid-area:price;max-width:none;text-align:left;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .6rem}
  .add-p s{font-size:.95rem}
  .add-p b{margin-top:0;font-size:1.15rem}
  .add-why{flex:1 0 100%;margin-top:.1rem}
}
/* the struck price is the point: it says what this costs anyone who doesn't buy the bank */
.add-p{flex:none;text-align:right;line-height:1.1;max-width:136px}
/* the reason, small enough to be a footnote and present enough to answer
   "free how?" without anyone having to scroll back up */
.add-why{display:block;margin-top:.35rem;font-size:.58rem;line-height:1.35;text-wrap:balance;
  letter-spacing:.01em;color:var(--ink-faint)}
.add-p s{display:block;font-family:var(--f-disp);font-weight:700;
  font-variation-settings:'wdth' 106,'wght' 700;font-size:1.08rem;letter-spacing:-.02em;
  color:var(--ink-faint);font-feature-settings:'tnum';
  text-decoration-line:line-through;text-decoration-thickness:2px;
  text-decoration-color:color-mix(in srgb,currentColor 70%,transparent)}
.add-p b{display:block;margin-top:.1rem;font-family:var(--f-disp);font-weight:800;
  font-variation-settings:'wdth' 108,'wght' 800;font-size:1.32rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--volt-t)}

/* the last thing before someone leaves without buying */
.offer-out{margin-top:2.2rem;text-align:center}
.offer-out a{font-family:var(--f-tech);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:.28rem;transition:color .2s,border-color .2s}
.offer-out a:hover{color:var(--volt-t);border-color:var(--volt-t)}

.legal-stamp{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line-soft);
  color:var(--ink-faint)}
.prose .sub-h{margin-top:1.6rem}
.prose .qa>p:first-child,.prose .qa>ul:first-child{margin-top:0}

/* ---------- free pack ---------- */
.free{padding:0 0 4.4rem}
.free-card{background:var(--paper-hi);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow-1);
  display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center}
@media (min-width:880px){.free-card{grid-template-columns:.8fr 1.2fr;gap:3rem}}
.free h2{margin:.45rem 0 .6rem}
.free p{font-size:.95rem;color:var(--ink-soft);max-width:46ch}
.free-p2{margin-top:.7rem}
.free .form{margin-top:1.4rem}

/* Same cover as the paid bank, because that is the whole promise, these fifteen
   come out of that box. The ribbon is a corner band rather than a sticker slapped
   on the middle: it reads at thumbnail size and leaves the painting alone. */
.free-art .artslot{position:relative;overflow:hidden;border-radius:14px}
.free-ribbon{position:absolute;top:0;left:0;width:150px;height:150px;overflow:hidden;
  pointer-events:none}
.free-ribbon b{position:absolute;top:31px;left:-42px;width:180px;
  transform:rotate(-45deg);transform-origin:center;
  background:var(--volt);color:#16150F;text-align:center;
  font-family:var(--f-disp);font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  font-size:1.06rem;letter-spacing:.14em;text-transform:uppercase;padding:.34rem 0;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}

.consent-note{margin-top:.5rem;font-size:.78rem;color:var(--ink-faint)}
.form{display:flex;gap:.6rem;flex-wrap:wrap}
.form input[type=email],.form input[type=text]{flex:1 1 220px;padding:.9rem 1rem;border:1px solid var(--line);
  border-radius:11px;background:var(--paper);font-size:.95rem;transition:border-color .25s}
.form input:focus{border-color:var(--volt-t);outline:0}
.form button{flex:none;padding:.9rem 1.35rem;border:0;border-radius:11px;cursor:pointer;
  background:var(--ink);color:var(--paper);font-family:var(--f-disp);
  font-weight:700;font-variation-settings:'wdth' 104,'wght' 700;font-size:.92rem;transition:transform .18s var(--ease)}
.form button:hover{transform:translateY(-2px)}
html[data-theme="dark"] .form button{background:var(--volt);color:#0C0C0B}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin-top:.8rem;font-size:.78rem;color:var(--ink-faint);line-height:1.5}
.form-ok{margin-top:.8rem;font-family:var(--f-tech);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--volt-t);display:none}
.form-ok.on{display:block}

/* ---------- cart / checkout ---------- */
.pane{background:var(--paper-hi);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-1);overflow:hidden}
.pane-top{padding:.9rem 1.2rem;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:baseline;gap:1rem}
.pane-b{padding:1.2rem}
.line{display:flex;gap:1rem;align-items:center;padding:1.05rem 1.2rem;border-top:1px solid var(--line-soft)}
.line:first-of-type{border-top:0}
.line-art{flex:none;width:62px}
.line-t{flex:1;min-width:0}
.line-t b{font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;
  font-size:1rem;letter-spacing:-.02em;display:block}
.line-t span{display:block;color:var(--ink-soft);font-size:.82rem;margin-top:.15rem}
.line-p{flex:none;text-align:right;font-family:var(--f-disp);
  font-weight:700;font-variation-settings:'wdth' 108,'wght' 700;font-size:1.02rem;font-feature-settings:'tnum'}
.line-p s{display:block;font-family:var(--f-tech);font-size:.68rem;color:var(--ink-faint);font-weight:400}
.line-x{flex:none;background:none;border:0;cursor:pointer;color:var(--ink-faint);padding:.3rem;
  font-family:var(--f-tech);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.line-x:hover{color:var(--ink)}
.line.gift{background:color-mix(in srgb,var(--volt) 7%,transparent)}
.totals{padding:1.1rem 1.2rem;border-top:1px solid var(--line)}
.tot-row{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;font-size:.92rem;color:var(--ink-soft)}
.tot-row.grand{padding-top:.8rem;margin-top:.5rem;border-top:1px solid var(--line);
  color:var(--ink);font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 108,'wght' 700;
  font-size:1.3rem;letter-spacing:-.03em;align-items:baseline}
.tot-row.save{color:var(--volt-t)}
.empty{padding:3rem 1.2rem;text-align:center}
.empty p{color:var(--ink-soft);margin:.7rem 0 1.4rem}

.field{margin-bottom:.95rem}
.field label{display:block;margin-bottom:.35rem}
.field input,.field select{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:11px;
  background:var(--paper);font-size:.95rem;transition:border-color .25s}
.field input:focus,.field select:focus{border-color:var(--volt-t);outline:0}
.field input[disabled]{background:var(--paper-deep);color:var(--ink-faint);cursor:not-allowed}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.pay-opts{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.1rem}
.pay-opt{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:11px;cursor:pointer;transition:border-color .25s,background .25s}
.pay-opt:has(input:checked){border-color:var(--volt-t);background:color-mix(in srgb,var(--volt) 8%,transparent)}
.pay-opt input{appearance:none;flex:none;width:15px;height:15px;border:1px solid var(--ink-faint);
  border-radius:50%;position:relative;cursor:pointer}
.pay-opt input:checked{border-color:var(--volt-t)}
.pay-opt input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--volt-t)}
.pay-opt b{font-weight:600;font-size:.92rem}
.pay-opt .paylist{margin-left:auto;flex-wrap:nowrap}

.warnbar{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border-radius:11px;
  border:1px dashed var(--volt-t);background:color-mix(in srgb,var(--volt) 10%,transparent);
  margin-bottom:1.2rem;font-size:.84rem;line-height:1.5;color:var(--ink-soft)}
.warnbar b{color:var(--ink);display:block;font-family:var(--f-tech);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.2rem}

/* ---------- order / downloads ---------- */
.receipt{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media (min-width:900px){.receipt{grid-template-columns:1.15fr .85fr;gap:2.2rem}}
.stamp{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .75rem;border:1px solid var(--volt-t);
  color:var(--volt-t);font-family:var(--f-tech);font-size:.64rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.dl-row{display:flex;gap:1rem;align-items:center;padding:1.05rem 1.2rem;border-top:1px solid var(--line-soft);
  flex-wrap:wrap}
.dl-row:first-of-type{border-top:0}
.dl-art{flex:none;width:56px}
.dl-t{flex:1;min-width:180px}
.dl-t b{font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;
  font-size:1rem;letter-spacing:-.02em;display:block}
.dl-meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.25rem}
.gate{max-width:460px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-size:.86rem}
.kv dt{color:var(--ink-faint);font-family:var(--f-tech);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;padding-top:.22rem}
.kv dd{color:var(--ink)}

/* ---------- faq / prose ---------- */
.prose{padding-bottom:4rem}
.qa{border-top:1px solid var(--line);padding:1.25rem 0}
.qa:first-of-type{border-top:0}
.qa h3{margin-bottom:.4rem}
.qa p{font-size:.94rem;color:var(--ink-soft);line-height:1.6;max-width:66ch}
.qa p + p{margin-top:.6rem}
.qa ol,.qa ul{margin:.6rem 0 0 1.1rem;font-size:.94rem;color:var(--ink-soft);line-height:1.6;max-width:66ch}
.qa li{margin-bottom:.3rem}
.toc{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2.2rem}
.toc a{font-family:var(--f-tech);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:.32rem .7rem;text-decoration:none;color:var(--ink-soft)}
.toc a:hover{border-color:var(--volt-t);color:var(--ink)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:2.8rem 0 2.4rem;margin-top:auto}
.foot-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:820px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}}
.foot-mark{font-family:var(--f-disp);font-weight:900;font-variation-settings:'wdth' 124,'wght' 900;
  font-size:1.6rem;letter-spacing:-.035em;text-transform:uppercase;line-height:1}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-top:.9rem}
.foot ul a{font-size:.88rem;color:var(--ink-soft);text-decoration:none;transition:color .2s}
.foot ul a:hover{color:var(--ink)}
.foot .paylist{margin-top:.9rem;max-width:130px}  /* 3 + 3, so the block squares off */
.legal{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);
  font-size:.76rem;color:var(--ink-faint);line-height:1.6;max-width:78ch}

/* ---------- field error + marketing consent ---------- */
/* The error sits under its own field and stays there. A toast slides away while
   you are still working out what it said. */
.field-err{display:none;margin-top:.42rem;font-family:var(--f-tech);font-size:.72rem;
  line-height:1.45;color:#B3402C}
html[data-theme="dark"] .field-err{color:#E8907A}
.field-err.on{display:block}
.field-err .did-mean{border:0;background:transparent;padding:0;cursor:pointer;
  font:inherit;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
input[aria-invalid="true"]{border-color:#B3402C}
html[data-theme="dark"] input[aria-invalid="true"]{border-color:#E8907A}

/* Unticked, and never a condition of buying, consent that came bundled with a
   purchase is not consent. */
.opt-in{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;cursor:pointer}
.opt-in input{flex:none;width:17px;height:17px;margin-top:.16rem;accent-color:var(--volt-t);cursor:pointer}
.opt-in span{font-size:.82rem;line-height:1.5;color:var(--ink-soft)}

/* ---------- cart drawer ----------
   Sits above the nav (50) and under the press grain (60), same as everything else
   that is part of the page rather than on top of it. The panel is always in the
   DOM so it can transition; visibility:hidden is what actually keeps it out of
   the tab order while closed. */
.dw-scrim{position:fixed;inset:0;z-index:55;background:rgba(12,12,11,.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.dw-scrim.on{opacity:1;visibility:visible}

.dw{position:fixed;top:0;right:0;bottom:0;z-index:56;width:min(400px,100vw);
  display:flex;flex-direction:column;
  background:var(--paper-hi);border-left:1px solid var(--line);
  box-shadow:var(--shadow-2);
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s var(--ease),visibility .42s}
.dw.on{transform:none;visibility:visible}
/* the page must not scroll behind an open drawer */
html.dw-on,html.dw-on body{overflow:hidden}

.dw-head{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.05rem 1.2rem;border-bottom:1px solid var(--line)}
/* 44px because it is the only way out of a modal panel on a phone */
.dw-x{border:0;background:transparent;cursor:pointer;font-size:1.5rem;line-height:1;
  width:44px;height:44px;margin-right:-.55rem;display:grid;place-items:center;
  border-radius:10px;color:var(--ink-soft);transition:color .2s,background .2s}
.dw-x:hover{color:var(--ink);background:var(--line-soft)}

.dw-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:.4rem 1.2rem}
.dw-line{display:flex;align-items:center;gap:.75rem;padding:.85rem 0;
  border-bottom:1px solid var(--line-soft)}
.dw-art{flex:none;width:46px}
.dw-t{flex:1;min-width:0;line-height:1.3}
.dw-t b{display:block;font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;
  font-size:.92rem;letter-spacing:-.015em}
.dw-t span{font-size:.74rem;color:var(--ink-faint)}
.dw-p{flex:none;text-align:right;font-family:var(--f-disp);
  font-weight:700;font-variation-settings:'wdth' 106,'wght' 700;font-size:.95rem;font-feature-settings:'tnum'}
.dw-p s{display:block;font-family:var(--f-tech);font-size:.64rem;
  font-weight:400;color:var(--ink-faint)}
.dw-line.gift .dw-p{color:var(--volt-t)}
/* Remove is quiet but never hidden: revealing it on hover costs a tap target on
   phones and shifts the row on desktop. It holds its space and only changes ink. */
.dw-rm{flex:none;border:0;background:transparent;cursor:pointer;padding:0 0 0 .55rem;
  font-family:var(--f-tech);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);opacity:.75;transition:opacity .2s,color .2s}
.dw-line:hover .dw-rm{opacity:1}
.dw-rm:hover{color:var(--ink);opacity:1;text-decoration:underline;text-underline-offset:3px}

.dw-empty{padding:2.4rem .2rem;text-align:center}
.dw-empty b{display:block;font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 108,'wght' 700;
  font-size:1.15rem;letter-spacing:-.02em}
.dw-empty p{margin:.5rem 0 1.2rem;font-size:.86rem;color:var(--ink-soft);line-height:1.5}

.dw-foot{flex:none;padding:1rem 1.2rem 1.2rem;border-top:1px solid var(--line);
  background:var(--paper-deep)}
.dw-foot:empty{display:none}
.dw-tot{margin-bottom:.9rem}
.dw-row{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;
  font-size:.82rem;color:var(--ink-soft);font-feature-settings:'tnum'}
.dw-row.save{color:var(--volt-t)}
.dw-row.grand{margin-top:.4rem;padding-top:.6rem;border-top:1px solid var(--line);
  color:var(--ink);font-family:var(--f-disp);font-weight:700;font-variation-settings:'wdth' 108,'wght' 700;
  font-size:1.1rem;letter-spacing:-.02em}
.dw-nudge{display:block;margin-bottom:.8rem;padding:.6rem .7rem;border-radius:9px;
  border:1px dashed var(--volt-t);color:var(--volt-t);text-decoration:none;
  font-family:var(--f-tech);font-size:.66rem;letter-spacing:.04em;line-height:1.45;
  transition:background .2s}
.dw-nudge:hover{background:color-mix(in srgb,var(--volt) 14%,transparent)}
.dw-alt{display:block;margin-top:.7rem;text-align:center;font-family:var(--f-tech);
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  text-decoration:none;transition:color .2s}
.dw-alt:hover{color:var(--ink)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,140%);z-index:70;
  display:flex;align-items:center;gap:.7rem;padding:.75rem 1.1rem;border-radius:11px;
  background:var(--ink);color:var(--paper);box-shadow:var(--shadow-2);
  font-size:.88rem;max-width:calc(100% - 2rem);
  transition:transform .45s var(--ease),opacity .3s;opacity:0;pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast a{color:var(--volt);text-underline-offset:3px}
html[data-theme="dark"] .toast{background:var(--volt);color:#0C0C0B}
html[data-theme="dark"] .toast a{color:inherit;font-weight:700}

/* ---------- cover-set switcher (review control, not part of the design) ---------- */
.verbar{position:fixed;left:1rem;bottom:1rem;z-index:65;display:flex;align-items:stretch;gap:2px;
  padding:4px;border-radius:12px;background:rgba(12,12,11,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7);border:1px solid rgba(239,237,228,.16)}
.verbar-l{display:flex;align-items:center;padding:0 .6rem;font-family:var(--f-tech);
  font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:#8B8780}
.verbar button{display:flex;flex-direction:column;gap:1px;align-items:flex-start;cursor:pointer;
  border:0;border-radius:8px;padding:.4rem .62rem;background:transparent;color:#9E9A90;
  font-family:var(--f-tech);font-size:.62rem;letter-spacing:.1em;transition:.2s}
.verbar button em{font-style:normal;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.verbar button:hover{color:#EFEDE4;background:rgba(239,237,228,.08)}
.verbar button[aria-pressed="true"]{background:#F0D43A;color:#0C0C0B}
.verbar button[aria-pressed="true"] em{opacity:.75}
@media (max-width:560px){.verbar{left:.6rem;right:.6rem;bottom:.6rem;justify-content:center}
  .verbar-l{display:none}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .armed,.scroll-cue i{animation:none}
  *{transition-duration:.01ms !important}
}

/* ---------- phone ergonomics ----------
   Everything here is target size. On a phone a stacked list of 18px-tall links is
   a coin toss; the type stays the same size and only the row grows. */
@media (max-width:640px){
  .foot ul{gap:0}
  .foot ul a{display:block;padding:.6rem 0}
  .offer-out a{display:inline-block;padding:.7rem 0}
  .cart-btn{padding:.46rem .72rem}
  .nav-mark{padding:.4rem 0}
  .dw-alt{padding:.7rem 0}
  .toc a{padding:.6rem .9rem}
}