/* ══════════════════════════════════════════════════════════════
   OPERATER · landing
   Brand rules honoured: two families only (IBM Plex Mono + Sans),
   ink base, jade accent at ≤3%, zero radius, four linework tiers.
   Display is Plex Mono SemiBold set very large, the loudest this
   system gets while still being itself.
   ══════════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark;
  --ink:#06090C; --ink-2:#080C10; --ink-3:#0C1217; --ink-4:#111A21;
  --bone:#E9E7E2;
  --ash:#8E9AA2; --dim:#87949D; --ph:#74818A; --faint:#4C5862;
  --jade:#57CBA0; --jade-2:#6FD9B0; --live:#7FC8A0;
  --blue:#7EB0C9; --garnet:#D08A8A;

  --edge:rgba(126,176,201,.36);
  --rule:rgba(126,176,201,.20);
  --hair:rgba(126,176,201,.10);
  --tint:rgba(126,176,201,.04);
  --wash:rgba(87,203,160,.10);

  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;

  --gut:clamp(18px,5vw,64px);
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.66;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--jade);color:var(--ink)}
img{max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ground ------------------------------------------------ */
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 100% 55% at 50% 0%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 100% 55% at 50% 0%,#000,transparent 75%);
}
main,header,footer{position:relative;z-index:1}
.rail{position:fixed;left:0;top:0;width:2px;height:100vh;z-index:60;background:rgba(126,176,201,.07);pointer-events:none}
.rail i{display:block;width:100%;height:0;background:var(--jade)}

/* type -------------------------------------------------- */
h1,h2,h3,.dsp{font-family:var(--mono);font-weight:600;letter-spacing:-.045em;line-height:1;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,6.4vw,78px);letter-spacing:-.05em;line-height:.99}
h2{font-size:clamp(26px,4.2vw,50px);letter-spacing:-.048em}
h3{font-size:clamp(18px,2.3vw,24px);letter-spacing:-.035em;font-weight:500;line-height:1.14}
p{margin:0 0 15px;max-width:64ch}
.lede{font-size:clamp(15.5px,1.85vw,19px);color:var(--ash);line-height:1.6;max-width:54ch}
.lede b{color:var(--bone);font-weight:500}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--jade);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--jade);flex:none}
.eyebrow.mute{color:var(--dim)}
.eyebrow.mute::before{background:var(--ph)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ph);margin:0 0 14px}
section{padding-block:clamp(66px,10vw,126px);position:relative}
.sec-rule{border-top:1px solid var(--rule)}

/* buttons ----------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;font-size:13.5px;
  padding:14px 22px;border:1px solid transparent;cursor:pointer;transition:all .12s var(--ease);white-space:nowrap}
.btn.pri{background:var(--jade);color:var(--ink);border-color:var(--jade)}
.btn.pri:hover{background:var(--jade-2);border-color:var(--jade-2)}
.btn.sec{background:transparent;color:var(--bone);border-color:var(--edge)}
.btn.sec:hover{border-color:var(--jade);color:var(--jade)}
.btn.sm{padding:10px 16px;font-size:12.5px}
.btn .ar{transition:transform .12s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

/* nav --------------------------------------------------- */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(6,9,12,.78);border-bottom:1px solid transparent;transition:border-color .18s var(--ease),background .18s var(--ease)}
/* Once stuck the bar is 95% opaque, so the blur behind it is doing almost no
   visual work -- but a backdrop-filter still forces the compositor to re-blur
   a full-width strip on every scrolled frame, which is the most expensive
   thing on the page and is paid for the entire scroll. Dropped when stuck,
   kept at the top where the bar sits at 78% over the moving hero canvas and
   the blur is actually visible. */
header.stuck{border-bottom-color:var(--rule);background:rgba(6,9,12,.97);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.nav{display:flex;align-items:center;gap:26px;height:68px}
.logo{display:inline-flex;align-items:center;gap:11px}
.logo img{height:23px;width:auto;display:block}
.logo .wm{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.nav .sp{flex:1}
.nav nav{display:flex;gap:25px}
.nav nav a{font-family:var(--mono);font-size:12.5px;color:var(--ash);transition:color .12s}
.nav nav a:hover{color:var(--bone)}
.navtoggle{display:none;background:none;border:1px solid var(--edge);color:var(--bone);padding:8px 11px;font-family:var(--mono);font-size:12px;cursor:pointer}

/* hero -------------------------------------------------- */
.hero{padding-top:clamp(46px,7vw,86px);padding-bottom:clamp(56px,8vw,96px);overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin:20px 0 0;max-width:16ch}
.hero h1 .hl{color:var(--jade)}
.hero .lede{margin:22px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}

/* three-point strip ------------------------------------- */
.tri{display:flex;flex-wrap:wrap;align-items:center;margin-top:26px;column-gap:0}
.tri span{font-family:var(--mono);font-size:12.5px;color:var(--dim);padding:2px 22px;border-left:1px solid var(--rule);white-space:nowrap;line-height:1.9}
.tri span:first-child{padding-left:0;border-left:0}
.tri b{color:var(--jade);font-weight:500}

/* backers ----------------------------------------------- */
.backers{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(22px,3.4vw,42px);margin-top:clamp(34px,5vw,52px);
  padding-top:22px;border-top:1px solid var(--hair)}
.backers .lb{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ph);flex:none}
.backers img{display:block;width:auto;opacity:.62;transition:opacity .18s var(--ease);filter:none;background:none}
.backers a:hover img,.backers img:hover{opacity:1}
.bk-google{height:19px}
.bk-cloudflare{height:26px}
.bk-nvidia{height:27px}
.bk-plugandplay{height:17px}
@media (max-width:640px){
  .bk-google{height:16px}.bk-cloudflare{height:22px}.bk-nvidia{height:23px}.bk-plugandplay{height:14px}
}

/* console ----------------------------------------------- */
.console{margin-top:26px;border:1px solid var(--edge);background:var(--ink-2)}
.console .bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);background:var(--tint)}
.pulse{width:7px;height:7px;background:var(--live);flex:none;animation:pz 2.2s infinite}
@keyframes pz{0%,100%{opacity:1}50%{opacity:.25}}
.console .bar .sp{flex:1}
.console .bar .tag{color:var(--jade);letter-spacing:.14em}
.log{padding:4px 0;min-height:310px;font-family:var(--mono);font-size:13px;line-height:1.5}
.log .ln{display:grid;grid-template-columns:74px 1fr;gap:14px;padding:7px 16px;border-bottom:1px solid var(--hair)}
.log .ln:last-child{border-bottom:0}
.log .t{color:var(--faint);font-size:11.5px;padding-top:2px}
.log .m{color:var(--ash);word-break:break-word}
.log .m b{color:var(--bone);font-weight:500}
.log .m .ok{color:var(--live)}
.log .m .wt{color:var(--blue)}
.log .ln.new{animation:slidein .26s var(--ease) both}
@keyframes slidein{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.caret{display:inline-block;width:7px;height:14px;background:var(--jade);vertical-align:-2px;animation:bl 1.05s steps(2) infinite}
@keyframes bl{0%,50%{opacity:1}51%,100%{opacity:0}}
.console .foot{display:flex;flex-wrap:wrap;gap:8px 26px;padding:13px 16px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;color:var(--ph)}
.console .foot b{color:var(--jade);font-weight:500}

/* split ------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--edge);margin-top:44px}
.split > div{padding:clamp(22px,3vw,34px)}
.split .a{border-right:1px solid var(--rule)}
.split .b{background:var(--wash)}
.split h3{margin:14px 0 10px}
.split p{font-size:14.5px;color:var(--ash);margin-bottom:0}
.promptbox{margin-top:22px;border:1px dashed var(--edge);padding:16px;font-family:var(--mono);font-size:13px;
  color:var(--ph);display:flex;align-items:center;gap:8px;min-height:92px}
.promptbox .cr{display:inline-block;width:7px;height:14px;background:var(--ph);animation:bl 1.05s steps(2) infinite}
.actbox{margin-top:22px;border:1px solid rgba(87,203,160,.34);min-height:92px}
.actbox .r{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;font-family:var(--mono);font-size:12.5px;
  color:var(--ash);border-bottom:1px solid rgba(87,203,160,.14)}
.actbox .r:last-child{border-bottom:0}
.actbox .ck{color:var(--jade);flex:none}

/* gap --------------------------------------------------- */
.gap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:44px}
.gap--solo{grid-template-columns:1fr;max-width:820px}
.midcta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:40px}
.midcta--end{margin-top:46px;padding-top:34px;border-top:1px solid var(--hair)}
.midcta-note{font-family:var(--mono);font-size:12.5px;color:var(--ph);line-height:1.6}

/* cohorts ------------------------------------------------ */
.cohorts{margin:0 0 34px;text-align:center}
.co-lede{max-width:66ch;margin:0 auto 20px;color:var(--ash);font-size:15px;line-height:1.7}
.co{text-align:left}
.co-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--edge)}
.co{background:var(--ink);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.co--open{background:var(--wash)}
.co-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ph)}
.co--open .co-n{color:var(--jade)}
.co-s{font-family:var(--mono);font-weight:600;font-size:22px;letter-spacing:-.03em;color:var(--bone)}
.co-w{font-family:var(--mono);font-size:12.5px;color:var(--ash)}
@media(max-width:640px){.co-row{grid-template-columns:1fr}}

/* the beta contract ------------------------------------- */
.rq-contract{border:1px solid var(--edge);background:var(--tint);padding:20px 22px;margin:26px 0 0;text-align:left}
.rq-terms{list-style:none;margin:14px 0 0;padding:0}
.rq-terms li{position:relative;padding:0 0 0 22px;margin-bottom:11px;font-size:14.5px;line-height:1.65;color:var(--ash)}
.rq-terms li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--jade);font-size:13px}
.rq-terms li:last-child{margin-bottom:0}
.rq-terms b{color:var(--bone);font-weight:600}
.rq-agree{display:flex;align-items:flex-start;gap:11px;margin-top:18px;cursor:pointer;
  font-size:14.5px;line-height:1.55;color:var(--bone)}
.rq-agree input{flex:none;width:17px;height:17px;margin-top:1px;accent-color:var(--jade);cursor:pointer}
.rq-contract.bad{border-color:var(--garnet)}
.rq-contract.bad .rq-e{display:block;margin-top:10px;color:var(--garnet);font-size:13px}
@media(max-width:600px){.midcta{gap:12px}.midcta .btn{width:100%;justify-content:center}}
.gaplist{list-style:none;margin:18px 0 0;padding:0}
.gaplist li{display:flex;align-items:flex-start;gap:13px;padding:13px 0;border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:14px;color:var(--ash)}
.gaplist li:last-child{border-bottom:0}
.gaplist .ic{flex:none;width:16px;text-align:center;padding-top:1px}
.gaplist.can .ic{color:var(--live)}
.gaplist.cant .ic{color:var(--ph)}
.gaplist.cant .tx{position:relative;transition:color .3s var(--ease)}
.gaplist.cant .tx::after{content:"";position:absolute;left:0;top:52%;height:1px;width:0;background:var(--jade);transition:width .42s var(--ease)}
.gaplist.cant li.struck .tx::after{width:100%}
.gaplist.cant li.struck .tx{color:var(--faint)}
.gaplist.cant .by{display:block;font-size:12px;color:var(--jade);opacity:0;transform:translateY(-3px);
  transition:opacity .3s var(--ease) .16s,transform .3s var(--ease) .16s}
.gaplist.cant li.struck .by{opacity:1;transform:none}

/* stages ------------------------------------------------ */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));border:1px solid var(--edge);margin-top:44px}
.stage{padding:26px 24px 30px;border-right:1px solid var(--hair);position:relative;overflow:hidden}
.stage:last-child{border-right:0}
.stage .no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--jade);margin-bottom:16px}
.stage h3{font-size:19px;margin-bottom:9px}
.stage p{font-size:14px;color:var(--ash);margin:0}
.stage .meta{margin-top:18px;font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.04em}
.stage::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--jade);transition:width .7s var(--ease)}
.stage.in::after{width:100%}

/* metrics ----------------------------------------------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-block:1px solid var(--edge);margin-top:44px}
.metric{padding:28px 22px;border-right:1px solid var(--hair)}
.metric:last-child{border-right:0}
.metric .v{font-family:var(--mono);font-weight:600;font-size:clamp(32px,4.6vw,50px);letter-spacing:-.05em;line-height:1;color:var(--bone)}
.metric .v.j{color:var(--jade)}
.metric .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ph);margin-top:13px}
.metric .d{font-size:13.5px;color:var(--ash);margin-top:9px;line-height:1.5}

/* team -------------------------------------------------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--hair);border:1px solid var(--edge);margin-top:44px}
.seat{background:var(--ink);padding:24px 22px 26px;transition:background .12s var(--ease)}
.seat:hover{background:var(--ink-2)}
.seat .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;padding:3px 9px;border:1px solid}
.seat .st.live{color:var(--live);border-color:rgba(87,203,160,.42);background:var(--wash)}
.seat .st.next{color:var(--blue);border-color:rgba(126,176,201,.42)}
.seat .st.soon{color:var(--ph);border-color:var(--rule)}
.seat .st.you{color:var(--bone);border-color:var(--edge)}
.seat h3{font-size:20px;margin:18px 0 8px}
.seat p{font-size:13.5px;color:var(--ash);margin:0;line-height:1.55}
.seat.self{background:var(--wash)}

/* marquee ----------------------------------------------- */
.marq{overflow:hidden;border-block:1px solid var(--hair);padding:20px 0;margin-top:44px;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq .track{display:flex;gap:14px;width:max-content;will-change:transform}
.nojs-marq .marq .track{animation:slide 38s linear infinite}
.marq .track span{font-family:var(--mono);font-size:12.5px;color:var(--dim);border:1px solid var(--rule);padding:9px 18px;white-space:nowrap}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* pricing ----------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));border:1px solid var(--edge);margin-top:42px}
.plan{padding:28px 26px 30px;border-right:1px solid var(--hair);display:flex;flex-direction:column}
.plan:last-child{border-right:0}
.plan.hot{background:var(--wash)}
.plan .nm{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ph)}
.plan.hot .nm{color:var(--jade)}
.plan .pr{font-family:var(--mono);font-weight:600;font-size:42px;letter-spacing:-.05em;line-height:1;margin:20px 0 4px}
.plan .pr small{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:0;color:var(--ph)}
.plan .sub2{font-size:13.5px;color:var(--ash);margin:12px 0 20px}
.plan ul{list-style:none;margin:0 0 24px;padding:0;flex:1}
.plan li{display:flex;gap:11px;padding:9px 0;font-size:13.5px;color:var(--ash);border-bottom:1px solid var(--hair)}
.plan li:last-child{border-bottom:0}
.plan li b{color:var(--bone);font-weight:500}
.plan .ck{color:var(--jade);flex:none}
.disc{border-left:2px solid var(--jade);padding:4px 0 4px 18px;margin-top:34px;max-width:74ch}
/* The beta offer is the page's commercial ask, so it sits above the plans
   and carries a little more weight than the footnote .disc is built for:
   a tinted panel rather than a bare rule, and margin below it since a
   .disc normally ends a section. */
.beta-strip{background:var(--wash);padding:18px 22px;margin:34px 0 0;max-width:none}
.beta-strip+.plans{margin-top:18px}
.disc p{font-size:14.5px;color:var(--ash);margin:0}
.disc b{color:var(--bone);font-weight:500}
.disc .hi{color:var(--jade)}

/* calculator -------------------------------------------- */
.calc{border:1px solid var(--edge);margin-top:34px}
.calc .hd{padding:20px 24px 22px;border-bottom:1px solid var(--rule)}
.calc .lb{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ph);margin-bottom:18px}
.calc .q{font-family:var(--mono);font-size:clamp(14px,2vw,17px);color:var(--bone);letter-spacing:-.01em;margin-bottom:20px}
.calc .q output{color:var(--jade);font-weight:600}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--edge);outline:none;margin:0}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;background:var(--jade);cursor:pointer;border:0}
.calc input[type=range]::-moz-range-thumb{width:15px;height:15px;background:var(--jade);cursor:pointer;border:0;border-radius:0}
.calc .ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:10px}
.calc .out{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.calc .cell{padding:20px 24px 22px;border-right:1px solid var(--hair)}
.calc .cell:last-child{border-right:0}
.calc .cell .ck2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ph);margin-bottom:12px}
.calc .cell .cv{font-family:var(--mono);font-weight:600;font-size:27px;letter-spacing:-.04em;line-height:1;color:var(--bone)}
.calc .cell .cv.j{color:var(--jade)}
.calc .cell .cn{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:11px;line-height:1.5}
.betanote{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:18px;line-height:1.7;max-width:62ch}

/* guides ------------------------------------------------ */
.gcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--hair);border:1px solid var(--edge);margin-top:42px}
.gcol{background:var(--ink);padding:24px 22px 26px}
.gcol h3{font-size:16px;color:var(--jade);font-family:var(--mono);font-weight:500;letter-spacing:.02em;margin-bottom:6px}
.gcol .gd{font-size:12.5px;color:var(--faint);font-family:var(--mono);margin-bottom:16px}
.gcol ul{list-style:none;margin:0;padding:0}
.gcol li{border-bottom:1px solid var(--hair)}
.gcol li:last-child{border-bottom:0}
.gcol a{display:flex;gap:9px;align-items:flex-start;padding:10px 0;font-size:13.5px;color:var(--ash);line-height:1.45;transition:color .12s}
.gcol a:hover{color:var(--jade)}
.gcol a .dot{color:var(--faint);flex:none;font-family:var(--mono);font-size:11px;padding-top:3px}
.gcol a.soon{color:var(--faint)}
.allguides{margin-top:26px}

/* faq --------------------------------------------------- */
.faq{margin-top:40px;border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;padding:20px 0;display:flex;align-items:flex-start;gap:16px;
  font-family:var(--mono);font-weight:500;font-size:16.5px;letter-spacing:-.025em;color:var(--bone);transition:color .12s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--jade)}
summary .pm{font-family:var(--mono);font-weight:400;color:var(--jade);flex:none;font-size:16px;line-height:1.35;transition:transform .18s var(--ease)}
details[open] summary .pm{transform:rotate(45deg)}
details .ans{padding:0 0 22px 32px;color:var(--ash);font-size:14.5px;max-width:70ch}
details .ans p:last-child{margin-bottom:0}

/* close ------------------------------------------------- */
.close{border:1px solid var(--edge);padding:clamp(34px,6vw,74px);text-align:center;background:var(--wash)}
.close h2{margin-bottom:18px}
.close .lede{margin-inline:auto;margin-bottom:14px;max-width:60ch}
.close .urg{font-family:var(--mono);font-size:12.5px;color:var(--jade);letter-spacing:.05em;margin:0 auto 28px;max-width:52ch;text-align:center}
.close .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* request-access form ----------------------------------- */
/* Lives inside .close, which is centred; the form is not, because a left rail
   of labels is what makes a five-field form scannable. Inputs are square and
   hairline like the rest of the page rather than the rounded default, so the
   form reads as part of the design instead of a widget dropped into it. */
.rq{max-width:620px;margin:0 auto;text-align:start}
.rq-grid{display:grid;gap:18px}
@media(min-width:660px){
  .rq-grid{grid-template-columns:1fr 1fr}
  .rq-tel{grid-column:1/-1}
}
.rq-f{display:block}
.rq-l{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ph);margin-bottom:8px}
.rq-i{width:100%;background:var(--ink-2);color:var(--bone);font-family:var(--sans);
  font-size:15px;padding:13px 14px;border:1px solid var(--rule);
  transition:border-color .14s var(--ease),background .14s var(--ease);
  border-radius:0;-webkit-appearance:none;appearance:none}
.rq-i::placeholder{color:var(--faint)}
.rq-i:hover{border-color:var(--edge)}
.rq-i:focus{outline:none;border-color:var(--jade);background:var(--ink-3)}
.rq-i:focus-visible{outline:2px solid var(--jade);outline-offset:-2px}
/* The dial select is a fixed column so the number field keeps a usable width
   at every viewport, rather than the two splitting evenly. */
.rq-telrow{display:grid;grid-template-columns:minmax(150px,168px) 1fr;gap:10px}
.rq-dial{font-family:var(--mono);font-size:13.5px;padding-inline:10px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ph) 50%),
                   linear-gradient(135deg,var(--ph) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:30px}
.rq-dial option{background:var(--ink-2);color:var(--bone)}
/* Errors take the garnet already used for revoked/at-risk states elsewhere. */
.rq-e{display:block;min-height:17px;margin-top:6px;font-family:var(--mono);
  font-size:11.5px;color:var(--garnet);opacity:0;transition:opacity .14s var(--ease)}
.rq-f.bad .rq-i,.rq-tel.bad .rq-i{border-color:var(--garnet)}
.rq-f.bad .rq-e,.rq-tel.bad .rq-e{opacity:1}
.rq-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.rq-submit{flex:none}
.rq-submit[disabled]{opacity:.55;cursor:progress}
.rq-note{margin:0;font-size:12.5px;color:var(--ph);line-height:1.5;max-width:38ch}
.rq-note a{color:var(--ash);text-decoration:underline;text-underline-offset:2px}
.rq-note a:hover{color:var(--jade)}
.rq-msg{margin:16px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--garnet);min-height:18px}
/* The confirmation replaces the form in place: same box, no navigation, so the
   page does not appear to reset under someone who just committed to something. */
.rq-done{max-width:620px;margin:0 auto;text-align:center;padding:26px 0 6px}
.rq-done-t{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--jade);margin:0 0 12px}
.rq-done-t::before{content:"\2713";margin-inline-end:10px}
.rq-done-b{margin:0;color:var(--ash);font-size:15.5px;line-height:1.6;max-width:50ch;
  margin-inline:auto}
html[dir="rtl"] .rq-l,html[dir="rtl"] .rq-dial{letter-spacing:0;text-transform:none}
@media(prefers-reduced-motion:reduce){.rq-i,.rq-e{transition:none}}

/* footer ------------------------------------------------ */
footer{border-top:1px solid var(--rule);padding-block:52px 40px}
.fgrid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:32px}
.fgrid h4{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ph);margin:0 0 14px;font-weight:500}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:9px}
.fgrid a{font-size:13.5px;color:var(--ash);transition:color .12s}
.fgrid a:hover{color:var(--jade)}
.ftag{font-size:13.5px;color:var(--ash);max-width:40ch;margin-top:16px}
.fbot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:44px;padding-top:20px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.fbot .sp{flex:1}

/* motion: reveal + zoom --------------------------------- */
.mo .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mo .rv.in{opacity:1;transform:none}
.mo .zi{opacity:0;transform:scale(.955) translateY(22px);transition:opacity .78s var(--ease),transform .78s var(--ease)}
.mo .zi.in{opacity:1;transform:none}
.mo .rv[data-d="1"],.mo .zi[data-d="1"]{transition-delay:.07s}
.mo .rv[data-d="2"],.mo .zi[data-d="2"]{transition-delay:.14s}
.mo .rv[data-d="3"],.mo .zi[data-d="3"]{transition-delay:.21s}
.mo .rv[data-d="4"],.mo .zi[data-d="4"]{transition-delay:.28s}
.mo .rv[data-d="5"],.mo .zi[data-d="5"]{transition-delay:.35s}
/* the scroll engine owns these transforms */
.px{will-change:transform;transform-origin:50% 50%}
#hconsole{transform-origin:50% 22%}

/* headline line-wipe */
.wipe{overflow:hidden;padding-bottom:.14em}
.mo .wipe > span{display:block;transform:translateY(106%);transition:transform .82s var(--ease)}
.mo .wipe.in > span{transform:none}

/* opacity-only reveal for blocks whose transform the scroll engine owns */
.mo .fade{opacity:0;transition:opacity .7s var(--ease)}
.mo .fade.in{opacity:1}

/* eyebrow rule that draws in */
.mo .eyebrow::before{transform:scale(0);transition:transform .42s var(--ease) .08s}
.mo .eyebrow.in::before,.mo .in .eyebrow::before,.hero .eyebrow::before{transform:scale(1)}

/* card lift as it settles */
.mo .zi.in{transition:opacity .78s var(--ease),transform .78s var(--ease)}
.seat,.stage,.plan,.gcol{transition:background .16s var(--ease),transform .3s var(--ease)}
.seat:hover,.gcol:hover{transform:translateY(-2px)}

/* section rules sweep in */
.sec-rule{background-image:linear-gradient(90deg,var(--jade),transparent 42%);
  background-repeat:no-repeat;background-size:0% 1px;background-position:0 0;
  transition:background-size 1.1s var(--ease)}
.sec-rule.swept{background-size:100% 1px}

/* responsive -------------------------------------------- */
@media (max-width:880px){
  .split{grid-template-columns:1fr}
  .split .a{border-right:0;border-bottom:1px solid var(--rule)}
  .gap{grid-template-columns:1fr}
  .stage{border-right:0;border-bottom:1px solid var(--hair)}
  .stage:last-child{border-bottom:0}
  .metric{border-right:0;border-bottom:1px solid var(--hair)}
  .metric:last-child{border-bottom:0}
  .plan{border-right:0;border-bottom:1px solid var(--hair)}
  .plan:last-child{border-bottom:0}
  .calc .cell{border-right:0;border-bottom:1px solid var(--hair)}
  .calc .cell:last-child{border-bottom:0}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav nav{display:none}
  .nav nav.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(6,9,12,.99);border-bottom:1px solid var(--rule);padding:6px var(--gut) 16px}
  .nav nav.open a{padding:12px 0;border-bottom:1px solid var(--hair);font-size:14px}
  .navtoggle{display:block}
  .nav .hidecta{display:none}
  .tri{flex-direction:column;align-items:flex-start;row-gap:2px}
  .tri span{padding:1px 0;border-left:0}
  .log .ln{grid-template-columns:56px 1fr;gap:10px;font-size:12px;padding:7px 12px}
  .log{min-height:270px}
  .fgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .mo .rv,.mo .zi{opacity:1;transform:none}
  .marq .track{animation:none}
}

/* ── skip link ──────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--jade);color:var(--ink);
  font-family:var(--mono);font-size:13px;padding:12px 18px}
.skip:focus{left:var(--gut);top:10px}

/* ── the pipeline graphic ───────────────────────────────── */
.pipe{margin:38px 0 0;padding:0;border:1px solid var(--wire);background:var(--sub)}
.pipe svg{display:block;width:100%;height:auto;padding:16px 0 8px}
@media (max-width:700px){
  .pipe{overflow-x:auto}
  .pipe svg{min-width:640px}
}

/* ── follow row: sits in the footer's bottom rule ────────── */
.social{display:flex;align-items:center;gap:12px}
.social .meta{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ph);margin-inline-end:4px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:1px solid var(--rule);color:var(--ash);transition:color .12s var(--ease),border-color .12s var(--ease)}
.social a:hover{color:var(--jade);border-color:var(--jade)}
.social svg{display:block;fill:currentColor}
@media (max-width:640px){ .social{flex-wrap:wrap;gap:10px} .fbot{row-gap:16px} }

/* The sticky header would otherwise cover the top of whatever a hash jump
   lands on. */
.rq-anchor{display:block;height:0;scroll-margin-block-start:92px}
#request-access{scroll-margin-block-start:92px}