/* GENERATED by build-scripts/render_landing_content.py -- do not edit.
 * Part 1 is the <style> block from landing-page/index.html.
 * Part 2 is landing-page/styles/resources.css.
 */

    /* ═══════════════════════════════════════════
       CSS VARIABLES & RESET  (unchanged brand system)
       ═══════════════════════════════════════════ */
    :root {
      --navy-950: #0a1628;
      --navy-900: #1c3355;
      --navy-800: #162d54;
      --navy-footer: #14263f;
      --navy-700: #1e3a68;
      --navy-600: #2a4d82;
      --navy-500: #3b6298;
      --navy-400: #5a82b4;
      --navy-300: #8aadd4;
      --navy-200: #b8d0e8;
      --navy-100: #dce8f4;
      --navy-50: #eef3fa;

      --amber-600: #cf8f2f;
      --amber-500: #ecab45;
      --amber-400: #eeb956;
      --amber-300: #f0c775;
      --amber-200: #f5dca3;
      --amber-100: #faedd0;
      --amber-50: #fdf7ec;

      --warm-50: #faf8f5;
      --warm-100: #f5f0e8;
      --warm-200: #e8dfd2;
      --warm-300: #d4c5ad;

      --slate-600: #475569;
      --slate-500: #64748b;
      --slate-400: #94a3b8;
      --slate-300: #cbd5e1;
      --slate-200: #e2e8f0;
      --slate-100: #f1f5f9;

      --success: #059669;
      --success-bg: #dcfce7;
      --white: #ffffff;

      /* Handoff 5a: DM Serif Display rejected — display type is Plus Jakarta 800. */
      --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
      --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;

      --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.05);
      --shadow-md: 0 4px 12px rgba(10, 22, 40, 0.08);
      --shadow-lg: 0 12px 40px rgba(10, 22, 40, 0.12);
      --shadow-xl: 0 20px 60px rgba(10, 22, 40, 0.16);
      --shadow-glow: 0 0 40px rgba(236, 171, 69, 0.15);
    }

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

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font-family: var(--font-body);
      color: var(--navy-900);
      background: var(--warm-50);
      line-height: 1.7;
      overflow-x: hidden;
    }

    a:focus-visible, button:focus-visible, input:focus-visible {
      outline: 3px solid var(--amber-500);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* ═══════════════════════════════════════════
       UTILITY & LAYOUT
       ═══════════════════════════════════════════ */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-label {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--amber-600);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-label::before {
      content: '';
      width: 24px;
      height: 2px;
      background: var(--amber-500);
      border-radius: 1px;
    }

    .section-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 2.125rem;
      letter-spacing: -0.5px;
      line-height: 1.25;
      color: var(--navy-900);
    }

    .section-subtitle {
      font-size: 1.125rem;
      color: var(--slate-500);
      max-width: 560px;
      line-height: 1.7;
    }

    /* ═══════════════════════════════════════════
       NOISE TEXTURE OVERLAY
       ═══════════════════════════════════════════ */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
    }

    /* ═══════════════════════════════════════════
       NAVIGATION
       ═══════════════════════════════════════════ */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: rgba(250, 248, 245, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(22, 45, 84, 0.06);
      transition: all 0.3s ease;
    }

    .nav.scrolled {
      background: rgba(250, 248, 245, 0.95);
      box-shadow: var(--shadow-sm);
    }

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

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--navy-900);
    }

    .nav-logo {
      width: 38px;
      height: 38px;
      background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--amber-400);
      font-size: 18px;
      box-shadow: var(--shadow-md);
    }

    .nav-brand-text {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--navy-900);
    }

    .nav-brand-text span { color: var(--amber-600); }

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

    .nav-links a {
      text-decoration: none;
      color: var(--slate-500);
      font-size: 0.875rem;
      font-weight: 500;
      transition: color 0.2s;
      position: relative;
    }

    .nav-links a:hover { color: var(--navy-800); }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--amber-500);
      transition: width 0.3s ease;
      border-radius: 1px;
    }

    .nav-links a:hover::after { width: 100%; }

    .nav-cta {
      background: var(--navy-800) !important;
      color: var(--white) !important;
      padding: 10px 24px !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
      font-size: 0.875rem !important;
      transition: all 0.3s ease !important;
      box-shadow: var(--shadow-sm) !important;
    }

    .nav-cta:hover {
      background: var(--navy-700) !important;
      transform: translateY(-1px);
      box-shadow: var(--shadow-md) !important;
    }

    .nav-cta::after { display: none !important; }

    /* thin divider before the app cross-over link */
    .nav-divider {
      width: 1px;
      height: 20px;
      background: var(--warm-border);
      padding: 0;
    }

    /* "Log in" cross-over to cminlink.com, with an external-link glyph */
    .nav-login {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .nav-login svg { opacity: 0.7; }

    .nav-mobile-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--navy-800);
    }

    /* Mobile menu open state — fixes a live-site bug: the toggle button added
       .mobile-open but no rule existed for it, so the menu never appeared. */
    @media (max-width: 768px) {
      .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(250, 248, 245, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(22, 45, 84, 0.08);
        box-shadow: var(--shadow-md);
        padding: 12px 24px 20px;
      }
      .nav-links.mobile-open li { width: 100%; }
      .nav-links.mobile-open .nav-divider { display: none; }
      .nav-links.mobile-open a {
        display: block;
        padding: 10px 0;
        font-size: 1rem;
      }
      .nav-links.mobile-open .nav-cta {
        display: inline-block;
        margin-top: 8px;
        text-align: center;
      }
    }

    /* ═══════════════════════════════════════════
       HERO
       ═══════════════════════════════════════════ */
    .hero {
      padding: 160px 0 100px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -200px;
      right: -300px;
      width: 800px;
      height: 800px;
      background: radial-gradient(ellipse, rgba(236, 171, 69, 0.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: -100px;
      left: -200px;
      width: 600px;
      height: 600px;
      background: radial-gradient(ellipse, rgba(22, 45, 84, 0.04) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
    }

    .hero-content { animation: fadeInUp 0.8s ease-out; }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--amber-50);
      border: 1px solid var(--amber-200);
      padding: 6px 16px;
      border-radius: 100px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--amber-600);
      margin-bottom: 28px;
    }

    .hero-badge-dot {
      width: 6px;
      height: 6px;
      background: var(--success);
      border-radius: 50%;
      animation: pulse-dot 2s infinite;
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: 3.25rem;
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1.12;
      color: var(--navy-900);
      margin-bottom: 24px;
    }

    /* Frame 5a: the em-phrase is upright gold-600 — no italic, no underline. */
    .hero h1 em {
      font-style: normal;
      color: var(--amber-600);
    }

    .hero-description {
      font-size: 1.125rem;
      color: var(--slate-500);
      line-height: 1.8;
      margin-bottom: 40px;
      max-width: 500px;
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      align-items: center;
      margin-bottom: 20px;
    }

    .hero-timing-note {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--slate-500);
      margin-bottom: 48px;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
      color: var(--white);
      padding: 14px 32px;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 600;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
      font-family: var(--font-body);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      background: linear-gradient(135deg, var(--navy-700), var(--navy-800));
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: var(--navy-700);
      padding: 14px 28px;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 600;
      text-decoration: none;
      border: 1.5px solid var(--navy-200);
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: var(--font-body);
    }

    .btn-secondary:hover {
      border-color: var(--navy-400);
      background: var(--navy-50);
      transform: translateY(-1px);
    }

    .btn-gold {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
      color: var(--white);
      padding: 14px 32px;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: var(--shadow-md);
      font-family: var(--font-body);
    }

    .btn-gold:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg), var(--shadow-glow);
    }

    .hero-stats { display: flex; gap: 40px; }

    .hero-stat { display: flex; flex-direction: column; }

    .hero-stat-value {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.75rem;
      color: var(--navy-900);
    }

    .hero-stat-label {
      font-size: 0.8rem;
      color: var(--slate-400);
      font-weight: 500;
    }

    /* ── Hero visual: the referral journey (signature element) ── */
    .hero-visual {
      position: relative;
      animation: fadeInUp 0.8s ease-out 0.2s both;
    }

    .hero-app-preview {
      background: var(--white);
      border-radius: 16px;
      box-shadow: var(--shadow-xl);
      overflow: hidden;
      border: 1px solid rgba(22, 45, 84, 0.08);
      position: relative;
    }

    .app-preview-header {
      background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .app-preview-dots { display: flex; gap: 6px; }

    .app-preview-dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
    }

    .app-preview-dots span:first-child { background: #ef4444; }
    .app-preview-dots span:nth-child(2) { background: var(--amber-400); }
    .app-preview-dots span:nth-child(3) { background: #22c55e; }

    .app-preview-url {
      flex: 1;
      background: rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 0.75rem;
      color: rgba(255,255,255,0.5);
      font-family: monospace;
    }

    .journey { padding: 22px 24px 26px; }

    .journey-quote {
      background: var(--slate-100);
      border-radius: 12px;
      border-bottom-left-radius: 4px;
      padding: 13px 16px;
      font-size: 0.88rem;
      color: var(--navy-900);
      line-height: 1.55;
      margin-bottom: 6px;
    }

    .journey-quote-meta {
      font-size: 0.7rem;
      color: var(--slate-400);
      font-weight: 600;
      margin: 0 0 18px 4px;
    }

    .journey-track {
      position: relative;
      padding-left: 26px;
    }

    /* the connecting rail */
    .journey-track::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 8px;
      bottom: 14px;
      width: 2px;
      background: linear-gradient(180deg, var(--navy-200) 0%, var(--amber-400) 100%);
      border-radius: 1px;
    }

    .journey-node {
      position: relative;
      padding-bottom: 16px;
    }

    .journey-node:last-child { padding-bottom: 0; }

    .journey-node::before {
      content: '';
      position: absolute;
      left: -26px;
      top: 5px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--white);
      border: 2.5px solid var(--navy-400);
    }

    .journey-node.done::before {
      background: var(--navy-600);
      border-color: var(--navy-600);
      box-shadow: inset 0 0 0 3px var(--white);
    }

    .journey-node.outcome::before {
      background: var(--amber-500);
      border-color: var(--amber-500);
      box-shadow: 0 0 0 4px rgba(236, 171, 69, 0.25);
      animation: pulse-ring 2.4s ease-out infinite;
    }

    .journey-node h4 {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--navy-900);
      line-height: 1.4;
    }

    .journey-node p {
      font-size: 0.73rem;
      color: var(--slate-400);
      font-weight: 500;
    }

    .journey-outcome-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--success-bg);
      color: var(--success);
      font-size: 0.78rem;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 100px;
      margin-bottom: 3px;
    }

    /* Floating accent card */
    .hero-float-card {
      position: absolute;
      bottom: -20px;
      left: -30px;
      background: var(--white);
      border-radius: 12px;
      padding: 16px 20px;
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid rgba(22, 45, 84, 0.06);
      animation: floatCard 4s ease-in-out infinite;
      z-index: 10;
    }

    .float-card-icon {
      width: 42px;
      height: 42px;
      background: linear-gradient(135deg, var(--amber-400), var(--amber-500));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: var(--shadow-glow);
      color: var(--white);
    }

    .float-card-text h4 {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--navy-900);
    }

    .float-card-text p {
      font-size: 0.75rem;
      color: var(--slate-400);
    }

    /* ═══════════════════════════════════════════
       TRUST BAR
       ═══════════════════════════════════════════ */
    .trust-bar {
      padding: 48px 0;
      border-top: 1px solid var(--warm-200);
      border-bottom: 1px solid var(--warm-200);
      background: var(--white);
    }

    .trust-bar .container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 48px;
      flex-wrap: wrap;
    }

    .trust-label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--slate-400);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      white-space: nowrap;
    }

    .trust-items {
      display: flex;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--slate-400);
      font-size: 0.85rem;
      font-weight: 500;
    }

    .trust-item svg {
      width: 20px;
      height: 20px;
      color: var(--navy-400);
    }

    /* ═══════════════════════════════════════════
       FEATURES
       ═══════════════════════════════════════════ */
    .features { padding: 120px 0; }

    .features-header {
      text-align: center;
      margin-bottom: 72px;
    }

    .features-header .section-label { justify-content: center; }

    .features-header .section-title {
      font-size: 2.125rem;
      margin-bottom: 16px;
    }

    .features-header .section-subtitle { margin: 0 auto; }

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

    .feature-card {
      background: var(--white);
      border: 1px solid rgba(22, 45, 84, 0.06);
      border-radius: 16px;
      padding: 36px 32px;
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--amber-400), var(--amber-500));
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(22, 45, 84, 0.1);
    }

    .feature-card:hover::before { opacity: 1; }

    .feature-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 24px;
    }

    .feature-icon.blue { background: var(--navy-50); }
    .feature-icon.amber { background: var(--amber-50); }
    .feature-icon.green { background: #ecfdf5; }
    .feature-icon.rose { background: #fff1f2; }
    .feature-icon.violet { background: #f5f3ff; }
    .feature-icon.cyan { background: #ecfeff; }
    .feature-icon.teal { background: #f0fdfa; }

    .feature-card h3 {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--navy-900);
      margin-bottom: 12px;
    }

    .feature-card p {
      font-size: 0.9rem;
      color: var(--slate-500);
      line-height: 1.7;
    }

    /* ═══════════════════════════════════════════
       YOUR DIRECTORY — curated list vs the internet's guesses
       ═══════════════════════════════════════════ */
    .directory {
      padding: 110px 0;
      background: var(--white);
      border-top: 1px solid var(--warm-200);
    }

    .directory .container {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: 64px;
      align-items: center;
    }

    .directory .section-title {
      font-size: 2.125rem;
      margin-bottom: 16px;
    }

    .directory-copy .section-subtitle { margin-bottom: 30px; }

    /* three-way contrast: two crossed-out ways to get it wrong, one right way */
    .compare-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 30px;
    }

    .compare-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.95rem;
      line-height: 1.65;
      padding: 14px 18px;
      border-radius: 12px;
    }

    .compare-list li.no {
      color: var(--slate-500);
      background: var(--slate-100);
      border: 1px solid var(--slate-200);
    }

    .compare-list li.no svg {
      width: 20px;
      height: 20px;
      color: var(--slate-400);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .compare-list li.no strong { color: var(--slate-600); }

    .compare-list li.yes {
      color: var(--navy-900);
      font-weight: 500;
      background: var(--amber-50);
      border: 1px solid var(--amber-200);
    }

    .compare-list li.yes svg {
      width: 20px;
      height: 20px;
      color: var(--success);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .directory-checklist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .directory-checklist li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.92rem;
      color: var(--slate-600);
      font-weight: 500;
      line-height: 1.6;
    }

    .directory-checklist svg {
      width: 20px;
      height: 20px;
      color: var(--navy-600);
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* the directory-entry card: what a curated organization looks like */
    .org-card {
      background: var(--warm-50);
      border: 1px solid var(--warm-200);
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      padding: 28px;
      position: relative;
    }

    .org-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px;
    }

    .org-card-header h3 {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--navy-900);
      line-height: 1.25;
    }

    .org-verified {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--success-bg);
      color: var(--success);
      font-size: 0.7rem;
      font-weight: 700;
      padding: 5px 11px;
      border-radius: 100px;
      white-space: nowrap;
      flex-shrink: 0;
      margin-top: 4px;
    }

    .org-verified svg { width: 12px; height: 12px; }

    .org-cats {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .org-cat {
      padding: 5px 13px;
      border-radius: 100px;
      font-size: 0.72rem;
      font-weight: 600;
      background: var(--navy-50);
      color: var(--navy-600);
      border: 1px solid var(--navy-100);
    }

    .org-rows {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }

    .org-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.88rem;
      color: var(--slate-600);
    }

    .org-row svg {
      width: 17px;
      height: 17px;
      color: var(--navy-400);
      flex-shrink: 0;
      margin-top: 3px;
    }

    .org-row .open-now {
      color: var(--success);
      font-weight: 700;
    }

    .org-note {
      background: var(--amber-50);
      border-left: 3px solid var(--amber-400);
      border-radius: 0 10px 10px 0;
      padding: 13px 16px;
      font-size: 0.88rem;
      color: var(--navy-900);
      line-height: 1.6;
      font-style: italic;
      margin-bottom: 8px;
    }

    .org-note-meta {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--slate-400);
      font-style: normal;
      display: block;
      margin-top: 6px;
    }

    .org-card-footer {
      border-top: 1px solid var(--warm-200);
      padding-top: 16px;
      margin-top: 16px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--slate-400);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .org-card-footer svg {
      width: 16px;
      height: 16px;
      color: var(--amber-500);
    }

    /* ═══════════════════════════════════════════
       LANGUAGE BAND
       ═══════════════════════════════════════════ */
    .language-band {
      padding: 110px 0;
      background: linear-gradient(135deg, var(--navy-50) 0%, var(--amber-50) 100%);
      border-top: 1px solid var(--warm-200);
      border-bottom: 1px solid var(--warm-200);
    }

    .language-band .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    .language-band .section-title {
      font-size: 2.125rem;
      margin-bottom: 16px;
    }

    .language-copy .section-subtitle { margin-bottom: 28px; }

    .language-checklist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .language-checklist li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.95rem;
      color: var(--slate-600);
      font-weight: 500;
    }

    .language-checklist svg {
      width: 22px;
      height: 22px;
      color: var(--success);
      flex-shrink: 0;
      margin-top: 1px;
    }

    .language-chat {
      background: var(--white);
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(22, 45, 84, 0.08);
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .chat-bubble {
      max-width: 82%;
      padding: 14px 18px;
      border-radius: 16px;
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .chat-bubble .chat-lang {
      display: block;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 6px;
      opacity: 0.75;
    }

    .chat-bubble.user {
      align-self: flex-end;
      background: var(--navy-800);
      color: var(--white);
      border-bottom-right-radius: 4px;
    }

    .chat-bubble.user .chat-lang { color: var(--amber-300); }

    .chat-bubble.bot {
      align-self: flex-start;
      background: var(--slate-100);
      color: var(--navy-900);
      border-bottom-left-radius: 4px;
    }

    .chat-bubble.bot .chat-lang { color: var(--amber-600); }

    /* ═══════════════════════════════════════════
       HOW IT WORKS — now five steps; the loop closes
       ═══════════════════════════════════════════ */
    .how-it-works {
      padding: 120px 0;
      background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
      position: relative;
      overflow: hidden;
    }

    .how-it-works::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(236, 171, 69, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .how-it-works .section-title {
      color: var(--white);
      font-size: 2.125rem;
      text-align: center;
      margin-bottom: 16px;
    }

    .how-it-works .section-label { justify-content: center; }

    .how-it-works .section-subtitle {
      color: var(--navy-300);
      text-align: center;
      margin: 0 auto 80px;
    }

    /* Frame 5a: translucent step CARDS, gold-tint numbers, step 5 highlighted. */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
    }

    .step-card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
      padding: 24px 22px 26px;
      position: relative;
    }

    .step-number {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(236, 171, 69, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 0.95rem;
      color: var(--amber-400);
      margin-bottom: 20px;
    }

    /* the loop-closing step earns the gold */
    .step-card.closes-loop {
      background: rgba(236, 171, 69, 0.08);
      border: 1.5px solid rgba(236, 171, 69, 0.55);
    }

    .step-card.closes-loop .step-number {
      background: var(--amber-500);
      color: var(--navy-900);
    }

    .step-card h3 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.12rem;
      color: var(--white);
      margin-bottom: 10px;
    }

    .step-card p {
      font-size: 0.83rem;
      color: var(--navy-300);
      line-height: 1.7;
    }

    .loop-note {
      margin-top: 56px;
      text-align: center;
      font-size: 0.95rem;
      color: var(--amber-300);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .loop-note svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    /* ═══════════════════════════════════════════
       FOUNDING PARTNERS — a status, not a price
       ═══════════════════════════════════════════ */

    /* ═══════════════ PRICING ═══════════════
       Styles for the generated pricing section. The MARKUP is written by
       build-scripts/render_landing_pricing.py; these styles are static so a
       design change never has to go through Python. */
    .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: transparent;
      color: var(--navy-600);
      padding: 14px 32px;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      border: 1.5px solid var(--navy-200);
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: var(--font-body);
    }

    .btn-outline:hover {
      border-color: var(--navy-600);
      background: var(--navy-50);
      transform: translateY(-2px);
    }

    .pricing {
      padding: 96px 0;
      background: var(--warm-50);
    }

    .pricing-head {
      max-width: 720px;
      margin: 0 auto 48px;
      text-align: center;
    }

    /* Monthly / Annual switch. Both prices are rendered by the generator and
       one is hidden -- no arithmetic in the browser, so every number on this
       page still comes from pricing-tiers.yaml. */
    /* Centred with width:fit-content + auto inline margins. It previously used
       `position:relative; left:50%; transform:translateX(-50%)`, which offsets
       from the STATIC position by 50% of the CONTAINING BLOCK -- so the
       container's horizontal padding leaked in and pushed it right of centre. */
    .billing-toggle {
      display: flex;
      gap: 4px;
      width: fit-content;
      margin: 0 auto 32px;
      padding: 4px;
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: 999px;
    }

    .billing-opt {
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--slate-500);
      padding: 9px 20px;
      border-radius: 999px;
      transition: background 0.2s ease, color 0.2s ease;
      white-space: nowrap;
    }

    .billing-opt:hover { color: var(--navy-700); }

    .billing-opt.is-active {
      background: var(--navy-600);
      color: var(--white);
    }

    .billing-opt:focus-visible {
      outline: 2px solid var(--navy-600);
      outline-offset: 2px;
    }

    @media (max-width: 480px) {
      .billing-toggle { width: calc(100% - 32px); }
      .billing-opt { flex: 1; padding: 9px 8px; font-size: 0.8rem; }
    }

    .tier-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
      align-items: stretch;
    }

    .tier-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: 16px;
      padding: 28px 24px;
      box-shadow: var(--shadow-sm);
      position: relative;
    }

    .tier-card.featured {
      border-color: var(--amber-500);
      border-width: 2px;
      box-shadow: var(--shadow-lg);
    }

    .tier-badge {
      position: absolute;
      top: -12px;
      left: 24px;
      background: var(--amber-500);
      color: var(--white);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      padding: 4px 12px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .tier-name {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--navy-900);
      margin: 0;
    }

    .tier-price {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 2.25rem;
      color: var(--navy-950);
      margin: 0;
      line-height: 1.1;
    }

    .tier-price-prefix,
    .tier-price-unit {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--slate-500);
    }

    /* The approximation mark before an annual per-month figure. Deliberately
       lighter and smaller than the price: at .tier-price's 800 weight it reads
       as a digit rather than as a qualifier on the number. */
    .tier-price-approx {
      font-weight: 400;
      font-size: 0.8em;
      color: var(--slate-500);
      margin-right: 0.05em;
    }

    /* Under the monthly-equivalent headline on annual. Without it, "$24/mo"
       reads as the amount leaving the account each month. Matches the in-app
       pricing page, which a church may well have open beside this one. */
    .tier-annual-note {
      font-size: 0.8rem;
      color: var(--slate-500);
      margin: -6px 0 0;
    }

    .tier-seats {
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--navy-700);
      margin: 0;
    }

    .tier-description {
      font-size: 0.875rem;
      line-height: 1.6;
      color: var(--slate-600);
      margin: 0;
    }

    .tier-includes {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 4px 0 auto;
      padding: 0;
      font-size: 0.875rem;
      color: var(--navy-900);
    }

    .tier-includes li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.5;
    }

    .tier-includes svg {
      width: 16px;
      height: 16px;
      flex: none;
      margin-top: 3px;
      color: var(--success);
    }

    /* What this plan does NOT include. Dimming alone was not enough: next to a
       column of ticks a faded row reads as an included item in a lighter
       colour, which is the opposite of what it means. It carries its own
       crossed icon so the two lists stay legible as one column. */
    .tier-includes li.excluded {
      color: var(--slate-400);
    }

    .tier-includes li.excluded svg {
      color: var(--slate-300);
    }

    .tier-card .btn-gold,
    .tier-card .btn-outline {
      margin-top: 16px;
      width: 100%;
      justify-content: center;
      padding: 12px 20px;
    }

    .pricing-support {
      text-align: center;
      font-size: 0.875rem;
      color: var(--slate-500);
      margin: 24px 0 0;
    }

    .pricing-promises {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin-top: 40px;
    }

    .promise {
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-left: 3px solid var(--amber-500);
      border-radius: 12px;
      padding: 20px 24px;
    }

    .promise h4 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1rem;
      color: var(--navy-900);
      margin: 0 0 6px;
    }

    .promise p {
      font-size: 0.875rem;
      line-height: 1.6;
      color: var(--slate-600);
      margin: 0;
    }

    @media (max-width: 1024px) {
      .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
      .pricing { padding: 64px 0; }
      .tier-grid,
      .pricing-promises { grid-template-columns: minmax(0, 1fr); }
    }

    .founding {
      padding: 120px 0;
      position: relative;
      overflow: hidden;
    }

    .founding::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--amber-50) 0%, var(--warm-50) 55%, var(--navy-50) 100%);
    }

    /* One column. This was `grid-template-columns: 1.1fr 1fr` to sit the copy
       beside the Founding Partner Charter card; that card was removed with the
       $25 price, which left the right-hand column empty. */
    .founding .container {
      position: relative;
      max-width: 940px;
    }

    .founding .section-title {
      font-size: 2.125rem;
      margin-bottom: 20px;
    }

    .founding-copy .section-subtitle { margin-bottom: 36px; }

    /* ── Founding Partner roster ────────────────────────────────────────
       The churches who have said yes, four across. Real partners fill the
       grid left to right; ONE invitation spans whatever is left of the last
       row, so a row is never ragged and a single partner never sits alone.

       Deliberately NOT a count. There is no "1 of 10" chip and no tally of
       remaining spots: a Founding Partnership is a relationship, and a
       scoreboard asks the reader to watch slots disappear instead of reading
       who is already here.

       Partner marks are INLINE data URIs, never files. deploy-landing.sh
       uploads index.html and favicons/ and nothing else, so a PNG committed
       under landing-page/ would 404 in production. Keep every mark inline. */
    .founding-roster {
      margin: 0 0 40px;
      padding: 26px 26px 24px;
      background: rgba(255, 255, 255, 0.66);
      border: 1px solid var(--slate-200);
      border-radius: 18px;
    }

    .founding-roster-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1rem;
      color: var(--navy-900);
      margin: 0 0 18px;
    }

    /* Flex, not grid, and the reason is the invitation. Four fixed-width
       tiles per line; the invitation is the only growable item, so it absorbs
       whatever is left of the last line on its own. Grid needed a hand-set
       column span, which was wrong at every breakpoint but one: with one
       partner in a two-column grid, a span-2 invitation wrapped and left an
       empty cell beside it. Flex needs no number at all -- adding a church is
       a pure copy-paste. */
    .founding-grid {
      --roster-gap: 14px;
      --roster-cols: 4;
      display: flex;
      flex-wrap: wrap;
      gap: var(--roster-gap);
    }

    .partner-card,
    .partner-invite {
      --roster-basis: calc(
        (100% - (var(--roster-cols) - 1) * var(--roster-gap)) / var(--roster-cols)
      );
      min-width: 0;
    }

    .partner-card { flex: 0 0 var(--roster-basis); }

    /* The only item allowed to grow. */
    .partner-invite { flex: 1 1 var(--roster-basis); }

    .partner-card {
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding: 18px 16px 16px;
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: 14px;
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.22s ease, transform 0.22s ease;
    }

    .partner-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    /* A fixed 44px mark area, so every tile aligns whether the partner has a
       usable logo or falls back to a monogram. FBC Raleigh's own lockup is
       6.25:1 with its street address as the second line — illegible at tile
       width and crimson against navy — so the tile carries the rosette mark
       alone and our own type carries the name. Expect to crop most church
       logos the same way. */
    .partner-mark {
      height: 44px;
      display: flex;
      align-items: center;
    }

    .partner-mark img {
      height: 44px;
      width: 44px;
      object-fit: contain;
    }

    /* Fallback for a partner with no usable logo file. */
    .partner-monogram {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
      color: var(--amber-400);
      font-size: 0.86rem;
      font-weight: 800;
    }

    .partner-name {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 800;
      line-height: 1.32;
      color: var(--navy-900);
      margin: 0;
      text-wrap: balance;
    }

    .partner-city {
      margin: -3px 0 0;
      font-size: 0.81rem;
      font-weight: 600;
      color: var(--slate-500);
    }

    .partner-site {
      margin-top: auto;
      padding-top: 6px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: fit-content;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--navy-600);
      text-decoration: none;
    }

    .partner-site:hover { text-decoration: underline; }

    .partner-site svg {
      width: 11px;
      height: 11px;
      flex-shrink: 0;
    }

    /* ONE invitation, always last, always filling the rest of the line. Not N
       countable vacancies: a Founding Partnership is a relationship, and a row
       of numbered empty slots asks the reader to watch them disappear. */
    .partner-invite {
      /* A container, so the layout inside reacts to the INVITATION's width
         rather than the viewport's. Its width depends on how many partners
         share its line, which no viewport breakpoint can know: at 760px it is
         half a row with one partner and a whole row with two. */
      container-type: inline-size;
      display: block;
      padding: 18px 20px;
      border: 1.5px dashed var(--amber-300);
      border-radius: 14px;
      background: rgba(253, 247, 236, 0.6);
      text-decoration: none;
      transition: background 0.22s ease, border-color 0.22s ease;
    }

    .partner-invite:hover {
      background: var(--amber-50);
      border-color: var(--amber-500);
    }

    .partner-invite-inner {
      display: flex;
      align-items: center;
      gap: 16px;
      height: 100%;
    }

    .partner-invite-mark {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px dashed var(--amber-300);
      color: var(--amber-600);
    }

    .partner-invite-mark svg { width: 21px; height: 21px; }

    .partner-invite-body {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .partner-invite-title {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--navy-900);
    }

    .partner-invite-note {
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--slate-500);
      line-height: 1.5;
    }

    .partner-invite-cta {
      margin-left: auto;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.83rem;
      font-weight: 800;
      color: var(--amber-600);
    }

    .partner-invite-cta svg { width: 14px; height: 14px; }

    /* Below this the row crushes: the note wraps to five lines and the call to
       action is squeezed against it. Stack instead. */
    @container (max-width: 430px) {
      .partner-invite-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
      }

      .partner-invite-cta { margin-left: 0; }
    }

    /* What you get / what we ask, side by side. The trade has to be legible as
       a trade: with the discount no longer on the page, a reader who sees only
       the asks is being shown one half of an exchange. */
    .founding-cols {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 40px;
      align-items: start;
    }

    .founding-col-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1rem;
      color: var(--navy-900);
      margin: 0 0 14px;
    }

    .founding-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 0;
      padding: 0;
    }

    .founding-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.92rem;
      color: var(--slate-600);
      font-weight: 500;
      line-height: 1.6;
    }

    .founding-list li > span { flex: 1; }

    .founding-list svg {
      width: 19px;
      height: 19px;
      color: var(--success);
      flex-shrink: 0;
      margin-top: 3px;
    }

    /* The asks are obligations, not benefits — a different mark so the two
       columns cannot be skim-read as one list of good things. */
    .founding-list-asks svg { color: var(--amber-600); }

    .founding-nothing-hidden {
      margin-top: 18px;
      font-size: 0.87rem;
      color: var(--slate-500);
      border-left: 3px solid var(--amber-300);
      padding-left: 14px;
      line-height: 1.6;
    }

    .founding-actions {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }

    /* Answers the question a self-serve visitor asks silently: why is there no
       button that just buys this? It also gives the discount a natural place to
       arrive later, in the conversation. */
    .founding-note {
      font-size: 0.87rem;
      color: var(--slate-500);
      font-style: italic;
      max-width: 52ch;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .founding-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
      .founding-grid { --roster-cols: 2; }
      .founding-roster { padding: 20px 18px; }
    }

    /* One tile per row on a phone. The invitation stacks: its CTA cannot sit
       on the right of a 300px card without crushing the note beside it. */
    @media (max-width: 480px) {
      .founding-grid { --roster-cols: 1; }
    }

    /* ═══════════════ FAQ ═══════════════
       <details>/<summary> rather than JS accordions: it is keyboard-accessible
       and Ctrl-F findable for free, and this section exists to be forwarded to
       someone who will search it. */
    .faq {
      padding: 96px 0;
      background: var(--white);
    }

    .faq-head {
      max-width: 620px;
      margin: 0 auto 40px;
      text-align: center;
    }

    /* Without this the heading breaks as "...committee will / ask", leaving a
       one-word orphan line under a centred title. */
    .faq-head .section-title { text-wrap: balance; }

    .faq-list {
      max-width: 780px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .faq-item {
      border: 1px solid var(--slate-200);
      border-radius: 12px;
      background: var(--warm-50);
      overflow: hidden;
    }

    .faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 18px 52px 18px 22px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      color: var(--navy-900);
      position: relative;
      line-height: 1.45;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    /* Chevron drawn in CSS: one fewer inline SVG in a file that already has
       dozens, and it can rotate on open without any script. */
    .faq-item summary::after {
      content: '';
      position: absolute;
      right: 22px;
      top: 24px;
      width: 9px;
      height: 9px;
      border-right: 2px solid var(--amber-600);
      border-bottom: 2px solid var(--amber-600);
      transform: rotate(45deg);
      transition: transform 0.25s ease;
    }

    .faq-item[open] summary::after { transform: rotate(-135deg); top: 28px; }

    .faq-item summary:hover { color: var(--navy-600); }

    .faq-item summary:focus-visible {
      outline: 2px solid var(--navy-600);
      outline-offset: -2px;
    }

    .faq-item p {
      padding: 0 22px 20px;
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.7;
      color: var(--slate-600);
    }

    .faq-item p a {
      color: var(--navy-700);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid var(--amber-400);
    }

    @media (max-width: 640px) {
      .faq { padding: 64px 0; }
      .faq-item summary { padding: 16px 46px 16px 18px; font-size: 0.95rem; }
      .faq-item p { padding: 0 18px 18px; }
    }

    /* ═══════════════ CLOSING CTA ═══════════════ */
    .closing-cta {
      padding: 88px 0;
      background: var(--navy-950);
    }

    .closing-cta-box {
      max-width: 640px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    .closing-cta-box h2 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 2rem;
      line-height: 1.2;
      color: var(--white);
      margin: 0;
    }

    .closing-cta-box > p {
      color: var(--navy-200);
      font-size: 1rem;
      line-height: 1.6;
      margin: 0;
    }

    .closing-cta-box .btn-gold { margin-top: 10px; }

    .closing-cta-alt {
      font-size: 0.875rem;
      color: var(--navy-300);
    }

    .closing-cta-alt a {
      color: var(--amber-300);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid var(--amber-600);
    }

    @media (max-width: 640px) {
      .closing-cta { padding: 64px 0; }
      .closing-cta-box h2 { font-size: 1.6rem; }
    }

    /* ═══════════════════════════════════════════
       BRIDGEWAY BAND — who's behind this
       ═══════════════════════════════════════════ */
    .bridgeway {
      padding: 110px 0;
      background: var(--white);
      border-top: 1px solid var(--warm-200);
      border-bottom: 1px solid var(--warm-200);
    }

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

    .bridgeway-header .section-label { justify-content: center; }

    .bridgeway-header .section-title {
      font-size: 2.125rem;
      margin-bottom: 18px;
    }

    .bridgeway-header .section-subtitle { margin: 0 auto; }

    .pledges-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1000px;
      margin: 0 auto;
    }

    .pledge-card {
      background: var(--warm-50);
      border: 1px solid var(--warm-200);
      border-radius: 16px;
      padding: 30px 28px;
      text-align: center;
    }

    .pledge-card .pledge-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--navy-50);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
    }

    .pledge-card .pledge-icon svg {
      width: 22px;
      height: 22px;
      color: var(--navy-600);
    }

    .pledge-card h3 {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--navy-900);
      margin-bottom: 10px;
    }

    .pledge-card p {
      font-size: 0.87rem;
      color: var(--slate-500);
      line-height: 1.7;
    }

    .pledge-card a {
      color: var(--navy-700);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid var(--amber-400);
    }

    /* ═══════════════════════════════════════════
       EMERGENCY BANNER
       ═══════════════════════════════════════════ */
    .emergency-banner {
      padding: 48px 0;
      background: linear-gradient(135deg, #fef2f2, #fff1f2);
      border-top: 1px solid #fecaca;
      border-bottom: 1px solid #fecaca;
    }

    .emergency-inner {
      display: flex;
      align-items: center;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
      text-align: center;
    }

    .emergency-icon {
      width: 48px;
      height: 48px;
      background: #fecaca;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }

    .emergency-text h3 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.15rem;
      color: #991b1b;
      margin-bottom: 4px;
    }

    .emergency-text p {
      font-size: 0.9rem;
      color: #b91c1c;
    }

    /* ═══════════════════════════════════════════
       CTA — single Book-a-Demo action (frame 5a)
       ═══════════════════════════════════════════ */
    .cta {
      padding: 120px 0;
      position: relative;
      overflow: hidden;
    }

    .cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--warm-100);
    }

    .cta .container { position: relative; }

    /* Frame 5a: the CTA is a white boxed card on the warm band. */
    .cta-box {
      background: var(--white);
      border: 1px solid var(--warm-border);
      border-radius: 20px;
      box-shadow: var(--shadow-lg);
      padding: 60px 48px;
      max-width: 1080px;
      margin: 0 auto;
      text-align: center;
    }

    .cta-box .section-label { justify-content: center; }

    .cta-box .section-title {
      font-size: 2.125rem;
      margin-bottom: 16px;
    }

    .cta-box .section-subtitle {
      margin: 0 auto 40px;
      text-align: center;
    }

    .cta-demo-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .cta-demo-note {
      font-size: 0.85rem;
      color: var(--slate-500);
    }

    .cta-demo-note a {
      color: var(--navy-700);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid var(--amber-400);
    }

    /* ═══════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════ */
    .footer {
      background: var(--navy-footer);
      padding: 64px 0 32px;
      color: var(--navy-300);
    }

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

    .footer-brand-text {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--white);
      margin-bottom: 12px;
    }

    .footer-brand-text span { color: var(--amber-400); }

    .footer-description {
      font-size: 0.85rem;
      color: var(--navy-400);
      line-height: 1.7;
      max-width: 300px;
    }

    .footer-col h4 {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--navy-300);
      margin-bottom: 20px;
    }

    .footer-col ul { list-style: none; }

    .footer-col ul li { margin-bottom: 10px; }

    .footer-col ul a {
      text-decoration: none;
      color: var(--navy-400);
      font-size: 0.85rem;
      transition: color 0.2s;
    }

    .footer-col ul a:hover { color: var(--amber-400); }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.06);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      color: var(--navy-500);
    }

    /* ═══════════════════════════════════════════
       ANIMATIONS
       ═══════════════════════════════════════════ */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    @keyframes pulse-ring {
      0% { box-shadow: 0 0 0 4px rgba(236, 171, 69, 0.25); }
      50% { box-shadow: 0 0 0 8px rgba(236, 171, 69, 0.12); }
      100% { box-shadow: 0 0 0 4px rgba(236, 171, 69, 0.25); }
    }

    @keyframes floatCard {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }
      .reveal { opacity: 1; transform: none; }
    }

    /* ═══════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .hero .container { grid-template-columns: 1fr; gap: 48px; }
      .hero h1 { font-size: 2.75rem; }
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .language-band .container { grid-template-columns: 1fr; gap: 48px; }
      .directory .container { grid-template-columns: 1fr; gap: 48px; }
      .founding .container { grid-template-columns: 1fr; gap: 48px; }
      .pledges-grid { grid-template-columns: 1fr; max-width: 520px; }
    }

    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-mobile-toggle { display: block; }
      .hero { padding: 120px 0 80px; }
      .hero h1 { font-size: 2.25rem; }
      .hero-stats { gap: 24px; }
      .features, .cta, .how-it-works, .language-band, .directory, .founding, .bridgeway { padding: 80px 0; }
      .features-header .section-title,
      .how-it-works .section-title,
      .cta-box .section-title,
      .language-band .section-title,
      .founding .section-title,
      .bridgeway-header .section-title { font-size: 2rem; }
      .features-grid { grid-template-columns: 1fr; }
      .steps-grid { grid-template-columns: 1fr; }
      .hero-actions { flex-direction: column; align-items: flex-start; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
      .hero-float-card { display: none; }
    }

    @media (max-width: 480px) {
      .hero h1 { font-size: 1.85rem; }
      .container { padding: 0 16px; }
    }
  

/* --- landing-page/styles/resources.css --- */
/* ===========================================================================
   Resources section styles.

   These rules are APPENDED to the style block extracted from index.html, so
   every design token (--navy-900, --amber-600, the type scale) is already
   defined above. Do not redefine one here; change it in index.html and
   re-render.
   =========================================================================== */

.res-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 24px 80px;
}

.res-breadcrumb {
  font-size: 0.85rem;
  color: var(--navy-500);
  margin-bottom: 18px;
}

.res-breadcrumb a { color: var(--navy-600); text-decoration: none; }
.res-breadcrumb a:hover { text-decoration: underline; }

.res-kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: 12px;
}

.res-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: var(--navy-900);
  margin-bottom: 14px;
}

.res-meta {
  font-size: 0.9rem;
  color: var(--navy-500);
  margin-bottom: 32px;
}

/* The direct answer. It sits before the body on an `answer` page because that
   is the block an answer engine lifts, and a reader who wanted one sentence
   should not have to scroll for it. */
.res-answer {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--navy-900);
  border-left: 3px solid var(--amber-400);
  padding: 4px 0 4px 20px;
  margin-bottom: 32px;
}

.res-body { font-size: 1.03rem; line-height: 1.75; color: var(--navy-800); }
.res-body h2 { font-size: 1.5rem; color: var(--navy-900); margin: 40px 0 14px; }
.res-body h3 { font-size: 1.2rem; color: var(--navy-900); margin: 30px 0 10px; }
.res-body p { margin-bottom: 18px; }
.res-body ul, .res-body ol { margin: 0 0 18px 22px; }
.res-body li { margin-bottom: 8px; }
.res-body a { color: var(--navy-600); }
.res-body code {
  background: var(--navy-50);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.92em;
}
.res-body table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.res-body th, .res-body td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--navy-100);
}

/* 16:9 without the padding-top trick. A bare iframe inside a flex or grid
   parent collapses; the ratio box keeps it honest at every width. */
.res-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin-bottom: 32px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy-900);
}
.res-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.res-transcript-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-500);
  margin-bottom: 12px;
}

.res-faq { margin-top: 48px; border-top: 1px solid var(--navy-100); padding-top: 28px; }
.res-faq h2 { font-size: 1.35rem; color: var(--navy-900); margin-bottom: 18px; }
.res-faq dt { font-weight: 650; color: var(--navy-900); margin-bottom: 6px; }
.res-faq dd { margin: 0 0 18px; color: var(--navy-700); }

.res-cta {
  margin-top: 52px;
  padding: 28px;
  border-radius: 12px;
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
}
.res-cta p { margin-bottom: 16px; color: var(--navy-800); }

/* Same shape as index.html's .hero-actions: primary + secondary side by
   side with a gap where there is room, wrapping to a column instead of
   letting the secondary link's text wrap mid-line under the button. */
.res-cta-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.res-cta-actions a:not(.btn-gold) {
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Hub ----------------------------------------------------------------- */

.res-hub { max-width: 1060px; margin: 0 auto; padding: 140px 24px 80px; }
.res-hub-intro { max-width: 620px; margin-bottom: 44px; }

.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}

.res-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--navy-100);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.res-card:hover { border-color: var(--navy-400); transform: translateY(-2px); }
.res-card-type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: 10px;
}
.res-card-title { font-size: 1.12rem; color: var(--navy-900); margin-bottom: 8px; }
.res-card-desc { font-size: 0.93rem; line-height: 1.55; color: var(--navy-700); flex: 1; }
.res-card-date { font-size: 0.8rem; color: var(--navy-500); margin-top: 16px; }

.res-empty { color: var(--navy-500); font-size: 1rem; }

@media (max-width: 640px) {
  .res-main, .res-hub { padding-top: 110px; }
}