/* Mr Auto Fixer - site stylesheet (2026 redesign).
   Apple-style layout and motion with Mr Auto Fixer's own name, red and workshop photography.
   One shared file for every page, cached once, instead of 100-300 lines of inline CSS per page.
   Type is the system font: SF Pro on Apple devices, Segoe on Windows, Roboto on Android. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --snow: #f5f5f7;
  --paper: #fff;
  --paper-2: #f5f5f7;
  --night: #000;
  --night-2: #161617;
  --night-3: #1d1d1f;

  /* Brand red. #E8210A on white is 4.51:1, so it passes AA for body-size text and white-on-red buttons. */
  --red: #e8210a;
  --red-hover: #c91c08;
  --red-bright: #ff453a;     /* on black */
  --red-soft: rgba(232, 33, 10, .1);

  --green: #34c759;
  --green-ink: #1c7c35;
  --amber: #ff9500;
  --amber-ink: #b25d00;
  --sev-red-ink: #c9261d;

  --plate: #fed31b;
  --plate-band: #00389e;

  --ease: cubic-bezier(.28, .11, .32, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --wrap: 1080px;
  --wrap-wide: 1260px;
  --read: 692px;
  --gutter: 22px;
  --tile-r: 28px;
  --nav-h: 48px;
}
@media (max-width: 734px) {
  :root { --gutter: max(16px, 5.4vw); --tile-r: 22px; }
}

/* Smooth page-to-page fades in browsers that support cross-document view transitions. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  color-scheme: only light;
  scroll-padding-top: calc(var(--nav-h) + 64px);
  background: var(--night);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.47059; letter-spacing: -0.022em;
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main, .footer { overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
img, video, svg, iframe { display: block; max-width: 100%; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(232, 33, 10, .55); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(232, 33, 10, .18); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 14px; transition: top .2s; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); margin-inline: auto; }

.theme-dark { background: var(--night); color: var(--snow); }
.theme-grey { background: var(--paper-2); }
.theme-white { background: var(--paper); }
.theme-dark a:not(.btn):not(.tile):not(.gcard) { color: var(--red-bright); }

.section { padding-block: 140px; }
.section--tight { padding-block: 100px; }
@media (max-width: 1068px) { .section { padding-block: 110px; } .section--tight { padding-block: 84px; } }
@media (max-width: 734px) { .section { padding-block: 80px; } .section--tight { padding-block: 64px; } }

/* ---------- type ---------- */
.eyebrow { font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: .011em; color: var(--ink-2); margin-bottom: 14px; }
.eyebrow--red { color: var(--red); }
.theme-dark .eyebrow { color: var(--ink-3); }
.theme-dark .eyebrow--red { color: var(--red-bright); }
.section-title { font-family: var(--display); font-size: 56px; line-height: 1.07143; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
.section-intro { margin-top: 24px; max-width: 720px; font-size: 21px; line-height: 1.381; font-weight: 600; letter-spacing: .011em; color: var(--ink-3); text-wrap: pretty; }
.section-intro strong { color: var(--ink); font-weight: 600; }
.theme-dark .section-intro strong { color: var(--snow); }
.center { text-align: center; }
.center .section-intro { margin-inline: auto; }
.grad-text { background: linear-gradient(100deg, #ff7a45 0%, #e8210a 45%, #b3123f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1068px) {
  .section-title { font-size: 48px; line-height: 1.08349; letter-spacing: -0.003em; }
  .section-intro { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
}
@media (max-width: 734px) {
  .section-title { font-size: 36px; line-height: 1.11111; letter-spacing: .004em; }
  .section-intro { font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; margin-top: 16px; }
  .eyebrow { font-size: 17px; }
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 44px; padding: 11px 22px; border: 0; border-radius: 980px;
  font-size: 17px; line-height: 1.17648; font-weight: 400; letter-spacing: -0.022em;
  text-decoration: none !important; white-space: nowrap; cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hover); }
.btn--ghost { background: rgba(0, 0, 0, .06); color: var(--ink); }
.btn--ghost:hover { background: rgba(0, 0, 0, .1); }
.theme-dark .btn--ghost { background: rgba(255, 255, 255, .12); color: var(--snow); }
.theme-dark .btn--ghost:hover { background: rgba(255, 255, 255, .2); }
.btn--outline { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.btn--outline:hover { background: var(--red); color: #fff; }
.btn--sm { min-height: 32px; padding: 7px 15px; font-size: 14px; }
.btn svg { width: 1em; height: 1em; }

.more { display: inline-flex; align-items: center; gap: .15em; font-size: 17px; line-height: 1.23; color: var(--red); }
.theme-dark .more { color: var(--red-bright); }
.more::after {
  content: ""; width: .48em; height: .48em; margin-left: .25em;
  border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg) translateY(-1px);
  transition: transform .3s var(--ease);
}
.more:hover::after { transform: rotate(45deg) translate(2px, -3px); }
.links-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; margin-top: 30px; }

/* ---------- global nav: frosted, sticky, the same on every page ---------- */
.gnav {
  position: sticky; top: 0; z-index: 90; height: var(--nav-h); color: var(--snow);
  background: rgba(22, 22, 23, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  transition: background-color .5s var(--ease);
}
.gnav--light { color: var(--ink); background: rgba(250, 250, 252, .8); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.gnav__inner {
  width: min(100% - 2 * var(--gutter), 1024px); height: 100%; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.gnav__brand {
  display: inline-flex; align-items: center; gap: 9px; color: inherit !important; text-decoration: none !important;
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; view-transition-name: brand;
}
.gnav__brand img { width: 24px; height: 24px; border-radius: 6px; }
.gnav__links { display: flex; align-items: center; gap: 26px; }
.gnav__links a {
  font-size: 12px; line-height: 1; letter-spacing: -.01em; text-decoration: none;
  color: rgba(245, 245, 247, .8); transition: color .3s var(--ease);
}
.gnav__links a:hover, .gnav__links a[aria-current="page"] { color: #fff; text-decoration: none; }
.gnav--light .gnav__links a { color: rgba(0, 0, 0, .72); }
.gnav--light .gnav__links a:hover, .gnav--light .gnav__links a[aria-current="page"] { color: #000; }
.gnav__links .gnav__shop { color: #fff; background: var(--red); padding: 6px 11px; border-radius: 980px; }
.gnav__links .gnav__shop:hover { background: var(--red-hover); }
.gnav--light .gnav__links .gnav__shop { color: #fff; }
.gnav__menu { display: none; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.gnav__menu span { position: absolute; left: 14px; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.gnav__menu span:first-child { top: 18px; }
.gnav__menu span:last-child { top: 25px; }
.menu-open .gnav__menu span:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-open .gnav__menu span:last-child { top: 21.5px; transform: rotate(-45deg); }
.gnav__sheet { display: none; }
.gnav__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--red); }
@media (max-width: 900px) {
  .gnav__links { display: none; }
  .gnav__menu { display: block; }
  .gnav__sheet {
    display: block; position: fixed; inset: var(--nav-h) 0 0; z-index: -1; padding: 28px var(--gutter) 40px; overflow-y: auto;
    background: rgba(0, 0, 0, .96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s;
  }
  .gnav--light .gnav__sheet { background: rgba(255, 255, 255, .97); }
  .menu-open .gnav__sheet { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
  .gnav__sheet a {
    display: block; padding: 8px 0; color: inherit; text-decoration: none;
    font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: .007em;
    opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .4s var(--ease);
  }
  .gnav__sheet small { display: block; margin: 26px 0 6px; font-size: 12px; color: var(--ink-3); }
  .gnav__sheet small + a, .gnav__sheet small ~ a { font-size: 17px; font-weight: 400; padding: 6px 0; }
  .menu-open .gnav__sheet a { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 35ms + 60ms); }
  .menu-open body { overflow: hidden; }
}

/* ---------- local nav (article pages): sticks under the global nav ---------- */
.lnav {
  position: sticky; top: var(--nav-h); z-index: 80; height: 52px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.lnav__inner { width: min(100% - 2 * var(--gutter), 1024px); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lnav__title { font-size: 21px; font-weight: 600; letter-spacing: .011em; color: var(--ink); white-space: nowrap; }
.lnav__title span { color: var(--ink-3); font-weight: 400; font-size: 14px; margin-left: 8px; letter-spacing: -.01em; }
.lnav__links { display: flex; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.lnav__links::-webkit-scrollbar { display: none; }
.lnav__links a { font-size: 12px; color: var(--ink); opacity: .8; white-space: nowrap; text-decoration: none; transition: opacity .3s var(--ease), color .3s; }
.lnav__links a:hover { opacity: 1; }
.lnav__links a.is-active { color: var(--red); opacity: 1; }
@media (max-width: 734px) {
  .lnav__title span { display: none; }
  .lnav__title { font-size: 17px; }
  .lnav__links { gap: 16px; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .lnav__links .btn { display: none; }
}

/* ---------- reveal on scroll ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
  [data-reveal].is-in { opacity: 1; transform: none; }
  [data-reveal="scale"] { transform: scale(.94); }
  [data-reveal="scale"].is-in { transform: none; }
  /* failsafe: if the script never runs, show everything after a moment */
  html:not(.ready) [data-reveal] { animation: failsafe .6s var(--ease) 2.2s forwards; }
}
@keyframes failsafe { to { opacity: 1; transform: none; filter: none; } }

/* =========================================================================================
   HOMEPAGE
   ========================================================================================= */

/* ---------- hero: title, then the workshop opens up to full screen as you scroll ---------- */
.home-hero { position: relative; background: var(--night); color: var(--snow); }
.home-hero__track { height: 230vh; height: 230svh; }
.home-hero__stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); overflow: hidden; }
.home-hero__copy {
  position: absolute; inset: clamp(28px, 7vh, 84px) 0 auto; z-index: 3;
  padding-inline: var(--gutter); text-align: center; will-change: transform, opacity;
}
.home-hero__copy > * { transition: opacity 1.1s var(--ease), transform 1.3s var(--ease-out), filter 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 120ms); }
.home-hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 24px; line-height: 1.16; font-weight: 600; letter-spacing: .009em; }
.home-hero__eyebrow img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 8px 24px rgba(232, 33, 10, .4); }
.home-hero__title { margin-top: 14px; font-family: var(--display); font-size: 96px; line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.home-hero__title span { background: linear-gradient(100deg, #ff8a5c 0%, #ff3b1f 40%, #e8210a 70%, #c0123a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero__sub { margin: 20px auto 0; max-width: 680px; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: .009em; color: var(--ink-3); text-wrap: balance; }
.home-hero__sub strong { color: var(--snow); font-weight: 600; }
.home-hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.home-hero__cta .more { color: var(--red-bright); }

.home-hero__media {
  position: absolute; left: 50%; bottom: 0; z-index: 1;
  width: 100%; height: 100%; transform-origin: 50% 100%;
  will-change: clip-path;
  clip-path: inset(54% 18% 4% 18% round 30px);
  transform: translateX(-50%);
}
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform-origin: 50% 50%; will-change: transform; }
.home-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,.75) 100%); opacity: var(--so, 0); }
.home-hero__caption {
  position: absolute; left: 0; right: 0; bottom: clamp(28px, 8vh, 90px); z-index: 4; padding-inline: var(--gutter);
  text-align: center; opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform 1s var(--ease-out);
}
.home-hero__caption p { font-family: var(--display); font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.home-hero__caption small { display: block; margin-top: 12px; font-size: 19px; font-weight: 600; color: rgba(245,245,247,.75); letter-spacing: .012em; }
.home-hero.is-open .home-hero__caption { opacity: 1; transform: none; }
.home-hero__glow { position: absolute; left: 50%; bottom: -30%; width: 1400px; height: 900px; margin-left: -700px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 33, 10, .42), rgba(150, 20, 10, .18) 50%, transparent); animation: breathe 7s var(--ease-io) infinite alternate; }
@keyframes breathe { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.08); opacity: 1; } }

@media (scripting: enabled) {
  html:not(.is-ready) .home-hero__copy > * { opacity: 0; transform: translateY(26px); filter: blur(8px); }
  html:not(.is-ready) .home-hero__media { opacity: 0; }
  html:not(.ready) .home-hero__copy > *, html:not(.ready) .home-hero__media { animation: failsafe .8s var(--ease) 2.5s forwards; }
}
.home-hero__media { transition: opacity 1.4s var(--ease) .35s; }
.scroll-hint { position: absolute; left: 50%; bottom: 20px; z-index: 5; width: 26px; height: 40px; margin-left: -13px; border: 1.6px solid rgba(245,245,247,.4); border-radius: 14px; transition: opacity .4s; }
.scroll-hint::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: rgba(245,245,247,.75); animation: nudge 2.2s var(--ease-io) infinite; }
@keyframes nudge { 0%, 20% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
.home-hero.is-scrolled .scroll-hint { opacity: 0; }

/* reduced motion and no-JS: a plain stacked hero */
@media (prefers-reduced-motion: reduce) {
  .home-hero__track { height: auto; }
  .home-hero__stage { position: relative; top: 0; height: auto; padding-bottom: 40px; }
  .home-hero__copy { position: relative; inset: auto; padding-top: 64px; }
  .home-hero__media { position: relative; left: auto; transform: none; width: min(100% - 2 * var(--gutter), 1080px); height: auto; aspect-ratio: 16 / 9; margin: 48px auto 0; clip-path: inset(0 round 28px); }
  .home-hero__media img { transform: none; }
  .home-hero__caption { position: relative; opacity: 1; transform: none; bottom: auto; margin-top: 32px; }
  .home-hero__caption p { font-size: 32px; }
  .scroll-hint { display: none; }
}
@media (max-width: 1068px) {
  .home-hero__title { font-size: 72px; }
  .home-hero__sub { font-size: 21px; }
  .home-hero__caption p { font-size: 40px; }
}
@media (max-width: 734px) {
  .home-hero__track { height: 200vh; height: 200svh; }
  .home-hero__copy { inset-block-start: clamp(20px, 5vh, 44px); }
  .home-hero__eyebrow { font-size: 19px; gap: 10px; }
  .home-hero__eyebrow img { width: 32px; height: 32px; border-radius: 8px; }
  .home-hero__title { font-size: 48px; line-height: 1.04; letter-spacing: -.02em; }
  .home-hero__sub { margin-top: 14px; font-size: 19px; line-height: 1.3; }
  .home-hero__cta { margin-top: 22px; flex-direction: column; gap: 16px; }
  .home-hero__caption p { font-size: 30px; }
  .home-hero__caption small { font-size: 16px; }
  .scroll-hint { display: none; }
}

/* ---------- statement: words light up as you scroll ---------- */
.statement { padding-block: 170px 150px; }
.statement__text { font-family: var(--display); font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -.008em; text-wrap: pretty; max-width: 980px; }
.lit .w { color: rgba(29, 29, 31, .16); transition: color .5s var(--ease); }
.lit .w.on { color: var(--ink); }
.lit .w.red.on { color: var(--red); }
.statement__by { display: flex; align-items: center; gap: 14px; margin-top: 44px; font-size: 17px; color: var(--ink-2); }
.statement__by img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.statement__by strong { display: block; color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .lit .w { color: var(--ink); } }
@media (max-width: 1068px) { .statement__text { font-size: 40px; } }
@media (max-width: 734px) { .statement { padding-block: 96px 88px; } .statement__text { font-size: 28px; line-height: 1.18; } }

/* ---------- numbers ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.stat { text-align: center; }
.stat__num { font-family: var(--display); font-size: 80px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__num sup { font-size: .45em; vertical-align: .9em; margin-left: 2px; color: var(--red); }
.stat__label { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 1068px) { .stat__num { font-size: 64px; } }
@media (max-width: 734px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; margin-top: 48px; } .stat__num { font-size: 52px; } .stat__label { font-size: 15px; } }

/* ---------- bento tiles ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  grid-column: span 2; min-height: 380px; padding: 40px 36px 36px; border-radius: var(--tile-r);
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink) !important; text-decoration: none !important;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.theme-white .tile { background: var(--paper-2); }
a.tile:hover { transform: translateY(-4px) scale(1.006); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .22); }
.tile--3 { grid-column: span 3; }
.tile--4 { grid-column: span 4; }
.tile--6 { grid-column: span 6; }
.tile__eyebrow { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--c, var(--red)); }
.tile__title { margin-top: 8px; font-family: var(--display); font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; text-wrap: balance; }
.tile__text { margin-top: 12px; font-size: 17px; line-height: 1.47; color: var(--ink-2); max-width: 440px; text-wrap: pretty; }
.tile__foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 16px; }
.tile__icon { width: 48px; height: 48px; color: var(--c, var(--red)); }
.tile__arrow {
  position: absolute; right: 24px; bottom: 24px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, .06); color: var(--ink);
  transition: background-color .3s var(--ease), transform .4s var(--ease-out);
}
.tile__arrow svg { width: 14px; height: 14px; }
a.tile:hover .tile__arrow { background: var(--red); color: #fff; transform: rotate(-45deg); }
/* photo tiles: full-bleed picture, words on a scrim */
.tile--photo { color: #fff !important; background: #111 !important; justify-content: flex-end; min-height: 460px; }
.tile--photo .tile__bg { position: absolute; inset: 0; z-index: -1; }
.tile--photo .tile__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
a.tile--photo:hover .tile__bg img { transform: scale(1.05); }
.tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 22%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.86) 100%); }
.tile--bright::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.92) 100%); }
.tile--photo .tile__text { color: rgba(255, 255, 255, .78); }
.tile--photo .tile__eyebrow { color: #ff8a73; }
.tile--photo .tile__arrow { background: rgba(255, 255, 255, .18); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tile--dark { background: var(--night-3) !important; color: var(--snow) !important; }
.tile--dark .tile__text { color: var(--ink-3); }
.tile--dark .tile__arrow { background: rgba(255,255,255,.12); color: #fff; }
.tile--ai { background: radial-gradient(120% 90% at 100% 0%, #ffe3d6 0%, rgba(255, 227, 214, 0) 60%), radial-gradient(90% 80% at 0% 100%, #ffd9e2 0%, rgba(255,217,226,0) 60%), var(--paper-2) !important; }
.theme-white .tile--ai { background: radial-gradient(120% 90% at 100% 0%, #ffe3d6 0%, rgba(255, 227, 214, 0) 60%), radial-gradient(90% 80% at 0% 100%, #ffd9e2 0%, rgba(255,217,226,0) 60%), var(--paper-2) !important; }
.ai-bubbles { margin-top: auto; display: grid; gap: 10px; padding-top: 24px; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.35; letter-spacing: -.01em; }
.bubble--me { justify-self: end; background: var(--red); color: #fff; border-bottom-right-radius: 6px; }
.bubble--ai { background: #fff; color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
[data-reveal].is-in .bubble { animation: pop .6s var(--ease-out) both; animation-delay: calc(var(--b, 0) * 450ms + 300ms); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.sev-dots { display: flex; gap: 8px; margin-top: auto; padding-top: 24px; flex-wrap: wrap; }
.code-chip { font-family: var(--mono); font-size: 14px; font-weight: 600; padding: 7px 11px; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.05); display: inline-flex; align-items: center; gap: 7px; }
.code-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
@media (max-width: 1068px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile--3, .tile--4 { grid-column: span 1; }
  .tile--wide-md, .tile--6 { grid-column: span 2; }
  .tile__title { font-size: 28px; }
}
@media (max-width: 734px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 44px; }
  .tile, .tile--3, .tile--4, .tile--6, .tile--wide-md { grid-column: span 1; min-height: 320px; padding: 30px 26px 28px; }
  .tile--photo { min-height: 400px; }
  .tile__title { font-size: 26px; }
}

/* ---------- number plate input (MOT check) ---------- */
.plate-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: stretch; }
.plate {
  display: flex; align-items: stretch; height: 64px; border-radius: 12px; overflow: hidden; flex: 1 1 260px; max-width: 380px;
  background: var(--plate); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .85), 0 10px 30px -10px rgba(180, 140, 0, .55);
}
.plate__band { flex: none; width: 46px; display: grid; place-items: end center; padding-bottom: 9px; background: var(--plate-band); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; border-radius: 12px 0 0 12px; border: 2px solid rgba(0,0,0,.85); border-right: 0; }
.plate input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 16px; outline: none;
  font-family: "Charles Wright", var(--display); font-size: 34px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #111;
}
.plate input::placeholder { color: rgba(0, 0, 0, .28); }
.plate:focus-within { box-shadow: inset 0 0 0 2px #000, 0 0 0 4px rgba(232, 33, 10, .35); }
.plate-form .btn { min-height: 64px; padding-inline: 28px; font-size: 19px; border-radius: 14px; }
@media (max-width: 734px) { .plate { height: 58px; } .plate input { font-size: 28px; } .plate-form .btn { min-height: 52px; width: 100%; } }

/* ---------- highlights gallery (horizontal, snaps, Apple-style controls) ---------- */
.gallery { margin-top: 56px; }
.gallery__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  scrollbar-width: none; padding-bottom: 8px;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gcard {
  position: relative; flex: none; width: min(78vw, 820px); aspect-ratio: 16 / 11; border-radius: var(--tile-r); overflow: hidden; isolation: isolate;
  scroll-snap-align: start; color: #fff !important; text-decoration: none !important; background: #111;
}
.gcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease-out), filter .8s var(--ease); }
.gcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%); }
.gcard:hover img { transform: scale(1.04); }
.gcard__cap { position: absolute; left: 0; top: 0; padding: 40px 44px; max-width: 560px; }
.gcard__cap p { font-family: var(--display); font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: .007em; text-wrap: balance; }
.gcard__cap p span { color: rgba(255, 255, 255, .7); }
.gcard__foot { position: absolute; left: 44px; right: 44px; bottom: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; font-weight: 600; }
.gcard__play { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 980px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .3s var(--ease); }
.gcard__play i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; }
.gcard__play i svg { width: 10px; height: 10px; margin-left: 2px; }
.gcard:hover .gcard__play { background: rgba(255, 255, 255, .3); }
.gcard__tag { opacity: .8; }
.gallery__controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 30px; }
.dots { display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 18px; border-radius: 980px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.theme-white .dots, .theme-grey .dots { background: rgba(0, 0, 0, .06); }
.dot { display: grid; place-items: center; height: 44px; padding: 0 5px; border: 0; background: none; cursor: pointer; }
.dot span { display: block; width: 8px; height: 8px; border-radius: 4px; background: rgba(245, 245, 247, .4); transition: width .5s var(--ease), background-color .5s var(--ease); }
.theme-white .dot span, .theme-grey .dot span { background: rgba(0, 0, 0, .25); }
.dot[aria-current="true"] span { width: 44px; background: var(--snow); }
.theme-white .dot[aria-current="true"] span, .theme-grey .dot[aria-current="true"] span { background: var(--ink); }
.round-btn { width: 56px; height: 56px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: inherit; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .3s var(--ease), opacity .3s; }
.round-btn:hover { background: rgba(255, 255, 255, .18); }
.round-btn:disabled { opacity: .35; cursor: default; }
.round-btn svg { width: 16px; height: 16px; }
@media (max-width: 734px) {
  .gcard { width: 84vw; aspect-ratio: 4 / 5; }
  .gcard__cap { padding: 26px 24px; }
  .gcard__cap p { font-size: 22px; }
  .gcard__foot { left: 24px; right: 24px; bottom: 22px; }
  .gcard__tag { display: none; }
  .round-btn { display: none; }
}

/* ---------- guide finder: search, make chips, Apple-style list cards ---------- */
.finder { margin-top: 56px; }
.search {
  position: relative; display: flex; align-items: center; height: 56px; max-width: 680px; margin-inline: auto;
  border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 10px 30px -12px rgba(0, 0, 0, .15);
  transition: box-shadow .3s var(--ease);
}
.search:focus-within { box-shadow: 0 0 0 2px var(--red), 0 10px 30px -12px rgba(232, 33, 10, .3); }
.search svg { position: absolute; left: 18px; width: 18px; height: 18px; color: var(--ink-3); }
.search input { flex: 1; height: 100%; border: 0; outline: none; background: none; padding: 0 18px 0 48px; font: inherit; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.chips { display: flex; gap: 8px; margin-top: 28px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--gutter) 12px; margin-inline: calc(var(--gutter) * -1); justify-content: safe center; }
.chips::-webkit-scrollbar { display: none; }
.chip-btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 10px; border: 0; border-radius: 980px; cursor: pointer;
  background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -.01em; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.chip-btn img { width: 28px; height: 20px; object-fit: contain; }
.chip-btn span { color: var(--ink-3); font-weight: 400; }
.chip-btn:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.chip-btn[aria-pressed="true"] img { filter: brightness(0) invert(1); }
.chip-btn[aria-pressed="true"] span { color: rgba(255,255,255,.6); }
.chip-btn--all { padding-left: 16px; }
.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.gitem {
  display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 22px; border-radius: 20px; background: var(--paper);
  color: var(--ink) !important; text-decoration: none !important; min-height: 210px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.gitem:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -18px rgba(0,0,0,.25); }
.gitem__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.gitem__logo { width: 40px; height: 40px; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; flex: none; }
.gitem__logo img { width: 28px; height: 22px; object-fit: contain; }
.gitem__make { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.gitem__make small { display: block; font-weight: 400; color: var(--ink-3); }
.gitem h3 { font-size: 19px; line-height: 1.26; font-weight: 600; letter-spacing: .012em; text-wrap: balance; }
.gitem p { font-size: 14px; line-height: 1.43; color: var(--ink-2); letter-spacing: -.016em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gitem__meta { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.diff { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.diff i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.diff-easy { --c: var(--green); color: var(--green-ink); }
.diff-med { --c: var(--amber); color: var(--amber-ink); }
.diff-hard { --c: var(--red); color: var(--sev-red-ink); }
.gitem[hidden] { display: none; }
.guides.is-collapsed .gitem:nth-child(n+10) { display: none; }
.finder__more { display: flex; justify-content: center; margin-top: 36px; }
.finder__empty { display: none; text-align: center; margin-top: 40px; color: var(--ink-2); font-size: 17px; }
.finder__count { text-align: center; margin-top: 14px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 1068px) { .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px) { .guides { grid-template-columns: minmax(0, 1fr); gap: 12px; } .gitem { min-height: 0; } .chips { justify-content: flex-start; } }

/* ---------- fault codes grid ---------- */
.codes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.code {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--night-3);
  color: var(--snow) !important; text-decoration: none !important; transition: background-color .3s var(--ease), transform .4s var(--ease-out);
}
.code:hover { background: #2a2a2d; transform: translateY(-2px); }
.code__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.code__id { font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: 0; }
.sev { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.sev i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.sev-low { --c: var(--green); }
.sev-med { --c: var(--amber); }
.sev-high { --c: #ff453a; }
.theme-dark .sev { color: var(--ink-3); }
.code__desc { font-size: 14px; line-height: 1.38; color: var(--ink-3); }
.codes.is-collapsed .code:nth-child(n+13) { display: none; }
@media (max-width: 1068px) { .codes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 734px) { .codes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .code { padding: 14px 14px; } .code__id { font-size: 18px; } .code__desc { font-size: 13px; } .codes.is-collapsed .code:nth-child(n+9) { display: none; } }

/* ---------- the mechanic ---------- */
.mech { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.mech__photo { position: relative; border-radius: var(--tile-r); overflow: hidden; aspect-ratio: 4 / 5; background: #222; }
.mech__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--ps, 1.12)); will-change: transform; }
.mech__badge { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 980px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mech__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52,199,89,.3); }
.mech__body p { margin-top: 20px; font-size: 19px; line-height: 1.47; color: var(--ink-3); letter-spacing: .012em; }
.mech__body p strong { color: var(--snow); font-weight: 600; }
.creds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.cred { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: rgba(255,255,255,.08); font-size: 14px; font-weight: 600; }
.cred svg { width: 16px; height: 16px; color: var(--red-bright); }
.yt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.yt-count { font-size: 14px; color: var(--ink-3); }
.yt-count strong { color: var(--snow); font-size: 21px; font-weight: 600; margin-right: 4px; }
@media (max-width: 1068px) { .mech { gap: 48px; } }
@media (max-width: 734px) { .mech { grid-template-columns: minmax(0, 1fr); gap: 36px; } .mech__photo { aspect-ratio: 1 / 1; } .mech__body p { font-size: 17px; } }

/* ---------- articles ---------- */
.articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.acard { display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 30px 30px 26px; border-radius: 22px; background: var(--paper); color: var(--ink) !important; text-decoration: none !important; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.acard:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -20px rgba(0,0,0,.22); }
.acard__tag { font-size: 12px; font-weight: 600; color: var(--red); letter-spacing: .02em; text-transform: uppercase; }
.acard h3 { font-family: var(--display); font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: .009em; text-wrap: balance; }
.acard__meta { margin-top: auto; font-size: 14px; color: var(--ink-3); }
.acard--lead { grid-row: span 2; background: var(--night-3); color: var(--snow) !important; justify-content: flex-end; min-height: 460px; position: relative; overflow: hidden; isolation: isolate; }
.acard--lead::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(232,33,10,.55), transparent); }
.acard--lead h3 { font-size: 36px; line-height: 1.1; }
.acard--lead .acard__tag { color: #ff8a73; }
.acard--lead p { font-size: 17px; color: var(--ink-3); }
@media (max-width: 1068px) { .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acard--lead { grid-column: span 2; grid-row: auto; min-height: 320px; } }
@media (max-width: 734px) { .articles { grid-template-columns: minmax(0, 1fr); gap: 12px; } .acard--lead { grid-column: auto; } .acard--lead h3 { font-size: 28px; } .acard { min-height: 0; } }

/* ---------- shop ---------- */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.product { display: flex; flex-direction: column; border-radius: var(--tile-r); background: var(--paper); overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.product:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -24px rgba(0,0,0,.25); }
.product__img { aspect-ratio: 1100 / 614; overflow: hidden; background: #ddd; }
.product__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.product:hover .product__img img { transform: scale(1.04); }
.product__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 26px 28px 28px; }
.product__new { font-size: 12px; font-weight: 600; color: var(--c, var(--red)); }
.product h3 { font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: .011em; }
.product p { font-size: 14px; line-height: 1.43; color: var(--ink-2); }
.product__foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product__price { font-size: 17px; font-weight: 600; }
.product__price small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
@media (max-width: 1068px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px) { .products { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ---------- email capture ---------- */
.capture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 64px; border-radius: 34px; background: linear-gradient(135deg, #1d1d1f 0%, #2b0e0a 100%); color: var(--snow); position: relative; overflow: hidden; isolation: isolate; }
.capture::before { content: ""; position: absolute; right: -10%; bottom: -60%; width: 700px; height: 700px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(232,33,10,.5), transparent); }
.capture h2 { font-family: var(--display); font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0; text-wrap: balance; }
.capture p { margin-top: 14px; font-size: 17px; color: var(--ink-3); }
.field-row { display: flex; gap: 10px; }
.field { flex: 1; min-width: 0; height: 56px; padding: 0 18px; border: 0; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 17px; outline: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: box-shadow .3s; }
.field::placeholder { color: rgba(255,255,255,.45); }
.field:focus { box-shadow: inset 0 0 0 2px var(--red-bright); }
.field-row .btn { min-height: 56px; border-radius: 14px; }
.capture__note { margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.capture__ok { display: none; margin-top: 12px; font-size: 15px; font-weight: 600; color: #fff; }
@media (max-width: 1068px) { .capture { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 48px; } }
@media (max-width: 734px) { .capture { padding: 36px 24px; border-radius: 26px; } .capture h2 { font-size: 30px; } .field-row { flex-direction: column; } .field { flex: none; width: 100%; } }

/* =========================================================================================
   CONTENT PAGES: repair guides, fault codes, make pages, articles.
   These style the site's existing page markup (the class names every page already uses),
   so no page's words, schema, offers or tools had to change for the redesign.
   ========================================================================================= */

/* The old pages set some colours inline with the old dark theme's variable names.
   On the new light pages those names mean: --light = text, --dark* = surfaces. */
:root {
  --light: #1d1d1f;
  --dark: #fff;
  --dark2: #f5f5f7;
  --dark3: #ebebf0;
  --muted: #6e6e73;
  --yellow: #b25d00;
  --orange: #b25d00;
}

body.content { background: var(--paper); }
.content main, .content .container { color: var(--ink); }

/* ---------- page header ---------- */
.content .hero, .content .hero-cat {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: 56px 44px;
}
.breadcrumb { font-size: 12px; color: var(--ink-3); letter-spacing: -.01em; }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb span { color: var(--ink-3); }
.brand-logo-wrap { width: 64px; height: 64px; border-radius: 16px; background: var(--paper-2); display: grid; place-items: center; margin-top: 28px; }
.brand-logo-wrap img, .brand-logo { width: 40px; height: 40px; object-fit: contain; }
.content .hero h1, .content .hero-cat h1 {
  margin-top: 22px; font-family: var(--display); font-size: 64px; line-height: 1.04; font-weight: 700; letter-spacing: -.022em; text-wrap: balance;
}
.content .hero h1 em, .content .hero-cat h1 em { font-style: normal; color: var(--red); }
.page-fault .hero h1 em { font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; display: block; font-size: 1.15em; color: var(--ink); }
.page-fault .hero h1 .h1-sub { display: block; margin-top: 10px; font-size: .5em; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); }
.content .hero > p, .content .hero-cat > p { margin-top: 14px; max-width: 760px; font-size: 21px; line-height: 1.38; font-weight: 600; letter-spacing: .011em; color: var(--ink-2); text-wrap: pretty; }
.content .hero > p[style] { font-size: 14px !important; font-weight: 400; color: var(--ink-2) !important; margin-top: 16px !important; letter-spacing: -.01em; }
.content .hero > p[style] a { color: inherit !important; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 980px;
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; background: var(--paper-2); color: var(--ink-2);
}
.badge.yellow { background: rgba(255, 149, 0, .14); color: var(--amber-ink); }
.badge.difficulty-easy, .badge.sev-low { background: rgba(52, 199, 89, .15); color: var(--green-ink); }
.badge.difficulty-med, .badge.sev-med { background: rgba(255, 149, 0, .15); color: var(--amber-ink); }
.badge.difficulty-hard, .badge.sev-high { background: rgba(232, 33, 10, .12); color: var(--sev-red-ink); }
.badge.sev-low::before, .badge.sev-med::before, .badge.sev-high::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.last-checked { display: inline-flex !important; align-items: center; gap: 7px !important; margin-top: 16px !important; font-size: 12px !important; color: var(--ink-3) !important; text-transform: none !important; letter-spacing: -.01em !important; }
.last-checked-dot { width: 7px !important; height: 7px !important; background: var(--green) !important; border-radius: 50%; display: inline-block; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.guide-action-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 14px; border: 0; border-radius: 980px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink) !important; background: var(--paper-2); text-decoration: none !important; transition: background-color .3s var(--ease);
}
.guide-action-btn:hover { background: #e8e8ed; }
.stat { display: inline-flex; margin-top: 20px; padding: 6px 12px; border-radius: 980px; font-size: 14px; color: var(--ink-2); background: var(--paper-2); }
@media (max-width: 1068px) { .content .hero h1, .content .hero-cat h1 { font-size: 52px; } }
@media (max-width: 734px) {
  .content .hero, .content .hero-cat { padding-block: 36px 28px; }
  .content .hero h1, .content .hero-cat h1 { font-size: 38px; line-height: 1.08; }
  .content .hero > p, .content .hero-cat > p { font-size: 18px; }
}

/* ---------- layout: reading column + sticky sidebar ---------- */
.content .container { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: 24px 40px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.two-col > .main, .two-col > main { min-width: 0; }
.sidebar { position: sticky; top: calc(var(--nav-h) + 52px + 24px); display: grid; gap: 20px; }
@media (max-width: 1068px) { .two-col { grid-template-columns: minmax(0, 1fr); gap: 40px; } .sidebar { position: static; } }

/* ---------- reading type ---------- */
.content .main > h2, .content main > h2, .content .container > h2, .content .container h2:not([class]) {
  margin: 72px 0 18px; font-family: var(--display); font-size: 36px !important; line-height: 1.11; font-weight: 700 !important;
  letter-spacing: -.005em !important; text-transform: none !important; color: var(--ink) !important; text-wrap: balance;
}
.content .main > h2:first-child, .content main > h2:first-child { margin-top: 0; }
.content .main h3, .content main h3 { font-size: 21px; line-height: 1.24; font-weight: 600; letter-spacing: .011em; text-transform: none; }
.content .main p, .content main p, .content .main li, .content main li, .content .container > p {
  font-size: 18px; line-height: 1.6; letter-spacing: .01em; color: #333336; text-wrap: pretty;
}
.content .main > p + p, .content main > p + p { margin-top: 18px; }
.content .main a:not([class]), .content main a:not([class]), .content .container > p a {
  color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.content .main ul:not([class]), .content main ul:not([class]) { padding-left: 22px; margin: 14px 0; display: grid; gap: 8px; }
.section-label { font-size: 14px; font-weight: 600; color: var(--red); margin-bottom: 10px; letter-spacing: -.01em; text-transform: none; }
@media (max-width: 734px) {
  .content .main > h2, .content main > h2, .content .container > h2 { font-size: 28px !important; margin-top: 52px; }
  .content .main p, .content main p, .content .main li, .content main li { font-size: 17px; }
}

/* ---------- boxes ---------- */
.symptoms-box, .fault-box, .torque-box, .bulb-box, .compat-box, .compatible-box, .codes-box, .card-soft {
  margin: 28px 0; padding: 28px 30px; border-radius: 22px; background: var(--paper-2); border: 0;
}
.symptoms-box h3, .fault-box h3, .torque-box h3, .bulb-box h3, .compat-box h3, .compatible-box h3, .codes-box h3 {
  font-size: 19px !important; font-weight: 600; text-transform: none !important; letter-spacing: .01em !important; color: var(--ink) !important; margin-bottom: 14px;
}
.symptoms-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.symptoms-box li { position: relative; padding-left: 32px; font-size: 17px !important; line-height: 1.45 !important; }
.symptoms-box li::before, .checklist li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23e8210a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.info-box, .warning-box, .tip {
  margin: 26px 0; padding: 20px 22px; border-radius: 18px; border: 0; font-size: 16px; line-height: 1.55; color: #333336;
}
.info-box { background: rgba(255, 149, 0, .09); }
.warning-box { background: rgba(232, 33, 10, .07); }
.info-box strong:first-child, .warning-box strong:first-child {
  display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: -.01em;
}
.info-box strong:first-child { color: var(--amber-ink); }
.warning-box strong:first-child { color: var(--sev-red-ink); }
.step-content .tip { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 149, 0, .09); font-size: 15px; color: #333336; }
.step-content .tip strong { color: var(--amber-ink); }

/* tools needed: neat chips with a spanner, not emoji */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 18px 0 32px; }
.tool-item {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 0;
  background: var(--paper-2); font-size: 15px; line-height: 1.3; color: var(--ink);
}
.tool-item::before {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* key/value rows: fault codes read, torque, bulbs, compatibility */
.fault-row, .torque-row, .bulb-row, .code-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.fault-row:last-child, .torque-row:last-child, .bulb-row:last-child, .code-row:last-child { border-bottom: 0; }
.fault-code-tag, .code-tag { flex: none; font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 8px; background: #fff; color: var(--red); }
.torque-name, .bulb-name { flex: 1; color: var(--ink-2); }
.torque-spec, .bulb-spec { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.compatible-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.compatible-item { padding: 7px 12px; border-radius: 980px; background: #fff; font-size: 14px; }

/* ---------- steps: a timeline that draws itself as you read ---------- */
.steps, .diag-steps { position: relative; display: grid; gap: 0; margin: 28px 0 36px; }
.steps::before, .diag-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--line); }
.steps::after, .diag-steps::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--red); transform-origin: 50% 0; transform: scaleY(var(--sp, 0)); }
.step, .diag-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 22px; padding-bottom: 40px; }
.step:last-child, .diag-step:last-child { padding-bottom: 0; }
.step-num {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 2px var(--line); font-weight: 700; font-size: 15px; color: var(--ink-2);
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.step.is-on .step-num, .diag-step.is-on .step-num { background: var(--red); color: #fff; box-shadow: 0 0 0 6px var(--red-soft); }
.step-content h3 { padding-top: 9px; font-size: 21px !important; }
.step-content p { margin-top: 8px; font-size: 17px !important; line-height: 1.56 !important; }
.step-photo { width: 100%; max-width: 640px; height: auto; display: block; margin-top: 16px; border-radius: 16px; border: 0 !important; }
@media (prefers-reduced-motion: reduce) { .steps::after, .diag-steps::after { transform: none; } }
@media (max-width: 734px) {
  .step, .diag-step { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .step-num { width: 36px; height: 36px; font-size: 13px; }
  .steps::before, .steps::after, .diag-steps::before, .diag-steps::after { left: 17px; }
  .step-content h3 { padding-top: 5px; font-size: 19px !important; }
}

/* ---------- fault codes ---------- */
.causes-grid { display: grid; gap: 12px; margin: 20px 0 8px; counter-reset: c; }
.cause-item { position: relative; padding: 22px 24px 22px 76px; border-radius: 20px; background: var(--paper-2); border: 0; counter-increment: c; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.cause-item::before { content: counter(c); position: absolute; left: 22px; top: 20px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; }
.cause-item strong { display: block; margin-bottom: 4px; font-size: 18px; color: var(--ink); text-transform: none; letter-spacing: .01em; }
@media (max-width: 734px) { .cause-item { padding: 18px 18px 18px 64px; } .cause-item::before { left: 16px; top: 17px; width: 32px; height: 32px; } }
.real-scan { margin: 28px 0; }
.real-scan img { width: 100%; height: auto; border-radius: 18px; border: 0 !important; }
.real-scan figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.mechanic-tip {
  margin: 36px 0; padding: 32px 34px; border-radius: 26px; border: 0;
  background: linear-gradient(160deg, #fff4f1 0%, #fff 70%); box-shadow: inset 0 0 0 1px rgba(232, 33, 10, .14);
}
.mechanic-tip h3 { display: flex; align-items: center; gap: 12px; font-size: 19px !important; text-transform: none !important; color: var(--ink) !important; margin-bottom: 14px; }
.mechanic-tip h3::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 50%; background: url(/assets/mechanic-avatar.jpg) center / cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(232, 33, 10, .3); }
.mechanic-tip p { font-size: 17px !important; color: #333336 !important; }
.mechanic-tip p + p { margin-top: 12px; }
.verdict { margin: 40px 0; padding: 34px 36px; border-radius: 26px; border: 0 !important; background: var(--night-3); color: var(--snow); }
.verdict h3 { font-size: 13px !important; font-weight: 600; letter-spacing: .04em !important; text-transform: uppercase !important; color: #ff8a73 !important; margin-bottom: 10px; }
.verdict p { font-family: var(--display); font-size: 22px !important; line-height: 1.36 !important; font-weight: 600; color: var(--snow) !important; letter-spacing: .004em !important; }
.verdict-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.verdict-item { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.verdict-item .label { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.verdict-item .value { margin-top: 4px; font-size: 17px; font-weight: 600; color: var(--snow); }
.verdict-item .value.green { color: #30d158; } .verdict-item .value.orange { color: #ffb340; } .verdict-item .value.red { color: #ff6961; }
@media (max-width: 734px) { .verdict, .mechanic-tip { padding: 26px 22px; } .verdict p { font-size: 19px !important; } .verdict-grid { grid-template-columns: minmax(0, 1fr); } }
.related-repairs { margin: 40px 0 0; padding: 28px 30px; border-radius: 22px; background: var(--paper-2); border: 0; }
.related-repairs h3 { font-size: 19px !important; text-transform: none !important; color: var(--ink) !important; margin: 0 0 6px; }
.related-repairs p { font-size: 15px !important; color: var(--ink-2) !important; margin: 0 0 12px; }
.related-repairs ul { list-style: none; padding: 0 !important; margin: 0; border-top: 1px solid var(--line); display: block !important; }
.related-repairs li { border-bottom: 1px solid var(--line); font-size: 16px !important; margin: 0; }
.related-repairs a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; font-weight: 600; color: var(--ink) !important; text-decoration: none !important; }
.related-repairs a::after { content: ""; flex: none; width: 8px; height: 8px; border: solid var(--red); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.related-repairs a:hover { color: var(--red) !important; }
.fc-video { margin: 32px 0; }
.fc-video-label, .video-label { font-size: 14px; font-weight: 600; color: var(--red); margin-bottom: 10px; text-transform: none; letter-spacing: -.01em; }
.fc-video-frame, .video-container { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; }
.fc-video-frame iframe, .video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* interactive flowchart (the live fcf- tool) */
.fcf { margin: 30px 0; padding: 36px; border-radius: 28px; border: 0; background: var(--night-3); color: var(--snow); box-shadow: 0 30px 70px -30px rgba(0,0,0,.5); position: relative; overflow: hidden; isolation: isolate; }
.fcf::before { content: ""; position: absolute; right: -160px; top: -200px; width: 520px; height: 520px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(232,33,10,.35), transparent); }
.fcf p { color: rgba(245,245,247,.8) !important; }
.fcf-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #ff8a73; letter-spacing: .02em; text-transform: uppercase; }
.fcf-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red-bright); animation: blink 1.6s var(--ease-io) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.fcf-q { margin-top: 16px; font-family: var(--display); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: .004em; text-wrap: balance; }
.fcf-opts { display: grid; gap: 10px; margin-top: 22px; }
.fcf-opt { display: block; width: 100%; text-align: left; padding: 18px 52px 18px 20px; border: 0; border-radius: 16px; cursor: pointer; position: relative; background: rgba(255,255,255,.08); color: var(--snow); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; transition: background-color .3s var(--ease), transform .3s var(--ease); animation: optIn .55s var(--ease-out) both; }
.fcf-opt:nth-child(2) { animation-delay: .06s; } .fcf-opt:nth-child(3) { animation-delay: .12s; } .fcf-opt:nth-child(4) { animation-delay: .18s; } .fcf-opt:nth-child(5) { animation-delay: .24s; }
@keyframes optIn { from { opacity: 0; transform: translateY(12px); } }
.fcf-opt::after { content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); opacity: .5; transition: transform .3s var(--ease), opacity .3s; }
.fcf-opt:hover { background: rgba(255,255,255,.14); }
.fcf-opt:hover::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
.fcf-opt small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--ink-3); }
.fcf-trail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.fcf-chip { padding: 5px 10px; border-radius: 980px; font-size: 12px; background: rgba(255,255,255,.1); color: rgba(245,245,247,.75); }
.fcf-verdict { margin-top: 20px; padding: 22px 22px 20px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--c) 16%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); animation: optIn .6s var(--ease-out) both; }
.fcf-verdict.green { --c: var(--green); } .fcf-verdict.amber { --c: #ff9500; } .fcf-verdict.red { --c: #ff453a; }
.fcf-tag { display: inline-flex; align-items: center; gap: 8px; padding: 0 !important; background: none !important; font-size: 15px; font-weight: 700; color: var(--c) !important; text-transform: none; letter-spacing: 0; }
.fcf-tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.fcf-verdict p { margin-top: 10px !important; font-size: 17px !important; line-height: 1.47; color: var(--snow) !important; }
.fcf-causes-heading { margin-top: 26px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.fcf-cause { margin-top: 10px; padding: 18px 20px; border: 0; border-radius: 16px; background: rgba(255,255,255,.06); animation: optIn .6s var(--ease-out) both; }
.fcf-cause-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fcf-cause-name { font-size: 17px; font-weight: 600; color: var(--snow); }
.fcf-prob { flex: none; padding: 4px 9px; border-radius: 980px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.fcf-prob.p3 { background: var(--red-bright); color: #fff; } .fcf-prob.p2 { background: rgba(255,149,0,.22); color: #ffb340; } .fcf-prob.p1 { background: rgba(255,255,255,.12); color: var(--ink-3); }
.fcf-cause p { margin-top: 8px !important; font-size: 15px !important; line-height: 1.5 !important; color: rgba(245,245,247,.75) !important; }
.fcf-cause a { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--red-bright) !important; text-decoration: none !important; }
.fcf-next { margin-top: 18px; padding: 18px 20px; border: 0; border-radius: 16px; background: rgba(255,255,255,.95); color: var(--ink); font-size: 15px; line-height: 1.5; }
.fcf-next strong { display: block; margin-bottom: 4px; color: var(--red); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.fcf-controls { display: flex; gap: 10px; margin-top: 20px; }
.fcf-btn { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 980px; cursor: pointer; background: rgba(255,255,255,.12); color: var(--snow); font-size: 14px; text-transform: none; letter-spacing: 0; transition: background-color .3s; }
.fcf-btn:hover { background: rgba(255,255,255,.2); }
@media (max-width: 734px) { .fcf { padding: 26px 20px; border-radius: 22px; } .fcf-q { font-size: 22px; } }
/* every outcome, written out: folded into tidy disclosures by the page script, readable without it */
.fcf-ref { margin: 30px 0; }
.fcf-ref > h3 { font-size: 21px !important; }
.fcf-ref-intro { margin-top: 6px; font-size: 15px !important; color: var(--ink-2) !important; }
.fcf-ref-item { margin-top: 10px; border-radius: 18px; background: var(--paper-2); padding: 18px 22px; }
.fcf-ref-item h4 { font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.fcf-ref-item h4 strong { font-weight: 600; }
.fcf-ref-item.is-fold h4 { position: relative; padding-right: 30px; cursor: pointer; }
.fcf-ref-item.is-fold h4::after { content: ""; position: absolute; right: 4px; top: 5px; width: 9px; height: 9px; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .35s var(--ease); }
.fcf-ref-item.is-fold.open h4::after { transform: rotate(-135deg); top: 9px; }
.fcf-ref-item.is-fold:not(.open) > :not(h4) { display: none !important; }
.fcf-ref-item > :not(h4) { margin-top: 12px; }
.fcf-ref-verdict { font-size: 16px !important; color: #333336 !important; }
.fcf-ref-verdict span { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 0 !important; background: none !important; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.fcf-ref-verdict span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fcf-ref-verdict.green span { color: var(--green-ink) !important; } .fcf-ref-verdict.amber span { color: var(--amber-ink) !important; } .fcf-ref-verdict.red span { color: var(--sev-red-ink) !important; }
.fcf-ref-causes { padding-left: 18px !important; display: grid !important; gap: 8px; }
.fcf-ref-causes li { font-size: 15px !important; line-height: 1.5 !important; }
.fcf-ref-causes em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.fcf-ref-next { font-size: 15px !important; }

/* ---------- money: matched product offer, Amazon box, sidebar box ---------- */
.prod-offer { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; margin: 36px 0; padding: 22px; border-radius: 24px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 24px 50px -28px rgba(0,0,0,.3); }
.prod-offer-cover { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1100 / 614; }
.prod-offer-cover img { width: 100%; height: 100%; object-fit: cover; border: 0; }
.prod-offer-label { font-size: 12px; font-weight: 600; color: var(--red); text-transform: none; letter-spacing: 0; }
.prod-offer-title { margin-top: 4px; font-size: 21px !important; line-height: 1.2; font-weight: 600; text-transform: none !important; letter-spacing: .01em !important; color: var(--ink) !important; }
.prod-offer-list { margin: 8px 0 0; padding-left: 18px !important; display: grid !important; gap: 2px; }
.prod-offer-list li { font-size: 14px !important; line-height: 1.5 !important; color: var(--ink-2) !important; }
.prod-offer-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.prod-offer-price { font-size: 21px; font-weight: 700; color: var(--ink); }
.prod-offer-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 16px; border-radius: 980px; background: var(--red); color: #fff !important; font-size: 15px; font-weight: 500; text-decoration: none !important; text-transform: none; letter-spacing: -.01em; transition: background-color .3s var(--ease); }
.prod-offer-btn:hover { background: var(--red-hover); }
.prod-offer-note { margin-top: 10px; font-size: 12px !important; color: var(--ink-3) !important; }
@media (max-width: 734px) { .prod-offer { grid-template-columns: minmax(0, 1fr); } }
.aff-box { margin: 36px 0; padding: 26px 28px; border-radius: 22px; border: 0; background: var(--paper-2); }
.aff-box h3 { font-size: 19px !important; text-transform: none !important; color: var(--ink) !important; letter-spacing: .01em !important; margin-bottom: 12px; }
.aff-box > div, .aff-grid { display: grid; gap: 8px; margin-top: 12px; }
.aff-link, .btn-aff {
  display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-radius: 12px; border: 0;
  background: #fff; color: var(--ink) !important; font-size: 15px; font-weight: 500; line-height: 1.3; text-decoration: none !important; text-transform: none; letter-spacing: -.01em; transition: box-shadow .3s;
}
.aff-link:hover, .btn-aff:hover { box-shadow: 0 0 0 1px var(--red); }
.aff-link::after, .btn-aff::after { content: ""; flex: none; width: 7px; height: 7px; border: solid var(--red); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.aff-link::before { content: none !important; }
.aff-icon { display: none; }
.aff-disclaimer { margin-top: 12px !important; font-size: 12px !important; line-height: 1.4 !important; color: var(--ink-3) !important; }
.sidebar-box { padding: 24px; border-radius: 22px; border: 0; background: var(--paper-2); }
.sidebar-label { font-size: 12px; font-weight: 600; color: var(--red); text-transform: none; letter-spacing: 0; }
.sidebar-heading { margin-top: 6px; font-size: 19px; line-height: 1.26; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: .01em; }
.sidebar-text { margin-top: 8px; font-size: 14px !important; line-height: 1.45 !important; color: var(--ink-2) !important; }
.video-wrap { padding: 0; border: 0; background: none; }
.channel-cta { margin-top: 14px; padding: 18px; border-radius: 18px; background: var(--paper-2); }
.channel-cta p { font-size: 14px !important; line-height: 1.45 !important; color: var(--ink-2) !important; }
.btn-red, .btn-sub { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin-top: 12px; padding: 8px 16px; border-radius: 980px; background: var(--red); color: #fff !important; font-size: 15px; text-decoration: none !important; text-transform: none; letter-spacing: -.01em; transition: background-color .3s var(--ease); }
.btn-red:hover, .btn-sub:hover { background: var(--red-hover); }
.subscribe-cta { margin: 32px 0; padding: 24px; border-radius: 22px; background: var(--paper-2); }

/* cost tables and the common-mistakes list */
.cost-table { width: 100%; border-collapse: collapse; margin: 18px 0 8px; font-size: 16px; }
.cost-table th, .content table th { padding: 10px 12px !important; text-align: left; font-size: 13px !important; font-weight: 600; color: var(--ink-2) !important; text-transform: none !important; letter-spacing: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; }
.cost-table td, .content table td { padding: 13px 12px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; color: #333336 !important; vertical-align: top; background: none !important; }
.cost-table tr:first-child td { font-weight: inherit; }
.content table { width: 100%; border-collapse: collapse; }
.content .table-wrap, .content .main > table, .content main > table { overflow-x: auto; }
.cost-note { margin-top: 8px !important; font-size: 14px !important; color: var(--ink-2) !important; }
.mistake-list { list-style: none !important; padding: 0 !important; margin: 16px 0 8px; display: grid !important; gap: 0 !important; border-top: 1px solid var(--line); }
.mistake-list li { position: relative; padding: 16px 0 16px 38px; border-bottom: 1px solid var(--line); font-size: 17px !important; color: #333336 !important; }
.mistake-list li::before { content: ""; position: absolute; left: 0; top: 17px; width: 24px; height: 24px; border-radius: 50%; background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23e8210a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.mistake-list li strong { color: var(--ink) !important; }

/* ---------- author, FAQ, email capture, related ---------- */
.author-bio-card { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 72px auto 0; }
.author-bio-inner { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 30px; align-items: center; padding: 36px 40px; border-radius: 28px; background: var(--paper-2); border: 0; }
.author-bio-avatar { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; border: 0 !important; }
.author-bio-label { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.author-bio-name { margin-top: 2px; font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: .009em; }
.author-bio-creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.author-bio-cred { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 12px; background: #fff; border: 0; font-size: 13px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.author-bio-cred::before { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23e8210a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.author-bio-text { margin-top: 12px; font-size: 16px !important; line-height: 1.5 !important; color: var(--ink-2) !important; }
.author-bio-link { display: inline-flex; align-items: center; gap: .2em; margin-top: 10px; font-size: 15px; color: var(--red) !important; text-decoration: none !important; }
.author-bio-link::after { content: ""; width: .45em; height: .45em; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); margin-left: .25em; }
@media (max-width: 734px) { .author-bio-inner { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; gap: 16px; } .author-bio-avatar { width: 80px; height: 80px; } }

.faq-section { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 96px auto 0; }
.faq-label { font-size: 21px; font-weight: 600; color: var(--red); letter-spacing: .011em; text-transform: none; }
.faq-heading { margin-top: 6px; font-family: var(--display); font-size: 48px !important; line-height: 1.08; font-weight: 700 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ink) !important; }
.faq-section > .faq-item:first-of-type, .faq-heading + .faq-item { border-top: 1px solid var(--line); margin-top: 36px; }
.faq-item { border-bottom: 1px solid var(--line); background: none; border-radius: 0; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px 0; border: 0; background: none; text-align: left; cursor: pointer; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: .011em; color: var(--ink); text-transform: none; }
.faq-arrow { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2); font-size: 0 !important; color: transparent; transition: background-color .3s, transform .5s var(--ease-out); }
.faq-arrow::before, .faq-arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--ink); transition: transform .5s var(--ease-out); }
.faq-arrow::after { transform: rotate(90deg); }
.faq-item.open .faq-arrow { background: var(--red); transform: rotate(180deg); }
.faq-item.open .faq-arrow::before, .faq-item.open .faq-arrow::after { background: #fff; }
.faq-item.open .faq-arrow::after { transform: rotate(0); }
.faq-answer { display: none; padding: 0 0 26px; max-width: 780px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.faq-item.open .faq-answer { display: block; animation: optIn .45s var(--ease-out) both; max-height: none !important; }
@media (max-width: 734px) { .faq-heading { font-size: 34px !important; } .faq-question { font-size: 17px; padding: 20px 0; } }

.lead-capture { position: relative; overflow: hidden; isolation: isolate; width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 96px auto 0; padding: 56px 60px; border-radius: 34px; border: 0; background: linear-gradient(135deg, #1d1d1f 0%, #2b0e0a 100%); color: var(--snow); }
.lead-capture::before { content: ""; position: absolute; right: -10%; bottom: -60%; width: 700px; height: 700px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(232,33,10,.5), transparent); }
.lead-capture-label { font-size: 14px; font-weight: 600; color: #ff8a73; text-transform: none; letter-spacing: 0; }
.lead-capture h3 { margin-top: 8px; max-width: 640px; font-family: var(--display); font-size: 36px !important; line-height: 1.1; font-weight: 600; color: var(--snow) !important; text-transform: none !important; letter-spacing: 0 !important; text-wrap: balance; }
.lead-capture > p { margin-top: 12px; max-width: 620px; font-size: 17px !important; color: var(--ink-3) !important; }
.lead-capture-form { display: flex; gap: 10px; margin-top: 26px; max-width: 560px; }
.lead-capture-form input { flex: 1; min-width: 0; height: 54px; padding: 0 18px; border: 0; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 17px; outline: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.lead-capture-form input::placeholder { color: rgba(255,255,255,.45); }
.lead-capture-form input:focus { box-shadow: inset 0 0 0 2px var(--red-bright); }
.lead-capture-form button { min-height: 54px; padding: 0 24px; border: 0; border-radius: 14px; cursor: pointer; background: var(--red); color: #fff; font-size: 17px; text-transform: none; letter-spacing: -.01em; transition: background-color .3s; }
.lead-capture-form button:hover { background: var(--red-hover); }
.lead-ok, .lead-err { display: none; margin-top: 12px; font-size: 15px; color: #fff !important; }
.lead-capture.ok .lead-ok, .lead-ok.show, .lead-ok[style*="block"], .lead-err.show { display: block; }
@media (max-width: 734px) { .lead-capture { padding: 36px 24px; border-radius: 26px; } .lead-capture h3 { font-size: 28px !important; } .lead-capture-form { flex-direction: column; } .lead-capture-form input { flex: none; width: 100%; } }

.related-guides-section, .related-section { margin-top: 96px; padding-block: 96px; background: var(--paper-2); }
.related-guides-inner, .related-inner { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.related-section-label, .related-label { font-size: 21px; font-weight: 600; color: var(--red); letter-spacing: .011em; text-transform: none; }
.related-heading { margin-top: 6px; font-family: var(--display); font-size: 48px !important; line-height: 1.08; font-weight: 700 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ink) !important; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.related-card { display: flex; flex-direction: column; gap: 8px; min-height: 180px; padding: 26px; border-radius: 22px; border: 0; background: #fff; color: var(--ink) !important; text-decoration: none !important; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.related-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(0,0,0,.25); }
.related-card-title { font-size: 19px; line-height: 1.26; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--ink); }
.page-fault .related-card-title { font-family: var(--mono); font-size: 22px; letter-spacing: 0; }
.related-card-desc, .related-card-meta { font-size: 14px; line-height: 1.43; color: var(--ink-2); }
.related-card-meta { display: flex; gap: 10px; align-items: center; }
.related-diff { font-weight: 600; }
.related-diff.diff-easy { color: var(--green-ink); } .related-diff.diff-med { color: var(--amber-ink); } .related-diff.diff-hard { color: var(--sev-red-ink); }
.related-card-link { margin-top: auto; font-size: 14px; color: var(--red); }
.related-all { margin-top: 28px; }
.related-all a { color: var(--red); font-size: 17px; text-decoration: none; }
@media (max-width: 1068px) { .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px) { .related-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .related-heading { font-size: 34px !important; } .related-guides-section, .related-section { padding-block: 64px; margin-top: 64px; } .related-card { min-height: 0; } }

/* ---------- make pages ---------- */
.guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guide-card { display: flex; flex-direction: column; gap: 6px; min-height: 200px; padding: 26px; border-radius: 22px; border: 0; background: var(--paper-2); color: var(--ink) !important; text-decoration: none !important; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(0,0,0,.25); }
.guide-card-body h3 { font-size: 19px !important; line-height: 1.26; font-weight: 600; text-transform: none !important; letter-spacing: .01em !important; }
.guide-card-body p { margin-top: 6px; font-size: 14px !important; line-height: 1.43 !important; color: var(--ink-2) !important; }
.guide-card-footer { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.diff-badge { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none !important; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.diff-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.diff-badge.diff-easy { color: var(--green-ink); } .diff-badge.diff-med { color: var(--amber-ink); } .diff-badge.diff-hard { color: var(--sev-red-ink); }
.time-badge { color: var(--ink-3); }
.read-link { margin-left: auto; color: var(--red); }
.back-link { display: inline-flex; margin-top: 36px; color: var(--red) !important; font-size: 17px; text-decoration: none !important; }
@media (max-width: 1068px) { .guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px) { .guides-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .guide-card { min-height: 0; } }

/* ---------- printing a guide: plain black on white, no chrome ---------- */
@media print {
  .gnav, .lnav, .footer, .sidebar, .guide-actions, .prod-offer, .lead-capture, .aff-box, .related-guides-section, .related-section, .fcf, .adsbygoogle, .google-auto-placed, ins { display: none !important; }
  body, .content main, .content .container { background: #fff !important; color: #000 !important; }
  .two-col { display: block; }
  .steps::after, .diag-steps::after { display: none; }
  .step-num { box-shadow: inset 0 0 0 2px #000 !important; background: #fff !important; color: #000 !important; }
  .verdict, .mechanic-tip, .info-box, .warning-box, .symptoms-box, .torque-box, .tip { background: #f5f5f5 !important; color: #000 !important; box-shadow: none !important; }
  .verdict p, .verdict-item .value, .verdict-item .label { color: #000 !important; }
  .step, .diag-step, .step-photo { break-inside: avoid; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
/* =========================================================================================
   FOOTER: Apple-style directory
   ========================================================================================= */
.footer { background: var(--paper-2); color: var(--ink-2); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; padding: 32px 0 24px; }
.footer a { color: #424245; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--ink); }
.footer__note { padding-bottom: 18px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.footer__dir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 28px 0 24px; border-bottom: 1px solid var(--line); }
.footer__col h4 { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding-top: 16px; color: var(--ink-3); }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 6px 0; }
.footer__legal nav a { padding: 0 10px; border-left: 1px solid var(--line); }
.footer__legal nav a:first-child { border-left: 0; padding-left: 0; }
.footer__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.footer__brand img { width: 20px; height: 20px; border-radius: 5px; }
@media (max-width: 834px) {
  .footer__dir { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px 0; }
  .footer__col { border-bottom: 1px solid var(--line); }
  .footer__col:last-child { border-bottom: 0; }
  .footer__col h4 { margin: 0; padding: 12px 0; cursor: pointer; display: flex; justify-content: space-between; }
  .footer__col h4::after { content: "+"; font-weight: 400; font-size: 16px; line-height: 1; color: var(--ink-2); }
  .footer__col.open h4::after { content: "\2212"; }
  .footer__col ul { display: none; padding-bottom: 14px; }
  .footer__col.open ul { display: grid; }
}

/* section-specific fixes */
.theme-white .product, .theme-white .acard:not(.acard--lead), .theme-white .gitem { background: var(--paper-2); }
.codes.theme-dark { background: none; color: inherit; }

/* make pages: the "About {Make} Maintenance" essay reads like an article */
.page-brand .container > section { max-width: 760px; margin-top: 88px !important; padding-top: 0 !important; border-top: 0 !important; }
.page-brand .container > section h2 { margin-top: 0 !important; }
.page-brand .container > section p { max-width: none !important; font-size: 18px !important; line-height: 1.6 !important; color: #333336 !important; }
.page-brand .container > section p + p { margin-top: 18px !important; }
@media (max-width: 734px) { .page-brand .container > section p { font-size: 17px !important; } }

/* homepage: make links under the guide finder, subscribe messages */
.makes-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: 900px; margin: 40px auto 0; font-size: 14px; }
.makes-links span { width: 100%; text-align: center; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.makes-links a { color: var(--ink-2); }
.makes-links a:hover { color: var(--red); }
.capture__msg { margin-top: 12px; font-size: 15px; font-weight: 600; color: #fff; }
.capture__msg--err { color: #ffb3a8; }

/* ---------- articles (long-form guides): one centred reading column ---------- */
.page-article .hero { padding-block: 64px 32px; }
.content .hero-inner { max-width: 780px; margin-inline: auto; }
.page-article .hero h1 { text-align: left; }
.hero-sub { margin-top: 16px; font-size: 22px; line-height: 1.36; font-weight: 600; letter-spacing: .009em; color: var(--ink-2); text-wrap: pretty; }
.meta-line { margin-top: 22px; font-size: 14px; color: var(--ink-2); }
.meta-line a { color: inherit; }
.meta-line strong { color: var(--ink); font-weight: 600; }
.last-updated { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.article-body { width: min(100% - 2 * var(--gutter), 780px); margin: 0 auto; padding-block: 24px 24px; }
.article-body > h2 { margin: 64px 0 16px; font-family: var(--display); font-size: 36px; line-height: 1.11; font-weight: 700; letter-spacing: -.005em; text-transform: none; color: var(--ink); text-wrap: balance; }
.article-body > h3 { margin: 32px 0 10px; font-size: 22px; line-height: 1.24; font-weight: 600; letter-spacing: .009em; text-transform: none; }
.article-body p, .article-body li { font-size: 19px; line-height: 1.6; letter-spacing: .012em; color: #333336; text-wrap: pretty; }
.article-body > p + p { margin-top: 18px; }
.article-body > ul, .article-body > ol { margin: 16px 0; padding-left: 24px; display: grid; gap: 8px; }
.article-body a:not([class]) { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body strong { color: var(--ink); }
.lead { font-size: 22px !important; line-height: 1.5 !important; font-weight: 500; color: var(--ink) !important; margin-bottom: 8px; }
.callout { margin: 32px 0; padding: 26px 28px; border-radius: 22px; border: 0; background: var(--red-soft); }
.callout.yellow { background: rgba(255, 149, 0, .1); }
.callout.green { background: rgba(52, 199, 89, .12); }
.callout h3 { margin: 0 0 8px !important; font-size: 18px !important; font-weight: 600; text-transform: none; letter-spacing: -.01em !important; color: var(--sev-red-ink); }
.callout.yellow h3 { color: var(--amber-ink); }
.callout.green h3 { color: var(--green-ink); }
.callout p { font-size: 17px !important; }
.callout p + p { margin-top: 10px; }
.article-body .lead-capture, .article-body .prod-offer { width: auto; margin-inline: 0; }
.lead-note { margin-top: 10px; font-size: 12px !important; color: var(--ink-3) !important; }
.case-fig { margin: 28px 0; }
.case-fig img { width: 100%; height: auto; border-radius: 18px; }
.case-fig figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.inline-video { margin: 32px 0; }
.inline-video-label { font-size: 14px; font-weight: 600; color: var(--red); margin-bottom: 10px; text-transform: none; letter-spacing: 0; }
.inline-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; }
.inline-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.inline-video-cap { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 734px) {
  .hero-sub { font-size: 19px; }
  .article-body > h2 { font-size: 28px; margin-top: 48px; }
  .article-body p, .article-body li { font-size: 17px; }
  .lead { font-size: 19px !important; }
  .callout { padding: 22px 20px; }
}

/* vehicle paperwork: product cards */
.paperwork-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0; }
.pw-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: var(--paper-2); color: var(--ink) !important; text-decoration: none !important; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.pw-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(0,0,0,.25); }
.pw-tag { font-size: 12px; font-weight: 600; color: var(--red); }
.pw-card h3 { margin: 0 !important; font-size: 19px !important; }
.pw-card p { font-size: 14px !important; line-height: 1.45 !important; color: var(--ink-2) !important; }
.pw-go { margin-top: auto; padding-top: 8px; font-size: 14px; color: var(--red); }
@media (max-width: 734px) { .paperwork-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- one-off pages: a single centred column ---------- */
body.content > .main, body.content > main, body.content > .wrapper > .main, body.content > .wrapper > main {
  display: block; width: min(100% - 2 * var(--gutter), 780px); margin-inline: auto; padding-block: 24px 40px;
}
body.content > main.wide, body.page-other.wide-main > main { width: min(100% - 2 * var(--gutter), var(--wrap)); }
.content .wrapper { display: block; min-height: 0; }
.page-other .hero h1 em { color: var(--red); }

/* 404 and the checklist confirmation */
.content .box { max-width: 640px; margin: 72px auto 40px; text-align: center; }
.content .box .code { display: block; padding: 0; background: none; font-family: var(--display); font-size: 120px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--red) !important; }
.content .box h1 { margin-top: 12px; font-family: var(--display); font-size: 48px; line-height: 1.08; font-weight: 700; letter-spacing: -.01em; }
.content .box p { margin-top: 16px; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.content .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.btn-dark { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 16px; border-radius: 980px; background: rgba(0,0,0,.06); color: var(--ink) !important; font-size: 15px; text-decoration: none !important; transition: background-color .3s var(--ease); }
.btn-dark:hover { background: rgba(0,0,0,.1); }

/* articles index */
.intro { font-size: 21px !important; line-height: 1.45 !important; font-weight: 600; color: var(--ink-2) !important; max-width: 760px; }
.articles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
body.content > main:has(.articles-grid) { width: min(100% - 2 * var(--gutter), var(--wrap)); }
.article-card { display: flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 28px; border-radius: 22px; background: var(--paper-2); color: var(--ink) !important; text-decoration: none !important; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.article-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(0,0,0,.25); }
.ac-tag { font-size: 12px; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: .03em; }
.ac-title { font-family: var(--display); font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: .009em; text-wrap: balance; }
.ac-desc { font-size: 15px !important; line-height: 1.45 !important; color: var(--ink-2) !important; }
.ac-meta { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--ink-3); }
.ac-meta strong { color: var(--ink-2); font-weight: 600; }
@media (max-width: 734px) { .articles-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .article-card { min-height: 0; } }

/* about */
.bio-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; margin: 24px 0 8px; padding: 30px; border-radius: 26px; background: var(--paper-2); }
.bio-photo { width: 220px; height: 220px; border-radius: 22px; object-fit: cover; }
.bio-text h3 { font-size: 22px !important; margin-bottom: 8px; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 32px 0 8px; }
.stat-box { padding: 22px 18px; border-radius: 20px; background: var(--paper-2); text-align: center; }
.stat-box .num { font-family: var(--display); font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.stat-box .num span { color: var(--red); font-size: .6em; vertical-align: .5em; }
.stat-box .lbl { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.yt-cta { margin: 32px 0; padding: 28px; border-radius: 22px; background: var(--night-3); color: var(--snow); }
.yt-cta h3, .yt-cta p { color: var(--snow) !important; }
@media (max-width: 734px) { .bio-card { grid-template-columns: minmax(0, 1fr); padding: 24px; } .bio-photo { width: 120px; height: 120px; } .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* contact */
.contact-form-wrap { margin: 28px 0; padding: 30px; border-radius: 26px; background: var(--paper-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-group { display: grid; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 14px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.content input[type="text"], .content input[type="email"], .content input[type="tel"], .content input[type="search"]:not(.search input), .content select, .content textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 12px; background: #fff; color: var(--ink);
  font: inherit; font-size: 17px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); outline: none; transition: box-shadow .3s var(--ease);
}
.content textarea { min-height: 140px; resize: vertical; }
.content input:focus, .content select:focus, .content textarea:focus { box-shadow: inset 0 0 0 2px var(--red); }
.btn-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; padding: 12px 24px; border: 0; border-radius: 980px; cursor: pointer; background: var(--red); color: #fff; font-size: 17px; text-transform: none; letter-spacing: -.01em; transition: background-color .3s var(--ease); }
.btn-submit:hover { background: var(--red-hover); }
.form-notice { margin-top: 12px; font-size: 13px !important; color: var(--ink-2) !important; }
.info-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.info-card { padding: 22px; border-radius: 20px; background: var(--paper-2); }
.info-card .tag { font-size: 12px; font-weight: 600; color: var(--red); text-transform: none; letter-spacing: 0; }
@media (max-width: 734px) { .form-grid, .info-cards { grid-template-columns: minmax(0, 1fr); } .contact-form-wrap { padding: 22px 18px; } }

/* fault code library */
.fc-search-wrap { margin-bottom: 20px; }
.fc-search-input { height: 56px; font-size: 19px !important; border-radius: 14px !important; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 10px 30px -12px rgba(0,0,0,.15) !important; }
.fc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fc-filter-btn { height: 36px; padding: 0 14px; border: 0; border-radius: 980px; cursor: pointer; background: var(--paper-2); color: var(--ink); font-size: 14px; text-transform: none; letter-spacing: 0; transition: background-color .3s, color .3s; }
.fc-filter-btn:hover { background: #e8e8ed; }
.fc-filter-btn.active { background: var(--ink); color: #fff; }
.fc-count { font-size: 14px !important; color: var(--ink-3) !important; margin: 4px 0 14px; }
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.fc-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 18px; border: 0; background: var(--paper-2); color: var(--ink) !important; text-decoration: none !important; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.fc-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(0,0,0,.25); }
.fc-code { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.fc-desc { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.fc-card .badge { align-self: flex-start; margin-top: 4px; font-size: 12px; padding: 4px 10px; }
.fc-cat { font-size: 12px; color: var(--ink-3); text-transform: capitalize; letter-spacing: 0; }
.fc-link { margin-top: auto; font-size: 14px; color: var(--red); }
.fc-no-results { display: none; padding: 28px; border-radius: 18px; background: var(--paper-2); color: var(--ink-2); }
.fc-info { width: min(100% - 2 * var(--gutter), 780px); margin: 72px auto 0; }
.fc-info h2 { margin: 56px 0 14px; font-family: var(--display); font-size: 36px; line-height: 1.11; font-weight: 700; letter-spacing: -.005em; text-transform: none; }
.fc-info h2:first-child { margin-top: 0; }
.fc-info p, .fc-info li { font-size: 18px; line-height: 1.6; color: #333336; }
.fc-info p + p { margin-top: 16px; }
.sidebar .aff-box { margin: 0; }
.sidebar .aff-box p { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* tool pages: header copy and the tool card header */
.content .hero-inner > p:not([class]), .content .hero > div > p:not([class]) { margin-top: 16px; max-width: 760px; font-size: 21px; line-height: 1.4; font-weight: 600; letter-spacing: .011em; color: var(--ink-2); text-wrap: pretty; }
.content .hero h1 + p { margin-top: 18px !important; }
.page-other .hero h1 span[style*="red"] { color: var(--red) !important; }
@media (max-width: 734px) { .content .hero-inner > p:not([class]), .content .hero > div > p:not([class]) { font-size: 18px; } }