/* Shared landing-page stylesheet.
   Used by public/home/index.html and src/pages/index.astro so type, weights, and layout stay in parity.
*/
:root{
    /* Vectorial brand system */
    --brand:#E08940;
    --brand-fill:#FDBA74;
    --brand-fill-hover:#F2AE68;
    --brand-logo:#E08940;
    --ink:#404040;
    --ink-strong:#2B2B2B;
    --muted:#8A8A8A;
    --bg:#FFFDFA;
    --bg-tint:#FFF6EC;
    --card:#FFFFFF;
    --line:rgba(64,64,64,.10);
    --line-btn:rgba(64,64,64,.38);
    --line-faint:rgba(64,64,64,.06);
    /* card surfaces sit on near-white backgrounds, so they need a readable edge;
       --line-faint stays for nested wrappers that already have interior dividers */
    --line-card:rgba(64,64,64,.13);
    /* cards are lifted with shadow and only hinted at with a faint edge */
    --shadow-card:0 1px 2px rgba(64,64,64,.04),0 10px 30px rgba(64,64,64,.055);
    --shadow-card-hi:0 2px 4px rgba(64,64,64,.05),0 18px 44px rgba(64,64,64,.09);
    --wash:rgba(64,64,64,.035);

    /* audience colors */
    --c-wear:#E08940;      /* fitness tracker & smartwatch consumers */
    --c-patient:#4FA97C;   /* healthcare patients */
    --c-staff:#4A7BA6;     /* healthcare staff */
    --c-gamer:#9A6BC9;     /* gamers */

    /* Poppins carries the whole page; Space Grotesk is reserved for the wordmark */
    --font-display:'Poppins',sans-serif;
    --font-logo:'Space Grotesk',sans-serif;

    /* one measure for the whole page */
    --shell:1600px;
    --section-y:clamp(44px,6.5vw,76px);
    --section-x:clamp(20px,4vw,48px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* 400 is the page's only text weight, so it is the inherited default too —
     a rule that forgets to declare a weight still lands on the right one */
  body{background:var(--bg);color:var(--ink);font-family:var(--font-display);
    font-weight:400;line-height:1.65;overflow-x:hidden}

  /* every band except the hero is centred on the same measure. they all paint
     var(--bg), the same colour as the page, so capping the element itself is
     invisible — no need for an inner wrapper in each one */
  .metrics,.rigor-strip,.pp,.hp,.faq,.trust,.cta{
    max-width:var(--shell);margin-inline:auto;
    padding:var(--section-y) var(--section-x)}

  /* manifesto-style pop-in: JS adds .fade-section, then .is-visible on scroll */
  .fade-section{opacity:0;transform:translateY(40px);
    transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);
    will-change:opacity,transform}
  .fade-section.is-visible{opacity:1;transform:none}
  .metrics-grid .metric.fade-section:nth-child(1){transition-delay:.00s}
  .metrics-grid .metric.fade-section:nth-child(2){transition-delay:.07s}
  .metrics-grid .metric.fade-section:nth-child(3){transition-delay:.14s}
  .metrics-grid .metric.fade-section:nth-child(4){transition-delay:.07s}
  .metrics-grid .metric.fade-section:nth-child(5){transition-delay:.14s}
  .faq-list details.qa.fade-section:nth-child(1){transition-delay:.00s}
  .faq-list details.qa.fade-section:nth-child(2){transition-delay:.05s}
  .faq-list details.qa.fade-section:nth-child(3){transition-delay:.10s}
  .faq-list details.qa.fade-section:nth-child(4){transition-delay:.15s}
  .faq-list details.qa.fade-section:nth-child(5){transition-delay:.20s}
  .faq-list details.qa.fade-section:nth-child(6){transition-delay:.25s}
  .faq-list details.qa.fade-section:nth-child(7){transition-delay:.30s}
  h1,h2,h3,h4,h5,h6,b,strong{font-weight:400}
  ::selection{background:var(--brand-fill);color:var(--ink)}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer}

  /* ---------- nav ---------- */
  nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;
    justify-content:space-between;padding:16px clamp(20px,4vw,48px);
    background:rgba(255,253,250,.88);backdrop-filter:blur(8px);
    border-bottom:1px solid transparent}
  nav.scrolled{border-bottom-color:var(--line)}
  .logo{font-family:var(--font-logo);font-weight:600;font-size:17px;letter-spacing:.06em;
    display:flex;align-items:center;gap:10px;color:var(--ink-strong);text-decoration:none}
  .logo-mark{width:12px;height:12px;background:var(--brand-logo);transform:rotate(45deg);border-radius:2px}
  .logo-img{height:1.4rem;width:1.4rem;display:block;object-fit:contain}
  .logo-text{font-family:var(--font-logo);font-size:1.35rem;font-weight:600;letter-spacing:.5px;
    color:var(--ink-strong);line-height:1}
  @media (min-width:768px){
    .logo-img{height:1.75rem;width:1.75rem}
    .logo-text{font-size:1.7rem}
  }
  .nav-links{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:400;color:var(--ink)}
  .nav-links > a:not(.btn):hover{color:var(--brand)}
  .btn{display:inline-block;border:1px solid var(--line-btn);border-radius:999px;
    padding:10px 22px;font-size:14px;font-weight:400;color:var(--ink);
    background:transparent;transition:background .2s,border-color .2s,color .2s}
  .btn:hover{border-color:var(--brand);color:var(--brand)}
  .btn.solid{background:var(--brand-fill);color:var(--ink);border-color:var(--brand-fill);font-weight:400}
  .btn.solid:hover{background:var(--brand-fill-hover);border-color:var(--brand-fill-hover);color:var(--ink)}

  /* ---------- hero: copy left, island right ---------- */
  .hero-block{display:flex;flex-direction:column;min-height:100vh}
  .hero{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
    display:flex;flex-direction:column}
  .hero-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
  @media (min-width:921px){
    .hero-block{height:100vh;overflow:hidden}
  }
  #population{position:absolute;inset:0;width:100%;height:100%;display:block}
  .hero-copy{position:absolute;inset:0 auto 0 0;z-index:2;pointer-events:none;
    max-width:540px;width:100%;
    padding:88px clamp(20px,4vw,48px) 96px;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;
    transform:translateY(-20px)}
  .hero-copy > *{pointer-events:auto;margin:0;max-width:100%}
  .eyebrow{font-size:12.5px;letter-spacing:.12em;font-weight:400;text-transform:uppercase;
    color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .live-dot{width:7px;height:7px;border-radius:50%;background:var(--c-patient);
    animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  h1{font-size:clamp(27px,3.2vw,39px);font-weight:400;line-height:1.22;
    letter-spacing:-.018em;color:var(--ink-strong)}
  h1 em{font-style:normal;color:var(--brand)}
  /* second tier: what that lets you do, with the rotating decision type */
  .hero-h2{font-size:clamp(18px,1.85vw,24px);font-weight:400;line-height:1.4;
    letter-spacing:-.012em;color:var(--ink-strong);margin-top:-6px}
  .rot-line{color:var(--brand-logo);white-space:nowrap}
  #rot-word{display:inline-block;will-change:transform,opacity}
  #rot-word.out{animation:rotOut .26s ease forwards}
  #rot-word.in{animation:rotIn .3s cubic-bezier(.22,.9,.3,1)}
  @keyframes rotOut{to{opacity:0;transform:translateY(-13px)}}
  @keyframes rotIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
  .hero-sub{font-size:clamp(15px,1.3vw,16px);color:var(--muted);font-weight:400;
    line-height:1.65}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
  /* sits in the gap under the island shadow, above the world dock */
  .hover-hint{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
    font-size:11px;font-weight:400;color:var(--muted);line-height:1.3;padding:0;
    text-shadow:0 0 8px var(--bg),0 1px 0 var(--bg),0 -1px 0 var(--bg)}
  .hover-hint svg{width:12px;height:12px;flex:none;display:block}
  .world-dock{position:absolute;z-index:5;bottom:clamp(42px,5.2vh,56px);
    left:var(--world-cx,61%);
    transform:translateX(-50%);display:flex;flex-direction:column;
    align-items:center;gap:16px}
  .wd-row{display:flex;align-items:center;gap:clamp(28px,3.4vw,56px)}
  .wdbtn{border:1.25px solid var(--line-btn);background:var(--card);padding:0;
    width:34px;height:34px;display:grid;place-items:center;flex:none;
    color:var(--ink);border-radius:50%;
    transition:color .2s,border-color .2s,background .2s}
  .wdbtn svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .wdbtn:hover{color:var(--brand);border-color:var(--brand)}
  .wdbtn:active{transform:translateY(1px)}
  .wdbtn.next{position:relative;overflow:hidden;border-color:var(--brand-fill);
    color:var(--brand-logo);animation:wdPulse 2.4s ease-in-out infinite}
  .wdbtn.next::after{content:'';position:absolute;inset:0;border-radius:50%;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.85) 50%,transparent 68%);
    transform:translateX(-110%);animation:wdShine 2.4s ease-in-out infinite}
  .wdbtn.next:hover{color:var(--brand);border-color:var(--brand)}
  /* --wd-accent is set per world from the audience palette */
  .wd-name{display:flex;flex-direction:column;align-items:center;gap:6px;
    white-space:nowrap;line-height:1;padding:0 4px}
  .wd-name b{font-size:15px;font-weight:400;letter-spacing:.1em;
    color:var(--ink-strong);transition:color .3s}
  .wd-name span{font-size:11.5px;font-weight:400;letter-spacing:.04em;color:var(--ink)}
  @keyframes wdShine{0%,18%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}
  @keyframes wdPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,186,116,.35)}50%{box-shadow:0 0 0 5px rgba(253,186,116,0)}}
  @media (prefers-reduced-motion:reduce){
    .wdbtn.next{animation:none}
    .wdbtn.next::after{animation:none;transform:translateX(-110%)}
  }
  @media (max-width:920px){
    .world-dock{position:relative;bottom:auto;left:auto;transform:none;
      width:100%;flex:none;margin:0;padding:18px 0 10px;gap:8px}
    .wd-row{gap:14px;justify-content:center;padding:0 16px}
    .wdbtn{width:30px;height:30px}
    .wdbtn svg{width:13px;height:13px}
    .wd-name b{font-size:13px}
    .wd-name span{font-size:11px}
    .rot-line{white-space:normal}
    h1{font-size:clamp(23px,6.4vw,28px);line-height:1.28}
    .hero-h2{font-size:clamp(15px,4vw,18px);margin-top:2px;line-height:1.45}
    .hero-sub{font-size:13.5px;line-height:1.6}
    .hero-copy{gap:18px}
    .hero-ctas{width:100%;gap:8px;flex-wrap:nowrap}
    .hero-ctas .btn{flex:1 1 0;min-width:0;text-align:center;padding:10px 12px}
  }

  /* ---------- chat bubbles above the islanders ---------- */
  .bubble{position:absolute;z-index:2;pointer-events:none;
    max-width:172px;background:rgba(255,255,255,.97);
    border:1px solid var(--line);border-radius:11px;
    padding:6px 10px 6px;
    box-shadow:0 8px 20px rgba(64,64,64,.14);
    font-size:10px;line-height:1.4;color:var(--ink);font-weight:400;
    opacity:0;transform:translate(-50%,calc(-100% - 12px)) scale(.92);
    transition:opacity .5s ease,transform .5s ease;will-change:left,top}
  .bubble.show{opacity:1;transform:translate(-50%,calc(-100% - 12px)) scale(1)}
  .bubble::after{content:'';position:absolute;left:50%;bottom:-5px;
    width:8px;height:8px;background:inherit;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    transform:translateX(-50%) rotate(45deg)}
  .bubble .btag{display:inline-flex;align-items:center;font-size:7.5px;font-weight:400;
    letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
    padding:2px 6px;border-radius:999px;border:1px solid;margin-bottom:4px}
  .bubble q{quotes:'\201C' '\201D';font-style:normal;display:block}
  .bubble q.typing{quotes:none;letter-spacing:.2em;color:var(--muted);font-weight:400}
  .bubble .who{display:flex;align-items:center;gap:5px;margin-top:3px;
    font-size:9px;font-weight:400;color:var(--muted);letter-spacing:.02em}
  .bubble .who i{width:5px;height:5px;border-radius:50%;flex:none}

  /* ---------- THE single profile card ---------- */
  .dossier{position:absolute;z-index:4;right:clamp(20px,3vw,40px);top:auto;
    bottom:clamp(62px,8vh,92px);
    width:min(300px,calc(100vw - 40px));
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    border:1px solid var(--line);border-radius:14px;
    padding:14px 16px 13px;
    box-shadow:0 8px 24px rgba(64,64,64,.10);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s ease,transform .4s cubic-bezier(.34,1.45,.5,1)}
  .dossier.hovering,.dossier.pinned{opacity:1;visibility:visible;pointer-events:auto}
  .dossier.swap{opacity:0;transform:translateY(8px) scale(.98)}
  .dossier-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
  .dossier-tag{font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
    padding:3px 10px;border-radius:999px;border:1px solid}
  .dossier-id{font-family:var(--font-display);font-size:10.5px;font-weight:400;letter-spacing:.04em;color:var(--muted)}
  .dossier-name{font-size:18px;font-weight:400;letter-spacing:-.01em;color:var(--ink-strong);
    line-height:1.3;margin-bottom:1px}
  .dossier-role{font-size:12px;color:var(--muted);margin-bottom:9px;font-weight:400}
  .dossier-bg-label{font-size:9px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);margin-bottom:4px}
  .dossier-story{font-size:12px;line-height:1.5;color:var(--ink);font-weight:400;
    border-left:2px solid var(--line);padding-left:10px;margin-bottom:9px}
  .demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:11.5px;
    align-items:start}
  .demo-grid > div{min-width:0;display:flex;flex-direction:column;gap:2px}
  .demo-grid dt{color:var(--muted);font-size:9px;font-weight:400;letter-spacing:.07em;text-transform:uppercase}
  .demo-grid dd{color:var(--ink-strong);font-weight:400;line-height:1.35}
  .dossier-src{margin-top:9px;font-size:9.5px;font-weight:400;color:var(--muted);letter-spacing:.03em}
  .dossier-src b{color:var(--brand);font-weight:400}
  .d-more{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
  .dossier.pinned .d-more{display:block}
  .d-quote{font-size:12px;font-style:italic;font-weight:400;color:var(--ink-strong);
    margin:0 0 7px;padding:6px 9px;background:var(--bg-tint);border-radius:8px}
  .d-quote::before{content:'\201C'}
  .d-quote::after{content:'\201D'}
  .dossier-progress{margin-top:6px;height:3px;background:rgba(64,64,64,.08);border-radius:3px;overflow:hidden}
  .dossier-progress i{display:block;height:100%;width:0;background:var(--brand-fill)}
  .dossier-progress i.run{animation:fill var(--rotate,8s) linear forwards}
  @keyframes fill{to{width:100%}}
  .dossier.hovering .dossier-progress,.dossier.pinned .dossier-progress{opacity:0}

  /* ---------- customer logos ---------- */
  /* --lw / --lh drive every logo box, so a strip can be resized in one place
     and the per-brand crops below stay in proportion */
  .logos{background:var(--bg);padding:12px 0 14px;overflow:hidden;flex:none}
  .logos-label{text-align:center;font-size:11px;font-weight:400;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .marquee-mask{
    padding:4px 0;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
  .marquee{--lw:132px;--lh:54px;
    display:flex;align-items:center;gap:72px;width:max-content;
    animation:scroll 45s linear infinite}
  .marquee img{width:var(--lw);height:var(--lh);flex:none;object-fit:contain;object-position:center;
    filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s}
  .marquee img:hover{filter:none;opacity:1}
  .marquee img.logo-ent{width:calc(var(--lw)*1.15);height:calc(var(--lh)*1.1);transform:scale(1.4)}
  .marquee img.logo-dopplr{width:calc(var(--lw)*1.2);height:calc(var(--lh)*1.1);transform:scale(1.48)}
  .marquee img.logo-everkind{width:calc(var(--lw)*1.2);height:calc(var(--lh)*1.1);
    transform:translateY(calc(var(--lh)*-.08)) scale(1.6)}
  .marquee img.logo-czi{width:calc(var(--lw)*1.15);height:calc(var(--lh)*1.1);
    margin-inline:-12px;transform:scale(1.18)}
  .marquee img.logo-aol{width:calc(var(--lw)*1.08);height:calc(var(--lh)*1.05);transform:scale(1.08)}
  .marquee img.logo-midi,.marquee img.logo-boat{width:calc(var(--lw)*0.5);height:calc(var(--lh)*0.5)}
  .marquee img.logo-aspire{width:calc(var(--lw)*0.75);height:calc(var(--lh)*0.75)}
  .marquee img.logo-landmark{filter:grayscale(1) brightness(.7)}
  .marquee img.logo-landmark:hover{filter:none}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* ---------- research / rigor ---------- */
  .research{background:var(--bg);
    padding:clamp(56px,8vw,96px) clamp(20px,4vw,48px);text-align:center}
  .research h2{font-size:clamp(26px,3.4vw,40px);font-weight:400;letter-spacing:-.02em;
    color:var(--ink-strong);margin-bottom:12px}
  .research h2 em{font-style:normal;color:var(--brand)}
  .research-sub{color:var(--muted);font-size:15.5px;font-weight:400;max-width:58ch;margin:0 auto 48px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line-faint);border-radius:16px;overflow:hidden;
    max-width:860px;margin:0 auto 52px}
  .stat{background:var(--card);padding:30px 20px}
  .stat b{display:block;font-family:var(--font-display);font-weight:400;
    font-size:clamp(30px,3.6vw,44px);letter-spacing:-.01em;color:var(--brand-logo);
    line-height:1.1;margin-bottom:6px}
  .stat span{font-size:13.5px;font-weight:400;color:var(--muted)}
  .inst-label{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);margin-bottom:22px}
  .inst-band{max-width:960px;margin:0 auto 44px}
  .inst-marquee{animation-duration:28s;gap:clamp(40px,4.5vw,64px)}
  .inst-marquee .inst-text{white-space:nowrap}
  .inst-logo{height:30px;width:auto;max-width:200px;object-fit:contain;
    filter:grayscale(1) contrast(1.05);opacity:.6;transition:opacity .25s}
  .inst-logo:hover{opacity:1}
  .inst-text{font-family:var(--font-display);font-size:16px;font-weight:400;letter-spacing:.03em;
    color:#3A3A3A;opacity:.6;transition:opacity .25s}
  .inst-text:hover{opacity:1}
  .paper-link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:400;
    color:var(--brand);border-bottom:1px solid transparent;transition:border-color .2s}
  .paper-link:hover{border-bottom-color:var(--brand)}
  .paper-link svg{flex:none}

  /* ---------- capabilities strip ---------- */
  .strip{background:var(--bg-tint);
    padding:clamp(56px,8vw,96px) clamp(20px,4vw,48px)}
  .strip-head{max-width:560px;margin-bottom:44px}
  .strip-head h2{font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.015em;
    margin-bottom:12px;color:var(--ink-strong)}
  .strip-head p{color:var(--muted);font-size:15.5px;font-weight:400}
  .cap-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line-faint);border-radius:16px;overflow:hidden}
  .cap{background:var(--card);padding:26px 24px}
  .cap h3{font-size:16px;font-weight:400;margin-bottom:8px;display:flex;align-items:center;
    gap:10px;color:var(--ink-strong)}
  .cap h3 i{width:7px;height:7px;border-radius:50%;flex:none}
  .cap p{font-size:13.5px;color:var(--muted);line-height:1.65;font-weight:400}

  /* ---------- pain points by function ---------- */
  /* every size in this section comes off one six-step scale, and every uppercase label shares
     --t-micro with --t-track, so nothing sits at an in-between size */
  .pp{--pp-cat:264px;
    --t-micro:11px;
    --t-track:.12em;
    --t-small:13.5px;
    --t-base:15px;
    --t-lead:clamp(16px,1.7vw,19px);
    --t-stat:clamp(19px,1.9vw,24px);
    --t-display:clamp(24px,3vw,34px);
    background:var(--bg)}
  .pp-eyebrow{display:inline-flex;align-items:center;gap:8px;
    font-size:var(--t-micro);letter-spacing:var(--t-track);
    text-transform:uppercase;color:var(--brand-logo);font-weight:400;margin-bottom:20px;
    background:var(--bg-tint);border:1px solid rgba(224,137,64,.35);border-radius:999px;
    padding:8px 18px;transition:border-color .2s,box-shadow .2s}
  .pp-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand-logo)}
  .pp-eyebrow:hover{border-color:var(--brand);box-shadow:0 6px 16px rgba(253,186,116,.25)}
  /* capped so the headline lands on two lines instead of one full-bleed sentence */
  .pp-head{max-width:min(100%,74ch);margin-bottom:30px}
  .pp-head h2{font-size:var(--t-display);font-weight:400;letter-spacing:-.015em;
    color:var(--ink-strong);line-height:1.2;text-wrap:balance}
  .pp-head h2 em{font-style:normal;color:var(--brand)}

  .pp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
  .pp-tab{background:var(--card);border:1px solid var(--line);border-radius:999px;
    padding:9px 20px;font-size:var(--t-base);font-weight:400;color:var(--muted);
    transition:all .2s;display:flex;align-items:center;gap:9px}
  .pp-tab i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;flex:none}
  .pp-tab:hover{color:var(--ink-strong);border-color:var(--brand-fill)}
  .pp-tab.active{background:var(--brand-fill);border-color:var(--brand-fill);color:var(--ink-strong)}
  .pp-tab.active i{background:var(--ink-strong);opacity:1}

  .pp-intro{font-size:var(--t-lead);color:var(--ink-strong);font-weight:400;
    line-height:1.55;letter-spacing:-.008em;max-width:72ch;margin-bottom:30px}
  .pp-body{transition:opacity .25s ease}
  .pp-body.swap{opacity:0}

  .pp-cols{display:grid;grid-template-columns:var(--pp-cat) 1fr 1fr;padding:0 0 10px}
  .pp-colh{font-size:var(--t-micro);font-weight:400;letter-spacing:var(--t-track);
    text-transform:uppercase;display:flex;align-items:center;gap:9px;padding-left:24px}
  .pp-colh.today{color:var(--muted)}
  .pp-colh.vec{color:var(--brand-logo)}
  .pp-colh i{width:8px;height:8px;border-radius:1px;flex:none}
  .pp-colh.today i{background:#C7C7CC}
  /* diamond echoes the logo mark, so the Vectorial column is marked as ours */
  .pp-colh.vec i{background:var(--brand-logo);transform:rotate(45deg)}
  /* --pp-rule is opaque so every divider reads identically over the white and the grey column;
     a translucent line would shift tone with whatever sits behind it */
  .pp-table{--pp-rule:#E7E7E8;display:grid;grid-template-columns:var(--pp-cat) 1fr 1fr;
    border:1px solid var(--pp-rule);border-radius:18px;background:var(--card);
    box-shadow:var(--shadow-card);overflow:hidden}
  .pp-rows,.pp-row{display:contents}
  .pp-cat{display:flex;align-items:center;gap:14px;padding:22px 16px 22px 24px;
    border-top:1px solid var(--pp-rule)}
  .pp-ci{width:46px;height:46px;border-radius:14px;
    background:linear-gradient(135deg,#FFF3E6,#FFE2C6);
    border:1px solid rgba(253,186,116,.45);display:flex;align-items:center;justify-content:center;
    color:var(--brand-logo);flex:none}
  .pp-ci svg{display:block;width:23px;height:23px}
  .pp-cat > div{min-width:0}
  /* same micro label as the question kickers — uppercase, tracked, muted */
  .pp-cat b{display:block;font-size:var(--t-micro);font-weight:400;color:var(--muted);
    letter-spacing:var(--t-track);text-transform:uppercase;line-height:1.4}
  .pp-cell{padding:22px 24px;border-top:1px solid var(--pp-rule);
    border-left:1px solid var(--pp-rule);
    display:flex;flex-direction:column;justify-content:center;gap:7px}
  .pp-cell.today{background:var(--card)}
  .pp-cell.vec{background:var(--card)}
  .pp-row:first-child > *{border-top:0}
  .pp-big{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:1.2;
    font-size:var(--t-stat)}
  /* the Today column is set apart by colour temperature, not by darkness: its
     stat takes --ink against the Vectorial column's brand orange */
  .pp-cell.today .pp-big{color:var(--ink)}
  .pp-cell.vec .pp-big{color:var(--brand-logo)}
  .pp-line{font-size:var(--t-small);line-height:1.55;font-weight:400;margin:0}
  .pp-cell.today .pp-line{color:var(--muted)}
  .pp-cell.vec .pp-line{color:var(--ink)}

  /* the prompts form a loose bento grid: visually related, but each card stands alone */
  .pp-questions{margin-top:52px}
  .pp-qhead{margin:0 0 18px}
  .pp-qhead h3{font-size:var(--t-lead);font-weight:400;color:var(--ink-strong);
    letter-spacing:-.008em;line-height:1.55}
  .pp-qhead h3 em{font-style:normal;color:var(--brand-logo)}
  /* the four questions sit 2x2 so they use the section's full width rather than
     stacking down one narrow column with the right half left empty */
  .qlist{--pp-rule:#E7E7E8;list-style:none;display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
  /* within a cell: the dot hangs in the left gutter beside the kicker, and the question
     starts on the kicker's left edge so every question shares one text rail */
  .qrow{display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:3px;
    min-height:104px;padding:20px 22px;align-content:center;
    border:1px solid var(--pp-rule);border-radius:16px;background:var(--card);
    box-shadow:var(--shadow-card);position:relative;
    transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
  .qrow:nth-child(4n+1),.qrow:nth-child(4n+4){grid-column:span 7}
  .qrow:nth-child(4n+2),.qrow:nth-child(4n+3){grid-column:span 5}
  .qrow:hover{background:#FFF9F3;border-color:rgba(224,137,64,.38);
    transform:translateY(-2px)}
  .qrow.bye{animation:qrowOut .28s ease forwards}
  @keyframes qrowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes qrowOut{to{opacity:0;transform:translateY(-8px)}}
  .qrow-dot{grid-area:1/1;align-self:center;
    width:7px;height:7px;border-radius:50%;background:var(--qc,var(--brand-logo))}
  /* the dot alone carries the segment colour; a tinted kicker would put non-brand blues and
     greens into the type of an otherwise orange-and-neutral section */
  .qrow-tag{grid-area:1/2;font-size:var(--t-micro);font-weight:400;
    letter-spacing:var(--t-track);text-transform:uppercase;color:var(--muted)}
  .qrow-q{grid-area:2/2;font-size:var(--t-base);line-height:1.5;color:var(--ink-strong);
    font-weight:400}
  @media (prefers-reduced-motion:reduce){.qrow{animation:none}}
  /* one column on phones, retaining the same card treatment */
  @media (max-width:920px){
    .qlist{grid-template-columns:minmax(0,1fr)}
    .qrow,.qrow:nth-child(n){grid-column:auto;min-height:0;padding:17px 18px}
  }
  .pp .uc-body{margin-top:0}
  .qticker{display:flex;flex-direction:column;gap:9px}
  .qs{position:relative;min-height:40px}
  .qs-item{position:absolute;inset:0;display:flex;align-items:flex-start;gap:11px;
    opacity:0;transform:translateY(13px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.22,.9,.3,1)}
  .qs-item.on{opacity:1;transform:none}
  .qs-item.off{opacity:0;transform:translateY(-13px)}
  .qs-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}
  .qs-q{font-size:clamp(14px,1.35vw,16.5px);font-weight:400;color:var(--ink-strong);
    line-height:1.45;letter-spacing:-.005em}
  .qs-tag{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.03em;white-space:nowrap}

  /* ---------- use cases: questions by team ---------- */
  .uc{background:var(--bg);
    padding:clamp(56px,8vw,96px) clamp(20px,4vw,48px)}
  .uc-head{max-width:600px;margin-bottom:30px}
  .uc-head h2{font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.015em;
    margin-bottom:12px;color:var(--ink-strong)}
  .uc-head h2 em{font-style:normal;color:var(--brand)}
  .uc-head p{color:var(--muted);font-size:15.5px;font-weight:400}

  .uc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px;
    border-bottom:1px solid var(--line);padding-bottom:0}
  .uc-tab{background:none;border:none;border-bottom:2px solid transparent;
    padding:10px 16px 12px;font-size:14.5px;font-weight:400;color:var(--muted);
    letter-spacing:.01em;transition:color .2s,border-color .2s;margin-bottom:-1px}
  .uc-tab:hover{color:var(--ink-strong)}
  .uc-tab.active{color:var(--ink-strong);font-weight:400;border-bottom-color:var(--brand-logo)}

  .uc-body{display:grid;grid-template-columns:minmax(280px,.9fr) 1.25fr;gap:22px;align-items:start}

  .uc-list{display:flex;flex-direction:column;gap:8px}
  .uc-qbtn{text-align:left;background:var(--card);border:1px solid var(--line);
    border-radius:13px;padding:14px 16px;font-size:14px;font-weight:400;line-height:1.5;
    color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s;
    display:flex;gap:11px;align-items:flex-start}
  .uc-qbtn:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(64,64,64,.06)}
  .uc-qbtn i{width:7px;height:7px;border-radius:50%;flex:none;margin-top:7px;
    opacity:.35;transition:opacity .2s}
  .uc-qbtn.active{background:var(--bg-tint);border-color:var(--brand-fill);
    font-weight:400;color:var(--ink-strong);
    box-shadow:0 8px 24px rgba(253,186,116,.13)}
  .uc-qbtn.active i{opacity:1}

  .uc-panel{background:var(--card);border:1px solid var(--line-card);border-radius:16px;
    padding:24px clamp(18px,2.2vw,28px) 22px;
    box-shadow:var(--shadow-card-hi);
    transition:opacity .28s ease,transform .28s ease}
  .uc-panel.swap{opacity:0;transform:translateY(12px)}
  .uc-seg{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:400;
    letter-spacing:.09em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
    border:1px solid;margin-bottom:12px}
  .uc-seg i{width:6px;height:6px;border-radius:50%;flex:none}
  .uc-question{font-size:clamp(16px,1.5vw,19px);font-weight:400;letter-spacing:-.01em;
    line-height:1.35;color:var(--ink-strong);margin-bottom:6px}
  .uc-meta{font-size:11.5px;color:var(--muted);font-weight:400;letter-spacing:.02em;
    margin-bottom:20px}
  .uc-meta b{color:var(--ink-strong);font-weight:400}

  .uc-bars{display:flex;flex-direction:column;gap:13px;margin-bottom:20px}
  .uc-bar{display:grid;grid-template-columns:minmax(96px,.55fr) 1fr;gap:14px;align-items:center}
  .uc-bar-label{font-size:13px;font-weight:400;color:var(--ink-strong);line-height:1.35}
  .uc-bar-label span{display:block;font-size:10.5px;font-weight:400;color:var(--muted);
    letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
  .uc-track{position:relative;height:30px;background:rgba(64,64,64,.055);border-radius:7px;
    display:flex;align-items:center}
  .uc-fill{height:100%;border-radius:7px;width:0;transition:width .85s cubic-bezier(.22,.9,.3,1)}
  .uc-val{position:absolute;right:11px;font-family:var(--font-display);font-size:12px;
    font-weight:400;color:var(--ink-strong);letter-spacing:.01em}

  .uc-fdrop{display:grid;grid-template-columns:minmax(96px,.55fr) 1fr;gap:14px;
    align-items:center;margin:-6px 0}
  .uc-fdrop > span{grid-column:2;font-size:11px;font-weight:400;color:var(--muted);
    padding-left:11px;display:flex;align-items:center;gap:7px}
  .uc-fdrop > span::before{content:'↓';font-size:12px}
  .uc-fdrop.worst > span{color:#9A5A50;font-weight:400}
  .uc-step-n{display:inline-flex;width:16px;height:16px;border-radius:50%;
    background:var(--bg-tint);border:1px solid var(--line);align-items:center;
    justify-content:center;font-family:var(--font-display);font-size:9px;font-weight:400;
    color:var(--muted);margin-right:6px;vertical-align:1px}
  .uc-quote-wrap{border-top:1px dashed var(--line);padding-top:16px}
  .uc-quote{font-size:13.5px;line-height:1.6;font-weight:400;color:var(--ink);font-style:italic}
  .uc-quote::before{content:'\201C'}
  .uc-quote::after{content:'\201D'}
  .uc-who{display:flex;align-items:center;gap:8px;margin-top:9px;
    font-size:11.5px;font-weight:400;color:var(--muted);font-style:normal;letter-spacing:.02em}
  .uc-who i{width:7px;height:7px;border-radius:50%;flex:none}
  .uc-who b{color:var(--ink-strong);font-weight:400}
  .uc-foot{margin-top:20px;font-size:12.5px;color:var(--muted);font-weight:400}
  .uc-foot a{color:var(--brand);font-weight:400;border-bottom:1px solid transparent;
    transition:border-color .2s}
  .uc-foot a:hover{border-bottom-color:var(--brand)}

  /* ---------- value: speed / breadth / depth ---------- */
  .val{background:var(--bg-tint);
    padding:clamp(56px,8vw,96px) clamp(20px,4vw,48px)}
  .val-head{max-width:620px;margin-bottom:38px}
  .val-head h2{font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.015em;
    margin-bottom:12px;color:var(--ink-strong);line-height:1.2}
  .val-head h2 em{font-style:normal;color:var(--brand)}
  .val-head p{color:var(--muted);font-size:15.5px;font-weight:400}

  .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
  .val-card{background:var(--card);border:1px solid var(--line-card);border-radius:16px;
    box-shadow:var(--shadow-card);
    padding:24px 22px 22px;display:flex;flex-direction:column}
  .val-k{font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
    color:var(--brand-logo);margin-bottom:10px}
  .val-card h3{font-size:17px;font-weight:400;letter-spacing:-.01em;line-height:1.35;
    color:var(--ink-strong);margin-bottom:16px}
  .val-card > p{font-size:13.5px;line-height:1.65;color:var(--muted);font-weight:400;margin-top:auto}
  .val-fig{margin:0 0 16px;padding:15px 15px 13px;background:var(--bg-tint);
    border-radius:12px}
  .val-fig figcaption{font-size:9.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);margin-bottom:12px}

  /* speed bars */
  .tbar{display:grid;grid-template-columns:1fr;gap:4px;margin-bottom:11px}
  .tbar:last-child{margin-bottom:2px}
  .tbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .tbar-l{font-size:11.5px;font-weight:400;color:var(--ink)}
  .tbar-v{font-family:var(--font-display);font-size:11.5px;font-weight:400;color:var(--ink-strong);
    white-space:nowrap}
  .tbar-t{height:9px;background:rgba(64,64,64,.06);border-radius:4px;overflow:hidden}
  .tbar-t i{display:block;height:100%;border-radius:4px;width:0;
    transition:width .9s cubic-bezier(.22,.9,.3,1)}
  .tbar.win .tbar-l,.tbar.win .tbar-v{color:var(--brand-logo);font-weight:400}
  .val-axis{font-size:9.5px;color:var(--muted);margin-top:9px;letter-spacing:.02em}

  /* breadth unit rows */
  .urow{margin-bottom:11px}
  .urow:last-child{margin-bottom:0}
  .urow-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
  .urow-l{font-size:11.5px;font-weight:400;color:var(--ink)}
  .urow-v{font-family:var(--font-display);font-size:11.5px;font-weight:400;color:var(--ink-strong)}
  .urow-dots{display:flex;gap:3px;flex-wrap:wrap}
  .urow-dots i{width:7px;height:7px;border-radius:2px;display:block}

  /* depth thread */
  .thread{font-size:11.5px;line-height:1.55}
  .th-q{font-weight:400;color:var(--ink-strong);margin-bottom:7px}
  .th-a{color:var(--ink);font-weight:400;padding:7px 10px;background:var(--bg-tint);
    border-radius:9px;margin-bottom:8px;font-style:italic}
  .th-f{display:flex;gap:7px;margin-bottom:7px;color:var(--brand-logo);font-weight:400}
  .th-f span{color:var(--ink-strong);font-weight:400}
  .th-who{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);font-weight:400}
  .th-who i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--c-patient)}
  .th-nest{padding-left:13px;border-left:2px solid var(--brand-fill)}

  .invest-wrap{background:var(--bg-tint);
    padding:clamp(48px,6vw,76px) clamp(20px,4vw,48px)}
  /* strategic investment band */
  .invest{background:var(--card);border:1px solid var(--line-card);border-radius:16px;
    box-shadow:var(--shadow-card);padding:28px clamp(20px,2.5vw,32px)}
  .invest h3{font-size:clamp(18px,2vw,22px);font-weight:400;letter-spacing:-.015em;
    color:var(--ink-strong);margin-bottom:6px}
  .invest > p{font-size:14px;color:var(--muted);font-weight:400;margin-bottom:24px;max-width:66ch}
  .invest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line-faint);border-radius:13px;overflow:hidden}
  .invest-cell{background:var(--card);padding:19px 18px}
  .invest-cell b{display:block;font-size:13.5px;font-weight:400;color:var(--ink-strong);margin-bottom:6px}
  .invest-cell span{font-size:12.5px;line-height:1.6;color:var(--muted);font-weight:400}

  /* ---------- metrics band: bento cards ---------- */
  .metrics{background:var(--bg)}
  .metrics-inner{max-width:none;margin:0 auto}
  .metrics-grid{display:grid;grid-template-columns:0.92fr 1.2fr 1.2fr;
    grid-template-rows:1fr 1fr;gap:14px}
  .metric{position:relative;display:flex;flex-direction:column;justify-content:center;
    padding:clamp(18px,2.2vw,26px) clamp(16px,1.8vw,24px);
    text-align:left;background:var(--card);border:1px solid var(--line-card);
    border-radius:16px;box-shadow:var(--shadow-card);min-height:0}
  .metric:first-child{grid-column:1;grid-row:1 / 3;padding:clamp(28px,3.2vw,40px) clamp(24px,2.6vw,36px)}
  .metric:nth-child(2){grid-column:2;grid-row:1}
  .metric:nth-child(3){grid-column:3;grid-row:1}
  .metric:nth-child(4){grid-column:2;grid-row:2}
  .metric:nth-child(5){grid-column:3;grid-row:2}
  .metric b{display:block;font-family:var(--font-display);font-weight:400;
    font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;color:var(--brand-logo);
    line-height:1.05;margin-bottom:6px}
  .metric:first-child b{font-size:clamp(40px,4.4vw,58px);margin-bottom:10px}
  .metric strong{display:block;font-size:16.5px;font-weight:400;color:var(--ink-strong);
    letter-spacing:-.005em;margin-bottom:6px}
  .metric:first-child strong{font-size:19px;margin-bottom:8px}
  .metric span{display:block;font-size:16px;line-height:1.5;color:var(--muted);
    font-weight:400;max-width:none}

  /* ---------- rigor band (static logo strip, same label as .logos) ---------- */
  .rigor-strip{background:var(--bg)}
  .rigor{max-width:none;margin:0;text-align:center}
  .rigor .logos-label{margin-bottom:8px}

  /* academic backbone: static logo strip, same boxes/filters as .marquee */
  .rigor-inst{margin:0}
  .rigor-inst-grid{--lw:148px;--lh:56px;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;width:100%;gap:0;padding:6px 0}
  .inst-cell{position:relative;display:flex;align-items:center;justify-content:center;
    min-width:0;padding:4px 16px}
  .inst-cell + .inst-cell::before{content:"";position:absolute;left:0;top:50%;
    transform:translateY(-50%);width:1px;height:46%;background:var(--line)}
  .inst-cell .inst-logo{width:var(--lw);height:var(--lh);max-width:100%;
    object-fit:contain;object-position:center;
    filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s}
  .inst-cell:hover .inst-logo{filter:none;opacity:1}
  .inst-cell .inst-logo-cmu{width:calc(var(--lw)*1.22);height:calc(var(--lh)*1.14)}
  .inst-cell .inst-logo-lse{width:calc(var(--lw)*1.28);height:calc(var(--lh)*1.12)}
  .inst-cell .inst-logo-bair{width:calc(var(--lw)*1.18);height:calc(var(--lh)*1.18);
    opacity:.62;filter:invert(1) grayscale(1) contrast(2.4) brightness(.28);
    mix-blend-mode:multiply}
  .inst-cell:hover .inst-logo-bair{filter:invert(1) grayscale(1) contrast(2.4) brightness(.18);
    opacity:1}

  /* the papers behind the claim */
  .rigor-links{margin:32px 0 0;display:flex;justify-content:center;
    align-items:center;gap:12px;flex-wrap:wrap}
  .paper-btn{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:400;
    color:var(--ink);background:var(--brand-fill);border:1px solid var(--brand-fill);
    border-radius:999px;padding:10px 20px;
    transition:background .2s,border-color .2s,color .2s}
  .paper-btn svg{flex:none}
  .paper-btn:hover{background:var(--brand-fill-hover);border-color:var(--brand-fill-hover);
    color:var(--ink)}

  .rigor-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:400;
    color:var(--muted);border-bottom:1px solid transparent;
    transition:color .2s,border-color .2s}
  .rigor-link svg{flex:none;opacity:.75}
  .rigor-link:hover{color:var(--brand);border-bottom-color:var(--brand-fill)}

  @media (max-width:920px){
    .metrics{padding-inline:16px}
    .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));
      grid-template-rows:auto;gap:10px}
    .metric,.metric:nth-child(n){grid-column:auto;grid-row:auto;padding:16px 15px 17px}
    .metric:first-child{grid-column:1 / -1;padding:22px 18px 20px}
    .metric:first-child b{font-size:clamp(32px,9vw,42px)}
    .metric:first-child strong{font-size:17px}
    .metric b{font-size:clamp(24px,7vw,30px);margin-bottom:3px}
    .metric strong{font-size:15.5px;margin-bottom:4px}
    .metric span{font-size:15px;line-height:1.5;max-width:none}
    .rigor-inst-grid{--lw:128px;--lh:50px;
      grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 0}
    .inst-cell:nth-child(3n+1)::before{display:none}
  }

  /* ---------- the hard part ---------- */
  .hp{background:var(--bg)}
  .hp-eyebrow{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--brand-logo);font-weight:400;margin-bottom:20px;
    display:inline-flex;align-items:center;gap:8px;
    background:var(--bg-tint);border:1px solid rgba(224,137,64,.35);border-radius:999px;
    padding:8px 18px;transition:border-color .2s,box-shadow .2s}
  .hp-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand-logo)}
  .hp-eyebrow:hover{border-color:var(--brand);box-shadow:0 6px 16px rgba(253,186,116,.25)}
  .hp h2{font-size:clamp(25px,3.1vw,38px);line-height:1.18;letter-spacing:-.025em;
    font-weight:400;max-width:980px;margin-bottom:clamp(30px,4vw,50px);color:var(--ink-strong)}
  .hp h2 .muted{color:var(--muted)}

  /* each principle is a self-contained card; alternating artwork keeps the
     long section varied without implying that the principles are sequential */
  .hp-rows{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
  .hp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,4.5vw,64px);align-items:center;position:relative;overflow:hidden;
    padding:clamp(24px,3.5vw,46px);background:var(--card);
    border:1px solid var(--line-card);border-radius:22px;box-shadow:var(--shadow-card)}
  .hp-row:nth-child(odd) .hp-stage{order:-1}

  .hp-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .hp-num{font-family:var(--font-display);font-size:12px;font-weight:400;
    letter-spacing:.08em;color:var(--brand-logo);font-variant-numeric:tabular-nums;flex:none}
  .hp-label{font-size:12px;font-weight:400;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted)}

  /* the copy reads as three beats: the tension, the answer, the evidence */
  .hp-copy h3{font-size:clamp(20px,2.3vw,27px);line-height:1.25;
    letter-spacing:-.018em;font-weight:400;color:var(--ink-strong);
    margin-bottom:20px}
  /* same mark and type as the "With Vectorial" column head in the comparison table */
  .hp-sol-k{display:flex;align-items:center;gap:9px;
    font-size:11px;font-weight:400;letter-spacing:.12em;
    text-transform:uppercase;margin-bottom:9px;color:var(--brand-logo)}
  .hp-sol-k::before{content:'';width:8px;height:8px;border-radius:1px;flex:none;
    background:var(--brand-logo);transform:rotate(45deg)}
  .hp-sol{font-size:clamp(16px,1.75vw,19.5px);font-weight:400;line-height:1.45;
    letter-spacing:-.01em;color:var(--ink-strong);margin-bottom:16px}
  .hp-body{color:var(--muted);font-size:15px;font-weight:400;line-height:1.65;
    max-width:62ch}

  .hp-proof{display:block}

  .hp-stage{aspect-ratio:340/190;background:#FFF9F3;
    border:1px solid rgba(224,137,64,.22);border-radius:16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);overflow:hidden}
  .hp-stage svg{display:block;width:100%;height:100%}

  /* between the phone breakpoint and the width where the columns come out level
     there is no ratio that balances them — the copy is always taller. so the
     artwork takes the whole row and the copy reads underneath in two columns,
     which leaves no height to reconcile at all */
  @media (min-width:921px) and (max-width:1359px){
    .hp-row{grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.6vw,32px)}
    .hp-row .hp-stage{order:-1}
    .hp-copy{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
      column-gap:clamp(34px,4.5vw,64px)}
    .hp-head{grid-area:1/1}
    .hp-copy h3{grid-area:2/1/4/2;margin-bottom:0}
    .hp-sol-k{grid-area:1/2}
    .hp-sol{grid-area:2/2}
    .hp-body{grid-area:3/2}
  }

  /* accuracy benchmark: chart card + three takeaway cards */
  .bench-wrap{margin-top:0;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(250px,320px);
    gap:14px;align-items:stretch}
  .bench{background:var(--card);border:1px solid var(--line-card);
    box-shadow:var(--shadow-card);
    border-radius:16px;padding:26px clamp(18px,2.4vw,30px) 24px;min-width:0}
  .bench-k{font-size:11px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
    color:var(--brand-logo);margin-bottom:10px}
  .bench h3{font-size:clamp(19px,2.2vw,24px);font-weight:400;letter-spacing:-.015em;
    color:var(--ink-strong);margin-bottom:8px;line-height:1.25}
  .bench-sub{font-size:13.5px;color:var(--muted);font-weight:400;max-width:82ch;margin-bottom:22px}
  .bench-chart{width:100%;min-width:0}
  .bench-chart svg{display:block;width:100%;max-width:1000px;height:auto;margin:0}
  .bench-foot{display:flex;flex-direction:column;gap:14px}
  .bench-cell{flex:1;display:flex;flex-direction:column;justify-content:center;
    text-align:left;background:var(--card);border:1px solid var(--line-card);
    border-radius:16px;box-shadow:var(--shadow-card);padding:20px 18px}
  .bench-cell b{display:block;font-family:var(--font-display);font-size:28px;font-weight:400;
    color:var(--brand-logo);margin-bottom:6px;letter-spacing:-.01em}
  .bench-cell span{font-size:15px;line-height:1.55;color:var(--muted);font-weight:400}
  .bench-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
  .bench-note{font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.6;margin-top:16px}

  .bx-grid{stroke:rgba(64,64,64,.09);stroke-width:1}
  .bx-axis{stroke:rgba(64,64,64,.22);stroke-width:1}
  .bx-tick{fill:#9A9490;font-size:11px;font-family:'Poppins',sans-serif}
  .bx-name{fill:#5F5A56;font-size:12px;font-weight:400;font-family:'Poppins',sans-serif}
  .bx-date{fill:#9A9490;font-size:10.5px;font-family:'Poppins',sans-serif}
  /* bar values sit at the height of the dashed ceiling line, so each label paints a
     card-colored halo underneath itself to break the line rather than collide with it */
  .bx-val{fill:#3A3532;font-size:12.5px;font-weight:400;font-family:'Poppins',sans-serif;
    paint-order:stroke fill;stroke:var(--card);stroke-width:4.5px;stroke-linejoin:round}
  .bx-val.win{fill:#E08940}
  .bx-name.win{fill:#E08940;font-weight:400}
  .bx-ceil{stroke:#B9B1A8;stroke-width:1.2;stroke-dasharray:5 5}
  .bx-ceil-t{fill:#9A9490;font-size:10.5px;font-weight:400;letter-spacing:.06em;
    font-family:'Poppins',sans-serif}
  .bx-ytitle{fill:#9A9490;font-size:11px;font-family:'Poppins',sans-serif}
  .bx-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);
    transition:transform .95s cubic-bezier(.22,.9,.3,1)}
  .bx-bar.grow{transform:scaleY(1)}
  /* row layout used on narrow screens: bars run left to right */
  .bx-sm{font-size:11px}
  .bx-glabel{fill:#9A9490;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
    font-family:'Poppins',sans-serif;paint-order:stroke fill;stroke:var(--card);
    stroke-width:4px;stroke-linejoin:round}
  .bx-bar.bx-h{transform-origin:left center;transform:scaleX(0)}
  .bx-bar.bx-h.grow{transform:scaleX(1)}

  /* hard-part viz tokens (light) */
  .hpv-label{fill:#9A9490;font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:400}
  .hpv-text{fill:#6E6A66;font-size:8px}
  .hpv-text-hi{fill:#3A3532;font-size:8px;font-weight:400}
  .hpv-rule{stroke:rgba(64,64,64,.14);stroke-width:1}
  .hpv-chip{fill:#FFFDFA;stroke:rgba(64,64,64,.16)}
  .hpv-chip-hi{fill:#FBEEE2;stroke:rgba(224,137,64,.5)}
  .hpv-avg{fill:#CFC6B9}
  .hpv-person{opacity:0;transform-box:fill-box;transform-origin:center;
    animation:hppop .5s cubic-bezier(.2,.9,.3,1.4) forwards}
  @keyframes hppop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
  .hpv-arrow{stroke:#A9A29B;stroke-width:1.2;fill:none}
  .hpv-node{fill:#F1E8DC;stroke:#C6BDB1;stroke-width:1;animation:hpstep 4.8s ease-in-out infinite}
  @keyframes hpstep{0%,4%{fill:#F1E8DC;stroke:#C6BDB1}12%,46%{fill:rgba(224,137,64,.22);stroke:#E08940}62%,100%{fill:#F1E8DC;stroke:#C6BDB1}}
  .hpv-crowd{fill:#C6BDB1;animation:hpspread 4.8s ease-in-out infinite}
  @keyframes hpspread{0%,48%{fill:#C6BDB1}58%,86%{fill:#E08940}96%,100%{fill:#C6BDB1}}
  .hpv-tl{stroke:#C6BDB1;stroke-width:1.2}
  .hpv-tick{stroke:#C6BDB1;stroke-width:1;stroke-dasharray:2 3}
  .hpv-mark{fill:#FFF6EC;stroke:#C6BDB1;stroke-width:1.6}
  .hpv-mark-hi{fill:#E08940;animation:hpblip 6.4s ease-in-out infinite}
  @keyframes hpblip{0%,100%{opacity:.5}12%,26%{opacity:1}}
  .hpv-drop{stroke:#E08940;stroke-width:1;stroke-dasharray:20;stroke-dashoffset:20;
    animation:hpdrop 6.4s ease-in-out infinite}
  @keyframes hpdrop{0%{stroke-dashoffset:20}10%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  .hpv-wire{fill:none;stroke:#D9D0C4;stroke-width:1}
  .hpv-wirefill{fill:#EFE6DA}
  .hpv-cursor{fill:#E08940;opacity:.3;offset-rotate:0deg;
    transform-box:fill-box;transform-origin:0 0}
  .hpv-cursor.lead{opacity:.95}
  .hpv-cursor.c0{animation:hpcur0 7.2s cubic-bezier(.22,.75,.28,1) infinite}
  .hpv-cursor.c1{animation:hpcur1 8.8s cubic-bezier(.22,.75,.28,1) infinite}
  .hpv-cursor.c2{animation:hpcur2 8s cubic-bezier(.22,.75,.28,1) infinite}
  @keyframes hpcur0{
    0%,12%{transform:translate(72px,62px) rotate(-28deg)}
    22%,34%{transform:translate(36px,104px) rotate(-28deg)}
    46%,58%{transform:translate(80px,104px) rotate(-28deg)}
    70%,84%{transform:translate(38px,137px) rotate(-28deg)}
    100%{transform:translate(72px,62px) rotate(-28deg)}
  }
  @keyframes hpcur1{
    0%,14%{transform:translate(40px,74px) rotate(-28deg)}
    26%,38%{transform:translate(82px,108px) rotate(-28deg)}
    52%,64%{transform:translate(50px,138px) rotate(-28deg)}
    78%,90%{transform:translate(88px,68px) rotate(-28deg)}
    100%{transform:translate(40px,74px) rotate(-28deg)}
  }
  @keyframes hpcur2{
    0%,10%{transform:translate(86px,80px) rotate(-28deg)}
    24%,36%{transform:translate(38px,108px) rotate(-28deg)}
    50%,62%{transform:translate(92px,64px) rotate(-28deg)}
    76%,88%{transform:translate(56px,136px) rotate(-28deg)}
    100%{transform:translate(86px,80px) rotate(-28deg)}
  }
  .hpv-bub-u{fill:#F1E8DC}
  .hpv-bub-a{fill:rgba(224,137,64,.13);stroke:rgba(224,137,64,.42)}
  /* 01: individual → collective zoom */
  .hpZa,.hpZb{transform-box:view-box}
  .hpZa{animation:hpZa 8.8s ease-in-out infinite}
  .hpZb{animation:hpZb 8.8s ease-in-out infinite}
  @keyframes hpZa{0%,34%{opacity:1;transform:scale(1)}44%,88%{opacity:0;transform:scale(.42)}97%,100%{opacity:1;transform:scale(1)}}
  @keyframes hpZb{0%,36%{opacity:0;transform:scale(2.2)}46%,88%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(2.2)}}
  .hp-tchip{opacity:0;animation:hpChip 8.8s ease infinite}
  @keyframes hpChip{0%{opacity:0;transform:translateY(7px)}4%{opacity:1;transform:none}96%{opacity:1;transform:none}100%{opacity:0}}
  /* 02: campaign score bars */
  .hp-cbar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);
    animation:hpCbar 4s ease-in-out infinite}
  @keyframes hpCbar{0%,10%{transform:scaleX(0)}35%,82%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
  /* 03: cycling life events */
  .hp-ev{opacity:0;animation:hpEv 9.6s ease-in-out infinite}
  @keyframes hpEv{0%{opacity:0}3%,22%{opacity:1}28%,100%{opacity:0}}
  /* 01: trait rings */
  .hp-ring{transform-box:fill-box;transform-origin:center;
    animation:hpRing 8.8s ease-out infinite}
  /* crowd sub-group outlines breathe gently */
  .hp-grp{animation:hpGrp 5.2s ease-in-out infinite}
  @keyframes hpGrp{0%,100%{opacity:.55}50%{opacity:1}}
  .hp-glabel{opacity:1}
  /* 04: intrinsic and extrinsic bands take turns; the resting band greys out */
  .hp4-band{transition:opacity .6s}
  .hp4-in{animation:hp4In 9.6s ease-in-out infinite}
  .hp4-out{animation:hp4Out 9.6s ease-in-out infinite}
  @keyframes hp4In{0%,42%{opacity:1}50%,92%{opacity:.16}100%{opacity:1}}
  @keyframes hp4Out{0%,42%{opacity:.16}50%,92%{opacity:1}100%{opacity:.16}}
  /* band titles share one spot, so the resting one goes fully invisible */
  .hp4-tin{animation:hp4TIn 9.6s ease-in-out infinite}
  .hp4-tout{animation:hp4TOut 9.6s ease-in-out infinite}
  @keyframes hp4TIn{0%,42%{opacity:1}48%,94%{opacity:0}100%{opacity:1}}
  @keyframes hp4TOut{0%,44%{opacity:0}52%,90%{opacity:1}96%,100%{opacity:0}}
  /* rings fire during the individual's half of the cycle (second half) */
  @keyframes hpRing{0%,44%{opacity:0;transform:scale(.55)}52%{opacity:1;transform:scale(1)}86%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
  /* 02: wordless agent exchange */
  .ag-u{animation:agU 5.2s ease infinite}
  @keyframes agU{0%{opacity:0;transform:translateY(5px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
  .ag-dots{animation:agD 5.2s ease infinite}
  @keyframes agD{0%,8%{opacity:0}13%,42%{opacity:1}48%,100%{opacity:0}}
  .ag-a{transform-box:fill-box;transform-origin:center;animation:agA 5.2s ease infinite}
  @keyframes agA{0%,44%{opacity:0;transform:scale(.85)}52%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
  /* 04: encoding map */
  .hp-ripple{transform-box:fill-box;transform-origin:center;
    animation:hpRipple 4.2s ease-out infinite}
  @keyframes hpRipple{0%{transform:scale(.07);opacity:.55}70%{opacity:0}100%{transform:scale(1);opacity:0}}
  .hp-orb{transform-box:view-box;animation:hpSpin linear infinite}
  @keyframes hpSpin{to{transform:rotate(360deg)}}
  .hp-dl{opacity:0;transition:opacity .7s ease}
  .hp-dl.go{opacity:1}
  .hp-dl-pill{fill:var(--bg-tint)}
  .hp-env{fill:#E08940;font-size:9.5px;font-weight:400;letter-spacing:.14em}

  /* ---------- FAQ ---------- */
  .faq{background:var(--bg)}
  .faq-head{max-width:620px;margin-bottom:32px}
  .faq-head h2{font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.015em;
    margin-bottom:12px;color:var(--ink-strong)}
  .faq-head h2 em{font-style:normal;color:var(--brand)}
  .faq-head p{color:var(--muted);font-size:15.5px;font-weight:400}
  .faq-list{display:flex;flex-direction:column;gap:10px}
  details.qa{background:var(--card);border:1px solid var(--line-card);border-radius:14px;
    box-shadow:var(--shadow-card);
    padding:0 clamp(16px,2vw,24px);transition:box-shadow .2s,border-color .2s}
  details.qa[open]{border-color:rgba(224,137,64,.22)}
  details.qa summary{list-style:none;cursor:pointer;padding:19px 0;
    display:flex;align-items:flex-start;gap:14px;
    font-size:15.5px;font-weight:400;color:var(--ink-strong);line-height:1.45}
  details.qa summary::-webkit-details-marker{display:none}
  details.qa summary::after{content:'';flex:none;margin-left:auto;width:11px;height:11px;
    border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
    transform:rotate(45deg);margin-top:4px;transition:transform .25s,border-color .2s}
  details.qa[open] summary::after{transform:rotate(-135deg);border-color:var(--brand)}
  details.qa summary:hover::after{border-color:var(--brand)}
  .qa-n{font-family:var(--font-display);font-size:11.5px;font-weight:400;color:var(--brand-logo);
    flex:none;margin-top:4px;letter-spacing:.03em}
  .qa-q{flex:1;min-width:0}
  .qa-body{padding:0 0 22px 0;font-size:14px;line-height:1.7;color:var(--ink);font-weight:400}
  .qa-body p{margin-bottom:12px}
  .qa-body p:last-child{margin-bottom:0}
  .qa-body strong{font-weight:400;color:var(--ink-strong)}

  /* LLM vs SAPIENS example */
  .vs-prompt{font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);margin:18px 0 8px}
  .vs-prompt b{color:var(--ink-strong);font-weight:400;letter-spacing:0;text-transform:none;
    font-size:13.5px;display:block;margin-top:5px}
  .vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 6px}
  .vs-card{border:1px solid var(--line-faint);border-radius:13px;
    padding:16px 17px 15px;background:var(--wash)}
  .vs-card.good{background:var(--bg-tint);border-color:rgba(224,137,64,.18)}
  .vs-t{font-size:10.5px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:7px}
  .vs-card.good .vs-t{color:var(--brand-logo)}
  .vs-t i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
  .vs-out{font-size:12.5px;line-height:1.6;color:var(--ink);font-style:italic;margin-bottom:12px}
  .vs-num{font-family:var(--font-display);font-size:12.5px;font-weight:400;color:var(--ink-strong);
    font-style:normal;display:block;margin-bottom:6px}
  .vs-flags{list-style:none;display:flex;flex-direction:column;gap:6px;
    border-top:1px dashed var(--line);padding-top:11px}
  .vs-flags li{font-size:11.5px;line-height:1.45;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
  .vs-flags li::before{content:'\2715';color:#B4736A;font-size:10px;flex:none;margin-top:2px;font-weight:400}
  .vs-card.good .vs-flags li::before{content:'\2713';color:#4FA97C}

  /* comparison matrix */
  .mx-wrap{margin:16px 0 6px;overflow-x:auto;border:1px solid var(--line-faint);border-radius:14px;
    -webkit-overflow-scrolling:touch}
  table.mx{border-collapse:collapse;width:100%;min-width:660px;font-size:11.5px;background:var(--card)}
  table.mx th,table.mx td{text-align:left;padding:9px 11px;vertical-align:top;
    border-bottom:1px solid var(--line);line-height:1.45}
  table.mx thead th{font-size:10.5px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);background:var(--bg);position:sticky;top:0}
  table.mx tbody th{font-weight:400;color:var(--ink-strong);background:var(--bg);width:124px;
    font-size:11px}
  table.mx td{color:var(--muted);font-weight:400}
  table.mx .col-v{background:var(--bg-tint);color:var(--ink);font-weight:400;
    border-left:1px solid var(--brand-fill);border-right:1px solid var(--brand-fill)}
  table.mx thead .col-v{background:var(--brand-fill);color:var(--ink-strong);font-weight:400}
  table.mx tbody tr:last-child td,table.mx tbody tr:last-child th{border-bottom:none}
  .mx-note{font-size:11.5px;color:var(--muted);margin-top:10px}
  .mx-link{color:var(--brand-logo);font-weight:400;
    border-bottom:1px solid var(--brand-fill);transition:color .2s}
  .mx-link:hover{color:var(--brand)}

  /* ---------- about ---------- */
  .about{background:var(--bg);
    padding:clamp(52px,7vw,84px) clamp(20px,4vw,48px)}
  .about-head{max-width:620px;margin-bottom:30px}
  .about-head h2{font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.015em;
    margin-bottom:10px;color:var(--ink-strong)}
  .about-head h2 em{font-style:normal;color:var(--brand)}
  .about-head p{color:var(--muted);font-size:15px;font-weight:400}
  .about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:880px}
  .person{background:var(--card);border:1px solid var(--line-card);border-radius:16px;
    box-shadow:var(--shadow-card);
    padding:28px 22px 24px;text-align:center;transition:box-shadow .2s,border-color .2s}
  .person:hover{border-color:rgba(224,137,64,.22);
    box-shadow:0 2px 5px rgba(224,137,64,.07),0 18px 42px rgba(253,186,116,.22)}
  .p-avatar{width:66px;height:66px;border-radius:50%;margin:0 auto 14px;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:400;font-size:21px;color:#FFFDFA;
    background:linear-gradient(135deg,var(--brand-fill),var(--brand-logo));
    box-shadow:0 8px 20px rgba(253,186,116,.3)}
  .person b{display:block;font-size:16px;font-weight:400;color:var(--ink-strong);
    letter-spacing:-.01em}
  .person > span{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px}
  .p-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
    font-size:13px;font-weight:400;color:var(--ink);background:var(--brand-fill);
    border:1px solid var(--brand-fill);padding:9px 16px;border-radius:999px;
    transition:background .2s,border-color .2s,color .2s}
  .p-link:hover{background:var(--brand-fill-hover);border-color:var(--brand-fill-hover);
    color:var(--ink)}
  @media (max-width:920px){.about-grid{grid-template-columns:1fr}}

  /* ---------- trust / compliance ---------- */
  .trust{--trust-y:clamp(22px,2.6vw,32px);background:var(--bg)}
  .trust .hp-eyebrow{margin-bottom:16px}
  .trust-head{max-width:720px;margin:0 0 var(--trust-y);text-align:left}
  .trust-head h2{font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.015em;
    color:var(--ink-strong);line-height:1.2;margin:0 0 10px}
  .trust-head h2 em{font-style:normal;color:var(--brand)}
  .trust-head p{color:var(--muted);font-size:15.5px;font-weight:400;margin:0}
  .trust-panel{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
    background:var(--card);border:1px solid var(--line-card);border-radius:16px;
    box-shadow:var(--shadow-card);
    padding:clamp(22px,3vw,36px) clamp(22px,3.2vw,40px)}
  /* two marks sit in a content-sized rail — stretching them across the card
     left a dead band between SOC 2 and ISO */
  .trust-badges{display:flex;flex-direction:column;justify-content:center;gap:44px;
    margin:0;padding:2px clamp(28px,3.6vw,48px) 2px 0;border:0;
    border-right:1px solid var(--line)}
  .badge{position:relative;display:flex;align-items:center;gap:16px;padding:2px 0;
    text-align:left;transition:opacity .2s;text-decoration:none;color:inherit}
  .badge + .badge{padding-left:0}
  .badge + .badge::before{display:none}
  a.badge:hover{opacity:.72}
  .badge-logo{height:56px;width:auto;display:block;flex:none;object-fit:contain;
    background:transparent;border:none;border-radius:0;padding:0}
  .badge b{display:block;font-size:17px;font-weight:400;color:var(--ink-strong);letter-spacing:-.01em}
  .badge .badge-sub{display:block;font-size:13.5px;color:var(--muted);font-weight:400;margin-top:3px}
  .trust-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:56px 28px;list-style:none;margin:0;padding:0 0 0 clamp(28px,3.6vw,48px);
    align-content:center}
  .trust-points li{display:flex;align-items:flex-start;gap:10px;
    font-size:17px;line-height:1.4;color:var(--ink);font-weight:400;text-align:left}
  .trust-points li::before{content:'';width:18px;height:18px;flex:none;margin-top:2px;
    border-radius:50%;background:rgba(224,137,64,.14)
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.2 6.2 L4.8 8.7 L9.8 3.3' fill='none' stroke='%23E08940' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
      center/10px no-repeat}
  @media (max-width:560px){
    .trust-points{grid-template-columns:1fr;gap:28px}
    .trust-badges{flex-direction:column;align-items:flex-start;gap:24px}
    .badge + .badge{padding-left:0;padding-top:16px;margin-top:0;
      border-top:1px solid var(--line)}
    .badge + .badge::before{display:none}
    .rigor-inst-grid{--lw:118px;--lh:46px;
      grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0}
    .inst-cell:nth-child(3n+1)::before{display:block}
    .inst-cell:nth-child(2n+1)::before{display:none}
  }

  /* ---------- start-simulations modal ---------- */
  .sim-overlay{position:fixed;inset:0;z-index:100;background:rgba(43,36,30,.45);
    backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:flex-start;
    padding:max(4vh,20px) 20px 40px;overflow-y:auto;opacity:0;pointer-events:none;
    transition:opacity .25s ease}
  .sim-overlay.open{opacity:1;pointer-events:auto}
  .sim-overlay:not(.open), .sim-overlay:not(.open) *{pointer-events:none !important}
  .sim-modal{position:relative;width:min(480px,100%);background:var(--bg);
    border:1px solid var(--line);border-radius:18px;
    padding:28px clamp(22px,4vw,32px) 26px;
    box-shadow:0 40px 90px rgba(43,36,30,.35);
    transform:translateY(-12px);transition:transform .3s cubic-bezier(.22,.9,.3,1)}
  .sim-overlay.open .sim-modal{transform:none}
  .sim-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
    border:1px solid var(--line);background:var(--card);color:var(--muted);
    font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}
  .sim-x:hover{color:var(--ink-strong);border-color:var(--brand)}
  .sim-k{font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
    color:var(--brand-logo);margin-bottom:8px}
  .sim-modal h3{font-size:20px;font-weight:400;letter-spacing:-.015em;
    color:var(--ink-strong);margin-bottom:6px;line-height:1.3}
  .sim-sub{font-size:13px;color:var(--muted);font-weight:400;margin-bottom:20px;line-height:1.55}
  .sim-modal form{display:flex;flex-direction:column;gap:14px}
  .sim-modal label{display:block;font-size:12px;font-weight:400;color:var(--ink-strong);
    letter-spacing:.02em}
  .sim-modal input,.sim-modal textarea{display:block;width:100%;margin-top:6px;
    font-family:inherit;font-size:14px;font-weight:400;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:11px 13px;resize:vertical;transition:border-color .2s,box-shadow .2s}
  .sim-modal input:focus,.sim-modal textarea:focus{outline:none;
    border-color:var(--brand);box-shadow:0 0 0 3px rgba(253,186,116,.18)}
  .sim-modal ::placeholder{color:#B8B2AC}
  .sim-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:-4px;
    border-radius:12px;padding:2px;transition:box-shadow .2s}
  .sim-chips.err{box-shadow:0 0 0 2px rgba(180,115,106,.5)}
  .sim-chip{border:1px solid var(--line);border-radius:999px;padding:7px 14px;
    font-size:12.5px;font-weight:400;background:var(--card);color:var(--ink);
    transition:background .15s,border-color .15s,color .15s}
  .sim-chip:hover{border-color:var(--brand)}
  .sim-chip.on{background:var(--brand-fill);border-color:var(--brand-fill);
    color:var(--ink-strong);font-weight:400}
  .sim-modal button[type=submit]{margin-top:4px;width:100%}
  .sim-note{font-size:11.5px;color:var(--muted);text-align:center;font-weight:400}
  .sim-done{text-align:center;padding:8px 0 4px}
  .sim-ok{width:48px;height:48px;border-radius:50%;background:rgba(79,169,124,.14);
    color:#3E8C64;font-size:22px;display:flex;align-items:center;justify-content:center;
    margin:0 auto 14px}
  .sim-done h3{margin-bottom:8px}
  .sim-done p{font-size:13.5px;color:var(--muted);font-weight:400;margin-bottom:20px;line-height:1.6}
  .sim-done .btn{width:100%;text-align:center}
  .about-modal{width:min(720px,100%)}
  .about-modal .about-grid{margin-top:6px}
  .sim-cal-note{margin-top:12px;font-size:11.5px;color:var(--muted)}
  @media (prefers-reduced-motion:reduce){
    .sim-overlay,.sim-modal{transition:none}
  }

  /* ---------- CTA + footer ---------- */
  .cta{text-align:center;background:var(--bg)}
  .cta h2{font-size:clamp(26px,3.6vw,42px);font-weight:400;letter-spacing:-.02em;
    margin-bottom:14px;color:var(--ink-strong)}
  .cta p{color:var(--muted);margin-bottom:28px;font-size:15.5px;font-weight:400}
  footer{border-top:1px solid var(--line);display:flex;align-items:center;
    justify-content:space-between;flex-wrap:wrap;gap:12px;
    padding:22px clamp(20px,4vw,48px);font-size:13px;color:var(--muted);font-weight:400}
  footer .flinks{display:flex;flex-wrap:wrap;gap:22px}
  footer .flinks a{position:relative}
  footer .flinks .fbreak{display:none}
  footer a:hover{color:var(--brand)}
  @media (max-width:640px){
    footer{flex-direction:column;align-items:center;text-align:center;
      gap:16px;padding:26px 20px 32px}
    footer .flinks{justify-content:center;column-gap:24px;row-gap:6px;line-height:1.35}
    /* dots sit on each link's right edge, so the row has to break where we say it
       does — otherwise a wrapped line ends on a dot with nothing after it */
    footer .flinks .fbreak{display:block;flex-basis:100%;height:0}
    footer .flinks a:not(:last-child)::after{content:'';position:absolute;top:50%;
      right:-13.5px;width:3px;height:3px;border-radius:50%;
      transform:translateY(-50%);background:rgba(64,64,64,.3)}
    footer .flinks a:nth-child(4)::after{display:none}
  }
  @media (max-width:360px){
    footer .flinks{column-gap:16px;font-size:12.5px}
    footer .flinks a:not(:last-child)::after{right:-9.5px}
  }

  /* ---------- responsive ---------- */
  @media (max-width:920px){
    .nav-links a:not(.btn){display:none}
    /* First screen = copy + island + world switcher.
       The box is 100lvh — the screen with the URL bar retracted — so the logo
       strip can never appear no matter what the browser chrome is doing. The
       bottom padding is the slice that chrome covers at load, so with
       border-box the contents lay out inside 100svh and the switcher stays on
       screen. Both units are static, unlike dvh, which is undersized on the
       first iOS paint and only corrects itself once you scroll.
       The 140px floor covers browsers that under-report the retracted screen:
       iOS 26 Safari resolves lvh to the small viewport — the same value as svh
       — yet still paints the page in the band its floating toolbar sits over,
       so the strip below a 100lvh hero shows through the glass before the
       reader has scrolled at all. Where lvh is honest it exceeds svh + 140px
       and the floor drops out. The extra height is page-coloured empty space
       either way: the contents stay inside 100svh, so nothing moves. */
    .hero-block{display:block;height:auto;min-height:0;overflow:visible}
    .hero{display:grid;grid-template-rows:minmax(0,1fr) auto;flex:none;width:100%;
      box-sizing:border-box;height:100vh;
      height:max(100lvh, 100svh + 140px);
      padding-bottom:max(100lvh - 100svh, 140px);overflow:hidden}
    .hero-stage{display:flex;flex-direction:column;min-height:0;width:100%;
      overflow:hidden}
    .hero-copy{position:relative;inset:auto;order:1;z-index:3;max-width:none;
      flex:none;padding:84px 20px 10px;justify-content:flex-start;transform:none;
      background:var(--bg)}
    #population{position:relative;inset:auto;order:2;width:100%;
      flex:1 1 0;min-height:240px;height:0}
    .dossier{position:absolute;inset:auto 12px 16px auto;order:0;z-index:6;
      margin:0;width:min(228px,calc(100vw - 32px));padding:10px 12px 9px;
      border-radius:12px}
    .dossier-name{font-size:15px}
    .dossier-role{font-size:11px;margin-bottom:6px}
    .dossier-story,.dossier-bg-label{display:none}
    .demo-grid{font-size:10.5px;gap:6px 10px}
    .dossier-src{margin-top:6px;font-size:9px}
    .dossier.pinned .d-more{display:none}
    .bubble{display:none}
    .logos{padding:22px 0 28px}
    .marquee{gap:40px;--lw:108px;--lh:45px}
    .marquee-mask{
      -webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
      mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}
    .cap-row{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr}
    .hover-hint{display:none}
    /* the scale steps down as a set, so the section keeps the same six sizes on a phone */
    .pp{--t-micro:10px;--t-small:12.5px;--t-base:13.5px;--t-lead:15px;
      --t-stat:clamp(17px,5vw,21px)}
    .pp-tabs{gap:6px;margin-bottom:22px}
    .pp-tab{padding:8px 14px;gap:7px}
    .pp-questions{margin-top:32px}
    .pp-qhead{margin:0 0 12px}
    .pp-intro{line-height:1.5;margin-bottom:18px}
    /* the tinted column can't survive a two-up stack, so each row becomes its own card
       with the Today / With Vectorial labels moved into the cells */
    .pp-table{display:block;border:0;border-radius:0;background:none;box-shadow:none}
    .pp-cols{display:none}
    .pp-rows{display:flex;flex-direction:column;gap:22px}
    /* 1fr keeps its auto min-width, so long values like "10,000-1M+" widen the row past the screen */
    .pp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
    .pp-cat{grid-column:1 / -1;padding:0;gap:11px;border:0}
    .pp-ci{width:40px;height:40px;border-radius:12px}
    .pp-ci svg{width:20px;height:20px}
    .pp-cell{padding:13px 14px;gap:6px;border:1px solid var(--pp-rule);border-radius:12px}
    .pp-cell.vec{box-shadow:var(--shadow-card)}
    .pp-cell::before{font-size:var(--t-micro);font-weight:400;letter-spacing:var(--t-track);
      text-transform:uppercase}
    .pp-cell.today::before{content:'Today';color:var(--muted)}
    .pp-cell.vec::before{content:'With Vectorial';color:var(--brand-logo)}
    .pp-big{letter-spacing:-.015em;overflow-wrap:anywhere}
    .uc-body{grid-template-columns:1fr}
    .uc-tabs{gap:2px}
    .uc-tab{padding:10px 12px 12px;font-size:13.5px}
    .uc-bar{grid-template-columns:1fr;gap:5px}
    .uc-track{height:26px}
    .uc-fdrop{grid-template-columns:1fr;margin:-4px 0}
    .uc-fdrop > span{grid-column:1}
    .val-grid{grid-template-columns:1fr}
    .invest-grid{grid-template-columns:1fr}
    .vs{grid-template-columns:1fr}
    .trust-panel{grid-template-columns:1fr;padding:22px 18px}
    .trust-badges{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;
      border-right:none;border-bottom:1px solid var(--line);
      padding:0 0 20px;margin:0 0 20px}
    .badge + .badge{padding-left:28px}
    .badge + .badge::before{display:block;content:"";position:absolute;left:0;top:50%;
      transform:translateY(-50%);width:1px;height:58%;background:var(--line)}
    .trust-points{padding-left:0;grid-template-columns:1fr 1fr;gap:42px 22px}
    /* one column: the illustration leads each row, its copy reads underneath.
       alternating sides means nothing at this width, so every row runs the same
       way round */
    .hp-rows{gap:44px}
    .hp-row{grid-template-columns:1fr;gap:18px}
    .hp-row .hp-stage{order:-1}
    .hp-stage{border-radius:12px}
    .hp-copy h3{font-size:19px;margin-bottom:16px}
    .hp-sol{font-size:16px;margin-bottom:13px}
    .hp-body{font-size:14.5px}
    .bench-wrap{grid-template-columns:1fr}
    .bench-foot{flex-direction:row;flex-wrap:wrap}
    .bench-cell{flex:1 1 200px}
  }
  /* a short phone spends almost the whole first screen on the copy and leaves the island a
     sliver, so buy the island some band back out of the copy's own spacing */
  @media (max-width:920px) and (max-height:680px){
    .hero-copy{padding-top:76px;gap:12px}
    .hero-sub{font-size:13px;line-height:1.5}
  }
  @media (max-width:1180px) and (min-width:921px){
    .invest-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-height:800px) and (min-width:921px){
    .dossier-story{display:none}
    .dossier-bg-label{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    .live-dot,.hover-hint{animation:none}
    .marquee{animation:none;flex-wrap:wrap;width:auto;justify-content:center;padding:0 24px}
    .marquee .dup{display:none}
    .dossier{transition:opacity .3s ease}
    .dossier.swap{transform:none}
    .bubble{transition:opacity .3s ease}
    .uc-fill{transition:none}
    .uc-panel{transition:none}
    .tbar-t i{transition:none}
    .hpv-person{opacity:1;animation:none}
    .hpv-drop{stroke-dashoffset:0;animation:none}
    .hpv-node,.hpv-crowd,.hpv-mark-hi{animation:none}
    .hpZa{animation:none;opacity:0}
    .hpZb{animation:none;opacity:1;transform:none}
    .hp-tchip{animation:none;opacity:1}
    .hp-cbar{animation:none;transform:scaleX(1)}
    .hpv-cursor{animation:none}
    .hpv-cursor.c0{transform:translate(72px,62px) rotate(-28deg)}
    .hpv-cursor.c1{transform:translate(40px,74px) rotate(-28deg)}
    .hpv-cursor.c2{transform:translate(86px,80px) rotate(-28deg)}
    .hp-ev{animation:none;opacity:0}
    .hp-ev.rm-show{opacity:1}
    .hp-ring{animation:none;opacity:1;transform:none}
    .hp-grp{animation:none;opacity:.85}
    .qrow.bye{animation:none;opacity:0}
    .hp4-in,.hp4-out{animation:none;opacity:1}
    .hp4-tin{animation:none;opacity:1}
    .hp4-tout{animation:none;opacity:0}
    .ag-u,.ag-dots,.ag-a{animation:none;opacity:1;transform:none}
    .ag-dots circle{animation:none}
    .hp-ripple{animation:none;opacity:0}
    .hp-orb{animation:none}
    .hp-dl{transition:none}
    .qt-item{transition:opacity .3s ease}
    .bx-bar{transition:none;transform:scaleY(1)}
    .bx-bar.bx-h{transform:scaleX(1)}
    .fade-section{transition:none;transform:none;opacity:1}
  }
  :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

  /* ---------- cookie consent (matches site-wide banner) ---------- */
  .consent-banner{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
    z-index:120;width:calc(100% - 2rem);max-width:36rem;background:#fff;
    border:1px solid var(--line);border-radius:16px;
    box-shadow:0 8px 28px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
    padding:16px 20px;display:flex;flex-direction:column;gap:12px;
    font-size:14px;line-height:1.55;color:#525252;font-weight:400;
    pointer-events:auto}
  .consent-banner[hidden]{display:none !important}
  .consent-banner a{text-decoration:underline;text-underline-offset:2px;color:#262626}
  .consent-banner a:hover{color:#171717}
  .consent-actions{display:flex;gap:8px;flex-shrink:0}
  .consent-decline{border:none;background:none;padding:6px 16px;border-radius:8px;
    font-size:14px;font-weight:400;color:#737373}
  .consent-decline:hover{color:#404040;background:#f5f5f5}
  .consent-accept{border:none;background:#171717;color:#fff;padding:6px 16px;
    border-radius:8px;font-size:14px;font-weight:400}
  .consent-accept:hover{background:#404040}
  @media (min-width:640px){
    .consent-banner{flex-direction:row;align-items:center}
  }
  @media (prefers-reduced-motion:reduce){
    .consent-banner{animation:none}
  }