:root{
/* Legacy names kept, repointed to the light "Sunrise glass" palette so
every inline var(--...) usage across the portals updates automatically. */
--blue:#0EA5E9; --cyan:#0EA5E9; --purple:#FB7185; --magenta:#FB7185;
--bg:#F1F8FF;
--panel:rgba(255,255,255,.72); --panel2:rgba(30,41,59,.09);
--line:rgba(30,41,59,.12); --text:#1E293B; --muted:#51607a;
--grad:linear-gradient(120deg,var(--g1),var(--g2),var(--g3));
/* --bar: one fill for any bar whose LENGTH already carries the value. The brand gradient
stays on identity (logo, buttons, headline text); on a data bar it coloured a number the
colour knew nothing about, and made the host's 60%-recovered bar fade into red. */
--bar:#0EA5E9;
/* Figures only: a genuinely narrow face with lining tabular numerals, so money reads like
signage and columns of numbers line up. Everything else keeps --disp. */
--fig:'Archivo Narrow',Inter,system-ui,sans-serif;
--disp:-apple-system,"Segoe UI Semibold","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
min-height:100vh;line-height:1.5}
/* slow ambient drift of the sunrise glows (GPU-safe on a fixed pseudo layer) */
/* ONE fixed, composited layer holds every page-wide glow. Nothing here repaints on scroll: the
page background is a flat colour and this layer only moves by transform. */
body::before{content:"";position:fixed;inset:-20% -10%;z-index:-1;pointer-events:none;will-change:transform;
background:
radial-gradient(1100px 620px at 80% 8%, rgba(251,191,36,.26), transparent 60%),
radial-gradient(940px 640px at 12% 16%, rgba(56,189,248,.22), transparent 58%),
radial-gradient(1000px 760px at 60% 100%, rgba(251,113,133,.14), transparent 60%),
radial-gradient(520px 420px at 20% 18%, rgba(251,191,36,.18), transparent 60%),
radial-gradient(560px 460px at 82% 74%, rgba(56,189,248,.16), transparent 60%);
animation:aimDrift 34s ease-in-out infinite}
@keyframes aimDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(2.4%,-2%,0)}}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
box-shadow:inset 0 0 90px 10px rgba(56,189,248,.22),inset 0 0 220px 40px rgba(56,189,248,.10)}
/* persistent "● LIVE" pulse dot — opacity/scale only (kept under reduced-motion) */
.js-livepulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green,#22C55E);
vertical-align:middle;margin:0 2px;box-shadow:0 0 0 3px rgba(34,197,94,.16);animation:jslivepulse 1.8s ease-in-out infinite}
@keyframes jslivepulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(34,197,94,0)}}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.2px;margin:.2em 0;color:var(--ink)}
a{color:#0284C7;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:22px}
/* the one bar: the same floating glass pill on every page as on the home page */
.top{position:sticky;top:16px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
max-width:1180px;margin:20px auto 0;padding:10px 18px;border-radius:18px;
background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid var(--glassBorder);box-shadow:0 10px 30px rgba(30,60,120,.10);isolation:isolate;transform:translateZ(0)}
.nav{display:flex;align-items:center;flex:1;gap:28px}
/* two auto margins split the free space, so the links sit centred between the mark and the actions */
.nav > a:first-child{margin-left:auto}
.top{margin-bottom:6px}
.nav .nav-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav .op-label{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.04em;
text-transform:uppercase;color:var(--muted)}
.nav .nav-sign{font-weight:700;font-size:14px;color:var(--ink);padding:9px 12px;border-radius:999px;margin:0}
.nav .nav-sign:hover{background:rgba(255,255,255,.7)}
.nav .nav-buy{margin:0;padding:8px 16px;font-size:14px;border-radius:12px}
.brand{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.1px;display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand .logo{display:none}
.logo{width:30px;height:30px;border-radius:8px;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff}
/* gradient logo badge — gradient frame → white line → black inner "Ad In" */
.logobadge{background:var(--brand-grad);border-radius:12px;padding:5px;box-shadow:0 6px 16px rgba(251,113,133,.30);display:inline-block;line-height:0}
.logobadge .inner{background:#0b0f1a;border:1.6px solid #fff;border-radius:8px;color:#fff;font-weight:800;font-size:14px;letter-spacing:.4px;line-height:1;padding:8px 11px;display:block}
/* ---- the TV mark ---- */
.tvlogo{position:relative;display:inline-block;width:88px;height:44px;border-radius:9px;background:#171E2E;padding:3.5px;
box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 14px -6px rgba(20,30,60,.5);vertical-align:middle;isolation:isolate}
.tvlogo::before{content:"";position:absolute;inset:-16px -24px;z-index:-1;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(42,155,243,.9),rgba(37,185,164,.6) 38%,rgba(251,191,36,.45) 62%,rgba(251,113,133,.3) 80%,transparent 100%);
filter:blur(10px);opacity:.9;will-change:transform,opacity;animation:tvglow 4.5s ease-in-out infinite}
.tvlogo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 18px 4px rgba(42,155,243,.45),0 0 36px 10px rgba(37,185,164,.22)}
.tvlogo-scr{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:5px;overflow:hidden;
background:linear-gradient(118deg,#1C63DF 0%,#2A9BF3 52%,#25B9A4 100%)}
.tvlogo-scr::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:36%;transform:translateX(-170%) skewX(-22deg);will-change:transform;
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));animation:tvsweep 7s ease-in-out infinite}
.tvlogo-txt{font-family:var(--disp);font-weight:900;font-size:18px;letter-spacing:-.01em;color:#fff;
text-shadow:0 1px 2px rgba(10,20,50,.45)}
@keyframes tvglow{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.1)}}
@keyframes tvsweep{0%,78%{transform:translateX(-170%) skewX(-22deg)}100%{transform:translateX(360%) skewX(-22deg)}}
@media (prefers-reduced-motion:reduce){.tvlogo::before,.tvlogo-scr::after{animation:none}}
.grad-text{background:linear-gradient(120deg,#0284C7,#EA9A16,#FB7185);-webkit-background-clip:text;background-clip:text;color:transparent}
/* MONEY IN YOUR FAVOUR. The brand gradient runs through amber, and amber is this product's
"needs attention" colour — so a host's earnings and a buyer's total were being drawn in the
same hue as an alert. Anything that is money someone is owed, or is about to spend, gets this
instead: one calm green, no gradient, no ambiguity. */
.money-good{background:linear-gradient(120deg,#22C55E,#15803D);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav a{color:var(--sub);font-weight:600;margin-left:0;font-size:14.5px;transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav .bell{margin-left:16px;font-size:15px}
/* console: the second row under the five groups */
.adminsub{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 18px;padding:4px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid var(--glassBorder);width:max-content;max-width:100%}
.adminsub a{font-size:13px;font-weight:600;color:var(--sub);padding:6px 11px;border-radius:9px;text-decoration:none}
.adminsub a:hover{color:var(--ink);background:rgba(255,255,255,.8)}
.adminsub a.on{color:var(--ink);background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 16px -10px rgba(30,60,120,.4)}
@media(max-width:700px){
.ownernav,.adminsub{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;width:auto;max-width:none;margin:6px -13px 14px !important;padding:2px 13px 6px}
.ownernav::-webkit-scrollbar,.adminsub::-webkit-scrollbar{display:none}
.ownernav .btn,.adminsub a{flex:none;white-space:nowrap}
.adminsub{border-radius:0;border-left:0;border-right:0;background:none;box-shadow:none}
.invfind input{flex:1 0 100%}
}
/* the account menu: a details/summary pill, no JS to open, one line of JS to close on outside click */
.acct{position:relative;margin-left:12px;display:inline-block}
.acct summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink);
border:1px solid rgba(255,255,255,.95);background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.7));border-radius:999px;padding:3px 13px 3px 3px;user-select:none;
box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 8px 20px -12px rgba(30,60,120,.45)}
.acct summary::-webkit-details-marker{display:none}
.acct summary:hover{background:rgba(255,255,255,.95)}
.acct .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(118deg,#1C63DF 0%,#2A9BF3 52%,#25B9A4 100%);color:#fff;font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 2px #171E2E,0 0 12px 1px rgba(42,155,243,.45);text-shadow:0 1px 2px rgba(10,20,50,.45)}
.acct .chev{width:6px;height:6px;border-right:1.5px solid var(--sub);border-bottom:1.5px solid var(--sub);transform:rotate(45deg);margin:-3px 2px 0}
.acct[open] .chev{transform:rotate(-135deg);margin-top:3px}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:6px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid var(--glassBorder);
-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 20px 44px -18px rgba(30,60,120,.45);display:flex;flex-direction:column;z-index:20}
.acct-menu a{margin:0;padding:9px 12px;border-radius:9px;font-size:13.5px;color:var(--ink);font-weight:500}
.acct-menu a:hover{background:rgba(56,189,248,.10)}
.acct-menu .sep{height:1px;background:var(--line);margin:4px 6px}
.acct-menu a.out{color:#BE123C}
@media(max-width:700px){
.acct summary .nm,.acct summary .chev{display:none}.acct summary{padding:3px;gap:0}.acct{margin-left:6px}
.top{flex-wrap:wrap;row-gap:10px;padding:10px 12px}
.nav{flex:0 0 100%;width:100%;order:3;justify-content:flex-start;gap:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -12px;padding:0 12px}
.top{position:sticky}
.top .tvlogo{margin-right:auto}
.nav::-webkit-scrollbar{display:none}
.nav > a{margin:0 14px 0 0;white-space:nowrap;font-size:14px}
.nav > a:first-child{margin-left:0}
.nav .nav-right{position:absolute;right:12px;top:10px;margin:0;gap:4px}
.nav .nav-buy{padding:8px 12px;font-size:13px}
.nav .bell{margin-left:6px}
.top .tvlogo{width:66px;height:40px}
}
.btn{display:inline-block;background:var(--brand-grad);background-size:180% 100%;color:#fff;font-weight:700;border:none;border-radius:12px;padding:13px 22px;cursor:pointer;font-size:15px;font-family:inherit;
box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 6px 14px -6px rgba(180,80,110,.45);
transition:transform .2s ease,box-shadow .2s ease,background-position .6s ease}
.btn:hover{transform:translateY(-2px);background-position:100% 0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 10px 20px -8px rgba(180,80,110,.5)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--glass);border:1px solid var(--glassBorder);color:var(--ink);box-shadow:0 8px 20px rgba(30,60,120,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn.ghost:hover{background:rgba(255,255,255,.82)}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px -4px rgba(180,80,110,.4)}
.btn.sm.ghost{box-shadow:0 6px 14px rgba(30,60,120,.06)}
/* destructive: the same TV, lit red, with a red glow — unmistakable and readable at any size */
.btn.danger{background:linear-gradient(118deg,#B91C1C 0%,#EF4444 55%,#F97316 100%);color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(60,10,10,.5);
border:4px solid #171E2E;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 30px -14px rgba(60,10,10,.5),0 0 22px 2px rgba(239,68,68,.45)}
.btn.danger:hover{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 36px -14px rgba(60,10,10,.55),0 0 30px 4px rgba(239,68,68,.6)}
.btn.sm.danger{border-width:2.5px;border-radius:10px;padding:6px 12px}
.panel{background:var(--card);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
border:1px solid var(--glassBorder);border-radius:18px;padding:22px;margin:16px 0;
/* Glass catching store light: lit along the top edge, with the shadow sitting UNDER the card
instead of blooming outward. The old 40px blue cloud made every panel look like it was
hovering half an inch off the page. */
box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 2px rgba(20,40,80,.06),0 8px 18px -10px rgba(20,40,80,.28);
transition:transform .2s ease,box-shadow .2s ease}
.panel:hover{transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(20,40,80,.07),0 14px 28px -12px rgba(20,40,80,.34)}
.grid{display:grid;gap:16px}
/* Equal-height cards in a row: .panel's own vertical margin and auto height left the four host
questions ragged, with the fourth orphaned on its own row. */
.faq-grid{align-items:stretch}
.faq-grid>.panel{margin:0;height:100%}
.hero{padding:70px 22px 30px;text-align:center}
.hero h1{font-size:clamp(34px,6vw,60px);line-height:1.05;margin:0 auto;max-width:16ch}
.hero p{color:var(--sub);font-size:clamp(16px,2.2vw,20px);max-width:56ch;margin:18px auto 26px}
.stats{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.stat .n{font-family:var(--fig);font-size:36px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.005em}
/* the host pitch: every card is frosted glass with the rim; the stats sit on one glass strip;
the rev-share tiles are lit chips; the form is a pane */
.host-pitch .panel{background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.6));backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
position:relative;isolation:isolate;box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 24px 50px -30px rgba(30,60,120,.4);transition:transform .18s ease,box-shadow .18s ease}
.host-pitch .panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:.55;
background:conic-gradient(from 200deg,#9EE3FF,#B9F1FF,#F8E19D,#FFC9A2,#FFB4B6,#F79BF9,#A578DF,#3F7FE6,#9EE3FF);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.host-pitch .grid .panel:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 30px 60px -30px rgba(30,60,120,.5)}
.host-pitch .stats{margin:22px auto 0;padding:14px 26px;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);width:max-content;max-width:100%;
backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 20px 44px -28px rgba(30,60,120,.45)}
.host-pitch #estimator .panel{background:linear-gradient(160deg,#F5F9FF,#FFFFFF);border-radius:18px}
.host-pitch #estimator .panel::before{opacity:.8}
.host-pitch .hero h1{letter-spacing:-.035em}
.host-pitch h2{letter-spacing:-.02em}
/* Idea 9: eight small TVs standing in for "slots sold" — sold ones get the SAME gradient every
primary button on the site already uses (not a new colour); unsold are the glass tint. No
animation, so nothing to guard for reduced motion. */
.host-pitch #slotslider .panel,#slotslider{background:linear-gradient(160deg,#F5F9FF,#FFFFFF);border-radius:18px}
.slot-cells{display:flex;gap:4px}
.slot-cell{flex:1;aspect-ratio:16/9;border-radius:6px;background:var(--glass);border:1px solid var(--glassBorder)}
.slot-cell.sold{background:linear-gradient(118deg,#1C63DF 0%,#2A9BF3 52%,#25B9A4 100%);border-color:transparent}
#slotRange{accent-color:#2A9BF3}
@media(max-width:600px){
.host-pitch .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;width:auto;margin:22px 0 0;padding:16px 14px}
.host-pitch .stat{text-align:center}
.host-pitch .stat .n{font-size:28px}
.host-pitch #estimator .grid{grid-template-columns:1fr !important}
.host-pitch #estimator .grid .panel{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:12px 14px}
.host-pitch #estimator .grid .panel .tiny:first-child{white-space:nowrap}
.host-pitch .hero{padding:44px 16px 20px}
}
.stat .l{color:var(--sub);font-size:13px}
label{font-weight:600;font-size:14px;display:block;margin-bottom:8px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--gline);border-radius:999px;padding:9px 15px;cursor:pointer;user-select:none;font-size:14px;color:var(--sub);background:var(--glass);transition:.18s}
.chip:hover{border-color:rgba(30,41,59,.22);color:var(--ink)}
.chip input{display:none}
.chip:hover{border-color:var(--g1)}
.chip:has(input:checked),.chip.on{color:#fff;border-color:transparent;background:#1B2340;font-weight:700;box-shadow:0 8px 18px -10px rgba(15,22,51,.6)}
.chip:has(input:checked) .chip-n{background:rgba(255,255,255,.22);color:#fff}
.chip small{display:block;font-size:11px;opacity:.85;font-weight:400}
/* Visible, tappable consent checkboxes — "I agree"/"I have the rights" boxes. A filter pill
hides its checkbox on purpose (the pill IS the control); a consent box is the opposite: the
box has to be seen to be trusted, so it keeps a real, sized, native checkbox. */
.consent{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 12px;
border-radius:12px;border:1px solid var(--gline);background:var(--glass);cursor:pointer;transition:.15s}
.consent:hover{border-color:rgba(30,41,59,.22)}
.consent input[type=checkbox]{width:22px;height:22px;min-width:22px;margin:1px 0 0;accent-color:var(--blue);cursor:pointer}
.consent input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.consent:has(input:checked){background:rgba(14,165,233,.09);border-color:rgba(14,165,233,.4)}
.consent span{flex:1 1 auto}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=url],input[type=tel],input[type=date],textarea,select{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--gline);background:rgba(255,255,255,.86);color:var(--ink);font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=url]:focus,input[type=tel]:focus,input[type=date]:focus,textarea:focus,select:focus{outline:none;border-color:var(--g1);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
input::placeholder,textarea::placeholder{color:#94a3b8}
/* the file picker gets the same treatment as every other field (the browser default was a bare button) */
input[type=file]{width:100%;padding:10px 12px;border-radius:12px;border:1px dashed rgba(30,41,59,.28);background:rgba(255,255,255,.7);color:var(--sub);font-size:14px;font-family:inherit;cursor:pointer}
input[type=file]::file-selector-button{background:linear-gradient(118deg,#1C63DF 0%,#2A9BF3 52%,#25B9A4 100%);color:#fff;border:3px solid #171E2E;border-radius:11px;padding:7px 14px;font-weight:800;font-family:inherit;margin-right:12px;cursor:pointer;text-shadow:0 1px 2px rgba(10,20,50,.45);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 0 14px 1px rgba(42,155,243,.35)}
input[type=file]:focus{outline:none;border-color:var(--g1);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seg{display:flex;gap:8px}
.seg button{flex:1;padding:11px;border:1px solid var(--gline);background:var(--glass);color:var(--sub);font-weight:700;border-radius:12px;cursor:pointer;font-family:inherit;transition:.18s}
.seg button.on{background:#1B2340;color:#fff;border-color:transparent;box-shadow:0 8px 18px -10px rgba(15,22,51,.6)}
.quote{position:sticky;top:82px}
.quote .big{font-family:var(--disp);font-size:42px;font-weight:800}
.qline{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(30,41,59,.08);font-size:14px}
/* the quote rail: frosted glass, the flight total on its own lit plate */
.panel.quote{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.66));backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 30px 60px -34px rgba(30,60,120,.45)}
.quote .big{margin:2px 0 6px;letter-spacing:-.03em}
.quote > .tiny:first-child{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--sub)}
.quote .qbook{margin-top:14px;padding:16px;border-radius:16px;text-align:center;background:linear-gradient(160deg,rgba(56,189,248,.14),rgba(255,255,255,.55));border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 0 rgba(255,255,255,.9) inset}
/* the coming-soon pipeline: one glass panel, one closed section per region, one row per street
inside it, the price as a pill */
.pipe-group{border-top:1px solid rgba(30,41,59,.08)}
.pipe-group:first-of-type{border-top:0}
.pipe-group summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:16px 1fr auto;column-gap:10px;align-items:center;padding:11px 4px;min-height:44px}
.pipe-group summary::-webkit-details-marker{display:none}
.pipe-group summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(-45deg);margin-left:3px;transition:transform .15s ease}
.pipe-group[open] summary::before{transform:rotate(45deg)}
.pipe-gname{font-weight:800;font-size:14.5px;color:var(--ink)}
.pipe-gname::after{content:" · ";color:var(--sub);font-weight:400}
.pipe-gmeta{font-size:12.5px;color:var(--sub)}
.pipe-group summary .pipe-gwrap{grid-column:2}
.pipe-group summary .pipe-price{grid-area:auto;grid-column:3}
.pipe-gwrap{min-width:0}
.pipe-group .pipe-rows{padding:2px 0 10px}
.panel.pipe{background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.58));backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);position:relative;isolation:isolate;
box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 24px 50px -30px rgba(30,60,120,.4)}
.panel.pipe::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:.55;
background:conic-gradient(from 200deg,#9EE3FF,#B9F1FF,#F8E19D,#FFC9A2,#FFB4B6,#F79BF9,#A578DF,#3F7FE6,#9EE3FF);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pipe-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.pipe-head .lk{white-space:nowrap;font-weight:700;color:#0284C7;padding-top:2px}
.pipe-rows{display:flex;flex-direction:column;gap:6px}
.pipe-row{display:grid;grid-template-columns:10px 1fr auto;grid-template-areas:"dot name price" "dot meta price";column-gap:10px;row-gap:2px;align-items:center;
padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px -16px rgba(30,60,120,.35)}
.pipe-dot{grid-area:dot;width:8px;height:8px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.18)}
.pipe-name{grid-area:name;font-weight:700;font-size:13.5px;color:var(--ink)}
.pipe-n{grid-area:meta;font-size:12px;color:var(--sub)}
.pipe-types{grid-area:meta;font-size:12px;color:var(--sub);margin-left:0;justify-self:start;padding-left:0}
.pipe-row .pipe-n + .pipe-types{margin-left:0}
.pipe-row .pipe-n::after{content:" · "}
.pipe-row{grid-template-areas:"dot name price" "dot meta price"}
.pipe-row .pipe-n,.pipe-row .pipe-types{display:inline}
.pipe-meta{grid-area:meta}
.pipe-price{grid-area:price;white-space:nowrap;font-size:12.5px;color:var(--sub);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--glassBorder)}
.pipe-price b{font-family:var(--disp);font-size:15px;color:var(--ink)}
.pipe-price small{font-size:11px;margin-left:1px}
.qline .muted{color:var(--sub)}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.b-pending{background:rgba(234,140,10,.14);color:#B45309}
.b-active{background:rgba(34,197,94,.16);color:#15803D}
.b-rejected{background:rgba(244,63,94,.14);color:#BE123C}
.b-ended,.b-paused{background:rgba(30,41,59,.08);color:var(--sub)}
.b-info{background:rgba(56,189,248,.16);color:#0369A1}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--gline)}
tbody tr,table tr{transition:background .15s}
th{color:var(--sub);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
/* sticky-header table: header row stays legible when a wide table scrolls (esp. mobile) */
.tablewrap.stickyhead{max-height:70vh;overflow:auto}
.tablewrap.stickyhead th{position:sticky;top:0;z-index:2;background:#eef5fb;box-shadow:inset 0 -1px 0 var(--gline)}
td{color:var(--ink)}
/* a data table on a phone: opt in with .stack and label each cell with data-l, and every row
becomes a card — label on the left, value on the right. No horizontal scrolling on a phone. */
@media(max-width:700px){
.tablewrap.stack tr.hscr-head{display:none}
.tablewrap.stack table,.tablewrap.stack tbody{display:block;width:100% !important;min-width:0;box-sizing:border-box}
.tablewrap.stack tr{display:block;width:100%;box-sizing:border-box;padding:8px 0 10px;border-bottom:1px solid var(--line)}
.tablewrap.stack tr:last-child{border-bottom:0}
.tablewrap.stack td{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-width:0;box-sizing:border-box;padding:5px 0;border:0;text-align:right;white-space:normal}
.tablewrap.stack td[style*="min-width"]{min-width:0 !important}
.tablewrap.stack td::before{content:attr(data-l);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);text-align:left;flex:none}
.tablewrap.stack td:not([data-l])::before{content:none}
.tablewrap.stack td:not([data-l]){justify-content:flex-start;text-align:left}
.tablewrap.stack td[data-l="Screen"]{font-size:15px}
.tablewrap.stack td[data-l="7-day traffic"] svg{max-width:150px}
}
.muted{color:var(--sub)}
.tiny{font-size:12px;color:var(--sub)}
.notice{background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.34);border-radius:12px;padding:12px 15px;font-size:14px;color:var(--ink)}
.notice.ok{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.4);color:#15803D}
.notice.bad{background:rgba(225,29,72,.14);border-color:rgba(225,29,72,.4);color:#E11D48}
.notice.warn{background:rgba(234,140,10,.14);border-color:rgba(234,140,10,.4);color:#B45309}
code{background:rgba(30,41,59,.07);padding:2px 6px;border-radius:6px;font-size:.9em;color:#334155}
/* visually-hidden: present for screen readers + form-label association, invisible on screen */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* owner post-action success flash — dismissible green banner injected by layout() */
.flashbar{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.flashbar .notice{flex:1;margin:0}
.flashbar button{background:none;border:none;color:var(--sub);font-size:18px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px}
.flashbar button:hover{background:rgba(30,41,59,.08)}
/* Flight-length presets. Typing into an empty box to discover a price is a tap too many; the
chips set the same input the form already reads, so pricing stays one code path. */
.wk-chips{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0 7px}
.wk-chips .wk{font:inherit;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;
border:1px solid var(--gline);background:rgba(255,255,255,.72);color:var(--sub);cursor:pointer;
min-height:36px;transition:background .15s,color .15s,border-color .15s}
.wk-chips .wk:hover{color:var(--ink);border-color:var(--cyan)}
.wk-chips .wk.on{background:#1B2340;border-color:#1B2340;color:#fff}
#wk-input{width:100%}
/* ===== shared animation system (GPU-only: transform/opacity) ===== */
/* Content is VISIBLE by default and the animation is an enhancement layered on top: the script
adds .js-reveal to only once it has an observer armed, so stalled JS, a missing
IntersectionObserver or a section that never intersects can no longer leave a blank screen.
(The threshold fix below was the same bug reached by a different route.) */
.reveal{transition:opacity .42s ease,transform .42s ease}
.js-reveal .reveal:not(.in){transform:translateY(8px)}
.reveal.in{opacity:1;transform:none}
/* ---- motifs shared by every page (2026-09-28) ------------------------------------------------
THE TV: the one object the whole story sits on. Any creative, anywhere, is shown on it. */
.tv-screen{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0B1220;border:6px solid #171E2E;box-shadow:0 18px 40px -22px rgba(15,23,42,.7)}
.tv-screen>video,.tv-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000;border-radius:0}
.tv-screen>[hidden]{display:none}
figure.tv{margin:12px 0 0}
figure.tv figcaption{margin-top:6px}
/* THE DOOR LIGHT: the only thing on the site that pulses. A pulsing dot means a real person just
walked in somewhere — the same green on the home chips, the location cards and the live page. */
@keyframes aimpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.aim-landing .lpill .gdot,.livedot{animation:aimpulse 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.aim-landing .lpill .gdot,.livedot{animation:none}}
/* THE RECEIPT: the review and the confirmation read as a bill from the register — dotted
leaders, amounts in the signage face, a perforated top edge. */
.rcpt{position:relative;padding-top:28px}
.rcpt::before{content:"";position:absolute;left:0;right:0;top:-1px;height:10px;pointer-events:none;
background:radial-gradient(circle at 7px 0,var(--bg) 5px,transparent 5.6px) repeat-x;background-size:14px 10px}
.rcpt .qline{border-bottom:0;padding:7px 0;gap:10px;align-items:baseline}
.rcpt .qline>span:first-child{flex:1;display:flex;align-items:baseline;gap:8px;min-width:0}
.rcpt .qline>span:first-child::after{content:"";flex:1;border-bottom:2px dotted rgba(30,41,59,.22);transform:translateY(-4px);min-width:16px}
.rcpt .qline>span:last-child{font-family:var(--fig);font-weight:700;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);text-align:right}
.rcpt .qline.rv-total{border-top:1px solid rgba(30,41,59,.14);margin-top:6px;padding-top:12px}
/* THE SIGNAGE FACE for every dollar and every count that is money. */
.pipe-price b,.aim-landing .hs-bar .n,.host-pitch .grad-text,.pb-price{font-family:var(--fig);font-variant-numeric:tabular-nums lining-nums}
/* THE VENUE SCENES as icons — ours, drawn, not a stock icon set. */
.vt-ic{display:inline-block;width:34px;height:20px;border-radius:4px;overflow:hidden;vertical-align:-5px;margin-right:7px;background:#dfe9f5;flex:none}
.vt-ic svg{width:100%;height:100%;display:block}
li .vt-ic{width:40px;height:24px;vertical-align:-6px}
/* SKELETONS: a card-shaped placeholder until the data lands, never a blank. */
.loc.skel{pointer-events:none}
.loc.skel .loc-band{background:linear-gradient(90deg,#e6edf6 25%,#f3f7fc 50%,#e6edf6 75%);background-size:200% 100%;animation:skel 1.2s linear infinite}
.sk-line{height:12px;border-radius:6px;margin:10px 0;background:linear-gradient(90deg,#e6edf6 25%,#f3f7fc 50%,#e6edf6 75%);background-size:200% 100%;animation:skel 1.2s linear infinite}
.sk-line.w60{width:60%}.sk-line.w40{width:40%}.sk-line.w30{width:30%;height:22px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.loc.skel .loc-band,.sk-line{animation:none}}
.reveal.d1{transition-delay:.05s}.reveal.d2{transition-delay:.10s}
.reveal.d3{transition-delay:.15s}.reveal.d4{transition-delay:.20s}.reveal.d5{transition-delay:.25s}
.pulse-dot{position:relative}
/* ===== the liquid glass rim (Greg's store-card design, 2026-09-20) =====
A holographic hairline around a control, plus a soft glow. The fill for primary actions is the
same sweep: blue → white → gold → white → violet, white text with a shadow. Used on primary
buttons, the Location card, the live pills, the nav pill, the quote rail, selected chips and
tabs, and the map legend — one signature, everywhere something is actionable or live. */
.lg-rim{position:relative;isolation:isolate}
.lg-rim::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
background:conic-gradient(from 200deg,#9EE3FF,#B9F1FF,#F8E19D,#FFC9A2,#FFB4B6,#F79BF9,#A578DF,#3F7FE6,#9EE3FF);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.95}
.lg-fill{background:linear-gradient(112deg,#5290FF 0%,#DDF8FF 16%,#FBFDFB 30%,#E4F6EE 44%,#D6AD4B 60%,#FFFBF5 80%,#AD70D8 100%);
color:#fff !important;text-shadow:0 1px 2px rgba(20,30,60,.55),0 0 8px rgba(20,30,60,.25)}
/* primary buttons across the site: every one is a small wide-screen TV — a dark bezel, a lit
blue-to-teal panel with the glass rim just inside it, white text, and light on the wall. The
same object as the mark and the hero screen, so a button is recognisably "the screen". */
.btn:not(.ghost):not(.danger),.aim-landing .lbtn,.aim-landing .lcta,.loc-add,.lv-cta{
position:relative;isolation:isolate;border-radius:14px;
background:linear-gradient(118deg,#1C63DF 0%,#2A9BF3 52%,#25B9A4 100%);
color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(10,20,50,.45);
border:4px solid #171E2E;
box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 30px -14px rgba(20,30,60,.55),0 0 22px 1px rgba(42,155,243,.32)}
.btn:not(.ghost):not(.danger)::before,.aim-landing .lbtn::before,.aim-landing .lcta::before,.loc-add::before,.lv-cta::before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
background:conic-gradient(from 200deg,#9EE3FF,#B9F1FF,#F8E19D,#FFC9A2,#FFB4B6,#F79BF9,#A578DF,#3F7FE6,#9EE3FF);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85}
.btn:not(.ghost):not(.danger)::after,.aim-landing .lbtn::after,.aim-landing .lcta::after,.loc-add::after,.lv-cta::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 48%)}
.btn:not(.ghost):not(.danger):hover,.aim-landing .lbtn:hover,.aim-landing .lcta:hover,.loc-add:hover,.lv-cta:hover{
box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 36px -14px rgba(20,30,60,.6),0 0 30px 3px rgba(42,155,243,.45)}
.loc-add input{accent-color:#fff;width:15px;height:15px;margin:0}
/* small controls (console rows, tabs): a thinner bezel, the same lit panel */
.btn.sm:not(.ghost):not(.danger){border-width:2.5px;border-radius:10px;padding:6px 12px;font-weight:800}
/* the segmented control is a toggle, not a screen: lit panel, no bezel */
.seg button.on{background:#1B2340;color:#fff;border-color:transparent;box-shadow:0 8px 18px -10px rgba(15,22,51,.6)}
/* the Location card: a faint rim always, a bright one when it is in the buy */
.loc{position:relative;isolation:isolate}
.loc::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;opacity:.5;
background:conic-gradient(from 200deg,#9EE3FF,#B9F1FF,#F8E19D,#FFC9A2,#FFB4B6,#F79BF9,#A578DF,#3F7FE6,#9EE3FF);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.loc:has(.loc-add input:checked)::before{opacity:1;padding:1.5px}
.loc:has(.loc-add input:checked){box-shadow:0 16px 40px -22px rgba(120,140,255,.55),0 0 24px -8px rgba(170,120,230,.35)}
/* live pills, nav pill, quote rail, map legend, live-page card, selected chips and tabs */
.loc-pill,.aim-landing .lnav,.top,.aim-landing .hs-bar,.panel.quote,.net-legend,.chip:has(input:checked),.chip.on,.bstep-tab.on,.lv-card{position:relative;isolation:isolate}
.loc-pill::before,.aim-landing .lnav::before,.top::before,.aim-landing .hs-bar::before,.panel.quote::before,.net-legend::before,.chip:has(input:checked)::before,.chip.on::before,.bstep-tab.on::before,.lv-card::before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;opacity:.85;
background:conic-gradient(from 200deg,#9EE3FF,#B9F1FF,#F8E19D,#FFC9A2,#FFB4B6,#F79BF9,#A578DF,#3F7FE6,#9EE3FF);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
left:0;right:0;top:0;height:auto}
.chip:has(input:checked),.chip.on{background:rgba(255,255,255,.9);color:var(--ink);border-color:transparent;box-shadow:0 8px 20px -12px rgba(120,140,255,.6)}
.chip:has(input:checked)::after{content:"✓";margin-left:7px;color:#5290FF;font-weight:800;font-size:12px}
:focus-visible{outline:2px solid #5290FF;outline-offset:2px}
@media (prefers-reduced-transparency:reduce){.lg-rim::before,.loc::before,.loc-pill::before{display:none}}
/* ===== responsive: phones / narrow tablets ===== */
@media(max-width:760px){
/* any 2-up grid or fixed side column collapses to a single column */
.two,.grid.two{grid-template-columns:1fr!important}
.row{grid-template-columns:1fr}
.screensgrid{grid-template-columns:1fr 1fr!important}
/* the sticky quote panel becomes a normal full-width block (no cover-up) */
.quote{position:static!important;top:auto!important}
.top{flex-wrap:wrap;gap:8px 10px;margin:14px 16px 0;padding:10px 14px;top:10px}
.nav{gap:12px;flex-wrap:wrap}
.nav > a:first-child{margin-left:0}
.nav{display:flex;flex-wrap:wrap;gap:4px 0}
.nav a{margin-left:0;margin-right:14px;font-size:13px;padding:6px 0;min-height:24px;display:inline-flex;align-items:center}
.wrap{padding:16px}
.panel{padding:18px;border-radius:16px}
.hero{padding:44px 16px 20px}
.hero h1{font-size:clamp(28px,8vw,40px)}
.stats{gap:18px 22px}
.stat .n{font-size:26px}
h1{font-size:clamp(26px,7vw,34px)}
h2{font-size:clamp(21px,5.5vw,26px)}
/* tables never blow out the page — wrap them and scroll sideways */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table{min-width:520px}
/* owner tab strip → one tidy horizontal-scroll row */
.adminnav{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.adminnav::-webkit-scrollbar{display:none}
.adminnav .btn{flex:0 0 auto;white-space:nowrap}
/* comfortable tap targets on interactive controls */
.btn{min-height:44px;padding:12px 18px}
.btn.sm{min-height:38px}
input[type=text],input[type=email],input[type=number],input[type=tel],input[type=url],textarea,select{min-height:44px;font-size:16px}
select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:right 15px center}
.chip{padding:10px 15px;min-height:40px;display:inline-flex;align-items:center}
.seg button{min-height:44px}
}
@media(max-width:430px){
.wrap{padding:13px}
.hero{padding:34px 13px 16px}
.hero h1{font-size:clamp(25px,9vw,32px)}
.stat .n{font-size:23px}
.quote .big{font-size:34px}
.panel{padding:15px}
.btn{width:auto}
}
@media (prefers-reduced-motion: reduce){
body::before{animation:none}
.reveal{opacity:1 !important;transform:none !important;transition:none !important}
.btn,.panel{transition:none}
}
:root{
--g1:#38BDF8; --g2:#FBBF24; --g3:#FB7185;
--ink:#1E293B; --sub:#51607a; --gline:rgba(30,41,59,.10);
--glass:rgba(255,255,255,.55); --card:rgba(255,255,255,.72);
--glassBorder:rgba(255,255,255,.78); --green:#22C55E;
--brand-grad:linear-gradient(120deg,var(--g1),var(--g2),var(--g3));
}
/* On the landing page only, hide the shared dark portal nav — the landing
ships its own glass nav. Other pages have no .aim-landing, so .top stays. */
body:has(.aim-landing) .top{display:none}
body:has(.aim-landing){background:#FFFDF8}
/* ==== living gradient background: 3 soft brand blobs, each on its own slow loop ==== */
/* fixed layer behind ALL content; GPU-safe (only transform/opacity animate); low opacity so
contrast is untouched. Extends the sunrise-glass rather than replacing it. */
.aim-landing .livingbg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
background:
radial-gradient(1100px 620px at 86% -10%, rgba(251,191,36,.40), transparent 60%),
radial-gradient(900px 640px at 4% 2%, rgba(56,189,248,.34), transparent 58%),
radial-gradient(1000px 720px at 62% 116%, rgba(251,113,133,.22), transparent 60%),
linear-gradient(180deg,#FFFDF8 0%, #FDF8F1 45%, #FCF3E9 100%)}
body:has(.aim-landing)::before{display:none}
.aim-landing .livingbg .blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform,opacity}
.aim-landing .livingbg .b1{width:640px;height:640px;left:-8%;top:-10%;
background:radial-gradient(circle,rgba(56,189,248,.22),rgba(56,189,248,0) 68%);
animation:aimBlob1 38s ease-in-out infinite}
.aim-landing .livingbg .b2{width:720px;height:720px;right:-12%;top:16%;
background:radial-gradient(circle,rgba(251,191,36,.20),rgba(251,191,36,0) 68%);
animation:aimBlob2 46s ease-in-out infinite}
.aim-landing .livingbg .b3{width:560px;height:560px;left:34%;bottom:-16%;
background:radial-gradient(circle,rgba(251,113,133,.16),rgba(251,113,133,0) 68%);
animation:aimBlob3 33s ease-in-out infinite}
/* translate + opacity only (no scale) so the 70px blur rasterizes ONCE and just composites — big battery/heat win */
@keyframes aimBlob1{0%,100%{transform:translate3d(0,0,0);opacity:.85}50%{transform:translate3d(7%,5%,0);opacity:1}}
@keyframes aimBlob2{0%,100%{transform:translate3d(0,0,0);opacity:.7}50%{transform:translate3d(-6%,4%,0);opacity:1}}
@keyframes aimBlob3{0%,100%{transform:translate3d(0,0,0);opacity:.75}50%{transform:translate3d(5%,-6%,0);opacity:.95}}
/* ==== scoped light landing theme (only .aim-landing) ==== */
.aim-landing{
display:flow-root;min-height:100vh;
color:var(--ink);
font-family:-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
line-height:1.5;
background:transparent;
min-height:100vh;
}
.aim-landing a{color:var(--ink);text-decoration:none}
.aim-landing .lgrad{background:var(--brand-grad)}
.aim-landing .lwrap{max-width:1180px;margin:0 auto;padding:0 26px}
/* nav */
.aim-landing .lnav{position:sticky;top:16px;z-index:20;display:flex;align-items:center;gap:16px;transform:translateZ(0);
max-width:1180px;margin:20px auto 0;padding:12px 18px;border-radius:18px;
background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--glassBorder);box-shadow:0 10px 30px rgba(30,60,120,.10)}
.aim-landing .lbrandlink{display:inline-flex;align-items:center;gap:11px}
.aim-landing .lbrandtxt{font-weight:800;font-size:18px;letter-spacing:.2px;color:var(--ink)}
.aim-landing .lnav-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.aim-landing .lsign{font-weight:700;font-size:14px;color:var(--hs-ink,var(--ink));padding:9px 12px;border-radius:999px}
.aim-landing .lsign:hover{background:rgba(255,255,255,.7)}
.aim-landing .lnav-mid{flex:1;display:flex;justify-content:center;gap:28px;font-size:14.5px;font-weight:600}
.aim-landing .lnav-mid a{color:var(--sub)}
.aim-landing .lnav-mid a:hover{color:var(--ink)}
/* R4 — .lnav-mid is display:none on phones (below), which left no way to reach /network,
/become-a-host or /about from the header. This disclosure is the phone-only replacement:
no JS, closes on Escape, and never renders on desktop. */
.aim-landing .lmenu{display:none;position:relative}
.aim-landing .lmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
justify-content:center;width:40px;height:40px;border-radius:12px;font-size:17px;color:var(--ink);
border:1px solid var(--gline);background:rgba(255,255,255,.72)}
.aim-landing .lmenu>summary::-webkit-details-marker{display:none}
.aim-landing .lmenu[open]>summary{background:rgba(255,255,255,.95)}
.aim-landing .lmenu-sheet{position:absolute;right:0;top:46px;min-width:210px;display:flex;
flex-direction:column;gap:2px;padding:8px;border-radius:14px;border:1px solid var(--gline);
background:rgba(255,255,255,.97);box-shadow:0 18px 44px rgba(30,60,120,.18);z-index:40}
.aim-landing .lmenu-sheet a{display:block;padding:11px 12px;border-radius:10px;font-size:15px;
font-weight:600;color:var(--ink);min-height:44px;display:flex;align-items:center}
.aim-landing .lmenu-sheet a:hover{background:rgba(14,165,233,.09)}
.aim-landing .llogo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(251,113,133,.35)}
.aim-landing .lbrand{font-weight:800;letter-spacing:.2px}
.aim-landing .llogo-img{height:40px;border-radius:9px;display:block;box-shadow:0 6px 16px rgba(20,30,60,.22)}
.aim-landing .lnl{margin-left:auto;display:flex;gap:20px;color:var(--sub);font-size:14px;font-weight:600;align-items:center}
.aim-landing .lnl a{color:var(--sub)}
.aim-landing .lnl a:hover{color:var(--ink)}
/* P1: match the one nav-buy size used on /network, /build, /become-a-host — this class is only
the "Buy ads →" nav button (landingNav), so resizing it here cannot affect any other button. */
.aim-landing .lcta{color:#fff !important;padding:8px 16px;border-radius:12px;border-width:2.5px;font-size:14px;font-weight:800}
/* hero */
.aim-landing .stage{position:relative;max-width:1180px;margin:22px auto 0;height:640px;overflow:hidden;
border-radius:28px;border:1px solid var(--glassBorder);box-shadow:0 24px 60px rgba(30,60,120,.14);
background:
radial-gradient(900px 520px at 86% -10%, rgba(251,191,36,.34), transparent 60%),
radial-gradient(760px 540px at 4% 2%, rgba(56,189,248,.30), transparent 58%),
linear-gradient(180deg,#FFFDF8 0%, #F1F8FF 100%)}
.aim-landing .sun{position:absolute;width:520px;height:520px;border-radius:50%;right:-60px;top:-120px;
background:radial-gradient(circle,rgba(251,191,36,.55),rgba(251,191,36,0) 62%);animation:drift 26s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,22px)}}
/* TV on the back wall */
.aim-landing .tv{position:absolute;right:90px;top:80px;width:420px;height:264px;border-radius:18px;
background:linear-gradient(#0d1526,#0a1120);padding:14px;
box-shadow:0 30px 70px rgba(20,40,90,.28), 0 0 120px 20px rgba(56,189,248,.22);
border:1px solid rgba(255,255,255,.35);animation:lrise .9s ease both .1s}
.aim-landing .screen{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;background:#070c17}
/* uniform padding + vertical centering so cards don't jump/reflow between rotations */
.aim-landing .tvframe{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:24px 26px;opacity:0;animation:tvcycle 21s infinite;overflow:hidden}
/* 8 cards over a 24s loop = a fair 3s slot each, non-overlapping */
.aim-landing .tvframe:nth-child(1){animation-delay:0s}
.aim-landing .tvframe:nth-child(2){animation-delay:3s}
.aim-landing .tvframe:nth-child(3){animation-delay:6s}
.aim-landing .tvframe:nth-child(4){animation-delay:9s}
.aim-landing .tvframe:nth-child(5){animation-delay:12s}
.aim-landing .tvframe:nth-child(6){animation-delay:15s}
.aim-landing .tvframe:nth-child(7){animation-delay:18s}
.aim-landing .qr{align-items:center;text-align:center;justify-content:center;gap:12px}
.aim-landing .qrwrap{display:flex;align-items:center;gap:16px}
.aim-landing .qrimg{width:94px;height:94px;background:#fff;border-radius:10px;padding:7px;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.aim-landing .qrtxt{text-align:left;max-width:180px}
.aim-landing .qrtxt b{color:#fff;display:block;font-size:16px;margin-bottom:4px}
.aim-landing .qrtxt span{color:#c9d6ee;font-size:12.5px;line-height:1.35}
@keyframes tvcycle{0%{opacity:0;transform:scale(1.02)}2.3%{opacity:1;transform:scale(1)}12%{opacity:1;transform:scale(1)}14.3%{opacity:0;transform:scale(1)}100%{opacity:0}}
.aim-landing .ad{align-items:flex-start}
/* uniform, high-contrast card type — bright cyan label, white headline, light-gray sub */
.aim-landing .ad .k,.aim-landing .qr .k{color:#8bd4ff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.aim-landing .ad h4{color:#fff;font-size:26px;margin:2px 0 2px;line-height:1.1;font-weight:850}
.aim-landing .ad p{color:#d3ddf1;margin:0;font-size:15px;line-height:1.35}
.aim-landing .ad .pill{margin-top:12px;background:linear-gradient(120deg,var(--g2),var(--g3));color:#3a1f10;font-weight:800;padding:8px 14px;border-radius:10px;font-size:14px;display:inline-block}
/* host cards read amber-leaning so the "you earn" side is visually distinct */
.aim-landing .ad.host .k{color:var(--g2)}
.aim-landing .stat-f{align-items:center;text-align:center}
.aim-landing .stat-f .live{display:inline-flex;align-items:center;gap:8px;color:#c7ffd8;font-weight:800;font-size:14px;letter-spacing:.04em}
.aim-landing .stat-f big{color:#fff;font-size:50px;font-weight:850;line-height:1;margin:10px 0 2px;display:block}
/* gradient hero number for the door-counted proof card (bright on the dark screen) */
.aim-landing .stat-f big.grad{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.aim-landing .stat-f span{color:#b8c6e2;font-size:14px;line-height:1.35}
.aim-landing .walk{align-items:center;text-align:center;justify-content:center}
.aim-landing .walk .ping{display:inline-flex;align-items:center;gap:10px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.5);
color:#c7ffd8;padding:12px 18px;border-radius:14px;font-weight:800;font-size:16px}
.aim-landing .gdot{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:gpulse 1.8s infinite}
@keyframes gpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 16px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.aim-landing .led{position:absolute;right:22px;bottom:22px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px 2px rgba(34,197,94,.7)}
/* idea 5b/5c: the "someone just walked in" door moment — off by default, briefly lit by JS. A
plain opacity fade, not a flashing loop, so it needs no reduced-motion override of its own. */
.aim-landing .hero-door-led{opacity:0;transition:opacity .25s ease;z-index:6}
.aim-landing .hero-door-led.lit{opacity:1}
/* one existing walker highlights once, in step with the door light — never a new figure, and
already invisible on phones (the existing walker-hiding media queries apply unchanged). */
.aim-landing .walker.pulse-once{animation:heroWalkerPulse .9s ease-out 1}
@keyframes heroWalkerPulse{0%{filter:brightness(1)}35%{filter:brightness(1.5) drop-shadow(0 0 6px rgba(34,197,94,.55))}100%{filter:brightness(1)}}
@media (prefers-reduced-motion: reduce){.aim-landing .walker.pulse-once{animation:none}.aim-landing .hero-door-led{transition:none}}
/* counter + people */
.aim-landing .counter{position:absolute;left:0;right:0;bottom:0;height:190px;z-index:4;
background:linear-gradient(180deg,#fff8ee, #f3e7d2);
border-top:1px solid rgba(255,255,255,.9);
box-shadow:0 -18px 50px rgba(120,90,40,.14), inset 0 2px 0 rgba(255,255,255,.9)}
.aim-landing .counter:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0))}
/* checkout on the counter — register + card reader + receipt (customer POV) */
.aim-landing .pos{position:absolute;bottom:96px;left:62%;width:230px;height:120px;z-index:6;pointer-events:none}
.aim-landing .register{position:absolute;bottom:0;left:0;width:118px;height:92px;border-radius:12px 12px 7px 7px;
background:linear-gradient(160deg,#2A3350,#171E2E);box-shadow:0 12px 24px rgba(20,30,60,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.aim-landing .register .reg-screen{position:absolute;top:9px;left:12px;right:12px;height:30px;border-radius:6px;
background:linear-gradient(118deg,#1C63DF 0%,#2A9BF3 52%,#25B9A4 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 14px 1px rgba(42,155,243,.45)}
.aim-landing .register .reg-keys{position:absolute;bottom:12px;left:14px;right:14px;height:34px;display:grid;
grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:4px}
.aim-landing .register .reg-keys span{border-radius:3px;background:linear-gradient(#3A4666,#252E48);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 1px 2px rgba(0,0,0,.35)}
.aim-landing .receipt{position:absolute;bottom:14px;left:104px;width:26px;height:60px;border-radius:2px 2px 4px 4px;
background:repeating-linear-gradient(#ffffff,#ffffff 8px,#eef1f6 8px,#eef1f6 10px);transform:rotate(6deg);
box-shadow:0 6px 14px rgba(40,60,110,.18);border:1px solid rgba(203,213,230,.8)}
.aim-landing .reader{position:absolute;bottom:0;right:0;width:78px;height:104px}
.aim-landing .reader .reader-head{position:absolute;top:0;left:12px;width:52px;height:66px;border-radius:9px;
background:linear-gradient(155deg,#4b5568,#2b3242);transform:perspective(220px) rotateY(-16deg) rotateX(6deg);transform-origin:bottom center;
box-shadow:0 12px 22px rgba(20,30,60,.28)}
.aim-landing .reader .reader-scr{position:absolute;top:8px;left:8px;right:8px;height:26px;border-radius:4px;
background:linear-gradient(120deg,var(--g2),var(--g3));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.aim-landing .reader .reader-slot{position:absolute;bottom:9px;left:8px;right:8px;height:5px;border-radius:3px;background:rgba(11,15,26,.55)}
.aim-landing .reader .reader-stand{position:absolute;bottom:0;left:20px;width:36px;height:44px;border-radius:6px 6px 8px 8px;
background:linear-gradient(160deg,#d7deea,#aeb9cd);box-shadow:0 8px 16px rgba(40,60,110,.2)}
/* anonymous shopper silhouettes — clean SVG figure (head + shoulders + legs), translucent (privacy-safe) */
.aim-landing .fig{width:100%;height:100%;display:block;fill:currentColor}
/* pause ALL hero motion when the tab is hidden or the hero has scrolled off-screen (saves battery/heat) */
html.aim-still .aim-landing *,html.aim-still body::before{animation-play-state:paused!important}
/* anonymous crowd — varying heights, head+torso visible (legs masked), always moving across behind the counter */
.aim-landing .walker{position:absolute;bottom:8px;z-index:3;pointer-events:none;color:rgba(30,41,59,.20);opacity:var(--op,.8);
-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 85%);mask-image:linear-gradient(to bottom,#000 60%,transparent 85%);
animation:walkin 34s linear infinite}
/* a carousel of shoppers: in from the right, linger by the register, then off to the left — each its own speed, none rushing (symmetric in/out distance so the exit doesn't sprint) */
/* bottom anchors each figure's waist near the 190px counter top, so head+torso always clears it (never just a head) */
.aim-landing .walker.w1{left:61%;bottom:64px;width:104px;height:250px;--op:.7;animation-duration:32s;animation-delay:-3s}
.aim-landing .walker.w2{left:66%;bottom:34px;width:128px;height:312px;--op:.86;animation-duration:40s;animation-delay:-12s}
.aim-landing .walker.w3{left:57%;bottom:84px;width:86px;height:210px;--op:.6;animation-duration:36s;animation-delay:-20s}
.aim-landing .walker.w4{left:68%;bottom:24px;width:136px;height:330px;--op:.9;animation-duration:29s;animation-delay:-7s}
.aim-landing .walker.w5{left:63%;bottom:76px;width:94px;height:228px;--op:.64;animation-duration:46s;animation-delay:-31s}
.aim-landing .walker.w6{left:64%;bottom:52px;width:114px;height:276px;--op:.78;animation-duration:34s;animation-delay:-24s}
@keyframes walkin{
0%{transform:translateX(-760px);opacity:0}
12%{opacity:var(--op)}
34%{transform:translateX(-30px)}
48%{transform:translateX(14px)}
62%{transform:translateX(-18px)}
88%{opacity:var(--op)}
100%{transform:translateX(820px);opacity:0}}
/* foreground copy */
.aim-landing .copy{position:absolute;z-index:5;left:44px;top:80px;max-width:440px}
.aim-landing .copy h1{font-size:44px;line-height:1.05;margin:0 0 14px;letter-spacing:-.6px}
.aim-landing .copy h1 .a{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.aim-landing .copy p{color:var(--sub);font-size:18px;margin:0 0 20px}
.aim-landing .lrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.aim-landing .lbtn{color:#fff;font-weight:800;font-size:16px;padding:12px 22px;border-radius:14px}
.aim-landing .ghost{padding:14px 18px;border-radius:14px;font-weight:700;color:var(--ink);background:var(--glass);border:1px solid var(--glassBorder)}
/* the two hero buttons are small wide-screen TVs: a dark bezel, a lit panel, light on the wall */
.aim-landing .tvb{position:relative;min-width:196px;min-height:64px;padding:0 30px;border-radius:14px;font-size:18px;font-weight:800;
border:5px solid #171E2E;
/* The bezel is the idea — a button that is a little screen. Two stacked halos (cyan at 22px,
teal at 60px) are what made it read arcade; one close halo reads as a lit panel. */
box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 26px -12px rgba(20,30,60,.55),0 0 20px 1px rgba(42,155,243,.32);
display:inline-flex;align-items:center;justify-content:center;isolation:isolate}
.aim-landing .tvb span{position:relative;z-index:2}
.aim-landing .tvb::after{content:"";position:absolute;inset:-5px;border-radius:inherit;pointer-events:none;z-index:1;
background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 60%)}
.aim-landing .lrow .tvb.tvb-off{border:5px solid #171E2E;background:linear-gradient(118deg,#F3F7FD,#FFFFFF 60%,#EEF3FA);color:var(--hs-ink,var(--ink));box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 26px -12px rgba(20,30,60,.45),0 0 20px 1px rgba(150,190,255,.38)}
.aim-landing .tvb:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 32px -12px rgba(20,30,60,.6),0 0 26px 2px rgba(42,155,243,.42)}
.aim-landing .lpills{margin-top:56px;display:flex;flex-wrap:wrap;gap:10px;max-width:none}
.aim-landing .lpill{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 14px;border-radius:999px;
background:var(--glass);border:1px solid var(--glassBorder);box-shadow:0 10px 26px rgba(30,60,120,.10);font-size:13px;font-weight:650;color:var(--sub)}
.aim-landing .lpill b{font-weight:850;color:var(--ink)}
.aim-landing .lpill .ic{font-size:14px;line-height:1}
@keyframes lrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.aim-landing .copy{animation:lrise 1s ease both}
/* sections */
.aim-landing .lsec{max-width:1180px;margin:56px auto 0;padding:0 26px;content-visibility:auto;contain-intrinsic-size:auto 900px}
/* P2: "Pick your stores" is the one lsec whose height is DATA-driven (picks.length, not fixed
authored copy) and the one that holds a position:sticky + translateZ(0)-promoted child
(.hs-bar — see the "below-fold sections lazily rendered, sticky bars promoted" commit that
introduced both the lazy content-visibility placeholder above AND the sticky bar's own
compositing layer). A fixed 900px placeholder guessed for every OTHER lsec's fairly constant
authored content has no reason to match THIS section's real height, and while it is skipped
content-visibility substitutes that guess for layout — the gap the owner saw before the
footer. It is also the LAST section, so there is nothing below it left to lazily render for.
Opting it out of the placeholder (not the base rule, so every other section keeps the perf
win) fixes the mismatch at its source instead of papering over it with a negative margin. */
.aim-landing .lsec.pick{content-visibility:visible;contain-intrinsic-size:auto;contain:none}
.aim-landing .lsec h2{font-size:30px;letter-spacing:-.4px;margin:0 0 6px}
.aim-landing .lsec .lead{color:var(--sub);font-size:17px;margin:0 0 22px;max-width:60ch}
.aim-landing .lcards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.aim-landing .lcard{display:flex;flex-direction:column;background:rgba(255,255,255,.85);
border:1px solid var(--glassBorder);border-radius:18px;padding:24px;box-shadow:0 16px 40px rgba(30,60,120,.10);
transition:transform .18s ease, box-shadow .18s ease}
.aim-landing .lcard .ktag{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
/* fixed headline block so all three bodies start on the same line regardless of wrap */
.aim-landing .lcard .lcard-head{min-height:56px;display:flex;align-items:flex-start;margin:6px 0 8px}
.aim-landing .lcard h3{font-size:20px;margin:0;line-height:1.15}
.aim-landing .lcard p{color:var(--sub);font-size:15px;margin:0 0 12px}
/* H2 was clipped at the top — give the section headroom and let ascenders breathe */
.aim-landing .lsec.threesides h2{padding-top:4px;line-height:1.2;overflow:visible}
.aim-landing .lcard a.lk{margin-top:auto;padding-top:10px;font-weight:800;font-size:16px;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.aim-landing .ltiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.aim-landing .ltile{background:rgba(255,255,255,.85);
border:1px solid var(--glassBorder);border-radius:18px;padding:20px;box-shadow:0 12px 30px rgba(30,60,120,.09);
transition:transform .18s ease, box-shadow .18s ease}
/* hover-lift on cards + tiles (pointer devices only) — the tactile "raise" you see on buttons */
@media(hover:hover){
.aim-landing .lcard,.aim-landing .ltile,.aim-landing .lbtn,.aim-landing .ghost,.aim-landing .lpill,.aim-landing .lnav-mid a,.aim-landing .lcta,.aim-landing .lbrandlink,.aim-landing .lfoot a{transition:transform .16s ease, box-shadow .16s ease, color .16s ease}
.aim-landing .lcard:hover,.aim-landing .ltile:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(30,60,120,.17)}
.aim-landing .lbtn:hover,.aim-landing .lcta:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(251,113,133,.42)}
.aim-landing .ghost:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(30,60,120,.14)}
.aim-landing .lpill:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(30,60,120,.12)}
.aim-landing .lnav-mid a:hover,.aim-landing .lfoot a:hover{transform:translateY(-1px);color:var(--ink)}
.aim-landing .lbrandlink:hover{transform:translateY(-2px)}
}
.aim-landing .ltile .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;margin-bottom:10px;
background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.28)}
.aim-landing .ltile b{font-size:15.5px}
.aim-landing .ltile p{color:var(--sub);font-size:13.5px;margin:6px 0 0}
.aim-landing .blink{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:gpulse 1.8s infinite}
/* FAQ accordion — native , styled to match the glass cards */
.aim-landing .faqlist{display:grid;gap:12px;max-width:840px;margin-top:2px}
.aim-landing .faqitem{background:rgba(255,255,255,.85);border:1px solid var(--glassBorder);border-radius:14px;padding:0 20px;box-shadow:0 12px 30px rgba(30,60,120,.09)}
.aim-landing .faqitem summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:16px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
.aim-landing .faqitem summary::-webkit-details-marker{display:none}
.aim-landing .faqitem summary::after{content:"+";font-weight:700;color:var(--muted);font-size:22px;line-height:1;flex:none}
.aim-landing .faqitem[open] summary::after{content:"–"}
.aim-landing .faqitem p{color:var(--sub);font-size:14.5px;line-height:1.55;margin:0 0 16px}
.aim-landing .faqitem a{color:#0284C7}
/* footer */
.aim-landing .lfoot{max-width:1180px;margin:64px auto 0;padding:26px 26px 40px;border-radius:0;
background:none;border:0;border-top:1px solid var(--gline);box-shadow:none;
display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.aim-landing .lfoot .fnote{color:var(--sub);font-size:13px}
.aim-landing .lfoot .fcta{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.aim-landing .lfoot .fsign{color:var(--sub);font-weight:700;font-size:14px}
@media(max-width:820px){
.aim-landing .stage{height:auto;padding:0 20px 26px;display:flex;flex-direction:column;align-items:stretch;
background:
radial-gradient(620px 480px at 62% 52%, rgba(251,191,36,.24), transparent 60%),
radial-gradient(540px 440px at 6% 4%, rgba(56,189,248,.22), transparent 58%),
linear-gradient(180deg,#FBFDFF 0%, #F4FAFF 44%, #FFF6E8 100%)}
.aim-landing .sun{display:none}
.aim-landing .copy{display:contents}
.aim-landing .copy h1{order:1;position:relative;z-index:6;margin-top:15px}
.aim-landing .copy>p{order:2;position:relative;z-index:6}
.aim-landing .tv{order:3;position:relative;right:auto;top:auto;left:auto;width:min(420px,90%);height:220px;margin:16px auto 0;align-self:center;z-index:3}
.aim-landing .copy .lrow{order:3;position:relative;z-index:6;margin-top:18px;display:flex;gap:10px}
.aim-landing .copy .lrow .tvb{flex:1;min-width:0;padding:0 12px;font-size:16px;min-height:56px}
.aim-landing .copy .lpills{order:5;position:relative;z-index:6;margin-top:56px;transform:none}
.aim-landing .counter{height:236px}
.aim-landing .hs-pick-head{gap:6px}.aim-landing .hs-pick-head a.lk{padding-top:0}
.aim-landing .hs-pick .lead{margin-bottom:4px}
.aim-landing .hs-tv2{order:4}
.aim-landing .copy h1{font-size:34px}
.aim-landing .lnav-mid{display:none}
.aim-landing .lmenu{display:block;margin-left:6px;order:4}
.aim-landing .lwrap{padding:0 18px}
/* comfortable nav tap targets + keep the glass bar off the screen edges */
.aim-landing .lnav{margin:14px 16px 0;padding:8px 12px;gap:10px;flex-wrap:nowrap}
.aim-landing .lnav-right{gap:4px}
.aim-landing .lsign{padding:9px 8px;font-size:13.5px}
.aim-landing .lcta{padding:8px 12px;font-size:13.5px}
.aim-landing .lnl{gap:12px}
.aim-landing .lnl a{padding:8px 4px;min-height:40px;display:inline-flex;align-items:center}
.aim-landing .lcta{min-height:44px;display:inline-flex;align-items:center;margin-left:auto}
.aim-landing .lbtn,.aim-landing .ghost{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.aim-landing .lsec{margin-top:40px;padding:0 18px}
.aim-landing .lsec h2{font-size:25px}
.aim-landing .lfoot{margin:44px 16px 30px;padding:18px}
}
@media(max-width:430px){
.aim-landing .copy{padding:18px}
.aim-landing .copy h1{font-size:29px}
.aim-landing .copy p{font-size:16px}
.aim-landing .stat-f big{font-size:40px}
.aim-landing .lnl{font-size:13px}
/* keep the rotating cards from overflowing the narrow screen */
.aim-landing .tvframe{padding:20px 20px}
.aim-landing .ad h4{font-size:23px}
.aim-landing .qrtxt{max-width:150px}
.aim-landing .qrimg{width:82px;height:82px}
}
@media (prefers-reduced-motion: reduce){
/* Targeted, non-nuclear: kill only large translational / parallax motion,
KEEP gentle opacity crossfades + small pulses so the page still reads alive. */
.aim-landing .sun{animation:none !important} /* parallax glow drift */
.aim-landing .livingbg .blob{animation:none !important} /* living-gradient blob drift */
/* the shopper carousel keeps its slow, gentle motion even under reduce-motion (owner decision) */
.aim-landing .copy{animation:none !important} /* rise-in slide */
.aim-landing .tv{animation:none !important} /* lrise slide/zoom */
/* keep the TV crossfade but strip its scale() so it's opacity-only (safe) */
.aim-landing .tvframe{animation-name:tvcrossfade !important}
/* keep: .tvframe (opacity crossfade), .gdot/.blink (pulses), CTA/live JS */
}
@keyframes tvcrossfade{0%{opacity:0}2%{opacity:1}10.5%{opacity:1}12.5%{opacity:0}100%{opacity:0}}
/* ===== home page polish (Greg's layered design, 2026-09-20). Assets live in /brand/home-*.png ===== */
.aim-landing{--hs-ink:#0F1633;--hs-gold:#E1A62B;--hs-grad:linear-gradient(115deg,#2D9CFF 0%,#39C46D 100%)}
.aim-landing .lnav{background:rgba(255,255,255,.72)}
.aim-landing .lbrandlink .hs-logo{height:40px;width:auto;display:block;filter:drop-shadow(0 6px 14px rgba(20,30,60,.22))}
.aim-landing .lbrandtxt{color:var(--hs-ink)}
.aim-landing .lcta.lgrad,.aim-landing .lbtn.lgrad{background:var(--hs-grad);box-shadow:0 12px 28px -10px rgba(45,156,255,.55)}
.aim-landing .copy h1{color:var(--hs-ink);font-size:44px;letter-spacing:-.9px;font-weight:800;max-width:15ch}
.aim-landing .copy h1 .a{background:none;-webkit-text-fill-color:currentColor;color:var(--hs-gold)}
.aim-landing .copy p{color:#4A5470}
.aim-landing .ghost{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 24px -14px rgba(30,60,120,.35)}
/* the curved screen with the ad bursting out of it */
/* A wide-screen TV (16:9, flat, smooth bezel) on the back wall above the counter. The screen is
drawn in CSS from the ad's layers — gradient, REFRESH, the splash — and the can and the ice cubes
sit OUTSIDE the frame so they read as bursting out of it. Nothing moves; the walkers are the motion. */
.aim-landing .hs-tv2{position:absolute;right:84px;top:62px;width:470px;height:264px;z-index:3;animation:lrise .9s ease both .1s;isolation:isolate}
.aim-landing .hs-tv2-screen{position:absolute;inset:0;border-radius:16px;overflow:hidden;border:7px solid #171E2E;
background:linear-gradient(118deg,#1C63DF 0%,#2A9BF3 48%,#25B9A4 100%);
box-shadow:0 34px 70px -24px rgba(20,40,90,.6),0 0 0 1px rgba(255,255,255,.4),0 0 0 1px rgba(255,255,255,.25) inset,
0 0 28px 4px rgba(42,155,243,.55),0 0 70px 14px rgba(42,155,243,.35),0 0 150px 40px rgba(37,185,164,.22)}
/* the light the hero screen throws on the wall, breathing like the mark's */
.aim-landing .hs-tv2::before{content:"";position:absolute;inset:-26px -40px;z-index:-1;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(42,155,243,.75),rgba(37,185,164,.5) 45%,rgba(251,191,36,.2) 72%,transparent 100%);
filter:blur(24px);will-change:transform,opacity;animation:tvglow 5s ease-in-out infinite}
.aim-landing .hs-tv2-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%);pointer-events:none}
.aim-landing .hs-refresh{position:absolute;left:0;right:0;top:14px;text-align:center;font-family:var(--disp);font-size:78px;line-height:1;font-weight:900;font-style:italic;color:#fff;letter-spacing:-.03em;transform:skewX(-8deg);text-shadow:0 10px 28px rgba(0,40,120,.45)}
/* slide 1 is built from Greg's layered export: a full two-sided splash, the can standing in the
gap between the two sides, the headline over it. No masks, nothing patched. */
.aim-landing .hs-splash{position:absolute;left:2%;bottom:-6px;width:96%}
.aim-landing .hs-tv2 .hs-splash,.aim-landing .hs-tv2 .hs-can,.aim-landing .hs-tv2 .hs-ice1,.aim-landing .hs-tv2 .hs-ice2,.aim-landing .hs-tv2 .hs-ice3{position:absolute;display:block;pointer-events:none;user-select:none}
/* the can overhangs the top of the frame; its base fades into the splash (the render is cut there) */
/* no drop-shadow here: a filter under a mask paints a faint box around the element in Chrome */
/* the can stands in the splash at the bottom centre of the screen, its top under the headline */
.aim-landing .hs-tv2 .hs-can{left:46%;bottom:-22px;top:auto;width:30%;transform:translateX(-50%);z-index:2;
-webkit-mask-image:linear-gradient(#000 84%,transparent 100%);mask-image:linear-gradient(#000 84%,transparent 100%)}
/* ===== the loop: nine ads, 4.5 s each (the video slot holds 6 s), a soft cut between them; opacity
only, so it composites ===== */
.aim-landing .ad{position:absolute;inset:0;opacity:0;will-change:opacity;animation:adloop 42s linear infinite both;overflow:hidden}
.aim-landing .ad-ext{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity;animation:adloopv 42s linear infinite both}
.aim-landing .ad-1{animation-name:adloopv}.aim-landing .ad-2{animation-delay:6s}.aim-landing .ad-3{animation-delay:10.5s}.aim-landing .ad-4{animation-delay:15s}
.aim-landing .ad-5{animation-delay:19.5s}.aim-landing .ad-6{animation-delay:24s}.aim-landing .ad-7{animation-delay:28.5s}.aim-landing .ad-8{animation-delay:33s}
.aim-landing .ad-9{animation-delay:37.5s}
/* the "Your ad here" house slide — a plate, not a photo, so it gets a brand-gradient ground instead
of an .ad-img. Reuses the .k/h4/p/.pill type system every other slide's copy would use, so it
reads as one more spot in the rotation rather than a bolted-on banner. */
.aim-landing .ad-house{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
padding:24px 26px;text-decoration:none;cursor:pointer;
background:linear-gradient(135deg,#0b1220 0%,#122036 42%,#1C63DF 100%)}
.aim-landing .ad-house::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(120deg,rgba(56,189,248,.4),rgba(251,191,36,.22) 55%,rgba(251,113,133,.32));
mix-blend-mode:screen}
.aim-landing .ad-house .k{position:relative;z-index:1}
.aim-landing .ad-house h4{position:relative;z-index:1}
.aim-landing .ad-house p{position:relative;z-index:1}
.aim-landing .ad-house .pill{position:relative;z-index:1}
@keyframes adloop{0%{opacity:0}1.6%{opacity:1}12%{opacity:1}13.6%{opacity:0}100%{opacity:0}}
@keyframes adloopv{0%{opacity:0}1.6%{opacity:1}16%{opacity:1}17.6%{opacity:0}100%{opacity:0}}
html.aim-still .aim-landing .ad-1,html.aim-still .aim-landing .ad-ext{opacity:1}
@media (prefers-reduced-motion:reduce){.aim-landing .ad,.aim-landing .ad-ext{animation:none}.aim-landing .ad-1,.aim-landing .ad-ext{opacity:1}}
/* the QR plate, bottom right of every ad — the one thing every creative on the network carries */
.aim-landing .ad-qr{position:absolute;left:12px;bottom:12px;width:58px;height:58px;padding:5px;border-radius:8px;background:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.45);z-index:3}
.aim-landing .ad-qr img{display:block;width:100%;height:100%}
.aim-landing .ad-qr.r{left:auto;right:12px}
/* the Luck Guide card was designed around a larger plate bottom-left: match its footprint so it covers the card's own tint */
.aim-landing .ad-qr.big{left:4%;bottom:5%;width:19%;height:auto;aspect-ratio:1;padding:1.4%;border-radius:10px}
.aim-landing .ad-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.aim-landing .ad-video{background:#0b1220}
.aim-landing .hs-tv2 .hs-ice1{left:-34px;top:118px;width:68px;z-index:2;filter:drop-shadow(0 14px 22px rgba(20,40,90,.35))}
.aim-landing .hs-tv2 .hs-ice2{right:-26px;top:16px;width:60px;z-index:2;filter:drop-shadow(0 14px 22px rgba(20,40,90,.35))}
.aim-landing .hs-tv2 .hs-ice3{right:44px;bottom:-26px;width:56px;z-index:2;filter:drop-shadow(0 14px 22px rgba(20,40,90,.35))}
/* the person at the register: counter scale, waist behind the counter */
.aim-landing .hs-stand{position:absolute;right:250px;bottom:140px;width:74px;z-index:3;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(20,40,90,.3))}
@keyframes hsFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.2deg)}}
@keyframes hsSplash{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
/* the counter, the terminal, and the people (the same walk as before — new figures) */
.aim-landing .hs-pos{position:absolute;left:calc(62% + 140px);bottom:98px;width:56px;z-index:7;filter:drop-shadow(0 10px 12px rgba(20,30,60,.28))}
.aim-landing .pos .reader,.aim-landing .receipt{display:none}
.aim-landing .walker{color:inherit;opacity:var(--op,.95);-webkit-mask-image:none;mask-image:none;z-index:3}
.aim-landing .walker img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(20,40,90,.28))}
/* people at counter scale: 60–78px wide, waists behind the counter, never taller than the TV */
/* THREE figures, one per PNG — there are only three figure images. A fourth walker reused figure3
two lanes from w2; the two identical translucent silhouettes paused a few px apart and read as one
figure with a doubled shoulder (Greg, 2026-10-02). Lanes spread so pauses don't stack. */
.aim-landing .walker.w1{left:59%;bottom:132px;width:62px;height:auto;--op:.96;animation-duration:32s;animation-delay:-3s}
.aim-landing .walker.w2{left:67%;bottom:120px;width:78px;height:auto;--op:1;animation-duration:40s;animation-delay:-12s}
.aim-landing .walker.w3{left:54%;bottom:150px;width:60px;height:auto;--op:.92;animation-duration:30s;animation-delay:-20s}
.aim-landing .walker.w4,.aim-landing .walker.w5,.aim-landing .walker.w6{display:none}
/* three sides: a gradient field, one wide panel, three cards with the 3D icons */
.aim-landing .hs-sides{position:relative;border-radius:30px;padding:28px 28px 30px;
background:linear-gradient(120deg,#E8F1FF 0%,#F6F8FC 45%,#FFF1E3 100%);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 70px -40px rgba(30,60,120,.35)}
.aim-landing .hs-sides .hs-top{background:#fff;border-radius:22px;padding:22px 26px;box-shadow:0 18px 40px -28px rgba(30,60,120,.35)}
.aim-landing .hs-sides .hs-top h2{margin:0 0 6px;color:var(--hs-ink)}
.aim-landing .hs-sides .hs-top .lead{margin:0}
.aim-landing .hs-sides .lcards{margin-top:18px}
.aim-landing .hs-sides .lcard{background:#fff;border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 40px -28px rgba(30,60,120,.35);align-items:center;text-align:center}
.aim-landing .hs-sides .lcard .hs-icon{width:120px;height:120px;object-fit:contain;margin:4px auto 10px;filter:drop-shadow(0 14px 22px rgba(30,60,120,.22))}
.aim-landing .hs-sides .lcard .lcard-head{justify-content:center;min-height:0}
.aim-landing .hs-sides .lcard a.lk{margin-top:auto;background:none;-webkit-text-fill-color:currentColor;color:#2D9CFF}
/* why it beats the feed: the eight glass cards as delivered */
.aim-landing .hs-cards{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.aim-landing .hs-cards img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(30,60,120,.16));transition:transform .18s ease}
@media(hover:hover){.aim-landing .hs-cards a:hover img{transform:translateY(-6px)}}
.aim-landing .hs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* FAQ: white panel on the soft gradient */
.aim-landing .hs-faq{border-radius:22px;padding:28px;background:linear-gradient(120deg,#E8F1FF 0%,#F6F8FC 50%,#FFF1E3 100%);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 70px -40px rgba(30,60,120,.35)}
.aim-landing .hs-faq h2{color:var(--hs-ink);margin:0 0 4px}
.aim-landing .hs-faq .lead{margin:0 0 18px}
.aim-landing .hs-faq .faqlist{max-width:none;gap:0;background:#fff;border-radius:22px;padding:6px 24px;box-shadow:0 18px 40px -28px rgba(30,60,120,.35)}
.aim-landing .hs-faq .faqitem{background:none;border:0;border-radius:0;box-shadow:none;padding:0;border-top:1px solid rgba(30,41,59,.08)}
.aim-landing .hs-faq .faqitem:first-child{border-top:0}
.aim-landing .hs-faq .faqitem summary{padding:18px 0;font-size:16.5px;color:var(--hs-ink)}
.aim-landing .hs-faq .faqitem summary::after{color:var(--hs-ink);font-size:24px}
/* ===== pick your stores — the Location cards, right on the home page ===== */
.aim-landing .hs-pick{position:relative;border-radius:0;padding:0;background:none;border:0;box-shadow:none}
.aim-landing .hs-locs .loc-body>.loc-fine{display:none}
.aim-landing .hs-locs .loc-src-host{display:none}
.aim-landing .hs-locs .loc-tag,#scr-list .loc-tag{display:none}
#scr-list .loc-src-host{display:none}
.aim-landing .ab-tiles.hs-why-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.aim-landing .hs-bar .lbtn.lgrad,.aim-landing .lfoot .lbtn.lgrad{background:var(--hs-ink);box-shadow:0 8px 20px -12px rgba(15,22,51,.6)}
.aim-landing .hs-pick h2{color:var(--hs-ink);margin:0 0 4px}
.aim-landing .hs-pick .lead{margin:0 0 16px}
.aim-landing .hs-pick-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.aim-landing .hs-pick-head a.lk{color:#2D9CFF;font-weight:700;text-decoration:none;white-space:nowrap;padding-top:14px}
.aim-landing .hs-hoods{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 18px}
.aim-landing .hs-hoods button{font:inherit;font-size:13px;font-weight:600;padding:6px 10px;border-radius:999px;border:1px solid transparent;background:none;color:var(--sub);cursor:pointer;transition:background .15s,color .15s}
.aim-landing .hs-hoods button:hover{color:var(--hs-ink);background:rgba(255,255,255,.6)}
.aim-landing .hs-hoods button.on{background:#1B2340;color:#fff;border-color:#1B2340}
.aim-landing .hs-hoods button b{font-weight:600;opacity:.6;margin-left:4px}
.aim-landing .hs-locs{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.aim-landing .hs-locs .loc[hidden]{display:none}
.aim-landing .hs-locs .loc.is-prospect .loc-body{opacity:.8}
.aim-landing .hs-locs .loc-add{color:#fff}
.aim-landing .hs-bar{position:sticky;bottom:14px;z-index:5;transform:translateZ(0);margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding:14px 16px 14px 22px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 50px -28px rgba(30,60,120,.5)}
.panel.tgt .chips{gap:2px}
.panel.tgt .chip{border:1px solid transparent;background:none;padding:5px 9px;font-size:13px;font-weight:600;border-radius:999px;color:var(--sub)}
.panel.tgt .chip:hover{border-color:transparent;background:rgba(255,255,255,.7);color:var(--ink)}
.panel.tgt .chip:has(input:checked){background:var(--hs-ink,#1B2340);border-color:transparent;color:#fff;font-weight:700}
.panel.tgt .chip small{display:inline;font-size:11px;opacity:.55;margin-left:4px}
.panel.tgt .tgt-row{align-items:flex-start;padding:8px 0}
.panel.tgt .tgt-k{font-size:10.5px;letter-spacing:.08em;min-width:64px;padding-top:6px}
.panel.tgt.is-cart .tgt-row{display:none}
.panel.tgt.is-cart.is-open .tgt-row{display:flex}
.tgt-toggle{margin-left:auto;font:inherit;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--gline);background:rgba(255,255,255,.7);color:var(--hs-ink);cursor:pointer}
.panel.tgt.is-cart .tgt-head{display:flex;align-items:center;gap:10px}
.aim-landing .hs-step button{min-width:28px;font-size:16px;line-height:1;padding:6px 8px}
.aim-landing .hs-wk{font-size:13.5px;font-weight:700;color:var(--hs-ink);min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.aim-landing .hs-opt input[type=date]{font:inherit;font-size:13px;font-weight:600;color:var(--hs-ink);border:1px solid var(--gline);background:rgba(255,255,255,.7);border-radius:10px;padding:5px 8px}
.aim-landing .hs-math-btn{display:block;margin-left:auto;font:inherit;font-size:11.5px;font-weight:600;color:var(--sub);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.aim-landing .hs-math{flex-basis:100%;order:9;margin-top:12px;padding-top:12px;border-top:1px solid var(--gline)}
.aim-landing .hs-math .q{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:13.5px;color:var(--sub);border-bottom:1px solid var(--gline)}
.aim-landing .hs-math .q:last-of-type{border-bottom:0}
.aim-landing .hs-math .q b{color:var(--hs-ink);font-variant-numeric:tabular-nums}
.aim-landing .hs-math .q small{font-weight:400}
.aim-landing .hs-math-note{margin:8px 0 0;font-size:11.5px;color:var(--sub)}
.aim-landing .hs-bar-main{min-width:150px}
.aim-landing .hs-opts{display:flex;gap:18px;align-items:center;flex-wrap:wrap;flex:1 1 auto;justify-content:center}
.aim-landing .hs-opt{display:flex;align-items:center;gap:4px}
.aim-landing .hs-opt .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-right:4px}
.aim-landing .hs-opt button{font:inherit;font-size:13px;font-weight:700;min-width:34px;padding:6px 10px;border-radius:10px;border:1px solid transparent;background:none;color:var(--sub);cursor:pointer;transition:background .15s,color .15s}
.aim-landing .hs-opt button:hover{color:var(--hs-ink);background:rgba(255,255,255,.7)}
.aim-landing .hs-opt button.on{background:var(--hs-ink);color:#fff}
.aim-landing .hs-bar-go{display:flex;align-items:center;gap:16px;margin-left:auto}
.aim-landing .hs-total{text-align:right;line-height:1.15}
.aim-landing .hs-total b{display:block;font-family:var(--fig);font-size:26px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--hs-ink)}
.aim-landing .hs-total span{font-size:11.5px;color:var(--sub)}
@media(max-width:760px){.aim-landing .hs-opts{justify-content:flex-start;width:100%;order:3}.aim-landing .hs-bar-go{width:100%;justify-content:space-between}}
.aim-landing .hs-bar .n{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--hs-ink)}
.aim-landing .hs-bar .n small{font-size:13px;font-weight:600;color:var(--sub);letter-spacing:0;margin-left:6px}
.aim-landing .hs-bar .sub{font-size:12.5px;color:var(--sub);margin-top:2px}
.aim-landing .hs-bar .sub b{color:var(--hs-ink)}
.aim-landing .hs-bar .lbtn{margin:0}
/* ===== About: three glass surfaces on the living background, everything else quiet ===== */
.aim-landing .ab-sec{margin-top:64px}
.aim-landing .ab-head{max-width:720px;margin:0 0 22px}
.aim-landing .ab-eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#2D9CFF;margin-bottom:8px}
.aim-landing .ab-head .lead{margin:0;font-size:22px;line-height:1.35;color:var(--hs-ink);font-weight:600;letter-spacing:-.015em}
.aim-landing .ab-glass{position:relative;isolation:isolate;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.56));
backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.9);
box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 30px 70px -40px rgba(30,60,120,.45)}
.aim-landing .ab-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:.6;
background:conic-gradient(from 200deg,#9EE3FF,#B9F1FF,#F8E19D,#FFC9A2,#FFB4B6,#F79BF9,#A578DF,#3F7FE6,#9EE3FF);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.aim-landing .ab-three{display:grid;grid-template-columns:repeat(3,1fr)}
.aim-landing .ab-col{padding:30px 30px 28px;display:flex;flex-direction:column;gap:10px;border-left:1px solid rgba(30,41,59,.08)}
.aim-landing .ab-col:first-child{border-left:0}
.aim-landing .ab-vis{height:84px;display:flex;align-items:flex-end;margin-bottom:8px}
.aim-landing .ab-vis-tv .tvlogo{transform:scale(1.35);transform-origin:left bottom;margin:0 0 6px 4px}
.aim-landing .ab-vis-store{width:132px;height:76px;border-radius:12px;overflow:hidden;position:relative;border:3px solid #171E2E;box-shadow:0 10px 22px -12px rgba(20,30,60,.5),0 0 16px 1px rgba(42,155,243,.25);background:#dfe9f5}
.aim-landing .ab-vis-store svg{position:absolute;inset:0;width:100%;height:100%}
.aim-landing .ab-vis-shopper img{height:84px;width:auto;filter:drop-shadow(0 12px 18px rgba(30,60,120,.28))}
.aim-landing .ab-tag{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.aim-landing .ab-col h3{margin:0;font-size:21px;letter-spacing:-.025em;line-height:1.15;color:var(--hs-ink)}
.aim-landing .ab-col p{margin:0;color:var(--sub);font-size:15px;line-height:1.55}
.aim-landing .ab-col .lk{margin-top:auto;padding-top:8px;color:#2D9CFF;font-weight:700;font-size:14px}
.aim-landing .ab-col .lk2{color:var(--hs-ink);font-weight:800;font-size:14px}
.aim-landing .ab-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.aim-landing .ab-tile{position:relative;padding:22px 20px 20px 22px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);
box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 16px 36px -28px rgba(30,60,120,.4);transition:transform .16s ease,box-shadow .16s ease}
.aim-landing .ab-tile:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 24px 48px -28px rgba(30,60,120,.5)}
.aim-landing .ab-tile i{position:absolute;left:0;top:22px;width:3px;height:22px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#2A9BF3,#25B9A4)}
.aim-landing .ab-tile h3{margin:0 0 8px;font-size:16.5px;letter-spacing:-.02em;line-height:1.2;color:var(--hs-ink)}
.aim-landing .ab-tile p{margin:0;font-size:13.5px;line-height:1.5;color:var(--sub)}
.aim-landing .ab-faq{padding:8px 28px}
.aim-landing .ab-q{border-top:1px solid rgba(30,41,59,.08)}
.aim-landing .ab-q:first-child{border-top:0}
.aim-landing .ab-q summary{list-style:none;cursor:pointer;padding:18px 0;font-size:16.5px;font-weight:700;color:var(--hs-ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.aim-landing .ab-q summary::-webkit-details-marker{display:none}
.aim-landing .ab-q summary::after{content:"+";font-size:22px;font-weight:400;color:var(--sub);transition:transform .2s}
.aim-landing .ab-q[open] summary::after{transform:rotate(45deg)}
.aim-landing .ab-q p{margin:0 0 18px;color:var(--sub);font-size:15px;line-height:1.6;max-width:62ch}
.aim-landing .ab-q p a{color:#2D9CFF;font-weight:700}
.aim-landing .ab-cta{display:flex;gap:12px;justify-content:center;margin-top:34px}
@media(max-width:900px){.aim-landing .ab-three{grid-template-columns:1fr}.aim-landing .ab-col{border-left:0;border-top:1px solid rgba(30,41,59,.08)}.aim-landing .ab-col:first-child{border-top:0}.aim-landing .ab-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.aim-landing .ab-tiles.hs-why-tiles{grid-template-columns:1fr}}
@media(max-width:560px){.aim-landing .ab-tiles{grid-template-columns:1fr}.aim-landing .ab-faq{padding:4px 18px}.aim-landing .ab-head .lead{font-size:19px}.aim-landing .ab-sec{margin-top:44px}.aim-landing .ab-col{padding:22px 20px}.aim-landing .ab-cta{flex-direction:column}.aim-landing .ab-cta .tvb{width:100%}}
.aim-landing .about-head{margin-top:34px}
.aim-landing .about-head h1{font-size:44px;letter-spacing:-.04em;line-height:1.05;margin:0 0 10px;color:var(--hs-ink)}
.aim-landing .about-head .lead{max-width:720px;margin:0}
.aim-landing.about .ab-sec:first-of-type{margin-top:36px}
@media(max-width:1100px){.aim-landing .hs-locs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.aim-landing .hs-locs{grid-template-columns:1fr}.aim-landing .hs-pick{padding:0}.aim-landing .hs-bar{padding:12px 14px;bottom:8px}.aim-landing .about-head h1{font-size:32px}}
@media(max-width:1100px){.aim-landing .hs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
.aim-landing .hs-tv2{position:relative;right:auto;top:auto;width:min(88%,420px);height:auto;aspect-ratio:16/9;margin:34px auto 6px;order:4;align-self:center;z-index:5}
.aim-landing .hs-refresh{font-size:clamp(40px,12vw,64px)}
.aim-landing .hs-tv2 .hs-can{bottom:-11%;width:29%}
.aim-landing .hs-tv2 .hs-ice1{left:-18px;width:52px}.aim-landing .hs-tv2 .hs-ice2{right:-14px;width:46px}.aim-landing .hs-tv2 .hs-ice3{width:44px;bottom:-18px}
.aim-landing .hs-pos,.aim-landing .pos{display:none}
.aim-landing .walker.w4{display:none}
/* on a phone the stage stacks, so only one small figure walks behind the counter band */
.aim-landing .walker.w1,.aim-landing .walker.w3{display:none}
.aim-landing .walker.w2{left:52%;bottom:150px;width:46px}
.aim-landing .copy h1{font-size:34px;max-width:none}
.aim-landing .hs-sides,.aim-landing .hs-faq{padding:18px;border-radius:22px}
}
@media(max-width:520px){.aim-landing .hs-cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.aim-landing .hs-screen img{animation:none !important}}
/* ===== the Location card — one template for the buy page, the live page, the corridor page and
the console. Glass (the pills) sits only on the photo band, where there is something to blur;
the body is a quiet white surface. Approved by Greg 2026-09-20 (mockups/location-card.html). ===== */
.loc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.loc{position:relative;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.90);
border:1px solid var(--glassBorder);box-shadow:0 16px 40px -24px rgba(30,60,120,.35),0 1px 0 rgba(255,255,255,.9) inset;
display:flex;flex-direction:column;transition:opacity .18s,transform .18s}
.loc-meter{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#15803D;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.28);border-radius:999px;padding:3px 9px 3px 7px;white-space:nowrap}
.loc-meter .dot{width:6px;height:6px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:locpulse 2s ease-out infinite}
.loc.is-off{opacity:.55}
.loc.is-soldout{opacity:.6}
.loc-band{position:relative;height:150px;overflow:hidden;background:#dfe9f5}
.loc-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06)}
.loc-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(15,23,42,.10),rgba(15,23,42,.02) 45%,rgba(255,255,255,.55) 100%)}
.loc-band .lv-sceneart,.loc-band svg{position:absolute;inset:0;width:100%;height:100%}
.loc-pill{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:700;
color:var(--ink);background:rgba(255,255,255,.86);border:1px solid var(--glassBorder);white-space:nowrap;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px -12px rgba(15,23,42,.45)}
/* glass only where there is a photograph to blur — a blur over flat artwork is invisible and expensive */
.loc-band img ~ .loc-pill{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%)}
.loc-pill.tl{top:10px;left:10px}.loc-pill.tr{top:10px;right:10px}
.loc-pill.bl{bottom:10px;left:10px}
.loc-pill.type{font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;color:var(--sub)}
.loc-pill[hidden]{display:none}
.loc-pill.host{color:var(--sub);font-weight:600}
.loc-pill.soon{color:var(--ink);font-weight:700;background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 20px -10px rgba(15,23,42,.5)}
.loc-pill.soon::after{content:"";order:-1;width:8px;height:8px;border-radius:50%;background:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,.22)}
.loc-pill .of{font-weight:500;color:var(--sub)}
.loc-pill b{font-variant-numeric:tabular-nums}
.loc-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:locpulse 1.8s infinite}
/* the door light: idle grey; flashes green on an entry, blue on an exit (set by the live painter) */
.loc-pill .led{width:8px;height:8px;border-radius:50%;background:#cbd5e1;transition:background .2s,box-shadow .2s}
.loc-pill .led.in{background:var(--green);box-shadow:0 0 0 5px rgba(34,197,94,.25)}
.loc-pill .led.out{background:#38BDF8;box-shadow:0 0 0 5px rgba(56,189,248,.25)}
@keyframes locpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.loc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.loc-title{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.loc-title b{font-size:16px;letter-spacing:-.2px;line-height:1.2}
.loc-sub{color:var(--sub);font-size:12.5px;margin-top:2px}
.loc-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);padding-top:3px;text-align:right;flex:0 0 auto;line-height:1.35}
.loc-tag .rng{display:block;font-weight:600;letter-spacing:.02em;opacity:.8;white-space:nowrap}
.loc-price{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.loc-price .n{font-family:var(--fig);font-size:28px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.loc-price .n small{font-size:12px;font-weight:600;color:var(--sub);letter-spacing:0;margin-left:5px}
.loc-price .m{font-size:12.5px;color:var(--sub)}
/* Idea 7: the "≈ X¢ a view" chip — same glass-pill look as the pipeline panel's "from $X" price
tag (rgba glass + var(--glassBorder)), not a new component. */
.loc-cpv{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;color:var(--sub);
background:rgba(255,255,255,.85);border:1px solid var(--glassBorder);border-radius:999px;
padding:3px 9px;white-space:nowrap;vertical-align:2px}
/* Idea 3: the busy-hours strip — 24 thin static bars, no animation (so no reduced-motion rule is
needed: there is nothing to reduce). --hs-gold is only defined inside .aim-landing, so the peak
bar falls back to the same literal amber everywhere this card renders outside the home page
(owner console, host portal). */
.loc-busy{margin:6px 0 2px}
.loc-busybars{display:flex;align-items:flex-end;gap:1.5px;height:22px}
.loc-busybars>span{flex:1;min-height:2px;border-radius:2px 2px 0 0;background:var(--sub);opacity:.3}
.loc-busybars>span.peak{background:var(--hs-gold,#E1A62B);opacity:1}
.loc-busycap{font-size:10.5px;color:var(--sub);margin-top:3px}
.loc-fine{font-size:11.5px;color:var(--sub);line-height:1.4}
.loc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:4px}
.loc-add{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:800;font-size:13px;padding:7px 13px;border-radius:12px;
background:linear-gradient(160deg,#1E2740,#0B1220);color:#fff;border:3px solid #171E2E;text-shadow:none;
box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 22px -12px rgba(20,30,60,.6);user-select:none}
.loc-add:hover{background:linear-gradient(160deg,#27324F,#111A2E)}
.loc-add input{width:15px;height:15px;margin:0;accent-color:#fff}
.loc.is-off .loc-add{background:linear-gradient(160deg,#1E2740,#0B1220);color:#fff;opacity:.9}
.loc-why{font-size:12.5px;color:#0284C7;font-weight:600;cursor:pointer;background:none;border:none;font-family:inherit;padding:0}
.loc-explain{font-size:12px;color:var(--sub);line-height:1.45;padding:10px 12px;border-radius:10px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25)}
.loc-explain[hidden]{display:none}
.loc-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(34,197,94,.16);color:#15803D;margin-left:6px;vertical-align:2px}
.loc-link{color:inherit;text-decoration:none}.loc-link::after{content:"";position:absolute;inset:0}
.loc-foot{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:12px;color:var(--sub);padding-top:6px;border-top:1px solid rgba(30,41,59,.08);position:relative;z-index:2}
/* the owner's roster: three across, a pager, the same cards a buyer sees */
.inv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.inv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.inv-grid{grid-template-columns:1fr}}
.inv-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--sub)}
.inv-pager a{font-weight:700;color:#0284C7}
@media(max-width:760px){.loc-grid{grid-template-columns:1fr}}
@media (prefers-reduced-transparency:reduce){.loc-pill{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.loc-pill .dot{animation:none}}