/* OTW Signal — component styles, built on top of the existing styles.css
   brand variables (--ink, --paper, --signal, etc.) so it matches the rest
   of the site. */

.signal-hero {
  padding: 64px 0 48px;
  background: var(--gradient-wash);
}
.signal-hero .wrap {
  max-width: 760px;
}
.signal-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 16px;
}
.signal-hero h1 {
  font-family: 'Archivo Expanded', sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.signal-hero .sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.55;
  margin: 0 0 40px;
}

/* --- Auth bar (top right of nav) --- */
.auth-bar { display: flex; align-items: center; gap: 12px; }
.auth-bar button, .auth-bar .auth-email {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}
.auth-link-btn {
  background: none; border: none; color: var(--ink); cursor: pointer;
  font-weight: 600; text-decoration: underline; padding: 0;
}
.auth-email { color: var(--muted); }

/* --- Modal (signup/login) --- */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(21,24,28,0.55);
  z-index: 100; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.active { display: flex; }
.modal-card {
  background: var(--paper); border-radius: 14px; padding: 36px;
  max-width: 420px; width: 100%; position: relative;
}
.modal-close {
  position: absolute; top: 18px; right: 18px; background: none; border: none;
  font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1;
}
.modal-card h2 {
  font-family: 'Archivo Expanded', sans-serif; font-weight: 900; font-size: 24px; margin: 0 0 6px;
}
.modal-card .modal-sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.modal-tabs { display: flex; gap: 6px; margin-bottom: 24px; }
.modal-tab {
  flex: 1; padding: 10px; text-align: center; border-radius: 8px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  background: var(--paper-dim); color: var(--muted); border: none;
}
.modal-tab.active { background: var(--ink); color: var(--paper); }

.form-field { margin-bottom: 16px; }
.form-field label {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.form-field input {
  width: 100%; background: #fff; border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 11px 13px; font-family: 'Archivo', sans-serif;
  font-size: 15px; color: var(--ink); outline: none;
}
.form-field input:focus { border-color: var(--signal); }
.modal-submit {
  width: 100%; background: var(--signal); color: #fff; border: none;
  border-radius: 8px; padding: 13px; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  cursor: pointer; margin-top: 6px;
}
.modal-submit:hover { background: #4B41CC; }
.modal-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.modal-error {
  display: none; background: #F7E9E3; border: 1px solid #E0B79C; color: #7A3B1D;
  border-radius: 8px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px;
}
.modal-error.active { display: block; }

/* --- Social login buttons: white/outlined, per each provider's brand
   guidelines (neither Google nor Microsoft wants their mark on a solid
   brand-color fill) — distinct from the default .modal-submit purple fill --- */
.modal-submit--google,
.modal-submit--microsoft {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--ink); border: 1px solid var(--line-soft);
  text-transform: none; letter-spacing: normal; font-family: 'Archivo', sans-serif;
  font-size: 14px; font-weight: 600;
}
.modal-submit--google:hover,
.modal-submit--microsoft:hover { background: var(--paper-dim); }
.modal-submit--microsoft + .modal-divider { margin-top: 18px; }

.modal-divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.modal-divider::before, .modal-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line-soft);
}

.modal-link-secondary {
  display: block; width: 100%; text-align: center; background: none; border: none;
  color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  cursor: pointer; margin-top: 14px; text-decoration: underline;
}
.modal-link-secondary:hover { color: var(--ink); }

/* --- The business-input + pricing card --- */
.signal-card {
  background: rgba(255,255,255,0.78); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 20px; padding: 36px; color: var(--ink);
  box-shadow: 0 20px 60px rgba(91,79,224,0.1), 0 1px 2px rgba(91,79,224,0.04);
}
.signal-card .form-field label { color: var(--signal); }
.signal-card .form-field input, .signal-card .form-field textarea {
  background: #fff; border: 1px solid var(--line-soft); color: var(--ink);
}
.signal-card textarea { resize: vertical; min-height: 70px; line-height: 1.5; width: 100%; padding: 11px 13px; border-radius: 8px; font-family: 'Archivo', sans-serif; font-size: 15px; }
.price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--line-soft); margin-top: 24px; padding-top: 20px;
}
.price-label { font-size: 14px; color: var(--muted); }
.price-amount { font-family: 'Archivo Expanded', sans-serif; font-weight: 900; font-size: 28px; }
.signal-submit {
  width: 100%; margin-top: 20px; background: var(--signal); color: #fff; border: none;
  border-radius: 8px; padding: 15px 20px; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
}
.signal-submit:hover:not(:disabled) { background: #4B41CC; }
.signal-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- How it works --- */
.how-it-works { padding: 60px 0; border-top: 1px solid var(--line-soft); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.how-step .how-num {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  color: var(--signal); margin-bottom: 10px;
}
.how-step h3 { font-family: 'Archivo Expanded', sans-serif; font-size: 17px; margin: 0 0 8px; }
.how-step p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }

@media (max-width: 700px) {
  .how-grid { grid-template-columns: 1fr; }
}

/* --- Evidence ledger (report page) --- */
.ledger { position: relative; padding-left: 34px; margin-top: 40px; }
.ledger::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line-soft);
}
.layer { position: relative; margin-bottom: 44px; }
.layer:last-child { margin-bottom: 0; }
.layer-node {
  position: absolute; left: -34px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--signal); display: flex; align-items: center; justify-content: center;
}
.layer-node span { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.layer-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px;
}
.fact-card {
  background: var(--ink); color: #D8DCD9; border-radius: 10px; padding: 18px 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.7;
  max-height: 320px; overflow-y: auto;
}
.fact-card .fk { color: var(--signal-bright); }
.fact-card div { margin-bottom: 4px; }
.interp-text, .impact-text { font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.cite {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  padding: 0 4px; background: #E4EEEC; color: var(--signal); border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; vertical-align: 2px; margin: 0 2px;
}
.rec-item { background: var(--paper-dim); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.rec-item:last-child { margin-bottom: 0; }
.rec-action { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.rec-evidence { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 8px; }
.impact-hypothesis { background: #F0F4F3; border-radius: 10px; padding: 18px 20px; }
.impact-caveat { margin-top: 14px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* --- Verdict banner --- */
.verdict-banner {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 26px; border-radius: 12px; margin: 28px 0 24px;
}
.verdict-banner.not-mentioned { background: #F7E9E3; border: 1px solid #E0B79C; }
.verdict-banner.mentioned { background: #E4EEEC; border: 1px solid #A9CFC9; }
.verdict-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 900; color: #fff;
}
.verdict-banner.not-mentioned .verdict-icon { background: #B9552C; }
.verdict-banner.mentioned .verdict-icon { background: var(--signal); }
.verdict-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; display: block;
}
.verdict-banner.not-mentioned .verdict-tag { color: #B9552C; }
.verdict-banner.mentioned .verdict-tag { color: var(--signal); }
.verdict-text {
  font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 18px;
  line-height: 1.4; color: var(--ink); margin: 0;
}

/* --- Summary callout --- */
.summary-callout {
  font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0 0 8px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line-soft);
}

/* --- Ranked competitor list --- */
.competitor-list { display: flex; flex-direction: column; gap: 6px; }
.competitor-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--paper-dim); border-radius: 8px; }
.competitor-rank { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.competitor-name { flex: 1; font-weight: 600; font-size: 14.5px; }
.competitor-freq { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); }

/* --- Categorized facts grid (replaces raw monospace dump) --- */
.facts-grid { display: flex; flex-direction: column; gap: 8px; }
.fact-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  background: var(--ink); border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.fact-row .fk {
  flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  font-weight: 700; color: var(--signal-bright); background: rgba(127,184,175,0.15);
  border-radius: 4px; padding: 1px 6px; margin-top: 1px;
}
.fact-row .fv { color: #D8DCD9; }
.fact-row .fcat {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--signal-bright); margin-right: 6px;
}
.fact-row.mentioned { border-left: 3px solid var(--signal-bright); }
.fact-row.not-mentioned-row { border-left: 3px solid #B9552C; }

/* --- Interpretation with paragraph breaks --- */
.interp-text p { margin: 0 0 14px; }
.interp-text p:last-child { margin-bottom: 0; }

/* --- Numbered recommendation cards --- */
.rec-item.numbered { display: flex; gap: 16px; }
.rec-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink);
  color: var(--paper); display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
}
.rec-body { flex: 1; }
.rec-why { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 6px 0 0; }
.consulting-cta {
  margin-top: 60px; padding: 32px; background: var(--paper-dim); border-radius: 14px;
}
.consulting-cta h3 { font-family: 'Archivo Expanded', sans-serif; font-size: 20px; margin: 0 0 10px; }
.consulting-cta p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; max-width: 560px; }

.status-line {
  display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--muted); margin-top: 24px;
}
.spinner {
  width: 15px; height: 15px; border: 2px solid var(--line-soft); border-top-color: var(--signal);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Pricing tier cards --- */
.pricing-section { padding: 20px 0 60px; }
.pricing-h2 { font-family: 'Archivo Expanded', sans-serif; font-weight: 900; font-size: 26px; margin: 0 0 28px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; max-width: 100%; }
.pricing-badge.muted { background: var(--muted); }
.preview-link {
  display: block; text-align: center; margin-top: 12px; font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--muted); text-decoration: underline;
}
.pricing-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 26px;
  display: flex; flex-direction: column; position: relative;
}
.pricing-card.featured { border: 2px solid var(--signal); box-shadow: 0 8px 24px rgba(31,95,91,0.12); }
.pricing-card.disabled { opacity: 0.7; }
.pricing-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--signal); color: #fff; font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700; padding: 5px 12px; border-radius: 20px; white-space: nowrap;
}
.pricing-tier-name { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.pricing-price { font-family: 'Archivo Expanded', sans-serif; font-weight: 900; font-size: 30px; margin-bottom: 10px; color: var(--ink); }
.pricing-price span { font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 4px; }
.pricing-desc { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.pricing-features li {
  font-size: 13px; padding: 7px 0 7px 22px; position: relative; color: var(--ink); border-bottom: 1px solid var(--paper-dim);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--signal); font-weight: 700; }
.pricing-cta {
  width: 100%; background: var(--ink); color: var(--paper); border: none; border-radius: 8px;
  padding: 13px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
}
.pricing-cta.primary { background: var(--signal); }
.pricing-cta.primary:hover { background: #4B41CC; }
.pricing-cta:hover:not(:disabled) { opacity: 0.9; }
.pricing-cta:disabled { background: var(--paper-dim); color: var(--muted); cursor: not-allowed; }

.plan-toggle { display: flex; gap: 4px; background: var(--paper-dim); border-radius: 8px; padding: 4px; margin-bottom: 14px; }
.plan-toggle-btn {
  flex: 1; background: none; border: none; padding: 7px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.plan-toggle-btn.active { background: var(--ink); color: #fff; }
.save-tag { display: block; font-size: 9px; opacity: 0.8; }

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* --- Dashboard upsell (on report page) --- */
.dashboard-upsell {
  margin-top: 48px; padding: 28px; background: var(--ink); border-radius: 14px; color: var(--paper); position: relative;
}
.upsell-badge {
  display: inline-block; background: var(--signal-bright); color: var(--ink); font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-bottom: 14px;
}
.dashboard-upsell h3 { font-family: 'Archivo Expanded', sans-serif; font-size: 19px; margin: 0 0 10px; }
.dashboard-upsell p { font-size: 14px; color: #C7CCC9; line-height: 1.55; margin: 0 0 20px; max-width: 560px; }
.upsell-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.upsell-annual-note { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #9AA6A3; }

/* --- NPS feedback form --- */
.feedback-block { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.feedback-block h3 { font-family: 'Archivo Expanded', sans-serif; font-size: 16px; margin: 0 0 14px; }
.nps-scale { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.nps-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-soft); background: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.nps-btn.selected { background: var(--signal); color: #fff; border-color: var(--signal); }
.nps-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 18px; max-width: 400px; }
.feedback-block textarea {
  width: 100%; min-height: 70px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 11px 13px;
  font-family: 'Archivo', sans-serif; font-size: 14px; margin-bottom: 14px; resize: vertical;
}
.feedback-submit {
  background: var(--ink); color: var(--paper); border: none; border-radius: 8px; padding: 11px 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.feedback-thanks { margin-top: 12px; font-size: 13.5px; color: var(--signal); font-weight: 600; }

/* --- Continue-to-pricing prompt --- */
.continue-to-pricing {
  width: 100%; margin-top: 20px; background: none; border: 1px dashed var(--signal-bright);
  color: var(--signal-bright); border-radius: 8px; padding: 13px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
}
.continue-to-pricing:hover { background: rgba(127,184,175,0.1); }

/* --- Methodology disclosure --- */
.methodology-box {
  margin-top: 32px; padding: 18px 20px; background: var(--paper-dim); border-radius: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); line-height: 1.8;
}
.methodology-box strong { color: var(--ink); }

/* --- Global account dropdown (used across index/report/dashboard/account pages) --- */
.account-menu { position: relative; }
.account-menu-trigger {
  display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.account-menu-trigger:hover { background: var(--paper-dim); }
.account-menu-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #fff;
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 6px; min-width: 190px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: 60;
}
.account-menu-dropdown.open { display: block; }
.account-menu-dropdown a, .account-menu-dropdown button {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 10px 12px; border-radius: 6px; font-family: 'Archivo', sans-serif; font-size: 13.5px;
  color: var(--ink); text-decoration: none; box-sizing: border-box;
}
.account-menu-dropdown a:hover, .account-menu-dropdown button:hover { background: var(--paper-dim); }
.account-menu-divider { height: 1px; background: var(--line-soft); margin: 4px 0; }

/* ============================================================
   OTW Signal — 2026 visual identity refresh.
   The core palette (--ink, --paper, --signal, etc.) now lives in
   styles.css itself, site-wide. This block only adds Signal-
   specific tokens/utilities not needed elsewhere.
   ============================================================ */
:root {
  --peach: #FF9D72;
  --gradient-wash: linear-gradient(135deg, #EFF1FE 0%, #F5EEFB 45%, #FDF1EA 100%);
}

.frosted-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px rgba(91,79,224,0.08), 0 1px 2px rgba(91,79,224,0.04);
}

.wizard-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 16px;
}
.wizard-detected-box { background: var(--paper-dim); border-radius: 10px; padding: 6px 18px; margin-bottom: 16px; }
.wdb-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.wdb-row:last-child { border-bottom: none; }
.wdb-label { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.wdb-value { font-family: 'Archivo', sans-serif; font-size: 13.5px; color: var(--ink); text-align: right; }
.wizard-question { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 14px; }
.wizard-note { font-family: 'Archivo', sans-serif; font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.wizard-warning {
  background: rgba(255,157,114,0.14); border-left: 3px solid var(--peach); border-radius: 6px;
  padding: 10px 14px; font-size: 12.5px; color: #B0562F; line-height: 1.5; margin-bottom: 16px;
}
.wizard-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.wizard-btn {
  background: #fff; border: 1px solid var(--line-soft); color: var(--ink); border-radius: 8px;
  padding: 11px 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; cursor: pointer;
}
.wizard-btn:hover { border-color: var(--signal-bright); }
.wizard-btn.primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.wizard-btn.primary:hover { background: #4B41CC; }
.wizard-checkbox-row {
  display: flex; align-items: flex-start; gap: 10px; font-family: 'Archivo', sans-serif; font-size: 13.5px;
  color: var(--ink); margin: 4px 0 18px; cursor: pointer;
}
.wizard-checkbox-row input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }

/* --- Prompt editing list (Step 4) --- */
.prompt-edit-row { background: var(--paper-dim); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.prompt-edit-row .pe-cluster {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 8px; display: block;
}
.prompt-edit-row textarea {
  width: 100%; background: #fff; border: 1px solid var(--line-soft); color: var(--ink); border-radius: 7px;
  padding: 9px 11px; font-family: 'Archivo', sans-serif; font-size: 13.5px; resize: vertical; min-height: 40px; box-sizing: border-box;
}

/* --- Free preview screen (Step 4) — bold theatrical reveal --- */
@keyframes previewFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.preview-radial-wrap {
  position: relative; width: 160px; height: 160px; margin: 8px auto 24px;
  animation: previewFadeUp 0.5s ease both;
}
.preview-radial-svg { width: 100%; height: 100%; }
#previewRadialArc { transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.preview-radial-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.preview-hero-num { font-family: 'Archivo Expanded', sans-serif; font-weight: 900; font-size: 40px; color: var(--signal); line-height: 1; }
.preview-hero-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px; text-align: center; line-height: 1.4;
}

.preview-chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.preview-chip {
  background: var(--paper-dim); border-radius: 14px; padding: 16px 8px; text-align: center;
  animation: previewFadeUp 0.5s ease both;
}
.chip-1 { animation-delay: 0.05s; }
.chip-2 { animation-delay: 0.15s; }
.chip-3 { animation-delay: 0.25s; }
.chip-4 { animation-delay: 0.35s; }
.chip-num { font-family: 'Archivo Expanded', sans-serif; font-weight: 900; font-size: 26px; color: var(--ink); line-height: 1; }
.chip-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); margin-top: 6px; line-height: 1.35; text-transform: uppercase; }
.chip-critical { background: rgba(255,157,114,0.16); }
.chip-critical .chip-num { color: #B0562F; }
.chip-competitor { background: rgba(91,79,224,0.1); }
.chip-competitor .chip-num { color: var(--signal); }

.preview-mini-stats {
  background: var(--paper-dim); border-radius: 12px; padding: 4px 16px; margin-bottom: 18px;
  animation: previewFadeUp 0.5s ease 0.45s both;
}
.pms-row {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 0;
  font-family: 'Archivo', sans-serif; font-size: 13px; color: var(--muted); border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pms-row:last-child { border-bottom: none; }
.pms-row b { color: var(--ink); font-weight: 700; }

.preview-wow-card {
  position: relative; background: linear-gradient(135deg, #272A42 0%, #3A2C6E 100%);
  border-radius: 16px; padding: 26px 24px; margin-bottom: 22px; overflow: hidden;
  animation: previewFadeUp 0.5s ease 0.55s both;
  box-shadow: 0 12px 32px rgba(91,79,224,0.25);
  cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.preview-wow-card:hover, .preview-wow-card:focus-visible {
  box-shadow: 0 16px 40px rgba(91,79,224,0.35); transform: translateY(-1px);
  outline: none;
}
.preview-wow-card::before {
  content: ""; position: absolute; top: -40%; right: -20%; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,156,255,0.35) 0%, transparent 70%);
}
.pwc-lock { font-size: 22px; margin-bottom: 10px; position: relative; }
.pwc-headline { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; color: #fff; margin-bottom: 8px; line-height: 1.4; position: relative; }
.pwc-detail { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--signal-bright); position: relative; }
.pwc-cta {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700; color: #fff;
  margin-top: 16px; position: relative;
}
/* Locked competitor board: a redacted glimpse of the ranking the full report
   reveals. Names and percentages are blurred placeholders (not real data),
   the bars are decorative, so nothing is claimed, only the shape of what's
   waiting behind the paywall. One row per competitor actually found. */
.pwc-board { position: relative; z-index: 1; margin: 16px 0 2px; display: flex; flex-direction: column; gap: 8px; }
.pwc-board-row { display: flex; align-items: center; gap: 10px; }
.pwc-board-rank {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.18); color: #fff; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.pwc-board-name { width: 96px; height: 11px; border-radius: 3px; background: rgba(255,255,255,0.30); filter: blur(2px); flex-shrink: 0; }
.pwc-board-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; }
.pwc-board-bar span { display: block; height: 100%; border-radius: 4px; background: rgba(167,156,255,0.75); filter: blur(1px); }
.pwc-board-pct { width: 34px; height: 11px; border-radius: 3px; background: rgba(255,255,255,0.24); filter: blur(2px); flex-shrink: 0; }