@font-face { font-family: 'Calibre Regular'; src: local('Calibre Regular'), url('https://www.crayon.co/hubfs/Website_%20Assets/Fonts/CalibreRegular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Calibre Medium'; src: local('Calibre Medium'), url('https://www.crayon.co/hubfs/Website_%20Assets/Fonts/CalibreMedium.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Calibre Semibold'; src: local('Calibre Semibold'), url('https://www.crayon.co/hubfs/Website_%20Assets/Fonts/CalibreSemibold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Calibre Bold'; src: local('Calibre Bold'), url('https://www.crayon.co/hubfs/Website_%20Assets/Fonts/CalibreBold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Calibre Black'; src: local('Calibre Black'), url('https://www.crayon.co/hubfs/Website_%20Assets/Fonts/CalibreBlack.woff') format('woff'); font-display: swap; }

:root {
  --crayon-purple: #4a1d75; --crayon-purple-deep: #2c1148; --crayon-purple-hover: #5d2a8c; --crayon-purple-tint: #efe7f6;
  --crayon-orange: #ef6a2a; --crayon-green: #2bb07f; --crayon-ink: #211633; --crayon-cream: #fcfaf5;
  --crayon-light-text: #e9e0f5; --crayon-hairline: #e2dccf;
  --bg: var(--crayon-cream); --surface: #ffffff; --surface-tinted: #f4efe6;
  --text: var(--crayon-ink); --text-muted: #6b6478; --primary: var(--crayon-purple); --primary-on: #fff;
  --cta: var(--crayon-purple); --cta-on: #ffffff; --accent: var(--crayon-orange);
  --border: var(--crayon-hairline); --border-soft: rgba(33,22,51,0.10);
  --font-body: 'Calibre Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-medium: 'Calibre Medium', var(--font-body); --font-semibold: 'Calibre Semibold', var(--font-body);
  --font-bold: 'Calibre Bold', var(--font-body); --font-black: 'Calibre Black', var(--font-body);
  --container: 1180px; --container-narrow: 760px; --radius-card: 16px; --radius-button: 3px;
  --shadow-card: 0px 11px 46px rgba(44,17,72,0.10); --shadow-card-hover: 0px 16px 56px rgba(44,17,72,0.18); --shadow-button: 0 2px 40px rgba(44,17,72,0.18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 18px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1,h2,h3,h4 { margin: 0; line-height: 1.25; font-weight: 400; }
h1 { font-size: 50px; font-family: var(--font-bold); }
h2 { font-size: 40px; font-family: var(--font-bold); letter-spacing: -0.015em; }
h3 { font-size: 28px; font-family: var(--font-semibold); }
a { color: var(--primary); text-decoration: none; }
@media (max-width: 767px){ h1{font-size:44px;} h2{font-size:29px;} h3{font-size:22px;} }
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }
.section { padding: 100px 0; position: relative; }
.section--tinted { background: var(--surface-tinted); }
@media (max-width: 767px){ .section{ padding: 56px 0; } }
.scroll-progress { position: fixed; top:0; left:0; height:4px; width:0%; background: linear-gradient(90deg, var(--primary), var(--accent)); z-index:200; transition: width .1s linear; }
.eyebrow { font-family: var(--font-bold); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); display: inline-flex; align-items:center; gap:12px; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay:.08s; } .reveal-d2 { transition-delay:.16s; } .reveal-d3 { transition-delay:.24s; }

/* HERO + GATE */
/* GATE WRAP + SCROLLYTELLING */
body:not(.locked) #gatewrap { display:none; }
.scrolly { position: relative; background: linear-gradient(180deg, var(--surface-tinted) 0%, var(--bg) 45%); }
.scrolly__sticky { display:flex; align-items:center; justify-content:center; min-height: 72vh; padding: 70px 0; position:relative; }
.scrolly__frame { width:100%; }
.scene { text-align:center; max-width: 760px; margin:0 auto; padding: 44px 24px; }
.scene h1 { font-size: 74px; font-family: var(--font-black); line-height: 1.0; letter-spacing:-0.025em; color: var(--text); margin-top:14px; }
.scene h1 em { font-style:normal; color: var(--primary); }
.scene .sc-num { font-family: var(--font-black); font-size: 156px; line-height:.86; letter-spacing:-0.04em; color: var(--primary); font-variant-numeric: tabular-nums; }
.scene .sc-num .pct { font-size: 86px; vertical-align:super; }
.scene .sc-label { font-family: var(--font-semibold); font-size: 24px; line-height:1.35; color: var(--text); max-width:580px; margin: 18px auto 0; }
.scene .sc-hint { margin-top: 30px; font-family: var(--font-bold); font-size:13px; letter-spacing:2px; text-transform:uppercase; color: var(--text-muted); }
.scrolly__dots { display:flex; gap:10px; justify-content:center; margin-top:36px; }
.sc-dot { width:9px; height:9px; border-radius:50%; background: var(--border); transition: all .25s; }
.sc-dot.active { background: var(--primary); transform: scale(1.35); }
.scrolly:not(.on) .scrolly__dots { display:none; }
.scrolly.on { height: 200vh; }
.sc-stats { display:flex; justify-content:center; align-items:flex-start; gap: 48px; flex-wrap:wrap; max-width: 980px; margin: 0 auto; }
.sc-stat { flex: 0 1 250px; }
.sc-stat .sc-num { font-size: 104px; }
.sc-stat .sc-num .pct { font-size: 56px; }
.sc-stat .sc-label { font-size: 17px; margin-top: 12px; }
.sc-tag { font-family: var(--font-bold); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.sc-curiosity { margin-top: 36px; font-family: var(--font-semibold); font-size: 19px; line-height:1.4; color: var(--text-muted); max-width: 620px; margin-left:auto; margin-right:auto; }
.sc-curiosity span { color: var(--primary); }
@media (max-width:767px){ .sc-stats{ gap:22px; } .sc-stat{ flex:0 1 auto; } .sc-stat .sc-num{ font-size:60px;} .sc-stat .sc-num .pct{ font-size:34px;} .sc-stat .sc-label{ font-size:15px; margin-top:6px;} }
.scrolly.on .scrolly__sticky { position: sticky; top:0; height:100vh; min-height:0; padding:0; overflow:hidden; }
.scrolly.on .scrolly__frame { position:absolute; inset:0; }
.scrolly.on .scene { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transform: translateY(32px); transition: opacity .6s ease, transform .6s ease; pointer-events:none; }
.scrolly.on .scene.active { opacity:1; transform:none; pointer-events:auto; }
.scrolly.on .scrolly__dots { position:absolute; bottom:40px; left:0; right:0; margin:0; }
@media (max-width:767px){ .scene h1{ font-size:44px;} .scene .sc-num{ font-size:96px;} .scene .sc-num .pct{ font-size:52px;} .scene .sc-label{ font-size:19px;} .scrolly.on{ height:300vh; } }
/* GATE SECTION (the scroll lands here) */
.gate-section { padding: 80px 0 108px; background: linear-gradient(180deg, var(--bg) 0%, var(--surface-tinted) 100%); }
.gate-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:stretch; max-width: 1040px; }
.gate-quote-col { position:relative; overflow:hidden; background: var(--crayon-purple-deep); color:#fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 52px 48px; display:flex; flex-direction:column; justify-content:center; }
.gate-quote-mark { font-family: var(--font-black); font-size:84px; line-height:.5; color:#e0a32c; display:block; margin-bottom:20px; }
.gate-quote-col::after { content:""; position:absolute; bottom:-60px; right:-50px; width:260px; height:260px; background: radial-gradient(circle, rgba(239,106,42,.16), transparent 70%); pointer-events:none; }
.jonah { width: 96px; height:96px; border-radius:50%; object-fit:cover; box-shadow: var(--shadow-card); display:block; }
.gate-quote { position:relative; font-family: var(--font-semibold); font-size:27px; line-height:1.42; letter-spacing:-0.01em; color:#fff; margin:0; }
.gate-cite { display:flex; align-items:center; gap:14px; margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.15); }
.gate-cite .jonah { width:56px; height:56px; margin:0; border:2px solid rgba(224,163,44,.7); box-shadow:none; }
.gate-cite__id { display:flex; flex-direction:column; }
.gate-cite__name { font-family: var(--font-bold); font-size:15px; color:#fff; }
.gate-cite__role { font-size:13px; color: rgba(233,224,245,.78); }
.gate-section .gate-card { margin:0; max-width:none; }
@media (max-width:860px){ .gate-grid{ grid-template-columns:1fr; gap:24px;} }
.hero-stats { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; max-width:920px; margin: 8px auto 0; }
.hero-stat { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 26px 18px; text-align:center; }
.hero-stat .num { font-size: 50px; font-family: var(--font-black); line-height:1; color: var(--primary); font-variant-numeric: tabular-nums; margin-bottom:8px; }
.hero-stat .num .pct { font-size: 28px; vertical-align: super; }
.hero-stat .unit { font-size:14px; color: var(--text-muted); font-family: var(--font-medium); line-height:1.3; }
.hero-stats--3 { grid-template-columns: repeat(3,1fr); max-width: 720px; }
@media (max-width:767px){ .hero-stats{ grid-template-columns: repeat(2,1fr);} .hero-stat .num{font-size:42px;} .hero-stats--3{ grid-template-columns: repeat(3,1fr);} }
/* STAT TICKER */
.ticker { overflow:hidden; max-width:1000px; margin: 6px auto 30px; background: var(--crayon-purple); border-radius: 40px; box-shadow: var(--shadow-button); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display:flex; width:max-content; animation: tickerscroll 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display:inline-flex; align-items:center; padding: 14px 0; color:#fff; font-family: var(--font-semibold); font-size:15px; white-space:nowrap; }
.ticker__item::after { content:'\25C6'; color: var(--crayon-orange); margin: 0 30px; font-size:9px; }
@keyframes tickerscroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }
@media (max-width:767px){ .ticker__item{ font-size:13.5px; } .ticker__item::after{ margin:0 18px; } }
.hero__kicker { font-size:17px; line-height:1.5; color: var(--text); font-family: var(--font-medium); max-width: 600px; margin: 0 auto 18px; }
.hero__kicker strong { font-family: var(--font-bold); }
.inside-strip { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 0 auto 34px; }
.inside-strip span { background: var(--surface); border:1px solid var(--border-soft); border-radius: 30px; padding: 9px 18px; font-family: var(--font-semibold); font-size:14px; box-shadow: var(--shadow-card); display:inline-flex; align-items:center; gap:9px; }
.inside-strip span::before { content:''; width:8px; height:8px; border-radius:50%; background: var(--accent); flex-shrink:0; }

/* BUTTONS */
.btn { display:inline-block; padding: 14px 26px 11px; border-radius: var(--radius-button); border:none; font-family: var(--font-semibold); font-size:18px; line-height:1; cursor:pointer; text-decoration:none; transition: background .2s ease, transform .2s ease; }
.btn--primary { background: var(--cta); color: var(--cta-on); box-shadow: var(--shadow-button); }
.btn--primary:hover { background: var(--crayon-purple-hover); transform: translateY(-1px); }

/* GATE */
.gate-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 38px 40px 32px; max-width: 460px; margin: 8px auto 0; text-align:left; }
.gate-card h3 { font-size: 24px; font-family: var(--font-bold); margin-bottom: 6px; text-align:center; }
.gate-card .gate-desc { font-size:16px; color: var(--text-muted); margin-bottom: 22px; text-align:center; line-height:1.45; }
.gate-form .form-row { margin-bottom: 14px; }
.gate-form label { display:block; font-family: var(--font-semibold); font-size:14.5px; margin-bottom:8px; }
.gate-form input { width:100%; padding:14px 16px; border:1px solid var(--border); border-radius:6px; font-family: var(--font-body); font-size:16.5px; color: var(--text); background: var(--surface); transition: border-color .18s; }
.gate-form input:focus { outline:none; border-color: var(--primary); }
.gate-form .btn { width:100%; margin-top:8px; }
.gate-consent { font-size:12px; color: var(--text-muted); margin-top: 14px; line-height:1.5; text-align:center; }
.gate-error { color:#c0392b; font-size:14px; margin-top:12px; display:none; text-align:center; }
body.locked #report { display:none; }
body.locked .sticky-nav { display:none; }

/* STICKY TABLE OF CONTENTS */
.sticky-nav { position: sticky; top:0; z-index:100; background: rgba(255,255,255,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom:1px solid var(--border-soft); box-shadow: 0 6px 24px rgba(44,17,72,0.10); }
.nav-inner { max-width: var(--container); margin:0 auto; display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; padding: 9px 32px; }
.nav-inner::-webkit-scrollbar { display:none; }
.nav-label { flex-shrink:0; padding: 0 16px 0 0; font-family: var(--font-bold); font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color: var(--text-muted); white-space:nowrap; }
.nav-link { flex-shrink:0; margin: 0 2px; padding:8px 13px; border-radius:9px; font-family: var(--font-bold); font-size:12px; letter-spacing:.6px; text-transform:uppercase; color: var(--text-muted); transition: color .2s, background-color .2s; white-space:nowrap; cursor:pointer; }
.nav-link:hover { color: var(--text); background: rgba(33,22,51,.05); }
.nav-link.active { color: #fff; background: var(--primary); }
@media (max-width:767px){ .nav-label{ display:none; } }
/* PRINT: clean PDF of the report for people who unlocked it */
@media print {
  #gatewrap, .sticky-nav, .scroll-progress, .wn-card--pdf, .share-badge { display:none !important; }
  body.locked #report, #report { display:block !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .intro-mark { display:none !important; }
  .section { padding:18px 0 !important; }
  html, body { background:#fff !important; }
  .finding, .cluster, .compare-bars, .compare-row, .chart-area, .tk-domino, .share-card, .cquote, .chapter-head, .fav-stat, .bigstat { break-inside:avoid; page-break-inside:avoid; }
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* CHAPTER HEADER */
.chapter-head { display:grid; grid-template-columns: 150px 1fr; gap:24px; align-items:start; margin-bottom: 12px; }
.chapter-num { font-family: var(--font-black); font-size: 130px; line-height:.8; letter-spacing:-0.04em; color: transparent; -webkit-text-stroke: 2px rgba(74,29,117,.26); user-select:none; }
.section--tinted .chapter-num { -webkit-text-stroke-color: rgba(74,29,117,.32); }
.chapter-head .eyebrow { margin-bottom:14px; color: var(--accent); }
.chapter-head h2 { margin-bottom: 14px; max-width: 780px; }
.chapter-head .dek { font-size:19px; color: var(--text-muted); line-height:1.55; max-width:760px; }
@media (max-width:767px){ .chapter-head{ grid-template-columns:1fr; gap:4px;} .chapter-num{font-size:84px;} }

/* FINDING */
.finding { display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; padding: 56px 0; border-top:1px solid var(--border-soft); }
.finding:first-of-type { border-top:none; }
.finding.flip .finding__text { order:2; }
.finding__qlabel { font-family: var(--font-semibold); font-size:40px; color: var(--primary); line-height:1.18; margin-bottom: 20px; letter-spacing:-0.005em; }
.finding__qlabel::before { content:""; display:block; width:46px; height:4px; border-radius:2px; background:#e0a32c; margin-bottom:20px; }
.finding__text h3 { font-size: 26px; font-family: var(--font-semibold); line-height:1.25; margin-bottom: 14px; color: var(--text); }
.finding__text p { font-size:17px; color: var(--text-muted); line-height:1.55; margin-bottom: 14px; }
.finding__viz { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px; }
.finding__viz .viz-title { font-family: var(--font-bold); font-size:13px; letter-spacing:1px; text-transform:uppercase; text-align:center; margin-bottom: 18px; color: var(--text-muted); }
.chart-area { position: relative; height: 300px; }
.chart-area.tall { height: 360px; }
@media (max-width:767px){ .finding{ grid-template-columns:1fr; gap:24px; padding:40px 0;} .finding.flip .finding__text{order:0;} .finding__qlabel{font-size:30px;} }

/* BIG STAT */
.bigstat { text-align:center; padding: 8px; }
.bigstat .n { font-family: var(--font-black); font-size: 120px; line-height:1; letter-spacing:-0.03em; color: var(--primary); font-variant-numeric: tabular-nums; }
.bigstat .n .pct { font-size: 64px; vertical-align: super; }
.bigstat .cap { font-size:17px; color: var(--text-muted); font-family: var(--font-semibold); margin-top: 8px; max-width: 320px; margin-left:auto; margin-right:auto; line-height:1.4; }
.bigstat.green .n { color: var(--crayon-green); }
.bigstat.dark .n { color: var(--text); }
@media (max-width:767px){ .bigstat .n{ font-size:84px;} }

/* COMPARE BARS */
.compare-bars { margin: 8px 0; }
.compare-cap { font-family: var(--font-semibold); font-size:14.5px; line-height:1.5; color: var(--text-muted); margin-bottom:6px; max-width:720px; }
.compare-cap strong { font-family: var(--font-bold); color: var(--text); }
.compare-row { display:grid; grid-template-columns: 190px 1fr 74px; align-items:center; gap:22px; padding:18px 0; border-top:1px solid var(--border-soft); }
.compare-row:last-child { border-bottom:1px solid var(--border-soft); }
.compare-label { font-family: var(--font-bold); font-size:16px; color: var(--text); }
.compare-group { display:flex; flex-direction:column; gap:9px; }
.compare-line { display:grid; grid-template-columns: 62px 1fr 46px; align-items:center; gap:12px; }
.compare-leg { font-family: var(--font-semibold); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color: var(--text-muted); }
.compare-track { height:22px; background: rgba(33,22,51,.05); border-radius:6px; position:relative; overflow:hidden; }
.compare-fill { height:100%; border-radius:6px; width:0; transition: width 1.1s cubic-bezier(.22,.61,.36,1); }
.compare-fill.primary { background: var(--primary); }
.compare-fill.secondary { background: rgba(33,22,51,.22); }
.compare-num { font-family: var(--font-black); font-size:15px; color: var(--text); text-align:right; font-variant-numeric: tabular-nums; }
.compare-line.is-without .compare-num { color: var(--text-muted); }
.compare-gap { text-align:center; font-family: var(--font-black); font-size:24px; color: var(--accent); line-height:1; }
.compare-gap span { display:block; font-family: var(--font-semibold); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color: var(--text-muted); margin-top:4px; }
@media (max-width:767px){ .compare-row{ grid-template-columns:1fr; gap:12px; padding:16px 0; } .compare-gap{ text-align:left; } .compare-line{ grid-template-columns:58px 1fr 42px; } }

/* FAVORITE FINDINGS */
.fav { background: var(--surface-tinted); }
.fav-intro { font-size:18px; color: var(--text-muted); margin-top:12px; }
.fav-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top: 36px; }
.fav-stat { display:flex; flex-direction:column; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 30px 28px; text-decoration:none; color: var(--text); position:relative; overflow:hidden; border-top:5px solid var(--primary); transition: transform .25s ease, box-shadow .25s ease; }
.fav-stat::after { content:''; position:absolute; inset:0; background: radial-gradient(420px 160px at 100% 0%, rgba(74,29,117,.06), transparent 70%); pointer-events:none; opacity:0; transition:opacity .25s; }
.fav-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.fav-stat:hover::after { opacity:1; }
.fav-num { font-family: var(--font-black); font-size:58px; line-height:1; letter-spacing:-0.02em; color: var(--primary); font-variant-numeric: tabular-nums; }
.fav-num .pct { font-size:32px; vertical-align:super; }
.fav-ch { font-family: var(--font-bold); font-size:12px; letter-spacing:.6px; text-transform:uppercase; color: var(--text-muted); margin-bottom:14px; }
.fav-find { font-family: var(--font-semibold); font-size:16px; line-height:1.35; margin-top:12px; color: var(--text); }
.fav-find strong { font-family: var(--font-black); }
.fav-go { margin-top:auto; padding-top:18px; font-family: var(--font-bold); font-size:12.5px; letter-spacing:.4px; color: var(--text-muted); transition: color .2s; }
.fav-stat:hover .fav-go { color: var(--primary); }
.fav-stat.c-orange { border-top-color: var(--accent);} .fav-stat.c-orange .fav-num { color: var(--accent);} .fav-stat.c-orange:hover .fav-go { color: var(--accent);}
.fav-stat.c-green { border-top-color: var(--crayon-green);} .fav-stat.c-green .fav-num { color: var(--crayon-green);} .fav-stat.c-green:hover .fav-go { color: var(--crayon-green);}
.fav-stat.feat { grid-column: 1 / -1; flex-direction:row; align-items:center; gap:36px; border-top-color: var(--accent); padding: 36px 40px; }
.fav-stat.feat .fav-num { font-size:104px; color:var(--text); flex-shrink:0; }
.fav-stat.feat .fav-num .pct { font-size:52px; }
.fav-stat.feat .fav-find { font-size:23px; margin-top:0; line-height:1.3; max-width:640px; }
.fav-stat.feat .fav-go { position:absolute; bottom:18px; right:40px; padding-top:0; }
.fav-stat.feat:hover .fav-go { color: var(--accent); }
@media (max-width:1000px){ .fav-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:767px){ .fav-grid{ grid-template-columns:1fr;} .fav-stat.feat{ flex-direction:column; align-items:flex-start; gap:14px; } .fav-stat.feat .fav-num{ font-size:72px;} .fav-stat.feat .fav-find{font-size:19px;} .fav-stat.feat .fav-go{ position:static; } }

/* Intro section */
.intro .intro-lead { font-size:21px; line-height:1.5; color: var(--text); font-family: var(--font-medium); margin-bottom:18px; }
.intro p { font-size:18px; line-height:1.6; color: var(--text-muted); margin-bottom:18px; }
.intro { position: relative; overflow: hidden; padding-bottom: 52px; }
.intro .container { position: relative; z-index: 1; }
.intro .container > * { max-width: 880px; }
.takeaways .container > *, .letter .container > * { max-width: 880px; }
/* Customer voice — quote card (Option B) */
.section.voice { background: var(--crayon-purple-deep); }
.cquote { position:relative; max-width:960px; margin:0; text-align:left; }
.cquote__mark { display:block; font-family: var(--font-black); font-size:104px; line-height:.46; color:#e0a32c; margin-bottom:14px; }
.cquote__text { font-family: var(--font-semibold); font-size:34px; line-height:1.3; letter-spacing:-0.01em; color:#fff; margin:0; }
.cquote__by { display:flex; align-items:center; gap:14px; margin-top:32px; }
.cquote__avatar { width:54px; height:54px; border-radius:50%; background:#e0a32c; color: var(--crayon-purple-deep); display:flex; align-items:center; justify-content:center; font-family: var(--font-bold); font-size:16px; letter-spacing:.5px; flex-shrink:0; overflow:hidden; }
.cquote__avatar img { width:100%; height:100%; object-fit:cover; }
.cquote__id { display:flex; flex-direction:column; }
.cquote__name { font-family: var(--font-bold); font-size:16px; color:#fff; }
.cquote__co { font-size:14px; color: rgba(233,224,245,.82); }
@media (max-width:767px){ .cquote__text{ font-size:25px; } .cquote__mark{ font-size:72px; } }
/* Takeaways / playbook close */
.takeaways-lead { font-size:19px; line-height:1.55; color: var(--text-muted); margin:16px 0 8px; max-width:720px; }
/* TAKEAWAYS — domino chain (vertical, check-off) */
.tk-chain { list-style:none; margin:46px auto 0; padding:0; max-width:880px; display:flex; flex-direction:column; }
.tk-domino { position:relative; display:flex; margin-bottom:22px; }
.tk-domino:last-child { margin-bottom:0; }
.tk-domino__cb { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.tk-domino__card { position:relative; z-index:1; width:100%; display:grid; grid-template-columns:74px 1fr; gap:26px; align-items:center; padding:30px 32px; background:var(--surface); border:1px solid var(--border-soft); border-left:6px solid #e0a32c; border-radius:var(--radius-card); box-shadow:var(--shadow-card); transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.tk-domino__card:hover { transform: translateY(-3px); box-shadow:var(--shadow-card-hover); }
.tk-domino__num { font-family:var(--font-black); font-size:50px; line-height:1; color:var(--primary); text-align:center; transition:color .25s; }
.tk-domino__body { display:flex; flex-direction:column; gap:8px; }
.tk-domino__title { font-family:var(--font-bold); font-size:26px; line-height:1.15; color:var(--text); letter-spacing:-0.01em; }
.tk-domino__why { font-family:var(--font-medium); font-size:16.5px; line-height:1.5; color:var(--text-muted); }
.tk-domino__tick { width:32px; height:32px; border-radius:50%; border:2px solid var(--border); position:relative; transition:all .2s; justify-self:center; }
.tk-domino__tick::after { content:''; position:absolute; left:11px; top:6px; width:7px; height:13px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg) scale(0); transition:transform .2s; }
.tk-domino:not(:last-child)::after { content:''; position:absolute; z-index:0; left:74px; bottom:-22px; width:2px; height:26px; background:var(--border); transform:translateX(-50%); transition:background .3s; }
.tk-domino__cb:checked + .tk-domino__card { border-left-color:var(--primary); background:var(--surface-tinted); }
.tk-domino__cb:checked + .tk-domino__card .tk-domino__num { color:#e0a32c; }
.tk-domino__cb:checked + .tk-domino__card .tk-domino__tick { background:#2bb07f; border-color:#2bb07f; }
.tk-domino__cb:checked + .tk-domino__card .tk-domino__tick::after { transform:rotate(45deg) scale(1); }
.tk-domino:has(.tk-domino__cb:checked)::after { background:#2bb07f; }
.tk-domino__cb:focus-visible + .tk-domino__card { outline:2px solid var(--primary); outline-offset:2px; }
.tk-chain__foot { font-family: var(--font-semibold); font-size:15px; color: var(--text); margin-top:26px; }
.tk-chain__foot span { color: var(--text-muted); font-family: var(--font-medium); }
.tk-chain.visible .tk-domino__card { animation: domfall .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * .1s); }
@keyframes domfall { 0%{ opacity:0; transform: translateY(-16px); } 100%{ opacity:1; transform:none; } }
@media (max-width:620px){
  .tk-domino__card { grid-template-columns:54px 1fr; gap:16px; padding:22px 20px; }
  .tk-domino__tick { display:none; }
  .tk-domino__num { font-size:38px; }
  .tk-domino__title { font-size:21px; }
  .tk-domino:not(:last-child)::after { left:48px; bottom:-18px; height:22px; }
  .tk-domino { margin-bottom:18px; }
}
@media (prefers-reduced-motion: reduce){ .tk-chain.visible .tk-domino__card{ animation:none; } .tk-domino__card{ transition:none; } }
.intro-mark { position:absolute; top:18px; right:5%; font-family: var(--font-black); font-size:220px; line-height:.8; letter-spacing:-8px; color: rgba(74,29,117,0.055); pointer-events:none; user-select:none; z-index:0; }
.intro-h .hl { background-image: linear-gradient(transparent 60%, rgba(224,163,44,0.38) 0); padding: 0 3px; }
.intro-chips { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:40px; padding-top:28px; border-top:1px solid var(--border-soft); }
.intro-chips__label { font-family: var(--font-bold); font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color: var(--text-muted); margin-right:4px; }
.intro-chip { font-family: var(--font-semibold); font-size:13.5px; color: var(--text); text-decoration:none; background: var(--surface); border:1px solid var(--border-soft); border-radius:30px; padding:8px 16px; transition: transform .2s, border-color .2s, color .2s, box-shadow .2s; }
.intro-chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-card); }
@media (max-width:767px){ .intro-mark { font-size:118px; top:8px; right:2%; } }

/* SHARE CARD */
.share-card { background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 36px; text-align:center; max-width:620px; margin: 8px auto 0; position:relative; cursor:pointer; transition: transform .25s, box-shadow .25s; }
.share-card:hover { transform: scale(1.02); box-shadow: var(--shadow-card-hover); }
.share-card .share-stat { font-family: var(--font-black); font-size:72px; color: var(--primary); line-height:1; margin-bottom:14px; }
.share-card .share-headline { font-family: var(--font-semibold); font-size:18px; line-height:1.4; margin-bottom:14px; }
.share-card .share-source { font-family: var(--font-medium); font-size:12px; color: var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; }
.share-badge { position:absolute; top:14px; right:14px; font-family: var(--font-semibold); font-size:11px; color: var(--primary); background: var(--surface-tinted); padding:6px 12px; border-radius:20px; opacity:0; transition:opacity .2s; }
.share-card:hover .share-badge { opacity:1; }

/* JONAH LETTER */
.letter { background: var(--crayon-purple-deep); color: var(--crayon-light-text); }
.letter .eyebrow { color: var(--accent); }
.letter h2 { color:#fff; margin: 14px 0 24px; }
.letter p { font-size:18px; line-height:1.6; color: rgba(233,224,245,.9); margin-bottom: 18px; }
.letter .sign { margin-top: 28px; }
.letter .sign .nm { font-family: var(--font-black); font-size:20px; color:#fff; letter-spacing:1px; }
.letter .sign .ti { font-size:14px; color: rgba(233,224,245,.7); }
.letter .kicker { font-family: var(--font-bold); color: var(--accent); font-size:20px; margin: 8px 0 6px; }

/* GRADER (stepped wizard) */
.quiz-step { display:none; } .quiz-step.active { display:block; }
.quiz-desc { font-size:17px; color: var(--text-muted); line-height:1.5; margin-top:10px; }
.grader { display:grid; grid-template-columns: 1.25fr .75fr; background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow:hidden; max-width: 920px; margin:0 auto; }
.grader-main { padding: 44px 44px 32px; }
.grader-progress { height:6px; background: var(--surface-tinted); border-radius:4px; overflow:hidden; margin-bottom:14px; }
.grader-progress__bar { height:100%; width:0; background: var(--accent); border-radius:4px; transition: width .4s ease; }
.grader-step { font-family: var(--font-bold); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color: var(--text-muted); margin-bottom:22px; }
.quiz-question { display:none; }
.quiz-question.active { display:block; animation: gqin .35s ease; }
@keyframes gqin { from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none;} }
.gq { font-family: var(--font-bold); font-size:29px; line-height:1.2; margin-bottom:12px; color: var(--text); }
.gq-help { font-family: var(--font-medium); font-size:15px; line-height:1.5; color: var(--text-muted); margin:0 0 22px; }
.quiz-options { display:flex; flex-direction:column; gap:12px; }
.quiz-opt { width:100%; text-align:left; padding:17px 20px; border:1.5px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-family: var(--font-medium); font-size:17px; cursor:pointer; transition: all .15s; display:flex; align-items:center; gap:14px; }
.quiz-opt::before { content:''; width:20px; height:20px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; transition: all .15s; }
.quiz-opt:hover { border-color: var(--primary); background: var(--surface-tinted); }
.quiz-opt.selected { border-color: var(--primary); background: var(--surface-tinted); font-family: var(--font-semibold); }
.quiz-opt.selected::before { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px #fff; }
.grader-back { margin-top:26px; background:none; border:none; color: var(--text-muted); font-family: var(--font-semibold); cursor:pointer; font-size:14px; padding:0; }
.grader-back:hover { color: var(--primary); }
.grader-aside { background: var(--crayon-purple); color:#fff; padding: 44px 36px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; }
.grader-aside::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; background: radial-gradient(circle, rgba(239,106,42,.4), transparent 70%); pointer-events:none; }
.aside-label { font-family: var(--font-bold); font-size:12px; letter-spacing:2px; text-transform:uppercase; color: rgba(255,255,255,.75); margin-bottom:22px; position:relative; }
.aside-ring { width:150px; height:150px; position:relative; margin-bottom:22px; }
.aside-ring .pcttext { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--font-black); font-size:32px; color:#fff; }
.aside-cap { font-size:14px; color: rgba(255,255,255,.82); line-height:1.5; position:relative; }
.quiz-card { max-width: 560px; margin:0 auto; background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 48px 44px; position:relative; overflow:hidden; }
.quiz-card::before { content:''; position:absolute; top:0; right:0; width:200px; height:200px; background: radial-gradient(circle at top right, rgba(239,106,42,.16), transparent 70%); pointer-events:none; }
.quiz-card .eyebrow { margin-bottom:10px; }
.quiz-result { text-align:center; }
.score-ring { width:180px; height:180px; margin:0 auto 28px; position:relative; }
.score-number { font-family: var(--font-black); font-size:56px; color: var(--primary); position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
.score-number .pct { font-size:32px; vertical-align:super; }
.score-label { font-family: var(--font-bold); font-size:24px; margin-bottom:12px; }
.score-body { font-size:17px; color: var(--text-muted); max-width:460px; margin:0 auto; line-height:1.5; }
@media (max-width:767px){ .grader{ grid-template-columns:1fr;} .grader-aside{ display:none;} .gq{ font-size:23px;} .grader-main{ padding:32px 26px;} }

/* CTA + FOOTER */
.cta-banner { background: var(--surface-tinted); padding: 90px 0; text-align:center; }
.cta-banner h2 { margin-bottom:16px; }
.cta-banner p { font-size:21px; color: var(--text-muted); margin:0 auto 32px; max-width:600px; line-height:1.5; }
.whatsnext { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; max-width:1140px; margin:42px auto 0; text-align:left; }
.wn-card { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; min-height:300px; padding:40px 36px 34px; border-radius:24px; text-decoration:none; color:#fff; background: linear-gradient(155deg, var(--crayon-purple-deep) 0%, var(--primary) 100%); box-shadow: 0 18px 42px -18px rgba(44,17,72,.55); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.wn-card::after { content:''; position:absolute; right:-60px; bottom:-70px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); pointer-events:none; }
.wn-card:hover { transform: translateY(-8px); box-shadow: 0 32px 64px -20px rgba(44,17,72,.65); }
.wn-icon { display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:18px; margin-bottom:24px; position:relative; }
.wn-icon svg { width:30px; height:30px; }
.wn-card h3 { font-family: var(--font-black); font-size:28px; line-height:1.12; color:#fff; margin:0 0 12px; position:relative; }
.wn-card p { font-size:16px; line-height:1.5; color: rgba(233,224,245,.85); margin:0 0 28px; max-width:340px; position:relative; }
.wn-cta { margin-top:auto; display:inline-flex; align-items:center; gap:10px; font-family: var(--font-bold); font-size:16px; line-height:1; padding:14px 24px; border-radius:32px; position:relative; transition: gap .2s ease; }
.wn-cta svg { width:18px; height:18px; transition: transform .2s ease; }
.wn-card:hover .wn-cta { gap:15px; }
.wn-card:hover .wn-cta svg { transform: translateX(3px); }
.wn-card--demo .wn-icon { background: rgba(224,163,44,.20); color:#e0a32c; }
.wn-card--demo .wn-cta { background:#e0a32c; color: var(--crayon-purple-deep); }
.wn-card--grader .wn-icon { background: rgba(43,176,127,.22); color:#36c08c; }
.wn-card--grader .wn-cta { background:#fff; color: var(--primary); }
.wn-card--pdf { cursor:pointer; }
.wn-card--pdf .wn-icon { background: rgba(255,255,255,.16); color:#fff; }
.wn-card--pdf .wn-cta { background:transparent; color:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
@media (max-width:980px){ .whatsnext{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .whatsnext{ grid-template-columns:1fr; gap:18px; } .wn-card{ min-height:0; padding:34px 28px 30px; } }
.report-footer { background: var(--crayon-purple-deep); color: var(--crayon-light-text); padding: 40px 32px 56px; text-align:center; }
.footer-logo { font-family: var(--font-black); font-size:28px; letter-spacing:2px; color:#fff; margin-bottom:12px; }
.footer-logo span { color: var(--accent); }
.report-footer p { font-size:14px; color: rgba(233,224,245,.6); margin-bottom:6px; }
.report-footer a { color: var(--accent); }
/* IMPACT SCOREBOARD */
.impact-board .ib-intro { font-size:18px; color: var(--text-muted); line-height:1.55; margin-top:12px; }
.ib-grid { display:flex; flex-direction:column; gap:14px; margin-top:36px; }
.ib-card { display:grid; grid-template-columns:230px 1fr; gap:28px; align-items:center; background: var(--surface); border:1px solid var(--border-soft); border-left:5px solid var(--primary); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding:24px 30px; }
.ib-lever { font-family: var(--font-bold); font-size:20px; line-height:1.2; color: var(--text); }
.ib-metrics { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.ib-m { display:flex; flex-direction:column; }
.ib-num { font-family: var(--font-black); font-size:36px; line-height:1; color: var(--primary); font-variant-numeric: tabular-nums; }
.ib-lbl { font-family: var(--font-semibold); font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color: var(--text-muted); margin-top:7px; }
.ib-vs { font-size:13px; color: var(--text-muted); margin-top:3px; }
.ib-foot { font-family: var(--font-medium); font-size:15px; color: var(--text-muted); margin-top:22px; max-width:760px; }
@media (max-width:820px){ .ib-card{ grid-template-columns:1fr; gap:16px; } }
@media (max-width:520px){ .ib-metrics{ grid-template-columns:1fr; gap:14px; } }
/* BUSINESS IMPACT — Section 1 */
.lead-stat { display:flex; gap:30px; align-items:center; background:linear-gradient(135deg, var(--crayon-purple-deep), var(--primary)); color:#fff; border-radius:var(--radius-card); padding:38px 42px; margin:28px 0 8px; box-shadow:var(--shadow-card); }
.lead-stat__big { font-family:var(--font-black); font-size:72px; line-height:.88; white-space:nowrap; }
.lead-stat__big .vs { display:block; font-size:19px; letter-spacing:.5px; color:rgba(255,255,255,.6); margin-top:8px; font-family:var(--font-bold); }
.lead-stat__cap { font-size:19.5px; line-height:1.5; color:rgba(255,255,255,.92); }
.lead-stat__cap strong { color:var(--accent); }
.lead-stat__inside { font-size:16px; line-height:1.5; color:var(--text-muted); font-family:var(--font-medium); margin:14px 0 0; }
.lead-stat__inside strong { color:var(--text); font-family:var(--font-semibold); }
.cluster { margin-top:42px; }
.cluster-h { font-family:var(--font-black); font-size:25px; color:var(--text); margin:0; display:flex; align-items:baseline; gap:12px; }
.cluster-h .cn { color:var(--accent); font-size:18px; letter-spacing:1px; }
.cluster-d { font-size:16px; color:var(--text-muted); margin:7px 0 16px; max-width:700px; line-height:1.5; }
.cluster-note { font-size:14px; color:var(--text-muted); margin:14px 0 0; padding-left:14px; border-left:3px solid var(--accent); line-height:1.5; }
.impact-lead .ib-intro { font-size:18px; color:var(--text-muted); line-height:1.55; margin-top:12px; }
@media (max-width:680px){ .lead-stat{ flex-direction:column; align-items:flex-start; gap:14px; padding:26px 24px; } .lead-stat__big{ font-size:46px; } }
.part-divider { padding:44px 0 26px; text-align:center; }
.part-divider + .section { padding-top: 22px; }
.offer-b { border-radius: var(--radius-card); overflow:hidden; }
.offer-b__head { height:54px; background:linear-gradient(135deg, var(--crayon-purple-deep), var(--primary)); display:flex; align-items:center; }
.offer-b__head span { color:rgba(255,255,255,.78); font-family:var(--font-bold); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; padding:0 24px; }
.offer-b .gate-card { padding:36px 42px 40px; background:transparent; box-shadow:none; border:none; border-radius:0; }
.offer-b .gate-card h3 { font-size:24px; }
.offer-b .gate-form .form-row { margin-bottom:16px; }
.offer-b .btn--primary { width:100%; margin-top:6px; font-size:18px; padding:18px; }
.gate-trust { display:flex; flex-wrap:wrap; gap:7px 16px; margin:14px 0 2px; justify-content:center; }
.gate-trust span { font-size:12.5px; color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; }
.gate-trust span::before { content:'\2713'; color:var(--crayon-green); font-family:var(--font-bold); }
@media (max-width:860px){ .offer-b .report-cover-img{ width:48%; } }
.part-divider .pd-k { font-family:var(--font-bold); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin:0; max-width:none; }
.part-divider h2 { font-family:var(--font-black); font-size:52px; color:var(--text); margin:10px 0 0; line-height:1.05; }
.part-divider p { font-size:17px; color:var(--text-muted); max-width:640px; margin:12px auto 0; line-height:1.5; }
@media (max-width:767px){ .part-divider { padding:34px 0 20px; } .part-divider h2{ font-size:34px; } }
/* GATE HERO (above the fold) */
.gate-hero { min-height: 92vh; display:flex; flex-direction:column; justify-content:center; padding: 48px 0 56px; background: linear-gradient(180deg, var(--surface-tinted) 0%, var(--bg) 62%); }
.gate-eyebrow { text-align:left; margin-bottom:22px; }
.gate-hero .gate-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; max-width:none; }
.gate-h1 { font-family: var(--font-black); font-size:60px; line-height:1.03; letter-spacing:-0.02em; color: var(--text); margin:0 0 20px; }
.gate-h1 em { font-style:normal; color: var(--primary); }
.gate-lead { font-size:21px; line-height:1.5; color: var(--text-muted); margin:0 0 26px; max-width:560px; }
.gate-points { list-style:none; margin:0 0 34px; padding:0; display:flex; flex-direction:column; gap:13px; }
.gate-points li { position:relative; padding-left:28px; font-family: var(--font-medium); font-size:17.5px; line-height:1.45; color: var(--text); }
.gate-points li::before { content:'\2713'; position:absolute; left:0; top:0; color: var(--crayon-green); font-family: var(--font-bold); }
.gate-quote-mini { margin:0; border-left:3px solid var(--accent); padding-left:18px; max-width:520px; }
.gate-quote-mini blockquote { margin:0 0 12px; font-family: var(--font-medium); font-style:italic; font-size:16px; line-height:1.45; color: var(--text); }
.gate-quote-mini figcaption { display:flex; align-items:center; gap:10px; font-size:13.5px; color: var(--text-muted); }
.gate-quote-mini .jonah { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.gate-offer { max-width:500px; margin-left:auto; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow:hidden; }
.report-cover-img { display:block; width:66%; max-width:248px; height:auto; margin:30px auto 0; }
.gate-hero .gate-card { margin:0; max-width:none; box-shadow:none; border:none; border-radius:0; background:transparent; padding: 10px 34px 32px; }
.gate-hero .gate-card h3 { text-align:left; }
.gate-hero .gate-card .gate-desc { text-align:left; margin-bottom:18px; }
@media (max-width:860px){ .gate-hero .gate-grid{ grid-template-columns:1fr; gap:32px; } .gate-h1{ font-size:40px; } .gate-offer{ margin-left:0; max-width:none; } .gate-quote-mini{ max-width:none; } }