/* ==========================================================================
   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 {
  --page:        #FFFFFF;   /* page background (white since 5 Sep 2026) */
  /* --ground was the page background until the page went white. It stays as the
     recessed fill — code blocks, chips, table stripes, hover states — which
     still needs to sit a shade below white to read. */
  --ground:      #F5F7F8;   /* recessed fill */
  --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(--page);
  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); }
/* `strong, b` sets a near-black, which is invisible on any of the navy grounds.
   No dark band carried bold body copy until /why-auction-experts/ did. */
.band-dark strong, .band-dark b,
.panel-dark strong, .panel-dark b { color: #fff; }
.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; }

/* The two plan names on /pricing/ are h2 because they are the first headings
   under the h1 — as h3 they skipped a level, which is the one heading error on
   the site. They are sized like an h3 because that is what they should look
   like; the level is about structure, not about how big the text is. */
.plan-h { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.25; }

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;
}

/* The trail is authored as a <p> and rewritten to <nav><ol> by the breadcrumbs
   transform in eleventy.config.js, so both shapes are styled here — identically.
   The separator used to be a literal " / " in the markup; as list items it has
   to be drawn, which is what the ::before does. */
.crumbs {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-muted); margin: 0 0 1.25rem;
}
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
}
.crumbs li + li::before { content: "/"; margin: 0 0.34em; }
.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; }
/* 36px, not 30 (Orhan, 5 Sep 2026). The wordmark carries a strapline, so the
   readable part is only the top two thirds of whatever height this is set to.
   36px is the ceiling that still clears the nav at 1024px, the tightest width
   where the desktop menu is shown: the logo is 1019x168, so each extra pixel of
   height costs 6.07px of width, and there are 72px of slack there. */
.brand-logo { height: 36px; 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; }
/* Links and section buttons have to lay out identically, or they do not line up
   (Orhan, 5 Sep 2026: "Product is higher than the next"). An inline <a> is
   measured by the font's content area, ~20px here; an inline-flex <button> is
   measured by its line box, 23.1px at the inherited line-height of 1.65. That
   put the button labels 1.8px high and their underline 1.2px low. Giving both
   the same display and an explicit line-height makes the two boxes identical,
   so the row's align-items:center lands them on the same pixel. */
.site-nav > ul > li > a,
.site-nav > ul > li > .nav-top {
  display: inline-flex; align-items: center; gap: 0.34rem;
  font-size: 0.875rem; font-weight: 500; line-height: 1.5;
  color: var(--text-muted); text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-nav > ul > li > a:hover,
.site-nav > ul > li > .nav-top:hover { color: var(--navy); }
/* The button carries the section state as a class; aria-current="page" would be
   a lie on a control that does not go anywhere. */
.site-nav > ul > li > a[aria-current="page"],
.site-nav > ul > li > .nav-top.is-section {
  color: var(--navy); font-weight: 600; border-bottom-color: var(--teal);
}

/* A button that has to sit in a row of nav links and read as one of them. The
   box itself comes from the shared rule above; this only undoes the chrome a
   <button> arrives with. */
.nav-top {
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: inherit;
  padding: 0 0 2px; cursor: pointer;
}
.chev { opacity: 0.55; transition: transform .18s; }

/* Scoped past `.site-nav > ul > li > a`, which is more specific than a bare
   .nav-cta and was overriding the shorthand's padding-bottom back to 2px — so
   the button carried 10px above the label and 2px below it. The underline the
   other items use is dropped rather than made transparent: it is inside the
   navy box, where 2px of border would reintroduce the same lopsidedness. */
.site-nav > ul > li > a.nav-cta {
  background: var(--navy); color: #fff;
  padding: 0.625rem 1.25rem; font-weight: 600;
  border-bottom: 0;
  transition: background .15s;
}
.site-nav > ul > li > a.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 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
}
.mega-cols { display: flex; }
.has-menu:hover .mega,
.has-menu:focus-within .mega,
.nav-top[aria-expanded="true"] + .mega { opacity: 1; visibility: visible; }
.has-menu:hover .chev,
.has-menu:focus-within .chev,
.nav-top[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* The section's own page, first thing in the panel. It used to be the top-level
   item itself, which read as a label rather than a link and was missed. */
.mega-lead {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.9rem 1.875rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem; font-weight: 600;
  color: var(--navy); text-decoration: none; white-space: nowrap;
}
.mega-lead svg { opacity: 0.5; flex: none; }
.mega-lead:hover { background: var(--ground); text-decoration: underline; text-underline-offset: 3px; }
.mega-lead:hover svg { opacity: 1; }
.mega-lead[aria-current="page"] { border-left: 3px solid var(--teal); padding-left: calc(1.875rem - 3px); }

.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,
  .site-nav > ul > li > .nav-top {
    display: block; width: 100%; text-align: left;
    padding: 0.85rem 0; border-bottom: none;
  }
  /* Every panel is open here, so the button is only a heading for the group
     below it — and the section's own page is the first link in that group. */
  .site-nav > ul > li > .nav-top { cursor: default; color: var(--text); font-weight: 600; }
  /* Restated at the specificity the desktop CTA rule now carries, so the stacked
     menu keeps the full-width row it already had. */
  .site-nav > ul > li > a.nav-cta { padding: 0.85rem 0; }
  .nav-cta { margin: 0.8rem 0; }
  .chev { display: none; }

  .mega {
    position: static; opacity: 1; visibility: visible;
    padding-top: 0; transition: none;
  }
  .mega-inner { border: 0; background: transparent; }
  .mega-cols { display: block; }
  .mega-lead {
    padding: 0 0 0.7rem 1rem; border-bottom: 0;
    justify-content: flex-start; gap: 0.5rem; white-space: normal;
  }
  .mega-lead:hover { background: none; }
  .mega-lead[aria-current="page"] { border-left: 0; padding-left: 1rem; }
  .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 strong, .hero b { color: #fff; }
.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); background: var(--surface); }
/* `contain`, so the whole picture is shown: this panel is as tall as the text
   beside it, which is not the shape of the photograph. */
.plate-img picture, .plate-img img {
  display: block; width: 100%; height: 100%; max-height: none;
  object-fit: contain; 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); }
/* A square box with `contain` rather than a 190px strip with `cover`: the strip
   showed the top sixth of a full-page screenshot. The fixed aspect keeps the
   three cards level whatever shape a future screenshot is, and `contain` means
   nothing is cut — it letterboxes instead. */
.grid .fig picture { display: block; }
.grid .fig img {
  display: block; width: 100%; height: auto; max-height: none;
  aspect-ratio: 1; object-fit: contain;
  background: none; 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); }
/* Six cells read 3 + 3; the default four leaves a widowed pair on the second row. */
.types.is-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .types, .types.is-three { 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 ------------------------------------------------------- */

/* Figures are never cropped (5 Sep 2026). They used to be `width: 100%` with a
   max-height and `object-fit: cover`, which forced every image into a landscape
   box and sliced off whatever did not fit — 12% of a wide photo, but 72% of the
   portrait API diagram and about three quarters of the phone screenshots, which
   are the images that carry the most information.

   The cap is on height instead of width, and there is no object-fit, so an
   image is only ever scaled, never cut: a wide screenshot still fills the
   column, and a tall one shrinks and centres rather than being sliced. The
   consequence to know about is that a source narrower than the column now
   renders at its own width instead of being stretched up to fill it — sharper,
   but no longer edge to edge. */
.fig { margin: 0; }
.fig picture { display: block; }
.fig img {
  display: block;
  /* There is deliberately no `width` here. The image pipeline stamps a width
     attribute, which is only a presentational hint — any author `width` rule
     overrides it. Leaving it alone caps every picture at its own pixel width,
     so a source narrower than the column is shown at its true size instead of
     being stretched up and going soft. max-width keeps the big ones in.

     `height: auto` with a `max-height` then squashes the BOX rather than
     scaling it, which on its own would distort the picture — `object-fit:
     contain` is what stops that: the picture keeps its aspect ratio inside the
     box and the leftover space is empty. With no border and no background that
     empty space is invisible, so a tall image simply reads as centred. */
  max-width: 100%;
  height: auto; max-height: 560px;
  object-fit: contain;
  margin-inline: auto;
  border: 0; background: none;
}
.fig figcaption {
  font-size: 0.875rem; color: var(--text-muted);
  margin-top: 0.75rem;
}
/* A line diagram, not a photograph: no frame. */
.fig-plain { margin: 0 0 2rem; max-width: 700px; }
.fig-plain img { border: 0; background: none; }
.prose .fig { margin: 2.25rem 0; }

/* ---------- 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. */
/* ── Live bids panel (homepage) ──────────────────────────────────────────
   Passive listener on a customer engine (assets/bidfeed.js). A compact panel
   docked to the right, out of the page flow, hidden until the first bid.
   Enterprise Grid: teal top rail, hairline borders, no radius, no shadow.
   New rows animate open from zero height and push the rest down. */
.lb-dock {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  display: flex; gap: 0.9rem; align-items: flex-end;
}
.lb-panel {
  width: 328px; max-height: 78vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
}
.lb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.5rem 0.35rem 0.85rem;
}
.lb-live {
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-ink);
}
.lb-total { font-size: 0.75rem; color: var(--text-muted); }
.lb-count { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.lb-actions { display: inline-flex; gap: 0.1rem; }
.lb-btn {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  cursor: pointer; width: 1.5rem; height: 1.5rem; padding: 0; line-height: 1;
  font-family: inherit; font-size: 1.15rem; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.lb-btn:hover { color: var(--navy); background: var(--ground); }
.lb-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
/* Minimized: only the title bar remains. */
.lb-panel.lb-collapsed { max-height: none; }
.lb-panel.lb-collapsed .lb-head { padding-bottom: 0.5rem; }
.lb-panel.lb-collapsed .lb-sub,
.lb-panel.lb-collapsed .lb-list,
.lb-panel.lb-collapsed .lb-empty { display: none; }
.lb-dot {
  display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.3em;
  background: #d64545; border-radius: 50%; vertical-align: middle;
  animation: lb-pulse 1.6s ease-in-out infinite;
}
.lb-sub {
  margin: 0; padding: 0 0.85rem 0.55rem; font-size: 0.75rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.lb-list { overflow-y: auto; overscroll-behavior: contain; }
.lb-empty { margin: 0; padding: 1.1rem 0.85rem; font-size: 0.8125rem; color: var(--text-muted); }

.lb-row {
  display: grid; grid-template-columns: 44px 1fr; gap: 0.65rem; align-items: start;
  padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  /* max-height animates the row open; the ones below get pushed down. */
  max-height: 92px; overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: var(--ground); }
.lb-row:hover .lb-title { color: var(--teal-ink); }
.lb-row.lb-enter { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.lb-thumb { width: 44px; height: 44px; object-fit: cover; background: var(--ground); display: block; }
.lb-thumb-empty { background: var(--border); }
.lb-body { min-width: 0; }
/* Title gets the full width of its column, on its own line. */
.lb-title {
  display: block; font-size: 0.8125rem; line-height: 1.3; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-title b { color: var(--teal-ink); font-weight: 700; }
/* Bid count on the left, current price on the right, on the line below the title. */
.lb-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem; margin-top: 0.25rem;
}
.lb-meta { font-size: 0.75rem; color: var(--text-muted); }
.lb-price { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--navy); white-space: nowrap; }
.lb-flash { animation: lb-flash 1.1s ease-out; }
@keyframes lb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes lb-flash { from { background: var(--teal-wash, #e5f0f3); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .lb-dot { animation: none; }
  .lb-flash { animation: none; }
  .lb-row { transition: none; }
}
/* One panel, docked to the right; hidden on small screens where it would cover
   content. */
@media (max-width: 760px) { .lb-dock { display: none; } }

.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; }
}

/* ---------- Bid engine hero ----------------------------------------------
   Implements design_handoff_bid_engine_hero on /product/features/bid-engine/.
   The one section on the site that argues by feel rather than by copy: three
   lot cards and a ticker, moving, so "real-time" is demonstrated before it is
   claimed. Everything is decorative — see assets/bid-engine.js.

   Deviations from the handoff, both deliberate:
     - Poppins/Source Sans 3 are mapped onto the site's self-hosted Archivo and
       IBM Plex Sans. No visitor request may reach Google's font hosts —
       tools/verify.js fails the build on it — and a fourth typeface for one
       section is not worth 250 KB.
     - The content sits in a --max container instead of running to the viewport
       edge, so the cards line up with every other band on the site. The ticker
       stays full-bleed, which is what a ticker should do.
   Colours, spacing, radii, copy and timings are the handoff's, unchanged.
   Classes are prefixed .aebe- and self-contained; nothing here leaks out.
   -------------------------------------------------------------------------- */

.aebe-hero {
  --navy-deep: #0d2635;
  --navy-card: #16374a;
  --teal: #4a9db8;
  --green: #3fae8a;
  --red: #e8194b;
  --yellow: #f5c51c;
  --text: #f4f8fa;
  --text-soft: #b8ccd6;
  --text-mute: #9fbecb;

  position: relative;
  overflow: hidden;
  padding-block: 0;               /* overrides the global section rhythm */
  background: linear-gradient(115deg, #132f41 0%, #0d2635 55%, #0b2130 100%);
  color: var(--text);
}
.aebe-hero + section { border-top: 0; }
.aebe-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 72% 30%, rgba(74, 157, 184, 0.14), transparent 70%);
  pointer-events: none;
}
.aebe-hero * { margin: 0; }

.aebe-inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 460px 1fr;
  /* The handoff's 620px is the whole band. The ticker is a sibling here rather
     than a grid row, so it comes off the top: 620 − ~52px of ticker. */
  min-height: 568px;
}

@keyframes aebe-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 25, 75, 0.55); }
  55%      { box-shadow: 0 0 0 9px rgba(232, 25, 75, 0); }
}
@keyframes aebe-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aebe-chip {
  0%   { opacity: 0; transform: translateY(14px); }
  6%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  34%  { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes aebe-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes aebe-bar  { 0% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0.35); } }

/* Left column ------------------------------------------------------------- */

.aebe-message {
  position: relative;
  padding: 72px 24px 48px 0;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.aebe-message .crumbs { color: #7ba2b5; margin: 0; }
.aebe-message .crumbs a { color: #7ba2b5; }
.aebe-message .crumbs a:hover { color: #fff; }

.aebe-eyebrow { display: flex; align-items: center; gap: 10px; }
.aebe-live-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--red); animation: aebe-pulse 2.2s ease-out infinite;
}
.aebe-eyebrow span:last-child {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: 0.22em; color: var(--teal);
}
.aebe-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 1.18; letter-spacing: -0.01em; color: #fff;
}
.aebe-sub { font-size: 19px; line-height: 1.6; color: var(--text-soft); max-width: 380px; text-wrap: pretty; }
.aebe-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; font-size: 15px; font-weight: 600; }
.aebe-legend > div { display: flex; align-items: center; gap: 10px; color: #cfe0e8; }
.aebe-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }

/* Lot cards --------------------------------------------------------------- */

.aebe-scene { position: relative; padding: 64px 0 32px 24px; display: flex; align-items: center; }
.aebe-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; width: 100%; align-items: stretch; }
.aebe-card {
  background: var(--navy-card); border-radius: 14px; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.aebe-card--highest  { border: 1px solid rgba(63, 174, 138, 0.6); }
.aebe-card--overbid  { border: 1px solid rgba(232, 25, 75, 0.65); transform: translateY(-16px); }
.aebe-card--extended { border: 1px solid rgba(245, 197, 28, 0.55); }
.aebe-card-head { display: flex; justify-content: space-between; align-items: center; }
.aebe-lotno { font-size: 13px; letter-spacing: 0.14em; color: #7ba2b5; font-weight: 700; }
.aebe-badge { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; }
.aebe-badge--highest  { color: #0d2635; background: var(--green); }
.aebe-badge--overbid  { color: #fff;    background: var(--red); }
.aebe-badge--extended { color: #0d2635; background: var(--yellow); }
.aebe-price {
  font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #fff;
  font-variant-numeric: tabular-nums;
}
.aebe-note { font-size: 14px; color: var(--text-mute); }
.aebe-note--overbid  { color: #f2a5ba; }
.aebe-note--extended { color: #e6d49a; }
.aebe-reserve { align-self: flex-start; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.aebe-reserve--met   { color: var(--green); border: 1px solid rgba(63, 174, 138, 0.5); }
.aebe-reserve--under { color: var(--text-mute); border: 1px solid rgba(159, 190, 203, 0.4); }
.aebe-bars { display: flex; gap: 4px; align-items: flex-end; height: 26px; margin-top: auto; }
.aebe-bars span {
  width: 6px; height: 100%; background: var(--green); border-radius: 2px;
  transform-origin: bottom; animation: aebe-bar 1.8s ease-in-out infinite;
}
.aebe-bars span:nth-child(2) { animation-delay: 0.3s; opacity: 0.75; }
.aebe-bars span:nth-child(3) { animation-delay: 0.6s; opacity: 0.5; }
.aebe-bars span:nth-child(4) { animation-delay: 0.9s; opacity: 0.35; }
.aebe-cta { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--red); display: flex; align-items: center; gap: 8px; }
.aebe-cta i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--red); animation: aebe-pulse 1.6s ease-out infinite; }
.aebe-extend-flash { font-weight: 700; color: var(--yellow); animation: aebe-glow 1.8s ease-in-out infinite; }

/* Floating notifications -------------------------------------------------- */

.aebe-chips { position: absolute; right: 0; top: 26px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.aebe-chips div {
  background: rgba(13, 38, 53, 0.92); border-radius: 10px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: #cfe0e8;
  opacity: 0; animation: aebe-chip 12s ease-in-out infinite;
}
.aebe-chips div:nth-child(1) { border: 1px solid rgba(74, 157, 184, 0.5); }
.aebe-chips div:nth-child(2) { border: 1px solid rgba(232, 25, 75, 0.5); animation-delay: 4s; }
.aebe-chips div:nth-child(3) { border: 1px solid rgba(245, 197, 28, 0.5); animation-delay: 8s; }

/* Ticker — full bleed, unlike the rest of the section --------------------- */

.aebe-ticker {
  position: relative;
  border-top: 1px solid rgba(74, 157, 184, 0.25);
  background: rgba(9, 26, 37, 0.85);
  overflow: hidden; padding: 14px 0;
}
.aebe-ticker-track {
  display: flex; gap: 48px; width: max-content;
  animation: aebe-ticker 32s linear infinite;
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.aebe-ticker-track > span { color: var(--text-mute); display: inline-flex; align-items: center; gap: 8px; }
.aebe-thumb {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1px solid rgba(159, 190, 203, 0.35);
  flex: none; object-fit: cover; display: inline-block;
}
.aebe-up { color: var(--green); }
.aebe-out { color: var(--red); }
.aebe-ext { color: var(--yellow); }
.aebe-close { color: var(--teal); }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1100px) {
  .aebe-inner { grid-template-columns: 1fr; min-height: 0; }
  .aebe-message { padding: 56px 0 8px; }
  .aebe-scene { padding: 32px 0 48px; }
  .aebe-chips { display: none; }
  .aebe-sub { max-width: none; }
}
@media (max-width: 760px) {
  .aebe-cards { grid-template-columns: 1fr; }
  .aebe-card--overbid { transform: none; }
  .aebe-hero h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .aebe-hero *, .aebe-hero *::before { animation: none !important; }
}

/* ---------- Timed auction hero -------------------------------------------
   Implements design_handoff_dashboard_hero on /product/solution/timed-auction-software/.
   Sister section to the bid-engine hero above: six lot cards counting down and
   taking bids, so a timed sale is felt before it is described. All decorative —
   see assets/dashboard-hero.js.

   Deviations from the handoff, all deliberate:
     - Poppins/Source Sans 3 map onto the site's self-hosted Archivo and IBM
       Plex Sans, as in the bid-engine hero. tools/verify.js fails the build on
       any request to Google's font hosts.
     - The content sits in a --max container rather than running to the viewport
       edge, so the cards line up with every other band on the site.
     - The card photo is a real <img> inside .aeid-photo, not a CSS
       background-image. eleventy.config.js rewrites <img> into <picture> and
       then deletes the untouched originals from _site — a background-image
       would point at a file the build has removed. It also gives each photo
       alt text, which verify.js requires.
   Colours, spacing, radii, copy and timings are the handoff's, unchanged.
   Classes are prefixed .aeid- and self-contained; nothing here leaks out.
   -------------------------------------------------------------------------- */

.aeid-hero {
  --navy-deep: #0d2635;
  --navy-card: #16374a;
  --teal: #4a9db8;
  --green: #3fae8a;
  --red: #e8194b;
  --yellow: #f5c51c;
  --text: #f4f8fa;
  --text-soft: #b8ccd6;
  --text-mute: #9fbecb;

  position: relative;
  overflow: hidden;
  padding-block: 0;               /* overrides the global section rhythm */
  background: linear-gradient(115deg, #132f41 0%, #0d2635 55%, #0b2130 100%);
  color: var(--text);
}
.aeid-hero + section { border-top: 0; }
.aeid-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 72% 30%, rgba(74, 157, 184, 0.14), transparent 70%);
  pointer-events: none;
}
.aeid-hero * { margin: 0; }
/* The global focus ring is navy, which is this band's own background. */
.aeid-hero :focus-visible { outline-color: var(--teal-lift); }

.aeid-inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 440px 1fr;
  min-height: 620px;
}

@keyframes aeid-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 25, 75, 0.55); }
  55%      { box-shadow: 0 0 0 9px rgba(232, 25, 75, 0); }
}
@keyframes aeid-flash {
  0%   { box-shadow: 0 0 0 3px rgba(122, 205, 232, 0.85), 0 12px 32px rgba(0, 0, 0, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(122, 205, 232, 0),    0 12px 32px rgba(0, 0, 0, 0.35); }
}

/* Left column ------------------------------------------------------------- */

.aeid-message {
  position: relative;
  padding: 72px 24px 48px 0;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.aeid-message .crumbs { color: #7ba2b5; margin: 0; }
.aeid-message .crumbs a { color: #7ba2b5; }
.aeid-message .crumbs a:hover { color: #fff; }

.aeid-eyebrow { display: flex; align-items: center; gap: 10px; }
.aeid-live-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--red); animation: aeid-pulse 2.2s ease-out infinite;
}
.aeid-eyebrow span:last-child {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: 0.22em; color: var(--teal);
}
.aeid-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 1.18; letter-spacing: -0.01em; color: #fff;
}
.aeid-sub  { font-size: 19px; line-height: 1.6; color: var(--text-soft); max-width: 360px; text-wrap: pretty; }
.aeid-sub2 { font-size: 17px; line-height: 1.6; color: var(--text-soft); max-width: 360px; text-wrap: pretty; }

/* Dashboard grid ---------------------------------------------------------- */

.aeid-scene { position: relative; padding: 56px 0 56px 24px; display: flex; align-items: center; }
.aeid-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; width: 100%; }
.aeid-card {
  background: var(--navy-card); border-radius: 14px; padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(159, 190, 203, 0.35);
}
.aeid-card.is-win   { border-color: rgba(63, 174, 138, 0.6); }
.aeid-card.is-over  { border-color: rgba(232, 25, 75, 0.65); }
.aeid-card.is-ext   { border-color: rgba(245, 197, 28, 0.6); }
.aeid-card.is-ended { opacity: 0.65; }
.aeid-card.aeid-flashing { animation: aeid-flash 1.1s ease-out; }

.aeid-photo {
  position: relative; margin: -16px -16px 0;
  height: 104px; border-radius: 13px 13px 0 0;
  overflow: hidden; background: #f4f2ee;
}
/* The image pipeline wraps the <img> in a <picture>, so both need to fill. */
.aeid-photo picture { display: block; height: 100%; }
.aeid-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.aeid-badge {
  position: absolute; right: 8px; top: 8px;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.aeid-badge.is-win   { color: var(--navy-deep); background: var(--green); }
.aeid-badge.is-over  { color: #fff;             background: var(--red); }
.aeid-badge.is-ext   { color: var(--navy-deep); background: var(--yellow); }
.aeid-badge.is-ended { color: var(--navy-deep); background: var(--text-mute); }

.aeid-heart {
  position: absolute; left: 8px; top: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 38, 53, 0.75); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  color: #cfe0e8; border: 0; padding: 0; cursor: pointer;
}
.aeid-heart svg { fill: none; }
.aeid-heart.is-fav { color: var(--red); }
.aeid-heart.is-fav svg { fill: var(--red); }

.aeid-lotno { font-size: 11px; letter-spacing: 0.12em; color: #7ba2b5; font-weight: 700; }
.aeid-title { font-size: 14px; font-weight: 600; color: #cfe0e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aeid-pricerow { display: flex; align-items: baseline; gap: 8px; }
.aeid-price { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; }
.aeid-delta { font-size: 13px; font-weight: 700; color: var(--green); }
.aeid-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-mute); }
.aeid-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: #cfe0e8;
}
.aeid-time.is-urgent { color: var(--red); }
.aeid-time.is-ext    { color: var(--yellow); }
.aeid-time.is-ended  { color: var(--text-mute); }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1100px) {
  .aeid-inner { grid-template-columns: 1fr; min-height: 0; }
  .aeid-message { padding: 56px 0 8px; }
  .aeid-scene { padding: 32px 0 48px; }
  .aeid-sub, .aeid-sub2 { max-width: none; }
}
@media (max-width: 860px) { .aeid-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .aeid-grid { grid-template-columns: 1fr; }
  .aeid-hero h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .aeid-hero *, .aeid-hero *::before { animation: none !important; }
}

/* ---------- Live auction hero --------------------------------------------
   Implements design_handoff_live_auction_hero on /product/solution/live-auction-software/.
   Third of the sister heroes: the auctioneer on video, one lot under the
   hammer, and bids from the room, online, the phones and left in advance
   landing in a single history. All decorative — see assets/live-auction-hero.js.

   The same three deviations as the two heroes above, for the same reasons:
   the handoff's Poppins/Source Sans 3 map onto the site's self-hosted Archivo
   and IBM Plex Sans; the content sits in a --max container while the lot strip
   stays full bleed, as the bid-engine ticker does; and every photograph is a
   real <img> rather than a CSS background, because the build deletes the
   originals once the image pipeline has rewritten the <img> tags.
   Colours, spacing, radii, copy and timings are the handoff's, unchanged.
   Classes are prefixed .aela- and self-contained; nothing here leaks out.
   -------------------------------------------------------------------------- */

.aela-hero {
  --navy-deep: #0d2635;
  --navy-card: #16374a;
  --teal: #4a9db8;
  --green: #3fae8a;
  --red: #e8194b;
  --yellow: #f5c51c;
  --text: #f4f8fa;
  --text-soft: #b8ccd6;
  --text-mute: #9fbecb;

  position: relative;
  overflow: hidden;
  padding-block: 0;               /* overrides the global section rhythm */
  background: linear-gradient(115deg, #132f41 0%, #0d2635 55%, #0b2130 100%);
  color: var(--text);
}
.aela-hero + section { border-top: 0; }
.aela-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 72% 30%, rgba(74, 157, 184, 0.14), transparent 70%);
  pointer-events: none;
}
.aela-hero * { margin: 0; }
.aela-hero :focus-visible { outline-color: var(--teal-lift); }

.aela-inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  /* 380px rather than the handoff's 420px: inside a 1160px container the wider
     column starves the bid history, whose rows need ~280px to stay on one line. */
  grid-template-columns: 380px 1fr;
  /* The handoff's 660px is the whole band. The lot strip is a sibling here
     rather than a grid row, so it comes off the top: 660 − ~62px of strip. */
  min-height: 598px;
}

@keyframes aela-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 25, 75, 0.55); }
  55%      { box-shadow: 0 0 0 9px rgba(232, 25, 75, 0); }
}
@keyframes aela-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes aela-row {
  0%   { opacity: 0; transform: translateY(-8px); background: rgba(74, 157, 184, 0.3); }
  40%  { opacity: 1; transform: translateY(0); }
  100% { background: rgba(74, 157, 184, 0); }
}

/* Left column ------------------------------------------------------------- */

.aela-message {
  position: relative;
  padding: 64px 24px 32px 0;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.aela-message .crumbs { color: #7ba2b5; margin: 0; }
.aela-message .crumbs a { color: #7ba2b5; }
.aela-message .crumbs a:hover { color: #fff; }

.aela-eyebrow { display: flex; align-items: center; gap: 10px; }
.aela-live-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--red); animation: aela-pulse 2.2s ease-out infinite;
}
.aela-eyebrow span:last-child {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: 0.22em; color: var(--teal);
}
.aela-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 1.18; letter-spacing: -0.01em; color: #fff;
}
.aela-sub  { font-size: 18px; line-height: 1.6; color: var(--text-soft); max-width: 340px; text-wrap: pretty; }
.aela-sub2 { font-size: 16px; line-height: 1.6; color: var(--text-soft); max-width: 340px; text-wrap: pretty; }

/* The lot under the hammer ------------------------------------------------ */

.aela-scene {
  position: relative;
  padding: 48px 0 20px 24px;
  display: grid; gap: 16px; align-content: center;
  /* The handoff's 1.35 / 0.67 split, with a floor under the side column: below
     ~280px the bid-history rows wrap and the module falls apart. */
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.67fr);
}
.aela-lot { display: flex; flex-direction: column; min-width: 0; }
.aela-lot-visual {
  position: relative; overflow: hidden;
  /* 264px in the handoff. Growing it takes up the slack the taller side column
     would otherwise leave as dead space under the lot bar. */
  min-height: 264px; flex: 1 1 auto;
  border-radius: 14px 14px 0 0; background: #f4f2ee;
  border: 1px solid rgba(74, 157, 184, 0.3); border-bottom: none;
}
.aela-lot-visual picture { display: block; height: 100%; }
.aela-lot-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aela-hammer {
  position: absolute; left: 12px; top: 12px;
  background: rgba(13, 38, 53, 0.85); border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--yellow);
}
.aela-lot-bar {
  background: var(--navy-card);
  border: 1px solid rgba(74, 157, 184, 0.3); border-radius: 0 0 14px 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.aela-lot-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.aela-lot-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aela-lot-cur { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.aela-lotno { font-size: 11px; letter-spacing: 0.12em; color: #7ba2b5; font-weight: 700; }
.aela-lot-title { font-size: 15px; font-weight: 600; color: #cfe0e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aela-cur-label { font-size: 12px; color: var(--text-mute); }
.aela-cur-amount { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aela-bid-btn {
  display: block; width: 100%; text-align: center;
  font: inherit; font-size: 16px; font-weight: 700;
  color: var(--navy-deep); background: var(--yellow);
  border: 0; border-radius: 8px; padding: 11px 0; cursor: pointer;
  box-shadow: 0 6px 18px rgba(245, 197, 28, 0.25);
}
.aela-bid-btn:hover { background: #ffd83d; }

/* Video, bid history, auctioneer ------------------------------------------ */

.aela-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aela-video {
  position: relative; height: 150px; border-radius: 14px; overflow: hidden;
  background: #091a25; border: 1px solid rgba(74, 157, 184, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.aela-video-img { position: absolute; left: 0; top: 0; bottom: 0; width: 66%; overflow: hidden; }
.aela-video-img picture { display: block; height: 100%; }
.aela-video-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aela-osd {
  position: absolute; right: 8px; top: 30px; bottom: 8px; width: 30%;
  display: flex; flex-direction: column; gap: 3px; justify-content: flex-end;
  pointer-events: none;
}
.aela-osd-price {
  text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); margin-bottom: 2px;
}
.aela-osd-row {
  display: flex; justify-content: space-between; gap: 4px;
  background: rgba(13, 38, 53, 0.75); border-radius: 3px; padding: 2px 5px;
  margin-top: 3px;
}
.aela-osd-row span:first-child { font-size: 6px; font-weight: 700; letter-spacing: 0.04em; color: #7cc3d9; }
.aela-osd-row span:last-child  { font-size: 6px; font-weight: 600; font-variant-numeric: tabular-nums; color: #cfe0e8; }
.aela-badge-live {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(13, 38, 53, 0.85); border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 700; color: #fff; pointer-events: none;
}
.aela-badge-live i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--red); animation: aela-pulse 1.8s ease-out infinite; }
.aela-badge-watch {
  position: absolute; right: 10px; top: 10px;
  background: rgba(13, 38, 53, 0.85); border-radius: 999px; padding: 4px 11px;
  font-size: 11px; font-weight: 700; color: #cfe0e8; pointer-events: none;
}

.aela-panel {
  background: var(--navy-card); border: 1px solid rgba(74, 157, 184, 0.3);
  border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.aela-panel-head { display: flex; justify-content: space-between; align-items: center; }
.aela-panel-head b { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #fff; }
.aela-callout { font-size: 12px; font-weight: 700; color: var(--yellow); animation: aela-glow 1.8s ease-in-out infinite; }
.aela-history { display: flex; flex-direction: column; gap: 7px; }
.aela-row { display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 6px 8px; border: 1px solid transparent; }
.aela-row.is-new { border-color: rgba(74, 157, 184, 0.35); animation: aela-row 1.2s ease-out; }
.aela-tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; border-radius: 999px; padding: 2px 8px; color: var(--navy-deep); }
.aela-who { font-size: 13px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aela-amt { margin-left: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }

.aela-msg-panel {
  background: var(--navy-card); border: 1px solid rgba(74, 157, 184, 0.3);
  border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.aela-msg-panel b { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: #fff; }
.aela-bubble { background: rgba(9, 26, 37, 0.7); border-radius: 10px 10px 10px 3px; padding: 9px 12px; font-size: 13px; line-height: 1.5; color: #cfe0e8; }

/* Coming-up strip — full bleed, unlike the rest of the section ------------- */

.aela-strip {
  position: relative;
  border-top: 1px solid rgba(74, 157, 184, 0.25);
  background: rgba(9, 26, 37, 0.85);
  overflow: hidden;
}
/* The label lines up with the copy above; the queue is deliberately allowed to
   run past the container and off the screen edge, which is the point of it. */
.aela-strip-inner {
  max-width: var(--max); margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 12px;
}
.aela-strip-label { flex: none; font-size: 11px; letter-spacing: 0.12em; font-weight: 700; color: #7ba2b5; }
.aela-queue { display: flex; gap: 10px; align-items: center; min-width: 0; }
.aela-tile {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 6px 12px 6px 6px;
  background: rgba(22, 55, 74, 0.45); border: 1px solid rgba(159, 190, 203, 0.2);
  opacity: 0.8;
}
.aela-tile.is-past { opacity: 0.55; }
.aela-tile.is-now  { background: var(--navy-card); border-color: rgba(245, 197, 28, 0.6); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); opacity: 1; }
.aela-tile.is-next { background: rgba(22, 55, 74, 0.7); border-color: rgba(74, 157, 184, 0.4); opacity: 1; }
.aela-thumb { flex: none; width: 34px; height: 34px; border-radius: 7px; overflow: hidden; background: #f4f2ee; }
.aela-thumb picture { display: block; height: 100%; }
.aela-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aela-tile-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aela-tile-no { font-size: 10px; letter-spacing: 0.1em; font-weight: 700; color: #7ba2b5; }
.aela-tile-label { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--text-mute); }
.aela-tile.is-now  .aela-tile-label { color: var(--yellow); }
.aela-tile.is-next .aela-tile-label { color: #cfe0e8; }

/* Responsive -------------------------------------------------------------- */

/* The copy stacks above the module, but the module keeps its two columns: with
   the full container to itself it has more room here than it did beside the
   copy, not less. It only collapses when the side column can no longer clear
   its 280px floor without squeezing the lot photo to a sliver. */
@media (max-width: 1100px) {
  .aela-inner { grid-template-columns: 1fr; min-height: 0; }
  .aela-message { padding: 56px 0 8px; }
  .aela-scene { padding: 32px 0 24px; }
  .aela-sub, .aela-sub2 { max-width: none; }
}
@media (max-width: 640px) {
  .aela-scene { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .aela-hero h1 { font-size: 32px; }
  .aela-lot-visual { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .aela-hero *, .aela-hero *::before { animation: none !important; }
}

/* ---------- Auctioneer lifecycle hero -------------------------------------
   Implements design_handoff_lifecycle_hero on /product/solution/auctioneer-software/.
   Fourth and last of the sister heroes, and the only static one: seven steps
   around a dashed ring, arguing "one system, whole cycle" in a single picture.
   No script, no motion.

   Deviations from the handoff:
     - Poppins/Source Sans 3 map onto the site's self-hosted Archivo and IBM
       Plex Sans, as in the three heroes above.
     - The container is 1360px rather than the site's 1160px --max. The handoff
       assumes ~1344px of content beside an 840px canvas; inside --max the copy
       column would be 228px. Agreed with Orhan, 5 Sep 2026: this one band runs
       wider, capped so it does not sprawl on a large monitor.
     - The diagram is fluid rather than transform-scaled. The handoff shrinks it
       with `transform: scale()` plus negative margins, which leaves an 840px
       layout box behind — below ~900px that box overflows and the outer labels
       are clipped. Here the canvas is a percentage-positioned box with every
       design pixel expressed as --u (one 840th of its own width), so it always
       fits its column exactly and never needs a magic margin.
     - Below 760px the ring is dropped and the same seven steps stack as a list.
       A seven-node radial diagram with nowrap labels cannot be read on a phone
       at any scale that fits; the steps are the content, the circle is not.
   Colours, spacing, radii, copy and geometry are the handoff's, unchanged.
   Classes are prefixed .aelc- and self-contained; nothing here leaks out.
   -------------------------------------------------------------------------- */

.aelc-hero {
  --navy-deep: #0d2635;
  --navy-card: #16374a;
  --teal: #4a9db8;
  --green: #3fae8a;
  --yellow: #f5c51c;
  --text: #f4f8fa;
  --text-soft: #b8ccd6;
  --text-mute: #9fbecb;

  position: relative;
  overflow: hidden;
  padding-block: 0;               /* overrides the global section rhythm */
  background: linear-gradient(115deg, #132f41 0%, #0d2635 55%, #0b2130 100%);
  color: var(--text);
}
.aelc-hero + section { border-top: 0; }
.aelc-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 72% 40%, rgba(74, 157, 184, 0.14), transparent 70%);
  pointer-events: none;
}
.aelc-hero * { margin: 0; }
.aelc-hero :focus-visible { outline-color: var(--teal-lift); }

.aelc-inner {
  position: relative;
  /* Wider than --max on purpose — see the note above. */
  max-width: 1360px;
  margin-inline: auto;
  padding: 48px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 840px;
  gap: 12px;
  min-height: 660px;
}

/* Left column ------------------------------------------------------------- */

.aelc-message {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  max-width: 480px;
}
.aelc-message .crumbs { color: #7ba2b5; margin: 0; }
.aelc-message .crumbs a { color: #7ba2b5; }
.aelc-message .crumbs a:hover { color: #fff; }

.aelc-eyebrow {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: 0.22em; color: var(--teal);
}
.aelc-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 1.18; letter-spacing: -0.01em; color: #fff;
}
.aelc-sub  { font-size: 19px; line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
.aelc-sub2 { font-size: 17px; line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
.aelc-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; font-size: 15px; font-weight: 600; }
.aelc-legend span { display: flex; align-items: center; gap: 10px; color: #cfe0e8; }
.aelc-legend i { width: 13px; height: 13px; border-radius: 50%; flex: none; border: 2.5px solid var(--teal); }
.aelc-legend .is-yellow i { border-color: var(--yellow); }
.aelc-legend .is-green i { border-color: var(--green); }

/* The cycle --------------------------------------------------------------- */

/* --u is one pixel of the handoff's 840px canvas. Every size below is written
   in the design's own units and multiplied by it, so the whole diagram tracks
   the width of its column without a transform. */
.aelc-cycle {
  position: relative;
  align-self: center;
  width: 100%; max-width: 840px;
  aspect-ratio: 840 / 650;
  container-type: inline-size;
  --u: calc(100cqw / 840);
}
.aelc-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.aelc-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(8 * var(--u)); text-align: center;
}
.aelc-center svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.aelc-center b {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(15 * var(--u)); color: #cfe0e8; line-height: 1.35;
}

.aelc-step {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center;
  width: max-content; max-width: calc(150 * var(--u));
}
.aelc-step.is-col     { flex-direction: column;         gap: calc(8 * var(--u));  text-align: center; }
.aelc-step.is-col-rev { flex-direction: column-reverse; gap: calc(8 * var(--u));  text-align: center; }
.aelc-step.is-row     { flex-direction: row;            gap: calc(10 * var(--u)); text-align: left; }
.aelc-step.is-row-rev { flex-direction: row-reverse;    gap: calc(10 * var(--u)); text-align: right; }

.aelc-node {
  flex: none;
  width: calc(56 * var(--u)); height: calc(56 * var(--u));
  border-radius: 50%; background: var(--navy-card);
  border: max(1px, calc(2 * var(--u))) solid var(--teal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.aelc-node svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.aelc-step.is-yellow .aelc-node { border-color: var(--yellow); }
.aelc-step.is-green  .aelc-node { border-color: var(--green); }

.aelc-step-text { display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
/* In the handoff the label column is sized by the nowrap title's min-content,
   and Archivo is narrower than the Poppins that was measured against — so a
   short title ("2 · Cataloguing") left its description a column too narrow and
   it broke onto a third line.

   The floor goes on the title, not on the column or the box, and both of those
   alternatives are wrong in an instructive way. Widening the box moves the node
   with it, because the box is centred on the position — that pulled step 3
   inside the ring the nodes are supposed to sit outside of. A min-width on the
   column replaces its automatic min-content floor, costing a long title like
   "3 · Bidder approval (KYC)" the width it sets for itself. Raising the title's
   own min-width does neither: the column's min-content becomes the larger of
   this and the title, and the box stays 150 so the node does not move. */
.aelc-step.is-row .aelc-step-title,
.aelc-step.is-row-rev .aelc-step-title { min-width: calc(140 * var(--u)); }
.aelc-step-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(15 * var(--u)); color: #fff; white-space: nowrap;
}
.aelc-step.is-yellow .aelc-step-title { color: var(--yellow); }
.aelc-step-desc { font-size: calc(13 * var(--u)); line-height: 1.4; color: var(--text-mute); text-wrap: balance; }

/* Responsive -------------------------------------------------------------- */

/* The copy stacks above the cycle and centres, as the handoff has it. The
   canvas keeps its full 840px wherever the container still affords it.
   1340px rather than the handoff's 1280: it wrote that for a full-bleed
   section, and inside a 1360px container the copy column is under 410px below
   this — narrow enough that the eyebrow breaks across two lines. */
@media (max-width: 1340px) {
  .aelc-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 0; }
  .aelc-message { max-width: 640px; text-align: center; align-items: center; }
}

/* Below this the ring cannot carry seven nowrap labels at a readable size, so
   the steps become the list they always were underneath. */
@media (max-width: 760px) {
  .aelc-cycle {
    --u: 1px;
    width: 100%; max-width: 560px; aspect-ratio: auto;
    container-type: normal;
    display: flex; flex-direction: column; gap: 14px;
  }
  .aelc-ring, .aelc-center { display: none; }
  .aelc-step,
  .aelc-step.is-col, .aelc-step.is-col-rev,
  .aelc-step.is-row, .aelc-step.is-row-rev {
    position: static; transform: none;
    width: auto; max-width: none;
    flex-direction: row; gap: 14px; text-align: left;
  }
  .aelc-node { width: 44px; height: 44px; }
  .aelc-node svg { width: 20px; height: 20px; }
  .aelc-step-text { gap: 2px; }
  .aelc-step-title { font-size: 15px; white-space: normal; }
  .aelc-step-desc { font-size: 13px; }
}
@media (max-width: 560px) {
  .aelc-hero h1 { font-size: 32px; }
}

/* ---------- Customisation hero -------------------------------------------
   Implements design_handoff_customization_hero on
   /product/features/customize-auction-website/. Fifth sister hero: a teal
   foundation of things the platform already does, a yellow custom build on top,
   and a crane lowering the next idea onto it. CSS-only motion.

   Deviations from the handoff:
     - Poppins/Source Sans 3 map onto the site's self-hosted Archivo and IBM
       Plex Sans, as in the four heroes above.
     - The content sits in a --max container rather than running to the viewport
       edge, so it lines up with every other band.
     - The handoff keeps layout and colour in inline style attributes and asks
       only for its <style> block to be moved. They are classes here instead:
       inline styles cannot carry the media queries this needs, and the other
       four heroes all live in this file.
     - Blocks are `flex: 1 1 150px` in wrapping rows, so a row of three reflows
       to two and then one as the column narrows. The handoff has a single
       1200px breakpoint and nothing below it; three 15px labels do not fit
       across a phone.
     - The crane is hidden below 720px, where it would otherwise sit on top of
       the building it is meant to be lowering a block onto. It is decorative;
       the stack is the argument.
   Colours, spacing, radii, copy, geometry and timings are the handoff's.
   Classes are prefixed .aecz- and self-contained; nothing here leaks out.
   -------------------------------------------------------------------------- */

.aecz-hero {
  --custom: #f5c51c;
  --found: #16374a;
  --found-line: rgba(74, 157, 184, 0.6);
  --steel: #6d7b84;
  --steel-dark: #4d5a63;
  --steel-light: #8d99a1;

  position: relative;
  overflow: hidden;
  padding-block: 0;               /* overrides the global section rhythm */
  background: linear-gradient(115deg, #132f41 0%, #0d2635 55%, #0b2130 100%);
  color: #f4f8fa;
}
.aecz-hero + section { border-top: 0; }
.aecz-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 72% 45%, rgba(74, 157, 184, 0.12), transparent 70%);
  pointer-events: none;
}
.aecz-hero h1, .aecz-hero p { margin: 0; }
.aecz-hero :focus-visible { outline-color: var(--teal-lift); }

.aecz-inner {
  position: relative;
  /* Wider than the site's 1160px --max, like the lifecycle hero. Inside --max
     the scene column is 556px where the handoff assumes ~790: the block rows
     wrap, the stack grows past the 524px scene it is bottom-anchored in, and
     the top floor is clipped by the band. 1360 restores the design's
     proportions and still caps on a large monitor. */
  max-width: 1360px;
  margin-inline: auto;
  padding: 48px var(--gutter);
  display: grid;
  /* 460px, not the handoff's 500. The crane is a fixed 230px block pinned to
     the right while the building is a percentage of what is left, so the two
     converge as the column narrows and the load ends up on top of the top
     floor. The message column gives up 40px to buy the clearance back. */
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 24px;
  min-height: 620px;
}

@keyframes aecz-hoist { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes aecz-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes aecz-dash  { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Left column ------------------------------------------------------------- */

.aecz-message {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.aecz-message .crumbs { color: #7ba2b5; margin: 0; }
.aecz-message .crumbs a { color: #7ba2b5; }
.aecz-message .crumbs a:hover { color: #fff; }

.aecz-eyebrow {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: 0.22em; color: #4a9db8;
}
.aecz-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 1.18; letter-spacing: -0.01em; color: #fff;
}
.aecz-sub { font-size: 18px; line-height: 1.65; color: #b8ccd6; text-wrap: pretty; }
.aecz-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; font-size: 15px; font-weight: 600; }
.aecz-legend span { display: flex; align-items: center; gap: 10px; color: #cfe0e8; }
.aecz-legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.aecz-legend .is-custom { background: var(--custom); }
.aecz-legend .is-found  { background: #4a9db8; }

/* Right column: the building site ----------------------------------------- */

.aecz-scene { position: relative; align-self: stretch; min-height: 524px; }

.aecz-crane { position: absolute; right: 36px; bottom: 40px; width: 230px; height: 460px; pointer-events: none; }
.aecz-crane svg { position: absolute; inset: 0; width: 230px; height: 460px; }
.aecz-beacon {
  position: absolute; left: 162px; top: 16px;
  width: 8px; height: 8px; border-radius: 50%; background: #e8194b;
  animation: aecz-blink 2.4s ease-in-out infinite;
}
.aecz-load {
  position: absolute; left: 25px; top: 80px;
  display: flex; flex-direction: column; align-items: center;
  animation: aecz-hoist 6s ease-in-out infinite;
}
.aecz-cable { width: 2px; height: 26px; background: var(--steel-light); }
.aecz-hook {
  width: 12px; height: 10px;
  border: 2px solid var(--steel-light); border-top: none; border-radius: 0 0 4px 4px;
}
.aecz-load-box {
  width: 104px; height: 40px;
  background: rgba(245, 197, 28, 0.16);
  border: 2px dashed var(--custom); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--custom);
}

.aecz-stack {
  /* right: 120px, a touch more than the handoff's 110, for the same clearance
     reason as the column width above. The top floor's right edge works out at
     0.5 × (scene − 120) + 194, and the hanging load starts at scene − 241;
     these two rules and the two breakpoints below are what keep the first
     under the second at every width. */
  position: absolute; left: 0; right: 128px; bottom: 0;
  display: flex; flex-direction: column; align-items: center;
}
.aecz-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* The custom build ------------------------------------------------------- */

.aecz-custom { width: 78%; display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; }
.aecz-custom .aecz-row { justify-content: center; }
.aecz-block {
  flex: 1 1 150px; max-width: 190px;
  padding: 13px 10px; border-radius: 10px; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  border: 2px solid var(--custom); background: var(--custom); color: #0d2635;
}
/* Under construction: dashed and breathing, like the load on the hook. */
.aecz-block.is-wip {
  border-style: dashed; border-color: rgba(245, 197, 28, 0.8);
  background: rgba(245, 197, 28, 0.07); color: var(--custom);
  animation: aecz-dash 3s ease-in-out infinite;
}
.aecz-block.is-wip.is-late { animation-delay: 1.5s; }

.aecz-builton { width: 100%; display: flex; align-items: center; gap: 12px; padding: 2px 0 10px; }
.aecz-builton i { flex: 1; height: 1px; background: rgba(159, 190, 203, 0.35); }
.aecz-builton span { font-size: 11px; letter-spacing: 0.22em; font-weight: 700; color: #9fbecb; }

/* The foundation --------------------------------------------------------- */

.aecz-foundation { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.aecz-slab {
  flex: 1 1 150px;
  padding: 16px 10px; border-radius: 10px; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border: 1px solid var(--found-line); background: var(--found); color: #f4f8fa;
}
.aecz-slab.is-wide { flex-grow: 1.2; }
.aecz-base {
  min-height: 22px; padding: 3px 10px; border-radius: 6px;
  background: repeating-linear-gradient(45deg, rgba(74, 157, 184, 0.35) 0 10px, rgba(74, 157, 184, 0.15) 10px 20px);
  border: 1px solid rgba(74, 157, 184, 0.5);
  display: flex; align-items: center; justify-content: center;
}
.aecz-base span {
  font-size: 10px; letter-spacing: 0.22em; font-weight: 700;
  color: #cfe0e8; text-align: center; line-height: 1.5;
}

/* Responsive -------------------------------------------------------------- */

/* 1320px, not the handoff's 1200: below this the scene column drops under the
   ~760px the crane and the building need to stand side by side, and the load
   starts to overlap the top floor. Stacked, the scene gets the whole container
   and the geometry is comfortable again. */
@media (max-width: 1320px) {
  .aecz-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
@media (max-width: 840px) {
  /* Below this even the full-width scene is too narrow for the crane to stand
     clear of the building it is building. It is decorative — the stack is the
     argument — so it goes, and the stack comes out of absolute positioning so
     the scene grows with the rows as they wrap rather than overflowing 524px. */
  .aecz-crane { display: none; }
  .aecz-stack { position: static; right: auto; }
  .aecz-custom { width: 100%; }
  .aecz-scene { min-height: 0; }
}
@media (max-width: 720px) {
  .aecz-slab { font-size: 14px; padding: 13px 10px; }
}
@media (max-width: 560px) {
  .aecz-hero h1 { font-size: 32px; }
  .aecz-block { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aecz-hero *, .aecz-hero *::before { animation: none !important; }
}

/* ---------- White-label hero ---------------------------------------------
   Implements design_handoff_white_label_hero on
   /product/solution/white-label-auction-software/. Sixth and last sister hero:
   a crowded wall of two dozen invented auction-house marks, bobbing gently,
   with the Auction-Experts logo lying under them as a blurred ground shadow —
   the point being that on a white-label platform the vendor is the thing you
   do not see. The marks are CSS and inline SVG; there is no photography.

   Deviations from the handoff:
     - Poppins/Source Sans 3 map onto the site's self-hosted Archivo and IBM
       Plex Sans, as in the five heroes above. The handoff's third face,
       Playfair Display, becomes a system serif stack: it dresses a dozen
       decorative monograms, and a webfont for that is the trade the bid-engine
       hero already refused.
     - The content sits in a 1360px container, as the lifecycle and
       customisation heroes do. Inside the site's 1160px --max the wall is 536px
       against the ~768px the composition assumes, and the marks — sized in
       pixels but placed in percentages — start to overlap each other.
     - The shadow is the site's own logo SVG as a CSS background, not the
       handoff's PNG. It is flattened to black and blurred, so the two are
       indistinguishable, and this way there is no second copy of the logo to
       keep in step, no <img> needing alt text it should not have, and nothing
       for the image pipeline to rewrite.
     - Marks are sized in --u, one 768th of the wall's own width, so the whole
       composition scales as a unit instead of overlapping as it narrows. It is
       capped at 1px, so a wall wider than the design just spreads out.
   Colours, spacing, geometry, copy and timings are the handoff's.
   Classes are prefixed .aewl- and self-contained; nothing here leaks out.
   -------------------------------------------------------------------------- */

.aewl-hero {
  --teal: #4a9db8;
  --text: #f4f8fa;
  --text-soft: #b8ccd6;
  --text-mute: #9fbecb;

  position: relative;
  overflow: hidden;
  padding-block: 0;               /* overrides the global section rhythm */
  background: linear-gradient(115deg, #132f41 0%, #0d2635 55%, #0b2130 100%);
  color: var(--text);
}
.aewl-hero + section { border-top: 0; }
.aewl-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 72% 45%, rgba(74, 157, 184, 0.12), transparent 70%);
  pointer-events: none;
}
.aewl-hero * { margin: 0; }
.aewl-hero :focus-visible { outline-color: var(--teal-lift); }

.aewl-inner {
  position: relative;
  max-width: 1360px;              /* wider than --max — see the note above */
  margin-inline: auto;
  padding: 48px var(--gutter);
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 24px;
  min-height: 620px;
}

@keyframes aewl-bob-a {
  0%, 100% { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
  50%      { transform: translate(1px, -5px) rotate(calc(var(--tilt, 0deg) + 1.2deg)); }
}
@keyframes aewl-bob-b {
  0%, 100% { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
  50%      { transform: translate(-2px, 4px) rotate(calc(var(--tilt, 0deg) - 1.4deg)); }
}
@keyframes aewl-bob-c {
  0%, 100% { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
  50%      { transform: translate(3px, 3px) rotate(calc(var(--tilt, 0deg) + 0.8deg)); }
}

/* Left column ------------------------------------------------------------- */

.aewl-message {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.aewl-message .crumbs { color: #7ba2b5; margin: 0; }
.aewl-message .crumbs a { color: #7ba2b5; }
.aewl-message .crumbs a:hover { color: #fff; }

.aewl-eyebrow {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: 0.22em; color: var(--teal);
}
.aewl-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 1.18; letter-spacing: -0.01em; color: #fff;
}
.aewl-sub   { font-size: 18px; line-height: 1.65; color: var(--text-soft); text-wrap: pretty; }
.aewl-punch { font-size: 18px; line-height: 1.65; color: #fff; font-weight: 600; text-wrap: pretty; }
.aewl-note  { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-mute); font-style: italic; text-wrap: pretty; }

/* The trophy wall --------------------------------------------------------- */

/* The container is the outer element and --u is read by its descendants: a
   container cannot size itself from its own container-query units. */
.aewl-wall { container-type: inline-size; align-self: center; }
.aewl-canvas {
  position: relative;
  --u: min(1px, calc(100cqw / 768));
  height: calc(520 * var(--u));
  min-height: 320px;
}

.aewl-shadow {
  position: absolute; left: 50%; bottom: -36px;
  width: calc(460 * var(--u)); aspect-ratio: 1019 / 168;
  background: url('/assets/img/auction-experts-logo.svg') center / contain no-repeat;
  transform: translateX(-50%) scaleY(0.32) skewX(-16deg);
  filter: brightness(0) blur(7px);
  opacity: 0.5; pointer-events: none;
}

.aewl-logo {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  animation-duration: var(--dur); animation-delay: var(--delay);
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.aewl-logo.is-a { animation-name: aewl-bob-a; }
.aewl-logo.is-b { animation-name: aewl-bob-b; }
.aewl-logo.is-c { animation-name: aewl-bob-c; }

.aewl-mark { display: flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1.05; font-size: calc(var(--ms) * var(--u)); color: #d9dee2; }
.aewl-mark svg { width: calc(var(--ms) * 1.25 * var(--u)); height: calc(var(--ms) * 1.25 * var(--u)); }
.aewl-year { font-size: calc(9 * var(--u)); letter-spacing: 0.24em; font-weight: 600; color: #8d99a1; }

/* The handoff's serif is Playfair Display; a system serif carries the same
   "old house" flavour for a dozen decorative monograms at no download. */
.aewl-logo.is-serif .aewl-mark { font-family: Georgia, 'Times New Roman', Times, serif; }
.aewl-logo.is-sans  .aewl-mark { font-family: var(--font-display); }

/* Mark shapes ------------------------------------------------------------- */

.aewl-logo.is-circle, .aewl-logo.is-circle-it,
.aewl-logo.is-square, .aewl-logo.is-fill-round, .aewl-logo.is-fill-circle {
  width: calc(var(--s) * var(--u)); height: calc(var(--s) * var(--u));
}
.aewl-logo.is-circle {
  border-radius: 50%; border: max(1px, calc(2 * var(--u))) solid #aeb8bf;
  background: rgba(120, 132, 140, 0.12);
}
.aewl-logo.is-circle-it {
  border-radius: 50%; border: max(1px, calc(2 * var(--u))) double #8d99a1;
  background: rgba(120, 132, 140, 0.08);
}
.aewl-logo.is-circle-it .aewl-mark { font-style: italic; }
.aewl-logo.is-square {
  border: max(1px, calc(1.5 * var(--u))) solid #8d99a1;
  background: rgba(30, 43, 52, 0.9);
}
.aewl-logo.is-fill-round { border-radius: calc(14 * var(--u)); background: #9aa5ac; }
.aewl-logo.is-fill-round .aewl-mark { color: #1a2830; }
.aewl-logo.is-fill-round .aewl-year { color: #33424c; }
.aewl-logo.is-fill-circle { border-radius: 50%; background: #6d7b84; }
.aewl-logo.is-fill-circle .aewl-mark { color: #e8edf0; }
.aewl-logo.is-fill-circle .aewl-year { color: #c3ccd2; }
.aewl-logo.is-pill {
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  border-radius: 999px; border: max(1px, calc(1.5 * var(--u))) solid #8d99a1;
  background: rgba(120, 132, 140, 0.14);
}
.aewl-logo.is-plaque {
  width: calc(var(--s) * var(--u)); height: calc(var(--s) * 0.82 * var(--u));
  border-left: max(2px, calc(3 * var(--u))) solid #9aa5ac;
  background: rgba(52, 64, 72, 0.7);
}
.aewl-logo.is-text, .aewl-logo.is-text-line { width: max-content; }
.aewl-logo.is-text-line .aewl-mark {
  border-bottom: max(1px, calc(2 * var(--u))) solid #8d99a1;
  padding-bottom: calc(2 * var(--u));
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1200px) {
  .aewl-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .aewl-canvas { height: calc(560 * var(--u)); }
}
@media (max-width: 640px) {
  /* Below this the year captions are down to about five pixels; they read as
     grain rather than as dates, so they go and the marks carry the wall. */
  .aewl-year { display: none; }
  .aewl-canvas { min-height: 260px; }
  .aewl-hero h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .aewl-hero *, .aewl-hero *::before { animation: none !important; }
}

/* ---------- Why Auction Experts ------------------------------------------
   /why-auction-experts/ and its teaser on the homepage. The page is built from
   the components that were already here; this is only what those did not have.

   The yellow is the one the customisation hero uses, and it is used for the
   same thing: yellow marks the part that is the customer's, teal the platform
   underneath. That makes it a reuse of the existing vocabulary rather than a
   new accent colour, which is why it is scoped here and not promoted to :root.

   Dark bands on this page take .wrap-narrow but never .prose — .prose's text
   colours are declared later in this file at equal specificity, so they would
   win and put dark grey on navy. That also means lists in a dark band get no
   .prose styling, hence .why-own below.
   -------------------------------------------------------------------------- */

.why-turn, .why-ask {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; line-height: 1.5;
  color: var(--navy);
}
.why-turn { border-left: 3px solid #f5c51c; padding-left: 1.125rem; margin-top: 1.75rem; }
.band-dark .why-ask { color: #fff; margin-top: 1.75rem; }

.why-own { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.why-own li {
  position: relative; padding-left: 1.75rem;
  margin-bottom: 0.9rem; max-width: 62ch;
}
/* A filled yellow square, the same mark the customisation hero's legend uses
   for "custom — built for you". */
.why-own li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 9px; height: 9px; border-radius: 2px; background: #f5c51c;
}
.why-after-grid { margin-top: 1.75rem; }

/* Homepage teaser. A navy band is already the site's way of raising a section
   out of the run of white ones; the yellow rule ties it to the page it links. */
.why-teaser h2 { border-top: 3px solid #f5c51c; padding-top: 1.25rem; display: inline-block; }
.why-teaser p { max-width: 68ch; }