/* ── Official brand palette (RV Tech Cheat Sheet brand guide, 2026-09-13) ──
 *   Sunset Orange #f25a1c · Golden Amber #ffc04d · Deep Navy   #0b1f33
 *   Warm Cream    #f7ebd4 · Signal Red   #d62828
 * These replace the values I sampled off the logo artwork — close, but the
 * guide is the source of truth.
 *
 * 🚨 Contrast, measured against white:
 *   Sunset Orange 3.4:1 — LARGE TEXT ONLY. Never body copy, never a small
 *     label. It is a ground colour; orange buttons take Deep Navy text, which
 *     is 5.0:1 and passes at every size (white on orange only passes at large).
 *   Signal Red    5.0:1 — safe for links and kickers at body size.
 *   Golden Amber  1.7:1 — decorative only; never carries text on light. */
:root{--ink:#0b1f33;--muted:#5c6b7a;--bg:#fdfbf7;--card:#fff;--line:#e6ddcd;
--navy:#0b1f33;--navy-dk:#061420;--navy-lt:#eaeef2;
--orange:#f25a1c;--orange-lt:#ff7a42;--amber:#ffc04d;--red:#d62828;--red-dk:#b01f1f;--cream:#f7ebd4;
--acc:var(--red);--acc2:var(--navy);
/* Button mechanics, matching Wrenchable's --radius-btn / --shadow-btn. */
--radius-btn:10px;--shadow-btn:2px 2px 0 rgba(11,31,51,.85);--shadow-btn-hover:3px 3px 0 rgba(11,31,51,.85);
/* Headlines are Monument Extended in the guide — a commercial Pangram Pangram
 * face that is NOT on Google Fonts. Until the licensed files are self-hosted,
 * Archivo at width 125 stands in; naming Monument first means dropping the
 * real font in later needs no code change. */
--head:"Monument Extended",Archivo,ui-sans-serif,system-ui,sans-serif;
--sub:"Bebas Neue",Archivo,Impact,sans-serif;
--body:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.65 var(--body);color:var(--ink);background:var(--bg)}
h1,h2,h3,.brand{font-family:var(--head);font-stretch:125%;letter-spacing:-.01em}
/* Bebas Neue is all-caps by design — it's the guide's subheader face, which
   maps to the site's kicker/eyebrow labels, not to real headings. */
.sec,.card .tag,.related h3,.cmp thead th{font-family:var(--sub);font-stretch:normal;letter-spacing:.06em}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
/* Sunset band. The gradient is the scenery; the scrim on top is what keeps
   nav text at AA over it — left side stays near-solid navy so the lockup and
   links never fight the sun, which sits out on the right. */
/* Sunset band = the brand artwork behind a left-weighted scrim.
   The art is 3:1 and the bar is ~64px, so background-size cover shows a slice
   slice — positioned at 62% to land on the horizon and sun rather than empty
   sky. The scrim is near-opaque on the left where the lockup and links sit and
   opens up on the right where the sun is, which is how the artwork was
   commissioned. Three widths so phones don't pull the 1920. */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:9px 22px;border-bottom:3px solid var(--orange);flex-wrap:wrap;overflow:hidden;
/* 🔑 The bar is chrome, not a canvas. Every picture we put here — the 3:1
 * sunset cropped to a sliver, then the purpose-made banner — competed with
 * whatever the page was doing underneath, and a sunset bar above a sunset
 * hero read as mud. So: no photograph. A deep navy ground with one warm
 * ember at the right edge, picking up the palette without restating the
 * scene, and the orange rule doing the brand work.
 *
 * It also costs zero bytes and survives any hero treatment we land on. */
background:radial-gradient(760px 120px at 100% 50%,rgba(242,90,28,.34) 0%,rgba(214,40,40,.14) 42%,transparent 74%),
linear-gradient(90deg,#061420 0%,#0a1c2c 52%,#10263a 100%)}
/* 🪤 Must out-specify the .nav child rule below — it also matches .sunset, and
   at equal specificity the later rule wins, which put the SVG back in the flow
   and tripled the header height. .nav>.sunset is (0,2,0) and settles it.
   🚨 No backticks in this file's CSS comments — it is inside a template
   literal, and one stray backtick terminates the string mid-stylesheet. */
.nav>.sunset{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nav>.brand,.nav>nav{position:relative;z-index:1}

/* Horizontal lockup: badge + wordmark + tagline, set in brand type rather
   than shipped as a raster, so it stays sharp and stays text. */
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.brand:hover{text-decoration:none}
.brand-logo{width:46px;height:44px;object-fit:contain;display:block;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--head);font-stretch:125%;font-weight:700;font-size:19px;letter-spacing:.01em;
padding-bottom:5px;border-bottom:2px solid var(--orange)}
.brand-tag{font-family:var(--sub);font-size:12.5px;letter-spacing:.13em;color:var(--amber);margin-top:5px}
@media(max-width:560px){.brand-tag{display:none}.brand-name{border-bottom:0;padding-bottom:0}.brand-logo{width:38px;height:36px}}
.nav nav{display:flex;gap:18px;align-items:center;font-weight:600;font-size:15px}
.nav nav a{color:rgba(255,255,255,.92)}.nav nav a:hover{color:#fff}
.nav .cta{color:#fff;font-weight:700;letter-spacing:.03em;padding:8px 15px;border:1.5px solid #b23a0c;
background:linear-gradient(to bottom,var(--orange),#c9430f);border-radius:var(--radius-btn);
box-shadow:var(--shadow-btn);transition:transform .12s,box-shadow .12s,background .12s}
.nav .cta:hover{background:linear-gradient(to bottom,#ff6a2c,#d04a12);transform:translate(-1px,-1px);box-shadow:var(--shadow-btn-hover);text-decoration:none}
.nav .cta:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--navy)}
/* Hero: full-bleed photo, left-aligned copy, like the original.
   🚨 The scrim is doing real work — the photo is bright daylight under a blue
   sky, which fights the sunset palette AND can't carry white text on its own.
   A near-opaque navy on the left grades to clear on the right, so the copy
   sits on ~#101f2e while the rig stays visible. Three widths; the 1600 is the
   source's native size, so nothing upscales. */
/* Hero: the brand sunset with the wiring schematic energising over it.
 *
 * 🪤 The header bar uses the same artwork, so without a difference the two
 * stack as one repeated image. Three things separate them:
 *   · crop — the bar is a 64px slice at 62%; the hero sits at 38% so the sun
 *     and waterline are the subject rather than a sliver of sky
 *   · scale — the bar scrims to ~90%; the hero lets the colour through
 *   · the traces — only the hero animates, which is what makes it a moment
 * Nothing new is downloaded; the sunset is already cached from the bar. */
/* Hero: dark technical ground on the left, dissolving into the sunset right.
 *
 * 🚨 It used to be a full-bleed sunset sitting directly under a sunset top
 * bar — two of the same picture stacked, which read as mud. Now the sunset
 * only occupies the right of the frame and the left is genuinely solid navy,
 * not a heavily-dimmed photo. That kills the repetition AND the muddiness:
 * the old left side was dark because it was 94% scrim over a bright image,
 * which greys everything; a real dark ground is cleaner at far less tint.
 *
 * The image is anchored right so the sun lands in the open half. */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:74px 22px 60px;color:#fff;
background-color:#071522;background-size:auto 118%;background-position:right center;background-repeat:no-repeat;
background-image:url(/assets/brand/sunset-1200.webp)}
@media(min-width:1200px){.hero{background-image:url(/assets/brand/sunset-1920.webp)}}
@media(max-width:700px){.hero{padding:46px 20px 42px;background-size:cover;background-position:center 40%;
background-image:url(/assets/brand/sunset-760.webp)}}
/* The dissolve. Solid to ~40%, gone by ~78% — the copy sits on flat navy and
   the sunset is left alone where it actually shows. */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(90deg,#071522 0%,#071522 38%,rgba(7,21,34,.72) 56%,rgba(7,21,34,.24) 72%,transparent 84%)}
@media(max-width:700px){.hero::after{background:linear-gradient(180deg,rgba(7,21,34,.88) 0%,rgba(7,21,34,.8) 55%,rgba(7,21,34,.74) 100%)}}
.hero>.hero-in{max-width:1040px;margin-left:auto;margin-right:auto;position:relative;z-index:2}
.hero-in{max-width:620px}
.hero h1{font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-1px;margin:0 0 12px;color:#fff}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p{font-size:17px;color:rgba(255,255,255,.86);margin:0 0 24px;max-width:56ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:700px){.hero h1{font-size:34px}}
/* Buttons follow Wrenchable's mechanics (app/src .btn-primary): a vertical
   gradient rather than a flat fill, a hard 2px offset shadow instead of a
   blur, and a real press — lift 1px on hover, push 1px in on active with the
   shadow collapsing. That physicality is what stops them reading as flat
   rectangles. Colours are Cheat Sheet, not Wrenchable. */
.btn{display:inline-block;padding:12px 22px;font-weight:700;font-size:16px;letter-spacing:.03em;
color:#fff;background:linear-gradient(to bottom,var(--orange),#c9430f);border:1.5px solid #b23a0c;
border-radius:var(--radius-btn);box-shadow:var(--shadow-btn);transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{background:linear-gradient(to bottom,#ff6a2c,#d04a12);transform:translate(-1px,-1px);box-shadow:var(--shadow-btn-hover);text-decoration:none}
.btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--navy)}
.btn.ghost{color:var(--navy);background:linear-gradient(to bottom,#fff,#f3eee4);border-color:var(--navy)}
.btn.ghost:hover{background:linear-gradient(to bottom,#fff,#e9e2d4);color:var(--navy)}
.bc-jump{margin:22px 0 6px}
.guide .bc-fig{margin:20px 0 8px}
.bc-fig img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.bc-fig figcaption{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.4;text-align:center}
.bcv-keylink{margin:2px 0 0;font-size:14px}
.bcv-keylink a{color:var(--red);font-weight:700;text-decoration:none;border-bottom:2px solid var(--amber)}
/* BP key: the location map sits BESIDE the code table, because the map is what
   turns "BP3" into a panel to pull. Stacks under 900px. */
.bp-key{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:26px;align-items:start;margin:14px 0 10px}
.bp-key.no-map{display:block}
.bp-key table.cmp{width:100%;margin:0}
.bp-map{margin:0;position:sticky;top:14px}
.bp-map a{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.bp-map img{display:block;width:100%;height:auto}
.bp-map figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.4}
.bp-map-zoom{color:var(--red);font-weight:700;white-space:nowrap}
@media(max-width:900px){.bp-key{grid-template-columns:1fr;gap:18px}.bp-map{position:static}}
/* Vehicle lookup. The table is fully rendered server-side — the filter only
   toggles row visibility, so the page is complete (and crawlable) with JS off. */
.bcv-ctl{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:20px 0 12px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.bcv-f{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bcv-f input,.bcv-f select{font:inherit;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;min-width:260px}
.bcv-f input:focus,.bcv-f select:focus{outline:2px solid var(--orange);outline-offset:1px}
.bcv-chk{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);padding-bottom:10px}
.bcv-reset{background:none;border:0;padding:0 0 10px;font:inherit;font-size:14px;color:var(--red);cursor:pointer;text-decoration:underline}
.bcv-count{margin:0 0 0 auto;padding-bottom:10px;font-size:14px;color:var(--muted)}
.bcv-wrap{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:14px;background:var(--card)}
table.bcv{border-collapse:collapse;width:100%;min-width:760px;font-size:14px}
.bcv th,.bcv td{text-align:left;vertical-align:top;padding:11px 13px;border-bottom:1px solid var(--line)}
.bcv thead th{position:sticky;top:0;z-index:1;background:var(--navy);color:#fff;font-family:var(--sub);font-weight:400;font-size:15px;letter-spacing:.07em}
.bcv tbody tr:nth-child(even){background:rgba(11,31,51,.025)}
.bcv tbody tr[hidden]{display:none}
.bcv-veh{font-weight:700;color:var(--ink);white-space:normal}
.bcv-make{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.bcv-yr{white-space:nowrap}
.bcv-bp{font-weight:800;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--amber)}
.bcv-h,.bcv-v{list-style:none;margin:0;padding:0}
.bcv-h li{font-size:13px;white-space:nowrap}
.bcv-h b{font-weight:700}
.bcv-h i{display:inline-block;min-width:92px;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bcv-v li{margin:0 0 5px;line-height:1.35}
.bcv-v a{color:var(--red);text-decoration:none}
.bcv-v a:hover{text-decoration:underline}
.bcv-none{color:var(--muted)}
.bcv-empty{padding:26px;text-align:center;color:var(--muted)}
@media(max-width:680px){.bcv-f,.bcv-f input,.bcv-f select{min-width:0;width:100%}.bcv-count{margin-left:0}}
.stats{display:flex;gap:28px;justify-content:center;margin-top:30px;color:var(--muted);font-size:15px}.stats b{color:var(--ink);font-size:22px;display:block;font-weight:900}
.wrap{max-width:1040px;margin:0 auto;padding:26px 22px}
.sec{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--acc);font-weight:800;margin:26px 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;transition:.15s}
.card:hover{border-color:var(--acc);transform:translateY(-2px);text-decoration:none}
.card .tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--acc)}
.card h3{margin:8px 0 0;font-size:17px;color:var(--ink)}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.topic h3{margin:0 0 8px;font-size:16px}.topic ul{margin:0;padding:0;list-style:none}.topic li{padding:3px 0;font-size:14.5px}
.cta-band{max-width:1040px;margin:40px auto;padding:30px 26px;background:var(--navy);color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-band h2{margin:0 0 6px;font-size:23px;color:#fff}.cta-band p{margin:0;color:rgba(255,255,255,.82)}
.guide{max-width:760px;margin:0 auto;padding:30px 22px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:8px}
.guide h1{font-size:34px;font-weight:900;letter-spacing:-.5px;margin:0 0 18px}
.guide .body{font-size:17px}.guide .body h2{font-size:22px;margin:26px 0 8px}.guide .body h3{font-size:18px;margin:20px 0 6px}
.guide .body ul{padding-left:20px}.guide .body li{margin:4px 0}
.guide figure{margin:16px 0;text-align:center}.guide img{max-width:100%;border:1px solid var(--line);border-radius:10px}
.guide figcaption{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.4;text-align:center}
.guide .bp-fig img{background:var(--card);padding:6px}
.related{margin-top:30px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.related h3{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--acc)}.related ul{margin:0;padding-left:18px}
.lead{color:var(--muted);font-size:17px;max-width:680px}
.search{width:100%;max-width:420px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;margin:8px 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;user-select:none;transition:all .12s}.chip:hover{border-color:var(--acc)}.chip.active{background:var(--acc);color:#fff;border-color:var(--acc)}.chip.active b{color:#fff}.chip b{color:var(--acc)}
.parts .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--muted)}
.parts{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.parts th{text-align:left;padding:9px 12px;background:#f1ece4;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.parts td{padding:9px 12px;border-top:1px solid var(--line)}.parts .r{text-align:right;font-variant-numeric:tabular-nums}
.note{color:var(--muted);font-size:13px;margin-top:10px}
/* Dark footer with the schematic behind it, echoing the original's black
   footer. Full-bleed, so the max-width moves onto the inner columns. */
.ft{position:relative;overflow:hidden;isolation:isolate;margin:0;padding:44px 22px 28px;
background:linear-gradient(165deg,#0a141d 0%,#07101a 55%,#0c1620 100%);color:rgba(255,255,255,.72);font-size:14px}
.ft>*{position:relative;z-index:2}
/* Traces span the whole width here rather than fading right — a footer has no
   competing artwork, so the mask from the hero is removed and the opacity
   dropped instead, keeping it texture rather than decoration. */
.ft>.circuit{z-index:1;opacity:.3;-webkit-mask-image:none;mask-image:none}
.ft a{color:rgba(255,255,255,.86)}
.ft a:hover{color:var(--orange)}
.ft-links{margin:8px 0}.ft-sm{font-size:12px;opacity:.55;margin-top:6px;text-align:center}
.byline{color:var(--muted);font-size:14px;margin:-8px 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}.byline strong{color:var(--ink)}
.diagrams{margin:34px 0 10px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.diagrams h2{margin:0 0 4px;font-size:20px}.dg-note{color:var(--muted);font-size:14px;margin:0 0 16px}
.dg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.dg{margin:0}.dg a{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.dg img{width:100%;height:100%;object-fit:contain;transition:transform .15s}.dg a:hover img{transform:scale(1.04)}
.dg figcaption{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.3}
.dg-cta{display:inline-block;margin-top:16px;font-weight:700;color:var(--acc)}
.pl-wrap{overflow-x:auto;margin:8px 0}.parts.pl{font-size:13px}.parts.pl td{vertical-align:top}.parts.pl td:nth-child(4){min-width:280px}
.pl-links{margin:0;padding-left:18px}.pl-links li{margin:5px 0}.pl-links .muted{color:var(--muted);font-size:13px}
.card .muted{font-size:12px;color:var(--muted)}
@media (prefers-color-scheme:dark){:root{--ink:#efe7db;--muted:#a49b8d;--bg:#17140f;--card:#211d17;--line:#332d24}.parts th{background:#2a2419}.chip{background:#211d17}}

/* Traces belong to the dark half only — masked out before they reach the
   sunset, so they dissolve into it rather than being laid over the whole frame.
   🪤 z-index 1, ABOVE .hero::after. The scrim is opaque navy across the left
   38% and, as a pseudo-element, paints after the SVG — at the same z-index it
   buried the traces in exactly the half they're meant to light up. */
.circuit{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
/* Veiled back so the traces read as texture under the copy rather than
   competing with it, and faded out earlier so they're gone well before the
   sun rather than running up against it. */
opacity:.62;
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 18%,rgba(0,0,0,.42) 34%,transparent 48%);
mask-image:linear-gradient(90deg,#000 0%,#000 18%,rgba(0,0,0,.42) 34%,transparent 48%)}
/* 🪤 A live trace ran straight through the paragraph. Scrim sits above the
   schematic and below the copy so traces stay visible to the right but never
   compete with text on the left. */
.hero-e::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(95deg,rgba(6,16,26,.93) 0%,rgba(6,16,26,.86) 38%,rgba(6,16,26,.45) 66%,transparent 100%)}
.hero-e>.hero-in{position:relative;z-index:1}
.circuit use{fill:none;stroke-linecap:round;stroke-linejoin:round}
.c-static{stroke:rgba(255,255,255,.10);stroke-width:2}
.c-flow{stroke:var(--orange);stroke-width:2.5;stroke-dasharray:26 300;animation:flow 7s linear infinite;
filter:drop-shadow(0 0 5px rgba(242,90,28,.65))}
.c-node{opacity:.55;animation:pulse 3.4s ease-in-out infinite}
@keyframes flow{to{stroke-dashoffset:-326}}
@keyframes pulse{0%,100%{opacity:.32}50%{opacity:.8}}
/* 🚨 Motion is decorative here, so it must be fully optional. */
@media(prefers-reduced-motion:reduce){.c-flow,.c-node{animation:none}.c-flow{opacity:.5}}

/* ── part identifier ── */
/* Shell copied in spirit from Wrenchable /diagrams: fixed category rail +
   content, collapsing to a single column on narrow screens. */
.pi-shell{display:grid;grid-template-columns:236px 1fr;gap:26px;max-width:1240px;margin:0 auto;padding:26px 22px 10px}
.pi-rail{align-self:start;position:sticky;top:86px;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.pi-rail-head{background:var(--navy);color:#fff;font-family:var(--sub);font-size:15px;letter-spacing:.1em;padding:10px 14px}
.pi-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;font-size:14px;
color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.pi-row:hover{background:var(--navy-lt);text-decoration:none}
.pi-row.on{background:var(--cream);font-weight:700;box-shadow:inset 3px 0 0 var(--orange)}
.pi-n{font-size:12px;color:var(--muted)}
.pi-soon{font-size:11px;letter-spacing:.04em;opacity:.7}
.pi-main{min-width:0}
.pi-stats{display:flex;gap:26px;margin:14px 0 18px;color:var(--muted);font-size:14px}
.pi-stats b{display:block;color:var(--ink);font-size:21px;font-weight:800}
.pi-find{width:100%;max-width:460px;padding:10px 14px;font:inherit;font-size:15px;
border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);margin-bottom:6px}
.pi-find:focus{outline:none;border-color:var(--orange)}
.pi-series h2{margin-top:20px}
.pi-empty{color:var(--muted);font-size:15px;margin:14px 0}
/* Level-specific editorial — the thing that made the original worth reading.
   Sits below the list so the list stays the first thing you reach. */
.pi-note{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;max-width:70ch}
.pi-note h2{font-size:19px;margin:0 0 6px;color:var(--navy)}
.pi-note p{margin:0;line-height:1.6;color:#4c5c6b}
@media(max-width:880px){.pi-shell{grid-template-columns:1fr;gap:16px;padding:18px 20px 10px}
.pi-rail{position:static}}
.idgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:16px;margin:22px 0 10px}
.idcard{display:block;padding:20px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;
color:inherit;text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s}
.idcard:hover{border-color:var(--orange);transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(11,31,51,.18);text-decoration:none}
.idcard h2{margin:8px 0 6px;font-size:20px;color:var(--navy)}
.idcard p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.idlist{list-style:none;margin:0 0 22px;padding:0;
display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 20px}
.idlist li{padding:5px 0;font-size:14.5px;border-bottom:1px solid rgba(128,128,128,.14)}
.muted{color:var(--muted)}

/* ── home blocks, rebuilt from the original WordPress page ── */
/* Hero sits on a dark photo now, so these three tokens had to flip — .eyebrow
   was Signal Red and .hero-sub/.stats were navy, i.e. invisible on navy. */
.eyebrow{font-family:var(--sub);font-size:15px;letter-spacing:.16em;color:var(--amber);margin:0 0 6px}
.eyebrow::after{content:"";display:block;width:52px;height:3px;background:var(--orange);margin-top:7px;border-radius:2px}
.hero-sub{font-family:var(--head);font-stretch:125%;font-weight:600;font-size:21px;line-height:1.3;color:#fff;margin:0 0 14px;max-width:32ch}
.hero .stats{justify-content:flex-start;color:rgba(255,255,255,.72)}
.hero .stats b{color:#fff}
.hero .trust{color:rgba(255,255,255,.62)}

/* Join Our Community — navy band, badge alongside the copy */
/* Sits directly under the hero now, so no top margin — a strip of page
   background between two dark blocks reads as a mistake. And because the
   resources band below is also navy, this one takes a slightly deeper
   gradient plus a hairline ember rule, otherwise the two merge into one
   undifferentiated slab. */
/* Warm Cream rather than white. The resources band directly below IS white,
   and two white blocks in a row merge into one slab — cream against white is
   a gentle but readable step, and it's a brand colour rather than an
   arbitrary grey. Text flips to navy; the whole band was built for dark. */
.band-community{background:var(--cream);color:var(--navy);
margin:0;border-bottom:2px solid rgba(242,90,28,.38)}
.band-community .sec{color:var(--red)}
.band-community .lead{color:var(--navy)}
.band-community p{color:#4c5c6b}
.community-in{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;padding-top:34px;padding-bottom:34px}
.band-community .lead{font-size:18px}
.band-community p{max-width:62ch}
.community-badge{display:block;flex-shrink:0;transition:transform .15s}
.community-badge:hover{transform:scale(1.04)}
/* 310px against a 512px source, so it stays sharp on a 2x display too. */
.community-badge img{width:310px;max-width:100%;height:auto;display:block}
@media(max-width:980px){.community-badge img{width:250px}}
@media(max-width:760px){.community-in{grid-template-columns:1fr}.community-badge{justify-self:center}.community-badge img{width:210px}}

/* About Us — copy beside the drivetrain diagram */
.about-split{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:center}
.about-split p{max-width:62ch;line-height:1.6}
.about-img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
@media(max-width:760px){.about-split{grid-template-columns:1fr}}

/* Footer — the original's column layout */
.ft-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:26px;max-width:1040px;margin:0 auto 22px;text-align:left}
.ft-cols h2{font-family:var(--sub);font-size:17px;letter-spacing:.08em;margin:0 0 9px;color:var(--amber)}
.ft-cols ul{list-style:none;margin:0;padding:0}
.ft-cols li{padding:3px 0;font-size:14px}
.ft-brand img{display:block;margin-bottom:10px}
.ft-quote{font-style:italic;line-height:1.5;margin:0;max-width:34ch;opacity:.85}
@media(max-width:760px){.ft-cols{grid-template-columns:1fr 1fr}}

/* ── home: pillars + credibility ── */
.trust{margin:14px 0 0;font-size:13px;color:var(--muted,#666)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.pillar{display:block;padding:18px;border:1px solid rgba(128,128,128,.22);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.pillar:hover{border-color:var(--orange);transform:translateY(-2px)}
.pillar h3{margin:6px 0 6px;font-size:17px;line-height:1.25}
.pillar p{margin:0;font-size:14px;line-height:1.55;color:#4a5a68}
/* "Our Resources" — the original's band: navy ground, cream screenshot cards,
   and a wave cut into the section below. The screenshots are the point; they
   show the tool instead of describing it. */
/* Our Resources — the original's blue band, carrying the cream cards. The
   blue bridges the brand navy toward the old site's #025c8e rather than
   reverting to it outright, so it still sits inside the palette. The wave at
   its foot is filled navy to cut into the band below. */
.band-res{position:relative;padding:44px 0 66px;margin:0;
background:linear-gradient(168deg,#06456b 0%,#075a86 55%,#04486e 100%)}
.band-title{font-family:var(--head);font-stretch:125%;font-weight:700;font-size:34px;color:#fff;text-align:center;margin:0}
.band-title::after{content:"";display:block;width:74px;height:4px;background:var(--orange);margin:14px auto 30px;border-radius:2px}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:52px;display:block}
/* Carousel: a scroll-snap track rather than a JS slider, so it keeps native
   momentum scroll, trackpad swipe and keyboard arrows for free. */
.carousel{position:relative}
.band-res .pillars{display:flex;grid-template-columns:none;gap:22px;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:2px;padding:4px 2px 14px;
scrollbar-width:none;-ms-overflow-style:none}
.band-res .pillars::-webkit-scrollbar{display:none}
.band-res .pillar{flex:0 0 clamp(250px,30%,330px);scroll-snap-align:start}
.car-btn{position:absolute;top:38%;z-index:3;width:44px;height:44px;border-radius:50%;cursor:pointer;
border:2px solid var(--navy-dk);background:var(--cream);color:var(--navy);
font:700 26px/1 var(--body);display:grid;place-items:center;
box-shadow:3px 3px 0 rgba(0,0,0,.34);transition:transform .12s,box-shadow .12s,opacity .15s}
.car-btn.prev{left:-14px}.car-btn.next{right:-14px}
.car-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(0,0,0,.34)}
.car-btn:active:not(:disabled){transform:translate(1px,1px);box-shadow:0 0 0 rgba(0,0,0,.34)}
.car-btn:disabled{opacity:.32;cursor:default}
@media(max-width:820px){.car-btn{display:none}.band-res .pillar{flex-basis:78%}}
.band-res .pillar{display:flex;flex-direction:column;padding:0;background:var(--cream);border:2px solid var(--navy-dk);
border-radius:12px;overflow:hidden;color:var(--navy);box-shadow:4px 4px 0 rgba(0,0,0,.32);transition:transform .15s,box-shadow .15s}
.band-res .pillar:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(0,0,0,.32);border-color:var(--navy-dk)}
.band-res .pillar img{width:100%;height:auto;display:block;background:#fff;border-bottom:2px solid var(--navy-dk)}
/* Stands in for a screenshot where we don't have an honest one. Typographic,
   not illustrative — same footprint as the image so card heights still line up. */
.pillar-plate{display:flex;align-items:center;justify-content:center;aspect-ratio:620/416;
background:linear-gradient(150deg,var(--navy) 0%,#13324d 55%,#7d2a14 100%);border-bottom:2px solid var(--navy-dk)}
.pillar-plate span{font-family:var(--sub);font-size:21px;letter-spacing:.1em;color:var(--amber);text-align:center;padding:0 16px}
.pillar-body{padding:16px 18px 20px}
.band-res .pillar h3{margin:0 0 8px;font-size:19px;line-height:1.25;color:var(--navy)}
@media(max-width:640px){.band-title{font-size:26px}}

/* Popular guides — the navy band beneath Our Resources. The .card default is
   built for a light ground, so everything inside is re-stated for dark. */
.band-pop{background:var(--navy);padding:10px 0 34px;margin:0}
.band-pop .sec{color:var(--amber)}
.band-pop .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.15)}
.band-pop .card:hover{border-color:var(--orange);background:rgba(255,255,255,.09)}
.band-pop .card h3{color:#fff}
.band-pop .card .tag{color:var(--orange)}
.band-pop .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.band-pop .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.who{border-top:1px solid rgba(128,128,128,.22);padding-top:26px}
.who p{max-width:70ch;line-height:1.6;margin:0 0 10px}

/* ── training & certification ── */
/* .sec is the site's small orange section kicker. A landing page that has to
   compete on a head term needs a real title, so it gets its own class rather
   than restyling .sec out from under every other page. */
.pagetitle{font-size:40px;line-height:1.12;letter-spacing:-.02em;margin:6px 0 14px}
@media(max-width:640px){.pagetitle{font-size:30px}}
.card-p{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted,#666);font-weight:400}
.band-cert{border-top:1px solid rgba(128,128,128,.22);padding-top:28px}
.myth{border-left:4px solid var(--orange);background:rgba(242,90,28,.07);padding:16px 20px;border-radius:0 10px 10px 0;margin:24px 0}
.myth h2{margin:0 0 8px;font-size:19px}
.myth p{margin:0 0 10px;line-height:1.55}
.myth p:last-child{margin-bottom:0}
.cmp{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.cmp th,.cmp td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(128,128,128,.2);vertical-align:top}
.cmp thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#666)}
.cmp tbody th{width:34%;font-weight:600;white-space:nowrap}
@media(max-width:640px){.hero h1{font-size:32px}.nav nav{font-size:14px;gap:12px}
.cmp,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block;width:auto}
.cmp thead{display:none}
.cmp tr{border-bottom:1px solid rgba(128,128,128,.2);padding:8px 0}
.cmp td,.cmp th{border:0;padding:3px 0;white-space:normal}}