/* ==========================================================================
   Auction-Experts — "Enterprise Grid" direction
   Implements design_handoff_enterprise_grid. Supersedes the catalogue look.

   Clean enterprise technology on the brand navy + teal. Structure is drawn
   with 1px #DFE5E9 hairlines and alternating bands (grey / white / navy).
   Square corners, no shadows. The signature object is a white card with a
   3px teal TOP rail.

   NOTE ON THE TEAL. The spec's own AA note says teal #54A0B3 is not for
   body-size text on white — it lands at 2.97:1. But the section patterns ask
   for teal 12-15px kickers and 01-07 numerals, which are body-size. So the
   accent is split by role rather than dropped:

     --teal        #54A0B3  rails, button fills, large numerals   (never small text)
     --teal-ink    #2A7186  small teal text on grey/white         (5.2:1)
     --teal-lift   #6BB4C8  small teal text on navy grounds       (4.8:1)

   Same hue, same read; every teal label clears AA. Nothing else deviates.
   ========================================================================== */

/* Fonts are self-hosted (assets/fonts/) so no visitor request ever
   reaches Google — GDPR-clean and one less third-party dependency.
   Subsets: latin + latin-ext (Hungarian customer names need the latter). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/archivo-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/archivo-500-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';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/archivo-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/archivo-600-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';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-700-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';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/archivo-800-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/archivo-800-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-500-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-600-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;
}

:root {
  --ground:      #F5F7F8;   /* page background */
  --surface:     #FFFFFF;   /* cards, alternating bands */
  --border:      #DFE5E9;   /* every hairline, 1px */
  --navy:        #1C3E53;   /* hero band, buttons, links */
  --navy-deep:   #0F2233;   /* footer, dark technical panels */
  --teal:        #54A0B3;   /* accent — rails, fills, large numerals */
  --teal-ink:    #2A7186;   /* accent as small text on light */
  --teal-lift:   #6BB4C8;   /* accent as small text on navy */
  --text:        #15202B;
  --text-muted:  #3D4B57;

  /* on navy grounds */
  --on-navy:       #FFFFFF;
  --on-navy-muted: #B9CBD8;
  --on-navy-body:  #D7E1E8;
  --on-navy-faint: #8FA6B5;
  --rule-navy:     rgba(255, 255, 255, 0.2);
  --rule-navy-soft:rgba(255, 255, 255, 0.15);

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1160px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);   /* 40px desktop */
  --band: clamp(2.75rem, 6vw, 4.5rem);     /* 72px vertical band padding */
  --gap: 20px;                             /* the grid gap, everywhere */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--navy); color: #fff; }

img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.hero :focus-visible, .band-dark :focus-visible,
.site-foot :focus-visible, .panel-dark :focus-visible { outline-color: var(--teal-lift); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Layout ------------------------------------------------------- */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Narrow content keeps a readable measure but shares the wide container's LEFT
   edge, so every heading on the page starts at the same gutter. Centring it
   instead leaves prose sections visibly indented against the full-width grids. */
.wrap-narrow { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow > * { max-width: 820px; }

section { padding-block: var(--band); }
section + section { border-top: 1px solid var(--border); }

/* Bands alternate ground / white / navy. */
.band-alt { background: var(--surface); }

.band-dark { background: var(--navy-deep); color: var(--on-navy); border-top: 0; }
.band-dark + section { border-top: 0; }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--on-navy); }
.band-dark p, .band-dark li { color: var(--on-navy-muted); }
.band-dark .eyebrow { color: var(--teal-lift); }
.band-dark .muted { color: var(--on-navy-faint); }
.band-dark a { color: var(--teal-lift); }

/* A figure sitting immediately under a hero, with no band rule between. */
.section-tight { padding-block: var(--band) 0; border-top: 0; }
.section-tight + section { border-top: 0; }

/* H2 on the left, "All features →" on the right. */
.section-head {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  justify-content: space-between; align-items: baseline;
  margin-bottom: 2.25rem;
}
.section-head h2 { margin: 0; }
.section-head > a {
  font-size: 0.875rem; font-weight: 600;
  color: var(--navy); text-decoration: none; white-space: nowrap;
}
.section-head > a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Typography --------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-weight: 800; font-size: clamp(1.875rem, 4.6vw, 3.125rem); line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.25; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.15em; color: var(--text-muted); }
.prose p, .prose li { color: var(--text-muted); }

.lede {
  font-size: clamp(1.0625rem, 1.7vw, 1.125rem);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 62ch;
}

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-deep); }

strong, b { font-weight: 600; color: var(--text); }

/* Kicker — 12-13px, 600, uppercase, wide tracking. */
.eyebrow {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 0 1rem;
}

.crumbs {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-muted); margin: 0 0 1.25rem;
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }

.muted { color: var(--text-muted); }

/* Same rail as the cards — the spec is explicit that it is never a left rail. */
.quote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  padding: 1.75rem 2rem;
  margin: 2.25rem 0;
}
.quote p {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.4; color: var(--text); margin-bottom: 0.9rem;
}
.quote cite {
  font-style: normal;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Prose -------------------------------------------------------- */

.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2.75rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 0.5rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--teal-ink); }

/* ---------- Header ------------------------------------------------------- */

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 200;
  font-weight: 600; font-size: 0.875rem;
}
.skip:focus { left: 1rem; top: 1rem; }

.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap { display: flex; align-items: center; gap: 2rem; min-height: 68px; }

.brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; margin-right: auto; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-since {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
  padding-left: 0.9rem; border-left: 1px solid var(--border);
}

/* Scoped with ">" so the mega-menu panels do not inherit the row layout. */
.site-nav > ul { display: flex; gap: 1.625rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.site-nav > ul > li > a {
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-nav > ul > li > a:hover { color: var(--navy); }
.site-nav > ul > li > a[aria-current="page"] {
  color: var(--navy); font-weight: 600; border-bottom-color: var(--teal);
}

.nav-top { display: inline-flex; align-items: center; gap: 0.34rem; }
.chev { opacity: 0.55; transition: transform .18s; }

.nav-cta {
  background: var(--navy); color: #fff !important;
  padding: 0.625rem 1.25rem; font-weight: 600 !important;
  border-bottom-color: transparent !important;
  transition: background .15s;
}
.nav-cta:hover { background: var(--navy-deep); }

.nav-toggle { display: none; }

/* Mega menu — white panels on the same 1px grid. */
.nav-root > li { position: relative; }
.mega {
  position: absolute; top: 100%; left: -1.25rem; z-index: 60;
  padding-top: 1px;
  opacity: 0; visibility: hidden;
  transition: opacity .15s, visibility .15s;
}
.mega-inner {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
}
.has-menu:hover .mega,
.has-menu:focus-within .mega { opacity: 1; visibility: visible; }
.has-menu:hover .chev,
.has-menu:focus-within .chev { transform: rotate(180deg); }

.mega-col { min-width: 210px; padding: 1.75rem 1.875rem; }
.mega-col + .mega-col { border-left: 1px solid var(--border); }
.mega-col h4 {
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-ink); margin: 0 0 1.1rem;
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li + li { margin-top: 0.7rem; }
.mega-col a {
  display: block; white-space: nowrap;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--text); text-decoration: none;
}
.mega-col a:hover, .mega-col a[aria-current] { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.mega-col a.muted-link {
  font-size: 0.8125rem; font-weight: 600; color: var(--text-muted);
  padding-top: 0.85rem; margin-top: 0.6rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 1000px) {
  .site-head .wrap { flex-wrap: wrap; min-height: 60px; gap: 1rem; }
  .nav-toggle {
    display: block; background: none;
    border: 1px solid var(--border);
    padding: 0.5rem 0.9rem;
    font-family: inherit; font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text); cursor: pointer;
  }
  .brand-since { display: none; }
  .site-nav { flex-basis: 100%; display: none; padding-bottom: 1rem; }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li { border-top: 1px solid var(--border); }
  .site-nav > ul > li > a { display: block; padding: 0.85rem 0; border-bottom: none; }
  .nav-cta { display: inline-block; margin: 0.8rem 0; }
  .chev { display: none; }

  .mega {
    position: static; opacity: 1; visibility: visible;
    padding-top: 0; transition: none;
  }
  .mega-inner { display: block; border: 0; background: transparent; }
  .mega-col { padding: 0 0 1rem 1rem; min-width: 0; }
  .mega-col + .mega-col { border-left: 0; }
  .mega-col a { white-space: normal; }
}

/* ---------- Buttons ------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9375rem; font-weight: 600;
  padding: 14px 28px;
  text-decoration: none;
  border: 1px solid var(--navy);
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 1.75rem; }

/* On a navy ground the primary flips to a teal fill. */
.hero .btn-primary, .band-dark .btn-primary {
  background: var(--teal); border-color: var(--teal); color: var(--navy-deep);
}
.hero .btn-primary:hover, .band-dark .btn-primary:hover {
  background: var(--teal-lift); border-color: var(--teal-lift); color: var(--navy-deep);
}
.hero .btn-ghost, .band-dark .btn-ghost {
  color: #fff; border-color: rgba(255, 255, 255, 0.4);
}
.hero .btn-ghost:hover, .band-dark .btn-ghost:hover {
  background: #fff; color: var(--navy); border-color: #fff;
}

/* ---------- Hero: the navy band ------------------------------------------ */

.hero {
  background: var(--navy);
  color: var(--on-navy);
  border-top: 0;
  padding-block: clamp(3rem, 6.5vw, 4.75rem);
}
.hero + section { border-top: 0; }
.hero h1, .hero h2, .hero h3 { color: var(--on-navy); }
.hero p, .hero .lede { color: var(--on-navy-muted); }
.hero .eyebrow { color: var(--teal-lift); margin-bottom: 1.25rem; }
/* Inline links in hero copy. Declared before .crumbs so the breadcrumb rule,
   which has equal specificity, still wins for the breadcrumb trail. */
.hero a:not(.btn) { color: var(--teal-lift); }
.hero .crumbs { color: var(--on-navy-faint); }
.hero .crumbs a { color: var(--on-navy-faint); }
.hero .crumbs a:hover { color: #fff; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}
.hero-text { min-width: 0; }
.hero-text .lede { margin-bottom: 0; }
.hero-text .btn-row { margin-top: 2.125rem; }

/* Stat block — cells split by 1px rules on the navy, teal numerals. */
.hero-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--rule-navy);
  border: 1px solid var(--rule-navy);
}
.hero-stats > div { background: var(--navy); padding: 1.375rem 1.25rem; }
.stat-num {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 1.875rem);
  line-height: 1.1; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block; margin-top: 0.25rem;
  font-size: 0.8125rem; line-height: 1.4; color: var(--on-navy-muted);
}

/* Framed product screenshot in the hero. `contain` rather than the reference's
   `cover`: our product shot is a multi-device composition, and cropping it cuts
   the phone and tablet off the ends. */
.hero-figure { border: 1px solid rgba(255, 255, 255, 0.25); min-width: 0; background: #fff; }
.hero-figure picture, .hero-figure img {
  display: block; width: 100%; height: 300px;
  object-fit: contain;
}
.hero-figure .hero-cap { background: var(--navy); }
.hero-cap {
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding: 12px 18px;
  font-size: 0.8125rem; line-height: 1.5; color: var(--on-navy-muted);
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-figure picture, .hero-figure img { height: auto; aspect-ratio: 16 / 10; }
}

/* ---------- Featured case: image left, text right ------------------------ */

.plate {
  display: flex; align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
}
.plate-img { flex: 0 0 40%; min-width: 0; border-right: 1px solid var(--border); }
.plate-img picture, .plate-img img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; min-height: 280px;
}
.plate-text {
  flex: 1; min-width: 0; padding: 2.25rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.plate-kicker {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 0.625rem;
}
.plate-text h3 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); margin-bottom: 0.75rem; }
.plate-text p { margin-bottom: 1.125rem; }
.plate-link {
  font-size: 0.875rem; font-weight: 600;
  color: var(--navy); text-decoration: none; align-self: flex-start;
}
.plate-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 780px) {
  .plate { display: block; }
  .plate-img { border-right: 0; border-bottom: 1px solid var(--border); }
  .plate-img picture, .plate-img img { aspect-ratio: 3 / 2; min-height: 0; height: auto; }
  .plate-text { padding: 1.75rem; }
}

/* ---------- The platform card grid ("arch") ------------------------------ */

.arch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.arch-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  padding: 1.625rem 1.5rem;
  text-decoration: none; color: inherit;
  display: block;
  transition: border-color .15s;
}
.arch-row:hover { border-color: var(--navy); border-top-color: var(--teal); }
.arch-idx {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.9375rem; color: var(--teal-ink);
  margin-bottom: 0.625rem;
  font-variant-numeric: tabular-nums;
}
.arch-name {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.125rem; letter-spacing: -0.015em;
  color: var(--text); margin-bottom: 0.5rem;
}
.arch-row:hover .arch-name { color: var(--navy); }
.arch-desc { font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.arch-bar { display: none; }   /* the old progress bars carried no information */

@media (max-width: 900px) { .arch { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .arch { grid-template-columns: 1fr; } }

/* ---------- Segment coverage ("matrix") ---------------------------------- */

.matrix {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.matrix-cell {
  background: var(--surface);
  padding: 1.25rem 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  text-decoration: none;
  transition: background .15s;
}
.matrix-cell:hover { background: var(--ground); }
.matrix-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.8125rem; color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
.matrix-name {
  font-size: 0.875rem; font-weight: 600; line-height: 1.3;
  color: var(--text);
}
.matrix-cell:hover .matrix-name { color: var(--navy); }

@media (max-width: 900px) { .matrix { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .matrix { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards and grids ---------------------------------------------- */

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid > * {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  padding: 1.625rem 1.5rem;
}
.grid h3 { margin-bottom: 0.5rem; }
.grid p { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 0; }
.grid p + p { margin-top: 0.9rem; }
.grid a.card { text-decoration: none; display: block; transition: border-color .15s; }
.grid a.card:hover { border-color: var(--navy); border-top-color: var(--teal); }
.grid a.card:hover h3 { color: var(--navy); }

/* Case-study card: image on top, the teal rail moves between image and text. */
.grid .fig { padding: 0; border-top: 1px solid var(--border); }
/* object-position: top — these are website screenshots, and the top of a page
   identifies it; a centre crop lands on an arbitrary slice of the layout. */
.grid .fig picture, .grid .fig img {
  display: block; width: 100%; height: 190px;
  object-fit: cover; object-position: top; border: 0;
}
.grid .fig figcaption {
  border-top: 3px solid var(--teal);
  padding: 1.375rem 1.375rem 1.5rem;
  margin-top: 0;
  font-size: 0.9375rem; font-weight: 600; color: var(--text);
}

.two-col {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.two-col > .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  padding: 2rem;
}
.two-col > .card h2 { font-size: 1.625rem; margin-bottom: 0.5rem; }
.two-col > .card p:last-child { margin-bottom: 0; }

/* A prose column beside a grid of cells. */
.split {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem; align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 2rem; } }

.types {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.types > * {
  background: var(--ground); padding: 22px 18px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.types a:hover { background: var(--surface); color: var(--navy); }
@media (max-width: 520px) { .types { grid-template-columns: 1fr 1fr; } }

/* Numbered deployment steps inside a card. The number hangs in the left margin
   rather than being a grid cell — a grid would split each <li>'s <strong> and
   its following text into two separate items. */
.steps { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative;
  padding: 18px 0 18px 42px;
  border-top: 1px solid var(--border);
  counter-increment: step;
  font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted);
}
.steps li::before {
  content: "0" counter(step);
  position: absolute; left: 0; top: 18px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.9375rem; line-height: 1.6; color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
.steps strong { display: block; margin-bottom: 4px; }

/* Dark technical panel — key/value spec rows. */
.panel-dark {
  background: var(--navy-deep); color: var(--on-navy);
  padding: 2rem;
}
.panel-dark h2, .panel-dark h3 { color: var(--on-navy); font-size: 1.625rem; margin-bottom: 0.5rem; }
.panel-dark p { color: var(--on-navy-muted); }
.panel-dark a { color: var(--teal-lift); font-weight: 600; }
.spec-rows { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.spec-rows li {
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-navy-soft);
  font-size: 0.9375rem;
}
.spec-rows b { color: var(--teal-lift); font-weight: 600; }
.spec-rows span { text-align: right; color: #E8EEF2; }
@media (max-width: 480px) {
  .spec-rows li { grid-template-columns: 1fr; gap: 4px; }
  .spec-rows span { text-align: left; }
}

/* Row lists — bordered index rows. */
.list-rows {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
}
.list-rows > li + li { border-top: 1px solid var(--border); }
/* Two shapes share this list: rows that are a link, and rows that are not
   (a heading + description pair, as on /demo/). Both get the same padding. */
.list-rows > li > a {
  display: grid; grid-template-columns: minmax(190px, 15rem) 1fr;
  gap: 1.5rem; align-items: baseline;
  padding: 1.125rem 1.5rem;
  text-decoration: none; transition: background .15s;
}
.list-rows > li > strong { display: block; padding: 1.125rem 1.5rem 0.25rem; }
.list-rows > li > span { display: block; padding: 0 1.5rem 1.125rem; }
.list-rows > li > a:hover { background: var(--ground); }
.list-rows strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; color: var(--text); letter-spacing: -0.01em;
}
.list-rows > li > a:hover strong { color: var(--navy); }
.list-rows span { font-size: 0.9375rem; color: var(--text-muted); }
@media (max-width: 700px) {
  .list-rows > li > a { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ---------- Forms (the contact page) ------------------------------------- */

button { font-family: inherit; }
button.btn { cursor: pointer; }

.form {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem var(--gap);
  margin-top: 1.5rem;
}
.field-full, .form-actions, .form-note, .form-error, .form-success { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.field input, .field select, .field textarea {
  display: block; width: 100%;
  font-family: var(--font-body); font-size: 1rem; line-height: 1.4;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.75rem 0.9rem;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 0; border-color: var(--navy);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--navy); }
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-note { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.form-error, .form-success {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  padding: 1.125rem 1.5rem;
}
.form-error p, .form-success p { margin: 0; }
.form-error p + p, .form-success p + p { margin-top: 0.5rem; }
/* The honeypot: off-screen for people, an ordinary field for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 700px) {
  .form { grid-template-columns: 1fr; }
}

/* ---------- Tables -------------------------------------------------------- */

.scroll { overflow-x: auto; margin: 1.75rem 0; }
.scroll .spec { min-width: 620px; margin: 0; }

.spec {
  width: 100%; border-collapse: collapse;
  margin: 1.75rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
}
.spec th, .spec td {
  text-align: left; padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.spec th {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--ground);
}
.spec td { font-size: 0.9375rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.spec td:first-child { font-weight: 600; color: var(--text); }
.spec tr:last-child td { border-bottom: 0; }

/* Code, on the /docs/ pages. System mono stack only — the design allows no
   third typeface, and no code sample is worth another font download. */
code, pre {
  font-family: ui-monospace, 'Cascadia Code', Consolas, Menlo, monospace;
}
code {
  font-size: 0.875em;
  background: var(--ground);
  border: 1px solid var(--border);
  padding: 0.1em 0.4em;
  color: var(--text);
  white-space: nowrap;
}
pre {
  background: var(--navy-deep);
  border-top: 3px solid var(--teal);
  color: var(--on-navy-body);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  overflow-x: auto;
}
pre code {
  background: none; border: 0; padding: 0;
  color: inherit; font-size: 0.875rem; white-space: pre;
}

/* ---------- Feature list (/features/ and the per-page blocks) ------------- */

/* The feature rows are display:grid, which beats the browser's built-in
   [hidden] { display:none } — so hidden must always win explicitly. */
[hidden] { display: none !important; }

.feature-block { margin-top: 3.5rem; }
.feature-group { margin-top: 2.75rem; scroll-margin-top: 130px; }
.feature-group h2, .feature-group h3 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 0 0 0.25rem;
}
.feature-group h3 { font-size: 1.0625rem; }
.feature-group .group-link {
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  white-space: nowrap; color: var(--teal-ink);
}
.group-count {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--teal-ink); margin-left: 0.65rem;
}
.feature-list { list-style: none; margin: 0.5rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.feature-list > li {
  display: grid; grid-template-columns: 300px 1fr; gap: 1rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--border);
}
.feature-list strong { font-size: 0.9375rem; letter-spacing: -0.01em; color: var(--text); font-weight: 600; }
.feature-list span { font-size: 0.9375rem; color: var(--text-muted); }

/* The /features/ page is a deliberately static list (final brief, 03 Sep
   2026): one phase per band, an intro paragraph carrying the argument, the
   list carrying the proof. No search, no script. */
.feature-phase .phase-intro {
  font-size: 1.0625rem; line-height: 1.65;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0.75rem 0 0;
}
@media (max-width: 700px) {
  .feature-list > li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---------- API reference (/docs/api/, generated from the spec) ---------- */

.endpoint {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  padding: 1.5rem 1.75rem 1.75rem; margin: 2rem 0;
}
.endpoint-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.endpoint-head code { font-size: 1rem; white-space: normal; word-break: break-all; }
.prose .endpoint h2 { font-size: 1.25rem; margin: 0.9rem 0 0.4rem; }
.prose .endpoint h3 {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin: 1.75rem 0 0.25rem;
}
.prose .endpoint h3 code { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }
.endpoint .spec { margin: 0.5rem 0 0; }
.endpoint .spec td .muted { display: block; font-weight: 400; font-size: 0.875rem; margin-top: 0.2rem; }
.method {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.08em;
  color: #fff; background: var(--navy);
  padding: 0.3rem 0.6rem; min-width: 64px; text-align: center; vertical-align: middle;
}
.method[data-method="GET"] { background: var(--teal-ink); }
.method[data-method="DELETE"] { background: var(--navy-deep); }
.list-rows .method { margin-right: 0.35rem; }
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.chip {
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-ink); background: var(--ground); border: 1px solid var(--border);
  padding: 0.2rem 0.55rem;
}

/* The lifecycle table: teal 800 number / 600 stage / muted description. */
.lifecycle td:first-child {
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.9375rem; color: var(--teal-ink);
  width: 80px; padding-right: 0;
}
.lifecycle td:nth-child(2) {
  font-weight: 600; color: var(--text);
  width: 190px; font-size: 0.96875rem;
}
@media (max-width: 700px) {
  .lifecycle td:first-child { width: 56px; }
  .lifecycle td:nth-child(2) { width: auto; }
  .spec th, .spec td { padding: 0.875rem 1rem; }

  /* A table cannot lay out narrower than its min-content width, so at 360px
     these push the whole page sideways. Give each one its own scroll container
     instead — the cut-off border is the affordance. */
  .spec { display: block; overflow-x: auto; }
  .spec > tbody { display: table; width: 100%; min-width: 430px; }
  /* …except one already sitting inside .scroll, which would nest two of them. */
  .scroll .spec { display: table; overflow-x: visible; }
  .scroll .spec > tbody { display: table-row-group; min-width: 0; }
}

/* ---------- Figures ------------------------------------------------------- */

.fig { margin: 0; }
.fig picture, .fig img { display: block; width: 100%; }
.fig img { border: 1px solid var(--border); background: var(--surface); }
.fig figcaption {
  font-size: 0.875rem; color: var(--text-muted);
  margin-top: 0.75rem;
}
/* A line diagram, not a photograph: no frame, and never cropped. */
.fig-plain { margin: 0 0 2rem; max-width: 700px; }
.fig-plain img { border: 0; background: none; height: auto; object-fit: contain; }
.section-tight .fig img { max-height: 440px; object-fit: cover; }
.prose .fig { margin: 2.25rem 0; }
.prose .fig img { max-height: 480px; object-fit: cover; }

/* ---------- Logo walls ---------------------------------------------------- */

/* Cell rules are drawn per-cell, not with a 1px gap over a coloured container:
   the logo count rarely fills the last row, and a gap-lined container leaves
   the empty remainder as a grey block. */
.logo-wall {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  background: var(--surface);
  border: 1px solid var(--border);
}
.logo-wall li {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 -1px -1px 0;
  display: flex; align-items: center; justify-content: center;
  /* Square cells: every customer logo is a 200x200 canvas with the mark
     letterboxed inside it, so the square is the logo's own shape. */
  aspect-ratio: 1; padding: 0.625rem;
}
.logo-wall img {
  /* Fill the cell. Because the sources are square, height and width bind at
     the same moment — any cap below 100% shrinks every mark equally, which is
     what used to leave them small. The whitespace around each mark is baked
     into the file, so it supplies its own breathing room. */
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  /* Full opacity: on the white band, dimming these on top of grayscale left
     several of the lighter marks close to invisible. */
  filter: grayscale(1); opacity: 1;
  transition: filter .18s;
}
.logo-wall li:hover img { filter: grayscale(0); }

/* Customers whose logo file we do not have, set as a wordmark. Deliberately
   quieter than a real logo so the wall does not look broken where one is
   missing — it reads as a name, not as a failed image. */
.logo-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.9375rem; line-height: 1.25;
  letter-spacing: -0.01em; text-align: center; text-wrap: balance;
  color: var(--text-muted);
}
.logo-wall li:hover .logo-name { color: var(--navy); }
/* The partner logos are 574x279 landscape, not squares — a square cell would
   just add empty space above and below each one. */
.logo-wall-lg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.logo-wall-lg li { aspect-ratio: 16 / 9; }

/* ---------- FAQ ----------------------------------------------------------- */

/* The group supplies the horizontal padding; rows inside it are vertical only. */
.faq { background: var(--surface); border: 1px solid var(--border); }
.faq-group { padding: 1.625rem 1.75rem; }
.faq-group + .faq-group { border-top: 1px solid var(--border); }
.faq-group > h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.faq-group > h3 { margin-bottom: 0.5rem; }
.faq-group p:last-child { margin-bottom: 0; }
.faq details { border-top: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.125rem 2.5rem 1.125rem 0; position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; color: var(--text); letter-spacing: -0.015em;
}
.faq summary:hover { color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.5rem; top: 1rem;
  font-family: var(--font-display); font-weight: 700;
  color: var(--teal-ink); font-size: 1.25rem; line-height: 1.2;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > *:not(summary) { padding: 0 2.5rem 1.25rem 0; margin-bottom: 0; }

/* ---------- Footer -------------------------------------------------------- */

.site-foot {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding-block: clamp(2.75rem, 5vw, 3.5rem) 0;
  margin-top: 0;
}
.foot-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.foot-logo {
  display: block; height: 30px; width: auto;
  background: #fff; padding: 5px 10px;
  margin-bottom: 1.25rem;
  box-sizing: content-box;
}
.foot-grid h4 {
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-lift); margin: 0 0 0.875rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 0.5rem; }
.foot-grid a {
  font-size: 0.875rem; color: var(--on-navy-body); text-decoration: none;
}
.foot-grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-grid address {
  font-style: normal; font-size: 0.90625rem;
  line-height: 1.8; color: var(--on-navy-muted);
}
.foot-grid address a { color: var(--on-navy-muted); }
.foot-base {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  justify-content: space-between;
  padding: 1.125rem 0;
  border-top: 1px solid var(--rule-navy-soft);
  font-size: 0.8125rem; color: var(--on-navy-faint);
}
.foot-base a { color: var(--on-navy-faint); }
.foot-base a:hover { color: #fff; }

@media (max-width: 860px) {
  .foot-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
}

/* A button that has to sit in a run of footer links and read as one of them. */
.link-btn {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--on-navy-faint);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: #fff; }

/* ---------- Cookie consent ------------------------------------------------ */

.consent {
  position: fixed; z-index: 100;
  right: var(--gutter); bottom: var(--gutter);
  width: min(380px, calc(100vw - 2 * var(--gutter)));
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  padding: 1.5rem 1.625rem 1.625rem;
}
.consent[hidden] { display: none; }
.consent h2 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.consent p { font-size: 0.9375rem; line-height: 1.55; margin-bottom: 0; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.25rem; }
.consent-actions .btn { padding: 11px 22px; font-size: 0.9375rem; }
.consent-more { margin-top: 1rem; font-size: 0.875rem; }

@media (max-width: 520px) {
  .consent { right: 0; bottom: 0; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; }
  .consent-actions .btn { flex: 1 1 auto; text-align: center; }
}