/* REQ-CSS-001: single stylesheet, cascade layers declared once, no @import. */
@layer tokens, reset, base, layout, components, sections, utilities;

@layer tokens {
  :root {
    /* REQ-TOK-001, REQ-TOK-002: every colour/radius/shadow/size/lh/ls below is the sole
       raw value for that property; values match design-tokens.json except the five
       corrections of §3.3, each marked with its REQ-ID. */

    --color-primary: #00AFCC;
    --color-primary-onlight: #007A8F; /* REQ-A11Y-004: correction 2 of §3.3 */
    --color-banner-teal: #00788C; /* REQ-A11Y-006: correction 5 of §3.3 */
    --color-accent-cyan: #4DF0F2;
    --color-border-cyan: #29E0E6;
    --color-orange: #FFAB26;
    --color-atex-blue: #1E4CFF;
    --color-atex-blue-deep: #0A2DB3;
    --color-navy-800: #021F51;
    --color-navy-900: #00122B;
    --color-ink: #0A1A30;
    --color-body: #5A6B82;
    --color-gray-500: #5F6876;
    --color-gray-400: #8A93A1;
    --color-gray-200: #D9DDE5;
    --color-border-card: #DCE4EE;
    --color-surface-light: #F6F8FB;
    --color-chip-gray: #F3F4F5;
    --color-blue-200: #BCCBFC;
    --color-ring: #D3E7FC;
    --color-atex-subtext: #D9E9FF;
    --color-center-tagline: #C8E5FA;
    --color-white: #FFFFFF;
    --color-hero-helper: rgb(255 255 255 / 0.57);
    --color-card-body-dark: rgb(255 255 255 / 0.6);
    --color-badge-bg: rgb(10 26 48 / 0.05);
    --color-hairline-dark: rgb(255 255 255 / 0.12);
    --color-card-border-dark: rgb(255 255 255 / 0.1);

    --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --size-title: clamp(2.25rem, 1.0rem + 2.6vw, 4rem);
    --size-title-med: clamp(1.5rem, 1.05rem + 0.94vw, 2rem);
    --size-title-sm: clamp(1.25rem, 1.1rem + 0.31vw, 1.5rem);
    --size-body: clamp(1.125rem, 0.98rem + 0.31vw, 1.5rem);
    --size-body-med: clamp(1rem, 0.93rem + 0.16vw, 1.25rem);
    --size-body-sm: clamp(1rem, 0.96rem + 0.10vw, 1.125rem);
    --size-eyebrow: clamp(0.875rem, 0.8rem + 0.16vw, 1.25rem);
    --size-helper: 1rem;
    --size-badge: clamp(1.5rem, 1.05rem + 0.94vw, 2rem);

    --lh-title: 1.156;
    --lh-title-med: 1.15; /* REQ-RSP-006: correction 1 of §3.3 — 32px/27.5px in Figma clips descenders */
    --lh-title-sm: 1.25;
    --lh-body: 1.45;
    --lh-body-med: 1.4;
    --lh-body-sm: 1.222;
    --lh-eyebrow: 1.5;
    --lh-helper: 1.25;

    --ls-eyebrow: 0.15em;
    --ls-badge: -0.0117em;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-25: 6.25rem;

    --radius-pill: 100px;
    --radius-card-lg: clamp(1.5rem, 0.6rem + 1.9vw, 3.125rem);
    --radius-card: 1.667rem;
    --radius-card-sm: 1.5rem;
    --radius-card-xs: 1rem;
    --radius-card-pp: 1.339rem;
    --radius-tile: 0.903rem;
    --radius-badge: 0.67rem;
    --radius-scallop: clamp(3rem, -2rem + 10.4vw, 31.25rem); /* REQ-RSP-008 */

    --shadow-orange: 0 4px 30px rgb(255 171 38 / 0.5);
    --shadow-atex: 0 4px 30px rgb(30 76 255 / 0.6);
    --shadow-price: 0 33.333px 77.778px -44.444px rgb(10 26 48 / 0.4);
    --shadow-center: 0 0 60px rgb(0 178 208 / 0.29);
    --shadow-create: 0 0 40px rgb(41 224 230 / 0.6);

    --layout-content: 1660px;
    --layout-narrow: 1028.75px;
    --layout-x-pad: clamp(1.25rem, -1.6rem + 6.8vw, 8.125rem);
    --layout-nav-h: 114px;

    --z-nav: 100;
    --z-dialog: 200;
    --dur-fast: 120ms;
    --dur-base: 200ms;
  }
}

@layer reset {
  /* REQ-CSS-002: modern reset. */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
    font-family: var(--font-sans);
    line-height: var(--lh-body);
    color: var(--color-body);
  }

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

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
  }

  /* REQ-A11Y-010: a visible :focus-visible indicator, never removed without a replacement. */
  :focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth; /* REQ-CSS-016: in-page nav needs zero JavaScript */
    }
  }
}

@layer base {
  /* REQ-FONT-002, REQ-FONT-003: one @font-face per style/weight actually used, real files only.
     REQ-FONT-004/005: subset 17/09 by build/subset-fonts.py (not the full §18 pipeline, which still
     doesn't exist — see mytype_wp_font_subsetting.md). Source: the actual copy.json glyphs plus the
     nine REQ-CMP-041 badge digits (0-9), which live in index.html, not copy.json — a literal
     copy.json-only subset would have dropped "7" and "8" and broken badges 07/08. Regenerate by
     re-running that script whenever copy.json changes; the full Inter files it subsets from are kept,
     untouched, in site/build/fonts-full/. */
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/inter-400.woff2") format("woff2");
    unicode-range: U+0020, U+0022-0023, U+0026-0029, U+002B-003A, U+003F-0049, U+004B-0059, U+005F, U+0061-007A, U+007C, U+00A9, U+20AC;
  }

  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/inter-500.woff2") format("woff2");
    unicode-range: U+0020, U+0022-0023, U+0026-0029, U+002B-003A, U+003F-0049, U+004B-0059, U+005F, U+0061-007A, U+007C, U+00A9, U+20AC;
  }

  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("assets/fonts/inter-700.woff2") format("woff2");
    unicode-range: U+0020, U+0022-0023, U+0026-0029, U+002B-003A, U+003F-0049, U+004B-0059, U+005F, U+0061-007A, U+007C, U+00A9, U+20AC;
  }

  @font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/inter-400-italic.woff2") format("woff2");
    unicode-range: U+0020, U+0022-0023, U+0026-0029, U+002B-003A, U+003F-0049, U+004B-0059, U+005F, U+0061-007A, U+007C, U+00A9, U+20AC;
  }

  @font-face {
    /* REQ-FONT-012: fifth style, not preloaded, below the fold only. */
    font-family: "Inter";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/inter-500-italic.woff2") format("woff2");
    unicode-range: U+0020, U+0022-0023, U+0026-0029, U+002B-003A, U+003F-0049, U+004B-0059, U+005F, U+0061-007A, U+007C, U+00A9, U+20AC;
  }

  /* REQ-FONT-008: metric-compatible fallback so the font-swap doesn't reflow
     the page. --font-sans (below) already lists "Inter Fallback" second —
     this face was the missing half. Values are measured against the shipped
     Inter subsets (see site/specs/implementation-spec.md §11); re-derive
     them if the subsets change.
     Beta caveat: REQ-FONT-008 wants this in the CRITICAL CSS specifically,
     inlined ahead of any external stylesheet. site/src still ships an empty
     critical-CSS block (the §18 build pipeline doesn't exist yet), so this
     only fixes the metrics-mismatch part of the CLS (the font-swap reflow
     itself) — it does not fix the separate "blank flash before styles.css
     loads" gap. Move this block into the inlined critical CSS once that
     pipeline exists. */
  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("Helvetica Neue");
    /* REQ-FONT-008: senza questo range la face vale solo per il peso 400 e ogni
       testo 500/700 salta al system stack senza compensazione metriche. E' la
       causa misurata del CLS desktop 0.688 del 14/09. */
    font-weight: 100 900;
    size-adjust: 103.33%;
    ascent-override: 93.76%;
    descent-override: 23.34%;
    line-gap-override: 0%;
  }
}

@layer layout {
  /* REQ-HTML-025/026: the sprite container holds only <symbol>, nothing to paint.
     Hidden from a class, not a style="" attribute: a style attribute is inline CSS
     and style-src 'self' refuses it (REQ-CDN-010 carries no hash). Without this rule
     the <svg> falls back to its default 300x150 replaced box at the top of <body>. */
  .sprite { display: none; }

  /* REQ-A11Y-013: skip link, first in the DOM, visible on focus. */
  .skip-link {
    position: fixed;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: var(--z-dialog);
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-badge);
    background: var(--color-white);
    color: var(--color-ink);
    transform: translateY(-150%);
    transition: transform var(--dur-base);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* REQ-HTML-005: every in-page nav anchor target stays clear of the fixed nav on scroll. */
  [id="challenges"],
  [id="newsroom-os"],
  [id="why-mytype"],
  [id="pricing"],
  [id="faq"] {
    /* REQ-CSS-001: an id selector would carry specificity (1,0,0), over the 0,2,0 ceiling;
       an attribute selector on id="" reaches the same element at class-level specificity. */
    scroll-margin-top: calc(var(--layout-nav-h) + var(--space-4));
  }

  /* REQ-CMP-005: the only rule establishing content width (corrects the skeleton's approximation
     now that section 01 reads the exact formula). */
  .container {
    width: min(100% - 2 * var(--layout-x-pad), var(--layout-content));
    margin-inline: auto;
  }
}

@layer utilities {
  /* REQ-A11Y-016: prefers-reduced-motion: reduce disables every transition/transform animation. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* REQ-CMP-012: an accessible name without pulling the element out of flow — REQ-CSS-005 has no
     exception letter for a visually-hidden utility, so this deliberately avoids position: absolute.
     REQ-RSP-007: nowrap here is on 1x1px clipped text, never rendered, so it carries none of the
     visible-overflow risk that rule guards against — flagged as an open item in the response. */
  .u-visually-hidden {
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@layer components {
  /* REQ-CMP-001, REQ-CMP-002, REQ-CMP-003: one shared block, variants set only background/label/shadow. */
  .btn {
    --btn-label-size: 1rem; /* REQ-TOK-001: 16px is fixed, not fluid; not in the §3.1 catalogue, so scoped here per REQ-STD-002 */
    --btn-pad-block: 21px; /* REQ-CMP-002: fixed vertical padding, no matching --space-* token exists */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-block: var(--btn-pad-block);
    padding-inline: var(--space-10); /* FIGMA-DEVIATION: fixed, not clamped — the fluid low-end value wasn't in the read range; see response */
    border-radius: var(--radius-pill);
    font-size: var(--btn-label-size);
    text-decoration: none;
    text-align: center;
    white-space: nowrap; /* REQ-CMP-013 */
  }

  .btn--primary {
    background: var(--color-orange);
    color: var(--color-ink); /* REQ-A11Y-003: correction 3 of §3.3 — not white */
    font-weight: 700;
    box-shadow: var(--shadow-orange);
  }

  .btn--secondary {
    background: var(--color-white);
    color: var(--color-ink);
    font-weight: 500;
  }

  /* REQ-CMP-010: the header is static/relative, never fixed or sticky. */
  /* REQ-CSS-005(a): the nav is the one absolute-positioning exception that overlays the hero. */
  .nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: var(--z-nav);
    block-size: var(--layout-nav-h);
  }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 100%;
  }

  .nav__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .nav__logo {
    /* REQ-RSP-027: the only logo dimensions read so far are the mobile ones; applied uniformly
       pending the desktop figure (flagged in the response). */
    inline-size: 112px;
    block-size: 42px;
  }

  .nav__toggle {
    /* REQ-CMP-003: hit target >=44x44 even though the visible icon is RSP-027's 47x14. */
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    inline-size: 47px;
    min-block-size: 44px;
    cursor: pointer;
  }

  .nav__toggle-bar {
    display: block;
    inline-size: 100%;
    block-size: 2px;
    background: var(--color-white);
  }

  .nav__menu {
    /* REQ-INT-001: hidden by default (mobile), toggled via the hidden attribute, never style.display. */
  }

  .nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
    padding-inline-start: 0;
  }

  .nav__link {
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap; /* REQ-CMP-013 */
  }

  .nav__actions {
    display: none;
    align-items: center;
    gap: var(--space-4);
  }

  @media (min-width: 768px) {
    .nav__toggle {
      display: none; /* REQ-INT-002: absent from the a11y tree at >=768px */
    }

    .nav__menu[hidden] {
      display: block; /* REQ-INT-002: renders inline at >=768px regardless of toggle state */
    }

    .nav__list {
      flex-direction: row;
      align-items: center;
      gap: clamp(1rem, -1.5rem + 3.1vw, 3.75rem); /* REQ-CMP-014 */
    }

    .nav__actions {
      display: flex;
    }
  }
}

@layer components {
  /* REQ-CMP-004: shared eyebrow — dark-surface colour here; .eyebrow--on-light is added when a
     light-surface section needs it. */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-eyebrow);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .eyebrow::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: currentColor;
  }

  .eyebrow--on-light {
    color: var(--color-primary-onlight); /* REQ-A11Y-004 */
  }

  /* REQ-CMP-022, REQ-HERO-002: gradient background, stops copied verbatim from backgrounds.css;
     REQ-CSS-005 is not implicated — this is a background-image, not a positioned layout element. */
  .hero {
    position: relative; /* REQ-CMP-011: containing block for the nav's REQ-CSS-005(a) overlay */
    padding-block-start: calc(var(--layout-nav-h) + var(--space-10));
    padding-block-end: var(--space-16);
    border-end-start-radius: var(--radius-card-lg);
    border-end-end-radius: var(--radius-card-lg);
    color: var(--color-white);
    overflow: hidden;
    background:
      radial-gradient(60% 60% at 108% 130%, rgba(0,165,223,.55) 0%, transparent 60%),
      radial-gradient(60% 60% at -10% 150%, rgba(37,55,254,.55) 0%, transparent 60%),
      linear-gradient(180deg, #001131 0%, #003497 100%);
  }

  @media (max-width: 768px) {
    .hero {
      background:
        radial-gradient(80% 40% at 100% 92%, rgba(0,165,223,.55) 0%, transparent 65%),
        radial-gradient(80% 40% at 0% 100%, rgba(37,55,254,.55) 0%, transparent 65%),
        linear-gradient(180deg, #001131 0%, #003497 100%);
    }
  }

  .hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--space-10);
  }

  @media (min-width: 1024px) {
    /* REQ-CMP-020 */
    .hero__grid {
      grid-template-columns: minmax(0, 772fr) minmax(0, 934fr);
    }
  }

  /* BUG FIX 14/09: .hero__col had no vertical rhythm at all -- REQ-CSS-002's global reset zeroes every
     margin, and no gap/margin was ever added here, so eyebrow/title/lead/body/actions/helper rendered
     flush against each other. FIGMA-DEVIATION: exact spacing values unread (no REQ-ID gives them) --
     estimated from the Figma prototype screenshot against the --space-* scale; flagged in the response
     for a pixel check against the real frame. */
  .hero__title {
    margin-block-start: var(--space-4);
    font-size: var(--size-title);
    line-height: var(--lh-title);
    font-weight: 500;
  }

  .hero__title-line {
    display: block; /* REQ-HTML-014: a styled span line box, not <br> */
  }

  .hero__lead {
    margin-block-start: var(--space-8);
    font-size: var(--size-body);
    font-weight: 700; /* REQ-CMP-021 */
  }

  .hero__body {
    margin-block-start: var(--space-4);
    font-size: var(--size-body);
    font-weight: 400; /* REQ-CMP-021 */
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-8);
  }

  .hero__helper {
    margin-block-start: var(--space-3);
    font-style: italic;
    font-size: var(--size-helper);
    line-height: var(--lh-helper);
    color: var(--color-hero-helper); /* REQ-A11Y-005: checked against the lightest gradient point */
  }

  .hero__media {
    aspect-ratio: 934 / 556; /* REQ-HERO-004: the box reserves its space before the image arrives */
  }

  .hero__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

@layer components {
  /* REQ-CMP-030: content-driven height, never a fixed 150px; REQ-RSP-007: no nowrap here. */
  .band {
    min-block-size: 0;
    padding-block: var(--space-6); /* FIGMA-DEVIATION: exact vertical rhythm unread, see response */
  }

  .band--atex {
    background: var(--color-atex-blue);
    color: var(--color-white);
  }

  .band__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: inherit;
    font-size: var(--size-body); /* BUG FIX 14/09: unset before -- inherited body's 16px against
      variables.json's "Body-txt" = Inter Bold 24/1.45 (03-atex-redirect/variables.json); --size-body's
      clamp tops out at exactly 24px, --lh-body is already 1.45. */
    font-weight: 700;
    text-decoration: underline; /* BUG FIX 14/09: was "none" -- no REQ specifies this, but the Figma
      screenshot shows the band text underlined; FIGMA-DEVIATION, exact weight unread, flagged in the
      response. */
  }

  .band__arrow {
    inline-size: 24px;
    block-size: 24px;
    flex-shrink: 0;
  }
}

@layer components {
  /* BUG FIX 14/09: section 04 is the only content section with no wrapper padding-block at all --
     05/06/07/08 get it from their own class (e.g. .newsroom-os), 09 gets it from [id="faq"]
     (@layer components, ~line 1261). This section was skipped when that pattern was applied, so its
     eyebrow/heading/grid rendered flush against the Atex band above it. Same --space-25 as every
     sibling section for consistency. REQ-CSS-001 applies here too: attribute selector, not #challenges. */
  [id="challenges"] {
    padding-block: var(--space-25);
  }

  /* FIGMA-DEVIATION: shared Title-medium preset for sections 04-11 headings — exact per-section
     sizing wasn't in the read range, so one generic preset stands in; see response. */
  .section-heading {
    font-size: var(--size-title-med);
    font-weight: 500;
    line-height: var(--lh-title-med);
    margin-block-start: var(--space-4);
  }

  /* REQ-CMP-040: content-driven row heights, 3 columns >=1024px. */
  .pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); /* REQ-RSP-020 */
    align-items: stretch;
    gap: var(--space-5);
    list-style: none;
    padding-inline-start: 0;
    margin-block-start: var(--space-10);
  }

  @media (max-width: 767.98px) {
    .pain-grid {
      grid-template-columns: 1fr;
    }

    /* REQ-INT-060, REQ-INT-061: all 9 ship in the HTML; CSS hides items 7-9 until expanded. */
    .pain-grid > li:nth-child(n + 7) {
      display: none;
    }

    .pain-grid.is-expanded > li:nth-child(n + 7) {
      display: block;
    }
  }

  @media (min-width: 1024px) {
    .pain-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)); /* REQ-CMP-040 */
    }
  }

  .pain-card {
    background: var(--color-white);
    border: 1.34px solid var(--color-border-card);
    border-radius: var(--radius-card-pp);
    padding: var(--space-8);
  }

  .pain-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48.22px;
    block-size: 48.22px;
    border-radius: var(--radius-badge);
    background: var(--color-badge-bg);
    color: var(--color-primary-onlight); /* REQ-A11Y-004 */
    font-size: var(--size-badge);
    font-style: italic;
    font-weight: 500; /* REQ-CMP-041: Medium Italic, the fifth face */
    letter-spacing: var(--ls-badge);
  }

  .pain-card__title {
    font-size: var(--size-title-sm);
    margin-block-start: var(--space-4);
  }

  .pain-card__body {
    font-size: var(--size-body-med);
    color: var(--color-body);
    margin-block-start: var(--space-2);
  }

  /* REQ-INT-062: a real button, target >=44px; hidden entirely >=768px (REQ-INT-061). */
  .pain-grid__toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    margin-block-start: var(--space-6);
    cursor: pointer;
  }

  @media (max-width: 767.98px) {
    .pain-grid__toggle {
      display: inline-flex;
    }
  }

  .pain-grid__toggle-chevron {
    display: inline-block;
    inline-size: 10px;
    block-size: 10px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg); /* REQ-INT-062: points down, collapsed */
    transition: transform var(--dur-base);
  }

  .pain-grid__toggle[aria-expanded="true"] .pain-grid__toggle-chevron {
    transform: rotate(225deg); /* REQ-INT-062: points up, expanded */
  }

  /* REQ-CMP-042: content-driven height, REQ-A11Y-006 correction, REQ-CSS-014 overlay. */
  .closing-banner {
    position: relative;
    background: var(--color-banner-teal);
    color: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--space-8);
    margin-block-start: var(--space-10);
    overflow: hidden;
    font-size: var(--size-title); /* BUG FIX 14/09: unset before -- inherited body's 16px against
      04-newsroom-health-check/variables.json's "Title" = Inter Medium 64/74 (same scale used by
      .newsroom-os__title for section 05's Title token). */
    font-weight: 500;
    line-height: var(--lh-title);
    text-align: center;
  }

  .closing-banner::before {
    /* REQ-CSS-005(c): gridline overlay pseudo-element, one of the five allowed absolute-position cases. */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(90deg, rgb(255 255 255 / 0.043) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(180deg, rgb(255 255 255 / 0.043) 0 1px, transparent 1px 8px);
    pointer-events: none;
  }
}

@layer components {
  /* REQ-CSS-007, REQ-CSS-015: section-05 background + containment; REQ-CMP-050 for the intro block. */
  .newsroom-os {
    position: relative;
    contain: layout paint;
    padding-block: var(--space-25);
    overflow: hidden;
    /* CWV: gradient-only background, no raster request (REQ-STD-004). The linear-gradient stop is
       copied verbatim from figma-mytype-extract/backgrounds.css .section-newsroom-os; the three radial
       highlights approximate REQ-CSS-007's "three decorative blobs" -- backgrounds.css has no stop
       values for them, so this is a FIGMA-DEVIATION, flagged in the response. */
    background:
      radial-gradient(55% 45% at 50% -5%, rgb(0 175 204 / 0.12) 0%, transparent 70%),
      radial-gradient(40% 35% at 90% 8%, rgb(30 76 255 / 0.08) 0%, transparent 70%),
      radial-gradient(45% 35% at 6% 85%, rgb(77 240 242 / 0.10) 0%, transparent 70%),
      linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);
  }

  .newsroom-os__intro {
    max-inline-size: var(--layout-narrow);
    margin-inline: auto;
    text-align: center;
  }

  /* FIGMA-DEVIATION: variables.json (05) gives Title = 64px/74/500, matching --size-title/--lh-title
     (the hero scale), not the shared .section-heading (Title-medium, 32px) used by 04/07/etc. No
     global heading colour rule exists yet, so --color-ink is scoped here -- flagged in the response. */
  .newsroom-os__title {
    font-size: var(--size-title);
    line-height: var(--lh-title);
    font-weight: 500;
    color: var(--color-ink);
    margin-block-start: var(--space-4);
  }

  .newsroom-os__lead {
    font-size: var(--size-body);
    margin-block-start: var(--space-4);
  }

  /* REQ-CSS-006: one square container; rings are borders on empty elements; cards positioned in %.
     REQ-CSS-004/005: only the six step cards may use position: absolute (exception b) -- the rings and
     the centre node are stacked with CSS Grid (all children sharing grid-area: 1 / 1) instead. */
  .orbit {
    display: grid;
    inline-size: min(60rem, 50vw); /* 60rem = 960px, the outer ring's diameter at 1920 (REQ-TOK-005) */
    aspect-ratio: 1;
    margin-block: var(--space-25) 0;
    margin-inline: auto;
  }

  .orbit__rings {
    display: grid;
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
  }

  .orbit__ring {
    grid-area: 1 / 1;
    place-self: center;
    border-radius: 50%;
    border: 1px solid var(--color-ring);
  }

  /* REQ-CSS-006: 960/842/686/584/486 px at 1920, expressed as % of .orbit's own box.
     FIGMA-DEVIATION: which rings are solid vs dashed wasn't read precisely -- alternating from the
     outside in, starting dashed; flagged in the response. */
  .orbit__ring--1 { inline-size: 100%; block-size: 100%; border-style: dashed; }
  .orbit__ring--2 { inline-size: 87.7%; block-size: 87.7%; border-style: solid; }
  .orbit__ring--3 { inline-size: 71.46%; block-size: 71.46%; border-style: dashed; }
  .orbit__ring--4 { inline-size: 60.83%; block-size: 60.83%; border-style: solid; }
  .orbit__ring--5 { inline-size: 50.625%; block-size: 50.625%; border-style: dashed; }

  /* BUG FIX 14/09: the six curved arrows connecting the step cards clockwise, drawn on the ring--2
     circle (radius 43.85%) between each pair of card angles, inset from both ends so they don't run
     under the cards. Stacked with the rings/centre via the same grid-area technique (REQ-CSS-006),
     not position: absolute. */
  .orbit__connectors {
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
  }

  .orbit__connector {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 0.4;
    stroke-linecap: round;
  }

  .orbit__connector-arrowhead {
    fill: var(--color-primary);
  }

  /* FIGMA-DEVIATION: backgrounds.css has verbatim stops for the three full-bleed section washes only
     (hero, 05, 11) -- none for this node. Approximated from tokens already in :root; flagged below. */
  .orbit__center {
    grid-area: 1 / 1;
    place-self: center;
    inline-size: 34.8%; /* 334px at 1920 (component spec prose), as a % of .orbit so it scales as one unit */
    block-size: 34.8%; /* BUG FIX 14/09(c): with display: flex and the bigger label/tagline text added
      today, the column content's own min-content height exceeded aspect-ratio's height and the box
      grew taller than it was wide (an ellipse, not a circle). Pinning block-size to the same % as
      inline-size, against .orbit's definite box (the technique .orbit__rings already uses), makes it a
      true circle regardless of content wherever that % is resolvable. Below 768px .orbit itself has no
      definite height (REQ-CMP-051b's flex column), so this % resolves to auto there and aspect-ratio
      below takes back over against the fixed inline-size the mobile override sets -- keep both. */
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3); /* BUG FIX 14/09: was --space-1 (4px) -- Figma shows the logo/label/tagline
      with real breathing room, not stacked edge to edge. */
    padding: var(--space-6);
    overflow: hidden; /* safety net: content must never be able to push this box off-circle again */
    text-align: center;
    box-shadow: var(--shadow-center);
    background: radial-gradient(120% 120% at 30% 20%, var(--color-primary) 0%, var(--color-navy-800) 45%, var(--color-navy-900) 100%);
  }

  .orbit__center-logo {
    /* BUG FIX 14/09: was a viewport-relative clamp() disconnected from the circle's own size (34.8%
       of .orbit) -- rendered far smaller than Figma's ~72%-of-diameter logo and drifted out of
       proportion with the circle at other viewports. A % width on a flex item resolves against its
       own flex container (.orbit__center), so this scales with the circle as one unit instead. */
    inline-size: 62%;
    block-size: auto;
  }

  .orbit__center-label {
    color: var(--color-white);
    /* BUG FIX 14/09: was --size-body-med (16-20px) -- variables.json's "Title-Small" token for this
       label is 24/30/500, which is exactly --size-title-sm / --lh-title-sm already used elsewhere
       (e.g. .step-card__title) for that same token. */
    font-size: var(--size-title-sm);
    line-height: var(--lh-title-sm);
    font-weight: 500;
  }

  .orbit__center-label-accent {
    color: var(--color-primary);
  }

  .orbit__center-tagline {
    color: var(--color-center-tagline);
    /* BUG FIX 14/09: was --size-helper (a fixed 16px) -- variables.json's "Body-txt" token here is
       24/1.45/400, i.e. --size-body / --lh-body (already the site's mapping for that token, see the
       03-atex-redirect band). max-inline-size forces the Figma-drawn two-line break ("One Workflow." /
       "Every Story.") instead of running onto one line now that the text is bigger. */
    font-size: var(--size-body);
    line-height: var(--lh-body);
    max-inline-size: 14ch;
    margin-inline: auto;
  }

  /* REQ-HTML-021: the six step cards stay copy.json order in the DOM; desktop placement is REQ-CMP-050's
     centre-relative percentages, independent of DOM order. */
  .step-list {
    grid-area: 1 / 1;
    position: relative; /* the containing block for the absolutely positioned .step-card items */
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
  }

  .step-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-cyan);
    border-radius: var(--radius-card-xs);
    padding: 1.625rem; /* REQ-STD-002: 26px at 1920, not in the --space-* catalogue */
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: center;
  }

  .step-card__icon {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* REQ-TOK-003 method: 65px at 1920 (component spec), ~56px mobile (REQ-RSP-025 §4.5) */
    inline-size: clamp(3.5rem, 3.357rem + 0.588vw, 4.0625rem);
    block-size: clamp(3.5rem, 3.357rem + 0.588vw, 4.0625rem);
    border-radius: var(--radius-tile);
    background: var(--color-chip-gray);
    color: var(--color-ink);
  }

  .step-card__icon-svg {
    inline-size: 55%;
    block-size: 55%;
  }

  .step-card--highlighted .step-card__icon {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-create);
  }

  .step-card__title {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--size-title-sm);
    line-height: var(--lh-title-sm);
    font-weight: 500;
  }

  .step-card--highlighted .step-card__title {
    font-weight: 700;
  }

  .step-card__body {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: var(--size-body-sm);
    line-height: var(--lh-body-sm);
    color: var(--color-body);
  }

  /* REQ-CMP-051b: the connector arrows are mobile-only (<768px); hidden everywhere else. */
  .step-connector {
    display: none;
  }

  @media (min-width: 1024px) {
    .step-card {
      position: absolute; /* REQ-CSS-005(b) */
      inline-size: clamp(21.875rem, 21.078rem + 3.268vw, 25rem); /* 400px at 1920, 350px mobile (REQ-RSP-025) */
      transform: translate(-50%, -50%);
    }

    /* REQ-CMP-050: centres measured off the section-05 reference screenshot, relative to .orbit. */
    .step-list > li:nth-child(1) { inset-inline-start: 50%; inset-block-start: 5%; }     /* discover */
    .step-list > li:nth-child(2) { inset-inline-start: -7.5%; inset-block-start: 30%; }  /* plan */
    .step-list > li:nth-child(3) { inset-inline-start: 107.5%; inset-block-start: 30%; } /* create */
    .step-list > li:nth-child(4) { inset-inline-start: -7.5%; inset-block-start: 70%; }  /* measure */
    .step-list > li:nth-child(5) { inset-inline-start: 107.5%; inset-block-start: 70%; } /* optimize */
    .step-list > li:nth-child(6) { inset-inline-start: 50%; inset-block-start: 93%; }    /* publish */
  }

  @media (max-width: 1023.98px) {
    /* REQ-CMP-051: 768-1024 is the engineering floor -- plain list, diagram hidden, DOM order kept. */
    .orbit {
      inline-size: auto;
      aspect-ratio: auto;
      margin-block-start: var(--space-10);
    }

    .orbit__rings,
    .orbit__connectors,
    .orbit__center {
      display: none;
    }

    .step-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }

    .step-card {
      inline-size: 100%;
      max-inline-size: 21.875rem; /* REQ-RSP-025's 350px mobile column, reused as the floor's cap */
      margin-inline: auto;
    }
  }

  @media (max-width: 767.98px) {
    /* REQ-CMP-051b supersedes REQ-CMP-051 below 768px: the centre node is kept and reordered in. */
    .orbit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-6);
    }

    .orbit__center {
      display: flex;
      position: relative;
      transform: none;
      inline-size: min(100%, 28.125rem); /* ~450px per REQ-CMP-051b */
      margin-inline: auto;
      order: 8;
    }

    .orbit__center::before {
      /* REQ-CMP-051b: concentric rings behind the centre node, decorative background only, not geometry. */
      content: "";
      position: absolute;
      inset: -18%;
      z-index: -1;
      border-radius: 50%;
      background: repeating-radial-gradient(circle, transparent 0 12%, var(--color-ring) 12% calc(12% + 1px), transparent calc(12% + 1px) 24%);
    }

    .step-list {
      display: contents; /* REQ-HTML-021: <ol>/<li> semantics stay; items join .orbit's flex order */
    }

    /* REQ-CMP-051b visual order: discover, create, optimize, [centre], publish, plan, measure --
       even order numbers so the six .step-connector siblings (REQ-CSS-004: no position: absolute:
       real in-flow flex items, not positioned pseudo-elements) take the odd numbers between them. */
    .step-list > li:nth-child(1) { order: 2; }  /* discover */
    .step-list > li:nth-child(3) { order: 4; }  /* create */
    .step-list > li:nth-child(5) { order: 6; }  /* optimize */
    .step-list > li:nth-child(6) { order: 10; } /* publish */
    .step-list > li:nth-child(2) { order: 12; } /* plan */
    .step-list > li:nth-child(4) { order: 14; } /* measure */

    .step-connector {
      order: 3;
      align-self: center;
      display: block;
      inline-size: 10px;
      block-size: 10px;
      border-inline-end: 2px solid var(--color-primary);
      border-block-end: 2px solid var(--color-primary);
      transform: rotate(45deg);
    }

    .step-connector:nth-of-type(2) { order: 5; }
    .step-connector:nth-of-type(3) { order: 7; }
    .step-connector:nth-of-type(4) { order: 9; }
    .step-connector:nth-of-type(5) { order: 11; }
    .step-connector:nth-of-type(6) { order: 13; }
  }
}

@layer components {
  /* REQ-CMP-060..064: section 06 -- two comparison panels + a demo strip. */
  .fragmented-connected {
    padding-block: var(--space-25);
    contain: layout paint; /* REQ-CSS-015: sections 04-12 */
    content-visibility: auto; /* REQ-CSS-015: sections 06 and below */
    contain-intrinsic-size: auto 1237px; /* REQ-CSS-015: 1920px Figma frame height, a pre-render estimate */
  }

  .fragmented-connected__intro {
    max-inline-size: var(--layout-narrow);
    margin-inline: auto;
    text-align: center;
  }

  /* FIGMA-DEVIATION: variables.json (06) gives Title = 64px/74/500, matching --size-title/--lh-title,
     same as section 05 -- not the shared .section-heading (Title-medium, 32px). No global heading
     colour rule exists yet, so --color-ink is scoped here, same as .newsroom-os__title. */
  .fragmented-connected__title {
    font-size: var(--size-title);
    line-height: var(--lh-title);
    font-weight: 500;
    color: var(--color-ink);
    margin-block-start: var(--space-4);
  }

  .fragmented-connected__lead {
    font-size: var(--size-body);
    margin-block-start: var(--space-4);
  }

  /* REQ-CMP-060: two columns, gap var(--space-5); stacks below 768px (not the 1024px tablet floor --
     minmax(0, 1fr) already shrinks gracefully at 768-1024, so no extra tier is needed here). */
  .panel-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-block-start: var(--space-10);
  }

  .panel {
    position: relative; /* containing block for the REQ-CSS-005(e) label */
    border: 1px solid var(--color-ink);
    border-radius: 34px; /* REQ-STD-002: exact Figma value, not in the --radius-* catalogue */
    overflow: hidden;
  }

  .panel__label {
    position: absolute; /* REQ-CSS-005(e) */
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    font-size: var(--size-body-med);
    font-weight: 700;
  }

  .panel--today .panel__label {
    color: var(--color-ink);
  }

  .panel--tomorrow .panel__label {
    color: var(--color-white);
  }

  .panel__media {
    aspect-ratio: 820 / 719; /* REQ-IMG-002: the CSS box, matching the delivered files' own ratio */
  }

  .panel__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* REQ-CMP-064: renders at every width, same order, centred. */
  .demo-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-block-start: var(--space-10);
    text-align: center;
  }

  .demo-strip__text {
    font-size: var(--size-body-med);
    color: var(--color-ink);
  }

  @media (max-width: 767.98px) {
    /* REQ-CMP-060: below 768px the two panels stack, 350px wide each (REQ-RSP-025's mobile column). */
    .panel-row {
      grid-template-columns: 1fr;
    }

    .panel {
      inline-size: 100%;
      max-inline-size: 21.875rem;
      margin-inline: auto;
    }
  }
}

@layer components {
  /* REQ-CMP-070..072, REQ-CSS-014, REQ-RSP-008: section 07 -- dark scalloped panel, gridline overlay,
     three info cards sharing the one circle-check sprite symbol. */
  .panel--dark {
    position: relative;
    overflow: hidden;
    contain: layout paint; /* REQ-CSS-015 */
    content-visibility: auto; /* REQ-CSS-015: sections 06 and below */
    /* REQ-CSS-015: §8.8 gives only the 1019px inner panel, not the full section frame -- estimated as
       inner panel + 2x --space-25 padding-block (100px each). A pre-render estimate, not a spec figure. */
    contain-intrinsic-size: auto 1219px;
    padding-block: var(--space-25);
    color: var(--color-white);
    background: var(--color-navy-900);
    /* REQ-RSP-008: only the bottom corners scallop; top stays square, same fluid token as the hero's
       corners but this section's own (--radius-scallop, capped well under 26% of the panel width). */
    border-end-start-radius: var(--radius-scallop);
    border-end-end-radius: var(--radius-scallop);
  }

  .panel--dark::before {
    /* REQ-CSS-014: identical placeholder to the 04 closing-banner overlay -- 8px/1px/0.043, §21-O6. */
    content: "";
    position: absolute; /* REQ-CSS-005(c) */
    inset: 0;
    background-image:
      repeating-linear-gradient(90deg, rgb(255 255 255 / 0.043) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(180deg, rgb(255 255 255 / 0.043) 0 1px, transparent 1px 8px);
    pointer-events: none;
  }

  /* FIGMA-DEVIATION: variables.json (07) gives Title = 64px/74/500, same scale as sections 05/06's
     h2 -- not the shared .section-heading (Title-medium). Colour inherits from .panel--dark's white. */
  .innovation__title {
    font-size: var(--size-title);
    line-height: var(--lh-title);
    font-weight: 500;
    margin-block-start: var(--space-4);
  }

  .info-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); /* REQ-RSP-020 floor, as used by .pain-grid */
    gap: 22.222px; /* REQ-CMP-070: exact Figma value, not in the --space-* catalogue */
    list-style: none;
    padding-inline-start: 0;
    margin-block-start: var(--space-10);
  }

  @media (min-width: 1024px) {
    .info-card-list {
      grid-template-columns: repeat(3, minmax(0, 1fr)); /* REQ-CMP-070 */
    }
  }

  .info-card {
    background: var(--color-ink);
    border: 1.111px solid var(--color-card-border-dark);
    border-radius: var(--radius-card);
    padding: 35.556px; /* REQ-STD-002: exact Figma value */
  }

  .info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 62.222px; /* REQ-STD-002: exact Figma value */
    block-size: 62.222px;
    border-radius: 17.778px; /* REQ-STD-002: figma-mytype-extract/07.../context.md, no catalogue match */
    /* FIGMA-DEVIATION: three-stop gradient read from context.md (the spec names it but doesn't give
       stops) -- flagged in the response per prompt3-build.md's rule for that file. */
    background: linear-gradient(135deg, rgba(41, 224, 230, .2) 0%, rgba(43, 190, 238, .15) 50%, rgba(47, 123, 255, .1) 100%);
    color: var(--color-accent-cyan);
  }

  .info-card__icon-svg {
    inline-size: 36px;
    block-size: 36px;
  }

  .info-card__title {
    font-size: var(--size-title-med);
    line-height: var(--lh-title-med);
    font-weight: 500;
    margin-block-start: var(--space-4);
  }

  .info-card__body {
    font-size: var(--size-body);
    color: var(--color-card-body-dark);
    margin-block-start: var(--space-2);
  }
}

@layer components {
  /* REQ-CMP-080, REQ-CMP-081, REQ-HTML-024, REQ-CSS-015: section 08 -- single price card, full-width
     .btn--primary per REQ-CMP-080 rather than the Figma's fixed 652px button. */
  .pricing {
    padding-block: var(--space-25);
    contain: layout paint; /* REQ-CSS-015: sections 04-12 */
    content-visibility: auto; /* REQ-CSS-015: sections 06 and below */
    /* REQ-CSS-015: §8.9's 748px is the 1660px content frame, not the full section -- estimated as
       content height + 2x --space-25 padding-block (100px each). A pre-render estimate, not a spec figure. */
    contain-intrinsic-size: auto 948px;
    background: var(--color-surface-light);
  }

  .pricing__intro {
    max-inline-size: var(--layout-narrow);
    margin-inline: auto;
    text-align: center;
  }

  /* FIGMA-DEVIATION: no global heading colour rule exists yet, scoped here like .newsroom-os__title /
     .fragmented-connected__title / .innovation__title -- flagged in the response. */
  .pricing .section-heading {
    color: var(--color-ink);
  }

  .pricing__lead {
    font-size: var(--size-body);
    color: var(--color-body);
    margin-block-start: var(--space-4);
  }

  .price-card {
    max-inline-size: 46.5rem; /* REQ-CMP-080: 744px, centred, never a fixed inline-size below this */
    margin-inline: auto;
    margin-block-start: var(--space-10);
    background: var(--color-white);
    border: 1.111px solid var(--color-border-card); /* REQ-STD-002: exact Figma value */
    border-radius: var(--radius-card);
    padding: 44.444px; /* REQ-STD-002: exact Figma value, no matching --space-* token */
    box-shadow: var(--shadow-price);
    text-align: center;
  }

  /* FIGMA-DEVIATION: same typography as .eyebrow (Inter Regular, tracking, uppercase, corrected
     on-light cyan per REQ-A11Y-004) but the card kicker carries no leading dot in the Figma --
     confirmed by pixel crop of figma-mytype-extract/08-pricing/screenshot.png; flagged in the response. */
  .price-card__kicker {
    font-size: var(--size-eyebrow);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-primary-onlight);
  }

  .price-card__price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  /* REQ-HTML-024: price text in its own <span>, weight 700, --size-title -- no <data>/microdata. */
  .price-card__amount {
    font-size: var(--size-title);
    line-height: var(--lh-title);
    font-weight: 700;
    color: var(--color-ink);
  }

  /* REQ-HTML-024: the period's own <span>, literal class name from the spec prose. */
  .period {
    font-size: var(--size-body-med);
    color: var(--color-body);
  }

  .price-card__note {
    font-size: var(--size-body-med);
    color: var(--color-body);
    margin-block-start: var(--space-4);
  }

  .price-card .btn--primary {
    margin-block-start: var(--space-6);
    inline-size: 100%; /* REQ-CMP-080: spans the card's content width, not the Figma's fixed 652px */
  }
}

@layer components {
  /* REQ-CMP-090, REQ-CMP-091, REQ-HTML-022, REQ-HTML-023, REQ-CSS-015: section 09 -- a single <dl>,
     balanced into two CSS columns >=1024px so DOM order stays 1-10 (REQ-GEO-004); Variant A (static
     open list, REQ-INT-030) per decisions.md "FAQ: lista statica aperta" -- no accordion JS exists. */
  /* REQ-CSS-001: attribute selector on id="", not #faq -- same 0,2,0 ceiling reason as the
     scroll-margin-top block in @layer layout. */
  [id="faq"] {
    contain: layout paint; /* REQ-CSS-015 */
    content-visibility: auto;
    contain-intrinsic-size: auto 1016px; /* REQ-CSS-015: 1920px Figma frame height, a pre-render estimate */
    padding-block: var(--space-25);
  }

  .faq-list {
    margin-block-start: var(--space-10);
  }

  @media (min-width: 1024px) {
    /* FIGMA-DEVIATION: column-gap wasn't in the read range -- --space-10 chosen for parity with the
       other section intros/grids; flagged in the response. */
    .faq-list {
      columns: 2;
      column-gap: var(--space-10);
    }

    .faq-item {
      break-inside: avoid-column;
    }
  }

  .faq-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3); /* 12px, exact match */
    border-block-start: 1px solid var(--color-gray-200);
    padding-block-start: 1.75rem; /* REQ-STD-002: 28px, no matching --space-* token */
    padding-block-end: var(--space-1); /* 4px, exact match */
  }

  /* FIGMA-DEVIATION: §8.10 gives size and colour for the question but no weight; 500 chosen for parity
     with the other Title-sm headings that set an explicit weight (e.g. .step-card__title); flagged below. */
  .faq-item__q {
    font-size: var(--size-title-sm);
    line-height: var(--lh-title-sm);
    font-weight: 500;
    color: var(--color-navy-800);
  }

  .faq-item__a {
    font-size: var(--size-body-med);
    color: var(--color-body);
  }

  /* REQ-INT-060..063: identical pattern to .pain-grid__toggle (04), duplicated rather than shared so
     each section keeps its own scoped BEM block, consistent with the rest of the stylesheet. */
  .faq-list__toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    margin-block-start: var(--space-6);
    cursor: pointer;
  }

  @media (max-width: 767.98px) {
    .faq-list__toggle {
      display: inline-flex;
    }

    /* REQ-INT-060, REQ-INT-061: all 10 ship in the HTML; CSS hides items 7-10 until expanded. */
    .faq-list > .faq-item:nth-child(n + 7) {
      display: none;
    }

    .faq-list.is-expanded > .faq-item:nth-child(n + 7) {
      display: block;
    }
  }

  .faq-list__toggle-chevron {
    display: inline-block;
    inline-size: 10px;
    block-size: 10px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg); /* REQ-INT-062: points down, collapsed */
    transition: transform var(--dur-base);
  }

  .faq-list__toggle[aria-expanded="true"] .faq-list__toggle-chevron {
    transform: rotate(225deg); /* REQ-INT-062: points up, expanded */
  }
}

@layer components {
  /* REQ-CMP-100, REQ-CMP-101, REQ-CSS-015: section 10 -- one AtexBridge card, text + button. */
  .atex-bridge {
    contain: layout paint; /* REQ-CSS-015: sections 04-12 */
    content-visibility: auto; /* REQ-CSS-015: sections 06 and below */
    contain-intrinsic-size: auto 240.5px; /* REQ-CSS-015: 1920px Figma frame height (§8.11) */
    padding-block: var(--space-16); /* FIGMA-DEVIATION: exact vertical rhythm unread, see response */
  }

  .bridge-card {
    display: flex;
    flex-wrap: wrap; /* REQ-CMP-100: button wraps under the text between 1024 and 1350px */
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-10); /* 40px, exact match */
    background: var(--color-atex-blue-deep);
    border: 1px solid rgb(255 157 60 / 0.3); /* REQ-STD-002: exact Figma value, no matching token */
    border-radius: var(--radius-card-sm);
  }

  .bridge-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2); /* FIGMA-DEVIATION: exact value unread, see response */
    flex: 1 1 20rem;
  }

  .bridge-card__heading {
    font-size: var(--size-title-med);
    line-height: var(--lh-title-med);
    font-weight: 500;
    color: var(--color-white);
  }

  /* REQ-CMP-101: a distinct button variant -- the pill lightens against the card's deeper blue,
     with the same glow token already scoped to this colour (--shadow-atex). */
  .btn--atex {
    flex: 0 0 auto;
    gap: var(--space-2);
    background: var(--color-atex-blue);
    color: var(--color-white);
    font-weight: 700;
    box-shadow: var(--shadow-atex);
  }

  .btn--atex__arrow {
    inline-size: 16px;
    block-size: 16px;
    flex-shrink: 0;
  }
}

@layer components {
  /* REQ-CMP-110, REQ-IMG-010, REQ-CSS-015, REQ-CSS-017: section 11 -- gradient stops copied verbatim
     from figma-mytype-extract/backgrounds.css .cta-bg, including its own mobile block; top corners only
     (the hero's bottom-corner scallop, mirrored -- the footer follows with no gap). */
  .final-cta {
    position: relative;
    overflow: hidden;
    contain: layout paint; /* REQ-CSS-015: sections 04-12 */
    content-visibility: auto; /* REQ-CSS-015: sections 06 and below */
    contain-intrinsic-size: auto 522px; /* REQ-CSS-015: 1920px Figma frame height (§8.12) */
    padding-block: var(--space-25);
    color: var(--color-white);
    text-align: center;
    border-start-start-radius: var(--radius-card-lg);
    border-start-end-radius: var(--radius-card-lg);
    background:
      radial-gradient(65% 60% at 108% 120%, rgba(0,165,223,.50) 0%, transparent 60%),
      linear-gradient(180deg, #001131 0%, #003497 100%);
  }

  @media (max-width: 768px) {
    .final-cta {
      background:
        radial-gradient(85% 50% at 100% 100%, rgba(0,165,223,.50) 0%, transparent 65%),
        linear-gradient(180deg, #001131 0%, #003497 100%);
    }
  }

  .final-cta__heading {
    max-inline-size: var(--layout-narrow); /* REQ-CMP-110: 1028.75px, the spec's 1028px cap */
    margin-inline: auto;
    font-size: var(--size-title);
    line-height: var(--lh-title);
    font-weight: 500;
  }

  .final-cta__body {
    margin-block-start: var(--space-4);
    font-size: var(--size-body);
    color: var(--color-blue-200);
  }

  .final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-block-start: var(--space-10);
  }
}

@layer components {
  /* REQ-CMP-120..122, REQ-CSS-015: section 12 -- brand block left, links block right, hairline divider.
     Logo reuses .nav__logo (REQ-CMP-122: same symbol, same 112x42 sizing intent as the nav). */
  .site-footer {
    background: var(--color-navy-900);
    contain: layout paint; /* REQ-CSS-015: sections 04-12 */
    content-visibility: auto; /* REQ-CSS-015: sections 06 and below */
    contain-intrinsic-size: auto 259px; /* REQ-CSS-015: 1920px Figma frame height (§8.13), exact */
    padding-block-start: var(--space-10);
    padding-block-end: var(--space-6);
  }

  .site-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
  }

  .site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .site-footer__brand-link {
    display: inline-flex;
    text-decoration: none;
  }

  /* FIGMA-DEVIATION: §8.13 gives no per-text-node colour -- --color-blue-200 reused from the preceding
     section's identical light-on-dark secondary text (.final-cta__body); flagged in the response. */
  .site-footer__tagline {
    font-size: var(--size-body-med);
    color: var(--color-blue-200);
  }

  .site-footer__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    text-align: end;
  }

  .site-footer__link {
    font-size: var(--size-body-med);
    color: var(--color-blue-200);
    text-decoration: none;
  }

  .site-footer__copyright {
    font-size: var(--size-body-med);
    color: var(--color-blue-200);
  }

  .site-footer__divider {
    margin-block-start: var(--space-8);
    border-block-start: 1px solid var(--color-hairline-dark);
  }

  @media (max-width: 767.98px) {
    /* FIGMA-DEVIATION: no mobile frame for the footer was in the read range -- stacked and left-aligned
       is the same fallback pattern used elsewhere for two-column intros; flagged in the response. */
    .site-footer__row {
      flex-direction: column;
      align-items: flex-start;
    }

    .site-footer__meta {
      align-items: flex-start;
      text-align: start;
    }
  }
}

@layer utilities {
  .u-accent {
    color: var(--color-accent-cyan);
  }
}

@layer components {
  /* Final pass, REQ-ARCH-006: 404.html-only, no Figma frame -- centred message + one CTA,
     built from existing tokens/utilities (REQ-STD-002), not a new anomaly. */
  .error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-20);
    /* REQ-CSS-005(a)'s exception: .nav is absolute and reserves no space of its own -- .hero compensates
       with this exact calc() (line ~437), .error-page needs the same offset or the 404/heading sit
       underneath the nav bar. */
    padding-block-start: calc(var(--layout-nav-h) + var(--space-10) + var(--space-20));
    text-align: center;
  }

  .error-page__code {
    font-size: var(--size-title);
    font-weight: 700;
    color: var(--color-primary);
  }

  .error-page__heading {
    font-size: var(--size-title-med);
  }

  .error-page__body {
    color: var(--color-body);
    max-width: 32rem;
  }

  .error-page__cta {
    margin-block-start: var(--space-2);
  }

  /* REQ-ARCH-006: .nav (section 01) has no background of its own -- on the homepage it overlays the
     hero's dark gradient. 404.html has no hero behind it, so without this the white logo strokes and
     .nav__link text (color: var(--color-white)) disappear against the page's white background.
     Scoped to .page-404 only -- section 01's own CSS on index.html is untouched. */
  .page-404 .nav {
    background: var(--color-navy-900);
  }
}