/* ============================================================
   COLLECT CO. — SITE STYLES  v3  (monochrome editorial)
   Black / white / grey only. Color comes from photography + video.
   Inspiration: Ferrari (video carousel, split panels, big footer)
   + SpaceX (negative space, uppercase letter-spaced type).
   Straight edges. Display: Oswald. Body: Inter. Data: mono.
   ============================================================ */

:root{
  color-scheme:dark;       /* native controls, scrollbars, autofill + form UI render dark to match the monochrome theme */
  --header-h:92px; /* ticker (18px) + nav (74px); sticky offsets reference this so they never drift */
  /* dark surfaces */
  --bg:#0a0a0b; --bg2:#121214; --panel:#1a1a1c; --panel2:#232327;
  --line:#2b2b2f; --line2:#3a3a40;
  /* light surfaces */
  --lt:#f5f5f4; --lt2:#ebeae8; --lt-panel:#ffffff; --lt-line:#dcdbd8; --lt-ink:#111112; --lt-dim:#5e5e62;
  /* text on dark */
  --white:#f6f6f5; --dim:#a9a9ad; --faint:#6a6a6f;
  /* single subtle accent — near-white, used sparingly for focus rings only */
  --accent:#ffffff;
  --promo:#c8102e;         /* promo red — signing/featured only */
  --maxw:1280px;
  /* one radius scale — fluid + cohesive (everything references these, no orphan values) */
  --r-sm:8px;              /* small: chips, badges, thumbnails */
  --r:12px;                /* default: buttons, inputs, cards */
  --r-lg:18px;             /* large: panels, modals, feature cards */
  --r-pill:999px;          /* pills: toggles, status badges, float pill */
  --r-soft:8px;
  --shadow:0 20px 50px rgba(0,0,0,.55);
  --shadow-sm:0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --shadow-lt:0 16px 44px rgba(15,15,18,.10);
  --ease:cubic-bezier(.2,.7,.2,1);   /* the site's fluid easing */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--white);font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
/* iOS Safari FORCE-ZOOMS the whole page (blowing the video out of proportion) whenever a focused
   field's OWN computed font-size is < 16px. Form controls carry their own small UA font, so this
   floor must sit on the controls themselves, on touch devices. This single rule kills the zoom. */
@media (pointer: coarse) {
  input, textarea, select { font-size: max(16px, 1em); }
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

.display{font-family:"Oswald",Impact,sans-serif;font-weight:600;letter-spacing:.5px;line-height:1;text-transform:uppercase}
.mono{font-family:"JetBrains Mono","SF Mono",ui-monospace,monospace}
.kicker{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:4px;font-size:12px;font-weight:600;color:var(--dim)}
.lt .kicker,.lt2 .kicker{color:var(--lt-dim)}

/* ---------- NAV ---------- */
/* the whole header (promo ticker + nav) is one fixed bar, set up by initHeader() */
.site-head{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .4s cubic-bezier(.4,0,.2,1)}
/* SpaceX: the header slides up out of the way when you scroll DOWN and returns on scroll UP */
.site-head.nav-hidden{transform:translateY(-100%)}
.nav{position:relative;z-index:100;background:rgba(10,10,11,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06);transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease}
/* on a hero page the nav floats fully transparently over the video — NO box scrim (that
   left a hard edge/"line"); legibility comes from the hero's own top gradient + text-shadow.
   It solidifies on scroll. */
body.cc-hero .nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.cc-hero .nav-links a,body.cc-hero .logo,body.cc-hero .btn-account,body.cc-hero .cart-btn{text-shadow:0 1px 16px rgba(0,0,0,.55)}
body.cc-hero .site-head.scrolled .nav{background:rgba(10,10,11,.88);border-bottom-color:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body.cc-hero .site-head.scrolled .nav-links a,body.cc-hero .site-head.scrolled .logo,body.cc-hero .site-head.scrolled .btn-account,body.cc-hero .site-head.scrolled .cart-btn{text-shadow:none}
/* 3-column grid centers the nav in the VIEWPORT regardless of logo/right widths */
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:74px;max-width:none;margin:0;padding:0 clamp(20px,3vw,56px)}   /* full-width bar: logo sits flush-left, the live/cart/profile cluster flush-right, nav stays centered */
.logo-img{height:30px;width:auto}
.logo{font-family:"Oswald",sans-serif;font-weight:700;font-size:22px;letter-spacing:2px;color:var(--white);white-space:nowrap;justify-self:start}
.nav-links{display:flex;gap:2px;margin:0;justify-self:center;align-self:stretch;align-items:stretch}
/* TABS (plain links AND dropdown-parent links) — every tab is a full-height, vertically
   centered link so they all sit on one line and the active underline meets the bar's edge.
   Scoped to direct children so it never touches the dropdown items inside .nav-drop. */
.nav-links>a,.nav-item>a{display:inline-flex;align-items:center;gap:6px;height:100%;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:13.5px;font-weight:600;color:var(--white);padding:0 16px;opacity:.86;transition:color .16s,opacity .16s}
.nav-links>a:hover,.nav-item>a:hover{opacity:1}
.nav-links a.active{opacity:1}
/* ---- SpaceX-style dropdown: NOT a box. A panel that's dark where it meets the nav and
   FADES to transparent at the bottom (melting into the page); its items slide DOWN from
   behind the nav (clipped by overflow) and stagger in. The header bar does NOT go black. ---- */
.nav-item{position:relative;display:flex;align-items:stretch}
.nav-item .caret{font-size:11px;opacity:.6;transform:rotate(90deg);transition:transform .3s ease,opacity .2s;display:inline-block}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(270deg);opacity:1}
.nav-drop{position:absolute;left:0;top:100%;width:max-content;min-width:150px;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s;z-index:90}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;pointer-events:auto}
/* SpaceX has almost NO panel — items float over the video with only a soft top scrim that
   fades to nothing; legibility comes from a strong text-shadow, not a box. overflow:hidden +
   a big negative start make the words emerge from BEHIND the nav titles and cascade down. */
.nav-drop-inner{display:flex;flex-direction:column;padding:16px 0 52px;
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.26) 50%,transparent 100%)}
.nav-drop a{position:relative;display:block;padding:9px 28px 9px 24px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap;text-shadow:0 1px 16px rgba(0,0,0,.98),0 0 5px rgba(0,0,0,.85);
  opacity:0;transform:translateY(-42px);transition:color .16s ease,opacity .4s ease,transform .55s cubic-bezier(.2,.7,.2,1),padding-left .18s ease}
.nav-drop a::after{display:none}
.nav-drop a::before{display:none}
.nav-drop a:hover{color:#fff;padding-left:31px}
.nav-item:hover .nav-drop a,.nav-item:focus-within .nav-drop a{opacity:1;transform:none}
.nav-item:hover .nav-drop a:nth-child(1),.nav-item:focus-within .nav-drop a:nth-child(1){transition-delay:.04s}
.nav-item:hover .nav-drop a:nth-child(2),.nav-item:focus-within .nav-drop a:nth-child(2){transition-delay:.08s}
.nav-item:hover .nav-drop a:nth-child(3),.nav-item:focus-within .nav-drop a:nth-child(3){transition-delay:.12s}
.nav-item:hover .nav-drop a:nth-child(4),.nav-item:focus-within .nav-drop a:nth-child(4){transition-delay:.16s}
.nav-item:hover .nav-drop a:nth-child(5),.nav-item:focus-within .nav-drop a:nth-child(5){transition-delay:.20s}
.nav-item:hover .nav-drop a:nth-child(6),.nav-item:focus-within .nav-drop a:nth-child(6){transition-delay:.24s}
/* featured nav tab (e.g. the signing) — promo red, draws the eye */
.nav-links a.featured{color:var(--promo);opacity:1;font-weight:600}
.nav-links a.featured::after{left:14px;right:14px;background:var(--promo);transform:scaleX(1);opacity:.9}
.nav-links a.featured:hover{color:#e23a52}
.nav-links a.featured .feat-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--promo);margin-right:7px;vertical-align:middle;box-shadow:0 0 0 0 rgba(200,16,46,.6);animation:featPulse 2s infinite}
@keyframes featPulse{0%{box-shadow:0 0 0 0 rgba(200,16,46,.55)}70%{box-shadow:0 0 0 7px rgba(200,16,46,0)}100%{box-shadow:0 0 0 0 rgba(200,16,46,0)}}
/* "glow" nav tab (BIN) — eye-catching on every other page WITHOUT breaking the monochrome rule:
   motion (a pulsing white dot) + a standing underline, not color. */
.nav-links a.bin-glow{opacity:1;font-weight:600}
/* BIN gets NO standing underline (that's reserved for the active page + the signing tab) — its signal
   is a green glowing dot. The hover underline is suppressed too so it reads as "special, not current". */
.nav-links a.bin-glow::after{display:none!important}
.nav-links a.bin-glow .bin-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#27e36a;margin-right:7px;vertical-align:middle;box-shadow:0 0 7px rgba(39,227,106,.95);animation:binPulse 1.7s infinite}
@keyframes binPulse{0%{box-shadow:0 0 0 0 rgba(39,227,106,.6),0 0 9px rgba(39,227,106,.95)}70%{box-shadow:0 0 0 7px rgba(39,227,106,0),0 0 11px rgba(39,227,106,.5)}100%{box-shadow:0 0 0 0 rgba(39,227,106,0),0 0 6px rgba(39,227,106,.35)}}
/* Auto LIVE badge — hidden until body.cc-live (set when YouTube live-detection flips on). Red is
   the allowed promo/live accent. Appears in the nav-right cluster on every page. */
.nav-live{display:none;align-items:center;gap:7px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.4px;font-size:12px;font-weight:600;color:#fff;background:var(--promo);padding:5px 12px;border-radius:var(--r-pill);text-decoration:none;line-height:1;white-space:nowrap}
.nav-live:hover{background:#e23a52}
.nav-live .nl-dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulseDot 1.5s infinite}
body.cc-live .nav-live{display:inline-flex}
/* invoice-claim confirm modal */
.inv-confirm-item{display:flex;align-items:center;gap:14px;border:1px solid var(--line2);padding:12px;margin:6px 0 14px;background:var(--panel)}
.inv-confirm-item img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line2)}
.inv-confirm-item .nm{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:15px;color:var(--white)}
.inv-confirm-item .pr{font-size:13px;color:var(--dim);margin-top:3px}
.inv-rules{font-size:12.5px;line-height:1.65;color:var(--dim);background:var(--bg2);border-left:3px solid var(--promo);padding:12px 14px;margin-bottom:14px}
.inv-rules .inv-close{margin-top:8px;color:var(--white)}
.inv-agree{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.55;color:var(--soft);margin-bottom:14px;cursor:pointer}
.inv-agree input{margin-top:2px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--promo)}
.btn-invoice{margin-top:6px;width:100%;justify-content:center}
/* first-time-buyer prompt on the create-account form (promo accent) */
.ftb-prompt{display:flex;align-items:flex-start;gap:11px;font-size:12.5px;line-height:1.5;color:var(--soft);background:var(--bg2);border:1px solid var(--line2);border-left:3px solid var(--promo);border-radius:var(--r-sm);padding:12px 14px;margin:4px 0 16px;cursor:pointer}
.ftb-prompt input{margin-top:2px;flex:0 0 auto;width:18px;height:18px;accent-color:var(--promo)}
.ftb-prompt b{color:var(--white)}
/* tasteful opt-in pop-up (bottom-center card, non-blocking) */
.cc-popup{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);width:min(440px,calc(100vw - 28px));background:var(--panel,#141416);border:1px solid var(--line2,#2a2a2e);box-shadow:var(--shadow);padding:24px 26px 18px;z-index:340;opacity:0;border-radius:var(--r-lg);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.cc-popup.on{transform:translate(-50%,0);opacity:1}
.cc-popup-eyebrow{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2.5px;font-size:10px;color:var(--dim)}
.cc-popup h4{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:20px;margin:6px 0 8px;color:var(--white)}
.cc-popup p{font-size:13px;line-height:1.6;color:var(--soft);margin:0 0 14px}
.cc-popup form{display:flex;gap:8px;flex-wrap:wrap}
.cc-popup input{flex:1;min-width:160px;background:var(--bg2,#0e0e10);border:1px solid var(--line2);color:var(--white);padding:11px 13px;font-size:14px}
.cc-popup form .btn{flex:0 0 auto}
.cc-popup-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--dim);font-size:22px;line-height:1;cursor:pointer}
.cc-popup-no{display:block;margin:10px auto 0;background:none;border:0;color:var(--faint);font-size:11.5px;text-decoration:underline;cursor:pointer}
@media(max-width:560px){.cc-popup{left:8px;right:8px;bottom:78px;width:auto;transform:translateY(220%)}.cc-popup.on{transform:translateY(0)}}
/* ===== cookies notice + new-buyer slide-in ===== */
.cc-cookie{position:fixed;left:50%;bottom:16px;transform:translate(-50%,150%);z-index:330;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;max-width:min(680px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:13px 18px;font-size:13px;line-height:1.5;color:var(--dim);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cc-cookie.on{transform:translate(-50%,0)}
.cc-cookie .btn{flex:0 0 auto}
.cc-newbuyer{position:fixed;right:18px;bottom:88px;z-index:335;width:min(340px,calc(100vw - 28px));background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:22px 22px 18px;transform:translateY(200%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.cc-newbuyer.on{transform:translateY(0);opacity:1}
.cc-nb-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--dim);font-size:20px;line-height:1;cursor:pointer}
.cc-nb-eyebrow{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2.5px;font-size:10px;color:var(--promo)}
.cc-newbuyer h4{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:19px;margin:6px 0 8px;color:#fff}
.cc-newbuyer p{font-size:13px;line-height:1.6;color:var(--soft);margin:0 0 14px}
.cc-nb-no{display:block;margin:10px auto 0;background:none;border:0;color:var(--faint);font-size:11.5px;text-decoration:underline;cursor:pointer}
@media(max-width:560px){.cc-cookie{left:8px;right:8px;bottom:78px;width:auto;max-width:none;transform:translateY(220%)}.cc-cookie.on{transform:translateY(0)}}
/* builder preview is fully interactive; click-to-edit outlines live in assets/ccedit.js */
/* ===== ONE-TIME LAUNCH COUNTDOWN GATE ===== */
html.cc-launch-lock, html.cc-launch-lock body { overflow:hidden !important; }
.cc-launch{position:fixed;inset:0;z-index:100000;background:#050506;display:grid;place-items:center;overflow:hidden;animation:cclFade .5s ease}
.cc-launch-bg{position:absolute;inset:0;background:radial-gradient(1200px 620px at 50% -12%,rgba(255,255,255,.06),transparent 60%),radial-gradient(900px 520px at 50% 118%,rgba(200,16,46,.16),transparent 62%),linear-gradient(#050506,#0a0a0c)}
.cc-launch-bg::before{content:"";position:absolute;inset:-2px;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%);animation:cclGrid 24s linear infinite}
@keyframes cclGrid{to{background-position:46px 46px}}
.cc-launch-in{position:relative;z-index:1;text-align:center;padding:24px}
.cc-launch-logo{font-family:"Oswald",sans-serif;font-weight:700;letter-spacing:6px;font-size:clamp(20px,3vw,30px);color:#fff}
.cc-launch-eyebrow{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--dim);margin:22px 0 26px}
.cc-launch-clock{display:flex;align-items:flex-start;justify-content:center;gap:clamp(6px,1.4vw,16px);color:#fff}
.ccl-unit{display:flex;flex-direction:column;align-items:center;min-width:clamp(54px,10vw,96px)}
.ccl-unit b{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:clamp(38px,8vw,84px);line-height:1;letter-spacing:1px;text-shadow:0 0 26px rgba(255,255,255,.3)}
.ccl-unit span{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--faint);margin-top:10px}
.ccl-sep{font-family:"JetBrains Mono",monospace;font-size:clamp(30px,6vw,60px);color:var(--faint);line-height:1;padding-top:4px;animation:cclBlink 1s steps(1) infinite}
@keyframes cclBlink{50%{opacity:.25}}
.cc-launch-sub{color:var(--dim);font-size:14px;margin-top:30px;max-width:520px;margin-inline:auto;line-height:1.6}
@keyframes cclFade{from{opacity:0}to{opacity:1}}
.cc-launch.gone{opacity:0;transition:opacity .9s ease;pointer-events:none}
.ccl-boom{position:absolute;inset:0;display:grid;place-items:center;font-family:"Oswald",sans-serif;font-weight:700;letter-spacing:4px;font-size:clamp(34px,9vw,90px);color:#fff;z-index:3;animation:cclBoom .7s cubic-bezier(.2,.9,.2,1) both;text-shadow:0 0 40px rgba(200,16,46,.6)}
@keyframes cclBoom{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
.ccl-horns{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none}
.ccl-horn{position:absolute;top:-8%;font-size:clamp(26px,4vw,46px);animation:cclDrop 2.4s cubic-bezier(.3,.2,.5,1) forwards}
@keyframes cclDrop{0%{top:-10%;opacity:0;transform:rotate(0) scale(.6)}12%{opacity:1}70%{opacity:1}100%{top:108%;opacity:0;transform:rotate(var(--r)) scale(1.2)}}
/* ===== MARKETING: popup v2 (image, corner, promo code) ===== */
.cc-pop2.has-img{padding-top:0;overflow:hidden}
.cc-pop2 .cc-pop2-img{height:140px;margin:0 -26px 16px;background-size:cover;background-position:center}
.cc-pop2 .cc-pop2-body{position:relative}
.cc-pop2.cc-pop-corner{left:auto;right:18px;bottom:88px;transform:translateX(0) translateY(200%);width:min(360px,calc(100vw - 28px))}
.cc-pop2.cc-pop-corner.on{transform:translateX(0) translateY(0)}
.cc-pop2-code{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:18px;letter-spacing:2px;color:#fff;background:var(--bg2);border:1px dashed var(--line2);border-radius:var(--r);padding:10px 18px;margin:2px 0 14px;cursor:pointer}
.cc-pop2-code:hover{border-color:#fff}
.cc-pop2.mk-accent{border-color:var(--promo)}
.cc-pop2.mk-accent .cc-pop2-code{border-color:var(--promo);color:#fff}
/* ===== MARKETING: site-wide strip ===== */
.mk-strip{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:var(--bg2);border-bottom:1px solid var(--line);padding:9px 44px 9px 18px;position:relative;font-size:13px;color:var(--soft);text-align:center}
.mk-strip.mk-accent{background:var(--promo);border-bottom-color:var(--promo);color:#fff}
.mk-strip-txt{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:12.5px}
.mk-strip-cta{color:inherit;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mk-strip-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;opacity:.7;font-size:18px;line-height:1;cursor:pointer}
.mk-strip-x:hover{opacity:1}
/* ===== MARKETING: banner blocks (hero / inline) ===== */
.mk-banner{position:relative;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background-size:cover;background-position:center}
.mk-banner.has-img{min-height:280px;display:flex;align-items:center}
.mk-banner .mk-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,9,.86),rgba(8,8,9,.35));z-index:0}
.mk-banner.mk-center .mk-scrim{background:linear-gradient(180deg,rgba(8,8,9,.5),rgba(8,8,9,.78))}
.mk-banner-in{position:relative;z-index:1;max-width:var(--maxw,1240px);margin:0 auto;width:100%;padding:clamp(34px,6vw,68px) clamp(18px,4vw,48px)}
.mk-banner.mk-center .mk-banner-in{text-align:center}
.mk-banner .mk-eyebrow{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:12px;color:var(--dim);margin-bottom:12px}
.mk-banner.mk-accent .mk-eyebrow{color:#ff8a96}
.mk-banner .mk-headline{font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:600;font-size:clamp(26px,4vw,46px);line-height:1.02;letter-spacing:.5px;color:#fff;max-width:760px}
.mk-banner.mk-center .mk-headline{margin-inline:auto}
.mk-banner .mk-bsub{color:var(--soft);font-size:15px;line-height:1.6;margin:14px 0 0;max-width:560px}
.mk-banner.mk-center .mk-bsub{margin-inline:auto}
.mk-banner .mk-cta{margin-top:22px}
.mk-banner.mk-accent .mk-cta{background:var(--promo);color:#fff}
.mk-banner.mk-accent .mk-cta:hover{background:#e01432}
/* pre-order alerts (account) */
.al-switch{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--soft);margin:6px 0 18px;cursor:pointer}
.al-switch input{width:18px;height:18px;accent-color:var(--promo)}
.al-block{margin:0 0 18px}
.al-block h3{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:13px;color:var(--white);margin:0 0 10px}
.al-chips{display:flex;flex-wrap:wrap;gap:8px}
.al-chip{background:var(--bg2);border:1px solid var(--line2);color:var(--soft);font-size:12.5px;padding:7px 13px;border-radius:var(--r-pill);cursor:pointer;transition:all .15s}
.al-chip.on{background:var(--white);color:#0a0a0b;border-color:var(--white)}
.al-add{display:flex;gap:8px;margin-bottom:10px}
.al-add input{flex:1;background:var(--bg2);border:1px solid var(--line2);color:var(--white);padding:9px 12px;font-size:13px}
.al-tag{display:inline-flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--line2);color:var(--soft);font-size:12.5px;padding:5px 6px 5px 12px;border-radius:var(--r-pill)}
.al-tag button{background:none;border:0;color:var(--dim);font-size:15px;cursor:pointer;line-height:1}
.verify-ok{background:rgba(57,217,138,.1);border:1px solid rgba(57,217,138,.4);color:#9be9c0;font-size:13px;padding:11px 14px}
/* live comments */
.live-comments{max-width:760px;margin:34px auto 0;border:1px solid var(--line);background:var(--panel)}
.live-comments h3{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:15px;padding:16px 18px;margin:0;border-bottom:1px solid var(--line)}
.lc-feed{max-height:360px;overflow-y:auto;padding:6px 0}
.lc-item{padding:9px 18px;font-size:13.5px;line-height:1.5;display:flex;gap:10px;align-items:flex-start}
.lc-item .lc-av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;background:var(--bg2);border:1px solid var(--line2)}
.lc-item .lc-txt{min-width:0}
/* auto profile photo (account header) */
.acct-hero-row{display:flex;align-items:center;gap:18px}
.acct-avatar{width:72px;height:72px;border-radius:50%;flex:0 0 auto;background:var(--bg2);border:1px solid var(--line2);object-fit:cover}
@media(max-width:560px){.acct-avatar{width:56px;height:56px}}
/* profile photo editor */
.pf-avatar{display:flex;align-items:center;gap:16px;margin:4px 0 20px}
.pf-avatar-img{width:84px;height:84px;border-radius:50%;flex:0 0 auto;background:var(--bg2);border:1px solid var(--line2);object-fit:cover}
.pf-avatar-actions{min-width:0}
.pf-avatar-btns{display:flex;gap:8px;flex-wrap:wrap}
.pf-avatar .hint{max-width:38ch}
@media(max-width:560px){.pf-avatar-img{width:64px;height:64px}}
.lc-item .u{color:var(--white);font-weight:600;margin-right:8px}
.lc-item .u .live-dot2{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--promo);margin-left:5px;vertical-align:middle}
.lc-item .t{color:var(--soft)}
.lc-item .ago{color:var(--faint);font-size:11px;margin-left:8px}
.lc-empty{padding:22px 18px;color:var(--faint);font-size:13px;text-align:center}
.lc-foot{border-top:1px solid var(--line);padding:14px 18px;display:flex;gap:10px}
.lc-foot input{flex:1;background:var(--bg2);border:1px solid var(--line2);color:var(--white);padding:11px 13px;font-size:16px}   /* 16px = no iOS focus-zoom */
.lc-locked{border-top:1px solid var(--line);padding:16px 18px;color:var(--dim);font-size:13px;text-align:center}
.lc-locked a{color:var(--white);text-decoration:underline}
/* ===== Watch page — Twitch-style: big video + side chat; app-like on phones ===== */
.watch-page{overflow:hidden}
.watch-page .foot{display:none}
.watch-page .live-bg{display:none!important}
.watch-page .otis-launch,.watch-page .otis-panel,.watch-page .float-pill,.watch-page #floatPill{display:none!important}  /* widgets that crowd the video + chat */
.watch-wrap{padding-top:0}   /* the header already reserves its space — no extra offset (was a double gap) */
.watch-grid{display:flex;align-items:stretch;height:calc(100vh - 112px);height:calc(100svh - 112px);background:#000}   /* svh = stable on iOS (no toolbar jump); JS refines to the exact header height via visualViewport */
.watch-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:#000}
.watch-main .player{flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column;background:#000}
.watch-main .stream-box{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border:0!important;border-radius:0;background:#000}
.watch-main .stream-box .stream-head{flex:0 0 auto}
.watch-main .stream-box .stream-video{flex:1 1 auto;min-height:0;aspect-ratio:auto;height:auto;background:#000}
.watch-main .stream-box .stream-offline{margin:auto}
.imm-chatbtn,.imm-exit{display:none}
.watch-info{flex:0 0 auto;background:var(--bg2);border-top:1px solid var(--line)}
/* always-visible bar: title + the minimize toggle (the toggle MUST live here, outside the
   collapsible block, so you can always re-open after collapsing) */
.watch-bar{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:10px 18px}
.watch-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.watch-meta h1{font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:600;font-size:19px;letter-spacing:1px;line-height:1;margin:0;color:var(--white)}
.watch-sub{font-size:11.5px;color:var(--dim)}
/* collapsible block: ALL the control buttons + the description. Minimize hides this whole thing. */
.watch-extra{display:flex;flex-direction:column}
.watch-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 18px 12px}
.wbtn{display:inline-flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line2);color:var(--soft);font-size:13px;font-weight:600;padding:9px 14px;cursor:pointer;text-decoration:none;border-radius:var(--r-sm);transition:border-color .15s,color .15s,background .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.wbtn:hover{border-color:var(--white);color:var(--white)}
.wbtn.on{background:var(--white);color:#0a0a0b;border-color:var(--white)}
.wbtn-yt{background:var(--promo);border-color:var(--promo);color:#fff}
.wbtn-yt:hover{filter:brightness(1.12);color:#fff;border-color:var(--promo)}
.wbtn-min{flex:0 0 auto;padding:8px 13px;font-size:16px;line-height:1}
.watch-note{margin:0;padding:0 18px 13px;font-size:13px;color:var(--soft)}
.watch-note a{color:var(--white);text-decoration:underline}
body.info-min .watch-extra{display:none}   /* minimize collapses controls + description; chat slides up to fill */
.watch-chat{flex:0 0 360px;display:flex;flex-direction:column;min-height:0;background:var(--panel);border-left:1px solid var(--line)}
/* offline Watch: the whole video library replaces the chat in the right column (swaps back when live) */
.vlib{display:none;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px}
body.is-offline .watch-chat .vlib{display:block}
body.is-offline .watch-chat .lc-feed,body.is-offline .watch-chat #lcCompose{display:none}
.vlib-empty{color:var(--faint);font-size:13px;padding:20px 12px;text-align:center}
.vlib-item{display:flex;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:var(--r-sm);padding:8px;cursor:pointer;transition:background .13s}
.vlib-item:hover{background:var(--bg2)}
.vlib-item.on{background:rgba(255,255,255,.09);outline:1px solid var(--line2)}
.vlib-thumb{position:relative;flex:0 0 auto;width:110px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:#000}
.vlib-thumb img{width:100%;height:100%;object-fit:cover}
.vlib-item.on .vlib-thumb::after{content:"\25B6 Now playing";position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-family:"Oswald",sans-serif;font-size:9px;letter-spacing:1px;text-transform:uppercase}
.vlib-meta{display:flex;flex-direction:column;gap:3px;min-width:0;justify-content:center}
.vlib-title{font-size:12.5px;line-height:1.3;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vlib-date{font-size:11px;color:var(--faint);font-family:"JetBrains Mono",monospace}
.wc-head{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line);font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:14px;color:var(--white)}
.wc-head .wc-dot{width:8px;height:8px;border-radius:50%;background:#ff3b3b;animation:pulseDot 1.6s infinite;flex:0 0 auto}
body.is-offline .wc-head .wc-dot{background:var(--faint);animation:none}
.wc-head .wc-tag{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:1px;color:var(--faint);text-transform:uppercase}
.watch-chat .lc-feed{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
.watch-chat #lcCompose{flex:0 0 auto}
body.theater .watch-chat,body.nochat .watch-chat{display:none}
/* (do NOT hide .watch-only in theater — the Theater button must stay clickable to toggle back) */
@media(max-width:980px){
  /* APP SHELL — the grid fills exactly the VISIBLE viewport below the fixed header. --cc-vh tracks the
     real visible height (visualViewport, which excludes the Safari toolbar AND the on-screen keyboard);
     --cc-headh is the actual fixed-header height. Both are published by JS. Nothing here sets element
     pixel heights and the page is NEVER position:fixed-locked — that combination was what made the
     "hide button flings the video off / page frozen" bug. The ONLY scroller is the chat feed, so the
     video can't be pushed away, and if anything ever mis-sizes it self-heals the moment the keyboard
     closes (--cc-vh resets). */
  body.watch-page{overflow:hidden;overscroll-behavior:none}
  body.watch-page [data-footer],body.watch-page .foot{display:none}
  .watch-wrap{padding:0}
  .watch-grid{height:calc(100svh - var(--cc-headh,92px));height:calc(var(--cc-vh,100svh) - var(--cc-headh,92px))}

  /* PORTRAIT: full-width 16:9 video on top, chat fills below */
  .watch-grid{flex-direction:column}
  .watch-main{flex:0 0 auto}
  .watch-main .player{width:100%;height:auto;display:block}
  .watch-main .stream-box{height:auto;display:block}
  .watch-main .stream-box .stream-head{padding:7px 14px}
  .watch-main .stream-box .stream-video{width:100%;aspect-ratio:16/9;height:auto}   /* the VIDEO carries 16:9 (head stacks above it -> no squish) */
  .watch-info{flex:0 0 auto}
  .watch-chat{flex:1 1 auto;min-height:0;border-left:0;border-top:1px solid var(--line)}
  .watch-chat .lc-feed{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .wbtn.watch-only,.wbtn.fs-btn{display:none}   /* Theater + custom Fullscreen are desktop-only; on phones use YouTube's own fullscreen button (true native fullscreen + landscape rotate) */
  body.theater .watch-chat,body.nochat .watch-chat{display:flex}

  /* LANDSCAPE = Twitch-app split: video on the LEFT (fit to height, NOT forced fullscreen), chat on
     the RIGHT. Header hidden to maximise the show; rotate back to portrait for site nav, or tap the
     YouTube player's own button for true fullscreen. */
  @media(orientation:landscape){
    .watch-page .site-head{display:none}
    body.watch-page{padding-top:0!important}
    .watch-grid{height:var(--cc-vh,100svh);flex-direction:row}
    .watch-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;background:#000}
    .watch-main .player{width:100%;height:100%;display:flex}
    .watch-main .stream-box{display:flex;flex-direction:column;justify-content:center;height:100%;width:100%}
    .watch-main .stream-box .stream-head{display:none}
    .watch-info{display:none}
    .watch-main .stream-box .stream-video{width:100%;max-height:100%;aspect-ratio:16/9;height:auto;margin:auto}
    .watch-chat{flex:0 0 40%;max-width:360px;min-width:230px;border-top:0;border-left:1px solid var(--line)}
  }
}
/* ===== IMMERSIVE / pseudo-fullscreen =====
   iOS Safari has NO Fullscreen API for non-<video> elements, so a custom button can't truly
   fullscreen a YouTube iframe. We fill the web viewport with CSS instead (the only reliable
   cross-iPhone approach), sized by --cc-vh (set from visualViewport) so it never hides behind the
   Safari toolbar OR the keyboard. For TRUE video fullscreen the viewer taps YouTube's own button. */
body.cc-fs{overflow:hidden}
body.cc-fs .site-head,body.cc-fs .foot,body.cc-fs .float-pill,body.cc-fs .otis-launch,body.cc-fs .cc-mini,body.cc-fs .promo-ticker{display:none!important}
body.cc-fs .watch-wrap{position:fixed;inset:0;z-index:9990;margin:0;padding:0;max-width:none}
body.cc-fs .watch-grid{flex-direction:column;height:100dvh;height:var(--cc-vh,100dvh);background:#000}
body.cc-fs .watch-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
body.cc-fs .watch-main .player{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column}
body.cc-fs .watch-main .stream-box{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;background:#000}
body.cc-fs .watch-main .stream-head,body.cc-fs .watch-info{display:none}
/* the video grows to fill the whole screen (YouTube letterboxes 16:9 inside) — was collapsing to
   0-height before because .player wasn't flexing. Selector matches the global one + body.cc-fs so it wins. */
body.cc-fs .watch-main .stream-box .stream-video{flex:1 1 auto;min-height:0;width:100%;height:auto;aspect-ratio:auto;margin:0;background:#000}
/* kill the live red glow/border in immersive view (it was the only thing visible on the old black screen) */
body.cc-fs .watch-main .stream-box,body.cc-fs .watch-main .stream-box.is-live{border:0!important;box-shadow:none!important;animation:none!important}
/* exit + chat-toggle FABs, safe-area aware */
body.cc-fs .imm-exit,body.cc-fs .imm-chatbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;position:fixed;z-index:9996;width:46px;height:46px;border-radius:50%;background:rgba(10,10,11,.62);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:18px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:manipulation}
/* exit is a clearly-labeled pill (was a faint circle that was easy to miss on desktop) */
body.cc-fs .imm-exit{top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));width:auto;height:auto;border-radius:24px;padding:11px 18px;font-size:13.5px;font-weight:600;letter-spacing:.4px;background:rgba(10,10,11,.82);border-color:rgba(255,255,255,.42)}
body.cc-fs .imm-exit:hover{background:rgba(0,0,0,.92);border-color:#fff}
body.cc-fs .imm-chatbtn{bottom:calc(16px + env(safe-area-inset-bottom));right:calc(14px + env(safe-area-inset-right))}
body.cc-fs.imm-chat .imm-chatbtn{right:calc(min(380px,88vw) + 14px)}
/* chat as a slide-in overlay (a fixed layer — no DOM moving). Sized by --cc-vh so its compose box
   rides above the keyboard. */
body.cc-fs .watch-chat{position:fixed;top:0;right:0;bottom:auto;width:min(380px,88vw);z-index:9995;display:flex!important;height:100dvh;height:var(--cc-vh,100dvh);background:rgba(8,8,10,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:1px solid rgba(255,255,255,.14);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
body.cc-fs.imm-chat .watch-chat{transform:none}
/* ===== floating mini live-player (homepage + customer pages, only when live) ===== */
.cc-mini{position:fixed;left:18px;bottom:18px;z-index:340;width:288px;background:#0a0a0b;border:1px solid var(--line2);box-shadow:var(--shadow);border-radius:var(--r);overflow:hidden;animation:miniIn .35s ease both}
@keyframes miniIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cc-mini-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.cc-mini-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.cc-mini-go{position:absolute;inset:0;z-index:2;cursor:pointer}
.cc-mini-bar{display:flex;align-items:center;gap:9px;padding:7px 11px;background:#121214;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.cc-mini-bar:active{cursor:grabbing}
.cc-mini-grip{color:var(--faint);font-size:13px;line-height:1;letter-spacing:-1px;cursor:grab}
.cc-mini.dragging{box-shadow:0 24px 60px rgba(0,0,0,.75);opacity:.96}
.cc-mini.dragging .cc-mini-frame iframe{pointer-events:none}
.cc-mini-live{display:inline-flex;align-items:center;gap:6px;font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:1.5px;color:#fff;text-transform:uppercase}
.cc-mini-live .dot{width:7px;height:7px;border-radius:50%;background:#ff3b3b;animation:pulseDot 1.5s infinite}
.cc-mini-watch{margin-left:auto;font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:1px;color:var(--white);text-transform:uppercase;text-decoration:none}
.cc-mini-watch:hover{color:#ff5a5a}
.cc-mini-x{background:none;border:0;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.cc-mini-x:hover{color:#fff}
/* mini-player sound toggle — muted by default (grey), red when the shared preference is unmuted */
.cc-mini-snd{background:none;border:0;color:var(--dim);cursor:pointer;padding:3px 4px;display:inline-flex;align-items:center;line-height:0;border-radius:6px}
.cc-mini-snd:hover{color:#fff;background:rgba(255,255,255,.06)}
.cc-mini-snd.snd-on{color:#ff5a5a}
.cc-mini-snd svg{display:block}
/* Watch-page sound toggle (a .wbtn with icon + label) */
.wbtn-snd{display:inline-flex;align-items:center;gap:7px}
.wbtn-snd svg{display:block}
.wbtn-snd.snd-on{color:#fff;border-color:rgba(255,90,90,.55)}
.cc-mini-live.replay .dot{background:#cfcfd4;animation:none}   /* replay = neutral, not the live red */
/* drag the right edge to resize (desktop); the 16:9 frame keeps the ratio */
.cc-mini-resize{position:absolute;top:0;right:0;width:12px;height:calc(100% - 32px);z-index:3;cursor:ew-resize;touch-action:none}
.cc-mini-resize::after{content:"";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:3px;height:24px;border-radius:3px;background:rgba(255,255,255,.28);transition:background .15s}
.cc-mini:hover .cc-mini-resize::after{background:rgba(255,255,255,.5)}
.cc-mini-resize:hover::after{background:#fff}
.cc-mini.resizing{user-select:none}
@media(hover:none){.cc-mini-resize{display:none}}
/* "mini player mode" intro overlay (Watch page) — darkens the page + explains the mode */
.mini-intro{position:fixed;inset:0;z-index:9997;display:grid;place-items:center;padding:24px;background:rgba(6,6,8,.74);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;transition:opacity .26s}
.mini-intro.on{opacity:1}
.mini-intro-card{max-width:440px;width:100%;background:#101012;border:1px solid var(--line2);border-radius:var(--r-lg);padding:30px 28px;text-align:center;box-shadow:var(--shadow-lg);transform:translateY(10px);transition:transform .3s}
.mini-intro.on .mini-intro-card{transform:none}
.mini-intro-badge{display:inline-flex;align-items:center;gap:8px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:6px 14px;margin-bottom:16px}
.mini-intro-badge .mi-dot{width:7px;height:7px;border-radius:50%;background:#ff3b3b;animation:pulseDot 1.5s infinite}
.mini-intro-card h2{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:23px;color:#fff;margin:0 0 10px}
.mini-intro-card p{color:var(--dim);font-size:14px;line-height:1.6;margin:0 0 22px}
.mini-intro-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
body.has-mini .float-pill{display:none}   /* don't collide (both bottom-left) */
/* Phones: dock the mini compact in the bottom-LEFT corner, level with the Otis chat launcher on the
   right (side by side, never overlapping). A bigger close button so anyone who doesn't realize it's
   draggable can just dismiss it. When the mini is docked, every other bottom overlay (cookie / email
   popup / new-buyer / corner promo) lifts ABOVE it so nothing ever collides. */
@media(max-width:680px){
  .cc-mini{width:168px;left:10px;bottom:14px;right:auto;top:auto}
  .cc-mini-bar{padding:9px 8px 9px 11px}
  .cc-mini-watch{display:none}          /* the video frame itself already opens Watch on tap — keep the bar one line */
  .cc-mini-x{font-size:24px;padding:2px 6px;margin-left:auto}   /* big, obvious dismiss target pinned right */
  .cc-mini-snd{padding:6px 7px}                                 /* bigger tap target on phones */
  body.has-mini .cc-cookie,
  body.has-mini .cc-popup,
  body.has-mini .cc-newbuyer,
  body.has-mini .cc-pop2.cc-pop-corner{bottom:176px}
}
/* ===== suspension (full ban) overlay ===== */
body.cc-banned{overflow:hidden}
.cc-ban-overlay{position:fixed;inset:0;z-index:100000;background:rgba(8,8,9,.97);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(4px)}
.cc-ban-card{max-width:440px;text-align:center;background:#0d0d0e;border:1px solid var(--line2);border-radius:var(--r-lg);padding:34px 30px}
.cc-ban-card h2{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:24px;color:#fff;margin:0 0 12px}
.cc-ban-card p{color:var(--soft);font-size:14px;line-height:1.6;margin:0 0 10px}
.cc-ban-reason{color:var(--dim);font-style:italic}
.cc-ban-until{color:#fff;font-weight:600}
.cc-ban-contact a{color:var(--white);text-decoration:underline}
.cc-ban-card .btn{margin-top:14px}
/* Desktop: burger hidden. MUST be declared BEFORE the max-width:900px block below so that
   block's display:block wins on mobile (same specificity = source order decides). */
.nav-burger{display:none}
/* Tablet + phone (<=900px): switch to the burger menu so dropdown children are
   reachable by TAP (hover never fires on touch), and pin cart/account to the right. */
/* drawer chrome (head/foot) exists only on mobile */
.nav-drawer-head,.nav-drawer-foot{display:none}
@media(max-width:900px){
  .nav-inner{display:flex}
  .nav-burger{display:block;order:3;padding:6px 10px;margin-right:-6px}
  .nav-right{margin-left:auto}
  /* ===== full-height slide-in drawer (right), replacing the old floating half-panel ===== */
  .nav-links{
    display:flex;flex-direction:column;gap:0;margin:0;
    position:fixed;top:0;right:0;bottom:0;z-index:340;
    width:min(340px,88vw);height:100dvh;
    background:rgba(10,10,11,.985);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-left:1px solid var(--line2);
    padding:0 20px calc(22px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    transform:translateX(103%);visibility:hidden;
    transition:transform .32s cubic-bezier(.22,.8,.24,1),visibility .32s;
    box-shadow:-24px 0 60px rgba(0,0,0,.55);
  }
  .nav-links.open{transform:none;visibility:visible}
  .nav-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:2;background:rgba(10,10,11,.985);
    padding:calc(14px + env(safe-area-inset-top,0px)) 2px 12px;margin:0 0 6px;
    border-bottom:1px solid var(--line);
  }
  .ndh-title{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:4px;font-size:12px;color:var(--faint)}
  .nav-close{background:none;border:1px solid var(--line2);border-radius:50%;width:38px;height:38px;color:var(--white);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
  .nav-close:active{background:var(--white);color:var(--bg)}
  /* big, clean rows; red rail marks the page you are on (transparent rail = zero layout shift) */
  .nav-links a.active{border-bottom:0;color:#fff}
  .nav-links a::after,.nav-links a.active::after{display:none}
  .nav-links>a,.nav-item>a{
    height:auto;width:100%;padding:15px 12px;font-size:15px;letter-spacing:2.5px;
    border-left:3px solid transparent;border-bottom:1px solid var(--line);
  }
  .nav-links>a.active,.nav-item>a.active{border-left-color:#c8102e;color:#fff;background:rgba(200,16,46,.05)}
  .nav-item{flex-direction:column;align-items:flex-start;width:100%}
  .nav-item .caret{display:none}
  .nav-item>a{border-bottom:0}
  .nav-item{border-bottom:1px solid var(--line)}
  .nav-drop{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;width:100%;min-width:0;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
  .nav-drop-inner{transform:none;background:none;border:0;box-shadow:none;padding:0 0 12px 15px;max-width:none;margin-left:15px;border-left:1px solid var(--line)}
  .nav-drop a{padding:10px 0 10px 14px;font-size:12.5px;opacity:1;transform:none;letter-spacing:1.8px;color:var(--dim)}
  .nav-drop a::before{display:none}
  .nav-drop a.active{color:#fff}
  /* footer pinned to the drawer bottom when the list is short */
  .nav-drawer-foot{display:block;margin-top:auto;padding-top:22px}
  .ndf-live{display:inline-flex;align-items:center;gap:9px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:12.5px;color:var(--white);border:1px solid var(--line2);border-radius:var(--r-pill);padding:11px 18px}
  .ndf-live .nl-dot{width:8px;height:8px;border-radius:50%;background:#2fbf5f}
  body.cc-live .ndf-live .nl-dot{background:#ff2d3f;animation:pulse 1.4s infinite}
  .ndf-tag{margin-top:14px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--faint)}
  body.nav-open{overflow:hidden}
}
.nav-right{display:flex;align-items:center;gap:18px;justify-self:end}
/* white-space + shrink guards: on a narrow first load (fonts still swapping in) the label must
   never wrap to two lines or get crushed by the flex row — the button keeps one clean line. */
.btn-account{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);padding:9px 18px;border-radius:var(--r);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-family:"Oswald",sans-serif;color:var(--white);background:transparent;transition:.16s;cursor:pointer;white-space:nowrap;flex-shrink:0}
.btn-account:hover{background:var(--white);color:var(--bg)}
.acct-dot{width:20px;height:20px;border-radius:50%;background:var(--white);display:grid;place-items:center;color:var(--bg);font-weight:800;font-size:11px}
.btn-account:hover .acct-dot{background:var(--bg);color:var(--white)}
.nav-burger{background:none;border:0;color:var(--white);font-size:26px;cursor:pointer}
.nav-right{align-items:center}
/* ---- cart button + count ---- */
.cart-btn{position:relative;background:transparent;border:1px solid var(--line2);color:var(--white);width:42px;height:42px;display:grid;place-items:center;cursor:pointer;transition:.16s;border-radius:var(--r);flex-shrink:0}
@keyframes cartBump{0%{transform:scale(1)}30%{transform:scale(1.32)}55%{transform:scale(.92)}100%{transform:scale(1)}}
.cart-btn.cart-bump{animation:cartBump .45s var(--ease)}
.cart-btn.cart-bump{border-color:var(--white)}
.cart-btn:hover{background:var(--white);color:var(--bg)}
.cart-count{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;background:#c8102e;color:#fff;font-family:"JetBrains Mono",monospace;font-size:11px;display:grid;place-items:center;border-radius:9px}
/* ---- profile button + hover menu ---- */
.acct-wrap{position:relative}
.acct-caret{font-size:13px;opacity:.6}
.acct-menu{position:absolute;top:100%;right:0;margin-top:10px;min-width:224px;background:rgba(10,10,11,.97);backdrop-filter:blur(14px);border:1px solid var(--line2);box-shadow:0 22px 54px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s ease;z-index:120;padding:6px}
.acct-wrap.authed:hover .acct-menu,.acct-wrap.authed:focus-within .acct-menu{opacity:1;visibility:visible;transform:translateY(0)}
.acct-menu .am-head{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-menu .am-name{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:14px;color:var(--white)}
.acct-menu .am-email{font-size:12px;color:var(--faint)}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--dim);padding:10px 12px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:12px;cursor:pointer;transition:.14s}
.acct-menu a:hover,.acct-menu button:hover{color:var(--white);background:var(--panel)}
/* ---- cart drawer ---- */
.cart-bk{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:300;opacity:0;visibility:hidden;transition:.3s}
.cart-bk.on{opacity:1;visibility:visible}
.cart-drawer{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--bg2);border-left:1px solid var(--line2);display:flex;flex-direction:column;transform:translateX(100%);transition:.3s cubic-bezier(.2,.7,.2,1);border-radius:var(--r-lg) 0 0 var(--r-lg)}
.cart-bk.on .cart-drawer{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line)}
.cart-head h3{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:20px}
.cart-head .x{background:none;border:0;color:var(--dim);font-size:26px;cursor:pointer}
.cart-body{flex:1;overflow-y:auto;padding:6px 20px}
.cart-empty{text-align:center;color:var(--faint);padding:40px 0;font-size:14px}
.cart-empty a{color:var(--white);text-decoration:underline}
.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.ci-img{width:64px;height:64px;flex-shrink:0;background:var(--panel);border:1px solid var(--line2);overflow:hidden}
.ci-img img{width:100%;height:100%;object-fit:cover}
.ci-ph{width:100%;height:100%;background:repeating-linear-gradient(45deg,#1b1c1f 0 8px,#202125 8px 16px)}
.ci-mid{flex:1;min-width:0}
.ci-name{font-size:13.5px;color:var(--white);margin-bottom:6px}
.ci-qty{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);font-family:"JetBrains Mono",monospace;font-size:13px}
.ci-qty button{background:none;border:0;color:var(--white);width:26px;height:26px;cursor:pointer}
.ci-qty1{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:11px;color:var(--faint)}
.ci-right{text-align:right;font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--white)}
.ci-del{display:block;background:none;border:0;color:var(--faint);font-size:11px;cursor:pointer;margin-top:8px;text-transform:uppercase;letter-spacing:1px;font-family:"Oswald",sans-serif}
.ci-del:hover{color:#ff8a8a}
.cart-foot{padding:18px 20px;border-top:1px solid var(--line2)}
.cart-line{display:flex;justify-content:space-between;font-size:13.5px;color:var(--dim);padding:5px 0}
.cart-line.tot{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:18px;color:var(--white);border-top:1px solid var(--line);margin-top:8px;padding-top:12px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;cursor:pointer;border:0;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-weight:500;font-size:14px;padding:15px 30px;border-radius:var(--r);transition:.18s}
.btn:active{transform:translateY(1px)}   /* tactile press feedback (disabled under reduced-motion) */
.btn-solid{background:var(--white);color:var(--bg)}
.btn-solid:hover{transform:translateY(-2px);background:#fff}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.55)}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sm{padding:10px 18px;font-size:12px}
.lt .btn-solid{background:var(--lt-ink);color:#fff}
.lt .btn-outline{color:var(--lt-ink);border-color:rgba(0,0,0,.3)}
.lt .btn-outline:hover{border-color:var(--lt-ink);background:rgba(0,0,0,.04)}
/* circular discover arrow (Ferrari) */
.discover{display:inline-flex;align-items:center;gap:14px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:13px;color:#fff;cursor:pointer}
.discover .circ{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:.2s}
.discover:hover .circ{background:#fff;color:var(--bg)}
.lt .discover{color:var(--lt-ink)}.lt .discover .circ{border-color:rgba(0,0,0,.4)}
.lt .discover:hover .circ{background:var(--lt-ink);color:#fff}

/* ---------- HERO VIDEO CAROUSEL (Ferrari) ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:#000}
/* constant bottom melt to the page background — lives on the HERO, not each slide, so it
   stays put while slides swipe past underneath (no flickering fade during transitions) */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;z-index:4;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25) 30%,rgba(0,0,0,.44) 62%,rgba(0,0,0,.5) 82%,var(--bg) 100%)}
/* constant TOP scrim — also on the hero, not the slides — so the nav area is ALWAYS darkened
   and the top never "un-fades" during a slide swap (fixes the jarring flash) */
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:26%;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 55%,transparent 100%)}
/* NO will-change here — it makes Safari rasterize the big caption text into the moving
   layer and drop it for the duration of the swipe (the "text missing for half a second") */
.hero-track{position:absolute;inset:0;height:100%;width:100%}
/* slides are STACKED and crossfade by opacity (no horizontal travel) so the video and the
   caption change in sync — a sliding track showed the new title over the old, still-sliding clip */
.hero-slide{position:absolute;inset:0;height:100%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .7s ease}
.hero-slide.on{opacity:1;z-index:2;pointer-events:auto}
.hero-slide video,.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-family:"Oswald",sans-serif;letter-spacing:3px;text-transform:uppercase;font-size:14px;
  background:linear-gradient(135deg,#161618,#0a0a0b 60%,#1a1a1c)}
/* dark vignette + a melt into the page background at the very bottom so the hero
   flows into the next section instead of a hard cut */
/* per-slide darkening is TOP-only (nav legibility) and fades out by mid-screen, so it never
   touches the bottom — the bottom blend is the single constant .hero::after, which can't
   flicker during the swipe */
/* (no per-slide gradient — all darkening is the constant .hero::before/::after scrims, so
   nothing moves with the swipe) */
/* the caption is a SEPARATE overlay (outside the moving track → the swipe never drops its
   text). It re-animates in on each slide change: a clean fade + rise, never "missing". */
/* fade-OUT is quick (.2s) so it's fully gone before the 210ms text swap; fade-IN is slower */
.hero-caption{position:absolute;left:0;right:0;bottom:21%;z-index:5;text-align:center;padding:0 24px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .2s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.hero-caption.show{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
/* caption box ignores clicks so the arrows/dots underneath stay usable — but the CTA button does not */
.hero-caption .hero-cta,.hero-caption a{pointer-events:auto}
.hero-caption .eyebrow{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:5px;font-size:13px;color:rgba(255,255,255,.82);margin-bottom:14px}
.hero-caption h1{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;font-size:clamp(40px,7vw,92px);line-height:.96;letter-spacing:2px;color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.hero-caption .sub{margin-top:16px;color:rgba(255,255,255,.88);font-size:clamp(15px,1.6vw,18px);max-width:560px;margin-left:auto;margin-right:auto;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero-caption .eyebrow{text-shadow:0 2px 16px rgba(0,0,0,.55)}
.hero-cta{margin-top:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-dots{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:10px}
.hero-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s;padding:0}
.hero-dots button.on{background:#fff;width:30px;border-radius:5px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s}
.hero-arrow:hover{background:#fff;color:#000}
.hero-arrow.prev{left:28px}.hero-arrow.next{right:28px}

/* ---------- PROMO TICKER (moving red bar, White House style) ---------- */
.ticker{position:relative;z-index:101;background:#c8102e;color:#fff;overflow:hidden;white-space:nowrap}
.ticker a{display:block;color:#fff}
.ticker-track{display:inline-flex;align-items:center;gap:0;padding:9px 0;animation:tickerScroll 38s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2.5px;font-size:12px;font-weight:500;padding:0 28px;position:relative}
.ticker-item::after{content:"\25C6";position:absolute;right:-5px;top:50%;transform:translateY(-50%);font-size:7px;opacity:.65}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;padding-left:24px}}

/* ---------- FLOATING SIGNING PILL ---------- */
/* signing pill sits bottom-LEFT so it never collides with the Otis chat (bottom-right) */
.float-pill{position:fixed;bottom:24px;left:24px;z-index:90;display:inline-flex;align-items:center;gap:10px;
  background:#c8102e;color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;
  padding:13px 20px;border-radius:999px;box-shadow:0 10px 30px rgba(200,16,46,.4);transition:.2s;cursor:pointer}
.float-pill:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(200,16,46,.55)}
.float-pill .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulseDot 1.6s infinite}
.float-pill .x{margin-left:4px;opacity:.7;font-size:16px;line-height:1}
.float-pill .x:hover{opacity:1}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
/* MOBILE signing pill — was overlapping the hero's WATCH LIVE button (both pinned to the bottom).
   Fix: dock it bottom-LEFT (clear of Otis on the right) and REVEAL it only after the viewer scrolls
   past the hero, so it can never cover the hero CTAs. (body.cc-scrolled is toggled in app.js.)
   When the mini live-player is showing, the pill is already hidden — see body.has-mini above. */
@media(max-width:700px){
  .float-pill{left:16px!important;right:auto!important;bottom:calc(16px + env(safe-area-inset-bottom))!important;font-size:11.5px;letter-spacing:.6px;padding:10px 14px;gap:7px;max-width:calc(100vw - 32px);box-shadow:0 8px 22px rgba(200,16,46,.45);
    transform:translateY(180%);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s}
  body.cc-scrolled .float-pill{transform:none;opacity:1;pointer-events:auto}
  .float-pill .x{font-size:15px;margin-left:2px}
}

/* ---------- SIGNING PROMO STRIP (home, below carousel) ---------- */
/* matches the hero's bottom melt color so the hero blends seamlessly into this box */
.sgpromo{position:relative;background:var(--bg);border-bottom:1px solid var(--line);overflow:hidden}
.sgpromo .row{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;min-height:440px}
.sgpromo .media{position:relative;overflow:hidden;background:#000;min-height:300px}
.sgpromo .media img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.sgpromo .media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--bg2))}
.sgpromo .copy{padding:60px 56px;display:flex;flex-direction:column;justify-content:center}
.sgpromo .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:12px;color:#ff5a5a;margin-bottom:16px}
.sgpromo .eyebrow .live{width:8px;height:8px;border-radius:50%;background:#c8102e;animation:pulseDot 1.6s infinite}
.sgpromo h2{font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:600;font-size:clamp(28px,3.6vw,46px);line-height:1;letter-spacing:.5px}
.sgpromo .role{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:14px;color:var(--dim);margin-top:10px}
.sgpromo p{color:var(--dim);margin-top:16px;max-width:520px;font-size:15px}
.sgpromo .bullets{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sgpromo .bullets span{font-size:12px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;color:var(--white);border:1px solid var(--line2);padding:7px 12px}
.sgpromo .cta{margin-top:26px}
.sgpromo .btn-promo{background:#c8102e;color:#fff}
.sgpromo .btn-promo:hover{background:#e01432}
@media(max-width:900px){.sgpromo .row{grid-template-columns:1fr}.sgpromo .media{min-height:260px}.sgpromo .media::after{background:linear-gradient(180deg,transparent 60%,var(--bg2))}.sgpromo .copy{padding:40px 28px}}

/* ---------- APPLE-STYLE CONFIGURATOR (signing) ---------- */
.cfg{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.cfg-gallery{position:sticky;top:calc(var(--header-h) + 8px);align-self:start}
/* the square preview is capped to the viewport height so the WHOLE gallery (preview + JSA band) stays
   pinned and fully visible while the options scroll past it — never scrolls off, never clips. */
.cfg-stage{position:relative;aspect-ratio:1;width:100%;max-width:min(100%,calc(100svh - var(--header-h) - 120px));margin-inline:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cfg-stage img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .5s}
.cfg-stage img.on{opacity:1}
.cfg-stage .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-family:"Oswald",sans-serif;letter-spacing:2px;text-transform:uppercase;font-size:13px;text-align:center;padding:24px}
.cfg-thumbs{display:flex;gap:10px;margin-top:14px}
.cfg-thumbs button{width:66px;height:66px;border:1px solid var(--line2);background:var(--panel);overflow:hidden;cursor:pointer;padding:0;transition:.15s;border-radius:var(--r-sm)}
.cfg-thumbs button.on{border-color:var(--white)}
.cfg-thumbs button img{width:100%;height:100%;object-fit:cover}
.cfg-badge{display:inline-block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:11px;border:1px solid var(--line2);padding:6px 12px;margin-bottom:14px;border-radius:var(--r-pill)}
.cfg h1{font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:600;font-size:clamp(28px,3.6vw,42px);line-height:1;letter-spacing:.5px}
.cfg .role{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--dim);margin-top:8px}
.cfg .lead{color:var(--dim);margin-top:14px;font-size:15px}
.cfg .step{margin-top:30px}
.cfg .step-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.cfg .step-n{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--faint)}
.cfg .step-t{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:15px}
.pick{display:grid;gap:10px}
.pick.cols{grid-template-columns:1fr 1fr}
.pick-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line2);padding:15px 16px;cursor:pointer;transition:.18s var(--ease);background:var(--panel);border-radius:var(--r)}
.pick-card:hover{border-color:var(--dim)}
.pick-card.on{border-color:var(--white);box-shadow:inset 0 0 0 1px var(--white)}
.pick-card .radio{width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);flex-shrink:0;position:relative;transition:.15s}
.pick-card.on .radio{border-color:var(--white)}
.pick-card.on .radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--white)}
.pick-card .pc-body{flex:1;min-width:0}
.pick-card .pc-name{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:15px}
.pick-card .pc-note{color:var(--dim);font-size:12.5px;margin-top:2px}
.pick-card .pc-price{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--white);flex-shrink:0}
.pick-card .pc-limited{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:10px;color:var(--faint);border:1px solid var(--line2);padding:3px 7px;flex-shrink:0}
.addon{border:1px solid var(--line2);padding:16px;margin-bottom:12px;border-radius:var(--r)}
.addon-head{display:flex;align-items:center;gap:12px;cursor:pointer}
.addon-head .at{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:15px;flex:1}
.addon-head .ap{font-family:"JetBrains Mono",monospace;font-size:13px}
.addon-body{margin-top:14px;display:none}
.addon.on .addon-body{display:block}
.addon.on{border-color:var(--white)}
.cfg-summary{border:1px solid var(--line2);background:var(--panel);padding:22px;margin-top:30px;border-radius:var(--r-lg)}
.cfg-summary .row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--dim);padding:7px 0}
.cfg-summary .row .v{font-family:"JetBrains Mono",monospace;color:var(--white)}
.cfg-summary .grand{display:flex;justify-content:space-between;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:22px;border-top:1px solid var(--line);margin-top:10px;padding-top:14px}
.cfg-summary .grand .v{font-family:"JetBrains Mono",monospace}
.cfg-countdown{font-family:"JetBrains Mono",monospace;color:#ff8a8a;font-size:13px;letter-spacing:1px;margin-top:10px}
@media(max-width:900px){.cfg{grid-template-columns:1fr}.cfg-gallery{position:static}.pick.cols{grid-template-columns:1fr}}

/* ---------- RELEASES (new/upcoming vinyl) ---------- */
.rel-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.rel-filter button{background:transparent;border:1px solid var(--line2);color:var(--dim);padding:10px 20px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;cursor:pointer;transition:.16s;border-radius:var(--r)}
.rel-filter button.active{background:var(--white);color:var(--bg);border-color:var(--white)}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;background:transparent}
.rel{background:var(--panel);display:flex;flex-direction:column;transition:.2s var(--ease);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rel:hover{transform:translateY(-3px);z-index:2;box-shadow:var(--shadow)}
.rel-art{aspect-ratio:1;position:relative;background:repeating-linear-gradient(45deg,#1b1c1f 0 14px,#202125 14px 28px)}
.rel-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rel-tag{position:absolute;top:10px;left:10px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:10px;padding:4px 9px;background:var(--white);color:var(--bg);border-radius:var(--r-sm)}
.rel-tag.preorder{background:#5a5a5f;color:#fff}
.rel-tag.new{background:#c8102e;color:#fff}
.rel-body{padding:15px;display:flex;flex-direction:column;flex:1}
.rel-artist{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:15px;color:var(--white)}
.rel-title{color:var(--dim);font-size:12.5px;margin:3px 0 8px;flex:1}
.rel-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--faint);font-family:"JetBrains Mono",monospace;margin-bottom:12px}
.rel-price{font-family:"JetBrains Mono",monospace;color:var(--white);font-size:17px}
.rel-actions{display:flex;gap:8px}
.rel-actions .btn{flex:1;justify-content:center;padding:11px;font-size:11px}
.notify-bar{border:1px solid var(--line2);padding:28px;margin-bottom:40px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.notify-bar h3{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:22px;margin-bottom:8px}
.notify-bar p{color:var(--dim);font-size:14px}
.notify-form{display:flex;gap:8px;flex-wrap:wrap}
.notify-form input{flex:1;min-width:160px;background:var(--bg2);border:1px solid var(--line2);color:var(--white);padding:13px 14px;font-family:inherit;font-size:14px}
@media(max-width:760px){.notify-bar{grid-template-columns:1fr}}

/* ---------- LIVE STREAM BOX (Watch + home live strip) ---------- */
.stream-box{background:var(--panel);border:1px solid var(--line2);overflow:hidden;border-radius:var(--r)}
.stream-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.stream-head .live-dot{width:9px;height:9px;border-radius:50%;background:#ff3b3b;animation:pulseDot 1.6s infinite;flex-shrink:0}
.stream-head .live-dot.off{background:var(--faint);animation:none}
.stream-head .stream-label{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:13px;color:var(--white)}
.stream-head .stream-tag{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:1px}
.stream-video{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.stream-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stream-offline{padding:40px 28px;text-align:center}
.stream-offline h4{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:20px;margin-bottom:8px;color:var(--white)}
.stream-offline p{color:var(--dim);font-size:14px;margin-bottom:18px;max-width:420px;margin-left:auto;margin-right:auto}

/* ----- On-Air section animated background (uploadable photo/video carousel) ----- */
.has-live-bg{position:relative;overflow:hidden}
.has-live-bg>.wrap{position:relative;z-index:1}
.section.alt.has-live-bg{background:var(--bg)}
/* the extra .has-live-bg in the selector outranks `.section.alt>*{position:relative}` so the
   background stays an absolute full-bleed layer on the home page too (not just the Watch page) */
.live-bg,.section.has-live-bg>.live-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.live-bg-item{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
.live-bg-item.on{opacity:1}
.live-bg-item img,.live-bg-item video{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;animation:liveKen 22s ease-in-out infinite alternate}
@keyframes liveKen{from{transform:scale(1.06)}to{transform:scale(1.18) translate(-2.5%,-2%)}}
.live-bg-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,9,.88),rgba(8,8,9,.58) 56%,rgba(8,8,9,.78))}
/* when live, tint the ambient red */
.section.live-active .live-bg-scrim{background:linear-gradient(90deg,rgba(46,6,11,.86),rgba(10,8,9,.58) 56%,rgba(46,6,11,.78))}

/* ----- live state: the stream panel lights up red as a visual cue ----- */
.stream-box.is-live{border-color:var(--promo)!important;animation:liveGlow 2s ease-in-out infinite}
@keyframes liveGlow{0%,100%{box-shadow:0 0 0 1px var(--promo),0 0 26px rgba(200,16,46,.34)}50%{box-shadow:0 0 0 1px var(--promo),0 0 54px rgba(200,16,46,.62)}}
.stream-box.is-live .stream-head{border-bottom-color:rgba(200,16,46,.55);background:linear-gradient(90deg,rgba(200,16,46,.14),transparent)}
.stream-box.is-live .stream-label{color:#fff}
.stream-box.is-live .stream-tag{color:#ff5a5a}

.section{position:relative;z-index:2;background:var(--bg);padding:90px 0}
.section.alt{background:var(--bg2)}
.section.lt{background:var(--lt);color:var(--lt-ink)}
.section.lt2{background:var(--lt2);color:var(--lt-ink)}
.section-head{margin-bottom:44px}
.section-head.center{text-align:center}
.section-head h2{font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:600;font-size:clamp(28px,4vw,46px);letter-spacing:1px}
.section-head p{color:var(--dim);margin-top:10px;max-width:640px}
.section-head.center p{margin-left:auto;margin-right:auto}
.lt .section-head p,.lt2 .section-head p{color:var(--lt-dim)}

/* ---------- FERRARI-STYLE SPLIT PANELS ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:62vh;gap:16px;padding:0 clamp(16px,3vw,48px)}
.split .panel{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;min-height:420px;border-radius:var(--r-lg)}
.split .panel .bg{position:absolute;inset:0}
.split .panel .bg img,.split .panel .bg video{width:100%;height:100%;object-fit:cover}
.split .panel.dark{background:#0a0a0b}
.split .panel.light{background:var(--lt2)}
.split .panel .inner{position:relative;z-index:2;text-align:center;padding:0 24px 56px}
.split .panel .inner .lbl{font-family:"Oswald",sans-serif;letter-spacing:3px;font-size:15px;text-transform:uppercase;opacity:.8;margin-bottom:6px}
.split .panel .inner h3{font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:600;font-size:clamp(30px,4vw,56px);letter-spacing:1px;margin-bottom:22px}
.split .panel.dark .inner{color:#fff}
.split .panel.light .inner{color:var(--lt-ink)}
/* the "Watch Now"/CTA on the LIGHT (Live Show) panel was white-on-white — force readable dark ink */
.split .panel.light .discover{color:var(--lt-ink)}
.split .panel.light .discover .circ{border-color:rgba(0,0,0,.38)}
.split .panel.light .discover:hover .circ{background:var(--lt-ink);color:#fff}

/* ---------- TILE ROW (clean, no overlap) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:transparent}
.tiles.cols-2{grid-template-columns:repeat(2,1fr)}
.tiles.cols-4{grid-template-columns:repeat(4,1fr)}
/* What We Do — multi-layer animated backdrop with a cursor-following spotlight (monochrome) */
#pillars{position:relative;overflow:hidden;isolation:isolate}
#pillars>.wrap,#pillars>.tiles{position:relative;z-index:1}
.pillars-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(900px 480px at 50% 122%,rgba(200,16,46,.11),transparent 60%),radial-gradient(120% 90% at 50% -10%,#0e0e11,#070708 70%)}
.pillars-bg .orb{position:absolute;border-radius:50%;filter:blur(64px);mix-blend-mode:screen;will-change:transform}
.pillars-bg .orb.o1{width:44vw;height:44vw;left:-9vw;top:-12vw;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);animation:orbDrift1 26s ease-in-out infinite}
.pillars-bg .orb.o2{width:38vw;height:38vw;right:-7vw;bottom:-14vw;background:radial-gradient(circle,rgba(170,170,182,.11),transparent 70%);animation:orbDrift2 33s ease-in-out infinite}
.pillars-bg .orb.o3{width:26vw;height:26vw;left:42%;top:34%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%);animation:orbDrift3 21s ease-in-out infinite}
.pillars-bg .p-center{position:absolute;left:50%;top:42%;width:170px;height:170px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 68%);filter:blur(6px);animation:pCenter 6.5s ease-in-out infinite}
.pillars-bg .p-spot{position:absolute;left:var(--mx,50%);top:var(--my,40%);width:540px;height:540px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(200,16,46,.12) 40%,transparent 70%);filter:blur(10px);opacity:0;transition:opacity .45s;will-change:left,top}
.pillars-bg.active .p-spot{opacity:1}
@keyframes orbDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(8vw,6vw)}}
@keyframes orbDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-7vw,-5vw)}}
@keyframes orbDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,4vw) scale(1.16)}}
@keyframes pCenter{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.22)}}
@media(prefers-reduced-motion:reduce){.pillars-bg .orb,.pillars-bg .p-center{animation:none}}
.tile{position:relative;background:var(--bg);padding:48px 36px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line)}
.tile:hover{transform:translateY(-5px) scale(1.015);z-index:2;box-shadow:0 22px 50px rgba(0,0,0,.5),inset 0 2px 0 0 var(--promo)}
.tile .go{transition:color .18s}
.tile:hover .go{color:var(--promo)}
.tile:hover .go .arr{transform:translateX(5px)}
.tile .bg{position:absolute;inset:0;opacity:.5;transition:.4s}
.tile .bg img,.tile .bg video{width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.2),rgba(10,10,11,.85))}
.tile:hover .bg{opacity:.7;transform:scale(1.04)}
.tile .body{position:relative;z-index:2}
.tile h3{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);letter-spacing:1px;margin-bottom:10px;color:#fff}
.tile p{color:var(--dim);font-size:14px;margin-bottom:16px;max-width:300px}
.tile .go{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:#fff;display:inline-flex;align-items:center;gap:8px}
.tile .go .arr{transition:.2s}
.tile:hover .go .arr{transform:translateX(5px)}

/* ---------- FEATURE BANNER (Bill Ward / temporary announcement) ---------- */
.feature{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:#000}
.feature .bg{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.feature .bg.on{opacity:1}
.feature .bg img{width:100%;height:100%;object-fit:cover;object-position:center 24%}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.2) 100%);z-index:1}
.feature .inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%}
.feature .inner .box{max-width:560px}
.feature .tag{display:inline-block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:12px;border:1px solid rgba(255,255,255,.5);padding:7px 14px;margin-bottom:20px;color:#fff}
.feature h2{font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:600;font-size:clamp(34px,5.5vw,68px);line-height:.95;letter-spacing:1px;color:#fff}
.feature .role{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:4px;font-size:15px;color:rgba(255,255,255,.75);margin-top:10px}
.feature p{color:rgba(255,255,255,.82);margin-top:18px;max-width:480px;font-size:16px}
.feature .cta{margin-top:28px}
.feature-dots{position:absolute;bottom:26px;right:34px;z-index:3;display:flex;gap:8px}
.feature-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:.2s}
.feature-dots button.on{background:#fff;width:26px;border-radius:5px}

/* ---------- STORE MODE SWITCH (New vs Pre-owned) ---------- */
.store-modes{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r);margin-bottom:8px;background:var(--bg2);overflow:hidden}
.store-modes button{background:transparent;border:0;color:var(--dim);padding:13px 26px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;cursor:pointer;transition:.16s}
.store-modes button:hover{color:var(--white)}
.store-modes button.active{background:var(--white);color:var(--bg)}
.store-modesub{color:var(--dim);font-size:14px;margin:0 0 26px}

/* ---------- PRODUCT GRID ---------- */
.cat-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.cat-bar button{background:transparent;border:1px solid var(--line2);color:var(--dim);border-radius:var(--r);padding:10px 20px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;cursor:pointer;transition:.16s}
.cat-bar button:hover{color:var(--white)}
.cat-bar button.active{background:var(--white);color:var(--bg);border-color:var(--white)}
.lt .cat-bar button{border-color:var(--lt-line);color:var(--lt-dim)}
.lt .cat-bar button.active{background:var(--lt-ink);color:#fff;border-color:var(--lt-ink)}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1px;background:var(--lt-line)}
.lt .prod-grid{background:var(--lt-line)}
.prod{background:var(--lt-panel);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.prod:hover{transform:translateY(-3px);box-shadow:var(--shadow-lt);z-index:2}
.prod-img{aspect-ratio:1;position:relative;background:repeating-linear-gradient(45deg,#eceae6 0 14px,#e3e0da 14px 28px)}
.prod-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prod-badge{position:absolute;top:12px;right:12px;font-family:"Oswald",sans-serif;letter-spacing:1px;font-size:10px;font-weight:600;padding:5px 10px;text-transform:uppercase;background:var(--lt-ink);color:#fff}
.badge-soldout{background:#8a8a8a}
.badge-preorder{background:#3a3a40}
.prod-body{padding:18px;display:flex;flex-direction:column;flex:1;color:var(--lt-ink)}
.prod-cat{font-size:10px;color:var(--lt-dim);text-transform:uppercase;letter-spacing:2px;font-family:"Oswald",sans-serif}
.prod h3{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:17px;letter-spacing:.5px;margin:6px 0;color:var(--lt-ink)}
.prod p{color:var(--lt-dim);font-size:13px;flex:1}
.prod-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.prod-price{font-family:"JetBrains Mono",monospace;font-size:18px;color:var(--lt-ink);font-weight:700}
/* dark variant for product grid on dark sections */
.section:not(.lt):not(.lt2) .prod-grid{background:var(--line)}
.section:not(.lt):not(.lt2) .prod{background:var(--panel);color:var(--white)}
.section:not(.lt):not(.lt2) .prod h3{color:var(--white)}
.section:not(.lt):not(.lt2) .prod p{color:var(--dim)}
.section:not(.lt):not(.lt2) .prod-price{color:var(--white)}
.section:not(.lt):not(.lt2) .prod-img{background:repeating-linear-gradient(45deg,#1b1c1f 0 14px,#202125 14px 28px)}

/* missed-it CTA */
.missed{margin-top:48px;text-align:center;padding:48px 24px;border:1px solid var(--line2)}
.lt .missed{border-color:var(--lt-line)}
.missed h3{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:24px;letter-spacing:1px;margin-bottom:8px}
.missed p{color:var(--dim);margin-bottom:20px}
.lt .missed p{color:var(--lt-dim)}

/* ---------- FORMS ---------- */
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;max-width:760px}
.lt .form-card{background:var(--lt-panel);border-color:var(--lt-line);box-shadow:var(--shadow-lt)}
.field{margin-bottom:20px}
.field label{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;color:var(--white);margin-bottom:8px}
.lt .field label{color:var(--lt-ink)}
.field .req{color:var(--white)}.lt .field .req{color:var(--lt-ink)}
.field input,.field textarea,.field select{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);color:var(--white);padding:14px;font-size:15px;font-family:inherit;transition:.15s}
.lt .field input,.lt .field textarea,.lt .field select{background:#fff;border-color:var(--lt-line);color:var(--lt-ink)}
/* focused-field affordance = border-colour only (pointer users unchanged); the visible ring is
   handled once, for keyboard users, by the :focus-visible block below — one consistent ring site-wide */
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--white)}
.lt .field input:focus,.lt .field textarea:focus,.lt .field select:focus{border-color:var(--lt-ink)}
.field textarea{min-height:120px;resize:vertical}
.field .hint{color:var(--faint);font-size:12.5px;margin-top:6px}
.lt .field .hint{color:var(--lt-dim)}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px;cursor:pointer;font-size:14px;color:var(--dim)}
.lt .check{color:var(--lt-dim)}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--white);flex-shrink:0}
.lt .check input{accent-color:var(--lt-ink)}
.opt-card{border:1px solid var(--line2);border-radius:var(--r);padding:20px;margin-bottom:16px;transition:.16s}
.lt .opt-card{border-color:var(--lt-line)}
.opt-card.on{border-color:var(--white)}
.lt .opt-card.on{border-color:var(--lt-ink)}
.opt-head{display:flex;align-items:center;gap:14px;cursor:pointer}
.opt-head h4{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:18px;flex:1}
.opt-head .pr{font-family:"JetBrains Mono",monospace;font-size:14px}
.opt-body{margin-top:16px;display:none}
.opt-card.on .opt-body{display:block}
.toggle{width:46px;height:26px;border-radius:999px;background:var(--line2);position:relative;transition:.16s;flex-shrink:0}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);transition:.16s}
/* generic ON state — any toggle that gets the .on class, or whose .opt-card/.addon parent is on */
.toggle.on,.opt-card.on .toggle,.addon.on .toggle{background:var(--white)}
.toggle.on::after,.opt-card.on .toggle::after,.addon.on .toggle::after{transform:translateX(20px);background:var(--bg)}
.lt .toggle::after{background:var(--lt-dim)}
.lt .opt-card.on .toggle{background:var(--lt-ink)}
.lt .opt-card.on .toggle::after{background:#fff}
.order-summary{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);padding:20px}
.lt .order-summary{background:#fff;border-color:var(--lt-line)}
.order-summary .line{display:flex;justify-content:space-between;font-size:14px;color:var(--dim);margin-bottom:9px}
.lt .order-summary .line{color:var(--lt-dim)}
.order-summary .total{display:flex;justify-content:space-between;font-family:"Oswald",sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:1px;border-top:1px solid var(--line);padding-top:14px;margin-top:8px}
.lt .order-summary .total{border-color:var(--lt-line)}
.order-summary .total .v{font-family:"JetBrains Mono",monospace}

/* notices */
.notice{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:15px 17px;font-size:13.5px;color:var(--dim);margin-bottom:20px}
.lt .notice{background:var(--lt2);border-color:var(--lt-line);color:var(--lt-dim)}
.notice strong{color:var(--white)}.lt .notice strong{color:var(--lt-ink)}

/* interior page hero */
/* the fixed header already pads the body down, so the page hero needs much less top space */
.phero{position:relative;z-index:2;padding:34px 0 30px;border-bottom:1px solid var(--line);background:var(--bg)}
.phero h1{font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:600;font-size:clamp(36px,6vw,64px);line-height:1;letter-spacing:1px}
.phero p{color:var(--dim);margin-top:14px;max-width:660px}

/* modal */
.modal-bk{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);z-index:300;display:none;place-items:center;padding:20px}
.modal-bk.on{display:grid}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);max-width:440px;width:100%;padding:36px;position:relative;box-shadow:var(--shadow);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal h3{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:24px;margin-bottom:6px}
.modal .sub{color:var(--dim);font-size:14px;margin-bottom:24px}
.modal .x{position:absolute;top:18px;right:20px;background:none;border:0;color:var(--dim);font-size:24px;cursor:pointer}
.tabs{display:flex;gap:8px;margin-bottom:22px}
.tabs button{flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--dim);padding:11px;border-radius:var(--r);font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;cursor:pointer}
.tabs button.active{background:var(--white);color:var(--bg);border-color:var(--white)}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);z-index:400;background:var(--white);border:0;border-radius:var(--r);padding:15px 24px;color:var(--bg);box-shadow:var(--shadow);opacity:0;transition:.3s;font-size:14px;font-weight:500;max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* confirmation review */
.confirm-list{margin:8px 0 4px}
.confirm-list .row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.confirm-list .row:last-child{border-bottom:0}
.confirm-list .k{color:var(--dim)}
.confirm-list .v{color:var(--white);text-align:right;max-width:60%}

/* ---------- PROFILE PORTAL ---------- */
.acct-layout{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:start}
.acct-side{position:sticky;top:92px;display:flex;flex-direction:column;gap:2px}
.acct-side button{text-align:left;background:none;border:0;color:var(--dim);padding:13px 16px;border-radius:var(--r);font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;cursor:pointer;transition:.15s}
.acct-side button:hover{background:var(--panel);color:var(--white)}
.acct-side button.active{background:var(--white);color:var(--bg)}
.acct-side .signout{margin-top:16px;color:var(--dim)}
.acct-pane{display:none}.acct-pane.on{display:block}
.acct-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;margin-bottom:18px}
.acct-card h2{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:22px;margin-bottom:4px}
.acct-card .desc{color:var(--dim);font-size:13.5px;margin-bottom:22px}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.inv-badge{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;padding:7px 13px;border-radius:var(--r);background:var(--panel2);color:var(--white);border:1px solid var(--line2)}
.inv-line{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.inv-line:last-child{border-bottom:0}
.inv-line .nm{color:var(--white)}
.inv-line .pr{font-family:"JetBrains Mono",monospace;color:var(--white)}
.inv-total{display:flex;justify-content:space-between;font-family:"Oswald",sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:1px;margin-top:18px;padding-top:18px;border-top:2px solid var(--line2)}
.inv-total .v{font-family:"JetBrains Mono",monospace}
.empty{text-align:center;padding:40px;color:var(--faint)}
/* weekly-invoice card (its own simple look) */
.inv-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px}
.inv-card .top{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);margin-bottom:10px}
.inv-card .ostat{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:10px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2)}
/* Amazon-style PURCHASE order card + live status timeline */
.order-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.oc-head{display:flex;flex-wrap:wrap;gap:14px 30px;padding:14px 20px;background:var(--bg2);border-bottom:1px solid var(--line)}
.oc-h{display:flex;flex-direction:column;gap:2px}
.oc-h .k{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:9.5px;color:var(--faint)}
.oc-h .v{font-size:13px;color:#fff}
.oc-h.oc-num{margin-left:auto;text-align:right}
.oc-body{padding:16px 20px 18px}
.oc-status{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.4px;font-size:18px;color:#fff;margin-bottom:16px}
.oc-live{font-family:"Inter",sans-serif;text-transform:none;letter-spacing:0;font-size:13px;color:var(--dim);font-weight:400}
.oc-track{display:flex;align-items:flex-start;margin:0 0 18px}
.oc-step{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto}
.oc-dot{width:13px;height:13px;border-radius:50%;background:var(--line2);transition:.3s}
.oc-lbl{font-size:10px;color:var(--faint);white-space:nowrap;text-align:center;max-width:74px}
.oc-bar{flex:1 1 auto;height:2px;background:var(--line2);margin:6px 5px 0;border-radius:2px;transition:.3s}
.oc-step.done .oc-dot,.oc-step.now .oc-dot{background:#27e36a;box-shadow:0 0 9px rgba(39,227,106,.55)}
.oc-step.done .oc-lbl,.oc-step.now .oc-lbl{color:#fff}
.oc-step.now .oc-dot{animation:binPulse 1.7s infinite}
.oc-bar.done{background:#27e36a}
.oc-items{display:flex;flex-direction:column;gap:11px;margin-bottom:14px}
.oc-item{display:flex;align-items:center;gap:12px}
.oc-thumb{width:46px;height:46px;border-radius:var(--r-sm);overflow:hidden;background:#111;flex:0 0 auto}
.oc-thumb img{width:100%;height:100%;object-fit:cover}
.oc-thumb .ph{display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,#161618 0 6px,#1c1c1f 6px 12px)}
.oc-iname{flex:1 1 auto;min-width:0;font-size:13.5px;color:#fff}
.oc-iprice{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--dim);white-space:nowrap}
.oc-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.oc-trknote{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--dim)}
@media(max-width:560px){.oc-head{gap:10px 18px;padding:12px 14px}.oc-body{padding:14px}.oc-status{font-size:16px}.oc-lbl{font-size:8.5px;max-width:56px}}

/* ---------- FOOTER (Ferrari-style, big multi-column) ---------- */
.foot{background:var(--bg);border-top:1px solid var(--line);padding:70px 0 36px}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:56px}
.foot-col h4{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:14px;color:var(--white);margin-bottom:18px}
.foot-col a{display:block;color:var(--dim);font-size:13.5px;padding:6px 0;transition:.15s}
.foot-col a:hover{color:var(--white)}
.foot-social{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center}
.foot-social a{display:flex;align-items:center;gap:12px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:14px;color:var(--white);transition:.15s}
.foot-social a .plus{width:24px;height:24px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;font-size:14px;transition:.2s}
.foot-social a:hover .plus{background:var(--white);color:var(--bg)}
.foot-social .more{margin-left:auto;display:flex;gap:28px}
.foot-social .more a{font-size:12px;letter-spacing:1.5px;color:var(--dim)}
.foot-social .more a:hover{color:var(--white)}
.foot-base{padding-top:30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center;color:var(--faint);font-size:12.5px}
.foot-base .addr{color:var(--faint)}

/* ============================================================
   GENERATED DARK MAP  (Lebanon split panel — no API key, no images)
   ============================================================ */
.split .panel.has-map{background:#070708}
.split .panel.has-map .inner{z-index:3;color:#fff}
.split .panel.has-map::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 42% 46%,transparent 26%,rgba(7,7,8,.74) 100%)}
.map-bg{position:absolute;inset:0;overflow:hidden}
.map-grid{position:absolute;inset:-25%;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;animation:mapDrift 38s linear infinite}
.map-svg{position:absolute;inset:0;width:100%;height:100%}
.map-svg .map-roads path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2}
.map-svg .map-roads path:nth-child(odd){stroke:rgba(255,255,255,.22);stroke-width:3}
.map-svg .map-river{fill:none;stroke:rgba(255,255,255,.07);stroke-width:11;stroke-linecap:round}
.map-svg .map-blocks rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.12)}
.map-radar{position:absolute;top:46%;left:42%;width:140%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,.14),rgba(255,255,255,0) 28%);animation:radarSweep 7s linear infinite;pointer-events:none;z-index:1}
.map-pin{position:absolute;top:46%;left:42%;transform:translate(-50%,-50%);z-index:2}
.map-pin .dot{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.85)}
.map-pin .ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(255,255,255,.55);transform:translate(-50%,-50%);width:14px;height:14px;animation:pinPulse 2.6s ease-out infinite}
.map-pin .ring.r2{animation-delay:1.3s}
.map-coords{position:absolute;left:24px;bottom:18px;z-index:2;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.5);display:flex;flex-direction:column;gap:4px}
.map-coords .ca{color:rgba(255,255,255,.82);font-family:"Oswald",sans-serif;letter-spacing:2px;font-size:12px}
@keyframes mapDrift{to{transform:translate(34px,34px)}}
@keyframes radarSweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pinPulse{0%{width:14px;height:14px;opacity:.85}100%{width:130px;height:130px;opacity:0}}
.split.single{grid-template-columns:1fr}
.tiles.cols-1{grid-template-columns:1fr}
.tiles.cols-1 .tile{min-height:240px}

/* ============================================================
   ABSTRACT TEXTURE for empty dark areas (subtle, not cluttered)
   ============================================================ */
.bg.tex{background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.06),transparent 62%),repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 10px)}
/* THE LIVE SHOW (white split panel) — animated light backdrop: a drifting soft orb + subtle
   broadcast-signal rings, so it reads as "alive" and contrasts the dark map panel beside it. */
.split .panel.light .bg.tex{background:linear-gradient(135deg,#fbfcfd,#e5e8ef);overflow:hidden}
.split .panel.light .bg.tex::before{content:"";position:absolute;width:64%;height:84%;left:5%;top:3%;border-radius:50%;background:radial-gradient(circle,rgba(82,90,118,.24),transparent 66%);filter:blur(32px);animation:lsOrb 18s ease-in-out infinite}
.split .panel.light .bg.tex::after{content:"";position:absolute;inset:-32%;background:repeating-radial-gradient(circle at 74% 80%,rgba(54,60,84,.17) 0 1.2px,transparent 1.2px 22px);transform-origin:74% 80%;animation:lsPulse 8s ease-in-out infinite}
@keyframes lsOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22%,12%) scale(1.18)}}
@keyframes lsPulse{0%,100%{transform:scale(1) rotate(0deg);opacity:.6}50%{transform:scale(1.15) rotate(5deg);opacity:.95}}
@media(prefers-reduced-motion:reduce){.split .panel.light .bg.tex::before,.split .panel.light .bg.tex::after{animation:none}}
/* ===== What We Do tiles — a distinct multi-layer animated backdrop per tile (monochrome) ===== */
.tile .bg.tex{overflow:hidden;opacity:.9}                 /* animated abstract bg can sit brighter than a photo */
.tile:hover .bg.tex{opacity:1}
.tile .bg.tex::before,.tile .bg.tex::after{content:"";position:absolute;inset:0;will-change:transform,opacity}
@keyframes tSpin{to{transform:rotate(360deg)}}
@keyframes tPulse{0%,100%{transform:scale(1);opacity:.62}50%{transform:scale(1.16);opacity:1}}
@keyframes tDriftA{0%,100%{transform:translate(0,0)}50%{transform:translate(11%,9%)}}
@keyframes tDriftB{0%,100%{transform:translate(0,0)}50%{transform:translate(-10%,-8%)}}
@keyframes tScan{0%{transform:translateY(-80%);opacity:0}22%,78%{opacity:1}100%{transform:translateY(180%);opacity:0}}
/* SHOP — spinning vinyl: grooves + a rotating sheen + a center glow */
.tile[data-pg="shop.html"] .bg.tex{background:radial-gradient(130% 130% at 60% 50%,rgba(255,255,255,.05),transparent 60%),repeating-radial-gradient(circle at 60% 50%,rgba(255,255,255,.085) 0 1px,transparent 1px 12px)}
.tile[data-pg="shop.html"] .bg.tex::before{background:conic-gradient(from 0deg at 60% 50%,transparent 0 26%,rgba(255,255,255,.22) 44%,transparent 60% 100%);animation:tSpin 15s linear infinite}
.tile[data-pg="shop.html"] .bg.tex::after{background:radial-gradient(circle at 60% 50%,rgba(255,255,255,.26),transparent 24%);animation:tPulse 6s ease-in-out infinite}
/* BIN LIVE DROP — auction energy: a drifting grid + a sweeping scan band */
.tile[data-pg="bin.html"] .bg.tex{background:radial-gradient(circle at 50% -8%,rgba(255,255,255,.12),transparent 58%)}
.tile[data-pg="bin.html"] .bg.tex::before{background:repeating-linear-gradient(90deg,transparent 0 40px,rgba(255,255,255,.075) 40px 41px),repeating-linear-gradient(0deg,transparent 0 40px,rgba(255,255,255,.075) 40px 41px);animation:tDriftA 18s ease-in-out infinite}
.tile[data-pg="bin.html"] .bg.tex::after{inset:auto 0 auto 0;height:48%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.26),transparent);animation:tScan 4s ease-in-out infinite}
/* WATCH LIVE — broadcast: concentric signal rings pulsing outward + a drifting glow */
.tile[data-pg="live.html"] .bg.tex{background:radial-gradient(120% 120% at 50% 58%,rgba(255,255,255,.05),transparent 60%)}
.tile[data-pg="live.html"] .bg.tex::before{background:repeating-radial-gradient(circle at 50% 58%,rgba(255,255,255,.13) 0 1.4px,transparent 1.4px 19px);transform-origin:50% 58%;animation:tPulse 6.5s ease-in-out infinite}
.tile[data-pg="live.html"] .bg.tex::after{background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.24),transparent 30%);animation:tDriftA 12s ease-in-out infinite}
/* SELL — calm value: two soft greys drifting past each other */
.tile[data-pg="sell.html"] .bg.tex::before{background:radial-gradient(46% 56% at 26% 30%,rgba(255,255,255,.2),transparent 70%);animation:tDriftA 15s ease-in-out infinite}
.tile[data-pg="sell.html"] .bg.tex::after{background:radial-gradient(46% 56% at 74% 70%,rgba(188,194,210,.18),transparent 70%);animation:tDriftB 19s ease-in-out infinite}
/* animated tiles need less scrim than photo tiles — keep it clear up top, dark only behind the text */
.tile:has(.bg.tex)::after{background:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,0) 42%,rgba(10,10,11,.84) 100%)}
@media(prefers-reduced-motion:reduce){.tile .bg.tex::before,.tile .bg.tex::after{animation:none}}
.section:not(.lt):not(.lt2){background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;background-position:center}
/* subtle living background on inner-page heroes: a drifting dot grid + two soft monochrome
   glows that slowly breathe — keeps the black/white theme from feeling flat */
.phero{overflow:hidden;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px;background-position:0 0;animation:gridDrift 60s linear infinite}
.phero::before{content:"";position:absolute;inset:-60px;z-index:-1;pointer-events:none;
  background:radial-gradient(620px 320px at 18% 8%,rgba(255,255,255,.06),transparent 60%),radial-gradient(560px 300px at 92% 120%,rgba(255,255,255,.04),transparent 55%);
  animation:pheroGlow 16s ease-in-out infinite alternate}
@keyframes gridDrift{to{background-position:120px 80px}}
@keyframes pheroGlow{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(34px,-16px,0)}}
/* a faint moving sheen across the alt (grey) content sections too */
.section.alt{position:relative}
.section.alt::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(700px 360px at 80% -10%,rgba(255,255,255,.035),transparent 60%);animation:pheroGlow 20s ease-in-out infinite alternate}
.section.alt>*{position:relative;z-index:1}

/* ===== page-header (.phero) backgrounds — SpaceX-style, set per page in the builder ===== */
.phero-center .wrap{text-align:center}
.phero-center .wrap p{margin-left:auto;margin-right:auto}
/* "plain" = no drifting grid/glow */
.phero-plain{background-image:none;animation:none}
.phero-plain::before{display:none}
/* uploaded photo/video background (full-bleed + scrim, title overlaid) */
.phero-has-media{background-image:none;animation:none;min-height:340px;display:flex;align-items:center;border-bottom:0}
.phero-has-media::before{display:none}
.phero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.phero-bg img,.phero-bg video{width:100%;height:100%;object-fit:cover;will-change:transform;animation:liveKen 26s ease-in-out infinite alternate}
.phero-bg-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,9,.85),rgba(8,8,9,.48) 60%,rgba(8,8,9,.7))}
.phero-center.phero-has-media .phero-bg-scrim{background:linear-gradient(180deg,rgba(8,8,9,.55),rgba(8,8,9,.8))}
.phero-has-media .wrap{position:relative;z-index:1;width:100%}
/* "aurora" = slow drifting monochrome glows */
.phero-aurora{background-image:none;animation:none;overflow:hidden}
.phero-aurora::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;filter:blur(10px);
  background:radial-gradient(38% 48% at 22% 28%,rgba(255,255,255,.11),transparent 60%),radial-gradient(34% 44% at 78% 62%,rgba(255,255,255,.08),transparent 60%),radial-gradient(30% 40% at 52% 96%,rgba(255,255,255,.06),transparent 60%);
  animation:auroraDrift 19s ease-in-out infinite alternate}
.phero-aurora .wrap{position:relative;z-index:1}
@keyframes auroraDrift{from{transform:translate(-4%,-2%) scale(1)}to{transform:translate(4%,3%) scale(1.12)}}
/* "stars" = subtle drifting starfield */
.phero-stars{background-image:none;animation:none;overflow:hidden}
.phero-stars::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 22%,rgba(255,255,255,.42),transparent),radial-gradient(1px 1px at 42% 72%,rgba(255,255,255,.46),transparent),radial-gradient(1px 1px at 85% 64%,rgba(255,255,255,.36),transparent),radial-gradient(1px 1px at 55% 48%,rgba(255,255,255,.32),transparent),radial-gradient(2px 2px at 12% 82%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 92% 38%,rgba(255,255,255,.34),transparent);
  background-size:600px 600px;animation:starDrift 100s linear infinite}
.phero-stars .wrap{position:relative;z-index:1}
@keyframes starDrift{from{background-position:0 0}to{background-position:0 -1200px}}

/* ============================================================
   MODERN MOTION (tasteful — respects prefers-reduced-motion below)
   ============================================================ */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .45s ease}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;background:var(--white);transform:scaleX(0);transition:transform .26s cubic-bezier(.2,.7,.2,1);opacity:.55}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active::after{transform:scaleX(1);opacity:1}  /* active underline shares the hover/featured baseline (bottom:4px) */
.btn-solid{transition:transform .18s,box-shadow .25s,background .18s}
.btn-solid:hover{box-shadow:0 10px 34px rgba(255,255,255,.16)}
.sgpromo .btn-promo:hover,.btn-promo:hover{box-shadow:0 10px 34px rgba(200,16,46,.45)}
/* will-change only while the card is actually being interacted with (transient hint) */
.tile:hover,.prod:hover,.rel:hover{will-change:transform}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .split{grid-template-columns:1fr}
  .tiles,.tiles.cols-4{grid-template-columns:repeat(2,1fr)}
  .acct-layout{grid-template-columns:1fr}
  /* Phone tabs: a tidy 2-up grid of tappable cards — ALL sections visible at once, no endless
     horizontal slide. The active tab is filled; Sign out spans the full width at the bottom. */
  .acct-side{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:static;margin-bottom:10px}
  .acct-side button{text-align:center;justify-content:center;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:0 10px;min-height:50px;display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:1px}
  .acct-side button.active{background:var(--white);color:var(--bg);border-color:var(--white)}
  .acct-side .signout{grid-column:1/-1;margin-top:2px;background:none;border:1px solid var(--line2);color:var(--dim);min-height:44px}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .tiles,.tiles.cols-2,.tiles.cols-4{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-social .more{margin-left:0;width:100%}
  .hero-arrow{display:none}
  .feature .inner .box{max-width:none}
}
/* ===== soft fade-in on arrival (no black flash, navigation stays instant) ===== */
@keyframes ccPageIn{from{opacity:0}to{opacity:1}}
body.cc-fade{animation:ccPageIn .3s ease both}

/* ===== "Coming Soon" teaser — animated, monochrome, on-brand (pages reserved for the future) ===== */
html.cs-locked, html.cs-locked body{overflow:hidden}
.cs-screen{position:fixed;inset:0;z-index:80;display:grid;place-items:center;text-align:center;
  padding:104px 24px 64px;color:var(--white);background:var(--bg);overflow:hidden}
.cs-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(58% 48% at 50% 36%, rgba(255,255,255,.055), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 46px);
  animation:csDrift 26s linear infinite}
@keyframes csDrift{from{background-position:0 0,0 0,0 0}to{background-position:0 0,0 46px,46px 0}}
.cs-inner{position:relative;z-index:1;max-width:560px;display:flex;flex-direction:column;align-items:center}
.cs-vinyl-wrap{width:196px;height:196px;margin-bottom:32px;position:relative}
.cs-vinyl{width:100%;height:100%;display:block;filter:drop-shadow(0 20px 44px rgba(0,0,0,.6))}
.cs-spin{transform-origin:120px 120px;animation:csSpin 7s linear infinite}
@keyframes csSpin{to{transform:rotate(360deg)}}
.cs-glint{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.16) 24deg, transparent 64deg, transparent 360deg);
  animation:csGlint 4.5s linear infinite;mix-blend-mode:screen}
@keyframes csGlint{to{transform:rotate(360deg)}}
.cs-eyebrow{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:4px;font-size:13px;color:var(--dim);margin-bottom:12px;opacity:0;animation:csUp .7s .15s ease forwards}
.cs-title{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-weight:700;
  font-size:clamp(42px,8.5vw,78px);line-height:.94;margin:0;opacity:0;animation:csUp .7s .28s ease forwards}
.cs-rule{width:min(240px,62%);height:4px;margin:20px 0 18px;overflow:visible}
.cs-rule line{stroke:var(--white);stroke-width:2;stroke-dasharray:240;stroke-dashoffset:240;animation:csDraw 1.1s .5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes csDraw{to{stroke-dashoffset:0}}
.cs-sub{color:var(--dim);font-size:15px;line-height:1.65;margin:0 0 32px;max-width:420px;opacity:0;animation:csUp .7s .6s ease forwards}
.cs-back{display:inline-flex;align-items:center;gap:10px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:13px;
  background:var(--white);color:var(--bg);padding:14px 26px;text-decoration:none;opacity:0;animation:csUp .7s .72s ease forwards}
.cs-back .cs-arr{transition:transform .2s ease}
.cs-back:hover .cs-arr{transform:translateX(5px)}
@keyframes csUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* nav tab "soon" badge */
.soon-tag{display:inline-block;margin-left:6px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;
  font-size:8.5px;line-height:1;vertical-align:middle;position:relative;top:-1px;padding:2px 5px;border-radius:2px;
  border:1px solid rgba(255,255,255,.3);color:var(--dim)}
.nav-drop a .soon-tag{border-color:rgba(255,255,255,.28)}
.soon-tag{border-radius:var(--r-sm)}
/* any body/footer link to a coming-soon page: gently grayed but still reachable (goes to the teaser) */
.is-soon-link{opacity:.62}
.is-soon-link:hover{opacity:.85}
/* coming-soon on a TOP-LEVEL nav tab: an animated "soon" that overlaps the tab (absolute → never
   widens the button), integrated at the tab's top-right with a gentle pulse. */
.nav-links a.soon-nav{position:relative}
.nav-links a.soon-nav .soon-pip{position:absolute;top:50%;margin-top:-15px;right:-2px;font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.4px;font-size:7.5px;line-height:1;color:var(--promo);pointer-events:none;animation:soonPulse 2.1s ease-in-out infinite}
@keyframes soonPulse{0%,100%{opacity:.5}50%{opacity:1}}
/* signup: per-platform socials + new-buyer yes/no + address */
.nb-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
#socialsField .nb-grid,#newBuyerField .nb-grid{margin-bottom:2px}
.nb-grid input,#socialsField input{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);color:var(--white);padding:11px 12px;font-size:15px;font-family:inherit}
.nb-grid input:focus,#socialsField input:focus{outline:none;border-color:var(--white)}
.nb-ask{background:var(--bg2);border:1px solid var(--line2);border-left:3px solid var(--promo);border-radius:var(--r-sm);padding:13px 15px;margin:4px 0}
.nb-ask-q{font-size:13.5px;color:var(--soft);margin-bottom:10px}
.nb-opts{display:flex;flex-direction:column;gap:8px}
.nb-opt{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--white);cursor:pointer}
.nb-opt input{width:17px;height:17px;accent-color:var(--promo);flex:0 0 auto}

/* home quick-access tile "Coming Soon" badge */
.tile-soon{position:absolute;top:14px;left:14px;z-index:3;font-family:"Oswald",sans-serif;text-transform:uppercase;
  letter-spacing:1.5px;font-size:10.5px;padding:6px 11px;color:#fff;background:rgba(10,10,11,.7);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.34)}
.tile.is-soon .bg{filter:grayscale(.45) brightness(.74)}
.tile.is-soon::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 15px,rgba(255,255,255,.028) 15px 16px)}

@media(prefers-reduced-motion:reduce){
  /* Stop every DECORATIVE / looping / transform-driven animation. Universal (rather than a
     hand-listed set of classes) so a newly-added animation can never slip through — the named
     families it covers: promo-ticker marquee (tickerScroll), Ken-Burns pans (liveKen),
     air-horn launch reveal (cclFade/cclGrid/cclBlink/cclBoom/cclDrop), pulse dots
     (pulseDot/featPulse/binPulse/soonPulse/pinPulse), live glow (liveGlow), drifting
     orbs·grids·radar·auroras (orbDrift / pCenter/mapDrift/radarSweep/gridDrift/pheroGlow/
     auroraDrift/starDrift/lsOrb/lsPulse/tSpin/tPulse/tDrift / tScan/csDrift/csSpin/csGlint/
     depthDrift/depthBloom), skeleton shimmer (ccSkel), and page/cart fades
     (pageIn/ccPageIn/miniIn/cartBump). */
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto!important}
  /* PRESERVE fades: keep ONLY opacity/colour/shadow transitions; transform & filter changes snap
     instantly, so the long movement transitions die but hover/focus fades still play. */
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,box-shadow,fill,stroke,visibility!important}
  /* neutralise the interactive lift/press so nothing jumps */
  .btn:active,.btn-solid:hover,.btn-outline:hover,.float-pill:hover,.discover:hover .circ,.hero-arrow:hover,.pcard:hover,.tile:hover{transform:none!important}
  /* the coming-soon teaser is revealed BY its entrance animation — force it visible, no motion */
  .cs-eyebrow,.cs-title,.cs-sub,.cs-back{opacity:1!important;transform:none!important}
  .cs-rule line{stroke-dashoffset:0!important}
  /* ticker stays static AND fully readable when its marquee is stopped (no clipped edge) */
  .ticker-track{padding-left:24px}
}

/* ---------- SKELETON LOADING (monochrome shimmer) ---------- */
/* .cc-skel = a grey block with a light sweep; used for shop grid + async fetch placeholders.
   The sweep animation is stopped automatically by the reduced-motion universal rule above. */
.cc-skel{position:relative;overflow:hidden;background:var(--panel)}
.cc-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.05) 40%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 60%,transparent 100%);
  animation:ccSkel 1.35s ease-in-out infinite}
@keyframes ccSkel{100%{transform:translateX(100%)}}
/* skeleton product card — mirrors .pcard's shape so the swap to real cards doesn't jump */
.skel-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.skel-card .sk-img{aspect-ratio:1/1}
.skel-card .sk-body{padding:15px 15px 18px}
.skel-line{height:11px;border-radius:var(--r-sm);margin-bottom:11px}
.skel-line.w40{width:40%}.skel-line.w60{width:60%}.skel-line.w80{width:80%}
.skel-line:last-child{margin-bottom:0}

/* =====================================================================================
   MOBILE POLISH — iPhone / Safari. Appended last so it wins on source order.
   Built from a multi-agent mobile audit. Monochrome only; the single accent is the
   promo red #c8102e on signing/promo elements (never elsewhere).
   ===================================================================================== */

/* ---- iOS global niceties ---- */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;scroll-padding-top:calc(90px + env(safe-area-inset-top))}
body{max-width:100%;position:relative}
/* 16px form controls so Safari never zooms in when a field is focused */
.field input,.field textarea,.field select,.notify-form input,.otis-input textarea,.otis-form input{font-size:16px}
/* momentum scrolling + scroll containment on inner scroll regions */
.acct-side,.cart-body,.otis-body,.nav-links{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* theme-respecting focus ring for keyboard / switch users (var(--accent) is #fff) */
a:focus-visible,button:focus-visible,.btn:focus-visible,.pick-card:focus-visible,.cart-btn:focus-visible,.nav-burger:focus-visible,
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,.nb-grid input:focus-visible,#socialsField input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- safe-area: fixed header clears the notch / Dynamic Island ---- */
.nav-inner{padding-top:env(safe-area-inset-top);height:calc(74px + env(safe-area-inset-top))}
/* ---- safe-area: floating widgets + footer clear the home indicator ---- */
.float-pill{bottom:calc(24px + env(safe-area-inset-bottom));left:calc(24px + env(safe-area-inset-left))}
.otis-launch{bottom:calc(24px + env(safe-area-inset-bottom));right:calc(24px + env(safe-area-inset-right))}
.otis-panel{bottom:calc(24px + env(safe-area-inset-bottom));height:min(560px,calc(100dvh - 48px))}
.foot{padding-bottom:calc(36px + env(safe-area-inset-bottom))}
.split{min-height:62dvh}   /* dvh: stable when the Safari toolbar shows/hides */

/* ---- bigger touch targets ---- */
.cart-btn{width:44px;height:44px}
.ci-qty button{min-width:34px;min-height:34px}
.cart-head .x,.modal .x{min-width:44px;min-height:44px;display:grid;place-items:center}
.float-pill .x{min-width:28px;min-height:28px;display:inline-grid;place-items:center}
/* invisible 44px hit area on the small carousel dots — TOUCH devices only so a desktop
   mouse can still click an individual dot precisely */
@media(hover:none){
  .hero-dots button,.feature-dots button{position:relative}
  .hero-dots button::before,.feature-dots button::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
}
/* dark-theme native file button (sell page) */
.field input[type=file]{padding:11px 14px;color:var(--dim);font-size:13.5px}
.field input[type=file]::file-selector-button{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;background:var(--white);color:var(--bg);border:0;border-radius:var(--r);padding:10px 16px;margin-right:14px;min-height:40px;cursor:pointer;transition:.16s}
/* monochrome select chevron + consistent height */
.field select{-webkit-appearance:none;appearance:none;min-height:48px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23a9a9ad' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}

/* ---- mobile burger menu: scroll-lock + tap-to-close backdrop ---- */
body.nav-open{overflow:hidden;touch-action:none}
#navBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:330;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
#navBackdrop.show{opacity:1;visibility:visible}

/* ===================== <= 900px : tablet + phone nav ===================== */
@media(max-width:900px){
  .nav-inner{display:flex;justify-content:space-between;align-items:center;height:calc(60px + env(safe-area-inset-top));padding-left:16px;padding-right:16px;gap:8px}
  /* layout guard, owner call: the WORDMARK has right-of-way — it must never squish,
     clip or ellipsize. It renders at a deliberate phone size and everything on the
     right (account label, LIVE badge, cart, burger) compresses instead. */
  .nav-inner .logo{flex-shrink:0;min-width:auto;overflow:visible;white-space:nowrap;font-size:19px;letter-spacing:1.5px}
  .nav-inner .logo-img{height:26px}
  .nav-right{gap:8px;margin-left:auto;min-width:0}
  .nav-right .btn-account{padding:8px 10px;font-size:11px;gap:5px}
  /* long signed-in names truncate on the LABEL — never the logo */
  .nav-right .btn-account #acctLabel{display:inline-block;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
  .nav-right .cart-btn{width:38px;height:38px}
  .nav-burger{display:grid;place-items:center;width:42px;height:44px;font-size:24px;margin-right:-8px;line-height:1;order:3}
  /* slide-in drawer refinements (base drawer styles live in the earlier <=900px block):
     keep the drawer pinned to the FULL viewport (top:0), comfy tap targets, dim children */
  .nav-links{top:0;max-height:none}
  .nav-links>a,.nav-item>a{min-height:48px}
  .nav-drop a{min-height:42px;display:flex;align-items:center}
  .nav-drop a:active{color:var(--white)}
  .nav-links>a.featured,.nav-item>a.featured{background:rgba(200,16,46,.08);border-left-color:var(--promo)}
  .nav-links a.featured::after{display:none}
  /* promo ticker lead-in so the first word isn't sheared at the edge */
  .ticker-track{padding-left:16px;animation-duration:26s}
  .ticker-item{font-size:11px;letter-spacing:1.5px;padding:0 18px}
}

/* ===================== <= 1000px : account tab rail ===================== */
@media(max-width:1000px){
  .acct-side button{white-space:normal;padding:0 8px;min-height:48px;font-size:11.5px}   /* keep the 2-up card grid (set at <=1000px); just tune for the smallest phones */
}

/* ===================== <= 820px / 760px : contact form ===================== */
@media(max-width:820px){#cWrap{grid-template-columns:1fr!important;gap:18px!important}}
@media(max-width:760px){.form-card{padding:22px 18px}}

/* ===================== <= 680px : phone layout rhythm ===================== */
@media(max-width:680px){
  .section{padding:52px 0}
  .section-head{margin-bottom:28px}
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .btn{letter-spacing:1.5px;padding:15px 26px}
  .btn-sm{padding:13px 20px;font-size:12.5px;min-height:44px}
  /* home — hero caption */
  .hero-caption{bottom:14%;padding:0 20px}
  .hero-caption h1{font-size:clamp(34px,11vw,48px);letter-spacing:1px}
  .hero-caption .sub{font-size:15px}
  /* home — signing promo strip */
  .sgpromo .row{min-height:0}
  .sgpromo .media{min-height:200px}
  .sgpromo .copy{padding:30px 20px}
  .sgpromo h2{font-size:30px}
  .sgpromo p{font-size:14px;max-width:none}
  .sgpromo .cta{margin-top:22px}
  .sgpromo .cta .btn-promo{display:flex;width:100%;justify-content:center}
  /* home — On-Air strip, pillars, split, feature */
  #liveStripInner{gap:24px!important}
  #liveStripInner p{max-width:none!important}
  .tile{min-height:220px;padding:32px 24px}
  .tile p{max-width:none}
  .split .panel{min-height:300px}
  .split .panel .inner{padding:0 24px 36px}
  .split .panel .inner h3{margin-bottom:16px}
  .feature{min-height:440px}
  .feature::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,.8) 100%)}
  .feature p{max-width:none}
  /* shop — Amazon-style 2-up grid (was a single endless column) */
  .prod-grid:not(.list){grid-template-columns:repeat(2,1fr);gap:12px}
  .prod-grid:not(.list) .pcard-img{aspect-ratio:1/1}
  .pcard{cursor:pointer}
  .shop-toolbar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
  .shop-toolbar .mob-filter-btn{order:2;justify-self:end;min-height:44px;padding:12px 20px;font-size:12.5px}
  .shop-search{order:1;grid-column:1/-1;min-width:0;width:100%}
  .shop-tools{order:3}
  .view-toggle{display:inline-flex}        /* was hidden — the list button now works on phones */
  .view-toggle button{min-height:40px;min-width:42px}
  .shop-tools select{padding:11px 12px}
  .store-modes{display:flex;width:100%}
  .store-modes button{flex:1;padding:13px 8px;font-size:12px;letter-spacing:1px;text-align:center}
  /* compact cards for the 2-up grid */
  .prod-grid:not(.list) .pcard-body{padding:11px 11px 13px}
  .prod-grid:not(.list) .pcard-title{font-size:13.5px;line-height:1.2}
  .prod-grid:not(.list) .pcard-cat{margin-bottom:3px;font-size:9px}
  .prod-grid:not(.list) .pcard-by{font-size:11.5px}
  .prod-grid:not(.list) .pcard-foot{flex-direction:column;align-items:stretch;gap:8px}
  .prod-grid:not(.list) .pcard-foot .btn{width:100%;justify-content:center;padding:10px 12px;min-height:42px;font-size:12px}
  .prod-grid:not(.list) .pcard-price{font-size:15px}
  .prod-grid:not(.list) .btn-invoice{display:none}   /* keep the grid clean; invoice option lives in the tap-open card */
  /* list view = dense horizontal rows (image left, details right) */
  .prod-grid.list .pcard.row{flex-direction:row}
  .prod-grid.list .pcard.row .pcard-img{width:118px;aspect-ratio:1/1;flex-shrink:0}
  .prod-grid.list .pcard-foot{gap:12px}
  .prod-grid.list .pcard-foot .btn{padding:11px 18px;min-height:42px;font-size:12px}
  /* checkout */
  .co-grid .grid2{grid-template-columns:1fr!important}
  .co-grid .grid2 .field[style*='grid-column']{grid-column:auto!important}
  .missed{padding:40px 22px;max-width:440px;margin-left:auto;margin-right:auto}
  .missed .btn{display:flex;width:100%;justify-content:center}
  .co-card{padding:18px 16px}
  /* account sign-in gate + add-address */
  .gate .btn-solid,#gate .btn-solid{display:flex;width:100%;justify-content:center}
  .acct-pane[data-pane="addresses"] details>div{grid-template-columns:1fr!important}
  .acct-pane[data-pane="addresses"] .field[style*="grid-column"]{grid-column:auto!important}
}

/* ===================== <= 560px : smallest phones ===================== */
@media(max-width:560px){
  .float-pill{bottom:calc(16px + env(safe-area-inset-bottom))}
  .otis-launch{bottom:calc(14px + env(safe-area-inset-bottom))}
  /* signing configurator */
  .pick-card{gap:10px;flex-wrap:wrap;min-height:64px;padding:14px 16px}
  .se-cover{padding:30px 26px 44px}
  .se-cover img{max-width:88%;max-height:88%}
  .se-seal{width:74px;height:74px;top:12px;right:12px}
  .se-script{font-size:24px;top:8px;left:14px}
  .se-num{font-size:10px;padding:6px 12px;bottom:12px}
  .sign-hero{min-height:320px}
  .sign-hero h1{font-size:34px}
  .cfg{gap:28px}
  .cfg h1{font-size:24px}
  .cfg .lead{font-size:14px;margin-top:10px}
  .cfg-summary{background:var(--bg2);margin-top:24px;padding:18px}
  #reserveBtn{padding:16px 18px;font-size:13px;letter-spacing:1px}
  .field textarea{min-height:88px}
  /* bin */
  .missed-cta{flex-direction:column;gap:10px}
  .missed-cta .btn{width:100%;justify-content:center}
  .prod-foot{flex-wrap:wrap;gap:12px}
  .prod-foot .btn{flex:1;justify-content:center}
  /* sell */
  .sell-grid .grid2{grid-template-columns:1fr!important}
  /* footer */
  .foot{padding:48px 0 calc(28px + env(safe-area-inset-bottom))}
  .foot-cols{grid-template-columns:1fr 1fr;gap:24px 18px;margin-bottom:40px}
  .foot-col a{padding:11px 0;font-size:14px}
  .foot-social{gap:16px 24px;padding:26px 0}
  .foot-base{justify-content:flex-start;gap:8px}
}

/* ============================================================
   LOWER-PAGE DEPTH FIELD — charcoal + ambient promo-red bloom.
   Stops the lower page going flat pure-black: a fixed layered
   glow field behind everything (revealed by translucent dark
   sections) + a warm-pool footer. Charcoal greys + the brand
   crimson family only. Auto-disabled by the reduced-motion reset.
   ============================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 820px at 12% 92%, rgba(200,16,46,.15), rgba(200,16,46,.05) 38%, transparent 64%),
    radial-gradient(1000px 720px at 90% 88%, rgba(200,16,46,.12), rgba(168,14,38,.04) 40%, transparent 66%),
    radial-gradient(1400px 540px at 50% 116%, rgba(168,14,38,.20), rgba(120,10,28,.06) 46%, transparent 72%),
    radial-gradient(900px 600px at 50% -8%, rgba(200,16,46,.055), transparent 60%),
    radial-gradient(1100px 1100px at 78% 50%, #141417, transparent 60%),
    radial-gradient(1000px 1000px at 18% 40%, #101013, transparent 58%),
    linear-gradient(180deg, #0c0c0e 0%, #121215 34%, #141416 60%, #0d0d10 84%, #08080a 100%);
  background-attachment:fixed;
  animation:depthDrift 34s ease-in-out infinite;will-change:transform}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 520px at 38% 80%, rgba(200,16,46,.13), transparent 60%),
    radial-gradient(680px 480px at 66% 86%, rgba(200,16,46,.10), transparent 62%);
  mix-blend-mode:screen;opacity:.9;
  animation:depthBloom 26s ease-in-out infinite alternate;will-change:transform,opacity}
/* the depth field is for the public marketing pages only — never the admin tool or the watch app
   (their panels are transparent, so the field would bleed through and look broken) */
body.admin-page::before,body.admin-page::after,body.watch-page::before,body.watch-page::after{display:none!important}

/* reveal the field through dark surfaces (light .lt/.lt2 stay opaque on purpose) */
.section:not(.lt):not(.lt2){background:rgba(10,10,11,.62)}
.section.alt:not(.lt):not(.lt2){background:rgba(18,18,20,.5)}
.phero{background:rgba(10,10,11,.5)}

/* signing promo — a bridge band with its own soft crimson air */
.sgpromo{background:rgba(18,18,20,.46);border-top:1px solid var(--line)}
.sgpromo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 420px at 8% 108%, rgba(200,16,46,.17), transparent 60%),
    radial-gradient(520px 360px at 96% 0%, rgba(200,16,46,.09), transparent 62%);
  animation:depthBloom 22s ease-in-out infinite alternate}
.sgpromo .row{position:relative;z-index:1}

/* ---- FOOTER — the deep warm pool, light pooling up from beneath the type ---- */
.foot{position:relative;background:rgba(8,8,10,.5);border-top:1px solid var(--line);overflow:hidden;isolation:isolate}
.foot::before{content:"";position:absolute;inset:-10% -5% -20% -5%;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 560px at 50% 128%, rgba(200,16,46,.24), rgba(150,12,34,.08) 44%, transparent 72%),
    radial-gradient(640px 460px at 6% 118%, rgba(200,16,46,.16), transparent 60%),
    radial-gradient(620px 440px at 96% 120%, rgba(168,14,38,.13), transparent 62%),
    radial-gradient(1100px 700px at 50% 40%, rgba(22,22,26,.85), transparent 66%),
    linear-gradient(180deg, rgba(6,6,8,.6) 0%, transparent 22%);
  animation:depthDrift 32s ease-in-out infinite;will-change:transform}
.foot::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(700px 380px at 30% 112%, rgba(200,16,46,.15), transparent 60%),
    radial-gradient(620px 340px at 72% 116%, rgba(200,16,46,.11), transparent 62%);
  mix-blend-mode:screen;opacity:.85;animation:depthBloom 24s ease-in-out infinite alternate;will-change:transform,opacity}
.foot-cols,.foot-social,.foot-base{position:relative;z-index:1}
.foot-social{border-color:rgba(200,16,46,.12)}

@keyframes depthDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-1.2%,-0.8%,0) scale(1.04)}
  100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes depthBloom{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.78}
  50%{transform:translate3d(2%,-1.4%,0) scale(1.08);opacity:.95}
  100%{transform:translate3d(-1.5%,1%,0) scale(1.03);opacity:.82}}

/* ===== Product-box presentation (shop) =====
   DARK studio tile (owner direction — no white slabs): product photography sits
   on a deep charcoal stage with a hairline inset, uncropped, so the photo carries
   the color on the black editorial site. Scoped to shop.html markup only: .pbox on
   the image container (grid cards, list rows, quick-view media) and .shop-promo
   for the signing cross-promo. The compound selectors (.pcard-img.pbox /
   .pm-media.pbox) deliberately out-specify the base rules in shop.html's inline
   <style> so they win regardless of source order. Color still comes only from the
   photos + the promo red (#c8102e) on the signing feature, per brand. */

/* dark studio tile — used by grid/list card images AND the quick-view media pane */
.pcard-img.pbox,
.pm-media.pbox{
  background:#101014;
  background:radial-gradient(120% 90% at 50% 30%,#1b1b21,#0e0e11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),inset 0 -34px 46px -30px rgba(0,0,0,.55);
}
.pcard-img.pbox{padding:16px}
.pm-media.pbox{padding:34px}
/* photography sits INSIDE the box with breathing room and is never cropped */
.pcard-img.pbox img,
.pm-media.pbox img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
/* hover: a gentle zoom on the IMAGE only (the card's own lift stays on .pcard:hover) */
.pcard:hover .pcard-img.pbox img,
.shop-promo:hover .pcard-img.pbox img{transform:scale(1.045)}
/* the "No image" placeholder ink on the dark tile */
.pcard-img.pbox .ph,
.pm-media.pbox .ph{color:#6a6a6f}
/* tighter list-row thumbnails don't need the full grid padding */
.pcard.row .pcard-img.pbox{padding:10px}

/* Signing pre-order cross-promo — one featured product-box card pinned to the top of the grid.
   Mirrors a .pcard visually but is a plain <a> (so the quick-view delegation ignores it) with a thin
   promo-red top border marking it as the temporary featured event. */
.shop-promo{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;
  background:var(--bg2);border:1px solid var(--line);border-top:3px solid #c8102e;
  border-radius:var(--r);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s,box-shadow .22s;
}
.shop-promo:hover{border-color:var(--line2);border-top-color:#c8102e;transform:translateY(-3px)}
.shop-promo .pcard-img.pbox{aspect-ratio:1/1}
.shop-promo-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:10px;
  padding:4px 8px;background:#c8102e;color:#fff;border-radius:var(--r-sm);
}
.shop-promo-cta{pointer-events:none}
/* list view: lay the promo out as a row to match the .pcard.row cards */
.prod-grid.list .shop-promo{flex-direction:row;align-items:stretch}
.prod-grid.list .shop-promo .pcard-img.pbox{width:170px;flex:0 0 170px;aspect-ratio:auto}

/* mobile: keep the studio box uncramped by easing padding as tiles shrink */
@media(max-width:680px){
  .prod-grid:not(.list) .pcard-img.pbox{padding:10px}
  .prod-grid.list .pcard.row .pcard-img.pbox{padding:7px}
  .prod-grid.list .shop-promo{flex-direction:column;align-items:stretch}
  .prod-grid.list .shop-promo .pcard-img.pbox{width:auto;flex:0 0 auto;aspect-ratio:1/1}
  .pm-media.pbox{padding:22px}
}
@media(max-width:400px){
  .prod-grid:not(.list) .pcard-img.pbox{padding:8px}
}

/* ============================================================================
   A2 (shop-experience): phone sign-in button + prominent account tabs +
   Otis launcher vs. notification popups (never overlap)
   ============================================================================ */
/* Phone header: signed-out button drops its dot + tightens, so "Sign in / Sign up"
   always fits on one clean line at 390px even before the webfonts finish loading. */
@media(max-width:680px){
  #acctWrap:not(.authed) .acct-dot{display:none}
  /* tight but untruncated: the full "Sign in / Sign up" label must fit at 390px
     next to the full-width wordmark (logo right-of-way — compress here, not there) */
  .nav-right{gap:6px}
  .nav-right .btn-account{padding:8px 8px;font-size:10.5px;letter-spacing:.5px}
  .nav-right .cart-btn{width:36px;height:36px}
}
/* smallest phones: the LIVE badge collapses to its pulsing dot and the account
   label cap tightens — the wordmark keeps its full width (owner rule) */
@media(max-width:480px){
  .nav-live{font-size:0;gap:0;padding:7px 9px}
  .nav-right .btn-account #acctLabel{max-width:92px}
}
@media(max-width:360px){
  .nav-right .btn-account{font-size:10px;padding:8px 9px}
  .nav-right .btn-account #acctLabel{max-width:80px}
  .nav-inner .logo-img{height:23px}
  .nav-inner .logo{font-size:17px}
}
/* Account modal: BOTH paths equally big and obvious (combined Sign in / Sign up button opens this) */
.acct-tabs button{padding:14px 10px;font-size:13px;letter-spacing:1.8px;min-height:52px}
.acct-tabs .tab-sub{display:block;font-size:9.5px;letter-spacing:1.2px;opacity:.68;text-transform:uppercase;margin-top:2px}
.acct-newhint{font-size:12.5px;line-height:1.55;color:var(--dim);background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--promo);border-radius:var(--r-sm);padding:10px 12px;margin:-8px 0 18px}
.acct-newhint b{color:var(--white)}
/* While ANY coordinated overlay (cookie notice / email-signup popup / new-buyer slide-in) is on
   screen, tuck the Otis chat launcher away — its tap target must never sit under or beside a
   popup's buttons. body.cc-pop-open is set by the popup coordinator in app.js. Higher specificity
   than otis.js's injected .otis-launch rule, so it wins regardless of stylesheet order. */
body.cc-pop-open .otis-launch{opacity:0;pointer-events:none;transform:translateY(16px)}

/* ============================================================================
   C2 (shop-retail) — HEADER FIT, 700–1100px (the builder preview pane's widths).
   Between the burger breakpoint (900px) and ~1200px the centered tab row could
   crowd the logo / LIVE / cart / sign-in cluster (especially with the LIVE badge
   showing). Compress tabs + controls progressively so nothing ever overlaps;
   the promo ticker is its own bar above the nav and never covers controls.
   ============================================================================ */
@media(min-width:901px) and (max-width:1200px){
  .nav-inner{gap:10px;padding:0 18px}
  .nav-links>a,.nav-item>a{padding:0 10px;font-size:12.5px;letter-spacing:1px}
  .nav-right{gap:10px}
  .btn-account{padding:9px 13px;letter-spacing:1px;gap:7px}
}
@media(min-width:901px) and (max-width:1060px){
  .nav-inner{gap:8px;padding:0 14px}
  .nav-links>a,.nav-item>a{padding:0 8px;font-size:12px;letter-spacing:.8px}
  .logo{font-size:19px;letter-spacing:1.5px}
  .logo-img{height:26px}
  .btn-account{font-size:11px;padding:8px 11px;gap:6px}
  .acct-dot{width:17px;height:17px;font-size:10px}
  .cart-btn{width:38px;height:38px}
  .nav-live{font-size:11px;padding:4px 10px}
}
/* guard rails: the grid's side columns may shrink but their content never paints
   over the centered tabs — they clip cleanly instead (was: raw overlap). */
@media(min-width:901px){
  .nav-inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .nav-inner .logo{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .nav-inner .nav-right{min-width:0}
}