/*
 * Digitally Undressed -- Editorial Redesign Overlay
 * Loads after main.css. Overrides typography and adds buzz-feed surface.
 *
 * Voice: literary + engineer. Calm, declarative, editorial.
 * Type stack: Source Serif 4 (display) + Outfit (body) + JetBrains Mono (data).
 * Per L-008 typography canon. Fonts load once in includes/header.php.
 * Palette: deep ink, warm cream accent, signal cyan for the live feed.
 *
 * ASCII only. No em dashes. No emojis. (Per thedreamerai-site governance.)
 */

:root {
  --du-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --du-font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  --du-font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --du-cream: #f5e9d3;
  --du-cream-dim: rgba(245, 233, 211, 0.72);
  --du-cream-line: rgba(245, 233, 211, 0.18);
  --du-signal: #00f5d4;
  --du-alert: #ff5252;
  --du-warn: #ffb547;
  --du-info: #7cb7ff;
  --du-ink: #0a0d10;
  --du-ink-2: #11151a;
}

/* ============ TYPOGRAPHY OVERRIDES ============ */

body,
.hero-sub,
.gem-stat-grid p,
.gem-excerpt-card p,
.faq-a,
.three-thing-body p,
.lead-magnet-copy p,
.about-author-copy p {
  font-family: var(--du-font-body);
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -0.005em;
}

.t-display,
.t-section,
h1.t-display,
h2.t-display,
.gem-excerpt-card h3,
.three-thing-body h3,
.about-author-copy h2,
.lead-magnet-copy h2,
.final-cta h2,
.faq-section h2,
.dedication-quote {
  font-family: var(--du-font-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.012em;
  line-height: 1.18;
  font-variation-settings: 'opsz' 60;
}

.t-display {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.hero h1.t-display,
.gem-hero h1.t-display {
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.t-label,
.hero-eyebrow span,
.price-format,
.price-badge,
.dedication-eyebrow,
.three-thing-tag,
.gem-microproof span,
.as-featured-label,
.gem-excerpt-card .t-label,
.about-author-copy .credentials,
.lead-magnet-copy .dedication-eyebrow {
  font-family: var(--du-font-mono) !important;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.price-amount,
.gem-stat-grid h3 {
  font-family: var(--du-font-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  font-variation-settings: 'opsz' 144;
}

/* ============ AS FEATURED ON: kill the placeholder feel ============ */

.as-featured {
  border-bottom: 1px solid var(--du-cream-line);
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.04), transparent);
}

.as-featured-inner {
  gap: 28px;
  flex-wrap: wrap;
  align-items: baseline;
}

.as-featured-label {
  color: var(--du-signal);
  font-family: var(--du-font-mono) !important;
}

.as-featured-slot {
  font-family: var(--du-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  opacity: 0.7;
}

/* ============ BUZZ FEED: WHILE YOU READ THIS ============ */

.buzz-feed {
  padding: 92px 0 80px;
  position: relative;
  border-top: 1px solid var(--du-cream-line);
  border-bottom: 1px solid var(--du-cream-line);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 245, 212, 0.06), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 82, 82, 0.04), transparent 60%),
    var(--du-ink);
}

.buzz-feed-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  border-bottom: 1px solid var(--du-cream-line);
  padding-bottom: 26px;
  margin-bottom: 36px;
}

.buzz-feed-eyebrow {
  font-family: var(--du-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--du-signal);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.buzz-feed-eyebrow .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--du-signal);
  box-shadow: 0 0 0 0 rgba(0, 245, 212, 0.7);
  animation: buzz-pulse 2.2s infinite;
}

@keyframes buzz-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 245, 212, 0.7); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 245, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 245, 212, 0); }
}

.buzz-feed h2.t-display {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  margin: 0;
}

.buzz-feed-sub {
  font-family: var(--du-font-body);
  font-size: 1.02rem;
  color: var(--du-cream-dim);
  max-width: 60ch;
  margin-top: 14px;
}

.buzz-feed-meta {
  font-family: var(--du-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  text-align: right;
  line-height: 1.8;
}

.buzz-feed-meta strong {
  color: var(--du-signal);
  font-weight: 500;
}

.buzz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0;
  border-top: 1px solid var(--du-cream-line);
}

.buzz-card {
  position: relative;
  padding: 28px 28px 26px;
  border-right: 1px solid var(--du-cream-line);
  border-bottom: 1px solid var(--du-cream-line);
  background: transparent;
  transition: background 220ms ease;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}

.buzz-card:hover {
  background: rgba(0, 245, 212, 0.025);
}

.buzz-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--du-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  margin-bottom: 18px;
}

.buzz-card-date {
  color: var(--du-signal);
}

.buzz-card-severity {
  padding: 3px 8px;
  border: 1px solid var(--du-cream-line);
  border-radius: 2px;
  font-size: 0.6rem;
}

.buzz-card-severity[data-sev="high"]   { color: var(--du-alert); border-color: rgba(255, 82, 82, 0.4); }
.buzz-card-severity[data-sev="medium"] { color: var(--du-warn); border-color: rgba(255, 181, 71, 0.4); }
.buzz-card-severity[data-sev="info"]   { color: var(--du-info); border-color: rgba(124, 183, 255, 0.4); }

.buzz-card-headline {
  font-family: var(--du-font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--du-cream);
  margin-bottom: 16px;
}

.buzz-card-source {
  font-family: var(--du-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  margin-bottom: 22px;
}

.buzz-card-source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(245, 233, 211, 0.3);
  text-underline-offset: 3px;
}

.buzz-card-source a:hover {
  text-decoration-color: var(--du-signal);
  color: var(--du-cream);
}

.buzz-card-quote {
  font-family: var(--du-font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--du-cream);
  border-left: 2px solid var(--du-signal);
  padding-left: 16px;
  margin-bottom: 18px;
}

.buzz-card-chapter {
  font-family: var(--du-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--du-signal);
  margin-bottom: 22px;
}

.buzz-card-action {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--du-cream-line);
}

.buzz-card-action-label {
  font-family: var(--du-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  margin-bottom: 8px;
}

.buzz-card-action-body {
  font-family: var(--du-font-body);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--du-cream);
}

.buzz-card-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--du-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--du-signal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.buzz-card-cta:hover {
  border-bottom-color: var(--du-signal);
}

.buzz-card-cta::after {
  content: '->';
  font-family: var(--du-font-mono);
  letter-spacing: 0;
}

.buzz-feed-empty {
  padding: 60px 24px;
  text-align: center;
  font-family: var(--du-font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
}

.buzz-feed-stats {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: 1px solid var(--du-cream-line);
  background: rgba(0, 0, 0, 0.2);
}

.buzz-feed-stat {
  padding: 22px 20px;
  border-right: 1px solid var(--du-cream-line);
}

.buzz-feed-stat:last-child {
  border-right: 0;
}

.buzz-feed-stat-value {
  font-family: var(--du-font-display);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--du-signal);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.buzz-feed-stat-label {
  font-family: var(--du-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  line-height: 1.4;
}

@media (max-width: 700px) {
  .buzz-feed-head {
    grid-template-columns: 1fr;
  }
  .buzz-feed-meta {
    text-align: left;
  }
  .buzz-card {
    min-height: auto;
  }
}

/* ============ HERO SHARPENING ============ */

.hero-eyebrow span {
  color: var(--du-signal);
}

.hero h1.t-display {
  /* Tighter, more newspaper-y */
  margin-top: 18px;
}

.hero-sub {
  font-size: 1.18rem;
  line-height: 1.45;
  max-width: 38ch;
  color: var(--du-cream-dim);
  margin-top: 22px;
}

.hero-proof-text {
  font-family: var(--du-font-display);
  font-style: italic;
  font-size: 1.08rem;
}

/* ============ TOOLKITS REVOICE ============ */

.toolkits .gem-feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border: 1px solid var(--du-cream-line);
}

.toolkits .gem-feature-grid article {
  padding: 30px 28px 28px;
  border-right: 1px solid var(--du-cream-line);
  border-bottom: 1px solid var(--du-cream-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
  transition: background 220ms ease;
}

.toolkits .gem-feature-grid article:hover {
  background: rgba(0, 245, 212, 0.025);
}

.toolkits .gem-feature-grid h3 {
  font-family: var(--du-font-display);
  font-weight: 700;
  font-size: 1.42rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--du-cream);
}

.toolkits .gem-feature-grid .toolkit-tag {
  font-family: var(--du-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--du-signal);
}

.toolkits .gem-feature-grid p {
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--du-cream-dim);
  flex: 1;
}

.toolkits .gem-feature-grid .toolkit-cta {
  margin-top: 10px;
  font-family: var(--du-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--du-signal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--du-cream-line);
}

.toolkits .gem-feature-grid .toolkit-cta:hover {
  color: var(--du-cream);
}

.toolkits .gem-feature-grid .toolkit-cta::after {
  content: 'PDF ->';
  font-family: var(--du-font-mono);
  letter-spacing: 0.04em;
}

/* === Toolkit gate forms (email in, PDF out) === */
/* Base styles. These forms previously had rules only inside the 640px
   media query below, so desktop rendered raw browser defaults (white
   inputs, bevel buttons) against the dark grid. main.css scopes its
   form styles per-form-class and ships no global input/button
   appearance styles, so everything the gate needs is declared here.
   The 640px block adds min-height and 16px input text on phones;
   these rules compose with it rather than fight it. Scoped under
   .toolkits to stay clear of other capture forms. */

.toolkits .toolkit-gate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.toolkits .toolkit-gate-form input[type="email"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--du-cream-line);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--du-cream);
  font-family: var(--du-font-body);
  font-size: 16px; /* pinned so iOS does not zoom on focus */
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.toolkits .toolkit-gate-form input[type="email"]::placeholder {
  color: var(--du-cream-dim);
}

.toolkits .toolkit-gate-form input[type="email"]:focus {
  outline: none;
  border-color: var(--du-signal);
  box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.12);
}

.toolkits .toolkit-gate-form button {
  width: 100%;
  min-height: 48px;
  background: var(--du-signal);
  color: #06231f;
  font-family: var(--du-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.toolkits .toolkit-gate-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 245, 212, 0.25);
}

.toolkits .toolkit-gate-form button:active {
  transform: translateY(0);
}

.toolkits .toolkit-gate-form button:focus-visible {
  outline: 2px solid var(--du-signal);
  outline-offset: 3px;
}

.toolkits .toolkit-gate-form button:disabled {
  cursor: default;
  transform: none;
  box-shadow: none;
  opacity: 0.85;
}

.toolkits .toolkit-gate-status {
  font-family: var(--du-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  min-height: 1em;
  color: var(--du-cream-dim);
}

.toolkits .toolkit-gate-status a {
  color: var(--du-signal);
  text-decoration: underline;
  text-decoration-color: rgba(0, 245, 212, 0.45);
  text-underline-offset: 3px;
}

/* handleToolkitGate (js/main.js) writes plain text plus a fallback
   download link today. The success / error hooks below match the
   className convention its sibling capture handlers already use
   (lead-magnet-status, three-thing-reminder-status), so the moment
   the toolkit handler adopts the same convention these light up
   without another CSS pass. */
.toolkits .toolkit-gate-status.success { color: var(--du-signal); }
.toolkits .toolkit-gate-status.error   { color: #ff7a6b; }

/* ============ DEDICATION + EXCERPTS sharpening ============ */

.dedication-quote {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  font-style: italic;
  font-weight: 600;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
}

.dedication-quote span {
  color: var(--du-signal);
  font-style: normal;
}

.gem-excerpt-card h3 {
  font-size: 1.5rem;
  line-height: 1.12;
  margin-bottom: 14px;
}

.gem-excerpt-card p {
  font-family: var(--du-font-display);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.45;
}

/* ============ PRICING editorial card feel ============ */

.price-card {
  border: 1px solid var(--du-cream-line);
  border-radius: 0;
}

.price-amount {
  font-size: clamp(3rem, 6vw, 4.6rem);
}

/* ============ Buttons: unified to the main.css baseline ============ */
/* The .btn-primary / .btn-secondary overrides that lived here (uppercase
   mono cream styling) were removed 2026-06-12 so every page across the
   site renders the one cyan button defined in main.css. Pages that load
   this overlay (index, current-events, newsletter, universe) now match
   the 20 pages that do not, instead of carrying a second button look.
   Operator decision: one button system, the clean cyan baseline. */

/* ============ BUZZ CARD: chapter block (v2) ============ */

.buzz-card-chapter {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--du-cream-line);
  background: rgba(0, 245, 212, 0.03);
  border-left: 3px solid var(--du-signal);
}

.buzz-card-chapter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.buzz-card-chapter-label {
  font-family: var(--du-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--du-signal);
}

.buzz-card-score {
  font-family: var(--du-font-display);
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1;
  padding: 3px 9px;
  border-radius: 2px;
  letter-spacing: -0.02em;
  background: var(--du-cream);
  color: var(--du-ink);
  min-width: 28px;
  text-align: center;
}

.buzz-card-score[data-score="A"] { background: #4ade80; color: #04140a; }
.buzz-card-score[data-score="B"] { background: #7cb7ff; color: #04140a; }
.buzz-card-score[data-score="C"] { background: #fde68a; color: #2d1a04; }
.buzz-card-score[data-score="D"] { background: #ffb547; color: #2d1a04; }
.buzz-card-score[data-score="F"] { background: #ff5252; color: #1a0202; }
.buzz-card-score[data-score="toolkit"] {
  background: transparent;
  color: var(--du-signal);
  border: 1px solid var(--du-signal);
  font-family: var(--du-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 8px;
}

.buzz-card-chapter-title {
  font-family: var(--du-font-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.1;
  color: var(--du-cream);
  margin: 4px 0 2px;
  letter-spacing: -0.02em;
}

.buzz-card-chapter-subtitle {
  display: block;
  font-family: var(--du-font-body);
  font-size: 0.78rem;
  color: var(--du-cream-dim);
  font-style: italic;
  margin-bottom: 10px;
}

.buzz-card-chapter-excerpt {
  font-family: var(--du-font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.42;
  color: var(--du-cream);
  margin: 8px 0 0;
  text-transform: none;
}

.author-note {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-left: 3px solid rgba(245, 233, 211, 0.3);
  background: rgba(245, 233, 211, 0.04);
}

.author-note-label {
  font-family: var(--du-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  margin-bottom: 6px;
}

.author-note-text {
  font-family: var(--du-font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--du-cream);
  margin: 0;
  font-style: italic;
}

.buzz-card-chapter-empty {
  margin: 18px 0;
  padding: 12px 14px;
  border: 1px dashed var(--du-cream-line);
  background: transparent;
}

.buzz-card-chapter-empty p {
  font-family: var(--du-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--du-cream-dim);
  line-height: 1.5;
  margin: 0;
}

.buzz-card-cta-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

.buzz-card-cta-secondary {
  color: var(--du-cream-dim) !important;
}

.buzz-card-cta-secondary::after {
  content: '' !important;
}

.buzz-card-cta-secondary:hover {
  color: var(--du-cream) !important;
  border-bottom-color: var(--du-cream-line) !important;
}

/* ============================================================
   RECEIPTS FEED (schema 3.0.0 -- 4-act card)
   ============================================================ */

/* Focused single-column feed: a few tall stories read as an editorial list,
   not a lopsided masonry. Hard horizontal rules separate the eye-catchers. */
.buzz-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--du-cream-line);
}

.receipt-card {
  position: relative;
  padding: 36px 4px 34px;
  border-bottom: 1px solid var(--du-cream-line);
  background: transparent;
  transition: background 220ms ease;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.receipt-card--hidden {
  display: none;
}

.receipt-card:hover {
  background: rgba(0, 245, 212, 0.02);
}

/* The heavy three acts collapse behind a toggle so the card stays scannable. */
.receipt-detail {
  border-top: 1px solid var(--du-cream-line);
  padding-top: 18px;
}

/* The summary is a control, not a caption: banded chip treatment so the
   expander reads as something you press before you ever hover it. */
.receipt-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-family: var(--du-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  padding: 10px 14px;
  border: 1px solid var(--du-cream-line);
  border-radius: 2px;
  background: rgba(245, 233, 211, 0.03);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.receipt-detail-summary::-webkit-details-marker { display: none; }

.receipt-detail-summary:hover {
  color: var(--du-signal);
  border-color: rgba(0, 245, 212, 0.45);
  background: rgba(0, 245, 212, 0.05);
}

.receipt-detail-summary:focus-visible {
  outline: 1px solid var(--du-signal);
  outline-offset: 2px;
  color: var(--du-signal);
}

.receipt-detail-chevron {
  flex: none;
  transition: transform 220ms ease;
}

/* Closed + hovered: the chevron leans the way the strip will open. */
.receipt-detail:not([open]) .receipt-detail-summary:hover .receipt-detail-chevron {
  transform: translateY(2px);
}

/* Open: brighter text and a signal-tinted border say "engaged". */
.receipt-detail[open] .receipt-detail-summary {
  color: var(--du-cream);
  border-color: rgba(0, 245, 212, 0.35);
}

.receipt-detail[open] .receipt-detail-summary:hover {
  color: var(--du-signal);
}

.receipt-detail[open] .receipt-detail-chevron {
  transform: rotate(180deg);
}

.receipt-detail-body {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 22px;
}

/* Roll-down control: reveal the remaining receipts in place. */
.buzz-showall {
  display: block;
  margin: 32px auto 0;
  padding: 14px 30px;
  background: transparent;
  border: 1px solid var(--du-cream-line);
  border-radius: 2px;
  color: var(--du-cream);
  font-family: var(--du-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.buzz-showall:hover {
  border-color: var(--du-signal);
  color: var(--du-signal);
  background: rgba(0, 245, 212, 0.04);
}

/* Tag filter: non-matching cards stay in the DOM, just display-gated. */
.receipt-card.feed-filtered-out {
  display: none;
}

/* Quiet mono strip above the grid naming the active tag and the true
   match count, with the release control on the right. Same chip language
   as the cards, same 760px editorial column as the grid. */
.feed-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto 14px;
  padding: 10px 14px;
  border: 1px dashed rgba(0, 245, 212, 0.35);
  border-radius: 2px;
  background: rgba(0, 245, 212, 0.03);
}

.feed-filter-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--du-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
}

.feed-filter-tag {
  color: var(--du-ink);
  background: var(--du-signal);
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.feed-filter-clear {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--du-cream-line);
  border-radius: 2px;
  color: var(--du-cream);
  font-family: var(--du-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.feed-filter-clear:hover {
  border-color: var(--du-signal);
  color: var(--du-signal);
  background: rgba(0, 245, 212, 0.06);
}

.feed-filter-clear:focus-visible {
  outline: 1px solid var(--du-signal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .receipt-detail-chevron,
  .receipt-detail-summary,
  .feed-filter-clear,
  .buzz-showall { transition: none; }
  .receipt-detail:not([open]) .receipt-detail-summary:hover .receipt-detail-chevron {
    transform: none;
  }
}

.receipt-card-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.receipt-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-family: var(--du-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.receipt-card-date {
  color: var(--du-signal);
}

.receipt-card-severity {
  padding: 3px 8px;
  border: 1px solid var(--du-cream-line);
  border-radius: 2px;
  font-size: 0.6rem;
  color: var(--du-cream-dim);
}

.receipt-card-severity[data-sev="high"]   { color: var(--du-alert); border-color: rgba(255, 82, 82, 0.45); }
.receipt-card-severity[data-sev="medium"] { color: var(--du-warn); border-color: rgba(255, 181, 71, 0.45); }
.receipt-card-severity[data-sev="info"]   { color: var(--du-info); border-color: rgba(124, 183, 255, 0.45); }

.receipt-volume-badge {
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  background: var(--du-signal);
  color: var(--du-ink);
  font-weight: 700;
}

.receipt-volume-badge[data-vol="III"] {
  background: transparent;
  color: var(--du-signal);
  border: 1px solid var(--du-signal);
}

.receipt-storytype-badge {
  padding: 3px 8px;
  border: 1px dashed var(--du-cream-line);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--du-cream-dim);
}

.receipt-headline {
  font-family: var(--du-font-display);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--du-cream);
  margin: 0;
}

.receipt-source {
  font-family: var(--du-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  margin: 0;
}

.receipt-source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(245, 233, 211, 0.3);
  text-underline-offset: 3px;
}

.receipt-source a:hover {
  text-decoration-color: var(--du-signal);
  color: var(--du-cream);
}

/* === Acts (the four narrative blocks) === */

.receipt-act {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--du-cream-line);
}

.receipt-act-label {
  font-family: var(--du-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--du-signal);
  margin: 0;
}

.receipt-act-sub {
  font-family: var(--du-font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--du-cream-dim);
  margin: 0;
  font-style: italic;
}

/* === Act 2: The Pivot === */
/* One connected flow, not a stack of loose boxes: a vertical rail runs
   down the marker column, each node is a card threaded onto it, verb
   chips punch out of the rail between nodes, and the last node (where
   the chain lands) glows signal. Kind colors stay consistent with the
   data-kind values buzz-feed.js emits: account / data / control / event. */

.receipt-pivot-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.receipt-pivot-list::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 23px; /* through the marker column: 3px accent + 16px pad + 5px to dot center */
  width: 2px;
  background: linear-gradient(180deg, var(--du-cream-line), var(--du-signal));
  pointer-events: none;
}

.receipt-pivot-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--du-cream-line);
  border-left: 3px solid var(--du-signal);
  border-radius: 10px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.receipt-pivot-node[data-kind="account"] { border-left-color: var(--du-warn); }
.receipt-pivot-node[data-kind="data"]    { border-left-color: var(--du-alert); }
.receipt-pivot-node[data-kind="control"] { border-left-color: var(--du-info); }
.receipt-pivot-node[data-kind="event"]   { border-left-color: var(--du-signal); }

/* Hover: the card leans into its kind color. Only the quiet sides
   shift; the left accent stays put and :last-child emphasis is never
   clobbered by a shorthand reset. */
.receipt-pivot-node:hover {
  transform: translateX(2px);
  border-top-color: rgba(0, 245, 212, 0.4);
  border-right-color: rgba(0, 245, 212, 0.4);
  border-bottom-color: rgba(0, 245, 212, 0.4);
}

.receipt-pivot-node[data-kind="account"]:hover {
  border-top-color: rgba(255, 181, 71, 0.4);
  border-right-color: rgba(255, 181, 71, 0.4);
  border-bottom-color: rgba(255, 181, 71, 0.4);
}

.receipt-pivot-node[data-kind="data"]:hover {
  border-top-color: rgba(255, 82, 82, 0.4);
  border-right-color: rgba(255, 82, 82, 0.4);
  border-bottom-color: rgba(255, 82, 82, 0.4);
}

.receipt-pivot-node[data-kind="control"]:hover {
  border-top-color: rgba(124, 183, 255, 0.4);
  border-right-color: rgba(124, 183, 255, 0.4);
  border-bottom-color: rgba(124, 183, 255, 0.4);
}

/* The landing beat: this is where the chain ends up. */
.receipt-pivot-node:last-child {
  border-top-color: rgba(0, 245, 212, 0.4);
  border-right-color: rgba(0, 245, 212, 0.4);
  border-bottom-color: rgba(0, 245, 212, 0.4);
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.08);
}

.receipt-pivot-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: var(--du-signal);
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}

.receipt-pivot-node[data-kind="account"]  .receipt-pivot-marker { color: var(--du-warn); }
.receipt-pivot-node[data-kind="data"]     .receipt-pivot-marker { color: var(--du-alert); }
.receipt-pivot-node[data-kind="control"]  .receipt-pivot-marker { color: var(--du-info); }
.receipt-pivot-node[data-kind="event"]    .receipt-pivot-marker { color: var(--du-signal); }

.receipt-pivot-label {
  font-family: var(--du-font-body);
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--du-cream);
  font-weight: 500;
}

/* Verb chips: mono station labels pinned to the rail between nodes. */
.receipt-pivot-verb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 0;
}

.receipt-pivot-verb span {
  display: inline-block;
  margin-left: 10px; /* chip overlaps the rail so its bg punches it out */
  padding: 3px 10px;
  font-family: var(--du-font-mono);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  background: var(--du-ink);
  border: 1px solid var(--du-cream-line);
  border-radius: 999px;
}

/* Clause reference: ties the chain to the agreement quoted in the same
   card. Quotes the live data, so it tracks the clause as it changes. */
.receipt-pivot-ref {
  font-family: var(--du-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--du-cream-dim);
  margin: 0;
}

.receipt-pivot-ref a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 245, 212, 0.45);
  text-underline-offset: 3px;
}

.receipt-pivot-ref a:hover {
  color: var(--du-signal);
}

/* Honesty guard: quiet mono footnote, not a boxed shout. */
.receipt-pivot-disclaimer {
  font-family: var(--du-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--du-cream-dim);
  line-height: 1.5;
  margin: 12px 0 0;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px dashed var(--du-cream-line);
  font-style: normal;
}

/* === Act 3: The Agreement === */

/* Jump target for the pivot's "As seen in" clause reference. */
.receipt-act-agreement {
  scroll-margin-top: 84px;
}

.receipt-agreement-quote {
  font-family: var(--du-font-display);
  font-size: 0.96rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--du-cream);
  border-left: 3px solid var(--du-signal);
  padding: 4px 0 4px 18px;
  margin: 8px 0 0;
}

.receipt-agreement-attr {
  font-family: var(--du-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
  margin: 0;
}

.receipt-agreement-attr span {
  color: var(--du-signal);
}

/* === Act 4: From the Book === */

.receipt-chapter-card {
  padding: 16px 18px;
  border: 1px solid var(--du-cream-line);
  background: rgba(0, 245, 212, 0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.receipt-chapter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.receipt-chapter-num {
  font-family: var(--du-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--du-signal);
}

.receipt-chapter-platform {
  font-family: var(--du-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--du-cream);
  margin: 0;
}

.receipt-chapter-subtitle {
  font-family: var(--du-font-body);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--du-cream-dim);
  margin: 0;
}

.receipt-chapter-excerpt {
  font-family: var(--du-font-display);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--du-cream);
  margin: 6px 0 0;
}

/* === Footer: action + CTAs + tags === */

.receipt-action-body {
  font-family: var(--du-font-body);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--du-cream);
  margin: 0;
}

/* === Context: Why it matters + In the book === */

.receipt-act-context {
  gap: 16px;
}

.receipt-context-line {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 14px;
  border-left: 2px solid var(--du-cream-line);
}

.receipt-context-book {
  border-left-color: var(--du-signal);
}

.receipt-context-label {
  font-family: var(--du-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--du-cream-dim);
}

.receipt-context-book .receipt-context-label {
  color: var(--du-signal);
}

.receipt-context-line p {
  font-family: var(--du-font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--du-cream);
  margin: 0;
}

.receipt-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.receipt-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--du-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--du-ink);
  background: var(--du-signal);
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 2px;
  font-weight: 700;
}

.receipt-cta:hover {
  background: var(--du-cream);
}

.receipt-cta-secondary {
  background: transparent;
  color: var(--du-signal);
  border: 1px solid var(--du-signal);
}

.receipt-cta-secondary:hover {
  background: rgba(0, 245, 212, 0.12);
  color: var(--du-cream);
}

.receipt-mining-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--du-cream-line);
}

.receipt-mining-tag {
  font-family: var(--du-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--du-cream-dim);
  padding: 2px 6px;
  border: 1px solid var(--du-cream-line);
  background: rgba(0, 0, 0, 0.18);
}

/* On full-stack grids (no data-limit) the chips render as real buttons and
   filter the feed. The button form keeps the chip skin and earns hover,
   focus, and active states; capped grids keep inert span chips untouched. */
button.receipt-mining-tag {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease,
              background 160ms ease, transform 160ms ease;
}

button.receipt-mining-tag:hover {
  border-color: var(--du-signal);
  color: var(--du-cream);
  transform: translateY(-1px);
}

button.receipt-mining-tag:focus-visible {
  outline: 1px solid var(--du-signal);
  outline-offset: 2px;
}

/* The active tag holds the signal: lit chip, dark text, until released. */
button.receipt-mining-tag.receipt-mining-tag--active {
  background: var(--du-signal);
  border-color: var(--du-signal);
  color: var(--du-ink);
  font-weight: 700;
}

button.receipt-mining-tag.receipt-mining-tag--active:hover {
  background: var(--du-cream);
  border-color: var(--du-cream);
}

@media (prefers-reduced-motion: reduce) {
  button.receipt-mining-tag { transition: none; }
  button.receipt-mining-tag:hover { transform: none; }
}

.receipt-pivot-empty {
  font-family: var(--du-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--du-cream-dim);
  padding: 14px;
  border: 1px dashed var(--du-cream-line);
}

@media (max-width: 880px) {
  .buzz-grid {
    grid-template-columns: 1fr;
  }
  .receipt-card {
    padding: 24px 22px;
    gap: 22px;
  }
}

/* ============ COLLAPSIBLE PANCAKES (native details/summary) ============ */
/* No JavaScript. Accessible and fast on mobile. Used for the platform
   cards on the landing page and any content-heavy list that benefits from
   collapsing on small screens. The summary is a clean tappable row with a
   CSS chevron that rotates when the section is open. */
.du-pancake {
  border: 1px solid var(--du-cream-line);
  border-radius: 12px;
  background: var(--du-ink-2);
  overflow: hidden;
}
.du-pancake + .du-pancake { margin-top: 12px; }
.du-pancake > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  min-height: 56px;
  font-family: var(--du-font-display);
  color: var(--du-cream);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease;
}
.du-pancake > summary::-webkit-details-marker { display: none; }
.du-pancake > summary::marker { content: ''; }
.du-pancake > summary:hover { background: rgba(245, 233, 211, 0.04); }
.du-pancake > summary:focus-visible {
  outline: 2px solid var(--du-signal);
  outline-offset: -2px;
}
.du-pancake-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 1.05rem;
}
.du-pancake-chevron {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--du-signal);
  border-bottom: 2px solid var(--du-signal);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-top: -3px;
}
.du-pancake[open] > summary .du-pancake-chevron {
  transform: rotate(-135deg);
  margin-top: 2px;
}
.du-pancake > .du-pancake-body {
  padding: 0 20px 20px;
  color: var(--du-cream-dim);
  font-family: var(--du-font-body);
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .du-pancake-chevron,
  .du-pancake > summary { transition: none; }
}

/* ============ PLATFORM CARDS AS NATIVE DETAILS/SUMMARY ============ */
/* The platform grid cards render via render_platform_card() as native
   details/summary accordions (no JS). They reuse the p-card / grade
   classes from main.css plus the du-pancake collapse behaviour. The
   danger body is hidden by default in main.css and revealed here only
   when the details element is open. Inline SVG chevron (L-006). */
details.p-card { padding: 0; cursor: default; }
details.p-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
}
details.p-card > summary::-webkit-details-marker { display: none; }
details.p-card > summary::marker { content: ''; }
details.p-card > summary:focus-visible {
  outline: 2px solid var(--du-signal);
  outline-offset: -2px;
  border-radius: 14px;
}
.p-card-summary-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.p-card-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--du-cream);
}
.du-pancake-chevron-svg {
  flex: 0 0 auto;
  color: var(--du-signal);
  transition: transform 0.3s ease;
}
details.p-card[open] .du-pancake-chevron-svg { transform: rotate(180deg); }
details.p-card > .p-card-danger {
  display: block;
  margin-top: 0;
  padding: 0 22px 22px;
}
@media (prefers-reduced-motion: reduce) {
  .du-pancake-chevron-svg { transition: none; }
}

/* ============ TOOLKIT FEATURE CARD ICONS ============ */
/* Inline SVG icons for the six toolkit cards in the gem-feature-grid
   (L-006, no emoji). One icon per toolkit, matched to the worksheet. */
.toolkit-feature-icon {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--du-signal);
  line-height: 0;
}
.toolkit-feature-icon svg { width: 28px; height: 28px; display: block; }

/* ============ HERO PROOF META ============ */
.hero-proof-meta {
  margin-top: 8px;
  font-family: var(--du-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--du-cream-dim);
}
.hero-proof-meta strong { color: var(--du-cream); }

/* ============ STATIC BREACH HEADLINE TICKER ============ */
/* The original index.html shipped a static scrolling strip of recent
   breach headlines. Preserved here as a non-JS marquee so no content
   is lost when index.php becomes the served homepage. */
.breach-ticker {
  border-top: 1px solid var(--du-cream-line);
  border-bottom: 1px solid var(--du-cream-line);
  background: rgba(255, 77, 79, 0.04);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}
.breach-ticker-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: breach-ticker-scroll 60s linear infinite;
}
.breach-ticker-item {
  font-family: var(--du-font-mono);
  font-size: 0.72rem;
  color: #ff4d4f;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 2.5rem;
  opacity: 0.8;
}
.breach-ticker-item::before { content: '> '; opacity: 0.5; }
@keyframes breach-ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .breach-ticker-track { animation: none; white-space: normal; flex-wrap: wrap; gap: 8px 0; width: auto; }
}

/* ============================================================
   SUPERFY: homepage mobile reading-rhythm pass
   ============================================================
   The index.php marketing stack is 18 sections deep. On phones
   each section carried its desktop-scale 80px to 120px vertical
   padding straight down, so the page ran about 24,000px tall
   (roughly 30 phone screens). This block tightens vertical rhythm
   so the reader reaches the move faster, and grows the email
   capture controls into real thumb targets. No copy is changed
   and no section is removed; only spacing and control sizing.
   Homepage only - du-redesign.css loads on index.php alone.
   Desktop is untouched (rules sit inside max-width: 640px). */
@media (max-width: 640px) {
  .why-this-book,
  .platforms,
  .excerpt,
  .pricing,
  .data-naked-rotator,
  .three-things,
  .lead-magnet,
  .about-author,
  .socials-strip,
  .faq-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .buzz-feed { padding: 32px 0 28px; }
  .trust-bar { padding: 20px 0; }
  .final-cta { padding: 44px 0; }

  /* Section heads: less air before the first card on phones. */
  .section-head { margin-bottom: 22px; }
  .section-head p { margin-top: 10px; }

  /* Hero: bring the headline and primary CTA up under the cover. */
  .gem-hero .hero-grid { gap: 22px; }
  .gem-microproof { gap: 8px 14px; margin-top: 14px; }
  .hero-ctas { gap: 10px; }

  /* Email capture controls were thin slivers. Make them tappable,
     and pin input text to 16px so iOS does not zoom on focus. */
  .toolkit-gate-form input,
  .lead-magnet-form input,
  .three-thing-reminder-form input,
  .footer-capture-form input {
    min-height: 48px;
    font-size: 16px;
  }
  .toolkit-gate-form button,
  .lead-magnet-form button,
  .three-thing-reminder-form button,
  .footer-capture-form button {
    min-height: 48px;
  }
}

/* ============================================================
   SUPERFY v2: phone funnel order + doom-scroll rhythm
   ============================================================
   The phone is small and seen on the go, so the homepage is
   reordered into a funnel: the hook, then the live Caught
   Undressing proof feed (the "I knew it" hit), then the free
   Cleanse, then the marketing depth. Desktop is untouched -
   .du-home stays a plain block wrapper above 640px and the flex
   reorder only fires on phones. Scoped to .du-home, which exists
   only on index.php, so the shared overlay never reorders
   newsletter.php. Anchor links (#cleanse, #buzz, #buy) still
   resolve to each section's new visual position. */
@media (max-width: 640px) {
  .du-home { display: flex; flex-direction: column; }

  .du-home > .hero              { order: 1; }
  .du-home > .launch-banner     { order: 2; }
  .du-home > .trust-bar         { order: 3; }
  .du-home > .breach-ticker     { order: 4; }
  .du-home > .buzz-feed         { order: 5; }
  .du-home > .why-this-book     { order: 6; }
  .du-home > .lead-magnet       { order: 7; }
  .du-home > .three-things      { order: 8; }
  .du-home > .excerpt           { order: 9; }
  .du-home > .toolkits          { order: 10; }
  .du-home > .pricing           { order: 11; }
  .du-home > .data-naked-rotator { order: 12; }
  .du-home > .platforms         { order: 13; }
  .du-home > .dedication-band   { order: 14; }
  .du-home > .about-author      { order: 15; }
  .du-home > .faq-section       { order: 16; }
  .du-home > .socials-strip     { order: 17; }
  .du-home > .final-cta         { order: 18; }

  .du-home > section { scroll-margin-top: 64px; }
  .buzz-feed h2.t-display { font-size: clamp(2rem, 8vw, 2.6rem); }
}

/* ============================================================
   SUPERFY v3: tighter card rhythm for doom-scroll on mobile
   ============================================================ */
@media (max-width: 640px) {
  /* Section heads: less air */
  .section-head { margin-bottom: 16px; }
  .section-head h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .section-head p { font-size: 0.88rem; margin-top: 8px; }

  /* Buzz-feed: each card is a tight punch */
  .buzz-card { padding: 14px 16px; }
  .buzz-card-meta { font-size: 0.7rem; }
  .buzz-card-headline { font-size: 0.92rem; }
  .buzz-card-chapter { font-size: 0.72rem; }

  /* Lead magnet: compact the free Cleanse pitch */
  .lead-magnet .section-head { margin-bottom: 12px; }

  /* Toolkits: stack toolkit gate cards */
  .toolkit-grid { grid-template-columns: 1fr !important; gap: 12px; }

  /* Platforms: show as 2-col grid of compact tiles */
  .platform-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .platform-card { padding: 14px 12px; }
  .platform-name { font-size: 0.82rem; }
  .platform-grade { font-size: 1.1rem; }

  /* Pricing: stack plans */
  .pricing-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .pricing-card { padding: 20px 16px; }

  /* About author: hide the decorative grid column on mobile */
  .author-grid { grid-template-columns: 1fr !important; }
  .author-photo-col { display: none; }

  /* Wrap: slightly tighter side padding */
  .wrap { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   LIVING BOOK SPRINT 1
   Additive narrative layer. Existing homepage sections remain.
   ============================================================ */

.lb-hero {
  min-height: min(920px, 100svh);
  display: flex;
  align-items: center;
  isolation: isolate;
  background: #070a0d;
}

.lb-hero .hero-backdrop {
  background:
    linear-gradient(90deg, rgba(4, 7, 10, 0.98) 0%, rgba(4, 7, 10, 0.9) 34%, rgba(4, 7, 10, 0.28) 66%, rgba(4, 7, 10, 0.08) 100%),
    linear-gradient(0deg, rgba(4, 7, 10, 0.9) 0%, transparent 38%),
    url('../assets/campaign-because-you-said-ok/web/01-allow-tap.webp') 68% center / cover no-repeat;
  filter: none;
  opacity: 1;
  transform: none;
}

.lb-hero::before {
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 72% at 69% 43%, rgba(0, 197, 230, 0.16), transparent 58%),
    radial-gradient(ellipse 46% 42% at 77% 54%, rgba(137, 92, 246, 0.11), transparent 62%);
  animation: none;
}

.lb-hero::after {
  z-index: 0;
  height: 42%;
  background: linear-gradient(to bottom, transparent, #080b0f 90%);
}

.lb-hero .hero-data-rain {
  opacity: 0.14;
}

.lb-hero .wrap {
  width: 100%;
}

.lb-hero .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  min-height: 610px;
}

.lb-hero .hero-grid > div:first-child {
  max-width: 650px;
  padding: 34px 0;
}

.lb-hero h1.t-display {
  max-width: 12ch;
  font-size: clamp(3.4rem, 7vw, 6.6rem);
  line-height: 0.98;
  text-wrap: balance;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.85);
}

.lb-hero .hero-sub {
  max-width: 56ch;
  color: rgba(245, 233, 211, 0.88);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.lb-hero .gem-microproof {
  max-width: 600px;
}

.lb-hero .hero-cover {
  align-self: end;
  margin-bottom: 80px;
  padding: 20px;
  border: 1px solid rgba(245, 233, 211, 0.2);
  background: rgba(5, 8, 11, 0.6);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
}

.lb-hero .hero-cover::before {
  content: 'THE BOOK IS THE TRANSLATOR';
  display: block;
  margin-bottom: 14px;
  color: var(--du-signal);
  font-family: var(--du-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-align: center;
}

.lb-enter-cta {
  background: var(--du-cream);
  color: var(--du-ink) !important;
}

.lb-enter-cta:hover {
  background: #fff9ee;
  box-shadow: 0 10px 34px rgba(245, 233, 211, 0.22);
}

.lb-living-book {
  position: relative;
  padding: 118px 0 104px;
  overflow: hidden;
  border-top: 1px solid var(--du-cream-line);
  border-bottom: 1px solid var(--du-cream-line);
  background:
    radial-gradient(ellipse 50% 55% at 10% 10%, rgba(0, 245, 212, 0.06), transparent 70%),
    radial-gradient(ellipse 46% 54% at 95% 85%, rgba(124, 183, 255, 0.07), transparent 68%),
    #080b0f;
}

.lb-living-book::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(245, 233, 211, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 233, 211, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.lb-intro {
  max-width: 820px;
  margin-bottom: 52px;
}

.lb-kicker,
.lb-step {
  color: var(--du-signal);
  font-family: var(--du-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lb-title {
  margin-top: 12px;
  color: var(--du-cream);
  font-family: var(--du-font-display);
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.lb-deck {
  max-width: 64ch;
  margin-top: 22px;
  color: var(--du-cream-dim);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.lb-index {
  position: sticky;
  top: 72px;
  z-index: 8;
  margin: 0 0 32px;
  border: 1px solid var(--du-cream-line);
  background: rgba(8, 11, 15, 0.92);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

.lb-index-list {
  display: grid;
  grid-template-columns: repeat(8, minmax(118px, 1fr));
  list-style: none;
}

.lb-index a {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 12px 14px;
  border-right: 1px solid var(--du-cream-line);
  color: rgba(245, 233, 211, 0.58);
  font-family: var(--du-font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 180ms ease, background 180ms ease;
}

.lb-index li:last-child a {
  border-right: 0;
}

.lb-index a span {
  color: rgba(0, 245, 212, 0.5);
}

.lb-index a:hover,
.lb-index a:focus-visible,
.lb-index a[aria-current='step'] {
  color: var(--du-cream);
  background: rgba(0, 245, 212, 0.07);
}

.lb-chapters {
  display: grid;
  grid-auto-columns: minmax(290px, 1fr);
  grid-auto-flow: column;
  gap: 16px;
  padding: 0 0 20px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: rgba(0, 245, 212, 0.55) rgba(245, 233, 211, 0.08);
  list-style: none;
}

.lb-chapter {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--du-cream-line);
  background: linear-gradient(145deg, rgba(245, 233, 211, 0.035), rgba(0, 245, 212, 0.018));
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.lb-chapter::after {
  content: '';
  position: absolute;
  right: -45px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 245, 212, 0.09), transparent 68%);
}

.lb-chapter:hover,
.lb-chapter.is-active {
  border-color: rgba(0, 245, 212, 0.42);
  background: linear-gradient(145deg, rgba(245, 233, 211, 0.055), rgba(0, 245, 212, 0.05));
  transform: translateY(-4px);
}

.lb-chapter h3 {
  margin: auto 0 14px;
  color: var(--du-cream);
  font-family: var(--du-font-display);
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.lb-chapter > p:not(.lb-step) {
  color: var(--du-cream-dim);
  font-size: 0.95rem;
}

.lb-link {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-top: 24px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(0, 245, 212, 0.32);
  color: var(--du-signal);
  font-family: var(--du-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lb-link:hover,
.lb-link:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
}

.lb-campaign {
  padding: 112px 0;
  color: #121416;
  background: #efe6d8;
}

.lb-campaign .wrap {
  display: grid;
  grid-template-columns: minmax(240px, 0.6fr) minmax(0, 1.4fr);
  gap: 56px;
  align-items: start;
}

.lb-campaign-copy {
  position: sticky;
  top: 112px;
}

.lb-campaign .lb-kicker,
.lb-campaign .lb-link {
  color: #0a7488;
}

.lb-campaign .lb-title {
  color: #121416;
  font-size: clamp(2.6rem, 4.6vw, 4.7rem);
}

.lb-campaign-copy > p:not(.lb-kicker) {
  margin-top: 20px;
  color: rgba(18, 20, 22, 0.72);
  font-size: 1rem;
}

.lb-campaign-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lb-campaign-scene {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  background: #111418;
}

.lb-campaign-scene:nth-child(1),
.lb-campaign-scene:nth-child(4) {
  grid-column: 1 / -1;
  min-height: 430px;
}

.lb-campaign-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.lb-campaign-scene:hover img {
  transform: scale(1.025);
}

.lb-campaign-scene figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 54px 20px 18px;
  color: #fff;
  background: linear-gradient(transparent, rgba(4, 7, 10, 0.86));
  font-family: var(--du-font-display);
  font-size: 1.25rem;
}

@media (max-width: 900px) {
  .lb-hero {
    min-height: auto;
  }

  .lb-hero .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .lb-hero .hero-grid > div:first-child {
    padding-top: 80px;
  }

  .lb-hero .hero-cover {
    max-width: 220px;
    margin: 0 0 20px;
  }

  .lb-index {
    overflow-x: auto;
  }

  .lb-index-list {
    min-width: 930px;
  }

  .lb-campaign .wrap {
    grid-template-columns: 1fr;
  }

  .lb-campaign-copy {
    position: static;
    max-width: 650px;
  }
}

@media (max-width: 640px) {
  .du-home > .hero               { order: 1; }
  .du-home > .lb-living-book     { order: 2; }
  .du-home > .lb-campaign        { order: 3; }
  .du-home > .launch-banner      { order: 4; }
  .du-home > .trust-bar          { order: 5; }
  .du-home > .breach-ticker      { order: 6; }
  .du-home > .buzz-feed          { order: 7; }
  .du-home > .why-this-book      { order: 8; }
  .du-home > .lead-magnet        { order: 9; }
  .du-home > .three-things       { order: 10; }
  .du-home > .excerpt            { order: 11; }
  .du-home > .toolkits           { order: 12; }
  .du-home > .pricing            { order: 13; }
  .du-home > .data-naked-rotator { order: 14; }
  .du-home > .platforms          { order: 15; }
  .du-home > .dedication-band    { order: 16; }
  .du-home > .about-author       { order: 17; }
  .du-home > .faq-section        { order: 18; }
  .du-home > .socials-strip      { order: 19; }
  .du-home > .final-cta          { order: 20; }

  .lb-hero .hero-backdrop {
    background:
      linear-gradient(0deg, rgba(4, 7, 10, 0.98) 0%, rgba(4, 7, 10, 0.7) 72%, rgba(4, 7, 10, 0.3) 100%),
      url('../assets/campaign-because-you-said-ok/web/01-allow-tap-mobile.webp') 61% center / cover no-repeat;
  }

  .lb-hero .hero-grid > div:first-child {
    padding-top: 58px;
  }

  .lb-hero h1.t-display {
    max-width: 11ch;
    margin-inline: auto;
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .lb-hero .hero-cover {
    justify-self: center;
    margin-inline: auto;
  }

  .lb-living-book,
  .lb-campaign {
    padding: 78px 0;
  }

  .lb-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .lb-index {
    top: 60px;
    margin-inline: -16px;
  }

  .lb-chapters {
    margin-right: -16px;
  }

  .lb-chapter {
    min-height: 360px;
  }

  .lb-campaign-gallery {
    grid-template-columns: 88% 88% 88% 88%;
    gap: 12px;
    margin-right: -16px;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
  }

  .lb-campaign-scene,
  .lb-campaign-scene:nth-child(1),
  .lb-campaign-scene:nth-child(4) {
    grid-column: auto;
    min-height: 360px;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-chapter,
  .lb-campaign-scene img {
    transition: none;
  }

  .lb-chapter:hover,
  .lb-chapter.is-active,
  .lb-campaign-scene:hover img {
    transform: none;
  }
}