/* garagesite.nl — the site's own identity. Loads after the generated base sheet. See theme/site.md.
   Build #11's kenteken sheet, adopted with the outrank source on 2026-10-17 (owner ruling that day). */

:root {
  --brand: #C2410C;
  --brand-2: #EA580C;
  --accent: #F2C200;
  --ring: #F2C200;
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F5F7;
  --band: #F4F5F7;
  --line: #DADDE2;
  --ink: #1B2027;
  --muted: #545B66;
  --on-brand: #FFFFFF;
  --grad: linear-gradient(135deg, #C2410C 0%, #EA580C 100%);
  --page: 1120px;
  --narrow: 640px;
  --measure: 66ch;
  --r0: 3px;
  --r1: 6px;
  --r2: 10px;
  --r3: 14px;
  --shadow-1: 0 1px 0 #DADDE2;
  --shadow-2: 0 4px 14px rgba(27, 32, 39, .10);
  --plate: #F2C200;
  --plate-ink: #1B2027;
}

/* the first screen: white, graphite headline, nothing behind it */
.hero[data-hero="plain"] {
  --hero-bg: #FFFFFF;
  --hero-ink: #1B2027;
  --hero-ink-soft: #545B66;
  --hero-line: #DADDE2;
  border-bottom: 1px solid var(--line);
}
.hero h1 { letter-spacing: -.02em; font-weight: 800; }
.hero .lede { max-width: 36ch; }

/* signature: the kenteken eyebrow — every eyebrow is a Dutch number plate */
.eyebrow {
  display: inline-block;
  position: relative;
  padding: .2em .7em .2em 1.35em;
  background: var(--plate);
  color: var(--plate-ink);
  border: 2px solid var(--plate-ink);
  border-radius: var(--r0);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t0);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: .7em;
  background: #1F3A93;
}
.section[data-tone="brand"] .eyebrow { border-color: #FFFFFF; }

/* buttons and links: the orange is for doing */
a { text-decoration-color: var(--brand-2); text-underline-offset: .18em; }
.btn { font-weight: 700; letter-spacing: .01em; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* sections: rules like a work order, not floating cards */
.section-head h2 { font-weight: 800; letter-spacing: -.01em; }
.card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  box-shadow: none;
}
.card:hover { border-top-color: var(--brand); }
.step { border-left: 3px solid var(--brand); padding-left: var(--s4); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { font-weight: 700; cursor: pointer; }
table.data th { font-family: var(--font-ui); text-transform: uppercase; font-size: var(--t0); letter-spacing: .06em; }
table.data td:nth-child(n+2) { text-align: center; }

/* the plans: two plain cards side by side on desktop, stacked on a phone */
.plans { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the demo engine's blocks sit on a quiet panel so they read as the product itself */
.section[data-kind="instant_demo"],
.section[data-kind="booking"],
.section[data-kind="plate_check"] {
  border-top: 1px solid var(--line);
}

/* the plate keeps its graphite ink wherever the base sheet recolours an eyebrow
   (the hero's soft ink, a section head's orange, a brand band's white): on the
   kenteken yellow only graphite reads (F9 on 2026-10-17: grey on yellow fell short of 4.5:1) */
.hero .eyebrow,
.section-head .eyebrow,
.section[data-tone="brand"] .eyebrow { color: var(--plate-ink); }

/* the outrank pass (2026-10-15): the calculators' answer, and the services not built yet */
.calc-out .calc-main { border-left: 3px solid var(--brand); }
.addon[data-soon] .eyebrow { background: var(--paper); color: var(--brand); border-color: var(--brand); }