/* Editorial structure for the existing Magnet design system. */
:root{--wrap:1240px}
html{scroll-padding-top:94px}
body{overflow-x:clip}
section{padding-block:clamp(48px,6vw,80px)}
.head{gap:14px;margin-bottom:34px}
h2{font-size:clamp(29px,3.4vw,45px);line-height:1.35}
.lead{line-height:1.9}
.skip-link{position:fixed;top:8px;right:16px;z-index:1000;background:var(--lime);padding:12px 20px;border-radius:12px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.nav .wrap{gap:24px}
.nav ul li{display:block!important}
.nav ul a{padding:14px 3px;display:block}
.menu-toggle{display:none;border:1px solid #ffffff50;border-radius:50%;width:40px;height:40px;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#fff;cursor:pointer}
.menu-toggle span{display:block;height:2px;width:16px;background:currentColor;transition:transform .2s}
.hero{padding-block:64px 52px;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:66px 66px}
.hero h1{font-size:clamp(40px,5.1vw,68px);line-height:1.3}
.hero-copy{padding-bottom:12px;gap:24px}
.hero .hpill{font-size:13px;width:max-content;max-width:100%;background:#ffffff14;border:1px solid #ffffff30;box-shadow:none}
.hero .chain-words{font-size:14px}
.hero .stage{max-width:520px}
.hero .stage.on .hfloat{opacity:1;transform:none;animation:none}
.hero-meta{gap:10px 18px;font-size:13px}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta span:before{content:'✓';color:var(--lime);font-weight:800}
.hero .btn-lime{background:var(--lime);color:var(--ink)}
.hero .cta-row{align-items:center}
.hero .rbadge,.hero-strip,.mstats{display:none}
.panel{min-height:0}
#platform .head .lead{font-size:19px!important}
#platform .tabs{margin-bottom:28px}
#platform .panel-copy h3{font-size:27px;line-height:1.5}
#platform .ticks{font-size:16px}
#platform .ticks li{line-height:1.9}
.experience{background:#fff;padding-bottom:0;isolation:isolate}
.experience .head{margin-bottom:28px}
.experience-nav{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:72px;z-index:25}
.experience-nav>.wrap{padding-block:16px;display:flex;flex-direction:column;gap:10px}
.experience-tabs{display:flex;gap:8px;overflow:auto;scrollbar-width:thin;padding:3px 2px 7px}
.experience-tabs button{flex:1;min-width:max-content;padding:12px 18px;border:1px solid var(--line);background:var(--cloud);border-radius:12px;color:var(--ink);font:700 14px var(--f-ar);cursor:pointer;transition:background .2s,color .2s}
.experience-tabs button:hover{border-color:var(--blue)}
.experience-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 -3px var(--lime)}
.demo-label{font-size:12px;color:var(--mute)}
.demo-label:before{content:'';display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:50%;margin-inline-end:7px}
.demo-panel{padding-block:36px 42px;scroll-margin-top:190px}
.demo-panel>.wrap>.head{max-width:none;margin-bottom:26px;gap:10px}
.demo-panel>.wrap>.head h3,.demo-panel .ms-head h3{font-size:clamp(24px,2.8vw,34px);line-height:1.5}
.demo-panel>.wrap>.head .lead{max-width:65ch;font-size:16px}
.demo-panel .ra-dev{position:relative;top:auto}
.demo-panel .lv-detail{margin-block:20px}
.demo-panel .lv-grid{gap:24px}
.demo-panel .db-frame{box-shadow:0 20px 40px -30px #0b1b3f66}
.staff-demo{background:var(--cloud)}
.staff-demo .mstf{padding:0;margin:0;border:0}
.staff-demo .ms-head .eyebrow{display:none}
.staff-demo .ms-head{margin-bottom:24px}
.staff-demo .ms-head .lead{font-size:16px;max-width:65ch}
.staff-demo .ms-sig{display:none}
.demo-panel.waiter{padding-bottom:0}
#wxHost{min-width:0;overflow:clip}
.operations-list{display:grid;gap:14px}
.ops-detail{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:clip}
.ops-detail>summary{display:flex;align-items:center;gap:20px;cursor:pointer;list-style:none;padding:25px 28px}
.ops-detail>summary::-webkit-details-marker{display:none}
.ops-number{font:500 13px var(--f-num);width:34px;color:var(--blue);flex:none}
.ops-detail strong{font-size:21px;font-weight:800;display:block}
.ops-detail small{display:block;color:var(--mute);font-size:14px;margin-top:4px;line-height:1.7}
.ops-plus{margin-inline-start:auto;border:1px solid var(--line);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font:400 22px var(--f-num);flex:none}
.ops-detail[open]>summary{border-bottom:1px solid var(--line);background:#fbfcff}
.ops-detail[open] .ops-plus{background:var(--ink);color:#fff;transform:rotate(45deg)}
.ops-content>section{padding-block:32px}
.ops-content>section>.wrap{padding-inline:28px}
.ops-content .head{gap:12px;margin-bottom:26px}
.ops-content .head>.eyebrow{display:none}
.ops-content .head h2{font-size:28px}
.ops-content .head .lead{font-size:16px}
.planning-content{padding:28px}
.planning-content .u-grid{grid-template-columns:1fr 1fr;gap:12px}
.planning-content .u{padding:24px;background:var(--cloud);border:none;border-radius:16px;box-shadow:none}
.planning-content .u h3{font-size:21px}
.planning-content .u p{font-size:15px;line-height:1.9}
.ops-footnote{font-size:14px;color:var(--mute);border-top:1px solid var(--line);padding-top:22px;margin-top:24px}
.cash-note{padding:22px;border:1px solid var(--line-dark);border-radius:16px;margin-top:28px;background:#ffffff06}
.cash-note p{color:var(--mute-on-dark);font-size:15px;margin-top:8px}
.integration-note{padding:20px 24px;background:var(--cloud);border-radius:16px;margin-top:24px}
.integration-note p{font-size:14px;color:var(--mute);margin-top:8px}
.ops-content .dev-hero img{max-height:310px;object-fit:contain}
#trace .head{max-width:850px}
#trace .head h2{max-width:23ch}
#ai .head{max-width:820px}
#ai .ai-grid .card{box-shadow:none}
#ksa{background:#fff}
#ksa .head{margin-bottom:30px}
#ksa .ksa-list{gap:10px;grid-template-columns:1fr}
#ksa .ksa-list>div{padding-block:12px}
#ksa .ksa-list b{font-size:17px}
#ksa .ksa-list span{font-size:15px;line-height:1.9}
#ksa .ksa-grid{gap:40px;align-items:center;grid-template-columns:.85fr 1.15fr}
#ksa .ksa-photos{display:block;max-width:255px;justify-self:center}
#pricing .pr-controls{margin-bottom:28px}
#pricing .guarantee{margin-top:24px}
.faq{background:#fff}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.faq-grid details{border-bottom:1px solid var(--line);padding-block:18px;align-self:start}
.faq-grid summary{font-size:17px;font-weight:700;cursor:pointer;line-height:1.8;list-style:none;display:flex;gap:18px;justify-content:space-between}
.faq-grid summary:after{content:'+';font:400 24px var(--f-num);color:var(--blue)}
.faq-grid details[open] summary:after{content:'−'}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid p{color:var(--mute);font-size:15px;line-height:1.9;margin-top:14px;padding-inline-end:22px}
.form-preview-note{background:var(--cloud);border-radius:10px;padding:12px 14px;color:var(--mute);font-size:12px;grid-column:1/-1}
.refined-footer{display:flex;align-items:center;gap:26px;justify-content:space-between;flex-wrap:wrap;padding-block:38px}
.footer-brand p{font-size:13px;color:var(--mute-on-dark);margin-top:12px}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}
.footer-links a{text-decoration:none}
.footer-copy{font-size:12px;color:var(--mute-on-dark)}
@media(max-width:1020px){
 .nav ul{display:flex}.nav .wrap{gap:16px}.nav ul{gap:14px;font-size:13px}.wordmark{font-size:17px}
 .hero{padding-top:48px}.hero .wrap{gap:28px}.hero .stage{max-width:450px}
}
@media(max-width:760px){
 html{scroll-padding-top:82px}.nav .wrap{height:64px}.nav .spacer{flex:1}.nav .btn{padding:11px 16px;font-size:13px}.menu-toggle{display:flex}
 .nav ul{display:none;position:absolute;top:64px;inset-inline:0;padding:14px 24px 22px;background:var(--blue);border-top:1px solid #ffffff22;box-shadow:0 20px 30px -20px #0b1b3f77;flex-direction:column;gap:0;font-size:15px}
 .nav ul.is-open{display:flex}.nav ul a{padding-block:11px}
 .hero{padding-top:38px;padding-bottom:30px}.hero .wrap{grid-template-columns:1fr}.hero-copy{gap:20px}.hero h1{font-size:clamp(38px,8.8vw,56px)}
 .hero .stage{max-width:420px;margin-bottom:35px}.hero .stage .toggle{bottom:-12px}.hero .lead{font-size:16px}.hero .hpill{font-size:11px}
 .hero .btn{font-size:14px;padding:15px 21px}.hero-meta{font-size:12px;gap:8px 14px}
 .stage.on .hfloat{font-size:11px}.hfloat.f1{max-width:73%}.hfloat.f2{max-width:65%}
 .experience-nav{top:64px}.experience-nav>.wrap{padding-block:12px;gap:6px}.experience-tabs button{flex:none;font-size:13px;padding:10px 14px}.demo-label{font-size:11px}
 .demo-panel{padding-block:28px 32px}.demo-panel .lv-stage{gap:18px}
 .ops-detail>summary{padding:20px 16px;gap:10px}.ops-number{width:24px;font-size:11px}.ops-detail strong{font-size:17px}.ops-detail small{font-size:12px}
 .planning-content{padding:16px}.planning-content .u-grid{grid-template-columns:1fr}.planning-content .u{padding:20px}
 .ops-content>section>.wrap{padding-inline:16px}.ops-content .head h2{font-size:24px}
 .faq-grid{grid-template-columns:1fr}.faq-grid summary{font-size:16px}.refined-footer{align-items:flex-start;gap:24px;flex-direction:column}.footer-links{gap:12px 20px}
 #ksa .ksa-grid{gap:28px;grid-template-columns:1fr}#ksa .ksa-photos{max-width:210px}#ksa .head{margin-bottom:26px}.form-preview-note{font-size:11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}