/* ===========================================================================
   iVenza landing: dark brand theme
   Brand tokens mirror src/constants/theme.ts (red #E11D2A on near-black #0B0B0F).
   =========================================================================== */

:root {
  --red: #E11D2A;
  --red-bright: #FF3B49;
  /* Deep stop for filled buttons: every pixel of the gradient must keep white
     text at >= 4.5:1 (WCAG 1.4.3), which --red-bright (3.5:1) fails. */
  --red-deep: #C81424;
  --bg: #0B0B0F;
  --bg-elev: #17181C;
  --bg-2: #26282E;
  --border: #26282E;
  --border-soft: rgba(255, 255, 255, 0.08);
  --text: #FFFFFF;
  --text-2: #9BA1AD;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --pill: 999px;

  --maxw: 1140px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: 'Spline Sans', Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ----------------------------------------------------------------- reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The UA rule for `hidden` is `[hidden] { display: none }`, and ANY author rule
   setting `display` outranks it no matter how weak its selector - so a plain
   `.card { display: flex }` silently resurrects an element the JS just hid.
   That has bitten this site repeatedly (blog filter, gallery arrows, share
   button, and both public forms, where the success card showed before anyone
   had submitted and the form never hid after). Assert it once, globally, so
   `el.hidden = true` is reliable everywhere; reveal with `:not([hidden])`. */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.muted { color: var(--text-2); }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--red); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------------- brand mark */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.brand__word { font-size: 1.25rem; letter-spacing: -0.01em; }

.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(160deg, var(--red-bright), var(--red));
  box-shadow: 0 6px 18px -6px rgba(225, 29, 42, 0.6);
}
.brand-mark .flame { width: 60%; height: 60%; fill: #fff; }
.brand-mark--sm { width: 26px; height: 26px; border-radius: 8px; }
.brand__logo { width: 173px; height: 50px; display: block; flex: none; object-fit: contain; }
.footer__logo { width: 106px; height: 40px; display: block; flex: none; object-fit: contain; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 0.98rem; line-height: 1;
  padding: 13px 22px; border-radius: var(--pill); border: 1px solid transparent;
  cursor: pointer; transition: transform 0.15s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); white-space: nowrap;
}
.btn--sm { padding: 9px 16px; font-size: 0.9rem; }
.btn--lg { padding: 16px 28px; font-size: 1.05rem; }
/* A long label (a blog post's "Next: ..." CTA, "Book a walkthrough with the founder") used to
   run straight past the right edge of a phone and drag the whole page sideways with it - the
   nowrap above cannot yield, so the button just got wider than the screen. Below phone width
   let the label wrap instead; everywhere it fits, buttons stay on one line as before. */
.btn { max-width: 100%; }
@media (max-width: 640px) {
  .btn { white-space: normal; line-height: 1.25; }
}

.btn--primary {
  background: linear-gradient(160deg, var(--red), var(--red-deep));
  color: #fff; box-shadow: 0 10px 30px -10px rgba(225, 29, 42, 0.7);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(225, 29, 42, 0.85); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.04); color: var(--text); border-color: var(--border-soft);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

/* ----------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), backdrop-filter 0.25s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(11, 11, 15, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav__links { display: flex; align-items: center; gap: 28px; flex: none; }
.nav__links > a { white-space: nowrap; }
.nav__links > a:not(.btn) { color: var(--text-2); font-weight: 500; font-size: 0.96rem; transition: color 0.18s; }
.nav__links > a:not(.btn):hover { color: var(--text); }

.nav__toggle {
  display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
  align-items: center; justify-content: center; background: none; border: 0; cursor: pointer;
}
.nav__toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none; flex-direction: column; gap: 6px; padding: 12px 24px 22px;
  background: rgba(11, 11, 15, 0.96); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav__mobile:not([hidden]) { display: flex; }
.nav__mobile > a:not(.btn) { color: var(--text-2); padding: 12px 4px; font-weight: 500; border-bottom: 1px solid var(--border-soft); }
.nav__mobile > .btn { margin-top: 12px; }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; padding: 72px 0 90px; overflow: hidden; }
.hero__glow {
  position: absolute; inset: -20% -10% auto; height: 720px; pointer-events: none;
  background:
    radial-gradient(60% 60% at 70% 18%, rgba(255, 59, 73, 0.30), transparent 60%),
    radial-gradient(48% 48% at 18% 8%, rgba(225, 29, 42, 0.20), transparent 62%);
  filter: blur(10px);
}
.hero__inner {
  position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px; align-items: center;
}

.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.78rem; font-weight: 700; color: var(--red-bright); margin-bottom: 18px;
}
.hero__title { font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: 700; }
.hero__sub { margin-top: 22px; font-size: 1.12rem; color: var(--text-2); max-width: 36em; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 9px 16px; color: var(--text-2);
}
.store-badge svg { width: 22px; height: 22px; fill: currentColor; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; font-size: 0.98rem; color: var(--text); }
.store-badge small { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); font-weight: 700; }
a.store-badge { text-decoration: none; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
a.store-badge:hover { border-color: var(--red-bright); background: rgba(255, 255, 255, 0.07); transform: translateY(-1px); }
.store-badge--live { border-color: rgba(255, 59, 73, 0.5); }
.store-badge--live small { color: var(--red-bright); }
.join__note a { color: var(--red-bright); font-weight: 600; }
.join__note a:hover { text-decoration: underline; }

/* Personalized-view notice. Hidden until <html data-persona="..."> is set (main.js does
   that before first paint), so there is no pop-in and no layout shift. */
.pv { display: none; border-bottom: 1px solid var(--border-soft); background: rgba(255, 59, 73, 0.06); }
html[data-persona] .pv { display: block; }
.pv__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.pv__msg { font-size: 0.95rem; color: var(--text-2); }
.pv__msg strong { color: var(--text); font-weight: 600; }
/* Only the active persona's noun renders - pure CSS, so it is correct on first paint. */
.pv__msg [data-pv] { display: none; }
html[data-persona="athlete"] .pv__msg [data-pv="athlete"],
html[data-persona="coach"] .pv__msg [data-pv="coach"],
html[data-persona="creator"] .pv__msg [data-pv="creator"],
html[data-persona="scout"] .pv__msg [data-pv="scout"],
html[data-persona="school"] .pv__msg [data-pv="school"] { display: inline; }
.pv__clear {
  flex-shrink: 0; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  color: var(--text); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-soft); border-radius: var(--pill); padding: 7px 15px;
}
.pv__clear:hover { border-color: var(--red-bright); background: rgba(255, 255, 255, 0.09); }

/* Hero persona router: the "I'm a ..." self-select strip. Visually a sibling of .chips,
   but these are real links carrying data-persona - main.js remembers the pick, marks it
   active on a return visit, and appends ?persona= to the sign-up CTA. */
.pr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.pr__label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-2);
}
.pr__list { display: flex; flex-wrap: wrap; gap: 8px; }
.pr__chip {
  display: inline-block; font-size: 0.9rem; font-weight: 600; color: var(--text);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-soft);
  padding: 8px 15px; border-radius: var(--pill);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.pr__chip:hover { border-color: var(--red-bright); background: rgba(255, 255, 255, 0.09); transform: translateY(-1px); }
/* .is-active = the remembered pick (homepage); [aria-current] = the page you are on
   (the /for/ pages). Same treatment, different sources. */
.pr__chip.is-active,
.pr__chip[aria-current] { border-color: var(--red-bright); background: rgba(255, 59, 73, 0.14); }
/* Checkmark, not color alone, carries the "remembered" state (WCAG 1.4.1). */
.pr__chip.is-active::after,
.pr__chip[aria-current]::after { content: " \2713"; color: var(--red-bright); font-weight: 700; }
.router__card.is-active { border-color: var(--red-bright); background: #1b1c21; }
@media (prefers-reduced-motion: reduce) {
  .pr__chip { transition: none; }
  .pr__chip:hover { transform: none; }
}
@media (max-width: 560px) {
  .pr { gap: 8px; }
  .pr__label { width: 100%; margin-bottom: 0; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chips li {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-2);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft);
  padding: 6px 13px; border-radius: var(--pill);
}

/* Compatible-tracker strip (homepage athlete section) */
.tracker-strip { margin-top: 40px; text-align: center; }
.tracker-strip__lede { color: var(--text-2); max-width: 660px; margin: 0 auto; }
.tracker-strip .chips { justify-content: center; margin-top: 16px; }

/* ----------------------------------------------------------------- device frame */
.hero__art { display: flex; justify-content: center; }
/* A real app screenshot wrapped in a phone bezel. Shared by the hero + gallery. */
.device {
  border-radius: 42px; padding: 9px;
  background: linear-gradient(160deg, #2a2c33, #121317 60%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 26px 46px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.device img { display: block; width: 100%; height: auto; border-radius: 34px; }
.device--hero {
  width: 300px; max-width: 78vw; border-radius: 48px; padding: 11px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.device--hero img { border-radius: 38px; }
/* On phones the hero screenshot is the tallest block in the hero (607px of 1610px),
   which pushed the audience router two full screens down. Cap it and fade the bottom
   out rather than scaling the whole phone: the device is sized off its width, so
   shrinking it to this height would drop the frame to ~200px wide and make the app's
   UI text unreadable. Cropping keeps the top of the screen legible at full size. */
@media (max-width: 560px) {
  .device--hero {
    max-height: 400px; overflow: hidden; box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 68%, transparent 98%);
  }
}
.dot { width: 9px; height: 9px; border-radius: var(--pill); flex: none; }
.dot--amber { background: #E0890B; } .dot--blue { background: #3C87F7; }
.dot--green { background: #1E9E5A; } .dot--red { background: var(--red); }

/* ----------------------------------------------------------------- sections */
.section { padding: 92px 0; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.018) 30%, transparent); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.section__head { max-width: 40rem; margin-bottom: 48px; }
.section__title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; }
.section__lede { margin-top: 16px; font-size: 1.1rem; color: var(--text-2); }

.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 28px; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.16); background: #1b1c21; }
.card--plain:hover { transform: none; }
.card__icon {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--r-md);
  margin-bottom: 18px; color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, transparent);
}
.card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card__title { font-size: 1.22rem; font-weight: 600; margin-bottom: 10px; }
.card__body { color: var(--text-2); font-size: 1rem; }

/* ----------------------------------------------------------------- why */
.why { padding: 26px 28px; border-left: 2px solid var(--red); background: rgba(255,255,255,0.02); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.why__title { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; }
.why__body { color: var(--text-2); }

/* ----------------------------------------------------------------- split (coaches) */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.split__copy .btn { margin-top: 26px; }
.split__list { display: flex; flex-direction: column; gap: 14px; }
.split__list li {
  display: flex; align-items: flex-start; gap: 14px; font-size: 1.05rem; font-weight: 500;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px;
}
.check { flex: none; width: 22px; height: 22px; border-radius: var(--pill); background: rgba(30,158,90,0.16); position: relative; margin-top: 1px; }
.check::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #2FBE74; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ----------------------------------------------------------------- join */
.join { position: relative; padding: 100px 0; text-align: center; overflow: hidden; }
.join__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 120%, rgba(225, 29, 42, 0.4), transparent 60%);
}
.join__inner { position: relative; max-width: 40rem; margin: 0 auto; }
.join__title { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; }
.join__sub { margin: 18px auto 30px; font-size: 1.12rem; color: var(--text-2); max-width: 32em; }
.join__note { margin-top: 18px; font-size: 0.9rem; color: var(--text-2); }
.join__note code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 5px; font-size: 0.85em; }
.ms-form { width: 100%; max-width: 640px; height: 560px; border: 0; border-radius: var(--r-lg); margin: 24px auto 0; background: #fff; }

/* ----------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--border); padding: 56px 0 30px; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer__tag { margin-top: 16px; color: var(--text-2); font-size: 0.95rem; max-width: 26em; }
.footer__tag strong { color: var(--text); }
/* h2 (not h4) so pages whose content tops out at h2 don't skip heading levels;
   styled identically to the old h4 treatment. */
.footer__col h2, .footer__col h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); margin-bottom: 16px; margin-top: 0; }
.footer__col a { display: block; color: var(--text-2); padding: 6px 0; transition: color 0.18s; }
.footer__col a:hover { color: var(--text); }
.footer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border-soft);
  font-size: 0.88rem; color: var(--text-2);
}

/* ----------------------------------------------------------------- reveal anim */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ----------------------------------------------------------------- responsive */
@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__copy { order: 1; }
  .hero__art { order: 2; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 32px; }
}

/* The primary nav is a single row of links + 2 buttons. It grows every time a new audience
   link is added, and one of the links (Giveaway) is revealed at RUNTIME, so no fixed
   breakpoint can know whether the row still fits - it has silently overflowed and scrolled
   the whole page sideways twice now, at different widths each time. main.js measures the row
   and adds .nav-compact when it will not fit beside the wordmark. These queries stay as the
   no-JS baseline and the first-paint default; the measurement only ever collapses the nav
   EARLIER than they do, never later. */
/* Tighten the row well before it runs out of viewport. This used to start at 1180px, which
   left the full-size row overflowing the page across the whole 1181-1280 band. */
@media (max-width: 1420px) {
  .nav__links { gap: 18px; }
  .nav__links > a:not(.btn) { font-size: 0.9rem; }
}

@media (max-width: 1040px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}

/* Measured: the row does not fit at this width, so hand off to the hamburger. */
.nav-compact .nav__links { display: none; }
.nav-compact .nav__toggle { display: flex; }

@media (max-width: 760px) {
  .section { padding: 68px 0; }
  .hero { padding: 48px 0 70px; text-align: center; }
  .eyebrow { margin-bottom: 14px; }
  .hero__cta, .stores, .chips { justify-content: center; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .cta-inline { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; gap: 8px; }
}

/* ----------------------------------------------------------------- legal page */
.legal-top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 11, 15, 0.82); backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border);
}
.legal-top__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.legal-top .back { color: var(--text-2); font-weight: 500; font-size: 0.95rem; }
.legal-top .back:hover { color: var(--text); }

.legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 88px; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 2.7rem); font-weight: 700; }
.legal .updated { color: var(--text-2); margin-top: 12px; font-size: 0.92rem; }
.legal .lead { margin-top: 22px; font-size: 1.12rem; color: var(--text-2); }
.legal h2 { font-size: 1.4rem; font-weight: 600; margin: 42px 0 12px; }
.legal h3 { font-size: 1.08rem; font-weight: 600; margin: 26px 0 8px; color: #E6E9EF; }
.legal p { margin: 12px 0; color: #C7CCD6; font-size: 1.02rem; line-height: 1.7; }
.legal ul { margin: 12px 0; padding-left: 22px; list-style: disc; }
.legal li { margin: 7px 0; color: #C7CCD6; font-size: 1.02rem; line-height: 1.65; }
.legal a { color: var(--red-bright); text-decoration: underline; }
.legal strong { color: var(--text); font-weight: 600; }
.legal ol { margin: 12px 0; padding-left: 22px; list-style: decimal; }
/* Quoted consent notices and sample messages on /sms/ - a carrier reviewer needs to see the
   exact wording, so it is set apart from the surrounding prose rather than inlined. */
.legal blockquote {
  margin: 14px 0; padding: 10px 18px;
  border-left: 3px solid var(--red);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2); font-size: 0.98rem; line-height: 1.6;
}
.legal blockquote.sms-sample { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92rem; }
.legal hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.legal address { font-style: normal; color: #C7CCD6; line-height: 1.7; }
.legal .notice {
  margin: 26px 0 8px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--red-bright);
  border-radius: 10px;
  background: rgba(255, 59, 73, 0.06);
  color: #C7CCD6;
  font-size: 0.98rem;
  line-height: 1.65;
}
.legal .notice strong { color: var(--text); }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

/* ----------------------------------------------------------------- screens gallery */
.shots-wrap { position: relative; }
.shots {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 0 14px;
  padding-inline: max(24px, calc((100% - var(--maxw)) / 2));
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.shots::-webkit-scrollbar { display: none; }
.shots:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; border-radius: var(--r-lg); }
.shot {
  flex: 0 0 auto; width: 232px; margin: 0; text-align: center; scroll-snap-align: center;
}
.shot .device { transition: transform 0.2s var(--ease); }
.shot:hover .device { transform: translateY(-5px); }
.shot figcaption { margin-top: 18px; color: var(--text-2); font-weight: 600; font-size: 0.95rem; }

/* Prev/next controls: the affordance mouse users need (touch swipes instead). */
.shots-nav {
  position: absolute; top: calc(50% - 16px); transform: translateY(-50%);
  z-index: 2; display: none; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elev); color: var(--text);
  cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}
.shots-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shots-nav:hover { background: var(--bg-2); }
.shots-nav:active { transform: translateY(-50%) scale(0.94); }
.shots-nav:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.shots-nav--prev { left: max(20px, calc((100% - var(--maxw)) / 2 - 4px)); }
.shots-nav--next { right: max(20px, calc((100% - var(--maxw)) / 2 - 4px)); }
@media (hover: hover) and (pointer: fine) {
  .shots-nav:not([hidden]) { display: inline-flex; }
}

/* ----------------------------------------------------------------- hero alt link */
.hero__alt { margin-top: 18px; font-size: 0.98rem; }
.hero__alt a { color: var(--red-bright); font-weight: 600; }
.hero__alt a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- coach "and more" line */
.coach-more { margin: 30px auto 0; max-width: 48rem; text-align: center; color: var(--text-2); font-size: 1rem; }

/* ----------------------------------------------------------------- everything matrix */
.matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 26px; }
.matrix__group h3 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--red-bright); font-weight: 700; margin-bottom: 14px;
}
.matrix__list { display: flex; flex-direction: column; gap: 10px; }
.matrix__list li { position: relative; padding-left: 28px; color: var(--text-2); font-size: 0.95rem; line-height: 1.4; }
.matrix__list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px;
  border-radius: 5px; background: rgba(30, 158, 90, 0.16);
}
.matrix__list li::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 5px; height: 9px;
  border: solid #2FBE74; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@media (max-width: 920px) { .matrix { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; } }
@media (max-width: 540px) { .matrix { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- compare table */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.compare-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg-elev);
}
.compare-scroll:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }

.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.96rem; }
.compare-table th, .compare-table td {
  padding: 14px 16px; text-align: center; vertical-align: middle;
  border-bottom: 1px solid var(--border-soft);
}
.compare-table thead th, .compare-table thead td { background: var(--bg-2); border-bottom: 1px solid var(--border); }
.compare-table thead th {
  font-size: 0.84rem; font-weight: 600; color: var(--text-2); line-height: 1.3; letter-spacing: 0.01em;
}
.compare-table thead .ct-corner { position: sticky; left: 0; background: var(--bg-2); z-index: 3; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th { background: rgba(255, 255, 255, 0.02); }

/* row header (capability), kept visible while the table scrolls sideways */
.compare-table th[scope="row"] {
  text-align: left; font-weight: 500; color: var(--text); line-height: 1.35;
  position: sticky; left: 0; background: var(--bg-elev); z-index: 1;
  min-width: 232px; max-width: 300px;
}

/* highlighted iVenza column */
.compare-table .ct-ivenza { background: rgba(225, 29, 42, 0.07); }
.compare-table thead th.ct-ivenza { background: rgba(225, 29, 42, 0.16); }
.compare-table tbody tr:hover .ct-ivenza { background: rgba(225, 29, 42, 0.12); }
.ct-ivenza__mark { display: inline-block; color: #fff; font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em; }

/* yes / partial / no glyphs */
.c { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--pill); position: relative; }
.c-yes { background: rgba(30, 158, 90, 0.16); }
.c-yes::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid #2FBE74; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.c-partial { background: rgba(224, 137, 11, 0.16); }
.c-partial::after {
  content: ""; width: 12px; height: 12px; border-radius: var(--pill); border: 1.5px solid #E0A60B;
  background: linear-gradient(90deg, #E0A60B 0 50%, transparent 50% 100%);
}
.c-no { background: rgba(255, 255, 255, 0.05); }
.c-no::after { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--text-2); opacity: 0.5; }

/* legend + footnote */
.compare-legend {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center;
  margin-top: 22px; color: var(--text-2); font-size: 0.92rem;
}
.compare-legend li { display: inline-flex; align-items: center; gap: 9px; }
.compare-legend .c { width: 22px; height: 22px; }
.compare-note { margin: 14px auto 0; max-width: 44rem; text-align: center; color: var(--text-2); font-size: 0.92rem; }

/* Focused creator comparison (iVenza vs course/LMS platforms): narrower 2-column table. */
.compare--creator { margin-top: 48px; }
.compare__intro { max-width: 46rem; margin: 0 auto 18px; text-align: center; color: var(--text-2); font-size: 1.02rem; }
.compare-table--duo { min-width: 460px; }

/* Transaction-fee comparison. The categories are ROWS here rather than columns, so the
   iVenza highlight is row-based, and the value column carries a sentence rather than a
   yes/partial/no glyph. */
.compare--fees { margin-top: 48px; }
.compare__title { margin: 0 0 10px; text-align: center; font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.01em; }
.compare-table--fees { min-width: 520px; }
.compare-table--fees thead th { text-align: left; }
.compare-table--fees tbody td { text-align: left; color: #C7CCD6; line-height: 1.5; }
.compare-table--fees tbody th[scope="row"] { min-width: 186px; max-width: 220px; font-weight: 600; }
.compare-table .ct-row-ivenza th[scope="row"],
.compare-table .ct-row-ivenza td { background: rgba(225, 29, 42, 0.07); }
.compare-table tbody tr.ct-row-ivenza:hover th[scope="row"],
.compare-table tbody tr.ct-row-ivenza:hover td { background: rgba(225, 29, 42, 0.12); }

/* ===========================================================================
   Giveaway section (dynamic; revealed by main.js wireGiveaway)
   =========================================================================== */
.gw { max-width: 640px; margin: 36px auto 0; text-align: center; }
.gw__stat { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.gw__num { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; color: var(--red-bright); line-height: 1; }
.gw__label { color: var(--text-2); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.gw__bar { height: 14px; background: var(--bg-2); border-radius: var(--r-sm); overflow: hidden; }
.gw__bar-fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--red-bright)); border-radius: var(--r-sm); transition: width 0.6s var(--ease); }
.gw__caption { margin-top: 12px; color: var(--text-2); font-size: 0.95rem; }
.gw__how { text-align: left; max-width: 480px; margin: 26px auto; line-height: 1.7; }
.gw__rules { margin-top: 18px; }
.gw__rules a { color: var(--text-2); text-decoration: underline; }

/* ===========================================================================
   FAQ accordion
   =========================================================================== */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); overflow: hidden;
}
.faq details[open] { border-color: rgba(255, 255, 255, 0.16); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; color: var(--text-2); font-size: 1.35rem;
  font-weight: 400; line-height: 1; transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--red-bright); outline-offset: -2px; border-radius: var(--r-md); }
.faq .faq__a { padding: 0 20px 18px; color: var(--text-2); line-height: 1.7; }
.faq .faq__a a { color: var(--text); text-decoration: underline; }

/* ===========================================================================
   CTA button row (schools section, about page)
   =========================================================================== */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
/* Left-aligned variant, to sit under a left-aligned section head (the /for/ pages). */
.cta-row--start { justify-content: flex-start; }

/* ===========================================================================
   About page prose
   =========================================================================== */
.prose { max-width: 48rem; }
.prose p { margin: 14px 0; color: #C7CCD6; font-size: 1.05rem; line-height: 1.75; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--red-bright); text-decoration: underline; }

/* ===========================================================================
   Cheat sheet page
   =========================================================================== */
.cheat-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.cheat-toc a {
  padding: 8px 15px; border: 1px solid var(--border); border-radius: var(--pill);
  color: var(--text-2); font-size: 0.92rem; font-weight: 500;
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.18s, border-color 0.18s;
}
.cheat-toc a:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.card__list { margin-top: 4px; padding-left: 18px; list-style: disc; }
.card__list li { margin: 7px 0; color: var(--text-2); font-size: 0.97rem; line-height: 1.55; }
.card__list li::marker { color: var(--red-bright); }
.card__list a { color: var(--red-bright); text-decoration: underline; }

/* --------------------------------------------------------- audience router */
.router { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 34px; }
.router__card {
  display: block; padding: 20px 18px; border-radius: var(--r-lg);
  background: var(--bg-elev); border: 1px solid var(--border);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s;
}
.router__card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.16); background: #1b1c21; }
.router__who { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.25; margin-bottom: 8px; }
.router__who::after { content: " \2192"; color: var(--red-bright); }
.router__what { display: block; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
/* At 5-across the longest labels wrap to two lines and the rest do not, so body text
   starts at four different heights. Reserve two lines to level them. Cards below this
   breakpoint are wide enough that every label fits on one line, so no reserve needed. */
@media (min-width: 1001px) { .router__who { min-height: 2.5em; } }
@media (max-width: 1000px) { .router { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .router { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- problem stack */
.stack { margin-top: 34px; }
.stack__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stack__stat {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.stack__num { font-size: clamp(2.2rem, 5vw, 2.9rem); font-weight: 800; color: var(--red-bright); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stack__lbl { color: var(--text-2); font-size: 0.98rem; line-height: 1.4; }

.stack__ways { margin-top: 26px; }
.stack__way-label { display: block; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 14px; }
.stack__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.stack__chip {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--pill);
  padding: 8px 15px;
  color: var(--text-2);
  font-size: 0.92rem;
}
.stack__resolve { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
.stack__apps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.stack__app {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--pill);
  padding: 9px 16px 9px 9px;
  color: var(--text-2);
  font-size: 0.95rem; font-weight: 500;
}
.stack__badge {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2); color: var(--text);
  font-size: 0.75rem; font-weight: 700; flex: none;
}
.stack__arrow { color: var(--text-2); font-size: 1.4rem; line-height: 1; padding: 0 2px; }
.stack__app--iv {
  color: var(--text); font-weight: 600;
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, var(--bg-elev));
  box-shadow: 0 0 0 1px var(--red);
}
.stack__badge--iv { background: var(--red); color: #fff; }

@media (max-width: 760px) {
  .stack__stats { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ blog */
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 14px;
  color: var(--text-2); font-size: 0.92rem;
}
.post-meta strong { color: var(--text); font-weight: 600; }
.post-meta .dot { opacity: 0.5; }

.prose h2 { margin: 44px 0 8px; font-size: 1.45rem; line-height: 1.3; letter-spacing: -0.01em; }
.prose h3 { margin: 30px 0 6px; font-size: 1.12rem; line-height: 1.35; }
.prose ul, .prose ol { margin: 14px 0; padding-left: 24px; color: #C7CCD6; }
.prose li { margin: 8px 0; font-size: 1.05rem; line-height: 1.65; }
.prose li strong { color: var(--text); }
.prose blockquote {
  margin: 20px 0; padding: 4px 20px;
  border-left: 3px solid var(--red);
  color: var(--text-2); font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.98rem; }
.prose th, .prose td { padding: 10px 12px; text-align: left; border: 1px solid var(--border-soft); color: #C7CCD6; vertical-align: top; }
.prose th { color: var(--text); font-weight: 600; background: rgba(255, 255, 255, 0.03); }
.prose .table-scroll { overflow-x: auto; }
.prose hr { border: none; border-top: 1px solid var(--border-soft); margin: 36px 0; }

.callout {
  margin: 28px 0; padding: 18px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--red);
  border-radius: var(--r-md);
}
.callout p { margin: 6px 0; font-size: 1rem; }
.callout--note { border-left-color: rgba(255, 255, 255, 0.35); }

.blog-list { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 760px; }
.faq--left { margin: 0; max-width: 48rem; }
.blog-card {
  display: block;
  position: relative; /* anchors the stretched title link below */
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  text-decoration: none; color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.blog-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); background: #1b1c21; }
/* The card is an <article>, not an <a> (tag chips inside it must be their own
   links, and nested anchors are invalid HTML). The title link is stretched over
   the whole tile so the card still clicks through; chips sit above it. */
.blog-card__link { color: inherit; text-decoration: none; }
.blog-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.blog-card .tag-row { position: relative; z-index: 1; }
.blog-card__kicker { color: var(--red-bright); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.blog-card h2 { margin: 8px 0 8px; font-size: 1.3rem; line-height: 1.3; color: var(--text); }
.blog-card p { margin: 0 0 12px; color: var(--text-2); line-height: 1.65; }
.blog-card__meta { color: var(--text-2); font-size: 0.88rem; }

/* Contextual end-of-post product panel */
.post-cta {
  max-width: 48rem;
  margin-top: 44px;
  padding: 30px 32px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--red) 7%, var(--bg-elev)), var(--bg-elev) 55%);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
}
.post-cta__kicker { color: var(--red-bright); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.post-cta__title { margin: 10px 0 8px; font-size: 1.4rem; line-height: 1.3; }
.post-cta__lede { margin: 0 0 6px; color: #C7CCD6; line-height: 1.7; }
.post-cta__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.post-cta__list li { display: flex; gap: 12px; color: #C7CCD6; line-height: 1.6; }
.post-cta__list strong { color: var(--text); font-weight: 600; }
.post-cta__platforms {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-2); font-size: 0.95rem; line-height: 1.65;
}
.post-cta__platforms strong { color: var(--text); }
.post-cta .cta-row { justify-content: flex-start; margin-top: 20px; }
@media (max-width: 560px) { .post-cta { padding: 24px 20px; } }

/* Blog post share row + hero + author card */
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.post-share__label { color: var(--text-2); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 2px; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-2); cursor: pointer; padding: 0;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.15s var(--ease);
}
.share-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.share-btn svg { width: 17px; height: 17px; fill: currentColor; }
.share-btn.is-copied { color: #2FBE74; border-color: rgba(47, 190, 116, 0.5); }
.share-btn.is-copied::after { content: "Copied"; position: absolute; transform: translateY(-34px); font-size: 0.72rem; color: #2FBE74; background: var(--bg-elev); border: 1px solid rgba(47,190,116,0.4); border-radius: var(--r-sm); padding: 2px 8px; }

.post-hero { margin: 0 0 34px; max-width: 48rem; }
.post-hero img { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--border-soft); display: block; }

.author-card {
  max-width: 48rem; margin-top: 28px; padding: 24px 26px;
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
}
.author-card__avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--red-bright), var(--red));
  color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em;
  box-shadow: 0 8px 22px -8px rgba(225, 29, 42, 0.6);
}
.author-card__kicker { color: var(--text-2); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.author-card__name { margin: 4px 0 6px; font-size: 1.12rem; }
.author-card__bio { color: var(--text-2); font-size: 0.96rem; line-height: 1.65; margin: 0; }
.author-card__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.author-card__links .share-btn { width: 36px; height: 36px; }
.author-card__links .share-btn--label {
  width: auto; padding: 0 14px; gap: 7px;
  font-size: 0.88rem; font-weight: 600; color: var(--text-2); text-decoration: none;
}
.author-card__links .share-btn--label:hover { color: var(--text); }
@media (max-width: 560px) { .author-card { padding: 20px 18px; } }

/* Blog taxonomy: filter bar + tag chips */
.blog-filter { max-width: 760px; margin: 0 auto 22px; }
.blog-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blog-filter__label { color: var(--text-2); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; }
.filter-chip {
  font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1;
  padding: 9px 15px; border-radius: var(--pill); cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.filter-chip:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.24); }
.filter-chip[aria-pressed="true"] {
  color: #fff; border-color: var(--red);
  background: color-mix(in srgb, var(--red) 22%, transparent);
}
.blog-filter__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; color: var(--text-2); font-size: 0.9rem; }
.blog-filter__count { font-variant-numeric: tabular-nums; }
.blog-sort {
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: var(--pill);
  padding: 7px 12px; cursor: pointer;
}
.blog-filter__clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--red-bright); text-decoration: underline;
}
.blog-empty { max-width: 760px; margin: 0 auto; padding: 40px 24px; text-align: center; color: var(--text-2); }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag {
  /* padding keeps the chip comfortably >= the 24px WCAG 2.5.8 target minimum */
  display: inline-block; font-size: 0.76rem; font-weight: 600; line-height: 1;
  padding: 8px 12px; border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-soft);
  color: var(--text-2); text-decoration: none;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
a.tag:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.26); }
.blog-card .tag-row { margin-top: 12px; }
.post-tags { max-width: 48rem; margin-top: 18px; }