/* Report cards split from styles.css: revenue calculator, content mix, three-layer insight, subscription tiers, the 3 things, move log, AI captions, report meta, progress loop. Loaded immediately after styles.css so the cascade order is unchanged. */
/* ── Revenue Impact Calculator ──────────────────────────────────────────────── */
/* #revenue-card intentionally uses the standard .card border (no accent stripe) for consistency */
.reach-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.reach-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 18px}
.reach-card.projected{background:linear-gradient(135deg,#F4EFF9,#EDE0FA);border-color:#DDD0EE}
.rc-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-bottom:7px;line-height:1.3}
.rc-figure{font-size:1.5rem;font-weight:800;color:var(--text);line-height:1.05}
.rc-figure.gold{color:var(--gold)}
.rc-unit{font-size:.8rem;font-weight:600;color:var(--muted)}
.rc-detail{font-size:.74rem;color:var(--muted);margin-top:5px;line-height:1.4}
.rc-figure-sm{font-size:1.15rem}
.worth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:6px}
@media(max-width:640px){.worth-grid{grid-template-columns:1fr}}
.rev-footnote{font-size:.74rem;color:var(--muted);line-height:1.5;margin-top:14px}
.reach-summary-line{font-size:1.05rem;color:var(--text);line-height:1.55;background:#F4EFF9;
  border:1px solid #DDD0EE;border-radius:12px;padding:18px 22px;margin-bottom:16px}
.reach-summary-line strong{color:#3D1E7A;font-weight:700}

/* Personal welcome card - the first thing on the Benchmarks page. Leads with a
   "Hello, <name>" greeting + one value line + the reach carrot, then a
   collapsible "How we built this report" toggle that holds the methodology
   detail. Matches the .card shape so it reads as a peer of the cards below. */
.report-intro{
  margin:0 0 18px;padding:24px 28px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FAF7FD 100%);
  border:1px solid #DDD0EE;border-radius:14px;
  box-shadow:0 1px 0 rgba(84,44,158,.04);
}
.report-intro-kicker{
  margin:0 0 6px;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#542C9E;
}
.report-intro-hi{
  margin:0 0 10px;font-size:1.6rem;font-weight:800;line-height:1.15;
  color:var(--text);letter-spacing:-.01em;
}
.report-intro-value{
  margin:0 0 12px;font-size:1rem;line-height:1.6;color:var(--text);max-width:62ch;
}
.report-intro-stat{
  display:inline-block;padding:1px 8px;margin:0 1px;
  background:#fff;border:1px solid #DDD0EE;border-radius:6px;
  color:#3D1E7A;font-weight:700;
}
.report-intro-reach{
  margin:0;font-size:1.02rem;line-height:1.55;color:var(--text);
  background:#F4EFF9;border:1px solid #DDD0EE;border-radius:12px;
  padding:14px 18px;max-width:62ch;
}
.report-intro-reach strong{color:#3D1E7A;font-weight:800}
/* Static methodology heading: a quiet label that sets the "How we built this
   report" block off from the intro above it (the detail always shows beneath). */
.report-intro-method-head{
  margin-top:18px;padding-top:16px;border-top:1px dashed #DDD0EE;
  font-family:inherit;font-size:.82rem;font-weight:700;letter-spacing:.01em;
  color:#542C9E;
}
.report-intro-method{
  margin-top:12px;
}
.report-intro-method .rim-line{
  margin:0 0 10px;font-size:.88rem;color:var(--muted);line-height:1.65;max-width:64ch;
}
.report-intro-method .meth-chips{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 14px}
.report-intro-method .meth-chip{
  display:inline-block;padding:5px 12px;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  background:#fff;border:1px solid #DDD0EE;border-radius:16px;color:#542C9E;
}

/* Methodology / credibility framing card - sits at the top of the report so
   the reader sees what's behind the numbers before scrolling into sections.
   Structured as: header (icon + title), short body sentence with the reel
   count highlighted, a chip row for the five attributes, a follow-up
   sentence anchoring the baseline figure, and a dashed-divider footer for
   the threshold rule. Same text the analyst-tone copy locks in, just laid
   out so the reader can scan it. */
/* Match the `.card` container shape so this section reads as a peer of the
   other report cards (Performance Benchmarks, Content Mix, etc.) and doesn't
   look narrower than them. The lavender tint stays on the inner accents
   (icon + title + chips) so it's still visually identifiable as the
   methodology note. */
.methodology-note {
  display: block;
  margin: 0 0 16px;
  padding: 24px 28px;
  font-size: 14px;
  line-height: 1.65;
  color: #3D2E4D;
  background: linear-gradient(180deg,#FFFFFF 0%,#FAF7FD 100%);
  border: 1px solid #DDD0EE;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(84,44,158,.04);
}

.methodology-note strong {
  color: #3D1E7A;
  font-weight: 700;
}

.methodology-note .meth-header{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;
}
.methodology-note .meth-title{
  font-size:.95rem;font-weight:700;letter-spacing:.01em;
  color:var(--text);text-transform:none;
}
/* "AI Powered" label - plain brand-purple uppercase text (no pill), so it reads
   as an eyebrow label and not a clickable CTA. */
.methodology-note .meth-ai-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#542C9E;
}
.methodology-note .meth-ai-bolt{font-size:.8rem;line-height:1}
.methodology-note .meth-lede{
  margin:0 0 12px;font-size:.95rem;line-height:1.65;color:var(--text);
}
.methodology-note .meth-body{margin:0 0 10px;font-size:.88rem;color:var(--muted);line-height:1.65}
.methodology-note .meth-stat{
  display:inline-block;padding:2px 9px;margin:0 1px;
  background:#fff;border:1px solid #DDD0EE;border-radius:6px;
  color:#3D1E7A;font-weight:700;font-size:.88rem;line-height:1.5;
}
.methodology-note .meth-chips{
  display:flex;flex-wrap:wrap;gap:7px;
  margin:6px 0 14px;
}
.methodology-note .meth-chip{
  display:inline-block;padding:5px 12px;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  background:#fff;border:1px solid #DDD0EE;border-radius:16px;
  color:#542C9E;
}
/* Back-reference paragraph inside the Playbook's Winning Formula block.
   Same visual family as the top methodology note (icon + grey body),
   slightly tighter so it reads as a sub-note rather than a banner. */
.methodology-backref{
  display:flex;align-items:flex-start;gap:10px;
  margin:14px 0 0;padding:10px 12px;
  font-size:11.5px;line-height:1.55;color:#6b6470;
  background:#FAF5FF;border:1px solid #EBE0F5;border-radius:8px;
}
.methodology-backref strong{color:#4a1d6e;font-weight:600}
.methodology-backref .methodology-icon{
  color:#4a1d6e;font-size:13px;flex-shrink:0;margin-top:1px;opacity:.5;
}
/* In-place breakdown: structured methodology that mirrors the top methodology
   card, shown open under the back-reference paragraph (no toggle - the reader
   sees it without a click). Same palette/chrome so the two reads register as
   the same family. */
.methodology-backref-wrap{margin-top:14px}
.methodology-backref-wrap .methodology-backref{margin-top:0}
.methodology-backref-full{
  margin-top:8px;padding:14px 18px;
  background:#fff;border:1px solid #EBE0F5;border-radius:8px;
  font-size:12.5px;line-height:1.6;color:#6b6470;
}
.methodology-backref-full .meth-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.methodology-backref-full .meth-title{font-size:12px;font-weight:700;letter-spacing:.08em;color:#4a1d6e;text-transform:uppercase}
.methodology-backref-full .methodology-icon{color:#4a1d6e;font-size:14px;opacity:.7}
.methodology-backref-full .meth-body{margin:0 0 8px}
.methodology-backref-full .meth-stat{
  display:inline-block;padding:1px 7px;margin:0 1px;
  background:#FAF5FF;border:1px solid #DDD0EE;border-radius:4px;
  color:#4a1d6e;font-weight:700;font-size:12px;line-height:1.5;
}
.methodology-backref-full .meth-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.methodology-backref-full .meth-chip{
  display:inline-block;padding:3px 10px;font-size:11px;font-weight:600;letter-spacing:.02em;
  background:#FAF5FF;border:1px solid #DDD0EE;border-radius:14px;color:#542C9E;
}
.methodology-backref-full .meth-rule{
  margin-top:10px;padding-top:8px;border-top:1px dashed #DDD0EE;
  font-size:11.5px;font-style:italic;color:#6b6470;
}
/* Emphasised body line inside the methodology card - used to call out the
   Content Mix dimension specifically (one short paragraph between the
   chip row and the avg-views sentence). */
.methodology-note .meth-body-emphasis{
  background:#fff;border:1px solid #EBE0F5;
  border-radius:8px;padding:10px 14px;color:#3D2E4D;
  font-size:.88rem;
}
.methodology-backref-full .meth-body-emphasis{
  background:#fff;border:1px solid #EBE0F5;border-radius:6px;
  padding:8px 11px;color:#4a1d6e;
}

/* ── Content Mix card ──────────────────────────────────────────────────────
   4-bucket audience-psychology classifier. Lives at position 3 of the report
   (immediately after Performance Benchmarks) as the headline insight. Each
   row carries a colour-coded bucket badge, a % mix mini-bar, an avg-views
   mini-bar, and a confidence-tier chip from the Task 2 helper. */
/* Horizontal-scroll container so the 7-column table never overflows the card
   (and the page) on a narrow phone; it scrolls within its own box instead. */
.content-mix-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#DCD0EC transparent}
.content-mix-table-wrap::-webkit-scrollbar{height:10px}
.content-mix-table-wrap::-webkit-scrollbar-track{background:transparent}
.content-mix-table-wrap::-webkit-scrollbar-thumb{background:#DCD0EC;border-radius:8px;border:2px solid #fff}
.content-mix-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.86rem}
.content-mix-table th{
  text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  color:#7B5E9A;text-transform:uppercase;padding:8px 10px;
  border-bottom:1px solid var(--border);background:#FAF5FF;
}
.content-mix-table td{padding:12px 10px;border-bottom:1px solid #F0E8F8;vertical-align:middle}
/* Winning bucket: no row marker. Signal stays in the column data
   (best reel, observation line). */

/* ── Audio Performance ─────────────────────────────────────────────────── */
.audio-sides{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 6px}
.audio-side{
  flex:1 1 220px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--border);background:#FAF5FF;
}
.audio-side.is-winner{border-color:var(--gold);background:#FFFBF0;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.audio-side-label{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7B5E9A}
.audio-win{
  display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;
  background:var(--gold);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.04em;
}
.audio-side-views{font-size:1.6rem;font-weight:800;line-height:1.2;margin-top:6px;color:var(--ink,#2A1B3D)}
.audio-side-sub{font-size:.76rem;color:#7B5E9A;margin-top:2px}
.audio-lift{margin:10px 2px 16px;font-size:.9rem;line-height:1.5}
.audio-lift.na{color:#7B5E9A}
.audio-tracks-table{width:100%;border-collapse:collapse;font-size:.86rem}
.audio-tracks-table th{
  text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  color:#7B5E9A;text-transform:uppercase;padding:8px 10px;
  border-bottom:1px solid var(--border);background:#FAF5FF;
}
.audio-tracks-table td{padding:11px 10px;border-bottom:1px solid #F0E8F8;vertical-align:middle}
.audio-artist{color:#7B5E9A;font-size:.82rem}
/* Competitor Music carries its Time-window dropdown in each card's own
   .card-window-head (title left, dropdown right) rather than the page header,
   so the reader can re-scope right beside the table they are reading. */
.comp-audio-sub{font-size:.82rem;color:var(--muted);margin-bottom:10px;line-height:1.5}
/* Footnote under the tracks table: explains that a short window naturally
   shows fewer reels per track (so many read as "one-off"), so the windowed
   view never looks broken. */
.comp-audio-note{font-size:.76rem;color:var(--muted);line-height:1.5;margin:12px 2px 0;font-style:italic}
.comp-audio-frac{color:var(--muted);font-size:.85em}
.comp-audio-shared{background:#FFFBF0}
.comp-audio-you{
  display:inline-block;margin-left:8px;padding:1px 8px;border-radius:10px;
  background:var(--gold);color:#fff;font-size:.62rem;font-weight:700;
  letter-spacing:.03em;vertical-align:middle;
}
/* Traction badge: a pill read of a track's momentum across rivals. Tiers are
   tinted, not glowing - Trending (green) > Gaining (amber) > Emerging (grey). */
.audio-traction{
  display:inline-block;padding:2px 10px;border-radius:20px;
  font-size:.66rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.audio-traction.is-hot{background:#E8F5EE;color:#1A5C3A}
.audio-traction.is-warm{background:#FDF2E0;color:#7A4A0A}
.audio-traction.is-new{background:var(--surface2);color:var(--muted)}

/* ── Music Plan (Dominate) ─────────────────────────────────────────────── */
/* Lead box is the hero of the Music Plan: the directive is the centrepiece,
   the track lists below are supporting detail. A light lavender card (not a
   solid slab, no accent bar, no glow), just larger type + an eyebrow label so
   it reads as the headline call. */
.music-plan-lead{
  padding:22px 24px;border-radius:14px;
  background:linear-gradient(135deg,#F7F2FD,#EFE6FB);
  color:var(--text);margin-bottom:16px;border:1px solid #DDD0EE;
}
.music-plan-lead-eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#7A4FBF;margin-bottom:8px;
}
.music-plan-lead-action{font-size:1.28rem;font-weight:800;line-height:1.3;color:var(--ink,#2A1B3D)}
.music-plan-lead-reason{font-size:.92rem;line-height:1.55;margin-top:8px;color:var(--muted)}
.music-plan-note{font-size:.8rem;line-height:1.5;color:var(--muted);margin:0 0 18px}
.music-plan-note strong{color:var(--ink,#2A1B3D)}
.music-plan-note-list{margin:6px 0 0;padding-left:18px;list-style:disc}
.music-plan-note-list li{margin:3px 0;line-height:1.5}
/* Supporting sections: eyebrow-style titles so they sit clearly below the hero
   directive rather than competing with it. */
.music-plan-section{margin-top:22px}
.music-plan-section-title{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7B5E9A}
.music-plan-section-sub{font-size:.8rem;color:var(--muted);margin:2px 0 10px;line-height:1.5}
.music-plan-list{list-style:none;margin:0;padding:0}
.music-plan-track{
  display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;
  align-items:center;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;margin-bottom:8px;background:#FAF5FF;
}
/* Name takes the free space and breaks long titles instead of bleeding past the
   card edge on a phone; the avg-views meta and the icon Listen pill stay pinned
   to the right so every row lines up the same way. */
.music-plan-track-name{flex:1 1 auto;min-width:0;font-size:.9rem;overflow-wrap:break-word;word-break:break-word}
/* meta + Listen pill travel together, pinned to the right edge as one unit so
   the views line up and the pill never strands on a wrapped line. */
.music-plan-track-aside{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.music-plan-track-meta{flex:0 0 auto;font-size:.78rem;color:#7B5E9A;white-space:nowrap}
.music-plan-listen{
  flex-shrink:0;display:inline-flex;align-items:center;gap:4px;
  padding:4px 11px;border-radius:999px;background:var(--accent);color:#fff;
  font-size:.7rem;font-weight:700;text-decoration:none;white-space:nowrap;
}
.music-plan-listen:hover{background:var(--plum,#3D1E7A)}
/* The plan's two track lists now render as tables (audio-tracks-table chrome)
   so track / avg views / Listen sit in scannable columns. Right-align the Listen
   cell so the pills line up at the card edge; "n/a" when a track has no reel. */
.music-plan-table{margin-top:6px}
.music-plan-table td:last-child,.music-plan-table th:last-child{text-align:right}
.music-plan-na{color:var(--muted);font-size:.82rem}

/* Reel Length Performance (free Analyse layer). */
.length-lead{margin:2px 2px 16px;font-size:.9rem;line-height:1.5}
.length-lead.na{color:#7B5E9A}
/* Sweet-spot highlight: a scannable label + band, the key numbers as chips,
   then the action, instead of one dense run-on sentence. */
.length-spot{
  margin:2px 0 16px;padding:14px 16px;border-radius:12px;
  border:1px solid #EBDFF7;background:#FBF8FF;
  display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
/* The text column (label/band, stat chips, action line) flows on the left and
   grows; the thumbnail strip rides right-aligned beside it. */
.length-spot-main{flex:1 1 280px;min-width:0}
.length-spot-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.length-spot-label{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7B5E9A;
}
.length-spot-band{font-size:1.15rem;font-weight:800;color:var(--ink,#2A1B3D);line-height:1.2}
.length-spot-stats{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.length-stat{
  display:inline-flex;align-items:baseline;gap:4px;padding:4px 10px;border-radius:8px;
  background:#fff;border:1px solid #EBDFF7;font-size:.8rem;color:var(--muted,#6B5A7E);
}
.length-stat strong{color:var(--ink,#2A1B3D);font-weight:800}
.length-spot-action{margin:12px 0 0;font-size:.88rem;line-height:1.5;color:var(--ink,#2A1B3D)}
/* Right-aligned thumbnail strip beside the sweet-spot text. No top border/margin
   now it sits in its own column rather than stacked under the text. */
.length-spot-examples{flex:0 0 auto;margin-top:0;padding-top:0;border-top:none;text-align:right}
.length-spot-examples-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#7B5E9A;margin-bottom:9px;text-align:right;
}
.length-reel-row{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-end}
/* On a narrow screen the thumbnails wrap beneath the text - restore the divider
   and left-align so they read as a labelled strip, not a right-hugging cluster. */
@media(max-width:620px){
  .length-spot-examples{flex:1 1 100%;margin-top:14px;padding-top:13px;
    border-top:1px solid #EBDFF7;text-align:left}
  .length-spot-examples-label{text-align:left}
  .length-reel-row{justify-content:flex-start}
}
.length-reel{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;width:84px}
.length-reel-thumb-link{display:block;text-decoration:none}
.length-reel .reel-pill{margin-left:0;margin-top:1px;padding:4px 10px;font-size:10px}
.length-reel-thumb{
  position:relative;display:block;width:74px;height:96px;border-radius:9px;overflow:hidden;
  background:#F4EFF9;border:1px solid #E2D8EE;
}
.length-reel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.length-reel-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:#fff;font-size:.78rem;text-shadow:0 1px 4px rgba(0,0,0,.55);pointer-events:none;
}
.length-reel-views{font-size:.74rem;font-weight:700;color:var(--ink,#2A1B3D);text-align:center}
.length-reel:hover .length-reel-thumb{border-color:var(--accent,#542C9E)}
.length-table{width:100%;border-collapse:collapse;font-size:.86rem;table-layout:fixed}
.length-table th{
  text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  color:#7B5E9A;text-transform:uppercase;padding:8px 10px;
  border-bottom:1px solid var(--border);background:#FAF5FF;
}
.length-table td{padding:11px 10px;border-bottom:1px solid #F0E8F8;vertical-align:middle}
.length-table tr.is-sweet td{background:#FFFBF0}
/* Column widths + alignment. Percentages sum to 100% so the five columns
   distribute evenly instead of Length hogging the leftover space: Length and
   Avg views get the wide thirds (band name + bar), the two numeric columns are
   narrow and centred, and View reel holds the action pill in a centred column.
   Header and body share the same width + alignment so the row never reads as
   half-finished or leaves a dead gap before the pill. */
.length-table th:nth-child(1),.length-table td:nth-child(1){width:32%}
.length-table th:nth-child(2),.length-table td:nth-child(2),
.length-table th:nth-child(3),.length-table td:nth-child(3){text-align:center;width:11%}
.length-table th:nth-child(4),.length-table td:nth-child(4){width:28%}
.length-table th:nth-child(5),.length-table td:nth-child(5){text-align:center;width:18%}
/* View reel: muted em dash placeholder for bands with no openable reel. */
.length-view-none{color:#9A86B5;font-weight:600}
.length-win{
  display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;
  background:var(--gold);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.04em;
}
.length-thin{color:#7B5E9A;font-size:.82rem}
.length-share{font-weight:700;color:var(--ink,#2A1B3D)}
/* Avg views shown as a plain number (no bar), so the column reads cleanly. */
.length-avg-val{font-weight:700;color:var(--ink,#2A1B3D)}
.length-bar-cell{display:flex;align-items:center;gap:9px}
.length-bar-track{flex:1 1 auto;min-width:54px;height:8px;border-radius:5px;background:#EDE5F7;overflow:hidden}
.length-bar-fill{display:block;height:100%;border-radius:5px;background:#D6C9EC}
.length-bar-fill.is-sweet{background:linear-gradient(90deg,var(--accent2,#C4A4E8),var(--accent,#542C9E))}
.length-bar-val{flex:0 0 auto;font-weight:700;color:var(--ink,#2A1B3D);min-width:42px;text-align:right}
/* Per-row top-reel thumbnail beside each length band. Small portrait tile so
   the table reads at a glance without crowding the numeric columns. */
.length-band-cell{display:flex;align-items:center;gap:11px}
.length-band-thumb-link{flex:0 0 auto;display:block;text-decoration:none}
.length-band-thumb{
  display:block;width:34px;height:46px;border-radius:7px;overflow:hidden;
  background:#F4EFF9;border:1px solid #E2D8EE;
}
.length-band-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.length-band-thumb-link:hover .length-band-thumb{border-color:var(--accent,#542C9E)}
/* Empty placeholder so a band with no openable thumbnail still reserves the
   tile slot - the band names then line up in one column whether or not a row
   has a preview. */
.length-band-thumb-empty{visibility:hidden}
.length-band-name{min-width:0}

/* Flows at its natural height (no inner one-screen cap); the page scrolls as one
   for long content. The sticky table header now sticks to the page as you scroll
   so the columns stay labelled. */
.length-scroll{padding-right:6px}
.length-table thead th{position:sticky;top:0;z-index:2;
  /* border-collapse drops the th border when stuck, so paint the divider as an
     inset shadow that travels with the sticky header. */
  box-shadow:inset 0 -1px 0 var(--border)}
/* Narrow screens: tighten the five columns so the View reel pill and the bar
   both stay legible without forcing a horizontal scroll (the header stays
   page-sticky, so no inner scroll container is introduced). */
@media (max-width:640px){
  .length-table{font-size:.8rem}
  .length-table th,.length-table td{padding-left:6px;padding-right:6px}
  .length-table th:nth-child(1),.length-table td:nth-child(1){width:30%}
  .length-table th:nth-child(2),.length-table td:nth-child(2),
  .length-table th:nth-child(3),.length-table td:nth-child(3){width:10%}
  .length-table th:nth-child(4),.length-table td:nth-child(4){width:28%}
  .length-table th:nth-child(5),.length-table td:nth-child(5){width:22%}
  .length-table .mix-view-cta{padding:4px 9px;font-size:.68rem}
  .length-band-cell{gap:7px}
  .length-band-thumb{width:28px;height:38px}
}

/* Distribution takeaway: two scannable stat tiles + a one-line action, so the
   "post most here / views are there" insight reads at a glance. */
.length-note{margin:16px 2px 2px;font-size:.86rem;line-height:1.5;color:var(--text)}
.length-note strong{color:var(--ink,#2A1B3D)}
.length-note-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:11px}
.ln-stat{
  flex:1 1 170px;display:flex;flex-direction:column;gap:2px;
  padding:10px 13px;border-radius:10px;
  background:var(--surface2,#F4EFF9);border:1px solid var(--border);
}
.ln-stat-win{background:#FFFBF0;border-color:#F0D578}
.ln-stat-lbl{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7B5E9A}
.ln-stat-band{font-size:1.1rem;font-weight:800;color:var(--ink,#2A1B3D)}
.ln-stat-win .ln-stat-band{color:#7E5800}
.ln-stat-sub{font-size:.76rem;color:var(--muted,#6B5A7E)}
.length-note-action{font-size:.9rem;line-height:1.55;color:var(--text)}

/* Reach Boosters (paid Dominate layer). */
.lever-item{
  padding:16px 18px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface2,#F4EFF9);margin-bottom:14px;
}
.lever-item:last-child{margin-bottom:0}
/* Empty-state copy when no booster has anything to flag yet. */
.lever-empty{
  padding:16px 18px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface2,#F4EFF9);font-size:.9rem;line-height:1.6;color:var(--text);
}
.lever-empty strong{color:var(--accent)}

/* Header: icon chip + title, with the state badge pushed to the right. */
.lever-head{display:flex;align-items:center;gap:11px}
.lever-icon{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2,#F4EFF9);border:1px solid var(--border);
  color:var(--accent,#542C9E);
}
.lever-icon svg{display:block}
.lever-title{flex:1 1 auto;font-size:1.02rem;font-weight:800;line-height:1.3;color:var(--ink,#2A1B3D)}
.lever-badge{
  flex:0 0 auto;display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:.7rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;border:1px solid transparent;
}
.lever-badge-lift    {background:#E8F5EE;color:#1A5C3A;border-color:#BFE3CE}
.lever-badge-untapped{background:#F4EFF9;color:#542C9E;border-color:#C4A4E8}
.lever-badge-test    {background:#FFF6E0;color:#7E5800;border-color:#F0D578}
.lever-badge-steady  {background:#F1ECF7;color:#6B5A7E;border-color:#DDD0EE}

.lever-insight{font-size:.9rem;line-height:1.5;margin-top:9px;color:var(--text)}

/* Avg-views comparison bars (lifting state only). */
.lever-bars{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.lever-bar-row{display:grid;grid-template-columns:106px 1fr auto;align-items:center;gap:10px}
.lever-bar-label{font-size:.76rem;color:var(--muted,#6B5A7E);font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lever-bar-track{height:10px;border-radius:6px;background:#EDE5F7;overflow:hidden}
.lever-bar-fill{display:block;height:100%;border-radius:6px}
.lever-bar-on {background:linear-gradient(90deg,var(--accent2,#C4A4E8),var(--accent,#542C9E))}
.lever-bar-off{background:#D6C9EC}
.lever-bar-val{font-size:.8rem;font-weight:700;color:var(--ink,#2A1B3D);min-width:42px;text-align:right}
.lever-bar-cap{font-size:.68rem;color:var(--hint,#766488);text-transform:uppercase;letter-spacing:.05em;margin:5px 0 0 116px}

/* Adoption meter: how much of the account already uses this lever. */
.lever-adopt{display:flex;align-items:center;gap:10px;margin-top:11px}
.lever-adopt-track{flex:0 0 84px;height:6px;border-radius:4px;background:#EDE5F7;overflow:hidden}
.lever-adopt-fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent2,#C4A4E8),var(--accent,#542C9E))}
.lever-adopt-text{font-size:.78rem;color:var(--muted,#6B5A7E)}
.lever-adopt-text strong{color:var(--ink,#2A1B3D)}

.lever-action{font-size:.88rem;line-height:1.5;margin-top:13px;color:var(--ink,#2A1B3D)}
/* "Do this" label: a flat green action tag (NOT a purple pill). Purple pills are
   reserved for clickable "View reel" CTAs across the report, so this advisory
   label is given the green do/action treatment instead to avoid reading as a
   button. The action text beside it stays - it's the important part. */
.lever-action-tag{
  display:inline-block;margin-right:7px;padding:2px 9px;border-radius:6px;
  background:#ECF7F1;color:#1A5C3A;border:1px solid #C6E6D4;
  font-size:.66rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;
}
.lever-data{font-size:.78rem;color:#7B5E9A;margin-top:8px}

/* Privacy-safe alternatives under the location booster, for creators who would
   rather not pin an exact place. Quiet, supportive styling: it is an offer, not
   a warning. */
.lever-swaps{margin-top:11px;padding:11px 13px;border-radius:10px;background:var(--surface2,#F4EFF9);border:1px solid var(--border)}
.lever-swaps-note{font-size:.8rem;font-weight:700;color:var(--ink,#2A1B3D);margin-bottom:7px}
.lever-swaps-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.lever-swaps-list li{font-size:.82rem;line-height:1.45;color:var(--text)}

/* Bucket badge - also used as the per-reel column badge in the Reels table. */
.mix-badge{
  display:inline-block;padding:3px 10px;border-radius:14px;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  border:1px solid;white-space:nowrap;
}
.mix-badge-proof      {color:#7E5800;background:#FFF6E0;border-color:#F0D578}
.mix-badge-educational{color:#542C9E;background:#F4EFF9;border-color:#C4A4E8}
.mix-badge-personality{color:#0E6B7A;background:#E3F4F6;border-color:#7DBCC4}
.mix-badge-promotion  {color:#9A3412;background:#FFEDD9;border-color:#F5B98F}

/* Bucket-label hover tooltip - plain-English examples of what each bucket
   (Results / Educational / Personality / Promotion) means. Hover or
   keyboard-focus the badge to reveal. Self-contained so it doesn't depend on
   the .th-tip header-tooltip rules. */
.mix-tip{position:relative;cursor:help}
/* Small "i" info marker after the label so it's obvious the badge is
   hoverable. Inherits the badge's own text colour (currentColor) so the gold
   Results / purple Educational / teal Personality / orange Promotion badges
   each get a matching marker. Sits at 60% opacity, brightening on hover/focus
   so the cue is quiet until the reader looks. */
.mix-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;margin-left:6px;border-radius:50%;
  border:1px solid currentColor;
  font-size:9px;font-weight:800;font-style:italic;line-height:1;
  font-family:Georgia,'Times New Roman',serif;
  vertical-align:middle;opacity:.6;transition:opacity .12s ease;
}
.mix-tip:hover .mix-i,
.mix-tip:focus .mix-i,
.mix-tip:focus-within .mix-i{opacity:1}
.mix-tip .mix-tip-box{
  display:none;position:absolute;top:calc(100% + 7px);left:0;z-index:200;
  width:240px;white-space:normal;text-transform:none;letter-spacing:0;
  background:#fff;border:1px solid #DDD0EE;border-radius:8px;
  padding:9px 12px;font-size:11px;font-weight:400;line-height:1.55;color:#4A3D5C;
  box-shadow:0 6px 20px rgba(84,44,158,.16);
}
.mix-tip .mix-tip-box strong{color:#3D1E7A;font-weight:700}
.mix-tip:hover .mix-tip-box,
.mix-tip:focus .mix-tip-box,
.mix-tip:focus-within .mix-tip-box{display:block}

/* % mix cell - number + mini horizontal bar. The bar width is driven by a
   --w custom property set inline so the CSS stays declarative. */
.mix-pct{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text)}
.mix-pct-num{font-weight:700;min-width:34px}
.mix-pct-bar{position:relative;flex:1;max-width:90px;height:6px;background:#F0E8F8;border-radius:3px;overflow:hidden}
.mix-pct-bar::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);
  background:linear-gradient(90deg,#C4A4E8,#7A4FBF);border-radius:3px;
}
.mix-conf{margin-top:6px}

/* Avg-views cell - just the number in gold (the report's "winning metric" colour). */
.mix-views{display:flex;align-items:center;gap:8px}
.mix-views strong{color:var(--gold);min-width:58px}
.mix-best-reel{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.mix-best-reel:hover{color:#9C6E0E}
/* "View reel" CTA - purple pill that opens the exact reel for the bucket. */
.mix-view-cta{display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px;border-radius:999px;
  background:#542C9E;color:#FAF8FF;text-decoration:none;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  transition:background .15s}
.mix-view-cta:hover{background:#3D1E7A;color:#FAF8FF}

/* Heuristic-mode disclaimer banner - shown inside the card only when the
   AI key is missing. Amber palette so it reads as a heads-up rather
   than an error. */
.content-mix-disclaimer{
  margin:0 0 14px;padding:8px 12px;
  background:#FDF2E0;border:1px solid #F3DCA8;border-radius:6px;
  font-size:.78rem;color:#7A4A0A;line-height:1.5;
}
.content-mix-observation{
  margin:14px 0 0;font-size:.86rem;color:var(--text);line-height:1.55;
  font-style:italic;
}
/* Recommended cell: shows the band ("30-40%") for reliable buckets; thin
   buckets display "n/a" with a muted italic style and a tooltip. */
.mix-recommended{white-space:nowrap;font-weight:600;color:var(--text);font-size:.86rem}
.mix-recommended-thin{color:var(--muted);font-style:italic;font-size:.78rem}
/* Action pill: Hold / Increase / Decrease. Three distinct palettes so the
   eye picks out movers without reading text. Uses the same chip shape as
   the bucket badge family so the row reads as one visual unit. */
.action-pill{
  display:inline-block;padding:3px 10px;border-radius:14px;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  border:1px solid;white-space:nowrap;text-transform:uppercase;
}
.action-pill-hold    {color:#6b6470;background:#F0EDF2;border-color:#D8D2DF}
.action-pill-increase{color:#1A5C3A;background:#E8F5EE;border-color:#7BBDA0}
.action-pill-decrease{color:#7A4A0A;background:#FDF2E0;border-color:#F3DCA8}
/* Balance summary line: sits below the observation line and names the two
   biggest gaps. Soft purple panel so it reads as the forward action callout. */
.content-mix-balance-summary{
  margin:12px 0 0;padding:10px 12px;
  background:#FAF5FF;border:1px solid #EBE0F5;
  border-radius:6px;
  font-size:.86rem;color:var(--text);line-height:1.55;
}

/* ── Three-layer insight block ──────────────────────────────────────────────
   One CSS family used by every section that surfaces a {Insight / Data /
   Action} block: Threat Rating, Performance Patterns, Seasonal "see why",
   Missed Opportunity Alerts, Gap Coaching, Next 4 Posts. One renderer,
   one CSS family, one voice across the whole report. */
.three-layer{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:6px 14px;
  font-size:13px;line-height:1.5;
}
.tl-label{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;align-self:start;padding-top:3px;
  white-space:nowrap;
}
.tl-label-insight{color:#542C9E}
.tl-label-data   {color:#7B5E9A}
.tl-label-action {color:#1A5C3A}
.tl-body{color:var(--text)}
.tl-body-insight{font-weight:600;color:#1A1018;font-size:14px;line-height:1.45}
.tl-body-data   {color:#6B5A7E;font-size:12.5px}
.tl-body-action {color:var(--text);font-weight:500}
/* Anchor offset so the in-page jump from the back-reference doesn't butt
   the top note against the viewport edge. */
.methodology-note{scroll-margin-top:12px}
/* ── Subscription tiers (bottom of the report) ──────────────────────────────── */
/* Billing period switch on /pricing - a segmented control whose accent thumb
   slides between Monthly and Annual. The two buttons sit on top (grid keeps
   them equal width); the ::before thumb is positioned by which one is .active. */
.billing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0;flex-wrap:wrap}
.billing-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--surface2);border:1px solid var(--border);border-radius:22px;overflow:hidden}
.billing-switch button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:.82rem;font-weight:600;border:none;background:transparent;color:var(--muted);padding:8px 20px;cursor:pointer;transition:color .2s;white-space:nowrap}
.billing-switch button.active{color:#fff}
.billing-switch::before{content:'';position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--accent);border-radius:22px;transition:transform .25s cubic-bezier(.4,0,.2,1);z-index:0}
.billing-switch:has(#bt-annual.active)::before{transform:translateX(100%)}
.save-pill{font-size:.62rem;font-weight:700;color:#1A5C3A;background:#E8F5EE;border:1px solid #7BBDA0;border-radius:20px;padding:2px 8px;white-space:nowrap}
/* On phones the "Annual / 2 months free" button's nowrap content made both
   equal columns grow past the viewport, widening the whole card (and clipping
   the hero + tier cards). Cap the switch to the card width with minmax(0,1fr)
   so the columns can never expand the page, and trim the padding + pill so the
   labels still fit inside the 50% track without clipping. */
@media(max-width:600px){
  .billing-switch{width:100%;max-width:340px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .billing-switch button{padding:9px 8px;gap:6px;font-size:.8rem;min-width:0}
  .save-pill{font-size:.56rem;padding:2px 6px}
}
/* Free-report on-ramp: a slim banner above the tier grid offering the one-time
   free report to visitors who still have it, so a price-sensitive visitor has a
   low-commitment next step instead of "pay or leave". */
.free-onramp{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,#FAF6FF,#F3ECFC);border:1px solid var(--border);border-radius:14px;
  padding:14px 18px;margin-top:18px}
.free-onramp-txt{font-size:.86rem;color:var(--text);line-height:1.4}
.free-onramp-txt strong{color:var(--accent)}
.free-onramp-cta{flex:none;background:var(--accent);color:#fff;font-weight:600;font-size:.84rem;
  padding:9px 16px;border-radius:10px;text-decoration:none;white-space:nowrap;transition:background .15s}
.free-onramp-cta:hover{background:#4A1670}
@media(max-width:520px){.free-onramp{justify-content:center;text-align:center}.free-onramp-cta{width:100%;text-align:center}}
/* Social-proof strip above the cards. Hidden entirely until renderTestimonials
   injects real quotes (the :empty container collapses), so nothing fake ships. */
#testimonials:empty{display:none}
.proof-wrap{margin-top:22px}
.proof-eyebrow{text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.proof-card{margin:0;background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px}
.proof-card blockquote{margin:0;font-size:.9rem;line-height:1.5;color:var(--text)}
.proof-card blockquote::before{content:'\201C';color:var(--accent);font-weight:700;margin-right:1px}
.proof-card figcaption{margin-top:12px;display:flex;flex-direction:column;gap:1px}
.proof-name{font-size:.8rem;font-weight:700;color:var(--accent)}
.proof-detail{font-size:.72rem;color:var(--muted)}

/* Reign waitlist: turns the dead "Coming soon" slot into a lead capture. */
.tier-waitlist{margin-top:18px;display:flex;flex-direction:column}
.tier-waitlist-pitch{font-size:.82rem;font-weight:600;color:var(--accent);line-height:1.4;margin-bottom:10px}
.tier-waitlist-input{font-family:inherit;font-size:.84rem;padding:9px 12px;border:1px solid var(--border);border-radius:10px;width:100%;color:var(--text)}
.tier-waitlist-input:focus{outline:none;border-color:var(--accent)}
.tier-waitlist-btn{margin-top:10px}
.tier-waitlist-msg{font-size:.72rem;color:var(--muted);margin-top:8px;min-height:14px;text-align:center}
.tier-waitlist-msg.err{color:#C0392B}
.tier-waitlist-done{font-size:.84rem;font-weight:600;color:#1D9E75;text-align:center;line-height:1.45;margin-top:18px}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;align-items:stretch;min-height:440px}
@media(max-width:820px){.tier-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.tier-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px 18px;display:flex;flex-direction:column;position:relative}
.tier-card.featured{border:2px solid var(--accent);box-shadow:0 8px 24px rgba(84,44,158,.12)}
.tier-card.selectable{cursor:pointer}
.tier-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px;white-space:nowrap}
.tier-name{font-size:1.1rem;font-weight:700;color:var(--text)}
.tier-track{font-size:.76rem;color:var(--accent);font-weight:600;margin-top:3px}
.tier-price{margin:14px 0 2px;display:flex;align-items:baseline;gap:4px}
.tier-price .amt{font-size:1.9rem;font-weight:800;color:var(--text)}
.tier-price .per{font-size:.78rem;color:var(--muted)}
/* Auto-enrolled (current) tier: the normal price is struck through and greyed,
   with a bright "FREE" tag, so the reader sees the value they are getting free
   during the launch promo. */
.tier-price .amt-was{font-size:1.9rem;font-weight:800;color:var(--text);
  text-decoration:line-through;text-decoration-thickness:2px}
.tier-price .per-was{font-size:.78rem;color:var(--muted);text-decoration:line-through}
.tier-price .tier-free{font-size:1.9rem;font-weight:800;color:#1D9E75;
  margin-left:8px;letter-spacing:.01em}
.tier-sub{font-size:.72rem;color:var(--muted);min-height:15px}
.tier-feats{list-style:none;padding:0;margin:16px 0 0;flex:1}
.tier-feats li{font-size:.8rem;color:var(--text);line-height:1.45;padding:5px 0 5px 22px;position:relative}
.tier-feats li::before{content:'✓';position:absolute;left:0;color:#1D9E75;font-weight:700}
.tier-feats li.muted{color:var(--hint)}
.tier-feats li.muted::before{content:'-';color:var(--hint)}
.tier-cta{margin-top:18px;background:var(--accent);color:#fff;font-family:inherit;font-weight:600;font-size:.88rem;padding:10px;border-radius:10px;border:none;cursor:pointer;width:100%}
.tier-cta:hover{background:#4A1670}
.tier-cta.is-soon{background:#E5E1EA;color:var(--muted);cursor:not-allowed}
.tier-cta.is-soon:hover{background:#E5E1EA}
/* Current (auto-enrolled) plan: greyed, non-interactive "Current Plan". */
.tier-cta.is-current{background:#E5E1EA;color:var(--muted);cursor:default}
.tier-cta.is-current:hover{background:#E5E1EA}
.tier-tagline{font-size:.74rem;color:var(--accent);font-weight:600;margin-top:14px;text-align:center}
.tier-note{font-size:.7rem;color:var(--muted);margin-top:8px;text-align:center;line-height:1.4}
.feat-link{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.feat-link:hover{text-decoration:none}
/* "Compare" / "Dominate" inline chips on /pricing - click to open a popover
   listing what each package contains, without leaving the page. */
.pkg-chip{font-family:inherit;font-size:1em;font-weight:700;color:var(--accent);background:none;border:none;padding:0;line-height:inherit;cursor:help;vertical-align:baseline;transition:color .15s}
.pkg-chip:hover,.pkg-chip:focus-visible{color:#4A1670}
.pkg-pop{position:absolute;z-index:1200;width:264px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(40,16,60,.22);padding:13px 15px 10px;animation:pkgPopIn .16s ease-out}
@keyframes pkgPopIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pkg-pop-title{font-size:.9rem;font-weight:700;color:var(--text)}
.pkg-pop-blurb{font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.4}
.pkg-pop-list{list-style:none;margin:10px 0 0;padding:0}
.pkg-pop-list li{position:relative;font-size:.78rem;font-weight:600;color:var(--text);line-height:1.3;padding:5px 0 5px 19px;border-top:1px solid var(--surface2)}
.pkg-pop-list li:first-child{border-top:none}
.pkg-pop-list li::before{content:'\2713';position:absolute;left:0;top:5px;color:#1D9E75;font-weight:700;font-size:.85em}
.sub-note{text-align:center;font-size:.82rem;color:var(--accent);margin-top:14px;min-height:18px;font-weight:600}

/* Trust / risk-reversal strip: a slim reassurance row directly under the tier
   CTAs, neutralising the three anxieties that spike at the moment of payment -
   is it safe, am I locked in, is this real analysis. */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--border)}
.trust-item{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;color:var(--muted)}
.trust-item svg{flex:none;color:var(--accent)}

/* Objection-handling FAQ: native <details> accordion under the cards so the
   purchase-blocking questions get answered without leaving the pricing page. */
.pricing-faq{max-width:620px;margin:26px auto 0}
.pricing-faq-title{font-size:1.05rem;font-weight:700;color:var(--text);text-align:center;margin:0 0 14px}
.faq-item{border:1px solid var(--border);border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:14px 44px 14px 16px;position:relative;
  font-size:.88rem;font-weight:600;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:1.2rem;font-weight:400;color:var(--accent);line-height:1;transition:transform .2s}
.faq-item[open] summary::after{content:'\2212'}
.faq-item summary:hover{color:var(--accent)}
.faq-item p{margin:0;padding:0 16px 15px;font-size:.82rem;line-height:1.5;color:var(--muted)}

/* ── The 3 things that matter most ─────────────────────────────────────────
   Each action reads as a numbered card: a filled numeral badge, a plain-
   language headline, then a tidy insight → stat → action stack. The Insight
   leads, the Data is muted support, and the Action is a green "do this"
   callout so the one thing to act on is impossible to miss. The shared
   three-layer eyebrows are hidden *inside this card only* so the three
   stacked actions don't become a wall of repeated labels. */
#key-actions{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.key-action{display:flex;gap:18px;align-items:flex-start;
  padding:20px 22px;
  background:linear-gradient(135deg,#FAF7FD 0%,#F4ECFA 100%);
  border:1px solid #E2D8EE;
  border-radius:12px;
  transition:transform .15s ease,border-color .2s ease}
.key-action:hover{transform:translateY(-1px);
  border-color:#C4A4E8}
.key-action-num{flex:0 0 auto;
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:1.35rem;font-weight:800;line-height:1;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  background:linear-gradient(160deg,#542C9E 0%,#9460C8 100%);
  border-radius:12px;
  letter-spacing:-.01em;
  user-select:none}
.key-action-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.key-action-label{font-size:1rem;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:#1A1018;line-height:1.3;margin-bottom:2px}

/* Compact action shape (matches the posts card): a prominent green "Do this"
   box leads with the move to make, then one muted "Why" line carries the
   numbers. No stacked Insight/Data/Action prose - the label says what, the box
   says do, the why proves it. */
.key-action-do{background:#ECF7F1;border:1px solid #C6E6D4;
  border-left:3px solid #1A5C3A;border-radius:8px;padding:9px 13px;
  color:#15402B;font-size:13px;line-height:1.45;margin-top:2px}
.key-action-do-tag{display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#1A5C3A;margin-right:7px}
.key-action-do-text{font-weight:600}
.key-action-why{font-size:12.5px;line-height:1.5;color:#6B5A7E}
.key-action-why-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#8A6BA8;margin-right:5px}

@media (max-width:600px){
  .key-action{gap:14px;padding:16px 16px}
  .key-action-num{font-size:1.2rem;width:38px;height:38px}
}
.cadence-control{margin-bottom:18px}
.cadence-label{font-size:.86rem;color:var(--text);margin-bottom:8px}
.cadence-label strong{color:var(--accent)}
.cadence-mult{color:var(--muted);font-size:.8rem}
#rev-cadence{width:100%;max-width:440px;accent-color:var(--accent);cursor:pointer;height:6px}
.rev-banner{background:#1A1140;border-radius:12px;padding:18px 20px;margin-bottom:18px}
.rev-banner-title{color:#FAF8FF;font-size:1.05rem;font-weight:600;margin-bottom:6px}
.rev-banner-sub{color:#D9C7EC;font-size:.84rem;line-height:1.6}
.rev-zero-spend{background:#1A1140;border-radius:12px;padding:18px 20px;margin-top:18px}
.rev-zero-title{color:#C4A4E8;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:10px}
.rev-zero-row{color:#EDE0FF;font-size:.9rem;line-height:1.7}
.rev-zero-row strong{color:#fff}
.rev-zero-save{margin-top:8px;padding-top:8px;border-top:1px solid #3D2456;font-weight:600}
.rev-zero-save strong{color:var(--gold)}
.calculator-inputs{background:#FAFAF8;border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.ci-title{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:12px}
.rev-prefill-tag{font-size:.68rem;font-weight:600;color:var(--accent);background:#F4EFF9;
  border:1px solid #DDD0EE;border-radius:20px;padding:2px 9px;margin-left:6px;
  text-transform:none;letter-spacing:0;white-space:nowrap}
.rev-prefill-tag:empty{display:none}
.rev-input-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.input-group label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:6px}
.rev-help{display:block;font-size:.7rem;font-weight:400;color:var(--muted);margin-top:3px;line-height:1.35}
.rev-optional{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--hint);
  background:var(--surface2);border-radius:10px;padding:1px 7px;font-weight:700;margin-left:4px}
.input-group input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:7px;
  font-size:.9rem;font-family:inherit;color:var(--text);box-sizing:border-box;background:#fff}
.input-group input:focus{border-color:var(--accent);outline:none}
.calculate-btn{margin-top:16px;background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:11px 22px;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.01em}
.calculate-btn:hover{background:#3D1E7A}
.rev-error{color:var(--red);font-size:.8rem;margin-top:10px;font-weight:500}
.revenue-results{margin-top:20px;border-top:1px solid var(--border);padding-top:20px}
.revenue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.revenue-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.revenue-card.projected,.revenue-card.uplift{background:linear-gradient(135deg,#F4EFF9,#EDE0FA);border-color:#DDD0EE}
.rv-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;margin-bottom:9px;line-height:1.3}
.rv-figure{font-size:1.75rem;font-weight:800;color:var(--text);line-height:1.02}
.rv-figure.gold{color:var(--gold)}
.rv-detail{font-size:.76rem;color:var(--muted);margin-top:7px}
.assumptions{margin-top:16px;font-size:.8rem}
.assumptions summary{cursor:pointer;font-weight:600;color:var(--accent);user-select:none}
.assumptions summary:hover{text-decoration:underline}
.assumptions ul{margin:10px 0;padding-left:18px;color:var(--text);line-height:1.75}
.rev-disclaimer{font-size:.72rem;color:var(--muted);font-style:italic;line-height:1.55;margin-top:4px}
@media(max-width:640px){
  .reach-summary{grid-template-columns:1fr}
  .rev-input-grid{grid-template-columns:1fr}
  .revenue-grid{grid-template-columns:1fr}
  .calculate-btn{width:100%}
}

/* ── Reel pill link button ──────────────────────────────────────────────────── */
a.reel-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:#fff;background:#542C9E;padding:5px 12px;border-radius:20px;
  text-decoration:none;margin-left:10px;letter-spacing:.02em;
  vertical-align:middle;white-space:nowrap}
a.reel-pill:hover{background:#3D1E7A;text-decoration:none}
a.reel-title-link{color:#542C9E;text-decoration:none;font-style:italic;cursor:pointer}
a.reel-title-link:hover{text-decoration:underline}

/* ── Contrast fixes ─────────────────────────────────────────────────────────── */
.dm-positive-note{color:#3D2E4D;margin:10px 0 4px;font-size:.82rem;line-height:1.5}
/* DM comparison headline + "what to do" action list */
.dm-headline{color:var(--text);font-weight:700;font-size:.92rem;line-height:1.45;margin:14px 0 6px}
.dm-do-title{font-weight:700;color:#3D2E4D;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;margin:10px 0 4px}
.dm-do{margin:0;padding-left:18px;color:#3D2E4D;font-size:.82rem;line-height:1.55}
.dm-do li{margin-bottom:4px}

.section-note{font-size:.8rem;color:var(--muted);margin-bottom:12px}

/* ── Competitor Move Log: full diff (subscriber, month 2+); hidden until then ─ */
#competitor-move-log-card{margin:18px auto 22px;max-width:760px}
.cml-title{font-size:.78rem;font-weight:700;color:#542C9E;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.cml-sub{font-size:.82rem;color:var(--muted);margin-bottom:12px;line-height:1.55}
.cml-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.cml-row{background:#FAF7FD;border:1px solid #E2D8EE;border-radius:10px;
  padding:12px 14px;line-height:1.55}
.cml-change{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:6px}
.cml-impact{font-size:.82rem;color:#542C9E;font-weight:600;margin-bottom:4px;
  text-transform:lowercase;letter-spacing:.01em}
.cml-signal{font-size:.82rem;color:var(--muted);font-style:italic}

/* ── AI captions inside each Next 4 Posts card ─────────────────────────────── */
.ai-captions-list{margin:6px 0 12px;padding-left:22px;font-size:.86rem;
  color:var(--text);line-height:1.55}
.ai-captions-list li{margin-bottom:6px}
.ai-captions-list li:last-child{margin-bottom:0}

/* Labelled variant: each caption opens with an A/B/C badge + the caption
   archetype (Result-led / Story-led / Question-led) so the reader knows
   which kind they're picking, instead of reading three look-alike paragraphs. */
.ai-captions-labelled{list-style:none;padding-left:0;margin:6px 0 12px;
  display:flex;flex-direction:column;gap:10px}
.ai-captions-labelled li{margin:0;padding:10px 12px;
  background:#FAF7FD;border:1px solid #E2D8EE;border-radius:8px;
  display:flex;flex-direction:column;gap:6px}
.ai-caption-label{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-caption-letter{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:#542C9E;color:#FAF8FF;
  font-size:.74rem;font-weight:700;line-height:1}
.ai-caption-kind{font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#7B5E9A}
.ai-caption-text{font-size:.86rem;color:var(--text);line-height:1.55;margin:0}

/* Caption sub-tabs: show one of the three styles (A Result-led / B Story-led /
   C Question-led) at a time so the expander stays short instead of stacking
   three full captions. Same interaction model as the Week tabs above. */
/* Prompt over the tabs, the same cue style as the Week tabs' "Pick a week..."
   line, so the reader knows the pills are switchable. */
.cap-tabs-hint{font-size:.68rem;font-weight:600;color:#7B5E9A;margin:2px 0 7px}
.cap-tabs{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap}
/* Inactive tabs read as buttons: white fill, a clear border, a hover lift. The
   active one is filled purple so the current choice is unmistakable. */
.cap-tab{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 11px;border-radius:999px;border:1px solid #D8C8EE;background:#fff;
  font:inherit;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#6B4F95;transition:background .15s,border-color .15s,color .15s}
.cap-tab:hover{background:#F1E9FA;border-color:#C4A4E8;color:#542C9E}
.cap-tab.is-active{background:#542C9E;border-color:#542C9E;color:#FAF8FF}
.cap-tab-letter{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:rgba(84,44,158,.14);
  font-size:.68rem;line-height:1}
.cap-tab.is-active .cap-tab-letter{background:rgba(255,255,255,.22)}
.cap-panel{background:#FAF7FD;border:1px solid #E2D8EE;border-radius:8px;
  padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.cap-panel[hidden]{display:none}
.cap-copy{align-self:flex-start;cursor:pointer;font:inherit;font-size:.66rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;
  border-radius:6px;border:1px solid #DDD0EE;background:#fff;color:#542C9E;
  transition:background .15s,border-color .15s,color .15s}
.cap-copy:hover{background:#F1E9FA;border-color:#C4A4E8}
.cap-copy.is-copied{background:#542C9E;border-color:#542C9E;color:#fff}

/* ── Report header meta: generation timestamp + data source ────────────────── */
.report-meta{margin:2px 0 16px;padding-left:64px}
.report-meta .report-generated{font-size:.78rem;color:var(--muted);line-height:1.5}
.report-meta .report-source{font-size:.72rem;color:var(--hint);line-height:1.5;margin-top:2px}
@media(max-width:600px){.report-meta{padding-left:0}}

/* Standalone pricing page wrapper - the tier grid sits inside a single
   card on /pricing so it reads as a focused chooser, not a report card. */
.pricing-card{max-width:1100px;margin:8px auto 0}
/* Pricing page sits closer to the footer than the global page-wrap padding. */
body.pricing-page .page-wrap{padding-bottom:16px}

/* ── "Not enough data" inline chip used inside competitor table cells ─────── */
.comp-cell-na{color:var(--hint);font-style:italic;font-size:.78rem;font-weight:400}
.bc-val-na{color:var(--muted);font-size:.95rem;font-weight:500;font-style:italic}

/* Empty-state when no replication brief meets the 3-reel data threshold */
.briefs-empty{padding:14px 16px;background:#FAF7FD;border:1px dashed #DDD0EE;
  border-radius:8px;color:var(--muted);font-size:.84rem;line-height:1.55}