/* =========================================================================
   ECU Testing & Repairs
   Design tokens measured from humanly.framer.website — see DESIGN.md
   ========================================================================= */

:root {
  /* --- brand ------------------------------------------------------------ */
  --c-navy:        #174672;   /* sampled from the logo file */
  --c-navy-deep:   #0F3153;
  --c-bright:      #3A8DDE;   /* derived — CTAs on dark sections */
  --c-bright-hi:   #5AA3EC;

  /* --- surfaces --------------------------------------------------------- */
  --c-black:       #0A0E12;   /* near-black, very slightly blue-shifted */
  --c-card-dark:   #121820;
  --c-off:         #F5F5F5;
  --c-white:       #FFFFFF;

  /* --- text: opacity-stepped, not separate greys (Humanly's trick) ------ */
  --t-on-dark:     rgba(255,255,255,0.92);
  --t-on-dark-mut: rgba(255,255,255,0.62);
  --t-on-dark-fnt: rgba(255,255,255,0.38);
  --line-on-dark:  rgba(255,255,255,0.14);
  --fill-on-dark:  rgba(255,255,255,0.05);

  --t-on-light:    rgba(10,14,18,0.92);
  --t-on-light-mut:rgba(10,14,18,0.62);
  --line-on-light: rgba(10,14,18,0.12);
  --fill-on-light: rgba(10,14,18,0.04);

  /* --- type ------------------------------------------------------------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --fs-h1: 66px;  --lh-h1: 1.10; --tr-h1: -0.04em;
  --fs-h2: 48px;  --lh-h2: 1.00; --tr-h2: -0.04em;
  --fs-h3: 34px;  --lh-h3: 1.30; --tr-h3: -0.05em;
  --fs-h5: 22px;  --lh-h5: 1.30; --tr-h5: -0.05em;
  --fs-stat: 80px;
  --fs-price: 43px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-label: 14px;
  --fs-meta: 12px;

  /* --- layout ----------------------------------------------------------- */
  --container: 1140px;
  --measure: 600px;
  --section-y: 150px;
  --section-x: 20px;

  /* --- shape ------------------------------------------------------------ */
  --r-pill: 100px;
  --r-card: 20px;
  --r-md: 12px;
  --r-sm: 8px;

  --shadow-card:
    0 0.48px 0.48px -1.25px rgba(0,0,0,.11),
    0 1.83px 1.83px -2.5px  rgba(0,0,0,.10),
    0 8px 8px -3.75px       rgba(0,0,0,.04);
  --shadow-float: 5px 10px 20px rgba(0,0,0,.25);

  /* --- motion: the house curve, measured off the reference -------------- */
  --ease: cubic-bezier(.12,.23,.5,1);
  --ease-sharp: cubic-bezier(.68,0,0,.99);
  --dur: .5s;
  --dur-lg: .8s;   /* shortened from the reference's 1.6s — it outran the scroll */
  --header-h: 76px;
}

@media (max-width: 1199px) {
  :root { --fs-h1: 52px; --fs-h2: 40px; --fs-h3: 30px; --fs-stat: 64px; --section-y: 110px; }
}
@media (max-width: 809px) {
  :root {
    --fs-h1: 39px; --fs-h2: 34px; --fs-h3: 28px; --fs-h5: 20px;
    --fs-stat: 52px; --fs-price: 36px; --fs-lead: 16px;
    --section-y: 80px; --section-x: 16px;
  }
}

/* =========================================================================
   base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-black);
  color: var(--t-on-dark);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lenis */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img, svg, canvas, video { display: block; max-width: 100%; }
/* must come after: an author `display:block` on canvas/video beats the UA
   stylesheet's [hidden]{display:none}, so hidden elements still lay out */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--tr-h5); }

/* =========================================================================
   layout primitives
   ========================================================================= */

.section {
  padding: var(--section-y) var(--section-x);
  position: relative;
}
.section--dark  { background: var(--c-black); color: var(--t-on-dark); }
.section--light { background: var(--c-off);   color: var(--t-on-light); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; }

.section-head { text-align: center; max-width: var(--measure); margin: 0 auto 64px; }
.section-head p.lead { margin-top: 16px; font-size: var(--fs-lead); letter-spacing: -0.02em; }
.section--dark  .section-head p.lead { color: var(--t-on-dark-mut); }
.section--light .section-head p.lead { color: var(--t-on-light-mut); }

.eyebrow {
  display: inline-block;
  padding: 8px 16px;
  margin-bottom: 20px;
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0;
}
.section--dark  .eyebrow { background: var(--fill-on-dark);  color: var(--t-on-dark-mut);  border: 1px solid var(--line-on-dark); }
.section--light .eyebrow { background: var(--c-white);       color: var(--t-on-light-mut); box-shadow: var(--shadow-card); }

/* buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.02em;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary-dark  { background: var(--c-bright); color: #06121F; }
.btn--primary-dark:hover { background: var(--c-bright-hi); }
.btn--primary-light { background: var(--c-navy);   color: var(--c-white); }
.btn--primary-light:hover { background: var(--c-navy-deep); }
.btn--ghost-dark    { background: var(--fill-on-dark); color: var(--t-on-dark); border: 1px solid var(--line-on-dark); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.1); }
/* needs a border, not just a shadow — it frequently sits on a white card,
   where a white fill alone reads as unstyled text rather than a button */
.btn--ghost-light   { background: var(--c-white); color: var(--t-on-light); border: 1px solid rgba(10,14,18,.18); }
.btn--ghost-light:hover { background: var(--c-off); border-color: rgba(10,14,18,.32); }

/* cards ------------------------------------------------------------------ */
.card {
  border-radius: var(--r-card);
  padding: 32px;
}
.section--dark  .card { background: var(--c-card-dark); border: 1px solid var(--line-on-dark); }
.section--light .card { background: var(--c-white); box-shadow: var(--shadow-card); }

/* =========================================================================
   scroll reveal — one observer, three directions, data-driven timing
   (collapses the reference's 34 separate appear-effect instances)
   ========================================================================= */

[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}
[data-reveal="up"]    { transform: translateY(30px); }
[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="big"]   { transform: translateY(50px); transition-duration: var(--dur-lg); }

[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   header
   ========================================================================= */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  padding-inline: var(--section-x);
  transition: background-color .4s var(--ease);
}
/* NB: deliberately no backdrop-filter here — it would make this a containing
   block for the fixed mobile nav sheet and collapse it. */
.site-header.is-stuck { background: rgba(10,14,18,.92); }

.site-header .btn { padding: 10px 22px; font-size: var(--fs-label); }
.site-header .inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* logo asset is cropped to its artwork bbox (2598x876, ~2.97:1) — the source
   PNG carries ~56% transparent padding, which made height-sizing render it tiny */
.brand img { height: 42px; width: auto; }

.nav { display: flex; gap: 32px; }
.nav a {
  font-size: var(--fs-body); font-weight: 500; letter-spacing: -0.02em;
  color: var(--t-on-dark-mut);
  transition: color .3s var(--ease);
}
.nav a:hover { color: var(--t-on-dark); }

.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-sheet {
  position: fixed; inset: 0; z-index: 99;
  background: var(--c-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.nav-sheet.is-open { opacity: 1; pointer-events: auto; }
.nav-sheet a { font-size: 28px; font-weight: 600; letter-spacing: -0.04em; }

@media (max-width: 1199px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

/* =========================================================================
   hero
   ========================================================================= */

.hero {
  position: relative;
  height: 240vh;                 /* 100vh pinned + 140vh of scrub travel = ~12px/frame */
  padding: 0 var(--section-x);
  background: var(--c-black);
}
.hero__sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  padding-bottom: 7vh;          /* true centre reads low next to a tall media column */
}
.hero__grid {
  display: grid;
  max-width: var(--container);  /* aligns with the nav bar and every section */
  grid-template-columns: 0.9fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero__copy { text-align: left; min-width: 0; }  /* grid items default to min-width:auto; the max-content marquee track would blow the column out */
/* 66px orphans "scrap." in the narrower two-column measure */
@media (min-width: 1200px) { .hero h1 { font-size: clamp(40px, 3.4vw, 50px); } }
.hero__media { position: relative; min-width: 0; }
.hero .trust {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 10px; margin-bottom: 28px;
  border-radius: var(--r-pill);
  background: var(--fill-on-dark); border: 1px solid var(--line-on-dark);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0;
  color: var(--t-on-dark-mut);
}
.hero .trust .dot { width: 8px; height: 8px; border-radius: 50%; background: #3ED07A; box-shadow: 0 0 0 4px rgba(62,208,122,.18); }
.hero .lead {
  max-width: 46ch; margin-top: 20px;
  font-size: var(--fs-lead); letter-spacing: -0.02em; color: var(--t-on-dark-mut);
}
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

.hero__makes { margin-top: 44px; min-width: 0; overflow: hidden; }
.hero__makes-label {
  font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .12em;
  color: var(--t-on-dark-fnt); margin-bottom: 14px;
}
.hero__makes .marquee { padding: 0; background: transparent; }
.hero__makes .marquee__track { gap: 36px; animation-duration: 28s; }
.hero__makes .marquee span { font-size: var(--fs-body); font-weight: 500; }

/* scroll-scrub stage ------------------------------------------------------ */
.scrub__canvas {
  width: 100%; height: auto; aspect-ratio: 1100 / 780;
  /* Single even feather, no glow layer. Safe from source frame 28 on, where the
     top 6.4% of the frame stays clear of the bolts. */
  -webkit-mask-image:
    linear-gradient(90deg,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.scrub__poster {
  width: 100%; aspect-ratio: 1100 / 780;
  border-radius: var(--r-card);
  border: 1px dashed var(--line-on-dark);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--t-on-dark-fnt); font-size: var(--fs-label); padding: 24px;
}
/* lives inside .hero__sticky, which is the containing block, so it stays put
   while the hero is pinned instead of scrolling away with the 240vh section */
.scrub__hint {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%);
  font-size: var(--fs-meta); letter-spacing: .12em; text-transform: uppercase;
  color: var(--t-on-dark-fnt); white-space: nowrap;
  transition: opacity .4s var(--ease);
}
.hero.is-assembled .scrub__hint { opacity: 0; }

@media (max-width: 1199px) {
  .hero { height: 180vh; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 809px) {
  .hero { height: 170vh; }
  .hero__grid { gap: 24px; }
  .hero .trust { margin-bottom: 18px; }
  .hero .lead { margin-top: 14px; }
  .hero .actions { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; padding-block: calc(var(--header-h) + 60px) 80px; }
  .hero__sticky { position: static; height: auto; }
}

/* =========================================================================
   marquee
   ========================================================================= */

.marquee { overflow: hidden; background: var(--c-black); padding: 28px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 64px; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.02em; color: var(--t-on-dark-fnt); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* =========================================================================
   grids
   ========================================================================= */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 809px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* symptoms --------------------------------------------------------------- */
.symptom { display: flex; flex-direction: column; gap: 12px; }
.symptom .icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: rgba(58,141,222,.12); color: var(--c-bright);
  margin-bottom: 4px;
}
.symptom p { color: var(--t-on-dark-mut); }

/* routes ----------------------------------------------------------------- */
.route { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.route .tag {
  align-self: flex-start; padding: 6px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0;
  background: var(--c-navy); color: #fff;
}
.route .price { font-size: var(--fs-h5); font-weight: 600; letter-spacing: -0.03em; color: var(--c-navy); }
.route p { color: var(--t-on-light-mut); }
.route ul { display: grid; gap: 8px; margin-top: 4px; }
.route li { position: relative; padding-left: 24px; color: var(--t-on-light-mut); font-size: var(--fs-body); }
.route li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 7px; border-left: 2px solid var(--c-navy); border-bottom: 2px solid var(--c-navy);
  transform: rotate(-45deg);
}
.route .btn { margin-top: auto; align-self: flex-start; }

/* steps ------------------------------------------------------------------ */
.step { position: relative; }
.step .num {
  font-size: 14px; font-weight: 600; letter-spacing: 0;
  color: var(--c-navy); margin-bottom: 14px; display: block;
}
.step p { color: var(--t-on-light-mut); margin-top: 10px; }

/* shop ------------------------------------------------------------------- */
.product { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.product__media {
  aspect-ratio: 4 / 3; background: #E9E9E9;
  display: grid; place-items: center; color: rgba(10,14,18,.3); font-size: var(--fs-meta);
  filter: grayscale(1) contrast(1.05);
  transition: filter .4s var(--ease);
}
.product:hover .product__media { filter: grayscale(0) contrast(1); }
.product__body { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.product__meta { font-size: var(--fs-meta); color: var(--t-on-light-mut); }
.product__row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.product__price { font-size: var(--fs-h5); font-weight: 600; letter-spacing: -0.03em; }
.product__stock { font-size: var(--fs-meta); color: #1E874B; }

/* stats ------------------------------------------------------------------ */
.stat .num {
  font-size: var(--fs-stat); font-weight: 600; line-height: 1;
  letter-spacing: -0.02em; color: var(--c-bright);
}
.stat p { margin-top: 12px; color: var(--t-on-dark-mut); }

/* comparison ------------------------------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 809px) { .compare { grid-template-columns: 1fr; } }
.compare__col { border-radius: var(--r-card); padding: 32px; }
.compare__col--them { background: var(--fill-on-light); border: 1px solid var(--line-on-light); }
.compare__col--us   { background: var(--c-navy); color: #fff; }
.compare__col h3 { font-size: 28px; letter-spacing: -0.04em; margin-bottom: 20px; }
.compare__col li { padding: 14px 0 14px 30px; position: relative; border-bottom: 1px solid var(--line-on-light); }
.compare__col--us li { border-bottom-color: rgba(255,255,255,.16); }
.compare__col li:last-child { border-bottom: 0; }
.compare__col--them li::before { content: "✕"; position: absolute; left: 0; opacity: .45; }
.compare__col--us li::before   { content: "✓"; position: absolute; left: 0; color: var(--c-bright-hi); }

/* pricing ---------------------------------------------------------------- */
.toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 40px;
  background: var(--fill-on-light); border-radius: var(--r-pill);
}
.toggle button {
  padding: 10px 22px; border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: -0.02em;
  color: var(--t-on-light-mut);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.toggle button.is-active { background: var(--c-white); color: var(--t-on-light); box-shadow: var(--shadow-card); }

.plan { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.plan--featured { outline: 2px solid var(--c-navy); }
.plan .amount { font-size: var(--fs-price); font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; }
.plan .amount small { font-size: var(--fs-body); font-weight: 500; color: var(--t-on-light-mut); }
.plan p.desc { color: var(--t-on-light-mut); }
.plan ul { display: grid; gap: 10px; margin: 20px 0; }
.plan li { position: relative; padding-left: 24px; color: var(--t-on-light-mut); }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 7px; border-left: 2px solid var(--c-navy); border-bottom: 2px solid var(--c-navy);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }

/* faq -------------------------------------------------------------------- */
.faq { max-width: 800px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line-on-light); }
.faq__q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-size: var(--fs-h5); font-weight: 600; letter-spacing: -0.03em;
}
.faq__icon { flex: 0 0 auto; width: 20px; height: 20px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.faq__icon::before { width: 14px; height: 2px; }
.faq__icon::after  { width: 2px; height: 14px; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 26px; color: var(--t-on-light-mut); max-width: 62ch; }

/* contact ---------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
@media (max-width: 1199px) { .contact { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font-size: var(--fs-label); font-weight: 600; letter-spacing: -0.02em; }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--fs-body);
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line-on-light); background: var(--c-white); color: var(--t-on-light);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(23,70,114,.12);
}
.field textarea { min-height: 120px; resize: vertical; }

.info-row { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-on-light); }
.info-row:last-child { border-bottom: 0; }
.info-row .k { font-size: var(--fs-meta); color: var(--t-on-light-mut); text-transform: uppercase; letter-spacing: .1em; min-width: 90px; }
.info-row .v { font-weight: 500; letter-spacing: -0.02em; }

/* footer ----------------------------------------------------------------- */
.site-footer { background: var(--c-black); color: var(--t-on-dark); padding: 64px var(--section-x) 40px; }
.site-footer .inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.site-footer img { height: 40px; width: auto; margin-bottom: 16px; }
.site-footer p { color: var(--t-on-dark-fnt); font-size: var(--fs-label); max-width: 34ch; }
.site-footer nav { display: grid; gap: 10px; }
.site-footer nav a { color: var(--t-on-dark-mut); font-size: var(--fs-label); }
.site-footer nav a:hover { color: var(--t-on-dark); }
.site-footer .legal {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-on-dark);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--fs-meta); color: var(--t-on-dark-fnt);
}

/* placeholder marker ------------------------------------------------------ */
[data-placeholder] { position: relative; }