/* ============================================================================
   KATiVO Landing Page — Design Tokens + Foundations + Header Chrome
   File:    /assets/css/kativo-lp.css
   Tasks:   TASK 2 (Design Tokens, S67) + TASK 4 (Foundations + Header, S68)
   Date:    9 May 2026 (S68)
   Source:  R6 v2 (KATiVO_LP_R6_index_S35_v2.html) inline styles, verbatim
   Spec:    LP-TRS v0.9.7 §LP-NFR-16 (typography hierarchy LOCKED)
            LP-TRS v0.9.7 §LP-NFR-17 (stat separator dot LOCKED)
            Foundations v1.6 §brand
   Notes:
     - All token VALUES extracted verbatim from R6 v2.
     - EXCEPTION: stat separator tokens use LP-NFR-17 LOCKED values
       (R6 v2 carries pre-Hawk-Eye-S23 implementation; LP-TRS overrides).
     - Mobile typography overrides per R6 @media (max-width:768px) block.
     - Token naming follows --kebab-case convention.
     - TASK 4 (S68): Foundations + Header chrome migrated from R6 inline
       <style> in index.html to this file. Sections P1–P7 + Footer
       remain in inline <style> pending TASKs 5–10.
   ============================================================================ */

:root {
  /* ==========================================================================
     BRAND PALETTE — locked per R6 v2 line 13 + Foundations v1.6
     ========================================================================== */

  /* Primary brand colours */
  --navy:                 #0F172A;   /* primary navy — headlines, body anchor */
  --navy-deep:            #0F1E3E;   /* deeper navy — dark sections (P5 delusion) */
  --navy-darkest:         #0A152C;   /* darkest navy — IP leakage panel */
  --navy-cta-dark:        #152648;   /* dark navy — closing CTA / P7 */
  --orange:               #F5A623;   /* primary orange — accent, brand "i", CTA */
  --orange-hover:         #E89612;   /* orange hover — button states */
  --orange-tint:          rgba(245, 166, 35, 0.06);  /* faint orange wash — alert callouts */

  /* Surface backgrounds */
  --bg-white:             #FFFFFF;   /* primary surface */
  --bg-cream:             #F5F2EA;   /* cream — alternating section backgrounds */
  --bg-cream-edge:        #E8E4D8;   /* cream border — top/bottom of cream sections */
  --bg-light-blue:        #E8ECF1;   /* light blue — Foundations v1.6 reference (currently unused in R6 base; reserved) */

  /* Text colours */
  --text:                 #0B1220;   /* primary body text */
  --text-soft:            #3A4355;   /* hero sub-paragraph, body-emphasis */
  --text-muted:           #5B6478;   /* meta, micro, tertiary copy */
  --text-muted-light:     #8A93A3;   /* eyebrow muted variant */
  --text-light-nav:       #9AA3B2;   /* header login / nav muted */

  /* Dark-section text (on navy backgrounds) */
  --text-on-dark:         #FFFFFF;   /* primary text on navy */
  --text-on-dark-soft:    #C8D1E0;   /* secondary text on navy */
  --text-on-dark-muted:   #B8C3D6;   /* tertiary on navy */
  --text-on-dark-meta:    #8895AE;   /* meta on navy — tags, micro */
  --text-on-dark-tag:     #E8ECF1;   /* tag-cream on navy */

  /* Borders & dividers */
  --line:                 #D9DEE6;   /* mobile section dividers */
  --line-stat-separator:  #CBD2DB;   /* (LEGACY — DO NOT USE for new horizontal stat separators; see --stat-separator-* below) */
  --border-dark-edge:     #2A3A5E;   /* navy section internal border (P7 form input bottom) */

  /* Score signal palette — pillar status */
  --score-green:          #2F7A4D;
  --score-amber:          #F5A623;   /* equals --orange (signal token alias) */
  --score-red:            #C0392B;

  /* Alert palette — used in dark P5 IP-leakage panel */
  --alert-red-bright:     #E24B4A;   /* alert headline */
  --alert-red-soft:       #F08585;   /* alert eyebrow */
  --alert-red-bg:         #C0392B;   /* alert badge background */

  /* ==========================================================================
     TYPOGRAPHY — Inter family, fixed-px scale per LP-NFR-16 hierarchy
     R6 v2 verbatim. Mobile overrides below.
     ========================================================================== */

  /* Font family stack — Inter primary, system fallback */
  --font-family-base:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font weights */
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;
  --fw-extrabold:         800;

  /* Body baseline */
  --fs-body:              16px;
  --lh-body:              1.6;

  /* Hero (P1) — H1 + supporting */
  --fs-hero-h1:           68px;      /* hero H1 — desktop */
  --fs-hero-sub:          19px;      /* hero supporting paragraph */
  --fs-hero-cta:          15px;      /* hero CTA buttons */
  --fs-hero-micro:        11px;      /* hero micro-meta */
  --fs-hero-stat-num:     40px;      /* hero stat numerals */
  --fs-hero-stat-label:   11px;      /* hero stat labels (eyebrow) */

  /* Eyebrow labels — section tags, small caps */
  --fs-eyebrow:           12px;      /* default eyebrow size */
  --fs-eyebrow-pillar:    13px;      /* P3 pillar eyebrow */
  --fs-eyebrow-mini:      11px;      /* smallest eyebrow variant */
  --ls-eyebrow:           1.5px;     /* eyebrow letter-spacing default */

  /* Section H2 — section headlines */
  --fs-h2-default:        44px;      /* P2, P6 cream-section H2 */
  --fs-h2-large:          56px;      /* P7 closing H2 (desktop) — also P3 stat-num upper */
  --fs-h2-medium:         46px;      /* P5 / P6 alt-section H2 */

  /* H3 — sub-section / card titles */
  --fs-h3:                26px;      /* P6 whitepaper card H3 */

  /* Body variants */
  --fs-body-emphasis:     17px;      /* sub-section paragraphs (P5/P6) */
  --fs-body-callout:      19px;      /* card body/lead — P5/P6 */
  --fs-body-card:         15px;      /* card body smaller */
  --fs-body-meta:         14px;      /* meta paragraphs */

  /* Stats — numerals + labels (LP-NFR-16 hierarchy: stat numerals MUST NOT exceed H2) */
  --fs-stat-num-large:    52px;      /* large stat numeral (P5 delusion stat) */
  --fs-stat-num-default:  42px;      /* P2 problem stats — desktop */
  --fs-stat-label:        14px;      /* stat label */

  /* Meta / mini text */
  --fs-meta:              14px;
  --fs-mini:              12px;
  --fs-micro:             11px;

  /* P5 IP leakage panel — distinct alert typography */
  --fs-alert-h2:          32px;
  --fs-alert-stat:        36px;

  /* Header — navigation + brand */
  --fs-brand-tagline:     12px;
  --fs-header-nav:        16px;

  /* Letter-spacing */
  --ls-eyebrow-default:   1.5px;
  --ls-eyebrow-tight:     1.3px;     /* mobile brand-tagline */
  --ls-headline-tight:    -0.6px;    /* large headlines (R6 hero, P5/P7 hero) */

  /* Line-heights */
  --lh-tight:             1.05;      /* hero H1 desktop */
  --lh-headline:          1.12;      /* H2 mobile */
  --lh-body-tight:        1.45;      /* body-emphasis on dark */
  --lh-base:              1.6;       /* default body */

  /* ==========================================================================
     STAT SEPARATOR DOT — LP-NFR-17 LOCKED tokens
     OVERRIDES R6 v2 lines 258-261 (pre-Hawk-Eye-S23 legacy).
     R6: ·  #CBD2DB  28px   →  LP-NFR-17 LOCKED: •  rgba(15,23,42,0.30)  32px
     ========================================================================== */

  --stat-separator-character:    "\2022";                   /* U+2022 BULLET (• not ·) */
  --stat-separator-colour:       rgba(15, 23, 42, 0.30);    /* ink at 30% opacity */
  --stat-separator-size-desktop: 32px;                      /* desktop baseline */
  --stat-separator-size-mobile:  24px;                      /* mobile refinement (LP-NFR-17 mobile concession) */
  --stat-separator-top-offset:   -2px;                      /* tuned at TASK 5 visual review (S68): U+2022 bullet at 32px sits visually higher in its character box than R6's U+00B7 middle-dot at 28px; offset adjusted from 12px to align with stat numeral top edge */

  /* ==========================================================================
     SPACING — section padding rhythm extracted from R6
     ========================================================================== */

  --space-section-large:  88px;      /* P2 problem padding */
  --space-section-medium: 64px;      /* default section padding (varies; reserved) */
  --space-section-mobile: 48px;      /* mobile section padding (most sections) */
  --space-hero-mobile-top:    40px;
  --space-hero-mobile-bottom: 48px;

  /* ==========================================================================
     ANIMATION — durations + easing per LP-TRS §6.9.1 + R6 button transitions
     ========================================================================== */

  --duration-fast:        0.15s;     /* button hover, micro-interactions */
  --duration-medium:      0.25s;     /* form fade-out (LP-TRS §6.9.1) */
  --duration-slow:        0.5s;      /* form success fade-in (LP-TRS §6.9.1) */
  --easing-default:       ease;
  --easing-in-out:        ease-in-out;
  --form-success-rise:    8px;       /* upward translate for success fade-in */

  /* ==========================================================================
     LAYOUT
     ========================================================================== */

  --container-padding-desktop: 32px;     /* approximate; verify at TASK 3 layout port */
  --container-padding-mobile:  24px;
  --grid-gap-default:          32px;
}


/* ============================================================================
   MOBILE TYPOGRAPHY OVERRIDES — @media (max-width: 768px)
   Per R6 v2 lines 866-1000 + LP-NFR-08 dual-surface parity rule.

   Note: At this build stage we declare only the typography token
   overrides. Component-level mobile overrides (grid layouts, padding,
   button widths, etc.) come at TASK 3 forward as components are ported
   from R6 verbatim.
   ============================================================================ */

@media (max-width: 768px) {
  :root {
    /* Hero — mobile typography */
    --fs-hero-h1:           32px;          /* hero H1 mobile */
    --fs-hero-sub:          16px;
    --lh-tight:             1.1;           /* hero mobile line-height */
    --fs-hero-stat-num:     32px;

    /* Section H2 — mobile */
    --fs-h2-default:        26px;          /* P2 mobile */
    --fs-h2-large:          28px;          /* P3, P5, P6, P7 mobile */
    --fs-h2-medium:         28px;
    --fs-h2-p4:             30px;          /* P4 delusion-specific mobile */

    /* H3 — mobile */
    --fs-h3:                24px;          /* P4 card mobile */
    --fs-h3-card:           20px;          /* P6 whitepaper card mobile */

    /* Body — mobile */
    --fs-body-emphasis:     16px;
    --fs-body-card:         15px;

    /* Stats — mobile */
    --fs-stat-num-default:  42px;          /* P2 problem mobile */
    --fs-alert-stat:        32px;          /* P5 alert stat mobile (R6 maintains 32 baseline; reserved) */

    /* Brand tagline — mobile */
    --fs-brand-tagline:     10px;
    --ls-eyebrow:           1.3px;         /* mobile brand-tagline letter-spacing */

    /* Stat separator — mobile concession (LP-NFR-17) */
    --stat-separator-size-desktop: var(--stat-separator-size-mobile);
  }
}


/* ============================================================================
   TASK 4 — FOUNDATIONS
   Global resets, html, body, layout container.
   Migrated from R6 v2 inline <style> at TASK 4 (S68).
   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
}


/* ============================================================================
   TASK 4 — HEADER CHROME
   Sticky header, white background, navy primary nav, orange hover.
   Migrated from R6 v2 inline <style> at TASK 4 (S68).
   Per LP-TRS v0.9.7 §6.1 + Header Behaviour LOCKED (sticky V1).
   ============================================================================ */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg-white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 64px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.brand {
  display: flex;
  flex-direction: column;
}

/* Logotype: embedded SVG master (kativo_logotype_navy.svg for light bg,
   kativo_logotype_white.svg for dark bg). CSS governs size only — the SVG
   itself carries all typography and colour. Per Foundations v1.6 §7
   SVG-MASTER LOCK. */
.logotype {
  display: inline-block;
  height: 28px;
  width: auto;
  line-height: 0;
}

.logotype svg {
  display: block;
  height: 100%;
  width: auto;
  /* This rule preserves the SVG dimensions inside .logotype regardless of
     whether the SVG is wrapped in an anchor (FV1.1-02 click-to-top wiring).
     Verbatim from R6 v2 logotype rendering rules. */
}

/* FV1.1-02 — header logotype click-to-top wiring (S69).
   The header .logotype div may wrap its inner SVG in an anchor (<a href="#top">);
   this rule preserves layout (no underline, line-height reset) and keeps the
   visual identical to the un-wrapped pattern. Footer logotype is non-interactive
   (decorative chrome) and does NOT use this anchor wrap. */
.logotype > a {
  display: block;
  height: 100%;
  line-height: 0;
  text-decoration: none;
  color: inherit;
}

.brand-tagline {
  font-family: var(--font-family-base);
  font-size: var(--fs-brand-tagline);
  font-weight: var(--fw-semibold);
  letter-spacing: 1.8px;
  color: var(--orange);
  margin-top: 6px;
  text-transform: uppercase;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header-nav a {
  font-size: var(--fs-header-nav);
  font-weight: var(--fw-medium);
  color: var(--navy);
  text-decoration: none;
}

.header-nav a:hover {
  color: var(--orange);
}

.header-divider {
  width: 1px;
  height: 18px;
  background: var(--line-stat-separator);
}

.header-login {
  font-size: var(--fs-header-nav);
  font-weight: var(--fw-medium);
  color: var(--text-light-nav);
  text-decoration: none;
}

.header-login:hover {
  color: var(--orange);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.mobile-menu-toggle svg {
  width: 22px;
  height: 22px;
  stroke: var(--navy);
}


/* ============================================================================
   TASK 4 — HEADER CHROME — MOBILE (≤768px)
   Migrated from R6 v2 inline <style> @media block at TASK 4 (S68).
   ============================================================================ */

@media (max-width: 768px) {
  .logotype {
    height: 24px;
  }

  .header-nav {
    gap: 16px;
  }

  .header-nav a:not(.header-login) {
    display: none;
  }

  .header-divider {
    display: none;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    margin-left: 16px;
  }
}


/* ============================================================================
   TASK 5 — P1 HERO
   Hero section (P1): apex-page first surface — H1 headline, subhead, dual
   CTAs, micro-meta, dial-card with KATiVO AIR Index sample, four pillar
   rows, three-stat row with LP-NFR-17 separator dot.
   Migrated from R6 v2 inline <style> at TASK 5 (S68).

   Stat separator: per LP-NFR-17 LOCKED tokens (TASK 2), NOT R6 v2 legacy
   (R6 lines 257-262 carry pre-Hawk-Eye-S23 implementation: middle-dot,
   #CBD2DB, 28px). Migrated rule consumes --stat-separator-* tokens.
   ============================================================================ */

.p1-hero {
  padding: 96px 0 64px;
  background: var(--bg-white);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}

.hero-title {
  font-family: var(--font-family-base);
  font-size: var(--fs-hero-h1);
  font-weight: var(--fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.hero-sub {
  font-size: var(--fs-hero-sub);
  line-height: 1.55;
  color: var(--text-soft);
  margin-top: 40px;
  max-width: 560px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  margin-top: 40px;
}

/* Buttons (shared across hero + closing CTA) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-base);
  font-size: var(--fs-hero-cta);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 4px;
  transition: transform var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--orange);
  color: var(--navy);
  border-color: var(--orange);
}

.btn-primary:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
}

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

.btn-secondary:hover {
  background: #F7F8FA;
}

.hero-micro {
  font-size: var(--fs-hero-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 1.5px;
  color: var(--text-light-nav);
  text-transform: uppercase;
  margin-top: 14px;
}

/* Dial card — KATiVO AIR Index sample output */
.dial-card {
  background: var(--bg-white);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 40px 44px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.dial-label {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
}

.dial-wrap {
  display: flex;
  justify-content: center;
  margin: 28px 0 32px;
}

/* Pillar rows — four-pillar score breakdown inside dial card */
.pillar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #EEF0F4;
}

.pillar-row:last-child {
  border-bottom: none;
}

.pillar-name {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--navy);
}

.pillar-score {
  font-size: 15px;
  font-weight: var(--fw-semibold);
}

.score-green { color: var(--score-green); }
.score-amber { color: var(--score-amber); }
.score-red   { color: var(--score-red); }

/* Hero stats — three-tile row beneath hero-grid */
.hero-stats {
  border-top: 1px solid #E5E7EB;
  margin-top: 72px;
  padding-top: 36px;
}

.stats-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
  position: relative;
}

.stat-num {
  font-family: var(--font-family-base);
  font-size: var(--fs-hero-stat-num);
  font-weight: var(--fw-bold);
  color: var(--navy);
  line-height: 1;
}

.stat-label {
  font-size: var(--fs-hero-stat-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 1.5px;
  color: var(--orange);
  text-transform: uppercase;
  margin-top: 12px;
}

/* Stat separator dot — LP-NFR-17 LOCKED tokens (overrides R6 v2 legacy).
   Bullet • U+2022 at ink/30%-opacity, 32px desktop / 24px mobile.
   Per Hawk-Eye S23 finding; R6 v2 lines 257-262 NOT migrated as-is. */
.stats-inner > div:not(:first-child)::before {
  content: var(--stat-separator-character);
  position: absolute;
  color: var(--stat-separator-colour);
  font-size: var(--stat-separator-size-desktop);
  top: var(--stat-separator-top-offset);
}

.stats-inner > div:nth-child(2)::before { left: calc(33.33% - 6px); }
.stats-inner > div:nth-child(3)::before { left: calc(66.66% - 6px); }


/* ============================================================================
   TASK 5 — P1 HERO — MOBILE (≤768px)
   Migrated from R6 v2 inline <style> @media block at TASK 5 (S68).
   ============================================================================ */

@media (max-width: 768px) {
  .p1-hero {
    padding: 40px 0 48px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-title {
    font-size: var(--fs-hero-h1);  /* mobile override active via :root @media */
    line-height: 1.1;
  }

  .hero-sub {
    font-size: var(--fs-hero-sub);  /* mobile override active via :root @media */
    margin-top: 20px;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
  }

  .btn {
    width: 100%;
    padding: 15px 20px;
  }

  .hero-micro {
    text-align: center;
    margin-top: 10px;
  }

  .dial-card {
    padding: 28px 24px;
  }

  .hero-stats {
    margin-top: 40px;
    padding-top: 28px;
  }

  .stats-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
  }

  .stats-inner > div::before {
    display: none;
  }

  .stat-num {
    font-size: var(--fs-hero-stat-num);  /* mobile override active via :root @media */
  }
}


/* ============================================================================
   TASK 6 — SHARED LAYOUT CLASSES (used by P2 onwards)
   .section-inner — narrower layout container used by P2-P7 + Footer.
   .eyebrow — section-tag base class (modifiers: .eyebrow-orange, .eyebrow-muted).
   Migrated from R6 v2 inline <style> at TASK 6 (S68).
   ============================================================================ */

.section-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 64px;
}

.eyebrow {
  font-family: var(--font-family-base);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.eyebrow-orange { color: var(--orange); }
.eyebrow-muted  { color: var(--text-muted-light); }

/* Editorial-page eyebrow size override — used on /about-style sub-pages.
   Base .eyebrow is locked at 12px per LP-NFR-16 hierarchy across index P-sections;
   .eyebrow-editorial provides the heavier treatment that suits long-form editorial
   layouts with sparser content density. Sized + weighted to read clearly stronger
   than the persistent header brand-tagline (12px / 600 / 1.8px ls) AND than inline
   body em accents (18px / 500), so the page-banner eyebrow establishes section
   hierarchy without inversion. Pairs with .eyebrow-orange (or another colour
   modifier) for full styling.
   Added at TASK 13 patch (S69); upsized at TASK 13 patch-2 (S69) and patch-3
   (S69) per operator visual review. */
.eyebrow-editorial {
  font-size: 17px;
  font-weight: var(--fw-bold);
  letter-spacing: 3.5px;
}


/* ============================================================================
   TASK 6 — P2 THE CORE PROBLEM
   Cream-background section with three large statistic tiles, McKinsey/BCG
   source line.
   Migrated from R6 v2 inline <style> at TASK 6 (S68).

   Token note: .p2-stat-num desktop uses raw 56px (not --fs-stat-num-default
   which is 42px mobile-spec'd in TASK 2). Future patch-bump candidate.
   ============================================================================ */

.p2-problem {
  padding: 88px 0;
  background: var(--bg-cream);
  border-top: 1px solid var(--bg-cream-edge);
  border-bottom: 1px solid var(--bg-cream-edge);
}

.p2-h2 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h2-default);
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--navy);
  max-width: 900px;
  margin-bottom: 64px;
}

.p2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.p2-stat-num {
  font-family: var(--font-family-base);
  font-size: 56px;  /* desktop — see Token note above */
  font-weight: var(--fw-bold);
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
}

.p2-stat-label {
  font-family: var(--font-family-base);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  color: var(--orange);
  text-transform: uppercase;
  margin-top: 16px;
  line-height: 1.5;
}

.p2-source {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 2px;
  color: var(--text-muted-light);
  text-transform: uppercase;
  margin-top: 56px;
}


/* ============================================================================
   TASK 6 — SHARED + P2 — MOBILE (≤768px)
   Migrated from R6 v2 inline <style> @media block at TASK 6 (S68).
   ============================================================================ */

@media (max-width: 768px) {
  .section-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .p2-problem {
    padding: 48px 0;
  }

  .p2-h2 {
    font-size: var(--fs-h2-default);  /* mobile override active via :root @media (26px) */
    margin-bottom: 36px;
  }

  .p2-stats {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .p2-stat-num {
    font-size: var(--fs-stat-num-default);  /* 42px mobile per TASK 2 */
  }

  .p2-source {
    margin-top: 36px;
  }
}


/* ============================================================================
   TASK 7 — P3 THE KATiVO AIR INDEX
   White-background section: two-column grid (intro + stacked-bars SVG visual)
   above a four-pillar grid (Strategic Intent, Operational Agility, Data
   Hygiene, Cultural Safety & Governance).
   Migrated from R6 v2 inline <style> at TASK 7 (S68).
   ============================================================================ */

.p3-airindex {
  padding: 96px 0;
  background: var(--bg-white);
}

.p3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 72px;
}

.p3-h2 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h2-medium);
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.p3-sub {
  font-size: var(--fs-body-emphasis);
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 24px;
  max-width: 480px;
}

/* P3 visual — stacked-bars SVG container */
.p3-visual {
  padding-top: 20px;
}

/* Four-pillar grid */
.p3-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}

.p3-pillar-num {
  font-size: var(--fs-body-meta);
  font-weight: var(--fw-bold);
  color: var(--orange);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.p3-pillar-name {
  font-size: var(--fs-body-callout);
  font-weight: var(--fw-bold);
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 14px;
}

.p3-pillar-desc {
  font-size: var(--fs-body-meta);
  line-height: 1.55;
  color: var(--text-muted);
}


/* ============================================================================
   TASK 7 — P3 — MOBILE (≤768px)
   Migrated from R6 v2 inline <style> @media block at TASK 7 (S68).
   ============================================================================ */

@media (max-width: 768px) {
  .p3-airindex {
    padding: 48px 0;
  }

  .p3-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }

  .p3-h2 {
    font-size: var(--fs-h2-medium);  /* mobile override active via :root @media (28px) */
  }

  .p3-sub {
    font-size: var(--fs-body);  /* mobile body 16px */
  }

  .p3-pillars {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 0;
    border-top: none;
  }

  .p3-pillars > div {
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
}


/* ============================================================================
   TASK 8 — P4 CRITICAL DELUSION ALERT
   Dark-navy section: anchors the differentiator. Two-column grid with intro
   left (eyebrow + H2 + body + amber callout punch line) and dark IP-leakage
   alert card right (red top-border, warning glyph, three-cell metric row
   with shared baseline + override-pill).
   Migrated from R6 v2 inline <style> at TASK 8 (S68).

   Token notes:
   - .p4-h2 desktop: raw 52px (no semantically-correct TASK 2 token; value
     matches --fs-stat-num-large but that token is for stats, not headlines).
   - .p4-card-h2 desktop: raw 32px (--fs-alert-h2 token exists at 32px but
     is typed for P5 IP-leakage; same value, different surface).
   - #1E2D4D card-internal divider: no TASK 2 token, raw value retained.
   - Future patch-bump candidate: add --fs-h2-p4-desktop and --line-card-dark.
   ============================================================================ */

.p4-delusion {
  padding: 96px 0;
  background: var(--navy-deep);
  color: var(--text-on-dark);
}

.p4-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.p4-eyebrow {
  font-family: var(--font-family-base);
  font-size: var(--fs-body-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 2.8px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.p4-h2 {
  font-family: var(--font-family-base);
  font-size: 52px;  /* desktop — see Token notes above */
  font-weight: var(--fw-extrabold);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
  margin-bottom: 36px;
}

.p4-body {
  font-size: var(--fs-body-emphasis);
  line-height: var(--lh-body);
  color: var(--text-on-dark-soft);
  margin-bottom: 20px;
}

.p4-body-muted {
  font-size: var(--fs-body-card);
  line-height: var(--lh-body);
  color: var(--text-on-dark-meta);
}

/* Differentiator callout — orange-bordered amber-tint punch line */
.p4-callout {
  border-left: 3px solid var(--orange);
  background: var(--orange-tint);
  padding: 18px 22px;
  margin-top: 8px;
  border-radius: 0 4px 4px 0;
}

.p4-callout-text {
  font-family: var(--font-family-base);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-on-dark-tag);
  font-weight: var(--fw-medium);
}

/* IP-leakage alert card */
.p4-card {
  background: var(--navy-darkest);
  border-top: 2px solid var(--alert-red-bright);
  border-radius: 6px;
  padding: 36px;
}

.p4-card-eyebrow {
  font-family: var(--font-family-base);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 2.5px;
  color: var(--alert-red-soft);
  text-transform: uppercase;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.warn-glyph {
  font-size: 18px;
  line-height: 1;
  color: var(--alert-red-bright);
}

.p4-card-h2 {
  font-family: var(--font-family-base);
  font-size: var(--fs-alert-h2);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: var(--text-on-dark);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.p4-card-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-on-dark-muted);
  margin-bottom: 28px;
}

.p4-card-divider {
  border-top: 1px solid #1E2D4D;  /* dark navy divider, no TASK 2 token */
  margin-bottom: 24px;
}

/* Three-cell metric row: shared baseline via 48px-fixed top row + auto label row.
   Numbers + override pill centre vertically in top row; labels share baseline
   in second row. Per R4 item 14 + R4.1 fix. */
.p4-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 28px;
  align-items: stretch;
}

.p4-metric-cell {
  display: grid;
  grid-template-rows: 48px auto;
  row-gap: 10px;
  align-items: center;
}

.p4-metric-cell-divided {
  border-left: 1px solid #1E2D4D;
  padding-left: 28px;
}

.p4-metric-val {
  font-family: var(--font-family-base);
  font-size: var(--fs-alert-stat);
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
  line-height: 1;
  letter-spacing: -0.01em;
  align-self: center;
}

.p4-metric-val-accent {
  color: var(--orange);
}

.p4-metric-lbl {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  color: var(--text-on-dark-meta);
  text-transform: uppercase;
  line-height: 1;
  align-self: start;
}

.override-pill {
  background: var(--alert-red-bg);
  color: var(--text-on-dark);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 1.5px;
  padding: 10px 16px;
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 1;
  align-self: center;
  justify-self: start;
}

.override-lbl {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  color: var(--text-on-dark-meta);
  text-transform: uppercase;
}


/* ============================================================================
   TASK 8 — P4 — MOBILE (≤768px)
   Migrated from R6 v2 inline <style> @media block at TASK 8 (S68).
   ============================================================================ */

@media (max-width: 768px) {
  .p4-delusion {
    padding: 48px 0;
  }

  .p4-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .p4-h2 {
    font-size: var(--fs-h2-p4);  /* 30px mobile per TASK 2 */
    margin-bottom: 24px;
  }

  .p4-body {
    font-size: var(--fs-body);  /* 16px mobile */
  }

  .p4-card {
    padding: 24px;
  }

  .p4-card-h2 {
    font-size: var(--fs-h3);  /* 24px mobile per TASK 2 */
  }

  .p4-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .p4-metric-cell-divided {
    border-left: none;
    padding-left: 0;
  }

  .p4-metric-cell:last-child {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}


/* ============================================================================
   TASK 9 — P5 HOW IT WORKS
   White-background section: two-column grid (intro + connected-nodes SVG
   visual) above a four-step grid (Begin / Diagnose / Receive / Navigate).
   Structurally parallel to P3 AIR Index (TASK 7).
   Migrated from R6 v2 inline <style> at TASK 9 (S68).
   ============================================================================ */

.p5-works {
  padding: 96px 0;
  background: var(--bg-white);
}

.p5-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 72px;
}

.p5-h2 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h2-medium);
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--navy);
}

/* P5 visual — connected-nodes SVG container */
.p5-visual {
  padding-top: 40px;
}

/* Four-step grid */
.p5-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}

.p5-step-num {
  font-size: var(--fs-body-meta);
  font-weight: var(--fw-bold);
  color: var(--orange);
  margin-bottom: 14px;
}

.p5-step-title {
  font-size: var(--fs-body-callout);
  font-weight: var(--fw-bold);
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 14px;
}

.p5-step-desc {
  font-size: var(--fs-body-meta);
  line-height: 1.55;
  color: var(--text-muted);
}


/* ============================================================================
   TASK 9 — P5 — MOBILE (≤768px)
   Migrated from R6 v2 inline <style> @media block at TASK 9 (S68).
   ============================================================================ */

@media (max-width: 768px) {
  .p5-works {
    padding: 48px 0;
  }

  .p5-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }

  .p5-h2 {
    font-size: var(--fs-h2-medium);  /* mobile override active via :root @media (28px) */
  }

  .p5-steps {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 0;
    border-top: none;
  }

  .p5-steps > div {
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
}


/* ============================================================================
   TASK 10 — P6 CREDIBILITY
   Cream-background section with three founder/operating-model/external-
   validation rows, plus a white paper card with orange CTA. Structurally
   parallel to P2 (cream alternation pattern).
   Migrated from R6 v2 inline <style> at TASK 10 (S68).

   Token notes:
   - #D9D4C3 row dividers: cream-section internal dividers, slightly
     different hue from --bg-cream-edge (#E8E4D8). No TASK 2 token. Raw
     value retained. Future patch-bump candidate: --line-cream-internal.
   ============================================================================ */

.p6-credibility {
  padding: 96px 0;
  background: var(--bg-cream);
  border-top: 1px solid var(--bg-cream-edge);
  border-bottom: 1px solid var(--bg-cream-edge);
}

.p6-h2 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h2-default);
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--navy);
  max-width: 620px;
  margin-bottom: 64px;
}

/* Three credibility rows: 280px label column + flex body */
.p6-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  padding: 32px 0;
  border-top: 1px solid #D9D4C3;  /* cream-internal divider, no TASK 2 token */
}

.p6-row:last-of-type {
  border-bottom: 1px solid #D9D4C3;
}

.p6-cred-num {
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--orange);
  margin-bottom: 8px;
}

.p6-cred-label {
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  color: var(--navy);
  text-transform: uppercase;
  line-height: 1.3;
}

.p6-cred-body {
  font-size: var(--fs-body-emphasis);
  line-height: var(--lh-body);
  color: var(--text);
  max-width: 620px;
}

/* White paper card — left-bordered, ungated, orange CTA */
.p6-whitepaper {
  margin-top: 56px;
  background: var(--bg-white);
  border-left: 3px solid var(--navy);
  padding: 36px 40px;
}

.p6-wp-eyebrow {
  font-family: var(--font-family-base);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 2.5px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.p6-wp-title {
  font-family: var(--font-family-base);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 14px;
  max-width: 560px;
}

.p6-wp-attrib {
  font-size: var(--fs-body-meta);
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.p6-wp-desc {
  font-size: var(--fs-body-card);
  line-height: var(--lh-body);
  color: var(--text-soft);
  margin-bottom: 28px;
  max-width: 620px;
}

.p6-wp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: var(--navy);
  font-family: var(--font-family-base);
  font-size: var(--fs-hero-cta);
  font-weight: var(--fw-semibold);
  padding: 14px 24px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid var(--orange);
  transition: background var(--duration-fast) var(--easing-default);
}

.p6-wp-cta:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
}


/* ============================================================================
   TASK 10 — P6 — MOBILE (≤768px)
   Migrated from R6 v2 inline <style> @media block at TASK 10 (S68).
   ============================================================================ */

@media (max-width: 768px) {
  .p6-credibility {
    padding: 48px 0;
  }

  .p6-h2 {
    font-size: var(--fs-h2-default);  /* mobile override active via :root @media (26px) */
    margin-bottom: 36px;
  }

  .p6-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px 0;
  }

  .p6-cred-body {
    font-size: var(--fs-body-card);  /* 15px mobile */
  }

  .p6-whitepaper {
    padding: 28px 24px;
    margin-top: 36px;
  }

  .p6-wp-title {
    font-size: var(--fs-h3-card);  /* 20px mobile per TASK 2 */
  }

  .p6-wp-cta {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================================
   TASK 11 — P7 CLOSING
   Dark navy closing section: orange-bordered eyebrow, large H2, dual CTAs,
   micro-meta, divider, "Stay Informed" email signup row.
   Migrated from R6 v2 inline <style> at TASK 11 (S68).

   Per LP-TRS §6.9.1: form interaction (state machine, transitions, errors)
   is implementation scope for TASK 9-LP (Brevo API / Cloudflare Function).
   This TASK is visual-only; form behaviour comes later.
   ============================================================================ */

.p7-closing {
  padding: 120px 0 96px;
  background: var(--navy-cta-dark);
  color: var(--text-on-dark);
}

.p7-eyebrow {
  font-family: var(--font-family-base);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 3px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 6px;
}

.p7-h2 {
  font-family: var(--font-family-base);
  font-size: var(--fs-h2-large);
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
  margin: 32px 0 56px;
  max-width: 1100px;
}

.p7-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.p7-micro {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 1.5px;
  color: var(--text-on-dark-meta);
  text-transform: uppercase;
  margin-bottom: 48px;
}

.p7-divider {
  border-top: 1px solid var(--border-dark-edge);
  margin: 40px 0 32px;
  max-width: 640px;
}

.p7-stay-note {
  font-size: var(--fs-body-meta);
  color: var(--text-on-dark-meta);
  margin-bottom: 16px;
}

/* Stay Informed email row */
.p7-email-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-dark-edge);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  max-width: 640px;
  overflow: hidden;
}

.p7-email-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 18px 20px;
  font-size: var(--fs-hero-cta);
  color: var(--text-on-dark);
  font-family: var(--font-family-base);
}

.p7-email-row input::placeholder {
  color: #5B6B86;  /* dark-section placeholder, no TASK 2 token */
}

.p7-email-row button {
  background: transparent;
  border: none;
  color: var(--orange);
  font-family: var(--font-family-base);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ============================================================================
   TASK 11 — P7 — MOBILE (≤768px)
   Migrated from R6 v2 inline <style> @media block at TASK 11 (S68).
   ============================================================================ */

@media (max-width: 768px) {
  .p7-closing {
    padding: 56px 0 48px;
  }

  .p7-h2 {
    font-size: var(--fs-h2-large);  /* mobile override active via :root @media (28px) */
    line-height: 1.12;
    margin: 20px 0 32px;
  }

  .p7-ctas {
    flex-direction: column;
    gap: 10px;
  }

  .p7-email-row {
    flex-direction: column;
    align-items: stretch;
  }

  .p7-email-row input {
    padding: 14px 16px;
  }

  .p7-email-row button {
    border-top: 1px solid var(--border-dark-edge);
    padding: 14px 16px;
    justify-content: flex-end;
  }
}


/* ============================================================================
   TASK 12 — FOOTER
   Dark navy footer: white-variant logotype, orange tagline, three-column
   grid (brand + Contact + Navigate columns).
   Migrated from R6 v2 inline <style> at TASK 12 (S68).

   Token notes:
   - #0A142C footer bg: distinct from --navy-darkest (#0A152C, P4 card).
     Same value family, different shade. Using --navy-darkest as close-enough
     match would silently change R6 colour; keeping raw with note.
   - #5B6B86 footer-copy + dark-section placeholder: no TASK 2 token.
   ============================================================================ */

.site-footer {
  background: #0A142C;  /* darkest footer navy, no exact TASK 2 token */
  color: var(--text-on-dark);
  padding: 72px 0 56px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
}

.footer-brand .logotype {
  height: 24px;
}

.footer-tagline {
  font-family: var(--font-family-base);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 2px;
  color: var(--orange);
  text-transform: uppercase;
  margin-top: 8px;
}

.footer-copy {
  font-size: 13px;
  color: #5B6B86;  /* dark-section meta, no TASK 2 token */
  margin-top: 32px;
}

.footer-col-label {
  font-family: var(--font-family-base);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 2.5px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer-col a,
.footer-col span {
  display: block;
  font-size: var(--fs-body-meta);
  color: var(--text-on-dark);
  text-decoration: none;
  margin-bottom: 10px;
  line-height: 1.5;
}

.footer-col a:hover {
  color: var(--orange);
}


/* ============================================================================
   TASK 12 — TRAILING SHARED CLASS — .svg-responsive
   Utility class for inline SVG visuals (P3 stacked-bars, P5 connected-nodes).
   Migrated from R6 v2 inline <style> at TASK 12 (S68).
   ============================================================================ */

.svg-responsive {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================================
   TASK 12 — FOOTER + RESIDUAL HEADER MOBILE — MOBILE (≤768px)
   Captures footer mobile rules + the .container/.header-inner shared mobile
   padding (left dangling in inline <style> after TASK 4-11 sequential
   migrations; absorbed here at TASK 12 final cleanup).
   Migrated from R6 v2 inline <style> @media block at TASK 12 (S68).
   ============================================================================ */

@media (max-width: 768px) {
  .container,
  .header-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .header-inner {
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .site-footer {
    padding: 48px 0 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ============================================================================
   TASK 13.0 — /about PAGE CLASSES
   First multi-page surface using shared kativo-lp.css per LOCKED-S68-A.
   Source: KATiVO_About_R3_1.html reference (operator-ratified, project lib).
   Decisions binding S69:
     - Mikael founder bio block deferred to OPEN-S69-2 (Tolle sales-voice
       review per LP-TRS §8.7.3). /about ships at S69 with Joakim-only
       founder card. Founders-grid declared 1-column at desktop;
       2-column reactivation pattern banked at .founders-grid-twocol
       declaration for forward Mikael-add patch (no CSS rework needed).
     - External validation copy aligns to index.html P6 ("Adversarial
       Cooperation in Code Synthesis"); R3_1's "dialectical autocoding"
       is divergent older wording, not canonical.
   Token discipline:
     - All colour values consume tokens where token exists.
     - Spacing values use raw px where no spacing token covers the value;
       banked as patch-bump candidates (consistent with TASK 6 P2 pattern).
     - Typography values use --fs-* tokens where matched; raw px elsewhere
       (about-h1 56px = --fs-h2-large; about-operate h2 44px = --fs-h2-default;
       founders-h2 34px is a NEW size, banked as patch-bump candidate).
   Date: 10 May 2026 (S69)
   ============================================================================ */

/* ----- /about INTRO — eyebrow + H1, white background ----- */

.about-intro {
  background: var(--bg-white);
  padding: 88px 0 48px;
}

.about-intro-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 64px;
  text-align: center;
}

.about-h1 {
  font-family: var(--font-family-base);
  font-size: 48px;                            /* sub-page H1 — one notch below home hero (68px) and below index P7 (56px) for editorial register */
  font-weight: var(--fw-bold);
  line-height: 1.08;
  color: var(--navy);
  letter-spacing: -1.2px;                     /* scaled with size */
}

/* ----- /about ORIGIN STORY — cream editorial block ----- */

.about-story {
  background: var(--bg-cream);
  padding: 88px 0 96px;
}

.story-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 64px;
}

.story-para {
  font-size: 19px;                            /* matches --fs-body-callout */
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
}

.story-para:last-child {
  margin-bottom: 0;
}

.story-para.lead {
  font-size: 22px;                            /* lead variant — no token match, banked */
  line-height: 1.55;
  font-weight: var(--fw-medium);
  color: var(--navy);
  margin-bottom: 36px;
}

/* ----- /about HOW WE OPERATE — AI-native dark navy block ----- */

.about-operate {
  background: var(--navy-darkest);
  color: var(--text-on-dark);
  padding: 96px 0 104px;
}

.operate-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 64px;
}

.operate-label {
  text-align: center;
  margin-bottom: 56px;
}

/* .operate-eyebrow removed at TASK 13 patch-3 (S69): the dedicated class
   diverged from the shared .eyebrow + .eyebrow-editorial chain used elsewhere
   on /about, producing visibly smaller/lighter rendering than the other two
   /about eyebrows. Refactored to consume the shared chain in HTML.
   Single source of truth for /about-style eyebrows now lives in
   .eyebrow + .eyebrow-orange + .eyebrow-editorial. */

.operate-h2 {
  font-family: var(--font-family-base);
  font-size: 40px;                            /* sub-page section H2 — one notch below index P6 (44px) for editorial register */
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
  letter-spacing: -0.8px;                     /* scaled with size */
  line-height: 1.12;
  max-width: 760px;
  margin: 0 auto;
}

.operate-body {
  max-width: 720px;
  margin: 0 auto;
}

.operate-para {
  font-size: 18px;                            /* between --fs-body-emphasis 17px and --fs-body-callout 19px; banked */
  line-height: 1.7;
  color: var(--text-on-dark-soft);
  margin-bottom: 22px;
}

.operate-para:last-child {
  margin-bottom: 0;
}

.operate-para strong {
  color: var(--text-on-dark);
  font-weight: var(--fw-semibold);
}

.operate-para em {
  color: var(--orange);
  font-style: normal;
  font-weight: var(--fw-medium);
}

.operate-validation {
  margin-top: 48px;
  padding: 24px 28px;
  border-left: 2px solid var(--orange);
  background: var(--orange-tint);             /* token: rgba(245,166,35,0.06); R3_1 used 0.04 — token preferred for cross-page consistency with P5 alert callouts */
}

.operate-validation .label {
  font-family: var(--font-family-base);
  font-size: var(--fs-micro);                 /* 11px */
  font-weight: var(--fw-bold);
  letter-spacing: 2px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.operate-validation .text {
  font-size: 15px;                            /* matches --fs-body-card */
  line-height: 1.65;
  color: var(--text-on-dark-soft);
}

/* ----- /about FOUNDERS — 1-col S69, 2-col-ready when Mikael lands ----- */

.about-founders {
  background: var(--bg-white);
  padding: 96px 0;
}

.founders-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 64px;
}

.founders-label {
  text-align: center;
  margin-bottom: 56px;
}

.founders-h2 {
  font-family: var(--font-family-base);
  font-size: 28px;                            /* sub-section title under founder block — clearly subordinate to about-h1 (48px) and operate-h2 (40px) */
  font-weight: var(--fw-bold);
  color: var(--navy);
  letter-spacing: -0.4px;                     /* scaled with size */
  line-height: 1.2;
}

/* Founders grid — Joakim-only at S69 (single card centred via max-width).
   When Mikael bio lands at OPEN-S69-2 close, add second .founder-card sibling
   and the grid becomes natural 2-column at desktop (768px+) — see twocol
   modifier below. No CSS rework required at Mikael-add. */
.founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 560px;
  margin: 0 auto;
}

.founders-grid-twocol {
  grid-template-columns: 1fr 1fr;
  max-width: none;
}

.founder-card {
  background: var(--bg-cream);
  border-radius: 8px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.founder-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-base);
  font-size: 44px;
  font-weight: var(--fw-bold);
  letter-spacing: 2px;
  margin-bottom: 28px;
}

.founder-name {
  font-family: var(--font-family-base);
  font-size: 26px;                            /* matches --fs-h3 */
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.founder-role {
  font-family: var(--font-family-base);
  font-size: var(--fs-mini);                  /* 12px */
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.founder-bio {
  font-size: 16px;                            /* matches --fs-body */
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 18px;
  text-align: left;
}

.founder-location {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: #3B4452;                             /* between --text-soft #3A4355 and --text-muted; raw kept verbatim from R3_1 */
  letter-spacing: 0.4px;
  margin-top: 8px;
}

/* ----- /about CLOSING — cream centred logotype block ----- */

.about-close {
  background: var(--bg-cream);
  padding: 96px 0;
  text-align: center;
}

.close-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 64px;
}

.close-logotype {
  display: inline-block;
  max-width: 320px;
  margin: 0 auto 16px;
}

.close-logotype svg {
  width: 100%;
  height: auto;
  display: block;
}

.close-tagline {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 2.8px;
  color: var(--orange);
  text-transform: uppercase;
}


/* ============================================================================
   TASK 13.0 — /about MOBILE OVERRIDES (≤768px)
   Mirrors R3_1 mobile @media rules; consumes same tokens where applicable.
   ============================================================================ */

@media (max-width: 768px) {
  .about-intro {
    padding: 56px 0 32px;
  }
  .about-intro-inner {
    padding: 0 24px;
  }
  .about-h1 {
    font-size: 32px;                          /* mobile — scales with new desktop 48px (was 36px against old 56px) */
    letter-spacing: -0.6px;
  }

  .about-story {
    padding: 56px 0 64px;
  }
  .story-inner {
    padding: 0 24px;
  }
  .story-para {
    font-size: 17px;
  }
  .story-para.lead {
    font-size: 19px;
    margin-bottom: 28px;
  }

  .about-operate {
    padding: 64px 0 72px;
  }
  .operate-inner {
    padding: 0 24px;
  }
  .operate-h2 {
    font-size: 26px;                          /* mobile — scales with new desktop 40px (was 28px against old 44px) */
    letter-spacing: -0.4px;
  }
  .operate-label {
    margin-bottom: 36px;
  }
  .operate-para {
    font-size: 16px;
  }
  .operate-validation {
    padding: 20px 22px;
    margin-top: 36px;
  }

  .about-founders {
    padding: 64px 0;
  }
  .founders-inner {
    padding: 0 24px;
  }
  .founders-h2 {
    font-size: 22px;                          /* mobile — scales with new desktop 28px (was 24px against old 34px) */
    letter-spacing: -0.3px;
  }
  .founders-label {
    margin-bottom: 36px;
  }
  .founders-grid,
  .founders-grid-twocol {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: none;
  }
  .founder-card {
    padding: 40px 28px;
  }

  .about-close {
    padding: 64px 0;
  }
  .close-logotype {
    max-width: 240px;
  }
  .close-tagline {
    font-size: 12px;
    letter-spacing: 2.2px;
  }
}


/* ============================================================================
   TASK 14.0 — /white-paper PAGE CLASSES
   Third multi-page surface using shared kativo-lp.css per LOCKED-S68-A.
   Source: white-paper.html mock-up reference (operator-ratified design phase,
   project lib); 13 sections + hero + end-CTA + endmark per LP-TRS §6.7.5
   Strategy D.

   Architectural decisions binding S69 TASK 14:
     - /white-paper has BESPOKE header + footer chrome per the operator-
       ratified mock-up (cream-tinted backdrop-blur sticky header, simplified
       nav, in-header Download PDF button; simplified single-row footer).
       This DIVERGES from the .site-header / .site-footer chrome used by
       index + about, but the divergence is intentional — the white paper
       is a long-form reading surface and benefits from softer chrome and
       persistent download access.
     - All /white-paper-specific classes namespaced under .wp-*  to avoid
       collision with the shared .site-header / .site-footer rules.
     - Body classes use existing brand tokens (--navy, --orange, --bg-cream,
       --text-on-dark, --text, etc.) via the same kativo-lp.css variable
       palette.
     - Mock-up fidelity binds: visual output of /white-paper at S69 close
       must match the project-library reference white-paper.html. Where the
       mock-up uses raw values (cream rgba header, 780px max-width, etc.),
       those raw values are honoured verbatim.
   Date: 10 May 2026 (S69)
   ============================================================================ */

/* ----- /white-paper PAGE BODY — cream reading surface ----- */

.wp-page-body {
  background: var(--bg-cream);
}

html.wp-html {
  background: var(--bg-cream);
  scroll-behavior: smooth;
}

body.wp-body-root {
  background: var(--bg-cream);
  font-size: 17px;
  line-height: 1.65;
}

/* ----- /white-paper SITE HEADER — cream-tinted backdrop-blur sticky ----- */

.wp-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 242, 234, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--bg-cream-edge);
}

.wp-site-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wp-site-logotype {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.wp-site-logotype svg {
  height: 28px;
  width: auto;
  display: block;
}

.wp-site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.wp-site-nav a.wp-nav-link {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--navy);
  text-decoration: none;
  transition: color 0.15s ease;
}

.wp-site-nav a.wp-nav-link:hover,
.wp-site-nav a.wp-nav-link[aria-current="page"] {
  color: var(--orange);
}

.wp-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--navy);
  background: transparent;
  border: 1.5px solid var(--navy);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  letter-spacing: 0.01em;
}

.wp-btn-download:hover {
  background: var(--navy);
  color: var(--bg-cream);
}

.wp-btn-download svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

/* ----- /white-paper HERO — navy cover block ----- */

.wp-hero {
  background: var(--navy);
  color: var(--bg-cream);
  padding: 96px 24px 80px;
  text-align: center;
}

.wp-hero-inner {
  max-width: 780px;
  margin: 0 auto;
}

.wp-hero-eyebrow {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--orange);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 28px;
}

.wp-hero-logotype {
  margin: 0 0 18px;
  line-height: 0;
}

.wp-hero-logotype svg {
  height: 72px;
  width: auto;
  max-width: 86%;
  display: inline-block;
}

.wp-hero-tagline {
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--orange);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 64px;
}

.wp-hero-title {
  font-size: clamp(32px, 5.2vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  color: var(--text-on-dark);
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}

.wp-hero-subtitle {
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--orange);
  margin: 0 0 56px;
  line-height: 1.4;
}

.wp-hero-meta {
  font-size: 14px;
  color: var(--bg-cream);
  opacity: 0.88;
}

.wp-hero-meta-line {
  margin: 4px 0;
}

/* ----- /white-paper BODY — long-form reading content ----- */

.wp-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 72px 24px 72px;
}

.wp-section {
  margin: 0 0 64px;
}

.wp-section p.wp-section-eyebrow {
  font-family: var(--font-family-base);
  font-size: 14px;                            /* operator-tuned at S69 — bumped from reference 12px for stronger section banner */
  font-weight: var(--fw-bold);
  color: var(--orange);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.wp-section h2 {
  font-family: var(--font-family-base);
  font-size: clamp(28px, 3.8vw, 34px);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 32px;
  letter-spacing: -0.02em;
}

.wp-section h3 {
  font-family: var(--font-family-base);
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin: 32px 0 12px;
  line-height: 1.35;
}

.wp-section p {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 20px;
  color: var(--text);
}

/* ----- /white-paper CALLOUT — navy block with orange border ----- */

.wp-callout {
  background: var(--navy);
  color: var(--bg-cream);
  border-left: 4px solid var(--orange);
  padding: 24px 28px;
  margin: 32px 0;
  border-radius: 0 4px 4px 0;
}

.wp-callout p {
  margin: 0;
  color: var(--bg-cream);
  font-size: 16.5px;
  line-height: 1.6;
}

.wp-callout-lead {
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
}

.wp-callout-lead-bi {
  font-weight: var(--fw-bold);
  font-style: italic;
  color: var(--text-on-dark);
}

.wp-callout strong em,
.wp-callout em strong {
  font-weight: var(--fw-bold);
  font-style: italic;
  color: var(--text-on-dark);
}

/* ----- /white-paper MATRIX TABLE — 3-col reference table ----- */

.wp-matrix-wrap {
  margin: 24px 0 32px;
  overflow-x: auto;
}

.wp-matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-cream);
}

.wp-matrix tr {
  border-top: 1px solid var(--bg-cream-edge);
}

.wp-matrix tr:last-child {
  border-bottom: 1px solid var(--bg-cream-edge);
}

.wp-matrix th,
.wp-matrix td {
  padding: 22px 22px;
  vertical-align: top;
  text-align: left;
  font-weight: var(--fw-regular);
}

.wp-matrix th {
  background: var(--navy);
  width: 22%;
}

.wp-matrix-term {
  display: inline-block;
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--orange);
}

.wp-matrix-desc {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  width: 46%;
}

.wp-matrix-sig {
  font-size: 14px;
  color: #3B4452;                             /* DSS v5.6.1 muted secondary on light surface */
  line-height: 1.55;
  width: 32%;
}

/* ----- /white-paper BULLET LIST — orange-bullet styled list ----- */

.wp-bullet-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
}

.wp-bullet-list li {
  position: relative;
  padding: 8px 0 8px 24px;
  color: var(--text);
  line-height: 1.65;
}

.wp-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 6px;
  color: var(--orange);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1;
}

.wp-bullet-list strong {
  color: var(--navy);
  font-weight: var(--fw-bold);
}

/* ----- /white-paper END CTA — Start Assessment block ----- */

.wp-end-cta {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

.wp-end-cta-inner {
  background: var(--navy);
  color: var(--bg-cream);
  padding: 56px 40px;
  border-radius: 4px;
  border-left: 4px solid var(--orange);
  text-align: center;
}

.wp-end-cta h3 {
  font-family: var(--font-family-base);
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.wp-end-cta p {
  font-size: 16px;
  color: var(--bg-cream);
  margin: 0 auto 32px;
  opacity: 0.88;
  max-width: 480px;
  line-height: 1.55;
}

.wp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--navy);
  background: var(--orange);
  border: none;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  letter-spacing: 0.01em;
}

.wp-btn-primary:hover {
  background: var(--text-on-dark);
  color: var(--navy);
}

.wp-btn-primary svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
  transition: transform 0.15s ease;
}

.wp-btn-primary:hover svg {
  transform: translateX(2px);
}

/* ----- /white-paper ENDMARK + COLOPHON ----- */

.wp-endmark {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.wp-endmark p.wp-endmark-line {
  color: #3B4452;
  font-style: italic;
  font-size: 15px;
  margin: 0 0 6px;
}

.wp-endmark p.wp-colophon-line {
  color: #3B4452;
  font-style: italic;
  font-size: 13px;
  margin: 0 0 64px;
}

/* ----- /white-paper SITE FOOTER — bespoke single-row pattern ----- */

.wp-site-footer {
  background: var(--navy);
  color: var(--bg-cream);
  padding: 56px 24px 40px;
}

.wp-site-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
}

.wp-site-footer-brand {
  line-height: 0;
}

.wp-site-footer-brand svg {
  height: 24px;
  width: auto;
}

.wp-site-footer-tagline {
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 10px 0 0;
}

.wp-site-footer-nav {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}

.wp-site-footer-nav a {
  color: var(--bg-cream);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.82;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.wp-site-footer-nav a:hover {
  opacity: 1;
  color: var(--orange);
}

.wp-site-footer-meta {
  max-width: 1120px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 242, 234, 0.12);
  font-size: 12px;
  color: var(--bg-cream);
  opacity: 0.6;
  text-align: center;
}


/* ============================================================================
   TASK 14.0 — /white-paper MOBILE OVERRIDES (≤720px to match reference)
   Reference uses 720px breakpoint specifically for white paper reading flow;
   honoured verbatim per mock-up fidelity.
   ============================================================================ */

@media (max-width: 720px) {
  body.wp-body-root {
    font-size: 16px;
  }

  .wp-site-header-inner {
    padding: 12px 18px;
    gap: 12px;
  }
  .wp-site-logotype svg {
    height: 24px;
  }
  .wp-site-nav {
    gap: 14px;
  }
  .wp-site-nav a.wp-nav-link {
    display: none;
  }
  .wp-btn-download {
    padding: 8px 14px;
    font-size: 13px;
  }

  .wp-hero {
    padding: 72px 20px 64px;
  }
  .wp-hero-logotype svg {
    height: 54px;
  }
  .wp-hero-title {
    font-size: 30px;
  }
  .wp-hero-subtitle {
    font-size: 17px;
    margin-bottom: 48px;
  }
  .wp-hero-tagline {
    margin-bottom: 48px;
  }

  .wp-body {
    padding: 56px 20px 64px;
  }
  .wp-section {
    margin-bottom: 48px;
  }
  .wp-section h2 {
    font-size: 26px;
  }

  .wp-callout {
    padding: 20px 22px;
    margin: 24px 0;
  }
  .wp-callout p {
    font-size: 16px;
  }

  .wp-matrix th,
  .wp-matrix td {
    padding: 18px 16px;
    display: block;
    width: 100% !important;
  }

  .wp-matrix th {
    padding-bottom: 10px;
  }
  .wp-matrix td.wp-matrix-desc {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .wp-matrix td.wp-matrix-sig {
    padding-top: 0;
    padding-bottom: 18px;
  }

  .wp-matrix tr {
    display: block;
    border-top: 2px solid var(--bg-cream-edge);
  }

  .wp-matrix tr:last-child {
    border-bottom: 2px solid var(--bg-cream-edge);
  }

  .wp-end-cta {
    padding: 0 20px 64px;
  }
  .wp-end-cta-inner {
    padding: 44px 24px;
  }
  .wp-end-cta h3 {
    font-size: 22px;
  }

  .wp-site-footer {
    padding: 44px 20px 32px;
  }
  .wp-site-footer-inner {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
  .wp-site-footer-nav {
    gap: 18px;
  }
}

@media print {
  .wp-site-header,
  .wp-site-footer,
  .wp-end-cta {
    display: none;
  }
  body.wp-body-root {
    background: var(--bg-white);
  }
  .wp-callout {
    break-inside: avoid;
  }
  .wp-matrix tr {
    break-inside: avoid;
  }
  .wp-section {
    break-inside: avoid-page;
  }
}

/* ============================================================================
   §6.9.1 — STAY INFORMED FORM v2 (Track Y.2, S72)
   §6.9.1 locked tokens for form-version="v2" only.
   Legacy .p7-email-row rules above remain in service for the email input row.
   ============================================================================ */

/* Intro header above the email row */
.p7-stay-form[data-form-version="v2"] .p7-stay-intro {
  max-width: 640px;
  margin: 0 0 16px;
}

.p7-stay-form[data-form-version="v2"] .p7-stay-heading {
  font-family: var(--font-family-base);
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  line-height: 1.2;
  margin-bottom: 6px;
}

.p7-stay-form[data-form-version="v2"] .p7-stay-subline {
  font-size: var(--fs-body-meta);
  color: var(--text-on-dark-meta);
  line-height: 1.5;
}

/* Email row — focus-within shifts border to orange */
.p7-stay-form[data-form-version="v2"] .p7-email-row {
  transition: border-color 200ms ease;
}

.p7-stay-form[data-form-version="v2"] .p7-email-row:focus-within {
  border-color: var(--orange);
}

/* Subscribe button — primary orange treatment per §6.9.1 */
.p7-stay-form[data-form-version="v2"] .p7-email-row button {
  background: var(--orange);
  color: var(--navy-cta-dark);
  letter-spacing: 1px;
  padding: 0 28px;
  height: 100%;
  min-height: 56px;
  transition: opacity 200ms ease, background-color 200ms ease;
}

.p7-stay-form[data-form-version="v2"] .p7-email-row button:hover:not(:disabled) {
  background: #FFB838;
}

.p7-stay-form[data-form-version="v2"] .p7-email-row button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Spinner inside Subscribe button (State B LOADING) */
.p7-stay-form[data-form-version="v2"] .p7-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--navy-cta-dark);
  border-top-color: transparent;
  border-radius: 50%;
  animation: p7-spin 0.8s linear infinite;
}

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

/* Consent checkbox row */
.p7-stay-form[data-form-version="v2"] .p7-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  max-width: 640px;
  cursor: pointer;
}

.p7-stay-form[data-form-version="v2"] .p7-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--orange);
  cursor: pointer;
}

.p7-stay-form[data-form-version="v2"] .p7-consent-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-on-dark-meta);
}

/* Error block (State D1 / D2) */
.p7-stay-form[data-form-version="v2"] .p7-stay-error {
  margin-top: 12px;
  font-size: 13px;
  color: #D85A3B;
  line-height: 1.4;
  max-width: 640px;
}

/* Success block (State C — orange envelope + locked copy) */
.p7-stay-form[data-form-version="v2"] .p7-stay-success {
  max-width: 640px;
  margin-top: 8px;
  padding: 22px 24px;
  background: rgba(245, 166, 35, 0.06);
  border-left: 3px solid var(--orange);
  border-radius: 0 4px 4px 0;
}

.p7-stay-form[data-form-version="v2"] .p7-stay-success-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.p7-stay-form[data-form-version="v2"] .p7-stay-success-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.p7-stay-form[data-form-version="v2"] .p7-stay-success-primary {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
  line-height: 1.3;
  margin-bottom: 6px;
}

.p7-stay-form[data-form-version="v2"] .p7-stay-success-secondary {
  font-size: 14px;
  color: #8895AE;
  line-height: 1.5;
}

.p7-stay-form[data-form-version="v2"] [data-success-email] {
  color: var(--text-on-dark);
}

/* Mobile (≤768px) — §6.9.1 v2 additions */
@media (max-width: 768px) {
  .p7-stay-form[data-form-version="v2"] .p7-stay-heading {
    font-size: 20px;
  }
  .p7-stay-form[data-form-version="v2"] .p7-email-row button {
    border-top: 1px solid var(--border-dark-edge);
    padding: 16px;
    justify-content: center;
    min-height: 52px;
  }
  .p7-stay-form[data-form-version="v2"] .p7-consent {
    margin-top: 16px;
  }
  .p7-stay-form[data-form-version="v2"] .p7-stay-success {
    padding: 18px 20px;
  }
}