/* ═══════════════════════════════════════════════════════════════
   brutalist.css — XVARY Design System
   Tokens · Typography · Nav · Layout · Cards · Report · Gates
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────────── */
:root {
  --yel: #FFE500;
  --lime-dim: rgba(255, 229, 0, .1);
  --dark: #000000;
  --white: #FFFFFF;
  --bg: #FFE500;
  --blur-bg: rgba(255, 229, 0, .85);
  --text: #000000;
  --text2: #4A4A4A;
  --muted: #7A7A7A;
  --dim: #B0B0B0;
  --warm: #F0ECE4;
  --green: #89E219;
  --red: #FF4500;
  --font-primary: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', 'Fira Code', monospace;
  --radius-pill: 100px;
  --radius-card: 16px;
  --radius-card-lg: 24px;
  --radius-sm: 12px;
  --max-w: clamp(800px, 70%, 1200px);
  --max-w-wide: clamp(900px, 80%, 1400px);
  /* Match .nav: vertical padding 12+12 + flex row min-height 44 (brand / links) */
  --nav-h: 68px;
  --ease-delight: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }
body {
  font-family: var(--font-primary);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
}
body.bg-white { background: var(--white); }
::selection { background: var(--dark); color: var(--yel); }
a { color: inherit; text-decoration: none; }

/* ── NAV ───────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--blur-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  /* Paint a few px above the bar — kills yellow body bleed at viewport top (GPU/subpixel). */
}
.nav::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 4px;
  background: var(--blur-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  pointer-events: none;
}
.nav--white {
  background: rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.nav--white::before {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.nav-brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  text-transform: lowercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: text-decoration-color 0.28s var(--ease-delight), letter-spacing 0.22s var(--ease-delight);
  letter-spacing: -0.02em;
}
.nav-brand:hover {
  text-decoration-color: currentColor;
  letter-spacing: 0;
}
.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-left: auto;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, .65);
  text-decoration: none;
  text-transform: lowercase;
  padding: 12px 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav-links a.nav-link-pulse {
  text-transform: none;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-cta {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 20px;
  min-height: 44px;
  transition: transform .12s var(--ease-delight), box-shadow .12s var(--ease-delight), opacity .2s, filter .15s ease;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
  display: inline-flex !important;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--warm) !important;
  color: var(--text) !important;
  border: 1px solid rgba(0, 0, 0, .08);
  cursor: pointer;
  text-transform: lowercase;
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .5);
  filter: brightness(1.02);
}
.nav-cta:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
  filter: brightness(.99);
}

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 60px;
  position: relative;
}
.hero h1 {
  font-size: clamp(48px, 12vw, 120px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -3px;
  color: var(--text);
  text-transform: lowercase;
  max-width: 900px;
  margin: 0 auto 20px;
}
.hero p {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--text2);
  max-width: 420px;
  margin: 0 auto 32px;
  line-height: 1.6;
  text-transform: lowercase;
}
.hero-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn-dark {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: var(--yel);
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-transform: lowercase;
  transition: transform .12s var(--ease-delight), box-shadow .12s var(--ease-delight), opacity .2s;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  display: inline-block;
}
.btn-dark:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .1);
}
.btn-dark:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.btn-glass {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  color: var(--text);
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-transform: lowercase;
  transition: transform .12s var(--ease-delight), background .2s;
  display: inline-block;
}
.btn-glass:hover {
  background: rgba(255, 255, 255, .4);
  transform: translateY(-1px);
}
.btn-glass:active { transform: translateY(1px); }
.btn-sm { font-size: 14px !important; padding: 10px 24px !important; }
.btn-lg { font-size: 18px !important; padding: 16px 44px !important; }

/* ── DARK CARD ─────────────────────────────────────────────── */
.dark-card-section { padding: 40px 24px; }
.dark-card {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-card-lg);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}
.dark-card--inline {
  padding: 28px;
  max-width: 100%;
  border-radius: var(--radius-card);
}
.dc-blur {
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--yel);
  opacity: .08;
  border-radius: 50%;
  filter: blur(100px);
  top: -100px;
  right: -100px;
  pointer-events: none;
}
.dc-eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  text-transform: lowercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.dc-num {
  font-size: clamp(64px, 14vw, 120px);
  font-weight: 700;
  color: var(--white);
  line-height: .85;
  letter-spacing: -3px;
  margin-bottom: 8px;
}
.dc-label {
  font-size: 15px;
  color: rgba(255, 255, 255, .68);
  margin-bottom: 8px;
}
.dc-context {
  font-size: 15px;
  color: rgba(255, 255, 255, .72);
  max-width: 460px;
  line-height: 1.7;
}
.dc-stats {
  display: flex;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.dc-stat {
  flex: 1;
  text-align: center;
  padding: 20px 12px;
}
.dc-stat:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.dc-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
}
.dc-stat-val--yel { color: var(--yel); }
.dc-stat-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, .64);
  text-transform: lowercase;
  margin-top: 2px;
}

/* ── CONTENT CARDS ─────────────────────────────────────────── */
.cards-section {
  padding: 40px 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.cards-section h2 {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 24px;
  text-transform: lowercase;
}
.content-card {
  background: rgba(255, 255, 255, .3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-card);
  padding: 28px;
  margin-bottom: 12px;
  transition: background .2s;
  cursor: default;
}
.content-card:hover { background: rgba(255, 255, 255, .5); }
.cc-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cc-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: var(--yel);
}
.cc-body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text2);
}

/* ── TABLE CARD ────────────────────────────────────────────── */
.table-card {
  background: var(--dark);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-top: 24px;
  overflow-x: auto;
}
.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: rgba(255, 255, 255, .76);
  line-height: 1.55;
}
.table-card th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  text-transform: lowercase;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.table-card td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.table-card .w,
.tbl .w { color: var(--yel); font-weight: 600; }
.table-card .x,
.tbl .x { opacity: .2; }

/* ── KPI MINI ──────────────────────────────────────────────── */
.kpi-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.kpi-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.kpi-mini {
  background: var(--dark);
  border-radius: var(--radius-card);
  padding: 20px;
  text-align: center;
}
.kpi-mini-val {
  font-size: 32px;
  font-weight: 700;
  color: var(--white);
}
.kpi-mini-val--yel,
.kpi-mini-val.yel { color: var(--yel); }
.kpi-mini-val--white { color: var(--white); }
.kpi-mini-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, .64);
  text-transform: lowercase;
  margin-top: 4px;
}

/* ── SPARK CARDS ───────────────────────────────────────────── */
.spark-card {
  display: flex;
  align-items: center;
  gap: 16px;
}
.spark-label {
  font-size: 20px;
  font-weight: 700;
}
.spark-sublabel {
  font-size: 11px;
  color: var(--muted);
}
.spark-container {
  flex: 1;
  height: 32px;
}
.spark-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}

/* ── HOW IT WORKS ──────────────────────────────────────────── */
.how-section {
  padding: 60px 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.how-section h2 {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -1px;
  text-transform: lowercase;
  margin-bottom: 32px;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.step-card {
  background: var(--dark);
  border-radius: var(--radius-card);
  padding: 28px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.step-num {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 48px;
  font-weight: 800;
  color: rgba(255, 229, 0, .08);
}
.step-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--yel);
}
.step-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .74);
  text-transform: lowercase;
}

/* ── PULSE PREVIEW ─────────────────────────────────────────── */
.pulse-preview {
  padding: 40px 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.pulse-preview-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.pulse-preview-hdr h2 {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -1px;
  /* Pulse preview headline: authored casing (Zone 2); chrome stays lowercase elsewhere */
}
.pulse-preview-hdr a {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 12px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  transition: background .2s, color .2s;
}
.pulse-preview-hdr a:hover {
  background: var(--dark);
  color: var(--yel);
}

/* ── CONVICTION GRID ───────────────────────────────────────── */
.conviction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.conviction-card {
  background: rgba(255, 255, 255, .78);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  color: var(--dark);
  display: block;
  transition: transform .2s;
}
.conviction-card:hover { transform: translateY(-2px); }
.conviction-ticker {
  font-size: 14px;
  font-weight: 700;
  text-transform: lowercase;
}
.conviction-pos {
  font-size: 10px;
  color: rgba(0, 0, 0, .55);
  text-transform: lowercase;
}

/* ── CONVICTION SCORE (flat tile — no donut / conic charts) ── */
.gauge,
.conviction-gauge {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
  position: relative;
  background: rgba(0, 0, 0, .06);
  border: 1px solid rgba(0, 0, 0, .08);
}
.gauge-inner,
.conviction-gauge-inner {
  display: none;
}
.gauge-val,
.conviction-gauge-val {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 800;
  color: var(--dark);
}

/* ── TICKERS ROW ───────────────────────────────────────────── */
.tickers-row {
  padding: 48px 24px;
  text-align: center;
}
.tickers-row h2 {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 20px;
  text-transform: lowercase;
}
.ticks {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 700px;
  margin: 0 auto;
}
.tick {
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  color: var(--text);
  transition: background .2s, color .2s;
  cursor: pointer;
  text-decoration: none;
  text-transform: lowercase;
}
.tick:hover {
  background: var(--dark);
  color: var(--yel);
}

/* ── FINAL CTA ─────────────────────────────────────────────── */
.final {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 100px 24px;
  text-align: center;
}
.final h2 {
  font-size: clamp(36px, 8vw, 72px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -2px;
  margin-bottom: 12px;
  text-transform: lowercase;
}
.final p {
  font-size: 16px;
  color: var(--text2);
  max-width: 520px;
  line-height: 1.7;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
  text-transform: lowercase;
}

/* ── FOOTER ────────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: 24px;
  font-size: 11px;
  color: rgba(0, 0, 0, .68);
  text-transform: lowercase;
}
.footer a {
  color: rgba(0, 0, 0, .68);
  text-decoration: none;
  padding: 12px 6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer a.footer-link-pulse {
  text-transform: none;
}
.footer a:hover { color: var(--text); }
.footer-links {
  margin-top: 8px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-logo {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.footer-logo img,
.footer-logo svg {
  width: 100px;
  height: auto;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.footer-logo a:hover img,
.footer-logo a:hover svg {
  opacity: 1;
}

/* ── PAGE HEADER ───────────────────────────────────────────── */
.page-header {
  padding: 80px 24px 32px;
  max-width: var(--max-w-wide);
  margin: 0 auto;
}
.page-header h1 {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 700;
  letter-spacing: -1px;
  text-transform: lowercase;
}
.page-header p {
  font-size: 15px;
  color: var(--text2);
  margin-top: 8px;
  text-transform: lowercase;
}

/* ── LIBRARY CONTROLS ─────────────────────────────────────── */
.library-controls {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  padding: 0 24px 20px;
}
.library-controls-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 14px 18px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(0, 0, 0, .06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.library-controls.is-stuck .library-controls-inner {
  box-shadow: 0 10px 32px rgba(0, 0, 0, .08);
  border-color: rgba(0, 0, 0, .1);
}
.library-search-wrap {
  margin-bottom: 12px;
}
.library-search {
  width: 100%;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, .1);
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  text-transform: lowercase;
}
.library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.library-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.library-select,
.library-toggle-btn,
.library-load-more,
.library-th {
  font-family: inherit;
}
.library-select {
  min-width: 170px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, .1);
  background: var(--white);
  font-size: 13px;
  text-transform: lowercase;
}
.library-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .04);
}
.library-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text2);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
  cursor: pointer;
}
.library-toggle-btn.active {
  background: var(--dark);
  color: var(--yel);
}

/* ── FILTERS ───────────────────────────────────────────────── */
.filters {
  padding: 0;
  max-width: none;
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fb {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-transform: lowercase;
  transition: all .15s;
  background: rgba(0, 0, 0, .06);
  color: var(--text2);
}
.fb:hover { background: rgba(0, 0, 0, .10); }
.fb.active {
  background: var(--dark);
  color: var(--yel);
}
.fb-count {
  opacity: .68;
}

/* ── REPORT CARDS / LIBRARY GRID ───────────────────────────── */
.grid {
  padding: 0 24px 60px;
  max-width: var(--max-w-wide);
  margin: 0 auto;
}
.library-section {
  margin-bottom: 18px;
}
.library-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.library-section-head .sec-label {
  padding: 0;
  margin: 0;
}
.library-section-meta {
  font-size: 12px;
  color: var(--muted);
  text-transform: lowercase;
}
.library-card-stack {
  display: grid;
  gap: 8px;
}
.rcard {
  background: rgba(0, 0, 0, .02);
  border-radius: var(--radius-card);
  padding: 18px 22px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-decoration: none;
  color: inherit;
  border-left: 4px solid transparent;
}
.rcard:hover { background: rgba(255, 229, 0, .08); }
.rcard--report {
  border-left-color: var(--yel);
  background: linear-gradient(90deg, rgba(255, 229, 0, .14), rgba(0, 0, 0, .02) 16%);
}
.rcard-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.rcard-gauge {
  width: 52px;
  height: 52px;
  margin: 0;
  flex-shrink: 0;
}
.rcard-gauge .conviction-gauge-inner {
  inset: 6px;
}
.rcard-gauge .conviction-gauge-val {
  font-size: 12px;
}
.rcard-ticker {
  font-size: 18px;
  font-weight: 700;
  text-transform: lowercase;
}
.rcard-body { min-width: 0; }
.rcard-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.rcard-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.library-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: lowercase;
}
.library-badge--new {
  background: rgba(0, 0, 0, .08);
  color: var(--dark);
}
.library-badge--report {
  background: var(--yel);
  color: var(--dark);
}
.rcard-co {
  font-size: 12px;
  color: var(--muted);
  text-transform: lowercase;
}
.rcard-v {
  font-size: 13px;
  color: var(--text2);
  margin-top: 4px;
  text-transform: lowercase;
}
.rcard-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.rcard-kpi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .06);
  text-transform: lowercase;
}
.rcard-kpi-label {
  font-size: 10px;
  color: var(--muted);
}
.rcard-kpi-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--dark);
}
.rcard-pos {
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
}
.rcard-pos.long { color: var(--dark); }
.rcard-pos.short { color: var(--red); }
.rcard-pos.neutral,
.rcard-pos.hold { color: var(--muted); }
.rcard-side {
  min-width: 98px;
  text-align: right;
}
.rcard-move {
  font-size: 17px;
  font-weight: 700;
  margin-top: 4px;
  text-transform: lowercase;
}
.rcard-move.long,
.library-row td.long {
  color: var(--dark);
}
.rcard-move.short,
.library-row td.short,
.library-row-pos.short {
  color: var(--red);
}
.rcard-move.neutral,
.library-row-pos.neutral {
  color: var(--muted);
}
.rcard-date {
  font-size: 10px;
  color: var(--muted);
  text-transform: lowercase;
  margin-top: 4px;
}
.library-results-meta {
  padding: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-transform: lowercase;
}
.library-empty {
  max-width: var(--max-w-wide);
  margin: 0 auto 20px;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .08);
  padding: 40px 28px;
  text-align: center;
}
.library-empty-inner {
  max-width: 400px;
  margin: 0 auto;
}
.library-empty-glyph {
  font-family: var(--font-mono);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: rgba(0, 0, 0, .1);
  line-height: 1;
  margin-bottom: 12px;
}
.library-empty-text {
  font-size: 15px;
  color: var(--text2);
  line-height: 1.55;
  margin: 0 0 20px;
  text-transform: lowercase;
}
.library-empty .btn-dark {
  margin-top: 4px;
}
.library-load-more-wrap {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 24px 64px;
}
.library-load-more-wrap[hidden] {
  display: none;
}
.library-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  background: var(--dark);
  color: var(--yel);
  font-size: 13px;
  font-weight: 700;
  text-transform: lowercase;
  cursor: pointer;
  transition: transform .12s var(--ease-delight), box-shadow .12s var(--ease-delight);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .12);
}
.library-load-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .1);
}
.library-load-more:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.library-table-wrap {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 24px 40px;
}
.library-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, .02);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.library-table th,
.library-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  font-size: 13px;
  text-transform: lowercase;
}
.library-table th {
  background: rgba(255, 255, 255, .7);
}
.library-th {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: lowercase;
  cursor: pointer;
}
.library-th.active {
  color: var(--dark);
}
.library-row {
  transition: background .15s;
}
.library-row:hover {
  background: rgba(255, 229, 0, .08);
}
.library-row--report {
  box-shadow: inset 4px 0 0 0 var(--yel);
}
.library-row-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.library-row-link.ticker {
  font-weight: 700;
}
.library-hover-preview {
  position: fixed;
  z-index: 120;
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, .92);
  color: var(--white);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.library-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.library-preview-ticker {
  font-size: 18px;
  font-weight: 700;
  color: var(--yel);
  text-transform: lowercase;
}
.library-preview-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.library-preview-tags span {
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  font-size: 10px;
  text-transform: lowercase;
}
.library-preview-copy {
  margin: 12px 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
  text-transform: lowercase;
}
.library-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.library-preview-cell {
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
}
.library-preview-cell span {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, .6);
  text-transform: lowercase;
  margin-bottom: 4px;
}
.library-preview-cell strong {
  display: block;
  font-size: 12px;
  text-transform: lowercase;
}

/* ── PRICING GRID ──────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px 24px;
}
.price-card {
  background: rgba(0, 0, 0, .02);
  border-radius: var(--radius-card-lg);
  padding: 28px 24px;
  transition: all .2s;
}
.price-card:hover { background: rgba(255, 229, 0, .06); }
.price-card.feat {
  background: var(--dark);
  color: var(--white);
}
.price-card.feat:hover { background: #222; }
.pc-tier {
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 16px;
}
.price-card.feat .pc-tier { color: var(--yel); }
.pc-amount {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -2px;
  margin-bottom: 4px;
}
.price-card.feat .pc-amount { color: var(--yel); }
.pc-period {
  font-size: 13px;
  color: var(--muted);
  text-transform: lowercase;
}
.price-card.feat .pc-period { color: rgba(255, 255, 255, .55); }
.pc-desc {
  font-size: 14px;
  color: var(--text2);
  margin: 12px 0 20px;
  min-height: 36px;
  text-transform: lowercase;
}
.price-card.feat .pc-desc { color: rgba(255, 255, 255, .6); }
.pc-features {
  list-style: none;
  margin-bottom: 24px;
}
.pc-features li {
  font-size: 14px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: lowercase;
}
.price-card.feat .pc-features li {
  border-color: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .6);
}
.pc-features li:last-child { border-bottom: none; }
.pf-y {
  font-weight: 700;
  font-size: 12px;
  color: var(--dark);
}
.price-card.feat .pf-y { color: var(--yel); }
.pf-n {
  font-size: 12px;
  color: var(--muted);
  opacity: .4;
}
.pc-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-transform: lowercase;
  transition: opacity .2s;
  border: none;
}
.pc-btn:hover { opacity: .85; }
.pc-btn-dark {
  background: var(--dark);
  color: var(--yel);
}
.pc-btn-lime {
  background: var(--yel);
  color: var(--dark);
}
.pc-btn-glass {
  background: rgba(255, 255, 255, .25);
  color: var(--text);
}
.pc-btn-glass:hover { background: rgba(255, 255, 255, .4); }
.pc-note {
  margin-top: 10px;
  font-size: 11px;
  text-align: center;
  text-transform: lowercase;
}
.price-card.feat .pc-note { color: var(--yel); }

/* ── COMPARISON TABLE ──────────────────────────────────────── */
.comp-sect {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 60px 24px;
}
.comp-sect h2 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 24px;
}
.comp-card {
  background: var(--dark);
  border-radius: var(--radius-card);
  padding: 4px;
  overflow-x: auto;
}
.comp-card table,
.comp-sect table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-transform: lowercase;
}
.comp-card th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.comp-card td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .02);
  color: rgba(255, 255, 255, .6);
}
.comp-card .w { color: var(--yel); font-weight: 700; }
.comp-card .x { opacity: .2; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-sect {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px 60px;
}
.faq-sect h2 {
  font-size: 20px;
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 20px;
}
.faq-item {
  border-top: 1px solid rgba(0, 0, 0, .08);
  padding: 16px 0;
  cursor: pointer;
}
.faq-q {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  text-transform: lowercase;
}
.faq-q::after {
  content: '+';
  font-size: 18px;
  color: var(--dark);
  transition: transform .2s;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text2);
  text-transform: lowercase;
}
.faq-item.open .faq-a {
  max-height: 200px;
  padding-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   REPORT SHELL — Three-Tier Gating Layout
   ═══════════════════════════════════════════════════════════ */

/* ── TIER LABEL ────────────────────────────────────────────── */
.tier-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yel);
}

/* ── TIER 1: PUBLIC ────────────────────────────────────────── */
.tier1 {
  padding: 60px 24px 40px;
}
.t1-ticker {
  font-size: clamp(48px, 10vw, 96px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -3px;
  text-transform: lowercase;
  margin-bottom: 8px;
}
.t1-co {
  font-size: 14px;
  color: var(--text2);
  text-transform: lowercase;
  margin-bottom: 16px;
}
.t1-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.t1-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: var(--yel);
  text-transform: lowercase;
  letter-spacing: .5px;
}
.t1-badge.long { background: var(--dark); color: var(--yel); }
.t1-badge.short { background: var(--red); color: var(--white); }
.t1-badge.neutral { background: rgba(0, 0, 0, .1); color: var(--text); }
.t1-badge.date {
  background: rgba(0, 0, 0, .05);
  color: var(--muted);
}

/* ── KPI STRIP ─────────────────────────────────────────────── */
.t1-strip {
  display: flex;
  gap: 0;
  background: var(--dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 24px;
}
.t1-item {
  flex: 1;
  text-align: center;
  padding: 16px 8px;
}
.t1-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.t1-val {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
}
.t1-val.dark {
  color: var(--yel);
}
.t1-lbl {
  font-size: 10px;
  color: rgba(255, 255, 255, .5);
  text-transform: lowercase;
  margin-top: 2px;
}

/* ── VERDICT ───────────────────────────────────────────────── */
.t1-verdict {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text2);
  text-transform: lowercase;
  max-width: 580px;
}

/* ── EMAIL GATE ────────────────────────────────────────────── */
.email-gate {
  background: var(--dark);
  color: var(--white);
  padding: 40px 24px;
  text-align: center;
  margin: 0;
}
.gate-text {
  font-size: 18px;
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 8px;
}
.gate-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  text-transform: lowercase;
  margin-bottom: 20px;
}
.gate-form {
  display: flex;
  gap: 6px;
  max-width: 380px;
  margin: 0 auto;
}
.gate-input {
  font-family: inherit;
  font-size: 14px;
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .06);
  color: var(--white);
  outline: none;
}
.gate-input::placeholder { color: rgba(255, 255, 255, .5); }
.gate-input:focus { border-color: var(--yel); }
.gate-submit {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--yel);
  color: var(--dark);
  border: none;
  cursor: pointer;
  text-transform: lowercase;
  transition: opacity .2s;
}
.gate-submit:hover { opacity: .85; }
.gate-msg {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  min-height: 18px;
}

/* ── TIER 2: FREE ──────────────────────────────────────────── */
.tier2 {
  padding: 40px 24px;
  max-width: 640px;
  margin: 0 auto;
}

/* Section title + lead */
.sec-t {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -.5px;
  margin: 32px 0 12px;
}
.sec-lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text2);
  text-transform: lowercase;
}
.cite {
  font-size: 10px;
  color: var(--muted);
  vertical-align: super;
}

/* "Why should I care" box */
.wsic {
  background: rgba(0, 0, 0, .03);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-top: 16px;
}
.wsic-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.wsic-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text2);
  text-transform: lowercase;
}

/* ── KPI CARDS (report) ────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.kpi-card {
  background: rgba(0, 0, 0, .03);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
}
.kpi-val {
  font-size: 20px;
  font-weight: 700;
}
.kpi-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: lowercase;
  margin-top: 4px;
}

/* ── CHART BOX ─────────────────────────────────────────────── */
.chart-box {
  background: var(--dark);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin: 16px 0;
}
.cl {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  text-transform: lowercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.chart-canvas-wrap {
  height: 220px;
  position: relative;
}

/* ── RISK CARDS ────────────────────────────────────────────── */
.risk-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.risk-card {
  background: rgba(200, 50, 50, .04);
  border-radius: var(--radius-sm);
  padding: 20px;
}
.risk-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 8px;
}
.risk-card h4 {
  font-size: 14px;
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 6px;
}
.risk-card p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text2);
  text-transform: lowercase;
}

/* ── PAYWALL GATE ──────────────────────────────────────────── */
.paywall-gate {
  background: var(--dark);
  color: var(--white);
  padding: 40px 24px;
  text-align: center;
  border-radius: var(--radius-card-lg);
  max-width: 580px;
  margin: 32px auto;
}
.paywall-gate h3 {
  font-size: 22px;
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 8px;
}
.paywall-gate p {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  text-transform: lowercase;
  margin-bottom: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.paywall-features {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  text-transform: lowercase;
  margin-bottom: 24px;
}
.paywall-features .c {
  color: var(--yel);
  font-weight: 700;
}
.paywall-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: var(--radius-pill);
  background: var(--yel);
  color: var(--dark);
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-transform: lowercase;
  transition: transform .12s var(--ease-delight), box-shadow .12s var(--ease-delight), opacity .2s;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.paywall-btn:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .12);
}
.paywall-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.paywall-note {
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  text-transform: lowercase;
  margin-top: 10px;
}

/* ── TIER 3: PAID ──────────────────────────────────────────── */
.tier3 {
  padding: 40px 24px;
  max-width: 640px;
  margin: 0 auto;
}

/* Thesis cards */
.thesis-card {
  background: rgba(0, 0, 0, .03);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 8px;
}
.tc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tc-head h3 {
  font-size: 15px;
  font-weight: 700;
  text-transform: lowercase;
}
.tc-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: var(--yel);
}
.tc-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text2);
  text-transform: lowercase;
}

/* Dark tables (report) */
.tbl {
  background: var(--dark);
  border-radius: var(--radius-card);
  padding: 4px;
  overflow-x: auto;
}
.tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  text-transform: lowercase;
}
.tbl th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.tbl td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
}

/* Sources */
.sources {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}
.sources h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.source-item {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  text-transform: lowercase;
  margin-bottom: 4px;
  display: flex;
  gap: 8px;
}
.source-num {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--dark);
  flex-shrink: 0;
}

/* ── PUSH CTA ──────────────────────────────────────────────── */
.push-cta {
  background: rgba(0, 0, 0, .03);
  padding: 32px 24px;
  text-align: center;
  max-width: 480px;
  margin: 32px auto;
  border-radius: var(--radius-card);
}
.push-cta h3,
.push-heading {
  font-size: 18px;
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 6px;
}
.push-cta p {
  font-size: 13px;
  color: var(--muted);
  text-transform: lowercase;
  margin-bottom: 16px;
}
.push-form {
  display: flex;
  gap: 6px;
  max-width: 340px;
  margin: 0 auto;
}
.push-input {
  font-family: inherit;
  font-size: 14px;
  flex: 1;
  padding: 12px 16px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, .1);
  background: var(--white);
  color: var(--text);
  outline: none;
}
.push-input:focus { border-color: var(--dark); }
.push-submit {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: var(--yel);
  border: none;
  cursor: pointer;
  text-transform: lowercase;
  transition: transform .12s var(--ease-delight), box-shadow .12s var(--ease-delight);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .12);
}
.push-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .1);
}
.push-submit:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.push-submit:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── TRACK RECORD TABLE ────────────────────────────────────── */
.track-table {
  background: var(--dark);
  border-radius: var(--radius-card);
  padding: 4px;
  overflow-x: auto;
}
.track-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  text-transform: lowercase;
}
.track-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.track-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
}
.track-table .yel,
.yel { color: var(--yel); }
.ticker-col {
  font-weight: 700;
}

/* ── GATING VISIBILITY ─────────────────────────────────────── */
.tier-free,
.tier-paid { display: none; }
body.xvary-has-free .tier-free,
body.xvary-has-paid .tier-free,
body.xvary-has-paid .tier-paid,
body.xvary-ungated .tier-free,
body.xvary-ungated .tier-paid { display: block; }
[hidden] { display: none !important; }

/* ── REVEAL ANIMATION ──────────────────────────────────────── */
/* Visual-only treatment for marketing pages: content is readable at first paint,
   then gets a light rise animation when JS marks it visible. */
.reveal {
  opacity: 1;
  transform: none;
  animation: reveal-rise .5s ease both;
}
.reveal.vis {
  opacity: 1;
  transform: none;
}
.reveal[style*="transition-delay:.05s"] { animation-delay: .05s; }
.reveal[style*="transition-delay:.1s"] { animation-delay: .1s; }
.reveal[style*="transition-delay:.15s"] { animation-delay: .15s; }
.reveal[style*="transition-delay:.2s"] { animation-delay: .2s; }
.reveal[style*="transition-delay:.25s"] { animation-delay: .25s; }
.reveal[style*="transition-delay:.3s"] { animation-delay: .3s; }

@keyframes reveal-rise {
  from {
    opacity: 0.88;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Home: selectivity stat emphasizes when the card enters view */
.selectivity-card.selectivity-inview .selectivity-stat {
  animation: selectivity-emerge .85s var(--ease-delight) both;
}
@keyframes selectivity-emerge {
  from {
    opacity: 0.82;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .dc-stats { flex-wrap: wrap; }
  .dc-stat { min-width: 50%; }
  .hero-btns { flex-direction: column; align-items: center; }
  .how-grid { grid-template-columns: 1fr; }
  .conviction-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 360px; }
  .risk-cards { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .kpi-grid-2,
  .kpi-grid-3,
  .grid-3 { grid-template-columns: 1fr; }
  .t1-strip { flex-wrap: wrap; }
  .t1-item { min-width: 33.3%; }
  .rcard { grid-template-columns: auto 1fr 50px; }
  .content-card { background: rgba(255, 255, 255, .45); }
  .content-card:hover { background: rgba(255, 255, 255, .6); }
}

@media (max-width: 480px) {
  .conviction-grid { grid-template-columns: repeat(2, 1fr); }
  .t1-item { min-width: 50%; }
  .hero h1 { letter-spacing: -2px; }
  .rcard { grid-template-columns: 1fr; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   LIBRARY COMPONENTS — Book Covers, Edu Cards, Features
   ═══════════════════════════════════════════════════════════ */

/* ── SECTION LABEL ─────────────────────────────────────────── */
.sec-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: lowercase;
  color: var(--muted);
  padding: 0 24px;
  max-width: var(--max-w-wide);
  margin: 0 auto 16px;
}

/* ── FEATURED RESEARCH HERO ───────────────────────────────── */
.featured-research--hero {
  padding-top: 88px;
}
.featured-research--hero .sec-label {
  font-size: 12px;
  letter-spacing: 2.5px;
  margin-bottom: 20px;
}
.featured-research--hero + .page-header {
  padding-top: 24px;
}

/* ── 3D BOOK COVERS ────────────────────────────────────────── */
.book-row {
  display: flex;
  gap: 24px;
  padding: 0 24px 48px;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.book-row::-webkit-scrollbar { display: none; }
.book {
  flex: 0 0 210px;
  height: 305px;
  perspective: 1200px;
  cursor: pointer;
  scroll-snap-align: start;
}
.book-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-8deg);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94);
}
.book:hover .book-inner { transform: rotateY(-2deg) translateX(4px); }
.book-face {
  position: absolute;
  inset: 0;
  border-radius: 3px 10px 10px 3px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 18px 18px 26px;
  overflow: hidden;
  box-shadow: 8px 8px 24px rgba(0, 0, 0, .35), -1px 0 4px rgba(0, 0, 0, .1), inset -2px 0 8px rgba(0, 0, 0, .1);
}
.book-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .05) 70%, transparent 100%);
  z-index: 1;
}
.book-face::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, .04), transparent);
  z-index: 1;
}
.book-face * { position: relative; z-index: 2; }
.book-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  z-index: 3;
  background: linear-gradient(90deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .15) 40%, rgba(255, 255, 255, .04) 70%, rgba(0, 0, 0, .1) 100%);
  border-radius: 3px 0 0 3px;
}
.book-spine::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .06);
}
.book-spine::after {
  content: 'research';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255, 229, 0, .7);
  white-space: nowrap;
}
.book-pages {
  position: absolute;
  right: -6px;
  top: 4px;
  bottom: 4px;
  width: 6px;
  z-index: 0;
  border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(to right, #e8e4df 0px, #e8e4df 1px, #f5f2ed 1px, #f5f2ed 2px);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .15);
}
.book-brand {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--yel);
  letter-spacing: 3px;
  position: absolute;
  top: 16px;
  left: 26px;
  z-index: 2;
}
.book-icon {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
.book-date {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  writing-mode: vertical-rl;
  letter-spacing: 1px;
}
.book-tag {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.book h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
  text-transform: lowercase;
  margin-bottom: 4px;
}
.book p {
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.3;
  text-transform: lowercase;
}
.b1 .book-face { background: linear-gradient(160deg, #0d1b2a 0%, #1b3a5c 40%, #0a2847 100%); }
.b2 .book-face { background: linear-gradient(160deg, #0e0e0e 0%, #1c1c1c 50%, #0e0e0e 100%); }
.b3 .book-face { background: linear-gradient(160deg, #0a2e2e 0%, #184848 50%, #0a2020 100%); }
.b4 .book-face { background: linear-gradient(160deg, #2a1a0a 0%, #4a3020 50%, #2a1a0a 100%); }
.b5 .book-face { background: linear-gradient(160deg, #1a0a2a 0%, #2e1850 50%, #1a0a2a 100%); }
.b6 .book-face { background: linear-gradient(160deg, #2a0a0a 0%, #4a1818 50%, #2a0a0a 100%); }
.book-photo .book-face { background-size: cover; background-position: center; }
.book-photo .book-face::before {
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .4) 35%, rgba(0, 0, 0, .15) 60%, rgba(0, 0, 0, .2) 100%);
}

/* ── EDUCATIONAL CARDS ─────────────────────────────────────── */
.edu-section {
  padding: 0 24px 60px;
  max-width: var(--max-w-wide);
  margin: 0 auto;
}
.edu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.edu-card {
  background: var(--warm);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: transform .2s;
}
.edu-card:hover { transform: translateY(-4px); }
.edu-card h3 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: lowercase;
  margin-bottom: 12px;
  letter-spacing: -.5px;
}
.edu-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text2);
  flex: 1;
}

/* ── DARK FEATURE ROW ──────────────────────────────────────── */
.feat-section {
  padding: 0 24px 60px;
  max-width: var(--max-w-wide);
  margin: 0 auto;
}
.feat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.feat {
  background: var(--dark);
  border-radius: var(--radius-card);
  padding: 32px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform .2s;
}
.feat:hover { transform: translateY(-4px); }
.feat::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: var(--yel);
  opacity: .04;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  top: -60px;
  right: -60px;
}
.feat h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 8px;
  color: var(--yel);
}
.feat p {
  font-size: 15px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.6;
  text-transform: lowercase;
}
.feat-num {
  font-size: 72px;
  font-weight: 800;
  color: rgba(255, 229, 0, .06);
  position: absolute;
  top: 16px;
  right: 24px;
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

/* ── SKIP LINK ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  padding: 10px 20px;
  background: var(--dark);
  color: var(--yel);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  text-transform: lowercase;
}
.skip-link:focus {
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── FOCUS STYLES ──────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--dark);
  outline-offset: 2px;
}
.bg-white :focus-visible,
.nav--white :focus-visible {
  outline-color: var(--dark);
}
.dark-card :focus-visible,
.email-gate :focus-visible,
.paywall-gate :focus-visible,
.tbl :focus-visible,
.table-card :focus-visible,
.comp-card :focus-visible,
.track-table :focus-visible,
.step-card :focus-visible,
.kpi-mini :focus-visible,
.conviction-card :focus-visible,
.price-card.feat :focus-visible {
  outline-color: var(--yel);
}
.gate-input:focus-visible {
  outline: none;
  border-color: var(--yel);
  box-shadow: 0 0 0 2px rgba(255, 229, 0, .3);
}
.push-input:focus-visible {
  outline: none;
  border-color: var(--dark);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .15);
}

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .selectivity-card.selectivity-inview .selectivity-stat {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .xvary-verify-bar__fill--run {
    animation: none !important;
    width: 100% !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── MOBILE HAMBURGER ──────────────────────────────────────── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--dark);
  position: absolute;
  left: 10px;
  transition: transform .2s;
}
.nav-toggle span { top: 19px; }
.nav-toggle span::before {
  content: '';
  top: -6px;
  position: absolute;
  width: 20px;
  height: 2px;
  background: inherit;
}
.nav-toggle span::after {
  content: '';
  top: 6px;
  position: absolute;
  width: 20px;
  height: 2px;
  background: inherit;
}
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--dark);
}
.nav-toggle[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--dark);
}

@media (max-width: 768px) {
  .library-controls {
    padding: 0 16px 16px;
  }
  .library-controls-inner {
    padding: 12px;
  }
  .library-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .library-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .library-select {
    min-width: 0;
    width: 100%;
  }
  .library-view-toggle {
    display: none;
  }
  .grid,
  .library-load-more-wrap,
  .library-table-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .library-section-head {
    display: block;
  }
  .rcard {
    display: block;
  }
  .rcard-main {
    align-items: flex-start;
  }
  .rcard-side {
    margin-top: 12px;
    text-align: left;
    min-width: 0;
  }
  .library-table-wrap {
    display: none;
  }
  .library-hover-preview {
    display: none;
  }
  .edu-grid { grid-template-columns: 1fr; }
  .feat-row { grid-template-columns: 1fr; }
  .book { flex: 0 0 180px; height: 260px; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 16px 24px;
    gap: 12px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 16px; }
}

/* ===== EGG DUCK — easter egg component ===== */
/* EDIT-1-START */
.egg-duck{position:relative;display:inline-block;vertical-align:middle}
.egg-duck,.egg-duck *{box-sizing:border-box}
.egg-duck .ed-egg{position:absolute;inset:0;background:#fff;border:3px solid #000;border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.egg-duck .ed-head{position:absolute;background:#fff;border:3px solid #000;border-radius:50%;z-index:2}
.egg-duck .ed-bill{position:absolute;background:#FFE500;border:3px solid #000;border-radius:40% 60% 60% 40%/50% 50% 50% 50%;z-index:3}
.egg-duck .ed-eye{position:absolute;background:#000;border-radius:50%;z-index:4}

.egg-duck.ed-md{width:80px;height:90px}
.egg-duck.ed-md .ed-head{top:2px;left:18px;width:44px;height:44px}
.egg-duck.ed-md .ed-bill{top:20px;left:46px;width:32px;height:18px}
.egg-duck.ed-md .ed-eye{width:5px;height:5px;top:14px}
.egg-duck.ed-md .ed-eye.l{left:28px}
.egg-duck.ed-md .ed-eye.r{left:42px}

.egg-duck.ed-sm{width:50px;height:56px}
.egg-duck.ed-sm .ed-egg{border-width:2.5px}
.egg-duck.ed-sm .ed-head{top:1px;left:11px;width:28px;height:28px;border-width:2.5px}
.egg-duck.ed-sm .ed-bill{top:12px;left:28px;width:20px;height:12px;border-width:2.5px}
.egg-duck.ed-sm .ed-eye{width:3.5px;height:3.5px;top:9px}
.egg-duck.ed-sm .ed-eye.l{left:17px}
.egg-duck.ed-sm .ed-eye.r{left:27px}

.egg-duck.ed-xs{width:30px;height:34px}
.egg-duck.ed-xs .ed-egg{border-width:2px}
.egg-duck.ed-xs .ed-head{top:0;left:6px;width:18px;height:18px;border-width:2px}
.egg-duck.ed-xs .ed-bill{top:7px;left:17px;width:13px;height:8px;border-width:2px}
.egg-duck.ed-xs .ed-eye{width:2.5px;height:2.5px;top:5px}
.egg-duck.ed-xs .ed-eye.l{left:11px}
.egg-duck.ed-xs .ed-eye.r{left:17px}

.egg-duck.ed-sleep .ed-eye{background:transparent;border-bottom:2.5px solid #000;border-radius:0 0 50% 50%;height:3px}
.egg-duck.ed-md.ed-sleep .ed-eye{top:16px}
.egg-duck.ed-wink .ed-eye.r{background:transparent;border-bottom:2.5px solid #000;border-radius:0 0 50% 50%;height:3px}
.egg-duck.ed-md.ed-wink .ed-eye.r{top:16px}
.egg-duck.ed-tilt .ed-head{transform:rotate(-12deg)}
.egg-duck.ed-tilt .ed-bill{transform:rotate(-12deg)}
.egg-duck.ed-search .ed-head{transform:rotate(-12deg)}
.egg-duck.ed-search .ed-bill{transform:rotate(-12deg);top:18px;left:44px}
.egg-duck.ed-search .ed-eye.l{top:12px;left:26px}
.egg-duck.ed-search .ed-eye.r{top:10px;left:40px}
.egg-duck.ed-sm.ed-search .ed-bill{top:10px;left:26px}
.egg-duck.ed-sm.ed-search .ed-eye.l{top:7px;left:15px}
.egg-duck.ed-sm.ed-search .ed-eye.r{top:6px;left:25px}

.egg-duck.ed-dark .ed-egg{border-color:#fff}
.egg-duck.ed-dark .ed-head{border-color:#fff}
.egg-duck.ed-dark .ed-bill{border-color:#fff}
.egg-duck.ed-dark .ed-eye{background:#fff}
.egg-duck.ed-dark.ed-sleep .ed-eye{border-color:#fff;background:transparent}

.ed-crack{position:absolute;width:1.5px;background:#000;z-index:1}

/* ═══════════════════════════════════════════════════════════════
   DELIGHT — gating feedback, checkout verify, gate messages
   (strip entrance lives in gate.js injected CSS — works without brutalist)
   ═══════════════════════════════════════════════════════════════ */

.xvary-checkout-verify-wrap {
  margin-bottom: 10px;
}
.xvary-checkout-verify-wrap[hidden] {
  display: none !important;
}
.xvary-verify-bar {
  height: 3px;
  background: rgba(0, 0, 0, .08);
  border-radius: 100px;
  overflow: hidden;
}
.xvary-verify-bar__fill {
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: var(--yel);
}
.xvary-verify-bar__fill--run {
  animation: xvary-verify-wipe .85s var(--ease-delight) forwards;
}
@keyframes xvary-verify-wipe {
  to { width: 100%; }
}

[data-xvary-msg].xvary-msg-ok,
.xvary-msg.xvary-msg-ok,
.gate-msg.xvary-msg-ok,
.snap-gate-msg.xvary-msg-ok {
  color: var(--text);
  font-weight: 600;
}
[data-xvary-msg].xvary-msg-err,
.xvary-msg.xvary-msg-err,
.gate-msg.xvary-msg-err,
.snap-gate-msg.xvary-msg-err {
  color: var(--red);
}

body.xvary-unlock-flash .tier-free:not([hidden]),
body.xvary-unlock-flash .tier2:not([hidden]),
body.xvary-unlock-flash .tier-paid:not([hidden]),
body.xvary-unlock-flash .tier3:not([hidden]) {
  animation: xvary-tier-emerge .55s var(--ease-delight) both;
}
@keyframes xvary-tier-emerge {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.xvary-unlock-flash .tier-free:not([hidden]),
  body.xvary-unlock-flash .tier2:not([hidden]),
  body.xvary-unlock-flash .tier-paid:not([hidden]),
  body.xvary-unlock-flash .tier3:not([hidden]) {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* built different duck row — footer v21 */
.fd-duck{position:relative;display:inline-block;width:20px;height:22px;vertical-align:bottom}
.fd-duck *{box-sizing:border-box}
.fd-duck .fd-body{position:absolute;inset:0;background:#fff;border:1.5px solid #000;border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.fd-duck .fd-head{position:absolute;top:0;left:4px;width:12px;height:12px;background:#fff;border:1.5px solid #000;border-radius:50%;z-index:2}
.fd-duck .fd-bill{position:absolute;top:4px;left:11px;width:8px;height:5px;background:#FFE500;border:1.5px solid #000;border-radius:40% 60% 60% 40%/50% 50% 50% 50%;z-index:3}
.fd-duck .fd-eye{position:absolute;width:2px;height:2px;background:#000;border-radius:50%;z-index:4;top:3px;left:9px}
.fd-duck.fd-rebel{transform:scaleX(-1);margin-left:4px}
.fd-row{display:inline-flex;gap:8px;align-items:flex-end}
.fd-row .fd-duck:nth-child(2){margin-bottom:4px}
.fd-label{display:block;font-family:'DM Mono',monospace;font-size:9px;text-transform:lowercase;opacity:.35;margin-top:4px;letter-spacing:.02em}
.footer .fd-row-wrap{text-align:center;padding-top:12px;opacity:0;transition:opacity .6s ease;margin-top:8px}
.footer .fd-row-wrap.visible{opacity:1}

/* footer duck styling */
.footer .fd-duck .fd-body{background:#fff}
.footer .fd-duck .fd-head{background:#fff}
.footer .fd-label{color:rgba(0,0,0,.35)}
/* EDIT-1-END */