/* I SMART QR — "Industrial Signage" design system
   Accent cyan-blue #0B72E7 · Archivo/Inter/JetBrains Mono · QR-module rail signature */
:root{
  --bg:#FFFFFF; --surface:#ECEFF2; --surface-2:#E0E4E9;
  --ink:#0A0D12; --text:#10151B; --text-muted:#566372; --border:#D5DAE0;
  --accent:#0B72E7; --accent-700:#0857B0; --highlight:#FFB300; --highlight-deep:#B97700;
  --on-dark:#EAEEF3; --on-dark-muted:#93A0AE; --border-dark:#2A3540;
  --maxw:1240px; --radius:4px; --header-h:74px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.4s; --shadow:0 18px 50px -18px rgba(10,13,18,.4);
  --display:"Archivo",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --fs-h1:clamp(2.7rem,7vw,5.5rem); --fs-h2:clamp(2rem,4.2vw,3.3rem); --fs-h3:clamp(1.2rem,2vw,1.55rem);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0A0D12; --surface:#10161D; --surface-2:#1C2530;
  --text:#EAEEF3; --text-muted:#93A0AE; --border:#26303C;
  --accent:#2D8CFF; --accent-700:#0B72E7; --shadow:0 18px 50px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:1rem;line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.98;color:var(--text)}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);font-weight:800}h4{font-weight:800}
a{color:var(--accent);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--accent-700)}
img,svg{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.section{padding:clamp(2.25rem,5vw,3.75rem) 0}
.section--alt{background:var(--surface)}
.section--dark{background:var(--ink);color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}.section--dark p{color:var(--on-dark-muted)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:300}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--highlight-deep);display:inline-flex;align-items:center;gap:.5rem}
[data-theme="dark"] .eyebrow,.section--dark .eyebrow,.hero .eyebrow{color:var(--highlight)}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor}
.stripe{height:14px;overflow:hidden;background:#0A0D12;position:relative}
.stripe::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,
    #0B72E7 0 14px,
    #FFFFFF 14px 28px,
    #0A0D12 28px 42px,
    #FFB300 42px 56px);
  background-size:56px 100%}
@media(prefers-reduced-motion:no-preference){.stripe::before{animation:railRoll 3s linear infinite}}
@keyframes railRoll{to{background-position:56px 0}}
.btn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease);font-size:.92rem}
.btn--primary{background:var(--accent);color:#fff;position:relative;overflow:hidden}
.btn--primary:hover{background:var(--accent-700);transform:translateY(-1px);color:#fff}
.btn--primary::after{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);opacity:0}
.btn--primary:hover::after{animation:sheen .7s var(--ease)}
@keyframes sheen{0%{left:-65%;opacity:1}100%{left:130%;opacity:0}}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--onDark{background:#fff;color:var(--ink)}.btn--onDark:hover{background:var(--highlight);color:var(--ink)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.grid{display:grid;gap:1rem}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.nav{position:sticky;top:0;z-index:100;height:var(--header-h);background:var(--bg);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:8px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:var(--text);font-size:1.05rem}
.brand .mark{width:30px;height:30px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;flex:0 0 auto}
.brand .mark i{background:var(--text);border-radius:1px}.brand .mark i.a{background:var(--accent)}
.navlinks{display:flex;gap:24px;align-items:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.navlinks>a{color:var(--text-muted)}.navlinks>a:hover{color:var(--text)}
.navtoggle{display:none;background:none;border:0;color:var(--text);font-size:1.5rem;cursor:pointer}
.caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:5px;transition:transform var(--dur) var(--ease)}
.has-mega{position:relative}
.mega-trigger{display:inline-flex;align-items:center;background:none;border:0;color:var(--text-muted);font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.mega-trigger:hover,.has-mega[aria-expanded=true] .mega-trigger{color:var(--text)}
.has-mega[aria-expanded=true] .caret{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);min-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;opacity:0;visibility:hidden;pointer-events:none;display:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);z-index:120}
.has-mega[aria-expanded=true] .mega{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-link{display:flex;gap:12px;padding:12px;border-radius:var(--radius);transition:background var(--dur) var(--ease);align-items:flex-start}
.mega-link:hover{background:var(--surface-2)}
.mega-link .mi{flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius);background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1rem}
.mega-link .mt{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--text);font-size:.86rem}
.mega-link .md{color:var(--text-muted);font-size:.78rem;margin-top:3px;line-height:1.35;font-family:var(--body);text-transform:none}
.mega-foot{margin-top:6px;padding:12px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.mega-foot span{color:var(--text-muted);font-family:var(--mono);font-size:.74rem}
.theme-toggle{background:var(--surface);border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:var(--radius);cursor:pointer;display:grid;place-items:center;font-size:1rem;transition:all var(--dur) var(--ease);flex:0 0 auto}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle .sun{display:none}.theme-toggle .moon{display:block}
[data-theme="dark"] .theme-toggle .sun{display:block}[data-theme="dark"] .theme-toggle .moon{display:none}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--highlight),var(--accent));z-index:200}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-l{opacity:0;transform:translateX(-46px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-r{opacity:0;transform:translateX(46px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in,.reveal-l.in,.reveal-r.in,.reveal-scale.in{opacity:1;transform:none}
.stagger>.reveal:nth-child(2){transition-delay:.09s}.stagger>.reveal:nth-child(3){transition-delay:.18s}.stagger>.reveal:nth-child(4){transition-delay:.27s}.stagger>.reveal:nth-child(5){transition-delay:.36s}
.hero{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden;padding:clamp(3rem,6vw,4.75rem) 0}
.hero h1{color:#fff}
.hero .lead{color:var(--on-dark-muted);font-size:1.12rem;max-width:54ch;margin:1.4rem 0 2rem;line-height:1.6}
.hero-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--border-dark) 1px,transparent 1px),linear-gradient(90deg,var(--border-dark) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 92%)}
.hero .wrap{position:relative;z-index:1}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.6rem}
.chips span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;border:1px solid var(--border-dark);color:var(--on-dark-muted);padding:.34rem .7rem;border-radius:var(--radius);text-transform:uppercase}
.sec-head{max-width:680px;margin:0 auto clamp(1.5rem,3vw,2.25rem)}.sec-head.center{text-align:center}
.sec-head .eyebrow{margin-bottom:1rem}.sec-head p{color:var(--text-muted);margin-top:1rem}
footer{background:var(--ink);color:var(--on-dark)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:clamp(2.5rem,5vw,4rem) 0}
.foot-grid .blurb{color:var(--on-dark-muted);font-size:.9rem;margin:14px 0;max-width:34ch}
.foot-grid h4{font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.1em;color:var(--highlight);text-transform:uppercase;margin-bottom:14px}
.foot-grid h4::before{content:"// "}
.foot-grid a{display:block;color:var(--on-dark-muted);font-size:.9rem;margin-bottom:9px}.foot-grid a:hover{color:#fff}
.foot-grid .brand{color:#fff}.foot-grid .brand .mark i{background:#fff}.foot-grid .brand .mark i.a{background:var(--accent)}
.social{display:flex;gap:8px;margin-top:14px}
.social a{width:38px;height:38px;border:1px solid var(--border-dark);border-radius:var(--radius);display:grid;place-items:center;color:var(--on-dark);margin:0;transition:all var(--dur) var(--ease)}
.social a:hover{background:var(--highlight);color:var(--ink);border-color:var(--highlight);transform:translateY(-2px)}
.footer-bottom{border-top:1px solid var(--border-dark);padding:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:.76rem;color:var(--on-dark-muted)}
.footer-bottom a{color:var(--on-dark-muted)}.footer-bottom a:hover{color:#fff}
.fab{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:var(--radius);background:var(--accent);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;font-size:1.2rem;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);z-index:90}
.fab.show{opacity:1;visibility:visible}.fab:hover{background:var(--accent-700);transform:translateY(-3px)}
.scrim{position:fixed;inset:0;background:rgba(10,13,18,.5);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease);z-index:150}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(320px,86vw);background:var(--bg);border-left:1px solid var(--border);transform:translateX(100%);transition:transform var(--dur) var(--ease);z-index:160;padding:24px;overflow-y:auto}
.drawer.open{transform:none}
.drawer a{display:block;font-family:var(--mono);text-transform:uppercase;font-size:.84rem;color:var(--text);padding:12px 0;border-bottom:1px solid var(--border)}
.drawer .dhead{font-family:var(--mono);font-size:.72rem;color:var(--highlight-deep);letter-spacing:.1em;text-transform:uppercase;margin:18px 0 4px}
.drawer-close{background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer;float:right}
@media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){.navlinks{display:none}.navtoggle{display:block}.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.reveal-l,.reveal-r,.reveal-scale{opacity:1!important;transform:none!important}}

/* ---- legacy token aliases (so sidebar FAQ/guide builders map onto the new system) ---- */
:root{
  --fd:var(--display); --fb:var(--body); --fm:var(--mono);
  --signal:var(--accent); --signal2:var(--accent-700);
  --ink-legacy:var(--ink);
  --light:var(--bg); --light2:var(--surface); --light3:var(--surface-2);
  --lite-line:var(--border); --lite-ink:var(--text); --lite-muted:var(--text-muted); --lite-faint:var(--text-muted);
  --bg2:var(--surface); --panel:var(--surface); --panel2:var(--surface-2);
  --line:var(--border); --line2:var(--border); --muted:var(--text-muted); --faint:var(--text-muted);
  --r:var(--radius); --rs:var(--radius); --rl:var(--radius);
  --grad-violet:linear-gradient(135deg,var(--accent),var(--accent-700));
  --grad-aurora:linear-gradient(135deg,var(--accent),var(--highlight));
  --maxw:1240px;
}
/* sidebar layout (FAQ + guide) themed to industrial signage */
.gnav a.active{background:color-mix(in srgb,var(--accent) 14%,transparent)!important}
.gnav a.active .gi{background:var(--accent)!important}
.faq2 button{font-family:var(--display)!important;text-transform:uppercase;font-size:.92rem!important;letter-spacing:0}
.gcontent h2,.gcontent h3{font-family:var(--display)!important;text-transform:uppercase}
.gsidebar .ghead{font-family:var(--mono)!important}
.gnav a{font-family:var(--mono)!important;text-transform:uppercase;font-size:.78rem!important;letter-spacing:.04em}

/* feature page + hub specifics */
.altrow{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center;padding:26px 0}
.altrow-media{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.altrow-txt h3{margin:.4rem 0 .6rem}
.altrow-txt p{color:var(--text-muted)}
@media(max-width:900px){.altrow{grid-template-columns:1fr;gap:22px;direction:ltr!important;padding:26px 0}}
ul.ticks{list-style:none;padding:0;margin:.6rem 0 0}
ul.ticks li{padding:.5rem 0 .5rem 1.7rem;position:relative;color:var(--text-muted)}
ul.ticks li::before{content:"";position:absolute;left:0;top:.85rem;width:12px;height:12px;border-radius:2px;background:var(--accent)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.prevnext .pn{font-family:var(--mono);font-size:.72rem;color:var(--text-muted);text-transform:uppercase}
.prevnext h4{margin-top:.3rem;font-size:1rem}
.feat-card{display:flex;flex-direction:column;gap:.6rem;text-decoration:none}
.feat-card .fi{width:46px;height:46px;border-radius:var(--radius);background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1.3rem}
.feat-card h3{font-size:1.05rem}
.feat-card p{color:var(--text-muted);font-size:.9rem;flex:1}
.feat-card .more{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;color:var(--accent)}
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.statband .num{font-family:var(--display);font-weight:900;font-size:clamp(2rem,4vw,3rem);color:var(--accent)}
.statband .lbl{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--on-dark-muted);margin-top:4px}
@media(max-width:640px){.statband{grid-template-columns:1fr 1fr}}
/* sidebar layout (guide + faq) */
.sidebarwrap{display:grid;grid-template-columns:280px 1fr;max-width:var(--maxw);margin:0 auto}
.gsidebar{position:sticky;top:var(--header-h);align-self:start;height:calc(100vh - var(--header-h));overflow-y:auto;border-right:1px solid var(--border);padding:26px 18px;background:var(--surface)}
.gsidebar .ghead{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--highlight-deep);margin:22px 0 10px;padding-left:10px}
.gsidebar .ghead:first-child{margin-top:0}
.gnav a{display:flex;align-items:center;gap:11px;padding:10px;border-radius:var(--radius);color:var(--text-muted);font-size:.9rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em}
.gnav a .gi{width:30px;height:30px;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border);display:grid;place-items:center;font-size:.95rem;color:var(--accent);flex:0 0 auto}
.gnav a:hover{background:var(--bg);color:var(--text)}
.gnav a.active{background:var(--accent);color:#fff}.gnav a.active .gi{background:#fff;color:var(--accent);border-color:#fff}
.gcontent{padding:40px 44px 80px;min-width:0}
.gcontent section,.gcontent .fcat{padding:28px 0;border-bottom:1px solid var(--border);scroll-margin-top:90px}
.gcontent h2{margin-bottom:.6rem}
.gcontent h3{margin:1.4rem 0 .5rem;color:var(--accent)}
.gcontent p,.gcontent li{color:var(--text-muted);line-height:1.7}
.gcontent p{margin:.7rem 0}.gcontent ul,.gcontent ol{padding-left:1.3rem;margin:.7rem 0}.gcontent li{margin:.35rem 0}
.gcontent table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}
.gcontent th,.gcontent td{border:1px solid var(--border);padding:9px 11px;text-align:left;vertical-align:top}
.gcontent th{background:var(--surface);font-family:var(--display);text-transform:uppercase;font-size:.8rem;color:var(--text)}
.gnote{background:rgba(11,114,231,.07);border:1px solid rgba(11,114,231,.25);border-radius:var(--radius);padding:13px 16px;margin:1rem 0;color:var(--text)}
.gstep{display:flex;gap:14px;margin:1rem 0;align-items:flex-start}
.gstep .n{flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius);background:var(--accent);color:#fff;font-family:var(--display);font-weight:800;display:grid;place-items:center}
.faq2{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;background:var(--surface)}
.faq2 button{width:100%;text-align:left;background:none;border:0;color:var(--text);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.92rem;padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq2 .chev{color:var(--text-muted);transition:transform var(--dur)}
.faq2.open .chev{transform:rotate(180deg);color:var(--accent)}
.faq2 .a{max-height:0;overflow:hidden;transition:max-height var(--dur)}
.faq2 .a .inner{padding:0 16px 14px;color:var(--text-muted)}
.faq2.open .a{max-height:420px}
@media(max-width:900px){.sidebarwrap{grid-template-columns:1fr}.gsidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border)}.gnav{display:grid;grid-template-columns:1fr 1fr;gap:4px}.gcontent{padding:28px 20px 60px}}

/* ============ FIXES PASS ============ */
/* #4 cookie consent — robust fixed corner card (moved from inline) */
.cookie{position:fixed!important;left:24px;bottom:24px;max-width:640px;width:calc(100% - 48px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);z-index:300;display:none}
.cookie.show{display:block}
.cookie h4{font-size:.95rem;margin-bottom:6px;font-family:var(--display);text-transform:uppercase}
.cookie p{font-size:.84rem;color:var(--text-muted);margin-bottom:12px;line-height:1.5}
.cookie .row{display:flex;gap:8px;flex-wrap:wrap}
.cookie .prefs{margin:10px 0}
.cookie .pref{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--border);font-size:.84rem}
@media(max-width:640px){.cookie{left:12px;bottom:12px;width:calc(100% - 24px);padding:16px}}

/* #3 anchor / hero offset so sticky header never overlaps content */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
#generator{scroll-margin-top:0}

/* #2 full-width header: let nav span full width, center the inner wrap */
.nav{width:100%}
.nav .wrap{max-width:var(--maxw);width:100%}
/* keep nav from colliding: allow wrapping room on mid screens */
@media(max-width:1100px) and (min-width:1001px){.navlinks{gap:18px}}

/* #1 hero heading — white + blue, no heavy highlight box */
.hero h1 .hl{color:var(--accent)}
.hero h1 .box{background:var(--accent);color:#fff;padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* #6 blog carousel */
.blogslider{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg)}
.bs-track{display:flex;transition:transform .5s var(--ease)}
.bs-slide{flex:0 0 100%;padding:clamp(1.5rem,4vw,2.6rem);text-decoration:none;display:block;min-height:200px}
.bs-cat{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.bs-slide h3{font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--text);margin-bottom:.6rem;max-width:24ch}
.bs-slide p{color:var(--text-muted);max-width:50ch;margin-bottom:1rem}
.bs-more{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;color:var(--accent)}
.bs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:1.4rem;cursor:pointer;display:grid;place-items:center;z-index:2;transition:all var(--dur)}
.bs-arrow:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.bs-arrow.prev{left:14px}.bs-arrow.next{right:14px}
.bs-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.bs-dots button{width:8px;height:8px;border-radius:1px;border:0;background:var(--border);cursor:pointer;padding:0}
.bs-dots button.on{background:var(--accent);width:20px}
@media(max-width:640px){.bs-slide{padding:1.5rem 1.2rem 2.6rem}.bs-arrow{display:none}}

/* #5 blog index wireframe layout */
.blog-feat{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.feat-main{padding:0;overflow:hidden;text-decoration:none;display:block}
.feat-cover{height:300px;overflow:hidden;border-bottom:1px solid var(--border)}
.feat-body{padding:1.6rem}
.feat-body h2{font-size:clamp(1.4rem,3vw,2rem);margin:.4rem 0 .6rem;color:var(--text)}
.feat-body p{color:var(--text-muted);margin-bottom:1rem}
.most-read{border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;background:var(--surface)}
.most-read .eyebrow{margin-bottom:1rem}
.mr-item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border);text-decoration:none;align-items:center}
.mr-item:first-of-type{border-top:0}
.mr-cover{flex:0 0 64px;height:64px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.mr-date{font-family:var(--mono);font-size:.66rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.mr-item h4{font-size:.9rem;color:var(--text);margin-top:3px;line-height:1.3}
.mr-item:hover h4{color:var(--accent)}
.cat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;border-top:2px solid var(--ink);padding-top:1rem}
.cat-head h3{font-size:1.2rem}
.blog-card{padding:0;overflow:hidden;text-decoration:none;display:block}
.bc-cover{height:140px;overflow:hidden;border-bottom:1px solid var(--border)}
.blog-card .mr-date{display:block;padding:1rem 1rem 0}
.blog-card h4{font-size:1rem;color:var(--text);margin:.4rem 0;padding:0 1rem;line-height:1.3}
.blog-card p{color:var(--text-muted);font-size:.84rem;padding:0 1rem 1.2rem}
.blog-card:hover h4{color:var(--accent)}
@media(max-width:900px){.blog-feat{grid-template-columns:1fr}}

/* ===== dark-mode home section separation ===== */
/* In dark mode the plain .section equals the hero black, so give it a subtle lift
   and add visible top/bottom borders so dark sections read as distinct panels. */
[data-theme="dark"] .section{background:#0d141c}
[data-theme="dark"] .section--alt{background:#10161D;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
[data-theme="dark"] .section{border-top:1px solid rgba(255,255,255,.04)}
/* hero stays pure ink in both modes; add a hairline under it so it separates from first section */
.hero{border-bottom:1px solid var(--border-dark)}
/* the dark guide card sits inside a section — keep its contrast in dark mode */
[data-theme="dark"] .card[style*="--ink"]{background:#06090d!important}
/* light-mode: ensure plain .section is pure white vs the grey --alt for clear alternation */
.section{background:var(--bg)}

/* ===== real logo ===== */
.brand img.logo{height:34px;width:auto}
.brand{gap:10px}
/* logo swap — explicit, one variant visible per context */
.brand .logo-color{display:block}
.brand .logo-white{display:none}
/* dark surfaces (footer, hero, dark sections): white logo */
footer .brand .logo-color,.hero .brand .logo-color,.section--dark .brand .logo-color{display:none!important}
footer .brand .logo-white,.hero .brand .logo-white,.section--dark .brand .logo-white{display:block!important}
/* dark theme nav: white logo */
[data-theme="dark"] .nav .brand .logo-color{display:none!important}
[data-theme="dark"] .nav .brand .logo-white{display:block!important}

/* PWA install button */
.install-app{padding:.5rem .8rem;font-size:.78rem}
@media(max-width:1100px){.nav .install-app{display:none!important}}

/* Fix 6: balance palette — selective amber accents */
.statband > div:nth-child(2) .num{color:var(--highlight-deep)}
[data-theme="dark"] .statband > div:nth-child(2) .num{color:var(--highlight)}
.feat-card:hover .fi{background:var(--highlight-deep)}
.eyebrow{color:var(--highlight-deep)}
/* amber underline accent on section headings' eyebrow dash already uses currentColor */
.bs-cat{color:var(--highlight-deep)}
[data-theme="dark"] .bs-cat{color:var(--highlight)}