/* ═══════════════════════════════════════════════════════════════════
   YIELD · MERIDIAN FOR WEB
   The app's material language. Warm graphite with real depth, Fraunces
   italic money, gold gradient controls, mono labels, status pills.
   Values trace to src/theme/tokens.ts and the shipped Obsidian screens.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ground:#0B0908;
  --ground-2:#0E0B09;
  --tile-a:#1C1713;
  --tile-b:#131010;
  --tile-c:#191411;

  --gold:#C9A227;
  --gold-b:#E5B82A;
  --gold-l:#E8D068;
  --gold-pale:#F4E29A;
  --gold-deep:#8B7120;

  --green:#00E87A;
  --red:#FF4D4D;
  --amber:#E0912F;

  --white:#FFFFFF;
  --bone:#F5F1EA;
  --grey:#A9A199;
  --muted:#7A736B;
  --faint:#57524C;

  --hair:rgba(201,162,39,.14);
  --hair-str:rgba(201,162,39,.30);
  --hair-n:rgba(245,241,234,.07);

  --disp:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-tile:22px;
  --r-sm:14px;
  --gut:clamp(20px,5vw,72px);
  --max:1240px;
  --ease:cubic-bezier(.22,.75,.28,1);
  --ease-soft:cubic-bezier(.33,.9,.28,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--bone);font-family:var(--sans);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:rgba(201,162,39,.3);color:var(--white)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap-wide{max-width:1460px;margin:0 auto;padding:0 var(--gut)}

/* ── TYPE ────────────────────────────────────────────────────────
   Grotesk bold carries titles. Fraunces italic is the money voice and
   nothing else: numerals, money, dates. Mono carries labels. */
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.028em;line-height:1.05;color:var(--white)}
h1{font-size:clamp(40px,5.6vw,72px);letter-spacing:-.036em}
h2{font-size:clamp(30px,3.9vw,50px);letter-spacing:-.032em}
h3{font-size:clamp(22px,2.5vw,32px)}
h4{font-size:19px;letter-spacing:-.018em}

.mv{font-family:var(--disp);font-style:italic;font-weight:600;
    font-variation-settings:"opsz" 60,"SOFT" 0,"WONK" 1;
    letter-spacing:-.01em;color:var(--gold-l);font-feature-settings:"tnum" 1;white-space:nowrap}
.mv.w{color:var(--white)} .mv.g{color:var(--green)} .mv.r{color:var(--red)}
.mv.a{color:var(--amber)} .mv.dim{color:var(--muted)}
.mv.xl{font-size:clamp(46px,7vw,86px);font-variation-settings:"opsz" 144,"WONK" 1}
.mv.lg{font-size:clamp(28px,3.6vw,42px);font-variation-settings:"opsz" 100,"WONK" 1}
.mv.md{font-size:25px} .mv.sm{font-size:18px}
.mv.strike{text-decoration:line-through;color:var(--muted);font-size:.72em}

.lab{font-family:var(--mono);font-size:10.5px;font-weight:500;
     letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lab.gold{color:var(--gold)} .lab.green{color:var(--green)} .lab.red{color:var(--red)}
.lab.sm{font-size:9px;letter-spacing:.16em}

.sub{color:var(--grey);font-size:17px;line-height:1.6}
.sub b,.sub strong{color:var(--bone);font-weight:600}
.dim{color:var(--muted)}
.hl{color:var(--gold-l);font-weight:600}

/* ── TILE ────────────────────────────────────────────────────────*/
.tile{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.058) 0%,rgba(255,255,255,.038) 30%,
                    rgba(255,255,255,.018) 70%,rgba(255,255,255,.007) 100%),
    linear-gradient(165deg,var(--tile-a),var(--tile-b));
  border:1px solid var(--hair);
  border-radius:var(--r-tile);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.45),
             0 18px 40px -24px rgba(0,0,0,.9);
  padding:24px;
}
.tile.gold{
  border-color:var(--hair-str);
  background:linear-gradient(180deg,rgba(201,162,39,.11),rgba(201,162,39,.028)),
             linear-gradient(165deg,var(--tile-c),var(--tile-b));
  box-shadow:inset 0 1px 0 rgba(201,162,39,.20),inset 0 -1px 0 rgba(0,0,0,.45),
             0 18px 44px -24px rgba(0,0,0,.9),0 0 50px -18px rgba(201,162,39,.16);
}
.tile.green{border-color:rgba(0,232,122,.26);
  background:linear-gradient(180deg,rgba(0,232,122,.09),rgba(0,232,122,.02)),linear-gradient(165deg,var(--tile-a),var(--tile-b));
  box-shadow:inset 0 1px 0 rgba(0,232,122,.16),inset 0 -1px 0 rgba(0,0,0,.45)}
.tile.link{transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.tile.link:hover{border-color:var(--hair-str);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 26px 50px -26px rgba(0,0,0,.95),0 0 44px -20px rgba(201,162,39,.2)}

/* ── PILLS ───────────────────────────────────────────────────────*/
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;
  border-radius:999px;white-space:nowrap;border:1px solid transparent}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill.nodot::before{display:none}
.pill.g{color:var(--green);background:rgba(0,232,122,.11);border-color:rgba(0,232,122,.24)}
.pill.gd{color:var(--gold-l);background:rgba(201,162,39,.13);border-color:rgba(201,162,39,.26)}
.pill.r{color:var(--red);background:rgba(255,77,77,.11);border-color:rgba(255,77,77,.26)}
.pill.a{color:var(--amber);background:rgba(224,145,47,.12);border-color:rgba(224,145,47,.26)}
.pill.n{color:var(--muted);background:rgba(245,241,234,.05);border-color:var(--hair-n)}

/* ── BUTTONS ─────────────────────────────────────────────────────*/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:999px;cursor:pointer;border:1px solid rgba(201,162,39,.5);
  background:linear-gradient(180deg,var(--gold-pale) 0%,var(--gold-b) 46%,var(--gold) 54%,#A8851C 100%);
  color:#191206;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -1px 1px rgba(0,0,0,.25) inset,
             0 10px 28px -10px rgba(201,162,39,.5);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 36px -10px rgba(201,162,39,.6)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  color:var(--bone);border-color:var(--hair-str);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.btn.ghost:hover{border-color:var(--gold);background:rgba(201,162,39,.1);box-shadow:none;filter:none}
.btn.sm{font-size:13.5px;padding:11px 20px}

/* ── CHIP / ROW / METER ──────────────────────────────────────────*/
.mono-chip{width:52px;height:52px;flex:none;border-radius:var(--r-sm);
  background:linear-gradient(165deg,rgba(201,162,39,.16),rgba(201,162,39,.04));
  border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--gold-l);text-align:center;line-height:1.15}
.mono-chip.sm{width:42px;height:42px;font-size:10.5px;border-radius:11px}
.mono-chip.icon{color:var(--gold);font-size:17px}
.row{display:flex;align-items:center;gap:14px}
.row .grow{flex:1;min-width:0}
.row .t{font-size:15.5px;font-weight:600;color:var(--bone);line-height:1.3}
.row .s{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.35}
.rule{height:1px;background:var(--hair-n);margin:14px 0}
.rule.gold{background:var(--hair)}
.meter{height:4px;background:rgba(245,241,234,.09);border-radius:999px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-l));transition:width 1.2s var(--ease)}
.meter.r i{background:linear-gradient(90deg,#B4342B,var(--red))}
.meter.g i{background:linear-gradient(90deg,#0B9B57,var(--green))}

/* ── SECTIONS ────────────────────────────────────────────────────
   Section heads are centred; body content keeps its own alignment. */
.sec{padding:clamp(76px,9.5vw,140px) 0}
.sec-hair{border-top:1px solid var(--hair-n)}
.sec-gold{border-top:1px solid var(--hair)}
.sec-head{max-width:64ch;margin:0 auto clamp(44px,5.5vw,72px);text-align:center}
.sec-head .lab{margin-bottom:16px;display:block}
.sec-head p{color:var(--grey);font-size:18.5px;margin-top:20px;line-height:1.6}
.sec-head p b{color:var(--bone);font-weight:600}

/* ── DEVICE — a physical object, not a rectangle ─────────────────*/
.stage{display:flex;justify-content:center;perspective:1800px}
.device{
  position:relative;width:296px;flex:none;border-radius:54px;padding:11px;
  /* machined titanium rail: alternating highlight and shadow facets */
  background:
    linear-gradient(115deg,
      #4A413A 0%, #17130F 9%, #38302A 19%, #0C0A08 33%,
      #241E19 50%, #0A0908 66%, #3B332C 81%, #14100D 92%, #463D35 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.22),
    inset 0 -1.5px 1px rgba(0,0,0,.9),
    inset 1.5px 0 1px rgba(255,255,255,.08),
    inset -1.5px 0 1px rgba(0,0,0,.6),
    0 0 0 1px rgba(201,162,39,.16),
    0 44px 80px -28px rgba(0,0,0,.95),
    0 90px 120px -60px rgba(201,162,39,.22);
  transform:rotateY(-8deg) rotateX(2.5deg);
  transform-style:preserve-3d;
  transition:transform 1.1s var(--ease-soft);
}
.device.flat{transform:none}
.stage:hover .device{transform:rotateY(-3deg) rotateX(1deg)}
/* side buttons */
.device::before,.device::after{content:"";position:absolute;width:2.5px;border-radius:3px;
  background:linear-gradient(180deg,#4A413A,#17130F);box-shadow:-1px 0 1px rgba(0,0,0,.7)}
.device::before{left:-2.5px;top:132px;height:34px;box-shadow:1px 0 1px rgba(0,0,0,.7)}
.device::after{right:-2.5px;top:150px;height:64px}
.screen{position:relative;border-radius:44px;background:var(--ground);overflow:hidden;
  height:588px;display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),inset 0 0 22px rgba(0,0,0,.6)}
/* glass glare, above the content, never interactive */
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:20;border-radius:44px;
  background:linear-gradient(112deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 16%,
    transparent 34%,transparent 62%,rgba(255,255,255,.028) 76%,rgba(255,255,255,.008) 88%,transparent 100%)}
.notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:88px;height:24px;background:#000;border-radius:14px;z-index:15}
.sbar{padding:18px 24px 4px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:9.5px;font-weight:500;color:var(--grey);letter-spacing:.04em;z-index:5}
/* the frame stack — two layers so steps cross-dissolve */
.scr{position:relative;flex:1;overflow:hidden}
/* The outgoing frame clears before the incoming one arrives, so the two
   never sit on top of each other as a muddle of overlapping text. */
.frame{position:absolute;inset:0;padding:8px 14px 14px;display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateY(12px) scale(.982);
  transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft)}
/* Children keep their natural height. Without this a flex column quietly
   squashes an oversized step instead of overflowing, which clips text
   inside the tiles rather than telling us the step is too tall. */
.frame > *{flex:0 0 auto}
.frame.live{opacity:1;transform:none;
  transition:opacity .5s var(--ease-soft) .2s,transform .58s var(--ease-soft) .2s}
.frame.out{opacity:0;transform:translateY(-9px) scale(.982);
  transition:opacity .26s var(--ease-soft),transform .26s var(--ease-soft)}
/* device size variants */
.device.sm{width:268px;border-radius:48px}
.device.sm .screen{height:530px;border-radius:39px}
.device.sm .screen::after{border-radius:39px}
/* reflection */
.reflect{width:296px;height:70px;margin-top:-6px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(201,162,39,.13),transparent 68%);filter:blur(14px)}

/* Narrow phones fall back to the compact device rather than shrinking the
   screen, so the in screen layout stays at a size already proven to fit. */
@media(max-width:430px){
  .device{width:268px;border-radius:48px}
  .device .screen,.device.sm .screen{height:530px;border-radius:39px}
  .device .screen::after,.device.sm .screen::after{border-radius:39px}
  .reflect{width:268px}
}
@media(max-width:340px){
  .device{transform:none;width:252px}
  .device .screen,.device.sm .screen{height:512px}
  .reflect{width:252px}
}

/* ── IN SCREEN — one step down in scale from the web surface ─────*/
.s-h{font-size:17.5px;font-weight:700;color:var(--white);letter-spacing:-.024em;line-height:1.14}
.s-sub{font-family:var(--mono);font-size:7.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.s-lab{font-family:var(--mono);font-size:7.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);margin:2px 0 0}
.s-tile{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.012)),
    linear-gradient(165deg,var(--tile-a),var(--tile-b));
  border:1px solid var(--hair);border-radius:15px;padding:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 6px 14px -10px rgba(0,0,0,.9)}
.s-tile.gold{border-color:var(--hair-str);
  background:linear-gradient(180deg,rgba(201,162,39,.12),rgba(201,162,39,.025)),linear-gradient(165deg,var(--tile-c),var(--tile-b));
  box-shadow:inset 0 1px 0 rgba(201,162,39,.18),0 6px 16px -10px rgba(0,0,0,.9)}
.s-tile.green{border-color:rgba(0,232,122,.3);
  background:linear-gradient(180deg,rgba(0,232,122,.10),rgba(0,232,122,.02)),linear-gradient(165deg,var(--tile-a),var(--tile-b));
  box-shadow:inset 0 1px 0 rgba(0,232,122,.16)}
.s-tile.red{border-color:rgba(255,77,77,.3);
  background:linear-gradient(180deg,rgba(255,77,77,.09),rgba(255,77,77,.02)),linear-gradient(165deg,var(--tile-a),var(--tile-b));
  box-shadow:inset 0 1px 0 rgba(255,77,77,.14)}
.s-row{display:flex;align-items:center;gap:9px}
.s-row .grow{flex:1;min-width:0}
.s-t{font-size:11.5px;font-weight:600;color:var(--bone);line-height:1.26}
.s-s{font-size:9.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.s-s.g{color:var(--green)} .s-s.r{color:var(--red)} .s-s.gd{color:var(--gold-l)}
.s-rule{height:1px;background:var(--hair-n);margin:8px 0}
.s-chip{width:33px;height:33px;flex:none;border-radius:10px;
  background:linear-gradient(165deg,rgba(201,162,39,.17),rgba(201,162,39,.04));
  border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:8px;font-weight:600;color:var(--gold-l);line-height:1.08;text-align:center}
.s-mv{font-family:var(--disp);font-style:italic;font-weight:600;
  font-variation-settings:"opsz" 60,"WONK" 1;letter-spacing:-.01em;
  font-feature-settings:"tnum" 1;color:var(--gold-l);font-size:15px;white-space:nowrap}
.s-mv.w{color:var(--white)} .s-mv.g{color:var(--green)} .s-mv.r{color:var(--red)}
.s-mv.dim{color:var(--muted)}
.s-mv.lg{font-size:29px;font-variation-settings:"opsz" 100,"WONK" 1}
.s-mv.strike{text-decoration:line-through;color:var(--muted);font-size:10.5px}
.s-btn{background:linear-gradient(180deg,var(--gold-pale) 0%,var(--gold-b) 46%,var(--gold) 54%,#A8851C 100%);
  color:#191206;font-weight:700;font-size:11px;text-align:center;padding:9px;border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 5px 14px -6px rgba(201,162,39,.5)}
.s-btn.q{background:rgba(245,241,234,.035);color:var(--muted);font-weight:500;font-size:8.5px;
  border:1px solid var(--hair-n);box-shadow:none;font-family:var(--mono);letter-spacing:.11em;
  text-transform:uppercase;padding:8px}
.s-btn.o{background:transparent;border:1px solid var(--hair-str);color:var(--gold-l);box-shadow:none}
.s-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.s-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:7px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3.5px 7px;
  border-radius:999px;border:1px solid transparent;white-space:nowrap}
.s-pill::before{content:"";width:3.5px;height:3.5px;border-radius:50%;background:currentColor;flex:none}
.s-pill.g{color:var(--green);background:rgba(0,232,122,.12);border-color:rgba(0,232,122,.26)}
.s-pill.gd{color:var(--gold-l);background:rgba(201,162,39,.14);border-color:rgba(201,162,39,.28)}
.s-pill.r{color:var(--red);background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.28)}
.s-pill.a{color:var(--amber);background:rgba(224,145,47,.13);border-color:rgba(224,145,47,.28)}
.s-pill.n{color:var(--muted);background:rgba(245,241,234,.05);border-color:var(--hair-n)}
.s-meter{height:3px;background:rgba(245,241,234,.1);border-radius:999px;overflow:hidden;margin-top:6px}
.s-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-l))}
.s-meter.r i{background:linear-gradient(90deg,#B4342B,var(--red))}
.s-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.s-trio .s-tile{padding:9px}

/* per element arrival inside a frame */
html.js .fin{opacity:0;transform:translateY(7px);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft)}
html.js .fin.on{opacity:1;transform:none}
.fin-2{transition-delay:.07s}.fin-3{transition-delay:.14s}.fin-4{transition-delay:.21s}.fin-5{transition-delay:.28s}

/* ── CARD FACES — the app's card design library ──────────────────*/
.cf{position:relative;width:100%;aspect-ratio:1.586;border-radius:13px;overflow:hidden;isolation:isolate}
.cf-sm{border-radius:9px}
.cf-hl{position:absolute;inset:0;pointer-events:none;z-index:1}
.cf-wm{position:absolute;right:5%;bottom:-6%;font-family:var(--sans);font-weight:800;
  font-size:52cqw;line-height:1;letter-spacing:-.04em;z-index:1;pointer-events:none}
.cf-lg .cf-wm{font-size:78px}
.cf-sm .cf-wm{font-size:40px}
.cf-bar{position:absolute;left:0;right:0;bottom:16%;height:7%;background:#d5202e;z-index:1}
.cf-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:space-between;padding:8.5% 8%}
.cf-lg .cf-in{padding:20px 20px}
.cf-issuer{text-transform:uppercase;opacity:.92}
.cf-sub{font-family:var(--mono);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  opacity:.72;margin-top:3px}
.cf-chip{position:absolute;right:8%;top:9%;width:13%;aspect-ratio:1.35;border-radius:3px;
  background:linear-gradient(145deg,#F4E29A,#C9A227 45%,#8B7120);opacity:.78;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.5)}
.cf-lg .cf-chip{border-radius:4px}

/* catalogue tile built around a face */
.card-tile{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:var(--r-tile);
  border:1px solid var(--hair-n);background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:.3s var(--ease)}
.card-tile:hover{border-color:var(--hair-str);transform:translateY(-3px);
  box-shadow:0 24px 46px -26px rgba(0,0,0,.95)}
.card-tile .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.card-tile .cn{font-size:14.5px;font-weight:600;color:var(--bone);line-height:1.25}
.card-tile .ci{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}

/* ── DATA MARKS — depth instead of flat blocks ───────────────────*/
.arc{position:relative;flex:none}
.arc svg{display:block;transform:rotate(-90deg)}
.arc .arc-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-style:italic;font-weight:600;
  font-variation-settings:"opsz" 60,"WONK" 1;color:var(--gold-l)}
.s-tile{position:relative;isolation:isolate}
/* Named s-halo, not halo: page level sections use .halo for their own
   large background glows, and a collision sizes this to the viewport. */
.s-tile > *:not(.s-halo){position:relative;z-index:1}
.s-tile > .s-halo{position:absolute;top:0;right:0;bottom:0;left:0;
  pointer-events:none;border-radius:inherit;z-index:0;overflow:hidden}
.spark{width:100%;display:block}

/* ── DEMO CHROME ─────────────────────────────────────────────────*/
.demo{display:flex;flex-direction:column;align-items:center}
.demo-cap{margin-top:14px;text-align:center;max-width:300px}
.demo-cap .step{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-l);min-height:15px;
  transition:opacity .4s var(--ease-soft)}
.demo-cap .step.fading{opacity:0}
.ticks{display:flex;gap:5px;justify-content:center;margin-top:12px}
.ticks i{width:26px;height:2px;background:rgba(245,241,234,.14);border-radius:2px;
  position:relative;overflow:hidden}
.ticks i::after{content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;border-radius:2px}
.ticks i.on::after{transform:scaleX(1);transition:transform 2.2s linear}
.ticks i.done::after{transform:scaleX(1)}

/* ── NAV ─────────────────────────────────────────────────────────*/
nav{position:fixed;top:0;left:0;right:0;z-index:90;
  backdrop-filter:blur(22px) saturate(1.35);background:rgba(11,9,8,.72);
  border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease)}
nav.stuck{background:rgba(11,9,8,.92);border-bottom-color:var(--hair-n)}
.nav-in{max-width:var(--max);margin:0 auto;padding:13px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.mark{display:flex;align-items:center;gap:9px}
.mark img{height:26px;width:auto;filter:drop-shadow(0 2px 6px rgba(201,162,39,.35))}
.mark .wm{font-family:var(--disp);font-style:italic;font-weight:600;
  font-variation-settings:"opsz" 100,"WONK" 1;font-size:25px;letter-spacing:-.02em;color:var(--bone)}
.nav-links{display:flex;gap:30px;font-size:14.5px;font-weight:500;color:var(--grey)}
.nav-links a{transition:color .22s;position:relative}
.nav-links a:hover{color:var(--gold-l)}
@media(max-width:920px){.nav-links{display:none}}

/* ── DRAG RAIL ───────────────────────────────────────────────────*/
.rail-wrap{overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none}
.rail-wrap.dragging{cursor:grabbing}
.rail{display:flex;gap:18px;padding:6px 0 10px;will-change:transform}
.rail-card{width:302px;flex:none}
.rail-hint{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px}
.rail-hint .bar{width:170px;height:3px;background:rgba(245,241,234,.1);border-radius:999px;overflow:hidden}
.rail-hint .bar i{display:block;height:100%;width:26%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-l))}
@media(max-width:760px){.rail-card{width:264px}}

/* ── FOOTER ──────────────────────────────────────────────────────*/
footer{border-top:1px solid var(--hair-n);padding:72px 0 44px;background:var(--ground-2)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
.f-col h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;font-weight:600}
.f-col a{display:block;color:var(--grey);font-size:14.5px;padding:5px 0;transition:color .2s}
.f-col a:hover{color:var(--gold-l)}
.badges{display:flex;gap:11px;margin-top:24px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:11px;border:1px solid var(--hair-n);padding:10px 17px;
  border-radius:12px;cursor:pointer;transition:.28s var(--ease);
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.badge:hover{border-color:var(--hair-str);background:rgba(201,162,39,.08);transform:translateY(-2px)}
.badge svg{width:19px;height:19px;fill:var(--bone);opacity:.85;flex:none}
.badge .bt{font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block}
.badge .bn{font-size:14px;color:var(--bone);font-weight:600}
.f-legal{border-top:1px solid var(--hair-n);padding-top:26px;font-size:12.5px;color:var(--faint);
  line-height:1.75;max-width:96ch}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.f-grid{grid-template-columns:1fr}}

/* ── MODAL ───────────────────────────────────────────────────────*/
.modal{position:fixed;inset:0;background:rgba(6,5,4,.9);backdrop-filter:blur(14px);
  z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.modal.on{display:flex;animation:mfade .35s var(--ease)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal-in{max-width:440px;padding:44px 38px;text-align:center;animation:mrise .5s var(--ease-soft)}
@keyframes mrise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal-in img{height:44px;width:auto;margin:0 auto 22px;filter:drop-shadow(0 4px 14px rgba(201,162,39,.4))}
.modal-in h3{margin-bottom:14px}
.modal-in p{color:var(--grey);font-size:16px;margin-bottom:26px}

/* ── REVEAL — gated on html.js so no-JS is never blank ───────────*/
html.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease-soft),transform 1s var(--ease-soft)}
html.js .rv.in{opacity:1;transform:none}

/* ── UTIL ────────────────────────────────────────────────────────*/
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}
.center{text-align:center}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.flexrow{display:flex;gap:13px;flex-wrap:wrap}
.flexrow.mid{justify-content:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,28px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,20px)}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
@media(max-width:760px){.grid-3{grid-template-columns:1fr}}
@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-4{grid-template-columns:1fr}}

/* ── REDUCED MOTION ──────────────────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1!important;transform:none!important;transition:none}
  html.js .fin{opacity:1!important;transform:none!important;transition:none}
  .frame{transition:none}
  .device{transform:none!important;transition:none}
  .rail{transform:none!important}
  .ticks i.on::after{transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}