/* =========================================================
   Volt Lane · home-2026.css  (home page composition only)
   Requires css/site-2026.css (tokens, forms layer, header, footer, .img-fade).
   ========================================================= */
.section { padding-block: var(--section); }
.sec-head { margin-bottom: var(--s-7); display: grid; gap: var(--s-3); }
.sec-head .h2 { max-width: 20ch; }
.sec-head--split { gap: var(--s-4) var(--s-8); align-items: end; }
.sec-head--split .h2 { max-width: 18ch; }
@media (min-width: 960px) { .sec-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); } }
.band-dark { background: var(--night); color: #fff; }
.note { margin-top: var(--s-5); font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted); max-width: 80ch; }
.note a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.on-dark .note { color: var(--night-dim); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* =========================================================
   MOTION: REMOVED on user request (the micro-animations still stuttered). Everything on this page is static and always
   visible: no scroll reveals, staggers, Ken Burns/hero motion, hover lift/translate, step-number or bar animations,
   count-ups or transitions. Hover/focus states are colour/ring changes that switch instantly.
   The full animated version is in jank-fix/before-no-motion/ (see jank-fix/NOTES.md for how to restore it).
   ========================================================= */

/* ---------- 2 · hero ---------- */
.hero { position: relative; background: var(--night); color: #fff; overflow: clip; padding-top: clamp(var(--s-6), 3.5vw, var(--s-8)); }
.hero-top { display: grid; gap: var(--s-5); }
.hero-copy { display: grid; gap: var(--s-4); align-content: start; }
.hero .display { max-width: 15ch; }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--volt); flex: none; }
.hero-aside { display: grid; gap: var(--s-5); align-content: end; }
@media (min-width: 960px) {
  .hero-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; }
  .hero .display { max-width: 15ch; font-size: clamp(3.25rem, 1.6rem + 2.6vw, 4.75rem); }
}

.hero-stage { position: relative; inline-size: 100%; margin: var(--s-6) 0 0; aspect-ratio: 4 / 5; --fade-y: clamp(56px, 12vw, 160px); --vig: .34; --ring: transparent; }
.hero-stage picture { position: absolute; inset: 0; }
.hero-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.stage-ui { position: absolute; inset: 0; margin-inline: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-block: var(--s-5) calc(var(--fade-y) * .55); pointer-events: none; }
.stage-tag { color: var(--night-dim); background: rgba(6, 16, 28, .7); padding: var(--s-1) var(--s-2); border-radius: 6px; }
.annot { pointer-events: auto; width: min(100%, 22rem); padding: var(--s-4) var(--s-5); background: rgba(12, 27, 45, .88); border: 1px solid var(--night-line); border-radius: var(--r-control); display: grid; gap: var(--s-1); }
/* no backdrop-filter here: a live blur over the scrolling hero photo cost a 70-100ms frame on the first scroll (measured), so the card is a solid .88 tint instead */
.annot .meta { color: var(--volt); }
.annot-main { font: 600 1.5rem/1.2 var(--font-display); letter-spacing: -.02em; }
.annot-sub { font-size: var(--t-small); line-height: var(--lh-small); color: var(--night-dim); }
.annot-sub strong { color: #fff; font-weight: 600; }
@media (max-width: 959px) {
  .hero-stage { margin-top: var(--s-5); aspect-ratio: auto; }
  .hero-stage picture { position: relative; display: block; aspect-ratio: 4 / 5; }
  .stage-ui { position: relative; inset: auto; margin-top: calc(var(--fade-y) * -.7); padding-block: 0; align-items: stretch; gap: var(--s-3); }
  .stage-tag { position: absolute; right: var(--margin); bottom: calc(100% + var(--fade-y) * .7 + var(--s-3)); }
  .annot { width: 100%; }
}
@media (min-width: 960px) {
  .hero-stage { aspect-ratio: 21 / 9; max-height: min(660px, 72svh); margin-top: var(--s-5); --fade-y: clamp(48px, 6vw, 96px); }
  .stage-ui { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-block: var(--s-5) calc(var(--fade-y) * .75); }
  .stage-tag { align-self: flex-end; }
  .hero-stage img { object-position: 30% 62%; }
}
/* RULE: .hero-stage must keep inline-size: 100%. A block with aspect-ratio + max-height otherwise shrinks its WIDTH
   to height x ratio when max-height wins (21/9 x 612px = 1428px), leaving a hard cut on the right of wide screens.
   Above 1500px the stage is capped at the photo's own 1600px width, centred, and its side edges feather into the
   --night band (same smootherstep mask as the top/bottom edge). */
@media (min-width: 1500px) {
  .hero-stage { inline-size: min(100%, 1600px); margin-inline: auto; --fade-l: 1; --fade-r: 1; --fade-x: clamp(96px, 9vw, 200px); }
}

.proof { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; position: relative; border-top: 1px solid var(--night-line); }
.proof::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: linear-gradient(to right, transparent, var(--volt) 40%, var(--volt) 60%, transparent); transform-origin: left; opacity: .9; }
.proof li { padding-block: var(--s-5); display: grid; gap: var(--s-1); align-content: start; }
.proof li + li { border-top: 1px solid var(--night-line); }
.proof-v { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--font-display); letter-spacing: -.03em; color: var(--volt); }
.proof-t { font-size: var(--t-small); line-height: var(--lh-small); color: var(--night-dim); max-width: 34ch; }
@media (min-width: 720px) {
  .proof { grid-template-columns: repeat(3, 1fr); }
  .proof li { padding-block: var(--s-6) var(--s-7); padding-inline-end: var(--s-6); }
  .proof li + li { border-top: 0; padding-inline-start: var(--s-6); border-left: 1px solid var(--night-line); }
}

/* ---------- 3 · services (bento) ---------- */
.bento { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.tile { position: relative; isolation: isolate; min-width: 0; /* grid item: was implicit via overflow:hidden */ display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); text-decoration: none; }
/* compositor-only hover layer: ring (and, on bento tiles, shadow) painted once, faded with opacity */
.bento > .tile::before, .duo > .panel::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; border: 1px solid var(--hv-ring, var(--ink)); opacity: 0; pointer-events: none; }
.bento > .tile::before { box-shadow: 0 20px 40px -24px rgb(6 16 28 / .45); }
@media (hover: hover) { .bento > .tile:hover::before, .duo > .panel:hover::before { opacity: 1; } }
.tile-k { color: var(--volt-ink); }
.tile-p { color: var(--ink-soft); font-size: var(--t-body); max-width: 40ch; }
.tile-go { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); min-height: 44px; font-weight: 600; font-size: var(--t-small); }
.tile-go svg { width: 16px; height: 16px; }
.tile-media { position: relative; margin: 0; aspect-ratio: 3 / 2; }
.tile-media picture { position: absolute; inset: 0; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.t-a .tile-media { flex: 1 1 auto; min-height: 220px; aspect-ratio: 16 / 10; }
.t-a .tile-media img { object-position: 50% 60%; }
.t-e .tile-p { max-width: 36ch; }
.report { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-2); font: 400 var(--t-small)/1.4 var(--font-mono); color: var(--ink-soft); border-top: 1px dashed var(--line-strong); padding-top: var(--s-4); }
.report li { display: flex; gap: var(--s-2); align-items: flex-start; }
.report svg { width: 16px; height: 16px; flex: none; margin-top: .2em; color: var(--volt-ink); }
.t-f { background: var(--night); color: #fff; border-color: var(--night); }
.t-f { --hv-ring: var(--volt); }
.t-f .tile-k { color: var(--volt); }
.t-f .tile-p { color: var(--night-dim); }
.t-f .h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-a { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
  .t-a { grid-column: span 7; grid-row: span 2; padding: var(--s-6); }
  .t-b, .t-c { grid-column: span 5; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; column-gap: var(--s-4); }
  .t-b .tile-media, .t-c .tile-media { grid-column: 2; grid-row: 1 / span 3; aspect-ratio: 4 / 3; align-self: center; }
  .t-b > :not(.tile-media), .t-c > :not(.tile-media) { grid-column: 1; }
  .t-b .tile-go, .t-c .tile-go { margin-top: 0; }
  .t-d, .t-e, .t-f { grid-column: span 4; }
}

/* ---------- 4 · survey to install ---------- */
.flow { display: grid; gap: var(--s-8); }
.flow-side { display: grid; gap: var(--s-4); align-content: start; }
.flow-side .h2 { max-width: 16ch; }
.flow-photo { margin: var(--s-5) 0 0; aspect-ratio: 16 / 10; position: relative; --fade-size: 48px; }
.flow-photo picture { position: absolute; inset: 0; }
.flow-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; }
.step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-6); border-top: 1px solid var(--night-line); }
.step:last-child { border-bottom: 1px solid var(--night-line); }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--volt); transform-origin: left; }
.step-n { font: 600 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--night-dim); }
.step--visit .step-n { color: var(--volt); }
.step .h3 { margin-block: var(--s-1) var(--s-2); color: #fff; }
.step p:not(.meta) { color: var(--night-dim); max-width: 52ch; }
.step-where { color: var(--night-dim); }
.step--visit .step-where { color: var(--volt); }
@media (min-width: 960px) {
  .flow { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-9); align-items: start; }
  .flow-side { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .step { grid-template-columns: 80px minmax(0, 1fr); gap: var(--s-5); }
}

/* ---------- 5 · chargers ---------- */
.reco { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-5); display: grid; gap: var(--s-5); margin-bottom: var(--s-6); }
.reco-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.reco-qs { display: grid; gap: var(--s-5); }
.reco-out { background: var(--night); color: #fff; border-radius: var(--r-control); padding: var(--s-5); display: grid; gap: var(--s-2); min-height: 112px; align-content: center; }
.reco-out .meta { color: var(--volt); }
.reco-out .reco-name { color: #fff; font: 600 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; }
.reco-out p { color: var(--night-dim); max-width: 70ch; }
.reco-out .reco-hint { color: var(--night-dim); }
@media (min-width: 720px) {
  .reco { padding: var(--s-6); }
  .reco-qs { grid-template-columns: 1.7fr 1fr 1.25fr; gap: var(--s-5); }
}
.cmp-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); -webkit-overflow-scrolling: touch; }
.cmp-scroll:focus-visible { outline-offset: 2px; }
.cmp { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: var(--t-small); line-height: var(--lh-small); }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4); border-bottom: 1px solid var(--line); }
.cmp thead th, .cmp thead td { border-bottom: 1px solid var(--line-strong); vertical-align: bottom; padding-block: var(--s-5) var(--s-4); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th[scope="row"], .cmp-corner { position: sticky; left: 0; z-index: 2; background: var(--surface); width: 168px; min-width: 168px; font: 500 var(--t-meta)/1.35 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.cmp-photo { position: relative; margin: 0 0 var(--s-3); aspect-ratio: 4 / 3; max-width: 260px; }
.cmp-photo picture { position: absolute; inset: 0; }
.cmp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cmp-name { display: block; font: 600 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.cmp-pick { display: none; margin-top: var(--s-2); width: max-content; padding: var(--s-1) var(--s-2); border-radius: 6px; background: var(--volt); color: var(--night); font: 500 var(--t-meta)/1.2 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; }
.cmp .is-pick { background: var(--volt-tint); }
.cmp thead th { position: relative; }
.cmp thead th::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--volt); transform: scaleX(0); }
.cmp thead th.is-pick::before { transform: scaleX(1); }
.cmp td.is-pick { box-shadow: inset 2px 0 0 var(--volt), inset -2px 0 0 var(--volt); }
.cmp thead th.is-pick .cmp-pick { display: block; }
.cmp tbody th.is-pick { background: var(--volt-tint); }
.cmp-money td { font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.cmp-total th, .cmp-total td { border-top: 1px solid var(--line-strong); }
.cmp-total td { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.cmp small { display: block; margin-top: var(--s-1); font: 400 var(--t-meta)/1.35 var(--font-text); letter-spacing: 0; color: var(--muted); }

/* ---------- 6 · price + estimator ---------- */
.price { background: var(--surface); border-block: 1px solid var(--line); }
.price-grid { display: grid; gap: var(--s-8); }
.price-list { display: grid; gap: var(--s-4); align-content: start; }
.price-list .h2 { max-width: 14ch; }
.rates { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.rates th, .rates td { padding: var(--s-4) 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.rates thead th { padding-block: 0 var(--s-2); border-top: 0; font: 500 var(--t-meta)/1.4 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.rates thead .num-col, .rates td { text-align: right; }
.rates tbody th { font-weight: 600; color: var(--ink); padding-right: var(--s-5); }
.rates tbody th span { display: block; margin-top: var(--s-1); font-weight: 400; font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted); max-width: 52ch; }
.rates td { font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; white-space: nowrap; width: 1%; }
.est { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.est-form { display: grid; gap: var(--s-5); }
.est-out { --form-hint: var(--night-dim); background: var(--night); color: #fff; border-radius: var(--r-control); padding: var(--s-5); display: grid; gap: var(--s-2); }
.est-out .meta { color: var(--night-dim); }
.est-total { font: 600 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--volt); }
.est-lines { list-style: none; padding: 0; margin: var(--s-2) 0; display: grid; gap: var(--s-1); font: 400 var(--t-small)/1.4 var(--font-mono); color: var(--night-dim); }
.est-lines li { display: flex; justify-content: space-between; gap: var(--s-4); border-top: 1px solid var(--night-line); padding-top: var(--s-1); }
.est-lines li span:last-child { color: #fff; }
@media (min-width: 960px) {
  .price-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); align-items: start; }
  .est { position: sticky; top: calc(var(--header-h) + var(--s-5)); padding: var(--s-6); }
}

/* ---------- 7 · grants + running costs ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.panel { --hv-ring: #3f5a7a; position: relative; isolation: isolate; background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-card); padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.panel .h3 { max-width: 24ch; color: #fff; }
.panel p { color: var(--night-dim); }
.panel .btn { justify-self: start; margin-top: var(--s-2); }
.panel .meta { color: var(--volt); }
.big-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.big-fig .num { font: 600 clamp(2.5rem, 1.8rem + 2.6vw, 4rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--volt); }
.big-fig-u { color: var(--night-dim); font-size: var(--t-body); }
.panel-note { font-size: var(--t-small); line-height: var(--lh-small); }
.outcomes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.outcomes li { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--night-line); border-radius: 999px; font-size: var(--t-small); font-weight: 500; color: #fff; }
.o-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.o-may { background: var(--volt); }
.o-check { background: #f1c75b; }
.o-no { background: var(--danger-night); }
.bars { display: grid; gap: var(--s-4); }
.bar-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.panel .bar-l { color: #fff; font-weight: 600; font-size: var(--t-small); }
.bar-track { height: 20px; border-radius: 6px; background: var(--night-3); overflow: hidden; }
.bar { display: block; height: 100%; width: var(--w); border-radius: 6px; }
.bar-fuel { background: var(--night-dim); }
.bar-ev { background: var(--volt); }
.panel .bar-v { font: 600 1.25rem/1 var(--font-display); letter-spacing: -.02em; color: #fff; min-width: 4.5ch; text-align: right; }
@media (min-width: 960px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } .panel { padding: var(--s-7); gap: var(--s-5); } }

/* ---------- 8 · how the work is done ---------- */
.trust-grid { display: grid; gap: var(--s-8); }
.trust-main { display: grid; gap: var(--s-4); align-content: start; }
.trust-main .h2 { max-width: 16ch; }
.facts { list-style: none; padding: 0; margin: var(--s-3) 0; display: grid; gap: var(--s-4); }
.facts li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); align-items: start; color: var(--ink-soft); max-width: 60ch; }
.facts svg { width: 28px; height: 28px; padding: var(--s-1) 6px; border-radius: 50%; background: var(--volt-tint); color: var(--volt-ink); margin-top: 2px; }
.facts strong { color: var(--ink); }
.nations { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.nations li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-weight: 500; font-size: var(--t-small); }
.trust-side { display: grid; gap: var(--s-5); align-content: start; }
.trust-photo { margin: 0; aspect-ratio: 3 / 2; position: relative; --fade-size: 48px; }
.trust-photo picture { position: absolute; inset: 0; }
.trust-photo img { width: 100%; height: 100%; object-fit: cover; }
.review { margin: 0; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--volt); border-radius: var(--r-control) var(--r-card) var(--r-card) var(--r-control); display: grid; gap: var(--s-3); }
.review blockquote { margin: 0; }
.review blockquote p { font: 500 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.4 var(--font-display); letter-spacing: -.02em; color: var(--ink); max-width: none; }
@media (min-width: 960px) {
  .trust-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-9); align-items: center; }
  .review { padding: var(--s-6); }
}

/* ---------- 9 · projects ---------- */
.projects { background: var(--surface); border-block: 1px solid var(--line); }
.ba { display: grid; gap: var(--s-4); align-items: center; margin-bottom: var(--s-7); }
.ba-fig { margin: 0; display: grid; gap: var(--s-3); }
.ba-fig picture { position: relative; display: block; height: auto; aspect-ratio: 3 / 2; }
.ba-fig img { width: 100%; height: 100%; object-fit: cover; }
.ba-fig figcaption { color: var(--muted); }
.ba-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--volt); justify-self: center; rotate: 90deg; }
.ba-arrow svg { width: 20px; height: 20px; }
@media (min-width: 720px) {
  .ba { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-6); }
  .ba-arrow { rotate: 0deg; }
}
.index { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5) var(--s-5); grid-template-columns: 1fr; }
.index a { position: relative; display: grid; gap: var(--s-2); align-content: start; height: 100%; padding-top: var(--s-4); border-top: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
.index a::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--volt-ink); opacity: 0; pointer-events: none; }
.index a:hover::before { opacity: 1; }
.ix-n { font: 500 var(--t-meta)/1 var(--font-mono); color: var(--muted); letter-spacing: var(--track-label); }
.ix-t { font: 600 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; }
.ix-d { color: var(--ink-soft); font-size: var(--t-small); line-height: var(--lh-small); }
.index svg { width: 16px; height: 16px; position: absolute; right: 0; top: var(--s-4); }
@media (min-width: 640px) { .index { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .index { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 10 · guides ---------- */
.guides-grid { display: grid; gap: var(--s-8); }
.guide-feature { display: grid; gap: var(--s-3); align-content: start; text-decoration: none; color: var(--ink); }
.guide-feature figure { margin: 0 0 var(--s-2); aspect-ratio: 3 / 2; position: relative; }
.guide-feature figure picture { position: absolute; inset: 0; }
.guide-feature figure img { width: 100%; height: 100%; object-fit: cover; }
.guide-feature p:not(.meta) { color: var(--ink-soft); }
.guide-feature .tile-go { margin-top: 0; }
.guides-side { display: grid; gap: var(--s-4); align-content: center; }
.glist { list-style: none; padding: 0; margin: var(--s-4) 0 0; border-top: 1px solid var(--line-strong); }
.glist a { position: relative; display: grid; gap: var(--s-1); padding: var(--s-5) var(--s-7) var(--s-5) 0; border-bottom: 1px solid var(--line-strong); text-decoration: none; color: var(--ink); }
.glist svg { position: absolute; right: var(--s-2); top: 50%; translate: 0 -50%; width: 20px; height: 20px; }
.g-t { font: 600 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; }
.g-d { color: var(--ink-soft); font-size: var(--t-small); line-height: var(--lh-small); }
@media (min-width: 960px) { .guides-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-9); align-items: center; } }

/* ---------- 11 · faq ---------- */
.faq { background: var(--surface); border-block: 1px solid var(--line); }
.faq-grid { display: grid; gap: var(--s-7); }
.faq-grid > div:first-child { display: grid; gap: var(--s-4); align-content: start; }
.acc details { border-top: 1px solid var(--line-strong); }
.acc details:last-child { border-bottom: 1px solid var(--line-strong); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 64px; padding-block: var(--s-4); cursor: pointer; list-style: none; font: 600 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.3 var(--font-display); letter-spacing: -.02em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 24px; height: 24px; background: var(--ink); -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; }
.acc details[open] summary::after { rotate: 45deg; }
.acc summary:hover { color: var(--ink-soft); }
.acc p { padding-bottom: var(--s-5); color: var(--ink-soft); max-width: 62ch; }
/* FAQ open/close is the native <details> toggle: instant, no transition (motion removed on user request). */
:root { --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-9); align-items: start; }
  .faq-grid > div:first-child { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* ---------- 12 · final CTA ---------- */
.cta-band { background: var(--night-2); color: #fff; padding-block: var(--section); border-top: 1px solid var(--night-line); }
.cta-inner { display: grid; gap: var(--s-7); }
.cta-inner .h2 { max-width: 20ch; margin: var(--s-3) 0; }
.cta-side { display: grid; gap: var(--s-4); align-content: center; justify-items: start; }
.assure { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-1); color: var(--night-dim); font-size: var(--t-small); }
.assure li { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; }
.assure svg { width: 16px; height: 16px; color: var(--volt); flex: none; }
@media (min-width: 960px) { .cta-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); align-items: center; } }

/* ---------- mobile sticky CTA ---------- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-2); padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom)); background: rgba(6, 16, 28, .96); border-top: 1px solid var(--night-line); translate: 0 110%; visibility: hidden; }
.mobile-bar.is-visible { translate: 0 0; visibility: visible; }
.mobile-bar .btn { min-height: 48px; padding-inline: var(--s-2); min-width: 0; }
@media (min-width: 1000px) { .mobile-bar { display: none; } }
@media (max-width: 999px) { body[data-page="home"] .site-footer { padding-bottom: calc(var(--s-6) + 72px); } }

.t-f { position: relative; }
.t-f::after { content: ""; position: absolute; right: -8px; top: 16px; width: 120px; height: 120px; background: var(--volt); opacity: .9; -webkit-mask: var(--i-bolt) center / contain no-repeat; mask: var(--i-bolt) center / contain no-repeat; pointer-events: none; }
:root { --i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h12'/%3E%3Cpath d='M8 25h8' opacity='.5'/%3E%3Cpath d='M22 11l10 12h-7l8 13'/%3E%3C/svg%3E"); }

.swipe-hint { display: none; margin-bottom: var(--s-2); font: 500 var(--t-meta)/1.4 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
@media (max-width: 719px) {
  .swipe-hint { display: block; }
  .cmp { min-width: 560px; }
  .cmp tbody th[scope="row"], .cmp-corner { width: 104px; min-width: 104px; }
  .cmp th, .cmp td { padding-inline: var(--s-3); }
  .cmp thead th { min-width: 152px; }
}