@charset "UTF-8";
    /* =============================================
       DESIGN TOKENS — WCAG AA verified
       White on --slate (#5C6478): 5.4:1 ✓
       White on --slate-dark (#3A4156): 10:1 ✓
       #1A1C20 on white: 14.8:1 ✓
       ============================================= */
    :root {
      --slate:        #5C6478;
      --slate-mid:    #4C5566;
      --slate-dark:   #3A4156;
      --dark:         #1A1C20;

      --surface:      #FFFFFF;
      --surface-alt:  #F5F4F2;
      --surface-tint: #EDEEF2;

      /* Audience card accent colours (light bg, dark text) */
      --mauve:        #C2A4A6;
      --mauve-pale:   #F5EDEE;
      --powder:       #A3BFCE;
      --powder-pale:  #EAF1F6;
      --sage-muted:   #9DAF9E;
      --sage-pale:    #EBF0EB;
      --sand:         #C4B49A;
      --sand-pale:    #F5F0E8;

      --text:         #1A1C20;
      --text-muted:   #4A5166;
      --white:        #FFFFFF;
      --off-white:    rgba(255,255,255,0.88);
      --muted-white:  rgba(255,255,255,0.55);
      --border:       rgba(60,65,86,0.13);

      --shadow-card:  0 2px 12px rgba(26,28,32,0.07);
      --shadow-hover: 0 8px 32px rgba(26,28,32,0.13);
      --radius:       12px;
    }

    /* =============================================
       RESET & BASE
       ============================================= */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

    body {
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 16px;
      line-height: 1.65;
      background: var(--surface-alt);
      color: var(--text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }

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

    /* Skip to content (accessibility) */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 16px;
      background: var(--dark);
      color: var(--white);
      padding: 10px 18px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      letter-spacing: 0.06em;
      z-index: 9999;
      border-radius: 0 0 6px 6px;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 0; }

    :focus-visible {
      outline: 2px solid var(--white);
      outline-offset: 3px;
      border-radius: 2px;
    }

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

    /* Visually hidden, screen-reader accessible */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* =============================================
       NAV — sticky, dark slate
       ============================================= */
    /* ── Announcement bar ─────────────────────── */
    .nav-announce {
      background: var(--slate-dark);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding: 0 40px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    .nav-announce-text {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--off-white);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav-announce-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--white);
      border-bottom: 1px solid rgba(255,255,255,0.4);
      padding-bottom: 1px;
      white-space: nowrap;
      flex-shrink: 0;
      transition: border-color 160ms ease;
    }

    .nav-announce-link:hover { border-color: var(--white); }

    /* Announcement bar on mobile: stack text + link vertically and shrink the
       font so the long digest message fits. Matches condition-page style.css. */
    @media (max-width: 768px) {
      .nav-announce {
        height: auto;
        min-height: 32px;
        padding: 6px 16px;
        flex-direction: column;
        gap: 4px;
        text-align: center;
      }
      .nav-announce-text {
        font-size: 0.58rem;
        white-space: normal;
      }
    }

    /* ── Main nav ─────────────────────────────── */
    .nav {
      background: var(--slate-dark);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 0 40px;
    }

    /* When announcement bar is present, nav sticks below it */
    .nav-announce + .nav { top: 0; }

    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
    }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      text-decoration: none;
      color: var(--white);
      transition: opacity 0.18s;
    }
    .nav-logo:hover { opacity: 0.82; }
    .nav-logo:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 2px; }
    .nav-logo-mark { height: 46px; width: 46px; display: block; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
    .nav-logo-text { display: flex; flex-direction: column; gap: 1px; }
    .nav-logo-top { font-family: 'Playfair Display', serif; font-size: 0.92rem; font-weight: 700; color: var(--white); line-height: 1.1; letter-spacing: 0.01em; }
    .nav-logo-bottom { font-family: 'Playfair Display', serif; font-size: 0.72rem; font-weight: 400; font-style: italic; color: rgba(255,255,255,0.72); letter-spacing: 0.04em; line-height: 1; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none;
    }

    .nav-links a {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      padding: 6px 10px;
      border-radius: 4px;
      transition: color 160ms ease, background 160ms ease;
      white-space: nowrap;
      display: block;
    }

    .nav-links a:hover {
      color: var(--white);
      background: rgba(255,255,255,0.07);
    }

    /* "Find a Therapist" — solid white pill, high contrast */
    .nav-cta {
      background: var(--white) !important;
      color: var(--dark) !important;
      padding: 9px 18px !important;
      border-radius: 4px !important;
      font-weight: 500 !important;
      letter-spacing: 0.05em !important;
      transition: opacity 160ms ease, transform 160ms ease !important;
      min-height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
    }

    .nav-cta:hover {
      opacity: 0.9 !important;
      transform: translateY(-1px) !important;
      background: var(--white) !important;
      color: var(--dark) !important;
    }

    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 8px;
      touch-action: manipulation;
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
    }

    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--white);
      border-radius: 1px;
      transition: transform 260ms ease, opacity 220ms ease;
    }

    .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* Dropdowns */
    .nav-item { position: relative; list-style: none; }
    .nav-trigger {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      padding: 6px 10px;
      border-radius: 4px;
      background: none;
      border: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      transition: color 160ms ease, background 160ms ease;
    }
    .nav-trigger:hover,
    .nav-item--open .nav-trigger {
      color: var(--white);
      background: rgba(255,255,255,0.07);
    }
    .nav-chevron { width: 9px; height: 9px; transition: transform 200ms ease; }
    .nav-item--open .nav-chevron { transform: rotate(180deg); }
    .nav-dropdown {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      background: var(--dark);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 8px;
      min-width: 220px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.32);
      display: none;
      z-index: 1001;
    }
    .nav-item--open .nav-dropdown { display: block; }
    .nav-dropdown a {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      font-weight: 400;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      padding: 9px 12px;
      border-radius: 4px;
      white-space: nowrap;
      transition: color 160ms ease, background 160ms ease;
    }
    .nav-dropdown a:hover { color: var(--white); background: rgba(255,255,255,0.07); }
    .nav-dropdown--mega {
      display: none;
      grid-auto-flow: column;
      grid-auto-columns: minmax(160px, 1fr);
      gap: 8px 16px;
      min-width: 460px;
      padding: 14px;
    }
    .nav-item--open .nav-dropdown--mega { display: grid; }
    .nav-dropdown-col { display: flex; flex-direction: column; gap: 1px; }
    .nav-dropdown-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      padding: 6px 12px 8px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      margin-bottom: 4px;
    }

    /* =============================================
       HERO — compact, photo-ready
       ============================================= */
    .hero {
      background: var(--slate);
      position: relative;
      overflow: hidden;
      padding: 80px 40px 88px;
      /* Photo support: when you add a real photo, set:
         background-image: url('../images/hero-drama-therapy.jpg');
         background-size: cover; background-position: center;
         Then uncomment the .hero-overlay below. */
    }

    /* Uncomment this when a real hero photo is added:
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(58,65,86,0.72);
    } */

    .hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .hero-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    .hero-eyebrow {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted-white);
      display: block;
      margin-bottom: 22px;
    }

    .hero-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(2.6rem, 4.5vw, 4.4rem);
      font-weight: 700;
      line-height: 1.08;
      color: var(--white);
      letter-spacing: -0.01em;
      margin-bottom: 24px;
    }

    .hero-title em { font-style: italic; }

    .hero-body {
      font-family: 'Source Serif 4', serif;
      font-size: 1rem;
      line-height: 1.75;
      color: var(--off-white);
      max-width: 420px;
      font-weight: 300;
      margin-bottom: 36px;
    }

    .hero-ctas {
      display: flex;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
    }

    /* Primary CTA: solid white pill */
    .cta-solid {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--white);
      color: var(--slate-dark);
      padding: 13px 24px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 180ms ease, transform 180ms ease;
      min-height: 44px;
      touch-action: manipulation;
      white-space: nowrap;
    }
    .cta-solid:hover { opacity: 0.88; transform: translateY(-1px); }
    .cta-solid:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

    /* Secondary CTA: text with underline */
    .cta-text {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--off-white);
      border-bottom: 1px solid rgba(255,255,255,0.3);
      padding-bottom: 2px;
      cursor: pointer;
      transition: color 160ms ease, border-color 160ms ease;
      min-height: 44px;
      touch-action: manipulation;
    }
    .cta-text:hover { color: var(--white); border-color: rgba(255,255,255,0.6); }

    /* Hero right: photo placeholder */
    .hero-photo {
      aspect-ratio: 4/3;
      background: var(--slate-mid);
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
    }

    .hero-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* =============================================
       PHOTO PLACEHOLDER (visible until real photos added)
       ============================================= */
    .photo-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 20px;
      text-align: center;
    }

    .photo-placeholder svg {
      opacity: 0.3;
    }

    .photo-placeholder-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0.45;
      line-height: 1.5;
    }

    /* =============================================
       START HERE — 4 audience cards
       ============================================= */
    .start-here {
      background: var(--surface);
      padding: 80px 40px 88px;
    }

    .start-here-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-header {
      text-align: center;
      max-width: 560px;
      margin: 0 auto 56px;
    }

    .eyebrow {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      display: block;
      margin-bottom: 14px;
    }

    .section-heading {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 700;
      color: var(--text);
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin-bottom: 14px;
    }

    .section-sub {
      font-family: 'Source Serif 4', serif;
      font-size: 1rem;
      color: var(--text-muted);
      line-height: 1.7;
      font-weight: 300;
    }

    /* 2×2 grid */
    .audience-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    /* Individual card */
    .audience-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-card);
      transition: box-shadow 220ms ease, transform 220ms ease;
    }

    .audience-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-3px);
    }

    /* Card photo area — aspect-ratio reserves space (prevents CLS) */
    .card-photo {
      aspect-ratio: 16/9;
      position: relative;
      overflow: hidden;
      margin: 0;
    }

    .card-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 280ms ease;
    }

    .audience-card:hover .card-photo img { transform: scale(1.03); }

    /* Photo accent colours per audience (visible while placeholder is shown) */
    .photo-mauve  { background: var(--mauve-pale); }
    .photo-powder { background: var(--powder-pale); }
    .photo-sage   { background: var(--sage-pale); }
    .photo-sand   { background: var(--sand-pale); }

    /* Colour accent bar at top of card */
    .card-accent {
      height: 4px;
      width: 100%;
    }
    .accent-mauve  { background: var(--mauve); }
    .accent-powder { background: var(--powder); }
    .accent-sage   { background: var(--sage-muted); }
    .accent-sand   { background: var(--sand); }

    /* Card body */
    .card-body {
      padding: 28px 28px 32px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .card-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 10px;
    }

    .card-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.45rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }

    .card-desc {
      font-family: 'Source Serif 4', serif;
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 20px;
      font-weight: 300;
    }

    /* Divider */
    .card-rule {
      width: 100%;
      height: 1px;
      background: var(--border);
      margin-bottom: 18px;
    }

    /* Specific links within card */
    .card-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 24px;
    }

    .card-links li a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: 'Source Serif 4', serif;
      font-size: 0.88rem;
      color: var(--text-muted);
      transition: color 160ms ease;
    }

    .card-links li a:hover { color: var(--text); }

    .card-links li a svg {
      flex-shrink: 0;
      transition: transform 160ms ease;
    }

    .card-links li a:hover svg { transform: translateX(3px); }

    /* Primary CTA per card — full width, sits at bottom of card */
    .card-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 20px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 160ms ease, transform 160ms ease;
      margin-top: auto;
      min-height: 44px; /* touch target */
      touch-action: manipulation;
      text-align: center;
    }

    .card-cta:hover { opacity: 0.84; transform: translateY(-1px); }
    .card-cta:focus-visible { outline: 2px solid var(--slate-dark); outline-offset: 2px; }

    /* CTA colour variants */
    .cta-mauve  { background: var(--mauve);    color: var(--text); }
    .cta-powder { background: var(--powder);   color: var(--text); }
    .cta-sage   { background: var(--sage-muted); color: var(--text); }
    .cta-sand   { background: var(--sand);     color: var(--text); }

    /* =============================================
       TRUST STRIP
       ============================================= */
    .trust-strip {
      background: var(--slate-mid);
      padding: 56px 40px;
    }

    .trust-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      text-align: center;
    }

    .trust-item {}

    .trust-number {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--white);
      line-height: 1;
      display: block;
      margin-bottom: 8px;
    }

    .trust-label {
      font-family: 'Source Serif 4', serif;
      font-size: 0.82rem;
      color: var(--off-white);
      line-height: 1.5;
      font-weight: 300;
    }

    /* =============================================
       FEATURED RESOURCES
       ============================================= */
    .resources {
      background: var(--surface-alt);
      padding: 80px 40px;
    }

    .resources-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .resources-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 40px;
      gap: 16px;
      flex-wrap: wrap;
    }

    .resources-header .section-heading { margin-bottom: 0; }

    .all-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      border-bottom: 1px solid rgba(60,65,86,0.25);
      padding-bottom: 2px;
      cursor: pointer;
      transition: color 160ms ease, border-color 160ms ease;
      white-space: nowrap;
    }

    .all-link:hover { color: var(--text); border-color: var(--text); }

    .resources-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .resource-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 28px 32px;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-card);
      transition: box-shadow 220ms ease, transform 220ms ease;
      cursor: pointer;
    }

    .resource-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-3px);
    }

    .resource-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 12px;
      display: block;
    }

    .resource-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
      margin-bottom: 12px;
    }

    .resource-desc {
      font-family: 'Source Serif 4', serif;
      font-size: 0.85rem;
      line-height: 1.65;
      color: var(--text-muted);
      flex: 1;
      margin-bottom: 20px;
      font-weight: 300;
    }

    .resource-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--slate-dark);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: auto;
    }

    .resource-card:hover .resource-link svg { transform: translateX(3px); }
    .resource-link svg { transition: transform 160ms ease; }

    /* =============================================
       NEWSLETTER
       ============================================= */
    .newsletter {
      background: var(--slate);
      padding: 88px 40px;
      text-align: center;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .newsletter .eyebrow { color: var(--muted-white); margin-bottom: 16px; display: inline-block; }

    .newsletter h2 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.8rem, 3vw, 3rem);
      font-weight: 700;
      color: var(--white);
      line-height: 1.1;
      letter-spacing: -0.01em;
      max-width: 520px;
      margin: 0 auto 14px;
    }

    .newsletter p {
      font-family: 'Source Serif 4', serif;
      font-size: 0.92rem;
      color: var(--off-white);
      max-width: 480px;
      margin: 0 auto 28px;
      line-height: 1.7;
      font-weight: 300;
    }

    .newsletter-preview {
      list-style: none;
      max-width: 540px;
      margin: 0 auto 36px;
      padding: 22px 28px;
      background: rgba(255,255,255,0.04);
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      text-align: left;
    }
    .newsletter-preview li {
      font-family: 'Source Serif 4', serif;
      font-size: 0.9rem;
      color: var(--off-white);
      line-height: 1.6;
      padding: 7px 0;
      padding-left: 22px;
      position: relative;
    }
    .newsletter-preview li::before {
      content: "·";
      position: absolute;
      left: 0;
      color: rgba(255,255,255,0.4);
    }
    .newsletter-preview li strong {
      color: var(--white);
      font-weight: 600;
    }

    .newsletter-form {
      display: flex;
      max-width: 420px;
      margin: 0 auto;
      border: 1px solid rgba(255,255,255,0.25);
    }

    .newsletter-embed {
      max-width: 420px;
      width: 100%;
      margin: 0 auto;
      min-height: 56px;
    }

    .newsletter-form input {
      flex: 1;
      padding: 13px 18px;
      background: transparent;
      border: none;
      font-family: 'Source Serif 4', serif;
      font-size: 0.9rem;
      color: var(--white);
      outline: none;
      min-width: 0;
    }

    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }

    .newsletter-form input:focus { background: rgba(255,255,255,0.06); }

    .newsletter-form button {
      padding: 13px 20px;
      background: var(--white);
      color: var(--dark);
      border: none;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 160ms ease;
      white-space: nowrap;
      min-height: 44px;
      touch-action: manipulation;
    }

    .newsletter-form button:hover { opacity: 0.86; }

    .newsletter-form button:focus-visible {
      outline: 2px solid var(--dark);
      outline-offset: -2px;
    }

    .newsletter-note {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.06em;
      color: var(--muted-white);
      margin-top: 12px;
    }

    /* =============================================
       FOOTER
       ============================================= */
    .footer {
      background: var(--dark);
      padding: 64px 40px 36px;
      color: rgba(255,255,255,0.48);
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
      gap: 36px;
      padding-bottom: 36px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      margin-bottom: 20px;
    }
    .footer-tip {
      text-align: center;
      padding: 4px 0 24px;
    }
    .footer-tip p {
      font-family: 'Source Serif 4', serif;
      font-size: 0.9rem;
      font-style: italic;
      color: rgba(255,255,255,0.55);
    }
    .footer-tip a {
      color: rgba(255,255,255,0.85);
      font-style: normal;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      transition: border-color 0.2s, color 0.2s;
    }
    .footer-tip a:hover {
      color: #fff;
      border-color: #fff;
    }

    .footer-brand-name {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      margin-bottom: 12px;
      display: block;
    }

    .footer-brand-desc {
      font-family: 'Source Serif 4', serif;
      font-size: 0.8rem;
      line-height: 1.65;
      max-width: 240px;
      font-weight: 300;
    }

    .footer-col h4 {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.38);
      margin-bottom: 16px;
      font-weight: 400;
    }

    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 9px; }

    .footer-col a {
      font-family: 'Source Serif 4', serif;
      font-size: 0.8rem;
      color: rgba(255,255,255,0.48);
      transition: color 160ms ease;
      font-weight: 300;
    }

    .footer-col a:hover { color: rgba(255,255,255,0.86); }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.07em;
      color: rgba(255,255,255,0.28);
      flex-wrap: wrap;
      gap: 12px;
    }

    .footer-bottom-links { display: flex; gap: 22px; }

    .footer-bottom-links a {
      color: rgba(255,255,255,0.28);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.07em;
      transition: color 160ms ease;
    }

    .footer-bottom-links a:hover { color: rgba(255,255,255,0.68); }

    /* =============================================
       RESPONSIVE — 768px (tablet)
       ============================================= */
    @media (max-width: 900px) {
      .nav { padding: 0 24px; }

      /* Mobile nav: full-width top dropdown — matches condition pages (css/style.css). */
      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--slate-dark);
        flex-direction: column;
        gap: 0;
        padding: 8px 0 16px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        z-index: 999;
      }

      .nav-links.open { display: flex; }

      .nav-links li { width: 100%; }

      .nav-links a {
        display: block;
        padding: 12px 24px;
        font-size: 0.8rem;
      }

      /* Find-a-therapist CTA in mobile menu: full-width centered pill. */
      .nav-links .nav-cta {
        margin: 8px 24px 0 !important;
        text-align: center;
        border-radius: 4px !important;
        padding: 10px 20px !important;
        justify-content: center !important;
      }

      .nav-item { width: 100%; }
      .nav-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 12px 24px;
        font-size: 0.8rem;
        border-radius: 0;
      }
      .nav-dropdown,
      .nav-dropdown--mega {
        position: static;
        border: 0;
        border-radius: 0;
        padding: 0 0 8px;
        box-shadow: none;
        background: rgba(0,0,0,0.2);
        min-width: 0;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-auto-columns: auto;
      }
      .nav-dropdown a {
        padding: 10px 24px 10px 40px;
        font-size: 0.72rem;
        white-space: normal;
      }
      .nav-dropdown-label {
        padding: 14px 24px 8px 40px;
        margin-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.12);
        border-bottom: 0;
        margin-bottom: 0;
        font-size: 0.68rem;
        color: rgba(255,255,255,0.78);
      }

      /* First section label inside a mega-dropdown skips the top divider. */
      .nav-dropdown--mega .nav-dropdown-col:first-child .nav-dropdown-label {
        border-top: 0;
        margin-top: 0;
      }

      .nav-hamburger { display: flex; }

      /* Hero: stack */
      .hero { padding: 56px 24px 64px; }
      .hero-layout { grid-template-columns: 1fr; gap: 36px; }
      .hero-title { font-size: clamp(2.4rem, 7vw, 3.2rem); }
      .hero-body { max-width: 100%; }
      .hero-photo { aspect-ratio: 16/9; }

      /* Audience grid: stack to 1 column */
      .start-here { padding: 60px 24px 72px; }
      .audience-grid { grid-template-columns: 1fr; gap: 20px; }
      .card-photo { aspect-ratio: 16/9; }

      /* Trust */
      .trust-strip { padding: 48px 24px; }
      .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }

      /* Resources */
      .resources { padding: 60px 24px; }
      .resources-grid { grid-template-columns: 1fr; gap: 16px; }

      /* Newsletter */
      .newsletter { padding: 64px 24px; }
      .newsletter-form {
        flex-direction: column;
        border: none;
        gap: 0;
      }
      .newsletter-form input {
        border: 1px solid rgba(255,255,255,0.25);
        padding: 13px 16px;
      }
      .newsletter-form button { padding: 13px 16px; }

      /* Footer — extra bottom padding leaves room for the floating
         Tip-the-editor and Find-a-therapist FABs (mobile only). */
      .footer { padding: 48px 24px 140px; }
      .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .footer-bottom-links { flex-wrap: wrap; row-gap: 10px; }
    }

    @media (max-width: 480px) {
      .hero-ctas { flex-direction: column; align-items: flex-start; gap: 14px; }
      .trust-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
      .footer-top { grid-template-columns: 1fr; }
      .resources-header { flex-direction: column; align-items: flex-start; }
    }

    /* =============================================
       DIGITAL AGE BANNER
       ============================================= */
    .digital-age {
      background: var(--dark);
      padding: 72px 40px;
      position: relative;
      overflow: hidden;
    }

    .digital-age::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 59px,
        rgba(255,255,255,0.025) 59px,
        rgba(255,255,255,0.025) 60px
      );
      pointer-events: none;
    }

    .digital-age-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .digital-age-left {}

    .digital-age-stat {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 32px;
    }

    .da-number {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(4rem, 8vw, 7rem);
      font-weight: 700;
      color: var(--white);
      line-height: 0.9;
      letter-spacing: -0.03em;
    }

    .da-unit {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted-white);
    }

    .digital-age-right h2 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.5rem, 2.5vw, 2.1rem);
      font-weight: 700;
      color: var(--white);
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 18px;
    }

    .digital-age-right h2 em {
      font-style: italic;
      color: var(--off-white);
    }

    .digital-age-right p {
      font-family: 'Source Serif 4', serif;
      font-size: 0.96rem;
      color: var(--off-white);
      line-height: 1.75;
      font-weight: 300;
      margin-bottom: 28px;
      max-width: 500px;
    }

    .da-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--white);
      color: var(--dark);
      padding: 14px 26px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      min-height: 48px;
      touch-action: manipulation;
      text-decoration: none;
      transition: opacity 160ms ease, transform 160ms ease;
    }

    .da-cta:hover { opacity: 0.88; transform: translateY(-1px); }
    .da-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

    @media (max-width: 900px) {
      .digital-age { padding: 56px 24px; }
      .digital-age-inner { grid-template-columns: 1fr; gap: 32px; }
      .da-number { font-size: clamp(4rem, 16vw, 6rem); }
    }

    /* =============================================
       POPULATIONS — editorial grid
       ============================================= */
    .populations {
      background: var(--surface);
      padding: 88px 40px;
    }

    .populations-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Grid: children | TEENS (tall) | adults
                couples             seniors       */
    .pop-grid {
      display: grid;
      grid-template-columns: 1fr 1.55fr 1fr;
      grid-template-rows: auto auto;
      gap: 16px;
      margin-top: 48px;
    }

    .pop-tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-card);
      transition: box-shadow 240ms ease, transform 240ms ease;
      text-decoration: none;
      color: var(--text);
      position: relative;
    }

    .pop-tile:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-4px);
    }

    /* Regular tiles — top photo + body */
    .pop-photo {
      aspect-ratio: 4/3;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    .pop-photo img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 340ms ease;
    }

    .pop-tile:hover .pop-photo img { transform: scale(1.04); }

    .pop-body {
      padding: 20px 22px 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .pop-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .pop-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      margin-bottom: 8px;
    }

    .pop-desc {
      font-family: 'Source Serif 4', serif;
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.65;
      font-weight: 300;
      flex: 1;
      margin-bottom: 16px;
    }

    .pop-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--slate-dark);
      border-bottom: 1px solid rgba(58,65,86,0.22);
      padding-bottom: 1px;
      margin-top: auto;
      width: fit-content;
      transition: color 160ms ease, border-color 160ms ease;
    }

    .pop-tile:hover .pop-cta { color: var(--slate); border-color: var(--slate); }
    .pop-cta svg { transition: transform 160ms ease; }
    .pop-tile:hover .pop-cta svg { transform: translateX(3px); }

    /* ── TEENS FEATURED TILE ──────────────────── */
    .pop-tile--featured {
      grid-column: 2;
      grid-row: 1 / 3;
      background: var(--slate-dark);
      border-color: transparent;
      color: var(--white);
    }

    .pop-tile--featured:hover {
      box-shadow: 0 12px 48px rgba(26,28,32,0.28);
      transform: translateY(-5px);
    }

    .featured-photo {
      aspect-ratio: 4/3;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      background: #2A3047;
    }

    .featured-photo img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 340ms ease;
    }

    .pop-tile--featured:hover .featured-photo img { transform: scale(1.04); }

    /* Dice/RPG decorative pattern overlay */
    .featured-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(42,48,71,0.1) 0%,
        rgba(42,48,71,0.5) 70%,
        rgba(42,48,71,0.85) 100%
      );
      z-index: 1;
    }

    .featured-photo-label {
      position: absolute;
      bottom: 16px;
      left: 20px;
      right: 20px;
      z-index: 2;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }

    .featured-body {
      padding: 24px 28px 32px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .featured-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted-white);
      margin-bottom: 10px;
    }

    .featured-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      font-weight: 700;
      color: var(--white);
      line-height: 1.1;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }

    .featured-subtitle {
      font-family: 'Source Serif 4', serif;
      font-size: 0.88rem;
      font-style: italic;
      color: var(--off-white);
      margin-bottom: 18px;
      line-height: 1.5;
    }

    .featured-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 18px;
    }

    .featured-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      border: 1px solid rgba(255,255,255,0.15);
      padding: 4px 10px;
      border-radius: 100px;
    }

    .featured-desc {
      font-family: 'Source Serif 4', serif;
      font-size: 0.88rem;
      color: var(--off-white);
      line-height: 1.7;
      font-weight: 300;
      flex: 1;
      margin-bottom: 24px;
    }

    .featured-rule {
      width: 100%;
      height: 1px;
      background: rgba(255,255,255,0.1);
      margin-bottom: 20px;
    }

    .featured-why {
      font-family: 'Source Serif 4', serif;
      font-size: 0.82rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.65;
      font-weight: 300;
      margin-bottom: 24px;
    }

    .featured-why strong {
      color: rgba(255,255,255,0.78);
      font-weight: 400;
    }

    .featured-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,0.12);
      color: var(--white);
      border: 1px solid rgba(255,255,255,0.2);
      padding: 13px 20px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      min-height: 48px;
      touch-action: manipulation;
      transition: background 180ms ease, border-color 180ms ease;
      width: 100%;
      justify-content: center;
    }

    .pop-tile--featured:hover .featured-cta {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.35);
    }

    /* Grid placement — Adults is featured center, Teens top-right */
    .pop-tile--children { grid-column: 1; grid-row: 1; }
    .pop-tile--teens    { grid-column: 3; grid-row: 1; }
    .pop-tile--couples  { grid-column: 1; grid-row: 2; }
    .pop-tile--seniors  { grid-column: 3; grid-row: 2; }

    /* Tablet: featured full-width top, others 2-col below */
    @media (max-width: 1000px) {
      .pop-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      }
      .pop-tile--featured { grid-column: 1 / 3; grid-row: 1; }
      .pop-tile--children { grid-column: 1; grid-row: 2; }
      .pop-tile--teens    { grid-column: 2; grid-row: 2; }
      .pop-tile--couples  { grid-column: 1; grid-row: 3; }
      .pop-tile--seniors  { grid-column: 2; grid-row: 3; }
      .featured-photo { aspect-ratio: 16/9; }
    }

    @media (max-width: 900px) {
      .populations { padding: 60px 24px; }
    }

    @media (max-width: 600px) {
      .pop-grid { grid-template-columns: 1fr; }
      .pop-tile--featured { grid-column: 1; }
      .pop-tile--children { grid-column: 1; grid-row: auto; }
      .pop-tile--teens    { grid-column: 1; grid-row: auto; }
      .pop-tile--couples  { grid-column: 1; grid-row: auto; }
      .pop-tile--seniors  { grid-column: 1; grid-row: auto; }
    }

    /* =============================================
       HOOK CALLOUT BOX
       ============================================= */
    .hook-box {
      background: var(--surface-tint);
      border: 1px solid var(--border);
      border-left: 3px solid var(--slate);
      border-radius: var(--radius);
      padding: 28px 32px;
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
      margin: 48px 0 0;
    }

    .hook-box--dark {
      background: var(--slate-dark);
      border: none;
      border-left: 3px solid var(--mauve);
    }

    .hook-box-icon { flex-shrink: 0; }

    .hook-box-text {
      flex: 1;
      min-width: 220px;
    }

    .hook-box-text strong {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.05rem;
      font-weight: 700;
      display: block;
      color: var(--text);
      margin-bottom: 4px;
    }

    .hook-box--dark .hook-box-text strong { color: var(--white); }

    .hook-box-text p {
      font-family: 'Source Serif 4', serif;
      font-size: 0.85rem;
      color: var(--text-muted);
      font-weight: 300;
      line-height: 1.6;
      margin: 0;
    }

    .hook-box--dark .hook-box-text p { color: rgba(255,255,255,0.6); }

    /* ── Affiliate CTA buttons ────────────────── */
    .aff-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 14px 24px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      text-decoration: none;
      min-height: 52px;
      touch-action: manipulation;
      white-space: nowrap;
      flex-shrink: 0;
      transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
      cursor: pointer;
    }

    .aff-btn:hover { opacity: 0.88; transform: translateY(-1px); }
    .aff-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

    .aff-btn--dark  { background: var(--dark); color: var(--white); }
    .aff-btn--white { background: var(--white); color: var(--dark); }
    .aff-btn--peach { background: var(--peach); color: var(--white); }
    .aff-btn--slate { background: var(--slate-dark); color: var(--white); }
    .aff-btn--green {
      background: #1A7F4B;
      color: var(--white);
    }
    .aff-btn--green:hover { background: #15683e; opacity: 1; }
    .aff-btn--purple {
      background: #5B4FCF;
      color: var(--white);
    }
    .aff-btn--purple:hover { background: #4a3faa; opacity: 1; }

    /* Affiliate trust badge (sits below button) */
    .aff-trust {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-top: 6px;
      display: block;
      text-align: center;
    }

    .hook-box--dark .aff-trust { color: var(--muted-white); }

    /* Affiliate card — structured callout */
    .aff-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 28px 24px;
      display: flex;
      flex-direction: column;
      gap: 0;
      box-shadow: var(--shadow-card);
    }

    .aff-card-top {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 14px;
    }

    .aff-card-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .aff-card-meta { flex: 1; }

    .aff-card-name {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      display: block;
      margin-bottom: 3px;
    }

    .aff-card-type {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .aff-card p {
      font-family: 'Source Serif 4', serif;
      font-size: 0.84rem;
      color: var(--text-muted);
      line-height: 1.65;
      font-weight: 300;
      flex: 1;
      margin-bottom: 20px;
    }

    .aff-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .aff-card-price {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.07em;
      color: var(--text-muted);
    }

    /* Mid-page affiliate callout */
    .affiliate-callout {
      background: linear-gradient(135deg, var(--sand-pale) 0%, var(--mauve-pale) 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px 36px;
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
      margin: 40px 0 0;
    }

    .affiliate-callout-text { flex: 1; min-width: 240px; }

    .affiliate-callout-text .eyebrow {
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .affiliate-callout-text h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .affiliate-callout-text p {
      font-family: 'Source Serif 4', serif;
      font-size: 0.85rem;
      color: var(--text-muted);
      font-weight: 300;
      line-height: 1.6;
      margin: 0;
    }

    /* Legacy alias kept for existing usage */
    .btn-peach { }

    @media (max-width: 900px) {
      .hook-box { padding: 22px 24px; }
      .affiliate-callout { padding: 24px; }
      .aff-card { padding: 22px; }
    }

    /* =============================================
       SCROLL-IN REVEAL ANIMATION
       ============================================= */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.55s ease, transform 0.55s ease;
    }

    .reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: 0.08s; }
    .reveal-delay-2 { transition-delay: 0.16s; }
    .reveal-delay-3 { transition-delay: 0.24s; }
    .reveal-delay-4 { transition-delay: 0.32s; }
    .reveal-delay-5 { transition-delay: 0.40s; }
    .reveal-delay-6 { transition-delay: 0.48s; }
    .reveal-delay-7 { transition-delay: 0.56s; }
    .reveal-delay-8 { transition-delay: 0.64s; }
    .reveal-delay-9 { transition-delay: 0.72s; }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
    }

    /* =============================================
       CONDITIONS GRID — 9 icon tiles
       ============================================= */
    .conditions {
      background: var(--surface-alt);
      padding: 80px 40px;
    }

    .conditions-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .conditions-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
    }

    .condition-tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 24px 24px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      text-decoration: none;
      color: var(--text);
      box-shadow: var(--shadow-card);
      transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
    }

    .condition-tile:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-3px);
      border-color: rgba(92,100,120,0.22);
    }

    .condition-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .condition-tile h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.25;
      margin: 0;
    }

    .condition-tile p {
      font-family: 'Source Serif 4', serif;
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.6;
      font-weight: 300;
      margin: 0;
    }

    .condition-arrow {
      margin-top: auto;
      padding-top: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--slate-dark);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .condition-tile:hover .condition-arrow svg { transform: translateX(3px); }
    .condition-arrow svg { transition: transform 160ms ease; }

    @media (max-width: 900px) {
      .conditions { padding: 60px 24px; }
      .conditions-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    }

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

    /* =============================================
       WHY DRAMA THERAPY — numbered highlights
       ============================================= */
    .why-dt {
      background: var(--surface);
      padding: 88px 40px;
    }

    .why-dt-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .why-dt-blocks {
      display: flex;
      flex-direction: column;
      gap: 64px;
      margin-top: 56px;
    }

    .why-block {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
    }

    .why-block.reverse { direction: rtl; }
    .why-block.reverse > * { direction: ltr; }

    .why-block-visual {
      aspect-ratio: 4/3;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
    }

    .why-block-visual img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .why-block-text {}

    .why-number {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 4.5rem;
      font-weight: 700;
      line-height: 1;
      color: var(--border);
      display: block;
      margin-bottom: 16px;
      letter-spacing: -0.03em;
    }

    .why-block-text h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      margin-bottom: 16px;
      letter-spacing: -0.01em;
    }

    .why-block-text p {
      font-family: 'Source Serif 4', serif;
      font-size: 0.96rem;
      color: var(--text-muted);
      line-height: 1.75;
      font-weight: 300;
      max-width: 460px;
      margin-bottom: 24px;
    }

    .why-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--slate-dark);
      border-bottom: 1px solid rgba(58,65,86,0.3);
      padding-bottom: 2px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color 160ms ease, border-color 160ms ease;
    }

    .why-link:hover { color: var(--slate); border-color: var(--slate); }
    .why-link svg { transition: transform 160ms ease; }
    .why-link:hover svg { transform: translateX(3px); }

    @media (max-width: 900px) {
      .why-dt { padding: 60px 24px; }
      .why-block { grid-template-columns: 1fr; gap: 32px; }
      .why-block.reverse { direction: ltr; }
      .why-block-visual { aspect-ratio: 16/9; }
      .why-number { font-size: 3.5rem; }
    }

    /* =============================================
       TESTIMONIALS — CSS auto-advance carousel
       ============================================= */
    .testimonials {
      background: var(--slate-dark);
      padding: 80px 40px;
      overflow: hidden;
    }

    .testimonials-inner {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }

    .testimonials-inner .eyebrow { color: var(--muted-white); }

    .testimonials-inner .section-heading {
      color: var(--white);
      margin-bottom: 48px;
    }

    .quotes-track {
      position: relative;
      min-height: 220px;
    }

    .quote-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.6s ease, transform 0.6s ease;
      pointer-events: none;
    }

    .quote-slide.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      position: relative;
    }

    blockquote.quote-text {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.15rem, 2.2vw, 1.5rem);
      font-weight: 400;
      font-style: italic;
      color: var(--white);
      line-height: 1.55;
      margin: 0 0 24px;
      letter-spacing: -0.005em;
    }

    .quote-attribution {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted-white);
    }

    .quotes-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 36px;
    }

    .quote-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,0.25);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 220ms ease, transform 220ms ease;
    }

    .quote-dot.active {
      background: var(--white);
      transform: scale(1.3);
    }

    @media (max-width: 900px) {
      .testimonials { padding: 60px 24px; }
      .quotes-track { min-height: 260px; }
    }

    /* =============================================
       STICKY FAB — floating CTA
       ============================================= */
    .sticky-fab {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 800;
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--slate-dark);
      color: var(--white);
      padding: 14px 20px;
      border-radius: 50px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: 0 4px 20px rgba(26,28,32,0.28);
      text-decoration: none;
      min-height: 48px;
      touch-action: manipulation;
      opacity: 0;
      transform: translateY(16px);
      pointer-events: none;
      transition: opacity 300ms ease, transform 300ms ease, background 160ms ease;
    }

    .sticky-fab.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .sticky-fab:hover { background: var(--dark); }
    .sticky-fab:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

    @media (max-width: 480px) {
      .sticky-fab { bottom: 20px; right: 16px; left: 16px; justify-content: center; border-radius: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sticky-fab { transition: opacity 0.01ms; }
    }

    /* =============================================
       VISUAL COMPONENT LIBRARY
       Reusable across the site. No image dependency.
       ============================================= */

    /* ── Section scaffold shared by new components ── */
    .vc-section { padding: 96px 40px; background: var(--surface); }
    .vc-section--alt { background: var(--surface-alt); }
    .vc-inner { max-width: 1100px; margin: 0 auto; }

    /* ── Comparison table ── */
    .compare-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-card);
      margin-top: 36px;
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      font-family: 'Source Serif 4', Georgia, serif;
    }
    .compare-table thead th {
      text-align: left;
      padding: 24px 28px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      background: var(--surface-tint);
      border-bottom: 1px solid var(--border);
    }
    .compare-table thead th:first-child { width: 22%; }
    .compare-table thead th.th-highlight {
      color: var(--dark);
      background: #E8E4DC;
    }
    .compare-table tbody th {
      text-align: left;
      padding: 22px 28px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--text-muted);
      vertical-align: top;
      background: var(--surface-alt);
      border-bottom: 1px solid var(--border);
    }
    .compare-table tbody td {
      padding: 22px 28px;
      font-size: 1rem;
      line-height: 1.6;
      color: var(--text);
      vertical-align: top;
      border-bottom: 1px solid var(--border);
      border-left: 1px solid var(--border);
    }
    .compare-table tbody td.td-highlight {
      background: #FAF7F1;
    }
    .compare-table tbody tr:last-child th,
    .compare-table tbody tr:last-child td { border-bottom: none; }

    @media (max-width: 720px) {
      .compare-table thead { display: none; }
      .compare-table, .compare-table tbody, .compare-table tr,
      .compare-table th, .compare-table td { display: block; width: 100%; }
      .compare-table tbody tr {
        border-bottom: 1px solid var(--border);
        padding: 18px 22px;
      }
      .compare-table tbody tr:last-child { border-bottom: none; }
      .compare-table tbody th {
        background: transparent;
        padding: 0 0 8px 0;
        border: none;
      }
      .compare-table tbody td {
        border: none;
        padding: 0 0 14px 0;
        font-size: 0.98rem;
      }
      .compare-table tbody td::before {
        content: attr(data-col);
        display: block;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 4px;
      }
      .compare-table tbody td:last-child { padding-bottom: 0; }
      .compare-table tbody td.td-highlight { background: transparent; }
    }

    /* ── Data table (conditions / techniques / programs) ── */
    .data-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-card);
      margin-top: 40px;
    }
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-family: 'Source Serif 4', Georgia, serif;
    }
    .data-table thead th {
      text-align: left;
      padding: 18px 24px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      background: var(--surface-tint);
      border-bottom: 1px solid var(--border);
      font-weight: 500;
    }
    .data-table tbody td {
      padding: 18px 24px;
      font-size: 0.96rem;
      line-height: 1.55;
      color: var(--text);
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .data-table tbody tr:last-child td { border-bottom: none; }
    .data-table tbody tr { transition: background 0.15s; }
    .data-table tbody tr:hover { background: var(--surface-alt); }
    .data-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 12px;
      vertical-align: middle;
    }
    .data-name {
      font-weight: 600;
      color: var(--dark);
    }
    .data-evidence {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .data-evidence-bar {
      display: inline-block;
      width: 48px;
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
      vertical-align: middle;
    }
    .data-evidence-bar > span {
      display: block;
      height: 100%;
      background: var(--slate);
      border-radius: 3px;
    }
    .data-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--dark);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-bottom: 1px solid transparent;
      transition: border-color 0.15s;
    }
    .data-table tbody tr:hover .data-link { border-bottom-color: var(--dark); }

    @media (max-width: 780px) {
      .data-table thead { display: none; }
      .data-table, .data-table tbody, .data-table tr,
      .data-table td { display: block; width: 100%; }
      .data-table tbody tr {
        padding: 16px 20px;
        border-bottom: 1px solid var(--border);
      }
      .data-table tbody tr:last-child { border-bottom: none; }
      .data-table tbody td {
        border: none;
        padding: 2px 0;
      }
      .data-table tbody td[data-col]::before {
        content: attr(data-col) " · ";
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.65rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .data-table tbody td.data-cell-name::before { display: none; }
      .data-table tbody td.data-cell-link { margin-top: 10px; }
    }

    /* ── Lifespan figure timeline ── */
    .lifespan {
      margin: 48px 0 24px;
      padding: 32px 0 40px;
      position: relative;
    }
    .lifespan-track {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      position: relative;
      max-width: 960px;
      margin: 0 auto;
      align-items: end;
    }
    .lifespan-track::before {
      content: "";
      position: absolute;
      bottom: 52px;
      left: 6%;
      right: 6%;
      height: 2px;
      background: linear-gradient(90deg,
        var(--sand) 0%, var(--slate) 35%,
        var(--sage-muted) 65%, var(--powder) 100%);
      opacity: 0.55;
      z-index: 0;
    }
    .lifespan-node {
      position: relative;
      z-index: 1;
      text-align: center;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .lifespan.in-view .lifespan-node { opacity: 1; transform: translateY(0); }
    .lifespan.in-view .lifespan-node:nth-child(1) { transition-delay: 0.00s; }
    .lifespan.in-view .lifespan-node:nth-child(2) { transition-delay: 0.20s; }
    .lifespan.in-view .lifespan-node:nth-child(3) { transition-delay: 0.40s; }
    .lifespan.in-view .lifespan-node:nth-child(4) { transition-delay: 0.60s; }
    .lifespan-node a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 10px 6px;
      border-radius: 12px;
      transition: background 0.2s, transform 0.2s;
    }
    .lifespan-node a:hover {
      background: var(--surface);
      transform: translateY(-4px);
    }
    .lifespan-figure {
      height: 128px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      color: var(--slate);
    }
    .lifespan-figure svg {
      display: block;
      height: 100%;
      width: auto;
      transition: color 0.2s;
      overflow: visible;
    }
    /* Idle motion per life stage — subtle, continuous */
    @keyframes ls-baby-rock {
      0%, 100% { transform: translateX(0) rotate(0deg); }
      50%      { transform: translateX(4px) rotate(1.5deg); }
    }
    @keyframes ls-child-bounce {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-6px); }
    }
    @keyframes ls-teen-sway {
      0%, 100% { transform: rotate(-1.2deg); }
      50%      { transform: rotate(1.6deg); }
    }
    @keyframes ls-adult-breathe {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.025); }
    }
    @keyframes ls-senior-lean {
      0%, 100% { transform: rotate(-0.8deg); }
      50%      { transform: rotate(0.8deg); }
    }
    .ls-figure-anim { transform-box: fill-box; }
    .ls-baby   { transform-origin: 55% 90%; animation: ls-baby-rock     2.8s ease-in-out infinite; }
    .ls-child  { transform-origin: 50% 100%; animation: ls-child-bounce  1.9s ease-in-out infinite; }
    .ls-teen   { transform-origin: 50% 100%; animation: ls-teen-sway     3.4s ease-in-out infinite; }
    .ls-adult  { transform-origin: 50% 100%; animation: ls-adult-breathe 3.8s ease-in-out infinite; }
    .ls-senior { transform-origin: 40% 100%; animation: ls-senior-lean   4.2s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) {
      .ls-baby, .ls-child, .ls-teen, .ls-adult, .ls-senior { animation: none; }
    }
    .lifespan-node[data-tone="mauve"]  .lifespan-figure { color: var(--mauve); }
    .lifespan-node[data-tone="sand"]   .lifespan-figure { color: var(--sand); }
    .lifespan-node[data-tone="slate"]  .lifespan-figure { color: var(--slate); }
    .lifespan-node[data-tone="sage"]   .lifespan-figure { color: var(--sage-muted); }
    .lifespan-node[data-tone="powder"] .lifespan-figure { color: var(--powder); }
    .lifespan-node a:hover .lifespan-figure { color: var(--dark); }
    .lifespan-dot-mini {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--surface);
      border: 2.5px solid var(--slate);
      box-shadow: 0 0 0 5px var(--surface);
      margin: -8px auto 0;
    }
    .lifespan-node[data-tone="mauve"]  .lifespan-dot-mini { border-color: var(--mauve); }
    .lifespan-node[data-tone="sand"]   .lifespan-dot-mini { border-color: var(--sand); }
    .lifespan-node[data-tone="slate"]  .lifespan-dot-mini { border-color: var(--slate); }
    .lifespan-node[data-tone="sage"]   .lifespan-dot-mini { border-color: var(--sage-muted); }
    .lifespan-node[data-tone="powder"] .lifespan-dot-mini { border-color: var(--powder); }
    .lifespan-label {
      font-family: 'Playfair Display', serif;
      font-size: 1.05rem;
      color: var(--dark);
      line-height: 1.2;
      margin-top: 4px;
    }
    .lifespan-age {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-top: 3px;
    }
    @media (prefers-reduced-motion: reduce) {
      .lifespan-node { transition: none; opacity: 1; transform: none; }
      .lifespan.in-view .lifespan-node { transition-delay: 0s !important; }
    }
    @media (max-width: 780px) {
      .lifespan-track { grid-template-columns: repeat(5, 1fr); gap: 4px; }
      .lifespan-figure { height: 72px; }
      .lifespan-label { font-size: 0.78rem; }
      .lifespan-age { font-size: 0.55rem; }
      .lifespan-track::before { bottom: 40px; left: 8%; right: 8%; }
      .lifespan-node a { padding: 6px 2px; gap: 10px; }
    }

    /* ── Simple conditions icon grid ── */
    .cond-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 2px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      margin-top: 48px;
    }
    @media (max-width: 980px) {
      .cond-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) {
      .cond-grid { grid-template-columns: 1fr; }
    }
    .cond-tile {
      background: var(--surface);
      padding: 28px 26px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: background 0.15s;
      min-height: 92px;
    }
    .cond-tile:hover { background: var(--surface-alt); }
    .cond-tile-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .cond-tile-body { flex: 1; min-width: 0; }
    .cond-tile-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      color: var(--dark);
      line-height: 1.2;
      margin-bottom: 4px;
    }
    .cond-tile-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      transition: color 0.15s;
    }
    .cond-tile:hover .cond-tile-link { color: var(--dark); }

    /* ── Featured photo placeholder (in-section wide image) ── */
    .featured-photo {
      position: relative;
      aspect-ratio: 21/9;
      max-width: 900px;
      margin: 48px auto 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
    }
    @media (max-width: 780px) {
      .featured-photo { aspect-ratio: 4/3; }
    }

    /* ── Callout box (pull-quote / key insight) ── */
    .callout {
      background: var(--surface);
      border-left: 4px solid var(--slate);
      border-radius: 0 12px 12px 0;
      padding: 28px 32px;
      margin: 36px 0;
      box-shadow: var(--shadow-card);
    }
    .callout-eyebrow {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 10px;
      display: block;
    }
    .callout-quote {
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem;
      line-height: 1.4;
      color: var(--dark);
      font-style: italic;
      margin: 0;
    }
    .callout-attribution {
      margin-top: 14px;
      font-size: 0.88rem;
      color: var(--text-muted);
    }

    /* ── Session-arc strip (4-step flow) ── */
    .arc-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin: 32px 0;
    }
    .arc-step {
      background: var(--surface);
      padding: 24px 22px;
      position: relative;
    }
    .arc-step-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      margin-bottom: 10px;
      display: block;
    }
    .arc-step-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.08rem;
      color: var(--dark);
      margin-bottom: 6px;
    }
    .arc-step-desc {
      font-size: 0.9rem;
      line-height: 1.5;
      color: var(--text-muted);
    }
    @media (max-width: 720px) {
      .arc-strip { grid-template-columns: 1fr; }
    }

    /* ── Section header shared ── */
    .vc-section .section-header { text-align: center; margin-bottom: 12px; }
    .vc-section .section-sub { max-width: 640px; margin: 12px auto 0; color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; }

    /* ── Educational disclaimer (YMYL footer notice) ── */
    .educational-disclaimer {
      max-width: 680px;
      margin: 64px auto 40px;
      padding: 22px 32px;
      background: var(--surface-tint);
      border: 1px solid var(--border);
      border-radius: 10px;
      font-family: 'Source Serif 4', serif;
      font-size: 0.92rem;
      line-height: 1.65;
      color: var(--text-muted);
      text-align: center;
    }
    .educational-disclaimer strong {
      color: var(--slate-dark);
      font-weight: 600;
    }