/* =====================================================================
   L&D Benchmark — V2 card system
   Locked principles: community framing > rank · shape > score · no
   directional gradient. Single outer container — no card-within-card.
   ===================================================================== */

@font-face{font-family:'Euclid Circular B';src:url('https://f.hubspotusercontent30.net/hubfs/515235/DiamondTube/fonts/EuclidCircularB-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Euclid Circular B';src:url('https://f.hubspotusercontent30.net/hubfs/515235/DiamondTube/fonts/EuclidCircularB-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --st-blue-500:#056DFF;
  --st-blue-600:#0A5CEB;
  --st-blue-300:#7ABDFF;
  --st-blue-100:#D7EBFF;
  --st-blue-050:#EEF4FF;
  --st-orange-500:#FF8229;
  --st-orange-600:#E66E15;
  --st-orange-100:#FFE4D0;
  --st-orange-050:#FFF3E8;
  --st-cyan-500:#05D5FF;
  --st-navy:#11295A;
  --st-gray-700:#434A51;
  --st-gray-600:#545E69;
  --st-gray-500:#8694A2;
  --st-gray-300:#D1D9E0;
  --st-gray-200:#E9EDF1;
  --st-gray-100:#F2F5F8;
  --st-radius-xl:22px;
  --st-radius-l:14px;
  --st-radius-m:10px;
  --st-radius-full:9999px;
  --st-shadow-m:0 4px 20px rgba(11,11,43,0.05);
  --st-shadow-xl:0 12px 40px rgba(5,109,255,0.15);
  --st-font:'Euclid Circular B',system-ui,-apple-system,sans-serif;
  --ease-default:cubic-bezier(0.4,0,0.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--st-font);
  color:var(--st-navy);
  background:
    radial-gradient(1100px 700px at 12% -10%,#EAF3FF 0%,transparent 60%),
    radial-gradient(900px 600px at 100% 110%,#E2EDFE 0%,transparent 55%),
    linear-gradient(180deg,#F7FAFE 0%,#EEF4FC 100%);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
  -webkit-font-smoothing:antialiased;
}

/* -- single outer container ------------------------------------------- */
.card{
  width:720px;max-width:100%;
  background:#fff;
  border-radius:var(--st-radius-xl);
  box-shadow:var(--st-shadow-m);
  padding:40px;
}
.card--wide{width:880px}

/* card eyebrow — small label up top: theme name */
.card-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;color:var(--st-blue-600);
  text-transform:uppercase;letter-spacing:0.08em;
  margin-bottom:18px;
}
.card-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--st-blue-500);
}

/* H1 — community framing line */
h1.community{
  font-size:30px;font-weight:700;color:var(--st-navy);
  line-height:1.18;letter-spacing:-0.02em;
  margin:0 0 12px;max-width:620px;
  text-wrap:pretty;
}
h1.community em{
  font-style:normal;color:var(--st-blue-500);
}

/* "Your answer" line under the H1 */
.your-answer{
  font-size:14px;color:var(--st-gray-600);line-height:1.5;
  margin:0 0 30px;
}
.your-answer b{color:var(--st-navy);font-weight:700}

/* Divider between header and chart — thin line, not nested chrome */
.divider{
  height:1px;background:var(--st-gray-200);
  margin:0 0 26px;border:0;
}

/* eyebrow ABOVE chart — the demoted topical headline */
.chart-eyebrow{
  font-size:12px;font-weight:700;color:var(--st-gray-500);
  text-transform:uppercase;letter-spacing:0.08em;
  margin:0 0 18px;
}

/* small footer line UNDER chart with cohort size */
.chart-footer{
  font-size:12px;color:var(--st-gray-500);line-height:1.5;
  margin:14px 0 28px;
  font-style:italic;
}

/* insight copy under the chart — factual, no ranking */
.insight{
  font-size:15px;color:var(--st-gray-700);line-height:1.55;
  margin:0 0 28px;max-width:600px;text-wrap:pretty;
}
.insight b{color:var(--st-navy);font-weight:700}
.insight .stat{
  display:inline-block;
  font-size:18px;font-weight:700;color:var(--st-navy);
  letter-spacing:-0.01em;
}

/* hero stat block — one accent, used sparingly */
.hero-stat{
  display:flex;align-items:baseline;gap:14px;
  padding:18px 0;
  border-top:1px solid var(--st-gray-200);
  margin:0 0 22px;
}
.hero-stat .num{
  font-size:42px;font-weight:700;color:var(--st-blue-500);
  letter-spacing:-0.03em;line-height:1;
}
.hero-stat .label{
  font-size:14px;color:var(--st-gray-600);line-height:1.4;max-width:380px;
}

/* footer */
.footer{
  margin-top:8px;padding-top:22px;
  border-top:1px solid var(--st-gray-200);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.prov{font-size:11px;color:var(--st-gray-500);letter-spacing:0.02em}
.cta{
  background:var(--st-blue-500);color:#fff;font-weight:700;font-size:13px;
  padding:9px 18px;border-radius:var(--st-radius-full);
  border:0;cursor:pointer;text-decoration:none;
  transition:background 200ms var(--ease-default),box-shadow 200ms var(--ease-default);
  box-shadow:0 4px 14px rgba(5,109,255,0.25);
}
.cta:hover{background:var(--st-blue-600);box-shadow:var(--st-shadow-xl)}

/* ---- shared chart primitives ---- */
.cyandot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--st-cyan-500)}

/* "You" marker — used across charts */
.you-dot{
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:5px solid var(--st-blue-500);
  box-shadow:
    0 0 0 5px var(--st-blue-500),
    0 0 0 11px rgba(5,109,255,0.18),
    0 8px 22px rgba(5,109,255,0.35);
  z-index:3;
}
.you-flag{
  background:var(--st-navy);color:#fff;font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:var(--st-radius-full);white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 18px rgba(11,11,43,0.25);
}

/* horizontal ladder track (used by Q1, Q2) */
.track{
  position:relative;width:520px;height:14px;
  background:var(--st-blue-100);border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(11,11,43,0.06);
}
.tick{
  position:absolute;top:3px;width:2px;height:8px;background:#fff;
  border-radius:1px;transform:translateX(-50%);
}
.zones{position:absolute;top:0;left:0;right:0;height:80px;pointer-events:none}
.zone{position:absolute;transform:translateX(-50%);text-align:center;width:140px}
.zone .zlabel{
  font-size:11px;font-weight:700;color:var(--st-navy);
  text-transform:uppercase;letter-spacing:0.04em;
  margin-bottom:8px;line-height:1.2;
}
.chip{
  display:inline-block;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:var(--st-radius-full);
  background:var(--st-gray-100);color:var(--st-gray-600);white-space:nowrap;
}
.chip.active{
  background:var(--st-blue-500);color:#fff;
  box-shadow:0 0 0 4px rgba(5,109,255,0.18),0 4px 14px rgba(5,109,255,0.30);
}