/* ============================================================
   CAT THEFT AUTO VI — $CTA6
   Design language: GTA VI, not GTA V.
   VI = perpetual golden-hour dusk, a VERTICAL magenta→coral ramp,
   pure-ink silhouettes, banded sun. V was flat blue-sky comic.
   Palette below is the sampled VI ramp; the gradient IS the brand.
   ============================================================ */

:root {
  /* SKY RAMP — every accent is sampled from this one vertical ramp */
  --sky-0:#1F214D; --sky-1:#50366F; --sky-2:#BF3475;
  --sky-3:#EE6C45; --sky-4:#FFCE61; --sky-5:#FFE58A;

  /* NEON TRIAD — signage, CTAs, focus. Never more than ~8% of a viewport. */
  --pink:#EC4899; --orange:#F97316; --violet:#8B5CF6;

  /* DECO PASTELS — daylight surfaces only, never in the hero */
  --peach:#ECA17A; --dusty:#A682B0; --sienna:#C97245; --rose:#B87274;

  --ink:#0A0A12; --asphalt:#12101F; --asphalt-2:#1A1730;
  --bone:#F6F1E4; --dim:rgba(246,241,228,.62); --faint:rgba(246,241,228,.34);
  --up:#4ADE80; --down:#EF4444;

  --sunset: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 28%,
    var(--sky-2) 52%, var(--sky-3) 76%, var(--sky-4) 92%, var(--sky-5) 100%);

  --f-display:"Anton", Impact, sans-serif;
  --f-vi:"Limelight", "Anton", serif;
  --f-body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;

  /* tighten large, loosen small — the rule that reads as designed */
  --t-mega: clamp(3.4rem, 1rem + 12vw, 12rem);
  --t-d1:   clamp(2.5rem, 1rem + 5.6vw, 6rem);
  --t-d2:   clamp(1.9rem, 1rem + 2.8vw, 3.4rem);
  --t-h3:   clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  --t-body: clamp(1rem, .95rem + .25vw, 1.1rem);
  --t-label:.75rem;
  --t-num:  clamp(2rem, 1rem + 3.6vw, 4rem);

  --ease: cubic-bezier(.16,1,.3,1);
  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1360px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--bone);font-family:var(--f-body);
  font-size:var(--t-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--pink);color:#fff}
main{opacity:0;transition:opacity .5s ease}
body.ready main{opacity:1}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.pad{padding-block:clamp(5rem,4rem+8vw,13rem)}
.pad-sm{padding-block:clamp(3rem,2rem+5vw,7rem)}

/* ---------- grain: what stops a gradient looking flat -------------- */
.grain{position:fixed;inset:0;z-index:190;pointer-events:none;opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- preloader: banded sun bound to real load --------------- */
#loader{position:fixed;inset:0;z-index:300;background:var(--ink);
  display:grid;place-items:center;transition:opacity .55s var(--ease),visibility .55s}
body.ready #loader{opacity:0;visibility:hidden}
.load-box{display:grid;gap:1.7rem;justify-items:center}
.load-sun{width:min(46vw,240px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle,var(--sky-5),var(--sky-4) 42%,var(--sky-3) 74%,var(--sky-2));
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:3px}
.bands{display:flex;flex-direction:column-reverse;gap:2px;height:100%}
.bands i{flex:1;background:var(--ink);opacity:1;transition:opacity .18s ease}
.bands i.on{opacity:0}
.load-meta{display:grid;justify-items:center;gap:.5rem}
.load-num{font-family:var(--f-mono);font-weight:700;font-size:var(--t-num);
  color:var(--sky-4);font-variant-numeric:tabular-nums;line-height:1}
.load-tip{font-size:var(--t-label);letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}

/* ---------- cursor -------------------------------------------------- */
 /* The pointer IS a paw. A ring-and-dot cursor is the single most
    copied "premium site" tell; a paw is the brand promise made literal. */
.cursor{position:fixed;top:0;left:0;z-index:250;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
             filter .3s var(--ease),opacity .3s}
.cursor::before{content:"";position:absolute;inset:0;
  background:var(--pink);
  -webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat;
  filter:drop-shadow(0 0 6px rgba(236,72,153,.6))}
.cursor.hot{width:56px;height:56px;margin:-28px 0 0 -28px;filter:drop-shadow(0 0 14px rgba(236,72,153,.8))}
.cursor-dot{position:fixed;top:0;left:0;z-index:251;pointer-events:none;width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--sky-4);
  box-shadow:0 0 8px var(--sky-4)}
:root{--paw:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='15' ry='13'/%3E%3Cellipse cx='14' cy='24' rx='7' ry='9'/%3E%3Cellipse cx='26' cy='14' rx='7' ry='9.5'/%3E%3Cellipse cx='40' cy='14' rx='7' ry='9.5'/%3E%3Cellipse cx='52' cy='24' rx='7' ry='9'/%3E%3C/svg%3E")}
/* hide the OS arrow so only the paw reads */
@media (hover:hover){html,body,a,button{cursor:none}}
@media(hover:none){.cursor,.cursor-dot{display:none}}

/* ---------- nav ----------------------------------------------------- */
nav{position:fixed;inset:0 0 auto;z-index:180;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.9rem var(--gut);
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s,padding .4s}
nav.stuck{background:rgba(10,10,18,.78);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(236,72,153,.2);padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.65rem}
.brand-logo{width:34px;height:34px;border-radius:7px}
.brand-txt{font-family:var(--f-display);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.brand-txt em{font-family:var(--f-vi);font-style:normal;
  background:linear-gradient(180deg,var(--sky-2),var(--sky-3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.navlinks{display:flex;gap:1.5rem}
.navlinks a{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);position:relative;padding:.25rem 0;transition:color .3s}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--pink);transition:width .35s var(--ease)}
.navlinks a:hover{color:var(--bone)}.navlinks a:hover::after{width:100%}
@media(max-width:960px){.navlinks{display:none}}
.nav-live{display:flex;align-items:center;gap:.7rem;font-family:var(--f-mono);
  font-size:.78rem;font-variant-numeric:tabular-nums}
.nav-live .dot{width:7px;height:7px;border-radius:50%;background:var(--up);
  box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.btn{font-family:var(--f-display);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.5rem 1.1rem;border:1px solid var(--pink);color:var(--bone);position:relative;
  overflow:hidden;cursor:pointer;background:none;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn span{position:relative;z-index:2}
.btn::after{content:"";position:absolute;inset:0;background:var(--pink);
  transform:translateY(101%);transition:transform .4s var(--ease)}
.btn:hover::after{transform:none}
.btn.solid{background:linear-gradient(100deg,var(--pink),var(--orange));color:#170a12;border:0}
.btn.solid.ok{background:var(--up)}

/* ---------- hero ---------------------------------------------------- */
.hero{position:relative;height:100svh;overflow:hidden;display:grid;align-items:end}
.sky-canvas,.sky-fallback{position:absolute;inset:0;width:100%;height:100%}
.sky-fallback{background:var(--sunset);z-index:-1}
.hero-art{position:absolute;inset:0;background:url("../assets/hero.jpg") center 58%/cover;
  opacity:.95;will-change:transform}
.hero-scrim{position:absolute;inset:0;background:
  radial-gradient(118% 76% at 50% 42%,transparent 32%,rgba(10,10,18,.42) 84%),
  linear-gradient(180deg,rgba(10,10,18,.6) 0,transparent 24%,transparent 44%,rgba(10,10,18,.9) 90%,var(--ink) 100%)}
.hero-copy{position:relative;z-index:5;padding:0 var(--gut) clamp(3rem,8vh,6rem);
  max-width:var(--maxw);margin-inline:auto;width:100%}
.kicker{font-size:var(--t-label);letter-spacing:.4em;text-transform:uppercase;
  color:var(--bone);opacity:.8;margin-bottom:.9rem}

/* wordmark: three tight lines, numeral hanging right — never centred */
.wordmark{display:flex;align-items:flex-end;gap:clamp(.5rem,2vw,1.6rem);line-height:.8}
.wm-lines{display:grid;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(2.6rem,9.4vw,8.4rem);letter-spacing:-.03em;color:var(--bone)}
.wm-lines i{font-style:normal;display:block;
  text-shadow:0 0 46px rgba(191,52,117,.5),0 3px 0 rgba(31,33,77,.55)}
.wm-vi{font-family:var(--f-vi);font-size:clamp(3.4rem,13vw,11.5rem);line-height:.78;
  background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 52%,var(--sky-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px rgba(246,241,228,.82)}
.wanted{display:flex;gap:.3rem;margin:1.2rem 0 .9rem}
.wanted b{width:17px;height:17px;background:var(--bone);opacity:.2;transition:opacity .3s,background .3s;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.wanted b.on{opacity:1;background:var(--sky-4)}
.hero-sub{color:var(--dim);letter-spacing:.04em}
.scroll-cue{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:6;
  display:grid;justify-items:center;gap:.45rem;font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--faint)}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(180deg,var(--pink),transparent)}

/* ---------- police scanner ------------------------------------------ */
.scanner{display:flex;align-items:center;gap:1rem;border-block:1px solid rgba(236,72,153,.2);
  background:rgba(26,23,48,.6);padding:.55rem var(--gut);overflow:hidden}
.scan-label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.scanner.live .scan-label{color:var(--up)}
.scan-track{display:flex;gap:2rem;overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent)}
.scan-row{font-family:var(--f-mono);font-size:.7rem;color:var(--dim);white-space:nowrap;
  animation:slidein .5s var(--ease)}
.scan-row i{color:var(--pink);font-style:normal}
.scan-row b{color:var(--bone);font-weight:700}
.scan-row em{color:var(--sky-4);font-style:normal}
@keyframes slidein{from{opacity:0;transform:translateX(-14px)}}

/* ---------- type ----------------------------------------------------- */
.eyebrow{font-size:var(--t-label);letter-spacing:.34em;text-transform:uppercase;
  color:var(--pink);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--pink)}
.d1{font-family:var(--f-display);text-transform:uppercase;font-size:var(--t-d1);
  line-height:.92;letter-spacing:-.025em}
.d2{font-family:var(--f-display);text-transform:uppercase;font-size:var(--t-d2);
  line-height:.98;letter-spacing:-.02em}
.lede{max-width:58ch;margin-top:1.2rem;color:var(--dim)}
.w{display:inline-block;overflow:hidden;vertical-align:bottom}
.w i{display:inline-block;font-style:normal}

.stats4{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:rgba(246,241,228,.1);margin-top:3rem}
.stats4 .s{background:var(--ink);padding:1.3rem 1rem}
.stats4 b{display:block;font-family:var(--f-mono);font-weight:700;font-size:var(--t-num);
  color:var(--sky-4);line-height:1;font-variant-numeric:tabular-nums}
.stats4 span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}

/* ---------- cinema ---------------------------------------------------- */
.cinema{position:relative;margin-top:2rem;aspect-ratio:16/9;overflow:hidden;cursor:pointer;
  background:#000;border:1px solid rgba(246,241,228,.12)}
.cinema video{width:100%;height:100%;object-fit:cover}
.cinema .play{position:absolute;inset:0;display:grid;place-items:center;gap:.8rem;
  background:linear-gradient(0deg,rgba(10,10,18,.55),transparent 60%);
  border:0;cursor:pointer;color:var(--bone);font-family:var(--f-display);
  text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;transition:opacity .4s}
.cinema .play i{width:64px;height:64px;border:2px solid var(--bone);border-radius:50%;
  display:grid;place-items:center;transition:transform .4s var(--ease),background .4s}
.cinema .play i::after{content:"";border-left:16px solid var(--bone);
  border-block:10px solid transparent;margin-left:5px}
.cinema:hover .play i{transform:scale(1.1);background:rgba(236,72,153,.25)}
.cinema.playing .play{opacity:0;pointer-events:none}
.cine-corner{position:absolute;width:22px;height:22px;border:2px solid var(--sky-4);opacity:.75}
.cine-corner.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.cine-corner.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.cine-corner.bl{bottom:10px;left:10px;border-right:0;border-top:0}
.cine-corner.br{bottom:10px;right:10px;border-left:0;border-top:0}

/* ---------- crew ------------------------------------------------------ */
.crew{display:grid;gap:1rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{position:relative;aspect-ratio:3/4;overflow:hidden;
  background:var(--asphalt-2);border:1px solid rgba(246,241,228,.1);
  transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .4s var(--ease),border-color .4s,box-shadow .5s var(--ease);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(236,72,153,.22),transparent 60%)}
.card:hover{border-color:rgba(236,72,153,.55);box-shadow:0 26px 60px -26px rgba(236,72,153,.5)}
.card:hover::after{opacity:1}
.card-img{position:absolute;inset:0;background-size:cover;background-position:center top;
  transition:transform .9s var(--ease)}
.card:hover .card-img{transform:scale(1.06)}
.card-no{position:absolute;top:.7rem;right:.9rem;font-family:var(--f-mono);font-weight:700;
  font-size:1.6rem;color:rgba(246,241,228,.28)}
.card-body{position:absolute;inset:auto 0 0;padding:1.1rem;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(10,10,18,.86) 42%,var(--ink))}
.card-body h3{font-family:var(--f-display);text-transform:uppercase;font-size:var(--t-h3);line-height:1}
.card-body .q{margin-top:.4rem;font-size:.78rem;font-style:italic;color:var(--sky-4)}
.card-body .d{margin-top:.5rem;font-size:.78rem;color:var(--dim);max-height:0;opacity:0;
  overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
.card:hover .d{max-height:7rem;opacity:1}

/* ---------- city (pinned horizontal) --------------------------------- */
.city{position:relative;height:100svh;overflow:hidden;display:flex;align-items:center}
.city-head{position:absolute;top:clamp(4.5rem,12vh,7rem);left:0;right:0;z-index:3;pointer-events:none}
.rail{display:flex;gap:1rem;padding-inline:var(--gut);will-change:transform}
.dist{flex:0 0 clamp(250px,30vw,400px);height:min(60vh,500px);position:relative;overflow:hidden;
  border:1px solid rgba(246,241,228,.1);background:var(--asphalt-2)}
.dist-img{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.55;transition:opacity .5s,transform .9s var(--ease)}
.dist:hover .dist-img{opacity:.85;transform:scale(1.07)}
.dist::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,10,18,.92))}
.dist-body{position:absolute;inset:auto 0 0;padding:1.2rem;z-index:2}
.dist .tag{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sky-4)}
.dist h3{font-family:var(--f-display);text-transform:uppercase;font-size:1.6rem;line-height:1;margin-top:.45rem}
.dist p{margin-top:.4rem;font-size:.78rem;color:var(--dim)}
.pin-prog{position:absolute;left:var(--gut);right:var(--gut);bottom:2rem;height:2px;
  background:rgba(246,241,228,.12);z-index:3}
.pin-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--sky-4))}

/* ---------- rides ------------------------------------------------------ */
.rides{display:grid;gap:1px;margin-top:3rem;background:rgba(246,241,228,.1);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ride{background:var(--ink);padding:1.6rem 1.3rem;position:relative;overflow:hidden;
  transition:background .4s var(--ease)}
.ride::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:linear-gradient(150deg,rgba(236,72,153,.15),transparent 62%)}
.ride:hover{background:var(--asphalt)}.ride:hover::before{opacity:1}
.ride h4{font-family:var(--f-display);text-transform:uppercase;font-size:1.45rem;position:relative;z-index:2}
.ride p{margin-top:.45rem;font-size:.8rem;color:var(--dim);position:relative;z-index:2}
.specs{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem;position:relative;z-index:2}
.specs b{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:.28rem .5rem;border:1px solid rgba(246,241,228,.18);color:var(--dim)}

/* ---------- series ----------------------------------------------------- */
.eps{display:grid;gap:.55rem;margin-top:2.4rem;
  grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
.ep{border:1px solid rgba(246,241,228,.11);padding:1.05rem .95rem;transition:transform .4s var(--ease),border-color .4s,background .4s}
.ep.live{border-color:rgba(236,72,153,.55);background:linear-gradient(150deg,rgba(236,72,153,.13),transparent)}
.ep.live:hover{transform:translateY(-4px)}
.ep .no{font-size:.56rem;letter-spacing:.28em;color:var(--faint);font-family:var(--f-mono)}
.ep h5{font-family:var(--f-display);text-transform:uppercase;font-size:1rem;margin-top:.45rem}
.ep.lock h5{color:var(--faint)}
.ep .state{display:block;margin-top:.7rem;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase}
.ep.live .state{color:var(--pink)}.ep.lock .state{color:rgba(246,241,228,.28)}

/* ---------- live HUD ---------------------------------------------------- */
.ticker{position:relative}
.hud{margin-top:2.4rem;border:1px solid rgba(246,241,228,.14);background:var(--asphalt);
  padding:1.4rem;max-width:920px}
body.stale .hud{opacity:.62}
.hud-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.hud-price{display:flex;align-items:baseline;gap:.8rem}
.hud-price b{font-family:var(--f-mono);font-weight:700;font-size:var(--t-num);line-height:1;
  font-variant-numeric:tabular-nums}
.hud-price em{font-family:var(--f-mono);font-style:normal;font-size:1rem;font-weight:700}
.hud-price em[data-dir=up]{color:var(--up)}.hud-price em[data-dir=down]{color:var(--down)}
.hud-meta{display:flex;align-items:center;gap:.7rem;font-size:.66rem;color:var(--faint);
  font-family:var(--f-mono)}
.chip{padding:.16rem .45rem;border:1px solid var(--down);color:var(--down);letter-spacing:.14em}
.spark{width:100%;height:170px;margin:1.1rem 0}
.hud-grid{display:grid;gap:1px;background:rgba(246,241,228,.1);
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.hud-grid>div{background:var(--asphalt);padding:.85rem .8rem}
.hud-grid span{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.hud-grid b{font-family:var(--f-mono);font-size:1.1rem;font-variant-numeric:tabular-nums}
.flow{position:relative;height:8px;background:var(--down);margin-top:1.1rem;overflow:hidden}
.flow i{position:absolute;inset:0 auto 0 0;width:var(--buy,50%);background:var(--up);
  transition:width .6s var(--ease)}
.flow::after{content:attr(data-label);position:absolute;left:0;top:12px;font-size:.62rem;
  color:var(--faint);font-family:var(--f-mono);white-space:nowrap}
.curve{margin-top:2.2rem;display:grid;gap:.45rem}
.curve-bar{height:6px;background:rgba(246,241,228,.12);overflow:hidden}
.curve-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--sky-4));
  transition:width .8s var(--ease)}
.curve span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-family:var(--f-mono)}

.ca{display:flex;gap:.55rem;margin-top:2rem;flex-wrap:wrap;max-width:920px}
.ca code{flex:1 1 320px;padding:.9rem 1rem;border:1px solid rgba(246,241,228,.18);
  font-family:var(--f-mono);font-size:.74rem;color:var(--dim);overflow-wrap:anywhere;
  background:rgba(246,241,228,.03)}
.links{display:flex;gap:.55rem;margin-top:1.8rem;flex-wrap:wrap}
.links a{padding:.72rem 1.3rem;border:1px solid rgba(246,241,228,.2);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;transition:border-color .35s,color .35s,background .35s}
.links a:hover{border-color:var(--pink);color:var(--pink);background:rgba(236,72,153,.08)}

/* ---------- footer ------------------------------------------------------ */
footer{border-top:1px solid rgba(246,241,228,.1);padding:3rem 0 2rem}
.foot-mark{font-family:var(--f-display);text-transform:uppercase;line-height:.82;
  font-size:clamp(2.2rem,11vw,8rem);letter-spacing:-.03em;
  background:var(--sunset);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.55}
.foot-mark em{font-family:var(--f-vi);font-style:normal}
.foot-row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.8rem;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .card{transform:none}
}

/* paw-print trail canvas — under the UI, above the art */
.paw-layer{position:fixed;inset:0;z-index:170;pointer-events:none}
/* a value we could not read is dimmed and dashed, never a fabricated 0 */
[data-unavailable="1"]{color:var(--faint)!important;opacity:.75}

/* ── Turkish-locale casing guard ────────────────────────────────────
   text-transform:uppercase maps i -> İ under a tr locale, so "Catillac"
   shipped as "CATİLLAC". All display copy is now pre-uppercased at the
   source; this neutralises the transform so no future string can regress,
   and pins the casing locale for anything that still asks for it. */
.d1,.d2,.wm-lines,.brand-txt,.card-body h3,.dist h3,.ride h4,.ep h5,
.foot-mark,.eyebrow,.navlinks a,.btn,.kicker,.load-tip,.specs b,
.stats4 span,.hud-grid span,.dist .tag,.ep .state,.links a,.scan-label,
/* integrator addition — these three still asked for the transform.
   .foot-row was the live hazard ("Not affiliated" -> "AFFİLİATED" under a
   tr locale); .scroll-cue / .cinema .play carry already-uppercase copy and
   are neutralised so no future string can regress. */
.scroll-cue,.cinema .play,.foot-row{
  text-transform:none;
}
html{ -webkit-locale:"en"; }

/* ---------- hero action bar: socials + one-tap contract copy -------- */
.hero-actions{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-top:1.4rem}
.ca-mini{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem .55rem .9rem;
  border:1px solid rgba(246,241,228,.24);background:rgba(10,10,18,.42);
  backdrop-filter:blur(10px);max-width:100%}
.ca-mini code{font-family:var(--f-mono);font-size:.68rem;color:var(--bone);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(46vw,320px)}
.ca-mini button{font-family:var(--f-display);font-size:.66rem;letter-spacing:.1em;
  padding:.34rem .7rem;border:0;cursor:pointer;color:#170a12;
  background:linear-gradient(100deg,var(--pink),var(--orange))}
.ca-mini button.ok{background:var(--up)}
.soc{display:flex;gap:.4rem}
.soc a{width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(246,241,228,.24);background:rgba(10,10,18,.42);
  backdrop-filter:blur(10px);transition:border-color .3s,background .3s,transform .3s var(--ease)}
.soc a:hover{border-color:var(--pink);background:rgba(236,72,153,.16);transform:translateY(-3px)}
.soc svg{width:17px;height:17px;fill:var(--bone)}
@media(max-width:520px){.ca-mini code{max-width:42vw}}


/* ================================================================
   SECTION: MAP  (appended by integrator — scoped under #sec-map)
   ================================================================ */
/* ============================================================
   SEC-MAP — interactive map of Felinida
   Every selector scoped under #sec-map. No text-transform anywhere:
   display copy is pre-uppercased at the source (Turkish-locale rule).
   ============================================================ */

#sec-map .map-shell{
  display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:1.4rem;
  margin-top:3rem;align-items:start;
}
@media (max-width:900px){
  #sec-map .map-shell{grid-template-columns:1fr}
}

/* ---------- stage ---------------------------------------------------- */
#sec-map .map-stage{
  position:relative;overflow:hidden;
  border:1px solid rgba(246,241,228,.12);background:var(--asphalt);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
#sec-map .map-stage svg{width:100%;height:auto;display:block}

/* ---------- zones ---------------------------------------------------- */
#sec-map .zone{
  fill:var(--zc,var(--bone));fill-opacity:.09;
  stroke:var(--zc,var(--bone));stroke-opacity:.5;stroke-width:1.6;
  cursor:pointer;outline:none;
  transition:transform .45s var(--ease),fill-opacity .35s,stroke-opacity .35s,filter .45s;
}
#sec-map .zone[data-d="vice"]    {--zc:var(--pink)}
#sec-map .zone[data-d="neon"]    {--zc:var(--violet)}
#sec-map .zone[data-d="beach"]   {--zc:var(--sky-4)}
#sec-map .zone[data-d="downtown"]{--zc:var(--sky-3)}
#sec-map .zone[data-d="pawn"]    {--zc:var(--sky-2)}
#sec-map .zone[data-d="docks"]   {--zc:var(--sky-1)}
#sec-map .zone[data-d="sunset"]  {--zc:var(--orange)}
#sec-map .zone[data-d="docks"]{stroke-opacity:.75}   /* sky-1 is dark; lift its outline */

#sec-map .zone:hover,
#sec-map .zone:focus-visible,
#sec-map .zone.hl,
#sec-map .zone.pinned{
  fill-opacity:.34;stroke-opacity:1;
  transform:translateY(-6px);
  filter:drop-shadow(0 12px 16px rgba(10,10,18,.55)) drop-shadow(0 0 14px var(--zc));
}
#sec-map .zone:focus-visible{stroke-width:2.4}

/* ---------- svg typography ------------------------------------------- */
#sec-map .mp-labels text{
  font-family:var(--f-display);font-size:27px;letter-spacing:.14em;
  fill:rgba(246,241,228,.88);text-anchor:middle;
  paint-order:stroke;stroke:rgba(10,10,18,.65);stroke-width:4px;
}
#sec-map .mp-labels text.sm{font-size:21px}
#sec-map .mp-keylabel{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.24em;
  fill:rgba(246,241,228,.4);text-anchor:middle;pointer-events:none;
}
#sec-map .mp-roadlabel{
  font-family:var(--f-mono);font-size:14px;letter-spacing:.3em;
  fill:rgba(246,241,228,.42);pointer-events:none;
}
#sec-map .mp-compass{
  font-family:var(--f-mono);font-size:15px;letter-spacing:.1em;
  fill:rgba(246,241,228,.6);text-anchor:middle;
}
#sec-map .mp-scale,#sec-map .mp-coords{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.22em;
  fill:rgba(246,241,228,.38);
}
#sec-map .mp-scale{text-anchor:middle}
@media (max-width:560px){
  #sec-map .mp-furniture{display:none}
  #sec-map .mp-labels text{font-size:34px}
  #sec-map .mp-labels text.sm{font-size:26px}
}

/* ---------- patrol car + boat ---------------------------------------- */
#sec-map .mp-car{
  offset-rotate:auto;offset-distance:0%;
  animation:mp-drive 34s linear infinite;
  animation-play-state:paused;
}
#sec-map .mp-boat{
  offset-rotate:auto;offset-distance:0%;
  animation:mp-sail 26s ease-in-out infinite alternate;
  animation-play-state:paused;
}
#sec-map .map-stage.running .mp-car,
#sec-map .map-stage.running .mp-boat{animation-play-state:running}

#sec-map .mp-lightA{animation:mp-flash 0.9s steps(2,jump-none) infinite}
#sec-map .mp-lightB{animation:mp-flash 0.9s steps(2,jump-none) infinite reverse}

@keyframes mp-drive{to{offset-distance:100%}}
@keyframes mp-sail {to{offset-distance:100%}}
@keyframes mp-flash{0%{opacity:1}100%{opacity:.15}}

/* ---------- intel card ------------------------------------------------ */
#sec-map .map-card{
  position:absolute;left:0;top:0;z-index:5;
  width:min(272px,74vw);padding:1rem 1.05rem .95rem;
  background:rgba(18,16,31,.94);backdrop-filter:blur(10px);
  border:1px solid var(--zc,var(--pink));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  box-shadow:0 18px 46px -18px rgba(10,10,18,.9);
  opacity:0;transform:translateY(8px) scale(.97);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  will-change:left,top;
}
#sec-map .map-card.show{opacity:1;transform:none}
#sec-map .map-card.pin{pointer-events:auto}
#sec-map .mc-close{
  position:absolute;top:.3rem;right:.45rem;display:none;
  background:none;border:0;color:var(--faint);font-size:1.15rem;line-height:1;
  cursor:pointer;padding:.2rem;transition:color .3s;
}
#sec-map .map-card.pin .mc-close{display:block}
#sec-map .mc-close:hover{color:var(--pink)}
#sec-map .mc-name{
  display:block;font-family:var(--f-display);font-size:1.25rem;line-height:1;
  letter-spacing:.02em;color:var(--bone);
}
#sec-map .mc-turf{
  display:inline-block;margin-top:.5rem;padding:.2rem .5rem;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.22em;
  color:var(--zc,var(--sky-4));border:1px solid var(--zc,var(--sky-4));
}
#sec-map .mc-blurb{margin-top:.65rem;font-size:.78rem;line-height:1.55;color:var(--dim)}
#sec-map .mc-heat{
  display:flex;align-items:center;gap:.55rem;margin-top:.8rem;
  padding-top:.7rem;border-top:1px solid rgba(246,241,228,.12);
}
#sec-map .mc-heat span{
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.26em;color:var(--faint);
}
#sec-map .mc-bars{display:flex;gap:3px}
#sec-map .mc-bars i{
  width:13px;height:6px;background:rgba(246,241,228,.14);
  clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);
  transition:background .3s;
}
#sec-map .mc-bars i.on{background:var(--zc,var(--pink))}
#sec-map .mc-heat em{
  font-family:var(--f-mono);font-style:normal;font-size:.56rem;
  letter-spacing:.18em;color:var(--zc,var(--pink));
}

/* ---------- legend / side panel --------------------------------------- */
#sec-map .map-side{display:grid;gap:1rem;align-content:start}
#sec-map .map-side-title{
  font-family:var(--f-display);font-size:.95rem;letter-spacing:.1em;color:var(--bone);
  display:flex;align-items:center;gap:.6rem;
}
#sec-map .map-side-title::after{content:"";flex:1;height:1px;background:rgba(246,241,228,.14)}
#sec-map .map-legend{list-style:none;display:grid;gap:1px;background:rgba(246,241,228,.1)}
#sec-map .map-legend button{
  width:100%;display:flex;align-items:center;gap:.65rem;
  background:var(--ink);border:0;padding:.62rem .7rem;cursor:pointer;
  color:var(--dim);font-family:var(--f-body);text-align:left;
  transition:background .3s,color .3s;
}
#sec-map .map-legend button:hover,
#sec-map .map-legend button:focus-visible{background:var(--asphalt-2);color:var(--bone);outline:none}
#sec-map .map-legend button i{
  width:12px;height:12px;flex:none;background:var(--zc,var(--bone));
  clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);
  box-shadow:0 0 8px var(--zc,transparent);
}
#sec-map .map-legend button[data-d="vice"]    {--zc:var(--pink)}
#sec-map .map-legend button[data-d="neon"]    {--zc:var(--violet)}
#sec-map .map-legend button[data-d="beach"]   {--zc:var(--sky-4)}
#sec-map .map-legend button[data-d="downtown"]{--zc:var(--sky-3)}
#sec-map .map-legend button[data-d="pawn"]    {--zc:var(--sky-2)}
#sec-map .map-legend button[data-d="docks"]   {--zc:var(--sky-1)}
#sec-map .map-legend button[data-d="sunset"]  {--zc:var(--orange)}
#sec-map .map-legend b{font-size:.72rem;letter-spacing:.12em;font-weight:600}
#sec-map .map-legend em{
  margin-left:auto;font-family:var(--f-mono);font-style:normal;
  font-size:.56rem;letter-spacing:.18em;color:var(--faint);
}
#sec-map .map-note{font-size:.68rem;line-height:1.6;color:var(--faint)}
#sec-map .map-hint{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.24em;color:var(--faint);
  display:flex;align-items:center;gap:.5rem;
}
#sec-map .map-hint::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--sky-4);
  animation:mp-blink 2.2s infinite;
}
@keyframes mp-blink{0%,100%{opacity:1}50%{opacity:.2}}

@media (max-width:900px){
  #sec-map .map-legend{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  #sec-map .map-legend{grid-template-columns:1fr}
  #sec-map .map-card{width:min(248px,82vw)}
}

/* ---------- reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #sec-map .mp-car,#sec-map .mp-boat,
  #sec-map .mp-lightA,#sec-map .mp-lightB,
  #sec-map .map-hint::before{animation:none}
  #sec-map .zone,#sec-map .map-card{transition:none}
  #sec-map .zone:hover,#sec-map .zone:focus-visible,
  #sec-map .zone.hl,#sec-map .zone.pinned{transform:none}
}


/* ================================================================
   SECTION: RADIO  (appended by integrator — scoped under #sec-radio)
   ================================================================ */
/* ============================================================
   RADIO — Theft City airwaves
   Scope contract: EVERY selector lives under #sec-radio.
   No text-transform anywhere — display copy is uppercased at the
   source (Turkish-locale i→İ guard).
   ============================================================ */

#sec-radio{position:relative;overflow:hidden}
#sec-radio::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(64% 50% at 84% 4%,rgba(139,92,246,.13),transparent 60%),
    radial-gradient(50% 42% at 8% 96%,rgba(236,72,153,.07),transparent 65%)}

/* ---------- head row ------------------------------------------------ */
#sec-radio .rd-head{position:relative;z-index:1;display:flex;align-items:flex-end;
  justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
#sec-radio .rd-head-copy{min-width:min(100%,34rem)}

#sec-radio .rd-mute{display:inline-flex;align-items:center;gap:.65rem;cursor:pointer;
  background:rgba(246,241,228,.03);border:1px solid rgba(246,241,228,.2);color:var(--dim);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;padding:.72rem 1.1rem;
  transition:border-color .35s,color .35s,background .35s;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
#sec-radio .rd-mute:hover{border-color:var(--pink);color:var(--bone);
  background:rgba(236,72,153,.08)}
#sec-radio .rd-mute[aria-pressed="true"]{border-color:rgba(74,222,128,.55);color:var(--bone)}
#sec-radio .rd-mute-ico{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
#sec-radio .rd-mute-ico b{width:3px;background:var(--faint);transition:background .35s}
#sec-radio .rd-mute-ico b:nth-child(1){height:5px}
#sec-radio .rd-mute-ico b:nth-child(2){height:8px}
#sec-radio .rd-mute-ico b:nth-child(3){height:12px}
#sec-radio .rd-mute[aria-pressed="true"] .rd-mute-ico b{background:var(--up)}

/* ---------- head unit ---------------------------------------------- */
#sec-radio .rd-deck{position:relative;z-index:1;display:grid;gap:1rem;margin-top:3rem}

#sec-radio .rd-dial{background:var(--asphalt);border:1px solid rgba(246,241,228,.14);
  padding:clamp(1.1rem,3vw,1.8rem);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}

/* scale + ticks (two tick weights, pure CSS) */
#sec-radio .rd-scale{position:relative;height:66px;
  border-bottom:1px solid rgba(246,241,228,.16)}
#sec-radio .rd-ticks{position:absolute;inset:auto 0 0;height:100%;pointer-events:none}
#sec-radio .rd-ticks::before{content:"";position:absolute;inset:auto 0 0;height:12px;
  background:repeating-linear-gradient(90deg,rgba(246,241,228,.22) 0 1px,transparent 1px 2.5%)}
#sec-radio .rd-ticks::after{content:"";position:absolute;inset:auto 0 0;height:22px;
  background:repeating-linear-gradient(90deg,rgba(246,241,228,.4) 0 1px,transparent 1px 10%)}
#sec-radio .rd-nums{position:absolute;inset:0 0 auto;display:flex;
  justify-content:space-between;font-family:var(--f-mono);font-size:.62rem;
  color:var(--faint);letter-spacing:.08em;font-variant-numeric:tabular-nums}

/* station stop markers */
#sec-radio .rd-stop{position:absolute;bottom:-3px;width:5px;height:5px;border-radius:50%;
  background:var(--sky-4);opacity:.55;transform:translateX(-50%)}

/* the needle */
#sec-radio .rd-needle{position:absolute;top:14px;bottom:-8px;width:2px;
  transform:translateX(-50%);will-change:left;
  background:linear-gradient(180deg,var(--pink),var(--sky-4));
  box-shadow:0 0 12px rgba(236,72,153,.75),0 0 28px rgba(236,72,153,.35)}
#sec-radio .rd-needle::after{content:"";position:absolute;left:50%;bottom:-4px;
  width:8px;height:8px;transform:translateX(-50%) rotate(45deg);background:var(--sky-4)}

/* readout row */
#sec-radio .rd-readout{display:flex;align-items:center;gap:clamp(.9rem,3vw,1.6rem);
  flex-wrap:wrap;margin-top:1.15rem}
#sec-radio .rd-freq{font-family:var(--f-mono);font-weight:700;line-height:1;
  font-size:clamp(1.9rem,6vw,3.1rem);color:var(--sky-4);
  font-variant-numeric:tabular-nums;min-width:4.2ch}
#sec-radio .rd-now{display:grid;gap:.15rem;min-width:0}
#sec-radio .rd-now-name{font-family:var(--f-display);font-size:clamp(1rem,2.4vw,1.35rem);
  line-height:1;letter-spacing:.02em}
#sec-radio .rd-now-genre{font-size:.58rem;letter-spacing:.26em;color:var(--faint)}

#sec-radio .rd-onair{display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.22em;padding:.3rem .6rem;
  border:1px solid rgba(246,241,228,.18);color:var(--faint)}
#sec-radio .rd-onair i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
#sec-radio .rd-onair-on{display:none;font-weight:700}
#sec-radio.live .rd-onair{border-color:rgba(239,68,68,.6);color:var(--down)}
#sec-radio.live .rd-onair i{background:var(--down);
  box-shadow:0 0 0 0 rgba(239,68,68,.55);animation:rd-pulse 1.6s infinite}
#sec-radio.live .rd-onair-on{display:inline}
#sec-radio.live .rd-onair-off{display:none}
@keyframes rd-pulse{70%{box-shadow:0 0 0 7px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

/* VU meter — animates only while live */
/* NOTE (integrator): the `height` keyframe below is DEAD. The polish layer at
   the foot of this file redefines both `#sec-radio .rd-vu b` and
   `@keyframes rd-vu` with a compositor-only scaleY version, and later wins.
   Do not "fix" the height version — fix the transform one. */
#sec-radio .rd-vu{display:flex;align-items:flex-end;gap:3px;height:26px}
#sec-radio .rd-vu b{width:4px;height:22%;
  background:linear-gradient(180deg,var(--sky-4),var(--pink))}
#sec-radio.live .rd-vu b{animation:rd-vu 0.9s ease-in-out infinite alternate}
#sec-radio.live .rd-vu b:nth-child(1){animation-delay:0s}
#sec-radio.live .rd-vu b:nth-child(2){animation-delay:-.35s}
#sec-radio.live .rd-vu b:nth-child(3){animation-delay:-.6s}
#sec-radio.live .rd-vu b:nth-child(4){animation-delay:-.15s}
#sec-radio.live .rd-vu b:nth-child(5){animation-delay:-.5s}
@keyframes rd-vu{from{height:14%}to{height:96%}}

/* ---------- station grid ------------------------------------------- */
#sec-radio .rd-list{display:grid;gap:1px;background:rgba(246,241,228,.1);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media(max-width:400px){
  #sec-radio .rd-list{grid-template-columns:1fr}
}

#sec-radio .rd-st{position:relative;display:grid;gap:.5rem;text-align:left;cursor:pointer;
  background:var(--ink);border:0;color:var(--bone);font-family:var(--f-body);
  padding:1.35rem 1.15rem 1.45rem;overflow:hidden;
  transition:background .4s var(--ease)}
#sec-radio .rd-st::before{content:"";position:absolute;inset:0;opacity:0;
  transition:opacity .4s;pointer-events:none;
  background:linear-gradient(150deg,rgba(236,72,153,.14),transparent 62%)}
#sec-radio .rd-st:hover{background:var(--asphalt)}
#sec-radio .rd-st:hover::before{opacity:1}
#sec-radio .rd-st:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}

#sec-radio .rd-st-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
#sec-radio .rd-st-freq{font-family:var(--f-mono);font-weight:700;font-size:1.05rem;
  color:var(--sky-4);font-variant-numeric:tabular-nums}
#sec-radio .rd-st-genre{font-size:.56rem;letter-spacing:.22em;color:var(--faint);text-align:right}
#sec-radio .rd-st-name{font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.4rem);
  line-height:1.02;letter-spacing:.01em}
#sec-radio .rd-st-dj{font-size:.58rem;letter-spacing:.26em;color:var(--dim)}
#sec-radio .rd-st-tag{font-size:.78rem;font-style:italic;color:var(--dim);line-height:1.5}

#sec-radio .rd-st-state{position:absolute;top:.7rem;right:.9rem;opacity:0;
  font-family:var(--f-mono);font-size:.54rem;letter-spacing:.26em;color:var(--pink);
  transform:translateY(-4px);transition:opacity .35s,transform .35s var(--ease)}

/* tuned state */
#sec-radio .rd-st.on{background:linear-gradient(150deg,rgba(236,72,153,.13),var(--ink) 62%);
  box-shadow:inset 0 0 0 1px rgba(236,72,153,.55)}
#sec-radio .rd-st.on .rd-st-state{opacity:1;transform:none}
#sec-radio .rd-st.on .rd-st-tag{color:var(--bone)}
#sec-radio .rd-st.on .rd-st-genre{color:var(--sky-4)}

/* ---------- footnote ------------------------------------------------ */
#sec-radio .rd-note{margin-top:1.4rem;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.16em;color:var(--faint);line-height:1.9}

/* ---------- reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  #sec-radio.live .rd-vu b,
  #sec-radio.live .rd-onair i{animation:none}
  #sec-radio .rd-needle{transition:none}
  #sec-radio .rd-st,
  #sec-radio .rd-st-state{transition:none}
}


/* ================================================================
   SECTION: BRANDS  (appended by integrator — scoped under #sec-brands)
   ================================================================ */
/* ============================================================
   BRANDS — the in-world brands wall of Felinida
   All selectors scoped under #sec-brands. No text-transform.
   ============================================================ */

#sec-brands {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(80, 54, 111, .22), transparent 62%),
    linear-gradient(180deg, var(--ink), var(--asphalt) 55%, var(--ink));
}

/* thin sunset seam at the top of the section */
#sec-brands::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--sky-2) 30%, var(--sky-4) 50%, var(--sky-2) 70%, transparent);
  opacity: .55;
  pointer-events: none;
}

/* ---------- header ---------- */

#sec-brands .brands-head {
  text-align: center;
  margin-bottom: clamp(2.4rem, 5vw, 4.2rem);
}

#sec-brands .brands-title {
  margin: .55em auto .5em;
}

#sec-brands .brands-lede {
  max-width: 56ch;
  margin-inline: auto;
}

/* ---------- the wall ---------- */

#sec-brands .brands-wall {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}

#sec-brands .brands-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

#sec-brands .brands-track {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  width: max-content;
  padding-block: 4px;
  will-change: transform;
}

/* rtl row starts pre-shifted so its runway extends to the right;
   JS animates it back toward 0 (a static-fallback override sits below) */
#sec-brands .brands-row[data-dir="rtl"] .brands-track {
  transform: translateX(-24%);
}

/* ---------- tiles ---------- */

#sec-brands .brand {
  --acc: var(--sky-4);
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: clamp(236px, 24vw, 316px);
  min-height: clamp(198px, 20vw, 236px);
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(246, 241, 228, .09);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--asphalt-2), var(--asphalt));
  cursor: default;
  transition:
    border-color .45s var(--ease),
    transform .45s var(--ease),
    box-shadow .45s var(--ease);
}

#sec-brands .brand:hover,
#sec-brands .brand:focus-visible {
  border-color: color-mix(in srgb, var(--acc) 60%, transparent);
  box-shadow:
    0 12px 34px -18px color-mix(in srgb, var(--acc) 55%, transparent),
    inset 0 1px 0 rgba(246, 241, 228, .07);
  transform: translateY(-4px);
  outline: none;
}

/* scanline sheen that sweeps on hover */
#sec-brands .brand::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    transparent 42%, rgba(246, 241, 228, .06) 50%, transparent 58%);
  background-size: 240% 100%;
  background-position: 110% 0;
  pointer-events: none;
  transition: background-position .9s var(--ease);
}

#sec-brands .brand:hover::after,
#sec-brands .brand:focus-visible::after {
  background-position: -110% 0;
}

/* per-brand accent */
#sec-brands .brand[data-b="king"]     { --acc: var(--sky-4); }
#sec-brands .brand[data-b="bank"]     { --acc: var(--sky-5); }
#sec-brands .brand[data-b="armory"]   { --acc: var(--sky-3); }
#sec-brands .brand[data-b="air"]      { --acc: var(--sky-2); }
#sec-brands .brand[data-b="hiss"]     { --acc: var(--orange); }
#sec-brands .brand[data-b="sniffr"]   { --acc: var(--pink); }
#sec-brands .brand[data-b="napwell"]  { --acc: var(--violet); }
#sec-brands .brand[data-b="wnn"]      { --acc: var(--sky-4); }
#sec-brands .brand[data-b="purrsche"] { --acc: var(--sky-1); }
#sec-brands .brand[data-b="swole"]    { --acc: var(--sky-3); }
#sec-brands .brand[data-b="litter"]   { --acc: var(--down); }
#sec-brands .brand[data-b="guard"]    { --acc: var(--sky-4); }
#sec-brands .brand[data-b="tabby"]    { --acc: var(--sky-5); }
#sec-brands .brand[data-b="fatcat"]   { --acc: var(--up); }

/* ---------- type inside tiles ---------- */

#sec-brands .b-name {
  font-family: var(--f-display), sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: .04em;
  line-height: 1.08;
  color: var(--bone);
  margin: 0 0 .35rem;
}

#sec-brands .b-foot {
  position: relative;
  margin-top: auto;
  min-height: 4.2em;
}

#sec-brands .b-cat,
#sec-brands .b-tag {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

#sec-brands .b-cat {
  font-family: var(--f-mono), monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--faint);
}

#sec-brands .b-cat::before {
  content: "// ";
  color: color-mix(in srgb, var(--acc) 70%, transparent);
}

#sec-brands .b-tag {
  font-family: var(--f-body), sans-serif;
  font-size: .82rem;
  line-height: 1.45;
  letter-spacing: .015em;
  color: var(--dim);
  opacity: 0;
  transform: translateY(8px);
}

#sec-brands .brand:hover .b-cat,
#sec-brands .brand:focus-visible .b-cat {
  opacity: 0;
  transform: translateY(-8px);
}

#sec-brands .brand:hover .b-tag,
#sec-brands .brand:focus-visible .b-tag {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- CSS-drawn logo marks ---------- */

#sec-brands .mark {
  position: relative;
  display: block;
  width: clamp(40px, 4vw, 48px);
  height: clamp(40px, 4vw, 48px);
  margin-bottom: clamp(14px, 1.8vw, 20px);
  transition: transform .45s var(--ease), filter .45s var(--ease);
}

#sec-brands .brand:hover .mark,
#sec-brands .brand:focus-visible .mark {
  transform: translateY(-3px) scale(1.07);
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--acc) 45%, transparent));
}

/* WHISKER KING — crown */
#sec-brands .m-king {
  background: linear-gradient(180deg, var(--sky-5), var(--sky-3));
  clip-path: polygon(0 96%, 0 28%, 26% 54%, 50% 12%, 74% 54%, 100% 28%, 100% 96%);
}

/* FURST FELINE BANK — pediment + columns */
#sec-brands .m-bank::before {
  content: "";
  position: absolute;
  left: 2%; right: 2%; top: 4%;
  height: 26%;
  background: var(--sky-5);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
#sec-brands .m-bank::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 38%; bottom: 4%;
  background: linear-gradient(90deg,
    var(--bone) 0 16%, transparent 16% 42%,
    var(--bone) 42% 58%, transparent 58% 84%,
    var(--bone) 84% 100%);
  opacity: .85;
}

/* NINE LIVES ARMORY — crosshair */
#sec-brands .m-armory {
  border: 3px solid var(--sky-3);
  border-radius: 50%;
}
#sec-brands .m-armory::before,
#sec-brands .m-armory::after {
  content: "";
  position: absolute;
  background: var(--sky-3);
}
#sec-brands .m-armory::before {
  left: 50%; top: -14%; bottom: -14%;
  width: 3px;
  transform: translateX(-50%);
}
#sec-brands .m-armory::after {
  top: 50%; left: -14%; right: -14%;
  height: 3px;
  transform: translateY(-50%);
}

/* AIR FELINIDA — paper dart */
#sec-brands .m-air {
  background: linear-gradient(135deg, var(--bone), var(--sky-4));
  clip-path: polygon(0 55%, 100% 0, 62% 100%, 46% 62%);
  transform: rotate(-8deg);
}

/* HISS! — bolt */
#sec-brands .m-hiss {
  background: linear-gradient(180deg, var(--sky-5), var(--orange));
  clip-path: polygon(58% 0, 16% 56%, 44% 56%, 36% 100%, 84% 38%, 54% 38%);
}

/* SNIFFR — pixel heart */
#sec-brands .m-sniffr {
  background: linear-gradient(180deg, var(--pink), var(--sky-2));
  clip-path: polygon(50% 100%, 14% 62%, 0 36%, 0 14%, 14% 0, 36% 0, 50% 16%,
                     64% 0, 86% 0, 100% 14%, 100% 36%, 86% 62%);
}

/* NAPWELL — capsule */
#sec-brands .m-napwell::before {
  content: "";
  position: absolute;
  inset: 32% 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet) 0 50%, var(--bone) 50% 100%);
  transform: rotate(-24deg);
  box-shadow: 0 0 0 1px rgba(10, 10, 18, .5) inset;
}

/* WNN — broadcast dot + arcs */
#sec-brands .m-wnn {
  background: radial-gradient(circle at 50% 70%, var(--sky-4) 0 12%, transparent 13%);
}
#sec-brands .m-wnn::before,
#sec-brands .m-wnn::after {
  content: "";
  position: absolute;
  border: 3px solid transparent;
  border-top-color: var(--sky-2);
  border-radius: 50%;
}
#sec-brands .m-wnn::before { inset: 26% 26% 6%; }
#sec-brands .m-wnn::after  { inset: 6% 6% -14%; border-top-color: var(--sky-4); }

/* PURRSCHE — shield + chevron */
#sec-brands .m-purrsche {
  background: linear-gradient(180deg, var(--sky-1), var(--asphalt-2));
  clip-path: polygon(50% 0, 100% 12%, 100% 56%, 50% 100%, 0 56%, 0 12%);
}
#sec-brands .m-purrsche::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: 26%; bottom: 34%;
  background: var(--sky-4);
  clip-path: polygon(0 0, 50% 44%, 100% 0, 100% 34%, 50% 78%, 0 34%);
}

/* SWOLE CAT — dumbbell (plates on the element, bar on ::before) */
#sec-brands .m-swole {
  background: linear-gradient(90deg,
    var(--sky-3) 0 18%, transparent 18% 82%, var(--sky-3) 82% 100%);
  background-size: 100% 58%;
  background-position: center;
  background-repeat: no-repeat;
}
#sec-brands .m-swole::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: 46%;
  height: 9%;
  background: var(--bone);
  border-radius: 2px;
}

/* LITTERBOX CAPITAL — descending bar chart */
#sec-brands .m-litter {
  background:
    linear-gradient(var(--sky-4), var(--sky-4)) left   bottom / 24% 86% no-repeat,
    linear-gradient(var(--sky-2), var(--sky-2)) center bottom / 24% 56% no-repeat,
    linear-gradient(var(--down),  var(--down))  right  bottom / 24% 28% no-repeat;
}

/* GUARD DOG — keyhole badge */
#sec-brands .m-guard {
  border: 3px solid var(--sky-4);
  border-radius: 50% 50% 42% 42%;
}
#sec-brands .m-guard::before {
  content: "";
  position: absolute;
  left: 50%; top: 22%;
  width: 26%; height: 26%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--sky-4);
}
#sec-brands .m-guard::after {
  content: "";
  position: absolute;
  left: 50%; top: 42%; bottom: 16%;
  width: 30%;
  transform: translateX(-50%);
  background: var(--sky-4);
  clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
}

/* TABBY CAB CO. — checker plate */
#sec-brands .m-tabby {
  background: repeating-conic-gradient(var(--sky-5) 0 25%, var(--ink) 0 50%) 0 0 / 50% 50%;
  border: 1px solid rgba(246, 241, 228, .25);
  border-radius: 6px;
}

/* FAT CAT MUTUAL — umbrella */
#sec-brands .m-fatcat::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%; top: 10%; bottom: 46%;
  background: linear-gradient(90deg,
    var(--sky-2) 0 33%, var(--sky-4) 33% 66%, var(--sky-2) 66% 100%);
  border-radius: 999px 999px 0 0;
}
#sec-brands .m-fatcat::after {
  content: "";
  position: absolute;
  left: 50%; top: 52%; bottom: 6%;
  width: 3px;
  transform: translateX(-50%);
  background: var(--bone);
  border-radius: 0 0 3px 3px;
}

/* ---------- fine print ---------- */

#sec-brands .brands-fine {
  margin-top: clamp(2rem, 4vw, 3.4rem);
  text-align: center;
  font-family: var(--f-mono), monospace;
  font-size: .66rem;
  letter-spacing: .14em;
  line-height: 1.8;
  color: var(--faint);
  max-width: 72ch;
  margin-inline: auto;
}

/* ---------- static fallback (reduced motion / no GSAP) ---------- */

#sec-brands.is-static .brands-row {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
#sec-brands.is-static .brands-track {
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  transform: none !important;
}
#sec-brands.is-static .brand.is-clone {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #sec-brands .brands-row {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #sec-brands .brands-track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    transform: none !important;
  }
  #sec-brands .brand.is-clone { display: none; }
  #sec-brands .brand,
  #sec-brands .brand::after,
  #sec-brands .mark,
  #sec-brands .b-cat,
  #sec-brands .b-tag {
    transition: none;
  }
}

/* ---------- touch devices: no hover, show the tagline in flow ---------- */

@media (hover: none) {
  #sec-brands .b-foot { min-height: 0; }
  #sec-brands .b-cat,
  #sec-brands .b-tag {
    position: static;
    opacity: 1;
    transform: none;
  }
  #sec-brands .b-tag { margin-top: .5rem; }
}

/* ---------- small screens ---------- */

@media (max-width: 480px) {
  #sec-brands .brand {
    width: min(72vw, 264px);
    min-height: 0;
  }
  #sec-brands .b-name { font-size: 1.02rem; }
}


/* ================================================================
   SECTION: WANTED  (appended by integrator — scoped under #sec-wanted)
   ================================================================ */
/* ============================================================
   WANTED — Felinida P.D. poster generator
   Every selector is scoped under #sec-wanted. Design tokens come
   from css/app.css and are never redefined here.
   NOTE: no text-transform anywhere — display copy is uppercased
   at the source (Turkish-locale İ guard).
   ============================================================ */

#sec-wanted .w-lab{
  display:grid;align-items:start;margin-top:3rem;
  grid-template-columns:minmax(280px,430px) minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3.6rem);
}
@media(max-width:940px){
  #sec-wanted .w-lab{grid-template-columns:1fr}
}

/* ---------- labels / fields ---------------------------------------- */
#sec-wanted .w-label{
  display:block;font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:.26em;color:var(--faint);
}
#sec-wanted .w-field{display:grid;gap:.55rem;margin-top:1.5rem;border:0;padding:0;min-width:0}
#sec-wanted .w-crewset{margin-top:0}

/* ---------- crew picker -------------------------------------------- */
#sec-wanted .w-crew{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin-top:.6rem;
}
#sec-wanted .w-mug{
  position:relative;aspect-ratio:3/4;padding:0;overflow:hidden;cursor:pointer;
  border:1px solid rgba(246,241,228,.14);background:var(--asphalt-2);opacity:.5;
  transition:opacity .35s var(--ease),border-color .35s,transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
#sec-wanted .w-mug img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
}
#sec-wanted .w-mug span{
  position:absolute;inset:auto 0 0;padding:.85rem .15rem .32rem;text-align:center;
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.16em;color:var(--bone);
  background:linear-gradient(180deg,transparent,rgba(10,10,18,.92) 55%);
}
#sec-wanted .w-mug:hover{opacity:.85}
#sec-wanted .w-mug:focus-visible{outline:2px solid var(--pink);outline-offset:2px;opacity:.9}
#sec-wanted .w-mug[aria-pressed="true"]{
  opacity:1;border-color:var(--pink);transform:translateY(-3px);
  box-shadow:0 12px 30px -12px rgba(236,72,153,.55);
}

/* ---------- name input --------------------------------------------- */
#sec-wanted input{
  width:100%;background:rgba(246,241,228,.04);border:1px solid rgba(246,241,228,.2);
  color:var(--bone);font-family:var(--f-mono);font-size:1rem;font-weight:500;
  letter-spacing:.06em;padding:.85rem 1rem;border-radius:0;outline:none;
  transition:border-color .3s,box-shadow .3s;
}
#sec-wanted input::placeholder{color:var(--faint)}
#sec-wanted input:focus{
  border-color:var(--pink);box-shadow:0 0 0 3px rgba(236,72,153,.14);
}

/* ---------- charge box --------------------------------------------- */
#sec-wanted .w-charge{
  display:flex;align-items:center;gap:.8rem;
  border:1px solid rgba(246,241,228,.2);background:rgba(246,241,228,.03);
  padding:.8rem 1rem;
}
#sec-wanted .w-charge p{
  flex:1;font-family:var(--f-mono);font-size:.72rem;line-height:1.55;
  color:var(--sky-4);letter-spacing:.03em;min-width:0;overflow-wrap:anywhere;
}
#sec-wanted .w-dice{
  flex:none;font-family:var(--f-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.18em;color:var(--dim);background:none;cursor:pointer;
  border:1px solid rgba(246,241,228,.25);padding:.55rem .7rem;
  transition:color .3s,border-color .3s,background .3s;
}
#sec-wanted .w-dice:hover{
  color:var(--pink);border-color:var(--pink);background:rgba(236,72,153,.08);
}
#sec-wanted .w-dice:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
#sec-wanted .w-dice:active{transform:translateY(1px)}

/* ---------- actions / notes ---------------------------------------- */
#sec-wanted .w-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.7rem}
#sec-wanted .w-actions .btn{flex:1 1 auto;text-align:center}
#sec-wanted .w-note{
  margin-top:1rem;font-family:var(--f-mono);font-size:.6rem;line-height:1.7;
  letter-spacing:.06em;color:var(--faint);max-width:44ch;
}
#sec-wanted .w-status{
  margin-top:.6rem;min-height:1.2em;font-family:var(--f-mono);font-size:.64rem;
  letter-spacing:.1em;color:var(--up);
}

/* ---------- poster stage ------------------------------------------- */
#sec-wanted .w-stage{
  position:sticky;top:5.5rem;margin:0;min-width:0;
}
@media(max-width:940px){
  #sec-wanted .w-stage{position:static}
}
#sec-wanted canvas{
  width:100%;height:auto;display:block;background:var(--ink);
  border:1px solid rgba(246,241,228,.16);
  box-shadow:0 34px 80px -34px rgba(191,52,117,.45);
}
#sec-wanted .w-cap{
  margin-top:.7rem;font-family:var(--f-mono);font-size:.58rem;
  letter-spacing:.22em;color:var(--faint);
}

/* stamp-press feedback when the poster re-renders from a user action */
@keyframes wanted-stamp{
  0%{transform:scale(.986) rotate(-.35deg)}
  60%{transform:scale(1.006)}
  100%{transform:none}
}
#sec-wanted .w-stage.stamp canvas{animation:wanted-stamp .32s var(--ease)}

@media (prefers-reduced-motion: reduce){
  #sec-wanted *{animation:none!important;transition:none!important}
  #sec-wanted .w-mug[aria-pressed="true"]{transform:none}
}


/* ================================================================
   SECTION: HEIST  (appended by integrator — scoped under #sec-heist)
   ================================================================ */
/* ============================================================
   HEIST PROGRESS — "THE VAULT JOB"
   Blueprint / vault-door aesthetic around the live bonding curve.
   Every selector is scoped under #sec-heist. No text-transform
   anywhere in this file (Turkish-locale i→İ rule); all display
   copy is pre-uppercased in the markup.
   ============================================================ */

#sec-heist {
  position: relative;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(80, 54, 111, .16), transparent 70%),
    var(--ink);
}

/* ---------- the blueprint board ---------------------------------- */
#sec-heist .hs-board {
  position: relative;
  margin-top: 3rem;
  padding: clamp(1.1rem, 3vw, 2.4rem);
  border: 1px solid rgba(255, 206, 97, .22);
  background:
    /* drafting grid: coarse + fine, faint bone on deep indigo */
    repeating-linear-gradient(0deg,   rgba(246, 241, 228, .045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg,  rgba(246, 241, 228, .045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,   rgba(246, 241, 228, .018) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg,  rgba(246, 241, 228, .018) 0 1px, transparent 1px 14px),
    linear-gradient(160deg, rgba(31, 33, 77, .5), rgba(18, 16, 31, .94) 62%);
  overflow: hidden;
}

/* drafting-table corner brackets, gold like the survey marks */
#sec-heist .hs-corner {
  position: absolute; width: 20px; height: 20px;
  border: 2px solid var(--sky-4); opacity: .7; pointer-events: none;
}
#sec-heist .hs-corner.tl { top: 8px;    left: 8px;   border-right: 0; border-bottom: 0; }
#sec-heist .hs-corner.tr { top: 8px;    right: 8px;  border-left: 0;  border-bottom: 0; }
#sec-heist .hs-corner.bl { bottom: 8px; left: 8px;   border-right: 0; border-top: 0; }
#sec-heist .hs-corner.br { bottom: 8px; right: 8px;  border-left: 0;  border-top: 0; }

#sec-heist .hs-board-head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .22em;
  color: var(--faint); padding-bottom: 1.1rem; margin-bottom: 1.6rem;
  border-bottom: 1px dashed rgba(246, 241, 228, .16);
}

/* ---------- live block: dial + readout + facts -------------------- */
#sec-heist .hs-live {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(1.2rem, 3.5vw, 3rem);
  margin-bottom: clamp(2rem, 5vw, 3.4rem);
}

/* vault dial */
#sec-heist .hs-dial { width: clamp(96px, 12vw, 138px); flex: none; }
#sec-heist .hs-dial svg { width: 100%; height: auto; overflow: visible; }
#sec-heist .hs-dial-ring {
  fill: none; stroke: rgba(246, 241, 228, .18); stroke-width: 2;
  stroke-dasharray: 3 5;
}
#sec-heist .hs-dial-arc {
  fill: none; stroke: var(--sky-4); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transform: rotate(-90deg); transform-origin: 60px 60px;
  filter: drop-shadow(0 0 5px rgba(255, 206, 97, .55));
  transition: stroke-dasharray .5s var(--ease);
}
#sec-heist .hs-dial-tick { stroke: rgba(246, 241, 228, .3); stroke-width: 1.5; }
#sec-heist .hs-needle-g { transform-origin: 60px 60px; transition: transform .5s var(--ease); }
#sec-heist .hs-needle {
  stroke: var(--pink); stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(236, 72, 153, .7));
}
#sec-heist .hs-dial-hub { fill: var(--bone); }

/* the big number */
#sec-heist .hs-readout { display: grid; gap: .35rem; min-width: 0; }
#sec-heist .hs-ro-label {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .3em;
  color: var(--faint);
}
#sec-heist .hs-ro-num {
  display: flex; align-items: baseline; gap: .3rem; line-height: 1;
}
#sec-heist .hs-ro-num b {
  font-family: var(--f-mono); font-weight: 700;
  font-size: clamp(3rem, 2rem + 6.5vw, 6.6rem);
  color: var(--sky-4); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 42px rgba(255, 206, 97, .3);
}
#sec-heist .hs-ro-num em {
  font-family: var(--f-mono); font-style: normal; font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 1.6vw, 2rem); color: var(--sky-3);
}
#sec-heist .hs-ro-sub {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em;
  color: var(--dim);
}
#sec-heist .hs-ro-sub strong { color: var(--pink); font-weight: 700; }

/* the honest side-facts */
#sec-heist .hs-facts {
  display: grid; gap: .85rem; margin: 0;
  border-left: 1px dashed rgba(246, 241, 228, .16);
  padding-left: clamp(1rem, 2.5vw, 2rem);
}
#sec-heist .hs-facts dt {
  font-size: .56rem; letter-spacing: .24em; color: var(--faint);
  font-family: var(--f-mono);
}
#sec-heist .hs-facts dd {
  margin: .15rem 0 0; font-family: var(--f-mono); font-weight: 700;
  font-size: 1.02rem; font-variant-numeric: tabular-nums; color: var(--bone);
}
#sec-heist .hs-facts dd[data-unavailable="1"] { color: var(--faint); }

/* ---------- track: ticks, fill, drill tip ------------------------- */
#sec-heist .hs-trackwrap { position: relative; }

#sec-heist .hs-ticks {
  display: flex; justify-content: space-between;
  align-items: flex-end; height: 16px; margin-bottom: 7px;
}
#sec-heist .hs-ticks i {
  width: 1px; height: 8px; background: rgba(246, 241, 228, .22);
  transition: background .4s, box-shadow .4s;
}
#sec-heist .hs-ticks i.major { height: 16px; background: rgba(246, 241, 228, .34); }
#sec-heist .hs-ticks i.lit {
  background: var(--sky-4); box-shadow: 0 0 6px rgba(255, 206, 97, .6);
}

#sec-heist .hs-track {
  position: relative; height: 12px;
  background: rgba(246, 241, 228, .08);
  border: 1px solid rgba(246, 241, 228, .14);
  overflow: visible;
}
#sec-heist .hs-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; display: block;
  background: linear-gradient(90deg, var(--sky-2), var(--sky-3) 55%, var(--sky-4));
  box-shadow: 0 0 18px rgba(238, 108, 69, .45);
}
/* the drill head riding the leading edge */
#sec-heist .hs-tip {
  position: absolute; top: 50%; left: 0; width: 7px; height: 26px;
  transform: translate(-50%, -50%); display: block;
  background: var(--sky-5); opacity: 0;
  box-shadow: 0 0 12px rgba(255, 229, 138, .9), 0 0 34px rgba(255, 206, 97, .5);
  transition: opacity .4s;
}
#sec-heist.hs-on .hs-tip { opacity: 1; }

/* ---------- milestones -------------------------------------------- */
#sec-heist .hs-miles {
  position: relative; list-style: none; margin: 14px 0 0; padding: 0;
  height: 4.6rem;
}
#sec-heist .hs-mile {
  position: absolute; top: 0; left: var(--at);
  transform: translateX(-50%); text-align: center;
  width: max-content; max-width: 11rem;
  transition: opacity .4s;
}
#sec-heist .hs-mile.last { transform: translateX(-92%); text-align: right; }
#sec-heist .hs-mile b {
  display: block; font-family: var(--f-display); font-size: .92rem;
  letter-spacing: .05em; color: var(--faint); transition: color .4s, text-shadow .4s;
}
#sec-heist .hs-mile span {
  display: block; margin-top: .3rem; font-family: var(--f-mono);
  font-size: .56rem; letter-spacing: .14em; color: var(--faint); opacity: .75;
}
/* connector from label up to the bar */
#sec-heist .hs-mile::before {
  content: ""; position: absolute; left: 50%; top: -14px; height: 12px; width: 1px;
  background: rgba(246, 241, 228, .2);
}
#sec-heist .hs-mile.last::before { left: auto; right: 4%; }
/* node diamond sitting on the bar line */
#sec-heist .hs-node {
  position: absolute; left: 50%; top: -25px; width: 9px; height: 9px;
  margin-left: -4.5px; transform: rotate(45deg);
  background: var(--ink); border: 1.5px solid rgba(246, 241, 228, .35);
  transition: background .4s, border-color .4s, box-shadow .4s;
}
#sec-heist .hs-mile.last .hs-node { left: auto; right: calc(4% - 4.5px); margin-left: 0; }

/* milestone states — set from JS */
#sec-heist .hs-mile.done b { color: var(--dim); }
#sec-heist .hs-mile.done .hs-node {
  background: var(--pink); border-color: var(--pink);
  box-shadow: 0 0 8px rgba(236, 72, 153, .6);
}
#sec-heist .hs-mile.active b {
  color: var(--sky-4); text-shadow: 0 0 22px rgba(255, 206, 97, .45);
}
#sec-heist .hs-mile.active span { color: var(--dim); opacity: 1; }
#sec-heist .hs-mile.active .hs-node {
  background: var(--sky-4); border-color: var(--sky-5);
  box-shadow: 0 0 10px rgba(255, 206, 97, .8);
}
@media (prefers-reduced-motion: no-preference) {
  #sec-heist .hs-mile.active .hs-node { animation: hs-node-pulse 2.2s infinite; }
  @keyframes hs-node-pulse {
    0%, 100% { box-shadow: 0 0 6px  rgba(255, 206, 97, .55); }
    50%      { box-shadow: 0 0 16px rgba(255, 206, 97, .95); }
  }
}

/* ---------- awaiting-data (honest) state -------------------------- */
#sec-heist .hs-await {
  display: none; margin-top: 1.6rem; padding: 1.1rem 1.2rem;
  border: 1px dashed rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .05);
}
#sec-heist .hs-await b {
  display: block; font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .3em; color: var(--down); margin-bottom: .5rem;
}
#sec-heist .hs-await p {
  font-family: var(--f-mono); font-size: .68rem; line-height: 1.7;
  letter-spacing: .06em; color: var(--dim); margin: 0;
}
#sec-heist.hs-nodata .hs-await { display: block; }
#sec-heist.hs-nodata .hs-fill,
#sec-heist.hs-nodata .hs-tip { display: none; }
#sec-heist.hs-nodata .hs-track {
  background: repeating-linear-gradient(-45deg,
    rgba(246, 241, 228, .07) 0 8px, transparent 8px 16px);
}
#sec-heist.hs-nodata .hs-mile { opacity: .45; }
#sec-heist.hs-nodata .hs-ro-num b { color: var(--faint); text-shadow: none; }

/* ---------- source line ------------------------------------------- */
#sec-heist .hs-source {
  margin: 1.8rem 0 0; font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .2em; color: var(--faint);
}

/* ---------- responsive -------------------------------------------- */
@media (max-width: 900px) {
  #sec-heist .hs-live { grid-template-columns: auto 1fr; }
  #sec-heist .hs-facts {
    grid-column: 1 / -1; grid-template-columns: repeat(3, auto);
    justify-content: start; column-gap: 2.2rem;
    border-left: 0; padding-left: 0; padding-top: 1rem;
    border-top: 1px dashed rgba(246, 241, 228, .16);
  }
}
@media (max-width: 760px) {
  /* milestones drop out of the absolute rail into a 2-col ledger */
  #sec-heist .hs-miles {
    position: static; height: auto; margin-top: 1.4rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem;
  }
  #sec-heist .hs-mile,
  #sec-heist .hs-mile.last {
    position: static; transform: none; text-align: left;
    width: auto; max-width: none;
    padding-left: .85rem; border-left: 2px solid rgba(246, 241, 228, .18);
  }
  #sec-heist .hs-mile::before { display: none; }
  #sec-heist .hs-node,
  #sec-heist .hs-mile.last .hs-node { display: none; }
  #sec-heist .hs-mile.active,
  #sec-heist .hs-mile.done { border-left-color: var(--pink); }
  #sec-heist .hs-mile.active { border-left-color: var(--sky-4); }
}
@media (max-width: 560px) {
  #sec-heist .hs-dial { display: none; }
  #sec-heist .hs-live { grid-template-columns: 1fr; }
  #sec-heist .hs-facts {
    grid-template-columns: 1fr 1fr; row-gap: .9rem;
  }
  #sec-heist .hs-board-head span:last-child { display: none; }
}

/* ---------- reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #sec-heist .hs-dial-arc,
  #sec-heist .hs-needle-g,
  #sec-heist .hs-fill { transition: none; }
}


/* ================================================================
   SECTION: MANIFESTO  (appended by integrator — scoped under #sec-manifesto)
   ================================================================ */
/* ============================================================
   MANIFESTO + FAQ — scoped: every selector lives under
   #sec-manifesto. No text-transform anywhere (tr-locale safe);
   all display copy is pre-uppercased in the markup.
   ============================================================ */

#sec-manifesto{position:relative;overflow:hidden;background:var(--ink)}

/* one low sunset glow rising from the page's end — the city's last light */
#sec-manifesto .mf-glow{position:absolute;left:50%;bottom:-22%;width:130%;max-width:1600px;
  aspect-ratio:2.6/1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(52% 62% at 50% 100%,
    rgba(191,52,117,.20), rgba(238,108,69,.10) 46%, transparent 72%)}

/* ── manifesto type ─────────────────────────────────────────── */
#sec-manifesto .mf-head{margin-bottom:clamp(1.6rem,4vw,3rem)}

#sec-manifesto .mf-lines{display:grid;gap:clamp(1.1rem,3.2vw,2.4rem)}
#sec-manifesto .mf-line{font-family:var(--f-display);line-height:.95;
  letter-spacing:-.02em;overflow:hidden;margin:0}
#sec-manifesto .mf-li{display:inline-block;will-change:transform}

/* a staircase, not a centred poem — the composition reads as designed */
#sec-manifesto .mf-l1{font-size:clamp(1.9rem,1rem+4.6vw,4.6rem);color:var(--bone)}
#sec-manifesto .mf-l2{font-size:clamp(1.6rem,1rem+3.4vw,3.4rem);color:var(--dim);
  margin-left:clamp(0rem,6vw,5.5rem)}
#sec-manifesto .mf-l3{font-size:clamp(1.35rem,1rem+2.4vw,2.7rem);color:var(--bone);
  max-width:24ch}
#sec-manifesto .mf-l4{font-size:clamp(1.6rem,1rem+3.4vw,3.6rem);color:var(--sky-4);
  margin-left:clamp(0rem,10vw,9rem)}

/* the thesis: the ramp IS the brand, so the ramp carries the line */
#sec-manifesto .mf-thesis{font-size:clamp(2.2rem,1rem+6.4vw,6.6rem);line-height:.92;
  margin-top:clamp(1rem,3vw,2.2rem);max-width:14ch}
#sec-manifesto .mf-thesis .mf-li{padding-bottom:.08em; /* keep descenders inside the clip mask */
  background:linear-gradient(180deg,var(--sky-5) 0%,var(--sky-4) 30%,
    var(--sky-3) 58%,var(--sky-2) 86%,var(--sky-1) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;position:relative}
#sec-manifesto .mf-thesis .mf-li::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:3px;background:linear-gradient(90deg,var(--pink),var(--sky-4));
  transform:scaleX(var(--mf-rule,1));transform-origin:left}

/* ── FAQ layout ─────────────────────────────────────────────── */
#sec-manifesto .mf-faq{display:grid;gap:clamp(1.8rem,4vw,4rem);
  grid-template-columns:minmax(250px,.85fr) 1.6fr;align-items:start;
  margin-top:clamp(4.5rem,4rem+7vw,10rem)}
@media(max-width:880px){#sec-manifesto .mf-faq{grid-template-columns:1fr}}

#sec-manifesto .mf-faq-head{position:sticky;top:6rem}
@media(max-width:880px){#sec-manifesto .mf-faq-head{position:static}}
#sec-manifesto .mf-faq-title{color:var(--bone)}
#sec-manifesto .mf-faq-lede{font-size:.92rem}

/* ── accordion ──────────────────────────────────────────────── */
#sec-manifesto .mf-acc{border-top:1px solid rgba(246,241,228,.14)}
#sec-manifesto .mf-item{border-bottom:1px solid rgba(246,241,228,.14);
  transition:border-color .4s var(--ease)}
#sec-manifesto .mf-item.open{border-bottom-color:rgba(236,72,153,.45)}

#sec-manifesto .mf-q{margin:0}
#sec-manifesto .mf-qbtn{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.8rem,2.5vw,1.6rem);width:100%;padding:clamp(1.05rem,2.5vw,1.5rem) .2rem;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--bone);
  transition:padding-left .35s var(--ease)}
#sec-manifesto .mf-qbtn:hover,
#sec-manifesto .mf-qbtn:focus-visible{padding-left:.7rem}
#sec-manifesto .mf-qbtn:focus-visible{outline:1px solid var(--pink);outline-offset:4px}

#sec-manifesto .mf-qno{font-family:var(--f-mono);font-size:.7rem;font-weight:700;
  color:var(--faint);letter-spacing:.1em;transition:color .35s}
#sec-manifesto .mf-item.open .mf-qno,
#sec-manifesto .mf-qbtn:hover .mf-qno{color:var(--pink)}

#sec-manifesto .mf-qtxt{font-family:var(--f-display);font-size:clamp(1.02rem,1rem+.9vw,1.55rem);
  line-height:1.08;letter-spacing:.01em}

/* plus → x, drawn not iconed */
#sec-manifesto .mf-qicon{position:relative;width:16px;height:16px;flex:none;
  transition:transform .45s var(--ease)}
#sec-manifesto .mf-qicon::before,
#sec-manifesto .mf-qicon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;
  background:var(--sky-4);transition:background .35s}
#sec-manifesto .mf-qicon::after{transform:rotate(90deg)}
#sec-manifesto .mf-item.open .mf-qicon{transform:rotate(135deg)}
#sec-manifesto .mf-item.open .mf-qicon::before,
#sec-manifesto .mf-item.open .mf-qicon::after{background:var(--pink)}

/* the 0fr→1fr grid reveal — animates layout without max-height guessing */
#sec-manifesto .mf-a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease)}
#sec-manifesto .mf-item.open .mf-a{grid-template-rows:1fr}
#sec-manifesto .mf-a-in{overflow:hidden;min-height:0}
#sec-manifesto .mf-a-in p{padding:0 .2rem clamp(1.2rem,2.5vw,1.6rem);
  color:var(--dim);font-size:.94rem;line-height:1.7;max-width:62ch;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease) .12s,transform .45s var(--ease) .12s}
#sec-manifesto .mf-item.open .mf-a-in p{opacity:1;transform:none}
#sec-manifesto .mf-a-in p + p{margin-top:-.4rem}

#sec-manifesto .mf-ca code{display:block;font-family:var(--f-mono);font-size:.68rem;
  color:var(--sky-4);border:1px solid rgba(246,241,228,.16);
  background:rgba(246,241,228,.03);padding:.7rem .8rem;overflow-wrap:anywhere}

/* ── fine print ─────────────────────────────────────────────── */
#sec-manifesto .mf-fineprint{margin-top:clamp(3rem,3rem+3vw,5.5rem);
  font-size:.6rem;letter-spacing:.18em;line-height:2;color:var(--faint);
  font-family:var(--f-mono);max-width:70ch}

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  #sec-manifesto .mf-a,
  #sec-manifesto .mf-a-in p,
  #sec-manifesto .mf-qicon,
  #sec-manifesto .mf-qbtn{transition-duration:.01ms}
  #sec-manifesto .mf-li{transform:none!important;opacity:1!important}
}

/* NOTE: an earlier "overflow guard" here was removed. It matched .b-tag by
   wildcard and forced display:-webkit-box, which overrode the section's
   absolute positioning and collapsed the element to a one-word-per-line
   column. The section's own hover cross-fade was correct all along —
   the guard was the bug. Left as a comment so nobody re-adds it. */

/* ---------- motion layer styling ------------------------------------ */
.title-rule{display:block;height:2px;width:min(240px,40vw);margin-top:.9rem;
  background:linear-gradient(90deg,var(--pink),var(--sky-4));transform:scaleX(0)}
.scroll-rail{position:fixed;top:0;right:0;width:2px;height:100vh;z-index:175;
  background:rgba(246,241,228,.08);pointer-events:none}
.scroll-rail i{display:block;width:100%;height:100%;transform:scaleY(0);
  background:linear-gradient(180deg,var(--pink),var(--sky-3),var(--sky-4))}
/* the page warms as you descend — one property, driven by scroll */
:root{--dusk:0}
.pad,.pad-sm{background:
  linear-gradient(180deg,transparent,rgba(191,52,117,calc(var(--dusk)*.05)))}
@media (prefers-reduced-motion:reduce){.scroll-rail,.title-rule{display:none}}







/* ==== POLISH LAYER (generated) ==== */

/* ---- polish: logo ---- */
/* ============================================================
   THE LOGO, EVERYWHERE
   The official CTA6 mark, upscaled to 4K and cut out to transparency,
   is now the anchor of the brand across the site instead of a 34px
   thumbnail in the corner. Transparency is what makes this possible:
   the mark can sit on the sunset, on ink, or on the loader without a
   plate around it.
   ============================================================ */

/* ---------- loader: the mark IS the loading screen ---------------- */
#loader .load-box { gap: 1.4rem; }

#loader .brandmark {
  /* INTEGRATOR: was min(58vw,340px). The banded sun below it is the real
     progress readout (main.js lights 24 bands from the asset manifest), so
     the mark leads the boot screen without swallowing it. */
  width: min(38vw, 190px);
  filter: drop-shadow(0 18px 46px rgba(191, 52, 117, .45));
  /* a slow breath, so the boot screen is alive without being busy */
  animation: mark-breath 3.6s var(--ease) infinite;
}

@keyframes mark-breath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.018); }
}

/* INTEGRATOR — DROPPED: this file originally pulled .load-sun out of flow
   (position:absolute; opacity:.34; blur(2px); z-index:-1) to sit behind the
   mark as a halo. That sun IS the progress bar — #loadBands lives inside it
   — so blurring it to 34% hid the only honest loading signal, and the
   zero-height .ld-sunwrap that polish/loader.js wraps around it also killed
   the .ld-glow halo. The mark now stacks above the sun in normal flow.
   polish/loader.css owns the boot screen's layout from here. */

#loader .load-box { position: relative; }

/* hand-off: the mark lifts and fades as the page takes over */
body.ready #loader .brandmark {
  transform: translateY(-26px) scale(1.06);
  opacity: 0;
  transition: transform .62s var(--ease), opacity .5s ease;
}

/* ---------- nav ---------------------------------------------------- */
nav .brand-logo {
  width: 38px;
  height: auto;
  border-radius: 0;                 /* it is a cut-out mark, not a tile */
  filter: drop-shadow(0 2px 10px rgba(236, 72, 153, .35));
  transition: transform .4s var(--ease), filter .4s var(--ease);
}

nav .brand:hover .brand-logo {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 4px 16px rgba(236, 72, 153, .6));
}

/* with a real mark present the wordmark beside it can step back */
nav .brand-txt { opacity: .92; }

@media (max-width: 620px) {
  nav .brand-txt { display: none; }   /* the mark alone carries it */
  nav .brand-logo { width: 42px; }
}

/* ---------- hero: a large watermark behind the wordmark ------------ */
.hero .hero-watermark {
  position: absolute;
  right: -4%;
  top: 12%;
  width: min(46vw, 560px);
  opacity: .13;
  pointer-events: none;
  filter: blur(.5px);
  z-index: 1;
}

@media (max-width: 900px) {
  .hero .hero-watermark { top: 6%; right: -14%; width: 76vw; opacity: .1; }
}

/* ---------- footer: the mark closes the page ----------------------- */
footer .foot-mark-img {
  width: min(30vw, 220px);
  margin-bottom: 1.4rem;
  opacity: .9;
  filter: drop-shadow(0 10px 30px rgba(191, 52, 117, .3));
}

/* ---------- a reusable stamp for section eyebrows ------------------ */
.logo-stamp {
  width: 22px;
  height: auto;
  vertical-align: -5px;
  margin-right: .45rem;
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  #loader .brandmark { animation: none; }
  nav .brand:hover .brand-logo { transform: none; }
}


/* ---- polish: loader ---- */
/* ============================================================
   POLISH / LOADER — boot-sequence choreography + ramp wipe exit
   Scope: everything here is gated on #loader.polished (added by
   polish/loader.js) so the stock loader is untouched if the JS
   never runs. No text-transform anywhere: all copy is written
   uppercase at the source (Turkish-locale i→İ guard).
   ============================================================ */

#loader.polished{overflow:hidden}

/* OVERRIDE of app.css `body.ready #loader{opacity:0;visibility:hidden}`:
   while .ld-hijack is on (non-reduced-motion only, set by JS) the exit is
   choreographed by the wipe below instead of the stock crossfade. The
   :not(.ld-gone) hands control back to the stock rule at the end. */
body.ready #loader.ld-hijack:not(.ld-gone){opacity:1;visibility:visible;transition:none}

/* ---------- boot frame: mono strips top + bottom ------------------- */
.ld-frame,.ld-foot{position:absolute;left:0;right:0;display:flex;
  justify-content:space-between;align-items:baseline;gap:1rem;
  padding:clamp(.9rem,2.5vw,1.5rem) clamp(1rem,4vw,2.4rem);
  font-family:var(--f-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.22em;color:var(--faint);white-space:nowrap}
.ld-frame{top:0}
.ld-foot{bottom:2px}
.ld-frame b,.ld-foot b{font-weight:500;color:var(--dim)}

/* rotating in-world status line */
.ld-log{overflow:hidden;text-overflow:ellipsis}
.ld-log::before{content:"▸ ";color:var(--sky-3)}

/* ---------- bottom hairline: mirrors the REAL percent -------------- */
/* --ld-p is written by JS from the same #loadPct main.js paints — the
   bar can never disagree with the number. transform-only. */
.ld-bar{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(246,241,228,.1)}
.ld-bar i{position:absolute;inset:0;transform-origin:0 50%;
  transform:scaleX(var(--ld-p,0));
  background:linear-gradient(90deg,var(--sky-2),var(--sky-3),var(--sky-4))}

/* ---------- sun: halo + farewell ----------------------------------- */
.ld-sunwrap{position:relative}
.ld-sunwrap .load-sun{position:relative;z-index:1}
.ld-glow{position:absolute;inset:-30%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(238,108,69,.4),rgba(191,52,117,.16) 55%,transparent 72%);
  opacity:.45}

/* percent gets a quiet unit so "047" reads as a percentage, not a code */
#loader.polished .load-num::after{content:"%";font-size:.34em;
  color:var(--faint);margin-left:.18em;vertical-align:.62em;letter-spacing:0}

/* ---------- exit: two-beat sunset-ramp wipe ------------------------ */
/* Beat 1 (.ld-exit): the ramp sweeps up and COVERS the boot screen.
   Beat 2 (.ld-reveal): loader ground goes transparent under cover,
   the ramp keeps travelling up and off, revealing the finished hero. */
.ld-wipe{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:var(--sunset);transform:translateY(102%);will-change:transform}
.ld-wipe::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--sky-4);box-shadow:0 0 22px var(--sky-4);opacity:.9}

#loader.ld-exit .ld-wipe{transform:translateY(0);
  transition:transform .5s cubic-bezier(.7,0,.2,1)}
#loader.ld-reveal{background:transparent;pointer-events:none}
#loader.ld-reveal .ld-wipe{transform:translateY(-102%);
  transition:transform .66s var(--ease)}

/* farewell of the boot content while the ramp rises */
#loader.ld-exit .load-meta,
#loader.ld-exit .ld-frame,
#loader.ld-exit .ld-foot,
#loader.ld-exit .ld-bar{opacity:0;transition:opacity .3s ease}
#loader.ld-exit .ld-sunwrap{transform:scale(1.05);
  transition:transform .5s var(--ease)}

/* ---------- motion (skipped entirely under reduced motion) --------- */
@media (prefers-reduced-motion: no-preference){
  /* boot-in: the loader itself arrives, it doesn't just exist */
  #loader.polished .load-box{animation:ldIn .7s var(--ease) both}
  #loader.polished .ld-frame{animation:ldFade .6s ease .15s both}
  #loader.polished .ld-foot,
  #loader.polished .ld-bar{animation:ldFade .6s ease .3s both}

  /* progress hairline eases between real values */
  .ld-bar i{transition:transform .35s var(--ease)}

  /* bands get a per-band transition (delays staggered from JS) */
  #loader.polished .bands i{transition-duration:.34s;
    transition-timing-function:var(--ease)}

  /* halo breathes */
  .ld-glow{animation:ldBreathe 3.6s ease-in-out infinite alternate}

  /* percent tick + status-line swap (classes retriggered from JS) */
  #loader.polished .load-num.ld-tick{animation:ldTick .22s ease-out}
  .ld-swap{animation:ldSwap .45s var(--ease)}
  #loader.polished .load-tip.ld-swap{animation:ldSwap .5s var(--ease)}
}

@keyframes ldIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes ldFade{from{opacity:0}}
@keyframes ldBreathe{from{opacity:.35}to{opacity:.6}}
@keyframes ldTick{from{transform:scale(1.05)}to{transform:scale(1)}}
@keyframes ldSwap{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}

/* small screens: keep the frame strips inside 360px without wrapping */
@media (max-width:430px){
  .ld-frame,.ld-foot{font-size:.55rem;letter-spacing:.16em}
  .ld-foot > b{display:none} /* status line gets the full width */
}


/* ---- polish: hero ---- */
/* ============================================================
   POLISH / HERO — game-launch entrance, layered depth, wanted
   meter legibility, living scroll cue, cinematic exit handoff.
   Scope contract: every selector lives under .hero.
   No text-transform anywhere (Turkish-locale i→İ guard).
   Animates transform / opacity / filter ONLY.
   Companion module: polish/hero.js → export polishHero()
   ============================================================ */

/* ---------- wanted meter: label + baseline ---------------------------
   Overriding .wanted's default flex alignment from app.css (stretch)
   so the injected "WANTED LEVEL" label sits on the star baseline. */
.hero .wanted{align-items:center}
.hero .hp-wl{
  font-family:var(--f-mono);
  font-size:.56rem;
  letter-spacing:.3em;
  color:var(--faint);
  margin-right:.55rem;
  white-space:nowrap;
  transform:translateY(1px);
}
.hero .wanted b{will-change:transform}

/* ---------- scroll cue: repeating drip + hide once scrolling ---------- */
.hero .scroll-cue{transition:opacity .5s var(--ease)}
.hero.hp-scrolled .scroll-cue{opacity:0}
.hero .scroll-cue i{
  transform-origin:top center;
  animation:hp-drip 2.3s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes hp-drip{
  0%   {transform:scaleY(0);opacity:1}
  62%  {transform:scaleY(1);opacity:1}
  100% {transform:scaleY(1);opacity:0}
}

/* ---------- cinematic exit: letterbox bars ----------------------------
   Fixed-height ink bars scrubbed via scaleY (never height) as the hero
   leaves — the viewport closes like a cutscene ending, landing the eye
   on the police-scanner strip below. Built by hero.js; inert without it. */
.hero .hp-bar{
  position:absolute;left:0;right:0;
  height:clamp(34px,7vh,72px);
  background:var(--ink);
  z-index:7;pointer-events:none;
  transform:scaleY(0);
  will-change:transform;
}
.hero .hp-bar.top{top:0;transform-origin:top center}
.hero .hp-bar.bottom{bottom:0;transform-origin:bottom center}

/* the art plane gets a scrubbed colour grade on exit (filter only).
   Overriding app.css's inset:0 → -18px: static bleed so the pointer
   micro-parallax (±14px) never exposes the sky canvas at the edges. */
.hero .hero-art{inset:-18px;will-change:transform,filter}

/* keep the numeral crisp for its entrance stamp + glow flash */
.hero .wm-vi{will-change:transform,filter}

/* ---------- reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero .scroll-cue i{animation:none}
  .hero .hp-bar{display:none}
  .hero .wanted b,.hero .hero-art,.hero .wm-vi{will-change:auto}
}


/* ---- polish: bg ---- */
/* ============================================================
   POLISH / BG — living backgrounds axis
   Injected markup (created by polish/bg.js):
     <div class="bgfx"><i class="bgfx-cool"><i class="bgfx-warm">
       [<i class="bgfx-sun">] <i class="bgfx-seam"> [<i class="bgfx-leak">]</div>
   System:
   · Two stacked atmosphere planes per section — a COOL (indigo/violet)
     plane and a WARM (magenta/coral) plane. Their opacities cross-fade
     on the existing --dusk scroll variable, so the page's colour
     temperature genuinely warms as you descend. Opacity-only = cheap.
   · GSAP (bg.js) drifts the planes at different rates → parallax depth.
   · A scrub-linked light-leak sweep on a few sections (transform only).
   · A faint banded-sun echo behind the $CTA6 ticker.
   · The global grain gets a stepped film-jitter.
   No text-transform anywhere. Animates transform/opacity only.
   ============================================================ */

/* the decorated sections become their own stacking context so the
   z-index:-1 layer sits above the section's background but under all
   content — this also protects any other axis' negative-z layers */
#world, #crew, #ridesSec, #series, #sec-wanted, #sec-heist, #ticker {
  position: relative;
  isolation: isolate;
}

.bgfx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;          /* leak + sun bleed is clipped here — no page overflow */
  pointer-events: none;
  --bgfx-acc: var(--sky-2);
}

/* per-section accent — one hue family, sampled from the ramp */
#world      .bgfx { --bgfx-acc: var(--violet); }
#crew       .bgfx { --bgfx-acc: var(--pink);   }
#ridesSec   .bgfx { --bgfx-acc: var(--orange); }
#series     .bgfx { --bgfx-acc: var(--violet); }
#sec-wanted .bgfx { --bgfx-acc: var(--pink);   }
#sec-heist  .bgfx { --bgfx-acc: var(--sky-3);  }
#ticker     .bgfx { --bgfx-acc: var(--sky-2);  }

/* ---------- atmosphere planes --------------------------------------
   Oversized (inset:-16%) so the parallax drift never exposes an edge. */
.bgfx-cool,
.bgfx-warm {
  position: absolute;
  inset: -16%;
  transform: translateZ(0);
}

/* early-page air: indigo night still hanging over the city */
.bgfx-cool {
  background:
    radial-gradient(46% 38% at 16% 18%, rgba(80, 54, 111, .17), transparent 70%),
    radial-gradient(52% 44% at 86% 78%, rgba(31, 33, 77, .24), transparent 70%);
  opacity: calc(.9 - var(--dusk) * .55);
}

/* deep-page air: the sunset ramp burning through */
.bgfx-warm {
  background:
    radial-gradient(44% 36% at 82% 12%,
      color-mix(in srgb, var(--bgfx-acc) 14%, transparent), transparent 70%),
    radial-gradient(50% 40% at 10% 88%, rgba(191, 52, 117, .11), transparent 72%);
  opacity: calc(.3 + var(--dusk) * .7);
}

/* ---------- horizon seam -------------------------------------------
   Echoes the seam #sec-brands already draws — one thin sunset line at
   the top of each decorated section gives the page a repeating rhythm.
   It brightens with dusk. */
.bgfx-seam {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--bgfx-acc) 60%, transparent) 30%,
    rgba(255, 206, 97, .55) 50%,
    color-mix(in srgb, var(--bgfx-acc) 60%, transparent) 70%,
    transparent);
  opacity: calc(.16 + var(--dusk) * .24);
}

/* ---------- light-leak sweep ---------------------------------------
   A soft anamorphic flare that crosses the section as you scroll it.
   Parked off-canvas by default; bg.js drives xPercent via ScrollTrigger,
   so with no JS / reduced motion it simply never appears. */
.bgfx-leak {
  position: absolute;
  top: -30%; left: 0;
  width: 34%; height: 160%;
  transform: translateX(-250%);
  will-change: transform;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 229, 138, .05) 35%,
    rgba(236, 72, 153, .065) 55%,
    transparent);
}

/* ---------- banded-sun echo (ticker only) --------------------------
   The preloader's banded sun, ghosted behind the money section. Bands
   are cut into the lower half only — the GTA VI read, not full stripes. */
.bgfx-sun {
  position: absolute;
  right: -6%; top: 4%;
  width: min(52vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%,
    var(--sky-5), var(--sky-4) 40%, var(--sky-3) 68%, var(--sky-2) 100%);
  opacity: calc(.07 + var(--dusk) * .10);
  transform: translateZ(0);
}
.bgfx-sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(180deg,
    transparent 0 18px, var(--ink) 18px 24px);
  -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 62%);
  mask-image: linear-gradient(180deg, transparent 34%, #000 62%);
}

/* ---------- drifting grain -----------------------------------------
   Overrides css/app.css .grain inset (0 → -75%): the film-jitter needs
   runway beyond the viewport, so the fixed layer is oversized and
   stepped-translated. Texture, opacity and blend mode stay app.css's. */
.grain {
  inset: -75%;
  animation: bgfx-grain 1.1s steps(7) infinite;
}
@keyframes bgfx-grain {
  0%, 100% { transform: translate(0, 0); }
  12.5%    { transform: translate(-6%, -9%); }
  25%      { transform: translate(4%, -13%); }
  37.5%    { transform: translate(-9%, 6%); }
  50%      { transform: translate(11%, 9%); }
  62.5%    { transform: translate(-13%, 4%); }
  75%      { transform: translate(9%, -6%); }
  87.5%    { transform: translate(-4%, 13%); }
}

/* ---------- reduced motion -----------------------------------------
   Atmosphere stays (it is static paint); everything that moves stops.
   --dusk never advances without motion-plus, so the cool plane's base
   opacity is tuned to look finished at --dusk:0. */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; inset: 0; }  /* restore app.css geometry */
  .bgfx-leak { display: none; }
  .bgfx-cool, .bgfx-warm, .bgfx-sun { transform: none; }
}


/* ---- polish: texttype ---- */
/* ============================================================
   POLISH / TEXTTYPE — scroll-driven typography layer
   Loads after css/app.css. Every class here is new (tt-*); no
   existing rule is overridden except where a one-line comment
   says so. No text-transform anywhere (Turkish-locale rule) —
   all display copy is pre-uppercased in texttype.js.
   ============================================================ */

/* ---- char + word masks (h2 takeover + hero wordmark) ----------
   .tt-w is the clip window, .tt-c the moving glyph. The tiny
   padding/negative-margin pair keeps descenders (Q, commas)
   visible at rest while the mask still clips during the rise. */
.tt-w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.08em;margin-bottom:-.08em}
.tt-w--open{overflow:visible;padding-bottom:0;margin-bottom:0} /* kicker: chars converge on X, must not clip */
.tt-c{display:inline-block}

/* hero wordmark lines double-mask at the line level so the three
   words rise as a unit behind their own baseline */
.tt-heroline{overflow:hidden}

/* ---- lede line masks ------------------------------------------ */
.tt-lw{display:inline-block} /* transient measuring span only */
.tt-line{display:block;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em} /* room for y/g/p descenders at rest */
.tt-line-in{display:block;will-change:transform}

/* ---- screen-reader bridge for char-split copy ----------------- */
.tt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- kinetic marquee bands ------------------------------------
   Pure display furniture: aria-hidden, pointer-events none,
   x-position driven only by scroll (scrub) — it moves when you do. */
.tt-marquee{position:relative;overflow:hidden;pointer-events:none;
  padding-block:clamp(1.3rem,4vw,2.8rem);
  border-block:1px solid rgba(246,241,228,.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tt-mq-track{display:flex;width:max-content;will-change:transform;
  font-family:var(--f-display);font-size:clamp(2.3rem,6.5vw,5.6rem);
  line-height:1;letter-spacing:.02em;white-space:nowrap}
.tt-mq-unit{flex:0 0 auto;padding-right:.6em;
  color:transparent;-webkit-text-stroke:1px rgba(246,241,228,.34)}
.tt-mq-unit b{font-weight:400;-webkit-text-stroke:0;
  background:linear-gradient(180deg,var(--sky-4) 8%,var(--sky-2) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tt-mq-unit i{font-style:normal;-webkit-text-stroke:0;color:var(--sky-3);opacity:.85}
/* engines without text-stroke get a quiet solid fill instead of invisible text */
@supports not (-webkit-text-stroke:1px red){
  .tt-mq-unit{color:rgba(246,241,228,.2)}
}

/* ---- reduced motion -------------------------------------------
   texttype.js already no-ops entirely under reduced motion (no
   splits, no bands); this is the belt to that suspenders. */
@media (prefers-reduced-motion: reduce){
  .tt-marquee{display:none}
  .tt-c,.tt-line-in{transform:none!important;opacity:1!important}
}


/* ---- polish: transitions ---- */
/* ============================================================
   POLISH · TRANSITIONS — section hand-offs, edge treatments
   Everything here is additive: new .htx-* elements injected by
   polish/transitions.js. No existing rule is overridden.
   Tokens come from css/app.css and are never redefined.
   No text-transform anywhere (Turkish-locale İ guard).
   ============================================================ */

/* ---------- horizon divider -----------------------------------------
   A strip of pure-ink skyline silhouetted against a low sunset glow,
   inserted between chosen section pairs. This is the GTA-VI edge
   language: the city on the horizon, banded light behind it. The
   divider reads as designed even fully static (reduced motion). */
.htx-divider{
  position:relative;height:clamp(88px,12vw,184px);overflow:hidden;
  background:var(--ink);pointer-events:none;
}

/* the low sun — a full-width dusk band rising from the horizon line,
   with a golden hotspot at center. Silhouettes only read as silhouettes
   if there is light behind them; this is that light. */
.htx-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(40% 125% at 50% 102%,
      rgba(255,206,97,.42), rgba(238,108,69,.22) 44%, transparent 72%),
    linear-gradient(0deg,
      rgba(191,52,117,.52), rgba(80,54,111,.22) 52%, transparent 88%);
  opacity:.55; /* GSAP scrubs this up to 1 as the horizon passes */
}

/* silhouette layers — bottom-anchored, oversized so parallax never
   exposes a seam at the clip edge */
.htx-sky{
  position:absolute;left:-2%;right:-2%;bottom:-2px;width:104%;height:130%;
  will-change:transform;
}
.htx-sky.htx-back path,.htx-sky.htx-back rect{fill:#191b3e;opacity:.75}
.htx-sky.htx-front path,.htx-sky.htx-front rect{fill:var(--ink)}

/* the horizon seam itself — same 1px sunset line #sec-brands already
   uses at its top, so the whole page speaks one edge language */
.htx-line{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    transparent, var(--sky-2) 30%, var(--sky-4) 50%, var(--sky-2) 70%, transparent);
  opacity:.5;
}

/* ---------- city letterbox ------------------------------------------
   Two thin ink bars that ease in while the pinned horizontal rail is
   active, framing it like a widescreen interlude, and ease out on
   release. scaleY only; JS animates transform, never height.
   Height is capped at 28px so the rail's own progress bar
   (.pin-prog, bottom:2rem) is never covered. */
.htx-bar{
  position:fixed;left:0;right:0;height:min(5svh,28px);
  background:var(--ink);z-index:160;pointer-events:none;
  transform:scaleY(0);
}
.htx-bar.top{top:0;transform-origin:center top}
.htx-bar.bottom{bottom:0;transform-origin:center bottom}
/* sunset hairline on each bar's inner edge — ties to .htx-line */
.htx-bar::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent, var(--sky-2) 35%, var(--sky-3) 50%, var(--sky-2) 65%, transparent);
  opacity:.4;
}
.htx-bar.top::after{bottom:0}
.htx-bar.bottom::after{top:0}

/* ---------- reduced motion ------------------------------------------
   JS already skips every tween under reduced motion; this is the
   belt-and-braces layer. Dividers stay (they are static edge
   treatments, not motion), the letterbox goes entirely. */
@media (prefers-reduced-motion: reduce){
  .htx-bar{display:none}
  .htx-sky{will-change:auto}
  .htx-glow{opacity:.6} /* static glow at a finished value, not the dim scrub-start */
}


/* ---- polish: nav ---- */
/* ============================================================
   POLISH / NAV — scroll-spy, live chip upgrade, mobile menu
   Scope: #nav and .mnav-* (all markup created by polish/nav.js).
   No text-transform anywhere — display copy is pre-uppercased.
   Animates transform / opacity / color / filter only.
   ============================================================ */

/* ---------- 1. active-section indicator (scroll-spy) ---------------- */
/* Overrides the hover-only underline in css/app.css (.navlinks a::after)
   so the CURRENT section holds the pink rule + full ink permanently. */
#nav .navlinks a.is-live{color:var(--bone)}
#nav .navlinks a.is-live::after{width:100%;background:linear-gradient(90deg,var(--pink),var(--orange))}

/* ---------- 2. live price chip ------------------------------------- */
/* 24h-change pill the JS inserts next to the price. Real data or hidden —
   never a fabricated number. */
#nav .nav-chg{font-style:normal;font-family:var(--f-mono);font-size:.68rem;
  padding:.14rem .42rem;border:1px solid rgba(246,241,228,.16);
  color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
#nav .nav-chg[data-dir="up"]{color:var(--up);border-color:rgba(74,222,128,.35)}
#nav .nav-chg[data-dir="down"]{color:var(--down);border-color:rgba(239,68,68,.35)}

/* price tick flash — color only, decays via transition */
#nav #mPriceNav{transition:color .6s ease}
#nav #mPriceNav.tick-up{color:var(--up);transition:color .05s}
#nav #mPriceNav.tick-down{color:var(--down);transition:color .05s}

/* stale feed: the "live" dot must stop claiming live. Overrides the
   green pulse from css/app.css (.nav-live .dot) when body.stale is set
   by js/main.js — amber, no pulse, honest. */
body.stale #nav .nav-live .dot{background:var(--sky-4);animation:none;
  box-shadow:0 0 0 0 rgba(255,206,97,.4)}

/* ---------- 3. burger (≤960px, where .navlinks dies) ---------------- */
.mnav-burger{display:none;place-content:center;justify-items:center;gap:5px;
  width:42px;height:42px;
  background:none;border:1px solid rgba(246,241,228,.22);cursor:pointer;
  grid-auto-flow:row;padding:0;flex:0 0 auto;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:border-color .3s}
.mnav-burger i{display:block;width:18px;height:2px;background:var(--bone);
  transition:transform .35s var(--ease),opacity .3s}
.mnav-burger:hover{border-color:var(--pink)}
.mnav-burger.on i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.mnav-burger.on i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:960px){.mnav-burger{display:grid}}

/* ---------- 4. mobile menu overlay ---------------------------------- */
.mnav{position:fixed;inset:0;z-index:179;/* just under #nav (180): bar stays on top */}
.mnav[hidden]{display:none}
.mnav-backdrop{position:absolute;inset:0;background:rgba(10,10,18,.92);
  backdrop-filter:blur(18px) saturate(1.2);opacity:0;transition:opacity .4s var(--ease)}
/* one restrained sunset glow at the floor — the brand ramp, not synthwave */
.mnav-backdrop::after{content:"";position:absolute;inset:auto 0 0 0;height:38vh;
  background:linear-gradient(180deg,transparent,rgba(191,52,117,.22) 60%,rgba(238,108,69,.3));
  opacity:.8;pointer-events:none}
.mnav.open .mnav-backdrop{opacity:1}

.mnav-panel{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:calc(4.5rem + env(safe-area-inset-top,0px)) var(--gut) 2rem;
  overflow-y:auto;overscroll-behavior:contain}

.mnav-links{display:grid;gap:.2rem;margin-block:auto}
.mnav-links a{display:flex;align-items:baseline;gap:.9rem;padding:.45rem 0;
  font-family:var(--f-display);font-size:clamp(2rem,8.5vw,3.1rem);line-height:1.04;
  letter-spacing:-.02em;color:var(--dim);
  transition:color .3s,transform .55s var(--ease),opacity .55s var(--ease);
  opacity:0;transform:translateY(22px)}
.mnav-links a i{font-style:normal;font-family:var(--f-mono);font-weight:700;
  font-size:.7rem;letter-spacing:.18em;color:var(--pink);flex:0 0 2ch}
.mnav-links a:active,.mnav-links a.is-live{color:var(--bone)}
.mnav-links a:focus{outline:none}
.mnav-links a:focus-visible{outline:2px solid var(--pink);outline-offset:6px;color:var(--bone)}
.mnav-links a.is-live i{color:var(--sky-4)}
.mnav.open .mnav-links a{opacity:1;transform:none}
/* stagger only when opening; global reduced-motion rule zeroes durations */
.mnav.open .mnav-links a:nth-child(1){transition-delay:.05s}
.mnav.open .mnav-links a:nth-child(2){transition-delay:.1s}
.mnav.open .mnav-links a:nth-child(3){transition-delay:.15s}
.mnav.open .mnav-links a:nth-child(4){transition-delay:.2s}
.mnav.open .mnav-links a:nth-child(5){transition-delay:.25s}
.mnav.open .mnav-links a:nth-child(6){transition-delay:.3s}

/* live row + CTA pinned to the panel foot */
.mnav-foot{display:grid;gap:1.1rem;margin-top:2.5rem;
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease) .3s,transform .55s var(--ease) .3s}
.mnav.open .mnav-foot{opacity:1;transform:none}
.mnav-live{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  padding-top:1.1rem;border-top:1px solid rgba(246,241,228,.14)}
.mnav-live .mnav-plabel{font-size:.64rem;letter-spacing:.24em;color:var(--faint)}
.mnav-live b{font-size:1.05rem;font-weight:700;color:var(--bone)}
.mnav-live em{font-style:normal;font-size:.74rem;color:var(--dim)}
.mnav-live em[data-dir="up"]{color:var(--up)}
.mnav-live em[data-dir="down"]{color:var(--down)}
.mnav-buy{text-align:center;padding-block:.85rem}
.mnav-soc{display:flex;gap:1.4rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.2em}
.mnav-soc a{color:var(--faint);transition:color .3s}
.mnav-soc a:hover,.mnav-soc a:active{color:var(--bone)}

/* menu never renders at desktop widths even if left open mid-resize */
@media(min-width:961px){.mnav{display:none}}

/* scroll lock while the menu is open */
html.mnav-lock{overflow:hidden}
html.mnav-lock body{overflow:hidden}

/* ---------- 5. small-screen bar diet -------------------------------- */
/* At phone widths the bar keeps: brand · BUY · burger. The price + pill
   move into the menu (they still live there, real and updating) so the
   bar can never overflow at 360px. */
@media(max-width:560px){
  #nav #mPriceNav,#nav .nav-chg,#nav .nav-live .dot{display:none}
  #nav .nav-live{gap:.5rem}
}
@media(max-width:390px){
  #nav .brand-txt{font-size:.8rem}
  #nav{gap:.6rem}
}

/* ---------- reduced motion ------------------------------------------ */
/* app.css already zeroes all durations globally; this removes the
   pre-transforms so nothing waits off-screen for a transition that
   effectively never plays. */
@media (prefers-reduced-motion: reduce){
  .mnav-links a,.mnav-foot{opacity:1;transform:none}
  .mnav .mnav-backdrop{opacity:1}
  .mnav:not(.open){display:none}
}


/* ---- polish: micro ---- */
/* ============================================================
   POLISH · MICRO — buttons, links, chips, copy feedback, focus,
   press states. Pairs with polish/micro.js (polishMicro()).

   Contract honoured:
   · no text-transform anywhere (display copy pre-uppercased)
   · transform / opacity / filter animations only
   · tokens come from css/app.css, never redefined
   · reduced-motion handled at the bottom
   ============================================================ */

/* ---------- 1 · FOCUS RING SYSTEM ----------------------------------
   The OS cursor is hidden site-wide (paw cursor), so keyboard focus is
   the ONLY affordance a non-pointer user gets. :where() keeps this at
   (0,1,0) specificity so every section's own focus treatment
   (#sec-map .zone, #sec-brands .brand, #sec-wanted input …) still wins.
   This fills the gaps: .btn, nav links, socials, .links row, copy
   buttons, the cinema play button. */
:where(a, button, input, [tabindex]):focus-visible{
  outline:2px solid var(--pink);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(236,72,153,.14);
  border-radius:2px;
}
/* the big nav wordmark link: offset inward so the ring hugs it */
.brand:focus-visible{outline-offset:6px}

/* ---------- 2 · PRESS STATES — everything clickable compresses -----
   Physicality rule: hover lifts, press compresses, release springs.
   Transform-only. Elements the JS magnetises carry .is-magnetic and
   are pressed via GSAP instead (inline transform would win anyway). */

/* .btn has no transition of its own in app.css — give transform one */
.btn{transition:transform .16s var(--ease)}
.btn:not(.is-magnetic):active{transform:translateY(1px) scale(.98)}

/* overriding .links a from app.css to add transform+fast press to its
   transition list (base rule only transitions border/color/background) */
.links a{transition:border-color .35s,color .35s,background .35s,
  transform .16s var(--ease)}
.links a:active{transform:translateY(1px) scale(.985)}

/* overriding .navlinks a (base transitions color only) for press dim */
.navlinks a{transition:color .3s,opacity .15s ease}
.navlinks a:active{opacity:.55}

/* social squares: hover lifts -3px, press sinks back through neutral */
.soc a:active{transform:translateY(-1px) scale(.93)}
.soc a svg{transition:transform .3s var(--ease)}
.soc a:hover svg{transform:scale(1.12)}

/* hero mini copy button (no transition in base rule) */
.ca-mini button{transition:transform .16s var(--ease),filter .3s}
.ca-mini button:hover{filter:brightness(1.12)}
.ca-mini button:not(.is-magnetic):active{transform:scale(.93)}

/* episode tiles — only the live one is interactive */
.ep.live:active{transform:translateY(-1px) scale(.99)}

/* cinema play button: press tucks the ring under the pointer */
.cinema:active .play i{transform:scale(.96)}

/* map legend rows (base rule transitions background/color only) */
#sec-map .map-legend button{transition:background .3s,color .3s,
  transform .15s var(--ease)}
#sec-map .map-legend button:active{transform:scale(.98)}

/* radio station cards + mute — restating base transitions to add a
   fast transform so the press does not snap */
#sec-radio .rd-st{transition:background .4s var(--ease),
  transform .18s var(--ease)}
#sec-radio .rd-st:active{transform:scale(.99)}
#sec-radio .rd-mute{transition:border-color .35s,color .35s,
  background .35s,transform .16s var(--ease)}
#sec-radio .rd-mute:not(.is-magnetic):active{transform:scale(.96)}

/* wanted crew mugs: keep the selected lift while pressed */
#sec-wanted .w-mug:active{transform:scale(.96)}
#sec-wanted .w-mug[aria-pressed="true"]:active{
  transform:translateY(-3px) scale(.96)}

/* FAQ: the plus icon reacts to the press, closed and open */
#sec-manifesto .mf-qbtn:active .mf-qicon{transform:scale(.78)}
#sec-manifesto .mf-item.open .mf-qbtn:active .mf-qicon{
  transform:rotate(135deg) scale(.78)}

/* ---------- 3 · COPY FEEDBACK --------------------------------------
   main.js toggles .ok on #copyBtn / #copyMini; ride that class with a
   settle pop. The floating chip + copyable CA codes come from micro.js. */
#copyBtn.ok,#copyMini.ok{animation:mc-pop .5s var(--ease)}
@keyframes mc-pop{
  0%{transform:scale(.92)}
  55%{transform:scale(1.035)}
  100%{transform:none}
}

/* every printed contract address is itself a copy control (JS adds
   data-copyable + role/tabindex). Hover warms the plate to gold. */
[data-copyable]{cursor:pointer;
  transition:border-color .3s,color .3s,background .3s,transform .15s var(--ease)}
[data-copyable]:hover{border-color:rgba(255,206,97,.5);color:var(--bone);
  background:rgba(255,206,97,.05)}
[data-copyable]:active{transform:scale(.995)}
/* one-shot flash the instant the copy lands (JS toggles .copied) */
[data-copyable].copied{border-color:var(--up);color:var(--up)}

/* the floating "CA COPIED" chip micro.js spawns at the click point */
.mc-chip{position:fixed;z-index:260;pointer-events:none;
  transform:translate(-50%,6px);opacity:0;
  font-family:var(--f-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.22em;color:#170a12;white-space:nowrap;
  background:linear-gradient(100deg,var(--sky-4),var(--sky-5));
  padding:.42rem .75rem .42rem .85rem;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),
    calc(100% - 6px) 100%,0 100%,0 6px);
  box-shadow:0 8px 26px -8px rgba(255,206,97,.55);
  animation:mc-chip 1.15s var(--ease) forwards}
@keyframes mc-chip{
  0%{opacity:0;transform:translate(-50%,8px) scale(.9)}
  14%{opacity:1;transform:translate(-50%,-6px) scale(1)}
  72%{opacity:1;transform:translate(-50%,-14px)}
  100%{opacity:0;transform:translate(-50%,-24px)}
}

/* screen-reader announcement region (visually hidden, never display:none) */
.mc-sr{position:fixed;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ---------- 4 · PAW CURSOR PRESS -----------------------------------
   The paw squeezes on pointerdown (class toggled by micro.js). The
   base .cursor keeps its inline translate; we scale the ::before art. */
@media (hover:hover){
  .cursor::before{transition:transform .18s var(--ease)}
  body.cta6-press .cursor::before{transform:scale(.78)}
  body.cta6-press .cursor-dot{transform-origin:center;
    /* dot inline transform is translate3d; brighten instead of scale */
    filter:brightness(1.6)}
}

/* ---------- 5 · REDUCED MOTION -------------------------------------
   The global app.css rule already collapses transition/animation
   durations; these make the intent explicit and keep the copy chip
   readable as a static confirmation instead of a dead 0-opacity frame. */
@media (prefers-reduced-motion: reduce){
  .mc-chip{animation:none;opacity:1;transform:translate(-50%,-10px)}
  #copyBtn.ok,#copyMini.ok{animation:none}
  .btn:not(.is-magnetic):active,.links a:active,.soc a:active,
  .ca-mini button:not(.is-magnetic):active,.ep.live:active,
  #sec-map .map-legend button:active,#sec-radio .rd-st:active,
  #sec-radio .rd-mute:not(.is-magnetic):active,
  #sec-wanted .w-mug:active,
  #sec-manifesto .mf-qbtn:active .mf-qicon{transform:none}
  [data-copyable]:active{transform:none}
}


/* ---- polish: cursor ---- */
/* ============================================================
   CTA6 polish — CURSOR axis
   Extends the paw cursor (#cur/#curDot, css/app.css:80-98) with:
   contextual section states, a text-select claw-beam, a drag hint
   on the pinned rail, a click burst, and window-leave grace.
   Loads AFTER css/app.css. Never uses text-transform.
   ============================================================ */

/* new token only — never redefines an existing one */
:root{
  --claw-beam:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 44'%3E%3Crect x='7' y='8' width='4' height='28' rx='2'/%3E%3Crect x='14' y='3' width='4' height='38' rx='2'/%3E%3Crect x='21' y='8' width='4' height='28' rx='2'/%3E%3C/svg%3E");
}

@media (hover:hover){
  /* Overriding cursor:pointer/default from app.css + sections/map.css on
     non-button hotspots (#cinema div, svg .zone, .rd-st, .ep cards, form
     fields) — the OS arrow was double-exposing on top of the paw. */
  #cinema, #sec-map .zone, #sec-radio .rd-st, .ep, .ride,
  [data-hot], [data-hot] *, input, textarea, select, label, code{cursor:none}
}

/* the paw itself gets a transition channel for squash + tint swaps */
.cursor::before{
  transition:transform .18s var(--ease), background .3s var(--ease);
  will-change:transform;
}

/* ---------- press squash (transform on the pseudo, because main.js
     owns the element's inline translate3d) ---------------------------- */
.cursor.down::before{transform:scale(.8)}

/* ---------- contextual section tints -------------------------------- */
.cursor[data-zone="drag"]::before,
.cursor[data-zone="map"]::before{
  background:var(--sky-4);
  filter:drop-shadow(0 0 7px rgba(255,206,97,.55));
}
.cursor[data-zone="radio"]::before{
  background:var(--violet);
  filter:drop-shadow(0 0 7px rgba(139,92,246,.55));
}
.cursor[data-zone="wanted"]::before,
.cursor[data-zone="heist"]::before{
  background:var(--sky-3);
  filter:drop-shadow(0 0 7px rgba(238,108,69,.55));
}

/* ---------- verb tag (PLAY / COPY / ‹ DRAG ›) ----------------------- */
.cursor .cursor-tag{
  position:absolute;left:calc(100% + 9px);top:calc(100% - 6px);
  font-family:var(--f-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.24em;white-space:nowrap;color:var(--bone);
  text-shadow:0 1px 10px rgba(10,10,18,.85);
  opacity:0;transform:translate3d(0,5px,0);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.cursor.tagged .cursor-tag{opacity:1;transform:translate3d(0,0,0)}

/* ---------- text-select state: paw becomes a triple claw beam ------- */
/* wins over .cursor.hot (equal specificity, later file) by design */
.cursor.select{width:24px;height:36px;margin:-18px 0 0 -12px;filter:none}
.cursor.select::before{
  background:var(--bone);
  filter:drop-shadow(0 0 5px rgba(246,241,228,.45));
  -webkit-mask:var(--claw-beam) center/contain no-repeat;
  mask:var(--claw-beam) center/contain no-repeat;
}
.cursor.select + .cursor-dot,
.cursor-dot.select{opacity:0}

/* ---------- click burst: toe beans scatter -------------------------- */
.paw-burst{position:fixed;left:0;top:0;z-index:249;pointer-events:none}
.paw-burst i{
  position:absolute;left:-3px;top:-3px;width:6px;height:6px;
  border-radius:50%;background:var(--sky-4);opacity:0;
  will-change:transform,opacity;
}
.paw-burst i:nth-child(3n){background:var(--pink)}
.paw-burst i:nth-child(3n+1){background:var(--sky-3)}
.paw-burst.go i{animation:pawBurst .55s var(--ease) forwards}
@keyframes pawBurst{
  0%{opacity:.95;transform:translate3d(0,0,0) scale(.4)}
  100%{opacity:0;transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(1.05)}
}

/* ---------- leaving the window: fade, never teleport ---------------- */
.cursor-dot{transition:opacity .25s var(--ease)}
.cursor.gone,.cursor-dot.gone{opacity:0}
.cursor.gone::before{transform:scale(.6)}

/* ---------- reduced motion / touch ---------------------------------- */
@media (prefers-reduced-motion: reduce){
  .paw-burst{display:none}
  .cursor::before,.cursor .cursor-tag{transition:none}
}
@media (hover:none){
  .paw-burst{display:none}
}


/* ---- polish: sound ---- */
/* ============================================================
   POLISH / SOUND — global audio toggle + state styling
   Scope: everything under .sfx-toggle (markup created by
   polish/sound.js). No existing rule is overridden.
   Copy is written pre-uppercased — no text-transform anywhere
   (Turkish-locale i→İ trap).
   ============================================================ */

/* INTEGRATOR: moved from the bottom-LEFT corner to bottom-right. The left
   corner is where polish/cityrail.css parks the pinned rail's HUD
   (.cr-count / .cr-track, left:var(--gut)) — a fixed z:210 pill sat on top
   of the district counter for the whole pinned section. Right of the pill
   there is only motion-plus's 2px .scroll-rail at right:0, which 1rem
   clears. */
.sfx-toggle{
  position:fixed;
  right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index:210; /* above nav(180)/scroll-rail(175), below cursor(250)/loader(300) */
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .9rem .55rem .8rem;
  border:1px solid rgba(246,241,228,.16);
  border-radius:999px;
  background:rgba(10,10,18,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--dim);
  font-family:var(--f-mono);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1;
  cursor:pointer;
  transition:color .35s var(--ease), border-color .35s var(--ease),
             transform .35s var(--ease), opacity .35s var(--ease);
  opacity:0; /* revealed once the preloader lifts (body.ready) */
  transform:translateY(8px);
  pointer-events:none;
}
body.ready .sfx-toggle{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.sfx-toggle:hover{
  color:var(--bone);
  border-color:rgba(255,206,97,.45);
}
.sfx-toggle:focus-visible{
  outline:2px solid var(--sky-4);
  outline-offset:3px;
}
.sfx-toggle.on{
  color:var(--bone);
  border-color:rgba(255,206,97,.35);
}

/* equalizer bars — transform-only animation (rule 7) */
.sfx-bars{
  display:flex;
  gap:2px;
  align-items:flex-end;
  height:10px;
}
.sfx-bars i{
  width:2px;
  height:3px;
  border-radius:1px;
  background:var(--faint);
  transform-origin:bottom center;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.sfx-toggle.on .sfx-bars i{
  background:var(--sky-4);
  animation:sfx-bar 1.1s ease-in-out infinite;
}
.sfx-toggle.on .sfx-bars i:nth-child(2){ animation-delay:.22s }
.sfx-toggle.on .sfx-bars i:nth-child(3){ animation-delay:.47s }

@keyframes sfx-bar{
  0%,100%{ transform:scaleY(1) }
  50%{ transform:scaleY(3.1) }
}

@media (prefers-reduced-motion: reduce){
  .sfx-toggle{
    transition:none;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .sfx-toggle.on .sfx-bars i{
    animation:none;
    transform:scaleY(2.2); /* still reads as "live", just static */
  }
}

/* tighter corner on small phones — never wider than the viewport */
@media (max-width:480px){
  .sfx-toggle{
    right:.7rem;
    bottom:calc(.7rem + env(safe-area-inset-bottom, 0px));
    padding:.5rem .75rem .5rem .65rem;
  }
}

/* INTEGRATOR: the mobile menu overlay from polish/nav.css is z:179; this
   pill is z:210, so it floated over the open menu. nav.js locks the html
   element while the menu is open — ride that flag. */
html.mnav-lock .sfx-toggle{opacity:0;pointer-events:none}


/* ---- polish: crew ---- */
/* ============================================================
   CTA6 polish — CREW axis: character-select treatment.
   Scoped entirely to #crew. Every interactive rule is gated behind
   .cs-live / .is-sel / .cs-* classes that polish/crew.js adds, so a
   JS failure leaves the shipped base design fully intact.
   Load after css/app.css (id-scoped selectors win on specificity
   regardless of order, but keep the order sane).
   No text-transform anywhere — display copy is written uppercase
   at the source. No layout-property animation: transform / opacity /
   filter only.
   ============================================================ */

/* -- hint strip between the title and the roster ---------------------- */
#crew .cs-hint{
  margin-top:1.6rem;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.28em;color:var(--faint)}
#crew .cs-hint::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--pink);box-shadow:0 0 12px rgba(236,72,153,.85);
  animation:cs-pulse 2.4s var(--ease) infinite}
#crew .cs-hint .cs-name{color:var(--sky-4);font-weight:500;letter-spacing:.2em}
@keyframes cs-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

/* overrides base `.crew{margin-top:3rem}` — the hint strip owns that gap now */
#crew .crew.cs-live{margin-top:1.5rem}

/* -- roster cards ----------------------------------------------------- */
#crew .cs-live .card{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}

/* sunset accent bar along the top edge of the selected card.
   base .card only uses ::after (spotlight), so ::before is free here */
#crew .cs-live .card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--sky-2),var(--sky-3),var(--sky-4));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
#crew .cs-live .card.is-sel::before,
#crew .cs-live .card:focus-visible::before{transform:scaleX(1)}

#crew .cs-live .card.is-sel{border-color:rgba(255,206,97,.6)}
#crew .cs-live .card:focus-visible{
  border-color:var(--sky-4);
  box-shadow:0 26px 60px -26px rgba(255,206,97,.5)}

/* unselected roster drops toward pure ink — the pick reads instantly.
   filter only, so it cannot fight motion-plus's card-level scrub. */
#crew .cs-live .card .card-img{
  transition:transform .9s var(--ease),filter .7s var(--ease)}
#crew .cs-live.has-sel .card:not(.is-sel) .card-img{
  filter:saturate(.5) brightness(.62) contrast(1.06)}
#crew .cs-live.has-sel .card:not(.is-sel):hover .card-img,
#crew .cs-live.has-sel .card:not(.is-sel):focus-visible .card-img{
  filter:saturate(.85) brightness(.88)}
/* overrides base `.card:hover .card-img{scale 1.06}` on the selected card
   so the held-in zoom and the hover zoom stay distinct */
#crew .cs-live .card.is-sel .card-img{transform:scale(1.05)}
#crew .cs-live .card.is-sel:hover .card-img{transform:scale(1.08)}

/* the roster number flips to the Limelight "VI" accent face when picked */
#crew .cs-live .card.is-sel .card-no{
  font-family:var(--f-vi);font-weight:400;color:var(--sky-4)}

/* P1 chip, top-left of the selected portrait */
#crew .cs-chip{
  position:absolute;top:.75rem;left:.9rem;z-index:3;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.22em;
  padding:.24rem .5rem;border:1px solid rgba(255,206,97,.55);color:var(--sky-4);
  background:rgba(10,10,18,.55);
  opacity:0;transform:translateY(-4px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
#crew .cs-live .card.is-sel .cs-chip{opacity:1;transform:none}

/* -- quote + dossier typography --------------------------------------- */
#crew .cs-live .card .q{transition:color .4s var(--ease)}
#crew .cs-live .card.is-sel .q{
  font-size:.9rem;line-height:1.4;color:var(--sky-5)}

/* overrides base `.card:hover .d` max-height hover-peek: the dossier is
   now the payoff of SELECTING a character, and we refuse to animate
   max-height (layout). display flips instantly; entrance is opacity+
   transform via keyframes. */
#crew .cs-live .card .d{display:none;max-height:none;overflow:visible;transition:none}
#crew .cs-live .card.is-sel .d{
  display:block;opacity:1;
  animation:cs-in .55s var(--ease) .05s both}

/* -- stat bars (segmented, scaleX fill) ------------------------------- */
#crew .cs-stats{display:none;margin-top:.7rem}
#crew .cs-live .card.is-sel .cs-stats{display:grid;gap:.4rem}
#crew .cs-stat{
  display:grid;grid-template-columns:4.8rem 1fr;align-items:center;gap:.6rem;
  animation:cs-in .5s var(--ease) both}
#crew .cs-live .card.is-sel .cs-stat:nth-child(2){animation-delay:.08s}
#crew .cs-live .card.is-sel .cs-stat:nth-child(3){animation-delay:.16s}
#crew .cs-stat span{
  font-family:var(--f-mono);font-size:.52rem;letter-spacing:.18em;color:var(--faint)}
#crew .cs-stat i{
  position:relative;display:block;height:6px;overflow:hidden;
  background:rgba(246,241,228,.12)}
#crew .cs-stat b{
  position:absolute;inset:0;transform-origin:left;
  transform:scaleX(calc(var(--v,0)/10));
  background:linear-gradient(90deg,var(--sky-2),var(--sky-4))}
#crew .cs-live .card.is-sel .cs-stat b{animation:cs-fill .8s var(--ease) both}
/* segment gaps are painted OVER the fill, so scaleX stays the only
   animated property — ten cells, 2px gutters */
#crew .cs-stat i::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    transparent 0 calc(10% - 2px),var(--ink) calc(10% - 2px),var(--ink) 10%)}

@keyframes cs-in{from{opacity:0;transform:translateY(10px)}}
@keyframes cs-fill{from{transform:scaleX(0)}}

/* -- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #crew .cs-hint::before{animation:none}
  #crew .cs-live .card.is-sel .d,
  #crew .cs-stat,
  #crew .cs-live .card.is-sel .cs-stat b{animation:none}
  #crew .cs-live .card::before,
  #crew .cs-live .card .card-img,
  #crew .cs-chip,
  #crew .cs-live .card .q{transition:none}
}


/* ---- polish: cityrail ---- */
/* ============================================================
   CITYRAIL polish — pinned district rail
   Progress HUD, ghost depth numerals, focus/keyboard affordances,
   touch-drag support. Companion to polish/cityrail.js.
   ============================================================ */

/* overrides css/app.css .pin-prog — the width-animated bar is replaced by
   the transform-driven .cr-nav HUD below (removed from the a11y tree too) */
.city .pin-prog{display:none}

/* lets vertical pans stay native on touch while horizontal drags reach
   the pointer handler in cityrail.js */
.city{touch-action:pan-y}

/* keyboard focus on a district plate — plates are tabbable now */
.city .dist:focus-visible{outline:2px solid var(--sky-4);outline-offset:-3px}
.city .dist:focus-visible .dist-img{opacity:.85}

/* ---- ghost depth numeral (mid parallax layer, between photo and copy) */
.cr-no{
  position:absolute;top:.1rem;right:.45rem;z-index:1;pointer-events:none;
  font-family:var(--f-display);
  font-size:clamp(4.4rem,8vw,7rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(246,241,228,.42);
  opacity:.9;will-change:transform;
}

/* ---- progress HUD: counter · segmented track · district name ---------- */
/* INTEGRATOR: bottom was 1.7rem (~27px). polish/transitions.css draws a
   fixed letterbox bar of min(5svh,28px) across the foot of the viewport
   while this exact section is pinned — it sat directly on top of the HUD.
   Cleared above the bar; 2.9rem keeps a visible gap at every bar height. */
.cr-nav{
  position:absolute;left:var(--gut);right:var(--gut);bottom:2.9rem;z-index:4;
  display:flex;align-items:center;gap:1.1rem;
}
.cr-count{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--faint);white-space:nowrap;
}
.cr-count b{color:var(--bone);font-weight:700}
.cr-track{position:relative;flex:1;height:18px}
.cr-line{
  position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:rgba(246,241,228,.12);
}
.cr-fill{
  position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,var(--pink),var(--sky-4));
  transform:scaleX(0);transform-origin:left center;will-change:transform;
}
.cr-ticks{
  position:absolute;inset:0;
  display:flex;justify-content:space-between;align-items:center;
}
.cr-tick{
  appearance:none;background:none;border:0;padding:0;margin:0;
  width:18px;height:18px;display:grid;place-items:center;cursor:pointer;
}
.cr-tick::before{
  content:"";width:2px;height:9px;background:var(--bone);opacity:.3;
  transition:opacity .3s,transform .35s var(--ease);
}
.cr-tick:hover::before{opacity:.7}
.cr-tick.on::before{background:var(--sky-4);opacity:1;transform:scaleY(1.7)}
.cr-tick:focus-visible{outline:2px solid var(--sky-4);outline-offset:1px}
.cr-name{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;
  color:var(--sky-4);white-space:nowrap;min-width:15ch;text-align:right;
}
@media (max-width:560px){
  .cr-name{display:none}                 /* counter + ticks carry it at 360px */
  .cr-nav{gap:.8rem}
}

@media (prefers-reduced-motion:reduce){
  .cr-tick::before{transition:none}
}


/* ---- polish: ridesep ---- */
/* ============================================================
   RIDESEP polish — GETAWAY VEHICLES + SEASON ONE
   Every selector is gated on .rp-on, a class added by
   polish/ridesep.js after it injects markup. Without the JS this
   file is inert, so it can never style half-built sections.

   Constraints honored: no text-transform anywhere (Turkish-locale
   İ trap), transform/opacity/filter motion only (color/border-color
   transitions match the site's existing pattern and are paint-only),
   reduced-motion fully handled, nothing escapes the 360px viewport.
   ============================================================ */

/* ---------- RIDES: from flat card to dealership spec sheet ---------- */

/* overriding .ride padding from css/app.css — the spec sheet needs
   more vertical room and a tighter bottom edge for the plate row */
.rp-on .ride{padding:1.7rem 1.4rem 1.2rem}

/* ghost catalog numeral — depth layer behind the content */
.rp-on .rp-idx{
  position:absolute;top:.5rem;right:.7rem;z-index:1;
  font-family:var(--f-display);font-size:4.6rem;line-height:1;
  color:rgba(246,241,228,.04);
  -webkit-text-stroke:1px rgba(246,241,228,.13);
  pointer-events:none;user-select:none;
  transition:transform .5s var(--ease),-webkit-text-stroke-color .5s;
}
.rp-on .ride:hover .rp-idx{
  transform:translateY(-5px);
  -webkit-text-stroke-color:rgba(255,206,97,.3);
}

/* headlight sweep — a skewed light bar crossing the card on hover.
   ::after is free (.ride::before is the pink wash in app.css). */
.rp-on .ride::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;
  background:linear-gradient(100deg,transparent,
    rgba(255,229,138,.08) 42%,rgba(255,229,138,.17) 50%,
    rgba(255,229,138,.08) 58%,transparent);
  transform:translateX(-140%) skewX(-14deg);
  z-index:1;pointer-events:none;
  transition:transform .95s var(--ease);
}
.rp-on .ride:hover::after{transform:translateX(330%) skewX(-14deg)}

/* performance readout — segmented gauge bars, banded like the sun */
.rp-on .rp-stats{
  display:grid;grid-template-columns:auto 1fr;gap:.44rem .65rem;
  align-items:center;margin-top:1.1rem;position:relative;z-index:2;
}
.rp-on .rp-k{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.22em;
  color:var(--faint);
}
.rp-on .rp-k-heat{color:rgba(238,108,69,.78)}
.rp-on .rp-track{
  position:relative;height:5px;background:rgba(246,241,228,.09);
  overflow:hidden;
}
.rp-on .rp-fill{
  position:absolute;inset:0;
  transform:scaleX(var(--v,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violet),var(--pink) 55%,var(--sky-4));
  transition:filter .4s;
}
.rp-on .rp-hot{
  background:linear-gradient(90deg,var(--sky-2),var(--sky-3) 60%,var(--down));
}
/* notch overlay carves the fill into segments — echoes the banded sun */
.rp-on .rp-track::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 9px,var(--ink) 9px 11px);
}
.rp-on .ride:hover .rp-fill{filter:brightness(1.3)}

/* registration plate footer — closes the sheet like a stamped document */
.rp-on .rp-plate{
  display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  margin-top:1.15rem;padding-top:.7rem;
  border-top:1px solid rgba(246,241,228,.1);
  position:relative;z-index:2;font-family:var(--f-mono);
}
.rp-on .rp-plate-no{font-size:.57rem;letter-spacing:.2em;color:var(--faint)}
.rp-on .rp-stolen{
  font-size:.55rem;letter-spacing:.26em;
  color:rgba(238,108,69,.8);transition:color .4s;
}
.rp-on .ride:hover .rp-stolen{color:var(--sky-4)}

/* ---------- SERIES: locked-state treatment + airing hero ---------- */

.rp-on .ep{position:relative;overflow:hidden}

/* season ledger — segment meter derived live from the episode DOM */
.rp-on .rp-season{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2.2rem;
}
.rp-on .rp-season-k{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.28em;
  color:var(--faint);
}
.rp-on .rp-season-track{display:flex;gap:4px;flex:1;min-width:140px;height:6px}
.rp-on .rp-season-track i{
  flex:1;background:rgba(246,241,228,.1);transform-origin:50% 100%;
}
.rp-on .rp-season-track i.on{
  background:linear-gradient(90deg,var(--pink),var(--sky-3));
}
.rp-on .rp-season-n{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;color:var(--dim);
}
/* overriding .eps margin-top from css/app.css — the season ledger now
   occupies that gap, so the grid tucks in under it */
.rp-on .eps{margin-top:1.1rem}

/* locked plates: evidence-locker hazard weave + padlock */
.rp-on .ep.lock{
  background:repeating-linear-gradient(-45deg,
    transparent 0 12px,rgba(246,241,228,.028) 12px 22px);
}
.rp-on .ep.lock .no{color:rgba(246,241,228,.24)}
.rp-on .ep.lock .rp-lock{
  position:absolute;top:.85rem;right:.8rem;opacity:.38;
  transition:opacity .4s,transform .4s var(--ease);
}
.rp-on .ep.lock:hover{border-color:rgba(255,206,97,.3)}
.rp-on .ep.lock:hover .rp-lock{opacity:.85;transform:translateY(-2px)}
.rp-on .ep.lock:hover .state{color:rgba(255,206,97,.55)}

/* the one open door: EP 01 becomes the hero plate */
.rp-on .ep.rp-hero{display:flex;flex-direction:column;padding:1.2rem 1.1rem}
@media (min-width:560px){
  .rp-on .ep.rp-hero{grid-column:span 2}
  .rp-on .ep.rp-hero h5{font-size:1.5rem}
}
.rp-on .rp-air{
  margin-top:auto;padding-top:.85rem;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.18em;
  color:var(--dim);
}
.rp-on .rp-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--pink);margin-right:.45rem;vertical-align:1px;
  animation:rp-pulse 1.8s ease-in-out infinite;
}
@keyframes rp-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- reduced motion: everything decorative goes still ------- */
@media (prefers-reduced-motion: reduce){
  .rp-on .ride::after{display:none}
  .rp-on .ride:hover .rp-idx{transform:none}
  .rp-on .ep.lock:hover .rp-lock{transform:none}
  .rp-on .rp-dot{animation:none}
}


/* ---- polish: hud ---- */
/* ============================================================
   POLISH — HUD axis. Loaded after css/app.css.
   Instrumentation pass on the live ticker: digit-roll cells,
   signal lamp, sparkline instrument frame, stale treatment.
   Animates transform/opacity/color/filter only.
   ============================================================ */

/* ---------- instrument chrome on the card ------------------------------ */
.hud{position:relative}
.hud::before,
.hud::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
}
.hud::before{top:-1px;left:-1px;border-top:1px solid var(--sky-4);border-left:1px solid var(--sky-4)}
.hud::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--sky-4);border-right:1px solid var(--sky-4)}

/* ---------- signal lamp ------------------------------------------------ */
.hud-lamp{
  display:inline-flex;align-items:center;gap:.42rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--faint);white-space:nowrap;
}
.hud-lamp i{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--sky-4);box-shadow:0 0 8px var(--sky-4);
  animation:hud-lamp-pulse 1.1s ease-in-out infinite;
}
.hud-lamp[data-state="live"]{color:var(--dim)}
.hud-lamp[data-state="live"] i{
  background:var(--up);box-shadow:0 0 8px var(--up);
  animation-duration:2.6s;
}
.hud-lamp[data-state="stale"] i{
  background:var(--down);box-shadow:0 0 8px var(--down);
  animation:none;opacity:.9;
}
@keyframes hud-lamp-pulse{50%{opacity:.3}}

/* ---------- digit-roll cells ------------------------------------------ */
/* Every character of a live value sits in a fixed 1em clip cell. On change,
   a two-glyph stack slides old→new (transform only). Mono + tabular-nums
   are already on these nodes from app.css, so cell widths never wobble. */
.hr-c{
  display:inline-block;overflow:hidden;height:1em;line-height:1;
  vertical-align:baseline;
}
.hr-v{display:block;height:1em;line-height:1}
.hr-stack{display:block;will-change:transform}
.hr-stack.hr-up{transform:translateY(0)}
.hr-stack.hr-up.go{transform:translateY(-1em);transition:transform .55s var(--ease)}
.hr-stack.hr-down{transform:translateY(-1em)}
.hr-stack.hr-down.go{transform:translateY(0);transition:transform .55s var(--ease)}

/* price direction flash — color only, decays back to inherited */
.hud-price b.hud-flash-up{animation:hud-flash-up .9s var(--ease)}
.hud-price b.hud-flash-down{animation:hud-flash-down .9s var(--ease)}
@keyframes hud-flash-up{0%{color:var(--up)}100%{color:inherit}}
@keyframes hud-flash-down{0%{color:var(--down)}100%{color:inherit}}

/* main.js marks missing data with data-unavailable="1" (em dash shown);
   dim it so a dash never masquerades as a live reading */
.hud [data-unavailable="1"]{color:var(--faint)}

/* ---------- sparkline instrument frame -------------------------------- */
/* overriding app.css `.spark{margin:1.1rem 0}` — the margin moves to the
   frame wrapper so the graph paper hugs the plot exactly */
.spark-frame{position:relative;margin:1.1rem 0}
.spark-frame .spark{margin:0;display:block}
.spark-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(246,241,228,.055) 1px,transparent 1px),
    linear-gradient(rgba(246,241,228,.045) 1px,transparent 1px);
  background-size:12.5% 100%,100% 25%;
}
.spark-cap{
  position:absolute;right:.5rem;bottom:.35rem;pointer-events:none;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.18em;
  color:var(--faint);
}
.spark-dot{
  position:absolute;width:8px;height:8px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  color:var(--up);background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.spark-dot[hidden]{display:none}
.spark-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid currentColor;
  animation:spark-ping 1.8s var(--ease) infinite;
}
@keyframes spark-ping{
  0%{transform:scale(.4);opacity:.8}
  100%{transform:scale(1.7);opacity:0}
}

/* ---------- stale state ------------------------------------------------ */
/* app.css already dims the whole card; make the plot read as "last good,
   not current" without blanking a single number */
body.stale .spark{filter:grayscale(.65)}
body.stale .spark-dot::after{animation:none;opacity:0}

/* ---------- buy/sell flow + bonding curve ----------------------------- */
/* 50/50 notch so the flow bar reads as a gauge, not a decoration */
.flow::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:rgba(10,10,18,.6);z-index:1;
}
/* quarter-mile markers on the graduation bar */
.curve-bar{position:relative}
.curve-bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(246,241,228,.28),rgba(246,241,228,.28)),
    linear-gradient(rgba(246,241,228,.28),rgba(246,241,228,.28)),
    linear-gradient(rgba(246,241,228,.28),rgba(246,241,228,.28));
  background-size:1px 100%;
  background-position:25% 0,50% 0,75% 0;
  background-repeat:no-repeat;
}
/* overriding app.css `.curve span{text-transform:uppercase}` — main.js
   writes "…% to graduation" in lowercase and uppercase-mapping is unsafe
   under a Turkish locale (i→İ); copy renders exactly as authored */
.curve span{text-transform:none}

/* ---------- reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hud-lamp i{animation:none}
  .spark-dot::after{animation:none;opacity:0}
  .hr-stack.go{transition:none}
  .hud-price b.hud-flash-up,
  .hud-price b.hud-flash-down{animation:none}
}


/* ---- polish: dexwidget ---- */
/* ============================================================
   DEXSCREENER LIVE CHART EMBED
   The HUD's own sparkline is our art-directed read of the price. This
   is the other thing buyers want: the real, tradeable chart they
   already trust, with depth and volume, straight from the source.

   Lazy-mounted (see dexwidget.js): the iframe is ~1MB of third-party
   JS and would otherwise land on the LCP path for a panel most
   visitors never scroll to.
   ============================================================ */

#dexwrap {
  margin-top: 2.2rem;
  max-width: 920px;
}

#dexwrap .dex-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
}

#dexwrap .dex-title {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--bone);
}

#dexwrap .dex-note {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--faint);
}

#dexwrap .dex-frame {
  position: relative;
  /* INTEGRATOR FIX — width:100% added. With width:auto, `aspect-ratio` plus a
     larger `min-height` resolves the OTHER way: the min-height inflates the
     width to match the ratio. Measured at a 360px viewport, the 3/4 + 460px
     mobile rule below blew the frame out to 345px inside a 320px column and
     put a real 5px horizontal overflow on the document. A definite width
     makes the ratio compute height, and min-height only ever raises it. */
  width: 100%;
  max-width: 100%;
  /* aspect-ratio rather than a fixed height so it never letterboxes */
  aspect-ratio: 16 / 10;
  min-height: 380px;
  border: 1px solid rgba(246, 241, 228, .14);
  background: var(--asphalt);
  overflow: hidden;
}

#dexwrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* placeholder shown until the panel is scrolled near — keeps the layout
   stable so mounting the iframe causes zero shift */
#dexwrap .dex-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: .8rem;
  color: var(--faint);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  background:
    repeating-linear-gradient(115deg,
      rgba(246, 241, 228, .022) 0 12px, transparent 12px 24px),
    var(--asphalt);
}

#dexwrap .dex-ph i {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(236, 72, 153, .35);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: dex-spin 900ms linear infinite;
}

@keyframes dex-spin { to { transform: rotate(360deg); } }

#dexwrap.is-live .dex-ph { display: none; }

/* a failed embed must degrade to a real link, never to a dead grey box */
#dexwrap .dex-fallback {
  display: grid;
  place-items: center;
  gap: .8rem;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--dim);
  font-size: .82rem;
}

#dexwrap .dex-fallback a {
  border: 1px solid var(--pink);
  color: var(--pink);
  padding: .6rem 1.2rem;
  font-family: var(--f-display);
  font-size: .8rem;
  letter-spacing: .1em;
}

@media (max-width: 640px) {
  #dexwrap .dex-frame { aspect-ratio: 3 / 4; min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  #dexwrap .dex-ph i { animation: none; }
}


/* ---- polish: sections1 ---- */
/* ============================================================
   POLISH / SECTIONS1 — map + radio lift
   Companion to polish/sections1.js (export polishSections1).

   Load AFTER sections/map.css and sections/radio.css. Most
   selectors out-rank the originals by specificity anyway; the one
   !important block (mobile card dock) beats inline styles that
   sections/map.js writes, which cascade order cannot.

   Contract: no text-transform anywhere (Turkish-locale i→İ guard),
   transform/opacity/filter animation only, reduced-motion block at
   the bottom of the file, nothing here can overflow the viewport.
   ============================================================ */

/* ==================== MAP =================================== */

/* -- waypoint ping (spawned by JS on pin, transform+opacity only) */
#sec-map .mp-ping{pointer-events:none}
#sec-map .mp-ping circle{fill:none}

/* -- pinned zone reads as police tape: marching dashed outline */
#sec-map #mapZones .zone.pinned{
  stroke-dasharray:10 6;
  animation:s1-march 1.1s linear infinite;
}
@keyframes s1-march{to{stroke-dashoffset:-16}}

/* -- intel card: accent bar in the district color + stamp-in on pin */
#sec-map .map-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--zc,var(--pink)),transparent 78%);
}
#sec-map .map-card.pin.show{animation:s1-stamp .34s var(--ease)}
@keyframes s1-stamp{
  0%{transform:scale(1.045)}
  55%{transform:scale(.988)}
  100%{transform:none}
}

/* -- heat bars cascade instead of flipping as one block */
#sec-map .mc-bars i:nth-child(2){transition-delay:.05s}
#sec-map .mc-bars i:nth-child(3){transition-delay:.1s}
#sec-map .mc-bars i:nth-child(4){transition-delay:.15s}
#sec-map .mc-bars i:nth-child(5){transition-delay:.2s}

/* -- phones: the floating card becomes a bottom sheet.
   Overrides sections/map.css AND the inline left/top that
   sections/map.js place() writes — inline styles are only
   beatable with !important, hence the exception to the rule. */
@media (max-width:560px){
  #sec-map .map-card{
    left:0 !important;   /* beats map.js inline left */
    top:auto !important; /* beats map.js inline top */
    right:0;bottom:0;
    width:auto;max-width:none;
    border-left:0;border-right:0;border-bottom:0;
    clip-path:none;
    box-shadow:0 -14px 40px -12px rgba(10,10,18,.9);
    transform:translateY(14px);
  }
  #sec-map .map-card.show{transform:none}
}

/* ==================== RADIO ================================= */

/* -- dial scale becomes a drag surface (JS wires the pointer logic).
   pan-y keeps vertical page scroll working on touch; horizontal
   intent is claimed by the scrub handler. */
#sec-radio .rd-scale{
  cursor:grab;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
#sec-radio.rd-scrubbing .rd-scale{cursor:grabbing}

/* -- drag affordance, injected by JS, retired after first scrub */
#sec-radio .rd-drag-hint{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-style:normal;font-size:.54rem;
  letter-spacing:.3em;color:var(--faint);white-space:nowrap;
  pointer-events:none;opacity:.8;transition:opacity .5s var(--ease);
}
#sec-radio.rd-scrubbing .rd-drag-hint,
#sec-radio.rd-scrubbed .rd-drag-hint{opacity:0}

/* -- needle adopts the tuned station's accent (JS sets --st on root).
   Extra .rd-scale in the selector out-ranks sections/radio.css. */
#sec-radio .rd-scale .rd-needle{
  background:linear-gradient(180deg,var(--st,var(--pink)),var(--sky-4));
  box-shadow:0 0 12px rgba(236,72,153,.75),0 0 28px rgba(236,72,153,.35);
  box-shadow:0 0 12px color-mix(in srgb,var(--st,#EC4899) 78%,transparent),
             0 0 28px color-mix(in srgb,var(--st,#EC4899) 38%,transparent);
}
#sec-radio.rd-scrubbing .rd-scale .rd-needle{
  box-shadow:0 0 16px rgba(236,72,153,.9),0 0 44px rgba(236,72,153,.5);
  box-shadow:0 0 16px color-mix(in srgb,var(--st,#EC4899) 95%,transparent),
             0 0 44px color-mix(in srgb,var(--st,#EC4899) 55%,transparent);
}

/* -- the tuned station's stop marker lights up (transform only) */
#sec-radio .rd-scale .rd-stop{transition:opacity .3s,transform .3s var(--ease)}
#sec-radio .rd-scale .rd-stop.on{
  opacity:1;background:var(--st,var(--sky-4));
  transform:translateX(-50%) scale(1.7);
  box-shadow:0 0 10px color-mix(in srgb,var(--st,#FFCE61) 70%,transparent);
}

/* -- per-station accent system (genre-coded, all from app.css tokens) */
#sec-radio .rd-list .rd-st[data-sig="knip"]    {--st:var(--orange)}
#sec-radio .rd-list .rd-st[data-sig="talk"]    {--st:var(--sky-3)}
#sec-radio .rd-list .rd-st[data-sig="vice"]    {--st:var(--pink)}
#sec-radio .rd-list .rd-st[data-sig="scratch"] {--st:var(--violet)}
#sec-radio .rd-list .rd-st[data-sig="classics"]{--st:var(--sky-4)}
#sec-radio .rd-list .rd-st[data-sig="stray"]   {--st:var(--sky-2)}

/* overriding sections/radio.css hard-coded pink hover/tuned styling
   so each station glows in its own color */
#sec-radio .rd-list .rd-st::before{
  background:linear-gradient(150deg,rgba(236,72,153,.14),transparent 62%);
  background:linear-gradient(150deg,color-mix(in srgb,var(--st,#EC4899) 15%,transparent),transparent 62%);
}
#sec-radio .rd-list .rd-st.on{
  background:linear-gradient(150deg,rgba(236,72,153,.13),var(--ink) 62%);
  background:linear-gradient(150deg,color-mix(in srgb,var(--st,#EC4899) 14%,transparent),var(--ink) 62%);
  box-shadow:inset 0 0 0 1px rgba(236,72,153,.55);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st,#EC4899) 60%,transparent);
}
#sec-radio .rd-list .rd-st .rd-st-state{color:var(--st,var(--pink))}
#sec-radio .rd-list .rd-st.on .rd-st-freq{color:var(--st,var(--sky-4))}
#sec-radio .rd-list .rd-st:focus-visible{outline-color:var(--st,var(--pink))}

/* -- tune-in static flicker over the head unit (opacity only) */
#sec-radio .rd-dial{position:relative} /* anchor for the ::after overlay */
#sec-radio .rd-dial::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,
    rgba(246,241,228,.07) 0 1px,transparent 1px 3px);
}
#sec-radio.rd-tuning .rd-dial::after{animation:s1-static .4s steps(4,jump-none)}
@keyframes s1-static{0%{opacity:.85}60%{opacity:.3}100%{opacity:0}}

/* -- "now spinning" flavor line, injected by JS into the head unit */
#sec-radio .rd-track{
  margin-top:1rem;padding-top:.7rem;
  border-top:1px dashed rgba(246,241,228,.14);
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;
  color:var(--dim);line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:1;transition:opacity .38s var(--ease);
}
#sec-radio .rd-track.swap{opacity:0}
#sec-radio .rd-track b{font-weight:700;color:var(--st,var(--sky-4))}

/* ==================== REDUCED MOTION ======================== */
@media (prefers-reduced-motion: reduce){
  #sec-map #mapZones .zone.pinned{animation:none}   /* static dash still marks the pin */
  #sec-map .map-card.pin.show{animation:none}
  #sec-map .mc-bars i:nth-child(n){transition-delay:0s}
  #sec-radio.rd-tuning .rd-dial::after{animation:none}
  #sec-radio .rd-scale .rd-stop{transition:none}
  #sec-radio .rd-track{transition:none}
  #sec-radio .rd-drag-hint{transition:none}
}


/* ---- polish: sections2 ---- */
/* ============================================================
   POLISH / SECTIONS2 — brands wall + wanted poster generator
   Companion to polish/sections2.js (export polishSections2).
   No text-transform anywhere. Reduced-motion honoured. All
   selectors scoped under #sec-brands / #sec-wanted.
   ============================================================ */

/* ─────────────────────────── BRANDS ─────────────────────────── */

/* Override of sections/brands.css .brand (no overflow set there):
   clip the pointer spotlight to the tile's rounded box. The hover
   lift, border glow and box-shadow are unaffected by own overflow. */
#sec-brands .brand {
  overflow: hidden;
}

/* Pointer spotlight — an accent-tinted pool of light that follows
   the cursor inside a tile. Driven only by transform + opacity;
   position vars are written by JS (fine-pointer devices only). */
#sec-brands .brand::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--acc) 17%, transparent), transparent);
  transform: translate3d(var(--sx, -999px), var(--sy, -999px), 0);
  opacity: var(--so, 0);
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

@media (hover: none) {
  #sec-brands .brand::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #sec-brands .brand::before { display: none; }
}

/* ─────────────────────────── WANTED ─────────────────────────── */

/* Tilt wrapper injected around #wCanvas by sections2.js. Keeps the
   stamp animation (which targets the canvas) independent from the
   pointer tilt (which targets this wrapper). */
#sec-wanted .wx-tilt {
  position: relative;
  display: block;
  min-width: 0;
  will-change: transform;
}

/* Static film grain over the poster — art direction calls for
   grain; static texture, so nothing to reduce for motion. */
#sec-wanted .wx-grain {
  position: absolute;
  inset: 1px;                 /* sit inside the canvas 1px border */
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Press-roller reveal — an ink slab that rolls down off the poster
   the first time the stage enters the viewport ("the press prints
   your charge"). Built + animated by JS, removed when done. */
#sec-wanted .wx-roller {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
#sec-wanted .wx-roller-slab {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--asphalt-2), var(--ink) 70%);
  will-change: transform;
}
/* the moving print head — a thin sunset line on the slab's top edge */
#sec-wanted .wx-roller-slab::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--sky-2), var(--sky-3) 40%, var(--sky-4) 60%, var(--sky-2));
  box-shadow: 0 0 18px rgba(238, 108, 69, .55);
}

@media (prefers-reduced-motion: reduce) {
  #sec-wanted .wx-roller { display: none; }
}

/* Charge flip — tiny settle when a new charge is printed. Covered
   by wanted.css's reduced-motion animation:none blanket. */
@keyframes wx-flip {
  0%   { opacity: 0; transform: translateY(7px); }
  100% { opacity: 1; transform: none; }
}
#sec-wanted .w-charge p.wx-flip {
  animation: wx-flip .38s var(--ease);
}


/* ---- polish: sections3 ---- */
/* ============================================================
   POLISH — SECTIONS3 (heist + manifesto)
   Layered on top of sections/heist.css and sections/manifesto.css.
   Every selector is scoped under #sec-heist / #sec-manifesto and
   every keyframe is s3- prefixed so nothing collides with the
   other polish axes. No text-transform anywhere (tr-locale rule);
   every keyframe animates transform / opacity / filter only.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   HEIST · 1 — wire telemetry lamp (injected into .hs-board-head)
   Honest live/stale indicator: green only while real reads land,
   red the moment market.js flags the data stale. Never fakes.
   ──────────────────────────────────────────────────────────── */
#sec-heist .hs-wire {
  display: inline-flex; align-items: center; gap: .5em;
}
#sec-heist .hs-wire b {
  font-weight: 700; color: var(--faint);
  letter-spacing: .22em; /* match the board-head register */
}
#sec-heist .hs-wire[data-state="live"] b  { color: var(--dim); }
#sec-heist .hs-wire[data-state="stale"] b { color: var(--down); }

#sec-heist .hs-wire-dot {
  position: relative; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(246, 241, 228, .25);
  transition: background .4s, box-shadow .4s;
}
#sec-heist .hs-wire[data-state="live"] .hs-wire-dot {
  background: var(--up); box-shadow: 0 0 8px rgba(74, 222, 128, .7);
}
#sec-heist .hs-wire[data-state="stale"] .hs-wire-dot {
  background: var(--down); box-shadow: 0 0 8px rgba(239, 68, 68, .6);
}
/* sonar ring fired from JS on every fresh chain read */
#sec-heist .hs-wire-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(74, 222, 128, .8);
  opacity: 0; transform: scale(.4);
}
@media (prefers-reduced-motion: no-preference) {
  #sec-heist .hs-wire.ping .hs-wire-dot::after {
    animation: s3-ping .9s var(--ease) forwards;
  }
  @keyframes s3-ping {
    0%   { opacity: .9; transform: scale(.4); }
    100% { opacity: 0;  transform: scale(1.9); }
  }
}

/* stale board state — dim the hero number, kill its glow, tag it.
   Overrides heist.css .hs-ro-num b glow: while data is stale a lit
   gold number would over-claim freshness. */
#sec-heist.hs-stale .hs-ro-num b { opacity: .55; text-shadow: none; }
#sec-heist.hs-stale .hs-dial-arc { opacity: .55; filter: none; }
#sec-heist .hs-stale-tag {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .2em;
  color: var(--down); margin-top: .2rem;
}
#sec-heist .hs-stale-tag[hidden] { display: none; }

/* ────────────────────────────────────────────────────────────
   HEIST · 2 — plotter scan-line over the blueprint board.
   Runs only while the section is on screen (.hs-inview from JS)
   and only when motion is welcome. Pure transform, near-invisible
   by design: atmosphere, not a feature.
   ──────────────────────────────────────────────────────────── */
#sec-heist .hs-scan {
  position: absolute; inset: 0; display: block;
  pointer-events: none; overflow: hidden;
}
#sec-heist .hs-scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 26%;
  display: block; opacity: 0;
  background: linear-gradient(180deg,
    transparent,
    rgba(255, 206, 97, .05) 48%,
    rgba(255, 206, 97, .015) 55%,
    transparent);
}
@media (prefers-reduced-motion: no-preference) {
  #sec-heist.hs-inview .hs-scanline {
    opacity: 1;
    animation: s3-scan 12s linear infinite;
  }
  @keyframes s3-scan {
    from { transform: translateY(-110%); }
    to   { transform: translateY(500%); }   /* own height = 26% of board → exits bottom */
  }
}

/* ────────────────────────────────────────────────────────────
   HEIST · 3 — drill shimmer riding inside the progress fill.
   Overrides heist.css .hs-fill (adds overflow:hidden) so the
   moving highlight clips to the honest filled width and can
   never imply progress beyond the real number.
   ──────────────────────────────────────────────────────────── */
#sec-heist .hs-fill { overflow: hidden; }
#sec-heist .hs-fill::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  background: linear-gradient(105deg,
    transparent, rgba(255, 229, 138, .5) 50%, transparent);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  #sec-heist.hs-on.hs-inview .hs-fill::after {
    opacity: 1;
    animation: s3-drill 3s linear infinite;
  }
  @keyframes s3-drill {
    from { transform: translateX(-120%); }
    to   { transform: translateX(360%); }
  }
}

/* fact flash — one brightness pulse when a live value actually changes */
@media (prefers-reduced-motion: no-preference) {
  #sec-heist .hs-facts dd.s3-flash {
    animation: s3-flash .8s var(--ease);
  }
  @keyframes s3-flash {
    0%   { filter: brightness(2.1); }
    100% { filter: brightness(1); }
  }
}

/* ────────────────────────────────────────────────────────────
   MANIFESTO · 1 — copy button next to the contract address.
   .mf-ca becomes a wrapping flex row; overrides manifesto.css
   .mf-ca code display:block so code and button share the row
   on wide screens and stack cleanly at 360px.
   ──────────────────────────────────────────────────────────── */
#sec-manifesto .mf-ca {
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: stretch;
}
#sec-manifesto .mf-ca code { flex: 1 1 240px; margin: 0; }

#sec-manifesto .mf-copy {
  flex: none; align-self: stretch; cursor: pointer;
  font-family: var(--f-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; color: var(--sky-4);
  background: rgba(255, 206, 97, .06);
  border: 1px solid rgba(255, 206, 97, .35);
  padding: .7rem 1.05rem;
  transition: color .3s, background .3s, border-color .3s;
}
#sec-manifesto .mf-copy:hover,
#sec-manifesto .mf-copy:focus-visible {
  color: var(--ink); background: var(--sky-4); border-color: var(--sky-4);
}
#sec-manifesto .mf-copy:focus-visible {
  outline: 1px solid var(--pink); outline-offset: 3px;
}
#sec-manifesto .mf-copy.ok,
#sec-manifesto .mf-copy.ok:hover {
  color: var(--up); background: rgba(74, 222, 128, .08);
  border-color: rgba(74, 222, 128, .5);
}

/* ────────────────────────────────────────────────────────────
   MANIFESTO · 2 — sunset hairline above the fine print.
   The section signs its name; the signature gets a rule.
   ──────────────────────────────────────────────────────────── */
#sec-manifesto .mf-fineprint { position: relative; padding-top: 1.4rem; }
#sec-manifesto .mf-fineprint::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: min(220px, 42%); height: 1px;
  background: linear-gradient(90deg, var(--pink), var(--sky-4), transparent);
}

/* ── reduced motion: zero out the polish-layer transitions too ── */
@media (prefers-reduced-motion: reduce) {
  #sec-heist .hs-wire-dot,
  #sec-manifesto .mf-copy { transition-duration: .01ms; }
}


/* ---- polish: footer ---- */
/* ============================================================
   POLISH · FOOTER — "the last frame of the trailer"
   Styling half of polish/footer.js. Everything is scoped under
   footer.foot-polished (the class the JS adds), so this file is
   completely inert until the module runs — and wins specificity
   over app.css without a single !important.

   Close concept: the page ends in ink (continuing the manifesto's
   black), a banded GTA-VI sun rises behind the giant sunset
   wordmark, and above it sits the one thing the old footer never
   had — a final call to action. No text-transform anywhere;
   display copy is pre-uppercased at the source in footer.js.
   ============================================================ */

footer.foot-polished{
  position:relative;
  overflow:hidden;                       /* cages the banded sun — no page overflow */
  background:linear-gradient(180deg,var(--ink),var(--asphalt) 140%);
  border-top:1px solid rgba(246,241,228,.08);
  padding:clamp(4.5rem,12vh,8.5rem) 0 1.5rem;
}

/* ---------- backdrop: banded sun + glow ----------------------------- */
/* The GTA VI key-art motif — a horizon sun sliced into bands. Pure CSS,
   one masked radial + one soft glow, both behind the content layer. */
footer.foot-polished .foot-glow{
  position:absolute;left:50%;bottom:-18%;
  width:min(120vw,1400px);aspect-ratio:2/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,
    rgba(238,108,69,.22),rgba(191,52,117,.12) 45%,transparent 72%);
  pointer-events:none;
}
footer.foot-polished .foot-sun{
  position:absolute;left:50%;bottom:clamp(4rem,14vh,9rem);
  width:min(44vw,480px);aspect-ratio:1;
  /* centred via margin, NOT transform — GSAP owns this element's
     transform for the scrub rise and would clobber a translateX(-50%) */
  margin-left:calc(min(44vw,480px) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%,
    var(--sky-5),var(--sky-4) 34%,var(--sky-3) 62%,var(--sky-2) 100%);
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 16px,transparent 16px 23px);
          mask:repeating-linear-gradient(180deg,#000 0 16px,transparent 16px 23px);
  opacity:.38;
  pointer-events:none;
  will-change:transform;
}

/* content sits above the backdrop */
footer.foot-polished .wrap{position:relative;z-index:2}

/* ---------- the final call to action -------------------------------- */
footer.foot-polished .foot-exit{
  margin-bottom:clamp(2.6rem,7vh,5rem);
  display:grid;gap:1.4rem;justify-items:start;
}
/* .eyebrow comes from app.css (pink dash, tracking); only spacing here */
footer.foot-polished .foot-exit .eyebrow{margin:0}

footer.foot-polished .foot-line{
  font-family:var(--f-display);
  font-size:clamp(1.7rem,1rem + 4vw,3.4rem);
  line-height:.98;letter-spacing:-.01em;
  color:var(--bone);max-width:20ch;
}
footer.foot-polished .foot-line em{
  font-style:normal;
  background:linear-gradient(100deg,var(--pink),var(--sky-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

footer.foot-polished .foot-actions{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
}
/* ghost links — same language as app.css .links a, minus its margin-top */
footer.foot-polished .foot-ghost{
  padding:.72rem 1.3rem;border:1px solid rgba(246,241,228,.2);
  font-size:.66rem;letter-spacing:.2em;color:var(--dim);
  transition:border-color .35s,color .35s,background .35s;
}
footer.foot-polished .foot-ghost:hover{
  border-color:var(--pink);color:var(--pink);background:rgba(236,72,153,.08);
}
footer.foot-polished .foot-ghost:focus-visible,
footer.foot-polished .foot-ca:focus-visible,
footer.foot-polished .foot-top:focus-visible{
  outline:1px solid var(--sky-4);outline-offset:3px;
}

/* contract pill — truncated mint + copy affordance + live price stamp */
footer.foot-polished .foot-ca{
  display:inline-flex;align-items:center;gap:.8rem;
  padding:.66rem 1rem;max-width:100%;
  border:1px solid rgba(246,241,228,.18);
  background:rgba(246,241,228,.03);
  font-family:var(--f-mono);font-size:.7rem;color:var(--dim);
  cursor:pointer;
  transition:border-color .35s,color .35s,background .35s;
}
footer.foot-polished .foot-ca:hover{
  border-color:var(--sky-4);color:var(--bone);background:rgba(255,206,97,.06);
}
footer.foot-polished .foot-ca .fc-copy{
  font-size:.58rem;letter-spacing:.2em;color:var(--faint);
  transition:color .35s;
}
footer.foot-polished .foot-ca:hover .fc-copy{color:var(--sky-4)}
footer.foot-polished .foot-ca.ok{border-color:var(--up)}
footer.foot-polished .foot-ca.ok .fc-copy{color:var(--up)}

/* live price stamp — a real number or an em dash, never anything else */
footer.foot-polished .foot-stamp{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.68rem;color:var(--dim);
  font-variant-numeric:tabular-nums;padding:.66rem .2rem;
}
footer.foot-polished .foot-stamp i{
  width:6px;height:6px;border-radius:50%;
  background:var(--faint);flex:none;
}
footer.foot-polished .foot-stamp[data-sig="live"] i{background:var(--up)}
footer.foot-polished .foot-stamp[data-sig="stale"] i{background:var(--sky-4)}
@media (prefers-reduced-motion: no-preference){
  footer.foot-polished .foot-stamp[data-sig="live"] i{
    animation:foot-pulse 2.4s ease-in-out infinite;
  }
}
@keyframes foot-pulse{
  0%,100%{opacity:1}50%{opacity:.35}
}

/* ---------- the wordmark -------------------------------------------- */
/* overrides app.css .foot-mark opacity:.55 + its parent-level
   background-clip — as the final frame the mark burns near full
   strength, and the gradient moves onto the animated inner spans
   (a transformed child of a background-clip:text parent composites
   on its own layer and loses the clip mid-tween) */
footer.foot-polished .foot-mark{opacity:.94;background:none;color:currentColor}
/* clip cages for the rise reveal */
footer.foot-polished .fm-line{display:block;overflow:hidden;
  padding-bottom:.06em;margin-bottom:-.06em}   /* keep Anton descenders unclipped */
footer.foot-polished .fm-in{display:inline-block;will-change:transform;
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* one continuous violet→magenta→coral→gold ramp across the two lines —
   the vivid half of --sunset; the token's navy head would sink into ink */
footer.foot-polished .fm-line:nth-child(1) .fm-in{
  background-image:linear-gradient(180deg,var(--sky-1),var(--sky-2) 58%,var(--sky-3))}
footer.foot-polished .fm-line:nth-child(2) .fm-in{
  background-image:linear-gradient(180deg,var(--sky-3),var(--sky-4) 62%,var(--sky-5))}

/* ---------- sign-off strip ------------------------------------------ */
/* overrides app.css .foot-row text-transform:uppercase — the tr-locale
   maps i→İ, so copy is pre-uppercased in footer.js and the transform
   is neutralised here */
footer.foot-polished .foot-row{
  text-transform:none;
  margin-top:clamp(1.8rem,4vh,3rem);
  padding-top:1.4rem;
  border-top:1px solid rgba(246,241,228,.08);
  align-items:center;
}
footer.foot-polished .foot-top{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;border:1px solid rgba(246,241,228,.14);
  background:none;cursor:pointer;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  color:var(--faint);
  transition:border-color .35s,color .35s;
}
footer.foot-polished .foot-top:hover{border-color:var(--sky-4);color:var(--sky-4)}
footer.foot-polished .foot-top .ft-arr{
  display:inline-block;transition:transform .35s var(--ease);
}
footer.foot-polished .foot-top:hover .ft-arr{transform:translateY(-3px)}

/* ---------- small screens ------------------------------------------- */
@media (max-width:560px){
  /* keep the sun behind the wordmark only — off the sign-off rows */
  footer.foot-polished .foot-sun{width:70vw;margin-left:-35vw;
    bottom:clamp(13rem,32vh,17rem);opacity:.32}
  footer.foot-polished .foot-actions{width:100%}
  footer.foot-polished .foot-actions .btn{flex:1 1 100%;text-align:center}
  footer.foot-polished .foot-ghost{flex:1 1 calc(33% - .55rem);text-align:center}
  footer.foot-polished .foot-ca{width:100%;justify-content:space-between}
  footer.foot-polished .foot-top{margin-left:0;width:100%;justify-content:center}
}

/* reduced motion: hover nudges collapse to color-only feedback
   (the global app.css reduce block also flattens transitions) */
@media (prefers-reduced-motion: reduce){
  footer.foot-polished .foot-top .ft-arr{transition:none}
  footer.foot-polished .foot-top:hover .ft-arr{transform:none}
}


/* ---- polish: perf ---- */
/* ============================================================
   CTA6 POLISH — PERF AXIS (css)
   Load AFTER css/app.css. Every rule here either removes a
   continuous layout/paint cost or shrinks a per-frame GPU cost.
   No text-transform, no layout-property animation, nothing that
   can overflow the viewport.
   ============================================================ */

/* ── 1. Radio VU meter: height animation → transform ─────────────
   app.css animates `height` on 5 bars while the radio is live —
   that is per-frame layout inside the flex row for as long as the
   user keeps the sound on. Redefining the SAME keyframe name later
   in the cascade wins document-wide, so the existing
   `#sec-radio.live .rd-vu b { animation: rd-vu … }` now drives a
   compositor-only scaleY. Visual result is identical (bars grow
   from the bottom). The reduced-motion `animation:none` rule in
   app.css still applies untouched. */
/* overriding app.css `#sec-radio .rd-vu b{height:22%}` — bars are
   now full-height and scaled, so the keyframe can be transform-only */
#sec-radio .rd-vu b{
  height:100%;
  transform:scaleY(.22);
  transform-origin:center bottom;
}
@keyframes rd-vu{
  from{transform:scaleY(.14)}
  to{transform:scaleY(1)}
}

/* ── 2. Grain layer: cheaper compositing on small screens ────────
   mix-blend-mode:overlay on a fixed fullscreen element forces the
   compositor to render the whole page into a texture and blend it
   every frame anything moves. On desktop GPUs that is fine and the
   look is load-bearing, so it stays. On phones (weakest GPUs, and
   where the shader + scrubbed transforms already compete for the
   same budget) we drop to normal blending at a slightly lower
   opacity — on this near-black ink background the two are visually
   indistinguishable, and it removes the full-screen blend pass. */
@media (max-width:768px){
  /* overriding .grain's mix-blend-mode — removes the fullscreen
     backdrop-read blend pass on mobile GPUs */
  .grain{mix-blend-mode:normal;opacity:.045}
}

/* Promote the grain to its own layer explicitly so scrolling never
   re-rasterizes the noise tile (it is static content). */
.grain{will-change:transform}

/* ── 3. Sticky nav: halve the backdrop kernel on mobile ──────────
   blur(16px) re-samples everything behind the bar on every scrolled
   frame. A 9px kernel on a 768px-wide bar reads the same through
   frosted glass and costs roughly a quarter of the samples. */
@media (max-width:768px){
  /* overriding nav.stuck's backdrop-filter — smaller blur kernel,
     same frosted look, ~4x fewer texture samples per frame */
  nav.stuck{
    backdrop-filter:blur(9px) saturate(1.25);
    -webkit-backdrop-filter:blur(9px) saturate(1.25);
  }
}

/* ── 4. Honest will-change hints ─────────────────────────────────
   `will-change:left,top` (map intel card) and `will-change:left`
   (radio needle) hint layout properties — the browser can do
   nothing useful with that, it only burns layer memory. The card
   moves with the pointer, so give it a real compositor promotion
   instead: its left/top writes then repaint only its own layer,
   not the SVG map underneath it. The needle moves once per station
   click; it needs no hint at all. */
/* overriding #sec-map .map-card's will-change:left,top — layout
   props are not compositable; promote the layer instead */
#sec-map .map-card{will-change:transform}
/* overriding #sec-radio .rd-needle's will-change:left — it moves
   once per click, a permanent hint is wasted layer memory */
#sec-radio .rd-needle{will-change:auto}

/* ── 5. Containment on the repeated, self-clipping plates ────────
   .dist images are continuously transform-scrubbed inside their
   frames through the whole pinned city section. The plates already
   clip (overflow:hidden) and cast no outside ink, so explicit
   containment lets the engine scope invalidation to each plate
   instead of the rail. (.card / .brand are excluded on purpose —
   their hover box-shadows would be clipped by `paint`.) */
.dist{contain:layout paint}
.ride,.ep{contain:layout paint}


/* ---- polish: mobile ---- */
/* ============================================================
   POLISH · MOBILE — 360px→900px pass. Companion to mobile.js
   (polishMobile()).

   Contract honoured:
   · no text-transform anywhere (display copy pre-uppercased)
   · animates transform / opacity / filter only
   · tokens come from css/app.css, never redefined
   · loads AFTER css/app.css, so equal-specificity overrides win
     by order; no !important anywhere in this file
   · never touches #nav internals below the bar (nav.css owns the
     burger/menu) and never touches .cr-nav (cityrail.css owns it)
   ============================================================ */

/* ============================================================
   1 · TOUCH ERGONOMICS — 44px minimum tap targets
   Verified at 360px on the live page: COPY 27px, BUY 38px,
   map-legend rows 34px, NEW CHARGE 33px, socials 40px, poster
   action buttons 37px, footer links 42px. All lifted here.
   pointer:coarse (not width) so a phone in landscape still gets
   finger-sized targets and desktop mice keep the tight look.
   ============================================================ */
@media (pointer: coarse) {

  /* kill the 300ms double-tap-zoom delay + the gray tap flash —
     the single cheapest "native app feel" upgrade there is */
  a, button, input, [tabindex] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* overrides css/app.css .btn (38px) — hit target below 44px */
  .btn { min-height: 44px; }
  /* overrides css/app.css .links a (42px) */
  .links a { min-height: 44px; display: inline-flex; align-items: center; }
  /* overrides css/app.css .soc a (40px square) */
  .soc a { width: 44px; height: 44px; }
  /* overrides css/app.css .ca-mini button (27px) — same visual weight,
     taller hit area */
  .ca-mini button { min-height: 40px; padding-block: .55rem; }
  .ca-mini { padding-block: .4rem; }
  /* overrides sections/wanted css .w-dice (33px) */
  #sec-wanted .w-dice { min-height: 44px; }
  /* overrides map legend rows (34px) */
  #sec-map .map-legend button { min-height: 44px; }
  /* overrides radio mute chip (40px) */
  #sec-radio .rd-mute { min-height: 44px; }
  /* overrides #sec-map .mc-close — 22px close × on the pinned intel
     card is un-tappable; grow the hit area, keep the glyph size */
  #sec-map .mc-close {
    top: 0; right: 0; width: 42px; height: 42px;
    display: none; place-items: center; padding: 0;
  }
  #sec-map .map-card.pin .mc-close { display: grid; }

  /* active-state feedback where hover can never fire — transform only */
  .btn:active, .links a:active, .soc a:active,
  #sec-wanted .w-dice:active, #sec-radio .rd-st:active {
    transform: scale(.97);
  }
}

/* ============================================================
   2 · TOUCH CONTENT PARITY — hover-gated content must exist
   ============================================================ */
@media (hover: none) {

  /* crew dossier line is hover-revealed in app.css (.card:hover .d) so
     touch users never see it. polish/crew.js replaces the cards with a
     selectable roster (.cs-live) and owns the reveal there — this rule
     is the fallback ONLY when that polish did not run. */
  .crew:not(.cs-live) .card .d { max-height: none; opacity: 1; }

  /* district plates: the hover opacity boost (.55→.85) never fires on
     touch — lift the resting state so photos read over the ink scrim */
  .dist-img { opacity: .72; }

  /* ep cards + rides: hover glow never fires; give live episode its
     resting emphasis so "▶ PLAY" reads as the one tappable plate */
  .ep.live { transform: translateY(-2px); }
}

/* ============================================================
   3 · SMALL-SCREEN COMPOSITION — ≤560px / ≤430px
   ============================================================ */

/* nav brand: "CAT THEFT AUTO VI" broke onto two lines at 360px */
.brand-txt { white-space: nowrap; }

@media (max-width: 560px) {

  /* episodes: auto-fill minmax(172px,1fr) collapses to a 10-plate
     single column — half the season one screen at a time. Two columns
     keep the grid a grid. Overrides css/app.css .eps. */
  .eps { grid-template-columns: repeat(2, 1fr); }
  .ep { padding: .9rem .8rem; }
  .ep h5 { font-size: .92rem; }

  /* scanner strip: the long mono label was eating half the row */
  .scan-label { font-size: .58rem; letter-spacing: .12em; }
}

@media (max-width: 430px) {

  /* hero kicker wrapped as "…ZERO / RULES" — balance the break and
     pull the tracking in so it wraps as designed, not by accident */
  .kicker { letter-spacing: .26em; text-wrap: balance; }

  /* wordmark presence: at 360px the clamp floor leaves the title small
     under two huge cats. Raise the floor; the 2px VI stroke also reads
     chunky at this size. Overrides css/app.css .wm-lines / .wm-vi. */
  .wm-lines { font-size: clamp(3.05rem, 14vw, 8.4rem); }
  .wm-vi {
    font-size: clamp(4.2rem, 17vw, 11.5rem);
    -webkit-text-stroke: 1.4px rgba(246, 241, 228, .82);
  }

  /* hero action bar: CA chip takes the full row, address gets the
     leftover width instead of a hard 42vw crop. The cap must stay a
     DEFINITE length (viewport calc): with max-width:none the nowrap
     address's max-content drives flex intrinsic sizing and widens the
     hero grid track past the viewport. 158px = gutters + chip padding
     + gap + COPY button. */
  .hero-actions { gap: .7rem; }
  .ca-mini { flex: 1 1 100%; }
  .ca-mini code { flex: 1; min-width: 0; max-width: calc(100vw - 158px); }

  /* live HUD: breathing room at phone width */
  .hud { padding: 1.05rem; }
  .spark { height: 132px; }
  .hud-price b { font-size: clamp(1.7rem, 9vw, 2.4rem); }

  /* radio readout: ON AIR chip stops fighting for the same row */
  #sec-radio .rd-onair { margin-left: 0; }

  /* wanted poster actions stack full-width — one thumb column */
  #sec-wanted .w-actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   4 · SHORT LANDSCAPE PHONES — the pinned rail's blind spot
   A 780×390 phone: 60vh plates centered in 100svh collide with the
   absolutely-placed section head. Compact the head, hang the rail low.
   ============================================================ */
@media (max-height: 520px) and (orientation: landscape) {
  .city { align-items: flex-end; }
  .rail { padding-bottom: 3.6rem; }
  .city-head { top: .8rem; }
  .city-head .d1 { font-size: 1.5rem; }
  .city-head .eyebrow { margin-bottom: .3rem; }
  .dist { height: min(62vh, 340px); }
}

/* ============================================================
   5 · REDUCED MOTION — nothing here animates on its own, but the
   active-press transforms should also go quiet
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .links a:active, .soc a:active,
  #sec-wanted .w-dice:active, #sec-radio .rd-st:active { transform: none; }
  .ep.live { transform: none; }
}


/* ---- polish: a11y ---- */
/* ============================================================
   POLISH · A11Y — contrast, skip navigation, focus repairs.
   Pairs with polish/a11y.js (polishA11y()).

   Deliberately does NOT restate what other polish axes own:
   · global :focus-visible ring        → polish/micro.css
   · rail keyboard / focus styles      → polish/cityrail.css
   · accordion arrow-key navigation    → polish/sections3.js
   Contract: no text-transform, transform/opacity-only motion,
   reduced-motion covered, nothing can cause horizontal overflow.
   ============================================================ */

/* ---------- 1 · CONTRAST — the one token change on this page -------
   Overriding the --faint token from css/app.css (alpha .34 → .52).
   At .34 over var(--ink) the blended text is ≈#5A5859 → 2.7:1, well
   under the 4.5:1 AA floor, and --faint is used for *small* type
   (.56–.75rem labels, notes, fine print) where the requirement is
   strictest. At .52 the blend is ≈#858279 → ≈5.1:1: passes AA and
   still reads clearly quieter than --dim (.62) and --bone (1).
   Same hue, same hierarchy, legal contrast. */
:root{
  --faint: rgba(246,241,228,.52);
}

/* overriding [data-unavailable="1"] from css/app.css: its extra
   opacity .75 re-dims the em dash below 4:1 now that the token is
   legal — the dash IS the honest "no data" signal, it must be read */
[data-unavailable="1"]{opacity:1}

/* ---------- 2 · SKIP TO CONTENT ------------------------------------
   First focusable element on the page (a11y.js prepends it to body).
   Off-screen via transform only; snaps into the top-left over the
   fixed nav (nav z:180, loader z:300 → 400 so it is never buried).
   Styled as a real CTA6 button — a skip link that looks like an
   afterthought reads as one. Copy pre-uppercased in the JS. */
.a11y-skip{
  position:fixed;top:.9rem;left:var(--gut,1.25rem);z-index:400;
  font-family:var(--f-display);font-size:.8rem;letter-spacing:.08em;
  color:var(--ink);background:linear-gradient(100deg,var(--pink),var(--orange));
  padding:.6rem 1.2rem;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transform:translateY(calc(-100% - 1.2rem));
  transition:transform .3s var(--ease,ease);
  pointer-events:none;
}
.a11y-skip:focus,
.a11y-skip:focus-visible{
  transform:none;
  pointer-events:auto;
  outline:2px solid var(--bone);
  outline-offset:3px;
}

/* ---------- 3 · PROGRAMMATIC FOCUS TARGETS -------------------------
   a11y.js moves focus to sections after skip-link / in-page nav
   (tabindex="-1"). Those targets must not paint the global focus
   ring from polish/micro.css — a viewport-sized pink outline around
   a whole section is noise, and tabindex="-1" elements are only ever
   focused programmatically. (0,2,0) beats micro's :where() (0,1,0). */
[tabindex="-1"]:focus-visible{
  outline:none;
  box-shadow:none;
}

/* ---------- 4 · MAP LEGEND — a focus state that survives ----------
   Overriding #sec-map .map-legend button:focus-visible from
   css/app.css, which sets outline:none and relies on an ink→asphalt-2
   background swap: two near-black surfaces, far under the 3:1
   non-text minimum. Keep the swap, add a visible ring. Same
   specificity as the app.css rule — this file loads after it. */
#sec-map .map-legend button:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:-2px;
}

/* ---------- 5 · MAP CARD CLOSE — reachable target size -------------
   Overriding #sec-map .mc-close padding (.2rem) from css/app.css:
   the × was a ~18px target; WCAG 2.5.8 wants 24px minimum. */
#sec-map .mc-close{
  padding:.45rem .6rem;
}

/* ---------- 6 · USER PREFERENCE ESCALATION ------------------------- */
@media (prefers-contrast: more){
  :root{
    --dim:   rgba(246,241,228,.84);
    --faint: rgba(246,241,228,.68);
  }
}

@media (prefers-reduced-motion: reduce){
  .a11y-skip{transition:none}
}


/* ---- polish: zz-backdrops ---- */
/* ============================================================
   PER-SECTION BACKDROPS
   Every section gets its own atmosphere instead of one flat ink field
   repeated eleven times. That repetition is the single biggest reason
   a long page reads as a template — the eye stops registering movement
   because nothing under the content ever changes.

   Rules kept for all of them:
     · pure CSS, no images, no extra requests
     · painted on ::before at z-index 0 so content is untouched
     · sampled from the existing sky ramp, so it still reads as one sunset
     · every one leans on --dusk, the scroll-driven warmth variable
   Loaded LAST in the cascade so it wins over the generic section rules.
   ============================================================ */

section, footer { position: relative; isolation: isolate; }

/* INTEGRATOR — REWRITTEN. The original pair was:
     section > *, footer > * { position: relative; z-index: 1; }
     section::before, footer::before { ... z-index: 0 }
   `section > *` is a blanket promotion of EVERY direct child, and three
   polish axes inject absolutely-positioned direct children into sections:
   polish/bg.js's `.bgfx` atmosphere stack (7 sections) and polish/footer.js's
   `.foot-glow` + `.foot-sun`. Forcing them to position:relative collapsed the
   bgfx planes to zero height and dropped a ~480px banded-sun circle into the
   footer's normal flow, shoving the sign-off rows down the page.
   `isolation:isolate` on the section already contains a negative z-index, so
   the pseudo can sit at -1 and every child stays above it untouched. */
section::before, footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---- WORLD — a low horizon glow, like the city just over the rise -- */
#world::before {
  background:
    radial-gradient(120% 60% at 50% 108%, rgba(191, 52, 117, .28), transparent 62%),
    radial-gradient(70% 40% at 12% 0%, rgba(80, 54, 111, .35), transparent 70%);
}

/* ---- CINEMA — a projector cone from the top ----------------------- */
section:has(#cinema)::before {
  background:
    conic-gradient(from 200deg at 50% -18%,
      transparent 0deg, rgba(255, 206, 97, .09) 18deg,
      transparent 40deg),
    linear-gradient(180deg, rgba(31, 33, 77, .5), transparent 55%);
}

/* ---- CREW — five soft spotlights, one per character --------------- */
#crew::before {
  background:
    radial-gradient(28% 46% at 10% 62%, rgba(236, 72, 153, .16), transparent 70%),
    radial-gradient(28% 46% at 30% 58%, rgba(139, 92, 246, .14), transparent 70%),
    radial-gradient(28% 46% at 50% 64%, rgba(238, 108, 69, .14), transparent 70%),
    radial-gradient(28% 46% at 70% 58%, rgba(255, 206, 97, .12), transparent 70%),
    radial-gradient(28% 46% at 90% 62%, rgba(191, 52, 117, .16), transparent 70%);
}

/* ---- MAP — a faint survey grid, like a planning table ------------- */
#sec-map::before {
  background:
    linear-gradient(rgba(246, 241, 228, .028) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(246, 241, 228, .028) 1px, transparent 1px) 0 0 / 46px 100%,
    radial-gradient(85% 60% at 50% 40%, rgba(45, 224, 224, .06), transparent 70%);
}

/* ---- CITY — asphalt, with headlight streaks ----------------------- */
#city::before {
  background:
    repeating-linear-gradient(100deg,
      rgba(246, 241, 228, .015) 0 2px, transparent 2px 90px),
    linear-gradient(180deg, rgba(10, 10, 18, .2), rgba(31, 33, 77, .35));
}

/* ---- RIDES — a garage floor: hard light bands from above ---------- */
#ridesSec::before {
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 206, 97, .035) 0 1px, transparent 1px 120px),
    radial-gradient(60% 34% at 50% 0%, rgba(238, 108, 69, .16), transparent 72%);
}

/* ---- RADIO — concentric signal rings ------------------------------ */
#sec-radio::before {
  background:
    repeating-radial-gradient(circle at 50% 46%,
      rgba(139, 92, 246, .05) 0 1px, transparent 1px 58px),
    radial-gradient(60% 50% at 50% 46%, rgba(139, 92, 246, .12), transparent 72%);
}

/* ---- BRANDS — a boardroom wash, cool and corporate ---------------- */
#sec-brands::before {
  background:
    linear-gradient(180deg, rgba(31, 33, 77, .42), transparent 40%,
      rgba(31, 33, 77, .42)),
    radial-gradient(120% 40% at 50% 50%, rgba(80, 54, 111, .22), transparent 70%);
}

/* ---- SERIES — case files under a desk lamp ------------------------ */
#series::before {
  background:
    radial-gradient(46% 40% at 22% 18%, rgba(255, 206, 97, .14), transparent 68%),
    linear-gradient(180deg, transparent, rgba(31, 33, 77, .4));
}

/* ---- WANTED — a paper grain, like a printed poster ---------------- */
#sec-wanted::before {
  background:
    repeating-linear-gradient(45deg,
      rgba(246, 241, 228, .016) 0 1px, transparent 1px 6px),
    radial-gradient(80% 60% at 50% 30%, rgba(238, 108, 69, .14), transparent 72%);
}

/* ---- HEIST — a vault blueprint, cold and technical ---------------- */
#sec-heist::before {
  background:
    linear-gradient(rgba(45, 224, 224, .035) 1px, transparent 1px) 0 0 / 100% 30px,
    linear-gradient(90deg, rgba(45, 224, 224, .035) 1px, transparent 1px) 0 0 / 30px 100%,
    radial-gradient(70% 50% at 50% 50%, rgba(31, 33, 77, .5), transparent 74%);
}

/* ---- TICKER — the sunset returns, brightest on the page ----------- */
#ticker::before {
  background:
    radial-gradient(90% 62% at 50% 46%, rgba(191, 52, 117, .26), transparent 66%),
    radial-gradient(50% 34% at 50% 100%, rgba(255, 206, 97, .16), transparent 70%);
}

/* ---- MANIFESTO — deep night, the city gone quiet ------------------ */
#sec-manifesto::before {
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(80, 54, 111, .3), transparent 66%),
    linear-gradient(180deg, transparent, rgba(6, 4, 14, .6));
}

/* ---- FOOTER — the horizon line, last light -------------------------- */
footer::before {
  background:
    linear-gradient(180deg, transparent, rgba(191, 52, 117, .14) 60%, rgba(238, 108, 69, .1)),
    radial-gradient(70% 100% at 50% 130%, rgba(255, 206, 97, .2), transparent 70%);
}

/* ---- global: every backdrop warms as the page descends ------------- */
section::before, footer::before {
  filter: saturate(calc(1 + var(--dusk, 0) * .35))
          brightness(calc(1 + var(--dusk, 0) * .08));
}

/* the hero paints its own sky in WebGL — never double up on it */
.hero::before { content: none; }

@media (max-width: 700px) {
  /* the fine repeating grids alias badly at small sizes; keep the washes,
     drop the line work */
  #sec-map::before, #sec-heist::before, #ridesSec::before, #city::before {
    background-image: none;
    background: radial-gradient(90% 60% at 50% 40%, rgba(80, 54, 111, .22), transparent 72%);
  }
}


/* ---- polish: zzz-loader-final ---- */
/* ============================================================
   LOADER — FINAL FORM
   The sun disc is gone. The logo is the loading screen.

   The 24 progress bands used to live *inside* the sun, so removing the
   disc without moving them would have deleted the only honest readout
   of how loaded the page actually is. They are re-laid as a horizontal
   segmented bar under the mark — same data, same source (main.js lights
   them from a real asset manifest), a form that reads as a game loading
   bar instead of a decorative circle.

   Loaded last so it wins over polish/loader.css and polish/logo.css.
   ============================================================ */

/* ---- kill the disc ------------------------------------------------ */
#loader .load-sun,
#loader .ld-sunwrap,
#loader .ld-glow,
#loader .ld-sun {
  /* the bands are re-homed below; the disc itself carries no information */
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  position: static !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* ---- the mark becomes the centrepiece ----------------------------- */
#loader .load-box {
  display: grid;
  justify-items: center;
  gap: 2rem;
  position: relative;
}

#loader .brandmark {
  width: min(72vw, 380px) !important;
  filter: drop-shadow(0 24px 60px rgba(191, 52, 117, .5));
  animation: mark-breath 3.6s var(--ease) infinite;
}

/* a warm bloom sits behind the mark — the sunset without the disc */
#loader .load-box::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(120vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 206, 97, .18) 0%,
    rgba(191, 52, 117, .14) 38%,
    transparent 68%);
  pointer-events: none;
  z-index: -1;
}

/* ---- progress: the same 24 bands, re-laid as a bar ---------------- */
#loader .bands {
  display: flex !important;
  flex-direction: row !important;
  gap: 3px !important;
  height: 6px !important;
  width: min(74vw, 380px);
  margin: 0 auto;
}

#loader .bands i {
  flex: 1;
  height: 100%;
  background: rgba(246, 241, 228, .13) !important;
  opacity: 1 !important;
  border-radius: 1px;
  transition: background .22s var(--ease), transform .22s var(--ease);
}

/* main.js adds .on as each manifest asset resolves — real progress */
#loader .bands i.on {
  background: linear-gradient(180deg, var(--sky-4), var(--sky-3)) !important;
  opacity: 1 !important;
  transform: scaleY(1.5);
  box-shadow: 0 0 10px rgba(255, 206, 97, .5);
}

/* ---- readout ------------------------------------------------------ */
#loader .load-meta {
  display: grid;
  justify-items: center;
  gap: .7rem;
}

#loader .load-num {
  font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
  letter-spacing: .06em;
}

#loader .load-tip {
  font-size: .66rem;
  letter-spacing: .34em;
  color: var(--faint);
}

/* ---- exit: the mark lifts, everything else fades ------------------ */
body.ready #loader .brandmark {
  transform: translateY(-30px) scale(1.05);
  opacity: 0;
  transition: transform .66s var(--ease), opacity .5s ease;
}

body.ready #loader .bands,
body.ready #loader .load-meta {
  opacity: 0;
  transition: opacity .34s ease;
}

@media (prefers-reduced-motion: reduce) {
  #loader .brandmark { animation: none; }
  #loader .bands i.on { transform: none; }
}


/* ---- polish: zzzz-prelaunch ---- */
/* ---------- pre-launch notice --------------------------------------
   Stands in for the whole market block while there is no contract.
   Deliberately confident rather than apologetic: the page is not
   missing something, the token simply has not dropped yet. */

#prelaunch {
  margin-top: 2.4rem;
  max-width: 720px;
  border: 1px solid rgba(236, 72, 153, .34);
  background:
    linear-gradient(150deg, rgba(236, 72, 153, .1), transparent 62%),
    var(--asphalt);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  position: relative;
  overflow: hidden;
}

#prelaunch::after {
  /* a slow sweep, so the panel reads as waiting rather than broken */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%,
    rgba(255, 206, 97, .07) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: pl-sweep 4.4s var(--ease) infinite;
  pointer-events: none;
}

@keyframes pl-sweep { to { transform: translateX(100%); } }

#prelaunch .pl-inner { position: relative; z-index: 1; }

#prelaunch .pl-pulse {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sky-4);
  margin-bottom: 1rem;
  box-shadow: 0 0 0 0 rgba(255, 206, 97, .6);
  animation: pl-ping 2.2s infinite;
}

@keyframes pl-ping {
  70%  { box-shadow: 0 0 0 14px rgba(255, 206, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 206, 97, 0); }
}

#prelaunch .pl-title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--bone);
}

#prelaunch .pl-sub {
  margin-top: .9rem;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--dim);
  max-width: 46ch;
}

/* while pre-launch, the buy CTA has nowhere to send anyone */
[data-prelaunch="1"] .btn-buy,
[data-prelaunch="1"] .nav-live .btn { opacity: .45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #prelaunch::after,
  #prelaunch .pl-pulse { animation: none; }
}