:root{
  --bg:#04100d;--bg2:#071713;--panel:#0a1b16;--panel2:#0c211b;
  --text:#f6fbf8;--muted:#9db5ac;--muted2:#68847a;--line:rgba(214,255,239,.12);
  --line-strong:rgba(214,255,239,.22);--mint:#7ef7c4;--cyan:#69d8ff;--violet:#9b8cff;--amber:#ffc86a;
  --danger:#ff8e8e;--max:1240px;--radius:22px;--shadow:0 34px 100px rgba(0,0,0,.38);
  --ease:cubic-bezier(.2,.8,.2,1)
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:94px;background:var(--bg)}
body{margin:0;min-width:320px;color:var(--text);background:
radial-gradient(circle at 80% -10%,rgba(155,140,255,.08),transparent 28rem),
radial-gradient(circle at 12% 18%,rgba(126,247,196,.07),transparent 32rem),
linear-gradient(180deg,#04100d 0%,#061511 44%,#04100d 100%);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:16px;line-height:1.55;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img,svg{display:block;max-width:100%}
::selection{background:rgba(126,247,196,.27)}:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:8px}
.shell{width:min(var(--max),calc(100% - 44px));margin-inline:auto}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.skip{position:fixed;z-index:999;left:16px;top:16px;transform:translateY(-170%);background:var(--mint);color:#02100a;padding:10px 14px;border-radius:10px;font-weight:800}.skip:focus{transform:none}
.bg-grid{position:fixed;inset:0;z-index:-3;pointer-events:none;background-image:linear-gradient(rgba(126,247,196,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(126,247,196,.025) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(#000,transparent 86%)}
.noise{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.progress{position:fixed;z-index:120;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet));box-shadow:0 0 18px rgba(105,216,255,.4)}
header{position:sticky;top:0;z-index:100;background:rgba(4,16,13,.7);backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid transparent;transition:.25s}
header.scrolled{border-color:var(--line);background:rgba(4,16,13,.9)}.nav{min-height:76px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;min-width:178px}.brand img{width:174px;height:auto}.navlinks{display:flex;align-items:center;gap:24px;margin-left:auto;color:var(--muted);font-size:12px;font-weight:720}
.navlinks a{padding:28px 0;transition:.2s}.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--text)}
.navcta{display:flex;gap:9px;margin-left:10px}.menu{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);align-items:center;justify-content:center;cursor:pointer}.menu span,.menu:before{content:"";display:block;width:18px;height:1px;background:var(--text);position:absolute;transform:translateY(4px)}.menu:before{transform:translateY(-4px)}
.mobile{display:none;border-top:1px solid var(--line);padding:8px 22px 20px}.mobile.open{display:grid}.mobile a{padding:14px 6px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--muted)}
.button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 17px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:12px;font-weight:800;letter-spacing:.01em;transition:transform .2s,border-color .2s,background .2s}
.button:hover{transform:translateY(-2px);border-color:var(--line-strong);background:rgba(255,255,255,.04)}.primary{border-color:transparent;background:linear-gradient(135deg,var(--mint),#a9ffdf);color:#03110b}.primary:hover{background:linear-gradient(135deg,#98ffd3,#c2ffe9)}
.ghost{color:var(--muted)}.link{display:inline-flex;gap:8px;align-items:center;color:var(--mint);font-weight:800;font-size:12px}.link:after{content:"↗";transition:.2s}.link:hover:after{transform:translate(2px,-2px)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);font:760 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint)}
.badge.amber:before{background:var(--amber);box-shadow:0 0 12px var(--amber)}.badge.violet:before{background:var(--violet);box-shadow:0 0 12px var(--violet)}
.kicker{display:block;margin-bottom:16px;color:var(--mint);font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}.display{font-size:clamp(58px,7.6vw,116px);line-height:.87;letter-spacing:-.071em;font-weight:660;margin:0}.display .dim{color:#7f978e}.display .grad{background:linear-gradient(95deg,var(--mint),var(--cyan) 48%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(42px,5vw,70px);line-height:.96;letter-spacing:-.055em;font-weight:680;margin-bottom:22px}h3{font-size:20px;letter-spacing:-.02em}.lede{max-width:790px;color:var(--muted);font-size:clamp(17px,1.5vw,20px);line-height:1.65}
.section{position:relative;padding:112px 0}.section.small{padding:76px 0}.section-head{max-width:920px;margin-bottom:54px}.section-head p{max-width:760px;color:var(--muted);font-size:18px}
.hero{position:relative;min-height:860px;padding:92px 0 86px;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 72% 34%,rgba(105,216,255,.075),transparent 28rem);pointer-events:none}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);align-items:center;gap:68px}.hero-copy{position:relative;z-index:2}.hero-copy .badge{margin-bottom:30px}
.hero-lede{max-width:690px;color:var(--muted);font-size:18px;line-height:1.7;margin:26px 0 28px}.hero-lede strong{color:var(--text);font-weight:650}.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.proofline{display:flex;flex-wrap:wrap;gap:9px;margin-top:36px}.proofline span{padding:8px 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted2);font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.network-stage{position:relative;min-height:620px;border:1px solid var(--line);border-radius:34px;background:radial-gradient(circle at 50% 42%,rgba(126,247,196,.11),transparent 18rem),linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008));overflow:hidden;box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .18s ease-out}
.network-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,#000,transparent 78%)}
.stage-top{position:absolute;left:22px;right:22px;top:20px;display:flex;justify-content:space-between;align-items:center;color:var(--muted2);font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;text-transform:uppercase}
.stage-core{position:absolute;left:50%;top:49%;width:174px;height:174px;transform:translate(-50%,-50%);display:grid;place-items:center;filter:drop-shadow(0 24px 45px rgba(0,0,0,.4))}
.stage-core:before{content:"";position:absolute;inset:-22px;border:1px solid rgba(126,247,196,.22);border-radius:34px;transform:rotate(30deg);animation:slowspin 26s linear infinite}.stage-core:after{content:"";position:absolute;inset:-68px;border:1px dashed rgba(105,216,255,.14);border-radius:50%;animation:slowspin 38s linear infinite reverse}
.stage-core img{width:142px;position:relative;z-index:2}.orbit{position:absolute;inset:0}.proto{position:absolute;min-width:96px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(5,19,15,.88);box-shadow:0 16px 34px rgba(0,0,0,.25);font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;letter-spacing:.07em}
.proto small{display:block;margin-top:3px;color:var(--muted2);font-size:7px;letter-spacing:.06em}.p1{left:9%;top:18%;color:var(--mint)}.p2{right:8%;top:23%;color:var(--violet)}.p3{left:7%;bottom:20%;color:var(--cyan)}.p4{right:9%;bottom:16%;color:var(--amber)}
.wire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.wire path{fill:none;stroke-width:1.2;stroke-dasharray:8 11;animation:dash 12s linear infinite}.wire .a{stroke:rgba(126,247,196,.48)}.wire .b{stroke:rgba(155,140,255,.38)}.wire .c{stroke:rgba(105,216,255,.42)}.wire .d{stroke:rgba(255,200,106,.34)}
.pulse{filter:drop-shadow(0 0 6px currentColor)}@keyframes dash{to{stroke-dashoffset:-170}}@keyframes slowspin{to{transform:rotate(390deg)}} 
.stage-foot{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--line);color:var(--muted2);font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.1em}.stage-foot strong{color:var(--mint);font-weight:800}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.012)}.strip-inner{min-height:88px;display:grid;grid-template-columns:1.5fr repeat(4,1fr);align-items:center;gap:16px}
.strip-label{font-size:12px;color:var(--muted);font-weight:700}.strip-item{font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}.strip-item span{display:block;color:var(--muted2);font-size:8px;font-weight:650;margin-top:4px}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.flow-card{position:relative;min-height:240px;padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.023),rgba(255,255,255,.008));overflow:hidden}
.flow-card:after{content:"";position:absolute;right:-8px;top:50%;width:16px;height:1px;background:var(--line-strong)}.flow-card:last-child:after{display:none}.flow-num{font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted2);letter-spacing:.12em}.flow-card h3{margin:54px 0 10px;font-size:26px}.flow-card p{margin:0;color:var(--muted);font-size:13px}.flow-card[data-tone="mint"] h3{color:var(--mint)}.flow-card[data-tone="cyan"] h3{color:var(--cyan)}.flow-card[data-tone="violet"] h3{color:var(--violet)}.flow-card[data-tone="amber"] h3{color:var(--amber)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(255,255,255,.024),rgba(255,255,255,.008));padding:30px}.card p{color:var(--muted)}.card .topline{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:46px}
.contract-card{position:relative;overflow:hidden;min-height:520px}.contract-card:before{content:"";position:absolute;width:380px;height:380px;right:-130px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(126,247,196,.08),transparent 68%)}
.contract-lines{display:grid;gap:1px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.contract-row{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:15px 17px;background:rgba(0,0,0,.16);font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace}.contract-row span:first-child{color:var(--muted2)}.contract-row span:last-child{color:#d8ebe4}
.contract-note{margin-top:16px;color:var(--muted2);font-size:11px}.proof-card{min-height:520px;position:relative}.pcc-stack{display:grid;gap:8px}.pcc-layer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015)}.pcc-layer strong{font-size:12px}.pcc-layer span{font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted2);letter-spacing:.06em}.pcc-layer:last-child{border-color:rgba(126,247,196,.28);background:rgba(126,247,196,.035)}
.protocols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.protocol-card{min-height:285px;padding:24px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.012);display:flex;flex-direction:column}.protocol-card .glyph{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;margin-bottom:auto;color:var(--mint);font:900 11px ui-monospace,SFMono-Regular,Menlo,monospace}.protocol-card h3{margin:36px 0 8px}.protocol-card p{color:var(--muted);font-size:13px;margin-bottom:0}.protocol-card:nth-child(2) .glyph{color:var(--violet)}.protocol-card:nth-child(3) .glyph{color:var(--cyan)}.protocol-card:nth-child(4) .glyph{color:var(--amber)}
.boundaries{display:grid;grid-template-columns:.92fr 1.08fr;gap:34px;align-items:start}.neq{display:grid;gap:10px}.neq-row{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:10px}.neq-row span{padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.012);font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}.neq-row b{color:var(--muted2);text-align:center}.trust-copy p{color:var(--muted);font-size:17px}.trust-copy strong{color:var(--text)}
.utility-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.utility{padding:28px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.014)}.utility-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.utility h3{font-size:26px;margin-bottom:7px}.utility p{color:var(--muted);font-size:14px}.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:24px}.meta div{padding:12px;border:1px solid var(--line);border-radius:10px}.meta span{display:block;color:var(--muted2);font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.08em}.meta strong{display:block;margin-top:5px;font:800 11px ui-monospace,SFMono-Regular,Menlo,monospace}
.devbox{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#06130f;box-shadow:var(--shadow)}.devtop{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}.devdots{display:flex;gap:5px}.devdots i{width:6px;height:6px;border-radius:50%;background:var(--muted2)}.tabs{display:flex;gap:6px}.tabs button{border:0;background:transparent;color:var(--muted2);padding:8px 10px;border-radius:8px;cursor:pointer;font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace}.tabs button.active{color:var(--mint);background:rgba(126,247,196,.06)}.code{padding:28px;overflow:auto;min-height:310px;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfe3db;white-space:pre}.code .k{color:var(--violet)}.code .s{color:var(--mint)}.code .c{color:var(--muted2)}.code .n{color:var(--cyan)}
.statement{padding:120px 0;text-align:center}.statement .mark{width:112px;margin:0 auto 30px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}.statement h2{max-width:1000px;margin:0 auto 22px}.statement p{max-width:680px;margin:0 auto 30px;color:var(--muted);font-size:18px}
.page-hero{padding:94px 0 70px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(54px,7vw,98px);line-height:.9;letter-spacing:-.065em;margin:16px 0 26px;max-width:1000px}.page-hero p{max-width:780px;color:var(--muted);font-size:19px}.crumb{color:var(--muted2);font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.steps{display:grid;gap:14px}.step{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:27px 0;border-top:1px solid var(--line)}.step .id{font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted2);letter-spacing:.1em}.step h3{font-size:28px;margin-bottom:8px}.step p{color:var(--muted);max-width:760px}.callout{padding:24px 26px;border-left:2px solid var(--mint);background:rgba(126,247,196,.035);border-radius:0 14px 14px 0;color:var(--muted)}.callout strong{color:var(--text)}
.table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:table}.table th,.table td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{color:var(--muted2);font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.015)}.table td{font-size:13px;color:var(--muted)}.table td strong{color:var(--text)}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);margin-right:8px;box-shadow:0 0 10px rgba(126,247,196,.7)}.status-dot.warn{background:var(--amber);box-shadow:0 0 10px rgba(255,200,106,.6)}
.legal{max-width:850px}.legal h2{font-size:30px;letter-spacing:-.03em;margin-top:56px}.legal h3{margin-top:30px}.legal p,.legal li{color:var(--muted)}.legal li{margin:7px 0}
footer{border-top:1px solid var(--line);padding:56px 0 28px;background:rgba(0,0,0,.12)}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:50px}.footer-brand img{width:330px}.footer-brand p{max-width:420px;color:var(--muted);font-size:13px;margin-top:20px}.footer-col strong{display:block;margin-bottom:14px;font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}.footer-col a{display:block;padding:6px 0;color:var(--muted);font-size:13px}.footer-col a:hover{color:var(--text)}.footer-bottom{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted2);font-size:10px}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.in{opacity:1;transform:none}

.audience-surface-caption{
  margin:0 0 18px;
  padding:10px 12px;
  border-left:2px solid rgba(105,216,255,.72);
  background:linear-gradient(90deg,rgba(105,216,255,.035),rgba(126,247,196,.012) 58%,transparent);
  color:var(--muted2);
  font:800 9px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.035em;
}
html[data-audience="technical"] .audience-surface-caption{
  border-left-color:rgba(155,140,255,.76);
  background:linear-gradient(90deg,rgba(155,140,255,.04),rgba(105,216,255,.012) 58%,transparent);
}

@media(max-width:1040px){.navlinks,.navcta{display:none}.menu{display:flex;margin-left:auto}.hero-layout{grid-template-columns:1fr;gap:46px}.network-stage{min-height:560px}.flow{grid-template-columns:1fr 1fr}.flow-card:after{display:none}.protocols{grid-template-columns:1fr 1fr}.boundaries{grid-template-columns:1fr}.strip-inner{grid-template-columns:1fr 1fr;padding:20px 0}.strip-label{grid-column:1/-1}.footer-grid{grid-template-columns:1fr 1fr}.utility-grid{grid-template-columns:1fr}}
@media(max-width:700px){.shell{width:min(100% - 28px,var(--max))}.section{padding:82px 0}.hero{padding-top:70px;min-height:auto}.display{font-size:clamp(52px,15vw,78px)}.hero-layout{gap:38px}.network-stage{min-height:500px;border-radius:24px}.stage-core{width:130px;height:130px}.stage-core img{width:108px}.proto{min-width:78px;font-size:8px;padding:9px}.p1{left:4%;top:20%}.p2{right:4%;top:24%}.p3{left:4%;bottom:22%}.p4{right:4%;bottom:18%}.flow,.grid-2,.protocols{grid-template-columns:1fr}.flow-card{min-height:200px}.flow-card h3{margin-top:35px}.contract-card,.proof-card{min-height:auto}.contract-row{grid-template-columns:1fr;gap:4px}.meta{grid-template-columns:1fr}.neq-row{grid-template-columns:1fr 24px 1fr}.step{grid-template-columns:1fr;gap:9px}.table{display:block;overflow-x:auto;white-space:nowrap}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.footer-brand img{width:280px}.nav{min-height:70px}.brand img{width:160px}.stage-foot{font-size:6px}.strip-inner{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.wire path,.stage-core:before,.stage-core:after{animation:none}.network-stage{transition:none}}


/* === parity + badge system === */
html[data-audience="plain"] .technical-copy{display:none!important}
html[data-audience="technical"] .plain-copy{display:none!important}
.audience-switch{display:flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.018)}
.audience-switch button{border:0;background:transparent;color:var(--muted2);min-height:32px;padding:0 9px;border-radius:999px;cursor:pointer;font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase}
.audience-switch button.active{color:var(--mint);background:rgba(126,247,196,.08)}

.ecosystem-marquee{padding:30px 0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.01);overflow:hidden}
.marquee-label{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:18px}.marquee-label .kicker{margin:0}.marquee-label p{max-width:760px;margin:0;color:var(--muted2);font-size:11px;text-align:right}
.marquee-window{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{width:max-content;display:flex;gap:10px;padding:2px 0;animation:ecosystemScroll 44s linear infinite}.marquee-window:hover .marquee-track{animation-play-state:paused}
.platform-chip{min-width:170px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:rgba(5,19,15,.82);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.platform-chip b{font-size:12px}.platform-chip small{color:var(--muted2);font:800 7px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}.platform-chip.protocol{border-color:rgba(105,216,255,.18)}.platform-chip.economic{border-color:rgba(255,200,106,.22)}
@keyframes ecosystemScroll{to{transform:translateX(calc(-50% - 5px))}}

.standard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.standard-badge{min-height:118px;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:14px;padding:17px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.023),rgba(255,255,255,.008));transition:.2s}.standard-badge:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.standard-mark{width:50px;height:50px;display:grid;place-items:center;border:1px solid currentColor;border-radius:14px;font:900 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.02em}.standard-badge>span:nth-child(2){display:grid;gap:2px}.standard-badge b{font-size:14px}.standard-badge small{color:var(--muted2);font-size:10px}.standard-badge em{font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;font-style:normal;color:var(--muted2);text-align:right}.standard-badge.mint{color:var(--mint)}.standard-badge.violet{color:var(--violet)}.standard-badge.cyan{color:var(--cyan)}.standard-badge.amber{color:var(--amber)}.standard-badge b{color:var(--text)}
.status-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.status-legend span{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted2);font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.dot{width:6px;height:6px;border-radius:50%;display:inline-block}.dot.live{background:var(--mint)}.dot.design{background:var(--cyan)}.dot.road{background:var(--violet)}.dot.watch{background:var(--muted2)}

.analogy-panel{border:1px solid var(--line);border-radius:28px;padding:30px;background:radial-gradient(circle at 50% 40%,rgba(126,247,196,.06),transparent 22rem),rgba(255,255,255,.012);box-shadow:var(--shadow)}
.analogy-copy{max-width:760px}.analogy-copy h3{font-size:34px;margin:14px 0 8px}.analogy-copy p{color:var(--muted)}
.analogy-flow{display:grid;grid-template-columns:1fr 38px 1.15fr 38px 1fr;align-items:center;gap:8px;margin:34px 0}.analogy-flow article{min-height:155px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.14)}.analogy-flow article>span{color:var(--muted2);font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace}.analogy-flow article strong{font-size:17px;margin-top:12px}.analogy-flow article small{color:var(--muted2);margin-top:5px}.analogy-flow i{text-align:center;color:var(--muted2);font-style:normal}.analogy-flow .core{border-color:rgba(126,247,196,.25);background:rgba(126,247,196,.035)}.analogy-flow .core img{width:52px;margin-bottom:6px}
.analogy-result{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px;border-top:1px solid var(--line)}.analogy-result span{color:var(--mint);font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.analogy-result strong{font-size:14px}
.three-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.three-steps article{padding:25px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.012)}.three-steps article>span{color:var(--muted2);font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace}.three-steps h3{font-size:24px;margin:34px 0 9px}.three-steps p{color:var(--muted);font-size:13px}.simple-rule{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 20px;border:1px solid rgba(126,247,196,.2);border-radius:14px;background:rgba(126,247,196,.03)}.simple-rule b{color:var(--mint);font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.simple-rule span{color:var(--muted)}.simple-rule em{color:var(--text);font-style:normal}

.story{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.012)}.story-request{padding:26px 28px;border-bottom:1px solid var(--line);background:rgba(126,247,196,.025)}.story-request span,.story-result span{color:var(--muted2);font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}.story-request p{margin:9px 0 0;font-size:18px;max-width:940px}
.story-track{display:grid;grid-template-columns:repeat(9,auto);align-items:center;justify-content:space-between;gap:6px;padding:30px 24px}.story-track article{display:flex;align-items:center;gap:10px;max-width:205px}.story-track article>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--mint);font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace;flex:0 0 auto}.story-track strong,.story-track small{display:block}.story-track strong{font-size:11px}.story-track small{font-size:9px;color:var(--muted2);margin-top:3px}.story-track i{width:16px;height:1px;background:var(--line-strong)}
.story-result{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:18px;padding:24px 28px;border-top:1px solid var(--line)}.story-result div{display:grid;gap:5px}.story-result b{text-align:center;color:var(--mint)}.story-result strong{font-size:15px}

.problem-grid,.usecase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.problem-grid article,.usecase-grid article{min-height:245px;padding:24px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.012)}.problem-grid article>span,.usecase-grid article>span{color:var(--muted2);font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}.problem-grid h3,.usecase-grid h3{font-size:22px;margin:50px 0 10px}.problem-grid p,.usecase-grid p{color:var(--muted);font-size:13px}.problem-grid .solution{border-color:rgba(126,247,196,.24);background:rgba(126,247,196,.03)}.problem-grid .solution>span{color:var(--mint)}

.architecture-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.architecture-badges article{position:relative;min-height:210px;padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.012)}.arch-code{display:inline-grid;place-items:center;min-width:42px;height:34px;padding:0 8px;border:1px solid var(--line);border-radius:10px;color:var(--mint);font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace}.architecture-badges h3{margin:36px 0 8px;font-size:20px}.architecture-badges p{color:var(--muted);font-size:12px}.architecture-badges em{position:absolute;right:18px;top:18px;color:var(--muted2);font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;letter-spacing:.08em}.architecture-badges article[data-state="design"] .arch-code{color:var(--cyan)}.architecture-badges article[data-state="road"] .arch-code{color:var(--violet)}
.architecture-layers{display:grid;gap:10px;margin-top:26px}.architecture-layers>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.01)}.architecture-layers>i{text-align:center;color:var(--muted2);font-style:normal;height:10px}.architecture-layers span{color:var(--muted2);font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.architecture-layers strong{font-size:12px;text-align:right}.architecture-layers .siteborne{border-color:rgba(126,247,196,.24);background:rgba(126,247,196,.03);display:grid;grid-template-columns:48px 120px 1fr}.architecture-layers .siteborne img{width:40px}
.horizon-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.horizon-badges span{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:64px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.01)}.horizon-badges b{font-size:12px}.horizon-badges em{color:var(--muted2);font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;text-align:right;letter-spacing:.06em}

.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.trust-grid article{min-height:215px;padding:23px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.012)}.trust-grid article>span{color:var(--mint);font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace}.trust-grid h3{font-size:21px;margin:42px 0 9px}.trust-grid p{color:var(--muted);font-size:13px}.trust-rule{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:14px;padding:19px 21px;border:1px solid rgba(255,200,106,.2);border-radius:14px;background:rgba(255,200,106,.025)}.trust-rule span{color:var(--amber);font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.trust-rule strong{font-size:13px}
.muted-badge:before{background:var(--muted2)!important;box-shadow:none!important}.utility.disabled{opacity:.72}.utility.disabled:hover{opacity:.9}

.payment-flow{display:grid;grid-template-columns:repeat(9,auto);align-items:center;justify-content:space-between;gap:6px}.payment-flow article{min-height:110px;min-width:150px;display:flex;flex-direction:column;justify-content:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.012)}.payment-flow article span{color:var(--amber);font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace}.payment-flow article strong{margin-top:16px;font-size:12px}.payment-flow i{color:var(--muted2);font-style:normal}
.rail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.rail-grid article{min-height:190px;padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.012)}.rail-grid h3{font-size:26px;margin:42px 0 8px}.rail-grid p{color:var(--muted);font-size:13px}
.roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.roadmap-grid article{min-height:240px;padding:24px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.012)}.roadmap-grid article>span{color:var(--violet);font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.roadmap-grid h3{font-size:22px;margin:54px 0 9px}.roadmap-grid p{color:var(--muted);font-size:13px}
.feature-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.feature-badges span,.footer-standards span{padding:7px 9px;border:1px solid var(--line);border-radius:8px;color:var(--muted2);font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.faq-list{display:grid;gap:9px}.faq-list details{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.012);overflow:hidden}.faq-list summary{cursor:pointer;padding:18px 20px;font-weight:750}.faq-list details p{margin:0;padding:0 20px 20px;color:var(--muted);max-width:900px}.faq-list summary::marker{color:var(--mint)}
.footer-standards{display:flex;flex-wrap:wrap;gap:7px;margin-top:38px;padding-top:20px;border-top:1px solid var(--line)}

@media(max-width:1100px){.standard-grid,.architecture-badges,.horizon-badges,.trust-grid,.roadmap-grid{grid-template-columns:1fr 1fr}.problem-grid,.usecase-grid{grid-template-columns:1fr 1fr}.story-track{grid-template-columns:1fr;gap:10px}.story-track i{width:1px;height:12px;margin-left:15px}.payment-flow{grid-template-columns:1fr 22px 1fr 22px 1fr}.payment-flow article:nth-of-type(4),.payment-flow article:nth-of-type(5){margin-top:8px}.payment-flow{justify-content:stretch}.rail-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:1040px){.audience-switch{display:none}}
@media(max-width:760px){
  .marquee-label{display:block}.marquee-label p{text-align:left;margin-top:7px}.standard-grid,.architecture-badges,.horizon-badges,.trust-grid,.problem-grid,.usecase-grid,.roadmap-grid,.three-steps,.rail-grid{grid-template-columns:1fr}
  .standard-badge{grid-template-columns:50px 1fr}.standard-badge em{grid-column:2;text-align:left}
  .analogy-flow{grid-template-columns:1fr}.analogy-flow i{transform:rotate(90deg)}.analogy-result,.simple-rule,.trust-rule{align-items:flex-start;flex-direction:column}
  .story-result{grid-template-columns:1fr}.story-result b{transform:rotate(90deg)}
  .architecture-layers>div{align-items:flex-start;flex-direction:column}.architecture-layers strong{text-align:left}.architecture-layers .siteborne{display:grid;grid-template-columns:42px 1fr}.architecture-layers .siteborne strong{grid-column:1/-1}
  .payment-flow{grid-template-columns:1fr}.payment-flow i{transform:rotate(90deg);text-align:center}.payment-flow article{min-width:0}
}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;transform:none}}

.launch-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:end;padding:46px;border:1px solid rgba(126,247,196,.22);border-radius:28px;background:linear-gradient(145deg,rgba(126,247,196,.045),rgba(105,216,255,.018),rgba(155,140,255,.025));box-shadow:var(--shadow)}
.launch-card:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--launch-angle,0deg),transparent 0 28%,rgba(126,247,196,.72) 36%,rgba(105,216,255,.65) 43%,rgba(155,140,255,.55) 50%,transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:launchBorder 7s linear infinite;pointer-events:none}
.launch-aurora{position:absolute;width:520px;height:340px;right:-170px;top:-170px;background:radial-gradient(circle,rgba(126,247,196,.12),rgba(105,216,255,.055) 38%,transparent 70%);filter:blur(14px);pointer-events:none}.launch-card>*:not(.launch-aurora){position:relative;z-index:2}.launch-card h2{font-size:clamp(38px,4.5vw,62px);margin:10px 0 15px}.launch-card p{max-width:720px;color:var(--muted)}.launch-actions{display:flex;flex-direction:column;align-items:stretch;gap:9px}
@keyframes launchBorder{to{--launch-angle:360deg}}@property --launch-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@media(max-width:760px){.launch-card{grid-template-columns:1fr;padding:28px}.launch-actions{flex-direction:row;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.launch-card:before{animation:none}}

/* end-to-end proof path */
.proof-path-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(105,216,255,.018),transparent 55%)}
.proof-path{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:34px}
.proof-path article{min-height:176px;padding:20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));display:flex;flex-direction:column}
.proof-path article>span{color:var(--cyan);font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em}
.proof-path article strong{margin-top:18px;font-size:18px;letter-spacing:-.025em}
.proof-path article small{margin-top:8px;color:var(--muted);line-height:1.5}
.proof-path article em{margin-top:auto;padding-top:18px;color:var(--muted2);font:800 7px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;font-style:normal}
.proof-path article:nth-child(2)>span,.proof-path article:nth-child(3)>span{color:var(--mint)}
.proof-path article:nth-child(4)>span,.proof-path article:nth-child(5)>span,.proof-path article:nth-child(6)>span{color:var(--violet)}
.proof-path article:nth-child(7)>span{color:var(--amber)}
@media(max-width:900px){.proof-path{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.proof-path{grid-template-columns:1fr}.proof-path article{min-height:150px}}


/* ==========================================================================
   Production visual synthesis — exact-reference brand / old+new design hybrid
   ========================================================================== */
:root{
  --bg:#04100d;
  --bg-deep:#020a08;
  --surface:#081914;
  --surface-2:#0b201a;
  --surface-3:#0e261f;
  --text:#f6fbf8;
  --muted:#9fb8af;
  --muted2:#718c82;
  --line:rgba(214,255,239,.115);
  --line-strong:rgba(214,255,239,.245);
  --mint:#7ef7c4;
  --cyan:#69d8ff;
  --violet:#9b8cff;
  --amber:#ffc86a;
  --max:1280px;
  --radius:20px;
  --radius-lg:30px;
  --shadow-soft:0 18px 54px rgba(0,0,0,.24);
  --shadow-deep:0 34px 110px rgba(0,0,0,.42);
  --ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-padding-top:98px}
body{
  background:
    radial-gradient(circle at 8% 4%,rgba(126,247,196,.055),transparent 31rem),
    radial-gradient(circle at 92% 8%,rgba(155,140,255,.055),transparent 34rem),
    radial-gradient(circle at 50% 72%,rgba(105,216,255,.025),transparent 46rem),
    linear-gradient(180deg,#04100d 0%,#061511 42%,#04100d 100%);
  font-variant-numeric:tabular-nums;
}
main{position:relative;z-index:1}
.shell{width:min(var(--max),calc(100% - 56px))}
.bg-grid{
  opacity:.72;
  background-size:64px 64px;
  mask-image:linear-gradient(#000 0%,rgba(0,0,0,.94) 52%,transparent 96%);
}
.bg-grid::before,.bg-grid::after{
  content:"";position:absolute;pointer-events:none;
}
.bg-grid::before{
  width:50rem;height:50rem;left:-30rem;top:42rem;border-radius:50%;
  background:var(--mint);filter:blur(130px);opacity:.038;
  box-shadow:116rem 84rem 0 0 var(--violet),58rem 168rem 0 0 var(--cyan);
}
.bg-grid::after{
  inset:-20% -10%;
  background:
    linear-gradient(112deg,transparent 31%,rgba(126,247,196,.022) 31.2%,transparent 31.55%),
    linear-gradient(72deg,transparent 58%,rgba(155,140,255,.018) 58.2%,transparent 58.55%);
  transform:translateZ(0);
}
.noise{opacity:.012}
.progress{height:2px;box-shadow:0 0 16px rgba(105,216,255,.28)}

header{
  background:linear-gradient(180deg,rgba(4,16,13,.82),rgba(4,16,13,.66));
  backdrop-filter:blur(18px) saturate(122%);
  -webkit-backdrop-filter:blur(18px) saturate(122%);
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 6%,rgba(126,247,196,.12),rgba(105,216,255,.08),rgba(155,140,255,.10),transparent 94%);
  opacity:0;transition:opacity .24s ease;
}
header.scrolled::after{opacity:1}
.nav{min-height:80px}
.brand{min-width:188px;align-items:center}
.brand img{
  width:184px;height:auto;object-fit:contain;filter:drop-shadow(0 7px 18px rgba(0,0,0,.18));
}
.navlinks{gap:26px;font-size:12px}
.navlinks a{position:relative;padding:31px 0 29px}
.navlinks a::after{
  content:"";position:absolute;left:0;right:100%;bottom:18px;height:1px;
  background:linear-gradient(90deg,var(--mint),var(--cyan));
  transition:right .28s var(--ease);
}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{right:0}
.navlinks a[aria-current="page"]{color:var(--text)}
.menu{position:relative}
.menu::before,.menu::after{
  content:"";position:absolute;width:18px;height:1px;background:var(--text);left:12px;
  transition:transform .25s var(--ease),top .25s var(--ease);
}
.menu::before{top:17px}.menu::after{top:25px}
.menu[aria-expanded="true"]::before{top:21px;transform:rotate(45deg)}
.menu[aria-expanded="true"]::after{top:21px;transform:rotate(-45deg)}
.mobile{
  background:rgba(4,16,13,.96);backdrop-filter:blur(18px);
  box-shadow:0 32px 70px rgba(0,0,0,.34);
}
.mobile.open{animation:menuIn .28s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.button{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:48px;padding-inline:18px;border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  transition:transform .25s var(--ease),border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.button::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.075) 45%,transparent 70%);
  transform:translateX(-125%);transition:opacity .2s ease;
}
.button:hover::after{opacity:1;animation:buttonSweep .75s var(--ease)}
@keyframes buttonSweep{to{transform:translateX(125%)}}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.button.primary{
  background:linear-gradient(135deg,#7ef7c4 0%,#a2ffda 100%);
  box-shadow:0 10px 30px rgba(126,247,196,.10),inset 0 1px 0 rgba(255,255,255,.44);
}
.button.primary::before{
  content:"";position:absolute;inset:-1px;z-index:-2;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--edge-angle,0deg),transparent 0 34%,rgba(126,247,196,.98) 41%,rgba(105,216,255,.9) 48%,rgba(155,140,255,.78) 55%,transparent 63%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:edgeOrbit 5.5s linear infinite;
}
@property --edge-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes edgeOrbit{to{--edge-angle:360deg}}

.audience-switch{
  background:rgba(255,255,255,.015);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.audience-switch button{min-height:34px;padding:0 11px;transition:.2s ease}
.audience-switch button.active{box-shadow:inset 0 0 0 1px rgba(126,247,196,.08)}
.badge{
  min-height:30px;padding:6px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.hero{
  min-height:900px;padding:104px 0 96px;
  overflow:clip;
}
.hero::before{
  background:
    radial-gradient(circle at var(--hx,74%) var(--hy,32%),rgba(126,247,196,.105),transparent 20rem),
    radial-gradient(ellipse at 72% 34%,rgba(105,216,255,.055),transparent 31rem);
  transition:background-position .1s linear;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent 65%,rgba(4,16,13,.78) 100%);
}
.hero-beams{position:absolute;inset:-2% -4%;z-index:0;pointer-events:none;opacity:.8}
.hero-beams svg{width:100%;height:100%}
.beam{stroke-width:1;stroke-dasharray:10 18;animation:beamFlow 18s linear infinite}
.beam-b{animation-duration:24s;animation-direction:reverse}
@keyframes beamFlow{to{stroke-dashoffset:-210}}
.hero-lens{
  position:absolute;z-index:0;left:var(--hx,74%);top:var(--hy,32%);
  width:42rem;height:42rem;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(105,216,255,.035),rgba(126,247,196,.018) 28%,transparent 68%);
  filter:blur(12px);pointer-events:none;
}
.hero-layout{position:relative;z-index:2;gap:72px}
.hero-copy .badge{margin-bottom:28px}
.display{font-size:clamp(62px,7.55vw,112px);line-height:.875;letter-spacing:-.073em}
.hero-lede{max-width:710px;margin-top:30px;margin-bottom:30px}
.proofline{gap:8px;margin-top:38px}
.proofline span{
  position:relative;overflow:hidden;
  background:rgba(5,19,15,.62);border-color:rgba(214,255,239,.105);
}
.proofline span::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(126,247,196,.32),transparent);
}

.network-stage{
  min-height:630px;border-color:rgba(214,255,239,.14);
  background:
    radial-gradient(circle at var(--sx,50%) var(--sy,43%),rgba(126,247,196,.105),transparent 18rem),
    radial-gradient(circle at 74% 22%,rgba(155,140,255,.05),transparent 16rem),
    linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.007));
  box-shadow:0 34px 100px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.024);
}
.network-stage::before{opacity:.82}
.network-stage::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(130deg,rgba(126,247,196,.18),transparent 18%,transparent 78%,rgba(155,140,255,.12));
  padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;
}
.stage-core{width:176px;height:176px}
.stage-core img{
  width:136px;filter:drop-shadow(0 22px 34px rgba(0,0,0,.34));
}
.stage-core::before{border-color:rgba(126,247,196,.18)}
.stage-core::after{border-color:rgba(105,216,255,.12)}
.proto{
  border-color:rgba(214,255,239,.14);
  background:linear-gradient(180deg,rgba(7,27,22,.94),rgba(4,16,13,.92));
  box-shadow:0 18px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.02);
}
.stage-foot{border-top-color:rgba(214,255,239,.095)}

.section{padding:120px 0}
.section::before{
  content:"";position:absolute;top:0;left:50%;width:min(var(--max),calc(100% - 56px));height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent 0%,rgba(214,255,239,.065) 13%,rgba(214,255,239,.11) 50%,rgba(214,255,239,.065) 87%,transparent 100%);
}
.section-head{margin-bottom:58px}
.section-head p,.lede{max-width:72ch}
h2{font-size:clamp(44px,5vw,72px);letter-spacing:-.058em}
h3{line-height:1.15}
.kicker{letter-spacing:.17em}

.page-hero{
  position:relative;overflow:hidden;padding:110px 0 86px;
  background:
    radial-gradient(circle at 84% 12%,rgba(155,140,255,.06),transparent 26rem),
    radial-gradient(circle at 10% 40%,rgba(126,247,196,.045),transparent 25rem);
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(126,247,196,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(#000,transparent 95%);
}
.page-hero::after{
  content:"";position:absolute;width:45rem;height:1px;right:-10rem;top:42%;
  background:linear-gradient(90deg,transparent,rgba(105,216,255,.22),transparent);
  transform:rotate(-24deg);box-shadow:0 0 28px rgba(105,216,255,.05);
}
.page-hero .shell{position:relative;z-index:2}
.page-hero h1{max-width:1080px}
.page-hero p{max-width:820px;line-height:1.72}

:is(
.card,.flow-card,.protocol-card,.utility,.architecture-badges article,.horizon-badges span,
.trust-grid article,.rail-grid article,.problem-grid article,.usecase-grid article,.three-steps article,
.standard-badge,.analogy-panel,.story,.devbox,.pcc-layer,.neq-row span,.architecture-layers>div
){
  --mx:50%;--my:0%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
:is(
.card,.flow-card,.protocol-card,.utility,.architecture-badges article,
.trust-grid article,.rail-grid article,.problem-grid article,.usecase-grid article,.three-steps article,
.standard-badge
){
  background:
    radial-gradient(420px circle at var(--mx) var(--my),rgba(126,247,196,.045),transparent 44%),
    linear-gradient(145deg,rgba(255,255,255,.024),rgba(255,255,255,.008));
  transition:transform .28s var(--ease),border-color .28s ease,box-shadow .28s ease,background .18s linear;
}
:is(
.card,.flow-card,.protocol-card,.utility,.architecture-badges article,
.trust-grid article,.rail-grid article,.problem-grid article,.usecase-grid article,.three-steps article,
.standard-badge
):hover{
  transform:translateY(-3px);
  border-color:rgba(214,255,239,.22);
  box-shadow:0 22px 58px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.028);
}
.utility.disabled:hover{transform:none;border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.flow-card{min-height:250px}
.flow-card::before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.16;
}
.flow-card[data-tone="mint"]{color:var(--mint)}
.flow-card[data-tone="cyan"]{color:var(--cyan)}
.flow-card[data-tone="violet"]{color:var(--violet)}
.flow-card[data-tone="amber"]{color:var(--amber)}
.flow-card p,.flow-card .flow-num{color:var(--muted)}
.card,.utility{padding:32px}
.contract-lines{box-shadow:inset 0 1px 0 rgba(255,255,255,.015)}
.contract-row:nth-child(even){background:rgba(255,255,255,.01)}
.pcc-layer{transition:border-color .22s ease,background .22s ease,transform .22s var(--ease)}
.pcc-layer:hover{transform:translateX(3px);border-color:rgba(105,216,255,.2)}
.protocol-card .glyph{
  background:rgba(255,255,255,.01);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.neq-row span{background:linear-gradient(180deg,rgba(255,255,255,.016),rgba(255,255,255,.006))}
.utility-head{align-items:center}
.meta div{background:rgba(0,0,0,.11)}
.devbox{border-color:rgba(214,255,239,.15);box-shadow:0 30px 90px rgba(0,0,0,.38)}
.devtop{min-height:58px}
.tabs button{min-height:36px;transition:.2s}
.tabs button:hover{color:var(--text);background:rgba(255,255,255,.025)}
.code{min-height:330px}
.copy-code{
  min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.018);
  color:var(--muted);font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;cursor:pointer;
}
.copy-code:hover{color:var(--text);border-color:var(--line-strong)}
.copy-code[data-copied="true"]{color:var(--mint);border-color:rgba(126,247,196,.24)}

.ecosystem-marquee{
  position:relative;padding:34px 0 38px;
  background:linear-gradient(180deg,rgba(255,255,255,.008),rgba(255,255,255,.014),rgba(255,255,255,.008));
}
.ecosystem-marquee::before,.ecosystem-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:3;pointer-events:none;
}
.ecosystem-marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ecosystem-marquee::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.marquee-track{gap:12px;animation-duration:52s}
.marquee-window:focus-within .marquee-track{animation-play-state:paused}
.platform-chip{
  min-width:184px;padding:14px 16px;border-radius:13px;
  background:linear-gradient(180deg,rgba(9,29,24,.88),rgba(5,18,15,.88));
  box-shadow:0 13px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.018);
}
.platform-chip b{letter-spacing:-.01em}

.standard-grid{gap:14px}
.standard-badge{min-height:126px;padding:19px;border-radius:18px}
.standard-mark{border-color:color-mix(in srgb,currentColor 44%,transparent);background:rgba(255,255,255,.012)}
.standard-badge:hover .standard-mark{transform:translateY(-1px)}
.standard-mark{transition:transform .25s var(--ease)}

.analogy-panel,.story{
  border-color:rgba(214,255,239,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.022);
}
.analogy-flow article,.story-track article>span{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.analogy-flow .core{box-shadow:0 18px 44px rgba(126,247,196,.035),inset 0 1px 0 rgba(126,247,196,.08)}
.story-request{background:linear-gradient(90deg,rgba(126,247,196,.035),transparent)}
.story-track{position:relative}
.story-track::before{
  content:"";position:absolute;left:5%;right:5%;top:50%;height:1px;z-index:0;
  background:linear-gradient(90deg,rgba(126,247,196,.2),rgba(105,216,255,.16),rgba(155,140,255,.16),rgba(255,200,106,.15));
}
.story-track article,.story-track i{position:relative;z-index:1}
.story-track article{background:var(--surface);padding:6px}
.story-track i{background:transparent}

.table{
  border-color:rgba(214,255,239,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,.004));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.table tbody tr{transition:background .2s ease}
.table tbody tr:hover{background:rgba(126,247,196,.018)}
.table th{padding-top:18px;padding-bottom:18px}
.table td{padding-top:18px;padding-bottom:18px}

.metadata-source{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:22px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(90deg,rgba(126,247,196,.025),rgba(255,255,255,.008));
  color:var(--muted2);font:750 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.055em;
}
.metadata-source strong{color:var(--text)}
.metadata-source [data-metadata-state]{display:inline-flex;align-items:center;gap:8px}
.metadata-source [data-metadata-state]::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(105,216,255,.45);
}
.metadata-source[data-state="live"] [data-metadata-state]::before{background:var(--mint);box-shadow:0 0 10px rgba(126,247,196,.45)}
.metadata-source[data-state="fallback"] [data-metadata-state]::before{background:var(--amber);box-shadow:none}

.status-dot{box-shadow:0 0 10px rgba(126,247,196,.35)}
.status-dot.warn{box-shadow:0 0 10px rgba(255,200,106,.25)}

footer{
  position:relative;padding:68px 0 30px;
  background:
    radial-gradient(circle at 10% 100%,rgba(126,247,196,.035),transparent 28rem),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.2));
}
footer::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--mint) 28%,var(--cyan) 50%,var(--violet) 72%,transparent);opacity:.17;
}
.footer-brand img{width:min(340px,100%);height:auto;object-fit:contain}
.footer-col a{position:relative;width:max-content;max-width:100%}
.footer-col a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--mint);transition:right .25s var(--ease)}
.footer-col a:hover::after{right:0}
.footer-bottom{line-height:1.5}

.reveal{transform:translateY(18px);transition-duration:.68s}
.reveal.in{transform:none}
.reveal[data-reveal="scale"]{transform:translateY(12px) scale(.985)}
.reveal[data-reveal="scale"].in{transform:none}

body[data-page="terms"] .legal,body[data-page="privacy"] .legal{max-width:820px}
.legal p,.legal li{max-width:74ch}
.legal h2{scroll-margin-top:110px}

@media(max-width:1180px){
  .shell{width:min(var(--max),calc(100% - 40px))}
  .hero-layout{gap:48px}
  .brand img{width:176px}
  .navlinks{gap:20px}
}
@media(max-width:1040px){
  .section{padding:104px 0}
  .hero{min-height:auto;padding:88px 0 84px}
  .hero-layout{grid-template-columns:1fr;gap:54px}
  .network-stage{min-height:570px;max-width:760px;width:100%;margin-inline:auto}
  .ecosystem-marquee::before,.ecosystem-marquee::after{width:64px}
}
@media(max-width:760px){
  .shell{width:min(var(--max),calc(100% - 32px))}
  .section{padding:82px 0}
  .section::before{width:calc(100% - 32px)}
  .page-hero{padding:82px 0 64px}
  .page-hero h1{font-size:clamp(50px,14.5vw,78px)}
  .hero{padding:72px 0 74px}
  .display{font-size:clamp(52px,15vw,76px)}
  .hero-lede{font-size:16px;line-height:1.7}
  .network-stage{min-height:510px}
  .stage-core img{width:104px}
  .marquee-label{display:block}
  .marquee-label p{text-align:left;margin-top:10px}
  .ecosystem-marquee::before,.ecosystem-marquee::after{width:26px}
  .card,.utility{padding:24px}
  .standard-grid{grid-template-columns:1fr}
  .standard-badge{min-height:104px}
  .story-track{display:flex;overflow-x:auto;justify-content:flex-start;gap:10px;scroll-snap-type:x mandatory;padding:24px 20px}
  .story-track::before{display:none}
  .story-track article{min-width:190px;scroll-snap-align:start}
  .story-track i{display:none}
  .story-result{grid-template-columns:1fr;gap:10px}
  .story-result b{transform:rotate(90deg)}
  .button{min-height:48px}
}
@media(max-width:520px){
  .shell{width:min(var(--max),calc(100% - 28px))}
  .display{font-size:clamp(48px,15.2vw,68px)}
  .actions .button{width:100%}
  .proofline span{font-size:8px}
  .network-stage{min-height:470px}
  .stage-top{font-size:7px}
  .stage-foot{font-size:6px}
  .platform-chip{min-width:160px}
  .metadata-source{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .button.primary::before,.beam,.marquee-track,.stage-core::before,.stage-core::after{animation:none!important}
  .button:hover,.standard-badge:hover,
  :is(.card,.flow-card,.protocol-card,.utility,.architecture-badges article,.trust-grid article,.rail-grid article,.problem-grid article,.usecase-grid article,.three-steps article):hover{transform:none}
  .hero::before{transition:none}
}
@media print{
  .bg-grid,.noise,.progress,header,.ecosystem-marquee,.hero-beams,.hero-lens,.audience-switch{display:none!important}
  body{background:#fff!important;color:#111!important}
  .section,.page-hero,.hero{padding:28px 0!important}
  .card,.utility,.devbox,.story,.analogy-panel{box-shadow:none!important;background:#fff!important;color:#111!important}
}


/* Progressive-enhancement reveal safety: content is visible without JavaScript. */
.reveal{opacity:1;transform:none}
html.has-reveal .reveal{opacity:0;transform:translateY(18px)}
html.has-reveal .reveal[data-reveal="scale"]{transform:translateY(12px) scale(.985)}
html.has-reveal .reveal.in{opacity:1;transform:none}


/* 404 — contract miss */
.error-page{min-height:100vh;display:flex;flex-direction:column}
.error-header{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.error-header .brand img{width:184px;height:auto}
.error-main{flex:1;display:grid;align-items:center;padding:72px 0 88px}
.error-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:64px;align-items:center;padding:clamp(34px,5vw,70px);border:1px solid var(--line2);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(11,26,22,.92),rgba(5,16,13,.76));box-shadow:var(--shadow)}
.error-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 45%,rgba(105,216,255,.08),transparent 28rem),linear-gradient(125deg,rgba(126,247,196,.04),transparent 40%)}
.error-copy{position:relative;z-index:2}.error-copy h1{max-width:720px;margin:16px 0 18px;font-size:clamp(52px,7vw,96px);line-height:.91;letter-spacing:-.066em;font-weight:720}.error-copy p{max-width:680px;margin:0;color:var(--muted);font-size:17px;line-height:1.7}
.error-visual{position:relative;min-height:430px;display:grid;place-items:center;isolation:isolate}
.error-visual:before{content:"";position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(126,247,196,.09),rgba(105,216,255,.025) 48%,transparent 70%);filter:blur(1px)}
.error-visual img{position:relative;z-index:3;width:min(160px,36vw);filter:drop-shadow(0 18px 40px rgba(0,0,0,.28))}
.error-code{position:absolute;right:7%;bottom:4%;z-index:1;color:rgba(244,250,247,.035);font:800 clamp(130px,18vw,250px)/.8 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.1em}
.error-orbit{position:absolute;border:1px solid rgba(214,255,239,.12);border-radius:50%;transform:rotate(-16deg)}
.error-orbit:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(105,216,255,.62);top:24%;right:4%}
.orbit-a{width:82%;aspect-ratio:1}.orbit-b{width:58%;aspect-ratio:1;transform:rotate(28deg)}.orbit-b:after{background:var(--violet);top:auto;bottom:15%;right:auto;left:6%;box-shadow:0 0 18px rgba(155,140,255,.55)}
.error-node{position:absolute;z-index:4;padding:7px 10px;border:1px solid var(--line2);border-radius:999px;background:rgba(4,16,13,.82);backdrop-filter:blur(10px);color:var(--muted);font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}.error-node-a{left:3%;top:24%}.error-node-b{right:0;top:42%}.error-node-c{left:13%;bottom:17%}
.error-footer{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);color:var(--muted2);font-size:11px}
@media(max-width:820px){.error-card{grid-template-columns:1fr;gap:26px}.error-visual{min-height:320px}.error-header .button{display:none}.error-footer{align-items:flex-start;flex-direction:column;justify-content:center}.error-copy h1{font-size:clamp(48px,14vw,76px)}} 
@media(max-width:520px){.error-main{padding:40px 0 64px}.error-card{padding:28px 22px}.error-visual{min-height:270px}.error-node{font-size:8px}.error-code{right:0}}


/* Interaction target refinement */
.brand{min-height:44px}
.audience-switch{min-height:44px}
.audience-switch button{min-height:38px;padding-inline:12px}
.tabs button{min-height:40px;padding:8px 12px}
.copy-code{min-height:40px;padding-inline:12px}
.link{min-height:44px;padding:10px 0}
@media(max-width:1040px){
  .brand{min-height:44px}
  .audience-switch button,.tabs button,.copy-code{min-height:44px}
  .footer-col a{min-height:44px;display:flex;align-items:center;padding:10px 0}
}



/* ================================================================
   SITEBORNE REFERENCE MASTER VISUAL SYSTEM
   Ported from the supplied high-fidelity SITEBORNE reference build.
   Content, page placement, URLs, metadata, and information hierarchy
   remain unchanged. This layer replaces generic visual skinning with
   module-specific visual treatments and the reference motion grammar.
   ================================================================ */

:root{
  --bg:#06110E;
  --bg2:#081914;
  --panel:#0A1C17;
  --panel2:#0D211B;
  --text:#F7FBF9;
  --muted:#A8BBB4;
  --muted2:#71837C;
  --line:rgba(222,255,243,.13);
  --line2:rgba(222,255,243,.24);
  --mint:#7EF7C4;
  --cyan:#69D8FF;
  --violet:#9B8CFF;
  --amber:#FFC86A;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 26px 80px rgba(0,0,0,.30);
}

html{background:var(--bg)}
body{
  --mx:50vw;--my:25vh;--sb-scroll:0;
  background:
    radial-gradient(circle at 10% 3%,rgba(126,247,196,.025),transparent 32rem),
    radial-gradient(circle at 90% 10%,rgba(155,140,255,.022),transparent 34rem),
    var(--bg)!important;
  color:var(--text);
}
.bg-grid{
  background-image:
    linear-gradient(rgba(126,247,196,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.028) 1px,transparent 1px)!important;
  background-size:68px 68px!important;
  mask-image:linear-gradient(#000,transparent 85%)!important;
  opacity:1!important;
}
.noise{opacity:.015!important}

/* Exact reference motion field. */
.sb-motion-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sb-route-field{
  position:absolute;inset:-8%;width:116%;height:116%;opacity:.82;
  transform:translate3d(calc((var(--px,0))*-12px),calc((var(--py,0))*-8px),0);
  transition:transform .35s ease-out
}
.sb-route-path{
  fill:none;stroke-width:1;stroke-dasharray:9 16;vector-effect:non-scaling-stroke;
  animation:sbDash 18s linear infinite
}
.sb-r1{stroke:url(#sbRouteMint)}
.sb-r2{stroke:url(#sbRouteViolet);animation-duration:25s;animation-direction:reverse}
.sb-r3{stroke:url(#sbRouteMint);animation-duration:31s}
@keyframes sbDash{to{stroke-dashoffset:-240}}
.sb-cursor-aura{
  position:absolute;width:42rem;height:42rem;left:var(--mx);top:var(--my);
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(126,247,196,.08),rgba(105,216,255,.03) 30%,rgba(155,140,255,.015) 48%,transparent 68%);
  filter:blur(18px);opacity:.92;transition:left .12s linear,top .12s linear
}
.sb-section-rail{
  position:fixed;z-index:80;right:18px;top:50%;transform:translateY(-50%);
  display:grid;gap:9px
}
.sb-section-rail i{
  display:block;width:3px;height:22px;background:rgba(255,255,255,.09);
  transition:height .35s var(--ease),background .35s,box-shadow .35s
}
.sb-section-rail i.active{
  height:42px;background:linear-gradient(var(--mint),var(--cyan));
  box-shadow:0 0 14px rgba(126,247,196,.28)
}
#sb-live-network{
  position:fixed;inset:0;z-index:-3;width:100%;height:100%;pointer-events:none;
  opacity:.60;mix-blend-mode:screen
}
.sb-contract-pulse{
  position:fixed;z-index:-1;left:0;right:0;top:0;height:100vh;pointer-events:none;overflow:hidden
}
.sb-contract-pulse span{
  position:absolute;width:1px;height:34vh;top:-40vh;
  background:linear-gradient(180deg,transparent,var(--mint),var(--cyan),transparent);
  filter:drop-shadow(0 0 7px rgba(126,247,196,.28));
  opacity:.16;animation:sbVerticalSignal 12s linear infinite
}
.sb-contract-pulse span:nth-child(1){left:12%;animation-delay:-1s}
.sb-contract-pulse span:nth-child(2){left:50%;animation-delay:-5s;background:linear-gradient(180deg,transparent,var(--violet),var(--cyan),transparent)}
.sb-contract-pulse span:nth-child(3){left:87%;animation-delay:-9s}
@keyframes sbVerticalSignal{to{transform:translateY(150vh)}}

/* Reference header: transparent instrument chrome, not a card. */
header{
  background:rgba(6,17,14,.62)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  border-bottom:1px solid transparent!important;
  box-shadow:none!important;
}
header.scrolled{background:rgba(6,17,14,.90)!important;border-color:var(--line)!important}
.nav{min-height:72px!important}
.brand{
  min-width:auto!important;min-height:44px!important;padding:0!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important
}
.brand:before{display:none!important}
.brand:after{
  content:"";display:block!important;width:5px!important;height:5px!important;flex:0 0 5px!important;
  margin-left:11px!important;border-radius:50%!important;background:var(--mint)!important;
  box-shadow:0 0 12px var(--mint)!important
}
.brand img{height:28px!important;width:auto!important;filter:none!important}
.navlinks{gap:22px!important;color:var(--muted)!important;font-size:11px!important}
.navlinks a{padding:14px 0!important}
.navlinks a:after{
  content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;
  background:linear-gradient(90deg,var(--mint),var(--cyan));transition:right .22s
}
.navlinks a:hover:after,.navlinks a[aria-current="page"]:after{right:0}
.navcta{border:0!important;box-shadow:none!important;background:none!important}
.navcta:before,.navcta:after{display:none!important}

/* Buttons exactly follow the reference cut-corner restraint. */
.button{
  min-height:48px!important;padding:0 18px!important;border:1px solid var(--line)!important;
  border-radius:0!important;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))!important;
  background:rgba(255,255,255,.025)!important;
  box-shadow:none!important;
  font-size:11px!important;font-weight:800!important;
  transition:transform .22s var(--ease),border-color .22s,background .22s!important;
  position:relative;overflow:hidden
}
.button:hover{transform:translateY(-2px)!important;border-color:var(--line2)!important}
.button.primary{
  background:linear-gradient(135deg,var(--mint),#AAFFE1)!important;color:#03100B!important;border-color:transparent!important;
  box-shadow:0 12px 34px rgba(126,247,196,.12)!important
}
.button.primary:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.55) 48%,transparent 74%);
  transform:translateX(-130%);animation:sbButtonSweep 5.8s ease-in-out infinite;mix-blend-mode:soft-light
}
@keyframes sbButtonSweep{50%,100%{transform:translateX(140%)}}

/* Section rhythm from the original: space, fine rails, no universal container box. */
.section{padding:108px 0!important}
.section.small{padding:76px 0!important}
main>.section:after,main>section.section:after{
  content:"";position:absolute;left:50%;bottom:-1px;width:min(1100px,78%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(126,247,196,.18),rgba(105,216,255,.18),rgba(155,140,255,.15),transparent);
  background-size:220% 100%;animation:sbRailFlow 9s linear infinite
}
@keyframes sbRailFlow{to{background-position:-220% 0}}
.section-head{max-width:930px!important;margin-bottom:48px!important}
.section-head h2{
  margin:14px 0 18px!important;font-size:clamp(42px,5.2vw,70px)!important;
  line-height:.99!important;letter-spacing:-.057em!important;text-wrap:balance
}
.section-head p{max-width:820px!important;color:var(--muted)!important;font-size:clamp(16px,1.4vw,19px)!important;line-height:1.65!important}
.kicker{
  color:var(--mint)!important;font:750 9px ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.16em!important;text-transform:uppercase
}

/* Reveal quality matches the source reference. */
.reveal{filter:blur(6px);transform:translateY(18px) scale(.992)!important}
.reveal.in{filter:blur(0);transform:none!important}
.section-head.reveal.in h2{animation:sbHeadingIn .8s var(--ease) both}
@keyframes sbHeadingIn{from{letter-spacing:-.07em;opacity:.5}to{letter-spacing:-.057em;opacity:1}}

/* Hero: use the source composition/contrast while preserving current placement. */
.hero{
  min-height:900px!important;padding:112px 0 70px!important;overflow:clip!important
}
.hero:before{
  content:"";position:absolute!important;left:0!important;right:0!important;top:0!important;height:1px!important;
  background:linear-gradient(90deg,transparent,var(--mint),var(--cyan),var(--violet),transparent)!important;
  opacity:.22!important
}
.hero:after{
  content:"";position:absolute;left:50%;top:18%;width:60vw;height:60vw;max-width:900px;max-height:900px;
  transform:translate(-50%,-50%) rotate(calc(var(--sb-scroll)*.08deg));
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(126,247,196,.04),rgba(105,216,255,.025),rgba(155,140,255,.035),transparent 65%);
  filter:blur(48px);pointer-events:none;z-index:-1
}
.hero-layout{grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr)!important;gap:66px!important}
.hero h1{font-size:clamp(58px,7vw,104px)!important;line-height:.92!important;letter-spacing:-.07em!important}
.hero h1 span{transform-origin:left center;animation:sbHeroBreathe 8s ease-in-out infinite alternate}
.hero h1 span:nth-child(2){animation-delay:-2.4s}
.hero h1 span:nth-child(3){animation-delay:-4.8s}
@keyframes sbHeroBreathe{from{transform:translateX(0) scaleX(1)}to{transform:translateX(4px) scaleX(1.008)}}
.hero .grad,.gradient-text,.prismatic-text{
  background-size:200% 100%!important;animation:sbPrism 8s ease-in-out infinite alternate!important
}
@keyframes sbPrism{to{background-position:100% 50%}}
.hero-lede{max-width:790px!important;color:#C4D5CE!important;font-size:clamp(18px,1.62vw,22px)!important;line-height:1.58!important}
.proofline span{
  border-radius:0!important;border:1px solid var(--line)!important;
  background:rgba(255,255,255,.012)!important;color:var(--muted2)!important
}
.hero-traits span,.proofline span,.feature-badges span,.footer-standards span,.platform-chip{
  position:relative;overflow:hidden
}
.hero-traits span:after,.proofline span:after,.feature-badges span:after,.footer-standards span:after,.platform-chip:after{
  content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.09) 49%,transparent 73%);
  transform:translateX(-130%);animation:sbTinySweep 10s ease-in-out infinite
}
@keyframes sbTinySweep{45%,100%{transform:translateX(130%)}}

/* Hero visual maps directly to the source identity-prism treatment. */
.network-stage{
  min-height:620px!important;padding:24px!important;border:1px solid var(--line2)!important;
  border-radius:0!important;
  background-image:
    linear-gradient(rgba(255,255,255,.008) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.008) 1px,transparent 1px),
    linear-gradient(180deg,rgba(8,25,20,.95),rgba(5,16,13,.98))!important;
  background-size:28px 28px,28px 28px,100% 100%!important;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))!important;
  box-shadow:0 32px 90px rgba(0,0,0,.34)!important;
  position:relative!important;overflow:hidden!important
}
.network-stage:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 0 45%,rgba(126,247,196,.025) 52%,transparent 59%);
  transform:translateX(-80%);animation:panelSweep 9s ease-in-out infinite;pointer-events:none
}
@keyframes panelSweep{50%,100%{transform:translateX(90%)}}
.network-stage:after{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,rgba(126,247,196,.045) 45%,rgba(105,216,255,.028) 50%,rgba(155,140,255,.04) 55%,transparent 80%);
  transform:translateX(-130%);animation:sbSweep 10s ease-in-out infinite
}
@keyframes sbSweep{45%,100%{transform:translateX(130%)}}
.network-stage .stage-core img{
  filter:drop-shadow(0 0 22px rgba(126,247,196,.12)) drop-shadow(0 12px 28px rgba(0,0,0,.36));
  animation:sbMarkFloat3D 8s ease-in-out infinite
}
@keyframes sbMarkFloat3D{
  0%,100%{transform:rotateX(0deg) rotateY(0deg) scale(1)}
  50%{transform:translateY(-5px) rotateX(3deg) rotateY(-4deg) scale(1.02)}
}
.network-stage .wire path{
  stroke-dasharray:7 12;animation:sbDash 14s linear infinite
}
.network-stage .wire path:nth-child(2){animation-duration:19s;animation-direction:reverse}
.network-stage .wire path:nth-child(3){animation-duration:23s}
.network-stage .wire path:nth-child(4){animation-duration:27s;animation-direction:reverse}

/* Scrolling interoperability rail copied toward source protocol strip restraint. */
.ecosystem-marquee{
  padding:30px 0 34px!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;
  background:rgba(255,255,255,.006)!important
}
.marquee-window{background:none!important;border:0!important}
.platform-chip{
  min-width:170px!important;padding:12px 14px!important;border:1px solid var(--line)!important;
  border-radius:0!important;background:rgba(255,255,255,.012)!important;box-shadow:none!important;
  clip-path:none!important
}
.marquee-track{animation:ecosystemScroll 36s linear infinite!important}

/* Simple section: exact visual vocabulary of the original three-step design. */
.analogy-panel{
  border:1px solid var(--line2)!important;border-radius:0!important;
  background:
    linear-gradient(rgba(255,255,255,.008) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.008) 1px,transparent 1px),
    rgba(7,22,17,.76)!important;
  background-size:28px 28px,28px 28px,auto!important;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))!important;
  box-shadow:none!important
}
.analogy-flow article{
  border-radius:0!important;border:1px solid var(--line)!important;
  background:rgba(255,255,255,.010)!important
}
.analogy-flow .core{border-color:rgba(126,247,196,.24)!important;background:rgba(126,247,196,.02)!important}
.analogy-result,.simple-rule{
  border-radius:0!important;border:1px solid rgba(126,247,196,.20)!important;
  background:rgba(126,247,196,.022)!important
}
.three-steps{grid-template-columns:1fr 56px 1fr 56px 1fr!important;gap:8px!important}
.three-steps article{
  min-height:290px!important;padding:22px!important;border:1px solid var(--line)!important;border-radius:0!important;
  background:linear-gradient(150deg,rgba(255,255,255,.018),rgba(255,255,255,.006))!important;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))!important;
  box-shadow:none!important;position:relative!important;overflow:hidden
}
.three-steps article>span{
  width:42px!important;height:42px!important;display:grid!important;place-items:center!important;
  border:1px solid var(--line2)!important;background:none!important;color:var(--mint)!important
}
.three-steps article h3{margin:22px 0 9px!important;font-size:25px!important;letter-spacing:-.035em!important}
.three-steps article p{font-size:11px!important}
.three-steps article:after,.flow-card:after,.payment-flow article:after,.architecture-layers>div:after{
  content:"";position:absolute;left:-30%;bottom:0;width:30%;height:1px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  animation:sbCellPulse 5.5s linear infinite
}
@keyframes sbCellPulse{to{transform:translateX(440%)}}

/* Concrete example becomes the source example-console rather than a generic card. */
.story{
  margin-top:48px!important;padding:26px!important;border:1px solid var(--line2)!important;border-radius:0!important;
  background-image:
    linear-gradient(rgba(255,255,255,.008) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.008) 1px,transparent 1px),
    linear-gradient(180deg,rgba(7,22,17,.76),rgba(5,16,13,.90))!important;
  background-size:28px 28px,28px 28px,100% 100%!important;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025)!important
}
.story-request,.story-track article,.story-result>div{
  border-radius:0!important;border:1px solid var(--line)!important;background:rgba(255,255,255,.010)!important
}
.story-track article{min-height:150px!important;box-shadow:none!important;clip-path:none!important}
.story-track article strong{margin-top:38px!important;font-size:11px!important}
.story-track article small{font-size:8px!important}
.story-track>i{
  height:1px!important;background:linear-gradient(90deg,transparent,var(--mint),transparent)!important;
  background-size:200% 100%!important;animation:sbConnector 2.8s linear infinite
}
@keyframes sbConnector{to{background-position:-200% 0}}
.story-result>div:last-child{border-color:rgba(126,247,196,.22)!important;background:rgba(126,247,196,.022)!important}

/* General model cards stay restrained, with negative space and state color. */
.flow{gap:10px!important}
.flow-card{
  min-height:285px!important;padding:24px!important;border:1px solid var(--line)!important;border-radius:0!important;
  background:rgba(255,255,255,.010)!important;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))!important;
  box-shadow:none!important;position:relative!important;overflow:hidden!important
}
.flow-card h3{margin:66px 0 9px!important;font-size:27px!important;letter-spacing:-.04em!important}
.flow-card p{font-size:11px!important}
.flow-card:hover{
  transform:translateY(-5px) scale(1.004)!important;
  box-shadow:0 24px 56px rgba(0,0,0,.22)!important;
  background-image:radial-gradient(circle at var(--hx-card,50%) var(--hy-card,50%),rgba(126,247,196,.06),transparent 45%)!important
}

/* Contract / PCC pair becomes signature-card quality. */
.card{
  border-radius:0!important;border:1px solid var(--line)!important;
  background:linear-gradient(150deg,rgba(255,255,255,.018),rgba(255,255,255,.005))!important;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))!important;
  box-shadow:none!important
}
.contract-card,.proof-card{min-height:420px!important;position:relative!important;overflow:hidden!important}
.contract-card:before,.proof-card:before{
  content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-150px;bottom:-150px;
  filter:blur(36px);opacity:.09;pointer-events:none
}
.contract-card:before{background:var(--mint)}
.proof-card:before{background:var(--cyan)}
.contract-lines,.contract-row,.pcc-layer{
  border-radius:0!important;border-color:var(--line)!important;background:rgba(255,255,255,.009)!important
}
.pcc-layer:last-child{border-color:rgba(105,216,255,.20)!important;background:rgba(105,216,255,.016)!important}

/* Standards, use cases, trust, utilities and roadmap copy the source's flat cards,
   deliberately avoiding identical "instrument" decoration everywhere. */
.standard-badge,.problem-grid article,.usecase-grid article,.architecture-badges article,
.horizon-badges article,.trust-grid article,.utility,.rail-grid article,.roadmap-grid article,.protocol-card{
  border-radius:0!important;border:1px solid var(--line)!important;
  background:rgba(255,255,255,.009)!important;box-shadow:none!important;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))!important
}
.standard-badge:hover,.problem-grid article:hover,.usecase-grid article:hover,.architecture-badges article:hover,
.horizon-badges article:hover,.trust-grid article:hover,.utility:hover,.rail-grid article:hover,.roadmap-grid article:hover,.protocol-card:hover{
  transform:translateY(-5px) scale(1.004)!important;box-shadow:0 24px 56px rgba(0,0,0,.22)!important;
  background-image:radial-gradient(circle at var(--hx-card,50%) var(--hy-card,50%),rgba(126,247,196,.06),transparent 45%)!important
}
.standard-mark,.protocol-card .glyph,.meta div,.neq-row span,.architecture-layers>div{
  border-radius:0!important
}

/* Architecture gets the source's layered-system visual rhythm. */
.architecture-deep{overflow:clip}
.architecture-badges article[data-state="core"]{border-color:rgba(126,247,196,.20)!important}
.architecture-badges article[data-state="design"]{border-color:rgba(105,216,255,.17)!important}
.architecture-badges article[data-state="road"]{border-color:rgba(155,140,255,.17)!important}
.architecture-layers{
  position:relative!important;padding:28px!important;border:1px solid var(--line2)!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(126,247,196,.040),transparent 24%),
    radial-gradient(circle at 50% 50%,rgba(155,140,255,.022),transparent 52%),
    rgba(4,16,13,.68)!important;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))!important;
  overflow:hidden!important
}
.architecture-layers:before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(126,247,196,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(126,247,196,.025) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(circle,#000,transparent 72%);pointer-events:none
}
.architecture-layers>div{
  position:relative!important;z-index:2!important;border:1px solid var(--line)!important;background:rgba(7,22,18,.92)!important
}
.architecture-layers .siteborne{
  border-color:rgba(126,247,196,.28)!important;background:#071813!important;
  box-shadow:0 0 40px rgba(126,247,196,.025)!important
}
.architecture-layers>i{
  position:relative;z-index:2;height:18px!important;color:var(--mint)!important;
  animation:sbNodeFloat 4.5s ease-in-out infinite
}
@keyframes sbNodeFloat{50%{transform:translateY(-5px)}}

/* Boundary rows and economics retain source semantics. */
.neq-row span{border:1px solid var(--line)!important;background:rgba(255,255,255,.009)!important}
.payment-flow article{
  min-height:130px!important;padding:14px!important;border:1px solid var(--line)!important;
  border-radius:0!important;background:rgba(255,255,255,.009)!important;box-shadow:none!important;
  position:relative!important;overflow:hidden!important
}
.payment-flow>i{
  height:1px!important;background:linear-gradient(90deg,transparent,var(--amber),transparent)!important;
  background-size:200% 100%!important;animation:sbConnector 2.8s linear infinite
}

/* Developer surface copies the reference code window exactly. */
.devbox{
  border-radius:0!important;border:1px solid var(--line2)!important;background:#04100C!important;
  box-shadow:0 26px 80px rgba(0,0,0,.34)!important;position:relative!important;overflow:hidden!important;
  clip-path:none!important
}
.devtop{
  min-height:50px!important;border-radius:0!important;border-bottom:1px solid var(--line)!important;
  background:rgba(255,255,255,.009)!important
}
.tabs button{border-radius:0!important}
.code{
  background:#04100C!important;
  font:11px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace!important
}
.devbox:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,rgba(126,247,196,.025) 48%,rgba(105,216,255,.018) 52%,transparent 80%);
  transform:translateX(-130%);animation:sbSweep 12s ease-in-out infinite
}

/* FAQ source is an editorial disclosure list, not cards. */
.faq-list{gap:0!important;border-top:1px solid var(--line)!important}
.faq-list details{
  border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;clip-path:none!important
}
.faq-list summary{
  min-height:72px!important;padding:0!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;font-size:14px!important;font-weight:760!important
}
.faq-list summary::marker{color:var(--mint)}
.faq-list details p{padding:0 0 22px!important}

/* Final CTA maps to original CTA composition/surface. */
.launch-card{
  min-height:340px!important;padding:40px!important;border:1px solid rgba(126,247,196,.20)!important;border-radius:0!important;
  background:linear-gradient(135deg,rgba(126,247,196,.035),rgba(105,216,255,.012) 45%,rgba(155,140,255,.025))!important;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))!important;
  box-shadow:none!important;position:relative!important;overflow:hidden!important
}
.launch-card:after{
  content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-160px;top:-240px;
  background:conic-gradient(var(--mint),var(--cyan),var(--violet),transparent 70%);
  opacity:.08;filter:blur(40px);pointer-events:none
}

/* Footer. */
footer{position:relative;background:transparent!important}
footer:before{
  content:"";position:absolute;left:50%;top:-1px;width:60%;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--mint),var(--cyan),var(--violet),transparent);opacity:.38
}
.footer-brand img{height:30px!important;width:auto!important}

/* Exact high-quality pointer/tilt/magnetic behavior. */
[data-tilt]{
  transform-style:preserve-3d;
  transition:transform .32s var(--ease),border-color .28s,box-shadow .28s
}
[data-tilt].sb-tilting{
  transition:transform .08s linear,border-color .28s,box-shadow .28s;
  border-color:rgba(126,247,196,.28)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.28),0 0 0 1px rgba(126,247,196,.025) inset!important
}
[data-magnetic],[data-magnetic-soft]{will-change:transform}
[data-magnetic]{transition:transform .16s var(--ease),box-shadow .2s,border-color .2s}
[data-magnetic].sb-magnetic-active{
  box-shadow:0 18px 46px rgba(126,247,196,.12),0 0 0 1px rgba(126,247,196,.12) inset!important
}

/* Subpages inherit the same production finish. */
.page-hero{
  position:relative!important;padding:112px 0 84px!important;overflow:clip!important
}
.page-hero:after{
  content:"";position:absolute;left:50%;top:5%;width:54vw;height:54vw;max-width:760px;max-height:760px;
  transform:translate(-50%,-50%) rotate(calc(var(--sb-scroll)*.06deg));
  border-radius:50%;background:conic-gradient(from 0deg,rgba(126,247,196,.04),rgba(105,216,255,.025),rgba(155,140,255,.035),transparent 65%);
  filter:blur(48px);pointer-events:none;z-index:-1
}
.page-hero h1{font-size:clamp(50px,6.2vw,88px)!important;line-height:.94!important;letter-spacing:-.065em!important}
.page-hero p{color:var(--muted)!important;font-size:18px!important}
.page-hero+.section{padding-top:80px!important}

/* Motion starts after first paint. */
html:not(.sb-motion-ready) .sb-route-path,
html:not(.sb-motion-ready) .sb-contract-pulse span,
html:not(.sb-motion-ready) .marquee-track,
html:not(.sb-motion-ready) .network-stage:before,
html:not(.sb-motion-ready) .network-stage:after,
html:not(.sb-motion-ready) .hero h1 span,
html:not(.sb-motion-ready) .button.primary:before,
html:not(.sb-motion-ready) .three-steps article:after,
html:not(.sb-motion-ready) .flow-card:after,
html:not(.sb-motion-ready) .payment-flow article:after{
  animation-play-state:paused!important
}

@media(max-width:1100px){
  .three-steps{grid-template-columns:1fr!important}
  .three-steps article{min-height:230px!important}
}
@media(max-width:900px){
  .sb-section-rail{display:none}
  #sb-live-network{opacity:.46}
  .sb-contract-pulse{opacity:.55}
}
@media(max-width:760px){
  .section{padding:84px 0!important}
  .hero{min-height:auto!important;padding-top:82px!important}
  .hero h1{font-size:clamp(50px,15vw,78px)!important}
  .hero-layout{grid-template-columns:1fr!important}
  .network-stage{min-height:520px!important}
  .sb-contract-pulse{display:none}
  #sb-live-network{opacity:.32}
  .navlinks{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sb-route-field,.sb-cursor-aura,.sb-section-rail,#sb-live-network,.sb-contract-pulse{display:none!important}
  [data-tilt],[data-magnetic],[data-magnetic-soft]{transform:none!important}
  .hero h1 span,.network-stage:before,.network-stage:after,.button.primary:before,
  .three-steps article:after,.flow-card:after,.payment-flow article:after,.architecture-layers>i{
    animation:none!important
  }
  .reveal{filter:none!important;transform:none!important;opacity:1!important}
}
@media(prefers-contrast:more){
  :root{--muted:#C9D9D3;--muted2:#A7B9B2;--line:rgba(230,255,246,.28);--line2:rgba(230,255,246,.48)}
}



/* ================================================================
   LOAD-STABILITY + RENDER-COST FIX
   Derived from the supplied loading-optimized SITEBORNE reference.
   ================================================================ */

/* Content is visible without JS; JS only opts into reveal choreography. */
.reveal{opacity:1;transform:none}
html.has-reveal .reveal{opacity:0;transform:translateY(18px)}
html.has-reveal .reveal.in{opacity:1;transform:none}

/* Do not render the entire 20k+ px page before it is needed. */
main > section:not(.hero):not(.page-hero){
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* Expensive visual surfaces are isolated from global paint/layout invalidation. */
.network-stage,
.analogy-panel,
.story,
.contract-card,
.proof-card,
.architecture-layers,
.devbox,
.launch-card,
footer,
.error-card{
  contain:layout paint style;
}

/* Grid modules can resolve layout without forcing unrelated sections. */
.standard-grid,
.problem-grid,
.usecase-grid,
.flow,
.architecture-badges,
.horizon-badges,
.trust-grid,
.utility-grid,
.rail-grid,
.roadmap-grid{
  contain:layout style;
}

/* Promote transforms only while actively interacting. */
[data-tilt]:not(.sb-tilting){will-change:auto}
[data-tilt].sb-tilting{will-change:transform}

/* Keep expensive decorative motion paused until usable content has painted. */
html:not(.sb-motion-ready) .sb-route-path,
html:not(.sb-motion-ready) .sb-contract-pulse span,
html:not(.sb-motion-ready) .marquee-track,
html:not(.sb-motion-ready) .network-stage:before,
html:not(.sb-motion-ready) .network-stage:after,
html:not(.sb-motion-ready) .hero h1 span,
html:not(.sb-motion-ready) .button.primary:before{
  animation-play-state:paused!important;
}

/* Canvas starts transparent; once sized there is no 300px default-canvas flash. */
#sb-live-network{opacity:0}
html.sb-network-ready #sb-live-network{opacity:.60;transition:opacity .35s ease}
@media(max-width:900px){html.sb-network-ready #sb-live-network{opacity:.46}}
@media(max-width:620px){html.sb-network-ready #sb-live-network{opacity:.32}}


/* ================================================================
   SITEBORNE VISUAL QA PASS — 2026-09-21
   Public-safe, brand-governed UI refinement. No content removed.
   ================================================================ */

:root{
  --muted2:#81958D;
  --focus-ring:rgba(105,216,255,.92);
  --hairline:rgba(222,255,243,.105);
  --hairline-strong:rgba(222,255,243,.21);
}

/* Preserve the canonical artwork itself. Effects belong to the field around it. */
.brand img,
.footer-brand img,
.stage-core,
.stage-core img,
.statement .mark{
  filter:none!important;
}

/* The full lockup remains legible at its intended digital size. */
header .brand{min-width:220px!important}
header .brand img{width:220px!important;height:auto!important}
.footer-brand img{width:min(280px,100%)!important;height:auto!important}

/* Navigation and interaction geometry. */
.nav{gap:22px!important}
.navlinks{gap:19px!important}
.navlinks a{position:relative}
.menu{position:relative}
.menu::before,
.menu::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:1px;
  background:var(--text);transform-origin:center
}
.menu::before{transform:translate(-50%,-5px)}
.menu::after{transform:translate(-50%,5px)}
.menu[aria-expanded="true"]::before{transform:translate(-50%,0) rotate(45deg)}
.menu[aria-expanded="true"]::after{transform:translate(-50%,0) rotate(-45deg)}
.button:focus-visible,
.audience-switch button:focus-visible,
.tabs button:focus-visible,
.menu:focus-visible{
  outline:2px solid var(--focus-ring)!important;
  outline-offset:3px!important;
}

/* A restrained technical frame replaces decorative excess. */
body.premium-page::before,
body.premium-page::after{
  content:"";position:fixed;z-index:2;top:72px;bottom:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(126,247,196,.13) 18%,rgba(105,216,255,.08) 52%,rgba(155,140,255,.09) 82%,transparent);
  opacity:.55
}
body.premium-page::before{left:22px}
body.premium-page::after{right:22px}

/* Section signatures: index + semantic three-color calibration mark. */
.section-head{position:relative;padding-right:108px}
.section-head[data-sb-index]::before{
  content:attr(data-sb-index);
  position:absolute;right:0;top:-8px;
  color:rgba(247,251,249,.105);
  font:750 42px/.9 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:-.08em;
  font-variant-numeric:tabular-nums;
  pointer-events:none
}
.section-head::after{
  content:"";display:block;width:66px;height:2px;margin-top:24px;
  background:
    linear-gradient(90deg,
      var(--mint) 0 29%,
      transparent 29% 35%,
      var(--cyan) 35% 64%,
      transparent 64% 70%,
      var(--violet) 70% 100%);
  opacity:.78
}

/* Primary visual panels get precise registration corners, not extra cards. */
.sb-panel-corners{
  position:absolute;z-index:8;inset:9px;pointer-events:none;opacity:.36;
  background:
    linear-gradient(var(--mint),var(--mint)) left top/16px 1px no-repeat,
    linear-gradient(var(--mint),var(--mint)) left top/1px 16px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right top/16px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right top/1px 16px no-repeat,
    linear-gradient(var(--violet),var(--violet)) left bottom/16px 1px no-repeat,
    linear-gradient(var(--violet),var(--violet)) left bottom/1px 16px no-repeat,
    linear-gradient(var(--mint),var(--mint)) right bottom/16px 1px no-repeat,
    linear-gradient(var(--mint),var(--mint)) right bottom/1px 16px no-repeat
}
.network-stage>.sb-panel-corners{inset:10px}
.launch-card>.sb-panel-corners{opacity:.28}

/* Hero polish: stronger hierarchy, quieter decoration, clearer semantic core. */
.hero-copy .badge{
  border-color:rgba(126,247,196,.18)!important;
  background:rgba(126,247,196,.018)!important
}
.hero-lede{max-width:720px!important}
.network-stage{
  border-color:rgba(222,255,243,.22)!important;
  box-shadow:0 34px 92px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.015)!important
}
.network-stage .stage-core{
  background:radial-gradient(circle,rgba(126,247,196,.11),rgba(105,216,255,.035) 44%,transparent 68%);
}
.network-stage .stage-core img{
  animation:sbMarkFloat3D 8s ease-in-out infinite;
  filter:none!important
}
.stage-top,.stage-foot{z-index:4}
.proto{z-index:4}

/* Card hierarchy is clearer without adding another decorative layer. */
.standard-badge,
.problem-grid article,
.usecase-grid article,
.architecture-badges article,
.horizon-badges article,
.trust-grid article,
.utility,
.rail-grid article,
.roadmap-grid article,
.protocol-card,
.flow-card,
.three-steps article{
  transition:transform .26s var(--ease),border-color .26s,background-color .26s,box-shadow .26s!important
}
.standard-badge:hover,
.problem-grid article:hover,
.usecase-grid article:hover,
.architecture-badges article:hover,
.horizon-badges article:hover,
.trust-grid article:hover,
.utility:hover,
.rail-grid article:hover,
.roadmap-grid article:hover,
.protocol-card:hover,
.flow-card:hover{
  border-color:rgba(126,247,196,.21)!important
}
.meta div{
  background:rgba(255,255,255,.008);
  border-color:var(--hairline)!important
}

/* Improve small-label legibility and preserve strong content contrast. */
.kicker,.crumb,.flow-num,.stage-top,.stage-foot,.platform-chip small,
.standard-badge em,.meta span,.pcc-layer span,.contract-note{
  text-rendering:geometricPrecision
}
.proofline span,.status-legend span,.platform-chip small{color:var(--muted2)!important}

/* Footer finishes the identity system with the same restrained chromatic register. */
footer .footer-grid{position:relative}
footer .footer-grid::after{
  content:"";position:absolute;right:0;top:3px;width:92px;height:3px;
  background:linear-gradient(90deg,var(--mint) 0 25%,var(--cyan) 25% 50%,var(--violet) 50% 75%,var(--amber) 75%);
  opacity:.62
}

/* Responsive refinement. */
@media(max-width:1180px){
  header .brand{min-width:190px!important}
  header .brand img{width:190px!important}
  .navlinks{gap:15px!important}
}
@media(max-width:1040px){
  header .brand{min-width:200px!important}
  header .brand img{width:200px!important}
}
@media(max-width:760px){
  body.premium-page::before,body.premium-page::after{display:none}
  .section-head{padding-right:0}
  .section-head[data-sb-index]::before{display:none}
  .section-head::after{margin-top:18px}
  header .brand{min-width:184px!important}
  header .brand img{width:184px!important}
  .footer-brand img{width:min(250px,100%)!important}
  .sb-panel-corners{inset:7px;opacity:.26}
}
@media(prefers-reduced-motion:reduce){
  .network-stage .stage-core img{animation:none!important}
}


/* ================================================================
   REFERENCE VISUAL ACCENT INTEGRATION — 2026-09-21
   Decorative only: no copy, semantics, routes, or controls changed.
   Motifs: calibration rail, clipped technical frames, signal nodes,
   connector traces, compact symbolic iconography, and grid backplanes.
   ================================================================ */

:root{
  --sb-ref-grid:rgba(126,247,196,.018);
  --sb-ref-grid-strong:rgba(126,247,196,.030);
  --sb-ref-trace:rgba(126,247,196,.34);
  --sb-ref-trace-cyan:rgba(105,216,255,.34);
  --sb-ref-trace-violet:rgba(155,140,255,.30);
  --sb-ref-glow:0 0 9px rgba(126,247,196,.58),0 0 24px rgba(126,247,196,.16);
}

/* Header calibration rail: additive, thin, and intentionally secondary. */
header .nav{position:relative}
header .nav::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(222,255,243,.11) 0 24%,
      transparent 24% 24.12%,
      rgba(222,255,243,.11) 24.12% 49.8%,
      transparent 49.8% 49.92%,
      rgba(222,255,243,.11) 49.92% 75.4%,
      transparent 75.4% 75.52%,
      rgba(222,255,243,.11) 75.52% 100%);
  opacity:.34
}
header .nav::after{
  content:"";position:absolute;left:0;bottom:-2px;width:min(46%,560px);height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--mint),var(--cyan) 56%,var(--violet));
  opacity:.74;
  -webkit-mask-image:linear-gradient(90deg,#000 0 82%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 82%,transparent 100%)
}

/* Technical surfaces gain the same quiet graph-paper backplane as the references. */
.analogy-panel,
.story,
.architecture-layers,
.devbox,
.network-stage{
  background-blend-mode:normal
}
.analogy-panel,
.story{
  position:relative!important
}
.analogy-panel::before,
.story::before{
  content:"";position:absolute;inset:12px;pointer-events:none;z-index:0;
  border:1px solid rgba(126,247,196,.075);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))
}
.analogy-panel>*,
.story>*{position:relative;z-index:1}

/* Governed/signal state is represented by a non-semantic luminous node. */
.story::after,
.analogy-panel::after{
  content:"";position:absolute;right:25px;top:22px;z-index:3;width:7px;height:7px;border-radius:50%;
  background:var(--mint);box-shadow:var(--sb-ref-glow);pointer-events:none
}
.analogy-panel::after{top:25px;right:27px;opacity:.62}

/* Three-step explainer: equal card geometry + trace rail, without replacing content. */
.three-steps{
  position:relative!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  isolation:isolate
}
.three-steps::before{
  content:"";position:absolute;z-index:0;left:12%;right:12%;top:50%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sb-ref-trace) 18%,var(--sb-ref-trace-cyan) 50%,var(--sb-ref-trace) 82%,transparent)
}
.three-steps article{
  z-index:1;
  min-width:0
}
.three-steps article::before{
  content:"◇";position:absolute;right:22px;top:22px;width:44px;height:44px;
  display:grid;place-items:center;border:1px solid rgba(214,255,239,.19);
  color:var(--mint);background:rgba(4,16,13,.66);
  font:700 19px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.008);
  pointer-events:none
}
.three-steps article:nth-child(2)::before{content:"≡";color:var(--violet)}
.three-steps article:nth-child(3)::before{content:"✓";color:var(--cyan);font-size:20px}
.three-steps article>span{
  position:relative;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.008)
}

/* The story flow gets instrument-style signal traces and bottom edge activity. */
.story-track{position:relative}
.story-track::before{
  content:"";position:absolute;left:5%;right:5%;top:50%;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(126,247,196,.17) 12%,rgba(105,216,255,.13) 50%,rgba(126,247,196,.17) 88%,transparent)
}
.story-track article{position:relative!important;z-index:1!important;overflow:hidden}
.story-track article::before{
  content:"";position:absolute;left:12px;top:12px;width:4px;height:4px;border-radius:50%;
  background:rgba(126,247,196,.65);box-shadow:0 0 12px rgba(126,247,196,.22);pointer-events:none
}
.story-track article::after{
  content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--mint),var(--cyan),transparent);
  opacity:.58;filter:drop-shadow(0 0 5px rgba(126,247,196,.35))
}
.story-result{
  position:relative
}
.story-result::before{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--mint);box-shadow:var(--sb-ref-glow);
  opacity:.72;pointer-events:none
}

/* Model cards read as nodes on one shared execution rail. */
.flow{
  position:relative!important;
  padding-top:24px;
  isolation:isolate
}
.flow::before{
  content:"";position:absolute;left:2%;right:2%;top:8px;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    transparent,
    rgba(126,247,196,.40) 10%,
    rgba(105,216,255,.38) 45%,
    rgba(155,140,255,.34) 76%,
    rgba(255,200,106,.28) 92%,
    transparent)
}
.flow-card{z-index:1}
.flow-card .flow-num{position:relative;display:inline-flex;align-items:center;gap:9px}
.flow-card .flow-num::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:0 0 6px;
  background:currentColor;box-shadow:0 0 12px currentColor;opacity:.86
}
.flow-card[data-tone="mint"] .flow-num{color:var(--mint)!important}
.flow-card[data-tone="cyan"] .flow-num{color:var(--cyan)!important}
.flow-card[data-tone="violet"] .flow-num{color:var(--violet)!important}
.flow-card[data-tone="amber"] .flow-num{color:var(--amber)!important}

/* Architecture matrix: a single shared backplane, with cards remaining the content. */
.architecture-badges{
  position:relative!important;
  padding:22px!important;
  border:1px solid rgba(214,255,239,.085);
  background:
    linear-gradient(var(--sb-ref-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--sb-ref-grid) 1px,transparent 1px),
    rgba(4,16,13,.16);
  background-size:38px 38px,38px 38px,auto;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  isolation:isolate
}
.architecture-badges::before{
  content:"";position:absolute;z-index:0;left:4%;right:4%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(126,247,196,.14),rgba(105,216,255,.12),rgba(155,140,255,.12),transparent);
  pointer-events:none
}
.architecture-badges::after{
  content:"";position:absolute;z-index:0;top:6%;bottom:6%;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(105,216,255,.09),rgba(126,247,196,.12),transparent);
  pointer-events:none
}
.architecture-badges article{z-index:1}
.architecture-badges article::before{
  content:"";position:absolute;left:-1px;top:22%;bottom:22%;width:2px;
  background:linear-gradient(180deg,transparent,var(--mint),transparent);
  opacity:.62;pointer-events:none
}
.architecture-badges article[data-state="design"]::before{background:linear-gradient(180deg,transparent,var(--cyan),transparent)}
.architecture-badges article[data-state="road"]::before{background:linear-gradient(180deg,transparent,var(--violet),transparent)}

/* Layer stack gets the vertical signal drops seen in the routing reference. */
.architecture-layers>div::before{
  content:"";position:absolute;left:50%;top:-11px;width:1px;height:10px;
  background:linear-gradient(180deg,transparent,rgba(105,216,255,.54));
  box-shadow:0 8px 8px rgba(105,216,255,.12);pointer-events:none
}
.architecture-layers>div:first-of-type::before{display:none}

/* Protocol/standard icon boxes use one coherent technical treatment. */
.protocol-card .glyph,
.standard-mark,
.arch-code{
  position:relative;
  background:
    linear-gradient(rgba(126,247,196,.018),rgba(126,247,196,.018)),
    rgba(4,16,13,.56)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.008)
}
.protocol-card .glyph::after,
.standard-mark::after,
.arch-code::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.42;pointer-events:none
}

/* Code windows inherit the same restrained terminal chrome as the source reference. */
.devtop{position:relative}
.devtop::after{
  content:"";position:absolute;left:24%;right:24%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(105,216,255,.22),rgba(126,247,196,.22),transparent);
  pointer-events:none
}
.devbox .code{
  background-image:
    linear-gradient(rgba(126,247,196,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.010) 1px,transparent 1px);
  background-size:32px 32px;
  background-position:-1px -1px
}

/* Result/contract cards receive subtle illuminated edge registration, not new content. */
.contract-card::after,
.proof-card::after{
  content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  opacity:.42;pointer-events:none
}
.proof-card::after{background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent)}

/* Small status chips and proof tokens share the same square, instrument-like geometry. */
.proofline span,
.status-legend span{
  border-radius:0!important;
  background:rgba(4,16,13,.52)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.006)
}

/* Responsive: accents reflow rather than creating extra width. */
@media(max-width:1100px){
  .three-steps{grid-template-columns:1fr!important;gap:12px!important}
  .three-steps::before{left:32px;right:auto;top:8%;bottom:8%;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,var(--sb-ref-trace),var(--sb-ref-trace-cyan),transparent)}
  .flow{padding-top:0}
  .flow::before{display:none}
  .architecture-badges{padding:14px!important}
}
@media(max-width:760px){
  header .nav::after{width:42%;opacity:.52}
  .analogy-panel::before,.story::before{inset:7px}
  .story::after,.analogy-panel::after{right:14px;top:14px;width:6px;height:6px}
  .three-steps article::before{right:16px;top:16px;width:38px;height:38px;font-size:16px}
  .architecture-badges{padding:8px!important;background-size:28px 28px,28px 28px,auto}
  .architecture-badges::before,.architecture-badges::after{display:none}
  .story-track::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .story-track article::after{filter:none}
}
@media print{
  header .nav::before,header .nav::after,
  .analogy-panel::before,.analogy-panel::after,
  .story::before,.story::after,.story-track::before,.story-track article::before,.story-track article::after,
  .three-steps::before,.three-steps article::before,.flow::before,
  .architecture-badges::before,.architecture-badges::after,.architecture-badges article::before,
  .architecture-layers>div::before,.devtop::after,.contract-card::after,.proof-card::after{display:none!important}
}


/* Payment/provider-style cards inherit the reference's replaceable-path edge rail. */
.rail-grid article{position:relative!important;overflow:hidden}
.rail-grid article::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--cyan),var(--mint));
  opacity:.66;pointer-events:none
}
.rail-grid article:nth-child(2)::before{background:linear-gradient(180deg,var(--violet),var(--cyan))}
.rail-grid article:nth-child(3)::before{background:linear-gradient(180deg,var(--muted2),var(--cyan));opacity:.42}

/* Technical-evaluator pair: terminal-like chrome is added to the machine-discovery card only. */
.technical-safe .grid-2>.card{position:relative!important}
.technical-safe .grid-2>.card:first-child::after{
  content:"";position:absolute;left:28px;right:28px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--mint),var(--cyan),transparent);
  opacity:.36;pointer-events:none
}
.technical-safe .grid-2>.card:nth-child(2){padding-top:72px!important;overflow:hidden}
.technical-safe .grid-2>.card:nth-child(2)::before{
  content:"";position:absolute;left:0;right:0;top:0;height:44px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 24px 22px,rgba(214,255,239,.25) 0 3px,transparent 3.5px),
    radial-gradient(circle at 38px 22px,rgba(214,255,239,.18) 0 3px,transparent 3.5px),
    radial-gradient(circle at 52px 22px,rgba(214,255,239,.14) 0 3px,transparent 3.5px),
    linear-gradient(90deg,rgba(255,255,255,.010),rgba(126,247,196,.010),rgba(105,216,255,.008));
  pointer-events:none
}
.technical-safe .feature-badges span{
  border-radius:0!important;background:rgba(4,16,13,.46)!important
}
@media(max-width:760px){
  .technical-safe .grid-2>.card:nth-child(2){padding-top:64px!important}
}
@media print{
  .rail-grid article::before,
  .technical-safe .grid-2>.card:first-child::after,
  .technical-safe .grid-2>.card:nth-child(2)::before{display:none!important}
}


/* ================================================================
   SEMANTIC POLISH + UX CORRECTIONS — 2026-09-21
   Explicitly requested corrections plus additive three-surface context.
   ================================================================ */

/* The chromatic bar beneath navigation is now functional scroll progress,
   rather than an arbitrary fixed-length accent. */
header .nav::after{display:none!important}
header .nav::before{
  opacity:.48!important;
  background:linear-gradient(90deg,
    rgba(222,255,243,.10) 0 24%,
    transparent 24% 24.12%,
    rgba(222,255,243,.10) 24.12% 49.8%,
    transparent 49.8% 49.92%,
    rgba(222,255,243,.10) 49.92% 75.4%,
    transparent 75.4% 75.52%,
    rgba(222,255,243,.10) 75.52% 100%)!important
}
.progress{
  top:71px!important;left:0!important;right:auto!important;height:2px!important;
  background:linear-gradient(90deg,var(--mint) 0%,var(--cyan) 48%,var(--violet) 76%,var(--amber) 100%)!important;
  box-shadow:0 0 15px rgba(105,216,255,.28)!important;
  transition:width .08s linear;
  pointer-events:none
}

/* Continuous ticker: offset now matches the actual 12px inter-set gap.
   translate3d + isolation prevents the subpixel jump at the loop seam. */
.marquee-track{
  gap:12px!important;
  animation-name:ecosystemScrollStable!important;
  animation-timing-function:linear!important;
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
  contain:layout paint
}
@keyframes ecosystemScrollStable{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - 6px),0,0)}
}

/* Connector cleanup: no decorative rule runs through content boxes.
   Where sequence matters, connectors live only in the physical gap. */
.three-steps::before,
.story-track::before,
.flow::before{display:none!important}

.three-steps article{position:relative!important}
.three-steps article:not(:last-child)::after{
  content:"";position:absolute;z-index:0;top:50%;left:100%;width:18px;height:1px;
  background:linear-gradient(90deg,rgba(126,247,196,.48),rgba(105,216,255,.36));
  opacity:.72;pointer-events:none
}
.story-track i{
  width:18px!important;height:1px!important;display:block!important;
  background:linear-gradient(90deg,rgba(126,247,196,.42),rgba(105,216,255,.34))!important;
  opacity:.76!important
}

/* All five model cards now share the same visual treatment.
   Color identifies the semantic phase; geometry/effects stay equal. */
.flow-card[data-tone="mint"]{--flow-accent:var(--mint);--flow-halo:rgba(126,247,196,.075)}
.flow-card[data-tone="cyan"]{--flow-accent:var(--cyan);--flow-halo:rgba(105,216,255,.075)}
.flow-card[data-tone="violet"]{--flow-accent:var(--violet);--flow-halo:rgba(155,140,255,.075)}
.flow-card[data-tone="amber"]{--flow-accent:var(--amber);--flow-halo:rgba(255,200,106,.075)}
.flow-card::before{
  left:22px!important;right:22px!important;top:0!important;height:1px!important;
  background:linear-gradient(90deg,transparent,var(--flow-accent,var(--mint)),transparent)!important;
  opacity:.24!important
}
.flow-card::after,
.flow-card:last-child::after{
  content:""!important;display:block!important;position:absolute!important;
  left:22px!important;right:22px!important;top:auto!important;bottom:0!important;
  width:auto!important;height:1px!important;
  background:linear-gradient(90deg,transparent,var(--flow-accent,var(--mint)),transparent)!important;
  opacity:.46!important;pointer-events:none!important
}
.flow-card:hover{
  background-image:radial-gradient(circle at var(--hx-card,50%) var(--hy-card,50%),var(--flow-halo,rgba(126,247,196,.075)),transparent 46%)!important;
  border-color:color-mix(in srgb,var(--flow-accent,var(--mint)) 26%,var(--line))!important
}

/* Audience switch: "Overview" communicates plain-language depth without
   implying the reader is simple. Mobile receives the same control. */
.audience-switch button{min-width:66px}
.mobile-audience{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 6px 16px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.05)
}
.mobile-audience-label{
  color:var(--muted2);font:800 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.10em;text-transform:uppercase
}
.mobile-audience .audience-switch{margin:0}
html[data-audience="plain"] [data-audience-overview],
html[data-audience="technical"] [data-audience-technical]{
  transition:color .18s ease
}

/* Three-surface semantic model — additive DESIGN context from the governed
   framework. It explains ownership without exposing private implementation. */
.surface-model-section{
  position:relative;overflow:hidden;
  border-top:1px solid rgba(105,216,255,.08);
  border-bottom:1px solid rgba(126,247,196,.08);
  background:
    radial-gradient(circle at 16% 30%,rgba(126,247,196,.032),transparent 25rem),
    radial-gradient(circle at 82% 46%,rgba(155,140,255,.028),transparent 27rem),
    linear-gradient(180deg,rgba(255,255,255,.008),transparent 72%)
}
.surface-model-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(126,247,196,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.014) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)
}
.surface-model-section .shell{position:relative}
.surface-model{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:36px;position:relative
}
.surface-card{
  --surface-accent:var(--mint);
  position:relative;isolation:isolate;min-height:360px;padding:26px;
  border:1px solid var(--line);background:rgba(5,18,15,.62);
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
  overflow:hidden;transition:transform .28s var(--ease),border-color .28s ease,background .28s ease
}
.surface-card::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;
  background:linear-gradient(180deg,transparent,var(--surface-accent),transparent);
  opacity:.68
}
.surface-card::after{
  content:"";position:absolute;right:-120px;bottom:-140px;width:290px;height:290px;border-radius:50%;
  background:var(--surface-accent);filter:blur(70px);opacity:.035;pointer-events:none
}
.surface-card.network{--surface-accent:var(--cyan)}
.surface-card.runtime{--surface-accent:var(--violet)}
.surface-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--surface-accent) 30%,var(--line));
  background:rgba(7,23,18,.74)
}
.surface-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.surface-glyph{
  width:52px;height:52px;display:grid;place-items:center;border:1px solid currentColor;
  color:var(--surface-accent);font:800 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(4,16,13,.56);position:relative
}
.surface-glyph::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.5
}
.surface-role{
  display:block;margin-top:32px;color:var(--surface-accent);
  font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em
}
.surface-card h3{margin:12px 0 14px;font-size:clamp(24px,2vw,31px);letter-spacing:-.035em}
.surface-card p{color:var(--muted);font-size:12px;line-height:1.65;max-width:46ch}
.surface-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:28px}
.surface-actions span{
  padding:7px 9px;border:1px solid var(--line);background:rgba(4,16,13,.5);
  color:var(--muted2);font:800 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase
}

.surface-core-rail{
  margin-top:14px;min-height:84px;display:grid;grid-template-columns:auto 1fr;
  align-items:center;gap:26px;padding:17px 20px;border:1px solid rgba(126,247,196,.16);
  background:linear-gradient(90deg,rgba(126,247,196,.028),rgba(105,216,255,.018),rgba(155,140,255,.018));
  position:relative;overflow:hidden
}
.surface-core-rail::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet));opacity:.55
}
.core-node{display:grid;grid-template-columns:10px auto;column-gap:10px;align-items:center;min-width:230px}
.core-node i{
  grid-row:1/3;width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 10px rgba(126,247,196,.7),0 0 24px rgba(126,247,196,.18)
}
.core-node b{font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.core-node small{color:var(--muted2);font-size:9px;margin-top:2px}
.core-rule{color:var(--muted);font-size:12px}

.surface-badges{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:18px;
  border-top:1px solid rgba(214,255,239,.08)
}
.surface-badges span{
  display:grid;grid-template-columns:auto auto;align-items:center;gap:10px;
  padding:9px 11px;border:1px solid var(--line);background:rgba(4,16,13,.46)
}
.surface-badges b{font-size:10px}
.surface-badges em{
  color:var(--muted2);font:800 6.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;font-style:normal
}
.surface-disclaimer{
  max-width:940px;margin:16px 0 0;color:var(--muted2);font-size:10px;line-height:1.65
}

@media(max-width:1040px){
  .mobile-audience .audience-switch{display:flex!important}
  .surface-model{grid-template-columns:1fr}
  .surface-card{min-height:250px}
  .surface-card p{max-width:70ch}
}
@media(max-width:760px){
  .progress{top:71px!important}
  .three-steps article:not(:last-child)::after{
    top:100%;left:32px;width:1px;height:12px;
    background:linear-gradient(180deg,rgba(126,247,196,.48),rgba(105,216,255,.34))
  }
  .story-track i{display:none!important}
  .surface-core-rail{grid-template-columns:1fr;gap:10px}
  .core-node{min-width:0}
  .surface-card{padding:22px}
  .surface-badges span{grid-template-columns:1fr;gap:2px}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none!important;transform:none!important;will-change:auto}
  .progress{transition:none}
  .surface-card{transition:none}
}
@media print{
  .surface-model-section::before,.surface-card::before,.surface-card::after,
  .surface-core-rail::before,.progress{display:none!important}
}


@media(max-width:1040px){
  .error-audience{display:flex!important}
}
@media(max-width:520px){
  .error-header{gap:10px}
  .error-header .brand img{width:142px}
  .error-audience button{min-width:58px;padding-inline:8px}
}


/* ================================================================
   PUBLIC-FACING BALANCE + SEMANTIC POLISH — 2026-09-21
   Targeted corrections requested after visual review.
   ================================================================ */

/* Balanced master lockup: the repaired asset includes symmetric breathing room.
   Preserve its visible size while ensuring no mark pixels touch the image edge. */
header .brand{min-width:228px!important;overflow:visible!important}
header .brand img{width:228px!important;height:auto!important;overflow:visible!important}
.footer-brand img{width:min(288px,100%)!important;height:auto!important}

/* Prevent animated/gradient hero glyphs from clipping punctuation overhang. */
.hero-copy,.hero .display{overflow:visible!important}
.hero h1 span{
  display:inline-block;
  padding-right:.10em;
  margin-right:-.10em;
  overflow:visible;
  max-width:calc(100% + .10em)
}
@keyframes sbHeroBreathe{
  from{transform:translateX(0) scaleX(1)}
  to{transform:translateX(2px) scaleX(1.003)}
}

/* At full desktop width, the interoperability context sentence is one clear line.
   It returns to normal wrapping before space becomes constrained. */
@media(min-width:1240px){
  .marquee-label{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center!important;
    gap:30px!important
  }
  .marquee-label p{
    max-width:none!important;
    white-space:nowrap;
    text-align:right!important;
    margin:0!important;
    font-size:10.5px!important
  }
}

/* Architecture uses stable registration instead of a moving crosshair through content. */
#architecture::after{display:none!important}
#architecture .architecture-badges::before{display:none!important}
#architecture .architecture-layers>i{
  animation:none!important;
  transform:none!important
}

/* Public role badges are descriptors, not lifecycle claims. */
.surface-card .muted-badge{
  color:var(--muted)!important;
  border-color:rgba(214,255,239,.12)!important;
  background:rgba(255,255,255,.012)!important
}
.surface-disclaimer{max-width:1040px!important}

/* Roadmap horizon: one compact public promise beneath the existing cards. */
.roadmap-horizon{
  margin-top:14px;
  display:grid;
  grid-template-columns:minmax(250px,.78fr) minmax(0,1.72fr);
  gap:22px;
  align-items:stretch;
  border:1px solid rgba(126,247,196,.15);
  background:
    linear-gradient(90deg,rgba(126,247,196,.028),rgba(105,216,255,.014) 48%,rgba(155,140,255,.018));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  padding:22px;
  position:relative;
  overflow:hidden
}
.roadmap-horizon::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--mint),var(--cyan),var(--violet));
  opacity:.72
}
.roadmap-horizon-lead{min-width:0}
.roadmap-horizon-lead .kicker{margin-bottom:9px!important}
.roadmap-horizon-lead strong{
  display:block;font-size:clamp(22px,2vw,30px);letter-spacing:-.035em
}
.roadmap-horizon-lead p{
  max-width:48ch;margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.6
}
.roadmap-horizon-points{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px
}
.roadmap-horizon-points span{
  min-width:0;padding:15px;border:1px solid var(--line);
  background:rgba(4,16,13,.45);display:flex;flex-direction:column;justify-content:center;gap:6px
}
.roadmap-horizon-points b{
  color:var(--mint);font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em
}
.roadmap-horizon-points span:nth-child(2) b{color:var(--cyan)}
.roadmap-horizon-points span:nth-child(3) b{color:var(--violet)}
.roadmap-horizon-points em{
  color:var(--muted);font-style:normal;font-size:10px;line-height:1.45
}

/* Status snapshot exposes useful public dimensions without operationally sensitive telemetry. */
.status-snapshot{
  margin-top:-22px;
  margin-bottom:18px;
  padding:0!important;
  border:1px solid rgba(105,216,255,.13);
  background:rgba(4,16,13,.50);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  overflow:hidden
}
.status-snapshot-metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))
}
.status-snapshot-metrics span{
  min-width:0;min-height:82px;padding:16px 18px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  border-right:1px solid var(--line)
}
.status-snapshot-metrics span:last-child{border-right:0}
.status-snapshot-metrics strong{
  color:var(--text);font-size:20px;letter-spacing:-.03em
}
.status-snapshot-metrics span:nth-child(1) strong{color:var(--mint)}
.status-snapshot-metrics span:nth-child(2) strong{color:var(--cyan)}
.status-snapshot-metrics span:nth-child(3) strong{color:var(--violet)}
.status-snapshot-metrics span:nth-child(4) strong{color:var(--amber)}
.status-snapshot-metrics small{
  color:var(--muted2);
  font:800 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.45
}
.status-snapshot>p{
  margin:0;padding:11px 18px;border-top:1px solid var(--line);
  color:var(--muted2);font-size:9px;line-height:1.55
}

/* Canonical tagline stays readable as a single brand statement where space permits. */
.statement p{white-space:nowrap}

@media(max-width:1180px){
  header .brand{min-width:200px!important}
  header .brand img{width:200px!important}
}
@media(max-width:1040px){
  header .brand{min-width:204px!important}
  header .brand img{width:204px!important}
  .roadmap-horizon{grid-template-columns:1fr}
}
@media(max-width:760px){
  header .brand{min-width:188px!important}
  header .brand img{width:188px!important}
  .roadmap-horizon{padding:18px}
  .roadmap-horizon-points{grid-template-columns:1fr}
  .status-snapshot{margin-top:-10px}
  .status-snapshot-metrics{grid-template-columns:1fr 1fr}
  .status-snapshot-metrics span:nth-child(2){border-right:0}
  .status-snapshot-metrics span:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .statement p{white-space:normal}
}
@media(max-width:520px){
  header .brand{min-width:168px!important}
  header .brand img{width:168px!important}
  .status-snapshot-metrics{grid-template-columns:1fr}
  .status-snapshot-metrics span{
    min-height:70px;border-right:0!important;border-bottom:1px solid var(--line)!important
  }
  .status-snapshot-metrics span:last-child{border-bottom:0!important}
}


/* ================================================================
   SITEBORNE ENGAGEMENT LAYER — 2026-09-21
   Benchmark goal: premium narrative motion and interaction density
   without changing content structure, semantics, or authority claims.
   ================================================================ */

/* Page-specific accenting keeps every surface distinct while staying
   inside the SITEBORNE mint / cyan / violet / amber system. */
body[data-page="index"]{--page-a:var(--mint);--page-b:var(--cyan);--page-c:var(--violet)}
body[data-page="how-it-works"]{--page-a:var(--cyan);--page-b:var(--mint);--page-c:var(--violet)}
body[data-page="developers"],body[data-page="docs"]{--page-a:var(--cyan);--page-b:var(--violet);--page-c:var(--mint)}
body[data-page="security"]{--page-a:var(--mint);--page-b:var(--cyan);--page-c:var(--amber)}
body[data-page="pricing"]{--page-a:var(--amber);--page-b:var(--mint);--page-c:var(--cyan)}
body[data-page="status"]{--page-a:var(--mint);--page-b:var(--cyan);--page-c:var(--amber)}
body[data-page="privacy"],body[data-page="terms"],body[data-page="404"]{--page-a:var(--violet);--page-b:var(--cyan);--page-c:var(--mint)}
body{--page-a:var(--mint);--page-b:var(--cyan);--page-c:var(--violet)}

/* Cross-document navigation gets a native, progressive enhancement.
   Unsupported browsers simply use the existing navigation behavior. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:sbPageOut .18s ease both}
::view-transition-new(root){animation:sbPageIn .34s var(--ease) both}
@keyframes sbPageOut{to{opacity:.35;filter:blur(3px);transform:scale(.997)}}
@keyframes sbPageIn{from{opacity:.15;filter:blur(5px);transform:translateY(5px) scale(1.002)}}

/* Header becomes a calm control plane while the existing scroll bar
   communicates traversal at the exact header boundary. */
header{
  box-shadow:0 12px 42px rgba(0,0,0,.08)!important;
}
header.scrolled{
  box-shadow:0 18px 56px rgba(0,0,0,.24),inset 0 -1px 0 rgba(255,255,255,.012)!important
}
.progress{
  opacity:.92;
  filter:saturate(108%);
  transform-origin:left center
}
.navlinks a,.footer-col a{
  text-decoration-thickness:1px;
  text-underline-offset:5px
}
.navlinks a::before{
  content:"";position:absolute;left:50%;bottom:3px;width:3px;height:3px;border-radius:50%;
  background:var(--page-a);box-shadow:0 0 10px var(--page-a);
  transform:translate(-50%,6px) scale(0);opacity:0;
  transition:transform .22s var(--ease),opacity .22s
}
.navlinks a:hover::before,.navlinks a[aria-current="page"]::before{
  transform:translate(-50%,0) scale(1);opacity:.8
}

/* Hero choreography: larger spatial field, moving spectral type, and
   a self-contained kinetic diagram that never obscures page copy. */
.hero,.page-hero{
  isolation:isolate;
  --hero-x:74%;
  --hero-y:32%
}
.hero .display .grad{
  background-size:220% 220%!important;
  animation:sbSpectrumType 9s ease-in-out infinite
}
@keyframes sbSpectrumType{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.page-hero h1{
  position:relative;
  text-wrap:balance;
  text-shadow:0 20px 58px rgba(0,0,0,.24)
}
.page-hero .crumb,.hero .badge{
  position:relative
}
.page-hero .crumb::after,.hero .badge::after{
  content:"";display:inline-block;width:24px;height:1px;margin-left:12px;vertical-align:middle;
  background:linear-gradient(90deg,var(--page-a),transparent);
  opacity:.7
}
.sb-hero-kinetic{
  position:absolute;z-index:1;right:clamp(18px,5vw,84px);top:50%;
  width:min(36vw,510px);aspect-ratio:1;transform:translateY(-50%);
  pointer-events:none;opacity:.62;mix-blend-mode:screen
}
.hero>.sb-hero-kinetic{right:38%;width:min(42vw,620px);opacity:.22;z-index:0}
.sb-hero-kinetic::before,
.sb-hero-kinetic::after{
  content:"";position:absolute;border-radius:50%;inset:11%;
  border:1px solid rgba(126,247,196,.14);
  box-shadow:0 0 0 1px rgba(105,216,255,.025),0 0 70px rgba(105,216,255,.028)
}
.sb-hero-kinetic::after{
  inset:25%;border-color:rgba(155,140,255,.18);border-style:dashed;
  animation:sbOrbit 24s linear infinite reverse
}
.sb-hero-kinetic i{
  position:absolute;display:block;left:50%;top:50%;transform-origin:0 0;
  width:42%;height:1px;background:linear-gradient(90deg,rgba(126,247,196,.7),rgba(105,216,255,.16),transparent);
  opacity:.55
}
.sb-hero-kinetic i:nth-child(1){transform:rotate(18deg);animation:sbArmA 9s ease-in-out infinite}
.sb-hero-kinetic i:nth-child(2){transform:rotate(138deg);background:linear-gradient(90deg,rgba(105,216,255,.6),rgba(155,140,255,.18),transparent);animation:sbArmB 12s ease-in-out infinite}
.sb-hero-kinetic i:nth-child(3){transform:rotate(258deg);background:linear-gradient(90deg,rgba(155,140,255,.6),rgba(126,247,196,.14),transparent);animation:sbArmC 15s ease-in-out infinite}
.sb-hero-kinetic b{
  position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--page-a);
  box-shadow:0 0 14px var(--page-a),0 0 38px rgba(126,247,196,.28)
}
@keyframes sbOrbit{to{transform:rotate(360deg)}}
@keyframes sbArmA{50%{transform:rotate(42deg) scaleX(.82)}}
@keyframes sbArmB{50%{transform:rotate(116deg) scaleX(1.14)}}
@keyframes sbArmC{50%{transform:rotate(286deg) scaleX(.92)}}

/* Scroll scenes create the same sense of deliberate visual storytelling
   across long product pages without changing any existing layout block. */
main>.section,main>.strip,main>.statement{
  --scene-a:var(--page-a);
  --scene-b:var(--page-b);
  --scene-c:var(--page-c)
}
main>.section{
  isolation:isolate;
  background:
    radial-gradient(circle at 8% 12%,rgba(126,247,196,.018),transparent 22rem),
    radial-gradient(circle at 92% 88%,rgba(105,216,255,.015),transparent 25rem)
}
main>.section:nth-of-type(3n+2){
  --scene-a:var(--page-b);--scene-b:var(--page-c);
  background:
    radial-gradient(circle at 88% 18%,rgba(105,216,255,.022),transparent 24rem),
    radial-gradient(circle at 18% 86%,rgba(155,140,255,.018),transparent 23rem)
}
main>.section:nth-of-type(3n){
  --scene-a:var(--page-c);--scene-b:var(--page-a);
  background:
    radial-gradient(circle at 76% 78%,rgba(155,140,255,.021),transparent 26rem),
    radial-gradient(circle at 10% 16%,rgba(126,247,196,.015),transparent 22rem)
}
main>.section::before{
  content:"";position:absolute;z-index:-1;left:50%;top:0;width:min(92vw,1500px);height:100%;
  transform:translateX(-50%);pointer-events:none;opacity:.18;
  background:
    linear-gradient(90deg,transparent 0 7%,rgba(255,255,255,.028) 7% 7.06%,transparent 7.06% 93%,rgba(255,255,255,.024) 93% 93.06%,transparent 93.06%),
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 16%,transparent 84%,rgba(255,255,255,.012))
}
main>.section.sb-scene-active::before{opacity:.32}
.section-head{
  transition:transform .55s var(--ease),filter .55s ease
}
.section-head[data-sb-index]::before{
  transition:color .5s ease,text-shadow .5s ease,transform .5s var(--ease)
}
.sb-scene-active .section-head[data-sb-index]::before{
  color:rgba(247,251,249,.17);
  text-shadow:0 0 30px rgba(105,216,255,.10);
  transform:translateY(-2px)
}
.section-head::after{
  transform-origin:left center;
  transition:width .6s var(--ease),filter .45s ease,opacity .45s ease
}
.sb-scene-active .section-head::after{
  width:92px;
  filter:drop-shadow(0 0 8px rgba(105,216,255,.22));
  opacity:1
}
.kicker{
  position:relative;
  transition:color .35s ease,letter-spacing .35s var(--ease)
}
.sb-scene-active .kicker{letter-spacing:.18em}

/* Visual handoffs create chapter rhythm between existing sections.
   They are aria-hidden decoration inserted without altering content. */
.sb-section-handoff{
  position:relative;height:54px;margin:-27px 0;z-index:5;pointer-events:none;
  display:grid;place-items:center;overflow:hidden
}
.sb-section-handoff::before{
  content:"";width:min(86vw,1180px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(126,247,196,.12) 18%,rgba(105,216,255,.22) 50%,rgba(155,140,255,.13) 82%,transparent)
}
.sb-section-handoff span{
  position:absolute;left:calc(50% - min(43vw,590px));top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 12px var(--mint),0 0 28px rgba(126,247,196,.18);
  transform:translate(-50%,-50%);
  animation:sbHandoff 7.5s var(--ease) infinite
}
.sb-section-handoff span:nth-child(2){background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation-delay:-2.5s}
.sb-section-handoff span:nth-child(3){background:var(--violet);box-shadow:0 0 12px var(--violet);animation-delay:-5s}
@keyframes sbHandoff{
  from{left:calc(50% - min(43vw,590px));opacity:0}
  8%,88%{opacity:.8}
  to{left:calc(50% + min(43vw,590px));opacity:0}
}

/* Premium card depth: spotlight, edge registration, and small perspective
   response. The extra light layer is purely decorative. */
.sb-card-enhanced{
  position:relative!important;
  transform-style:preserve-3d;
  will-change:transform;
  transition:
    transform .34s var(--ease),
    border-color .34s ease,
    box-shadow .34s ease,
    background-color .34s ease!important
}
.sb-card-light{
  position:absolute;z-index:0;inset:0;pointer-events:none;opacity:0;
  background:
    radial-gradient(360px circle at var(--card-x,50%) var(--card-y,50%),rgba(126,247,196,.075),transparent 58%),
    linear-gradient(115deg,transparent 20%,rgba(105,216,255,.025) 48%,transparent 72%);
  transition:opacity .3s ease;
  mix-blend-mode:screen
}
.sb-card-light::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--scene-a,var(--page-a)),var(--scene-a,var(--page-a))) left top/18px 1px no-repeat,
    linear-gradient(var(--scene-a,var(--page-a)),var(--scene-a,var(--page-a))) left top/1px 18px no-repeat,
    linear-gradient(var(--scene-b,var(--page-b)),var(--scene-b,var(--page-b))) right bottom/18px 1px no-repeat,
    linear-gradient(var(--scene-b,var(--page-b)),var(--scene-b,var(--page-b))) right bottom/1px 18px no-repeat;
  opacity:.35
}
.sb-card-enhanced>*:not(.sb-card-light){position:relative;z-index:1}
.sb-card-enhanced:hover{
  border-color:rgba(214,255,239,.24)!important;
  box-shadow:0 24px 72px rgba(0,0,0,.22),0 0 0 1px rgba(126,247,196,.025)!important
}
.sb-card-enhanced:hover>.sb-card-light{opacity:1}
.sb-card-enhanced.sb-card-hover:not([data-tilt]){
  transform:translate3d(0,-4px,0) perspective(1200px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg))
}

/* Flow and protocol families gain connected-state energy without adding
   any new semantic connector through the content. */
.flow-card,.three-steps article,.protocol-card,.surface-card{
  background-image:
    radial-gradient(circle at 100% 0,rgba(105,216,255,.026),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.008))!important
}
.flow-card::before,.protocol-card::before{
  content:"";position:absolute;left:0;top:0;width:52px;height:1px;
  background:linear-gradient(90deg,var(--scene-a,var(--page-a)),transparent);opacity:.55
}
.flow-card[data-tone="cyan"]::before{background:linear-gradient(90deg,var(--cyan),transparent)}
.flow-card[data-tone="violet"]::before{background:linear-gradient(90deg,var(--violet),transparent)}
.flow-card[data-tone="amber"]::before{background:linear-gradient(90deg,var(--amber),transparent)}
.proto{
  transition:transform .35s var(--ease),border-color .35s ease,box-shadow .35s ease!important
}
.network-stage:hover .proto{
  border-color:rgba(214,255,239,.22);
  box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 20px rgba(105,216,255,.035)
}
.network-stage:hover .p1{transform:translate(-3px,-4px)}
.network-stage:hover .p2{transform:translate(3px,-3px)}
.network-stage:hover .p3{transform:translate(-3px,3px)}
.network-stage:hover .p4{transform:translate(3px,4px)}

/* CTA motion is tactile but never changes target or click behavior. */
.button{
  position:relative;isolation:isolate;overflow:hidden
}
.button::before{
  content:"";position:absolute;z-index:-1;inset:-1px;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.18) 48%,transparent 72%);
  transform:translateX(-130%);transition:transform .55s var(--ease)
}
.button:hover::before{transform:translateX(130%)}
.button.primary{
  box-shadow:0 10px 30px rgba(126,247,196,.09)
}
.button.primary:hover{
  box-shadow:0 14px 40px rgba(126,247,196,.18),0 0 0 1px rgba(126,247,196,.10)
}

/* Tables and code surfaces feel like active instruments rather than static blocks. */
.table,.devbox,.network-stage,.architecture-layers,.launch-card,.status-snapshot{
  position:relative
}
.table{
  box-shadow:0 28px 90px rgba(0,0,0,.11)
}
.table tbody tr{
  transition:background .22s ease,transform .22s var(--ease)
}
.table tbody tr:hover{
  background:rgba(126,247,196,.025)
}
.devbox::before,.architecture-layers::before{
  opacity:.58!important
}
.code{
  text-shadow:0 0 18px rgba(105,216,255,.025)
}

/* Existing marquee keeps its corrected seamless geometry, with cleaner edge masking
   and a premium pause affordance for inspection. */
.ecosystem-marquee{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)
}
@media(hover:hover) and (pointer:fine){
  .ecosystem-marquee:hover .marquee-track{animation-play-state:paused!important}
}

/* Section-specific personalities on the home page: different visual scenes,
   shared typography and geometry. */
.standards-section{--scene-a:var(--cyan);--scene-b:var(--mint)}
.surface-model-section{--scene-a:var(--violet);--scene-b:var(--cyan)}
.simple-explainer{--scene-a:var(--mint);--scene-b:var(--cyan)}
.example-section{--scene-a:var(--cyan);--scene-b:var(--violet)}
.why-section{--scene-a:var(--amber);--scene-b:var(--mint)}
.usecase-section{--scene-a:var(--violet);--scene-b:var(--cyan)}
.proof-path-section{--scene-a:var(--cyan);--scene-b:var(--mint)}
.architecture-deep{--scene-a:var(--violet);--scene-b:var(--mint)}
.horizon-section{--scene-a:var(--mint);--scene-b:var(--cyan)}
.trust-rules{--scene-a:var(--mint);--scene-b:var(--amber)}
.economics-section{--scene-a:var(--amber);--scene-b:var(--cyan)}
.roadmap-section{--scene-a:var(--violet);--scene-b:var(--mint)}
.technical-safe{--scene-a:var(--cyan);--scene-b:var(--violet)}
.faq-section{--scene-a:var(--mint);--scene-b:var(--cyan)}
.launch-section{--scene-a:var(--violet);--scene-b:var(--mint)}

/* The final statement gets a cinematic but brand-native closing treatment. */
.statement{
  position:relative;isolation:isolate;overflow:hidden
}
.statement::before{
  content:"";position:absolute;inset:-40% -10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 18% 48%,rgba(126,247,196,.07),transparent 22rem),
    radial-gradient(circle at 72% 52%,rgba(105,216,255,.055),transparent 24rem),
    radial-gradient(circle at 92% 40%,rgba(155,140,255,.045),transparent 18rem);
  animation:sbStatementDrift 12s ease-in-out infinite alternate
}
@keyframes sbStatementDrift{
  to{transform:translate3d(2%,-2%,0) scale(1.02)}
}

/* Scrollbar and selection complete the system-level polish. */
html{scrollbar-color:rgba(126,247,196,.42) rgba(4,16,13,.9);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#04100d}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(126,247,196,.42),rgba(105,216,255,.32),rgba(155,140,255,.30));
  border:3px solid #04100d;border-radius:999px
}

/* Responsive containment: richness reduces before information density does. */
@media(max-width:1040px){
  .sb-hero-kinetic{right:-80px;width:420px;opacity:.26}
  .hero>.sb-hero-kinetic{right:28%;opacity:.10}
  .sb-section-handoff{height:42px;margin:-21px 0}
}
@media(max-width:760px){
  .page-hero .sb-hero-kinetic{right:-170px;width:340px;opacity:.17}
  .hero>.sb-hero-kinetic{display:none}
  .sb-section-handoff{height:30px;margin:-15px 0}
  .sb-section-handoff span{width:5px;height:5px}
  main>.section::before{opacity:.10}
  .sb-card-enhanced.sb-card-hover:not([data-tilt]){transform:translate3d(0,-2px,0)}
}
@media(max-width:520px){
  .page-hero .sb-hero-kinetic{display:none}
  .section-head::after{width:58px}
  .sb-scene-active .section-head::after{width:72px}
}

/* Motion accessibility: the visual hierarchy remains, choreography stops. */
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .hero .display .grad,.sb-hero-kinetic::after,.sb-hero-kinetic i,
  .sb-section-handoff span,.statement::before{animation:none!important}
  .sb-card-enhanced,.sb-card-light,.section-head,.section-head::after,
  .section-head[data-sb-index]::before,.proto,.button::before{transition:none!important}
  .sb-section-handoff span:nth-child(2),.sb-section-handoff span:nth-child(3){display:none}
}
@media print{
  .sb-hero-kinetic,.sb-section-handoff,.sb-card-light{display:none!important}
}


/* ================================================================
   PREMIUM KINETIC PASS — ARCHITECTURE RAIL + SITEWIDE DEPTH
   2026-09-21
   Visual-only. Existing content, routes, controls, and semantics remain intact.
   ================================================================ */

/* More cinematic section staging while keeping SITEBORNE's own visual language. */
main > .section{
  isolation:isolate;
}
main > .section::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:8% 0 6%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(48rem 22rem at 10% 18%,color-mix(in srgb,var(--scene-a,var(--mint)) 7%,transparent),transparent 64%),
    radial-gradient(52rem 24rem at 90% 78%,color-mix(in srgb,var(--scene-b,var(--cyan)) 5%,transparent),transparent 66%);
  transition:opacity .65s ease;
}
main > .section.sb-scene-active::after{opacity:1}

/* Section headings gain a deliberate "signal lock" instead of extra divider lines. */
.section-head{
  position:relative;
}
.section-head::before{
  content:"";
  position:absolute;
  left:-22px;
  top:8px;
  width:7px;
  height:7px;
  border:1px solid color-mix(in srgb,var(--scene-a,var(--mint)) 62%,transparent);
  background:color-mix(in srgb,var(--scene-a,var(--mint)) 16%,transparent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--scene-a,var(--mint)) 4%,transparent),0 0 22px color-mix(in srgb,var(--scene-a,var(--mint)) 22%,transparent);
  transform:rotate(45deg) scale(.72);
  opacity:.35;
  transition:transform .5s var(--ease),opacity .5s ease,box-shadow .5s ease;
}
.sb-scene-active .section-head::before{
  opacity:.88;
  transform:rotate(45deg) scale(1);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--scene-a,var(--mint)) 5%,transparent),0 0 28px color-mix(in srgb,var(--scene-a,var(--mint)) 28%,transparent);
}

/* Architecture gets a purpose-built vertical authority spine.
   Full-width animated separator strokes are explicitly disabled. */
.architecture-deep{
  position:relative;
  overflow:clip;
  background:
    radial-gradient(60rem 34rem at 12% 38%,rgba(155,140,255,.035),transparent 64%),
    radial-gradient(52rem 30rem at 88% 74%,rgba(126,247,196,.03),transparent 68%);
}
.architecture-deep::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(105,216,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.015) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 18%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 2%,#000 18%,#000 84%,transparent 100%);
}
.architecture-deep .section-head{
  max-width:930px;
}
.architecture-badges{
  position:relative;
  perspective:1200px;
}
.architecture-badges article{
  overflow:hidden;
}
.architecture-badges article::after{
  content:"";
  position:absolute;
  right:-54px;
  bottom:-54px;
  width:118px;
  height:118px;
  border:1px solid color-mix(in srgb,var(--scene-a,var(--violet)) 16%,transparent);
  border-radius:50%;
  opacity:.34;
  box-shadow:
    0 0 0 16px color-mix(in srgb,var(--scene-b,var(--mint)) 2%,transparent),
    0 0 0 34px color-mix(in srgb,var(--scene-a,var(--violet)) 1.5%,transparent);
  transition:transform .6s var(--ease),opacity .4s ease;
  pointer-events:none;
}
.architecture-badges article:hover::after{
  transform:scale(1.16) translate(-5px,-5px);
  opacity:.66;
}

/* Replace the old boxed stack with an instrumented authority rail. */
.architecture-layers{
  --sb-spine-x:42px;
  --sb-pad-left:94px;
  position:relative!important;
  display:grid!important;
  gap:12px!important;
  margin-top:34px!important;
  padding:38px 28px 38px 94px!important;
  border:1px solid rgba(214,255,239,.11)!important;
  background:
    radial-gradient(46rem 26rem at 28% 22%,rgba(126,247,196,.028),transparent 62%),
    radial-gradient(44rem 24rem at 76% 78%,rgba(155,140,255,.022),transparent 66%),
    rgba(4,16,13,.54)!important;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 38px 90px rgba(0,0,0,.12)!important;
}
.architecture-layers:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.42!important;
  background-image:
    linear-gradient(rgba(126,247,196,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(105,216,255,.014) 1px,transparent 1px)!important;
  background-size:36px 36px!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0 18%,transparent 66%)!important;
  mask-image:linear-gradient(90deg,#000 0 18%,transparent 66%)!important;
}
.architecture-layers:after{
  content:"";
  position:absolute;
  z-index:1;
  left:var(--sb-spine-x);
  top:46px;
  bottom:46px;
  width:2px;
  border-radius:99px;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(126,247,196,.38) 8%,
    rgba(105,216,255,.65) 34%,
    rgba(155,140,255,.72) 60%,
    rgba(126,247,196,.48) 84%,
    transparent 100%
  );
  box-shadow:0 0 20px rgba(105,216,255,.12);
  pointer-events:none;
}
.architecture-layers > div{
  position:relative!important;
  z-index:2!important;
  min-height:112px!important;
  display:grid!important;
  grid-template-columns:minmax(148px,.42fr) 1fr!important;
  align-items:center!important;
  gap:24px!important;
  padding:24px 28px 24px 30px!important;
  border:0!important;
  border-radius:0!important;
  background:
    radial-gradient(28rem 16rem at 0% 50%,rgba(126,247,196,.026),transparent 72%),
    linear-gradient(108deg,rgba(11,31,25,.93),rgba(6,20,16,.82))!important;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))!important;
  box-shadow:
    inset 0 1px 0 rgba(214,255,239,.08),
    inset 1px 0 0 rgba(126,247,196,.16),
    inset 0 -1px 0 rgba(105,216,255,.055),
    0 18px 44px rgba(0,0,0,.10)!important;
  transform:translateZ(0);
  transition:transform .42s var(--ease),background .42s ease,box-shadow .42s ease!important;
}
.architecture-layers > div::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:-52px!important;
  top:50%!important;
  width:44px!important;
  height:1px!important;
  transform:translateY(-50%)!important;
  background:linear-gradient(90deg,rgba(105,216,255,.56),rgba(126,247,196,.20),transparent)!important;
  opacity:.72!important;
  pointer-events:none!important;
}
.architecture-layers > div::after{
  content:""!important;
  position:absolute!important;
  display:block!important;
  left:0!important;
  top:0!important;
  bottom:auto!important;
  width:76px!important;
  height:1px!important;
  background:linear-gradient(90deg,var(--mint),var(--cyan),transparent)!important;
  opacity:.52!important;
  animation:none!important;
  pointer-events:none!important;
}
.architecture-layers > div:nth-of-type(2)::after{
  background:linear-gradient(90deg,var(--cyan),var(--violet),transparent)!important;
}
.architecture-layers > div:nth-of-type(4)::after{
  background:linear-gradient(90deg,var(--violet),var(--mint),transparent)!important;
}
.architecture-layers > div:hover{
  transform:translate3d(6px,0,0)!important;
  background:
    radial-gradient(34rem 18rem at 12% 50%,rgba(126,247,196,.042),transparent 70%),
    linear-gradient(108deg,rgba(12,34,27,.96),rgba(6,20,16,.88))!important;
  box-shadow:
    inset 0 1px 0 rgba(214,255,239,.11),
    inset 1px 0 0 rgba(126,247,196,.30),
    inset 0 -1px 0 rgba(105,216,255,.08),
    0 24px 58px rgba(0,0,0,.16),
    -18px 0 50px rgba(126,247,196,.025)!important;
}
.architecture-layers > div > span{
  color:rgba(174,203,193,.72)!important;
  font-size:9px!important;
  letter-spacing:.15em!important;
}
.architecture-layers > div > strong{
  position:relative;
  max-width:760px;
  color:var(--text)!important;
  font-size:14px!important;
  font-weight:680!important;
  line-height:1.5!important;
  text-align:left!important;
}
.architecture-layers .siteborne{
  grid-template-columns:58px 142px 1fr!important;
  border:0!important;
  background:
    radial-gradient(32rem 18rem at 8% 50%,rgba(126,247,196,.07),transparent 68%),
    linear-gradient(108deg,rgba(8,34,26,.98),rgba(6,22,18,.90))!important;
  box-shadow:
    inset 0 1px 0 rgba(126,247,196,.18),
    inset 1px 0 0 rgba(126,247,196,.34),
    inset 0 -1px 0 rgba(105,216,255,.10),
    0 22px 56px rgba(0,0,0,.14)!important;
}
.architecture-layers .siteborne img{
  width:46px!important;
  filter:drop-shadow(0 0 18px rgba(126,247,196,.12));
}
.architecture-layers .siteborne > span{
  color:rgba(214,255,239,.70)!important;
  font-size:10px!important;
}
.architecture-layers > i{
  position:relative!important;
  z-index:3!important;
  justify-self:start!important;
  width:14px!important;
  height:14px!important;
  margin:0 0 0 calc(var(--sb-spine-x) - var(--sb-pad-left) - 7px)!important;
  border:1px solid rgba(105,216,255,.36)!important;
  border-radius:50%!important;
  background:#071711!important;
  color:transparent!important;
  font-size:0!important;
  box-shadow:0 0 0 5px rgba(105,216,255,.025),0 0 18px rgba(105,216,255,.10)!important;
  animation:sbAuthorityNode 3.8s ease-in-out infinite!important;
}
.architecture-layers > i::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(105,216,255,.55);
}
.architecture-layers > i:nth-of-type(2n){
  border-color:rgba(155,140,255,.38)!important;
}
.architecture-layers > i:nth-of-type(2n)::before{background:var(--violet)}
@keyframes sbAuthorityNode{
  0%,100%{transform:scale(.88);opacity:.64}
  50%{transform:scale(1.08);opacity:1}
}

/* An active architecture layer feels selected, not merely hovered. */
.architecture-layers > div.sb-arch-active{
  transform:translate3d(8px,0,0)!important;
  box-shadow:
    inset 0 1px 0 rgba(214,255,239,.12),
    inset 2px 0 0 rgba(126,247,196,.42),
    inset 0 -1px 0 rgba(105,216,255,.10),
    0 28px 70px rgba(0,0,0,.19),
    -20px 0 54px rgba(126,247,196,.035)!important;
}

/* Large editorial numerals and kinetic micro-details are brand-colored, not borrowed. */
.architecture-deep .section-head h2{
  text-wrap:balance;
}
.architecture-deep .section-head h2::after{
  content:"AUTHORITY CHAIN";
  display:inline-block;
  vertical-align:middle;
  margin-left:18px;
  padding:6px 9px;
  border:1px solid rgba(155,140,255,.18);
  color:rgba(192,185,255,.76);
  font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  transform:translateY(-4px);
}

/* Hover-driven signal rings for architecture state cards. */
@media(hover:hover) and (pointer:fine){
  .architecture-badges article:hover{
    transform:translate3d(0,-7px,0) rotateX(.6deg)!important;
  }
}

/* Global motion feels deliberate rather than uniformly applied. */
@media(hover:hover) and (pointer:fine){
  .standard-badge:hover,.utility:hover,.roadmap-grid article:hover,.trust-grid article:hover{
    transform:translate3d(0,-6px,0)!important;
  }
  .horizon-badges span:hover{
    transform:translate3d(0,-3px,0)!important;
  }
}

/* Responsive authority rail: no long horizontal separators on narrow screens. */
@media(max-width:900px){
  .architecture-layers{
    --sb-spine-x:30px;
    --sb-pad-left:72px;
    padding:28px 18px 28px 72px!important;
  }
  .architecture-layers > div{
    grid-template-columns:1fr!important;
    gap:7px!important;
    min-height:118px!important;
    padding:22px 24px!important;
  }
  .architecture-layers .siteborne{
    grid-template-columns:48px 1fr!important;
    gap:12px!important;
  }
  .architecture-layers .siteborne > strong{grid-column:1/-1!important}
  .architecture-layers > div::before{left:-42px!important;width:34px!important}
  .architecture-layers > i{
    margin-left:calc(var(--sb-spine-x) - var(--sb-pad-left) - 7px)!important;
  }
}
@media(max-width:560px){
  .architecture-layers{
    --sb-spine-x:20px;
    --sb-pad-left:54px;
    padding:22px 12px 22px 54px!important;
    border-left-color:rgba(126,247,196,.15)!important;
  }
  .architecture-layers:after{width:1px}
  .architecture-layers > div{
    min-height:132px!important;
    padding:20px!important;
  }
  .architecture-layers > div::before{left:-34px!important;width:27px!important}
  .architecture-deep .section-head h2::after{
    display:block;
    width:max-content;
    margin:12px 0 0;
    transform:none;
  }
  .section-head::before{left:-13px}
}
@media(prefers-reduced-motion:reduce){
  .architecture-layers > i{animation:none!important}
  .architecture-layers > div,.architecture-badges article{transition:none!important}
  main > .section::after,.section-head::before{transition:none!important}
}
@media print{
  .architecture-layers:after,.architecture-layers > div::before,
  .architecture-layers > i::before,.architecture-deep::before{display:none!important}
  .architecture-layers > i{display:none!important}
}


/* Branch strokes stay off the content plane; the vertical spine + pulse nodes carry sequence. */
.architecture-layers > div::before{display:none!important}


/* ================================================================
   DIRECTED EXPERIENCE PASS — DISTINCT CHAPTERS + SIGNATURE INTERACTION
   2026-09-21
   Additive design layer. Public-safe visual storytelling only.
   ================================================================ */

/* ---------- Sitewide chapter pacing ---------- */
body[data-page] main{
  --chapter-glow:var(--mint);
}
body[data-page="developers"] main{--chapter-glow:var(--cyan)}
body[data-page="docs"] main{--chapter-glow:var(--violet)}
body[data-page="how-it-works"] main{--chapter-glow:var(--mint)}
body[data-page="pricing"] main{--chapter-glow:var(--amber)}
body[data-page="security"] main{--chapter-glow:var(--violet)}
body[data-page="status"] main{--chapter-glow:var(--cyan)}
body[data-page="privacy"] main,
body[data-page="terms"] main{--chapter-glow:var(--mint)}

.page-hero{
  isolation:isolate;
}
.page-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(44vw,680px);
  aspect-ratio:1;
  right:-8vw;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  opacity:.34;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--chapter-glow) 8%,transparent) 0 1px,transparent 2px),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 44px,color-mix(in srgb,var(--chapter-glow) 7%,transparent) 45px 46px,transparent 47px 88px);
  -webkit-mask-image:radial-gradient(circle,#000 0 42%,transparent 74%);
  mask-image:radial-gradient(circle,#000 0 42%,transparent 74%);
}
.page-hero h1{
  text-wrap:balance;
}
@media(max-width:760px){
  .page-hero::after{width:520px;right:-310px;opacity:.19}
}

/* Give major home chapters deliberate scale contrast. */
@media(min-width:980px){
  .signature-convergence .section-head h2,
  .architecture-deep .section-head h2,
  .economics-section .section-head h2,
  .roadmap-section .section-head h2{
    font-size:clamp(54px,5.5vw,88px);
    line-height:.98;
    letter-spacing:-.048em;
    max-width:1120px;
  }
  .signature-convergence .section-head p,
  .architecture-deep .section-head p,
  .economics-section .section-head p,
  .roadmap-section .section-head p{
    max-width:760px;
    font-size:17px;
  }
}

/* ---------- Signature convergence interaction ---------- */
.signature-convergence{
  --scene-a:var(--cyan);
  --scene-b:var(--violet);
  position:relative;
  overflow:clip;
  background:
    radial-gradient(70rem 34rem at 8% 30%,rgba(126,247,196,.035),transparent 68%),
    radial-gradient(60rem 32rem at 94% 66%,rgba(155,140,255,.045),transparent 66%);
}
.signature-convergence::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.62;
  background-image:
    linear-gradient(rgba(105,216,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.014) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 86%,transparent);
}
.signature-head{max-width:1100px}

.convergence-stage{
  --route:var(--mint);
  position:relative;
  margin-top:42px;
  border:1px solid rgba(214,255,239,.13);
  background:rgba(4,16,13,.74);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  box-shadow:0 42px 110px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
}
.convergence-stage[data-route="a2a"]{--route:var(--violet)}
.convergence-stage[data-route="api"]{--route:var(--cyan)}
.convergence-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(40rem 22rem at 48% 50%,color-mix(in srgb,var(--route) 6%,transparent),transparent 68%),
    linear-gradient(90deg,transparent 0 32%,color-mix(in srgb,var(--route) 2%,transparent) 48% 52%,transparent 68%);
  transition:background .55s ease;
}
.convergence-stage::after{
  content:"ILLUSTRATIVE PUBLIC MODEL";
  position:absolute;
  right:22px;
  bottom:14px;
  color:rgba(174,203,193,.30);
  font:800 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
}
.convergence-eyebrow{
  color:color-mix(in srgb,var(--route) 84%,white 8%);
  font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
  transition:color .35s ease;
}
.convergence-contract{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 28px;
  border-bottom:1px solid rgba(126,247,196,.18);
  background:
    linear-gradient(90deg,rgba(126,247,196,.045),transparent 44%),
    rgba(6,22,18,.84);
}
.convergence-contract strong{
  display:block;
  margin-top:6px;
  color:var(--text);
  font-size:14px;
  font-weight:700;
}
.convergence-lock{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding:8px 11px;
  border:1px solid rgba(126,247,196,.18);
  color:rgba(214,255,239,.78);
  font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
}
.convergence-lock i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 14px rgba(126,247,196,.58);
}
.convergence-core{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(170px,.54fr) minmax(360px,1.45fr) minmax(210px,.70fr);
  min-height:520px;
}
.convergence-chooser,
.convergence-proof{
  padding:34px 28px;
  background:rgba(4,17,13,.52);
}
.convergence-chooser{
  border-right:1px solid rgba(214,255,239,.08);
}
.convergence-proof{
  border-left:1px solid rgba(214,255,239,.08);
}
.convergence-chooser button{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
  margin:14px 0 0;
  padding:16px 16px 15px;
  text-align:left;
  border:1px solid rgba(214,255,239,.10);
  background:rgba(8,27,21,.52);
  color:var(--text);
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
  transition:border-color .28s ease,background .28s ease,transform .28s var(--ease),box-shadow .28s ease;
}
.convergence-chooser button b{
  font-size:14px;
  letter-spacing:-.01em;
}
.convergence-chooser button small{
  color:var(--muted2);
  font-size:10px;
}
.convergence-chooser button:hover,
.convergence-chooser button:focus-visible{
  border-color:color-mix(in srgb,var(--route) 38%,transparent);
  transform:translateX(4px);
}
.convergence-chooser button.active{
  border-color:color-mix(in srgb,var(--route) 48%,transparent);
  background:color-mix(in srgb,var(--route) 7%,rgba(8,27,21,.70));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--route) 70%,transparent),0 14px 36px rgba(0,0,0,.12);
}
.convergence-visual{
  position:relative;
  overflow:hidden;
  min-width:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(126,247,196,.028),transparent 28%),
    linear-gradient(rgba(105,216,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.015) 1px,transparent 1px);
  background-size:auto,40px 40px,40px 40px;
}
.convergence-visual::before,
.convergence-visual::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.convergence-visual::before{
  width:360px;
  height:360px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--route) 18%,transparent);
  border-radius:50%;
  box-shadow:
    0 0 0 54px color-mix(in srgb,var(--route) 2%,transparent),
    0 0 0 108px color-mix(in srgb,var(--route) 1.4%,transparent);
  transition:border-color .35s ease,box-shadow .35s ease;
}
.convergence-visual::after{
  left:50%;
  top:46px;
  bottom:46px;
  width:1px;
  background:linear-gradient(transparent,color-mix(in srgb,var(--route) 48%,transparent) 18% 82%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--route) 14%,transparent);
}
.convergence-fixed-axis{
  position:absolute;
  z-index:3;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  gap:8px;
}
.convergence-fixed-axis span{
  color:rgba(214,255,239,.52);
  font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
}
.convergence-fixed-axis i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 16px rgba(126,247,196,.58);
}
.convergence-core-mark{
  position:absolute;
  z-index:6;
  left:50%;
  top:50%;
  width:100px;
  height:100px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--route) 38%,transparent);
  border-radius:50%;
  background:rgba(5,20,16,.92);
  box-shadow:
    0 0 0 14px color-mix(in srgb,var(--route) 3%,transparent),
    0 0 48px color-mix(in srgb,var(--route) 12%,transparent);
  transition:border-color .4s ease,box-shadow .4s ease;
}
.convergence-core-mark img{
  width:54px;
  height:auto;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--route) 22%,transparent));
}
.convergence-path{
  position:absolute;
  z-index:4;
  left:7%;
  right:7%;
  top:50%;
  height:2px;
  transform-origin:center;
  opacity:.16;
  transition:opacity .35s ease,filter .35s ease,transform .45s var(--ease);
}
.convergence-path::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--route) 44%,transparent) 18% 82%,transparent);
}
.convergence-path i{
  position:absolute;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--route) 80%,white 8%);
  box-shadow:0 0 14px color-mix(in srgb,var(--route) 42%,transparent);
}
.convergence-path i:nth-child(1){left:20%}
.convergence-path i:nth-child(2){left:50%}
.convergence-path i:nth-child(3){left:80%}
.path-a{transform:rotate(-18deg)}
.path-b{transform:rotate(0deg)}
.path-c{transform:rotate(18deg)}
.convergence-stage[data-route="mcp"] .path-a,
.convergence-stage[data-route="a2a"] .path-b,
.convergence-stage[data-route="api"] .path-c{
  opacity:1;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--route) 22%,transparent));
}
.convergence-stage[data-route="mcp"] .path-b,
.convergence-stage[data-route="mcp"] .path-c,
.convergence-stage[data-route="a2a"] .path-a,
.convergence-stage[data-route="a2a"] .path-c,
.convergence-stage[data-route="api"] .path-a,
.convergence-stage[data-route="api"] .path-b{
  transform:scale(.96) rotate(var(--inactive-angle,0deg));
}
.path-a{--inactive-angle:-18deg}
.path-b{--inactive-angle:0deg}
.path-c{--inactive-angle:18deg}
.convergence-evidence{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
}
.convergence-evidence span{
  padding:6px 8px;
  border:1px solid rgba(214,255,239,.10);
  background:rgba(4,16,13,.78);
  color:rgba(174,203,193,.62);
  font:800 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.10em;
}
.convergence-proof-stack{
  display:grid;
  gap:8px;
  margin-top:18px;
}
.convergence-proof-stack span{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:1px solid rgba(214,255,239,.08);
  background:rgba(8,27,21,.44);
  color:rgba(214,255,239,.76);
  font-size:11px;
}
.convergence-proof-stack b{
  color:var(--route);
  font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  transition:color .35s ease;
}
.convergence-outcome{
  margin-top:24px;
  padding:18px 16px;
  border:1px solid color-mix(in srgb,var(--route) 28%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--route) 6%,transparent),rgba(8,27,21,.62));
  box-shadow:inset 2px 0 0 color-mix(in srgb,var(--route) 56%,transparent);
}
.convergence-outcome small{
  display:block;
  color:color-mix(in srgb,var(--route) 78%,white 6%);
  font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
}
.convergence-outcome strong{
  display:block;
  margin:8px 0 4px;
  color:var(--text);
  font-size:21px;
  letter-spacing:-.03em;
}
.convergence-outcome span{
  color:var(--muted2);
  font-size:10px;
}
.convergence-footer{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  border-top:1px solid rgba(214,255,239,.08);
  background:rgba(3,14,11,.72);
}
.convergence-footer>div{
  padding:18px 22px;
  min-width:0;
}
.convergence-footer>div+div{border-left:1px solid rgba(214,255,239,.07)}
.convergence-footer span{
  display:block;
  color:rgba(174,203,193,.45);
  font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.convergence-footer strong{
  display:block;
  margin-top:5px;
  color:rgba(214,255,239,.77);
  font-size:11px;
}

/* Only the selected path gets kinetic motion, so motion explains state. */
@media(prefers-reduced-motion:no-preference){
  .convergence-stage[data-route="mcp"] .path-a i,
  .convergence-stage[data-route="a2a"] .path-b i,
  .convergence-stage[data-route="api"] .path-c i{
    animation:sbConvergencePulse 2.6s ease-in-out infinite;
  }
  .convergence-stage[data-route] .convergence-core-mark{
    animation:sbCoreBreath 4.8s ease-in-out infinite;
  }
}
@keyframes sbConvergencePulse{
  0%,100%{opacity:.38;box-shadow:0 0 8px color-mix(in srgb,var(--route) 22%,transparent)}
  50%{opacity:1;box-shadow:0 0 20px color-mix(in srgb,var(--route) 56%,transparent)}
}
@keyframes sbCoreBreath{
  0%,100%{transform:translate(-50%,-50%) scale(.98)}
  50%{transform:translate(-50%,-50%) scale(1.025)}
}

/* ---------- Interoperability becomes an ecosystem field ---------- */
.standards-section{
  position:relative;
  overflow:clip;
  background:
    radial-gradient(42rem 26rem at 18% 52%,rgba(105,216,255,.035),transparent 68%),
    radial-gradient(48rem 30rem at 88% 38%,rgba(126,247,196,.028),transparent 70%);
}
.standards-section::after{
  content:"";
  position:absolute;
  right:-160px;
  top:50%;
  width:540px;
  height:540px;
  transform:translateY(-50%);
  border-radius:50%;
  pointer-events:none;
  opacity:.33;
  background:
    radial-gradient(circle at 50% 50%,rgba(105,216,255,.32) 0 2px,transparent 3px),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 58px,rgba(105,216,255,.07) 59px 60px,transparent 61px 116px);
  -webkit-mask-image:radial-gradient(circle,#000 0 48%,transparent 76%);
  mask-image:radial-gradient(circle,#000 0 48%,transparent 76%);
}
.standard-grid{
  position:relative;
  z-index:2;
}
.standard-badge{
  backdrop-filter:blur(8px);
}
.standard-badge::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:1px;
  transform:scaleX(.12);
  transform-origin:left;
  background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet));
  opacity:.24;
  transition:transform .35s var(--ease),opacity .35s ease;
}
.standard-badge:hover::after{transform:scaleX(1);opacity:.72}

/* ---------- Proof path becomes a purposeful sequential signal ---------- */
.proof-path-section{
  position:relative;
  overflow:clip;
  background:
    radial-gradient(58rem 26rem at 50% 56%,rgba(105,216,255,.028),transparent 68%);
}
.proof-path{
  position:relative;
  counter-reset:proofstep;
}
.proof-path article{
  position:relative;
  overflow:visible;
  transition:transform .3s var(--ease),border-color .3s ease,background .3s ease;
}
.proof-path article::after{
  content:"";
  position:absolute;
  z-index:0;
  top:50%;
  right:-18px;
  width:36px;
  height:1px;
  background:linear-gradient(90deg,rgba(105,216,255,.38),rgba(126,247,196,.12));
  pointer-events:none;
}
.proof-path article:nth-child(4)::after,
.proof-path article:nth-child(8)::after{display:none}
.proof-path article::before{
  content:"";
  position:absolute;
  z-index:2;
  right:-3px;
  top:calc(50% - 3px);
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(105,216,255,.30);
  pointer-events:none;
}
.proof-path article:nth-child(4)::before,
.proof-path article:nth-child(8)::before{display:none}
.proof-path article:hover{
  transform:translateY(-5px);
  border-color:rgba(105,216,255,.22);
  background:linear-gradient(180deg,rgba(105,216,255,.025),rgba(255,255,255,.005));
}
@media(max-width:980px){
  .proof-path article::after,.proof-path article::before{display:none}
}

/* ---------- Economics: circuit, not decoration ---------- */
.economics-section{
  position:relative;
  overflow:clip;
  background:
    radial-gradient(54rem 24rem at 84% 34%,rgba(255,190,92,.045),transparent 68%),
    radial-gradient(42rem 22rem at 10% 72%,rgba(105,216,255,.022),transparent 68%);
}
.payment-flow{
  position:relative;
  isolation:isolate;
}
.payment-flow::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:4%;
  right:4%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,190,92,.24) 12% 68%,rgba(105,216,255,.18) 86%,transparent);
}
.payment-flow article{
  background:rgba(6,21,17,.91);
  box-shadow:0 18px 48px rgba(0,0,0,.12);
}
.payment-flow article span{
  box-shadow:0 0 0 5px rgba(255,190,92,.025);
}
.rail-grid article{
  position:relative;
  overflow:hidden;
}
.rail-grid article::after{
  content:"";
  position:absolute;
  right:-54px;
  top:-54px;
  width:120px;
  height:120px;
  border:1px solid rgba(255,190,92,.10);
  border-radius:50%;
  pointer-events:none;
}
@media(max-width:760px){
  .payment-flow::before{display:none}
}

/* ---------- Roadmap: expansion radiates from a stable semantic core ---------- */
.roadmap-section{
  position:relative;
  overflow:clip;
  background:
    radial-gradient(60rem 30rem at 12% 40%,rgba(155,140,255,.042),transparent 67%),
    radial-gradient(56rem 28rem at 90% 70%,rgba(126,247,196,.026),transparent 68%);
}
.roadmap-section::before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  right:-240px;
  top:180px;
  border-radius:50%;
  pointer-events:none;
  opacity:.34;
  background:
    radial-gradient(circle,rgba(126,247,196,.28) 0 2px,transparent 3px),
    repeating-radial-gradient(circle,transparent 0 52px,rgba(155,140,255,.065) 53px 54px,transparent 55px 104px);
  -webkit-mask-image:radial-gradient(circle,#000 0 46%,transparent 76%);
  mask-image:radial-gradient(circle,#000 0 46%,transparent 76%);
}
.roadmap-grid{
  position:relative;
  z-index:2;
}
.roadmap-grid article{
  overflow:hidden;
}
.roadmap-grid article::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:74px;
  height:1px;
  background:linear-gradient(90deg,var(--violet),var(--mint),transparent);
  opacity:.52;
  transition:width .4s var(--ease),opacity .4s ease;
}
.roadmap-grid article:hover::after{width:42%;opacity:.92}
.roadmap-horizon{
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 82px rgba(0,0,0,.15);
}
.roadmap-horizon::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-70px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(126,247,196,.14);
  box-shadow:0 0 0 26px rgba(105,216,255,.018),0 0 0 52px rgba(155,140,255,.014);
  pointer-events:none;
}

/* ---------- Status: observed truth becomes visual material ---------- */
.status-evidence-band{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid rgba(214,255,239,.10);
  background:
    linear-gradient(90deg,rgba(105,216,255,.025),transparent 42%),
    rgba(4,16,13,.66);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  overflow:hidden;
  margin-top:18px;
  margin-bottom:24px;
}
.status-evidence-band>span{
  position:relative;
  min-width:0;
  padding:18px 18px 16px;
}
.status-evidence-band>span+span{
  border-left:1px solid rgba(214,255,239,.07);
}
.status-evidence-band>span::before{
  content:"";
  position:absolute;
  left:18px;
  top:0;
  width:28px;
  height:1px;
  background:var(--cyan);
  opacity:.58;
}
.status-evidence-band b,
.status-evidence-band small{
  display:block;
  font:800 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
}
.status-evidence-band b{color:rgba(105,216,255,.72)}
.status-evidence-band strong{
  display:block;
  margin:7px 0 5px;
  color:var(--text);
  font-size:13px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.status-evidence-band small{
  color:rgba(174,203,193,.48);
  line-height:1.45;
}
body[data-page="status"] .table{
  background:
    linear-gradient(180deg,rgba(105,216,255,.018),transparent 22%),
    rgba(4,16,13,.58);
}
body[data-page="status"] .table thead{
  box-shadow:inset 0 -1px 0 rgba(105,216,255,.10);
}
@media(max-width:980px){
  .status-evidence-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-evidence-band>span:nth-child(3){border-left:0}
}
@media(max-width:560px){
  .status-evidence-band{grid-template-columns:1fr}
  .status-evidence-band>span+span{border-left:0;border-top:1px solid rgba(214,255,239,.07)}
}

/* ---------- Responsive signature composition ---------- */
@media(max-width:1040px){
  .convergence-core{
    grid-template-columns:190px minmax(300px,1fr);
  }
  .convergence-proof{
    grid-column:1/-1;
    border-left:0;
    border-top:1px solid rgba(214,255,239,.08);
    display:grid;
    grid-template-columns:180px 1fr 1fr;
    gap:18px;
    align-items:start;
  }
  .convergence-proof-stack{margin-top:0;grid-template-columns:repeat(2,1fr)}
  .convergence-outcome{margin-top:0}
}
@media(max-width:760px){
  .convergence-contract{
    align-items:flex-start;
    flex-direction:column;
  }
  .convergence-core{
    grid-template-columns:1fr;
    min-height:0;
  }
  .convergence-chooser{
    border-right:0;
    border-bottom:1px solid rgba(214,255,239,.08);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .convergence-chooser>.convergence-eyebrow{grid-column:1/-1}
  .convergence-chooser button{
    margin:0;
    padding:12px;
  }
  .convergence-chooser button:hover,
  .convergence-chooser button:focus-visible{transform:translateY(-2px)}
  .convergence-visual{min-height:380px}
  .convergence-proof{
    grid-column:auto;
    grid-template-columns:1fr;
  }
  .convergence-proof-stack{grid-template-columns:repeat(2,1fr)}
  .convergence-footer{grid-template-columns:1fr}
  .convergence-footer>div+div{border-left:0;border-top:1px solid rgba(214,255,239,.07)}
  .standards-section::after,.roadmap-section::before{opacity:.18}
}
@media(max-width:480px){
  .convergence-chooser{grid-template-columns:1fr}
  .convergence-proof-stack{grid-template-columns:1fr}
  .convergence-visual{min-height:330px}
  .convergence-evidence{gap:4px}
  .convergence-evidence span{padding:5px 6px;font-size:6px}
}

/* Reduced motion preserves the designed states without kinetic cycling. */
@media(prefers-reduced-motion:reduce){
  .convergence-stage *,
  .standard-badge::after,
  .roadmap-grid article::after{
    animation:none!important;
    transition:none!important;
  }
}
@media print{
  .signature-convergence::before,
  .standards-section::after,
  .roadmap-section::before,
  .roadmap-horizon::after,
  .page-hero::after{display:none!important}
}


/* ================================================================
   FINAL UX + PERFORMANCE POLISH — 2026-09-21
   No page elements or content changed. CSS-only presentation refinements.
   ================================================================ */

/* Stable layout and more readable typographic rhythm. */
html{scrollbar-gutter:stable}
h1,h2,h3,.display{text-wrap:balance}
p,.lede,.hero-lede,.section-head p{text-wrap:pretty}
code{overflow-wrap:anywhere}

/* Security disclosure callout: readable measure, clear grouping, deliberate spacing. */
#vulnerability-disclosure .status-panel{
  position:relative;
  width:min(100%,980px);
  margin-top:8px;
  padding:clamp(24px,2.6vw,34px) clamp(24px,3vw,38px);
  border:1px solid rgba(222,255,243,.12);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(126,247,196,.026),transparent 42%),
    rgba(5,18,14,.62);
  box-shadow:
    0 24px 64px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.018);
}
#vulnerability-disclosure .status-panel::before{
  content:"";
  position:absolute;
  left:0;top:20px;bottom:20px;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(126,247,196,.58),rgba(105,216,255,.24),transparent);
}
#vulnerability-disclosure .status-panel .badge{
  margin-bottom:18px;
}
#vulnerability-disclosure .status-panel p{
  max-width:76ch;
  margin:0;
  color:var(--muted);
  font-size:clamp(16px,1.18vw,18px);
  line-height:1.72;
  letter-spacing:-.012em;
}
#vulnerability-disclosure .status-panel code{
  display:inline;
  padding:.1em .28em;
  border:1px solid rgba(222,255,243,.08);
  border-radius:5px;
  background:rgba(255,255,255,.025);
  color:rgba(235,250,244,.92);
  font-size:.92em;
  white-space:normal;
}
@media(max-width:620px){
  #vulnerability-disclosure .status-panel{
    padding:22px 20px 24px;
    border-radius:15px;
  }
  #vulnerability-disclosure .status-panel p{line-height:1.68}
}

/* Avoid reserving compositor memory for every card; promote only while interacting. */
.sb-card-enhanced{will-change:auto}
.sb-card-enhanced.sb-card-hover,
.sb-card-enhanced:focus-within{will-change:transform}

/* Preserve premium glass where it matters, reduce expensive blur on constrained/touch layouts. */
@media(max-width:760px){
  .standard-badge{backdrop-filter:none}
  .noise{opacity:.012}
}
@media(prefers-reduced-motion:reduce){
  .sb-card-enhanced,
  .status-panel,
  .standard-badge{will-change:auto!important}
}
@media(update:slow){
  .sb-card-enhanced{transform:none!important;will-change:auto!important}
  .standard-badge,header{backdrop-filter:none!important}
  .sb-section-handoff span{animation:none!important}
}

/* Fine-control visual polish without increasing visual noise. */
@media(hover:hover) and (pointer:fine){
  #vulnerability-disclosure .status-panel{
    transition:border-color .28s ease,background-color .28s ease,box-shadow .28s ease;
  }
  #vulnerability-disclosure .status-panel:hover{
    border-color:rgba(126,247,196,.19);
    box-shadow:
      0 28px 72px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.024);
  }
}


/* ======================================================================
   WHY SITEBORNE — public objection / proof surface
   Added as a distinct chapter while preserving the core SITEBORNE system.
   ====================================================================== */
@media (max-width:1180px) and (min-width:1041px){
  .navlinks,.navcta{display:none}
  .menu{display:flex;margin-left:auto}
}
.navlinks{gap:18px}

body[data-page="why-siteborne"]{
  background:
    radial-gradient(circle at 76% 8%,rgba(105,216,255,.08),transparent 25rem),
    radial-gradient(circle at 18% 20%,rgba(126,247,196,.075),transparent 30rem),
    radial-gradient(circle at 68% 66%,rgba(155,140,255,.055),transparent 34rem),
    linear-gradient(180deg,#04100d 0%,#061511 46%,#04100d 100%);
}
.why-hero{padding:104px 0 118px;min-height:760px;display:flex;align-items:center;position:relative;overflow:hidden}
.why-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,transparent 0 7.9%,rgba(126,247,196,.055) 8%,transparent 8.08%),
  linear-gradient(180deg,transparent 0 86%,rgba(105,216,255,.04) 86.1%,transparent 86.2%);
  opacity:.8}
.why-hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(460px,.97fr);gap:76px;align-items:center}
.why-hero-copy{position:relative;z-index:2}
.why-display{font-size:clamp(64px,6.8vw,108px);line-height:.88;letter-spacing:-.065em;max-width:790px}
.why-display span{background:linear-gradient(110deg,var(--mint) 8%,var(--cyan) 52%,var(--violet) 92%);background-clip:text;-webkit-background-clip:text;color:transparent}
.why-hero .lead{max-width:720px;font-size:20px;line-height:1.62;color:#afc2bb;margin-top:34px}
.why-proof-rule{display:flex;align-items:center;gap:10px;margin-top:28px;font-size:9px;letter-spacing:.17em;color:var(--muted2)}
.why-proof-rule span{width:7px;height:7px;border-radius:99px;background:var(--mint);box-shadow:0 0 18px rgba(126,247,196,.7)}

.why-orbit{position:relative;min-height:550px;isolation:isolate}
.why-orbit:before{content:"";position:absolute;inset:5% 4%;border-radius:50%;background:radial-gradient(circle,rgba(126,247,196,.06),transparent 58%);filter:blur(1px)}
.why-orbit-ring{position:absolute;left:50%;top:46%;border:1px solid rgba(126,247,196,.18);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.why-orbit-ring:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 20px rgba(126,247,196,.7)}
.why-orbit-ring.ring-a{width:230px;height:230px;border-color:rgba(126,247,196,.28)}
.why-orbit-ring.ring-a:after{top:18px;right:44px}
.why-orbit-ring.ring-b{width:370px;height:370px;border-color:rgba(105,216,255,.18)}
.why-orbit-ring.ring-b:after{background:var(--cyan);bottom:36px;left:58px;box-shadow:0 0 20px rgba(105,216,255,.65)}
.why-orbit-ring.ring-c{width:510px;height:510px;border-color:rgba(155,140,255,.12)}
.why-orbit-ring.ring-c:after{background:var(--violet);right:46px;top:116px;box-shadow:0 0 20px rgba(155,140,255,.6)}
.why-orbit-core{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:188px;height:188px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:
  radial-gradient(circle at 50% 38%,rgba(126,247,196,.13),rgba(4,16,13,.94) 62%);
  border:1px solid rgba(126,247,196,.42);box-shadow:0 0 0 12px rgba(126,247,196,.025),0 30px 80px rgba(0,0,0,.34)}
.why-orbit-core:before,.why-orbit-core:after{content:"";position:absolute;border-radius:50%;inset:11px;border:1px dashed rgba(105,216,255,.18)}
.why-orbit-core:after{inset:28px;border-color:rgba(155,140,255,.18)}
.why-orbit-core>*{position:relative;z-index:1}
.why-orbit-kicker{font:800 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:var(--mint);margin-bottom:10px}
.why-orbit-core strong{font-size:18px;line-height:1.1}
.why-orbit-core small{font-size:9px;color:var(--muted2);margin-top:10px}
.why-orbit-node{position:absolute;padding:9px 12px;border:1px solid var(--line);background:rgba(4,16,13,.84);backdrop-filter:blur(8px);font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--muted)}
.why-orbit-node:before{content:"";width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:7px;background:currentColor;box-shadow:0 0 10px currentColor}
.node-identity{left:5%;top:17%;color:var(--cyan)}
.node-gateway{right:1%;top:22%;color:var(--mint)}
.node-runtime{right:3%;bottom:28%;color:var(--violet)}
.node-provider{left:0;bottom:25%;color:var(--mint)}
.node-rail{left:44%;bottom:4%;color:var(--amber)}
.why-orbit-outcome{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.17em;color:#d9e8e2;white-space:nowrap}
.why-orbit-outcome:before{content:"";position:absolute;left:50%;bottom:28px;height:64px;width:1px;background:linear-gradient(transparent,var(--mint));opacity:.45}
.why-orbit-outcome i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 20px rgba(126,247,196,.8)}

@keyframes whyOrbitA{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes whyOrbitB{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@media (prefers-reduced-motion:no-preference){
  .why-orbit-ring.ring-a{animation:whyOrbitA 22s linear infinite}
  .why-orbit-ring.ring-b{animation:whyOrbitB 31s linear infinite}
  .why-orbit-ring.ring-c{animation:whyOrbitA 44s linear infinite}
  .why-orbit-node{animation:whyFloat 6s ease-in-out infinite alternate}
  .why-orbit-node:nth-of-type(2){animation-delay:-1.4s}.why-orbit-node:nth-of-type(3){animation-delay:-2.8s}.why-orbit-node:nth-of-type(4){animation-delay:-4s}.why-orbit-node:nth-of-type(5){animation-delay:-5s}
}
@keyframes whyFloat{from{translate:0 -2px}to{translate:0 5px}}

.why-objections{position:relative;padding-top:128px}
.why-objections:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(126,247,196,.02),transparent 16rem)}
.why-objection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:54px}
.why-objection{--oa:var(--mint);position:relative;min-height:440px;padding:34px;border:1px solid var(--line);background:
  linear-gradient(140deg,color-mix(in srgb,var(--oa) 4%,transparent),transparent 40%),
  rgba(5,20,16,.72);overflow:hidden;isolation:isolate;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,14px 100%,0 calc(100% - 14px))}
.why-objection:before{content:"";position:absolute;left:0;top:0;width:3px;height:46%;background:linear-gradient(var(--oa),transparent);opacity:.7}
.why-objection:after{content:"";position:absolute;width:180px;height:180px;right:-70px;bottom:-80px;border:1px solid color-mix(in srgb,var(--oa) 18%,transparent);border-radius:50%;box-shadow:0 0 0 34px color-mix(in srgb,var(--oa) 2%,transparent),0 0 0 68px color-mix(in srgb,var(--oa) 1.5%,transparent);z-index:-1}
.why-objection.accent-cyan{--oa:var(--cyan)}.why-objection.accent-violet{--oa:var(--violet)}.why-objection.accent-amber{--oa:var(--amber)}
.why-objection-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);column-gap:46px;min-height:370px}
.why-objection-wide .why-attack{grid-column:1/-1}
.why-objection h3{font-size:clamp(25px,2.2vw,36px);line-height:1.08;letter-spacing:-.035em;max-width:680px;margin:46px 0 18px}
.why-objection-wide h3{margin-top:28px}
.why-objection p{color:var(--muted);max-width:700px}
.why-attack{font-size:9px;letter-spacing:.15em;color:var(--oa);font-weight:850}
.why-proof-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px}
.why-proof-pair.stacked{grid-template-columns:1fr;position:absolute;left:34px;right:34px;bottom:30px}
.why-proof-pair span{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-top:1px solid color-mix(in srgb,var(--oa) 30%,transparent);background:rgba(255,255,255,.012);font-size:11px;color:#9eb3ab}
.why-proof-pair b{font:800 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--oa)}
.why-proof-pair a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--oa) 50%,transparent);text-underline-offset:3px}
.why-mini-diagram{position:relative;align-self:center;justify-self:stretch;min-height:170px;border:1px solid color-mix(in srgb,var(--oa) 18%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--oa) 3%,transparent),transparent);font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--muted2);overflow:hidden}
.why-mini-diagram:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black,transparent)}
.contract-split{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;padding:24px;gap:8px}
.contract-split b{position:absolute;top:24px;left:24px;color:var(--mint)}
.contract-split i{position:absolute;left:24px;right:24px;top:48%;height:1px;background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet))}
.contract-split span{position:relative;padding:12px;border:1px solid var(--line);text-align:center;color:#afc0ba}
.authority-stack{display:flex;flex-direction:column;gap:6px;justify-content:center;padding:24px 50px}
.authority-stack span{padding:11px;border-left:2px solid var(--oa);background:rgba(255,255,255,.025);color:#c5d5cf}
.authority-stack span:nth-child(2){margin-left:14px}.authority-stack span:nth-child(3){margin-left:28px}.authority-stack span:nth-child(4){margin-left:42px}
.runtime-accept{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px}.runtime-accept span{padding:13px;border:1px solid var(--line);color:#d2dfda}.runtime-accept i{font-size:24px;color:var(--oa)}
.policy-projection{display:grid;place-items:center;padding:20px}.policy-projection b{padding:15px 26px;border:1px solid var(--oa);color:var(--oa)}.policy-projection span{position:absolute;padding:10px;border:1px solid var(--line);color:#afc0ba}.policy-projection span:nth-of-type(1){left:16px;bottom:16px}.policy-projection span:nth-of-type(2){right:16px;bottom:16px}
.graph-invariant{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:22px}.graph-invariant b{color:var(--oa)}.graph-invariant>div{display:flex;gap:14px}.graph-invariant i{width:34px;height:34px;border:1px solid var(--line);transform:rotate(45deg);position:relative}.graph-invariant i:after{content:"";position:absolute;left:100%;top:50%;width:15px;height:1px;background:var(--oa)}.graph-invariant i:last-child:after{display:none}.graph-invariant span{color:#c8d6d1}
.receipt-proof{display:flex;align-items:center;justify-content:center;gap:12px}.receipt-proof span{border:1px solid var(--line);padding:12px}.receipt-proof i{font-size:24px;color:var(--oa)}
.extension-frame{display:grid;place-items:center}.extension-frame b{border:1px solid var(--mint);padding:18px 24px;color:var(--mint)}.extension-frame span{position:absolute;right:18px;bottom:18px;border:1px dashed var(--violet);padding:10px;color:var(--violet)}
.money-boundary{display:flex;align-items:center;justify-content:center;gap:7px;padding:16px}.money-boundary span{border:1px solid var(--line);padding:10px}.money-boundary i{height:1px;flex:1;max-width:30px;background:linear-gradient(90deg,var(--amber),transparent)}
.standards-fit{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:18px;align-content:center}.standards-fit b{grid-column:1/-1;text-align:center;border:1px solid var(--oa);padding:12px;color:var(--oa)}.standards-fit span{padding:9px;border:1px solid var(--line);text-align:center}
.supplier-field{display:flex;align-items:center;justify-content:center;gap:9px;padding:18px}.supplier-field span{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:#d5e2dd}.supplier-field i{width:38px;height:1px;background:linear-gradient(90deg,var(--oa),transparent)}.supplier-field b{padding:14px;border:1px solid var(--oa);color:var(--oa)}
.why-current-state{display:grid;grid-template-columns:190px 1fr;gap:24px;margin-top:28px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-current-state span{font-size:9px;letter-spacing:.16em;color:var(--amber)}.why-current-state p{margin:0;color:var(--muted)}.why-current-state a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

.why-ledger{position:relative;background:linear-gradient(180deg,rgba(105,216,255,.025),transparent 70%)}
.why-ledger-grid{margin-top:48px;border:1px solid var(--line);background:rgba(4,16,13,.58);overflow:hidden}
.why-ledger-head,.why-ledger-row{display:grid;grid-template-columns:1.05fr 1.45fr 1.45fr .65fr;gap:22px;align-items:center;padding:18px 22px}
.why-ledger-head{font-size:8px;letter-spacing:.15em;color:var(--cyan);background:rgba(105,216,255,.04);border-bottom:1px solid var(--line)}
.why-ledger-row{min-height:108px;border-bottom:1px solid var(--line);transition:background .25s var(--ease)}
.why-ledger-row:last-child{border-bottom:0}.why-ledger-row strong{font-size:16px}.why-ledger-row p{margin:0;color:var(--muted);font-size:13px}.why-ledger-row p:nth-of-type(2){color:#8eaaa0}.why-ledger-row a{font:800 9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mint);letter-spacing:.08em;text-align:right}
@media (hover:hover){.why-ledger-row:hover{background:rgba(126,247,196,.025)}}

.why-complements{position:relative;overflow:hidden}
.why-complements:before{content:"";position:absolute;width:720px;height:720px;border-radius:50%;left:50%;top:54%;transform:translate(-50%,-50%);border:1px solid rgba(126,247,196,.06);box-shadow:0 0 0 90px rgba(105,216,255,.012),0 0 0 180px rgba(155,140,255,.008);pointer-events:none}
.why-ecosystem{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px;min-height:760px;align-content:space-between}
.why-eco-card{position:relative;z-index:2;min-height:200px;padding:26px;border:1px solid var(--line);background:rgba(5,20,16,.76);clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}
.why-eco-card span{font-size:8px;letter-spacing:.15em;color:var(--cyan)}.why-eco-card strong{display:block;font-size:20px;margin-top:30px}.why-eco-card p{font-size:13px;color:var(--muted);margin:9px 0 28px}.why-eco-card em{position:absolute;left:26px;bottom:18px;font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--muted2);font-style:normal}
.why-eco-card:after{content:"";position:absolute;width:1px;height:80px;left:50%;background:linear-gradient(var(--mint),transparent);opacity:.2}
.eco-identity:after,.eco-gateway:after,.eco-runtime:after{top:100%}.eco-observe:after,.eco-rail:after,.eco-discovery:after{bottom:100%;transform:rotate(180deg)}
.why-eco-core{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:330px;height:220px;border:1px solid rgba(126,247,196,.42);background:radial-gradient(circle at 50% 40%,rgba(126,247,196,.09),rgba(4,16,13,.94) 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));box-shadow:0 32px 90px rgba(0,0,0,.35)}
.why-eco-core span{font-size:8px;letter-spacing:.18em;color:var(--mint);margin-bottom:18px}.why-eco-core strong{font-size:22px;line-height:1.1}.why-eco-core i{font-style:normal;color:var(--cyan);margin:6px 0}.why-eco-core small{margin-top:14px;color:var(--muted2)}
.why-eco-outcome{position:absolute;left:50%;top:50%;transform:translate(-50%,150px);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;z-index:4}.why-eco-outcome span{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px rgba(126,247,196,.7)}.why-eco-outcome b{font-size:9px;letter-spacing:.14em}.why-eco-outcome small{font-size:8px;color:var(--muted2)}
.why-role-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.why-role-badges span{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#b8c9c3}.why-role-badges b{font-size:7px;letter-spacing:.1em;color:var(--muted2)}
.why-role-note{font-size:12px;color:var(--muted2);margin-top:14px}.why-role-note a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}

.why-reaction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:52px}
.why-reaction{--ra:var(--mint);position:relative;min-height:650px;padding:30px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--ra) 3.5%,transparent),rgba(5,20,16,.74));overflow:hidden;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.why-reaction.platform{--ra:var(--cyan)}.why-reaction.supplier{--ra:var(--violet)}
.why-reaction:before{content:"";position:absolute;inset:auto -80px -120px auto;width:260px;height:260px;border:1px solid color-mix(in srgb,var(--ra) 12%,transparent);border-radius:50%;box-shadow:0 0 0 45px color-mix(in srgb,var(--ra) 1.8%,transparent)}
.why-reaction-top{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.14em;color:var(--ra)}.why-reaction-top i{font-style:normal;font-size:42px;line-height:1;color:rgba(255,255,255,.055);letter-spacing:-.06em}
.why-reaction h3{font-size:27px;line-height:1.08;letter-spacing:-.035em;margin:34px 0 24px;min-height:118px}
.why-reaction ul{padding-left:18px;color:var(--muted);font-size:13px}.why-reaction li{margin:10px 0}.why-reaction>p{position:absolute;left:30px;right:30px;bottom:28px;margin:0;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--ra) 24%,transparent);font-size:12px;color:var(--muted)}.why-reaction>p b{color:var(--ra)}
.why-reaction-visual{height:170px;border:1px solid color-mix(in srgb,var(--ra) 16%,transparent);position:relative;margin-bottom:28px;background:rgba(0,0,0,.08);font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted2);overflow:hidden}
.why-reaction-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px}
.buyer-visual{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:9px;padding:20px}.buyer-visual span:first-child{grid-column:1/-1;text-align:center;color:var(--ra);padding:10px;border:1px solid var(--ra)}.buyer-visual i{position:absolute;top:50%;left:20%;right:20%;height:1px;background:var(--ra);opacity:.4}.buyer-visual span:not(:first-child){position:relative;padding:9px;border:1px solid var(--line);text-align:center}.buyer-visual b{grid-column:1/-1;text-align:center;color:#dbe6e2}
.platform-visual{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:18px;align-content:center}.platform-visual span{position:relative;padding:9px;border:1px solid var(--line);text-align:center}.platform-visual b{grid-column:1/-1;padding:10px;border:1px solid var(--ra);color:var(--ra);text-align:center}
.supplier-visual{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px}.supplier-visual span{position:relative;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%}.supplier-visual i{width:28px;height:1px;background:var(--ra)}.supplier-visual b{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);white-space:nowrap;color:var(--ra);border:1px solid var(--ra);padding:9px}

.why-shortcuts{background:linear-gradient(180deg,transparent,rgba(255,200,106,.018),transparent)}
.why-neq-grid{display:grid;grid-template-columns:repeat(7,1fr);margin-top:48px;border:1px solid var(--line)}
.why-neq-grid>div{min-height:190px;padding:22px 14px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-right:1px solid var(--line);background:rgba(5,20,16,.58)}
.why-neq-grid>div:last-child{border-right:0}.why-neq-grid b,.why-neq-grid span{font:800 8px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.why-neq-grid b{color:#bdcec8}.why-neq-grid span{color:var(--muted2)}.why-neq-grid i{font-style:normal;font-size:36px;line-height:1;color:var(--amber);margin:22px 0;opacity:.88}

.why-proof-surface{padding-bottom:136px}
.why-proof-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:50px;background:var(--line);border:1px solid var(--line)}
.why-proof-link{position:relative;min-height:360px;padding:28px;background:#061511;overflow:hidden;transition:background .25s var(--ease),transform .25s var(--ease)}
.why-proof-link:after{content:"↗";position:absolute;right:24px;bottom:22px;font-size:40px;color:rgba(255,255,255,.04);transition:color .25s,transform .25s}
.why-proof-link span{font-size:8px;letter-spacing:.15em;color:var(--cyan)}.why-proof-link h3{font-size:25px;line-height:1.08;letter-spacing:-.035em;margin:70px 0 16px}.why-proof-link p{font-size:13px;color:var(--muted)}.why-proof-link b{position:absolute;left:28px;bottom:26px;font:800 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mint);letter-spacing:.08em}
@media (hover:hover){.why-proof-link:hover{background:#081a15;transform:translateY(-3px)}.why-proof-link:hover:after{color:rgba(126,247,196,.28);transform:translate(3px,-3px)}}
.why-closing{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:88px;padding:54px;border:1px solid rgba(126,247,196,.22);background:
  radial-gradient(circle at 85% 20%,rgba(155,140,255,.08),transparent 18rem),
  linear-gradient(110deg,rgba(126,247,196,.035),transparent 55%);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
.why-closing h2{font-size:clamp(36px,4vw,64px);line-height:.98;letter-spacing:-.055em;margin:16px 0 0}.why-closing-actions{display:flex;flex-direction:column;gap:10px;min-width:190px}

@media (max-width:1000px){
  .why-hero-grid{grid-template-columns:1fr;gap:40px}.why-orbit{min-height:510px;max-width:620px;width:100%;margin-inline:auto}
  .why-objection-grid{grid-template-columns:1fr}.why-objection-wide{grid-column:auto;grid-template-columns:1fr}.why-objection-wide .why-mini-diagram{margin-top:14px}.why-objection{min-height:420px}
  .why-ecosystem{grid-template-columns:1fr 1fr;min-height:auto;padding-bottom:330px}.why-eco-core{top:auto;bottom:84px}.why-eco-outcome{top:auto;bottom:28px;transform:translateX(-50%)}.why-eco-card:after{display:none}
  .why-reaction-grid{grid-template-columns:1fr}.why-reaction{min-height:560px}.why-reaction h3{min-height:auto}
  .why-neq-grid{grid-template-columns:repeat(4,1fr)}.why-neq-grid>div{border-bottom:1px solid var(--line)}.why-neq-grid>div:nth-child(4n){border-right:0}
  .why-proof-links{grid-template-columns:1fr 1fr}.why-closing{grid-template-columns:1fr}.why-closing-actions{flex-direction:row;min-width:0}
}
@media (max-width:700px){
  .why-hero{padding:72px 0 88px;min-height:auto}.why-display{font-size:clamp(52px,15vw,78px)}.why-hero .lead{font-size:17px}
  .why-orbit{min-height:430px}.why-orbit-ring.ring-a{width:180px;height:180px}.why-orbit-ring.ring-b{width:280px;height:280px}.why-orbit-ring.ring-c{width:390px;height:390px}.why-orbit-core{width:150px;height:150px}.why-orbit-core strong{font-size:16px}
  .why-orbit-node{font-size:7px;padding:8px 9px}.node-identity{left:0}.node-gateway{right:0}.node-provider{left:0}.node-runtime{right:0}.node-rail{left:38%}
  .why-objection{padding:24px;min-height:470px}.why-objection-wide{min-height:auto}.why-objection h3{font-size:26px;margin-top:34px}.why-proof-pair{grid-template-columns:1fr}.why-proof-pair.stacked{left:24px;right:24px;bottom:22px}.why-objection-wide .why-proof-pair{margin-bottom:14px}
  .why-mini-diagram{min-height:140px}
  .why-current-state{grid-template-columns:1fr;gap:8px}
  .why-ledger-grid{border:0;background:transparent}.why-ledger-head{display:none}.why-ledger-row{grid-template-columns:1fr;gap:8px;padding:22px 0;border-top:1px solid var(--line);min-height:0}.why-ledger-row p{font-size:12px}.why-ledger-row a{text-align:left;margin-top:5px}
  .why-ecosystem{grid-template-columns:1fr;padding-bottom:310px}.why-eco-card{min-height:170px}.why-eco-core{width:min(330px,calc(100% - 20px));height:200px}.why-role-badges{gap:7px}.why-role-badges span{width:100%;justify-content:space-between}
  .why-reaction{padding:24px;min-height:610px}.why-reaction>p{left:24px;right:24px}
  .why-neq-grid{grid-template-columns:1fr 1fr}.why-neq-grid>div{min-height:150px}.why-neq-grid>div:nth-child(4n){border-right:1px solid var(--line)}.why-neq-grid>div:nth-child(2n){border-right:0}
  .why-proof-links{grid-template-columns:1fr}.why-proof-link{min-height:280px}.why-proof-link h3{margin-top:44px}.why-closing{padding:30px}.why-closing-actions{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .why-orbit-ring,.why-orbit-node{animation:none!important}
}


/* ================================================================
   DEVELOPER ADOPTION EXPERIENCE — 2026-09-21
   Public-safe quickstart, integration ecosystem, and production guidance.
   Semantic colors follow the SITEBORNE brand bible:
   mint=contract, cyan=proof, violet=protocol, amber=economic completion.
   ================================================================ */

.dev6-hero{
  position:relative;
  overflow:hidden;
  padding-top:clamp(128px,10vw,184px);
  padding-bottom:clamp(84px,8vw,132px);
  border-bottom:1px solid var(--line);
}
.dev6-hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(126,247,196,.025) 1px,transparent 1px),
    linear-gradient(rgba(105,216,255,.022) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,black 0%,black 62%,transparent 94%);
  opacity:.72;
}
.dev6-hero:after{
  content:"";
  position:absolute;
  width:min(680px,48vw);
  aspect-ratio:1;
  right:-14vw;
  top:2%;
  border-radius:50%;
  pointer-events:none;
  border:1px solid rgba(105,216,255,.07);
  box-shadow:
    0 0 0 80px rgba(126,247,196,.012),
    0 0 0 160px rgba(155,140,255,.009);
}
.dev6-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
  gap:clamp(58px,7vw,110px);
  align-items:center;
}
.dev6-hero-copy h1{
  max-width:840px;
  margin:24px 0 28px;
  font-size:clamp(58px,6.35vw,108px);
  line-height:.89;
  letter-spacing:-.066em;
}
.dev6-hero-copy h1 span{
  display:block;
  color:var(--mint);
  background:linear-gradient(100deg,var(--mint),var(--cyan) 62%,var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.dev6-hero-copy>p{
  max-width:760px;
  color:var(--muted);
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.62;
}
.dev6-proofline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:30px;
}
.dev6-proofline span{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:35px;
  padding:0 12px;
  border:1px solid var(--line);
  background:rgba(4,16,13,.66);
  font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.065em;
  color:#9eb4ac;
}
.dev6-proofline i{
  width:6px;height:6px;border-radius:50%;display:inline-block;
  box-shadow:0 0 12px currentColor;
}
.dev6-proofline .mint{background:var(--mint);color:var(--mint)}
.dev6-proofline .cyan{background:var(--cyan);color:var(--cyan)}
.dev6-proofline .violet{background:var(--violet);color:var(--violet)}
.dev6-proofline .amber{background:var(--amber);color:var(--amber)}

.dev6-console{
  position:relative;
  min-width:0;
  border:1px solid rgba(126,247,196,.24);
  background:
    linear-gradient(180deg,rgba(126,247,196,.035),transparent 22%),
    rgba(3,14,11,.91);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  box-shadow:0 36px 96px rgba(0,0,0,.24);
}
.dev6-console:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(black,transparent 92%);
}
.dev6-console-top{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  min-height:58px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
  font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.dev6-console-top>span{display:flex;gap:6px}
.dev6-console-top i{width:7px;height:7px;border-radius:50%;background:#2c4039}
.dev6-console-top i:first-child{background:var(--mint)}
.dev6-console-top b{color:#a8bcb4}
.dev6-console-top em{font-style:normal;color:var(--mint);font-size:7px;letter-spacing:.13em}
.dev6-console-body{position:relative;z-index:1;padding:18px}
.dev6-live-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-height:58px;
  padding:0 14px;
  border:1px solid transparent;
  border-bottom-color:rgba(255,255,255,.055);
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.dev6-live-row:hover{
  border-color:rgba(105,216,255,.16);
  background:rgba(105,216,255,.025);
  transform:translateX(3px);
}
.dev6-live-row>span{font-size:8px;color:var(--cyan);letter-spacing:.12em}
.dev6-live-row code{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d6e2dd;
  font-size:12px;
}
.dev6-live-row b{
  font-size:9px;
  color:var(--muted2);
  font-weight:600;
  white-space:nowrap;
}
.dev6-live-row.paid>span{color:var(--amber)}
.dev6-console-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:16px 0 8px;
  font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  color:var(--muted2);
}
.dev6-console-divider:before,.dev6-console-divider:after{content:"";height:1px;flex:1;background:var(--line)}
.dev6-console-foot{
  position:relative;z-index:1;
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:15px 18px 17px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted2);
}
.dev6-console-foot a{color:var(--mint);font-weight:700}

.dev6-local-nav{
  position:sticky;
  top:72px;
  z-index:35;
  border-bottom:1px solid var(--line);
  background:rgba(4,16,13,.88);
  backdrop-filter:blur(16px);
}
.dev6-local-nav .shell{
  display:flex;
  align-items:center;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.dev6-local-nav .shell::-webkit-scrollbar{display:none}
.dev6-local-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:49px;
  padding:0 18px;
  border-left:1px solid var(--line);
  color:#8ba198;
  font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .2s,background .2s;
}
.dev6-local-nav a:last-child{border-right:1px solid var(--line)}
.dev6-local-nav a:hover,.dev6-local-nav a:focus-visible{color:#e9f1ee;background:rgba(126,247,196,.025)}

.dev6-quickstart{
  position:relative;
  background:
    radial-gradient(circle at 12% 18%,rgba(126,247,196,.035),transparent 27rem),
    linear-gradient(180deg,transparent,rgba(126,247,196,.008),transparent);
}
.dev6-step-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:52px;
}
.dev6-step{
  --dev-accent:var(--mint);
  position:relative;
  min-height:520px;
  padding:30px;
  border:1px solid var(--line);
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--dev-accent) 4%,transparent),transparent 38%),
    rgba(5,20,16,.74);
  overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
}
.dev6-step:before{
  content:"";
  position:absolute;
  left:0;top:0;width:3px;height:38%;
  background:linear-gradient(var(--dev-accent),transparent);
  opacity:.85;
}
.dev6-step:after{
  content:"";
  position:absolute;
  right:-75px;bottom:-88px;
  width:200px;height:200px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--dev-accent) 14%,transparent);
  box-shadow:0 0 0 42px color-mix(in srgb,var(--dev-accent) 1.6%,transparent);
}
.dev6-step.violet{--dev-accent:var(--violet)}
.dev6-step.cyan{--dev-accent:var(--cyan)}
.dev6-step-num{
  position:absolute;
  right:24px;top:20px;
  font:800 54px/.9 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:-.08em;
  color:rgba(255,255,255,.045);
}
.dev6-step>span{color:var(--dev-accent);font-size:8px;letter-spacing:.13em}
.dev6-step h3{
  margin:74px 0 24px;
  font-size:clamp(26px,2vw,34px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.dev6-step>p{position:relative;z-index:1;color:var(--muted);font-size:13px;line-height:1.65;margin-top:24px}
.dev6-code-block{
  position:relative;
  border:1px solid color-mix(in srgb,var(--dev-accent,var(--cyan)) 15%,var(--line));
  background:#04100d;
  overflow:hidden;
}
.dev6-code-block pre{
  margin:0;
  padding:20px 74px 20px 20px;
  overflow:auto;
  color:#bcd2c9;
  font:500 11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
  scrollbar-width:thin;
}
.dev6-code-block.large pre{padding:28px 78px 32px 28px;font-size:11px;line-height:1.62}
.dev6-copy{
  position:absolute;
  z-index:4;
  right:10px;top:10px;
  min-width:52px;
  height:28px;
  border:1px solid var(--line);
  background:#071813;
  color:var(--mint);
  font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  cursor:pointer;
}
.dev6-copy:hover,.dev6-copy:focus-visible{border-color:rgba(126,247,196,.35);background:#0a2019}
.dev6-flow-mini{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:112px;
  padding:18px;
  border:1px solid rgba(105,216,255,.13);
  background:rgba(105,216,255,.015);
}
.dev6-flow-mini span{
  display:grid;
  place-items:center;
  min-width:46px;
  min-height:46px;
  padding:6px;
  border:1px solid var(--line);
  color:#bdcec8;
  font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
}
.dev6-flow-mini i{flex:1;min-width:10px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.dev6-runtime-note{
  margin-top:20px;
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.5fr) auto;
  gap:28px;
  align-items:center;
  padding:24px 28px;
  border:1px solid rgba(255,200,106,.18);
  background:linear-gradient(90deg,rgba(255,200,106,.035),transparent 50%);
}
.dev6-runtime-note>div{display:flex;flex-direction:column;gap:7px}
.dev6-runtime-note .mono{font-size:7px;color:var(--amber);letter-spacing:.14em}
.dev6-runtime-note strong{font-size:15px}
.dev6-runtime-note p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.dev6-runtime-note a{white-space:nowrap;color:var(--cyan);font-size:11px;font-weight:700}

.dev6-surfaces{
  position:relative;
  background:
    radial-gradient(circle at 82% 32%,rgba(155,140,255,.04),transparent 28rem);
}
.dev6-surface-tabs{margin-top:54px}
.dev6-tablist{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  background:rgba(4,16,13,.66);
}
.dev6-tablist button{
  min-height:78px;
  padding:16px 18px;
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  color:#80978e;
  font:800 11px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:left;
  cursor:pointer;
  transition:color .2s,background .2s,box-shadow .2s;
}
.dev6-tablist button:last-child{border-right:0}
.dev6-tablist button small{
  display:block;
  margin-top:8px;
  font-size:6px;
  letter-spacing:.15em;
  color:var(--muted2);
}
.dev6-tablist button.active{
  color:#eff7f4;
  background:rgba(155,140,255,.045);
  box-shadow:inset 0 -2px var(--violet);
}
.dev6-tablist button:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.dev6-tabpanels{border:1px solid var(--line);border-top:0}
.dev6-tabpanel{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
  gap:56px;
  align-items:center;
  min-height:420px;
  padding:52px;
  background:
    linear-gradient(120deg,rgba(155,140,255,.025),transparent 42%),
    rgba(5,20,16,.60);
}
.dev6-tabpanel[hidden]{display:none!important}
.dev6-tabpanel>div:first-child>span{color:var(--violet);font-size:8px;letter-spacing:.14em}
.dev6-tabpanel h3{font-size:clamp(34px,3.5vw,54px);line-height:1;letter-spacing:-.052em;margin:28px 0 22px;max-width:760px}
.dev6-tabpanel p{max-width:760px;color:var(--muted);font-size:14px;line-height:1.65}
.dev6-inline-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.dev6-inline-links a{
  padding:10px 12px;border:1px solid var(--line);color:var(--cyan);
  font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
}
.dev6-tool-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:28px}
.dev6-tool-list span{padding:12px;border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.dev6-tool-list b{font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d5e3de}
.dev6-tool-list em{font-style:normal;color:var(--muted2);font-size:8px}
.dev6-surface-visual{
  position:relative;
  min-height:265px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(155,140,255,.16);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:28px 28px;
  overflow:hidden;
}
.dev6-surface-visual:before{
  content:"";
  position:absolute;
  width:230px;height:230px;border-radius:50%;
  border:1px solid rgba(155,140,255,.15);
  box-shadow:0 0 0 34px rgba(155,140,255,.012),0 0 0 68px rgba(105,216,255,.008);
}
.dev6-surface-visual>*{position:relative;z-index:1}
.dev6-surface-visual b{
  width:72px;height:72px;display:grid;place-items:center;
  border:1px solid rgba(155,140,255,.35);
  background:#061511;
  color:var(--violet);
  font:900 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.dev6-surface-visual span{
  padding:8px 10px;border:1px solid var(--line);background:#061511;
  color:#a6bbb3;font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
}
.dev6-surface-visual i{width:24px;height:1px;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.dev6-surface-visual.x402 b{color:var(--amber);border-color:rgba(255,200,106,.34)}
.dev6-surface-visual.x402:before{border-color:rgba(255,200,106,.16)}
.dev6-surface-visual.http b{color:var(--cyan);border-color:rgba(105,216,255,.32)}
.dev6-surface-visual.mcp b{color:var(--mint);border-color:rgba(126,247,196,.32)}

.dev6-example{
  position:relative;
  background:
    linear-gradient(180deg,rgba(105,216,255,.014),transparent 18rem),
    radial-gradient(circle at 15% 64%,rgba(105,216,255,.035),transparent 24rem);
}
.dev6-example-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr);
  gap:22px;
  align-items:stretch;
  margin-top:52px;
}
.dev6-code-shell{
  min-width:0;
  border:1px solid rgba(105,216,255,.18);
  background:#04100d;
}
.dev6-code-head{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  min-height:50px;padding:0 18px;border-bottom:1px solid var(--line);
  font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
}
.dev6-code-head span{color:var(--cyan)}
.dev6-code-head em{font-style:normal;color:var(--muted2);font-size:7px}
.dev6-code-shell .dev6-code-block{border:0}
.dev6-paid-flow{
  display:flex;
  flex-direction:column;
  padding:18px;
  border:1px solid var(--line);
  background:rgba(5,20,16,.70);
}
.dev6-paid-step{
  --flow:var(--mint);
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  min-height:86px;
  padding:14px;
  border:1px solid color-mix(in srgb,var(--flow) 14%,transparent);
  background:color-mix(in srgb,var(--flow) 2.4%,transparent);
}
.dev6-paid-step.amber{--flow:var(--amber)}
.dev6-paid-step.violet{--flow:var(--violet)}
.dev6-paid-step.cyan{--flow:var(--cyan)}
.dev6-paid-step.mint{--flow:var(--mint)}
.dev6-paid-step>span{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--flow) 28%,transparent);
  color:var(--flow);font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.dev6-paid-step b{font-size:14px}
.dev6-paid-step p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.dev6-paid-step em{font-style:normal;color:var(--flow);font:800 7px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-align:right}
.dev6-paid-line{height:16px;width:1px;background:linear-gradient(var(--line),var(--mint));margin-left:37px}
.dev6-curl{
  margin-top:22px;
  display:grid;
  grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);
  gap:22px;
  padding:28px;
  border:1px solid var(--line);
  background:linear-gradient(90deg,rgba(126,247,196,.02),transparent);
}
.dev6-curl-copy>span{font-size:7px;color:var(--mint);letter-spacing:.14em}
.dev6-curl-copy h3{font-size:25px;line-height:1.08;margin:18px 0 12px}
.dev6-curl-copy p{margin:0;color:var(--muted);font-size:12px}

.dev6-ecosystem{
  position:relative;
  background:
    radial-gradient(circle at 50% 48%,rgba(126,247,196,.035),transparent 22rem),
    radial-gradient(circle at 85% 18%,rgba(155,140,255,.028),transparent 26rem);
}
.dev6-ecosystem-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr);
  gap:22px;
  align-items:center;
  margin-top:56px;
  padding:32px;
  border:1px solid var(--line);
  background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),
    rgba(4,16,13,.66);
  background-size:40px 40px;
  overflow:hidden;
}
.dev6-ecosystem-stage:before,.dev6-ecosystem-stage:after{
  content:"";
  position:absolute;
  top:50%;
  width:14%;
  height:1px;
  opacity:.5;
}
.dev6-ecosystem-stage:before{left:37%;background:linear-gradient(90deg,transparent,var(--mint))}
.dev6-ecosystem-stage:after{right:37%;background:linear-gradient(90deg,var(--violet),transparent)}
.dev6-stack-column{position:relative;z-index:1;min-width:0}
.dev6-stack-column>span{display:block;margin-bottom:12px;color:var(--muted2);font-size:7px;letter-spacing:.14em}
.dev6-stack-column.execution>span{color:var(--cyan)}
.dev6-stack-column.protocols>span{color:var(--violet)}
.dev6-stack-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.dev6-stack-cards article{
  min-width:0;
  min-height:94px;
  padding:14px;
  border:1px solid var(--line);
  background:rgba(5,20,16,.83);
  transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.dev6-stack-cards article:hover{transform:translateY(-2px);border-color:rgba(105,216,255,.22);background:#071b15}
.dev6-stack-cards b{display:block;font-size:12px;color:#d7e4df}
.dev6-stack-cards em{display:block;margin-top:6px;font-style:normal;color:var(--muted2);font:800 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.dev6-stack-cards p{margin:11px 0 0;color:#799087;font-size:10px;line-height:1.45}
.dev6-stack-core{
  position:relative;z-index:2;
  width:220px;aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1px solid rgba(126,247,196,.28);
  border-radius:50%;
  background:radial-gradient(circle,rgba(126,247,196,.07),rgba(4,16,13,.94) 67%);
  box-shadow:0 0 0 18px rgba(126,247,196,.012),0 0 0 36px rgba(105,216,255,.008);
}
.dev6-stack-core:before{
  content:"";
  position:absolute;inset:20px;border-radius:50%;border:1px dashed rgba(105,216,255,.16);
}
.dev6-stack-core img{position:relative;z-index:1;width:62px;height:auto}
.dev6-stack-core>span{position:relative;z-index:1;color:var(--mint);font-size:6px;letter-spacing:.14em;margin-bottom:12px}
.dev6-stack-core strong{position:relative;z-index:1;font-size:16px;line-height:1.08;margin-top:10px}
.dev6-stack-core small{position:relative;z-index:1;color:var(--muted2);font:700 7px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:8px}
.dev6-horizon{margin-top:24px;border:1px solid var(--line);background:rgba(5,20,16,.63)}
.dev6-horizon-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);
  gap:32px;
  align-items:end;
  padding:30px;
  border-bottom:1px solid var(--line);
}
.dev6-horizon-head h3{font-size:30px;line-height:1.08;margin:12px 0 0}
.dev6-horizon-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.dev6-horizon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.dev6-horizon-grid article{padding:22px;border-right:1px solid var(--line);min-width:0}
.dev6-horizon-grid article:last-child{border-right:0}
.dev6-horizon-grid article>span{display:block;margin-bottom:18px;color:var(--violet);font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em}
.dev6-horizon-grid article.identity>span{color:var(--cyan)}
.dev6-horizon-grid article.policy>span{color:var(--mint)}
.dev6-horizon-grid article.evidence>span{color:var(--cyan)}
.dev6-horizon-grid article>div{padding:11px 0;border-top:1px solid rgba(255,255,255,.05)}
.dev6-horizon-grid b{display:block;font-size:11px;font-weight:650;color:#b8cbc4}
.dev6-horizon-grid em{display:block;margin-top:5px;font-style:normal;font:800 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--muted2)}

.dev6-security{
  background:
    linear-gradient(180deg,transparent,rgba(255,200,106,.012),transparent);
}
.dev6-boundary-map{
  margin-top:54px;
  border:1px solid var(--line);
  background:rgba(5,20,16,.7);
}
.dev6-boundary-row{
  display:grid;
  grid-template-columns:1fr 80px 1fr 80px 1fr;
  min-height:106px;
  align-items:center;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.dev6-boundary-row:last-child{border-bottom:0}
.dev6-boundary-row span{font:800 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:#b8cbc4;padding:18px}
.dev6-boundary-row b{font-size:28px;color:var(--amber);font-weight:400;opacity:.82}
.dev6-errors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.dev6-errors article{
  display:grid;grid-template-columns:54px 1fr;gap:14px;
  min-height:190px;padding:20px;border:1px solid var(--line);background:rgba(5,20,16,.68);
}
.dev6-errors article>strong{
  display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,200,106,.24);
  color:var(--amber);font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.dev6-errors b{font-size:13px}
.dev6-errors p{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
.dev6-security-foot{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:24px;align-items:center;margin-top:22px;padding:22px 24px;
  border:1px solid rgba(126,247,196,.16);background:rgba(126,247,196,.018);
}
.dev6-security-foot span{font-size:7px;color:var(--mint);letter-spacing:.12em}
.dev6-security-foot p{margin:0;color:var(--muted);font-size:12px}
.dev6-security-foot a{color:var(--mint);font-size:11px;font-weight:700;white-space:nowrap}

.dev6-ship{
  position:relative;
  background:radial-gradient(circle at 50% 0,rgba(126,247,196,.028),transparent 24rem);
}
.dev6-ship-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:52px}
.dev6-ship-grid article{
  position:relative;
  min-height:390px;
  padding:28px;
  border:1px solid var(--line);
  background:rgba(5,20,16,.68);
  overflow:hidden;
}
.dev6-ship-grid article:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet));
  opacity:.7;
}
.dev6-ship-grid span{font-size:7px;color:var(--cyan);letter-spacing:.13em}
.dev6-ship-grid h3{font-size:30px;line-height:1;margin:54px 0 30px;letter-spacing:-.04em}
.dev6-ship-grid ul{margin:0;padding-left:18px;color:var(--muted);font-size:12px;line-height:1.55}
.dev6-ship-grid li{margin:13px 0}
.dev6-ship-grid code{font-size:10px;color:#c5d8d0}
.dev6-resources{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;margin-top:22px;border:1px solid var(--line);background:var(--line);
}
.dev6-resources a{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:14px;align-items:center;
  min-height:138px;padding:20px;background:#061511;
  transition:background .22s var(--ease),transform .22s var(--ease);
}
.dev6-resources a:hover{background:#081b16;transform:translateY(-2px)}
.dev6-resources a>span{font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mint)}
.dev6-resources b{font-size:15px;color:#e5eeeb}
.dev6-resources p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.4}
.dev6-resources em{font-style:normal;color:rgba(126,247,196,.38);font-size:25px}

.dev6-close{padding-top:108px;padding-bottom:120px}
.dev6-close .shell{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) auto;
  gap:48px;align-items:end;
  padding-top:54px;
  border-top:1px solid rgba(126,247,196,.22);
}
.dev6-close h2{font-size:clamp(46px,5vw,78px);line-height:.94;letter-spacing:-.058em;margin:22px 0}
.dev6-close h2 span{color:var(--mint)}
.dev6-close p{max-width:760px;color:var(--muted);font-size:15px}

/* Why SITEBORNE visibility / overlap hardening.
   Existing elements remain unchanged; layout is returned to normal flow. */
.why-objection:not(.why-objection-wide){
  display:flex;
  flex-direction:column;
  min-height:0;
}
.why-objection:not(.why-objection-wide)>.why-attack,
.why-objection:not(.why-objection-wide)>h3,
.why-objection:not(.why-objection-wide)>p{flex:0 0 auto}
.why-objection:not(.why-objection-wide)>.why-mini-diagram{
  order:4;
  flex:0 0 auto;
  width:100%;
  margin-top:24px;
}
.why-objection:not(.why-objection-wide)>.why-proof-pair{
  order:5;
  flex:0 0 auto;
}
.why-proof-pair.stacked{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  margin-top:20px;
}
.why-reaction{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.why-reaction h3{min-height:0}
.why-reaction>p{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  margin-top:auto;
}
.why-reaction-visual{flex:0 0 auto}
.why-proof-link{display:flex;flex-direction:column}
.why-proof-link b{position:static;margin-top:auto;padding-top:22px}
.why-proof-link:after{bottom:20px}
.why-orbit{overflow:visible}

/* Responsiveness */
@media (max-width:1180px){
  .dev6-hero-grid{grid-template-columns:1fr;gap:52px}
  .dev6-console{max-width:860px}
  .dev6-step-grid{grid-template-columns:1fr 1fr}
  .dev6-step:last-child{grid-column:1/-1;min-height:390px}
  .dev6-tabpanel{grid-template-columns:1fr;gap:34px}
  .dev6-surface-visual{min-height:210px}
  .dev6-example-grid{grid-template-columns:1fr}
  .dev6-ecosystem-stage{grid-template-columns:1fr;gap:30px}
  .dev6-ecosystem-stage:before,.dev6-ecosystem-stage:after{display:none}
  .dev6-stack-core{margin-inline:auto}
  .dev6-horizon-grid{grid-template-columns:1fr 1fr}
  .dev6-horizon-grid article:nth-child(2){border-right:0}
  .dev6-horizon-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .dev6-errors{grid-template-columns:1fr 1fr}
  .dev6-ship-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .dev6-local-nav{top:64px}
  .dev6-hero-copy h1{font-size:clamp(52px,12vw,82px)}
  .dev6-step-grid{grid-template-columns:1fr}
  .dev6-step:last-child{grid-column:auto}
  .dev6-step{min-height:0}
  .dev6-runtime-note{grid-template-columns:1fr}
  .dev6-runtime-note a{justify-self:start}
  .dev6-tablist{grid-template-columns:1fr 1fr}
  .dev6-tablist button:nth-child(2){border-right:0}
  .dev6-tablist button:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .dev6-tabpanel{padding:34px}
  .dev6-curl{grid-template-columns:1fr}
  .dev6-horizon-head{grid-template-columns:1fr}
  .dev6-boundary-row{grid-template-columns:1fr 45px 1fr 45px 1fr}
  .dev6-security-foot{grid-template-columns:1fr}
  .dev6-resources{grid-template-columns:1fr 1fr}
  .dev6-close .shell{grid-template-columns:1fr;align-items:start}
}
@media (max-width:640px){
  .dev6-hero{padding-top:112px;padding-bottom:74px}
  .dev6-hero:after{display:none}
  .dev6-hero-grid{gap:38px}
  .dev6-hero-copy h1{font-size:clamp(46px,14vw,68px);line-height:.92}
  .dev6-hero-copy>p{font-size:16px}
  .dev6-proofline{display:grid;grid-template-columns:1fr}
  .dev6-console-top{grid-template-columns:auto 1fr}
  .dev6-console-top em{display:none}
  .dev6-live-row{grid-template-columns:44px minmax(0,1fr)}
  .dev6-live-row b{grid-column:2;white-space:normal;margin-top:-10px;margin-bottom:10px}
  .dev6-console-foot{flex-direction:column}
  .dev6-local-nav a{padding:0 14px}
  .dev6-step{padding:24px}
  .dev6-step h3{margin-top:58px}
  .dev6-flow-mini{flex-wrap:wrap}
  .dev6-flow-mini i{min-width:18px}
  .dev6-tablist{grid-template-columns:1fr}
  .dev6-tablist button{border-right:0;border-bottom:1px solid var(--line)}
  .dev6-tablist button:last-child{border-bottom:0}
  .dev6-tabpanel{padding:25px}
  .dev6-tabpanel h3{font-size:34px}
  .dev6-tool-list{grid-template-columns:1fr}
  .dev6-surface-visual{min-height:230px;flex-wrap:wrap;padding:26px}
  .dev6-example-grid{gap:16px}
  .dev6-code-block.large pre{font-size:10px;padding-left:18px}
  .dev6-paid-step{grid-template-columns:42px minmax(0,1fr)}
  .dev6-paid-step em{grid-column:2;text-align:left}
  .dev6-paid-line{margin-left:34px}
  .dev6-ecosystem-stage{padding:18px}
  .dev6-stack-cards{grid-template-columns:1fr}
  .dev6-stack-core{width:190px}
  .dev6-horizon-grid{grid-template-columns:1fr}
  .dev6-horizon-grid article{border-right:0;border-bottom:1px solid var(--line)}
  .dev6-horizon-grid article:last-child{border-bottom:0}
  .dev6-boundary-row{
    grid-template-columns:1fr;
    min-height:0;
    padding:14px;
    gap:5px;
  }
  .dev6-boundary-row b{font-size:20px}
  .dev6-boundary-row span{padding:10px}
  .dev6-errors{grid-template-columns:1fr}
  .dev6-ship-grid{grid-template-columns:1fr}
  .dev6-ship-grid article{min-height:0}
  .dev6-resources{grid-template-columns:1fr}
  .dev6-close{padding-top:72px;padding-bottom:84px}
  .dev6-close h2{font-size:44px}
  .why-objection{padding:24px}
  .why-objection:not(.why-objection-wide)>.why-mini-diagram{margin-top:20px}
  .why-reaction>p{margin-top:24px}
  .why-orbit{min-height:455px}
  .node-identity{left:2%!important;top:10%!important}
  .node-gateway{right:2%!important;top:18%!important}
  .node-runtime{right:0!important;bottom:24%!important}
  .node-provider{left:0!important;bottom:24%!important}
  .node-rail{left:50%!important;transform:translateX(-50%);bottom:4%!important}
}
@media (prefers-reduced-motion:reduce){
  .dev6-live-row,.dev6-stack-cards article,.dev6-resources a{transition:none!important;transform:none!important}
}


/* Reference integration recipes + adoption patterns */
.dev6-recipes{
  position:relative;
  background:
    radial-gradient(circle at 18% 18%,rgba(105,216,255,.028),transparent 24rem),
    radial-gradient(circle at 82% 72%,rgba(155,140,255,.024),transparent 24rem);
}
.dev6-reference-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:52px;
}
.dev6-reference-grid article{
  position:relative;
  min-height:300px;
  padding:24px;
  border:1px solid var(--line);
  background:
    linear-gradient(150deg,rgba(105,216,255,.025),transparent 42%),
    rgba(5,20,16,.7);
  overflow:hidden;
}
.dev6-reference-grid article:before{
  content:"";
  position:absolute;
  left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent 65%);
  opacity:.65;
}
.dev6-reference-grid article>span{
  color:var(--cyan);
  font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
}
.dev6-reference-grid h3{
  font-size:24px;
  line-height:1.05;
  margin:54px 0 20px;
  letter-spacing:-.035em;
}
.dev6-reference-grid p{
  color:var(--muted);
  font-size:12px;
  line-height:1.58;
  margin:0 0 44px;
}
.dev6-reference-grid em{
  position:absolute;
  left:24px;bottom:22px;
  font-style:normal;
  color:var(--muted2);
  font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
}
.dev6-hook-stage{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:34px;
  align-items:center;
  margin-top:22px;
  padding:30px;
  border:1px solid var(--line);
  background:linear-gradient(90deg,rgba(126,247,196,.022),transparent 48%);
}
.dev6-hook-copy h3{
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.04em;
  margin:12px 0 16px;
}
.dev6-hook-copy p{color:var(--muted);font-size:12px;line-height:1.58;margin:0}
.dev6-hooks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.dev6-hooks span{
  min-height:52px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border:1px solid rgba(126,247,196,.12);
  background:rgba(126,247,196,.012);
  color:#a7bbb3;
  font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.dev6-hooks span:before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  margin-right:10px;background:var(--mint);
  box-shadow:0 0 12px rgba(126,247,196,.55);
}
.dev6-shadow{
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  gap:30px;
  align-items:center;
  margin-top:22px;
  padding:30px;
  border:1px solid rgba(155,140,255,.15);
  background:linear-gradient(90deg,rgba(155,140,255,.026),transparent 55%);
}
.dev6-shadow-copy>span{color:var(--violet);font-size:7px;letter-spacing:.14em}
.dev6-shadow-copy h3{font-size:32px;line-height:1;margin:16px 0}
.dev6-shadow-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.dev6-shadow-flow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.dev6-shadow-flow span{
  min-width:0;
  flex:1;
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:9px;
  padding:13px;
  border:1px solid var(--line);
  background:#061511;
  color:#aabdb6;
  font-size:10px;
}
.dev6-shadow-flow b{
  color:var(--violet);
  font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.dev6-shadow-flow i{font-style:normal;color:var(--muted2)}
.dev6-distribution{
  margin-top:22px;
  border:1px solid var(--line);
  padding:28px;
  background:rgba(5,20,16,.62);
}
.dev6-distribution{
  display:grid;
  grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);
  gap:30px;
  align-items:start;
}
.dev6-distribution h3{font-size:28px;line-height:1.05;margin:12px 0 0}
.dev6-distribution-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.dev6-distribution-chips span{
  min-width:150px;
  flex:1 1 160px;
  min-height:62px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:#061511;
}
.dev6-distribution-chips b{font-size:10px;color:#b8cbc4}
.dev6-distribution-chips em{
  font-style:normal;
  font:800 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
  color:var(--muted2);
}

@media (max-width:1180px){
  .dev6-reference-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .dev6-hook-stage,.dev6-shadow,.dev6-distribution{grid-template-columns:1fr}
  .dev6-shadow-flow{flex-wrap:wrap}
  .dev6-shadow-flow span{flex:1 1 42%}
}
@media (max-width:640px){
  .dev6-reference-grid{grid-template-columns:1fr}
  .dev6-hooks{grid-template-columns:1fr}
  .dev6-shadow-flow{display:grid;grid-template-columns:1fr}
  .dev6-shadow-flow i{text-align:center}
}

.dev6-x402-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.dev6-x402-meta span{padding:9px 11px;border:1px solid rgba(255,200,106,.15);background:rgba(255,200,106,.018);color:var(--muted2);font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.dev6-x402-meta b{margin-left:6px;color:var(--amber);font-weight:800}
.dev6-disabled-note{margin-top:14px!important;padding:11px 13px;border-left:2px solid rgba(255,200,106,.38);background:rgba(255,200,106,.015);font-size:10px!important;color:#8ea39b!important}
.dev6-disabled-note b{color:var(--amber)}

/* Developer adoption v6.1 — SDK-free client examples */
.dev6-client-examples{
  margin-top:22px;
  padding:28px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 78% 12%,rgba(105,216,255,.035),transparent 24rem),
    linear-gradient(115deg,rgba(155,140,255,.018),transparent 44%),
    rgba(4,16,13,.64);
}
.dev6-client-intro{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);
  column-gap:34px;
  align-items:end;
  margin-bottom:22px;
}
.dev6-client-intro>span{
  color:var(--violet);
  font-size:7px;
  letter-spacing:.14em;
}
.dev6-client-intro h3{
  grid-column:1;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.04em;
  margin:14px 0 0;
}
.dev6-client-intro p{
  grid-column:2;
  grid-row:1/3;
  align-self:end;
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:12px;
  line-height:1.62;
}
.dev6-client-intro code{color:var(--cyan)}
.dev6-client-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.dev6-client-grid article{
  min-width:0;
  border:1px solid rgba(105,216,255,.12);
  background:rgba(3,14,11,.78);
}
.dev6-client-grid .dev6-code-head{
  border-bottom:1px solid rgba(105,216,255,.1);
}
.dev6-client-grid .dev6-code-block{
  border:0;
  min-height:278px;
}
.dev6-client-grid pre{
  max-height:none;
}
@media (max-width:860px){
  .dev6-client-intro{grid-template-columns:1fr;gap:0}
  .dev6-client-intro h3,.dev6-client-intro p{grid-column:1;grid-row:auto}
  .dev6-client-intro p{margin-top:14px}
  .dev6-client-grid{grid-template-columns:1fr}
  .dev6-client-grid .dev6-code-block{min-height:0}
}


/* ================================================================
   THREE-SURFACE NETWORK EXPERIENCE — 2026-09-23
   Product / Network / Runtime are coordinated projections of unified semantic system.
   Additive visual + information-architecture polish; no existing content removed.
   ================================================================ */

:root{
  --sb-surfacebar-h:34px;
  --sb-header-stack-h:110px;
}
html{scroll-padding-top:calc(var(--sb-header-stack-h) + 18px)!important}

/* Persistent cross-domain orientation. */
.sb-surface-switchbar{
  position:sticky;top:0;z-index:132;
  min-height:var(--sb-surfacebar-h);
  border-bottom:1px solid rgba(214,255,239,.08);
  background:
    linear-gradient(90deg,rgba(126,247,196,.028),rgba(105,216,255,.018) 50%,rgba(155,140,255,.024)),
    rgba(3,13,11,.94);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
.sb-surface-switchbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 6%,rgba(126,247,196,.4) 20%,rgba(105,216,255,.55) 50%,rgba(155,140,255,.4) 80%,transparent 94%);
  opacity:.34
}
.sb-surface-switchbar-inner{
  min-height:34px;display:grid;
  grid-template-columns:minmax(160px,.75fr) auto minmax(160px,.75fr);
  align-items:center;gap:20px;
}
.sb-surface-system{
  min-width:0;display:flex;align-items:center;gap:9px;
  color:var(--muted2);font:850 7.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap
}
.sb-surface-system i{
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 13px rgba(126,247,196,.58)
}
.sb-surface-system strong{color:var(--text);font-size:8px}
.sb-surface-system em{font-style:normal}
.sb-surface-switch{
  justify-self:center;display:flex;align-items:stretch;height:34px;
  border-left:1px solid rgba(214,255,239,.07);
  border-right:1px solid rgba(214,255,239,.07)
}
.sb-surface-switch a{
  --switch-accent:var(--mint);
  position:relative;min-width:98px;padding:0 16px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  color:var(--muted2);font:780 8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.07em;text-transform:uppercase;
  border-right:1px solid rgba(214,255,239,.06);
  transition:background .2s ease,color .2s ease
}
.sb-surface-switch a:last-child{border-right:0}
.sb-surface-switch a[data-site-surface="network"]{--switch-accent:var(--cyan)}
.sb-surface-switch a[data-site-surface="runtime"]{--switch-accent:var(--violet)}
.sb-surface-switch a:hover{color:var(--text);background:rgba(255,255,255,.026)}
.sb-surface-switch a.active{
  color:var(--text);
  background:linear-gradient(180deg,color-mix(in srgb,var(--switch-accent) 6%,transparent),transparent)
}
.sb-surface-switch a.active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;
  background:var(--switch-accent);
  box-shadow:0 0 14px color-mix(in srgb,var(--switch-accent) 44%,transparent)
}
.sb-surface-switch small{
  color:var(--muted2);font-size:6px;letter-spacing:.08em
}
.sb-runtime-live{
  width:5px;height:5px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 10px rgba(126,247,196,.72)
}
.sb-surface-release{
  justify-self:end;display:flex;align-items:center;gap:8px;white-space:nowrap;
  color:var(--muted2);font:740 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase
}
.sb-surface-release b{
  color:var(--cyan);padding:3px 6px;border:1px solid rgba(105,216,255,.2);
  background:rgba(105,216,255,.035)
}

/* The normal header stays visually attached beneath the cross-domain rail. */
header:not(.error-header){top:var(--sb-surfacebar-h)!important}
.progress{
  top:calc(var(--sb-header-stack-h) - 2px)!important;
  z-index:141!important
}

/* Network surface hero: preserve canonical slogan while showing the semantic journey. */
.hero-semantic-sequence{
  margin-top:18px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  width:max-content;max-width:100%;
  color:var(--muted2);
  font:800 7.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase
}
.hero-semantic-sequence>span{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border:1px solid var(--line);
  background:rgba(4,16,13,.48);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))
}
.hero-semantic-sequence span b{font-size:6.5px}
.hero-semantic-sequence span em{font-style:normal;color:var(--text)}
.hero-semantic-sequence .mint b{color:var(--mint)}
.hero-semantic-sequence .cyan b{color:var(--cyan)}
.hero-semantic-sequence .violet b{color:var(--violet)}
.hero-semantic-sequence>i{font-style:normal;color:rgba(126,247,196,.45)}

/* Compact inspectability layer immediately after the hero. */
.network-command-rail{
  position:relative;z-index:2;
  border-top:1px solid rgba(105,216,255,.1);
  border-bottom:1px solid rgba(126,247,196,.1);
  background:
    linear-gradient(90deg,rgba(126,247,196,.018),rgba(105,216,255,.018) 46%,rgba(155,140,255,.016)),
    rgba(3,14,11,.48);
  overflow:hidden
}
.network-command-rail::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(105,216,255,.035),transparent);
  transform:translateX(-100%);
  animation:sbNetworkSweep 12s ease-in-out infinite
}
@keyframes sbNetworkSweep{50%,100%{transform:translateX(100%)}}
.network-command-inner{
  min-height:116px;display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,2.2fr);
  align-items:center;gap:30px;position:relative
}
.network-command-context{display:flex;flex-direction:column;gap:4px;min-width:0}
.network-command-kicker{
  display:flex;align-items:center;gap:8px;color:var(--cyan);
  font:900 7px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em
}
.network-command-kicker i{
  width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 12px rgba(105,216,255,.52)
}
.network-command-context strong{font-size:16px;letter-spacing:-.025em}
.network-command-context small{color:var(--muted2);font-size:9px}
.network-command-links{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;min-width:0
}
.network-command-links a{
  min-width:0;min-height:64px;padding:11px 10px;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  border:1px solid rgba(214,255,239,.09);
  background:rgba(4,16,13,.38);
  transition:transform .22s var(--ease),border-color .22s ease,background .22s ease
}
.network-command-links a:hover{
  transform:translateY(-2px);border-color:rgba(105,216,255,.25);
  background:rgba(105,216,255,.03)
}
.network-command-links b{font-size:9px;color:var(--text)}
.network-command-links span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted2);font:700 6.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;text-transform:uppercase
}

/* Independent badges and canonical machine endpoints are deliberately side-by-side:
   evidence can corroborate truth, but does not become authority. */
.external-proof-section{
  --scene-a:var(--cyan);--scene-b:var(--mint);
  position:relative;overflow:hidden;
  border-top:1px solid rgba(105,216,255,.07);
  border-bottom:1px solid rgba(126,247,196,.07);
  background:
    radial-gradient(44rem 24rem at 9% 36%,rgba(105,216,255,.04),transparent 66%),
    radial-gradient(48rem 26rem at 94% 72%,rgba(126,247,196,.03),transparent 68%)
}
.external-proof-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:
    linear-gradient(rgba(105,216,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.016) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)
}
.external-proof-layout{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:16px;position:relative
}
.external-badge-panel,.authoritative-surface-panel{
  min-width:0;position:relative;padding:26px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.022),rgba(4,16,13,.5));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  overflow:hidden
}
.external-badge-panel::before{
  content:"";position:absolute;top:0;bottom:0;width:1px;left:-4%;
  background:linear-gradient(180deg,transparent,var(--cyan),transparent);opacity:.52;
  animation:sbEvidenceSweep 8s ease-in-out infinite
}
@keyframes sbEvidenceSweep{
  0%,18%{left:-4%;opacity:0}
  30%{opacity:.5}
  62%{left:104%;opacity:.34}
  72%,100%{left:104%;opacity:0}
}
.external-proof-top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:28px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line)
}
.external-proof-top>span{
  display:flex;align-items:center;gap:8px;color:var(--muted2);
  font:850 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;text-transform:uppercase
}
.external-proof-top>span i{
  width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 12px rgba(126,247,196,.55)
}
.external-badge-panel .external-proof-top>span i{background:var(--cyan);box-shadow:0 0 12px rgba(105,216,255,.55)}
.external-proof-top>a,.external-proof-top>strong{
  color:var(--mint);font:800 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase
}
.live-badge-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px
}
.live-badge{
  min-width:0;min-height:72px;padding:13px 14px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px;
  border:1px solid rgba(214,255,239,.1);background:rgba(4,16,13,.46);
  transition:border-color .2s ease,transform .2s var(--ease),background .2s ease
}
.live-badge:hover{
  transform:translateY(-2px);border-color:rgba(105,216,255,.26);
  background:rgba(105,216,255,.025)
}
.live-badge img{height:20px;width:auto;max-width:100%;object-fit:contain}
.live-badge-fallback{display:none;flex-direction:column;gap:2px}
.live-badge.badge-error img{display:none}
.live-badge.badge-error .live-badge-fallback{display:flex}
.live-badge-fallback b{font-size:11px}
.live-badge-fallback small{
  color:var(--muted2);font:700 6.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase
}
.external-badge-panel>p,.authoritative-surface-panel>p{
  margin:18px 0 0;color:var(--muted2);font-size:9px;line-height:1.6
}
.authoritative-surface-panel{
  background:
    radial-gradient(circle at 85% 0%,rgba(126,247,196,.045),transparent 17rem),
    rgba(4,16,13,.52)
}
.authoritative-link-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.authoritative-link-grid a{
  min-width:0;min-height:96px;padding:15px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  border:1px solid rgba(214,255,239,.095);background:rgba(255,255,255,.012);
  transition:transform .22s var(--ease),border-color .22s ease
}
.authoritative-link-grid a:hover{transform:translateY(-2px);border-color:rgba(126,247,196,.24)}
.authoritative-link-grid b{font-size:12px}
.authoritative-link-grid small{color:var(--muted);font-size:9px}
.authoritative-link-grid em{
  margin-top:7px;color:var(--cyan);font:800 6px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;font-style:normal;text-transform:uppercase
}

/* Three public roles now behave like an intentional cross-domain system. */
.surface-model{padding-bottom:2px}
.surface-card{
  display:flex;flex-direction:column;
}
.surface-card.is-current{
  border-color:rgba(105,216,255,.26);
  box-shadow:inset 0 0 0 1px rgba(105,216,255,.035),0 28px 70px rgba(0,0,0,.16)
}
.surface-card.is-current .muted-badge{
  color:var(--cyan)!important;border-color:rgba(105,216,255,.22)!important
}
.surface-card.is-current::before{opacity:.95}
.surface-open,.surface-current{
  margin-top:auto;padding-top:26px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--surface-accent);
  font:850 7.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;text-transform:uppercase
}
.surface-open{
  border-top:1px solid rgba(214,255,239,.08);
  transition:letter-spacing .2s ease,color .2s ease
}
.surface-open:hover{letter-spacing:.115em;color:var(--text)}
.surface-open span{font-size:11px}
.surface-current{
  justify-content:flex-start;color:var(--cyan);border-top:1px solid rgba(105,216,255,.11)
}
.surface-current i{
  width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 12px rgba(105,216,255,.6)
}
.surface-core-rail{
  isolation:isolate;
}
.surface-core-rail::after{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;width:16%;
  background:linear-gradient(90deg,transparent,rgba(105,216,255,.055),transparent);
  transform:translateX(-140%);
  animation:sbCoreReleasePulse 10s ease-in-out infinite
}
@keyframes sbCoreReleasePulse{50%,100%{transform:translateX(760%)}}

/* Five footer columns: brand + Network / Assurance / Surfaces / Project. */
.footer-grid{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))!important}
.footer-surfaces a[aria-current="page"]{color:var(--cyan)}
.footer-surfaces a[aria-current="page"]::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px rgba(105,216,255,.55)
}

/* Responsive hierarchy: reduce decoration before reducing information. */
@media(max-width:1180px){
  .sb-surface-switchbar-inner{grid-template-columns:auto 1fr auto}
  .sb-surface-switch a{min-width:88px;padding-inline:12px}
  .network-command-inner{grid-template-columns:1fr}
  .network-command-context{padding-top:18px}
  .network-command-links{padding-bottom:18px}
}
@media(max-width:1040px){
  .sb-surface-switchbar-inner{gap:12px}
  .sb-surface-system em,.sb-surface-release span{display:none}
  .sb-surface-switch a{min-width:80px}
  .network-command-links{grid-template-columns:repeat(3,minmax(0,1fr))}
  .external-proof-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:760px){
  :root{--sb-surfacebar-h:38px}
  .sb-surface-switchbar-inner{min-height:38px;grid-template-columns:auto 1fr}
  .sb-surface-release{display:none}
  .sb-surface-system{font-size:0}
  .sb-surface-system strong{font-size:7px}
  .sb-surface-switch{justify-self:end;height:38px}
  .sb-surface-switch a{min-width:70px;padding:0 9px}
  .sb-surface-switch small{display:none}
  header:not(.error-header){top:var(--sb-surfacebar-h)!important}
  .hero-semantic-sequence{width:100%;gap:6px}
  .hero-semantic-sequence>span{flex:1 1 120px}
  .hero-semantic-sequence>i{display:none}
  .network-command-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .external-badge-panel,.authoritative-surface-panel{padding:20px}
  .live-badge-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .sb-surface-switchbar .shell{width:min(100% - 18px,var(--max))}
  .sb-surface-system i{display:none}
  .sb-surface-switch a{min-width:62px;padding-inline:7px;font-size:7px}
  .sb-runtime-live{display:none}
  .network-command-links{grid-template-columns:1fr 1fr}
  .live-badge-grid,.authoritative-link-grid{grid-template-columns:1fr}
  .external-proof-top{align-items:flex-start;flex-direction:column;gap:8px}
  .footer-grid{grid-template-columns:1fr!important}
}

/* Respect the established motion contract. */
@media(prefers-reduced-motion:reduce){
  .network-command-rail::before,
  .external-badge-panel::before,
  .surface-core-rail::after{animation:none!important}
  .network-command-links a,.live-badge,.authoritative-link-grid a,
  .surface-open,.sb-surface-switch a{transition:none!important}
}
@media print{
  .sb-surface-switchbar,.network-command-rail{display:none!important}
  .external-badge-panel::before,.surface-core-rail::after{display:none!important}
}


/* Developer-facing embed surface for independently refreshed evidence. */
.dev6-live-badges{
  margin-top:18px;padding:24px;
  display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:28px;
  border:1px solid rgba(105,216,255,.14);
  background:
    radial-gradient(circle at 8% 12%,rgba(105,216,255,.04),transparent 18rem),
    linear-gradient(135deg,rgba(255,255,255,.018),rgba(4,16,13,.46));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.dev6-live-badges-copy{align-self:center}
.dev6-live-badges-copy h3{font-size:clamp(22px,2vw,30px);margin:0 0 10px}
.dev6-live-badges-copy p{color:var(--muted);font-size:11px;line-height:1.65;max-width:52ch}
.dev6-live-badges-copy>a{
  display:inline-flex;margin-top:6px;color:var(--cyan);
  font:850 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;text-transform:uppercase
}
.dev6-live-badges-body{min-width:0}
.dev6-badge-code{margin-top:10px}
.dev6-badge-code pre{max-height:180px;overflow:auto}
@media(max-width:900px){
  .dev6-live-badges{grid-template-columns:1fr}
}

.dev6-distribution-chips>a{
  min-width:150px;flex:1 1 160px;min-height:62px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:10px 12px;border:1px solid rgba(105,216,255,.18);
  background:linear-gradient(135deg,rgba(105,216,255,.03),#061511);
  transition:transform .2s var(--ease),border-color .2s ease
}
.dev6-distribution-chips>a:hover{transform:translateY(-2px);border-color:rgba(105,216,255,.32)}


/* v8 release-alignment visual hardening.
   Additive only: prevents clipping/overlap while preserving existing visual language. */
:where(h1,h2,h3,.display,.section-head h2,.page-hero h1){text-wrap:balance}
:where(p,.lead,.muted,.technical-copy,.plain-copy){text-wrap:pretty}
:where(.grid,.cards,.dev6-step-grid,.dev6-reference-grid,.dev6-ship-grid,.why-objection-grid,.why-reaction-grid,.why-proof-links)>*{min-width:0}
pre,code{max-width:100%}
pre{overflow:auto;overscroll-behavior-inline:contain}
table{max-width:100%}
img{height:auto}
.brand,.brand-lockup,.footer-lockup{flex:0 0 auto}
.button,.ui-link,.sb-surface-switch a{white-space:nowrap}
.sb-surface-switchbar{isolation:isolate}
.sb-surface-switchbar-inner{min-width:0}
.sb-surface-switch{min-width:0}
.sb-surface-switch a{min-width:0}
.sb-surface-switch a span,.sb-surface-switch a small{overflow:hidden;text-overflow:ellipsis}
.live-badge img,[data-live-badge]{max-width:100%;height:auto;object-fit:contain}
.dev6-code-block,.dev6-tabpanel,.dev6-console,.dev6-step,.dev6-reference-grid article,
.why-objection,.why-reaction,.why-proof-link{min-width:0}
.dev6-code-block pre,.dev6-code-block code{overflow-wrap:normal;word-break:normal}
.dev6-reference-grid article p,.why-objection p,.why-reaction p{overflow-wrap:anywhere}
.why-objection:not(.why-objection-wide)>.why-proof-pair,
.why-reaction>p,.why-proof-link b{position:static!important}
.why-objection:not(.why-objection-wide),.why-reaction,.why-proof-link{height:auto!important}
.why-ecosystem{overflow:visible}
.why-eco-card{min-width:0}
.why-eco-card h3,.why-eco-card p{overflow-wrap:anywhere}
@media (max-width:1180px){
  .sb-surface-switchbar-inner{gap:10px}
  .sb-surface-system em,.sb-surface-release span{display:none}
}
@media (max-width:860px){
  .sb-surface-switchbar-inner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px}
  .sb-surface-switch{grid-column:1/-1;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sb-surface-switch a{justify-content:center;text-align:center;padding-inline:8px}
  .sb-surface-release{display:none}
  .button,.ui-link{max-width:100%}
}
@media (max-width:520px){
  .sb-surface-system em{display:none}
  .sb-surface-switch a{min-height:44px}
  .sb-surface-switch a small{display:none}
  .why-orbit-node{font-size:7px;letter-spacing:.08em}
  .why-orbit-outcome{max-width:92%;white-space:normal;text-align:center;line-height:1.35}
}


/* ================================================================
   V8 — CURRENT RUNTIME TRUTH
   Live/defined service matrix; additive visual system.
   ================================================================ */
.dev8-runtime-truth {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.dev8-runtime-truth::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(115, 241, 195, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 211, 255, .03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.dev8-runtime-truth::after {
  content: "";
  position: absolute;
  width: min(64vw, 860px);
  aspect-ratio: 1;
  right: -28vw;
  top: 6%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 211, 255, .075), rgba(124, 104, 255, .035) 38%, transparent 70%);
  filter: blur(18px);
}
.dev8-runtime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  margin-top: clamp(32px, 4vw, 60px);
}
.dev8-runtime-card {
  --dev8-accent: var(--mint);
  position: relative;
  min-width: 0;
  padding: clamp(24px, 2.8vw, 42px);
  min-height: 280px;
  border: 1px solid color-mix(in srgb, var(--dev8-accent) 26%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dev8-accent) 5%, transparent), transparent 45%),
    rgba(4, 16, 13, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
  transition: border-color .28s ease, transform .28s ease, background-color .28s ease;
}
.dev8-runtime-card::before,
.dev8-runtime-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.dev8-runtime-card::before {
  inset: 0;
  background: linear-gradient(90deg, var(--dev8-accent), transparent 38%) top left / 48% 1px no-repeat;
  opacity: .82;
}
.dev8-runtime-card::after {
  width: 6px;
  height: 6px;
  left: 22px;
  bottom: 20px;
  border-radius: 50%;
  background: var(--dev8-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--dev8-accent) 70%, transparent);
  opacity: .75;
}
.dev8-runtime-card.cyan { --dev8-accent: var(--cyan); }
.dev8-runtime-card.violet { --dev8-accent: var(--violet); }
.dev8-runtime-card.amber { --dev8-accent: var(--amber); }
.dev8-runtime-card.is-defined {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dev8-accent) 3%, transparent), transparent 45%),
    rgba(4, 16, 13, .52);
}
.dev8-runtime-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: clamp(46px, 5vw, 78px);
}
.dev8-runtime-top .mono {
  color: var(--dev8-accent);
  letter-spacing: .11em;
}
.dev8-runtime-top b {
  margin-left: auto;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.dev8-runtime-card h3 {
  margin: 0 0 13px;
  max-width: 21ch;
  font-size: clamp(26px, 2.15vw, 38px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.dev8-runtime-card > code {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 17px;
  color: color-mix(in srgb, var(--dev8-accent) 85%, white);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.dev8-runtime-card > p {
  max-width: 61ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.dev8-runtime-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 24px;
}
.dev8-runtime-tags span {
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--dev8-accent) 18%, var(--line));
  color: color-mix(in srgb, var(--dev8-accent) 72%, var(--muted));
  font: 10px/1 var(--mono);
  letter-spacing: .05em;
}
.dev8-hollow-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 1px solid var(--dev8-accent);
  border-radius: 50%;
  opacity: .65;
}
.dev8-runtime-authority {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  margin-top: clamp(16px, 2vw, 26px);
  padding: 19px 22px;
  border: 1px solid var(--line);
  background: rgba(4, 16, 13, .58);
}
.dev8-runtime-authority > div:first-child {
  display: grid;
  gap: 5px;
}
.dev8-runtime-authority .mono {
  color: var(--muted-2);
  font-size: 9px;
  letter-spacing: .14em;
}
.dev8-runtime-authority strong {
  font-size: 14px;
  font-weight: 600;
}
.dev8-runtime-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.dev8-runtime-links a {
  padding: 9px 11px;
  border: 1px solid var(--line);
  color: var(--muted);
  font: 10px/1 var(--mono);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
@media (hover:hover) and (pointer:fine) {
  .dev8-runtime-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--dev8-accent) 48%, var(--line));
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--dev8-accent) 7%, transparent), transparent 48%),
      rgba(4, 16, 13, .82);
  }
  .dev8-runtime-links a:hover {
    color: var(--text);
    border-color: rgba(115, 241, 195, .34);
    background: rgba(115, 241, 195, .045);
  }
}
@media (max-width: 760px) {
  .dev8-runtime-grid { grid-template-columns: 1fr; }
  .dev8-runtime-card { min-height: 0; }
  .dev8-runtime-top { margin-bottom: 36px; }
  .dev8-runtime-authority {
    align-items: flex-start;
    flex-direction: column;
  }
  .dev8-runtime-links { justify-content: flex-start; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dev8-runtime-card,
  .dev8-runtime-links a { transition: none; }
}

/* v8 external badge layout stability */
.live-badge img[data-live-badge]{height:20px;width:auto;max-width:100%;object-fit:contain}


/* ======================================================================
   PRODUCT / NETWORK / RUNTIME SEMANTIC + VISUAL QA PASS — 2026-09-23
   Keeps existing content/elements; corrects surface identity, wrapping,
   proportional layouts, and screenshot-observed overlap/overflow defects.
   ====================================================================== */

/* The local bundle is the Product/Home surface. Network and Runtime are
   separate machine surfaces; active state is a line, never an orphan dot. */
.sb-surface-switch a[data-site-surface="product"]{--switch-accent:var(--mint)}
.sb-surface-switch a[data-site-surface="network"]{--switch-accent:var(--cyan)}
.sb-surface-switch a[data-site-surface="runtime"]{--switch-accent:var(--violet)}
.footer-surfaces a[aria-current="page"]::after{display:none!important}
.footer-surfaces a[aria-current="page"]{color:inherit}
.footer-surfaces a[aria-current="location"]{
  color:var(--mint);
  position:relative;
  padding-bottom:5px;
}
.footer-surfaces a[aria-current="location"]::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--mint),var(--cyan),transparent);
  opacity:.72;
}
.surface-card.human.is-current{
  border-color:rgba(126,247,196,.28);
  box-shadow:inset 0 0 0 1px rgba(126,247,196,.035),0 28px 70px rgba(0,0,0,.16);
}
.surface-card.human.is-current .muted-badge{
  color:var(--mint)!important;
  border-color:rgba(126,247,196,.23)!important;
}
.surface-current{
  color:var(--mint);
  border-top-color:rgba(126,247,196,.12);
}
.surface-current b{
  width:22px;height:2px;display:inline-block;flex:0 0 auto;
  background:linear-gradient(90deg,var(--mint),var(--cyan));
  box-shadow:0 0 10px rgba(126,247,196,.2);
}

/* Independent observation: every published dynamic badge gets stable geometry. */
.live-badge-grid{align-items:stretch}
.live-badge{
  overflow:hidden;
  justify-content:center;
}
.live-badge img{
  display:block;
  max-height:22px;
  max-width:100%;
}
.live-badge.source-mcpmetrics{border-color:rgba(105,216,255,.13)}
.live-badge.source-smallprint{border-color:rgba(155,140,255,.13)}
.live-badge.source-mcpmetrics:hover{border-color:rgba(105,216,255,.30)}
.live-badge.source-smallprint:hover{border-color:rgba(155,140,255,.30)}
.authoritative-link-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.authoritative-link-grid a{overflow-wrap:anywhere}

/* Developer: code is readable and copy controls never cover the command. */
.dev6-step,
.dev6-code-block,
.dev6-code-block pre,
.dev6-code-block code,
.dev6-code-shell,
.dev6-live-badges-body,
.dev6-badge-code{min-width:0;max-width:100%}
.dev6-step .dev6-code-block pre{
  padding:52px 18px 20px;
  overflow-x:hidden;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.dev6-step .dev6-code-block code{white-space:inherit}
.dev6-badge-code pre{
  padding:58px 18px 22px;
  overflow-x:hidden;
  white-space:pre-wrap;
}
.dev6-badge-code code{
  white-space:inherit;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.dev6-code-block .dev6-copy{
  top:10px;right:10px;
}
.dev6-code-shell .dev6-code-block pre,
.dev6-example-grid .dev6-code-block pre{
  max-width:100%;
}
.dev6-code-head{min-width:0}
.dev6-code-head span,.dev6-code-head em{min-width:0;overflow-wrap:anywhere}

/* Developer: the ecosystem visual gets genuinely balanced left/core/right mass. */
.dev6-ecosystem-stage{
  grid-template-columns:minmax(360px,1fr) minmax(180px,210px) minmax(360px,1fr);
  gap:30px;
  align-items:center;
}
.dev6-stack-column{
  width:100%;
  min-width:0;
}
.dev6-stack-cards{
  width:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.dev6-stack-cards article{
  min-width:0;
  min-height:116px;
  padding:17px;
}
.dev6-stack-cards b,
.dev6-stack-cards em,
.dev6-stack-cards p{
  overflow-wrap:anywhere;
}
.dev6-stack-core{
  width:min(190px,100%);
  justify-self:center;
}

/* Why SITEBORNE: wide objection cards share the same grid treatment. */
.why-objection-wide{
  grid-column:1/-1;
}
.why-objection-wide>.why-mini-diagram{
  min-width:0;
}

/* How it works: a distinct, concrete visual chapter. */
.hiw-difference{
  position:relative;
  overflow:clip;
  background:
    radial-gradient(circle at 12% 18%,rgba(126,247,196,.035),transparent 26rem),
    radial-gradient(circle at 86% 72%,rgba(155,140,255,.034),transparent 30rem);
}
.hiw-difference::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:
    linear-gradient(rgba(105,216,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.014) 1px,transparent 1px);
  background-size:52px 52px;
}
.hiw-difference>.shell{position:relative;z-index:1}
.hiw-contrast{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:50px;
}
.hiw-lane{
  min-width:0;
  padding:26px;
  border:1px solid var(--line);
  background:rgba(4,16,13,.68);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.hiw-lane.ordinary{border-color:rgba(255,200,106,.15)}
.hiw-lane.siteborne{
  border-color:rgba(126,247,196,.22);
  background:linear-gradient(145deg,rgba(126,247,196,.026),rgba(4,16,13,.72));
}
.hiw-lane-head{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding-bottom:15px;border-bottom:1px solid var(--line);
}
.hiw-lane-head span{
  color:var(--muted2);
  font:850 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.hiw-lane.siteborne .hiw-lane-head span{color:var(--mint)}
.hiw-lane-head em{font-style:normal;color:var(--muted2);font-size:9px}
.hiw-lane-flow{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:28px 0 24px;
}
.hiw-lane-flow b{
  padding:12px 14px;border:1px solid var(--line);
  font-size:11px;font-weight:750;color:#c8d8d2;background:rgba(255,255,255,.012);
}
.hiw-lane-flow i{font-style:normal;color:var(--muted2)}
.hiw-lane-flow .ok{border-color:rgba(255,200,106,.23);color:var(--amber)}
.hiw-lane-flow .verified{border-color:rgba(126,247,196,.27);color:var(--mint)}
.hiw-question{color:var(--muted);font-size:12px;line-height:1.65;max-width:56ch}
.hiw-answer{
  display:block;margin-top:12px;font-size:13px;line-height:1.5;
}
.hiw-answer.unknown{color:var(--amber)}
.hiw-answer.verified{color:var(--mint)}
.hiw-scenarios{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin-top:18px;
}
.hiw-scenarios article{
  --hiw-accent:var(--mint);
  position:relative;min-width:0;min-height:430px;padding:28px;
  display:flex;flex-direction:column;
  border:1px solid color-mix(in srgb,var(--hiw-accent) 19%,var(--line));
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--hiw-accent) 4%,transparent),transparent 38%),
    rgba(5,20,16,.74);
  overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
}
.hiw-scenarios article.cyan{--hiw-accent:var(--cyan)}
.hiw-scenarios article.violet{--hiw-accent:var(--violet)}
.hiw-scenario-num{
  position:absolute;right:22px;top:18px;
  color:color-mix(in srgb,var(--hiw-accent) 19%,transparent);
  font:850 52px/.9 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:-.08em;
}
.hiw-scenario-icon{
  width:52px;height:52px;display:grid;place-items:center;margin-bottom:30px;
  border:1px solid color-mix(in srgb,var(--hiw-accent) 34%,transparent);
  color:var(--hiw-accent);font-size:19px;
}
.hiw-scenarios small{
  color:var(--hiw-accent);font:850 7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.hiw-scenarios h3{
  margin:18px 0 14px;font-size:clamp(25px,2.1vw,34px);line-height:1.05;letter-spacing:-.035em;
}
.hiw-scenarios p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.hiw-scenarios article>em{
  margin-top:auto;padding-top:22px;color:var(--muted2);font-style:normal;font-size:9px;line-height:1.5;
}
.hiw-paths,.hiw-verdict,.hiw-money-flow{
  margin:24px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  min-height:72px;padding:12px;border:1px solid color-mix(in srgb,var(--hiw-accent) 15%,transparent);
}
.hiw-paths span,.hiw-paths b,.hiw-verdict span,.hiw-money-flow span{
  padding:8px 9px;border:1px solid var(--line);
  font:800 7px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
}
.hiw-paths b{color:var(--mint)}
.hiw-paths i,.hiw-verdict i,.hiw-money-flow i{font-style:normal;color:var(--hiw-accent)}
.hiw-verdict span{display:flex;gap:5px;align-items:center}
.hiw-verdict span:first-child b{color:var(--amber)}
.hiw-verdict span:last-child b{color:var(--mint)}
.hiw-money-flow span{color:var(--violet)}
.hiw-takeaway{
  margin-top:18px;padding:24px 28px;
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:30px;align-items:center;
  border:1px solid rgba(126,247,196,.18);
  background:linear-gradient(90deg,rgba(126,247,196,.025),rgba(105,216,255,.015),transparent);
}
.hiw-takeaway span{
  color:var(--mint);font:850 7px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
}
.hiw-takeaway strong{font-size:16px;line-height:1.5}

/* Sitewide defensive wrapping for all dense technical surfaces. */
pre,code,.mono{max-width:100%}
pre{overflow-x:auto}
table{max-width:100%}
img,svg,canvas{max-width:100%}
.standard-badge,.surface-card,.authoritative-link-grid a,.why-objection,
.dev6-reference-grid article,.dev6-horizon-grid article,.dev6-ship-grid article{
  min-width:0;
}
.standard-badge b,.standard-badge small,
.surface-card h3,.surface-card p,
.why-objection h3,.why-objection p,
.dev6-reference-grid h3,.dev6-reference-grid p{
  overflow-wrap:anywhere;
}

@media(max-width:1120px){
  .dev6-ecosystem-stage{
    grid-template-columns:1fr;
    gap:30px;
  }
  .dev6-ecosystem-stage:before,.dev6-ecosystem-stage:after{display:none}
  .dev6-stack-core{order:2;margin-inline:auto}
  .dev6-stack-column.execution{order:1}
  .dev6-stack-column.protocols{order:3}
  .dev6-stack-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hiw-scenarios{grid-template-columns:1fr 1fr}
  .hiw-scenarios article:last-child{grid-column:1/-1;min-height:340px}
}
@media(max-width:760px){
  .external-proof-layout{grid-template-columns:1fr}
  .live-badge-grid{grid-template-columns:1fr 1fr}
  .authoritative-link-grid{grid-template-columns:1fr 1fr}
  .hiw-contrast,.hiw-scenarios{grid-template-columns:1fr}
  .hiw-scenarios article:last-child{grid-column:auto}
  .hiw-scenarios article{min-height:0}
  .hiw-takeaway{grid-template-columns:1fr;gap:12px}
}
@media(max-width:620px){
  .dev6-stack-cards{grid-template-columns:1fr}
  .authoritative-link-grid,.live-badge-grid{grid-template-columns:1fr}
  .dev6-step .dev6-code-block pre,.dev6-badge-code pre{font-size:9.5px}
  .hiw-lane{padding:20px}
}
@media(prefers-reduced-motion:reduce){
  .external-badge-panel::before{animation:none}
}


/* ================================================================
   V11 — PRODUCTION VISUAL / SEMANTIC HARDENING
   Fixes dense developer layouts, authority-map balance, code overflow,
   positive-only external evidence, and public-safe status metrics.
   ================================================================ */

/* Universal containment: dynamic technical content must never push the page. */
main :where(section,article,div,pre,code,table,a,span){min-width:0}
main :where(p,h1,h2,h3,h4,code,strong,small,em){overflow-wrap:anywhere}
img,svg{max-width:100%}

/* --- External evidence: only positive badges occupy the badge rail. --- */
.live-badge-grid.positive-only{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
.live-badge-grid.positive-only .live-badge{
  min-height:82px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-color:rgba(126,247,196,.24);
  background:
    radial-gradient(circle at 50% 0,rgba(126,247,196,.07),transparent 58%),
    rgba(4,16,13,.72);
}
.live-badge-grid.positive-only .live-badge img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:34px;
}
.external-source-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.external-source-links.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.external-source-links a{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:88px;
  padding:15px 16px;
  border:1px solid var(--line);
  background:rgba(4,16,13,.48);
  text-decoration:none;
}
.external-source-links a:hover,
.external-source-links a:focus-visible{
  border-color:rgba(105,216,255,.42);
  background:rgba(105,216,255,.035);
}
.external-source-links b{
  color:var(--text);
  font-size:12px;
}
.external-source-links small{
  color:var(--muted2);
  line-height:1.45;
}

/* --- WHY: Better Together becomes a clear authority-composition map. --- */
.why-eco-legend{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1.12fr) auto minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  margin:38px 0 18px;
}
.why-eco-legend>span{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  min-height:126px;
  padding:22px 24px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(105,216,255,.025),rgba(4,16,13,.76));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
.why-eco-legend>span.core{
  border-color:rgba(126,247,196,.34);
  background:
    radial-gradient(circle at 50% 0,rgba(126,247,196,.09),transparent 56%),
    rgba(4,16,13,.84);
}
.why-eco-legend b{
  color:var(--cyan);
  font:800 9px/1 var(--mono);
  letter-spacing:.14em;
}
.why-eco-legend strong{font-size:16px;line-height:1.25}
.why-eco-legend small{color:var(--muted2);line-height:1.5}
.why-eco-legend>i{
  align-self:center;
  color:var(--mint);
  font-style:normal;
  font-size:22px;
  opacity:.72;
}

.why-ecosystem{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(250px,320px) minmax(0,1fr)!important;
  grid-template-rows:repeat(3,minmax(178px,auto))!important;
  gap:16px 24px!important;
  min-height:0!important;
  margin-top:18px!important;
  padding:34px!important;
  overflow:hidden!important;
  border:1px solid rgba(126,247,196,.18);
  background:
    linear-gradient(rgba(126,247,196,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(105,216,255,.022) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(126,247,196,.07),transparent 29%),
    rgba(3,14,11,.58);
  background-size:42px 42px,42px 42px,auto,auto;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.why-ecosystem::before,
.why-ecosystem::after{
  content:"";
  position:absolute;
  pointer-events:none;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(transparent,var(--mint),transparent);
  opacity:.28;
}
.why-ecosystem::before{top:9%;height:24%}
.why-ecosystem::after{bottom:7%;height:22%}

.why-eco-card{
  position:relative!important;
  z-index:2;
  min-height:178px!important;
  padding:24px 25px 42px!important;
  border:1px solid var(--line)!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.012),transparent 45%),
    rgba(5,20,16,.88)!important;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);
  transition:transform .24s ease,border-color .24s ease,background-color .24s ease;
}
.why-eco-card:hover{
  transform:translateY(-3px);
  border-color:rgba(105,216,255,.32)!important;
}
.why-eco-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:25px!important;
  right:auto!important;
  bottom:20px!important;
  top:auto!important;
  width:44px!important;
  height:1px!important;
  background:linear-gradient(90deg,var(--cyan),transparent)!important;
  opacity:.7!important;
  transform:none!important;
}
.why-eco-card span{color:var(--cyan)!important}
.why-eco-card strong{margin-top:24px!important}
.why-eco-card p{margin:8px 0 28px!important}
.why-eco-card em{left:78px!important;bottom:16px!important}

.eco-identity{grid-column:1;grid-row:1}
.eco-gateway{grid-column:1;grid-row:2}
.eco-runtime{grid-column:1;grid-row:3}
.eco-observe{grid-column:3;grid-row:1}
.eco-rail{grid-column:3;grid-row:2}
.eco-discovery{grid-column:3;grid-row:3}

.why-eco-core{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  grid-column:2;
  grid-row:1 / span 2;
  align-self:stretch;
  width:auto!important;
  height:auto!important;
  min-height:372px;
  padding:34px 24px;
  border:1px solid rgba(126,247,196,.48)!important;
  background:
    radial-gradient(circle at 50% 36%,rgba(126,247,196,.14),transparent 35%),
    linear-gradient(180deg,rgba(126,247,196,.04),rgba(4,16,13,.96))!important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.018)!important;
}
.why-eco-core::before{
  content:"";
  position:absolute;
  inset:22px;
  border:1px solid rgba(105,216,255,.09);
  pointer-events:none;
}
.why-eco-core::after{
  content:"";
  width:9px;height:9px;
  border-radius:50%;
  position:absolute;
  left:50%;bottom:24px;
  transform:translateX(-50%);
  background:var(--mint);
  box-shadow:0 0 22px rgba(126,247,196,.72);
}

.why-eco-outcome{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  grid-column:2;
  grid-row:3;
  align-self:stretch;
  justify-content:center;
  min-height:178px;
  padding:26px 20px;
  border:1px solid rgba(105,216,255,.24);
  background:rgba(4,16,13,.84);
}
.why-eco-outcome span{width:10px!important;height:10px!important}
.why-eco-outcome b{color:var(--text);font-size:10px!important}
.why-eco-outcome small{text-align:center;line-height:1.45}

.why-role-badges{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px!important;
}
.why-role-badges span{justify-content:space-between;min-width:0}

/* Objection 04 shares the exact same wide-card composition as 01/05. */
.why-objection-wide .why-objection-body{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.why-objection-wide .why-objection-body .why-proof-pair{margin-top:auto}

/* --- Developer code: no URL or command can sit under the COPY control. --- */
.dev6-code-block{
  position:relative;
  min-width:0;
  overflow:hidden!important;
}
.dev6-code-block pre,
.dev6-badge-code pre{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  margin:0!important;
  padding-right:132px!important;
  overflow-x:auto!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.dev6-code-block code,
.dev6-badge-code code{
  white-space:inherit!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.dev6-copy{
  z-index:6;
  right:18px!important;
  top:18px!important;
  min-width:82px;
}

/* --- Developer ecosystem: stable center, balanced capability fields. --- */
.dev6-ecosystem{
  overflow:hidden;
}
.dev6-ecosystem-stage{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(230px,280px) minmax(0,1fr)!important;
  gap:22px!important;
  align-items:stretch!important;
  min-height:0!important;
  margin-top:48px!important;
  padding:26px!important;
  overflow:hidden!important;
  border:1px solid rgba(105,216,255,.13);
  background:
    linear-gradient(rgba(126,247,196,.023) 1px,transparent 1px),
    linear-gradient(90deg,rgba(105,216,255,.022) 1px,transparent 1px),
    radial-gradient(circle at 50% 46%,rgba(155,140,255,.075),transparent 24%),
    rgba(3,14,11,.54);
  background-size:40px 40px,40px 40px,auto,auto;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.dev6-ecosystem-stage::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:10px;height:10px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--mint);
  box-shadow:0 0 30px rgba(126,247,196,.55);
  opacity:.6;
  pointer-events:none;
}
.dev6-stack-column,
.dev6-stack-core{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  margin:0!important;
}
.dev6-stack-column{
  padding:22px;
  border:1px solid var(--line);
  background:rgba(4,16,13,.74);
}
.dev6-stack-column>span.mono{
  display:block;
  margin-bottom:18px;
  color:var(--muted2);
  letter-spacing:.12em;
}
.dev6-stack-cards{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.dev6-stack-cards article{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0!important;
  min-height:142px!important;
  padding:18px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.012)!important;
  overflow:hidden!important;
}
.dev6-stack-cards article::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:linear-gradient(var(--cyan),transparent);
  opacity:.65;
}
.dev6-stack-column.protocols .dev6-stack-cards article::before{
  background:linear-gradient(var(--violet),transparent);
}
.dev6-stack-cards b{
  display:block;
  font-size:15px!important;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.dev6-stack-cards em{
  display:block;
  margin:8px 0 18px!important;
  font-size:8px!important;
  line-height:1.3!important;
  letter-spacing:.1em;
  overflow-wrap:anywhere;
}
.dev6-stack-cards p{
  margin:auto 0 0!important;
  color:var(--muted);
  font-size:11px!important;
  line-height:1.48!important;
}
.dev6-stack-core{
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  min-height:100%!important;
  padding:28px 20px!important;
  border:1px solid rgba(126,247,196,.38)!important;
  background:
    radial-gradient(circle at 50% 40%,rgba(126,247,196,.12),transparent 35%),
    rgba(4,16,13,.91)!important;
}
.dev6-stack-core::before,
.dev6-stack-core::after{
  content:"";
  position:absolute;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(transparent,var(--mint),transparent);
  opacity:.35;
}
.dev6-stack-core::before{top:18px;height:23%}
.dev6-stack-core::after{bottom:18px;height:23%}
.dev6-stack-core img{width:74px!important;height:74px!important;object-fit:contain;margin:20px 0!important}
.dev6-stack-core strong{text-align:center;font-size:20px!important}
.dev6-stack-core small{text-align:center;color:var(--muted2)}

.dev6-horizon-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.dev6-horizon-grid>article{
  min-width:0!important;
  overflow:hidden!important;
}
.dev6-horizon-grid>article>div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
}
.dev6-horizon-grid b,.dev6-horizon-grid em{overflow-wrap:anywhere}

/* --- Public-safe status metrics. --- */
.status-metrics-section{
  position:relative;
  overflow:hidden;
}
.status-metrics-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(126,247,196,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(105,216,255,.022) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
}
.status-metric-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:38px;
}
.status-metric-grid article{
  --sm:var(--mint);
  position:relative;
  min-height:152px;
  padding:22px;
  border:1px solid color-mix(in srgb,var(--sm) 18%,var(--line));
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--sm) 4%,transparent),transparent 46%),
    rgba(4,16,13,.72);
  overflow:hidden;
}
.status-metric-grid article.cyan{--sm:var(--cyan)}
.status-metric-grid article.violet{--sm:var(--violet)}
.status-metric-grid article.amber{--sm:var(--amber)}
.status-metric-grid article.live::after{
  content:"";
  position:absolute;
  top:18px;right:18px;
  width:7px;height:7px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 16px rgba(126,247,196,.75);
}
.status-metric-grid span{
  display:block;
  color:var(--sm);
  font:800 8px/1.2 var(--mono);
  letter-spacing:.13em;
}
.status-metric-grid strong{
  display:block;
  margin:24px 0 11px;
  font-size:clamp(22px,2vw,34px);
  line-height:1;
  letter-spacing:-.04em;
}
.status-metric-grid small{
  display:block;
  color:var(--muted2);
  line-height:1.5;
}
.status-source-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:30px;
}
.status-source-grid a{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:150px;
  padding:22px;
  border:1px solid var(--line);
  background:rgba(4,16,13,.66);
  text-decoration:none;
}
.status-source-grid a:hover,.status-source-grid a:focus-visible{
  border-color:rgba(105,216,255,.38);
}
.status-source-grid b{
  color:var(--cyan);
  font:800 9px/1 var(--mono);
  letter-spacing:.12em;
}
.status-source-grid strong{font-size:15px;line-height:1.45}
.status-source-grid small{margin-top:auto;color:var(--muted2)}

/* Surface reference grids and manifest links should behave as controls, not overflow sources. */
.authoritative-link-grid a,
.footer-col a{overflow-wrap:anywhere}

/* Responsive hardening */
@media(max-width:1180px){
  .dev6-ecosystem-stage{
    grid-template-columns:minmax(0,1fr) minmax(210px,240px) minmax(0,1fr)!important;
    gap:14px!important;
    padding:18px!important;
  }
  .dev6-stack-cards{grid-template-columns:1fr!important}
  .status-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .status-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .why-eco-legend{grid-template-columns:1fr;gap:8px}
  .why-eco-legend>i{transform:rotate(90deg);justify-self:center}
  .why-ecosystem{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto!important;
    padding:22px!important;
  }
  .why-eco-card,
  .why-eco-core,
  .why-eco-outcome{
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .why-eco-core,.why-eco-outcome{grid-column:1/-1!important}
  .why-eco-core{min-height:250px}
  .why-role-badges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dev6-ecosystem-stage{
    grid-template-columns:1fr!important;
  }
  .dev6-stack-column.execution{order:1}
  .dev6-stack-core{order:2;min-height:270px!important}
  .dev6-stack-column.protocols{order:3}
  .dev6-stack-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dev6-horizon-grid{grid-template-columns:1fr!important}
  .status-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .live-badge-grid.positive-only,
  .external-source-links,
  .external-source-links.compact{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .why-ecosystem{grid-template-columns:1fr!important;padding:14px!important}
  .why-eco-card,.why-eco-core,.why-eco-outcome{grid-column:1!important}
  .why-role-badges{grid-template-columns:1fr}
  .dev6-stack-cards{grid-template-columns:1fr!important}
  .dev6-code-block pre,.dev6-badge-code pre{
    padding-top:72px!important;
    padding-right:18px!important;
    font-size:10px!important;
  }
  .dev6-copy{top:16px!important;right:16px!important}
  .status-metric-grid,.status-source-grid,
  .live-badge-grid.positive-only,
  .external-source-links,
  .external-source-links.compact{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .why-eco-card,.dev6-stack-cards article{transition:none!important}
}

.dev6-console-foot-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.dev6-console-foot-links a{white-space:nowrap}
@media(max-width:620px){
  .dev6-console-foot{align-items:flex-start!important}
  .dev6-console-foot-links{justify-content:flex-start}
}

.external-evidence-policy{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.external-evidence-policy.compact{grid-template-columns:1fr}
.external-evidence-policy span{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.012);
}
.external-evidence-policy b{
  color:var(--muted2);
  font:800 8px/1 var(--mono);
  letter-spacing:.12em;
}
.external-evidence-policy small{
  color:var(--muted2);
  line-height:1.45;
}
@media(max-width:760px){
  .external-evidence-policy{grid-template-columns:1fr}
}

/* Final responsive guardrails */
.table{width:100%;max-width:100%}
@media(max-width:760px){
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table th,.table td{min-width:150px}
  .actions{gap:8px}
  .actions .button{flex:1 1 auto}
}


/* ================================================================
   DEVELOPER SECTION 5 — INTERACTIVE CONTRACT LAB
   Additive enhancement: preserves existing request/flow/client blocks.
   Browser-only demonstration; never represents runtime authority.
   ================================================================ */
.dev9-lab{
  position:relative;
  margin-top:clamp(46px,6vw,86px);
  border:1px solid rgba(105,216,255,.18);
  background:
    linear-gradient(rgba(105,216,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(105,216,255,.03) 1px,transparent 1px),
    radial-gradient(circle at 52% 36%,rgba(155,140,255,.08),transparent 26rem),
    rgba(2,12,10,.88);
  background-size:34px 34px,34px 34px,auto,auto;
  overflow:hidden;
  isolation:isolate;
}
.dev9-lab::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 34%,rgba(105,216,255,.045) 48%,transparent 62%);
  transform:translateX(-55%);
  animation:dev9Scan 11s linear infinite;
}
.dev9-lab::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),var(--mint),transparent);
  opacity:.72;
}
@keyframes dev9Scan{to{transform:translateX(55%)}}
.dev9-lab-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;
  padding:clamp(26px,3.6vw,52px);
  border-bottom:1px solid rgba(105,216,255,.12);
}
.dev9-lab-head h3{
  margin:14px 0 12px;max-width:820px;
  font-size:clamp(34px,4.2vw,64px);line-height:.98;letter-spacing:-.055em;
}
.dev9-lab-head p{max-width:780px;color:var(--muted);line-height:1.7}
.dev9-lab-status{
  min-width:205px;display:grid;gap:8px;justify-items:end;text-align:right;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;
}
.dev9-lab-status span{display:flex;align-items:center;gap:8px;color:var(--mint);font-size:8px}
.dev9-lab-status i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 15px rgba(126,247,196,.66)}
.dev9-lab-status b{font-size:10px;color:var(--text)}
.dev9-lab-status small{max-width:190px;color:var(--muted2);font-size:7px;line-height:1.5}
.dev9-lab-grid{
  display:grid;
  grid-template-columns:minmax(250px,.85fr) minmax(360px,1.15fr) minmax(290px,.95fr);
  min-height:620px;
}
.dev9-lab-grid>section{
  min-width:0;padding:clamp(22px,2.6vw,36px);
  border-right:1px solid rgba(105,216,255,.1);
}
.dev9-lab-grid>section:last-child{border-right:0}
.dev9-panel-label{
  display:flex;align-items:center;gap:10px;margin-bottom:28px;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;
}
.dev9-panel-label span{
  width:28px;height:28px;display:grid;place-items:center;
  border:1px solid rgba(105,216,255,.24);color:var(--cyan);font-size:8px;
}
.dev9-panel-label b{font-size:9px;color:var(--muted)}
.dev9-state-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dev9-state-tabs button{
  min-height:42px;padding:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.012);color:var(--muted2);
  font:800 8px/1 var(--mono);letter-spacing:.08em;cursor:pointer;
}
.dev9-state-tabs button.active{
  color:var(--mint);border-color:rgba(126,247,196,.34);
  background:rgba(126,247,196,.055);box-shadow:inset 0 -2px rgba(126,247,196,.55);
}
.dev9-state-tabs button:focus-visible,.dev9-run:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.dev9-contract-facts{display:grid;gap:0;margin:24px 0 20px;border:1px solid var(--line)}
.dev9-contract-facts>div{
  display:grid;grid-template-columns:1fr auto;gap:14px;padding:12px 13px;
  border-bottom:1px solid var(--line);
}
.dev9-contract-facts>div:last-child{border-bottom:0}
.dev9-contract-facts dt{color:var(--muted2);font:700 8px/1.35 var(--mono)}
.dev9-contract-facts dd{margin:0;text-align:right;color:#dce8e4;font:700 9px/1.35 var(--mono)}
.dev9-candidate-card{
  position:relative;display:grid;gap:8px;padding:20px;margin-bottom:18px;
  border:1px solid rgba(155,140,255,.24);
  background:linear-gradient(135deg,rgba(155,140,255,.06),rgba(105,216,255,.025));
}
.dev9-candidate-card::after{
  content:"";position:absolute;right:10px;top:10px;width:6px;height:6px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 15px rgba(155,140,255,.55)
}
.dev9-candidate-card .mono{color:var(--violet);font-size:8px}
.dev9-candidate-card strong{font-size:23px;letter-spacing:-.03em}
.dev9-candidate-card small{color:var(--muted2);font:700 9px/1.4 var(--mono)}
.dev9-run{width:100%;justify-content:center}
.dev9-lab-engine{
  position:relative;background:
    radial-gradient(circle at 50% 30%,rgba(105,216,255,.045),transparent 17rem),
    rgba(255,255,255,.006)
}
.dev9-orbit{
  position:relative;width:min(270px,78%);aspect-ratio:1;margin:6px auto 28px;
  display:grid;place-items:center;
}
.dev9-orbit-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(105,216,255,.15);
}
.dev9-orbit-ring.ring-a{inset:7%;box-shadow:0 0 50px rgba(105,216,255,.035) inset;animation:dev9Spin 18s linear infinite}
.dev9-orbit-ring.ring-b{inset:20%;border-color:rgba(155,140,255,.2);animation:dev9Spin 12s linear infinite reverse}
.dev9-orbit-ring::before,.dev9-orbit-ring::after{
  content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 14px rgba(105,216,255,.7)
}
.dev9-orbit-ring::before{left:8%;top:19%}
.dev9-orbit-ring::after{right:11%;bottom:18%;background:var(--violet);box-shadow:0 0 14px rgba(155,140,255,.7)}
@keyframes dev9Spin{to{transform:rotate(360deg)}}
.dev9-core{
  position:relative;z-index:2;width:104px;height:104px;display:grid;place-items:center;align-content:center;gap:5px;
  border:1px solid rgba(126,247,196,.34);background:#03110d;
  box-shadow:0 0 0 18px rgba(126,247,196,.015),0 0 52px rgba(126,247,196,.07);
  clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
.dev9-core span{color:var(--mint);font:900 21px/1 var(--mono);letter-spacing:-.05em}
.dev9-core b{color:var(--muted2);font:700 7px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.dev9-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px currentColor}
.dev9-particle.p1{left:11%;top:48%}.dev9-particle.p2{right:17%;top:20%;background:var(--cyan)}.dev9-particle.p3{right:9%;bottom:22%;background:var(--violet)}
.dev9-checks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dev9-checks li{
  --check:var(--muted2);
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center;
  min-height:58px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--check) 18%,var(--line));
  background:color-mix(in srgb,var(--check) 2%,transparent);transition:.25s ease;
}
.dev9-checks li>span{
  width:30px;height:30px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--check) 30%,var(--line));
  color:var(--check);font:800 8px/1 var(--mono)
}
.dev9-checks li div{display:grid;gap:4px}.dev9-checks li b{font-size:11px}.dev9-checks li small{color:var(--muted2);font-size:8px}
.dev9-checks li em{font:800 7px/1 var(--mono);font-style:normal;color:var(--check);letter-spacing:.08em}
.dev9-checks li.running{--check:var(--cyan);transform:translateX(4px)}
.dev9-checks li.pass{--check:var(--mint)}
.dev9-checks li.fail{--check:#ff8f8f}
.dev9-decision{
  display:grid;gap:8px;padding:22px;margin-bottom:14px;
  border:1px solid rgba(105,216,255,.18);background:rgba(5,20,16,.72)
}
.dev9-decision span{color:var(--muted2);font:800 7px/1 var(--mono);letter-spacing:.1em}
.dev9-decision strong{font:900 clamp(34px,4vw,54px)/.9 var(--mono);letter-spacing:-.06em;color:var(--cyan)}
.dev9-decision small{color:var(--muted);line-height:1.45}
.dev9-decision.accept{border-color:rgba(126,247,196,.34);background:rgba(126,247,196,.035)}
.dev9-decision.accept strong{color:var(--mint)}
.dev9-decision.reject{border-color:rgba(255,143,143,.28);background:rgba(255,143,143,.028)}
.dev9-decision.reject strong{color:#ff9e9e}
.dev9-result-code{min-height:286px}
.dev9-result-code pre{max-height:242px}
.dev9-runtime-link{
  display:grid;gap:5px;margin-top:12px;padding:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.01)
}
.dev9-runtime-link span{color:var(--muted2);font-size:8px}.dev9-runtime-link b{color:var(--cyan);font:800 9px/1.3 var(--mono)}
.dev9-lab-foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px clamp(22px,3vw,38px);border-top:1px solid rgba(105,216,255,.1);
  background:rgba(0,0,0,.12)
}
.dev9-lab-foot span{max-width:920px;color:var(--muted);font-size:10px;line-height:1.6}
.dev9-lab-foot span b{color:var(--amber);font:800 8px/1 var(--mono);letter-spacing:.09em;margin-right:8px}
.dev9-lab-foot a{white-space:nowrap;color:var(--cyan);font:800 9px/1 var(--mono)}
@media (max-width:1120px){
  .dev9-lab-grid{grid-template-columns:1fr 1fr}
  .dev9-lab-output{grid-column:1/-1;border-top:1px solid rgba(105,216,255,.1)}
  .dev9-lab-grid>section:nth-child(2){border-right:0}
  .dev9-lab-output{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:14px}
  .dev9-lab-output .dev9-panel-label,.dev9-lab-output .dev9-runtime-link{grid-column:1/-1}
  .dev9-decision{margin-bottom:0}
}
@media (max-width:760px){
  .dev9-lab-head{grid-template-columns:1fr}
  .dev9-lab-status{justify-items:start;text-align:left}
  .dev9-lab-grid{grid-template-columns:1fr}
  .dev9-lab-grid>section{border-right:0;border-bottom:1px solid rgba(105,216,255,.1)}
  .dev9-lab-output{grid-column:auto;display:block}
  .dev9-decision{margin-bottom:14px}
  .dev9-lab-foot{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .dev9-lab::before,.dev9-orbit-ring{animation:none!important}
}


/* Public-safe operational metrics: sourced from the public metadata snapshot,
   with readiness optionally overlaid from utility.siteborne.net. */
.public-metric-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(150px,.9fr);
  margin:clamp(24px,3vw,40px) 0 12px;border:1px solid var(--line);
  background:rgba(3,14,11,.66)
}
.public-metric-strip article,.public-metric-strip>a{
  min-width:0;min-height:110px;padding:16px 14px;display:grid;align-content:center;gap:7px;
  border-right:1px solid var(--line)
}
.public-metric-strip>a{border-right:0;background:linear-gradient(135deg,rgba(105,216,255,.045),transparent)}
.public-metric-strip span{color:var(--muted2);font:800 7px/1 var(--mono);letter-spacing:.09em}
.public-metric-strip strong{color:var(--mint);font:850 22px/1 var(--mono);letter-spacing:-.04em}
.public-metric-strip strong span{color:inherit;font:inherit;letter-spacing:inherit}
.public-metric-strip small{color:var(--muted2);font-size:8px}
.public-metric-strip>a b{color:var(--cyan);font:800 10px/1.35 var(--mono)}
@media (max-width:1060px){.public-metric-strip{grid-template-columns:repeat(3,1fr)}.public-metric-strip article,.public-metric-strip>a{border-bottom:1px solid var(--line)}}
@media (max-width:620px){.public-metric-strip{grid-template-columns:1fr 1fr}.public-metric-strip article,.public-metric-strip>a{min-height:96px}}

.pricing-catalog{
  margin-top:clamp(34px,4.5vw,62px);padding-top:clamp(26px,3vw,42px);
  border-top:1px solid var(--line)
}
.pricing-catalog-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);gap:18px 46px;align-items:end}
.pricing-catalog-head .kicker{grid-column:1/-1}
.pricing-catalog-head h3{margin:0;font-size:clamp(30px,3.2vw,48px);line-height:1;letter-spacing:-.045em}
.pricing-catalog-head p{margin:0;color:var(--muted);line-height:1.65}
.pricing-catalog-head a{color:var(--cyan)}
.pricing-defined-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}
.pricing-defined-grid article{
  min-width:0;min-height:220px;padding:22px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(155,140,255,.025),rgba(255,255,255,.006));
  display:flex;flex-direction:column;align-items:flex-start
}
.pricing-defined-grid h4{margin:28px 0 16px;font-size:19px;line-height:1.05;letter-spacing:-.03em}
.pricing-defined-grid strong{margin-top:auto;color:var(--text);font:850 28px/1 var(--mono);letter-spacing:-.04em}
.pricing-defined-grid strong span{font:inherit;color:inherit}
.pricing-defined-grid small{margin-top:8px;color:var(--muted2);font-size:8px;line-height:1.5}
@media (max-width:980px){.pricing-defined-grid{grid-template-columns:1fr 1fr}.pricing-catalog-head{grid-template-columns:1fr}}
@media (max-width:560px){.pricing-defined-grid{grid-template-columns:1fr}}


/* Developer ecosystem intro: keep the long technical posture readable instead
   of forcing it through the global display-heading measure. */
.dev6-ecosystem .dev6-ecosystem-intro{
  max-width:none!important;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.78fr);
  gap:clamp(34px,5vw,84px);
  align-items:end;
  margin-bottom:0;
}
.dev6-ecosystem-intro-copy{min-width:0}
.dev6-ecosystem .dev6-ecosystem-intro h2{
  max-width:760px;
  margin-bottom:0!important;
  font-size:clamp(42px,4.55vw,64px)!important;
  line-height:.98!important;
}
.dev6-ecosystem-intro-context{
  position:relative;
  min-width:0;
  padding:4px 0 5px 28px;
  border-left:1px solid rgba(105,216,255,.22);
}
.dev6-ecosystem-intro-context::before{
  content:"";
  position:absolute;
  left:-2px;
  top:0;
  width:3px;
  height:44px;
  background:linear-gradient(var(--cyan),transparent);
  box-shadow:0 0 20px rgba(105,216,255,.16);
}
.dev6-ecosystem-context-label{
  display:block;
  margin-bottom:14px;
  color:var(--cyan);
  font:800 8px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.dev6-ecosystem .dev6-ecosystem-intro-context p{
  max-width:620px!important;
  margin:0!important;
  font-size:clamp(15px,1.15vw,17px)!important;
  line-height:1.68!important;
}
.dev6-ecosystem-principle{
  margin:0 0 16px;
  padding:15px 16px;
  border:1px solid rgba(126,247,196,.13);
  background:linear-gradient(110deg,rgba(126,247,196,.045),rgba(105,216,255,.014));
}
.dev6-ecosystem-principle strong{
  display:block;
  color:var(--text);
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.3;
  letter-spacing:-.025em;
}
.dev6-ecosystem-principle small{
  display:block;
  margin-top:7px;
  color:var(--muted2);
  font:700 8px/1.5 var(--mono);
  letter-spacing:.035em;
}
.dev6-ecosystem-detail{
  color:var(--muted)!important;
}
.dev6-ecosystem .dev6-ecosystem-stage{
  margin-top:clamp(38px,4.5vw,58px)!important;
}
@media(max-width:900px){
  .dev6-ecosystem .dev6-ecosystem-intro{
    grid-template-columns:1fr;
    gap:26px;
    align-items:start;
  }
  .dev6-ecosystem-intro-context{
    max-width:760px;
    padding-left:22px;
  }
}
@media(max-width:560px){
  .dev6-ecosystem .dev6-ecosystem-intro h2{
    font-size:clamp(36px,10.5vw,42px)!important;
    line-height:1!important;
  }
  .dev6-ecosystem-intro-context{
    padding-left:17px;
  }
  .dev6-ecosystem-principle{padding:13px 14px}
  .dev6-ecosystem .dev6-ecosystem-stage{
    margin-top:34px!important;
  }
}


/* Break the legacy circular aspect-ratio constraint on the redesigned center
   column. The old 1:1 rule plus grid stretching created a cyclic intrinsic size
   and could inflate this section to several thousand pixels on wide screens. */
.dev6-ecosystem .dev6-stack-core{
  aspect-ratio:auto!important;
  min-height:0!important;
}
@media(max-width:980px){
  .dev6-ecosystem .dev6-stack-core{min-height:270px!important}
}

/* Scope collision fix: the global `.protocols` gallery must never turn the
   developer ecosystem's right capability column into a four-column grid. */
.dev6-ecosystem .dev6-stack-column.protocols{
  display:block!important;
}


/* Ecosystem breakpoint coherence: once the three-column composition becomes too
   narrow, stack the three capability fields and let the card matrix use the
   available width instead of squeezing seven cards into a narrow rail. */
@media(max-width:1180px){
  .dev6-ecosystem .dev6-ecosystem-stage{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  .dev6-ecosystem .dev6-stack-column.execution{order:1}
  .dev6-ecosystem .dev6-stack-core{
    order:2;
    min-height:250px!important;
    width:min(260px,100%)!important;
    justify-self:center!important;
  }
  .dev6-ecosystem .dev6-stack-column.protocols{order:3}
  .dev6-ecosystem .dev6-stack-cards{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:800px){
  .dev6-ecosystem .dev6-stack-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:520px){
  .dev6-ecosystem .dev6-stack-cards{
    grid-template-columns:1fr!important;
  }
}



/* ================================================================
   TARGETED VISUAL LOGIC + SECURITY REPORTING PASS — 2026-09-23
   Scope: user-identified visual defects only. Existing component
   language, interactions, and public-safe authority boundaries remain.
   ================================================================ */

/* Home: make the end-to-end proof path one continuous system.
   Desktop uses a serpentine reading path so step 04 drops directly to 05;
   DOM order remains 01→08 for accessibility and machine reading. */
.proof-path{
  padding:18px;
  gap:14px;
  border:1px solid rgba(105,216,255,.11);
  background:
    linear-gradient(rgba(105,216,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,247,196,.016) 1px,transparent 1px),
    rgba(3,14,11,.42);
  background-size:34px 34px,34px 34px,auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
  overflow:hidden;
}
.proof-path article{
  z-index:1;
  background:linear-gradient(180deg,rgba(7,24,19,.96),rgba(4,16,13,.94));
}
@media(min-width:981px){
  .proof-path article:nth-child(5){grid-column:4;grid-row:2}
  .proof-path article:nth-child(6){grid-column:3;grid-row:2}
  .proof-path article:nth-child(7){grid-column:2;grid-row:2}
  .proof-path article:nth-child(8){grid-column:1;grid-row:2}

  .proof-path article::after{
    top:50%!important;
    right:-14px!important;
    left:auto!important;
    width:14px!important;
    height:1px!important;
    background:linear-gradient(90deg,rgba(105,216,255,.55),rgba(126,247,196,.28))!important;
  }
  .proof-path article::before{
    right:-3px!important;
    left:auto!important;
    top:calc(50% - 3px)!important;
  }

  .proof-path article:nth-child(4)::after{
    display:block!important;
    left:50%!important;
    right:auto!important;
    top:100%!important;
    width:1px!important;
    height:14px!important;
    background:linear-gradient(180deg,rgba(155,140,255,.55),rgba(155,140,255,.22))!important;
  }
  .proof-path article:nth-child(4)::before{
    display:block!important;
    left:calc(50% - 3px)!important;
    right:auto!important;
    top:calc(100% - 3px)!important;
    background:var(--violet)!important;
    box-shadow:0 0 14px rgba(155,140,255,.32)!important;
  }

  .proof-path article:nth-child(n+5):nth-child(-n+7)::after{
    display:block!important;
    left:-14px!important;
    right:auto!important;
    top:50%!important;
    width:14px!important;
    height:1px!important;
    background:linear-gradient(90deg,rgba(155,140,255,.25),rgba(105,216,255,.52))!important;
  }
  .proof-path article:nth-child(n+5):nth-child(-n+7)::before{
    display:block!important;
    left:-3px!important;
    right:auto!important;
    top:calc(50% - 3px)!important;
  }
  .proof-path article:nth-child(8)::after,
  .proof-path article:nth-child(8)::before{display:none!important}
}
@media(max-width:980px){
  .proof-path{padding:14px}
}
@media(max-width:560px){
  .proof-path{padding:10px;gap:10px}
}

/* Why SITEBORNE objection 05: the four diamonds are alternative execution
   paths, not a serial workflow. One contract fans out over replaceable paths
   and reconverges on the same acceptance meaning. */
.graph-invariant{
  gap:18px;
}
.graph-invariant>div{
  position:relative;
  width:min(100%,360px);
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px!important;
  padding:26px 12px;
  background:
    linear-gradient(90deg,transparent 12.4%,color-mix(in srgb,var(--oa) 28%,transparent) 12.4% 12.6%,transparent 12.6% 37.4%,color-mix(in srgb,var(--oa) 28%,transparent) 37.4% 37.6%,transparent 37.6% 62.4%,color-mix(in srgb,var(--oa) 28%,transparent) 62.4% 62.6%,transparent 62.6% 87.4%,color-mix(in srgb,var(--oa) 28%,transparent) 87.4% 87.6%,transparent 87.6%);
}
.graph-invariant>div::before,
.graph-invariant>div::after{
  content:"";
  position:absolute;
  left:12.5%;
  right:12.5%;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--oa) 42%,transparent) 8% 92%,transparent);
  pointer-events:none;
}
.graph-invariant>div::before{top:0}
.graph-invariant>div::after{bottom:0}
.graph-invariant i{
  justify-self:center;
  margin:0!important;
  background:rgba(4,16,13,.92);
  border-color:color-mix(in srgb,var(--oa) 28%,var(--line))!important;
  box-shadow:0 0 0 5px rgba(4,16,13,.7);
}
.graph-invariant i::after{display:none!important}

/* Developers section 4: keep the exact same nodes, labels and visual motif,
   but arrange them around the protocol hub so the diagram reads:
   input/discovery → selected surface → outcome, with the execution/schema
   action directly beneath the hub. */
.dev6-surface-visual{
  display:grid!important;
  grid-template-columns:minmax(72px,1fr) 30px 80px 30px minmax(72px,1fr)!important;
  grid-template-rows:1fr 80px 1fr!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
  padding:24px!important;
}
.dev6-surface-visual>b{
  grid-column:3!important;
  grid-row:2!important;
  position:relative!important;
  z-index:3!important;
}
.dev6-surface-visual>span:nth-of-type(1){
  grid-column:1!important;
  grid-row:2!important;
  justify-self:end!important;
}
.dev6-surface-visual>i:nth-of-type(1){
  grid-column:2!important;
  grid-row:2!important;
  width:100%!important;
}
.dev6-surface-visual>span:nth-of-type(2){
  grid-column:3!important;
  grid-row:3!important;
  align-self:start!important;
  margin-top:18px!important;
  position:relative!important;
}
.dev6-surface-visual>span:nth-of-type(2)::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  width:1px;
  height:18px;
  background:linear-gradient(var(--violet),rgba(105,216,255,.22));
}
.dev6-surface-visual>i:nth-of-type(2){
  grid-column:4!important;
  grid-row:2!important;
  width:100%!important;
}
.dev6-surface-visual>span:nth-of-type(3){
  grid-column:5!important;
  grid-row:2!important;
  justify-self:start!important;
}
@media(max-width:480px){
  .dev6-surface-visual{
    grid-template-columns:minmax(52px,1fr) 16px 64px 16px minmax(52px,1fr)!important;
    grid-template-rows:1fr 64px 1fr!important;
    padding:18px 12px!important;
  }
  .dev6-surface-visual b{width:64px!important;height:64px!important;font-size:13px!important}
  .dev6-surface-visual span{padding:7px 6px!important;font-size:6px!important}
}

/* Developers section 5: restore the master mark's native 150:170 ratio and
   keep the stable-contract core geometrically stable instead of stretching
   with the taller neighboring capability columns. */
.dev6-stack-core{
  width:clamp(214px,18vw,248px)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
  align-self:center!important;
  justify-self:center!important;
  border-radius:50%!important;
  padding:28px 24px!important;
}
.dev6-stack-core img{
  width:74px!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:18px 0!important;
}
@media(max-width:980px){
  .dev6-stack-core{
    width:230px!important;
    min-height:0!important;
  }
}
@media(max-width:640px){
  .dev6-stack-core{width:206px!important}
  .dev6-stack-core img{width:66px!important}
}

/* Trust page: configured contact, explicit remaining verification boundary. */
.security-reporting-state{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:24px 0 4px;
}
.security-reporting-state span{
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.012);
}
.security-reporting-state b,
.security-reporting-state strong{
  display:block;
  overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.security-reporting-state b{
  color:var(--muted2);
  font-size:7px;
  letter-spacing:.12em;
}
.security-reporting-state strong{
  margin-top:7px;
  color:var(--text);
  font-size:9px;
  line-height:1.35;
}
.security-reporting-state span:nth-child(1) strong,
.security-reporting-state span:nth-child(2) strong{color:var(--mint)}
.security-reporting-state span:nth-child(3) strong,
.security-reporting-state span:nth-child(4) strong{color:var(--amber)}
.security-reporting-panel .actions{margin-top:22px}
#vulnerability-disclosure a code{color:var(--cyan)}
@media(max-width:760px){
  .security-reporting-state{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .security-reporting-state{grid-template-columns:1fr}
}

/* Developer trust footer now has two explicit destinations. */
.dev6-security-foot{
  column-gap:18px;
  row-gap:10px;
}
.dev6-security-foot a{white-space:nowrap}
@media(max-width:860px){
  .dev6-security-foot a{white-space:normal}
}

/* Final geometry lock for the Section 5 contract core. Intrinsic text height
   must not override the intended circle. */
.dev6-stack-core{
  width:276px!important;
  height:276px!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  box-sizing:border-box!important;
  flex:none!important;
  gap:8px!important;
  padding:22px 18px!important;
  overflow:hidden!important;
}
.dev6-stack-core>span{margin-bottom:4px!important}
.dev6-stack-core img{width:72px!important;height:auto!important;margin:8px 0!important}
.dev6-stack-core strong{margin-top:4px!important}
.dev6-stack-core small{margin-top:2px!important}
@media(max-width:980px){
  .dev6-stack-core{width:244px!important;height:244px!important;padding:18px 14px!important;gap:6px!important}
  .dev6-stack-core img{width:66px!important;margin:6px 0!important}
}
@media(max-width:640px){
  .dev6-stack-core{width:206px!important;height:206px!important;padding:14px 12px!important;gap:4px!important}
  .dev6-stack-core img{width:56px!important;margin:4px 0!important}
  .dev6-stack-core strong{font-size:16px!important}
  .dev6-stack-core small{font-size:6.5px!important}
}

@media(max-width:1180px){
  .dev6-ecosystem .dev6-stack-core{
    width:244px!important;
    height:244px!important;
    min-height:0!important;
    max-height:244px!important;
    justify-self:center!important;
    align-self:center!important;
  }
}
@media(max-width:640px){
  .dev6-ecosystem .dev6-stack-core{
    width:206px!important;
    height:206px!important;
    max-height:206px!important;
  }
}


/* ================================================================
   TARGETED VISUAL ALIGNMENT — 2026-09-23 REV5
   Geometry-only corrections requested from supplied screenshots.
   No content, component, section-index, interaction, or global palette changes.
   ================================================================ */

/* Developer quickstart mini-flow: preserve node dimensions while recovering
   equal horizontal breathing room so the final PCC node does not consume the
   container's right padding. */
@media (min-width:761px){
  .dev6-flow-mini{gap:5px}
}

/* Ecosystem intro: top-align the posture rail with its paired heading column
   so large display type never visually intrudes beside the posture copy. */
.dev6-ecosystem .dev6-ecosystem-intro{align-items:start}

/* Why SITEBORNE orbit: keep the outcome connector in the gap below RAIL
   instead of allowing the vertical stroke to pass through the badge. */
.why-orbit-outcome::before{
  height:10px;
  bottom:8px;
}

/* Pricing only: peer cards keep the same border geometry; only their bottom
   edge colors are differentiated so adjacent elements do not repeat accents. */
body[data-page="pricing"] .utility-grid .utility:nth-child(1){
  border-bottom-color:rgba(126,247,196,.34)!important;
}
body[data-page="pricing"] .utility-grid .utility:nth-child(2){
  border-bottom-color:rgba(105,216,255,.34)!important;
}
body[data-page="pricing"] .pricing-defined-grid article:nth-child(1){
  border-bottom-color:rgba(155,140,255,.34)!important;
}
body[data-page="pricing"] .pricing-defined-grid article:nth-child(2){
  border-bottom-color:rgba(255,190,92,.34)!important;
}
body[data-page="pricing"] .pricing-defined-grid article:nth-child(3){
  border-bottom-color:rgba(105,216,255,.34)!important;
}
body[data-page="pricing"] .pricing-defined-grid article:nth-child(4){
  border-bottom-color:rgba(126,247,196,.34)!important;
}
body[data-page="pricing"] .rail-grid article:nth-child(1){
  border-bottom-color:rgba(255,190,92,.34)!important;
}
body[data-page="pricing"] .rail-grid article:nth-child(2){
  border-bottom-color:rgba(155,140,255,.34)!important;
}
body[data-page="pricing"] .rail-grid article:nth-child(3){
  border-bottom-color:rgba(105,216,255,.34)!important;
}