/* Tokens sampled from the SuiteFit app UI */
:root{
  color-scheme: dark;
  --bg:#0E1319; --deep:#0A0E13; --s1:#161C24; --s2:#1D252E; --line:#262F3A;
  --text:#EEF2F5; --muted:#8C98A5;
  --cyan:#22D3EE; --cyan-ink:#04222A;
  --teal-a:#14525C; --teal-b:#0D343D;
  --green:#34D98C; --green-bg:#11352A;
  --amber:#F5B83D; --amber-bg:#3A2E14;
  --red:#E57F77; --pink:#F4899A;
  --t-purple:#9984E9; --t-gold:#D3A649; --t-green:#2BBB8F; --t-cyan:#20BCD4; --t-pink:#DD8392; --t-slate:#9AA7B4;
  --font:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-lg:24px; --r-md:16px;
  --wrap:1360px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
svg{display:block}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
h1,h2,h3{margin:0;line-height:1.04;letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(2.1rem,4.3vw,3.5rem);max-width:17ch}
h3{font-size:1.5rem;font-weight:750;letter-spacing:-.02em}
p{margin:0}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:var(--cyan);color:var(--cyan-ink);padding:8px 14px;z-index:100}
.skip:focus{left:8px}
.ico{width:1em;height:1em;flex:none}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 1rem/1 var(--font);padding:16px 26px;border-radius:999px;text-decoration:none;transition:background .2s,border-color .2s}
.btn-primary{background:var(--cyan);color:var(--cyan-ink)}
.btn-primary:hover{background:#67E3F5}
.btn-ghost{background:var(--s1);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--cyan)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:650;padding:4px 9px;border-radius:999px;background:var(--s2);color:var(--text);white-space:nowrap;line-height:1.2}
.chip.ok{background:var(--green-bg);color:var(--green)}
.chip.wait{background:var(--amber-bg);color:var(--amber)}
.chip.live{background:rgba(34,211,238,.14);color:var(--cyan)}
.label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}

/* header */
.strip{background:var(--s1);border-bottom:1px solid var(--line);text-align:center;font-size:.9rem;color:var(--muted);padding:9px 16px}
.strip a{color:var(--cyan);font-weight:650;text-decoration:none}
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,19,25,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:32px;height:auto}
.brand .word{height:19px;width:auto}
.nav ul{list-style:none;margin:0;padding:0}
.nav>ul{display:flex;gap:2px;align-items:center}
.nav li{position:relative}
.nav a{display:block;text-decoration:none;padding:10px 14px;border-radius:999px;font-weight:550;font-size:.97rem;color:#C9D2DB}
.nav>ul>li>a:hover{background:var(--s1);color:var(--text)}
.nav .sub{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-md);padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.nav .sub::before{content:"";position:absolute;inset:-8px 0 auto;height:8px}
.nav li:hover>.sub,.nav li:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{border-radius:10px;color:var(--muted)}
.nav .sub a:hover{background:var(--s2);color:var(--text)}
.nav .nav-cta{background:var(--cyan);color:var(--cyan-ink);font-weight:700;margin-left:8px;padding:11px 20px}
.nav .nav-cta:hover{background:#67E3F5!important;color:var(--cyan-ink)!important}
.menu-toggle{display:none;background:var(--s1);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:9px 16px;font:650 .95rem var(--font)}

/* ---------- reusable app UI pieces ---------- */
.phone{position:relative;width:300px;height:640px;border-radius:46px;background:#1A2129;padding:9px;box-shadow:inset 0 0 0 1px #313B47}
.phone-screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:var(--bg);font-size:13px;line-height:1.35}
.status{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 0;font-size:12px;font-weight:700}
.status i{display:flex;gap:4px;align-items:center}
.status i b{display:block;width:16px;height:9px;border:1.5px solid var(--text);border-radius:3px;position:relative}
.status i b::after{content:"";position:absolute;inset:1px 4px 1px 1px;background:var(--text);border-radius:1px}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:14px;background:#000;z-index:3}
.scr-pad{padding:14px 18px}
.eyebrow{font-size:11px;color:var(--muted)}
.scr-h{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--s2);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.avatar.ring{box-shadow:0 0 0 1.5px var(--t-purple)}
.tabbar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:9px 6px 22px;background:var(--s1);border-top:1px solid var(--line);font-size:9.5px;color:var(--muted)}
.tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar svg{width:18px;height:18px}
.tabbar .on{color:var(--cyan)}
.tabbar .on svg{background:rgba(34,211,238,.16);border-radius:999px;padding:3px 14px;width:46px;height:24px}
.tile-teal{background:linear-gradient(160deg,var(--teal-a),var(--teal-b));border:1px solid rgba(34,211,238,.18)}
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-md)}

/* trainer photo card */
.tcard{--tone:var(--t-purple);position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;container-type:inline-size;
  background:linear-gradient(180deg,var(--tone) 0%,color-mix(in srgb,var(--tone) 35%,#0D343D) 42%,#0A1216 82%)}
.tcard .pt{position:absolute;left:50%;top:-1%;width:92%;transform:translateX(-50%)}
.tcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(10,18,22,.82) 72%,#0A1216 90%)}
.tcard .meta,.tcard .heart,.tcard .badge{z-index:1}
.avatar.pt-av{overflow:hidden;background:linear-gradient(180deg,var(--tone),#123a42)}
.avatar.pt-av svg{width:100%;height:100%}
.tcard .heart{position:absolute;top:7%;right:7%;width:15cqw;height:15cqw;min-width:22px;min-height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(10,14,19,.45);color:#fff}
.tcard .heart svg{width:50%;height:50%}
.tcard .heart.on{background:var(--pink);color:#3A0D16}
.tcard .badge{position:absolute;top:7%;left:7%;font-size:max(8px,6cqw)}
.tcard .meta{position:absolute;left:8%;right:8%;bottom:7%}
.tcard .nm{font-weight:750;font-size:max(11px,9cqw);letter-spacing:-.02em;line-height:1.15}
.tcard .rt{display:flex;align-items:center;gap:4px;font-size:max(9px,6.5cqw);margin-top:3px}
.tcard .rt svg{color:var(--amber);width:1em;height:1em}
.tcard .rt small{color:var(--muted);font-size:1em}
.tcard .row{display:flex;justify-content:space-between;align-items:baseline;margin-top:6%;font-size:max(8.5px,6cqw);color:#B9C4CF}
.tcard .row b{color:#fff;font-size:1.45em}
.tcard .row b small{font-size:.6em;color:#B9C4CF;font-weight:500}
.tone-purple{--tone:var(--t-purple)} .tone-gold{--tone:var(--t-gold)} .tone-green{--tone:var(--t-green)} .tone-cyan{--tone:var(--t-cyan)} .tone-pink{--tone:var(--t-pink)} .tone-slate{--tone:var(--t-slate)}

/* availability bars */
.win{padding:14px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line);margin-top:10px}
.win-top{display:flex;justify-content:space-between;align-items:center}
.win-top b{font-size:16px;letter-spacing:-.02em}
.bar{position:relative;height:22px;border-radius:7px;background:#11424B;border:1px solid rgba(34,211,238,.35);margin-top:10px;overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,#2C3540 0 4px,#1F262F 4px 8px)}
.bar.full{background:repeating-linear-gradient(135deg,#2C3540 0 4px,#1F262F 4px 8px);border-color:var(--line)}
.win small{display:block;font-size:10px;color:var(--muted);margin-top:6px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(60% 70% at 72% 40%,rgba(34,211,238,.13),transparent 70%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;min-height:calc(100vh - 115px);padding-block:56px}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:550;font-size:.95rem;background:var(--s1);border:1px solid var(--line);padding:7px 14px 7px 8px;border-radius:999px}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-bg)}
.hero h1{font-size:clamp(3rem,6.6vw,5.9rem);font-weight:850;letter-spacing:-.045em;line-height:.95;margin-top:26px}
.hero h1 .line{display:block}
.lede{margin-top:24px;font-size:1.17rem;color:#B9C4CF;max-width:46ch}
.choose{display:grid;gap:8px;margin-top:34px;max-width:470px}
.choose a{display:flex;align-items:center;gap:14px;text-decoration:none;padding:12px 16px 12px 12px;border-radius:18px;background:var(--s1);border:1px solid var(--line);transition:border-color .2s,background .2s}
.choose a:hover{border-color:var(--cyan)}
.choose .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--s2);color:var(--cyan)}
.choose .ic svg{width:20px;height:20px}
.choose .tx{flex:1;line-height:1.25}
.choose .tx b{display:block;font-size:1.02rem}
.choose .tx span{font-size:.86rem;color:var(--muted)}
.choose .chev{color:var(--muted);width:18px;height:18px}
.choose a.primary{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)}
.choose a.primary .ic{background:rgba(4,34,42,.14);color:var(--cyan-ink)}
.choose a.primary .tx span,.choose a.primary .chev{color:#0B4B57}
.choose a.primary:hover{background:#67E3F5}
.stores-line{display:flex;gap:16px;margin-top:22px;font-size:.9rem;color:var(--muted)}
.stores-line a{color:var(--text);font-weight:650;text-decoration:none;border-bottom:1px solid var(--line)}
.stores-line a:hover{border-color:var(--cyan)}

/* 3D app scene */
.stage{position:relative;height:720px;perspective:1700px;perspective-origin:50% 40%}
.rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1))}
.layer{position:absolute;left:0;top:0;transform-style:preserve-3d;
  transform:translate(-50%,-50%) translate3d(var(--x,0),var(--y,0),calc(var(--z,0px) * var(--spread,1)))}
.layer>.bob{animation:bob 6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes bob{50%{transform:translateY(-10px)}}
.phone-shadow{position:absolute;inset:30px -10px -30px;border-radius:50px;background:rgba(0,0,0,.55);filter:blur(30px);transform:translateZ(-60px)}
.float{border-radius:20px;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04)}
.f-trainer{width:176px}
.f-confirm{display:flex;align-items:center;gap:10px;padding:12px 16px 12px 12px;background:var(--s1);border:1px solid var(--line);border-radius:18px;font-size:13px;line-height:1.3;white-space:nowrap}
.f-confirm .ck{width:34px;height:34px;border-radius:50%;background:var(--green-bg);color:var(--green);display:grid;place-items:center}
.f-confirm small{color:var(--muted);display:block}
.f-msg{width:236px;padding:12px;background:var(--s1);border:1px solid var(--line);border-radius:20px;font-size:12.5px;line-height:1.35}
.f-msg .hd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.f-msg .hd small{color:var(--muted);margin-left:auto;font-size:10.5px}
.f-msg p{background:#11424B;border-radius:14px 14px 14px 4px;padding:9px 12px}
.f-bldg{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;background:var(--s1);border:1px solid var(--line);border-radius:16px;font-size:12.5px;line-height:1.3;white-space:nowrap}
.f-bldg .bi{width:32px;height:32px;border-radius:10px;background:var(--green-bg);color:var(--green);display:grid;place-items:center}
.f-bldg small{color:var(--muted);display:block}
.f-rate{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--s1);border:1px solid var(--line);border-radius:16px;font-size:13px;font-weight:650;white-space:nowrap}
.f-rate .stars{display:flex;gap:2px;color:var(--amber)}
.f-rate .stars svg{width:16px;height:16px}

/* home screen inside phone */
.next{margin:14px 14px 0;padding:14px;border-radius:20px}
.next .hd{display:flex;justify-content:space-between;align-items:center}
.next .when{font-size:20px;font-weight:800;letter-spacing:-.03em;margin-top:8px}
.next .sub{font-size:11px;color:#A9C3C8;margin-top:2px}
.next .who{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px}
.next .who b{flex:1}
.next .ft{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.1);margin-top:12px;padding-top:10px;font-size:10.5px;color:#A9C3C8}
.dots{display:flex;gap:4px;align-items:center}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.dots i.off{background:#3B4A52}
.pill-btn{font-size:11px;font-weight:650;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--text)}
.sec-h{display:flex;justify-content:space-between;align-items:center;margin:18px 18px 10px}
.sec-h b{font-size:15px;letter-spacing:-.02em}
.sec-h span{font-size:11.5px;color:var(--cyan);font-weight:650}
.hscroll{display:flex;gap:10px;padding-left:18px}
.hscroll .tcard{width:150px;flex:none}

/* load sequence (the one orchestrated moment) */
.hero .kicker,.hero h1 .line,.hero .lede,.hero .choose,.hero .stores-line{opacity:0;transform:translateY(18px);animation:rise .85s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .line:nth-child(1){animation-delay:.12s}
.hero h1 .line:nth-child(2){animation-delay:.24s}
.hero h1 .line:nth-child(3){animation-delay:.36s}
.hero .lede{animation-delay:.55s}
.hero .choose{animation-delay:.7s}
.hero .stores-line{animation-delay:.85s}
@keyframes rise{to{opacity:1;transform:none}}
.stage .layer{opacity:0;transition:opacity .9s ease}
.stage.ready .layer{opacity:1}
.stage.ready .layer:nth-child(2){transition-delay:.15s}
.stage.ready .layer:nth-child(3){transition-delay:.3s}
.stage.ready .layer:nth-child(4){transition-delay:.45s}
.stage.ready .layer:nth-child(5){transition-delay:.6s}
.stage.ready .layer:nth-child(6){transition-delay:.75s}

/* ---------- sections ---------- */
.band{padding-block:clamp(84px,11vw,150px)}
.band-tight{padding-block:clamp(64px,8vw,100px)}
.section-head p{margin-top:18px;max-width:54ch;color:var(--muted);font-size:1.15rem}

/* three wins */
.wins{list-style:none;margin:64px 0 0;padding:0;display:grid;gap:24px}
.win-row{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;padding:40px;border-radius:32px;background:var(--s1);border:1px solid var(--line);overflow:hidden}
.win-row:nth-child(even) .win-copy{order:2}
.step-dot{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cyan);color:var(--cyan-ink);font-weight:800;font-size:.9rem;margin-right:10px}
.win-copy .who{display:flex;align-items:center;font-weight:650;color:var(--cyan)}
.win-copy h3{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-.035em;margin-top:18px}
.win-copy p{margin-top:14px;color:var(--muted);max-width:44ch}
.win-copy .ctas{margin-top:26px}
.win-copy .btn{padding:13px 20px;font-size:.95rem}
.tilt{perspective:1400px}
.tilt-in{transform-style:preserve-3d;transform:rotateX(var(--tx,8deg)) rotateY(var(--ty,-12deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tilt-in>*{transform:translateZ(var(--lz,0))}


.bento{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px;margin-inline:auto;font-size:13px}
.bento .cash{grid-column:1/-1;padding:18px;border-radius:22px;--lz:50px}
.bento .cash .amt{font-size:34px;font-weight:850;letter-spacing:-.04em;margin-top:4px;line-height:1.1}
.bento .cash .row{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:11.5px;color:#A9C3C8}
.bento .cash .btns{display:flex;gap:8px;margin-top:14px}
.bento .cash .btns span{font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12)}
.bento .cash .btns span:first-child{background:#fff;color:#0E1319}
.bt{padding:16px;border-radius:20px;background:var(--bg);border:1px solid var(--line)}
.bt .n{font-size:30px;font-weight:850;letter-spacing:-.04em;margin-top:8px;line-height:1}
.bt small{display:block;color:var(--muted);font-size:11px;margin-top:6px}
.bt.hot{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan);--lz:30px}
.bt.hot small{color:#0B4B57}
.bt svg{width:18px;height:18px;color:var(--muted)}
.bt.hot svg{color:var(--cyan-ink)}

.prop{max-width:440px;margin-inline:auto;padding:18px;border-radius:26px;background:var(--bg);border:1px solid var(--line);font-size:13px}
.prop-top{display:flex;justify-content:space-between;align-items:center}
.prop-top b{font-size:18px;letter-spacing:-.02em}
.prop .share{margin-top:14px;padding:16px;border-radius:20px;--lz:40px}
.prop .share .amt{font-size:32px;font-weight:850;letter-spacing:-.04em;line-height:1.1;margin-top:4px}
.prop .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.prop .grid3 .bt{padding:12px}
.prop .grid3 .n{font-size:22px}
.prop .rowi{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--s1);border:1px solid var(--line);margin-top:8px;font-size:12px}
.prop .rowi b{flex:1}

/* partnership */
.partner{background:var(--deep);border-block:1px solid var(--line)}
.partner-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.lockup{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.lockup .lw{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:850;letter-spacing:-.04em}
.lockup .x{width:44px;height:44px;border-radius:50%;background:var(--s1);border:1px solid var(--line);display:grid;place-items:center;color:var(--cyan);font-weight:700}
.lockup img{height:56px;width:auto}
.lockup img.nrp{height:92px}
.partner h2{font-size:clamp(1.6rem,2.6vw,2.2rem);max-width:24ch}
.partner p{margin-top:16px;color:var(--muted);max-width:52ch}

/* how it works */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:40px}
.steps{list-style:none;margin:0;padding:0}
.step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .5s}
.step.is-active{opacity:1}
.step-num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--s1);border:1px solid var(--line);color:var(--muted);font-weight:800;margin-bottom:20px;transition:background .3s,color .3s}
.step.is-active .step-num{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
.step h3{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.035em}
.step p{margin-top:14px;color:var(--muted);max-width:42ch;font-size:1.1rem}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.store{display:inline-flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:9px 18px;line-height:1.2;background:var(--s1)}
.store small{color:var(--muted);font-size:.72rem}
.store b{font-size:1.05rem}
.store:hover{border-color:var(--cyan)}
.how-more{margin-top:24px}
.how-more a{color:var(--cyan);font-weight:650}
.phone-col{position:relative}
.phone-stage{position:sticky;top:12vh;height:76vh;display:grid;place-items:center;perspective:1400px}
.phone-fit{transform:scale(var(--fit,1));transform-origin:center}
.phone-3d{transform-style:preserve-3d;transform:rotateY(var(--ry,-14deg)) rotateX(var(--rx,6deg));transition:transform 1s cubic-bezier(.2,.7,.2,1);position:relative}
.phone-3d::before{content:"";position:absolute;inset:0;border-radius:46px;background:#06090C;transform:translateZ(-16px);box-shadow:40px 50px 80px rgba(0,0,0,.6)}
.scr{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .55s;padding-top:44px}
.phone[data-step="1"] .s1,.phone[data-step="2"] .s2,.phone[data-step="3"] .s3,.phone[data-step="4"] .s4,.phone[data-step="5"] .s5,.phone[data-step="6"] .s6{opacity:1;transform:none}
.viewfinder img{width:150px;height:150px;border-radius:10px;background:#fff;padding:6px}
.s1{padding-top:40px!important}
.s1 img{width:100%;height:auto}
.fchips{display:flex;gap:6px;margin-top:10px;overflow:hidden}
.fchips span{flex:none;font-size:10.5px;font-weight:650;padding:6px 10px;border-radius:999px;background:var(--s2);color:#C9D2DB}
.fchips span.on{background:#0E3B43;color:var(--cyan)}
.s2 .grid2{gap:8px;margin-top:10px}
.s2 .tcard .badge{font-size:8px;padding:3px 6px}
.viewfinder{margin:16px 18px;height:360px;border-radius:24px;background:linear-gradient(160deg,#1C3B44,#0F1C22);display:grid;place-items:center;position:relative}
.viewfinder::before{content:"";position:absolute;inset:18% 14%;border:3px solid var(--cyan);border-radius:18px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% 20% no-repeat,linear-gradient(#000 0 0) bottom/100% 20% no-repeat;
  mask:linear-gradient(#000 0 0) top/100% 20% no-repeat,linear-gradient(#000 0 0) bottom/100% 20% no-repeat}
.qr{width:150px;height:150px;image-rendering:pixelated;background:#fff;padding:8px;border-radius:10px}
.search{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 14px;border-radius:999px;background:var(--s1);border:1px solid var(--line);color:var(--muted);font-size:12px}
.seg{display:flex;margin-top:10px;padding:3px;border-radius:999px;background:var(--s1);border:1px solid var(--line);font-size:12px;font-weight:650;text-align:center}
.seg span{flex:1;padding:7px;border-radius:999px;color:var(--muted)}
.seg span.on{background:var(--s2);color:var(--text)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.days{display:flex;gap:6px;margin-top:12px}
.days span{flex:1;text-align:center;padding:7px 0;border-radius:12px;background:var(--s1);border:1px solid var(--line);font-size:9px;font-weight:700;color:var(--cyan);line-height:1.3}
.days span b{display:block;font-size:15px;color:var(--text)}
.days span.on{background:#11424B;border-color:var(--cyan)}
.days span.dim{color:var(--muted)}
.days span.dim b{color:var(--muted)}
.trow{display:flex;align-items:center;gap:10px}
.trow .tx{flex:1;line-height:1.3}
.trow .tx b{font-size:14px}
.trow .tx small{display:block;color:var(--muted);font-size:11px}
.sum{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line);margin-top:12px}
.datebox{width:46px;height:52px;border-radius:12px;background:#11424B;display:grid;place-items:center;text-align:center;font-size:9px;font-weight:700;color:var(--cyan);line-height:1.2;flex:none}
.datebox b{display:block;font-size:18px;color:var(--text)}
.due{margin-top:12px;padding:16px;border-radius:20px}
.due .amt{font-size:36px;font-weight:850;letter-spacing:-.04em;line-height:1.1;margin-top:4px}
.due .ln{display:flex;justify-content:space-between;font-size:11.5px;color:#A9C3C8;margin-top:8px}
.due .ln:first-of-type{border-top:1px solid rgba(255,255,255,.1);padding-top:10px;margin-top:12px}
.paybtn{position:absolute;left:16px;right:16px;bottom:42px;text-align:center;padding:14px;border-radius:999px;background:var(--cyan);color:var(--cyan-ink);font-weight:750;font-size:15px}
.payfoot{position:absolute;left:0;right:0;bottom:20px;text-align:center;font-size:10px;color:var(--muted)}
.live{margin-top:14px;padding:14px;border-radius:20px}
.prog{height:5px;border-radius:5px;background:rgba(255,255,255,.12);margin-top:12px;overflow:hidden}
.prog i{display:block;height:100%;width:55%;background:var(--cyan);border-radius:5px}
.code{display:flex;gap:8px;justify-content:center;margin-top:18px}
.code span{width:50px;height:62px;border-radius:14px;background:var(--s1);border:1px solid var(--line);display:grid;place-items:center;font-size:28px;font-weight:850}

/* explore + closing + footer */
/* ---------- bottom: resources + CTA ---------- */
.bottom{--accent:var(--cyan);--accent-soft:rgba(34,211,238,.12)}
.resources{padding-block:clamp(72px,9vw,112px) 0}
.resources h2{max-width:none}
.explore{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.explore a{display:flex;align-items:center;gap:18px;height:100%;padding:26px 24px 26px 26px;border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);text-decoration:none;transition:border-color .2s,background .2s}
.explore a:hover{border-color:rgba(34,211,238,.55);background:#18212A}
.explore .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.explore .ic svg{width:24px;height:24px}
.explore .tx{flex:1;min-width:0}
.explore h3{font-size:1.25rem;line-height:1.25}
.explore p{color:var(--muted);margin-top:4px;line-height:1.5}
.explore .go{width:22px;height:22px;flex:none;color:var(--muted);transition:transform .2s,color .2s}
.explore a:hover .go{color:var(--accent);transform:translateX(3px)}
.cta-sec{padding-block:72px clamp(72px,9vw,112px)}
.cta-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:center;padding:52px 56px;border-radius:32px;background:#0F1B22;border:1px solid rgba(34,211,238,.22)}
.cta-panel .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.cta-panel h2{margin-top:12px;max-width:20ch;font-size:clamp(2rem,3.6vw,3.1rem)}
.cta-panel .sub{margin-top:14px;max-width:46ch;font-size:1.08rem;line-height:1.6;color:#B9C4CF}
.cta-panel .ctas{margin-top:28px}
.btn-accent,.btn-outline{min-height:52px;padding:0 26px}
.btn-accent{background:var(--accent);color:#04222A}
.btn-accent:hover{background:#67E3F5}
.btn-outline{background:transparent;border:1px solid #33404C;color:var(--text)}
.btn-outline:hover{border-color:var(--accent)}
.talk{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-left:48px;border-left:1px solid var(--line)}
.talk h3{font-size:1.25rem;line-height:1.3}
.talk ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.talk a{display:flex;align-items:center;gap:14px;padding:6px 0;text-decoration:none;color:var(--text)}
.talk .ci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.talk .ci svg{width:19px;height:19px}
.talk small{display:block;font-size:.76rem;color:var(--muted);line-height:1.3}
.talk b{font-weight:650;font-size:1.02rem;transition:color .2s}
.talk a:hover b{color:var(--accent)}
@media (max-width:1100px){ .explore{grid-template-columns:1fr} }
@media (max-width:980px){
  .cta-sec{padding-top:56px}
  .cta-panel{grid-template-columns:1fr;gap:32px;padding:40px 32px}
  .talk{padding-left:0;border-left:0;padding-top:28px;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .explore a{flex-wrap:wrap;align-items:center;padding:20px;gap:14px}
  .explore .ic{width:46px;height:46px}
  .explore .go{margin-left:auto}
  .explore .tx{order:3;flex-basis:100%}
  .cta-panel{padding:32px 22px;border-radius:24px}
  .cta-panel .ctas .btn{flex:1 1 100%}
}
footer{background:var(--deep);border-top:1px solid var(--line);padding:72px 0 40px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.foot-grid h4{font-size:1rem;margin:0 0 14px;font-weight:750}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-grid a{color:var(--muted);text-decoration:none}
.foot-grid a:hover{color:var(--text)}
.tagline{color:var(--muted);margin-top:16px;max-width:30ch}
.legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}


/* ---------- featured NRP partnership ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.nrp{position:relative;overflow:hidden;background:var(--deep);border-block:1px solid var(--line);padding:clamp(80px,10vw,130px) 0 0;text-align:center}
.nrp-bg{position:absolute;inset:0;pointer-events:none}
.aur{position:absolute;width:56vw;max-width:820px;aspect-ratio:1;border-radius:50%;filter:blur(90px);opacity:.38;animation:drift 16s ease-in-out infinite alternate}
.aur.a1{background:#22D3EE;left:-14%;top:-30%}
.aur.a2{background:#6D5BD0;right:-16%;top:-10%;animation-delay:-6s;opacity:.32}
.aur.a3{background:#0F766E;left:28%;bottom:-40%;animation-delay:-11s}
@keyframes drift{to{transform:translate(6%,8%) scale(1.12)}}
.nrp::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask:radial-gradient(70% 60% at 50% 40%,#000,transparent);pointer-events:none}
.nrp-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.nrp-chip{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:.92rem;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(22,28,36,.7);border:1px solid var(--line)}
.nrp-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(52,217,140,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(52,217,140,0)}100%{box-shadow:0 0 0 0 rgba(52,217,140,0)}}
.nrp-lock{margin-top:34px;width:min(760px,100%)}
.nrp .lock-card{--tx:0deg;--ty:0deg;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;padding:40px 48px;border-radius:32px;background:rgba(18,24,31,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 40px 80px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.07)}
.nrp .lock-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 62%,#22D3EE 80%,#9984E9 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 5s linear infinite;pointer-events:none}
@keyframes spin{to{--ang:360deg}}
.nrp .lock-card .lt{display:flex;align-items:center;justify-content:center;gap:14px;opacity:0;transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.nrp .lock-card .lt-sf{transform:translateX(-50px) translateZ(40px)}
.nrp .lock-card .lt-nrp{transform:translateX(50px) translateZ(40px)}
.nrp .lock-card .lt-sf img:first-child{width:62px;height:auto}
.nrp .lock-card .lt-sf .lw{height:24px;width:auto}
.nrp .lock-card .lt-nrp img{height:118px;width:auto}
.nrp .lock-card .beam{position:relative;width:120px;height:2px;background:linear-gradient(90deg,rgba(34,211,238,.1),rgba(34,211,238,.8),rgba(153,132,233,.8),rgba(153,132,233,.1));transform:scaleX(0) translateZ(20px);transition:transform 1s .5s cubic-bezier(.2,.7,.2,1)}
.nrp .lock-card .beam span{position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px rgba(34,211,238,.8);animation:travel 2.4s ease-in-out infinite alternate}
@keyframes travel{to{left:calc(100% - 10px)}}
.nrp.in .lock-card .lt{opacity:1;transform:translateZ(40px)}
.nrp.in .lock-card .beam{transform:scaleX(1) translateZ(20px)}
.nrp h2{margin:48px auto 0;max-width:20ch;font-size:clamp(2.1rem,4.4vw,3.6rem)}
.nrp-lead{margin:18px auto 0;max-width:56ch;color:#B9C4CF;font-size:1.15rem}
.nrp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(920px,100%);margin:48px 0 0}
.nrp-stats div{padding:22px 16px;border-radius:20px;background:rgba(22,28,36,.66);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nrp-stats dt{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:850;letter-spacing:-.04em;line-height:1;color:var(--text)}
.nrp-stats dd{margin:8px 0 0;color:var(--muted);font-size:.92rem;line-height:1.35}
.nrp-src{margin-top:16px;font-size:.8rem;color:var(--muted)}
.sky{position:relative;z-index:1;display:block;width:100%;height:clamp(140px,18vw,260px);margin-top:56px}
.sky .b{fill:#0F1B22}
.sky .w{fill:#15252D}
.sky .l{fill:#22D3EE;opacity:.15;animation:twk 6s ease-in-out infinite}
@keyframes twk{50%{opacity:.85}}

/* ---------- how it works: sub-steps ---------- */
.step{min-height:0;opacity:1;display:block}
.sb{min-height:66vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .5s}
.sb.is-active{opacity:1}
.step.is-active .step-num{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
.sb.sub{min-height:52vh;margin-left:19px;padding-left:28px;border-left:2px solid var(--line);transition:opacity .5s,border-color .5s}
.sb.sub.is-active{border-color:var(--cyan)}
.subhead{display:flex;align-items:center;gap:12px;margin-top:22px}
.sb.sub .subhead{margin-top:0}
.subhead h4{margin:0;font-size:1.45rem;font-weight:750;letter-spacing:-.025em;line-height:1.15}
.subhead .chip{font-size:.75rem}
.sb .subhead+p{margin-top:10px}
.phone[data-screen="1"] .s1,.phone[data-screen="2"] .s2,.phone[data-screen="3"] .s3,.phone[data-screen="4"] .s4,.phone[data-screen="5"] .s5,.phone[data-screen="6"] .s6,.phone[data-screen="7"] .s7{opacity:1;transform:none}
.win-top b,.pend .when{white-space:nowrap}
.sumbar>div{min-width:0}
.hdr{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:10px}
.hdr .back{transform:rotate(180deg);width:16px;height:16px}
.hdr>span,.hdr>svg{width:16px}
.x-ico{font-size:20px;line-height:1;color:var(--text)}
/* profile */
.prof{padding-top:0!important}
.prof-hero{position:relative;height:300px;background:linear-gradient(180deg,#8E7BE0 0%,#3F3A78 45%,#123A42 100%);overflow:hidden}
.prof-hero .pt{position:absolute;left:50%;top:26px;width:72%;transform:translateX(-50%);opacity:.92}
.prof-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(14,19,25,.9) 78%,var(--bg))}
.rb{position:absolute;top:44px;width:32px;height:32px;border-radius:50%;background:rgba(10,14,19,.55);display:grid;place-items:center;z-index:2}
.rb svg{width:15px;height:15px}
.rb.back{left:14px}.rb.back svg{transform:rotate(180deg)}
.rb.fav{right:14px;color:var(--pink)}
.prof-meta{position:absolute;left:16px;right:16px;bottom:12px;z-index:2}
.prof-meta .nm{font-size:24px;font-weight:800;letter-spacing:-.03em}
.prof-meta .rt{display:flex;align-items:center;gap:4px;font-size:12px;margin:2px 0 8px}
.prof-meta .rt svg{width:13px;height:13px;color:var(--amber)}
.prof-meta .rt small{color:#C9D2DB;font-size:12px}
.tags{display:flex;gap:6px;margin-top:6px}
.prof-body{padding-top:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.two .bt{padding:12px}
.two .n{font-size:26px;margin-top:6px}
.two .bt svg{color:var(--cyan)}
.about{margin-top:8px;padding:12px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line);font-size:11.5px;color:#B9C4CF;line-height:1.45}
.about b{color:var(--text);font-size:14px}
.about p{margin-top:6px}
.cta-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:12px 14px 24px;background:var(--s1);border-top:1px solid var(--line)}
.cta-bar .cb{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.cta-bar .cb svg{width:17px;height:17px}
.cta-bar .main{flex:1;display:grid;place-items:center;border-radius:999px;background:#0E3B43;font-weight:750;font-size:14px}
/* pick time */
.bar em{position:absolute;top:2px;bottom:2px;background:var(--cyan);border-radius:5px}
.legend{display:flex;gap:10px;margin-top:8px;font-size:9.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:4px}
.legend i{width:9px;height:9px;border-radius:3px;display:block}
.lg-o{background:#11424B;border:1px solid rgba(34,211,238,.35)}
.lg-b{background:repeating-linear-gradient(135deg,#2C3540 0 2px,#1F262F 2px 4px)}
.lg-y{background:var(--cyan)}
.lbl{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:13px}
.lbl small{font-size:10px;color:var(--muted)}
.tchips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.tchips.three{grid-template-columns:repeat(3,1fr)}
.tchips span{text-align:center;padding:8px 0;border-radius:999px;background:var(--s2);font-size:11.5px;font-weight:650}
.tchips span.on{background:#0E3B43;box-shadow:inset 0 0 0 1.5px var(--cyan)}
.tchips span.x{color:#56616D;text-decoration:line-through;background:var(--s1)}
.sumbar{position:absolute;left:12px;right:12px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border-radius:20px}
.sumbar .amt{font-size:24px;font-weight:850;letter-spacing:-.03em;line-height:1.1}
.sumbar small{font-size:9.5px;color:#9FE8F4}
.wbtn{background:#fff;color:#0E1319;font-weight:750;font-size:12.5px;padding:10px 16px;border-radius:999px;white-space:nowrap}
/* sent */
.sent{text-align:center}
.bigcheck{width:76px;height:76px;margin:6px auto 12px;border-radius:50%;border:3px solid var(--green);display:grid;place-items:center;color:var(--green);background:rgba(52,217,140,.08)}
.bigcheck svg{width:40px;height:40px}
.sent .scr-h{font-size:22px}
.sent .small{font-size:11.5px;color:#B9C4CF;margin-top:6px;line-height:1.45}
.pend{text-align:left;margin-top:14px;padding:14px;border-radius:18px}
.pend .when{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:8px}
.pend small{font-size:10.5px;color:#A9C3C8}
.two-btn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.two-btn span{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:999px;border:1px solid var(--line);font-size:11.5px;font-weight:650}
.paybtn.dark{background:#0E3B43;color:var(--text)}
/* live */
.livecard{padding:14px;border-radius:20px}
.livecard .label{font-size:9px}
.lc-mid{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.timer{font-size:38px;font-weight:850;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.lc-mid small{font-size:10px;color:#A9C3C8}
.ring{width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--cyan) 55%,rgba(255,255,255,.12) 0);display:grid;place-items:center}
.ring span{width:46px;height:46px;border-radius:50%;background:#0F3C46;display:grid;place-items:center;font-size:12px;font-weight:800}
.lc-who{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);font-size:10.5px}
.lc-who .avatar{width:24px;height:24px}
.lc-who span:nth-child(2){flex:1}
.codebox{margin-top:12px;padding:16px 14px;border-radius:20px;text-align:center;background:linear-gradient(160deg,#103C44,#0B2A31);box-shadow:inset 0 0 0 1.5px rgba(34,211,238,.5)}
.codebox .label{color:#A9C3C8}
.codebox .code{margin-top:12px}
.codebox .code span{background:transparent;border:1.5px solid rgba(255,255,255,.75);border-radius:12px;width:46px;height:54px;font-size:24px}
.codebox p{font-size:11px;color:#B9C4CF;margin-top:12px;line-height:1.45}
.fine{font-size:10px;color:var(--muted);margin-top:10px;line-height:1.4}

.ln{display:block}


/* ---------- hero visuals ---------- */
.hero{background:var(--bg)}
.hero-grid{position:relative;z-index:1;grid-template-columns:1.08fr .92fr}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(3rem,4.7vw,5rem);line-height:.98;font-style:normal}
.hero h1 .line{white-space:nowrap}
.hero h1 .accent{color:var(--cyan)}
.choose a{padding:14px 18px 14px 14px}
.choose .ic{width:44px;height:44px}
.stores-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.stores-line>span{color:var(--muted);font-size:.95rem}
.sbadge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 12px;border-radius:11px;background:#000;border:1px solid #5A636D;text-decoration:none;line-height:1.05;transition:border-color .2s}
.sbadge:hover{border-color:var(--cyan)}
.sbadge svg{width:24px;height:24px;color:#fff}
.sbadge small{display:block;font-size:.66rem;color:#E6EAEE}
.sbadge b{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.ph-brand{display:flex;align-items:center;gap:6px;padding:12px 18px 0}
.ph-brand img{width:20px;height:auto}
.ph-brand img.w{width:auto;height:13px}
.ph-brand .bell{width:18px;height:18px;margin-left:auto;color:var(--text)}
.avatar.big{width:44px;height:44px}
.next .who b{display:flex;flex-direction:column;line-height:1.25}
.next .who b small{font-weight:500;color:#A9C3C8}
.hscroll{overflow:hidden}
.hscroll .tcard{width:132px}
.f-trainer{width:196px}

.wins-head h2{font-size:clamp(2.6rem,5.2vw,4.6rem);letter-spacing:-.04em;line-height:1}
.wins-head p{font-size:1.2rem}


/* ---------- three wins: equal heights + fuller copy ---------- */
.win-row{gap:56px;padding:48px;align-items:stretch}
.win-copy{display:flex;flex-direction:column;justify-content:center}
.win-copy .who{font-size:1.08rem}
.win-copy .step-dot{width:34px;height:34px;font-size:1rem}
.win-copy h3{font-size:clamp(2.2rem,3.5vw,3.4rem);margin-top:20px;line-height:1.04}
.win-copy p{font-size:1.2rem;line-height:1.65;margin-top:20px;max-width:44ch}
.perks{margin-top:28px;gap:10px}
.perks li{font-size:1rem;padding:10px 16px}
.perks svg{width:16px;height:16px}
.win-copy .ctas{margin-top:34px}
.win-copy .btn{padding:16px 26px;font-size:1.02rem}
.viz{display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:660px}
.viz>.cmp,.viz>.kpis,.viz>.legend{margin-top:0}
.route-list{border-top:1px solid var(--line);padding-top:12px}
.rl-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.rl-h b{font-size:.95rem}
.rl-h span{font-size:.82rem;color:var(--muted)}
.route-list ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.route-list li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.route-list .rl-t{font-size:.8rem;font-weight:700;color:var(--cyan);flex:none;white-space:nowrap}
.route-list .rl-b{flex:1;line-height:1.25}
.route-list .rl-b b{font-size:.92rem}
.route-list .rl-b small{display:block;font-size:.76rem;color:var(--muted)}
.route-list .rl-s{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--green-bg);color:var(--green)}
.route-list .rl0{animation:rl0 11.0s linear infinite}@keyframes rl0{0%,9.5%{background:var(--bg);border-color:var(--line)}10.1%,25.2%{background:#0E2A31;border-color:rgba(34,211,238,.55)}27.2%,100%{background:var(--bg);border-color:var(--line)}}
.route-list .rl1{animation:rl1 11.0s linear infinite}@keyframes rl1{0%,35.7%{background:var(--bg);border-color:var(--line)}36.3%,51.4%{background:#0E2A31;border-color:rgba(34,211,238,.55)}53.4%,100%{background:var(--bg);border-color:var(--line)}}
.route-list .rl2{animation:rl2 11.0s linear infinite}@keyframes rl2{0%,56.3%{background:var(--bg);border-color:var(--line)}56.9%,72.0%{background:#0E2A31;border-color:rgba(34,211,238,.55)}74.0%,100%{background:var(--bg);border-color:var(--line)}}
.route-list .rl3{animation:rl3 11.0s linear infinite}@keyframes rl3{0%,80.5%{background:var(--bg);border-color:var(--line)}81.1%,96.2%{background:#0E2A31;border-color:rgba(34,211,238,.55)}98.2%,100%{background:var(--bg);border-color:var(--line)}}
@media (max-width:560px){ .route-list ol{grid-template-columns:1fr} }
@media (max-width:980px){
  .win-row{padding:28px;gap:32px}
  .viz{min-height:0}
  .win-copy p{font-size:1.08rem}
}
@media (max-width:700px){
  .win-row{padding:22px}
  .win-copy h3{font-size:6.2vw}
  .perks li{font-size:.9rem;padding:8px 13px}
}

/* responsive */
@media (max-width:980px){
  .menu-toggle{display:block}
  .nav{position:absolute;top:72px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);display:none;max-height:calc(100vh - 72px);overflow:auto}
  .nav.open{display:block}
  .nav>ul{flex-direction:column;align-items:stretch;padding:12px 24px 24px;gap:0}
  .nav .sub{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0 0 8px 12px}
  .nav .nav-cta{margin:12px 0 0;text-align:center}
  .win-row{grid-template-columns:1fr;gap:36px;padding:28px}
  .win-row:nth-child(even) .win-copy{order:0}
  .partner-grid{grid-template-columns:1fr;gap:36px}
  .sb{min-height:55vh}
  .sb.sub{min-height:45vh}
  .nrp-stats{grid-template-columns:1fr 1fr}
  .how-grid{grid-template-columns:1fr;gap:0}
  .phone-col{order:-1;position:sticky;top:72px;z-index:2;background:linear-gradient(180deg,var(--bg) 82%,rgba(14,19,25,0))}
  .phone-stage{position:relative;top:0;height:340px}
  .phone-fit{--fit:.48}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .nrp .lock-card{grid-template-columns:1fr;padding:32px 24px;gap:22px}
  .nrp .lock-card .beam{width:2px;height:60px;margin:0 auto;background:linear-gradient(180deg,rgba(34,211,238,.1),rgba(34,211,238,.8),rgba(153,132,233,.8),rgba(153,132,233,.1));transform:scaleY(0)}
  .nrp.in .lock-card .beam{transform:scaleY(1)}
  .nrp .lock-card .beam span{left:50%!important;margin-left:-5px;top:0;animation:travelv 2.4s ease-in-out infinite alternate}
  .nrp .lock-card .lt-nrp img{height:96px}
}
@keyframes travelv{to{top:calc(100% - 10px)}}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .prop .grid3{grid-template-columns:1fr 1fr}
  .phone-stage{height:300px}
  .phone-fit{--fit:.42}
}


/* ---------- three wins: animated benefit illustrations ---------- */
.win-row{align-items:center}
.perks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.perks li{display:flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;padding:8px 13px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.perks svg{width:14px;height:14px;color:var(--green)}
.viz{position:relative;border-radius:24px;padding:16px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 80% at 70% 0%,rgba(34,211,238,.08),transparent 60%),linear-gradient(160deg,#121A22,#0B1117)}
.viz .art{display:block;width:100%;height:auto}
.viz text{font-family:var(--font)}
.viz:not(.play) *,.viz:not(.play) *::before{animation-play-state:paused}

/* 1 residents: elevator story (12s) */
.r1-sky rect{fill:#141C24}
.r1-bldg{fill:#151D26;stroke:#2A3541;stroke-width:1.5}
.r1-floors path{stroke:#232D38;stroke-width:1.5}
.r1-win rect{fill:#1C2731}
.r1-win rect.lit{fill:rgba(34,211,238,.18)}
.r1-win rect.home{fill:#F5B83D;filter:drop-shadow(0 0 8px rgba(245,184,61,.6))}
.r1-win rect.gymw{fill:rgba(34,211,238,.35)}
.r1-win rect.lobw{fill:#22303B}
.r1-lobby{fill:#18242E}
.r1-doorway{fill:#0F161C;stroke:#2A3541;stroke-width:2}
.r1-gym{fill:#0F2F35}
.r1-glow{fill:rgba(34,211,238,.4);filter:blur(10px);opacity:.15;animation:r1glow 12s ease infinite}
.r1-rack rect,.r1-rack circle{fill:#4A5661}
.r1-shaft{fill:#0B1117;stroke:#2A3541;stroke-width:1.5}
.r1-cable{stroke:#1E2832;stroke-width:1.5}
.r1-car{animation:r1car 12s cubic-bezier(.45,0,.25,1) infinite}
.r1-box{fill:rgba(34,211,238,.1);stroke:#22D3EE;stroke-width:2}
.r1-door{fill:rgba(34,211,238,.28);transform-box:fill-box;animation:r1door 12s ease infinite}
.r1-door.l{transform-origin:left center}.r1-door.r{transform-origin:right center}
.r1-rider{animation:r1rider 12s ease infinite}
.r1-cartr{opacity:0;animation:r1cartr 12s ease infinite}
.r1-ltr{animation:r1ltr 12s ease infinite}
.r1-gp{opacity:0;animation:r1gp 12s ease infinite}
.r1-arm path{stroke:#22D3EE;stroke-width:4;stroke-linecap:round}
.r1-arm rect{fill:#8C98A5}
.r1-arm{transform-box:view-box;transform-origin:268px 168px;animation:r1curl 1.1s ease-in-out infinite alternate}
.r1-pulse{fill:none;stroke:#F4899A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;animation:r1pulse 1.4s linear infinite}
.r1-chip{opacity:0}
.r1-chip.a{animation:r1chipa 12s ease infinite}
.r1-chip.b{animation:r1chipb 12s ease infinite}
.r1-chip rect{fill:#11352A;stroke:rgba(52,217,140,.5)}
.r1-chip.b circle{fill:#34D98C;animation:r1blink 1s ease infinite}
.r1-chip text{font-size:11px;font-weight:700;fill:#34D98C}
.r1-guide{stroke:#2A3541;stroke-width:2;stroke-dasharray:4 5}
.r1-dot{fill:var(--cyan);animation:r1car 12s cubic-bezier(.45,0,.25,1) infinite}
.r1-t{font-size:12px;font-weight:700;fill:#EEF2F5}
.r1-t.c{fill:var(--cyan)}
.r1-s{font-size:10.5px;font-weight:600;fill:#8C98A5}
@keyframes r1car{0%,8%{transform:translateY(0)}28%,42%{transform:translateY(240px)}58%,100%{transform:translateY(120px)}}
@keyframes r1door{0%,5%{transform:scaleX(.08)}8%,28%{transform:scaleX(1)}31%,39%{transform:scaleX(.08)}42%,58%{transform:scaleX(1)}61%,100%{transform:scaleX(.08)}}
@keyframes r1rider{0%,60%{opacity:1}63%,100%{opacity:0}}
@keyframes r1cartr{0%,33%{opacity:0}36%,60%{opacity:1}63%,100%{opacity:0}}
@keyframes r1ltr{0%,30%{opacity:1;transform:none}34%{opacity:0;transform:translateX(-46px)}35%,100%{opacity:0;transform:translateX(-46px)}}
@keyframes r1gp{0%,60%{opacity:0;transform:translateX(-24px)}66%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r1chipa{0%,29%{opacity:0;transform:translateY(6px)}33%,44%{opacity:1;transform:none}48%,100%{opacity:0}}
@keyframes r1chipb{0%,66%{opacity:0;transform:translateY(6px)}71%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r1glow{0%,58%{opacity:.15}66%,95%{opacity:.95}100%{opacity:.15}}
@keyframes r1curl{from{transform:rotate(0)}to{transform:rotate(-55deg)}}
@keyframes r1pulse{from{stroke-dashoffset:60}to{stroke-dashoffset:-60}}
@keyframes r1blink{50%{opacity:.3}}
.cmp{display:grid;gap:8px;margin-top:12px}
.cmp-row{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.cmp-row .ci{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.cmp-row .ci svg{width:19px;height:19px}
.cmp-row .ct{flex:1;line-height:1.3}
.cmp-row b{display:block;font-size:.95rem}
.cmp-row small{color:var(--muted);font-size:.82rem}
.cmp-row .cx{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;flex:none}
.cmp-row .cx svg{width:14px;height:14px}
.cmp-row.off{opacity:.62}
.cmp-row.off .ci{background:var(--s2);color:var(--muted)}
.cmp-row.off b{text-decoration:line-through;text-decoration-color:rgba(229,127,119,.7)}
.cmp-row.off .cx{background:rgba(229,127,119,.14);color:var(--red)}
.cmp-row.on{border-color:rgba(34,211,238,.45);background:#0E2A31}
.cmp-row.on .ci{background:#11424B;color:var(--cyan)}
.cmp-row.on .cx{background:var(--green-bg);color:var(--green)}

/* 2 trainers */
.v2-bg{fill:#0E151C}
.v2-grid path{stroke:#16202A;stroke-width:1}
.v2-road{stroke:#1D2A35;stroke-width:8;fill:none}
.v2-river{fill:#0F2D36}
.v2-park{fill:#10291F}
.v2-area{fill:rgba(34,211,238,.05);stroke:rgba(34,211,238,.4);stroke-width:1.5;stroke-dasharray:5 6}
.v2-al{font-size:11px;font-weight:600;fill:#7FD9E8}
.v2-route{fill:none;stroke:rgba(34,211,238,.55);stroke-width:2.5;stroke-dasharray:7 7;stroke-linejoin:round;animation:v2flow 1.2s linear infinite}
@keyframes v2flow{to{stroke-dashoffset:-14}}
.v2-bx{fill:#161E27;stroke:#2A3541;stroke-width:2}
.v2-w{fill:rgba(34,211,238,.28)}
.v2-n{font-size:10.5px;font-weight:600;fill:#B9C4CF}
.v2-badge rect{fill:#11352A;stroke:rgba(52,217,140,.55)}
.v2-badge text{font-size:10.5px;font-weight:700;fill:#34D98C}
.v2-home circle{fill:#1D252E;stroke:#F5B83D;stroke-width:2}
.v2-home path{fill:#F5B83D}
.v2-home text{font-size:11px;font-weight:700;fill:#F5B83D}
.v2-trainer .ring{fill:#22D3EE;filter:drop-shadow(0 0 9px rgba(34,211,238,.85))}
.v2-trainer .bgc{fill:#5D6B78}
.v2-trainer .tag{fill:#0E1319;stroke:#22D3EE;stroke-width:1.5}
.v2-trainer .tagi{stroke:#22D3EE;stroke-width:1.4;stroke-linecap:round}
.lg-tr{background:#22D3EE;box-shadow:0 0 0 2px rgba(34,211,238,.3)}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:.85rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{display:block;width:14px;height:14px;border-radius:50%}
.lg-home{border:2px solid #F5B83D}
.lg-bldg{border-radius:4px!important;border:2px solid #22D3EE}
.lg-route{height:0!important;width:18px!important;border-radius:0!important;border-top:2.5px dashed #22D3EE}

/* 3 property managers: amenity -> engagement -> retention & tours -> revenue (12s) */
.p3-ground{fill:#0D141A}
.p3-bldg{fill:#151D26;stroke:#2A3541;stroke-width:1.5}
.p3-units rect{fill:#1C2731}
.p3-lit rect{fill:rgba(34,211,238,.32);opacity:0}
.p3-door{fill:#0B1117;stroke:#2A3541;stroke-width:2}
.p3-gym{fill:#0C1419;stroke:#2A3541;stroke-width:2}
.p3-gymlit{fill:#0F3A42;opacity:0;animation:p3on 12s ease infinite}
.p3-equip rect,.p3-equip circle{fill:#3A4652}.p3-equip path{stroke:#3A4652;stroke-width:5;stroke-linecap:round;fill:none}
.p3-people{opacity:0;animation:p3people 12s ease infinite}
.p3-sign{opacity:0;animation:p3on 12s ease infinite}
.p3-sign rect{fill:#22D3EE}.p3-sign text{font-size:8.5px;font-weight:800;fill:#04222A}
.p3-dark{fill:#05080B;opacity:.7;animation:p3dark 12s ease infinite}
.p3-heart{opacity:0;transform-box:view-box}
.p3-heart circle{fill:#F4899A}.p3-heart path{fill:#3A0D16}
.p3-renew{opacity:0}
.p3-renew rect{fill:#11352A;stroke:rgba(52,217,140,.6)}
.p3-renew text{font-size:9.5px;font-weight:800;fill:#34D98C}
.p3-prospects .pp1{animation:p3walk 12s ease-out infinite}
.p3-prospects .pp2{animation:p3walk2 12s ease-out infinite}
.p3-tour{opacity:0;animation:p3tour 12s ease infinite}
.p3-tour rect,.p3-stamp rect{fill:rgba(14,19,25,.92);stroke:rgba(34,211,238,.45)}
.p3-tour .tt,.p3-stamp .tt{font-size:12px;font-weight:800;fill:#EEF2F5}
.p3-tour .ts{font-size:10.5px;font-weight:700;fill:#34D98C}
.p3-stamp .ts{font-size:13px;font-weight:800;fill:var(--cyan)}
.p3-stamp{opacity:0;animation:p3stamp 12s ease infinite}
.p3-coin{opacity:0}
.p3-coin circle{fill:#F5B83D;stroke:#C98F1E;stroke-width:2}.p3-coin text{font-size:11px;font-weight:800;fill:#3A2A08}
.p3-coin.c1{animation:p3c1 12s ease-out infinite}.p3-coin.c2{animation:p3c2 12s ease-out infinite}.p3-coin.c3{animation:p3c3 12s ease-out infinite}
.p3-roof{opacity:0;animation:p3roof 12s ease infinite}
.p3-roof rect{fill:#3A2E14;stroke:#F5B83D}.p3-roof text{font-size:11px;font-weight:800;fill:#F5B83D}
@keyframes p3dark{0%,6%{opacity:.7}14%,94%{opacity:0}100%{opacity:.7}}
@keyframes p3on{0%,8%{opacity:0}14%,94%{opacity:1}100%{opacity:0}}
@keyframes p3people{0%,12%{opacity:0;transform:translateY(6px)}18%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes p3stamp{0%,22%{opacity:0;transform:translateY(6px)}30%,94%{opacity:1;transform:none}100%{opacity:0}}
.p3-stamp .stars{font-size:15px;letter-spacing:2px;fill:#F5B83D}
@keyframes p3walk{0%,56%{transform:translateX(-30px);opacity:0}58%{opacity:1}72%,94%{transform:translateX(118px);opacity:1}100%{transform:translateX(118px);opacity:0}}
@keyframes p3walk2{0%,58%{transform:translateX(-40px);opacity:0}60%{opacity:1}74%,94%{transform:translateX(142px);opacity:1}100%{transform:translateX(142px);opacity:0}}
@keyframes p3tour{0%,66%{opacity:0;transform:translateY(8px)}72%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes p3c1{0%,74%{opacity:0;transform:none}76%{opacity:1}86%{opacity:1;transform:translate(-40px,-238px)}88%,100%{opacity:0;transform:translate(-40px,-238px)}}
@keyframes p3c2{0%,78%{opacity:0;transform:none}80%{opacity:1}90%{opacity:1;transform:translate(-40px,-238px)}92%,100%{opacity:0;transform:translate(-40px,-238px)}}
@keyframes p3c3{0%,82%{opacity:0;transform:none}84%{opacity:1}94%{opacity:1;transform:translate(-40px,-238px)}96%,100%{opacity:0;transform:translate(-40px,-238px)}}
@keyframes p3roof{0%,84%{opacity:0;transform:translateY(6px)}88%,95%{opacity:1;transform:none}100%{opacity:0}}
.p3-heart.h0{animation:p3h0 12s ease infinite}@keyframes p3h0{0%,16%{opacity:0;transform:scale(.3)}19%{opacity:1;transform:scale(1.15)}21%,93%{opacity:1;transform:scale(1)}100%{opacity:0}}
.p3-heart.h1{animation:p3h1 12s ease infinite}@keyframes p3h1{0%,20%{opacity:0;transform:scale(.3)}23%{opacity:1;transform:scale(1.15)}25%,93%{opacity:1;transform:scale(1)}100%{opacity:0}}
.p3-heart.h2{animation:p3h2 12s ease infinite}@keyframes p3h2{0%,24%{opacity:0;transform:scale(.3)}27%{opacity:1;transform:scale(1.15)}29%,93%{opacity:1;transform:scale(1)}100%{opacity:0}}
.p3-heart.h3{animation:p3h3 12s ease infinite}@keyframes p3h3{0%,28%{opacity:0;transform:scale(.3)}31%{opacity:1;transform:scale(1.15)}33%,93%{opacity:1;transform:scale(1)}100%{opacity:0}}
.p3-heart.h4{animation:p3h4 12s ease infinite}@keyframes p3h4{0%,32%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.15)}37%,93%{opacity:1;transform:scale(1)}100%{opacity:0}}
.p3-heart.h5{animation:p3h5 12s ease infinite}@keyframes p3h5{0%,36%{opacity:0;transform:scale(.3)}39%{opacity:1;transform:scale(1.15)}41%,93%{opacity:1;transform:scale(1)}100%{opacity:0}}
.p3-lit .l0{animation:p3l0 12s ease infinite}@keyframes p3l0{0%,16%{opacity:0}19%,93%{opacity:1}100%{opacity:0}}
.p3-lit .l1{animation:p3l1 12s ease infinite}@keyframes p3l1{0%,20%{opacity:0}23%,93%{opacity:1}100%{opacity:0}}
.p3-lit .l2{animation:p3l2 12s ease infinite}@keyframes p3l2{0%,24%{opacity:0}27%,93%{opacity:1}100%{opacity:0}}
.p3-lit .l3{animation:p3l3 12s ease infinite}@keyframes p3l3{0%,28%{opacity:0}31%,93%{opacity:1}100%{opacity:0}}
.p3-lit .l4{animation:p3l4 12s ease infinite}@keyframes p3l4{0%,32%{opacity:0}35%,93%{opacity:1}100%{opacity:0}}
.p3-lit .l5{animation:p3l5 12s ease infinite}@keyframes p3l5{0%,36%{opacity:0}39%,93%{opacity:1}100%{opacity:0}}
.p3-renew.n0{animation:p3n0 12s ease infinite}@keyframes p3n0{0%,42%{opacity:0;transform:translateY(6px)}45%,93%{opacity:1;transform:none}100%{opacity:0}}
.p3-renew.n1{animation:p3n1 12s ease infinite}@keyframes p3n1{0%,47%{opacity:0;transform:translateY(6px)}50%,93%{opacity:1;transform:none}100%{opacity:0}}
.p3-renew.n2{animation:p3n2 12s ease infinite}@keyframes p3n2{0%,52%{opacity:0;transform:translateY(6px)}55%,93%{opacity:1;transform:none}100%{opacity:0}}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.kpi{position:relative;padding:12px 14px 16px;border-radius:16px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.kpi .kl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.kpi b{display:block;font-size:1.6rem;font-weight:850;letter-spacing:-.03em;line-height:1.15;color:var(--cyan)}
.kpi small{display:block;font-size:.8rem;color:var(--muted);line-height:1.3}
.kpi i{position:absolute;left:14px;right:14px;bottom:8px;height:3px;border-radius:3px;background:var(--s2);overflow:hidden}
.kpi em{display:block;height:100%;background:var(--cyan);transform-origin:left;transform:scaleX(0)}
.kpi.k1{animation:kg1 12s ease infinite}.kpi.k1 em{animation:km1 12s ease infinite}
.kpi.k2{animation:kg2 12s ease infinite}.kpi.k2 em{animation:km2 12s ease infinite}
.kpi.k3{animation:kg3 12s ease infinite}.kpi.k3 em{animation:km3 12s ease infinite}
.kpi.k4{animation:kg4 12s ease infinite}.kpi.k4 em{animation:km4 12s ease infinite}
.kpi.k4 b{color:#F5B83D}
@keyframes km1{0%,6%{transform:scaleX(0)}14%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes km2{0%,16%{transform:scaleX(0)}40%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes km3{0%,42%{transform:scaleX(0)}74%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes km4{0%,74%{transform:scaleX(0)}94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes kg1{0%,5%,18%,100%{border-color:var(--line)}8%,14%{border-color:rgba(34,211,238,.7)}}
@keyframes kg2{0%,16%,42%,100%{border-color:var(--line)}20%,38%{border-color:rgba(34,211,238,.7)}}
@keyframes kg3{0%,42%,76%,100%{border-color:var(--line)}46%,72%{border-color:rgba(34,211,238,.7)}}
@keyframes kg4{0%,74%,96%,100%{border-color:var(--line)}78%,94%{border-color:rgba(245,184,61,.7)}}
.route-sum{margin-left:auto;color:var(--text);font-weight:650}
@media (max-width:700px){
  .win-row{padding:22px}
  .win-copy h3{font-size:6.2vw}
  .viz{padding:12px;border-radius:20px}
  .kpi b{font-size:1.3rem}
  .kpi small{font-size:.74rem}
  .route-sum{margin-left:0;width:100%}
}

/* ---------- hero layout (single source of truth) ---------- */
.hero-grid{min-height:0;padding-block:64px 56px}
.hero-copy{max-width:620px}
.hero .lede{max-width:40ch;line-height:1.6}
.choose{gap:10px;max-width:410px}
.choose a{min-height:72px}
.stores-line{margin-top:28px}
.hero + .band{padding-top:clamp(64px,8vw,112px)}
.nav>ul{gap:4px}
.nav .nav-cta{margin-left:12px}

/* scene: --sc scales the phone, its cards and the photo together */
.stage{--sc:1;--cx:50%;--dy:0px;perspective:1700px;perspective-origin:var(--cx) 50%}
.stage .rig{left:var(--cx);top:calc(50% + var(--dy));z-index:1}
.gymbg{position:absolute;left:var(--cx);top:calc(50% + var(--dy));width:calc(749px * var(--sc));max-width:none;height:auto;
  transform:translate(calc(-308px * var(--sc)),calc(-351px * var(--sc)));z-index:0;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 0,#000 24%) intersect,linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent);
  opacity:0;animation:bgin 1.4s .1s ease forwards}
@keyframes bgin{to{opacity:1}}
.layer>.bob{animation-name:bob2}
@keyframes bob2{50%{transform:translateY(-4px)}}
.f-trainer{width:184px}
.f-bldg{padding:16px 18px 16px 14px;min-width:200px}
.f-confirm{padding:16px 20px 16px 14px;min-width:240px}
.f-msg{width:240px;padding:14px}
.f-rate{width:auto;min-width:0;padding:16px 18px;gap:10px;font-size:12.5px;justify-content:space-between}
.f-rate .stars svg{width:14px;height:14px}

/* desktop: copy left, scene anchored to the right edge, spanning headline to store badges */
@media (min-width:1281px){
  .hero-grid{position:static;display:block}
  .stage{position:absolute;top:0;bottom:0;right:max(24px,calc((100% - var(--wrap)) / 2));left:44%;height:auto;margin:0;--rr:417px;--sc:1.02;--cx:calc(100% - var(--rr));--dy:22px}
}
@media (min-width:1381px) and (max-width:1599px){ .stage{--rr:396px;--sc:.97} }
@media (min-width:1281px){
  .gymbg{-webkit-mask:linear-gradient(90deg,transparent 0,#000 24%,#000 80%,transparent),linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent);-webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent 0,#000 24%,#000 80%,transparent) intersect,linear-gradient(180deg,transparent 0,#000 9%,#000 88%,transparent)}
}
@media (min-width:1281px) and (max-width:1380px){ .stage{--rr:368px;--sc:.9} }

/* tablet: stacked, scene centred and scaled */
@media (max-width:1280px){
  .hero-grid{grid-template-columns:1fr;gap:16px;padding-block:48px 32px}
  .hero h1{font-size:clamp(2.75rem,7.4vw,4.6rem)}
  .stage{--sc:.74;height:calc(640px * var(--sc) + 72px)}
}

/* phone: photo off, two supporting cards kept inside the screen */
@media (max-width:700px){
  .hero{background:radial-gradient(90% 40% at 50% 80%,rgba(34,211,238,.12),transparent 70%),var(--bg)}
  .hero-grid{padding-block:40px 24px}
  .kicker{font-size:.85rem}
  .stores-line>span{width:100%}
  .gymbg{display:none}
  .stage{--sc:.62;height:calc(640px * var(--sc) + 72px)}
  .stage .layer:has(.f-bldg),.stage .layer:has(.f-msg),.stage .layer:has(.f-trainer){display:none}
  .stage .layer:has(.f-confirm){--x:118px!important;--y:-300px!important}
  .stage .layer:has(.f-rate){--x:-104px!important;--y:298px!important}
}
@media (max-width:560px){
  .hero h1{font-size:9.6vw}
  .sbadge{padding:7px 12px 7px 10px;gap:7px}
  .sbadge b{font-size:1rem}
  .sbadge svg{width:20px;height:20px}
}

.nav>ul>li:last-child>.sub{left:auto;right:0}
@media (min-width:981px) and (max-width:1280px){ .nav a{padding:10px 11px} }
@media (min-width:981px) and (max-width:1100px){ .nav a{padding:10px 8px;font-size:.94rem} .nav .nav-cta{padding:10px 16px} }

@media (prefers-reduced-motion:reduce){
  .p3-stamp{opacity:1}
  .r1-car,.r1-dot{transform:translateY(120px)}.r1-rider,.r1-ltr,.r1-chip.a{opacity:0}.r1-gp,.r1-chip.b{opacity:1}.r1-glow{opacity:.9}.r1-door{transform:scaleX(.08)}
  .p3-dark{opacity:0}.p3-gymlit,.p3-sign,.p3-people,.p3-stamp,.p3-heart,.p3-lit rect,.p3-renew,.p3-tour{opacity:1}.p3-tour{opacity:1}.kpi em{transform:scaleX(1)}
  .p3-prospects .pp1{transform:translateX(118px)}.p3-prospects .pp2{transform:translateX(142px)}
  .gymbg{opacity:1}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero .kicker,.hero h1 .line,.hero .lede,.hero .choose,.hero .stores-line,.stage .layer{opacity:1;transform:none}
  .nrp .lock-card .lt{opacity:1;transform:none}
  .nrp .lock-card .beam{transform:none}
  .stage .layer{transform:translate(-50%,-50%) translate3d(var(--x,0),var(--y,0),var(--z,0px))}
}

@media (max-width:980px){
  .phone-col{background:var(--bg);box-shadow:0 18px 18px -6px var(--bg);padding-bottom:6px}
  .phone-stage{display:block;position:relative;height:340px;overflow:hidden;perspective:1400px}
  .phone-fit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--fit,.42));transform-origin:center}
  .phone-col .how-label,.phone-col .phone-caption{display:none}
  .sb{min-height:62vh;justify-content:flex-start;padding-top:24px}
  .sb.sub{min-height:52vh}
}
@media (max-width:700px){ .phone-stage{height:290px} }
@media (max-width:380px){ .phone-stage{height:250px} .phone-fit{--fit:.36} }

/* =================== Service locations page =================== */
.nav a[aria-current="page"]{color:var(--text);background:var(--s1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.loc-page .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan)}
.loc-hero{position:relative;overflow:hidden;padding-block:72px 56px;
  background:radial-gradient(60% 80% at 85% 0%,rgba(34,211,238,.12),transparent 65%),var(--bg)}
.loc-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(70% 90% at 80% 10%,#000,transparent);mask:radial-gradient(70% 90% at 80% 10%,#000,transparent);pointer-events:none}
.loc-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end}
.loc-hero h1{margin-top:14px;font-size:clamp(2.4rem,4.2vw,3.8rem);font-weight:850;letter-spacing:-.04em;line-height:1.02}
.loc-hero .accent{color:var(--cyan)}
.loc-hero .lede{margin-top:20px;max-width:56ch;font-size:1.12rem;line-height:1.6;color:#B9C4CF}
.loc-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.loc-stats>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:20px 22px;border-radius:20px;background:var(--s1);border:1px solid var(--line)}
.loc-stats .si{grid-row:1/3;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan)}
.loc-stats .si svg{width:24px;height:24px}
.loc-stats dt{font-size:2.1rem;font-weight:850;letter-spacing:-.04em;line-height:1;color:var(--text)}
.loc-stats dd{margin:4px 0 0;font-size:.85rem;color:var(--muted);line-height:1.35}
.loc-stats dd b{display:block;color:var(--text);font-size:.9rem}
.loc-finder{padding-block:24px 0}
.finder-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.finder-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:none}
.finder-tools{display:flex;gap:10px;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:10px;min-width:280px;height:52px;padding:0 16px;border-radius:999px;background:var(--s1);border:1px solid var(--line);color:var(--muted)}
.search:focus-within{border-color:var(--cyan)}
.search svg{width:18px;height:18px;flex:none}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:500 1rem var(--font)}
.search input::placeholder{color:var(--muted)}
.near{gap:8px}
.near svg{width:17px;height:17px;color:var(--cyan)}
.btn-outline.near{min-height:52px;padding:0 20px;border-radius:999px;background:transparent;border:1px solid #33404C;color:var(--text);font-weight:650}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip-btn{font:650 .88rem var(--font);color:#C9D2DB;padding:8px 14px;border-radius:999px;background:var(--s1);border:1px solid var(--line);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.chip-btn:hover{border-color:#3E4B57;color:var(--text)}
.chip-btn.on{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.6);color:var(--cyan)}
.near-out{min-height:1.4em;margin-top:12px;font-size:.92rem;color:var(--muted)}
.near-out b{color:var(--text)}
.finder{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;margin-top:8px}
.map-wrap{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#0B1117;min-height:560px}
.loc-list{display:flex;flex-direction:column;max-height:560px;border-radius:24px;background:var(--s1);border:1px solid var(--line);overflow:hidden}
.ll-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.ll-head span{font-size:.85rem;color:var(--muted)}
#locList{list-style:none;margin:0;padding:8px 10px 14px;overflow:auto;flex:1}
#locList ul{list-style:none;margin:0;padding:0}
.st-h{display:flex;justify-content:space-between;align-items:baseline;padding:14px 10px 6px}
.st-h b{font-size:.95rem}
.st-h span{font-size:.78rem;color:var(--muted)}
.city{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:12px;background:none;color:var(--text);font:600 .95rem var(--font);text-align:left;cursor:pointer;transition:background .15s}
.city:hover{background:var(--s2)}
.city.on{background:rgba(34,211,238,.12)}
.city .pin{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.15);flex:none}
.city .nm{flex:1;min-width:0}
.city .ab{font-size:.78rem;color:var(--muted)}
.city .pt{font-size:.68rem;font-weight:800;padding:3px 7px;border-radius:999px;background:#fff;color:#0E1319}
.city .live{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--green-bg);color:var(--green)}
.ll-empty{padding:16px 20px;color:var(--muted);font-size:.92rem}
.ll-empty a{color:var(--cyan)}
/* dot-matrix map */
.map-wrap{background:radial-gradient(70% 70% at 60% 40%,rgba(34,211,238,.07),transparent 70%),#0B1117;touch-action:pan-y;cursor:default}
.map-wrap.grabbing{cursor:grabbing}
.mapstage{position:absolute;inset:0;transform-origin:0 0;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.mapstage.instant{transition:none}
.usdots{position:absolute;inset:0;width:100%;height:100%}
.usdots .land{fill:none;stroke:#2A3C48;stroke-width:4.4;stroke-linecap:round}
.pins{position:absolute;inset:0}
.pinbtn{position:absolute;width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%) scale(var(--ik,1));transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .3s}
.mapstage.instant .pinbtn{transition:none}
.pinbtn .ring{position:absolute;inset:-6px;border-radius:50%;background:rgba(34,211,238,.28);animation:pinpulse 2.4s ease-out infinite}
.pinbtn .dot{position:absolute;inset:0;border-radius:50%;background:#0E1319;border:2px solid var(--cyan);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.55),0 0 14px rgba(34,211,238,.35)}
.pinbtn .dot img{width:13px;height:auto}
.pinbtn .tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font:650 .78rem var(--font);color:var(--text);background:rgba(14,19,25,.94);border:1px solid var(--line);padding:5px 9px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
.pinbtn:hover .tip,.pinbtn:focus-visible .tip{opacity:1}
.pinbtn:hover,.pinbtn.on{z-index:3}
.pinbtn.on .dot{background:var(--cyan)}
.pinbtn.on .dot img{filter:brightness(0) saturate(100%) invert(9%) sepia(27%) saturate(2000%) hue-rotate(160deg)}
.pinbtn.off{opacity:.12;pointer-events:none}
.pinbtn.off .ring{animation:none;opacity:0}
@keyframes pinpulse{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.map-ctrl{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--line);z-index:6}
.map-ctrl button{width:38px;height:38px;border:0;background:var(--s1);color:var(--text);font:600 1.2rem var(--font);cursor:pointer}
.map-ctrl button+button{border-top:1px solid var(--line)}
.map-ctrl button:hover{background:var(--s2)}
.map-reset{position:absolute;top:14px;right:14px;z-index:6;font:650 .85rem var(--font);color:var(--text);padding:9px 14px;border-radius:999px;background:var(--s1);border:1px solid var(--line);cursor:pointer}
.map-reset:hover{border-color:var(--cyan)}
.map-hint{position:absolute;left:16px;bottom:14px;z-index:4;display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.map-hint span{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.18)}
.map-pop{position:absolute;z-index:5;width:270px;padding:14px 16px;border-radius:16px;background:var(--s1);border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.5);transform:translate(-50%,calc(-100% - 26px));transition:left .65s cubic-bezier(.2,.7,.2,1),top .65s cubic-bezier(.2,.7,.2,1)}
.map-pop::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--s1);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.map-pop.below{transform:translate(-50%,30px)}
.map-pop.below::after{top:-7px;bottom:auto;transform:translateX(-50%) rotate(225deg)}
.map-pop.side{transform:none}
.map-pop.side::after{display:none}
.map-pop.sheet{left:12px!important;right:12px;bottom:12px;top:auto!important;width:auto;transform:none;transition:none}
.map-pop.sheet::after{display:none}
.pp-x{position:absolute;top:8px;right:10px;border:0;background:none;color:var(--muted);font-size:1.2rem;cursor:pointer}
.map-pop b{display:block;font-size:1rem;margin-top:8px}
.map-pop p{margin:6px 0 10px;font-size:.85rem;color:var(--muted);line-height:1.45}
.pp-live{font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--green-bg);color:var(--green)}
.pp-a{display:flex;gap:8px;flex-wrap:wrap}
.pp-a a{font-size:.78rem;font-weight:700;padding:7px 11px;white-space:nowrap;border-radius:999px;text-decoration:none;border:1px solid var(--line);color:var(--text)}
.pp-a a:first-child{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)}
/* paths */
.loc-paths{padding-block:88px 0}
.loc-paths h2{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:none}
.paths3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.paths3 a{display:flex;align-items:flex-start;gap:16px;padding:24px;border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);text-decoration:none;transition:border-color .2s,background .2s}
.paths3 a:hover{border-color:rgba(34,211,238,.55);background:#18212A}
.paths3 .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.paths3 .ic svg{width:22px;height:22px}
.paths3 .tx{flex:1;display:flex;flex-direction:column;gap:4px}
.paths3 small{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.paths3 b{font-size:1.1rem;line-height:1.3}
.paths3 .tx>span{font-size:.9rem;color:var(--muted);line-height:1.5}
.paths3 .go{width:20px;height:20px;color:var(--muted);flex:none;margin-top:14px;transition:transform .2s,color .2s}
.paths3 a:hover .go{color:var(--cyan);transform:translateX(3px)}
.loc-page .cta-sec{padding-top:88px}
.incl{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.incl li{display:flex;align-items:center;gap:12px;font-weight:600}
.incl svg{width:26px;height:26px;padding:5px;border-radius:50%;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.loc-note{margin-top:28px;font-size:.82rem;line-height:1.6;color:var(--muted);max-width:90ch}
@media (max-width:1100px){
  .loc-hero .wrap{grid-template-columns:1fr;gap:36px}
  .finder{grid-template-columns:1fr}
  .map-wrap{min-height:440px}
  .loc-list{max-height:none}
  #locList{max-height:420px}
  .paths3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .loc-hero{padding-block:48px 40px}
  .loc-stats>div{padding:16px;column-gap:12px}
  .loc-stats .si{width:40px;height:40px}
  .loc-stats dt{font-size:1.7rem}
  .search{min-width:0;flex:1 1 100%}
  .btn-outline.near{flex:1 1 100%;justify-content:center}
  .map-wrap{min-height:300px}
  .pinbtn{width:22px;height:22px}
  .pinbtn .dot img{width:10px}
  .pinbtn .ring{inset:-4px}
  .loc-paths{padding-top:64px}
  .loc-page .cta-sec{padding-top:64px}
}
@media (max-width:420px){ .loc-stats{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .pinbtn .ring{animation:none;opacity:.4} .mapstage,.pinbtn,.map-pop{transition:none} }

/* =================== Solutions hub =================== */
.sol-page .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan)}
.sol-hero{position:relative;overflow:hidden;padding-block:72px 64px;background:radial-gradient(55% 80% at 80% 20%,rgba(34,211,238,.12),transparent 65%),var(--bg)}
.sol-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.sol-hero h1{margin-top:14px;font-size:clamp(2.3rem,3.8vw,3.5rem);font-weight:850;letter-spacing:-.04em;line-height:1.02}
.sol-hero .accent{color:var(--cyan)}
.sol-hero .lede{margin-top:20px;max-width:50ch;font-size:1.15rem;line-height:1.6;color:#B9C4CF}
.picks{display:grid;gap:10px;margin-top:32px;max-width:520px}
.picks a{display:flex;align-items:center;gap:14px;padding:14px 18px 14px 14px;border-radius:18px;background:var(--s1);border:1px solid var(--line);text-decoration:none;transition:border-color .2s,background .2s}
.picks a:hover{border-color:rgba(34,211,238,.55);background:#18212A}
.picks .pi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.picks .pi svg{width:22px;height:22px}
.picks a>span:nth-child(2){flex:1;line-height:1.3}
.picks b{display:block;font-size:1.05rem}
.picks small{font-size:.9rem;color:var(--muted)}
.picks .go{width:20px;height:20px;color:var(--muted);transform:rotate(90deg);transition:color .2s}
.picks a:hover .go{color:var(--cyan)}
.loop-wrap{padding:12px;border-radius:28px;border:1px solid var(--line);background:radial-gradient(70% 70% at 50% 50%,rgba(34,211,238,.08),transparent 70%),linear-gradient(160deg,#121A22,#0B1117)}
.loop{display:block;width:100%;height:auto}
.loop text{font-family:var(--font)}
.loop .edge{fill:none;stroke:rgba(34,211,238,.45);stroke-width:2.5;stroke-dasharray:6 7;animation:loopflow 1.4s linear infinite}
@keyframes loopflow{to{stroke-dashoffset:-26}}
.loop .flow{fill:#22D3EE;filter:drop-shadow(0 0 6px rgba(34,211,238,.9))}
.loop .elab{font-size:13px;font-weight:650;fill:#B9C4CF}
.loop .elab.c{fill:#F5B83D;font-size:12px}
.loop .core circle{fill:#0E1319;stroke:rgba(34,211,238,.6);stroke-width:2}
.loop .coin circle{fill:#F5B83D;stroke:#C98F1E;stroke-width:2}
.loop .coin text{font-size:11px;font-weight:800;fill:#3A2A08}
.loop .node circle{fill:#161C24;stroke:#2A3541;stroke-width:2}
.loop .node use{color:#22D3EE}
.loop .node text{font-size:13px;font-weight:700;fill:#EEF2F5}
.role{padding-block:clamp(72px,8vw,104px);border-top:1px solid var(--line);scroll-margin-top:72px}
.role:nth-of-type(odd){background:linear-gradient(180deg,rgba(22,28,36,.55),transparent)}
.role-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.role-who{display:flex;align-items:center;gap:10px;font-weight:650;color:var(--cyan);font-size:1.05rem}
.role-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cyan);color:var(--cyan-ink);font-weight:800;font-size:.95rem}
.role h2{margin-top:18px;font-size:clamp(2.2rem,3.8vw,3.4rem);letter-spacing:-.04em;max-width:none}
.role-p{margin-top:18px;font-size:1.15rem;line-height:1.65;color:var(--muted);max-width:46ch}
.role .ctas{margin-top:30px}
.role-benefits{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.role-benefits li{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:20px;background:var(--s1);border:1px solid var(--line)}
.role-benefits .bi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.role-benefits .bi svg{width:22px;height:22px}
.role-benefits b{display:block;font-size:1.1rem;line-height:1.3}
.role-benefits li>span:last-child>span{display:block;margin-top:4px;color:var(--muted);line-height:1.5}
.sol-compare{padding-block:clamp(72px,8vw,104px) 0;border-top:1px solid var(--line)}
.sol-compare h2{font-size:clamp(2rem,3.4vw,2.8rem);max-width:none}
.table-scroll{margin-top:28px;overflow-x:auto;border-radius:22px;border:1px solid var(--line);background:var(--s1)}
.cmp-table{width:100%;min-width:760px;border-collapse:collapse}
.cmp-table th,.cmp-table td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp-table tr:last-child>*{border-bottom:0}
.cmp-table thead th{font-size:1rem;font-weight:750;background:#18212A}
.cmp-table thead th svg{display:inline-block;width:18px;height:18px;color:var(--cyan);vertical-align:-3px;margin-right:8px}
.cmp-table tbody th{width:18%;font-size:.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.cmp-table td{color:#C9D2DB;line-height:1.5}
.cmp-table td a{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-weight:700;text-decoration:none}
.cmp-table td a svg{display:inline-block;width:16px;height:16px;transition:transform .2s}
.cmp-table td a:hover svg{transform:translateX(3px)}
.sol-page .cta-sec{padding-top:88px}
@media (max-width:1100px){
  .sol-hero-grid,.role-grid{grid-template-columns:1fr;gap:40px}
  .loop-wrap{max-width:560px}
}
@media (max-width:640px){
  .sol-hero{padding-block:48px 48px}
  .role-benefits li{padding:18px}
}
@media (prefers-reduced-motion:reduce){ .loop .edge{animation:none} }

/* =================== Solutions: animated role scenes =================== */
.role-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.role-copy .role-benefits{margin-top:26px;gap:8px}
.role-copy .role-benefits li{padding:14px 16px;border-radius:16px}
.role-copy .role-benefits .bi{width:38px;height:38px;border-radius:12px}
.role-copy .role-benefits .bi svg{width:19px;height:19px}
.role-copy .role-benefits b{font-size:1rem}
.role-copy .ctas{margin-top:24px}
.role-vis{border-radius:28px;border:1px solid var(--line);background:radial-gradient(70% 70% at 50% 45%,rgba(34,211,238,.08),transparent 70%),linear-gradient(160deg,#121A22,#0B1117);overflow:hidden}
.rv{display:block;width:100%;height:auto;font-family:var(--font)}
.rv text{fill:#EEF2F5}
.rv .rv-mut{fill:#8C98A5}.rv .rv-c{fill:#22D3EE}.rv .rv-ink{fill:#04222A;font-weight:800}.rv .rv-green{fill:#34D98C;font-weight:700}
.rv-t9{font-size:9.5px;font-weight:600}.rv-t10{font-size:11px;font-weight:700}.rv-t11{font-size:12px;font-weight:700}.rv-t12{font-size:13px;font-weight:800}.rv-t18{font-size:19px;font-weight:800;letter-spacing:-.02em}
.rv *{transform-box:fill-box}
.rv, .rv *{animation-play-state:paused!important}
.rv.play, .rv.play *{animation-play-state:running!important}
/* residents */
.rv-glow{fill:rgba(34,211,238,.06)}
.rv-ph-body{fill:#1A2129;stroke:#313B47}.rv-ph-screen{fill:#0E1319}.rv-notch{fill:#000}
.rv-card{fill:#161C24;stroke:#262F3A}.rv-av{fill:#2A3541}
.rv-chip{fill:#1D252E;stroke:#262F3A}
.rv-pick-day{animation:rvPickDay 10s infinite}
.rv-pick-time{animation:rvPickTime 10s infinite}
@keyframes rvPickDay{0%,14%{fill:#1D252E;stroke:#262F3A}17%,90%{fill:#0E3B43;stroke:#22D3EE}100%{fill:#1D252E;stroke:#262F3A}}
@keyframes rvPickTime{0%,30%{fill:#1D252E;stroke:#262F3A}33%,90%{fill:#0E3B43;stroke:#22D3EE}100%{fill:#1D252E;stroke:#262F3A}}
.rv-btn{fill:#22D3EE}
.rv-book{transform-origin:center;animation:rvPress 10s infinite}
@keyframes rvPress{0%,44%{transform:translate(188px,268px) scale(1)}46%{transform:translate(188px,268px) scale(.94)}49%,100%{transform:translate(188px,268px) scale(1)}}
.rv-ok{fill:#11352A;stroke:rgba(52,217,140,.45)}.rv-okdot{fill:#34D98C}.rv-tick{fill:none;stroke:#04222A;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rv-sent{opacity:0;animation:rvSent 10s infinite}
@keyframes rvSent{0%,48%{opacity:0}53%,90%{opacity:1}95%,100%{opacity:0}}
.rv-finger{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.7);stroke-width:1.5;animation:rvFinger 10s infinite}
@keyframes rvFinger{0%{transform:translate(430px,330px);opacity:0}6%{opacity:1}12%{transform:translate(280px,180px)}15%{transform:translate(280px,180px) scale(.8)}18%{transform:translate(280px,180px) scale(1)}28%{transform:translate(242px,237px)}31%{transform:translate(242px,237px) scale(.8)}34%{transform:translate(242px,237px) scale(1)}42%{transform:translate(260px,285px)}45%{transform:translate(260px,285px) scale(.8)}48%{transform:translate(260px,285px) scale(1);opacity:1}56%,100%{transform:translate(430px,330px);opacity:0}}
.rv-toastbg{fill:#161C24;stroke:rgba(34,211,238,.45);filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
.rv-toast{opacity:0;animation:rvToast 10s infinite}
@keyframes rvToast{0%,60%{opacity:0;transform:translate(40px,-6px)}66%,90%{opacity:1;transform:translate(40px,18px)}96%,100%{opacity:0;transform:translate(40px,18px)}}
/* trainers */
.rv-open{fill:none;stroke:#2E3A46;stroke-dasharray:4 4}
.rv-bk rect{fill:#22D3EE}
.rv-bk{opacity:0;transform-origin:center}
.rv-bk.rv-bk0{animation:rvBk0 10s infinite}
@keyframes rvBk0{0%,4%{opacity:0;transform:scale(.6)}8%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.rv-bk.rv-bk1{animation:rvBk1 10s infinite}
@keyframes rvBk1{0%,9%{opacity:0;transform:scale(.6)}13%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.rv-bk.rv-bk2{animation:rvBk2 10s infinite}
@keyframes rvBk2{0%,14%{opacity:0;transform:scale(.6)}18%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.rv-bk.rv-bk3{animation:rvBk3 10s infinite}
@keyframes rvBk3{0%,19%{opacity:0;transform:scale(.6)}23%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.rv-bk.rv-bk4{animation:rvBk4 10s infinite}
@keyframes rvBk4{0%,24%{opacity:0;transform:scale(.6)}28%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.rv-bk.rv-bk5{animation:rvBk5 10s infinite}
@keyframes rvBk5{0%,29%{opacity:0;transform:scale(.6)}33%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.rv-bk.rv-bk6{animation:rvBk6 10s infinite}
@keyframes rvBk6{0%,34%{opacity:0;transform:scale(.6)}38%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.rv-bk.rv-bk7{animation:rvBk7 10s infinite}
@keyframes rvBk7{0%,39%{opacity:0;transform:scale(.6)}43%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.rv-bk.rv-bk8{animation:rvBk8 10s infinite}
@keyframes rvBk8{0%,44%{opacity:0;transform:scale(.6)}48%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.rv-earn{font-size:24px;font-weight:850;letter-spacing:-.03em;fill:#F5B83D!important;opacity:0}
.rv-e0{animation:rvE0 10s infinite}.rv-e1{animation:rvE1 10s infinite}.rv-e2{animation:rvE2 10s infinite}.rv-e3{animation:rvE3 10s infinite}
@keyframes rvE0{0%,10%{opacity:1}12%,94%{opacity:0}97%,100%{opacity:1}}
@keyframes rvE1{0%,11%{opacity:0}13%,24%{opacity:1}26%,100%{opacity:0}}
@keyframes rvE2{0%,25%{opacity:0}27%,40%{opacity:1}42%,100%{opacity:0}}
@keyframes rvE3{0%,41%{opacity:0}43%,92%{opacity:1}95%,100%{opacity:0}}
.rv-av2{fill:#2A3541}
.rv-req{opacity:0;animation:rvReq 10s infinite}
@keyframes rvReq{0%,30%{opacity:0;transform:translate(0,246px)}35%,52%{opacity:1;transform:translate(0,232px)}57%,100%{opacity:0;transform:translate(0,232px)}}
.rv-track{fill:#1D252E}.rv-fill{fill:#22D3EE;transform-origin:left;animation:rvFill 10s infinite}
@keyframes rvFill{0%,6%{transform:scaleX(.02)}50%,88%{transform:scaleX(.82)}95%,100%{transform:scaleX(.02)}}
/* property managers */
.rv-bbody{fill:#161C24;stroke:#2A3541}.rv-roof{fill:#1D252E}
.rv-win{fill:#1D252E}
.rv-win.rv-lit{animation:rvWin 10s infinite;animation-delay:var(--d)}
@keyframes rvWin{0%,30%{fill:#1D252E}40%,80%{fill:#F5B83D;opacity:.85}100%{fill:#1D252E}}
.rv-gym{fill:#0B1117;stroke:#2A3541;animation:rvGym 10s infinite}
@keyframes rvGym{0%,8%{fill:#0B1117;stroke:#2A3541}14%,88%{fill:#0E3B43;stroke:#22D3EE}96%,100%{fill:#0B1117;stroke:#2A3541}}
.rv-gymlbl{fill:#8C98A5!important}
.rv-gymin{opacity:0;animation:rvGymIn 10s infinite}
@keyframes rvGymIn{0%,12%{opacity:0}18%,88%{opacity:1}96%,100%{opacity:0}}
.rv-p1{fill:#22D3EE}.rv-p2{fill:#9984E9}.rv-db{fill:#C9D2DB}
.rv-gymin .rv-db{transform-origin:center;animation:rvLift 1.2s ease-in-out infinite}
@keyframes rvLift{50%{transform:translateY(-6px)}}
.rv-heart{fill:#F4899A;opacity:0;animation:rvHeart 10s infinite;animation-delay:calc(1.5s + var(--h) * .9s)}
@keyframes rvHeart{0%{opacity:0;transform:translateY(0) scale(.8)}6%{opacity:1;transform:translateY(-8px) scale(1.4)}26%{opacity:0;transform:translateY(-44px) scale(1.4)}100%{opacity:0}}
.rv-cpath{fill:none;stroke:rgba(245,184,61,.25);stroke-width:2;stroke-dasharray:4 6}
.rv-coin circle{fill:#F5B83D;stroke:#C98F1E;stroke-width:2}.rv-coin text{font-size:11px;font-weight:800;fill:#3A2A08!important}
.rv-revbox{fill:#0F2A30;stroke:rgba(34,211,238,.35)}.rv-revlbl{fill:#22D3EE!important;letter-spacing:.06em}
.rv-rev{font-size:30px;font-weight:850;letter-spacing:-.03em;fill:#F5B83D!important;opacity:0}
.rv-r0{animation:rvR0 10s infinite}.rv-r1{animation:rvR1 10s infinite}.rv-r2{animation:rvR2 10s infinite}.rv-r3{animation:rvR3 10s infinite}
@keyframes rvR0{0%,30%{opacity:1}32%,100%{opacity:0}}
@keyframes rvR1{0%,31%{opacity:0}33%,50%{opacity:1}52%,100%{opacity:0}}
@keyframes rvR2{0%,51%{opacity:0}53%,70%{opacity:1}72%,100%{opacity:0}}
@keyframes rvR3{0%,71%{opacity:0}73%,92%{opacity:1}97%,100%{opacity:0}}
.rv-axis{stroke:#2A3541}
.rv-bar{fill:#F5B83D;transform-origin:bottom;transform:scaleY(.05)}
.rv-bar.rv-bar0{animation:rvBar0 10s infinite}
@keyframes rvBar0{0%,4%{transform:scaleY(.05)}12%,88%{transform:scaleY(1)}95%,100%{transform:scaleY(.05)}}
.rv-bar.rv-bar1{animation:rvBar1 10s infinite}
@keyframes rvBar1{0%,13%{transform:scaleY(.05)}21%,88%{transform:scaleY(1)}95%,100%{transform:scaleY(.05)}}
.rv-bar.rv-bar2{animation:rvBar2 10s infinite}
@keyframes rvBar2{0%,22%{transform:scaleY(.05)}30%,88%{transform:scaleY(1)}95%,100%{transform:scaleY(.05)}}
.rv-bar.rv-bar3{animation:rvBar3 10s infinite}
@keyframes rvBar3{0%,31%{transform:scaleY(.05)}39%,88%{transform:scaleY(1)}95%,100%{transform:scaleY(.05)}}
.rv-bar.rv-bar4{animation:rvBar4 10s infinite}
@keyframes rvBar4{0%,40%{transform:scaleY(.05)}48%,88%{transform:scaleY(1)}95%,100%{transform:scaleY(.05)}}
.rv-bar.rv-bar5{animation:rvBar5 10s infinite}
@keyframes rvBar5{0%,49%{transform:scaleY(.05)}57%,88%{transform:scaleY(1)}95%,100%{transform:scaleY(.05)}}
.rv-pill{fill:#11352A;stroke:rgba(52,217,140,.4)}
@media (max-width:1100px){ .role-grid{grid-template-columns:minmax(0,1fr);gap:32px} .role-vis{max-width:620px;width:100%} }
@media (prefers-reduced-motion:reduce){
  .rv *{animation:none!important}
  .rv-sent,.rv-toast,.rv-gymin,.rv-bk,.rv-e3,.rv-r3,.rv-req{opacity:1!important}
  .rv-e0,.rv-r0,.rv-heart,.rv-coin,.rv-finger{opacity:0!important}
}

/* =================== For property managers =================== */
.pm-page .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan)}
.pm-hero{padding-block:72px 64px;background:radial-gradient(55% 80% at 82% 25%,rgba(34,211,238,.12),transparent 65%),var(--bg)}
.pm-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.pm-hero h1{margin-top:14px;font-size:clamp(2.3rem,3.7vw,3.5rem);font-weight:850;letter-spacing:-.04em;line-height:1.04;max-width:16ch;text-wrap:balance}
.pm-hero .accent{color:var(--cyan)}
.pm-hero .lede{margin-top:20px;max-width:50ch;font-size:1.15rem;line-height:1.6;color:#B9C4CF}
.pm-hero .ctas{margin-top:30px}
.pm-chips{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pm-chips li{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--s1);border:1px solid var(--line);font-weight:650;font-size:.92rem}
.pm-chips svg{width:15px;height:15px;color:var(--green)}
.pmd-stage{perspective:1400px}
.pmd{padding:20px;border-radius:26px;background:var(--s1);border:1px solid var(--line);box-shadow:0 40px 80px rgba(0,0,0,.45);transform:rotateY(-8deg) rotateX(4deg);animation:pmdfloat 7s ease-in-out infinite}
@keyframes pmdfloat{50%{transform:rotateY(-6deg) rotateX(3deg) translateY(-8px)}}
.pmd-top{display:flex;justify-content:space-between;align-items:center}
.pmd-top small{display:block;font-size:.78rem;color:var(--muted)}
.pmd-top b{font-size:1.25rem;letter-spacing:-.02em}
.pmd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.pmd-kpis div{padding:14px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.pmd-kpis small{display:block;font-size:.74rem;color:var(--muted);line-height:1.3}
.pmd-kpis b{display:block;font-size:1.8rem;font-weight:850;letter-spacing:-.04em;margin-top:6px;line-height:1}
.pmd-kpis em{display:block;font-style:normal;font-size:.72rem;color:var(--muted);margin-top:6px}
.pmd-kpis em.up{color:var(--green)}
.pmd-rev{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:10px;padding:16px;border-radius:18px}
.pmd-rev .label{font-size:.66rem}
.pmd-rev b{display:block;font-size:2rem;font-weight:850;letter-spacing:-.04em;margin-top:4px}
.pmd-rev small{font-size:.76rem;color:#A9C3C8}
.pmd-bars{display:flex;align-items:flex-end;gap:4px;height:64px;width:46%}
.pmd-bars i{flex:1;height:var(--h);border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,var(--cyan),#0E7C8C);transform-origin:bottom;animation:pmdbar 1.2s cubic-bezier(.2,.7,.2,1) both}
.pmd-bars i:nth-child(n){animation-delay:calc(var(--h) * .006s)}
@keyframes pmdbar{from{transform:scaleY(.1)}}
.pmd-feed{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.pmd-feed li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.pmd-feed li>span:nth-child(2){flex:1;line-height:1.3}
.pmd-feed b{font-size:.9rem}
.pmd-feed small{display:block;font-size:.76rem;color:var(--muted)}
.pillnav{position:sticky;top:72px;z-index:20;background:rgba(14,19,25,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid var(--line)}
.pillnav .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.pillnav a{display:flex;align-items:center;gap:8px;flex:none;padding:9px 14px;border-radius:999px;text-decoration:none;font-weight:650;font-size:.92rem;color:#C9D2DB;border:1px solid transparent;transition:background .2s,border-color .2s}
.pillnav a:hover{background:var(--s1);border-color:var(--line);color:var(--text)}
.pillnav svg{width:16px;height:16px;color:var(--cyan)}
.feat{padding-block:clamp(72px,8vw,104px);scroll-margin-top:130px}
.feat+.feat{border-top:1px solid var(--line)}
.feat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.feat.flip .feat-copy{order:2}
.feat-n{display:flex;align-items:center;gap:12px;font-weight:650;color:var(--cyan)}
.feat-n span{font-size:.85rem;font-weight:800;padding:5px 10px;border-radius:999px;background:rgba(34,211,238,.12)}
.feat h2{margin-top:16px;font-size:clamp(2rem,3.2vw,2.8rem);letter-spacing:-.04em;max-width:17ch;text-wrap:balance}
.feat-p{margin-top:18px;font-size:1.15rem;line-height:1.65;color:var(--muted);max-width:46ch}
.fv{padding:24px;border-radius:24px;background:radial-gradient(120% 80% at 70% 0%,rgba(34,211,238,.07),transparent 60%),linear-gradient(160deg,#121A22,#0B1117);border:1px solid var(--line)}
.fv-h{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fv-row{display:flex;justify-content:space-between;align-items:center}
.fv-note{margin-top:16px;font-size:.92rem;color:var(--muted)}
.fv.split{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.fv-col{padding:18px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.fv-col.you{border-color:rgba(34,211,238,.35)}
.ticks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;align-items:center;gap:10px;font-weight:600;line-height:1.35}
.ticks svg{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--green-bg);color:var(--green);flex:none}
.fv-col.you .ticks svg{background:rgba(34,211,238,.12);color:var(--cyan)}
.heat{display:grid;grid-template-columns:44px repeat(7,1fr);grid-template-rows:auto repeat(5,30px);gap:6px;margin-top:16px;position:relative}
.heat .dh{text-align:center;font-size:.75rem;color:var(--muted);font-weight:650}
.heat .sh{grid-column:1;font-size:.72rem;color:var(--muted);align-self:center}
.heat .cells{grid-column:2/-1;grid-row:2/-1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,30px);gap:6px}
.heat .cells i{border-radius:8px;background:var(--s2)}
.heat .cells i.on{background:linear-gradient(160deg,#22D3EE,#0E7C8C);animation:heatin .5s ease both;animation-delay:var(--d)}
@keyframes heatin{from{opacity:0;transform:scale(.6)}}
.flow3{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flow3 li{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:16px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.flow3 li+li::before{content:"";position:absolute;left:33px;top:-11px;width:2px;height:12px;background:rgba(34,211,238,.5)}
.flow3 .fn{grid-row:1/3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(34,211,238,.14);color:var(--cyan);font-weight:800}
.flow3 .fn.gold{background:#3A2E14;color:#F5B83D}
.flow3 b{font-size:1.05rem}
.flow3 small{color:var(--muted);font-size:.9rem;line-height:1.45}
.coinrow{display:flex;justify-content:center;gap:10px;margin-top:16px}
.coinrow span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#3A2A08;background:#F5B83D;box-shadow:0 0 0 3px rgba(245,184,61,.2);animation:coinup 2.4s ease-in-out infinite}
.coinrow span:nth-child(2){animation-delay:.3s}.coinrow span:nth-child(3){animation-delay:.6s}
@keyframes coinup{50%{transform:translateY(-8px)}}
.trainer-card .tc-head{display:flex;align-items:center;gap:16px}
.tc-ph{width:84px;height:84px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,var(--tone),#123a42);flex:none}
.tc-ph svg{width:100%;height:100%}
.tc-head b{font-size:1.3rem;letter-spacing:-.02em}
.tc-head small{display:block;color:var(--muted);font-size:.9rem}
.tc-rt{display:flex;align-items:center;gap:5px;margin-top:6px;font-weight:700}
.tc-rt svg{width:15px;height:15px;color:var(--amber)}
.tc-rt small{display:inline;font-weight:500}
.ticks.checks{grid-template-columns:1fr 1fr;margin-top:20px}
.feed{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.feed li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.feed b{display:block;font-size:.95rem}
.feed small{font-size:.8rem;color:var(--muted)}
.fi{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.fi svg{width:18px;height:18px}
.fi.ok{background:var(--green-bg);color:var(--green)}
.fi.gold{background:#3A2E14;color:#F5B83D}
.fv-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--cyan);font-weight:700;text-decoration:none}
.fv-link svg{width:16px;height:16px;transition:transform .2s}
.fv-link:hover svg{transform:translateX(3px)}
.pm-steps{padding-block:clamp(72px,8vw,104px);border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(22,28,36,.55),transparent)}
.pm-steps h2{font-size:clamp(2rem,3.4vw,2.8rem);max-width:none}
.steps3{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps3 li{display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:22px;background:var(--s1);border:1px solid var(--line)}
.steps3 .sn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--cyan-ink);font-weight:800;margin-bottom:8px}
.steps3 b{font-size:1.2rem}
.steps3 li>span:last-child{color:var(--muted);line-height:1.55}
.pm-faq{padding-block:clamp(72px,8vw,104px) 0;border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.pm-faq h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.pm-faq .muted{margin-top:14px}
.pm-faq .muted a{color:var(--cyan)}
.faq{display:grid;gap:10px}
.faq details{border-radius:18px;background:var(--s1);border:1px solid var(--line);transition:border-color .2s}
.faq details[open]{border-color:rgba(34,211,238,.45)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .fq{width:18px;height:18px;color:var(--muted);transform:rotate(90deg);transition:transform .2s;flex:none}
.faq details[open] .fq{transform:rotate(-90deg);color:var(--cyan)}
.faq details p{padding:0 22px 20px;color:var(--muted);line-height:1.6}
.pm-page .cta-sec{padding-top:88px}
@media (max-width:1100px){
  .pm-hero-grid,.feat-grid,.faq-grid{grid-template-columns:1fr;gap:40px}
  .feat.flip .feat-copy{order:0}
  .pmd{transform:none;animation:none}
  .steps3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pm-hero{padding-block:48px}
  .pmd{padding:14px}
  .pmd-kpis{grid-template-columns:1fr 1fr}
  .pmd-kpis div:last-child{grid-column:1/-1}
  .pmd-rev{flex-direction:column;align-items:stretch}
  .pmd-bars{width:100%;height:48px}
  .fv{padding:16px}
  .fv.split{grid-template-columns:1fr}
  .ticks.checks{grid-template-columns:1fr}
  .heat{grid-template-columns:36px repeat(7,1fr);grid-template-rows:auto repeat(5,24px);gap:4px}
  .heat .cells{grid-template-rows:repeat(5,24px);gap:4px}
  .pillnav{top:72px}
}
@media (prefers-reduced-motion:reduce){ .pmd,.pmd-bars i,.heat .cells i.on,.coinrow span{animation:none} }

/* =================== For residents =================== */
.rs-page .pm-hero h1{max-width:15ch}
.rsv{display:grid;gap:12px;max-width:520px;margin-left:auto;animation:pmdfloat 7s ease-in-out infinite;transform:rotateY(-8deg) rotateX(4deg)}
.rsv-next{padding:20px;border-radius:24px;box-shadow:0 40px 80px rgba(0,0,0,.45)}
.rsv-row{display:flex;justify-content:space-between;align-items:center}
.rsv-when{display:block;font-size:1.7rem;font-weight:850;letter-spacing:-.03em;margin-top:10px}
.rsv-next>small{color:#A9C3C8}
.rsv-who{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.rsv-who>span:nth-child(2){flex:1;line-height:1.3}
.rsv-who small{display:block;color:#A9C3C8;font-size:.82rem}
.rsv-trip{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;background:var(--s1);border:1px solid var(--line)}
.rsv-stop{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;line-height:1.25}
.rsv-stop small{grid-column:2;color:var(--muted);font-size:.8rem}
.rsv-i{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--s2);color:var(--muted)}
.rsv-i.on{background:rgba(34,211,238,.14);color:var(--cyan)}
.rsv-i svg{width:20px;height:20px}
.rsv-line{flex:1;height:2px;position:relative;background:repeating-linear-gradient(90deg,rgba(34,211,238,.5) 0 6px,transparent 6px 12px)}
.rsv-line i{position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(34,211,238,.9);animation:ride 2.6s ease-in-out infinite alternate}
@keyframes ride{to{left:calc(100% - 10px)}}
.rsv-msg{display:flex;align-items:flex-start;gap:10px;padding:14px;border-radius:20px;background:var(--s1);border:1px solid var(--line)}
.rsv-msg p{padding:10px 14px;border-radius:14px 14px 14px 4px;background:#11424B;font-size:.95rem}
.goals{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.goals span{padding:8px 14px;border-radius:999px;font-weight:650;font-size:.92rem;background:rgba(34,211,238,.12);color:var(--cyan);border:1px solid rgba(34,211,238,.3)}
.goals span:nth-child(2){background:var(--green-bg);color:var(--green);border-color:rgba(52,217,140,.3)}
.goals span:nth-child(3){background:rgba(153,132,233,.14);color:#B9A9F2;border-color:rgba(153,132,233,.3)}
.note{margin-top:16px;padding:16px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.note blockquote{margin:8px 0 0;font-size:1.02rem;line-height:1.55}
.days7{display:flex;gap:8px;margin-top:14px}
.days7 span{flex:1;text-align:center;padding:8px 0;border-radius:14px;background:var(--bg);border:1px solid var(--line);font-size:.72rem;font-weight:700;color:var(--cyan);line-height:1.3}
.days7 b{display:block;font-size:1.15rem;color:var(--text)}
.days7 .on{background:#11424B;border-color:var(--cyan)}
.days7 .dim,.days7 .dim b{color:var(--muted)}
.fv-sub{margin-top:14px;font-size:.85rem;font-weight:700}
.tchips2{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
.tchips2.three{grid-template-columns:repeat(3,1fr)}
.tchips2 span{text-align:center;padding:9px 0;border-radius:999px;background:var(--s2);font-size:.85rem;font-weight:650}
.tchips2 .on{background:#0E3B43;box-shadow:inset 0 0 0 1.5px var(--cyan)}
.tchips2 .x{color:#56616D;text-decoration:line-through;background:var(--bg)}
.bookbar{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:14px 16px;border-radius:18px;background:linear-gradient(160deg,var(--teal-a),var(--teal-b))}
.bookbar small{display:block;font-size:.72rem;color:#9FE8F4;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.bookbar b{font-size:1.15rem}
.bookbar .bk{padding:10px 20px;border-radius:999px;background:#fff;color:#0E1319;font-weight:750}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats3 div{padding:16px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.stats3 b{display:block;font-size:1.8rem;font-weight:850;letter-spacing:-.04em;line-height:1}
.stats3 small{color:var(--muted);font-size:.8rem}
.stats3 .tile-teal small{color:#A9C3C8}
.feed li .chip{margin-left:auto}
.streak{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.streak .fv-h{margin:0}
.dots4{display:flex;gap:6px}
.dots4 i{width:12px;height:12px;border-radius:50%;background:#2A3541}
.dots4 i.on{background:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.streak small{margin-left:auto;color:var(--muted)}
.talk .ci svg[class]{width:19px;height:19px}
@media (max-width:1100px){ .rsv{transform:none;animation:none;margin-left:0} }
@media (max-width:640px){
  .tchips2{grid-template-columns:repeat(3,1fr)}
  .stats3 b{font-size:1.4rem}
  .rsv-trip{gap:10px;padding:14px}
  .streak{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){ .rsv,.rsv-line i{animation:none} }

/* =================== For trainers =================== */
.tr-page .pm-hero h1{max-width:15ch}
.trd{max-width:520px;margin-left:auto;padding:20px;border-radius:26px;background:var(--s1);border:1px solid var(--line);box-shadow:0 40px 80px rgba(0,0,0,.45);transform:rotateY(-8deg) rotateX(4deg);animation:pmdfloat 7s ease-in-out infinite}
.trd-top{display:flex;justify-content:space-between;align-items:center}
.trd-top small{display:block;font-size:.78rem;color:var(--muted)}
.trd-top b{font-size:1.6rem;letter-spacing:-.03em}
.trd-cash{margin-top:14px;padding:18px;border-radius:20px}
.trd-cash>b{display:block;font-size:2.2rem;font-weight:850;letter-spacing:-.04em;margin-top:4px}
.trd-cl{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.trd-cl small{color:#A9C3C8;font-size:.8rem}
.trd-btns{display:flex;gap:8px;margin-top:14px}
.trd-btns span{font-size:.85rem;font-weight:700;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.12)}
.trd-btns span:first-child{background:#fff;color:#0E1319}
.trd-bento{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.trd-bento div{padding:14px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.trd-bento svg{width:18px;height:18px;color:var(--muted)}
.trd-bento b{display:block;font-size:1.7rem;font-weight:850;letter-spacing:-.04em;margin-top:8px;line-height:1}
.trd-bento small{display:block;font-size:.76rem;color:var(--muted);margin-top:6px}
.trd-bento .hot{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)}
.trd-bento .hot svg,.trd-bento .hot small{color:var(--cyan-ink)}
.req{margin-top:14px;padding:16px;border-radius:18px;background:var(--bg);border:1px solid rgba(34,211,238,.4)}
.req.small{border-color:var(--line);opacity:.8}
.req-h{display:flex;align-items:center;gap:12px}
.req-h>span:nth-child(2){flex:1;line-height:1.3}
.req-h small{display:block;color:var(--muted);font-size:.82rem}
.req-p{font-size:1.15rem}
.req-m{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.88rem;color:#C9D2DB}
.req-m span{display:flex;align-items:center;gap:6px}
.req-a{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.req-a span{text-align:center;padding:10px;border-radius:999px;font-weight:700;border:1px solid var(--line)}
.req-a .ok{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)}
.bldgs{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.bldgs li{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.bldgs li>span:nth-child(2){flex:1;line-height:1.3}
.bldgs small{display:block;color:var(--muted);font-size:.82rem}
.bi2{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan);font-size:1.3rem;font-weight:700;flex:none}
.bi2 svg{width:20px;height:20px}
.rate{font-size:1.2rem}.rate small{display:inline;font-size:.75rem}
.bldgs .add{border-style:dashed;background:transparent}
.bldgs .add b{color:var(--cyan)}
.sched-h{display:flex;justify-content:space-between;align-items:flex-end;padding:16px 18px;border-radius:18px}
.sched-h b{display:block;font-size:2rem;font-weight:850;letter-spacing:-.04em;margin-top:4px}
.sh-r{text-align:right}.sh-r b{font-size:1rem}.sh-r small{color:#A9C3C8;font-size:.8rem}
.week{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.week li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.wd{width:40px;text-align:center;font-size:.72rem;font-weight:700;color:var(--cyan);line-height:1.2;flex:none}
.wd b{display:block;font-size:1.05rem;color:var(--text)}
.wb{flex:1;min-width:0}
.wb small{display:block;font-size:.76rem;color:var(--muted)}
.bar2{position:relative;display:block;height:16px;margin-top:6px;border-radius:6px;background:#11424B;border:1px solid rgba(34,211,238,.35);overflow:hidden}
.bar2 i{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,#2C3540 0 4px,#1F262F 4px 8px)}
.wo{font-size:.78rem;font-weight:700;white-space:nowrap}
.week .add{border-style:dashed;background:transparent}
.week .add b{color:var(--cyan);font-size:.95rem}
.spark{display:block;width:100%;height:90px;margin-top:12px}
.spark .sa{fill:rgba(34,211,238,.12)}
.spark .sl{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:1200;animation:sparkdraw 1.6s ease forwards}
@keyframes sparkdraw{to{stroke-dashoffset:0}}
.tr-page .stats3{margin-top:12px}
.client{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.client>span:nth-child(2){flex:1;line-height:1.3}
.client small{display:block;color:var(--muted);font-size:.8rem}
.codein{display:flex;gap:10px;justify-content:center;margin-top:16px}
.codein span{width:54px;height:62px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;font-weight:800;border:1.5px solid rgba(255,255,255,.7)}
.codein span.on{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.15)}
.fv-note.c{text-align:center}
.earn{margin-top:16px;padding:18px;border-radius:20px}
.earn>b{display:block;font-size:2.2rem;font-weight:850;letter-spacing:-.04em;margin:4px 0 8px}
.ln2{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;color:#A9C3C8;padding-top:8px;margin-top:8px;border-top:1px solid rgba(255,255,255,.1)}
@media (max-width:1100px){ .trd{transform:none;animation:none;margin-left:0} }
@media (max-width:640px){
  .trd{padding:14px}
  .trd-bento b{font-size:1.35rem}
  .codein span{width:46px;height:54px}
  .ln2{flex-direction:column;gap:2px}
}
@media (prefers-reduced-motion:reduce){ .trd,.spark .sl{animation:none;stroke-dashoffset:0} }

/* =================== How SuiteFit works =================== */
.how-hero{padding-block:72px 48px}
.how-hero h1{max-width:none}
.how-hero .lede{max-width:58ch}
.how-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.how-tabs a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--s1);border:1px solid var(--line);text-decoration:none;transition:border-color .2s,background .2s}
.how-tabs a:hover{border-color:rgba(34,211,238,.55);background:#18212A}
.how-tabs svg{width:44px;height:44px;padding:11px;border-radius:14px;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.how-tabs b{display:block;font-size:1.05rem}
.how-tabs small{color:var(--muted);font-size:.88rem}
.flow-tag{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--cyan);margin-bottom:12px}
.flow-tag svg{width:18px;height:18px}
.how-res{border-top:1px solid var(--line);scroll-margin-top:72px}
.flow-sec{padding-block:clamp(72px,8vw,104px);border-top:1px solid var(--line);scroll-margin-top:72px}
.flow-sec:nth-of-type(odd){background:linear-gradient(180deg,rgba(22,28,36,.55),transparent)}
.flow-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.flow-head h2{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.04em;max-width:22ch}
.flow-lede{margin-top:12px;color:var(--muted);font-size:1.12rem;max-width:52ch}
.flow4{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.flow4 li{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:22px;background:var(--s1);border:1px solid var(--line)}
.flow4 li:not(:last-child)::after{content:"";position:absolute;top:42px;right:-15px;width:16px;height:2px;background:rgba(34,211,238,.5);z-index:1}
.fl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.flow4 .sn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--cyan-ink);font-weight:800}
.fl-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan)}
.fl-ic svg{width:20px;height:20px}
.flow4 b{font-size:1.12rem;line-height:1.3}
.flow4 li>span:not(.fl-top){color:var(--muted);line-height:1.55;font-size:.95rem}
.fl-chip{align-self:flex-start;margin-top:auto;font-style:normal;font-size:.78rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--green-bg);color:var(--green)}
.how-page .resources{padding-top:clamp(72px,8vw,104px);border-top:1px solid var(--line)}
@media (max-width:1100px){
  .flow4{grid-template-columns:1fr 1fr}
  .flow4 li::after{display:none}
}
@media (max-width:700px){
  .how-tabs,.flow4{grid-template-columns:1fr}
  .flow-head .btn{width:100%}
}

/* =================== Contact =================== */
.ct-hero{padding-block:72px 40px}
.ct-hero h1{max-width:none}
.ct-hero .lede{max-width:56ch}
.promises{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:980px}
.promises li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--s1);border:1px solid var(--line)}
.promises svg{width:42px;height:42px;padding:10px;border-radius:13px;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.promises b{display:block}
.promises small{color:var(--muted);font-size:.88rem}
.ct-main{padding-block:24px 0}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:24px;align-items:start}
.ct-formcard{padding:36px;border-radius:28px;background:var(--s1);border:1px solid var(--line)}
.ct-formcard h2{font-size:clamp(1.7rem,2.6vw,2.2rem);max-width:none}
.ct-formcard>.muted{margin-top:6px;font-size:.92rem}
.rq{color:var(--cyan);margin-left:3px}
.opt{margin-left:8px;font-size:.78rem;font-weight:500;color:var(--muted)}
.cform{margin-top:24px;display:grid;gap:18px}
.cform[hidden]{display:none}
.roles{border:0;margin:0;padding:0}
.roles legend{font-weight:650;margin-bottom:10px;padding:0}
.rgrid{display:flex;flex-wrap:wrap;gap:8px}
.rpill{position:relative;cursor:pointer}
.rpill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rpill span{display:block;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-weight:600;font-size:.93rem;transition:border-color .2s,background .2s,color .2s}
.rpill input:hover+span{border-color:#3E4B57}
.rpill input:checked+span{background:rgba(34,211,238,.14);border-color:var(--cyan);color:var(--cyan)}
.rpill input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:3px}
.grid2f{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid2f[hidden]{display:none}
.fld label{display:block;font-weight:650;margin-bottom:8px}
.fld input,.fld textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:500 1rem var(--font);transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical;min-height:140px;line-height:1.55}
.fld input::placeholder,.fld textarea::placeholder{color:#5F6B77}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.15)}
.fld.bad input,.fld.bad textarea{border-color:var(--red)}
.err{min-height:0;margin-top:6px;font-size:.85rem;color:var(--red)}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fsub{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.fsub .btn{min-width:180px}
.fsub .btn[disabled]{opacity:.7;cursor:wait}
.fnote{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
.fnote svg{color:var(--green)}
.fstatus:empty{display:none}
.fstatus.bad{padding:12px 16px;border-radius:12px;background:rgba(229,127,119,.12);color:#F2A49D;font-size:.92rem}
.fstatus a{color:inherit}
.csent{padding:40px 8px 8px;text-align:center}
.csent:focus{outline:0}
.cs-i{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 16px;border-radius:50%;border:3px solid var(--green);color:var(--green);background:rgba(52,217,140,.08)}
.cs-i svg{width:34px;height:34px}
.csent h2{margin:0 auto;max-width:none;font-size:2rem}
.csent p{margin:10px auto 24px;color:var(--muted);max-width:40ch}
.ct-side{display:grid;gap:16px}
.ct-card{padding:26px;border-radius:24px;background:var(--s1);border:1px solid var(--line)}
.ct-card h3{font-size:1.2rem}
.ct-lines{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.ct-lines a{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.ct-lines .ci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.ct-lines .ci svg{width:19px;height:19px}
.ct-lines small{display:block;font-size:.76rem;color:var(--muted)}
.ct-lines b{font-weight:650;line-height:1.35}
.ct-lines a:hover b{color:var(--cyan)}
.quick{display:grid;gap:8px;margin-top:14px}
.quick a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);text-decoration:none;transition:border-color .2s}
.quick a:hover{border-color:rgba(34,211,238,.55)}
.quick .qi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.quick .qi svg{width:18px;height:18px}
.quick a>span:nth-child(2){flex:1;line-height:1.3}
.quick small{display:block;font-size:.8rem;color:var(--muted)}
.quick .go{width:18px;height:18px;color:var(--muted);transition:transform .2s,color .2s}
.quick a:hover .go{color:var(--cyan);transform:translateX(3px)}
@media (max-width:1100px){ .ct-grid{grid-template-columns:1fr} .promises{grid-template-columns:1fr} }
@media (max-width:640px){
  .ct-formcard{padding:22px}
  .grid2f{grid-template-columns:1fr}
  .fsub .btn{width:100%}
}

/* =================== Activate SuiteFit =================== */
.act-hero{padding-block:72px 88px}
.act-hero h1{max-width:none}
.act-hero .lede{max-width:58ch}
.apaths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;align-items:stretch}
.ap{position:relative;display:flex;flex-direction:column;padding:30px;border-radius:26px;background:var(--s1);border:1px solid var(--line);transition:border-color .2s,transform .2s}
.ap:hover{border-color:rgba(34,211,238,.45);transform:translateY(-3px)}
.ap.hl{background:radial-gradient(120% 80% at 80% 0%,rgba(34,211,238,.14),transparent 60%),#121C24;border-color:rgba(34,211,238,.55);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.ap-badge{position:absolute;top:22px;right:22px;font-size:.75rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--green-bg);color:var(--green)}
.ap-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan)}
.ap-ic svg{width:26px;height:26px}
.ap-who{margin-top:22px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.ap h2{margin-top:8px;font-size:clamp(1.6rem,2.2vw,2rem);letter-spacing:-.03em;max-width:none;line-height:1.1}
.ap-p{margin-top:12px;color:var(--muted);line-height:1.55}
.ap-pts{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.ap-pts li{display:flex;align-items:center;gap:10px;font-weight:600}
.ap-pts svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--green-bg);color:var(--green);flex:none}
.ap-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:28px}
.ap-more{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:650;text-decoration:none}
.ap-more svg{width:16px;height:16px;transition:transform .2s}
.ap-more:hover{color:var(--cyan)}
.ap-more:hover svg{transform:translateX(3px)}
.act-pkg{padding-block:clamp(72px,8vw,104px);border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(22,28,36,.55),transparent)}
.pkg-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.pkg-copy h2{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.04em;max-width:16ch}
.pkg-copy .muted{margin-top:14px;font-size:1.12rem;max-width:44ch}
.pkg-copy .ctas{margin-top:28px}
.pkg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pkg li{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:20px;background:var(--s1);border:1px solid var(--line)}
.pk-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan);margin-bottom:8px}
.pk-ic svg{width:21px;height:21px}
.pkg b{font-size:1.08rem}
.pkg li>span:last-child{color:var(--muted);line-height:1.5;font-size:.95rem}
.act-help{padding-block:clamp(72px,8vw,104px) clamp(72px,9vw,112px)}
.help-card{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:36px 40px;border-radius:28px;background:#0F1B22;border:1px solid rgba(34,211,238,.22)}
.help-card h2{font-size:clamp(1.6rem,2.6vw,2.2rem);max-width:none}
.help-card .muted{margin-top:8px}
@media (max-width:1100px){ .apaths{grid-template-columns:1fr} .pkg-grid{grid-template-columns:1fr;gap:36px} }
@media (max-width:640px){
  .act-hero{padding-block:48px 64px}
  .ap{padding:24px}
  .pkg{grid-template-columns:1fr}
  .help-card{padding:26px 22px}
  .ap-cta .btn,.help-card .btn{width:100%}
}

/* =================== Activate: property managers =================== */
.nav .nav-cta[aria-current="page"]{background:var(--cyan);color:var(--cyan-ink)}
.pa-hero{padding-block:64px 80px;background:radial-gradient(55% 70% at 85% 10%,rgba(34,211,238,.12),transparent 65%),var(--bg)}
.pa-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.pa-copy h1{margin-top:14px;font-size:clamp(2.3rem,3.6vw,3.4rem);font-weight:850;letter-spacing:-.04em;line-height:1.04;max-width:14ch}
.pa-copy .accent{color:var(--cyan)}
.pa-copy .lede{margin-top:18px;font-size:1.12rem;line-height:1.6;color:#B9C4CF;max-width:46ch}
.pa-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;max-width:460px}
.pa-steps li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--s1);border:1px solid var(--line)}
.pa-steps .sn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--cyan-ink);font-weight:800;flex:none}
.pa-steps b{display:block}
.pa-steps small{color:var(--muted);font-size:.88rem}
.pa-poster{display:flex;align-items:center;gap:18px;margin-top:28px;max-width:460px}
.pa-poster .frame{width:120px;flex:none;padding:6px;border-radius:3px;background:linear-gradient(145deg,#3a4049,#0b0d10 60%,#24282e);box-shadow:0 0 0 1px #000,14px 20px 30px rgba(0,0,0,.5);transform:rotate(-3deg)}
.pa-poster img{width:100%;height:auto;display:block}
.pa-poster .muted{font-size:.92rem;line-height:1.5}
.pa-formwrap{position:sticky;top:96px}
.pa-formwrap .ct-formcard h2{margin-top:4px}
.aform{gap:16px}
.fld.full{grid-column:1/-1}
.hint{display:block;margin-top:6px;color:var(--muted);font-size:.82rem}
.posters{border:0;margin:6px 0 0;padding:0}
.posters legend{font-weight:650;margin-bottom:10px;padding:0}
.ps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ps{position:relative;cursor:pointer}
.ps input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ps-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;height:100%;padding:12px 8px;border-radius:14px;border:1px solid var(--line);background:var(--bg);transition:border-color .2s,background .2s}
.ps input:hover+.ps-card{border-color:#3E4B57}
.ps input:checked+.ps-card{border-color:var(--cyan);background:rgba(34,211,238,.1)}
.ps input:focus-visible+.ps-card{outline:2px solid var(--cyan);outline-offset:3px}
.ps-vis{height:54px;display:grid;place-items:end center;margin-bottom:6px}
.ps-frame{display:block;border-radius:2px;border:2px solid #4A5661;background:linear-gradient(160deg,#16303A,#0B1117)}
.ps input:checked+.ps-card .ps-frame{border-color:var(--cyan)}
.ps-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--s2);color:var(--muted);margin-bottom:9px}
.ps-ic svg{width:17px;height:17px}
.ps input[value=digital]+.ps-card .ps-ic svg{transform:rotate(90deg)}
.ps input:checked+.ps-card .ps-ic{background:rgba(34,211,238,.18);color:var(--cyan)}
.ps-card b{font-size:.85rem;line-height:1.25}
.ps-card small{font-size:.72rem;color:var(--muted)}
.aform .fsub .btn{width:100%}
.aform .fnote{align-items:flex-start;line-height:1.5}
.aform .fnote svg{margin-top:3px;flex:none}
.pa-page .act-pkg{padding-block:clamp(72px,8vw,104px)}
.pa-page .resources{padding-bottom:clamp(72px,9vw,112px)}
@media (max-width:1100px){ .pa-grid{grid-template-columns:1fr} .pa-formwrap{position:static} .ps-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .ps-grid{grid-template-columns:1fr 1fr} .pa-poster .frame{width:96px} }

/* =================== Request a trainer (residents) =================== */
.rq-page .pa-copy h1{max-width:17ch}
.fld select{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:500 1rem var(--font);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8C98A5 50%),linear-gradient(135deg,#8C98A5 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fld select:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.15)}
.fld.bad select{border-color:var(--red)}
.roles legend .opt{margin-left:6px}
.match{max-width:460px;margin-top:28px;padding:20px;border-radius:22px;background:var(--s1);border:1px solid var(--line)}
.match .tc-head{display:flex;align-items:center;gap:16px;margin-top:14px}
.match .tc-ph{display:block;flex:none;width:64px;height:64px;border-radius:18px;overflow:hidden}
.match-b{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
.match-b svg{color:var(--cyan)}
.pkg.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){ .pkg.three{grid-template-columns:1fr} }

/* =================== Trainer application =================== */
.ap-page .pa-copy h1{max-width:13ch}
.grid3f{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:18px}
.ambs{border:0;margin:4px 0 0;padding:0}
.ambs legend{font-weight:650;margin-bottom:10px;padding:0;line-height:1.4}
.amb-grid{display:grid;gap:8px}
.amb{position:relative;cursor:pointer}
.amb input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.amb-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);transition:border-color .2s,background .2s}
.amb input:hover+.amb-card{border-color:#3E4B57}
.amb input:checked+.amb-card{border-color:var(--cyan);background:rgba(34,211,238,.1)}
.amb input:focus-visible+.amb-card{outline:2px solid var(--cyan);outline-offset:3px}
.amb-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--s2);color:var(--muted);flex:none}
.amb-ic svg{width:18px;height:18px}
.amb input[value=digital]+.amb-card .amb-ic svg{transform:rotate(90deg)}
.amb input:checked+.amb-card .amb-ic{background:rgba(34,211,238,.18);color:var(--cyan)}
.amb-card b{display:block;font-size:.95rem}
.amb-card small{color:var(--muted);font-size:.84rem}
.amb-note{display:flex;gap:16px;align-items:flex-start;max-width:460px;margin-top:28px;padding:20px;border-radius:20px;background:var(--s1);border:1px solid rgba(34,211,238,.3)}
.amb-note .pk-ic{margin:0;flex:none}
.amb-note b{display:block;font-size:1.05rem}
.amb-note p{margin-top:6px;color:var(--muted);font-size:.93rem;line-height:1.55}
@media (max-width:640px){ .grid3f{grid-template-columns:1fr 1fr} .grid3f .fld:first-child{grid-column:1/-1} }

/* =================== Property dashboard UI (web app) =================== */
.db-app{--sb:236px;width:1200px;display:grid;grid-template-columns:var(--sb) 1fr;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.4;border-radius:18px;overflow:hidden;text-align:left}
.db-app svg{display:inline-block}
.db-side{display:flex;flex-direction:column;gap:14px;padding:20px 14px;background:#0B1015;border-right:1px solid var(--line)}
.db-logo{display:flex;align-items:center;gap:8px;padding:0 6px}
.db-logo img{width:24px;height:auto}.db-logo img.w{width:auto;height:14px}
.db-prop{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:14px;background:var(--s1);border:1px solid var(--line);color:var(--text);font:inherit;text-align:left}
.db-prop>span:nth-child(2){flex:1;line-height:1.25}.db-prop small{display:block;color:var(--muted);font-size:11px}
.db-pi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}
.db-pi svg{width:17px;height:17px}.db-pi.sm{width:30px;height:30px}
.dn{width:14px;height:14px;transform:rotate(90deg);color:var(--muted)}
.db-navs{display:grid;gap:2px}
.db-nav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:#B9C4CF;text-decoration:none;font-weight:600}
.db-nav svg{width:18px;height:18px;color:var(--muted)}
.db-nav:hover{background:var(--s1)}
.db-nav.on{background:rgba(34,211,238,.12);color:var(--text)}.db-nav.on svg{color:var(--cyan)}
.db-nav em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;min-width:20px;text-align:center;padding:2px 6px;border-radius:999px;background:var(--pink);color:#3A0D16}
.db-help{margin-top:auto;padding:14px;border-radius:14px;background:var(--s1);border:1px solid var(--line);display:grid;gap:6px}
.db-help small{color:var(--muted);font-size:12px;line-height:1.4}
.db-main{min-width:0;display:flex;flex-direction:column}
.db-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line)}
.db-top h3{font-size:22px;letter-spacing:-.02em;line-height:1.1}.db-top small{color:var(--muted);font-size:12.5px}
.db-tools{display:flex;align-items:center;gap:10px}
.db-search,.db-range,.db-input{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--s1);border:1px solid var(--line);color:var(--muted);font-size:13px;white-space:nowrap}
.db-search svg,.db-range svg,.db-input svg{width:15px;height:15px}
.db-range{color:var(--text);font-weight:600}.db-range svg:first-child{color:var(--cyan)}
.db-iconbtn{position:relative;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--s1);border:1px solid var(--line)}
.db-iconbtn svg{width:17px;height:17px}.db-iconbtn i{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.db-user{display:flex;align-items:center;gap:10px;padding-left:6px;line-height:1.2}.db-user small{display:block;color:var(--muted);font-size:11px}
.db-av{width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center}
.db-av svg{width:100%;height:100%}
.db-av.ini{background:var(--s2);font-size:11px;font-weight:700;color:#C9D2DB}
.db-av.lg{width:52px;height:52px;border-radius:16px}
.db-body{padding:22px 24px 26px;display:grid;gap:16px}
.db-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.db-kpis.three{grid-template-columns:repeat(3,1fr)}
.db-kpi{padding:16px;border-radius:18px;background:var(--s1);border:1px solid var(--line)}
.db-kpi .k-top{display:flex;justify-content:space-between;align-items:center}
.db-kpi small{color:var(--muted);font-size:12.5px;font-weight:600}
.db-kpi svg{width:17px;height:17px;color:var(--muted)}
.db-kpi b{display:block;font-size:28px;font-weight:850;letter-spacing:-.04em;margin-top:8px;line-height:1}
.db-kpi em{display:block;margin-top:8px;font-style:normal;font-size:12px;color:var(--muted)}.db-kpi em.up{color:var(--green)}
.db-kpi.teal{background:linear-gradient(160deg,var(--teal-a),var(--teal-b));border-color:rgba(34,211,238,.25)}.db-kpi.teal small,.db-kpi.teal em{color:#A9C3C8}.db-kpi.teal em.up{color:var(--green)}
.db-kpi.gold b{color:#F5B83D}
.db-grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.db-grid2.b{grid-template-columns:1fr 1fr}.db-grid2.rev{grid-template-columns:.9fr 1.1fr}.db-grid2.props{grid-template-columns:1.6fr .8fr}.db-grid2.sup{grid-template-columns:1fr 1fr}
.db-card{padding:18px;border-radius:18px;background:var(--s1);border:1px solid var(--line);min-width:0}
.db-card.flush{padding:0;overflow:hidden}
.db-ch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.db-ch.pad{padding:16px 18px 0}
.db-ch b{font-size:15px;display:flex;align-items:center;gap:8px}.db-ch small{color:var(--muted);font-size:12px}.db-ch a{color:var(--cyan);font-size:12.5px;font-weight:650}
.hic{width:18px;height:18px;color:var(--cyan)}
.db-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:12px;font-weight:650}
.db-seg span{padding:5px 12px;border-radius:999px;color:var(--muted)}.db-seg .on{background:var(--s2);color:var(--text)}
.db-seg.big{font-size:13px}.db-seg em{font-style:normal;color:var(--muted);margin-left:4px;font-weight:600}
.db-bars{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:18px}
.db-bars .b{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.db-bars i{position:relative;display:block;width:100%;max-width:38px;height:var(--h);border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#22D3EE,#0E7C8C)}
.db-bars i span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:#C9D2DB}
.db-bars small{font-size:11px;color:var(--muted)}
.db-bars .b:last-child i{box-shadow:0 0 0 3px rgba(34,211,238,.2)}
.db-bars.gold i{background:linear-gradient(180deg,#F5B83D,#A8741B)}.db-bars.gold .b:last-child i{box-shadow:0 0 0 3px rgba(245,184,61,.25)}
.db-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.db-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.db-list .t{width:64px;white-space:nowrap;font-size:12px;font-weight:700;color:var(--cyan);flex:none}
.db-list .w{flex:1;min-width:0;line-height:1.3}.db-list .w small{display:block;color:var(--muted);font-size:12px}
.db-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--s2);color:#C9D2DB;white-space:nowrap}
.db-chip .ico{width:12px;height:12px}
.db-chip.ok{background:var(--green-bg);color:var(--green)}.db-chip.live{background:rgba(34,211,238,.14);color:var(--cyan)}
.db-chip.wait{background:var(--amber-bg);color:var(--amber)}.db-chip.done{background:rgba(153,132,233,.16);color:#B9A9F2}.db-chip.bad{background:rgba(229,127,119,.14);color:var(--red)}
.db-heat{display:grid;grid-template-columns:44px repeat(7,1fr);grid-template-rows:auto repeat(5,26px);gap:5px}
.db-heat .dh{text-align:center;font-size:11px;color:var(--muted);font-weight:650}.db-heat .sh{grid-column:1;font-size:11px;color:var(--muted);align-self:center}
.db-heat .cells{grid-column:2/-1;grid-row:2/-1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,26px);gap:5px}
.db-heat i{border-radius:7px;background:var(--s2)}.db-heat i.l1{background:rgba(34,211,238,.3)}.db-heat i.l2{background:rgba(34,211,238,.6)}.db-heat i.l3{background:#22D3EE}
.db-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.db-filters .db-input{flex:1;min-width:160px}
.db-stack{display:grid;gap:16px}
.db-list.cols2{grid-template-columns:1fr 1fr}
.db-list.cols2 .t{width:86px}
.db-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:999px;background:var(--cyan);color:var(--cyan-ink);font-weight:700;font-size:13px;white-space:nowrap}
.db-btn.sm{padding:8px 14px;font-size:12.5px}.db-btn.ghost{background:transparent;border:1px solid #33404C;color:var(--text)}
.db-table{width:100%;border-collapse:collapse}
.db-table th{padding:12px 18px;text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:#121820;border-bottom:1px solid var(--line)}
.db-table td{padding:12px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.db-table td small{display:block;color:var(--muted);font-size:12px}
.db-table .num{text-align:right}
.db-table tbody tr:hover td{background:rgba(255,255,255,.02)}
.db-who{display:flex;align-items:center;gap:10px;white-space:nowrap}.db-who small{display:block;color:var(--muted);font-size:12px}
.db-foot{display:flex;align-items:center;gap:8px;padding:12px 18px;font-size:12px;color:var(--muted)}.db-foot svg{width:14px;height:14px;color:var(--green)}
.db-tgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.db-tcard{padding:18px;border-radius:18px;background:var(--s1);border:1px solid var(--line);display:grid;gap:14px}
.tc-h{display:flex;align-items:center;gap:12px}.tc-h>span:nth-child(2){flex:1;line-height:1.3}.tc-h b{font-size:16px}.tc-h small{display:block;color:var(--muted);font-size:12.5px}
.tc-checks{display:flex;gap:6px;flex-wrap:wrap}
.db-vc{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;padding:5px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.db-vc svg{width:13px;height:13px}.db-vc.ok svg{color:var(--green)}.db-vc.wait{border-color:rgba(245,184,61,.4)}.db-vc.wait svg{color:var(--amber)}
.tc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tc-stats span{padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.tc-stats b{display:flex;align-items:center;gap:4px;font-size:15px}.tc-stats .st{width:13px;height:13px;color:var(--amber)}.tc-stats small{color:var(--muted);font-size:11.5px}
.tc-a{display:flex;gap:8px}
.teal-card{background:linear-gradient(160deg,var(--teal-a),var(--teal-b));border-color:rgba(34,211,238,.25);display:flex;flex-direction:column;gap:6px}
.db-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.teal-card .big{font-size:44px;font-weight:850;letter-spacing:-.04em;line-height:1.05}.teal-card>small{color:#A9C3C8}
.rev-split{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding-top:16px}
.rev-split span{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.18)}.rev-split small{display:block;font-size:11px;color:#A9C3C8}.rev-split b{font-size:15px}
.db-mini{display:block;width:110px;height:6px;border-radius:6px;background:var(--s2);overflow:hidden}.db-mini i{display:block;height:100%;background:var(--cyan);border-radius:6px}
.db-p{color:var(--muted);font-size:13px;margin:-6px 0 14px;line-height:1.5}
.db-f{display:grid;gap:6px;margin-bottom:12px}.db-f label{font-size:12.5px;font-weight:650}
.db-f .db-input{color:var(--text)}.db-input.area{min-height:64px;align-items:flex-start;white-space:normal}.db-input.ph{color:#5F6B77}.db-input.sel{justify-content:space-between}
.db-pills{display:flex;gap:6px;flex-wrap:wrap}.db-pills span{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:12.5px;font-weight:600}
.db-pills .on{border-color:var(--cyan);background:rgba(34,211,238,.12);color:var(--cyan)}
.db-tk{font-size:11px;font-weight:700;padding:4px 9px;border-radius:8px;background:rgba(34,211,238,.12);color:var(--cyan);flex:none}.db-tk.rp{background:rgba(229,127,119,.14);color:var(--red)}

/* =================== Property dashboard page =================== */
.db-hero{padding-block:72px 64px;background:radial-gradient(60% 60% at 70% 30%,rgba(34,211,238,.12),transparent 65%),var(--bg)}
.db-hero-copy{max-width:760px}
.db-hero h1{margin-top:14px;font-size:clamp(2.4rem,4.2vw,3.8rem);font-weight:850;letter-spacing:-.04em;line-height:1.04}
.db-hero .accent{color:var(--cyan)}
.db-hero .lede{margin-top:18px;max-width:58ch;font-size:1.15rem;line-height:1.6;color:#B9C4CF}
.db-hero .ctas{margin-top:28px}
.shot{margin:44px 0 0;border-radius:22px;background:#0A0E13;border:1px solid var(--line);box-shadow:0 50px 100px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02);overflow:hidden}
.shot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:#0E141A}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#2A3541}
.shot-bar span{margin-left:12px;padding:4px 14px;border-radius:8px;background:var(--s1);font-size:.8rem;color:var(--muted)}
.shot-view{position:relative;overflow:hidden}
.shot-view.scroll{overflow-x:auto}
.shot-in{transform-origin:top left;width:1200px}
.shot-in .db-app{border-radius:0}
.shot-view.scroll .shot-in{margin-right:calc(var(--sw) - 1200px)}
.pkg.four{grid-template-columns:repeat(4,1fr);margin-top:20px}
.dsec{padding-block:clamp(72px,8vw,104px);border-top:1px solid var(--line);scroll-margin-top:72px}
.dsec:nth-of-type(even){background:linear-gradient(180deg,rgba(22,28,36,.55),transparent)}
.dsec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
.dsec h2{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.04em;max-width:18ch}
.dsec-head .muted{margin-top:14px;font-size:1.1rem;max-width:46ch}
.dsec-bl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dsec-bl li{display:flex;gap:12px;align-items:flex-start}
.dsec-bl svg{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--green-bg);color:var(--green);flex:none;margin-top:1px}
.dsec-bl b{display:block}
.dsec-bl li>span{color:var(--muted);line-height:1.5}
.db-page .dsec .shot{margin-top:36px}
@media (max-width:1100px){ .pkg.four{grid-template-columns:1fr 1fr} .dsec-head{grid-template-columns:1fr;gap:24px} }
@media (max-width:640px){ .pkg.four{grid-template-columns:1fr} .db-hero{padding-block:48px} .shot{margin-top:32px;border-radius:16px} }

/* =================== Legal pages =================== */
.lg-hero{padding-block:64px 40px;border-bottom:1px solid var(--line);background:radial-gradient(50% 90% at 85% 0%,rgba(34,211,238,.1),transparent 65%),var(--bg)}
.lg-hero h1{margin-top:12px;font-size:clamp(2.2rem,4vw,3.4rem);font-weight:850;letter-spacing:-.04em}
.lg-page .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan)}
.lg-meta{margin-top:14px;color:var(--muted)}
.lg-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;padding-block:48px 96px;align-items:start}
.lg-side{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;display:grid;gap:28px;padding-right:6px;scrollbar-width:thin}
.lg-qh{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.lg-docs,.lg-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lg-docs a,.lg-toc a{display:block;padding:7px 12px;border-radius:10px;color:#B9C4CF;text-decoration:none;font-size:.92rem;line-height:1.35}
.lg-docs a:hover,.lg-toc a:hover{background:var(--s1);color:var(--text)}
.lg-docs a[aria-current]{background:rgba(34,211,238,.12);color:var(--cyan);font-weight:650}
.lg-toc a{font-size:.85rem;padding:5px 12px}
.lg-doc{max-width:780px;font-size:1.02rem;line-height:1.75;color:#C9D2DB}
.lg-doc p,.lg-doc ul,.lg-doc .lg-table,.lg-doc details{margin:0 0 18px}
.lg-doc h2{margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--line);font-size:1.55rem;letter-spacing:-.02em;color:var(--text);max-width:none;scroll-margin-top:90px}
.lg-doc h2:first-of-type{margin-top:28px}
.lg-doc h3{margin:28px 0 10px;font-size:1.15rem;color:var(--text);letter-spacing:-.01em}
.lg-doc strong{color:var(--text)}
.lg-doc ul{padding-left:22px}.lg-doc li{margin:6px 0}.lg-doc li::marker{color:var(--cyan)}
.lg-doc a{color:var(--cyan);text-underline-offset:3px;word-break:break-word}
.lg-notice{padding:18px 20px;border-radius:16px;background:var(--s1);border:1px solid var(--line);border-left:3px solid var(--cyan);font-size:.92rem;line-height:1.65;color:var(--text)}
.lg-quick{padding:20px 22px;border-radius:18px;background:var(--s1);border:1px solid var(--line);margin:0 0 18px}
.lg-quick ol{margin:0;padding-left:0;list-style:none;columns:2;column-gap:28px;font-size:.92rem}
.lg-quick li{break-inside:avoid;margin:4px 0}
.lg-table{overflow-x:auto;border-radius:16px;border:1px solid var(--line)}
.lg-table table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.55;min-width:620px}
.lg-table th,.lg-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.lg-table thead th{background:#121820;color:var(--text);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.lg-table tbody th{color:var(--text);font-weight:650;width:28%}
.lg-table tr:last-child>*{border-bottom:0}
.lg-faq{border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.lg-faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;font-weight:650;color:var(--text);list-style:none}
.lg-faq summary::-webkit-details-marker{display:none}
.lg-faq .fq{width:16px;height:16px;transform:rotate(90deg);color:var(--muted);transition:transform .2s;flex:none}
.lg-faq[open] .fq{transform:rotate(-90deg);color:var(--cyan)}
.lg-faq p{padding:0 18px 16px;margin:0}
.lg-top{margin-top:40px}.lg-top a{font-weight:650}
@media (max-width:1000px){ .lg-grid{grid-template-columns:minmax(0,1fr);gap:28px} .lg-side{position:static;max-height:none} .lg-toc{display:none} .lg-docs{display:flex;flex-wrap:wrap;gap:6px} .lg-docs a{border:1px solid var(--line)} }
@media (max-width:640px){ .lg-quick ol{columns:1} .lg-doc{font-size:1rem} }
/* /app */
.app-hero{padding-block:88px 104px;background:radial-gradient(55% 80% at 80% 20%,rgba(34,211,238,.12),transparent 65%),var(--bg)}
.app-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.app-hero h1{margin-top:14px;font-size:clamp(2.3rem,4vw,3.5rem);font-weight:850;letter-spacing:-.04em;line-height:1.05;max-width:16ch}
.app-hero .accent{color:var(--cyan)}
.app-hero .lede{margin-top:18px;font-size:1.15rem;line-height:1.6;color:#B9C4CF;max-width:48ch}
.app-stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.app-store{display:flex;align-items:center;gap:12px;padding:12px 22px 12px 16px;border-radius:16px;background:#000;border:1px solid #3A4552;color:#fff;text-decoration:none;transition:border-color .2s,transform .2s}
.app-store:hover{border-color:var(--cyan);transform:translateY(-2px)}
.app-store svg{width:28px;height:28px}
.app-store small{display:block;font-size:.72rem;line-height:1.1;color:#C9D2DB}
.app-store b{font-size:1.25rem;line-height:1.15}
.app-note{margin-top:16px;font-size:.92rem}
.app-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.app-points li{display:flex;gap:16px;align-items:center;padding:20px;border-radius:20px;background:var(--s1);border:1px solid var(--line)}
.app-points .pk-ic{margin:0;flex:none}
.app-points b{display:block;font-size:1.08rem}.app-points small{color:var(--muted);font-size:.93rem;line-height:1.45}
/* bigger touch area for map pins (visual size unchanged) */
.pinbtn::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
@media (max-width:900px){ .app-grid{grid-template-columns:1fr;gap:40px} .app-hero{padding-block:56px 72px} }