/* ==========================================================================
   Conversion Club — free assessment report
   Report-specific components. Tokens, nav, footer, bands, section heads,
   buttons and dark panels all come from styles.css (the shared design
   system); this file only adds what the report itself introduces.
   ========================================================================== */

:root {
  /* severity scale — "Deep red & amber" (the design's default of three) */
  --sev-crit-bg: #FBE9E6;
  --sev-crit-fg: #8E1C10;
  --sev-crit-bd: #F0C8C1;
  --sev-major-bg: #FBF0E2;
  --sev-major-fg: #8A4E06;
  --sev-major-bd: #EEDCBF;
  --sev-minor-bg: #FAF6E4;
  --sev-minor-fg: #736111;
  --sev-minor-bd: #EAE2C2;
  --sev-flag-bg: #8E1C10;
  --sev-flag-fg: #FFFFFF;
  --sev-flag-bd: #8E1C10;
  --sev-flag-soft: #FBE9E6;

  --radius-hero-card: 26px;
  --band-pad-y-sm: 72px;
  --fs-h4: 22px;
}

section[id] { scroll-margin-top: 92px; }

.rp-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.rp-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Page states (loading / error) — shown before the payload resolves
   ========================================================================== */
.rp-state {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}
.rp-state__inner { max-width: 520px; }
.rp-state h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 22px 0 0;
}
.rp-state p {
  margin: 14px 0 0;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  text-wrap: pretty;
}
.rp-state__actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rp-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--cyan);
  animation: rpSpin .8s linear infinite;
}
@keyframes rpSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rp-spinner { animation-duration: 2.4s; } }

/* Inline note shown when a single section fails to render (safeSection). */
.rp-section-missing {
  margin: 0;
  padding: 22px 26px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: var(--fs-body);
  color: var(--text-body);
  text-align: center;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.rp-hero { background: var(--surface-hero); padding: 74px 0 64px; }
.rp-hero__grid {
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  gap: 56px;
  align-items: center;
}
.rp-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.1vw, 50px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 22px 0 0;
  text-wrap: pretty;
}
.rp-hero__lede {
  margin-top: 22px;
  max-width: 560px;
  font-size: var(--fs-lede);
  line-height: var(--leading-lede);
  color: var(--text-body);
  text-wrap: pretty;
}
.rp-hero__meta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rp-hero__meta b { color: var(--text-strong); font-weight: 600; }
.rp-hero__card {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.rp-hero__shot {
  aspect-ratio: 1 / 1;
  background: var(--canvas);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rp-hero__shot img { width: 100%; height: 100%; object-fit: contain; }
.rp-hero__title {
  margin-top: 16px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ==========================================================================
   Shared card + grid helpers
   ========================================================================== */
.rp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
}
.rp-grid { display: grid; gap: 20px; margin-top: 44px; }
.rp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rp-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rp-kicker {
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rp-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-h);
  line-height: 1.25;
}

/* ==========================================================================
   01 · Scorecard
   ========================================================================== */
.rp-kpi { padding: 26px 24px; }
.rp-kpi__v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.rp-kpi__l { margin-top: 12px; }
/* KPI captions carry the honesty caveats ("not the listing's own average") —
   they must be readable, not the faintest text on the page (WCAG AA). */
.rp-kpi__n { margin-top: 6px; font-size: var(--fs-meta); color: var(--slate); }

.rp-dist { margin-top: 24px; padding: 32px; }
.rp-dist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.rp-dist__note { font-size: var(--fs-meta); color: var(--text-muted); }
.rp-dist__rows { margin-top: 26px; display: grid; gap: 12px; }
.rp-dist__row {
  display: grid;
  grid-template-columns: 44px 1fr 96px;
  align-items: center;
  gap: 16px;
}
.rp-dist__k {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}
.rp-dist__k--5 { color: var(--green-deep); }
.rp-dist__k--1 { color: var(--sev-crit-fg); }
.rp-dist__track {
  height: 14px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}
.rp-dist__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--slate-3);
  transition: width .8s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.rp-dist__fill--5 { background: var(--grad-h); }
.rp-dist__fill--1 { background: var(--sev-crit-fg); }
.rp-dist__v {
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ==========================================================================
   02 · What's working
   ========================================================================== */
.rp-strength {
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rp-strength__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.rp-strength__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--green-deep);
}
.rp-strength__count { text-align: right; flex: none; }
.rp-strength__quote {
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  font-style: italic;
  border-left: 2px solid var(--green);
  padding-left: 16px;
}
.rp-strength__meta {
  margin-top: auto;
  font-size: var(--fs-meta);
  color: var(--text-faint);
  font-weight: 500;
}
.rp-fourwords {
  margin-top: 24px;
  background: var(--surface-hero);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 30px 32px;
  display: grid;
  gap: 8px;
}
.rp-fourwords__v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* ==========================================================================
   03 · What's breaking trust
   ========================================================================== */
.rp-issues { margin-top: 44px; overflow: hidden; }
.rp-issues__head,
.rp-issues__row-top {
  display: grid;
  grid-template-columns: 1fr 110px 130px;
  gap: 20px;
}
.rp-issues__head {
  padding: 16px 32px;
  background: var(--canvas);
  border-bottom: 1px solid var(--border-card);
}
.rp-issues__row { padding: 24px 32px; border-bottom: 1px solid var(--border-hairline); }
.rp-issues__row-top { align-items: center; }
.rp-issues__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-h);
  line-height: 1.3;
}
.rp-issues__src { margin-top: 6px; font-size: var(--fs-meta); color: var(--text-faint); }
.rp-issues__n {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rp-issues__quote {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--canvas);
  border-radius: 12px;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.rp-issues__quote-meta {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  font-weight: 500;
}
.rp-sev {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.rp-sev--critical { background: var(--sev-crit-bg); color: var(--sev-crit-fg); border: 1px solid var(--sev-crit-bd); }
.rp-sev--major { background: var(--sev-major-bg); color: var(--sev-major-fg); border: 1px solid var(--sev-major-bd); }
.rp-sev--minor { background: var(--sev-minor-bg); color: var(--sev-minor-fg); border: 1px solid var(--sev-minor-bd); }
.rp-sev--flag { background: var(--sev-flag-bg); color: var(--sev-flag-fg); }
.rp-flag {
  padding: 26px 32px;
  display: grid;
  gap: 10px;
  background: var(--sev-flag-soft);
}
.rp-flag__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-flag__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-h); }
.rp-flag__body { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--ink-2); }

/* ==========================================================================
   04 · Who's buying
   ========================================================================== */
.rp-persona {
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rp-persona__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rp-persona__k { margin-top: 8px; }
.rp-persona__motivators { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-body); }
.rp-persona__quote {
  margin-top: auto;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-2);
  border-left: 2px solid var(--cyan);
  padding-left: 14px;
}
.rp-onething { margin-top: 24px; }
.rp-onething .rp-label { color: var(--on-dark-faint); }
.rp-onething__v {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.3vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.35;
  max-width: 900px;
}

/* ==========================================================================
   05 · Listing audit
   ========================================================================== */
.rp-listing { margin-top: 44px; padding: 32px; }
.rp-ba {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.rp-ba__k--now { color: var(--text-faint); }
.rp-ba__k--new { color: var(--green-deep); }
.rp-ba__now {
  margin-top: 12px;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--slate-2);
}
.rp-ba__new {
  margin-top: 12px;
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
.rp-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-chip {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-hero);
  border: 1px solid var(--border-card);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.rp-bullets { margin-top: 24px; padding: 32px; }
.rp-bullet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border-hairline);
}
.rp-bullet__now { margin-top: 10px; font-size: var(--fs-body-sm); line-height: 1.55; color: var(--slate-2); }
.rp-bullet__new {
  margin-top: 10px;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
}
.rp-compliance {
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid var(--sev-flag-bd);
  border-radius: 12px;
  background: var(--sev-flag-soft);
  display: grid;
  gap: 8px;
}
.rp-compliance .rp-label { color: var(--sev-flag-bg); }
.rp-compliance__body { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--ink-2); }

.rp-kw { margin-top: 24px; overflow: hidden; }
.rp-kw__top {
  padding: 26px 32px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rp-kw__meta { font-size: var(--fs-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rp-kw__head,
.rp-kw__row {
  display: grid;
  grid-template-columns: 1fr 110px 120px 1.1fr;
  gap: 20px;
  padding: 14px 32px;
}
.rp-kw__head {
  background: var(--canvas);
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
}
.rp-kw__row {
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--fs-body-sm);
  align-items: center;
}
.rp-kw__kw { font-weight: 500; color: var(--ink); }
.rp-kw__vol { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rp-kw__rel { text-align: right; color: var(--text-body); }
.rp-kw__where { color: var(--text-muted); font-size: var(--fs-meta); }

/* ==========================================================================
   06 · Priority action plan
   ========================================================================== */
.rp-actions { margin-top: 44px; display: grid; gap: 20px; }
.rp-action { padding: 32px; }
.rp-action__top { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.rp-action__rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--slate-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.rp-action__head { flex: 1 1 320px; min-width: 0; }
.rp-action__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3-lg);
  letter-spacing: var(--tracking-h);
  line-height: 1.25;
}
.rp-action__why {
  margin-top: 10px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.rp-action__impact { flex: none; width: 190px; }
.rp-action__impact-top { display: flex; align-items: baseline; justify-content: space-between; }
.rp-action__score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rp-action__score span { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.rp-action__bar {
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}
.rp-action__bar-fill {
  height: 100%;
  width: 0;
  background: var(--grad-h);
  border-radius: 999px;
  transition: width .8s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.rp-action__cols {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.rp-action__do {
  margin-top: 10px;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}
.rp-tag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--ink-2);
}
.rp-action__copy {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  border-radius: 10px;
  padding: 14px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rp-action__result {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--text-body);
}
.rp-check { flex: none; }

.rp-quick {
  margin-top: 24px;
  background: var(--surface-hero);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 32px;
}
.rp-quick__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rp-quick__rows { margin-top: 24px; display: grid; gap: 12px; }
.rp-quick__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 18px 20px;
}
.rp-quick__fix { font-size: var(--fs-body-sm); line-height: 1.55; font-weight: 500; color: var(--ink); }
.rp-quick__where { margin-top: 6px; font-size: var(--fs-meta); color: var(--text-muted); }
.rp-quick__effort {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--ink-2);
  white-space: nowrap;
}

/* ==========================================================================
   07 · Competitive snapshot
   ========================================================================== */
.rp-comp { margin-top: 44px; overflow: hidden; }
.rp-comp__head,
.rp-comp__row {
  display: grid;
  grid-template-columns: 60px 1fr 90px 110px 90px;
  gap: 18px;
  align-items: center;
}
.rp-comp__head { padding: 14px 28px; background: var(--canvas); border-bottom: 1px solid var(--border-card); }
.rp-comp__row { padding: 16px 28px; border-bottom: 1px solid var(--border-hairline); }
.rp-comp__row--you { background: var(--coral-soft); padding: 18px 28px; border-bottom: 0; }
.rp-comp__shot {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--canvas);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-comp__row--you .rp-comp__shot { background: var(--paper); }
.rp-comp__shot img { width: 100%; height: 100%; object-fit: contain; }
.rp-comp__title { font-size: var(--fs-body-sm); font-weight: 500; line-height: 1.4; color: var(--ink); }
.rp-comp__row--you .rp-comp__title { font-weight: 600; }
.rp-comp__asin { margin-top: 4px; font-size: var(--fs-meta); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rp-comp__row--you .rp-comp__asin { color: var(--ink-2); }
.rp-comp__rating {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--green-deep);
}
.rp-comp__rating--you { color: var(--sev-crit-fg); }
.rp-comp__price { text-align: right; font-size: var(--fs-body-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-comp__was {
  text-align: right;
  font-size: var(--fs-meta);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  text-decoration: line-through;
}
.rp-comp__dash { text-align: right; font-size: var(--fs-meta); color: var(--text-muted); }

/* ==========================================================================
   08 · Your new listing (creative brief)
   ========================================================================== */
.rp-shot {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rp-shot__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-shot__n {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--ink-2);
}
.rp-shot__type { font-size: var(--fs-meta); color: var(--text-faint); }
.rp-shot__ph {
  /* Square like the real render slot, so placeholder and drafted cards
     share one rhythm and the placeholder previews the true shape. */
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: repeating-linear-gradient(135deg, var(--canvas) 0 10px, var(--paper) 10px 20px);
  border: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-shot__ph span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rp-shot__content { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink-2); }
.rp-shot__ph--wide { aspect-ratio: 16 / 9; }

/* ------------------------------------------- draw this concept, on demand

   The placeholder becomes the control. Only the report's owner ever sees a
   button here: a visitor holding a shared link keeps the plain hatched box,
   which is exactly what the card looked like before this existed. */
.rp-shot__ph { flex-direction: column; gap: 10px; padding: 14px; text-align: center; }
.rp-gen {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.rp-gen:hover { background: var(--canvas); border-color: var(--slate-2); }
.rp-gen:active { transform: translateY(1px); }
.rp-gen:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.rp-gen__left,
.rp-gen__busy,
.rp-gen__err {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rp-gen__left { color: var(--text-faint); }
.rp-gen__err  { color: #B4232A; text-transform: none; letter-spacing: 0; font-size: 12px; }
.rp-gen__busy { color: var(--ink-2); }
.rp-shot__ph.is-drawing {
  /* A slow shimmer says "working" without pretending to know a percentage. */
  animation: rp-gen-pulse 1.6s ease-in-out infinite;
}
@keyframes rp-gen-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
@media (prefers-reduced-motion: reduce) {
  .rp-shot__ph.is-drawing { animation: none; }
}
/* A button is an on-screen control, never part of the printed document. */
@media print {
  .rp-gen, .rp-gen__left, .rp-gen__busy, .rp-gen__err { display: none !important; }
}

/* ------------------------------------------------------------ join prompt */
.rp-upsell {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 20, 24, 0.55);
}
.rp-upsell__box {
  background: var(--paper);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 26px 24px 22px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.rp-upsell__box h2 { font-size: 20px; line-height: 1.25; margin: 0 0 10px; }
.rp-upsell__box p  { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; }
.rp-upsell__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rp-upsell__cta {
  display: inline-block;
  font-size: 14px;
  font-weight: 650;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--action-primary);
  color: var(--action-primary-text);
  text-decoration: none;
}
.rp-upsell__cta:hover { background: var(--action-primary-hover); }
.rp-upsell__close {
  font: inherit;
  font-size: 14px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.rp-upsell__close:hover { background: var(--canvas); }
@media print { .rp-upsell { display: none !important; } }
.rp-shot__overlay {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: var(--surface-hero);
  border-radius: 12px;
}
.rp-shot__overlay-h { font-weight: 600; font-size: var(--fs-body-sm); color: var(--ink); }
.rp-shot__overlay-p { font-size: var(--fs-meta); line-height: 1.6; color: var(--text-body); }

/* ==========================================================================
   Purchase drivers (section 04)
   ========================================================================== */
.rp-drivers { margin-top: 24px; padding: 30px 32px; }
.rp-drivers__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rp-drivers__rows { margin-top: 20px; display: grid; }
.rp-drivers__row {
  display: grid;
  grid-template-columns: 1fr 70px 110px;
  gap: 20px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-hairline);
}
.rp-drivers__row:last-child { border-bottom: 0; padding-bottom: 0; }
.rp-drivers__reason {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.rp-drivers__quote {
  margin-top: 6px;
  font-size: var(--fs-meta);
  font-style: italic;
  color: var(--text-body);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.rp-drivers__n {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--green-deep);
}
.rp-impact {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  background: var(--canvas);
  color: var(--ink-2);
}
.rp-impact--high { background: var(--coral-soft); color: #9E2214; }
.rp-impact--medium { background: var(--surface-hero); color: var(--ink-2); }

/* ==========================================================================
   Creative strategy + A+ modules (section 08)
   ========================================================================== */
.rp-strat {
  margin-top: 44px;
  background: var(--surface-hero);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 30px 32px;
}
.rp-strat__msg {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 25px);
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: pretty;
}
.rp-strat__cols {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.rp-strat__list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rp-strat__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.rp-strat__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.rp-strat__list--yes li::before { content: "+"; color: var(--green-deep); }
.rp-strat__list--no li::before { content: "−"; color: var(--sev-crit-fg); }

.rp-modules { margin-top: 44px; }
.rp-modules__lead { margin-top: 44px; }
.rp-mod { padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; }
.rp-mod__sub {
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   08 · Generated concept images (AI drafts in the creative brief)
   ========================================================================== */
.rp-shot__viz { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-card); background: var(--canvas); }
.rp-shot__viz--sq { aspect-ratio: 1 / 1; }
.rp-shot__viz--wide { aspect-ratio: 16 / 9; }
.rp-shot__main { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bottom-right so the chip never covers the concept's own top-left brand zone. */
.rp-shot__badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-card);
  padding: 4px 8px;
  border-radius: 6px;
}
/* Print keeps the DISCLOSURE (as a caption) even though the chip is hidden. */
.rp-shot__printnote { display: none; font-size: 11px; color: #62646E; }
.rp-shot__note { margin-top: 12px; font-size: var(--fs-body-sm); line-height: 1.55; color: #62646E; max-width: 640px; }
.rp-shot__thumbrow { display: flex; flex-direction: column; gap: 6px; }
.rp-shot__thumblabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #62646E;
}
.rp-shot__thumbs { display: flex; gap: 8px; }
.rp-shot__thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  cursor: pointer;
  border: 2px solid var(--border-card);
  border-radius: 8px;
  overflow: hidden;
  background: var(--canvas);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.rp-shot__thumb:hover { border-color: #12804A; transform: translateY(-1px); }
.rp-shot__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-shot__thumb.is-on { border-color: #12804A; box-shadow: inset 0 0 0 1px #12804A; }
.rp-shot__thumb:focus-visible { outline: 2px solid #232323; outline-offset: 2px; }
/* Swap-in-progress: dim the outgoing concept until the new one paints. */
.rp-shot__main { transition: opacity 0.18s ease; }
.rp-shot__viz.is-swapping .rp-shot__main { opacity: 0.35; }
.rp-brandsheet {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
}
.rp-brandsheet__swatches { display: inline-flex; gap: 6px; }
.rp-swatch { width: 16px; height: 16px; border-radius: 5px; display: inline-block; border: 1px solid var(--border-hairline); }
.rp-brandsheet__words { font-size: var(--fs-meta); color: #62646E; }
@media print {
  .rp-shot__thumbrow, .rp-shot__badge { display: none; }
  .rp-shot__printnote { display: block; }
  /* Cap printed previews so an image card still fits a page. */
  .rp-shot__viz--sq, .rp-shot__viz--wide { aspect-ratio: auto; height: 300px; }
  .rp-shot__ph { aspect-ratio: auto; height: 150px; }
}

/* ==========================================================================
   09 · Proposed ProductPinion test
   ========================================================================== */
.rp-test { padding: 30px 32px; display: grid; gap: 14px; align-content: start; }
.rp-test-grid { margin-top: 24px; }
/* Recommendation, not alarm: the family badge and the "run this first" flag
   speak brand green here — amber/red stay reserved for the report's problems. */
.rp-test-fam { background: rgba(29, 179, 105, 0.12); color: #12804A; border: 1px solid rgba(29, 179, 105, 0.35); }
.rp-test-flag { margin-top: 24px; border-radius: var(--radius-card); background: rgba(29, 179, 105, 0.10); }
.rp-test-flag .rp-sev--flag { background: #12804A; color: #FFFFFF; }
/* The A/B block compares two candidates on equal footing here — unlike
   section 06, where fading the "now" side is the point. Same ink both sides;
   only the kickers differ, at AA contrast. */
.rp-test .rp-ba__now,
.rp-test .rp-ba__new { font-size: var(--fs-body-sm); line-height: 1.55; font-weight: 400; color: var(--ink); }
.rp-test .rp-ba__k--now { color: #62646E; }
.rp-test .rp-ba__k--new { color: #12804A; }

/* --------------------------------------------------------------------------
   09 · The Ranked Test line-up

   One row per gallery image, read left to right: what is there now, what it
   should be, and why. This replaced two separate grids (the live strip and
   the concept cards) that made the reader hold a picture in their head and
   scroll to find its replacement.

   Images are CONTAINed, never covered: a cropped listing image is a different
   image, and this block exists precisely so they can judge the ones they have.
   -------------------------------------------------------------------------- */
.rp-rk {
  margin-top: 24px;
  padding: 26px 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
}
.rp-rk__lead {
  margin: 8px 0 0;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-body);
  max-width: 68ch;
}
/* The key. A colour nobody can decode is decoration, so the meaning is stated
   before the first row rather than left to be inferred. */
.rp-rk__key { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rp-rk__keyitem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  color: var(--text-body);
}
.rp-rk__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rp-rk__dot--fix { background: #C0392B; }
.rp-rk__dot--keep { background: #12804A; }

.rp-rk__rows { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.rp-rk__row {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  background: var(--paper);
}
/* The status colour rides a left edge rather than tinting the whole card: the
   pictures are the content here, and a wash behind a product photograph
   changes how the photograph itself reads. */
.rp-rk__row.is-fix { border-left: 4px solid #C0392B; }
.rp-rk__row.is-keep { border-left: 4px solid #12804A; }
.rp-rk__status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rp-rk__status--fix { background: var(--sev-crit-bg); border: 1px solid var(--sev-crit-bd); color: var(--sev-crit-fg); }
.rp-rk__status--keep { background: #E7F5EE; border: 1px solid #BFE3D1; color: #0E5F38; }
.rp-rk__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rp-rk__n {
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.rp-rk__type {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-hero);
  border: 1px solid var(--border-card);
  color: var(--text-body);
}
.rp-rk__title {
  flex: 1 0 100%;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The pair. Two equal columns with the arrow between them, because the
   direction of travel IS the message: this becomes that. */
.rp-rk__pair {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
/* ⚠ The wells are a FIXED HEIGHT, not a square aspect ratio, and that is a
   deliberate correction rather than a style preference. Square wells at full
   row width made each picture ~950px tall and one row ~1,470px, so eight rows
   were a 12,000px scroll: the same failure the resources rail had. A fixed
   height keeps the row on one screen while the pair still uses the full width,
   which is the entire reason the two pictures are side by side.

   The right-hand well is section 08's own markup (so the draw machinery needs
   no special case), so it is pinned to the same height here or the two sides
   would not line up. Both CONTAIN: a cropped listing image is a different
   image, and this block exists so they can judge the ones they have. */
.rp-rk__shot,
.rp-rk__cell .rp-shot__ph,
.rp-rk__cell .rp-shot__viz--sq,
.rp-rk__empty {
  aspect-ratio: auto;
  height: 320px;
}
.rp-rk__cell .rp-shot__main { object-fit: contain; background: #FFFFFF; }
.rp-rk__arrow {
  align-self: center;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  color: var(--text-faint);
}
.rp-rk__cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rp-rk__cap { color: #62646E; }
.rp-rk__cap--new { color: #12804A; }
.rp-rk__shot {
  border: 1px solid var(--border-card);
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
}
.rp-rk__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rp-rk__nowmeta { display: flex; flex-direction: column; gap: 6px; }
.rp-rk__kind {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-hero);
  border: 1px solid var(--border-card);
  color: var(--text-body);
}
.rp-rk__does { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-body); }

/* Either side can legitimately be empty: a position the seller has not filled
   yet, or one the brief does not rewrite. Both are findings, so they are
   stated rather than left as a gap. */
.rp-rk__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--border-card);
  border-radius: 10px;
  background: var(--canvas);
}
.rp-rk__empty span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #62646E;
}
.rp-rk__empty p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-body); max-width: 30ch; }

.rp-rk__why {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--canvas);
  border: 1px solid var(--border-card);
}
.rp-rk__why p { margin: 4px 0 0; font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-body); }
/* On a flagged row the recommendation and its reason carry the colour, which
   is what Dorian asked to see: red is the thing to act on. */
.rp-rk__row.is-fix .rp-rk__cap--new { color: #A32B1D; }
.rp-rk__row.is-fix .rp-rk__why {
  background: var(--sev-crit-bg);
  border-color: var(--sev-crit-bd);
}
.rp-rk__row.is-fix .rp-rk__why .rp-kicker { color: var(--sev-crit-fg); }
.rp-rk__row.is-fix .rp-rk__why p { color: #6E1A10; }
/* On an unflagged row the picture they already have is the green one. */
.rp-rk__row.is-keep .rp-rk__cap { color: #0E5F38; }
.rp-rk__row.is-keep .rp-rk__cap--new { color: #62646E; }
.rp-rk__keepnote {
  margin: 12px 0 0;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  background: #E7F5EE;
  border: 1px solid #BFE3D1;
  color: #0E5F38;
}
.rp-rk__foot {
  margin: 16px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: #62646E;
}

/* Narrow: the arrow turns downward and the pair stacks, so "now then next"
   still reads in the right order rather than becoming two loose cards. */
@media (max-width: 720px) {
  .rp-rk { padding: 22px 18px; }
  .rp-rk__pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rp-rk__arrow { transform: rotate(90deg); }
}
@media print {
  .rp-rk__row { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   09 · Partner branding, opening and closing the section

   The logo is the real ProductPinion asset, the same file the footer uses.
   Its speech-bubble counter is transparent, so the full-colour lockup sits on
   the light band at the top and on the dark panel at the bottom with no
   knockout filter. Sized in CSS off the intrinsic ratio so it can never
   stretch, and given a min-height so it holds its space before it loads.
   -------------------------------------------------------------------------- */
.rp-pp {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: -20px 0 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-card);
}
.rp-pp__logo { height: 30px; width: auto; display: block; }
.rp-pp__tag {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-body);
}

.rp-runcta { margin-top: 24px; }
.rp-runcta .cc-darkpanel__inner { display: grid; gap: 12px; justify-items: start; }
.rp-runcta__logo { height: 34px; width: auto; display: block; margin-bottom: 4px; }
.rp-runcta__h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--on-dark-text);
}
.rp-runcta__p {
  margin: 0;
  max-width: 58ch;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--on-dark-muted);
}
.rp-runcta__btn { margin-top: 6px; }

/* --------------------------------------------------------------------------
   09 · The run sheet, and how to read the answer
   -------------------------------------------------------------------------- */
.rp-run__sheet { margin: 4px 0 0; display: grid; gap: 0; }
.rp-run__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--border-card);
  align-items: baseline;
}
.rp-run__row dt {
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rp-run__row dd { margin: 0; font-size: var(--fs-body-sm); line-height: 1.55; color: var(--ink); }
.rp-run__q {
  margin-top: 16px;
  padding: 15px 18px;
  border-radius: 12px;
  background: var(--surface-hero);
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--cyan);
}
.rp-run__q p { margin: 6px 0 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink); }
.rp-read { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.rp-read li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-body);
}
.rp-read li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--cyan);
}

@media (max-width: 720px) {
  .rp-run__row { grid-template-columns: 1fr; gap: 2px; }
}
/* ==========================================================================
   09 · Search Simulation

   The mock page follows the layout ProductPinion's own simulator puts in
   front of shoppers when this test runs: dark belt, nav strip, results bar,
   left filter rail, 222px image well, results grid. Drawn here in our own
   CSS, with no Amazon wordmark and no font loaded from Amazon's servers —
   this page goes to strangers, so it stays a labelled simulation rather than
   a facsimile, and it says so on its face.
   ========================================================================== */
.rp-sr {
  margin-bottom: 24px;
  padding: 26px 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
}

/* ---- the mock page itself ---- */
.rp-sr__page {
  position: relative;
  overflow: hidden;
  border: 1px solid #D5D9D9;
  border-radius: 10px;
  background: #FFFFFF;
  /* Amazon's own stack, with Amazon's own declared fallback. The webfont is
     never fetched from their CDN; on a machine that does not have it this
     renders in Arial, which is what Amazon itself falls back to. */
  font-family: "Amazon Ember", Arial, Helvetica, sans-serif;
  color: #0F1111;
  line-height: 1.35;
}
/* Says what it is from any distance, including in a screenshot of the results
   that escapes the report. Not decoration: this is the honesty label, so it
   sits in the bar directly above the products rather than floating in a
   corner where it can collide with the header at narrow widths. */
.rp-sr__stamp {
  flex: none;
  padding: 3px 10px;
  font-family: var(--font-sans, inherit);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #12804A;
  border-radius: 999px;
}

.rp-sr__belt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  background: #131921;
  color: #FFFFFF;
}
.rp-sr__deliver, .rp-sr__acct { display: flex; align-items: center; gap: 8px; flex: none; }
.rp-sr__deliver span, .rp-sr__acct span { display: flex; flex-direction: column; }
.rp-sr__deliver em, .rp-sr__acct em { font-style: normal; font-size: 11px; color: #CCCCCC; }
.rp-sr__deliver b, .rp-sr__acct b { font-size: 13px; font-weight: 700; }
.rp-sr__pin {
  width: 12px;
  height: 16px;
  background: #FFFFFF;
  clip-path: polygon(50% 100%, 12% 44%, 12% 22%, 30% 4%, 70% 4%, 88% 22%, 88% 44%);
  opacity: 0.9;
}
.rp-sr__acct { margin-left: auto; gap: 14px; }
.rp-sr__cart { display: flex; align-items: center; }

.rp-sr__search { flex: 1 1 auto; display: flex; min-width: 0; height: 34px; border-radius: 4px; overflow: hidden; }
.rp-sr__scope {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 0 9px;
  font-size: 12px;
  color: #555555;
  background: #F3F3F3;
  border-right: 1px solid #CDCDCD;
}
.rp-sr__scope i, .rp-sr__sort i {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #666666;
}
.rp-sr__field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 10px;
  font-size: 14px;
  color: #0F1111;
  background: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-sr__caret { display: inline-block; width: 1px; height: 17px; background: #0F1111; opacity: 0.55; }
.rp-sr__go {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  background: #FEBD69;
}

.rp-sr__nav {
  display: flex;
  gap: 4px;
  padding: 6px 14px;
  background: #232F3E;
  color: #FFFFFF;
  font-size: 13px;
  overflow: hidden;
}
.rp-sr__nav span { padding: 4px 8px; white-space: nowrap; }
.rp-sr__nav span.is-first { font-weight: 700; }

.rp-sr__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: #0F1111;
  border-bottom: 1px solid #D5D9D9;
}
.rp-sr__sort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  background: #F0F2F2;
  border: 1px solid #D5D9D9;
  border-radius: 8px;
}

.rp-sr__cols { display: flex; align-items: flex-start; gap: 18px; padding: 14px; }
.rp-sr__side { flex: none; width: 168px; font-size: 13px; }
.rp-sr__fgroup { margin-bottom: 14px; }
.rp-sr__fgroup h4 { margin: 0 0 5px; font-size: 13px; font-weight: 700; color: #0F1111; }
.rp-sr__fgroup ul { margin: 0; padding: 0; list-style: none; }
.rp-sr__fgroup li { margin: 4px 0; color: #0F1111; }
.rp-sr__check { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.rp-sr__box { width: 12px; height: 12px; border: 1px solid #888C8C; border-radius: 2px; background: #FFFFFF; }
.rp-sr__sidestars { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #007185; }
.rp-sr__slider { position: relative; height: 4px; margin-top: 10px; background: #E3E6E6; border-radius: 2px; }
.rp-sr__slider span { position: absolute; inset: 0 30% 0 0; background: #007185; border-radius: 2px; }
.rp-sr__main { flex: 1 1 auto; min-width: 0; }
.rp-sr__resh { font-size: 19px; font-weight: 700; line-height: 1.4; color: #0F1111; }
.rp-sr__ressub { margin-bottom: 10px; font-size: 13px; color: #565959; }
.rp-sr__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.rp-sr__lead {
  margin-top: 6px;
  max-width: 620px;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-body);
}
.rp-sr__toggle {
  flex: none;
  cursor: pointer;
  padding: 9px 16px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--border-card);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rp-sr__toggle:hover { border-color: #12804A; }
.rp-sr__toggle[aria-pressed="true"] { background: #12804A; border-color: #12804A; color: #FFFFFF; }
.rp-sr__toggle:focus-visible { outline: 2px solid #232323; outline-offset: 2px; }

/* Amazon runs three across at desktop widths and four on very wide screens.
   Three is what the seller is actually competing in, so three it is. */
.rp-sr__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.rp-sr__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid #F8F8F8;
  border-radius: 4px;
  background: #FFFFFF;
}
/* The seller's own tile is marked, otherwise they cannot find themselves in
   a shuffled page — and finding yourself is the whole exercise. */
.rp-sr__tile.is-mine {
  border-color: #12804A;
  box-shadow: 0 0 0 2px rgba(29, 179, 105, 0.16);
}
.rp-sr__yours {
  position: absolute;
  top: -8px;
  left: 10px;
  z-index: 2;
  padding: 2px 8px;
  font-family: var(--font-sans, inherit);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #12804A;
  border-radius: 5px;
}
/* Amazon's own image well: a fixed square the picture is centred inside, so
   a tall bottle and a wide box occupy the same space and neither wins on
   size alone. */
.rp-sr__shot {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FFFFFF;
}
.rp-sr__shot img { max-width: 88%; max-height: 88%; object-fit: contain; display: block; }
.rp-sr__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 8px; }
.rp-sr__sponsored { font-size: 11px; font-weight: 700; color: #565959; }
.rp-sr__title {
  font-size: 14px;
  line-height: 1.45;
  color: #0F1111;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rp-sr__tile:hover .rp-sr__title { color: #C7511F; }
.rp-sr__meta { display: flex; align-items: center; gap: 6px; }
.rp-sr__stars {
  position: relative;
  display: inline-block;
  width: 68px;
  height: 12px;
  background: linear-gradient(90deg, #D8D8DC 0 100%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 13.6px);
  mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 13.6px);
}
.rp-sr__starsfill { position: absolute; inset: 0 auto 0 0; background: #F0A64A; }
/* Amazon prints the count here in link teal. We hold the rating and not the
   count, so the rating takes the slot and the footnote says why. */
.rp-sr__rating { font-size: 12.5px; font-weight: 600; color: #007185; }

/* The seller's own controls. Deliberately in OUR type and OUR green, so they
   read as report furniture sitting on the mock rather than as anything
   Amazon offers. */
.rp-sr__swap,
.rp-sr__gen { font-family: var(--font-sans, inherit); }
.rp-sr__swap { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rp-sr__opt {
  cursor: pointer;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--canvas);
  border: 1px solid var(--border-card);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rp-sr__opt:hover { border-color: #12804A; }
.rp-sr__opt.is-on { background: #12804A; border-color: #12804A; color: #FFFFFF; }
.rp-sr__opt:focus-visible { outline: 2px solid #232323; outline-offset: 2px; }

/* The draw host. Empty until the slot machinery decides there is something
   to offer, so it must take no space of its own when it has nothing in it. */
.rp-sr__gen:empty { display: none; }
.rp-sr__gen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.rp-sr__gen .rp-gen--tile {
  cursor: pointer;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  background: #12804A;
  border: 1px solid #12804A;
  border-radius: 999px;
}
.rp-sr__gen .rp-gen--tile:hover { background: #0E6A3D; }
.rp-sr__gen .rp-gen--tile:focus-visible { outline: 2px solid #232323; outline-offset: 2px; }
/* Section 08 sets these in small mono caps, which reads as a system label on
   a big empty well. On a 200px product tile it shouts, so the same note is
   quietened here: same words, same colour role, sentence case. */
.rp-sr__gen .rp-gen__left,
.rp-sr__gen .rp-gen__busy,
.rp-sr__gen .rp-gen__err {
  font-family: var(--font-sans, inherit);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: #565959;
}
.rp-sr__gen .rp-gen__err { color: #B3261E; }

/* "Hide the words" — the picture has to carry it alone. Nothing is faked;
   real text is simply removed from view. Collapsed rather than made
   invisible, so the page tightens into a pure wall of images: the reader is
   meant to see what a thumb-scrolling shopper sees, not a page of gaps. */
.rp-sr.is-bare .rp-sr__title,
.rp-sr.is-bare .rp-sr__sponsored,
.rp-sr.is-bare .rp-sr__meta { display: none; }

.rp-sr__foot {
  margin-top: 16px;
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: #62646E;
}
/* Below the width Amazon itself drops the rail at, the rail goes too: a
   170px column of filters squeezing the products off the page teaches
   nobody anything. */
@media (max-width: 991px) {
  .rp-sr__side { display: none; }
}
@media (max-width: 760px) {
  .rp-sr { padding: 20px 18px; }
  .rp-sr__page { font-size: 13px; }
  .rp-sr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-sr__deliver, .rp-sr__acct span:first-child { display: none; }
  .rp-sr__nav span:nth-child(n + 4) { display: none; }
  .rp-sr__cols { padding: 10px; }
}
@media print {
  .rp-sr__toggle, .rp-sr__swap, .rp-sr__gen { display: none; }
  /* Individual products must not be sliced across a page break. The mock as a
     whole is taller than a sheet, so it is deliberately NOT held together:
     asking a browser to keep an unfittable block whole buys a blank page. */
  .rp-sr__tile { break-inside: avoid; }
  .rp-sr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rp-test .rp-label,
.rp-test .rp-dist__note { color: #62646E; }
#proposedtest .rp-onething .rp-label { color: var(--on-dark-muted); }
/* Lean the bridge panel into the Join slab below instead of stuttering. */
#proposedtest { padding-bottom: 40px; }
#proposedtest .rp-onething { border-radius: 20px; }
/* This is the one A/B block that genuinely needs side-by-side — keep it
   two-up through tablet widths (id specificity outranks the 960px collapse). */
@media (min-width: 700px) {
  #proposedtest .rp-ba { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Keplo attribution — in the hero, next to the product it is about, not
   buried at the foot of the page. Light ground, so it carries ink colours
   rather than the on-dark set it used in the footer.
   ========================================================================== */
.rp-keplo {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px 11px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(43, 44, 51, 0.05);
  font-size: var(--fs-body-sm);
  line-height: 1.35;
  color: var(--ink-2);
  /* nowrap: the text wraps INSIDE the span, so the mark stays beside the
     words instead of being pushed onto a line of its own on a phone. */
  flex-wrap: nowrap;
  max-width: 100%;
}
.rp-keplo > span { min-width: 0; }
.rp-keplo img { width: 26px; height: 26px; border-radius: 7px; display: block; flex: none; }
.rp-keplo a {
  color: var(--cc-link-ink);
  text-decoration: none;
  font-weight: 700;
}
.rp-keplo a:hover { text-decoration: underline; }
.rp-keplo__sep { color: var(--slate-3); }

@media (max-width: 560px) {
  .rp-keplo { padding: 10px 14px 10px 11px; gap: 9px; }
  .rp-keplo img { width: 22px; height: 22px; }
}

/* The report is built to be saved as a PDF, and the credit must survive
   that; it is deliberately not in the data-print="hide" furniture. */
@media print {
  .rp-keplo { border-color: #CFD2D8; box-shadow: none; }
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.rp-join .cc-darkpanel { border-radius: 20px; padding: 80px 60px; text-align: center; }
.rp-join .rp-label { color: var(--on-dark-faint); }
.rp-join h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-cta);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 20px auto 0;
  max-width: 840px;
}
.rp-join__sub {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: var(--fs-lede);
  line-height: var(--leading-lede);
  color: var(--on-dark-muted);
}
.rp-join__actions { margin-top: 38px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.rp-join__note {
  margin-top: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--on-dark-faint);
}
@media (max-width: 720px) { .rp-join .cc-darkpanel { padding: 56px 26px; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  /* minmax(0,1fr) rather than 1fr — a bare 1fr track still respects the
     content's min-content width, so one long unbreakable word in a review
     quote would push the card past the viewport. */
  .rp-hero__grid,
  .rp-grid--2,
  .rp-grid--3,
  .rp-ba,
  .rp-bullet,
  .rp-strat__cols,
  .rp-action__cols { grid-template-columns: minmax(0, 1fr); }
  .rp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-hero__grid { gap: 36px; }
}

@media (max-width: 600px) {
  /* The driver rows stack: reason on its own line, count and impact beneath. */
  .rp-drivers__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .rp-drivers__n { grid-row: 1; grid-column: 2; }
  .rp-drivers__row > div:last-child { grid-column: 1 / -1; }
  .rp-drivers, .rp-strat, .rp-mod { padding: 24px 20px; }
}

/* Review quotes and listing copy are arbitrary shopper text — let anything
   unbreakable (URLs, long IDs) wrap instead of widening its container. */
.rp-strength__quote,
.rp-persona__quote,
.rp-issues__quote,
.rp-ba__now,
.rp-ba__new,
.rp-bullet__now,
.rp-bullet__new,
.rp-shot__content,
.rp-quick__fix,
.rp-action__do,
.rp-kw__kw { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  /* Wide data tables scroll inside their own container rather than the page */
  .rp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rp-scroll > * { min-width: 720px; }
}
@media (max-width: 600px) {
  /* Tighter gutters, and the nav keeps the mark + CTA but drops the wordmark
     so the header still fits a 360px phone. */
  :root { --container-pad: 20px; }
  .cc-nav .cc-wordmark { display: none; }
  .cc-nav .cc-btn { font-size: 14px; padding: 11px 16px; }
}
@media (max-width: 560px) {
  .rp-grid--4 { grid-template-columns: 1fr; }
  .rp-listing, .rp-bullets, .rp-dist, .rp-action, .rp-quick, .rp-test { padding: 24px 20px; }
  .rp-issues__head, .rp-issues__row { padding-left: 20px; padding-right: 20px; }
  .rp-action__impact { width: 100%; }
}

/* ==========================================================================
   Print — the report is meant to be saved as a PDF
   ========================================================================== */
@page { size: letter; margin: 13mm; }
@media print {
  [data-print="hide"] { display: none !important; }
  body { background: #fff; }
  .cc-band, .rp-hero { padding: 26px 0 !important; }
  [data-print="keep"] { break-inside: avoid; }
  [data-print="break"] { break-before: page; }
  .rp-scroll > * { min-width: 0; }
  .rp-action__copy, .rp-issues__quote { background: #F7F7F8 !important; }
  a[href]::after { content: ""; }
}

/* ==========================================================================
   Demo ribbon — only the ?demo=1 sample carries this. It names the page for
   what it is (a real report we ran) and hands the reader their own next
   step. Customer reports never render it.
   ========================================================================== */
.rp-demo {
  background: linear-gradient(90deg, rgba(9, 197, 237, 0.10), rgba(103, 249, 169, 0.14));
  border-bottom: 1px solid var(--border);
}
.rp-demo__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.rp-demo__tag {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: #0B1220;
  color: #67F9A9;
}
.rp-demo__text {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--ink-2);
  flex: 1 1 320px;
}
.rp-demo__cta { flex: none; }
@media (max-width: 600px) {
  .rp-demo__inner { gap: 10px; }
  .rp-demo__text { flex-basis: 100%; }
}