/* ===== DeviceManager — product overview page ===== */

/* ---------- Shared helpers ---------- */
main { --space-section: clamp(48px, 6vw, 100px); }
.subnav { margin-top: var(--header-h); }

/* Crop/zoom a 1440x900 screenshot: set --cx/--cy/--cw/--ch (desktop) and --mcx/--mcy/--mcw/--mch (phones) */
.zoom { --zx: var(--cx, 0); --zy: var(--cy, 0); --zw: var(--cw, 1440); --zh: var(--ch, 900); position: relative; overflow: hidden; aspect-ratio: var(--zw) / var(--zh); background: #0b0f17; }
.zoom img,
.frame .zoom img { position: absolute; left: 0; top: 0; width: calc(100% * 1440 / var(--zw)); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: fill; transform: translate(calc(var(--zx) / 1440 * -100%), calc(var(--zy) / 900 * -100%)); }
@media (max-width: 640px) {
  .zoom { --zx: var(--mcx, var(--cx, 0)); --zy: var(--mcy, var(--cy, 0)); --zw: var(--mcw, var(--cw, 1440)); --zh: var(--mch, var(--ch, 900)); }
}

.story__h { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.55rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; margin: 16px 0 14px; text-wrap: balance; }
.story__p { color: var(--text-2); font-size: var(--fs-lead); line-height: 1.55; max-width: 44ch; text-wrap: pretty; }
.tour__num { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.tour__num b { color: var(--pa); font-weight: 500; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(var(--pa-rgb), .35); background: rgba(var(--pa-rgb), .08); }
.why__head, .tour__head, .ctl__head { padding-top: var(--space-section); }
.ctl__head .lead { margin-top: 18px; }

@media (max-width: 900px) {
  .story__h { font-size: 1.42rem; margin: 10px 0 8px; }
  .story__p { font-size: .95rem; line-height: 1.5; }
  .story__dots { margin-top: 12px; }
}

/* ===== 1. HERO ===== */
.hero { --hp: 1; position: relative; isolation: isolate; overflow: clip; padding-top: clamp(36px, 4.2vw, 60px); padding-bottom: clamp(32px, 4vw, 64px); }
html.motion .hero { --hp: 0; }
.hero .bg-grid { -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 15%, transparent 72%); }
.hero__glow { position: absolute; z-index: -1; left: 50%; top: 36%; width: min(1200px, 150vw); aspect-ratio: 1.7; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--pa-rgb), .3), rgba(110, 168, 255, .07) 55%, transparent 74%); filter: blur(24px); pointer-events: none; }
.hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; margin-bottom: 22px; border-radius: 999px; border: 1px solid rgba(var(--pa-rgb), .35); background: rgba(var(--pa-rgb), .08); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--pa); }
.hero__chip .dot { color: var(--ok); }
.hero__chip-sep { width: 1px; height: 12px; background: rgba(var(--pa-rgb), .4); }
.hero__chip-b { color: var(--text-2); }
.hero__title { font-size: clamp(2.45rem, 1rem + 4.5vw, 4.7rem); font-weight: 600; letter-spacing: -.05em; line-height: .98; max-width: 19ch; text-wrap: balance; }
.hero__title .serif-i { display: inline-block; padding-right: .06em; }
.hero__lead { margin-top: 20px; max-width: 60ch; }
.hero__cta { margin-top: 26px; justify-content: center; }
.hero__facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 22px; color: var(--text-2); font-size: .9rem; }
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero__facts svg { width: 17px; height: 17px; color: var(--pa); }

.hero__stage-wrap { margin-top: clamp(32px, 3.4vw, 44px); }
.hero__stage { position: relative; max-width: 1120px; margin-inline: auto; perspective: 1700px; perspective-origin: 50% 0%; }
.hero__frame { transform-origin: 50% 0%; transform: translateY(calc((1 - var(--hp)) * 10px)) rotateX(calc((1 - var(--hp)) * 26deg)) scale(calc(.9 + var(--hp) * .1)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 60px 140px -40px rgba(0, 0, 0, .95), 0 40px 120px -50px rgba(var(--pa-rgb), .7); will-change: transform; }
.hero__zoom { --cw: 1424; --ch: 890; --mcx: 16; --mcy: 80; --mcw: 840; --mch: 630; }
.hero__zoom::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .07) 47%, transparent 58%) 0 0 / 260% 100% no-repeat; background-position: calc(100% - var(--hp) * 100%) 0; }
.hero__float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 14px; background: rgba(11, 15, 23, .82); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .35); font-size: .85rem; white-space: nowrap; animation: hf-float 7s ease-in-out infinite; }
.hero__float > * { flex: none; }
.hf__k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.hf__s { display: block; color: var(--text); font-weight: 550; font-size: .86rem; }
.hf__v { font-size: 1.6rem; font-weight: 650; letter-spacing: -.04em; color: var(--warn); line-height: 1; }
.hf__v small { font-size: .55em; margin-left: 1px; }
.hf__bar { width: 70px; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hf__bar i { display: block; height: 100%; width: 77.3%; background: linear-gradient(90deg, var(--warn), #ffd27a); border-radius: inherit; }
.hero__float--a { left: -3%; top: 30%; flex-direction: column; align-items: flex-start; gap: 6px; transform: translateY(calc((1 - var(--hp)) * 40px)); }
.hero__float--b { right: -2.5%; top: 8%; animation-delay: -2.4s; transform: translateY(calc((1 - var(--hp)) * 70px)); }
.hero__float--b .dot { color: var(--ok); }
.hero__float--b .hf__k { color: var(--text-2); }
.hero__float--c { right: 6%; bottom: 10%; animation-delay: -4.6s; transform: translateY(calc((1 - var(--hp)) * 24px)); }
.hero__float--c svg { width: 26px; height: 26px; color: var(--pa); }
@keyframes hf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

@media (max-width: 640px) {
  .hero { padding-top: 34px; }
  .hero__chip { margin-bottom: 20px; font-size: 10.5px; padding: 6px 12px 6px 10px; gap: 8px; }
  .hero__lead { margin-top: 18px; font-size: 1rem; }
  .hero__cta { margin-top: 22px; width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; text-align: left; margin-top: 24px; font-size: .82rem; }
  .hero__stage-wrap { margin-top: 34px; }
  .hero__frame { transform: rotateX(calc((1 - var(--hp)) * 18deg)) scale(calc(.94 + var(--hp) * .06)); }
  .hero__float { padding: 8px 11px; font-size: .75rem; border-radius: 11px; gap: 8px; }
  .hf__k { font-size: 9px; }
  .hf__v { font-size: 1.2rem; }
  .hf__s { font-size: .74rem; }
  .hf__bar { width: 52px; }
  .hero__float--a { left: 2%; top: auto; bottom: -22px; }
  .hero__float--b { right: 2%; top: -16px; }
  .hero__float--c { right: 2%; bottom: -26px; }
  .hero__float--c svg { width: 20px; height: 20px; }
}

/* ===== 2. PROBLEM -> SOLUTION ===== */
.why__story { --step-h: 48svh; }
.why__problem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; max-width: 46ch; color: var(--text-3); font-size: .92rem; line-height: 1.45; }
.why__problem .chip { flex: none; }
.why__stage, .ctl__stage { container-type: inline-size; }

.wv, .cv { --k: clamp(0, calc((var(--lp, 1) - .1) * 1.55), 1); position: absolute; inset: 0; border-radius: var(--radius-l); border: 1px solid var(--line); background: radial-gradient(120% 80% at 50% 0%, rgba(var(--pa-rgb), .11), transparent 62%), linear-gradient(180deg, #0b0f17, #070a10); box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04); overflow: hidden; }
html.motion .wv[data-on]:not(.is-on), html.motion .cv[data-on]:not(.is-on) { transform: scale(.97) translateY(10px); }
.wv__cap { position: absolute; left: 0; right: 0; bottom: 4.5%; display: grid; justify-items: center; font-family: var(--font-mono); font-size: max(10px, 2.3cqw); letter-spacing: .06em; text-transform: uppercase; }
.wv__cap > span { grid-area: 1 / 1; padding: 0 12px; text-align: center; }
.wv__cap-a { color: var(--bad); opacity: clamp(0, calc((.5 - var(--k)) * 6), 1); }
.wv__cap-b { color: var(--pa); opacity: clamp(0, calc((var(--k) - .5) * 6), 1); }

/* V0 sprawl */
.sp-console { position: absolute; left: 9%; right: 9%; top: 8%; bottom: 17%; border-radius: 14px; border: 1px solid rgba(var(--pa-rgb), .45); background: rgba(9, 12, 19, .92); box-shadow: 0 30px 70px -30px rgba(var(--pa-rgb), .55); opacity: var(--k); transform: scale(calc(.9 + var(--k) * .1)); }
.sp-console__bar { display: flex; align-items: center; gap: 10px; height: 14%; padding: 0 3cqw; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: max(10px, 2.3cqw); color: var(--text-2); }
.sp-console__bar .frame__dots i { width: 7px; height: 7px; }
.sp-tool { position: absolute; left: 14%; width: 72%; top: calc(25.5% + var(--n) * 10.6%); height: 8.8%; display: flex; align-items: center; gap: 2.4cqw; padding: 0 3cqw; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--bad) calc((1 - var(--k)) * 60%), rgba(255, 255, 255, .12)); background: color-mix(in srgb, rgba(255, 107, 107, .1) calc((1 - var(--k)) * 100%), rgba(var(--pa-rgb), .07)); font-size: max(11px, 2.8cqw); font-weight: 550; white-space: nowrap; transform: translate(calc((1 - var(--k)) * var(--tx)), calc((1 - var(--k)) * var(--ty))) rotate(calc((1 - var(--k)) * var(--r))) scale(calc(1 - (1 - var(--k)) * .3)); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); }
.sp-tool svg { width: max(14px, 3.4cqw); height: auto; color: var(--pa); flex: none; }
.sp-tool .sp-ok { margin-left: auto; color: var(--ok); opacity: var(--k); }

/* V1 cloud vs perimeter */
.cl { position: absolute; left: 3%; top: 3%; width: 94%; height: 84%; }
.cl text { font-family: var(--font-mono); }
.cl-t { fill: var(--text-2); font-size: 12px; letter-spacing: .04em; }
.cl-t--warn { fill: var(--bad); font-size: 11px; opacity: calc(1 - var(--k)); }
.cl-t--perim { fill: var(--pa); font-size: 10px; letter-spacing: .16em; opacity: var(--k); }
.cl-t--b { fill: var(--text); font-family: var(--font-sans) !important; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.cl-t--s { fill: var(--text-3); font-size: 9.5px; }
.cl-cloud { opacity: calc(1 - var(--k) * .7); }
.cl-cloud > path:first-child { fill: rgba(255, 107, 107, .08); stroke: rgba(255, 107, 107, .65); stroke-width: 1.5; }
.cl-x { fill: none; stroke: var(--bad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); }
.cl-out path { fill: none; stroke: var(--bad); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: calc((1 - var(--k)) * .9); animation: cl-dash 1.1s linear infinite; }
@keyframes cl-dash { to { stroke-dashoffset: -18; } }
.cl-perim { fill: rgba(var(--pa-rgb), .04); fill-opacity: var(--k); stroke: rgba(var(--pa-rgb), .75); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); }
.cl-in path { fill: none; stroke: var(--ok); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); }
.cl-srv { opacity: var(--k); }
.cl-srv rect { fill: #0e1422; stroke: rgba(var(--pa-rgb), .85); stroke-width: 1.4; }
.cl-srv__l { stroke: var(--pa); stroke-width: 2; stroke-linecap: round; }
.cl-eps rect { fill: #0e1422; stroke: rgba(255, 255, 255, .22); }
.cl-eps .cl-srv__l { stroke: var(--text-3); }

/* V2 parity */
.par { position: absolute; left: 6%; right: 6%; top: 7%; bottom: 15%; display: grid; grid-template-rows: auto repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .015); }
.par__row { --rk: clamp(0, calc((var(--k) * 7 - var(--t)) * 1.4), 1); display: grid; grid-template-columns: .9fr 1.15fr 1.15fr; align-items: center; border-top: 1px solid var(--line); font-size: max(10.5px, 2.55cqw); }
.par__row > span { padding: 0 2.4cqw; min-width: 0; }
.par__row--head { border-top: 0; padding-block: 2.2cqw; font-family: var(--font-mono); font-size: max(9.5px, 2.1cqw); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.par__row--head svg { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; margin-right: .45em; color: var(--pa); }
.par__row > span:first-child { color: var(--text-2); }
.par__w, .par__l b { color: var(--text); font-weight: 500; }
.par__w::before, .par__l b::before { content: "✓"; color: var(--ok); margin-right: .45em; font-weight: 700; }
.par__l { display: grid; }
.par__l > * { grid-area: 1 / 1; }
.par__l em { font-style: normal; color: var(--bad); opacity: clamp(0, calc(1 - var(--rk) * 2), 1); }
.par__l em::before { content: "—"; margin-right: .45em; }
.par__l b { opacity: clamp(0, calc(var(--rk) * 2 - 1), 1); transform: translateX(calc((1 - var(--rk)) * 8px)); }
.par__row:not(.par__row--head) { background: rgba(62, 230, 154, calc(var(--rk) * .035)); }

/* V3 secure */
.sec__risks { position: absolute; top: 6%; left: 4%; right: 4%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sec__risks span { font-family: var(--font-mono); font-size: max(9.5px, 2.1cqw); letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; color: var(--bad); border: 1px solid rgba(255, 107, 107, .35); background: rgba(255, 107, 107, .08); opacity: calc(1 - var(--k) * .72); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(255, 107, 107, var(--k)); }
.sec__core { position: absolute; left: 50%; top: 52%; width: 27cqw; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; }
.sec__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--pa-rgb), calc(.15 + var(--k) * .5)); box-shadow: 0 0 calc(var(--k) * 40px) rgba(var(--pa-rgb), .25); }
.sec__ring--2 { inset: -20%; border-style: dashed; opacity: var(--k); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sec__shield { width: 58%; aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; border: 1px solid rgba(var(--pa-rgb), .4); background: radial-gradient(circle at 50% 30%, rgba(var(--pa-rgb), calc(var(--k) * .3)), rgba(255, 107, 107, calc((1 - var(--k)) * .14)) 70%); }
.sec__ico { grid-area: 1 / 1; width: 62%; height: auto; }
.sec__ico--bad { color: var(--bad); opacity: calc(1 - var(--k)); }
.sec__ico--ok { color: var(--pa); opacity: var(--k); }
.sec__ctrls { position: absolute; left: 4%; right: 4%; top: 22%; bottom: 16%; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; column-gap: 34cqw; align-items: center; }
.sec__ctrls li { --ck: clamp(0, calc((var(--k) * 7 - var(--t)) * 1.4), 1); display: flex; align-items: center; gap: 6px; padding: 1.7cqw 2.1cqw; border-radius: 10px; font-size: max(10px, 2.35cqw); line-height: 1.25; color: var(--text); border: 1px solid rgba(var(--pa-rgb), calc(.08 + var(--ck) * .4)); background: rgba(var(--pa-rgb), calc(var(--ck) * .09)); opacity: calc(.16 + var(--ck) * .84); transform: translateY(calc((1 - var(--ck)) * 8px)); }
.sec__ctrls svg { width: max(13px, 3cqw); height: auto; color: var(--pa); flex: none; }

@media (max-width: 900px) {
  .why__story { --step-h: 40svh; }
  .why__problem { font-size: .8rem; gap: 4px 8px; }
  .why__problem .chip { font-size: 9.5px; padding: 3px 8px; }
}

/* ===== 3. HOW IT WORKS — policy push ===== */
.pp { position: relative; }
html.motion .pp__pin { height: 195svh; }
html.motion .pp__sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) + 52px); padding-bottom: 18px; overflow: hidden; }
html:not(.motion) .pp__sticky { padding-top: var(--space-section); }
.pp__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pp__head .eyebrow { margin-bottom: 12px; }
.pp__lead { color: var(--text-2); max-width: 74ch; margin-top: 12px; text-wrap: balance; }
.pp__theatre { margin-top: clamp(14px, 2.6vh, 30px); }
.pp__stage { --a: clamp(0, calc(var(--p) / .16), 1); --s: clamp(0, calc((var(--p) - .17) / .12), 1); --b: clamp(0, calc((var(--p) - .36) / .22), 1); --e: clamp(0, calc((var(--p) - .58) * 25), 1); --c: clamp(0, calc((var(--p) - .62) / .2), 1); --d: clamp(0, calc((var(--p) - .86) / .11), 1); position: relative; aspect-ratio: 1200 / 560; width: min(100%, calc((100svh - 400px) * 2.143)); margin-inline: auto; container-type: inline-size; border-radius: var(--radius-l); border: 1px solid var(--line); background: linear-gradient(to right, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(to bottom, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 40px 40px, radial-gradient(60% 80% at 47% 50%, rgba(var(--pa-rgb), .12), transparent 70%), #070a10; }
.pp__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pp__wires--v { display: none; }
.pp-base path { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; stroke-dasharray: 3 6; }
.pp-lit path { fill: none; stroke: var(--pa); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; filter: drop-shadow(0 0 4px rgba(var(--pa-rgb), .8)); }
.pp-l0 { stroke-dashoffset: calc(1 - var(--a)); }
.pp-l1 { stroke-dashoffset: calc(1 - var(--b)); }
.pp-wl { font-family: var(--font-mono); font-size: 13px; fill: var(--text-3); letter-spacing: .04em; }
.pp-pk { fill: #fff; stroke: var(--pa); stroke-width: 3; filter: drop-shadow(0 0 6px var(--pa)); }
.pp-rt { fill: var(--ok); filter: drop-shadow(0 0 6px var(--ok)); }
.pk0 { opacity: min(calc(var(--a) * 40), calc((1 - var(--a)) * 40), 1); }
.pk1, .pk2, .pk3 { opacity: min(calc(var(--b) * 40), calc((1 - var(--b)) * 40), 1); }
.pp-rt { opacity: min(calc(var(--d) * 40), calc((1 - var(--d)) * 30), 1); }
.pp__wires--h .pk0 { transform: translate(calc(255px + 185px * var(--a)), 280px); }
.pp__wires--h .pk1 { transform: translate(calc(680px + 178px * var(--b)), calc(280px - 190px * var(--b))); }
.pp__wires--h .pk2 { transform: translate(calc(680px + 178px * var(--b)), 280px); }
.pp__wires--h .pk3 { transform: translate(calc(680px + 178px * var(--b)), calc(280px + 190px * var(--b))); }
.pp__wires--h .rt1 { transform: translate(calc(858px - 178px * var(--d)), calc(90px + 190px * var(--d))); }
.pp__wires--h .rt2 { transform: translate(calc(858px - 178px * var(--d)), 280px); }
.pp__wires--h .rt3 { transform: translate(calc(858px - 178px * var(--d)), calc(470px - 190px * var(--d))); }
.pp__wires--v .pk0 { transform: translate(180px, calc(94px + 38px * var(--a))); }
.pp__wires--v .pk1 { transform: translate(calc(180px - 118px * var(--b)), calc(248px + 67px * var(--b))); }
.pp__wires--v .pk2 { transform: translate(180px, calc(248px + 67px * var(--b))); }
.pp__wires--v .pk3 { transform: translate(calc(180px + 118px * var(--b)), calc(248px + 67px * var(--b))); }
.pp__wires--v .rt1 { transform: translate(calc(62px + 118px * var(--d)), calc(315px - 67px * var(--d))); }
.pp__wires--v .rt2 { transform: translate(180px, calc(315px - 67px * var(--d))); }
.pp__wires--v .rt3 { transform: translate(calc(298px - 118px * var(--d)), calc(315px - 67px * var(--d))); }

.pp-node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: clamp(8px, 1.2cqw, 14px) clamp(6px, 1cqw, 12px); border-radius: clamp(10px, 1.4cqw, 16px); border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), #0b0f17; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9); font-size: clamp(10px, 1.12cqw, 13.5px); line-height: 1.3; }
.pp-node strong { font-size: 1.14em; font-weight: 600; letter-spacing: -.01em; }
.pp-node__sub { color: var(--text-3); font-size: .94em; }
.pp-node__ico { display: grid; place-items: center; width: clamp(28px, 3.6cqw, 42px); height: clamp(28px, 3.6cqw, 42px); margin-bottom: 4px; border-radius: 12px; color: var(--pa); background: rgba(var(--pa-rgb), .1); border: 1px solid rgba(var(--pa-rgb), .3); }
.pp-node__ico svg { width: 52%; height: 52%; }
.pp-admin { --x: 12.5; --y: 50; --w: 17.5; border-color: rgba(var(--pa-rgb), calc(.15 + (1 - var(--s)) * var(--a) * .5)); }
.pp-server { --x: 46.67; --y: 50; --w: 20; padding-block: 18px; border-color: rgba(var(--pa-rgb), calc(.2 + var(--s) * .5)); box-shadow: 0 0 calc(var(--s) * 60px) rgba(var(--pa-rgb), .3), 0 20px 50px -24px rgba(0, 0, 0, .9); }
.pp-server .pp-node__ico { width: clamp(32px, 4.3cqw, 50px); height: clamp(32px, 4.3cqw, 50px); }
.pp-server__halo { position: absolute; inset: -12px; border-radius: 24px; border: 1px solid rgba(var(--pa-rgb), .55); opacity: calc(var(--s) * (1 - var(--d) * .6)); animation: pp-halo 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes pp-halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.pp-badge { position: absolute; left: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; font-family: var(--font-mono); font-size: clamp(8.5px, .9cqw, 10.5px); letter-spacing: .06em; text-transform: uppercase; }
.pp-badge svg { width: 13px; height: 13px; }
.pp-badge--seal { top: -14px; color: var(--pa); background: #120f22; border: 1px solid rgba(var(--pa-rgb), .5); opacity: var(--s); transform: translateX(-50%) scale(calc(.7 + var(--s) * .3)); }
.pp-badge--back { bottom: -14px; color: var(--ok); background: #0a1a14; border: 1px solid rgba(62, 230, 154, .45); opacity: var(--d); transform: translateX(-50%) translateY(calc((1 - var(--d)) * 6px)); }
.pp-ep { --w: 25; --x: 84; gap: clamp(3px, .5cqw, 6px); border-color: rgba(255, 255, 255, calc(.12 + var(--e) * .06)); }
.pp-ep--1 { --y: 16.07; }
.pp-ep--2 { --y: 50; }
.pp-ep--3 { --y: 83.93; }
.pp-ep__tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: clamp(8px, .85cqw, 10px); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pp-ep__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.pp-ep__ico { position: relative; display: grid; place-items: center; width: clamp(24px, 2.9cqw, 34px); height: clamp(24px, 2.9cqw, 34px); color: var(--text-2); }
.pp-ep__ico > svg:first-child { width: 76%; height: 76%; }
.pp-ban { position: absolute; right: -6px; bottom: -4px; width: 18px; height: 18px; color: var(--bad); background: #0b0f17; border-radius: 50%; opacity: var(--e); transform: scale(calc(.4 + var(--e) * .6)); }
.pp-ep__st { display: grid; justify-items: center; min-height: 2.2em; }
.pp-ep__st > span { grid-area: 1 / 1; }
.pp-ep__wait { color: var(--text-3); font-size: .96em; opacity: calc(1 - var(--e)); }
.pp-ep__res { font-weight: 600; font-size: 1.04em; opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 6px)); }
.pp-ep__res--bad { color: var(--bad); }
.pp-ep__res--ok { color: var(--ok); display: grid; justify-items: center; gap: 6px; }
.pp-ep--1 { border-color: rgba(255, 107, 107, calc(.12 + var(--e) * .4)); box-shadow: 0 0 calc(var(--e) * 30px) rgba(255, 107, 107, .16), 0 20px 50px -24px #000; }
.pp-ep--2 { border-color: rgba(255, 107, 107, calc(.12 + var(--e) * .4)); box-shadow: 0 0 calc(var(--e) * 30px) rgba(255, 107, 107, .16), 0 20px 50px -24px #000; }
.pp-ep--3 { border-color: rgba(62, 230, 154, calc(.12 + var(--c) * .4)); box-shadow: 0 0 calc(var(--c) * 30px) rgba(62, 230, 154, .14), 0 20px 50px -24px #000; }
.pp-pct { font-variant-numeric: tabular-nums; }
.pp-bar { display: block; width: clamp(64px, 9cqw, 110px); height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), #9cf5c9); transform-origin: left; transform: scaleX(var(--c)); }

.pp__steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: min(100%, calc((100svh - 400px) * 2.143)); min-width: min(100%, 860px); margin: 16px auto 0; }
.pp__steps li { padding-top: 12px; border-top: 2px solid var(--line); color: var(--text-3); font-size: .86rem; line-height: 1.45; transition: color .4s, border-color .4s; }
.pp__steps b { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
html.motion .pp__steps li.is-on, html:not(.motion) .pp__steps li { color: var(--text); border-top-color: var(--pa); }
html.motion .pp__steps li.is-on b, html:not(.motion) .pp__steps b { color: var(--pa); }
.pp__facts { padding-top: clamp(28px, 4vw, 56px); padding-bottom: var(--space-section); }

@media (max-width: 640px) {
  html.motion .pp__pin { height: 175svh; }
  .pp__head .h2 { font-size: 1.95rem; }
  .pp__lead { font-size: .86rem; line-height: 1.45; margin-top: 8px; }
  .pp__stage { aspect-ratio: 360 / 460; width: min(100%, calc((100svh - 400px) * .783)); }
  .pp__wires--h { display: none; }
  .pp__wires--v { display: block; }
  .pp-wl { font-size: 10px; }
  .pp-node { padding: 8px 6px; gap: 2px; font-size: .7rem; border-radius: 12px; }
  .pp-node strong { font-size: .78rem; }
  .pp-node__sub { font-size: .68rem; }
  .pp-node__ico { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 2px; }
  .pp-node__ico svg { width: 17px; height: 17px; }
  .pp-admin { --x: 50; --y: 11.3; --w: 58; flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 8px; text-align: left; }
  .pp-admin .pp-node__sub { flex-basis: 100%; text-align: center; }
  .pp-server { --x: 50; --y: 41.3; --w: 62; padding-block: 10px; }
  .pp-server .pp-node__ico { width: 34px; height: 34px; }
  .pp-badge { font-size: 9px; padding: 3px 8px; }
  .pp-ep { --w: 31; --y: 83.7; padding: 8px 4px; gap: 4px; }
  .pp-ep--1 { --x: 17.2; --y: 83.7; }
  .pp-ep--2 { --x: 50; --y: 83.7; }
  .pp-ep--3 { --x: 82.8; --y: 83.7; }
  .pp-ep__tag { font-size: 8.5px; letter-spacing: .05em; text-align: center; justify-content: center; line-height: 1.3; }
  .pp-ep__ico > svg:first-child { width: 22px; height: 22px; }
  .pp-ep__res { font-size: .72rem; line-height: 1.2; }
  .pp-ep__wait { font-size: .68rem; }
  .pp-bar { width: 72px; }
  .pp__steps { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  html.motion .pp__steps li { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); }
  html.motion .pp__steps li.is-on { opacity: 1; transform: none; }
  .pp__steps li { font-size: .82rem; padding-top: 8px; }
}

/* ===== 4. PRODUCT TOUR ===== */
.tour__story { --step-h: 50svh; }
.tour__stage { aspect-ratio: auto; width: min(100%, calc((100svh - 200px) * 1.6)); }
.tour__frame { position: relative; }
.tour__urls { display: grid; }
.tour__urls > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; }
.tour__screens { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tour__shot { --cw: 1424; --ch: 890; position: absolute; inset: 0; }
html.motion .tour__shot { transition: opacity .7s var(--ease-out), transform 1s var(--ease-out), filter .7s; }
html.motion .tour__shot:not(.is-on) { transform: scale(1.025); filter: blur(5px); }
.tour__call { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--text); background: rgba(8, 11, 17, .88); border: 1px solid rgba(var(--pa-rgb), .5); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .85), 0 0 24px -8px rgba(var(--pa-rgb), .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .6s var(--ease-out) .25s, transform .8s var(--ease-out) .25s; }
.tour__call svg { width: 14px; height: 14px; color: var(--pa); }
.tour__call--a { left: 3.5%; bottom: 5.5%; }
.tour__call--b { right: 3.5%; top: 6%; }
html.motion .tour__shot:not(.is-on) .tour__call { opacity: 0; transform: translateY(10px); }
html:not(.motion) .tour__shot { position: relative; }
html:not(.motion) .tour__screens { aspect-ratio: auto; }
html:not(.motion) .tour__urls > span:not(:first-child) { display: none; }

@media (max-width: 900px) {
  .tour__story { --step-h: 40svh; }
  .tour__stage { width: min(100%, calc((48svh - 70px) * 1.6)); }
  .tour__call { font-size: 9.5px; padding: 5px 9px; gap: 5px; }
  .tour__call svg { width: 12px; height: 12px; }
}
@media (max-width: 640px) {
  .tour__stage { width: min(100%, calc((48svh - 56px) * 1.333)); }
  .tour__screens { aspect-ratio: 4 / 3; }
  .tour__call--a { left: 3%; bottom: 4%; }
  .tour__call--b { right: 3%; top: 4%; }
}

/* ===== 5. ENDPOINT CONTROL ===== */
.ctl__story { --step-h: 50svh; }
.ctl__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cv { display: flex; flex-direction: column; gap: 3cqw; padding: 4.6cqw; font-size: max(11px, 2.55cqw); }
.cv__head { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-mono); font-size: max(9.5px, 2.1cqw); letter-spacing: .1em; text-transform: uppercase; color: var(--pa); }
.cv__head svg { width: 1.5em; height: 1.5em; flex: none; }
.cv__head .dot { color: var(--ok); }
.cv__head-r { margin-left: auto; color: var(--text-3); letter-spacing: .05em; white-space: nowrap; }
.v-ok { color: var(--ok); }
.v-bad { color: var(--bad); }
.usb-v { justify-self: start; align-self: flex-start; font-family: var(--font-mono); font-size: max(9px, 1.85cqw); letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; padding: 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.usb-v--ok { color: var(--ok); border-color: rgba(62, 230, 154, .4); background: rgba(62, 230, 154, .09); }
.usb-v--bad { color: var(--bad); border-color: rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .09); }

/* C0 USB */
.usb__rules { list-style: none; padding: 0; margin: 0; display: grid; gap: .9cqw; counter-reset: r; }
.usb__rules li { counter-increment: r; display: flex; align-items: center; gap: 1.8cqw; padding: 1.15cqw 2cqw; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font-size: max(10px, 2.3cqw); color: var(--text-2); white-space: nowrap; overflow: hidden; transition: border-color .3s, background-color .3s, box-shadow .3s, color .3s; }
.usb__rules li::before { content: counter(r); width: 1.3em; font-family: var(--font-mono); color: var(--text-3); }
.usb__rules b { width: 4.2em; flex: none; font-family: var(--font-mono); font-size: .82em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.usb__rules i { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: .78em; color: var(--text-3); }
.usb[data-r="1"] .usb__rules li:nth-child(1), .usb[data-r="2"] .usb__rules li:nth-child(2), .usb[data-r="3"] .usb__rules li:nth-child(3),
.usb[data-r="4"] .usb__rules li:nth-child(4), .usb[data-r="5"] .usb__rules li:nth-child(5) { color: var(--text); border-color: rgba(var(--pa-rgb), .6); background: rgba(var(--pa-rgb), .12); box-shadow: 0 0 20px -6px rgba(var(--pa-rgb), .7); }
.usb__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 1.6cqw; }
.usb-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico v" "n n"; align-content: space-between; gap: .8cqw; min-width: 0; padding: 1.9cqw 2cqw; border-radius: 10px; border: 1px solid var(--line); background: #0c111a; transition: border-color .4s, box-shadow .4s, opacity .4s, transform .5s var(--ease-out); }
.usb-tile > svg { grid-area: ico; width: max(15px, 3.6cqw); height: auto; color: var(--text-2); }
.usb-tile .usb-v { grid-area: v; justify-self: end; align-self: start; }
.usb-tile__n { grid-area: n; font-size: max(10px, 2.3cqw); font-weight: 550; line-height: 1.2; }
.usb-tile__n small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: .82em; font-weight: 400; color: var(--text-3); }
.usb-tile .usb-v { transition: opacity .35s, transform .5s var(--ease-spring); }
.usb-tile[data-ok] { border-color: rgba(62, 230, 154, .3); }
.usb-tile:not([data-ok]) { border-color: rgba(255, 107, 107, .3); }
.usb[data-live] .usb-tile { border-color: var(--line); opacity: .5; }
.usb[data-live] .usb-tile .usb-v { opacity: 0; transform: scale(.7); }
.usb[data-live] .usb-tile.is-eval { opacity: 1; border-color: rgba(var(--pa-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--pa-rgb), .15), 0 0 26px -6px rgba(var(--pa-rgb), .7); transform: translateY(-2px); }
.usb[data-live] .usb-tile.is-done { opacity: 1; }
.usb[data-live] .usb-tile.is-done .usb-v { opacity: 1; transform: none; }
.usb[data-live] .usb-tile.is-done[data-ok] { border-color: rgba(62, 230, 154, .35); }
.usb[data-live] .usb-tile.is-done:not([data-ok]) { border-color: rgba(255, 107, 107, .35); }
.usb[data-live] .usb-tile.is-done > svg { color: var(--text); }

/* C1 application control */
.app__log { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.3cqw; flex: 1; align-content: center; }
.app__log li { --rk: clamp(0, calc((var(--lp, 1) * 6 - var(--t)) * 2), 1); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "os code v" "os eng v"; align-items: center; column-gap: 2.4cqw; row-gap: 2px; padding: 1.6cqw 2.2cqw; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); opacity: calc(.1 + var(--rk) * .9); transform: translateX(calc((1 - var(--rk)) * 16px)); }
.app__os { grid-area: os; font-family: var(--font-mono); font-size: .75em; letter-spacing: .08em; color: var(--pa); border: 1px solid rgba(var(--pa-rgb), .35); border-radius: 5px; padding: 2px 5px; }
.app__log code { grid-area: code; font-family: var(--font-mono); font-size: .92em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__eng { grid-area: eng; font-size: .78em; color: var(--text-3); }
.app__log .usb-v { grid-area: v; }
.app__foot { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-mono); font-size: max(9.5px, 2cqw); letter-spacing: .04em; color: var(--text-3); }
.app__foot span { display: inline-flex; align-items: center; gap: 6px; }
.app__foot svg { width: 1.3em; height: 1.3em; color: var(--pa); }

/* C2 command policies */
.cmd__code { display: grid; gap: 1.6cqw; padding: 2.6cqw 3cqw; border-radius: 10px; border: 1px solid var(--line); background: #06080d; font-family: var(--font-mono); font-size: max(10px, 2.25cqw); }
.cmd__code p { display: flex; align-items: baseline; gap: 2.2cqw; min-width: 0; }
.cmd__code code { color: #d6dfec; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd__code code::before { content: "$ "; color: var(--text-3); }
.cmd__tag { flex: none; width: 6.4em; color: var(--pa); font-size: .82em; letter-spacing: .04em; }
.cmd__win { padding: 2.4cqw 3cqw 1.8cqw; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.cmd__win-top { display: flex; justify-content: space-between; font-size: .9em; color: var(--text-2); margin-bottom: 1.8cqw; }
.cmd__win-top span:last-child { font-family: var(--font-mono); color: var(--text); }
.cmd__track { position: relative; height: 3.4cqw; min-height: 14px; border-radius: 6px; background: rgba(255, 255, 255, .05); container-type: inline-size; }
.cmd__band { position: absolute; left: 41.67%; width: 29.17%; top: 0; bottom: 0; border-radius: 6px; background: rgba(var(--pa-rgb), .28); border: 1px solid rgba(var(--pa-rgb), .6); }
.cmd__now { position: absolute; top: -5px; bottom: -5px; left: 25%; transform: translateX(calc(var(--lp, 1) * 41cqw)); width: 2px; background: var(--text); box-shadow: 0 0 10px #fff; border-radius: 2px; }
.cmd__now::after { content: "now"; position: absolute; top: -1.9em; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.cmd__ticks { display: flex; justify-content: space-between; margin-top: 1.4cqw; font-family: var(--font-mono); font-size: max(9px, 1.8cqw); color: var(--text-3); }
.cmd__status { display: grid; }
.cmd__st { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-self: start; gap: 8px; padding: 1.4cqw 2.6cqw; border-radius: 999px; font-family: var(--font-mono); font-size: max(9.5px, 2cqw); letter-spacing: .06em; text-transform: uppercase; border: 1px solid; }
.cmd__st svg { width: 1.3em; height: 1.3em; }
.cmd__st--hold { color: var(--warn); border-color: rgba(255, 181, 71, .4); background: rgba(255, 181, 71, .08); opacity: clamp(0, calc((.4 - var(--lp, 1)) * 30), 1); }
.cmd__st--run { color: var(--info); border-color: rgba(110, 168, 255, .4); background: rgba(110, 168, 255, .08); opacity: min(clamp(0, calc((var(--lp, 1) - .4) * 30), 1), clamp(0, calc((.8 - var(--lp, 1)) * 30), 1)); }
.cmd__st--ok { color: var(--ok); border-color: rgba(62, 230, 154, .4); background: rgba(62, 230, 154, .08); opacity: clamp(0, calc((var(--lp, 1) - .8) * 30), 1); }

/* C3 packages */
.pkg__flow { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2cqw; flex: 1; align-content: center; }
.pkg__flow li { --rk: clamp(0, calc((var(--lp, 1) * 6 - var(--t)) * 2), 1); display: flex; align-items: center; gap: 2.6cqw; padding: 1.8cqw 2.6cqw; border-radius: 10px; border: 1px solid rgba(var(--pa-rgb), calc(.06 + var(--rk) * .36)); background: rgba(var(--pa-rgb), calc(var(--rk) * .07)); opacity: calc(.25 + var(--rk) * .75); }
.pkg__flow svg { width: max(15px, 3.4cqw); height: auto; flex: none; color: color-mix(in srgb, var(--ok) calc(var(--rk) * 100%), var(--text-3)); }
.pkg__batches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; }
.pkg__batches span { --bk: clamp(0, calc(var(--lp, 1) * 4.8 - var(--t) - .4), 1); display: grid; gap: 1cqw; font-family: var(--font-mono); font-size: max(9px, 1.9cqw); color: var(--text-3); }
.pkg__batches i { display: block; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .07); position: relative; overflow: hidden; }
.pkg__batches i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pa), var(--ok)); transform-origin: left; transform: scaleX(var(--bk)); }

/* C4 write filter */
.uwf__body { flex: 1; min-height: 0; display: grid; grid-template-columns: .95fr 1.05fr; gap: 3.2cqw; align-items: stretch; }
.uwf__dev { display: grid; grid-template-rows: 1fr auto; gap: 1.6cqw; padding: 2.2cqw; border-radius: 12px; border: 1px solid var(--line-strong); background: #0a0e16; }
.uwf__screen { display: grid; place-content: center; text-align: center; gap: 4px; border-radius: 8px; background: linear-gradient(160deg, rgba(var(--pa-rgb), .22), rgba(110, 168, 255, .08)); border: 1px solid rgba(var(--pa-rgb), .35); font-weight: 600; }
.uwf__screen small { font-family: var(--font-mono); font-weight: 400; font-size: .78em; color: var(--text-2); }
.uwf__layers { display: grid; gap: 1cqw; font-family: var(--font-mono); font-size: max(9px, 1.85cqw); letter-spacing: .03em; }
.uwf__layers span { display: flex; align-items: center; gap: 6px; padding: 1.2cqw 1.6cqw; border-radius: 7px; }
.uwf__layers svg { width: 1.3em; height: 1.3em; }
.uwf__ov { color: var(--warn); border: 1px dashed rgba(255, 181, 71, .55); background: rgba(255, 181, 71, .06); }
.uwf__vol { color: var(--pa); border: 1px solid rgba(var(--pa-rgb), .5); background: rgba(var(--pa-rgb), .08); }
.uwf__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1cqw; align-content: center; }
.uwf__steps li { --rk: clamp(0, calc((var(--lp, 1) * 7 - var(--t)) * 2), 1); display: flex; align-items: center; gap: 2cqw; padding: 1.3cqw 2cqw; border-radius: 8px; font-size: max(10px, 2.2cqw); border: 1px solid rgba(var(--pa-rgb), calc(var(--rk) * .3)); background: rgba(var(--pa-rgb), calc(var(--rk) * .06)); opacity: calc(.25 + var(--rk) * .75); }
.uwf__steps li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--pa) calc(var(--rk) * 100%), var(--text-3)); }
.uwf__steps li.uwf__done { color: var(--ok); border-color: rgba(62, 230, 154, calc(var(--rk) * .45)); background: rgba(62, 230, 154, calc(var(--rk) * .07)); }
.uwf__steps li.uwf__done::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

@media (max-width: 900px) {
  .ctl__story { --step-h: 42svh; }
  .ctl__stage { --ratio: 1 / 1 !important; }
  .ctl__chips { margin-top: 10px; gap: 6px; }
  .ctl__chips .chip { font-size: 9.5px; padding: 4px 9px; }
  .cv { padding: 4cqw; gap: 2.6cqw; }
  .usb__rules li { padding: .9cqw 2cqw; }
}

/* no-motion fallbacks for stage stacks */
html:not(.motion) .why__stage, html:not(.motion) .ctl__stage { aspect-ratio: auto; width: 100%; display: grid; gap: 16px; }
html:not(.motion) .wv, html:not(.motion) .cv { position: relative; aspect-ratio: 5 / 4; }

/* ===== 6. PATCH & OTA ===== */

.ota__slots { display: grid; gap: 12px; }
.ota__slot { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-strong); background: #0c111a; overflow: hidden; }
.ota__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, .04); color: var(--text-2); }
.ota__ico svg { width: 20px; height: 20px; }
.ota__name b { display: block; font-weight: 600; }
.ota__name small { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; }
.ota__tags { display: grid; justify-items: end; }
.ota__tag { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.ota__tag svg { width: 12px; height: 12px; }
.ota__tag--active { color: var(--pa); border-color: rgba(var(--pa-rgb), .5); background: rgba(var(--pa-rgb), .12); }
.ota__tag--fb { color: var(--text-2); border-color: var(--line-strong); background: rgba(255, 255, 255, .04); }
.ota__tag--ver { color: var(--ok); border-color: rgba(62, 230, 154, .4); background: rgba(62, 230, 154, .08); }
.ota__slot--a { border-color: rgba(var(--pa-rgb), calc(.15 + (1 - var(--sw)) * .45)); box-shadow: inset 0 0 0 1px rgba(var(--pa-rgb), calc((1 - var(--sw)) * .15)); }
.ota__slot--a .ota__tag--active { opacity: calc(1 - var(--sw)); }
.ota__slot--a .ota__tag--fb { opacity: var(--fb); }
.ota__slot--b { border-color: rgba(var(--pa-rgb), calc(.15 + var(--sw) * .45)); }
.ota__slot--b .ota__ico { color: color-mix(in srgb, var(--pa) calc(var(--sw) * 100%), var(--text-2)); }
.ota__slot--b .ota__tag--ver { opacity: calc(var(--v) * (1 - var(--sw))); }
.ota__slot--b .ota__tag--active { opacity: var(--sw); }
.ota__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .04); }
.ota__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pa), var(--ok)); transform-origin: left; transform: scaleX(var(--w)); }
.ota__steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: o; }
.ota__steps li { counter-increment: o; padding-top: 10px; border-top: 2px solid var(--line); font-size: .8rem; line-height: 1.35; color: var(--text-3); transition: color .35s, border-color .35s; }
.ota__steps li::before { content: "0" counter(o); display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; margin-bottom: 3px; }

@media (max-width: 640px) {
  .ota__slot { padding: 12px 14px; gap: 10px; }
  .ota__ico { width: 34px; height: 34px; }
  .ota__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
}

/* ===== 7. SELF-HEALING WATCHDOG ===== */
.wd { position: relative; }
html.motion .wd__pin { height: 185svh; }
.wd__sticky { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
html.motion .wd__sticky { position: sticky; top: 0; height: 100svh; padding-top: calc(var(--header-h) + 52px); padding-bottom: 16px; }
html:not(.motion) .wd__sticky { padding-top: var(--space-section); }
.wd__lead { color: var(--text-2); font-size: var(--fs-lead); line-height: 1.55; margin-top: 18px; max-width: 46ch; }
.ladder { --wp: 1; position: relative; padding: clamp(16px, 2vw, 24px); border-radius: var(--radius-l); border: 1px solid var(--line-strong); background: radial-gradient(80% 60% at 100% 0%, rgba(var(--pa-rgb), .1), transparent 60%), #080b12; box-shadow: 0 50px 120px -60px rgba(0, 0, 0, .9); transition: border-color .6s, box-shadow .6s; }
.wd__pin[data-st="ok"] .ladder { border-color: rgba(62, 230, 154, .45); box-shadow: 0 0 0 1px rgba(62, 230, 154, .15), 0 0 80px -30px rgba(62, 230, 154, .5); }
.ladder__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.ladder__ecg { width: 120px; height: 28px; }
.ladder__ecg path { fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60 140; animation: ecg 2s linear infinite; transition: stroke .5s; }
@keyframes ecg { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.wd__pin[data-st="bad"] .ladder__ecg path { stroke: var(--bad); animation-duration: 3.2s; }
.wd__pin[data-st="ok"] .ladder__ecg path { stroke: var(--ok); }
.ladder__status { display: grid; justify-items: end; }
.ladder__st { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid; opacity: 0; transition: opacity .4s; white-space: nowrap; }
.ladder__st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.ladder__st--bad { color: var(--bad); border-color: rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .08); }
.ladder__st--run { color: var(--warn); border-color: rgba(255, 181, 71, .4); background: rgba(255, 181, 71, .08); }
.ladder__st--ok { color: var(--ok); border-color: rgba(62, 230, 154, .4); background: rgba(62, 230, 154, .08); }
.wd__pin[data-st="bad"] .ladder__st--bad, .wd__pin[data-st="run"] .ladder__st--run, .wd__pin[data-st="ok"] .ladder__st--ok { opacity: 1; }
.ladder__rungs { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 2px; }
.ladder__rungs::before, .ladder__rungs::after { content: ""; position: absolute; left: 22px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; }
.ladder__rungs::before { background: rgba(255, 255, 255, .07); }
.ladder__rungs::after { background: linear-gradient(180deg, var(--warn), var(--ok)); transform-origin: top; transform: scaleY(var(--wp)); transition: transform .5s var(--ease-out); }
.rung { position: relative; z-index: 1; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; padding: 8px 10px 8px 8px; border-radius: 12px; border: 1px solid transparent; transition: background-color .4s, border-color .4s, opacity .4s; }
.rung__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--font-mono); font-size: 12px; color: var(--ok); background: #0b1612; border: 1px solid rgba(62, 230, 154, .45); transition: all .4s; }
.rung__b { display: grid; grid-template-rows: auto 1fr; min-width: 0; padding-top: 4px; transition: grid-template-rows .45s var(--ease-out); }
.rung__b b { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.rung__d { overflow: hidden; min-height: 0; color: var(--text-3); font-size: .84rem; line-height: 1.45; }
.wd__pin[data-live] .rung { opacity: .42; }
.wd__pin[data-live] .rung .rung__n { color: var(--text-3); background: #0c1018; border-color: var(--line-strong); }
.wd__pin[data-live] .rung.is-done { opacity: .8; }
.wd__pin[data-live] .rung.is-done .rung__n { color: var(--ok); background: #0b1612; border-color: rgba(62, 230, 154, .45); }
.wd__pin[data-live] .rung.is-active { opacity: 1; background: rgba(var(--pa-rgb), .08); border-color: rgba(var(--pa-rgb), .35); }
.wd__pin[data-live] .rung.is-active .rung__n { color: #05070b; background: var(--pa); border-color: var(--pa); box-shadow: 0 0 0 4px rgba(var(--pa-rgb), .2), 0 0 22px var(--pa); }
.wd__pin[data-live] .rung.is-active .rung__d { color: var(--text-2); }
.ladder__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-3); }

@media (max-width: 900px) {
  .wd__sticky { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; }
  html.motion .wd__sticky { padding-top: calc(var(--header-h) + 52px); }
  .wd__copy .h2 { font-size: 1.95rem; }
  .wd__lead { font-size: .86rem; line-height: 1.45; margin-top: 8px; }
  .wd__copy .eyebrow { margin-bottom: 10px; }
  .ladder { padding: 12px; }
  .ladder__top { padding-bottom: 10px; margin-bottom: 6px; }
  .ladder__ecg { width: 84px; }
  .ladder__st { font-size: 9.5px; padding: 4px 9px; }
  .rung { padding: 4px 8px 4px 4px; gap: 10px; grid-template-columns: 26px minmax(0, 1fr); }
  .rung__n { width: 26px; height: 26px; font-size: 11px; }
  .ladder__rungs::before, .ladder__rungs::after { left: 17px; }
  .rung__b { padding-top: 3px; }
  .rung__b b { font-size: .86rem; }
  .rung__d { font-size: .78rem; }
  .wd__pin[data-live] .rung:not(.is-active) .rung__b { grid-template-rows: auto 0fr; }
  .ladder__foot { margin-top: 8px; padding-top: 8px; font-size: 10.5px; }
}

/* ===== 8. MONITOR & RESPOND ===== */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.bento__card { display: flex; flex-direction: column; min-width: 0; }
.bc-inc { grid-column: span 7; }
.bc-perf { grid-column: span 5; }
.bc__k { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--pa); }
.bc__k svg { width: 16px; height: 16px; }
.bento__card h3 { margin-bottom: 10px; }
.bc__p { color: var(--text-2); font-size: .95rem; line-height: 1.55; max-width: 60ch; }
.bc-marq { margin-top: 12px; --gap: 8px; }
.bc-marq .chip { font-size: 10.5px; padding: 6px 12px; }
.bc-marq .chip .dot { width: 6px; height: 6px; }
.perf { margin-top: auto; padding-top: 18px; display: grid; gap: 12px; }
.perf__alert { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 107, 107, .3); background: rgba(255, 107, 107, .06); font-size: .88rem; }
.perf__x { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.perf__rec { display: flex; flex-wrap: wrap; gap: 6px; }
.perf__rec span { font-family: var(--font-mono); font-size: 10.5px; color: var(--warn); padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255, 181, 71, .35); background: rgba(255, 181, 71, .06); }
.sla--c { color: var(--bad); } .sla--h { color: var(--warn); } .sla--m { color: var(--info); } .sla--l { color: var(--text-3); }
.bc__note { margin-top: 10px; font-size: var(--fs-xs); color: var(--text-3); }
.geo { position: relative; aspect-ratio: 2 / 1; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(circle, rgba(255, 255, 255, .11) 1px, transparent 1.6px) 0 0 / 14px 14px, radial-gradient(70% 90% at 50% 40%, rgba(var(--pa-rgb), .1), transparent 70%), #070a10; }
.geo__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.geo__arc { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 1; filter: drop-shadow(0 0 4px rgba(255, 107, 107, .7)); }
.geo__pt { fill: var(--pa); }
.geo__pt--b { fill: var(--bad); }
.geo__ping { fill: none; stroke: var(--bad); stroke-width: 1.5; transform-origin: 290px 56px; animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(4.5); opacity: 0; } }
.geo__t { font-family: var(--font-mono); font-size: 10px; fill: var(--text-2); }
.geo__chip { position: absolute; right: 4%; bottom: 7%; }

@media (max-width: 640px) {
  .bento { gap: 10px; }
  .bento__card { padding: 16px; }
  .bento__card .h3 { font-size: 1.3rem; }
  .bc__p { font-size: .88rem; }
  .bc__k { margin-bottom: 10px; }
  .geo__chip { font-size: 9px; padding: 4px 8px; }
}

/* ===== 9. NEW IN 7.0 ===== */
.new7__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.n7 { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-l); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)), var(--bg-elev); overflow: hidden; transition: border-color .35s; }
.n7__shot, .n7__chat { position: relative; height: clamp(200px, 21vw, 290px); overflow: hidden; border-bottom: 1px solid var(--line); }
.n7__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 0%) var(--oy, 0%); transform: scale(var(--z, 1)); transform-origin: var(--ox, 0%) var(--oy, 0%); transition: transform 1.2s var(--ease-out); }
.n7__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(9, 12, 18, .85)); pointer-events: none; }
.n7__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px); }
.n7__body p:not(.n7__k) { color: var(--text-2); font-size: .95rem; line-height: 1.55; }
.n7__body .link-arrow { margin-top: auto; padding-top: 6px; font-size: .95rem; }
.n7__k { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--pa); }
.n7__chat { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px; background: radial-gradient(80% 90% at 80% 0%, rgba(var(--pa-rgb), .16), transparent 60%), #080b12; }
.n7__q { align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: rgba(var(--pa-rgb), .16); border: 1px solid rgba(var(--pa-rgb), .38); font-size: .9rem; line-height: 1.4; }
.n7__a { align-self: flex-start; width: 86%; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.n7__a-k { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.n7__a-k svg { width: 15px; height: 15px; color: var(--pa); }
.n7__a > i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .17), rgba(255, 255, 255, .07)) 0 0 / 200% 100%; animation: shimmer 2.6s linear infinite; }
.n7__a > i:nth-of-type(2) { width: 84%; animation-delay: -.4s; }
.n7__a > i:nth-of-type(3) { width: 58%; animation-delay: -.8s; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
.n7__used { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.n7__used span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--text-3); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-strong); }
.n7__used span:first-child::before { content: "Data used · "; }

@media (max-width: 640px) {
  .n7__shot, .n7__chat { height: 150px; }
  .n7__chat { padding: 14px; gap: 10px; }
  .n7__q { font-size: .8rem; }
  .n7__body { padding: 16px; gap: 6px; }
  .n7__body .h3 { font-size: 1.2rem; }
  .n7__body p:not(.n7__k) { font-size: .86rem; }
  .n7__body .link-arrow { font-size: .88rem; }
}

/* ===== 10. SECURITY & GOVERNANCE (light) ===== */
.gov__split { align-items: start; }
.gov__list { margin-top: 26px; }
.gov .lead { margin-top: 18px; }
.gov .checklist li { color: var(--text-2); }
.gov .checklist li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5cf0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.gov .serif-i { color: #6a4be0; }
.rbac { padding: clamp(18px, 2.2vw, 28px); margin: 0; }
.rbac__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.rbac__cap span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.rbac__cap svg { width: 18px; height: 18px; color: #6a4be0; }
.rbac__cap small { font-size: var(--fs-xs); color: var(--text-3); }
.rbac__t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rbac__t th, .rbac__t td { padding: 11px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.rbac__t thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); line-height: 1.3; vertical-align: bottom; }
.rbac__t thead th:first-child { width: 26%; }
.rbac__t tbody th { text-align: left; font-weight: 600; font-size: .92rem; }
.rbac__t i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; font-size: 0; vertical-align: middle; }
.rbac__t i.y { background: #7a5cf0; box-shadow: 0 0 0 4px rgba(122, 92, 240, .14); }
.rbac__t i.n { border: 1.5px solid rgba(11, 15, 23, .22); }
.rbac__foot { margin-top: 12px; font-size: var(--fs-xs); color: var(--text-3); }
.gov__more { margin-top: clamp(36px, 5vw, 64px); }
.gov-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 2px rgba(11, 15, 23, .04); }
.gov-card .icon-box { margin: 0; color: #6a4be0; background: rgba(122, 92, 240, .1); border-color: rgba(122, 92, 240, .25); }
.gov-card h3 { margin-bottom: 4px; }
.gov-card p { color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.gov__comp { margin-top: clamp(28px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.gov__comp-k { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.gov__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gov__chips li { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--text); }
@media (max-width: 640px) {
  .gov__list { margin-top: 18px; gap: 8px; }
  .gov .checklist li { font-size: .92rem; }
  .rbac { padding: 14px 10px; }
  .rbac__t th, .rbac__t td { padding: 9px 2px; }
  .rbac__t thead th { font-size: 8.5px; letter-spacing: .02em; }
  .rbac__t tbody th { font-size: .8rem; }
  .rbac__t i { width: 11px; height: 11px; }
  .gov__more { gap: 10px; }
  .gov-card { padding: 14px; }
  .gov-card p { font-size: .84rem; }
}

/* ===== 11. DEPLOY + BUSINESS CASE ===== */
.dsteps { list-style: none; padding: 0; margin: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.dsteps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 31px; height: 1px; background: repeating-linear-gradient(90deg, rgba(var(--pa-rgb), .7) 0 6px, transparent 6px 12px); transform-origin: left; transform: scaleX(var(--p)); }
.dsteps li { --sk: clamp(0, calc((var(--p) * 4.4 - var(--t)) * 2.2), 1); position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 0 6px; }
.dsteps__n { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 16px; border-radius: 50%; background: #0b0f17; border: 1px solid rgba(var(--pa-rgb), calc(.15 + var(--sk) * .6)); color: color-mix(in srgb, var(--pa) calc(var(--sk) * 100%), var(--text-3)); box-shadow: 0 0 0 6px var(--bg), 0 0 calc(var(--sk) * 30px) rgba(var(--pa-rgb), .45); }
.dsteps__n svg { width: 24px; height: 24px; }
.dsteps__k { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.dsteps h3 { margin-bottom: 6px; }
.dsteps li p:not(.dsteps__k) { color: var(--text-2); font-size: .92rem; line-height: 1.5; max-width: 30ch; }
.dsteps li > :not(.dsteps__n) { opacity: calc(.4 + var(--sk) * .6); }
.biz { margin-top: clamp(56px, 7vw, 96px); }
.biz__stats { padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.biz__stats .stat { padding-inline: 8px; }
@media (max-width: 760px) {
  .dsteps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dsteps::before { left: 25px; right: auto; top: 26px; bottom: 26px; width: 1px; height: auto; background: repeating-linear-gradient(180deg, rgba(var(--pa-rgb), .7) 0 6px, transparent 6px 12px); transform-origin: top; transform: scaleY(var(--p)); }
  .dsteps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; text-align: left; align-items: start; padding: 0; }
  .dsteps__n { grid-row: span 3; width: 52px; height: 52px; margin: 0; }
  .dsteps__n svg { width: 20px; height: 20px; }
  .dsteps__k { margin-bottom: 2px; }
  .dsteps h3 { margin-bottom: 2px; }
  .dsteps li p:not(.dsteps__k) { font-size: .86rem; max-width: none; }
  .biz { margin-top: 44px; }
  .biz__stats { row-gap: 22px; }
}

/* ===== 12. COMPARE ===== */
.cmp__wrap { padding: 0; }
.cmp__t thead th { padding-top: 20px; }
.cmp__t th, .cmp__t td { padding: 11px 18px; }
.cmp__t thead .is-us { border-radius: 12px 12px 0 0; }
.cmp__t tbody tr:last-child th, .cmp__t tbody tr:last-child td { border-bottom: 0; }
.cmp__t td.is-us { font-weight: 550; }
.cmp__t td.is-us::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--ok); vertical-align: middle; box-shadow: 0 0 8px var(--ok); }
.cmp__note { margin-top: 14px; }
@media (max-width: 760px) {
  .cmp__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cmp__t, .cmp__t tbody, .cmp__t tr, .cmp__t th, .cmp__t td { display: block; }
  .cmp__t tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 14px 14px 16px; border-bottom: 1px solid var(--line); }
  .cmp__t tbody tr:last-child { border-bottom: 0; }
  .cmp__t tbody th { grid-column: 1 / -1; width: auto; padding: 0; border: 0; font-size: .98rem; }
  .cmp__t td { padding: 0; border: 0; font-size: .8rem; line-height: 1.35; }
  .cmp__t td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .cmp__t td.is-us { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(var(--pa-rgb), .1); border: 1px solid rgba(var(--pa-rgb), .3); font-size: .88rem; }
  .cmp__t td.is-us::before { display: inline; margin: 0; color: var(--pa); }
  .cmp__t td.is-us::after { margin-left: auto; }
}

/* ===== 13. WHO + FAQ ===== */
.who__card .icon-box { margin-bottom: 14px; }
.faq-wrap { margin-top: clamp(64px, 9vw, 128px); display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-wrap__head { position: sticky; top: calc(var(--header-h) + 72px); }
.faq-wrap .faq__item { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
.faq-wrap .faq__item dd { line-height: 1.6; }
.faq__link { display: inline-block; margin-top: 6px; color: var(--pa); font-weight: 550; }
.faq__link:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .faq-wrap__head { position: static; }
}
@media (max-width: 640px) {
  .who__card .icon-box { width: 36px; height: 36px; margin-bottom: 10px; border-radius: 10px; }
  .who__card .icon-box svg { width: 18px; height: 18px; }
  .who__card h3 { font-size: .98rem; }
  .faq-wrap .faq__item { padding: 16px 0; }
  .faq-wrap .faq__item dt { font-size: 1.02rem; }
  .faq-wrap .faq__item dd { font-size: .92rem; line-height: 1.55; }
}

/* ---------- round 2 additions ---------- */
@media (min-width: 901px) {
  html.motion .tour__story.story--visual-left .story__sticky { grid-template-columns: minmax(0, 1.42fr) minmax(0, .72fr); gap: clamp(32px, 4vw, 64px); }
  html.motion .why__story, html.motion .tour__story, html.motion .ctl__story { margin-top: calc(-1 * clamp(0px, (100svh - 540px) / 2, 200px)); }
}
.inc-tks { display: grid; gap: 8px; margin-top: 18px; }
.inc-tk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.inc-tk__auto { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pa); padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(var(--pa-rgb), .4); background: rgba(var(--pa-rgb), .1); }
.inc-tk b { display: block; font-weight: 600; font-size: .9rem; }
.inc-tk small { display: block; font-size: .78rem; color: var(--text-3); }
html.motion .bc-inc .inc-tk { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
html.motion .bc-inc.is-in .inc-tk { opacity: 1; transform: none; }
html.motion .bc-inc.is-in .inc-tk + .inc-tk { transition-delay: .35s; }
@media (max-width: 640px) {
  .pp__facts .grid { gap: 10px; }
  .inc-tk { padding: 8px 10px; gap: 10px; }
  .inc-tk b { font-size: .84rem; }
}

.bento__card .bc__k { font-size: var(--fs-2xs); color: var(--pa); line-height: 1.3; }
.bento__card .bc__note { font-size: var(--fs-xs); color: var(--text-3); }
.bento__card .perf__rec { font-size: inherit; }
.wd__spec { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.wd__spec li { display: grid; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.wd__spec b { font-family: var(--font-sans); font-size: 1.7rem; font-weight: 600; letter-spacing: -.04em; text-transform: none; color: var(--text); line-height: 1.1; }
@media (max-width: 900px) {
  .wd__spec { margin-top: 10px; gap: 6px 18px; }
  .wd__spec li { font-size: 9px; grid-template-columns: auto auto; align-items: baseline; gap: 6px; }
  .wd__spec b { font-size: 1rem; }
}
.hero__title .nw { white-space: nowrap; }
@media (min-width: 901px) and (max-height: 860px) {
  .ladder { padding: 14px 18px; }
  .ladder__top { padding-bottom: 10px; margin-bottom: 6px; }
  .rung { padding: 5px 10px 5px 8px; }
  .wd__pin[data-live] .rung:not(.is-active) .rung__b { grid-template-rows: auto 0fr; }
  .ladder__foot { margin-top: 8px; padding-top: 8px; }
}

/* ---------- round 3: leaner layout ---------- */
.hero { padding-bottom: clamp(24px, 3vw, 48px); }
.pp__facts { padding-top: clamp(20px, 3vw, 40px); padding-bottom: var(--space-section); }
.pp-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 36px); }
.pp-strip li { display: flex; gap: 14px; align-items: flex-start; color: var(--text-2); font-size: .92rem; line-height: 1.5; }
.pp-strip .icon-box { margin: 0; }
.pp-strip b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
/* A/B update inside the control story */
.ab {
  --w: clamp(0, calc((var(--lp, 1) - .05) / .4), 1);
  --v: clamp(0, calc((var(--lp, 1) - .5) * 14), 1);
  --sw: clamp(0, calc((var(--lp, 1) - .66) * 14), 1);
  --fb: clamp(0, calc((var(--lp, 1) - .82) * 14), 1);
  justify-content: center;
}
.ab .cv__head { margin-bottom: 2cqw; }
.ab .ota__steps { margin-top: 2cqw; }
.ab .ota__steps li { --on: 0; color: color-mix(in srgb, var(--text) calc(var(--on) * 100%), var(--text-3)); border-top-color: color-mix(in srgb, var(--pa) calc(var(--on) * 100%), var(--line)); }
.ab .ota__steps li:nth-child(1) { --on: clamp(0, calc((.48 - var(--lp, 1)) * 30), 1); }
.ab .ota__steps li:nth-child(2) { --on: min(clamp(0, calc((var(--lp, 1) - .48) * 30), 1), clamp(0, calc((.64 - var(--lp, 1)) * 30), 1)); }
.ab .ota__steps li:nth-child(3) { --on: min(clamp(0, calc((var(--lp, 1) - .64) * 30), 1), clamp(0, calc((.8 - var(--lp, 1)) * 30), 1)); }
.ab .ota__steps li:nth-child(4) { --on: clamp(0, calc((var(--lp, 1) - .8) * 30), 1); }
/* respond bento, compact */
.bc-inc { grid-column: span 7; }
.bc-perf { grid-column: span 5; }
.bc-sla, .bc-loc { grid-column: span 6; }
.bc-marq { margin-top: auto; padding-top: 18px; }
.slas { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.slas li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font-size: .86rem; }
.slas li span { margin-left: auto; font-family: var(--font-mono); font-size: .76rem; color: var(--text-2); white-space: nowrap; }
.sla--c { color: var(--bad); } .sla--h { color: var(--warn); } .sla--m { color: var(--info); } .sla--l { color: var(--text-3); }
.bento__card .bc__note { margin-top: 8px; }
.esc { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; counter-reset: e; }
.esc li { counter-increment: e; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-2); }
.esc li::before { content: counter(e); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--pa); border: 1px solid rgba(var(--pa-rgb), .4); background: rgba(var(--pa-rgb), .08); }
.esc li + li::after { content: none; }
.esc li:not(:last-child) { padding-right: 14px; background: linear-gradient(90deg, var(--line-strong), var(--line-strong)) right 50% / 8px 1px no-repeat; }
.esc li:first-child { color: var(--warn); }
.bento__card .chans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: inherit; }
.chans span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .78rem; color: var(--text); }
.chans svg { width: 14px; height: 14px; color: var(--pa); }
.bc-loc .geo { margin-top: auto; aspect-ratio: 2.4 / 1; }
.bc-loc .bc__p { margin-bottom: 14px; }
/* new in 7.0: four compact cards */
.new7__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.n7__shot, .n7__chat { height: clamp(130px, 12vw, 168px); }
.n7__body { padding: 16px 18px 18px; gap: 6px; }
.n7__body p:not(.n7__k) { font-size: .9rem; line-height: 1.5; }
.n7__body .link-arrow { font-size: .88rem; }
.n7__chat { padding: 14px; gap: 10px; }
.n7__q { font-size: .8rem; padding: 8px 11px; }
.n7__a { padding: 9px 11px; gap: 6px; }
/* deployment, FAQ spacing */
.biz { margin-top: clamp(32px, 4vw, 56px); }
.faq-wrap { margin-top: clamp(48px, 6vw, 88px); }
.faq-wrap .faq__item { padding: 18px 0; }
@media (max-width: 1024px) {
  .bc-inc, .bc-perf, .bc-sla, .bc-loc { grid-column: span 12; }
  .new7__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pp-strip { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pp-strip li { font-size: .84rem; gap: 12px; }
  .bento__card .h3 { font-size: 1.25rem; }
  .slas li { font-size: .8rem; padding: 6px 8px; }
  .slas li span { font-size: .7rem; }
  .bc-loc .geo { aspect-ratio: 2.6 / 1; }
  .geo__chip { font-size: 9px; padding: 4px 8px; }
  .new7__grid { gap: 10px; }
  .n7 { border-radius: var(--radius); }
  .n7__shot, .n7__chat { height: 92px; }
  .n7__chat { padding: 8px; gap: 6px; justify-content: flex-start; }
  .n7__q { font-size: .66rem; padding: 6px 8px; max-width: 100%; }
  .n7__a { width: 100%; padding: 6px 8px; gap: 5px; }
  .n7__a-k { font-size: 8.5px; }
  .n7__body { padding: 11px 12px 13px; gap: 4px; }
  .n7__k { font-size: 9.5px; }
  .n7__body .h4 { font-size: .92rem; }
  .n7__body p:not(.n7__k) { font-size: .78rem; line-height: 1.42; }
  .n7__body .link-arrow { font-size: .76rem; }
  .n7__body .link-arrow svg { width: 13px; height: 13px; }
  .cmp__t tr { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 12px 12px 13px; }
  .cmp__t tbody th, .cmp__t td.is-us { flex: 1 1 100%; }
  .cmp__t td:not(.is-us) { font-size: .76rem; color: var(--text-2); }
  .cmp__t td:not(.is-us)::before { display: inline; content: attr(data-label) " · "; font-size: 8.5px; margin: 0; }
  .who__grid .card { padding: 13px; }
  .who__card p { font-size: .8rem; }
  .gov__more { gap: 8px; }
  .gov-card { padding: 12px; gap: 10px; }
  .gov-card h3 { font-size: .95rem; }
  .faq-wrap .faq__item { padding: 13px 0; }
  .faq-wrap .faq__item dd { font-size: .88rem; }
  .biz__stats .stat__num { font-size: 2rem; }
  .biz__stats .stat__label { font-size: .78rem; }
  .biz__stats { padding-block: 18px; row-gap: 14px; }
  .dsteps { gap: 10px; }
  .dsteps li p:not(.dsteps__k) { font-size: .82rem; }
  .dsteps__n { width: 44px; height: 44px; }
  .dsteps::before { left: 21px; }
}
@media (max-width: 760px) {
  html.motion .wd__pin { height: 175svh; }
}
@media (max-width: 640px) {
  .gov__more { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 22px; border-top: 1px solid var(--line); }
  .gov-card { padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; align-items: center; }
  .gov-card .icon-box { width: 30px; height: 30px; }
  .gov-card h3 { margin-bottom: 0; font-size: .9rem; }
  .gov-card p { font-size: .8rem; }
  .gov__comp { margin-top: 18px; padding-top: 16px; }
  .rbac__t th, .rbac__t td { padding: 7px 2px; }
  .who__grid { gap: 8px; }
  .who__card .icon-box { width: 30px; height: 30px; margin-bottom: 8px; }
  .who__card h3 { font-size: .9rem; margin-bottom: 4px; }
}
@media (min-width: 901px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .faq-wrap__head { position: static; }
  .faq-wrap .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); border-top: 0; }
  .faq-wrap .faq__item { border-top: 1px solid var(--line); border-bottom: 0; }
}
/* ---------- round 4: phone alignment ---------- */
@media (max-width: 640px) {
  .hero__float--b { top: 34px; right: 3%; }
  .pp-badge--seal { left: auto; right: -4px; top: -11px; transform: scale(calc(.7 + var(--s) * .3)); transform-origin: right center; }
  .pp-badge--back { left: auto; right: -4px; bottom: -11px; transform: translateY(calc((1 - var(--d)) * 6px)); }
  .geo__chip { right: auto; left: 4%; top: 7%; bottom: auto; }
  .cmp__t thead { display: none; }
  .app__log { gap: 1cqw; align-content: start; }
  .app__log li { padding: 1.2cqw 2cqw; }
  .cv { gap: 2.2cqw; }
}
@media (max-width: 420px) {
  .slas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  html.motion .pp__sticky { padding-top: 64px; }
  .pp__head .h2 { font-size: 1.75rem; }
  .pp__lead { font-size: .82rem; }
  .pp__stage { aspect-ratio: 360 / 400; width: min(100%, calc((100svh - 300px) * .9)); }
  .pp__wires--v .pk0 { transform: translate(180px, calc(82px + 26px * var(--a))); }
  .pp__wires--v .pk1 { transform: translate(calc(180px - 118px * var(--b)), calc(208px + 45px * var(--b))); }
  .pp__wires--v .pk2 { transform: translate(180px, calc(208px + 45px * var(--b))); }
  .pp__wires--v .pk3 { transform: translate(calc(180px + 118px * var(--b)), calc(208px + 45px * var(--b))); }
  .pp__wires--v .rt1 { transform: translate(calc(62px + 118px * var(--d)), calc(253px - 45px * var(--d))); }
  .pp__wires--v .rt2 { transform: translate(180px, calc(253px - 45px * var(--d))); }
  .pp__wires--v .rt3 { transform: translate(calc(298px - 118px * var(--d)), calc(253px - 45px * var(--d))); }
  .pp-admin { --y: 11; }
  .pp-server { --y: 39.5; }
  .pp-ep, .pp-ep--1, .pp-ep--2, .pp-ep--3 { --y: 79.5; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .ctl__stage { --ratio: 4 / 3 !important; }
  .usb__rules li { padding: .7cqw 2cqw; }
  .usb-tile { padding: 1.2cqw 1.6cqw; }
  .uwf__steps li { padding: .7cqw 1.6cqw; }
  .uwf__layers span { padding: .7cqw 1.2cqw; }
  .uwf__screen small { display: block; }
  .app__foot { gap: 2px 10px; font-size: 9px; }
  .ab .ota__slot { padding: 8px 12px; }
  .ab .ota__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; gap: 6px; }
  .ab .ota__steps li { font-size: .68rem; padding-top: 6px; }
}
/* short phones: drop decorative sub-labels inside the (aria-hidden) control visuals so nothing is clipped */
@media (max-width: 640px) and (max-height: 760px) {
  .app__eng, .cv .app__foot, .usb-tile__n small { display: none; }
  .app__log li { grid-template-areas: "os code v"; }
  .usb__grid { gap: 1.2cqw; }
}