/* ============================================
   RESET & FOUNDATIONS
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root {
  --bg: #08090e;
  --bg-2: #0d0f16;
  --bg-3: #12141d;
  --bg-card: rgba(255,255,255,0.025);
  --bg-card-hover: rgba(255,255,255,0.05);
  --ink: #edeef3;
  --ink-soft: #c5c7d4;
  --ink-muted: #8f91a8;
  --ink-faint: #5d5f74;
  --ink-bg: #0d0f14;
  --cyan: #22b8cf;
  --cyan-soft: #5cd5e8;
  --cyan-glow: rgba(34,184,207,0.12);
  --purple: #a78bfa;
  --purple-soft: #c4b0ff;
  --purple-glow: rgba(167,139,250,0.1);
  --amber: #e8a530;
  --amber-soft: #f0bd5e;
  --amber-glow: rgba(232,165,48,0.12);
  --green: #3ddc84;
  --green-glow: rgba(61,220,132,0.12);
  --blue: #4a9eff;
  --threat: #e8a530;
  --threat-soft: #f0bd5e;
  --threat-severe: #ef8c3a;
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.1);
  --font: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --max: 1100px;
  --radius: 12px;
  --transition: 0.25s ease;
  --price-note-gap: 24px;
}

.preprod-notice {
  position: relative;
  z-index: 10001;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(245, 233, 211, 0.2);
  background: #f5e9d3;
  color: #0a0d10;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================
   GLOBAL ATMOSPHERE
   ============================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 15% 0%, rgba(0,200,255,0.07), transparent 55%),
    radial-gradient(ellipse 80% 50% at 85% 15%, rgba(140,80,220,0.06), transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0,200,255,0.05), transparent 50%),
    radial-gradient(ellipse 50% 40% at 70% 50%, rgba(140,80,220,0.04), transparent 40%);
  pointer-events: none;
  z-index: 0;
  animation: atmosphere-drift 20s ease-in-out infinite alternate;
}
@keyframes atmosphere-drift {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  /* Scanline effect - faint horizontal lines */
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.008) 3px,
    rgba(255,255,255,0.008) 4px
  );
  pointer-events: none;
  z-index: 0;
}
/* Animated gradient orbs - REMOVED (geocities) */

/* ============================================
   FINGERPRINT BACKDROP
   ============================================ */
.fingerprint-bg {
  position: fixed;
  top: 50%;
  right: -5%;
  width: 700px;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  filter: blur(1px) saturate(0.4) hue-rotate(160deg) brightness(0.8);
  mix-blend-mode: screen;
}
@media (max-width: 768px) {
  .fingerprint-bg {
    width: 400px;
    right: -15%;
    opacity: 0.03;
  }
  .fingerprint-bg-left { display: none; }
}

.fingerprint-bg-left {
  right: auto;
  left: -8%;
  top: auto;
  bottom: -10%;
  transform: translateY(0) scaleX(-1) rotate(15deg);
  opacity: 0.03;
  width: 600px;
}

/* ============================================
   CIRCUIT BOARD PATTERN (CSS-only)
   ============================================ */
.circuit-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image:
    /* Horizontal lines */
    linear-gradient(0deg, rgba(34,184,207,0.3) 1px, transparent 1px),
    /* Vertical lines */
    linear-gradient(90deg, rgba(140,80,220,0.2) 1px, transparent 1px),
    /* Node dots at intersections */
    radial-gradient(circle 1.5px at 120px 120px, rgba(34,184,207,0.5) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 360px 240px, rgba(140,80,220,0.4) 100%, transparent 100%),
    radial-gradient(circle 1px at 240px 360px, rgba(34,184,207,0.3) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 480px 120px, rgba(140,80,220,0.4) 100%, transparent 100%),
    radial-gradient(circle 1px at 600px 480px, rgba(34,184,207,0.3) 100%, transparent 100%);
  background-size:
    120px 120px,
    120px 120px,
    480px 480px,
    480px 480px,
    480px 480px,
    480px 480px,
    480px 480px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ============================================
   TYPOGRAPHY
   ============================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: -0.02em;
}
.t-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.t-accent { color: var(--cyan-soft); }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  background: rgba(8,9,14,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.nav-brand span { color: var(--cyan-soft); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 0.82rem;
  color: var(--ink-muted);
  transition: color var(--transition);
  font-weight: 500;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  background: var(--cyan);
  color: #fff !important;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.82rem !important;
  transition: all var(--transition);
}
.nav-cta:hover { background: #2cc5d6; transform: translateY(-1px); }
@media (max-width: 768px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  padding: 180px 0 80px;
  position: relative;
  overflow: hidden;
}
/* Cover image as blurred atmospheric backdrop */
.hero-backdrop {
  position: absolute;
  inset: 0;
  background: url('../assets/du-cover-art.png') center 20% / cover no-repeat;
  filter: blur(40px) saturate(1.8) brightness(0.7);
  opacity: 0.35;
  transform: scale(1.15);
  pointer-events: none;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 72% 25%, rgba(34,184,207,0.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 75%, rgba(167,139,250,0.18), transparent 50%),
    radial-gradient(ellipse 40% 40% at 70% 70%, rgba(34,184,207,0.08), transparent 50%);
  pointer-events: none;
  animation: hero-glow-shift 8s ease-in-out infinite alternate;
}
@keyframes hero-glow-shift {
  0%  { opacity: 0.8; }
  100% { opacity: 1; }
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--ink-bg));
  pointer-events: none;
}
/* Animated data rain columns */
.hero-data-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
}
.hero-data-rain .col {
  position: absolute;
  top: -20%;
  width: 1px;
  height: 140%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(34,184,207,0.3) 15%,
    rgba(140,80,220,0.2) 40%,
    rgba(34,184,207,0.15) 65%,
    transparent 100%
  );
  animation: rain-fall linear infinite;
}
.hero-data-rain .col:nth-child(1) { left: 8%; animation-duration: 7s; animation-delay: 0s; opacity: 0.4; }
.hero-data-rain .col:nth-child(2) { left: 22%; animation-duration: 9s; animation-delay: 2s; opacity: 0.3; }
.hero-data-rain .col:nth-child(3) { left: 45%; animation-duration: 11s; animation-delay: 4s; opacity: 0.2; }
.hero-data-rain .col:nth-child(4) { left: 67%; animation-duration: 8s; animation-delay: 1s; opacity: 0.35; }
.hero-data-rain .col:nth-child(5) { left: 78%; animation-duration: 10s; animation-delay: 3s; opacity: 0.25; }
.hero-data-rain .col:nth-child(6) { left: 92%; animation-duration: 12s; animation-delay: 6s; opacity: 0.3; }
@keyframes rain-fall {
  0% { transform: translateY(-30%); }
  100% { transform: translateY(30%); }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: var(--cyan-glow);
  border: 1px solid rgba(34,184,207,0.2);
  border-radius: 100px;
  margin-bottom: 28px;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero-eyebrow span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan-soft);
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: italic;
  color: var(--cyan-soft);
}
.hero-sub {
  font-size: 1.12rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 12px;
  max-width: 540px;
}
.hero-author {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-bottom: 32px;
}
.hero-author strong { color: var(--ink-soft); }
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--cyan);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all var(--transition);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: #2cc5d6; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(34,184,207,0.3); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all var(--transition);
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--ink-muted); color: var(--ink); background: rgba(255,255,255,0.03); }
.hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-stars {
  color: var(--amber);
  font-size: 1rem;
  letter-spacing: 1px;
}
.hero-proof-text {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-style: italic;
}
.hero-cover {
  position: relative;
}
.hero-cover img {
  width: 100%;
  border-radius: 8px;
  filter: drop-shadow(0 0 30px rgba(0,200,255,0.25)) drop-shadow(0 0 60px rgba(140,80,220,0.15)) drop-shadow(0 20px 40px rgba(0,0,0,0.6));
  position: relative;
  z-index: 2;
}
.hero-book-glow {
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, rgba(0,200,255,0.28), transparent 60%),
    radial-gradient(ellipse 60% 60% at 55% 65%, rgba(140,80,220,0.22), transparent 55%),
    radial-gradient(ellipse 40% 40% at 45% 80%, rgba(0,200,255,0.1), transparent 50%);
  z-index: 0;
  filter: blur(15px);
  animation: book-glow-pulse 3s ease-in-out infinite;
}
@keyframes book-glow-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@media (max-width: 768px) {
  .hero { padding: 140px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-sub { margin: 0 auto 12px; }
  .hero-ctas { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero-cover { max-width: 260px; margin: 0 auto; }
  .toolkit-grid { grid-template-columns: 1fr; }
  .vol2-grid { grid-template-columns: 1fr; }
}

/* ============================================
   TRUST BAR
   ============================================ */
.trust-bar {
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.trust-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  text-align: center;
}
.trust-stat-num {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.trust-stat-num.accent { color: var(--cyan-soft); }
.trust-stat-label {
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 768px) {
  .trust-stats { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
  .trust-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ============================================
   SHOCK DATA SECTION
   ============================================ */
.shock {
  padding: 80px 0;
}
.shock-label {
  text-align: center;
  margin-bottom: 48px;
}
.shock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.shock-card {
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.shock-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cyan);
  opacity: 0;
  transition: opacity var(--transition);
}
.shock-card:hover::before { opacity: 1; }
.shock-card:hover { border-color: rgba(34,184,207,0.2); background: var(--bg-card-hover); }
.shock-icon {
  font-size: 1.6rem;
  margin-bottom: 16px;
}
.shock-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.35;
}
.shock-card p {
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.6;
}
.shock-card .chapter-ref {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--cyan-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 768px) {
  .shock-grid { grid-template-columns: 1fr; }
}

/* ============================================
   FOR YOU SECTION
   ============================================ */
.for-you {
  padding: 80px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.for-you-inner {
  max-width: 700px;
  margin: 0 auto;
}
.section-head {
  margin-bottom: 48px;
}
.section-head h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin-bottom: 16px;
}
.section-head p {
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 600px;
}
.section-head.center { text-align: center; }
.section-head.center p { margin: 0 auto; }
.check-list {
  list-style: none;
  display: grid;
  gap: 16px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.check-list .check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-glow);
  border: 1px solid rgba(61,220,132,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 0.7rem;
  margin-top: 2px;
}
.for-you-cta {
  margin-top: 36px;
  text-align: center;
}

/* ============================================
   TRANSFORMATION SECTION
   ============================================ */
.transform {
  padding: 100px 0;
}
.transform-grid {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 0;
  align-items: stretch;
}
.transform-col {
  padding: 40px 36px;
  border-radius: var(--radius);
}
.transform-before {
  background: rgba(232,165,48,0.04);
  border: 1px solid rgba(232,165,48,0.12);
}
.transform-after {
  background: rgba(61,220,132,0.04);
  border: 1px solid rgba(61,220,132,0.12);
}
.transform-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--ink-faint);
}
.transform-col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}
.transform-before h3 { color: var(--threat-soft); }
.transform-after h3 { color: var(--green); }
.transform-col ul {
  list-style: none;
  display: grid;
  gap: 14px;
}
.transform-col li {
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.transform-before li::before {
  content: '\00D7';
  position: absolute;
  left: 0;
  color: var(--threat-soft);
  font-weight: 700;
}
.transform-after li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 0.85em;
}
.transform-bottom {
  text-align: center;
  margin-top: 40px;
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-style: italic;
}
@media (max-width: 768px) {
  .transform-grid { grid-template-columns: 1fr; gap: 16px; }
  .transform-arrow { transform: rotate(90deg); padding: 8px 0; }
}

/* ============================================
   WHAT'S INSIDE
   ============================================ */
.inside {
  padding: 80px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.inside-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.inside-card {
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.inside-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.inside-card p {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.55;
}
@media (max-width: 768px) {
  .inside-grid { grid-template-columns: 1fr; }
}

/* ============================================
   PLATFORMS SECTION
   ============================================ */
.platforms {
  padding: 100px 0;
}
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.p-card {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: default;
  position: relative;
}
.p-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.p-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.grade-f { background: rgba(232,165,48,0.15); color: var(--threat-soft); border: 1px solid rgba(232,165,48,0.25); }
.grade-d { background: rgba(232,165,48,0.12); color: var(--amber); border: 1px solid rgba(232,165,48,0.2); }
.grade-c { background: rgba(74,158,255,0.1); color: var(--blue); border: 1px solid rgba(74,158,255,0.2); }
.grade-b { background: var(--green-glow); color: var(--green); border: 1px solid rgba(61,220,132,0.2); }
.p-card h4 {
  font-size: 0.92rem;
  font-weight: 600;
}
.p-card-tag {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-style: italic;
}
.p-card-danger {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.p-card:hover .p-card-danger,
.p-card.active .p-card-danger { display: block; }
.p-card-danger p {
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 6px;
  padding-left: 14px;
  position: relative;
}
.p-card-danger p::before {
  content: '\26A0';
  position: absolute;
  left: 0;
  font-size: 0.7rem;
}
.p-card-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--cyan-soft);
  font-family: var(--font-mono);
}
.platforms-expand {
  text-align: center;
  margin-top: 32px;
}
.btn-expand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-expand:hover { border-color: var(--ink-muted); color: var(--ink); }
.platforms-remaining {
  display: none;
  margin-top: 16px;
}
.platforms-remaining.show { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
@media (max-width: 600px) {
  .platform-grid { grid-template-columns: 1fr; }
  .platforms-remaining.show { grid-template-columns: 1fr; }
}

/* ============================================
   EXCERPT SECTION
   ============================================ */
.excerpt {
  padding: 80px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.excerpt-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.excerpt-tab {
  padding: 8px 20px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.excerpt-tab:hover { border-color: var(--border-strong); color: var(--ink-soft); }
.excerpt-tab.active { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.excerpt-content {
  display: none;
  padding: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.excerpt-content.active { display: block; }
.excerpt-chap {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan-soft);
  margin-bottom: 8px;
}
.excerpt-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.excerpt-grade {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.excerpt-body p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 16px;
}
.excerpt-body p:first-child {
  font-style: italic;
  color: var(--ink-muted);
  padding-left: 16px;
  border-left: 2px solid var(--cyan);
}
.excerpt-cta {
  margin-top: 24px;
}
@media (max-width: 600px) {
  .excerpt-content { padding: 24px; }
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  padding: 80px 0;
}
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.test-card {
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.test-stars {
  color: var(--amber);
  font-size: 0.85rem;
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.test-card blockquote {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 16px;
  font-style: italic;
}
.test-card cite {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-style: normal;
}
@media (max-width: 768px) {
  .test-grid { grid-template-columns: 1fr; }
}

/* ============================================
   EMAIL CAPTURE
   ============================================ */
.capture {
  padding: 80px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.capture-box {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 40px;
  background: var(--bg-card);
  border: 1px solid rgba(34,184,207,0.15);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.capture-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.capture-box h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.capture-box p {
  font-size: 0.92rem;
  color: var(--ink-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}
.capture-form {
  display: flex;
  gap: 10px;
}
.capture-form input {
  flex: 1;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--ink);
  outline: none;
  transition: border-color var(--transition);
}
.capture-form input::placeholder { color: var(--ink-faint); }
.capture-form input:focus { border-color: var(--cyan); }
.capture-form button {
  padding: 14px 24px;
  background: var(--cyan);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.capture-form button:hover { background: #2cc5d6; }
.capture-note {
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 12px;
}
@media (max-width: 500px) {
  .capture-form { flex-direction: column; }
  .capture-box { padding: 36px 24px; }
}

/* ============================================
   TRILOGY
   ============================================ */
.trilogy {
  padding: 100px 0;
}
.trilogy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vol-card {
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.vol-card.active-vol {
  border-color: rgba(34,184,207,0.25);
  background: rgba(34,184,207,0.03);
}
.vol-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.vol-badge.now { background: var(--cyan-glow); color: var(--cyan-soft); border: 1px solid rgba(34,184,207,0.2); }
.vol-badge.soon { background: rgba(255,255,255,0.04); color: var(--ink-muted); border: 1px solid var(--border); }
.vol-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.vol-card .vol-sub {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-bottom: 14px;
}
.vol-card p {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.55;
}
@media (max-width: 768px) {
  .trilogy-grid { grid-template-columns: 1fr; }
}

/* ============================================
   PRICING
   ============================================ */
.pricing {
  padding: 80px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.price-card {
  padding: 36px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.price-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.price-card.featured {
  border-color: var(--cyan);
  background: rgba(34,184,207,0.04);
  box-shadow: 0 4px 24px rgba(34,184,207,0.10);
  z-index: 2;
  position: relative;
}
/* Reserved label slot so non-featured cards align with featured card */
.price-label-slot {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.price-format {
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.price-amount {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.price-note {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: var(--price-note-gap);
  flex: 1;
}
.price-card .btn-primary {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  font-size: 0.88rem;
  padding: 12px 24px;
  display: flex;
}
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 340px; }
  .price-card .btn-primary { width: 100%; min-width: 0; max-width: none; }
}

/* ============================================
   AUTHOR
   ============================================ */
.author {
  padding: 80px 0;
}
.author-inner {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 700px;
}
.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-muted);
}
.author h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.author .author-role {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.author p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 12px;
}
.author blockquote {
  margin-top: 20px;
  padding: 20px 24px;
  background: var(--bg-card);
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .author-inner { grid-template-columns: 1fr; text-align: center; }
  .author-avatar { margin: 0 auto; }
}

/* ============================================
   FINAL CTA
   ============================================ */
.final-cta {
  padding: 100px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta-backdrop {
  position: absolute;
  inset: 0;
  background: url('../assets/du-cover-art.png') center 30% / cover no-repeat;
  filter: blur(60px) saturate(1.5) brightness(0.6);
  opacity: 0.2;
  transform: scale(1.3);
  pointer-events: none;
}
.final-cta h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 16px;
}
.final-cta p {
  font-size: 1rem;
  color: var(--ink-muted);
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.final-cta .hero-ctas { justify-content: center; }

/* ============================================
   PULLQUOTE
   ============================================ */
/* Pullquote: see enhanced version below */

/* ============================================
   TOOLKIT CARDS
   ============================================ */
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.toolkit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: border-color 0.3s, transform 0.3s;
}
.toolkit-card:hover {
  border-color: rgba(0,200,255,0.3);
  transform: translateY(-2px);
}
.toolkit-card.featured {
  border-color: rgba(0,200,255,0.25);
  background: linear-gradient(135deg, var(--surface), rgba(0,200,255,0.03));
  position: relative;
}
.toolkit-card.featured::before {
  content: 'Most Used';
  position: absolute;
  top: -10px;
  right: 20px;
  background: var(--green);
  color: var(--ink-bg);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 700;
}
.toolkit-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.toolkit-card h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.toolkit-card p {
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.toolkit-features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toolkit-features li {
  font-size: 0.8rem;
  color: var(--ink-muted);
  padding: 5px 0;
  border-top: 1px solid var(--border);
  padding-left: 18px;
  position: relative;
}
.toolkit-features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* ============================================
   VOLUME II PREVIEW
   ============================================ */
.vol2-preview {
  padding: 80px 0;
}
.vol2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vol2-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  transition: border-color 0.3s;
}
.vol2-card:hover {
  border-color: rgba(140,80,220,0.3);
}
.vol2-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(140,80,220,0.8);
  background: rgba(140,80,220,0.08);
  padding: 2px 8px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 10px;
}
.vol2-card h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 8px;
}
.vol2-card p {
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.55;
}
.vol2-note {
  text-align: center;
  margin-top: 32px;
  font-size: 0.88rem;
  color: var(--ink-muted);
}
@media (max-width: 900px) {
  .toolkit-grid { grid-template-columns: 1fr; }
  .vol2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vol2-grid { grid-template-columns: 1fr; }
}
.pullquote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 700px;
  margin: 0 auto 12px;
  line-height: 1.5;
}
.pullquote cite {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 60px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.footer p {
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.footer-links {
  margin-top: 10px;
  display: flex;
  gap: 20px;
}
.footer-links a {
  font-size: 0.75rem;
  color: var(--ink-faint);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--ink-muted); }

/* ============================================
   STICKY MOBILE CTA
   ============================================ */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 12px 16px;
  /* iOS home-indicator chrome must never overlap the bar's content:
     extend the bottom padding by the safe-area inset. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(8,9,14,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  /* Hidden by default. js/main.js slides it in (translateY(0)) only
     once the hero has scrolled out of the viewport, so the bar never
     paints over the hero on first load. */
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.sticky-cta-inner {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
}
.sticky-cta-text {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta-text span {
  /* Single compact row: the "Vol. I" sub-line duplicated the hero
     eyebrow and made the bar two lines tall on phones. */
  display: none;
}
.sticky-cta .btn-primary {
  padding: 10px 20px;
  font-size: 0.82rem;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .sticky-cta { display: block; }
  /* Clearance so the fixed bar never covers the final page content:
     bar height plus the iOS safe-area inset. */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ============================================
   UTILITIES & ANIMATIONS
   ============================================ */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Observer loads visible class; until then, section remains readable */
.js-animate-ready .animate-in:not(.visible) {
  opacity: 0;
  transform: translateY(20px);
}
.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Belt-and-suspenders: FAQ section and items are always interactive */
.faq-section,
.faq-item {
  opacity: 1 !important;
}

/* ============================================
   FLOATING PARTICLES
   ============================================ */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: float-particle linear infinite;
}
.particle:nth-child(odd) { background: rgba(0,200,255,0.5); box-shadow: 0 0 6px rgba(0,200,255,0.3); }
.particle:nth-child(even) { background: rgba(140,80,220,0.45); box-shadow: 0 0 6px rgba(140,80,220,0.25); }
.particle:nth-child(3n) { background: rgba(255,255,255,0.3); }
@keyframes float-particle {
  0% { opacity: 0; transform: translateY(100vh) translateX(0); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10vh) translateX(40px); }
}

/* ============================================
   SECTION GLOW DIVIDERS
   ============================================ */
.glow-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,200,255,0.15) 20%,
    rgba(140,80,220,0.2) 50%,
    rgba(0,200,255,0.15) 80%,
    transparent 100%
  );
  border: none;
  margin: 0;
}

/* hero-stream replaced by hero-data-rain */

/* ============================================
   SHOCK SECTION ENHANCED
   ============================================ */
.shock-bg {
  position: relative;
  overflow: hidden;
}
.shock-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 10% 50%, rgba(232,165,48,0.05), transparent),
    radial-gradient(ellipse 40% 40% at 90% 30%, rgba(0,200,255,0.04), transparent);
  pointer-events: none;
}

/* ============================================
   SECTION ATMOSPHERES
   ============================================ */
.section-glow {
  position: relative;
  overflow: hidden;
}
.section-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.section-glow-cyan::before {
  background:
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(34,184,207,0.04), transparent),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(140,80,220,0.03), transparent);
}
.section-glow-purple::before {
  background:
    radial-gradient(ellipse 50% 50% at 20% 30%, rgba(140,80,220,0.05), transparent),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(34,184,207,0.03), transparent);
}
.section-glow-mixed::before {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(34,184,207,0.03), transparent),
    radial-gradient(ellipse 40% 40% at 10% 20%, rgba(140,80,220,0.02), transparent),
    radial-gradient(ellipse 40% 40% at 90% 80%, rgba(140,80,220,0.02), transparent);
}

/* Vertical data line accents along page edges */
.data-line-left,
.data-line-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  opacity: 0.15;
}
.data-line-left {
  left: 5%;
  background: linear-gradient(180deg, transparent, rgba(34,184,207,0.4), transparent);
}
.data-line-right {
  right: 5%;
  background: linear-gradient(180deg, transparent, rgba(140,80,220,0.4), transparent);
}

/* ============================================
   ENHANCED PULLQUOTE
   ============================================ */
.pullquote {
  padding: 72px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pullquote::before {
  content: '\201C';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 8rem;
  color: rgba(0,200,255,0.06);
  line-height: 1;
  pointer-events: none;
}


/* ============================================
   ENHANCEMENTS (from enhancements.css)
   ============================================ */
/* ============================================
   DIGITALLY UNDRESSED -- ENHANCEMENTS CSS
   Drop this file into: /digitally-undressed/css/enhancements.css
   Then add to <head>: <link rel="stylesheet" href="css/enhancements.css">
   ============================================ */

/* ---- LAUNCH BANNER (top of page) ---- */
.launch-banner {
  background: linear-gradient(90deg, rgba(0,212,255,0.05), rgba(0,212,255,0.12), rgba(0,212,255,0.05));
  border-bottom: 1px solid rgba(0,212,255,0.12);
  padding: 11px 24px;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  position: relative;
  z-index: 10000;
  letter-spacing: 0.2px;
}
/* Inline ribbon variant: sits below hero, not fixed to viewport top */
.launch-banner-inline {
  position: relative;
  z-index: 100;
  border-top: 1px solid rgba(0,212,255,0.12);
}
@media (max-width: 768px) {
  .launch-banner-inline {
    padding: 10px 44px 10px 16px;
    font-size: 13px;
  }
}
.launch-banner strong { color: #00d4ff; }
.launch-banner .banner-cta {
  color: #00d4ff;
  font-weight: 700;
  margin-left: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,212,255,0.3);
  padding-bottom: 1px;
  transition: border-color 0.2s;
}
.launch-banner .banner-cta:hover { border-color: #00d4ff; }
.launch-banner .banner-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.launch-banner .banner-close:hover { color: rgba(255,255,255,0.7); }
@media (max-width: 600px) {
  .launch-banner { font-size: 12px; padding: 10px 40px 10px 16px; }
}

/* ---- STICKY BUY BAR ---- */
/* Sits BELOW the fixed .nav, never on top of it. The nav must stay
   reachable at all times, so the bar gets z-index 99 (nav is 100) and
   a top offset equal to the rendered nav height. A CSS constant cannot
   track that height across viewports (the brand text wraps to two
   lines at desktop widths, rendering the nav at 92px, not the 70px a
   single-line nav would give), so js/main.js measures .nav.offsetHeight
   and sets the bar's inline top before every show and on resize while
   visible. The 92px here is the measured two-line-brand fallback so a
   no-JS paint still clears the nav. Hidden state subtracts the same
   92px so the bar parks fully above the viewport and cannot peek out
   from under the nav before it slides in. */
.sticky-buy-bar {
  position: fixed;
  top: 92px;
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(8, 8, 14, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,212,255,0.1);
  padding: 10px 24px;
  transform: translateY(calc(-100% - 92px));
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sticky-buy-bar.visible { transform: translateY(0); }
.sticky-buy-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sticky-buy-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.sticky-buy-rating {
  color: #ffd000;
  font-size: 13px;
  white-space: nowrap;
}
.sticky-buy-cta {
  background: #00d4ff;
  color: #000;
  padding: 9px 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: 0.3px;
}
.sticky-buy-cta:hover { background: #33dfff; transform: translateY(-1px); }
@media (max-width: 640px) {
  .sticky-buy-title { display: none; }
  .sticky-buy-inner { justify-content: center; gap: 12px; }
}

/* ---- SOCIAL PROOF BANNER ---- */
.social-proof-strip {
  background: rgba(0,212,255,0.03);
  border-top: 1px solid rgba(0,212,255,0.06);
  border-bottom: 1px solid rgba(0,212,255,0.06);
  padding: 30px 24px;
  text-align: center;
}
.social-proof-inner {
  max-width: 720px;
  margin: 0 auto;
}
.social-proof-stars {
  color: #ffd000;
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.social-proof-quote {
  color: rgba(255,255,255,0.78);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.social-proof-source {
  color: rgba(255,255,255,0.3);
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* ---- EXPOSURE QUIZ ---- */
.exposure-section {
  padding: 80px 24px;
  text-align: center;
  position: relative;
}
.exposure-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(0,212,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}
.exposure-section h2 {
  font-size: 28px;
  color: #fff;
  margin-bottom: 10px;
}
.exposure-subtitle {
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  margin-bottom: 40px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.exposure-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 600px;
  margin: 0 auto 30px;
}
@media (max-width: 640px) {
  .exposure-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 400px) {
  .exposure-grid { grid-template-columns: repeat(2, 1fr); }
}
.exposure-check {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.exposure-check:hover {
  background: rgba(0,212,255,0.06);
  border-color: rgba(0,212,255,0.2);
}
.exposure-check.checked {
  background: rgba(0,212,255,0.08);
  border-color: rgba(0,212,255,0.35);
}
.exposure-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}
.exposure-check input[type="checkbox"]:checked {
  background: #00d4ff;
  border-color: #00d4ff;
}
.exposure-check input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  top: -1px;
  left: 2px;
  color: #000;
  font-size: 13px;
  font-weight: 700;
}
.exposure-check .app-label {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.exposure-check.checked .app-label { color: #00d4ff; }

.exposure-result {
  max-width: 500px;
  margin: 0 auto;
  padding: 30px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: all 0.3s;
  opacity: 0;
  transform: translateY(10px);
}
.exposure-result.visible {
  opacity: 1;
  transform: translateY(0);
}
.exposure-result-label {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.exposure-result-score {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 12px;
  transition: color 0.3s;
}
.exposure-result-message {
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.exposure-result-cta {
  display: inline-block;
  background: #00d4ff;
  color: #000;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.exposure-result-cta:hover { background: #33dfff; transform: translateY(-1px); }

/* ---- PLATFORM FILTER TABS ---- */
.platform-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  padding: 0 24px;
}
.filter-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.filter-btn:hover {
  background: rgba(0,212,255,0.06);
  border-color: rgba(0,212,255,0.2);
  color: rgba(255,255,255,0.8);
}
.filter-btn.active {
  background: rgba(0,212,255,0.1);
  border-color: rgba(0,212,255,0.4);
  color: #00d4ff;
  font-weight: 600;
}
/* Hiding filtered cards */
.platform-card-wrapper.hidden {
  display: none !important;
}

/* ---- SHARE BUTTONS (DYK cards) ---- */
.dyk-share {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}
.share-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.45);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.share-btn:hover {
  background: rgba(0,212,255,0.08);
  border-color: rgba(0,212,255,0.25);
  color: #00d4ff;
}

/* ---- WAITLIST / EMAIL CAPTURE ---- */
.waitlist-section {
  padding: 80px 24px;
  text-align: center;
  position: relative;
}
.waitlist-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,212,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.waitlist-inner {
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.waitlist-section h2 {
  font-size: 28px;
  color: #fff;
  margin-bottom: 12px;
}
.waitlist-subtitle {
  color: rgba(255,255,255,0.55);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.waitlist-desc {
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  margin-bottom: 30px;
}
.waitlist-form {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto 16px;
}
.waitlist-form input[type="email"] {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 14px 18px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.waitlist-form input[type="email"]::placeholder { color: rgba(255,255,255,0.3); }
.waitlist-form input[type="email"]:focus { border-color: rgba(0,212,255,0.4); }
.waitlist-form button {
  background: #00d4ff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  font-family: inherit;
}
.waitlist-form button:hover { background: #33dfff; transform: translateY(-1px); }
.waitlist-note {
  color: rgba(255,255,255,0.25);
  font-size: 12px;
  font-style: italic;
}
.waitlist-success {
  color: #34c759;
  font-size: 15px;
  font-weight: 600;
  display: none;
}
@media (max-width: 500px) {
  .waitlist-form { flex-direction: column; }
  .waitlist-form button { width: 100%; }
}

/* ---- FAQ SECTION ---- */
.faq-section {
  padding: 80px 24px;
  max-width: 700px;
  margin: 0 auto;
}
.faq-section h2 {
  text-align: center;
  font-size: 28px;
  color: #fff;
  margin-bottom: 40px;
}
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  font-family: inherit;
  padding: 20px 0;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
  transition: color 0.2s;
}
.faq-q:hover { color: #00d4ff; }
.faq-q::after {
  content: '+';
  font-size: 22px;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 0.3s, color 0.2s;
}
.faq-item.open .faq-q::after {
  content: '-';
  color: #00d4ff;
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  line-height: 1.7;
  padding: 0 0 0 0;
}
.faq-item.open .faq-a {
  max-height: 300px;
  padding: 0 0 20px 0;
}

/* ---- FOLLOW / INSTAGRAM SECTION ---- */
.follow-section {
  padding: 60px 24px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.follow-section h3 {
  font-size: 22px;
  color: #fff;
  margin-bottom: 10px;
}
.follow-section p {
  color: rgba(255,255,255,0.45);
  font-size: 15px;
  max-width: 480px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.follow-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
}
.follow-btn:hover {
  background: rgba(0,212,255,0.06);
  border-color: rgba(0,212,255,0.25);
  color: #00d4ff;
}

/* ---- ANIMATED STAT COUNTERS ---- */
.stat-number {
  transition: color 0.3s;
}

/* ============================================
   NEW COMPONENTS
   ============================================ */

/* -- Loading Screen -- */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-brand {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  animation: loading-pulse 1.5s ease-in-out infinite;
}
.loading-brand span { color: var(--cyan-soft); }
@keyframes loading-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* -- Scroll Progress -- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  z-index: 100001;
  transition: width 0.1s linear;
}

/* -- Data Ticker -- */
.data-ticker {
  background: rgba(232,165,48,0.06);
  border-bottom: 1px solid rgba(232,165,48,0.1);
  padding: 8px 24px;
  position: relative;
  z-index: 99;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.data-ticker.dismissed {
  max-height: 0;
  opacity: 0;
  padding: 0 24px;
  overflow: hidden;
}
.data-ticker-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.data-ticker-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
}
.data-ticker-count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--amber-soft);
  min-width: 140px;
}
.data-ticker-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.2s;
}
.data-ticker-close:hover { color: rgba(255,255,255,0.85); }
@media (max-width: 600px) {
  .data-ticker-label { display: none; }
  .data-ticker-inner::before {
    content: 'Data collected:';
    font-size: 0.72rem;
    color: var(--ink-muted);
  }
}

/* -- Back-to-Top Button -- */
.back-to-top {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(8,9,14,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  color: var(--ink-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 98;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: rgba(34,184,207,0.15);
  border-color: rgba(34,184,207,0.3);
  color: var(--cyan-soft);
}

/* -- Hamburger Menu -- */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 201;
  position: relative;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: all 0.3s ease;
  border-radius: 1px;
}
.nav-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
@media (max-width: 768px) {
  .nav-hamburger { display: block; }
  /* Full-screen command-center drawer below the real nav. The 92px
     top and height fallbacks assume the two-line-brand nav; js/main.js
     measures .nav.offsetHeight and sets inline top + height on open
     and on resize while open (same pattern as the sticky buy bar).
     Explicit height instead of bottom: 0 because .nav carries
     backdrop-filter, which makes it the containing block for this
     fixed drawer: bottom: 0 would resolve to the nav box, not the
     viewport, collapsing the drawer to a strip. */
  .nav-links {
    display: none;
    position: fixed;
    top: 92px;
    left: 0;
    right: 0;
    bottom: auto;
    height: calc(100vh - 92px);
    background: rgba(8,9,14,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 12px 20px 24px;
    overflow-y: auto;
    z-index: 99;
  }
  .nav-links.open {
    display: flex;
    animation: du-drawer-in 0.2s ease;
  }
  .nav-links.open a {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 4px;
    font-size: 1.05rem;
    font-weight: 500;
    color: #edeef3;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-links.open a:last-child { border-bottom: none; }
  .nav-links.open a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: -2px;
    border-radius: 6px;
  }
  .nav-links.open .nav-cta {
    margin-top: auto;
    justify-content: center;
    text-align: center;
    padding: 16px;
    border-radius: 10px;
  }
}
@keyframes du-drawer-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links.open { animation: none; }
}

/* -- Interactive Checklist -- */
.interactive-checklist {
  list-style: none;
  display: grid;
  gap: 12px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}
.check-item:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}
.check-item.checked {
  border-color: rgba(61,220,132,0.25);
  background: rgba(61,220,132,0.04);
}
.check-item .check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  color: transparent;
  font-size: 0.7rem;
}
.check-item.checked .check-icon {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.check-item .check-text {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.check-item.checked .check-text {
  color: var(--ink);
}
.checklist-result {
  text-align: center;
  margin-top: 24px;
  padding: 20px;
  background: rgba(61,220,132,0.04);
  border: 1px solid rgba(61,220,132,0.15);
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}
.checklist-result.visible {
  opacity: 1;
  transform: translateY(0);
}
.checklist-result p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

/* -- Verified Badge -- */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--green);
  margin-top: 8px;
}
.verified-badge svg {
  width: 12px;
  height: 12px;
}

/* -- KU Banner -- */
.ku-banner {
  background: linear-gradient(90deg, rgba(34,184,207,0.08), rgba(167,139,250,0.08));
  border: 1px solid rgba(34,184,207,0.15);
  border-radius: var(--radius);
  padding: 20px 28px;
  text-align: center;
  margin-top: 24px;
}
.ku-banner p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.ku-banner .btn-primary {
  padding: 10px 24px;
  font-size: 0.85rem;
}

/* -- Price Badge -- */
.price-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--cyan-glow);
  color: var(--cyan-soft);
  border: 1px solid rgba(34,184,207,0.2);
  margin-bottom: 12px;
}

/* -- Enhanced Footer Grid -- */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-muted);
  padding: 4px 0;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--cyan-soft); }
.footer-brand {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.footer-brand span { color: var(--cyan-soft); }
.footer-tagline {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 300px;
}
.footer-newsletter {
  text-align: center;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 24px;
}
.footer-newsletter h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.footer-newsletter p {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.footer-capture-form {
  max-width: 420px;
  margin: 0 auto;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* -- Sticky Buy Bar Outline Variant -- */
.sticky-buy-cta-outline {
  background: transparent;
  color: #00d4ff;
  border: 1px solid rgba(0,212,255,0.3);
}
.sticky-buy-cta-outline:hover {
  background: rgba(0,212,255,0.08);
  border-color: #00d4ff;
  color: #00d4ff;
}

/* -- Nav Active Link -- */
.nav-links a.active { color: var(--cyan-soft); }

/* -- Focus Visible -- */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* -- Surface variable fallback -- */
:root {
  --surface: rgba(255,255,255,0.025);
}

/* ============================================
   TOOLKITS SECTION
   ============================================ */
.toolkits {
  padding: 80px 0;
}

/* ============================================
   2026 MARKETING GEM REVAMP
   ============================================ */

/* -- Microproof badges in hero -- */
.gem-microproof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 28px;
}
.gem-microproof span {
  background: rgba(34,184,207,0.1);
  border: 1px solid rgba(34,184,207,0.25);
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition);
}
.gem-microproof span:hover {
  background: rgba(34,184,207,0.18);
  border-color: rgba(34,184,207,0.45);
  color: var(--ink);
}

/* -- Stat grid (trust bar) -- */
.gem-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.gem-stat-grid article {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 28px 20px;
  border-radius: var(--radius);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.gem-stat-grid article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  opacity: 0;
  transition: opacity var(--transition);
}
.gem-stat-grid article:hover {
  border-color: rgba(34,184,207,0.2);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.gem-stat-grid article:hover::before { opacity: 1; }
.gem-stat-grid h3 {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--cyan-soft);
  line-height: 1;
}
.gem-stat-grid p {
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* -- Excerpt cards -- */
.gem-excerpt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gem-excerpt-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 28px 24px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.gem-excerpt-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  opacity: 0;
  transition: opacity var(--transition);
}
.gem-excerpt-card:hover {
  border-color: rgba(167,139,250,0.2);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.gem-excerpt-card:hover::before { opacity: 1; }
.gem-excerpt-card .t-label {
  display: block;
  margin-bottom: 12px;
}
.gem-excerpt-card h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.gem-excerpt-card p {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.65;
  font-style: italic;
}

/* -- Feature grid (toolkits) -- */
.gem-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.gem-feature-grid article {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 28px 24px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.gem-feature-grid article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cyan);
  opacity: 0;
  transition: opacity var(--transition);
}
.gem-feature-grid article:hover {
  border-color: rgba(34,184,207,0.2);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.gem-feature-grid article:hover::before { opacity: 1; }
.gem-feature-grid h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--ink);
}
.gem-feature-grid p {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* -- Responsive -- */
@media (max-width: 960px) {
  .gem-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .gem-excerpt-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .gem-stat-grid,
  .gem-excerpt-grid,
  .gem-feature-grid { grid-template-columns: 1fr; }
  .gem-microproof { justify-content: center; }
}

/* ============================================
   2026 MARKETING UPLIFT -- additive only
   TV-spot ready sections. Nothing above is touched.
   ============================================ */

/* -- As Featured On strip -- */
.as-featured {
  padding: 28px 0;
  background: linear-gradient(180deg, rgba(34,184,207,0.04), transparent);
  border-bottom: 1px solid var(--border);
}
.as-featured-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.as-featured-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.as-featured-slot {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.as-featured-slot.live {
  border-style: solid;
  color: var(--cyan-soft);
  border-color: rgba(34,184,207,0.4);
  background: var(--cyan-glow);
}

/* -- Dedication band -- */
.dedication-band {
  padding: 96px 0;
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(167,139,250,0.08), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.dedication-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,0.015) 60px 61px);
  pointer-events: none;
}
.dedication-band .wrap { position: relative; }
.dedication-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan-soft);
  text-align: center;
  margin-bottom: 28px;
}
.dedication-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  max-width: 760px;
  margin: 0 auto;
}
/* Muted cream accent on the quoted phrase -- not the CTA cyan */
.dedication-quote span {
  color: #e5d3a3;
  font-style: italic;
}
.dedication-byline {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* -- Data-Naked rotator -- */
.data-naked-rotator {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.data-naked-stage {
  position: relative;
  max-width: 880px;
  margin: 32px auto 0;
  min-height: 180px;
  padding: 40px 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
}
.data-naked-stage::before {
  content: '"';
  position: absolute;
  top: -32px;
  left: 20px;
  font-family: var(--font-display);
  font-size: 8rem;
  color: rgba(34,184,207,0.12);
  line-height: 1;
  pointer-events: none;
}
.data-naked-slide {
  position: absolute;
  inset: 40px 32px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.data-naked-slide.active {
  opacity: 1;
  transform: translateY(0);
}
.data-naked-slide .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 16px;
}
.data-naked-slide .source {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-soft);
}
.data-naked-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.data-naked-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: var(--ink-faint);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.data-naked-dots button.active {
  background: var(--cyan);
  transform: scale(1.3);
}

/* -- Leave-them-with lead magnet -- */
.lead-magnet {
  padding: 96px 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34,184,207,0.08), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lead-magnet-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.lead-magnet-art {
  position: relative;
  padding: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(34,184,207,0.06), rgba(167,139,250,0.04));
  text-align: center;
}
.lead-magnet-art .badge {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-soft);
  background: var(--cyan-glow);
  border: 1px solid rgba(34,184,207,0.4);
  border-radius: 4px;
  margin-bottom: 16px;
}
.lead-magnet-art h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}
.lead-magnet-art .meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lead-magnet-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 16px;
}
.lead-magnet-copy p {
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.lead-magnet-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  align-items: stretch;
}
.lead-magnet-form input[type="email"],
.lead-magnet-form input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
}
.lead-magnet-form input[type="email"]:focus,
.lead-magnet-form input[type="text"]:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-glow);
}
.lead-magnet-textarea {
  width: 100%;
  padding: 14px;
  font-family: inherit;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: #fff;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
}
.lead-magnet-textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-glow);
}
.lead-magnet-form button {
  padding: 14px 22px;
  font: inherit;
  font-weight: 600;
  color: #04161a;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-soft));
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.lead-magnet-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(34,184,207,0.3);
}
.lead-magnet-fine {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.lead-magnet-status {
  margin-top: 12px;
  font-size: 0.9rem;
  min-height: 1.4em;
}
.lead-magnet-status.success { color: var(--green); }
.lead-magnet-status.error { color: #ef6a6a; }

/* -- About the Author -- */
.about-author {
  padding: 96px 0;
  background: var(--bg-2);
}
.about-author-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.about-author-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 40%, rgba(167,139,250,0.16), transparent 65%),
    linear-gradient(135deg, var(--bg-3), var(--bg));
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-author-portrait .monogram {
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--ink-muted);
}
.about-author-portrait .frame-note {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.about-author-copy .credentials {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-soft);
  margin-bottom: 12px;
}
.about-author-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 16px;
}
.about-author-copy .pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  border-left: 3px solid var(--cyan);
  padding-left: 16px;
  margin: 20px 0;
}
.about-author-copy p { color: var(--ink-soft); margin-bottom: 12px; }

/* -- Socials strip -- */
.socials-strip {
  padding: 56px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.socials-strip h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 24px;
}
.socials-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.social-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.social-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34,184,207,0.3);
  background: var(--bg-card-hover);
}
.social-card svg { width: 22px; height: 22px; }
.social-card .handle {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}
.social-card .label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
}

/* -- Press / Media page shared -- */
.press-hero {
  padding: 120px 0 60px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34,184,207,0.10), transparent 70%),
    var(--bg);
}
.press-hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
}
.press-hero-cover img {
  width: 100%;
  max-width: 320px;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.press-fact-sheet,
.press-bio,
.press-talking-points,
.press-quotes,
.press-downloads,
.press-contact {
  padding: 72px 0;
  border-top: 1px solid var(--border);
}
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.bio-card {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bio-card.bio-card-wide { grid-column: 1 / -1; }
.bio-card h3 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-soft);
  margin-bottom: 14px;
}
.bio-card p { color: var(--ink-soft); margin-bottom: 10px; }
.bio-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
}

/* -- Media form -- */
.media-form-section { padding: 56px 0 120px; }
.media-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.media-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.media-form label span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.media-form input,
.media-form textarea,
.media-form select {
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  outline: none;
}
.media-form input:focus,
.media-form textarea:focus,
.media-form select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-glow);
}
.media-form button {
  align-self: flex-start;
  padding: 14px 28px;
  font: inherit;
  font-weight: 600;
  color: #04161a;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-soft));
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.media-success,
.media-error {
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
}
.media-success h2 { margin-bottom: 12px; }
.media-error { border-color: #ef6a6a; color: #ef6a6a; }

/* -- Three Things This Week -- */
.three-things {
  padding: 96px 0;
  background:
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.three-things-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}
.three-thing {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
  outline: none;
}
.three-thing:hover {
  transform: translateY(-2px);
  border-color: rgba(34,184,207,0.35);
  background: var(--bg-card-hover);
}
.three-thing:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-glow);
}
.three-thing-box {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid var(--border-strong);
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.three-thing-box svg {
  width: 18px;
  height: 18px;
  color: transparent;
  transition: color var(--transition);
}
.three-thing.done .three-thing-box {
  background: linear-gradient(135deg, var(--green), #2bb978);
  border-color: var(--green);
  transform: scale(1.05);
}
.three-thing.done .three-thing-box svg { color: #04161a; }
.three-thing-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-soft);
  margin-bottom: 8px;
}
.three-thing-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
  transition: color var(--transition);
}
.three-thing-body p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}
.three-thing.done .three-thing-body h3 {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(61,220,132,0.6);
  text-decoration-thickness: 2px;
}
.three-thing-progress {
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.three-thing-counter {
  color: var(--cyan-soft);
  font-weight: 700;
  font-size: 1.1rem;
}
.three-thing-celebrate {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid rgba(61,220,132,0.4);
  background: linear-gradient(135deg, rgba(61,220,132,0.08), rgba(34,184,207,0.04));
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.three-thing-celebrate.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* -- Three Things: card done fade + checkbox animate -- */
.three-thing.done {
  opacity: 0.60;
  transition: opacity 0.4s ease, transform var(--transition), border-color var(--transition), background var(--transition);
}
.three-thing-box {
  transition: background var(--transition), border-color var(--transition), transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.three-thing.done .three-thing-box {
  transform: scale(1.15);
}

/* -- Three Things: week-complete badge -- */
.three-thing-week-badge {
  display: none;
  text-align: center;
  margin-bottom: 8px;
}
.three-thing-week-badge.show {
  display: block;
}
.three-thing-week-badge span {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(61,220,132,0.12);
  border: 1px solid rgba(61,220,132,0.35);
  color: var(--green);
}

/* -- Three Things: Sunday reminder email row -- */
.three-thing-reminder {
  margin-top: 20px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-muted);
}
.three-thing-reminder-form {
  display: inline-flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.three-thing-reminder-form input[type="email"] {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-3);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.85rem;
  width: 220px;
  outline: none;
  transition: border-color var(--transition);
}
.three-thing-reminder-form input[type="email"]:focus {
  border-color: var(--cyan);
}
.three-thing-reminder-form button {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--cyan);
  background: transparent;
  color: var(--cyan-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.three-thing-reminder-form button:hover {
  background: var(--cyan-glow);
}
.three-thing-reminder-status {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  min-height: 1em;
}
.three-thing-reminder-status.success { color: var(--green); }
.three-thing-reminder-status.error   { color: var(--amber); }

/* -- Coming Next Week container -- */
.three-thing-teaser {
  margin: 28px auto 0;
  max-width: 720px;
  padding: 20px 28px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: var(--radius);
}
.three-thing-teaser .dedication-eyebrow {
  letter-spacing: 0.14em;
  font-size: 0.68rem;
}
.three-thing-teaser-list {
  list-style: decimal;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  text-align: left;
}
.three-thing-teaser-list li {
  margin-bottom: 6px;
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.three-thing-teaser-reminder-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--cyan-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.three-thing-teaser-reminder-link:hover {
  color: var(--ink);
}

/* -- Responsive uplift -- */
@media (max-width: 860px) {
  .three-things-grid { grid-template-columns: 1fr; }
  .lead-magnet-grid,
  .about-author-grid,
  .press-hero-grid,
  .bio-grid { grid-template-columns: 1fr; }
  .about-author-portrait { max-width: 280px; margin: 0 auto; }
  .press-hero-cover img { max-width: 240px; margin: 0 auto; display: block; }
  .dedication-band { padding: 72px 0; }
}

/* ============================================================
   SUPERFY mobile pass: hero, grids, nav on 640px and under
   ============================================================ */
@media (max-width: 640px) {
  /* Hero: 140px top padding on 768px rule is too large for phones.
     Override here so the above-fold hit is immediate. */
  .hero { padding: 56px 0 32px; }
  .hero-grid { gap: 24px; }
  .hero-cover { max-width: 200px; margin: 16px auto 0; }

  /* Hero headline: scale down to fit without wrapping badly,
     and tight enough that headline + subhead + primary CTA all
     land inside the first phone viewport. */
  .hero-eyebrow { font-size: 0.7rem; }
  .hero h1.t-display {
    font-size: clamp(1.9rem, 8vw, 2.3rem);
    line-height: 1.06;
  }

  /* Sticky buy bar: hide on mobile (nav already has Get the Book) */
  .sticky-buy-bar { display: none !important; }

  /* Trust bar: compact the stat grid to 3 equal columns, smaller text */
  .gem-stat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gem-stat-grid article h3 { font-size: 1.6rem; }
  .gem-stat-grid article p { font-size: 0.72rem; }

  /* Shock grid (why-this-book): force single column */
  .shock-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .shock-card { padding: 18px 14px; }
  .shock-stat { font-size: 1.4rem; }
  .shock-label { font-size: 0.78rem; }

  /* Inside look grid: single column */
  .inside-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* Vol2 grid: single column */
  .vol2-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* Transform/comparison grid: single column */
  .transform-grid { grid-template-columns: 1fr !important; gap: 8px; }

  /* Excerpt section: reduce top space */
  .excerpt { padding-top: 28px !important; padding-bottom: 28px !important; }

  /* Dedication band: compact */
  .dedication-band { padding: 20px 0; }
  .dedication-text { font-size: 0.92rem; }

  /* Data rotator quotes: smaller font */
  .rotator-quote { font-size: 1rem; }

  /* FAQ: tighter accordion */
  .faq-item { padding: 14px 16px; }
  .faq-question { font-size: 0.9rem; }

  /* Nav drawer styles live in the max-width: 768px block (search
     ".nav-links.open"). The copy that used to sit here hardcoded
     top: 53px under a ~92px two-line nav and, being later in the
     cascade, shadowed the measured geometry, so it was removed. */
}

/* -- Interaction Polish: focus rings, press states, reduced motion -- */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.capture-form input:focus-visible,
.capture-form button:focus-visible,
.back-to-top:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0);
}
.capture-form input:focus {
  box-shadow: 0 0 0 3px rgba(34,184,207,0.12);
}
.capture-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34,184,207,0.25);
}
.capture-form button:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover,
  .btn-primary:active,
  .btn-secondary:hover,
  .btn-secondary:active,
  .capture-form button:hover,
  .capture-form button:active,
  .back-to-top,
  .back-to-top.visible {
    transform: none;
  }
}

/* ============================================
   UNIFORM PAGE-TOP VIBRANCY
   Interior pages carry the homepage hero glow language so every
   page top reads as part of the same world. Same cyan + violet
   radial ellipse recipe as .hero::before, dialed to roughly two
   thirds of the homepage alphas so interior tops glow without
   overpowering their content. Static gradients only, no animation.
   Coverage by first section per page:
     .page-head   vault, ask-avery, prequels, spinoffs, field-reports
     .press-hero  press, media, newsletter
     .blog-hero   blog, universe, field-notes, current-events
                  (current-events pairs it with .events-hero)
   ============================================ */
.page-head,
.press-hero,
.blog-hero {
  position: relative;
  overflow: hidden;
}
.page-head::before,
.press-hero::before,
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Blog family leans cyan: blog, universe, field-notes, current-events */
.blog-hero::before {
  background:
    radial-gradient(ellipse 80% 70% at 72% 18%, rgba(34,184,207,0.15), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(167,139,250,0.11), transparent 50%),
    radial-gradient(ellipse 40% 40% at 55% 65%, rgba(34,184,207,0.05), transparent 50%);
}
/* Vault and press family leans violet: page-head and press-hero pages */
.page-head::before,
.press-hero::before {
  background:
    radial-gradient(ellipse 80% 70% at 28% 20%, rgba(167,139,250,0.13), transparent 60%),
    radial-gradient(ellipse 60% 50% at 78% 70%, rgba(34,184,207,0.12), transparent 50%),
    radial-gradient(ellipse 40% 40% at 45% 60%, rgba(167,139,250,0.05), transparent 50%);
}
/* Content stacks above the glow. Every covered section wraps its
   content in a direct child .wrap (verified across all pages). */
.page-head > .wrap,
.press-hero > .wrap,
.blog-hero > .wrap {
  position: relative;
  z-index: 1;
}
/* Mobile: same language, slightly quieter. overflow: hidden on the
   sections keeps the ellipses from causing horizontal scroll. No
   fixed-attachment backgrounds anywhere in this block. */
@media (max-width: 640px) {
  .blog-hero::before {
    background:
      radial-gradient(ellipse 90% 60% at 70% 15%, rgba(34,184,207,0.11), transparent 60%),
      radial-gradient(ellipse 70% 50% at 20% 85%, rgba(167,139,250,0.08), transparent 50%);
  }
  .page-head::before,
  .press-hero::before {
    background:
      radial-gradient(ellipse 90% 60% at 30% 15%, rgba(167,139,250,0.10), transparent 60%),
      radial-gradient(ellipse 70% 50% at 80% 80%, rgba(34,184,207,0.09), transparent 50%);
  }
}

/* ============================================================
   RENDER PASS: sitewide chrome and legibility, 2026-08-11
   ============================================================
   Rendering fixes only. No copy, link, section, or feature is
   removed anywhere in this block. ASCII only. No em dashes.
   ============================================================ */

/* R2. The fixed header sliced the heading an anchor jumped to.
   js/main.js applies a header offset, but only to links written
   as href="#id". The nav writes "./#platforms" and "index.php#x",
   so those jumps, plus any inbound link that already carries a
   hash, fall back to the native scroll and land under the bar.
   Reserve the real bar height on the scroll container. Measured:
   nav 92px at desktop widths, plus the 62px sticky buy bar that
   rides under it once the hero has scrolled away. On phones the
   nav is 75px and the buy bar never shows. */
:root {
  --du-header-offset: 154px;
  --du-footbar-offset: 0px;
}

html {
  scroll-padding-top: calc(var(--du-header-offset) + 20px);
  scroll-padding-bottom: calc(var(--du-footbar-offset) + 20px);
}

/* R7. Footer intro and credits read as pale grey on near black.
   .footer p (0,1,1) outranked .footer-tagline (0,1,0), so the
   tagline resolved to --ink-faint #5d5f74 instead of the
   --ink-muted the rule intended. Measured before: 3.06:1 on
   #0d0f16. Measured after: 6.18:1. Same words, readable ink. */
.footer .footer-tagline {
  color: var(--ink-muted);
}

.footer .footer-bottom p,
.footer .footer-links a {
  color: var(--ink-muted);
}

/* R8. Footer used the left half of a phone screen and left the
   right half empty. Keep two columns down to the narrowest
   supported width and let the brand block span both, so the
   whole width carries content. HC: use the whole space. */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
  /* Brand block spans the full width. The two four-link columns
     pair up on one row. Explore holds seven links, so it takes the
     full width below and splits its own links into two columns.
     Every link that shipped before still ships. */
  .footer-grid > .footer-col:first-child {
    grid-column: 1 / -1;
    order: 0;
  }
  .footer-grid > .footer-col:nth-child(2) { order: 1; }
  .footer-grid > .footer-col:nth-child(4) { order: 2; }
  .footer-grid > .footer-col:nth-child(3) {
    grid-column: 1 / -1;
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    align-content: start;
  }
  .footer-grid > .footer-col:nth-child(3) > h4 {
    grid-column: 1 / -1;
  }
  .footer-tagline {
    max-width: none;
  }
  .footer {
    padding-top: 40px;
  }
}

/* R9. The circular back-to-top button sat on top of body text.
   On desktop it already sits in the page gutter. On phones the
   content is full width, so give the button a lane of its own:
   dock it inside the sticky bottom bar band, which is an opaque
   layer, and reserve matching room inside that bar so it never
   covers the bar's own title or its Read Free control. */
@media (max-width: 768px) {
  :root {
    --du-header-offset: 75px;
    --du-footbar-offset: 72px;
  }

  .back-to-top {
    bottom: calc(12px + env(safe-area-inset-bottom));
    right: 12px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--ink);
    z-index: 100;
  }

  .sticky-cta-inner {
    padding-right: 58px;
  }
}