/* iDefender home, light theme. Type scale and spacing measured at 1920px wide
   (H1 110, H2 64, section titles 28/500, list items 72, body 18) and scaled with vw below that. */
@property --g1{syntax:'<color>';inherits:true;initial-value:#bfe3ff}
@property --g2{syntax:'<color>';inherits:true;initial-value:#fff3b0}
@property --g3{syntax:'<color>';inherits:true;initial-value:#d6f5c8}

:root{
  --bg:#fff;--card:#fff;--glass:rgba(255,255,255,.86);
  --t-green:#eef8f1;--t-blue:#eef5ff;--t-sky:#f4f8ff;--t-lav:#f2edff;--t-sand:#f7f2e6;--t-tile:#d8e9fc;
  --ink:#000;--mute:#5e5e5e;--grey:#c9c9c9;--line:#e6e6e6;--soft:#f5f6f8;
  --brand:#1a8fd0;--brand-ink:#0d6fa8;--cyan:#29a8e0;
  --gut:clamp(calc(16*var(--u)),4.69vw,calc(90*var(--u)));
  --fg:#000;--fg-2:#5e5e5e;
}
body{background:var(--bg);color:var(--ink);transition:background .4s,color .4s}
main{overflow:clip}
h1,h2,h3{letter-spacing:-.01em}

/* ---------- nav + menus, light ---------- */
.nav{background:rgba(255,255,255,.94);border-bottom:1px solid transparent}
.nav.scrolled{border-color:var(--line)}
.nav-links,.nav-cta{color:#000}
.nav-links>a:hover,.drop:hover>a{color:#000}
.nav-cta .call{text-decoration-color:rgba(0,0,0,.3)}
.nav-cta .call:hover{color:#000}
.drop-panel{background:#fff;border-color:var(--line);box-shadow:0 calc(20*var(--u)) calc(50*var(--u)) rgba(0,0,0,.12)}
.drop-panel a:hover{background:var(--soft);color:#000}
.burger span{background:#000}
.mmenu{background:#fff;color:#000}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink)}
.btn-black{background:#000;color:#fff;height:calc(48*var(--u));padding:0 calc(30*var(--u));font:400 calc(16*var(--u))/1 var(--text)}
.btn-black:hover{background:#2b2b2b}
.btn-hero{height:calc(54*var(--u));padding:0 calc(36*var(--u))}
.lnk{font-size:calc(16*var(--u));text-decoration:underline;text-underline-offset:calc(4*var(--u));margin-left:calc(18*var(--u))}

/* ---------- shared section scaffolding ---------- */
.sec{position:relative;padding:clamp(calc(72*var(--u)),7.3vw,calc(140*var(--u))) var(--gut)}
.h2{font:400 clamp(calc(32*var(--u)),calc(22*var(--u)) + 2.19vw,calc(64*var(--u)))/1.14 var(--display);letter-spacing:-.01em}
.h2s{font:500 clamp(calc(21*var(--u)),calc(10*var(--u)) + .94vw,calc(28*var(--u)))/1.18 var(--display);letter-spacing:-.01em}
.split{display:grid;grid-template-columns:1fr minmax(0,calc(560*var(--u)));gap:calc(20*var(--u)) calc(48*var(--u));align-items:start;margin-bottom:clamp(calc(40*var(--u)),4.2vw,calc(80*var(--u)))}
.split p{font-size:calc(18*var(--u));line-height:1.3;margin-bottom:calc(22*var(--u));max-width:calc(560*var(--u))}
.split .acts{display:flex;align-items:center;flex-wrap:wrap;gap:calc(8*var(--u))}
.cap{display:block;margin-top:calc(12*var(--u));font:500 calc(18*var(--u))/1.3 var(--display)}
.cap+small{display:block;font-size:calc(16*var(--u));color:var(--mute);max-width:calc(480*var(--u));margin-top:calc(4*var(--u))}

/* ---------- 1. hero ---------- */
.hero{position:relative;padding:calc(var(--nav) + clamp(calc(28*var(--u)),3.4vw,calc(66*var(--u)))) var(--gut) 0;text-align:center;isolation:isolate;overflow:hidden}
.glow{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:--g1 1.6s,--g2 1.6s,--g3 1.6s}
.glow i{position:absolute;border-radius:50%;filter:blur(calc(90*var(--u)))}
.glow i:nth-child(1){width:46vw;height:36vw;left:4%;top:38%;background:var(--g1);animation:breathe 12s ease-in-out infinite alternate}
.glow i:nth-child(2){width:44vw;height:34vw;right:2%;top:30%;background:var(--g2);animation:breathe 15s ease-in-out infinite alternate-reverse}
.glow i:nth-child(3){width:34vw;height:26vw;left:33%;top:62%;background:var(--g3);animation:breathe 11s ease-in-out infinite alternate}
@keyframes breathe{to{transform:translate(3vw,-2vw) scale(1.1)}}
.hero h1{font-size:clamp(calc(42*var(--u)),calc(32*var(--u)) + 4.06vw,calc(110*var(--u)));line-height:1.2;letter-spacing:-.02em;max-width:calc(1500*var(--u));margin:0 auto}
.hero .sub{font-size:clamp(calc(17*var(--u)),calc(12*var(--u)) + .63vw,calc(24*var(--u)));line-height:1.35;margin:clamp(calc(14*var(--u)),1.25vw,calc(24*var(--u))) auto clamp(calc(20*var(--u)),1.8vw,calc(32*var(--u)));max-width:calc(860*var(--u))}
.hero-acts{display:flex;align-items:center;justify-content:center;gap:calc(6*var(--u));flex-wrap:wrap}
.kicker{display:inline-flex;align-items:center;gap:calc(8*var(--u));margin-bottom:clamp(calc(16*var(--u)),1.6vw,calc(28*var(--u)));padding:calc(7*var(--u)) calc(14*var(--u));border-radius:calc(999*var(--u));font-size:calc(14*var(--u));background:var(--card);border:1px solid var(--line)}
.kicker i{width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:#22a35a;box-shadow:0 0 0 calc(4*var(--u)) rgba(34,163,90,.15)}
.trust{display:block;margin-top:calc(18*var(--u));font-size:calc(14*var(--u));color:var(--mute)}

.stage{position:relative;height:clamp(calc(300*var(--u)),30.6vw,calc(640*var(--u)));margin-top:clamp(calc(36*var(--u)),4.6vw,calc(88*var(--u)))}
.win{position:absolute;left:50%;translate:-50% 0;width:clamp(calc(560*var(--u)),30vw + calc(330*var(--u)),calc(940*var(--u)));top:0;height:120%;border-radius:calc(12*var(--u)) calc(12*var(--u)) 0 0;background:#fff;box-shadow:0 calc(30*var(--u)) calc(80*var(--u)) rgba(30,60,90,.18),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;text-align:left}
.chrome{height:clamp(calc(22*var(--u)),1.8vw,calc(34*var(--u)));display:flex;align-items:center;gap:calc(6*var(--u));padding:0 calc(12*var(--u));background:#f3f4f6;border-bottom:1px solid var(--line)}
.chrome i{width:calc(8*var(--u));height:calc(8*var(--u));border-radius:50%;background:#d7d9dd}
.chrome b{margin:0 auto;font:500 clamp(calc(9*var(--u)),.6vw,calc(11*var(--u)))/1 var(--text);color:#6b7280;background:#fff;border:1px solid var(--line);padding:calc(5*var(--u)) calc(34*var(--u));border-radius:calc(6*var(--u))}
.screens{position:absolute;top:clamp(calc(22*var(--u)),1.8vw,calc(34*var(--u)));left:0;right:24%;bottom:0}
.scr{position:absolute;inset:0;opacity:0;filter:blur(calc(16*var(--u))) saturate(1.3);transition:opacity .9s var(--ease),filter 1.1s var(--ease)}
.scr.on{opacity:1;filter:none}
.scr>.mock{position:absolute;inset:0}
.trio{position:absolute;inset:0;display:flex;gap:4%;justify-content:center;align-items:center;background:linear-gradient(135deg,#eaf7ef,#eef4ff)}
.trio .mock{width:21%;aspect-ratio:22/44;border-radius:calc(16*var(--u));box-shadow:0 calc(14*var(--u)) calc(34*var(--u)) rgba(30,60,90,.16)}
.trio .mock:nth-child(2){transform:translateY(-4%) scale(1.06)}
.wash{position:absolute;top:clamp(calc(22*var(--u)),1.8vw,calc(34*var(--u)));left:0;right:24%;bottom:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(115deg,var(--g1),var(--g3) 50%,var(--g2));transition:opacity .55s var(--ease)}
.win.washing .wash{opacity:.92}
.ask{position:absolute;top:clamp(calc(22*var(--u)),1.8vw,calc(34*var(--u)));right:0;bottom:0;width:24%;border-left:1px solid var(--line);background:#fbfbfc;padding:calc(12*var(--u));display:flex;flex-direction:column;gap:calc(10*var(--u));font-size:clamp(calc(10.5*var(--u)),calc(6*var(--u)) + .31vw,calc(12*var(--u)));z-index:2}
.ask-h{display:flex;align-items:center;gap:calc(6*var(--u));font-weight:600}
.ask-h img{width:calc(16*var(--u));height:calc(16*var(--u))}
.bubble{background:#fff;border:1px solid var(--line);border-radius:calc(10*var(--u));padding:calc(10*var(--u));line-height:1.45;min-height:7.5em;box-shadow:0 calc(2*var(--u)) calc(8*var(--u)) rgba(0,0,0,.04)}
.bubble::after,.ptext::after{content:"";display:inline-block;width:calc(1.5*var(--u));height:1em;background:var(--brand);vertical-align:-2px;margin-left:calc(2*var(--u));animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.steps{display:flex;flex-direction:column;gap:calc(6*var(--u));color:#9aa0a6}
.steps span{display:flex;gap:calc(7*var(--u));align-items:center;transition:color .4s}
.steps span::before{content:"";width:.95em;height:.95em;border-radius:50%;border:calc(1.5*var(--u)) solid currentColor;flex:none;transition:.4s}
.steps span.ok{color:#111}
.steps span.ok::before{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 calc(2*var(--u)) #fff}
.ask-in{margin-top:auto;border:1px solid var(--line);border-radius:calc(9*var(--u));padding:calc(9*var(--u));color:#9aa0a6;background:#fff}

/* objects around the window: fade + scale in with depth blur, then drift outward */
.obj,.lc,.rc,.far{position:absolute;opacity:0;transform:scale(.88);filter:blur(calc(10*var(--u)));transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease)}
.obj.on,.lc.on,.rc.on,.far.on{opacity:1;transform:none;filter:none}
.far.on{filter:blur(calc(14*var(--u)));opacity:.75}
.obj.out,.lc.out,.rc.out,.far.out{opacity:0;transform:scale(1.04);filter:blur(calc(10*var(--u)))}
.obj.on,.obj.out,.lc.on,.lc.out,.far.l.on,.far.l.out{animation:driftL 6.5s linear forwards}
.rc.on,.rc.out,.far.r.on,.far.r.out{animation:driftR 6.5s linear forwards}
@keyframes driftL{to{translate:-2.2vw 0}}
@keyframes driftR{to{translate:2.2vw 0}}
.obj{left:7%;top:34%;width:9%;aspect-ratio:1;z-index:3}
.token{width:100%;height:100%;border-radius:32%;display:grid;place-items:center;color:#fff;background:radial-gradient(70% 70% at 30% 25%,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 70%,#000));box-shadow:0 calc(24*var(--u)) calc(40*var(--u)) color-mix(in srgb,var(--c) 35%,transparent),inset 0 -8px calc(18*var(--u)) rgba(0,0,0,.18),inset 0 calc(8*var(--u)) calc(16*var(--u)) rgba(255,255,255,.35);transform:rotate(-12deg)}
.token svg{width:52%;height:52%;stroke-width:1.8}
.lc{left:15.5%;top:12%;width:11.5%;z-index:4}
.rc{left:79%;top:26%;width:11.5%;z-index:4}
.lc .mock,.rc .mock{aspect-ratio:3/3.4;border-radius:calc(12*var(--u));box-shadow:0 calc(18*var(--u)) calc(40*var(--u)) rgba(30,60,90,.18)}
.tag{position:absolute;left:0;top:-24px;background:var(--brand);color:#fff;font:600 calc(10*var(--u))/1 var(--text);padding:calc(5*var(--u)) calc(8*var(--u));border-radius:calc(4*var(--u))}
.far{top:40%;width:5%;aspect-ratio:1;border-radius:30%;background:var(--c)}
.far.l{left:0}.far.r{right:0}

.stats{position:relative;z-index:5;display:flex;justify-content:center;margin:-1px auto 0;width:max-content;max-width:100%;background:var(--glass);backdrop-filter:blur(calc(14*var(--u)));border:1px solid rgba(0,0,0,.06);border-radius:calc(16*var(--u));padding:calc(16*var(--u)) calc(8*var(--u));box-shadow:0 calc(10*var(--u)) calc(30*var(--u)) rgba(0,0,0,.06)}
.stats div{padding:0 calc(34*var(--u));text-align:center}
.stats div+div{border-left:1px solid var(--line)}
.stats b{display:block;font:400 calc(24*var(--u))/1.2 var(--display);color:var(--brand-ink)}
.stats span{font-size:calc(14*var(--u));color:var(--brand-ink)}

/* ---------- mockups (mocks.js) ---------- */
.mock{container-type:inline-size;position:relative;overflow:hidden;background:#fff}
.mk{--w:70;font-size:calc(100cqw / var(--w));width:100%;height:100%;color:#111;font-family:var(--text);line-height:1.35;--soft:#f4f6f8;--ln:#e8eaed;--mu:#6b7280;text-align:left}
.mk.ph{--w:22}.mk.sc{--w:16}.mk.w40{--w:40}
.sol-media .mk,.run-view .mk,.oc .mk{--w:56}.hc .mk{--w:50}.duo .wide .mk{--w:60}.mc .mk:not(.w40){--w:50}
.sol-media .mk.ph,.oc .mk.ph,.duo .mk.ph{--w:22}
.win .mk:not(.ph){--w:62}
.mk .ic{width:1.25em;height:1.25em;flex:none}
.mk .ln{display:block;height:.45em;border-radius:1em;background:#e9ebee;margin:.45em 0}
.mk .pl{font-size:.78em;padding:.25em .7em;border-radius:1em;background:var(--soft);color:var(--mu);white-space:nowrap}
.mk .pl.g{background:#e7f6ec;color:#127a3e}.mk .pl.w{background:#fff3e0;color:#a35a00}.mk .pl.b{background:#e6f2fb;color:#0d6fa8}
.mk .th{display:block;border-radius:.6em;background:linear-gradient(135deg,color-mix(in srgb,var(--b) 30%,#fff),color-mix(in srgb,var(--b) 70%,#fff))}
.mk .th.t1{background:linear-gradient(135deg,#f6e7d8,#e9cdb0)}.mk .th.t2{background:linear-gradient(135deg,#dfe9f3,#bcd2e6)}.mk .th.t3{background:linear-gradient(135deg,#e5f1e2,#c3dfbd)}
.mk .card{background:#fff;border:1px solid var(--ln);border-radius:.8em;padding:.9em}
.mk .card>small{color:var(--mu);font-size:.8em}
.mk .rw{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.55em 0;border-bottom:1px solid var(--ln);font-size:.9em}
.mk .rw:last-child{border-bottom:0}
.mk .rw>span:first-child{display:flex;align-items:center;gap:.5em}
.mk .av{width:1.8em;height:1.8em;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-style:normal;font-size:.75em;font-weight:600}
.mk .bars{display:flex;align-items:flex-end;gap:.4em;height:7em;margin-top:.6em}
.mk .bars span{flex:1;border-radius:.3em .3em 0 0;background:linear-gradient(var(--b),color-mix(in srgb,var(--b) 45%,#fff))}
.mk .spark{width:100%;height:5em;display:block;margin-top:.4em}
.mk .ring{width:4.6em;height:4.6em;display:block;margin:0 auto .4em}
.mk .ring text{font-size:calc(7*var(--u));font-weight:600;fill:#111;font-family:var(--text)}
.mk .d-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9em}
.mk .d-h>b{display:flex;align-items:center;gap:.5em;font:600 1.1em/1 var(--display)}
.mk .d-h>b .ic{color:var(--b)}
.mk .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.7em;margin-bottom:.8em}
.mk .kpis>div{background:var(--soft);border-radius:.8em;padding:.8em}
.mk .kpis small{display:block;color:var(--mu);font-size:.78em}
.mk .kpis b{font:500 1.6em/1.25 var(--display)}
.mk .kpis i{display:block;font-style:normal;font-size:.75em;color:#127a3e}
.mk .pp{padding:1.6em;height:100%;display:flex;flex-direction:column;gap:.8em;background:linear-gradient(180deg,#fff,#fafbfc)}
.mk .pp .d-h{margin:0}
/* site */
.s-nav{display:flex;align-items:center;gap:1.6em;padding:1.2em 1.8em;border-bottom:1px solid var(--ln);font-size:.95em}
.s-nav b{display:flex;align-items:center;gap:.4em;font:600 1.15em/1 var(--display);color:var(--b);margin-right:auto}
.s-nav span{color:var(--mu)}
.s-nav em,.s-hero em{font-style:normal;background:var(--b);color:#fff;border-radius:2em;padding:.55em 1.1em;font-weight:600;font-size:.9em}
.s-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:1.8em;padding:2.2em 1.8em 1.4em;align-items:center}
.s-hero small{color:var(--b);font-weight:600;font-size:.85em}
.s-hero h4{font:500 3.1em/1.02 var(--display);letter-spacing:-.03em;margin:.25em 0 .4em}
.s-hero p{display:flex;align-items:center;gap:1em;margin-top:1.1em}
.s-hero u{font-size:.9em}
.s-art{position:relative;aspect-ratio:1.25;border-radius:1.2em;background:radial-gradient(80% 80% at 30% 20%,var(--b2),var(--b));display:grid;place-items:center;color:#fff;overflow:hidden}
.s-art .big{width:38%;height:38%;stroke-width:1.2;position:relative;z-index:1}
.s-art .o1,.s-art .o2{position:absolute;border-radius:50%;background:rgba(255,255,255,.22)}
.s-art .o1{width:60%;aspect-ratio:1;right:-14%;top:-18%}.s-art .o2{width:34%;aspect-ratio:1;left:-8%;bottom:-10%}
.s-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em;padding:0 1.8em}
.s-row .th{aspect-ratio:1.6;margin-bottom:.5em}
.s-row b{font-size:.95em}
/* store */
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2em;padding:1.6em 1.8em}
.st-grid .th{aspect-ratio:1;margin-bottom:.5em}
.st-grid b{display:block;font-size:.95em}.st-grid small{color:var(--b);font-weight:600}
/* phone */
.mk.ph{padding:1.4em 1.2em;display:flex;flex-direction:column;gap:.7em;background:#fff}
.p-top{display:flex;justify-content:space-between;font-size:.8em;font-weight:600}
.mk.ph h5{font:600 1.5em/1.1 var(--display);margin-top:.6em}
.mk.ph>small{color:var(--mu);font-size:.85em}
.p-hero{display:flex;align-items:center;gap:.6em;padding:1em;border-radius:1em;background:color-mix(in srgb,var(--b) 12%,#fff);color:var(--b)}
.p-hero b{color:#111;font-size:.95em}
.p-it{display:flex;justify-content:space-between;padding:.75em .9em;background:var(--soft);border-radius:.8em;font-size:.92em}
.p-it b{color:var(--b)}
.p-btn{font-style:normal;text-align:center;background:var(--b);color:#fff;border-radius:2em;padding:.8em;font-weight:600;font-size:.92em;margin-top:auto}
.p-tab{display:flex;justify-content:space-around;padding-top:.6em;border-top:1px solid var(--ln)}
.p-tab i{width:1.2em;height:1.2em;border-radius:.4em;background:#dfe2e6}.p-tab i.on{background:var(--b)}
/* dashboard */
.d-wrap{display:grid;grid-template-columns:11em 1fr;height:100%}
.d-main{display:flex;flex-direction:column;min-height:0}
.d-two{flex:1;min-height:0}
.d-two .card{display:flex;flex-direction:column}
.d-two .bars{flex:1;height:auto;min-height:4em}
.mk .pp>.card:last-child{flex:1}
.d-wrap nav{background:var(--soft);border-right:1px solid var(--ln);padding:1.4em 1em;display:flex;flex-direction:column;gap:.35em;font-size:.9em;color:var(--mu)}
.d-wrap nav b{display:flex;align-items:center;gap:.4em;color:#111;font:600 1.05em/1.2 var(--display);margin-bottom:.9em}
.d-wrap nav b .ic{color:var(--b)}
.d-wrap nav span{padding:.5em .7em;border-radius:.6em}
.d-wrap nav span.on{background:#fff;color:#111;box-shadow:0 1px calc(3*var(--u)) rgba(0,0,0,.06)}
.d-main{padding:1.4em;height:100%}
.d-two{display:grid;grid-template-columns:1fr 1.2fr;gap:.8em}
/* pos */
.pos{display:grid;grid-template-columns:1.6fr 1fr;gap:1.2em;padding:1.4em;height:100%;background:var(--soft)}
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em}
.menu span{background:#fff;border:1px solid var(--ln);border-radius:.8em;padding:.7em;display:flex;flex-direction:column;gap:.2em;font-size:.92em;font-weight:500}
.menu .th{aspect-ratio:1.6;margin-bottom:.4em}
.menu small{color:var(--b);font-weight:600}
.bill{background:#fff;border:1px solid var(--ln);border-radius:1em;padding:1em;display:flex;flex-direction:column;gap:.3em}
.bill .tot{margin-top:auto;font:500 2em/1.1 var(--display)}
.bill .tot small{display:block;font:400 .4em var(--text);color:var(--mu)}
/* chat */
.c-wrap{padding:1.4em 2.6em;display:flex;flex-direction:column;gap:.8em;height:100%;background:linear-gradient(#f3f7f4,#eef3ef)}
.c-head{display:flex;align-items:center;gap:.6em;padding-bottom:.9em;border-bottom:1px solid var(--ln)}
.c-head .ic{color:var(--b)}.c-head b{margin-right:auto}
.msg{padding:.8em 1em;border-radius:1em;max-width:72%;font-size:.98em;line-height:1.45}
.msg.u{align-self:flex-end;background:#d9fdd3;border-bottom-right-radius:.3em}
.msg.b{background:#fff;border-bottom-left-radius:.3em;box-shadow:0 1px calc(2*var(--u)) rgba(0,0,0,.06)}
.c-in{margin-top:auto;background:#fff;border-radius:2em;padding:.8em 1.2em;color:var(--mu)}
/* pipeline */
.stages{display:flex;align-items:center;gap:.4em}
.stages span{flex:1;display:flex;align-items:center;justify-content:center;gap:.4em;padding:.9em .4em;border-radius:.8em;background:#fff;border:1px solid var(--ln);font-weight:500;font-size:.92em}
.stages span.ok{border-color:#9bd8b0;color:#127a3e}
.stages span.run{border-color:var(--b);color:var(--b);animation:mkpulse 1.4s ease-in-out infinite}
.stages i{width:1em;height:calc(2*var(--u));background:var(--ln);flex:none}
@keyframes mkpulse{50%{box-shadow:0 0 0 .4em color-mix(in srgb,var(--b) 15%,transparent)}}
.term{background:#0f1720;color:#9fb0c1;border-radius:.8em;padding:1em 1.2em;font:.88em/1.75 ui-monospace,Menlo,monospace;flex:1}
.term b{color:#5fd38d;font-weight:400}
/* tests, audit, gauges */
.suite{display:grid;grid-template-columns:9em 1fr 5em;gap:.8em;align-items:center;font-size:.92em}
.suite i{height:.6em;border-radius:1em;background:#eceef1;overflow:hidden}
.suite i b{display:block;height:100%;background:#22a35a}
.suite small{color:var(--mu);text-align:right}
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;text-align:center}
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;text-align:center;margin:auto 0}
.gauges small{font-size:.85em;color:var(--mu)}
/* crm/inbox/flow/board/design/brief */
.ib{display:flex;gap:.7em;padding:.8em;border-radius:.8em;background:var(--soft);margin-bottom:.6em;font-size:.92em}
.ib b{display:block}.ib span{color:var(--mu)}
.flow{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:.4em}
.flow .node{width:70%;background:#fff;border:1px solid var(--ln);border-radius:.9em;padding:.8em 1em;box-shadow:0 calc(2*var(--u)) calc(6*var(--u)) rgba(0,0,0,.04)}
.flow .node small{display:block;color:var(--b);font-weight:600;font-size:.75em;text-transform:uppercase;letter-spacing:.06em}
.flow>i{width:calc(2*var(--u));height:1.2em;background:var(--ln)}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;flex:1}
.kanban>div{background:var(--soft);border-radius:.9em;padding:.8em;display:flex;flex-direction:column;gap:.5em}
.kanban small{color:var(--mu);font-weight:600}
.kanban span{background:#fff;border:1px solid var(--ln);border-radius:.6em;padding:.7em;font-size:.9em;box-shadow:0 1px calc(2*var(--u)) rgba(0,0,0,.04)}
.kanban>div:last-child span{color:#127a3e}
.dz{position:relative;height:100%;padding:2em;background-color:#f6f7f9;background-image:radial-gradient(#d9dce1 1px,transparent 1px);background-size:1.2em 1.2em}
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em;height:100%}
.frames small{color:var(--mu);font-size:.8em}
.fr{display:block;height:88%;background:#fff;border-radius:.8em;box-shadow:0 calc(4*var(--u)) calc(16*var(--u)) rgba(0,0,0,.08);padding:1em;margin-top:.4em;position:relative;overflow:hidden}
.fr em{position:absolute;left:1em;right:1em;bottom:1em;height:40%;border-radius:.6em;background:linear-gradient(135deg,color-mix(in srgb,var(--b) 25%,#fff),color-mix(in srgb,var(--b) 60%,#fff))}
.fr.f1 em{height:55%}.fr.f2 em{height:20%;background:var(--b)}
.pin{position:absolute;right:2.4em;top:1.4em;display:flex;align-items:center;gap:.4em;background:#111;color:#fff;border-radius:2em;padding:.5em 1em;font-size:.9em}
.okc{color:#22a35a}
.mk .pp>.msg.u{align-self:flex-start;max-width:90%}
.serp{display:flex;align-items:center;gap:.6em;border:1px solid var(--ln);border-radius:2em;padding:.7em 1em;font-size:.95em;background:#fff}
.res{padding:.7em .4em;border-radius:.6em}
.res small{color:#127a3e;font-size:.8em}.res b{display:block;color:#1a4fd6;font-weight:500}
.res.me{background:color-mix(in srgb,var(--b) 8%,#fff);outline:1px solid color-mix(in srgb,var(--b) 30%,#fff)}
/* small cards */
.mk.sc{padding:1.1em;display:flex;flex-direction:column;gap:.25em;background:#fff}
.mk.sc small{color:var(--mu);font-size:.85em}
.mk.sc>b{font:500 2.4em/1.1 var(--display)}
.mk.sc>b.t{font-size:1.2em;margin-top:.4em}
.mk.sc>i{font-style:normal;font-size:.8em;color:#127a3e}
.mk.sc .ico{width:2.6em;height:2.6em;border-radius:.8em;display:grid;place-items:center;background:color-mix(in srgb,var(--b) 14%,#fff);color:var(--b)}
.mk.sc .ico .ic{width:1.4em;height:1.4em}
.mk.sc .spark{margin-top:auto}

/* ---------- 2. brief → plan demo ---------- */
.demo{position:relative;border-radius:calc(16*var(--u));overflow:hidden;aspect-ratio:1740/825;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 calc(30*var(--u)) calc(80*var(--u)) rgba(30,60,90,.12)}
.demo .chrome b{padding:calc(5*var(--u)) calc(60*var(--u))}
.canvas{position:absolute;top:clamp(calc(22*var(--u)),1.8vw,calc(34*var(--u)));left:0;right:0;bottom:0;transition:right .9s var(--ease);background:linear-gradient(120deg,#e3efff,#eef8e9 50%,#fff6d8)}
.demo.plan .canvas{right:22%}
.canvas .mock{position:absolute;inset:0;opacity:0;filter:blur(calc(18*var(--u)));transition:opacity 1s var(--ease),filter 1.4s var(--ease)}
.demo.plan .canvas .mock{opacity:.85}
.demo.done .canvas .mock{opacity:1;filter:none}
.prompt{position:absolute;left:50%;top:55%;width:min(calc(560*var(--u)),70%);transform:translate(-50%,-50%);background:rgba(255,255,255,.85);backdrop-filter:blur(calc(14*var(--u)));border:1px solid rgba(255,255,255,.9);border-radius:calc(18*var(--u));padding:calc(22*var(--u));box-shadow:0 calc(20*var(--u)) calc(60*var(--u)) rgba(30,60,90,.15);transition:opacity .5s,transform .7s var(--ease)}
.ptext{min-height:4.8em;font-size:clamp(calc(14*var(--u)),1.05vw,calc(20*var(--u)));line-height:1.45;color:#2b3a55}
.prompt .btn{float:right;margin-top:calc(10*var(--u));height:calc(40*var(--u));padding:0 calc(18*var(--u));font-size:calc(14*var(--u))}
.prompt .btn.press{transform:scale(.94)}
.demo.plan .prompt{opacity:0;transform:translate(-50%,-38%);pointer-events:none}
.planp{position:absolute;top:clamp(calc(22*var(--u)),1.8vw,calc(34*var(--u)));right:0;bottom:0;width:22%;background:#fbfbfc;border-left:1px solid var(--line);padding:calc(18*var(--u));display:flex;flex-direction:column;gap:calc(14*var(--u));font-size:clamp(calc(11*var(--u)),.75vw,calc(14*var(--u)));transform:translateX(102%);transition:transform .9s var(--ease)}
.demo.plan .planp{transform:none}
.planp .q{background:#fff;border:1px solid var(--line);border-radius:calc(12*var(--u));padding:calc(12*var(--u));line-height:1.45}
.planp h4{font:600 1.05em/1.2 var(--display)}

/* ---------- 3. what we build ---------- */
.sol{display:grid;grid-template-columns:34% 1fr;column-gap:9%;align-items:start}
.sol-media{position:sticky;top:calc(var(--nav) + 14vh);aspect-ratio:1/1.05}
.sol-media .slot{position:absolute;inset:0;opacity:0;transform:translateY(calc(16*var(--u))) scale(.98);transition:opacity .6s var(--ease),transform .9s var(--ease);display:flex;align-items:center;justify-content:center}
.sol-media .slot.on{opacity:1;transform:none}
.sol-media .mock{width:100%;aspect-ratio:70/52;border-radius:calc(12*var(--u));box-shadow:0 calc(20*var(--u)) calc(50*var(--u)) rgba(30,60,90,.18)}
.sol-media .mock.tall{height:100%;width:auto;aspect-ratio:22/44;border-radius:calc(20*var(--u))}
.sol-media .shot{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:calc(12*var(--u));box-shadow:0 0 0 1px rgba(0,0,0,.08),0 calc(20*var(--u)) calc(50*var(--u)) rgba(30,60,90,.18)}
.sol-media .shot.tall{border-radius:calc(20*var(--u))}
.sol-media .shot,.sol-media .mock{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sol-media .slot.on>:hover{transform:scale(1.04);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 calc(30*var(--u)) calc(70*var(--u)) rgba(30,60,90,.24)}
}
.sol-list{list-style:none}
.sol-list li{border-bottom:1px solid var(--line)}
.sol-list li:first-child{border-top:1px solid var(--line)}
.sol-list button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:clamp(calc(14*var(--u)),1.4vw,calc(27*var(--u))) 0;font:400 clamp(calc(32*var(--u)),calc(24*var(--u)) + 2.5vw,calc(72*var(--u)))/1.1 var(--display);letter-spacing:-.02em;color:var(--grey);transition:color .4s}
.sol-list button>span{display:flex;align-items:baseline;gap:.5em}
.sol-list button small{font:500 calc(14*var(--u))/1 var(--text);letter-spacing:.06em;color:var(--mute);min-width:2.2em}
.sol-list button:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:calc(4*var(--u))}
.sol-list button i{font-style:normal;font-size:.4em;opacity:0;transition:opacity .4s}
.sol-list li.on button{color:var(--ink)}
.sol-list li.on button i{opacity:1}
.sol-list .d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.sol-list .d>div{overflow:hidden}
.sol-list li.on .d{grid-template-rows:1fr}
.sol-list .d p{font-size:calc(18*var(--u));line-height:1.44;max-width:calc(662*var(--u));margin-bottom:calc(10*var(--u))}
.sol-list .d a{display:inline-block;margin-bottom:calc(24*var(--u));font-size:calc(14*var(--u));text-decoration:underline;text-underline-offset:calc(4*var(--u))}

/* ---------- 4. projects: one slide at a time, image left, text right, dots below ---------- */
.pj{display:grid}
.pj-s{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(calc(32*var(--u)),5vw,calc(110*var(--u)));align-items:center;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.pj-s.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.pj-img{border-radius:calc(24*var(--u));overflow:hidden;aspect-ratio:4/3;background:var(--soft);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 calc(24*var(--u)) calc(60*var(--u)) rgba(30,60,90,.12)}
.pj-img img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.2s var(--ease)}
.pj-s.on .pj-img img{transform:none}
.pj-txt>*{opacity:0;transform:translateY(calc(20*var(--u)));transition:opacity .4s cubic-bezier(.3,0,.56,1),transform .4s cubic-bezier(.3,0,.56,1)}
.pj-s.on .pj-txt>*{opacity:1;transform:none}
.pj-s.on .pj-txt>:nth-child(2){transition-delay:.06s}.pj-s.on .pj-txt>:nth-child(3){transition-delay:.12s}
.pj-s.on .pj-txt>:nth-child(4){transition-delay:.18s}.pj-s.on .pj-txt>:nth-child(5){transition-delay:.24s}.pj-s.on .pj-txt>:nth-child(6){transition-delay:.3s}
.pj-txt h3{font:400 clamp(calc(36*var(--u)),3.4vw,calc(68*var(--u)))/1.04 var(--display);letter-spacing:-.02em;margin:0 0 calc(10*var(--u))}
.pj-lead{font:500 clamp(calc(18*var(--u)),1.25vw,calc(24*var(--u)))/1.3 var(--display);margin-bottom:calc(14*var(--u))}
.pj-txt p:not(.pj-lead){font-size:clamp(calc(16*var(--u)),1.05vw,calc(20*var(--u)));line-height:1.5;color:var(--mute);max-width:calc(560*var(--u))}
.pj-txt ul{list-style:none;margin:calc(22*var(--u)) 0 calc(30*var(--u));border-top:1px solid var(--line);max-width:calc(560*var(--u))}
.pj-txt li{display:flex;gap:calc(12*var(--u));align-items:baseline;padding:calc(12*var(--u)) 0;border-bottom:1px solid var(--line);font-size:clamp(calc(15*var(--u)),.95vw,calc(18*var(--u)))}
.pj-txt li::before{content:"✓";color:var(--brand);font-weight:600}
.pj-dots{display:flex;justify-content:center;gap:calc(10*var(--u));margin-top:clamp(calc(36*var(--u)),3.6vw,calc(64*var(--u)))}
.pj-dots button{all:unset;cursor:pointer;width:calc(8*var(--u));height:calc(8*var(--u));border-radius:calc(999*var(--u));background:var(--grey);transition:width .4s var(--ease),background .4s}
.pj-dots button[aria-selected="true"]{width:calc(28*var(--u));background:var(--brand)}
.pj-dots button:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:calc(4*var(--u))}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.pj-s.on .pj-img:hover img{transform:scale(1.04)}}
[data-theme="dark"] .pj-txt ul,[data-theme="dark"] .pj-txt li{border-color:rgba(255,255,255,.1)}

/* ---------- 5. how we work: pinned sideways scroll ---------- */
.hz{height:calc(100vh + var(--run,calc(1200*var(--u))))}
.hz-pin{position:sticky;top:0;height:100vh;padding-top:var(--nav);box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hz-track{display:flex;gap:clamp(calc(16*var(--u)),1.6vw,calc(30*var(--u)));will-change:transform}
.hc{flex:none;width:clamp(calc(280*var(--u)),36.9vw,calc(708*var(--u)))}
.hc .mock{aspect-ratio:708/560;border-radius:calc(20*var(--u));box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.hc h3{font:500 clamp(calc(18*var(--u)),calc(12*var(--u)) + .5vw,calc(21.6*var(--u)))/1.3 var(--display);margin-top:calc(18*var(--u))}
.hc p{font-size:clamp(calc(16*var(--u)),calc(12*var(--u)) + .37vw,calc(19.2*var(--u)));line-height:1.35;color:var(--mute);max-width:calc(547*var(--u));margin-top:calc(6*var(--u))}

/* ---------- 6. DayForge ---------- */
.agent{min-height:max(calc(720*var(--u)),92vh);display:grid;align-items:center;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--bg),var(--t-green) 40%,var(--t-blue) 70%,var(--bg))}
@keyframes float{50%{translate:0 -14px}}
.agent-grid{display:grid;grid-template-columns:1fr minmax(0,calc(560*var(--u)));gap:clamp(calc(32*var(--u)),5vw,calc(96*var(--u)));align-items:center;max-width:calc(1400*var(--u));margin:0 auto;width:100%}
.agent-copy p{max-width:calc(520*var(--u));margin:calc(20*var(--u)) 0 calc(28*var(--u));font-size:calc(18*var(--u));line-height:1.45}
.df{width:clamp(calc(64*var(--u)),4.4vw,calc(84*var(--u)));margin:0 0 calc(26*var(--u));filter:drop-shadow(0 calc(14*var(--u)) calc(26*var(--u)) rgba(26,143,208,.25))}
.df svg{display:block;width:100%;height:auto;overflow:visible}
.df .eyes{transition:transform .5s var(--ease)}
.df .eye{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.df.happy .eye{animation:none;transform:scaleY(.42) translateY(-6px)}
.df-chat{background:var(--card);border:1px solid var(--line);border-radius:calc(24*var(--u));box-shadow:0 calc(30*var(--u)) calc(80*var(--u)) rgba(30,60,90,.12);display:flex;flex-direction:column;min-height:calc(440*var(--u));overflow:hidden}
.dc-head{display:flex;align-items:center;gap:calc(10*var(--u));padding:calc(16*var(--u)) calc(20*var(--u));border-bottom:1px solid var(--line)}
.dc-head img{width:calc(30*var(--u));height:calc(30*var(--u))}
.dc-head span{margin-left:auto;font-size:calc(13*var(--u));color:var(--mute);display:flex;align-items:center;gap:calc(6*var(--u))}
.dc-head span::before{content:"";width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:#22a35a}
.dc-body{flex:1;padding:calc(22*var(--u)) calc(20*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u));justify-content:flex-end}
.dc-m{max-width:82%;padding:calc(12*var(--u)) calc(15*var(--u));border-radius:calc(18*var(--u));font-size:calc(15.5*var(--u));line-height:1.45;animation:pop .45s var(--ease)}
.dc-m.u{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:calc(6*var(--u))}
.dc-m.a{background:var(--soft);border-bottom-left-radius:calc(6*var(--u))}
.dc-m.dots{display:flex;gap:calc(5*var(--u));padding:calc(15*var(--u))}
.dc-m.dots i{width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:var(--mute);animation:dot 1s infinite}
.dc-m.dots i:nth-child(2){animation-delay:.15s}.dc-m.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.25;transform:translateY(-3px)}}
@keyframes pop{from{opacity:0;transform:translateY(calc(10*var(--u))) scale(.98)}}
.dc-in{margin:0 calc(16*var(--u)) calc(16*var(--u));padding:calc(13*var(--u)) calc(16*var(--u));border-radius:calc(999*var(--u));border:1px solid var(--line);color:var(--mute);font-size:calc(14*var(--u));display:flex;align-items:center;gap:calc(10*var(--u))}
.dc-in i{width:calc(10*var(--u));height:calc(10*var(--u));border-radius:50%;background:#e5484d;box-shadow:0 0 0 0 rgba(229,72,77,.5);animation:rec 1.6s infinite}
@keyframes rec{70%{box-shadow:0 0 0 calc(8*var(--u)) rgba(229,72,77,0)}}
.agent small{display:block;margin-top:calc(14*var(--u));font-size:calc(14*var(--u));color:var(--mute)}

/* ---------- 7. foundations ---------- */
.found{background:linear-gradient(180deg,var(--bg),var(--t-blue) 30%,var(--t-sky) 70%,var(--bg))}
.fl{list-style:none}
.fl li{display:grid;grid-template-columns:42% 1fr calc(220*var(--u));gap:calc(24*var(--u));align-items:center;border-bottom:1px solid var(--line);cursor:pointer}
.fl li:first-child{border-top:1px solid var(--line)}
.fl h3{font:400 clamp(calc(32*var(--u)),calc(24*var(--u)) + 2.5vw,calc(72*var(--u)))/1.1 var(--display);letter-spacing:-.02em;color:var(--grey);transition:color .4s;padding:clamp(calc(12*var(--u)),1.2vw,calc(22*var(--u))) 0}
.fl li.on h3{color:var(--ink)}
.fl p{font-size:calc(15*var(--u));line-height:1.45;max-width:calc(420*var(--u));opacity:0;transition:opacity .5s}
.fl li.on p{opacity:1}
.vis{height:0;margin:0;border-radius:calc(16*var(--u));overflow:hidden;opacity:0;background:linear-gradient(135deg,var(--t-tile),var(--t-sky));display:grid;place-items:center;transition:height .5s var(--ease),opacity .5s,margin .5s}
.fl li.on .vis{height:calc(170*var(--u));margin:calc(14*var(--u)) 0;opacity:1}
.vis svg{width:56%;height:56%}
.vis .badges{display:flex;flex-direction:column;gap:calc(6*var(--u))}
.vis .badges span{font:600 calc(12*var(--u))/1 var(--text);padding:calc(7*var(--u)) calc(11*var(--u));border-radius:calc(999*var(--u));background:#fff;color:#127a3e;box-shadow:0 calc(2*var(--u)) calc(8*var(--u)) rgba(0,0,0,.06)}
.orbit{position:relative;width:calc(104*var(--u));height:calc(104*var(--u));border-radius:50%;border:1px dashed #9cc4e4;animation:spin 18s linear infinite}
.orbit i{position:absolute;width:calc(12*var(--u));height:calc(12*var(--u));border-radius:50%;background:var(--brand);left:calc(50% - calc(6*var(--u)) + calc(52*var(--u)) * cos(var(--a)));top:calc(50% - calc(6*var(--u)) + calc(52*var(--u)) * sin(var(--a)))}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- 8. brief bar ---------- */
.ask-bar{text-align:center;background:var(--brand);color:#fff}
.ask-bar .btn-primary{background:#0b0f14}.ask-bar .btn-primary:hover{background:#232b35}
.ask-bar .bar:focus-within{box-shadow:0 0 0 calc(2*var(--u)) #fff}
.ask-bar h2{max-width:calc(900*var(--u));margin:0 auto clamp(calc(26*var(--u)),2.4vw,calc(44*var(--u)))}
.bar{display:flex;max-width:calc(680*var(--u));margin:0 auto;background:#fff;border-radius:calc(999*var(--u));padding:calc(5*var(--u));box-shadow:0 0 0 1px rgba(0,0,0,.08),0 calc(10*var(--u)) calc(30*var(--u)) rgba(80,60,160,.08)}
.bar input{flex:1;min-width:0;border:0;background:none;padding:0 calc(20*var(--u));font:400 calc(16*var(--u)) var(--text);color:#000}
.bar input:focus{outline:none}
.bar:focus-within{box-shadow:0 0 0 calc(2*var(--u)) var(--brand)}
.bar .btn{height:calc(46*var(--u))}
.ask-bar small{display:block;margin-top:calc(18*var(--u));font-size:calc(13*var(--u))}

/* ---------- 9. production cards ---------- */
.ops{display:flex;gap:clamp(calc(14*var(--u)),1.4vw,calc(26*var(--u)));align-items:flex-end;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:calc(10*var(--u)) var(--gut)}
.ops::-webkit-scrollbar{display:none}
.oc{flex:none;width:clamp(calc(260*var(--u)),26vw,calc(500*var(--u)))}
.oc:nth-child(2){width:clamp(calc(160*var(--u)),13vw,calc(250*var(--u)))}
.oc .mock{aspect-ratio:70/52;border-radius:0;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 calc(16*var(--u)) calc(40*var(--u)) rgba(30,60,90,.08)}
.oc:nth-child(2) .mock{aspect-ratio:22/40}
.oc>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:left top;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 calc(16*var(--u)) calc(40*var(--u)) rgba(30,60,90,.08);transition:transform .6s var(--ease)}
.oc:nth-child(2)>img{aspect-ratio:9/16}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.oc>img:hover{transform:scale(1.03)}}
.oc:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:calc(4*var(--u));border-radius:calc(4*var(--u))}

/* ---------- 10. operations list + dashboard ---------- */
.run{display:grid;grid-template-columns:40% 1fr;gap:clamp(calc(28*var(--u)),4vw,calc(80*var(--u)));align-items:center}
.run-list{list-style:none}
.run-list li{padding:calc(10*var(--u)) 0;cursor:pointer}
.run-list h3{font:400 clamp(calc(28*var(--u)),calc(22*var(--u)) + 2.19vw,calc(64*var(--u)))/1.14 var(--display);color:var(--grey);transition:color .4s}
.run-list li.on h3{color:var(--ink)}
.run-list p{max-height:0;overflow:hidden;opacity:0;font-size:calc(16*var(--u));line-height:1.5;max-width:calc(558*var(--u));transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.run-list li.on p{max-height:calc(120*var(--u));opacity:1;margin-top:calc(6*var(--u))}
.run-view{position:relative;border-radius:calc(18*var(--u));overflow:hidden;aspect-ratio:3/2;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 calc(30*var(--u)) calc(70*var(--u)) rgba(30,60,90,.12)}
.run-view .mock{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.run-view .mock.on{opacity:1}
.run-view>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.run-view>img.on{opacity:1}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.run-view>img.on:hover{transform:scale(1.03)}}

/* ---------- 11. built to be found (marquee) ---------- */

/* ---------- 12. phone + dashboard ---------- */

/* ---------- 13. six steps ---------- */
/* delivery steps: same hairline-cell treatment as the Why iDefender list */
.steps6{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.steps6>div{display:flex;gap:calc(18*var(--u));padding:clamp(calc(22*var(--u)),2.2vw,calc(36*var(--u))) clamp(calc(22*var(--u)),2.4vw,calc(40*var(--u)));border-bottom:1px solid var(--line)}
.steps6>div:not(:nth-child(3n)){border-right:1px solid var(--line)}
.steps6 svg{width:calc(44*var(--u));height:calc(44*var(--u));flex:none;color:var(--brand)}
.steps6 small{display:block;font:400 calc(13*var(--u))/1 var(--text);letter-spacing:.08em;color:var(--mute);margin-bottom:calc(10*var(--u))}
.steps6 h3{font:500 clamp(calc(17*var(--u)),.4vw + calc(12*var(--u)),calc(20*var(--u)))/1.3 var(--display)}
.steps6 p{margin-top:calc(6*var(--u));font-size:clamp(calc(14*var(--u)),.25vw + calc(11*var(--u)),calc(15.5*var(--u)));line-height:1.55;color:var(--mute);max-width:calc(380*var(--u))}
[data-theme="dark"] .steps6,[data-theme="dark"] .steps6>div{border-color:rgba(255,255,255,.12)}
@media(min-width:1280px){.steps6>div{gap:1.6vw;padding:3.2vw 2.8vw}.steps6 svg{width:clamp(calc(44*var(--u)),3.6vw,calc(72*var(--u)));height:clamp(calc(44*var(--u)),3.6vw,calc(72*var(--u)))}.steps6 h3{font-size:clamp(calc(22*var(--u)),1.7vw,calc(34*var(--u)))}.steps6 p{font-size:clamp(calc(14.5*var(--u)),.95vw,calc(18.5*var(--u)));margin-top:.6vw}}
@media(max-width:768px){.steps6>div{border-right:0!important;padding-left:0;padding-right:0}}

/* ---------- 14. teams that build with us ---------- */
.company{text-align:center;isolation:isolate;padding-top:clamp(calc(110*var(--u)),12vw,calc(230*var(--u)))}
.company .bg{position:absolute;inset:0 0 auto;height:clamp(calc(520*var(--u)),44vw,calc(840*var(--u)));z-index:-1;pointer-events:none;background:radial-gradient(60% 60% at 50% 45%,var(--t-blue),transparent 70%)}
.fl8{position:absolute;inset:0 0 auto;height:clamp(calc(420*var(--u)),31vw,calc(600*var(--u)));z-index:-1;pointer-events:none}
.fl8>*{position:absolute;border-radius:calc(16*var(--u));box-shadow:0 calc(18*var(--u)) calc(44*var(--u)) rgba(30,60,90,.14)}
.fl8 img{object-fit:cover}
.fl8 .plate{background:#fff;display:grid;place-items:center;padding:calc(14*var(--u))}
.fl8 .plate.dk{background:#14181e}
.fl8 .plate img{width:100%;height:auto;box-shadow:none;position:static;border-radius:0}
.company>p{font-size:calc(18*var(--u));margin:calc(14*var(--u)) 0 calc(24*var(--u))}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(20*var(--u));margin-top:clamp(calc(120*var(--u)),14vw,calc(260*var(--u)));text-align:left}
.rv-card{background:var(--card);border:1px solid var(--line);border-radius:calc(20*var(--u));padding:calc(26*var(--u));box-shadow:0 calc(10*var(--u)) calc(30*var(--u)) rgba(0,0,0,.04)}
.rv-card .who{display:flex;align-items:center;gap:calc(12*var(--u));margin-bottom:calc(14*var(--u))}
.rv-card .who img{width:calc(46*var(--u));height:calc(46*var(--u));border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--line)}
.rv-card h3{font:500 calc(16*var(--u))/1.3 var(--display)}
.rv-card small{font-size:calc(13*var(--u));color:var(--mute)}
.rv-card p{font-size:calc(15*var(--u));line-height:1.65}

/* ---------- 15. closing CTA ---------- */

/* ---------- 16. FAQ ---------- */
.faq{display:grid;grid-template-columns:40% 1fr;gap:calc(40*var(--u))}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:calc(20*var(--u));padding:calc(22*var(--u)) calc(8*var(--u));font:500 clamp(calc(17*var(--u)),calc(13*var(--u)) + .37vw,calc(20*var(--u)))/1.5 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:calc(24*var(--u));line-height:1.2;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 calc(8*var(--u)) calc(24*var(--u));font-size:calc(16*var(--u));line-height:1.5;max-width:calc(780*var(--u))}

/* ---------- footer, light ---------- */
footer{background:#fff;color:#000;border-top:1px solid var(--line)}
.fbrand p,.fcols .t,.legal{color:var(--mute)}
.fcols .h{color:#000}
.fcols a:hover{color:var(--brand-ink)}
.ai{border-color:var(--line)}
.ai span{color:#000}
.ai a{border-color:var(--line)}
.ai a:hover{border-color:#000;color:#000}

/* ---------- theme switch + dark theme ---------- */
.theme-t{display:grid;place-items:center;width:calc(40*var(--u));height:calc(40*var(--u));margin-left:calc(14*var(--u));border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.theme-t:hover{transform:rotate(-12deg)}
.theme-t svg{width:calc(18*var(--u));height:calc(18*var(--u))}
.theme-t .i-sun,[data-theme="dark"] .theme-t .i-moon{display:none}
[data-theme="dark"] .theme-t .i-sun{display:block}
.logo .lg-d,.fbrand .lg-d,[data-theme="dark"] .logo .lg-l,[data-theme="dark"] .fbrand .lg-l{display:none}
[data-theme="dark"] .logo .lg-d,[data-theme="dark"] .fbrand .lg-d{display:inline-block}
[data-theme="dark"]{
  --bg:#07090c;--card:#121820;--glass:rgba(18,24,32,.82);
  --t-green:#0a1716;--t-blue:#0b1522;--t-sky:#0d1826;--t-lav:#13112a;--t-sand:#16130e;--t-tile:#13263b;
  --ink:#f2f5f8;--mute:#9aa6b4;--grey:#3a4554;--line:rgba(255,255,255,.1);--soft:#171e27;
  --brand-ink:#5cc4f0;color-scheme:dark;
}
[data-theme="dark"] .nav{background:rgba(7,9,12,.9)}
[data-theme="dark"] .nav-links,[data-theme="dark"] .nav-cta,[data-theme="dark"] .nav-links>a:hover,[data-theme="dark"] .drop:hover>a,[data-theme="dark"] .nav-cta .call:hover{color:#f2f5f8}
[data-theme="dark"] .nav-cta .call{text-decoration-color:rgba(255,255,255,.35)}
[data-theme="dark"] .drop-panel{background:#121820}
[data-theme="dark"] .drop-panel a:hover{background:#1c2430;color:#fff}
[data-theme="dark"] .burger span{background:#fff}
[data-theme="dark"] .mmenu{background:#07090c;color:#f2f5f8}
[data-theme="dark"] .btn-black{background:#fff;color:#000}
[data-theme="dark"] .btn-black:hover{background:#dfe5ec}
[data-theme="dark"] .glow i{opacity:.22}
[data-theme="dark"] .bar{background:#121820;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
[data-theme="dark"] .bar input{color:#f2f5f8}
[data-theme="dark"] .df-chat,[data-theme="dark"] .rv-card{box-shadow:0 calc(30*var(--u)) calc(80*var(--u)) rgba(0,0,0,.45)}
[data-theme="dark"] footer{background:#0b0f14;color:#c9d1da}
[data-theme="dark"] .demo .btn-black{background:#000;color:#fff}
[data-theme="dark"] .fcols .h,[data-theme="dark"] .ai span{color:#fff}
[data-theme="dark"] .ai a:hover{border-color:#fff;color:#fff}
/* product screens stay light in both themes, like real screenshots */
.win,.demo,.mock{--line:#e6e6e6;--soft:#f5f6f8;--mute:#5e5e5e;--ink:#000;--card:#fff;color:#111}

/* reveal */
.rv{opacity:0;transform:translateY(calc(24*var(--u)));transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .theme-t{margin-left:auto}
  .burger{margin-left:calc(8*var(--u))}
  .agent-grid{grid-template-columns:1fr}
  .fl li{grid-template-columns:1fr 1fr}
  .fl .vis{display:none}
  .revs{grid-template-columns:1fr}
}
@media (max-width:768px){
  .split,.sol,.run,.faq,.duo{grid-template-columns:1fr}
  .split p{font-size:calc(16*var(--u))}
  .win{left:4%;width:92%;translate:none}
  .screens,.wash{right:0}
  .ask,.obj,.lc,.rc,.far{display:none}
  .stage{height:62vw}
  .stats div{padding:0 calc(14*var(--u))}
  .stats b{font-size:calc(20*var(--u))}.stats span{font-size:calc(12*var(--u))}
  .demo{aspect-ratio:4/5}
  .demo.plan .canvas{right:0}
  .planp{width:100%;top:auto;height:56%;border-left:0;border-top:1px solid var(--line);transform:translateY(102%)}
  .sol-media{position:relative;top:0;margin-bottom:calc(24*var(--u))}
  .pj-s{grid-template-columns:1fr;gap:calc(28*var(--u))}
  .fl li{grid-template-columns:1fr;gap:0}
  .fl p{display:none}
  .fl li.on p{display:block;padding-bottom:calc(16*var(--u))}
  .hz{height:auto}
  .hz-pin{position:relative;top:0;height:auto}
  .hz-track{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);scrollbar-width:none;transform:none!important;margin:0;padding:0 var(--gut)}
  .hc{width:82vw;scroll-snap-align:start}
  .steps6{grid-template-columns:1fr}
  .chips{display:none}
  .fl8{display:none}
  .company{padding-top:calc(72*var(--u))}
  .revs{margin-top:calc(48*var(--u))}
  .bar .btn{padding:0 calc(16*var(--u))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hz{height:auto}
  .hz-pin{position:relative;height:auto}
  .hz-track{overflow-x:auto}
}

/* ---------- 1b. photo hero: rounded card, glass panel, progressive blur (2026-10-19) ---------- */
.hero2{padding:calc(var(--nav) + calc(16*var(--u))) calc(48*var(--u)) calc(24*var(--u))}
.hcard{position:relative;height:calc(115vh - var(--nav) - calc(16*var(--u)));min-height:calc(640*var(--u));border-radius:calc(32*var(--u));overflow:hidden;background:#11110d;isolation:isolate}
.hphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 40%}
.hblur i{position:absolute;inset:-3%;display:none;background:var(--hero-day,url(/site/img/hero-office-3.webp)) 100% 40%/cover no-repeat}
.hblur i:nth-child(1){filter:blur(calc(4*var(--u)));-webkit-mask-image:linear-gradient(to left,transparent 46%,#000 66%);mask-image:linear-gradient(to left,transparent 46%,#000 66%)}
.hblur i:nth-child(2){filter:blur(calc(12*var(--u)));-webkit-mask-image:linear-gradient(to left,transparent 60%,#000 80%);mask-image:linear-gradient(to left,transparent 60%,#000 80%)}
.hblur i:nth-child(3){filter:blur(calc(28*var(--u)));-webkit-mask-image:linear-gradient(to left,transparent 74%,#000 100%);mask-image:linear-gradient(to left,transparent 74%,#000 100%)}
.hview{position:absolute;left:0;right:0;top:0;height:calc(100vh - var(--nav) - calc(16*var(--u)));display:flex;align-items:center;justify-content:flex-start;padding:0 0 0 5.5%}
.glass{width:min(calc(720*var(--u)),100%);padding:clamp(calc(24*var(--u)),3vw,calc(44*var(--u)));border-radius:calc(28*var(--u));background:rgba(255,255,255,.52);backdrop-filter:blur(calc(28*var(--u))) saturate(1.5);-webkit-backdrop-filter:blur(calc(28*var(--u))) saturate(1.5);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 calc(24*var(--u)) calc(70*var(--u)) rgba(0,0,0,.14);color:#0b0f14;text-align:left}
.eb2{display:block;font:700 calc(14*var(--u))/1.3 var(--text);letter-spacing:.75px;text-transform:uppercase;color:#0b0f14}
.glass h1{font:500 clamp(calc(40*var(--u)),2.5vw + calc(28*var(--u)),calc(64*var(--u)))/1.05 var(--display);letter-spacing:-.01em;margin:calc(10*var(--u)) 0 0;min-height:2.1em}
.glass .sub{font-size:clamp(calc(16*var(--u)),.4vw + calc(12*var(--u)),calc(18*var(--u)));line-height:1.5;margin:calc(22*var(--u)) 0 0;max-width:calc(560*var(--u));color:rgba(11,15,20,.8)}
.chk{display:flex;align-items:center;gap:calc(8*var(--u));margin:calc(22*var(--u)) 0 calc(12*var(--u));font-size:calc(14*var(--u))}
.chk i{width:calc(16*var(--u));height:calc(16*var(--u));border-radius:50%;background:var(--brand);flex:none}
.hform{display:flex;gap:calc(12*var(--u));flex-wrap:wrap}
.hform input{flex:1 1 calc(220*var(--u));max-width:calc(416*var(--u));height:calc(48*var(--u));border-radius:calc(12*var(--u));border:1px solid rgba(0,0,0,.08);background:#fff;padding:0 calc(16*var(--u));font:400 calc(15*var(--u)) var(--text);color:#0b0f14}
.hform .btn{height:calc(48*var(--u));border-radius:calc(16*var(--u));padding:0 calc(28*var(--u));font:600 calc(17*var(--u))/1 var(--text);border:0;cursor:pointer}
.tw b{display:inline-block;width:.06em;height:.9em;background:currentColor;margin-left:.06em;transform:translateY(.08em);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(min-width:769px){.hblur i{display:block}}
@media(max-width:768px){.hero2{padding:calc(var(--nav) + calc(12*var(--u))) calc(16*var(--u)) calc(16*var(--u))}.hcard{height:calc(112svh - var(--nav) - calc(12*var(--u)));border-radius:calc(24*var(--u))}.hphoto{object-position:0 40%}.hview{height:calc(100svh - var(--nav) - calc(12*var(--u)));align-items:flex-end;justify-content:stretch;padding:calc(14*var(--u))}.glass{width:100%;border-radius:calc(22*var(--u))}}
[data-theme="dark"] .glass{background:rgba(14,18,24,.5);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 calc(24*var(--u)) calc(70*var(--u)) rgba(0,0,0,.4);color:#f2f5f8}
[data-theme="dark"] .eb2{color:#f2f5f8}
[data-theme="dark"] .glass .sub{color:rgba(242,245,248,.82)}

/* ---------- 1c. hero scales with the screen: 1x at 1280px, 1.5x at 1920px (what the 150% zoom looked like) ---------- */
@media (min-width:1280px){
  :root{--nav:clamp(calc(72*var(--u)),5.625vw,calc(108*var(--u)))}
  .nav .logo img{height:clamp(calc(26*var(--u)),2.03vw,calc(39*var(--u)))}
  .nav-links{gap:clamp(calc(26*var(--u)),2.03vw,calc(39*var(--u)));font-size:clamp(calc(15*var(--u)),1.17vw,calc(22*var(--u)))}
  .nav-cta{font-size:clamp(calc(15*var(--u)),1.17vw,calc(22*var(--u)))}
  .btn-small{height:clamp(calc(36*var(--u)),2.81vw,calc(54*var(--u)));padding:0 clamp(calc(18*var(--u)),1.4vw,calc(27*var(--u)));font-size:clamp(calc(13*var(--u)),1.02vw,calc(19*var(--u)))}
  .hero2{padding:calc(var(--nav) + clamp(calc(16*var(--u)),1.25vw,calc(24*var(--u)))) clamp(calc(48*var(--u)),3.75vw,calc(72*var(--u))) clamp(calc(24*var(--u)),1.875vw,calc(36*var(--u)))}
  .hcard{border-radius:clamp(calc(32*var(--u)),2.5vw,calc(48*var(--u)));height:calc(115vh - var(--nav) - clamp(calc(16*var(--u)),1.25vw,calc(24*var(--u))))}
  .hview{height:calc(100vh - var(--nav) - clamp(calc(16*var(--u)),1.25vw,calc(24*var(--u))))}
  .glass{width:min(56.25vw,calc(1080*var(--u)));padding:clamp(calc(44*var(--u)),3.44vw,calc(66*var(--u)));border-radius:clamp(calc(28*var(--u)),2.19vw,calc(42*var(--u)))}
  .eb2{font-size:clamp(calc(14*var(--u)),1.094vw,calc(21*var(--u)));letter-spacing:clamp(.75px,.06vw,calc(1.1*var(--u)))}
  .glass h1{font-size:clamp(calc(64*var(--u)),5vw,calc(96*var(--u)));margin-top:clamp(calc(10*var(--u)),.78vw,calc(15*var(--u)))}
  .glass .sub{font-size:clamp(calc(18*var(--u)),1.406vw,calc(27*var(--u)));max-width:clamp(calc(560*var(--u)),43.75vw,calc(840*var(--u)));margin-top:clamp(calc(22*var(--u)),1.72vw,calc(33*var(--u)))}
  .chk{font-size:clamp(calc(14*var(--u)),1.094vw,calc(21*var(--u)));margin:clamp(calc(22*var(--u)),1.72vw,calc(33*var(--u))) 0 clamp(calc(12*var(--u)),.94vw,calc(18*var(--u)));gap:clamp(calc(8*var(--u)),.625vw,calc(12*var(--u)))}
  .chk i{width:clamp(calc(16*var(--u)),1.25vw,calc(24*var(--u)));height:clamp(calc(16*var(--u)),1.25vw,calc(24*var(--u)))}
  .hform{gap:clamp(calc(12*var(--u)),.94vw,calc(18*var(--u)))}
  .hform input{height:clamp(calc(48*var(--u)),3.75vw,calc(72*var(--u)));max-width:clamp(calc(416*var(--u)),32.5vw,calc(624*var(--u)));border-radius:clamp(calc(12*var(--u)),.94vw,calc(18*var(--u)));padding:0 clamp(calc(16*var(--u)),1.25vw,calc(24*var(--u)));font-size:clamp(calc(15*var(--u)),1.17vw,calc(22*var(--u)))}
  .hform .btn{height:clamp(calc(48*var(--u)),3.75vw,calc(72*var(--u)));border-radius:clamp(calc(16*var(--u)),1.25vw,calc(24*var(--u)));padding:0 clamp(calc(28*var(--u)),2.19vw,calc(42*var(--u)));font-size:clamp(calc(17*var(--u)),1.33vw,calc(25*var(--u)))}
}


/* ---------- 1e. glass panel 30% smaller on desktop (uniform: box, type, fields) ---------- */
@media (min-width:769px){.glass{zoom:.77}}

/* ---------- 1f. night scene for the dark theme: same photo at dusk, fetched only when dark is active ---------- */
.hnight{position:absolute;inset:0;background-position:100% 40%;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .6s var(--ease)}
[data-theme="dark"] .hnight{background-image:var(--hero-night,url(/site/img/hero-office-night-2.webp));opacity:1}
[data-theme="dark"] .hblur i{background-image:var(--hero-night,url(/site/img/hero-office-night-2.webp))}
@media(max-width:768px){.hnight{background-position:0 40%}} /* left third: the people at the whiteboard */

/* ---------- 2. What we do cards: proof words + link under each ---------- */
.hc small{display:block;margin-top:calc(10*var(--u));font:500 calc(13*var(--u))/1.4 var(--text);letter-spacing:.02em;color:var(--brand-ink)}
.hc .lnk{display:inline-block;margin:calc(12*var(--u)) 0 0}

/* ---------- 2b. room to breathe between hero and What we do; raised 3D cards in both sideways sections ---------- */
#whatwedo{margin-top:clamp(calc(48*var(--u)),6vw,calc(104*var(--u)))}
.hz .split{margin-bottom:clamp(calc(28*var(--u)),3.2vw,calc(56*var(--u)))}
.hc{width:clamp(calc(280*var(--u)),31vw,calc(600*var(--u)));background:var(--card);border:1px solid var(--line);border-radius:calc(24*var(--u));padding:clamp(calc(14*var(--u)),1.2vw,calc(20*var(--u)));box-shadow:0 1px calc(2*var(--u)) rgba(0,0,0,.05),0 calc(14*var(--u)) calc(34*var(--u)) rgba(0,0,0,.10),0 calc(48*var(--u)) calc(90*var(--u)) -30px rgba(0,0,0,.22);}
.hc .mock{border-radius:calc(16*var(--u))}
.hc h3,.hc p,.hc small,.hc .lnk{padding-left:calc(6*var(--u))}
.hc .lnk{margin-bottom:calc(4*var(--u))}
[data-theme="dark"] .hc{background:#121820;border-color:rgba(255,255,255,.1);box-shadow:0 1px calc(2*var(--u)) rgba(0,0,0,.4),0 calc(14*var(--u)) calc(34*var(--u)) rgba(0,0,0,.45),0 calc(48*var(--u)) calc(90*var(--u)) -30px rgba(0,0,0,.6)}
@media(max-width:768px){.hc{width:82vw}}

/* ---------- 3. Why iDefender: full-page split, intro left, 2x2 points right with hairline rules ---------- */
.why2{min-height:calc(100vh - var(--nav));display:flex;align-items:center}
.why2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(calc(40*var(--u)),6vw,calc(120*var(--u)));align-items:center;width:100%}
.why2 h2{font:400 clamp(calc(44*var(--u)),2.4vw + calc(24*var(--u)),calc(84*var(--u)))/1.04 var(--display);letter-spacing:-.025em;margin-top:calc(10*var(--u))}
.why2-intro p{margin-top:clamp(calc(18*var(--u)),1.6vw,calc(28*var(--u)));max-width:calc(470*var(--u));font-size:clamp(calc(15*var(--u)),.3vw + calc(12*var(--u)),calc(17*var(--u)));line-height:1.65;color:var(--mute)}
.why2-links{display:flex;gap:calc(28*var(--u));margin-top:clamp(calc(20*var(--u)),1.8vw,calc(32*var(--u)));font:500 calc(15*var(--u))/1 var(--text);color:var(--brand-ink)}
.why2-links a:hover{text-decoration:underline;text-underline-offset:calc(4*var(--u))}
.why2-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:auto auto;border-left:1px solid var(--line)}
.why2-list li{border-bottom:1px solid var(--line)}
.why2-list a{display:flex;gap:calc(18*var(--u));height:100%;padding:clamp(calc(22*var(--u)),2.2vw,calc(36*var(--u))) clamp(calc(22*var(--u)),2.4vw,calc(40*var(--u)));color:inherit;text-decoration:none;border-radius:calc(12*var(--u));transition:background .3s}
.why2-list a:hover{background:var(--soft)}
.why2-list h3::after{content:"→";display:inline-block;margin-left:.45em;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s var(--ease);color:var(--brand)}
.why2-list a:hover h3::after{opacity:1;transform:none}
.why2-list li:nth-child(-n+2){border-right:1px solid var(--line)}
.why2-list li:nth-child(2),.why2-list li:nth-child(4){border-bottom:0}
.why2-list li:nth-child(n+3){transform:translateY(-44px)}
.why2-list svg{width:calc(44*var(--u));height:calc(44*var(--u));flex:none;color:var(--brand)}
.why2-list h3{font:500 clamp(calc(17*var(--u)),.4vw + calc(12*var(--u)),calc(20*var(--u)))/1.3 var(--display)}
.why2-list p{margin-top:calc(6*var(--u));font-size:clamp(calc(14*var(--u)),.25vw + calc(11*var(--u)),calc(15.5*var(--u)));line-height:1.55;color:var(--mute)}
[data-theme="dark"] .why2-list,[data-theme="dark"] .why2-list li{border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .why2-list a:hover{background:rgba(255,255,255,.05)}
@media(max-width:900px){.why2{min-height:0}.why2-grid{grid-template-columns:1fr;gap:calc(36*var(--u))}.why2-list{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none;border-left:0}.why2-list li{border-right:0!important;border-bottom:1px solid var(--line)!important;transform:none}.why2-list a{padding-left:0}.why2-list li:last-child{border-bottom:0!important}}

/* ---------- 3b. Why iDefender fills large screens: type, icons and spacing scale with the viewport above 1280px ---------- */
@media (min-width:1280px){
  .why2-grid{gap:clamp(calc(80*var(--u)),7vw,calc(160*var(--u)))}
  .why2 h2{font-size:clamp(calc(90*var(--u)),6.1vw,calc(128*var(--u)));margin-top:1vw}
  .why2-intro p{max-width:32vw;font-size:clamp(calc(16*var(--u)),1.05vw,calc(21*var(--u)));margin-top:2vw}
  .why2-links{font-size:clamp(calc(15*var(--u)),1.1vw,calc(22*var(--u)));gap:2.2vw;margin-top:2.4vw}
  .why2-list a{gap:1.6vw;padding:3.2vw 2.8vw}
  .why2-list li:nth-child(n+3){transform:translateY(-3.6vw)}
  .why2-list svg{width:clamp(calc(44*var(--u)),3.6vw,calc(72*var(--u)));height:clamp(calc(44*var(--u)),3.6vw,calc(72*var(--u)))}
  .why2-list h3{font-size:clamp(calc(22*var(--u)),1.7vw,calc(34*var(--u)))}
  .why2-list p{font-size:clamp(calc(14.5*var(--u)),.95vw,calc(18.5*var(--u)));margin-top:.6vw}
}

/* ---------- 4. Client work: product tabs above the shared demo frame ---------- */
.cw-tabs{display:flex;gap:calc(10*var(--u));margin:clamp(calc(20*var(--u)),2.4vw,calc(40*var(--u))) 0 calc(18*var(--u));flex-wrap:wrap}
.cw-tabs button{font:500 calc(15*var(--u))/1.2 var(--display);background:var(--soft);border:1px solid var(--line);border-radius:calc(999*var(--u));padding:calc(10*var(--u)) calc(18*var(--u));cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:calc(3*var(--u));transition:background .3s,color .3s,border-color .3s}
.cw-tabs button small{font:400 calc(12*var(--u))/1 var(--text);color:var(--mute)}
.cw-tabs button.on{background:#000;color:#fff;border-color:#000}
.cw-tabs button.on small{color:rgba(255,255,255,.72)}
[data-theme="dark"] .cw-tabs button{background:#121820;border-color:rgba(255,255,255,.12);color:#f2f5f8}
[data-theme="dark"] .cw-tabs button small{color:rgba(242,245,248,.6)}
[data-theme="dark"] .cw-tabs button.on{background:#fff;color:#000;border-color:#fff}
[data-theme="dark"] .cw-tabs button.on small{color:rgba(0,0,0,.6)}
/* Vivechana demo screen: meetings list + transcript + cited answer */

/* ---------- 4b. Client work: real-screen tour (CRM screenshots + phone strip) inside the demo frame ---------- */
.demo.is-tour .prompt,.demo.is-tour .planp{display:none}
.demo.is-tour.plan .canvas{right:0}
.demo.is-tour .canvas .mock{opacity:1;filter:none}
.tour{position:absolute;inset:0;background:#f4f6f9}
.tour .ts{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s var(--ease)}
.tour .ts.on{opacity:1}
.tour .ts img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.tour figcaption{position:absolute;left:3%;bottom:4%;max-width:min(46%,calc(420*var(--u)));background:rgba(17,17,13,.86);color:#fff;border-radius:calc(14*var(--u));padding:calc(12*var(--u)) calc(16*var(--u));font:400 clamp(calc(11*var(--u)),.85vw,calc(15*var(--u)))/1.45 var(--text);backdrop-filter:blur(calc(10*var(--u)))}
.tour figcaption b{display:block;font:600 1.1em/1.3 var(--display);margin-bottom:calc(2*var(--u))}
.tour .phones{position:absolute;inset:0;display:flex;gap:2.2%;align-items:center;justify-content:center;padding:4% 5%;background:linear-gradient(120deg,#e3efff,#eef8e9 50%,#fff6d8);opacity:0;transition:opacity .7s var(--ease)}
.tour .phones.on{opacity:1}
.tour .phones figure{margin:0;flex:0 1 21%;max-width:calc(280*var(--u));opacity:0;transform:translateY(calc(24*var(--u)));transition:opacity .6s var(--ease),transform .8s var(--ease)}
.tour .phones.on figure{opacity:1;transform:none}
.tour .phones.on figure:nth-child(2){transition-delay:.12s}.tour .phones.on figure:nth-child(3){transition-delay:.24s}.tour .phones.on figure:nth-child(4){transition-delay:.36s}.tour .phones.on figure:nth-child(5){transition-delay:.48s}
.tour .phones img{display:block;width:100%;border-radius:clamp(calc(14*var(--u)),1.6vw,calc(26*var(--u)));box-shadow:0 calc(20*var(--u)) calc(50*var(--u)) rgba(30,60,90,.22)}
.tour .phones figcaption{position:static;background:none;color:#2b3a55;padding:calc(10*var(--u)) 0 0;text-align:center;max-width:none;backdrop-filter:none;font-weight:500}
@media(max-width:768px){.tour figcaption{left:4%;right:4%;max-width:none;bottom:4%}.tour .phones{gap:3%;padding:6% 4%}.tour .phones figure{flex-basis:30%}.tour .phones figure:nth-child(n+4){display:none}}

/* ---- closing scene: Turion-style pinned card. --p (0..1) is set by home.js section 13 ---- */
.closing{--p:0;position:relative;height:200vh;padding:0}
.cl-stick{position:sticky;top:0;height:100vh}
.cl-card{position:relative;height:100%;overflow:hidden;background:#0b0f14;isolation:isolate;color:#fff}
.cl-photo,.cl-night{position:absolute;left:0;right:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:50% 62%;translate:0 calc(var(--p) * -5%);will-change:translate}
.cl-night{background:50% 62%/cover no-repeat;opacity:0;transition:opacity .6s var(--ease)}
[data-theme="dark"] .cl-night{background-image:var(--cl-night,url(/site/img/closing-lake-night.webp));opacity:1}
[data-theme="dark"] .cl-title,[data-theme="dark"] .cl-tele dd{color:#f2f5f8}
[data-theme="dark"] .cl-tele{color:rgba(242,245,248,.6)}
/* dark tail: the FAQ and footer carry data-theme=dark themselves so they stay dark in the light theme too */
.tail{background:var(--bg);color:var(--ink)}
footer.tail{background:#0b0f14;color:#c9d1da;border-color:var(--line)}
.cl-shade{position:absolute;inset:0;background:linear-gradient(to top,#07090c 0%,rgba(7,9,12,.9) 24%,rgba(7,9,12,0) 58%);opacity:clamp(0,(var(--p) - .22) / .35,1)}
.cl-tele{position:absolute;top:calc(var(--nav) + 9%);margin:0;display:grid;grid-template-columns:auto auto;gap:calc(6*var(--u)) calc(22*var(--u));font:400 calc(13*var(--u))/1.4 var(--text);color:rgba(11,15,20,.55)}
.cl-tele dd{margin:0;color:#0b0f14;font-weight:500}
.cl-eb{position:absolute;left:3%;top:calc(var(--nav) + calc(26*var(--u)));margin:0}
.cl-tl{left:3%}.cl-tr{right:3%}
.cl-title{position:absolute;left:0;right:0;top:44%;margin:0;text-align:center;font:400 clamp(calc(96*var(--u)),13vw,calc(250*var(--u)))/1 var(--display);letter-spacing:-.045em;color:#0b0f14;translate:0 calc(-50% - var(--p) * 120vh);will-change:translate}
.cl-text{--t:clamp(0,(var(--p) - .36) / .3,1);position:absolute;left:0;right:0;bottom:0;padding:0 3% 5%;display:grid;grid-template-columns:1fr 1fr;gap:calc(24*var(--u)) 6%;align-items:end;opacity:var(--t);translate:0 calc((1 - var(--t)) * calc(40*var(--u)))}
.cl-lead{font:500 clamp(calc(24*var(--u)),2.3vw,calc(36*var(--u)))/1.2 var(--display);letter-spacing:-.02em;max-width:16em;margin:0}
.cl-side p{font-size:calc(16*var(--u));line-height:1.5;max-width:34em;margin:0 0 calc(20*var(--u));color:rgba(255,255,255,.82)}
.cl-side .hero-acts{justify-content:flex-start}
.cl-side .lnk{color:#fff}
@media(max-width:768px){.closing{height:auto}.cl-stick{position:static;height:100svh}.cl-title{top:24%;translate:0 0;font-size:clamp(calc(56*var(--u)),17vw,calc(96*var(--u)))}.cl-tele{display:none}.cl-photo,.cl-night{translate:none}.cl-text{grid-template-columns:1fr;padding:0 6% 8%;gap:calc(16*var(--u))}.cl-side p{margin-bottom:calc(14*var(--u))}}
@media(prefers-reduced-motion:reduce){.closing{height:auto}.cl-stick{position:static}.cl-title{top:30%;translate:0 -50%}.cl-photo,.cl-night{translate:none}}

/* ---------- 4b. client work walkthrough: steps on the left, the real screen for the active step on the right ---------- */
.wt-p{display:none;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:clamp(calc(28*var(--u)),3.4vw,calc(72*var(--u)));align-items:start}
.wt-p.on{display:grid}
.wt-steps{list-style:none;border-top:1px solid var(--line)}
.wt-steps li{border-bottom:1px solid var(--line)}
.wt-steps button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:calc(16*var(--u));width:100%;padding:calc(18*var(--u)) 0 calc(20*var(--u));position:relative}
.wt-steps .n{font:500 calc(13*var(--u))/1.6 var(--text);color:var(--mute);grid-row:span 2}
.wt-steps b{font:500 clamp(calc(17*var(--u)),1.15vw,calc(22*var(--u)))/1.3 var(--display);color:var(--mute);transition:color .3s}
.wt-steps p{grid-column:2;font-size:clamp(calc(15*var(--u)),.95vw,calc(18*var(--u)));line-height:1.5;color:var(--mute);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s,margin .5s var(--ease)}
.wt-steps li.on b{color:var(--ink)}
.wt-steps li.on p{max-height:calc(120*var(--u));opacity:1;margin-top:calc(8*var(--u))}
.wt-steps button:hover b{color:var(--ink)}
.wt-steps button:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:calc(4*var(--u));border-radius:calc(4*var(--u))}
.wt-steps .wt-bar{position:absolute;left:0;bottom:-1px;height:calc(2*var(--u));width:0;background:var(--brand)}
.wt-steps li.on .wt-bar{width:calc(var(--p,0) * 100%);transition:width .1s linear}
.wt-stage{position:relative;aspect-ratio:16/10.4;background:radial-gradient(52% 62% at 50% 50%,rgba(26,143,208,.30) 0%,rgba(31,95,151,.12) 45%,rgba(29,58,99,0) 78%),var(--soft);border-radius:calc(24*var(--u));overflow:hidden}
.wt-s{position:absolute;inset:6% 6% 0;display:flex;justify-content:center;align-items:flex-start;margin:0;opacity:0;transform:translateY(calc(20*var(--u)));transition:opacity .5s var(--ease),transform .6s var(--ease)}
.wt-s.on{opacity:1;transform:none}
.wt-s.desk{flex-direction:column;justify-content:flex-start;align-items:stretch;background:#fff;border-radius:calc(14*var(--u)) calc(14*var(--u)) 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 calc(24*var(--u)) calc(60*var(--u)) rgba(30,60,90,.14)}
.wt-chrome{display:flex;align-items:center;gap:calc(6*var(--u));height:calc(34*var(--u));padding:0 calc(14*var(--u));border-bottom:1px solid #eceef1;flex:none;background:#fafbfc}
.wt-chrome i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;background:#dcdfe4}
.wt-chrome span{margin:0 auto;font:400 calc(12*var(--u))/1 var(--text);color:#6b7280;background:#fff;border:1px solid #eceef1;border-radius:calc(6*var(--u));padding:calc(5*var(--u)) calc(40*var(--u))}
.wt-s.desk img{display:block;width:100%;height:auto}
.wt-s.phone{inset:6% 0 6%}
.wt-s.phone img{height:100%;width:auto;border-radius:calc(30*var(--u));border:calc(8*var(--u)) solid #11151b;box-shadow:0 calc(24*var(--u)) calc(60*var(--u)) rgba(30,60,90,.2);background:#fff}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.wt-s.desk.on:hover,.wt-s.phone.on img:hover{transform:scale(1.02)}.wt-s.phone img{transition:transform .6s var(--ease)}}
[data-theme="dark"] .wt-stage{background:radial-gradient(52% 62% at 50% 50%,rgba(26,143,208,.34) 0%,rgba(29,58,99,.16) 45%,rgba(29,58,99,0) 78%),#121820}  /* glow from the centre, behind the screen */
@media (max-width:900px){
  .wt-p.on{grid-template-columns:1fr}
  .wt-stage{order:-1}
}


/* ---------- 20. phones (≤767px), 2026-10-23: compact header + full-screen menu, Apple-style swipe rows with dots and folding footer.
   Everything below is phone-only apart from hiding the phone-only parts on larger screens; desktop renders as before. ---------- */
.nav-quote,.cap-cards,.wt-m,.sw-dots{display:none}
.fcols summary{display:block;list-style:none}
.fcols summary::-webkit-details-marker{display:none}
.fcols summary.h{margin-bottom:calc(15*var(--u))} /* the 6px under a heading + the 9px gap the heading had in its flex column */
.mmenu .theme-t{margin:0 0 0 auto;width:auto;height:calc(44*var(--u));padding:0 calc(16*var(--u));gap:calc(8*var(--u));display:inline-flex;align-items:center;border-radius:calc(999*var(--u));font:500 calc(14*var(--u))/1 var(--text)}
.mmenu .theme-t:hover{transform:none}
@media (min-width:768px){.fcols summary{pointer-events:none}.mmenu .theme-t{display:none}} /* tablets keep the switch in the header */

@media (max-width:767px){
  :root{--nav:calc(56*var(--u))}

  /* header: logo, compact quote pill, menu button; the theme switch lives in the menu */
  .nav{gap:calc(6*var(--u));padding:0 calc(6*var(--u)) 0 calc(16*var(--u))}
  .nav .logo img{height:calc(24*var(--u))}
  .nav .logo{display:flex;align-items:center;min-height:calc(44*var(--u))}
  .nav-quote{display:inline-flex;margin-left:auto;height:calc(44*var(--u));padding:0 calc(16*var(--u));border:calc(2*var(--u)) solid transparent;background-clip:padding-box;font-size:calc(14*var(--u));transition:opacity .2s,visibility .2s} /* 40px pill in a 44px target */
  .menu-open .nav-quote{opacity:0;visibility:hidden}
  #themeT{display:none}
  .btn-primary{background:#0d6fa8}.btn-primary:hover{background:#0b5e8f} /* white text on the brand blue is 3.6:1; this is 5.4:1 */
  .burger{width:calc(44*var(--u));height:calc(44*var(--u));margin-left:0}
  .burger span{left:calc(12*var(--u));right:calc(12*var(--u))}
  .burger span:nth-child(1){top:calc(16*var(--u))}.burger span:nth-child(2){top:calc(21.5*var(--u))}.burger span:nth-child(3){top:calc(27*var(--u))}
  .menu-open .burger span:nth-child(1),.menu-open .burger span:nth-child(3){top:calc(21.5*var(--u))}

  /* hero: one screen, people in frame (portrait crop / centred), compact glass panel, stacked form */
  .hero2{padding:calc(var(--nav) + calc(8*var(--u))) calc(8*var(--u)) calc(8*var(--u))}
  .hcard{height:calc(100svh - var(--nav) - calc(16*var(--u)));min-height:calc(560*var(--u));border-radius:calc(22*var(--u))}
  [data-theme="dark"] .hnight{background-image:var(--hero-night-m,var(--hero-night,url(/site/img/hero-office-night-2.webp)))}
  .hview{inset:0;height:auto;padding:calc(10*var(--u))}
  .glass{padding:calc(18*var(--u)) calc(18*var(--u)) calc(16*var(--u));border-radius:calc(18*var(--u))}
  .eb2{font-size:calc(11*var(--u));letter-spacing:.08em}
  .glass h1{display:grid;font-size:calc(32*var(--u));line-height:1.08;margin-top:calc(8*var(--u));min-height:0}
  .glass h1>span{grid-area:1/1}
  .glass h1 .sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;color:transparent} /* the full heading holds the panel's height while the visible copy types over it */
  .glass .sub{font-size:calc(15*var(--u));line-height:1.45;margin-top:calc(10*var(--u))}
  .chk{margin:calc(12*var(--u)) 0;font-size:calc(13*var(--u))}
  .chk i{width:calc(12*var(--u));height:calc(12*var(--u))}
  .hform{flex-direction:column;gap:calc(8*var(--u))}
  .hform input,.hform .btn{flex:none;width:100%;max-width:none;height:calc(48*var(--u));border-radius:calc(12*var(--u))}
  .hform .btn{justify-content:center;font-size:calc(16*var(--u))}

  /* one-line brief: field and button stacked, like the hero form */
  .bar{flex-direction:column;gap:calc(6*var(--u));border-radius:calc(16*var(--u));padding:calc(6*var(--u))}
  .bar input{flex:none;height:calc(48*var(--u));padding:0 calc(14*var(--u))}
  .bar .btn{justify-content:center;height:calc(48*var(--u));border:0;border-radius:calc(12*var(--u))}

  /* swipe row: client-work steps only (every other section has its own pattern, block 21) */
  .wt-m{scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .wt-m::-webkit-scrollbar,.cw-tabs::-webkit-scrollbar{display:none}
  .wt-m{display:flex;gap:calc(12*var(--u));overflow-x:auto;margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));padding:calc(4*var(--u)) var(--gut) calc(22*var(--u))}
  .sw-dots{display:flex;justify-content:center;margin-top:-10px}
  .sw-dots button{all:unset;flex:0 1 calc(44*var(--u));min-width:calc(22*var(--u));height:calc(44*var(--u));display:grid;place-items:center;cursor:pointer}
  .sw-dots button::before{content:"";width:calc(8*var(--u));height:calc(8*var(--u));border-radius:calc(99*var(--u));background:var(--mute);opacity:.45;transition:width .3s var(--ease),opacity .3s,background .3s}
  .sw-dots button[aria-current]::before{width:calc(22*var(--u));background:var(--brand);opacity:1}
  .sw-dots button:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:-8px;border-radius:calc(14*var(--u))}

  /* what we do */
  .hz-pin{padding-top:0}
  .hc .term p{font-size:inherit;line-height:inherit;color:inherit;max-width:none;margin:0;padding:0} /* the card's own p style was leaking into the mock's terminal lines */

  /* capabilities: the 12-title list becomes the gallery (block 21) */
  #build .sol{display:none}
  .cap-card{flex:none;width:80vw;display:flex;flex-direction:column}
  .cap-media{position:relative;aspect-ratio:70/52;border-radius:calc(14*var(--u));overflow:hidden;background:var(--soft);display:grid;place-items:center}
  .cap-media img{width:100%;height:100%;object-fit:cover;object-position:left top}
  .cap-media.tall img{width:auto;height:90%;object-fit:contain;border-radius:calc(12*var(--u));box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) rgba(30,60,90,.18)}
  .cap-media .mock{position:absolute;inset:0}
  .cap-media .mk{--w:56}
  .cap-card>small{margin:calc(14*var(--u)) calc(2*var(--u)) 0}
  .cap-card>h3{margin:calc(6*var(--u)) calc(2*var(--u)) 0;font:500 calc(22*var(--u))/1.2 var(--display)}
  .cap-card>p{margin:calc(6*var(--u)) calc(2*var(--u)) 0;font-size:calc(15*var(--u));line-height:1.45;color:var(--mute)}
  .cap-card .lnk{margin:auto calc(2*var(--u)) 0;padding-top:calc(6*var(--u));align-self:flex-start}
  .cap-cards{display:flex;gap:calc(12*var(--u));overflow-x:auto;scrollbar-width:none} /* without JS: a plain swipe row */

  /* client work: product chips scroll sideways, each step is a swipe card (screen on top, step under it) */
  .cw-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:calc(20*var(--u)) calc(-1*var(--gut)) calc(12*var(--u));padding:calc(2*var(--u)) var(--gut)}
  .cw-tabs button{flex:none;min-height:calc(44*var(--u));justify-content:center}
  .wt-p.on{display:block}
  .wt-steps,.wt-stage{display:none}
  .wt-c{flex:none;width:84vw;scroll-snap-align:start}
  .wt-cm{aspect-ratio:16/11;border-radius:calc(20*var(--u));background:var(--soft);overflow:hidden;display:flex;justify-content:center;align-items:flex-end;padding:calc(16*var(--u)) calc(16*var(--u)) 0}
  .wt-cm.desk img{width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:calc(10*var(--u)) calc(10*var(--u)) 0 0;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 calc(10*var(--u)) calc(30*var(--u)) rgba(30,60,90,.14)}
  .wt-cm.phone{align-items:center;padding:calc(12*var(--u))}
  .wt-cm.phone img{height:100%;width:auto;border-radius:calc(18*var(--u));border:calc(5*var(--u)) solid #11151b;background:#fff}
  .wt-c .n{display:block;margin:calc(14*var(--u)) calc(2*var(--u)) 0;font:500 calc(13*var(--u))/1 var(--text);color:var(--mute)}
  .wt-c>h3{margin:calc(6*var(--u)) calc(2*var(--u)) 0;font:500 calc(19*var(--u))/1.3 var(--display)}
  .wt-c>p{margin:calc(6*var(--u)) calc(2*var(--u)) 0;font-size:calc(15*var(--u));line-height:1.5;color:var(--mute)}
  [data-theme="dark"] .wt-cm{background:#121820}

  /* tap targets */
  .lnk:not(p .lnk),.hc .lnk,.why2-links a,.crumb,.fbrand a,.facts dd a{display:inline-flex;align-items:center;min-height:calc(44*var(--u))}
  .form label:has(>input[type="checkbox"]){min-height:calc(44*var(--u))}
  p>.lnk:only-child,.prose p>a:only-child{padding-block:calc(12*var(--u))} /* a link alone on its line: taller hit area, same layout */
  .form input[type="checkbox"]{width:calc(20*var(--u))!important;height:calc(20*var(--u));accent-color:var(--brand)}

  /* footer: brand, folding link groups, contact block, Ask AI, legal line */
  footer{padding:calc(36*var(--u)) var(--gut) calc(28*var(--u))}
  .fgrid{gap:calc(24*var(--u))}
  .fcols{grid-template-columns:1fr;gap:0}
  .fcols div{gap:0}
  .fcols details{border-bottom:1px solid var(--line)}
  .fcols details:first-child{border-top:1px solid var(--line)}
  .fcols summary.h{display:flex;align-items:center;justify-content:space-between;min-height:calc(52*var(--u));margin:0;cursor:pointer;font-size:calc(13*var(--u))}
  .fcols summary.h::after{content:"";width:calc(7*var(--u));height:calc(7*var(--u));margin-right:calc(6*var(--u));border:solid currentColor;border-width:0 calc(1.5*var(--u)) calc(1.5*var(--u)) 0;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
  .fcols details[open] summary.h::after{transform:translateY(calc(2*var(--u))) rotate(-135deg)}
  .fcols details>div{padding-bottom:calc(10*var(--u))}
  .fcols a{display:flex;align-items:center;min-height:calc(44*var(--u));font-size:calc(15*var(--u))}
  .fcols>div{margin-top:calc(28*var(--u))}
  .fcols .t{padding:calc(4*var(--u)) 0;font-size:calc(15*var(--u))}
  .ai{margin-top:calc(28*var(--u))}
  .ai a{display:inline-flex;align-items:center;min-height:calc(44*var(--u));padding:0 calc(16*var(--u))}
  .legal{flex-direction:column;gap:calc(6*var(--u))}
}

/* ---------- 21. phones v2 (2026-10-23): a different pattern per section (home.js 14). The phone-only parts are
   built at every width and hidden here on larger screens, so tablets and desktop render exactly as before. ---------- */
.cap-pill,.run-m,.ap,.ap-bar,.seg-i,.hc-dim,.tl,.gal-bar,.pbar,.why-more,.pj-dots span{display:none}
.run-list h3 button{all:unset;cursor:pointer}
.run-list h3 button:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:calc(4*var(--u))}
@keyframes ap{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bub{to{transform:translateY(-10px)}}
@keyframes rise{from{opacity:0;transform:translateY(calc(12*var(--u)))}}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}

@media (max-width:767px){
  /* section headings: words fade up line by line (home.js tags each word with its line as --l) */
  .rv.rv-lines{opacity:1;transform:none}
  .rv-lines .lw{display:inline-block;opacity:0;transform:translateY(calc(16*var(--u)));transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--l,0) * 80ms)}
  .rv-lines.in .lw{opacity:1;transform:none}

  /* eyebrows: the short labels the data already has, as small caps above the title */
  .cap-card>small,.steps6 small,.wt-c .n{font:600 calc(11*var(--u))/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
  .steps6 small::before{content:"Step "}

  /* what we do: sticky stacking cards. Each pins under the header a little lower than the one before; home.js scales and
     dims a card as the next one slides over it */
  #whatwedo .hz-pin{overflow:visible}
  #whatwedo .hz-track{display:block;overflow:visible;scroll-snap-type:none;padding:0 var(--gut)}
  #whatwedo .hc{position:sticky;top:calc(var(--nav) + calc(12*var(--u)) + var(--i,0) * calc(10*var(--u)));width:auto;margin:0 0 calc(20*var(--u));transform-origin:50% 0}
  .hc-dim{display:block;position:absolute;inset:0;border-radius:inherit;background:#000;opacity:0;pointer-events:none}

  /* capabilities: template gallery. Label strip, centre card with a caption pill, smaller blurred neighbours */
  .js .gal-bar{display:flex;align-items:center;gap:calc(4*var(--u));margin:0 calc(-1 * var(--gut)) calc(18*var(--u));padding:0 calc(10*var(--u)) 0 calc(var(--gut) - calc(10*var(--u)))}
  .gal-tabs{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - calc(28*var(--u))),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - calc(28*var(--u))),transparent)}
  .gal-tabs::-webkit-scrollbar{display:none}
  .gal-tabs button{all:unset;flex:none;position:relative;display:inline-flex;align-items:center;height:calc(44*var(--u));padding:0 calc(10*var(--u));font:500 calc(15*var(--u))/1 var(--display);color:#767676;cursor:pointer;transition:color .3s}
  .gal-tabs button[aria-selected="true"]{color:var(--ink)}
  .gal-tabs button:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:-6px;border-radius:calc(10*var(--u))}
  .gal-tabs .ap-bar{display:block;position:absolute;left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(6*var(--u));height:calc(2*var(--u));border-radius:calc(2*var(--u));background:currentColor;transform:scaleX(0);transform-origin:0 0}
  [data-theme="dark"] .gal-tabs button{color:var(--mute)}
  [data-theme="dark"] .gal-tabs button[aria-selected="true"]{color:var(--ink)}
  .js #build .cap-cards{display:grid;overflow:visible;margin:0;padding:0;touch-action:pan-y}
  .js #build .cap-card{grid-area:1/1;width:76%;justify-self:center;padding:0;background:none;border:0;box-shadow:none;cursor:pointer;transition:transform .6s var(--ease),opacity .6s var(--ease)}
  .js #build .cap-card[data-pos="on"]{z-index:1;cursor:auto}
  .js #build .cap-card[data-pos="prev"]{transform:translateX(-82%) scale(.86);opacity:.75}
  .js #build .cap-card[data-pos="next"]{transform:translateX(82%) scale(.86);opacity:.75}
  .js #build .cap-card[data-pos="fl"]{transform:translateX(-180%) scale(.7);opacity:0;pointer-events:none}
  .js #build .cap-card[data-pos="fr"]{transform:translateX(180%) scale(.7);opacity:0;pointer-events:none}
  .js #build .cap-media{aspect-ratio:4/3.3;border-radius:calc(20*var(--u));box-shadow:0 1px calc(2*var(--u)) rgba(0,0,0,.06),0 calc(16*var(--u)) calc(36*var(--u)) rgba(30,60,90,.16);transition:filter .6s var(--ease)}
  .js #build .cap-card:not([data-pos="on"]) .cap-media{filter:blur(calc(2*var(--u)))}
  .js #build .cap-card>:not(.cap-media){transition:opacity .4s var(--ease)}
  .js #build .cap-card:not([data-pos="on"])>:not(.cap-media){opacity:0;visibility:hidden}
  .js #build .cap-card>small{margin-top:calc(18*var(--u))}
  .cap-pill{display:block;position:absolute;left:calc(10*var(--u));bottom:calc(10*var(--u));max-width:calc(100% - calc(20*var(--u)));padding:calc(8*var(--u)) calc(12*var(--u));border-radius:calc(999*var(--u));background:rgba(255,255,255,.94);color:#0b0f14;font:500 calc(12*var(--u))/1 var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 calc(4*var(--u)) calc(14*var(--u)) rgba(0,0,0,.14)}

  /* client work + projects: Apple segmented controls; the sliding pill is home.js seg() */
  .cw-tabs,.pj-dots{position:relative;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;max-width:100%;box-sizing:border-box;overflow-x:auto;scrollbar-width:none;padding:calc(2*var(--u));border-radius:calc(999*var(--u));background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
  .pj-dots::-webkit-scrollbar{display:none}
  .cw-tabs{margin:calc(20*var(--u)) 0 calc(14*var(--u))}
  .cw-tabs button,.pj-dots button,.pj-dots button[aria-selected="true"]{all:unset;position:relative;z-index:1;flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:auto;height:calc(44*var(--u));min-height:0;padding:0 calc(16*var(--u));border-radius:calc(999*var(--u));font:500 calc(14*var(--u))/1 var(--display);color:var(--ink);cursor:pointer;transition:color .3s}
  .cw-tabs button small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* tagline stays for screen readers */
  [data-theme="dark"] .cw-tabs button{background:none;border:0;color:var(--ink)}
  .cw-tabs:has(.seg-i.set) button.on,.pj-dots:has(.seg-i.set) button[aria-selected="true"]{background:none;color:#fff}
  [data-theme="dark"] .cw-tabs:has(.seg-i.set) button.on,[data-theme="dark"] .pj-dots:has(.seg-i.set) button[aria-selected="true"]{color:#000}
  .pj-dots button::before{content:none}
  .cw-tabs button:focus-visible,.pj-dots button:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:-2px}
  .seg-i{display:block;position:absolute;left:0;top:calc(2*var(--u));height:calc(44*var(--u));visibility:hidden;pointer-events:none}
  .seg-i.set{visibility:visible}
  .seg-i b{position:absolute;left:0;top:0;width:calc(22*var(--u));height:calc(44*var(--u));background:#000}
  .seg-i b:nth-child(1){border-radius:calc(22*var(--u)) 0 0 calc(22*var(--u))}
  .seg-i b:nth-child(2){width:1px;transform-origin:0 0}
  .seg-i b:nth-child(3){border-radius:0 calc(22*var(--u)) calc(22*var(--u)) 0}
  .seg-i.go b{transition:transform .3s var(--ease)}
  [data-theme="dark"] .seg-i b{background:#fff}
  .pj-dots span{display:inline}
  .pj-dots .ap-bar{display:block;position:absolute;left:calc(16*var(--u));right:calc(16*var(--u));bottom:calc(6*var(--u));height:calc(2*var(--u));border-radius:calc(2*var(--u));background:currentColor;transform:scaleX(0);transform-origin:0 0}

  /* projects: tabs and pause on top, slides come in from the right */
  #projects{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(6*var(--u))}
  #projects>.split{flex:0 0 100%}
  #projects .pj-dots{order:1;flex:0 1 auto;min-width:0;max-width:calc(100% - calc(50*var(--u)));margin:0 0 calc(22*var(--u))}
  #projects>.ap{order:2;margin:0 0 calc(22*var(--u))}
  #projects .pj{order:3;flex:0 0 100%;min-width:0;touch-action:pan-y}
  .pj-s{transform:translateX(calc(28*var(--u)));transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s .6s}
  .pj-s.on{transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

  /* round play/pause next to anything that advances on its own; the active item's .ap-bar shows the time left */
  .ap{display:grid;place-items:center;flex:none;width:calc(44*var(--u));height:calc(44*var(--u));padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
  .ap::before{content:"";grid-area:1/1;width:calc(34*var(--u));height:calc(34*var(--u));border-radius:50%;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
  .ap::after{content:"";grid-area:1/1;box-sizing:border-box;width:calc(10*var(--u));height:calc(12*var(--u));border:solid currentColor;border-width:0 calc(3*var(--u))}
  .ap-off .ap::after{width:0;height:0;margin-left:calc(3*var(--u));border-width:calc(6*var(--u)) 0 calc(6*var(--u)) calc(10*var(--u));border-color:transparent transparent transparent currentColor}
  .ap:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:-2px;border-radius:50%}
  .ap-vis:not(.ap-off) [aria-selected="true"]>.ap-bar,.ap-vis:not(.ap-off) li.on>.ap-bar{animation:ap var(--ap,5s) linear}
  .agent-grid>.ap{grid-row:2;grid-column:1;align-self:end;justify-self:end;position:relative;z-index:1;margin:0 calc(6*var(--u)) calc(6*var(--u)) 0} /* in the chat card's corner */

  /* after launch: a plain swipe row (the user's call, 2026-10-23): same-height screens, the phone one narrower, the next
     card peeking, dots under it (home.js 12); every card links to the page that explains it */
  .ops{display:flex;gap:calc(12*var(--u));align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;margin:calc(8*var(--u)) calc(-1 * var(--gut)) 0;padding:calc(4*var(--u)) var(--gut) calc(22*var(--u))}
  .oc{width:82vw;scroll-snap-align:start}
  .oc:nth-child(2){width:34.6vw} /* 9:16 at the 4:3 cards' height (82vw × .75) */
  .oc>img{border-radius:calc(12*var(--u))}
  .oc:nth-child(2)>img{border-radius:calc(16*var(--u))}
  .oc .cap{margin-top:calc(10*var(--u));font:500 calc(15*var(--u))/1.3 var(--display)}
  .ops .rv{opacity:1;transform:none}

  /* operations: accordion. The open row holds its text, its screen and a progress line */
  .run{display:block}
  .run-view{display:none}
  .run-list{border-top:1px solid var(--line)}
  .run-list li{position:relative;padding:0;border-bottom:1px solid var(--line);cursor:auto}
  .run-list h3{font:500 calc(20*var(--u))/1.3 var(--display);color:var(--mute)}
  .run-list li.on h3{color:var(--ink)}
  .run-list h3 button{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:calc(12*var(--u));width:100%;min-height:calc(60*var(--u))}
  .run-list h3 button::after{content:"";flex:none;width:calc(8*var(--u));height:calc(8*var(--u));margin-right:calc(6*var(--u));border:solid currentColor;border-width:0 calc(1.5*var(--u)) calc(1.5*var(--u)) 0;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
  .run-list li.on h3 button::after{transform:translateY(calc(2*var(--u))) rotate(-135deg)}
  .run-list h3 button:focus-visible{outline-offset:-2px;border-radius:calc(6*var(--u))}
  .run-list p{display:none}
  .run-list li.on p{display:block;max-height:none;margin:0 0 calc(16*var(--u));animation:rise .5s var(--ease)}
  .run-list li.on .run-m{display:block;width:100%;height:auto;margin:0 0 calc(22*var(--u));border-radius:calc(12*var(--u));box-shadow:0 0 0 1px rgba(0,0,0,.06),0 calc(16*var(--u)) calc(36*var(--u)) rgba(30,60,90,.14);animation:rise .6s var(--ease)}
  .run-list .ap-bar{display:block;position:absolute;left:0;right:0;bottom:-1px;height:calc(2*var(--u));background:var(--ink);transform:scaleX(0);transform-origin:0 0}
  .run{position:relative}
  .run>.ap{position:absolute;right:0;top:calc(-52*var(--u))} /* in the gap above the list: adding it moves nothing */

  /* steps: vertical timeline. home.js draws the line (.tl) down to the middle of the screen and lights the steps above it */
  .steps6{position:relative;border-top:0}
  .steps6>div{border:0!important;padding:calc(14*var(--u)) 0;gap:calc(16*var(--u))}
  .steps6 svg{position:relative;z-index:1;width:calc(44*var(--u));height:calc(44*var(--u));padding:calc(10*var(--u));box-sizing:border-box;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--line);color:var(--mute);transform:scale(.86);transition:transform .4s var(--ease)}
  .steps6 .lit svg{background:var(--brand);color:#fff;box-shadow:none;transform:none}
  .tl{display:block;position:absolute;left:calc(21*var(--u));width:calc(2*var(--u));background:var(--line);pointer-events:none}
  .tl b{display:block;height:100%;background:var(--brand);transform:scaleY(0);transform-origin:0 0}

  /* reviews: client faces and logos float as round bubbles above the heading; the reviews stack and reveal one by one */
  .company{padding-top:calc(250*var(--u))}
  .fl8{display:block;height:calc(250*var(--u))}
  .fl8>*{left:auto!important;right:auto!important;width:var(--s)!important;aspect-ratio:1;border-radius:50%!important;overflow:hidden;box-sizing:border-box;animation:bub 6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
  .fl8 .plate{padding:0 calc(12*var(--u))}
  .fl8>:nth-child(1){--s:calc(86*var(--u));left:4%!important;top:calc(92*var(--u))!important}
  .fl8>:nth-child(2){--s:calc(72*var(--u));left:27%!important;top:calc(14*var(--u))!important}
  .fl8>:nth-child(3){--s:calc(64*var(--u));left:44%!important;top:calc(118*var(--u))!important}
  .fl8>:nth-child(4){--s:calc(92*var(--u));left:72%!important;top:calc(22*var(--u))!important}
  .fl8>:nth-child(5){--s:calc(70*var(--u));left:74%!important;top:calc(140*var(--u))!important}
  .fl8>:nth-child(6){--s:calc(58*var(--u));left:52%!important;top:calc(20*var(--u))!important}
  .fl8>:nth-child(7){--s:calc(58*var(--u));left:-4%!important;top:calc(8*var(--u))!important}
  .fl8>:nth-child(8){--s:calc(52*var(--u));left:25%!important;top:calc(160*var(--u))!important}
  .revs{display:grid;grid-template-columns:1fr;gap:calc(12*var(--u))}

  /* why iDefender: Apple cards; the "+" (the whole card) opens a bottom sheet with the full point (home.js) */
  .why2-list{gap:calc(12*var(--u))}
  .why2-list li,.why2-list li:nth-child(n+3){position:relative;border:0!important;border-radius:calc(22*var(--u));background:var(--soft);transform:none}
  .why2-list a{padding:calc(20*var(--u)) calc(64*var(--u)) calc(22*var(--u)) calc(20*var(--u));border-radius:inherit}
  .why2-list p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .why2-list h3::after{content:none}
  .why-more{display:block;position:absolute;inset:0;width:100%;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .why-more::after{content:"+";position:absolute;right:calc(14*var(--u));bottom:calc(14*var(--u));display:grid;place-items:center;width:calc(34*var(--u));height:calc(34*var(--u));border-radius:50%;background:var(--ink);color:var(--bg);font:400 calc(24*var(--u))/1 var(--text)}
  .why-more:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:calc(2*var(--u))}
  .sheet{position:fixed;inset:auto 0 0;width:100%;max-width:none;max-height:85vh;margin:0;padding:0;border:0;border-radius:calc(24*var(--u)) calc(24*var(--u)) 0 0;background:var(--card);color:var(--ink);box-shadow:0 -12px calc(40*var(--u)) rgba(0,0,0,.2);animation:sheet-up .3s var(--ease)}
  .sheet::backdrop{background:rgba(0,0,0,.45);animation:fade .3s}
  .sheet.out{transform:translateY(100%);transition:transform .25s var(--ease)}
  .sheet-in{box-sizing:border-box;max-height:85vh;overflow:auto;padding:calc(28*var(--u)) calc(20*var(--u)) calc(calc(24*var(--u)) + env(safe-area-inset-bottom))}
  .sheet h3{margin:0 calc(48*var(--u)) calc(12*var(--u)) 0;font:500 calc(24*var(--u))/1.2 var(--display)}
  .sheet p{font-size:calc(16*var(--u));line-height:1.6;color:var(--mute)}
  .sheet .lnk{display:inline-flex;align-items:center;min-height:calc(44*var(--u));margin:calc(10*var(--u)) 0 0}
  .sheet-x{position:absolute;top:calc(10*var(--u));right:calc(10*var(--u));width:calc(44*var(--u));height:calc(44*var(--u));padding:0;border:0;border-radius:50%;background:none;color:var(--ink);font:300 calc(30*var(--u))/1 var(--text);cursor:pointer}
  .sheet-x:focus-visible{outline:calc(2*var(--u)) solid var(--brand);outline-offset:-4px}
  html:has(.sheet[open]){overflow:hidden}

  /* inner pages: page bar (home.js) under the header, in its place while the header is hidden */
  .pbar{display:flex;position:fixed;left:0;right:0;top:0;z-index:99;height:calc(52*var(--u));align-items:center;gap:calc(12*var(--u));padding:0 calc(6*var(--u)) 0 calc(16*var(--u));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(calc(12*var(--u)));backdrop-filter:blur(calc(12*var(--u)));border-bottom:1px solid var(--line);transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
  .pbar.on{visibility:visible;transform:translateY(var(--nav));transition:transform .5s var(--ease)}
  .nav.hide+.pbar.on{transform:none}
  .menu-open .pbar{visibility:hidden}
  .pbar b{flex:1;min-width:0;font:600 calc(15*var(--u))/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pbar .btn{flex:none;height:calc(44*var(--u));padding:0 calc(14*var(--u));border:calc(4*var(--u)) solid transparent;background-clip:padding-box;font-size:calc(13*var(--u))}
  [data-theme="dark"] .pbar{background:rgba(7,9,12,.92)}
}
.js #clients:not(.in-view) .fl8>*{animation-play-state:paused}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  #whatwedo .hc{position:relative;top:auto}
  .rv-lines .lw{opacity:1;transform:none}
}

/* ---------- brand gradient (from Variant B, 2026-10-28): navy → blue on primary buttons, the brief bar and small accents ---------- */
:root{--grad:linear-gradient(135deg,#1d3a63 0%,#1f5f97 58%,#1a8fd0 100%)}
.btn-primary{background:var(--grad);color:#fff}
.btn-primary:hover{background:linear-gradient(rgba(8,18,34,.18),rgba(8,18,34,.18)),var(--grad)}
.ask-bar{background:linear-gradient(135deg,#1d3a63 0%,#1f5f97 55%,#1a8fd0 115%)}  /* bright end past the corner: small text stays AA on narrow screens */
.ask-bar .btn-primary{background:#0b0f14}.ask-bar .btn-primary:hover{background:#232b35}
.chk i,.wt-steps .wt-bar,.sw-dots button[aria-current]::before{background:var(--grad)}
@media (min-width:768px){.pj-dots button[aria-selected="true"]{background:var(--grad)}}

/* ---------- two-tone headings and intros (2026-10-28): home.js wraps the part after the opening sentence in .tt2.
   Mixed from currentColor, so it reads as grey on white, dimmed white on dark bands and the gradient bar, in both themes. ---------- */
h1 .tt2,h2 .tt2{color:color-mix(in srgb,currentColor 55%,transparent)}
p .tt2{color:color-mix(in srgb,currentColor 64%,transparent)}

/* ---------- review profiles strip under the hero (_home/trust.tsx) ---------- */
.profiles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(14*var(--u)) calc(28*var(--u));padding:clamp(calc(28*var(--u)),3vw,calc(48*var(--u))) var(--gut) 0}
/* The strip takes the place of the hero → disciplines spacing (#whatwedo's top margin), so the two don't add up. */
.profiles + #whatwedo{margin-top:0}
@media (max-width:767px){.profiles{padding-bottom:calc(48*var(--u))}} /* below 768px the disciplines section isn't pinned, so it has no top spacing of its own */
.profiles-h{font:600 calc(12*var(--u))/1.4 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0}
.profiles ul{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(12*var(--u));list-style:none;margin:0;padding:0}
.profiles a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6*var(--u));min-width:calc(170*var(--u));height:calc(84*var(--u));padding:calc(12*var(--u)) calc(22*var(--u));border:1px solid #e6e6e6;border-radius:calc(14*var(--u));background:#fff;transition:border-color .25s,transform .25s}
.profiles a:hover,.profiles a:focus-visible{border-color:var(--brand);transform:translateY(-2px)}
.profiles img{display:block;height:calc(28*var(--u));width:auto;max-width:calc(140*var(--u))}
.profiles b{font:700 calc(22*var(--u))/1 var(--display);letter-spacing:-.02em;color:#17313b}
.profiles small{font-size:calc(12*var(--u));color:#5e5e5e}
@media (max-width:640px){.profiles{flex-direction:column}.profiles ul{width:100%;flex-direction:column}.profiles a{min-width:0}}
@media (prefers-reduced-motion:reduce){.profiles a{transition:none}.profiles a:hover{transform:none}}