:root{--navy:var(--color-seal-navy);--navy-deep:var(--color-deep-navy);--teal:var(--color-signal-teal);--bone:var(--color-bone);--paper:var(--color-white);--ink:var(--color-ink);--rule:var(--color-hairline);--radius-seal-block:6px;--fail:#C81E3A;--dur-snap:180ms;--dur-base:280ms;--dur-reveal:420ms;--ease-snap:cubic-bezier(.16,1,.3,1);--margin-outer:88px}
html{scroll-behavior:smooth}
body{background:var(--bone);cursor:auto}
.ss-shell{max-width:1440px;margin:0 auto;background:var(--bone)}
.ss-sec{padding:168px var(--margin-outer);border-top:1px solid var(--rule)}
.ss-sec--flush{padding:0;border-top:1px solid var(--rule)}
.ss-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.d-xl{font-family:var(--font-display);font-weight:800;font-size:clamp(48px,7.4vw,112px);line-height:.94;letter-spacing:-.03em;text-transform:uppercase;color:var(--navy);margin:0}
.d-l{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.4vw,80px);line-height:.94;letter-spacing:-.03em;text-transform:uppercase;color:var(--navy);margin:0}
.d-m{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.6vw,52px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;margin:0}
.d-s{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin:0}
.b-l{font-family:var(--font-body);font-weight:400;font-size:20px;line-height:1.55;max-width:62ch;color:var(--ink);margin:0}
.b{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.55;max-width:62ch;color:var(--ink);margin:0}
.lbl{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.mic{font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.inv{color:var(--paper)}.inv .b,.inv .b-l{color:rgba(255,255,255,.82)}
.rv{opacity:0;transform:translateY(20px);transition:opacity var(--dur-reveal) var(--ease-snap),transform var(--dur-reveal) var(--ease-snap)}
.rv.in{opacity:1;transform:none}
.seal{position:relative;display:inline-block}
.seal>.seal-face{position:absolute;inset:-6px -8px;background:var(--navy);border-radius:var(--radius-seal-block);transform-origin:50% 50%;transform:scaleY(.2) translateY(8px);opacity:0;transition:transform var(--dur-snap) cubic-bezier(.34,1.56,.64,1),opacity 60ms linear;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 8px rgba(7,18,88,.25)}
.seal.applied>.seal-face{transform:scaleY(1) translateY(0);opacity:1}
.seal.applied>.seal-under{visibility:hidden}
a,a:link{color:var(--navy)}
a:hover{color:var(--teal)}
.inv a{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ss-cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;width:14px;height:14px;border:1.5px solid var(--navy);transform:translate(-50%,-50%);transition:width var(--dur-snap) var(--ease-snap),height var(--dur-snap) var(--ease-snap),background-color var(--dur-snap) var(--ease-snap),border-color var(--dur-snap) var(--ease-snap);border-radius:50%}
.ss-cursor.hot{width:8px;height:8px;background:var(--navy);border-radius:0}
.hair{height:1px;background:var(--rule);border:0;margin:0}
.ss-form input,.ss-form select{width:100%;min-width:0}
.ss-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:1100px){.ss-figs{grid-template-columns:repeat(2,1fr);row-gap:64px}}
.tilt{transition:transform 200ms var(--ease-snap)}
.tilt .slot-par{transition:transform 200ms var(--ease-snap);will-change:auto}
.ssSpec{mix-blend-mode:screen}
.ss-card-sm [style*="font-size: 36px"],.ss-card-sm span{max-width:100%}
@media (hover:none){.ss-cursor{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}.seal>.seal-face{transform:none;opacity:1;transition:none}.seal>.seal-under{visibility:hidden}.ss-cursor{display:none}.tilt{transition:none}
#ssprog{display:none}.ss-boot{display:none}.hw,.w2{opacity:1;transform:none;transition:none}.eb-dash{transform:none!important}.strike .x1,.strike .x2{animation:none!important;stroke-dashoffset:0!important}.dc-bar,.dc-body{animation:none!important;opacity:1;transform:none}.fig-u{transform:scaleX(1)!important;transition:none!important}.cutflash{display:none!important}.ss-dim main>header,.ss-dim main>section{transform:none!important;opacity:1!important}}
@media (max-width:1200px){:root{--margin-outer:48px}}
@media (max-width:900px){:root{--margin-outer:24px}.ss-sec{padding:104px var(--margin-outer)}.b-l{font-size:18px}
.ss-mobile-stack{display:flex!important;flex-direction:column!important;gap:40px!important}
.ss-mobile-stack>*{grid-column:auto!important}
.ss-cols>*{padding-left:0!important;border-left:none!important}
.ss-form{grid-template-columns:1fr!important}
.ss-form>div{grid-column:auto!important}
.ss-figs{grid-template-columns:1fr!important;row-gap:40px!important}
.ssSpec{mix-blend-mode:normal;opacity:.6}
.ss-card-sm>div{padding:16px 18px!important;min-width:0!important}
.ss-card-sm>div>div:nth-child(3)>span:first-child{font-size:26px!important}}

/* ===== FLAGSHIP PASS ===== */
/* Act I — boot */
.ss-boot{position:fixed;inset:0;z-index:10000;background:var(--bone);display:flex;align-items:center;justify-content:center}
.boot-shield{stroke-dasharray:100;stroke-dashoffset:100;animation:bootDraw 600ms var(--ease-snap) forwards}
.boot-check{transform:scaleX(0);transform-origin:21px 33px;animation:bootCheck 180ms cubic-bezier(.34,1.56,.64,1) 620ms forwards;transform-box:view-box}
.boot-band{position:absolute;left:0;right:0;bottom:-14vh;height:14vh;background:var(--navy)}
.ss-boot.leave{animation:bootWipe 420ms var(--ease-snap) forwards}
@keyframes bootDraw{to{stroke-dashoffset:0}}
@keyframes bootCheck{to{transform:scaleX(1)}}
@keyframes bootWipe{to{transform:translateY(-114vh)}}
.hw,.w2{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity 300ms var(--ease-snap),transform 300ms var(--ease-snap)}
.hset .hw{opacity:1;transform:none}
.rv.in .w2{opacity:1;transform:none}
[data-screen-label="HERO"] .eb-dash{transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease-snap) 120ms}
[data-screen-label="HERO"].hset .eb-dash{transform:scaleX(1)}
/* Act II — texture */
.tex-b{position:relative}
.tex-b::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.025;pointer-events:none}
.tex-n{position:relative}
.tex-n::after{content:'';position:absolute;inset:0;background-image:radial-gradient(ellipse 90% 80% at 50% 45%,transparent 55%,rgba(7,18,88,.6) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.07;pointer-events:none}
.ss-sec.tex-b{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.tex-b .hair{box-shadow:0 1px 0 rgba(255,255,255,.6)}
.ss-shell button{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.ss-dc>div,.ss-dc .dc-body>div{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.ss-figs{font-feature-settings:"tnum" 1}
.fig-u{display:block;width:64px;height:1px;background:var(--navy);opacity:.4;transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease-snap) 900ms}
.fig-u.in{transform:scaleX(1)}
/* Act III — scroll */
#ssprog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;z-index:9998;pointer-events:none}
.wipe-n,.wipe-b{position:relative}
.wipe-n::before,.wipe-b::before{content:'';position:absolute;top:-62px;left:0;width:100%;height:63px;clip-path:polygon(0 100%,100% 0,100% 101%,0 101%);pointer-events:none;z-index:3}
.wipe-n::before{background:var(--navy-deep)}
.wipe-b::before{background:var(--bone)}
.strike{position:relative;display:inline-block}
.strike svg{position:absolute;left:-8px;top:-8px;width:calc(100% + 16px);height:calc(100% + 16px);overflow:visible;pointer-events:none;opacity:.85}
.strike .x1,.strike .x2{stroke:var(--fail);stroke-width:2.5;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.rv.in .strike .x1{animation:xDraw 200ms var(--ease-snap) var(--sd,520ms) forwards}
.rv.in .strike .x2{animation:xDraw 200ms var(--ease-snap) calc(var(--sd,520ms) + 90ms) forwards}
@keyframes xDraw{to{stroke-dashoffset:0}}
/* Act IV — reveal polish */
.cutflash{position:absolute;inset:0;background:var(--paper);pointer-events:none;animation:cfl 120ms linear forwards;z-index:4}
@keyframes cfl{0%{opacity:.85}100%{opacity:0}}
.dc-bar{display:block;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;animation:dcBar 80ms var(--ease-snap) forwards}
.dc-body{opacity:0;transform:translateY(6px);animation:dcBody 120ms var(--ease-snap) 80ms forwards}
@keyframes dcBar{to{transform:scaleX(1)}}
@keyframes dcBody{to{opacity:1;transform:none}}
@media (pointer:fine){.ss-dim main>header,.ss-dim main>section:not([data-screen-label="APPLICATION REVEAL"]){transform:scale(.96);opacity:.8;transition:transform 280ms var(--ease-snap),opacity 280ms var(--ease-snap)}}
/* Act V — details */
::selection{background:var(--navy);color:var(--bone)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bone)}
::-webkit-scrollbar-thumb{background:var(--navy);border-radius:0}
#ssnav{transition:box-shadow var(--dur-base) var(--ease-snap),background-color var(--dur-base) var(--ease-snap)}
#ssnav.tight{box-shadow:0 1px 0 var(--rule)}
#ssnav.tight nav{padding-top:12px!important;padding-bottom:12px!important}
@media (pointer:fine){#ssnav.tight{background:rgba(242,243,245,.9);backdrop-filter:blur(8px)}#ssnav.tight nav{background:transparent!important}}
@media (pointer:coarse){#ssnav.tight{background:var(--bone)}}
#ssnav nav a{position:relative}
#ssnav nav a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-snap)}
#ssnav nav a:hover::after{transform:scaleX(1)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{animation:fSnap 180ms var(--ease-snap)}
@keyframes fSnap{from{outline-offset:6px}to{outline-offset:2px}}
.ss-wm{position:absolute;right:-6%;bottom:-24%;width:38%;opacity:.06;pointer-events:none;user-select:none}
.print-cards{display:none}
@media print{
*,*::before,*::after{animation:none!important;transition:none!important;background-image:none!important}
.ss-cursor,#ssprog,.ss-boot,.cutflash,image-slot{display:none!important}
section,header,footer,.ss-shell,.ss-sec{background:#fff!important;box-shadow:none!important}
.inv,.inv *,.mic,.lbl{color:var(--ink)!important}
section[data-screen-label],header[data-screen-label]{height:auto!important;min-height:0!important}
section [style*="sticky"],header [style*="sticky"]{position:static!important;height:auto!important}
.seal-face{background:var(--navy)!important}.seal-face svg{display:none!important}
.rv,.hw,.w2{opacity:1!important;transform:none!important}
.print-cards{display:flex!important;flex-direction:column;gap:12px;padding:24px}
.d-xl,.d-l,.d-m,.d-s{color:var(--navy)!important}
}

/* How It Works step panel */
.tapeMarch{animation:tapeMarch 20s linear infinite;will-change:transform}
@keyframes tapeMarch{to{transform:translateX(-100px)}}
@media (prefers-reduced-motion:reduce),(max-width:900px){.tapeMarch{animation:none;will-change:auto}}
.hiwSettle{animation:hiwSettle 280ms var(--ease-snap);transform-box:view-box}
@keyframes hiwSettle{0%{transform:scale(.97)}70%{transform:scale(1.006)}100%{transform:scale(1)}}
.hiwSweep{animation:hiwSweep 400ms linear forwards;transform-box:view-box;opacity:0}
@keyframes hiwSweep{0%{transform:translateX(-160px);opacity:1}92%{opacity:1}100%{transform:translateX(540px);opacity:0}}
@media (prefers-reduced-motion:reduce){.hiwSettle,.hiwSweep{animation:none;opacity:0}}

.scrollArrow{animation:scrollArrow 1.4s var(--ease-snap) infinite}
@keyframes scrollArrow{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(9px)}}
@media (prefers-reduced-motion:reduce){.scrollArrow{animation:none}}

@media (max-width:900px){.cutflash{display:none}.ss-lite svg [filter]{filter:none}}
