:root{
  --paper:#FBFAF6; --ink:#12233A; --navy:#004874; --slate:#46546A; --grid:rgba(31,91,255,.07); --grid2:rgba(31,91,255,.13);
  --tomato:#FF5A36; --blue:#1F5BFF; --sun:#FFC83D; --mint:#18C29C; --gold:#F5BB61;
  --display:'Archivo',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:min(76rem,calc(100% - 2.5rem)); --space:clamp(4rem,8vw,6.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-stretch:100%;font-size:16px;line-height:1.55;overflow-x:hidden;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px}
img,svg{max-width:100%}
a{color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}.skip:focus{left:1rem;top:1rem}
.wrap{width:var(--wrap);margin-inline:auto}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .9rem;display:flex;align-items:center;gap:.55rem;color:var(--slate)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.dot--tomato{background:var(--tomato)}.dot--blue{background:var(--blue)}.dot--mint{background:var(--mint)}.dot--sun{background:var(--sun)}
.h1{font-weight:900;font-stretch:70%;font-size:clamp(2.5rem,4.9vw,4.6rem);line-height:.92;letter-spacing:-.02em;margin:0 0 1.3rem;text-transform:uppercase}
.h1 .ln{display:block}
@media (min-width:1021px){.h1 .ln{white-space:nowrap}}
.ln--blue{color:var(--blue)}
.ln--mark{position:relative;display:inline-block!important;z-index:0}
.ln--mark::after{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.04em;height:.36em;background:var(--sun);z-index:-1;transform:skewX(-8deg)}
.h2{font-weight:850;font-stretch:84%;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.015em;margin:0 0 1rem;text-wrap:balance;max-width:22ch}
.lede{font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--slate);max-width:56ch;margin:0}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.25rem;border-radius:999px;font:inherit;font-weight:750;font-size:.98rem;text-decoration:none;cursor:pointer;border:2.5px solid var(--ink);transition:transform .15s ease,box-shadow .15s ease;text-align:center}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn--tomato{background:var(--tomato);color:#fff}
.btn--ink{background:var(--ink);color:#fff}
.btn--line{background:#fff;color:var(--ink)}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--tomato);transform-origin:0 50%;transform:scaleX(0)}

/* header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.top__in{display:flex;align-items:center;gap:1rem;min-height:68px}
.lockup{display:flex;align-items:center;flex:none;text-decoration:none}
.lockup img{height:30px;width:auto;display:block}
.top__nav{display:flex;align-items:center;gap:1.2rem;margin-left:auto;min-width:0}
.top__nav>a{font-family:var(--mono);font-size:.8rem;font-weight:500;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.top__nav>a:hover{color:var(--tomato)}
.nav-cta{display:flex;align-items:center;gap:.9rem;margin-left:.6rem}
.nav-cta .btn{min-height:42px;padding:.5rem 1rem;font-size:.88rem}
.link-login{font-weight:700;font-size:.92rem;text-decoration:none}
.nav-toggle{display:none;margin-left:auto;font:inherit;font-family:var(--mono);font-weight:600;font-size:.85rem;text-transform:uppercase;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:.5rem 1rem;min-height:44px;cursor:pointer;color:var(--ink)}
@media (max-width:1180px){.top__nav>a{display:none}}
@media (max-width:760px){
  .nav-toggle{display:inline-flex;align-items:center}
  .top__nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:2px solid var(--ink);padding:.5rem 1.25rem 1.25rem;display:none}
  .top__nav.is-open{display:flex}
  .top__nav>a{display:block;padding:.85rem 0;border-bottom:1px solid rgba(18,35,58,.12);font-size:.9rem}
  .nav-cta{flex-direction:column;align-items:stretch;margin:1rem 0 0}
  .link-login{padding:.4rem 0}
}

/* hero */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 0;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero__grid>*{min-width:0}
.plan{margin:0;background:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.plan__paper{padding:1rem 1rem .4rem;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px}
.plan__svg{display:block;width:100%;height:auto}
.plan__svg .mono,.plan__svg text.mono{font-family:var(--mono);fill:var(--slate)}
.plan__svg .h{font-family:var(--display);font-weight:800;fill:var(--ink)}
.t-xs{font-size:11px}.t-sm{font-size:12px}.t-md{font-size:17px}.b{font-weight:600}
.plan__svg .n{font-family:var(--display);font-weight:900;font-size:15px;fill:#fff}
.draw{stroke-dasharray:700;stroke-dashoffset:700;animation:draw 1.4s ease forwards}
.rooms rect:nth-child(2){animation-delay:.15s}.rooms rect:nth-child(3){animation-delay:.3s}.rooms rect:nth-child(4){animation-delay:.45s}
@keyframes draw{to{stroke-dashoffset:0}}
.flow path{animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-22}}
.note{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(1.2s + var(--d))}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.scribble{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1s ease 2.6s forwards}
.plan__keys{list-style:none;margin:.2rem 0 .6rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .9rem;font-size:.9rem;font-weight:600}
.plan__keys li{display:flex;gap:.5rem;align-items:flex-start;min-width:0}
.k{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;color:#fff;font-size:.75rem;font-weight:900}
.k--blue{background:var(--blue)}.k--mint{background:var(--mint)}.k--sun{background:#F5A300}.k--tomato{background:var(--tomato)}
.titleblock{border-top:2.5px solid var(--ink);background:var(--paper)}
.titleblock dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.titleblock dl>div{padding:.55rem .8rem;border-right:1px solid rgba(18,35,58,.18);border-bottom:1px solid rgba(18,35,58,.18);min-width:0}
.titleblock dl>div:nth-child(3n){border-right:0}
.titleblock dl>div:nth-child(n+4){border-bottom:0}
.titleblock dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.titleblock dd{margin:0;font-weight:750;font-size:.9rem;overflow-wrap:anywhere}
.st{display:flex;align-items:center;gap:.4rem;color:var(--tomato)}
.st i{width:8px;height:8px;border-radius:50%;background:var(--tomato);animation:blink 1.4s ease infinite;flex:none}
@keyframes blink{50%{opacity:.25}}
.ticker{margin-top:clamp(2.5rem,5vw,4rem);border-block:2.5px solid var(--ink);background:var(--ink);color:#fff;overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:tick 30s linear infinite}
.ticker span{font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;padding:.9rem 1.6rem;white-space:nowrap;display:flex;align-items:center;gap:1.6rem}
.ticker span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--sun)}
.ticker span:nth-child(3n+2)::after{background:var(--mint)}.ticker span:nth-child(3n)::after{background:var(--tomato)}
@keyframes tick{to{transform:translateX(-50%)}}

/* steps */
.steps{padding:var(--space) 0}
.steps__row{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;counter-reset:s}
.step{position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:1.3rem 1.2rem 1.4rem;min-width:0;transition:transform .2s ease}
.step:hover{transform:translateY(-4px)}
.step::before{content:"";position:absolute;inset:0 0 auto;height:10px;border-radius:13px 13px 0 0;background:var(--c)}
.step--blue{--c:var(--blue)}.step--mint{--c:var(--mint)}.step--sun{--c:var(--sun)}.step--tomato{--c:var(--tomato)}
.step:not(:last-child)::after{content:"";position:absolute;right:-1.05rem;top:50%;width:1rem;height:2.5px;background:var(--ink)}
.step__n{font-family:var(--mono);font-weight:600;font-size:.8rem;color:var(--slate);display:block;margin-top:.4rem}
.step h3{font-weight:900;font-stretch:80%;font-size:2rem;text-transform:uppercase;margin:.2rem 0 .4rem;line-height:1;color:var(--ink)}
.step p{margin:0;color:var(--slate);font-size:.95rem}

/* redline */
.redline{padding:var(--space) 0;background:var(--sun);border-block:2.5px solid var(--ink);background-image:radial-gradient(rgba(18,35,58,.12) 1.2px,transparent 1.2px);background-size:18px 18px}
.redline .lede,.redline .kicker{color:var(--ink)}
.redline__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.redline__grid>*{min-width:0}
.red__tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.red__tabs button,.layers__tabs button{font:inherit;font-weight:750;font-size:.95rem;cursor:pointer;border:2.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);padding:.55rem 1.05rem;min-height:44px}
.red__tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.sheet{background:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--ink);padding:1.4rem 1.4rem 1.2rem;position:relative}
.sheet__head{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--slate);border-bottom:1px dashed rgba(18,35,58,.3);padding-bottom:.7rem}
.sheet__body{font-size:1.12rem;line-height:1.7;margin:1rem 0}
.m{background:none;color:inherit;padding:0 .1em;border-bottom:3px solid;position:relative}
.m--blue{border-color:var(--blue);background:rgba(31,91,255,.09)}.m--mint{border-color:var(--mint);background:rgba(24,194,156,.12)}.m--sun{border-color:#F5A300;background:rgba(255,200,61,.22)}
.sheet__notes{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.45rem;font-size:.9rem;color:var(--slate)}
.sheet__notes li{display:flex;gap:.55rem;align-items:flex-start}
.sheet__actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.sheet__msg{font-size:.78rem;color:var(--slate);flex-basis:100%}
.stamp{font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--tomato);border:2.5px solid var(--tomato);border-radius:8px;padding:.2rem .6rem;transform:rotate(-6deg);font-size:.85rem;animation:stamp .35s cubic-bezier(.3,1.6,.5,1)}
.stamp[hidden]{display:none}
@keyframes stamp{from{transform:rotate(-6deg) scale(1.8);opacity:0}}

/* layers */
.layers{padding:var(--space) 0}
.layers__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:center;margin-top:2rem}
.layers__grid>*{min-width:0}
.layers__tabs{display:flex;flex-direction:column;gap:.6rem}
.layers__tabs button{text-align:left;border-radius:14px;display:flex;gap:.6rem;align-items:center}
.layers__tabs button .mono{font-size:.75rem;opacity:.7}
.layers__tabs button[aria-selected="true"]{background:var(--mint);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.stack{display:grid;gap:14px;perspective:900px}
.slab{border:2.5px solid var(--ink);border-radius:14px;padding:1.2rem 1rem;font-family:var(--mono);font-size:.8rem;font-weight:600;transform:rotateX(38deg) rotateZ(-8deg);transition:transform .35s ease,box-shadow .35s ease;background:#fff;text-align:center;overflow-wrap:anywhere}
.slab--3{background:var(--tomato);color:#fff}.slab--2{background:var(--blue);color:#fff}.slab--1{background:#fff}
.slab.is-on{transform:rotateX(18deg) rotateZ(-4deg) translateY(-6px);box-shadow:0 14px 0 -4px var(--ink)}
.layers__panel{background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:1.4rem}
.layers__panel h3{margin:0 0 .5rem;font-weight:850;font-size:1.4rem;line-height:1.15}
.layers__panel p{margin:0;color:var(--slate)}
.pills{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pills li{font-family:var(--mono);font-size:.75rem;font-weight:600;border:1.5px solid var(--ink);border-radius:999px;padding:.25rem .65rem;background:var(--paper)}

/* drawing set */
.sheets{padding:var(--space) 0;background:#fff;border-block:2.5px solid var(--ink)}
.sheets .lede{margin-bottom:1.6rem}
.ql--spec{--ql-text:var(--ink);--ql-accent:var(--blue);--ql-accent-ink:#fff;--ql-line:var(--ink);--ql-frame:#fff;--ql-chrome:var(--ink);--ql-chrome-ink:#fff;--ql-muted:var(--slate);--ql-radius:14px;--ql-shadow:8px 8px 0 var(--ink);--ql-chip:var(--paper);--ql-focus:var(--tomato);--ql-dot-1:var(--tomato);--ql-dot-2:var(--sun);--ql-dot-3:var(--mint);margin-top:1.8rem}
.ql--spec .ql__mods button,.ql--spec .ql__chips button,.ql--spec .ql__sound{border-width:2.5px}
.ql--spec .ql__mods button{font-family:var(--mono);text-transform:uppercase;font-size:.85rem;min-height:44px}
.ql--spec .ql__name{font-weight:900;font-stretch:82%;text-transform:uppercase;font-size:1.5rem}
.ql--spec .ql__mod{font-family:var(--mono)}

/* Network exclusivity section (logos and buttons as on the about page) */
.nets__intro{max-width:46rem}
.nets__lead{font-size:1.1rem;line-height:1.6;max-width:58ch;margin:0}
.paths{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-width:40rem}
.paths li{display:flex;flex-direction:column;gap:.25rem;padding:.9rem 1rem;border-radius:12px;min-width:0}
.paths__k{font-weight:800;font-size:.95rem}
.paths__v{font-size:.9rem;opacity:.8}
.net-cols{margin-top:clamp(2rem,4vw,3.2rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.net-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.3rem;padding:1.6rem 1.35rem 1.5rem;background:#fff;border-radius:16px;border-top:4px solid;min-width:0}
.net-col--sra{border-top-color:#990000}.net-col--ds{border-top-color:#F5BB61}.net-col--sfp{border-top-color:#22D3EE}
.net__logo{width:168px;max-width:100%;height:130px;object-fit:contain}
.net-col__note{margin:0;font-size:.92rem;line-height:1.55;max-width:34ch;flex:1 1 auto;color:#3d4a5c}
.brand-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:auto;padding:14px 12px;width:100%;min-height:62px;border-radius:8px;font-size:14px;font-weight:700;color:#fff;text-decoration:none}
.brand-btn:focus-visible{outline:3px solid #12233A;outline-offset:3px}
.brand-btn__logo{width:54px;height:auto;flex:none}
.brand-btn__logo--sq{width:34px}
.brand-btn__label{white-space:normal}
.brand-btn__ext{width:13px;height:13px;flex:none;color:#fff;opacity:.85}
.brand-btn--sra{background:#990000}.brand-btn--sra:hover{background:#7F0000}
.brand-btn--ds{background:#004874}.brand-btn--ds:hover{background:#00385A}
.brand-btn--sfp{background:#0F5C5C}.brand-btn--sfp:hover{background:#0A4545}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (max-width:1020px){.net-cols{grid-template-columns:1fr}}
@media (max-width:700px){.paths{grid-template-columns:1fr}}

/* networks */
.nets{padding:var(--space) 0}
.paths li{background:#fff;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.net-col{border:2.5px solid var(--ink);border-top-width:8px;box-shadow:6px 6px 0 var(--ink)}
.net-col--sra{border-top-color:#990000}.net-col--ds{border-top-color:#F5BB61}.net-col--sfp{border-top-color:#22D3EE}

/* faq */
.faq{padding:var(--space) 0;background:#fff;border-top:2.5px solid var(--ink)}
.faq__list{margin-top:1.6rem;display:grid;gap:.7rem;max-width:56rem}
.faq details{border:2.5px solid var(--ink);border-radius:14px;background:var(--paper)}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:800;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;line-height:1;color:var(--tomato)}
.faq details[open] summary::after{content:"×"}
.faq .a{padding:0 1.2rem 1.1rem;color:var(--slate)}.faq .a p{margin:0}

/* final */
.final{padding:var(--space) 0;background:var(--tomato);color:#fff;border-top:2.5px solid var(--ink)}
.final .lede{color:#fff}
.final .h2{max-width:20ch}
.final .btn--ink{border-color:#fff}
.foot{background:var(--ink);color:#fff;padding:3rem 0}
.foot__in{display:grid;gap:1rem}
.foot p{margin:0;max-width:60ch;color:#d6dce6}
.foot__small{font-size:.78rem}
.foot a{color:#fff}

@media (max-width:1020px){
  .hero__grid,.redline__grid{grid-template-columns:1fr}
  .steps__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(2)::after{display:none}
  .layers__grid{grid-template-columns:1fr 1fr}
  .layers__tabs{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  .steps__row,.layers__grid{grid-template-columns:1fr}
  .step::after{display:none}
  .titleblock dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .titleblock dl>div:nth-child(3n){border-right:1px solid rgba(18,35,58,.18)}
  .titleblock dl>div:nth-child(2n){border-right:0}
  .titleblock dl>div:nth-child(n+4){border-bottom:1px solid rgba(18,35,58,.18)}
  .titleblock dl>div:nth-child(n+5){border-bottom:0}
  .plan__keys{grid-template-columns:1fr}
  .plan{box-shadow:5px 5px 0 var(--ink)}
  .sheet{box-shadow:5px 5px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .ticker__track{animation:none}
}
.ql__chips button img{height:auto}