/* Before-you-begin (Assessment/Expect) page styles. Fonts are self-hosted from /fonts. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-700.woff2") format("woff2")}
@font-face{font-family:"Darker Grotesque";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/darker-grotesque-700.woff2") format("woff2")}
@font-face{font-family:"Darker Grotesque";font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/darker-grotesque-800.woff2") format("woff2")}

:root{
  --blue-1:#0094FF; --blue-2:#1C5BFF; --blue-2-60:#779DFF; --blue-2-30:#BBCEFF; --blue-2-10:#E8EFFF;
  --green:#17C8C7; --green-60:#74DEDD; --green-10:#E8FAF9;
  --ink:#000000; --white:#FFFFFF;
  --sans:"IBM Plex Sans","Calibri","Segoe UI",Arial,Helvetica,sans-serif;
  --display:"Darker Grotesque","IBM Plex Sans","Arial Narrow",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--white);color:var(--ink)}
body{font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);overflow-x:hidden}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--blue-1);outline-offset:3px;border-radius:4px}

.topbar{border-bottom:1px solid var(--blue-2-30)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.logo{display:block;height:26px;width:auto}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;text-decoration:none}
.back svg{width:16px;height:16px;stroke:var(--blue-2);transition:transform .25s var(--ease)}
.back:hover svg{transform:translateX(-5px)}
.back:hover{text-decoration:underline;text-underline-offset:3px}

.wrap{max-width:1160px;margin:0 auto;padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}

/* Hero */
.hero{padding-top:clamp(40px,7vw,72px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:end}
.dash{width:36px;height:5px;background:var(--blue-2);border-radius:3px;margin-bottom:18px;
  transform-origin:left center;transform:scaleX(0);transition:transform .5s var(--ease)}
.dash.in{transform:scaleX(1)}
.hero-copy h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,5.4vw,64px);line-height:.98;letter-spacing:-.01em;margin:0 0 20px}
.lede{font-size:18px;line-height:1.6;max-width:56ch;margin:0}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--blue-2)}
.fact{padding:18px 16px 0 0;cursor:default}
.fact + .fact{padding-left:16px;border-left:1px solid var(--blue-2-30)}
.fact svg{width:20px;height:20px;stroke:var(--blue-2);fill:none;stroke-width:1.6;margin-bottom:10px;display:block}
.fact .num{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;display:block}
.fact .num small{font-family:var(--sans);font-weight:500;font-size:15px;margin-left:3px}
.fact .lbl{display:inline-block;font-size:14px;line-height:1.4;margin-top:8px;
  background-image:linear-gradient(var(--blue-2),var(--blue-2));background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;
  transition:background-size .3s var(--ease)}
.fact:hover .lbl{background-size:100% 1px}

/* CORE section */
.core{padding-top:clamp(56px,8vw,88px)}
.section-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:48px}
h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,40px);line-height:1.02;margin:0}
.section-head p{margin:0;font-size:16px;max-width:52ch}

.ring-row{position:relative;display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;align-items:center;margin-bottom:0}
.connectors{position:absolute;inset:0;pointer-events:none;z-index:0}
.connectors line{stroke-linecap:round}
.track-line{stroke:var(--blue-2-10);stroke-width:2}
.fill-line{stroke:var(--blue-2);stroke-width:2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.3s var(--ease)}

.ring-col{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:opacity .3s ease}
.tagline{font-size:14px;font-weight:600;line-height:1.3;margin:0 0 18px;min-height:36px;padding-bottom:4px;
  display:flex;align-items:flex-end;justify-content:center;max-width:17ch;
  border-bottom:2px solid transparent;transition:border-color .25s ease}
.ring-col.focus .tagline{border-color:var(--blue-2)}
.ring{position:relative;width:104px;height:104px;background:var(--white);border-radius:50%}
.ring svg.ringsvg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ring .track{fill:none;stroke:var(--blue-2-10);stroke-width:9}
.ring .arc{fill:none;stroke:var(--blue-2);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:var(--c);stroke-dashoffset:var(--c);
  transition:stroke-dashoffset 1.1s var(--ease), stroke-width .25s ease}
.ring[data-n="1"] .arc{stroke:var(--blue-2-60)}
.ring[data-n="4"] .arc{stroke:var(--green)}
.ring-col.focus .arc{stroke-width:12}
.ring-col.focus .ring{transform:scale(1.05)}
.ring{transition:transform .25s var(--ease)}
.ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:27px;line-height:1}
.chev{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.chev svg{width:15px;height:15px;stroke:var(--blue-2-60);stroke-width:1.8;fill:none}

.ring-row.dimming .ring-col:not(.focus){opacity:.6}

/* cards */
.core-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px}
.card{background:var(--blue-2-10);border-radius:10px;padding:24px 22px;display:flex;flex-direction:column;
  border-left:4px solid transparent;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease,opacity .3s ease}
.card .name{font-family:var(--display);font-weight:800;font-size:28px;line-height:1;margin:0 0 6px}
.card .focus-line{font-size:14px;font-weight:500;margin:0 0 14px}
.card hr{border:0;border-top:1px solid var(--blue-2-30);margin:0 0 14px}
.card ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.45}
.card li{position:relative;padding-left:16px;margin-bottom:9px}
.card li:last-child{margin-bottom:0}
.card li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--blue-2)}
.card.focus{transform:translateY(-6px);box-shadow:0 14px 28px rgba(28,91,255,.2);border-color:var(--blue-2)}
.core-cards.dimming .card:not(.focus){opacity:.6}
.card[data-stage="4"].focus{box-shadow:0 14px 28px rgba(23,200,199,.25);border-color:var(--green)}

.insight{margin-top:36px;padding-top:20px;border-top:2px solid var(--blue-2);font-size:18px;line-height:1.55;font-weight:600;max-width:72ch}

/* Report */
.report{padding-top:clamp(56px,8vw,80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.report h3{font-family:var(--sans);font-weight:700;font-size:18px;margin:0 0 16px;padding-top:14px;border-top:2px solid var(--blue-2)}
.report ol{list-style:none;margin:0;padding:0;counter-reset:r}
.report li{counter-increment:r;display:grid;grid-template-columns:30px 1fr;gap:4px;padding:12px 0;border-bottom:1px solid var(--blue-2-30);
  font-size:16px;line-height:1.5;transition:padding-left .25s var(--ease),background-color .25s ease}
.report li:hover{padding-left:8px;background:var(--blue-2-10)}
.report li::before{content:counter(r);font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1}
.report ul{list-style:none;margin:0;padding:0}
.report ul li{display:block;padding-left:18px;position:relative;grid-template-columns:none}
.report ul li::before{content:"";position:absolute;left:0;top:calc(12px + .5em);width:7px;height:7px;background:var(--blue-2)}
.report ul li:hover{padding-left:26px}

/* CTA */
.cta{padding:clamp(48px,7vw,72px) 0 clamp(56px,8vw,96px);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;background:var(--blue-2);color:var(--white);font-family:var(--sans);font-weight:500;font-size:16px;
  padding:16px 40px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;
  transition:background-color .25s ease,transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{background:var(--blue-1);transform:translateY(-3px) scale(1.02);box-shadow:0 12px 26px rgba(28,91,255,.32)}
.btn:active{transform:translateY(0) scale(1);box-shadow:none}
.btn .arr{display:inline-block;margin-left:10px;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.cta p{margin:0;font-size:15px}

/* reveal */
.rise{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}

@media (max-width:960px){
  .hero,.section-head{grid-template-columns:1fr;gap:28px}
  .ring-row{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .ring-row .chev{display:none}
  .connectors{display:none}
  .core-cards{grid-template-columns:repeat(2,1fr);margin-top:20px}
}
@media (max-width:600px){
  .facts{grid-template-columns:1fr}
  .fact + .fact{padding-left:0;border-left:0;border-top:1px solid var(--blue-2-30)}
  .fact{padding:14px 0}
  .ring-row{grid-template-columns:1fr}
  .core-cards{grid-template-columns:1fr}
  .report{grid-template-columns:1fr;gap:36px}
  .btn{width:100%;text-align:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
  .rise,.dash{opacity:1;transform:none}
}