:root {
      --bg-base:       #F8F9FC;
      --bg-surface:    #EEF2F8;
      --bg-card:       #FFFFFF;
      --accent:        #006E8A;
      --accent-glow:   rgba(0,110,138,.08);
      --accent-border: rgba(0,110,138,.22);
      --green:         #00904A;
      --text-1:        #0F1C2E;
      --text-2:        #485E7A;
      --text-3:        #7A90AB;
      --border:        rgba(0,0,0,.09);
      --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
      --shadow-cta: 0 8px 40px rgba(0,110,138,.22);
      --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --max-w: 1060px;
      --tr: .25s ease;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font); background: var(--bg-base); color: var(--text-1); line-height: 1.65; -webkit-font-smoothing: antialiased; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { cursor: pointer; font-family: var(--font); }
    .c { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

    /* ── NAV ── */
    .nav { padding: 20px 0; background: rgba(248,249,252,.96); border-bottom: 1px solid var(--border); }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; }
    .nav-logo { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
    .nav-logo em { font-style: normal; color: var(--accent); }
    .nav-back { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; transition: color var(--tr); }
    .nav-back:hover { color: var(--accent); }

    /* ── HERO ── */
    .page-hero {
      padding: 80px 0 60px;
      background: linear-gradient(160deg, #081424 0%, #0F1C2E 100%);
      position: relative; overflow: hidden;
    }
    .page-hero::before {
      content: ''; position: absolute; top: -20%; right: -8%; width: 600px; height: 600px; pointer-events: none;
      background: radial-gradient(circle, rgba(0,110,138,.2) 0%, transparent 65%);
    }
    .page-hero-in {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center;
    }
    .page-eyebrow {
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
      padding: 6px 14px 6px 10px;
      background: rgba(0,144,74,.12); border: 1px solid rgba(0,144,74,.25);
      border-radius: 50px; font-size: 12px; font-weight: 600; color: #4AE08A;
    }
    .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #00904A; flex-shrink: 0; }
    .page-hero h1 {
      font-size: clamp(30px,4.5vw,52px); font-weight: 900;
      line-height: 1.1; letter-spacing: -.03em; color: #FFFFFF; margin-bottom: 20px;
    }
    .page-hero h1 span { color: var(--accent); }
    .page-hero p { font-size: 17px; color: rgba(255,255,255,.65); line-height: 1.75; margin-bottom: 28px; max-width: 520px; }
    .social-proof { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .proof-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 600;
    }
    .proof-pill.att { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
    .proof-pill.f100 { background: rgba(0,110,138,.18); border: 1px solid rgba(0,110,138,.35); color: #4EC6E0; }

    /* ── GATE CARD ── */
    .gate-card {
      background: var(--bg-card); border-radius: var(--r-xl);
      padding: 40px 36px; position: relative; z-index: 1;
      box-shadow: 0 24px 64px rgba(0,0,0,.28);
    }
    .gate-card h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.01em; }
    .gate-card > p { font-size: 14px; color: var(--text-2); margin-bottom: 24px; line-height: 1.6; }
    .field { margin-bottom: 16px; }
    .field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--text-2); }
    .field input, .field select {
      width: 100%; padding: 11px 14px; font-size: 14px; font-family: var(--font);
      background: var(--bg-base); border: 1px solid var(--border);
      border-radius: var(--r-sm); color: var(--text-1); outline: none;
      transition: border-color var(--tr), box-shadow var(--tr);
    }
    .field input:focus, .field select:focus {
      border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,110,138,.1);
    }
    .gate-btn {
      width: 100%; padding: 15px; font-size: 15px; font-weight: 700; font-family: var(--font);
      background: var(--accent); color: #FFFFFF; border: none; border-radius: 50px;
      cursor: pointer; margin-top: 6px;
      transition: background var(--tr), box-shadow var(--tr), transform var(--tr);
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .gate-btn:hover { background: #0088AA; transform: translateY(-2px); box-shadow: var(--shadow-cta); }
    .gate-btn[disabled] { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
    .gate-privacy { font-size: 11px; color: var(--text-3); text-align: center; margin-top: 12px; line-height: 1.5; }
    .gate-status { min-height: 20px; margin-top: 10px; font-size: 12px; text-align: center; color: #B42318; }

    /* ── OUTCOMES ── */
    .outcomes { padding: 80px 0; }
    .outcomes-hd { text-align: center; max-width: 640px; margin: 0 auto 52px; }
    .lbl { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
    .hdg { font-size: clamp(26px,3.8vw,40px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px; }
    .sub { font-size: 17px; color: var(--text-2); line-height: 1.75; }
    .outcomes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
    .outcome-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 36px 30px; position: relative; overflow: hidden;
      transition: border-color var(--tr), transform var(--tr);
    }
    .outcome-card:hover { border-color: var(--accent-border); transform: translateY(-4px); }
    .outcome-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 3px;
    }
    .outcome-card:nth-child(1)::before { background: #006E8A; }
    .outcome-card:nth-child(2)::before { background: #00904A; }
    .outcome-card:nth-child(3)::before { background: #0050C0; }
    .outcome-num { font-size: 48px; font-weight: 900; color: var(--accent); letter-spacing: -.04em; line-height: 1; margin-bottom: 8px; }
    .outcome-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.01em; }
    .outcome-card p { font-size: 14px; color: var(--text-2); line-height: 1.72; }

    /* ── FRAMEWORK PHASES ── */
    .phases { padding: 0 0 80px; }
    .phases-hd { text-align: center; margin-bottom: 52px; }
    .phase-list { display: flex; flex-direction: column; gap: 1px; max-width: 820px; margin: 0 auto; }
    .phase {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 0; padding: 28px 36px;
      display: grid; grid-template-columns: 48px 1fr;
      gap: 24px; align-items: start;
      transition: border-color var(--tr), background var(--tr);
    }
    .phase:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
    .phase:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
    .phase:hover { border-color: var(--accent-border); background: var(--bg-surface); }
    .phase-num {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      background: var(--accent-glow); border: 1px solid var(--accent-border);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 800; color: var(--accent);
    }
    .phase-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 4px; }
    .phase h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
    .phase p { font-size: 14px; color: var(--text-2); line-height: 1.72; }

    /* ── SPEAKER / ABOUT ── */
    .speaker { padding: 80px 0; background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .speaker-in { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: center; }
    .speaker-lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
    .speaker-in h2 { font-size: clamp(22px,3vw,34px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 16px; }
    .speaker-in p { font-size: 15px; color: var(--text-2); line-height: 1.8; margin-bottom: 14px; }
    .speaker-creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
    .cred { padding: 5px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 50px; font-size: 12px; font-weight: 600; color: var(--text-2); }
    .speaker-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .speaker-stat {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 24px 20px; text-align: center;
    }
    .speaker-stat-n { font-size: 36px; font-weight: 900; color: var(--accent); letter-spacing: -.03em; line-height: 1; margin-bottom: 6px; }
    .speaker-stat-l { font-size: 12px; color: var(--text-2); line-height: 1.5; }

    /* ── BOTTOM CTA ── */
    .bottom-cta { padding: 80px 0; text-align: center; }
    .bottom-cta h2 { font-size: clamp(26px,4vw,44px); font-weight: 900; letter-spacing: -.03em; margin-bottom: 16px; line-height: 1.15; }
    .bottom-cta h2 span { color: var(--accent); }
    .bottom-cta p { font-size: 17px; color: var(--text-2); max-width: 480px; margin: 0 auto 32px; line-height: 1.75; }
    .bottom-btns { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px;
      border: none; border-radius: 50px; white-space: nowrap; letter-spacing: -.01em;
      transition: transform var(--tr), box-shadow var(--tr), background var(--tr), border-color var(--tr), color var(--tr);
      cursor: pointer;
    }
    .btn:active { transform: translateY(1px) !important; }
    .bp { padding: 14px 28px; background: var(--accent); color: #FFFFFF; }
    .bp:hover { background: #0088AA; transform: translateY(-2px); box-shadow: var(--shadow-cta); }
    .bg { padding: 14px 28px; background: transparent; color: var(--text-2); border: 1px solid var(--border); }
    .bg:hover { border-color: var(--accent); color: var(--accent); }

    /* ── FOOTER ── */
    .footer { padding: 38px 0; border-top: 1px solid var(--border); }
    .footer-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
    .foot-copy { font-size: 13px; color: var(--text-3); }
    .foot-lnks { display: flex; flex-wrap: wrap; gap: 12px 24px; }
    .foot-l { font-size: 13px; color: var(--text-3); transition: color var(--tr); }
    .foot-l:hover { color: var(--accent); }

    /* ── SUCCESS STATE ── */
    .gate-success { display: none; text-align: center; padding: 20px 0; }
    .gate-success svg { margin: 0 auto 16px; }
    .gate-success h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
    .gate-success p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .page-hero-in { grid-template-columns: 1fr; }
      .gate-card { margin-top: 40px; }
      .outcomes-grid { grid-template-columns: 1fr; }
      .speaker-in { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .phase { grid-template-columns: 1fr; }
      .page-hero { padding: 60px 0 40px; }
      .bottom-btns { flex-direction: column; align-items: stretch; }
      .bottom-btns .btn { justify-content: center; }
    }
    @media print {
      .nav, .page-hero, .bottom-cta, .footer { display: none !important; }
      body, .outcomes, .speaker { background: #FFFFFF; }
      .outcomes, .phases, .speaker { padding: 24px 0; }
      .outcome-card, .phase, .speaker-stat { break-inside: avoid; box-shadow: none; }
      .outcome-card:hover, .phase:hover { transform: none; }
    }