<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'DM Sans', sans-serif;
    color: #111;
    background: #FAFAF8;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  :root {
    --teal:       #0D5B52;
    --teal-mid:   #0F6B60;
    --teal-light: #E6F2F0;
    --gold:       #C9922B;
    --gold-light: #FBF4E8;
    --ink:        #111111;
    --mid:        #444444;
    --muted:      #7A7A7A;
    --border:     #E2E2DC;
    --off-white:  #FAFAF8;
    --white:      #FFFFFF;
    --dark:       #0A0A0A;
  }

  /* ─── ANNOTATION ─── */
  .annotation {
    background: #1A1A1A; color: #FFF;
    padding: 10px 48px;
    font-family: 'DM Mono', monospace; font-size: 11px;
    letter-spacing: 2px; text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
  }
  .annotation span { color: var(--gold); }

  /* ─── NAV ─── */
  .nav-sub { font-size: 11px; color: var(--muted); text-align: center; padding: 7px; background: var(--teal-light); letter-spacing: 0.5px; }
  nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(250,250,248,0.96); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 64px;
    display: flex; align-items: center; justify-content: space-between; height: 68px;
  }
  .nav-logo { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--teal); }
  .nav-logo span { color: var(--gold); }
  .nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
  .nav-links a { font-size: 13.5px; font-weight: 500; color: var(--mid); text-decoration: none; transition: color 0.2s; }
  .nav-links a.active { color: var(--teal); font-weight: 600; }
  .nav-cta { background: var(--teal); color: white !important; padding: 9px 22px; border-radius: 4px; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.5px; text-transform: uppercase; }

  /* ─── SHARED UTILITIES ─── */
  .section-label {
    font-family: 'DM Mono', monospace; font-size: 11px;
    letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
  }
  .section-label::before { content: ''; display: block; width: 24px; height: 1px; background: var(--gold); opacity: 0.6; }
  .section-label.centered { justify-content: center; }
  .section-label.centered::before { display: none; }
  .section-label.on-dark { color: rgba(201,146,43,0.85); }
  .section-label.on-dark::before { background: var(--gold); opacity: 0.4; }

  .section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 3.2vw, 44px); font-weight: 900;
    line-height: 1.08; letter-spacing: -0.5px; color: var(--ink);
  }
  .section-title em { font-style: italic; color: var(--teal); }
  .section-title.on-dark { color: white; }
  .section-title.on-dark em { color: var(--gold); }
  .section-title.centered { text-align: center; }

  .btn-gold {
    background: var(--gold); color: white;
    padding: 14px 28px; border-radius: 4px;
    font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none; display: inline-block;
    transition: background 0.2s, transform 0.15s;
  }
  .btn-gold:hover { background: #b8831f; transform: translateY(-1px); }
  .btn-teal {
    background: var(--teal); color: white;
    padding: 14px 28px; border-radius: 4px;
    font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none; display: inline-block;
    transition: background 0.2s;
  }
  .btn-teal:hover { background: var(--teal-mid); }
  .btn-outline-dark {
    border: 1.5px solid var(--border); color: var(--teal);
    padding: 13px 24px; border-radius: 4px;
    font-size: 13px; font-weight: 500; text-decoration: none; display: inline-block;
    transition: all 0.2s;
  }
  .btn-outline-dark:hover { border-color: var(--teal); background: var(--teal-light); }
  .btn-outline-white {
    border: 1.5px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7);
    padding: 13px 24px; border-radius: 4px;
    font-size: 13px; font-weight: 500; text-decoration: none; display: inline-block;
    transition: all 0.2s;
  }
  .btn-outline-white:hover { border-color: rgba(255,255,255,0.5); color: white; }

  /* ═══════════════════════════════════
     SECTION 1 — HERO
  ═══════════════════════════════════ */
  .hero {
    background: var(--teal);
    padding: 88px 64px 0;
    overflow: hidden; position: relative;
  }
  .hero::before {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 45%; height: 100%;
    background: linear-gradient(135deg, transparent 30%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
  }
  /* Gold accent line */
  .hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 64px;
    width: 80px; height: 3px;
    background: var(--gold);
  }
  .hero-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 400px;
    gap: 64px; align-items: end;
    position: relative;
  }
  .hero-left { padding-bottom: 72px; }
  .hero-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 28px;
    font-family: 'DM Mono', monospace; font-size: 11px;
    letter-spacing: 2px; text-transform: uppercase;
  }
  .hero-breadcrumb a { color: rgba(255,255,255,0.35); text-decoration: none; }
  .hero-breadcrumb .sep { color: rgba(255,255,255,0.2); }
  .hero-breadcrumb .current { color: var(--gold); }

  .hero-flag {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px; padding: 7px 14px;
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.6);
    margin-bottom: 28px;
  }
  .hero-flag strong { color: white; }

  .hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 4.8vw, 64px); font-weight: 900;
    line-height: 1.05; letter-spacing: -1px;
    color: white; margin-bottom: 28px;
  }
  .hero h1 em { font-style: italic; color: var(--gold); }

  .hero-sub {
    font-size: 17px; color: rgba(255,255,255,0.65);
    line-height: 1.7; max-width: 500px;
    margin-bottom: 44px; font-weight: 300;
  }
  .hero-sub strong { color: rgba(255,255,255,0.92); font-weight: 500; }

  .hero-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

  /* HERO CARD — Session Picker */
  .hero-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 28px 28px 0;
  }
  .hero-card-label {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.4); margin-bottom: 20px;
  }
  .session-mini-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
  .session-mini-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    cursor: pointer; transition: background 0.15s;
  }
  .session-mini-row:hover, .session-mini-row.active {
    background: rgba(201,146,43,0.15);
    border-color: rgba(201,146,43,0.3);
  }
  .smr-icon { font-size: 16px; flex-shrink: 0; }
  .smr-text { flex: 1; }
  .smr-name { font-size: 13px; font-weight: 600; color: white; }
  .smr-desc { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 1px; }
  .smr-arrow { color: rgba(255,255,255,0.25); font-size: 12px; }
  .hero-card-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 16px 0 20px;
    text-align: center;
    font-size: 12px; color: rgba(255,255,255,0.3);
    font-style: italic;
  }

  /* ═══════════════════════════════════
     SECTION 2 — WHAT THIS IS
  ═══════════════════════════════════ */
  .what-section {
    background: var(--ink); padding: 80px 64px;
  }
  .what-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  }
  .what-left .section-title { margin-bottom: 28px; }
  .what-left p {
    font-size: 16px; color: rgba(255,255,255,0.6);
    line-height: 1.7; font-weight: 300;
  }
  .what-left p + p { margin-top: 16px; }
  .what-left p strong { color: rgba(255,255,255,0.9); font-weight: 500; }
  .what-right { display: flex; flex-direction: column; gap: 4px; }
  .what-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-radius: 6px; overflow: hidden;
  }
  .what-cell {
    padding: 18px 20px;
    display: flex; align-items: flex-start; gap: 10px;
  }
  .what-cell.not {
    background: rgba(220,80,80,0.06);
    border: 1px solid rgba(220,80,80,0.12);
    border-right: none; border-radius: 6px 0 0 6px;
  }
  .what-cell.yes {
    background: rgba(13,91,82,0.2);
    border: 1px solid rgba(13,91,82,0.25);
    border-radius: 0 6px 6px 0;
  }
  .what-mark {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; flex-shrink: 0; margin-top: 2px;
  }
  .what-mark.x { background: rgba(220,80,80,0.2); border: 1px solid rgba(220,80,80,0.3); color: #dc5050; }
  .what-mark.check { background: rgba(13,91,82,0.4); border: 1px solid rgba(13,91,82,0.5); color: #4ECDC4; }
  .what-cell-text { font-size: 13px; line-height: 1.45; }
  .what-cell.not .what-cell-text { color: rgba(255,255,255,0.4); }
  .what-cell.yes .what-cell-text { color: rgba(255,255,255,0.85); font-weight: 500; }

  /* ═══════════════════════════════════
     SECTION 3 — WHAT ACTUALLY MATTERED
  ═══════════════════════════════════ */
  .patterns-section { background: var(--off-white); padding: 96px 64px; }
  .patterns-inner { max-width: 1280px; margin: 0 auto; }
  .patterns-header {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
    margin-bottom: 56px; align-items: end;
  }
  .patterns-header p {
    font-size: 16px; color: var(--mid);
    line-height: 1.7; font-weight: 300; padding-bottom: 4px;
  }
  .patterns-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  }
  .pattern-card {
    background: var(--white);
    border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
  }
  .pattern-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
  .pattern-top {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--border);
    background: #F7F7F5;
  }
  .pattern-thought-label {
    font-family: 'DM Mono', monospace; font-size: 9px;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
  }
  .pattern-thought {
    font-size: 14px; color: var(--mid);
    line-height: 1.5; font-style: italic;
  }
  .pattern-thought::before { content: '"'; }
  .pattern-thought::after { content: '"'; }
  .pattern-bottom { padding: 22px 24px; }
  .pattern-reality-label {
    font-family: 'DM Mono', monospace; font-size: 9px;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--teal); margin-bottom: 8px;
  }
  .pattern-reality {
    font-size: 14px; color: var(--ink); font-weight: 500; line-height: 1.5;
  }
  .pattern-icon {
    font-size: 22px; margin-bottom: 12px; display: block;
  }
  .patterns-note {
    margin-top: 40px; text-align: center;
    font-size: 14px; color: var(--muted); font-style: italic;
    padding: 20px; border: 1px dashed var(--border); border-radius: 8px;
  }
  .patterns-note strong { color: var(--teal); font-style: normal; }

  /* ═══════════════════════════════════
     SECTION 4 — WHO THIS IS FOR
  ═══════════════════════════════════ */
  .for-section { background: var(--white); padding: 96px 64px; }
  .for-inner { max-width: 1280px; margin: 0 auto; }
  .for-header { margin-bottom: 48px; }
  .for-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .for-card {
    border: 1.5px solid var(--border); border-radius: 10px;
    padding: 36px 32px; position: relative;
    background: var(--off-white);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .for-card:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(13,91,82,0.07); }
  .for-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--teal); border-radius: 10px 10px 0 0;
  }
  .for-card.gold-top::before { background: var(--gold); }
  .for-card-type {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--teal); margin-bottom: 14px;
  }
  .for-card.gold-top .for-card-type { color: var(--gold); }
  .for-card h3 {
    font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700;
    color: var(--ink); margin-bottom: 12px; line-height: 1.2;
  }
  .for-card p { font-size: 14px; color: var(--mid); line-height: 1.65; margin-bottom: 20px; }
  .for-scenarios { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .for-scenarios li {
    font-size: 13.5px; color: var(--mid);
    display: flex; align-items: flex-start; gap: 10px; line-height: 1.45;
  }
  .for-scenarios li::before { content: '→'; color: var(--teal); font-size: 12px; flex-shrink: 0; margin-top: 2px; }
  .for-card.gold-top .for-scenarios li::before { color: var(--gold); }

  /* ═══════════════════════════════════
     SECTION 5 — 5 SESSION TYPES
  ═══════════════════════════════════ */
  .sessions-section { background: var(--off-white); padding: 96px 64px; }
  .sessions-inner { max-width: 1280px; margin: 0 auto; }
  .sessions-header { margin-bottom: 16px; }
  .sessions-guide {
    font-size: 14px; color: var(--mid);
    background: var(--gold-light);
    border: 1px solid rgba(201,146,43,0.2);
    border-radius: 6px; padding: 14px 20px;
    margin-bottom: 40px; margin-top: 20px;
    display: flex; align-items: center; gap: 12px;
    line-height: 1.55;
  }
  .sessions-guide::before { content: '💡'; font-size: 18px; flex-shrink: 0; }
  .sessions-guide strong { color: var(--ink); }
  .sessions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
  .sessions-grid-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 68%; }
  .session-card {
    background: var(--white); border: 1.5px solid var(--border); border-radius: 10px;
    padding: 28px 24px; position: relative;
    display: flex; flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .session-card:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(13,91,82,0.07); }
  .session-card.recommended {
    border-color: var(--gold);
    background: var(--gold-light);
  }
  .session-card.recommended:hover { border-color: #b8831f; }
  .session-rec-badge {
    position: absolute; top: -11px; left: 20px;
    background: var(--gold); color: white;
    font-family: 'DM Mono', monospace; font-size: 9px;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 3px;
  }
  .session-icon { font-size: 26px; margin-bottom: 14px; display: block; }
  .session-card h4 {
    font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700;
    color: var(--ink); margin-bottom: 6px; line-height: 1.2;
  }
  .session-when {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 12px;
  }
  .session-card p { font-size: 13.5px; color: var(--mid); line-height: 1.6; flex: 1; margin-bottom: 18px; }
  .session-outcome {
    font-size: 12.5px; color: var(--teal); font-weight: 500;
    padding-top: 14px; border-top: 1px solid var(--border);
    display: flex; align-items: flex-start; gap: 6px; line-height: 1.4;
  }
  .session-outcome::before { content: '→'; flex-shrink: 0; }
  .session-card.recommended .session-outcome { border-top-color: rgba(201,146,43,0.2); }
  .session-start {
    display: inline-block; margin-top: 14px;
    font-size: 12px; font-weight: 600; color: var(--teal);
    letter-spacing: 0.5px; text-decoration: none;
    display: flex; align-items: center; gap: 5px;
  }
  .session-start::after { content: '↗'; }
  .session-start:hover { text-decoration: underline; }

  /* ═══════════════════════════════════
     SECTION 6 — HOW IT WORKS
  ═══════════════════════════════════ */
  .how-section { background: var(--teal); padding: 96px 64px; }
  .how-inner { max-width: 1280px; margin: 0 auto; }
  .how-header { margin-bottom: 56px; }
  .how-header p {
    font-size: 16px; color: rgba(255,255,255,0.6);
    line-height: 1.7; margin-top: 16px; font-weight: 300; max-width: 520px;
  }
  .how-header p strong { color: rgba(255,255,255,0.9); font-weight: 500; }
  .how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .how-steps { display: flex; flex-direction: column; gap: 0; }
  .how-step {
    display: flex; gap: 24px; align-items: flex-start;
    padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
    position: relative;
  }
  .how-step:last-child { border-bottom: none; }
  .how-step-num {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', monospace; font-size: 12px; color: var(--gold);
    flex-shrink: 0;
  }
  .how-step-body {}
  .how-step-body h4 {
    font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700;
    color: white; margin-bottom: 6px;
  }
  .how-step-body p { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.6; }
  /* RIGHT SIDE — what NOT to expect */
  .how-right { display: flex; flex-direction: column; gap: 20px; }
  .how-box {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 28px;
  }
  .how-box-label {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.4); margin-bottom: 16px;
  }
  .how-box ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .how-box ul li {
    font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px;
    line-height: 1.5;
  }
  .how-box ul li .li-mark { flex-shrink: 0; margin-top: 2px; font-size: 11px; }
  .how-box.positive ul li { color: rgba(255,255,255,0.8); }
  .how-box.positive .li-mark { color: #4ECDC4; }
  .how-box.negative ul li { color: rgba(255,255,255,0.45); }
  .how-box.negative .li-mark { color: rgba(220,80,80,0.7); }
  .how-note {
    background: rgba(201,146,43,0.12);
    border: 1px solid rgba(201,146,43,0.2);
    border-radius: 8px; padding: 20px 24px;
    font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6;
  }
  .how-note strong { color: var(--gold); font-weight: 600; }

  /* ═══════════════════════════════════
     SECTION 7 — PRICING
  ═══════════════════════════════════ */
  .pricing-section { background: var(--white); padding: 96px 64px; }
  .pricing-inner { max-width: 1280px; margin: 0 auto; }
  .pricing-header { margin-bottom: 48px; }
  .pricing-header p { font-size: 16px; color: var(--mid); line-height: 1.65; max-width: 540px; margin-top: 16px; }
  .pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
  .pricing-card {
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 36px 32px; position: relative;
    display: flex; flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .pricing-card:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(13,91,82,0.07); }
  .pricing-card.featured {
    background: var(--teal); border-color: var(--teal);
  }
  .pricing-badge {
    position: absolute; top: -12px; left: 24px;
    background: var(--gold); color: white;
    font-family: 'DM Mono', monospace; font-size: 9px;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 3px;
  }
  .pricing-card-label {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--muted); margin-bottom: 16px;
  }
  .pricing-card.featured .pricing-card-label { color: rgba(255,255,255,0.5); }
  .pricing-card h3 {
    font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700;
    color: var(--ink); margin-bottom: 8px;
  }
  .pricing-card.featured h3 { color: white; }
  .pricing-amount {
    font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 900;
    color: var(--teal); line-height: 1; margin: 16px 0 4px;
  }
  .pricing-card.featured .pricing-amount { color: var(--gold); }
  .pricing-per { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
  .pricing-card.featured .pricing-per { color: rgba(255,255,255,0.5); }
  .pricing-includes {
    list-style: none; display: flex; flex-direction: column; gap: 9px;
    margin-bottom: 28px; flex: 1;
  }
  .pricing-includes li {
    font-size: 13.5px; color: var(--mid);
    display: flex; align-items: flex-start; gap: 8px; line-height: 1.45;
  }
  .pricing-card.featured .pricing-includes li { color: rgba(255,255,255,0.7); }
  .pi-check { color: var(--teal); flex-shrink: 0; font-size: 14px; margin-top: 1px; }
  .pricing-card.featured .pi-check { color: var(--gold); }
  .pricing-cta {
    display: block; text-align: center; padding: 13px 20px; border-radius: 5px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
    text-decoration: none; transition: all 0.2s;
  }
  .pricing-cta.outline { border: 1.5px solid var(--border); color: var(--teal); }
  .pricing-cta.outline:hover { border-color: var(--teal); background: var(--teal-light); }
  .pricing-cta.solid { background: var(--gold); color: white; border: none; }
  .pricing-cta.solid:hover { background: #b8831f; }
  .pricing-cta.white { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2); }
  .pricing-cta.white:hover { background: rgba(255,255,255,0.2); }
  .pricing-note {
    margin-top: 28px; padding: 18px 24px;
    background: var(--off-white); border: 1px solid var(--border); border-radius: 8px;
    font-size: 13.5px; color: var(--mid); line-height: 1.6; text-align: center;
  }
  .pricing-note strong { color: var(--teal); }

  /* ═══════════════════════════════════
     SECTION 8 — FAQ
  ═══════════════════════════════════ */
  .faq-section { background: var(--off-white); padding: 96px 64px; }
  .faq-inner { max-width: 1280px; margin: 0 auto; }
  .faq-header { margin-bottom: 52px; }
  .faq-header p { font-size: 16px; color: var(--mid); line-height: 1.65; max-width: 480px; margin-top: 14px; }
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .faq-item {
    background: var(--white); border: 1px solid var(--border); border-radius: 10px;
    padding: 28px 28px;
    transition: box-shadow 0.2s;
  }
  .faq-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
  .faq-q {
    font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700;
    color: var(--ink); margin-bottom: 12px; line-height: 1.35;
    display: flex; align-items: flex-start; gap: 12px;
  }
  .faq-q-mark {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--teal-light); border: 1px solid rgba(13,91,82,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--teal); font-family: 'DM Mono', monospace;
    flex-shrink: 0; margin-top: 1px; font-style: normal;
  }
  .faq-a { font-size: 14px; color: var(--mid); line-height: 1.7; padding-left: 36px; }
  .faq-a strong { color: var(--ink); font-weight: 600; }

  /* ═══════════════════════════════════
     SECTION 9 — CTA
  ═══════════════════════════════════ */
  .cta-section { background: var(--ink); padding: 96px 64px; }
  .cta-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center;
  }
  .cta-inner h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3vw, 42px); font-weight: 900;
    color: white; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.5px;
  }
  .cta-inner h2 em { font-style: italic; color: var(--gold); }
  .cta-inner p { font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.65; font-weight: 300; max-width: 480px; }
  .cta-buttons { display: flex; flex-direction: column; gap: 14px; min-width: 260px; }
  .btn-cta-primary {
    background: var(--gold); color: white;
    padding: 16px 32px; border-radius: 4px;
    font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    text-decoration: none; text-align: center;
    transition: background 0.2s, transform 0.15s;
  }
  .btn-cta-primary:hover { background: #b8831f; transform: translateY(-1px); }
  .btn-cta-secondary {
    border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.65);
    padding: 14px 32px; border-radius: 4px;
    font-size: 13px; font-weight: 500;
    text-decoration: none; text-align: center; transition: all 0.2s;
  }
  .btn-cta-secondary:hover { border-color: rgba(255,255,255,0.4); color: white; }
  .cta-note { font-size: 12px; color: rgba(255,255,255,0.25); text-align: center; margin-top: 4px; }
  .cta-divider {
    height: 1px; background: rgba(255,255,255,0.06);
    margin: 4px 0;
  }
  .cta-path-nudge {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 16px 20px;
    margin-top: 4px;
  }
  .cta-path-nudge-label {
    font-family: 'DM Mono', monospace; font-size: 9px;
    letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.3);
    margin-bottom: 8px;
  }
  .cta-path-nudge p { font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.5; }
  .cta-path-nudge a { color: var(--gold); text-decoration: none; font-weight: 500; }
  .cta-path-nudge a:hover { text-decoration: underline; }

  /* FOOTER */
  footer { background: #0A0A0A; border-top: 1px solid rgba(255,255,255,0.06); padding: 40px 64px; display: flex; align-items: center; justify-content: space-between; }
  .footer-logo { font-family: 'Playfair Display', serif; font-size: 20px; color: white; font-weight: 700; }
  .footer-logo span { color: var(--gold); }
  .footer-tagline { font-size: 12px; color: rgba(255,255,255,0.3); margin-top: 4px; }
  .footer-links { display: flex; gap: 28px; }
  .footer-links a { font-size: 13px; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; }
  .footer-links a:hover { color: rgba(255,255,255,0.8); }
  .footer-copy { font-size: 12px; color: rgba(255,255,255,0.25); text-align: right; }

  /* SEO ANNOTATION */
  .seo-annotation { background: #F0F7F6; border-top: 2px solid #B8D9D5; padding: 36px 64px; }
  .seo-annotation-inner { max-width: 1280px; margin: 0 auto; }
  .seo-annotation-title { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
  .seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .seo-col-label { font-size: 11px; font-weight: 600; color: #444; margin-bottom: 10px; font-family: 'DM Mono', monospace; }
  .seo-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .seo-tag { font-size: 10.5px; padding: 3px 9px; border-radius: 3px; font-family: 'DM Mono', monospace; }
  .t1 { background: rgba(13,91,82,0.1); color: #0D5B52; }
  .t2 { background: rgba(201,146,43,0.1); color: #9A6F1A; }
  .t3 { background: rgba(120,120,120,0.1); color: #666; }


  /* ─────────────────────────────────────────
     RESPONSIVE STYLES
  ──────────────────────────────────────── */

  @media (max-width: 1024px) {
    nav { padding: 0 32px; }

    .hero { padding: 72px 32px 0; }
    .hero-inner {
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: start;
    }
    .hero-left { padding-bottom: 28px; }
    .hero-right {
      max-width: 520px;
    }

    .what-section,
    .patterns-section,
    .for-section,
    .sessions-section,
    .how-section,
    .pricing-section,
    .faq-section,
    .cta-section {
      padding-left: 32px;
      padding-right: 32px;
    }

    .audience-strip-inner {
      grid-template-columns: 1fr;
      gap: 24px;
      padding-left: 32px;
      padding-right: 32px;
    }
    .aud-divider { display: none; }

    .what-inner,
    .patterns-header,
    .for-grid,
    .how-grid,
    .cta-inner {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .patterns-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .sessions-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .sessions-grid-bottom {
      max-width: 100%;
      grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .faq-grid {
      grid-template-columns: 1fr;
    }

    .final-cta-inner {
      grid-template-columns: 1fr;
      text-align: center;
    }

    footer {
      flex-direction: column;
      gap: 20px;
      text-align: center;
      padding: 32px 32px;
    }
    .footer-links {
      flex-wrap: wrap;
      justify-content: center;
    }
    .footer-copy { text-align: center; }
  }

  @media (max-width: 768px) {
    nav {
      padding: 0 20px;
      gap: 16px;
    }
    .nav-links {
      display: none;
    }
    .nav-logo { font-size: 20px; }

    .hero {
      padding: 48px 20px 0;
    }
    .hero::after { left: 20px; }
    .hero h1 {
      font-size: 34px;
      line-height: 1.12;
    }
    .hero-sub {
      font-size: 15px;
      line-height: 1.65;
    }
    .hero-ctas {
      flex-direction: column;
      align-items: stretch;
    }
    .hero-ctas > * {
      width: 100%;
      justify-content: center;
      text-align: center;
    }
    .hero-card {
      padding: 24px 20px 0;
    }
    .hero-right {
      max-width: none;
    }

    .what-section,
    .patterns-section,
    .for-section,
    .sessions-section,
    .how-section,
    .pricing-section,
    .faq-section,
    .cta-section {
      padding: 60px 20px;
    }

    .what-inner,
    .patterns-header,
    .how-grid,
    .cta-inner {
      gap: 24px;
    }

    .what-row {
      grid-template-columns: 1fr;
    }
    .what-cell.not {
      border-right: 1px solid rgba(220,80,80,0.12);
      border-radius: 6px 6px 0 0;
    }
    .what-cell.yes {
      border-radius: 0 0 6px 6px;
      border-top: none;
    }

    .patterns-grid,
    .sessions-grid,
    .pricing-grid,
    .selectivity-grid {
      grid-template-columns: 1fr;
    }
    .sessions-grid-bottom {
      grid-template-columns: 1fr;
      max-width: 100%;
    }

    .for-card,
    .session-card,
    .pricing-card,
    .faq-item,
    .how-box {
      padding-left: 22px;
      padding-right: 22px;
    }

    .how-step {
      gap: 16px;
    }

    .cta-buttons {
      min-width: 0;
      width: 100%;
    }
    .btn-cta-primary,
    .btn-cta-secondary,
    .btn-gold,
    .btn-outline-white,
    .btn-teal,
    .btn-outline-dark,
    .session-start,
    .pricing-cta,
    .aud-cta,
    .card-cta {
      width: 100%;
      justify-content: center;
      text-align: center;
    }
  }

  @media (max-width: 480px) {
    .hero h1 {
      font-size: 28px;
    }
    .section-title {
      font-size: 24px;
    }
    .hero-card-label,
    .hero-breadcrumb,
    .hero-flag,
    .section-label,
    .aud-type,
    .card-type,
    .session-when,
    .pricing-card-label,
    .how-box-label,
    .cta-path-nudge-label,
    .seo-annotation-title {
      letter-spacing: 1.5px;
    }
    .hero-card {
      padding: 20px 16px 0;
    }
    .session-mini-row {
      padding: 11px 12px;
    }
    .pattern-top,
    .pattern-bottom,
    .for-card,
    .session-card,
    .pricing-card,
    .faq-item {
      padding-left: 18px;
      padding-right: 18px;
    }
    .how-step-body h4 {
      font-size: 16px;
    }
    .footer-links {
      gap: 16px;
    }
  }

</style>
