:root {
  /* Colors — clean, minimal, premium */
  --black: #0d0d0d;
  --dark: #1a1a1a;
  --gray-900: #2a2a2a;
  --gray-700: #555;
  --gray-500: #6f6f6f;        /* darkened from #888 for WCAG AA on white/cream */
  --gray-300: #c4c4c4;
  --gray-100: #f0f0f0;
  --white: #fafafa;
  --pure-white: #ffffff;
  --gold: #c9a227;            /* bright gold — accents, buttons, on dark only */
  --gold-text: #8a6a12;       /* AA-passing gold for small text on light bg */
  --gold-light: #e8d48b;
  --gold-bg: rgba(201, 162, 39, 0.06);
  --gold-border: rgba(201, 162, 39, 0.15);
  --cream: #f7f5f0;
  --red: #e23636;
  --green: #1a8a4a;

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-serif: 'Playfair Display', serif;

  /* Spacing */
  --section-pad: clamp(80px, 10vw, 140px);
  --container: 1200px;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.6s;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--pure-white);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); line-height: 1.1; font-weight: 700; }

/* ===== UTILITIES ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-pad) 0; }
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-gray { color: var(--gray-500); }
.text-small { font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ===== NAVIGATION ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: all 0.4s var(--ease);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 14px 0;
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo .arrow {
  color: var(--gold);
  font-size: 14px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-700);
  transition: color 0.3s;
  position: relative;
}
.nav-links a:hover { color: var(--black); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  background: var(--black);
  color: var(--pure-white) !important;
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s var(--ease);
}
.nav-cta:hover {
  background: var(--gold);
  color: var(--black) !important;
  transform: translateY(-1px);
}
.nav-cta::after { display: none !important; }

/* Mobile menu */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  /* 44x44 hit area without moving the glyph — the burger is the only
     navigation on phones and it was 32x24. */
  padding: 14px 10px;
  margin: -10px -6px -10px 0;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--black);
  transition: all 0.3s;
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  background: var(--pure-white);
  overflow: hidden;
}
.hero-content {
  max-width: 800px;
  padding-top: 100px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.hero-tag::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--gold);
}
.hero h1 {
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -2px;
  margin-bottom: 28px;
  color: var(--black);
}
.hero h1 .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.hero-sub {
  font-size: 18px;
  line-height: 1.7;
  color: var(--gray-700);
  max-width: 520px;
  margin-bottom: 40px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  /* Without this, a full-width button lays its label out at flex-start —
     which is why Sign In sat on the left. */
  justify-content: center;
  text-align: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 10px;
  transition: all 0.3s var(--ease);
}
.btn-primary {
  background: var(--black);
  color: var(--pure-white);
}
.btn-primary:hover {
  background: var(--gold);
  color: var(--black);
  transform: translateY(-2px);
}
.btn-secondary {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--gray-300);
}
.btn-secondary:hover {
  border-color: var(--black);
  transform: translateY(-2px);
}
.btn-gold {
  background: var(--gold);
  color: var(--black);
}
.btn-gold:hover {
  background: var(--black);
  color: var(--pure-white);
  transform: translateY(-2px);
}
.btn-large {
  padding: 18px 40px;
  font-size: 16px;
}
.btn .arrow-icon {
  transition: transform 0.3s var(--ease);
}
.btn:hover .arrow-icon {
  transform: translateX(4px);
}

/* ===== SOCIAL PROOF BAR ===== */
.proof-bar {
  padding: 40px 0;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  background: var(--cream);
}
.proof-bar-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.proof-stat {
  text-align: center;
}
.proof-stat .number {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--black);
}
.proof-stat .label {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
}

/* ===== PRODUCTS ===== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.product-card {
  background: var(--pure-white);
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.4s var(--ease);
}
.product-card:hover {
  border-color: var(--gold-border);
  transform: translateY(-4px);
}
.product-card-image {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  position: relative;
  overflow: hidden;
}
.product-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.03) 100%);
}
.product-card-body {
  padding: 28px;
}
.product-card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.product-card-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--black);
}
.product-card-desc {
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: 20px;
}
.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-price {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--black);
}
.product-price .currency {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-500);
  vertical-align: super;
}

/* ===== HOW IT WORKS ===== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
}
.step {
  text-align: center;
  padding: 0 16px;
}
.step-number {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 800;
  color: var(--gold);
  opacity: 0.35;
  margin-bottom: 16px;
  line-height: 1;
}
.step h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--black);
}
.step p {
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.6;
}

/* ===== SECTION HEADERS ===== */
.section-header {
  max-width: 600px;
  margin-bottom: 60px;
}
.section-header.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 16px;
}
.cta-section .section-tag,
.product-tile-dark .section-tag { color: var(--gold-light); }
.section-title {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -1px;
  margin-bottom: 16px;
  color: var(--black);
}
.section-sub {
  font-size: 17px;
  color: var(--gray-700);
  line-height: 1.6;
}

/* ===== TESTIMONIALS ===== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial {
  background: var(--cream);
  border-radius: 14px;
  padding: 32px;
}
.testimonial-stars {
  color: var(--gold);
  font-size: 16px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.testimonial-text {
  font-size: 15px;
  color: var(--dark);
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}
.testimonial-author {
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
}
.testimonial-role {
  font-size: 13px;
  color: var(--gray-500);
}

/* ===== CTA SECTION ===== */
.cta-section {
  /* a paper surface like every other section — the old near-black slab is
     retired, and text painted for it was invisible on cream */
  color: var(--ink);
  text-align: center;
  padding: var(--section-pad) 0;
}
.cta-section .section-tag { color: var(--gold-text); }
.cta-section .section-title { color: var(--ink); }
.cta-section .section-sub { color: var(--ink-soft); }

/* ===== FOOTER ===== */
.footer {
  padding: 60px 0 40px;
  border-top: 1px solid var(--gray-100);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand {
  max-width: 280px;
}
.footer-brand .nav-logo {
  margin-bottom: 12px;
}
.footer-brand p {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--black);
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 10px;
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--gray-500);
}

/* ===== PRODUCT SALES PAGE ===== */
.sales-hero {
  padding: 160px 0 80px;
  background: var(--cream);
}
.sales-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.sales-hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}
.sales-hero .price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}
.sales-hero .price-tag .price {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  color: var(--black);
}
.sales-hero .price-tag .original {
  font-size: 20px;
  color: var(--gray-500);
  text-decoration: line-through;
}
.sales-preview {
  background: var(--pure-white);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid var(--gray-100);
}
.feature-list {
  margin: 24px 0;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
  color: var(--gray-700);
}
.feature-list .check {
  color: var(--green);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.content-preview {
  margin-top: 60px;
}
.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.preview-card {
  background: var(--cream);
  border-radius: 10px;
  padding: 24px;
  border: 1px solid var(--gray-100);
}
.preview-card h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--black);
}
.preview-card p {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
}

/* ===== DOWNLOAD / SUCCESS PAGE ===== */
.success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px;
}
.success-card {
  max-width: 500px;
  background: var(--pure-white);
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  padding: 48px;
}
.success-icon {
  font-size: 64px;
  margin-bottom: 24px;
}
.success-card h1 {
  font-size: 32px;
  margin-bottom: 12px;
}
.success-card p {
  color: var(--gray-700);
  margin-bottom: 32px;
}
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--black);
  padding: 16px 36px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s var(--ease);
}
.download-btn:hover {
  background: var(--black);
  color: var(--pure-white);
  transform: translateY(-2px);
}

/* ===== ADMIN REVENUE TRACKER ===== */
.admin-page {
  padding: 100px 0 60px;
  background: var(--cream);
  min-height: 100vh;
}
.admin-header {
  margin-bottom: 40px;
}
.admin-header h1 {
  font-size: 32px;
  margin-bottom: 8px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.stat-card {
  background: var(--pure-white);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid var(--gray-100);
}
.stat-card .label {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.stat-card .value {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--black);
}
.stat-card .value.positive { color: var(--green); }
.stat-card .value.negative { color: var(--red); }
.admin-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
.admin-card {
  background: var(--pure-white);
  border-radius: 14px;
  padding: 28px;
  border: 1px solid var(--gray-100);
}
.admin-card h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--black);
}
.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.form-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-100);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.3s;
  background: var(--pure-white);
}
.form-input:focus {
  outline: none;
  border-color: var(--gold);
}
.form-select {
  padding: 10px 14px;
  border: 1.5px solid var(--gray-100);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--pure-white);
  cursor: pointer;
}
.form-btn {
  padding: 10px 20px;
  background: var(--black);
  color: var(--pure-white);
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.3s;
}
.form-btn:hover { background: var(--gold); color: var(--black); }
.log-list {
  margin-top: 16px;
  max-height: 300px;
  overflow-y: auto;
}
.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}
.log-item .amount { font-weight: 700; }
.log-item .amount.revenue { color: var(--green); }
.log-item .amount.expense { color: var(--red); }
.log-item .meta { color: var(--gray-500); font-size: 13px; }
.log-item .delete-btn {
  color: var(--gray-300);
  font-size: 18px;
  transition: color 0.3s;
  padding: 4px 8px;
}
.log-item .delete-btn:hover { color: var(--red); }

/* Goal progress */
.goal-bar-bg {
  width: 100%;
  height: 12px;
  background: var(--gray-100);
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0;
}
.goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--green));
  border-radius: 10px;
  transition: width 0.6s var(--ease);
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: calc(100vw - 48px);
  background: var(--black);
  color: var(--pure-white);
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s var(--ease);
  z-index: 1000;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ===== LANDING PRODUCT TILES ===== */
.product-tile {
  padding: clamp(64px, 9vw, 120px) 24px;
}
.product-tile > * {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.product-tile h1,
.product-tile h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(32px, 4.5vw, 52px);
  letter-spacing: -1px;
  text-align: center;
  margin-bottom: 16px;
  color: var(--black);
}
.product-tile .lead {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 36px;
}
.product-tile-cream { background: var(--cream); color: var(--black); }
/* v73: this tile is a paper surface like every other one now — the old
   near-black fill is gone, so painting its text white made the Glow hero
   1.02:1 in light and unreadable in dark. */
.product-tile-dark { background: var(--surface); color: var(--ink); }
.product-tile-dark h1,
.product-tile-dark h2 { color: var(--ink); }
.product-tile-dark .lead { color: var(--ink-soft); }
.lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--gray-700);
}
.product-tile-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.tile-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.tile-price {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}
.trust-badge svg { width: 16px; height: 16px; fill: var(--gold); flex-shrink: 0; }
.product-tile-dark .trust-badge { color: var(--gray-300); }
.product-tile-image { text-align: center; }
.product-tile-image img { margin-left: auto; margin-right: auto; }
.product-card-price {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--black);
}

/* Portal browser-window mockup */
.portal-mockup {
  max-width: 620px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(0,0,0,0.10);
}
.portal-mockup-header {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  background: #1c1c1c;
}
.portal-mockup-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #3a3a3a;
}

/* Mini macro calculator */
.mini-calc {
  max-width: 560px;
  margin: 48px auto 0;
  background: var(--pure-white);
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  padding: 28px;
  text-align: center;
}
.mini-calc-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.mini-calc-input {
  flex: 1;
  min-width: 150px;
  padding: 14px 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--pure-white);
  color: var(--black);
}
.mini-calc-input:focus {
  outline: none;
  border-color: var(--gold);
}
.mini-calc-btn {
  padding: 14px 28px;
  background: var(--black);
  color: var(--pure-white);
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s var(--ease);
}
.mini-calc-btn:hover { background: var(--gold); color: var(--black); }
.mini-calc-result {
  display: none;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--gray-100);
}
.mini-calc-result.active { display: block; }

/* ===== PRODUCT-MATCH QUIZ ===== */
.quiz-container {
  max-width: 640px;
  margin: 0 auto;
  background: var(--pure-white);
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: quizIn 0.4s var(--ease); }
@keyframes quizIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.quiz-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.quiz-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gray-300);
  transition: all 0.3s var(--ease);
}
.quiz-dot.active {
  background: var(--gold);
  width: 26px;
  border-radius: 999px;
}
.quiz-question {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.5px;
  margin-bottom: 24px;
  color: var(--black);
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
}
.quiz-option {
  padding: 16px 22px;
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  background: var(--pure-white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--black);
  transition: all 0.25s var(--ease);
}
.quiz-option:hover {
  border-color: var(--gold);
  background: var(--gold-bg);
  transform: translateY(-2px);
}
.quiz-input {
  width: 100%;
  max-width: 440px;
  padding: 15px 18px;
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  text-align: center;
  margin: 0 auto 4px;
}
.quiz-input:focus {
  outline: none;
  border-color: var(--gold);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .product-tile-actions { flex-direction: column; gap: 16px; }
  .mini-calc-row { flex-direction: column; }
  .mini-calc-input { min-width: 0; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open { gap: 0; }
  .nav-links.open a { padding: 12px 0; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--pure-white);
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--gray-100);
  }
  .hero h1 { letter-spacing: -1px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .products-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; gap: 32px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .sales-hero-inner { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
  .proof-bar-inner { gap: 32px; }
}

/* ===== STICKY BUY BAR (sales pages) ===== */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(13, 13, 13, 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--pure-white);
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 12px 24px;
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.buy-bar.show { transform: translateY(0); }
.buy-bar .bb-name { font-weight: 600; font-size: 15px; }
.buy-bar .bb-price { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--gold-light); }
@media (max-width: 600px) { .buy-bar { gap: 14px; padding: 10px 16px; } .buy-bar .bb-name { display: none; } }

/* ===== ACCESSIBILITY ===== */
/* Visible keyboard focus (matches the gold input focus language) */
.btn:focus-visible,
.nav-cta:focus-visible,
.nav-links a:focus-visible,
.nav-toggle:focus-visible,
.quiz-option:focus-visible,
.mini-calc-btn:focus-visible,
.footer-col a:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Tall tablets (iPad portrait). A 100vh hero with vertically-centred content
   strands the headline near the middle of a very tall screen, so the first
   screenful is mostly empty. Cap the height there so the pitch is visible on
   load. Phones and normal desktop viewports are deliberately untouched. */
@media (min-width: 768px) and (max-width: 1200px) and (min-height: 900px) {
  .hero { min-height: 72vh; }
  .hero-content { padding-top: 32px; }
}

/* ── Native app context ────────────────────────────────────────────────────
   Inside the iOS app the website's sitemap footer (Products / Company /
   Connect columns) is out of place — native apps don't carry one, and it makes
   the app read as a wrapped web page. Collapse it to a single centred legal
   strip. The website keeps its full footer; only the app is affected. */
.elevate-native .footer {
  padding: 20px 0 30px;
}
.elevate-native .footer-inner {
  display: none;
}
.elevate-native .footer-legal {
  justify-content: center;
  gap: 16px !important;
  padding: 0 0 12px !important;
}
/* The footer's payment-processor line named Stripe inside the app, on eight
   pages. Apple handles payment in the app, so it is both off-message and a
   3.1.1 flag. Keep the copyright, drop the processor. */
.elevate-native .footer-bottom span:last-child { display: none !important; }
.elevate-native .footer-bottom {
  margin-top: 0;
  padding-top: 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

/* Marketing pages reached from inside the app (Plans, the quiz) must not open
   with a full-screen hero — in an app that reads as a dead first screen and a
   lot of pointless scrolling. Collapse the hero to its content. */
.elevate-native .hero {
  min-height: auto;
  /* The nav is position:fixed, so the hero must still clear it or the logo
     lands on top of the eyebrow text. 76px ≈ nav height (20 + ~28 + 20). */
  padding: 76px 0 8px;
}
.elevate-native .hero-content {
  padding-top: 0;
}
/* These pages set padding-top:150-160px inline to clear the fixed nav on the
   website. In the app that reads as a dead first screen, so override it — but
   keep enough clearance that content never slides under the fixed nav. */
.elevate-native .section {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}
.elevate-native section.section:first-of-type {
  padding-top: 86px !important;
}

/* Phones (website): the hero's centred content sits too low on a tall phone
   screen, pushing the headline below a large empty band. */
@media (max-width: 600px) {
  /* 84px clears the fixed nav — 26px put the gold eyebrow through the logo. */
  .hero { min-height: auto; padding: 84px 0 10px; }
  .hero-content { padding-top: 0; }
}

/* Inside the app every screen is centred (the app home sets that tone), so the
   marketing pages reached from the app follow suit instead of switching to the
   website's left-aligned editorial layout mid-journey. */
.elevate-native .hero-content,
.elevate-native .section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.elevate-native .hero-actions {
  /* On phones the buttons stack into a column, where align-items (not
     justify-content) controls horizontal position. Set both. */
  justify-content: center;
  align-items: center;
}
.elevate-native .hero-sub,
.elevate-native .section-sub {
  margin-left: auto;
  margin-right: auto;
}
.elevate-native .hero-tag {
  justify-content: center;
}

/* Shown in the app where a Subscribe button would be on the website. */
.app-purchase-note {
  font-size: 14px;
  color: var(--gray-500);
  text-align: center;
  margin: 12px 0;
}

/* Centre every box's text inside the app. On the website the editorial
   left-alignment stays; in the app everything reads as centred cards. */
.elevate-native .section,
.elevate-native .product-card-body,
.elevate-native .app-card-content,
.elevate-native .goal-card,
.elevate-native .footer {
  text-align: center;
}
.elevate-native .product-card-footer,
.elevate-native .app-card-content,
.elevate-native .proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.elevate-native .section ul,
.elevate-native .section ol {
  list-style-position: inside;
  padding-left: 0;
}

/* Product cards: buy directly, with details as the secondary option. */
.card-cta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.card-cta .btn { padding: 11px 18px; font-size: 14px; }
@media (max-width: 600px) {
  /* Both cards stack identically: price on its own line, then equal buttons.
     Previously one card kept a space-between row and orphaned the "/ mo". */
  .product-card-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .product-price { text-align: center; white-space: nowrap; }
  .card-cta { width: 100%; justify-content: stretch; }
  .card-cta .btn { flex: 1; white-space: nowrap; }
  /* The owned-state label is far longer than any price CTA; let it wrap
     rather than overflow the card on a 320px screen. */
  .card-cta .btn.btn-owned { white-space: normal; line-height: 1.3; }
}

/* Shown on the products page when a lapsed member arrives to renew. */
.renew-banner {
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 28px;
  text-align: center;
  font-weight: 600;
  color: var(--gold-text, #8a6a12);
}

/* ═══════════════════════════════════════════════════════════════
   v65 DESIGN SYSTEM — website. Round-10 verdict: "2015 template".
   Gold becomes a fill; copy stops being centred; cards get one recipe.
   ═══════════════════════════════════════════════════════════════ */
:root { --gold-ink: #8a6a12; --line-ink: rgba(26,26,26,0.10);
        --shadow-card: 0 1px 2px rgba(26,26,26,0.04), 0 6px 18px rgba(26,26,26,0.05); }

/* 1 ─ No small gold text on light (2.2:1 → 4.6:1) */
.section-tag, .hero-tag, .nav-links a[style*="gold"], .tile-price span,
.footer a:hover, .quiz-result .section-tag, .product-card-tag { color: var(--gold-ink) !important; }
.step-number { opacity: 1 !important; color: var(--gold-ink) !important; }

/* 2 ─ One card recipe with real depth (borders at 1.08:1 read as nothing) */
.product-card, .preview-card, .testimonial, .step, .quiz-container, .renew-banner {
  background: #fff; border: 1px solid var(--line-ink); border-radius: 14px;
}
.preview-card, .testimonial, .step { text-align: left; }

/* 3 ─ The bundle box is the hero offer — give it a real container */
.products-grid + div[class="reveal"], .container > .reveal[style*="border: 2px solid"] {
  border: 1px solid #1a1a1a !important;
}

/* 4 ─ Typed input text belongs on the left (centred fields are a template tell) */
input[type="email"], input[type="password"], input[type="text"], input[type="number"], .quiz-input {
  text-align: left !important; border-radius: 10px;
}
.form-group label { text-align: left; display: block; }

/* 5 ─ Numbers are tabular so stats stop wobbling */
.proof-stat .number, .product-card-price, .tile-price, .product-price, .mini-calc-result { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* 6 ─ Type: tighter display tracking, calmer captions */
.section-title, .hero h1, .product-tile h2 { letter-spacing: -0.02em; }
.section-tag, .hero-tag { font-size: 11px; letter-spacing: 0.16em; }

/* 7 ─ Three radii on the site too */
.btn, .nav-cta, .proof-stat, .streak-badge { border-radius: 999px; }

/* v66 — round-11: the Playfair italic gold word is the med-spa tell; and .step
   joined the card recipe while keeping `padding: 0 16px` (a card with no
   vertical padding is the one thing you cannot ship). */
.hero h1 .serif { font-family: var(--font-heading), 'Outfit', sans-serif !important; font-style: normal !important; font-weight: 800 !important; color: var(--ink, #1a1a1a) !important; border-bottom: 4px solid var(--gold, #c9a227); padding-bottom: 2px; }
.step { padding: 30px 22px !important; }
.product-card, .preview-card, .testimonial, .step, .quiz-container {
  border-color: rgba(26,26,26,0.14) !important;
  border-radius: 14px !important;
}

/* v67 — one primary-action shape across site and apps */
.btn, .nav-cta, .quiz-option, .mini-calc-btn { border-radius: 999px !important; }
/* typed input alignment must reach the app pages too (they don't load style.css,
   so the apps carry their own copy of this rule) */
input, textarea, select { text-align: left; }

/* ═══ v68 ART DIRECTION — website ═══ */
:root { color-scheme: light dark; --page-warm:#ece7dc; --surface-warm:#fffdf8; --ink-warm:#1f1b14; --ink-soft-warm:#6b6252; --hair-warm:rgba(31,27,20,0.09);
        --ink-inverse:#f6f1e6; }
body { background: var(--page-warm); color: var(--ink-warm); }
.product-card, .preview-card, .testimonial, .step, .quiz-container {
  background: var(--surface-warm); border: 1px solid var(--hair-warm); border-radius: 14px; }
.btn-primary, .btn-gold, .nav-cta { background: var(--ink-warm); color: var(--ink-inverse); border-color: var(--ink-warm); }
.btn-secondary { background: transparent; color: var(--ink-warm); border: 1px solid var(--hair-warm); }
.section-tag, .hero-tag { color: var(--gold-ink) !important; letter-spacing: 0.14em; font-size: 10.5px; }
.section-title, .hero h1 { letter-spacing: -0.03em; }
.product-card-title, .preview-card h4 { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.006em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── v73 — the buy path joins the product ──────────────────────────────────
   Warren opened the app in dark mode, tapped a locked tile and was thrown
   into a pure-white sales page: "the shop is a different company." The two
   apps have run the warm-paper system since v65 and carried a dark theme
   since v70; this stylesheet had neither (grep prefers-color-scheme returned
   zero). Same tokens, same law: surfaces are paper, gold is a measure rule,
   primary buttons are ink. */
:root {
  --page: #ece7dc; --surface: #fffdf8; --ink: #1f1b14; --ink-soft: #6b6252;
  --hair: rgba(31,27,20,0.13);
}
body { background: var(--page); color: var(--ink); }
.section, .cta-section { background: transparent; }
.section[style*="var(--cream)"], .section[style*="cream"] { background: transparent !important; }
.card, .product-tile, .testimonial, .pricing-card, .quiz-container, .mini-calc, .app-card {
  background: var(--surface); border: 1px solid var(--hair); box-shadow: none;
}
.btn-primary, .btn-gold {
  background: var(--ink); color: #f6f1e6; border-color: var(--ink);
}
.btn-primary:hover, .btn-gold:hover { background: #000; color: #fff; }
.section-tag { color: var(--ink-soft); letter-spacing: 0.14em; font-size: 10.5px; }
.section-title, h1, h2, h3 { letter-spacing: -0.03em; }
.footer { background: transparent; border-top: 1px solid var(--hair); }

@media (prefers-color-scheme: dark) {
  :root {
    --page: #100e0a; --surface: #262219; --ink: #f2ede1; --ink-soft: #a49b88;
    --hair: rgba(242,237,225,0.14);
    --cream: #100e0a; --white: #100e0a; --pure-white: #262219;
    --gray-700: #cdc6b7; --gray-500: #a49b88; --gray-300: #8d8677; --gray-100: #2c2820;
    --black: #f2ede1; --dark: #f2ede1;
    --gold-text: #e6c37a; --gold-ink: #e6c37a;
    --gold-bg: rgba(230,195,122,0.10); --gold-border: rgba(230,195,122,0.28);
    /* the v68 layer paints with these names — re-derive BOTH sets or the
       buy path keeps light values at night (7 reviewers found exactly that) */
    --page-warm: #100e0a; --surface-warm: #262219; --ink-warm: #f2ede1;
    --ink-soft-warm: #a49b88; --hair-warm: rgba(242,237,225,0.14);
    --ink-inverse: #100e0a;
  }
  body { background: var(--page); color: var(--ink); }
  .nav, .footer, .section, .cta-section { background: transparent; }
  .card, .product-tile, .product-card, .preview-card, .step, .testimonial,
  .pricing-card, .quiz-container, .mini-calc, .app-card, .renew-banner {
    background: var(--surface); border-color: var(--hair);
  }
  /* the "Best Value" bundle box hard-codes a near-black border that never
     inverted — at night the hero offer had no visible container at all */
  .container > .reveal[style*="border: 2px solid"] {
    border-color: var(--hair) !important; background: var(--surface) !important;
  }
  /* the sticky nav went near-white 60px into a scroll while its links stayed cream */
  .nav.scrolled { background: rgba(16,14,10,0.95); }
  /* the law survives the theme: primary actions stay ink-inverse, not gold */
  .btn-primary, .btn-gold { background: #f2ede1; color: #100e0a; border-color: #f2ede1; }
  .btn-secondary { color: var(--ink); border-color: var(--hair); }
  .nav-logo, .nav-links a, h1, h2, h3, h4, p, li, td, th { color: var(--ink); }
  .lead, .section-sub, .testimonial-text { color: var(--ink-soft); }
  input, select, textarea { background: #1b1913; border-color: rgba(242,237,225,0.22); color: var(--ink); }
  ::placeholder { color: #8d8677; }
  img { filter: brightness(0.92); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* v75 — 320-360px: the comparison rows get room to breathe */
@media (max-width: 480px) {
  .usp-row { grid-template-columns: 1.2fr 1fr 1fr; }
  .usp-row > div { padding: 10px 6px !important; font-size: 13px !important; }
  .portal-mockup-content { padding: 20px 14px; }
}

/* v77 — the sticky buy bar is an always-dark surface, so its primary button
   must invert against IT, not against the page. (v73 repainted .btn-gold to
   ink and left this one CTA reading as bare text on black.) */
.buy-bar .btn-gold, .buy-bar .btn-primary {
  background: #f2ede1; color: #100e0a; border-color: #f2ede1;
}
.buy-bar .btn-gold:hover, .buy-bar .btn-primary:hover { background: #fff; color: #000; }
/* Dmitri: the hero was the one surface v73 forgot — a cool #fff slab over warm paper */
.hero { background: transparent; }

/* ═══ v82 — NOBU: the marketing site moves into the same room ═══ */
:root {
  --page:#ebe6da; --surface:#f5f1e8; --ink:#221b12; --ink-soft:#75694f;
  --hair:rgba(40,32,20,0.16); --ink-inverse:#f2eee2;
  --page-warm:#ebe6da; --surface-warm:#f5f1e8; --ink-warm:#221b12; --ink-soft-warm:#75694f;
  --hair-warm:rgba(40,32,20,0.16);
  --gold:#8a7554; --gold-text:#756140; --gold-ink:#756140;
  --gold-bg:rgba(117,97,64,0.06); --gold-border:rgba(117,97,64,0.30);
  --cream:#ebe6da; --white:#ebe6da; --pure-white:#f5f1e8;
}
body { background:var(--page); color:var(--ink); }
h1, h2, h3, .section-title, .nav-logo { font-family:'Fraunces', Georgia, serif; font-weight:500; letter-spacing:0; }
.hero h1 { font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400; }
.nav-logo { letter-spacing:0.22em; font-weight:600; font-size:19px; }
.section-tag, .hero-tag, .app-card-tag { letter-spacing:0.26em !important; color:var(--gold-text) !important; font-size:10px; }
.card, .product-tile, .product-card, .preview-card, .step, .testimonial, .pricing-card,
.quiz-container, .mini-calc, .app-card { border-radius:4px !important; background:var(--surface); border:1px solid var(--hair); }
.btn-primary, .btn-gold, .nav-cta, .btn-secondary, .quiz-option, .card-cta a {
  border-radius:2px !important; letter-spacing:0.12em; text-transform:uppercase;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; }
.btn-primary, .btn-gold, .nav-cta { background:var(--ink); color:var(--ink-inverse); border-color:var(--ink); }
.btn-secondary { background:transparent; color:var(--ink); border:1px solid rgba(117,97,64,0.35); }
.btn-primary:hover, .btn-gold:hover { background:#100a05; color:#f2eee2; transform:none; }
@media (prefers-color-scheme: dark) {
  :root {
    --page:#14100b; --surface:#1c1710; --ink:#e9e2d3; --ink-soft:#94886f;
    --hair:rgba(233,226,211,0.13); --ink-inverse:#14100b;
    --page-warm:#14100b; --surface-warm:#1c1710; --ink-warm:#e9e2d3; --ink-soft-warm:#94886f;
    --hair-warm:rgba(233,226,211,0.13);
    --cream:#14100b; --white:#14100b; --pure-white:#1c1710;
    --gray-700:#cdbfa4; --gray-500:#94886f; --gray-300:#8a7758; --gray-100:#2c2114;
    --black:#e9e2d3; --dark:#e9e2d3;
    --gold:#a89272; --gold-text:#a89272; --gold-ink:#a89272;
    --gold-bg:rgba(168,146,114,0.07); --gold-border:rgba(168,146,114,0.30);
  }
  body { background:var(--page); color:var(--ink); }
  .btn-primary, .btn-gold, .nav-cta { background:var(--ink); color:#14100b; border-color:var(--ink); }
  .btn-secondary { color:var(--ink); border-color:rgba(200,157,99,0.4); }
  .nav.scrolled { background:rgba(23,16,9,0.95); }
  input, select, textarea { background:#0f0c08; border-color:rgba(168,146,114,0.30); color:var(--ink); }
}

/* v84 — round-18 fixes: the last pre-Nobu survivors */
.hero h1 .serif { font-family:'Instrument Serif', Georgia, serif !important;
  font-style:italic !important; font-weight:400 !important;
  border-bottom:none !important; color:var(--gold-text) !important; }
.mini-calc-btn { border-radius:2px !important; letter-spacing:0.12em; text-transform:uppercase;
  font-size:12.5px; font-weight:600; background:var(--ink) !important; color:var(--ink-inverse) !important; }
.mini-calc-btn:hover { background:#100a05 !important; color:#f2eee2 !important; }
.bundle-badge { background:transparent !important; color:var(--gold-text) !important;
  border:1px solid var(--gold-border) !important; border-radius:2px !important;
  letter-spacing:0.14em; text-transform:uppercase; font-size:11px !important; }
.login-box { border-radius:4px !important; }
.login-box input { border-radius:2px !important; }
@media (prefers-color-scheme: dark) {
  .mini-calc-btn { background:var(--ink) !important; color:#14100b !important; }
  .bundle-badge { color:var(--gold-text) !important; }
}

/* v86 — the member banner: the site greets an owner instead of pitching them */
.member-banner { position:relative; z-index:5; margin:84px auto -40px; max-width:720px;
  background:var(--surface); border:1px solid var(--gold-border); border-left:3px solid var(--gold);
  border-radius:4px; padding:14px 18px; font-size:14.5px; color:var(--ink);
  font-family:'Inter',sans-serif; }
.member-banner .mb-check { color:var(--gold-text); font-weight:700; margin-right:4px; }
.member-banner a { color:var(--gold-text); font-weight:600; text-decoration:none;
  letter-spacing:0.06em; text-transform:uppercase; font-size:12px; margin-left:6px; }
@media (max-width:900px){ .member-banner { margin:76px 16px -28px; } }

/* ═══ v89 — THE MARK: the big E becomes the logo (watermarks + icons;
   Lucas's call: NOT inline next to the nav wordmark) ═══ */
/* the watermark — one enormous E behind the page's opening section.
   Alpha-on-token so it survives both themes without a repaint. */
.wm-host { position:relative; overflow:hidden; }
.e-wm { position:absolute; z-index:0; pointer-events:none; user-select:none;
  right:-0.10em; top:-0.16em;
  font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400;
  font-size:clamp(340px, 60vh, 760px); line-height:1;
  color:rgba(34,27,18,0.05); }
@media (prefers-color-scheme: dark) {
  .e-wm { color:rgba(233,226,211,0.05); }
}
/* content rides above the watermark */
.hero .container, .hero-content, .wm-host > .container { position:relative; z-index:1; }
/* phones: a cropped corner of a giant glyph is noise behind text, not brand */
@media (max-width:700px) { .e-wm { display:none; } }

/* ═══ v90 — INSIDE THE iOS APP: nothing is for sale, nothing points at a till ═══
   App Store 3.1.1: digital content used in-app may not be sold via external
   links from the app, so prices, subscribe buttons and every "see plans" link
   disappear in native mode. Members unlock with their purchase email instead. */
.elevate-native .product-price, .elevate-native .product-card-price,
.elevate-native .card-cta, .elevate-native .bundle-badge, .elevate-native .price-note,
.elevate-native .tile-price, .elevate-native .buy-bar, .elevate-native .pricing-card,
.elevate-native a[href$="products.html"], .elevate-native a[href*="products.html?"],
.elevate-native .nav-cta, .elevate-native [onclick*="buyProduct"] { display: none !important; }

/* Belt and braces outside the 600px block too: the owned label must never be
   clipped, whatever container it is swapped into. */
.btn.btn-owned { white-space: normal; line-height: 1.3; max-width: 100%; }