/* ---------- Webfonts: pulled from Latent's production CDN -------------
   Same files the live site serves, so rendering matches production. */
@font-face {
  font-family: "Twkeverett";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68114bc2c53c94882188a30e/68114bc2c53c94882188a34c_TWKEverett-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Saans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68114bc2c53c94882188a30e/68114bc2c53c94882188a34e_Saans-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Saans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68114bc2c53c94882188a30e/68114bc2c53c94882188a36c_Saans-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Saans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/68114bc2c53c94882188a30e/68114bc2c53c94882188a36d_Saans-SemiBold.otf") format("opentype");
}

:root {
  /* ---------- Brand: Violet (primary brand ramp) -------------------- */
  --violet-50:  #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed; /* primary action */
  --violet-700: #6d28d9; /* primary hover */
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #2e1065;

  /* ---------- Neutrals (violet-tinted, not pure grey) --------------- */
  --neutral-white:    #ffffff;
  --neutral-bg:       #faf9ff; /* page background */
  --neutral-300:      #cac4d5;
  --neutral-400:      #b5aec2;
  --neutral-500:      #8f879f;
  --neutral-600:      #6b637b;
  --neutral-700:      #4b435b;
  --neutral-800:      #8c829f; /* secondary text */
  --neutral-darker:   #302643; /* primary text */
  --neutral-darkest:  #1a112a; /* near-black, dark surfaces */
  --neutral-black:    #000000;

  /* ---------- System: status -------------------------------------- */
  --success:          #cef5ca;
  --success-dark:     #114e0b;
  --error:            #f8e4e4;
  --error-dark:       #3b0b0b;
  --warning:          #fcf8d8;
  --warning-dark:     #5e5515;
  --focus:            #2d62ff;

  /* ---------- Semantic: backgrounds ------------------------------- */
  --bg-primary:       var(--neutral-bg);     /* main page bg */
  --bg-secondary:     var(--neutral-300);
  --bg-tertiary:      var(--neutral-700);
  --bg-alternate:     var(--neutral-black);  /* dark sections */
  --bg-white:         var(--neutral-white);
  --bg-success:       #ecfdf3;
  --bg-error:         #fef3f2;
  --bg-warning:       var(--warning);

  /* ---------- Semantic: text -------------------------------------- */
  --text-primary:     var(--neutral-darker);
  --text-secondary:   var(--neutral-800);
  --text-tertiary:    var(--neutral-700);
  --text-alternate:   var(--neutral-white);  /* on dark bg */
  --text-success:     var(--success-dark);
  --text-error:       var(--error-dark);
  --text-warning:     var(--warning-dark);

  /* ---------- Semantic: borders ----------------------------------- */
  --border-primary:   #e1dce9;
  --border-secondary: var(--neutral-300);
  --border-tertiary:  var(--neutral-700);
  --border-alternate: var(--neutral-black);

  /* ---------- Semantic: links ------------------------------------- */
  --link-primary:     var(--violet-600);
  --link-secondary:   var(--neutral-600);
  --link-alternate:   var(--neutral-white);

  /* ---------- Typography: families --------------------------------
     Twkeverett + Saans loaded from Latent's CDN (above). Fallbacks use
     a humanist sans stack to keep proportions close if a font fails. */
  --font-display: "Twkeverett", "Saans", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body:    "Saans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Typography: sizes ----------------------------------- */
  --fs-xs:    0.75rem;   /* 12 — eyebrow, caption */
  --fs-sm:    0.875rem;  /* 14 — meta, labels */
  --fs-base:  1rem;      /* 16 — body */
  --fs-md:    1.125rem;  /* 18 — large body, lead */
  --fs-lg:    1.25rem;   /* 20 — small heading */
  --fs-xl:    1.5rem;    /* 24 — h4 */
  --fs-2xl:   1.75rem;   /* 28 — h3 */
  --fs-3xl:   2rem;      /* 32 — h3 desktop */
  --fs-4xl:   2.5rem;    /* 40 — h2 */
  --fs-5xl:   3rem;      /* 48 — h2 desktop */
  --fs-6xl:   3.5rem;    /* 56 — h1 desktop */
  --fs-7xl:   4.5rem;    /* 72 — display */

  /* ---------- Typography: leading & tracking ---------------------- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;     /* hero / large headings */
  --lh-normal: 1.4;
  --lh-relaxed:1.55;    /* body */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em; /* eyebrows, all-caps */

  /* ---------- Typography: weights --------------------------------- */
  --fw-regular:  400;  /* Saans Regular */
  --fw-medium:   500;  /* Saans Medium / Twkeverett Medium */
  --fw-semibold: 600;  /* Saans SemiBold */

  /* ---------- Spacing scale (rem) --------------------------------- */
  --space-0:    0;
  --space-2:    0.125rem;
  --space-4:    0.25rem;
  --space-6:    0.375rem;
  --space-8:    0.5rem;
  --space-10:   0.625rem;
  --space-12:   0.75rem;
  --space-14:   0.875rem;
  --space-16:   1rem;
  --space-20:   1.25rem;
  --space-24:   1.5rem;
  --space-28:   1.75rem;
  --space-32:   2rem;
  --space-40:   2.5rem;
  --space-48:   3rem;
  --space-56:   3.5rem;
  --space-64:   4rem;
  --space-80:   5rem;
  --space-96:   6rem;
  --space-128:  8rem;

  /* ---------- Radius (intentionally tight) ------------------------ */
  --radius-xs:    0.1875rem;  /* 3px — buttons, inputs, chips */
  --radius-sm:    0.25rem;    /* 4px */
  --radius-md:    0.5rem;     /* 8px — cards */
  --radius-lg:    1rem;       /* 16px — large cards */
  --radius-pill:  999px;      /* pill / round */
  --radius-circle:50%;

  /* ---------- Borders --------------------------------------------- */
  --border-w-hair: 1px;
  --border-w-1:    1px;
  --border-w-2:    2px;

  /* ---------- Shadows (low, calm) --------------------------------- */
  --shadow-xs:  0 1px 2px rgba(26,17,42,0.04);
  --shadow-sm:  0 2px 6px rgba(26,17,42,0.06);
  --shadow-md:  0 8px 24px rgba(26,17,42,0.08);
  --shadow-lg:  0 24px 48px rgba(26,17,42,0.12);

  /* ---------- Layout ---------------------------------------------- */
  --site-max:        105rem; /* 1680px */
  --content-max:     75rem;  /* 1200px — readable content */
  --reading-max:     42rem;  /* 672px — long-form prose */
  --site-padding-x:  6rem;   /* desktop */
  --site-padding-x-md: 2.5rem;
  --site-padding-x-sm: 1.25rem;
  --section-y:       6rem;
  --section-y-sm:    3.5rem;
  --nav-height:      4.5rem;
  --grid-columns:    12;
  --grid-gutter:     1.5rem;

  /* ---------- Motion ---------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    500ms;

  /* ---------- Z-index --------------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
}

/* Responsive site padding */
@media (max-width: 1024px) {
  :root { --site-padding-x: var(--site-padding-x-md); --section-y: 4rem; }
}
@media (max-width: 640px) {
  :root { --site-padding-x: var(--site-padding-x-sm); --section-y: var(--section-y-sm); }
}

/* CD1 (latest, PR#284 responsive) page styles */

    /* === CD1 · THE EDITOR === */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      color: var(--text-primary);
      background: var(--bg-primary);
      -webkit-font-smoothing: antialiased;
      line-height: 1.55;
    }
    img, svg { display: block; max-width: 100%; }

    /* --- Nav --- */
    .nav {
      position: sticky; top: 0; z-index: 100;
      height: var(--nav-height);
      background: rgba(250, 249, 255, 0.92);
      backdrop-filter: saturate(180%) blur(12px);
      -webkit-backdrop-filter: saturate(180%) blur(12px);
      border-bottom: 1px solid var(--border-primary);
      display: flex; align-items: center;
      padding: 0 var(--site-padding-x);
    }
    .nav-inner {
      width: 100%; max-width: var(--site-max);
      margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-brand {
      font-family: var(--font-display); font-weight: 500;
      font-size: 1.05rem; letter-spacing: -0.02em;
      color: var(--text-primary); text-decoration: none;
      display: flex; align-items: center; gap: 10px;
    }
    .nav-logo { height: 28px; width: auto; }
    .nav-cta {
      font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;
      background: var(--violet-600); color: #fff;
      border: none; border-radius: var(--radius-xs);
      padding: 10px 20px; cursor: pointer; text-decoration: none;
      transition: background 200ms; flex-shrink: 0; white-space: nowrap;
    }
    .nav-cta:hover { background: var(--violet-700); }

    /* --- Mobile download dock --- */
    .dl-dock { display: none; }

    /* --- Hero: two-column with score visualization right --- */
    .hero {
      padding: clamp(2.5rem, 6vw, 4.5rem) var(--site-padding-x) 0;
      max-width: 1100px; margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: stretch;
    }
    .hero-left {
      display: flex; flex-direction: column;
    }
    .hero-top {
      display: flex; align-items: center; gap: 16px;
      margin-bottom: 1.25rem;
    }
    .klas-logo { height: 30px; width: auto; }
    .hero-eyebrow {
      font-family: var(--font-mono); font-size: 11px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-secondary);
    }
    .hero h1 {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(1.75rem, calc(0.8rem + 3vw), 2.375rem);
      letter-spacing: -0.025em; line-height: 1.08;
      text-wrap: balance; max-width: 26ch;
      margin-bottom: 1rem;
    }
    .hero h1 em { color: var(--violet-600); font-style: normal; }
    .hero-sub {
      font-size: 0.9375rem; line-height: 1.6;
      color: var(--text-secondary); max-width: 44ch;
      margin-bottom: 1.5rem;
    }
    .hero-sub strong {
      color: var(--text-primary);
      font-weight: 600;
    }
    .hero-actions {
      display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
      margin-bottom: 2rem;
    }
    .hero-cta {
      font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500;
      background: var(--violet-600); color: #fff;
      border: none; border-radius: var(--radius-xs);
      padding: 12px 24px; cursor: pointer;
      transition: background 200ms;
    }
    .hero-cta:hover { background: var(--violet-700); }

    /* Grade rows (left side) */
    .grade-rows { display: flex; flex-direction: column; gap: 0; }
    .grade-row {
      display: flex; align-items: center; gap: 1rem;
      padding: 1rem 0;
      border-top: 1px solid var(--border-primary);
    }
    .grade-row:last-child { border-bottom: 1px solid var(--border-primary); }
    .gr-letter {
      font-family: var(--font-display); font-weight: 500;
      font-size: 2.75rem; letter-spacing: -0.02em;
      color: var(--violet-600); line-height: 1;
      min-width: 64px;
    }
    .gr-letter sup { font-size: 0.45em; vertical-align: super; color: var(--violet-500); }
    .gr-name {
      font-family: var(--font-mono); font-size: 11px; font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-secondary);
    }

    .limited-data {
      font-family: var(--font-mono); font-size: 9px; font-weight: 500;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-secondary);
      margin-top: 0.625rem;
    }

    /* --- Score visualization (right side) --- */
    .score-viz {
      display: flex; align-items: flex-end; gap: 0;
      min-height: 0;
    }

    /* Average bar — shorter, warm neutral */
    .score-avg {
      flex: 0 0 120px;
      background: var(--neutral-100, #f0ede8);
      display: flex; flex-direction: column;
      justify-content: flex-start;
      padding: clamp(1.5rem, 3vw, 2rem) 1rem;
      align-self: flex-end;
      height: 0;
      overflow: hidden;
    }
    /* no-JS / reduced-motion final state (JS drives the rise otherwise) */
    .score-viz.is-animated .score-avg { height: 65%; }
    .score-avg-num {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      letter-spacing: -0.03em; line-height: 1;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
      opacity: 0; transition: opacity 0.4s ease 0.15s;
      font-variant-numeric: tabular-nums;
    }
    .score-viz.is-animated .score-avg-num { opacity: 1; }
    .score-avg-label {
      font-family: var(--font-mono); font-size: 9px; font-weight: 500;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-secondary);
      line-height: 1.4;
      opacity: 0; transition: opacity 0.5s ease 1.4s;
    }
    .score-viz.is-animated .score-avg-label { opacity: 1; }

    /* Latent bar — tall, violet, dominant */
    .score-latent {
      flex: 1;
      background: var(--violet-600);
      display: flex; flex-direction: column;
      justify-content: space-between;
      padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
      position: relative;
      overflow: hidden;
      height: 0; min-height: 0;
    }
    /* Heights and the counters are driven together in JS (see animateViz) so the
       bars and their numbers stay in perfect lockstep and the violet bar flows
       continuously past the point where the gray bar finishes. This rule is the
       no-JS / reduced-motion final state. */
    .score-viz.is-animated .score-latent { height: 100%; min-height: 100%; }
    .score-latent-num {
      display: block;
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      letter-spacing: -0.03em; line-height: 1;
      color: #fff;
      margin-bottom: 0.5rem;
      opacity: 0; transition: opacity 0.4s ease 0.15s;
      font-variant-numeric: tabular-nums;
    }
    .score-viz.is-animated .score-latent-num { opacity: 1; }
    .score-latent-label {
      display: block;
      font-family: var(--font-mono); font-size: 9px; font-weight: 500;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      line-height: 1.4;
      opacity: 0; transition: opacity 0.5s ease 2.5s;
    }
    .score-viz.is-animated .score-latent-label { opacity: 1; }

    /* Latent lockup — white, bottom of the violet bar */
    .score-latent-mark {
      width: clamp(120px, 62%, 168px);
      height: auto;
      opacity: 0;
      align-self: center;
      margin-top: auto;
      margin-bottom: clamp(1rem, 2vw, 1.5rem);
      transition: opacity 0.8s ease 3.1s;
    }
    .score-viz.is-animated .score-latent-mark { opacity: 1; }

    /* --- Logo marquee --- */
    .marquee-strip {
      padding: clamp(4rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
    }
    .marquee-label {
      text-align: center;
      font-family: var(--font-mono); font-size: 10px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 1.25rem;
    }
    .lt-marquee {
      overflow: hidden; width: 100%;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .lt-marquee__track {
      display: flex; width: max-content;
      animation: lt-scroll 126s linear infinite;
      will-change: transform;
    }
    .lt-marquee:hover .lt-marquee__track { animation-play-state: paused; }
    @keyframes lt-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .lt-marquee__set {
      display: flex; align-items: center;
      gap: 3.5rem; padding-right: 3.5rem; min-height: 46px; flex: none;
    }
    .lt-marquee__set img {
      width: auto; height: 28px; max-width: 132px;
      object-fit: contain; object-position: center;
      opacity: 0.5; filter: grayscale(1);
      transition: opacity 200ms, filter 200ms;
      flex-shrink: 0;
    }
    .lt-marquee__set img:hover { opacity: 0.7; filter: grayscale(0); }
    @media (prefers-reduced-motion: reduce) {
      .lt-marquee__track { animation: none; }
    }

    /* --- FAQ --- */
    .faq-section {
      max-width: var(--content-max); margin: 0 auto;
      padding: clamp(4rem, 8vw, 6rem) var(--site-padding-x);
    }
    .faq-eyebrow {
      font-family: var(--font-mono); font-size: 10px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-secondary); margin-bottom: 0.75rem;
    }
    .faq-heading {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(2rem, calc(1rem + 3vw), 3rem);
      letter-spacing: -0.03em; line-height: 1.05;
      margin-bottom: clamp(2rem, 4vw, 3rem);
    }
    .faq-list { border-top: 1px solid var(--border-primary); }
    .faq-item { border-bottom: 1px solid var(--border-primary); }
    .faq-item summary {
      list-style: none;
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; min-height: 64px; padding: 1rem 0;
      cursor: pointer;
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(1.125rem, 1.5vw, 1.25rem);
      letter-spacing: -0.02em; line-height: 1.2;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      flex: 0 0 auto;
      color: var(--violet-600);
      font-family: var(--font-body);
      font-size: 1.75rem; font-weight: 400; line-height: 1;
      transition: transform 200ms cubic-bezier(0.32,0.72,0,1);
    }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item summary:focus-visible {
      outline: 2px solid var(--violet-600);
      outline-offset: -2px;
    }
    .faq-answer {
      max-width: 48rem;
      padding: 0 3rem 1.5rem 0;
      color: var(--text-secondary);
      font-size: 0.9375rem; line-height: 1.6;
    }

    /* --- Analyst (KLAS) quote --- */
    .analyst-section {
      max-width: 1100px; margin: 0 auto;
      padding: clamp(3rem, 6vw, 5rem) var(--site-padding-x) 0;
    }
    .analyst-card {
      max-width: 60rem; margin: 0 auto;
      background: color-mix(in srgb, var(--violet-600) 6%, var(--bg-primary));
      border: 1px solid color-mix(in srgb, var(--violet-600) 16%, transparent);
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 3rem);
    }
    .analyst-head {
      display: flex; align-items: center; gap: 0.75rem;
      margin-bottom: 1.5rem;
    }
    .analyst-head img { height: 22px; width: auto; }
    .analyst-eyebrow {
      font-family: var(--font-mono); font-size: 10px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--violet-700);
    }
    .analyst-body {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(1.375rem, calc(0.9rem + 1.6vw), 2.125rem);
      letter-spacing: -0.02em; line-height: 1.3;
      color: var(--text-primary); text-wrap: pretty;
    }
    .analyst-cite {
      display: flex; align-items: center; gap: 0.875rem;
      font-style: normal; margin-top: 1.75rem;
    }
    .analyst-avatar {
      flex: none; width: 48px; height: 48px; border-radius: 50%;
      object-fit: cover; object-position: center top;
      border: 1px solid var(--border-primary);
    }
    .analyst-cite-text {
      font-family: var(--font-mono); font-size: 11px; font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-secondary); line-height: 1.5;
    }
    .analyst-cite-name { color: var(--text-primary); }

    /* --- Dark CTA --- */
    .dark-cta {
      background: var(--neutral-darkest);
      padding: clamp(3rem, 7vw, 5rem) var(--site-padding-x);
      text-align: center;
    }
    .dark-cta-inner {
      max-width: 42rem; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center; gap: 1rem;
    }
    .dark-cta h2 {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(1.5rem, calc(0.8rem + 2vw), 2rem);
      letter-spacing: -0.02em; line-height: 1.1; color: #fff;
    }
    .dark-cta h2 em { color: var(--violet-400); font-style: normal; }
    .dark-cta p {
      font-size: 0.9375rem; line-height: 1.6;
      color: rgba(255,255,255,0.4);
    }
    .dark-cta-btn {
      font-family: var(--font-body); font-size: 1rem; font-weight: 500;
      background: #fff; color: var(--neutral-darkest);
      border: none; border-radius: var(--radius-xs);
      padding: 14px 28px; cursor: pointer; text-decoration: none;
      transition: background 200ms;
    }
    .dark-cta-btn:hover { background: var(--violet-100); }

    /* --- Footer --- */
    footer {
      background: var(--neutral-darkest);
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 1.5rem var(--site-padding-x);
      display: flex; align-items: center; justify-content: space-between;
    }
    .footer-brand {
      font-family: var(--font-display); font-weight: 500;
      font-size: 0.8125rem; color: rgba(255,255,255,0.4);
      letter-spacing: -0.02em;
      display: flex; align-items: center; gap: 8px;
      text-decoration: none;
    }
    .footer-mark { width: 18px; height: 20px; opacity: 0.55; }
    .footer-note {
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: rgba(255,255,255,0.2);
    }

    /* --- PDF gate (work-email capture before download) --- */
    .pdf-gate {
      position: fixed; inset: 0; z-index: 999;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      background: color-mix(in srgb, var(--neutral-darkest) 72%, transparent);
      backdrop-filter: blur(20px) saturate(.8);
      -webkit-backdrop-filter: blur(20px) saturate(.8);
      opacity: 0; pointer-events: none;
      transition: opacity .24s var(--ease-standard);
    }
    .pdf-gate.is-open { opacity: 1; pointer-events: auto; }
    .pdf-gate__card {
      position: relative; width: 100%; max-width: 432px;
      background: var(--neutral-darkest); color: var(--text-alternate);
      border-radius: var(--radius-lg);
      border: 1px solid color-mix(in srgb, var(--violet-400) 26%, transparent);
      padding: 46px 42px 38px; text-align: center; overflow: hidden;
      box-shadow: 0 40px 110px rgba(0,0,0,.6), 0 0 80px rgba(124,58,237,.12) inset;
      transform: translateY(16px) scale(.97);
      transition: transform .4s var(--ease-standard);
    }
    .pdf-gate.is-open .pdf-gate__card { transform: none; }
    .pdf-gate__card::before {
      content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
      background: linear-gradient(90deg, transparent, var(--violet-400) 50%, transparent);
    }
    .pdf-gate__close {
      position: absolute; top: 14px; right: 14px;
      width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius-sm); cursor: pointer;
      color: var(--neutral-400); font-size: 15px; line-height: 1;
      transition: background .15s, color .15s, border-color .15s;
    }
    .pdf-gate__close:hover { background: rgba(255,255,255,.1); border-color: var(--violet-400); color: var(--text-alternate); }
    .pdf-gate__handle { display: none; width: 38px; height: 4px; background: rgba(255,255,255,.22); border-radius: 2px; margin: 0 auto 22px; }
    .pdf-gate__paper {
      display: flex; align-items: center; gap: 13px; padding: 12px 14px; text-align: left;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-md); margin-bottom: 26px;
    }
    .pdf-gate__badge {
      flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
      width: 46px; height: 58px; background: color-mix(in srgb, var(--violet-600) 22%, transparent);
      border: 1px solid color-mix(in srgb, var(--violet-400) 35%, transparent); border-radius: var(--radius-sm);
      font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em;
      color: var(--violet-200); text-align: center; line-height: 1.4; padding: 4px 2px;
    }
    .pdf-gate__meta { min-width: 0; }
    .pdf-gate__meta .t { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 500; color: var(--text-alternate); line-height: 1.32; margin-bottom: 3px; }
    .pdf-gate__meta .d { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--neutral-500); }
    .pdf-gate__h { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.028em; color: var(--text-alternate); line-height: 1.14; margin-bottom: 8px; }
    .pdf-gate__sub { font-size: 14px; color: var(--neutral-300); line-height: 1.5; margin-bottom: 22px; }
    .pdf-gate__label { display: block; text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-400); margin-bottom: 8px; }
    .pdf-gate__input {
      width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--radius-sm); padding: 14px 16px;
      font-family: var(--font-body); font-size: 15px; color: var(--text-alternate);
      outline: none; -webkit-appearance: none;
      transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .pdf-gate__input::placeholder { color: var(--neutral-500); }
    .pdf-gate__input:focus { border-color: var(--violet-400); background: rgba(255,255,255,.07); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-600) 28%, transparent); }
    .pdf-gate__err { min-height: 17px; margin-top: 7px; font-size: 12px; color: #fca5a5; text-align: left; line-height: 1.4; display: none; }
    .pdf-gate__err.show { display: block; }
    .pdf-gate__btn {
      width: 100%; margin-top: 14px; padding: 15px 24px;
      background: var(--violet-600); border: none; border-radius: var(--radius-pill);
      font-family: var(--font-body); font-size: 15px; font-weight: 500; color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 9px;
      transition: background .15s, transform .15s, box-shadow .15s;
    }
    .pdf-gate__btn:hover { background: var(--violet-700); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(124,58,237,.4); }
    .pdf-gate__btn:active { transform: none; }
    .pdf-gate__btn svg { transition: transform .15s; }
    .pdf-gate__btn:hover svg { transform: translateY(2px); }
    .pdf-gate__privacy { margin-top: 15px; font-size: 11.5px; color: var(--neutral-400); letter-spacing: 0.01em; }
    .pdf-gate__ok { display: none; padding: 14px 0; }
    .pdf-gate__ok-i {
      width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
      background: color-mix(in srgb, var(--violet-600) 18%, transparent); border: 1px solid color-mix(in srgb, var(--violet-400) 35%, transparent);
    }
    .pdf-gate__ok .t { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text-alternate); letter-spacing: -0.02em; margin-bottom: 8px; }
    .pdf-gate__ok .s { font-size: 13px; color: var(--neutral-400); line-height: 1.5; }

    /* --- Scroll reveal --- */
    .reveal {
      opacity: 0; transform: translateY(18px);
      transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
                  transform 0.6s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.is-visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .pdf-gate, .pdf-gate__card { transition: none; }
      .faq-item summary::after { transition: none; }
      .score-avg, .score-latent, .score-avg-num, .score-avg-label,
      .score-latent-num, .score-latent-label, .score-latent-mark {
        transition: none !important;
      }
      .score-viz.is-animated .score-latent {
        height: 100%; min-height: 100%;
      }
    }

    /* --- Responsive --- */
    @media (max-width: 900px) {
      .hero { grid-template-columns: 1fr; }
      /* Keep the bars at their desktop proportions instead of stretching full-width */
      .score-viz { min-height: 320px; max-width: 340px; }
      .score-avg { height: 55%; }
      /* Full-bleed square download bar (whitepaper style) across tablet + mobile */
      body { padding-bottom: 68px; }
      .dl-dock {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
        display: block; padding: 0; padding-bottom: env(safe-area-inset-bottom);
        background: var(--violet-600);
        box-shadow: 0 -8px 24px rgba(20, 16, 30, 0.10);
      }
      .dl-dock button {
        width: 100%; min-height: 56px; padding: 16px 20px;
        display: flex; align-items: center; justify-content: center; gap: 9px;
        border: 0; border-radius: 0;
        background: var(--violet-600); color: #fff;
        font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500;
        cursor: pointer; transition: background 200ms;
      }
      .dl-dock button:hover { background: var(--violet-700); }
    }
    /* Tablet: keep the bar width but center the chart in the column */
    @media (min-width: 601px) and (max-width: 900px) {
      .score-viz { justify-self: center; width: 340px; }
    }
    @media (max-width: 600px) {
      footer { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
      .pdf-gate { align-items: flex-end; padding: 0; }
      .pdf-gate__card {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 14px 22px 34px;
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
        transform: translateY(100%);
      }
      .pdf-gate.is-open .pdf-gate__card { transform: none; }
      .pdf-gate__handle { display: block; }
      .pdf-gate__h { font-size: 24px; }
      .pdf-gate__input { padding: 15px 16px; font-size: 16px; }
      .pdf-gate__btn { padding: 16px 24px; font-size: 16px; }
      .lt-marquee__set { gap: 1.75rem; padding-right: 1.75rem; }
      .lt-marquee__set img { width: auto; max-width: 100px; }
    }