:root{
  --bg:#07080a; --bg2:#0b0d11; --surface:#101319; --surface2:#161a21;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --text:#eef1f5; --muted:#8b929c; --faint:#565c66;
  /* Default accent — overridden at runtime by data/site.json > theme.accentRgb */
  --accent-rgb:43,108,255;                 /* vibrant blue */
  --accent:rgb(var(--accent-rgb));
  --accent-dim:rgba(var(--accent-rgb),.14);
  --accent-glow:rgba(var(--accent-rgb),.5);
  --ember-rgb:255,90,54;
  --ember:rgb(var(--ember-rgb)); --ember-glow:rgba(var(--ember-rgb),.5);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* visually hidden but present for search engines + screen readers (e.g. the
   keyword-bearing text inside the hero H1, whose visible slogan is aria-hidden) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the hidden attribute must beat author display rules (grid/flex etc.) */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:'Chakra Petch',sans-serif; font-weight:300;
  line-height:1.6; overflow-x:hidden; position:relative;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(var(--accent-rgb),.10), transparent 60%),
    radial-gradient(700px 500px at 5% 12%, rgba(var(--ember-rgb),.07), transparent 55%);
}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--accent);font-weight:500;
}
/* ---------------- NAV ---------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(7,8,10,.72);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
nav{max-width:var(--maxw);margin:0 auto;padding:5px 28px;display:flex;align-items:center}
/* logo stays left; its auto right-margin pushes every other nav item to the
   right (works on desktop and mobile, whatever the item count) */
#brand{margin-right:auto}
.brand{display:flex;align-items:center;gap:12px;font-family:'Chakra Petch';font-weight:700;
  font-size:1.15rem;letter-spacing:.18em}
.logo-mark{width:80px;height:30px;flex:0 0 auto}
.logo-mark path{stroke:var(--accent)} .logo-mark rect{stroke:var(--ember)}
.brand img{height:80px;width:auto;display:block}
.navlinks{display:flex;gap:34px;align-items:center}
.navlinks a{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:400;transition:color .25s;position:relative}
.navlinks a:hover{color:var(--text)}
.navlinks a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--accent);transition:width .3s}
.navlinks a:not(.nav-cta):hover::after{width:100%}
.nav-cta{border:1px solid var(--line2);padding:9px 18px;border-radius:2px;color:var(--text)!important;
  font-size:.78rem;letter-spacing:.16em;transition:.25s}
.nav-cta:hover{border-color:var(--accent);box-shadow:0 0 24px var(--accent-dim);background:rgba(var(--accent-rgb),.05)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:60;}
.burger span{width:24px;height:2px;background:var(--text);display:block;transition:.3s}
@media(max-width:820px){
  nav{padding:8px 20px}
  .brand img{height:38px}                              /* compact phone header — 80px desktop logo is far too tall */
  .navlinks{display:none}
  .burger{display:flex;padding:12px;}      /* icon stays put, tap target grows to ~48px */
  header.open{background:rgba(7,8,10,.97);backdrop-filter:blur(16px)}  /* bar matches the dropdown */
  header.open .navlinks{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:rgba(7,8,10,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);padding:8px 28px 22px}
  header.open .navlinks a{padding:13px 0;font-size:.9rem}
  /* in the open menu: account becomes a text link, currency a pill row below */
  .navlinks .accountbtn{display:block;width:auto;height:auto;margin:0}
  .navlinks .accountbtn svg{display:none}
  .navlinks .accountbtn-label{display:inline}
  .navlinks #curtoggle{margin:14px 0 4px}
}

/* ---------------- HERO ---------------- */
/* 100svh = visible viewport on mobile (excludes iOS collapsing address bar);
   browsers without svh support keep the 100vh line */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:90px;overflow:hidden}
/* hero image is set at runtime from data/site.json > hero.image — or
   hero.images [list], which crossfades via stacked .hero-slide layers
   (app.js initHeroBg). Slides live INSIDE #hero-bg, so they stay beneath
   the .hero::after gradient overlay and the content. */
.hero-bg{position:absolute;inset:0;z-index:1;background:#0c1118 center/cover no-repeat;}
.hero-slide{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.8s ease}
.hero-slide.on{opacity:1}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,8,10,.94) 0%, rgba(7,8,10,.6) 60%, rgba(7,8,10,.32) 100%),
    radial-gradient(130% 100% at 50% 30%, transparent 50%, var(--bg) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:100%}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  /* stacked hero is taller than the viewport so it's no longer centred —
     clear the fixed header at the top and give the ticker room at the bottom */
  .hero{padding-top:140px;padding-bottom:56px}
}
.hero h1{
  font-weight:700;font-size:clamp(2.9rem,7vw,5.4rem);line-height:.98;letter-spacing:-.01em;
  margin:22px 0 24px;
}
.hero h1 .glow{color:var(--accent);text-shadow:0 0 40px var(--accent-glow)}
.hero p.lead{font-size:1.12rem;color:var(--muted);max-width:30ch;font-weight:300;margin-bottom:36px}
.cta-row{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:2px;
  font-family:'Roboto';font-size:.82rem;letter-spacing:.1em;font-weight:500;cursor:pointer;
  transition:.28s;border:1px solid transparent}
.btn-primary{background:var(--ember);color:#0a0a0a}
.btn-primary:hover{box-shadow:0 0 34px var(--ember-glow);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.06);box-shadow:0 0 26px var(--accent-dim)}
.btn .arrow{transition:transform .28s}
.btn:hover .arrow{transform:translateX(4px)}

/* telemetry HUD */
.hud{
  background:linear-gradient(180deg,rgba(22,26,33,.82),rgba(11,13,17,.82));
  border:1px solid var(--line);border-radius:8px;padding:22px;backdrop-filter:blur(8px);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  container-type:inline-size;   /* lets the dyno legend respond to the HUD's own width */
}
.hud-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.hud-top .lbl{font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.24em;color:var(--faint);text-transform:uppercase}
.live{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono';font-size:.68rem;color:var(--accent);letter-spacing:.18em}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* virtual dyno (current hero view) */
.dyno-canvas{display:block;width:100%;height:238px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
/* Legend: always ONE row of four. Column widths are fr-proportioned to each
   item's natural text width (Timing widest, RPM narrowest) so they're set by
   the container, never by the live values — which change width every frame and
   must not reflow the row. Font, swatch and gaps all scale with the HUD's own
   width (cqw) so the row fits at any screen size; each scaled value carries a
   px fallback on the line above for browsers without container-query units. */
.dyno-legend{display:grid;grid-template-columns:.75fr 1.1fr 1.15fr .95fr;margin-top:14px;
  column-gap:10px;column-gap:clamp(6px,2cqw,16px)}
.dl-item{display:flex;align-items:center;min-width:0;white-space:nowrap;
  gap:5px;gap:clamp(3px,1.2cqw,5px);
  font-family:'Roboto';color:var(--faint);text-transform:uppercase;letter-spacing:.14em;
  font-size:.64rem;font-size:clamp(.5rem,2.45cqw,.64rem)}
.dl-item i{flex:none;height:3px;border-radius:3px;background:var(--c);box-shadow:0 0 8px var(--c);
  width:14px;width:clamp(8px,3.4cqw,14px)}
.dl-item b{color:var(--text);font-weight:500;min-width:4.5ch;font-variant-numeric:tabular-nums}

/* gauges for the archived "Live Datastream" HUD (saved/datalogger-hud/) —
   kept so the view can be dropped back in without touching CSS */
.gauges{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:6px;overflow:hidden}
.g{background:var(--surface);padding:16px 16px 14px}
.g .gl{font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
.g .gv{font-family:'JetBrains Mono';font-weight:700;font-size:1.7rem;margin-top:4px;letter-spacing:-.02em}
.g .gu{font-size:.72rem;color:var(--muted);margin-left:4px;font-weight:400}
.g .bar{height:3px;background:rgba(255,255,255,.06);border-radius:3px;margin-top:10px;overflow:hidden}
.g .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent),#fff 40%));border-radius:3px;transition:width .3s}
.g.redline .gv{color:var(--ember)}
.g.redline .bar i{background:linear-gradient(90deg,var(--ember),color-mix(in srgb,var(--ember),#fff 40%))}

/* ---------------- TICKER ---------------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;overflow:hidden;white-space:nowrap;background:var(--bg2);position:relative;z-index:2}
.ticker-track{display:inline-block;animation:scroll 38s linear infinite}
.ticker span{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.14em;color:var(--faint);margin:0 70px}
.ticker span b{color:var(--accent);font-weight:500}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- SECTION SHELL ---------------- */
section.block{padding:120px 0;position:relative;z-index:2}
/* #caps has a tight 20px top pad, so anchor jumps must stop short of the
   fixed header (~116px with the 80px logo) or the nav covers its heading */
#caps{scroll-margin-top:120px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:30px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:-.01em;line-height:1.05;margin-top:12px}
.sec-head p{color:var(--muted);max-width:34ch;font-weight:300}

/* ---------------- FILTERS ---------------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filter-tab{font-family:'Roboto';font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line);padding:9px 16px;border-radius:2px;cursor:pointer;transition:.25s}
.filter-tab:hover{color:var(--text);border-color:var(--line2)}
/* selected tab is "inverted" like the card tags: solid accent, near-black text */
.filter-tab.on{color:#0a0a0a;border-color:var(--accent);background:var(--accent);box-shadow:0 0 18px var(--accent-dim)}
.empty{color:var(--muted);font-family:'Roboto';font-size:.85rem;padding:40px 4px}

/* ---------------- CAROUSEL ---------------- */
.carousel{position:relative}
.viewport{overflow:hidden}
.track{display:flex;gap:24px;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.card{flex:0 0 calc((100% - 48px)/3);background:var(--surface);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;transition:.35s;display:flex;flex-direction:column}
@media(max-width:900px){.card{flex:0 0 calc((100% - 24px)/2)}}
@media(max-width:600px){.card{flex:0 0 100%}}
.card:hover{border-color:var(--line2);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.card-media{height:250px;position:relative;overflow:hidden;background:linear-gradient(135deg,#12161c,#0a0c10)}
.card-media .scan{position:absolute;inset:0;opacity:.5;}
.card-media .glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Roboto';font-size:.66rem;color:rgba(var(--accent-rgb),.35);letter-spacing:.1em;
  line-height:1.5;text-align:center;padding:18px;white-space:pre;transition:.4s}
.card:hover .card-media .glyph{color:rgba(var(--accent-rgb),.6);transform:scale(1.04)}
/* product photo (products.json > image) — fills the tile; slightly desaturated
   + dimmed so photos sit in the dark theme, lifting to full on hover */
.card-media .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.88);transition:.4s}
.card:hover .card-media .pimg{filter:saturate(1) brightness(1);transform:scale(1.04)}
/* tags are "inverted": solid category colour, near-black text (matches .btn-primary) */
.tag{position:absolute;top:14px;left:14px;font-family:'Roboto';font-size:.6rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border-radius:2px;z-index:2;color:#0a0a0a}
.tag.digital{background:var(--accent)}
.tag.physical{background:var(--ember)}
.tag.service{background:var(--text)}
.card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.16rem;font-weight:600;letter-spacing:.01em}
.card-body .desc{color:var(--muted);font-size:.9rem;font-weight:300;margin:8px 0 18px;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:12px}
.price{font-family:'Roboto';font-weight:700;font-size:1.25rem;white-space:nowrap}
.price small{color:var(--faint);font-size:.7rem;font-weight:400;display:block;letter-spacing:.1em}
/* styled checkout button — our own class so we control the click (no double-binding) */
.buybtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line2);color:var(--text);
  padding:11px 18px;border-radius:2px;font-family:'Roboto';font-size:.74rem;
  letter-spacing:.1em;font-weight:500;transition:.26s;white-space:nowrap}
.buybtn:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.07);box-shadow:0 0 22px var(--accent-dim)}

/* coming-soon products ("available": false in products.json) — amber accents */
.tag.soonbadge{left:auto;right:14px;background:#ffc857}   /* inherits inverted .tag text colour */
.soon-flag{color:#ffc857}
.card.soon .glyph,.card.soon .pimg,
.card.soon:hover .glyph,.card.soon:hover .pimg{                /* media stays dimmed, no hover lift */
  opacity:.45;transform:none;color:rgba(var(--accent-rgb),.35);filter:saturate(.6) brightness(.8)}
.buybtn[disabled]{opacity:.4;cursor:default}
.buybtn[disabled]:hover{border-color:var(--line2);background:transparent;box-shadow:none}
.soon-note{display:inline-block;font-family:'Roboto';font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.7;color:#ffc857;background:rgba(255,200,87,.07);
  border:1px solid rgba(255,200,87,.32);border-radius:2px;padding:14px 18px}

.carousel-nav{display:flex;gap:10px}
.cbtn{width:46px;height:46px;border:1px solid var(--line2);background:transparent;color:var(--text);
  border-radius:2px;cursor:pointer;font-size:1.1rem;transition:.25s;display:flex;align-items:center;justify-content:center}
.cbtn:hover{border-color:var(--accent);box-shadow:0 0 20px var(--accent-dim)}
.cbtn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none;border-color:var(--line)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:34px}
.dot-i{width:24px;height:3px;background:var(--line2);border-radius:3px;cursor:pointer;transition:.3s;border:none;padding:0}
.dot-i.on{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}

/* ---------------- CAPABILITY ---------------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(max-width:760px){.caps{grid-template-columns:1fr}}
.cap{background:var(--surface);padding:38px 30px;transition:.3s}
.cap:hover{background:var(--surface2)}
.cap .n{font-family:'Roboto';color:var(--accent);font-size:.78rem;letter-spacing:.2em}
.cap h4{font-size:1.3rem;font-weight:600;margin:16px 0 10px}
.cap p{color:var(--muted);font-size:.92rem;font-weight:300}

/* ---------------- CTA BAND ---------------- */
.band{position:relative;z-index:2;text-align:center;padding:110px 0;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 320px at 50% 0%,rgba(var(--accent-rgb),.12),transparent 70%)}
.band h2{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.01em;position:relative}
.band p{color:var(--muted);margin:18px auto 36px;max-width:46ch;position:relative}
.band .btn{margin:0 auto}

/* ---------------- FOOTER ---------------- */
footer{border-top:1px solid var(--line);padding:60px 0 40px;position:relative;z-index:2;background:var(--bg2)}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.foot-col{max-width:280px}
.foot-col h5{font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.2em;color:var(--faint);
  text-transform:uppercase;margin-bottom:16px}
.foot-col a{display:block;color:var(--muted);font-size:.9rem;margin-bottom:10px;transition:.2s;font-weight:300}
.foot-col a:hover{color:var(--accent)}
.foot-col p{color:var(--muted);font-size:.88rem;font-weight:300}
.foot-brand{margin-bottom:14px}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;
  border-top:1px solid var(--line);flex-wrap:wrap;gap:14px}
.foot-bot span{font-family:'JetBrains Mono';font-size:.72rem;color:var(--faint);letter-spacing:.08em}

/* ---------------- SHOP PAGE (shop.html) ---------------- */
/* banner reuses the hero treatment (bg image + overlay + glow headline) at reduced height */
.hero--page{min-height:0;padding-top:170px;padding-bottom:64px}
.hero--page h1{font-size:clamp(2.4rem,5vw,4rem)}
.shop-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.shop-controls .filters{margin-bottom:0}
.shop-search input{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.1em;color:var(--text);
  background:var(--surface);border:1px solid var(--line2);border-radius:2px;padding:11px 16px;
  width:min(320px,80vw);outline:none;transition:.25s}
.shop-search input::placeholder{color:var(--faint);letter-spacing:.14em}
.shop-search input:focus{border-color:var(--accent);box-shadow:0 0 18px var(--accent-dim)}
#shop-count{font-family:'JetBrains Mono';font-size:.7rem;color:var(--faint);letter-spacing:.16em;margin-bottom:24px}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.shop-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .shop-grid{grid-template-columns:1fr;gap:18px}
  .shop-search{width:100%}
  .shop-search input{width:100%}
}

/* ---------------- RESOURCES PAGE (resources.html) ---------------- */
/* hub view: section cards reuse the product card look */
.res-cards .price{font-size:1.15rem}
.res-cards .card-media{height:150px}
/* section view: the file list */
.res-list{display:grid;gap:14px;}
.res-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;transition:.25s}
.res-row:hover{border-color:var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.res-info h3{font-size:1.02rem;font-weight:500}
.res-info p{color:var(--muted);font-size:.88rem;font-weight:300;margin:4px 0 8px;max-width:64ch}
.res-info small{font-family:'Roboto';font-size:.64rem;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.res-btn{flex:none}
/* copy-style entry: row + collapsible XML panel stacked in one grid cell */
.res-item{display:block;min-width:0}
.res-item .res-row{transition:.25s}
.res-code{margin-top:10px;min-width:0}
.res-code:empty{display:none}
.res-note{font-family:'JetBrains Mono';font-size:.7rem;color:var(--faint);letter-spacing:.08em;margin-top:22px}
.res-note:empty{display:none}
@media(max-width:600px){
  .res-row{flex-direction:column;align-items:flex-start;gap:12px}
  .res-btn{align-self:stretch;justify-content:center}
}

/* ---------------- ACCOUNT PAGE (account.html) ---------------- */
.account-card{max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px 26px}
.account-card .popt{margin-bottom:18px}
.account-card .btn{width:100%;justify-content:center}
.account-hint{color:var(--muted);font-size:.85rem;font-weight:300;margin-top:18px;line-height:1.6}
.account-msg{margin-top:14px}
.account-code{font-family:'JetBrains Mono';font-size:1.4rem;letter-spacing:.5em;text-align:center;padding-left:.5em}
.account-back{background:none;border:none;color:var(--faint);font-family:'JetBrains Mono';font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;margin-top:16px;transition:color .2s;padding:0}
.account-back:hover{color:var(--accent)}
.account-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:30px}
.account-bar .account-back{margin-top:0}
.account-who{font-family:'JetBrains Mono';font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.account-who b{color:var(--text);font-weight:500}
.account-h2{font-size:1.3rem;font-weight:600;margin-bottom:18px}
.account-order{margin-bottom:22px}
.account-order-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.ao-date{font-family:'JetBrains Mono';font-size:.78rem;color:var(--muted);letter-spacing:.06em}
.ao-status{font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  padding:3px 9px;border-radius:2px;background:rgba(61,220,132,.12);color:#3ddc84;border:1px solid rgba(61,220,132,.3)}
.ao-status.ao-refunded{background:rgba(var(--ember-rgb),.12);color:var(--ember);border-color:rgba(var(--ember-rgb),.3)}
.ao-total{margin-left:auto;font-family:'Roboto';font-size:1.05rem}
.account-order .order-panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 22px 14px;max-width:none}
.account-order .order-line{flex-wrap:wrap}
.acct-dl{flex:0 0 100%;margin-top:8px;font-family:'Roboto';font-size:.78rem;letter-spacing:.08em;
  color:var(--accent);transition:color .2s}
.acct-dl:hover{color:var(--text)}
.order-invoice{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.order-invoice .acct-dl{margin-top:0}
.account-keys{margin-top:46px;padding-top:30px;border-top:1px solid var(--line)}

/* ---------- patch portal ---------- */
/* maintenance notice (portalPage.maintenance.enabled) — replaces the whole portal */
.portal-maint{max-width:60ch;background:var(--surface);
  border-left:3px solid var(--accent);border-radius:8px;padding:28px 30px}
.portal-maint h2{font-size:1.25rem;font-weight:600;letter-spacing:.01em;margin:0 0 12px}
.portal-maint p{font-family:'Roboto';color:var(--muted);font-size:.95rem;font-weight:300;
  line-height:1.75;margin:0}
.portal-maint .btn{margin-top:22px}
.portal-section{display:flex;align-items:stretch;justify-content:space-between;gap:40px;flex-wrap:wrap;
  background:var(--surface);border-radius:5px;padding:22px 26px;margin-bottom:8px}
/* left column: how-credits-work blurb up top, balance anchored at the bottom */
.portal-balance{display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  flex:1 1 320px;max-width:52ch}
.portal-credits-desc{font-family:'Roboto';color:var(--muted);font-size:.95rem;line-height:1.75;margin:0;white-space:pre-line}
/* "How it works" step-flow */
.portal-hiw{margin:26px 0 26px}
.portal-hiw-flow{display:flex;align-items:stretch;gap:8px}
.portal-hiw-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;background:var(--surface);border-radius:6px;padding:14px}
.portal-hiw-head{display:flex;align-items:center;gap:8px}
.portal-hiw-num{flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:var(--accent);color:#0a0a0a;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.portal-hiw-steptitle{font-size:.9rem;color:var(--text);font-weight:600}
.portal-hiw-steptext{margin:0;font-family:'Roboto';font-size:.78rem;line-height:1.5;color:var(--muted)}
.portal-hiw-arrow{display:flex;align-items:center;color:var(--accent);font-size:1.3rem;font-weight:700;flex:0 0 auto}
@media(max-width:760px){
  .portal-hiw-flow{flex-direction:column}
  .portal-hiw-arrow{transform:rotate(90deg);align-self:center;padding:2px 0}
}
.portal-balance-line{display:flex;align-items:baseline;gap:14px}
.portal-balance-label{font-family:'Roboto';font-size:1.5rem;font-weight:800;text-transform: uppercase;}
.portal-balance-num{font-family:'Roboto';font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1}
.portal-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.portal-buybox{display:flex;flex-direction:column;gap:12px;min-width:min(450px,100%);background: #080a0d; padding:25px;border-radius:6px;width:50%;}
/* section label above the controls — same Roboto voice as the balance label,
   scaled down a step for hierarchy */
.portal-buy-label{font-family:'Roboto';font-size:.85rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
/* stepper + buy button share one 48px control line */
.portal-buy-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.portal-buy-row .qty{background:var(--bg2)}
.portal-buy-row .btn{height:48px;padding:0 26px}
/* the input lives INSIDE the .qty frame — no border/bg of its own */
.portal-qty{width:56px;height:48px;text-align:center;background:transparent;border:none;outline:none;
  color:var(--text);font-family:'JetBrains Mono';font-size:1rem;appearance:textfield;-moz-appearance:textfield}
.portal-qty:focus{color:var(--accent)}
.portal-qty::-webkit-outer-spin-button,.portal-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.portal-calc{display:flex;flex-direction:column;gap:4px;font-size:.9rem;}
.portal-calc-row{display:flex;justify-content:space-between;gap:24px;color:var(--muted)}
.portal-calc-row .amt{font-family:'Roboto'}
.portal-strike{text-decoration:line-through;opacity:.55}
.portal-disc{color:var(--accent)}
.portal-total{color:var(--text);font-size:1rem;border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.portal-total .amt{color:var(--accent)}
.portal-tierhint{color:var(--faint);font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.06em}
.portal-buy-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.portal-sm{padding:7px 14px;border-radius:2px;font-family:'Roboto';font-size:.72rem;letter-spacing:.08em;
  font-weight:500;cursor:pointer;transition:.25s}
.portal-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.portal-ghost:hover{border-color:var(--accent);color:var(--accent)}
.portal-voucher{display:flex;gap:12px;margin:0;max-width:440px}
.portal-voucher .popt-input{flex:1}
.portal-banner{margin:0;padding:10px 14px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:6px;
  background:rgba(var(--accent-rgb),.08);color:var(--text);font-size:.85rem}
/* available-patches strip — small horizontal blocks; coming-soon ones dimmed */
.portal-patches{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.portal-patch{flex:1 1 260px;max-width:360px;display:flex;flex-direction:column;gap:8px;text-align:left;
  background:var(--surface);border:1px solid transparent;border-radius:5px;padding:18px 20px;
  color:var(--text);font:inherit;cursor:pointer;transition:border-color .25s, box-shadow .25s}
a.portal-patch:hover{border-color:var(--accent);box-shadow:0 0 24px var(--accent-dim)}
.portal-patch-soon{cursor:default;opacity:.55}
.portal-patch-name{font-weight:600;letter-spacing:.03em}
.portal-patch-blurb{color:var(--muted);font-size:.85rem;line-height:1.6;margin:0;flex:1}
.portal-patch-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.portal-patch-cost{font-family:'Roboto';color:var(--accent);font-size:.9rem}
.portal-patch-go{font-family:'Roboto';font-size:.75rem;letter-spacing:.08em;color:var(--muted);transition:color .25s}
a.portal-patch:hover .portal-patch-go{color:var(--accent)}
.portal-patch-badge{font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line2);border-radius:3px;padding:3px 8px}
.portal-newlic{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.portal-newlic-hint{color:var(--muted);font-size:.9rem}
.portal-tablewrap{overflow-x:auto;background:var(--surface);border-radius:5px;margin-bottom:14px}
.portal-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:720px}
.portal-table th{font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.portal-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.portal-table tbody tr:last-child td{border-bottom:none}
/* status legend under Your Patches — collapsible <details>; each row explains a job-state chip */
.portal-status-key{margin:0 0 30px;background:var(--surface2);border:1px solid var(--line);border-radius:8px}
.portal-status-keyhead{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:9px;
  padding:13px 17px;font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.portal-status-keyhead::-webkit-details-marker{display:none}
.portal-status-keyhead::before{content:"▸";font-size:.72rem;color:var(--muted);transition:transform .15s ease}
.portal-status-key[open] .portal-status-keyhead::before{transform:rotate(90deg)}
.portal-status-key[open] .portal-status-keyhead{color:var(--muted)}
.portal-status-keybody{display:grid;gap:11px;padding:3px 17px 16px}
.portal-status-keyitem{display:flex;align-items:flex-start;gap:11px;font-size:.85rem;color:var(--muted);line-height:1.5}
.portal-status-keyitem .ao-status{flex:none;margin-top:1px;min-width:66px;text-align:center}
.portal-mono{font-family:'JetBrains Mono';font-size:.8rem}
.portal-key{font-family:'JetBrains Mono';letter-spacing:.14em;color:var(--accent)}
.portal-keylist{display:flex;flex-direction:column;gap:6px;min-width:240px}
.portal-keyrow{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.portal-keyrow>span{color:var(--muted);font-size:.82rem}
.portal-dim{color:var(--faint)}
.portal-nick{background:none;border:none;padding:0;font:inherit;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.portal-nick:empty::before{content:"—";color:var(--faint)}
.portal-nick-pen{color:var(--faint);font-size:.75rem;opacity:0;transition:opacity .15s}
.portal-nick:hover .portal-nick-pen{opacity:1}
.portal-dl .acct-dl{flex:0 0 auto;margin:0 12px 0 0}
.portal-retry{margin-left:10px}
.portal-card{max-width:560px;margin-top:14px}
.portal-card .popt{margin-bottom:18px}
/* the New License redeem dialog — native <dialog>, centred by the UA */
.portal-modal{margin:auto;background:var(--surface);border:1px solid var(--surface);border-radius:10px;color:var(--text);
  padding:26px;width:min(560px,calc(100vw - 40px));max-height:min(85vh,760px);overflow-y:auto;
  box-shadow:0 40px 120px rgba(0,0,0,.6)}
.portal-modal::backdrop{background:rgba(7,8,10,.68);backdrop-filter:blur(5px)}
.portal-modal .popt{margin-bottom:18px}
.portal-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.portal-modal-head h3{font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.portal-modal-close{background:none;border:none;color:var(--muted);font-size:1.5rem;line-height:1;
  cursor:pointer;padding:2px 8px;transition:color .2s}
.portal-modal-close:hover{color:var(--text)}
.portal-picklist{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:6px;padding:6px 12px}
.portal-pick{display:flex;align-items:center;gap:12px;padding:9px 2px}
.portal-pick input{accent-color:var(--accent);width:16px;height:16px;flex:none}
.portal-pick span{flex:1}
.portal-pick b{font-family:'Roboto';font-size:.85rem;color:var(--accent)}
.portal-pick-soon{opacity:.5;cursor:default}
.portal-pick-soon b{color:var(--faint)}
.portal-modal-sec{margin:20px 0;padding-top:16px;border-top:1px solid var(--line)}
.portal-modal-sec>.popt-label{margin-bottom:12px}
.portal-redeem-total{margin:18px 0 14px}
/* the modal has its own section headings — hide the options renderer's built-in legend */
.portal-modal .popts-legend{display:none}
.portal-cta-note{color:var(--faint);font-size:.9rem;line-height:1.6;margin-bottom:14px}
#portal-pe{margin:6px 0 0;max-width:560px;padding-bottom:10px;}
#portal-pay{justify-content:center;min-width:200px}
.ao-status.ao-queued,.ao-status.ao-processing{background:rgba(var(--accent-rgb),.1);color:var(--accent);border-color:rgba(var(--accent-rgb),.3)}
.ao-status.ao-failed{background:rgba(var(--ember-rgb),.12);color:var(--ember);border-color:rgba(var(--ember-rgb),.3)}
/* flagged / held-for-review — amber, distinct from green "Ready" and orange "Failed" */
.ao-status.ao-review{background:rgba(240,180,64,.13);color:#f0b440;border-color:rgba(240,180,64,.34)}
/* loading state while the session is being checked */
.account-loading{display:flex;align-items:center;justify-content:center;gap:13px;padding:60px 0;
  color:var(--muted);font-family:'JetBrains Mono';font-size:.82rem;letter-spacing:.08em}
.acct-spinner{width:22px;height:22px;flex:none;border:2px solid var(--line2);border-top-color:var(--accent);
  border-radius:50%;animation:acct-spin .7s linear infinite}
@keyframes acct-spin{to{transform:rotate(360deg)}}
/* dedicated sign-in view (logged-out): a centered, headed card */
.signin-wrap{display:flex;justify-content:center;padding:4px 0 24px}
.signin-card{width:100%;max-width:460px}
.signin-head{margin-bottom:22px}
.signin-step{font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.24em;color:var(--accent);
  text-transform:uppercase;margin-bottom:12px}
.signin-head h2{font-size:1.45rem;font-weight:600;letter-spacing:-.01em;margin-bottom:9px}
.signin-head p{color:var(--muted);font-size:.88rem;font-weight:300;line-height:1.6}
.signin-card .account-hint{margin-top:16px}
.portal-link{color:var(--accent);font-weight:500;transition:.2s}

/* ---------------- PRODUCT PAGE (product.html) ---------------- */
.backlink{display:inline-block;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;
  color:var(--faint);text-transform:uppercase;margin-bottom:26px;transition:.25s}
.backlink:hover{color:var(--accent)}
/* Two columns: image + configure/buy stacked on the left, price + description
   on the right. Areas (not source order) drive placement, so it reflows on
   mobile to image → price/description → configure/buy — the price never ends
   up below the add-to-cart button. */
.product-grid{--media-h:350px;display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;margin-bottom:74px;
  grid-template-areas:"image info" "buy info";grid-template-rows:var(--media-h) auto}
/* row 1 is pinned to the media height so a tall description (info, which spans
   both rows) can't inflate it — that inflation is what left the buy button
   floating mid-column on products with no config box. All slack now falls into
   row 2 (below the buy area), so the button always hugs directly under the
   image, or under the options box when one is present. */
.product-art{grid-area:image}
.product-info{grid-area:info}
.product-buy{grid-area:buy}
@media(max-width:820px){
  .product-grid{grid-template-columns:1fr;gap:28px;grid-template-areas:"image" "info" "buy"}
}
.product-art{height:var(--media-h);border:1px solid var(--line);border-radius:10px}
.product-art .glyph{font-size:.8rem}
.product-art .pimg{filter:saturate(.95) brightness(.96)}   /* hero photo: barely dimmed */

/* product image gallery — stacked crossfading layers (products.json > images),
   driven by initProductGallery: auto-advance until the arrows/dots are used */
.pgallery{position:absolute;inset:0}
.pgallery .pimg{opacity:0;transition:opacity .6s ease}
.pgallery .pimg.on{opacity:1}
.pg-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem;line-height:1;padding-bottom:3px;
  background:rgba(7,8,10,.55);border:1px solid var(--line2);color:var(--text);backdrop-filter:blur(4px);transition:.25s}
.pg-btn:hover{border-color:var(--accent);box-shadow:0 0 16px var(--accent-dim)}
.pg-prev{left:12px}
.pg-next{right:12px}
.pg-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:4}
.pg-dots .dot-i{box-shadow:0 1px 5px rgba(0,0,0,.7)}
.product-info .price{font-size:1.9rem;margin-bottom:18px}
/* optional per-product announcement pill (products.json > announcement) — only
   rendered when the field is set; sits between the price and the description */
.pann{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 13px;
  font-family:'Roboto';font-weight:500;font-size:.8rem;letter-spacing:.02em;color:var(--ember);
  background:rgba(var(--ember-rgb),.11);border:1px solid rgba(var(--ember-rgb),.34);border-radius:999px}
.pann::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 3px rgba(var(--ember-rgb),.22)}
.pdesc{color:var(--muted);font-family:'Roboto';font-weight:300;max-width:62ch;margin-bottom:32px;white-space:pre-line;text-align:justify;}
.pdesc b{color:var(--accent);font-weight:500}
.pdesc a{color:var(--ember);font-weight:500}
/* P1-1: real section headings, styled inline to match the bold labels they
   replace so the pre-line layout is unchanged (semantic upgrade, no visual shift) */
.pdesc h2,.pdesc h3,.pdesc h4{display:inline;font-size:inherit;font-weight:500;color:var(--accent);margin:0;line-height:inherit}
/* bulleted / numbered lists in descriptions. The global reset (*{padding:0})
   strips list indentation and hides the markers, and .pdesc's pre-line/justify
   leak into items (blank lines between <li>, ragged text). Reset white-space and
   restore an indented, evenly-spaced list. */
.pdesc ul,.pdesc ol{white-space:normal;margin:12px 0 20px;padding-left:1.6em}
.pdesc ul{list-style:disc}
.pdesc ol{list-style:decimal}
.pdesc li{margin-bottom:9px;padding-left:.35em;line-height:1.65;text-align:left}
.pdesc li:last-child{margin-bottom:0}

/* product options form — rendered from products.json > attributes */
.popts{display:grid;gap:16px;margin:0 0 30px;padding:20px 22px;
  background:rgba(255,255,255,.02);border-radius:8px}
.popts-legend{font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.24em;color:var(--faint);text-transform:uppercase}
.popt-label{display:block;font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.popt-label .req,.popt-checkrow .req{color:var(--ember);font-style:normal}
.popt-input{width:100%;font-family:'JetBrains Mono';font-size:.82rem;letter-spacing:.04em;color:var(--text);
  background:var(--surface);border:1px solid var(--line2);border-radius:2px;padding:11px 14px;
  outline:none;transition:.25s;color-scheme:dark}
.popt-input::placeholder{color:var(--faint);letter-spacing:.1em}
.popt-input:focus{border-color:var(--accent);box-shadow:0 0 18px var(--accent-dim)}
select.popt-input{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238b929c' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
select.popt-input option{background:var(--surface);color:var(--text)}
.popt-help{display:block;color:var(--faint);font-size:.72rem;font-weight:300;margin-top:6px;line-height:1.5}
.popt-checkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;
  font-family:'Roboto';font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.popt-checkrow:hover{color:var(--text)}
.popt-checkrow input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex:none}
.popt-checkrow .popt-help{flex-basis:100%;margin:0 0 0 26px;text-transform:none;letter-spacing:normal}
.popt-file{padding:9px 12px;cursor:pointer}
.popt-file::file-selector-button{font-family:'Roboto';font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);background:rgba(var(--accent-rgb),.12);border:1px solid var(--line2);border-radius:2px;
  padding:7px 14px;margin-right:12px;cursor:pointer;transition:.25s}
.popt-file::file-selector-button:hover{border-color:var(--accent);box-shadow:0 0 14px var(--accent-dim)}
.popt-file-status{display:block;font-family:'JetBrains Mono';font-size:.7rem;margin-top:6px;color:var(--muted)}
.popt-file-status:empty{display:none}
.popt-file-status.ok{color:#3ddc84}
.popt-file-status.err{color:var(--ember)}
.popt-missing{border-color:var(--ember)!important;box-shadow:0 0 14px rgba(var(--ember-rgb),.25)}
.popt-checkrow input.popt-missing{outline:1px solid var(--ember);outline-offset:2px}
.popt-error{font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.08em;color:var(--ember);margin:0;text-wrap: wrap;}
/* type:"iframe" option — embedded configurator (e.g. shift-point GUI). The
   frame auto-sizes via postMessage (bindOptionWidgets); the summary line below
   echoes the captured value so the customer sees exactly what's being ordered. */
.popt-widget{display:block}
.popt-frame{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg2);
  display:block;color-scheme:dark}
.popt-widget-summary{font-family:'JetBrains Mono';font-size:.68rem;line-height:1.6;color:var(--muted);
  margin-top:10px;word-break:break-word}
.popt-widget-summary:empty{display:none}
/* placement:"description" — the tool sits at the bottom of the description; the
   configure section shows this compact auto-filled confirmation chip instead. */
.popt-code{display:flex;align-items:center;gap:9px;min-height:46px;padding:11px 13px;border-radius:4px;
  border:1px dashed var(--line2);background:rgba(255,255,255,.02);
  font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.02em;color:var(--faint);transition:.2s}
.popt-code::before{content:"○";font-size:.8rem;flex:none}
.popt-code.has-value{border-style:solid;border-color:rgba(var(--accent-rgb),.5);background:var(--accent-dim);color:var(--text)}
.popt-code.has-value::before{content:"✓";color:var(--accent);font-weight:700}
.popt-jump{color:var(--accent);font-weight:500}
.popt-jump:hover{text-decoration:underline}
/* the configurator injected into the description column */
.product-widget{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:96px}
.product-widget .popts-legend{display:block;margin-bottom:6px}
.product-widget-help{color:var(--muted);font-weight:300;font-size:.92rem;line-height:1.6;
  max-width:64ch;margin:0 0 18px}

/* ---------- RAX patch picker (rax-patches.html) ----------
   ROM-ID dropdown -> copy-able XML render. No download links. */
.rax-intro{margin:0 0 28px;color:var(--muted);font-family:'Roboto';font-weight:300;line-height:1.7;}
.rax-intro:empty{display:none}
.rax-intro p{margin:0 0 12px}
.rax-intro p:last-child{margin-bottom:0}
.rax-intro b{color:var(--text);font-weight:600}
.rax-intro a{color:var(--accent)}
.rax-intro hr{border:none;border-top:1px solid var(--line);margin:18px 0}
/* P1-1: patch-intro section headings, inline to match the <br> flow */
.rax-intro h2,.rax-intro h3,.rax-intro h4{display:inline;font-size:inherit;font-weight:600;color:var(--accent);margin:0;line-height:inherit}
.rax-picker{max-width:520px;margin:0 0 30px}
.rax-picker .popt-label{margin-bottom:9px;font-size:.74rem}
.rax-hint{color:var(--muted);font-family:'JetBrains Mono';font-size:.84rem;letter-spacing:.02em;
  padding:30px 4px;line-height:1.6}
.rax-patch{max-width:920px}
.rax-patch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.rax-patch-head h2{font-size:1.35rem;letter-spacing:-.01em}
.rax-meta{display:block;margin-top:8px;font-family:'JetBrains Mono';font-size:.74rem;
  color:var(--muted);letter-spacing:.04em}
.rax-desc{color:var(--muted);font-weight:300;line-height:1.7;max-width:70ch;margin:0 0 20px}
.rax-notes{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:6px;padding:16px 20px;margin:0 0 22px;max-width:70ch}
.rax-notes h4{font-family:'Roboto';font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px}
.rax-notes ul{margin:0;padding-left:18px}
.rax-notes li{color:var(--muted);font-size:.9rem;font-weight:300;line-height:1.7}
.rax-codewrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg2);
  min-width:0;max-width:100%}
.rax-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.rax-file{font-family:'JetBrains Mono';font-size:.72rem;color:var(--muted);letter-spacing:.03em;
  word-break:break-all}
.rax-copy{padding:8px 16px;font-size:.74rem;flex:none}
.rax-copy.ok{border-color:var(--accent);background:var(--accent-dim);color:var(--text);
  box-shadow:0 0 18px var(--accent-dim)}
.rax-code{margin:0;padding:18px 20px;max-height:560px;overflow:auto;
  font-family:'JetBrains Mono';font-size:.78rem;line-height:1.6;color:var(--text);
  white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.rax-code code{font-family:inherit;color:inherit;white-space:inherit;background:none;padding:0}
.rax-howto{color:var(--faint);font-size:.82rem;font-weight:300;line-height:1.7;margin:18px 0 0;max-width:70ch}
.rax-howto a{color:var(--accent)}
@media(max-width:640px){
  .rax-patch-head{flex-direction:column}
  .rax-code{font-size:.72rem}
}

/* quantity stepper + add-to-cart row (product page) */
.buy-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.qbtn{width:42px;height:48px;background:transparent;border:none;color:var(--text);font-size:1.1rem;
  cursor:pointer;transition:.2s;font-family:'JetBrains Mono'}
.qbtn:hover{background:rgba(var(--accent-rgb),.08);color:var(--accent)}
.qval{min-width:36px;text-align:center;font-family:'JetBrains Mono';font-size:.92rem}

/* ---------------- CART (cart.js injects the markup) ---------------- */
.cartbtn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:transparent;border:none;color:var(--muted);cursor:pointer;transition:color .25s;margin-left:10px}
.cartbtn:hover{color:var(--text)}
.cartbtn svg{width:21px;height:21px}
/* account icon button — injected next to the cart, same look */
.accountbtn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:transparent;border:none;color:var(--muted);cursor:pointer;transition:color .25s;margin-left:10px}
.accountbtn:hover{color:var(--text)}
.accountbtn svg{width:21px;height:21px}
.accountbtn + .cartbtn{margin-left:4px}   /* tighten the account+cart icon pair */
/* account label — hidden while it's an icon in the desktop bar; shown as
   "Account" text once relocated into the burger menu (see setupNavControls) */
.accountbtn-label{display:none}
/* currency toggle (USD/NZD) — segmented pill in the nav, left of the icons */
.curtoggle{display:flex;align-items:center;height:30px;margin-left:12px;border:1px solid var(--line2);
  border-radius:3px;overflow:hidden}
.cur-btn{background:transparent;border:none;color:var(--muted);font-family:'JetBrains Mono';font-size:.62rem;
  letter-spacing:.1em;padding:0 9px;height:100%;cursor:pointer;transition:.18s}
.cur-btn:hover{color:var(--text)}
.cur-btn.on{background:var(--accent);color:#0a0a0a;font-weight:700}
@media(max-width:420px){.curtoggle{margin-left:6px}.cur-btn{padding:0 7px}}
.cartbadge{position:absolute;top:2px;right:0;min-width:16px;height:16px;border-radius:8px;padding:0 4px;
  background:var(--ember);color:#0a0a0a;font-family:'Roboto';font-size:.62rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.cart-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:90;
  opacity:0;pointer-events:none;transition:opacity .3s}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:91;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(22,26,33,.97),rgba(11,13,17,.97));border-left:1px solid var(--line);
  backdrop-filter:blur(14px);transform:translateX(102%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
body.cart-open .cart-backdrop{opacity:1;pointer-events:auto}
body.cart-open .cart-drawer{transform:none}
.cart-top{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.cart-top .lbl{font-family:'Roboto';font-size:.68rem;letter-spacing:.24em;color:var(--faint);text-transform:uppercase}
.cart-close{background:transparent;border:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;
  padding:4px 8px;transition:color .2s}
.cart-close:hover{color:var(--text)}
.cart-items{flex:1;overflow-y:auto;padding:10px 22px}
.cart-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-line-info a{font-weight:500;font-size:.95rem;transition:color .2s}
.cart-line-info a:hover{color:var(--accent)}
.cart-line-info small{display:block;font-family:'Roboto';font-size:.7rem;color:var(--faint);margin-top:3px}
/* chosen product options — boxed list under the line, one label→value row each */
.cart-opts{flex:1 0 100%;margin-top:-4px;padding:10px 14px 12px;display:grid;gap:5px;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:6px}
.cart-opts-title{font-family:'Chakra Petch';font-size:.6rem;letter-spacing:.22em;color:var(--faint);
  text-transform:uppercase;margin-bottom:3px}
.cart-opt{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-family:'Roboto';font-size:.68rem;line-height:1.5}
.cart-opt span{color:var(--faint);flex:none}
.cart-opt b{color:var(--muted);font-weight:400;text-align:right;overflow-wrap:anywhere;min-width:0}
.cart-line-ctl{display:flex;align-items:center;gap:8px}
.cart-line-ctl .qbtn{width:28px;height:30px;border:1px solid var(--line2);border-radius:2px;font-size:.9rem}
.cart-line-ctl .qval{min-width:24px;font-size:.85rem}
.cart-line-total{font-family:'Roboto';font-size:.92rem;min-width:64px;text-align:right}
.cart-foot{padding:18px 22px 22px;border-top:1px solid var(--line)}
.cart-subtotal{display:flex;justify-content:space-between;align-items:center;font-family:'Roboto';margin-bottom:8px}
.cart-subtotal b{font-family:'Chakra Petch';font-size:1.2rem}
.cart-note{font-family:'Roboto';font-size:.66rem;color:var(--faint);letter-spacing:.08em;margin-bottom:16px}
.cart-checkout{width:100%;justify-content:center}
.cart-checkout:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.cart-error{font-family:'Roboto';font-size:.7rem;color:var(--ember);margin-top:12px}

/* ---------------- CONTENT PAGES (page.html) ---------------- */
.page-body{max-width:120ch}
.page-body h2,.page-body h3{font-size:1.15rem;font-weight:600;margin:34px 0 10px;letter-spacing:.01em}
.page-body h2:first-child,.page-body h3:first-child{margin-top:0}
.page-body p{color:var(--muted);font-weight:300;margin-bottom:14px;white-space:pre-line}
.page-body a{color:var(--accent)}

/* ---------------- ORDER PAGE (order.html) ---------------- */
.order-panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 24px 20px;max-width:560px}
.order-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.order-line small{color:var(--faint);font-family:'JetBrains Mono';font-size:.72rem;margin-left:6px}
.order-line b{font-family:'Roboto'}
/* chosen product options — same boxed list as the cart drawer */
.order-opts{flex:1 0 100%;margin-top:-4px;padding:10px 14px 12px;display:grid;gap:5px;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:6px}
.order-opts-title{font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.22em;color:var(--faint);
  text-transform:uppercase;margin-bottom:3px}
.order-opt{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-family:'JetBrains Mono';font-size:.68rem;line-height:1.5}
.order-opt span{color:var(--faint);flex:none}
.order-opt b{color:var(--muted);font-family:'JetBrains Mono';font-weight:400;font-size:.68rem;
  text-align:right;overflow-wrap:anywhere;min-width:0}
.order-total{border-bottom:none;font-weight:600}
.order-total b{font-size:1.15rem}
.order-note{font-family:'JetBrains Mono';font-size:.7rem;color:var(--faint);letter-spacing:.08em;margin-top:8px}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* data load error banner */
.loaderr{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--muted);font-family:'JetBrains Mono';font-size:.9rem;text-align:center;padding:30px;line-height:1.7}
.loaderr b{color:var(--accent)}

/* ---------------- MOBILE POLISH ---------------- */
@media(max-width:600px){
  .wrap{padding:0 20px}                                /* reclaim content width on narrow screens */
  section.block{padding:70px 0;scroll-margin-top:40px} /* tighter rhythm; margin keeps anchor jumps clear of the header */
  .band{padding:80px 0}
  .sec-head{margin-bottom:30px}
  .cta-row .btn{width:100%;justify-content:center}     /* hero CTAs stack full-width instead of wrapping unevenly */
  .hud{padding:16px}
  .foot-col a{padding:4px 0}                           /* taller tap targets for footer links */
}

/* ---------------- ON-SITE CHECKOUT (/checkout — checkout.js) ---------------- */
.co-loading,.co-empty{padding:40px 0;font-family:'JetBrains Mono';color:var(--muted)}
.co-empty{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.co-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:start}
@media(max-width:860px){.co-grid{grid-template-columns:1fr;gap:28px}}
.co-sec{padding:24px 0;border-top:1px solid var(--line)}
.co-form .co-sec:first-child{border-top:none;padding-top:0}
.co-h{font-family:'Chakra Petch';font-weight:600;font-size:1.05rem;letter-spacing:.02em;display:flex;align-items:center;gap:12px;margin-bottom:18px}
.co-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--accent-dim);color:var(--accent);font-family:'JetBrains Mono';font-size:.8rem;font-weight:700;flex:none}
.co-label{display:block;font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.co-input{width:100%;font-family:'Roboto';font-size:.92rem;color:var(--text);background:var(--surface);
  border:1px solid var(--line2);border-radius:3px;padding:12px 14px;outline:none;transition:.2s;color-scheme:dark}
.co-input:focus{border-color:var(--accent);box-shadow:0 0 16px var(--accent-dim)}
select.co-input{appearance:none;cursor:pointer}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
/* address autocomplete dropdown (Photon) */
.co-acwrap{position:relative}
.co-ac{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid rgba(var(--accent-rgb),.55);border-radius:8px;overflow:hidden auto;max-height:288px;
  box-shadow:0 18px 46px rgba(0,0,0,.66), 0 0 0 1px rgba(var(--accent-rgb),.12), 0 0 24px rgba(var(--accent-rgb),.16);
  animation:co-ac-in .14s ease}
@keyframes co-ac-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.co-ac-item{display:flex;flex-direction:column;gap:2px;padding:11px 14px 11px 34px;position:relative;cursor:pointer;
  border-bottom:1px solid var(--line);transition:.12s}
.co-ac-item:last-child{border-bottom:none}
.co-ac-item::before{content:"";position:absolute;left:14px;top:14px;width:9px;height:9px;
  border:1.5px solid var(--faint);border-radius:50% 50% 50% 0;transform:rotate(-45deg);transition:.12s}  /* map pin */
.co-ac-item:hover,.co-ac-item.active{background:var(--accent-dim)}
.co-ac-item:hover::before,.co-ac-item.active::before{border-color:var(--accent)}
.co-ac-main{font-size:.86rem;color:var(--text);font-weight:500;line-height:1.3}
.co-ac-sub{font-family:'JetBrains Mono';font-size:.68rem;color:var(--faint);letter-spacing:.02em}
.co-ac-msg{display:flex;align-items:center;gap:10px;padding:13px 14px;font-family:'JetBrains Mono';
  font-size:.74rem;letter-spacing:.02em;color:var(--muted)}
.co-ac-msg.co-ac-empty{color:var(--faint)}
.co-ac-spin{width:13px;height:13px;flex:none;border:2px solid var(--line2);border-top-color:var(--accent);
  border-radius:50%;display:inline-block;animation:co-ac-spin .7s linear infinite}
@keyframes co-ac-spin{to{transform:rotate(360deg)}}
.co-form .co-input + .co-label{margin-top:14px}
.co-hint{font-family:'JetBrains Mono';font-size:.72rem;color:var(--faint);line-height:1.6;margin-top:8px}
.co-err{font-family:'JetBrains Mono';font-size:.74rem;color:var(--ember);margin-top:8px}
.co-getship{margin-top:16px}
.co-shipopts{margin-top:16px;display:grid;gap:10px}
.co-shiphd{font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.co-ship{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:6px;cursor:pointer;transition:.18s}
.co-ship:hover{border-color:var(--accent)}
.co-ship.sel{border-color:var(--accent);background:var(--accent-dim)}
.co-ship input{accent-color:var(--accent);width:16px;height:16px;flex:none;cursor:pointer}
.co-ship-main{flex:1;display:flex;flex-direction:column;gap:2px}
.co-ship-label{font-size:.9rem}
.co-ship-eta{font-family:'JetBrains Mono';font-size:.68rem;color:var(--faint)}
.co-ship-price{font-family:'JetBrains Mono';font-size:.9rem}
#co-pe{margin:8px 0}
.co-paybtn{width:100%;justify-content:center;margin-top:8px}
.co-secure{font-size:.68rem;color:var(--faint);margin-top:12px;text-align:center}
/* summary card */
.co-summary{position:sticky;top:96px;background:linear-gradient(180deg,var(--surface),var(--bg2));
  border:1px solid var(--line2);border-radius:10px;padding:22px}
@media(max-width:860px){.co-summary{position:static}}
.co-line{padding:12px 0;border-bottom:1px solid var(--line)}
.co-line-top{display:flex;justify-content:space-between;gap:12px;font-size:.9rem}
.co-line-top b{font-family:'JetBrains Mono';font-weight:500;white-space:nowrap}
.co-line-sub{font-family:'JetBrains Mono';font-size:.68rem;color:var(--faint);margin-top:3px}
.co-line-opts{margin-top:8px;display:grid;gap:4px;padding:8px 11px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:6px}
.co-opt{display:flex;justify-content:space-between;gap:10px;font-family:'JetBrains Mono';font-size:.68rem}
.co-opt span{color:var(--faint)} .co-opt i{color:var(--text);font-style:normal;text-align:right}
.co-totals{margin-top:16px;display:grid;gap:9px}
.co-trow{display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:.84rem;color:var(--muted)}
.co-trow b{color:var(--text);font-weight:500}
.co-grand{padding-top:11px;margin-top:3px;border-top:1px solid var(--line2);font-size:1.05rem}
.co-grand span,.co-grand b{color:var(--text)}
.co-back{display:inline-block;margin-top:18px;font-family:'JetBrains Mono';font-size:.74rem;color:var(--accent)}
.co-back:hover{text-decoration:underline}