@font-face{font-family:'Archivo';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/ArchivoItalic-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Archivo-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Archivo-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Archivo-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Archivo-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/BigShouldersDisplay-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/BigShouldersDisplay-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/BigShouldersDisplay-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/BigShouldersDisplay-900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/JetBrainsMono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/JetBrainsMono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* dodgedaddy.ca. Tokens live here and nowhere else (README: Design plan).
   Palette sampled from the Dodge Daddy badge logo: fire red, carbon black, chrome silver. */

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;}
button{cursor:pointer;}
[hidden]{display:none!important;}

/* ============ TOKENS ============ */
#app{
  /* grounds, darkest to lightest */
  --void:#08090B;
  --carbon:#101216;
  --carbon-hi:#181B20;
  --edge:#272B32;
  /* metals */
  --steel:#6E757F;
  --chrome:#D9DDE3;
  --chrome-dim:#9AA2AC;
  --white:#F4F6F9;
  /* the accent: one hue, three stops, from the badge */
  --red:#E11B23;
  --red-hot:#FF3A42;
  --red-deep:#8E1014;
  --red-wash:rgba(225,27,35,.10);
  /* the one light surface */
  --band:#E9EBEF;
  --band-2:#D7DBE1;
  --band-ink:#101216;

  --radius:2px;
  --container:1160px;
  --s-section:clamp(52px,7.5vw,116px);
  --ease:cubic-bezier(.65,.05,.25,1);
  --font-display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --font-body:'Archivo','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  /* the slash motif from the badge, used as a texture in exactly two places */
  --slashes:repeating-linear-gradient(115deg,transparent 0 13px,rgba(225,27,35,.055) 13px 15px);

  background:var(--void);
  color:var(--white);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  position:relative;
  overflow-x:clip;
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1;color:var(--white);letter-spacing:.01em;text-transform:uppercase;}
/* Chrome fill on the h1 only, mirroring the DADDY half of the badge. One per page by definition. */
h1{font-size:clamp(38px,7vw,92px);letter-spacing:.005em;
  background:linear-gradient(178deg,#FFFFFF 4%,var(--chrome) 52%,#8A9099 96%);
  color:var(--white);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;padding-bottom:.06em;}
h2{font-size:clamp(28px,4.2vw,54px);}
h3{font-size:clamp(21px,2.6vw,30px);font-weight:700;}
h4{font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--chrome-dim);}
p{color:var(--chrome-dim);}
p strong,li strong{color:var(--white);font-weight:600;}
.mono{font-family:var(--font-mono);font-size:.86em;letter-spacing:.02em;}
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px;width:100%;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
section.section{padding-block:var(--s-section);}
.section-head{max-width:720px;margin-bottom:clamp(26px,3.6vw,48px);}
.section-head h2{text-wrap:balance;}
.section-head .lead{margin-top:14px;font-size:17px;max-width:60ch;}
.section-head .lead a{color:var(--white);border-bottom:1px solid var(--red);}
.kicker{font-family:var(--font-mono);font-size:12px;color:var(--chrome-dim);letter-spacing:.06em;display:block;margin-bottom:12px;text-transform:uppercase;line-height:1.5;}
.kicker b{color:var(--red);font-weight:500;}
/* the badge's twin slashes, as the kicker's leading rule */
.kicker::before{content:"";display:inline-block;vertical-align:middle;width:22px;height:10px;margin-right:10px;position:relative;top:-1px;
  background:linear-gradient(115deg,transparent 0 2px,var(--red) 2px 5px,transparent 5px 9px,var(--red) 9px 12px,transparent 12px);}

:focus-visible{outline:2.5px solid var(--red-hot);outline-offset:3px;border-radius:2px;}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--red);color:#fff;padding:10px 14px;font-weight:600;z-index:200;transition:top .15s;}
.skip-link:focus{top:12px;}

/* a gradient hairline: the blend that separates bands without a hard cut */
.rule-blend{height:1px;border:0;background:linear-gradient(90deg,transparent,rgba(225,27,35,.55),transparent);}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;padding:0 22px;height:48px;border-radius:var(--radius);
  border:1.5px solid transparent;transition:background .18s,color .18s,border-color .18s,box-shadow .22s,transform .18s;white-space:nowrap;cursor:pointer;position:relative;}
.btn svg{width:17px;height:17px;flex:none;}
.btn-red{color:#fff;border-color:var(--red-deep);
  background:linear-gradient(180deg,var(--red-hot) 0%,var(--red) 46%,var(--red-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px -12px rgba(225,27,35,.75);}
.btn-red:hover{background:linear-gradient(180deg,#FF4B53 0%,#E8242C 46%,#A0141A 100%);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 28px -12px rgba(225,27,35,.9);}
.btn-red:active{transform:translateY(0);}
.btn-ghost{border-color:var(--edge);color:var(--white);background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));}
.btn-ghost:hover{border-color:var(--steel);}
.on-paper .btn-ghost,.band-paper .btn-ghost{border-color:rgba(16,18,22,.3);color:var(--band-ink);background:linear-gradient(180deg,#fff,var(--band-2));}
.on-paper .btn-ghost:hover,.band-paper .btn-ghost:hover{border-color:var(--band-ink);}
.btn-lg{height:54px;padding:0 28px;font-size:16px;}

/* ============ BRAND LOCKUP ============ */
/* DODGE in red, DADDY in chrome: the badge's own two-tone, at text sizes. */
.brand{display:inline-flex;align-items:center;gap:11px;}
/* The mark is the badge emblem, which is about 1.8 times as wide as it is tall, so it is sized
   by HEIGHT and left to find its own width. A fixed square would squash it. */
.brand-mark{flex:none;display:block;height:40px;}
.brand-mark picture{display:block;height:100%;}
.brand-mark img,.brand-mark svg{display:block;height:100%;width:auto;}
.brand-word{font-family:var(--font-display);font-weight:800;font-size:27px;letter-spacing:.045em;text-transform:uppercase;line-height:.92;white-space:nowrap;display:flex;flex-direction:column;}
.brand-word .bw-1{color:var(--red);}
.brand-word .bw-2{color:var(--white);background:linear-gradient(180deg,#FFFFFF,#A8AEB7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.brand:hover .bw-1{color:var(--red-hot);}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(8,9,11,.82);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s;}
.site-header.scrolled{border-bottom-color:var(--edge);background:rgba(8,9,11,.95);}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(225,27,35,.5),transparent);opacity:0;transition:opacity .25s;}
.site-header.scrolled::after{opacity:1;}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px;}
.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav a{font-weight:500;font-size:15px;color:var(--chrome-dim);padding:10px 13px;position:relative;transition:color .18s;}
.main-nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:linear-gradient(90deg,var(--red),var(--red-hot));transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);}
.main-nav a:hover{color:var(--white);}
.main-nav a[aria-current="page"]{color:var(--white);}
.main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.header-cta{display:flex;align-items:center;gap:10px;}
.hamburger{display:none;width:46px;height:46px;align-items:center;justify-content:center;border:1.5px solid var(--edge);border-radius:var(--radius);color:var(--white);}
.hamburger svg{width:22px;height:22px;}
.mobile-nav{display:none;flex-direction:column;border-top:1px solid var(--edge);background:var(--void);padding:6px 24px 22px;}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:15px 0;font-size:18px;font-weight:500;border-bottom:1px solid var(--edge);color:var(--white);}
.mobile-nav a[aria-current="page"]{color:var(--red);}
.mobile-nav a.btn{margin-top:18px;border-bottom:none;justify-content:center;}

/* ============ HERO (the one immersive moment) ============ */
.hero{position:relative;isolation:isolate;padding-block:clamp(40px,6vw,100px) clamp(44px,5.5vw,92px);overflow:hidden;}
/* layer 1: red bloom behind the badge */
.hero::before{content:"";position:absolute;z-index:-2;top:-14%;right:-6%;width:min(760px,86vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(225,27,35,.30) 0%,rgba(225,27,35,.11) 38%,transparent 68%);filter:blur(6px);pointer-events:none;}
/* layer 2: the slash texture, plus a vignette that fades it into the void */
.hero::after{content:"";position:absolute;z-index:-1;inset:0;background:var(--slashes);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 20%,#000 10%,transparent 72%);mask-image:radial-gradient(120% 90% at 70% 20%,#000 10%,transparent 72%);pointer-events:none;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(260px,.82fr);gap:clamp(28px,4.5vw,68px);align-items:center;}
.hero h1{max-width:none;font-size:clamp(34px,5.4vw,68px);}
.hero h1 .h1-line{display:block;}
.hero .lead{margin-top:20px;font-size:clamp(16.5px,1.4vw,19px);max-width:56ch;color:var(--chrome-dim);line-height:1.62;}
.hero .lead strong{color:var(--white);}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}

/* the brand plate: the badge, bloomed, on a plinth */
.hero-badge{display:flex;justify-content:center;align-items:center;position:relative;}
/* Absolute with no offsets resolves to the static position, which in this flex row is hard left,
   so the glow sat off to one side of the badge it is meant to sit behind. Pin it to the centre. */
.hero-badge::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(225,27,35,.22),transparent 66%);filter:blur(24px);}
/* <picture> is the flex item, not the <img> inside it, so the wrapper stretched across the whole
   column while the image stayed hard left with a dead gap beside it. That is what made the logo
   look off-centre on a phone. Make the wrapper a full-width block and centre the image in it. */
.hero-badge picture{display:flex;justify-content:center;width:100%;}
.hero-badge img,.hero-badge svg{position:relative;margin-inline:auto;width:min(100%,400px);height:auto;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.72)) drop-shadow(0 0 26px rgba(225,27,35,.18));}
@keyframes plate-in{from{opacity:0;transform:translateY(14px) scale(.975);}to{opacity:1;transform:none;}}
.hero-badge img,.hero-badge svg{animation:plate-in 1s var(--ease) both;}
@media (prefers-reduced-motion:reduce){.hero-badge img,.hero-badge svg{animation:none;}}

/* The brand plate. His badge is a hexagonal shield with DODGE in red and DADDY in chrome over
   the tagline; this is that lockup in LIVE TEXT inside the same double-stroked shield, so it is
   razor sharp at every size and readable by a screen reader. tools/make-brand-assets.js swaps in
   the full truck badge as an <img> as soon as the source PNG is dropped in brand/. */
.brand-plate{--hex:polygon(50% 0,100% 14%,100% 86%,50% 100%,0 86%,0 14%);
  position:relative;width:min(100%,400px);aspect-ratio:1/1.06;clip-path:var(--hex);
  background:linear-gradient(180deg,var(--steel),#3A3F47);padding:3px;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.72)) drop-shadow(0 0 26px rgba(225,27,35,.18));
  animation:plate-in 1s var(--ease) both;}
.bp-red{clip-path:var(--hex);background:linear-gradient(180deg,var(--red-hot),var(--red-deep));padding:3px;height:100%;}
.bp-in{position:relative;clip-path:var(--hex);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:16% 9% 14%;text-align:center;
  background:linear-gradient(172deg,#1B1E23 0%,var(--void) 62%);}
.bp-in::before{content:"";position:absolute;inset:0;background:var(--slashes);clip-path:var(--hex);pointer-events:none;}
.bp-word{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:.03em;}
.bp-1{display:block;font-size:clamp(38px,10vw,66px);color:var(--red);
  background:linear-gradient(180deg,#FF5A61 6%,var(--red) 52%,var(--red-deep) 98%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.bp-2{display:block;font-size:clamp(30px,8vw,53px);color:var(--white);
  background:linear-gradient(180deg,#FFFFFF 6%,var(--chrome) 54%,#7E848D 98%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.bp-rule{width:62%;height:2px;margin:9px 0 8px;background:linear-gradient(90deg,transparent,var(--red),transparent);}
.bp-tag{font-family:var(--font-mono);font-size:clamp(9px,2vw,11.5px);letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-dim);}
@media (max-width:1020px){.brand-plate{width:min(70%,310px);}}
@media (max-width:760px){.brand-plate{width:min(72%,246px);}}

/* the spec strip: the four facts, as one bordered instrument panel */
.spec-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(28px,3.4vw,40px);
  background:var(--edge);border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden;}
.spec-strip > div{background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));padding:14px 16px 15px;}
.spec-strip b{display:block;font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1;color:var(--white);letter-spacing:.03em;text-transform:uppercase;}
.spec-strip span{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--chrome-dim);margin-top:6px;}
.spec-strip > div:first-child b,.spec-strip > div:nth-child(3) b{color:var(--red);}

/* ============ LIGHT BAND (blended, not hard-cut) ============ */
.band-paper{position:relative;background:linear-gradient(180deg,var(--band) 0%,#F2F4F7 42%,var(--band-2) 100%);color:var(--band-ink);}
.band-paper::before,.band-paper::after{content:"";position:absolute;left:0;right:0;height:26px;pointer-events:none;}
.band-paper::before{top:0;background:linear-gradient(180deg,rgba(8,9,11,.30),transparent);}
.band-paper::after{bottom:0;background:linear-gradient(0deg,rgba(8,9,11,.22),transparent);}
.band-paper h2,.band-paper h3{color:var(--band-ink);}
.band-paper h1,.band-paper h2{-webkit-text-fill-color:currentColor;background:none;color:var(--band-ink);}
.band-paper p{color:rgba(16,18,22,.72);}
.band-paper .kicker{color:rgba(16,18,22,.58);}
.band-paper .kicker b{color:var(--red-deep);}
.band-paper .kicker::before{background:linear-gradient(115deg,transparent 0 2px,var(--red-deep) 2px 5px,transparent 5px 9px,var(--red-deep) 9px 12px,transparent 12px);}
.band-paper .section-head .lead a{color:var(--band-ink);border-bottom-color:var(--red);}

/* ============ INVENTORY BOARD ============ */
.board-groups{display:grid;gap:clamp(24px,2.8vw,40px);margin-top:8px;}
.board-h{font-size:20px;letter-spacing:.06em;margin-bottom:10px;padding-left:12px;border-left:4px solid var(--red);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.board{width:100%;border-collapse:collapse;font-size:15.5px;}
table.board th,table.board td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid rgba(16,18,22,.14);}
table.board thead th{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(16,18,22,.6);border-bottom:2px solid var(--band-ink);}
table.board tbody th{font-weight:600;width:30%;}
table.board tbody th a{display:inline-block;padding:7px 0;margin:-7px 0;border-bottom:1.5px solid var(--red);transition:border-color .15s,color .15s;}
table.board tbody th a:hover{border-color:var(--band-ink);color:var(--red-deep);}
table.board td{color:rgba(16,18,22,.78);}
table.board td:last-child{white-space:nowrap;}
/* The rule above is right for the inventory board's own 9 small per-group tables (site.js), whose
   last column ("Pulled from") holds short values. Removing it outright on 2026-09-15 fixed the
   fitment/interchange comparison tables below but broke those working tables instead: with
   nowrap gone, the browser no longer reserved room for "DS, Classic, DT" and it started wrapping
   at 1440px on a table that had never wrapped before. table.board is reused on parts.html and
   ram-1500.html for a comparison table whose last column holds full sentences, where the SAME
   nowrap rule demands 400px+ for that one column and starves the 30% first column down to 192px
   -- that is what actually broke "Doors, fenders, hoods, bumpers, grilles" into single-word wraps.
   So: keep nowrap as the default, and only these two comparison tables opt out. */
table.board.board-compare td:last-child{white-space:normal;}

/* ============ CARDS ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.part-card{display:grid;grid-template-columns:44px 1fr 22px;gap:16px;align-items:start;position:relative;
  background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));border:1px solid var(--edge);border-radius:var(--radius);padding:20px 18px;
  transition:border-color .2s,transform .2s;overflow:hidden;}
.part-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--red),var(--red-hot));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.part-card:hover{border-color:rgba(225,27,35,.5);transform:translateY(-2px);}
.part-card:hover::before{transform:scaleX(1);}
.part-ico{width:44px;height:44px;color:var(--red);}
.part-body{display:grid;gap:5px;min-width:0;}
.part-body b{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:.02em;text-transform:uppercase;line-height:1.05;color:var(--white);}
.part-body span{font-size:14.5px;color:var(--chrome-dim);}
.part-go{width:22px;height:22px;color:var(--steel);margin-top:2px;transition:color .18s,transform .18s;}
.part-card:hover .part-go{color:var(--red);transform:translateX(3px);}
.card-link{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--red);display:inline-flex;align-items:center;gap:6px;margin-top:auto;}
.card-link svg{width:13px;height:13px;transition:transform .18s;}
a:hover .card-link svg,.card-link:hover svg{transform:translateX(3px);}
.gen-card,.guide-card,.group-card{display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));border:1px solid var(--edge);border-radius:var(--radius);padding:24px 22px;
  transition:border-color .2s,transform .2s;min-width:0;}
.gen-card::before,.guide-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--red),var(--red-hot));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.gen-card:hover,.guide-card:hover{border-color:rgba(225,27,35,.5);transform:translateY(-2px);}
.gen-card:hover::before,.guide-card:hover::before{transform:scaleX(1);}
.gen-code{color:var(--red);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.gen-card b{font-family:var(--font-display);font-weight:800;font-size:34px;text-transform:uppercase;line-height:1;color:var(--white);}
.gen-years{display:block;font-family:var(--font-mono);font-weight:400;font-size:13px;letter-spacing:.04em;color:var(--chrome-dim);text-transform:none;margin-top:6px;}
.gen-card > span:not(.gen-code):not(.card-link),.guide-card > span:not(.card-link){font-size:15px;color:var(--chrome-dim);}
.guide-card b{font-family:var(--font-display);font-weight:700;font-size:23px;text-transform:uppercase;line-height:1.05;color:var(--white);letter-spacing:.01em;}
.group-card h3{font-size:19px;letter-spacing:.05em;padding-bottom:10px;border-bottom:2px solid var(--red);}
.group-card ul{display:grid;gap:0;}
.group-card li a{display:inline-block;padding:6px 0;color:var(--chrome-dim);font-size:15.5px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;}
.group-card li a:hover{color:var(--white);border-color:var(--red);}
/* cards sitting on the light band */
.on-paper .gen-card,.on-paper .guide-card,.on-paper .part-card{background:linear-gradient(180deg,var(--carbon),#0C0E11);border-color:rgba(16,18,22,.22);}

/* ============ PAGE HEAD / BREADCRUMB ============ */
.page-head{position:relative;padding-block:clamp(32px,5vw,72px) 20px;}
.page-head::before{content:"";position:absolute;z-index:-1;top:-40%;left:-10%;width:min(620px,80vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(225,27,35,.15),transparent 66%);pointer-events:none;}
.page-head h1{max-width:22ch;font-size:clamp(33px,5.2vw,70px);text-wrap:balance;}
.page-head .lead{margin-top:18px;font-size:clamp(16.5px,1.35vw,19px);max-width:62ch;color:var(--chrome-dim);line-height:1.62;}
.page-head .lead strong{color:var(--white);}
.byline{font-family:var(--font-mono);font-size:12.5px;color:var(--chrome-dim);margin-top:16px;letter-spacing:.03em;}
.byline time{color:var(--white);}
.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;font-family:var(--font-mono);font-size:12px;color:var(--chrome-dim);letter-spacing:.04em;margin-bottom:20px;}
.breadcrumb a{display:inline-block;padding:8px 0;margin:-8px 0;}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb .sep{color:var(--steel);}
.breadcrumb [aria-current]{color:var(--white);}
.page-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}

/* ============ BODY GRID + PROSE ============ */
.body-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(30px,4.5vw,72px);align-items:start;}
/* No max-width on .prose itself: per the visual-pass skill, "only tables, diagrams and code
   blocks may be wider" than the reading column, each in its own overflow-x:auto wrapper, which
   .table-scroll already is. The line-length cap below targets the actual running text (p, ul,
   ol), not every element in .prose, so table.spec and table.board keep the full column width. A
   first attempt on 2026-09-15 put the cap here instead and starved every table inside .prose
   down to the same 56ch a paragraph needs, which pushed several already-tight tables (e.g.
   charging-starting's 4-column layout) from fine to squeezed. */
.prose{min-width:0;}
/* 56ch, not 70. Measured 2026-09-15: Archivo's "ch" unit (the width of its "0" glyph) renders
   narrower than the font's average character, so 70ch here was fitting ~87 real characters per
   line, past WCAG 1.4.8's 80-character cap. 56ch measured out to the middle of the 60-75
   comfortable band on real content. */
.prose p,.prose ul,.prose ol{max-width:56ch;}
.prose h2{font-size:clamp(26px,3.2vw,40px);margin-top:clamp(38px,4vw,52px);margin-bottom:14px;scroll-margin-top:88px;text-wrap:balance;}
.prose h3{font-size:clamp(20px,2.2vw,26px);margin-top:32px;margin-bottom:10px;scroll-margin-top:88px;text-wrap:balance;}
.prose h2:first-child{margin-top:0;}
.prose p{margin-bottom:16px;}
.prose ul,.prose ol{margin:0 0 18px;display:grid;gap:10px;color:var(--chrome-dim);}
.prose ul li{padding-left:24px;position:relative;}
/* the badge's twin slashes as the list marker */
.prose ul li::before{content:"";position:absolute;left:0;top:.56em;width:13px;height:9px;
  background:linear-gradient(115deg,transparent 0 1px,var(--red) 1px 4px,transparent 4px 7px,var(--red) 7px 10px,transparent 10px);}
.prose ol{counter-reset:n;}
.prose ol li{padding-left:36px;position:relative;}
.prose ol li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:-.04em;font-family:var(--font-display);font-weight:800;font-size:23px;line-height:1;
  color:var(--red);background:linear-gradient(180deg,var(--red-hot),var(--red-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.prose a{color:var(--white);border-bottom:1px solid var(--red);transition:border-color .15s,color .15s;}
.prose a:hover{border-color:var(--white);color:var(--red-hot);}
.answer{border-left:4px solid var(--red);padding:6px 0 6px 22px;margin:0 0 26px;}
.answer p{color:var(--white);font-size:18px;margin:0;}
.cite{display:block;font-family:var(--font-mono);font-size:12.5px;color:var(--chrome-dim);margin:-6px 0 20px;padding-left:24px;position:relative;line-height:1.58;}
.cite::before{content:"";position:absolute;left:0;top:.5em;width:13px;height:9px;
  background:linear-gradient(115deg,transparent 0 1px,var(--red) 1px 4px,transparent 4px 7px,var(--red) 7px 10px,transparent 10px);}
.cite a{border-bottom-color:var(--edge);}
.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);margin:0 0 32px;border-radius:var(--radius);overflow:hidden;}
.keyfacts > div{background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));padding:18px 18px 16px;}
.keyfacts b{display:block;font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;margin-bottom:8px;letter-spacing:.02em;color:var(--red);
  background:linear-gradient(180deg,var(--red-hot),var(--red-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.keyfacts span{font-size:14px;color:var(--chrome-dim);}
.note{background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));border:1px solid var(--edge);border-left:4px solid var(--red);padding:18px 20px;margin:0 0 24px;border-radius:var(--radius);}
.note p{margin:0;color:var(--white);font-size:16px;}
.note p + p{margin-top:8px;}
.sources{margin-top:44px;padding-top:24px;border-top:1px solid var(--edge);}
.sources h2{font-size:22px;margin:0 0 12px;letter-spacing:.06em;}
.sources ol li{font-size:14.5px;}
.sources ol li::before{font-size:17px;top:.1em;}

/* spec tables inside prose */
.prose .table-scroll{margin:6px 0 26px;}
table.spec{width:100%;border-collapse:collapse;font-size:15px;}
table.spec caption{text-align:left;font-family:var(--font-display);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.04em;color:var(--white);padding-bottom:10px;}
table.spec th,table.spec td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--edge);color:var(--chrome-dim);}
table.spec thead th{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-dim);border-bottom:2px solid var(--red);}
/* min-width, not a percentage: unlike table.board, this table has no width hint at all on its
   first column, so the auto-layout algorithm was squeezing it down to whatever the other two
   long-sentence columns left over. Measured on the drivetrain page 2026-09-15: a 112px column
   against a 137px minimum for "Front differential" wrapped every one of its five row labels. 150px
   comfortably fits a two- or three-word label; a genuinely long label (there are a few) still
   wraps across a couple of lines, which is correct, not starved. */
table.spec tbody th{color:var(--white);font-weight:600;border-left:3px solid var(--red);background:rgba(225,27,35,.04);min-width:150px;}
/* A row-header link with no padding of its own is only as tall as its text line, which the
   2026-09-14 UX QA pass measured at 17px on a phone against a 24px minimum. table.board's
   links already had this treatment; table.spec's did not. */
table.spec tbody th a{display:inline-block;padding:6px 0;margin:-6px 0;border-bottom:1.5px solid var(--red);transition:border-color .15s,color .15s;}
table.spec tbody th a:hover{border-color:var(--chrome);color:var(--red-hot);}
table.spec td .mono{color:var(--white);}

/* aside */
.body-aside{display:grid;gap:14px;position:sticky;top:92px;}
.aside-card{background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));border:1px solid var(--edge);border-radius:var(--radius);padding:22px 20px;}
.aside-card.red{background:linear-gradient(158deg,var(--red-hot) 0%,var(--red) 45%,var(--red-deep) 100%);color:#fff;border-color:var(--red-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);}
.aside-card h3{font-size:22px;margin-bottom:8px;letter-spacing:.03em;}
.aside-card.red h3{color:#fff;}
.aside-card.red p{color:rgba(255,255,255,.92);}
/* max-width added 2026-09-15: this card is only ever 320px wide in the desktop two-column
   layout, so nobody had reason to constrain its line length. Below 1020px .body-aside goes
   position:static and the card becomes full content-column width, where its paragraph was
   measured at 91 real characters per line. */
.aside-card p{font-size:15px;margin-bottom:14px;max-width:48ch;}
.aside-card ul{display:grid;gap:0;}
.aside-card ul a{display:inline-block;padding:6px 0;color:var(--chrome-dim);font-size:15px;border-bottom:1px solid transparent;}
.aside-card ul a:hover{color:var(--white);border-color:var(--red);}
.aside-card .btn{width:100%;}
.aside-card.red .btn{background:var(--void);color:var(--white);border-color:rgba(0,0,0,.35);box-shadow:none;}
.aside-card.red .btn:hover{background:var(--carbon);transform:none;}

/* ============ CTA BAND (the loud block, once per page) ============ */
.cta-band{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(158deg,var(--red-hot) 0%,var(--red) 42%,var(--red-deep) 100%);
  border-top:1px solid var(--red-deep);border-bottom:1px solid var(--red-deep);}
.cta-band::before{content:"";position:absolute;z-index:-1;inset:0;
  background:repeating-linear-gradient(115deg,transparent 0 15px,rgba(0,0,0,.10) 15px 17px);}
.cta-band::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(120% 130% at 12% 0%,rgba(255,255,255,.22),transparent 58%);}
.cta-band-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;padding-block:clamp(34px,4vw,52px);}
.cta-band h2{font-size:clamp(26px,3.4vw,44px);max-width:24ch;color:#fff;-webkit-text-fill-color:#fff;background:none;text-shadow:0 2px 14px rgba(0,0,0,.25);}
.cta-band p{margin-top:8px;max-width:56ch;color:rgba(255,255,255,.9);}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:12px;}
.cta-band .btn-red{background:var(--void);border-color:rgba(0,0,0,.4);color:var(--white);box-shadow:0 8px 22px -12px rgba(0,0,0,.8);}
.cta-band .btn-red:hover{background:var(--carbon);}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent;}
.cta-band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);margin-top:8px;border-radius:var(--radius);overflow:hidden;}
/* max-width added 2026-09-15: at the 3-column desktop width this text was always short enough
   not to matter; once .steps stacks to one column under 1020px it takes the FULL content-column
   width, measured at 90 real characters per line at 768px. */
.step p{max-width:48ch;}
.step{background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));padding:26px 24px 28px;}
.step .n{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,5vw,58px);line-height:.9;display:block;margin-bottom:12px;color:var(--red);
  background:linear-gradient(180deg,var(--red-hot),var(--red-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.step h3{font-size:22px;margin-bottom:8px;}
.step p{font-size:15px;}

/* ============ FORM ============ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,4.5vw,72px);align-items:start;}
.form{display:grid;gap:16px;background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));border:1px solid var(--edge);padding:26px 24px 28px;border-radius:var(--radius);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:grid;gap:7px;min-width:0;}
.field label{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--chrome-dim);}
.field label small{text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:12.5px;margin-left:6px;}
.field input,.field textarea,.field select{width:100%;background:var(--void);border:1.5px solid var(--edge);border-radius:var(--radius);padding:12px 14px;color:var(--white);font-size:16px;min-height:48px;transition:border-color .16s;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none;border-color:var(--red);}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--chrome-dim) 50%),linear-gradient(135deg,var(--chrome-dim) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;}
.form-error{color:var(--red-hot);font-weight:500;}
.form-fine{font-size:13.5px;color:var(--chrome-dim);}
.form-fine a{color:var(--white);border-bottom:1px solid var(--red);}
.form-done{background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));border:1px solid var(--red);border-radius:var(--radius);padding:26px 24px;}
.form-done h2{font-size:30px;margin-bottom:10px;}
.contact-side .aside-card + .aside-card{margin-top:14px;}

/* ============ FOOTER ============ */
.site-footer{position:relative;border-top:1px solid var(--edge);padding-top:clamp(40px,5vw,64px);background:var(--void);}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(225,27,35,.5),transparent);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.footer-about p{font-size:15px;margin-top:16px;max-width:38ch;}
.footer-contact{display:grid;gap:4px;margin-top:16px;font-size:14.5px;color:var(--chrome-dim);}
.footer-contact a{display:inline-block;padding:5px 0;color:var(--white);}
.footer-col h4{margin-bottom:12px;}
.footer-h-gap{margin-top:22px;}
.footer-col ul{display:grid;gap:0;}
.footer-col li a{display:inline-block;padding:7px 0;color:var(--chrome-dim);font-size:14.5px;line-height:1.3;transition:color .15s;}
.footer-col li a:hover{color:var(--white);}
.footer-bottom{margin-top:clamp(32px,4vw,52px);padding-block:22px 28px;border-top:1px solid var(--edge);display:grid;gap:14px;}
/* Same ch-unit correction as .prose above: 100ch measured out to 115-124 real characters, well
   past the 80-character cap. */
.footer-legal{font-size:12.5px;color:var(--steel);max-width:56ch;line-height:1.55;}
.footer-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:13px;color:var(--chrome-dim);}
.footer-meta a{color:var(--white);display:inline-block;padding:6px 0;}
.footer-meta time{color:var(--white);}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .main-nav{display:none;}
  .hamburger{display:inline-flex;}
  .header-cta .btn-ghost{display:none;}
  /* badge leads on narrow screens: it is the brand, and it reads before the headline */
  .hero-grid{grid-template-columns:1fr;gap:clamp(24px,4vw,36px);}
  .hero-badge{order:-1;}
  .hero-badge img,.hero-badge svg{width:min(70%,310px);}
  .hero h1{max-width:none;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .body-grid{grid-template-columns:1fr;}
  .body-aside{position:static;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  #app{font-size:16px;line-height:1.58;}
  .container{padding-inline:20px;}
  .header-row{height:62px;}
  .brand-mark{height:34px;}
  .brand-word{font-size:23px;}
  .header-cta .btn-red{height:42px;padding:0 15px;font-size:14px;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .keyfacts{grid-template-columns:1fr;}
  .keyfacts > div{padding:15px 16px 14px;}
  .keyfacts b{font-size:26px;margin-bottom:5px;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  /* the headline is the biggest thing on the page; keep it to three or four lines,
     not five, so the lead and the first CTA are inside the fold on a phone */
  .hero{padding-block:26px 40px;}
  .hero h1{font-size:clamp(34px,10.4vw,50px);}
  .hero .lead{margin-top:16px;font-size:16px;}
  .hero-actions{margin-top:22px;gap:10px;}
  .hero-badge img,.hero-badge svg{width:min(72%,246px);}
  .spec-strip{grid-template-columns:1fr 1fr;margin-top:24px;}
  .spec-strip b{font-size:19px;}
  .page-head{padding-block:24px 16px;}
  .page-head h1{font-size:clamp(30px,8.4vw,44px);}
  .page-head .lead{margin-top:15px;font-size:16px;}
  .page-cta,.hero-actions{width:100%;}
  .page-cta .btn,.hero-actions .btn{flex:1 1 100%;}
  .prose h2{margin-top:32px;}
  .prose h3{margin-top:26px;}
  .answer p{font-size:17px;}
  .aside-card{padding:20px 18px;}
  .cta-band-inner{padding-block:32px;}
  .cta-band .actions{width:100%;}
  .cta-band .actions .btn{flex:1 1 100%;}
  .step{padding:22px 20px 24px;}
  .form{padding:22px 18px 24px;}
  .form-row{grid-template-columns:1fr;gap:14px;}
  .sources{margin-top:34px;}
}
/* Tables stay tables: below 900px rows stack into labelled cards. 900 rather than 760 because
   the four-column fitment tables are wider than a tablet in portrait and would otherwise sit in a
   scrolling strip exactly where most phone-in-landscape and small-tablet readers meet them. */
@media (max-width:900px){
  table.board thead,table.spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  table.board caption,table.spec caption{display:block;}
  table.board tr,table.spec tr{display:block;border:1px solid rgba(16,18,22,.16);margin-bottom:10px;border-radius:var(--radius);overflow:hidden;}
  table.spec tr{border-color:var(--edge);}
  table.board th,table.board td,table.spec th,table.spec td{display:block;width:auto;padding:10px 13px;border-bottom:1px solid rgba(16,18,22,.1);white-space:normal;}
  table.spec th,table.spec td{border-bottom-color:var(--edge);}
  table.spec tbody th{border-left-width:3px;}
  table.board tbody th a,table.spec tbody th a{margin:0;padding:8px 0;}
  table.board td::before,table.spec td::before,table.board tbody th[data-label]::before,table.spec tbody th[data-label]::before{content:attr(data-label);display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.62;margin-bottom:3px;}
  table.board td:last-child{white-space:normal;}
}
@media (max-width:420px){
  /* At 320px the brand, the CTA and the hamburger do not fit on one line; the CTA is
     repeated inside the mobile menu, so it steps out of the bar here rather than overflowing. */
  .header-cta .btn-red{display:none;}
  .brand-word{font-size:21px;}
  .spec-strip > div{padding:12px 13px 13px;}
  .prose ol li{padding-left:32px;}
}

/* ============ LIVE STOCK (docs/live-stock.md) ============
   Rendered at the edge from the Inventory snapshot: /stock/, the part pages, and the live blocks
   the middleware puts after the first section of the home, parts, category and truck pages. */
.nav-count{display:inline-block;min-width:20px;padding:0 6px;margin-left:5px;border-radius:10px;background:var(--red);color:#fff;font-family:var(--font-mono);font-size:11px;line-height:17px;text-align:center;vertical-align:1px;}
#in-stock,#coming,.stock-cat,.truck-card{scroll-margin-top:90px;}
.stock-live-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28px;margin-bottom:clamp(20px,2.6vw,32px);}
.stock-live-head .section-head{margin-bottom:0;}
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.stock-card{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));border:1px solid var(--edge);border-radius:var(--radius);transition:border-color .2s,transform .2s;}
.stock-card::before{content:"";position:absolute;z-index:1;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--red),var(--red-hot));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.stock-card:hover{border-color:rgba(225,27,35,.5);transform:translateY(-2px);}
.stock-card:hover::before{transform:scaleX(1);}
.stock-ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:4/3;overflow:hidden;background:#0C0E11;border-bottom:1px solid var(--edge);}
.stock-ph img{width:100%;height:100%;object-fit:cover;}
.stock-ico{width:56px;height:56px;color:var(--red);opacity:.8;}
.stock-ico svg{width:100%;height:100%;}
.stock-nophoto{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);}
.stock-body{display:grid;gap:6px;padding:14px 16px 16px;}
.stock-body b{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.02em;text-transform:uppercase;line-height:1.08;color:var(--white);}
.stock-fits{font-size:14px;color:var(--chrome-dim);}
.stock-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:4px;font-size:13px;color:var(--chrome-dim);}
.stock-price{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1;letter-spacing:.02em;color:var(--white);}
.stock-meta .mono{color:var(--steel);}

.truck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.stock-grid + .truck-grid{margin-top:16px;}
.truck-card{display:flex;flex-direction:column;gap:8px;color:var(--white);
  background:linear-gradient(180deg,var(--carbon-hi),var(--carbon));border:1px solid var(--edge);border-left:4px solid var(--red);border-radius:var(--radius);padding:20px 20px 22px;}
.truck-stage{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--red-hot);}
.truck-in{color:var(--chrome-dim);text-transform:none;letter-spacing:.02em;}
.truck-card b{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;}
.truck-facts,.truck-listed{font-size:14px;color:var(--chrome-dim);}
.truck-h{margin-top:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
.truck-coming{display:flex;flex-wrap:wrap;gap:6px;}
.truck-coming li{font-size:13.5px;padding:4px 9px;border:1px solid var(--edge);border-radius:var(--radius);color:var(--chrome);}
.truck-coming a{display:block;margin:-4px -9px;padding:4px 9px;color:inherit;}
.truck-coming li:hover{border-color:var(--red);}
.truck-card .card-link{margin-top:8px;}

.stock-jump,.stock-chips{display:flex;flex-wrap:wrap;gap:8px;}
.stock-jump{margin-bottom:clamp(26px,3.2vw,44px);}
.stock-jump a,.stock-chips a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;font-size:14px;color:var(--chrome);
  background:var(--carbon);border:1px solid var(--edge);border-radius:var(--radius);transition:border-color .15s,color .15s;}
.stock-jump a:hover,.stock-chips a:hover{border-color:var(--red);color:var(--white);}
.stock-jump span,.stock-chips span{font-family:var(--font-mono);font-size:12px;color:var(--red-hot);}
.stock-cat + .stock-cat{margin-top:clamp(34px,4.2vw,56px);}
.stock-cat-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--red);}
.stock-cat-head h2{font-size:clamp(24px,2.8vw,34px);}
.stock-n{margin-left:6px;font-family:var(--font-mono);font-weight:400;font-size:.5em;color:var(--chrome-dim);vertical-align:.3em;}
.stock-same-h{font-size:clamp(24px,2.8vw,34px);margin-bottom:16px;}
.stock-coming-note{margin:18px 0 0;}
.stock-coming-note a{color:var(--white);border-bottom:1px solid var(--red);}
.stock-fresh{margin-top:14px;max-width:62ch;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--chrome-dim);}

/* a part page */
.h1-fits{display:block;margin-top:10px;font-size:.46em;letter-spacing:.03em;line-height:1.1;-webkit-text-fill-color:var(--chrome-dim);color:var(--chrome-dim);}
.stock-key{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:20px;font-size:15px;color:var(--chrome-dim);}
.stock-key .stock-price{font-size:clamp(32px,3.6vw,44px);}
.stock-key .stock-price small{font-family:var(--font-mono);font-weight:400;font-size:12px;letter-spacing:.06em;color:var(--chrome-dim);}
.stock-key .mono{color:var(--white);}
.stock-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 28px;}
.prose a.stock-shot{display:block;overflow:hidden;aspect-ratio:4/3;background:#0C0E11;border:1px solid var(--edge);border-radius:var(--radius);}
.prose a.stock-shot:hover{border-color:var(--red);}
.stock-shot img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease);}
.stock-shot:hover img{transform:scale(1.03);}
.prose a.stock-shot-main{grid-column:1 / -1;aspect-ratio:auto;}
.stock-shot-main img{height:auto;max-height:640px;object-fit:contain;}
.stock-shot-main:hover img{transform:none;}
table.spec-kv tbody th{width:36%;}
@media (prefers-reduced-motion:reduce){.stock-card,.stock-shot img{transition:none;}}
@media (max-width:900px){
  table.spec.spec-kv tr{display:grid;grid-template-columns:minmax(118px,38%) minmax(0,1fr);margin:0;border:0;border-bottom:1px solid var(--edge);border-radius:0;}
  table.spec.spec-kv th,table.spec.spec-kv td{border-bottom:0;}
  table.spec.spec-kv td::before{content:none;}
}
@media (max-width:760px){
  .stock-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .stock-body{padding:10px 11px 12px;gap:4px;}
  .stock-body b{font-size:16.5px;}
  .stock-fits{font-size:13px;}
  .stock-price{font-size:20px;}
  .stock-meta{gap:4px 10px;font-size:12px;}
  .stock-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stock-live-head .btn{flex:1 1 100%;}
  .truck-card b{font-size:23px;}
}
@media (max-width:360px){.stock-grid{grid-template-columns:1fr;}}