/* Base reset, same as the claude.ai artifact skeleton */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: a bright operations desk. Each section is one picture (orbit, flow, laptop, tiles) with a short caption.
   Colour carries meaning: amber = HR sources, teal = AsitApp and safety, blue = directories, rose = leavers. */
:root{
  --bg:#F4F8F7;
  --bg-2:#E9F3F1;
  --surface:#FFFFFF;
  --ink:#0D2B29;
  --muted:#56716E;
  --line:#DCE7E5;
  --brand:#0E9F91;
  --brand-deep:#0B6F66;
  --brand-btn:#0B7D73;
  --tint-brand:#E1F4F1;
  --sky:#2F7FE0;
  --sky-ink:#1F5FAF;
  --tint-sky:#E8F1FD;
  --sun:#E8930C;
  --sun-ink:#93580A;
  --tint-sun:#FDF2DE;
  --rose-ink:#A92E4F;
  --tint-rose:#FCE9EF;
  --band-a:#0A6F67;
  --band-b:#0B7F87;
  --display:'Archivo','Arial Narrow',Arial,sans-serif;
  --body:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,'Courier New',monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--brand-deep)}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
section{position:relative;padding-block:clamp(56px,7vw,96px)}
.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-bottom:clamp(32px,4.5vw,52px)}
.label{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep)}
h2{font-family:var(--display);font-stretch:106%;font-weight:700;font-size:clamp(28px,3.3vw,44px);line-height:1.08;letter-spacing:-.015em}
.sub{color:var(--muted);font-size:clamp(16px,1.4vw,18px);max-width:54ch}
.soon{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-ink);background:var(--tint-sun);border-radius:6px;padding:2px 6px}

/* nav */
.top{position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:20;margin-top:10px}
.bar{display:flex;align-items:center;gap:24px;min-height:62px;padding:0 10px 0 16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);box-shadow:0 8px 24px -16px rgba(13,43,41,.25)}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--display);font-stretch:108%;font-weight:700;font-size:20px}
.links{display:flex;gap:24px;margin-left:auto;font-size:15px}
.links a{color:var(--muted);text-decoration:none}
.links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;font:600 15.5px var(--body);text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer}
.btn.primary{background:var(--brand-btn);color:#fff;box-shadow:0 8px 20px -10px rgba(11,125,115,.7)}
.btn.primary:hover{background:var(--brand-deep);color:#fff}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--brand)}
.bar .btn{min-height:42px}

/* hero */
.hero{padding-block:clamp(36px,5vw,64px) clamp(32px,4vw,56px);overflow-x:clip}
.hero::before{content:"";position:absolute;inset:-140px 0 0;background:radial-gradient(520px 420px at 74% 44%,rgba(14,159,145,.16),transparent 70%),radial-gradient(420px 360px at 90% 90%,rgba(47,127,224,.10),transparent 70%),radial-gradient(520px 380px at 8% 0%,rgba(232,147,12,.08),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.copy{position:relative;display:flex;flex-direction:column;gap:22px}
h1{font-family:var(--display);font-stretch:110%;font-weight:720;font-size:clamp(40px,5.2vw,70px);line-height:1.02;letter-spacing:-.025em}
h1 span{background:linear-gradient(90deg,var(--brand-deep),var(--brand) 55%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.copy .sub{font-size:clamp(17px,1.6vw,20px);color:#3E5956}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14px;color:#2E4A47}
.pill svg.i{width:17px;height:17px;color:var(--brand-deep)}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* orbit */
.orbit{position:relative;width:min(540px,100%);aspect-ratio:1;margin-inline:auto}
.ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(14,159,145,.28);transform:translate(-50%,-50%);animation:spin var(--d) linear infinite var(--dir,normal)}
.ring.r1{width:40%;height:40%;--d:28s;background:radial-gradient(circle,rgba(14,159,145,.06),transparent 70%)}
.ring.r2{width:66%;height:66%;--d:42s;--dir:reverse;border-style:dashed;border-color:rgba(14,159,145,.22)}
.ring.r3{width:92%;height:92%;--d:60s;border-color:rgba(47,127,224,.22)}
.sat{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px}
.sat .up{position:relative;width:100%;height:100%;display:grid;place-items:center;animation:spin-back var(--d) linear infinite var(--dir,normal)}
.node{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);box-shadow:0 8px 20px -8px rgba(13,43,41,.25)}
.node.hr{background:var(--tint-sun);color:var(--sun-ink);border-color:#F4D9A8}
.node.mid{width:46px;height:46px;background:var(--tint-brand);color:var(--brand-deep);border-color:#B9E3DC}
.node.tgt{background:var(--tint-sky);color:var(--sky-ink);border-color:#C5DAF6}
.tag{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#3E5956;white-space:nowrap;background:rgba(255,255,255,.92);border:1px solid var(--line);padding:1px 7px;border-radius:6px}
.hub{position:absolute;top:50%;left:50%;width:92px;height:92px;transform:translate(-50%,-50%);display:grid;place-items:center}
.hub::before,.hub::after{content:"";position:absolute;inset:0;border-radius:26px;border:1.5px solid rgba(14,159,145,.55);animation:ripple 3.6s ease-out infinite}
.hub::after{animation-delay:1.8s}
.hub svg{position:relative;width:92px;height:92px;filter:drop-shadow(0 14px 24px rgba(11,125,115,.35))}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spin-back{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.5);opacity:0}}

/* marquee */
.strip{padding-block:26px;border-block:1px solid var(--line);background:var(--surface)}
.strip .label{display:block;text-align:center;margin-bottom:16px;color:var(--muted)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:12px;padding-right:12px;width:max-content;animation:slide 48s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px 0 8px;border:1px solid var(--line);border-radius:14px;background:var(--bg);font-size:15.5px;font-weight:500;white-space:nowrap}
.chip .ci{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.chip .ci svg.i{width:19px;height:19px}
.ci.hr{background:var(--tint-sun);color:var(--sun-ink)}
.ci.tgt{background:var(--tint-sky);color:var(--sky-ink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* how it works */
.how{background:var(--bg-2)}
.targets{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:-8px 0 28px}
.targets .tl{font-size:15px;color:var(--muted);margin-right:4px}
.tlist{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 15px var(--body);cursor:pointer}
.tbtn svg.i{width:18px;height:18px;color:var(--sky-ink)}
.tbtn[aria-selected="true"]{border-color:var(--sky);box-shadow:0 0 0 3px rgba(47,127,224,.15);background:#F7FAFF}
.flow{display:grid;grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr) 104px minmax(0,1fr);align-items:stretch;padding-bottom:46px}
.fcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px;min-height:210px;box-shadow:0 10px 30px -22px rgba(13,43,41,.35)}
.fcard .src{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.ico svg.i{width:20px;height:20px}
.ico.hr{background:var(--tint-sun);color:var(--sun-ink)}
.ico.eng{background:var(--tint-brand);color:var(--brand-deep)}
.ico.tgt{background:var(--tint-sky);color:var(--sky-ink)}
.fcard b{font-size:20px;line-height:1.3}
.fcard .dim{color:var(--muted);font-size:14.5px}
.fcard.c1{animation:hl1 9s infinite}
.fcard.c2{animation:hl2 9s infinite}
.fcard.c3{animation:hl3 9s infinite}
@keyframes hl1{0%,30%{border-color:var(--sun);box-shadow:0 0 0 3px rgba(232,147,12,.18),0 16px 36px -20px rgba(13,43,41,.35)}34%,100%{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(13,43,41,.35)}}
@keyframes hl2{0%,30%{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(13,43,41,.35)}34%,63%{border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,159,145,.18),0 16px 36px -20px rgba(13,43,41,.35)}67%,100%{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(13,43,41,.35)}}
@keyframes hl3{0%,63%{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(13,43,41,.35)}67%,97%{border-color:var(--sky);box-shadow:0 0 0 3px rgba(47,127,224,.18),0 16px 36px -20px rgba(13,43,41,.35)}100%{border-color:var(--line)}}
.link{position:relative;align-self:center;height:2px;margin-inline:8px;background:repeating-linear-gradient(90deg,#9CC9C2 0 6px,transparent 6px 12px)}
.link::after{content:"";position:absolute;right:-3px;top:-5px;border:6px solid transparent;border-left:8px solid #9CC9C2;border-right:0}
.packet{position:absolute;top:-5px;left:0;width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(14,159,145,.18);opacity:0}
.link.l1 .packet{animation:pk1 9s infinite}
.link.l2 .packet{animation:pk2 9s infinite;background:var(--sky);box-shadow:0 0 0 4px rgba(47,127,224,.18)}
@keyframes pk1{0%,20%{left:0;opacity:0}22%{opacity:1}32%{left:calc(100% - 12px);opacity:1}34%,100%{left:calc(100% - 12px);opacity:0}}
@keyframes pk2{0%,53%{left:0;opacity:0}55%{opacity:1}65%{left:calc(100% - 12px);opacity:1}67%,100%{left:calc(100% - 12px);opacity:0}}
.via{position:absolute;z-index:2;left:50%;bottom:12px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--sky-ink);background:var(--surface);border:1px solid #C5DAF6;border-radius:6px;padding:1px 6px;white-space:nowrap}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15.5px}
.ticks li{display:flex;align-items:center;gap:10px}
.tick{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #B9CFCB;color:transparent;flex:none}
.tick svg.i{width:14px;height:14px;stroke-width:3}
.tick.t1{animation:tk1 9s infinite}
.tick.t2{animation:tk2 9s infinite}
.tick.t3{animation:tk3 9s infinite}
@keyframes tk1{0%,38%{background:transparent;border-color:#B9CFCB;color:transparent}41%,97%{background:var(--brand);border-color:var(--brand);color:#fff}100%{background:transparent;border-color:#B9CFCB;color:transparent}}
@keyframes tk2{0%,45%{background:transparent;border-color:#B9CFCB;color:transparent}48%,97%{background:var(--brand);border-color:var(--brand);color:#fff}100%{background:transparent;border-color:#B9CFCB;color:transparent}}
@keyframes tk3{0%,52%{background:transparent;border-color:#B9CFCB;color:transparent}55%,97%{background:var(--brand);border-color:var(--brand);color:#fff}100%{background:transparent;border-color:#B9CFCB;color:transparent}}
.login{font-family:var(--mono);font-weight:500;font-size:16px;color:var(--sky-ink);overflow-wrap:anywhere}
.state{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.state i{width:9px;height:9px;border-radius:50%;background:#B9CFCB;animation:on 9s infinite}
@keyframes on{0%,66%{background:#B9CFCB}69%,97%{background:#16A34A;box-shadow:0 0 0 4px rgba(22,163,74,.15)}100%{background:#B9CFCB}}
[data-for]{display:none}
.how[data-t="ad"] [data-for="ad"],.how[data-t="gws"] [data-for="gws"],.how[data-t="m365"] [data-for="m365"]{display:revert}
.how[data-t="ad"] .tvar[data-for="ad"],.how[data-t="gws"] .tvar[data-for="gws"],.how[data-t="m365"] .tvar[data-for="m365"]{display:flex}
.tvar{flex-direction:column;gap:8px;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.step{position:absolute;left:0;top:calc(100% + 18px);display:flex;align-items:center;gap:10px;font-size:15.5px;color:#2E4A47;white-space:nowrap}
.step .num{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--brand-deep)}
.hownote{margin:26px auto 0;max-width:62ch;text-align:center;color:var(--muted);font-size:15.5px}

/* console */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px}
.tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 15px var(--body);cursor:pointer}
.tab svg.i{width:18px;height:18px;color:var(--muted)}
.tab[aria-selected="true"]{border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,159,145,.15)}
.tab[aria-selected="true"] svg.i{color:var(--brand-deep)}
.showcase{overflow-x:clip}
.laptop{max-width:1040px;margin:0 auto}
.lid{position:relative;background:#16302E;border:1px solid #23413E;border-radius:20px 20px 8px 8px;padding:2.4% 2.4% 2.8%;box-shadow:0 50px 90px -45px rgba(13,43,41,.6)}
.lid::before{content:"";position:absolute;top:1.1%;left:50%;width:6px;height:6px;border-radius:50%;background:#2E4A47;transform:translateX(-50%)}
.screen{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;border-radius:6px;background:#F4F6F5}
.scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.scr.on{opacity:1}
.deck{position:relative;height:20px;margin:0 -7%;border-radius:0 0 22px 22px;background:linear-gradient(#C9D6D4,#9FB2AF)}
.deck::before{content:"";position:absolute;left:50%;top:0;width:15%;height:7px;transform:translateX(-50%);background:#8AA09D;border-radius:0 0 10px 10px}
.scr-cap{margin-top:22px;text-align:center;color:var(--muted);min-height:1.6em}
.scr-note{margin-top:6px;text-align:center;color:var(--muted);font-size:13.5px;opacity:.85}

/* tiles */
.life,.safe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s,box-shadow .2s}
.tile:hover{border-color:#B9DCD6;transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(13,43,41,.4)}
.big-ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:6px}
.big-ico svg.i{width:28px;height:28px}
.big-ico.g{background:#E3F6EA;color:#17803D}
.big-ico.b{background:var(--tint-sky);color:var(--sky-ink)}
.big-ico.r{background:var(--tint-rose);color:var(--rose-ink)}
.big-ico.t{background:var(--tint-brand);color:var(--brand-deep)}
.tile b{font-size:19px}
.tile>span:last-child{color:var(--muted);font-size:15px;line-height:1.45}
.safe .tile{gap:6px;padding:22px}
.safe .big-ico{width:46px;height:46px;border-radius:13px;margin-bottom:8px}
.safe .big-ico svg.i{width:23px;height:23px}
.safe b{font-size:17px}
.a-plus{animation:pulse 2.4s ease-in-out infinite;transform-origin:19px 11px}
.a-left{animation:nudge-l 2.4s ease-in-out infinite}
.a-right{animation:nudge-r 2.4s ease-in-out infinite}
.a-x{animation:shake 2.4s ease-in-out infinite;transform-origin:19.5px 10.5px}
.a-check{stroke-dasharray:12;animation:draw 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes nudge-l{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@keyframes nudge-r{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes shake{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(14deg)}80%{transform:rotate(-14deg)}90%{transform:rotate(8deg)}}
@keyframes draw{0%{stroke-dashoffset:12}40%,100%{stroke-dashoffset:0}}

/* logins */
.names-band{background:var(--bg-2)}
.names-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.names-wrap .head{align-items:flex-start;text-align:left;margin:0}
.names{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 18px 40px -30px rgba(13,43,41,.45)}
.nrow{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:10px;height:60px;padding:0 14px;font-size:16.5px}
.nrow+.nrow{border-top:1px solid #EEF3F2}
.nrow em{font-style:normal;color:var(--sun-ink);background:var(--tint-sun);border-radius:3px;box-shadow:0 0 0 1px var(--tint-sun)}
.nrow svg.i{width:20px;height:20px;color:var(--muted)}
.nrow .out{font-family:var(--mono);color:var(--brand-deep);font-size:15.5px}
.scan{position:absolute;left:10px;right:10px;top:10px;height:60px;border-radius:12px;background:rgba(14,159,145,.08);border:1px solid rgba(14,159,145,.4);animation:scan 12.5s infinite}
@keyframes scan{0%,16%{transform:translateY(0)}20%,36%{transform:translateY(60px)}40%,56%{transform:translateY(120px)}60%,76%{transform:translateY(180px)}80%,96%{transform:translateY(240px)}100%{transform:translateY(0)}}
.fine{color:#3E5956;font-size:15.5px;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.fine span{display:flex;gap:10px;align-items:center}
.fine svg.i{width:18px;height:18px;color:var(--brand-deep)}

/* pilot */
.pilot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.pilot .head{align-items:flex-start;text-align:left;margin:0}
.free{font-family:var(--display);font-stretch:112%;font-weight:760;font-size:clamp(44px,5.2vw,74px);line-height:.95;letter-spacing:-.03em;background:linear-gradient(90deg,var(--brand-deep),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
.road{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:8px}
.road .line{position:absolute;top:36px;left:16.66%;right:16.66%;height:3px;border-radius:3px;background:#D3E3E0;overflow:hidden}
.road .fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--brand),var(--sky));animation:fill 8s linear infinite}
@keyframes fill{0%{transform:scaleX(0)}88%,100%{transform:scaleX(1)}}
.ms{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.ms .dot{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid #CFE0DD;color:var(--muted)}
.ms.m1 .dot{animation:ms1 8s infinite}
.ms.m2 .dot{animation:ms2 8s infinite}
.ms.m3 .dot{animation:ms3 8s infinite}
@keyframes ms1{0%,2%{border-color:#CFE0DD;color:var(--muted)}4%,96%{border-color:var(--brand);color:var(--brand-deep);box-shadow:0 0 0 5px rgba(14,159,145,.14)}100%{border-color:#CFE0DD;color:var(--muted)}}
@keyframes ms2{0%,44%{border-color:#CFE0DD;color:var(--muted)}46%,96%{border-color:var(--brand);color:var(--brand-deep);box-shadow:0 0 0 5px rgba(14,159,145,.14)}100%{border-color:#CFE0DD;color:var(--muted)}}
@keyframes ms3{0%,86%{border-color:#CFE0DD;color:var(--muted)}88%,96%{border-color:var(--sky);color:var(--sky-ink);box-shadow:0 0 0 5px rgba(47,127,224,.14)}100%{border-color:#CFE0DD;color:var(--muted)}}
.ms b{font-size:18px;margin-top:8px}
.ms .wk{font-family:var(--mono);font-size:13px;color:var(--muted)}
.ms p{color:#3E5956;font-size:14.5px;max-width:22ch}
.after{margin-top:28px;color:var(--muted);font-size:15px;text-align:center}

/* request form band */
.request{background:linear-gradient(135deg,var(--band-a),var(--band-b));color:#fff;overflow-x:clip}
.request::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 10% 0%,rgba(255,255,255,.12),transparent 70%),radial-gradient(500px 360px at 100% 100%,rgba(47,127,224,.25),transparent 70%);pointer-events:none}
.request .wrap{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.request .label{color:#BFF3EA}
.request h2{font-size:clamp(32px,4vw,52px);font-stretch:110%}
.perks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16.5px}
.perks li{display:flex;align-items:center;gap:12px}
.perks .pk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.perks svg.i{width:16px;height:16px;stroke-width:2.6}
.mailline{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:16px}
.mailbox{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 6px 0 14px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.mailbox .addr{font-family:var(--mono);user-select:all}
.next{margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
.next ol{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px}
.next li{display:flex;align-items:center;gap:12px}
.next .num{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);font-family:var(--mono);font-size:13px}
.copy-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border-radius:9px;border:0;background:#fff;color:var(--brand-deep);font:600 13.5px var(--body);cursor:pointer}
.copy-btn svg.i{width:15px;height:15px}
.formcard{background:var(--surface);color:var(--ink);border-radius:22px;padding:clamp(20px,3vw,32px);box-shadow:0 30px 60px -30px rgba(4,32,29,.6)}
.formcard h3{font-family:var(--display);font-stretch:106%;font-size:22px;margin-bottom:18px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field legend{font-size:13.5px;font-weight:600;color:#2E4A47}
.field input,.field select,.field textarea{width:100%;min-height:46px;padding:10px 12px;border-radius:11px;border:1px solid #CFDCDA;background:#FBFDFC;color:var(--ink);font:400 15.5px var(--body)}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,159,145,.18)}
.field input:user-invalid{border-color:#D9466A}
.wide{grid-column:1/-1}
fieldset.field{border:0;margin:0;padding:0}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid #CFDCDA;background:#FBFDFC;font-size:14.5px}
.choice span svg.i{width:16px;height:16px;color:var(--muted)}
.choice input:checked+span{border-color:var(--brand);background:var(--tint-brand);color:var(--brand-deep);font-weight:600}
.choice input:checked+span svg.i{color:var(--brand-deep)}
.choice input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.send{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.send .btn{min-width:200px}
.send .btn[disabled]{opacity:.6;cursor:progress}
.status{font-size:14.5px;color:var(--muted)}
.status[data-state="error"]{color:var(--rose-ink)}
.done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:12px 0}
.done .big-ico{margin:0}
.done b{font-family:var(--display);font-size:24px}
.done p{color:var(--muted)}

footer{background:var(--surface);border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-block:24px}
footer .logo{font-size:17px}
footer .addr{font-family:var(--mono);color:var(--ink)}

/* how it works: below 1024px the three cards no longer fit in a row, so they stack */
@media (max-width:1199px){.fcard{padding:20px}}
@media (max-width:1023px){
  .flow{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto;padding-bottom:0}
  .fcard{min-height:0;margin-top:44px}
  .step{top:auto;bottom:calc(100% + 10px)}
  .link{height:32px;width:2px;margin:10px auto 4px;background:repeating-linear-gradient(180deg,#9CC9C2 0 6px,transparent 6px 12px)}
  .link::after{right:auto;left:-5px;top:auto;bottom:-3px;border:6px solid transparent;border-top:8px solid #9CC9C2;border-bottom:0}
  .packet{display:none}
  .via{left:14px;bottom:auto;top:50%;transform:translateY(-50%)}
  .hownote{margin-top:28px}
}
@media (max-width:980px){
  .links{display:none}
  .bar .btn{margin-left:auto}
  .hero .wrap,.names-wrap,.pilot,.request .wrap{grid-template-columns:minmax(0,1fr)}
  .orbit{width:min(460px,100%)}
  .life,.safe{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:16px}
  .sat{width:46px;height:46px;margin:-23px 0 0 -23px}
  .node{width:46px;height:46px}
  .node.mid{width:38px;height:38px}
  .tag{font-size:10px}
  .fcard{padding:18px}
  .ticks{gap:10px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .life,.safe{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile,.safe .tile{padding:16px;gap:6px}
  .big-ico,.safe .big-ico{width:42px;height:42px;border-radius:12px;margin-bottom:6px}
  .big-ico svg.i,.safe .big-ico svg.i{width:22px;height:22px}
  .tile b,.safe b{font-size:16px}
  .tile>span:last-child{font-size:14px}
  .tag{display:none}
  .orbit{width:90%}
  .targets{flex-direction:column;gap:12px}
  .targets .tl{margin:0}
  .tlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:520px}
  .tbtn{position:relative;flex-direction:column;justify-content:center;gap:6px;min-height:76px;padding:12px 6px 10px;font-size:13.5px;line-height:1.25;text-align:center}
  .tbtn .soon{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:9.5px;padding:1px 6px;box-shadow:0 0 0 2px var(--bg-2)}
  .nrow{font-size:14px;padding:0 8px;gap:6px;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)}
  .nrow svg.i{width:16px;height:16px}
  .nrow .out{font-size:12.5px;overflow-wrap:anywhere}
  .road .line{top:30px}
  .ms .dot{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tick{background:var(--brand);border-color:var(--brand);color:#fff}
  .road .fill{transform:scaleX(1)}
  .state i{background:#16A34A}
}