/* ============================================================
   FRACTA — Phase 0 shared design system
   White/black Airbnb-style with 3D puffy pills. Ported directly
   from the FRACTA app prototype's restyle so this build matches
   current UI work. The animated conic-gradient logo border is the
   one deliberate accent kept from the old cyan/purple system.
   ============================================================ */

@property --logo-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --cyan: #27E6FF;
  --cyan-dim: rgba(39, 230, 255, 0.35);
  --purple: #9B5CFF;
  --purple-soft: #c9a6ff;
  --purple-deep: #6e3bff;
  --bg-0: #F5F5F7;
  --bg-1: #FFFFFF;
  --bg-2: #F1F1F4;
  --bg-3: #E9E9EE;
  --text-0: #15151A;
  --text-1: #3F4550;
  --text-2: #6B7280;
  --text-3: #8C96AB;
  --success: #15803D;
  --warn: #B45309;
  --error: #DC2626;

  --glass-bg: rgba(17, 17, 20, 0.045);
  --glass-border: rgba(17, 17, 20, 0.08);
  --glass-bg-strong: rgba(17, 17, 20, 0.08);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-glow-cyan: 0 12px 34px rgba(17, 17, 20, 0.14);
  --shadow-glow-purple: 0 12px 34px rgba(17, 17, 20, 0.14);
  --shadow-card: 0 1px 2px rgba(17,17,20,.04), 0 8px 24px rgba(17, 17, 20, 0.08);

  /* 3D puffy pill tokens — same language as the FRACTA app */
  --pill-shadow: 0 1px 2px rgba(17,17,20,.05), 0 6px 14px rgba(17,17,20,.09), inset 0 1px 0 rgba(255,255,255,.9);
  --pill-shadow-pressed: 0 1px 1px rgba(17,17,20,.10) inset;
  --pill-bg-selected: #E7E7EB;
  --pill-shadow-selected: inset 0 2px 5px rgba(17,17,20,.20), inset 0 -1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(17,17,20,.04);
}

/* Display face for hero headlines and section titles only — never UI or body copy.
   Impact by choice: it's installed on every Windows and Mac, so there's no font
   file to ship, no CSP exemption needed, and no flash of fallback text on load. */
.display {
  font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.95;
  /* Impact is tightly spaced by default; a touch of tracking stops big headlines
     from looking cramped at display sizes */
  word-spacing: 0.04em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #E7E7EC 0%, #ECECF0 28vh, #F1F1F4 58vh, #F5F5F7 88vh, #F5F5F7 100%);
}

a { color: inherit; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Animated glowing logo box — ported directly from the FRACTA app prototype's
   .logo-box (the pill that just reads "FRACTA"). A slim rotating conic-gradient
   ring sweeps around the box border. Replaces the earlier icon-only version. */
.brand-mark {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 8px;
  background: rgba(17, 17, 20, 0.02);
  color: var(--text-0);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.18em;
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.brand-mark::before {
  background: linear-gradient(135deg, rgba(39, 230, 255, 0.4), rgba(155, 92, 255, 0.4) 55%, rgba(46, 91, 255, 0.4));
}
.brand-mark::after {
  background: conic-gradient(from var(--logo-a), transparent 0 70%, rgba(39, 230, 255, 0.9) 82%, rgba(255, 255, 255, 0.9) 88%, rgba(155, 92, 255, 0.9) 94%, transparent 100%);
  animation: logoWave 3.6s linear infinite;
}
@keyframes logoWave { to { --logo-a: 360deg; } }

.brand-word {
  display: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--text-2);
}

/* Nav items are the app's genre pills, same tokens and same behaviour: every item
   is a raised white pill, and the current one is pressed-in (selected background
   + inset shadow) rather than merely tinted. 44px minimum touch target. */
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #3F4550;
  background: #FFFFFF;
  border: 1px solid rgba(17,17,20,.06);
  box-shadow: var(--pill-shadow);
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(0) scale(1);
  transition: color .18s ease, background .18s ease, border-color .18s ease,
              box-shadow .12s ease, transform .12s ease;
}
.nav-links a:hover { color: var(--text-0); }
.nav-links a:active { transform: translateY(1px) scale(.96); box-shadow: var(--pill-shadow-pressed); }
.nav-links a.on {
  color: var(--text-0); font-weight: 800;
  background: var(--pill-bg-selected) border-box;
  border: 1px solid transparent;
  box-shadow: var(--pill-shadow-selected);
}
/* --pill-shadow ends with `inset 0 1px 0 rgba(255,255,255,.9)` — a white top
   highlight that reads correctly on the white pills but shows as a bright streak
   across a dark one. The dark CTA gets the same depth without that inset. */
.nav-links a.nav-cta {
  margin-left: 6px; color: #FFFFFF; font-weight: 800;
  background: var(--text-0) border-box; border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(17,17,20,.16), 0 6px 14px rgba(17,17,20,.22);
}
.nav-links a.nav-cta:hover {
  color: #FFFFFF; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(17,17,20,.18), 0 10px 22px rgba(17,17,20,.26);
}
.nav-links a.nav-cta:active { box-shadow: 0 1px 2px rgba(17,17,20,.2); }

/* mobile nav */
.nav-burger {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
  background: #FFFFFF; box-shadow: var(--pill-shadow); align-items: center; justify-content: center;
}
.nav-burger svg { width: 19px; height: 19px; stroke: var(--text-0); fill: none; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 820px) {
  .nav-burger { display: inline-flex; }
  .nav-links {
    position: fixed; inset: 78px 0 auto; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px 18px 20px; background: var(--bg-0);
    border-bottom: 1px solid var(--glass-border);
    transform: translateY(-130%); transition: transform .3s cubic-bezier(.22,.75,.28,1);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { min-height: 50px; padding: 0 16px; font-size: 15.5px; border-radius: 14px; }
  .nav-links a.nav-cta { margin: 8px 0 0; justify-content: center; }
}

/* visible focus for keyboard users — restyled, never removed */
:focus-visible { outline: 2.5px solid var(--purple-deep); outline-offset: 3px; border-radius: 6px; }

/* ---------- Glass card ---------- */
.glass {
  background: #FFFFFF;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  font-family: inherit;
}

.btn-primary {
  background: var(--text-0);
  color: #FFFFFF;
  text-shadow: none;
  /* not --pill-shadow: its `inset 0 1px 0 rgba(255,255,255,.9)` highlight is meant
     for white pills and shows as a bright streak across the top of a dark one */
  box-shadow: 0 1px 2px rgba(17,17,20,.16), 0 6px 14px rgba(17,17,20,.22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(17, 17, 20, 0.22); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: #FFFFFF;
  color: var(--text-0);
  border: 1px solid var(--glass-border);
  box-shadow: var(--pill-shadow);
}
.btn-ghost:hover { border-color: rgba(17, 17, 20, 0.2); color: var(--text-0); }

.btn-block { width: 100%; }

/* ---------- Inputs ---------- */
.input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: #FFFFFF;
  color: var(--text-0);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  box-shadow: var(--pill-shadow-pressed);
  transition: border-color 0.15s ease;
}
.input:focus { border-color: rgba(17, 17, 20, 0.3); }
.input::placeholder { color: var(--text-3); }

textarea.input { resize: vertical; min-height: 90px; }

/* ============================================================
   MARKETING PAGES (index / about / app / tv)
   Added on top of the Phase 0 system — same tokens, no new direction.
   ============================================================ */

/* Cinematic hero. The one place the site goes dark: the app is a bright
   object, so this acts as a lightbox for it rather than competing. */
.hero-dark {
  position: relative; overflow: hidden;
  margin: 0 -24px; padding: clamp(64px,10vw,116px) 24px clamp(70px,11vw,124px);
  border-radius: var(--radius-lg);
  background: #0B0C12; color: #F4F7FB; text-align: center;
}
.hero-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% -12%, rgba(39,230,255,.22) 0%, transparent 55%),
    radial-gradient(110% 100% at 10% 4%, rgba(155,92,255,.26) 0%, transparent 58%),
    radial-gradient(90% 90% at 52% 116%, rgba(46,91,255,.20) 0%, transparent 62%);
}
/* faint shard lattice — echoes the crystal F mark without shipping the asset */
.hero-dark::after {
  content: ""; position: absolute; inset: 0; opacity: .09; pointer-events: none;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(-115deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero-dark > * { position: relative; z-index: 2; }
.hero-dark h1 { font-size: clamp(52px,11vw,122px); margin: 20px 0 0; }
.hero-dark .lede {
  max-width: 56ch; margin: 20px auto 0;
  font-size: clamp(15px,2.1vw,18px); line-height: 1.6; color: rgba(244,247,251,.76);
}
/* Dark-surface overrides. Both heroes are listed on every line on purpose: these
   were scoped to .hero-dark alone, so the showcase hero silently inherited the
   light-background eyebrow (dark ink on a pale pill) and vanished against #0B0C12.
   Any new dark hero surface belongs in these selectors too. */
.hero-dark .eyebrow,
.hero-showcase .eyebrow { color: #F4F7FB; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.hero-dark .btn-ghost,
.hero-showcase .btn-ghost { background: rgba(255,255,255,.07); color: #F4F7FB; border-color: rgba(255,255,255,.2); }
.hero-dark .btn-ghost:hover,
.hero-showcase .btn-ghost:hover { background: rgba(255,255,255,.13); }
.hero-dark .btn-primary,
.hero-showcase .btn-primary { background: #F4F7FB; color: #0B0C12; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* accent-tinted hero variants, one per sub-brand (brand rule: only the accent changes) */
.hero-dark.tv::before {
  background: radial-gradient(120% 92% at 76% -12%, rgba(155,92,255,.30) 0%, transparent 56%),
              radial-gradient(110% 100% at 12% 6%, rgba(110,59,255,.26) 0%, transparent 58%);
}

/* section scaffolding */
.psec { padding: clamp(56px,8vw,96px) 0; }
.psec-head { max-width: 62ch; }
.psec-head h2 { font-size: clamp(32px,5.4vw,58px); margin: 12px 0 0; }
.psec-head p { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.psec-head.mid { margin: 0 auto; text-align: center; }

.pgrid { display: grid; gap: 16px; margin-top: 40px; }
.pgrid-4 { grid-template-columns: repeat(4, 1fr); }
.pgrid-3 { grid-template-columns: repeat(3, 1fr); }
.pgrid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1040px) { .pgrid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .pgrid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pgrid-4, .pgrid-3, .pgrid-2 { grid-template-columns: 1fr; } }

.pcard { background: #FFFFFF; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-card);
  transition: transform .18s cubic-bezier(.22,.75,.28,1), box-shadow .18s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(17,17,20,.06), 0 18px 42px rgba(17,17,20,.14); }
.pcard h3 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -.15px; }
.pcard p { margin: 9px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.pcard .pic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: #F1F3F7;
  box-shadow: 0 1px 2px rgba(17,17,20,.06), 0 5px 12px rgba(17,17,20,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.pcard .pic svg { width: 21px; height: 21px; stroke: var(--text-0); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pic.cy { background: linear-gradient(160deg,#BFF3FF,var(--cyan)); }
.pic.cy svg { stroke: #05323C; }
.pic.vi { background: linear-gradient(160deg,#D9C9FF,var(--purple)); }
.pic.vi svg { stroke: #FFFFFF; }
.pic.gd { background: linear-gradient(160deg,#FFE9A8,#F5C044); }
.pic.gd svg { stroke: #6B4708; }
.pic.or { background: linear-gradient(160deg,#FFD6B0,#FF8A3D); }
.pic.or svg { stroke: #5A2A05; }
.pic.gr { background: linear-gradient(160deg,#BFF0D2,#31C56E); }
.pic.gr svg { stroke: #06381D; }
/* real badge art rather than a flat chip — the crystal renders on its own, so no
   tinted background competing with it */
.pcard .pic.badge-pic {
  background: transparent; box-shadow: none; width: 54px; height: 54px; padding: 0;
}
.pcard .pic.badge-pic img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 8px rgba(17,17,20,.26));
}

/* feature split */
.psplit { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; margin-top: 40px; }
@media (max-width: 860px) { .psplit { grid-template-columns: 1fr; gap: 32px; } }
.psplit h3 { font-size: clamp(23px,3.3vw,32px); font-weight: 800; letter-spacing: -.4px; margin: 0; }
.psplit p { margin-top: 13px; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.psplit ul { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.psplit li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; }
.psplit li svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; stroke: var(--text-0); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   LIVE RANK LADDER
   A working recreation of the app's rank progress bar rather than a screenshot,
   so it can actually climb Bronze -> Legend when scrolled into view. Same tier
   colours and same easing as the product.

   The gradient is anchored to the FULL track width (background-size is set to
   the track's pixel width in JS), not to the fill. Set it on the fill normally
   and the whole ramp squashes into whatever's filled, so you'd see the complete
   Bronze-to-Legend transition at 5% progress — which would be meaningless. This
   way the colour at the leading edge genuinely says which tier you're in.
   ============================================================ */
.ladder {
  background: #FFFFFF; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 26px 24px 22px; box-shadow: var(--shadow-card);
}
.ladder-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* colour transition on the rank word so tier changes read as a shift rather than
   a flicker — matched to the slower climb */
.ladder-rank {
  font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 34px; line-height: 1;
  letter-spacing: .02em; transition: color .45s ease;
}
.ladder-score { font-size: 13px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ladder-bar {
  height: 12px; border-radius: 999px; background: rgba(17,17,20,.06);
  margin-top: 16px; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(17,17,20,.10);
}
.ladder-bar > i {
  display: block; height: 100%; width: 0; border-radius: 999px; position: relative;
  background-repeat: no-repeat; background-position: left center;
}
/* thin specular line — reads as metal, not neon */
.ladder-bar > i::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
}
/* crisp leading edge instead of a glow bloom */
.ladder-bar > i::after {
  content: ""; position: absolute; right: 0; top: 1px; bottom: 1px; width: 2px;
  border-radius: 999px; background: rgba(255,255,255,.8);
}
.ladder-ticks { display: flex; justify-content: space-between; margin-top: 10px; }
.ladder-tick {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); transition: color .3s ease;
}
.ladder-tick.hit { color: var(--text-0); }
.ladder-note { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }

/* ============================================================
   SHOWCASE HERO  (v2)
   Two-column hero: copy left, a stylised phone with floating notification
   cards right. The phone screen is built in CSS rather than being a
   screenshot, because the ring needs to animate and a static PNG can't.

   Switch between this and the original centred hero with one line at the top
   of site.js (HERO_VARIANT). Both blocks live in index.html; only one renders.
   ============================================================ */
/* Hidden by default so the showcase hero never flashes before JS sets the
   attribute; site.js then reveals whichever variant is selected. */
.hero-showcase-wrap { display: none; }
body[data-hero="showcase"] .hero-showcase-wrap { display: block; }
body[data-hero="showcase"] .hero-classic { display: none; }
body[data-hero="classic"] .hero-showcase-wrap { display: none; }

.hero-showcase { position: relative; overflow: hidden;
  margin: 0 -24px; padding: clamp(48px,7vw,84px) 24px clamp(52px,8vw,92px);
  border-radius: var(--radius-lg); background: #0B0C12; color: #F4F7FB; }

/* ---------- OFF by default: full-viewport hero ----------
   Tried and rejected. Everything below is inert unless HERO_FULLSCREEN in
   site.js is set to true, which puts data-hero-full="1" on <body>. Kept rather
   than deleted so it's one line to look at again, and gated on the attribute so
   it costs nothing while switched off. */
body[data-hero-full="1"] .hero-showcase {
  min-height: calc(100svh - 96px); display: grid; align-items: center;
  transform-origin: 50% 100%; will-change: transform; }
@media (max-width: 900px) {
  body[data-hero-full="1"] .hero-showcase { min-height: calc(100svh - 80px); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body[data-hero-full="1"] .hero-showcase { animation: heroShrink linear both;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 100%; }
    @keyframes heroShrink {
      from { transform: scale(1);    opacity: 1;   }
      to   { transform: scale(.90);  opacity: .55; }
    }
  }
}

/* scroll cue — only meaningful when the hero fills the window, so it's hidden
   with everything else above */
.hs-cue { display: none; }
body[data-hero-full="1"] .hs-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244,247,251,.42); pointer-events: none;
  animation: hsCueIn 1s cubic-bezier(.22,.75,.28,1) 2.2s both; }
body[data-hero-full="1"] .hs-cue span { display: block; width: 1px; height: 26px;
  background: linear-gradient(180deg, rgba(244,247,251,.5), transparent); }
@keyframes hsCueIn { from { opacity: 0; transform: translate(-50%, -6px); }
                     to   { opacity: 1; transform: translate(-50%, 0); } }
@media (max-height: 700px) { body[data-hero-full="1"] .hs-cue { display: none; } }
.hero-showcase::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 82% -12%, rgba(39,230,255,.20) 0%, transparent 55%),
    radial-gradient(110% 100% at 8% 4%, rgba(155,92,255,.24) 0%, transparent 58%),
    radial-gradient(90% 90% at 50% 118%, rgba(46,91,255,.18) 0%, transparent 62%); }
.hero-showcase::after { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: linear-gradient(115deg, rgba(255,255,255,.5) 1px, transparent 1px),
                    linear-gradient(-115deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: latticeIn 1.8s cubic-bezier(.22,.75,.28,1) both; }

.hs-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px,5vw,64px); align-items: center; max-width: 1000px; margin: 0 auto; }
@media (max-width: 900px) { .hs-grid { grid-template-columns: 1fr; gap: 44px; } .hs-copy { text-align: center; } }

.hs-copy h1 { font-size: clamp(46px,8vw,92px); margin: 18px 0 0; }
.hs-copy .lede { max-width: 42ch; margin: 18px 0 0; font-size: clamp(15px,1.9vw,17.5px);
  line-height: 1.6; color: rgba(244,247,251,.76); }
@media (max-width: 900px) { .hs-copy .lede { margin-inline: auto; } }
.hs-copy .hero-btns { justify-content: flex-start; }
@media (max-width: 900px) { .hs-copy .hero-btns { justify-content: center; } }

/* --- phone + floating cards --- */
.hs-stage { position: relative; display: grid; place-items: center; min-height: 460px; }
.hs-phone { position: relative; width: min(240px,64%); border-radius: 34px; padding: 8px;
  background: linear-gradient(160deg,#2A2C34,#15161C 40%,#0B0C12);
  box-shadow: 0 10px 24px rgba(0,0,0,.4), 0 40px 80px rgba(0,0,0,.5);
  animation: hsPhoneIn 1.2s cubic-bezier(.22,.75,.28,1) .15s both; }
@keyframes hsPhoneIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
.hs-screen { position: relative; border-radius: 27px; overflow: hidden; aspect-ratio: 9/19.5;
  background: #0E1015; padding: 20px 16px; display: flex; flex-direction: column; }
/* notch */
.hs-screen::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 18px; border-radius: 999px; background: #000; }

.hs-top { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.hs-title { font-size: 14px; font-weight: 800; color: #F4F7FB; }
.hs-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 0; overflow: hidden; }
/* The shard PNG has an opaque black background baked in — not transparent. On a
   near-black surface `screen` blending drops the black entirely and keeps the
   glow, which is exactly what this artwork wants. No re-export needed. */
.hs-av img { width: 26px; height: 26px; object-fit: contain; display: block;
  mix-blend-mode: screen; }

/* ring */
.hs-ring { position: relative; display: grid; place-items: center; margin: 18px auto 0; width: 132px; height: 132px; }
.hs-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hs-ring .track { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 9; }
.hs-ring .fill { fill: none; stroke: var(--cyan); stroke-width: 9; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(39,230,255,.45)); }
.hs-ring-val { position: relative; font-family: Impact,'Haettenschweiler',sans-serif; font-size: 30px;
  line-height: 1; color: #F4F7FB; font-variant-numeric: tabular-nums; }
.hs-ring-lab { position: relative; margin-top: 4px; font-size: 7.5px; font-weight: 800;
  letter-spacing: .18em; color: rgba(244,247,251,.6); text-transform: uppercase; }

/* skeleton notification rows */
.hs-rows { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.hs-row { display: flex; align-items: center; gap: 9px; padding: 10px;
  border-radius: 12px; background: rgba(255,255,255,.055); }
.hs-row .ic { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255,255,255,.09); }
.hs-row .ic svg { width: 13px; height: 13px; stroke: #F4F7FB; fill: none; stroke-width: 1.9; }
.hs-row .bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.hs-row .bars i { display: block; height: 5px; border-radius: 999px; background: rgba(255,255,255,.16); }
.hs-row .bars i:first-child { width: 72%; }
.hs-row .bars i:last-child { width: 44%; background: rgba(255,255,255,.10); }

/* floating cards — the bit that only works in a marketing composition */
.hs-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 14px; white-space: nowrap;
  background: rgba(26,28,36,.86); border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: hsCardIn .85s cubic-bezier(.34,1.32,.44,1) both; }
.hs-card .ci { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.09); }
.hs-card .ci svg { width: 15px; height: 15px; stroke: var(--cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs-card .ct { font-size: 12px; font-weight: 800; color: #F4F7FB; line-height: 1.25; }
.hs-card .cs { font-size: 10.5px; color: rgba(244,247,251,.55); margin-top: 2px; }
/* slight overshoot on entry — the "pop" */
@keyframes hsCardIn { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }

/* Wider spacing between the three than before: at ~250ms apart they read as one
   burst, at ~450ms you actually register each notification as it lands, which is
   the whole point of the composition. */
.hs-card.c1 { top: 6%;  left: -6%;  animation-delay: 1.0s; }
.hs-card.c2 { top: 47%; right: -10%; animation-delay: 1.45s; }
.hs-card.c3 { bottom: 8%; left: -2%; animation-delay: 1.9s; }
@media (max-width: 1100px) {
  .hs-card.c1 { left: -2%; } .hs-card.c2 { right: -4%; } .hs-card.c3 { left: 0; }
  .hs-card .ct { font-size: 11px; } .hs-card .cs { font-size: 9.5px; }
}
@media (max-width: 520px) {
  .hs-card.c1 { top: 2%; left: -4%; } .hs-card.c2 { right: -6%; } .hs-card.c3 { bottom: 4%; left: -4%; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-phone, .hs-card, .hero-showcase::after { animation: none; }
  .hero-showcase::after { opacity: .07; }
}

/* ---------- "planned" markers ----------
   Anything not actually built yet is labelled, plainly and in the same visual
   weight as the rest — not hidden in an asterisk. People are being asked for
   money on the Founding page; the feature list has to be trustworthy. */
.soon-tag {
  display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  vertical-align: middle; color: var(--text-2); background: rgba(17,17,20,.07);
}
.soon-dot {
  width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; border-radius: 50%;
  background: rgba(17,17,20,.06); box-shadow: inset 0 0 0 1.5px rgba(17,17,20,.16);
  position: relative;
}
.soon-dot::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px;
  border-radius: 50%; background: var(--text-3);
}
.psplit li em { font-style: normal; color: var(--text-3); font-weight: 700; }

/* A caveat attached to a specific claim, rather than buried in small print at
   the bottom of the page. Same body size as the copy it qualifies — quieter in
   colour, not smaller, so it can't be accused of hiding. */
.pf-note {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: rgba(17,17,20,.035); border: 1px solid rgba(17,17,20,.07);
  color: var(--text-2); font-size: 14.5px; line-height: 1.6;
}
.pf-note .soon-tag { margin-left: 0; margin-right: 8px; background: rgba(17,17,20,.09); }

/* ============================================================
   ACCOUNTS — /login, /register, /reset, /account
   ============================================================ */
.auth-wrap { max-width: 460px; margin: 48px auto 80px; }
.auth-card { padding: 34px 30px; }
.auth-card h1 { font-size: clamp(26px,4vw,32px); font-weight: 800; letter-spacing: -.4px; margin: 14px 0 0; }
.auth-sub { margin: 10px 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* Labels wrap their input so the whole thing is one click target. */
.fld { display: block; margin-bottom: 16px; }
.fld > span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--text-1); }
.fld .input { width: 100%; }
.hint { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }

.auth-alt { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--glass-border);
  font-size: 13.5px; color: var(--text-3); display: flex; gap: 8px; justify-content: center; }
.auth-alt a { color: var(--text-1); text-decoration: underline; text-underline-offset: 2px; }
.auth-alt a:hover { color: var(--text-0); }

.ac-rows { margin-top: 22px; }
.ac-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-top: 1px solid var(--glass-border); font-size: 14px; }
.ac-k { color: var(--text-2); }
.ac-v { color: var(--text-0); font-weight: 700; text-align: right; }
.ac-h { font-size: 14px; font-weight: 800; margin: 24px 0 2px; }
.ac-h2 { font-size: 19px; font-weight: 800; margin: 12px 0 0; }

.tfa-qr { display: block; width: 200px; height: 200px; margin: 6px 0 16px;
  border-radius: 12px; background: #fff; padding: 8px; }
.tfa-secret { display: inline-block; margin-top: 6px; padding: 7px 10px; border-radius: 8px;
  background: rgba(17,17,20,.06); font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 13px; letter-spacing: .06em; word-break: break-all; }
/* Backup codes are meant to be copied or written down — monospace, roomy,
   and laid out so a missed character is obvious. */
.tfa-codes { list-style: none; padding: 0; margin: 16px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tfa-codes li { padding: 9px 11px; border-radius: 8px; background: rgba(17,17,20,.05);
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 13.5px;
  letter-spacing: .04em; text-align: center; user-select: all; }

/* The codes panel and the "turn it off" form were running straight into each
   other, which made a legitimate one-time secret look like a rendering fault.
   Separate them properly. */
.tfa-codes-panel { margin-top: 20px; padding: 20px; border-radius: 14px;
  background: rgba(17,17,20,.03); border: 1px solid var(--glass-border); }
.tfa-off-panel { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--glass-border); }

/* ============================================================
   FOUNDING MEMBER CONFIRMATION  (/success)

   Restraint is the whole strategy here. Confetti and exclamation marks read as
   cheap; a dark stage, one very large number and slow motion read as earned.
   The founding number is the product, so it gets the space.
   ============================================================ */
.fm-stage { margin: 34px 0 80px; }
.fm-checking { text-align: center; color: var(--text-2); font-size: 15px; padding: 80px 0; }

.fm-panel {
  position: relative; overflow: hidden;
  margin: 0 -24px; padding: clamp(44px,6vw,72px) clamp(24px,5vw,56px);
  border-radius: var(--radius-lg);
  background: #0B0C12; color: #F4F7FB; text-align: center;
}
/* Same light bloom as the showcase hero, so this feels like the same product
   rather than a separate receipt page. */
.fm-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(39,230,255,.20) 0%, transparent 58%),
    radial-gradient(80% 70% at 12% 8%, rgba(155,92,255,.18) 0%, transparent 60%),
    radial-gradient(80% 80% at 88% 100%, rgba(46,91,255,.16) 0%, transparent 62%);
}
.fm-panel > * { position: relative; z-index: 2; }

/* badge */
.fm-badge-wrap { margin-bottom: 22px; }
.fm-badge { width: 128px; height: 128px; object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)); }

.fm-eyebrow {
  margin: 0 0 30px; font-size: 12px; font-weight: 800; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(244,247,251,.66);
}

/* The number. Deliberately enormous — it's the thing they bought. */
.fm-number-block { margin: 0 0 30px; }
.fm-number-label {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(244,247,251,.45);
}
.fm-number {
  font-family: Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  font-size: clamp(84px,17vw,168px); line-height: .92; letter-spacing: .01em;
  color: #FFFFFF; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(39,230,255,.30);
  transition: text-shadow .8s ease;
}
/* Glow settles once counting stops — a small "it's landed" cue. */
.fm-number-settled { text-shadow: 0 0 90px rgba(39,230,255,.5), 0 0 26px rgba(39,230,255,.22); }
.fm-position {
  margin: 12px 0 0; font-size: 13.5px; letter-spacing: .04em;
  color: rgba(244,247,251,.55);
}

/* The thank-you sits above the practical line and is given more weight —
   it's the human bit, and it shouldn't read as small print. */
.fm-thanks {
  max-width: 48ch; margin: 0 auto 18px; font-size: 16.5px; line-height: 1.65;
  color: #F4F7FB;
}
.fm-line {
  max-width: 46ch; margin: 0 auto; font-size: 15.5px; line-height: 1.65;
  color: rgba(244,247,251,.7);
}

.fm-handle {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px;
  padding: 11px 18px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
.fm-handle-k { font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(244,247,251,.5); }
.fm-handle-v { font-size: 15px; font-weight: 800; color: #F4F7FB; }
.fm-handle-todo { border-color: rgba(39,230,255,.35); background: rgba(39,230,255,.08); }
.fm-handle-link { font-size: 15px; font-weight: 800; color: var(--cyan); text-decoration: none; }
.fm-handle-link:hover { text-decoration: underline; }

/* claim-your-username panel on /account */
.claim-panel { margin-top: 22px; padding: 20px; border-radius: 14px;
  background: rgba(39,230,255,.05); border: 1px solid rgba(39,230,255,.22); }

.fm-perks { max-width: 420px; margin: 34px auto 0; text-align: left; }
.fm-perk { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.09); font-size: 14.5px; line-height: 1.55;
  color: rgba(244,247,251,.82); }
.fm-perk:first-child { border-top: 0; }
.fm-perk-tick { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(39,230,255,.14); }
.fm-perk-tick svg { width: 11px; height: 11px; stroke: var(--cyan); fill: none;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.fm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.fm-panel .btn-primary { background: #F4F7FB; color: #0B0C12; }
.fm-panel .btn-ghost { background: rgba(255,255,255,.07); color: #F4F7FB;
  border-color: rgba(255,255,255,.2); }
.fm-panel .btn-ghost:hover { background: rgba(255,255,255,.13); }

.fm-receipt { margin: 26px 0 0; font-size: 12.5px; color: rgba(244,247,251,.45); }

.fm-panel-error { text-align: center; }
.fm-error-h { font-size: clamp(24px,4vw,32px); font-weight: 800; margin: 0 0 14px;
  letter-spacing: -.4px; }

/* Staggered arrival. Slower than the site's usual reveals — this is a moment,
   not a page load. */
/* Keyed off .fm-play, added by success.js after a forced reflow. Keying them
   off `:not(.hide)` looked right but didn't fire — an element revealed from
   display:none isn't guaranteed to run its animations, because the browser can
   treat it as having always been in the final state. */
@media (prefers-reduced-motion: no-preference) {
  #success-state.fm-play .fm-badge-wrap   { animation: fmIn 1s cubic-bezier(.22,.75,.28,1) both; }
  #success-state.fm-play .fm-eyebrow      { animation: fmIn 1s cubic-bezier(.22,.75,.28,1) .18s both; }
  #success-state.fm-play .fm-number-block { animation: fmIn 1.1s cubic-bezier(.22,.75,.28,1) .34s both; }
  #success-state.fm-play .fm-thanks       { animation: fmIn 1s cubic-bezier(.22,.75,.28,1) .9s both; }
  #success-state.fm-play .fm-line         { animation: fmIn 1s cubic-bezier(.22,.75,.28,1) 1.05s both; }
  #success-state.fm-play .fm-handle       { animation: fmIn 1s cubic-bezier(.22,.75,.28,1) 1.2s both; }
  #success-state.fm-play .fm-perks        { animation: fmIn 1s cubic-bezier(.22,.75,.28,1) 1.35s both; }
  #success-state.fm-play .fm-actions      { animation: fmIn 1s cubic-bezier(.22,.75,.28,1) 1.5s both; }
  #success-state.fm-play .fm-receipt      { animation: fmIn 1s cubic-bezier(.22,.75,.28,1) 1.65s both; }
}
@keyframes fmIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Skip link — off-screen until it receives keyboard focus, then it sits in
   the top-left like a normal button. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 18px; border-radius: 0 0 10px 0; background: var(--text-0);
  color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.skip-link:focus { left: 0; }

/* ---------- tier states once you already hold a membership ----------
   Locked cards are dimmed but still readable — someone should be able to see
   what the other tiers offer, they just can't stack them. Fully hiding them
   would look like the tiers had sold out. */
.tier-card.tier-locked { opacity: .5; filter: saturate(.35); }
.tier-card.tier-locked:hover { transform: none; box-shadow: var(--shadow-card); }
.tier-card.tier-locked .btn { background: rgba(17,17,20,.14); color: var(--text-3);
  box-shadow: none; cursor: not-allowed; }

/* The one they own gets the opposite treatment — lifted, not dimmed. */
.tier-card.tier-mine { border-color: rgba(15,122,61,.4);
  box-shadow: 0 2px 6px rgba(17,17,20,.06), 0 16px 40px rgba(15,122,61,.16); }
.tier-card.tier-mine .btn { background: #0F7A3D; color: #fff; cursor: default; }
.tier-badge-mine { background: #0F7A3D; color: #fff; }

.tier-state { margin: 12px 0 14px; padding: 11px 13px; border-radius: 10px;
  background: rgba(17,17,20,.05); font-size: 12.5px; line-height: 1.55;
  color: var(--text-2); text-align: left; }
.tier-state-mine { background: rgba(15,122,61,.08); color: #0F7A3D; }
.tier-state a { color: inherit; text-decoration: underline; }

/* purchases */
.ac-purchase { padding: 14px 16px; border-radius: 12px; background: rgba(17,17,20,.04);
  border: 1px solid var(--glass-border); margin-top: 12px; }
.ac-purchase-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ac-purchase-tier { font-weight: 800; font-size: 15px; color: var(--text-0); }
.ac-purchase-num { font-family: Impact,Haettenschweiler,sans-serif; font-size: 22px;
  color: var(--text-0); letter-spacing: .02em; }
.ac-purchase-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-3); }

/* Destructive actions sit behind a disclosure rather than in the open — a
   permanent delete shouldn't be one stray click away. */
.danger-details { margin-top: 16px; border: 1px solid rgba(200,30,30,.22); border-radius: 12px;
  background: rgba(200,30,30,.03); }
.danger-details > summary { padding: 13px 16px; cursor: pointer; font-size: 14px;
  font-weight: 700; color: #B3261E; list-style: none; }
.danger-details > summary::-webkit-details-marker { display: none; }
.danger-details > summary::before { content: "▸ "; }
.danger-details[open] > summary::before { content: "▾ "; }
.danger-details > form { padding: 0 16px 16px; }
.btn-danger { background: #B3261E; color: #fff; border: 0; }
.btn-danger:hover { background: #8F1D17; }

/* legal pages */
.legal { max-width: 720px; margin: 44px auto 90px; }
.legal h1 { font-size: clamp(30px,5vw,40px); font-weight: 800; letter-spacing: -.6px; margin: 14px 0 6px; }
.legal h2 { font-size: 19px; font-weight: 800; margin: 34px 0 10px; }
.legal h3 { font-size: 15.5px; font-weight: 800; margin: 22px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; color: var(--text-1); }
.legal ul { padding-left: 20px; margin: 10px 0; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--text-0); text-decoration: underline; text-underline-offset: 2px; }
.legal-date { color: var(--text-3); font-size: 13.5px; margin: 0 0 24px; }
.legal .notice { margin-bottom: 28px; }

/* nav "Sign in" / name */
.nav-account { font-weight: 700; }
.nav-account.on { color: var(--text-0); }

/* checkout identity block */
.co-who { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--glass-border); font-size: 13.5px; }
.co-k { color: var(--text-2); }
.co-v { color: var(--text-0); font-weight: 700; text-align: right; word-break: break-word; }
.co-who + .fld { margin-top: 18px; }

.mt-8 { margin-top: 8px; }

/* ---------- source citations ----------
   Deliberately understated. A claim about a named competitor needs to be
   checkable, but the links shouldn't compete with the copy they support. */
.psrc { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.psrc a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.psrc a:hover { color: var(--text-0); }

/* ---------- Platforms cards ---------- */
.pcard.plat { position: relative; display: block; text-decoration: none; color: inherit; }
a.pcard.plat:focus-visible { outline: 2px solid var(--text-0); outline-offset: 3px; }
/* Not-yet-open channels are visibly quieter, so the two you can actually click
   read as the primary action without needing a label to say so. They also lose
   the hover lift — a card that rises under the cursor but does nothing when
   clicked is a small lie. */
.pcard.plat.soon { opacity: .62; }
.pcard.plat.soon:hover { transform: none; box-shadow: var(--shadow-card); }

/* Selector has to out-specify `.pcard .pic svg`, which sets `fill:none` and a
   stroke for the line icons used everywhere else. These are official brand
   glyphs — solid filled paths — so they'd render as empty outlines under that
   rule. `.pcard .pic.plat-ic svg` (0,3,1) beats it (0,2,1). */
.pcard .pic.plat-ic svg { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.plat-ic.discord { color: #5865F2; }
.plat-ic.instagram { color: #E1306C; }
.plat-ic.tiktok { color: #111114; }
.plat-ic.youtube { color: #FF0000; }

.plat-tag {
  position: absolute; top: 20px; right: 20px; padding: 4px 9px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); background: rgba(17,17,20,.07);
}
.plat-tag.live { color: #0F7A3D; background: rgba(15,122,61,.10); }

.plat-go {
  display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700;
  color: var(--text-1); letter-spacing: .01em;
}
.plat-go::after { content: " ↗"; font-weight: 400; }
.plat-go.muted { color: var(--text-3); }
.plat-go.muted::after { content: ""; }

/* phone frame for app screenshots */
/* Bezel is a uniform 9px on all four sides, so the screen sits symmetrically in
   the frame. aspect-ratio matches the captures closely enough that `cover` trims
   ~1% rather than cropping anything meaningful. */
.phone { width: min(290px, 78%); margin: 0 auto; border-radius: 38px; padding: 9px; background: #0B0C12;
  box-shadow: 0 8px 20px rgba(17,17,20,.18), 0 32px 70px rgba(17,17,20,.28); }
.phone-in { border-radius: 30px; overflow: hidden; aspect-ratio: 9/19.5; position: relative;
  display: block; line-height: 0; }
/* Screenshot fitting.
   All captures are now taken from the scrollbar-free prototype at a consistent
   ~440x944, against a 9:19.5 frame. `cover` (not `contain`) so the screen fills
   the bezel with no letterbox banding; the ~1% aspect difference crops an
   invisible sliver rather than showing a border. Anchored top so that if anything
   is trimmed it's the very bottom, never the header. */
.phone-in img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
/* nothing should ever show through behind the screen */
.phone-in { background: #0B0C12; }
.phone-ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  font-size: 12.5px; color: var(--text-3); line-height: 1.55; }

/* sub-brand row — same box, only the accent changes (brand rule) */
.pbrands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; }
@media (max-width: 860px) { .pbrands { grid-template-columns: 1fr 1fr; } }
.pbrand { position: relative; display: block; padding: 24px 20px; border-radius: var(--radius-md);
  background: #FFFFFF; border: 1px solid var(--glass-border); box-shadow: var(--shadow-card);
  text-decoration: none; transition: transform .18s, box-shadow .18s; }
.pbrand:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(17,17,20,.06), 0 18px 42px rgba(17,17,20,.14); }
.pbrand .pb-accent { position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 3px 3px; }
.pbrand.app  .pb-accent { background: var(--cyan); }
.pbrand.tv   .pb-accent { background: var(--purple); }
.pbrand.rec  .pb-accent { background: #31C56E; }
.pbrand.evt  .pb-accent { background: #FF8A3D; }
.pbrand .pb-name { font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 23px; letter-spacing: .04em; }
.pbrand .pb-desc { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.pbrand .pb-tag { position: absolute; top: 16px; right: 16px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
  background: rgba(17,17,20,.06); color: var(--text-2); }
.pbrand .pb-tag.live { background: rgba(49,197,110,.16); color: #0F7A54; }

/* stat strip */
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 640px) { .pstats { grid-template-columns: 1fr; } }
.pstat { background: #FFFFFF; border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  padding: 24px; box-shadow: var(--shadow-card); }
.pstat .k { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.pstat .v { font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 46px; line-height: 1; margin-top: 8px; }
.pstat .d { font-size: 13px; color: var(--text-2); margin-top: 8px; line-height: 1.5; }

/* dark CTA band */
.pband { position: relative; overflow: hidden; background: #0B0C12; color: #F4F7FB;
  border-radius: var(--radius-lg); padding: clamp(40px,6.5vw,72px) clamp(24px,5vw,56px); text-align: center; }
.pband::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 130% at 82% -20%, rgba(39,230,255,.24) 0%, transparent 56%),
              radial-gradient(110% 130% at 14% 8%, rgba(155,92,255,.26) 0%, transparent 56%); }
.pband > * { position: relative; z-index: 2; }
.pband h2 { font-size: clamp(30px,5vw,54px); margin: 0; }
.pband p { max-width: 50ch; margin: 15px auto 0; font-size: 15.5px; line-height: 1.6; color: rgba(244,247,251,.74); }
.pband .btn-primary { background: #F4F7FB; color: #0B0C12; }

/* ---------- single-page routing ----------
   The whole site is one file with hash routes (#home, #about...). That means it
   works identically double-clicked from disk and served by Express — no server
   needed just to look at it, and no absolute paths to break. */
.route { display: none; }
.route.active { display: block; animation: routeIn .34s cubic-bezier(.22,.75,.28,1); }
@keyframes routeIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .route.active { animation: none; } }

/* ---------- motion ----------
   House rules, kept deliberately tight:
   · one easing curve everywhere — cubic-bezier(.22,.75,.28,1), the same one the
     app's rank bar and chart use, so product and site move alike
   · two speeds, and the distinction matters:
       RESPONSE  120–220ms — anything answering a click or hover. Fast, because
                 the user is waiting on it and latency reads as lag.
       ARRIVAL   0.7–1.2s  — content appearing on its own. Slow, because nobody
                 is waiting on it and speed just makes it flicker past unseen.
     The two used to be lumped together at ~340ms, which was too slow for the
     first and far too quick for the second.
   · motion carries meaning (arrival, state change, hierarchy) — nothing loops,
     nothing pulses, nothing floats for decoration
   · transform and opacity only, so it stays on the compositor and never janks
*/

/* hero headline settles in one beat rather than word-by-word */
.hero-dark h1 { animation: heroIn .95s cubic-bezier(.22,.75,.28,1) both; }
.hero-dark .eyebrow { animation: heroIn .8s cubic-bezier(.22,.75,.28,1) both; }
.hero-dark .lede { animation: heroIn .95s cubic-bezier(.22,.75,.28,1) .16s both; }
.hero-dark .hero-btns { animation: heroIn .95s cubic-bezier(.22,.75,.28,1) .3s both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* showcase hero copy arrives on the same beats, so the left column doesn't just
   sit there while the phone and cards animate on the right */
.hs-copy .eyebrow { animation: heroIn .8s cubic-bezier(.22,.75,.28,1) both; }
.hs-copy h1 { animation: heroIn .95s cubic-bezier(.22,.75,.28,1) .08s both; }
.hs-copy .lede { animation: heroIn .95s cubic-bezier(.22,.75,.28,1) .22s both; }
.hs-copy .hero-btns { animation: heroIn .95s cubic-bezier(.22,.75,.28,1) .36s both; }

/* the shard lattice drifts once on entry and then stops — establishes depth
   without becoming a screensaver */
.hero-dark::after { animation: latticeIn 1.8s cubic-bezier(.22,.75,.28,1) both; }
@keyframes latticeIn { from { opacity: 0; transform: scale(1.06); } to { opacity: .09; transform: none; } }

/* cards lift on hover; the icon chip lifts very slightly further, which reads as
   parallax rather than as a separate effect */
.pcard .pic { transition: transform .22s cubic-bezier(.22,.75,.28,1); }
.pcard:hover .pic { transform: translateY(-2px); }

/* sub-brand accent bar draws in from the left on hover */
.pbrand .pb-accent { transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.75,.28,1); }
.pbrand:hover .pb-accent, .pbrand:focus-visible .pb-accent { transform: scaleX(1); }

/* buttons: press feedback that matches the app's pill language */
.btn { transition: transform .14s cubic-bezier(.22,.75,.28,1), box-shadow .14s ease, background .14s ease, opacity .14s ease; }
.btn:active { transform: translateY(1px) scale(.985); }

/* tier cards arrive staggered once painted */
.tier-card { animation: tierIn .75s cubic-bezier(.22,.75,.28,1) both; }
.tier-card:nth-child(2) { animation-delay: .1s; }
.tier-card:nth-child(3) { animation-delay: .2s; }
.tier-card:nth-child(4) { animation-delay: .3s; }
@keyframes tierIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-dark h1, .hero-dark .eyebrow, .hero-dark .lede, .hero-dark .hero-btns,
  .hs-copy h1, .hs-copy .eyebrow, .hs-copy .lede, .hs-copy .hero-btns,
  .hero-dark::after, .tier-card { animation: none; }
  .hero-dark::after { opacity: .09; }
}

/* scroll reveal — opacity/transform only, so it degrades to plain visible if JS never runs */
.reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.22,.75,.28,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 40px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-0);
  background: rgba(17, 17, 20, 0.06);
  border: 1px solid rgba(17, 17, 20, 0.1);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.hero h1 .accent {
  color: var(--text-0);
}

/* Flattened — was a moving gradient on "Fame." in the hero headline */
.accent-flow {
  color: var(--text-0);
}

.hero p {
  font-size: 18px;
  color: var(--text-1);
  max-width: 560px;
  margin: 0 auto 34px;
  line-height: 1.55;
}

/* ---------- Waitlist form ---------- */
.waitlist-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px;
}

.form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.form-row .input { flex: 1 1 220px; }

.role-select {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.role-chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: #FFFFFF;
  color: var(--text-2);
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: var(--pill-shadow);
  transition: all 0.15s ease;
}
.role-chip.active {
  border-color: transparent;
  color: var(--text-0);
  background: var(--pill-bg-selected);
  box-shadow: var(--pill-shadow-selected);
}

.form-msg {
  margin-top: 14px;
  font-size: 14px;
  min-height: 20px;
}
.form-msg.ok { color: var(--success); }
.form-msg.err { color: var(--error); }

.count-line {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-3);
}

/* ---------- Hero: waitlist + founding side-by-side ---------- */
.hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 940px;
  margin: 0 auto;
  align-items: stretch;
  text-align: left;
}
@media (max-width: 800px) {
  .hero-cards { grid-template-columns: 1fr; }
}

.hero-cards .waitlist-card {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.founding-teaser-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.founding-teaser-card .eyebrow { margin-bottom: 14px; }

.founding-teaser-card h3 {
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 8px;
}

.founding-teaser-card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 18px;
}

.founding-badges-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.founding-badges-row img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(17, 17, 20, 0.18));
}
.founding-badges-row .badges-caption {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}

.founding-teaser-card .btn { margin-top: auto; }

/* ---------- Sections ---------- */
.section {
  padding: 56px 0;
}

.section-head {
  text-align: center;
  margin-bottom: 42px;
}

.section-head .eyebrow { margin-bottom: 16px; }

.section-head h2 {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  margin: 0 0 12px;
}

.section-head p {
  color: var(--text-2);
  max-width: 560px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.6;
}

/* ---------- Feature grid ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }

.feature-card {
  padding: 26px 24px;
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  overflow: hidden;
}
.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.feature-icon.badge-icon {
  background: none;
  width: 60px;
  height: 60px;
}
.feature-icon.badge-icon img {
  padding: 0;
  filter: drop-shadow(0 4px 10px rgba(17, 17, 20, 0.2));
}

.feature-card h3 {
  font-size: 17px;
  margin: 0 0 8px;
  font-weight: 700;
}
.feature-card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

/* ---------- Tier cards (founding) ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 1100px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tier-grid { grid-template-columns: 1fr; } }

.tier-card {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}

.tier-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--logo-a, 0deg), transparent 0 65%, rgba(39, 230, 255, 0.9) 80%, rgba(255, 255, 255, 0.85) 87%, rgba(155, 92, 255, 0.9) 93%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: logoWave 4.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}

.tier-card:hover {
  transform: translateY(-10px) scale(1.035);
  box-shadow: 0 30px 70px rgba(17, 17, 20, 0.18), 0 0 0 1px rgba(17, 17, 20, 0.04);
  border-color: rgba(17, 17, 20, 0.16);
}

.tier-card:hover::before {
  opacity: 1;
}

.tier-card.featured {
  border-color: rgba(17, 17, 20, 0.16);
  box-shadow: var(--shadow-card);
}

.tier-bg-badge {
  position: absolute;
  inset: -12%;
  background-size: 62%;
  background-position: center 58%;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(1px) saturate(1.4);
  transform: scale(0.82) rotate(-6deg);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}

.tier-card:hover .tier-bg-badge {
  opacity: 0.22;
  transform: scale(1.18) rotate(-2deg);
}

.tier-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tier-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--text-0);
  padding: 5px 11px;
  border-radius: 999px;
  z-index: 3;
}

.tier-badge-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 10px rgba(17, 17, 20, 0.2));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.tier-card:hover .tier-badge-img {
  transform: scale(1.08) translateY(-2px);
}

.tier-name {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
}

.tier-price {
  font-size: 38px;
  font-weight: 800;
  margin: 6px 0 4px;
  color: var(--text-0);
}
.tier-price span {
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
}

.tier-blurb {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 10px 0 18px;
}

.tier-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
}
.tier-perks li {
  font-size: 13.5px;
  color: var(--text-1);
  padding: 7px 0;
  border-top: 1px solid var(--glass-border);
  display: flex;
  gap: 8px;
}
.tier-perks li:first-child { border-top: none; }
.tier-perks li::before {
  content: "✓";
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

.tier-avail {
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 14px;
}
.tier-avail strong { color: var(--text-1); }

.tier-avail.low strong { color: var(--warn); }
.tier-avail.soldout strong { color: var(--error); }

/* ---------- Checkout modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 20, 0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }

.modal {
  max-width: 420px;
  width: 100%;
  padding: 30px;
  position: relative;
  transition: max-width 0.25s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
}

.modal h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.modal p.sub { color: var(--text-2); font-size: 13.5px; margin: 0 0 20px; }

.modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.modal:has(.modal-pro-panel:not(.hide)) {
  max-width: 900px;
}
.modal:has(.modal-pro-panel:not(.hide)) .modal-grid {
  grid-template-columns: 1fr 1.1fr;
  gap: 30px;
}
@media (max-width: 780px) {
  .modal:has(.modal-pro-panel:not(.hide)) { max-width: 460px; }
  .modal:has(.modal-pro-panel:not(.hide)) .modal-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.modal-pro-panel {
  border-right: 1px solid var(--glass-border);
  padding-right: 30px;
}
@media (max-width: 720px) {
  .modal-pro-panel {
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
    padding-right: 0;
    padding-bottom: 24px;
  }
}

.modal-pro-panel .eyebrow { margin-bottom: 12px; }
.modal-pro-panel h3 { font-size: 18px; }

.modal-pro-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.modal-pro-list li {
  font-size: 13.5px;
  color: var(--text-1);
  padding: 7px 0;
  border-top: 1px solid var(--glass-border);
  display: flex;
  gap: 8px;
}
.modal-pro-list li:first-child { border-top: none; }
.modal-pro-list li::before {
  content: "✓";
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

.modal-checkout-panel { min-width: 0; }

#checkout-stripe-mount {
  min-height: 320px;
}
#checkout-stripe-mount:empty::before {
  content: "Loading secure payment window...";
  display: block;
  color: var(--text-3);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}

/* ---------- Footer ---------- */
.footer {
  padding: 40px 0 60px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover { color: var(--text-0); }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.hide { display: none !important; }

.notice {
  border: 1px solid rgba(180, 83, 9, 0.25);
  background: rgba(180, 83, 9, 0.08);
  color: var(--warn);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 24px;
}

/* ---------- Admin ---------- */
.admin-shell { padding: 30px 0 60px; }

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.admin-tab {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: #FFFFFF;
  color: var(--text-2);
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: var(--pill-shadow);
}
.admin-tab.active {
  color: var(--text-0);
  border-color: transparent;
  background: var(--pill-bg-selected);
  box-shadow: var(--pill-shadow-selected);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 800px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  padding: 20px;
}
.stat-num { font-size: 30px; font-weight: 800; }
.stat-label { font-size: 12.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }

.table-wrap {
  overflow-x: auto;
  padding: 6px;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 14px 10px;
}
.admin-search { max-width: 320px; padding: 10px 14px; font-size: 13.5px; }
.admin-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-toolbar-actions .btn { padding: 9px 16px; font-size: 13px; }

#panel-broadcast code {
  background: rgba(17, 17, 20, 0.06);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.9em;
}
#panel-broadcast textarea.input { font-family: inherit; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data-table th, table.data-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}
table.data-table th {
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}
table.data-table tr:last-child td { border-bottom: none; }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pill.paid { background: rgba(21, 128, 61, 0.12); color: var(--success); }
.pill.pending { background: rgba(180, 83, 9, 0.12); color: var(--warn); }
.pill.open { background: rgba(220, 38, 38, 0.12); color: var(--error); }
.pill.resolved { background: rgba(107, 114, 128, 0.14); color: var(--text-2); }

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  max-width: 380px;
  width: 100%;
  padding: 34px 30px;
}
.login-card h1 {
  font-size: 22px;
  margin: 0 0 6px;
  text-align: center;
}
.login-card p.sub {
  text-align: center;
  color: var(--text-2);
  font-size: 13.5px;
  margin: 0 0 26px;
}