/* MindStreet — shared template.
Page design language taken from the Funnelra Webflow template: dark ground,
one oversized serif at weight 400 with tight negative tracking, bright
accent buttons carrying dark text, pill + 12px radii, generous rhythm.
Colour is MindStreet's own Blue + Green deck palette; body copy stays
Source Sans 3 per that style outline. */
:root{
/* light ground ladder, built on MindStreet indigo rather than neutral grey */
--ground:#FBFBFE;
--surface:#FFFFFF;
--surface-2:#F4F5FC;
--tint:#ECEDFB;
--tint-soft:#F3F3FD;
--line:#E1E3F3;
--line-soft:#EDEEF9;
--ink:#0A0C18;
--text:#3A3F63;
--muted:#6B7099;
--indigo:#2F28F2;
--indigo-ink:#2620C2;
--indigo-deep:#1A16A0;
--lavender:#5F59EC;
--lavender-mid:#4038DE;
--lavender-pale:#CFCDFB;
--green:#0E7A4E;
--red:#E23A2E;
--green-fill:#C5FCCF;
--cyan:#0B6C84;
/* cyan ink on a cyan tint is same-hue on same-hue and tops out around 4.1:1.
This is the deeper step used for type sitting on the stronger tints. */
--cyan-deep:#08505F;
--cyan-fill:#C9F7FD;
--highlight:#4038DE;
--ember:#4038DE;
--ember-deep:#5F59EC;
--peach:#0E7A4E;
--peach-pale:#0B6C84;
--cream:#FFFFFF;
--cream-ink:#0B6C84;
--on-dark:#FFFFFF;
--on-dark-dim:#D5D4FC;
--on-accent:#FFFFFF;
--hero-grad:radial-gradient(1100px 620px at 78% -10%, rgba(47,40,242,.10), transparent 62%),
radial-gradient(760px 480px at 6% 12%, rgba(117,112,246,.08), transparent 60%),
#FBFBFE;
--shadow-sm:0 1px 2px rgba(16,20,50,.06);
--shadow-md:0 2px 6px rgba(16,20,50,.07), 0 18px 40px -26px rgba(16,20,50,.26);
--shadow-lg:0 2px 8px rgba(16,20,50,.08), 0 34px 70px -34px rgba(16,20,50,.32);
--maxw:1120px;
--r-sm:8px;
--r-md:12px;
--r-lg:12px;
--r-xl:20px;
color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--ground);color:var(--text);
font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none!important}
/* one serif, weight 400, set large and tight — the template's defining move */
h1,h2,h3,h4{
font-family:"Hedvig Letters Serif",Georgia,serif;
color:var(--ink);margin:0;font-weight:400;text-wrap:balance;
}
h1{font-size:clamp(40px,5.6vw,64px);line-height:1.1;letter-spacing:-2px}
h2{font-size:clamp(30px,4.2vw,52px);line-height:1.1;letter-spacing:-1px}
h3{font-size:clamp(20px,2.1vw,26px);line-height:1.18;letter-spacing:-.5px}
h4{font-size:19px;line-height:1.25;letter-spacing:-.3px}
p{margin:0}
em.serif{font-style:normal;font-weight:400;color:var(--green)}
a{color:var(--indigo-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px;position:relative;z-index:1}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}
.eyebrow.plain::before{display:none}
.lead{font-size:17px;line-height:1.62;color:var(--text);max-width:62ch}
.small{font-size:13px;line-height:1.55;color:var(--muted)}
.stack{display:flex;flex-direction:column}
.flexrow{display:flex;flex-wrap:wrap;gap:8px}
section{padding-block:76px;position:relative}
section.tight{padding-block:0 76px}
.band-alt{background:var(--surface-2);border-block:1px solid var(--line-soft)}
.sec-head{display:flex;flex-direction:column;gap:11px;max-width:660px;margin-bottom:26px}
.sec-head.mid{margin-inline:auto;text-align:center;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.pad{padding:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font:600 14.5px/1 "Source Sans 3",sans-serif;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:filter .15s,border-color .15s,background .15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--green);color:var(--on-accent);border-color:var(--green);font-weight:600}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green)}
.btn-onink{background:var(--green);color:var(--on-accent);border-color:var(--green)}
.btn-sm{min-height:38px;padding:0 14px;font-size:13.5px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.cta-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);font-size:13.5px;border:1px solid transparent}
.chip-line{background:var(--surface);border-color:var(--line)}
.chip-soft{background:var(--tint);color:var(--indigo-ink);font-weight:500}
.chip-todo{display:inline-flex;align-items:center;background:transparent;border:1px dashed var(--lavender-mid);color:var(--lavender);font-size:11.5px;font-weight:600;letter-spacing:.05em;min-height:28px;padding:0 11px;border-radius:var(--r-sm)}
.ticks{display:flex;flex-direction:column;gap:10px;margin:2px 0}
.tick{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text)}
.tick svg{flex:none;margin-top:3px;color:var(--green)}
/* flock — artwork from the MindStreet deck, parallaxed on scroll */
.flock{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.pfly{position:absolute;display:block;will-change:transform,opacity;opacity:var(--o,.85)}
.pfly.static{opacity:var(--o,.85)}
.pfly img{display:block;width:100%;height:auto}
.hero-flock{position:absolute;right:-2%;top:2%;width:min(500px,46%);z-index:0;pointer-events:none;opacity:.95;will-change:transform,opacity}
.hero .pfly{display:none} /* the hero carries the whole flock; loose birds belong further down */
@keyframes flap{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(6px,-10px,0) rotate(-2.5deg)}}
@media (max-width:980px){.hero-flock{right:-12%;top:auto;bottom:-4%;width:74%;opacity:.26}}
/* nav */
.announce{background:var(--indigo);color:#fff;text-align:center;font-size:13px;padding:8px 20px;font-weight:500}
.announce b{font-weight:600}
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:0;right:0;z-index:90;padding-inline:16px}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:7px 8px 7px 22px;display:flex;align-items:center;gap:12px;border-radius:999px;
background:color-mix(in srgb,var(--surface) 88%,transparent);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--line);box-shadow:0 8px 30px rgba(14,40,65,.08);
transition:box-shadow .22s ease,background .22s ease}
.nav.is-scrolled .nav-in{background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:0 10px 34px rgba(14,40,65,.15)}
.brand{display:inline-flex;align-items:center;color:var(--ink);font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.2em}
.navrule{width:1px;height:20px;background:var(--line);flex:none;margin-left:2px}
.brandtoggle{display:none;flex:1;align-items:center;justify-content:space-between;gap:10px;
min-height:42px;padding:0 4px 0 0;background:none;border:0;cursor:pointer;
color:var(--ink);font:700 13.5px/1 "Source Sans 3",sans-serif;text-transform:uppercase;letter-spacing:.2em}
.brandtoggle svg{color:var(--muted);transition:transform .2s ease;margin-right:4px}
.brandtoggle[aria-expanded="true"]{color:var(--indigo-ink)}
.brandtoggle[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--indigo-ink)}
.brand:hover{text-decoration:none}
.navlinks{display:flex;align-items:center;gap:2px;margin-left:2px}
.navlinks > a,.navbtn{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;color:var(--muted);font:500 14.5px/1 "Source Sans 3",sans-serif;letter-spacing:0;background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .15s ease,background .15s ease}
.navlinks > a::after,.navbtn::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:2px;background:var(--green);transform:scaleX(0);transition:transform .18s ease}
.navlinks > a:hover,.navbtn:hover{color:var(--ink);background:none;text-decoration:none}
.navlinks > a:hover::after,.navbtn:hover::after,.navdrop[data-open="true"] .navbtn::after{transform:scaleX(1)}
.navlinks a[aria-current="page"]::after{display:none}
.navlinks a[aria-current="page"]{color:var(--green);background:var(--tint-soft);font-weight:600}
.navdrop{position:relative}
.navdrop svg{transition:transform .18s ease}
.navdrop[data-open="true"] .navbtn{background:none;color:var(--indigo-ink)}
.navdrop[data-open="true"] svg{transform:rotate(180deg)}
.dropmenu{position:absolute;top:calc(100% + 14px);left:-6px;min-width:304px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);display:none;flex-direction:column;gap:2px}
.navdrop[data-open="true"] .dropmenu{display:flex}
.dropmenu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink);font-size:14.5px;font-weight:600;text-decoration:none}
.dropmenu a span{font-size:12.5px;font-weight:400;color:var(--muted)}
.dropmenu a:hover{background:var(--tint-soft);color:var(--indigo-ink);text-decoration:none}
.dropmenu a[aria-current="page"]{background:var(--tint-soft);color:var(--indigo-ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-cta .btn{min-height:40px;padding:0 18px;font-size:13.5px;border-radius:999px}
.navsignin{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);
color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;background:color-mix(in srgb,var(--surface) 70%,transparent);
transition:border-color .15s ease,color .15s ease,background .15s ease}
.navsignin:hover{border-color:var(--green);color:var(--green);background:var(--surface);text-decoration:none}
.navsignin svg{opacity:.65}
.navsignin:hover svg{opacity:1}
.mobilenav{display:none;flex-direction:column;gap:2px;max-width:var(--maxw);margin:10px auto 0;padding:10px;
border-radius:var(--r-xl);border:1px solid var(--line);
background:color-mix(in srgb,var(--surface) 96%,transparent);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
box-shadow:0 10px 34px rgba(14,40,65,.14)}
.mobilenav a{padding:12px 10px;border-radius:var(--r-sm);color:var(--ink);font-size:16px;font-weight:600;text-decoration:none}
.mobilenav a:hover{background:var(--tint-soft);color:var(--indigo-ink);text-decoration:none}
.mobilenav a[aria-current="page"]{color:var(--indigo-ink);background:var(--tint-soft)}
@media (max-width:900px){
.navlinks,.navsignin,.navrule{display:none}
.mobilenav:not([hidden]){display:flex}
}
/* hero */
.hero{position:relative;overflow:hidden;background:var(--ground);padding-block:150px 84px;border-bottom:1px solid var(--line-soft)}
/* Funnelra's hero device rebuilt in MindStreet colour: a large soft colour
field, grained, under an overlay that fades to the page ground at 97%. */
.hero::before{
content:"";position:absolute;inset:-18% -10% 12%;z-index:0;pointer-events:none;
background:
radial-gradient(40% 48% at 20% 16%, rgba(47,40,242,.92), transparent 63%),
radial-gradient(36% 44% at 70% 4%, rgba(117,112,246,.80), transparent 62%),
radial-gradient(32% 40% at 90% 40%, rgba(153,149,248,.60), transparent 64%),
radial-gradient(28% 36% at 54% 56%, rgba(201,247,253,.30), transparent 66%),
radial-gradient(26% 32% at 10% 64%, rgba(197,252,207,.24), transparent 68%),
url("data:image/svg+xml;utf8,");
background-size:auto,auto,auto,auto,auto,300px 300px;
background-blend-mode:normal,normal,normal,normal,normal,multiply;
filter:blur(44px) saturate(118%);
animation:drift-field 26s ease-in-out infinite alternate;
}
.hero::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(rgba(251,251,254,0) 48%, rgba(251,251,254,.72) 80%, var(--ground) 97%);
}
@keyframes drift-field{
from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(-26px,14px,0) scale(1.05)}
}
.hero-flock{z-index:1}
.hero-mid,.hero-in,.hero-solo{z-index:2}
.hero-mid{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:780px;margin-inline:auto}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:17px}
.hero-solo{position:relative;display:flex;flex-direction:column;gap:15px;max-width:640px}
.kicker{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;color:var(--indigo-ink)}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none}
.herostats{display:flex;gap:24px;flex-wrap:wrap;margin-top:2px}
.herostat{display:flex;flex-direction:column;gap:3px;max-width:224px}
.herostat b{font-size:34px;font-weight:700;letter-spacing:-.038em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.herostat span{font-size:13.5px;line-height:1.45;color:var(--muted)}
.herostat + .herostat{padding-left:24px;border-left:1px solid var(--line)}
.rise{opacity:0;transform:translateY(14px);animation:rise .74s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
.crumb{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo-ink)}
.brandline{font-size:16px;font-weight:600;color:var(--ink)}
.brandline span{color:var(--muted);font-weight:500}
.pillrow{display:flex;flex-wrap:wrap;gap:8px}
.pill{min-height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 13.5px/1 "Source Sans 3",sans-serif;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.pill:hover{border-color:var(--indigo);text-decoration:none}
.pill[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-accent)}
/* rotating word — all words stack in one grid cell, so the line never reflows */
.rot{display:inline-grid;vertical-align:baseline;text-align:left}
.rot > span{grid-area:1/1;white-space:nowrap;font-weight:700;color:var(--indigo-ink);opacity:0}
.rot > span.on{opacity:1;animation:rotw .5s cubic-bezier(.22,1,.36,1)}
@keyframes rotw{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}
[data-c]{transition:opacity .22s ease}
.track-swapping [data-c]{opacity:.25}
.photo{border-radius:var(--r-xl);background:var(--tint);border:1px solid var(--line);aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:22px;text-align:center;overflow:hidden;max-width:100%}
.photo svg{color:var(--indigo);opacity:.5}
.ph-label{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--indigo-deep);max-width:26ch;line-height:1.5}
.hero-media{position:relative}
.floatcard{position:absolute;left:-22px;bottom:28px;width:238px;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-lg);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.floatcard .n{font-size:27px;font-weight:700;letter-spacing:-.03em;color:var(--indigo-ink);line-height:1.05;font-variant-numeric:tabular-nums}
/* grids */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* trust bar */
.trustbar{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;width:100%}
.logoslot{height:48px;border-radius:var(--r-sm);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;letter-spacing:.09em;color:var(--muted);text-align:center;padding:6px}
/* dashboard */
.dash{overflow:hidden;box-shadow:var(--shadow-lg);border-radius:var(--r-xl)}
.dash-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.dash-tabs{display:flex;gap:18px;padding:10px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;font-size:13px;color:var(--muted)}
.dash-tabs b{color:var(--indigo-ink);font-weight:600}
.dash-body{padding:18px;display:flex;flex-direction:column;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{padding:15px 16px;border-radius:var(--r-md);background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
.kpi .k{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi .n{font-size:26px;font-weight:700;letter-spacing:-.032em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.kpi.tint{background:var(--tint)}
.kpi.tint .n{color:var(--indigo-ink)}
.kpi.accent{background:var(--green)}
.kpi.accent .n{color:var(--on-accent)}
.kpi.accent .k,.kpi.accent .small{color:rgba(10,12,24,.72)}
.charts{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:10px}
.chartbox{padding:16px;border:1px solid var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;gap:10px;min-width:0}
.legend{display:flex;gap:16px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.swatch{width:15px;height:3px;border-radius:2px;display:inline-block}
.draw{stroke-dasharray:760;stroke-dashoffset:760;animation:draw 2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* meters */
.meter{display:flex;flex-direction:column;gap:8px}
.meter-row{display:grid;grid-template-columns:118px minmax(0,1fr) 48px;gap:10px;align-items:center;font-size:13.5px}
.meter-track{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.meter-fill{height:100%;border-radius:999px;background:var(--indigo);width:0;animation:fill 1.1s cubic-bezier(.16,1,.3,1) forwards}
.meter-row .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
@keyframes fill{to{width:var(--w)}}
/* paths */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.path{padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow-sm)}
.path[data-on="true"]{border-color:var(--indigo)}
.path .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.path .btn{margin-top:auto;align-self:flex-start}
/* three-column gap diagram */
.gapgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.gapcol{padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.gapmid{width:260px;padding:20px;border-radius:var(--r-lg);background:var(--indigo);color:#fff;display:flex;flex-direction:column;gap:11px;align-items:center;text-align:center;justify-content:center}
.gapmid .eyebrow{color:var(--on-dark-dim)}
.gapmid .chip{background:rgba(255,255,255,.15);color:#fff;font-size:12.5px;min-height:28px;padding:0 10px;border-color:transparent}
.quote{font-weight:700;font-size:clamp(19px,2.4vw,26px);line-height:1.35;color:var(--ink);text-align:center;max-width:26ch;margin-inline:auto}
/* indigo band */
.band{position:relative;overflow:hidden;background:linear-gradient(150deg,#2F28F2 0%,#241DBE 100%);color:#fff}
.band h2,.band h3,.band h4{color:#fff}
.band .lead,.band .eyebrow,.band .small{color:var(--on-dark-dim)}
.band .pfly{--o:.95}
.an{padding:18px;border-radius:var(--r-md);background:rgba(255,255,255,.12);display:flex;flex-direction:column;gap:4px}
.an b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.an span{font-size:13px;color:var(--on-dark-dim)}
.an.mine{background:#fff}
.an.mine b{color:var(--indigo-deep)}
.an.mine span{color:var(--muted)}
.band-quote{font-weight:700;font-size:clamp(20px,2.6vw,27px);line-height:1.3;max-width:24ch;color:#fff}
.analogy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-block:24px}
/* architecture */
.arch{display:flex;flex-direction:column;gap:9px}
.arch .a1{padding:18px;border-radius:var(--r-md);background:var(--indigo);color:#fff}
.arch .a2{padding:18px;border-radius:var(--r-md);background:var(--tint);border:1px solid var(--lavender-pale)}
.arch b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em}
.arch .a1 b{color:#fff}
.arch .a2 b{color:var(--ink)}
.arch .a1 span{color:var(--on-dark-dim);font-size:13.5px}
.arch .a2 span{color:var(--muted);font-size:13.5px}
.arrow{display:flex;justify-content:center;color:var(--lavender)}
/* journey */
.stages{display:flex;gap:8px;flex-wrap:wrap}
.stage{min-height:46px;padding:0 22px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--text);font:700 14px/1 "Source Sans 3",sans-serif;letter-spacing:.1em;cursor:pointer;display:inline-flex;align-items:center}
.stage[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-accent)}
.stagebox{margin-top:14px;padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
#stageName{font-size:13.5px;font-weight:700;letter-spacing:.16em;color:var(--indigo-ink)}
#stageLead{font-weight:700;font-size:23px;line-height:1.2;color:var(--ink);margin-top:6px;display:block}
/* products */
.prod{padding:22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm)}
.prod .role{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo-ink)}
.prod .q{font-weight:700;font-size:18px;color:var(--indigo-ink);line-height:1.35}
.prod .caps{margin-top:auto}
/* stat row */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{padding:22px 20px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:5px}
.stat .n{font-size:40px;font-weight:700;letter-spacing:-.04em;color:var(--indigo-ink);line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-size:13.5px;line-height:1.45;color:var(--text)}
/* timeline + studies */
.tl-line{display:none}
.tl-pts{position:relative;display:flex;justify-content:space-between;margin-top:18px}
.tl-pts::before{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:1px;background:var(--line)}
.tl-pt{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.tl-pt i{width:10px;height:10px;border-radius:50%;background:var(--lavender);display:block;box-shadow:0 0 0 4px var(--surface)}
.tl-pt:nth-child(4) i,.tl-pt:nth-child(5) i{background:var(--indigo)}
.tl-pt:nth-child(6) i{background:var(--ember)}
.tl-pt b{font-size:12px;color:var(--muted);font-weight:600;order:-1}
.studies{display:flex;flex-direction:column}
.study{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;padding-block:15px;border-top:1px solid var(--line)}
.study:last-child{border-bottom:1px solid var(--line)}
.study .yr{font-size:13.5px;font-weight:700;color:var(--indigo-ink);font-variant-numeric:tabular-nums}
.study .t{font-size:15px;color:var(--ink);font-weight:500;line-height:1.45}
.study .j{font-size:12.5px;color:var(--muted);margin-top:2px}
/* roi calculator */
.roi{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:center}
.bignum{font-size:50px;font-weight:700;letter-spacing:-.045em;color:var(--indigo-ink);line-height:1;font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:6px;height:60px;margin-top:12px}
.bars i{flex:1;border-radius:4px 4px 0 0;background:var(--lavender);display:block;animation:grow 1.1s cubic-bezier(.16,1,.3,1) both}
.bars i:nth-child(1){height:22%}
.bars i:nth-child(2){height:38%;animation-delay:.1s}
.bars i:nth-child(3){height:56%;animation-delay:.2s;background:color-mix(in srgb,var(--indigo) 55%,var(--lavender))}
.bars i:nth-child(4){height:74%;animation-delay:.3s;background:color-mix(in srgb,var(--indigo) 75%,var(--lavender))}
.bars i:nth-child(5){height:100%;animation-delay:.4s;background:var(--indigo)}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1)}}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.field input[type="number"]{min-height:46px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 16px/1 "Source Sans 3",sans-serif;font-variant-numeric:tabular-nums;width:100%}
.calcout{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.calcout div{padding:14px 16px;border-radius:var(--r-md);background:var(--tint);display:flex;flex-direction:column;gap:2px}
.calcout .v{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--indigo-ink);font-variant-numeric:tabular-nums;line-height:1.15}
/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tier{padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);position:relative}
.tier.best{border-color:var(--indigo)}
.tier .price{font-size:36px;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.tier .price span{font-size:13.5px;font-weight:600;color:var(--muted);letter-spacing:0}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.tier li{display:flex;gap:9px;font-size:14px;align-items:flex-start;color:var(--text)}
.tier li svg{flex:none;margin-top:3px;color:var(--indigo)}
.tier .btn{margin-top:auto}
.badge{position:absolute;top:-9px;right:18px;padding:4px 10px;border-radius:999px;background:var(--peach);color:var(--cream-ink);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
/* trust cards */
.trust{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tcard{padding:18px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;font-size:13px;font-weight:600;color:var(--ink)}
/* faq accordion */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font-size:16.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:10px;height:10px;margin-top:-6px;border-right:2px solid var(--indigo);border-bottom:2px solid var(--indigo);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .a{padding:0 40px 20px 0;font-size:15px;line-height:1.65;color:var(--text)}
.qa{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;padding:20px 22px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
/* gap tool */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 260px;gap:14px;align-items:stretch}
.toolcol{padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:13.5px;cursor:pointer;user-select:none;position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex:none}
.opt:has(input:checked){background:var(--tint);border-color:var(--indigo);color:var(--indigo-ink);font-weight:500}
.opt:has(input:checked) .box{background:var(--indigo);border-color:var(--indigo)}
.opt:has(input:focus-visible){outline:2px solid var(--indigo);outline-offset:2px}
.opt .box svg{opacity:0;color:#fff}
.opt:has(input:checked) .box svg{opacity:1}
.toolgap{background:var(--indigo);color:#fff;border-color:var(--indigo);align-items:center;text-align:center;justify-content:center}
.toolgap .eyebrow{color:var(--on-dark-dim)}
.toolgap .chip{background:rgba(255,255,255,.15);color:#fff;font-size:12.5px;min-height:28px;padding:0 10px;border-color:transparent}
.counter{font-size:14.5px;color:var(--text)}
.counter b{color:var(--indigo-ink)}
.result{margin-top:14px;padding:22px;border-radius:var(--r-lg);background:var(--tint);border:1px solid var(--lavender-pale);display:flex;flex-direction:column;gap:11px}
.empty{font-size:13px;color:var(--muted);font-style:italic}
/* individuals band */
.indiv{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:center;padding:34px;border-radius:var(--r-xl);background:var(--cream);border:1px solid var(--peach-pale);color:var(--cream-ink)}
.indiv h2{color:var(--cream-ink)}
.indiv .lead{color:var(--cream-ink)}
.indiv .eyebrow{color:var(--cream-ink);opacity:.72}
/* final */
.final{position:relative;overflow:hidden;padding:40px;border-radius:var(--r-xl);background:var(--hero-grad);border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:center}
.finalcard{padding:22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm)}
/* footer */
footer{border-top:1px solid var(--line);padding-block:44px 28px;background:var(--surface-2)}
.fgrid{display:grid;grid-template-columns:280px repeat(3,minmax(0,1fr));gap:32px}
.fcol{display:flex;flex-direction:column;gap:8px}
.fcol a{color:var(--text);font-size:13.5px}
.fhead{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sub{display:flex;gap:8px;flex-wrap:wrap}
.sub input{flex:1;min-width:140px;min-height:44px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:400 13.5px/1 "Source Sans 3",sans-serif}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:20px;margin-top:26px;border-top:1px solid var(--line)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fade{animation:fade .7s cubic-bezier(.16,1,.3,1) both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:980px){
.hero-in,.two,.roi,.final,.stagebox,.qa,.tool,.study,.indiv{grid-template-columns:1fr;gap:24px}
.study{gap:5px}
.floatcard{left:auto;right:14px;bottom:14px}
.kpis,.analogy,.four,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.charts{grid-template-columns:1fr}
.trust{grid-template-columns:repeat(3,minmax(0,1fr))}
.fgrid{grid-template-columns:1fr 1fr}
.logos{grid-template-columns:repeat(3,minmax(0,1fr))}
.three,.tiers{grid-template-columns:1fr}
}
@media (max-width:720px){
section{padding-block:52px}
.hero{padding-block:118px 56px}
.hero::before{filter:blur(34px) saturate(118%)}
.nav-in{padding-left:18px}
.paths{grid-template-columns:1fr}
.gapgrid{grid-template-columns:1fr}
.gapmid{width:auto}
.trust{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid{grid-template-columns:1fr}
.tl-pt:nth-child(2),.tl-pt:nth-child(4){display:none}
.final,.indiv{padding:24px}
.photo{aspect-ratio:4/3}
.floatcard{position:static;width:auto;margin-top:12px}
.meter-row{grid-template-columns:96px minmax(0,1fr) 42px;font-size:13px}
.calcout{grid-template-columns:1fr}
}
@media (max-width:440px){
.kpis,.analogy,.logos,.four,.stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.hero::before{animation:none}
.draw{stroke-dashoffset:0}
.meter-fill{width:var(--w)}
.pfly img{animation:none}
.pfly{opacity:var(--o,.85)}
.hero-flock{opacity:.95}
.rise{opacity:1;transform:none;animation:none}
.rot > span{opacity:0}
.rot > span.on{opacity:1;animation:none}
}
/* ---- blueprint sections ---- */
.motif{display:flex;flex-wrap:wrap;gap:22px;margin-top:4px}
.motif span{display:flex;align-items:baseline;gap:7px;font-size:14px;color:var(--muted)}
.motif b{font-family:"Hedvig Letters Serif",Georgia,serif;font-size:34px;font-weight:400;letter-spacing:-1px;color:var(--green);line-height:1}
.audgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.aud{display:flex;flex-direction:column;gap:9px;padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .15s ease,transform .15s ease}
a.aud:hover{border-color:var(--green);text-decoration:none;transform:translateY(-2px)}
.aud h3{color:var(--ink)}
.aud .q{font-weight:600;color:var(--green);font-size:14.5px;line-height:1.4}
.aud p{font-size:14.5px;line-height:1.55}
.aud .go{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--green);padding-top:4px}
.probs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.prob{padding:15px 17px;border-radius:var(--r-md);background:var(--surface);font-size:14.5px;color:var(--text);border:1px solid var(--line)}
.layers{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:14px;align-items:stretch}
.layer{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:12px}
.layer.core{background:linear-gradient(150deg,#2F28F2 0%,#241DBE 100%);border-color:transparent}
.layer.core .eyebrow{color:var(--on-dark-dim)}
.layer.core .chip{background:rgba(255,255,255,.15);color:#fff;border-color:transparent}
.prodrow{display:grid;grid-template-columns:240px minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:start;padding:22px 24px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.prodrow .role{display:block;margin-top:4px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--indigo-ink)}
.prodrow p{font-size:14.5px;line-height:1.6}
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:j}
.journey li{counter-increment:j;padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:5px;position:relative}
.journey li::before{content:counter(j);font-size:11.5px;font-weight:700;color:var(--indigo-ink);letter-spacing:.1em}
.journey b{font-size:16px;color:var(--ink)}
.journey span{font-size:14px;line-height:1.5;color:var(--muted)}
.principles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.principles li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text)}
.principles li svg{flex:none;margin-top:4px;color:var(--green)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pillar{padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.pillar p{font-size:14px;line-height:1.55;color:var(--muted)}
.outlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.outlist li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text)}
.outlist li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;margin-top:9px}
.trustgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.shift{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shift > div{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.shift span{font-size:14px;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.shift b{font-size:15px;color:var(--ink);margin-left:auto;text-align:right}
.rowlink{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none}
.rowlink span{font-size:13px;font-weight:400;color:var(--muted)}
.rowlink:hover{background:var(--tint-soft);text-decoration:none}
.outcome{font-size:16px;font-weight:600;color:var(--green);line-height:1.5}
/* the analogy card now leads with the domain, then names the system */
.an span{order:-1;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:980px){
.audgrid,.probs,.pillars,.journey{grid-template-columns:repeat(2,minmax(0,1fr))}
.layers,.prodrow{grid-template-columns:1fr}
.trustgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.outlist,.shift{grid-template-columns:1fr}
}
@media (max-width:640px){
.audgrid,.probs,.pillars,.journey,.trustgrid{grid-template-columns:1fr}
.motif{gap:14px}
}
/* ── Global header, to the blueprint's seven primary items + utility set ─────── */
.navlinks > a,.navbtn{padding:0 11px;font-size:14px}
.navlinks > a::after,.navbtn::after{left:11px;right:11px}
.navtext{color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.navtext:hover{color:var(--ink);text-decoration:none}
.navdemo{white-space:nowrap}
.nav-cta{gap:14px}
.dropmenu.wide{left:50%;transform:translateX(-50%);min-width:660px;padding:16px}
.dropnote{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 6px 10px;border-bottom:1px solid var(--line-soft);margin:0 0 10px}
.dropgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dropmenu.narrow{min-width:206px}
.dropmenu.narrow a{font-weight:500}
.mobhead{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px;margin:0}
/* ── Footer, to the blueprint's six sections + newsletter ───────────────────── */
.fnews{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.fgrid.six{grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.fcol a:hover{color:var(--green)}
/* ── Audience pages ─────────────────────────────────────────────────────────── */
.visualbox{position:relative;padding:28px;border-radius:var(--r-xl);background:var(--surface-2);border:1px solid var(--line-soft);display:flex;flex-direction:column;gap:18px}
.vcap{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.vcap .small{max-width:64ch;margin:0}
.anonrail{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.anonrail span{position:relative;padding:8px 13px;border-radius:999px;background:var(--tint-soft);border:1px solid var(--line);font-size:13px;color:var(--text)}
.anonrail span + span::before{content:"";position:absolute;left:-9px;top:50%;width:6px;height:1px;background:var(--line)}
.wcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wcol{padding:22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.wcol.core{background:linear-gradient(150deg,#2F28F2 0%,#241DBE 100%);border-color:transparent}
.wcol.core .small,.wcol.core .wtag{color:rgba(255,255,255,.76)}
.wcol b{font-size:16.5px;color:var(--ink);font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;letter-spacing:-.4px}
.wtag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.pyramid{display:flex;flex-direction:column;gap:8px;align-items:center}
.pytier{width:100%;padding:18px 22px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pytier b{font-size:15.5px;color:var(--ink)}
.pytier span{font-size:14px;color:var(--muted);flex:1;min-width:220px}
.pytier i{font-style:normal}
.pytier.t3{max-width:52%;background:linear-gradient(120deg,rgba(47,40,242,.34),rgba(117,112,246,.16))}
.pytier.t2{max-width:76%;background:linear-gradient(120deg,rgba(47,40,242,.2),rgba(117,112,246,.1))}
.pytier.t1{max-width:100%}
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch}
.railstep{position:relative;padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.railstep b{font-size:16px;color:var(--ink)}
.railstep span{font-size:13.5px;line-height:1.5;color:var(--muted)}
.railstep + .railstep::before{content:"";position:absolute;left:-8px;top:50%;width:6px;height:1px;background:var(--lavender-mid)}
.phone{display:flex;justify-content:center}
.phone-in{width:min(320px,100%);padding:20px;border-radius:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:9px}
.phhead{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.phrow span{font-size:15.5px;color:var(--ink)}
.phopt{padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:14px;color:var(--text)}
.phopt.on{border-color:var(--green);background:var(--tint-soft);color:var(--ink);font-weight:600}
.phnext{margin-top:6px;padding:14px;border-radius:var(--r-md);background:var(--tint-soft);display:flex;flex-direction:column;gap:3px}
.phnext b{font-size:14.5px;color:var(--ink)}
.phnext span{font-size:13px;color:var(--muted)}
.hubgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hubcell{padding:18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:15px;color:var(--ink)}
.geo{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.geohub{padding:20px 26px;border-radius:var(--r-lg);background:linear-gradient(150deg,#2F28F2 0%,#241DBE 100%);display:flex;flex-direction:column;gap:4px;color:#fff}
.geohub b{font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;font-size:21px;letter-spacing:-.5px}
.geohub span{font-size:13px;color:rgba(255,255,255,.76)}
.georing{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px}
.georing span{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;color:var(--text)}
.steprow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:s}
.steprow li{counter-increment:s;padding:18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.steprow li::before{content:"0" counter(s);font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--indigo-ink)}
.steprow b{font-size:15.5px;color:var(--ink);font-weight:600}
.trustcopy,.evidnote{border-left:3px solid var(--green)}
.stubgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stubcard h3{font-size:22px}
@media (max-width:1180px){
.navlinks > a,.navbtn{padding:0 9px;font-size:13.5px}
.navtext{display:none}
}
@media (max-width:1040px){
.nav-cta .navdemo{display:none}
}
@media (max-width:980px){
.wcols,.rail,.hubgrid,.steprow{grid-template-columns:repeat(2,minmax(0,1fr))}
.stubgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.fnews{grid-template-columns:1fr;gap:20px}
.pytier.t3,.pytier.t2{max-width:100%}
.dropmenu.wide{min-width:0;width:min(560px,86vw)}
.dropgrid{grid-template-columns:1fr}
}
@media (max-width:640px){
.wcols,.rail,.hubgrid,.steprow,.stubgrid{grid-template-columns:1fr}
.fgrid.six{grid-template-columns:repeat(2,minmax(0,1fr))}
.visualbox{padding:18px}
}
.seclabel{font-size:clamp(23px,2.7vw,31px);line-height:1.15;letter-spacing:-.7px}
.sec-head:has(.seclabel){margin-bottom:20px}
/* ── Hero, restructured: copy left, living network right, proof strip beneath ─ */
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:48px;align-items:center;z-index:2}
.hero-copy{display:flex;flex-direction:column;gap:16px}
.hero .wrap.hero-in h1{font-size:clamp(38px,4.3vw,55px);letter-spacing:-1.6px}
.hero .lead{font-size:17.5px;max-width:52ch}
.tribrand{display:flex;flex-wrap:wrap;gap:8px 18px;margin:2px 0 0;font-size:15.5px}
.tribrand span{position:relative;color:var(--muted);font-weight:500}
.tribrand span:first-child{color:var(--green);font-weight:600}
.tribrand span + span::before{content:"";position:absolute;left:-10px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--line);transform:translateY(-50%)}
.textlink{display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:0 6px;font-size:14.5px;font-weight:600;color:var(--indigo-ink);text-decoration:none}
.textlink:hover{color:var(--lavender-pale);text-decoration:none}
.textlink svg{transition:transform .18s ease}
.textlink:hover svg{transform:translateX(3px)}
.hero-vis{position:relative;margin:0;display:flex;flex-direction:column;gap:10px}
.netvis{width:100%;height:auto;display:block;overflow:visible}
.netvis .net-in path,.netvis .net-out path{fill:none;stroke:var(--lavender-mid);stroke-width:1;opacity:.42}
.netvis .net-loop{fill:none;stroke:var(--green);stroke-width:1;opacity:.34;stroke-dasharray:4 6}
.netvis .net-node circle{fill:var(--lavender)}
.netvis text{font-family:"Source Sans 3",sans-serif;font-size:12.5px;fill:var(--muted)}
.netvis .net-label.in text{text-anchor:end}
.netvis .net-hub{font-size:15px;font-weight:600;fill:#fff;text-anchor:middle}
.netvis .net-hub.sub{font-size:11.5px;font-weight:400;fill:rgba(255,255,255,.72)}
.netvis .net-loop-label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:var(--green);text-anchor:middle}
.netvis .spark{fill:var(--cyan)}
.netvis .spark.out{fill:var(--green)}
.netvis .spark.loop{fill:var(--green);opacity:.8}
.hero-vis figcaption{font-size:12.5px;color:var(--muted);text-align:center;max-width:46ch;margin-inline:auto}
.hero-strip{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,auto) minmax(0,auto) minmax(0,1fr);gap:26px 34px;align-items:center;
margin-top:52px;padding-top:26px;border-top:1px solid var(--line-soft)}
.proofline{margin:0;font-size:16px;font-weight:600;color:var(--ink);max-width:22ch}
.hero-strip .motif{margin:0}
.hero-strip .small{margin:0;max-width:52ch}
/* the flock sits above the network panel, not across the headline */
.hero-flock{right:-4%;top:-6%;width:min(430px,38%);opacity:.9}
@media (max-width:1040px){
.hero-in{grid-template-columns:1fr;gap:34px}
.hero-vis{order:2;max-width:620px}
.hero-strip{grid-template-columns:1fr;gap:16px;margin-top:38px}
.hero-flock{width:min(340px,50%);top:auto;bottom:2%;right:-6%;opacity:.3}
}
@media (max-width:640px){
.netvis text{font-size:14px}
.hero-vis figcaption{text-align:left}
}
/* hero refinements */
.hero-in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:40px}
.hero .wrap.hero-in h1{font-size:clamp(36px,3.9vw,50px);letter-spacing:-1.4px}
.hero-copy .cta-row{gap:6px;flex-wrap:nowrap;align-items:center}
.hero-copy .cta-row .btn{padding:0 18px}
.hero-copy .textlink{padding-left:10px}
.btn-ghost{border-color:color-mix(in srgb,var(--ink) 20%,transparent)}
.hero-flock{right:-7%;top:-13%;width:min(360px,33%);opacity:.85}
@media (max-width:1040px){.hero-copy .cta-row{flex-wrap:wrap}}
/* hero refinements, second pass */
.netvis text{font-size:14.5px}
.netvis .net-hub{font-size:17px}
.netvis .net-hub.sub{font-size:13px}
.netvis .net-loop-label{font-size:12.5px}
.netvis .net-node circle{r:4}
.hero-vis figcaption{max-width:62ch;font-size:13px}
.hero-vis{z-index:2}
.hero-flock{top:-2%;right:-6%;width:min(380px,34%);opacity:.8;z-index:1}
.hero{padding-block:146px 64px}
.hero-strip{margin-top:44px}
.hero-flock{right:-11%;top:-9%;width:min(340px,30%);opacity:.75}
/* utility group reads as utility: a hairline separates it from the primary links */
.nav-cta{position:relative;padding-left:16px}
.nav-cta::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:20px;background:var(--line)}
@media (max-width:1180px){.nav-cta::before{display:none}.nav-cta{padding-left:0}}
/* ── Section footers: the homepage now routes rather than tells ─────────────── */
.sec-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px}
.deeplink{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--green);text-decoration:none;white-space:nowrap}
.deeplink:hover{text-decoration:none;color:var(--ink)}
.deeplink svg{transition:transform .18s ease}
.deeplink:hover svg{transform:translateX(3px)}
.fffrow{gap:12px}
.ffcard{padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ffname{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--green)}
.ffcard p{font-size:16.5px;line-height:1.5;color:var(--ink);font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;letter-spacing:-.3px}
/* hero strip without the performance motif */
.hero-strip.two-up{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
/* evidence case studies */
.caselist{margin:2px 0 0;display:grid;grid-template-columns:auto;gap:6px}
.caselist dt{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.caselist dd{margin:0 0 4px;font-size:14px;color:var(--text)}
@media (max-width:980px){.fffrow{grid-template-columns:1fr}}
/* the category band: deep indigo rather than full-saturation, so it sits in the dark palette */
.band{background:linear-gradient(150deg,#1E1A8C 0%,#141152 58%,#0E0C33 100%)}
.band .band-quote{color:var(--green)}
.hero-strip.two-up .small{max-width:76ch}
/* the intelligence loop: Observe → Interpret → Route → Support → Measure → Adapt */
.loop{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.loop-step{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:999px;border:1px solid var(--line);background:var(--surface);position:relative}
.loop-step b{font-size:14.5px;font-weight:600;color:var(--ink)}
.loop-step .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.loop-step:nth-child(2) .dot{background:var(--cyan)}
.loop-step:nth-child(3) .dot{background:var(--lavender)}
.loop-step:nth-child(4) .dot{background:var(--lavender-mid)}
.loop-step:nth-child(5) .dot{background:var(--indigo-ink)}
.loop-step + .loop-step::before{content:"";position:absolute;left:-11px;width:10px;height:1px;background:var(--line)}
/* four-group nav: fewer, wider targets */
.navlinks{gap:4px}
.navlinks > a,.navbtn{padding:0 14px;font-size:15px}
.navlinks > a::after,.navbtn::after{left:14px;right:14px}
.dropmenu.narrow{min-width:232px}
/* hero: the graphic takes the room the trimmed copy freed */
.hero-in{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:44px}
.hero{padding-block:150px 76px}
.proofline{font-size:16.5px}
.hero .wrap.hero-in h1{font-size:clamp(34px,3.6vw,47px);letter-spacing:-1.3px}
.proofline{max-width:none;color:var(--green)}
/* the claim gets its own line; the break folds away on narrow screens */
.hero-copy h1{text-wrap:normal}
@media (max-width:640px){.h1br{display:none}}
/* the category name carries the brand accent rather than muted grey */
.hero-copy .eyebrow{color:var(--green)}
.hero-copy .eyebrow::before{background:var(--cyan)}
/* the uppercase letterspaced label already reads as a label — the dot is decoration */
.eyebrow::before{display:none}
.eyebrow{gap:0}
/* ── Hero illustration: when care begins ────────────────────────────────────── */
.whenvis{width:100%;height:auto;display:block;overflow:visible}
.whenvis .wv-axis line{stroke:var(--line);stroke-width:1}
.whenvis text{font-family:"Source Sans 3",sans-serif}
.whenvis .wv-axlabel{font-size:12px;fill:var(--muted);letter-spacing:.09em;text-transform:uppercase}
.whenvis .wv-curve{fill:none;stroke:var(--lavender-mid);stroke-width:2;stroke-linecap:round}
.whenvis .wv-drop{stroke-width:1;stroke-dasharray:3 5}
.whenvis .wv-drop.early{stroke:var(--green);opacity:.55}
.whenvis .wv-drop.late{stroke:var(--lavender);opacity:.4}
.whenvis .wv-point .ring{fill:none;stroke-width:2}
.whenvis .wv-point.early .ring{stroke:var(--green)}
.whenvis .wv-point.early .core{fill:var(--green)}
.whenvis .wv-point.early .halo{fill:var(--green);opacity:.05;animation:blink-early 12s linear infinite}
.whenvis .wv-point.late .ring{stroke:var(--lavender)}
.whenvis .wv-point.late .core{fill:var(--lavender)}
.whenvis .wv-label{font-size:15px;font-weight:600}
.whenvis .wv-label.early{fill:var(--green);text-anchor:end}
.whenvis .wv-label.late{fill:var(--lavender-pale)}
.whenvis .wv-sub{font-size:13px;fill:var(--muted)}
.whenvis .wv-sub.early{text-anchor:end}
.whenvis .wv-spark{fill:var(--cyan)}
@keyframes wvpulse{0%,100%{r:17;opacity:.16}50%{r:22;opacity:.07}}
@media (prefers-reduced-motion:reduce){.whenvis .wv-point.early .halo{animation:none}}
/* the outcomes return: pathways feed outcomes, outcomes feed the platform */
.netvis .net-collect path{fill:none;stroke:var(--green);stroke-width:1;opacity:.28}
.netvis .net-loop{fill:none;stroke:var(--green);stroke-width:1.6;opacity:.85;stroke-dasharray:none}
.netvis .net-outbox{fill:none;stroke:var(--green);stroke-width:1.4;opacity:.9}
.netvis .net-outlabel{font-size:14px;font-weight:600;fill:var(--green);text-anchor:middle;font-family:"Source Sans 3",sans-serif}
.platform-hero-note{font-size:12.5px;color:var(--muted)}
.netvis .net-collect path{stroke-width:.9;opacity:.2}
/* ── Hero flock: fades in, drifts, then flies off to the top right ─────────── */
.heroflock{position:absolute;right:-11%;top:-9%;width:min(340px,30%);z-index:1;pointer-events:none;opacity:.85;will-change:transform,opacity}
@keyframes flockIn{from{opacity:0}to{opacity:1}}
@keyframes heroDrift{
0%{transform:translate3d(0,0,0) rotate(0deg)}
50%{transform:translate3d(14px,-16px,0) rotate(1.4deg)}
100%{transform:translate3d(30px,-30px,0) rotate(2.6deg)}
}
@media (max-width:1040px){.heroflock{width:min(300px,46%);top:auto;bottom:2%;right:-6%;opacity:.32}}
/* start lower and further in, so the flight has room to read before it clips */
.heroflock{right:-5%;top:0;width:min(330px,29%)}
.heroflock{right:-9%;top:-3%}
/* ── Hero as a three-beat sequence: one graphic per clause of the lead ─────── */
.hero-seq{overflow:clip;height:300vh;padding:0;position:relative}
.hero-stick{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding-block:150px 76px}
.hero-seq .hero-in{width:100%}
.hero-vis-stack{position:relative;display:flex;flex-direction:column;gap:14px}
.hvis{position:relative;grid-area:1/1;margin:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.hvis.on{opacity:1}
.hero-vis-stack > .hvis{position:absolute;inset:0 0 62px 0;display:flex;align-items:center}
.hvis svg{width:100%;height:auto}
.hero-vis-stack{min-height:430px;justify-content:flex-end}
.visdots{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.visdots li{flex:1}
.visdots button{width:100%;text-align:left;background:none;border:0;border-top:2px solid var(--line);padding:10px 2px 0;cursor:pointer;color:var(--muted);font-family:inherit;transition:border-color .3s ease,color .3s ease}
.visdots b{display:block;font-size:13px;font-weight:600;color:var(--muted);transition:color .3s ease}
.visdots span{display:block;font-size:12px;line-height:1.35;margin-top:2px;opacity:0;transition:opacity .3s ease}
.visdots li.on button{border-top-color:var(--green)}
.visdots li.on b{color:var(--green)}
.visdots li.on span{opacity:1}
/* 2 — stepped care */
.scvis text{font-family:"Source Sans 3",sans-serif}
.scvis .sc-axlabel{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}
.scvis .sc-axlabel.right{text-anchor:end}
.scvis .sc-band{fill:var(--lavender-mid);opacity:.3}
.scvis .sc-band.t1{fill:var(--green);opacity:.26}
.scvis .sc-band.t2{fill:var(--lavender);opacity:.34}
.scvis .sc-band.t3{fill:var(--indigo);opacity:.62}
.scvis .sc-tier{font-size:13.5px;font-weight:600;fill:var(--ink);text-anchor:middle}
.scvis .sc-route{fill:none;stroke:var(--lavender-mid);stroke-width:1.2;opacity:.5}
.scvis .sc-route.t1{stroke:var(--green)}
.scvis .sc-dest{fill:var(--surface);stroke:var(--line);stroke-width:1}
.scvis .sc-dest.t3{stroke:var(--lavender-mid)}
.scvis .sc-destlabel{font-size:14px;fill:var(--text)}
.scvis .sc-spark{fill:var(--cyan)}
.scvis .sc-spark.t1{fill:var(--green)}
/* 3 — longitudinal */
.lgvis text{font-family:"Source Sans 3",sans-serif}
.lgvis .lg-axis{stroke:var(--line);stroke-width:1}
.lgvis .lg-bar{fill:var(--lavender-mid);opacity:.55}
.lgvis .lg-bar.in{fill:var(--indigo);opacity:.8}
.lgvis .lg-bar.calm{fill:var(--lavender);opacity:.4}
.lgvis .lg-bar.hot{fill:var(--green);opacity:.85}
.lgvis .lg-phase{fill:var(--surface);stroke:var(--line);stroke-width:1}
.lgvis .lg-phase.after{fill:none;stroke-dasharray:4 5;stroke:var(--line)}
.lgvis .lg-phaselabel{font-size:13px;font-weight:600;fill:var(--ink)}
.lgvis .lg-phaselabel.after{font-weight:400;fill:var(--muted)}
.lgvis .lg-mark{stroke:var(--green);stroke-width:1;stroke-dasharray:3 5;opacity:.45}
.lgvis .lg-dot{fill:var(--green)}
.lgvis .lg-label{font-size:15px;font-weight:600;fill:var(--green);text-anchor:end}
.lgvis .lg-sub{font-size:13px;fill:var(--muted);text-anchor:end}
.lgvis .lg-arrow{fill:none;stroke:var(--green);stroke-width:1.4}
.lgvis .lg-return{font-size:13.5px;font-weight:600;fill:var(--green)}
@media (max-width:1040px){
.hero-seq{height:auto;padding-block:0}
.hero-stick{position:static;min-height:0;padding-block:140px 70px}
.hero-vis-stack > .hvis{position:relative;inset:auto;display:none}
.hero-vis-stack > .hvis.on{display:flex}
.hero-vis-stack{min-height:0}
}
.scvis .sc-band{stroke:var(--ground);stroke-width:1.5}
.scvis .sc-tier{text-anchor:end;fill:var(--text)}
/* stacking must come after the desktop column ratios set above */
@media (max-width:1040px){
.hero-in{grid-template-columns:1fr;gap:30px}
.hero-vis-stack{order:2;max-width:640px}
.visdots{gap:6px}
}
@media (max-width:640px){
.visdots{flex-direction:column;gap:0}
.visdots button{border-top:0;border-left:2px solid var(--line);padding:9px 0 9px 12px}
.visdots li.on button{border-left-color:var(--green)}
.visdots span{display:none}
.visdots li.on span{display:block}
}
/* ── Birds: two poses swapped on a short cycle, so the wings actually beat ─── */
.pfly .bird{position:relative;display:block;width:100%;
animation:glide var(--bd,7s) ease-in-out infinite alternate;
animation-delay:inherit}
.pfly .wing{position:absolute;inset:0;display:block;width:100%;height:auto;
animation:beat var(--fd,.62s) steps(1,end) infinite}
.pfly .wing.down{position:relative}
.pfly .wing.up{animation-name:beat-off}
@keyframes beat{0%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes beat-off{0%,49.9%{opacity:0}50%,100%{opacity:1}}
@keyframes glide{
from{transform:translate3d(0,0,0) rotate(-2deg)}
to{transform:translate3d(16px,-22px,0) rotate(3deg)}
}
/* Tints: the cut-outs come in two source colours, so each bird is flattened to
a neutral base and then rotated onto one hue from the palette. */
.pfly .wing{filter:grayscale(1) sepia(1) saturate(2.6) hue-rotate(168deg) brightness(1.02)}
.pfly.t-cyan .bird{filter:grayscale(1) sepia(1) saturate(3) hue-rotate(157deg) brightness(1.14)}
.pfly.t-violet .wing{filter:grayscale(1) sepia(1) saturate(2.6) hue-rotate(213deg) brightness(1.02)}
.pfly.t-mint .bird{filter:grayscale(1) sepia(1) saturate(2.4) hue-rotate(99deg) brightness(1.16)}
.pfly.t-indigo .wing{filter:grayscale(1) sepia(1) saturate(3.4) hue-rotate(215deg) brightness(.82)}
.pfly.t-sky .bird{filter:grayscale(1) sepia(1) saturate(2.5) hue-rotate(175deg) brightness(1.1)}
.pfly.static .wing{animation:none}
.pfly.static .wing.up{display:none}
.pfly.static .bird{animation:none}
@media (prefers-reduced-motion:reduce){
.pfly .wing,.pfly .bird{animation:none}
.pfly .wing.up{display:none}
}
/* ── Birds fly: travel and depth ───────────────────────────────────────────── */
.flock{z-index:0}
.pfly{z-index:0}
.hero .flock .pfly{display:none} /* the hero has its own formation */
.heroflock .pfly{display:block}
.route{display:block;width:100%;
animation:cross var(--rd,36s) linear var(--rdelay,0s) infinite;
will-change:transform,opacity}
@keyframes cross{
0%{transform:translate3d(0,0,0) scale(.94);opacity:0}
9%{opacity:1}
72%{opacity:1}
100%{transform:translate3d(var(--rx,460px),var(--ry,-250px),0) scale(1.06);opacity:0}
}
/* depth: further birds are smaller, softer, slower and dimmer */
.pfly.d-far{filter:blur(1.7px);opacity:.42}
.pfly.d-mid{filter:blur(.8px)}
.pfly.d-near{filter:none}
.pfly.d-far .route{animation-duration:calc(var(--rd,36s) * 1.5)}
.pfly.d-mid .route{animation-duration:calc(var(--rd,36s) * 1.18)}
/* the hero formation flaps where it is, then leaves for good, one by one */
.heroflock{position:absolute;right:-1%;top:6%;width:min(460px,42%);height:min(340px,40vh);z-index:0;pointer-events:none;opacity:.9}
.hero-bird .route{animation:heroaway var(--rd,24s) cubic-bezier(.34,0,.5,1) var(--rdelay,0s) forwards}
@keyframes heroaway{
0%{transform:translate3d(0,0,0) scale(.96);opacity:0}
5%{opacity:1}
16%{transform:translate3d(14px,-16px,0) scale(1)}
100%{transform:translate3d(var(--rx,700px),var(--ry,-420px),0) scale(1.14);opacity:0}
}
.pfly.static .route{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){.route{animation:none;opacity:1}}
@media (max-width:1040px){.heroflock{right:-2%;top:auto;bottom:4%;width:min(320px,52%);height:240px;opacity:.4}}
.pfly.t-violet .wing{filter:grayscale(1) sepia(1) saturate(2.2) hue-rotate(207deg) brightness(.98)}
/* the lead moves with the graphic: one sentence per beat */
.leadstack{position:relative;display:grid;min-height:84px}
.hlead{grid-area:1/1;margin:0;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.hlead.on{opacity:1;transform:none;pointer-events:auto}
.visdots button{padding-top:11px}
.visdots b{font-size:14px;letter-spacing:.04em}
@media (max-width:1040px){.leadstack{min-height:110px}}
/* fewer birds where there is less room and less GPU */
@media (max-width:900px){.flock .pfly:nth-child(n+3){display:none}}
/* a slower, steadier beat and a wider spread */
.heroflock{width:min(560px,46%);height:min(420px,46vh);top:2%;right:-3%}
.pfly.d-far .route{animation-duration:calc(var(--rd,36s) * 1.35)}
.pfly.d-mid .route{animation-duration:calc(var(--rd,36s) * 1.12)}
/* the hero copy gets air: each line lands on its own */
.hero-copy{gap:30px}
.hero-copy .eyebrow{letter-spacing:.24em;font-size:12px}
.hero-copy h1{margin-block:-4px}
.hero-copy .leadstack{min-height:92px}
.hero-copy .lead{font-size:18px;line-height:1.6}
.hero-copy .cta-row{margin-top:2px}
/* outlined green CTA rather than a filled one */
.btn-outline{background:transparent;border-color:var(--green);color:var(--green);font-weight:600}
.btn-outline:hover{background:color-mix(in srgb,var(--green) 12%,transparent);border-color:var(--green);color:var(--green)}
/* Birds stay in the background and spend most of their flight fading */
.flock,.heroflock,.pfly{z-index:0;pointer-events:none}
.wrap,.hero-in,.hero-copy,.hero-vis-stack{position:relative;z-index:1}
.hero-in{z-index:2}
.card,.aud,.prob,.prodrow,.layer,.final,.dash,.stagebox,.visualbox{position:relative;z-index:1}
@keyframes cross{
0%{transform:translate3d(0,0,0) scale(.94);opacity:0}
16%{opacity:1}
58%{opacity:1}
100%{transform:translate3d(var(--rx,460px),var(--ry,-250px),0) scale(1.06);opacity:0}
}
@keyframes heroaway{
0%{transform:translate3d(0,0,0) scale(.96);opacity:0}
8%{opacity:1}
16%{transform:translate3d(14px,-16px,0) scale(1)}
62%{opacity:1}
100%{transform:translate3d(var(--rx,700px),var(--ry,-420px),0) scale(1.14);opacity:0}
}
.pfly.d-far{opacity:.3}
/* fill-mode both: a bird waiting for its delay is invisible, not parked */
.route{animation-fill-mode:both}
.hero-bird .route{animation:heroaway var(--rd,24s) cubic-bezier(.34,0,.5,1) var(--rdelay,0s) both}
/* A sticky element makes its own stacking context, so the hero's fade-to-ground
overlay was painting over the sequence and washing the copy out at the last
beat. Lift the sticky layer above it, and let the colour field travel with it
so all three beats sit on the same backdrop. */
.hero-seq .hero-stick{z-index:1}
.hero-seq::before{display:none}
.hero-seq::after{z-index:0}
.hero-seq .hero-stick::before{
content:"";position:absolute;inset:-16% -10% 4%;z-index:0;pointer-events:none;
background:
radial-gradient(40% 48% at 20% 16%, rgba(47,40,242,.92), transparent 63%),
radial-gradient(36% 44% at 70% 4%, rgba(117,112,246,.80), transparent 62%),
radial-gradient(32% 40% at 90% 40%, rgba(153,149,248,.60), transparent 64%),
radial-gradient(28% 36% at 54% 56%, rgba(201,247,253,.30), transparent 66%),
radial-gradient(26% 32% at 10% 64%, rgba(197,252,207,.24), transparent 68%),
url("data:image/svg+xml;utf8,");
background-size:auto,auto,auto,auto,auto,300px 300px;
background-blend-mode:normal,normal,normal,normal,normal,multiply;
filter:blur(44px) saturate(118%);
animation:drift-field 26s ease-in-out infinite alternate;
}
.hero-seq .hero-stick::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(rgba(251,251,254,0) 58%, rgba(251,251,254,.6) 86%, var(--ground) 100%);
}
/* every destination carries its tier's colour, not just the top one */
.scvis .sc-dest{fill:var(--surface);stroke-width:1.2}
.scvis .sc-dest.t1{stroke:rgba(197,252,207,.55)}
.scvis .sc-dest.t2{stroke:rgba(153,149,248,.55)}
.scvis .sc-dest.t3{stroke:rgba(117,112,246,.9)}
.scvis .sc-route.t2{stroke:var(--lavender);opacity:.55}
.scvis .sc-route.t3{stroke:var(--lavender-mid);opacity:.7}
/* ── Four beats: the line itself is the title ──────────────────────────────── */
.hero-seq{height:500vh}
.titlestack{position:relative;display:grid;min-height:270px;align-content:start}
.htitle{grid-area:1/1;margin:0;opacity:0;transform:translateY(10px);
transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.htitle.on{opacity:1;transform:none;pointer-events:auto}
.hero .wrap.hero-in .htitle{font-size:clamp(30px,3.3vw,43px);line-height:1.16;letter-spacing:-1.1px}
.hero-copy{gap:26px}
.visdots li b{white-space:nowrap}
@media (max-width:1240px){.titlestack{min-height:300px}}
@media (max-width:1040px){
.hero-seq{height:auto}
.titlestack{min-height:0;display:block}
.htitle{display:none;opacity:1;transform:none}
.htitle.on{display:block}
}
/* opening-beat graphic: need found across a whole population */
.popvis{width:100%;height:auto;display:block}
.popvis text{font-family:"Source Sans 3",sans-serif}
.popvis .pp-axlabel{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}
.popvis .pp-dot{fill:var(--lavender-mid);opacity:.26}
.popvis .pp-dot.flag{fill:var(--green);opacity:1}
.popvis .pp-field .flag{animation:ppflag 5.5s ease-in-out infinite}
.popvis .pp-field .flag:nth-of-type(3n){animation-delay:-1.8s}
.popvis .pp-field .flag:nth-of-type(3n+1){animation-delay:-3.4s}
.popvis .pp-scan{animation:ppscan 9s linear infinite}
.popvis .pp-keylabel{font-size:12.5px;fill:var(--green)}
.popvis .pp-keylabel.muted{fill:var(--muted)}
@keyframes ppflag{0%,100%{r:5.4;opacity:1}50%{r:6.6;opacity:.82}}
@keyframes ppscan{from{transform:translateX(0)}to{transform:translateX(760px)}}
@media (prefers-reduced-motion:reduce){.popvis .pp-scan,.popvis .pp-field .flag{animation:none}}
/* the opening line carries the page: a size up on the others */
.hero .wrap.hero-in .htitle[data-i="0"]{font-size:clamp(36px,4.3vw,56px);letter-spacing:-1.5px;line-height:1.12}
.titlestack{min-height:300px}
@media (max-width:1240px){.titlestack{min-height:330px}}
/* one size for every beat, and more air before the CTA */
.hero .wrap.hero-in .htitle,
.hero .wrap.hero-in .htitle[data-i="0"]{font-size:clamp(33px,3.7vw,47px);line-height:1.14;letter-spacing:-1.2px}
.hero-copy .cta-row{margin-top:26px}
/* the hero field shifts hue across the beats */
.hero-seq .hero-stick::before{
filter:blur(44px) saturate(var(--fieldsat,118%)) hue-rotate(var(--fieldhue,0deg));
}
/* the Treatment pill picks up the colour of the bars it sits under */
.lgvis .lg-phase.treat{fill:rgba(47,40,242,.32);stroke:rgba(117,112,246,.8);stroke-width:1.2}
.lgvis .lg-phaselabel{fill:#fff}
/* the hero title reads as the page's headline, not a section head */
.hero-in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:40px}
.hero .wrap.hero-in .htitle,
.hero .wrap.hero-in .htitle[data-i="0"]{font-size:clamp(38px,4.6vw,59px);line-height:1.08;letter-spacing:-1.7px}
.titlestack{min-height:380px}
.hero-copy .eyebrow{margin-bottom:2px}
@media (max-width:1240px){.titlestack{min-height:400px}}
@media (max-width:1040px){.titlestack{min-height:0}}
/* ── Feed: one population flowing into three levels of care ────────────────── */
.skvis{width:100%;height:auto;display:block}
.skvis text{font-family:"Source Sans 3",sans-serif}
.skvis .sk-axlabel{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}
.skvis .sk-axlabel.right{text-anchor:end}
.skvis .sk-band{opacity:.26}
.skvis .sk-band.t1{fill:var(--green)}
.skvis .sk-band.t2{fill:var(--lavender)}
.skvis .sk-band.t3{fill:var(--indigo)}
.skvis .sk-src.t1{fill:var(--green)}
.skvis .sk-src.t2{fill:var(--lavender)}
.skvis .sk-src.t3{fill:var(--lavender-mid)}
.skvis .sk-tier{font-size:13.5px;fill:var(--text);text-anchor:end}
.skvis .sk-dest{fill:var(--surface);stroke-width:1.2}
.skvis .sk-dest.t1{stroke:rgba(197,252,207,.55)}
.skvis .sk-dest.t2{stroke:rgba(153,149,248,.55)}
.skvis .sk-dest.t3{stroke:rgba(117,112,246,.9)}
.skvis .sk-destlabel{font-size:14px;fill:var(--text)}
.skvis .sk-spark{fill:var(--cyan)}
.skvis .sk-spark.t1{fill:var(--green)}
/* the field eases between beats instead of being re-filtered every frame */
.hero-seq .hero-stick::before{transition:filter 1.1s ease}
/* keep the heavy layers off the main paint path */
.hero-seq .hero-stick::before{will-change:filter,transform;contain:paint}
.hvis,.htitle{will-change:opacity}
.flock{contain:layout paint}
/* the wings are their own filtered layers, so swapping them costs a composite
rather than re-filtering the whole bird */
.pfly .wing{will-change:opacity;backface-visibility:hidden}
.pfly .route{will-change:transform,opacity}
/* ── Hero colour fields: one per beat, cross-faded ─────────────────────────── */
.hero-seq .hero-stick::before{display:none}
.hero-seq .field{
position:absolute;inset:-14% -8% 2%;z-index:0;pointer-events:none;display:block;
opacity:0;transition:opacity 1.1s ease;
background-blend-mode:normal,normal,normal,normal,normal,multiply;
background-size:auto,auto,auto,auto,auto,300px 300px;
animation:drift-field 30s ease-in-out infinite alternate;
}
.hero-seq .field.on{opacity:1}
.hero-seq .field.f0{background:
radial-gradient(54% 62% at 14% 10%, rgba(47,40,242,0.180), transparent 72%),
radial-gradient(46% 52% at 80% 8%, rgba(197,252,207,0.120), transparent 70%),
radial-gradient(44% 50% at 96% 50%, rgba(153,149,248,0.108), transparent 72%),
radial-gradient(40% 46% at 44% 66%, rgba(201,247,253,0.084), transparent 74%),
radial-gradient(38% 44% at 4% 76%, rgba(117,112,246,0.060), transparent 76%),
url("data:image/svg+xml;utf8,")}
.hero-seq .field.f1{background:
radial-gradient(52% 60% at 18% 12%, rgba(47,40,242,0.255), transparent 72%),
radial-gradient(48% 54% at 74% 4%, rgba(117,112,246,0.204), transparent 70%),
radial-gradient(44% 50% at 94% 44%, rgba(153,149,248,0.150), transparent 72%),
radial-gradient(40% 46% at 52% 60%, rgba(201,247,253,0.066), transparent 74%),
radial-gradient(38% 44% at 6% 70%, rgba(197,252,207,0.048), transparent 76%),
url("data:image/svg+xml;utf8,")}
.hero-seq .field.f2{background:
radial-gradient(52% 60% at 22% 14%, rgba(47,40,242,0.180), transparent 72%),
radial-gradient(50% 56% at 78% 6%, rgba(117,112,246,0.186), transparent 70%),
radial-gradient(46% 52% at 92% 48%, rgba(201,247,253,0.102), transparent 72%),
radial-gradient(42% 48% at 46% 64%, rgba(153,149,248,0.120), transparent 74%),
radial-gradient(38% 44% at 8% 74%, rgba(197,252,207,0.060), transparent 76%),
url("data:image/svg+xml;utf8,")}
.hero-seq .field.f3{background:
radial-gradient(54% 60% at 26% 18%, rgba(37,90,200,0.165), transparent 74%),
radial-gradient(50% 56% at 80% 10%, rgba(201,247,253,0.120), transparent 70%),
radial-gradient(46% 52% at 92% 52%, rgba(117,112,246,0.135), transparent 72%),
radial-gradient(44% 50% at 44% 68%, rgba(197,252,207,0.084), transparent 74%),
radial-gradient(38% 44% at 6% 30%, rgba(47,40,242,0.135), transparent 76%),
url("data:image/svg+xml;utf8,")}
.hero-seq .field.f4{background:
radial-gradient(56% 62% at 30% 22%, rgba(24,120,150,0.150), transparent 74%),
radial-gradient(52% 58% at 84% 12%, rgba(197,252,207,0.102), transparent 72%),
radial-gradient(46% 52% at 90% 56%, rgba(201,247,253,0.120), transparent 72%),
radial-gradient(44% 50% at 40% 70%, rgba(117,112,246,0.102), transparent 76%),
radial-gradient(40% 46% at 4% 34%, rgba(47,40,242,0.102), transparent 78%),
url("data:image/svg+xml;utf8,")}
@media (prefers-reduced-motion:reduce){.hero-seq .field{animation:none}}
/* Inner-page heroes: same field, drawn with soft gradients instead of a runtime
blur. The blur cost about 50ms a frame while the hero was on screen. */
.hero::before{
inset:-14% -8% 4%;
background:
radial-gradient(52% 60% at 18% 12%, rgba(47,40,242,.85), transparent 72%),
radial-gradient(48% 54% at 74% 4%, rgba(117,112,246,.68), transparent 70%),
radial-gradient(44% 50% at 94% 44%, rgba(153,149,248,.5), transparent 72%),
radial-gradient(40% 46% at 52% 60%, rgba(201,247,253,.22), transparent 74%),
radial-gradient(38% 44% at 6% 70%, rgba(197,252,207,.16), transparent 76%),
url("data:image/svg+xml;utf8,");
background-size:auto,auto,auto,auto,auto,300px 300px;
background-blend-mode:normal,normal,normal,normal,normal,multiply;
filter:none;
animation:drift-field 30s ease-in-out infinite alternate;
}
/* the late marker pulses like the early one, in violet */
.whenvis .wv-point.late .halo{fill:var(--lavender);opacity:.05;animation:blink-late 12s linear infinite}
@media (prefers-reduced-motion:reduce){.whenvis .wv-point.late .halo{animation:none}}
/* The hero keeps drifting between beats: local scroll progress moves the
graphic and the copy at different rates, so the sequence reads as continuous. */
.hero-vis-stack{transform:translate3d(0,calc((var(--beatq,.5) - .5) * -26px),0)}
.hero-copy{transform:translate3d(0,calc((var(--beatq,.5) - .5) * -10px),0)}
.hero-seq .field{transform:translate3d(calc((var(--beatq,.5) - .5) * 18px),calc((var(--beatq,.5) - .5) * -14px),0)}
.hero-seq .field{animation:none}
.hero-seq .field.on{transition:opacity .7s ease}
.hvis{transition:opacity .5s ease,transform .5s ease;transform:translate3d(0,8px,0)}
.hvis.on{transform:none}
.htitle{transition:opacity .45s ease,transform .45s ease}
/* Each marker lights up only when the travelling dot reaches it: the timings
below are the same 12s cycle the dot runs on. */
@keyframes blink-early{
0%,26%{opacity:.05;r:15}
30%{opacity:.4;r:23}
34%{opacity:.12;r:16}
38%{opacity:.4;r:23}
42%{opacity:.12;r:16}
46%,100%{opacity:.05;r:15}
}
@keyframes blink-late{
0%,72%{opacity:.05;r:15}
76%{opacity:.4;r:23}
80%{opacity:.12;r:16}
84%{opacity:.4;r:23}
88%{opacity:.12;r:16}
92%,100%{opacity:.05;r:15}
}
.whenvis .wv-point .ring{transition:stroke-width .2s ease}
@media (prefers-reduced-motion:reduce){
.whenvis .wv-point .halo{animation:none;opacity:.14}
}
/* ── Foster: a playhead runs the timeline, the marker lights as it passes ───── */
.lgvis .lg-play{fill:var(--cyan);opacity:0;animation:lg-sweep 12s linear infinite}
.lgvis .lg-halo{fill:var(--green);opacity:0;animation:lg-blink 12s linear infinite}
.lgvis .lg-arrow{stroke-dasharray:130;stroke-dashoffset:130;animation:lg-draw 12s linear infinite}
.lgvis .lg-return{opacity:0;animation:lg-reveal 12s linear infinite}
.lgvis .lg-bar{transform-origin:center bottom;animation:lg-rise 12s ease-out infinite}
@keyframes lg-sweep{
0%{transform:translateX(0);opacity:0}
4%{opacity:.55}
62%{transform:translateX(508px);opacity:.55}
70%{transform:translateX(508px);opacity:0}
100%{transform:translateX(508px);opacity:0}
}
@keyframes lg-blink{
0%,40%{opacity:0;r:12}
44%{opacity:.42;r:20}
48%{opacity:.12;r:13}
52%{opacity:.42;r:20}
56%,100%{opacity:.08;r:14}
}
@keyframes lg-draw{
0%,50%{stroke-dashoffset:130}
62%{stroke-dashoffset:0}
100%{stroke-dashoffset:0}
}
@keyframes lg-reveal{0%,58%{opacity:0}66%,100%{opacity:1}}
@keyframes lg-rise{0%{transform:scaleY(.1)}9%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
.lgvis .lg-play,.lgvis .lg-halo,.lgvis .lg-arrow,.lgvis .lg-return,.lgvis .lg-bar{animation:none}
.lgvis .lg-arrow{stroke-dashoffset:0}
.lgvis .lg-return{opacity:1}
}
/* an invisible bridge across the gap, so moving from the label to the panel
never leaves the menu */
.dropmenu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px;display:block}
/* ── Homepage sections, built out ──────────────────────────────────────────── */
/* where the system breaks down */
.gapsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);
border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.gapstep{background:var(--surface-2);padding:22px 22px 24px;display:flex;flex-direction:column;gap:7px;transition:background .2s ease}
.gapstep:hover{background:var(--surface)}
.gs-n{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--lavender-mid)}
.gapstep b{font-size:16.5px;font-weight:400;font-family:"Hedvig Letters Serif",Georgia,serif;letter-spacing:-.3px;color:var(--ink);line-height:1.25}
.gs-s{font-size:13.5px;line-height:1.5;color:var(--muted)}
.chain{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.chain-i{font-size:16px;font-weight:600;color:var(--ink);padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.chain-i.last{color:var(--green);border-color:rgba(197,252,207,.4)}
.chain-x{font-size:13px;color:var(--muted);font-style:italic}
/* the category band */
.an i{display:block;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-top:6px}
.banddef{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:36px;align-items:center;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
/* the orchestration layer */
.loopback{position:relative;margin:14px 0 0;text-align:center}
.loopback span{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);
padding:8px 18px;border-radius:999px;border:1px dashed var(--line);background:var(--surface-2)}
.loopback span::before,.loopback span::after{content:"";width:26px;height:1px;background:var(--line)}
/* evidence */
.evgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.evcard{padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.evcard b{font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;font-size:17px;letter-spacing:-.3px;color:var(--ink)}
.evcard span{font-size:13.5px;line-height:1.5;color:var(--muted)}
.evbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:18px;border-top:1px solid var(--line-soft)}
.evyears{font-family:"Hedvig Letters Serif",Georgia,serif;font-size:26px;letter-spacing:-.8px;color:var(--green);margin-right:8px}
/* validation */
.casefeat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:32px;align-items:center;
margin-top:20px;padding:24px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line-soft)}
.casefeat .proofline{text-align:right;font-size:18px}
/* find feed foster */
.fffrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ffmeta{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft)}
.ffcard{gap:12px}
@media (max-width:980px){
.gapsteps,.evgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.banddef,.casefeat{grid-template-columns:1fr;gap:18px}
.casefeat .proofline{text-align:left}
}
@media (max-width:640px){
.gapsteps,.evgrid{grid-template-columns:1fr}
.chain-x{display:none}
}
/* the MindStreet card is the light one in the row: its caption needs a dark ink */
.an.mine i{color:var(--indigo)}
.an.mine{box-shadow:0 10px 30px rgba(0,0,0,.28)}
/* nav labels sit a step under the wordmark so the logo stays the loudest thing */
.navlinks > a,.navbtn{font-size:13.5px;padding:0 12px;font-weight:500;color:var(--muted)}
.navlinks > a::after,.navbtn::after{left:12px;right:12px}
.brand{font-size:14px;letter-spacing:.22em}
.navsignin,.navdemo{font-size:13px}
@media (max-width:1180px){.navlinks > a,.navbtn{font-size:13px;padding:0 10px}}
/* Sign In and Request a Demo are one pair: same height, weight and border */
.nav-cta .navsignin,.nav-cta .navdemo{height:34px;min-height:34px;padding:0 15px;font-size:12.5px;font-weight:600;
border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text)}
.nav-cta .navdemo:hover,.nav-cta .navsignin:hover{border-color:var(--green);color:var(--green);background:transparent}
.nav-cta{gap:8px}
/* the fragmentation section reads as two parts: the argument, then what it produces */
.splithead{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:start}
.splithead .lead{max-width:56ch;font-size:16.5px}
.partrule{display:flex;align-items:center;gap:18px;margin:38px 0 18px}
.partrule span{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.partrule::after{content:"";flex:1;height:1px;background:var(--line-soft)}
@media (max-width:980px){.splithead{grid-template-columns:1fr;gap:22px}}
/* ── Hierarchy: the hero owns the display type, sections step down ─────────── */
h2{font-size:clamp(27px,3vw,39px);line-height:1.14;letter-spacing:-.9px}
.seclabel{font-size:clamp(22px,2.4vw,29px)}
section{padding-block:96px}
section.tight{padding-block:0 96px}
/* the first section after the hero sits on a lighter ground with its own edge,
so leaving the hero is a visible event */
.hero-seq + section{background:var(--surface-2);border-top:1px solid var(--line);
box-shadow:inset 0 30px 60px -40px rgba(0,0,0,.7)}
.hero-seq{border-bottom:0}
.sec-head{gap:13px;margin-bottom:30px}
.eyebrow{color:var(--lavender-mid)}
.band .eyebrow{color:var(--on-dark-dim)}
/* nav items answer in green: hover, open menu, and current page */
.navlinks > a:hover,.navbtn:hover{color:var(--green)}
.navdrop[data-open="true"] .navbtn{color:var(--green)}
.navlinks a[aria-current="page"]{color:var(--green);background:transparent}
.navlinks a[aria-current="page"]::after{display:block;transform:scaleX(1)}
.dropmenu a:hover{color:var(--green);background:var(--tint-soft)}
.dropmenu a[aria-current="page"]{color:var(--green);background:var(--tint-soft)}
.dropmenu a:hover span{color:var(--text)}
.mobilenav a:hover,.mobilenav a[aria-current="page"]{color:var(--green)}
/* Three denials, drawn as three broken links rather than one progression:
each pair is joined by a line that stops short on both sides. */
.breaks{display:grid;gap:10px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line-soft)}
.brk{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,auto) minmax(0,1fr);gap:0;align-items:center}
.brk-a,.brk-b{font-size:17px;font-weight:600;color:var(--ink);padding:14px 20px;border-radius:var(--r-md);
background:var(--surface);border:1px solid var(--line)}
.brk-a{text-align:right}
.brk-b{text-align:left;color:var(--muted);border-style:dashed;background:transparent}
.brk-b.out{color:var(--muted)}
.brk-gap{display:flex;align-items:center;gap:10px;padding:0 14px}
.brk-gap i{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.brk-gap i:last-child{background:linear-gradient(90deg,transparent,var(--line))}
.brk-gap em{font-style:italic;font-size:12.5px;color:var(--lavender-mid);white-space:nowrap;
padding:4px 10px;border-radius:999px;border:1px dashed var(--line)}
@media (max-width:820px){
.brk{grid-template-columns:1fr;gap:6px;text-align:left}
.brk-a,.brk-b{text-align:left}
.brk-gap{padding:2px 0}
.brk-gap i{display:none}
}
/* The burden the current system places on the person: six steps, then the
line that undoes them. */
.burden{padding:26px 28px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.burden-cap{margin:0 0 14px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.burden-steps{list-style:none;margin:0;padding:0;counter-reset:bd;display:grid;gap:0}
.burden-steps li{counter-increment:bd;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:baseline;
padding:9px 0;border-top:1px solid var(--line-soft);font-size:15px;color:var(--text)}
.burden-steps li:first-child{border-top:0;padding-top:0}
.burden-steps li::before{content:counter(bd,decimal-leading-zero);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--lavender-mid)}
.burden-punch{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
font-family:"Hedvig Letters Serif",Georgia,serif;font-size:26px;letter-spacing:-.6px;color:var(--green)}
@media (max-width:980px){.burden{padding:22px}}
/* the burden runs full width as a sequence, not as a card in the text column */
.burdenrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line-soft);
border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.bcell{background:var(--surface);padding:18px 16px 20px;display:flex;flex-direction:column;gap:8px}
.bn{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--lavender-mid)}
.bcell b{font-size:14.5px;font-weight:500;line-height:1.4;color:var(--text)}
.burden-punch{margin:16px 0 0;font-family:"Hedvig Letters Serif",Georgia,serif;font-size:clamp(22px,2.4vw,30px);
letter-spacing:-.6px;color:var(--green);border:0;padding:0}
@media (max-width:980px){.burdenrow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.burdenrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* One line, four points, severed between each pair */
.breakline{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-soft)}
.bkvis{width:100%;height:auto;display:block;overflow:visible}
.bkvis text{font-family:"Source Sans 3",sans-serif}
.bkvis .bk-seg{stroke:var(--lavender-mid);stroke-width:1.5;opacity:.55}
.bkvis .bk-cut{stroke:var(--lavender-mid);stroke-width:1.5;opacity:.5;fill:none;stroke-linecap:round}
.bkvis .bk-gap{font-size:13px;font-style:italic;fill:var(--muted);text-anchor:middle}
.bkvis .bk-ring{fill:none;stroke:var(--lavender);stroke-width:1.5;opacity:.85}
.bkvis .bk-dot{fill:var(--lavender)}
.bkvis .bk-ring.last{stroke:var(--green);stroke-dasharray:3 4;opacity:.9}
.bkvis .bk-dot.last{fill:none;stroke:var(--green);stroke-width:1.5}
.bkvis .bk-label{font-size:16px;font-weight:600;fill:var(--ink);text-anchor:middle}
.bkvis .bk-label.last{fill:var(--green)}
.bklist{display:none;list-style:none;margin:0;padding:0;gap:10px}
.bklist li{font-size:16px;color:var(--ink);padding:12px 0;border-top:1px solid var(--line-soft)}
.bklist li:first-child{border-top:0}
.bklist em{font-style:italic;color:var(--muted);font-weight:400}
@media (max-width:760px){
.bkvis{display:none}
.bklist{display:grid}
}
/* the head shares the six-column grid the rows below use, so the paragraph's
left edge lands on a real gridline rather than floating */
.splithead{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;align-items:start}
.splithead > *:first-child{grid-column:1 / 4;padding-right:56px}
.splithead > *:last-child{grid-column:4 / 7}
.splithead .lead{max-width:none}
.partrule{margin:54px 0 20px}
.burdenrow + .burden-punch{margin-top:22px}
.breakline{margin-top:48px;padding-top:36px}
@media (max-width:980px){
.splithead{grid-template-columns:1fr;gap:20px}
.splithead > *:first-child,.splithead > *:last-child{grid-column:1 / -1;padding-right:0}
}
/* the paragraph starts level with the headline, not with the eyebrow above it */
.splithead > *:last-child{padding-top:31px}
@media (max-width:980px){.splithead > *:last-child{padding-top:0}}
/* the label stands on its own; the trailing rule was extra furniture */
.partrule::after{display:none}
.partrule{margin:54px 0 18px}
/* ── The category band: one row per domain, the pattern completed by the last ── */
.oslayers{display:grid;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-lg);overflow:hidden;margin-top:34px}
.osrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.2fr);gap:24px;align-items:baseline;
padding:20px 26px;background:#1B1794}
.os-domain{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-dim)}
.os-name{font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;font-size:clamp(19px,2vw,25px);letter-spacing:-.5px;color:#fff}
.os-verb{font-size:15px;color:var(--on-dark-dim)}
.osrow.mine{background:#fff}
.osrow.mine .os-domain{color:var(--indigo-deep)}
.osrow.mine .os-name{color:var(--indigo-deep);font-weight:400}
.osrow.mine .os-verb{color:var(--indigo);font-weight:600}
.band .band-quote{margin-top:30px;max-width:30ch;color:var(--green)}
.band .splithead > *:last-child{padding-top:31px}
@media (max-width:820px){
.osrow{grid-template-columns:1fr;gap:6px;padding:18px 20px}
.band .band-quote{max-width:none}
}
/* the credibility beat: evidence and institutions in one section */
.credline{font-size:clamp(20px,2.1vw,26px);line-height:1.2;letter-spacing:-.5px;color:var(--ink)}
.splithead + .evbar{margin-top:26px}
.splithead .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.splithead .logoslot{height:44px;font-size:10px}
/* ── Four sections, four visual languages ─────────────────────────────────── */
/* the band's closing statement */
.bandclose{margin-top:34px;padding-top:26px;display:grid;gap:16px;border-top:1px solid rgba(255,255,255,.16)}
.bc-rule{width:64px;height:3px;border-radius:2px;background:var(--green)}
.bandclose p{margin:0;font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;
font-size:clamp(25px,3.1vw,40px);line-height:1.16;letter-spacing:-.9px;color:#fff;max-width:20ch}
.bandclose em{font-style:normal;color:var(--green)}
/* platform: a flow of terms between two arrows, no pills, no card chrome */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1.04fr) 34px minmax(0,1fr);
gap:0;align-items:stretch}
.flowcol{padding:4px 0}
.flowcol.core{padding:22px 24px;border-radius:var(--r-lg);background:linear-gradient(160deg,#241DBE 0%,#1B1794 100%)}
.flowcap{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.flowcol.core .flowcap{color:rgba(255,255,255,.72)}
.flowlist{list-style:none;margin:0;padding:0}
.flowlist li{font-size:14.5px;line-height:1.45;color:var(--text);padding:7px 0;border-top:1px solid var(--line-soft)}
.flowlist li:first-child{border-top:0}
.flowcol.core .flowlist li{color:#fff;border-color:rgba(255,255,255,.14)}
.flowarrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.flowarrow span{width:5px;height:5px;border-radius:50%;background:var(--lavender-mid);opacity:.5}
.flowarrow span:nth-child(2){opacity:.75}
/* how it works: numerals on a line, type only */
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.steps3 li{display:flex;flex-direction:column;gap:9px;padding-top:20px;border-top:2px solid var(--line)}
.steps3 li:first-child{border-top-color:var(--green)}
.s3-n{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.steps3 b{font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;font-size:clamp(26px,2.7vw,34px);
letter-spacing:-.7px;color:var(--ink);line-height:1}
.steps3 p{margin:0;font-size:15.5px;line-height:1.55;color:var(--text)}
.s3-meta{font-size:12.5px;color:var(--muted);margin-top:auto}
/* evidence: a rule-separated list, not another chip row */
.proofrow{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;margin-top:24px}
.prooflist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px}
.prooflist li{position:relative;font-size:14.5px;color:var(--text);padding:4px 0}
.prooflist li + li::before{content:"";position:absolute;left:-11px;top:50%;width:1px;height:13px;
background:var(--line);transform:translateY(-50%)}
/* start with who you are: a directory of rows */
.dirlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.dirlist .aud{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;
padding:22px 0;gap:6px}
.dirlist .aud:hover{transform:none;background:transparent}
.dirlist .aud h3{font-size:clamp(20px,2.1vw,25px)}
.dirlist .aud:hover h3{color:var(--green)}
.dirlist .aud .q{font-size:14px}
.dirlist .aud p{color:var(--muted)}
.dirlist .aud .go{color:var(--muted);font-size:13.5px}
.dirlist .aud:hover .go{color:var(--green)}
@media (max-width:980px){
.flow{grid-template-columns:1fr;gap:18px}
.flowarrow{flex-direction:row;padding:2px 0}
.steps3{grid-template-columns:1fr;gap:22px}
.dirlist{grid-template-columns:1fr}
}
/* ══ Inner pages: same language as the homepage ══════════════════════════════
Flat hairline grids instead of floating cards, divided lists instead of
bullet clouds, quieter chips, type-led headings. */
/* consequence / challenge grids read like the homepage's numbered grid */
.probs{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);
border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.prob{background:var(--surface-2);border:0;border-radius:0;padding:20px 22px;font-size:15px;
line-height:1.45;color:var(--text);transition:background .2s ease}
.prob:hover{background:var(--surface)}
/* value and capability lists become divided rows */
.outlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.outlist li{padding:12px 0;border-top:1px solid var(--line-soft);font-size:15.5px}
.outlist li::before{display:none}
.ticks{gap:0}
.tick{padding:12px 0;border-top:1px solid var(--line-soft);font-size:15.5px;align-items:center}
.tick:first-child{border-top:0}
.tick svg{margin-top:0;opacity:.85}
.steprow li{border-radius:0;border:0;border-top:2px solid var(--line);background:transparent;padding:18px 0 0}
.steprow li:first-child{border-top-color:var(--green)}
.steprow b{font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;font-size:20px;letter-spacing:-.4px}
/* chips: outline, not fill */
.chip{background:transparent;border:1px solid var(--line);color:var(--text);min-height:32px;font-size:13px}
.chip-soft{background:var(--tint-soft);border-color:transparent;color:var(--lavender-pale)}
.layer.core .chip,.flowcol.core .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
/* trust and stub grids flatten to the same hairline system */
.trustgrid,.stubgrid{gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
border-radius:var(--r-lg);overflow:hidden}
.trustgrid > .card,.stubgrid > .card{background:var(--surface-2);border:0;border-radius:0;box-shadow:none;padding:22px}
.trustgrid h4,.stubgrid h3{font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;letter-spacing:-.3px}
.trustgrid .small{padding:7px 0;border-top:1px solid var(--line-soft)}
.trustgrid .small:first-of-type{border-top:0}
/* module rows on the platform page: hairline, not floating card */
.prodrow{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:26px 0}
.prodrow h3{font-size:clamp(21px,2.2vw,27px)}
#connect,#compass,#care,#insights,#longitudinal{background:transparent;border:0;border-top:1px solid var(--line);
border-radius:0;padding:28px 0;box-shadow:none}
#connect h3,#compass h3,#care h3,#insights h3,#longitudinal h3{font-size:clamp(22px,2.3vw,28px)}
/* the audience-page section labels match the homepage's part labels */
.seclabel{font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400}
.sec-head:has(.seclabel){margin-bottom:22px}
/* page heroes pick up the homepage's rhythm */
.hero-solo{gap:18px;max-width:700px}
.crumb{color:var(--lavender-mid);font-size:11.5px;letter-spacing:.18em}
.hero-solo .lead{font-size:17.5px;max-width:58ch}
.hero-solo .cta-row{margin-top:8px}
/* visual boxes lose their fill, keeping only a hairline frame */
.visualbox{background:transparent;border:1px solid var(--line-soft);padding:26px}
.casecard,.evcard,.stubcard{background:var(--surface-2)}
/* journeys and four-ups follow the same flat system */
.journey{gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.journey li{background:var(--surface-2);border:0;border-radius:0;padding:22px}
.journey b{font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;font-size:19px;letter-spacing:-.4px}
.four{gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.four > .card{background:var(--surface-2);border:0;border-radius:0;box-shadow:none;padding:22px}
.four h4{font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;font-size:18px;letter-spacing:-.3px}
.trust{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line-soft);
border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.tcard{background:var(--surface-2);padding:14px 12px;font-size:13px;color:var(--text);text-align:center}
/* module rows align to the top so the column heights stop opening gaps */
#connect,#compass,#care,#insights,#longitudinal{align-items:start}
.prodrow{align-items:start}
@media (max-width:820px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* anchored landings clear the fixed nav instead of hiding under it */
html{scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* outcomes travel back from every pathway, continuously */
.netvis .net-collect path{stroke-width:1.1;opacity:.34}
.netvis .spark.back{fill:var(--green);opacity:.9}
.netvis .net-loop{stroke-width:1.8;opacity:.9}
.netvis .net-outbox{fill:rgba(197,252,207,.08)}
.dropall{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;margin-bottom:8px;
border-bottom:1px solid var(--line-soft);color:var(--green);font-weight:600;font-size:14.5px;text-decoration:none}
.dropall span{font-size:12.5px;font-weight:400;color:var(--muted)}
.dropall:hover{text-decoration:none;color:var(--green)}
/* ══ Anchored sections read as arrivals, not as mid-page drops ═════════════ */
#products,#integrations,#trust,#publications,#cases,#outcomes,#roi,
#about,#leadership,#partners,#careers,#contact,#insights,#guides,#webinars,#news,#faqs,#paths{
scroll-margin-top:104px;position:relative}
#products::before,#integrations::before,#trust::before,#publications::before,#cases::before,
#outcomes::before,#roi::before,#paths::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,var(--green),transparent 60%);opacity:.5}
#products > .wrap > .sec-head,#integrations > .wrap > .sec-head,#trust > .wrap > .sec-head,
#publications > .wrap > .sec-head,#cases > .wrap > .sec-head,#outcomes > .wrap > .sec-head,
#roi > .wrap > .sec-head,#paths > .wrap > .sec-head{padding-top:6px}
/* ══ Audience pages: hero diagram, banded rhythm ═════════════════════════════ */
.pagevis{margin:0;display:flex;flex-direction:column;gap:12px}
.pagevis figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.minivis{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface-2)}
/* the little employer dashboard */
.mv-row{display:grid;grid-template-columns:130px minmax(0,1fr) 42px;gap:12px;align-items:center;
padding:9px 0;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--text)}
.mv-row:first-child{border-top:0}
.mv-row i{display:block;height:6px;border-radius:999px;background:var(--tint);position:relative;overflow:hidden}
.mv-row i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,50%);border-radius:999px;background:var(--lavender-mid)}
.mv-row b{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-size:13px}
.mv-rail{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.mv-rail span{font-size:11.5px;color:var(--muted);padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
/* the clinician before / during / between */
.mv-cols{display:grid;gap:10px}
.mv-cols > div{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line)}
.mv-cols > div.on{background:linear-gradient(150deg,#2F28F2 0%,#241DBE 100%);border-color:transparent}
.mv-cols b{display:block;font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;font-size:17px;color:var(--ink);margin-top:4px}
.mv-cols p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.mv-cols > div.on p,.mv-cols > div.on .mv-tag{color:rgba(255,255,255,.76)}
.mv-tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.minivis .pyramid{gap:8px}
.minivis .pytier{padding:14px 16px}
.minivis .pytier span{font-size:12.5px;min-width:0}
.minivis .rail{grid-template-columns:1fr 1fr;gap:8px}
.minivis .railstep{padding:14px 16px}
.minivis .railstep + .railstep::before{display:none}
.minivis .geo{gap:12px}
.minivis .geohub{padding:16px 20px}
.minivis .georing span{font-size:12px;padding:6px 11px}
.minivis .phone-in{width:100%;max-width:300px}
/* challenge grids size themselves, so no dead cells */
.gapsteps.auto{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gapsteps.auto .gapstep{padding:20px 22px;gap:6px}
.gapsteps.auto b{font-size:15.5px;font-family:"Source Sans 3",sans-serif;font-weight:500;letter-spacing:0}
/* the solution beat sits on the indigo band */
.band .ticks .tick,.band .tick{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.16)}
.band .tick svg{color:var(--green)}
.band .two{gap:0 40px}
.steps3.onband li{border-top-color:rgba(255,255,255,.28)}
.steps3.onband li:first-child{border-top-color:var(--green)}
.steps3.onband b{color:#fff}
.steps3.onband p{color:rgba(255,255,255,.8)}
.steps3.onband .s3-n{color:rgba(255,255,255,.6)}
.band .splithead > *:last-child{padding-top:0}
.notecard{margin-top:26px;padding:22px 24px;border-radius:var(--r-lg);background:var(--surface-2);
border:1px solid var(--line);border-left:3px solid var(--green)}
@media (max-width:1040px){
.pagevis{order:2}
.minivis .rail{grid-template-columns:1fr}
}
/* flex instead of grid: the last row stretches, so there is never a dead cell */
.gapsteps.auto{display:flex;flex-wrap:wrap}
.gapsteps.auto .gapstep{flex:1 1 220px;min-width:0}
/* every pathway returns on its own route; the platform link runs both ways */
.netvis .net-collect path{fill:none;stroke:var(--green);stroke-width:1.1;opacity:.4}
.netvis .net-loop.two-way{stroke:var(--green);stroke-width:1.6;opacity:.9;stroke-dasharray:none}
.netvis .net-loop.two-way.back{stroke:var(--lavender);opacity:.75}
.netvis .spark.down{fill:var(--lavender)}
.netvis .net-outbox{fill:rgba(197,252,207,.1);stroke:var(--green);stroke-width:1.4}
/* ---------------------------------------------------------------- ROI CALC */
.calc{padding:26px 26px 24px;display:flex;flex-direction:column;gap:20px}
.calc-ask h3{font-size:22px;letter-spacing:-.01em;margin:0}
.calc-inputs{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:26px;align-items:end}
.calc-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.calc-field label{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600}
.calc-field input[type=number]{width:100%;height:46px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:600 20px/1 "Source Sans 3",sans-serif;-moz-appearance:textfield}
.calc-field input[type=number]::-webkit-outer-spin-button,.calc-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-field input[type=number]:focus{outline:none;border-color:var(--lavender-mid);box-shadow:0 0 0 3px rgba(117,112,246,.22)}
.calc-money{position:relative;display:flex;align-items:center}
.calc-money > span{position:absolute;left:14px;font:600 20px/1 "Source Sans 3",sans-serif;color:var(--muted);pointer-events:none}
.calc-money input{padding-left:30px !important}
.calc-slider{display:flex;flex-direction:column;gap:9px;min-width:0;padding-bottom:4px}
.calc-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.calc-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--lavender-mid) var(--fill,10%),var(--line) var(--fill,10%));cursor:pointer}
.calc-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--green);border:0;box-shadow:0 0 0 4px rgba(197,252,207,.16);cursor:pointer}
.calc-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--green);border:0;cursor:pointer}
.calc-slider input[type=range]:focus-visible{outline:2px solid var(--lavender);outline-offset:6px}
.calc-out{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line);padding-top:22px}
.calc-heads{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.calc-heads .bignum{font-size:clamp(34px,4.4vw,52px);line-height:1;letter-spacing:-.03em;color:var(--green);font-weight:600}
.calc-heads .bignum i{font-style:normal;font-size:.36em;letter-spacing:0;color:var(--muted);font-weight:500}
.calc-heads > div:last-child .bignum{color:var(--lavender)}
.calc-basis{font-size:15px;color:var(--text);margin:0}
.calc-tabs{display:flex;flex-wrap:wrap;gap:8px}
.calc-tab{height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text);font:600 13.5px/1 "Source Sans 3",sans-serif;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.calc-tab:hover{color:var(--ink);border-color:var(--lavender-mid)}
.calc-tab[aria-expanded="true"]{background:var(--tint-soft);border-color:var(--lavender-mid);color:var(--ink)}
.calc-panel{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:16px;background:var(--surface-2)}
.calc-panel[hidden]{display:none}
.calc-const{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0}
.calc-const > div{display:flex;flex-direction:column;gap:2px}
.calc-const dt{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.calc-const dd{margin:0;font-size:15px;color:var(--ink);font-weight:600}
.calc-lines{display:flex;flex-direction:column}
.calc-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.calc-line b{display:block;font-size:15.5px;color:var(--ink);font-weight:600}
.calc-line span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.calc-line em{font-style:normal;font-variant-numeric:tabular-nums;font-size:17px;font-weight:600;color:var(--text)}
.calc-line em.neg{color:var(--muted)}
.calc-line.total{border-top:1px solid var(--line);border-bottom:0;padding-top:15px}
.calc-line.total em{color:var(--ink)}
.calc-line.net{border-top:1px solid var(--line);border-bottom:0;padding-top:15px}
.calc-line.net b{font-size:17px}
.calc-line.net em{color:var(--green);font-size:21px}
.calc-lives{font-size:13.5px;color:var(--muted);margin:0}
.calc-lives b{color:var(--text);font-variant-numeric:tabular-nums}
.calc-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px}
.calc-foot .small{max-width:52ch;margin:0}
.calc[data-state="done"] .calc-go,.calc[data-state="done"] > .calc-inputs,.calc[data-state="done"] .calc-ask{display:none}
#calcPanelEdit .calc-inputs{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
@media (max-width:760px){
.calc{padding:20px}
.calc-inputs{grid-template-columns:minmax(0,1fr);gap:18px}
.calc-foot{flex-direction:column;align-items:flex-start}
}
/* --------------------------------------------------------------- THE TEAM */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px;margin-top:22px}
.member{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:14px}
.mhead{display:flex;gap:14px;align-items:center}
.mono{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:600 15px/1 "Source Sans 3",sans-serif;letter-spacing:.02em;color:var(--ground);background:var(--lavender)}
.member:nth-child(2) .mono{background:var(--green)}
.member:nth-child(3) .mono{background:var(--cyan)}
.member:nth-child(4) .mono{background:var(--lavender-pale)}
.member:nth-child(5) .mono{background:var(--green)}
.member:nth-child(6) .mono{background:var(--lavender)}
.mhead h3{font-size:18px;letter-spacing:-.01em;margin:0}
.mrole{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:3px 0 0}
.mbio{font-size:15px;line-height:1.62;color:var(--text);margin:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.member.open .mbio{-webkit-line-clamp:unset;display:block}
.mmore{align-self:flex-start;background:none;border:0;padding:0;color:var(--green);font:600 14px/1 "Source Sans 3",sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mmore::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease}
.member.open .mmore::after{transform:rotate(-135deg) translate(-1px,-1px)}
.mmore:hover{color:var(--ink)}
.contactcard{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.contactcard .stack span:first-child{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600}
.contactcard a{color:var(--green)}
/* ------------------------------------------------- PER-PAGE HERO HUE --
Every top-level section carries its own colour field, the way the
homepage hero changes hue as it steps through its four beats. */
.hero::before{background:radial-gradient(52% 60% at 18% 12%, var(--h1,rgba(47,40,242,0.255)), transparent 72%),radial-gradient(48% 54% at 74% 4%, var(--h2,rgba(117,112,246,0.204)), transparent 70%),radial-gradient(44% 50% at 94% 44%, var(--h3,rgba(153,149,248,0.150)), transparent 72%),radial-gradient(40% 46% at 52% 60%, var(--h4,rgba(201,247,253,0.066)), transparent 74%),radial-gradient(38% 44% at 6% 70%, var(--h5,rgba(197,252,207,0.048)), transparent 76%),url("data:image/svg+xml;utf8,")}
body[data-hue="platform"]{--h1:rgba(47,40,242,0.255);--h2:rgba(117,112,246,0.204);--h3:rgba(153,149,248,0.150);--h4:rgba(201,247,253,0.066);--h5:rgba(197,252,207,0.048);--hue-accent:var(--lavender)}
body[data-hue="trust"]{--h1:rgba(47,40,242,0.180);--h2:rgba(201,247,253,0.156);--h3:rgba(153,149,248,0.132);--h4:rgba(201,247,253,0.090);--h5:rgba(117,112,246,0.090);--hue-accent:var(--cyan)}
body[data-hue="solutions"]{--h1:rgba(117,112,246,0.165);--h2:rgba(197,252,207,0.126);--h3:rgba(201,247,253,0.126);--h4:rgba(197,252,207,0.102);--h5:rgba(47,40,242,0.135);--hue-accent:var(--green)}
body[data-hue="individuals"]{--h1:rgba(117,112,246,0.210);--h2:rgba(197,252,207,0.138);--h3:rgba(201,247,253,0.114);--h4:rgba(197,252,207,0.084);--h5:rgba(153,149,248,0.090);--hue-accent:var(--green)}
body[data-hue="employers"]{--h1:rgba(47,40,242,0.222);--h2:rgba(197,252,207,0.132);--h3:rgba(201,247,253,0.090);--h4:rgba(117,112,246,0.132);--h5:rgba(197,252,207,0.072);--hue-accent:var(--green)}
body[data-hue="providers"]{--h1:rgba(47,40,242,0.156);--h2:rgba(201,247,253,0.174);--h3:rgba(117,112,246,0.150);--h4:rgba(197,252,207,0.072);--h5:rgba(201,247,253,0.084);--hue-accent:var(--cyan)}
body[data-hue="payers"]{--h1:rgba(117,112,246,0.264);--h2:rgba(153,149,248,0.186);--h3:rgba(47,40,242,0.156);--h4:rgba(201,247,253,0.078);--h5:rgba(197,252,207,0.060);--hue-accent:var(--lavender)}
body[data-hue="lifesciences"]{--h1:rgba(47,40,242,0.264);--h2:rgba(213,212,252,0.120);--h3:rgba(117,112,246,0.168);--h4:rgba(153,149,248,0.102);--h5:rgba(201,247,253,0.066);--hue-accent:var(--lavender-pale)}
body[data-hue="government"]{--h1:rgba(153,149,248,0.240);--h2:rgba(47,40,242,0.174);--h3:rgba(201,247,253,0.120);--h4:rgba(197,252,207,0.072);--h5:rgba(117,112,246,0.114);--hue-accent:var(--lavender)}
body[data-hue="evidence"]{--h1:rgba(47,40,242,0.165);--h2:rgba(201,247,253,0.180);--h3:rgba(117,112,246,0.135);--h4:rgba(201,247,253,0.102);--h5:rgba(153,149,248,0.072);--hue-accent:var(--cyan)}
body[data-hue="outcomes"]{--h1:rgba(47,40,242,0.135);--h2:rgba(197,252,207,0.150);--h3:rgba(201,247,253,0.132);--h4:rgba(197,252,207,0.102);--h5:rgba(117,112,246,0.135);--hue-accent:var(--green)}
body[data-hue="company"]{--h1:rgba(117,112,246,0.276);--h2:rgba(153,149,248,0.234);--h3:rgba(213,212,252,0.090);--h4:rgba(47,40,242,0.150);--h5:rgba(117,112,246,0.090);--hue-accent:var(--lavender)}
body[data-hue="resources"]{--h1:rgba(153,149,248,0.246);--h2:rgba(213,212,252,0.144);--h3:rgba(117,112,246,0.150);--h4:rgba(201,247,253,0.078);--h5:rgba(47,40,242,0.120);--hue-accent:var(--lavender-pale)}
.hero .crumb{color:var(--hue-accent,var(--lavender))}
.hero .brandline span{color:var(--hue-accent,var(--green))}
/* one card expanding must not stretch its neighbours */
.team{align-items:start}
.calc[data-state="done"] .calc-out{border-top:0;padding-top:0}
#calcPanelAssume .calc-field{max-width:260px}
/* The outcomes return is one bus per column, not nine crossing curves:
every node sits on its column's spine, both spines feed the Outcomes record. */
.netvis .net-bus path{fill:none;stroke:var(--green);stroke-width:1.2;opacity:.42}
.netvis .net-buslabel{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted);text-anchor:middle;font-family:"Source Sans 3",sans-serif}
.netvis .net-node circle{fill:var(--lavender);stroke:var(--ground);stroke-width:3}
/* ------------------------------------------------ MERGED SUB-SECTIONS ----
A nav item inside a group is a section of that group's page, not a page of
its own. The old page heroes become section openers: same two-column
layout, no second masthead. */
.subhero{position:relative;overflow:hidden;padding-block:86px;border-top:1px solid var(--line-soft);scroll-margin-top:86px}
.subhero::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
background:
radial-gradient(56% 74% at 12% 6%, var(--h1,rgba(47,40,242,.85)), transparent 68%),
radial-gradient(48% 62% at 88% 34%, var(--h3,rgba(153,149,248,.5)), transparent 70%),
radial-gradient(44% 56% at 50% 100%, var(--h2,rgba(117,112,246,.68)), transparent 72%);
}
.subhero::after{content:"";position:absolute;inset:auto 0 0;height:34%;z-index:0;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--ground))}
.subhero > .wrap{position:relative;z-index:2}
.subhero .flock{z-index:1}
.subhero h2{font-size:clamp(30px,3.3vw,44px);letter-spacing:-1.2px}
.subhero .hero-solo{max-width:660px}
.subhero + section{border-top:0}
section[id] {scroll-margin-top:86px}
/* --------------------------------------------- PAGE-WIDE HUE -------------
The hue is not just a masthead wash: it sits behind the whole page, the
way the homepage hero's field follows the scroll. */
html{background:var(--ground)}
body[data-hue]{background:transparent;position:relative}
body[data-hue]::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--ground);
}
body[data-hue]::after{
content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;opacity:.85;
background:
radial-gradient(48% 40% at 8% 4%, var(--h1), transparent 66%),
radial-gradient(44% 38% at 94% 26%, var(--h3), transparent 68%),
radial-gradient(52% 40% at 30% 62%, var(--h2), transparent 70%),
radial-gradient(46% 36% at 82% 92%, var(--h4), transparent 70%);
}
/* the ground-coloured blocks are made translucent so the wash reads through */
body[data-hue] section:not(.band):not(.hero):not(.band-mint):not(.band-sky){background:transparent}
body[data-hue] .band-alt{background:color-mix(in srgb,var(--surface-2) 82%,transparent)}
body[data-hue] .card{background:color-mix(in srgb,var(--surface) 88%,transparent)}
body[data-hue] footer{background:color-mix(in srgb,var(--ground) 86%,transparent);position:relative}
body[data-hue] .hero::after{background:linear-gradient(to bottom,transparent 58%,color-mix(in srgb,var(--ground) 86%,transparent))}
/* the hue's accent carries through every eyebrow marker on the page */
body[data-hue] .eyebrow::before{background:var(--hue-accent,var(--green))}
body[data-hue] .seclabel{color:var(--hue-accent,var(--green))}
/* --------------------------------------------------- WORDMARK IN BLOCKS -- */
.wordmark,.netvis .net-hub.logo{text-transform:uppercase;letter-spacing:.17em;font-weight:700}
.netvis .net-hub.logo{font-size:13.5px;letter-spacing:.15em}
.netvis .wm,.whenvis .wm{letter-spacing:.14em;font-weight:700;text-transform:uppercase}
/* One offset, not two: scroll-padding on the root positions every anchor, and
the per-section scroll-margins that used to add to it are zeroed. */
html{scroll-padding-top:100px}
[id]{scroll-margin-top:0}
#products,#integrations,#trust,#publications,#cases,#outcomes,#roi,#roi-calculator,#paths,
#about,#leadership,#partners,#careers,#contact,#insights,#guides,#webinars,#news,#faqs,
#individuals,#employers,#providers,#payers,#lifesciences,#government,#governance,
#top,#demo,#how,#connect,#compass,#care,#longitudinal,#audiences,#resources{scroll-margin-top:0}
/* --------------------------------------------- LIGHT BANDS ---------------
A page of uninterrupted dark flattens out. One or two sections per page
invert to the Blue+Green palette's light end so the scroll has rhythm. */
.band-mint,.band-sky{position:relative;overflow:hidden;color:#0A0C18;border-block:1px solid rgba(10,12,24,.10)}
.band-mint{background:linear-gradient(152deg,#C5FCCF 0%,#DDFDE4 46%,#EAF6FF 100%)}
.band-sky{background:linear-gradient(152deg,#C9F7FD 0%,#DFF4FE 48%,#E7E6FE 100%)}
.band-mint > .wrap,.band-sky > .wrap{position:relative;z-index:2}
.band-mint h2,.band-mint h3,.band-mint h4,.band-mint b,
.band-sky h2,.band-sky h3,.band-sky h4,.band-sky b{color:#0A0C18}
.band-mint em.serif,.band-sky em.serif{color:#2620C2}
.band-mint p,.band-mint .lead,.band-mint li,.band-mint dd,.band-mint span,
.band-sky p,.band-sky .lead,.band-sky li,.band-sky dd,.band-sky span{color:#2C3054}
.band-mint .small,.band-sky .small{color:#4A4F78}
.band-mint .eyebrow,.band-sky .eyebrow{color:#3B3F6B}
.band-mint .eyebrow::before,.band-sky .eyebrow::before{background:#2F28F2}
.band-mint .mrole,.band-sky .mrole{color:#4A4F78}
.band-mint .card,.band-sky .card{background:rgba(255,255,255,.72);border-color:rgba(10,12,24,.12);box-shadow:0 1px 2px rgba(10,12,24,.06)}
.band-mint .member,.band-sky .member{background:rgba(255,255,255,.72);border-color:rgba(10,12,24,.12)}
.band-mint .mono,.band-sky .mono{background:#2F28F2;color:#fff}
.band-mint .mmore,.band-sky .mmore{color:#2620C2}
.band-mint .mmore:hover,.band-sky .mmore:hover{color:#0A0C18}
.band-mint a:not(.btn),.band-sky a:not(.btn){color:#2620C2}
.band-mint .chip,.band-sky .chip,.band-mint .tick,.band-sky .tick{color:#2C3054;border-color:rgba(10,12,24,.18);background:rgba(255,255,255,.5)}
.band-mint .chip-todo,.band-sky .chip-todo{color:#2620C2;border-color:rgba(38,32,194,.4)}
.band-mint .tick svg,.band-sky .tick svg{color:#2620C2}
.band-mint .btn-primary,.band-sky .btn-primary{background:#0A0C18;color:#fff;border-color:#0A0C18}
.band-mint .btn-primary:hover,.band-sky .btn-primary:hover{background:#2620C2;border-color:#2620C2}
.band-mint .btn-ghost,.band-mint .btn-outline,.band-sky .btn-ghost,.band-sky .btn-outline{color:#0A0C18;border-color:rgba(10,12,24,.3);background:none}
.band-mint .btn-ghost:hover,.band-sky .btn-ghost:hover{border-color:#0A0C18;background:rgba(255,255,255,.5)}
.band-mint .brandline,.band-sky .brandline{color:#0A0C18}
.band-mint .brandline span,.band-sky .brandline span{color:#2620C2}
.band-mint .flock,.band-sky .flock{opacity:.5;filter:saturate(120%) brightness(.55)}
/* the page wash must not tint a light band */
body[data-hue] section.band-mint{background:linear-gradient(152deg,#C5FCCF 0%,#DDFDE4 46%,#EAF6FF 100%)}
body[data-hue] section.band-sky{background:linear-gradient(152deg,#C9F7FD 0%,#DFF4FE 48%,#E7E6FE 100%)}
body[data-hue] .band-mint .card,body[data-hue] .band-sky .card{background:rgba(255,255,255,.72)}
/* the section that follows a light band gets its own top edge back */
.band-mint + section,.band-sky + section{border-top:0}
/* components that were written for the dark ground, re-stated for light bands */
.band-mint .study .t,.band-sky .study .t{color:#0A0C18}
.band-mint .study .yr,.band-sky .study .yr{color:#2620C2}
.band-mint .study .j,.band-sky .study .j{color:#4A4F78}
.band-mint .study,.band-sky .study{border-color:rgba(10,12,24,.12)}
.band-mint .prod .q,.band-sky .prod .q{color:#2620C2}
.band-mint .steps3 li,.band-sky .steps3 li{border-top-color:rgba(10,12,24,.16)}
.band-mint .steps3 li:first-child,.band-sky .steps3 li:first-child{border-top-color:#2F28F2}
.band-mint .s3-n,.band-sky .s3-n{color:#4A4F78}
.band-mint .meter-row,.band-sky .meter-row{border-color:rgba(10,12,24,.12)}
.band-mint .bars i,.band-sky .bars i{background:#2F28F2}
.band-mint hr,.band-sky hr,.band-mint .hair,.band-sky .hair{border-color:rgba(10,12,24,.14)}
.band-mint .q,.band-sky .q{color:#2620C2}
.band-mint .prod,.band-sky .prod,.band-mint .prodrow,.band-sky .prodrow{background:rgba(255,255,255,.66);border-color:rgba(38,32,194,.22);box-shadow:none}
.band-mint .prodrow,.band-sky .prodrow{border-top-color:rgba(10,12,24,.14)}
.band-mint .prod .role,.band-sky .prod .role,.band-mint .prodrow .role,.band-sky .prodrow .role{color:#2620C2}
.band-mint .chip-soft,.band-sky .chip-soft{background:rgba(47,40,242,.10);border-color:rgba(38,32,194,.24);color:#2620C2}
/* title and citation are separate lines, not one run-on */
.study .t,.study .j{display:block}
.study .j{margin-top:3px}
/* --------------------------------------------------- COMPANY LINEAGE -----
Four spans of experience running in parallel, collected into one company.
A span chart, deliberately not another node graph. */
.lineage{width:100%;height:auto;display:block;overflow:visible}
.lineage .lg-grid path{stroke:var(--line-soft);stroke-width:1;fill:none;opacity:.6}
.lineage .lg-bar{stroke-width:9;stroke-linecap:round;fill:none;opacity:.92}
.lineage .lg-cap{opacity:1}
.lineage .lg-lab{font-family:"Source Sans 3",sans-serif;font-size:12.5px;font-weight:600;fill:var(--text);letter-spacing:.01em}
.lineage .lg-brace{fill:none;stroke:var(--lavender);stroke-width:1.1;opacity:.45}
.lineage .lg-name{font-family:"Source Sans 3",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.15em;fill:#fff;text-anchor:middle}
.lineage .lg-sub{font-family:"Source Sans 3",sans-serif;font-size:11px;fill:rgba(255,255,255,.72);text-anchor:middle}
.lineage .lg-axisline{stroke:var(--line);stroke-width:1;fill:none}
.lineage .lg-axis{font-family:"Source Sans 3",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}
.lineage .lg-axis.end{text-anchor:end}
.lineage .lg-spark{opacity:.95}
@media (prefers-reduced-motion:reduce){.lineage animateMotion{display:none}}
/* ------------------------------------------------------------- WORDMARK --
The nav and footer carry the real MindStreet lockup, not set type. */
.brand,.brandtoggle{letter-spacing:0;font-size:0}
.brand img,.brandtoggle img{height:17px;width:auto;display:block}
footer .brand img{height:21px}
.brandtoggle{gap:7px}
@media (max-width:640px){.brand img,.brandtoggle img{height:16px}}
/* components whose fill was a pale tint meant to glow on dark */
.chip-soft{background:rgba(47,40,242,.07);border-color:rgba(47,40,242,.16);color:var(--indigo-ink)}
.mono{color:#fff;background:var(--indigo)}
.member:nth-child(2) .mono{background:var(--green)}
.member:nth-child(3) .mono{background:var(--cyan)}
.member:nth-child(4) .mono{background:var(--lavender-mid)}
.member:nth-child(5) .mono{background:var(--indigo-deep)}
.member:nth-child(6) .mono{background:var(--lavender)}
/* the flock was tuned to glow on a dark ground; on light it reads as soft marks */
.pfly{opacity:var(--o,.42)}
.pfly.static{opacity:var(--o,.42)}
.band .pfly{--o:.9}
.band-mint .pfly,.band-sky .pfly{--o:.5}
/* diagram strokes need a little more weight against white */
.netvis .net-in path,.netvis .net-out path{stroke-width:1.15;opacity:.5}
.netvis .net-bus path{opacity:.55;stroke-width:1.3}
.netvis .net-node circle{stroke:var(--ground)}
.lineage .lg-grid path{opacity:1}
/* ------------------------------------------------------------- THE GAP --
Two stacks of things an organization already pays for, and the unserved
space between them drawn as an actual gap. */
.gapblock{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:52px;align-items:center}
.gaphead{font-size:clamp(27px,3vw,38px);letter-spacing:-1px;margin:0}
.gaphead em.serif{color:var(--indigo-ink)}
.gapcols{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;align-items:stretch}
.gapcol{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);padding:22px 20px}
.gc-head{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.gapcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.gapcol li{padding:12px 16px;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:15px;font-weight:500}
.gapdiv{position:relative;width:86px;display:flex;align-items:center;justify-content:center}
.gapdiv::before,.gapdiv::after{content:"";position:absolute;left:50%;width:1px;background:var(--lavender-mid);opacity:.5}
.gapdiv::before{top:6px;height:calc(50% - 28px)}
.gapdiv::after{bottom:6px;height:calc(50% - 28px)}
.gapdiv span{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--indigo-ink)}
.gapquote{margin:44px auto 0;max-width:30ch;text-align:center;font-family:"Hedvig Letters Serif",Georgia,serif;font-weight:400;font-style:italic;font-size:clamp(23px,2.9vw,33px);line-height:1.28;letter-spacing:-.6px;color:var(--ink)}
@media (max-width:900px){
.gapblock{grid-template-columns:1fr;gap:30px}
.gapcols{grid-template-columns:1fr;gap:0}
.gapdiv{width:auto;height:64px;flex-direction:row}
.gapdiv::before,.gapdiv::after{left:auto;top:50%;height:1px;width:calc(50% - 34px);background:var(--lavender-mid)}
.gapdiv::before{left:6px}
.gapdiv::after{right:6px;bottom:auto}
}
/* ----------------------------------------------------------- STATEMENT --
One sentence that corrects itself: coverage is struck out in favour of
care, and the population it serves keeps changing. */
.statement{padding-block:88px;border-bottom:1px solid var(--line-soft)}
.stmt{font-size:clamp(28px,4vw,52px);line-height:1.24;letter-spacing:-1.3px;max-width:26ch;margin:0}
.stmt em.serif{color:var(--green)}
.cut{position:relative;display:inline-block;color:var(--muted)}
.cut > span{position:relative;z-index:1}
.cut::after{
content:"";position:absolute;left:-.04em;right:-.04em;top:51%;height:.06em;min-height:3px;
background:var(--red);border-radius:2px;transform:scaleX(0);transform-origin:left center;
}
.statement.in .cut::after{transform:scaleX(1);transition:transform .55s cubic-bezier(.65,0,.35,1) .35s}
.statement .stmt em.serif{opacity:0}
.statement.in .stmt em.serif{opacity:1;transition:opacity .5s ease 1s}
.roller{display:inline-grid;vertical-align:baseline;overflow:hidden;padding-block:.1em;margin-block:-.1em;
transition:width .5s cubic-bezier(.65,0,.35,1)}
.roller b{grid-area:1/1;justify-self:start;font-weight:400;color:var(--indigo-ink);white-space:nowrap;
opacity:0;transform:translateY(85%);
transition:opacity .4s ease,transform .5s cubic-bezier(.65,0,.35,1)}
.roller b.on{opacity:1;transform:none}
.roller b.out{opacity:0;transform:translateY(-85%)}
.roller:not(.js) b:first-child{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.roller{transition:none}
.roller b{transition:none}
.statement .cut::after{transform:scaleX(1)}
.statement .stmt em.serif{opacity:1}
}
@media (max-width:760px){.statement{padding-block:60px}.stmt{max-width:none}}
/* Solutions dropdown: audience icons.
.dropmenu a is a column flex; the audience items need an icon column, so this
grid overrides it for .dropgrid only. The narrow menus are left alone. */
.dropgrid a{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:start}
.dropgrid a svg{grid-column:1;grid-row:1;margin-top:1px;color:var(--muted)}
.dropgrid a b{grid-column:2;grid-row:1;font-weight:600}
.dropgrid a span{grid-column:2;grid-row:2}
.dropgrid a:hover svg,.dropgrid a[aria-current="page"] svg{color:var(--green)}
/* Homepage hero eyebrow. The line is long, so it sits smaller and a touch
tighter than the site default to keep it from competing with the headline
below it. Plain tracked caps, matching every other eyebrow on the site;
colour still comes from .hero-copy .eyebrow above. */
.hero-seq .eyebrow{font-size:10px;letter-spacing:.14em}
/* Beat 0 carries the coverage-to-care line that used to be its own section.
The red rule and the "care" reveal were gated on .statement.in; in the hero
they hang off the beat being the active one, so they replay on each pass. */
.hero-seq .htitle .cut::after{transform:scaleX(0)}
.hero-seq .htitle.on .cut::after{transform:scaleX(1);transition:transform .55s cubic-bezier(.65,0,.35,1) .35s}
.hero-seq .htitle .cut{color:var(--muted)}
.hero-seq .htitle[data-i="0"] em.serif{opacity:0}
.hero-seq .htitle[data-i="0"].on em.serif{opacity:1;transition:opacity .5s ease 1s}
@media (prefers-reduced-motion:reduce){
.hero-seq .htitle .cut::after{transform:scaleX(1)}
.hero-seq .htitle[data-i="0"] em.serif{opacity:1}
}
/* Customer logo strip. Grayscale at rest so thirteen brand palettes read as one
band, colour on hover. A static filter, never animated, so it costs nothing
per scroll frame. */
.proof{padding-block:46px}
.proof .prooflead{font-size:17.5px;line-height:1.5;color:var(--text);margin:8px 0 28px;max-width:56ch}
.logostrip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:30px 34px;align-items:center}
.logostrip li{display:flex;align-items:center;justify-content:center;min-height:56px}
.logostrip img{max-width:126px;max-height:54px;width:auto;height:auto;display:block;filter:grayscale(1);opacity:.7;mix-blend-mode:multiply;transition:filter .2s ease,opacity .2s ease}
.logostrip li:hover img{filter:grayscale(0);opacity:1}
.prooffoot{font-size:12.5px;line-height:1.5;color:var(--muted);margin:24px 0 0}
@media (max-width:1040px){.logostrip{grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}}
@media (max-width:640px){.logostrip{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.logostrip img{max-height:42px;max-width:96px}}
/* Contact form. The number input already had a style for the ROI calculator;
these extend the same .field pattern to text, email and textarea. */
.contactform{display:flex;flex-direction:column;gap:14px}
.contactform .field input[type="text"],.contactform .field input[type="email"],.contactform .field input[type="number"],.contactform .field textarea{min-height:46px;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:400 15.5px/1.5 "Source Sans 3",sans-serif;width:100%;box-sizing:border-box}
.contactform .field textarea{min-height:108px;resize:vertical}
.contactform .field input:focus-visible,.contactform .field textarea:focus-visible{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.formfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.formfoot .btn[disabled]{opacity:.5;cursor:not-allowed}
/* Beat 0 only. It is copy with no graphic, so the hero drops to one centred
column while .b0 is set and goes back to two for beats 1 to 4. app.js
toggles the class; it is also in the markup so the first paint is right. */
.hero-seq.b0 .hero-in{grid-template-columns:minmax(0,1fr)}
.hero-seq.b0 .hero-vis-stack{display:none}
.hero-seq.b0 .hero-copy{text-align:center;width:100%;max-width:940px;margin-inline:auto;min-width:0}
.hero-seq.b0 .hero-copy > *{max-width:100%}
.hero-seq.b0 .eyebrow{justify-content:center}
.hero-seq.b0 .titlestack{justify-items:center;min-height:0}
.hero-seq.b0 .htitle{text-align:center;margin-inline:auto}
/* Struck word stays the headline's own ink; only the rule through it is red,
and the correction beside it is red too, like a proof mark. */
.hero-seq .htitle .cut{color:var(--ink)}
.hero-seq .htitle[data-i="0"] em.serif{color:var(--red)}
/* The roller ends line 2 on a hard break, which is what stops a longer word
pushing anything to line 3. The slot itself hugs each word rather than
holding the longest one, so no gap opens beside the shorter words; the
line re-centres as they cycle, and .roller already eases its width. */
.hero-seq.b0 .lead{margin-inline:auto}
.hero-seq.b0 .cta-row{justify-content:center}
/* Customer strip under the CTAs, beat 0 only. One line, running right to left
so logos enter from the right. The track holds the set twice, so translating
it exactly -50% lands on the start of the second copy and the loop is
seamless. Transform only, so it composites and costs nothing per frame. */
.herologos{display:none;width:100%;min-width:0;margin-top:30px}
.hero-seq.b0 .herologos{display:block}
.herologos-lead{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 15px;text-align:center}
.logomarquee{position:relative;width:100%;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logotrack{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:56px;width:max-content;animation:logoscroll 52s linear infinite}
.logotrack li{flex:none;display:flex;align-items:center;justify-content:center;min-height:38px}
.logotrack img{max-height:34px;max-width:112px;width:auto;height:auto;display:block;filter:grayscale(1);opacity:.5;mix-blend-mode:multiply}
.logomarquee:hover .logotrack{animation-play-state:paused}
@keyframes logoscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
.logotrack{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:30px}
.logotrack li[aria-hidden]{display:none}
.logomarquee{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:760px){.logotrack{gap:38px}.logotrack img{max-height:28px;max-width:92px}}
/* The eyebrow is 47 characters; at .14em it needs ~370px and the copy column is
350px at phone width, so it wrapped to two lines. Tracking eases on small
screens to keep it on one. */
@media (max-width:640px){.hero-seq .eyebrow{letter-spacing:.06em}}
/* Each beat now carries its own subhead, so the leads stack the way the titles
do: one grid cell, cross-faded, with a min-height that holds the tallest
group (beat 0's two paragraphs) so the CTA row below does not jump between
beats. Below 1040px the stack collapses to plain show/hide, same as
.titlestack, since a fixed min-height strands whitespace on a phone. */
.hero-copy .leadstack{position:relative;display:grid;align-content:start;min-height:150px}
.hero-copy .hlead{grid-area:1/1;display:grid;gap:14px;opacity:0;pointer-events:none;
transition:opacity .4s ease}
.hero-copy .hlead.on{opacity:1;pointer-events:auto}
.hero-copy .hlead .lead{margin:0}
@media (max-width:1240px){.hero-copy .leadstack{min-height:172px}}
@media (max-width:1040px){
.hero-copy .leadstack{min-height:0;display:block}
.hero-copy .hlead{display:none;opacity:1}
.hero-copy .hlead.on{display:grid}
}
@media (prefers-reduced-motion:reduce){.hero-copy .hlead{transition:none}}
/* The hero grid never collapsed on phones. Two media queries earlier in the
file set .hero-in to one column, but an unconditional .hero-in rule further
down (the 1.06fr / .94fr split) re-declared the columns and won by order at
every width, so beats 1 to 4 were setting their headline in a 164px column.
Beat 0 escaped it only because .hero-seq.b0 .hero-in forces one column.
This puts the collapse back, after the rule that was overriding it. */
@media (max-width:1040px){
.hero-seq .hero-in{grid-template-columns:minmax(0,1fr);gap:26px}
.hero-seq .hero-vis-stack{order:2}
.hero-seq .hero-copy{min-width:0}
}
/* Beat 0 is the opening statement and carries the largest type on the site.
The sequence beats that follow are longer sentences and now each carry their
own subhead, so at 59px they pushed the CTA row below the fold on a 900px
viewport. Stepping them down one size fits them and also separates the
statement from the argument that follows it. */
.hero-seq .wrap.hero-in .htitle:not([data-i="0"]){
font-size:clamp(30px,3.3vw,48px);line-height:1.14;letter-spacing:-1.3px}
/* The stack has to hold the tallest beat so nothing below it moves between
beats. Re-measured after the size step above: 319px at 1440, 344px at 1180. */
.hero-seq .titlestack{min-height:336px}
@media (max-width:1240px){.hero-seq .titlestack{min-height:356px}}
@media (max-width:1040px){.hero-seq .titlestack{min-height:0}}
/* THE GAP GRAPHIC ----------------------------------------------------------
Rebuilt from the deck slide as inline SVG rather than the exported PNG, so
it stays crisp, takes its colour from the tokens, and reads to a screen
reader. Two wall profiles are sampled as paths and used as clip paths; the
seven rows are plain rects behind them, so the fill edge is one continuous
curve while the row divisions stay horizontal. Fills are token colours at
low opacity, deepening downward; all type is ink-weight so it passes
contrast over the deepest tint. */
.gapx{display:block;width:100%;height:auto}
.gapx .gx-l rect{fill:var(--lavender)}
.gapx .gx-r rect{fill:var(--cyan)}
.gapx .gx-badge-l{fill:var(--lavender);fill-opacity:.13}
.gapx .gx-badge-c{fill:var(--green);fill-opacity:.13}
.gapx .gx-badge-r{fill:var(--cyan);fill-opacity:.13}
.gapx .gx-ico{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gapx .gx-ico-l{stroke:var(--indigo-ink)}
.gapx .gx-ico-r{stroke:var(--cyan)}
.gapx .gx-clabel{font-size:13px;font-weight:700;letter-spacing:.06em;text-anchor:middle}
.gapx .gx-clabel-l{fill:var(--indigo-ink)}
.gapx .gx-clabel-r{fill:var(--cyan)}
.gapx .gx-gapword{font-family:"Hedvig Letters Serif",Georgia,serif;font-size:25px;
fill:var(--green);text-anchor:middle}
.gapx .gx-t{font-size:15px;text-anchor:middle}
.gapx .gx-t-l{fill:var(--indigo-ink)}
.gapx .gx-t-c{fill:var(--green)}
.gapx .gx-t-r{fill:var(--cyan-deep)}
@media (max-width:760px){
.gapx .gx-t{font-size:19px}
.gapx .gx-clabel{font-size:17px}
}
/* Coverage / Access / Care / Outcomes, set as a row of terms divided by the
not-equal sign rather than a sentence, because the point is the breakage
between each pair. */
.gapineq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:14px;margin:40px 0 0;font-family:"Hedvig Letters Serif",Georgia,serif;
font-size:clamp(21px,2.5vw,30px);letter-spacing:-.4px;color:var(--ink)}
.gapineq b{font-weight:400;color:var(--red);font-size:.86em}
/* The brand line. Three pills in the pale end of the palette, each with the
verb on the first line and what it acts on beneath it. Type is the
ink-weight partner of each fill, never the fill itself. */
.brandline{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
gap:12px;margin:34px 0 0;padding:0}
.brandline li{flex:0 1 auto;min-width:172px;padding:16px 26px;border-radius:var(--r-xl);
text-align:center;display:grid;gap:3px;border:1px solid transparent}
.brandline b{font-size:19px;font-weight:700;letter-spacing:-.2px}
.brandline span{font-size:14.5px}
.brandline .bl-find{background:var(--green-fill);border-color:color-mix(in srgb,var(--green) 22%,transparent)}
.brandline .bl-find b,.brandline .bl-find span{color:var(--green)}
.brandline .bl-feed{background:var(--cyan-fill);border-color:color-mix(in srgb,var(--cyan) 22%,transparent)}
.brandline .bl-feed b,.brandline .bl-feed span{color:var(--cyan)}
.brandline .bl-foster{background:var(--lavender-pale);border-color:color-mix(in srgb,var(--indigo-ink) 20%,transparent)}
.brandline .bl-foster b,.brandline .bl-foster span{color:var(--indigo-deep)}
.gapfig{margin:40px 0 0;padding:0}
#gap .cta-row{justify-content:center;margin-top:34px}
#gap .gapintro{max-width:72ch;margin-inline:auto;text-align:center}
#gap .gapintro .eyebrow{justify-content:center}
@media (max-width:640px){
.brandline li{min-width:0;flex:1 1 100%}
.gapineq{gap:10px}
}
/* The diagram is 960 units wide and its labels are 15px in that space, so
scaling it to a 350px phone column renders them at about 5px. Below 900px it
keeps a readable width and the figure scrolls sideways instead, which holds
the chasm metaphor together rather than reflowing it into three unrelated
lists. */
@media (max-width:900px){
.gapfig{overflow-x:auto;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;padding-bottom:6px}
.gapfig .gapx{min-width:720px;scroll-snap-align:start}
.gapfig::after{content:"Scroll to see the full picture";display:block;
margin-top:8px;font-size:12px;letter-spacing:.04em;color:var(--muted);
text-align:center}
}