/* =============================================================================
   v5 — one business site, two typefaces, a 4px grid, and no decoration that
   competes with the words. Loaded last so it overrides site.css in place.
   ============================================================================= */

/* ---- 1. two libraries, two families ---------------------------------------- */
:root {
  --font-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Inter Tight", system-ui, sans-serif;   /* labels: same family, tracked out */

  /* 4px grid. Every gap, pad and radius below is a multiple of 4. */
  --u: 4px;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 20px; --r-pill: 999px;
}

/* one family everywhere, weight and size do the work */
body, p, li, td, .prose, input, textarea, select, button {
  font-family: var(--font-body);
  letter-spacing: -.006em;
}
h1, h2, h3, h4, .display, .wordmark { font-family: var(--font-display); }
.label, .kicker, .k, .step-k, .sec-num, .num, .tag, .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* the old sheet reached for mono in a few places; keep them in the same family */
code, pre, .mono, .price-num, .stat-n { font-family: var(--font-body); font-variant-numeric: tabular-nums; }

/* ---- 2. one site: the persona switcher and its modal are gone -------------- */
.nav-who, .gate, #gate, .who-band, [data-gate-open] { display: none !important; }
html.gate-open, body.gate-open { overflow: auto !important; }

/* ---- 3. the wordmark: the name, heavier, and it goes home ------------------ */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.035em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.wordmark .mark { font-size: 15px; color: var(--accent); line-height: 1; }
.wordmark:hover { color: var(--accent); }

/* ---- 4. buttons: no orb inside a pill ------------------------------------- */
.btn { border-radius: var(--r-pill); padding: 14px 24px; gap: var(--s-2); }
.btn .arrow, .btn .orb, .btn i, .btn .dot {
  background: none !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 15px;
  line-height: 1;
  transform: none;
}
/* no cursor-following graphics anywhere */
.cursor, .cursor-dot, .cursor-ring, #cursor, #cursor-dot, .mouse-fx { display: none !important; }

/* ---- 5. section numbering: big enough to navigate by ---------------------- */
.sec-num, .num {
  font-size: 15px;
  color: var(--accent);
  opacity: 1;
}
.sec-head .label { font-size: 12px; }
h2 { letter-spacing: -.028em; }

/* ---- 6. a drop cap opens each section ------------------------------------ */
.dropcap::first-letter,
.sec-head + p::first-letter,
.lede::first-letter {
  font-family: var(--font-display);
  font-size: 3.1em;
  font-weight: 800;
  line-height: .82;
  float: left;
  padding: 2px 8px 0 0;
  color: var(--accent);
}

/* ---- 7. a stat that matters gets a mark ------------------------------- */
.stat-hl, .hl {
  background: linear-gradient(transparent 62%, rgba(200, 85, 61, .22) 62%);
  padding: 0 2px;
  font-weight: 700;
  color: var(--text);
}

/* ---- 8. sticky section tabs -------------------------------------------- */
.sec-tabs {
  position: sticky; top: 68px; z-index: 40;
  display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none;
  padding: var(--s-2) 0;
  margin: 0 0 var(--s-6);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tabs a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sec-tabs a:hover { color: var(--text); background: var(--surface-2); }
.sec-tabs a[aria-current="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* ---- 9. tighter rhythm: every section starts on the grid --------------- */
section { scroll-margin-top: 132px; }
.sec-head { gap: var(--s-6); margin-bottom: var(--s-7); }
.wrap { padding-left: var(--s-5); padding-right: var(--s-5); }

/* ---- 10. hero: smaller word, same weight ----------------------------- */
.hero-grid h1, .hero .display { font-size: clamp(30px, 3.4vw, 46px) !important; line-height: 1.04; letter-spacing: -.035em; }
.hero-price { margin-top: var(--s-5); }

/* ---- 11. the activity line --------------------------------------------- */
.act {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 12.5px; color: var(--muted);
  padding: var(--s-2) 0;
}
.act b { color: var(--text); font-weight: 600; }
.act .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.act[hidden] { display: none; }

/* ---- 12. pricing that opens on click ---------------------------------- */
.tiers .tier { border-radius: var(--r-3); }
.tier[aria-expanded="true"] { border-color: var(--accent); }

@media (max-width: 620px) {
  .sec-tabs { top: 60px; }
  .wordmark { font-size: 19px; }
}

/* ---- 13. nav: two actions, no switcher ---------------------------------- */
.nav-cta { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav-shop {
  display: inline-flex; align-items: center; padding: 10px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); color: var(--text); font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.nav-shop:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 720px) {
  .nav-shop { display: none; }               /* the shop tab covers it on a phone */
  .navlinks { order: 3; flex: 0 0 100%; }
}
.wordmark { text-transform: none !important; letter-spacing: -.035em; }

/* ---- 14. the verdict, in words, bold ----------------------------------- */
.vb-k, .vb-k strong { font-weight: 800; letter-spacing: -.01em; }
.vb-score { display: none !important; }