@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   KLUB · GOLDEN HOUR DESIGN SYSTEM
   Single source of truth for the new direction. Every redesign
   surface links this file, no inline token duplication.
   Sections: 0 Icons · 1 Tokens · 2 Base · 3 Presentation chrome ·
   4 Device + app chrome · 5 Components · 6 Motion
   ============================================================ */

/* ---------- 0 · ICONS ----------
   Lucide is the EXCLUSIVE Klub icon library, the same first-party set the
   app ships (lucide-react / lucide-react-native). Rendered as inline SVG by
   redesign/_system/lucide.js (baked from lucide-react v0.460 source), so icons
   render identically in app, screenshots and PDF with no webfont or CDN.
   Markup: <i class="lc lc-name"></i> (stroke outline, the only variant).
   Active/emphasis states use color or highlight, never a solid fill.
   Never mix in Phosphor, Heroicons, Material or
   Font Awesome. The lc-name classes are Klub's own semantic vocabulary, each
   mapped to a Lucide glyph in the injector. */

/* ---------- 1 · TOKENS ---------- */
:root {
  /* Night base (violet-leaning black so saturated color pops) */
  --n0:#07050C; --n1:#0D0A15; --n2:#15101F; --n3:#1F1730; --n4:#2A2040;
  /* Light */
  --bone:#F7F2EA; --bone-2:#B8AEC6; --bone-3:#7C7390; --bone-4:#564E68;
  /* Sunset spectrum */
  --gold:#FFC24B; --coral:#FF7A59; --pink:#FF2E93; --pink-hi:#FF6EC7; --pink-deep:#D11D74;
  --violet:#9D4EDD; --purple:#8B5CF6; --purple-hi:#C084FC; --indigo:#6D28D9;
  /* Access (price / tickets only) */
  --acid:#FFD23D; --acid-ink:#2A1F02;
  /* Reaction (feed kudos) */
  --flame:#FF7A1A;
  /* Status / signal */
  --go:#34D399; --go-deep:#0E5C43; --stop:#FF453A; --stop-deep:#5C1714; --warn:#FFB020; /* @kind color */
  /* Glows */
  --pink-glow:rgba(255,46,147,0.5); --purple-glow:rgba(139,92,246,0.45); --gold-glow:rgba(255,194,75,0.4);
  /* Signature gradient: golden hour into 2am */
  --sunset:linear-gradient(112deg,#FFC24B 0%,#FF7A59 24%,#FF2E93 54%,#9D4EDD 80%,#6D28D9 100%); /* @kind color */
  --sunset-soft:linear-gradient(112deg,rgba(255,194,75,.22),rgba(255,46,147,.20) 55%,rgba(139,92,246,.20)); /* @kind color */
  /* Lines */
  --hair:rgba(247,242,234,0.12); --hair-2:rgba(247,242,234,0.20);
  /* Radius */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px; --r-pill:999px;
  /* Spacing scale (4pt base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
  /* Elevation (night-tuned: deep ambient + colored spill) */
  --e-1:0 2px 8px rgba(0,0,0,.35);
  --e-2:0 12px 26px rgba(0,0,0,.42);
  --e-3:0 24px 50px rgba(0,0,0,.5);
  --e-glow-pink:0 8px 24px -6px var(--pink-glow);
  --e-glow-purple:0 8px 24px -6px var(--purple-glow);
  /* Motion */
  --motion-fast:.18s var(--ease); /* @kind other */ --motion:.3s var(--ease); /* @kind other */ --motion-slow:.6s var(--ease); /* @kind other */
  /* Type */
  --grot:'Geist',system-ui,sans-serif; /* @kind font */
  --disp:'Bricolage Grotesque','Geist',system-ui,sans-serif; /* @kind font */
  --mono:'JetBrains Mono',ui-monospace,monospace; /* @kind font */
  /* Motion */
  --ease:cubic-bezier(0.4,0,0.2,1); /* @kind other */
}

/* ---------- 2 · BASE ---------- */
/* Bare-element base-reset rules (universal box-sizing, the root bg/color reset,
   and the fixed grain overlay) removed: this file is now loaded on the /about
   route beneath the shared AppShell Header, and those rules leaked onto the real
   header/links. Tailwind preflight + the app globals already set box-sizing and
   the dark bg/link colors. Class-based rules below are untouched, the phone
   mockups depend on them. */

/* ---------- 3 · PRESENTATION CHROME (the mock wrapper: rail + stage) ---------- */
.page { display:grid; grid-template-columns:minmax(320px,400px) 1fr; min-height:100vh; position:relative; }
@media (max-width:980px){ .page{ grid-template-columns:1fr; } }
.page::before { content:''; position:fixed; top:-260px; left:-160px; width:760px; height:760px; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 40% 40%, rgba(255,46,147,.22), rgba(157,78,221,.14) 40%, transparent 70%); filter:blur(8px); }

.rail { position:relative; z-index:2; padding:56px 44px 64px; border-right:1px solid var(--hair); background:linear-gradient(180deg, rgba(21,16,31,.6), rgba(13,10,21,.2)); backdrop-filter:blur(2px); }
@media (max-width:980px){ .rail{ border-right:0; border-bottom:1px solid var(--hair); } }
.brandline { display:flex; align-items:center; gap:11px; margin-bottom:38px; }
.logo { font-family:var(--disp); font-weight:800; font-size:30px; letter-spacing:-.03em; line-height:1; }
.logo .dot { background:var(--sunset); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ver { font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); padding:5px 9px; border:1px solid var(--hair-2); border-radius:999px; }
.kicker { font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--pink-hi); margin:0 0 14px; }
h1.lede { font-family:var(--disp); font-weight:800; font-size:38px; line-height:1.02; letter-spacing:-.025em; margin:0 0 16px; text-wrap:balance; }
h1.lede .grad { background:var(--sunset); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { font-size:14.5px; line-height:1.6; color:var(--bone-2); margin:0 0 30px; max-width:330px; }
.block { margin-bottom:26px; }
.block > .lbl { font-weight:600; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-3); margin:0 0 13px; display:flex; align-items:center; gap:10px; }
.block > .lbl::after { content:''; flex:1; height:1px; background:var(--hair); }
.ia { display:flex; flex-direction:column; gap:9px; }
.ia .row { display:flex; gap:11px; font-size:13px; line-height:1.4; align-items:baseline; }
.ia .row .i, .ia .row .e { font-family:var(--mono); font-size:10.5px; color:var(--pink-hi); min-width:16px; }
.ia .row .e { font-family:var(--grot); font-size:13px; min-width:20px; }
.ia .row b { color:var(--bone); font-weight:600; } .ia .row span { color:var(--bone-3); }
.tags { display:flex; flex-wrap:wrap; gap:7px; }
.tags .t { font-size:11px; color:var(--bone-2); padding:6px 11px; border:1px solid var(--hair-2); border-radius:999px; }
.footnote { position:relative; z-index:2; max-width:330px; font-size:12.5px; line-height:1.55; color:var(--bone-2); padding:14px 16px; border-radius:13px; border:1px solid rgba(255,46,147,.28); background:linear-gradient(135deg,rgba(255,46,147,.10),rgba(139,92,246,.06)); }
.footnote b { color:var(--bone); font-weight:600; }
.footnote.plain { border:0; background:none; color:var(--bone-3); padding:0; text-align:center; }

/* pillars (used in direction/IA docs) */
.pillars { display:flex; flex-direction:column; gap:9px; }
.pillar { display:flex; gap:13px; align-items:center; padding:13px 15px; border-radius:13px; border:1px solid var(--hair); background:rgba(247,242,234,.02); }
.pillar.on { border-color:rgba(255,46,147,.45); background:linear-gradient(100deg,rgba(255,46,147,.12),transparent); }
.pillar .ic { width:30px; height:30px; flex-shrink:0; border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--bone-3); border:1px solid var(--hair-2); }
.pillar.on .ic { background:var(--sunset); color:#fff; border:0; box-shadow:0 4px 12px -3px var(--pink-glow); }
.pillar .ic svg { width:17px; height:17px; }
.pillar .m .nm { font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--bone-2); }
.pillar.on .m .nm { color:var(--bone); }
.pillar .m .jb { font-size:11.5px; color:var(--bone-3); margin-top:2px; }
.pillar .tag { margin-left:auto; font-weight:600; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--pink-hi); }

.stage { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; padding:48px 24px 70px; gap:22px; }
.stage::before { content:''; position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:560px; height:420px; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 50% 0%, rgba(255,46,147,.16), rgba(139,92,246,.12) 45%, transparent 72%); }
.stage-cap { position:relative; z-index:2; text-align:center; }
.stage-cap .e { font-weight:600; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-3); }
.stage-cap .h { font-family:var(--disp); font-weight:700; font-size:18px; letter-spacing:-.01em; margin-top:5px; }

/* ---------- 4 · DEVICE + APP CHROME ---------- */
.device { position:relative; z-index:2; width:390px; height:838px; border-radius:46px; background:var(--n1); box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 0 9px #050308, 0 0 0 11px rgba(255,255,255,.05), 0 0 60px -10px var(--pink-glow); overflow:hidden; }
.screen { position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column; }
.scroll { flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.scroll::-webkit-scrollbar { display:none; }
.screen .leak { position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(6px); }
.leak.a { top:-90px; left:-70px; width:250px; height:250px; background:radial-gradient(circle,rgba(255,122,89,.5),transparent 68%); }
.leak.b { bottom:300px; right:-90px; width:220px; height:220px; background:radial-gradient(circle,rgba(255,46,147,.38),transparent 70%); }

.statusbar { position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:14px 22px 4px; font-weight:600; font-size:13px; color:var(--bone); }
.statusbar .icons { display:flex; gap:6px; align-items:center; }
.statusbar .icons span { width:16px; height:11px; border-radius:2px; background:var(--bone-2); opacity:.8; }
.statusbar .icons .bat { width:22px; }

.apphead { position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:6px 20px 10px; }
.apphead .left { display:flex; align-items:center; gap:9px; }
.apphead .wm { font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:-.03em; }
.apphead .wm .dot { background:var(--sunset); -webkit-background-clip:text; background-clip:text; color:transparent; }
.apphead .h2 { font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:-.02em; padding-left:10px; }
.apphead .loc { font-weight:500; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-3); padding-left:9px; border-left:1px solid var(--hair); }
/* top-right: Instagram-style notifications (heart) + inbox (DM). No avatar. */
.apphead .acts { display:flex; gap:16px; align-items:center; color:var(--bone-2); }
.apphead .ai { position:relative; display:flex; font-size:23px; }
.apphead .ai svg { width:23px; height:23px; }
.apphead .ai .nb { position:absolute; top:-2px; right:-2px; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 2px var(--n1); z-index:1; }

/* bottom nav: Discover · Feed (antenna) · Community · Pass · Profile */
.nav { position:relative; z-index:6; display:flex; justify-content:space-around; align-items:center; padding:13px 18px 24px; border-top:1px solid var(--hair); background:rgba(7,5,12,.86); backdrop-filter:blur(20px); }
.nav .i { width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--bone-3); font-size:25px; }
.nav .i.on { color:var(--bone); }
.nav .i svg { width:24px; height:24px; }
.nav .i.you { width:28px; height:28px; border-radius:50%; background-size:cover; background-position:center; position:relative; background-image:url('https://images.unsplash.com/photo-1500336624523-d727130c3328?w=120&q=80&auto=format'); }
.nav .i.you.on::after { content:''; position:absolute; inset:-3px; border-radius:50%; padding:1.5px; background:var(--sunset); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }

/* ---------- 5 · COMPONENTS ---------- */
/* K mark — the app logo. Purple gradient tile, white Bricolage K, metallic edges. */
.kmark { --s:34px; width:var(--s); height:var(--s); border-radius:calc(var(--s)*.28); flex-shrink:0; position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#6D28D9 0%,#8B5CF6 40%,#A855F7 66%,#C084FC 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(40,12,80,.6),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 5px 14px -4px rgba(139,92,246,.65),
    0 1px 2px rgba(0,0,0,.45); }
.kmark::before { content:''; position:absolute; inset:0; background:linear-gradient(158deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 46%); pointer-events:none; }
.kmark .k { font-family:var(--disp); font-weight:800; font-size:calc(var(--s)*.62); line-height:1; letter-spacing:-.05em; color:#fff; text-shadow:0 1.5px 1px rgba(35,10,70,.5); position:relative; }
.kmark.lg { --s:96px; } .kmark.xl { --s:168px; }
/* logo lockup: K mark + wordmark */
.lockup { display:flex; align-items:center; gap:10px; }
.lockup .wmtext { font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:-.03em; color:var(--bone); }
.lockup .wmtext .dot { background:var(--sunset); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* buttons */
.kbtn { font-family:var(--grot); font-weight:700; font-size:13.5px; padding:12px 20px; border-radius:999px; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; color:#fff; }
.kbtn.primary { background:var(--sunset); box-shadow:0 6px 18px -5px var(--pink-glow); }
.kbtn.ghost { background:rgba(247,242,234,.05); border:1px solid var(--hair-2); color:var(--bone); }
.kbtn.access { background:var(--acid); color:var(--acid-ink); box-shadow:0 6px 18px -6px var(--gold-glow); }
.kbtn > i[class*="lc-"] { font-size:16px; }

/* form controls */
.field { display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:var(--r-md); background:var(--n2); border:1px solid var(--hair-2); transition:border-color var(--motion-fast); }
.field:focus-within { border-color:var(--purple); }
.field > i[class*="lc-"] { font-size:18px; color:var(--bone-3); }
.field input { flex:1; background:none; border:0; outline:0; color:var(--bone); font-family:var(--grot); font-size:14px; }
.field input::placeholder { color:var(--bone-3); }
.field.focused { border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,.18); }
.label { font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3); display:block; margin-bottom:8px; }
/* toggle */
.toggle { width:46px; height:27px; border-radius:999px; background:var(--n3); border:1px solid var(--hair-2); position:relative; cursor:pointer; transition:background var(--motion-fast); flex-shrink:0; }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:var(--bone); transition:transform var(--motion-fast); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.toggle.on { background:var(--sunset); border-color:transparent; }
.toggle.on::after { transform:translateX(19px); }
/* radio / checkbox dot */
.kradio { width:22px; height:22px; border-radius:50%; border:2px solid var(--hair-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.kradio.on { border-color:var(--pink); }
.kradio.on::after { content:''; width:11px; height:11px; border-radius:50%; background:var(--sunset); }
.kcheck { width:22px; height:22px; border-radius:7px; border:2px solid var(--hair-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; }
.kcheck.on { background:var(--sunset); border-color:transparent; }
/* segmented control */
.segment { display:inline-flex; background:var(--n2); border:1px solid var(--hair-2); border-radius:var(--r-pill); padding:3px; gap:2px; }
.segment .seg { font-weight:600; font-size:12.5px; padding:8px 16px; border-radius:var(--r-pill); color:var(--bone-3); cursor:pointer; }
.segment .seg.on { background:var(--sunset); color:#fff; }
/* stepper / counter */
.stepper { display:inline-flex; align-items:center; gap:14px; background:var(--n2); border:1px solid var(--hair-2); border-radius:var(--r-pill); padding:6px 10px; }
.stepper button { width:28px; height:28px; border-radius:50%; border:0; background:rgba(247,242,234,.06); color:var(--bone); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.stepper .val { font-family:var(--disp); font-weight:700; font-size:16px; min-width:18px; text-align:center; }

/* avatar stack */
.avstack { display:flex; }
.avstack .a { border-radius:50%; background-size:cover; background-position:center; box-shadow:0 0 0 2px var(--n1); margin-left:-8px; width:26px; height:26px; }
.avstack .a:first-child { margin-left:0; }

/* search bar */
.search { position:relative; z-index:5; margin:4px 20px 6px; display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:14px; background:var(--n2); border:1px solid var(--hair-2); }
.search svg { width:18px; height:18px; color:var(--bone-3); }
.search > i.lc, .search > i[class*="lc-"] { font-size:18px; color:var(--bone-3); flex-shrink:0; }
.search .lc-text { color:var(--bone-3); font-size:14px; flex:1; }

/* greeting */
.greet { position:relative; z-index:5; padding:10px 20px 4px; }
.greet .eye { font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--pink-hi); margin-bottom:7px; display:flex; align-items:center; gap:8px; }
.greet .eye .live { width:7px; height:7px; border-radius:50%; background:var(--pink); animation:ghpulse 2s infinite; }
.greet h2 { font-family:var(--disp); font-weight:800; font-size:40px; line-height:.92; letter-spacing:-.035em; margin:0; }
.greet h2 .city { background:var(--sunset); -webkit-background-clip:text; background-clip:text; color:transparent; }
.greet .meta { font-size:13.5px; color:var(--bone-2); margin-top:9px; line-height:1.45; } .greet .meta b { color:var(--bone); font-weight:600; }
@keyframes ghpulse { 0%{ box-shadow:0 0 0 0 rgba(255,46,147,.6);} 70%{ box-shadow:0 0 0 9px rgba(255,46,147,0);} 100%{ box-shadow:0 0 0 0 rgba(255,46,147,0);} }

/* chips */
.chips { position:relative; z-index:5; display:flex; gap:8px; padding:16px 20px 6px; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chips .c { flex-shrink:0; font-weight:600; font-size:12px; padding:9px 15px; border-radius:999px; border:1px solid var(--hair-2); color:var(--bone-2); background:rgba(247,242,234,.03); white-space:nowrap; }
.chips .c.on { background:var(--sunset); color:#fff; border-color:transparent; box-shadow:0 4px 16px -4px var(--pink-glow); }
.chips .c.acid { color:var(--acid); border-color:rgba(255,210,61,.4); }

/* section header */
.sec { position:relative; z-index:5; display:flex; align-items:baseline; justify-content:space-between; padding:24px 20px 12px; }
.sec .l .h { font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-.01em; margin:0; }
.sec .l .s { font-size:11.5px; color:var(--bone-3); margin-top:3px; }
.sec .all { font-weight:600; font-size:12px; color:var(--pink-hi); white-space:nowrap; }

/* featured event card */
.feat { position:relative; z-index:5; margin:12px 20px 6px; border-radius:22px; overflow:hidden; aspect-ratio:4/4.5; box-shadow:0 24px 50px rgba(0,0,0,.5); }
.feat img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.15) contrast(1.05) brightness(.92); }
.feat .scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,10,21,.05) 30%, rgba(13,10,21,.55) 68%, rgba(13,10,21,.94) 100%); }
.feat .tint { position:absolute; inset:0; background:linear-gradient(150deg, rgba(255,46,147,.20), transparent 55%); mix-blend-mode:screen; }
.feat .top { position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:flex-start; }
.feat .body { position:absolute; left:18px; right:18px; bottom:18px; }
.feat .when { font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); opacity:.9; }
.feat h3 { font-family:var(--disp); font-weight:800; font-size:40px; line-height:.92; letter-spacing:-.03em; margin:5px 0 4px; color:#fff; }
.feat .vsub { font-size:13px; color:rgba(247,242,234,.82); margin-bottom:13px; }
.feat .row { display:flex; align-items:center; justify-content:space-between; }
.feat .going { display:flex; align-items:center; gap:9px; }
.feat .going .txt { font-size:12.5px; color:#fff; } .feat .going .txt b { font-weight:700; }
.feat .price { font-weight:700; font-size:14px; color:var(--acid); padding:8px 13px; border-radius:999px; border:1px solid rgba(255,210,61,.45); background:rgba(255,210,61,.08); }

/* badge */
.badge { font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:6px 11px; border-radius:999px; background:rgba(7,5,12,.5); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; gap:7px; }
.badge.orig { background:var(--sunset); border:0; box-shadow:0 4px 14px -4px var(--pink-glow); }
.badge .live { width:6px; height:6px; border-radius:50%; background:var(--pink); animation:ghpulse 2s infinite; }

/* event list row */
.evt { position:relative; z-index:5; display:flex; gap:13px; padding:0 20px; margin-bottom:16px; }
.evt .th { width:88px; height:104px; border-radius:14px; object-fit:cover; flex-shrink:0; filter:saturate(1.1) brightness(.92); }
.evt .info { flex:1; min-width:0; padding-top:2px; }
.evt .info .gen { font-weight:600; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--pink-hi); }
.evt .info .nm { font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:-.01em; margin:3px 0 3px; }
.evt .info .vn { font-size:11.5px; color:var(--bone-3); }
.evt .info .soc { display:flex; align-items:center; gap:8px; margin-top:9px; }
.evt .info .soc .g { font-size:11px; color:var(--bone-2); } .evt .info .soc .g b { color:var(--bone); font-weight:600; }
.evt .info .fam { font-size:10.5px; color:var(--purple-hi); margin-top:5px; font-weight:500; }
.evt .pr { font-weight:700; font-size:13px; color:var(--acid); align-self:flex-start; padding-top:2px; }

/* PULSE module (inline, not a tab) */
.pmod { position:relative; z-index:5; margin:14px 20px 4px; display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:15px; background:var(--sunset-soft); border:1px solid rgba(255,46,147,.24); }
.pmod .ic { width:30px; height:30px; border-radius:9px; background:var(--sunset); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 14px -3px var(--pink-glow); font-size:15px; color:#fff; }
.pmod .ic svg { width:15px; height:15px; color:#fff; }
.pmod .t { flex:1; font-size:12.5px; color:var(--bone); line-height:1.35; } .pmod .t b { font-weight:700; }
.pmod .t .lbl { color:var(--pink-hi); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:2px; }
.pmod .chev { color:var(--bone-3); font-size:15px; display:flex; }

/* presence row (who's out) */
.prow { position:relative; z-index:5; display:flex; gap:15px; padding:2px 20px 4px; overflow-x:auto; scrollbar-width:none; }
.prow::-webkit-scrollbar { display:none; }
.person { flex-shrink:0; width:64px; text-align:center; }
.person .pic { width:62px; height:62px; border-radius:50%; background-size:cover; background-position:center; position:relative; margin:0 auto; }
.person.live .pic::after { content:''; position:absolute; inset:-4px; border-radius:50%; padding:2px; background:var(--sunset); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.person.idle .pic::after { content:''; position:absolute; inset:-4px; border-radius:50%; padding:1.5px; background:var(--hair-2); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.person.idle .pic { filter:grayscale(.4) brightness(.8); }
.person .nm { font-size:11px; color:var(--bone); margin-top:8px; font-weight:600; }
.person .st { font-size:9.5px; color:var(--pink-hi); margin-top:1px; }
.person.idle .st { color:var(--bone-3); }
.person.add .pic { background:rgba(247,242,234,.04); display:flex; align-items:center; justify-content:center; }
.person.add .pic::after { content:''; position:absolute; inset:-4px; border-radius:50%; padding:1.6px; background:var(--sunset); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.8; }
.person.add .plus { font-family:var(--disp); font-weight:700; font-size:26px; background:var(--sunset); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.person.add .nm { color:var(--bone-2); }

/* crew card */
.crew { position:relative; z-index:5; margin:0 20px 14px; border-radius:20px; padding:18px 18px 16px; overflow:hidden; background:linear-gradient(155deg, rgba(255,46,147,.11), rgba(139,92,246,.06) 60%, rgba(13,10,21,0)); border:1px solid var(--hair-2); }
.crew .edge { position:absolute; top:0; left:0; right:0; height:3px; background:var(--sunset); }
.crew .chost { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.crew .ha { width:48px; height:48px; border-radius:50%; background-size:cover; background-position:center; position:relative; flex-shrink:0; }
.crew .ha::after { content:''; position:absolute; inset:-3px; border-radius:50%; padding:1.6px; background:var(--sunset); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.crew .chost .m { flex:1; min-width:0; }
.crew .chost .by { font-weight:600; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3); }
.crew .chost .nm { font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:-.02em; line-height:1.02; margin-top:2px; }
.crew .nc { flex-shrink:0; font-weight:600; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--acid); background:rgba(255,210,61,.10); border:1px solid rgba(255,210,61,.38); padding:5px 9px; border-radius:999px; }
.crew .desc { font-size:12.5px; line-height:1.45; color:var(--bone-2); margin:0 0 14px; }
.crew .foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.crew .going { display:flex; align-items:center; gap:9px; }
.crew .going .txt { font-size:12px; color:var(--bone-2); } .crew .going .txt b { color:var(--bone); font-weight:700; }
.crew .join { font-family:var(--grot); font-weight:700; font-size:12.5px; color:#fff; padding:10px 18px; border-radius:999px; background:var(--sunset); border:0; box-shadow:0 6px 18px -5px var(--pink-glow); cursor:pointer; white-space:nowrap; }

/* feed: stories */
.stories { position:relative; z-index:5; display:flex; gap:14px; padding:10px 20px 12px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--hair); }
.stories::-webkit-scrollbar { display:none; }
.story { flex-shrink:0; width:60px; text-align:center; }
.story .pic { width:58px; height:58px; border-radius:50%; background-size:cover; background-position:center; position:relative; margin:0 auto; }
.story.has .pic::after { content:''; position:absolute; inset:-4px; border-radius:50%; padding:2px; background:var(--sunset); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.story .nm { font-size:10.5px; color:var(--bone-2); margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.story.add .pic { background:rgba(247,242,234,.04); display:flex; align-items:center; justify-content:center; }
.story.add .pic .badge { position:absolute; right:-1px; bottom:-1px; width:21px; height:21px; padding:0; border-radius:50%; background:var(--sunset); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2.5px var(--n1); }
.story.add .pic .badge svg { width:12px; height:12px; color:#fff; }

/* feed: composer */
.composer { position:relative; z-index:5; margin:14px 20px; display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:999px; background:var(--n2); border:1px solid var(--hair-2); }
.composer .ca { width:32px; height:32px; border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; }
.composer .ph { flex:1; font-size:13.5px; color:var(--bone-3); }
.composer .cam { width:34px; height:34px; border-radius:50%; background:var(--sunset); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px -5px var(--pink-glow); }
.composer .cam svg { width:17px; height:17px; color:#fff; }

/* feed: filter chips (compact) */
.fchips { position:relative; z-index:5; display:flex; gap:8px; padding:2px 20px 6px; overflow-x:auto; scrollbar-width:none; }
.fchips::-webkit-scrollbar { display:none; }
.fchips .c { flex-shrink:0; font-weight:600; font-size:12px; padding:8px 14px; border-radius:999px; border:1px solid var(--hair-2); color:var(--bone-2); background:rgba(247,242,234,.03); white-space:nowrap; }
.fchips .c.on { background:var(--sunset); color:#fff; border-color:transparent; box-shadow:0 4px 14px -5px var(--pink-glow); }

/* feed: activity / post card */
.fcard { position:relative; z-index:5; margin:0 20px 12px; border-radius:18px; background:var(--n2); border:1px solid var(--hair); overflow:hidden; }
.fcard .fh { display:flex; align-items:center; gap:11px; padding:14px 15px 0; }
.fcard .fh .fav { width:40px; height:40px; border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; }
.fcard .fh .who { flex:1; min-width:0; }
.fcard .fh .who .n { font-weight:600; font-size:14px; color:var(--bone); }
.fcard .fh .who .s { font-size:11px; color:var(--bone-3); margin-top:1px; }
.fcard .fh .tag { width:30px; height:30px; border-radius:9px; background:rgba(247,242,234,.05); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.fcard .body { padding:11px 15px 0; }
.fcard .act { font-size:14px; line-height:1.4; color:var(--bone); } .fcard .act .em { margin-right:6px; } .fcard .act b { font-weight:700; }
.fcard .msg { font-size:12.5px; color:var(--bone-2); font-style:italic; margin-top:7px; }
.prev { display:flex; margin-top:12px; border-radius:13px; overflow:hidden; background:var(--n3); border:1px solid var(--hair); }
.prev img { width:74px; height:74px; object-fit:cover; flex-shrink:0; filter:saturate(1.1) brightness(.92); }
.prev .pi { flex:1; min-width:0; padding:11px 13px; display:flex; flex-direction:column; justify-content:center; }
.prev .pi .pn { font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.prev .pi .pd { font-size:11px; color:var(--bone-3); margin-top:2px; }
.prev .pi .pf { font-size:11px; color:var(--pink-hi); font-weight:600; margin-top:3px; }
.fphoto { margin-top:12px; border-radius:13px; overflow:hidden; position:relative; aspect-ratio:4/3.1; }
.fphoto img { width:100%; height:100%; object-fit:cover; filter:saturate(1.12) contrast(1.03) brightness(.92); }
.fphoto .tint { position:absolute; inset:0; background:linear-gradient(160deg,rgba(255,46,147,.16),transparent 55%); mix-blend-mode:screen; }
.inline-b { margin-top:12px; display:flex; align-items:center; gap:12px; padding:13px; border-radius:13px; background:var(--sunset-soft); border:1px solid rgba(255,46,147,.22); }
.inline-b .big { font-size:20px; letter-spacing:.08em; }
.inline-b .t { font-size:12px; color:var(--bone-2); } .inline-b .t b { color:var(--bone); font-weight:700; font-family:var(--disp); }
.fact { display:flex; align-items:center; gap:20px; padding:13px 15px; margin-top:4px; }
.fact .a { display:flex; align-items:center; gap:7px; color:var(--bone-3); font-size:12.5px; font-weight:600; }
.fact .a svg { width:19px; height:19px; }
.fact .a.kud.on { color:var(--flame); } .fact .a.kud.on svg { fill:var(--flame); }
.fact .share { margin-left:auto; color:var(--bone-3); }

/* community: going-solo callout */
.solo { position:relative; z-index:5; margin:6px 20px 4px; border-radius:22px; padding:22px 20px 20px; overflow:hidden; background:linear-gradient(150deg, rgba(255,46,147,.16), rgba(157,78,221,.09) 70%); border:1px solid rgba(255,46,147,.32); }
.solo .glow { position:absolute; top:-60px; right:-40px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(255,46,147,.4),transparent 70%); filter:blur(6px); pointer-events:none; }
.solo .eye { position:relative; font-weight:600; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--acid); margin-bottom:9px; }
.solo h3 { position:relative; font-family:var(--disp); font-weight:800; font-size:26px; letter-spacing:-.025em; line-height:1; margin:0 0 8px; }
.solo p { position:relative; font-size:13px; line-height:1.45; color:var(--bone-2); margin:0 0 16px; max-width:300px; }
.solo .opts { position:relative; display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.solo .opt { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:13px; background:rgba(7,5,12,.4); border:1px solid var(--hair); }
.solo .opt .oa { width:36px; height:36px; border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; }
.solo .opt .oi { flex:1; min-width:0; }
.solo .opt .oi .on { font-family:var(--disp); font-weight:700; font-size:14px; }
.solo .opt .oi .os { font-size:10.5px; color:var(--bone-3); margin-top:1px; }
.solo .opt .ob { font-weight:700; font-size:11px; color:#fff; padding:7px 13px; border-radius:999px; background:var(--sunset); border:0; box-shadow:0 5px 14px -5px var(--pink-glow); }
.solo .cta { position:relative; width:100%; font-family:var(--grot); font-weight:700; font-size:13.5px; color:var(--bone); padding:14px; border-radius:14px; border:1px solid var(--hair-2); background:rgba(247,242,234,.05); cursor:pointer; }

/* community: familiar faces */
.fam { position:relative; z-index:5; padding:0 20px; }
.facerow { display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--hair); }
.facerow:last-child { border-bottom:0; }
.facerow .fa { width:46px; height:46px; border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; }
.facerow .fi { flex:1; min-width:0; }
.facerow .fi .fn { font-family:var(--disp); font-weight:700; font-size:15.5px; letter-spacing:-.01em; }
.facerow .fi .fs { font-size:11px; color:var(--bone-3); margin-top:2px; } .facerow .fi .fs b { color:var(--purple-hi); font-weight:600; }
.facerow .wave { font-weight:700; font-size:11.5px; color:var(--pink-hi); padding:8px 14px; border-radius:999px; border:1px solid rgba(255,46,147,.35); background:rgba(255,46,147,.07); white-space:nowrap; }

/* community: scene hosts */
.hostrow { position:relative; z-index:5; display:flex; gap:13px; padding:2px 20px 6px; overflow-x:auto; scrollbar-width:none; }
.hostrow::-webkit-scrollbar { display:none; }
.hostc { flex-shrink:0; width:148px; }
.hostc .hp { position:relative; height:178px; border-radius:18px; overflow:hidden; }
.hostc .hp img { width:100%; height:100%; object-fit:cover; filter:saturate(1.1) brightness(.92); }
.hostc .hp .sc { position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(7,5,12,.9)); }
.hostc .hp .lbl { position:absolute; left:12px; right:12px; bottom:11px; }
.hostc .hp .scene { font-weight:600; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--pink-hi); }
.hostc .hp .hn { font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:-.01em; color:#fff; margin-top:2px; line-height:1; }
.hostc .hp .crewn { font-size:10px; color:rgba(247,242,234,.7); margin-top:3px; }
.hostc .follow { display:block; text-align:center; font-weight:700; font-size:11.5px; color:#fff; padding:10px; margin-top:8px; border-radius:12px; background:var(--sunset); box-shadow:0 5px 14px -6px var(--pink-glow); }

/* community: hosted experiences */
.hxprow { position:relative; z-index:5; display:flex; gap:13px; padding:2px 20px 6px; overflow-x:auto; scrollbar-width:none; }
.hxprow::-webkit-scrollbar { display:none; }
.hxp { flex-shrink:0; width:252px; border-radius:18px; overflow:hidden; background:var(--n2); border:1px solid var(--hair-2); }
.hxp .ph { position:relative; height:116px; }
.hxp .ph img { width:100%; height:100%; object-fit:cover; filter:saturate(1.12) brightness(.9); }
.hxp .ph .sc { position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(21,16,31,.92)); }
.hxp .ph .spots { position:absolute; top:10px; right:10px; font-weight:700; font-size:9.5px; letter-spacing:.06em; padding:5px 9px; border-radius:999px; background:rgba(7,5,12,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); color:#fff; }
.hxp .ph .ha { position:absolute; left:13px; bottom:-16px; width:40px; height:40px; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 0 0 3px var(--n2); }
.hxp .b { padding:22px 14px 15px; }
.hxp .by { font-weight:600; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); }
.hxp .nm { font-family:var(--disp); font-weight:700; font-size:16.5px; letter-spacing:-.01em; margin:2px 0 5px; line-height:1.05; }
.hxp .ds { font-size:11.5px; line-height:1.4; color:var(--bone-2); margin:0 0 13px; min-height:48px; }
.hxp .ft { display:flex; align-items:center; justify-content:space-between; }
.hxp .ft .who { font-size:10.5px; color:var(--pink-hi); font-weight:600; }
.hxp .ft .req { font-family:var(--grot); font-weight:700; font-size:11.5px; color:var(--bone); padding:7px 13px; border-radius:999px; border:1px solid var(--hair-2); background:rgba(247,242,234,.04); }

/* pulse: full nightlife-weather block (sub-screen / module-large) */
.pulse { position:relative; z-index:5; margin:2px 20px 6px; border-radius:20px; padding:18px; background:rgba(247,242,234,.025); border:1px solid var(--hair); }
.pulse .ph { display:flex; align-items:baseline; justify-content:space-between; }
.pulse .ph .t { font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:-.01em; margin:0; }
.pulse .ph .lv { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--pink-hi); display:flex; align-items:center; gap:6px; }
.pulse .ph .lv .d { width:6px; height:6px; border-radius:50%; background:var(--pink); animation:ghpulse 2s infinite; }
.pulse .psub { font-size:12px; color:var(--bone-3); margin:5px 0 14px; }
.afters { display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:12px; background:var(--sunset-soft); border:1px solid rgba(255,46,147,.25); margin-bottom:16px; }
.afters .fire { width:24px; height:24px; border-radius:7px; background:var(--sunset); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 14px -3px var(--pink-glow); }
.afters .fire svg { width:13px; height:13px; }
.afters .txt { font-size:12.5px; color:var(--bone); flex:1; } .afters .txt b { font-weight:700; }
.afters .chev { color:var(--bone-3); }
.hood { display:flex; align-items:center; gap:11px; margin-bottom:12px; } .hood:last-child { margin-bottom:0; }
.hood .nm { width:118px; flex-shrink:0; font-size:12.5px; font-weight:600; color:var(--bone); }
.hood .nm .area { display:block; font-size:9.5px; font-weight:500; color:var(--bone-3); letter-spacing:.04em; }
.hood .bar { flex:1; height:8px; border-radius:999px; background:rgba(247,242,234,.07); overflow:hidden; position:relative; }
.hood .bar i { position:absolute; inset:0; border-radius:999px; background:var(--sunset); }
.hood .stat { width:74px; flex-shrink:0; text-align:right; font-weight:600; font-size:10.5px; letter-spacing:.02em; }
.hood .stat.peak { color:var(--pink-hi); } .hood .stat.build { color:var(--gold); } .hood .stat.wind { color:var(--bone-3); }

/* featured carousel (hero) */
.carousel { position:relative; z-index:5; display:flex; gap:14px; padding:4px 20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.carousel::-webkit-scrollbar{ display:none; }
.carousel .feat { margin:0; flex-shrink:0; width:312px; aspect-ratio:4/4.7; scroll-snap-align:center; }
.cdots { display:flex; gap:6px; justify-content:center; padding:10px 0 2px; }
.cdots i { width:6px; height:6px; border-radius:50%; background:var(--hair-2); transition:width .3s,background .3s; }
.cdots i.on { width:18px; border-radius:999px; background:var(--pink); }

/* horizontal rail of netflix-style cards */
.railh { position:relative; z-index:5; display:flex; gap:13px; padding:2px 20px 6px; overflow-x:auto; scrollbar-width:none; }
.railh::-webkit-scrollbar{ display:none; }
.ncard { flex-shrink:0; width:152px; }
.ncard .ph { position:relative; width:152px; aspect-ratio:4/5; border-radius:14px; overflow:hidden; box-shadow:0 12px 26px rgba(0,0,0,.42); }
.ncard .ph img { width:100%; height:100%; object-fit:cover; filter:saturate(1.12) brightness(.9); }
.ncard .ph .sc { position:absolute; inset:0; background:linear-gradient(180deg,transparent 44%,rgba(7,5,12,.92)); }
.ncard .kb { position:absolute; top:9px; left:9px; width:25px; height:25px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:800; font-size:14px; line-height:1; }
.ncard .kb.orig { background:linear-gradient(150deg,#FFE96B,#F2A60E); color:#2A1F02; box-shadow:0 0 12px -2px var(--gold-glow); }
.ncard .kb.excl { background:linear-gradient(150deg,#8B5CF6,#C084FC); color:#fff; box-shadow:0 0 12px -2px var(--purple-glow); }
.ncard .ph .lbl { position:absolute; left:10px; right:10px; bottom:10px; }
.ncard .ph .nm { font-family:var(--disp); font-weight:700; font-size:15px; line-height:1.02; letter-spacing:-.01em; color:#fff; }
.ncard .ph .mt { font-size:10px; color:rgba(247,242,234,.72); margin-top:3px; }
.ncard .rank { display:none; }
/* trending: rank numeral sits to the LEFT of the card (Netflix Top-10), never over the title */
.ncard.tr { display:flex; align-items:flex-end; gap:1px; width:auto; }
.ncard.tr .rk { font-family:var(--disp); font-weight:800; font-size:90px; line-height:.58; letter-spacing:-.05em; background:var(--sunset); -webkit-background-clip:text; background-clip:text; color:transparent; flex-shrink:0; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.ncard.tr .col { width:138px; flex-shrink:0; }
.ncard.tr .ph { width:138px; }
.ncard .foot { display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.ncard .foot .g { font-size:10.5px; color:var(--bone-2); } .ncard .foot .g b { color:var(--bone); font-weight:600; }
.ncard .foot .pr { font-size:11px; font-weight:700; color:var(--acid); }

/* live-now rail header */
.livehd { position:relative; z-index:5; display:flex; align-items:center; gap:9px; padding:20px 20px 10px; }
.livehd .dot { width:9px; height:9px; border-radius:50%; background:#FF3B30; animation:ghpulse 1.6s infinite; }
.livehd .h { font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-.01em; }

/* private events teaser (locked, gold) */
.ptease { position:relative; z-index:5; margin:14px 20px 4px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,210,61,.3); background:linear-gradient(150deg,rgba(255,210,61,.10),rgba(20,12,30,0)); padding:16px; display:flex; align-items:center; gap:13px; }
.ptease .lk { width:38px; height:38px; border-radius:11px; background:rgba(255,210,61,.14); border:1px solid rgba(255,210,61,.4); display:flex; align-items:center; justify-content:center; color:var(--acid); flex-shrink:0; }
.ptease .lk svg { width:18px; height:18px; }
.ptease .t { flex:1; } .ptease .t .h { font-family:var(--disp); font-weight:700; font-size:16px; } .ptease .t .s { font-size:11.5px; color:var(--bone-3); margin-top:2px; }
.ptease .chev { color:var(--acid); }

/* special category: full-width cinematic feature band */
.feature { position:relative; z-index:5; margin:10px 20px 6px; border-radius:20px; overflow:hidden; aspect-ratio:16/8.6; box-shadow:0 20px 44px rgba(0,0,0,.5); }
.feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) brightness(.66); }
.feature .sc { position:absolute; inset:0; background:linear-gradient(108deg, rgba(7,5,12,.88) 0%, rgba(7,5,12,.5) 52%, rgba(7,5,12,.2) 100%); }
.feature .ct { position:absolute; inset:0; padding:18px 20px; display:flex; flex-direction:column; justify-content:center; }
.feature .ey { font-weight:700; font-size:10px; letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.feature .ey svg { width:14px; height:14px; }
.feature .ey > i[class*="lc-"] { font-size:14px; }
.feature h3 { font-family:var(--disp); font-weight:800; font-size:26px; letter-spacing:-.02em; line-height:1; margin:9px 0 6px; color:#fff; max-width:78%; }
.feature p { font-size:12px; color:rgba(247,242,234,.8); margin:0 0 14px; max-width:72%; line-height:1.4; }
.feature .cta { align-self:flex-start; font-weight:700; font-size:12px; padding:9px 16px; border-radius:999px; display:flex; align-items:center; gap:7px; }
.feature .cta > i[class*="lc-"] { font-size:13px; }
.feature .pulsedot { width:7px; height:7px; border-radius:50%; background:var(--pink); animation:ghpulse 2s infinite; }
.feature.gold .ey { color:var(--acid); } .feature.gold .cta { background:var(--acid); color:var(--acid-ink); box-shadow:0 4px 14px -4px var(--gold-glow); }
.feature.live .ey { color:var(--pink-hi); } .feature.live .cta { background:var(--sunset); color:#fff; box-shadow:0 4px 14px -4px var(--pink-glow); }

/* ---------- 6 · MOTION ---------- */
/* entrance: transform-only so content is ALWAYS visible (survives
   background-tab animation pause, screenshots, PDF, reduced-motion) */
@media (prefers-reduced-motion:no-preference){
  .fu { animation:fu .7s var(--ease) both; }
  .fu1{ animation-delay:.04s; } .fu2{ animation-delay:.12s; } .fu3{ animation-delay:.20s; } .fu4{ animation-delay:.30s; } .fu5{ animation-delay:.40s; } .fu6{ animation-delay:.5s; }
}
@keyframes fu { from { transform:translateY(16px); } to { transform:none; } }