/* ═══════════════════════════════════════════════════════
   The Vault — version E
   Apple product-page cadence: alternating light / true-black
   panels, one typeface at many weights, gold as metal.
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}          /* must precede any display rule */

:root{
  /* neutrals */
  --white:#ffffff;
  --paper:#f5f5f7;
  --silver:#e8e8ed;
  --line:#d2d2d7;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --black:#000000;

  /* gold — desaturated, bronze-leaning, so it reads as metal not yellow */
  --gold:#C2A468;
  --gold-hi:#EADCB4;
  --gold-lo:#8A6F3A;
  --gold-edge:#6B5529;

  /* per-panel tokens, overridden by .panel--dark */
  --bg:var(--white);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --rule:var(--line);
  --frame:var(--paper);            /* image-card ground, flips on dark panels */
  --metal-grad:linear-gradient(96deg,#7A6132 0%,var(--gold-lo) 22%,var(--gold) 46%,#A98B4E 62%,var(--gold-lo) 82%,#6E5830 100%);

  --max:1120px;
  --pad:clamp(20px,5vw,44px);
  --r:20px;
  --r-lg:28px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Schibsted Grotesk",system-ui,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* No sideways drag on touch devices.
   Nothing on the page is actually wider than the viewport, so the movement
   is the browser's horizontal OVERSCROLL — the elastic rubber-band and
   swipe-to-navigate gesture — not content scrolling. That is what
   overscroll-behavior-x kills; overflow is only a backstop.
   `clip` rather than `hidden`: `hidden` turns the element into a scroll
   container and breaks the sticky nav, `clip` does not.
   Trade-off: this also disables swipe-back-to-previous-page on this site. */
html,body{overscroll-behavior-x:none}
@supports (overflow:clip){ html,body{overflow-x:clip} }

img{max-width:100%;display:block}
a{color:inherit}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:400}

/* ── THE ONE INSET ──────────────────────────────────────
   Every top-level band shares this so all content sits on a
   single left/right edge. Nothing nested may add its own
   inline padding, or it double-insets.                     */
.band{padding-inline:max(var(--pad),(100% - var(--max))/2)}

/* Visually hidden, but never parked off-viewport: a negative inline offset
   gives mobile browsers real estate to pan sideways into. */
.skip{
  position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%);
}
.skip:focus{
  position:fixed;top:8px;left:8px;z-index:300;width:auto;height:auto;
  clip:auto;clip-path:none;
  background:var(--ink);color:#fff;padding:.75rem 1rem;border-radius:8px;
}

:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--gold-lo);outline-offset:3px;border-radius:6px;
}

/* ── version switcher ─────────────────────────────────── */
.vswitch{
  position:fixed;right:12px;bottom:12px;z-index:150;display:flex;gap:2px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:999px;padding:4px;
  font-family:"JetBrains Mono",monospace;font-size:11px;
}
.vswitch a,.vswitch b{
  display:grid;place-items:center;width:24px;height:24px;border-radius:999px;
  text-decoration:none;color:var(--ink-2);font-weight:400;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.vswitch a:hover{background:var(--silver);color:var(--ink)}
.vswitch b{background:var(--ink);color:#fff}

/* ═══ NAV ══════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:1.25rem;
  height:60px;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav.is-stuck{background:rgba(255,255,255,.86);border-bottom-color:var(--line)}

.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.brand__logo{
  /* single line of caps at 3.9:1 — 22px would tower over a 60px nav */
  width:auto;height:16px;
  transition:opacity .2s var(--ease);
}
.brand:hover .brand__logo{opacity:.78}
.mark{width:17px;height:17px;color:var(--gold-lo);flex:none}

.menu{display:flex;align-items:center;gap:1.6rem}
.menu a{
  text-decoration:none;font-size:13px;color:var(--ink-2);letter-spacing:-.005em;
  transition:color .2s var(--ease);
}
.menu a:hover{color:var(--ink)}
.menu .back{display:inline-block;color:var(--gold-lo);transition:transform .2s var(--ease)}
.menu a:hover .back{transform:translateX(-3px)}
.menu .cta{
  background:var(--ink);color:#fff;padding:.44rem .9rem;border-radius:999px;font-weight:500;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.menu .cta:hover{background:#000;color:#fff;transform:translateY(-1px)}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger i+i{margin-top:5px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

@media(max-width:820px){
  .burger{display:block;order:3}
  .menu{
    position:fixed;inset:60px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:.5rem max(var(--pad),(100% - var(--max))/2) 1.25rem;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease);
  }
  .menu.is-open{opacity:1;transform:none;pointer-events:auto}
  .menu a{padding:.85rem 0;font-size:16px;border-bottom:1px solid var(--silver)}
  .menu .cta{
    text-align:center;margin-top:1rem;border-bottom:0;padding:.85rem 1rem;font-size:15px;
  }
}

/* ═══ PANELS ═══════════════════════════════════════════ */
.panel{background:var(--bg);color:var(--fg);padding-block:clamp(72px,11vw,140px);position:relative}
.panel--soft{--bg:var(--paper)}
.panel--dark{
  --bg:#000;--fg:#f5f5f7;--fg-2:#86868b;--rule:#2a2a2c;--frame:#101012;
  --metal-grad:linear-gradient(96deg,#9B7F44 0%,var(--gold) 24%,var(--gold-hi) 48%,var(--gold) 68%,#9B7F44 100%);
}

/* ═══ TYPE ═════════════════════════════════════════════ */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.9rem,8.2vw,5.4rem);font-weight:800;letter-spacing:-.045em}
.h-xl{font-size:clamp(2.3rem,6vw,4rem)}
.h-lg{font-size:clamp(1.9rem,4.4vw,3rem)}
h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em}

.eyebrow{
  margin:0 0 1.1rem;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-lo);font-weight:500;
}
.panel--dark .eyebrow{color:var(--gold)}

.lede{
  margin:1.6rem 0 0;font-size:clamp(1.05rem,1.9vw,1.32rem);line-height:1.5;
  color:var(--fg-2);max-width:34ch;font-weight:400;letter-spacing:-.012em;
}
.lede--wide{max-width:60ch}

.metal{
  background-image:var(--metal-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .metal{color:var(--gold-lo)}
  .panel--dark .metal{color:var(--gold)}
}

/* ═══ BUTTONS ══════════════════════════════════════════ */
.btn{
  display:inline-block;text-decoration:none;font-size:15px;font-weight:500;
  padding:.72rem 1.4rem;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-family:inherit;letter-spacing:-.01em;
  transition:transform .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),color .2s var(--ease);
}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{transform:translateY(-2px);background:#000}
.panel--dark .btn--solid{background:var(--paper);color:var(--ink)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ═══ HERO ═════════════════════════════════════════════ */
.hero{padding-block:clamp(64px,10vw,120px) clamp(64px,9vw,116px);text-align:center}
.hero .lede{margin-inline:auto;max-width:46ch}
.hero__cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

.vhead{text-align:center}
.vhead .lede{margin-inline:auto}
.vhead .status{justify-content:center}

.status{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 2.5rem;
  margin:2.6rem 0 0;font-size:12px;
}
.status div{display:flex;gap:.5rem;align-items:baseline;padding-block:.4rem}
.status dt{color:var(--fg-2)}
.status dd{margin:0;color:var(--fg);font-weight:500}
.status .live{display:flex;align-items:center;gap:.4rem}
.status .live i{width:6px;height:6px;border-radius:50%;background:#2FA84F;flex:none}
@media(prefers-reduced-motion:no-preference){
  .status .live i{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ═══ THE VAULT — horizontal rail ══════════════════════ */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,25vw,270px);
  gap:14px;margin-top:clamp(36px,5vw,56px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;
  /* bleed the rail to the viewport edges while its content keeps the band inset */
  margin-inline:calc(-1 * max(var(--pad),(100% - var(--max))/2));
  padding-inline:max(var(--pad),(100% - var(--max))/2);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  /* Without this, swiping the rail to either end chains the scroll onto the
     page and drags the whole site sideways on a phone. `contain` stops the
     chaining but leaves the browser's own back-swipe gesture alone. */
  overscroll-behavior-inline:contain;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.rail::-webkit-scrollbar-track{background:transparent}

.piece{scroll-snap-align:start;text-decoration:none;display:block}
.piece__frame{
  border-radius:var(--r);overflow:hidden;background:var(--frame);
  border:1px solid var(--rule);
  transition:transform .4s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease);
}
.piece:hover .piece__frame{
  transform:translateY(-6px);border-color:var(--gold-lo);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.4);
}
.piece__frame img{width:100%;aspect-ratio:3/4;object-fit:cover}
.piece__meta{display:flex;justify-content:space-between;gap:1rem;padding:.85rem .1rem 0;font-size:12.5px}
.piece__name{font-weight:500;color:var(--fg);letter-spacing:-.01em}
.piece__cap{color:var(--fg-2);font-family:"JetBrains Mono",monospace;font-size:11px;text-align:right}

.vault__links{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.4rem;
}
.vault__links a{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:13px;color:var(--fg-2);border:1px solid var(--rule);
  padding:.5rem 1rem;border-radius:999px;
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.vault__links a:hover{color:var(--fg);border-color:var(--gold-lo);transform:translateY(-2px)}
.vault__links span{color:var(--gold-lo);transition:transform .2s var(--ease)}
.vault__links a:hover span{transform:translateX(3px)}
.vault__all{font-size:14px!important;padding:.7rem 1.4rem!important;font-weight:500}

/* ═══ ARCHIVE GRID (vault.html) ════════════════════════ */
.grid{
  display:grid;gap:14px;margin-top:clamp(36px,5vw,56px);
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
@media(min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}}
.grid--wide{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr))}
.card{margin:0;scroll-margin-top:90px}
/* the frame is a <button> so the zoom is keyboard-reachable */
.card__frame{cursor:zoom-in;position:relative;display:block;width:100%;padding:0;font:inherit;-webkit-appearance:none;appearance:none}
/* zoom affordance */
.card__frame::after{
  content:"";position:absolute;right:12px;bottom:12px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.55) no-repeat center/13px 13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l5 5M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  backdrop-filter:blur(6px);opacity:0;transform:translateY(4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none;
}
.card:hover .card__frame::after,.card__frame:focus-visible::after{opacity:1;transform:none}
.card__frame{
  border-radius:var(--r);overflow:hidden;background:var(--frame);
  border:1px solid var(--rule);
  transition:transform .4s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease);
}
.card:hover .card__frame{
  transform:translateY(-5px);border-color:var(--gold-lo);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.4);
}
.card__frame img{width:100%;aspect-ratio:3/4;object-fit:cover}
.grid--wide .card__frame img{aspect-ratio:1}
.card figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.8rem .15rem 0;font-size:12.5px}
.card__name{font-weight:500;letter-spacing:-.01em}
.card__no{color:var(--fg-2);font-size:11px}
.card.is-target .card__frame{border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,164,104,.28)}

/* ═══ LIGHTBOX ═════════════════════════════════════════ */
.lb{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(0,0,0,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:clamp(16px,4vw,44px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.lb.is-open{opacity:1;pointer-events:auto}
.lb__img{
  max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:10px;
  transform:scale(.985);transition:transform .3s var(--ease);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.lb.is-open .lb__img{transform:none}
.lb__cap{
  position:absolute;left:0;right:0;bottom:clamp(14px,3vw,26px);
  display:flex;justify-content:center;gap:.9rem;align-items:baseline;
  color:#f5f5f7;font-size:14px;font-weight:500;letter-spacing:-.01em;pointer-events:none;
}
.lb__cap i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11px;color:#86868b}
.lb__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  color:#fff;font-size:20px;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.lb__btn:hover{background:rgba(255,255,255,.2)}
.lb__prev{left:clamp(10px,2vw,24px)}
.lb__next{right:clamp(10px,2vw,24px)}
.lb__close{
  position:absolute;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  color:#fff;font-size:19px;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .2s var(--ease);
}
.lb__close:hover{background:rgba(255,255,255,.2)}
@media(max-width:560px){
  .lb__btn{top:auto;bottom:calc(clamp(14px,3vw,26px) + 34px);transform:none;width:42px;height:42px}
}
body.lb-open,body.apply-open{overflow:hidden}

/* ═══ TIMED APPLICATION PROMPT ═════════════════════════ */
.apply{
  position:fixed;inset:0;z-index:210;display:grid;place-items:center;
  padding:clamp(16px,5vw,40px);
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.apply.is-open{opacity:1;pointer-events:auto}
.apply__card{
  /* dark-panel tokens so .metal and .eyebrow read correctly in here */
  --fg-2:#86868b;
  --metal-grad:linear-gradient(96deg,#9B7F44 0%,var(--gold) 24%,var(--gold-hi) 48%,var(--gold) 68%,#9B7F44 100%);
  position:relative;width:100%;max-width:470px;
  background:linear-gradient(180deg,#111113,#000);color:var(--paper);
  border:1px solid #2a2a2c;border-radius:var(--r-lg);
  padding:clamp(1.9rem,5.5vw,2.7rem);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  transform:translateY(14px) scale(.985);
  transition:transform .35s var(--ease);
}
.apply.is-open .apply__card{transform:none}
.apply__card .eyebrow{color:var(--gold)}
.apply__card h2{margin-bottom:.9rem}
.apply__body{margin:0;color:var(--fg-2);font-size:.98rem;line-height:1.5}
.apply__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.apply__card .btn--solid{background:var(--paper);color:var(--ink)}
.apply__card .btn--solid:hover{background:#fff}
.apply__card .btn--ghost{border-color:#3a3a3c;color:var(--paper)}
.apply__card .btn--ghost:hover{border-color:#6a6a6d}
.apply__x{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;font-family:inherit;font-size:14px;line-height:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--paper);
  transition:background .2s var(--ease);
}
.apply__x:hover{background:rgba(255,255,255,.18)}
@media(max-width:420px){
  .apply__cta{flex-direction:column;align-items:stretch}
  .apply__cta .btn{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .apply,.apply__card{transition:none}
  .apply__card{transform:none}
}

.vback{text-align:center}
.vback .lede{margin-inline:auto}
.back{display:inline-block;color:var(--gold-lo);transition:transform .2s var(--ease)}
.btn:hover .back{transform:translateX(-3px)}

/* ═══ PAINPOINT → FIX ══════════════════════════════════ */
.fix{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;border-top:1px solid var(--rule)}
.fix li{
  display:grid;grid-template-columns:2.6rem 1fr 1fr;gap:clamp(1rem,3vw,3rem);
  align-items:start;padding:clamp(1.5rem,3vw,2.2rem) 0;border-bottom:1px solid var(--rule);
}
.fix__no{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--gold-lo);padding-top:.35rem}
.fix__bad b{display:block;font-weight:600;font-size:1.02rem;color:var(--ink-2);letter-spacing:-.015em}
.fix__bad em{display:block;font-style:normal;margin-top:.4rem;color:var(--ink-2);font-size:.95rem;opacity:.85}
.fix__bad::before{
  content:"Everywhere else";display:block;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a1a1a6;margin-bottom:.6rem;
}
.fix__good b{display:block;font-weight:600;font-size:1.02rem;letter-spacing:-.015em}
.fix__good em{display:block;font-style:normal;margin-top:.4rem;color:var(--ink-2);font-size:.95rem}
.fix__good::before{
  content:"The Vault";display:block;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lo);margin-bottom:.6rem;
}
@media(max-width:760px){
  .fix li{grid-template-columns:2.2rem 1fr;gap:.6rem 1rem}
  .fix__good{grid-column:2}
  .fix__bad{padding-bottom:1.2rem}
}

/* ═══ CLAIMS ═══════════════════════════════════════════ */
.claims{
  display:grid;gap:14px;margin-top:clamp(40px,5vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.claim{
  border:1px solid var(--rule);border-radius:var(--r);padding:1.6rem 1.5rem;
  background:linear-gradient(180deg,#0d0d0f,#000);
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.claim:hover{transform:translateY(-4px);border-color:#4a4a4d}
.claim h3{margin-bottom:.6rem}
.claim h3 span{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:.7rem}
.claim p{margin:0;color:var(--fg-2);font-size:.95rem;line-height:1.5}

.fineprint{margin:2.4rem 0 0;font-size:11.5px;color:var(--fg-2);letter-spacing:.02em}

/* ═══ PROCESS ══════════════════════════════════════════ */
.steps{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;counter-reset:s}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,4vw,3rem);
  padding:clamp(1.6rem,3vw,2.3rem) 0;border-top:1px solid var(--rule);
}
.step:last-child{border-bottom:1px solid var(--rule)}
.step__no{
  margin:0;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:300;line-height:1;
  color:var(--gold-lo);opacity:.85;min-width:1.9em;letter-spacing:-.03em;
}
.step__body h3{margin:0 0 .6rem;font-size:clamp(1.15rem,2.4vw,1.45rem)}
.step__body>p{margin:0;color:var(--ink-2);max-width:58ch;line-height:1.55}
.step__tags{display:flex!important;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem!important}
.tag{
  display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:.36rem .8rem;color:var(--ink-2);
  background:var(--white);
}
.tag--cost{border-color:var(--gold-lo);color:var(--gold-edge)}
@media(max-width:560px){
  .step{grid-template-columns:1fr;gap:.5rem}
  .step__no{font-size:1.3rem}
}

/* ═══ CRAFT ════════════════════════════════════════════ */
.macros{
  display:grid;gap:14px;margin-top:clamp(40px,5vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.macros figure{margin:0}
.macros img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--paper);
  transition:transform .45s var(--ease);
}
.macros figure:hover img{transform:scale(1.02)}
.macros figcaption{padding:.9rem .15rem 0;font-size:.9rem}
.macros figcaption b{display:block;font-weight:600;letter-spacing:-.01em}
.macros figcaption span{display:block;margin-top:.3rem;color:var(--ink-2);line-height:1.45}

.specs{
  display:grid;gap:0 clamp(1rem,3vw,2.5rem);margin:clamp(40px,5vw,56px) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--rule);
}
.specs div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.specs dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.specs dd{margin:0;font-size:.92rem;font-weight:500;text-align:right}

/* ═══ BUDGET ═══════════════════════════════════════════ */
.budget{
  display:grid;gap:14px;margin-top:clamp(40px,5vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.bcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem 1.6rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.bcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.28)}
.bcard__no{margin:0 0 1.1rem;font-size:11px;letter-spacing:.14em;color:var(--gold-lo)}
.bcard h3{margin-bottom:.6rem}
.bcard p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.5}

.ladder{margin-top:clamp(36px,4vw,52px);border-top:1px solid var(--line);padding-top:1.4rem}
.ladder__label{margin:0 0 1rem;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ladder ol{
  list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;
  counter-reset:z;font-size:12px;
}
.ladder li{
  counter-increment:z;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:.4rem .95rem;color:var(--ink-2);
}
.ladder li::before{content:counter(z,decimal-leading-zero) "  ";color:var(--gold-lo)}

/* ═══ SPLIT ════════════════════════════════════════════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.split__text p{color:var(--fg-2);margin:1.5rem 0 0;max-width:44ch}
.split__shot{margin:0;border-radius:var(--r-lg);overflow:hidden;background:#101012}
.split__shot img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ticks{list-style:none;margin:1.8rem 0 0;padding:0}
.ticks li{position:relative;padding:.55rem 0 .55rem 1.7rem;border-bottom:1px solid var(--rule);font-size:.95rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:1.1rem;width:9px;height:5px;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}
@media(max-width:820px){
  .split{grid-template-columns:1fr}
  .split__shot{order:-1;max-width:420px}
}

/* ═══ MARK ═════════════════════════════════════════════ */
.panel--mark{text-align:center}
.panel--mark .lede{margin-inline:auto;max-width:52ch}
.mark--xl{width:clamp(44px,7vw,64px);height:auto;margin:0 auto 2rem;color:var(--gold-lo)}

/* ═══ FORM ═════════════════════════════════════════════ */
form{margin-top:clamp(36px,5vw,52px);max-width:720px;position:relative}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:640px){.row{grid-template-columns:1fr}}
label{display:block}
label span{
  display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:.5rem;
}
label span i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.6}
input,select{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:.72rem .9rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
input:focus,select:focus{
  outline:none;border-color:var(--gold-lo);box-shadow:0 0 0 3px rgba(194,164,104,.18);
}
input:user-invalid,select:user-invalid{border-color:#C1272D}
form .btn{margin-top:.6rem}
.warn,.err{margin:.2rem 0 .8rem;font-size:12px}
.warn{color:var(--gold-edge)}
.err{color:#C1272D}

/* success panel — bleed vertically only, never inline
   (a negative inline inset caused horizontal page overflow) */
.done{
  position:absolute;inset-block:-1.5rem;inset-inline:0;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--paper);border-radius:var(--r);padding:2rem;
}
.done h3{font-size:1.7rem;margin:.4rem 0 .6rem}
.done p:last-child{margin:0;color:var(--ink-2)}

/* ═══ FOOTER ═══════════════════════════════════════════ */
.foot{display:grid;gap:1.6rem;justify-items:start}
.foot__logo{width:auto;height:22px}
.foot__nav{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
.foot__nav a{text-decoration:none;font-size:13px;color:var(--fg-2);transition:color .2s var(--ease)}
.foot__nav a:hover{color:var(--fg)}
.foot__end{margin:0;font-size:11px;color:var(--fg-2);letter-spacing:.03em;
  border-top:1px solid var(--rule);padding-top:1.5rem;justify-self:stretch}
footer.panel{padding-block:clamp(48px,6vw,72px)}

/* ═══ GUIDE PROSE ══════════════════════════════════════ */
.prose{margin-top:clamp(28px,4vw,40px);max-width:64ch}
.prose p{color:var(--fg-2);line-height:1.6;margin:1.1rem 0 0}
.prose p:first-child{margin-top:0}
.prose b{color:var(--fg);font-weight:600}
.prose .ticks{margin-top:0}
.rules{width:100%;border-collapse:collapse;margin-bottom:1.6rem;font-size:.95rem}
.rules th{
  text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-2);font-weight:500;padding:0 0 .7rem;border-bottom:1px solid var(--rule);
}
.rules td{padding:.75rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.rules td:last-child{text-align:right;white-space:nowrap;font-weight:500}
.rules .yes{color:#2F7D4F}
.rules .no{color:#B4232A}
.srcs{list-style:none;margin:1.2rem 0 0;padding:0;font-size:12px}
.srcs li{padding:.4rem 0}
.srcs a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.srcs a:hover{color:var(--fg)}
@media(max-width:560px){
  .rules td:last-child{white-space:normal}
  .prose{margin-top:1.4rem}
}

/* ═══ MOBILE DENSITY ═══════════════════════════════════
   The page is content-heavy; at phone widths every block
   stacks, so vertical rhythm tuned for desktop turns into
   a very long scroll. Tighten the rhythm, not the content. */
@media(max-width:640px){
  .panel{padding-block:clamp(40px,8.5vw,56px)}
  footer.panel{padding-block:36px}
  .hero{padding-block:36px 44px}

  h1{font-size:clamp(2.3rem,10.5vw,3rem);letter-spacing:-.04em}
  .h-xl{font-size:clamp(1.85rem,7.6vw,2.3rem)}
  .h-lg{font-size:1.65rem}
  .lede{font-size:1rem;margin-top:1.05rem;line-height:1.45}
  .eyebrow{margin-bottom:.75rem}
  .status{gap:0 1.4rem;margin-top:1.7rem}

  /* two-up so four macros cost one screen instead of two */
  .macros{grid-template-columns:1fr 1fr;gap:10px}
  .macros figcaption{padding-top:.6rem;font-size:.82rem}
  .macros figcaption span{margin-top:.2rem;line-height:1.4}

  .rail{margin-top:1.8rem}
  .vault__links{margin-top:1.6rem}

  .fix{margin-top:1.8rem}
  .fix li{padding:1rem 0;gap:.35rem .8rem}
  .fix__bad{padding-bottom:.7rem}
  .fix__bad b,.fix__good b{font-size:.96rem}
  .fix__good em{font-size:.88rem;margin-top:.3rem}
  /* the problem headline carries the point on its own; the elaboration is
     desktop-only so seven rows do not cost three screens. The Vault's
     answer keeps its detail at every width. */
  .fix__bad em{display:none}
  .fix__bad::before,.fix__good::before{font-size:9.5px;margin-bottom:.35rem}

  .claims,.budget{gap:10px;margin-top:1.8rem}
  .claim,.bcard{padding:1.25rem 1.2rem}
  .claim p,.bcard p{font-size:.9rem}
  .bcard__no{margin-bottom:.8rem}

  .steps{margin-top:1.8rem}
  .step{padding:1.25rem 0}
  .step__body>p{font-size:.94rem}
  .step__tags{margin-top:.85rem!important}

  .specs{margin-top:1.8rem}
  .specs div{padding:.65rem 0}

  .ladder{margin-top:1.6rem;padding-top:1.1rem}
  .split__text p{margin-top:1.1rem}
  .ticks{margin-top:1.2rem}
  .ticks li{padding:.45rem 0 .45rem 1.6rem;font-size:.92rem}
  .ticks li::before{top:.95rem}
  .mark--xl{margin-bottom:1.4rem}

  form{margin-top:1.8rem}
  .row{gap:10px;margin-bottom:10px}
  .fineprint{margin-top:1.6rem}
}

/* ═══ REVEAL ═══════════════════════════════════════════ */
@media(prefers-reduced-motion:no-preference){
  /* .js gate: if the script never runs, .reveal is never hidden */
  .js .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .75s var(--ease),transform .75s var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
  .d1{transition-delay:.07s}
  .d2{transition-delay:.14s}
  .d3{transition-delay:.21s}
  .d4{transition-delay:.28s}
  .d5{transition-delay:.35s}
}