@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;}

/* ============ 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);}
.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;}
.prose{max-width:70ch;min-width:0;}
.prose h2{font-size:clamp(26px,3.2vw,40px);margin-top:clamp(38px,4vw,52px);margin-bottom:14px;scroll-margin-top:88px;}
.prose h3{font-size:clamp(20px,2.2vw,26px);margin-top:32px;margin-bottom:10px;scroll-margin-top:88px;}
.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);}
table.spec tbody th{color:var(--white);font-weight:600;border-left:3px solid var(--red);background:rgba(225,27,35,.04);}
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);}
.aside-card p{font-size:15px;margin-bottom:14px;}
.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;}
.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;}
.footer-legal{font-size:12.5px;color:var(--steel);max-width:100ch;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{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;}
}