/* SW-1374: tokens (:root), the * reset, base body styles, and
       :focus-visible now live in the shared /assets/base.css (sharedAssets.ts)
       — landing.ts links base.css before this file, so this stylesheet only
       carries landing-page-specific section styling (the design's white
       sticky header, dark Hero, "Six Dimensions", "How It Works", the dark
       "Get your report" audit-form section, the SW-1373 trust/company-stats
       band, "Trusted By", FAQ, and landing's own richer footer). None of
       these class names collide with the SHARED .header/.footer/.main shell
       in base.css (landing intentionally keeps its own header/footer per the
       design; see landing-header*/landing-footer* below) — the shared .card/
       .form-group/.submit-btn/.error-message primitives ARE reused/extended
       below by design (form fields), which is the intended override layer,
       not drift. */

    body {
      margin: 0;
      padding: 0;
    }

    /* ============================================================
       Landing header (white, sticky, border-bottom) — deliberately
       landing-specific, NOT the shared dark .header shell (the export's
       header is white/light; see task instructions).
       ============================================================ */
    .landing-header {
      background: var(--mcf-white);
      border-bottom: 1px solid var(--border);
      /* 14px + the 43px row + the 1px border = the design's 72px bar. */
      padding: 14px var(--space-6);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .landing-header-content {
      max-width: 1180px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-5);
    }

    .landing-logo-link {
      display: inline-flex;
      align-items: center;
    }

    .landing-logo {
      height: 32px;
      width: auto;
    }

    .landing-header-actions {
      display: flex;
      align-items: center;
      /* 26px, not the 24px token — the design's own gap. */
      gap: 26px;
    }

    .landing-header-link {
      color: var(--mcf-dark);
      text-decoration: none;
      font-size: var(--fs-small);
      font-weight: var(--fw-semibold);
      min-height: 43px;
      display: flex;
      align-items: center;
    }
    .landing-header-link:hover { color: var(--mcf-red); }

    .landing-header-cta {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--mcf-red);
      color: var(--mcf-white);
      border: none;
      font-size: var(--fs-small);
      font-weight: var(--fw-semibold);
      letter-spacing: 0.02em;
      font-family: inherit;
      padding: 11px 20px;
      cursor: pointer;
      line-height: 1.5;
      min-height: 43px;
      transition: background var(--dur-base) var(--ease-standard);
    }
    .landing-header-cta:hover { background: var(--accent-hover); }
    .cta-icon { flex-shrink: 0; }

    /* Header had no breakpoint: the flex row overflowed the viewport below 414px.
       The secondary text link is duplicated in the footer, so it drops here. */
    @media (max-width: 600px) {
      .landing-header { padding: var(--space-3) var(--space-4); }
      .landing-header-content { gap: var(--space-3); }
      .landing-header-actions { gap: var(--space-3); }
      .landing-header-link { display: none; }
      .landing-logo { height: 26px; }
      .landing-header-cta {
        padding: var(--space-3) var(--space-4);
        font-size: var(--fs-caption);
      }
    }

    /* ============================================================
       Hero — dark, two-column (copy + live report-preview card)
       ============================================================ */
    .hero {
      background: var(--mcf-neutral-900);
      color: var(--mcf-white);
      position: relative;
      overflow: hidden;
    }

    /* Every other section puts its horizontal padding on the <section> and caps
       the inner at 1180px, landing content at 130px. The hero carries the padding
       on the inner itself, so the cap must include it to match — otherwise the
       hero sits 32px right of the rest of the page and the h1 wraps a word early. */
    .hero-inner {
      position: relative;
      max-width: calc(1180px + var(--space-6) * 2);
      margin: 0 auto;
      /* 84/92 are the design's own values, not the 96px --space-9 token. */
      padding: 84px var(--space-6) 92px;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 68px;
      align-items: center;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: var(--fs-caption);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-overline);
      text-transform: uppercase;
      color: var(--mcf-red-400);
    }
    .hero-badge-dot {
      width: 9px;
      height: 9px;
      background: var(--mcf-red);
      display: inline-block;
    }

    .hero h1 {
      font-size: clamp(2.25rem, 5vw, 4.375rem);
      font-weight: var(--fw-light);
      line-height: 1.04;
      letter-spacing: var(--ls-display);
      margin: 22px 0 0;
    }
    .hero h1 strong {
      font-weight: 500;
      color: var(--mcf-red);
    }

    .hero-description {
      font-size: 1.1875rem;
      line-height: 1.55;
      color: rgba(255,255,255,0.72);
      max-width: 530px;
      margin: 26px 0 0;
    }

    .hero-cta-row {
      display: flex;
      gap: 14px;
      margin-top: 38px;
      flex-wrap: wrap;
    }

    .hero-cta-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--mcf-red);
      color: var(--mcf-white);
      border: none;
      font-family: inherit;
      font-size: 1rem;
      font-weight: var(--fw-semibold);
      padding: var(--space-4) 28px;
      cursor: pointer;
      min-height: 56px;
      transition: background var(--dur-base) var(--ease-standard);
    }
    .hero-cta-primary:hover { background: var(--accent-hover); }

    .hero-cta-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: var(--mcf-white);
      border: 1px solid rgba(255,255,255,0.34);
      font-size: 1rem;
      font-weight: var(--fw-semibold);
      text-decoration: none;
      padding: var(--space-4) 26px;
      min-height: 56px;
      transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
    }
    .hero-cta-secondary:hover { border-color: var(--mcf-white); background: rgba(255,255,255,0.05); }

    .hero-stats {
      display: flex;
      gap: 40px;
      justify-content: center;
      margin-top: 46px;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .hero-stat { text-align: center; }

    .hero-stat-value {
      font-size: 2.125rem;
      font-weight: var(--fw-light);
      line-height: 1;
      letter-spacing: var(--ls-display);
    }

    .hero-stat-unit {
      font-size: 18px;
      font-weight: var(--fw-light);
    }

    .hero-stat-label {
      font-size: var(--fs-caption);
      color: rgba(255,255,255,0.55);
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-weight: var(--fw-semibold);
      margin-top: var(--space-2);
    }

    /* SW-1322: the hero mock card's "recede to grey" bar fill. A landing-
       page-specific token, not a shared DS token, so it lives here next to
       the hero-preview rules rather than in base.css's :root — NOT
       variant-scoped (any variant's heroPillars may reference it, not only
       b2b.ts's), which is why it sits outside any .v-b2b selector. */
    :root {
      --mcf-hero-bar-muted: rgba(255,255,255,0.42);
    }

    /* Hero live report-preview card (decorative, aria-hidden) */
    .hero-preview {
      background: var(--mcf-dark);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    }

    /* SW-1322: wraps the card + its B2B-only explanatory note as a single
       grid child (hero-inner is a 2-column grid; the note cannot be a bare
       third child of it). Standard never renders this wrapper. */
    .hero-preview-col {
      display: flex;
      flex-direction: column;
    }

    .hero-preview-note {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255,255,255,0.55);
      margin: 16px 0 0;
    }
    .hero-preview-note-figure {
      color: rgba(255,255,255,0.85);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .hero-preview-note-figure--bad {
      color: #FF6666;
    }

    .hero-preview-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) 20px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .hero-preview-tag {
      font-family: var(--font-mono);
      font-size: var(--fs-caption);
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.6);
    }

    .hero-preview-live {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--mcf-red-400);
    }
    .hero-preview-dot {
      width: 7px;
      height: 7px;
      background: var(--mcf-red);
      display: inline-block;
      animation: mcfPulse 1.6s infinite;
    }
    @keyframes mcfPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

    .hero-preview-body {
      padding: var(--space-5) var(--space-5) 26px;
    }

    .hero-preview-score-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 22px;
    }

    .hero-preview-score-label {
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      font-weight: var(--fw-semibold);
    }

    .hero-preview-score-value {
      font-size: 3.75rem;
      font-weight: var(--fw-light);
      line-height: 0.9;
      letter-spacing: -0.03em;
      margin-top: 6px;
    }
    .hero-preview-score-value span {
      font-size: 1.25rem;
      line-height: 1.5;
      /* Does not inherit the numeral's display tracking. */
      letter-spacing: normal;
      margin-left: 8px;
      color: rgba(255,255,255,0.4);
      font-weight: var(--fw-body);
    }

    .hero-preview-badge {
      font-size: 11px;
      font-weight: var(--fw-bold);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--mcf-yellow);
      border: 1px solid var(--mcf-yellow);
      padding: 5px 10px;
      /* The design sizes this to its content on one line (max-width: none). A
         160px cap broke the longer score-band labels onto three lines. */
      white-space: nowrap;
      text-align: right;
    }

    /* SW-1322 (D11c): driven by heroGradeTone in content, not by the variant
       class — a future variant that scores well gets this same yellow badge
       without a selector named after b2b. This is the one place any variant
       departs from the band-function colour logic on the hero card. */
    .hero-preview-badge--bad {
      color: #FF6666;
      border-color: var(--mcf-red);
      background: rgba(226,0,26,0.12);
    }

    .hero-preview-bars {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .hero-preview-bar-row {
      display: flex;
      justify-content: space-between;
      font-size: 12.5px;
      margin-bottom: 5px;
    }
    .hero-preview-bar-row span:first-child { color: rgba(255,255,255,0.78); }
    .hero-preview-bar-row span:last-child { font-family: var(--font-mono); color: var(--mcf-white); }

    .hero-preview-bar-track {
      height: 5px;
      background: rgba(255,255,255,0.1);
    }
    /* The design fills each bar with one flat colour, set per bar in landing.ts,
       not a gradient across every bar.
       Note on the palette, which looks inverted: the export hardcodes the colour
       per pillar (82 and 78 and 71 red, 65 yellow, 56 and 48 orange), so here red
       reads as the brand fill, not as a failure state. report.ts uses the
       opposite convention (red is the worst band), so the hero mock and a real
       report disagree. That is the export's choice, kept for fidelity — raise it
       with design rather than "fixing" it here. */
    .hero-preview-bar-fill { height: 100%; }

    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; gap: var(--space-7); }
      .hero-preview { max-width: 480px; }
    }

    @media (max-width: 768px) {
      .hero-inner { padding: var(--space-7) var(--space-5) var(--space-8); }
      .hero-stats { gap: var(--space-5); }
      .hero-stat-value { font-size: 1.5rem; }
    }

    /* ============================================================
       Shared section-intro/eyebrow used by Six Dimensions / How It
       Works / FAQ headers.
       ============================================================ */
    .section-intro { max-width: 700px; }
    .section-intro h2, .audit-form-intro h2 {
      font-size: clamp(1.75rem, 4vw, 3rem);
      font-weight: var(--fw-light);
      line-height: 1.08;
      letter-spacing: var(--ls-display);
      margin: 20px 0 0;
      text-wrap: balance;
      color: var(--mcf-dark);
    }
    .section-intro h2 strong, .audit-form-intro h2 strong { font-weight: 600; }
    /* Audit-form section sits on a near-black background, so its heading must be
       light — override the shared dark heading color (fixes dark-on-dark H2). */
    /* The design uses 50px/1.06 here against the 48px/1.08 of the other
       sections, and weight 500 on the strong rather than 600. Must come AFTER
       the shared rule. */
    .audit-form-intro h2 {
      color: var(--fg-on-dark);
      font-size: clamp(1.75rem, 4vw, 3.125rem);
      line-height: 1.06;
    }
    .audit-form-intro h2 strong { font-weight: 500; }
    .section-intro p {
      font-size: 1.0625rem;
      line-height: 1.6;
      color: var(--fg-muted);
      margin: 20px 0 0;
    }

    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: var(--fs-caption);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-overline);
      text-transform: uppercase;
      color: var(--mcf-red);
    }
    .section-eyebrow--light { color: var(--mcf-red-400); }
    .eyebrow-dot { width: 9px; height: 9px; background: var(--mcf-red); display: inline-block; }

    /* ============================================================
       Six Dimensions
       ============================================================ */
    .six-dimensions {
      background: var(--mcf-white);
      padding: 104px var(--space-6);
    }
    .six-dimensions-inner { max-width: 1180px; margin: 0 auto; }

    .dimension-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      margin-top: 56px;
    }

    .dimension-card {
      background: var(--mcf-white);
      padding: 34px 30px;
      box-shadow: var(--inset-top-red);
      transition: background var(--dur-base) var(--ease-standard);
    }
    .dimension-card:hover { background: var(--mcf-neutral-50); }

    .dimension-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .dimension-icon { color: var(--mcf-red); display: block; }
    .dimension-num {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--mcf-silver);
    }

    .dimension-card h3 {
      font-size: 1.3125rem;
      font-weight: var(--fw-bold);
      line-height: 1.2;
      margin: 22px 0 10px;
      color: var(--mcf-dark);
    }
    .dimension-card p {
      font-size: 15px;
      line-height: 1.6;
      color: var(--fg-muted);
      margin: 0;
    }

    @media (max-width: 900px) {
      .dimension-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 600px) {
      .dimension-grid { grid-template-columns: 1fr; }
    }

    .dimension-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
      background: var(--mcf-dark);
      color: var(--mcf-white);
      padding: var(--space-6) 40px;
      margin-top: 1px;
      flex-wrap: wrap;
    }
    .dimension-banner p {
      font-size: 1.25rem;
      font-weight: var(--fw-light);
      line-height: 1.4;
      margin: 0;
      max-width: 640px;
    }
    .dimension-banner-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--mcf-red);
      color: var(--mcf-white);
      border: none;
      font-family: inherit;
      font-size: 15px;
      font-weight: var(--fw-semibold);
      padding: 14px 26px;
      /* The design uses an <a>, which inherits line-height 1.5. The UA sheet forces
         line-height: normal on <button>, and body's rule does not override it. */
      line-height: 1.5;
      cursor: pointer;
      white-space: nowrap;
      transition: background var(--dur-base) var(--ease-standard);
    }
    .dimension-banner-cta:hover { background: var(--accent-hover); }

    /* ============================================================
       How It Works
       ============================================================ */
    .how-it-works {
      background: var(--mcf-neutral-50);
      padding: var(--space-9) var(--space-6);
      border-top: 1px solid var(--border);
    }
    .how-it-works-inner { max-width: 1180px; margin: 0 auto; }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
      margin-top: 54px;
    }

    .step-card {
      background: var(--mcf-white);
      border: 1px solid var(--border);
      padding: 36px 32px;
    }
    .step-label {
      display: block;
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--mcf-red);
      letter-spacing: 0.12em; text-transform: uppercase;
    }
    .step-icon {
      display: block;
      margin: 24px 0 18px;
    }
    .step-card h3 {
      font-size: 1.375rem;
      font-weight: var(--fw-bold);
      margin: 0 0 10px;
      color: var(--mcf-dark);
    }
    .step-card p {
      font-size: 15px;
      line-height: 1.6;
      color: var(--fg-muted);
      margin: 0;
    }

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

    /* ============================================================
       Audit Form section (dark) — checklist intro + two-column
       sample-report/form grid. THE AUDIT FORM LIVES HERE.
       ============================================================ */
    .audit-form-section {
      background: var(--mcf-neutral-900);
      color: var(--mcf-white);
      padding: 104px var(--space-6);
      position: relative;
      overflow: hidden;
    }
    .audit-form-inner {
      position: relative;
      max-width: 1180px;
      margin: 0 auto;
    }

    /* The 640px cap belongs to the copy, not the band — the checkmark row spans full width. */
    /* The design uses different measures here: h2 720px, paragraph 580px. */
    .audit-form-intro h2 { max-width: 720px; }
    .audit-form-intro p { max-width: 580px; }
    .audit-form-intro p {
      font-size: 1.0625rem;
      line-height: 1.6;
      color: rgba(255,255,255,0.7);
      margin: 22px 0 0;
    }

    /* One horizontal row per the design; wraps to a column on narrow viewports. */
    .audit-form-checklist {
      list-style: none;
      margin: 34px 0 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 30px;
    }
    .audit-form-checklist li {
      display: flex;
      gap: 11px;
      align-items: center;
      font-size: 14.5px;
      color: rgba(255,255,255,0.85);
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      .audit-form-checklist { flex-direction: column; gap: var(--space-4); }
    }
    .audit-form-checklist svg { flex-shrink: 0; }

    .audit-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
      align-items: start;
      margin-top: 46px;
    }

    @media (max-width: 900px) {
      .audit-form-grid { grid-template-columns: 1fr; }
    }

    /* Sample-report card (left column) */
    .sample-report-card {
      background: var(--mcf-white);
      color: var(--mcf-dark);
      box-shadow: var(--inset-top-red);
      padding: 32px 32px 34px;
    }
    .sample-teaser-intro { margin: 0 0 22px; font-size: 1rem; line-height: 1.5; }
    .sample-teaser-finding {
      margin-top: 20px;
      padding: 20px 22px;
      background: var(--mcf-white);
      border: 1px solid var(--border);
      box-shadow: var(--inset-top-red);
      text-align: left;
    }
    .sample-teaser-finding h3 { margin: 14px 0 12px; font-size: 17px; font-weight: 700; line-height: 1.35; }
    .sample-teaser-finding p { margin: 0 0 10px; color: var(--fg-muted); font-size: 0.875rem; line-height: 1.55; }
    .finding-header-row { display: flex; gap: 10px; align-items: center; }
    .sample-sev { color: #fff; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; padding: 4px 9px; }
    .sample-cat { font-size: 14px; font-weight: 600; color: var(--fg-muted); }
    .sample-teaser-finding p.sample-bizimpact { color: #8A5A00; margin: 0; }

    .sample-report-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      background: var(--mcf-red-100);
      color: var(--mcf-red);
      font-size: 15px;
      font-weight: var(--fw-semibold);
      text-decoration: none;
      padding: 15px;
      margin-top: 20px;
    }

    .sample-report-cta:hover { background: var(--mcf-red-200); }

    /* Sample score badges — reused by the SW-243 landing teaser (6 pillars). */
    .sample-scores {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 0;
    }

    .sample-score { display: flex; align-items: center; gap: 12px;
      text-align: start;
      padding: 12px 14px;
      background: var(--mcf-neutral-100);
    }

    .sample-score-value {
      font-size: 1.5rem;
      font-weight: 700; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
      color: var(--mcf-dark);
    }

    .sample-score-value--weak { color: var(--mcf-red); }
    .sample-score-label { font-weight: 600; line-height: 1.2;
      font-size: 0.625rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--fg-muted);
    }

    

    /* Form card (right column) */
    .form-card {
      background: var(--mcf-white);
      color: var(--mcf-dark);
      box-shadow: var(--inset-top-red);
      padding: 40px 40px 42px;
    }

    .form-card h3 {
      font-size: 1.5rem;
      font-weight: var(--fw-bold);
      margin: 0 0 var(--space-1);
      color: var(--mcf-dark);
    }

    .form-subtitle {
      font-size: 0.875rem;
      color: var(--fg-muted);
      margin: 0 0 var(--space-5);
    }

    /* The design stacks label/input/error with a 6px gap to the next label;
       the error slot below is height-reserved so validation never shifts it. */
    .form-group {
      margin-bottom: 6px;
      position: relative;
    }

    /* Uppercase letterspaced micro-labels per the design; the contact-preference
       checkbox is excluded — it stays a sentence-case consent line. */
    .form-group label:not(.contact-pref-label) {
      display: block;
      font-size: 13px;
      font-weight: var(--fw-semibold);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 7px;
      color: var(--fg-muted);
    }

    .form-group .helper-text {
      color: var(--fg-quiet);
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
    }

    .input-wrapper {
      position: relative;
    }

    /* Design padding is 13px 14px; the right gutter is widened to clear the
       validation icon, which the export has no equivalent for. */
    .form-group input {
      width: 100%;
      padding: 13px 2.5rem 13px 14px;
      border: 1px solid var(--border);
      background: var(--mcf-white);
      font-size: 15px;
      color: var(--mcf-dark);
      transition: all 0.2s ease;
    }

    @media (max-width: 768px) {
      .form-group input {
        padding: 1rem 2.5rem 1rem 1rem;
        font-size: 16px; /* Prevents iOS zoom */
      }
    }

    /* SW-1374 QA: inputs get the same 2px focus ring as links/buttons. The
       old 10%-opacity box-shadow halo alone was too faint to read as focus. */
    .form-group input:focus {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
      border-color: var(--mcf-dark);
    }

    .form-group input.valid {
      border-color: var(--state-success);
      background: var(--state-success-bg);
    }

    .form-group input.error {
      border-color: var(--state-error);
      background: var(--state-error-bg);
    }

    /* The export declares no ::placeholder rule — #757575 is simply Chrome's
       default, which is what it renders. Pinned here so it does not vary by
       browser. */
    .form-group input::placeholder {
      color: var(--fg-quiet);
    }

    /* Validation icon */
    .validation-icon {
      position: absolute;
      right: 0.875rem;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      display: none;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 0.75rem;
      font-weight: 700;
    }

    .validation-icon.valid {
      display: flex;
      background: var(--state-success);
      color: white;
    }

    .validation-icon.error {
      display: flex;
      background: var(--state-error);
      color: white;
    }

    .validation-icon.validating {
      display: flex;
      background: none;
      border: 2px solid var(--border);
      border-top-color: var(--mcf-red);
      animation: validation-spin 0.8s linear infinite;
    }

    @keyframes validation-spin {
      from { transform: translateY(-50%) rotate(0deg); }
      to { transform: translateY(-50%) rotate(360deg); }
    }

    /* Character counter */
    .char-counter {
      position: absolute;
      right: 0;
      top: 100%;
      font-size: 0.6875rem;
      color: var(--fg-muted);
      margin-top: 0.25rem;
    }

    .error-message {
      color: var(--mcf-red);
      font-size: 12.5px;
      line-height: 18px;
      min-height: 18px;
      margin-top: 4px;
      visibility: hidden;
    }

    .error-message.visible {
      visibility: visible;
    }

    /* Shake animation for errors */
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
      20%, 40%, 60%, 80% { transform: translateX(4px); }
    }

    .form-group.shake input {
      animation: shake 0.5s ease-in-out;
    }

    .turnstile-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 1.5rem 0;
      min-height: 65px;
    }

    /* SW-1372: contact-preference checkbox — checked by default, opt-out framing */
    .contact-pref-group {
      margin: 2px 0 4px;
    }

    /* Two classes: outranks the .form-group label base rule (class+type). */
    .form-group .contact-pref-label {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      padding: 14px 15px;
      border: 1px solid var(--border);
      background: var(--mcf-neutral-50);
      margin-bottom: 0;
      font-size: 13.5px;
      line-height: 1.45;
      font-weight: 400;
      color: var(--mcf-dark);
      cursor: pointer;
    }

    .form-group .contact-pref-label .contact-pref-optional {
      color: var(--fg-subtle);
    }

    .form-group .contact-pref-label input[type="checkbox"] {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
      margin: 1px 0 0;
      accent-color: var(--mcf-red);
      cursor: pointer;
    }

    .global-error {
      background: var(--state-error-bg);
      border: 1px solid var(--state-error);
      color: var(--state-error);
      padding: 1rem;
      margin-bottom: 1.5rem;
      font-size: 0.875rem;
      display: none;
      align-items: center;
      gap: 0.5rem;
    }

    .global-error.visible {
      display: flex;
    }

    .global-error::before {
      content: '⚠';
      font-size: 1rem;
    }

    .retry-btn {
      margin-left: auto;
      background: var(--state-error);
      color: white;
      border: none;
      padding: 0.375rem 0.75rem;
      font-size: 0.75rem;
      cursor: pointer;
      flex-shrink: 0;
    }

    .retry-btn:hover {
      background: var(--accent-hover);
    }

    .global-error #global-error-text {
      flex: 1;
    }

    .submit-btn {
      width: 100%;
      margin-top: var(--space-3);
      padding: var(--space-4);
      background: var(--mcf-red);
      color: var(--mcf-white);
      border: none;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      min-height: 0;
    }

    .submit-btn:hover:not(:disabled) {
      background: var(--accent-hover);
    }

    .submit-btn:disabled {
      background: var(--mcf-silver);
      cursor: not-allowed;
    }

    /* No min-height on purpose: empty, it collapses and the footnote sits the
       16px below the button that the design has. The design has no validation
       line at all, so a min-height would reserve space that does not exist
       there. The ~18px shift when the last field validates is the accepted
       consequence — do not "restore" the min-height to hide it. */
    .submit-reason {
      text-align: center;
      font-size: 12px;
      line-height: 1.5;
      color: var(--fg-quiet);
      margin-top: var(--space-4);
    }

    .form-footer {
      text-align: center;
      margin-top: var(--space-4);
      font-size: 12px;
      line-height: 1.5;
      color: var(--fg-quiet);
    }

    /* ============================================================
       Company Stats / SW-1373 trust band — red, matches the export's
       "Company Stats" section. .trust-section/.trust-item are kept because the
       contract test asserts the marker; the icons the export does not have were
       removed along with their .trust-icon rule.
       ============================================================ */
    .trust-section {
      background: var(--mcf-red);
      padding: var(--space-8) var(--space-6);
    }

    .trust-content {
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-5);
      text-align: center;
    }

    .trust-item {
      color: var(--mcf-white);
    }

    /* Divider is a real border on the column, as in the export — not a
       positioned pseudo-element, which sat inside the old item padding. */
    .trust-item + .trust-item {
      border-left: 1px solid rgba(255,255,255,0.25);
    }

    .trust-item strong {
      display: block;
      font-size: 3.25rem;
      font-weight: var(--fw-light);
      color: var(--mcf-white);
      line-height: 1;
      letter-spacing: var(--ls-display);
    }

    .trust-item strong .trust-plus {
      font-size: 30px;
    }

    /* Direct child: a descendant selector would also match .trust-plus inside
       the <strong>, blockify it, and break the "+" onto a second line. */
    .trust-item > span {
      display: block;
      font-size: 13px;
      color: var(--mcf-white);
      opacity: 0.9;
      font-weight: var(--fw-semibold);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-top: 10px;
    }

    /* ============================================================
       Trusted By (client logos)
       ============================================================ */
    .client-logos-section {
      background: var(--mcf-white);
      padding: 80px var(--space-6);
    }

    .client-logos-content {
      max-width: 1180px;
      margin: 0 auto;
      text-align: center;
    }

    .client-logos-eyebrow {
      font-size: var(--fs-caption);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-overline);
      text-transform: uppercase;
      color: var(--fg-subtle);
    }

    .client-logos-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-top: 34px;
    }

    .client-logo-item {
      border: 1px solid var(--border);
      background: var(--mcf-white);
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px 18px;
      transition: border-color var(--dur-base) var(--ease-standard);
    }
    .client-logo-item:hover { border-color: var(--mcf-dark); }

    /* The export caps each client individually (c.w / c.h), not with one shared
       ceiling — a common max-height left 4 of the 5 logos larger than designed. */
    .client-logo-item img {
      width: auto;
      height: auto;
      max-width: 100%;
      object-fit: contain;
      display: block;
      filter: grayscale(100%);
      opacity: 0.72;
      transition: filter var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
    }

    .client-logo-item[data-logo="idi"] img       { max-width: 150px; max-height: 60px; }
    .client-logo-item[data-logo="middleby"] img  { max-width: 150px; max-height: 64px; }
    .client-logo-item[data-logo="baysupply"] img { max-width: 160px; max-height: 44px; }
    .client-logo-item[data-logo="radwell"] img   { max-width: 160px; max-height: 44px; }
    .client-logo-item[data-logo="gfi"] img       { max-width: 110px; max-height: 80px; }

    .client-logo-item img:hover {
      filter: grayscale(0%);
      opacity: 1;
    }

    .client-logos-more {
      margin-top: 30px;
      font-size: 15px;
      color: var(--fg-muted);
    }

    /* Underlined: the export does not cancel the browser default on this link. */
    .client-logos-more a {
      color: var(--mcf-red);
      font-weight: var(--fw-semibold);
    }

    @media (max-width: 900px) {
      .client-logos-strip { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 480px) {
      .client-logos-strip { grid-template-columns: repeat(2, 1fr); }
    }

    /* ============================================================
       FAQ — light section, matching the export (not dark)
       ============================================================ */
    .faq-section {
      background: var(--mcf-neutral-50);
      padding: 100px var(--space-6);
      border-top: 1px solid var(--border);
    }

    .faq-content {
      max-width: 880px;
      margin: 0 auto;
    }

    .faq-header {
      text-align: center;
      margin-bottom: var(--space-7);
    }

    .faq-header .section-eyebrow { justify-content: center; }

    .faq-header h2 {
      font-size: clamp(1.75rem, 4vw, 2.875rem);
      font-weight: var(--fw-light);
      letter-spacing: var(--ls-display);
      margin: 18px 0 0;
      text-wrap: balance;
      color: var(--mcf-dark);
    }

    .faq-header h2 strong {
      font-weight: 600;
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid var(--border);
    }

    .faq-item {
      border-bottom: 1px solid var(--border);
    }

    .faq-item.open {
      background: var(--mcf-white);
    }

    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: var(--space-5);
      text-align: left;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-5);
      color: var(--mcf-dark);
      font-size: 1.125rem;
      font-weight: var(--fw-semibold);
      line-height: 1.4;
      font-family: inherit;
      min-height: 44px;
    }

    .faq-question:hover {
      color: var(--mcf-red);
    }

    /* The "+" character at 24px produced a taller line box than the question
       text and left the button 4px taller than the design's. */
    .faq-icon {
      flex: none;
      line-height: 0;
      color: var(--mcf-red);
      transition: transform var(--dur-base) var(--ease-standard);
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--dur-slow) var(--ease-standard);
    }

    /* The design uses 300px, but that clipped the last line of the longer
       answers at a 320px viewport. The ceiling stays a finite length because
       'none' is not interpolable and would kill the transition. */
    .faq-item.open .faq-answer {
      max-height: 700px;
    }

    /* content-box: in the export the 760px cap is on the text, not the box. */
    .faq-answer-text {
      box-sizing: content-box;
      margin: 0;
      padding: 0 var(--space-5) 26px;
      color: var(--fg-muted);
      font-size: 15.5px;
      line-height: 1.65;
      max-width: 760px;
    }

    /* ============================================================
       Landing footer — deliberately landing-specific (richer than the
       shared .footer shell: brand block + contact block + legal-link
       bottom row), so it does not collide with the shared .footer/
       .footer-content/.footer-links selectors used by the 8 other pages.
       ============================================================ */
    .landing-footer {
      background: var(--mcf-neutral-900);
      color: rgba(255, 255, 255, 0.7);
      padding: 72px var(--space-6) 40px;
    }

    .landing-footer-content {
      max-width: 1180px;
      margin: 0 auto;
    }

    .landing-footer-main {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 60px;
      padding-bottom: var(--space-7);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* block: inline would leave descender space under the logo. */
    .landing-footer-logo { height: 46px; width: auto; display: block; }

    .landing-footer-brand p {
      color: rgba(255,255,255,0.6);
      font-size: 1rem;
      line-height: 1.6;
      margin: 26px 0 0;
      max-width: 420px;
    }

    .landing-footer-contact h3 {
      font-size: 13px;
      font-weight: var(--fw-bold);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--mcf-white);
      margin: 0 0 18px;
    }

    .landing-footer-contact a {
      color: rgba(255,255,255,0.8);
      text-decoration: none;
      font-size: 1rem;
      display: block;
      margin-bottom: var(--space-3);
    }

    .landing-footer-contact a.landing-footer-cta {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: 14px;
      font-weight: var(--fw-semibold);
      color: #FF6666;
      margin-bottom: 0;
    }

    .landing-footer-contact a:hover {
      color: var(--mcf-white);
    }

    .landing-footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      padding-top: 28px;
    }

    /* The export uses a <span> here; our <p> carries the user-agent's 1em margin
       (13px top and bottom), which inflated the row by 26px. */
    .landing-footer-bottom p {
      margin: 0;
      font-size: 13px;
      color: rgba(255,255,255,0.45);
    }

    .landing-footer-links {
      display: flex;
      gap: var(--space-5);
      flex-wrap: wrap;
    }

    /* No min-height on purpose — see the note on .footer-links a in BASE_CSS.
       The design has no vertical padding here and the band is measured to the
       pixel. */
    .landing-footer-links a {
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      font-size: 13px;
      transition: color var(--dur-base) var(--ease-standard);
    }

    .landing-footer-links a:hover {
      color: var(--mcf-white);
    }

    @media (max-width: 768px) {
      .landing-footer-main { grid-template-columns: 1fr; }
    }

    /* ============================================================
       Animations
       ============================================================ */
    /* Entry fade — opacity only, deliberately no transform. The earlier version also
       ran translateY(20px), which slid hero-copy + 6 dimension cards + 3 step cards +
       both form-column cards upward on every load: it read as the page scrolling
       itself and threw off Chrome's scroll anchoring on refresh. Opacity moves
       nothing, so there is nothing for anchoring to correct. The design has no
       page-entry animation at all (its only fade is the post-submit success state,
       which we redirect away from) — this is a deliberate, movement-free addition. */
    @media (prefers-reduced-motion: no-preference) {
      .hero-copy {
        animation: fadeIn 0.6s ease-out;
      }

      .dimension-card {
        animation: fadeIn 0.5s ease-out both;
      }

      .step-card {
        animation: fadeIn 0.5s ease-out both;
      }

      .form-card, .sample-report-card {
        animation: fadeIn 0.6s ease-out 0.1s both;
      }

      @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Loading spinner (used by the submit button while a request is in flight) */
    .spinner {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Loading dots animation */
    .loading-dots {
      display: inline-block;
      margin-left: 0.25rem;
    }

    .loading-dots::after {
      content: '';
      animation: dots 1.5s steps(4, end) infinite;
    }

    @keyframes dots {
      0%, 20% { content: ''; }
      40% { content: '.'; }
      60% { content: '..'; }
      80%, 100% { content: '...'; }
    }

    /* Responsive refinements */
    @media (max-width: 768px) {
      .trust-section {
        padding: var(--space-6) var(--space-5);
      }

      .trust-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5) 0;
      }

      .trust-item {
        padding: var(--space-4) var(--space-3);
        border-bottom: 1px solid rgba(255,255,255,0.2);
      }

      .trust-item:nth-child(odd) {
        border-left: none;
      }

      .trust-item:nth-child(3),
      .trust-item:nth-child(4) {
        border-bottom: none;
      }

      .trust-item strong {
        font-size: 2.25rem;
      }

      .form-card, .sample-report-card {
        padding: var(--space-5);
      }
    }

    /* ============================================================
       SW-1322: B2B-only rules, scoped behind <body class="v-b2b">
       rather than forking the stylesheet. Standard never carries this
       class, so none of the selectors below ever match it.
       ============================================================ */

    /* U6: the hero stat band goes from centered/flex to a left-aligned
       3-column grid for B2B (today's layout stays flex/centered). */
    .v-b2b .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      align-items: start;
      text-align: left;
      justify-content: initial;
    }

    /* The base rule centres the CHILD (.hero-stat), so left-aligning only the
       container above leaves each cell re-centring itself: inheritance does not
       beat an explicit declaration. The B2B labels run to three lines, which is
       why the design left-aligns them. */
    .v-b2b .hero-stat { text-align: left; }

    /* B2B's form intro carries a second paragraph the standard variant does not
       have. The design gives it a quieter treatment than the first so it reads
       as a footnote rather than a continuation: smaller, dimmer, tighter above.
       Without this both paragraphs render identically and the privacy note
       competes with the pitch above it. */
    /* The Overall Score header on the sample teaser card. Unscoped rather than
       under .v-b2b: only a variant that declares sampleOverall emits this
       markup at all, so a future variant gets the treatment for free. */
    .sample-overall {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 18px;
      margin-bottom: 18px;
    }
    .sample-overall-label {
      font-size: 0.6875rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--fg-muted);
      font-weight: var(--fw-semibold);
    }
    .sample-overall-figure {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-top: 6px;
    }
    .sample-overall-value {
      font-size: 3.5rem;
      font-weight: 700;
      line-height: 0.9;
      letter-spacing: var(--ls-display);
      font-variant-numeric: tabular-nums;
    }
    .sample-overall-max { font-size: 1.25rem; color: var(--fg-muted); }
    .sample-overall-badge {
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 5px 10px;
      white-space: nowrap;
    }
    /* Token values taken from the design, not approximated: the label is the
       darkest red on the lightest red tint, which is what keeps it legible on
       this white card. The hero card's badge is a different treatment (bright
       red on dark) because it sits on the dark hero. */
    .sample-overall-badge--bad {
      color: var(--mcf-darker-red);
      border: 1px solid var(--mcf-red);
      background: var(--mcf-red-100);
    }
    .sample-overall-badge--warn {
      color: var(--mcf-dark-orange);
      border: 1px solid var(--mcf-yellow);
      background: rgba(248, 170, 53, 0.12);
    }

    .v-b2b .audit-form-intro p + p {
      font-size: 0.9375rem;
      color: rgba(255, 255, 255, 0.62);
      margin-top: 16px;
    }

    /* D10: the "Where we work" prose block that replaces the client-logo
       strip. No <img> in this branch — see clientSectionHtml in landing.ts. */
    .client-logos-content--segments {
      max-width: 940px;
      margin: 0 auto;
    }
    .client-segments-sentence {
      font-size: 28px;
      font-weight: var(--fw-light);
      line-height: 1.45;
      letter-spacing: -0.01em;
      color: var(--mcf-dark);
      margin: 30px auto 0;
    }

    /* D8: "What we measure" — the bulk of the B2B-only CSS. Mirrors the
       three-column / grid patterns already used by six-dimensions and the
       weighting table below it. */
    .method-section {
      background: var(--mcf-white);
      padding: 104px var(--space-6);
      border-top: 1px solid var(--border);
    }
    .method-inner { max-width: 1180px; margin: 0 auto; }
    .method-intro { max-width: 860px; }

    .method-columns {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      margin-top: 54px;
    }
    .method-column {
      background: var(--mcf-white);
      padding: 34px 30px;
      box-shadow: var(--inset-top-red);
    }
    .method-column-label {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--mcf-red);
      letter-spacing: 0.12em;
    }
    .method-column-list {
      list-style: none;
      margin: 22px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
      font-size: 15px;
      line-height: 1.55;
      color: var(--fg-muted);
    }
    .method-column-list code {
      font-family: var(--font-mono);
      font-size: 13.5px;
      color: var(--mcf-dark);
    }

    .method-closing {
      font-size: 18px;
      line-height: 1.6;
      color: var(--fg-muted);
      margin: 44px 0 0;
      max-width: 860px;
    }

    .method-weighting {
      margin-top: 40px;
      border-top: 2px solid var(--mcf-red);
      background: var(--mcf-neutral-100);
      padding: 34px 36px;
    }
    .method-weighting-label {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--mcf-red);
      letter-spacing: 0.12em;
    }
    .method-weighting-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 1px;
      background: var(--border);
      margin-top: 22px;
      border: 1px solid var(--border);
    }
    .method-weight-cell {
      background: var(--mcf-white);
      padding: 18px 16px;
    }
    .method-weight-cell--emphasize {
      box-shadow: var(--inset-top-red);
    }
    .method-weight-value {
      font-size: 34px;
      font-weight: var(--fw-bold);
      line-height: 1;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .method-weight-cell--emphasize .method-weight-value {
      color: var(--mcf-red);
    }
    .method-weight-label {
      font-size: 12px;
      font-weight: var(--fw-semibold);
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--fg-muted);
      margin-top: 10px;
      line-height: 1.3;
    }
    .method-weight-cell--emphasize .method-weight-label {
      color: var(--mcf-dark);
    }
    .method-weighting-note {
      font-size: 17px;
      line-height: 1.6;
      color: var(--fg-muted);
      margin: 24px 0 0;
      max-width: 760px;
    }

    @media (max-width: 900px) {
      .method-columns { grid-template-columns: 1fr 1fr; }
      .method-weighting-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 600px) {
      .method-columns { grid-template-columns: 1fr; }
      .method-weighting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .v-b2b .hero-stats { grid-template-columns: 1fr; }
    }