/* ==========================================================================
   LocStoc website: shared design system
   Section 1 is the token block (Prompt Pack Part 4.2, 4.3 and 4.7).
   Every font size and spacing value on the site comes from these tokens.
   ========================================================================== */

/* 1. TOKENS
   ========================================================================== */
:root {
  /* Colour (Part 4.2) */
  --navy: #002F6C;
  --navy-deep: #0B1F3F;
  --teal: #00BFB3;
  --teal-ink: #007A72;          /* teal for small text on light backgrounds (contrast 5.2:1 on white) */
  --teal-tint: #E6F8F7;
  --amber: #FFB500;
  --gold: #B8A36E;
  --signal-blue: #3B7DD8;
  --retail-pink: #F0215A;
  --retail-pink-deep: #C8103F;
  --ink: #1A2433;
  --slate: #5B6B7F;
  --mist: #F4F7FA;
  --white: #FFFFFF;
  --line: #DCE3EB;
  --line-dark: rgba(255, 255, 255, 0.14);

  /* Accent: teal site-wide, overridden by .theme-retail on retailers.html (Part 4.6) */
  --accent: var(--teal);
  --accent-ink: var(--teal-ink);
  --accent-tint: var(--teal-tint);
  --accent-contrast: var(--navy);

  /* Type families (Part 4.3) */
  --font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Type scale (Part 4.7) */
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-h1: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-kicker: 0.875rem;        /* Part 4.7 lists 12.5px to 14px; held at 14px to meet the 14px readable-text floor */
  --fs-caption: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-figure: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);
  --fs-numeral: clamp(4.5rem, 3rem + 6vw, 8rem);
  --fs-button: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);

  /* Line height and tracking (Part 4.7) */
  --lh-body: 1.6;
  --lh-lead: 1.5;
  --lh-head: 1.18;
  --lh-figure: 1;
  --ls-kicker: 0.16em;          /* raised to 0.25em from 480px */

  /* Layout (Part 4.7) */
  --container: 1200px;
  --container-wide: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --space-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.6vw, 1.125rem);
  --header-h: 60px;             /* 72px from 1024px */

  /* Shape and depth */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 18px 40px -24px rgba(0, 47, 108, 0.35);
  --shadow-card: 0 1px 0 rgba(0, 47, 108, 0.04), 0 24px 48px -32px rgba(0, 47, 108, 0.45);
  --cut: 9%;                    /* diagonal cut depth on photo panels */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 480px) {
  :root { --ls-kicker: 0.25em; }
}

@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}

/* Retailer theme (Part 4.6): only the page body takes the pink accent */
.theme-retail main {
  --accent: var(--retail-pink);
  --accent-ink: var(--retail-pink-deep);
  --accent-tint: #FDE8EE;
  --accent-contrast: var(--white);
}

/* 2. BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: var(--lh-head);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; max-width: 22ch; }
h2 { font-size: var(--fs-h2); font-weight: 700; max-width: 28ch; }
h3 { font-size: var(--fs-h3); font-weight: 700; }

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

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

a { color: var(--accent-ink); text-underline-offset: 0.2em; }
a:hover { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--navy);
  color: var(--white);
  font-size: var(--fs-button);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; color: var(--white); }

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

[hidden] { display: none !important; }

/* 3. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }

.section {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
}

.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: rgba(255, 255, 255, 0.86); }
.section--deep { background: var(--navy-deep); color: rgba(255, 255, 255, 0.86); }
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
.section--flush-top { padding-top: 0; }

.section--navy h1, .section--navy h2, .section--navy h3,
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--white); }
.section--navy strong, .section--deep strong { color: var(--white); }
.section--navy a:not(.btn), .section--deep a:not(.btn) { color: var(--teal); }

.section__head { margin-bottom: var(--space-block); position: relative; z-index: 1; }
.section__head > * + * { margin-top: var(--space-sm); }
.section__head--center { text-align: center; }
.section__head--center h2,
.section__head--center p { margin-inline: auto; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--slate);
  max-width: 52ch;
}
.section--navy .lead, .section--deep .lead { color: rgba(255, 255, 255, 0.78); }

/* Doubled class so stack spacing wins over component margin resets */
.stack.stack > * + * { margin-top: var(--space-sm); }
.stack-lg.stack-lg > * + * { margin-top: var(--space-block); }

.split {
  display: grid;
  gap: var(--space-block);
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-right { grid-template-columns: 5fr 7fr; }
  .split--wide-left { grid-template-columns: 7fr 5fr; }
  .split--top { align-items: start; }
}

.grid-2 {
  display: grid;
  gap: var(--space-block);
}
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 4. KICKERS, HAIRLINES AND LINKS
   ========================================================================== */
.kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.kicker::after {
  content: "";
  flex: 1 1 auto;
  max-width: 14rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(0, 191, 179, 0));
}
.section--navy .kicker, .section--deep .kicker, .hero-home .kicker { color: var(--teal); }

/* Section opener without text: the copy supplies no kicker, so only the hairline shows */
.opener {
  display: block;
  width: 3.5rem;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  margin-bottom: var(--space-sm);
}
.opener::after {
  content: "";
  display: block;
  width: 9rem;
  height: 1px;
  margin: 1px 0 0 3.5rem;
  background: linear-gradient(90deg, var(--gold), rgba(184, 163, 110, 0));
}
.section__head--center .opener { margin-inline: auto; }
.section__head--center .opener::after { display: none; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  font-family: var(--font-head);
  font-size: var(--fs-button);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.text-link::after {
  content: "";
  width: 1.6em;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.text-link:hover { color: var(--accent-ink); }
.text-link:hover::after { width: 2.4em; }
.section--navy .text-link, .section--deep .text-link { color: var(--white); }
.section--navy .text-link:hover, .section--deep .text-link:hover { color: var(--teal); }

/* 5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-head);
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--accent-contrast); }
.btn--primary:hover { background: var(--navy); color: var(--white); }
.section--navy .btn--primary:hover,
.section--deep .btn--primary:hover { background: var(--white); color: var(--navy); }

.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: var(--white); }

.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.btn--ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

/* Retail Pink buttons: 18px bold minimum for white text contrast (Part 4.6) */
.theme-retail main .btn--primary {
  font-size: var(--fs-lead);        /* 18px minimum from the token, as Part 4.6 requires */
  font-weight: 800;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* 6. HEADER AND NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -20px rgba(0, 47, 108, 0.5);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.logo:hover { color: var(--navy); }
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__word span { color: var(--teal-ink); }
.site-footer .logo, .site-footer .logo:hover { color: var(--white); }
.site-footer .logo__word span { color: var(--teal); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-toggle svg { width: 26px; height: 26px; }

.site-nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 120;
  width: min(88vw, 380px);
  padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
  background: var(--white);
  box-shadow: -24px 0 60px -30px rgba(11, 31, 63, 0.6);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
  overflow-y: auto;
}
.nav-open .site-nav {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s var(--ease);
}

.nav-close {
  position: absolute;
  top: calc((var(--header-h) - 48px) / 2);
  right: calc(var(--gutter) - 0.5rem);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-close svg { width: 24px; height: 24px; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(11, 31, 63, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease); }
.nav-open { overflow: hidden; }

.nav-list,
.nav-dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list > li { border-bottom: 1px solid var(--line); }
.nav-list > li:last-child { border-bottom: 0; padding-top: 1.25rem; }

.nav-link,
.nav-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0.5rem 0;
  font-family: var(--font-head);
  font-size: var(--fs-button);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.nav-link:hover,
.nav-trigger:hover { color: var(--teal-ink); }
.nav-link[aria-current="page"],
.nav-trigger.is-current { color: var(--teal-ink); }

.nav-trigger__chev {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.nav-trigger[aria-expanded="true"] .nav-trigger__chev { transform: rotate(180deg); }

.nav-dropdown { display: none; padding: 0 0 0.75rem 0.75rem; border-left: 2px solid var(--teal); margin-bottom: 0.75rem; }
.nav-trigger[aria-expanded="true"] + .nav-dropdown { display: block; }
.nav-dropdown a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav-dropdown a:hover { color: var(--teal-ink); background: var(--teal-tint); }
.nav-dropdown a[aria-current="page"] { color: var(--teal-ink); font-weight: 600; }

.nav-cta { width: 100%; }

@media (min-width: 1024px) {
  .nav-toggle,
  .nav-close,
  .nav-scrim { display: none; }

  .site-nav {
    position: static;
    width: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
    transition: none;
  }

  .nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
  .nav-list > li { position: relative; border-bottom: 0; }
  .nav-list > li:last-child { padding-top: 0; margin-left: 0.5rem; }

  .nav-link,
  .nav-trigger { width: auto; min-height: 44px; padding: 0; gap: 0.4rem; justify-content: flex-start; }

  .nav-dropdown {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: -1.25rem;
    min-width: 260px;
    padding: 0.6rem;
    margin: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-top: 3px solid var(--teal);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-card);
  }
  .nav-dropdown a { padding: 0.35rem 0.75rem; }

  .nav-cta { width: auto; }
}

/* 7. HOMEPAGE HERO (navy, network field, angled photo panel)
   ========================================================================== */
.hero-home {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(0, 191, 179, 0.16), rgba(0, 191, 179, 0) 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%);
  color: rgba(255, 255, 255, 0.85);
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
}

.hero-home h1 { color: var(--white); }

.hero-home__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}

.hero-home__copy > * + * { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.hero-home__copy .lead { color: rgba(255, 255, 255, 0.8); max-width: 50ch; }
.hero-home__copy .btn-row { padding-top: 0.5rem; }

@media (min-width: 1024px) {
  .hero-home__grid { grid-template-columns: 11fr 10fr; }
}

/* Network field: decorative dots, glowing nodes and arcs behind the hero */
.net-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.net-field__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(70% 70% at 75% 85%, #000 15%, transparent 70%);
          mask-image: radial-gradient(70% 70% at 75% 85%, #000 15%, transparent 70%);
}
.net-field svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 58%);
          mask-image: linear-gradient(90deg, transparent 42%, #000 58%);
}
@media (min-width: 1024px) { .net-field svg { display: block; } }
.net-node { fill: var(--teal); }
.net-glow { fill: var(--teal); opacity: 0.18; }
.net-arc { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0.55; stroke-dasharray: 3 5; }
.net-arc--gold { stroke: var(--gold); opacity: 0.6; stroke-dasharray: none; }

@media (prefers-reduced-motion: no-preference) {
  .net-glow { animation: net-pulse 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .net-glow:nth-of-type(2n) { animation-delay: 1.5s; }
  .net-glow:nth-of-type(3n) { animation-delay: 3s; }
}
@keyframes net-pulse {
  0%, 100% { opacity: 0.1; transform: scale(0.8); }
  50% { opacity: 0.28; transform: scale(1.25); }
}

.hero-home__visual { position: relative; }

.hero-home .hero-inset {
  position: absolute;
  left: clamp(-3rem, -3vw, -1rem);
  bottom: clamp(-2.5rem, -3vw, -1.25rem);
  width: min(48%, 260px);
  z-index: 3;
}
/* Keep the photo caption clear of the dashboard inset */
.hero-home__visual .media figcaption { align-self: flex-end; text-align: right; max-width: 30ch; }
@media (max-width: 479px) {
  .hero-home .hero-inset { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 1rem; }
  .hero-home__visual .media figcaption { align-self: flex-start; text-align: left; }
}

/* 8. INNER PAGE HERO (light, angled teal geometry, curved hairline, dot grid)
   ========================================================================== */
.hero-inner {
  position: relative;
  overflow: hidden;
  background: var(--mist);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
}
.hero-inner__content { position: relative; z-index: 2; }
.hero-inner__content > * + * { margin-top: clamp(1rem, 0.8rem + 1vw, 1.5rem); }

.hero-inner__shape {
  position: absolute;
  top: 0;
  right: 0;
  width: min(42vw, 560px);
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.hero-inner__shape::before,
.hero-inner__shape::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 72% 100%);
  background: linear-gradient(180deg, var(--accent), rgba(0, 191, 179, 0.25));
  opacity: 0.16;
}
.hero-inner__shape::after {
  clip-path: polygon(62% 0, 100% 0, 100% 62%);
  opacity: 0.22;
}
.theme-retail .hero-inner__shape::before { background: linear-gradient(180deg, var(--retail-pink), rgba(240, 33, 90, 0.2)); }
.theme-retail .hero-inner__shape::after { background: var(--retail-pink); }

@media (max-width: 767px) {
  .hero-inner__shape { display: none; }
}

/* 9. DECORATIVE MOTIFS (all aria-hidden in markup)
   ========================================================================== */
.curve-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 2vw, 2rem);
  height: 60px;
  z-index: 1;
  pointer-events: none;
}
.curve-line path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.curve-line .c-teal { stroke: var(--accent); opacity: 0.7; }
.curve-line .c-gold { stroke: var(--gold); opacity: 0.8; }

.dot-grid {
  position: absolute;
  width: 132px;
  height: 108px;
  background-image: radial-gradient(var(--accent) 1.4px, transparent 1.8px);
  background-size: 12px 12px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.dot-grid--tr { top: clamp(1.5rem, 3vw, 3rem); right: clamp(1rem, 3vw, 3rem); }
.dot-grid--bl { bottom: 1rem; left: clamp(1rem, 3vw, 3rem); height: 60px; }
.section--navy .dot-grid, .section--deep .dot-grid { background-image: radial-gradient(rgba(255,255,255,0.5) 1.2px, transparent 1.6px); opacity: 0.25; }

.diag-strip {
  position: absolute;
  top: -10%;
  width: 64px;
  height: 120%;
  background: linear-gradient(180deg, rgba(0, 191, 179, 0.14), rgba(0, 191, 179, 0.02));
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 0;
}
.diag-strip--right { right: -44px; }
.diag-strip--left { left: -44px; }

.map-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: radial-gradient(var(--navy) 1px, transparent 1.4px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(40% 55% at 70% 45%, #000 30%, transparent 70%), radial-gradient(22% 30% at 35% 60%, #000 30%, transparent 70%);
          mask-image: radial-gradient(40% 55% at 70% 45%, #000 30%, transparent 70%), radial-gradient(22% 30% at 35% 60%, #000 30%, transparent 70%);
}

.numeral {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-numeral);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--accent);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767px) {
  .dot-grid { width: 84px; height: 72px; opacity: 0.22; }
  .diag-strip { display: none; }
}

/* 10. MEDIA PLACEHOLDERS
   ========================================================================== */
.media {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--navy);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(0, 191, 179, 0.28), rgba(0, 191, 179, 0) 55%),
    linear-gradient(135deg, #E9EEF5 0%, #D5E4EE 55%, #C9E7E5 100%);
  isolation: isolate;
}
.media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(135deg, rgba(0, 47, 108, 0.035) 0 1px, transparent 1px 16px);
}

.media--16x9 { aspect-ratio: 16 / 9; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--21x9 { aspect-ratio: 21 / 9; }

.media__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(36px, 8%, 56px);
  height: auto;
  aspect-ratio: 1;
  top: 40%;
  transform: translate(-50%, -50%);
  color: var(--navy);
  opacity: 0.45;
}

.media__ratio {
  position: absolute;
  top: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  right: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  padding: 0.2rem 0.6rem;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
}

.media__label {
  position: relative;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--navy);
  opacity: 0.75;
}

.media figcaption,
.media__caption {
  position: relative;
  max-width: 44ch;
  font-size: var(--fs-caption);
  font-style: italic;
  line-height: 1.45;
  color: var(--navy);
}
.media__label + figcaption { margin-top: 0.2rem; }

.media--dark {
  color: var(--white);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(0, 191, 179, 0.4), rgba(0, 191, 179, 0) 55%),
    linear-gradient(135deg, #123A6E 0%, #0E2E57 55%, #0B4A5C 100%);
}
.media--dark::before { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 16px); }
.media--dark .media__icon,
.media--dark figcaption,
.media--dark .media__label { color: var(--white); }
.media--dark .media__ratio { background: rgba(255, 255, 255, 0.15); color: var(--white); }

/* Diagonal cut on the left edge from 768px; straight edges below */
@media (min-width: 768px) {
  .media--cut-left { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%); border-radius: 0 var(--radius) var(--radius) 0; padding-left: calc(var(--cut) + 1.25rem); }
  .media--cut-right { clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); border-radius: var(--radius) 0 0 var(--radius); padding-right: calc(var(--cut) + 1.25rem); }
}

/* Video placeholder */
.media--video .media__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -60%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 10px rgba(0, 191, 179, 0.2);
  display: grid;
  place-items: center;
}
.media--video .media__play svg { width: 26px; height: 26px; color: var(--navy); margin-left: 4px; }

/* Screenshot placeholder (dashboard, app screens) */
.screen {
  position: relative;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid var(--line);
}
.screen__bar {
  display: flex;
  gap: 5px;
  padding: 0.55rem 0.75rem;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.screen__bar i { width: 8px; height: 8px; border-radius: 50%; background: #C7D2DE; }
.screen__body { padding: 0.9rem; }
.screen__label {
  margin: 0.75rem 0 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--slate);
  line-height: 1.35;
}
.screen__chart { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.screen__chart i { flex: 1; border-radius: 3px 3px 0 0; background: var(--teal-tint); }
.screen__chart i:nth-child(3n) { background: var(--teal); }
.screen__chart i:nth-child(4n) { background: var(--signal-blue); opacity: 0.55; }
.screen__rows { margin-top: 0.75rem; display: grid; gap: 6px; }
.screen__rows i { display: block; height: 7px; border-radius: 4px; background: var(--mist); }
.screen__rows i:nth-child(1) { width: 90%; }
.screen__rows i:nth-child(2) { width: 70%; }
.screen__rows i:nth-child(3) { width: 80%; }

/* Diagram placeholder (Stage 1 only; replaced by inline SVG in Stage 2) */
.diagram-ph {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  min-height: clamp(220px, 30vw, 360px);
  padding: 2rem;
  text-align: center;
  border: 2px dashed rgba(0, 122, 114, 0.45);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(rgba(0, 191, 179, 0.18) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
    rgba(230, 248, 247, 0.55);
}
.diagram-ph__id {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--teal-ink);
}
.diagram-ph__name { font-weight: 600; color: var(--navy); max-width: 40ch; }
.diagram-ph__note { font-size: var(--fs-caption); color: var(--slate); }
.section--navy .diagram-ph,
.section--deep .diagram-ph {
  border-color: rgba(0, 191, 179, 0.5);
  background: radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.6px) 0 0 / 16px 16px, rgba(255, 255, 255, 0.03);
}
.section--navy .diagram-ph__id, .section--deep .diagram-ph__id { color: var(--teal); }
.section--navy .diagram-ph__name, .section--deep .diagram-ph__name { color: var(--white); }
.section--navy .diagram-ph__note, .section--deep .diagram-ph__note { color: rgba(255, 255, 255, 0.7); }

.diagram { position: relative; z-index: 1; }
.diagram-caption,
.caption {
  margin-top: 0.9rem;
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--slate);
  max-width: 60ch;
}
.section--navy .diagram-caption, .section--deep .diagram-caption,
.section--navy .caption, .section--deep .caption { color: rgba(255, 255, 255, 0.68); }

/* Swap for diagrams that need a vertical mobile version */
.diagram__mobile { display: block; }
.diagram__desktop { display: none; }
@media (min-width: 1024px) {
  .diagram__mobile { display: none; }
  .diagram__desktop { display: block; }
}

/* 11. LOGO STRIP
   ========================================================================== */
.logo-strip { display: grid; gap: var(--space-sm); }
.logo-strip__label { margin: 0; }
.logo-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}
.logo-tile {
  display: grid;
  place-items: center;
  gap: 0.15rem;
  min-height: 84px;
  padding: 0.75rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  filter: grayscale(1);
}
.logo-tile__name {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #7A8595;
}
.logo-tile__ph { font-size: var(--fs-caption); color: var(--slate); line-height: 1.2; }

/* 12. STATEMENT BAND
   ========================================================================== */
.band {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.band__text {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 52ch;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--white);
}
.band__text--headline {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: var(--lh-head);
}
.band .diag-strip { background: linear-gradient(180deg, rgba(0, 191, 179, 0.22), rgba(0, 191, 179, 0.03)); }
@media (max-width: 479px) {
  .band__text { text-transform: none; letter-spacing: 0.02em; }
}

/* 13. CARDS AND NUMBERED ITEMS
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent);
}
.card--blue::before { background: var(--signal-blue); }
.card h3 { color: var(--navy); }
.card p { color: var(--ink); }
.card .btn { align-self: flex-start; margin-top: auto; }
.card__body { flex: 1 1 auto; }

.num-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.num-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  align-items: start;
}
.num-item .numeral { font-size: var(--fs-figure); margin-top: -0.12em; min-width: 1.4em; }
.num-item h3 { margin-bottom: 0.35rem; }
.num-item p { color: var(--ink); }

/* Two-problem columns */
.pair {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair__item {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  background: var(--white);
}
.pair__item p { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink); }
.pair__item strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.pair__item:nth-child(1) strong { color: var(--navy); }
.pair__item:nth-child(2) strong { color: var(--teal-ink); }
.pair__rule { display: block; width: 44px; height: 3px; margin-bottom: 1rem; border-radius: 3px; background: var(--signal-blue); }
.pair__item:nth-child(2) .pair__rule { background: var(--amber); }

/* 14. STAT ROW AND CREDENTIAL STRIP
   ========================================================================== */
.stat-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.stat {
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}
.stat__rule { display: block; width: 40px; height: 3px; margin-bottom: 0.9rem; border-radius: 3px; background: var(--amber); }
.stat:nth-child(4n+2) .stat__rule { background: var(--teal); }
.stat:nth-child(4n+3) .stat__rule { background: var(--signal-blue); }
.stat__figure { display: block; font-family: var(--font-head); font-size: var(--fs-figure); font-weight: 800; line-height: var(--lh-figure); color: var(--navy); letter-spacing: -0.03em; }
.stat__label { display: block; margin-top: 0.5rem; color: var(--slate); max-width: 26ch; }

@media (min-width: 768px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 1.5rem clamp(1rem, 2vw, 2rem); border-top: 0; border-left: 1px solid var(--line); }
  .stat:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1024px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .stat:nth-child(2n+1) { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 2rem); }
  .stat:first-child { border-left: 0; padding-left: 0; }
}

.cred-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.cred {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.4;
}
.cred:first-child { border-top: 0; }
.cred__icon {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-ink);
}
@media (min-width: 768px) {
  .cred-strip { grid-template-columns: repeat(2, 1fr); }
  .cred { padding: 1.5rem clamp(1rem, 2vw, 1.75rem); border-top: 0; border-left: 1px solid var(--line); }
  .cred:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .cred:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .cred-strip { grid-template-columns: repeat(4, 1fr); }
  .cred { flex-direction: column; align-items: flex-start; }
  .cred:nth-child(2n+1) { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 1.75rem); }
  .cred:first-child { border-left: 0; padding-left: 0; }
  .cred:nth-child(n+3) { border-top: 0; }
}

.flag-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}
.flag-row li { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--navy); }
.flag { width: 36px; height: 24px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 47, 108, 0.15); overflow: hidden; flex: none; }

/* 15. TABLES
   ========================================================================== */
.table-wrap {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.table th,
.table td {
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.table thead th {
  font-family: var(--font-head);
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border-bottom: 2px solid var(--navy);
}
.table tbody th { font-weight: 600; color: var(--navy); }
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }
.table .is-highlight { background: var(--teal-tint); }
.table--sticky th:first-child,
.table--sticky td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--white);
  box-shadow: 1px 0 0 var(--line);
}
.table-note { margin-top: 0.75rem; font-size: var(--fs-caption); color: var(--slate); font-style: italic; }

/* 16. NUMBERED FLOW (wave connector)
   ========================================================================== */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
  z-index: 1;
  counter-reset: flow;
}
.flow__step {
  position: relative;
  padding: 0 0 2rem 3.75rem;
}
.flow__step::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 2.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(0, 191, 179, 0.15));
}
.flow__step:last-child::before { display: none; }
.flow__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: 800;
  color: var(--accent-contrast);
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-tint);
}
.flow__step h3 { margin-bottom: 0.35rem; }

@media (min-width: 1024px) {
  .flow--h { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.5rem; }
  .flow--h .flow__step { padding: 3.5rem 0 0; }
  .flow--h .flow__step::before { left: 2.75rem; right: -1.5rem; top: 1.1rem; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(0, 191, 179, 0.2)); }
}

/* 17. FORMS AND TABS
   ========================================================================== */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.4rem; }
.field__label { font-weight: 600; color: var(--navy); font-size: var(--fs-body); }
.field__req { color: var(--accent-ink); margin-left: 0.15em; }
.field__opt { color: var(--slate); font-weight: 400; font-size: var(--fs-caption); margin-left: 0.35em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: var(--fs-body);        /* 16px minimum from the token prevents iOS zoom */
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid #C4CFDB;
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.75rem; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #B42318; }
.field__error { display: none; font-size: var(--fs-caption); color: #B42318; font-weight: 600; }
.field.is-invalid .field__error { display: block; }

.checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; border: 0; padding: 0; margin: 0; }
.checks legend { padding: 0; margin-bottom: 0.5rem; }
.check { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--teal-ink); }

.form__consent { font-size: var(--fs-caption); color: var(--slate); }
.form-success {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--accent-tint);
  border-left: 4px solid var(--accent);
  color: var(--navy);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
.form-success:focus { outline: none; }

.tabs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-block); }
.tabs__tab {
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-head);
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.tabs__tab[aria-selected="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* 18. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 2.5rem;
}
.site-footer__signoff {
  position: relative;
  z-index: 1;
  margin: 1.75rem 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
  max-width: 24ch;
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.015em;
  color: var(--white);
}
.footer-links {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  border-top: 1px solid var(--line-dark);
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 600;
}
.footer-links a:hover { color: var(--teal); }
.retail-marker {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--retail-pink);
  box-shadow: 0 0 0 3px rgba(240, 33, 90, 0.25);
  flex: none;
}
.ph-text {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px dashed currentColor;
  border-radius: 4px;
  opacity: 0.8;
}
.site-footer .curve-line { top: 1.25rem; bottom: auto; }

/* Visible placeholder marker for content still to be supplied */
.placeholder {
  background: rgba(255, 181, 0, 0.18);
  outline: 1px dashed #B07D00;
  outline-offset: 1px;
  border-radius: 3px;
  padding: 0 0.2em;
}

/* 19. SCROLL REVEAL (only when JavaScript is running and motion is allowed)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal-delay-1 { transition-delay: 0.1s; }
  .js .reveal-delay-2 { transition-delay: 0.2s; }
  .js .reveal-delay-3 { transition-delay: 0.3s; }
}

/* 20. HOMEPAGE SECTION DETAILS
   ========================================================================== */
.home-logos { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: 1px solid var(--line); }

.photo-pair { display: grid; gap: 1rem; position: relative; z-index: 1; }
@media (min-width: 480px) { .photo-pair { grid-template-columns: 1fr 1fr; align-items: end; } }
@media (min-width: 480px) { .photo-pair .media:first-child { aspect-ratio: 3 / 4; } }

.case-band { display: grid; gap: var(--space-block); align-items: center; position: relative; z-index: 1; }
@media (min-width: 768px) { .case-band { grid-template-columns: 5fr 6fr; } }
.case-band .media { aspect-ratio: 16 / 9; }

.next-cards { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); position: relative; z-index: 1; }
@media (min-width: 768px) { .next-cards { grid-template-columns: 1fr 1fr; } }
.card__kicker { margin: 0; }

.network-head { max-width: 760px; }
.nowrap { white-space: nowrap; }

/* 21. DIAGRAMS (Stage 2)
   Shared illustration language: rounded nodes with soft gradients and shadows,
   curved connectors, small line icons. SVG label text is set at a size that
   renders at 14px or more at every width where that SVG version is shown.
   ========================================================================== */

/* Variant: split that stays stacked until 1024px (used where a diagram needs full width on tablet) */
@media (min-width: 768px) {
  .split.split--lg { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .split.split--lg { grid-template-columns: 5fr 7fr; }
}

/* Variant: swap mobile and desktop diagram versions at 768px instead of 1024px */
@media (min-width: 768px) {
  .diagram--swap-md .diagram__mobile { display: none; }
  .diagram--swap-md .diagram__desktop { display: block; }
}

.dg { width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.dg text { font-family: var(--font-body); }

.dg-row-label { font-family: var(--font-head); font-weight: 700; fill: var(--navy); letter-spacing: -0.01em; }
.dg-name { font-weight: 600; fill: var(--navy); }
.dg-name--strong { font-weight: 700; }
.dg-muted { fill: var(--slate); }
.dg-teal-ink { fill: var(--teal-ink); }

.dg-line { fill: none; stroke: #9FB0C3; stroke-width: 2; stroke-linecap: round; }
.dg-line--teal { stroke: var(--teal); stroke-width: 2.5; }
.dg-line--data { stroke: var(--teal-ink); stroke-width: 2; stroke-dasharray: 6 6; }
.dg-line--hair { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 2 6; }

.dg-pill-margin { fill: #FFF3D1; stroke: var(--amber); stroke-width: 1.5; }
.dg-pill-margin-text { fill: #6E4E00; font-weight: 700; }
.dg-pill-channel { fill: var(--white); stroke: var(--teal); stroke-width: 1.5; }
.dg-pill-channel-text { fill: var(--teal-ink); font-weight: 700; }
.dg-pill-plain { fill: var(--white); stroke: #C4D7E0; stroke-width: 1.2; }
.dg-pill-data { fill: var(--mist); }

.dg-bar-base { fill: url(#dg-navy-grad); }
.dg-bar-margin { fill: var(--amber); }
.dg-bar-locstoc { fill: var(--teal); }

.dg-icon-light { color: var(--white); }
.dg-icon-dark { color: var(--navy); }

/* Bars grow in gently when the diagram scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal .dg-grow { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: transform 0.6s var(--ease); }
  .js .reveal.is-visible .dg-grow { transform: scaleX(1); }
  .js .reveal.is-visible .dg-grow--1 { transition-delay: 0.15s; }
  .js .reveal.is-visible .dg-grow--2 { transition-delay: 0.3s; }
  .js .reveal.is-visible .dg-grow--3 { transition-delay: 0.45s; }
  .js .reveal.is-visible .dg-grow--4 { transition-delay: 0.6s; }
  .js .reveal.is-visible .dg-grow--5 { transition-delay: 0.75s; }
  .dg-flow { stroke-dasharray: 6 8; animation: dg-flow 1.6s linear infinite; }
  .dg-pulse { animation: dg-pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes dg-flow { to { stroke-dashoffset: -28; } }
@keyframes dg-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 0.5; transform: scale(1.12); } }

/* D1 frame */
.d1 {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* D2: demand split panel (HTML labels with SVG icons, so text stays legible in a narrow column) */
.d2 {
  display: grid;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  margin: 0;
}
@media (min-width: 480px) { .d2 { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: stretch; } }

.d2__panel {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.d2__panel--phone {
  display: grid;
  place-items: center;
  background:
    radial-gradient(90% 70% at 50% 110%, rgba(0, 191, 179, 0.28), rgba(0, 191, 179, 0) 70%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}

.vflow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vflow__step { position: relative; display: flex; align-items: center; gap: 0.9rem; padding: 12px 0; }
.vflow__step + .vflow__step::before {
  content: "";
  position: absolute;
  left: 23px;
  top: -12px;
  height: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--from, #9FB0C3), var(--to, #9FB0C3));
  border-radius: 2px;
}
.vflow__badge {
  position: relative;
  z-index: 1;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 18px -10px rgba(0, 47, 108, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.vflow__badge svg { width: 24px; height: 24px; }
.vflow__name { font-weight: 600; color: var(--navy); line-height: 1.3; }
.vflow__step--partner { --c: var(--navy); }
.vflow__step--locstoc { --c: var(--teal); }
.vflow__step--client { --c: var(--amber); }
.vflow__step--brand { --c: var(--signal-blue); }
.vflow__step--partner .vflow__badge { background: linear-gradient(145deg, #1B4F91, var(--navy)); color: var(--white); }
.vflow__step--locstoc .vflow__badge { background: linear-gradient(145deg, #3FD6CC, var(--teal)); color: var(--navy); }
.vflow__step--client .vflow__badge { background: linear-gradient(145deg, #FFCB4D, var(--amber)); color: var(--navy); }
.vflow__step--brand .vflow__badge { background: linear-gradient(145deg, #6A9DE3, var(--signal-blue)); color: var(--white); }
.vflow__step--locstoc { --from: var(--navy); --to: var(--teal); }
.vflow__step--client { --from: var(--teal); --to: var(--amber); }
.vflow__step--brand { --from: var(--amber); --to: var(--signal-blue); }

.d2__panel--flow { display: flex; align-items: center; }
.d2 .d2__voucher {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  width: 72px;
  height: auto;
  transform: rotate(-8deg);
  opacity: 0.95;
}

/* Phone mockup */
.phone {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 9 / 18.5;
  padding: 9px;
  border-radius: 34px;
  background: linear-gradient(160deg, #1E3A63, #0A1830);
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 26px;
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone__notch { position: absolute; top: 7px; left: 50%; width: 34%; height: 14px; transform: translateX(-50%); border-radius: 10px; background: #0A1830; z-index: 2; }
.phone__head { padding: 30px 12px 10px; background: linear-gradient(160deg, var(--navy), #0E3F80); display: flex; align-items: center; gap: 8px; }
.phone__logo { width: 30px; height: 30px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 3px var(--signal-blue); flex: none; }
.phone__head i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.55); }
.phone__banner { margin: 10px; height: 20%; border-radius: 10px; background: linear-gradient(120deg, var(--teal-tint), #BFEDEA); position: relative; overflow: hidden; }
.phone__banner::after { content: ""; position: absolute; right: -10%; bottom: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 191, 179, 0.35); }
.phone__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 10px; }
.phone__tile { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); position: relative; }
.phone__tile::after { content: ""; position: absolute; left: 8px; right: 30%; bottom: 8px; height: 5px; border-radius: 3px; background: #CBD5E1; }
.phone__label {
  margin: auto 10px 10px;
  padding-top: 8px;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.3;
  color: var(--slate);
}

/* D3: network loop */
.d3-name { font-family: var(--font-head); font-weight: 700; fill: var(--navy); }
.d3-arc { fill: none; stroke: url(#d3-arc-grad); stroke-width: 3; stroke-linecap: round; }
.d3-arc-m { fill: none; stroke: url(#d3m-arc-grad); stroke-width: 3; stroke-linecap: round; }
.d3-label-text { fill: var(--teal-ink); font-weight: 700; }
.d3-ring { fill: none; stroke: rgba(0, 191, 179, 0.35); stroke-width: 1; }

/* D4: dotted regional map (dark backgrounds) */
.map-svg { width: 100%; height: auto; overflow: visible; }
.map-svg .m-land { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-linecap: round; }
.map-svg .m-next { fill: none; stroke: rgba(0, 191, 179, 0.55); stroke-linecap: round; }
.map-svg .m-live { fill: none; stroke: var(--teal); stroke-linecap: round; }
.map-svg .m-arc { fill: none; stroke: rgba(0, 191, 179, 0.7); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.map-svg .m-arc--live { stroke: var(--teal); stroke-dasharray: none; stroke-width: 2; }
.map-svg .m-node--live { fill: var(--teal); stroke: var(--white); stroke-width: 2; }
.map-svg .m-node--next { fill: var(--navy-deep); stroke: var(--teal); stroke-width: 2.5; }
.map-svg .m-pulse { fill: var(--teal); opacity: 0.25; }
.map-svg .m-hq { fill: var(--white); }
.map-svg .m-hq-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.map-svg .m-leader { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }
.map-svg .m-name { font-family: var(--font-head); font-weight: 700; fill: var(--white); }
.map-svg .m-status { font-family: var(--font-body); font-weight: 600; fill: rgba(255, 255, 255, 0.78); }
.map-svg .m-status--live { fill: var(--teal); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .map-svg .m-pulse { animation: dg-pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}

/* Hero dotted map (decorative) */
.net-field .h-dot { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-linecap: round; }
.net-field .h-dot--mkt { stroke: rgba(0, 191, 179, 0.5); }
.net-arc--live { stroke-dasharray: none; opacity: 0.8; stroke-width: 1.5; }
.net-glow--hq { fill: var(--gold); }
.net-node--hq { fill: var(--white); }
@media (min-width: 1024px) { .net-field__dots { display: none; } }
@media (max-width: 767px) { .d1 { padding: 0.75rem; } }
/* Dark halo keeps map labels legible where they cross land dots */
.map-svg .m-name,
.map-svg .m-status { paint-order: stroke; stroke: var(--navy-deep); stroke-width: 6px; stroke-linejoin: round; }

/* 22. INNER PAGE COMPONENTS (Stage 3)
   Reusable across the For Brands pages and later stages.
   ========================================================================== */

/* Inner hero with a photo panel */
.hero-inner--split .hero-inner__content { display: grid; gap: var(--space-block); align-items: center; }
@media (min-width: 1024px) { .hero-inner--split .hero-inner__content { grid-template-columns: 11fr 9fr; } }
.hero-inner--split .hero-inner__copy > * + * { margin-top: clamp(1rem, 0.8rem + 1vw, 1.5rem); }

/* Three-part row with line icons and hairline dividers (not tiles) */
.triad {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
}
.triad__item { padding: clamp(1.5rem, 1.2rem + 1vw, 2rem) 0; border-bottom: 1px solid var(--line); }
.triad__icon { width: 44px; height: 44px; color: var(--accent-ink); margin-bottom: 1rem; }
.triad__item h3 { margin-bottom: 0.5rem; font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 768px) {
  .triad { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .triad__item { padding: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem) clamp(1.25rem, 2vw, 2.25rem); border-bottom: 0; border-left: 1px solid var(--line); }
  .triad__item:first-child { border-left: 0; padding-left: 0; }
}

/* Labelled definition list (channel families and similar) */
.def-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.def-list li { position: relative; padding-left: 1.4rem; max-width: var(--measure); }
.def-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }

/* Photo row */
.photo-row { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); position: relative; z-index: 1; }
@media (min-width: 768px) { .photo-row--3 { grid-template-columns: repeat(3, 1fr); } .photo-row--2 { grid-template-columns: repeat(2, 1fr); } }

/* Illustration frame for diagrams sitting on a light panel */
.illus {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(rgba(0, 191, 179, 0.16) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(180deg, var(--white), #EEF6F7);
  box-shadow: var(--shadow-card);
}
.illus--flat { box-shadow: none; border: 1px solid var(--line); }

/* D10: modular shelf and Mini Module side by side */
.d10 { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(0.75rem, 2vw, 2rem); align-items: end; margin: 0; }
.d10__part { display: grid; gap: 0.75rem; justify-items: center; text-align: center; }
.d10__part svg { width: 100%; height: auto; }
.d10__label { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: var(--fs-body); line-height: 1.3; }

/* D11: numbered selling layers beside the illustrated shelf */
.layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; z-index: 1; }
.layers__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1.1rem;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.4rem) 0;
  border-top: 1px solid var(--line);
}
.layers__item:first-child { border-top: 0; padding-top: 0; }
.layers__num {
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--navy);
  background: var(--teal);
  box-shadow: 0 0 0 6px var(--teal-tint);
}
.layers__item h3 { font-size: var(--fs-h3); }
.layers__item p { color: var(--ink); }

/* Before and after pair */
.pair-media { display: grid; gap: 1rem; align-items: center; position: relative; z-index: 1; }
.pair-media__arrow { display: none; }
@media (min-width: 768px) {
  .pair-media { grid-template-columns: 1fr auto 1fr; }
  .pair-media__arrow { display: block; width: 44px; height: 44px; color: var(--accent-ink); }
}

/* D12 layout: horizontal flow with an operations photo on a second row */
.ops { display: grid; gap: var(--space-block); position: relative; z-index: 1; }
.flow--ops .flow__step p { color: var(--ink); }


/* D13: anonymised retailer card mockup */
.rcards { position: relative; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.5rem) clamp(0.5rem, 2vw, 1.5rem); }
.rcard {
  position: relative;
  width: min(100%, 380px);
  padding: clamp(1.1rem, 1rem + 0.8vw, 1.6rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
.rcard--back {
  position: absolute;
  width: min(92%, 350px);
  top: clamp(0.2rem, 1.2vw, 1rem);
  transform: rotate(-4deg) translateX(-6%);
  opacity: 0.7;
  box-shadow: none;
}
.rcard--back .rcard__body { visibility: hidden; }
.rcard__head { display: flex; align-items: center; gap: 0.8rem; padding-bottom: 1rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--line); }
.rcard__icon { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--teal-tint); color: var(--teal-ink); flex: none; }
.skel { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #E3E9F0, #EEF2F6); }
.rcard__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px dashed var(--line); }
.rcard__row:last-child { border-bottom: 0; padding-bottom: 0; }
.rcard__label { font-size: var(--fs-caption); font-weight: 600; color: var(--slate); }
.meter { display: flex; gap: 4px; }
.meter i { flex: 1; height: 10px; border-radius: 3px; background: var(--teal); }
.meter i.off { background: var(--teal-tint); }

/* D14: seven-stage insurance coverage line */
.cover {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  position: relative;
  z-index: 1;
}
.cover__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0;
}
.cover__item::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--teal), rgba(0, 191, 179, 0.35));
  z-index: 0;
}
.cover__item:first-child::before { top: 50%; }
.cover__item:last-child::before { bottom: 50%; }
.cover__mark {
  position: relative;
  z-index: 1;
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line), 0 10px 18px -12px rgba(0, 47, 108, 0.5);
}
.cover__mark svg { width: 26px; height: 26px; }
.cover__item--end .cover__mark { background: var(--navy); color: var(--white); box-shadow: 0 10px 18px -10px rgba(0, 47, 108, 0.7); }
.cover__item--stage .cover__mark { color: var(--teal-ink); }
.cover__label { font-weight: 600; color: var(--navy); line-height: 1.3; }
@media (min-width: 768px) {
  .cover { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .cover__item { flex-direction: column; text-align: center; gap: 0.75rem; padding: 0; }
  .cover__item::before { left: 0; right: 0; top: 24px; bottom: auto; width: auto; height: 2px; background: var(--teal); }
  .cover__item:first-child::before { left: 50%; top: 24px; }
  .cover__item:last-child::before { right: 50%; bottom: auto; }
  .cover__label { font-size: var(--fs-caption); }
}

/* D15: connected systems with device illustrations */
.systems { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); position: relative; z-index: 1; }
@media (min-width: 600px) { .systems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .systems { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .systems > .system { grid-column: span 2; }
  .systems > .system:nth-child(-n+2) { grid-column: span 3; }
}
.system {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.system--retail { border-top: 4px solid var(--retail-pink); }
.system h3 { font-size: var(--fs-h3); }
.system__by { font-size: var(--fs-caption); color: var(--slate); }
.system__by strong { color: var(--navy); }
.system p { color: var(--ink); }
.system__stage {
  display: grid;
  place-items: end center;
  height: 196px;
  margin-bottom: 0.4rem;
  border-radius: var(--radius);
  background: radial-gradient(80% 90% at 50% 100%, rgba(0, 191, 179, 0.18), rgba(0, 191, 179, 0) 70%), var(--mist);
  overflow: hidden;
  position: relative;
}
.system__ph {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.1rem 0.55rem;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--slate);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
}

.dev-laptop { width: 80%; max-width: 250px; margin-bottom: 18px; }
.dev-laptop__screen { aspect-ratio: 16 / 10; padding: 6px; border-radius: 10px 10px 0 0; background: #13294B; }
.dev-laptop__ui { height: 100%; border-radius: 4px; background: var(--white); padding: 8px; display: grid; grid-template-rows: auto 1fr; gap: 6px; }
.dev-laptop__ui .screen__chart { height: auto; }
.dev-laptop__base { height: 10px; margin: 0 -8%; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #C9D4E0, #9FB0C3); }

.dev-phone {
  width: 88px;
  aspect-ratio: 9 / 18;
  padding: 5px;
  margin-bottom: -26px;
  border-radius: 18px;
  background: #13294B;
  box-shadow: 0 16px 28px -16px rgba(0, 0, 0, 0.6);
}
.dev-phone__ui { height: 100%; border-radius: 13px; background: var(--white); overflow: hidden; display: grid; grid-template-rows: 24% 1fr; }
.dev-phone__bar { background: var(--c, var(--teal)); }
.dev-phone__body { padding: 7px; display: grid; gap: 5px; align-content: start; }
.dev-phone__body i { display: block; height: 16px; border-radius: 4px; background: var(--mist); }
.dev-phone__body i:nth-child(odd) { background: #E6EEF5; }
.dev-phone--pink { --c: var(--retail-pink); }
.dev-phone--teal { --c: var(--teal); }
.dev-phone--navy { --c: var(--navy); }

.dev-camera { width: 120px; margin-bottom: 28px; }

/* D16 and other short horizontal flows: badges with connectors */
.hflow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
  z-index: 1;
}
.hflow__step { position: relative; display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0; }
.hflow__step + .hflow__step::before {
  content: "";
  position: absolute;
  left: 31px;
  top: -0.7rem;
  height: 1.4rem;
  width: 2px;
  background: var(--teal);
}
.hflow__badge {
  position: relative;
  z-index: 1;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 24px -14px rgba(0, 47, 108, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hflow__badge svg { width: 30px; height: 30px; }
.hflow__name { font-family: var(--font-head); font-weight: 700; color: var(--navy); line-height: 1.3; }
.b-amber { background: linear-gradient(145deg, #FFCB4D, var(--amber)); color: var(--navy); }
.b-teal { background: linear-gradient(145deg, #3FD6CC, var(--teal)); color: var(--navy); }
.b-navy { background: linear-gradient(145deg, #1B4F91, var(--navy)); color: var(--white); }
.b-blue { background: linear-gradient(145deg, #6A9DE3, var(--signal-blue)); color: var(--white); }
.b-pink { background: linear-gradient(145deg, #FF5C86, var(--retail-pink)); color: var(--white); }
@media (min-width: 768px) {
  .hflow { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .hflow__step { flex-direction: column; text-align: center; padding: 0; gap: 0.9rem; }
  .hflow__step + .hflow__step::before {
    left: calc(-50% + 40px);
    right: calc(50% + 40px);
    top: 31px;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--teal), var(--signal-blue));
  }
  .hflow__step + .hflow__step::after {
    content: "";
    position: absolute;
    top: 26px;
    right: calc(50% + 38px);
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--signal-blue);
    border-right: 2px solid var(--signal-blue);
    transform: rotate(45deg);
  }
}

/* Logo mark inside a badge */
.badge-logo { display: grid; gap: 4px; width: 28px; }
.badge-logo i { display: block; height: 5px; border-radius: 3px; background: var(--white); }
.badge-logo i:first-child { background: var(--teal); }
.badge-logo i:last-child { width: 62%; }

/* Compact text block for short sections */
.note-block {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-sm);
  padding-left: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-left: 3px solid var(--accent);
}

/* Closing call to action band */
.cta-band { text-align: left; }
.cta-band .section__head { margin-bottom: 0; }
.cta-band__inner { display: grid; gap: var(--space-block); align-items: end; position: relative; z-index: 1; }
@media (min-width: 1024px) { .cta-band__inner { grid-template-columns: 1.3fr 1fr; } }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.media--21x9 { aspect-ratio: 21 / 9; }
@media (max-width: 767px) { .media--21x9 { aspect-ratio: 16 / 9; } }

/* 23. DEMAND CHANNELS COMPONENTS (Stage 3)
   ========================================================================== */

/* Status pill, for example "Live since" lines */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.9rem 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal-ink);
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: 700;
  max-width: none;
}
.status-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(0, 191, 179, 0.25); }

/* D6: placement and demand by route */
.routes {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
}
.routes__head,
.routes__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) 2.25rem minmax(0, 1.6fr);
  align-items: center;
  gap: 0.75rem;
}
.routes__head span {
  font-family: var(--font-head);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--slate);
}
.routes__head span:last-child { grid-column: 3; }
.routes__cell {
  min-height: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.routes__cell--muted { color: var(--slate); font-weight: 400; background: var(--mist); border-style: dashed; }
.routes__arrow { width: 2.25rem; height: 2.25rem; color: #9FB0C3; }
.routes__row--locstoc .routes__cell { background: var(--teal-tint); border-color: rgba(0, 191, 179, 0.5); }
.routes__row--locstoc .routes__arrow { color: var(--teal-ink); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(0, 191, 179, 0.6);
  color: var(--teal-ink);
  font-weight: 700;
  font-size: var(--fs-caption);
}
.chip svg { width: 18px; height: 18px; }
@media (max-width: 599px) {
  .routes__head { display: none; }
  .routes__row { grid-template-columns: 1fr; gap: 0.4rem; }
  .routes__arrow { transform: rotate(90deg); justify-self: center; width: 1.75rem; height: 1.75rem; }
  .routes__row + .routes__row { margin-top: 0.75rem; }
}

/* D7: four actors, each in its own colour */
.actors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  position: relative;
  z-index: 1;
  counter-reset: actor;
}
.actor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--c);
}
.actor__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.actor__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 20px -12px rgba(0, 47, 108, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.actor__badge svg { width: 28px; height: 28px; }
.actor__num { font-family: var(--font-head); font-size: var(--fs-numeral); font-weight: 800; line-height: 0.8; color: var(--c); opacity: 0.2; }
.actor p { color: var(--ink); }
.actor--partner { --c: var(--navy); }
.actor--locstoc { --c: var(--teal); }
.actor--client { --c: var(--amber); }
.actor--brand { --c: var(--signal-blue); }
@media (min-width: 640px) { .actors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .actors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .actor + .actor::before {
    content: "";
    position: absolute;
    top: calc(clamp(1.25rem, 1rem + 0.8vw, 1.6rem) + 28px);
    left: calc(-1 * clamp(1rem, 0.75rem + 1vw, 1.5rem) - 2px);
    width: calc(clamp(1rem, 0.75rem + 1vw, 1.5rem) + 4px);
    height: 2px;
    background: #9FB0C3;
  }
}
.actor .actor__num { font-size: var(--fs-figure); }

/* D9: voucher and top-up bars */
.topup { display: grid; gap: 1.25rem; position: relative; z-index: 1; }
.topup__row { display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .topup__row { grid-template-columns: 9rem 1fr; align-items: center; gap: 1rem; } }
.topup__label { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.topup__track { display: flex; gap: 3px; height: 44px; }
.topup__seg { height: 100%; border-radius: 8px; }
.topup__seg--voucher { background: linear-gradient(135deg, #3FD6CC, var(--teal)); flex: 0 0 calc(100% / 6); }
.topup__seg--topup { background: linear-gradient(135deg, #FFCB4D, var(--amber)); flex: 1 1 auto; }
.topup__legend { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.topup__legend li { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; color: var(--navy); }
.topup__legend i { width: 18px; height: 18px; border-radius: 5px; }
.worked {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border-left: 4px solid var(--amber);
  box-shadow: var(--shadow-card);
}
.worked__label { margin: 0; }

/* Dashboard crop and D19 dashboard */
.dash {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  overflow: hidden;
}
.dash__bar { display: flex; align-items: center; gap: 6px; padding: 0.7rem 1rem; background: var(--mist); border-bottom: 1px solid var(--line); }
.dash__bar i { width: 10px; height: 10px; border-radius: 50%; background: #C7D2DE; }
.dash__bar .dash__ph { margin-left: auto; font-size: var(--fs-caption); font-weight: 600; color: var(--slate); }
.dash__grid { display: grid; gap: 1px; background: var(--line); }
@media (min-width: 768px) { .dash__grid--4 { grid-template-columns: 1.3fr 1fr; } }
.dash__panel { position: relative; padding: clamp(1rem, 0.8rem + 0.8vw, 1.4rem); background: var(--white); display: grid; gap: 0.9rem; align-content: start; }
.dash__panel--optional { background: repeating-linear-gradient(135deg, #FFFFFF 0 10px, #F8FAFC 10px 20px); }
.dash__title { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: var(--fs-body); line-height: 1.3; }
.dash__num { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--white); font-size: var(--fs-caption); font-weight: 800; }
.mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.mini-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--teal-tint); }
.mini-bars i:nth-child(3n+1) { background: var(--teal); }
.mini-bars i:nth-child(4n+2) { background: var(--signal-blue); opacity: 0.7; }
.mini-bars--stack i { background: none; display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 0; opacity: 1 !important; }
.mini-bars--stack i b { display: block; border-radius: 3px; }
.mini-bars--stack i b:first-child { background: var(--signal-blue); }
.mini-bars--stack i b:last-child { background: var(--amber); }
.stock-list { display: grid; gap: 0.6rem; }
.stock-list__row { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; align-items: center; }
.stock-list__row svg { width: 1.6rem; height: 1.6rem; color: var(--teal-ink); }
.stock-list__track { height: 10px; border-radius: 6px; background: var(--mist); overflow: hidden; }
.stock-list__track b { display: block; height: 100%; border-radius: 6px; background: var(--teal); }
.split-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; }
.split-bar b:first-child { background: var(--amber); }
.split-bar b:last-child { background: var(--teal); }
.dash-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: var(--fs-caption); font-weight: 600; color: var(--navy); }
.dash-legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.dash-legend i { width: 14px; height: 14px; border-radius: 4px; }
.spark { width: 100%; height: 80px; }

/* App screens pair */
.app-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-lg); position: relative; z-index: 1; background: radial-gradient(90% 70% at 50% 110%, rgba(0, 191, 179, 0.28), rgba(0, 191, 179, 0) 70%), linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); }
.app-pair .phone { width: min(44%, 230px); min-width: 150px; }
.phone__product { margin: 10px; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(135deg, #E9EEF5, #D5E4EE); position: relative; }
.phone__product::after { content: ""; position: absolute; inset: 22% 30%; border-radius: 8px; background: var(--white); box-shadow: 0 8px 16px -10px rgba(0, 47, 108, 0.5); }
.phone__lines { padding: 0 10px; display: grid; gap: 6px; }
.phone__lines i { display: block; height: 8px; border-radius: 4px; background: var(--mist); }
.phone__lines i:first-child { width: 80%; height: 10px; background: #D7DFE8; }
.phone__lines i:nth-child(2) { width: 40%; background: var(--teal); opacity: 0.8; }
.phone__map {
  margin: 10px;
  height: 22%;
  border-radius: 10px;
  position: relative;
  background:
    linear-gradient(90deg, transparent 48%, #FFFFFF 48% 52%, transparent 52%) 0 0 / 40px 40px,
    linear-gradient(0deg, transparent 48%, #FFFFFF 48% 52%, transparent 52%) 0 0 / 40px 40px,
    #E3F2EF;
}
.phone__pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -60%); color: var(--teal-ink); }
.phone__cta { margin: auto 10px 10px; height: 26px; border-radius: 999px; background: var(--teal); }
.phone__label--inline { margin: 0 10px 8px; padding-top: 0; }

/* Photo grid 2 by 2 */
.photo-grid { display: grid; gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; z-index: 1; }
@media (max-width: 479px) { .photo-grid { grid-template-columns: 1fr; } }
.photo-grid .media { aspect-ratio: 4 / 3; }

/* Programme partner logo row (hidden until the first partner signs) */
.partner-logos { margin-top: var(--space-block); }
@media (max-width: 767px) { .illus { padding: 0.75rem; } }
.mini-bars--stack i { height: 100%; justify-content: flex-start; }
.mini-bars--ra i b:first-child { background: var(--teal); }
.mini-bars--ra i b:last-child { background: var(--amber); }
/* Smaller camera icon on narrow photo placeholders so it never meets the caption */
.media { container-type: inline-size; }
@container (max-width: 340px) { .media__icon { width: 30px; top: 32%; } }
.mini-bars.mini-bars--stack i:nth-child(n) { background: none; opacity: 1; }

/* 24. TEST THE MARKET COMPONENTS (Stage 3)
   ========================================================================== */

/* D17: three stages, stage 02 larger */
.stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  position: relative;
  z-index: 1;
  align-items: stretch;
}
@media (min-width: 1024px) { .stages { grid-template-columns: 1fr 1.45fr 1fr; align-items: center; } }
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.stage .numeral { position: absolute; top: 0.4rem; right: 0.9rem; font-size: var(--fs-figure); }
.stage p { color: var(--ink); position: relative; }
.stage h3 { position: relative; font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.02em; }
.stage .kicker { position: relative; }
.stage--main {
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(0, 191, 179, 0.28), rgba(0, 191, 179, 0) 60%),
    linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 30px 60px -30px rgba(0, 47, 108, 0.8);
}
@media (min-width: 1024px) { .stage--main { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); } }
.stage--main h3, .stage--main strong { color: var(--white); }
.stage--main p { color: rgba(255, 255, 255, 0.86); }
.stage--main .kicker { color: var(--teal); }
.stage--main .numeral { color: var(--teal); opacity: 0.22; }
.stage--main .placeholder { color: var(--white); background: rgba(255, 181, 0, 0.3); outline-color: var(--amber); }
.stage__icons { display: flex; gap: 0.6rem; position: relative; margin-bottom: 0.3rem; }
.stage__icons span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 191, 179, 0.16);
  box-shadow: inset 0 0 0 1px rgba(0, 191, 179, 0.5);
  color: var(--teal);
}
.stage__icons svg { width: 26px; height: 26px; }
@media (min-width: 1024px) {
  .stage:not(.stage--main)::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
  }
  .stages::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--teal), var(--signal-blue));
    z-index: -1;
  }
}

/* D18: commitment modes with increasing stock depth */
.modes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) { .modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mode {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.mode--recommended { border: 2px solid var(--teal); box-shadow: 0 24px 48px -32px rgba(0, 122, 114, 0.6); }
.mode__art { border-radius: var(--radius); background: radial-gradient(80% 90% at 50% 100%, rgba(0, 191, 179, 0.16), rgba(0, 191, 179, 0) 70%), var(--mist); padding: 1rem 1rem 0.4rem; }
.mode__art svg { width: 100%; height: auto; max-width: 220px; margin-inline: auto; }
.mode__depth { display: flex; gap: 4px; }
.mode__depth i { flex: 1; height: 6px; border-radius: 3px; background: var(--teal-tint); }
.mode__depth i.on { background: var(--teal); }
.mode h3 { font-size: var(--fs-h3); }
.mode__field { display: grid; gap: 0.15rem; }
.mode__label { font-size: var(--fs-caption); font-weight: 700; color: var(--slate); text-transform: none; }
.mode__field p { color: var(--ink); }

/* D20: one path branching into four routes */
.branch { display: grid; gap: 1rem; position: relative; z-index: 1; }
.branch__origin {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.4rem 0.9rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  box-shadow: 0 20px 36px -22px rgba(0, 47, 108, 0.9);
}
.branch__origin span:first-child { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--navy); }
.branch__origin svg { width: 24px; height: 24px; }
.branch__lines { display: none; }
.branch__routes { list-style: none; margin: 0; padding: 0 0 0 1.5rem; display: grid; gap: 0.9rem; border-left: 2px solid var(--teal); margin-left: 2.1rem; }
.route {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  align-items: start;
  padding: clamp(1rem, 0.9rem + 0.6vw, 1.35rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 16px 32px -28px rgba(0, 47, 108, 0.5);
}
.route::before { content: ""; position: absolute; left: calc(-1.5rem - 1px); top: 50%; width: 1.5rem; height: 2px; background: var(--teal); }
.route__num {
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  background: var(--teal-tint);
  box-shadow: inset 0 0 0 1.5px var(--teal);
}
.route h3 { font-size: var(--fs-h3); }
.route p { color: var(--ink); }
@media (min-width: 1024px) {
  .branch { grid-template-columns: auto 110px minmax(0, 1fr); gap: 0; align-items: center; }
  .branch__origin { justify-self: end; }
  .branch__lines { display: block; align-self: stretch; width: 100%; height: 100%; }
  .branch__lines path { fill: none; stroke: var(--teal); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .branch__routes { padding: 0; margin: 0; border-left: 0; grid-auto-rows: 1fr; }
  .route::before { display: none; }
}

/* Short statement section with generous white space */
.statement { max-width: 60rem; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
.statement h2 { margin-inline: auto; max-width: 26ch; }
.statement p { margin: var(--space-sm) auto 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--slate); max-width: 56ch; }

/* Callout box */
.callout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber);
  box-shadow: var(--shadow-card);
}
@media (min-width: 1024px) { .callout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-block); align-items: start; } }
@media (min-width: 1024px) {
  .stages { align-items: stretch; padding-block: 1.5rem; }
  .stage--main { margin-block: -1.5rem; }
}
.route { align-content: start; }

/* 25. COMPARE ROUTES COMPONENTS (Stage 3)
   ========================================================================== */

/* D21: neutral four-step cycle */
.cycle { position: relative; margin: 0; z-index: 1; }
.cycle__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; position: relative; z-index: 1; }
.cycle__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: clamp(1rem, 0.9rem + 0.6vw, 1.4rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 16px 32px -28px rgba(0, 47, 108, 0.5);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}
.cycle__num {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  background: var(--mist);
  box-shadow: inset 0 0 0 1.5px #9FB0C3;
}
.cycle__step + .cycle__step::before {
  content: "";
  position: absolute;
  left: calc(clamp(1rem, 0.9rem + 0.6vw, 1.4rem) + 1.3rem - 1px);
  top: -1.15rem;
  height: 1.15rem;
  width: 2px;
  background: #9FB0C3;
}
.cycle__back { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; color: var(--slate); }
.cycle__back svg { width: 28px; height: 28px; color: #7C8DA2; }
.cycle__ring { display: none; }
@media (min-width: 768px) {
  .cycle__steps { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "d c"; column-gap: clamp(7rem, 5rem + 5vw, 10rem); row-gap: clamp(4rem, 3rem + 3vw, 6rem); }
  .cycle__step:nth-child(1) { grid-area: a; }
  .cycle__step:nth-child(2) { grid-area: b; }
  .cycle__step:nth-child(3) { grid-area: c; }
  .cycle__step:nth-child(4) { grid-area: d; }
  .cycle__step + .cycle__step::before { display: none; }
  .cycle__back { display: none; }
  .cycle__ring {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(9rem, 7rem + 6vw, 13rem);
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 0;
  }
}

/* D22: brand splitting into a distributor path and a LocStoc path */
.split-route { margin: 0; position: relative; z-index: 1; display: grid; justify-items: center; }
.split-route__top {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.4rem 0.6rem 0.6rem;
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.split-route__top .hflow__badge { width: 52px; height: 52px; }
.split-route__top .hflow__badge svg { width: 26px; height: 26px; }
.split-route__name { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h3); color: var(--navy); }
.split-route__lines { display: none; width: 100%; height: 70px; }
.split-route__lines path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.split-route__l1 { stroke: #9FB0C3; }
.split-route__l2 { stroke: var(--teal); }
.split-route__paths { width: 100%; display: grid; gap: 1rem; margin-top: 1.25rem; }
.split-route__path {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.split-route__path--ls { border: 2px solid var(--teal); background: linear-gradient(180deg, var(--white), var(--teal-tint)); }
.split-route__head { display: flex; align-items: center; gap: 0.9rem; }
.split-route__head .hflow__badge { width: 48px; height: 48px; }
.split-route__head .hflow__badge svg { width: 24px; height: 24px; }
.split-route__head h3 { font-size: var(--fs-h3); }
.split-route__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip--neutral { border-color: #C4CFDB; color: var(--navy); background: var(--mist); }
@media (min-width: 640px) {
  .split-route__lines { display: block; width: 100%; }
  .split-route__paths { grid-template-columns: 1fr 1fr; margin-top: 0; }
}

/* Comparison table: LocStoc column header */
.table thead th.is-highlight { background: var(--teal); color: var(--navy); border-bottom-color: var(--teal-ink); }
.table td.is-highlight { font-weight: 600; color: var(--navy); }
.table--compare { min-width: 860px; }
.table--compare th[scope="row"] { width: 17%; }
/* Vertical phone versions of diagrams stay at a readable size on tablets */
.diagram__mobile > svg.dg { max-width: 460px; margin-inline: auto; }
.split-route__path { align-content: start; }
.split-route__chips { align-content: flex-start; align-items: flex-start; }
.split-route--wide { max-width: 920px; margin-inline: auto; }
.cycle { max-width: 980px; margin-inline: auto; }
@media (max-width: 639px) {
  .split-route__paths { position: relative; }
  .split-route__paths::before { content: ""; position: absolute; top: -1.25rem; left: 50%; width: 2px; height: 1.25rem; background: var(--teal); }
}

/* 26. CASE STUDIES (Stage 4)
   ========================================================================== */
.case-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); position: relative; z-index: 1; }
@media (min-width: 768px) { .case-cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.case-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(0, 47, 108, 0.04), 0 34px 60px -34px rgba(0, 47, 108, 0.55); }
@media (prefers-reduced-motion: reduce) { .case-card, .case-card:hover { transition: none; transform: none; } }
.case-card .media { aspect-ratio: 16 / 10; border-radius: 0; }
.case-card__tag {
  position: absolute;
  top: clamp(0.9rem, 0.7rem + 0.8vw, 1.25rem);
  left: clamp(0.9rem, 0.7rem + 0.8vw, 1.25rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.6);
}
.case-card__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.case-card__body { display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
.case-card__body h2 { font-size: var(--fs-h2); }
.case-card__body p { color: var(--ink); }
.case-card__body .text-link { margin-top: auto; }
.case-card__body .text-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.case-card__body .text-link:focus-visible { outline: none; }
.case-card:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.case-card__body .case-card__tag { position: static; align-self: flex-start; }

/* 27. EDITORIAL CASE STUDY LAYOUT (Stage 4)
   ========================================================================== */

/* Summary strip under the case study H1 */
.summary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.summary__item { padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.35rem; align-content: start; }
.summary__item:nth-child(2n) { padding-left: 1rem; border-left: 1px solid var(--line); }
.summary__label { font-family: var(--font-head); font-size: var(--fs-kicker); font-weight: 700; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--slate); line-height: 1.4; }
.summary__value { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800; color: var(--navy); line-height: 1.2; letter-spacing: -0.01em; }
.summary__value--figure { font-size: var(--fs-h2); color: var(--teal-ink); }
@media (min-width: 1024px) {
  .summary { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .summary__item { padding: 1.4rem 1.5rem; border-bottom: 0; border-left: 1px solid var(--line); }
  .summary__item:first-child { padding-left: 0; border-left: 0; }
}

/* Full-width lead photograph */
.lead-photo { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0; }
.lead-photo .media { aspect-ratio: 21 / 9; }
@media (max-width: 767px) { .lead-photo .media { aspect-ratio: 4 / 3; } }

/* Chapters: numbered rail on desktop, generous reading width */
.chapter { position: relative; padding-block: var(--space-section); }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter--mist { background: var(--mist); border-top: 0 !important; }
.chapter--mist + .chapter { border-top: 0; }
.chapter__grid { display: grid; gap: var(--space-block); position: relative; z-index: 1; }
.chapter__rail { display: none; }
.chapter__main { display: grid; gap: var(--space-block); min-width: 0; }
.chapter__text { display: grid; gap: var(--space-sm); max-width: 44rem; }
.chapter__text > * { margin: 0; }
@media (min-width: 1024px) {
  .chapter__grid { grid-template-columns: 7.5rem minmax(0, 1fr); gap: clamp(2rem, 3vw, 3.5rem); }
  .chapter__rail { display: block; }
  .chapter__rail .numeral { position: sticky; top: calc(var(--header-h) + 2rem); font-size: var(--fs-figure); }
}

/* Survey figure */
.survey { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); }
@media (min-width: 768px) { .survey { grid-template-columns: 1.1fr 1fr 1fr; align-items: stretch; } }
.ring-fig {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.9rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
  margin: 0;
}
.ring-fig__art { position: relative; width: min(100%, 190px); aspect-ratio: 1; }
.ring-fig__art svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-fig__value { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 800; color: var(--white); letter-spacing: -0.02em; }
.ring-fig figcaption { max-width: 22ch; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, 0.86); }
.chart-ph {
  display: grid;
  place-items: center;
  gap: 0.6rem;
  min-height: 220px;
  padding: 1.25rem;
  text-align: center;
  border: 2px dashed rgba(0, 122, 114, 0.4);
  border-radius: var(--radius-lg);
  background: radial-gradient(rgba(0, 191, 179, 0.14) 1.2px, transparent 1.6px) 0 0 / 16px 16px, var(--white);
  color: var(--slate);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.chart-ph svg { width: 44px; height: 44px; color: var(--teal-ink); opacity: 0.6; }

/* D26: stylised map with numbered store markers */
.store-map { display: grid; gap: var(--space-block); align-items: center; }
@media (min-width: 768px) { .store-map { grid-template-columns: 1.15fr 1fr; } }
.store-map__art { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); background: #F2F6F8; }
.store-map__art svg { width: 100%; height: auto; }
.store-map__ph { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-size: var(--fs-caption); font-weight: 600; color: var(--slate); }
.store-map__city { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--navy); color: var(--white); font-family: var(--font-head); font-size: var(--fs-caption); font-weight: 700; }
.store-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.store-list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
}
.store-list__num { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--navy); font-weight: 800; }

/* Photo grids */
.photo-grid-5 { display: grid; gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); grid-template-columns: 1fr; }
@media (min-width: 600px) { .photo-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-grid-5 > :first-child { grid-column: span 2; } }
@media (min-width: 1024px) {
  .photo-grid-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .photo-grid-5 > * { grid-column: span 2; }
  .photo-grid-5 > :nth-child(-n+2) { grid-column: span 3; }
}
.photo-grid-5 .media { aspect-ratio: 4 / 3; }

/* Video with side stills */
.video-set { display: grid; gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); }
@media (min-width: 768px) { .video-set { grid-template-columns: 2fr 1fr; } .video-set__stills { display: grid; gap: inherit; } }
.video-set__stills { display: grid; gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); }
.video-set__stills .media { aspect-ratio: 16 / 10; }
.media--video { background: radial-gradient(120% 120% at 100% 0%, rgba(0, 191, 179, 0.4), rgba(0, 191, 179, 0) 55%), linear-gradient(135deg, #123A6E 0%, #0E2E57 55%, #0B4A5C 100%); color: var(--white); }
.media--video .media__ratio { background: rgba(255, 255, 255, 0.15); color: var(--white); }
.media--video figcaption, .media--video .media__label { color: var(--white); }

/* D27: result figures and share bars */
.results { display: grid; gap: var(--space-block); }
.results .stat-row { border-top: 1px solid var(--line); }
@media (min-width: 768px) { .results .stat-row { border-top: 0; } }
.results .stat__figure { font-size: var(--fs-figure); }
.shares { display: grid; gap: 1rem; }
@media (min-width: 768px) { .shares { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.share { display: grid; gap: 0.5rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.share__label { font-weight: 600; color: var(--navy); font-size: var(--fs-caption); }
.share__track { height: 14px; border-radius: 8px; background: var(--mist); overflow: hidden; }
.share__track b { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--signal-blue), var(--teal)); }

/* Founder quote on navy */
.quote { display: grid; gap: var(--space-block); align-items: center; }
@media (min-width: 1024px) { .quote { grid-template-columns: 1.3fr 1fr; } }
.quote blockquote { margin: 0; position: relative; padding-top: 2.5rem; }
.quote blockquote::before { content: "\201C"; position: absolute; top: -1rem; left: -0.25rem; font-family: var(--font-serif); font-size: var(--fs-numeral); line-height: 1; color: var(--teal); opacity: 0.5; }
.quote blockquote p { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h3); line-height: 1.45; color: var(--white); max-width: 30ch; }
.quote .placeholder { color: var(--white); background: rgba(255, 181, 0, 0.25); outline-color: var(--amber); }
.chapter--navy { background: linear-gradient(160deg, var(--navy), var(--navy-deep)); color: rgba(255, 255, 255, 0.86); border-top: 0 !important; }
.chapter--navy h2 { color: var(--white); }
.chapter--navy .numeral { color: var(--teal); opacity: 0.25; }
.chapter--navy + .chapter { border-top: 0; }
.chapter__narrow { max-width: 52rem; display: grid; gap: var(--space-block); }
/* Result figures sit inside the chapter column, so they scale to it and go four across only when there is room */
.results .stat__figure { font-size: var(--fs-h1); }
@media (min-width: 1024px) {
  .results .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results .stat:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .results .stat:nth-child(2n) { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 2rem); }
}
@media (min-width: 1280px) {
  .results .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .results .stat:nth-child(n) { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 2rem); }
  .results .stat:first-child { border-left: 0; padding-left: 0; }
}
.stat__figure { overflow-wrap: anywhere; }
.hero-inner--case .hero-inner__shape { height: 58%; }
.hero-inner--case .summary { margin-top: var(--space-block); }
.chart-ph { align-content: center; }
@media (min-width: 768px) { .video-set > .media--video { aspect-ratio: auto; height: 100%; min-height: 260px; } }
.store-map__art { display: grid; }
.store-map__ph { position: static; justify-self: start; margin: 0.6rem 0.75rem 0.75rem; background: var(--white); border: 1px solid var(--line); }
/* D25: illustrative cost of ownership chart */
.tco { margin: 0; display: grid; gap: 0.9rem; max-width: 44rem; }
.tco__frame { padding: clamp(1rem, 0.8rem + 1vw, 1.75rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-card); }
.tco__legend { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.tco__legend li { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; color: var(--navy); font-size: var(--fs-caption); }
.tco__legend i { width: 22px; height: 4px; border-radius: 2px; }
/* Three proof items: image with its execution point */
.exec { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); }
@media (min-width: 768px) { .exec { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.exec__item { display: grid; gap: 0.9rem; align-content: start; }
.exec__item .media { aspect-ratio: 4 / 3; }
.exec__item p { color: var(--ink); }
.chapter--navy .text-link { color: var(--white); }
.chapter--navy .text-link:hover { color: var(--teal); }
.chapter--navy p { color: rgba(255, 255, 255, 0.86); }
.tco { max-width: 32rem; }
@media (max-width: 767px) { .tco__frame { padding: 0.75rem; } }
.kicker { max-width: none; }

/* 28. CORPORATE PARTNERS COMPONENTS (Stage 5)
   Formal register: thin rules, restrained colour, no scroll animation on this page.
   ========================================================================== */

/* Hero actions for inner heroes */
.hero-inner__actions { padding-top: 0.5rem; }

/* Two sides of the value */
.twoside { display: grid; position: relative; z-index: 1; border-top: 2px solid var(--navy); }
@media (min-width: 768px) { .twoside { grid-template-columns: 1fr 1fr; } }
.twoside__col { padding: 1.25rem 0 0; }
@media (min-width: 768px) { .twoside__col + .twoside__col { border-left: 1px solid var(--line); padding-left: clamp(1.25rem, 3vw, 2.5rem); } .twoside__col:first-child { padding-right: clamp(1.25rem, 3vw, 2.5rem); } }
.twoside__col h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.twoside__list { list-style: none; margin: 0; padding: 0; }
.twoside__list li { padding: 0.95rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.twoside__list li:last-child { border-bottom: 0; }
@media (max-width: 767px) { .twoside__col + .twoside__col { margin-top: 1.25rem; border-top: 1px solid var(--line); } }

/* D23: two-lane swimlane */
.swim { position: relative; z-index: 1; display: grid; gap: 0.75rem; }
.swim__lane-label { display: none; }
.swim__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.swim__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.45;
}
.swim__num { grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; }
.swim__step--partner .swim__num { background: var(--navy); color: var(--white); }
.swim__step--locstoc .swim__num { background: var(--teal); color: var(--navy); }
.swim__step--locstoc { border-left: 3px solid var(--teal); }
.swim__step--partner { border-left: 3px solid var(--navy); }
.swim__chip { justify-self: start; font-size: var(--fs-caption); font-weight: 700; color: var(--slate); }
@media (min-width: 1024px) {
  .swim { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
  .swim__lane-label {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    font-family: var(--font-head);
    font-weight: 800;
    color: var(--navy);
    border-right: 1px solid var(--line);
  }
  .swim__lane-label--partner { grid-row: 1; grid-column: 1; background: rgba(0, 47, 108, 0.05); border-bottom: 1px solid var(--line); }
  .swim__lane-label--locstoc { grid-row: 2; grid-column: 1; background: var(--teal-tint); }
  .swim__steps { grid-row: 1 / span 2; grid-column: 2; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 0; }
  .swim__steps::before { content: ""; grid-column: 1 / -1; grid-row: 1; border-bottom: 1px solid var(--line); background: rgba(0, 47, 108, 0.02); pointer-events: none; }
  .swim__step { grid-template-columns: 1fr; align-content: start; margin: 1rem 0.4rem; padding: 0.9rem; font-size: var(--fs-caption); border-left-width: 1px; }
  .swim__step--partner { grid-row: 1; border-top: 3px solid var(--navy); }
  .swim__step--locstoc { grid-row: 2; border-top: 3px solid var(--teal); }
  .swim__step:nth-child(1) { grid-column: 1; }
  .swim__step:nth-child(2) { grid-column: 2; }
  .swim__step:nth-child(3) { grid-column: 3; }
  .swim__step:nth-child(4) { grid-column: 4; }
  .swim__step:nth-child(5) { grid-column: 5; }
  .swim__step:nth-child(6) { grid-column: 6; }
  .swim__step:nth-child(7) { grid-column: 7; }
  .swim__num { grid-row: auto; }
  .swim__chip { display: none; }
}
.closing-line { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.closing-line svg { width: 28px; height: 28px; flex: none; color: var(--teal-ink); }

/* D24: three phone screens */
.phones3 { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(3, minmax(0, 1fr)); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-lg); background: radial-gradient(90% 70% at 50% 110%, rgba(0, 191, 179, 0.28), rgba(0, 191, 179, 0) 70%), linear-gradient(160deg, var(--navy), var(--navy-deep)); }
.phones3 .phone { width: 100%; }
@media (max-width: 599px) { .phones3 { grid-template-columns: 1fr; justify-items: center; } .phones3 .phone { width: min(70%, 220px); } }
.phone__step { position: absolute; top: -12px; left: -12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--navy); font-family: var(--font-head); font-weight: 800; box-shadow: 0 0 0 4px var(--navy); }
.phone__voucher { margin: 12px 10px; aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(135deg, var(--teal), #008F86); position: relative; overflow: hidden; }
.phone__voucher::before { content: ""; position: absolute; top: 50%; left: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transform: translateY(-50%); }
.phone__voucher::after { content: ""; position: absolute; top: 50%; right: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transform: translateY(-50%); }
.phone__voucher i { position: absolute; left: 18%; top: 28%; width: 46%; height: 12%; border-radius: 6px; background: rgba(255, 255, 255, 0.85); }
.phone__voucher b { position: absolute; left: 18%; top: 52%; width: 30%; height: 18%; border-radius: 6px; background: var(--amber); }
.phone__check { margin: 20% auto 10px; width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--teal-tint); color: var(--teal-ink); }
.phone__check svg { width: 55%; height: 55%; }

/* Sample report mock */
.report { border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.report__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--mist); }
.report__head svg { width: 26px; height: 26px; color: var(--navy); }
.report__head .dash__ph { margin-left: auto; font-size: var(--fs-caption); font-weight: 600; color: var(--slate); }
.report__body { padding: 1.2rem; display: grid; gap: 1rem; }
.pair-bars { display: flex; align-items: flex-end; gap: 14px; height: 140px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.pair-bars span { flex: 1; display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.pair-bars b { flex: 1; border-radius: 4px 4px 0 0; }
.pair-bars b:first-child { background: var(--navy); }
.pair-bars b:last-child { background: var(--teal); }
.report__rows { display: grid; gap: 7px; }
.report__rows i { display: block; height: 9px; border-radius: 5px; background: var(--mist); }

/* Client data box for compliance reviewers */
.databox {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.75rem);
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  background: var(--white);
  max-width: 52rem;
}
.databox__head { display: flex; align-items: center; gap: 1rem; }
.databox__icon { flex: none; width: 52px; height: 52px; padding: 12px; border-radius: 12px; background: var(--navy); color: var(--white); }
.databox p { color: var(--ink); max-width: 60ch; }

/* Status banner */
.status-banner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: rgba(255, 255, 255, 0.86);
}
.status-banner h2 { color: var(--white); max-width: 30ch; }
.status-banner p { color: rgba(255, 255, 255, 0.84); }
.status-banner .status-pill { background: rgba(0, 191, 179, 0.18); color: var(--teal); justify-self: start; }

/* Map panel */
.map-panel { margin: 0; padding: clamp(1rem, 0.8rem + 1vw, 1.75rem); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--navy), var(--navy-deep)); }
.map-panel .map-svg { max-width: 460px; margin-inline: auto; }
.phone__check { flex: none; width: 64px; height: 64px; aspect-ratio: auto; margin: 22% auto 12px; }
.status-banner--light { background: var(--teal-tint); color: var(--ink); border-left: 5px solid var(--teal); }
.status-banner--light h2 { color: var(--navy); }
.status-banner--light p { color: var(--ink); }
@media (max-width: 599px) {
  .phones3 { display: flex; justify-items: initial; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.75rem 1.25rem 1.5rem; -webkit-overflow-scrolling: touch; }
  .phones3 .phone { flex: 0 0 58%; width: auto; scroll-snap-align: center; }
}

/* 29. MARKETS COMPONENTS (Stage 5)
   ========================================================================== */

/* Navy hero with the regional map */
.hero-map .hero-home__grid { align-items: center; }
.hero-map__map { margin: 0; position: relative; z-index: 2; }
@media (min-width: 1024px) { .hero-map .hero-home__grid { grid-template-columns: 9fr 11fr; } }

/* Market status bar */
.statusbar { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; position: relative; z-index: 1; }
@media (min-width: 768px) { .statusbar { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0; } }
.statusbar__item {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: clamp(1.1rem, 1rem + 0.8vw, 1.6rem);
  border: 2px dashed rgba(0, 122, 114, 0.45);
  background: var(--white);
  border-radius: var(--radius);
}
.statusbar__name { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800; color: var(--navy); }
.statusbar__status { font-weight: 600; color: var(--teal-ink); }
.statusbar__item--live { border: 2px solid var(--teal); background: linear-gradient(135deg, var(--teal), #00A89E); }
.statusbar__item--live .statusbar__name { color: var(--navy); }
.statusbar__item--live .statusbar__status { color: var(--navy); display: inline-flex; align-items: center; gap: 0.5rem; }
.statusbar__item--live .statusbar__status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }
@media (min-width: 768px) {
  .statusbar__item { border-radius: 0; border-left-width: 0; }
  .statusbar__item:first-child { border-radius: var(--radius) 0 0 var(--radius); border-left-width: 2px; }
  .statusbar__item:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
}

/* Market data table */
.table--data { min-width: 620px; }
.table--data td { color: var(--slate); }

/* Hub diagram */
.hub { margin: 0; }
.hub svg { width: 100%; height: auto; max-width: 480px; margin-inline: auto; }
.hub-name { font-family: var(--font-head); font-weight: 700; fill: var(--navy); }

/* Upcoming market cards */
.market-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); position: relative; z-index: 1; }
@media (min-width: 768px) { .market-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.market-card { display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); }
.market-card__map { border-radius: var(--radius); background: radial-gradient(rgba(0, 191, 179, 0.12) 1px, transparent 1.4px) 0 0 / 14px 14px, var(--mist); padding: 0.75rem; }
.mini-map { width: 100%; height: auto; max-height: 190px; }
.market-card h3 { font-size: var(--fs-h3); }
.market-card p { color: var(--ink); }
.market-card .placeholder { justify-self: start; }
/* The hero map needs full width until there is room beside the headline */
@media (min-width: 1024px) and (max-width: 1279px) { .hero-map .hero-home__grid { grid-template-columns: 1fr; } .hero-map__map { max-width: 820px; } }
@media (min-width: 1280px) { .hero-map .hero-home__grid { grid-template-columns: 9fr 11fr; } }
.market-card .placeholder { align-self: flex-start; margin-top: auto; }
.table--data .placeholder { white-space: nowrap; }
.table--data { min-width: 760px; }

/* 30. ABOUT COMPONENTS (Stage 5)
   ========================================================================== */

/* D28: milestone timeline, past in teal and upcoming in outline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; position: relative; z-index: 1; }
.timeline__item { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.2rem 1rem; padding-bottom: 1.6rem; }
.timeline__item::before { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 1.4rem; bottom: -0.2rem; width: 2px; background: var(--teal); }
.timeline__item:last-child::before { display: none; }
.timeline__item--next::before { background: repeating-linear-gradient(180deg, #9FB0C3 0 5px, transparent 5px 10px); }
.timeline__dot { grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--teal); box-shadow: 0 0 0 6px var(--teal-tint); position: relative; z-index: 1; }
.timeline__dot svg { width: 16px; height: 16px; color: var(--navy); }
.timeline__item--next .timeline__dot { background: var(--white); box-shadow: inset 0 0 0 2px var(--teal); }
.timeline__date { font-family: var(--font-head); font-weight: 800; color: var(--navy); line-height: 1.3; }
.timeline__item--next .timeline__date { color: var(--teal-ink); }
.timeline__text { color: var(--ink); line-height: 1.45; }
@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
  .timeline__item { grid-template-columns: 1fr; padding-bottom: 0; gap: 0.5rem; align-content: start; }
  .timeline__item::before { left: 2.25rem; right: -1rem; top: calc(1.125rem - 1px); bottom: auto; width: auto; height: 2px; }
  .timeline__item--next::before { background: repeating-linear-gradient(90deg, #9FB0C3 0 5px, transparent 5px 10px); }
  .timeline__item:has(+ .timeline__item--next)::before { background: linear-gradient(90deg, var(--teal), #9FB0C3); }
  .timeline__dot { grid-row: auto; margin-bottom: 0.4rem; }
}

/* Leadership profiles */
.profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; z-index: 1; }
@media (min-width: 1024px) { .profiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .profiles { grid-template-columns: 1fr; } }
.profile { display: grid; gap: 0.5rem; align-content: start; }
.profile .media { aspect-ratio: 4 / 5; margin-bottom: 0.4rem; }
.profile__name { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: var(--fs-h3); }
.profile__role { font-weight: 600; color: var(--teal-ink); }
.profile__bg { color: var(--slate); }
.profile .placeholder { justify-self: start; }

/* Contact block */
.hq { display: grid; gap: var(--space-block); position: relative; z-index: 1; }
@media (min-width: 768px) { .hq { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.hq__details { display: grid; gap: 0.6rem; font-size: var(--fs-lead); }
.hq__details p { margin: 0; }
.hq__links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
@media (max-width: 479px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; } }

/* 31. CONTACT COMPONENTS (Stage 5)
   ========================================================================== */
.contact-grid { display: grid; gap: var(--space-block); align-items: start; position: relative; z-index: 1; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 1fr) 20rem; } .contact-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

.tab-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: var(--space-block); }
.tab-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 72px;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--white);
  font-family: var(--font-head);
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.tab-card:hover { border-color: var(--teal); }
.tab-card__icon { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--mist); color: var(--navy); }
.tab-card[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: var(--white); box-shadow: 0 18px 36px -24px rgba(0, 47, 108, 0.8); }
.tab-card[aria-selected="true"] .tab-card__icon { background: var(--teal); color: var(--navy); }
@media (max-width: 479px) { .tab-card { flex-direction: column; align-items: flex-start; gap: 0.5rem; } }

.form-card { padding: clamp(1.5rem, 1.2rem + 2vw, 3rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-card); }
.form-card__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-block); }
.form-card__head p { color: var(--slate); }
.field__hint { font-size: var(--fs-caption); color: var(--slate); margin-top: -0.2rem; }
.form .btn { justify-self: start; }
.form__consent a { color: var(--teal-ink); }

.contact-aside { display: grid; gap: var(--space-sm); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); }
.contact-aside h2 { font-size: var(--fs-h3); }
.contact-aside .text-link { justify-self: start; }
.contact-list { list-style: none; margin: 0; padding: var(--space-sm) 0 0; display: grid; gap: 0.7rem; border-top: 1px solid var(--line); }
.contact-list li { display: grid; gap: 0.1rem; }
.contact-list__label { font-size: var(--fs-caption); font-weight: 700; color: var(--slate); }
.link-retail { display: inline-flex; align-items: center; gap: 0.55rem; }
/* Decorative dot grids in inner heroes would sit behind text on phones */
@media (max-width: 767px) { .hero-inner .dot-grid { display: none; } }
@media (min-width: 768px) { .form__row--2 { align-items: end; } .form__row--2 .field { align-content: end; } }

/* 32. RETAILER THEME AND COMPONENTS (Stage 5, retailers.html only)
   Retail Pink replaces teal inside <main>; header and footer stay as elsewhere.
   ========================================================================== */
.theme-retail main .kicker::after { background: linear-gradient(90deg, var(--retail-pink), rgba(240, 33, 90, 0)); }
.theme-retail main .opener { background: var(--retail-pink); }
.theme-retail main .diag-strip { background: linear-gradient(180deg, rgba(240, 33, 90, 0.12), rgba(240, 33, 90, 0.02)); }
.theme-retail main .media {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(240, 33, 90, 0.2), rgba(240, 33, 90, 0) 55%),
    linear-gradient(135deg, #EEF0F6 0%, #E4E6F0 55%, #F6DDE5 100%);
}
.theme-retail main .flow__step::before { background: linear-gradient(180deg, var(--retail-pink), rgba(240, 33, 90, 0.18)); }
.theme-retail main .flow__dot { background: var(--retail-pink-deep); color: var(--white); font-size: var(--fs-body); width: 2.6rem; height: 2.6rem; box-shadow: 0 0 0 6px #FDE8EE; }
.theme-retail main .flow__step { padding-left: 4.1rem; }
.theme-retail main .flow__step::before { left: 1.25rem; top: 2.8rem; }
.theme-retail main .check input { accent-color: var(--retail-pink-deep); }
.theme-retail main .text-link:hover { color: var(--retail-pink-deep); }
.theme-retail main a:not(.btn):not(.text-link) { color: var(--retail-pink-deep); }
.theme-retail main .btn--primary:hover { background: var(--navy); color: var(--white); }
.theme-retail main .field__req { color: var(--retail-pink-deep); }

/* D29: how a store earns */
.earn { display: grid; gap: 1rem; align-items: stretch; position: relative; z-index: 1; }
@media (min-width: 640px) { .earn { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.earn__card { display: grid; gap: 0.75rem; justify-items: start; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius-lg); background: var(--white); border: 1.5px solid #F7C3D2; box-shadow: 0 20px 40px -30px rgba(200, 16, 63, 0.5); }
.earn__icon { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: linear-gradient(145deg, #FF5C86, var(--retail-pink)); color: var(--white); }
.earn__from { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: var(--fs-h3); }
.earn__to { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: #FDE8EE; color: var(--retail-pink-deep); font-weight: 700; }
.earn__to svg { width: 18px; height: 18px; }
.earn__plus { justify-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--white); font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h3); }

/* Retailer app phones */
.theme-retail main .app-pair { background: radial-gradient(90% 70% at 50% 110%, rgba(240, 33, 90, 0.3), rgba(240, 33, 90, 0) 70%), linear-gradient(160deg, var(--navy), var(--navy-deep)); }
.theme-retail main .phone__head { background: linear-gradient(160deg, var(--retail-pink-deep), var(--retail-pink)); }
.phone__scan { margin: 12px; aspect-ratio: 1; border-radius: 12px; position: relative; background: var(--mist); }
.phone__scan::before { content: ""; position: absolute; inset: 18%; border: 3px solid var(--retail-pink); border-radius: 10px; clip-path: polygon(0 0, 30% 0, 30% 6%, 6% 6%, 6% 30%, 0 30%, 0 70%, 6% 70%, 6% 94%, 30% 94%, 30% 100%, 70% 100%, 70% 94%, 94% 94%, 94% 70%, 100% 70%, 100% 30%, 94% 30%, 94% 6%, 70% 6%, 70% 0, 100% 0, 100% 100%, 0 100%); }
.phone__scan::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: var(--retail-pink); box-shadow: 0 0 10px var(--retail-pink); }
.phone__stock { padding: 10px; display: grid; gap: 8px; }
.phone__stock i { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: center; }
.phone__stock i::before { content: ""; width: 22px; height: 22px; border-radius: 6px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.phone__stock i::after { content: ""; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--retail-pink) var(--w, 60%), var(--mist) var(--w, 60%)); }

/* Retailer contact options */
.contact-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.contact-options li { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); flex-wrap: wrap; }
.contact-options svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #FDE8EE; color: var(--retail-pink-deep); }
.contact-options strong { color: var(--navy); }
.theme-retail main .phone__lines i:nth-child(2) { background: var(--retail-pink); }
@media (max-width: 599px) { .app-pair { flex-wrap: nowrap; gap: 0.9rem; padding: 1.25rem 1rem; } .app-pair .phone { min-width: 0; width: 48%; } }