@font-face{font-family:'switzer';font-weight:100 900;font-style:normal;font-display:swap;src:url('/fonts/switzer-v1/Switzer-Variable.woff2') format('woff2')}
@font-face{font-family:'switzer';font-weight:100 900;font-style:italic;font-display:swap;src:url('/fonts/switzer-v1/Switzer-VariableItalic.woff2') format('woff2')}
body{font-weight:400}
strong,b{font-weight:700}
:root{color-scheme:dark;--ink:#0E121B;--ink-2:#141A26;--raise:#19212F;--panel:#1A2233;--line:rgba(255,255,255,.085);--line-2:rgba(255,255,255,.14);--cream:#F5EFE2;--cream-2:#EFE7D5;--cream-ink:#1B212E;--cream-mut:#6A6A5E;--cream-line:rgba(27,33,46,.12);--cream-gold:#A87F2F;--cream-gold-ink:#8A6724;--gold:#C9A24B;--gold-br:#E4C570;--gold-soft:rgba(201,162,75,.13);--text:#EEF1F7;--mut:#98A1B2;--mut-2:#8A93A5;--rd:18px;--rd-sm:12px;--maxw:1160px;--disp:'switzer',system-ui,-apple-system,'Segoe UI',sans-serif;--body:'switzer',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'switzer',system-ui,-apple-system,'Segoe UI',sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
/* Animated scrolling is motion the visitor did not ask for, across the whole
   viewport, and a vestibular trigger. Every other reduced-motion block in
   these sheets switches its animation off; this declaration was the one that
   was missed. See FINDINGS.md item 4. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{overflow-x:clip}
body{background:radial-gradient(1100px 520px at 50% 0%, rgba(201,162,75,.17), transparent 66%), radial-gradient(900px 560px at 12% 26%, rgba(201,162,75,.08), transparent 60%), radial-gradient(1300px 780px at 50% 50%, rgba(201,162,75,.055), transparent 62%), var(--ink);background-repeat:no-repeat;color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{height:auto;width:auto;max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(40px,5.6vw,62px);margin-bottom:18px}
h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:14px}
h3{font-size:19px;margin-bottom:8px}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-br);display:block;margin-bottom:16px}
.lede{color:var(--mut);font-size:clamp(17px,2.2vw,20px);max-width:58ch;line-height:1.55}
.gold-grad{color:transparent;background:linear-gradient(94deg,var(--gold-br),#F6E2A0 52%,var(--gold));-webkit-background-clip:text;background-clip:text}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:13px 24px;transition:.3s ease;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(14,18,27,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.01em}
.brand img.wordmark{height:20.4px;width:auto;display:block}
.nav-links{display:flex;gap:34px;font-size:15px;font-weight:500}
.nav-links a{color:var(--mut);transition:.2s}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--gold-br)}
.nav-cta{display:flex;align-items:center;gap:20px}
.contact-link{color:var(--mut);font-size:15px;font-weight:500;transition:.2s}
.contact-link:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:15px;padding:11px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.22s ease;white-space:nowrap}
.btn-gold{background:var(--gold);color:#1a1505;position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-22deg);animation:shimmer 5s ease-in-out infinite}
.btn-gold:hover{background:var(--gold-br);transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(201,162,75,.55)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
@keyframes shimmer{0%,55%{translate:0 0} 100%{translate:445% 0}}
.menu-btn{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);align-items:center;justify-content:center;cursor:pointer;transition:.2s;padding:0}
.menu-btn:hover{background:rgba(255,255,255,.08)}
.menu-btn svg{width:20px;height:20px}
.mobile-panel{display:none;position:fixed;top:64px;left:14px;right:14px;z-index:49;background:rgba(20,26,38,.97);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:16px;padding:14px;flex-direction:column;gap:2px}
.mobile-panel.open{display:flex}
.mobile-panel a{padding:12px 14px;border-radius:10px;font-weight:500;color:var(--mut)}
.mobile-panel a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.mobile-panel a.active{color:var(--gold-br)}
.mobile-panel .btn{margin-top:8px;justify-content:center;color:#1a1505}
.hero{padding:148px 0 40px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.sg-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:30px;border:1px solid rgba(201,162,75,.35);background:var(--gold-soft);position:relative;overflow:hidden;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-br);margin-bottom:22px}
.sg-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-br);animation:dotpulse 2.4s infinite;flex:none}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 0 rgba(228,197,112,.5)} 55%{box-shadow:0 0 0 7px rgba(228,197,112,0)}}
.blur-in{opacity:0;filter:blur(8px);will-change:opacity,filter}
.rv.in .blur-in,.rv.in.blur-in{animation:blurIn .7s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes blurIn{to{opacity:1; filter:blur(0)}}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.trust-strip{display:flex;flex-wrap:wrap;gap:9px;margin-top:40px}
.tchip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;background:var(--gold-soft);border:1px solid rgba(201,162,75,.35);font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.005em;color:var(--gold-br);position:relative;overflow:hidden}
.tchip svg{width:15px;height:15px;color:var(--gold-br);flex:none}
.proof b{display:block;font-family:var(--disp);font-size:22px;font-weight:600;color:var(--text)}
.proof span{font-size:13px;color:var(--mut-2)}
.panel-stage{display:flex;justify-content:center;perspective:1200px}
.ic-panel{width:min(250px,64vw);aspect-ratio:150/480;border-radius:10px;position:relative;background:linear-gradient(115deg,#8d919a 0%,#b9bdc6 22%,#9aa0aa 44%,#c6cad2 66%,#8f939c 88%,#a7abb4 100%);box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.16) inset, 0 0 90px -20px rgba(201,162,75,.35);transform:rotateY(-9deg) rotateX(2deg);animation:panelfloat 7s ease-in-out infinite}
@keyframes panelfloat{0%,100%{transform:rotateY(-9deg) rotateX(2deg) translateY(0)} 50%{transform:rotateY(-9deg) rotateX(2deg) translateY(-10px)}}
.ic-panel::before{content:"";position:absolute;inset:0;border-radius:10px;background:repeating-linear-gradient(105deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);pointer-events:none}
.ic-sign{position:absolute;top:9%;left:14%;right:14%;text-align:left;font-family:var(--disp);font-weight:600;color:#fdf6e3;font-size:clamp(14px,2vw,17px);line-height:1.25;letter-spacing:.02em;text-shadow:0 0 10px rgba(253,240,200,.9),0 0 26px rgba(228,197,112,.55)}
.ic-sign small{display:block;margin-top:7px;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;color:#f2e6bf;text-shadow:0 0 8px rgba(228,197,112,.7)}
.ic-eink{position:absolute;top:47%;left:22%;right:22%;aspect-ratio:1;background:#e9e6dc;border-radius:4px;box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px}
.ic-eink .cap{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#3a3a33}
.ic-qr{width:58%;aspect-ratio:1;background:conic-gradient(#20242e 25%, transparent 0) 0 0/34% 34% no-repeat, conic-gradient(#20242e 25%, transparent 0) 100% 0/34% 34% no-repeat, conic-gradient(#20242e 25%, transparent 0) 0 100%/34% 34% no-repeat, repeating-linear-gradient(0deg,#20242e 0 6%,transparent 6% 12%), repeating-linear-gradient(90deg,#20242e 0 6%,#e9e6dc 6% 12%);animation:qrtick 4s steps(1) infinite}
@keyframes qrtick{0%,100%{filter:none} 50%{filter:invert(.06)}}
.ic-access{position:absolute;bottom:11%;left:26%;right:26%;aspect-ratio:1;background:linear-gradient(160deg,#14161c,#000);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center}
.ic-access span{font-family:var(--disp);font-weight:700;font-size:clamp(18px,2.4vw,24px);color:transparent;background:linear-gradient(120deg,var(--gold-br),#F6E2A0,var(--gold));-webkit-background-clip:text;background-clip:text}
.ic-foot{position:absolute;bottom:4.5%;left:0;right:0;text-align:center;font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#4b4f57}
.stage-cap{text-align:center;margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2)}
.statement{padding:96px 0;text-align:center;background:linear-gradient(180deg,transparent, rgba(0,0,0,.28) 18% 82%, transparent)}
.statement h2{font-size:clamp(26px,3.4vw,38px);max-width:20ch;margin:0 auto 18px}
.statement p{color:var(--mut);max-width:62ch;margin:0 auto;font-size:clamp(16px,2vw,18.5px);line-height:1.6}
.statement .no-list{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.no-list span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:8px 15px;border:1px solid var(--line-2);border-radius:30px;color:var(--mut)}
.cream-zone{background:radial-gradient(70% 52% at 82% 6%, rgba(201,162,75,.21) 0%, rgba(201,162,75,.07) 45%, transparent 72%), radial-gradient(60% 46% at 10% 96%, rgba(201,162,75,.155) 0%, transparent 70%), linear-gradient(180deg, rgba(214,176,94,.07) 0%, transparent 22%), var(--cream);color:var(--cream-ink);position:relative}
.cream-zone::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.stats-in-why{max-width:var(--maxw);margin:76px auto 0;padding:0 24px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-family:var(--disp);font-weight:700;font-size:clamp(40px,5.5vw,66px);color:var(--gold-br);line-height:1;letter-spacing:-.03em}
.stat .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:12px}
@media(max-width:900px){
.stats{grid-template-columns:1fr 1fr;gap:38px 24px}
}
.cream-zone .eyebrow{color:var(--cream-gold-ink)}
.cream-zone h2{color:var(--cream-ink)}
.cream-zone .sec-lede{color:var(--cream-mut);max-width:58ch;font-size:clamp(16px,2vw,18.5px)}
.sec{padding:96px 0}
.sec-head{margin-bottom:52px}
.gold-rule{width:76px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-br));border:none;margin:18px 0 0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:step}
.step{background:#fff;border:1px solid var(--cream-line);border-radius:var(--rd);padding:30px 26px;position:relative;transition:.25s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(27,33,46,.28)}
.step::before{counter-increment:step;content:"Step " counter(step);font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-gold-ink)}
.step h3{margin:12px 0 8px;color:var(--cream-ink)}
.step{padding-top:26px}
.step .glyph{position:absolute;top:21px;right:24px;width:34px;height:34px;margin-top:0;border-radius:10px}
.step .glyph svg{width:17px;height:17px}
.step-head{display:block;padding-right:58px}
.step-head h3{margin:10px 0 8px}
.step p{color:var(--cream-mut);font-size:15px;line-height:1.6}
.step .glyph{width:46px;height:46px;border-radius:12px;background:var(--cream);border:1px solid var(--cream-line);display:flex;align-items:center;justify-content:center;margin-top:20px;color:var(--cream-ink)}
.step .glyph svg{width:22px;height:22px}
.scan-strap{margin-top:30px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-mut);text-align:center}
.scan-strap b{color:var(--cream-gold-ink)}
.step-col{display:flex;flex-direction:column}
.step-col .step{flex:1}
.qrl-stage{--s:.9;display:flex;justify-content:center;margin:0 0 26px}
@media (max-width:1290px){
.qrl-stage{--s:.8}
}
@media (max-width:1150px){
.qrl-stage{--s:.7}
}
@media (max-width:1010px){
.qrl-stage{--s:.6}
}
@media (max-width:870px){
.qrl-stage{--s:.5}
}
@media (max-width:730px){
.steps{grid-template-columns:1fr}
.qrl-stage{--s:.85}
.qrl-ph{display:none}
.qrl-grant{display:flex}
.step-col{margin-bottom:6px}
}
.qrl{width:375px;height:812px;border-radius:52px;border:9px solid #17243a;overflow:hidden;position:relative;flex-shrink:0;box-shadow:0 40px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.03);background:#0c1219;font-family:'switzer','Helvetica Neue',sans-serif;zoom:var(--s)}
.qrl .nb{position:absolute;top:0;left:0;right:0;display:flex;justify-content:center;padding:13px 0 0;z-index:30}
.qrl .notch{width:116px;height:30px;background:#040709;border-radius:0 0 18px 18px;display:flex;align-items:center;justify-content:center;gap:8px}
.qrl .nc{width:10px;height:10px;border-radius:50%;background:#111b24;border:1px solid rgba(255,255,255,0.04)}
.qrl .ns{width:5px;height:5px;border-radius:50%;background:#19273a}
.qrl .st{position:absolute;top:43px;left:0;right:0;display:flex;justify-content:space-between;padding:7px 26px 8px;z-index:30}
.qrl .st span{color:rgba(255,255,255,0.72);font-size:12px;font-weight:600;letter-spacing:0.3px}
.qrl .vid-wrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.qrl .vid-wrap video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;filter:grayscale(1) brightness(0.80) contrast(1.10)}
.qrl .vid-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:#a87828;mix-blend-mode:color;opacity:0.72}
.qrl .vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(8,14,21,0.18) 0%,rgba(8,14,21,0.04) 20%,rgba(8,14,21,0.06) 45%,rgba(8,14,21,0.52) 66%,rgba(8,14,21,0.95) 84%,rgba(8,14,21,1.00) 100%)}
.qrl .hdr{position:absolute;top:78px;left:0;right:0;padding:0 26px;z-index:5}
.qrl .hdr-eyebrow{font-size:11px;font-weight:500;color:rgba(237,234,224,0.42);letter-spacing:0.05em;margin-bottom:4px}
.qrl .hdr-title{font-size:20px;font-weight:700;color:#edeae0;line-height:1.22;letter-spacing:-0.02em}
.qrl .actions{position:absolute;bottom:0;left:0;right:0;padding:0 20px 64px;z-index:5;display:flex;flex-direction:column;gap:9px}
.qrl .btn-qgold{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;background:#c9a84c;border-radius:14px;cursor:pointer}
.qrl .btn-qgold .lbl{font-size:12px;font-weight:700;letter-spacing:0.09em;color:#0c1219;text-transform:uppercase}
.qrl .btn-ghost{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);border-radius:14px;cursor:pointer}
.qrl .btn-ghost .lbl{font-size:11px;font-weight:600;letter-spacing:0.09em;color:rgba(237,234,224,0.42);text-transform:uppercase}
.qrl .terms{font-size:9px;color:rgba(237,234,224,0.20);text-align:center;line-height:1.55;padding:0 10px}
.qrl .terms a{color:rgba(255,255,255,0.25)}
.qrl .logo-footer{position:absolute;bottom:10px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:6;pointer-events:none}
.qrl .logo-footer img{width:auto;height:44px;opacity:0.30}
.qrl.qrl-grant{display:flex;flex-direction:column;background:#0c1219}
.qrl-grant .qg-bar{z-index:10}
.qrl-grant .qg-body{background:transparent;z-index:5}
.qrl-grant .nb,.qrl-grant .st{z-index:30}
.qg-bar{flex-shrink:0;height:38px;display:flex;align-items:center;justify-content:center;gap:6px;border-bottom:0.5px solid rgba(255,255,255,0.05);background:rgba(0,0,0,0.15);position:relative;z-index:10;margin-top:62px}
.qg-bar .bar-lock{opacity:0.28}
.qg-bar .bar-url{font-size:11px;color:rgba(255,255,255,0.28);letter-spacing:0.03em;font-weight:500}
.qg-body{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.qg-hdr{padding:100px 26px 0;position:relative;z-index:2;flex-shrink:0}
.qg-hdr .hdr-eyebrow{font-size:11px;font-weight:500;color:rgba(237,234,224,0.45);letter-spacing:0.04em;margin-bottom:3px}
.qg-hdr .hdr-title{font-size:17px;font-weight:700;color:#edeae0;line-height:1.25;letter-spacing:-0.018em}
@keyframes grantCardIn{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
@keyframes grantCircleIn{0%{opacity:0;transform:scale(0);}60%{transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}
@keyframes grantRipple{0%{box-shadow:0 0 0 0 rgba(57,179,116,0.55);}70%{box-shadow:0 0 0 16px rgba(57,179,116,0);}100%{box-shadow:0 0 0 0 rgba(57,179,116,0);}}
@keyframes grantFadeUp{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:translateY(0);}}
@keyframes drainDown{0%{width:100%;}100%{width:0%;}}
@keyframes grantGlow{0%,100%{border-color:rgba(57,179,116,0.12);}50%{border-color:rgba(57,179,116,0.35);}}
.grant-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.grant-card{background:#131d2a;border:0.5px solid rgba(57,179,116,0.12);border-radius:22px;padding:32px 24px;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;animation:grantCardIn 0.45s cubic-bezier(0.22,0.61,0.36,1) 0.05s forwards,grantGlow 2.8s ease-in-out 1.8s infinite}
.grant-icon-wrap{width:60px;height:60px;border-radius:50%;background:rgba(57,179,116,0.14);border:0.5px solid rgba(57,179,116,0.32);display:flex;align-items:center;justify-content:center;opacity:0;animation:grantCircleIn 0.42s cubic-bezier(0.34,1.56,0.64,1) 0.38s forwards,grantRipple 0.8s ease-out 0.80s forwards}
.grant-title{font-size:11px;font-weight:700;letter-spacing:0.15em;color:#edeae0;text-transform:uppercase;opacity:0;animation:grantFadeUp 0.35s ease-out 1.1s forwards}
.grant-sub{font-size:10px;color:rgba(237,234,224,0.45);text-align:center;line-height:1.6;opacity:0;animation:grantFadeUp 0.35s ease-out 1.22s forwards}
.drain-track{width:100%;height:2.5px;background:rgba(255,255,255,0.07);border-radius:2px;overflow:hidden}
.drain-fill{height:100%;background:#39b374;border-radius:2px;animation:drainDown 5s linear 1.5s forwards;width:100%}
.drain-lbl{font-size:9px;color:rgba(237,234,224,0.22);letter-spacing:0.04em;opacity:0;animation:grantFadeUp 0.35s ease-out 1.38s forwards}
.qg-logo{position:absolute;bottom:16px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}
.qrl.qrl-call{display:flex;flex-direction:column;background:#131d2a}
.qrl-call .nb,.qrl-call .st{z-index:15}
.qrl-call .st span{color:rgba(255,255,255,0.9)}
.qrl-call .vid-screen{position:relative;flex:1;overflow:hidden;margin-top:62px}
.qrl-call .vid-bg{pointer-events:none;position:absolute;inset:0;background:#131d2a}
.qrl-call .vid-photo{position:absolute;top:78px;bottom:122px;left:0;right:0;width:100%;height:auto;max-height:calc(100% - 200px);object-fit:cover;object-position:50% 20%;background:#131d2a;z-index:1}
.qrl-call .vid-grad-top{position:absolute;top:0;left:0;right:0;height:180px;background:linear-gradient(180deg,rgba(19,29,42,0.75) 0%,rgba(19,29,42,0.3) 55%,transparent 100%);z-index:2;pointer-events:none}
.qrl-call .vid-grad-bot{position:absolute;bottom:0;left:0;right:0;height:260px;background:linear-gradient(0deg,rgba(19,29,42,0.92) 0%,rgba(19,29,42,0.68) 38%,rgba(19,29,42,0.18) 72%,transparent 100%);z-index:2;pointer-events:none}
.qrl-call .vid-top{position:absolute;top:0;left:0;right:0;padding:10px 20px 0;display:flex;justify-content:space-between;align-items:flex-start;z-index:10}
.qrl-call .vid-clock{font-size:12px;font-weight:700;color:#c9a84c;letter-spacing:0.4px;margin-bottom:2px}
.qrl-call .vid-device{font-size:16px;font-weight:700;color:#fff;letter-spacing:-0.3px;line-height:1.2;margin-bottom:2px}
.qrl-call .vid-estate{font-size:11px;color:rgba(255,255,255,0.38);font-weight:400}
.qrl-call .live-badge{display:flex;align-items:center;gap:5px;background:#C34343;border-radius:22px;padding:5px 10px;flex-shrink:0;margin-top:2px}
.qrl-call .live-dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:qvBlink 1.5s ease-in-out infinite}
@keyframes qvBlink{0%,100%{opacity:0.42;}50%{opacity:1;}}
.qrl-call .live-txt{font-size:9px;font-weight:700;color:#fff;letter-spacing:0.5px}
.qrl-call .vid-bot{position:absolute;bottom:0;left:0;right:0;padding:0 20px 36px;z-index:10}
.qrl-call .ctrl-wrap{display:flex;flex-direction:column;align-items:center;gap:0}
.qrl-call .hangup{width:52px;height:52px;border-radius:50%;background:#C34343;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 18px rgba(224,85,85,0.38);cursor:pointer}
.qrl-call .connect-spinner{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0}
.qrl-call .connect-spinner .cs-ring{width:58px;height:58px;border-radius:50%;border:2px solid rgba(201,168,76,0.16);border-top-color:#c9a84c}
@keyframes qvSpin{to{transform:rotate(360deg);}}
@media screen{
@keyframes qvSpinnerOut{0%{opacity:0;transform:scale(0.72);}14%{opacity:1;transform:scale(1);}72%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.22);}}
@keyframes qvContentIn{0%{opacity:0;transform:scale(0.97);}100%{opacity:1;transform:scale(1);}}
.js .qrl-call .anim-connect .anim-content{opacity:0}
.qrl-call .anim-connect.play .connect-spinner{animation:qvSpinnerOut 0.96s cubic-bezier(0.4,0,0.3,1) forwards}
.qrl-call .anim-connect.play .connect-spinner .cs-ring{animation:qvSpin 0.9s linear infinite}
.qrl-call .anim-connect.play .anim-content{animation:qvContentIn 0.6s cubic-bezier(0.22,0.61,0.36,1) 0.57s both}
}
.qrl-ph{display:flex;align-items:center;justify-content:center}
.ph-note{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,234,224,.34);text-align:center;line-height:2}
.ph-note span{font-size:10px;color:rgba(237,234,224,.18)}
.why{padding:100px 0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{background:linear-gradient(180deg,#1b2436,#141b29);border:1px solid var(--line);border-radius:var(--rd);padding:28px 26px;transition:.25s var(--ease)}
.why-card:hover{transform:translateY(-4px);border-color:rgba(201,162,75,.4);box-shadow:0 22px 50px -26px rgba(0,0,0,.7)}
.why-card .icon{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);border:1px solid rgba(201,162,75,.3);color:var(--gold-br);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.why-card .icon svg{width:22px;height:22px}
.why-card h3{color:var(--text)}
.why-card p{color:var(--mut);font-size:14.5px;line-height:1.6}
.why-card p+p{margin-top:8px}
.specs-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.spec-table{width:100%;border-collapse:collapse}
.spec-table tr{border-bottom:1px solid var(--cream-line)}
.spec-table tr:last-child{border-bottom:none}
.spec-table th{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--cream-ink);text-align:left;padding:13px 18px 13px 0;vertical-align:top;white-space:nowrap;width:132px}
.spec-table td{font-size:14.5px;color:var(--cream-mut);padding:13px 0;line-height:1.55}
.spec-table td b{color:var(--cream-ink);font-weight:600}
.mini-stage{position:sticky;top:110px}
.hero-product{display:block;width:100%;max-width:357px;transform:none!important;margin:0 auto;height:auto;filter:drop-shadow(0 46px 70px rgba(0,0,0,.55))}
.dims-img{display:block;width:100%;max-width:284px;margin:0 auto;height:auto}
.faq-sec{background:var(--ink)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq-head h2{font-size:clamp(34px,4.4vw,52px);line-height:1.04;margin:18px 0 0}
.faq-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);opacity:0;transform:translateY(12px);transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1)}
.faq-list.in .faq-item{opacity:1;transform:none}
.faq-list.in .faq-item:nth-child(1){transition-delay:.04s}
.faq-list.in .faq-item:nth-child(2){transition-delay:.09s}
.faq-list.in .faq-item:nth-child(3){transition-delay:.14s}
.faq-list.in .faq-item:nth-child(4){transition-delay:.19s}
.faq-list.in .faq-item:nth-child(5){transition-delay:.24s}
.faq-list.in .faq-item:nth-child(6){transition-delay:.29s}
.faq-list.in .faq-item:nth-child(7){transition-delay:.34s}
.faq-list.in .faq-item:nth-child(8){transition-delay:.39s}
.faq-list.in .faq-item:nth-child(9){transition-delay:.44s}
.faq-list.in .faq-item:nth-child(10){transition-delay:.49s}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 4px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text);transition:color .25s}
.faq-q:hover{color:#fff}
.faq-item.open .faq-q{color:var(--gold-br)}
.faq-q svg{width:18px;height:18px;flex:none;color:var(--mut);transition:transform .38s cubic-bezier(.4,0,.2,1), color .3s}
.faq-item.open .faq-q svg{transform:rotate(180deg);color:var(--gold-br)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 4px 22px;color:var(--mut);font-size:14.5px;line-height:1.62;max-width:60ch;opacity:0;transition:opacity .3s ease}
.faq-item.open .faq-a p{opacity:1;transition:opacity .45s ease .12s}
.faq-foot{text-align:center;margin-top:52px}
.faq-foot p{color:var(--mut);font-size:15px;margin-bottom:18px}
@media(max-width:880px){
.faq-grid{grid-template-columns:1fr;gap:26px}
}
.proc-sec{background:var(--ink);text-align:center}
.tl-lead{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:36px}
.tl-steps{display:flex;gap:0}
.tl-step{flex:1;position:relative;padding:0 18px}
.tl-step::before{content:"";position:absolute;top:7px;left:50%;width:100%;height:2px;background:linear-gradient(90deg,var(--gold-br),rgba(201,162,75,.12));z-index:0}
.tl-step:last-child::before{display:none}
.tl-node{position:relative;z-index:1;width:16px;height:16px;margin:0 auto 22px;border-radius:50%;background:var(--gold-br);box-shadow:0 0 0 6px rgba(201,162,75,.12)}
.tl-node::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold-br);animation:tlPing 1.9s cubic-bezier(0,0,.2,1) infinite}
.tl-step:nth-child(2) .tl-node::after{animation-delay:.55s}
.tl-step:nth-child(3) .tl-node::after{animation-delay:1.1s}
.tl-step:nth-child(4) .tl-node::after{animation-delay:1.65s}
.tl-step:first-child .tl-node{background:#34D399;box-shadow:0 0 0 6px rgba(52,211,153,.15)}
.tl-step:first-child .tl-node::after{background:#34D399}
.tl-step h4{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:7px;color:var(--text)}
.tl-step p{font-size:14px;color:var(--mut);line-height:1.5;max-width:230px;margin:0 auto}
@keyframes tlPing{0%{transform:scale(1); opacity:.6} 70%,100%{transform:scale(2.6); opacity:0}}
@media(max-width:680px){
.tl-steps{flex-direction:column;max-width:420px;margin:0 auto}
.tl-step{flex:none;display:flex;gap:18px;text-align:left;padding:0 0 30px}
.tl-step::before{top:7px;left:7px;width:2px;height:100%;background:linear-gradient(180deg,var(--gold-br),rgba(201,162,75,.12))}
.tl-node{margin:0}
.tl-step p{margin:0}
}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:64px;text-align:left}
.vs-col{border-radius:var(--rd);padding:34px 32px;border:1px solid var(--line-2);background:rgba(20,26,38,.5)}
.vs-col.gold{border-color:rgba(201,162,75,.4);background:linear-gradient(180deg, rgba(201,162,75,.10), rgba(201,162,75,.03)), rgba(20,26,38,.5)}
.vs-col h3{font-size:17px;margin-bottom:22px;color:var(--mut)}
.vs-col.gold h3{color:var(--gold-br)}
.vs-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.vs-col li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--mut)}
.vs-col.gold li{color:var(--text)}
.vs-col li svg{width:15px;height:15px;flex:none;margin-top:3px}
.vs-col li .x{color:#7b8494}
.vs-col li .c{color:var(--gold-br)}
@media(max-width:820px){
.vs-grid{grid-template-columns:1fr}
}
.plan-note{text-align:center;font-size:15px;color:var(--mut);margin-top:44px}
.plan-note b{color:var(--text);font-weight:600}
.hw-showcase{background:var(--ink)}
.hw-showcase .sec{padding-bottom:44px}
.pb-stage{position:relative;max-width:460px;margin:0 auto}
.pb-stage img{width:100%;height:auto;display:block;filter:drop-shadow(0 34px 60px rgba(0,0,0,.5))}
.pb-tag{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(20,26,38,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line-2);box-shadow:0 20px 46px -20px rgba(0,0,0,.7);white-space:nowrap;text-align:left}
.pb-tag b{font-family:var(--disp);font-weight:600;font-size:12.5px;display:block;line-height:1.25;color:var(--text)}
.pb-tag span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mut)}
.pb-tag::after{content:"";position:absolute;top:50%;width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.pb-tag.tag-l{right:calc(100% + 40px)}
.pb-tag.tag-l::after{left:100%;background:linear-gradient(90deg,var(--gold),transparent)}
.pb-tag.tag-r{left:calc(100% + 40px)}
.pb-tag.tag-r::after{right:100%;background:linear-gradient(270deg,var(--gold),transparent)}
.pbt-1{top:13%}
.pbt-2{top:47%}
.pbt-3{top:70%}
.pbt-4{top:9%}
.pbt-5{top:56%}
@media (max-width:1060px){
.pb-tag{position:static;white-space:normal}
.pb-tag::after{display:none}
.pb-stage{display:flex;flex-direction:column;align-items:center}
.pb-stage img{order:-1;margin-bottom:22px}
.pb-tags-note{display:none}
.pb-tag{margin:4px 0;width:min(320px,100%)}
}
.panel-pair{margin:6px auto 8px;max-width:440px;text-align:center}
.panel-pair img{width:100%;height:auto;filter:drop-shadow(0 34px 60px rgba(0,0,0,.5))}
.panel-pair figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:18px}
.mini-stage .ic-panel{margin:0 auto;animation:none;transform:rotateY(-7deg)}
.dim-cap{display:flex;justify-content:center;gap:26px;margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--cream-mut)}
.cert-strip{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.cert-strip span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:8px 14px;border:1px solid var(--cream-line);border-radius:30px;background:#fff;color:var(--cream-ink)}
.tier{padding:100px 0}
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.tcol{border-radius:24px;padding:34px 30px;display:flex;flex-direction:column}
.tcol-free{background:var(--cream);color:var(--cream-ink)}
.tcol-cloud{background:linear-gradient(180deg,#1b2436,#141b29);border:1px solid rgba(201,162,75,.4);position:relative;box-shadow:0 30px 70px -34px rgba(201,162,75,.35)}
.tcol .tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:6px 13px 6px 10px;border-radius:30px;border:1px solid;align-self:flex-start}
.tcol .tag::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.tcol-free .tag{color:#7e6c39;background:rgba(154,138,85,.13);border-color:rgba(154,138,85,.30)}
.tcol-free .tag::before{background:#9a8a55}
.tcol-cloud .tag{color:var(--gold-br);background:var(--gold-soft);border-color:rgba(201,162,75,.40)}
.tcol-cloud .tag::before{background:var(--gold-br);animation:dotpulse 2.4s infinite}
.tcol h3{font-size:28px;font-weight:700;line-height:1.12;letter-spacing:-.022em;margin:16px 0 9px}
.tcol-free h3{color:var(--cream-ink)}
.tcol-cloud h3{color:transparent;background:linear-gradient(94deg,var(--gold-br),#F6E2A0 52%,var(--gold));-webkit-background-clip:text;background-clip:text}
.tcol .sub{font-size:14.5px;margin-bottom:8px}
.tcol-free .sub{color:var(--cream-mut)}
.tcol-cloud .sub{color:var(--mut)}
.tcol .rule{height:1px;margin:22px 0 8px}
.tcol-free .rule{background:rgba(0,0,0,.1)}
.tcol-cloud .rule{background:var(--line)}
.trow{display:flex;gap:14px;padding:12px 2px;align-items:flex-start}
.trow .tic{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
.tcol-free .tic{background:rgba(27,33,46,.07);color:#2a3142}
.tcol-cloud .tic{background:var(--gold-soft);color:var(--gold-br)}
.trow .tic svg{width:19px;height:19px}
.trow b{font-family:var(--disp);font-weight:600;font-size:15px;display:block;margin-bottom:2px}
.trow p{font-size:13.5px;line-height:1.5}
.tcol-free .trow p{color:var(--cream-mut)}
.tcol-cloud .trow p{color:var(--mut)}
.tier-plus{display:flex;align-items:center;justify-content:center;margin:0;position:relative;z-index:2}
.plus-badge{width:52px;height:52px;border-radius:50%;background:var(--gold);color:#1a1505;font-family:var(--disp);font-weight:700;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -8px rgba(201,162,75,.6);margin:-14px auto}
.tier-note{margin-top:36px;text-align:center}
.tier-note h3{font-size:clamp(19px,2.4vw,23px);margin-bottom:8px}
.tier-note p{color:var(--mut);font-size:15.5px;max-width:56ch;margin:0 auto}
@media(max-width:820px){
.tier-grid{grid-template-columns:1fr}
}
.cta-band{padding:64px 0 110px;text-align:center;background:radial-gradient(900px 480px at 50% 100%, rgba(201,162,75,.16), transparent 62%)}
.cta-band h2{max-width:22ch;margin:0 auto 16px}
.cta-band p{color:var(--mut);max-width:56ch;margin:0 auto 34px}
.cta-band .hero-ctas{justify-content:center;margin-top:0}
footer{padding:54px 0 30px;background:radial-gradient(900px 520px at 50% 0%, rgba(201,162,75,.10), transparent 62%), radial-gradient(900px 500px at 50% 110%, rgba(201,162,75,.10), transparent 62%), var(--ink-2)}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
.foot-brand{max-width:340px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand .brand img.wordmark{height:24px}
.foot-brand p{color:var(--mut);font-size:13.5px;line-height:1.5;margin:0}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
/* h2, not h4 (FINDINGS.md item 2). The report suggested h4, but the heading
   immediately before the footer is h1 on 404 and h2 on nine other pages, so
   h4 still skipped a level on eleven of twelve. Going shallower never skips,
   so h2 is valid everywhere. font-weight and line-height are pinned because
   these sheets carry a bare h2{font-weight:600;line-height:1.05} that h4 was
   never subject to; inherit keeps the body ratio, which differs per sheet. */
.foot-col h2{font-family:var(--mono);font-size:11px;font-weight:700;line-height:inherit;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.foot-col a{display:block;color:var(--mut);font-size:14.5px;padding:5px 0;transition:.2s}
.foot-col a:hover{color:var(--gold-br)}
.foot-bot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;font-size:13px;color:var(--mut)}
.fb-left{display:flex;gap:8px 20px;flex-wrap:wrap}
.fb-links a{margin-right:16px;transition:.2s}
.fb-links a:hover{color:var(--gold-br)}
.foot-note{font-size:12px;color:var(--mut);margin-top:16px;font-style:italic}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.steps .step:nth-child(2),.why-grid .why-card:nth-child(2),.why-grid .why-card:nth-child(5){transition-delay:.12s}
.steps .step:nth-child(3),.why-grid .why-card:nth-child(3),.why-grid .why-card:nth-child(6){transition-delay:.24s}
.tier-grid .tcol-cloud{transition-delay:.14s}
.sbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;background:linear-gradient(90deg,var(--gold),var(--gold-br));box-shadow:0 0 12px rgba(228,197,112,.55)}
.marquee-sec{padding:30px 0;background:var(--ink-2)}
.marquee-sec .lbl{text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);margin-bottom:18px}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:14px;padding-right:14px;animation:marqueeSlide 32s linear infinite;flex:none}
.marquee:hover .track{animation-play-state:paused}
@keyframes marqueeSlide{to{transform:translateX(-50%)}}
.chip{display:flex;align-items:center;gap:9px;padding:10px 18px;border-radius:30px;white-space:nowrap;border:1px solid var(--line);background:rgba(255,255,255,.025);font-family:var(--disp);font-weight:500;font-size:14.5px;color:var(--mut)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.7}
.panel-stage{position:relative}
.ic-panel{transition:transform .25s ease-out;will-change:transform}
.float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:rgba(20,26,38,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line-2);box-shadow:0 20px 46px -20px rgba(0,0,0,.7);font-size:13px;color:var(--text);animation:cardfloat 6s ease-in-out infinite;will-change:transform}
.float-card .fci{width:32px;height:32px;border-radius:9px;background:var(--gold-soft);border:1px solid rgba(201,162,75,.3);color:var(--gold-br);display:flex;align-items:center;justify-content:center;flex:none}
.float-card .fci svg{width:16px;height:16px}
.float-card b{font-family:var(--disp);font-weight:600;font-size:13.5px;display:block;line-height:1.25}
.float-card span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mut)}
.fc-1{top:9%;left:-6%;animation-delay:.4s}
.fc-2{top:44%;right:-9%;animation-delay:1.6s}
.fc-3{bottom:7%;left:-2%;animation-delay:2.8s}
@keyframes cardfloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.fc-live{width:7px;height:7px;border-radius:50%;background:#5fd08a;flex:none;animation:dotpulse 2s infinite}
.qr-count{font-variant-numeric:tabular-nums}
.proof b{font-variant-numeric:tabular-nums}
.cream-zone::before{transform:scaleX(0);transition:transform 1.2s var(--ease)}
.cream-zone.in::before{transform:scaleX(1)}
@media(max-width:960px){
.fc-1{left:0}
.fc-2{right:0}
.fc-3{left:4%}
}
@media(max-width:640px){
.float-card{padding:9px 12px}
.float-card b{font-size:12px}
.fc-2{display:none}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-br);outline-offset:3px;border-radius:6px}
@media(max-width:960px){
.hero-grid{grid-template-columns:1fr;gap:48px}
.panel-stage{order:2}
.why-grid{grid-template-columns:1fr 1fr}
.specs-grid{grid-template-columns:1fr;gap:44px}
.mini-stage{position:static}
}
@media(max-width:820px){
.nav-links,.nav-cta{display:none}
.menu-btn{display:flex}
}
@media(max-width:640px){
.wrap{padding:0 18px}
.hero{padding-top:128px}
h1{font-size:clamp(36px,10vw,52px)}
.why-grid{grid-template-columns:1fr}
.sec,.why{padding:76px 0}
.ab-hero{padding-top:128px}
.manif{padding:72px 0}
.foot-bot{flex-direction:column;align-items:flex-start;gap:12px}
}
.arc-hero{padding:150px 0 72px;background:radial-gradient(1000px 520px at 78% -10%, rgba(201,162,75,.14), transparent 62%)}
.arc-hero h1{font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-.03em;margin:18px 0 20px}
.arc-hero .lede{max-width:640px}
.arc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.arc-index{display:flex;gap:9px;flex-wrap:wrap;margin-top:38px}
.arc-index a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;text-decoration:none;transition:.25s}
.arc-index a:hover{color:var(--gold-br);border-color:rgba(201,162,75,.5)}
.prod{border-top:none}
.prod:nth-child(even){background:var(--ink-2)}
.prod-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.prod h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em;margin:14px 0 8px}
.prod-tag{font-size:17px;color:var(--gold-br);margin-bottom:16px}
.prod-desc{color:var(--mut);font-size:15.5px;line-height:1.7;max-width:56ch}
.prod-feats{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.prod-feats li{position:relative;padding-left:22px;font-size:14px;line-height:1.55;color:var(--mut)}
.prod-feats li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:3px;background:var(--gold-soft);border:1px solid rgba(201,162,75,.45)}
.prod-specs{width:100%;border-collapse:collapse;background:rgba(20,26,38,.55);border:1px solid var(--line-2);border-radius:var(--rd);overflow:hidden}
.prod-specs td{padding:13px 18px;font-size:13.5px;border-bottom:1px solid var(--line)}
.prod-specs tr:last-child td{border-bottom:0}
.prod-specs td:first-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-2);width:44%}
.prod-specs td:last-child{color:var(--text)}
.arc-cta{padding:96px 0;text-align:center}
.arc-cta h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.02em;margin-bottom:14px}
.arc-cta p{color:var(--mut);max-width:56ch;margin:0 auto 28px}
@media(max-width:900px){
.prod-grid{grid-template-columns:1fr;gap:30px}
.prod-feats{grid-template-columns:1fr}
}
.hero-glow{position:absolute;top:-16%;left:44%;transform:translateX(-50%);width:1120px;height:720px;pointer-events:none;z-index:0;background:radial-gradient(ellipse at center, rgba(201,162,75,.22), transparent 64%);filter:blur(22px);animation:aurora 16s ease-in-out infinite alternate}
.hero-glow.two{top:2%;left:76%;width:560px;height:520px;background:radial-gradient(ellipse at center, rgba(120,150,210,.10), transparent 62%);animation:aurora2 19s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translateX(-50%) translateY(0) scale(1)}100%{transform:translateX(-46%) translateY(26px) scale(1.06)}}
@keyframes aurora2{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-22px) scale(1.08)}}
.ab-hero{position:relative;overflow:hidden}
.ab-hero .wrap{position:relative;z-index:1}
.manif .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.manif-img img{width:100%;max-width:432px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 34px 60px rgba(0,0,0,.55))}
.manif-img figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:center;margin-top:18px}
.tl-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:48px;align-items:start}
.tl-photo{position:sticky;top:max(96px,calc(50vh - 330px));margin-top:48px}
.tl-photo img{width:100%;max-width:280px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 40px 70px rgba(0,0,0,.55))}
.tl-photo figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:center;margin-top:18px}
@media(max-width:940px){
.manif .wrap{grid-template-columns:1fr;gap:40px}
.manif-img img{max-width:274px}
.tl-grid{grid-template-columns:1fr;gap:44px}
.tl-photo{position:static;order:-1;margin-top:36px}
.tl-photo img{max-width:175px}
}
.ab-sec{position:relative;overflow:hidden;overflow:clip}
.ab-sec>.wrap{position:relative;z-index:1}
.manif{position:relative;overflow:hidden}
.manif>.wrap{position:relative;z-index:1}
.gold-band{position:relative}
.gold-band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(1000px 560px at 78% 0%, rgba(201,162,75,.14), transparent 62%), radial-gradient(720px 480px at 12% 15%, rgba(201,162,75,.11), transparent 68%), radial-gradient(760px 560px at 90% 30%, rgba(201,162,75,.09), transparent 66%), radial-gradient(720px 560px at 8% 46%, rgba(201,162,75,.08), transparent 66%), radial-gradient(700px 540px at 94% 60%, rgba(201,162,75,.08), transparent 66%), radial-gradient(680px 520px at 10% 74%, rgba(201,162,75,.08), transparent 66%), radial-gradient(700px 520px at 90% 87%, rgba(201,162,75,.08), transparent 66%), radial-gradient(900px 520px at 50% 100%, rgba(201,162,75,.15), transparent 62%)}
.gold-band>section,.gold-band>header{position:relative;z-index:1}
.ab-layers{position:relative}
.ab-sec-beliefs{background:rgba(20,26,38,.55)}
.ab-hero{padding:160px 0 90px}
.ab-hero h1{font-size:clamp(42px,6vw,76px);line-height:1.02;letter-spacing:-.032em;margin:20px 0 24px;max-width:900px}
.ab-hero h1 em{font-style:normal;color:transparent;background:linear-gradient(94deg,var(--gold-br),#F6E2A0 52%,var(--gold));-webkit-background-clip:text;background-clip:text}
.ab-hero .lede{max-width:640px}
.serve{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.serve span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line-2);border-radius:999px;padding:9px 15px}
.manif{padding:110px 0}
.manif p{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.6vw,44px);line-height:1.28;letter-spacing:-.02em;color:var(--text);max-width:980px}
.manif p b{color:var(--gold-br);font-weight:600}
.manif .sig{margin-top:30px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.tlv{position:relative;margin-top:48px;padding-left:42px}
.tlv::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg, var(--gold-br), rgba(201,162,75,.08))}
.tlv-item{position:relative;padding:0 0 36px}
.tlv-item:last-child{padding-bottom:0}
.tlv-item::before{content:"";position:absolute;left:-42px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--gold-br);box-shadow:0 0 0 6px rgba(201,162,75,.12)}
.tlv-item:last-child::before{background:#34D399;box-shadow:0 0 0 6px rgba(52,211,153,.15)}
.tlv-item .yr{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}
.tlv-item h3{font-size:clamp(19px,2.2vw,24px);letter-spacing:-.015em;color:var(--text);margin:8px 0 8px}
.tlv-item p{color:var(--mut);font-size:15px;line-height:1.6;max-width:60ch}
.tlv-item p b{color:var(--text);font-weight:600}
.beliefs{margin-top:60px}
.belief{display:grid;grid-template-columns:110px 1fr 1.4fr;gap:36px;padding:44px 0;border-bottom:1px solid var(--line);align-items:start}
.belief .no{font-family:var(--disp);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.01em;background:linear-gradient(100deg,#8F6A24 38%,#F6E2A0 50%,#8F6A24 62%);background-size:300% 100%;background-position:-100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.belief h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.015em;color:var(--text)}
.belief p{color:var(--mut);font-size:15px;line-height:1.72}
.belief p b{color:var(--text);font-weight:600}
.ab-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;margin:150px 0 72px}
.ab-stats .num{font-family:var(--disp);font-weight:700;font-size:clamp(38px,5vw,60px);color:var(--gold-br);line-height:1;letter-spacing:-.03em}
.ab-stats .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:12px}
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;counter-reset:wk}
.wk{border:1px solid var(--line);border-radius:var(--rd);padding:30px 26px;background:rgba(20,26,38,.5);counter-increment:wk}
.wk::before{content:"0" counter(wk);font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--gold)}
.wk h3{font-size:17px;margin:12px 0 8px;color:var(--text)}
.wk p{color:var(--mut);font-size:14.5px;line-height:1.6}
.ab-sec{border-top:0}
.ab-h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.022em;margin-top:14px}
@media(max-width:900px){
.belief{grid-template-columns:1fr;gap:10px;padding:34px 0}
.work{grid-template-columns:1fr}
.ab-stats{grid-template-columns:1fr 1fr;gap:36px 20px}
}
.wrap.sec{padding-left:24px;padding-right:24px}
@media(max-width:640px){
.wrap.sec{padding-left:18px;padding-right:18px}
}
#nav .nav-links{font-size:16.5px;font-weight:400}
#nav .nav-links a{font-size:16.5px;font-weight:400;position:relative}
#nav .nav-cta .contact-link,#nav .contact-link{font-size:16.5px;font-weight:400}
#nav .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--gold-br);transform:scaleX(0);transform-origin:50% 50%;opacity:0;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s}
#nav .nav-links a:hover::after{transform:scaleX(.55);opacity:.45}
#nav .nav-links a.active::after{transform:scaleX(1);opacity:1;box-shadow:0 0 9px rgba(228,197,112,.55)}
@media(min-width:821px){
#nav .nav-links{position:absolute;left:50%;transform:translateX(-50%)}
}
#nav .nav-links a::after{background:linear-gradient(94deg,var(--gold-br),#F6E2A0);transform-origin:0 50%;transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .3s}
#nav .nav-links a:hover::after{transform:scaleX(1);opacity:.85}
#nav .btn-gold{padding:10px 18px;border-radius:10px;font-size:14px}
#nav .btn-gold,#nav .nav-sales-m{background:rgba(201,162,75,.18);color:var(--gold-br);border:1px solid transparent;box-shadow:none;font-weight:500}
#nav .btn-gold:hover,#nav .nav-sales-m:hover{background:var(--gold);color:#1a1505;border-color:transparent}
#nav.nav{transition:background .3s ease, border-color .3s ease, padding .3s ease, box-shadow .3s ease}
#nav.scrolled{background:rgba(14,18,27,.7);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.09);padding-top:10px;padding-bottom:10px}
.mobile-panel{top:70px;left:12px;right:12px;background:rgba(15,20,30,.9);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:6px 22px;gap:0;box-shadow:0 32px 64px -24px rgba(0,0,0,.65)}
.mobile-panel.open{animation:mpIn .3s cubic-bezier(.22,.61,.36,1) both}
@keyframes mpIn{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
.mobile-panel a{padding:16px 2px;border-radius:0;font-weight:400;font-size:15.5px;letter-spacing:.01em;color:var(--text);border-bottom:1px solid rgba(255,255,255,.06);background:none}
.mobile-panel a:hover{background:none;color:var(--gold-br)}
.mobile-panel a.active{color:var(--gold-br)}
.mobile-panel a.btn.btn-gold{margin:0;padding:16px 2px;background:none;border:none;border-radius:0;color:var(--gold-br);font-weight:600;font-size:15.5px;justify-content:space-between;overflow:visible;box-shadow:none}
.mobile-panel a.btn.btn-gold::after{content:"\2192";position:static;width:auto;height:auto;background:none;transform:none;animation:none;font-weight:400}
.mobile-panel::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(10,13,19,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.mobile-panel .mp-eyebrow{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-br);opacity:.8;padding:12px 2px 4px}
.mobile-panel a{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.mobile-panel a .mp-d{font-size:12px;color:var(--mut-2,var(--mut));font-weight:400}
.mobile-panel a.btn.btn-gold{flex-direction:row;align-items:center}
.mobile-panel.open>*{animation:mpItem .38s cubic-bezier(.22,.61,.36,1) both}
.mobile-panel.open>*:nth-child(1){animation-delay:.03s}
.mobile-panel.open>*:nth-child(2){animation-delay:.07s}
.mobile-panel.open>*:nth-child(3){animation-delay:.11s}
.mobile-panel.open>*:nth-child(4){animation-delay:.15s}
.mobile-panel.open>*:nth-child(5){animation-delay:.19s}
.mobile-panel.open>*:nth-child(6){animation-delay:.23s}
@keyframes mpItem{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
.mobile-panel a:last-of-type{border-bottom:none}
.mobile-panel{padding:8px 20px 4px}
.mobile-panel::after{content:"";position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(228,197,112,.55),transparent)}
.mobile-panel a{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;padding:13px 2px}
.mobile-panel a::after{content:"\203A";font-size:19px;line-height:1;color:var(--mut-2,var(--mut));opacity:.55;padding-right:2px}
.mobile-panel .mp-ic{width:38px;height:38px;border-radius:11px;background:var(--gold-soft,rgba(201,162,75,.13));border:1px solid rgba(201,162,75,.28);display:flex;align-items:center;justify-content:center}
.mobile-panel .mp-ic svg{width:17px;height:17px;color:var(--gold-br)}
.mobile-panel .mp-tx{display:flex;flex-direction:column;gap:2px}
.mobile-panel .mp-t{font-family:var(--disp);font-weight:500;font-size:16.5px;letter-spacing:-.01em;color:var(--text)}
.mobile-panel .mp-d{font-size:12px;color:var(--mut-2,var(--mut));font-weight:400}
.mobile-panel a.active .mp-t{color:var(--gold-br)}
.mobile-panel a.active .mp-ic{border-color:rgba(228,197,112,.6);box-shadow:0 0 14px -4px rgba(228,197,112,.5)}
.mobile-panel .mp-foot{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);padding:13px 2px 12px;border-top:1px solid rgba(255,255,255,.06)}
@media(prefers-reduced-motion:reduce){
.mobile-panel.open>*{animation:none}
}
@media(max-width:640px){
footer .foot-brand .brand{display:none}
footer .foot-brand::before{content:"Schonell";display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-br);margin-bottom:14px}
footer .foot-brand p{font-size:14.5px;line-height:1.7;color:var(--mut);margin:0}
footer .foot-brand p br{display:none}
footer .foot-top{margin-bottom:38px;gap:38px}
footer .foot-cols{display:grid;grid-template-columns:auto auto auto;gap:28px 22px;width:100%;justify-content:space-between}
footer .foot-col h2{white-space:nowrap}
footer .foot-bot{gap:14px}
footer .foot-bot>span{font-size:11.5px;letter-spacing:.02em;color:var(--mut);line-height:1.7}
footer .fb-left{display:flex;flex-direction:column;gap:8px;font-size:11.5px}
footer .foot-note{font-style:normal;font-size:11px;opacity:.6;margin-top:12px}
footer .foot-bot{border-top:0;position:relative}
footer .foot-bot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(228,197,112,.45),transparent)}
}
@media(min-width:641px){
footer{padding:72px 0 34px}
footer .foot-brand .brand{display:none}
footer .foot-brand::before{content:"Schonell";display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-br);margin-bottom:16px}
footer .foot-top{margin-bottom:48px}
footer .foot-cols{gap:88px}
footer .foot-brand p{max-width:44ch}
footer .foot-bot{border-top:0;position:relative;padding-top:26px}
footer .foot-bot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(228,197,112,.4),transparent)}
footer .foot-note{font-style:normal;font-size:11.5px;opacity:.65}
}
@media(max-width:940px){
.manif-img{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);display:flex;flex-direction:column;align-items:center}
.manif-img img{max-width:none;width:min(calc(100vw - 36px),460px)}
}
@media(max-width:640px){
.ab-sec:not(.ab-sec-beliefs):not(.ab-sec-work)>.wrap.sec{padding-top:135px}
.ab-layers{overflow-x:clip}
.ab-layers .els-wrap{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:66px;margin-bottom:50px}
.ab-layers .els-svg{transform:scale(1.38);transform-origin:50% 50%}
}
.nav-sales-m{display:none}
.nav-sales-m .s-short{display:none}
@media(max-width:820px){
.nav-sales-m{display:inline-flex;align-items:center;margin-left:auto;margin-right:12px;padding:10px 16px;font-size:14px;border-radius:10px}
}
@media(max-width:380px){
.nav-sales-m{margin-right:10px;padding:9px 13px;font-size:13px}
.nav-sales-m .s-long{display:none}
.nav-sales-m .s-short{display:inline}
}
.ab-layers{padding:34px 0 6px}
.abl-head{text-align:center;margin-bottom:30px;position:relative;z-index:2}
.abl-sub{color:var(--mut);max-width:440px;margin:12px auto 0;font-size:15.5px}
.els-wrap{position:relative;width:100%;max-width:700px;margin:6px auto 0}
.els-svg{width:100%;height:auto;display:block;overflow:visible}
.ab-gallery{padding:74px 0 30px}
.abg-head{text-align:center;margin-bottom:40px}
.abg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.abg-slot{position:relative;margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:linear-gradient(160deg,#1a2233,#0e121b)}
.abg-slot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.abg-slot:hover img{transform:scale(1.05)}
.abg-slot figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#EEF1F7;background:linear-gradient(0deg,rgba(5,7,11,.82),transparent);z-index:2}
.abg-slot.empty::after{content:"Drop photo in /photos/";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mut)}
@media (max-width:720px){
.abg-grid{grid-template-columns:1fr}
}
@media screen{
.work{perspective:1100px}
.wk{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);will-change:transform}
.wk:hover{box-shadow:0 30px 55px -28px rgba(0,0,0,.7);border-color:rgba(228,197,112,.34)}
.belief{transition:border-color .5s var(--ease)}
.belief:hover .no{transform:translateY(-4px);color:var(--gold-br)}
.belief:hover{border-color:rgba(228,197,112,.28)}
}
.wk h3,.wk p{position:relative;z-index:1}
.wk::before{content:"0" counter(wk);display:block;position:relative;z-index:1;font-family:var(--disp);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.01em;margin-bottom:14px;background:linear-gradient(100deg,#8F6A24 38%,#F6E2A0 50%,#8F6A24 62%);background-size:300% 100%;background-position:-100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
@media screen{
.wk::before{animation:wkShine 4s ease-in-out infinite}
.work .wk:nth-child(2)::before{animation-delay:.5s}
.work .wk:nth-child(3)::before{animation-delay:1s}
.belief .no{animation:wkShine 4s ease-in-out infinite}
.beliefs .belief:nth-child(2) .no{animation-delay:.5s}
.beliefs .belief:nth-child(3) .no{animation-delay:1s}
.beliefs .belief:nth-child(4) .no{animation-delay:1.5s}
}
@keyframes wkShine{0%{background-position:-100% 0}45%,100%{background-position:200% 0}}
.wk{position:relative}
.beliefs{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.belief{grid-template-columns:1fr;gap:12px;padding:38px 0;align-items:start}
.belief:nth-child(-n+2){padding-top:8px}
.belief:nth-last-child(-n+2){border-bottom:none;padding-bottom:8px}
.belief .no{font-size:38px}
@media(max-width:900px){
.beliefs{grid-template-columns:1fr;gap:0}
.belief:nth-child(-n+2){padding-top:34px}
.belief:nth-child(2){border-bottom:1px solid var(--line)}
.belief:nth-last-child(-n+2){padding-bottom:34px}
.belief:last-child{border-bottom:none;padding-bottom:8px}
}
.tl-photo img{max-width:440px}
@media(max-width:900px){
.tl-photo img{max-width:min(100%,420px)}
}
.tl-photo img{filter:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
@media(max-width:900px){
.tl-photo img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%)}
}
.wk-orbs{position:relative;display:block;width:124px;height:44px;margin:14px 0 2px}
.wk-orbs i{position:absolute;top:50%;left:22px;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:radial-gradient(circle at 34% 32%, #FFF6DC 0%, var(--gold-br) 42%, rgba(201,162,75,.25) 100%);box-shadow:0 0 14px 3px rgba(228,197,112,.55)}
.wk-gather i{animation:wkGather 3.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes wkGather{0% {transform:rotate(var(--a)) translateX(15px)} 45% {transform:rotate(calc(var(--a) + 200deg)) translateX(0)} 55% {transform:rotate(calc(var(--a) + 200deg)) translateX(0)} 100% {transform:rotate(calc(var(--a) + 360deg)) translateX(15px)}}
.wk-track i{left:0;animation:wkTrack 2.6s linear infinite}
.wk-track i:nth-child(1){top:24%;animation-duration:2.1s}
.wk-track i:nth-child(2){top:42%;animation-duration:3.0s;animation-delay:-.5s}
.wk-track i:nth-child(3){top:60%;animation-duration:2.5s;animation-delay:-1.1s}
.wk-track i:nth-child(4){top:78%;animation-duration:3.6s;animation-delay:-1.7s}
@keyframes wkTrack{0% {transform:translateX(0); opacity:0} 12% {opacity:1} 88% {opacity:1} 100% {transform:translateX(112px); opacity:0}}
.wk-disperse i{animation:wkDisperse 3.2s cubic-bezier(.4,0,.3,1) infinite}
@keyframes wkDisperse{0% {transform:rotate(calc(var(--a) * -1)) translateX(0)} 45% {transform:rotate(calc(var(--a) * -1 - 120deg)) translateX(15px)} 55% {transform:rotate(calc(var(--a) * -1 - 120deg)) translateX(15px)} 100% {transform:rotate(calc(var(--a) * -1 - 240deg)) translateX(0)}}
@media(prefers-reduced-motion:reduce){
.wk-orbs i{animation:none!important}
.wk-track i{opacity:1}
.wk-track i:nth-child(1){transform:translateX(10px)}
.wk-track i:nth-child(2){transform:translateX(42px)}
.wk-track i:nth-child(3){transform:translateX(74px)}
.wk-track i:nth-child(4){transform:translateX(106px)}
.wk-gather i,.wk-disperse i{transform:rotate(var(--a)) translateX(15px)}
}
.wk-orbs{width:168px;height:72px}
.wk-orbs i{left:44px}
.wk-gather i{animation:none}
.wk-gather .core{width:17px;height:17px;margin:-8.5px 0 0 -8.5px;animation:wkCore 3.4s ease-in-out infinite}
.wk-gather i:not(.core){width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);animation:wkFlyIn var(--t) cubic-bezier(.35,0,.25,1) var(--dl) infinite}
@keyframes wkFlyIn{0% {transform:translate(var(--x),var(--y)) scale(.55); opacity:0} 18% {opacity:.95} 78% {opacity:.95} 100% {transform:translate(0,0) scale(.28); opacity:0}}
@keyframes wkCore{0%,100%{transform:scale(1)} 46% {transform:scale(1.11)} 60% {transform:scale(.98)}}
.wk-track i{left:0}
.wk-track i:nth-child(1){top:18%;animation-duration:2.2s}
.wk-track i:nth-child(2){top:40%;animation-duration:3.1s;animation-delay:-.6s}
.wk-track i:nth-child(3){top:62%;animation-duration:2.6s;animation-delay:-1.3s}
.wk-track i:nth-child(4){top:84%;animation-duration:3.7s;animation-delay:-2.0s}
@keyframes wkTrack{0%{transform:translateX(0); opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{transform:translateX(150px); opacity:0}}
.wk-disperse i{animation-duration:3.8s}
@keyframes wkDisperse{0% {transform:rotate(calc(var(--a) * -1)) translateX(0)} 45% {transform:rotate(calc(var(--a) * -1 - 120deg)) translateX(24px)} 55% {transform:rotate(calc(var(--a) * -1 - 120deg)) translateX(24px)} 100% {transform:rotate(calc(var(--a) * -1 - 240deg)) translateX(0)}}
@media(prefers-reduced-motion:reduce){
.wk-gather .core{animation:none}
.wk-gather i:not(.core){animation:none;opacity:.9;transform:translate(calc(var(--x) * .55), calc(var(--y) * .55)) scale(.8)}
}
.wk-orbs{position:absolute;inset:0;width:auto;height:auto;margin:0;z-index:0;opacity:.9;pointer-events:none}
.wk::before{position:relative;z-index:1}
.wk h3,.wk p{position:relative;z-index:1}
.wk-orbs i{left:auto}
.wk-gather .core{left:26%;top:34%;width:22px;height:22px;margin:-11px 0 0 -11px}
.wk-gather i:not(.core){left:26%;top:34%;animation:wkFlyIn var(--t) cubic-bezier(.35,0,.25,1) var(--dl) infinite}
@keyframes wkFlyIn{0% {transform:translate(calc(var(--x) * 2.1), calc(var(--y) * 2.0)) scale(.6); opacity:0} 16% {opacity:.9} 80% {opacity:.9} 100% {transform:translate(0,0) scale(.26); opacity:0}}
.wk-track i{left:-14px}
.wk-track i:nth-child(1){top:20%}
.wk-track i:nth-child(2){top:42%}
.wk-track i:nth-child(3){top:64%}
.wk-track i:nth-child(4){top:86%}
@keyframes wkTrack{0%{transform:translateX(0); opacity:0} 10%{opacity:.9} 90%{opacity:.9} 100%{transform:translateX(calc(100% + 380px)); opacity:0}}
.wk-disperse i{left:26%;top:34%}
@keyframes wkDisperse{0% {transform:rotate(calc(var(--a) * -1)) translateX(0)} 45% {transform:rotate(calc(var(--a) * -1 - 120deg)) translateX(52px)} 55% {transform:rotate(calc(var(--a) * -1 - 120deg)) translateX(52px)} 100% {transform:rotate(calc(var(--a) * -1 - 240deg)) translateX(0)}}
.wk p{text-shadow:0 1px 6px rgba(14,18,27,.75)}
.wk h3{text-shadow:0 1px 8px rgba(14,18,27,.8)}
@media(max-width:900px){
.wk-gather .core,.wk-gather i:not(.core),.wk-disperse i{left:18%}
}
@media(prefers-reduced-motion:reduce){
.wk-gather i:not(.core){transform:translate(calc(var(--x) * 1.2), calc(var(--y) * 1.2)) scale(.8)}
}
.wk{min-height:236px;padding-top:30px;padding-bottom:34px}
.work{align-items:stretch}
.wk-gather .core,.wk-gather i:not(.core),.wk-disperse i{left:74%;top:31%}
.wk-gather .core{width:20px;height:20px;margin:-10px 0 0 -10px}
@keyframes wkFlyIn{0% {transform:translate(calc(var(--x) * 1.35), calc(var(--y) * 1.15)) scale(.6); opacity:0} 16% {opacity:.9} 80% {opacity:.9} 100% {transform:translate(0,0) scale(.26); opacity:0}}
@keyframes wkDisperse{0% {transform:rotate(calc(var(--a) * -1)) translateX(0)} 45% {transform:rotate(calc(var(--a) * -1 - 120deg)) translateX(38px)} 55% {transform:rotate(calc(var(--a) * -1 - 120deg)) translateX(38px)} 100% {transform:rotate(calc(var(--a) * -1 - 240deg)) translateX(0)}}
@media(max-width:900px){
.wk{min-height:0;padding-bottom:30px}
.wk-gather .core,.wk-gather i:not(.core),.wk-disperse i{left:80%;top:26%}
}
@media(prefers-reduced-motion:reduce){
.wk-gather i:not(.core){transform:translate(calc(var(--x) * .8), calc(var(--y) * .7)) scale(.8)}
}
.wk-track i{left:52%;opacity:0}
.wk-track i:nth-child(1){top:20%;animation-duration:2.2s;animation-delay:-0.2s}
.wk-track i:nth-child(2){top:28%;animation-duration:3.1s;animation-delay:-1.1s}
.wk-track i:nth-child(3){top:36%;animation-duration:2.6s;animation-delay:-1.9s}
.wk-track i:nth-child(4){top:44%;animation-duration:3.7s;animation-delay:-2.7s}
@keyframes wkTrack{0% {transform:translateX(-18px); opacity:0} 18% {opacity:.85} 82% {opacity:.85} 100% {transform:translateX(132px); opacity:0}}
@media(max-width:900px){
.wk-track i{left:58%}
.wk-track i:nth-child(1){top:16%}
.wk-track i:nth-child(2){top:24%}
.wk-track i:nth-child(3){top:32%}
.wk-track i:nth-child(4){top:40%}
}
@media(prefers-reduced-motion:reduce){
.wk-track i{opacity:.85}
.wk-track i:nth-child(1){transform:translateX(0)}
.wk-track i:nth-child(2){transform:translateX(38px)}
.wk-track i:nth-child(3){transform:translateX(76px)}
.wk-track i:nth-child(4){transform:translateX(114px)}
}
.ab-hero .wrap{position:relative}
.ab-hero .wrap > *{position:relative;z-index:1}
@media(min-width:821px){
.nav{padding-left:40px;padding-right:40px}
}
.sg-badge{display:inline-flex;align-items:baseline;gap:0;padding:0;border:0;background:none;border-radius:0;overflow:visible;font-size:12px;letter-spacing:.2em}
.sg-badge .dot{display:none}
.sg-badge::after{content:none}
.sg-badge em{font-style:normal;margin-left:15px;padding-left:16px;position:relative;letter-spacing:.2em}
.sg-badge em::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:1px;background:currentColor;opacity:.38}
@media(max-width:359px){
.hero .sg-badge{padding:0;font-size:12px;letter-spacing:.2em}
}

/* ---------------------------------------------------------------------------
   No-JavaScript fallback.

   Reveal-on-scroll, the FAQ accordions, the feature rows and the staggered hero
   copy all start hidden and are uncovered by script. With scripting off or
   broken that left every page blank below the hero — 127 FAQ paragraphs and 25
   reveal blocks on the home page alone, and nothing said so.

   These undo the hidden state. The .js class is set in the <head> by build.js,
   so none of this applies when a script actually ran. Decorative things that
   start at opacity 0 — spinners, glows, hover underlines, the demo mockups —
   are deliberately left alone: the point is that the page reads, not that the
   animations are simulated.
   --------------------------------------------------------------------------- */
html:not(.js) .rv,
html:not(.js) .reveal,
html:not(.js) .frow,
html:not(.js) .blur-in,
html:not(.js) .faq-item,
html:not(.js) .pp-fig,
html:not(.js) .faq-a p,
html:not(.js) .rv h2,
html:not(.js) .list-intro,
html:not(.js) .trust-strip,
html:not(.js) .hero-ctas,
html:not(.js) .tier-note h3,
html:not(.js) .price,
html:not(.js) .sg-stack li,
html:not(.js) .ph figcaption span,
html:not(.js) .hs-eyebrow,
html:not(.js) .hs-copy .lede,
html:not(.js) .hs-copy .hv-ctas,
html:not(.js) .hs-lede-m,
html:not(.js) .hs-copy h1 .hl>span,
html:not(.js) .dv-table tbody tr,
html:not(.js) .hv-line.l2{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
html:not(.js) .faq-a{grid-template-rows:1fr}

/* Skip link and the main landmark (see AGENTS.md).
   Off-screen rather than display:none, so it stays in the tab order and can be
   reached by the very first Tab press; it flies in on focus. #main takes
   tabindex="-1" so following the link actually moves focus, not just the
   viewport, and the scroll-margin keeps the fixed nav off the heading. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:#0E121B;color:#E4C570;border:1px solid currentColor;border-radius:0 0 10px 0;font-size:15px;font-weight:600;line-height:1;text-decoration:none}
.skip-link:focus{left:0}
#main{scroll-margin-top:90px}
#main:focus{outline:none}

/* Tap targets on touch devices (TCH-04).
   The footer's column links measured 33px and the Privacy/Terms pair 14px,
   against the 44px WCAG asks for. Padding rather than height, so the footer
   keeps its proportions on a pointer device — where these are fine already. */
@media (hover:none){
  footer .foot-col a{padding-block:11px}
  footer .fb-links a{display:inline-block;padding-block:15px}
}

/* The drawer's second group heading (see index.css note). */
.mp-eyebrow-2{margin-top:14px}

/* ═══════════ For developers (developers.html), 2026-10-05, CHANGES.md entry 35 ═══════════
   Built on a copy of about.css (shared shell, hero, buttons, type). Everything
   below is new. Unpublished until launch: see pages.json noindex. */
.dv-hero .lede{max-width:58ch}
.dv-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.dv-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;font-size:13.5px;color:var(--mut)}
.dv-trust span{display:inline-flex;align-items:center;gap:8px}
.dv-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.dv-sec{padding:110px 0;position:relative}
.dv-alt{background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0))}
.dv-head{max-width:640px;margin-bottom:46px}
.dv-head.center{margin-left:auto;margin-right:auto;text-align:center}
.dv-head .ab-h2{margin-top:14px}
.dv-sub{margin:18px 0 0;font-size:16px;line-height:1.65;color:var(--mut);max-width:46ch}
.dv-link{display:inline-block;margin-top:20px;font-weight:600;color:var(--gold-br)}
.dv-link:hover{text-decoration:underline;text-underline-offset:3px}
.dv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dv-card{padding:26px 24px 24px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.025);transition:border-color .3s,transform .3s}
.dv-card:hover{border-color:rgba(201,162,75,.4);transform:translateY(-3px)}
.dv-ic{display:flex;width:42px;height:42px;border-radius:13px;align-items:center;justify-content:center;background:rgba(201,162,75,.12);border:1px solid rgba(201,162,75,.32);color:var(--gold-br);margin-bottom:18px}
.dv-ic svg{width:20px;height:20px}
.dv-card b{display:block;font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:8px}
.dv-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}
.dv-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.dv-split .dv-head{margin-bottom:0;position:sticky;top:110px}
.dv-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dv-steps li{display:flex;gap:16px;padding:20px 22px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.dv-n{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:14px;color:#1a1505;background:linear-gradient(135deg,var(--gold-br),var(--gold))}
.dv-steps b{display:block;font-family:var(--disp);font-size:17px;font-weight:600;color:var(--text);margin:3px 0 5px}
.dv-steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}
.dv-table{border-radius:22px;border:1px solid rgba(201,162,75,.4);background:radial-gradient(100% 80% at 0% 0%,rgba(201,162,75,.12),transparent 60%),linear-gradient(180deg,#1a2233,#131a27);padding:10px 26px 22px;box-shadow:0 40px 90px -50px rgba(201,162,75,.45)}
.dv-table table{width:100%;border-collapse:collapse}
.dv-table th,.dv-table td{padding:16px 6px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
.dv-table thead th{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dv-table tbody th{font-weight:500;color:var(--text)}
.dv-table td{font-family:var(--disp);font-weight:600;font-size:19px;color:var(--text);font-variant-numeric:tabular-nums}
.dv-table td:last-child{color:var(--gold-br)}
.dv-table td,.dv-table thead th:not(:first-child){text-align:right}
.dv-fine{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--mut)}
.dv-narrow{max-width:820px}
.dv-faq{border-bottom:1px solid var(--line);padding:4px 0}
.dv-faq summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;font-family:var(--disp);font-size:18px;font-weight:600;color:var(--text)}
.dv-faq summary::-webkit-details-marker{display:none}
.dv-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--gold-br);transition:transform .25s}
.dv-faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.dv-faq p{margin:0 0 22px;font-size:15px;line-height:1.65;color:var(--mut);max-width:64ch}
.dv-end{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.dv-whosec{padding-bottom:20px}
.dv-who{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dv-who>div{padding:28px 26px;border-radius:22px;border:1px solid rgba(201,162,75,.3);background:radial-gradient(120% 90% at 0% 0%,rgba(201,162,75,.09),transparent 60%),rgba(255,255,255,.02)}
.dv-who small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dv-who strong{display:block;margin:12px 0 8px;font-family:var(--disp);font-size:clamp(30px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--gold-br)}
.dv-who p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}
@media(max-width:760px){.dv-who{grid-template-columns:1fr}}
.dv-hero h1{font-size:clamp(40px,4.6vw,60px)}
.dv-show{padding:0 0 110px}
.dv-show-cap .ab-h2{margin:14px 0 14px}
.dv-show-cap p{margin:0;font-size:16px;line-height:1.65;color:rgba(255,255,255,.78);max-width:40ch}
.dv-step-img{margin:34px 0 0;max-width:340px}
.dv-step-img img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.dv-step-img figcaption{margin-top:12px;font-size:13px;color:var(--mut)}
.dv-hero{isolation:isolate}
.dv-hero-bg{position:absolute;top:0;bottom:0;right:0;left:30%;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%);mask-image:linear-gradient(90deg,transparent 0%,#000 48%)}
.dv-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:46% 50%;opacity:.92}
.dv-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,33,.55) 0%,rgba(20,24,33,.1) 60%),linear-gradient(0deg,rgba(14,18,27,.9) 0%,rgba(14,18,27,0) 30%)}
.dv-hero-copy{max-width:720px}
.dv-show-frame{position:relative;border-radius:28px;overflow:hidden;border:1px solid rgba(201,162,75,.3);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;padding:0 56px;min-height:520px;background:radial-gradient(80% 90% at 80% 50%,rgba(201,162,75,.16),transparent 65%),linear-gradient(180deg,#1a2233,#121824)}
.dv-show-cap{max-width:480px;padding:56px 0}
.dv-phones{position:relative;height:520px}
.dv-phone{position:absolute;width:186px;border-radius:31px;padding:3px;background:#0a0c11;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -30px rgba(0,0,0,.75)}
.dv-phone img{display:block;width:100%;height:auto;border-radius:28px}
.dv-phone{left:10%;top:70px;transform:translateY(var(--py,0px)) rotate(-6deg);opacity:.85;will-change:transform}
.dv-phone-front{left:auto;right:10%;top:44px;transform:translateY(var(--py,0px)) rotate(4deg);opacity:1}
@media(max-width:960px){.dv-hero-bg{left:0;top:auto;height:340px;-webkit-mask-image:linear-gradient(0deg,#000 60%,transparent 100%);mask-image:linear-gradient(0deg,#000 60%,transparent 100%)}.dv-hero-bg::after{background:none}.dv-hero{padding-bottom:300px}.dv-show-frame{grid-template-columns:1fr;padding:0 26px;min-height:0}.dv-show-cap{padding:34px 0 0;max-width:none}.dv-phones{height:420px}.dv-phone{width:160px;left:6%}.dv-phone-front{left:auto;right:4%}.dv-step-img{display:none}}
@media(max-width:620px){.dv-show{padding-bottom:76px}}
@media(max-width:960px){.dv-grid{grid-template-columns:1fr 1fr}.dv-split{grid-template-columns:1fr;gap:34px}.dv-split .dv-head{position:static}}
@media(max-width:620px){.dv-sec{padding:76px 0}.dv-grid{grid-template-columns:1fr}.dv-table{padding:6px 16px 18px}.dv-table td{font-size:17px}.dv-ctas .btn,.dv-end .btn{width:100%;justify-content:center}}

/* ── Developers page motion (CHANGES.md entry 44) ── */
.dv-hero-bg{will-change:transform}
.dv-hero-bg img{animation:dvZoom 2.6s cubic-bezier(.22,.61,.36,1) both}
@keyframes dvZoom{from{transform:scale(1.14);opacity:0}to{transform:scale(1);opacity:.92}}
.dv-who strong{background:linear-gradient(100deg,var(--gold-br) 0%,var(--gold-br) 40%,#FFF4CF 50%,var(--gold-br) 60%,var(--gold-br) 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.dv-who .rv.in strong{animation:dvSheen 1.8s .35s cubic-bezier(.4,0,.2,1) forwards}
@keyframes dvSheen{to{background-position:0% 0}}
.dv-who>div{transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .4s}
.dv-who>div:hover{border-color:rgba(201,162,75,.6)}
.dv-card.rv.in .dv-ic{animation:dvPop .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:inherit}
@keyframes dvPop{0%{transform:scale(.4) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.dv-steps li{transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .5s,background .5s}
.dv-steps .dv-n{transition:background .5s,color .5s,box-shadow .5s;background:rgba(255,255,255,.07);color:var(--mut)}
.dv-steps li.on{border-color:rgba(201,162,75,.38);background:rgba(201,162,75,.045)}
.dv-steps li.on .dv-n{background:linear-gradient(135deg,var(--gold-br),var(--gold));color:#1a1505;box-shadow:0 0 0 6px rgba(201,162,75,.14)}
.dv-step-img img{will-change:transform;transform:translateY(var(--py,0px))}
.dv-table tbody tr{opacity:0;transform:translateX(-14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.dv-table.in tbody tr{opacity:1;transform:none}
.dv-table.in tbody tr:nth-child(2){transition-delay:.12s}
.dv-table.in tbody tr:nth-child(3){transition-delay:.24s}
.dv-show-frame{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.dv-show-frame.rv{transform:translateY(40px) scale(.97)}
.dv-show-frame.rv.in{transform:none}
.dv-card.rv{transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .3s}

/* ── Lights-on scroll scene (entry 46) ── */
.dv-lights{position:relative;height:240vh;--p:0}
.dv-lights-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(180deg,rgba(63,83,120,0) 0%,rgba(63,83,120,.35) 12vh,rgb(63,83,120) 26vh,rgb(63,83,120) 40vh,rgba(63,83,120,0) 40.1vh)}
.dv-lights picture,.dv-lights img{position:absolute;inset:0;width:100%;height:100%}
.dv-lights picture{top:26vh;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 88%,transparent 100%)}
.dv-lights img{object-fit:cover;object-position:50% 0%;transform-origin:50% 0%;transform:scale(calc(1.08 - var(--p) * .08))}
.dv-l-on{opacity:var(--p);filter:saturate(calc(.7 + var(--p) * .3))}
.dv-lights-shade{position:absolute;inset:0;background:radial-gradient(55% 45% at 18% 82%,rgba(14,18,27,.6) 0%,rgba(14,18,27,0) 70%),linear-gradient(180deg,rgba(14,18,27,0) 62%,rgba(14,18,27,.35) 100%)}
.dv-lights-cap{position:absolute;left:0;right:0;bottom:8vh;z-index:2}
.dv-lights-cap .ab-h2{margin:16px 0 12px;max-width:620px}
.dv-lights-cap p{margin:0;max-width:52ch;font-size:16px;line-height:1.65;color:rgba(255,255,255,.8)}
.dv-live{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:999px;background:rgba(10,13,20,.6);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.dv-live i{width:8px;height:8px;border-radius:50%;background:#6b7280;transition:background .4s,box-shadow .4s}
.dv-live b{font-weight:700;color:var(--mut)}
.dv-live-on{display:none;color:var(--gold-br)!important}
.dv-lights.lit .dv-live i{background:var(--gold-br);box-shadow:0 0 0 5px rgba(228,197,112,.18),0 0 14px rgba(228,197,112,.8);animation:dotpulse 2s infinite}
.dv-lights.lit .dv-live-off{display:none}
.dv-lights.lit .dv-live-on{display:inline}
.dv-lights.lit .dv-live{border-color:rgba(201,162,75,.5)}
@media(max-width:760px){.dv-lights{height:190vh}.dv-lights-pin{background:linear-gradient(180deg,rgba(63,83,120,0) 0%,rgba(63,83,120,.4) 8svh,rgb(63,83,120) 16svh,rgb(63,83,120) 26svh,rgba(63,83,120,0) 26.1svh)}.dv-lights picture{top:16svh;height:42svh;bottom:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%)}.dv-lights img{object-position:50% 50%}.dv-lights-shade{background:none}.dv-lights-cap{bottom:7svh}}

/* ── Edge blending into the navy page background (entry 48) ── */
.dv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,18,27,0) 0%,rgba(14,18,27,.55) 45%,var(--ink) 100%)}
.dv-hero .wrap{z-index:2}
.dv-hero-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,18,27,.6) 0%,rgba(14,18,27,0) 22%),linear-gradient(270deg,rgba(14,18,27,.55) 0%,rgba(14,18,27,0) 18%)}
@media(max-width:960px){.dv-hero::after{height:26%}.dv-hero-bg::before{background:linear-gradient(270deg,rgba(14,18,27,.4) 0%,rgba(14,18,27,0) 20%),linear-gradient(90deg,rgba(14,18,27,.4) 0%,rgba(14,18,27,0) 20%)}}
/* ── Caption legibility once lit (entry 52) ── */
.dv-lights-shade::after{content:"";position:absolute;inset:0;opacity:calc(.35 + var(--p) * .65);background:radial-gradient(70% 62% at 12% 88%,rgba(14,18,27,.88) 0%,rgba(14,18,27,.6) 40%,rgba(14,18,27,0) 75%),linear-gradient(0deg,rgba(14,18,27,.6) 0%,rgba(14,18,27,0) 38%)}
.dv-lights-cap p{text-shadow:0 2px 18px rgba(8,10,16,.75),0 1px 3px rgba(8,10,16,.6)}
.dv-lights-cap .ab-h2{filter:drop-shadow(0 2px 14px rgba(8,10,16,.7))}
.dv-lights-cap p{color:rgba(255,255,255,.9)}
@media(max-width:760px){.dv-lights-shade::after{display:none}}

/* ── Proof stats, project calculator, closing line (entry 53) ── */
.dv-proof{padding-top:40px}
.dv-proof .ab-stats{margin:10px 0 0}
.dv-calc{margin:18px 0 0;padding:18px 6px 4px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px 18px}
.dv-calc label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dv-calc-row{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:14px}
.dv-calc input{width:96px;padding:10px 12px;border-radius:12px;border:1px solid rgba(201,162,75,.45);background:rgba(255,255,255,.04);color:var(--text);font:600 17px var(--disp);font-variant-numeric:tabular-nums}
.dv-calc input:focus{outline:none;border-color:var(--gold-br);box-shadow:0 0 0 3px rgba(201,162,75,.2)}
.dv-calc-out{text-align:right}
.dv-calc-out b{display:block;font:700 26px var(--disp);color:var(--gold-br);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dv-calc-out span{font-size:13px;color:var(--mut)}
.dv-calc-out i{font-style:normal;color:var(--text)}
.dv-end-h{text-align:center;margin:84px auto 0;max-width:760px}
@media(max-width:620px){.dv-calc{grid-template-columns:1fr 1fr}.dv-calc label{grid-column:1/-1}.dv-calc-out{text-align:right}.dv-end-h{margin-top:60px}}
.dv-proof .dv-head{max-width:880px}
/* ── Calmer "Who pays what" and proof band (entry 55) ── */
.dv-who>div{border-color:var(--line);background:rgba(255,255,255,.025)}
.dv-who>div:hover{border-color:var(--line-2)}
.dv-who strong{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text);font-weight:600;font-size:clamp(28px,3vw,34px)}
.dv-who .rv.in strong{animation:none}
.dv-proof .ab-stats .num{color:var(--text);font-weight:600;font-size:clamp(32px,4vw,48px)}
.dv-proof{padding-top:96px}@media(max-width:620px){.dv-proof{padding-top:72px}}

/* ══ Mobile & tablet pass (entry 57) ══ */
.dv-hero h1,.dv-sec .ab-h2,.dv-show .ab-h2,.dv-lights .ab-h2,.dv-end-h{text-wrap:balance}
.dv-hero .lede,.dv-sub,.dv-card p,.dv-steps p,.dv-faq p,.dv-show-cap p,.dv-lights-cap p{text-wrap:pretty}
@media(max-width:960px){
  /* hero: photo becomes an in-flow image under the copy, not a dim background strip */
  .dv-hero{display:flex;flex-direction:column;padding-bottom:0}
  .dv-hero>.wrap{order:1;width:100%}
  .dv-hero-bg{order:2;position:relative;inset:auto;left:auto;top:auto;right:auto;bottom:auto;width:100%;height:auto;aspect-ratio:4/3;margin-top:40px;transform:none!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 70%,transparent 100%)}
  .dv-hero-bg img{opacity:1;object-position:58% 50%}
  .dv-hero-bg::before,.dv-hero-bg::after,.dv-hero::after{display:none}
  .dv-hero-copy{max-width:640px}
}
@media(max-width:640px){
  .ab-hero.dv-hero{padding-top:112px}
  .dv-hero h1{font-size:clamp(34px,9.4vw,44px);margin:16px 0 18px}
  .dv-hero .lede{font-size:16px;line-height:1.6}
  .dv-ctas{margin-top:26px;gap:10px}
  .dv-trust{flex-direction:column;align-items:flex-start;gap:9px;margin-top:22px;font-size:13px}
  .dv-hero-bg{aspect-ratio:1/1;margin-top:28px}

  /* consistent left-aligned section heads on small screens */
  .dv-head.center,.dv-end-h{text-align:left;margin-left:0}
  .dv-head{margin-bottom:30px}
  .dv-sec{padding:72px 0}
  .dv-whosec{padding-top:48px;padding-bottom:8px}
  .dv-proof{padding-top:64px;padding-bottom:24px}
  .dv-proof .ab-stats{gap:30px 16px;text-align:left;margin-top:0}
  .dv-proof .ab-stats .num{font-size:34px}
  .dv-proof .ab-stats .lbl{font-size:10.5px;letter-spacing:.12em;margin-top:8px}

  /* who pays: compact rows */
  .dv-who{gap:10px}
  .dv-who>div{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;padding:18px 20px}
  .dv-who small{grid-column:1;grid-row:1}
  .dv-who strong{grid-column:2;grid-row:1;margin:0;font-size:24px;text-align:right}
  .dv-who p{grid-column:1/-1;font-size:14px}

  /* why cards: icon beside title, tighter */
  .dv-grid{gap:10px}
  .dv-card{display:grid;grid-template-columns:38px 1fr;column-gap:14px;align-items:center;padding:18px 18px 18px}
  .dv-card:hover{transform:none}
  .dv-ic{width:38px;height:38px;border-radius:11px;margin:0;grid-row:1}
  .dv-ic svg{width:18px;height:18px}
  .dv-card b{grid-column:2;grid-row:1;margin:0;font-size:16.5px}
  .dv-card p{grid-column:1/-1;margin-top:10px;font-size:14px}

  /* sales gallery */
  .dv-show-frame{border-radius:22px;padding:0 20px}
  .dv-show-cap{padding-top:28px}
  .dv-phones{height:360px}
  .dv-phone{width:148px;top:46px;left:5%}
  .dv-phone-front{left:auto;right:5%;top:26px}

  /* steps */
  .dv-steps{gap:10px}
  .dv-steps li{padding:16px 16px;gap:14px}
  .dv-steps b{font-size:16px}
  .dv-steps p{font-size:14px}

  /* pricing card + calculator */
  .dv-table{padding:4px 16px 16px;border-radius:18px}
  .dv-table th,.dv-table td{padding:14px 4px}
  .dv-table td{font-size:16px}
  .dv-calc{grid-template-columns:auto 1fr;gap:12px 14px;padding:16px 4px 2px}
  .dv-calc label{grid-column:1/-1}
  .dv-calc input{width:88px;font-size:16px}
  .dv-calc-out b{font-size:24px}
  .dv-calc-out span{white-space:nowrap;font-size:12.5px}

  /* lights scene caption */
  .dv-lights-cap .ab-h2{margin:14px 0 10px}
  .dv-lights-cap p{font-size:15px}

  /* FAQ + close */
  .dv-faq summary{font-size:16.5px;padding:18px 32px 18px 0}
  .dv-end-h{margin-top:56px}
  .dv-end{justify-content:stretch;margin-top:28px}
}
@media(max-width:640px){.dv-show{padding-bottom:20px}.dv-lights{height:175vh}}
/* narrow-phone guard: below 367px the calculator row (input and result side by side) is wider than the price card */
@media(max-width:366px){.dv-calc{grid-template-columns:1fr}.dv-calc-out{text-align:left}}
@media(min-width:641px) and (max-width:960px){.dv-hero-bg{aspect-ratio:16/9}.dv-phones{max-width:440px;width:100%;margin:0 auto}}
/* entry 58: mobile hero photo fades into the navy page, matching desktop */
@media(max-width:960px){
  .dv-hero-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 100%)}
  .dv-hero::after{display:block;height:min(240px,45vw);z-index:1;background:linear-gradient(180deg,rgba(14,18,27,0) 0%,rgba(14,18,27,.6) 50%,var(--ink) 100%)}
}

/* ── Data residency card (entries 69–70): same scroll-driven effect as the
   Access page card (schonell-access.css, entries 61–68). Keep the two in step.
   The script at the bottom of developers.html sets --t, --c and --e. ── */
.dv-res{padding:0 0 110px}
.res-card{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:84px 40px;border-radius:24px;--c:0;--t:0;--e:0;
  background:color-mix(in srgb,#151f33 calc(var(--c) * 100%),#0E121B);
  border:1px solid rgba(255,255,255,calc(var(--c) * .08));
  clip-path:inset(0 round 24px);-webkit-clip-path:inset(0 round 24px)}
.res-card h3{font-family:var(--disp);font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:-.015em;color:var(--text);margin:14px 0 10px;text-wrap:balance}
.res-card p{color:var(--mut);font-size:16px;line-height:1.65;max-width:600px;margin:0 auto;text-wrap:pretty}
.res-card .eyebrow{margin-bottom:0}
.res-clouds{position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:screen}
.res-clouds i{position:absolute;inset:-25% -15%;background:url(/images/res-clouds-v2.webp) center/cover no-repeat;mix-blend-mode:screen;
  animation:dvResDrift 40s ease-in-out infinite alternate;
  opacity:calc(var(--c) * .532);
  filter:blur(calc((1 - var(--c)) * 36px)) brightness(calc((.5 + var(--c) * .55) * .95)) sepia(.9) hue-rotate(180deg) saturate(.55);
  will-change:transform,opacity,filter}
.res-clouds i:nth-child(1){background-position:25% 40%;
  transform:translate3d(calc((1 - var(--c)) * -38% - var(--e) * 16%),calc((.5 - var(--t)) * 360px),0) scale(calc(1.7 - var(--c) * .5 + var(--e) * .35)) rotate(calc((1 - var(--c)) * -6deg - var(--e) * 5deg));
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 72%);mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 72%)}
.res-clouds i:nth-child(2){background-position:78% 60%;
  transform:translate3d(calc((1 - var(--c)) * 38% + var(--e) * 16%),calc((.5 - var(--t)) * -260px),0) scale(calc(1.7 - var(--c) * .5 + var(--e) * .35)) rotate(calc((1 - var(--c)) * 6deg + var(--e) * 5deg));
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 38%,transparent 72%);mask-image:linear-gradient(270deg,#000 0%,#000 38%,transparent 72%)}
.res-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--c);
  background:radial-gradient(52% 58% at 50% 50%,rgba(21,31,51,.7) 0%,rgba(21,31,51,.3) 60%,rgba(21,31,51,0) 100%)}
.res-card .eyebrow,.res-card h3,.res-card p{position:relative}
@keyframes dvResDrift{from{background-position:38% 50%}to{background-position:62% 44%}}
/* entry 217b: the idle drift is switched off. It animated background-position,
   which Chrome repaints every frame on these huge blurred, masked layers
   (~1,200 raster jobs a second at rest), seen as constant flicker on weaker
   laptops. A composited translate drift (entry 217) stopped the repaint but
   broke the soft fade into the next section on some GPUs. The clouds still
   form, part and tilt with scroll; they just no longer drift when idle.
   Each bank keeps its own framing (25% 40% / 78% 60%), as on the Access page. */
.res-clouds i{animation:none}
@media(max-width:640px){.dv-res{padding-bottom:72px}.res-card{padding:64px 22px}.res-clouds i{inset:-20% -40%}
  .res-card::after{background:radial-gradient(80% 62% at 50% 50%,rgba(21,31,51,.85) 0%,rgba(21,31,51,.45) 60%,rgba(21,31,51,0) 100%)}}
/* entry 76: residency card now follows the proof band */
.dv-res{padding:56px 0 0}
@media(max-width:640px){.dv-res{padding:40px 0 0}}
.dv-proof{padding-bottom:24px}
/* entry 77: proof band is three stats leading straight into the residency card */
.dv-proof .ab-stats{grid-template-columns:repeat(3,1fr);max-width:900px;margin-left:auto;margin-right:auto}
.dv-res{padding-top:48px}
@media(max-width:640px){
  .dv-proof .ab-stats{grid-template-columns:1fr;gap:0;max-width:none}
  .dv-proof .ab-stats>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
  .dv-proof .ab-stats>div:first-child{border-top:1px solid var(--line)}
  .dv-proof .ab-stats .num{font-size:28px}
  .dv-proof .ab-stats .lbl{margin:0;text-align:right;max-width:52%}
  .dv-res{padding-top:32px}
}

/* ══ Data residency: full-bleed sky (entry 98), ported from schonell-access.css
   entries 95–97 and tuned for this page: it sits directly under the proof
   stats, so it rises a little sooner and the headline is set slightly smaller.
   Scroll mapping (--c/--t/--e) is unchanged. Keep the two pages in step. ══ */
.dv-res{padding:0}
.dv-res .wrap{max-width:none;padding:0}
.dv-res .res-card{max-width:none;width:100vw;margin:0 calc(50% - 50vw);border:0;border-radius:0;background:transparent;
  clip-path:none;-webkit-clip-path:none;overflow:hidden;padding:clamp(110px,17vh,180px) 24px clamp(140px,21vh,220px)}
.dv-res .res-clouds{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect}
.dv-res .res-clouds i{opacity:calc(var(--c) * .48)}
.dv-res .res-clouds i:nth-child(1){
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 34%,transparent 62%),linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.35) 72%,rgba(0,0,0,.2) 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0%,#000 34%,transparent 62%),linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.35) 72%,rgba(0,0,0,.2) 100%);mask-composite:intersect}
.dv-res .res-clouds i:nth-child(2){-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 34%,transparent 62%);mask-image:linear-gradient(270deg,#000 0%,#000 34%,transparent 62%)}
.dv-res .res-card::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:var(--c);
  background:radial-gradient(60% 40% at 50% 58%,rgba(201,162,75,.08) 0%,rgba(70,96,140,.08) 45%,rgba(14,18,27,0) 75%),
             radial-gradient(70% 45% at 50% 50%,rgba(26,40,68,.55) 0%,rgba(22,33,56,.28) 55%,rgba(14,18,27,0) 100%)}
.dv-res .res-card::after{background:radial-gradient(34% 40% at 50% 50%,rgba(21,31,51,.6) 0%,rgba(21,31,51,.25) 60%,rgba(21,31,51,0) 100%)}
.dv-res .res-card::before,.dv-res .res-card::after{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%)}
.dv-res .res-card>.eyebrow,.dv-res .res-card>h3,.dv-res .res-card>p{opacity:calc(.15 + var(--c) * .85);transform:translateY(calc((1 - var(--c)) * 26px))}
.dv-res .res-card h3{font-size:clamp(30px,4vw,52px);line-height:1.05;letter-spacing:-.028em;margin:18px auto 18px;max-width:19ch}
.dv-res .res-card p{font-size:clamp(16px,1.25vw,18px);max-width:560px}
@media(max-width:640px){
  .dv-res{padding:0}
  .dv-res .res-card{padding:96px 22px 120px}
  .dv-res .res-clouds i{inset:-20% -60%;opacity:calc(var(--c) * .64)}
  .dv-res .res-card h3{max-width:none}
  .dv-res .res-card::after{background:radial-gradient(70% 45% at 50% 50%,rgba(21,31,51,.7) 0%,rgba(21,31,51,.3) 60%,rgba(21,31,51,0) 100%)}
}
/* entry 99: blend the clouds into the real page, not into the card's own
   transparent layer. isolation:isolate made the texture's black gaps paint
   dark; with isolation off, screen blending lifts the page background instead. */
.dv-res .res-card{isolation:auto}
.dv-res .res-card::before,.dv-res .res-clouds,.dv-res .res-card::after{z-index:0}
.dv-res .res-card>.eyebrow,.dv-res .res-card>h3,.dv-res .res-card>p{position:relative;z-index:1}
/* entry 99b: clouds are now a real alpha texture (white, luminance as alpha),
   drawn with normal blending, so nothing in the layer can darken the page */
.dv-res .res-clouds,.dv-res .res-clouds i{mix-blend-mode:normal}
.dv-res .res-clouds i{background-image:url(/images/res-clouds-alpha.webp)}
/* entry 101: mobile lights scene, caption tucked under a larger photo */
@media(max-width:760px){
  .dv-lights picture{top:14svh;height:48svh}
  .dv-lights-cap{bottom:auto;top:calc(62svh + 4px)}
}
/* entry 113: quieter scroll progress, done safely. Same position and size
   family as before (2px, top 0, over the nav), fully opaque muted gold with no
   transparent lead-in and no glow, so it never shows the page through itself.
   It appears while scrolling and fades 1.2s after (shell.js); when hidden, the
   nav beneath it is what shows, as on the live site. */
#sbar{height:2px;background:linear-gradient(90deg,#7a6535 0%,#a88a45 55%,#d3b25e 100%);box-shadow:none;opacity:0;transition:opacity .6s ease}
#sbar.on{opacity:1;transition:opacity .2s ease}
@media(prefers-reduced-motion:reduce){#sbar{transition:none}}
/* entry 120: residency headline matches this page's section headers (.ab-h2) */
.dv-res .res-card h3{font-size:clamp(28px,3.6vw,44px);line-height:1.08;max-width:22ch}
/* entry 121: same letter-spacing as the page's .ab-h2 */
.dv-res .res-card h3{letter-spacing:-.022em;line-height:1.05;font-weight:600}
/* entry 124: mobile clouds ~18% stronger (.64 -> .75) */
@media(max-width:640px){.dv-res .res-clouds i{opacity:calc(var(--c) * .75)}}
/* entry 151: clouds bleed a little into the neighbouring sections (same as
   interphone-cloud.css entry 150), spread taller and slightly fainter */
.dv-res .res-card{overflow:visible;overflow-x:clip}
.dv-res .res-clouds{inset:-170px 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 14%,#000 34%,#000 66%,rgba(0,0,0,.35) 86%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 14%,#000 34%,#000 66%,rgba(0,0,0,.35) 86%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect}
.dv-res .res-clouds i{opacity:calc(var(--c) * .42)}
.dv-res .res-card::before,.dv-res .res-card::after{inset:-120px 0}
/* keep the proof stats above and the next section painting over the haze */
.dv-proof,.dv-res + .dv-sec{z-index:1}
@media(max-width:640px){
  .dv-res .res-clouds{inset:-110px 0}
  .dv-res .res-clouds i{opacity:calc(var(--c) * .7)}
  .dv-res .res-card::before,.dv-res .res-card::after{inset:-80px 0}
}

/* entry 186: Reduce Motion shows headings at once, no blur */
@media (prefers-reduced-motion:reduce){.blur-in,.rv h2,.tier-note h3,.hs-copy h1 .hl>span{opacity:1!important;filter:none!important;animation:none!important}}

/* entry 218: Chrome performance. The cloud tint (sepia, hue-rotate, saturate,
   brightness) is baked into res-clouds-tint.webp, so the browser no longer runs a
   colour-filter chain over these 2x-viewport layers on every scroll frame. Blur
   only runs while the clouds are forming; once formed (.res-formed, set by the
   scroll script when --c reaches 1) the layers carry no filter at all. */
/* entry 219: no live blur at all. The forming clouds cross-fade from a pre-blurred
   copy (res-clouds-tint-blur.webp, ~36px CSS blur baked in) to the sharp one as --c
   goes 0 to 1. Chrome was re-blurring these huge layers on every scroll frame;
   opacity changes cost almost nothing. */
.dv-res .res-clouds i{background-image:none;filter:none;will-change:transform,opacity}
.dv-res .res-clouds i::before,.dv-res .res-clouds i::after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-size:inherit;background-position:inherit;will-change:opacity}
.dv-res .res-clouds i::before{background-image:url(/images/res-clouds-tint.webp);opacity:var(--c)}
.dv-res .res-clouds i::after{background-image:url(/images/res-clouds-tint-blur.webp);opacity:calc(1 - var(--c))}
.dv-res .res-card.res-formed .res-clouds i{filter:none}

/* entry 219 glows: these are soft radial gradients that already fade to transparent,
   so the blur filter on them was invisible but forced a GPU blur every frame
   (the hero glows animate forever). */
.hero-glow{filter:none}

/* entry 223: the CSS cloud layers are hidden from the first paint; the canvas in
   shell.js draws the clouds. They show only if the canvas cannot run (.res-css),
   so a reload never flashes the unmasked layers (seen in Safari). */
.res-clouds:not(.res-css) i{visibility:hidden}

/* entry 225 (replaces 224): the glow layers behind the Data residency text keep their
   fade masks, but stay hidden until the cloud canvas is ready (.res-ready, set by
   shell.js), then fade in. Safari can paint masked layers unmasked in the first frames
   after a reload; by the time these appear the masks are in place. */
.dv-res .res-card:not(.res-ready)::before,.dv-res .res-card:not(.res-ready)::after{opacity:0!important}
.dv-res .res-card.res-fadein::before,.dv-res .res-card.res-fadein::after{transition:opacity .5s ease}

/* entry 227: the real cause of the Safari reload edges. On load the card plays its reveal
   (fade + slide); while that runs Safari puts it on its own layer, and with
   overflow-x:clip it then clips the clouds and glows that reach above and below the card,
   showing hard top and bottom edges until the reveal ends. The card no longer clips (the
   section clips sideways instead, so nothing scrolls horizontally) and no longer runs the
   card-level reveal; its text still fades in with the clouds as you scroll. */
.dv-res{overflow-x:clip}
.dv-res .res-card{overflow:visible!important}
.dv-res .res-card.rv,.dv-res .res-card.reveal{opacity:1!important;transform:none!important;transition:none!important}

/* entry 228a: no clip on the Data residency section at all. Entry 227 moved the
   horizontal clip from the card to the section, but Safari still clipped the
   cloud and glow layers to the section's box while they faded in after a reload,
   leaving a flat top and bottom edge for a moment. The page body already stops
   sideways scrolling, so the section needs no clip of its own. */
.dv-res,.dv-res .res-card{overflow:visible!important}