@charset "UTF-8";
/* ==========================================================================
   Chip Clash — single stylesheet.
   THEME = dark, PALETTE = P6 (emerald + yellow + pink), LEAD = a3.
   Exactly one theme lives in this file: one token block, no second theme
   selector, no prefers-color-scheme, no theme switcher, no stored theme key.
   Every colour in the project is declared in the :root block below and
   nowhere else.
   ========================================================================== */

/* -------------------------------------------------------------- 1. fonts */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivoblack-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivoblack-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/commissioner-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/commissioner-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ------------------------------------------------------------- 2. tokens */

:root {
  /* P1 dark — the only palette in this build. Azure leads, orange and
     yellow support it, on a deep navy ground. */
  --bg: #0A0E33;
  --surface: #121846;
  --surface-2: #1A2259;
  --text: #F2F1FA;
  --muted: #AEB3D6;
  --line: #2A3270;
  --accent: #5B6CFF;
  --accent-2: #FF6F38;
  --accent-3: #FFD95C;
  --on-accent: #060A24;
  --on-accent-2: #1A0B00;
  --on-accent-3: #221A00;

  /* Derived: a1 lightened 18% for links and buttons on neutral ground,
     plus the near-black that sits on top of it. */
  --accent-ink: #7886FF;
  --on-ink: #060A24;

  /* Inverted band: references, never new colour. */
  --invert-bg: var(--text);
  --invert-fg: var(--bg);

  /* Band defaults so :focus-visible and .btn work outside a band too. */
  --band-bg: var(--bg);
  --band-fg: var(--text);
  --band-alt: var(--accent-2);
  --sec-accent: var(--accent);
  --sec-on-accent: var(--on-accent);

  --font-head: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font-body: 'Commissioner', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --radius: 0;
  --pad-x: 20px;
  --band-y: 56px;
  --measure: 68ch;
  --head-h: 64px;
}

@media (min-width: 768px) {
  :root { --pad-x: 32px; --band-y: 72px; --head-h: 72px; }
}
@media (min-width: 1024px) {
  :root { --pad-x: 48px; --band-y: 88px; }
}
@media (min-width: 1280px) {
  :root { --pad-x: 88px; --band-y: 104px; }
}

/* -------------------------------------------------------------- 3. reset */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
}

img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0 0 0 1.1em; }
li + li { margin-top: .5em; }
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(48px, 8vw, 128px); line-height: .95; }
h2 { font-size: clamp(32px, 4.5vw, 72px); line-height: .98; }
h3 { font-size: clamp(20px, 2vw, 28px); line-height: 1.05; }
h4 { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.1; }

/* Ladder lines: manual breaks in h1 and key h2. From tablet up they must
   never break again on their own — an automatic break inside a ladder line
   gives the heading a random shape. The copy is written short enough that
   every line fits its container at these sizes. */
.l { display: block; }
@media (min-width: 768px) {
  .l { white-space: nowrap; }
}

/* A page-header section stacks: the heading gets the full container width,
   which is what keeps a 128px h1 on one line. */
.sec-head > .wrap > * + * { margin-top: clamp(24px, 4vw, 48px); }
.sec-head > .wrap > figure { max-width: 1000px; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  max-width: none;
}

.lead { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.55; }
.small { font-size: .9375rem; line-height: 1.55; }

/* --------------------------------------------------------- 4. skip link */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent-ink);
  color: var(--on-ink);
  padding: 14px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus {
  left: 0;
}

/* ------------------------------------------------------------ 5. layout */

.wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

main { display: block; }

/* The band component. One component, local variables, as required. */
.band {
  position: relative;
  overflow: hidden;
  background: var(--band-bg);
  color: var(--band-fg);
  padding-top: var(--band-y);
  padding-bottom: var(--band-y);
}
.band--n   { --band-bg: var(--bg);        --band-fg: var(--text);       --band-alt: var(--accent); }
.band--s   { --band-bg: var(--surface-2); --band-fg: var(--text);       --band-alt: var(--accent); }
.band--a1  { --band-bg: var(--accent);    --band-fg: var(--on-accent);  --band-alt: var(--accent-3); }
.band--a2  { --band-bg: var(--accent-2);  --band-fg: var(--on-accent-2);--band-alt: var(--accent); }
.band--a3  { --band-bg: var(--accent-3);  --band-fg: var(--on-accent-3);--band-alt: var(--accent); }
.band--inv { --band-bg: var(--invert-bg); --band-fg: var(--invert-fg);  --band-alt: var(--accent); }

/* Section accent, used by outline frames, headings and numbers on the
   neutral bands. Colour bands carry their own fill instead. */
.sec--a1 { --sec-accent: var(--accent);   --sec-on-accent: var(--on-accent); }
.sec--a2 { --sec-accent: var(--accent-2); --sec-on-accent: var(--on-accent-2); }
.sec--a3 { --sec-accent: var(--accent-3); --sec-on-accent: var(--on-accent-3); }

/* Secondary text and borders inside a band: never --text / --muted / --line. */
.band .dim { opacity: .78; }
.band .rule { border-top: 2px solid; opacity: .35; margin: 1.5rem 0; }

/* --------------------------------------------------- 6. block styles 6.3 */

/* solid — flat bright fill, contrasting text. */
.section--solid { background: var(--band-bg); color: var(--band-fg); }

/* outline — neutral ground, massive coloured frame, coloured headings.
   The style is only ever assigned to the two plain neutral bands, so the
   ground stays whatever that band already is: --bg for n, --surface-2 for s.
   The guard below keeps headings legible if it ever lands on a fill. */
.section--outline > .wrap > .frame {
  border: 4px solid var(--sec-accent);
  padding: clamp(20px, 4vw, 44px);
}
.section--outline h2,
.section--outline h3 { color: var(--sec-accent); }
.band--a1.section--outline h2, .band--a1.section--outline h3,
.band--a2.section--outline h2, .band--a2.section--outline h3,
.band--a3.section--outline h2, .band--a3.section--outline h3,
.band--inv.section--outline h2, .band--inv.section--outline h3 { color: var(--band-fg); }
.band--a1.section--outline > .wrap > .frame,
.band--a2.section--outline > .wrap > .frame,
.band--a3.section--outline > .wrap > .frame,
.band--inv.section--outline > .wrap > .frame { border-color: var(--band-fg); }

/* offset — coloured plate, content card on --surface with a flat shadow. */
.section--offset { background: var(--band-bg); color: var(--band-fg); }
.section--offset > .wrap > .content {
  background: var(--surface);
  color: var(--text);
  --band-bg: var(--surface);
  --band-fg: var(--text);
  box-shadow: 0 12px 0 var(--band-alt);
  padding: clamp(20px, 4vw, 44px);
}
@media (min-width: 768px) {
  .section--offset > .wrap > .content { transform: translate(.5rem, .5rem); }
}

/* split — one bright column, one neutral column. */
.section--split { background: var(--bg); color: var(--text); padding: 0; }
.section--split > .split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.section--split .col-1 {
  background: var(--band-bg);
  color: var(--band-fg);
  padding: var(--band-y) var(--pad-x);
}
.section--split .col-2 {
  background: var(--bg);
  color: var(--text);
  --band-bg: var(--bg);
  --band-fg: var(--text);
  padding: var(--band-y) var(--pad-x);
}
@media (min-width: 1024px) {
  .section--split > .split { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------- 7. presentation: chapters */

/* The block number leads the band as an editorial marker: a display numeral
   on the baseline of a rule that runs out to the edge of the column. It is
   part of the flow, not a watermark parked in a corner. */
.chapter-no {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(30px, 3.2vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sec-accent);
}
.chapter-no::after {
  content: '';
  flex: 1 1 auto;
  height: clamp(3px, .35vw, 5px);
  background: currentColor;
  opacity: .55;
}
.band--a1 .chapter-no, .band--a2 .chapter-no,
.band--a3 .chapter-no, .band--inv .chapter-no { color: var(--band-fg); }

/* ------------------------------------------- 8. presentation: mosaic */

.mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
@container (min-width: 620px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 920px) { .mosaic { grid-template-columns: repeat(3, 1fr); } }

.mosaic > * { padding: clamp(18px, 2.4vw, 28px); }
.tile--a1  { background: var(--accent);   color: var(--on-accent);   --band-bg: var(--accent);   --band-fg: var(--on-accent); }
.tile--a2  { background: var(--accent-2); color: var(--on-accent-2); --band-bg: var(--accent-2); --band-fg: var(--on-accent-2); }
.tile--a3  { background: var(--accent-3); color: var(--on-accent-3); --band-bg: var(--accent-3); --band-fg: var(--on-accent-3); }
.tile--s   { background: var(--surface-2); color: var(--text);       --band-bg: var(--surface-2); --band-fg: var(--text); }

/* ------------------------------------------------------------ 9. decor */

/* The one decorative device on the site: a stack of three heavy rules of
   falling length, the logo motif blown up, anchored to the lower left of the
   band inside its own bottom padding, where it never meets text. It carries
   no meaning and no words. */
.decor {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(14px, calc(var(--band-y) * .22), 34px);
  width: min(520px, 46%);
  height: clamp(5px, .9vw, 12px);
  background: currentColor;
  color: inherit;
  opacity: .3;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.decor::before,
.decor::after {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  background: currentColor;
}
/* The stack grows upward from the anchored bar, so the whole device stays
   inside the band's bottom padding instead of running off the edge. */
.decor::before { width: 62%; bottom: 200%; }
.decor::after  { width: 28%; bottom: 400%; }

/* Content sits above decor and chapter numbers. */
.band > .wrap,
.band > .split { position: relative; z-index: 1; }

/* ---------------------------------------------------- 10. links, buttons */

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: none; }
@media (hover: hover) {
  a:hover { text-decoration: underline; text-underline-offset: .18em; }
}

/* Specificity held at (0,1,1) on purpose — see the pitfalls section. */
.band a { color: var(--band-fg); }
.band a.btn--solid { color: var(--band-bg); }

:focus-visible {
  outline: 3px solid var(--band-fg);
  outline-offset: 2px;
}

.arrow::after { content: ' \2197'; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) {
  .btn:hover { text-decoration: underline; text-underline-offset: .18em; }
}
.btn--solid { background: var(--accent-ink); color: var(--on-ink); }
.band .btn--solid { background: var(--band-fg); color: var(--band-bg); }
.btn--ghost {
  background: transparent;
  color: var(--band-fg);
  box-shadow: inset 0 0 0 3px currentColor;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem; }

/* ------------------------------------------------------------ 11. header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  color: var(--text);
  border-bottom: 2px solid var(--line);
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--head-h);
  max-height: 72px;
}
.logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1.125rem;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.logo img { width: 28px; height: 28px; }
.site-head .spacer { flex: 1 1 auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
  padding: 0 12px;
  gap: 8px;
}
.nav-toggle__bars { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.site-nav { display: none; }
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  padding: 13px 0;
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  min-height: 44px;
}
.site-nav a[aria-current='page'] { color: var(--accent-ink); }
.head-cta { display: none; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-weight: 700;
  font-size: .875rem;
  color: var(--accent-ink);
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .site-nav ul { display: flex; gap: 22px; align-items: center; }
  .site-nav a { border-bottom: 0; padding: 10px 0; }
  .head-cta { display: inline-flex; }
}

/* ------------------------------------------------------------ 12. hero */

.hero { padding-top: calc(var(--band-y) + 8px); }
.hero h1 { margin-bottom: 1.25rem; max-width: 20ch; }
.hero .lead { max-width: 62ch; }
.hero__note {
  margin-top: 1.5rem;
  font-weight: 700;
  font-size: .9375rem;
  border-top: 2px solid;
  padding-top: .85rem;
  max-width: 48ch;
}
/* Two-column sections. The grid goes on whichever element actually holds the
   two halves, and that depends on the block style: the wrap for solid, the
   frame for outline, the card for offset. Putting it on all three at once
   would make the frame a single column item at half width. */
.sec-2col.section--solid > .wrap,
.sec-2col.section--outline > .wrap > .frame,
.sec-2col.section--offset > .wrap > .content {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .sec-2col.section--solid > .wrap,
  .sec-2col.section--outline > .wrap > .frame,
  .sec-2col.section--offset > .wrap > .content { grid-template-columns: 1.05fr .95fr; }
  .hero.sec-2col.section--solid > .wrap { grid-template-columns: 1.1fr .9fr; align-items: center; }
}

/* Photo in a coloured frame, as required. */
.shot { position: relative; }
.shot img {
  width: 100%;
  border: 10px solid var(--band-alt);
  object-fit: cover;
  aspect-ratio: 16 / 9;
  max-height: clamp(14rem, 34vh, 26rem);
}
.shot--tall img { aspect-ratio: 4 / 3; max-height: clamp(16rem, 44vh, 30rem); }
.shot--wide img { aspect-ratio: 16 / 9; max-height: clamp(14rem, 34vh, 26rem); }

/* A photo that carries text always gets a scrim. */
.shot--scrim::before {
  content: '';
  position: absolute;
  inset: 10px;
  background: var(--band-bg);
  opacity: .62;
  z-index: 1;
}
.shot--scrim .shot__text { position: absolute; z-index: 2; inset: auto 10px 10px 10px; padding: 18px; }

/* ------------------------------------------------------------ 13. grids */

/* Grid items default to min-width:auto, so a child with a large minimum
   width (a wide table, a price set in the display face) refuses to shrink
   and is then clipped by the band. Every grid item here may shrink. */
.cols-2 > *, .cols-3 > *, .cards-4 > *, .cards-6 > *, .steps > *,
.mosaic > *, .format__grid > *, .site-foot__grid > *,
.section--split > .split > *,
.sec-2col.section--solid > .wrap > *,
.sec-2col.section--outline > .wrap > .frame > *,
.sec-2col.section--offset > .wrap > .content > * { min-width: 0; }

/* These grids have to answer to the width they actually get, not to the
   viewport: a section in the split style gives its body half the screen, and
   a viewport query would still ask for three columns in a 640px column.
   So the layout holders become query containers and the grids inside them
   are sized against their own container. Column counts stay explicit, never
   auto-fit, so six cards never fall into an orphan 4 + 2 row. */
.wrap, .frame, .content, .col-1, .col-2,
.sec-2col.section--solid > .wrap > *,
.sec-2col.section--outline > .wrap > .frame > *,
.sec-2col.section--offset > .wrap > .content > * { container-type: inline-size; }

.cols-2 { display: grid; gap: clamp(24px, 3.4vw, 44px); grid-template-columns: 1fr; }
@container (min-width: 620px) { .cols-2 { grid-template-columns: 1fr 1fr; } }

.cols-3 { display: grid; gap: clamp(20px, 2.6vw, 32px); grid-template-columns: 1fr; }
@container (min-width: 620px) { .cols-3 { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 920px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* Exactly six cards: 1 / 2 / 3 columns so no orphan row appears. */
.cards-6 { display: grid; gap: clamp(20px, 2.6vw, 32px); grid-template-columns: 1fr; }
@container (min-width: 620px) { .cards-6 { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 920px) { .cards-6 { grid-template-columns: repeat(3, 1fr); } }

/* Exactly four tiles. */
.cards-4 { display: grid; gap: clamp(20px, 2.6vw, 32px); grid-template-columns: 1fr; }
@container (min-width: 520px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 1000px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------ 14. cards */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  color: var(--text);
  --band-bg: var(--surface);
  --band-fg: var(--text);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: .6rem; flex: 1 1 auto; }
.card__tag {
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.card h3 { margin: 0; }
.card p { margin: 0; font-size: .9375rem; }
.card__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .875rem; color: var(--muted); list-style: none; padding: 0; }
.card__meta li { margin: 0; }
.price-mid { font-size: clamp(24px, 2.6vw, 34px); }
.card__price { font-family: var(--font-head); font-size: clamp(22px, 2.2vw, 30px); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.card__link { font-weight: 700; color: var(--accent-ink); }

/* Cards sitting directly on a colour band keep their own surface, so the
   --text / --line exception for fields and tables applies to them too. */

/* ------------------------------------------------- 15. numbers and prices */

.steps { display: grid; gap: clamp(22px, 3vw, 36px); grid-template-columns: 1fr; counter-reset: step; }
@container (min-width: 620px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
/* Seven steps: 1 / 2 / 4 columns, so the last row holds three, never one. */
.steps--wide { grid-template-columns: 1fr; }
@container (min-width: 620px) { .steps--wide { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 1100px) { .steps--wide { grid-template-columns: repeat(4, 1fr); } }

.step { display: grid; gap: .5rem; align-content: start; }
/* p.step__no keeps the display size: a bare .step__no loses to .step p. */
.step h3 { margin: 0; }
.step p { margin: 0; font-size: .9375rem; }
.step p.step__no {
  font-family: var(--font-head);
  font-size: clamp(40px, 5vw, 64px);
  line-height: .9;
  color: var(--sec-accent);
  font-variant-numeric: tabular-nums;
}
.band--a1 .step p.step__no, .band--a2 .step p.step__no,
.band--a3 .step p.step__no, .band--inv .step p.step__no { color: var(--band-fg); }

.price-big {
  font-family: var(--font-head);
  font-size: clamp(40px, 6vw, 96px);
  line-height: .9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  display: block;
}
.plate {
  display: inline-block;
  background: var(--sec-accent);
  color: var(--sec-on-accent);
  padding: .3em .5em;
  border-radius: var(--radius);
}
.band--a1 .plate, .band--a2 .plate, .band--a3 .plate, .band--inv .plate {
  background: var(--band-fg);
  color: var(--band-bg);
}
.price-card {
  background: var(--surface);
  color: var(--text);
  --band-bg: var(--surface);
  --band-fg: var(--text);
  border: 2px solid var(--line);
  padding: clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
}
.price-card .price-big { color: var(--accent-ink); font-size: clamp(26px, 2.6vw, 38px); }
.price-card h3 { margin: 0; font-size: clamp(18px, 1.6vw, 22px); }
.price-card .small { color: var(--muted); }

/* ------------------------------------------------------------ 16. tables */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 2px solid var(--line);
}
.table-hint { font-size: .875rem; color: var(--muted); margin: 0 0 .6rem; }
.band--a1 .table-hint, .band--a2 .table-hint, .band--a3 .table-hint, .band--inv .table-hint,
.band--a1 .table-note, .band--a2 .table-note, .band--a3 .table-note, .band--inv .table-note {
  color: var(--band-fg);
  opacity: .78;
}
table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--surface);
  color: var(--text);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
caption {
  text-align: left;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  border-bottom: 2px solid var(--line);
}
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; color: var(--text); }
thead th { background: var(--surface-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
td .price-cell { font-family: var(--font-head); color: var(--accent-ink); }

/* ------------------------------------------------------------- 17. forms */

.form-box {
  background: var(--surface);
  color: var(--text);
  --band-bg: var(--surface);
  --band-fg: var(--text);
  border: 2px solid var(--line);
  padding: clamp(18px, 3vw, 36px);
}
fieldset { border: 0; margin: 0; padding: 0; }
legend { font-family: var(--font-head); font-size: clamp(20px, 2vw, 28px); padding: 0; margin-bottom: 1rem; }
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-weight: 700; font-size: .9375rem; color: var(--text); }
.field .hint { font-size: .8125rem; color: var(--muted); }
.req { color: var(--accent-3); }
.opt { color: var(--muted); font-weight: 400; }

input[type='text'], input[type='email'], input[type='tel'], input[type='date'],
input[type='number'], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--surface-2);
  color: var(--text);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
}
textarea { min-height: 150px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 1px;
  border-color: var(--accent-ink);
}
[aria-invalid='true'] { border-color: var(--accent-3); border-width: 3px; }
.field-error { font-size: .875rem; font-weight: 700; color: var(--accent-3); }

.checks { display: grid; gap: .9rem; margin: 1.25rem 0; }
.check { display: grid; grid-template-columns: 26px 1fr; gap: .7rem; align-items: start; }
.check input[type='checkbox'] { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent-ink); }
.check label { font-weight: 400; font-size: .9375rem; }

/* Honeypot: hidden by CSS, not by type=hidden. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { font-size: .875rem; color: var(--muted); margin-top: 1rem; }
.form-above { font-weight: 700; font-size: .9375rem; margin: 1rem 0; }

.error-summary {
  border: 3px solid var(--accent-3);
  background: var(--surface-2);
  color: var(--text);
  padding: 16px 18px;
  margin-bottom: 1.5rem;
}
.error-summary h2 { font-family: var(--font-body); font-size: 1.0625rem; color: var(--accent-3); margin: 0 0 .5rem; }
.error-summary ul { margin: 0; padding-left: 1.1em; }
.error-summary a { color: var(--accent-3); text-decoration: underline; }

/* -------------------------------------------------------------- 18. FAQ */

.faq { display: grid; gap: 2px; max-width: 980px; }
.faq details {
  background: var(--surface);
  color: var(--text);
  --band-bg: var(--surface);
  --band-fg: var(--text);
  border: 2px solid var(--line);
}
.faq summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 1.0625rem;
  min-height: 48px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-head); color: var(--accent-ink); }
.faq details[open] summary::after { content: '\2013'; }
.faq .answer { padding: 0 18px 18px; }
.faq .answer p { max-width: 72ch; }

/* ------------------------------------------------- 19. misc content bits */

.list-plain { list-style: none; padding: 0; }
.list-plain li { position: relative; padding-left: 1.4em; }
.list-plain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: .7em;
  height: .7em;
  background: var(--sec-accent);
}
.band--a1 .list-plain li::before, .band--a2 .list-plain li::before,
.band--a3 .list-plain li::before, .band--inv .list-plain li::before { background: var(--band-fg); }

.anchor-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.anchor-nav li { margin: 0; }
.anchor-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: .9375rem;
  box-shadow: inset 0 0 0 2px currentColor;
}

.meta-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .9375rem; }
.meta-row li { margin: 0; }
.meta-row b { font-family: var(--font-head); font-weight: 400; }

.format {
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 2px solid var(--line);
  scroll-margin-top: calc(var(--head-h) + 16px);
}
.format:first-of-type { border-top: 0; padding-top: 0; }
.format__grid { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: 1fr; }
@container (min-width: 860px) { .format__grid { grid-template-columns: 1fr 1fr; } }

.crumbs { font-size: .875rem; padding: 14px 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: '/ '; opacity: .6; }

.legal-head { padding-top: calc(var(--band-y) * .8); padding-bottom: calc(var(--band-y) * .8); }
.legal-body { padding-top: var(--band-y); padding-bottom: var(--band-y); background: var(--bg); color: var(--text); }
.legal-body h2 { font-size: clamp(22px, 2.4vw, 34px); margin-top: 2.5rem; }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body .num { color: var(--accent-ink); font-family: var(--font-head); margin-right: .4em; }
.legal-body p, .legal-body li { max-width: 72ch; }
.legal-body .todo {
  border-left: 4px solid var(--accent-2);
  padding: .6rem 0 .6rem 1rem;
  margin: 1rem 0;
  font-size: .875rem;
  color: var(--muted);
}
.legal-note {
  border: 2px solid var(--line);
  background: var(--surface);
  padding: 16px 18px;
  margin-top: 2.5rem;
  font-size: .9375rem;
  color: var(--muted);
}
.updated { font-size: .875rem; font-weight: 700; }

.prov-table th { width: 38%; }

/* ------------------------------------------------------------ 20. footer */

.site-foot { background: var(--surface); color: var(--text); border-top: 4px solid var(--accent); padding: var(--band-y) 0 32px; }
.site-foot__grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-foot h2 { font-family: var(--font-body); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin: 0 0 .55rem; }
.site-foot a { color: var(--text); }
.site-foot a:hover { color: var(--accent-ink); }
.foot-contact a { color: var(--accent-ink); font-weight: 700; }
.foot-addr { font-style: normal; color: var(--muted); margin-top: .75rem; font-size: .9375rem; }
.cookie-reopen {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  margin-top: .5rem;
  background: transparent;
  color: var(--accent-ink);
  border: 2px solid var(--accent-ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
}
.foot-compliance {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--line);
  font-size: .875rem;
  color: var(--muted);
  max-width: none;
}
.foot-bottom { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .875rem; color: var(--muted); }

/* ------------------------------------------------------------ 21. cookie */

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surface-2);
  color: var(--text);
  border-top: 4px solid var(--accent-2);
  padding: 18px 0;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__in { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .cookie-bar__in { grid-template-columns: 1fr auto; align-items: center; }
}
.cookie-bar p { margin: 0; font-size: .9375rem; max-width: 80ch; }
.cookie-bar h2 { font-size: 1.0625rem; font-family: var(--font-body); margin: 0 0 .4rem; }
/* Three equal buttons: a grid, so all three are the same width at every
   breakpoint, with the same weight and the same contrast. */
.cookie-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) {
  .cookie-actions { grid-template-columns: repeat(3, 1fr); }
}
.cookie-actions .btn {
  background: var(--accent-ink);
  color: var(--on-ink);
  font-weight: 700;
}

dialog.cookie-dialog {
  width: min(680px, calc(100% - 2 * var(--pad-x)));
  max-height: 86vh;
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  border: 4px solid var(--accent-2);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 32px);
}
dialog.cookie-dialog::backdrop { background: var(--bg); opacity: .82; }
.cookie-cat { border-top: 2px solid var(--line); padding: 1rem 0; }
.cookie-cat:first-of-type { border-top: 0; }
.cookie-cat h3 { margin: 0 0 .35rem; font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700; }
.cookie-cat p { margin: 0; font-size: .875rem; color: var(--muted); }
.cookie-cat__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cookie-cat__row .always { font-size: .8125rem; font-weight: 700; color: var(--muted); }
.cookie-dialog .btn-row { margin-top: 1.5rem; }
.cookie-noscript {
  background: var(--surface-2);
  color: var(--text);
  border-top: 4px solid var(--accent-2);
  padding: 16px 0;
  font-size: .9375rem;
}

/* ------------------------------------------------------- 22. small print */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[id] { scroll-margin-top: calc(var(--head-h) + 16px); }

.stack > * + * { margin-top: clamp(28px, 4vw, 56px); }
.mt-0 { margin-top: 0; }
.mb-1 { margin-bottom: 1rem; }
.mt-2 { margin-top: 2rem; }

/* ---------------------------------------------- 23. late corrections */

/* Form fields never squeeze below a usable width, whatever column the form
   lands in: a date input has a large intrinsic minimum and would be cut off. */
.form-box .cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* The price in the display face may fall onto two lines in a narrow column,
   but an amount is never split from its own digits. */
.price-big { overflow-wrap: break-word; }

/* In a stacked section the heading half and the body half are siblings in
   one container, so they need the rhythm that a grid gap would have given. */
.section:not(.sec-2col):not(.sec-head) > .wrap > * + *,
.section:not(.sec-2col) > .wrap > .frame > * + *,
.section:not(.sec-2col) > .wrap > .content > * + *,
.section--split > .split > .col-1 > * + *,
.section--split > .split > .col-2 > * + * { margin-top: clamp(24px, 3vw, 40px); }

/* Tap targets: the logo link and the consent checkbox rows both have to
   clear 44 x 44, without blowing the checkbox up to 44px of painted box. */
.logo { min-height: 44px; }
.check { grid-template-columns: 44px 1fr; align-items: start; }
.check input[type='checkbox'] { margin: 10px; }
.check label { display: block; padding: 10px 0; }

/* Legal pages are the quiet ones: the same ladder, set smaller, so the long
   statutory titles fit their band in both languages. */
.legal-head h1 { font-size: clamp(40px, 5.5vw, 80px); }

/* A heading inside a two-column section answers to its column, not to the
   viewport: the clamp stays the ceiling, and the container unit only pulls
   the size down when the column is too narrow to hold a ladder line. */
.sec-2col h2, .section--split h2 { font-size: min(clamp(32px, 4.5vw, 72px), 10cqi); }