/* ── DISPLAY FACE ────────────────────────────────────────────────────────────
   Production loads TERMINA via Adobe Fonts kit tjs4ijm (the kit serves termina
   only; Helvetica Neue comes from the system stack). This preview cannot reach
   an external font host, and Adobe files may not be redistributed, so the
   display face here is Archivo (SIL OFL) at the expanded width — the closest
   freely-redistributable analogue to Termina's wide techno-grotesque caps.
   On the real site: --display:"termina",sans-serif and delete this @font-face. */
@font-face{
  font-family:"ArchivoDisplay";
  src:url(/assets/archivo.woff2) format("woff2");
  font-weight:100 900; font-stretch:62.5% 125%; font-display:swap;
}

/* ══ ARMIT tokens, verified from armit.co / armitnotifi.com live CSS ══════
   Light is the commerce ground; dark IS the ARMIT palette, not an inversion. */
:root{
  --o:#FE5000; --o-hi:#FF6622; --o-dark:#D44000;
  --cy:#0E7FA6; --good:#2F8F68;
  --paper:#FAF8F5; --paper2:#F2EEE8; --card:#FFFFFF;
  --ink:#0B1119; --ink2:#4A5563; --ink3:#8B94A0;
  --rule:#E3DED5; --rule2:#CFC8BC;
  --void:#020810; --navy:#040C18; --navy2:#081524;
  --on-navy:#C8D8EC; --on-navy2:rgba(200,216,236,.60); --on-navy3:rgba(200,216,236,.38);
  --navy-rule:rgba(0,212,255,.14);
  --shadow:0 1px 2px rgba(11,17,25,.05),0 8px 28px -12px rgba(11,17,25,.14);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cy:#00D4FF; --good:#35C793;
    --paper:#040C18; --paper2:#060F1E; --card:#081524;
    --ink:#EAF2FA; --ink2:rgba(200,216,236,.68); --ink3:rgba(200,216,236,.42);
    --rule:rgba(0,212,255,.13); --rule2:rgba(0,212,255,.24);
    --navy:#020810; --navy2:#060F1E;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 34px -14px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --cy:#00D4FF; --good:#35C793;
  --paper:#040C18; --paper2:#060F1E; --card:#081524;
  --ink:#EAF2FA; --ink2:rgba(200,216,236,.68); --ink3:rgba(200,216,236,.42);
  --rule:rgba(0,212,255,.13); --rule2:rgba(0,212,255,.24);
  --navy:#020810; --navy2:#060F1E;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 34px -14px rgba(0,0,0,.75);
}

/* Production loads Termina via Adobe kit tjs4ijm. This page cannot reach an
   external font host, so the display stack approximates its geometry and is
   tracked to match. Swap --display for "termina" on the real site. */
:root{
  --display:"termina","ArchivoDisplay","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.w{max-width:1340px;margin:0 auto;padding:0 clamp(1.1rem,4vw,3rem)}
.nar{max-width:680px}
h1,h2,h3,.dsp{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  text-transform:uppercase;text-wrap:balance;margin:0}
.eyebrow{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--o);margin:0 0 1.1rem}
p{margin:0 0 1rem;color:var(--ink2)}
a{color:inherit}

/* ── nav ─────────────────────────────────────── */
nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--rule)}
.nb{display:flex;align-items:center;gap:1.6rem;height:64px}
.logo{font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.01em;
  text-transform:none;text-decoration:none}
.logo i{font-style:normal;color:var(--o)}
.logo sup{font-size:.5em;font-weight:600;opacity:.55;top:-.7em}
.nl{display:none;gap:1.5rem;margin-left:auto;font-family:var(--display);font-size:.7rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.nl a{color:var(--ink2);text-decoration:none;transition:color .18s}
.nl a:hover{color:var(--ink)}
.nr{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.nl+.nr{margin-left:0}
@media(min-width:900px){.nl{display:flex}}

/* ── second tier ────────────────────────────────────────────────────────────
   The four pages that don't fit the primary row, kept as flat links rather
   than hidden behind a dropdown. Scrolls sideways on a narrow screen instead
   of collapsing, so nothing becomes unreachable. */
.nb2{border-top:1px solid var(--rule);background:color-mix(in srgb,var(--paper2) 82%,transparent)}
.nl2{display:flex;gap:1.5rem;align-items:center;height:38px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase}
.nl2::-webkit-scrollbar{display:none}
.nl2 a{color:var(--ink3);text-decoration:none;white-space:nowrap;transition:color .18s;
  padding:.2rem 0;border-bottom:1px solid transparent}
.nl2 a:hover{color:var(--ink)}
.nl2 a.on{color:var(--ink);border-bottom-color:var(--o)}
.nl2 a:focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:2px}
.tog{background:none;border:1px solid var(--rule2);border-radius:999px;width:34px;height:34px;
  cursor:pointer;color:var(--ink2);display:grid;place-items:center;padding:0;flex:none;transition:.2s}
.tog:hover{color:var(--ink);border-color:var(--ink3)}
.btn{display:inline-block;font-family:var(--display);font-size:.72rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;padding:.82rem 1.4rem;
  border-radius:8px;background:var(--o);color:#fff;border:0;cursor:pointer;
  transition:background .18s,transform .18s;white-space:nowrap}
.btn:hover{background:var(--o-hi);transform:translateY(-1px)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--rule2)}
.btn.ghost:hover{background:var(--paper2);border-color:var(--ink3)}
.btn.sm{padding:.6rem 1rem;font-size:.66rem}
.signin{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;display:none}
@media(min-width:640px){.signin{display:inline}}

/* ── hero ────────────────────────────────────── */
.hero{padding:clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,6vw,4.5rem)}
.hgrid{display:grid;gap:clamp(2.4rem,5vw,4rem);align-items:start}
@media(min-width:1040px){.hgrid{grid-template-columns:1.15fr .85fr}}
h1{font-size:clamp(2.35rem,6.4vw,4.55rem);line-height:.97;letter-spacing:-.035em}
h1 .dim{color:var(--ink3)}
.lede{font-size:clamp(1.02rem,1.9vw,1.16rem);color:var(--ink2);max-width:40ch;margin:1.5rem 0 0}
.lede b{color:var(--ink);font-weight:600}
.hcta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:2rem 0 .85rem}
.micro{font-size:.86rem;color:var(--ink3);margin:0;max-width:44ch}
.stamp{display:flex;align-items:center;gap:.55rem;margin-top:2.2rem;padding-top:1.1rem;
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.04em;color:var(--ink3)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent)}

/* ── rescue timeline (the motif) ─────────────── */
.tl{background:var(--navy);border:1px solid var(--navy-rule);border-radius:18px;
  padding:clamp(1.3rem,2.6vw,1.9rem);box-shadow:var(--shadow);position:relative;overflow:hidden}
.tl::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 200px at 84% -12%,rgba(0,212,255,.10),transparent 70%)}
.tlh{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy3);
  padding-bottom:.95rem;border-bottom:1px solid var(--navy-rule);margin-bottom:.3rem}
.tlh .live{width:6px;height:6px;border-radius:50%;background:var(--o);
  box-shadow:0 0 0 3px rgba(254,80,0,.2)}
.ev{display:grid;grid-template-columns:62px 22px 1fr;align-items:start;
  opacity:0;transform:translateY(5px)}
.ev.on{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.ev .t{font-family:var(--mono);font-size:.7rem;color:var(--on-navy3);padding-top:.95rem;
  letter-spacing:.02em}
.ev .rail{position:relative;justify-self:center;width:22px;align-self:stretch}
.ev .rail::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--navy-rule);transform:translateX(-.5px)}
.ev:first-of-type .rail::before{top:1rem}
.ev:last-of-type .rail::before{bottom:calc(100% - 1rem)}
.ev .pip{position:absolute;left:50%;top:1rem;width:7px;height:7px;border-radius:50%;
  background:var(--on-navy3);transform:translate(-50%,-50%);transition:background .4s,box-shadow .4s}
.ev.act .pip{background:var(--o);box-shadow:0 0 0 4px rgba(254,80,0,.18)}
.ev.win .pip{background:var(--good);box-shadow:0 0 0 4px rgba(53,199,147,.2)}
.ev .b{padding:.72rem 0 .72rem .2rem}
.ev .lb{font-family:var(--display);font-size:.76rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-navy)}
.ev.act .lb{color:var(--o-hi)}
.ev.win .lb{color:var(--good)}
.ev .sd{font-size:.79rem;color:var(--on-navy2);margin-top:.16rem}
.tlf{margin-top:.4rem;padding-top:1rem;border-top:1px solid var(--navy-rule);
  font-family:var(--display);font-size:.82rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-navy);opacity:0;transition:opacity .6s}
.tlf.on{opacity:1}

/* ── proof strip ─────────────────────────────── */
.strip{background:var(--void);color:var(--on-navy);padding:clamp(2.6rem,5.5vw,4rem) 0;
  border-block:1px solid var(--navy-rule)}
.strip h2{font-size:clamp(1.05rem,2.4vw,1.45rem);color:#fff;letter-spacing:-.015em;
  margin-bottom:1.9rem;max-width:24ch}
.strip h2 em{font-style:normal;color:var(--o)}
.pf{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--navy-rule);border:1px solid var(--navy-rule)}
.pf>div{background:var(--void);padding:1.2rem 1.1rem}
.pf b{display:block;font-family:var(--display);font-size:clamp(1.7rem,4vw,2.5rem);
  font-weight:800;letter-spacing:-.045em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.pf .hit b{color:var(--o)}
.pf span{display:block;font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-navy3);margin-top:.5rem;line-height:1.4}
.stripf{font-family:var(--mono);font-size:.7rem;color:var(--on-navy3);margin:1.2rem 0 0;
  letter-spacing:.03em}

/* ── sections ────────────────────────────────── */
section{padding:clamp(3.4rem,8vw,6.5rem) 0}
h2{font-size:clamp(1.6rem,4.2vw,2.85rem);line-height:1.02;letter-spacing:-.032em}
.big{font-family:var(--display);font-weight:800;font-size:clamp(5rem,17vw,12rem);
  line-height:.82;letter-spacing:-.06em;color:var(--o);font-variant-numeric:tabular-nums;
  margin:.4rem 0 .1rem}
.bigc{font-size:clamp(1rem,2.2vw,1.22rem);color:var(--ink);max-width:32ch;font-weight:500}
.steps{display:grid;gap:0;margin-top:2.4rem;border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.5rem 0;
  border-bottom:1px solid var(--rule);align-items:start}
@media(min-width:760px){.step{grid-template-columns:5.5rem 15rem 1fr;gap:2rem;align-items:baseline}}
.step .n{font-family:var(--mono);font-size:.76rem;color:var(--o);letter-spacing:.1em;font-weight:600}
.step .h{font-family:var(--display);font-size:.9rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);grid-column:2/-1}
@media(min-width:760px){.step .h{grid-column:auto}}
.step p{margin:.4rem 0 0;grid-column:2/-1}
@media(min-width:760px){.step p{grid-column:auto;margin:0}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;margin-top:2.4rem}
.cards>div{background:var(--card);padding:1.5rem 1.4rem}
.cards h3{font-size:.8rem;letter-spacing:.1em;color:var(--ink);margin-bottom:.5rem}
.cards p{font-size:.9rem;margin:0}
.audit{border:1px solid var(--rule2);border-radius:14px;overflow:hidden;margin-top:2.4rem;
  background:var(--card)}
.ah{background:var(--paper2);padding:1rem 1.3rem;border-bottom:1px solid var(--rule2);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--ink2);
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.arow{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.95rem 1.3rem;
  border-bottom:1px solid var(--rule);align-items:baseline}
.arow:last-child{border-bottom:0}
.arow.key{background:color-mix(in srgb,var(--o) 6%,var(--card))}
.arow .l{font-size:.92rem;color:var(--ink2)}
.arow.key .l{color:var(--ink);font-weight:600}
.arow .v{font-family:var(--display);font-size:1.35rem;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.arow.key .v{color:var(--o);font-size:1.7rem}
.demo{background:var(--navy);color:var(--on-navy);border-radius:20px;
  padding:clamp(1.8rem,4.5vw,3.4rem);border:1px solid var(--navy-rule);position:relative;overflow:hidden}
.demo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 260px at 12% -20%,rgba(254,80,0,.16),transparent 68%)}
.demo>*{position:relative}
.demo h2{color:#fff}
.demo p{color:var(--on-navy2)}
.form{display:grid;gap:.7rem;max-width:26rem;margin-top:1.8rem}
@media(min-width:560px){.form{grid-template-columns:1fr 1fr}.form .btn{grid-column:1/-1}}
.form input{font:inherit;font-size:.95rem;padding:.85rem 1rem;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--navy-rule);color:#fff;width:100%}
.form input::placeholder{color:var(--on-navy3)}
.form input:focus{outline:2px solid var(--o);outline-offset:1px}
.fine{font-family:var(--mono);font-size:.68rem;color:var(--on-navy3);margin:1rem 0 0;
  max-width:46ch;line-height:1.65}
.price{font-family:var(--display);font-weight:800;font-size:clamp(3.2rem,10vw,6rem);
  letter-spacing:-.05em;line-height:.9;color:var(--ink)}
.price span{color:var(--ink3);font-size:.3em;letter-spacing:.02em}
.incl{columns:2;column-gap:2.4rem;margin:1.8rem 0 0;padding:0;list-style:none;max-width:34rem}
.incl li{break-inside:avoid;font-size:.93rem;color:var(--ink2);padding:.42rem 0 .42rem 1.3rem;
  position:relative}
.incl li::before{content:"";position:absolute;left:0;top:.92em;width:6px;height:6px;
  border-radius:50%;background:var(--o)}
.inds{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:2rem 2.6rem;margin-top:2.4rem}
.ind h3{font-size:.82rem;letter-spacing:.1em;color:var(--o);margin-bottom:.6rem}
.ind p{font-size:.94rem;margin:0}
.close{background:var(--void);color:#fff;text-align:center}
.close h2{color:#fff;font-size:clamp(1.9rem,6vw,3.6rem)}
.close p{color:var(--on-navy2);max-width:30ch;margin-left:auto;margin-right:auto}
.close .eyebrow{color:var(--on-navy3)}
footer{background:var(--void);color:var(--on-navy3);padding:2.6rem 0 3.4rem;
  border-top:1px solid var(--navy-rule);font-size:.8rem}
.fl{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-bottom:1.4rem;
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.fl a{color:var(--on-navy2);text-decoration:none}
.fl a:hover{color:#fff}
@media(min-width:860px){.two{grid-template-columns:1fr 1fr;align-items:start}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .ev{opacity:1;transform:none}.tlf{opacity:1}}

h1,h2,h3,.dsp,.logo,.eyebrow,.btn,.nl,.signin,.big,.price,.pf b,.arow .v,
.ev .lb,.step .h,.fr .lab,.fl{font-stretch:112%}

/* ── §2 built for ownership ─────────────────────────────────────────────── */
.own{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--rule)}
.owng{display:grid;gap:clamp(1.6rem,4vw,3.4rem);margin-top:1.8rem;max-width:62rem}
@media(min-width:820px){.owng{grid-template-columns:1fr 1fr}}
.owng p{margin:0 0 .9rem;max-width:46ch}
.ownl{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.ownl li{font-family:var(--display);font-size:.86rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);padding-left:1.1rem;position:relative}
.ownl li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;
  border-radius:50%;background:var(--o)}
.ownl.tick li::before{background:var(--good)}
.ownk{font-family:var(--display);font-size:clamp(1.15rem,2.8vw,1.75rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin:.6rem 0 0;max-width:24ch}
/* The plain-English version, sitting above the kicker it explains. */
.ownlead{font-family:var(--mono);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);margin:2.2rem 0 0;max-width:52ch;line-height:1.7}

/* ── the thesis band ────────────────────────────────────────────────────── */
/* Read by somebody who got to the bottom of the page. Says the whole product once. */
.thesis{background:var(--navy);color:var(--on-navy);padding:clamp(3rem,7vw,5.4rem) 0;
  border-top:1px solid var(--rule)}
.thesis .mark{font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin:0 0 1.1rem}
.thesis .mark sup{font-size:.5em;letter-spacing:0;vertical-align:.7em}
.thesis h2{font-family:var(--display);font-weight:800;color:#fff;margin:0;max-width:20ch;
  font-size:clamp(1.5rem,4.2vw,2.7rem);letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
.thesis ul{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:.85rem;max-width:44rem}
.thesis li{font-size:clamp(.98rem,2vw,1.15rem);color:var(--on-navy);padding-left:1.5rem;
  position:relative;line-height:1.45}
.thesis li::before{content:"";position:absolute;left:0;top:.62em;width:.62rem;height:2px;
  background:var(--o)}
@media(min-width:760px){.thesis ul{grid-template-columns:1fr 1fr;gap:1rem 2.6rem}}

/* Three denials about billing, stacked so each lands on its own. */
.nolist{margin:1.2rem 0 0;font-family:var(--display);font-weight:800;font-size:.8rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);line-height:2;
  border-left:2px solid var(--o);padding-left:1rem}

/* ── §6 roles, not extensions ───────────────────────────────────────────── */
.roles{padding:clamp(2.4rem,5vw,4rem) 0;border-top:1px solid var(--rule)}
.rolesg{display:grid;gap:clamp(1.4rem,4vw,3.4rem);margin-top:1.6rem;max-width:62rem}
@media(min-width:820px){.rolesg{grid-template-columns:1fr 1fr}}
.rolesg p{margin:0 0 .9rem;max-width:46ch}
.rolel{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.rolel li{font-family:var(--mono);font-size:.8rem;letter-spacing:.03em;color:var(--ink);
  border:1px solid var(--rule2);border-radius:999px;padding:.36rem .72rem}
.rolek{font-family:var(--display);font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:800;
  letter-spacing:-.02em;color:var(--ink);margin-top:1.4rem;max-width:22ch}

/* ── §12 the communications path ────────────────────────────────────────── */
.flowsec{padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule)}
.flowsec .w{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
@media(min-width:880px){.flowsec .w{grid-template-columns:19rem 1fr}}
.pathfig{margin:0;max-width:19rem}
.pathfig svg{width:100%;height:auto;display:block}
.pathfig figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink3);
  margin-top:.8rem;line-height:1.65;max-width:30ch}
.pn rect{fill:var(--card);stroke:var(--rule2);stroke-width:1.2}
.pn.ours rect{stroke:var(--o);fill:color-mix(in srgb,var(--o) 7%,transparent)}
.pn.ours text{fill:var(--ink)}
.pn.done rect{stroke:var(--good)}
.pn.done text{fill:var(--good)}
.pe line{stroke:var(--rule2)}
.flowtxt h2{font-size:clamp(1.4rem,3.2vw,2.1rem);margin:0 0 .8rem}
.flowtxt p{max-width:48ch}
.andwhen{padding:clamp(2.2rem,5vw,3.4rem) 0 0}
.andwhen h2{font-size:clamp(1.5rem,3.6vw,2.3rem);margin:.3rem 0 .8rem}

/* ── §10 / §22 — the route IS the brand animation ────────────────────────
   Not more visuals: the same flow diagrams, moving. A call enters, the route
   resolves, a branch breaks, Rescue repairs it. Every diagram on the site uses
   the same grammar, so the motion means the same thing wherever you see it.
   Nothing animates until it is on screen, and nothing animates at all for
   anyone who has asked their system to stop moving things. */
@media (prefers-reduced-motion: no-preference){

  /* nodes arrive down the path, in order */
  .flowfig .fnode, .pathfig .pn{opacity:.25;transition:opacity .5s ease}
  .flowfig.lit .fnode, .pathfig.lit .pn{opacity:1}
  .flowfig.lit .fnode:nth-of-type(n){transition-delay:calc(var(--i,0) * .11s)}

  /* the edge draws itself, so the call is seen to travel */
  .flowfig.lit .fedge line, .pathfig.lit .pe line{
    stroke-dasharray:40;stroke-dashoffset:40;
    animation:draw .5s ease forwards;animation-delay:calc(var(--i,0) * .11s + .18s)}
  @keyframes draw{to{stroke-dashoffset:0}}

  /* the break pulses: this is where a business loses somebody */
  .flowfig.lit .fedge line.brk{animation:draw .5s ease forwards, brk 2.6s ease-in-out infinite .9s}
  @keyframes brk{0%,100%{opacity:1}45%{opacity:.25}}

  /* the two stages Sip2Me operates keep a slow glow */
  .pathfig.lit .pn.ours rect{animation:glow 3.4s ease-in-out infinite}
  .flowfig.lit .fnode.hot rect{animation:glow 3.4s ease-in-out infinite}
  @keyframes glow{
    0%,100%{stroke-opacity:1}
    50%{stroke-opacity:.45}}

  /* resolved settles green and stays */
  .flowfig.lit .fnode.good rect, .pathfig.lit .pn.done rect{animation:settle .7s ease forwards 1.5s}
  @keyframes settle{from{stroke-opacity:.4}to{stroke-opacity:1}}

  /* the HyperCore fabric: environments arrive one at a time, side by side */
  .hcfig svg g[fill] text, .hcfig svg g[stroke] rect{opacity:0;transition:opacity .55s ease}
  .hcfig.lit svg g[fill] text, .hcfig.lit svg g[stroke] rect{opacity:1}
}

/* house legal pattern: effective date + operator, quiet, directly under the lede */
.eff{font-family:var(--mono);font-size:.76rem;line-height:1.85;letter-spacing:.02em;
  color:var(--ink3);margin:1.4rem 0 0;max-width:56ch;padding-top:1rem;border-top:1px solid var(--rule)}
.eff b{color:var(--ink2)}



/* ── demonstration-call form ────────────────────────────────────────────────
   Sits on the dark demo panel. Every outcome is stated in words: a form that
   fails silently is what made this look broken to a prospect. */
.dmsg{margin:1rem 0 0;font-size:.95rem;line-height:1.5;max-width:44ch;min-height:1.2em;
  color:var(--on-navy2)}
.dmsg.good{color:#fff}
.dmsg.bad{color:var(--o-hi)}
.demo .form input[disabled],.demo .form button[disabled]{opacity:.6;cursor:default}