/* OnlyStars signature: pink light, sculptural hardware, quiet readable surfaces. */
:root{--accent:#5d6eff;--panel:#0d0e16;--line:#202342;--muted:#aeb0be}
html,body{background:#07070b;color:#6675ff}
body{background-image:radial-gradient(ellipse at 0 4%,#1d2a9a45,transparent 42%),radial-gradient(ellipse at 100% 28%,#2a338938,transparent 43%);background-attachment:fixed}
.site-header{background:#08090fe8!important;border-bottom:1px solid #6d7bf829;box-shadow:0 5px 40px #0005;backdrop-filter:blur(14px)}
.brand-mark{color:#6675ff;filter:drop-shadow(0 0 9px #5d6eff88)}
button.primary,a.primary,.closing-cta .primary{background:linear-gradient(135deg,#6675ff,#1129ff);border-color:#6675ff80;box-shadow:inset 0 1px 0 #6675ff4a,0 5px 26px #5d6eff35;color:white}
button.primary:hover,a.primary:hover{background:linear-gradient(135deg,#6675ff,#4153f5);box-shadow:0 8px 32px #5d6eff65;transform:translateY(-2px)}
button,a.button{transition:transform .25s,box-shadow .25s,border-color .25s}
.flow-hero{position:relative;isolation:isolate;padding-top:88px;overflow:visible}
.flow-hero h1{position:relative;font-size:clamp(52px,6.3vw,86px);font-weight:530;letter-spacing:-3.4px;line-height:1.01;max-width:960px;text-shadow:0 4px 34px #0008}
.flow-hero h1>span{display:inline-block;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;color:#6675ff;-webkit-text-fill-color:#6675ff;letter-spacing:-3px;text-shadow:0 0 48px #5d6eff35}
.flow-hero .lead{max-width:550px;font-size:16px;line-height:1.8;color:#b7b9c8}
.signature-kicker{display:flex;align-items:center;justify-content:center;gap:12px;font:10px ui-monospace,monospace;letter-spacing:3px;text-transform:uppercase;color:#6c7af9;margin:0 0 28px}
.signature-kicker:before,.signature-kicker:after{content:'';height:1px;width:35px;background:#6675ff;box-shadow:0 0 12px #5d6eff}
.orbital-scene{position:absolute;inset:0 -50px 30px;z-index:-1;pointer-events:none;overflow:hidden;perspective:1000px}
.rose-aura{position:absolute;width:100%;height:90%;left:0;top:7%;background:radial-gradient(ellipse at 50% 55%,#5968eb27,transparent 58%),radial-gradient(ellipse at 15% 20%,#6976ed33,transparent 37%),radial-gradient(ellipse at 85% 65%,#6675ff22,transparent 35%);animation:aura-drift 14s ease-in-out infinite alternate}
.orbital-ring{position:absolute;left:50%;top:59%;width:1000px;height:630px;margin:-315px 0 0 -500px;border-radius:50%;border:1px solid #6675ff55;box-shadow:inset 0 0 22px #5d6eff0f,0 0 25px #5d6eff10;transform:rotateX(67deg) rotateZ(-22deg);animation:ring-drift 20s ease-in-out infinite alternate}
.orbital-ring.ring-two{width:1120px;height:720px;margin:-360px 0 0 -560px;border-color:#6b79fa26;transform:rotateX(63deg) rotateZ(25deg);animation-direction:alternate-reverse;animation-duration:27s}
.orbital-ring:after{content:'';position:absolute;width:8px;height:8px;left:17%;top:11%;background:#6675ff;border-radius:50%;box-shadow:0 0 18px 5px #5d6eff88}
.starfield{position:absolute;inset:0;background-image:radial-gradient(circle,#6675ff99 1px,transparent 1.6px),radial-gradient(circle,#7581f066 1px,transparent 1.5px);background-size:147px 171px,239px 213px;background-position:12px 30px,86px 75px;opacity:.36;mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent)}
.flow-hero .phone-stage{margin-top:62px;padding:14px 0 32px;perspective:1200px;gap:38px;justify-content:center;transform:rotateY(var(--pointer-x,0deg)) rotateX(var(--pointer-y,0deg));transition:transform .6s ease-out;transform-style:preserve-3d}
.flow-hero .phone-stage:before{display:none}
.flow-hero .phone-column{transform-style:preserve-3d;animation:device-float 7s ease-in-out infinite!important;will-change:auto}
.flow-hero .phone-column:nth-child(1){transform:translateY(34px) rotateY(14deg) rotateZ(-7deg)!important;animation-delay:-2s!important}
.flow-hero .phone-column:nth-child(2){transform:translateZ(55px)!important;z-index:2;animation-delay:-4s!important}
.flow-hero .phone-column:nth-child(3){transform:translateY(34px) rotateY(-14deg) rotateZ(7deg)!important;animation-delay:-1s!important}
.flow-hero .phone{filter:drop-shadow(0 25px 26px #000b) drop-shadow(0 0 12px #6a79fb30)}
.flow-hero .phone-label{background:#101221e6;border-color:#6675ff40;color:#6675ff;box-shadow:0 5px 20px #0005;font-size:11px;margin-bottom:19px}
.flow-hero .phone-label i{background:#6675ff;box-shadow:0 0 9px #6675ff}
.flow-hero .motion-controls{margin-top:38px;font-size:11px}.flow-hero .motion-controls button{font-size:11px;padding:7px 13px}.flow-hero .mock-label{font-size:10px;color:#9496ac}
.flow-facts{position:relative;background:linear-gradient(110deg,#11143055,#0d0e1c77);border:1px solid #4c54a12e;border-radius:20px;padding:30px;margin-top:45px;box-shadow:inset 0 1px #6675ff10}
.flow-facts strong{color:#6675ff}.section-heading>.eyebrow{display:block;color:#6675ff;font:10px ui-monospace,monospace;letter-spacing:2px;margin-bottom:20px}
.section-heading h2,.closing-cta h2{font-size:clamp(36px,4.4vw,58px);letter-spacing:-2px;line-height:1.08;color:#6675ff}
.feature-card,.pricing-card,.card,.metric-card,.auth,dialog{background:linear-gradient(135deg,#131523eb,#0c0d16f5);border-color:#6069b633;box-shadow:inset 0 1px #6675ff16,0 20px 50px #0003;border-radius:20px}
.feature-card{transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg))!important;transition:transform .35s ease-out,border-color .35s,box-shadow .35s}
.feature-card:hover{transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg))!important;border-color:#6675ff72;box-shadow:inset 0 1px #6675ff33,0 24px 55px #0007,0 0 35px #5d6eff0d}
.task-preview,.analytics-preview,.remote-phone{box-shadow:0 18px 42px #0006,inset 0 1px #6675ff18;border-color:#7783ee33}
.gallery-real-phone{transition:transform .4s;filter:drop-shadow(0 15px 18px #0009)}.gallery-real-phone:hover{transform:perspective(900px) rotateY(-5deg) translateY(-7px)}
.real-device-gallery{padding-top:30px;padding-bottom:25px}.demo-step-badge{background:#101221;border-color:#6f7cf650;box-shadow:0 6px 20px #0004}
.infrastructure-grid article{border-top:1px solid #6a78fb44;padding-top:24px}.infrastructure-grid .feature-icon{color:#6675ff}
.closing-cta{position:relative;border:1px solid #6675ff26;border-radius:28px;background:radial-gradient(ellipse at 50% 110%,#172ce959,transparent 70%),#0b0c13;padding:80px 30px;margin-top:90px;overflow:hidden}
.workspace-sidebar{background:#0b0c13;border-color:#202446}.workspace-sidebar nav a[aria-current=page]{background:#242d7f;color:#6675ff}.workspace-content .card{background:linear-gradient(145deg,#121321,#0d0e17)}
.effects-control{display:inline-block!important;font-size:11px}.scene-paused .scene-paused .orbital-scene *,.scene-paused .phone-column,.motion-paused .orbital-scene *,.motion-paused .phone-column,.effects-paused .orbital-scene *,.effects-paused .phone-column{animation-play-state:paused!important}
@keyframes device-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes aura-drift{from{transform:translate3d(-2%,-1%,0) scale(.96);opacity:.75}to{transform:translate3d(2%,2%,0) scale(1.06);opacity:1}}
@keyframes ring-drift{from{rotate:-5deg;translate:0 -8px}to{rotate:6deg;translate:0 10px}}
@media(max-width:760px){body{background-attachment:scroll}.flow-hero{padding-top:57px}.signature-kicker{font-size:8px;letter-spacing:2px;gap:8px}.flow-hero h1{font-size:clamp(43px,10.8vw,65px);letter-spacing:-2px}.flow-hero h1>span{letter-spacing:-2px}.flow-hero .lead{font-size:14px}.orbital-scene{inset:0 -22px 0}.orbital-ring{width:620px;height:440px;margin:-220px 0 0 -310px}.orbital-ring.ring-two{width:740px;height:510px;margin:-255px 0 0 -370px}.flow-hero .phone-stage{grid-template-columns:repeat(3,170px);gap:18px;padding:20px 16px 35px;margin-top:36px;transform:none}.flow-hero .phone{width:170px}.flow-hero .phone-column:nth-child(n){transform:none!important;animation:none!important}.flow-hero .motion-controls{margin-top:12px}.flow-facts{padding:22px 18px}.section-heading h2{letter-spacing:-1px}.closing-cta{padding:55px 20px}.feature-card{transform:none!important}.feature-card:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){.orbital-scene *,.flow-hero .phone-column{animation:none!important}.flow-hero .phone-stage,.feature-card,.feature-card:hover{transform:none!important}.gallery-real-phone:hover{transform:none}}
/* Shared ambient depth, including the customer workspace. */
html,body{overflow-x:clip}
.ambient-world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#app{position:relative;z-index:1}
.ambient-light{position:absolute;inset:-25%;background:radial-gradient(ellipse at 12% 28%,#4d5dea30,transparent 32%),radial-gradient(ellipse at 87% 70%,#4956c724,transparent 29%);animation:ambient-breathe 22s ease-in-out infinite alternate}
.ambient-grid{position:absolute;left:-30%;right:-30%;height:60%;bottom:-40%;background-image:linear-gradient(#7480f11a 1px,transparent 1px),linear-gradient(90deg,#7480f11a 1px,transparent 1px);background-size:90px 90px;transform:perspective(600px) rotateX(55deg);mask-image:linear-gradient(transparent,#0008);opacity:.6}
.ambient-trace{position:absolute;width:68vw;height:68vw;right:-52vw;top:10vh;border:1px solid #6f7cf624;border-radius:50%;box-shadow:0 0 0 55px #727ff304,0 0 0 110px #727ff303;transform:rotateX(20deg);animation:ambient-breathe 30s ease-in-out infinite alternate-reverse}
.workspace-content{position:relative}.dashboard-heading h1{font-size:clamp(30px,3.5vw,48px);letter-spacing:-1.5px;color:#6675ff}.dashboard-heading .eyebrow{color:#727ff3;letter-spacing:1.8px;font-size:10px}
.workspace-sidebar{border-radius:20px 0 0 20px;background:linear-gradient(160deg,#101221ec,#090a12f5);box-shadow:inset 1px 1px #6675ff1f}.workspace-layout{gap:26px}.workspace-sidebar nav a{border:1px solid transparent;transition:background .25s,border-color .25s}.workspace-sidebar nav a:hover{background:#161937;border-color:#7783ee2f}.workspace-sidebar nav a[aria-current=page]{background:linear-gradient(100deg,#303ca888,#14172ecc);border-color:#6675ff4d;box-shadow:inset 3px 0 #6675ff,0 5px 15px #0002}
.metric-card{position:relative;overflow:hidden;background:linear-gradient(140deg,#151830,#0d0e18);border-top-color:#7682ef55}.metric-card:after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;right:-70px;top:-80px;background:radial-gradient(circle,#6675ff33,transparent 70%);pointer-events:none}.metric-card strong{color:#6675ff;text-shadow:0 0 28px #6573f21a}
.card-heading h2{color:#6675ff}.card,.metric-card{transition:border-color .25s,box-shadow .25s}.card:hover,.metric-card:hover{border-color:#525dbf57;box-shadow:inset 0 1px #6675ff16,0 18px 40px #0004}
.demo-notice{background:#101229aa;border-color:#3b47af44;border-radius:12px}.agency-avatar{background:linear-gradient(135deg,#6472f2,#343c81);box-shadow:0 0 22px #6472f222}.status-dot{box-shadow:0 0 10px currentColor}
.plan-switch{background:#0b0c15;border-color:#30388250}.plan-switch button[aria-pressed=true]{background:linear-gradient(120deg,#323da3,#151837);border-color:#7480f166;color:#6675ff}
.quote-total{border-color:#4a55b640}.pricing-card{box-shadow:inset 0 1px #6675ff33,0 25px 70px #0006}.pricing-card .price{color:#6675ff}
input:focus,select:focus,textarea:focus{outline:2px solid #6675ff90;outline-offset:3px;border-color:#6675ff}
.effects-paused .ambient-world *,.scene-paused .ambient-world *{animation-play-state:paused!important}
@keyframes ambient-breathe{from{transform:translate3d(-1.5%,-1%,0);opacity:.65}to{transform:translate3d(1.5%,2%,0);opacity:1}}
@media(max-width:760px){.ambient-light{animation:none;opacity:.65}.ambient-trace{display:none}.workspace-layout{gap:16px}.workspace-sidebar{border-radius:14px}.flow-hero .phone-stage{max-width:100%;box-sizing:border-box}.ambient-grid{display:none}}
@media(prefers-reduced-motion:reduce){.ambient-world *{animation:none!important}}

@media(max-width:760px){.flow-hero .phone-stage{justify-content:start;scroll-snap-type:x mandatory}.flow-hero .phone-column{scroll-snap-align:center}.signature-kicker{letter-spacing:1.5px;font-size:8px}.signature-kicker:before,.signature-kicker:after{width:20px;flex-shrink:0}}

/* Shared lightweight Posted outro: blur + spring pill, posting demos only. */
.posted-demo-host{position:relative}.gallery-video-screen.posted-demo-host{position:absolute;inset:2.5% 5.333%}.posted-demo-end{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(9,4,17,.42);backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s}.show-posted .posted-demo-end{opacity:1;visibility:visible}.posted-demo-pill{border:1px solid #6675ff;border-radius:99px;background:#192273;color:white;padding:14px 25px;font:600 clamp(16px,2vw,28px)/1.2 Arial,sans-serif;box-shadow:0 0 28px #5d6eff25;transform:translateY(18px) scale(.75)}.posted-demo-pill span{color:#6675ff;margin-right:10px}.show-posted .posted-demo-pill{animation:posted-pop .55s cubic-bezier(.2,1.5,.4,1) both}.posted-demo-end small{font:10px/1.2 Arial,sans-serif;letter-spacing:.08em;color:#d1d4ee}@keyframes posted-pop{to{transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.posted-demo-end{transition:none}.show-posted .posted-demo-pill{animation:none;transform:none}}

/* Trust / reach stats band — illustrative figures. */
.stats-band{margin:58px 0 0}
.stats-band-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:36px 0;border-top:1px solid #262529;border-bottom:1px solid #262529}
.stats-band .stat{text-align:center}
.stats-band .stat strong{display:block;font-size:46px;font-weight:600;letter-spacing:-2px;line-height:1;background:linear-gradient(180deg,#ffffff,#7682ef);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stats-band .stat span{display:block;font-size:13px;color:#e0e1e8;margin-top:13px;font-weight:500}
.stats-band .stat small{display:block;font-size:11px;color:#8a8792;margin-top:5px}
.stats-note{text-align:center;font-size:10px;color:#6f6c77;margin:15px 0 0;letter-spacing:.2px}
@media(max-width:760px){.stats-band-inner{grid-template-columns:1fr 1fr;gap:28px 14px;padding:30px 0}.stats-band .stat strong{font-size:35px}}

/* Platform-tabbed device gallery — replaces the long horizontal scroll. */
.platform-gallery{overflow:visible!important;margin:44px auto 8px!important;padding:0!important;scroll-snap-type:none!important;max-width:1120px}
.platform-tabs{display:flex;justify-content:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.platform-tab{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border-radius:99px;border:1px solid #2a2b30;background:#131418;color:#c0c1c9;font-size:13px;font-weight:500;cursor:pointer;transition:border-color .2s,color .2s,background .2s,box-shadow .2s}
.platform-tab:hover{border-color:#3a3d5a;color:#d9dbf0}
.platform-tab.active{background:linear-gradient(180deg,#1f223a,#131525);border-color:#7480f1;color:#6675ff;box-shadow:0 0 22px #7480f128}
.platform-tab i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 9px currentColor;flex:none}
.platform-tab em{font-style:normal;font-size:10px;opacity:.6;background:#ffffff16;border-radius:6px;padding:1px 6px;margin-left:2px}
.platform-panel{display:none}
.platform-panel.active{display:block;animation:panel-in .35s ease both}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.platform-panel-note{text-align:center;font-size:12px;color:#9495a1;max-width:560px;margin:4px auto 30px}
.platform-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 34px}
.platform-gallery .gallery-video-column{flex:0 0 210px;text-align:center}
.platform-gallery .gallery-video-column:nth-child(even){padding-top:0}
.gallery-meta{margin-top:15px}
.demo-metric{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.3px;color:#6675ff;background:#16182a;border:1px solid #35395a;border-radius:99px;padding:4px 12px}
.demo-metric.engage{color:#a7dcb6;background:#15241a;border-color:#37543f}
.platform-gallery .gallery-demo-label{margin:11px 0 0;font-size:12px}
@media(max-width:760px){.platform-cards{gap:28px 18px}.platform-gallery .gallery-video-column{flex-basis:150px}.platform-tab{padding:9px 15px;font-size:12px}.platform-panel-note{margin-bottom:22px}}

/* Dashboard reach sparkline — illustrative. */
.reach-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 22px;margin:0 0 23px;border:1px solid #27293a;border-radius:14px;background:linear-gradient(120deg,#131524,#0d0e17)}
.reach-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.reach-head .eyebrow{flex-basis:100%;margin-bottom:3px}
.reach-head strong{font-size:29px;font-weight:600;color:#6675ff;letter-spacing:-1px;text-shadow:0 0 26px #6573f21f}
.reach-head strong em{font-size:13px;font-style:normal;color:#9294a8;margin-left:5px;letter-spacing:0}
.reach-trend{font-size:12px;color:#8fdca7;background:#15251b;border:1px solid #33543e;border-radius:99px;padding:3px 10px;align-self:center}
.reach-spark{width:190px;height:44px;flex:none;display:block}
@media(max-width:760px){.reach-strip{flex-direction:column;align-items:flex-start;gap:14px}.reach-spark{width:100%}}
.platform-tab[data-platform="instagram"] i{background:#7a86eb}
.platform-tab[data-platform="tiktok"] i{background:#25f4ee}
.platform-tab[data-platform="snapchat"] i{background:#f7d000}

/* Ambient life — subtle premium motion (hero orbital scene). */
.starfield{animation:star-twinkle 7s ease-in-out infinite alternate}
@keyframes star-twinkle{from{opacity:.22}to{opacity:.5}}
.orbital-ring:after{animation:orbital-dot 4.5s ease-in-out infinite alternate}
@keyframes orbital-dot{from{opacity:.5;box-shadow:0 0 12px 3px #5d6eff66}to{opacity:1;box-shadow:0 0 26px 9px #5d6effb5}}
.rose-aura{animation-duration:16s}

/* Clean phone showcase — no per-card chrome. */
.motion-controls{display:none}
.platform-gallery .gallery-demo-label{margin:16px 0 0;font-size:13px;color:#e0e1e8}
.platform-cards{gap:44px 40px}

/* Live alerts — Notifications panel (illustrative). */
.alerts-panel{margin-top:26px;background:#17171b;border:1px solid #313239;border-radius:12px;padding:15px 16px 12px}
.alerts-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#c0c1cc;padding-bottom:11px;border-bottom:1px solid #292a32}
.alerts-head i{font-style:normal;background:#292b3b;color:#a4aadc;border-radius:99px;font-size:10px;padding:2px 8px}
.alert-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid #24222c}
.alert-row:last-of-type{border-bottom:0}
.alert-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex:none}
.alert-dot.warn{background:#e3be82;box-shadow:0 0 8px #e3be8266}
.alert-dot.ok{background:#8fdca7;box-shadow:0 0 8px #8fdca766}
.alert-dot.info{background:#7985ec;box-shadow:0 0 8px #7985ec66}
.alert-row b{display:block;font-size:11px;font-weight:500;color:#e7e8ee}
.alert-row small{display:block;font-size:9px;color:#9496a5;margin-top:3px}
.alerts-note{display:block;font-size:8px;color:#6f6c77;margin-top:9px;letter-spacing:.2px}

/* Pricing — Everything included. */
.included-list{max-width:660px;margin:44px auto 0;text-align:center}
.included-list h3{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#c0c1cc;margin:0 0 20px}
.included-list ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 26px;text-align:left}
.included-list li{font-size:12px;color:#adaeba;padding-left:23px;position:relative;line-height:1.5}
.included-list li:before{content:'✓';position:absolute;left:0;top:0;color:#7985ec;font-weight:700}
@media(max-width:640px){.included-list ul{grid-template-columns:1fr;gap:12px}}

/* Footer. */
.site-footer{padding:44px 0 18px;border-top:1px solid #262529;text-align:center;margin-top:20px}
.site-footer .footer-brand{font-size:17px;font-weight:600;color:#f4f4f6;letter-spacing:-.3px}
.site-footer .footer-brand .brand-mark{color:#7783ee}
.site-footer p{font-size:12px;color:#9495a1;margin:11px 0 0}
.site-footer small{display:block;font-size:10px;color:#6f6c77;margin-top:16px;letter-spacing:.2px}

/* Monitor & control — realistic live device view. */
.remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:0}
.remote-preview .remote-island{z-index:3}
.remote-preview .remote-home{z-index:3}
.remote-live{position:absolute;top:11px;left:10px;z-index:3;display:flex;align-items:center;gap:6px;font-size:8px;font-weight:600;letter-spacing:.4px;color:#fff;background:#000000b0;border-radius:99px;padding:4px 9px 4px 7px}
.remote-live .live-dot{width:6px;height:6px;border-radius:50%;background:#6675ff;box-shadow:0 0 8px #6675ff;animation:live-pulse 1.6s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.remote-tools span{position:relative}
.tall-feature{display:flex;flex-direction:column}
.tall-feature .remote-preview{margin-top:0;min-height:0;flex:1;align-items:center;justify-content:center;padding:18px 10px 22px}
.tall-feature .remote-device{width:216px;height:416px}

/* Brand mark (SVG star). */
.brand-mark{width:1.05em;height:1.05em;display:inline-block;vertical-align:-0.16em;margin-right:4px;filter:drop-shadow(0 0 5px #5968eb55)}
.site-header .brand{display:inline-flex;align-items:center;gap:1px}

/* Legal / contact pages. */
.legal-page{max-width:760px;margin:0 auto;padding:16px 0 40px}
.legal-page>.eyebrow{color:#7985ec}
.legal-page h1{font-size:clamp(32px,4.4vw,48px);font-weight:600;letter-spacing:-1.5px;margin:10px 0 0}
.legal-page .lead{font-size:15px;color:#a5a6af;margin:16px 0 0;max-width:640px}
.legal-body{margin-top:8px}
.legal-body h3{font-size:16px;font-weight:600;margin:28px 0 8px;color:#eeeef2}
.legal-body p{font-size:14px;line-height:1.8;color:#adaeba;margin:0}
.legal-body a{color:#7985ec}
.legal-body .small{color:#7d7a85;margin-top:26px}

.closing-cta .closing-star{display:inline-block;font-size:54px;line-height:0;margin-bottom:8px}
.closing-cta .closing-star .brand-mark{width:1.05em;height:1.05em;filter:drop-shadow(0 0 14px rgba(102,117,255,.42))}

/* Scroll-reveal + count-up + card hover (added for motion pass) */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1),border-color .3s ease,box-shadow .3s ease;will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.feature-card.reveal.in:hover,.howto-step.reveal.in:hover,.infrastructure-grid article.reveal.in:hover{transform:translateY(-5px);border-color:rgba(122,132,255,.42);box-shadow:0 20px 55px -26px rgba(96,110,235,.6)}
.stats-band .stat strong{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1!important;transform:none!important;transition:none}}

/* Track growth -> account table with trend sparkline */
.accounts-preview{margin-top:4px}
.accounts-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.accounts-head span{font-size:13px;font-weight:600;color:#eceaf2}
.accounts-head small{font-size:10.5px;color:#948fa6}
.accounts-table{display:flex;flex-direction:column}
.accounts-row{display:grid;grid-template-columns:2.05fr .82fr .72fr .92fr;align-items:center;gap:7px;padding:9px 8px;border-radius:10px}
.accounts-row+.accounts-row{border-top:1px solid rgba(255,255,255,.055)}
.accounts-row:not(.accounts-th):hover{background:rgba(122,132,255,.07)}
.accounts-th{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#8f8ca4;padding-bottom:2px}
.accounts-th span:not(:first-child){text-align:right}
.ap-acct{display:flex;align-items:center;gap:8px;min-width:0}
.ap-acct>i{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.ap-acct b{font-weight:600;font-size:12px;color:#eceaf2;display:flex;flex-direction:column;min-width:0;line-height:1.25;overflow:hidden;white-space:nowrap}
.ap-acct b small{font-weight:400;font-size:10.5px;color:#948fa6;text-overflow:ellipsis;overflow:hidden}
.ap-num{text-align:right;font-size:12.5px;font-weight:600;color:#dcdae6;font-variant-numeric:tabular-nums}
.ap-trend{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.ap-trend svg{width:40px;height:20px;overflow:visible}
.ap-trend polyline{fill:none;stroke:#7d88ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ap-trend em{font-style:normal;font-size:11.5px;font-weight:700;color:#63dd9a}
.ap-foot{display:block;margin-top:11px;font-size:11px;color:#948fa6}

/* Monitor & control -> device + vertical control rail */
.remote-stage{display:flex;align-items:center;justify-content:center;gap:14px}
.remote-preview .remote-tools{display:flex;flex-direction:column;gap:9px;margin:0}
.remote-preview .remote-tools span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:16px;line-height:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:#c7c4d4;transition:background .25s,border-color .25s,color .25s,transform .25s}
.remote-preview .remote-tools span:hover{background:rgba(122,132,255,.17);border-color:rgba(122,132,255,.42);color:#fff;transform:translateY(-1px)}

/* Self-hosted Montserrat for numbers (matches reference, CSP-safe 'self') */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/montserrat-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-700.woff2') format('woff2')}
.stats-band .stat strong,.price,.ap-num,.ap-trend em,.plan-price,.pricing-amount{font-family:'Montserrat',Inter,-apple-system,'system-ui','Segoe UI',sans-serif}
.stats-band .stat strong{font-weight:600;letter-spacing:-.035em}

/* Montserrat headings + slow silver sheen ("odsjaj") — trusted look */
.landing-hero h1,.landing-hero h1>span,.section-heading h2{font-family:'Montserrat',Inter,-apple-system,'system-ui','Segoe UI',sans-serif}
.landing-hero h1{font-weight:700;letter-spacing:-2.5px}
.section-heading h2{font-weight:600;letter-spacing:-1px}
.landing-hero h1>span{font-style:normal;font-weight:700;letter-spacing:-2.5px;text-shadow:none}
.landing-hero h1,.landing-hero h1>span,.section-heading h2{
  background-image:linear-gradient(100deg,#a3a6b6 0%,#a3a6b6 34%,#ffffff 50%,#a3a6b6 66%,#a3a6b6 100%);
  background-size:200% auto;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:head-sheen 8s ease-in-out infinite alternate}
.section-heading h2{animation-duration:9.5s}
@keyframes head-sheen{0%{background-position:0% center}100%{background-position:100% center}}
@media (prefers-reduced-motion:reduce){.landing-hero h1,.landing-hero h1>span,.section-heading h2{animation:none;background-position:center}}

/* Hero h1 sheen must beat brand.css animation:none!important; keep pause + reduced-motion honored */
.landing-hero.flow-hero h1,.landing-hero.flow-hero h1>span{animation:head-sheen 8s ease-in-out infinite alternate!important}
.effects-paused .landing-hero.flow-hero h1,.effects-paused .landing-hero.flow-hero h1>span,.motion-paused .landing-hero.flow-hero h1,.motion-paused .landing-hero.flow-hero h1>span{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.landing-hero.flow-hero h1,.landing-hero.flow-hero h1>span{animation:none!important}}

/* v24: silver headings — SOLID base layer (never disappears) + a thin white gleam that only passes over */
.landing-hero.flow-hero h1,.landing-hero.flow-hero h1>span,.section-heading h2{
  background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%),linear-gradient(180deg,#eceef6 0%,#bfc2d1 100%)!important;
  background-size:220% 100%,100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:0% center,center!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  animation:head-gleam 7s ease-in-out infinite alternate!important}
.section-heading h2{animation-duration:8.5s!important}
@keyframes head-gleam{from{background-position:0% center,center}to{background-position:100% center,center}}
.effects-paused .landing-hero.flow-hero h1,.effects-paused .landing-hero.flow-hero h1>span,.motion-paused .landing-hero.flow-hero h1,.motion-paused .landing-hero.flow-hero h1>span{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.landing-hero.flow-hero h1,.landing-hero.flow-hero h1>span,.section-heading h2{animation:none!important}}

/* Launch promo: banner + popup + inline pricing note */
.promo-banner{display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 40px 9px 16px;background:linear-gradient(90deg,#5b63e6,#7d3aed);color:#fff;font-size:13px;font-weight:500;text-align:center;position:relative;z-index:15}
.promo-banner[hidden]{display:none}
.promo-banner b{font-weight:700}
.promo-banner a{color:#fff;text-decoration:underline;font-weight:700;white-space:nowrap}
.promo-banner-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:19px;cursor:pointer;line-height:1;padding:4px;opacity:.85}
.promo-banner-x:hover{opacity:1}
.promo-pop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.promo-pop[hidden]{display:none}
.promo-backdrop{position:absolute;inset:0;background:rgba(4,4,10,.72);backdrop-filter:blur(5px)}
.promo-card{position:relative;max-width:400px;width:100%;background:linear-gradient(180deg,#16151d,#0e0d14);border:1px solid rgba(122,132,255,.3);border-radius:20px;padding:32px 28px 24px;text-align:center;box-shadow:0 30px 90px -20px rgba(70,60,180,.55);animation:promo-in .32s cubic-bezier(.2,.8,.3,1)}
@keyframes promo-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.promo-x{position:absolute;top:12px;right:14px;background:none;border:none;color:#8b88a0;font-size:22px;cursor:pointer;line-height:1}
.promo-x:hover{color:#fff}
.promo-eyebrow{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8b95ff;margin-bottom:12px}
.promo-card h3{font-size:24px;font-weight:700;margin:0 0 10px;font-family:'Montserrat',Inter,sans-serif;letter-spacing:-.5px;color:#f2f2f7}
.promo-card h3 b{color:#8b95ff}
.promo-card p{font-size:14px;line-height:1.6;color:#b3b1c0;margin:0 0 16px}
.promo-card p b{color:#eceaf2;font-weight:600}
.promo-code{display:inline-block;font-family:ui-monospace,monospace;font-size:13.5px;letter-spacing:1px;color:#dcdae6;background:rgba(122,132,255,.12);border:1px dashed rgba(122,132,255,.5);border-radius:9px;padding:8px 16px;margin-bottom:16px}
.promo-code b{color:#fff;letter-spacing:2px;font-weight:700}
.promo-card .button.primary{width:100%;justify-content:center}
.promo-card small{display:block;margin-top:12px;font-size:11px;color:#8b88a0;line-height:1.5}
.promo-inline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;background:rgba(122,132,255,.08);border:1px solid rgba(122,132,255,.22);border-radius:12px;padding:12px 18px;margin:0 auto 22px;max-width:660px;font-size:13.5px;color:#cfcedb;text-align:center}
.promo-inline b{color:#eceaf2;font-weight:600}
.promo-tag{background:#6E7BFF;color:#0b0c18;font-weight:800;font-size:11px;padding:3px 9px;border-radius:20px;letter-spacing:.5px}
.promo-inline-note{color:#8f8ca0;font-size:12px}

/* Solo S logo (wordmark removed) */
.brand-solo{font-size:0;gap:0}
.brand-solo .brand-mark{margin-right:0}
.site-header .brand-solo .brand-mark{width:30px;height:30px}
.footer-main .brand-solo .brand-mark{width:26px;height:26px}

/* Launch offer: CTA layout fix + attention animations */
.promo-code{display:block;width:fit-content;margin-left:auto;margin-right:auto}
.promo-card a.button.primary{display:flex;width:100%;box-sizing:border-box;justify-content:center;animation:promo-cta-pulse 2.2s ease-in-out infinite}
@keyframes promo-cta-pulse{0%{box-shadow:0 0 0 0 rgba(110,123,255,.5)}70%{box-shadow:0 0 0 10px rgba(110,123,255,0)}100%{box-shadow:0 0 0 0 rgba(110,123,255,0)}}
.promo-banner{overflow:hidden}
.promo-banner::after{content:"";position:absolute;top:0;left:-45%;height:100%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);pointer-events:none;animation:promo-shine 4.8s ease-in-out infinite}
@keyframes promo-shine{0%{left:-45%}55%{left:130%}100%{left:130%}}
.promo-tag{animation:promo-tag-pulse 2s ease-in-out infinite}
@keyframes promo-tag-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.promo-eyebrow{animation:promo-eyebrow-blink 2.4s ease-in-out infinite}
@keyframes promo-eyebrow-blink{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.promo-banner::after,.promo-card a.button.primary,.promo-tag,.promo-eyebrow{animation:none}}

/* Device Hub UI (workspace) */
.hub-status{display:inline-flex;align-items:center;gap:7px}
.hub-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.hub-dot.on{background:#63dd9a;box-shadow:0 0 8px #63dd9a99}
.hub-dot.off{background:#8b88a0}
.pair-code{display:flex;align-items:center;gap:12px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.pair-code code{font-size:19px;font-weight:700;letter-spacing:1px;background:rgba(122,132,255,.14);border:1px dashed rgba(122,132,255,.55);border-radius:10px;padding:9px 16px;color:#fff}