/* Antara Innovations, journey design system (a3).
   Standalone. Used by the hub homepage and the pages it opens into.
   Rule that holds every page together: a dot is a person, a line is the machine. */

:root{
  /* dark is the default */
  --paper:#0B1714; --paper2:#10201C; --card:#12211D;
  --ink:#E4ECE8; --ink2:#AEC2BB; --mute:#86A097;
  --line:rgba(228,236,232,.16); --line2:rgba(228,236,232,.08);
  --acc:#FFB03A; --acc-t:#FFB03A; --acc-soft:rgba(255,176,58,.10);
  --on:#E4ECE8; --onfg:#0B1714;
  --term:#07100D; --termfg:#E4ECE8;
  --fh:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --fb:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'DM Mono',ui-monospace,Menlo,monospace;
  --max:1200px; --gut:clamp(20px,4vw,48px); --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --paper:#E6ECE8; --paper2:#DCE4DF; --card:#F1F5F2;
  --ink:#0F1C19; --ink2:#3F544E; --mute:#5E746D;
  --line:rgba(15,28,25,.17); --line2:rgba(15,28,25,.08);
  --acc:#E8930C; --acc-t:#A86100; --acc-soft:rgba(232,147,12,.12);
  --on:#0F1C19; --onfg:#E6ECE8;
  --term:#0F1C19; --termfg:#E6ECE8;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--fb);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background .5s,color .5s}
::selection{background:var(--acc);color:#0B1714}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* the traveller: the dot in the logo carries across pages */
@view-transition{navigation:auto}
.mark .dot{view-transition-name:antara-dot}
.ft-w .mark .dot{view-transition-name:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
::view-transition-group(antara-dot){animation-duration:.8s;animation-timing-function:cubic-bezier(.65,0,.2,1)}

/* type bits */
.eyebrow{font:500 12px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-t);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor}
.h2{font:500 clamp(30px,4.2vw,56px)/1.04 var(--fh);letter-spacing:-.035em;max-width:17em;text-wrap:balance}
.h2 em,.h1 em{font-style:normal;color:var(--acc-t)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink2);max-width:36em}
.sec{padding:clamp(72px,10vw,132px) 0;position:relative}
.sec-head{display:grid;gap:22px;margin-bottom:clamp(36px,5vw,64px)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:99px;font:600 15px/1 var(--fb);border:1px solid var(--ink);color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.btn.solid{background:var(--on);color:var(--onfg);border-color:var(--on)}
.btn.solid:hover{background:var(--acc);border-color:var(--acc);color:#0B1714}
.btn.ghost:hover{background:var(--on);color:var(--onfg)}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.lnk{font-weight:600;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .2s,color .2s}
.lnk:hover{border-color:var(--acc);color:var(--acc-t)}

/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.hd.on{background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hd .in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:72px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font:600 22px/1 var(--fh);letter-spacing:-.03em}
.brand small{font:500 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);align-self:flex-end;padding-bottom:3px}
.mark{width:26px;height:26px;flex:none;overflow:visible}
.mark .ring{fill:none;stroke:var(--ink);stroke-width:2}
.mark .dot{fill:var(--acc);transform-origin:13px 13px;animation:orbit 9s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.nav a.l{font:500 15px/1 var(--fb);color:var(--ink2);position:relative;padding:6px 0}
.nav a.l::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--acc);transition:right .3s var(--ease)}
.nav a.l:hover,.nav a.l[aria-current]{color:var(--ink)}
.nav a.l:hover::after,.nav a.l[aria-current]::after{right:0}
.nav .btn{padding:11px 18px;font-size:14px}
.tg{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s;flex:none}
.tg:hover{background:var(--paper2)}
.tg svg{width:17px;height:17px}
.tg .moon{display:none}
:root[data-theme="light"] .tg .moon{display:block}
:root[data-theme="light"] .tg .sun{display:none}
.burger{display:none;width:40px;height:40px;background:none;border:1px solid var(--line);border-radius:50%;color:var(--ink);cursor:pointer;margin-left:auto}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;margin:4px auto}

/* hero (shared by home and inner pages) */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:120px 0 72px}
.hero.page{min-height:min(78svh,720px)}
.cv{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 90%,transparent) 0,color-mix(in srgb,var(--paper) 58%,transparent) 40%,transparent 68%),linear-gradient(0deg,var(--paper) 0,transparent 18%)}
.hero .wrap{width:100%}
.hero .eyebrow{margin-bottom:28px}
.h1{font:500 clamp(40px,6.2vw,92px)/.98 var(--fh);letter-spacing:-.04em;max-width:11.5em;text-wrap:balance}
.h1 .l{display:block;overflow:hidden;padding-bottom:.08em}
.h1 .l>span{display:block}
.hero .lede{margin:28px 0 34px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.facts{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;margin-top:52px;padding-top:22px;border-top:1px solid var(--line);max-width:640px}
.facts li{font:500 12px/1.4 var(--fm);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);display:flex;gap:9px;align-items:center}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
.hint{position:absolute;right:var(--gut);bottom:26px;font:400 12px/1.5 var(--fm);color:var(--mute);text-align:right;pointer-events:none}
.hint b{color:var(--acc-t);font-weight:500}

/* doors */
.doors{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card)}
.door{--mx:50%;--my:50%;padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line);position:relative;min-width:0;transition:background .3s;background-image:radial-gradient(360px circle at var(--mx) var(--my),var(--acc-soft),transparent 60%);background-repeat:no-repeat}
.door:last-child{border-right:0}
.door .k{font:500 10.5px/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.door h3{font:500 clamp(28px,3vw,42px)/1 var(--fh);letter-spacing:-.03em;margin-top:10px}
.door p{font-size:15.5px;line-height:1.5;color:var(--ink2)}
.door>div{margin-top:auto;padding-top:20px}
.door .go{margin-top:14px;font:600 14px/1 var(--fb);display:inline-flex;gap:8px;align-items:center}
.door .go i{font-style:normal;transition:transform .25s var(--ease)}
.door:hover .go i{transform:translateX(5px)}
.door:hover h3{color:var(--acc-t)}

/* mini animations: line = --ink, person = --acc */
.mini{width:100%;height:auto;display:block;max-height:100px;overflow:visible}
.mini .rail{stroke:var(--ink);opacity:.35;stroke-width:1.2;fill:none}
.mini .gt{stroke:var(--ink);stroke-width:1.4}
.mini .hd2{fill:var(--acc)}
.mini .pers *{fill:none;stroke:var(--ink);stroke-width:1.4}
.mini .pers .ok{stroke:var(--acc);stroke-width:2}
.mg .dotg{animation:gmove 7s ease-in-out infinite}
@keyframes gmove{0%{transform:translate(8px,52px)}22%{transform:translate(36px,52px)}34%{transform:translate(36px,52px)}56%{transform:translate(108px,52px)}76%{transform:translate(108px,52px)}100%{transform:translate(192px,52px)}}
.mg .pers{animation:gp 7s ease-in-out infinite}
@keyframes gp{0%,52%{opacity:0}60%,78%{opacity:1}90%,100%{opacity:0}}
.mb .ring{fill:none;stroke:var(--ink);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:br 10s ease-in-out infinite;opacity:.5}
.mb .ring:nth-child(2){animation-delay:.5s}.mb .ring:nth-child(3){animation-delay:1s}
@keyframes br{0%,100%{transform:scale(1)}40%{transform:scale(2.5)}}
.mb .core{fill:var(--acc);transform-box:fill-box;transform-origin:center;animation:bc 10s ease-in-out infinite}
@keyframes bc{0%,100%{transform:scale(1)}40%{transform:scale(1.7)}}
.me .ecg,.mw .wr{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:dr 3.6s linear infinite}
.mw .wr{animation-duration:5.2s}
@keyframes dr{0%{stroke-dashoffset:1;opacity:1}72%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.me .pd,.mw .pd{fill:var(--acc);animation:op 3.6s linear infinite}
.mw .pd{animation-duration:5.2s}
@keyframes op{0%{offset-distance:0%;opacity:1}72%{offset-distance:100%;opacity:1}78%,100%{offset-distance:100%;opacity:0}}
.me .base{stroke:var(--ink);opacity:.2;stroke-width:1}

/* awaken */
.why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,96px);align-items:center}
.chart svg{width:100%;height:auto;overflow:visible;display:block}
.chart .gl0{stroke:var(--line);stroke-width:1}
.chart .m{fill:none;stroke:var(--mute);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--m,1))}
.chart .hu{fill:none;stroke:var(--acc);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--h,1))}
.chart .dt{fill:var(--acc);opacity:var(--h,1)}
.chart text{font:500 20px var(--fm);letter-spacing:.04em}
.chart .tm{fill:var(--mute)}.chart .th{fill:var(--acc-t)}

/* evidence */
.res-w{padding:0 clamp(0px,calc((1 - var(--e,1)) * 28px),28px)}
.res{background:var(--paper2);border-block:1px solid var(--line);border-radius:calc((1 - var(--e,1)) * 56px);padding:clamp(64px,8vw,110px) 0}
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-top:clamp(36px,5vw,60px)}
.nums li{padding:28px 22px 6px 22px;border-right:1px solid var(--line)}
.nums li:first-child{padding-left:0}.nums li:last-child{border-right:0}
.nums b{display:flex;align-items:flex-start;height:1em;font:500 clamp(44px,6.2vw,92px)/1 var(--fh);letter-spacing:-.045em;white-space:nowrap}
.odo .dg{display:inline-block;height:1em;overflow:hidden;line-height:1}
.odo .col{display:block;transition:transform 1.9s cubic-bezier(.15,.7,.1,1);transition-delay:var(--dl,0s);transform:translateY(calc(var(--k,0) * -1em))}
.odo .col span{display:block;height:1em;line-height:1}
.odo .fx{font-size:1em;line-height:1}
.nums span.d{display:block;margin-top:22px;font-size:15px;line-height:1.45;color:var(--ink2);max-width:15em}
.nums i{display:block;margin-top:14px;font:500 11px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--mute)}
.more{margin-top:44px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}

/* cta + footer */
.end{padding:clamp(90px,12vw,170px) 0;border-top:1px solid var(--line)}
.end .h2{font-size:clamp(38px,6.6vw,100px);line-height:.98;max-width:11em;margin-bottom:38px}
.end .row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.end .mail{font:500 15px var(--fm);color:var(--ink2);letter-spacing:.02em}
.end .mail a{border-bottom:1px solid var(--line)}
.ft-w{border-top:1px solid var(--line);padding:56px 0 44px;background:var(--paper2)}
.ft-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.ft-g h4{font:500 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.ft-g a{display:block;font-size:15px;margin-bottom:10px;color:var(--ink2)}
.ft-g a.brand{display:flex;margin-bottom:0;color:var(--ink);font-size:22px}
.ft-g a:hover{color:var(--acc-t)}
.ft-g small{display:block;margin-top:14px;color:var(--mute);font-size:13px;max-width:24em;line-height:1.5}

/* ---- Solutions page parts ---- */
.agents{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card)}
.ag{padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--line);transition:background .3s}
.ag:last-child{border-right:0}
.ag:hover{background:var(--paper2)}
.ag .tag{display:flex;justify-content:space-between;align-items:center}
.ag .n{font:500 12px/1 var(--fm);letter-spacing:.1em;color:var(--mute)}
.ag .ro{font:500 11px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);border-radius:99px;color:var(--ink2)}
.ag h3{font:500 clamp(30px,3vw,40px)/1 var(--fh);letter-spacing:-.03em;margin-top:6px}
.ag .verb{font:500 17px/1.35 var(--fb);color:var(--acc-t)}
.ag p{color:var(--ink2);font-size:16px;line-height:1.55}
.ag svg.fig{width:100%;height:auto;margin-top:auto;padding-top:14px}
.ag .go{margin-top:6px;font:600 14px/1 var(--fb);display:inline-flex;gap:8px;align-items:center}
.ag .go i{font-style:normal;transition:transform .25s var(--ease)}
.ag:hover .go i{transform:translateX(5px)}
.fg{stroke:var(--ink);fill:none;stroke-width:1.2}
.fg2{stroke:var(--line);fill:none;stroke-width:1}
.fa{fill:var(--acc)}
.fk{fill:var(--ink)}
.ft{font:500 9px var(--fm);letter-spacing:.08em;fill:var(--mute);text-transform:uppercase}
.sweep{transform-origin:100px 80px;animation:sweep 6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.bl{animation:blip 6s linear infinite;opacity:.3}
@keyframes blip{0%,6%{opacity:1}55%,100%{opacity:.3}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.4);opacity:0}}
.flow{stroke-dasharray:3 5;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-16}}
.mv{animation:mvv 5s linear infinite}
@keyframes mvv{0%{transform:translateX(0);opacity:0}8%{opacity:1}42%{transform:translateX(70px)}52%{transform:translateX(70px)}100%{transform:translateX(170px);opacity:1}}
.tick{animation:tick 5s linear infinite;opacity:0}
@keyframes tick{0%,40%{opacity:0}46%,70%{opacity:1}100%{opacity:0}}

/* travelling light round a border */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.beam{position:relative}
.beam::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0 78%,var(--acc) 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;animation:ang 6s linear infinite;pointer-events:none}
@keyframes ang{to{--ang:360deg}}

.finding{margin-top:22px;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,38px);background:var(--card)}
.finding h3{font:500 clamp(22px,2.4vw,30px)/1.15 var(--fh);letter-spacing:-.02em;margin-bottom:12px}
.finding p{color:var(--ink2);font-size:16px}
.term{font:400 13.5px/1.9 var(--fm);background:var(--term);color:var(--termfg);border-radius:14px;padding:22px 24px;border:1px solid var(--line);min-width:0}
.term .top{display:flex;justify-content:space-between;gap:12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-bottom:10px}
.term .k{opacity:.55;display:inline-block;min-width:96px}
.term .st{display:inline-block;padding:0 8px;border-radius:4px;font-size:12px;letter-spacing:.06em}
.st.ob{background:var(--termfg);color:var(--term)}
.st.un{background:var(--acc);color:#0B1714}
.term .cur{display:inline-block;width:8px;height:1em;background:var(--acc);margin-left:4px;vertical-align:-2px;animation:bk 1s steps(1) infinite}
@keyframes bk{50%{opacity:0}}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{font:500 12px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--ink2);cursor:pointer;transition:all .2s}
.chip:hover,.chip.on{background:var(--on);color:var(--onfg);border-color:var(--on)}
.chipnote{margin-top:12px;font-size:14.5px;color:var(--mute);min-height:2.8em}

/* six gates, pinned scroll story */
.gs{position:relative;height:calc(100svh + 300vh)}
.gs-sticky{position:sticky;top:84px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto minmax(0,1fr);gap:8px clamp(24px,4vw,56px);height:max(560px,calc(100svh - 100px));align-content:center}
.gs-head{grid-column:1 / -1;display:grid;gap:14px}
.gs-head .h2{font-size:clamp(26px,3.4vw,46px);max-width:20em}
.gs-steps{position:relative;display:grid;align-content:center;gap:2px;padding-left:28px}
.gs-steps .rail{position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px;list-style:none}
.gs-steps .rail span{position:absolute;left:0;right:0;top:0;height:calc(var(--p,0) * 100%);background:var(--acc);border-radius:2px;box-shadow:0 0 10px var(--acc)}
.gs-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;padding:11px 0;opacity:.38;transition:opacity .5s var(--ease)}
.gs-step i{font:500 12px/1.9 var(--fm);font-style:normal;color:var(--acc-t);letter-spacing:.08em}
.gs-step h3{font:500 24px/1.1 var(--fh);letter-spacing:-.02em}
.gs-step p{max-height:0;overflow:hidden;opacity:0;font-size:15.5px;line-height:1.5;color:var(--ink2);transition:max-height .6s var(--ease),opacity .5s var(--ease),margin .6s var(--ease)}
.gs-step.act{opacity:1}
.gs-step.act p{max-height:7em;opacity:1;margin-top:8px}
.gs-stage{display:flex;flex-direction:column;gap:14px;min-width:0;justify-content:center}
.gs-stage svg{width:100%;height:auto;overflow:visible;display:block}
.gs-stage .lp{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 6}
.gs-stage .lp.on{stroke:var(--acc);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--lp,0));filter:drop-shadow(0 0 6px var(--acc))}
.gs-stage .rl{stroke:var(--ink);opacity:.3;stroke-width:1.4}
.gs-stage .gl{font:500 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;fill:var(--mute)}
.gt line{stroke:var(--ink);stroke-width:1.6;opacity:.35;transition:all .4s}
.gt text{font:500 11px var(--fm);letter-spacing:.08em;fill:var(--mute);text-anchor:middle;text-transform:uppercase;transition:fill .4s}
.gt .mk{fill:var(--acc);opacity:0;transition:opacity .4s}
.gt.on line{stroke:var(--acc);opacity:1;stroke-width:3}
.gt.on text{fill:var(--acc-t)}
.gt.done line{opacity:.6}
.gt.done .mk{opacity:1}
.gt.done.ok .mk{fill:var(--ink)}
.person{opacity:0;transition:opacity .5s}
.person.show{opacity:1}
.person circle,.person path{fill:none;stroke:var(--ink);stroke-width:1.6}
.person .ok{stroke:var(--acc);stroke-width:2.4}
.pk .core{fill:var(--acc)}
.pk .halo{fill:var(--acc);opacity:.18}
.pk.held .halo{animation:hh 1.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes hh{0%{transform:scale(.8);opacity:.5}100%{transform:scale(2.2);opacity:0}}
.pk .pill rect{fill:var(--card);stroke:var(--line);stroke-width:1}
.pk .pill text{font:500 11px var(--fm);fill:var(--ink);letter-spacing:.02em}
.gs-card{border:1px solid var(--line);border-radius:14px;padding:16px 20px;background:var(--card);min-height:112px}
.gc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 17px/1.2 var(--fh);margin-bottom:6px}
.chipS{font:500 11px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:var(--acc);color:#0B1714}
.chipS.ok{background:var(--ink);color:var(--paper)}
.gs-card p{color:var(--ink2);font-size:15.5px;line-height:1.5}
.gs-card small{display:block;margin-top:8px;color:var(--mute);font:400 11px/1.4 var(--fm);letter-spacing:.04em}

/* compare */
.cmp{border-top:1px solid var(--ink)}
.cmp .row{display:grid;grid-template-columns:.9fr 1.3fr 1fr;gap:clamp(16px,3vw,44px);padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.cmp .row.h{padding:14px 0;font:500 11px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cmp .row.h span:nth-child(2){color:var(--acc-t)}
.cmp .q{font:500 clamp(18px,1.8vw,22px)/1.2 var(--fh);letter-spacing:-.015em}
.cmp .a{font-size:17px;line-height:1.45}
.cmp .t{font-size:15px;line-height:1.45;color:var(--mute)}

/* instruments + frameworks */
.ins{border-top:1px solid var(--ink)}
.ins a{display:grid;grid-template-columns:170px 1fr 1.6fr 60px 64px;gap:clamp(12px,2.4vw,32px);align-items:center;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--ease),background .3s}
.ins a:hover{padding-left:16px;background:var(--acc-soft)}
.ins .for{font:500 11px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ins .nm{font:500 clamp(28px,3.2vw,44px)/1 var(--fh);letter-spacing:-.03em}
.ins .ds{font-size:16px;line-height:1.5;color:var(--ink2)}
.ins .ds b{display:block;font:500 16px/1.3 var(--fb);color:var(--ink);margin-bottom:3px}
.ins .tm{font:500 12px/1.4 var(--fm);letter-spacing:.06em;color:var(--acc-t);text-transform:uppercase}
.gl2{width:56px;height:56px;color:var(--ink);justify-self:end;overflow:visible}
.gl2 .g0{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.45}
.gl2 .needle line{stroke:var(--acc);stroke-width:2.2;stroke-linecap:round}
.gl2 .needle{transform-origin:28px 40px;transform:rotate(-55deg);transition:transform 1.2s var(--ease)}
.ins a:hover .needle{transform:rotate(45deg)}
.gl2 .cd{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke-dashoffset 3s linear}
.ins a:hover .cd{stroke-dashoffset:119.4}
.gl2 text{font:500 14px var(--fm);fill:currentColor;stroke:none}
.gl2 .lab{transition:transform .5s var(--ease)}
.gl2 .lab rect{fill:var(--acc)}.gl2 .lab text{fill:#0B1714}
.ins a:hover .lab{transform:translate(8px,-4px) rotate(-6deg)}
.gl2.wv line{stroke:var(--acc);stroke-width:3;stroke-linecap:round;transition:all .4s}
.ins a:hover .wv line:nth-child(1){animation:wv 1s ease-in-out infinite}
.ins a:hover .wv line:nth-child(2){animation:wv 1s .12s ease-in-out infinite}
.ins a:hover .wv line:nth-child(3){animation:wv 1s .24s ease-in-out infinite}
.ins a:hover .wv line:nth-child(4){animation:wv 1s .36s ease-in-out infinite}
.ins a:hover .wv line:nth-child(5){animation:wv 1s .48s ease-in-out infinite}
@keyframes wv{0%,100%{transform:scaleY(1)}50%{transform:scaleY(8)}}
.gl2.wv line{transform-box:fill-box;transform-origin:center}
.fw{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.fw a{display:inline-flex;gap:10px;align-items:center;padding:12px 18px;border:1px solid var(--line);border-radius:99px;font:500 14px var(--fb);transition:all .2s}
.fw a:hover{background:var(--on);color:var(--onfg);border-color:var(--on)}
.fw a small{font:500 10px var(--fm);letter-spacing:.1em;color:var(--mute)}
.fw a:hover small{color:inherit;opacity:.7}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .h1 .l>span{transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.js .h1.in .l>span{transform:none}
.hand{position:relative;white-space:nowrap}
.hand svg{position:absolute;left:0;bottom:-.06em;width:100%;height:.16em;overflow:visible}
.hand path{fill:none;stroke:var(--acc);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.js .hand path{stroke-dashoffset:1;transition:stroke-dashoffset 1.2s 1.1s var(--ease)}
.js .h1.in .hand path{stroke-dashoffset:0}

/* responsive */
@media (max-width:1020px){
  .doors{grid-template-columns:1fr 1fr}
  .door:nth-child(2n){border-right:0}.door:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .agents{grid-template-columns:1fr}
  .ag{border-right:0;border-bottom:1px solid var(--line)}.ag:last-child{border-bottom:0}
  .nums{grid-template-columns:repeat(2,1fr)}
  .nums li{border-bottom:1px solid var(--line);padding-bottom:26px;padding-left:22px}
  .nums li:nth-child(odd){padding-left:0}.nums li:nth-child(even){border-right:0}
  .finding,.why{grid-template-columns:1fr}
  .ins a{grid-template-columns:1fr auto;row-gap:8px}
  .ins .for,.ins .ds{grid-column:1 / -1}
  .ins .tm{display:none}
  .cmp .row{grid-template-columns:1fr;gap:6px}.cmp .row.h{display:none}
  .cmp .t::before{content:"Most platforms: ";font:500 11px var(--fm);letter-spacing:.08em;text-transform:uppercase}
  .ft-g{grid-template-columns:1fr 1fr}
  .hint{display:none}
  .gs-sticky{grid-template-columns:1fr}
  .gs-steps{display:none}
  .gs{height:calc(560px + 340vh)}
}
@media (max-width:820px){
  .burger{display:block}
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gut) 26px;transform:translateY(-130%);transition:transform .4s var(--ease)}
  .nav.open{transform:none}
  .nav a.l{font:500 22px var(--fh);padding:14px 0;width:100%;border-bottom:1px solid var(--line2)}
  .nav .btn{margin-top:18px}.nav .tg{margin-top:14px}
  .hero::after{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 88%,transparent) 0,color-mix(in srgb,var(--paper) 66%,transparent) 70%,var(--paper) 100%)}
}
@media (max-width:560px){
  .doors{grid-template-columns:1fr}
  .door{border-right:0;border-bottom:1px solid var(--line)}.door:last-child{border-bottom:0}
  .nums{grid-template-columns:1fr}.nums li{border-right:0;padding-left:0!important}
  .ft-g{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .h1 .l>span{opacity:1;transform:none}
  .js .hand path{stroke-dashoffset:0}
  html{scroll-behavior:auto}
  .gs{height:auto}.gs-sticky{position:static;height:auto}
}

/* problem + thread (solutions) */
.prob{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:color-mix(in srgb,var(--ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:20px;overflow:hidden;margin-top:44px}
.pb{background:var(--card);padding:30px 26px 26px;display:flex;flex-direction:column;gap:14px;transition:background .3s}
.pb:hover{background:var(--paper2)}
.pb i{font:500 11px/1 'DM Mono',monospace;letter-spacing:.14em;color:var(--mute);font-style:normal}
.pb q{quotes:none;font:600 clamp(19px,1.7vw,23px)/1.22 'Bricolage Grotesque',sans-serif;color:var(--ink);letter-spacing:-.01em}
.pb p{color:var(--ink2);font-size:15px;line-height:1.55;margin:0}
.pb .to{margin-top:auto;padding-top:10px;font:500 11px/1.4 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.tri a{display:flex;flex-direction:column;gap:10px;padding:28px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:18px;color:var(--ink);text-decoration:none;transition:border-color .3s,transform .3s}
.tri a:hover{border-color:var(--acc);transform:translateY(-3px)}
.tri b{font:600 22px/1.1 'Bricolage Grotesque',sans-serif}
.tri span{color:var(--ink2);font-size:15px;line-height:1.5}
.gs.static .gs-step{opacity:1}
.gs.static .gs-step p{max-height:none;opacity:1;margin-top:8px}
@media(max-width:1020px){.prob{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.prob{grid-template-columns:1fr}.tri{grid-template-columns:1fr}}
@media(max-width:620px){.h1{max-width:none!important}.h1 .l,.h1 .l>span{white-space:normal!important}.h1 .l{overflow:visible}.hand svg{width:100%}}
@media(max-width:620px){.hand{white-space:normal!important;display:inline!important}.h1{font-size:clamp(34px,10.2vw,48px)!important}}

/* ===== journey pages: shared ===== */
.bgsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero.page{position:relative;overflow:hidden}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:center}
.outnote{font:500 12px/1.5 var(--fm);letter-spacing:.05em;color:var(--mute);margin-top:14px;max-width:46ch}
.stores{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px}
.stores img{height:46px;width:auto;display:block}
.pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pillrow span{border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:999px;padding:8px 16px;font:500 13px/1 var(--fm);letter-spacing:.04em;color:var(--ink2)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid color-mix(in srgb,var(--ink) 11%,transparent);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .3s}
.card:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent);transform:translateY(-3px)}
.card .k{font:500 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.card h3{font:600 22px/1.15 var(--fh);margin:0;letter-spacing:-.01em;color:var(--ink)}
.card p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.55}
.card a.go{margin-top:auto;padding-top:10px;color:var(--acc);font:500 13px/1 var(--fm);letter-spacing:.06em;text-decoration:none}
.prose2{max-width:64ch}
.prose2 p{color:var(--ink2);font-size:18px;line-height:1.7;margin:0 0 1.1em}
.big{font:600 clamp(26px,3.2vw,42px)/1.12 var(--fh);letter-spacing:-.02em;color:var(--ink);max-width:22ch}
.big em{font-style:normal;color:var(--acc)}
.quote{font:400 clamp(26px,3vw,38px)/1.2 'Caveat',cursive;color:var(--ink);margin:0;padding:22px 0;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.quote:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.quote .pen{display:block;height:6px;margin-top:6px;width:100%}
.quote .pen path{stroke:var(--acc);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.quote.in .pen path{stroke-dashoffset:0}

/* ===== Wellness: breath ===== */
.hero.well{min-height:min(92vh,820px);display:flex;align-items:center}
.br{position:absolute;right:max(3vw,16px);top:50%;width:min(48vw,600px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.br svg{width:100%;height:100%;overflow:visible}
.br .ring{fill:none;stroke:var(--acc);stroke-width:1.2;transform-origin:center;transform-box:fill-box;animation:brth 10s ease-in-out infinite}
.br .ring:nth-child(2){animation-delay:.28s;stroke-opacity:.7}
.br .ring:nth-child(3){animation-delay:.56s;stroke-opacity:.45}
.br .ring:nth-child(4){animation-delay:.84s;stroke-opacity:.28}
.br .core{fill:var(--acc);transform-origin:center;transform-box:fill-box;animation:brthd 10s ease-in-out infinite}
@keyframes brth{0%,100%{transform:scale(.55)}40%{transform:scale(1)}}
@keyframes brthd{0%,100%{transform:scale(.8)}40%{transform:scale(1.25)}}
.br .say{position:absolute;inset:0;display:grid;place-items:center;font:500 13px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.br .say span{grid-area:1/1;opacity:0;animation:sayin 10s infinite}
.br .say span+span{animation-name:sayout}
@keyframes sayin{0%{opacity:0}6%,34%{opacity:1}42%,100%{opacity:0}}
@keyframes sayout{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.br .say{transform:translateY(calc(min(12vw,150px)))}
.sway path{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:1;animation:sway 11s ease-in-out infinite alternate}
.sway path:nth-child(2n){animation-duration:14s;animation-delay:-3s}
.sway path:nth-child(3n){animation-duration:9s;animation-delay:-6s}
@keyframes sway{from{transform:translateY(-10px)}to{transform:translateY(10px)}}
.phone{position:relative;width:min(300px,70%);margin:0 auto;aspect-ratio:9/17;border:1.5px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:36px;background:var(--card);overflow:hidden;padding:46px 18px 18px}
.phone .nt{height:46px;border-radius:12px;background:color-mix(in srgb,var(--ink) 8%,transparent);margin-bottom:10px;transform:translateY(-30px);opacity:0;animation:ntin 8s infinite}
.phone .nt:nth-child(2){animation-delay:.4s}.phone .nt:nth-child(3){animation-delay:.8s}.phone .nt:nth-child(4){animation-delay:1.2s}
@keyframes ntin{0%{opacity:0;transform:translateY(-30px)}8%,55%{opacity:1;transform:none}70%,100%{opacity:0;transform:none}}
.phone .bre{position:absolute;left:50%;bottom:44px;width:70px;height:70px;margin-left:-35px;border-radius:50%;border:1.5px solid var(--acc);opacity:0;animation:bre 8s infinite}
.phone .bre::after{content:"";position:absolute;inset:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--acc)}
@keyframes bre{0%,58%{opacity:0;transform:scale(.6)}72%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(1.6)}}

/* ===== Pulse: heartbeat ===== */
.hero.pul{min-height:min(88vh,780px)}
.ecg{position:absolute;left:0;right:0;bottom:6%;height:26%;pointer-events:none}
.ecg svg{width:100%;height:100%;overflow:visible}
.ecg .base{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:1.2}
.ecg .live{fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.16 3;animation:ecgrun 5.6s linear infinite}
@keyframes ecgrun{from{stroke-dashoffset:.16}to{stroke-dashoffset:-1.05}}
.ecg .pen{fill:var(--acc);offset-path:path("M0 100 L140 100 L160 100 L176 70 L192 128 L212 20 L232 140 L250 100 L300 100 L330 92 L360 100 L560 100 L580 100 L596 70 L612 128 L632 20 L652 140 L670 100 L720 100 L750 92 L780 100 L980 100 L1000 100 L1016 70 L1032 128 L1052 20 L1072 140 L1090 100 L1140 100 L1170 92 L1200 100");offset-distance:0%;animation:ecgpen 5.6s linear infinite}
@keyframes ecgpen{0%{offset-distance:0%;opacity:1}95%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
.day{position:relative;margin-top:50px;padding-left:34px;--p:0}
.day::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.day::after{content:"";position:absolute;left:5px;top:6px;width:2px;height:calc((100% - 12px)*var(--p));background:var(--acc)}
.dr{position:relative;display:grid;grid-template-columns:90px 1fr;gap:12px 26px;padding:0 0 38px;opacity:.38;transition:opacity .5s}
.dr.on{opacity:1}
.dr::before{content:"";position:absolute;left:-34px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid color-mix(in srgb,var(--ink) 30%,transparent);transition:background .4s,border-color .4s}
.dr.on::before{background:var(--acc);border-color:var(--acc);animation:beat 1.4s ease-out 1}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
.dr time{font:500 14px/1.6 var(--fm);color:var(--acc);letter-spacing:.06em}
.dr h3{font:600 22px/1.2 var(--fh);margin:0 0 6px;color:var(--ink);letter-spacing:-.01em}
.dr p{margin:0;color:var(--ink2);max-width:58ch}
.stepn{counter-reset:s}
.stepn .card::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:500 12px/1 var(--fm);color:var(--acc);letter-spacing:.14em}

/* ===== About: handwriting ===== */
.ph{position:relative;aspect-ratio:4/5;max-width:420px;margin-left:auto}
.ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:200px 200px 24px 24px;display:block;filter:saturate(.9)}
.ph svg{position:absolute;inset:-5%;width:110%;height:110%;overflow:visible;pointer-events:none}
.ph svg path{fill:none;stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s var(--ease) .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:color-mix(in srgb,var(--ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:18px;overflow:hidden;margin-top:48px}
.trio div{background:var(--card);padding:26px}
.trio b{display:block;font:500 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.trio span{font:600 20px/1.25 var(--fh);color:var(--ink)}
.writ{margin-top:36px;display:grid;gap:8px}
.writ p{position:relative;margin:0;font:400 clamp(30px,4vw,52px)/1.15 'Caveat',cursive;color:var(--ink);clip-path:inset(0 100% 0 0);transition:clip-path 1.8s steps(34,end)}
.writ.in p{clip-path:inset(0 0 0 0)}
.writ p:nth-child(2){transition-delay:1.5s}.writ p:nth-child(3){transition-delay:3s}
.works{display:grid;gap:0;margin-top:44px;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.wk{display:grid;grid-template-columns:200px 1fr auto;gap:12px 36px;align-items:baseline;padding:30px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);text-decoration:none;color:var(--ink);transition:padding .4s var(--ease)}
.wk:hover{padding-left:14px}
.wk .t{font:500 12px/1.5 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.wk h3{font:600 clamp(22px,2.4vw,30px)/1.15 var(--fh);margin:0 0 8px;letter-spacing:-.01em}
.wk p{margin:0;color:var(--ink2);font-size:16px;max-width:60ch}
.wk .go{font:500 13px/1 var(--fm);color:var(--acc);white-space:nowrap}

/* ===== Book ===== */
.cover{position:relative;max-width:380px;margin-left:auto;perspective:1200px}
.cover img{width:100%;display:block;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transform:rotateY(-14deg) rotateX(3deg);transition:transform .8s var(--ease)}
.cover:hover img{transform:rotateY(-3deg) rotateX(0)}
.aware{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
.aw{padding:26px 20px;border-top:2px solid color-mix(in srgb,var(--ink) 14%,transparent);position:relative}
.aw::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--acc);transition:width 1s var(--ease)}
.aw.in::before{width:100%}
.aw b{display:block;font:700 clamp(56px,6vw,84px)/1 var(--fh);color:var(--acc);letter-spacing:-.04em;opacity:.25;transition:opacity .8s}
.aw.in b{opacity:1}
.aw span{display:block;margin-top:10px;font:500 17px/1.3 var(--fh);color:var(--ink)}
.aw:nth-child(2)::before,.aw:nth-child(2) b{transition-delay:.18s}.aw:nth-child(3)::before,.aw:nth-child(3) b{transition-delay:.36s}.aw:nth-child(4)::before,.aw:nth-child(4) b{transition-delay:.54s}.aw:nth-child(5)::before,.aw:nth-child(5) b{transition-delay:.72s}

/* ===== Newsletter ===== */
.mani{font:600 clamp(34px,5.2vw,72px)/1.05 var(--fh);letter-spacing:-.03em;max-width:16ch;color:var(--ink)}
.mani em{font-style:normal;color:var(--acc)}
.num{font:500 12px/1 var(--fm);letter-spacing:.14em;color:var(--acc)}

/* ===== Contact ===== */
.fm{display:grid;gap:18px;max-width:640px}
.fm label{display:grid;gap:8px;font:500 12px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.fm input,.fm select,.fm textarea{font:400 17px/1.4 var(--fb);color:var(--ink);background:var(--card);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:12px;padding:14px 16px;width:100%;transition:border-color .25s,box-shadow .25s}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.fm textarea{min-height:150px;resize:vertical}
.fm .hp{position:absolute;left:-9999px;opacity:0}
.fm .ct-msg{display:none;padding:14px 16px;border-radius:12px;font-size:15px}
.fm .ct-msg.ok{display:block;background:color-mix(in srgb,#5fd08a 16%,transparent);color:var(--ink)}
.fm .ct-msg.err{display:block;background:color-mix(in srgb,#ff7a6b 16%,transparent);color:var(--ink)}
.fm .ct-msg a{color:var(--acc)}
.fm button{justify-self:start;cursor:pointer;font:inherit}

/* ===== Use cases ===== */
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:color-mix(in srgb,var(--ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:18px;overflow:hidden;margin-top:44px}
.stats4 div{background:var(--card);padding:28px 24px}
.stats4 b{display:block;font:600 clamp(32px,4vw,52px)/1 var(--fh);color:var(--acc);letter-spacing:-.03em}
.stats4 span{display:block;margin-top:10px;color:var(--ink2);font-size:15px}
.mx{width:100%;border-collapse:collapse;margin-top:36px;font-size:15px}
.mx th,.mx td{padding:14px 12px;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);vertical-align:top}
.mx th{font:500 11px/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mx td b{display:block;font:600 17px/1.2 var(--fh);color:var(--ink)}
.mx td small{color:var(--mute)}
.mx .t{display:inline-block;margin:2px 4px 2px 0;border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:999px;padding:4px 11px;font:500 12px/1 var(--fm);color:var(--acc);text-decoration:none;white-space:nowrap}
.mx .t:hover{background:var(--acc);color:var(--paper)}
.case{padding:clamp(44px,6vw,80px) 0;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.case .tag{font:500 12px/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.case h3{font:600 clamp(26px,3.2vw,42px)/1.1 var(--fh);letter-spacing:-.02em;margin:0 0 18px;max-width:22ch;color:var(--ink)}
.case .pr{max-width:60ch;color:var(--ink2);font-size:19px;line-height:1.55;margin:0 0 30px}
.case .gr{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,64px)}
.case .cnums{display:grid;gap:22px;align-content:start}
.case .cnums b{display:block;font:600 clamp(32px,3.6vw,48px)/1 var(--fh);color:var(--acc);letter-spacing:-.03em}
.case .cnums span{display:block;color:var(--ink2);font-size:15px;margin-top:6px}
.case h4{font:500 12px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.case ul{margin:0 0 22px;padding-left:18px;color:var(--ink2)}
.case li{margin:0 0 8px;line-height:1.55}
.case p{color:var(--ink2)}
.pat{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.pat div{border-top:2px solid var(--acc);padding-top:16px}
.pat b{display:block;font:600 19px/1.2 var(--fh);color:var(--ink);margin:6px 0}
.pat span{color:var(--ink2);font-size:15px}

/* ===== Legal ===== */
.legalw{max-width:760px;margin:0 auto;padding:clamp(120px,14vw,170px) var(--gut) 80px}
.legalw h1{font:600 clamp(34px,5vw,56px)/1.05 var(--fh);letter-spacing:-.03em;margin:0 0 14px;color:var(--ink)}
.legalw h2{font:600 24px/1.2 var(--fh);margin:40px 0 10px;color:var(--ink)}
.legalw p,.legalw li{color:var(--ink2);font-size:17px;line-height:1.7}
.legalw .n{color:var(--mute);font:500 13px/1.5 var(--fm)}
.legalw a{color:var(--acc)}

@media(max-width:1020px){.two{grid-template-columns:1fr}.cards,.cards.c4{grid-template-columns:repeat(2,1fr)}.aware{grid-template-columns:repeat(2,1fr)}.pat{grid-template-columns:repeat(2,1fr)}.ph,.cover{margin:30px auto 0}.stats4{grid-template-columns:repeat(2,1fr)}.case .gr{grid-template-columns:1fr}.wk{grid-template-columns:1fr}.br{opacity:.35;width:90vw;right:-20vw}.mx{display:block;overflow-x:auto}}
@media(max-width:620px){.cards,.cards.c2,.cards.c4{grid-template-columns:1fr}.trio{grid-template-columns:1fr}.dr{grid-template-columns:1fr}.pat{grid-template-columns:1fr}.stats4{grid-template-columns:1fr}.aware{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.br .ring,.br .core,.sway path,.phone .nt,.phone .bre,.ecg .live,.ecg .pen,.ph svg path{animation:none!important}.ph svg path{stroke-dashoffset:0}.writ p{clip-path:none!important;transition:none}.quote .pen path{stroke-dashoffset:0}.phone .nt{opacity:1;transform:none}.ecg .live{stroke-dasharray:none}.aw b{opacity:1}.aw::before{width:100%}.dr{opacity:1}}
.hero.well .h1{max-width:8.4em!important}
.hero.well .br{right:-6vw;width:min(46vw,620px)}
.hero.well .wrap{position:relative;z-index:2}
.hero.pul{padding-bottom:clamp(220px,26vw,330px)}
.hero.pul .ecg{bottom:3%;height:22%}
@media(max-width:1020px){.hero.well .br{right:-30vw;width:100vw;opacity:.3}}
.hero.well .h1{max-width:8.4em!important}
.hero.well .br{right:-6vw;width:min(46vw,620px)}
.hero.well .wrap{position:relative;z-index:2}
.hero.pul{padding-bottom:clamp(220px,26vw,330px)}
.hero.pul .ecg{bottom:3%;height:22%}
@media(max-width:1020px){.hero.well .br{right:-30vw;width:100vw;opacity:.3}}
.cnt{display:inline!important;margin:0!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important}
.cover{max-width:none;display:flex;justify-content:flex-end}
.cover img{width:auto;max-width:100%;max-height:min(640px,72vh)}
.case h4{margin:26px 0 10px}.case h4:first-child{margin-top:0}
.case .gr p{margin:0 0 6px}
@media(max-width:1020px){.br .say{display:none}}
.gs>.wrap{height:100%}
.trio.t4{grid-template-columns:repeat(4,1fr)}
.trio.t4 span{font-size:17px;line-height:1.3}
@media(max-width:980px){.trio.t4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.trio.t4{grid-template-columns:1fr}}