/* RaidBuddy website, style D. Ported from the approved PROJ-27 mockup docs/mockups/2026-10-02-website-zentry/index.html (lines 13-558);
   production changes are marked "PROD:" and additions sit in "PRODUCTION ADDITIONS" at the end. */
/* Fonts: vendored from src/renderer/fonts (SIL OFL 1.1, licences in assets/fonts). */
@font-face{font-family:"Saira Extra Condensed";font-weight:800;font-display:swap;src:url("../assets/fonts/saira-extra-condensed-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira Extra Condensed";font-weight:800;font-display:swap;src:url("../assets/fonts/saira-extra-condensed-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Saira Extra Condensed";font-weight:700;font-display:swap;src:url("../assets/fonts/saira-extra-condensed-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira Extra Condensed";font-weight:700;font-display:swap;src:url("../assets/fonts/saira-extra-condensed-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Saira Condensed";font-weight:600;font-display:swap;src:url("../assets/fonts/saira-condensed-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira Condensed";font-weight:600;font-display:swap;src:url("../assets/fonts/saira-condensed-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Saira Condensed";font-weight:700;font-display:swap;src:url("../assets/fonts/saira-condensed-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira Condensed";font-weight:700;font-display:swap;src:url("../assets/fonts/saira-condensed-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url("../assets/fonts/barlow-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url("../assets/fonts/barlow-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url("../assets/fonts/barlow-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url("../assets/fonts/barlow-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url("../assets/fonts/barlow-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url("../assets/fonts/barlow-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

/* Style D tokens (mirrors src/renderer/ui/tokens.css; the website reads the same values). */
:root{
  --ink-0:#0e0f0f; --ink-1:#16181a; --ink-2:#1f2224; --ink-3:#2a2d30; --chrome:#0b0c0c;
  --bone:#ece8de; --bone-2:#d6d1c4; --sand:#b8ad92; --sand-dim:#948b76; --bone-rgb:236,232,222;
  --accent:#ff6b1f; --accent-hi:#ff8440; --olive:#8a9a5b; --red:#c8372d; --red-text:#e3695e; --amber:#d8a54a;
  --on-bone:#0e0f0f; --on-bone-2:#45413a; --on-accent:#0e0f0f; --on-accent-2:#3a1a08;
  --line:rgba(var(--bone-rgb),.12); --line-strong:rgba(var(--bone-rgb),.22);
  --display:"Saira Extra Condensed","Saira Condensed","Arial Narrow",sans-serif;
  --cond:"Saira Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,4vw,56px);
  --cham:14px;
  color-scheme:dark;
}
/* The page is dark by product commitment (Bobby 2026-09-30: dark surface stays); both schemes resolve to style D. */
@media (prefers-color-scheme: light){ :root:not([data-theme="light"]){ color-scheme:dark; } }
:root[data-theme="dark"]{ color-scheme:dark; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--ink-0);color:var(--bone);font:400 17px/1.55 var(--body);overflow-x:clip;caret-color:var(--accent)}
img{display:block;max-width:100%;height:auto} /* PROD: height:auto, the width/height attributes only reserve the ratio (mockup images were stretched) */
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html{scrollbar-color:#3a3d3f var(--ink-0)}
::-webkit-scrollbar{width:10px;height:8px}::-webkit-scrollbar-track{background:var(--ink-0)}::-webkit-scrollbar-thumb{background:#3a3d3f}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 14px;font:700 15px var(--cond);text-decoration:none}
.skip:focus{top:12px}
.num{font-variant-numeric:tabular-nums}

/* Grain (tokens: --rb-grain-opacity .07) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Display type: giant condensed caps with one mixed letterform per word (Zentry's alternate glyphs). */
.d{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;margin:0;text-wrap:balance}
.d .w{display:inline-block}
.alt{color:transparent;-webkit-text-stroke:.035em var(--accent);paint-order:stroke}
.on-bone .alt{-webkit-text-stroke-color:var(--ink-0)}
.on-accent .alt{-webkit-text-stroke-color:var(--ink-0)}
.h2{font-size:clamp(3.4rem,8.4vw,9rem)}
.lede{max-width:60ch;font-size:clamp(17px,1.3vw,19px);color:var(--bone-2)}
.small{font-size:14px;color:var(--sand)}
.label{font:600 13px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--sand)}

/* Chamfered controls (radius 0, chamfers via clip-path, like the app) */
.btn{--c:10px;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px 0 20px;font:700 18px/1 var(--cond);letter-spacing:.02em;text-decoration:none;cursor:pointer;border:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%);transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hi)}
.btn-ghost{position:relative;color:var(--bone);background:var(--line-strong)}
.btn-ghost::before{content:"";position:absolute;inset:1px;background:var(--ink-0);z-index:-1;clip-path:inherit}
.btn-ghost{isolation:isolate}
.btn-ghost:hover{background:var(--bone)}
.btn-ink{background:var(--ink-0);color:var(--bone)}
.btn-ink:hover{background:var(--ink-2)}
.btn-line-ink{position:relative;isolation:isolate;background:var(--ink-0);color:var(--ink-0)}
.btn-line-ink::before{content:"";position:absolute;inset:1.5px;background:var(--accent);z-index:-1;clip-path:inherit}
.btn-line-ink:hover::before{background:var(--accent-hi)}
.btn:active{transform:translateY(1px)}

/* Registration ticks (app stage .ticks) */
.ticks{position:absolute;inset:14px;pointer-events:none;z-index:3}
.ticks i{position:absolute;width:14px;height:14px;border-color:rgba(var(--bone-rgb),.42);border-style:solid;border-width:0}
.ticks i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.ticks i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.ticks i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.ticks i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}

/* ---------- NAV ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;padding:12px var(--gutter);transition:transform .45s var(--ease)}
.nav-in{display:flex;align-items:center;gap:20px;height:60px;padding:0 10px 0 8px;transition:background .3s var(--ease)}
.nav.solid .nav-in{background:rgba(14,15,15,.94);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.nav.hide{transform:translateY(-120%)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 21px/1 var(--cond);letter-spacing:.04em}
.brand img{width:46px;height:46px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.nav-links{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0}
.nav-links a{display:block;padding:10px 12px;font:600 16px/1 var(--cond);letter-spacing:.03em;text-decoration:none;color:var(--bone-2);position:relative}
.nav-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--bone)}.nav-links a:hover::after{transform:scaleX(1)}
.nav .btn{min-height:42px;font-size:16px}
.language{display:flex;align-items:center;gap:2px;font:600 15px/1 var(--cond);color:var(--sand-dim)}
.language button{min-width:40px;min-height:40px;padding:0 6px;background:none;border:0;color:var(--sand);font:inherit;letter-spacing:.06em;cursor:pointer}
.language button:hover{color:var(--bone)}
.language button[aria-pressed="true"]{color:var(--accent-hi);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.language-sheet{font-size:22px;margin:0 0 18px}
.language-sheet button{min-width:52px;min-height:48px}
.menu-btn{display:none;width:48px;height:48px;background:none;border:1px solid var(--line-strong);color:var(--bone);cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.sheet{position:fixed;inset:0;z-index:60;background:var(--ink-0);display:none;flex-direction:column;padding:20px var(--gutter) 28px}
.sheet.open{display:flex}
.sheet-top{display:flex;justify-content:space-between;align-items:center}
.sheet ul{list-style:none;padding:0;margin:auto 0 24px}
.sheet li a{display:block;font:800 clamp(3rem,15vw,5rem)/.95 var(--display);text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
.sheet li a:active{color:var(--accent)}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:600px;background:var(--bone);overflow:hidden}
.hero-back{position:absolute;inset:0;z-index:0;color:var(--ink-0);pointer-events:none}
.hero-frame{position:absolute;inset:0;z-index:1;background:var(--ink-0);overflow:hidden;
  clip-path:polygon(0% 0%,100% 0%,100% 0%,100% 100%,100% 100%,0% 100%,0% 100%,0% 0%);will-change:clip-path}
.topo-fallback{position:absolute;inset:0;background:
  radial-gradient(60% 70% at 66% 55%, rgba(255,107,31,.10), transparent 60%),
  url("../assets/hero-fallback.webp") center/cover no-repeat, var(--ink-0)}
#topo{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s var(--ease)}
#topo.ready{opacity:1}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(14,15,15,.92) 0,rgba(14,15,15,.7) 26%,rgba(14,15,15,.08) 52%,rgba(14,15,15,0) 62%),
  linear-gradient(180deg,rgba(14,15,15,.7) 0,rgba(14,15,15,0) 18%),
  linear-gradient(0deg,rgba(14,15,15,.85) 0,rgba(14,15,15,0) 24%)}
.hero-word{position:absolute;font-size:clamp(7.5rem,20vw,19.5rem);z-index:2;line-height:.84}
.hero-word.top{left:var(--gutter);top:calc(84px + 2vh)}
.hero-word.bot{right:var(--gutter);bottom:calc(46px + 2vh)}
.hero-back .hero-word.bot{color:var(--ink-0)}
.hero-back .hero-word.bot .alt{-webkit-text-stroke-color:var(--ink-0)}
.hero-copy{position:absolute;left:var(--gutter);top:calc(84px + 2vh + clamp(7.5rem,20vw,19.5rem)*.88);z-index:2;max-width:430px}
.hero-copy p{margin:0 0 22px;font-size:clamp(17px,1.35vw,20px);color:var(--bone-2)}
.hero-copy p b{color:var(--bone);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-status{position:absolute;left:var(--gutter);bottom:22px;z-index:2;display:flex;flex-wrap:wrap;gap:6px 22px;font:500 13.5px/1.2 var(--body);color:var(--sand)}
.hero-status span{display:inline-flex;align-items:center;gap:8px}
.hero-status span::before{content:"";width:7px;height:7px;background:var(--olive)}
.hero-status span.ver::before{background:var(--accent)}

/* ---------- ABOUT (bone) ---------- */
.about{background:var(--bone);color:var(--on-bone);position:relative}
.about-head{padding:clamp(80px,12vh,140px) var(--gutter) 8px;display:grid;justify-items:center;text-align:center;gap:28px}
.about-head .h2{max-width:14ch}
.about-head .lede{color:var(--on-bone-2);margin:0}
.ledger{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;max-width:980px;margin:0;padding:0;list-style:none;font:600 clamp(17px,1.5vw,21px)/1.35 var(--cond);color:var(--on-bone)}
.ledger li{padding:2px 16px;border-right:1px solid rgba(14,15,15,.25)}
.ledger li:last-child{border-right:0}
.ledger b{font-weight:700;color:#b4430a}
.about-pin{position:relative}
.about-frame{position:relative;margin:30px auto 0;width:min(1100px,calc(100% - 2*var(--gutter)));aspect-ratio:3/2;background:var(--ink-0);overflow:hidden;
  clip-path:polygon(3% 0%,100% 0%,100% 0%,100% 95%,97% 100%,0% 100%,0% 100%,0% 5%)}
.about-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.about-cap{position:absolute;left:var(--gutter);bottom:clamp(20px,4vh,40px);z-index:2;display:grid;gap:8px;max-width:560px;padding:20px 24px 22px;
  background:rgba(14,15,15,.96);color:var(--bone);box-shadow:0 18px 40px rgba(0,0,0,.45);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.about-cap .t{font:800 clamp(1.8rem,3.4vw,3.4rem)/.9 var(--display);text-transform:uppercase}
.about-cap p{margin:0;font-size:15.5px;color:var(--bone-2)}
.about-foot{padding:44px var(--gutter) clamp(80px,12vh,130px);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px 48px;max-width:1240px;margin:0 auto}
.about-foot h3{font:700 22px/1.1 var(--cond);margin:0 0 8px}
.about-foot p{margin:0;color:var(--on-bone-2);font-size:16px}
/* Without the scroll animation (reduced motion, no JS, before JS): the same end layout as the animated version at every
   width (PROJ-34 W7, was phones only): the whole capture, caption under it; the frame's chamfer moves to the bottom right
   corner below the caption, so it never cuts the logo in the capture's top left corner. */
html:not(.mo) .about-frame{aspect-ratio:auto;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
html:not(.mo) .about-frame img{height:auto;aspect-ratio:3/2;object-position:50% 50%}
html:not(.mo) .about-cap{position:relative;left:auto;right:auto;bottom:auto;margin:14px 12px 12px}
/* Motion layout: the frame is pinned and opens from a small window to the full viewport */
html.mo .about-pin{height:100vh;overflow:hidden}
html.mo .about-frame{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;transform-origin:50% 50%}
/* Map fold (motion only): a folded paper raid map opens panel by panel and turns into the Overview window.
   Panels are nested so each hinge carries the rest of the stack; the map art is one canvas raster shared by all fronts. */
.mapfold{display:none}
html.mo .mapfold{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;perspective:1700px;perspective-origin:50% 42%}
.mf-shadow{position:absolute;left:50%;top:50%;background:rgba(14,15,15,.42);filter:blur(26px);will-change:transform,opacity}
.mf-rig{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform}
.mf-p{position:absolute;left:0;top:0;transform-style:preserve-3d}
.mf-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(var(--bone-rgb),.09)}
.mf-front{background-color:var(--ink-1);background-repeat:no-repeat}
.mf-back{transform:rotateY(180deg);background:repeating-linear-gradient(135deg,rgba(var(--bone-rgb),.035) 0 1px,transparent 1px 9px),#1c1f21}
.mf-v .mf-back{transform:rotateX(180deg)}
.mf-back::before{content:"RAIDBUDDY";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);font:800 clamp(34px,4.4vw,64px)/1 var(--display);color:rgba(var(--bone-rgb),.075);white-space:nowrap}
.mf-v .mf-back::before{transform:translate(-50%,-50%)}
.mf-sh{position:absolute;inset:0;background:#050606;opacity:0}
/* creases stay faintly visible once the paper lies flat */
.mf-p .mf-p>.mf-front::after{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:linear-gradient(90deg,rgba(0,0,0,.26),rgba(0,0,0,0));border-left:1px solid rgba(var(--bone-rgb),.1)}
.mf-v .mf-p .mf-p>.mf-front::after{width:auto;right:0;bottom:auto;height:16px;border-left:0;border-top:1px solid rgba(var(--bone-rgb),.1);background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,0))}
/* folded paper thickness on the hinge side of the cover, fades as the first hinge opens */
.mf-edge{position:absolute;left:100%;top:2px;bottom:2px;width:5px;background:repeating-linear-gradient(90deg,#34383b 0 1px,#0b0c0c 1px 2.5px)}
.mf-v .mf-edge{left:2px;right:2px;top:100%;bottom:auto;width:auto;height:5px;background:repeating-linear-gradient(180deg,#34383b 0 1px,#0b0c0c 1px 2.5px)}

/* ---------- FEATURES (bento) ---------- */
.feat{padding:clamp(90px,14vh,150px) 0 clamp(80px,12vh,130px);background:var(--ink-0);position:relative}
.sec-head{padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px;align-items:end;margin-bottom:48px}
.sec-head p{margin:0}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:310px 310px 370px 440px 380px;grid-auto-rows:310px;/* PROD: rows 3-5 taller, the cards carry the dated example line and the guide link; PROJ-34 W4: row 5 330 -> 380 px (phone card: text beside the whole phone capture) */gap:14px;padding:0 var(--gutter);perspective:1100px}
.card{--c:16px;position:relative;overflow:hidden;background:var(--ink-1);color:var(--bone);transform-style:preserve-3d;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:transform .5s var(--ease)}
.card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);opacity:.9}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,15,15,.97) 0,rgba(14,15,15,.9) 34%,rgba(14,15,15,.25) 72%,rgba(14,15,15,.05) 100%);pointer-events:none}
.card .glare{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(var(--bone-rgb),.10),transparent 60%)}
.card:hover .glare{opacity:1}
.card:hover>img{transform:scale(1.035)}
.card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px 22px}
.card h3{font:800 clamp(2.3rem,3.4vw,3.6rem)/.86 var(--display);text-transform:uppercase;margin:0 0 12px}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:15px;line-height:1.4;color:var(--bone-2)}
.card li{padding-left:16px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:2px;background:var(--accent)}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:4px;min-height:44px;font:700 15px/1 var(--cond);color:var(--accent-hi);text-decoration:none;letter-spacing:.03em}
.card .more:hover{text-decoration:underline}
.card .more svg{width:14px;height:14px}
.card .tag{position:absolute;top:16px;right:16px;z-index:2;font:600 12px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--sand);background:rgba(14,15,15,.8);padding:6px 8px}
.c-map{grid-column:1/8;grid-row:span 2}
.c-ovw{grid-column:8/13}
.c-qst{grid-column:8/13}
.c-hid,.c-wpn,.c-eco{grid-column:span 4}
.c-cat{grid-column:1/6}
.c-trk{grid-column:6/13}
.c-sqd,.c-phn,.c-set{grid-column:span 4}
.c-map h3{font-size:clamp(3.2rem,6vw,6.4rem)}
.c-trk .duo{position:absolute;right:22px;top:22px;bottom:auto;z-index:1;display:flex;gap:12px;align-items:flex-start}
.c-trk .duo img{width:168px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.c-trk .duo img+img{margin-top:38px}
.c-trk::after{background:linear-gradient(90deg,rgba(14,15,15,.97) 0,rgba(14,15,15,.9) 46%,rgba(14,15,15,.2) 100%)}
.c-trk .card-body{right:auto;max-width:56%}
.c-trk>img.bg{opacity:.35}
.feat-note{padding:18px var(--gutter) 0;font-size:13.5px;color:var(--sand-dim)}
.rail-bar{display:none}

/* ---------- DEEP DIVES ---------- */
.dive{position:relative;background:var(--ink-0);border-top:1px solid var(--line);overflow-x:clip}
.dive-in{padding:clamp(80px,12vh,120px) var(--gutter) clamp(70px,10vh,110px);display:grid;grid-template-columns:minmax(300px,.42fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.dive .h2{font-size:clamp(3.2rem,6.6vw,7.4rem);margin-bottom:28px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.step{position:relative;padding:14px 0 16px 26px;border-top:1px solid var(--line)}
.step::before{content:"";position:absolute;left:0;top:23px;width:18px;height:2px;background:var(--line-strong);transform:scaleX(.67);transform-origin:left;transition:background .3s,transform .3s var(--ease)}
.step h3{margin:0 0 6px;font:700 24px/1.05 var(--cond)}
.step h3 .n{color:var(--sand-dim);font-weight:600;margin-right:10px}
.step p{margin:0;color:var(--bone-2);font-size:16px;max-width:52ch}
.step .fine{margin-top:8px;font-size:13.5px;color:var(--sand)}
.step figure{margin:16px 0 0}
.step figure img{width:100%;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.stage{position:relative;aspect-ratio:3/2;background:var(--ink-1);display:none}
.layer{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
.layer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.layer .win{position:absolute;box-shadow:0 26px 60px rgba(0,0,0,.65),0 4px 10px rgba(0,0,0,.5)}
.layer .win img{width:100%}
.layer.dim>img{filter:brightness(.42) saturate(.6)}
.stage-cap{position:absolute;left:0;bottom:-34px;font-size:13px;color:var(--sand-dim)}
.ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;
  background:repeating-linear-gradient(135deg,var(--ink-1) 0 14px,var(--ink-2) 14px 28px);color:var(--sand);font:600 15px/1.35 var(--cond);letter-spacing:.03em}
.ph span{max-width:34ch;padding:14px 18px;border:1px dashed rgba(var(--bone-rgb),.4);background:rgba(14,15,15,.82)}
.ph b{display:block;color:var(--accent-hi);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
/* motion-desk layout: pinned stage, figures inside steps hidden */
html.md .dive .stage{display:block}
html.md .dive .step figure{display:none}
html.md .dive-in{height:100vh;padding-top:96px;padding-bottom:56px}
html.md .step{opacity:.62;transition:opacity .35s var(--ease)}
html.md .step.on{opacity:1}
html.md .step.on::before{background:var(--accent);transform:none}

/* weapons */
.wpn-giant{position:absolute;right:-1vw;top:50%;transform:translateY(-50%);font:800 clamp(10rem,30vw,30rem)/.8 var(--display);color:transparent;-webkit-text-stroke:1px rgba(var(--bone-rgb),.09);pointer-events:none;white-space:nowrap;z-index:0}
.dive-wpn .dive-in>*{position:relative;z-index:1}
.builds{display:grid;gap:0;margin-top:6px}
.build{display:grid;grid-template-columns:1fr auto;gap:2px 18px;padding:14px 0 14px 26px;border-top:1px solid var(--line);position:relative}
.build::before{content:"";position:absolute;left:0;top:25px;width:18px;height:2px;background:var(--line-strong);transform:scaleX(.67);transform-origin:left;transition:background .3s,transform .3s var(--ease)}
.build h3{margin:0;font:700 24px/1.05 var(--cond)}
.build .price{font:800 32px/1 var(--display);color:var(--bone)}
.build .stats{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px;color:var(--bone-2)}
.build .stats b{font-weight:600;color:var(--bone)}
.build p{grid-column:1/-1;margin:2px 0 0;font-size:14.5px;color:var(--sand)}
html.md .build{opacity:.62;transition:opacity .35s var(--ease)}
html.md .build.on{opacity:1}
html.md .build.on::before{background:var(--accent);transform:none}
.wpn-fine{margin-top:18px;font-size:13.5px;color:var(--sand);max-width:60ch}
.hl{position:absolute;border:2px solid var(--accent);box-shadow:0 0 0 9999px rgba(14,15,15,.45);transition:all .6s var(--ease);pointer-events:none;display:none}
html.md .hl{display:block}
.wpn-stage{display:grid;gap:14px;aspect-ratio:auto;background:none;overflow:visible}
.wpn-stage>.wpn-asm,.wpn-stage>.wpn-shot{position:relative;inset:auto;aspect-ratio:3/2;overflow:hidden}
.wpn-stage .stage-cap{position:static}
html.md .wpn-stage .stage-cap{position:absolute}
html.md .wpn-stage{display:block;aspect-ratio:3/2;background:var(--ink-1)}
html.md .wpn-stage>.wpn-asm,html.md .wpn-stage>.wpn-shot{position:absolute;inset:0;aspect-ratio:auto}

/* ---------- SCANNER ---------- */
.scan{background:var(--ink-1);position:relative;overflow:hidden}
.scan-in{padding:clamp(90px,13vh,140px) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.scan .h2{font-size:clamp(3.2rem,7vw,7.6rem);margin-bottom:26px}
.exp{display:inline-block;margin-right:8px;padding:3px 8px;font:700 13px/1.2 var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(216,165,74,.6);vertical-align:2px}
.paths{list-style:none;margin:28px 0 0;padding:0;counter-reset:p}
.paths li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:16px 0;border-top:1px solid var(--line)}
.paths li::before{content:counter(p);grid-row:span 2;font:800 40px/.9 var(--display);color:var(--accent)}
.paths h3{margin:0;font:700 22px/1.1 var(--cond)}
.paths p{margin:0;color:var(--bone-2);font-size:16px}
.limits{margin-top:28px;padding:22px 24px;background:var(--ink-0);position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.limits h3{margin:0 0 10px;font:700 22px/1.1 var(--cond);color:var(--amber)}
.limits ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.limits li{padding-left:18px;position:relative;color:var(--bone-2);font-size:15.5px}
.limits li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border:1.5px solid var(--amber)}
.scan-fine{margin-top:16px;font-size:13.5px;color:var(--sand)}
.float{position:sticky;top:96px;height:730px;perspective:1200px}
.float-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.shot{position:absolute;width:min(300px,46%);box-shadow:0 30px 70px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.5);transform-style:preserve-3d}
.shot img{width:100%}
.shot figcaption{position:absolute;left:0;top:calc(100% + 10px);white-space:nowrap;font:600 13px/1.2 var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--sand)}
.shot figcaption b{color:var(--bone)}
.shot.s1{left:0;top:0;transform:rotate(-4deg) translateZ(40px)}
.shot.s2{left:51%;top:6%;transform:rotate(3deg) translateZ(80px)}
.shot.s3{left:5%;top:53%;transform:rotate(-2deg) translateZ(20px)}
.shot.s4{left:55%;top:59%;width:min(260px,40%);transform:rotate(4deg) translateZ(60px)}
.shot .dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:var(--accent)}
.shot.s3 .dot{background:var(--red)}
.shot.s2 .dot{background:var(--amber)}

/* ---------- PHONE ---------- */
.phone-sec{background:var(--ink-0);position:relative;overflow:hidden}
.phone-in{padding:clamp(90px,13vh,140px) var(--gutter);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.phones{position:relative;height:min(720px,86vh);min-height:560px}
/* PROJ-34 W4: the screen is exactly 390:844 (the phone capture size from 0.5.1 on) and shows the whole capture (contain);
   the earpiece sits in the top bezel above the screen, never over the app. Captures of another ratio get dark bars. */
.device{position:absolute;width:300px;background:#060707;border-radius:38px;padding:30px 11px 16px;box-shadow:0 40px 90px rgba(0,0,0,.7),inset 0 0 0 1.5px #3a3d3f}
.device img{width:100%;height:auto;aspect-ratio:390/844;object-fit:contain;object-position:50% 50%;background:var(--ink-0);border-radius:18px}
.device::before{content:"";position:absolute;left:50%;top:12px;width:58px;height:7px;transform:translateX(-50%);background:#1d2023;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,.6);z-index:2}
.device.d1{left:50%;top:0;transform:translateX(-30%) rotate(4deg);z-index:2}
.device.d2{left:50%;top:70px;transform:translateX(-112%) rotate(-7deg);opacity:.9}
.phone-copy .h2{font-size:clamp(3.2rem,6.6vw,7rem);margin-bottom:24px}
.facts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0}
.facts li{padding:14px 0 14px 26px;border-top:1px solid var(--line);position:relative;color:var(--bone-2)}
.facts li::before{content:"";position:absolute;left:0;top:25px;width:12px;height:2px;background:var(--accent)}
.facts b{color:var(--bone);font-weight:600}

/* ---------- CTA (orange drenched) ---------- */
.cta{position:relative;background:var(--accent);color:var(--on-accent);overflow:hidden;
  clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
.cta-in{padding:clamp(90px,13vh,150px) var(--gutter) clamp(80px,11vh,120px);display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:end}
.cta .d{font-size:clamp(3.6rem,8.6vw,9.6rem)}
.cta-art{position:relative;aspect-ratio:4/5;max-height:620px;background:var(--ink-0);clip-path:polygon(8% 0,100% 0,100% 92%,92% 100%,0 100%,0 8%)}
.cta-art .ph{background:repeating-linear-gradient(135deg,#1a1b1c 0 14px,#232527 14px 28px)}
.status{margin-top:30px;padding:22px 24px;background:var(--ink-0);color:var(--bone);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.status-row{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between}
.status h3{margin:0;font:700 24px/1.1 var(--cond)}
.status h3 span{display:inline-block;margin-left:10px;padding:3px 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(216,165,74,.55);vertical-align:3px}
.status p{margin:8px 0 0;color:var(--bone-2);font-size:15.5px;max-width:64ch}
.reqs{display:flex;flex-wrap:wrap;gap:4px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:14px;color:var(--sand)}
.cta .cta-row{margin-top:24px}
.cta .btn{min-height:52px}
.patch{margin-top:22px;font-size:15px;color:var(--on-accent-2)}
.patch b{color:var(--on-accent)}

/* ---------- FOOTER ---------- */
.foot{background:var(--chrome);padding:56px var(--gutter) 34px;color:var(--sand)}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:30px}
.foot-word{font:800 clamp(4rem,12vw,12rem)/.8 var(--display);color:var(--bone);text-transform:uppercase;margin:0}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(140px,auto));gap:28px}
.foot-cols h3{margin:0 0 10px;font:600 13px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--sand-dim)}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-cols a{text-decoration:none;color:var(--bone-2);font-size:15.5px}
.foot-cols a:hover{color:var(--accent-hi);text-decoration:underline}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:22px;font-size:13.5px;color:var(--sand-dim)}
.foot-bot p{margin:0;max-width:80ch}

/* ---------- MOTION GRAPHICS (all code-made; final state is the static default) ---------- */
/* M1 logo assembly */
.logo-asm{position:relative;width:46px;height:46px;flex:none;display:block}
.logo-asm img{position:absolute;inset:0;width:100%;height:100%}
.logo-asm .tiles{position:absolute;inset:0;display:none}
.logo-asm .tiles i{position:absolute;width:50%;height:50%;background:url("../assets/brand/raidbuddy-orange-96.webp") no-repeat;background-size:46px 46px}
.logo-asm .tiles i:nth-child(1){left:0;top:0;background-position:0 0}
.logo-asm .tiles i:nth-child(2){right:0;top:0;background-position:-23px 0}
.logo-asm .tiles i:nth-child(3){left:0;bottom:0;background-position:0 -23px}
.logo-asm .tiles i:nth-child(4){right:0;bottom:0;background-position:-23px -23px}
.logo-asm svg{position:absolute;inset:-4px;width:54px;height:54px;overflow:visible;pointer-events:none}
.logo-asm circle{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0}
.gd-eye{opacity:0}
html.asm .logo-asm img{opacity:0}
html.asm .logo-asm .tiles{display:block}
/* M2 hero letters */
.ch{display:inline-block;will-change:transform}
/* M4 route over the map capture */
.route-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.route-svg .rt{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.route-svg .rt-halo{fill:none;stroke:rgba(14,15,15,.85);stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.route-svg .pc{fill:var(--accent);stroke:var(--ink-0);stroke-width:4}
.route-svg .pr{fill:none;stroke:var(--accent);stroke-width:3}
.route-svg .pe .pc{fill:var(--bone)}
.route-svg .pe .pr{stroke:var(--bone)}
.route-svg text{font:700 25px var(--cond);fill:var(--bone);paint-order:stroke;stroke:var(--ink-0);stroke-width:7px;letter-spacing:.02em}
.route-svg .ping{transform-box:fill-box}
.fig-rel{position:relative}
/* M5 overlay-over-the-game demo */
.gd{position:absolute;inset:0;overflow:hidden;background:#141412}
.gd-scene{position:absolute;inset:-4%;width:108%;height:108%;will-change:transform}
.gd-scene svg{width:100%;height:100%;display:block}
.gd-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.65) 100%)}
.gd-win{position:absolute;box-shadow:0 22px 50px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.5);will-change:transform,opacity}
.gd-win img{width:100%;display:block}
.gd-mini{right:3%;top:5%;width:28%}
.gd-trk{left:4%;top:9%;width:22%}
.gd-eye{left:4%;top:9%;width:44px;height:44px;background:#16181a;border:1px solid rgba(var(--bone-rgb),.2);display:grid;place-items:center}
.gd-eye svg{width:22px;height:22px;stroke:var(--bone);fill:none;stroke-width:1.6}
.gd-price{left:47%;top:47%;width:18%}
.gd-cursor{position:absolute;left:44%;top:43%;width:22px;height:30px;z-index:5;will-change:transform}
.gd-cursor svg{width:100%;height:100%}
.gd-key{position:absolute;left:46%;top:38%;z-index:5;font:700 14px/1 var(--cond);letter-spacing:.04em;color:var(--on-accent);background:var(--accent);padding:6px 8px;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}
.gd-click{position:absolute;left:44%;top:43%;width:40px;height:40px;margin:-20px 0 0 -20px;border:2px solid var(--accent);border-radius:50%;z-index:4;opacity:0}
.gd-cap{position:absolute;left:12px;bottom:10px;z-index:6;font-size:12.5px;color:var(--sand);background:rgba(14,15,15,.82);padding:5px 8px}
.gd-host{position:relative;aspect-ratio:3/2;overflow:hidden}
/* M6 weapon assembly */
.wpn-asm{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 45%,#1d2022,#121314 70%);overflow:hidden}
.wpn-asm svg{width:100%;height:100%;display:block}
.wpn-asm .part{fill:#24272a;stroke:var(--bone);stroke-width:2;stroke-linejoin:round;will-change:transform,opacity}
.wpn-asm .part.hot{fill:#2c241e;stroke:var(--accent-hi)}
.wpn-asm .lbl line{stroke:rgba(var(--bone-rgb),.45);stroke-width:1.5}
.wpn-asm .lbl circle{fill:var(--accent)}
.wpn-asm .lbl text{font:600 21px var(--body);fill:var(--bone-2)}
.wpn-asm .lbl text.p{font:700 23px var(--cond);fill:var(--bone)}
.wpn-asm .total text{font:700 26px var(--cond);fill:var(--sand);letter-spacing:.04em}
.wpn-asm .total .tv{font:800 64px var(--display);fill:var(--bone)}
.wpn-asm .grid line{stroke:rgba(var(--bone-rgb),.05)}
.wpn-shot{position:absolute;inset:0}
.wpn-shot>img{width:100%;height:100%;object-fit:cover}
/* M7 ticking numbers in cards */
.tick{margin:10px 0 0;font:600 15px/1.35 var(--cond);letter-spacing:.02em;color:var(--sand)}
.tick b{font:700 19px var(--cond);color:var(--accent-hi);font-variant-numeric:tabular-nums}
/* M9 scanner schematic */
.schem{margin:26px 0 0;background:var(--ink-0);position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.schem svg{width:100%;height:auto;display:block}
.schem .cell{fill:#1b1d1f;stroke:rgba(var(--bone-rgb),.14);stroke-width:1.5}
.schem .itm{fill:#3a3d3f;stroke:none}
.schem .itm.ak{fill:#4a4d50}
.schem .tt{fill:#0b0c0c;stroke:rgba(var(--bone-rgb),.5);stroke-width:1.5}
.schem text{font:600 15px var(--body);fill:var(--bone-2)}
.schem .tt-t{font:700 17px var(--cond);fill:var(--bone)}
.schem .sn{font:700 12px var(--cond);fill:var(--bone)}
.schem .hl1,.schem .hl2,.schem .hl3{fill:none;stroke:var(--accent);stroke-width:2.5}
.schem .hl3{stroke-dasharray:6 5}
.schem .scanl{fill:rgba(255,107,31,.35)}
.schem .cand{fill:#16181a;stroke:var(--amber);stroke-width:1.5}
.schem .lab{font:700 13px var(--cond);letter-spacing:.06em;fill:var(--accent-hi)}
.schem .warn{fill:var(--amber)}
.paths li{transition:opacity .35s var(--ease)}
html.mo .paths.live li{opacity:.62} /* PROD: .4 -> .62, inactive text keeps 4.5:1 contrast */
html.mo .paths.live li.on{opacity:1}
/* M10 CTA radar */
.radar{position:absolute;inset:0;overflow:hidden;background:var(--ink-0)}
.radar svg{position:absolute;inset:0;width:100%;height:100%}
.radar .ct{fill:none;stroke:rgba(var(--bone-rgb),.13);stroke-width:1.2}
.radar .ct.mj{stroke:rgba(var(--bone-rgb),.26)}
.radar .sweep{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;margin:-75% 0 0 -75%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,107,31,0) 0deg,rgba(255,107,31,0) 300deg,rgba(255,107,31,.28) 358deg,rgba(255,107,31,0) 360deg);will-change:transform}
.radar .rp circle.c{fill:var(--accent)}
.radar .rp circle.r{fill:none;stroke:var(--accent);stroke-width:2}
.radar .rp text{font:700 15px var(--cond);fill:var(--bone);letter-spacing:.05em}
.radar img{position:absolute;left:50%;top:50%;width:46%;height:auto;aspect-ratio:1/1;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .nav-links{display:none}
  .nav-in>.language{display:none}
  .menu-btn{display:inline-flex}
  .nav .btn{margin-left:auto}
  .bento{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(330px,auto)}
  .c-map{grid-column:1/-1;grid-row:span 2}
  .c-ovw,.c-qst,.c-hid,.c-wpn,.c-eco,.c-cat,.c-sqd,.c-phn,.c-set{grid-column:span 3}
  .c-trk{grid-column:1/-1}
  .c-eco{grid-column:1/-1}
}
@media (max-width:899px){
  .sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:28px}
  .dive-in,.scan-in,.phone-in,.cta-in{grid-template-columns:1fr}
  .float{position:relative;top:0;height:auto}
  .foot-top{grid-template-columns:1fr}
}
@media (max-width:699px){
  body{font-size:16px}
  .nav{padding:8px 12px}
  .nav-in{height:56px;gap:10px}
  .nav .brand > span:last-child{display:none}
  .sheet .brand img{width:42px;height:42px}
  .nav .btn{padding:0 14px;font-size:15px}
  /* Mobile hero: own composition, words stacked left, copy below, status at the foot */
  .hero{min-height:640px}
  .hero-word{font-size:clamp(6.4rem,37vw,10rem)}
  .hero-word.top{left:16px;top:84px}
  .hero-word.bot{right:16px;bottom:auto;top:calc(84px + clamp(6.4rem,37vw,10rem)*.84)}
  .hero-copy{left:16px;right:16px;top:auto;bottom:86px;max-width:none}
  .hero-copy p{font-size:16.5px;margin-bottom:16px}
  .cta-row .btn{flex:1 1 auto;justify-content:center}
  .hero-shade{background:linear-gradient(0deg,rgba(14,15,15,.96) 0,rgba(14,15,15,.82) 28%,rgba(14,15,15,0) 42%,rgba(14,15,15,0) 60%,rgba(14,15,15,.55) 100%)}
  .hero-status{left:16px;right:16px;bottom:18px;gap:6px 14px;font-size:12.5px}
  .about-head{text-align:left;justify-items:start;padding-top:72px}
  .ledger{justify-content:flex-start;flex-direction:column;gap:0}
  .ledger li{border-right:0;border-bottom:1px solid rgba(14,15,15,.2);padding:10px 0}
  .about-cap{left:12px;right:12px;bottom:14px;padding:16px 16px 18px}
  .about-frame{aspect-ratio:3/4}
  .about-frame img{object-position:22% 30%}
  /* Mobile features: a horizontal swipe rail with a progress bar instead of a squeezed grid */
  .bento{grid-template-rows:none;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 16px 8px;grid-auto-rows:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .bento::-webkit-scrollbar{display:none}
  .card{flex:0 0 84vw;height:480px;scroll-snap-align:center}
  .card::after{background:linear-gradient(0deg,rgba(14,15,15,.98) 0,rgba(14,15,15,.94) 52%,rgba(14,15,15,.35) 80%,rgba(14,15,15,.1) 100%)}
  .gd-host{aspect-ratio:4/5}
  .gd-host .gd-mini{right:3%;top:4%;width:50%}
  .gd-host .gd-trk,.gd-host .gd-eye{left:4%;top:34%}
  .gd-host .gd-trk{width:44%}
  .gd-host .gd-price{left:46%;top:60%;width:46%}
  .gd-host .gd-cursor{left:42%;top:56%}
  .gd-host .gd-click{left:42%;top:56%}
  .gd-host .gd-key{left:30%;top:50%}
  .gd-cap{font-size:11px;left:8px;top:8px;bottom:auto;max-width:52%}
  /* PROJ-47 (0.6.0): Item-Tracker tile on phones as in the c-phn pattern (end of file): ONE tracker image (the price window; Bobby 2026-10-06, replaces LP-3) in the
     flow on top (it shrinks, never crops), the text below in the flow, no shade over the images, no background map. Card stays 480 px. */
  .c-trk{display:flex;flex-direction:column}
  .c-trk::after{display:none}
  .c-trk>img.bg{display:none}
  .c-trk .duo{position:relative;inset:auto;flex:1 1 0;min-height:0;justify-content:center;align-items:flex-start;gap:12px;padding:16px 18px 0}
  .c-trk .duo img{width:auto;height:100%;min-width:0;max-width:100%;object-fit:contain;object-position:50% 0;box-shadow:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
  .c-trk .duo img+img{display:none}
  .c-trk .card-body{position:relative;flex:none;max-width:none;padding:14px 18px 12px}
  .c-trk h3{margin-bottom:10px}
  .c-trk .tick,.c-trk .ex{display:none}
  .rail-bar{display:block;margin:18px 16px 0;height:3px;background:var(--line);position:relative}
  .rail-bar i{position:absolute;left:0;top:0;bottom:0;width:9%;background:var(--accent)}
  .rail-hint{display:flex;justify-content:space-between;padding:10px 16px 0;font-size:13px;color:var(--sand-dim)}
  .dive-in{padding-left:16px;padding-right:16px}
  .wpn-giant{display:none}
  .phones{height:600px;min-height:0}
  .device{width:240px;border-radius:32px;padding:24px 9px 13px}
  .device img{border-radius:14px}
  .device::before{top:9px;width:46px;height:6px}
  .device.d1{transform:translateX(-36%) rotate(3deg)}
  .device.d2{top:60px;transform:translateX(-96%) rotate(-6deg)}
  .float{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 46px;perspective:none}
  .float-in{display:contents}
  .shot{position:relative;flex:0 0 76vw;max-width:300px;left:auto!important;right:auto!important;top:auto!important;transform:none!important;scroll-snap-align:center}
  .shot.s4{width:auto}
  .cta-art{max-height:380px;aspect-ratio:16/10}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (min-width:700px){ .rail-hint{display:none} }
/* Wide screens without the pinned stage (reduced motion): each step sits beside its own capture */
@media (min-width:900px){
  html:not(.md) .dive-map .dive-in{grid-template-columns:1fr}
  html:not(.md) .dive-map .step{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);column-gap:48px;align-items:start;padding-bottom:28px}
  html:not(.md) .dive-map .step>:not(figure){grid-column:1}
  html:not(.md) .dive-map .step figure{grid-column:2;grid-row:1/span 4;margin:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .nav.hide{transform:none}
}

/* ================= PRODUCTION ADDITIONS (PROJ-27 build 2026-10-03) ================= */
.anchor-alias{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.ico{width:18px;height:18px;flex:none}
/* Header: Buy Me a Coffee as an icon link next to Download (visible at every width) */
.coffee{display:inline-grid;place-items:center;width:44px;height:44px;color:var(--bone-2);border:1px solid var(--line-strong);transition:color .2s var(--ease),border-color .2s var(--ease)}
.coffee:hover{color:var(--accent-hi);border-color:var(--accent)}
.coffee .ico{width:22px;height:22px}
.nav .coffee{margin-left:4px}
.sheet-social{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;font:600 18px/1 var(--cond)}
.sheet-social a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--bone-2)}
.sheet-social a:hover{color:var(--accent-hi)}
.noscript{position:absolute;left:var(--gutter);right:var(--gutter);top:76px;z-index:4;margin:0;padding:10px 14px;background:rgba(14,15,15,.92);color:var(--bone-2);font-size:14px;border:1px solid var(--line-strong)}
/* Hero still without WebGL: phones get their own crop with both walkers in frame */
@media (max-width:699px){
  .topo-fallback{background:radial-gradient(60% 70% at 66% 55%, rgba(255,107,31,.10), transparent 60%), url("../assets/hero-fallback-mobile.webp") center/cover no-repeat, var(--ink-0)}
}
/* Cards: one row of links (deep dive and guide chapter) */
.links{display:flex;flex-wrap:wrap;gap:0 20px;margin:4px 0 0}
.card .links{margin-top:2px}
.dive .links,.scan .links,.phone-copy .links{margin-top:14px}
.dive .links .more,.scan .links .more,.phone-copy .links .more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 15px/1 var(--cond);color:var(--accent-hi);text-decoration:none;letter-spacing:.03em}
.dive .links .more:hover,.scan .links .more:hover,.phone-copy .links .more:hover{text-decoration:underline}
.dive .links svg,.scan .links svg,.phone-copy .links svg{width:14px;height:14px}
.step figure img[width="520"],.step figure img[width="650"]{width:auto;max-width:min(100%,520px)} /* native-size windows are not enlarged */
.ex{margin:6px 0 0;font-size:12.5px;line-height:1.35;color:var(--sand-dim)}
.ex-lede{margin:0 0 18px;font-size:13.5px}
/* Safety & risks (before the download) */
.safety{background:var(--ink-1);border-top:1px solid var(--line);position:relative}
.safety-in{padding:clamp(90px,13vh,140px) var(--gutter);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.safety .h2{font-size:clamp(3.2rem,6.4vw,7rem);margin-bottom:26px}
.safety-head .lede{margin:0 0 18px}
a.ext{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 16px/1.2 var(--cond);letter-spacing:.02em;color:var(--accent-hi);text-decoration:none}
a.ext:hover{text-decoration:underline}
a.ext .ico{width:15px;height:15px}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary,.pn summary,.pn-all>summary{cursor:pointer;list-style:none;position:relative}
.qa summary::-webkit-details-marker,.pn summary::-webkit-details-marker,.pn-all>summary::-webkit-details-marker{display:none}
.qa summary{padding:20px 44px 20px 0;font:700 clamp(19px,1.6vw,23px)/1.15 var(--cond);color:var(--bone)}
.qa summary::after,.pn summary::after,.pn-all>summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(var(--accent),var(--accent)) center/14px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 14px no-repeat;transition:transform .3s var(--ease)}
.qa details[open]>summary::after,.pn[open]>summary::after,.pn-all[open]>summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--accent-hi)}
.qa details>div{padding:0 0 22px;max-width:68ch}
.qa details p{margin:0 0 12px;color:var(--bone-2);font-size:16px}
.qa details p:last-child{margin-bottom:0}
.qa .risk>summary{color:var(--bone)}
.qa .risk>div p:first-child{color:var(--bone)}
/* Download states */
.status .ok{color:var(--olive);border-color:rgba(138,154,91,.6)}
.status .lic{margin-top:14px}
.status .lic a{color:var(--accent-hi)}
.status .retry{margin-top:16px}
.status[data-state="failed"] h3{color:var(--red-text)}
.dl-slot{display:contents}
.cta .btn .ico{width:18px;height:18px}
.btn.dl{background:var(--ink-0);color:var(--bone)}
.btn.dl:hover{background:var(--ink-2)}
/* Patch notes */
.pnotes{background:var(--ink-0);border-top:1px solid var(--line)}
.pn-in{padding:clamp(90px,13vh,140px) var(--gutter) clamp(80px,11vh,120px);display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,4vw,64px);align-items:start}
.pnotes .h2{font-size:clamp(3.2rem,6.4vw,7rem);margin-bottom:24px}
.pn-head .lede{margin:0}
.pn{border-top:1px solid var(--line)}
.pn summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:20px 44px 20px 0}
.pn summary strong{grid-column:2;font:700 clamp(19px,1.6vw,23px)/1.15 var(--cond);color:var(--bone)}
.pn summary .pn-v{grid-row:1/span 2;font:800 clamp(28px,2.6vw,38px)/.9 var(--display);color:var(--accent);font-variant-numeric:tabular-nums;min-width:3.2ch}
.pn summary .pn-s,.pn summary time{grid-column:2;font:500 13.5px/1.3 var(--body);color:var(--sand)}
.pn summary .pn-s{display:inline-block;justify-self:start;padding:3px 8px;font:600 12.5px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--olive);border:1px solid rgba(138,154,91,.55)}
.pn summary .pn-s.prep{color:var(--amber);border-color:rgba(216,165,74,.55)}
.pn summary:hover strong{color:var(--accent-hi)}
.pn ul{margin:0;padding:0 0 24px;list-style:none;display:grid;gap:10px;max-width:74ch}
.pn li{position:relative;padding-left:20px;color:var(--bone-2);font-size:15.5px;line-height:1.5}
.pn li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:2px;background:var(--accent)}
.pn li b{color:var(--bone);font-weight:600}
.pn-all{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pn-all>summary{padding:20px 44px 20px 0;font:700 18px/1.2 var(--cond);letter-spacing:.03em;text-transform:uppercase;color:var(--accent-hi)}
.pn-rest{padding:0 0 8px 0}
.pn-rest .pn summary .pn-v{font-size:clamp(22px,2vw,30px)}
.pn-rest .pn:first-child{border-top:0}
/* Footer extras */
.foot-bot p+p{color:var(--sand-dim)}
/* PROD (Fix DE-Überschriften 03.10.): the footer word measured 3.53 em wide, at 900-1180 px its column (next to the three
   link columns) is narrower than 12vw x 3.53 (1000 px: 423 px word in a 412 px column). The word now also follows its
   column (27cqi = about 95 % of it); above about 1180 px 12vw/12rem still win, so the wide layouts are unchanged. */
.foot-brand{container-type:inline-size;min-width:0}
.foot-word{font-size:clamp(4rem,min(12vw,27cqi),12rem)}
@media (max-width:1180px){
  .nav .btn{margin-left:0}
  .nav .coffee{margin-left:auto}
}
@media (max-width:1180px) and (min-width:700px){ .bento .c-trk{min-height:460px} .bento .c-map{min-height:560px} }
@media (max-width:899px){
  .safety-in,.pn-in{grid-template-columns:1fr}
}
@media (max-width:699px){
  .coffee{width:40px;height:40px}
  .nav-in{gap:8px}
  .noscript{top:72px}
  .qa summary{padding-right:36px}
  .pn summary{grid-template-columns:1fr;padding-right:36px}
  .pn summary strong,.pn summary .pn-s,.pn summary time{grid-column:1}
  .pn summary .pn-v{grid-row:auto}
}img.img-missing{visibility:hidden} /* a capture that failed to load keeps its box, no broken-image icon */
/* PROD: hero intro as CSS keyframes (was GSAP in the mockup: letters yPercent 105, rotate 7, expo.out 1 s, stagger .055 s,
   delay .1 s; copy y 18 px, .8 s, stagger .08 s, delay .55 s). Runs with the first paint, no script needed. */
@media (prefers-reduced-motion: no-preference){
  #heroFrame .hero-word .ch{animation:rb-ch 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.1s + var(--i,0) * .055s)}
  #heroFrame .hero-copy>*{animation:rb-up .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.55s + var(--i,0) * .08s)}
}
@keyframes rb-ch{from{transform:translateY(105%) rotate(7deg);opacity:0}}
@keyframes rb-up{from{transform:translateY(18px);opacity:0}}
/* PROJ-34 W4: the phone card shows the whole phone capture as a 390:844 screen on dark ground (contain), beside the text
   (desktop grid, the last bento row is 380 px instead of 330 px so the text fits next to it from 1181 px on) or above it
   (tablet and phones), so neither the text nor the card's shade covers the logo or the map. */
.c-phn::after{display:none}
.c-phn>img{aspect-ratio:390/844;object-fit:contain;object-position:50% 50%;background:var(--chrome);opacity:1;box-shadow:0 0 0 1px var(--line-strong),0 18px 40px rgba(0,0,0,.55)}
@media (min-width:1181px){
  .c-phn{container-type:size}
  .c-phn>img{inset:18px 18px auto auto;width:auto;height:min(100cqh - 36px,280px)}
  .c-phn .card-body{right:auto;width:calc(100% - min(100cqh - 36px,280px) * 390 / 844 - 24px)}
}
@media (max-width:1180px){
  .c-phn{display:flex;flex-direction:column}
  .c-phn>img{position:relative;inset:auto;width:auto;align-self:center;margin:18px 0 4px}
  .c-phn .card-body{position:relative}
}
@media (min-width:700px) and (max-width:1180px){ .c-phn>img{flex:none;height:260px} }
@media (max-width:699px){ .c-phn>img{flex:1 1 0;min-height:0;height:auto} }