/* BidLogic home page (web/landing.html). Spec: docs/landing/DESIGN.md.
   Loaded only by landing.html; the tool pages use web/style.css.
   Rules kept here: no imported stylesheet, no external resource, no backdrop
   filter, no blend modes; every hidden start state sits under html.motion (reveals)
   or html.intro (hero), so without JavaScript, with reduced motion, or when
   the motion script never runs (the gate drops html.motion after 3 s),
   everything is visible. Revision 2: centred hero, larger type, the intro
   scroll lock (html.intro-lock, DESIGN 5.7), no Features section.
   Round 3 (2026-10-08): the page is one screen: a bar with one "Sign in"
   button (.nav), and the hero (wordmark, tagline, "Open BidLogic") centred in
   the viewport over a soft gradient (.bg-base). The sections below the hero,
   the footer, the menu and the scroll lock are gone from the page; their
   rules further down are dormant. The hero's hidden start state sits under
   html.js.hero-wait (set by the inline gate, never under reduced motion) and
   the entrance plays under html.hero-play (landing-motion.js, on "load"). */

/* ------------------------------------------------------------------ */
/* 1. Shared values                                                    */
/* ------------------------------------------------------------------ */

:root {
  /* colour (DESIGN 1.1) */
  --g-deep: #3E3F40;
  --g-sunken: #4B4C4D;
  --g-base: #58595B;
  --g-raised: #5F6062;
  --g-hover: #67686A;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: #B4B5B6;
  --text-strong: #FFFFFF;
  --text: #E8E9EA;
  --text-muted: #D1D3D4;
  --text-muted-raised: #DCDDDE;
  --wordmark: #F2F2F0;
  --red: #DA291C;                        /* Pantone 485 C: fills, bars, icons, rules */
  --red-hi: #C4231A;                     /* hover */
  --red-lo: #AC1A2F;                     /* active, Pantone 187 C */
  --red-ink: #FFD2CE;                    /* text on the grey: 5.13 base, 4.60 raised */
  --on-red: #FFFFFF;                     /* words on a red button: 4.87 */
  --focus: #FFD2CE;
  --paper: #FFFFFF;
  --paper-2: #F6F7F8;
  --paper-line: #DCDFE4;
  --ink: #2B2C2D;
  --ink-muted: #5F6368;
  --paper-red: #AC1A2F;
  --row-otm: #FFF3CD;
  --row-sold: #D1F2DC;
  --row-event: #F2F4F7;
  --row-start: #F2F2F2;

  /* fonts (DESIGN 1.3); Inter on the whole page since M67 (2026-10-19) */
  --font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-data: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* space, layout, radii, shadows, layers (DESIGN 1.5) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --nav-h: 72px;
  --container: 1280px;
  --gutter: 40px;
  --section-pad: 112px;
  /* Paragraph measure, aimed at about 70 characters of Jost (DESIGN 1.5). Measured
     at 1440: 62ch gave 79 characters in the hero lead and 82 in the report lead;
     58ch, the fallback DESIGN names, still gave 79 / 78; 54ch gives 71 / 71, both
     still two lines. Step and About text are held by their columns, not this. */
  --measure: 54ch;
  --grid-gap: 32px;
  /* M67 (2026-10-19): every corner is square, so every radius is 0. */
  --r-sm: 0;  --r-md: 0;  --r-lg: 0;  --r-pill: 0;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.45);
  --shadow-paper: 0 28px 64px -24px rgba(0, 0, 0, 0.55);
  --z-bg-base: 0; --z-bg-web: 1; --z-bg-vignette: 2; --z-page: 3;
  --z-menu: 99; --z-nav: 100; --z-skip: 200;

  /* motion (DESIGN 1.6) */
  --ease-mask: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-wipe: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-ui: 160ms;
  --dur-nav: 240ms;
  --dur-expand: 260ms;
  --dur-reveal: 560ms;
  --dur-mask: 800ms;
  --stagger: 80ms;

  /* local helpers */
  --reveal-shift: 24px;
  --step-node: 44px;
  --step-gap: 40px;
}

@media (max-width: 1199.98px) {
  :root { --gutter: 32px; --section-pad: 96px; --grid-gap: 24px; }
}
@media (max-width: 959.98px) {
  :root { --gutter: 24px; --section-pad: 88px; --grid-gap: 24px; }
}
@media (max-width: 599.98px) {
  :root { --gutter: 16px; --section-pad: 72px; --grid-gap: 16px;
          --reveal-shift: 16px; --step-node: 36px; --step-gap: 32px; }
}

/* ------------------------------------------------------------------ */
/* 2. Base                                                             */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #58595B;
  color-scheme: dark;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
html.motion { scroll-behavior: smooth; }

/* Round 3 (2026-10-08): the intro scroll lock (DESIGN 5.7) and its reserved
   scrollbar gutter are gone; the page is one screen and has nothing to lock. */

html, body { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  background: #58595B;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-family: var(--font-display); color: var(--text-strong); text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

a { color: var(--red-ink); }
button { font: inherit; color: inherit; }

/* M67 (2026-10-19): square corners on everything, with no specificity at
   all, for any element no rule gives a radius. */
*, *::before, *::after { border-radius: 0; }

code, kbd {
  font-family: var(--font-mono);
  font-size: max(16px, 0.875em);   /* never under the 16 px floor (DESIGN 1.4) */
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  line-height: 1.45;
  text-align: center;
  color: var(--text-strong);
}

::selection { background: rgba(218, 41, 28, 0.38); color: #FFFFFF; }

.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.nobr { white-space: nowrap; }

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

/* Focus: one light red ring everywhere (DESIGN 3.0). */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }

/* Skip link (DESIGN 3.0). */
.skip-link {
  position: fixed;
  top: 0;
  left: 12px;
  z-index: var(--z-skip);
  transform: translateY(-120%);
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--red);
  color: var(--on-red);
  font: 500 16px/1 var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(12px); }
.skip-link:focus-visible { outline-color: var(--text-strong); border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ */
/* 3. Background layers (DESIGN 4.1)                                   */
/* ------------------------------------------------------------------ */

.bg-base, .bg-web, .bg-vignette {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Anti-slop pass (2026-10-08): a 40 px hairline grid at 2.8 % over the gradient,
   so the structure shows (Swiss grid) and the web has something to sit on.
   Round 3: a little depth behind the web, so the page is not flat: lighter in
   the centre (#67686A), the base grey (#58595B), darker at the edges
   (#4A4B4D), and a faint red glow in the lower centre that is gone by 55 %.
   The canvas above stays transparent and draws over it. */
.bg-base {
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 40px),
    radial-gradient(ellipse 70% 55% at 50% 88%, rgba(218, 41, 28, 0.16) 0%, rgba(218, 41, 28, 0) 55%),
    radial-gradient(ellipse 85% 80% at 50% 46%, #67686A 0%, #58595B 52%, #4A4B4D 100%);
  background-color: #58595B;
}
.bg-web { z-index: 1; display: block; }
.bg-web[hidden] { display: none; }
.bg-vignette {
  z-index: 2;
  background: radial-gradient(140% 110% at 50% 45%, rgba(43, 44, 45, 0) 55%, rgba(43, 44, 45, 0.22) 100%);
}
.page { position: relative; z-index: 3; }

/* ------------------------------------------------------------------ */
/* 4. Layout frame (DESIGN 3.10)                                       */
/* ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--section-pad); }

/* Type roles (DESIGN 1.4) */
h2 {
  font-size: clamp(32px, 2.2vw + 18px, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3 { font-weight: 600; letter-spacing: -0.01em; }

.kicker {
  display: flex;
  align-items: center;
  font: 500 16px/1.2 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.kicker-rule {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 2px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--red);
}
.lead {
  font-size: 24px;
  line-height: 1.5;
  color: var(--text);
}
/* A lead in a two-column head (How it works, About us, Contact) is a step smaller. */
.how-head .lead, .about-layout .lead, .contact-layout .lead { font-size: 22px; }

.section-head { max-width: 880px; margin-bottom: 56px; }
.section-head > h2 { margin-top: 16px; }
.section-head > .lead { margin-top: 24px; }
.section-head > :first-child { margin-top: 0; }
.section-head .lead { max-width: var(--measure); }

/* ------------------------------------------------------------------ */
/* 5. Buttons (DESIGN 3.3)                                             */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font: 500 17px/1 var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-ui),
              border-color var(--dur-ui) var(--ease-ui),
              color var(--dur-ui) var(--ease-ui);
}
.btn:focus-visible { border-radius: var(--r-sm); }
.btn .icon {
  width: 18px;
  height: 18px;
  transition: transform 200ms var(--ease-out);
}
.btn:hover .icon { transform: translateX(3px); }
.btn:hover .icon-arrow-down { transform: translateY(2px); }

.btn-primary {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--on-red);
}
.btn-primary:hover {
  background-color: var(--red-hi);
  border-color: var(--red-hi);
  color: var(--on-red);
}
.btn-primary:active {
  background-color: var(--red-lo);
  border-color: var(--red-lo);
  color: var(--on-red);
}
/* Locked until the visitor is signed in (landing-auth.js, docs/LOGIN.md). */
.btn.is-locked {
  opacity: 0.4;
  pointer-events: none;
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--line-strong);
  color: var(--text-strong);
}
.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--text);
  color: var(--text-strong);
}
.btn-secondary:active { background-color: rgba(255, 255, 255, 0.12); }

.btn-ghost {
  background-color: transparent;
  border: 0;
  padding: 0 4px;
  color: var(--text);
}
.btn-ghost:hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.btn-sm { height: 40px; padding: 0 16px; font-size: 16px; }

/* ------------------------------------------------------------------ */
/* 6. Nav (DESIGN 2.1, 3.1)                                            */
/* ------------------------------------------------------------------ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: var(--z-nav);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-nav) var(--ease-ui),
              border-color var(--dur-nav) var(--ease-ui);
}
body.is-scrolled .site-nav {
  background-color: var(--g-sunken);
  border-bottom-color: var(--line);
}
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
/* The lockup: the BidLogic wordmark alone, vertically centred, nothing beneath
   (2026-10-08: the icon mark and the live-text name are retired). Sized by
   height; the width follows the wordmark's shape. */
.brand-mark { display: block; height: 28px; width: auto; flex: 0 0 auto; }
.brand-name {
  font: 600 28px/1 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--wordmark);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-menu .btn { margin-left: 8px; }

.nav-link {
  font: 500 17px/1 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color var(--dur-ui) var(--ease-ui);
}
.nav-link:hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--red);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
}
.nav-toggle:hover { background-color: rgba(255, 255, 255, 0.08); }
.nav-toggle:focus-visible { border-radius: var(--r-sm); }
.nav-toggle .icon-close { display: none; }

@media (max-width: 759.98px) {
  .nav-toggle { display: inline-flex; }
  html:not(.js) .nav-toggle { display: none; }
  html.js .nav-menu { display: none; }

  /* Without JavaScript, or when the motion script never ran (the gate drops
     html.js after 3 s), there is no menu button: the links wrap under the
     brand and the bar scrolls away with the page. */
  html:not(.js) .site-nav { position: absolute; height: auto; }
  html:not(.js) .nav-inner { flex-wrap: wrap; row-gap: 8px; padding-block: 14px; }
  html:not(.js) .nav-menu { flex-wrap: wrap; gap: 8px 20px; width: 100%; }
  html:not(.js) .nav-menu .btn { margin-left: 0; }

  body.nav-open .site-nav {
    background-color: var(--g-sunken);
    border-bottom-color: var(--line);
  }
  body.nav-open .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: var(--z-menu);
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px 24px;
    background-color: var(--g-sunken);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
  }
  body.nav-open .nav-menu > * { flex-shrink: 0; }
  body.nav-open .nav-menu .nav-link {
    display: flex;
    align-items: center;
    height: 56px;
    font-size: 20px;
  }
  body.nav-open .nav-menu .nav-link + .nav-link { border-top: 1px solid var(--line); }
  body.nav-open .nav-menu .btn { width: 100%; margin: 16px 0 0; }
  body.nav-open .nav-toggle .icon-menu { display: none; }
  body.nav-open .nav-toggle .icon-close { display: inline-block; }
}

/* Round 3 (2026-10-08): the bar is one centred "Sign in" button, nothing
   else (no logo, no links, no menu). It sits over the top of the hero, which
   pads itself by the same height, so the page is exactly one screen tall. */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------ */
/* 7. Hero (DESIGN 2.2, 3.2)                                           */
/* ------------------------------------------------------------------ */

/* Round 3: one screen. The hero is exactly the viewport's height (the bar is
   laid over its top padding, the same 72 px is mirrored below so the block
   sits on the true centre line), so nothing scrolls at desktop sizes; on a
   short phone the content may be taller and the page then scrolls. */
.hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--nav-h);
}
/* R2: the whole hero block is a centred column at every width; each child
   shrinks to its content and sits on the centre line. */
.hero-inner {
  --hero-max: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-inner > * { max-width: var(--hero-max); }

/* Round 3: the wordmark is the hero's first and largest element. */
.hero-mark {
  display: block;
  height: clamp(64px, 9vw, 128px);
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}
.hm-bar { transform-box: fill-box; transform-origin: 50% 100%; }

/* Dormant since round 3 (the intro line is gone). */
.hero-intro { display: flex; align-items: center; justify-content: center; gap: 16px; }

/* The intro line. Every word box carries the display font at the line's size,
   so the three boxes share one line box and one baseline; the byline's own
   (smaller, Jost) text sits on that baseline inside its box. */
.intro-line {
  font: 500 24px/1.3 var(--font-display);
  color: var(--text-muted);
}
.iw, .mw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.iw-i, .mw-i { display: inline-block; }
.iw-1 .iw-i { font-weight: 500; color: var(--text-muted); }
.iw-2 .iw-i { font-weight: 600; color: var(--text-strong); }
.iw-3 .iw-i {
  font: 450 18px/1.3 var(--font-body);
  color: var(--text-muted);
}
/* Round 5: the byline is its own centred line under "Introducing BidLogic",
   so the words that show first are centred from their first frame (they no
   longer share a line box with the still-invisible byline). */
.intro-line .iw-3 { display: block; margin-top: 4px; }

/* Round 3: the tagline, large and tightly tracked, one line from tablet width
   up (the 880 px column would break it, so it may use the container's width). */
.hero-title {
  margin-top: clamp(28px, 3vw, 44px);
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.hero-lead {
  margin-top: 28px;
  font-size: 24px;
  line-height: 1.5;
  color: var(--text);
  text-wrap: balance;                /* round 5: centred lines of even length */
}
.hero-inner > .hero-lead { max-width: min(var(--measure), var(--hero-max)); }
/* "recording to the bid report" needs about 893 px at 72 px: a 920 px box
   keeps the headline on two lines from 768 to 1440 (DESIGN 2.2). */
.hero-inner > .hero-title { max-width: 100%; }
.hero-actions {
  margin-top: clamp(28px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.hero-proof {
  margin-top: 28px;
  font: 450 18px/1.5 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-wrap: balance;
}

/* Intro timeline (DESIGN 5.2). Only under html.intro, never when skipped.
   Round 4: the fades start at opacity 0 (was 0.1), so only the mark and
   "Introducing BidLogic" show first; the rest is not even a faint ghost. */
@keyframes bl-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes bl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bl-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes bl-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bl-dot {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Round 3 entrance (2026-10-08). Hidden start state: only while <html> has
   both js and hero-wait (the inline gate sets them before the first paint,
   never under reduced motion, and drops hero-wait itself after 8 s), so
   without JavaScript everything shows. landing-motion.js swaps hero-wait for
   hero-play on the window "load" event, and the entrance plays:
   1. the seven red bars rise from the baseline, 500 ms each, staggered by
      step (L 0 ms; O and G 120 ms; I and C 240 ms); the white strokes and
      "bid" fade in over the same 740 ms;
   2. the tagline fades up 12 px (500 ms, from 740 ms);
   3. the button the same, 150 ms later (from 890 ms); all done by 1.39 s. */
html.js.hero-wait .hm-bar { transform: scaleY(0); }
html.js.hero-wait .hero-mark .seg,
html.js.hero-wait .hero-mark .bid { opacity: 0; }
html.js.hero-wait .hero-title,
html.js.hero-wait .hero-actions { opacity: 0; transform: translateY(12px); }

html.hero-play .hm-bar-1 { animation: bl-bar 500ms var(--ease-out) 0ms both; }
html.hero-play .hm-bar-2 { animation: bl-bar 500ms var(--ease-out) 120ms both; }
html.hero-play .hm-bar-3 { animation: bl-bar 500ms var(--ease-out) 240ms both; }
html.hero-play .hero-mark .seg,
html.hero-play .hero-mark .bid { animation: bl-fade 740ms var(--ease-out) 0ms both; }
html.hero-play .hero-title { animation: bl-fade-up 500ms var(--ease-out) 740ms both; }
html.hero-play .hero-actions { animation: bl-fade-up 500ms var(--ease-out) 890ms both; }

/* Keyboard focus never lands on a button that is still hidden or fading in.
   Important declarations win over the running animation without cancelling
   it, so nothing restarts when focus leaves. */
html.js.hero-wait .hero-actions:focus-within,
html.hero-play .hero-actions:focus-within { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ */
/* 8. Reveals (DESIGN 5.3)                                             */
/* ------------------------------------------------------------------ */

.reveal-group > .reveal:nth-child(1) { --reveal-delay: 0ms; }
.reveal-group > .reveal:nth-child(2) { --reveal-delay: 80ms; }
.reveal-group > .reveal:nth-child(3) { --reveal-delay: 160ms; }
.reveal-group > .reveal:nth-child(n+4) { --reveal-delay: 240ms; }
@media (max-width: 599.98px) {
  .reveal-group > .reveal:nth-child(2) { --reveal-delay: 40ms; }
  .reveal-group > .reveal:nth-child(3) { --reveal-delay: 80ms; }
  .reveal-group > .reveal:nth-child(n+4) { --reveal-delay: 120ms; }
}

html.motion .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
              transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}
/* Keyboard focus inside a block that has not revealed yet shows it at once
   (the motion script also marks it is-in on focus). */
html.motion .reveal:not(.is-in):focus-within { opacity: 1; transform: none; transition: none; }

/* The kicker rule wipes in with its kicker. */
html.motion .reveal:not(.is-in) .kicker-rule { clip-path: inset(0 100% 0 0); }
.reveal.is-in .kicker-rule {
  clip-path: inset(0 0 0 0);
  transition: clip-path 600ms var(--ease-wipe) var(--reveal-delay, 0ms);
}

/* ------------------------------------------------------------------ */
/* 9. Three ways to work (DESIGN 2.3, 3.4)                             */
/* ------------------------------------------------------------------ */

.ways-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.way-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background-color: var(--g-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.way-card.is-in {
  transition: opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay),
              transform var(--dur-reveal) var(--ease-out) var(--reveal-delay),
              border-color var(--dur-ui) var(--ease-ui);
}

.way-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: var(--r-sm);
  background-color: rgba(218, 41, 28, 0.10);
  border: 1px solid rgba(218, 41, 28, 0.35);
  color: var(--red);
  transition: background-color var(--dur-ui) var(--ease-ui),
              border-color var(--dur-ui) var(--ease-ui);
}
.way-icon .icon { width: 26px; height: 26px; }

.way-title {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* Round 5: at M width the 3-column cards are about 246 px inside, and
   "Automate, then correct" needs 271 px at 24 px; at 21 px it fits from about
   995 px, so every card title stays on one line and the summaries align. */
@media (min-width: 960px) and (max-width: 1099.98px) {
  .way-title { font-size: 21px; }
}
.way-summary { font-size: 20px; line-height: 1.55; color: var(--text); }

.way-points {
  list-style: none;
  display: grid;
  gap: 12px;
  padding-top: 4px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text);
}
/* The tool's own button names, set off so their capitals read as names. */
.way-points strong { font-weight: 600; color: var(--text-strong); }
.way-points li { position: relative; padding-left: 18px; }
.way-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background-color: var(--red);
}

/* The toggle comes before its detail in the markup (the disclosure pattern:
   what it opens follows it). At 960 and wider the detail is an overlay and
   the toggle sits at the card's foot; narrower, the detail opens below the
   toggle, so the focused button never moves. */
.way-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-left: -4px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 17px/1 var(--font-body);
  letter-spacing: 0.01em;
  cursor: pointer;
}
.way-toggle .icon {
  width: 18px;
  height: 18px;
  color: var(--red);
  transition: transform 200ms var(--ease-out);
}
.way-toggle:hover .way-toggle-text {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.way-card.is-open .way-toggle .icon { transform: rotate(180deg); }

/* Highlight: the border and the icon's box brighten (the icon is always red). */
@media (hover: hover) and (pointer: fine) {
  .way-card:hover { border-color: rgba(218, 41, 28, 0.55); }
  .way-card:hover .way-icon {
    background-color: rgba(218, 41, 28, 0.18);
    border-color: rgba(218, 41, 28, 0.6);
  }
}
.way-card:focus-within, .way-card.is-open { border-color: rgba(218, 41, 28, 0.55); }
.way-card:focus-within .way-icon, .way-card.is-open .way-icon {
  background-color: rgba(218, 41, 28, 0.18);
  border-color: rgba(218, 41, 28, 0.6);
}

/* Without JavaScript nobody can open a card, so every detail shows and the
   toggles are hidden. With JavaScript, .is-open is the only open state. */
html:not(.js) .way-toggle { display: none; }

@media (min-width: 960px) {
  /* Closed cards keep their natural height. The detail opens as a panel that
     drops below its card, over the content beneath, so nothing moves. */
  .ways-list { align-items: stretch; }
  .way-card { position: relative; }
  .way-toggle { margin-top: auto; }
  html.js .way-card.is-open {
    z-index: 4;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  html.js .way-detail {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    padding: 4px 28px 28px;
    background-color: var(--g-raised);
    border: 1px solid rgba(218, 41, 28, 0.55);
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: opacity 180ms var(--ease-out),
                clip-path var(--dur-expand) var(--ease-out),
                visibility 0s linear var(--dur-expand);
  }
  html.js .way-card.is-open .way-detail {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 -48px -64px -48px);
    transition-delay: 0s;
  }
}

@media (max-width: 959.98px) {
  /* The detail opens instantly and pushes the content below it down. */
  html.js .way-detail { display: grid; grid-template-rows: 0fr; }
  html.js .way-detail-inner { overflow: hidden; min-height: 0; visibility: hidden; }
  html.js .way-card.is-open .way-detail { grid-template-rows: 1fr; }
  html.js .way-card.is-open .way-detail-inner { visibility: visible; }
  html.js .way-card:not(.is-open) .way-detail { margin-top: -12px; }
}

/* ------------------------------------------------------------------ */
/* 10. How it works (DESIGN 2.4, 3.5)                                  */
/* ------------------------------------------------------------------ */

.how-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.how-head { align-self: start; }
/* Sticky only when the window is tall enough for the whole head to show
   below the nav, so keyboard focus on its button is never off-screen. */
@media (min-width: 960px) and (min-height: 560px) {
  .how-head {
    position: sticky;
    top: calc(var(--nav-h) + 48px);
  }
}
.how-head .section-head { margin-bottom: 0; }
.how-actions { margin-top: 32px; }

.steps {
  position: relative;
  list-style: none;
  display: grid;
  gap: var(--step-gap);
}
/* The rail joins the node centres: one segment from each node to the next,
   so it never runs past the last node. It wipes in with the list. */
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-node) minmax(0, 1fr);
  gap: 20px;
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--step-node) / 2 - 1px);
  top: var(--step-node);
  bottom: calc(-1 * var(--step-gap));
  width: 1px;
  background-color: rgba(218, 41, 28, 0.40);
}
html.motion .steps:not(.is-in) .step::before { clip-path: inset(0 0 100% 0); }
.steps.is-in .step::before {
  clip-path: inset(0 0 0 0);
  transition: clip-path 300ms var(--ease-wipe) var(--rail-delay, 0ms);
}
.step:nth-child(2) { --rail-delay: 200ms; }
.step:nth-child(3) { --rail-delay: 400ms; }
.step:nth-child(4) { --rail-delay: 600ms; }
/* The list itself never fades or moves: only its steps and its rail do. */
html.motion .steps.reveal:not(.is-in) { opacity: 1; transform: none; }

.step-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-node);
  height: var(--step-node);
  border-radius: var(--r-sm);
  background-color: var(--g-base);
  border: 1px solid var(--red);
  font: 500 16px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--red-ink);
}
.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--step-node);
  font-size: 24px;
  line-height: 1.25;
}
.step-title .icon { width: 22px; height: 22px; color: var(--red); }
.step-body p {
  margin-top: 8px;
  max-width: var(--measure);
  font-size: 20px;
  line-height: 1.55;
  color: var(--text);
}

/* ------------------------------------------------------------------ */
/* 11. What you get: the report mock (DESIGN 2.5, 3.7)                 */
/* ------------------------------------------------------------------ */

figure.report-mock { margin: 0; }
.mock-paper {
  overflow: hidden;
  background-color: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-paper);
}
.mock-file {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  background-color: var(--paper-2);
  border-bottom: 1px solid var(--paper-line);
  font: 500 13px/1 var(--font-mono);
  color: var(--ink-muted);
}
.mock-file .icon { width: 16px; height: 16px; color: var(--ink-muted); }

.mock-scroll { overflow-x: auto; }
.mock-scroll:focus-visible {
  outline: 2px solid var(--paper-red);
  outline-offset: -2px;
  border-radius: 0;
}

.mock-table {
  min-width: 920px;
  width: 100%;
  border-collapse: collapse;
  font: 500 13px/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mock-table th {
  padding: 10px 12px;
  background-color: var(--paper-2);
  border-bottom: 1px solid var(--paper-line);
  font: 500 13px/1.3 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  text-align: left;
  white-space: nowrap;
}
.mock-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--paper-line);
  white-space: nowrap;
  text-align: left;
}
.mock-table tbody tr:last-child td { border-bottom: 0; }
.mock-table .num { text-align: right; }
.mock-table td.tc {
  color: var(--paper-red);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mock-table td.tag { font-weight: 600; }
.mock-table .row-start td { background-color: var(--row-start); font-weight: 600; }
.mock-table .row-event:not(.row-start) td { background-color: var(--row-event); color: var(--ink-muted); }
.mock-table .row-event:not(.row-start) td.tc { color: var(--paper-red); }
.mock-table .row-otm td { background-color: var(--row-otm); }
.mock-table .row-sold td { background-color: var(--row-sold); }

.mock-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
  font: 450 16px/1.5 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.mock-legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--r-sm);
  flex: 0 0 auto;
}
.swatch-otm { background-color: var(--row-otm); }
.swatch-sold { background-color: var(--row-sold); }
.swatch-event { background-color: var(--row-event); }

.mock-scroll-hint { display: none; }
.mock-scroll-hint, .report-mock figcaption {
  margin-top: 8px;
  font: 450 16px/1.5 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ */
/* 12. About us (DESIGN 2.7)                                           */
/* ------------------------------------------------------------------ */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.about-layout .section-head { margin-bottom: 0; }
.about-list { display: grid; gap: 32px; }
.about-item { padding-top: 24px; border-top: 1px solid var(--line); }
.about-item dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 22px/1.3 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--text-strong);
}
.about-item dt .icon { color: var(--red); }
.about-list dd {
  margin: 0;
  margin-top: 10px;
  max-width: var(--measure);
  font-size: 20px;
  line-height: 1.55;
  color: var(--text);
}
.about-credit {
  margin-top: 24px;
  font: 450 19px/1.5 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ */
/* 13. Project (DESIGN 2.8)                                            */
/* ------------------------------------------------------------------ */

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.project-col {
  padding: 28px;
  background-color: var(--g-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text);
}
.project-col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.project-col-title .icon { color: var(--red); }
.project-col p { color: var(--text); }
/* Round 5: the one-column panels at 768 are 720 px wide; hold their text to
   the page's measure like every other paragraph. */
.project-col p, .project-points { max-width: var(--measure); }
.project-points { list-style: none; display: grid; gap: 12px; }
.project-points li { position: relative; padding-left: 18px; }
.project-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background-color: var(--red);
}

/* ------------------------------------------------------------------ */
/* 14. Contact (DESIGN 2.9)                                            */
/* ------------------------------------------------------------------ */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
}
.contact-layout .section-head { margin-bottom: 0; }
.contact-panel {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 32px;
  background-color: var(--g-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.contact-panel .contact-icon { flex: 0 0 auto; margin-top: 8px; color: var(--red); }
.contact-email {
  font: 400 20px/1.55 var(--font-body);
  color: var(--text);
}
.contact-email.is-placeholder {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  border: 1px dashed var(--red-ink);
  border-radius: var(--r-sm);
}
.placeholder-tag {
  display: inline-block;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  background-color: var(--red);
  color: var(--on-red);
  font: 500 13px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 15. CTA band (DESIGN 2.10, 3.8)                                     */
/* ------------------------------------------------------------------ */

.section-cta { padding-top: 64px; padding-bottom: 96px; }
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 56px 64px;
  position: relative;
  overflow: hidden;
  background-color: var(--g-sunken);
  border: 1px solid rgba(218, 41, 28, 0.35);
  border-top-width: 0;
  border-radius: var(--r-lg);
}
/* The red top bar: a flat band the radius clips, not a 3 px border that
   tapers into the 1 px sides round the corners. */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background-color: var(--red);
  pointer-events: none;
}
.cta-text { max-width: 640px; }
.cta-text p {
  margin-top: 16px;
  font-size: 22px;
  line-height: 1.5;
  color: var(--text);
}
.cta-actions { flex: 0 0 auto; }

/* ------------------------------------------------------------------ */
/* 16. Footer (DESIGN 2.11, 3.9)                                       */
/* ------------------------------------------------------------------ */

.site-footer {
  position: relative;
  z-index: var(--z-page);
  padding: 56px 0 40px;
  background-color: var(--g-sunken);
  border-top: 1px solid var(--line);
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 26px/1 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--wordmark);
  text-decoration: none;
}
.footer-mark { display: block; height: 26px; width: auto; flex: 0 0 auto; }

.footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}
.footer-nav a:not(.btn) {
  font: 500 17px/1 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color var(--dur-ui) var(--ease-ui);
}
.footer-nav a:not(.btn):hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--red);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;               /* round 5: the credit and the Pause button share a centre line */
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 450 16px/1.5 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.footer-credit a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-ui) var(--ease-ui);
}
.footer-credit a:hover { color: var(--text-strong); }
/* Pause / play the background web (WCAG 2.2.2). Shown by landing-bg.js only
   while the web can move. It looks like a button (outline, icon), and a
   second copy is the second tab stop, revealed on focus like the skip link. */
.bg-toggle {
  align-self: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: 500 16px/1.5 var(--font-body);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.bg-toggle .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.bg-toggle .icon-play, .bg-toggle.is-paused .icon-pause { display: none; }
.bg-toggle.is-paused .icon-play { display: inline-block; }
.bg-toggle:hover {
  color: var(--text-strong);
  border-color: var(--red);
}
.bg-toggle[hidden] { display: none; }
.bg-toggle-skip {
  position: fixed;
  top: 0;
  left: 12px;
  z-index: var(--z-skip);
  transform: translateY(-120%);
  padding: 12px 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--red);
  color: var(--on-red);
  font: 500 16px/1 var(--font-body);
  letter-spacing: 0.01em;
  cursor: pointer;
}
.bg-toggle-skip:focus { transform: translateY(12px); }
.bg-toggle-skip:focus-visible { outline-color: var(--text-strong); }
.bg-toggle-skip[hidden] { display: none; }

/* Text that sits straight on the moving web gets a halo of the darkest
   gradient grey, so a line or a point crossing it never drops its contrast
   below the plain-background figure (DESIGN 1.2). R2: a wider third shadow,
   because the web is brighter. */
.brand-name, .nav-link, .intro-line, .hero-title, .hero-lead, .hero-proof,
.hero-actions .btn-secondary, .kicker, .section-head h2, .section-head .lead,
.step-title, .step-body p, .about-item dt, .about-list dd, .mock-legend,
.mock-scroll-hint, .report-mock figcaption, .about-credit {
  text-shadow: 0 0 2px #4E4F51, 0 0 6px rgba(78, 79, 81, 0.9), 0 0 14px rgba(78, 79, 81, 0.6);
}

/* ------------------------------------------------------------------ */
/* 17. Responsive                                                      */
/* ------------------------------------------------------------------ */

/* M: 1024 */
@media (max-width: 1199.98px) {
  .hero-inner { --hero-max: 760px; }
  .how-layout { gap: 48px; }
  .about-layout { gap: 48px; }
}

/* S: 768 */
@media (max-width: 959.98px) {
  .hero-inner { --hero-max: 640px; }
  .intro-line { font-size: 22px; }
  .iw-3 .iw-i { font-size: 17px; }
  .lead, .hero-lead { font-size: 22px; }

  .ways-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .how-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .how-head { position: static; }

  .about-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .project-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-panel { padding: 24px; }

  .cta-band {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 32px;
  }
}

/* The report mock (min-width 920 px) scrolls sideways below 1024 px: wherever
   it can, it fades at the right edge and shows the hint, and the last column
   clears the fade when scrolled to the end (DESIGN 2.5). */
@media (max-width: 1023.98px) {
  .mock-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .mock-table th:last-child, .mock-table td:last-child { padding-right: 36px; }
  .mock-scroll-hint { display: block; }
}

/* XS: 390 */
@media (max-width: 599.98px) {
  body { font-size: 18px; }
  .lead, .hero-lead, .cta-text p,
  .how-head .lead, .about-layout .lead, .contact-layout .lead { font-size: 21px; }
  .section-head { margin-bottom: 40px; }

  .nav-brand { gap: 10px; }
  .brand-mark { height: 24px; }
  .brand-name { font-size: 24px; }

  /* Round 3: on a phone the wordmark (64 px tall would be about 381 px wide)
     takes the column's width instead, up to 360 px; the tagline wraps. */
  .hero-mark { width: 100%; max-width: 360px; height: auto; }
  .intro-line { font-size: 20px; }
  .iw-3 .iw-i { font-size: 16px; }
  .hero-proof { font-size: 16px; }

  .way-card { padding: 24px; }
  .way-title { font-size: 22px; }
  .way-summary, .step-body p, .about-list dd, .contact-email { font-size: 18px; }
  .way-points { font-size: 18px; }
  .step-title { font-size: 22px; }

  .mock-table { font-size: 12px; }

  .about-item dt { font-size: 20px; }
  .about-credit { font-size: 18px; }

  .project-col { padding: 24px; font-size: 18px; }
  .project-col-title { font-size: 20px; }

  .contact-panel { padding: 20px; }

  .section-cta { padding-top: 48px; padding-bottom: 72px; }
  .cta-band { padding: 32px 20px; }
  .cta-actions, .cta-actions .btn { width: 100%; }

  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-brand { gap: 10px; font-size: 24px; }
  .footer-mark { height: 24px; }
  .footer-nav { gap: 16px 24px; }
  .footer-nav .btn { flex: 0 0 auto; width: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ */
/* 18. Print                                                           */
/* ------------------------------------------------------------------ */

@media print {
  .bg-base, .bg-web, .bg-vignette, .skip-link, .nav, .nav-toggle, .way-toggle,
  .hero-actions, .how-actions, .cta-actions, .nav-menu .btn, .footer-nav .btn, .bg-toggle,
  .bg-toggle-skip {
    display: none !important;
  }
  html, body { background: #FFFFFF !important; color: #000000 !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .page, .site-nav, .site-footer, .section, .way-card, .project-col,
  .contact-panel, .cta-band, .step-node {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  h1, h2, h3, p, li, dt, dd, .brand-name, .kicker, .nav-link, .iw-i, .mw-i,
  .footer-brand, .footer-nav a, .footer-credit a, kbd, code, .way-icon, .step-node {
    color: #000000 !important;
  }
  kbd { border-color: #999999 !important; }
  .site-nav { position: static; height: auto; padding: 16px 0; border-bottom: 1px solid #999999; }
  .hero { min-height: 0; padding: 32px 0; }
  .section { padding-block: 24px; }
  .how-head { position: static; }
  .way-card, .project-col, .contact-panel, .cta-band, .mock-paper {
    border: 1px solid #999999 !important;
    break-inside: avoid;
  }
  .reveal, .iw-i, .mw-i, .hero-lead, .hero-actions, .hero-proof, .hero-inner,
  .hero-title, .hero-mark .seg, .hero-mark .bid, .hm-bar {
    opacity: 1 !important;
    transform: none !important;
  }
  .kicker-rule, .step::before { clip-path: none !important; }
  .way-detail {
    position: static !important;
    grid-template-rows: 1fr !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
  }
  .cta-band::before { display: none; }
  .way-detail-inner {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
  }
  .mock-scroll { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .mock-table { min-width: 0; }
  .mock-scroll-hint { display: none !important; }
  .mock-table tr td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------------------------------------------ */
/* 19. Reduced motion (DESIGN 5.6) — keep this block last              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Round 3: the gate never hides the hero under reduced motion; should the
     setting change mid-entrance, nothing waits on a delay either. */
  *, *::before, *::after { animation-delay: 0ms !important; }
  .btn:hover .icon, .way-card, .way-card.is-open { transform: none !important; }
}