/* AIVO Asia design system. One stylesheet for every page.
   Tokens, chrome, layout, components, motion. Page-specific rules stay
   in the page that needs them. */
/* ============================================================
   AIVO ASIA | HOMEPAGE
   Theme: locked dark. One theme for the whole page, no flipping.
   Accent: electric blue, links / live state / data only.
   Static HTML, CSS and JS. No framework, no build step, no server.
   ============================================================ */
:root{
  /* surfaces */
  --bg:#ffffff;
  --bg-2:#f5f5f7;
  --bg-3:#ededf1;
  --line:#e8e8ed;
  --line-2:#d2d2d7;
  /* type */
  --fg:#16181d;
  --fg-2:#4a4d55;
  --fg-3:#656873;
  /* accent */
  --ac:#0b63ce;
  --ac-2:#0a58bd;
  --ac-dim:#13479e;
  --ok:#1b7f4b;
  /* action */
  --cta:#16181d;
  --cta-fg:#ffffff;

  --font:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* one radius scale, locked */
  --r:10px; --r-lg:16px; --r-pill:100px;

  --max:1200px;
  --pad:clamp(20px,4.4vw,48px);
  --sp:clamp(76px,10vw,148px);
  --eo:cubic-bezier(.16,1,.3,1);
  --e:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);
  font-variation-settings:"wdth" 100;font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}button{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-variation-settings:normal;font-size:.9em}
.disp{font-variation-settings:"wdth" 114;font-weight:600;letter-spacing:-.028em;line-height:1.04}
.skip{position:absolute;left:-9999px;background:var(--cta);color:var(--cta-fg);padding:12px 18px;z-index:600}
.skip:focus{left:0;top:0}
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
::selection{background:var(--ac);color:var(--bg)}

/* scroll progress, CSS scroll-driven. No scroll listener. */
#prog{position:fixed;inset:0 0 auto 0;height:2px;background:var(--ac);z-index:300;
  transform-origin:0 50%;scale:0 1;animation:grow linear both;animation-timeline:scroll(root block)}
@keyframes grow{to{scale:1 1}}
@supports not (animation-timeline:scroll()){#prog{display:none}}

/* ================= HEADER ================= */
#sentinel{position:absolute;top:0;height:1px;width:100%}
.hdr{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid transparent;
  transition:border-color .35s var(--e),background .35s var(--e)}
.hdr.stuck{border-bottom-color:var(--line);background:rgba(255,255,255,.9)}
.hdr .wrap{display:flex;align-items:center;gap:26px;height:78px}
.hdr .logo{height:44px;width:auto;flex:none;transition:opacity .25s var(--e)}
.hdr a:hover .logo{opacity:.82}
.hdr nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.hdr nav>*{flex:none}
.hdr nav a:not(.btn){font-size:14.4px;color:var(--fg-2);text-decoration:none;position:relative;padding:6px 0}
.hdr nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--ac);scale:0 1;transform-origin:left;transition:scale .4s var(--eo)}
.hdr nav a:not(.btn):hover{color:var(--fg)}
.hdr nav a:not(.btn):hover::after{scale:1 1}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);
  border-radius:var(--r);padding:12px;cursor:pointer;min-height:44px;min-width:44px}
.burger span{display:block;width:18px;height:1.6px;background:var(--fg);border-radius:2px;
  transition:translate .32s var(--e),rotate .32s var(--e),opacity .2s}
.burger span+span{margin-top:4.6px}
.burger[aria-expanded="true"] span:nth-child(1){translate:0 6.2px;rotate:45deg}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){translate:0 -6.2px;rotate:-45deg}
@media(max-width:940px){
  .hdr nav{position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:6px var(--pad) 26px;
    clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--eo)}
  .hdr nav.open{clip-path:inset(0 0 0 0)}
  .hdr nav a:not(.btn){padding:16px 0;border-bottom:1px solid var(--line);font-size:16.5px}
  .hdr nav a:not(.btn)::after{display:none}
  .hdr nav .btn{margin-top:20px;justify-content:center}
  .burger{display:block}
}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:14.8px;font-weight:500;
  padding:13px 24px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background .22s var(--e),color .22s var(--e),border-color .22s var(--e),translate .2s var(--eo)}
.btn:hover{translate:0 -2px}
.btn:active{translate:0 1px}
.btn-1{background:var(--cta);color:var(--cta-fg)}
.btn-1:hover{background:#2c2f37}
.btn-2{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn-2:hover{background:var(--bg-2);border-color:#b9b9c0}
.btn-3{background:transparent;color:var(--ac);padding-inline:0}
.btn-3 .arw{transition:translate .34s var(--eo)}
.btn-3:hover{color:var(--ac-2)}
.btn-3:hover .arw{translate:5px 0}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ================= SECTION SYSTEM ================= */
section{padding:var(--sp) 0;position:relative}
.hr{border-top:1px solid var(--line)}
/* a wave divider already separates the sections, so kill the border that would
   otherwise draw a second full-bleed line straight through it */
.wrap:has(.wv)+section{border-top:0}
h2.disp{font-size:clamp(2rem,4.6vw,3.3rem);max-width:17ch;margin-bottom:22px;text-wrap:balance}
.lede{color:var(--fg-2);max-width:56ch;font-size:clamp(1.02rem,1.35vw,1.14rem);line-height:1.58;text-wrap:pretty}
/* eyebrow: rationed to 3 on this page (Products, Grant, Company) */
.eb{display:inline-flex;align-items:center;gap:11px;font-size:12.6px;font-weight:500;color:var(--ac);margin-bottom:18px}
.eb::before{content:"";width:26px;height:1.5px;background:currentColor;transform-origin:left;
  scale:0 1;transition:scale .8s var(--eo) .1s}
.in .eb::before{scale:1 1}

/* ================= HERO (asymmetric split) ================= */
.hero{padding:clamp(40px,5vw,88px) 0 var(--sp)}
.hero .g{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.05rem,3.7vw,2.95rem);max-width:26ch;margin-bottom:26px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln i{display:block;font-style:normal;translate:0 106%;transition:translate 1s var(--eo)}
.hero.go h1 .ln i{translate:0 0}
.hero.go h1 .ln:nth-child(2) i{transition-delay:.1s}
.hero .sub{color:var(--fg-2);font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.55;
  max-width:38ch;margin-bottom:36px}
.hero .fade{opacity:0;translate:0 22px;transition:opacity .9s var(--eo),translate .9s var(--eo)}
.hero.go .fade{opacity:1;translate:0 0}
.hero.go .sub{transition-delay:.28s}
.hero.go .btnrow{transition-delay:.38s}
.hero.go .hero-visual{transition-delay:.34s}
@media(max-width:940px){.hero .g{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.mhours{font-size:8.5px}}

/* ================= STATS (full-width row) ================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px 0;
  margin-top:clamp(38px,4.5vw,58px)}
.stat{padding-right:34px;border-right:1px solid var(--line);min-width:0}
.stat:last-child{border-right:0}
.stat .k{font-size:clamp(1.8rem,3vw,2.4rem);font-variation-settings:"wdth" 106;font-weight:600;
  letter-spacing:-.04em;line-height:1;font-feature-settings:"tnum"}
.stat .l{font-size:13.2px;color:var(--fg-3);margin-top:12px;line-height:1.45}
.stat.hl .k{color:var(--ac)}
@media(max-width:680px){.stat{border-right:0;padding-right:0}}

/* ================= PROBLEM (oversized figures, offset) ================= */
.figs{display:grid;gap:0;margin-top:clamp(40px,5vw,64px)}
.fig{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:clamp(20px,4vw,56px);
  padding:38px 0;border-bottom:1px solid var(--line);align-items:start;
  transition:padding-left .4s var(--eo)}
.fig:first-child{border-top:1px solid var(--line)}
.fig:hover{padding-left:10px}
.fig .n{font-variation-settings:"wdth" 104;font-weight:600;font-size:clamp(1.2rem,1.9vw,1.6rem);
  letter-spacing:-.028em;color:var(--ac);line-height:1.16;overflow-wrap:anywhere}
.fig h3{font-size:1.16rem;font-weight:600;letter-spacing:-.02em;margin-bottom:9px}
.fig p{font-size:15px;color:var(--fg-2);line-height:1.6;max-width:60ch}
@media(max-width:640px){.fig{grid-template-columns:1fr;gap:12px}}

/* ================= SEQUENCE (vertical, offset, connector) ================= */
.seq{margin-top:clamp(44px,5.5vw,72px);position:relative;display:grid;gap:0}
.seq::before{content:"";position:absolute;left:6px;top:12px;bottom:44px;width:1px;background:var(--line-2);
  transform-origin:top;scale:1 0;transition:scale 1.4s var(--eo)}
.in .seq::before{scale:1 1}
.sq{display:grid;grid-template-columns:14px minmax(0,1fr);gap:clamp(20px,3.5vw,44px);
  padding:0 0 clamp(38px,5vw,62px)}
.sq:last-child{padding-bottom:0}
.sq .pip{width:13px;height:13px;border-radius:50%;background:var(--bg);border:1px solid var(--ac);
  margin-top:8px;position:relative}
.sq .pip::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ac);
  scale:0;transition:scale .5s var(--eo)}
.in .sq .pip::after{scale:1}
.in .sq:nth-child(2) .pip::after{transition-delay:.22s}
.in .sq:nth-child(3) .pip::after{transition-delay:.44s}
.sq .body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,3vw,48px);align-items:baseline}
.sq h3{font-size:clamp(1.3rem,2.4vw,1.8rem);font-variation-settings:"wdth" 108;font-weight:600;
  letter-spacing:-.028em;line-height:1.14}
.sq p{font-size:15px;color:var(--fg-2);line-height:1.62}
.sq .when{font-family:var(--mono);font-size:12px;color:var(--fg-3);display:block;margin-top:12px}
@media(max-width:820px){.sq .body{grid-template-columns:1fr;gap:12px}}


/* ================= PRODUCTS (2 col split) ================= */
.prods{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(42px,5vw,66px)}
.prod{padding:0 clamp(26px,3.4vw,46px) 0 0}
.prod+.prod{border-left:1px solid var(--line);padding-left:clamp(26px,3.4vw,46px)}
.prod .PH-DEAD{margin-bottom:30px;transition:translate .45s var(--eo)}
.prod:hover .PH-DEAD{translate:0 -6px}
.prod .name{font-size:1.8rem;font-variation-settings:"wdth" 108;font-weight:600;letter-spacing:-.032em;margin-bottom:7px}
.prod .what{font-size:13px;color:var(--ac);font-weight:500;margin-bottom:18px}
.prod p{font-size:15.2px;color:var(--fg-2);line-height:1.62;margin-bottom:24px}
.prod ul{display:flex;flex-direction:column;gap:13px;margin-bottom:28px}
.prod ul li{font-size:14.4px;color:var(--fg-2);display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start}
.prod ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ac);margin-top:8px}
@media(max-width:880px){.prods{grid-template-columns:1fr}.prod{padding-right:0}
  .prod+.prod{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:52px;margin-top:52px}}

/* ================= AUDIO (real player) ================= */
.player{border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(22,24,29,.05)}
.player .head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.player .head .live{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--fg-3)}
.player .head .live i{width:7px;height:7px;border-radius:50%;background:var(--ok);position:relative}
.player .head .live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ok);
  opacity:0;animation:ping 2.6s var(--eo) infinite}
@keyframes ping{0%{opacity:.6;scale:.5}70%,100%{opacity:0;scale:1.7}}
.player .head .pick{margin-left:auto;display:flex;gap:6px}
.player .head button{background:transparent;border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:5px 13px;font-size:12px;color:var(--fg-3);cursor:pointer;transition:all .22s var(--e);
  min-height:34px}
@media(max-width:760px){.player .head{flex-wrap:wrap}.player .head button{min-height:44px;padding:8px 16px;font-size:13px}}
.player .head button[aria-pressed="true"]{border-color:var(--ac);color:var(--ac);background:rgba(11,99,206,.07)}
.player .head button:hover{color:var(--fg)}
.player .stage{padding:30px 24px 26px}
.wave{display:flex;align-items:center;gap:3px;height:76px;margin-bottom:26px}
.wave i{flex:1;background:var(--line-2);border-radius:3px;height:100%;transform-origin:center;
  scale:1 .14;transition:scale .09s linear,background .3s}
.wave.on i{background:var(--ac)}
.wave.idle i{animation:idle 1.4s var(--e) infinite}
@keyframes idle{0%,100%{scale:1 .12}50%{scale:1 .34}}
.player .ctl{display:flex;align-items:center;gap:16px}
.play{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2);
  display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background .22s var(--e),border-color .22s var(--e),scale .22s var(--eo)}
.play:hover{background:var(--bg-3);border-color:var(--ac);scale:1.06}
.play svg{width:16px;height:16px;fill:var(--fg)}
.player .time{font-family:var(--mono);font-size:12.4px;color:var(--fg-3);flex:none}
.player .cap{font-size:13.6px;color:var(--fg-2);line-height:1.5}

/* ================= SCROLL RAIL (distribution) ================= */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:clamp(40px,5vw,62px);padding-bottom:14px;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-track{background:var(--line)}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.card{scroll-snap-align:start;flex:0 0 clamp(258px,30vw,330px);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 26px 26px;background:var(--bg-2);
  transition:border-color .3s var(--e),translate .3s var(--eo)}
.card:hover{border-color:var(--line-2);translate:0 -4px}
.card .k{font-variation-settings:"wdth" 106;font-weight:600;font-size:2rem;letter-spacing:-.04em;
  color:var(--ac);line-height:1;margin-bottom:16px}
.card h3{font-size:1.04rem;font-weight:600;letter-spacing:-.016em;margin-bottom:9px}
.card p{font-size:14.2px;color:var(--fg-2);line-height:1.58}

/* ================= TRUST (inline row) ================= */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:0;margin-top:clamp(44px,5vw,66px)}
.tc{padding:28px 30px 0 0;border-top:1px solid var(--line)}
.tc b{display:block;font-size:14.8px;font-weight:600;margin-bottom:9px}
.tc span{font-size:13.6px;color:var(--fg-3);line-height:1.58}

/* ================= CALC ================= */
.calc{border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(22,24,29,.05)}
.calc .sl{padding:22px 26px}
.switch{display:flex;align-items:center;gap:14px;cursor:pointer;font-size:13.8px;color:var(--fg-2)}
.switch input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.switch .track{margin-left:auto;flex:none;width:44px;height:25px;border-radius:99px;background:var(--line-2);
  position:relative;transition:background .25s var(--e)}
.switch .knob{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:var(--fg-3);transition:translate .25s var(--eo),background .25s var(--e)}
.switch input:checked ~ .track{background:var(--ac)}
.switch input:checked ~ .track .knob{translate:19px 0;background:var(--bg)}
.switch input:focus-visible ~ .track{outline:2px solid var(--ac);outline-offset:3px}
.calc .r.off{opacity:.32}
.incl{padding:20px 26px 24px;display:grid;gap:9px;border-top:1px solid var(--line)}
.incl li{font-size:13.2px;color:var(--fg-3);display:grid;grid-template-columns:14px 1fr;gap:10px;line-height:1.5}
.incl li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ac);margin-top:7px}
.calc .sl label{display:flex;justify-content:space-between;gap:12px;font-size:13.6px;color:var(--fg-2);margin-bottom:18px}
.calc .sl label b{font-family:var(--mono);font-weight:500;color:var(--fg);font-size:15px}
.calc .r{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 26px;
  border-top:1px solid var(--line);font-size:14.8px}
.calc .r .lbl{color:var(--fg-2)}
.calc .r .val{font-family:var(--mono);font-weight:500;font-feature-settings:"tnum";white-space:nowrap}
.calc .r .val.neg{color:var(--ok)}
.calc .r.tot{background:var(--ac);color:var(--bg);border-top:0;padding:24px 26px}
.calc .r.tot .lbl{color:rgba(255,255,255,.72)}
.calc .r.tot .val{font-family:var(--font);font-variation-settings:"wdth" 106;font-weight:600;
  font-size:1.7rem;letter-spacing:-.035em;color:var(--bg)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:var(--line-2);border-radius:4px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--fg);cursor:pointer;border:4px solid var(--bg-2);box-shadow:0 0 0 1px var(--ac);
  transition:scale .18s var(--eo)}
input[type=range]::-webkit-slider-thumb:hover{scale:1.14}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--fg);
  cursor:pointer;border:4px solid var(--bg-2)}

/* ================= OFFICES ================= */
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:0;margin-top:clamp(42px,5vw,64px)}
.off{padding:28px 28px 0 0;border-top:1px solid var(--line);transition:border-color .3s var(--e)}
.off:hover{border-top-color:var(--ac)}
.off b{display:block;font-size:14.8px;font-weight:600;margin-bottom:11px}
.off span{display:block;font-size:13.2px;color:var(--fg-3);line-height:1.62}
/* padding-block, not extra margin, so the tap target clears 24px without moving the type */
.off .tel{font-family:var(--mono);font-size:12.4px;color:var(--fg-2);margin-top:9px;display:block;
  padding-block:3px;text-decoration:none}
.off .tel:hover{color:var(--ac)}


/* ================= MARQUEE (one per page) ================= */
.marq{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:30px 0;margin-top:clamp(48px,6vw,78px)}
.marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none}
.marq::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.marq::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.mt{display:flex;gap:58px;width:max-content;animation:marq 40s linear infinite}
.marq:hover .mt{animation-play-state:paused}
.mt span{font-size:15.6px;font-weight:500;color:var(--fg-3);white-space:nowrap;transition:color .25s}
.mt span:hover{color:var(--fg)}
@keyframes marq{to{translate:-50% 0}}

/* ================= CLOSE ================= */
.close{text-align:center}
.close h2{max-width:19ch;margin:0 auto 24px}
.close .lede{margin:0 auto 40px;text-align:center}
.close .btnrow{justify-content:center}

/* ================= FOOTER ================= */
footer{border-top:1px solid var(--line);padding:clamp(58px,7vw,86px) 0 50px}
.fg{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:42px}
.fg .logo{height:60px;width:auto;margin-bottom:24px}
.fg p{font-size:14px;color:var(--fg-3);max-width:33ch;line-height:1.62}
.fg h4{font-size:12.8px;font-weight:600;margin-bottom:17px}
.fg li{margin-bottom:3px}
/* inline-block plus padding lifts each link to a 24px tap target, list rhythm unchanged */
.fg a{font-size:14px;color:var(--fg-3);text-decoration:none;transition:color .2s;
  display:inline-block;padding-block:4px}
.fg a:hover{color:var(--ac)}
.fb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:54px;
  padding-top:26px;border-top:1px solid var(--line);font-size:13.2px;color:var(--fg-3)}
.fb a{text-decoration:none;color:inherit}.fb a:hover{color:var(--fg)}
@media(max-width:880px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.fg{grid-template-columns:1fr}}

/* ================= REVEAL ================= */
.js .up{opacity:0;translate:0 26px;transition:opacity .85s var(--eo),translate .85s var(--eo)}
.js .up.in{opacity:1;translate:0 0}
.js .mask{overflow:hidden;padding-bottom:.08em}
.js .mask .mi{display:block;translate:0 106%;transition:translate 1.05s var(--eo)}
.js .mask.in .mi{translate:0 0}
.js .stag>*{opacity:0;translate:0 22px;transition:opacity .74s var(--eo),translate .74s var(--eo)}
.js .stag.in>*{opacity:1;translate:0 0}
.js .stag.in>*:nth-child(2){transition-delay:80ms}
.js .stag.in>*:nth-child(3){transition-delay:160ms}
.js .stag.in>*:nth-child(4){transition-delay:240ms}
.js .stag.in>*:nth-child(5){transition-delay:320ms}
.js .zoom{overflow:hidden}
.js .zoom>*{scale:1.07;transition:scale 1.5s var(--eo)}
.js .zoom.in>*{scale:1}

#toast{position:fixed;left:50%;bottom:30px;translate:-50% 0;z-index:400;background:var(--fg);color:var(--bg);
  font-size:13.6px;font-weight:500;padding:11px 22px;border-radius:var(--r-pill);opacity:0;pointer-events:none;
  transition:opacity .3s var(--e),translate .3s var(--e)}
#toast.on{opacity:1;translate:-50% -8px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .up,.js .stag>*{opacity:1!important;translate:none!important}
  .js .mask .mi{translate:none!important}
  .js .zoom>*{scale:1!important}
  .hero .fade{opacity:1;translate:none}
  .hero h1 .ln i{translate:0}
  .wave i{scale:1 .4}
  .seq::before,.sq .pip::after{scale:1}
}

/* ---- solution benefits (asymmetric, not equal cards) ---- */
.bens{margin-top:clamp(44px,5.5vw,72px);display:grid;gap:0}
.ben{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,64px);
  padding:clamp(30px,4vw,46px) 0;border-top:1px solid var(--line);align-items:start}
.ben:last-child{border-bottom:1px solid var(--line)}
.ben h3{font-size:clamp(1.25rem,2.2vw,1.65rem);font-variation-settings:"wdth" 108;font-weight:600;
  letter-spacing:-.026em;line-height:1.18}
.ben p{font-size:15.2px;color:var(--fg-2);line-height:1.64}
.ben .vs{margin-top:14px;font-size:14px;color:var(--ac);display:inline-flex;align-items:center;gap:8px}
@media(max-width:760px){.ben{grid-template-columns:1fr;gap:12px}}

/* ---- results ---- */
.res{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;margin-top:clamp(40px,5vw,62px)}
.rc{padding:30px 30px 30px 0;border-top:1px solid var(--line)}
.rc .k{font-variation-settings:"wdth" 106;font-weight:600;font-size:clamp(1.7rem,2.8vw,2.2rem);
  letter-spacing:-.04em;color:var(--ac);line-height:1;margin-bottom:14px}
.rc p{font-size:14.4px;color:var(--fg-2);line-height:1.58}
.quote{margin-top:clamp(40px,5vw,60px);border:1px dashed var(--line-2);border-radius:var(--r-lg);
  padding:clamp(26px,4vw,40px);background:var(--bg-2)}
.quote .slot{font-family:var(--mono);font-size:10.5px;color:var(--bg);background:var(--ac);
  padding:5px 10px;border-radius:6px;display:inline-block;margin-bottom:18px}
.quote blockquote{margin:0 0 18px;font-size:clamp(1.15rem,2vw,1.5rem);font-variation-settings:"wdth" 106;
  font-weight:500;letter-spacing:-.02em;line-height:1.35;color:var(--fg-3);max-width:44ch}
.quote cite{font-style:normal;font-size:13.4px;color:var(--fg-3);display:block}
.quote .how{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:13.4px;color:var(--fg-3);max-width:62ch}

/* ---- FAQ ---- */
.faq{margin-top:clamp(40px,5vw,62px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:clamp(1.02rem,1.7vw,1.22rem);font-weight:500;letter-spacing:-.018em;
  transition:color .22s var(--e)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ac)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:1.6px solid var(--fg-3);border-bottom:1.6px solid var(--fg-3);
  translate:0 -60%;rotate:45deg;transition:rotate .3s var(--eo),border-color .22s}
.faq details[open] summary::after{rotate:-135deg;border-color:var(--ac)}
.faq .a{padding:0 0 26px;font-size:15.2px;color:var(--fg-2);line-height:1.66;max-width:66ch}

/* ---- trust bar ---- */
.tb{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:34px;
  padding-top:24px;border-top:1px solid var(--line);font-size:13.4px;color:var(--fg-3)}
.tb b{color:var(--fg-2);font-weight:600}

/* ---- risk reversal ---- */
.rr{margin:clamp(34px,4vw,48px) auto 0;max-width:54ch;border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:26px 28px;background:var(--bg-2);text-align:left}
.rr b{display:block;font-size:14.6px;font-weight:600;margin-bottom:9px}
.rr p{font-size:14.4px;color:var(--fg-2);line-height:1.6}
.rr p+p{margin-top:12px}

/* travelling wave divider. Bars driven by one keyframe with negative
   animation-delays, which makes the crest move along the row. */
.wv{display:flex;align-items:center;gap:3px;height:36px;overflow:hidden;contain:layout;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.wv i{flex:1;min-width:2px;height:100%;border-radius:99px;background:var(--ac);opacity:.26;
  transform-origin:center;scale:1 .12;animation:swell 2.6s ease-in-out infinite}
@keyframes swell{0%,100%{scale:1 .1}50%{scale:1 1}}

/* ================= DESIGN LANGUAGE =================
   No photography. The hero carries a call matrix: 168 cells, one for every
   hour in a week. The dim ones are the hours a person actually covers.
   The lit ones are the hours it covers. That is the whole proposition,
   drawn rather than described. */
.matrix{display:grid;grid-template-columns:repeat(24,1fr);gap:clamp(2px,.32vw,4px)}
.matrix i{aspect-ratio:1;border-radius:2px;background:transparent;box-shadow:inset 0 0 0 1px var(--line);
  transition:background .55s var(--eo),opacity .55s var(--eo),box-shadow .55s var(--eo);opacity:.9}
.matrix i.staffed{background:#bcbdc4;box-shadow:none;opacity:1}
.matrix.go i{background:var(--ac);box-shadow:none;opacity:var(--o,.9)}
.mhours{display:grid;grid-template-columns:repeat(24,1fr);gap:clamp(2px,.32vw,4px);
  margin-top:9px;font-family:var(--mono);font-size:9.5px;color:var(--fg-3)}
.mhours span{text-align:center;opacity:0;min-width:0;overflow:hidden}
.mhours span:nth-child(6n+1){opacity:1}
.mcap{margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--fg-3);letter-spacing:.02em}
.mkey{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:12px}
.mkey div{display:grid;grid-template-columns:12px auto 1fr;gap:11px;align-items:baseline}
.mkey i{width:10px;height:10px;border-radius:2px;translate:0 1px}
.mkey b{font-size:14.6px;font-weight:600;white-space:nowrap}
.mkey span{font-size:13px;color:var(--fg-3);line-height:1.5}
@media(max-width:520px){.mkey div{grid-template-columns:12px 1fr}.mkey b{grid-column:2}.mkey span{grid-column:2}}


/* product blocks carry a large index instead of a picture */
.pnum{font-variation-settings:"wdth" 106;font-weight:600;font-size:clamp(3.2rem,7vw,5.4rem);
  letter-spacing:-.05em;line-height:.86;color:transparent;-webkit-text-stroke:1.4px var(--line-2);
  margin-bottom:22px;transition:-webkit-text-stroke-color .5s var(--e)}
.prod:hover .pnum{-webkit-text-stroke-color:var(--ac)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{font-size:12.4px;color:var(--fg-2);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:6px 13px;transition:border-color .25s var(--e),color .25s var(--e)}
.prod:hover .chip{border-color:#b9b9c0}


/* ---- product comparison: PSG badge and the "not eligible" counterpart ---- */
.pflag{display:inline-flex;align-items:center;gap:8px;font-size:12.2px;font-weight:500;
  padding:6px 13px;border-radius:var(--r-pill);margin-bottom:20px}
.pflag.yes{background:rgba(11,99,206,.07);color:var(--ac);border:1px solid rgba(11,99,206,.22)}
.pflag.no{background:var(--bg-2);color:var(--fg-3);border:1px solid var(--line-2)}
.pstart{margin-top:clamp(30px,4vw,44px);padding-top:22px;border-top:1px solid var(--line)}
.pstart span{display:block;max-width:62ch;font-size:15px;color:var(--fg-2)}

/* ---- AISE chat proof ---- */
.chat{border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;overflow:hidden;
  box-shadow:0 1px 2px rgba(22,24,29,.05)}
.chat .head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);
  font-size:12.4px;color:var(--fg-3)}
.chat .head b{color:var(--fg);font-weight:600;font-size:13.4px}
.chat .head .t{margin-left:auto;font-family:var(--mono);font-size:11px}
.chat .body{padding:20px;display:grid;gap:12px}
.bub{max-width:82%;padding:11px 15px;border-radius:16px;font-size:14.4px;line-height:1.5}
.bub.them{background:var(--bg-2);color:var(--fg);border-bottom-left-radius:5px;justify-self:start}
.bub.us{background:var(--ac);color:#fff;border-bottom-right-radius:5px;justify-self:end}
.bub .meta{display:block;font-size:11px;margin-top:5px;opacity:.72}
.chat .foot{padding:13px 20px;border-top:1px solid var(--line);font-size:12.2px;color:var(--fg-3)}

/* ---- results: capabilities separated from outcomes ---- */
.rlabel{font-family:var(--mono);font-size:11px;color:var(--fg-3);letter-spacing:.04em;
  margin:clamp(34px,4vw,48px) 0 16px}
.pending{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:clamp(24px,3.5vw,34px);
  background:var(--bg-2)}
.pending .slot{font-family:var(--mono);font-size:10.5px;color:#fff;background:var(--fg-3);
  padding:5px 10px;border-radius:6px;display:inline-block;margin-bottom:16px}
.pending p{font-size:14.4px;color:var(--fg-3);line-height:1.6;max-width:64ch}
.pending .fields{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pending .fields span{font-size:12px;color:var(--fg-3);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:5px 12px;background:#fff}


/* =====================================================================
   PAGES BEYOND THE HOMEPAGE
   Everything below is shared by the product, investor, demo and legal
   pages. Same tokens, same rhythm, no second design system.
   ===================================================================== */

/* ---- page hero. Shorter than the homepage hero: sub-pages earn the
   scroll faster because the visitor already chose to be here. ---- */
.phero{padding:clamp(54px,7vw,96px) 0 clamp(38px,5vw,60px)}
.phero h1{font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.03;letter-spacing:-.038em;
  font-variation-settings:"wdth" 96;font-weight:600;max-width:19ch}
.phero .lede{margin-top:22px;max-width:60ch}
.phero .btnrow{margin-top:34px}

/* breadcrumb */
.crumb{display:flex;align-items:center;gap:9px;font-size:12.6px;color:var(--fg-3);margin-bottom:22px;
  font-family:var(--mono);letter-spacing:.02em}
.crumb a{color:var(--fg-3);text-decoration:none;padding-block:4px}
.crumb a:hover{color:var(--ac)}
.crumb span[aria-current]{color:var(--fg-2)}

/* ---- generic column grids ---- */
.cols{display:grid;gap:clamp(24px,3.4vw,44px);margin-top:clamp(38px,5vw,58px)}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.col{border-top:1px solid var(--line);padding-top:22px;transition:border-color .3s var(--e)}
.col:hover{border-top-color:var(--ac)}
.col .k{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ac);margin-bottom:13px}
.col h3{font-size:clamp(1.02rem,1.5vw,1.16rem);font-weight:600;letter-spacing:-.018em;margin-bottom:10px}
.col p{font-size:14.4px;color:var(--fg-2);line-height:1.65}
.col p+p{margin-top:11px}
.col ul{margin-top:12px}
.col li{font-size:14.2px;color:var(--fg-2);line-height:1.6;padding-left:16px;position:relative;margin-bottom:8px}
.col li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--ac)}

/* ---- a big number with a caption under it ---- */
.bignum{font-variation-settings:"wdth" 108;font-weight:600;letter-spacing:-.035em;
  font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--fg);line-height:1.05}
.bignum.ac{color:var(--ac)}

/* ---- comparison table. Becomes stacked cards under 780px, because a
   five-column table on a phone is unreadable at any font size. ---- */
.cmp{margin-top:clamp(36px,4.6vw,54px);border-top:1px solid var(--line-2)}
.cmp .row{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,30px);padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.cmp .row.head{border-bottom-color:var(--line-2)}
.cmp .row.us{background:linear-gradient(90deg,rgba(11,99,206,.045),transparent 70%)}
.cmp .rh{font-size:14.6px;font-weight:600;letter-spacing:-.012em}
.cmp .rh small{display:block;font-family:var(--mono);font-size:11.4px;font-weight:400;
  color:var(--fg-3);margin-top:5px;letter-spacing:.02em}
.cmp .c{font-size:13.6px;color:var(--fg-2);line-height:1.55}
.cmp .row.us .rh{color:var(--ac)}
.cmp .lbl{display:none;font-family:var(--mono);font-size:10.8px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:5px}
@media(max-width:780px){
  .cmp .row{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .cmp .row.head{display:none}
  .cmp .lbl{display:block}
}

/* ---- team ---- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:0;
  margin-top:clamp(36px,4.6vw,54px)}
.person{padding:26px 26px 26px 0;border-top:1px solid var(--line);transition:border-color .3s var(--e)}
.person:hover{border-top-color:var(--ac)}
.person .role{font-family:var(--mono);font-size:11.4px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ac);margin-bottom:9px}
.person b{display:block;font-size:16.4px;font-weight:600;letter-spacing:-.018em;margin-bottom:9px}
.person p{font-size:13.6px;color:var(--fg-2);line-height:1.62}

/* ---- callout. Lighter than .rr, used for scope notes and disclaimers ---- */
.note{border-left:2px solid var(--ac);padding:2px 0 2px 20px;margin-top:clamp(28px,3.4vw,40px);
  max-width:66ch}
.note b{display:block;font-size:14.4px;font-weight:600;margin-bottom:8px}
.note p{font-size:13.8px;color:var(--fg-2);line-height:1.66}
.note p+p{margin-top:10px}
.note.warn{border-left-color:var(--fg-3)}

/* ---- form ---- */
.form{display:grid;gap:18px;margin-top:clamp(30px,3.6vw,42px);max-width:560px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:520px){.f2{grid-template-columns:1fr}}
.field label{display:block;font-size:13px;font-weight:500;color:var(--fg-2);margin-bottom:7px}
.field label .req{color:var(--ac)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--fg);background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;
  transition:border-color .2s var(--e),box-shadow .2s var(--e)}
.field textarea{min-height:112px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3);opacity:.75}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(11,99,206,.16)}
.field .hint{font-size:12.4px;color:var(--fg-3);margin-top:7px;line-height:1.5}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#b3261e}
.field .err{display:none;font-size:12.4px;color:#b3261e;margin-top:7px}
.field.bad .err{display:block}
.form .btn{justify-self:start}
.fnote{font-size:12.6px;color:var(--fg-3);line-height:1.6;max-width:52ch}

/* ---- legal pages ---- */
.legal{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:clamp(28px,5vw,68px);align-items:start}
@media(max-width:860px){.legal{grid-template-columns:1fr}}
.toc{position:sticky;top:96px;border-top:1px solid var(--line);padding-top:18px}
@media(max-width:860px){.toc{position:static}}
.toc b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:12px}
.toc a{display:block;font-size:13.4px;color:var(--fg-2);text-decoration:none;
  padding-block:6px;transition:color .2s}
.toc a:hover{color:var(--ac)}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:600;letter-spacing:-.024em;
  margin-top:clamp(38px,4.4vw,52px);padding-top:22px;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:15.6px;font-weight:600;margin-top:26px;margin-bottom:9px}
.prose p{font-size:15px;color:var(--fg-2);line-height:1.72;margin-top:14px}
.prose ul,.prose ol{margin-top:14px;padding-left:0}
.prose li{font-size:15px;color:var(--fg-2);line-height:1.72;margin-bottom:9px;
  padding-left:18px;position:relative;list-style:none}
.prose li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--ac)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n) ".";width:auto;height:auto;background:none;
  font-family:var(--mono);font-size:12.4px;color:var(--ac);top:.16em}
.prose a{color:var(--ac);text-decoration:none;border-bottom:1px solid rgba(11,99,206,.32)}
.prose a:hover{border-bottom-color:var(--ac)}
.updated{font-family:var(--mono);font-size:12.2px;color:var(--fg-3);letter-spacing:.02em}

/* A visible marker for text a lawyer still has to supply. Deliberately
   loud: it must never survive to production unnoticed. */
.draft{display:block;border:1px dashed var(--line-2);border-left:3px solid #b3261e;
  background:var(--bg-2);padding:14px 16px;margin-top:16px;border-radius:8px}
.draft b{display:block;font-family:var(--mono);font-size:10.8px;letter-spacing:.09em;
  text-transform:uppercase;color:#b3261e;margin-bottom:7px}
.draft span{display:block;font-size:13.4px;color:var(--fg-2);line-height:1.62}

/* ---- gated block, for anything that stays out of public view ---- */
.gate{border:1px solid var(--line-2);border-radius:14px;padding:clamp(24px,3.2vw,34px);
  margin-top:clamp(34px,4.2vw,46px);background:var(--bg-2)}
.gate .k{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:12px}
.gate h3{font-size:clamp(1.16rem,2vw,1.42rem);font-weight:600;letter-spacing:-.024em;margin-bottom:12px}
.gate p{font-size:14.4px;color:var(--fg-2);line-height:1.66;max-width:58ch}
.gate .btnrow{margin-top:22px}
.gate ul{margin-top:16px;columns:2;column-gap:34px}
@media(max-width:600px){.gate ul{columns:1}}
.gate li{font-size:13.6px;color:var(--fg-2);line-height:1.55;padding-left:16px;position:relative;
  margin-bottom:9px;break-inside:avoid}
.gate li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--ac)}

/* The step list also runs inside a half-width column on the demo page, where a
   viewport media query cannot help: the window is 1440px but the container is
   about 530px. A container query sizes it against what it actually sits in.
   The 820px viewport rule above stays as the fallback. */
.seq{container-type:inline-size}
@container (max-width: 560px){
  .sq .body{grid-template-columns:1fr;gap:12px}
}

/* ---------------------------------------------------------------------
   ANIMATED CHAT
   The bubbles stay in normal flow at full height from the first paint, so
   the box never grows and nothing below it moves. Only opacity and a small
   translate animate, which keeps the whole loop on the compositor.
   The typing indicator is absolutely positioned onto the slot the next
   bubble will occupy, so it costs no layout either.
   --------------------------------------------------------------------- */
.chat .body{position:relative}
.js .chat .bub{opacity:0;translate:0 12px;
  transition:opacity .38s var(--eo),translate .44s var(--eo)}
.js .chat .bub.show{opacity:1;translate:0 0}
.js .chat .bub .meta{opacity:0;transition:opacity .32s var(--e) .2s}
.js .chat .bub.show .meta{opacity:.72}

.typing{position:absolute;top:0;display:none;align-items:center;gap:5px;
  padding:13px 16px;border-radius:16px;pointer-events:none;
  opacity:0;transition:opacity .26s var(--e)}
.typing.them{background:var(--bg-2);border-bottom-left-radius:5px;left:20px}
.typing.us{background:var(--ac);border-bottom-right-radius:5px;right:20px}
.typing.on{display:inline-flex;opacity:1}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--fg-3);
  animation:blip 1.3s var(--e) infinite}
.typing.us i{background:rgba(255,255,255,.85)}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blip{0%,58%,100%{opacity:.32;translate:0 0}
                26%{opacity:1;translate:0 -3px}}

/* The header timestamp is when the conversation started and stays put. The
   whole exchange takes under a minute, so a ticking clock would contradict
   the "replied in 2 seconds" line rather than support it. */
.chat .head .t{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  .js .chat .bub{opacity:1!important;translate:none!important}
  .js .chat .bub .meta{opacity:.72!important}
  .typing{display:none!important}
}