/* ==========================================================================
   crushable.ai — shared styles (DRAFT 2026-09-28)
   Tokens are lifted verbatim from xops/showcase/index.html + xmed.html so the
   site, the xOPS showcase, and getxmed read as one family.
   ========================================================================== */
:root{
  --ink:#000000;
  --ink-2:#06090d;
  --panel:#0c1015;
  --panel-2:#0f141b;
  --line:#1a222c;
  --line-2:#243040;
  --fg:#eef3f8;
  --fg-2:#9aa8b6;
  --fg-3:#78848f;
  --cy:#2bb3f0;
  --cy-2:#0d8fd0;
  --cy-dim:rgba(43,179,240,.14);
  --gr:#3fca86;
  --am:#f0a93b;
  --warm:#f0913b;
  --pad:clamp(16px,5vw,64px);
  --maxw:1180px;
  --navh:64px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 12px)}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.026em;line-height:1.05}
h1,h2{text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.btn:focus-visible{outline-color:#fff;outline-offset:2px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.dsk{display:inline}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--cy);color:#00131d;
  padding:10px 14px;font-weight:700;text-decoration:none;border-radius:2px}
.skip:focus{top:12px}

/* ------------------------------------------------------------------ button */
.btn{display:inline-flex;align-items:center;gap:11px;
  background:var(--cy);color:#00131d;border:0;border-radius:2px;
  padding:15px 26px;font:inherit;font-weight:700;font-size:16px;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;transition:background .18s ease,transform .18s ease;white-space:nowrap}
.btn:hover{background:#4cc2f7;transform:translateY(-1px)}
.btn svg{width:15px;height:15px;flex:none}
.btn-lg{padding:18px 34px;font-size:17px}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn-ghost:hover{background:#0e141b;border-color:var(--cy)}
.tlink{color:var(--cy);text-decoration:none;font-weight:600;font-size:.97rem;
  display:inline-flex;align-items:center;gap:8px}
.tlink:hover{text-decoration:underline;text-underline-offset:4px}
.tlink svg{width:13px;height:13px}

/* ================================================================== NAV
   Pattern taken from anthropic.com (Claude Opus 5.5 post, 2026-09-22):
   logo left · a short row of plain-text items, some with a thin caret that opens
   a full-width panel of TITLED COLUMNS of plain links (no icons, no marketing
   blurbs) · single-link items mixed in · ONE solid CTA on the right with its own
   split caret. Quiet, typographic, lots of air.
   ====================================================================== */
.site-head{position:sticky;top:0;z-index:100;height:var(--navh);
  background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,background .2s ease}
.site-head.scrolled,.site-head.open{border-bottom-color:var(--line)}
.site-head.open{background:rgba(3,5,8,.97)}
.head-in{height:100%;display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.logo{display:flex;align-items:center;flex:none;text-decoration:none}
.logo img{height:16px;width:auto;display:block}
.nav{flex:1 1 auto;min-width:0}
.navlist{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.navitem{position:static}
.navtext{appearance:none;background:none;border:0;margin:0;font:inherit;cursor:pointer;
  color:#c3cfdb;font-size:15px;font-weight:500;letter-spacing:-.005em;
  display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:3px;
  text-decoration:none;transition:color .15s ease,background .15s ease;white-space:nowrap}
.navtext:hover,.navtext[aria-expanded="true"]{color:#fff}
.navtext[aria-expanded="true"]{background:#0d131a}
.navtext .caret{width:10px;height:6px;flex:none;opacity:.7;transition:transform .2s ease}
.navtext[aria-expanded="true"] .caret{transform:rotate(180deg);opacity:1}
.navtext .dot{width:6px;height:6px;border-radius:50%;background:var(--cy);flex:none;
  box-shadow:0 0 0 3px rgba(43,179,240,.18)}

/* full-width dropdown panel, anchored to the bottom of the header */
.dd{position:absolute;left:0;right:0;top:100%;
  background:#04070a;border-bottom:1px solid var(--line);
  box-shadow:0 40px 60px -30px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.dd.show{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
.dd-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr);
  gap:clamp(20px,3vw,48px);padding-block:30px 36px}
.dd-col h3{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 14px}
.dd-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dd-col a{display:block;text-decoration:none;color:#dbe5ef;font-size:15px;
  padding:6px 0;letter-spacing:-.008em;transition:color .12s ease}
.dd-col a:hover{color:var(--cy)}
.dd-col a small{display:block;font-size:12.5px;color:var(--fg-3);margin-top:1px;letter-spacing:0}
.dd-feature{grid-column:4;display:block;text-decoration:none;border:1px solid var(--line-2);
  border-radius:6px;padding:20px 22px;background:linear-gradient(160deg,#0b1219 0%,#06090d 70%);
  transition:border-color .15s ease}
.dd-feature:hover{border-color:rgba(43,179,240,.6)}
.dd-feature .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cy)}
.dd-feature b{display:block;margin-top:10px;font-size:1.12rem;font-weight:640;letter-spacing:-.02em;line-height:1.25}
.dd-feature span{display:block;margin-top:8px;font-size:13.5px;color:var(--fg-2);line-height:1.5}
.dd-feature i{font-style:normal;display:inline-flex;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--cy)}

/* right-side CTA: one solid button + its own split caret (the "Try Claude ▾" pattern) */
.cta-split{position:relative;display:flex;align-items:stretch;flex:none;margin-left:auto}
.cta-main{display:inline-flex;align-items:center;background:var(--cy);color:#00131d;
  font-weight:700;font-size:14.5px;letter-spacing:-.005em;text-decoration:none;
  padding:0 16px;height:38px;border-radius:3px 0 0 3px;transition:background .15s ease;white-space:nowrap}
.cta-caret{appearance:none;border:0;margin:0;cursor:pointer;background:var(--cy);color:#00131d;
  width:32px;height:38px;border-radius:0 3px 3px 0;display:grid;place-items:center;
  border-left:1px solid rgba(0,19,29,.25);transition:background .15s ease}
.cta-main:hover,.cta-caret:hover,.cta-caret[aria-expanded="true"]{background:#4cc2f7}
.cta-caret svg{width:10px;height:6px}
.cta-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:260px;
  background:#070b10;border:1px solid var(--line-2);border-radius:6px;padding:8px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.cta-menu.show{opacity:1;visibility:visible;transform:none;transition:opacity .14s ease,transform .14s ease}
.cta-menu a{display:block;text-decoration:none;padding:10px 12px;border-radius:4px;font-size:14.5px;color:#dbe5ef}
.cta-menu a small{display:block;font-size:12px;color:var(--fg-3);margin-top:1px}
.cta-menu a:hover{background:#0f171f;color:#fff}

/* mobile trigger + sheet */
.burger{display:none;appearance:none;background:none;border:1px solid var(--line-2);color:var(--fg);
  width:44px;height:40px;border-radius:3px;cursor:pointer;place-items:center;flex:none}
.burger svg{width:18px;height:18px}
.burger .x{display:none}
.site-head.open .burger .b{display:none}
.site-head.open .burger .x{display:block}
.msheet{display:none}

@media (max-width:980px){
  .nav,.cta-split,.dd{display:none}
  .burger{display:grid;margin-left:auto}
  .logo img{height:15px}
  .msheet{display:block;position:fixed;left:0;right:0;top:var(--navh);bottom:0;z-index:99;
    background:#030508;overflow-y:auto;overscroll-behavior:contain;
    padding:8px var(--pad) 40px;
    opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s}
  .site-head.open + .msheet{opacity:1;visibility:visible;transition:opacity .18s ease}
  .msheet details{border-bottom:1px solid var(--line)}
  .msheet summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    padding:18px 2px;font-size:18px;font-weight:600;letter-spacing:-.015em;min-height:44px}
  .msheet summary::-webkit-details-marker{display:none}
  .msheet summary svg{width:12px;height:7px;opacity:.7;transition:transform .2s ease}
  .msheet details[open] summary svg{transform:rotate(180deg)}
  .msheet .mgrp{padding:0 2px 18px}
  .msheet .mgrp h3{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--fg-3);margin:10px 0 6px}
  .msheet .mgrp a{display:block;text-decoration:none;color:#cfdae5;font-size:16px;padding:9px 0}
  .msheet .mlink{display:flex;align-items:center;gap:10px;padding:18px 2px;font-size:18px;font-weight:600;
    text-decoration:none;border-bottom:1px solid var(--line);letter-spacing:-.015em}
  .msheet .mlink .dot{width:7px;height:7px;border-radius:50%;background:var(--cy)}
  .msheet .mcta{margin-top:26px;display:grid;gap:12px}
  .msheet .mcta .btn{justify-content:center}
  .msheet .mcontact{margin-top:20px;font-size:14px;color:var(--fg-2);line-height:1.8}
  .msheet .mcontact a{color:var(--fg);text-decoration:none}
  body.menu-open{overflow:hidden}
}

/* =============================================================== SECTIONS */
section.band{border-top:1px solid var(--line);padding-block:clamp(64px,9vw,124px);position:relative}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--cy);
  font-size:12px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;margin-bottom:22px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--cy);flex:none}
h2{font-size:clamp(1.72rem,3.9vw,3.05rem);max-width:20ch}
h2.wide{max-width:26ch}
h2 .lit,h1 .lit{color:var(--cy)}
.lede{margin-top:22px;max-width:62ch;color:var(--fg-2);font-size:clamp(1rem,1.4vw,1.13rem)}
.secnote{margin-top:16px;font-size:12px;color:var(--fg-3);letter-spacing:.01em}
.doctrine{display:inline-flex;align-items:center;gap:14px;
  border-left:2px solid var(--cy);padding:2px 0 2px 16px;
  font-size:clamp(.95rem,1.4vw,1.06rem);color:#dbe6f0;font-weight:520;letter-spacing:-.01em;line-height:1.35}
.pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--fg-3);padding:4px 9px;border-radius:2px;white-space:nowrap}
.pill.live{color:var(--cy);border-color:rgba(43,179,240,.5);background:var(--cy-dim)}
.pill.ok{color:var(--gr);border-color:rgba(63,202,134,.45);background:rgba(63,202,134,.10)}
.pill.warn{color:var(--am);border-color:rgba(240,169,59,.45);background:rgba(240,169,59,.10)}
/* a visible review marker for anything that must be confirmed before launch */
.confirm{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.04em;color:#1a1200;background:var(--am);padding:2px 7px;border-radius:2px;
  vertical-align:middle;white-space:nowrap}

/* reveal-on-scroll (progressive: content is visible without JS) */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}

/* ================================================================ FINAL CTA */
.final{border-top:1px solid var(--line);position:relative;overflow:hidden;
  padding-block:clamp(72px,10vw,140px);background:#000}
.final::before{content:"";position:absolute;inset:auto 0 -18% 0;height:78%;pointer-events:none;
  background:radial-gradient(58% 100% at 34% 100%,rgba(43,179,240,.20),transparent 72%)}
.final .wrap{position:relative;z-index:1}
.final h2{max-width:22ch}
.ctarow{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.ctaurl{font-family:var(--mono);font-size:12px;color:var(--fg-3);word-break:break-all}

/* =================================================================== FOOTER */
.site-foot{border-top:1px solid var(--line);background:#020305;padding-block:56px 34px;font-size:14px;color:var(--fg-2)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px}
.foot-brand img{height:18px;width:auto;display:block}
.foot-brand p{margin-top:16px;max-width:34ch;line-height:1.6}
.foot-brand address{font-style:normal;margin-top:18px;line-height:1.75}
.foot-brand address a{color:var(--fg);text-decoration:none}
.foot-brand address a:hover{color:var(--cy)}
.site-foot h3{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot ul a{text-decoration:none;color:#c3cfdb}
.site-foot ul a:hover{color:var(--cy)}
.foot-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;font-size:12.5px;color:var(--fg-3)}
.foot-base a{text-decoration:none;color:var(--fg-3)}
.foot-base a:hover{color:var(--fg)}
.foot-base .social{margin-left:auto;display:flex;gap:18px}
@media (max-width:880px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .foot-base .social{margin-left:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .eyebrow{font-size:11px;letter-spacing:.14em}
  .eyebrow::before{width:26px}
  .dsk{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ===== HOME scroll motion (index.html) =====
   Every rule is scoped to body.home, so roadshow.html is untouched. Rides the shared contract in
   site.js: [data-anim] gets .in once it enters, [data-live] holds .live while on screen.
   The un-animated rules ARE the finished frame. Everything here sits under .js, which is absent
   for ?static, reduced motion and no-JS. Entrances use `backwards` fill, so each element hands
   back to its own styles when done (hover transitions keep working).
   Timing: --hd is a per-element base delay, set only at desktop widths where side-by-side pieces
   enter together. On phones each piece triggers on its own as it scrolls in, so it plays at once.
   --t is a child's stagger offset. Only transform / opacity / filter move, plus a few paint-only
   colour and stroke-dash changes. */
@keyframes hm-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes hm-up{from{opacity:0;transform:translateY(8px)}}
@keyframes hm-left{from{opacity:0;transform:translateX(-10px)}}
@keyframes hm-slide{from{opacity:0;transform:translateX(24px)}}
@keyframes hm-fade{from{opacity:0}}
@keyframes hm-pop{from{opacity:0;transform:scale(.6)}}
@keyframes hm-stamp{from{opacity:0;transform:scale(1.4)}}
@keyframes hm-blur{from{opacity:0;filter:blur(8px)}}
@keyframes hm-focus{from{opacity:0;filter:blur(16px);transform:scale(1.07)}}
@keyframes hm-track{from{opacity:0;letter-spacing:.72em}}
@keyframes hm-draw{from{stroke-dashoffset:100}}
@keyframes hm-arc{0%{stroke-dashoffset:100;opacity:0}15%{opacity:1}}
@keyframes hm-scalex{from{transform:scaleX(0)}}
@keyframes hm-scaley{from{transform:scaleY(0)}}
@keyframes hm-ping{from{opacity:.6;transform:none}to{opacity:0;transform:scale(1.25,1.7)}}
@keyframes hm-light{0%,100%{opacity:0}35%{opacity:1}}
@keyframes hm-sweep{0%{opacity:1;transform:scaleX(0)}60%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hm-drop{0%{opacity:0;transform:translateY(-4px)}20%{opacity:1}100%{opacity:0;transform:translateY(32px)}}
@keyframes hm-scrap{from{opacity:0;translate:0 22px;rotate:var(--sr,0deg);scale:.92}}
@keyframes hm-jitter{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes hm-corner{from{opacity:0;translate:var(--kx,0) var(--ky,0)}}
@keyframes hm-label{from{opacity:0;filter:blur(6px);scale:.94}}
@keyframes hm-frame{from{border-color:rgba(67,189,245,.1)}}
@keyframes hm-tick{0%{background:#3b4652;box-shadow:0 0 0 0 rgba(63,202,134,0)}50%{background:var(--gr);box-shadow:0 0 0 8px rgba(63,202,134,.22)}}
@keyframes hm-line{from{transform:rotate(-38deg) scaleY(0)}}
@keyframes hm-bloom{from{opacity:0;transform:translateY(14%)}}

/* every eyebrow's leading rule draws in just after its text */
.js .home .eyebrow.rv::before{transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s cubic-bezier(.65,0,.35,1) calc(var(--d,0ms) + 250ms)}
.js .home .eyebrow.rv.in::before{transform:none}

/* ---- hero: the diagram's build (inline in index.html) now waits for .in; its ambient loops
   (flow arrows, converge glow, core halo) pause whenever the diagram is offscreen */
.js .home .diagram:not(.in) *{animation-play-state:paused}
.js .home .diagram:not(.live) :is(.flowar,.cglow,.corehalo){animation-play-state:paused}
.js .home .announce:not(.in){opacity:0}
.js .home .announce.in{animation:hm-up .6s cubic-bezier(.2,.7,.3,1) backwards}

/* ---- what we do: triad ticks in; scraps drift in tilted, arrow draws, the queue stamps */
.home .triad li::before{transform-origin:50% 0}
.home .triad li:nth-child(2){--t:.14s}
.home .triad li:nth-child(3){--t:.28s}
.js .home .triad:not(.in) li{opacity:0}
.js .home .triad.in li{animation:hm-left .6s cubic-bezier(.2,.7,.3,1) var(--t,0s) backwards}
.js .home .triad.in li::before{animation:hm-scaley .45s cubic-bezier(.65,0,.35,1) calc(var(--t,0s) + .25s) backwards}

@media (min-width:981px){.home .bamid{--hd:.55s}.home .after{--hd:.8s}}
.js .home .ba [data-anim]:not(.in){opacity:0}
.js .home .ba [data-anim].in{animation:hm-rise .7s cubic-bezier(.2,.7,.3,1) var(--hd,0s) backwards}
/* scattered order + a little extra tilt that settles onto each scrap's resting angle */
.home .scrap:nth-child(1){--t:.30s;--sr:-5deg}
.home .scrap:nth-child(2){--t:.12s;--sr:5deg}
.home .scrap:nth-child(3){--t:.40s;--sr:4deg}
.home .scrap:nth-child(4){--t:.20s;--sr:-6deg}
.home .scrap:nth-child(5){--t:.06s;--sr:-4deg}
.home .scrap:nth-child(6){--t:.34s;--sr:6deg}
.home .scrap:nth-child(7){--t:.24s;--sr:4deg}
.home .scrap:nth-child(8){--t:.46s;--sr:-5deg}
.js .home .before.in .scrap{animation:hm-scrap .75s cubic-bezier(.2,.7,.3,1) var(--t) backwards,
  hm-jitter 5s ease-in-out calc(var(--t) + 1s) infinite}
.js .home .before.in .scrap:nth-child(odd){animation-delay:var(--t),calc(var(--t) + 3.5s)}
.js .home .before:not(.live) .scrap{animation-play-state:running,paused}
.home .bamid path{stroke-dasharray:100}
.js .home .bamid:not(.in) path{stroke-dashoffset:100}
.js .home .bamid.in img{animation:hm-fade .5s ease calc(var(--hd,0s) + .1s) backwards}
.js .home .bamid.in path{animation:hm-draw .45s cubic-bezier(.65,0,.35,1) calc(var(--hd,0s) + .25s) backwards}
.js .home .bamid.in path + path{animation-duration:.25s;animation-delay:calc(var(--hd,0s) + .65s)}
.home .qrow:nth-child(2){--t:.14s}
.home .qrow:nth-child(3){--t:.28s}
.home .qrow:nth-child(4){--t:.42s}
.js .home .after:not(.in) :is(.qrow,.stamps .ar,.stamp.ap,.stamp.wt,.qfoot){opacity:0}
.js .home .after.in .qrow{animation:hm-up .5s cubic-bezier(.2,.7,.3,1) calc(var(--hd,0s) + .15s + var(--t,0s)) backwards}
.js .home .after.in .stamps .ar{animation:hm-fade .25s ease calc(var(--hd,0s) + .85s + var(--t,0s) * 2.6) backwards}
.js .home .after.in :is(.stamp.ap,.stamp.wt){animation:hm-stamp .38s cubic-bezier(.2,.9,.3,1.3) calc(var(--hd,0s) + 1s + var(--t,0s) * 2.6) backwards}
.js .home .after.in .qfoot{animation:hm-fade .6s ease calc(var(--hd,0s) + 2.2s) backwards}

/* ---- pillars: the frame's brackets close in, the label resolves, then the three cards fill */
.home .frame .c1{--kx:-14px;--ky:-14px}
.home .frame .c2{--kx:14px;--ky:-14px}
.home .frame .c3{--kx:-14px;--ky:14px}
.home .frame .c4{--kx:14px;--ky:14px}
.js .home .frame:not(.in){border-color:rgba(67,189,245,.1)}
.js .home .frame:not(.in) :is(.corner,.framelabel){opacity:0}
.js .home .frame.in{animation:hm-frame 1.1s ease .1s backwards}
.js .home .frame.in .corner{animation:hm-corner .8s cubic-bezier(.2,.7,.3,1) .05s backwards}
.js .home .frame.in .framelabel{animation:hm-label .7s ease .45s backwards}
@media (min-width:981px){
  .home .pillar:nth-child(1){--hd:.5s}
  .home .pillar:nth-child(2){--hd:.65s}
  .home .pillar:nth-child(3){--hd:.8s}
}
.home .pillar > :nth-child(2){--t:.08s}
.home .pillar > :nth-child(3){--t:.16s}
.home .pillar > :nth-child(4){--t:.26s}
.js .home .pillar:not(.in) > *{opacity:0}
.js .home .pillar.in > *{animation:hm-rise .65s cubic-bezier(.2,.7,.3,1) calc(var(--hd,0s) + var(--t,0s)) backwards}
.js .home .pillar.support.in h3::after{animation:hm-fade .5s ease calc(var(--hd,0s) + .6s) backwards}

/* ---- doctrine: the track draws, then node -> arc -> node around the loop; the steps list lands
   in sync with their nodes (desktop); the two orbit dots only travel while the loop is on screen */
.home .loop :is(.lp-track,.lp-arc){stroke-dasharray:100}
.home .loop .lp-node{transform-box:fill-box;transform-origin:center}
.home .loop .ln1{--t:.6s}
.home .loop .la1{--t:.95s}
.home .loop .ln2{--t:1.4s}
.home .loop .la2{--t:1.75s}
.home .loop .ln3{--t:2.2s}
.home .loop .la3{--t:2.55s}
.js .home .loop:not(.in) .lp-track{stroke-dashoffset:100}
.js .home .loop:not(.in) :is(.lp-arc,.lp-node,.lp-core,.orbit){opacity:0}
.js .home .loop.in .lp-track{animation:hm-draw 1.1s cubic-bezier(.65,0,.35,1) backwards}
.js .home .loop.in .lp-core{animation:hm-fade .9s ease .3s backwards}
.js .home .loop.in .lp-node{animation:hm-pop .5s cubic-bezier(.2,.9,.3,1.25) var(--t) backwards}
.js .home .loop.in .lp-arc{animation:hm-arc .6s cubic-bezier(.65,0,.35,1) var(--t) backwards}
.js .home .loop.in .orbit{animation:orbit 7.5s linear 3.1s infinite,hm-fade .6s ease 3.1s backwards}
.js .home .loop.in .orbit2{animation-delay:-.65s,3.1s}
.js .home .loop:not(.live) .orbit{animation-play-state:paused}
@media (min-width:981px){
  .home .dstep:nth-child(1){--hd:.6s}
  .home .dstep:nth-child(2){--hd:1.4s}
  .home .dstep:nth-child(3){--hd:2.2s}
}
.js .home .dstep:not(.in) > *{opacity:0}
.js .home .dstep.in .n{animation:hm-pop .5s cubic-bezier(.2,.9,.3,1.25) var(--hd,0s) backwards}
.js .home .dstep.in .n + div{animation:hm-rise .6s cubic-bezier(.2,.7,.3,1) calc(var(--hd,0s) + .1s) backwards}

/* ---- one core -> many apps: the core lights up, stems draw down with a pulse, tiles rise,
   and each Live chip pings once */
.home .corebar::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px rgba(43,179,240,.9),0 0 48px -8px rgba(43,179,240,.6),inset 0 0 40px -14px rgba(43,179,240,.35)}
.home .corebar .chip:nth-child(2){--t:.05s}
.home .corebar .chip:nth-child(3){--t:.1s}
.home .corebar .chip:nth-child(4){--t:.15s}
.home .corebar .chip:nth-child(5){--t:.2s}
.home .corebar .chip:nth-child(6){--t:.25s}
.home .corebar .chip:nth-child(7){--t:.3s}
.home .corebar .chip:nth-child(8){--t:.35s}
.js .home .corebar:not(.in),.js .home .corebar:not(.in) :is(.cl,.chip){opacity:0}
.js .home .corebar.in{animation:hm-rise .7s cubic-bezier(.2,.7,.3,1) backwards}
.js .home .corebar.in::after{animation:hm-light 1.6s ease .35s}
.js .home .corebar.in .cl{animation:hm-fade .6s ease .2s backwards}
.js .home .corebar.in .chip{animation:hm-up .45s cubic-bezier(.2,.7,.3,1) calc(.35s + var(--t,0s)) backwards}
.home .stems i{position:relative;transform-origin:50% 0}
.home .stems i:nth-child(2){--t:.08s}
.home .stems i:nth-child(3){--t:.16s}
.home .stems i::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;
  background:#d6f1ff;box-shadow:0 0 8px rgba(43,179,240,.9);opacity:0;pointer-events:none}
.js .home .stems:not(.in) i{transform:scaleY(0)}
.js .home .stems.in i{animation:hm-scaley .5s cubic-bezier(.65,0,.35,1) calc(.5s + var(--t,0s)) backwards}
.js .home .stems.in i::after{animation:hm-drop .7s cubic-bezier(.4,0,.6,1) calc(1.05s + var(--t,0s))}
@media (min-width:981px){
  .home .app:nth-child(1){--hd:.35s}
  .home .app:nth-child(2){--hd:.47s}
  .home .app:nth-child(3){--hd:.59s}
}
.home .app li .pill{position:relative}
.home .app li .pill::after{content:"";position:absolute;inset:-1px;border:1px solid var(--gr);border-radius:inherit;
  opacity:0;pointer-events:none}
.home .app li:nth-child(2){--t:.15s}
.home .app li:nth-child(3){--t:.3s}
.home .app li:nth-child(4){--t:.45s}
.js .home .app:not(.in){opacity:0}
.js .home .app.in{animation:hm-rise .75s cubic-bezier(.2,.7,.3,1) var(--hd,0s) backwards}
.js .home .app.in li{animation:hm-fade .5s ease calc(var(--hd,0s) + .3s + var(--t,0s)) backwards}
.js .home .app.in li .pill::after{animation:hm-ping 1.2s cubic-bezier(.2,.7,.3,1) calc(var(--hd,0s) + .9s + var(--t,0s))}
/* pricing: rows slide in under the confirm chip */
.home .price .row:nth-of-type(2){--t:.12s}
.home .price .row:nth-of-type(3){--t:.24s}
.js .home .price:not(.in) :is(.row,.foot){opacity:0}
.js .home .price.in .row{animation:hm-slide .6s cubic-bezier(.2,.7,.3,1) calc(.25s + var(--t,0s)) backwards}
.js .home .price.in .foot{animation:hm-fade .6s ease .75s backwards}

/* ---- services: columns fill in turn; stats sweep a cyan rule and count up (inline script);
   compliance chips stagger */
@media (min-width:981px){
  .home .svc > div:nth-child(2){--hd:.12s}
  .home .svc > div:nth-child(3){--hd:.24s}
  .home .stat:nth-child(2){--hd:.1s}
  .home .stat:nth-child(3){--hd:.2s}
  .home .stat:nth-child(4){--hd:.3s}
}
.home .svc > div > h3{--t:.07s}
.home .svc > div > p{--t:.14s}
.home .svc li:nth-child(1){--t:0s}
.home .svc li:nth-child(2){--t:.05s}
.home .svc li:nth-child(3){--t:.1s}
.home .svc li:nth-child(4){--t:.15s}
.home .svc li:nth-child(5){--t:.2s}
.home .svc li:nth-child(6){--t:.25s}
.home .svc li:nth-child(7){--t:.3s}
.js .home .svc > div:not(.in) :is(.k,h3,p,li){opacity:0}
.js .home .svc > div.in :is(.k,h3,p){animation:hm-rise .6s cubic-bezier(.2,.7,.3,1) calc(var(--hd,0s) + var(--t,0s)) backwards}
.js .home .svc > div.in li{animation:hm-left .45s cubic-bezier(.2,.7,.3,1) calc(var(--hd,0s) + .3s + var(--t,0s)) backwards}
.home .stat{position:relative}
.home .stat::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--cy);
  opacity:0;transform-origin:0 50%;pointer-events:none}
.js .home .stat:not(.in) > *{opacity:0}
.js .home .stat.in::before{animation:hm-sweep 1.3s cubic-bezier(.65,0,.35,1) var(--hd,0s)}
.js .home .stat.in .v{animation:hm-up .6s cubic-bezier(.2,.7,.3,1) var(--hd,0s) backwards}
.js .home .stat.in :is(.l,.n){animation:hm-fade .6s ease calc(var(--hd,0s) + .25s) backwards}
.home .regs > :nth-child(2){--t:.12s}
.home .regs > :nth-child(3){--t:.18s}
.home .regs > :nth-child(4){--t:.24s}
.home .regs > :nth-child(5){--t:.3s}
.home .regs > :nth-child(6){--t:.36s}
.home .regs > :nth-child(7){--t:.42s}
.home .regs > :nth-child(8){--t:.48s}
.js .home .regs:not(.in) > *{opacity:0}
.js .home .regs.in > *{animation:hm-up .45s cubic-bezier(.2,.7,.3,1) var(--t,0s) backwards}

/* ---- roadshow band: echoes roadshow.html (diagonal draws, 20/26 rises, 20/27 focus-pulls,
   Vision underlines), the agenda lists in, the Live demo tag pings once, and the stops slide in */
.js .home .road:not(.in)::before{transform:rotate(-38deg) scaleY(0)}
.js .home .road.in::before{animation:hm-line 1s cubic-bezier(.65,0,.35,1) backwards}
.home .vision .yr.now{transform-origin:0 60%}
.home .vision .w:last-child{position:relative;justify-self:start}
.home .vision .w:last-child::after{content:"";position:absolute;left:0;right:.42em;bottom:-.5em;height:2px;
  background:var(--cy);transform-origin:0 50%}
.js .home .vision:not(.in) > *{opacity:0}
.js .home .vision.in .yr:first-child{animation:hm-rise .7s cubic-bezier(.2,.7,.3,1) .05s backwards}
.js .home .vision.in .w{animation:hm-track .75s cubic-bezier(.2,.7,.3,1) .35s backwards}
.js .home .vision.in .yr.now{animation:hm-focus 1s cubic-bezier(.2,.7,.3,1) .7s backwards}
.js .home .vision.in .w:last-child{animation-delay:1.2s}
.js .home .vision.in .w:last-child::after{animation:hm-scalex .6s cubic-bezier(.65,0,.35,1) 1.75s backwards}
.home .agenda li:nth-child(2){--t:.12s}
.home .agenda li:nth-child(3){--t:.24s}
.home .livetag{position:relative}
.home .livetag::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--cy);
  opacity:0;pointer-events:none}
.js .home .agenda:not(.in) li{opacity:0}
.js .home .agenda.in li{animation:hm-left .55s cubic-bezier(.2,.7,.3,1) calc(.2s + var(--t,0s)) backwards}
.js .home .agenda.in .livetag::after{animation:hm-ping 1.3s cubic-bezier(.2,.7,.3,1) 1s}
.home .stops-h::after{transform-origin:0 50%}
.js .home .stops-h:not(.in)::after{transform:scaleX(0)}
.js .home .stops-h.in::after{animation:hm-scalex .9s cubic-bezier(.65,0,.35,1) .15s backwards}
@media (min-width:981px){
  .home .stop:nth-child(2){--hd:.08s}
  .home .stop:nth-child(3){--hd:.16s}
  .home .stop:nth-child(4){--hd:.24s}
}
.js .home .stop:not(.in){opacity:0}
.js .home .stop.in{animation:hm-slide .7s cubic-bezier(.2,.7,.3,1) var(--hd,0s) backwards}
.js .home .stop.in .dt{animation:hm-blur .8s cubic-bezier(.2,.7,.3,1) calc(var(--hd,0s) + .1s) backwards}
.js .home .stop.in .reg{animation:hm-fade .5s ease calc(var(--hd,0s) + .35s) backwards}

/* ---- customer zero: rows arrive pending (grey), then tick green in sequence; "Running" stamps */
.home .czlist li:nth-child(2){--t:.12s}
.home .czlist li:nth-child(3){--t:.24s}
.js .home .czpanel:not(.in) :is(.czlist li,.bahead .pill,blockquote.q){opacity:0}
.js .home .czpanel.in .czlist li{animation:hm-up .5s cubic-bezier(.2,.7,.3,1) calc(.25s + var(--t,0s)) backwards}
.js .home .czpanel.in .czlist li i{animation:hm-tick .7s ease calc(.65s + var(--t,0s) * 2.5) backwards}
.js .home .czpanel.in .czlist li span{animation:hm-fade .4s ease calc(.75s + var(--t,0s) * 2.5) backwards}
.js .home .czpanel.in .bahead .pill{animation:hm-stamp .4s cubic-bezier(.2,.9,.3,1.3) 1.6s backwards}
.js .home .czpanel.in blockquote.q{animation:hm-fade .8s ease 1.3s backwards}

/* ---- closing CTA: the floor glow blooms up as the band arrives */
.js .home .final:not(.in)::before{opacity:0}
.js .home .final.in::before{animation:hm-bloom 1.6s cubic-bezier(.2,.7,.3,1) backwards}