/* ===========================================================
   VNISH — Extra production styles (extends kit.css + blog.css)
   New sections: nav buttons/mobile, comparison, ROI band,
   supported models, reviews, landing blog block, prose pages.
   All built on tokens from colors_and_type.css.
   =========================================================== */

/* ===========================================================
   Layout + hover polish (animation now via kit.css circuit bg + reveal)
   =========================================================== */
body{overflow-x:hidden}
/* content sits above the fixed circuit canvas (z-index:-1 in kit.css) */
.nav{z-index:50}

/* ---- Hero: centered column, lively staggered layout (responsive) ---- */
.hero-inner{text-align:left;margin:0 auto;max-width:1040px}
.hero h1{margin-left:0}
.hero .sub{margin-left:auto;margin-right:0;max-width:560px}      /* sub-headline shifted right */
.hero-cta{justify-content:flex-end}                              /* buttons further right */
.hero .device,.hero .device-hero{margin:48px auto 0}            /* screenshot centered */
/* dim the top of the screenshot a touch */
.device-screen::before{content:"";position:absolute;left:0;right:0;top:0;height:42%;background:linear-gradient(180deg,rgba(7,9,12,.62),rgba(7,9,12,0));z-index:1;pointer-events:none}
.float-badge{z-index:2}
/* section heads + partner stay left-aligned */
.sec-head.center{text-align:left;margin-left:0;margin-right:0}
.partner{text-align:left}
.partner p{margin-left:0}
.partner .pcta{justify-content:flex-start}
/* responsive stat band (8y · 400k+ · 300+ · 1 GW+) */
.statband{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){
  .hero-inner{text-align:center}
  .hero .sub{margin:22px auto 0}
  .hero-cta{justify-content:center}
  .statband{grid-template-columns:repeat(2,1fr);gap:28px 20px}
}
@media(max-width:430px){.statband{grid-template-columns:1fr}}

/* keyboard focus visibility (was missing — keyboard users couldn't see focus) */
a:focus-visible,button:focus-visible,.faq-q:focus-visible,.select-btn:focus-visible,.lang-btn:focus-visible,.topic:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}

/* Copy-link feedback in article share bar */
.share-msg{font-size:12.5px;font-weight:600;color:var(--accent);opacity:0;transition:opacity var(--dur);margin-left:4px;white-space:nowrap}
.share-msg.show{opacity:1}

/* Heading-level aliases (a11y outline) — keep the visual sizing of the former h4/h5 */
.model-card h3{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--fg-1);margin:10px 0 6px}
.dl-aside h3{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--fg-1);margin:0}
.faq-q h3{font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--fg-1);margin:0;letter-spacing:-.01em}
.faq-item:hover .faq-q h3{color:var(--accent)}
.foot-col h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin:0 0 16px}
.grid-head h2{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--fg-1);margin:0}

/* Respect reduced-motion for all looping/auto-playing animations */
@media (prefers-reduced-motion: reduce){
  .float-badge,.eyebrow-pill .dot,.partner::after,.device-hero,.device-hero.in,.live .live-dot{animation:none !important}
  .hero h1 .rot{opacity:1 !important;transform:none !important}
  .hero h1 .rot::after{animation:none !important}
}

/* hover polish */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--accent);transition:right var(--dur) var(--ease-out)}
.nav-links a:hover::after{right:0}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s var(--ease-out)}
.btn-primary:hover::after{left:140%}
.model-card,.rev-card,.card,.rc{transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur),background var(--dur)}
.roi .rc:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-md),0 0 0 1px var(--accent-line)}
.util{transition:background var(--dur)}
.util:hover{background:var(--bg-alt)}

/* 3-column download grid */
.dl-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.dl-grid{grid-template-columns:1fr}}

/* ---- Nav: dual CTA + mobile ---- */
.nav-cta-row{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-sm);width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer;color:var(--fg-1)}
.nav-toggle svg{width:20px;height:20px}
.btn-partner{background:transparent;color:var(--accent);border-color:var(--accent-line)}
.btn-partner:hover{background:var(--accent-soft);border-color:var(--accent)}

@media(max-width:980px){
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:rgba(10,13,17,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:8px 0}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 32px;font-size:16px}
  .nav-toggle{display:inline-flex}
  .nav-tg{display:none}
  .nav .container{position:relative}
  .nav-cta-row .btn span.lbl-long{display:none}
}
/* Keep "Become a Partner" in the header on all sizes (icon-only on small screens). */

/* ---- Download selector: hide menus until their field is open (fixes overlap/selection bug) ---- */
.select .menu{display:none}
.select-btn.open + .menu{display:block}

/* ---- Language switcher ---- */
.lang-switch{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-md);padding:9px 12px;color:var(--fg-1);font-family:var(--font-body);font-weight:600;font-size:13.5px;cursor:pointer;transition:border-color var(--dur)}
.lang-btn:hover{border-color:var(--ink-500)}
.lang-btn svg{width:15px;height:15px;color:var(--fg-3)}
.lang-btn svg:first-child{color:var(--accent)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;display:none;flex-direction:column;min-width:190px;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:6px}
.lang-switch.open .lang-menu{display:flex}
.lang-menu a{padding:10px 12px;border-radius:var(--r-sm);font-size:14px;color:var(--fg-2);cursor:pointer;transition:background var(--dur)}
.lang-menu a:hover{background:var(--surface-hover);color:var(--fg-1)}
.lang-menu a.active{color:var(--accent)}
@media(max-width:980px){.lang-btn span{display:none}.lang-btn{padding:9px 10px}}

/* ---- Hero trust — bigger, spread out, lively ---- */
.hero-trust{display:flex;align-items:flex-start;justify-content:space-between;gap:18px 36px;margin-top:50px;flex-wrap:wrap}
.hero-trust .ht-label{flex-basis:100%;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 6px}
.hero-trust .ht-item{display:flex;flex-direction:column;border:none;padding:0;font-size:14px;color:var(--fg-3);flex:1 1 auto;white-space:nowrap}
.hero-trust .ht-item b{display:block;color:var(--fg-1);font-family:var(--font-mono);font-weight:600;font-size:clamp(26px,3.4vw,42px);line-height:1;margin:0 0 6px}
.hero-trust .ht-item:nth-child(3){transform:translateY(13px)}
.hero-trust .ht-item:nth-child(4){transform:translateY(-7px)}
@media(max-width:760px){
  .hero-trust{justify-content:center;text-align:center;gap:24px}
  .hero-trust .ht-label{text-align:center}
  .hero-trust .ht-item{flex:0 0 auto;align-items:center}
  .hero-trust .ht-item:nth-child(3),.hero-trust .ht-item:nth-child(4){transform:none}
}

/* ---- Generic section head centered variant ---- */
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{margin-bottom:14px}

/* ---- Comparison table (VNISH vs Stock) ---- */
.cmp{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-md)}
.cmp table{width:100%;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--border-soft)}
.cmp thead th{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);background:var(--bg-alt)}
.cmp thead th.col-vnish{color:var(--accent)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp td.feat{color:var(--fg-1);font-weight:600;font-family:var(--font-display)}
.cmp td.vnish{color:var(--fg-1)}
.cmp td.stock{color:var(--fg-3)}
.cmp td .ic{display:inline-flex;align-items:center;gap:9px}
.cmp td .ic svg{width:17px;height:17px;flex:none}
.cmp .yes svg{color:var(--accent)}
.cmp .no svg{color:var(--ink-400)}
.cmp tbody tr{transition:background var(--dur)}
.cmp tbody tr:hover{background:var(--bg-alt)}
.cmp .col-vnish-cell{background:rgba(var(--accent-rgb),.04)}

/* ---- Split feature section (image/mock + text) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.rev .split-media{order:2}
.split-text h2{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3vw,38px);letter-spacing:-.022em;color:var(--fg-1);margin:14px 0 16px;line-height:1.12}
.split-text h2 em{font-style:normal;color:var(--accent)}
.split-text p{font-size:16.5px;line-height:1.65;color:var(--fg-2);margin:0 0 22px}
.feat-list{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:14px}
.feat-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--fg-1)}
.feat-list li svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:1px}
.feat-list li b{display:block;font-weight:600}
.feat-list li span{color:var(--fg-3);font-weight:400}

/* media mock card */
.mock{border-radius:var(--r-2xl);border:1px solid var(--border-strong);background:linear-gradient(180deg,var(--ink-800),var(--ink-850));box-shadow:var(--shadow-lg),var(--glow-accent);padding:26px;position:relative;overflow:hidden}
.mock .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(90% 80% at 60% 10%,#000,transparent 75%);pointer-events:none}
.mock-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border-soft)}
.mock-row:last-child{border-bottom:none}
.mock-row .lbl{font-size:13px;color:var(--fg-3)}
.mock-row .val{font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--fg-1);font-variant-numeric:tabular-nums}
.mock-row .val em{color:var(--accent);font-style:normal}
.mock-bar{height:8px;border-radius:var(--r-pill);background:var(--ink-900);border:1px solid var(--border);overflow:hidden;position:relative;margin-top:6px}
.mock-bar i{position:absolute;inset:0;width:var(--w,70%);background:var(--grad-accent);border-radius:var(--r-pill)}

/* ---- ROI band ---- */
.roi{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.roi .rc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;text-align:center;box-shadow:var(--shadow-md)}
.roi .rc .v{font-family:var(--font-mono);font-weight:500;font-size:clamp(26px,3vw,38px);color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.roi .rc .k{font-size:13.5px;color:var(--fg-3);margin-top:12px;line-height:1.45}

/* ---- Supported models grid ---- */
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.model-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-md);transition:transform var(--dur),border-color var(--dur)}
.model-card:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.model-card .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.model-card h4{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--fg-1);margin:10px 0 6px}
.model-card p{font-size:13.5px;color:var(--fg-3);margin:0;line-height:1.5}
.model-card .specs{font-family:var(--font-mono);font-size:12px;color:var(--fg-2);margin-top:12px;display:flex;gap:14px}
.model-card .specs span em{color:var(--accent);font-style:normal}

/* ---- Reviews ---- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.rev-card .stars{display:flex;gap:3px;margin-bottom:16px;color:var(--accent)}
.rev-card .stars svg{width:16px;height:16px;fill:var(--accent)}
.rev-card .quote{font-size:15px;line-height:1.6;color:var(--fg-2);margin:0 0 22px;flex:1}
.rev-card .who{display:flex;align-items:center;gap:12px}
.rev-card .who .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--lime-300),var(--lime-500));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--accent-ink)}
.rev-card .who .n{font-weight:600;color:var(--fg-1);font-size:14.5px}
.rev-card .who .r{font-size:12.5px;color:var(--fg-3)}

/* ---- About band ---- */
.about-stats{display:flex;gap:48px;margin-top:32px;flex-wrap:wrap}
.about-stats .v{font-family:var(--font-mono);font-weight:500;font-size:clamp(28px,3vw,40px);color:var(--fg-1);font-variant-numeric:tabular-nums}
.about-stats .v em{color:var(--accent);font-style:normal}
.about-stats .k{font-size:13px;color:var(--fg-3);margin-top:8px}

/* ---- Landing blog block ---- */
.blogblock-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.live-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-pill);padding:6px 13px}
.live-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2s var(--ease-in-out) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.live-pill .dot{animation:none}}
.bb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bb-empty{color:var(--fg-3);font-size:14px;padding:24px 0}

/* ---- Article featured images (when provided) ---- */
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- Blog article: keep buttons readable (not styled as prose links / icon chips) ---- */
.prose a.btn{text-decoration:none}
.prose a.btn.btn-primary{color:var(--accent-ink)}
.prose a.btn.btn-secondary,.prose a.btn.btn-ghost{color:var(--fg-1)}
.share a.btn{width:auto;height:auto;border:1px solid transparent;border-radius:var(--r-md)}
.share a.btn.btn-primary{color:var(--accent-ink)}
.cta-inline .ci-btns .btn{text-decoration:none}

/* ---- Prose subpages ---- */
.page-hero{padding:64px 0 8px;position:relative;overflow:hidden;background-image:var(--grad-hero)}
.page-hero .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3);margin-bottom:20px}
.page-hero .crumb a:hover{color:var(--accent)}
.page-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,4.6vw,52px);letter-spacing:-.026em;color:var(--fg-1);margin:0;line-height:1.05}
.page-hero .lede{font-size:18px;color:var(--fg-2);max-width:620px;margin:18px 0 0;line-height:1.55}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.toc a{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--fg-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 15px;transition:all var(--dur)}
.toc a:hover{border-color:var(--accent-line);color:var(--accent)}

/* inline CTA used inside articles/prose */
.cta-inline{border:1px solid var(--accent-line);background:radial-gradient(120% 140% at 100% 0%,rgba(var(--accent-rgb),.14),transparent 55%),linear-gradient(180deg,var(--ink-800),var(--ink-850));border-radius:var(--r-xl);padding:28px 30px;margin:34px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-inline .ci-text h4{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--fg-1);margin:0 0 6px}
.cta-inline .ci-text p{font-size:14.5px;color:var(--fg-2);margin:0;max-width:440px}
.cta-inline .ci-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ===========================================================
   Blog-card + prose primitives (mirrored from blog.css) so the
   landing blog block and the prose subpages don't need blog.css
   — avoids blog.css overriding kit.css .section/.container.
   =========================================================== */
.container--narrow{max-width:760px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.acard{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);cursor:pointer;transition:transform var(--dur),border-color var(--dur);display:flex;flex-direction:column}
.acard:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.acard .cover{height:172px;position:relative;background:linear-gradient(135deg,var(--ink-800),var(--ink-900))}
.acard .pad{padding:20px;display:flex;flex-direction:column;flex:1}
.acard .k{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.acard h4{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.012em;color:var(--fg-1);line-height:1.22;margin:12px 0 0}
.acard p{font-size:14px;line-height:1.55;color:var(--fg-3);margin:10px 0 0}
.acard .meta{margin-top:auto;padding-top:18px}
.cover-tag{position:absolute;top:18px;left:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:rgba(10,13,17,.6);backdrop-filter:blur(6px);border:1px solid var(--accent-line);border-radius:var(--r-pill);padding:6px 12px}
.meta{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:13px;color:var(--fg-3)}
.meta .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--lime-300),var(--lime-500));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--accent-ink);flex:none}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-500)}
/* cover motifs */
.motif{position:absolute;inset:0;overflow:hidden}
.motif.grid::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(80% 80% at 70% 20%,#000,transparent 75%)}
.motif .glow{position:absolute;width:60%;height:60%;border-radius:50%;filter:blur(40px)}
.motif.g1 .glow{background:rgba(236,188,39,.22);top:-10%;right:-5%}
.motif.g2 .glow{background:rgba(56,189,248,.18);bottom:-15%;left:-5%}
.motif.g3 .glow{background:rgba(236,188,39,.16);top:30%;left:30%}
.motif .chip{position:absolute;width:64px;height:64px;border:2px solid var(--accent-line);border-radius:12px;top:50%;left:50%;transform:translate(-50%,-50%)}
.motif .chip::before{content:"";position:absolute;inset:14px;border:2px solid var(--accent-line);border-radius:4px}
/* prose (subpages) */
.prose{padding:24px 0 0;font-size:17px;line-height:1.75;color:var(--ink-100)}
.prose h2{font-family:var(--font-display);font-weight:600;font-size:27px;letter-spacing:-.02em;color:var(--fg-1);margin:40px 0 14px}
.prose h3{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--fg-1);margin:30px 0 10px}
.prose p{margin:0 0 20px;color:var(--ink-200)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose ul{margin:0 0 20px;padding-left:22px}
.prose li{margin:0 0 10px;color:var(--ink-200)}
.prose strong{color:var(--fg-1);font-weight:700}
.prose code{font-family:var(--font-mono);font-size:14px;background:var(--ink-850);border:1px solid var(--border);border-radius:6px;padding:2px 7px;color:var(--accent)}
.prose .callout{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-lg);padding:20px 22px;margin:28px 0}
.prose .callout p{margin:0;font-size:15px;color:var(--ink-100)}

@media(max-width:920px){
  .split{grid-template-columns:1fr;gap:32px}.split.rev .split-media{order:0}
  .cards{grid-template-columns:1fr 1fr}
  .roi{grid-template-columns:1fr 1fr}.models{grid-template-columns:1fr 1fr}
  .rev-grid{grid-template-columns:1fr}.bb-cards{grid-template-columns:1fr 1fr}
  .cmp{overflow-x:auto}.cmp table{min-width:560px}
}
@media(max-width:560px){
  .roi{grid-template-columns:1fr 1fr}.models{grid-template-columns:1fr}.bb-cards{grid-template-columns:1fr}.cards{grid-template-columns:1fr}
}