:root {
    --color-ink:#0A0908; --color-ink-soft:#3F3F3D; --color-ink-mute:#6B6E6B; --color-ink-faint:#A8ACA8;
    --color-paper:#ECF1ED; --color-paper-light:#F4F7F4; --color-paper-deep:#DDE6E0;
    --color-accent:#0891B2; --color-accent-dark:#155E75; --color-accent-tint:#E0EFF1;
    --color-border-faint:rgba(10,9,8,0.06); --color-border-subtle:rgba(10,9,8,0.12); --color-border-strong:rgba(10,9,8,0.22);
    --font-display:"Fraunces",Georgia,serif; --font-sans:"Geist",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-mono:"Geist Mono",ui-monospace,monospace;
    /* Page side margin (gutter): scales from 24px on small screens up to 64px, sitting near
       ~51px at the 1280px content width. The 1280px inner wrappers stay centered, so a wider
       gutter only adds breathing room at the edges, it does not shrink content on wide screens. */
    --page-gutter: clamp(24px, 4vw, 64px);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--color-ink); background: var(--color-paper); -webkit-font-smoothing: antialiased; }
  body { min-height: 100vh; display: flex; flex-direction: column; }
  /* Sticky footer: main grows to fill, so the footer sits at the bottom even on short pages (e.g. the assessment intro) */
  main { flex: 1 0 auto; }
  .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--page-gutter); }
  .container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--page-gutter); }

  /* Wordmark - the locked Fraunces moment */
  .wordmark { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 15, "WONK" 0; letter-spacing: -0.025em; color: var(--color-ink); line-height: 1; display: inline-block; }
  .wordmark::after { content: "*"; color: var(--color-accent); font-size: 0.42em; vertical-align: 0.85em; margin-left: 0.05em; font-variation-settings: "opsz" 60, "wght" 500, "SOFT" 15, "WONK" 0; }

  /* Headings - SANS */
  h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; color: var(--color-ink); letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: break-word; }
  h1 { font-size: 3rem; line-height: 1.05; letter-spacing: -0.03em; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.5rem; font-weight: 500; }
  h4 { font-size: 1.125rem; font-weight: 500; }

  .display { font-family: var(--font-sans); font-weight: 600; font-size: 3.75rem; line-height: 1.05; letter-spacing: -0.03em; color: var(--color-ink); }
  .display-serif { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 15, "WONK" 0; font-style: italic; color: var(--color-ink); }
  .subhead { font-size: 1.125rem; line-height: 1.55; color: var(--color-ink-soft); font-weight: 400; }

  .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-mute); display: inline-block; }

  /* Badge */
  .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px; background: var(--color-accent-tint); color: var(--color-accent-dark); }
  .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); display: inline-block; }
  .badge-ink { background: var(--color-ink); color: var(--color-paper-light); }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; border-radius: 6px; border: 1px solid var(--color-accent); background: var(--color-accent); color: #FFFFFF; text-decoration: none; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
  .btn:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
  .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
  .btn-ghost:hover { background: var(--color-ink); color: var(--color-paper-light); border-color: var(--color-ink); }
  .btn-lg { padding: 14px 24px; font-size: 15px; }
  .btn-arrow::after { content: "→"; transition: transform 120ms ease; }
  .btn:hover .btn-arrow::after, a.btn:hover::after { transform: translateX(2px); }

  /* Top bar */
  .topbar { padding: 20px var(--page-gutter); border-bottom: 0.5px solid var(--color-border-subtle); position: sticky; top: 0; background: rgba(236, 241, 237, 0.85); backdrop-filter: blur(8px); z-index: 50; }
  .topbar-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
  .topbar-logo { display: inline-flex; align-items: center; height: 37px; text-decoration: none; transition: opacity 120ms ease; }
  .topbar-logo:hover { opacity: 0.75; }
  .topbar-logo svg { height: 37px; width: auto; display: block; }
  .topbar nav { display: flex; gap: 28px; align-items: center; }
  .topbar nav a { font-size: 14px; color: var(--color-ink-soft); text-decoration: none; transition: color 120ms ease; }
  .topbar nav a:hover { color: var(--color-accent); }
  .topbar nav a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .topbar nav a.cta-link { padding: 8px 16px; background: var(--color-ink); color: var(--color-paper-light); border-radius: 6px; font-weight: 500; }
  .topbar nav a.cta-link:hover { background: var(--color-accent); color: #fff; }
  .topbar nav a.cta-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  /* Hamburger */
  .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--color-ink); align-items: center; justify-content: center; flex-shrink: 0; border-radius: 6px; transition: background 120ms ease; }
  .hamburger:hover { background: var(--color-paper-deep); }
  .hamburger-lines { display: flex; flex-direction: column; gap: 5px; width: 20px; pointer-events: none; }
  .hamburger-lines span { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; }
  .hamburger[aria-expanded="true"] .hamburger-lines span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .hamburger[aria-expanded="true"] .hamburger-lines span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] .hamburger-lines span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Hero */
  .hero { padding: 96px var(--page-gutter) 80px; border-bottom: 0.5px solid var(--color-border-subtle); overflow: hidden; }
  .hero-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 64px; align-items: start; }
  .hero-text { min-width: 0; }
  .hero-visual { position: relative; border-radius: 12px; overflow: hidden; }
  .hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-visual::after { content: ""; position: absolute; inset: 0; border: 0.5px solid rgba(10,9,8,0.1); border-radius: 12px; pointer-events: none; }
  .hero .badge { margin-bottom: 28px; }
  .hero h1 { margin-bottom: 24px; }
  .hero .subhead { margin-bottom: 36px; font-size: 1.25rem; line-height: 1.5; }
  .hero .cta-row { display: flex; gap: 12px; align-items: center; }
  .hero .meta-line { margin-top: 56px; padding-top: 24px; border-top: 0.5px solid var(--color-border-faint); display: flex; gap: 40px; flex-wrap: wrap; }
  .hero .meta-item { display: flex; flex-direction: column; gap: 4px; }
  .hero .meta-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-mute); }
  .hero .meta-value { font-size: 14px; color: var(--color-ink); font-weight: 500; }
  .hero .eyebrow { display: block; margin-bottom: 20px; }

  /* Section pattern */
  section { padding: 96px var(--page-gutter); border-bottom: 0.5px solid var(--color-border-subtle); }
  section.section-tight { padding: 64px var(--page-gutter); }
  .section-inner { max-width: 1280px; margin: 0 auto; }
  .section-head { margin-bottom: 56px; }
  .section-head .eyebrow { margin-bottom: 14px; }
  .section-head h2 { }
  .section-head .rule { height: 2px; background: var(--color-accent); width: 48px; margin-top: 18px; }
  .section-head .subhead { margin-top: 20px; }

  /* AIPQ framework section */
  .framework-block { border: 0.5px solid var(--color-border-subtle); border-radius: 16px; overflow: hidden; }
  .framework-name { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 15, "WONK" 0; font-style: italic; font-size: 5rem; line-height: 1; letter-spacing: -0.02em; color: var(--color-ink); margin-bottom: 24px; }
  .framework-full { font-size: 1.25rem; color: var(--color-ink-soft); margin-bottom: 8px; font-weight: 500; }
  .framework-desc { font-size: 15px; color: var(--color-ink-soft); line-height: 1.6; margin-bottom: 40px; }
  .framework-block-head { background: var(--color-ink); padding: 48px 48px 40px; }
  .framework-block-body { background: var(--color-paper-light); padding: 40px 48px 48px; }
  .framework-block-head .framework-name { color: var(--color-paper-light); }
  .framework-block-head .framework-full { color: rgba(244,247,244,0.65); }
  .framework-block-head .framework-desc { color: rgba(244,247,244,0.7); margin-bottom: 0; }
  .framework-block-head .badge { background: rgba(244,247,244,0.08); color: rgba(244,247,244,0.75); border: 0.5px solid rgba(244,247,244,0.25); }
  .framework-block-head .badge-dot { background: var(--color-accent); }
  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border-subtle); border: 0.5px solid var(--color-border-subtle); border-radius: 12px; overflow: hidden; }
  .pillar { background: var(--color-paper-light); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
  .pillar-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--color-accent); font-weight: 500; }
  .pillar-name { font-size: 15px; font-weight: 500; color: var(--color-ink); }
  .pillar-desc { font-size: 14px; color: var(--color-ink-soft); line-height: 1.5; }

  /* Differentiation block */
  .diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  #product .diff-grid { grid-template-columns: repeat(2, 1fr); }
  #how-it-works .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .diff-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--color-paper-light); border: 0.5px solid var(--color-border-subtle); border-radius: 12px; }
  .diff-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-mute); padding-bottom: 12px; border-bottom: 0.5px solid var(--color-border-subtle); }
  .diff-card h3 { font-size: 1.125rem; font-weight: 500; margin: 0; }
  .diff-card p { font-size: 15px; color: var(--color-ink-soft); line-height: 1.6; margin: 0; }
  .diff-card .crossed { color: var(--color-ink-mute); text-decoration: line-through; text-decoration-thickness: 1px; }

  /* Callout */
  .callout-research { background: var(--color-accent-tint); border-left: 2px solid var(--color-accent); padding: 24px 28px; font-size: 14px; line-height: 1.6; color: var(--color-accent-dark); border-radius: 0 8px 8px 0; }
  .callout-research strong { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px; font-weight: 600; }

  /* Founder */
  .founder-grid { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: stretch; }
  .founder-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-mute); padding-top: 8px; border-top: 1px solid var(--color-ink); }
  .founder-content { max-width: 820px; }
  .founder-content p { font-size: 15px; line-height: 1.7; color: var(--color-ink); margin-bottom: 16px; }
  .founder-content p.lede { font-size: 1.125rem; color: var(--color-ink); line-height: 1.55; }
  .founder-credentials { margin-top: 24px; padding-top: 24px; border-top: 0.5px solid var(--color-border-subtle); display: flex; gap: 32px; flex-wrap: wrap; }
  .founder-credentials .cred-item { display: flex; flex-direction: column; gap: 4px; }
  .founder-credentials .cred-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-mute); }
  .founder-credentials .cred-value { font-size: 14px; color: var(--color-ink); font-weight: 500; }
  .founder-photo { border-radius: 12px; overflow: hidden; position: relative; }
  .founder-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
  .founder-photo::after { content: ""; position: absolute; inset: 0; border: 0.5px solid rgba(10,9,8,0.1); border-radius: 12px; pointer-events: none; }

  /* Founder social links */
  #founder .founder-social { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
  #founder .social-icon-link { display: inline-flex; align-items: center; opacity: 1; transition: opacity 0.15s ease; }
  #founder .social-icon-link:hover { opacity: 0.5; }
  #founder .social-icon-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  #founder .social-icon-link img { display: block; width: 28px; height: 28px; }

  /* About section two-column */
  .about-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; }
  .about-image { border-radius: 12px; overflow: hidden; position: relative; }
  .about-image img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
  .about-image::after { content: ""; position: absolute; inset: 0; border: 0.5px solid rgba(10,9,8,0.1); border-radius: 12px; pointer-events: none; }

  /* Sponsor section */
  .sponsor-section { background: var(--color-paper); border-bottom: none; }

  /* CTA block */
  .cta-section { background: var(--color-ink); color: var(--color-paper-light); padding: 128px var(--page-gutter); text-align: center; border-bottom: none; }
  .cta-section .section-inner { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .cta-section .eyebrow { color: rgba(244, 247, 244, 0.5); }
  .cta-section h2 { color: var(--color-paper-light); font-size: 2.875rem; max-width: none; line-height: 1.1; letter-spacing: -0.025em; margin-top: 14px; }
  .cta-section p { color: rgba(244,247,244,0.75); font-size: 1.0625rem; margin-top: 20px; }
  .cta-section .cta-actions { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
  .cta-section .btn-ghost { color: rgba(244, 247, 244, 0.75); border-color: rgba(244,247,244,0.25); background: transparent; }
  .cta-section .btn-ghost:hover { background: var(--color-paper-light); color: var(--color-ink); border-color: var(--color-paper-light); }

  /* Footer */
  footer { padding: 48px var(--page-gutter) 32px; flex-shrink: 0; }
  .footer-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 24px; }
  .footer-logo { display: inline-flex; align-items: center; height: 28px; text-decoration: none; transition: opacity 120ms ease; }
  .footer-logo:hover { opacity: 0.65; }
  .footer-logo svg { height: 28px; width: auto; display: block; }
  footer .meta { display: flex; gap: 32px; align-items: baseline; }
  footer .meta a { font-size: 13px; color: var(--color-ink-mute); text-decoration: none; }
  footer .meta a:hover { color: var(--color-accent); }
  footer .meta a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  footer .eyebrow { font-size: 11px; }

  /* Category gap */
  .gap-intro { font-size: 15px; color: var(--color-ink-soft); line-height: 1.6; margin-top: 20px; margin-bottom: 0; }
  .gap-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
  .gap-stat { text-align: left; display: flex; flex-direction: column; }
  #gap-stat-bar { background: var(--color-paper-light); border-radius: 16px; border: 0.5px solid var(--color-border-subtle); padding: 36px 32px; }
  #gap-stat-dots { background: var(--color-paper-light); border-radius: 16px; border: 0.5px solid var(--color-border-subtle); padding: 36px 32px; }
  .gap-stat-headline { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 500; color: var(--color-ink); letter-spacing: -0.03em; margin: 0 0 28px; line-height: 1.2; }
  .gap-stat-caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-mute); margin-top: auto; padding-top: 20px; text-align: right; }
  .gap-stat-pull { font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 72, "wght" 400, "SOFT" 100, "WONK" 0; }

  /* Numstat visual */
  .gap-bar-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
  .gap-numstat { display: flex; flex-direction: column; align-items: center; width: 100%; }
  /* Donut chart */
  .gap-donut-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 240px; height: 240px; flex-shrink: 0; }
  .gap-donut-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .gap-donut-track { stroke: var(--color-paper-deep); }
  .gap-donut-arc { stroke: var(--color-accent); stroke-dasharray: 314.16; stroke-dashoffset: 314.16; }
  .gap-numstat-number { font-family: var(--font-sans); font-size: 3.5rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--color-ink); display: flex; align-items: baseline; flex-shrink: 0; position: relative; z-index: 1; }
  .gap-numstat-count { }
  .gap-numstat-rule { display: none; }
  .gap-numstat-lines { display: block; width: fit-content; text-align: center; border-top: 2px solid rgba(244,247,244,0.25); padding-top: 16px; margin-top: 20px; }
  .gap-line-break { display: none; }
  .gap-numstat-line { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.65; color: rgba(244,247,244,0.55); display: inline; white-space: nowrap; }
  .js .gap-numstat-line { opacity: 0; transition: opacity 350ms ease-out; }

  /* Dot grid visual */
  .gap-dots-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
  .gap-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; aspect-ratio: 1 / 1; max-width: 300px; width: 100%; }
  .gap-dot { aspect-ratio: 1 / 1; border-radius: 50%; background: var(--color-paper-deep); opacity: 0; transition: opacity 200ms ease-out, background 500ms cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes gap-dot-ping { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .gap-numstat-line, .gap-dot { transition: none !important; animation: none !important; }
    .btn, a { transition: none !important; }
    .hero-scroll-arrow { animation: none !important; }
  }

  /* Product section */
  .product-card { background: var(--color-paper-light); border: 0.5px solid var(--color-border-subtle); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
  .product-card .card-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-dark); background: var(--color-accent-tint); padding: 4px 10px; border-radius: 999px; width: fit-content; margin-bottom: 4px; }
  .product-card h3 { font-size: 16px; font-weight: 500; margin: 0; }
  .product-card p { font-size: 15px; color: var(--color-ink-soft); line-height: 1.6; margin: 0; }


  /* ============================================================
     SCORECARD SAMPLE SECTION
     ============================================================ */
  .scorecard-grid { display: grid; grid-template-columns: 1fr 1.4fr 1.1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
  .sc-card { background: var(--color-paper-light); border: 0.5px solid var(--color-border-subtle); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; }
  .sc-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
  .sc-card-head h3 { font-size: 13px; font-weight: 500; margin: 0; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-mute); }

  /* Score card (dark) */
  .sc-card.is-dark { background: var(--color-ink); color: var(--color-paper-light); border-color: var(--color-ink); }
  .sc-card.is-dark .sc-card-head h3 { color: rgba(244,247,244,0.55); }
  .sc-score-value { font-family: var(--font-sans); font-size: 4.75rem; font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--color-paper-light); font-variant-numeric: tabular-nums; margin: 8px 0 24px; }
  .sc-score-value .denom { color: rgba(244,247,244,0.4); font-size: 2rem; }
  .sc-archetype-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,247,244,0.5); margin-bottom: 8px; display: block; }
  .sc-archetype-name { font-family: var(--font-sans); font-size: 1.375rem; font-weight: 500; color: var(--color-paper-light); letter-spacing: -0.02em; margin-bottom: 12px; }
  .sc-archetype-desc { font-size: 14px; line-height: 1.55; color: rgba(244,247,244,0.7); }
  .sc-divider { height: 0.5px; background: rgba(244,247,244,0.15); margin: 24px 0 20px; margin-top: auto; }

  /* Radar */
  .sc-radar-wrap { display: flex; justify-content: center; flex: 1; align-items: center; }
  .sc-radar-svg { width: 100%; max-width: 440px; height: auto; }
  .sc-radar-axis { stroke: var(--color-ink-faint); stroke-width: 0.5; opacity: 0.5; }
  .sc-radar-ring { fill: none; stroke: var(--color-ink-faint); stroke-width: 0.5; opacity: 0.3; }
  .sc-radar-ring-outer { stroke-width: 1; opacity: 0.6; }
  .sc-radar-fill { fill: var(--color-accent); fill-opacity: 0.15; stroke: var(--color-accent); stroke-width: 1.5; }
  .sc-radar-point { fill: var(--color-paper-light); stroke: var(--color-accent); stroke-width: 2.5; cursor: pointer; transition: r 150ms ease, fill 150ms ease; }
  .sc-radar-point:hover, .sc-radar-point.is-active { fill: var(--color-accent); r: 13; }
  .sc-radar-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; fill: var(--color-ink-soft); text-transform: uppercase; cursor: pointer; transition: fill 150ms ease, font-weight 150ms ease; }
  .sc-radar-label:hover, .sc-radar-label.is-active { fill: var(--color-accent-dark); font-weight: 600; }

  /* Mobile radar dimension list: hidden on desktop (shown via mobile block below) */
  .sc-dim-list { display: none; }

  .sc-pillar-callout { margin-top: auto; padding-top: 18px; border-top: 0.5px solid var(--color-border-subtle); }
  .sc-pillar-callout .pc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
  .sc-pillar-callout .pc-name { font-size: 14px; font-weight: 500; color: var(--color-ink); }
  .sc-pillar-callout .pc-score { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
  .sc-pillar-callout .pc-reading { font-size: 14px; color: var(--color-ink-soft); line-height: 1.55; }

  /* 2x2 */
  .sc-matrix-wrap { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 1fr 28px; gap: 8px; flex: 1; max-width: 360px; margin: 0 auto; width: 100%; }
  .sc-y-axis-label { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-mute); display: flex; align-items: center; justify-content: space-between; }
  .sc-x-axis-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-mute); padding-top: 8px; grid-column: 2; }
  .sc-quadrant-callout { margin-top: auto; padding-top: 12px; border-top: 0.5px solid var(--color-border-subtle); font-size: 14px; line-height: 1.45; color: var(--color-ink-soft); }
  .sc-matrix-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; border: 0.5px solid var(--color-border-strong); border-radius: 8px; overflow: hidden; position: relative; background: var(--color-paper); }
  .sc-quadrant { padding: 12px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: background 150ms ease; position: relative; border: 0.5px solid var(--color-border-faint); }
  .sc-quadrant:hover, .sc-quadrant.is-active { background: var(--color-accent-tint); }
  .sc-quadrant.is-buyer { background: var(--color-accent-tint); }
  .sc-quadrant .q-num { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-mute); letter-spacing: 0.06em; }
  .sc-quadrant .q-name { font-size: 12px; font-weight: 500; color: var(--color-ink); line-height: 1.3; }
  .sc-buyer-dot { position: absolute; width: 14px; height: 14px; background: var(--color-accent); border: 3px solid var(--color-paper); border-radius: 50%; transform: translate(-50%, 50%); z-index: 2; pointer-events: none; left: 50%; bottom: 50%; }
  .sc-buyer-dot::after { content: ""; position: absolute; inset: -7px; border: 1px dashed var(--color-accent); border-radius: 50%; opacity: 0.4; }
  .sc-quadrant-callout strong { color: var(--color-ink); font-weight: 500; }

  /* Mobile */
  @media (max-width: 880px) {
    .pillars, .diff-grid { grid-template-columns: 1fr; }
    .gap-stats-row { grid-template-columns: 1fr; gap: 28px; align-items: start; }
    .gap-stat-headline { font-size: 1.125rem; }
    .gap-dots { gap: 8px; max-width: 240px; }
    .gap-donut-wrap { width: 180px; height: 180px; }
    .gap-numstat-number { font-size: 2.5rem; }
    .gap-numstat-line { white-space: normal; }
    .gap-numstat-lines { margin-top: 14px; padding-top: 14px; }
    #product .diff-grid { grid-template-columns: 1fr; }
    #methodology .diff-grid { grid-template-columns: 1fr; }
    #how-it-works .diff-grid { grid-template-columns: 1fr; }
    .product-card-illus { max-width: 160px; height: auto; margin: 0 auto 8px; }
    .pillars { gap: 0.5px; }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
    .display { font-size: 2.25rem; line-height: 1.1; }
    .hero { padding-top: 48px; padding-bottom: 48px; }
    .hero-inner { grid-template-columns: 1fr; gap: 0; }
    .hero-visual { display: none; }
    .hero .subhead { font-size: 1.0625rem; }
    .hero .cta-row { flex-direction: column; align-items: stretch; }
    .hero .meta-line { margin-top: 36px; gap: 20px; }
    section { padding: 48px 20px; }
    .cta-section { padding: 80px 20px; }
    .cta-section h2 { font-size: 2rem; }
    .cta-section .cta-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 400px; }
    .cta-section .cta-actions .btn { width: 100%; justify-content: center; }
    .section-head { margin-bottom: 40px; }
    .framework-block-head { padding: 32px 20px 24px; }
    .framework-block-body { padding: 24px 20px 32px; }
    .framework-name { font-size: 3.25rem; }
    .founder-grid { grid-template-columns: 1fr; gap: 16px; }
    .founder-photo { width: 160px; margin-bottom: 8px; }
    .about-grid { grid-template-columns: 1fr; }
    .about-image { display: none; }
    .topbar-logo { height: 32px; }
    .topbar-logo svg { height: 32px; }
    .hamburger { display: flex; }
    .topbar nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--color-paper); border-bottom: 0.5px solid var(--color-border-subtle); padding: 0 24px 20px; display: none; z-index: 49; }
    .topbar nav.is-open { display: flex; }
    .topbar nav a:not(.cta-link) { display: block; }
    .topbar nav a { padding: 14px 0; font-size: 15px; border-bottom: 0.5px solid var(--color-border-faint); color: var(--color-ink-soft); }
    .topbar nav a.cta-link { margin-top: 8px; border-bottom: none; text-align: center; width: 100%; }
    .scorecard-grid { grid-template-columns: 1fr; }
    .sc-score-value { font-size: 4rem; }
    .pillar-axes { grid-template-columns: 1fr; }
    .pillar-axis:first-child { border-right: none; border-bottom: 0.5px solid var(--color-border-subtle); }
    .pillar-axis { padding: 28px 24px; }
    footer { padding: 36px 20px 24px; }
    footer .meta { gap: 4px 12px; flex-wrap: wrap; min-width: 0; width: 100%; }
    footer .meta a { padding: 10px 4px; font-size: 14px; }
    .footer-inner { align-items: flex-start; }
    .gap-bridge-lead { margin-top: 20px; }
    .gap-pivot { font-size: 1.125rem; margin-top: 48px; }
    /* Tap target upgrades */
    .hamburger { padding: 12px; }
    .btn { min-height: 44px; }
    /* Social icon link tap target (About page) */
    #founder .social-icon-link { padding: 8px; }
    /* Scroll-to-explore indicator */
    .hero-scroll { padding: 12px 14px; }
  }

  /* ============================================================
     ANIMATIONS & TRANSITIONS
     ============================================================ */

  /* Hover lifts */
  .btn {
    transition: background 120ms ease-out, border-color 120ms ease-out, transform 200ms ease-out;
  }
  .btn:hover { transform: translateY(-2px); }

  .diff-card, .product-card, .sc-card, .card, .feature-card, #gap-stat-bar, #gap-stat-dots {
    transition: transform 220ms ease-out, border-color 220ms ease-out, background 220ms ease-out;
  }
  .diff-card:hover, .product-card:hover, .sc-card:not(.is-dark):hover,
  .card:hover, .feature-card:hover, #gap-stat-dots:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    background: var(--color-paper-light);
  }
  .sc-card.is-dark:hover, #gap-stat-bar:hover { transform: translateY(-4px); border-color: var(--color-accent); }

  /* Scroll-entry fade-up - IntersectionObserver (all browsers) */
  @keyframes voranta-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .vfade { opacity: 0; transform: translateY(18px); transition: opacity 280ms ease-out, transform 280ms ease-out; }
  .vfade.vfade-in { opacity: 1; transform: none; }

  /* Methodology section uses a 2x2 manifesto grid */
  #methodology .diff-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Pillar axes - two-column axis-grouped layout */
  .pillar-axes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 0.5px solid var(--color-border-subtle);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-paper-light);
  }
  .pillar-axis {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .pillar-axis:first-child {
    border-right: 0.5px solid var(--color-border-subtle);
  }
  .pillar-axis-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 18px;
    border-bottom: 0.5px solid var(--color-border-subtle);
  }
  .pillar-axis-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 500;
  }
  .pillar-axis-name {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: -0.02em;
    margin: 0;
  }
  .pillar-axis-desc {
    font-size: 13px;
    color: var(--color-ink-soft);
    line-height: 1.55;
    margin: 0;
  }
  .pillar-axis-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* Pillar item - new dimensional layout with number on the left */
  .pillar-axis-list .pillar {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    align-items: start;
    padding: 0;
    background: transparent;
  }
  .pillar-axis-list .pillar-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    font-weight: 500;
    padding-top: 2px;
  }
  .pillar-axis-list .pillar-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .pillar-axis-list .pillar-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
  }
  .pillar-axis-list .pillar-desc {
    font-size: 14px;
    color: var(--color-ink-soft);
    line-height: 1.5;
  }
  /* Founding sponsor section - single card, compact icon grid */
  #sponsors .section-head { margin-bottom: 36px; }
  #sponsors .sponsor-card { margin: 0; padding: 44px; border: 0.5px solid var(--color-border-subtle); border-radius: 16px; background: var(--color-paper-light); }
  #sponsors .sponsor-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 44px; }
  #sponsors .sponsor-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
  #sponsors .sponsor-item-icon { display: flex; color: var(--color-accent); }
  #sponsors .sponsor-item-icon svg { width: 26px; height: 26px; display: block; }
  #sponsors .sponsor-item-body { display: flex; flex-direction: column; gap: 6px; }
  #sponsors .sponsor-item-name { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--color-ink); margin: 0; }
  #sponsors .sponsor-item-desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; }

  @media (max-width: 880px) {
    /* Sponsors mobile overrides live here, after the desktop sponsors rules, so they win by source order */
    #sponsors .sponsor-card { padding: 28px 24px; }
    #sponsors .sponsor-grid { grid-template-columns: 1fr; gap: 24px; }
    #methodology .diff-grid { grid-template-columns: 1fr; }
    .pillar-axes { grid-template-columns: 1fr; }
    .pillar-axis { padding: 28px 24px; }
    .pillar-axis:first-child { border-right: none; border-bottom: 0.5px solid var(--color-border-subtle); }
    .framework-teaser-row { flex-direction: column; align-items: flex-start; }
    /* P4: at 880px, CTA column (scorecard + button) stacks below copy; button full-width */
    .framework-teaser-row > div:last-child { width: 100%; align-items: stretch; }
    .framework-teaser-row .btn { width: 100%; justify-content: center; }
    .teaser-scorecard-illus { max-width: 260px; }
  }

/* ===== Assessment (Research Conversion Index) ===== */
.assessment { padding: 56px var(--page-gutter) 88px; }
/* Results area uses 1160px so the radar card gets meaningful width.
   Quiz and intro screens are capped below to keep reading width comfortable. */
.assessment .section-inner { max-width: 1160px; margin: 0 auto; }
.dri-screen[hidden] { display: none; }

/* Intro: two columns. Copy on the left (width owned by the grid track), the RCI
   radar illustration fills the space on the right. */
.dri-screen[data-screen="intro"] { display: grid; grid-template-columns: 1fr 1.08fr; gap: 40px; align-items: center; margin-inline: 0; }
/* The grid display above ties on specificity with .dri-screen[hidden] and would
   otherwise win on source order, keeping the intro visible once hidden. This
   override (extra [hidden] attribute) restores the hide behaviour. */
.dri-screen[data-screen="intro"][hidden] { display: none; }
.dri-intro-copy { min-width: 0; }
.dri-screen[data-screen="intro"] .display { margin: 16px 0 18px; }
.dri-screen[data-screen="intro"] .btn { margin-top: 28px; }
/* Radar illustration column */
.dri-intro-illus { min-width: 0; }
.dri-intro-radar { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
/* Cap the quiz surface so questions/options/progress stay at a readable width
   even though the outer container is now 1160px. */
.dri-screen[data-screen="quiz"] { max-width: 760px; margin-inline: auto; }

/* Progress */
.dri-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.dri-progress-bar { flex: 1; height: 4px; background: var(--color-border-subtle); border-radius: 999px; overflow: hidden; }
.dri-progress-bar span { display: block; height: 100%; width: 0; background: var(--color-accent); border-radius: 999px; transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.dri-progress-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-mute); white-space: nowrap; }

/* Question */
.dri-q-text { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 20px; max-width: 760px; min-height: 2em; }
.dri-options { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.dri-option { text-align: left; padding: 15px 20px; font-family: var(--font-sans); font-size: 15px; line-height: 1.45; color: var(--color-ink); background: var(--color-paper-light); border: 1px solid var(--color-border-subtle); border-radius: 12px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; }
.dri-option:hover { border-color: var(--color-accent); background: var(--color-accent-tint); }
.dri-option:active { transform: translateY(1px); }
.dri-option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.dri-option.is-selected { border-color: var(--color-accent); background: var(--color-accent-tint); color: var(--color-accent-dark); }

/* Quiz navigation row (Back / Continue) */
.dri-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; max-width: 760px; }
.dri-next[disabled], .dri-next[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Preserve h3 visual size when promoted to h2 for heading-order reasons */
.h3-size { font-size: 1.5rem; font-weight: 500; }

/* Results layout: unified 3-card scorecard row matching AIPQ quality bar */
/* .scorecard-grid column template (1fr 1.4fr 1.1fr) is the shared base.
   The RCI version uses the same columns with a slightly tighter center card. */
.dri-scorecard-grid { grid-template-columns: 1fr 1.5fr 1fr; }
.dri-score-card .sc-score-value { margin-top: 12px; }
/* The divider uses margin-top: auto (inheriting the base .sc-divider rule) so the
   score sits at top and the archetype block anchors at the bottom of the card,
   filling any height without stranded blank space. */

/* Sponsor mechanism explainer: sits below the scorecard, above both CTAs.
   Shows how a licensed instrument turns each result into a CRM-ready lead. */
.dri-sponsor { margin-top: 44px; padding-top: 40px; border-top: 0.5px solid var(--color-border-subtle); }
.dri-sponsor-head { max-width: none; }
.dri-sponsor-head h3 { margin: 10px 0 12px; }
.dri-sponsor-head p { font-size: 1.0625rem; line-height: 1.55; color: var(--color-ink-soft); margin: 0; }
/* Flow diagram: three stage cards joined by chevron arrows */
.dri-pipe { display: flex; align-items: stretch; gap: 12px; margin-top: 32px; }
.pipe-node { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 20px; background: var(--color-paper-light); border: 0.5px solid var(--color-border-subtle); border-radius: 16px; }
.pipe-glyph { width: 48px; height: 48px; display: block; flex: none; }
.pipe-label { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--color-ink-soft); }
.pipe-arrow { display: flex; align-items: center; flex: none; }
.pipe-arrow svg { display: block; }

/* Primary CTA block: left-accent pattern (matches .callout-research). */
.dri-cta-block { margin-top: 24px; padding: 28px 32px; background: var(--color-accent-tint); border-left: 3px solid var(--color-accent); border-radius: 0 16px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dri-cta-frame { font-size: 1.0625rem; line-height: 1.5; color: var(--color-ink-soft); margin: 0; }

/* Quadrant: distinct focus-visible ring that is not confused with is-buyer/is-active tint */
.sc-quadrant:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Capture: sits directly below the result, above the sponsor explainer */
.dri-capture { margin-top: 32px; padding: 28px; border: 0.5px solid var(--color-border-subtle); border-radius: 16px; background: var(--color-paper-light); }
.dri-capture-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dri-capture-copy { display: flex; flex-direction: column; gap: 8px; }
.dri-capture-copy h3 { margin: 0; }
.dri-capture-form { display: flex; gap: 10px; flex-wrap: wrap; }
.dri-capture-form[hidden] { display: none; } /* the display:flex above otherwise overrides the [hidden] attribute set on success */
.dri-capture-form input[type="email"] { padding: 12px 16px; font-family: var(--font-sans); font-size: 15px; color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-border-strong); border-radius: 6px; min-width: 240px; }
.dri-capture-form input[type="email"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
.dri-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dri-capture-msg { margin: 16px 0 0; font-size: 14px; }
.dri-capture-msg.is-ok { color: var(--color-accent-dark); }
/* Error state uses ink + weight 500 so it reads heavier than ambient grey text,
   clearly more urgent than the cyan success state. (Red is barred by design system.) */
.dri-capture-msg.is-error { color: var(--color-ink); font-weight: 500; }

/* Radar focus state - keyboard focus is DISTINCT from hover.
   Hover/is-active: fill accent + r 13 (no stroke change).
   Focus-visible: fill accent + r 13 + thicker dark-accent stroke so keyboard users
   see a clear ring that mouse hover does not show. */
#dri-radar-svg .sc-radar-point:focus-visible { outline: none; fill: var(--color-accent); r: 13; stroke: var(--color-accent-dark); stroke-width: 4; }

/* Inline assessment CTA (homepage) */
.inline-cta-section { background: var(--color-paper); padding: 64px var(--page-gutter); }
.inline-cta { max-width: 880px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.inline-cta p { font-size: 1.0625rem; line-height: 1.5; color: var(--color-ink-soft); margin: 0; }

@media (max-width: 880px) {
  .assessment { padding: 48px 20px; }
  /* Intro collapses to a single column; the radar (like the results radar) is
     hidden on mobile, where its axis labels would be too small to read. */
  .dri-screen[data-screen="intro"] { display: block; }
  .dri-intro-illus { display: none; }
  .dri-scorecard-grid { grid-template-columns: 1fr; }
  /* Pipeline stacks vertically; chevrons rotate to point downward */
  .dri-pipe { flex-direction: column; }
  .pipe-arrow { align-self: center; transform: rotate(90deg); }
  /* FIX 2: Reduce min-height so answers are visible without scrolling on 320px phones */
  .dri-q-text { font-size: 1.25rem; min-height: 3em; }
  .dri-capture-inner { flex-direction: column; align-items: stretch; }
  .dri-capture-form { flex-direction: column; }
  .dri-capture-form input[type="email"] { min-width: 0; width: 100%; }
  .dri-capture-form .btn { width: 100%; justify-content: center; }
  .dri-cta-block { flex-direction: column; align-items: stretch; }
  .dri-cta-block .btn { width: 100%; justify-content: center; }
  .inline-cta { flex-direction: column; align-items: flex-start; }
  .inline-cta .btn { width: 100%; justify-content: center; }
  .dri-nav { flex-direction: row; }
  .dri-nav .dri-next { flex: 1; justify-content: center; }
  /* FIX 3: Back button — match btn-lg height AND share width equally with Continue */
  .dri-back { padding: 14px 24px; flex: 1; justify-content: center; }
  /* Assessment results: scroll-margin compensates for 72px sticky topbar */
  .dri-app { scroll-margin-top: 80px; }
  /* All named section anchors scroll clear of sticky topbar */
  [id] { scroll-margin-top: 80px; }

  /* FIX 1: Radar legibility — hide SVG on mobile; show ranked dimension list instead.
     The .sc-radar-wrap class is shared with the 2x2 quadrant card, so scope SVG-only. */
  #dri-radar-svg { display: none; }
  /* sr-only dimension list (desktop fallback for SR) is replaced by visible list on mobile */
  #dri-dimension-list { display: none; }
  /* Dimension ranked list: visible on mobile only */
  .sc-dim-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .sc-dim-list-row { display: flex; flex-direction: column; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; width: 100%; }
  .sc-dim-list-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
  .sc-dim-list-meta { display: flex; align-items: baseline; justify-content: space-between; }
  .sc-dim-list-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft); }
  .sc-dim-list-score { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-ink-mute); }
  .sc-dim-list-bar-track { height: 4px; background: var(--color-border-subtle); border-radius: 999px; overflow: hidden; width: 100%; }
  .sc-dim-list-bar-fill { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1); width: 0; }

  /* Full-bleed hero mobile overrides (index.html only) */
  .hero--fullbleed {
    --topbar-h: 72px; /* mobile topbar: 32px logo + 20px top + 20px bottom */
    min-height: 100svh;
  }
  .hero--fullbleed .hero-copy {
    top: 54%;
    transform: translateY(-50%);
    bottom: auto;
  }
  .hero--fullbleed .display {
    font-size: 2.25rem;
    line-height: 1.1;
  }
  .hero--fullbleed .subhead {
    font-size: 1.5rem; /* ≥24px required for WCAG large-text (3:1) basis */
  }
  /* Topbar near-opaque on index mobile — dome bleed washes out the frosted bar */
  .page-index .topbar {
    background: rgba(236, 241, 237, 0.97);
  }
}

/* Image treatment tokens (§5.1–5.2 — duplicated from globals.css so static pages can apply the
   classes; globals.css is a Next.js artifact and is not served to static HTML pages) */
.img-brand-tone { filter: saturate(0.45) brightness(1.02) contrast(1.05); }

/* §5.2 — circular crop exception for founder/author headshots only (≤200px wide) */
.img-avatar {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.img-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.5px solid rgba(10, 9, 8, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

/* ============================================================
   PRODUCT CARD ILLUSTRATIONS (P1)
   Inline SVG illustrations at top of each product card.
   ~180x100px, monoline, grey-ramp strokes, cyan on one element.
   ============================================================ */
.product-card-illus {
  width: 100%;
  height: 120px;
  display: block;
  margin-bottom: 4px;
}

/* ============================================================
   FRAMEWORK TEASER SCORECARD (P4)
   Sample scorecard output illustration as a flex item in
   .framework-teaser-row, above the CTA button in its column.
   ============================================================ */
.framework-teaser-row { display: flex; align-items: center; gap: 64px; flex-wrap: wrap; }
.framework-teaser-copy { max-width: 660px; }
/* Reuse the section-head pattern (eyebrow, rule, subhead spacing + the cyan rule);
   drop its 56px bottom margin so the copy stays vertically centred against the scorecard. */
.framework-teaser-copy .section-head { margin-bottom: 0; }
.framework-teaser-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; flex: 1; }
.teaser-scorecard-illus {
  flex-shrink: 0;
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  align-self: center;
}

/* Accessibility utilities */
.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  padding: 10px 20px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* Suppress focus ring when main receives programmatic focus from skip-to-content */
main:focus { outline: none; }

/* Sticky topbar offset: scroll-margin-top keeps anchor targets from sliding under the topbar.
   77px = desktop topbar height (37px logo + 20px top + 20px bottom). */
#main { scroll-margin-top: 77px; }
#gap  { scroll-margin-top: 77px; }

/* ============================================================
   FULL-BLEED HERO (§5.5 — index.html only)
   Scoped entirely to .hero--fullbleed; base .hero rules are
   left intact.
   ============================================================ */

/* Pull the hero under the sticky topbar (topbar: 37px logo + 20px top + 20px bottom = 77px).
   Use a CSS custom property so both margin-top and min-height stay in sync. */
.hero--fullbleed {
  --topbar-h: 77px;
  position: relative;
  margin-top: calc(-1 * var(--topbar-h));
  min-height: 100svh;
  padding: 0;
  border-bottom: 0.5px solid var(--color-border-subtle);
  overflow: hidden;
  display: block; /* override any inherited flex/grid from base .hero */
  background-color: var(--color-ink); /* fallback if hero img fails to load */
}

/* Background image: fill the entire section edge-to-edge */
.hero--fullbleed .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* No border-radius, no ::after hairline — §5.5 explicitly exempts full-bleed container */
  border-radius: 0;
  z-index: 0;
}

/* Flat uniform ink tint — NOT a gradient. Single rgba value only.
   Desktop and mobile: 0.55 (at the §5.5 hard cap). */
.hero--fullbleed .hero-tint {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.55);
  z-index: 1;
  pointer-events: none;
}

/* Copy block: vertically centered, full-width within content-grid gutters */
.hero--fullbleed .hero-copy {
  position: absolute;
  top: 54%;
  transform: translateY(calc(-50% + 0.6rem));
  left: max(var(--page-gutter), calc((100vw - 1280px) / 2 + 64px));
  right: max(var(--page-gutter), calc((100vw - 1280px) / 2 + 64px));
  z-index: 2;
}

/* Text colors — all cream (#ECF1ED) over the tinted image.
   Eyebrow is cream (not cyan): cyan #0891B2 fails WCAG AA on this image's tinted bg (~2.6:1 measured).
   Subhead is 24px regular weight (WCAG large-text threshold), full-opacity cream. At tint 0.55 the
   lightest-pixel contrast vs cream is ~3.9:1, which clears the WCAG AA large-text floor of 3:1. */
.hero--fullbleed .eyebrow {
  color: var(--color-paper);
  display: block;
  margin-bottom: 20px;
}
.hero--fullbleed .display {
  color: var(--color-paper);
  margin-bottom: 24px;
  text-wrap: nowrap;
}
.hero--fullbleed .subhead {
  color: var(--color-paper);
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 400;
  max-width: 72ch;
  margin-bottom: 0;
}
/* Scroll-to-explore indicator: pinned bottom-right of the hero section */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-decoration: none;
  color: var(--color-paper);
  /* Solid ink chip: small-text contrast fix. The 11px label fails WCAG AA (4.5:1) over the
     lightest-pixel bg at its true rendered position (measured 3.91:1 at tint 0.55).
     A flat opaque backing at rgba(10,9,8,0.72) raises the effective bg luminance floor so
     cream #ECF1ED clears 4.5:1 against it. */
  background: rgba(10, 9, 8, 0.72);
  padding: 8px 10px;
  border-radius: 8px;
}
.hero-scroll-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper);
  line-height: 1;
}
.hero-scroll-arrow {
  display: block;
  animation: hero-scroll-bob 2s ease-in-out infinite;
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* Focus ring: cream outline for high contrast over dark-tinted hero */
.hero--fullbleed .hero-scroll:focus-visible {
  outline: 2px solid var(--color-paper);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Topbar opacity bump on the index page only — prevents topbar washing out over bright dome.
   Scoped to .page-index so about/assessment topbars are unaffected. */
.page-index .topbar {
  background: rgba(236, 241, 237, 0.92);
}

/* ============================================================
   #GAP SECTION — NARRATIVE REWORK ADDITIONS
   ============================================================ */
.gap-bridge-lead {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--color-ink);
  text-align: left;
  max-width: none;
  margin: 28px 0 0;
}

#gap .section-head .subhead { max-width: none; }

.gap-pivot {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-ink);
  max-width: none;
  margin-top: 64px;
  margin-bottom: 0;
}

/* Mobile overrides for full-bleed hero — must come AFTER the desktop block so
   equal-specificity rules here win on narrow viewports (same-specificity cascade,
   source order is the tiebreaker). */
@media (max-width: 880px) {
  /* Reset copy block to full-width mobile gutters */
  .hero--fullbleed .hero-copy {
    left: 24px;
    right: 24px;
    transform: translateY(-50%);
  }
  .hero--fullbleed .display {
    text-wrap: wrap;
  }
  /* Mobile tint: 0.55 (same as desktop, at the §5.5 hard cap) — rule kept here
     so any future desktop-value change doesn't accidentally unguard mobile */
  .hero--fullbleed .hero-tint {
    background: rgba(10, 9, 8, 0.55);
  }
  /* Scroll indicator: tighter mobile positioning */
  .hero-scroll {
    bottom: 24px;
    right: 24px;
  }
  /* Sticky topbar offset: 72px = mobile topbar height */
  #main { scroll-margin-top: 72px; }
  #gap  { scroll-margin-top: 72px; }
}

/* Framing note: subordinate sans caption shown after a CTA (e.g. the live-demo disclaimer).
   Sans (not mono) because it is sentence prose, 14px to clear the reading-surface floor. */
.framing-note { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--color-ink-mute); margin: 0; }
#demo .framework-teaser-cta .framing-note { margin-top: -12px; }