/* Servants First — The Gold Thread */
:root{
  --canvas:#0C0A07;
  --panel:#161209;
  --accent:#E3A82B;
  --accent-hover:#F2BE52;
  --accent-muted:rgba(227,168,43,.28);
  --accent-whisper:rgba(227,168,43,.10);
  --text-secondary:#A79D89;
  --text-primary:#F4EFE3;
  --border:rgba(227,168,43,.16);
  --border-strong:rgba(227,168,43,.45);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --ease:cubic-bezier(.22,.61,.2,1);
  --ease-snappy:cubic-bezier(.34,1.2,.4,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.6;
  opacity:0;transition:opacity .8s var(--ease);
}
body.ready{opacity:1}

h1,h2,h3,.settle-head{font-family:"Space Grotesk",sans-serif;line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(28px,3.6vw,44px);font-weight:700;max-width:22ch}
h3{font-size:20px;font-weight:500}
.kicker{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
a{color:var(--text-primary)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#141005;padding:10px 16px;border-radius:0 0 8px 0;font-weight:500;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ambient environment layer */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--accent);opacity:0;
}
.on-motion .env i{animation:mote 76s linear infinite}
.env i:nth-child(1){left:8%;animation-delay:-2s}
.env i:nth-child(2){left:16%;animation-delay:-14s}
.env i:nth-child(3){left:24%;animation-delay:-33s}
.env i:nth-child(4){left:33%;animation-delay:-51s}
.env i:nth-child(5){left:41%;animation-delay:-8s}
.env i:nth-child(6){left:50%;animation-delay:-27s}
.env i:nth-child(7){left:58%;animation-delay:-45s}
.env i:nth-child(8){left:66%;animation-delay:-19s}
.env i:nth-child(9){left:75%;animation-delay:-62s}
.env i:nth-child(10){left:83%;animation-delay:-38s}
.env i:nth-child(11){left:91%;animation-delay:-70s}
.env i:nth-child(12){left:96%;animation-delay:-23s}
@keyframes mote{
  0%{transform:translateY(105vh);opacity:0}
  6%{opacity:.14}
  50%{opacity:.08}
  94%{opacity:.13}
  100%{transform:translateY(-5vh);opacity:0}
}

/* nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:34px;
  min-height:76px;padding:0 clamp(20px,4vw,48px);
  background:linear-gradient(to bottom,rgba(12,10,7,.88),rgba(12,10,7,0));
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark{width:32px;height:32px;color:var(--accent);flex:none}
.logo-emblem{height:38px;width:auto;flex:none}
.logo-full{height:150px;width:auto}
.brand-name{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:17px;letter-spacing:.04em;text-transform:uppercase}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{
  text-decoration:none;font-size:15px;color:var(--text-secondary);
  transition:color .3s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-actions{display:flex;align-items:center;gap:18px}
.signin{
  font-size:15px;color:var(--text-secondary);text-decoration:none;white-space:nowrap;
  transition:color .3s var(--ease);
}
.signin:hover{color:var(--accent)}
.btn{
  display:inline-block;background:var(--accent);color:#141005;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:16px;
  padding:13px 26px;border-radius:10px;text-decoration:none;border:0;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
  text-shadow:none;white-space:nowrap;
}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 8px 30px rgba(227,168,43,.25)}
.btn-small{font-size:14px;padding:9px 18px}

/* ============ HERO ============ */
.hero{position:relative;height:500vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
.poster,#hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background-size:cover;background-position:center;
}
#hero-video{opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,8,5,0) 35%,rgba(10,8,5,.62) 100%)}
.ring{position:absolute;right:28px;bottom:28px;width:34px;height:34px;color:var(--accent);transform:rotate(-90deg);opacity:.85}
.ring circle{transition:stroke-dashoffset .2s linear}

.cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;color:var(--text-secondary);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .6s var(--ease);
}
.cue.hide{opacity:0}
.on-motion .cue svg{animation:cuebob 2.6s var(--ease) -1.2s infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* caption bands */
.band{
  position:absolute;z-index:5;opacity:0;pointer-events:none;
  max-width:520px;text-shadow:var(--tshadow);
}
.band .btn{text-shadow:none}
.band-left{left:clamp(24px,7vw,110px);top:50%;transform:translateY(-50%)}
.band-right{right:clamp(24px,7vw,110px);top:50%;transform:translateY(-50%);text-align:right}
.band-settle{left:50%;top:16%;transform:translateX(-50%);text-align:center;max-width:760px}
.band h1,.band .h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.01em}
.band .pillar{font-size:clamp(40px,5vw,66px);line-height:1.05}
.band-sub{
  color:rgba(244,239,227,.92);font-size:clamp(16px,1.4vw,19px);line-height:1.55;
  margin-top:16px;max-width:42ch;
  opacity:clamp(0,(var(--k,1) - .45)*3,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,1) - .45)*3,1))*14px));
}
.band-right .band-sub{margin-left:auto}
.settle-head{font-size:clamp(32px,4.2vw,56px);font-weight:700}
.settle-sub{color:var(--text-secondary);font-size:clamp(16px,1.4vw,19px);margin-top:16px;max-width:46ch}
.band-settle .settle-sub{margin-left:auto;margin-right:auto}
.settle-cta{margin-top:26px}

/* per-band scrims: flank ellipses that ride --k */
.band::before{
  content:"";position:absolute;inset:-14% -10%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
}
.band-left::before{background:radial-gradient(ellipse 74% 62% at 46% 50%,rgba(6,5,3,.66) 0%,rgba(6,5,3,.44) 46%,rgba(6,5,3,0) 76%)}
.band-right::before{background:radial-gradient(ellipse 74% 62% at 54% 50%,rgba(6,5,3,.66) 0%,rgba(6,5,3,.44) 46%,rgba(6,5,3,0) 76%)}
.band-1::before{background:radial-gradient(ellipse 74% 62% at 46% 50%,rgba(6,5,3,.72) 0%,rgba(6,5,3,.5) 46%,rgba(6,5,3,0) 76%)}
.band-settle::before{background:radial-gradient(ellipse 70% 68% at 50% 42%,rgba(6,5,3,.62) 0%,rgba(6,5,3,.4) 46%,rgba(6,5,3,0) 76%)}

/* split text mechanics */
.split .w{display:inline-block;white-space:nowrap}
.split .c{display:inline-block}
.sr-line{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* (f) drift-down */
[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-24px));
}
/* (i) weave: vertical alternating jitter per char */
[data-entrance="weave"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*var(--jy,0px)));
}
/* (b) grid snap-align: horizontal slide in reading order */
[data-entrance="grid"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,18px)));
}
/* (e) word-by-word rise into staged settle */
[data-entrance="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px));
}
[data-entrance="rise"] .settle-sub{
  opacity:clamp(0,(var(--k,0) - .66)*4,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .66)*4,1))*14px));
}
[data-entrance="rise"] .settle-cta{
  opacity:clamp(0,(var(--k,0) - .78)*5,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .78)*5,1))*14px));
}

.settle-creed{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  margin-bottom:18px;
  opacity:clamp(0,(var(--k,1) - .05)*3,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,1) - .05)*3,1))*-10px));
}
.static-hero .settle-creed{opacity:1;transform:none;margin:26px 0 0}
.creed-chip{
  display:inline-block;padding:9px 16px;border-radius:99px;
  background:rgba(10,8,5,.55);border:1px solid rgba(227,168,43,.3);
  backdrop-filter:blur(10px);
}

/* the creed section */
.triad{padding-top:clamp(70px,9vh,110px);padding-bottom:clamp(40px,5vh,70px)}
.triad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.titem{border-top:1px solid var(--border);padding-top:22px;position:relative}
.tdot{position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(227,168,43,.5)}
.triad-word{font-size:clamp(30px,3.4vw,46px);font-weight:700;max-width:none}
.titem p{color:var(--text-secondary);margin-top:8px;font-size:15.5px;max-width:34ch}
@media (max-width:720px){.triad-grid{grid-template-columns:1fr;gap:30px}}

/* static hero (phones, reduced motion) */
.static-hero{
  display:none;position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;width:min(92vw,640px);text-shadow:var(--tshadow);
}
.static-hero .btn{text-shadow:none}
.static-hero h1{font-size:clamp(30px,8.4vw,44px);font-weight:700;line-height:1.12}

/* the five static-hero gates: identical strings live in app.js */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:100vh}
  .band,.ring,.cue{display:none}
  #hero-video{display:none}
  .static-hero{display:block}
  .stage .scrim{background:radial-gradient(ellipse 120% 90% at 50% 50%,rgba(10,8,5,.2) 0%,rgba(10,8,5,.72) 100%)}
}
@media (max-height:560px){.cue{display:none}}

/* ============ BELOW THE FOLD ============ */
main{position:relative;z-index:2;background:var(--canvas)}
.section{
  position:relative;max-width:1140px;margin:0 auto;
  padding:clamp(90px,12vh,150px) clamp(22px,5vw,48px);
}
.lede{color:var(--text-secondary);max-width:62ch;margin-top:18px;font-size:18px}

/* thread spine + nodes */
.thread-spine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#spine-path{stroke:var(--accent);stroke-width:2;opacity:.5}
.node{
  position:absolute;left:50%;top:calc(clamp(90px,12vh,150px) + 4px);width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--canvas);border:2px solid var(--accent-muted);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.node.lit{border-color:var(--accent);box-shadow:0 0 14px rgba(227,168,43,.5)}
@media (max-width:960px){.thread-spine,.node{display:none}}

/* entrances (scroll choreography) */
.rise-in{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in > .rise-in,.rise-in.in{opacity:1;transform:none}
.cards .card{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.cards.in .card{opacity:1;transform:none}
.cards.in .card:nth-child(1){transition-delay:.05s}
.cards.in .card:nth-child(2){transition-delay:.15s}
.cards.in .card:nth-child(3){transition-delay:.25s}
.cards.in .card:nth-child(4){transition-delay:.35s}
.cards.in .card:nth-child(5){transition-delay:.45s}
.cards.in .card:nth-child(6){transition-delay:.55s}
.cards.entered .card:nth-child(1),.cards.entered .card:nth-child(2),.cards.entered .card:nth-child(3),
.cards.entered .card:nth-child(4),.cards.entered .card:nth-child(5),.cards.entered .card:nth-child(6){transition-delay:0s}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:26px;position:relative;overflow:hidden;
  transition:border-color .5s var(--ease),transform .8s var(--ease),opacity .8s var(--ease);
}
.card:hover{border-color:var(--border-strong)}
.card h3{margin:18px 0 8px}
.card p{color:var(--text-secondary);font-size:15.5px}
.chiplabel{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--border);
  padding:5px 10px;border-radius:99px;margin-bottom:18px;
}

/* CSS-drawn UI stand-ins */
.mini{background:rgba(12,10,7,.6);border:1px solid var(--border);border-radius:10px;padding:14px;display:grid;gap:9px}
.mrow{display:flex;align-items:center;gap:9px}
.mini .dot{width:14px;height:14px;border-radius:50%;background:var(--accent-muted);flex:none}
.mini .bar{height:8px;border-radius:4px;background:rgba(244,239,227,.22)}
.mini .bar.dim{background:rgba(244,239,227,.12)}
.mini .bar.gold{background:var(--accent)}
.w4{width:34%}.w5{width:44%}.w6{width:56%}.w7{width:70%}
.mini .pill{width:34px;height:10px;border-radius:99px;margin-left:auto;flex:none}
.pill.ok{background:rgba(227,168,43,.55)}
.pill.warn{background:rgba(244,239,227,.16);border:1px solid rgba(244,239,227,.2)}
.mini .num{width:38px;height:8px;border-radius:4px;background:rgba(244,239,227,.28);margin-left:auto;flex:none}
.mini .num.gold{background:var(--accent)}
.mrow.total{border-top:1px solid var(--border);padding-top:9px}
.wcard{display:grid;gap:7px;border:1px solid var(--border);border-radius:8px;padding:10px}
.reads{display:flex;gap:6px;align-items:center}
.rdot{width:9px;height:9px;border-radius:50%;background:rgba(244,239,227,.14)}
.rdot.on{background:var(--accent)}
.on-motion .reads .rdot:nth-child(4).on{animation:readpulse 4.5s var(--ease) -1.2s infinite}

/* calendar stand-in */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal span{aspect-ratio:1;border-radius:3px;background:rgba(244,239,227,.1)}
.cal span.on{background:var(--accent);box-shadow:0 0 8px rgba(227,168,43,.4)}
/* resource directory stand-in */
.pin{
  width:11px;height:11px;flex:none;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);border:2px solid var(--accent);
}
.dist{
  margin-left:auto;flex:none;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;color:var(--accent);letter-spacing:.04em;
}
.on-motion .pin:first-of-type{animation:pinpulse 5s var(--ease) -1s infinite}
@keyframes pinpulse{0%,100%{box-shadow:0 0 0 rgba(227,168,43,0)}50%{box-shadow:0 0 9px rgba(227,168,43,.55)}}
/* dashboard stand-in */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.stat{height:22px;border-radius:5px;background:rgba(244,239,227,.12);border:1px solid var(--border)}
.stat:first-child{background:var(--accent-whisper);border-color:var(--border-strong)}
.spark{display:flex;align-items:flex-end;gap:5px;height:34px}
.spark i{flex:1;background:var(--accent-muted);border-radius:2px 2px 0 0}
.spark i:nth-child(1){height:38%}
.spark i:nth-child(2){height:56%}
.spark i:nth-child(3){height:44%}
.spark i:nth-child(4){height:72%}
.spark i:nth-child(5){height:62%}
.spark i:nth-child(6){height:88%}
.spark i:nth-child(7){height:100%;background:var(--accent)}
@keyframes readpulse{0%,100%{box-shadow:0 0 0 rgba(227,168,43,0)}50%{box-shadow:0 0 10px rgba(227,168,43,.6)}}

/* roles */
.roles-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:34px;margin-top:44px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.04em;
  background:transparent;color:var(--text-secondary);
  border:1px solid var(--border);border-radius:99px;padding:10px 16px;cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.chip:hover{color:var(--text-primary);border-color:var(--border-strong)}
.chip[aria-selected="true"]{color:#141005;background:var(--accent);border-color:var(--accent);font-weight:500}
.perm-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px;display:grid;gap:4px}
.perm{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;
  color:var(--text-secondary);font-size:15.5px;
  opacity:.42;transition:opacity .45s var(--ease),background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease);
}
.perm-ic{width:8px;height:8px;border-radius:50%;background:rgba(244,239,227,.18);flex:none;transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.perm.on{opacity:1;color:var(--text-primary);background:var(--accent-whisper)}
.perm.on .perm-ic{background:var(--accent);box-shadow:0 0 10px rgba(227,168,43,.55)}
.roles-left{display:flex;flex-direction:column;gap:28px}
.roles-note{color:var(--text-secondary);max-width:52ch;font-size:16px;border-left:2px solid var(--accent-muted);padding-left:18px}

/* white label */
.brandgrid{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center}
.brandlist{list-style:none;display:grid;gap:0}
.brandlist li{
  position:relative;padding:18px 0 18px 34px;border-bottom:1px solid var(--border);
  font-size:17px;color:var(--text-primary);
}
.brandlist li:first-child{border-top:1px solid var(--border)}
.brandlist li::before{
  content:"";position:absolute;left:8px;top:26px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(227,168,43,.45);
}
.brandnote{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px;
  color:var(--text-secondary);font-size:16.5px;
}
@media (max-width:960px){.brandgrid{grid-template-columns:1fr;gap:26px}}

/* security */
.locks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.lock{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px;transition:border-color .5s var(--ease)}
.lock:hover{border-color:var(--border-strong)}
.lock svg{width:30px;height:30px;color:var(--accent);margin-bottom:14px}
.lock h3{margin-bottom:8px}
.lock p{color:var(--text-secondary);font-size:15.5px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;list-style:none;counter-reset:none}
.step{position:relative;padding:26px 26px 26px 26px;border-left:1px solid var(--border)}
.stepnum{font-family:"IBM Plex Mono",monospace;color:var(--accent);font-size:13px;letter-spacing:.2em;display:block;margin-bottom:12px}
.step h3{margin-bottom:6px}
.step p{color:var(--text-secondary);font-size:15.5px}

/* faq */
.faqs{margin-top:38px;max-width:760px;display:grid;gap:12px}
details{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .4s var(--ease)}
details:hover{border-color:var(--border-strong)}
summary{
  cursor:pointer;padding:18px 22px;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:17px;
  list-style:none;position:relative;padding-right:48px;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease);
}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details p{padding:0 22px 20px;color:var(--text-secondary);max-width:66ch}

/* final cta */
.cta-section{padding-bottom:clamp(110px,14vh,170px)}
.cta-inner{
  position:relative;background:var(--panel);border:1px solid var(--border);border-radius:24px;
  padding:clamp(36px,6vw,70px);overflow:hidden;
  background-image:linear-gradient(rgba(16,13,7,.82),rgba(12,10,7,.94)),url("hero-ending.jpg");
  background-size:cover;background-position:center;
}
.cta-inner h2{max-width:18ch}
.demo-form{margin-top:34px;max-width:460px;display:grid;gap:8px}
.demo-form label{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);margin-top:10px}
.demo-form input{
  background:rgba(12,10,7,.65);border:1px solid rgba(227,168,43,.34);border-radius:10px;
  color:var(--text-primary);font-family:"Instrument Sans",sans-serif;font-size:16px;padding:13px 16px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.demo-form input::placeholder{color:rgba(167,157,137,.55)}
.demo-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(227,168,43,.15)}
.demo-form .btn{margin-top:20px;justify-self:start}
.form-note{color:var(--accent);font-size:15px;min-height:1.4em;margin-top:6px}

/* footer */
.footer{border-top:1px solid var(--border);background:var(--canvas);position:relative;z-index:2}
.foot-inner{max-width:1140px;margin:0 auto;padding:44px clamp(22px,5vw,48px);display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.foot-brand{display:flex;gap:12px;align-items:center}
.tagline{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.foot-links a{color:var(--text-secondary);text-decoration:none;font-size:14.5px;transition:color .3s var(--ease)}
.foot-links a:hover{color:var(--text-primary)}
.foot-small{width:100%;color:rgba(167,157,137,.6);font-size:13px}

/* touch targets */
@media (pointer:coarse){
  .btn,.chip,summary{min-height:44px}
  .btn{display:inline-flex;align-items:center;justify-content:center}
  .nav-links a{padding:10px 2px}
}

/* responsive */
@media (max-width:1024px){
  .cards,.locks,.steps{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .roles-wrap{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav{gap:12px}
  .nav-links{display:none}
  .nav-actions{gap:12px;margin-left:auto}
  .brand-name{font-size:15px;white-space:nowrap}
  .signin{font-size:14px}
  .btn-small{padding:8px 14px;font-size:13px}
  .cards,.locks,.steps{grid-template-columns:1fr}
  h2{font-size:clamp(26px,7vw,34px)}
}
@media (max-width:430px){
  .brand-name{display:none}
}

/* section entrance choreography (armed only when JS is present) */
body.js .section .kicker,body.js .section h2:not(.triad-word),body.js .section .lede,
body.js .roles-wrap,body.js .roles-note,body.js .locks .lock,
body.js .steps .step,body.js .faqs details,body.js .demo-form,body.js .triad .titem,
body.js .brandlist li,body.js .brandnote{
  opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
body.js .section.in .kicker,body.js .section.in h2:not(.triad-word),body.js .section.in .lede,
body.js .section.in .roles-wrap,body.js .section.in .roles-note,body.js .section.in .locks .lock,
body.js .section.in .steps .step,body.js .section.in .faqs details,body.js .section.in .demo-form,
body.js .section.in .titem,body.js .section.in .brandlist li,body.js .section.in .brandnote{
  opacity:1;transform:none;
}
body.js .section.in h2{transition-delay:.08s}
body.js .section.in .lede{transition-delay:.16s}
body.js .section.in .roles-wrap,body.js .section.in .demo-form{transition-delay:.2s}
body.js .section.in .roles-note{transition-delay:.34s}
body.js .section.in .locks .lock:nth-child(1),body.js .section.in .steps .step:nth-child(1),body.js .section.in .faqs details:nth-child(1),body.js .section.in .brandlist li:nth-child(1){transition-delay:.14s}
body.js .section.in .locks .lock:nth-child(2),body.js .section.in .steps .step:nth-child(2),body.js .section.in .faqs details:nth-child(2),body.js .section.in .brandlist li:nth-child(2){transition-delay:.24s}
body.js .section.in .locks .lock:nth-child(3),body.js .section.in .steps .step:nth-child(3),body.js .section.in .faqs details:nth-child(3),body.js .section.in .brandlist li:nth-child(3){transition-delay:.34s}
body.js .section.in .locks .lock:nth-child(4),body.js .section.in .faqs details:nth-child(4),body.js .section.in .brandlist li:nth-child(4){transition-delay:.44s}
body.js .section.in .locks .lock:nth-child(5),body.js .section.in .faqs details:nth-child(5){transition-delay:.54s}
body.js .section.in .locks .lock:nth-child(6),body.js .section.in .faqs details:nth-child(6){transition-delay:.64s}
body.js .section.in .brandnote{transition-delay:.3s}
body.js .section.in .titem:nth-child(1){transition-delay:.05s}
body.js .section.in .titem:nth-child(2){transition-delay:.19s}
body.js .section.in .titem:nth-child(3){transition-delay:.33s}
body.js .section.in.entered .kicker,body.js .section.in.entered h2,body.js .section.in.entered .lede,
body.js .section.in.entered .roles-wrap,body.js .section.in.entered .roles-note,
body.js .section.in.entered .locks .lock,body.js .section.in.entered .steps .step,
body.js .section.in.entered .faqs details,body.js .section.in.entered .demo-form,
body.js .section.in.entered .titem,body.js .section.in.entered .brandlist li,
body.js .section.in.entered .brandnote,
body.js .section.in.entered .locks .lock:nth-child(1),body.js .section.in.entered .locks .lock:nth-child(2),
body.js .section.in.entered .locks .lock:nth-child(3),body.js .section.in.entered .locks .lock:nth-child(4),
body.js .section.in.entered .locks .lock:nth-child(5),body.js .section.in.entered .locks .lock:nth-child(6),
body.js .section.in.entered .faqs details:nth-child(1),body.js .section.in.entered .faqs details:nth-child(2),
body.js .section.in.entered .faqs details:nth-child(3),body.js .section.in.entered .faqs details:nth-child(4),
body.js .section.in.entered .faqs details:nth-child(5),body.js .section.in.entered .faqs details:nth-child(6),
body.js .section.in.entered .brandlist li:nth-child(1),body.js .section.in.entered .brandlist li:nth-child(2),
body.js .section.in.entered .brandlist li:nth-child(3),body.js .section.in.entered .brandlist li:nth-child(4){
  transition-delay:0s !important;
}

/* paused tab: stop every loop everywhere */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* reduced motion: final states, no drives */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  body{opacity:1}
  .cards .card,.rise-in{opacity:1;transform:none}
  body.js .section .kicker,body.js .section h2,body.js .section .lede,
  body.js .roles-wrap,body.js .roles-note,body.js .locks .lock,
  body.js .steps .step,body.js .faqs details,body.js .demo-form,body.js .triad .titem,
  body.js .brandlist li,body.js .brandnote{opacity:1;transform:none}
  .band .w,.band .c{opacity:1 !important;transform:none !important}
  .band-sub,.settle-creed{opacity:1 !important;transform:none !important}
  .perm{transition:none}
  #spine-path{stroke-dashoffset:0 !important}
  .node{border-color:var(--accent)}
}