/* ==================================================================
   Paint Protection Pros - production styles (v4, Bolt-derived system)
   Tokens + type from the brand: DM Sans / Inter / IBM Plex Mono
   (loaded via <link> in the base layout). Committed light.
   ================================================================== */
:root{
  --ink:#101820; --fog:#F2F5F7; --cobalt:#365CFF; --cobalt-press:#2b49cc;
  --film:#9EDCFF; --violet:#B7A7FF; --graphite:#374151; --graphite-2:#5b6773; --warm:#E9E2D8;
  --line:#e9edf1; --white:#fff;
  --heading:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --maxw:80rem;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--white); color:var(--ink); font-family:var(--body);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
main{ display:block; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem; }
@media(min-width:1024px){ .wrap{ padding-inline:2rem; } }
h1,h2,h3,h4{ font-family:var(--heading); font-weight:700; line-height:1.15; margin:0; letter-spacing:-0.01em; text-wrap:balance; }
h1{ font-size:clamp(1.9rem,4.4vw,2.75rem); }
h2{ font-size:clamp(1.6rem,3.4vw,2.25rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1rem; }
a{ color:var(--cobalt); text-decoration:none; }
/* In-text links carry an underline so they're distinguishable without relying on
   color alone (WCAG 1.4.1). Scoped to prose/paragraph contexts, not nav/buttons. */
.prose a, main p a:not(.btn), .consent a, .cta-consent a, .fs-consent a{ text-decoration:underline; text-underline-offset:0.15em; }
img{ max-width:100%; }
.eyebrow{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--cobalt); font-weight:500; margin:0 0 0.75rem; }
.muted{ color:var(--graphite); }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.5rem 1rem; z-index:100; }
.skip-link:focus{ left:0; }
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--heading); font-weight:600;
  font-size:0.9rem; padding:0.85rem 1.6rem; border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:background .25s, border-color .25s, color .25s, transform .25s; text-decoration:none; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--cobalt); color:#fff; box-shadow:0 10px 24px rgba(54,92,255,.22); }
.btn-primary:hover{ background:var(--ink); }
.btn-outline{ background:#fff; color:var(--ink); border-color:#dfe4ea; font-weight:500; }
.btn-outline:hover{ border-color:var(--cobalt); color:var(--cobalt); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--cobalt); }
.btn-sm{ padding:0.6rem 1.15rem; font-size:0.82rem; }

/* image cover helper */
.cover{ width:100%; height:100%; object-fit:cover; display:block; }

/* header */
header.site{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95);
  backdrop-filter:saturate(1.05) blur(8px); border-bottom:1px solid var(--line); }
header.site .bar{ display:flex; align-items:center; justify-content:space-between; height:88px; }
.brand img{ height:72px; width:auto; display:block; }
@media(max-width:520px){ .brand img{ height:56px; } }
nav.desk{ display:none; align-items:center; gap:0.15rem; }
nav.desk a{ padding:0.45rem 0.6rem; font-size:0.83rem; font-weight:500; color:#3a4653; border-radius:6px; white-space:nowrap; }
@media(min-width:1024px) and (max-width:1140px){ nav.desk a{ padding:0.45rem 0.45rem; font-size:0.8rem; } .brand img{ height:62px; } }
nav.desk a:hover, nav.desk a[aria-current="page"]{ color:var(--cobalt); background:rgba(54,92,255,.05); }
.nav-cta{ display:none; }
.menu-btn{ background:none; border:0; color:var(--ink); cursor:pointer; padding:0.5rem; }
@media(min-width:1024px){ nav.desk{ display:flex; } .nav-cta{ display:inline-flex; } .menu-btn{ display:none; } }
.mobile-menu{ display:none; border-top:1px solid var(--line); background:#fff; padding:0.75rem 1.25rem 1.25rem; }
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; padding:0.7rem 0.5rem; color:#3a4653; font-weight:500; border-radius:6px; }
.mobile-menu a:hover{ background:var(--fog); color:var(--ink); }

section{ position:relative; }
.sec-pad{ padding-block:clamp(3rem,7vw,7rem); }
.band{ background:var(--fog); }
.head-c{ text-align:center; max-width:40rem; margin:0 auto 3rem; }
.head-c p.sub{ color:var(--graphite); font-size:1.05rem; margin:0; }

/* HERO */
.hero{ background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--fog) 100%); overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(64px); pointer-events:none; }
.hero .grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media(min-width:1024px){ .hero .grid{ grid-template-columns:1fr 1fr; gap:4rem; } }
.pill-badge{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 0.9rem; border-radius:999px;
  background:rgba(54,92,255,.06); border:1px solid rgba(54,92,255,.14); color:var(--cobalt);
  font-size:0.76rem; font-weight:600; margin-bottom:1.4rem; }
.hero h1{ margin-bottom:1.1rem; }
.hero .lede{ font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--graphite); margin-bottom:0.9rem; max-width:34rem; }
.hero .fine{ font-size:0.85rem; color:var(--graphite-2); margin-bottom:2rem; }
.hero .actions{ display:flex; flex-wrap:wrap; gap:0.75rem; }
.hero-visual{ position:relative; }
.hero-visual .shot{ border-radius:20px; overflow:hidden; box-shadow:0 30px 60px rgba(16,24,32,.18); height:clamp(280px,42vw,420px); }
.float-card{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 40px rgba(16,24,32,.16); padding:0.9rem 1.1rem; }
.float-card.price{ bottom:-22px; left:-10px; max-width:230px; animation:float 4s ease-in-out infinite; }
.float-card.trust{ top:-16px; right:-10px; animation:float 4s ease-in-out infinite; animation-delay:.6s; display:flex; align-items:center; gap:0.6rem; }
@media(min-width:1024px){ .float-card.price{ left:-32px; } .float-card.trust{ right:-24px; } }
.float-card .k{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--cobalt); margin-bottom:0.35rem; }
.float-card .v{ font-family:var(--heading); font-weight:700; font-size:1.4rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.float-card .s{ font-size:0.72rem; color:var(--graphite); margin-top:0.15rem; }
.float-card .chk{ width:2rem; height:2rem; border-radius:50%; background:#e9f9f0; display:grid; place-content:center; color:#12925a; flex:none; }
.stats{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:3rem; }
@media(min-width:640px){ .stats{ grid-template-columns:repeat(3,1fr); } }
.stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.25rem; box-shadow:0 1px 2px rgba(16,24,32,.04); }
.stat .v{ font-family:var(--heading); font-weight:700; font-size:1.7rem; color:var(--cobalt); }
.stat .l{ font-size:0.9rem; color:var(--graphite); }

/* PROTECTION EXPLORER */
.explorer{ display:grid; grid-template-columns:1fr; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px rgba(16,24,32,.16); border:1px solid var(--line); }
@media(min-width:1024px){ .explorer{ grid-template-columns:1fr 1fr; } }
.explorer .imgside{ position:relative; min-height:260px; }
@media(min-width:1024px){ .explorer .imgside{ min-height:480px; } }
.explorer .imgside img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.explorer .imgside .ov{ position:absolute; inset:0; background:linear-gradient(to top,rgba(16,24,32,.4),transparent); }
.explorer .badge{ position:absolute; left:1.5rem; bottom:1.5rem; z-index:2; display:inline-flex; align-items:center; gap:0.5rem;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px); padding:0.5rem 0.9rem; border-radius:999px;
  font-family:var(--heading); font-weight:600; font-size:0.85rem; }
.explorer .content{ background:#fff; padding:2rem; display:flex; flex-direction:column; justify-content:center; }
@media(min-width:1024px){ .explorer .content{ padding:3rem; } }
.tabs{ display:flex; gap:0.5rem; margin-bottom:1.75rem; }
.tab{ font-family:var(--heading); font-weight:500; font-size:0.85rem; padding:0.5rem 1rem; border-radius:999px;
  border:0; cursor:pointer; background:var(--fog); color:var(--graphite); transition:all .25s; }
.tab.active{ background:var(--cobalt); color:#fff; box-shadow:0 6px 14px rgba(54,92,255,.28); }
.explorer .oneliner{ font-family:var(--heading); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.85rem); line-height:1.25; margin-bottom:1.25rem; }
.explorer ul{ list-style:none; padding:0; margin:0 0 1.25rem; display:grid; gap:0.7rem; }
.explorer li{ display:flex; gap:0.7rem; align-items:flex-start; color:var(--graphite); }
.explorer li .c{ width:1.25rem; height:1.25rem; border-radius:50%; background:rgba(54,92,255,.1); color:var(--cobalt);
  display:grid; place-content:center; flex:none; margin-top:0.15rem; font-size:0.7rem; font-weight:700; }
.explorer .bestfor{ font-size:0.9rem; color:var(--graphite-2); margin-bottom:1.75rem; }
.explorer .bestfor b{ color:var(--ink); }

/* JOURNEY */
.journey{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:768px){ .journey{ grid-template-columns:repeat(3,1fr); } }
.jcard{ background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 8px 24px rgba(16,24,32,.08);
  transition:transform .4s, box-shadow .4s; }
.jcard:hover{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(16,24,32,.14); }
.jcard .top{ position:relative; height:180px; overflow:hidden; }
.jcard .top img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.jcard:hover .top img{ transform:scale(1.08); }
.jcard .num{ position:absolute; top:1rem; left:1rem; width:2.5rem; height:2.5rem; border-radius:50%;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px); display:grid; place-content:center;
  font-family:var(--mono); font-weight:700; color:var(--cobalt); z-index:2; }
.jcard .top::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(16,24,32,.5),transparent); }
.jcard .body{ padding:1.5rem; }
.jcard h3{ margin-bottom:0.4rem; }
.jcard p{ color:var(--graphite); margin:0; font-size:0.96rem; }

/* IMAGE BREAK */
.break{ position:relative; height:clamp(300px,45vw,460px); overflow:hidden; }
.break img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.break .ov{ position:absolute; inset:0; background:rgba(16,24,32,.5); display:flex; align-items:center; justify-content:center; text-align:center; padding:1.25rem; }
.break .ov h2{ color:#fff; font-size:clamp(1.6rem,4vw,3rem); max-width:46rem; }
.break .ov .eyebrow{ color:rgba(255,255,255,.75); }

/* FAQ */
.faq-grid{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:start; }
@media(min-width:1024px){ .faq-grid{ grid-template-columns:1fr 1fr; gap:4rem; } }
.faq-left img{ border-radius:18px; margin-top:1.5rem; box-shadow:0 12px 30px rgba(16,24,32,.12); width:100%; }
.acc{ display:grid; gap:0.75rem; }
.acc details{ border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; transition:box-shadow .25s, border-color .25s; }
.acc details[open]{ border-color:rgba(54,92,255,.25); box-shadow:0 10px 26px rgba(16,24,32,.08); }
.acc summary{ list-style:none; cursor:pointer; padding:1.15rem 1.25rem; display:flex; justify-content:space-between;
  gap:1rem; align-items:center; font-family:var(--heading); font-weight:600; font-size:1.02rem; color:var(--ink); }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .caret{ color:var(--graphite); transition:transform .3s, color .3s; flex:none; }
.acc details[open] summary .caret{ transform:rotate(180deg); color:var(--cobalt); }
.acc .ans{ padding:0 1.25rem 1.25rem; color:var(--graphite); }

/* CLOSING */
.closing{ background:var(--fog); overflow:hidden; }
.closing .inner{ position:relative; max-width:48rem; margin:0 auto; text-align:center; }
.closing h2{ font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:1.25rem; }
.closing p{ color:var(--graphite); font-size:1.08rem; max-width:34rem; margin:0 auto 2rem; }
.closing .actions{ display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }

/* FOOTER */
footer.site{ background:var(--ink); color:#fff; }
footer.site .cols{ display:grid; grid-template-columns:1fr; gap:2.5rem; padding-block:3.5rem 2rem; }
@media(min-width:768px){ footer.site .cols{ grid-template-columns:2fr 1fr 1fr 1.2fr; gap:2rem; } }
footer.site .brand img{ height:64px; margin-bottom:1rem; }
footer.site .desc{ color:#9aa7b2; font-size:0.92rem; max-width:22rem; }
footer.site .tag{ font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:#9aa7b2; margin-top:0.75rem; }
footer.site h2{ font-family:var(--heading); font-weight:600; font-size:0.92rem; margin:0 0 1.1rem; color:#fff; }
footer.site ul{ list-style:none; padding:0; margin:0; display:grid; gap:0.7rem; }
footer.site ul a, footer.site ul span{ color:#9aa7b2; font-size:0.92rem; }
footer.site ul a:hover{ color:#fff; }
footer.site .legal{ border-top:1px solid #26323d; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:0.4rem 1.5rem; }
footer.site .legal a{ color:#9aa7b2; font-size:0.82rem; }
footer.site .legal a:hover{ color:#fff; }
footer.site .bottom{ padding-block:1.25rem 1.5rem; display:flex; flex-wrap:wrap; gap:0.75rem;
  justify-content:space-between; color:#9aa7b2; font-size:0.78rem; }
footer.site .bottom .it{ font-style:italic; }

/* reveal + motion */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease-out, transform .7s ease-out; }
.reveal.in{ opacity:1; transform:none; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
:focus-visible{ outline:3px solid var(--cobalt); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .reveal{opacity:1;transform:none;} }

/* ---- generic content styles for not-yet-restyled inner pages ---- */
.breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.25rem .5rem; padding:0; margin:1.5rem 0 0; font-size:.82rem; color:var(--graphite-2); }
.breadcrumbs li + li::before{ content:"›"; margin-right:.5rem; color:var(--line); }
article{ max-width:48rem; margin-inline:auto; padding:2rem 1.25rem 3rem; }
article .lede{ font-size:1.15rem; color:var(--graphite); }
.card-grid{ list-style:none; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.card-grid li{ border:1px solid var(--line); border-radius:12px; padding:1.25rem; }
table{ width:100%; border-collapse:collapse; margin:1rem 0; }
th,td{ text-align:left; padding:.6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.faq dt{ font-weight:600; margin-top:1rem; font-family:var(--heading); }
.pricing--pending{ background:var(--fog); border:1px dashed var(--line); border-radius:8px; padding:1rem; }
.cta{ border:1px solid var(--line); border-radius:12px; padding:1.5rem; margin:2rem 0; }
.cta input{ width:100%; max-width:24rem; padding:.6rem; border:1px solid var(--line); border-radius:8px; }
[hidden]{ display:none!important; }

/* ================= light hero (inner pages) ================= */
/* reuses the homepage .hero / .hero-visual / .shot / .blob system.
   these add the summary card + mini-stat boxes used in some light heroes. */
.hero .lede + .actions{ margin-top:1.5rem; }
.hcard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.5rem 1.6rem;
  box-shadow:0 18px 44px rgba(16,24,32,.1); }
.hcard .row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.55rem 0; }
.hcard .row + .row{ border-top:1px solid var(--line); }
.hcard .lbl{ color:var(--graphite); font-size:0.92rem; }
.hcard .amt{ font-family:var(--mono); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.hcard .amt.hl{ color:var(--cobalt); }
.hcard .foot{ margin-top:0.35rem; padding-top:0.85rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--graphite-2); }
.hchips{ display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; max-width:30rem; margin-top:1.5rem; }
.hchip{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:0.9rem 1.1rem; box-shadow:0 2px 8px rgba(16,24,32,.05); }
.hchip b{ font-family:var(--heading); display:block; color:var(--ink); }
.hchip span{ color:var(--graphite); font-size:0.85rem; }

/* ================= inner-page components (v4) ================= */
/* image hero used by Pricing / Compare / Vehicle Guides / Gallery */
.phero{ position:relative; overflow:hidden; color:#fff; }
.phero .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.phero .scrim{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,24,32,.92),rgba(16,24,32,.7) 45%,rgba(16,24,32,.35)); }
.phero .inner{ position:relative; padding-block:clamp(3.5rem,9vw,7rem); }
.phero h1{ color:#fff; font-size:clamp(2rem,5vw,3.4rem); margin:0.6rem 0 1rem; }
.phero h1 .hl{ color:var(--film); }
.phero .lede{ color:#d3dae0; font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:34rem; margin-bottom:1.75rem; }
.phero .pill-badge{ background:rgba(54,92,255,.15); border-color:rgba(158,220,255,.3); color:var(--film); }
.phero .glasscard{ background:rgba(255,255,255,.1); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.2);
  border-radius:18px; padding:1.75rem; box-shadow:0 30px 60px rgba(0,0,0,.3); }
.phero .glasscard .row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.45rem 0; }
.phero .glasscard .row + .row.tot{ border-top:1px solid rgba(255,255,255,.15); margin-top:0.5rem; padding-top:1rem; }
.phero .glasscard .lbl{ color:#c7cfd6; font-size:0.9rem; } .phero .glasscard .amt{ font-family:var(--mono); font-weight:700; }
.phero .glasscard .amt.hl{ color:var(--film); } .phero .glasscard .amt.good{ color:#37d67a; font-size:1.35rem; }
.phero-split{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media(min-width:1024px){ .phero-split{ grid-template-columns:1.1fr .9fr; } .phero .glasscard.hidem{ display:block; } }
@media(max-width:1023px){ .phero .glasscard.hidem{ display:none; } }

/* factor / feature cards */
.grid3{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:640px){ .grid3{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .grid3{ grid-template-columns:repeat(3,1fr); } }
.fcard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem; box-shadow:0 1px 2px rgba(16,24,32,.04);
  transition:transform .4s, box-shadow .4s, border-color .4s; height:100%; }
.fcard:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(16,24,32,.1); border-color:rgba(54,92,255,.2); }
.fcard .ic{ width:3rem; height:3rem; border-radius:12px; background:var(--fog); color:var(--cobalt); display:grid; place-content:center; margin-bottom:1rem; }
.fcard h3{ margin-bottom:0.4rem; } .fcard p{ color:var(--graphite); font-size:0.94rem; margin:0; }

/* packages */
.pkgs{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:768px){ .pkgs{ grid-template-columns:1fr 1fr; } }
.pkg{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.75rem; position:relative; box-shadow:0 6px 20px rgba(16,24,32,.06); }
.pkg.popular{ border-color:var(--cobalt); box-shadow:0 20px 44px rgba(54,92,255,.14); }
.pkg .flag{ position:absolute; top:-0.8rem; left:1.5rem; background:var(--cobalt); color:#fff; font-family:var(--mono);
  font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; padding:0.3rem 0.7rem; border-radius:999px; }
.pkg h3{ font-size:1.25rem; } .pkg .range{ font-family:var(--heading); font-weight:700; font-size:1.5rem; color:var(--cobalt); margin:0.4rem 0 0.75rem; }
.pkg ul{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:0.55rem; }
.pkg li{ display:flex; gap:0.6rem; align-items:flex-start; font-size:0.92rem; color:var(--graphite); }
.pkg li svg{ color:var(--cobalt); flex:none; margin-top:0.15rem; }
.pkg .note{ font-size:0.85rem; color:var(--graphite-2); border-top:1px solid var(--line); padding-top:0.85rem; margin:0; }

/* compare feature explorer */
.feat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; }
@media(min-width:640px){ .feat-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px){ .feat-grid{ grid-template-columns:repeat(5,1fr); } }
.feat-grid .tab{ text-align:center; padding:0.75rem 0.5rem; font-size:0.8rem; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.5rem; margin-top:1.25rem; box-shadow:0 10px 26px rgba(16,24,32,.06); }
.panel .two{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:640px){ .panel .two{ grid-template-columns:1fr 1fr; } }
.panel .box{ border-radius:12px; padding:1.1rem; } .panel .box.ppf{ background:rgba(54,92,255,.06); } .panel .box.cer{ background:rgba(158,220,255,.12); }
.panel .box h3{ font-size:0.95rem; margin-bottom:0.3rem; } .panel .box p{ margin:0; font-size:0.9rem; color:var(--graphite); }

/* vehicle guides */
.vgrid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:768px){ .vgrid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .vgrid{ grid-template-columns:repeat(3,1fr); } }
.vcard{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; cursor:pointer; box-shadow:0 6px 20px rgba(16,24,32,.07); transition:box-shadow .3s, transform .3s; }
.vcard:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(16,24,32,.12); }
.vcard .top{ position:relative; height:170px; overflow:hidden; }
.vcard .top img{ width:100%; height:100%; object-fit:cover; }
.vcard .top .cap{ position:absolute; left:0; right:0; bottom:0; padding:0.9rem 1.1rem; background:linear-gradient(to top,rgba(16,24,32,.85),transparent); color:#fff; }
.vcard .top .cap h3{ color:#fff; } .vcard .body{ padding:1.1rem 1.25rem 1.35rem; }
.vcard .body .st{ color:var(--graphite); font-size:0.9rem; margin:0; }
.vcard .detail{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.vcard.open .detail{ max-height:420px; }
.vcard .rec{ background:rgba(54,92,255,.06); border-radius:10px; padding:0.85rem 1rem; margin:0.9rem 0 0.75rem; font-size:0.9rem; }
.vcard .rec b{ color:var(--cobalt); }
.vcard .concerns{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.vcard .concerns span{ font-size:0.75rem; background:var(--fog); color:var(--graphite); padding:0.25rem 0.6rem; border-radius:999px; }
.vcard .more{ font-size:0.8rem; color:var(--cobalt); font-weight:600; margin-top:0.7rem; display:inline-block; }
.vcard.open .more .a{ display:none; } .vcard .more .b{ display:none; } .vcard.open .more .b{ display:inline; }

/* gallery */
.gfilters{ display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:center; margin-bottom:2rem; }
.ggrid{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
@media(min-width:640px){ .ggrid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .ggrid{ grid-template-columns:repeat(3,1fr); } }
.gitem{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3.2; box-shadow:0 8px 24px rgba(16,24,32,.1); }
.gitem img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.gitem:hover img{ transform:scale(1.06); }
.gitem .meta{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.1rem;
  background:linear-gradient(to top,rgba(16,24,32,.8),transparent 55%); color:#fff; }
.gitem .tag{ align-self:flex-start; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase;
  background:rgba(54,92,255,.9); padding:0.25rem 0.55rem; border-radius:999px; margin-bottom:0.5rem; }
.gitem h3{ color:#fff; font-size:1.05rem; } .gitem p{ color:#c7cfd6; font-size:0.82rem; margin:0.15rem 0 0; }

/* ================= resource hub (guides) ================= */
.artgrid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:640px){ .artgrid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .artgrid{ grid-template-columns:repeat(3,1fr); } }
.artcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:0 8px 24px rgba(16,24,32,.08); transition:transform .35s, box-shadow .35s; color:inherit; }
.artcard:hover{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(16,24,32,.14); }
.artcard .thumb{ position:relative; height:190px; overflow:hidden; }
.artcard .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.artcard:hover .thumb img{ transform:scale(1.07); }
.artcard .cat{ position:absolute; left:1rem; top:1rem; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em;
  text-transform:uppercase; background:var(--cobalt-press); color:#fff; padding:0.3rem 0.6rem; border-radius:999px; }
.artcard .pad{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.artcard h3{ font-size:1.1rem; line-height:1.3; margin-bottom:0.5rem; }
.artcard .ex{ color:var(--graphite); font-size:0.92rem; margin:0 0 1.1rem; }
.artcard .meta{ margin:auto 0 0; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--graphite-2); }

.byline{ font-size:0.9rem; color:var(--graphite-2); margin-top:1rem; }
.byline strong{ color:var(--ink); font-weight:600; }
/* article reading page */
.prose{ max-width:44rem; margin:0 auto; }
.prose h2{ font-size:clamp(1.35rem,2.4vw,1.7rem); margin:2.25rem 0 0.85rem; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--graphite); font-size:1.05rem; line-height:1.75; margin:0 0 1.15rem; }
.prose ul{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:0.7rem; }
.prose li{ position:relative; padding-left:1.6rem; color:var(--graphite); font-size:1.02rem; line-height:1.65; }
.prose li::before{ content:""; position:absolute; left:0; top:0.6em; width:0.55rem; height:0.55rem; border-radius:50%;
  background:var(--cobalt); opacity:.5; }
.callout{ display:flex; gap:0.9rem; align-items:flex-start; border-radius:14px; padding:1.25rem 1.4rem; margin:1.75rem 0; }
.callout p{ margin:0; font-size:1rem; color:var(--ink); }
.callout .ic{ flex:none; margin-top:0.1rem; }
.callout.tip{ background:rgba(54,92,255,.06); border:1px solid rgba(54,92,255,.18); }
.callout.tip .ic{ color:var(--cobalt); }
.callout.warning{ background:rgba(212,71,54,.06); border:1px solid rgba(212,71,54,.2); }
.callout.warning .ic{ color:#a3301c; }
/* Article share bar */
.share{ display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; max-width:44rem; margin:2.5rem auto 0; }
.share-label{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--graphite-2); }
.share-links{ display:flex; gap:0.5rem; }
.share-btn{ display:inline-grid; place-content:center; width:2.4rem; height:2.4rem; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--graphite); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .2s; }
.share-btn:hover{ background:var(--cobalt); color:#fff; border-color:var(--cobalt); transform:translateY(-2px); }
.share-btn.copied{ background:#12925a; border-color:#12925a; color:#fff; }

.disclosure{ max-width:44rem; margin:2.5rem auto 0; border-top:1px solid var(--line); padding-top:1.5rem; }
.disclosure p{ font-family:var(--mono); font-size:0.78rem; line-height:1.7; color:var(--graphite-2); margin:0; }

/* "Network launching" honest notice */
.net-notice{ display:flex; gap:0.65rem; align-items:flex-start; max-width:44rem; margin:0 0 1.5rem;
  background:rgba(54,92,255,.06); border:1px solid rgba(54,92,255,.16); border-radius:12px;
  padding:0.85rem 1.05rem; font-size:0.88rem; color:var(--graphite); line-height:1.55; text-align:left; }
.net-notice strong{ color:var(--ink); }
.net-dot{ flex:none; width:0.55rem; height:0.55rem; border-radius:50%; background:var(--cobalt);
  margin-top:0.4rem; box-shadow:0 0 0 3px rgba(54,92,255,.15); }

/* Lead form: consent line + error message */
.form-error{ display:block; color:#a3301c; font-size:0.9rem; margin-top:0.9rem; }
.cta-consent label{ display:flex; gap:0.55rem; align-items:flex-start; font-size:0.8rem; line-height:1.5; text-align:left; }
.cta-consent input{ width:1rem; height:1rem; flex:none; margin-top:0.15rem; accent-color:var(--cobalt); }

/* Cookie consent banner */
.consent-banner{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 22px 55px rgba(16,24,32,.22); animation:consent-in .28s ease; }
.consent-banner[hidden]{ display:none; }
.consent-inner{ max-width:64rem; margin:0 auto; padding:1.15rem 1.35rem;
  display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; }
.consent-text{ margin:0; flex:1 1 22rem; font-size:0.9rem; line-height:1.6; color:var(--graphite); }
.consent-text a{ color:var(--cobalt); font-weight:500; }
.consent-actions{ display:flex; gap:0.6rem; flex:none; }
@keyframes consent-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media(max-width:560px){
  .consent-inner{ padding:1rem 1.1rem; }
  .consent-actions{ width:100%; }
  .consent-actions .btn{ flex:1 1 auto; text-align:center; }
}
@media(prefers-reduced-motion:reduce){ .consent-banner{ animation:none; } }