/* [hidden] must actually hide.
 *
 * The attribute only carries `display: none` from the user-agent stylesheet,
 * which any author rule setting `display` beats on specificity. This stylesheet
 * sets display on almost every component, so `el.hidden = true` silently did
 * nothing three separate times in one day: the report page's evidence rows, the
 * segmented language options, and the hero's measurement controls. Each was
 * caught only by opening a browser, because the markup and the tests both
 * looked correct.
 *
 * One global rule ends the class of bug. Two earlier one-off patches
 * (.rp-menu-pop[hidden], .rp-hist[hidden]) are left in place: they are now
 * redundant rather than wrong, and removing them is a separate change. */
[hidden] { display: none !important; }

/* 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: var(--sec-pad) 0 calc(var(--sec-pad) - 12px);
  background: var(--gradient-wash);
}
.signal-hero .wrap {
  max-width: var(--landing-max);
  text-align: center;
}
/* Center the form card as a column, but keep its inner form fields left-aligned. */
.signal-hero .signal-card { max-width: 600px; margin-inline: auto; text-align: left; }
.signal-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 16px;
}
.signal-hero h1 {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin: 0 auto 18px;
  text-align: center;
}
.signal-hero .sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.55;
  margin: 0 auto 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 12.5px;
}
.auth-link-btn {
  background: none; border: none; color: var(--ink); cursor: pointer;
  font-weight: 600; text-decoration: underline;
  /* Real padding, not 0: a 20px-tall "Log in" is below every touch-target
     guideline; negative margin keeps the visual layout unchanged. */
  padding: 12px 10px; margin: -12px -10px;
}
.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: 1000; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 600;
  background: var(--paper-dim); color: var(--muted); border: none;
}
.modal-tab.active { background: var(--signal); color: #fff; }

.form-field { margin-bottom: 16px; }
.form-field label {
  display: block; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  /* 16px minimum: below this, iOS Safari zooms the whole page on focus */
  font-size: 16px; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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 {
  /* Solid, at every width. The border was rgba(255,255,255,0.7): white on white,
     invisible, because the blur was supplying the card's edge. With the blur
     gone the hairline has to be a real colour or the card has no edge at all. */
  background: #fff;
  border: 1px solid var(--line-soft, #E8E5F9); 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 16px; }
/* Scrolled to programmatically once the free technical check completes
   (renderReadinessMini in index.html) -- without this, scrollIntoView's
   block:'start' would land its top edge directly under the sticky header
   (position:sticky, --header-height tall) and hide the grade behind it,
   same reasoning as main > section's own scroll-margin-top in styles.css. */
#readinessResult { scroll-margin-top: var(--header-height, 70px); }
.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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
}
.signal-submit:hover:not(:disabled) { background: #4B41CC; }
/* Waiting, not broken. opacity 0.55 on the purple fill turned it into a pale
   cyan block that read as a stylesheet that had failed to load, which is a
   worse signal than disabled: it says the page is broken rather than that
   the button is waiting for you. Muted fill with real text instead. */
.signal-submit:disabled { background: #EDEBFB; color: #8B86B8; cursor: not-allowed; opacity: 1; }

/* --- How it works --- */
.how-it-works { padding: var(--sec-pad) 0; border-top: 1px solid var(--line-soft); }
.how-it-works .wrap { max-width: var(--landing-max); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
.how-step .how-num {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700;
  color: var(--signal); margin-bottom: 12px; font-variant-numeric:tabular-nums;}
.how-step h3 { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 18px; margin: 0 0 10px; }
.how-step p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

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

/* --- 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px;
}
.fact-card {
  background: #F7F6FD; color: #33364F; border: 1px solid #E8E5F9; border-radius: 10px; padding: 18px 20px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; line-height: 1.7;
  max-height: 320px; overflow-y: auto;
}
.fact-card .fk { color: var(--signal); }
.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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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(--signal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; font-variant-numeric:tabular-nums;}
.competitor-name { flex: 1; font-weight: 600; font-size: 14.5px; }
.competitor-freq { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11.5px; color: var(--muted); font-variant-numeric:tabular-nums;}

/* --- 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: #F7F6FD; border: 1px solid #E8E5F9; border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.fact-row .fk {
  flex-shrink: 0; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11px;
  font-weight: 700; color: var(--signal); background: rgba(91,79,224,0.12);
  border-radius: 4px; padding: 1px 6px; margin-top: 1px;
}
.fact-row .fv { color: #D8DCD9; }
.fact-row .fcat {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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(--signal);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; font-variant-numeric:tabular-nums;}
.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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 13px; color: var(--muted); margin-top: 24px; font-variant-numeric:tabular-nums;}
.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: var(--sec-pad) 0 calc(var(--sec-pad) + 12px); }
.pricing-section .wrap { max-width: var(--landing-max); }
.pricing-h2 { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 900; font-size: 26px; margin: 0 0 40px; }
/* Fill the unified grid; equal-height cards keep the two plans balanced even
   with different amounts of content (features flex:1 pushes each CTA down). */
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
/* The report card carries a comparison table and needs the room; the other two
   are feature lists and do not. Three even columns would starve the table to
   pay for space the agency card has no use for. */
.pricing-grid.three { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
/* "Custom" has no /mo to sit beside, so its qualifier is a line under the word
   rather than a tail after it: inline, it wrapped into a gap the width of the
   price. */
.pricing-price.is-custom span { display: block; margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 1080px) {
  .pricing-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  /* Odd one out spans the row rather than sitting beside a gap. */
  .pricing-grid.three > .pricing-card:last-child { grid-column: 1 / -1; }
}
.pricing-badge.muted { background: var(--muted); }
.preview-link {
  display: block; text-align: center; margin-top: 12px; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 11.5px; color: var(--muted); text-decoration: underline;
}
.pricing-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; padding: 34px 32px;
  display: flex; flex-direction: column; position: relative;
}
.pricing-card.featured { border: 2px solid var(--signal); box-shadow: 0 8px 24px rgba(91,79,224,0.14); }
.pricing-card.disabled { opacity: 0.7; }
.pricing-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--signal); color: #fff; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10.5px; font-weight: 700; padding: 5px 12px; border-radius: 20px; white-space: nowrap;
}
.pricing-tier-name { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.pricing-price { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 900; font-size: 30px; margin-bottom: 10px; color: var(--ink); }
.pricing-price span { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: #EFEDFB; color: var(--signal); border: none; border-radius: 8px;
  padding: 13px; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
}
.pricing-cta.primary { background: var(--signal); color: #fff; }
.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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.plan-toggle-btn.active { background: var(--signal); color: #fff; }
.save-tag { display: block; font-size: 9px; opacity: 0.8; }

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

/* --- Dashboard upsell (on report page) --- */
.dashboard-upsell {
  margin-top: 48px; padding: 28px; background: #F5F3FE; border: 1px solid #E4DFFB; border-radius: 14px; color: var(--ink); position: relative;
}
.upsell-badge {
  display: inline-block; background: rgba(91,79,224,0.12); color: var(--signal); font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-bottom: 14px;
}
.dashboard-upsell h3 { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 19px; margin: 0 0 10px; }
.dashboard-upsell p { font-size: 14px; color: var(--muted); 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12px; color: var(--muted); }

/* --- NPS feedback form --- */
.feedback-block { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.feedback-block h3 { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 14px; resize: vertical;
}
.feedback-submit {
  background: var(--signal); color: #fff; border: none; border-radius: 8px; padding: 11px 20px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
}
.continue-to-pricing:hover { background: rgba(91,79,224,0.08); }

/* --- Methodology disclosure --- */
.methodology-box {
  margin-top: 32px; padding: 18px 20px; background: var(--paper-dim); border-radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric:tabular-nums;}
.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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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; }
/* The menu was one flat list mixing a person's reports with their billing, so
   subscription management read as living inside "My Report". Two labelled
   groups instead: what they made, and what they pay for. */
.account-menu-label {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); padding: 8px 14px 4px; pointer-events: none;
}

/* ============================================================
   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: #fff;
  border: 1px solid var(--line-soft, #E8E5F9);
  box-shadow: 0 8px 32px rgba(91,79,224,0.08), 0 1px 2px rgba(91,79,224,0.04);
}

.wizard-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.wdb-value { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 13.5px; color: var(--ink); text-align: right; }
.wizard-question { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 14px; }
.wizard-note { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 900; font-size: 40px; color: var(--signal); line-height: 1; }
.preview-hero-label {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 900; font-size: 26px; color: var(--ink); line-height: 1; }
.chip-label { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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, #F5F3FE 0%, #ECE7FC 100%);
  border: 1.5px solid rgba(91,79,224,0.35);
  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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; line-height: 1.4; position: relative; }
.pwc-detail { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; color: var(--signal); position: relative; }
.pwc-cta {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 700; color: var(--signal);
  margin-top: 16px; position: relative;
}
/* Subscribe modal: monthly / annual plan toggle. */
.sub-plan-row { display: flex; gap: 10px; margin-top: 6px; }
.sub-plan {
  flex: 1; text-align: left; background: #fff; border: 1.5px solid #E8E5F9; border-radius: 12px;
  padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sub-plan:hover { border-color: #C7C2E8; }
.sub-plan.active { border-color: var(--signal); background: rgba(91,79,224,0.05); }
.sub-plan .sp-name { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.sub-plan .sp-save { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 8.5px; font-weight: 700; color: #147B5C; background: rgba(31,157,116,0.12); border-radius: 4px; padding: 1px 5px; margin-left: 3px; font-variant-numeric:tabular-nums;}
.sub-plan .sp-price { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 800; font-size: 20px; color: var(--ink); }
.sub-plan .sp-price small { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 12px; color: var(--muted); }

/* 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(91,79,224,0.15); color: var(--signal); font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric:tabular-nums;}
.pwc-board-name { width: 96px; height: 11px; border-radius: 3px; background: rgba(91,79,224,0.28); filter: blur(2px); flex-shrink: 0; }
.pwc-board-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(91,79,224,0.10); overflow: hidden; }
.pwc-board-bar span { display: block; height: 100%; border-radius: 4px; background: rgba(91,79,224,0.55); filter: blur(1px); }
.pwc-board-pct { width: 34px; height: 11px; border-radius: 3px; background: rgba(91,79,224,0.22); filter: blur(2px); flex-shrink: 0; }

/* ===== Homepage redesign: product-proof modules ===== */
.hero-grid { display:grid; grid-template-columns: 1fr 0.92fr; gap:44px; align-items:start; text-align:left; max-width:1120px; margin:0 auto; }
.hero-grid .hero-left h1 { text-align:left; margin-left:0; }
.hero-grid .hero-left .sub { margin-left:0; text-align:left; }
.hero-grid .signal-card { margin-inline:0; }
@media (max-width: 960px) { .hero-grid { grid-template-columns:1fr; } .hero-grid .hero-left h1, .hero-grid .hero-left .sub { text-align:center; margin-inline:auto; } .hero-grid .signal-card { margin-inline:auto; } }

/* ===== Hero Concept A: optimized for time-to-first-action, not just
   "above the fold". Scoped to .signal-hero--tool (index.html only) so
   fr.html's still-original hero and every other page's shared .signal-hero
   rules are untouched. Measured live against a real 1366x768 laptop window
   (Chrome's own chrome leaves ~625px of content height in the shortest
   case observed): the full interaction -- headline, sub, proof strip,
   input, market choice, CTA -- lands with real headroom to spare, without
   forcing the headline onto one line, shrinking the CTA, or touching
   input/body-text sizing. Only decorative gaps were trimmed below (hero
   top padding, the proof-strip-to-card gap, card top padding, CTA
   margin-top) -- h1/sub margins and the spacing between form fields are
   untouched, since those sit closer to reading rhythm. ===== */
.signal-hero--tool { padding-top: 28px; padding-bottom: 36px; }

.hero-grid .hero-left h1 { font-size: 32px; line-height: 1.2; margin: 0 0 14px; max-width: 480px; }
.hero-grid .hero-left .sub { font-size: 17px; line-height: 1.5; font-weight: 500; margin: 0 0 16px; max-width: 460px; color: var(--ink); }

/* A named operator and an inspectable method answer the two trust questions
   the product claims alone cannot: who stands behind this, and can I check how
   it is measured? Keep this text-only so it supports rather than competes with
   the company input and primary CTA. */
.hero-operator {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: -2px 0 13px; color: var(--muted); font-size: 13px; line-height: 1.45;
}
.hero-operator a { color: var(--signal); font-weight: 700; text-underline-offset: 3px; }

/* The separator between proof points was inline-styled to --line-soft, a BORDER
   token: against the page background it computes to ~2:1, so the dots read as a
   rendering gap rather than punctuation. */
.altlink-sep { color: var(--muted); opacity: 0.6; }

.hero-proof-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}

@media (max-width: 767px) {
  /* The mobile hero already uses every available line to keep the input and
     submit action in view. Founder and methodology remain available below. */
  .hero-operator { display: none; }
}

.hero-grid .signal-card { padding: 24px 28px 26px; }

/* Market choice as a segmented control, not a second form section: real
   radio inputs for native focus/keyboard/checked semantics, visually
   hidden in favor of a pill-styled label. Deliberately lightweight -- its
   only job is answering "which mode", never competing for attention with
   the CTA or, once Specific is picked, with .market-value-field below,
   which is the actual primary action at that point. */
.market-action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.market-action-row .measured-for {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
/* The track has to be darker than the card it sits on, not lighter.
   It was --paper-dim on white, which is almost the same colour, so the
   control read as a line of text and people walked past a choice that
   changes the measurement. Inverting it is the whole fix: a recessed grey
   track with a raised white pill is the shape everyone already knows a
   switch by, so it looks operable before anyone reads a word of it. */
.segmented {
  display: inline-flex; background: #E9EBF2; border: 1px solid #DCDFE9;
  border-radius: 18px; padding: 3px; gap: 2px;
}
.segmented input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.segmented label {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 15px; cursor: pointer;
  color: #55596B;                      /* readable against the track, 6.6:1 */
  transition: color .12s ease, background .12s ease, box-shadow .12s ease;
}
/* White pill, not a tint. Still not a solid --signal fill, which would read
   as a second button competing with the CTA below; the lift comes from the
   contrast with the track and a one-pixel shadow rather than from colour.
   Text stays the darkened purple, now at 7.4:1 on white instead of 4.31:1
   on a tint. */
.segmented input[type="radio"]:checked + label {
  background: #FFFFFF; color: #4A43D6;
  box-shadow: 0 1px 2px rgba(20,22,40,0.16), 0 0 0 0.5px rgba(20,22,40,0.04);
}
/* The unselected side has to look pressable, or the control still reads as
   one selected word next to some grey text. */
.segmented label:hover { color: var(--ink); }
.segmented input[type="radio"]:checked + label:hover { color: #4A43D6; }
.segmented input[type="radio"]:focus-visible + label { outline: 2px solid var(--signal); outline-offset: 2px; }

/* The dominant element once Specific is chosen: its own label (matching
   "Company or website" above it in weight), a stronger signal-coloured
   border so the eye lands here first, and a focus ring to confirm it's
   already focused (wireMarketChoiceToggle calls .focus() on reveal). */
.market-value-field { margin: 14px 0 0; }
.market-value-field label {
  display: block; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 6px;
}
.market-value-field input {
  width: 100%; background: #fff; border: 2px solid var(--signal); border-radius: 8px;
  padding: 13px 14px; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 16px; color: var(--ink); outline: none; box-sizing: border-box;
}
.market-value-field input:focus { box-shadow: 0 0 0 3px rgba(91,79,224,0.15); }

/* The hero product mock: a miniature of the real report */
.hero-mock { background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:22px 24px; box-shadow:0 24px 60px rgba(91,79,224,0.13); font-size:13px; }
.hm-tag { display:inline-block; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-soft); border-radius:99px; padding:2px 9px; margin-bottom:12px; }
.hm-score-row { display:flex; align-items:baseline; gap:10px; }
.hm-score { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight:900; font-size:40px; color:var(--ink); }
.hm-score small { font-size:15px; color:var(--muted); font-weight:400; }
.hm-ci { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.hm-ci-bar { position:relative; height:7px; background:var(--paper-dim); border-radius:99px; margin:8px 0 14px; }
.hm-ci-bar .range { position:absolute; left:27%; width:18%; top:0; bottom:0; background:rgba(91,79,224,.25); border-radius:99px; }
.hm-ci-bar .pt { position:absolute; left:36%; top:50%; width:13px; height:13px; transform:translate(-50%,-50%); background:var(--signal); border:2px solid #fff; border-radius:50%; }
.hm-label { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:12px 0 7px; }
.hm-comp { display:grid; grid-template-columns:1fr 74px 34px; gap:8px; align-items:center; padding:4px 0; font-size:12.5px; color:var(--ink); }
.hm-comp .bar { height:6px; background:var(--paper-dim); border-radius:99px; overflow:hidden; }
.hm-comp .bar i { display:block; height:100%; background:var(--signal); border-radius:99px; }
.hm-comp.you { font-weight:700; }
.hm-comp .pct { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:11px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums;}
.hm-quote { border-left:3px solid var(--line-soft); padding:6px 10px; font-size:11.5px; line-height:1.5; color:var(--muted); font-style:italic; margin-top:4px; }
.hm-rec { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--ink); margin-top:6px; }
.hm-rec .prio { flex:none; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:9px; font-weight:700; color:#fff; background:var(--signal); border-radius:5px; padding:2px 6px; margin-top:1px; }

/* Proof bar */
.proof-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1120px; margin:0 auto; padding:0 24px; }
.proof-item { text-align:center; padding:18px 10px; }
.proof-item b { display:block; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight:900; font-size:30px; color:var(--ink); font-variant-numeric:tabular-nums; }
.proof-item span { font-size:12.5px; color:var(--muted); line-height:1.4; display:block; margin-top:3px; }
@media (max-width:700px) { .proof-bar { grid-template-columns:repeat(2,1fr); } }

/* Interactive sample module */
.sample-mod { max-width:880px; margin:0 auto; background:#fff; border:1px solid var(--line-soft); border-radius:16px; overflow:hidden; }
.sm-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line-soft); background:#FCFBFF; flex-wrap:wrap; }
.sm-tag { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#B0562F; background:#FFF1EA; border-radius:99px; padding:3px 10px; }
.sm-tabs { display:flex; gap:4px; flex-wrap:wrap; }
/* Mobile: a tab bar means one row you move along. Wrapping it onto two rows
   breaks that promise, so on a phone it becomes a single scrollable row with
   snap points and a fade at the edge to say there is more. */
@media (max-width: 767px) {
  .sm-head { position: relative; }
  .sm-tabs {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-right: 26px; gap: 6px;
  }
  .sm-tabs::-webkit-scrollbar { display: none; }
  .sm-tab { flex: 0 0 auto; scroll-snap-align: start; }
  .sm-head::after {
    content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95));
  }
}
.sm-tab { border:none; background:none; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:11px; font-weight:700; color:var(--muted); padding:8px 12px; border-radius:8px; cursor:pointer; min-height:36px; }
.sm-tab.active { background:var(--signal); color:#fff; }
/* Was 270px, which left a visible empty block under the shortest pane. The
   panes now set their own height and the call to action below occupies what
   used to be dead space. */
.sm-body { padding:22px 24px; min-height:190px; }
.sm-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:18px 24px 20px; border-top:1px solid var(--line-soft); background:#FAF9FE; }
.sm-cta-copy b { display:block; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size:15px; font-weight:800; }
.sm-cta-copy span { display:block; font-size:13.5px; line-height:1.6; color:var(--muted); margin-top:3px; max-width:46ch; }
.sm-cta-btn { flex:none; background:var(--signal); color:#fff; text-decoration:none;
  font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size:14.5px; font-weight:700; padding:13px 22px; border-radius:11px; white-space:nowrap;
  transition:background .12s ease, transform .12s ease; }
.sm-cta-btn:hover { background:#4B41CC; transform:translateY(-1px); }
.sm-cta-btn:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }
@media (max-width:640px) { .sm-cta { flex-direction:column; align-items:stretch; }
  .sm-cta-btn { text-align:center; } }
@media (prefers-reduced-motion: reduce) { .sm-cta-btn { transition:none; } .sm-cta-btn:hover { transform:none; } }
.sm-pane { display:none; }
.sm-pane.active { display:block; }
.sm-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 6px; border-bottom:1px solid var(--paper-dim); font-size:14px; color:var(--ink); }
.sm-row:last-child { border-bottom:none; }
.sm-row button { flex:none; border:1px solid var(--line-soft); background:#fff; border-radius:8px; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:10.5px; font-weight:700; color:var(--signal); padding:7px 12px; cursor:pointer; min-height:34px; }
.sm-row button:hover { border-color:var(--signal); }
.sm-comp-row { display:grid; grid-template-columns:24px 1fr minmax(80px,160px) 48px; gap:10px; align-items:center; padding:10px 4px; font-size:14px; }
.sm-comp-row .bar { height:8px; background:var(--paper-dim); border-radius:99px; overflow:hidden; }
.sm-comp-row .bar i { display:block; height:100%; background:var(--signal); border-radius:99px; }
.sm-comp-row .pct { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:12px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums;}
.sm-note { font-size:12px; color:var(--muted); margin-top:12px; }
abbr.stat { text-decoration:underline dotted; cursor:help; }

/* Verification panel */
.verify-rows { max-width:680px; margin:0 auto; display:grid; gap:0; }
.verify-row { display:flex; align-items:center; gap:14px; padding:13px 6px; border-bottom:1px solid var(--paper-dim); font-size:14.5px; color:var(--ink); }
.verify-row:last-child { border-bottom:none; }
.verify-row .vk { flex:none; width:26px; height:26px; border-radius:8px; background:rgba(91,79,224,.1); color:#4A43D6; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.verify-row a { color:var(--signal); font-weight:600; text-decoration:none; }
.verify-row .sp { margin-left:auto; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:11px; color:var(--muted); text-align:right; }
@media (max-width:560px) { .verify-row .sp { display:none; } }

/* Stepper */
.stepper { display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:980px; margin:34px auto 0; position:relative; }
.stepper::before { content:""; position:absolute; top:17px; left:16%; right:16%; height:2px; background:var(--line-soft); }
.step-node { position:relative; text-align:center; padding:0 18px; }
.step-node .dot { position:relative; z-index:1; width:36px; height:36px; margin:0 auto 12px; border-radius:50%; background:var(--signal); color:#fff; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.step-node h3 { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:16px; margin:0 0 6px; color:var(--ink); }
.step-node p { font-size:13.5px; color:var(--muted); line-height:1.5; margin:0; }
@media (max-width:700px) { .stepper { grid-template-columns:1fr; gap:22px; } .stepper::before { display:none; } }

/* Language switch: a utility control, not a nav category */
.lang-switch {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11.5px; font-weight: 700;
  color: var(--muted); text-decoration: none; border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 6px 9px; letter-spacing: 0.04em;
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink); }


/* ===== Auto flow: staged progress + Report Ready screen ===== */
.auto-bar{height:6px;border-radius:99px;background:var(--line-soft,#E8E5F9);overflow:hidden;}
.auto-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--signal,#5B4FE0);}
.auto-progress-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 1px 8px;font-size:12.5px;color:var(--muted,#6B7089);}
.auto-progress-meta b{font-variant-numeric:tabular-nums;color:var(--signal,#5B4FE0);font-size:12px;}
.as-row{display:flex;align-items:center;gap:11px;padding:6px 2px;font-size:13.5px;color:var(--muted,#6B7089);transition:color .3s;}
.as-row .as-ic{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-soft,#E8E5F9);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;transition:background .3s,border-color .3s;}
.as-row.active{color:var(--ink,#272A42);font-weight:600;}
.as-row.active .as-ic{border-color:var(--signal,#5B4FE0);animation:asPulse 1.1s ease-in-out infinite;}
.as-row.done{color:var(--ink,#272A42);}
.as-row.done .as-ic{background:var(--signal,#5B4FE0);border-color:var(--signal,#5B4FE0);}
.as-row.done .as-ic::after{content:"\2713";}
@keyframes asPulse{0%,100%{box-shadow:0 0 0 0 rgba(91,79,224,.35);}50%{box-shadow:0 0 0 5px rgba(91,79,224,0);}}
@media (prefers-reduced-motion: reduce){.as-row.active .as-ic{animation:none;}.auto-bar i{transition:none !important;}}
.ready-flag{display:flex;align-items:center;justify-content:center;gap:8px;font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#16764A;}
.ready-dot{width:8px;height:8px;border-radius:50%;background:#1E8E5A;}
.ready-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.ready-stat{background:#faf9fe;border:1px solid var(--line-soft,#E8E5F9);border-radius:13px;padding:13px 12px;text-align:center;}
.ready-stat b{display:block;font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;font-weight:900;font-size:21px;color:var(--ink,#272A42);line-height:1.15;overflow-wrap:anywhere;}
.ready-stat b small{font-size:12px;color:var(--muted,#6B7089);font-weight:700;}
.ready-stat > span{display:block;font-size:11.5px;color:var(--muted,#6B7089);margin-top:3px;line-height:1.35;}
.ready-score b{color:var(--signal,#5B4FE0);font-size:27px;}
.ready-score b span{font-size:inherit;color:inherit;}
.ready-locked{margin:12px 0 0;border:1px solid var(--line-soft,#E8E5F9);border-radius:13px;padding:13px 15px;background:#fff;}
.rl-head{font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6B7089);margin-bottom:8px;}
.ready-locked ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;}
.ready-locked li{position:relative;padding-left:20px;font-size:12.5px;color:var(--ink,#272A42);line-height:1.45;}
.ready-locked li::before{content:"\1F512";position:absolute;left:0;top:1px;font-size:10.5px;}
.ready-addons{display:flex;flex-wrap:wrap;gap:7px;}
.ready-addon{display:flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line,#DEDBEF);border-radius:99px;font-size:12.5px;font-weight:600;cursor:pointer;}
.ready-addon input{width:14px;height:14px;accent-color:var(--signal,#5B4FE0);}
.ready-addon b{font-weight:700;font-size:11.5px;}
@media (max-width:560px){.ready-locked ul{grid-template-columns:1fr;}}

/* ===== Free vs full comparison ===== */
.pc-wrap { margin: 14px 0 6px; }
.pricing-compare { width: 100%; border-collapse: collapse; font-size: 13px; }
/* The reset sets overflow-wrap:anywhere globally, and it inherits into these
   cells. In a narrower column that broke the headings mid-word: "ANALYSI / S".
   A column heading may wrap between words and nowhere else. */
.pricing-compare td { overflow-wrap: normal; }
.pricing-compare .pc-head td { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; text-align: center; }
.pricing-compare .pc-head td:first-child { text-align: left; }
.pricing-compare tr:not(.pc-head) { border-top: 1px solid var(--paper-dim); }
.pricing-compare .pc-feat { padding: 8px 4px; }
.pricing-compare .pc-free { text-align: center; color: var(--muted); }
.pricing-compare .pc-full { text-align: center; }
.pricing-compare .pc-full.is-hero { color: var(--signal); font-weight: 700; }

/* Mobile: a two-axis matrix is the wrong shape for a 390px screen, because the
   reader has to hold a column heading in their head while scanning a row. Each
   feature becomes one block that reads linearly instead, with the two values
   labelled in place. Same content, no cross-referencing. */
@media (max-width: 767px) {
  .pricing-compare, .pricing-compare tbody, .pricing-compare tr, .pricing-compare td { display: block; }
  .pricing-compare .pc-head { display: none; }
  .pricing-compare tr:not(.pc-head) { padding: 12px 0 10px; }
  .pricing-compare .pc-feat { padding: 0 0 8px; font-weight: 600; font-size: 14.5px; }
  .pricing-compare .pc-free, .pricing-compare .pc-full {
    display: flex; align-items: baseline; justify-content: space-between;
    text-align: left; padding: 3px 0; font-size: 14px;
  }
  .pricing-compare .pc-free::before, .pricing-compare .pc-full::before {
    content: attr(data-c);
    font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin-right: 14px;
  }

/* ...but stacking six features into label/value pairs made this card 980px, or
   1.4 phone screens, for 55 words. The card's job is to sell the full report,
   and the free-vs-paid split is already made three other places on the page.
   Drop the free column here and each feature becomes a single line. */
  .pc-wrap::before {
    content: 'What the full report includes';
    display: block; font-size: 12.5px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
    padding-bottom: 4px;
  }
  .pricing-compare .pc-free { display: none; }
  .pricing-compare tr:not(.pc-head) {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 9px 0;
  }
  .pricing-compare .pc-feat { padding: 0; font-weight: 500; font-size: 14px; flex: 1 1 auto; }
  .pricing-compare .pc-full {
    display: block; flex: 0 0 auto; text-align: right; padding: 0;
    font-size: 14px; white-space: nowrap;
  }
  .pricing-compare .pc-full::before { content: none; }
}

/* The score is one token and must never break: at 390px "56/100" was wrapping
   after "56/10", dropping a lone "0" onto the next line in the sample module. */
.hm-score, .hm-score small { white-space: nowrap; }
.hm-score-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

/* ===== No frosted glass on mobile =====
   Every translucent-plus-blur surface becomes a solid one. Frosted glass is an
   iOS material idiom: it works over photography, where there is colour to
   diffuse. Over a white page it costs a compositing layer on every frame to
   render, in effect, white, and the translucency is what lets scrolled content
   smear through in the first place.

   This block lives at the end of signal.css on purpose. signal.css loads after
   styles.css, and .signal-card and .frosted-card are declared here, so an
   equal-specificity override placed in styles.css would silently lose.

   A solid white card on a white page has no edge of its own, so the hairline
   border stops being white and starts doing real work. */
@media (max-width: 767px) {
  .signal-card,
  .frosted-card {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line-soft, #E8E5F9);
  }
  .mobile-cta {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ===== Signed-in header =====
   The marketing header and the app header have different jobs and cannot share
   a layout. Signed in there is already a primary action, "Run another report",
   and an account menu carrying a full email address, so adding the homepage nav
   on top left more in the bar than would fit. Everything shrank rather than
   overflowing, which is why the links broke inside words ("RESEARC H") and the
   address wrapped mid-domain.

   The rule here is simply that nothing in a nav bar may shrink. Links keep
   their width, the CTA keeps its width, and the one element with unbounded
   content, the email, is the one thing allowed to give: it truncates. */
.nav-links-app a { white-space: nowrap; }

/* Desktop keeps the action in the bar, so the in-menu duplicate stays off.
   Ranged against the mobile rule rather than relying on source order. */
@media (min-width: 768px) {
  .nav-cta-m { display: none; }
}

@media (max-width: 767px) {
  /* The bar was 130px on a phone: a full email address and a wide CTA sharing
     a row with the logo and the menu button, wrapping onto two lines. The
     action moves into the menu, the same way the language switch did, and the
     address gets a hard ceiling. Logo, who you are, and the menu. */
  nav.site-nav .nav-cta-persistent { display: none; }
  .account-menu-trigger { max-width: 148px; }
  .account-menu-trigger > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .nav-links.is-open .nav-cta-m { margin-top: 6px; }
}

@media (min-width: 768px) {
  nav.site-nav .nav-links-app {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.2vw, 34px);
    flex: 0 1 auto;
    margin-right: auto;      /* links sit with the logo; account and CTA go right */
    margin-left: clamp(22px, 3vw, 44px);
  }
  nav.site-nav .nav-links-app a { flex: 0 0 auto; }
  nav.site-nav .brand { flex: 0 0 auto; }
  nav.site-nav .nav-persistent { flex: 0 0 auto; gap: 12px; }
  nav.site-nav .nav-cta-persistent { flex: 0 0 auto; white-space: nowrap; }

  /* An email is the only thing in this bar whose length we do not control, so
     it is the only thing that truncates. */
  .account-menu-trigger {
    max-width: 220px;
    white-space: nowrap;
  }
  .account-menu-trigger > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* ===== Reports list =====
   The score leads every row, because the score is the product. Everything else
   on the row exists to tell you whose score it is and how much to trust it, so
   nothing else competes: one weight for the name, one muted line for the
   domain and the date, and the verdict in the report's own words. No card
   chrome, just hairlines, because thirteen bordered boxes read as thirteen
   equally important things and they are not. */
/* A global `section { padding: var(--space-5) 0 }` puts 95px above and below
   every section element on the site. These are list groups inside a page, not
   page sections, so they opt out: without this each one carried 190px of
   invisible padding and the page read as broken spacing. */
.rp-sec, .rp-strip { padding: 0; }
.rp-sec { margin: 0 0 40px; }
.rp-sec-h {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.rp-sec-h span {
  font-variant-numeric: tabular-nums; color: var(--muted);
  background: var(--paper-dim, #F4F2FB); border-radius: 999px; padding: 2px 8px; font-size: 10.5px;
}
/* An unexplained sort order reads as no order at all. */
.rp-sec-h em {
  font-style: normal; font-weight: 500; letter-spacing: 0.02em;
  text-transform: none; color: var(--muted); font-size: 11px; margin-left: 2px;
}
.rp-sec-alert .rp-sec-h { color: #B3261E; }

/* A table, not a stack of blocks. The columns are fixed so that scores align
   under scores and dates under dates down the whole list, which is the entire
   reason an enterprise tool is worth its width: the eye compares by position
   without reading. Denser vertically too, because a row that is 145px tall
   shows four sites per screen and a person with eleven wants to see eleven. */
.rp-row {
  display: grid;
  /* Every column fixed except the sentence. Each row is its own grid, so grid
     alignment does not carry between them: one `auto` column was enough to put
     the date at x=1010 on one row and x=1286 on another, which is exactly the
     failure a table exists to prevent. The action column is wide enough for
     three buttons and stays that wide on rows with two. */
  grid-template-columns: 128px 250px minmax(0, 1fr) 104px 150px;
  gap: 26px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft, #E8E5F9);
}
.rp-c { min-width: 0; }

/* The header is what tells a reader this is a table and not a list of cards. */
.rp-head-row {
  padding: 0 0 8px;
  border-top: 0;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
}
.rp-head-row:hover { background: none; }

.rp-c-when { font-size: 12.5px; color: var(--muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.rp-host { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.rp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rp-dash { color: var(--line-soft, #E8E5F9); }
.rp-c-found p {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink);
  /* Two lines keeps rows a uniform height so the columns stay a grid. The full
     sentence is one click away in the report itself. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rp-c-do { display: flex; gap: 7px; align-items: flex-start; }

/* Clamping is fine for a verdict, whose full text is one click away in the
   report. It is not fine for an error: the two-line clamp was cutting off
   "click Retry to try again", which is the only part of the message that tells
   the reader what to do. Errors are never truncated. */
.rp-row-alert .rp-c-found p { -webkit-line-clamp: unset; display: block; overflow: visible; }
/* Inherits the table grid now. Distinguished by colour and a marker, not by a
   different layout. */
.rp-alarm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-top: 2px;
  background: #FBE9E7; color: #B3261E; font-weight: 800; font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
}

/* ===== The score as a position =====
   One axis, shared by every row, so the numbers line up down the page as a
   distribution: weak sites sit left, strong sit right, and the spread between
   them is legible before a word is read. The number rides its own tick, which
   is why the column is wide: the horizontal position is the data, not
   decoration, and squeezing it would destroy the information. */
.rp-plot { position: relative; height: 40px; margin-top: 1px; }
.rp-plot-track {
  position: absolute; left: 0; right: 0; top: 27px; height: 3px; border-radius: 2px;
  background: var(--paper-dim, #F0EEFA);
}
.rp-plot-fill {
  position: absolute; left: 0; top: 27px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(91,79,224,0.25), var(--signal, #5B4FE0));
}
.rp-plot-tick {
  position: absolute; top: 23px; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: var(--signal, #5B4FE0); box-shadow: 0 0 0 3px #fff;
}
/* The median of the reader's own sites, so a score is read against their
   portfolio rather than against nothing. */
.rp-plot-med {
  position: absolute; top: 21px; width: 1px; height: 15px; background: var(--line-soft, #E8E5F9);
}
.rp-plot-num {
  position: absolute; top: 0; white-space: nowrap; display: flex; align-items: baseline; gap: 6px;
}
.rp-plot-num b {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.rp-plot-none .rp-plot-track { background: var(--paper-dim, #F4F2FB); }

.rp-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rp-row h3 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.rp-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }


.rp-tag {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--paper-dim, #F4F2FB); color: var(--muted);
}
.rp-tag.on { background: #E7F5EF; color: #0E7C55; }
.rp-tag.warn { background: #FDF1E7; color: #9A5B18; }
.rp-tag.alert { background: #FBE9E7; color: #B3261E; }

.rp-acts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.rp-act {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 12.5px; font-weight: 650; text-decoration: none; cursor: pointer;
  padding: 10px 15px; border-radius: 9px; border: 1px solid var(--line-soft, #E8E5F9);
  background: #fff; color: var(--ink); min-height: 40px;
}
.rp-act:hover { border-color: #C7C2E8; }
.rp-act.primary { background: var(--signal); color: #fff; border-color: var(--signal); }

/* Not started: one line each. These are things not yet done, not failures, so
   they get no border, no badge and no colour. */
.rp-thins { border-top: 1px solid var(--line-soft, #E8E5F9); }
.rp-thin {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline; padding: 13px 0;
  border-bottom: 1px solid var(--line-soft, #E8E5F9);
  text-decoration: none; color: inherit;
}
.rp-thin:hover .rp-thin-go { color: var(--signal, #5B4FE0); }
/* No separate host column when the name is the host. */
.rp-thin-solo { grid-template-columns: minmax(0, 1fr) auto; }
.rp-thin-name { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-thin-host { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-thin-go { font-size: 12.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }

@media (max-width: 767px) {
  /* Column alignment is worth nothing at 390px: five columns become five
     unreadable slivers. The row reverts to a block, and the axis takes the full
     width above the name where it keeps its meaning. */
  .rp-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; }
  .rp-head-row { display: none; }
  .rp-c-when { padding-top: 0; margin-top: 2px; }
  .rp-c-found p { -webkit-line-clamp: 3; }
  .rp-c-do { flex-wrap: wrap; margin-top: 10px; }
  .rp-plot { margin-top: 0; margin-bottom: 4px; }
  .rp-plot-num b { font-size: 24px; }
  .rp-row-alert { grid-template-columns: minmax(0, 1fr); }
  .rp-acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .rp-act { flex: 1 1 auto; min-height: 44px; }
  /* Three columns of truncated text in 390px is three unreadable columns. */
  .rp-thin { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .rp-thin-host { grid-column: 1; font-size: 12.5px; }
  .rp-thin-go { grid-row: 1 / span 2; align-self: center; }
}

/* ===== States the page did not have ===== */
.rp-row { transition: background-color 120ms ease; }
@media (hover: hover) {
  .rp-row:hover { background: rgba(91, 79, 224, 0.022); }
}
.rp-act:focus-visible,
.rp-thin:focus-visible {
  outline: 2px solid var(--signal, #5B4FE0);
  outline-offset: 2px;
  border-radius: 9px;
}

/* A skeleton says "your rows are coming and here is their shape". A spinner
   says "something is happening somewhere". */
.rp-skel { border-top: 1px solid var(--line-soft, #E8E5F9); padding: 26px 0; display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 22px; }
.rp-skel span { display: block; height: 11px; border-radius: 5px; background: var(--paper-dim, #F0EEFA); }
.rp-skel .a { height: 27px; width: 62%; }
.rp-skel .b { width: 46%; margin-bottom: 10px; height: 15px; }
.rp-skel .c { width: 88%; }
.rp-skel .d { width: 64%; margin-top: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .rp-skel span { animation: rpPulse 1.4s ease-in-out infinite; }
  .rp-skel:nth-child(2) span { animation-delay: 0.12s; }
  .rp-skel:nth-child(3) span { animation-delay: 0.24s; }
}
@keyframes rpPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ===== Empty state =====
   Shows the thing it is empty of, at full size, so a first-time reader learns
   what a score even looks like before deciding whether to want one. */
.rp-empty { max-width: 560px; padding: 8px 0 20px; }
.rp-empty-demo {
  border: 1px solid var(--line-soft, #E8E5F9); border-radius: 14px; padding: 18px 22px 16px;
  margin-bottom: 26px; background: #fff;
}
.rp-empty-demo p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.rp-empty h3 { font-size: 20px; font-weight: 750; margin: 0 0 8px; letter-spacing: -0.015em; }
.rp-empty > p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 20px; max-width: 54ch; }
.rp-empty .rp-act { display: inline-flex; }

@media (max-width: 767px) {
  .rp-strip { margin-bottom: 34px; }
  .rp-strip-foot { flex-wrap: wrap; }
  .rp-strip-worst { order: 3; flex: 1 0 100%; margin-top: 4px; }
  .rp-skel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ===== Facets: the overview and the filter, same object =====
   Built as an index rather than a row of pills. Each cell is a count over its
   label, cells share a baseline grid, and the active one is marked with a rule
   underneath rather than a filled shape, so the numbers stay the loudest thing
   in the band. The point is that every figure here is named: the chart this
   replaced showed unlabelled dots that overlapped each other. */
.rp-facets {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border-top: 1px solid var(--line-soft, #E8E5F9);
  border-bottom: 1px solid var(--line-soft, #E8E5F9);
  margin: 0 0 40px;
}
.rp-fx {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
  /* Tight on purpose: the content column is ~790px and five cells at 30px
     trailing space each orphan the last one onto its own line, which destroys
     the single shared baseline that makes the band readable as one index. */
  padding: 13px 20px 12px 0; margin-right: 20px; position: relative;
  display: flex; flex-direction: column; gap: 3px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
}
/* Hairline between cells, drawn rather than bordered so the last cell has none. */
.rp-fx + .rp-fx::before {
  content: ''; position: absolute; left: -20px; top: 11px; bottom: 11px;
  width: 1px; background: var(--line-soft, #E8E5F9);
}
.rp-fx-n {
  font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.rp-fx-l {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.rp-fx::after {
  content: ''; position: absolute; left: 0; right: 20px; bottom: -1px; height: 2px;
  background: var(--signal, #5B4FE0); opacity: 0; transition: opacity 120ms ease;
}
.rp-fx.is-on::after { opacity: 1; }
.rp-fx.is-on .rp-fx-l { color: var(--signal, #5B4FE0); }
@media (hover: hover) {
  .rp-fx:not(:disabled):not(.is-on):hover .rp-fx-n { color: var(--signal, #5B4FE0); }
}
.rp-fx:disabled { cursor: default; }
.rp-fx:disabled .rp-fx-n { color: var(--line-soft, #E8E5F9); }
.rp-fx:disabled .rp-fx-l { color: var(--line-soft, #E8E5F9); }
.rp-fx:focus-visible { outline: 2px solid var(--signal, #5B4FE0); outline-offset: -2px; }

.rp-nofilter { font-size: 14.5px; color: var(--muted); padding: 8px 0 40px; }
.rp-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--signal, #5B4FE0); font-weight: 650; text-decoration: underline;
}

@media (max-width: 767px) {
  /* Five cells will not sit on a 390px row, and wrapping them into a ragged
     block loses the shared baseline that makes them readable as a set. They
     scroll instead, keeping one line and one rhythm. */
  .rp-facets {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; margin-bottom: 30px;
  }
  .rp-facets::-webkit-scrollbar { display: none; }
  .rp-fx { flex: 0 0 auto; scroll-snap-align: start; padding-right: 22px; margin-right: 22px; }
  .rp-fx + .rp-fx::before { left: -22px; }
  .rp-fx::after { right: 22px; }
  .rp-fx-n { font-size: 21px; }
}

/* ===== Row menu =====
   One visible action per row and the rest behind a dots trigger: the standard
   pattern, and the only place to put things a person needs rarely but badly,
   like renaming a site. It also gave the actions column back 122px, which went
   to the verdict. */
.rp-menu { position: relative; }
.rp-dots {
  width: 38px; padding: 0; font-size: 17px; line-height: 1; letter-spacing: 0.06em;
  color: var(--muted);
}
.rp-dots[aria-expanded="true"] { border-color: #C7C2E8; color: var(--ink); }
.rp-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 208px; padding: 6px;
  background: #fff; border: 1px solid var(--line-soft, #E8E5F9); border-radius: 11px;
  box-shadow: 0 12px 32px rgba(21, 19, 42, 0.13);
  display: flex; flex-direction: column;
}
.rp-menu-pop[hidden] { display: none; }
.rp-menu-pop a, .rp-menu-pop button {
  appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; text-decoration: none; padding: 9px 11px; border-radius: 7px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 13.5px; font-weight: 550; color: var(--ink); white-space: nowrap;
}
.rp-menu-pop a:hover, .rp-menu-pop button:hover { background: var(--paper-dim, #F4F2FB); }
.rp-menu-pop a:focus-visible, .rp-menu-pop button:focus-visible {
  outline: 2px solid var(--signal, #5B4FE0); outline-offset: -2px;
}
.rp-menu-pop .danger { color: #B3261E; }
.rp-menu-pop .danger:hover { background: #FBE9E7; }
.rp-menu-sep { height: 1px; background: var(--line-soft, #E8E5F9); margin: 5px 4px; }

/* Editing happens in the row, at the size and position of the thing being
   edited, rather than in a system dialog dropped over the page. */
.rp-edit {
  font: inherit; color: inherit; width: 100%; max-width: 100%;
  padding: 2px 6px; margin: -2px -6px;
  border: 1px solid var(--signal, #5B4FE0); border-radius: 6px;
  background: #fff; outline: none;
}

@media (max-width: 767px) {
  /* Anchored to the right edge of the row rather than the trigger, so a 208px
     menu cannot hang off a 390px screen. */
  .rp-menu-pop { right: 0; left: auto; min-width: 200px; }
  .rp-dots { width: 44px; }
}

/* ===== Run history =====
   Grouping the list by website made every run except the newest unreachable.
   The count is the way back in: it opens each run, dated and scored, with the
   step between consecutive runs rather than only the distance from the newest,
   because "did the change I made work" is answered by the step. */
.rp-runs {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--signal, #5B4FE0); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.rp-runs[aria-expanded="true"] { color: var(--ink); }
.rp-runs:focus-visible { outline: 2px solid var(--signal, #5B4FE0); outline-offset: 2px; border-radius: 3px; }

.rp-hist[hidden] { display: none; }
.rp-hist { border-top: 1px solid var(--line-soft, #E8E5F9); }
.rp-hist-inner {
  /* Indented to the Site column so the panel reads as belonging to that row
     rather than as a new section. */
  margin-left: 154px; padding: 12px 0 16px;
}
.rp-hist-head {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 6px;
}
.rp-hist-row {
  display: grid; grid-template-columns: 54px 108px 1fr auto; gap: 16px; align-items: baseline;
  padding: 8px 10px 8px 0; text-decoration: none; color: inherit; border-radius: 7px;
}
@media (hover: hover) { .rp-hist-row:hover { background: var(--paper-dim, #F4F2FB); } }
.rp-hist-row:focus-visible { outline: 2px solid var(--signal, #5B4FE0); outline-offset: -2px; }
.rp-hist-score {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 17px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums;
}
.rp-hist-when { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-hist-first { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.rp-hist-go { font-size: 12.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.rp-hist-row:hover .rp-hist-go { color: var(--signal, #5B4FE0); }

@media (max-width: 767px) {
  .rp-hist-inner { margin-left: 0; }
  .rp-hist-row { grid-template-columns: 46px 1fr auto; gap: 10px; }
  .rp-hist-when { grid-column: 2; }
  .rp-hist-move { grid-column: 2; }
}

/* Shown only to someone who already has reports. It replaces a pitch they do
   not need with the one thing they came back for: where their work is. */
.hero-returning {
  font-size: 13.5px; line-height: 1.55; color: var(--ink);
  background: var(--paper-dim, #F4F2FB);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 14px;
}
.hero-returning a { color: var(--signal, #5B4FE0); font-weight: 650; text-decoration: none; }
.hero-returning a:hover { text-decoration: underline; }

/* ===== See-it-before-you-pay band =====
   Two products, two real screenshots, one row. Cards are whole-card links so
   the target is the card, not a 14px text link, which is what made these
   demos easy to miss (and impossible to hit on a phone). */
/* styles.css makes every direct child of <main> a full-viewport flex section;
   without opting out this band renders a screen tall with the cards floating in
   the middle of it. Every other band on this page opts out the same way. */
.demo-band { padding: clamp(38px,5vw,60px) 0; border-top: 1px solid var(--line-soft,#E8E5F9);
  min-height: 0; justify-content: flex-start; }
/* Header shares the grid's measure so it centres over the cards rather than
   over the wider page wrap. */
.demo-band .signal-eyebrow, .demo-h { max-width: 1000px; margin-inline: auto; }
.demo-h { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-weight: 900; font-size: clamp(22px,3vw,30px); text-align: center; margin: 6px auto 26px; }
/* --- Sample screens: three cards on one scrollable line --- */
.demo-band .signal-eyebrow, .demo-h, .demo-rail, .demo-nav { max-width: 1240px; }
/* grid-auto-flow:column keeps them on one line at every width; the rail scrolls
   instead of wrapping, and snapping means a swipe lands on a card rather than
   between two. */
.demo-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(340px, 78%), 1fr);
  gap: 20px; margin: 0 auto; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* Room for the cards' hover lift and shadow, which a scroll container clips. */
  padding: 6px 4px 14px; margin-inline: -4px;
}
.demo-rail::-webkit-scrollbar { display: none; }
/* The last card snaps to the end, not to its own start. Without a snap point at
   the maximum scroll, mandatory snapping drags the rail back to the previous
   card every time the end is reached, and the last card can never be read. */
.demo-card:last-child { scroll-snap-align: end; }
.demo-rail:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 18px; }
.demo-card { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line-soft,#E8E5F9); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.demo-card:hover { border-color: #C7C2E8; box-shadow: 0 10px 30px rgba(63,53,184,.10); transform: translateY(-2px); }
.demo-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.demo-shot { background: #FAFBFF; border-bottom: 1px solid var(--line-soft,#E8E5F9); overflow: hidden; }
.demo-shot img { display: block; width: 100%; height: auto; }
.demo-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.demo-kicker { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); }
.demo-card h3 { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 18px; font-weight: 800; margin: 6px 0 8px; }
.demo-card p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
.demo-cta { margin-top: auto; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 14px; font-weight: 700; color: var(--signal); }

/* Shown only when the rail actually has somewhere to scroll. */
.demo-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px auto 0; }
.demo-nav[hidden] { display: none; }
.demo-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-soft,#E8E5F9);
  background: #fff; color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: border-color .14s ease, opacity .14s ease; }
.demo-arrow:hover:not(:disabled) { border-color: #C7C2E8; }
.demo-arrow:disabled { opacity: .32; cursor: default; }
.demo-arrow:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.demo-dots { display: flex; gap: 6px; }
.demo-dots i { width: 6px; height: 6px; border-radius: 50%; background: #CFCADF; transition: background-color .14s ease, width .14s ease; }
.demo-dots i.on { width: 18px; border-radius: 3px; background: var(--signal); }

/* The minimum is what makes this a rail rather than a squeeze: without a floor,
   grid shares the port between the three columns and there is nothing left to
   scroll. The min() keeps that floor from exceeding the port on a phone. */
@media (max-width: 900px) { .demo-rail { gap: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .demo-card, .demo-arrow, .demo-dots i { transition: none; }
  .demo-card:hover { transform: none; }
  .demo-rail { scroll-behavior: auto; }
}

/* --- Dashboard upsell (on report page) --- */
.dashboard-upsell {
  margin-top: 48px; padding: 28px; background: #F5F3FE; border: 1px solid #E4DFFB; border-radius: 14px; color: var(--ink); position: relative;
}
.upsell-badge {
  display: inline-block; background: rgba(91,79,224,0.12); color: var(--signal); font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-bottom: 14px;
}
.dashboard-upsell h3 { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 19px; margin: 0 0 10px; }
.dashboard-upsell p { font-size: 14px; color: var(--muted); 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12px; color: var(--muted); }

/* --- NPS feedback form --- */
.feedback-block { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.feedback-block h3 { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 14px; resize: vertical;
}
.feedback-submit {
  background: var(--signal); color: #fff; border: none; border-radius: 8px; padding: 11px 20px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
}
.continue-to-pricing:hover { background: rgba(91,79,224,0.08); }

/* --- Methodology disclosure --- */
.methodology-box {
  margin-top: 32px; padding: 18px 20px; background: var(--paper-dim); border-radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric:tabular-nums;}
.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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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; }
/* The menu was one flat list mixing a person's reports with their billing, so
   subscription management read as living inside "My Report". Two labelled
   groups instead: what they made, and what they pay for. */
.account-menu-label {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); padding: 8px 14px 4px; pointer-events: none;
}

/* ============================================================
   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: #fff;
  border: 1px solid var(--line-soft, #E8E5F9);
  box-shadow: 0 8px 32px rgba(91,79,224,0.08), 0 1px 2px rgba(91,79,224,0.04);
}

.wizard-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.wdb-value { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 13.5px; color: var(--ink); text-align: right; }
.wizard-question { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 14px; }
.wizard-note { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 900; font-size: 40px; color: var(--signal); line-height: 1; }
.preview-hero-label {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 900; font-size: 26px; color: var(--ink); line-height: 1; }
.chip-label { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; 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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, 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, #F5F3FE 0%, #ECE7FC 100%);
  border: 1.5px solid rgba(91,79,224,0.35);
  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: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; line-height: 1.4; position: relative; }
.pwc-detail { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; color: var(--signal); position: relative; }
.pwc-cta {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 700; color: var(--signal);
  margin-top: 16px; position: relative;
}
/* Subscribe modal: monthly / annual plan toggle. */
.sub-plan-row { display: flex; gap: 10px; margin-top: 6px; }
.sub-plan {
  flex: 1; text-align: left; background: #fff; border: 1.5px solid #E8E5F9; border-radius: 12px;
  padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sub-plan:hover { border-color: #C7C2E8; }
.sub-plan.active { border-color: var(--signal); background: rgba(91,79,224,0.05); }
.sub-plan .sp-name { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.sub-plan .sp-save { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 8.5px; font-weight: 700; color: #147B5C; background: rgba(31,157,116,0.12); border-radius: 4px; padding: 1px 5px; margin-left: 3px; font-variant-numeric:tabular-nums;}
.sub-plan .sp-price { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 800; font-size: 20px; color: var(--ink); }
.sub-plan .sp-price small { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 12px; color: var(--muted); }

/* 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(91,79,224,0.15); color: var(--signal); font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric:tabular-nums;}
.pwc-board-name { width: 96px; height: 11px; border-radius: 3px; background: rgba(91,79,224,0.28); filter: blur(2px); flex-shrink: 0; }
.pwc-board-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(91,79,224,0.10); overflow: hidden; }
.pwc-board-bar span { display: block; height: 100%; border-radius: 4px; background: rgba(91,79,224,0.55); filter: blur(1px); }
.pwc-board-pct { width: 34px; height: 11px; border-radius: 3px; background: rgba(91,79,224,0.22); filter: blur(2px); flex-shrink: 0; }

/* ===== Homepage redesign: product-proof modules ===== */
.hero-grid { display:grid; grid-template-columns: 1fr 0.92fr; gap:44px; align-items:start; text-align:left; max-width:1120px; margin:0 auto; }
.hero-grid .hero-left h1 { text-align:left; margin-left:0; }
.hero-grid .hero-left .sub { margin-left:0; text-align:left; }
.hero-grid .signal-card { margin-inline:0; }
@media (max-width: 960px) { .hero-grid { grid-template-columns:1fr; } .hero-grid .hero-left h1, .hero-grid .hero-left .sub { text-align:center; margin-inline:auto; } .hero-grid .signal-card { margin-inline:auto; } }

/* ===== Hero Concept A: optimized for time-to-first-action, not just
   "above the fold". Scoped to .signal-hero--tool (index.html only) so
   fr.html's still-original hero and every other page's shared .signal-hero
   rules are untouched. Measured live against a real 1366x768 laptop window
   (Chrome's own chrome leaves ~625px of content height in the shortest
   case observed): the full interaction -- headline, sub, proof strip,
   input, market choice, CTA -- lands with real headroom to spare, without
   forcing the headline onto one line, shrinking the CTA, or touching
   input/body-text sizing. Only decorative gaps were trimmed below (hero
   top padding, the proof-strip-to-card gap, card top padding, CTA
   margin-top) -- h1/sub margins and the spacing between form fields are
   untouched, since those sit closer to reading rhythm. ===== */
.signal-hero--tool { padding-top: 28px; padding-bottom: 36px; }

.hero-grid .hero-left h1 { font-size: 32px; line-height: 1.2; margin: 0 0 14px; max-width: 480px; }
.hero-grid .hero-left .sub { font-size: 17px; line-height: 1.5; font-weight: 500; margin: 0 0 16px; max-width: 460px; color: var(--ink); }

/* The separator between proof points was inline-styled to --line-soft, a BORDER
   token: against the page background it computes to ~2:1, so the dots read as a
   rendering gap rather than punctuation. */
.altlink-sep { color: var(--muted); opacity: 0.6; }

.hero-proof-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}

.hero-grid .signal-card { padding: 24px 28px 26px; }

/* Market choice as a segmented control, not a second form section: real
   radio inputs for native focus/keyboard/checked semantics, visually
   hidden in favor of a pill-styled label. Deliberately lightweight -- its
   only job is answering "which mode", never competing for attention with
   the CTA or, once Specific is picked, with .market-value-field below,
   which is the actual primary action at that point. */
.market-action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.market-action-row .measured-for {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
/* The track has to be darker than the card it sits on, not lighter.
   It was --paper-dim on white, which is almost the same colour, so the
   control read as a line of text and people walked past a choice that
   changes the measurement. Inverting it is the whole fix: a recessed grey
   track with a raised white pill is the shape everyone already knows a
   switch by, so it looks operable before anyone reads a word of it. */
.segmented {
  display: inline-flex; background: #E9EBF2; border: 1px solid #DCDFE9;
  border-radius: 18px; padding: 3px; gap: 2px;
}
.segmented input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.segmented label {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 15px; cursor: pointer;
  color: #55596B;                      /* readable against the track, 6.6:1 */
  transition: color .12s ease, background .12s ease, box-shadow .12s ease;
}
/* A tinted fill, not a solid one -- a solid --signal fill here would read
   as a second button competing with the CTA and the dominant input below. */
.segmented input[type="radio"]:checked + label {
  background: #FFFFFF; color: #4A43D6;
  box-shadow: 0 1px 2px rgba(20,22,40,0.16), 0 0 0 0.5px rgba(20,22,40,0.04);
}
.segmented label:hover { color: var(--ink); }
.segmented input[type="radio"]:checked + label:hover { color: #4A43D6; }
.segmented input[type="radio"]:focus-visible + label { outline: 2px solid var(--signal); outline-offset: 2px; }

/* The dominant element once Specific is chosen: its own label (matching
   "Company or website" above it in weight), a stronger signal-coloured
   border so the eye lands here first, and a focus ring to confirm it's
   already focused (wireMarketChoiceToggle calls .focus() on reveal). */
.market-value-field { margin: 14px 0 0; }
.market-value-field label {
  display: block; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 6px;
}
.market-value-field input {
  width: 100%; background: #fff; border: 2px solid var(--signal); border-radius: 8px;
  padding: 13px 14px; font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 16px; color: var(--ink); outline: none; box-sizing: border-box;
}
.market-value-field input:focus { box-shadow: 0 0 0 3px rgba(91,79,224,0.15); }

/* The hero product mock: a miniature of the real report */
.hero-mock { background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:22px 24px; box-shadow:0 24px 60px rgba(91,79,224,0.13); font-size:13px; }
.hm-tag { display:inline-block; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-soft); border-radius:99px; padding:2px 9px; margin-bottom:12px; }
.hm-score-row { display:flex; align-items:baseline; gap:10px; }
.hm-score { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight:900; font-size:40px; color:var(--ink); }
.hm-score small { font-size:15px; color:var(--muted); font-weight:400; }
.hm-ci { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.hm-ci-bar { position:relative; height:7px; background:var(--paper-dim); border-radius:99px; margin:8px 0 14px; }
.hm-ci-bar .range { position:absolute; left:27%; width:18%; top:0; bottom:0; background:rgba(91,79,224,.25); border-radius:99px; }
.hm-ci-bar .pt { position:absolute; left:36%; top:50%; width:13px; height:13px; transform:translate(-50%,-50%); background:var(--signal); border:2px solid #fff; border-radius:50%; }
.hm-label { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:12px 0 7px; }
.hm-comp { display:grid; grid-template-columns:1fr 74px 34px; gap:8px; align-items:center; padding:4px 0; font-size:12.5px; color:var(--ink); }
.hm-comp .bar { height:6px; background:var(--paper-dim); border-radius:99px; overflow:hidden; }
.hm-comp .bar i { display:block; height:100%; background:var(--signal); border-radius:99px; }
.hm-comp.you { font-weight:700; }
.hm-comp .pct { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:11px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums;}
.hm-quote { border-left:3px solid var(--line-soft); padding:6px 10px; font-size:11.5px; line-height:1.5; color:var(--muted); font-style:italic; margin-top:4px; }
.hm-rec { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--ink); margin-top:6px; }
.hm-rec .prio { flex:none; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:9px; font-weight:700; color:#fff; background:var(--signal); border-radius:5px; padding:2px 6px; margin-top:1px; }

/* Proof bar */
.proof-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1120px; margin:0 auto; padding:0 24px; }
.proof-item { text-align:center; padding:18px 10px; }
.proof-item b { display:block; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight:900; font-size:30px; color:var(--ink); font-variant-numeric:tabular-nums; }
.proof-item span { font-size:12.5px; color:var(--muted); line-height:1.4; display:block; margin-top:3px; }
@media (max-width:700px) { .proof-bar { grid-template-columns:repeat(2,1fr); } }

/* Interactive sample module */
.sample-mod { max-width:880px; margin:0 auto; background:#fff; border:1px solid var(--line-soft); border-radius:16px; overflow:hidden; }
.sm-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line-soft); background:#FCFBFF; flex-wrap:wrap; }
.sm-tag { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#B0562F; background:#FFF1EA; border-radius:99px; padding:3px 10px; }
.sm-tabs { display:flex; gap:4px; flex-wrap:wrap; }
/* Mobile: a tab bar means one row you move along. Wrapping it onto two rows
   breaks that promise, so on a phone it becomes a single scrollable row with
   snap points and a fade at the edge to say there is more. */
@media (max-width: 767px) {
  .sm-head { position: relative; }
  .sm-tabs {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-right: 26px; gap: 6px;
  }
  .sm-tabs::-webkit-scrollbar { display: none; }
  .sm-tab { flex: 0 0 auto; scroll-snap-align: start; }
  .sm-head::after {
    content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95));
  }
}
.sm-tab { border:none; background:none; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:11px; font-weight:700; color:var(--muted); padding:8px 12px; border-radius:8px; cursor:pointer; min-height:36px; }
.sm-tab.active { background:var(--signal); color:#fff; }
/* Was 270px, which left a visible empty block under the shortest pane. The
   panes now set their own height and the call to action below occupies what
   used to be dead space. */
.sm-body { padding:22px 24px; min-height:190px; }
.sm-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:18px 24px 20px; border-top:1px solid var(--line-soft); background:#FAF9FE; }
.sm-cta-copy b { display:block; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size:15px; font-weight:800; }
.sm-cta-copy span { display:block; font-size:13.5px; line-height:1.6; color:var(--muted); margin-top:3px; max-width:46ch; }
.sm-cta-btn { flex:none; background:var(--signal); color:#fff; text-decoration:none;
  font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size:14.5px; font-weight:700; padding:13px 22px; border-radius:11px; white-space:nowrap;
  transition:background .12s ease, transform .12s ease; }
.sm-cta-btn:hover { background:#4B41CC; transform:translateY(-1px); }
.sm-cta-btn:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }
@media (max-width:640px) { .sm-cta { flex-direction:column; align-items:stretch; }
  .sm-cta-btn { text-align:center; } }
@media (prefers-reduced-motion: reduce) { .sm-cta-btn { transition:none; } .sm-cta-btn:hover { transform:none; } }
.sm-pane { display:none; }
.sm-pane.active { display:block; }
.sm-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 6px; border-bottom:1px solid var(--paper-dim); font-size:14px; color:var(--ink); }
.sm-row:last-child { border-bottom:none; }
.sm-row button { flex:none; border:1px solid var(--line-soft); background:#fff; border-radius:8px; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:10.5px; font-weight:700; color:var(--signal); padding:7px 12px; cursor:pointer; min-height:34px; }
.sm-row button:hover { border-color:var(--signal); }
.sm-comp-row { display:grid; grid-template-columns:24px 1fr minmax(80px,160px) 48px; gap:10px; align-items:center; padding:10px 4px; font-size:14px; }
.sm-comp-row .bar { height:8px; background:var(--paper-dim); border-radius:99px; overflow:hidden; }
.sm-comp-row .bar i { display:block; height:100%; background:var(--signal); border-radius:99px; }
.sm-comp-row .pct { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:12px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums;}
.sm-note { font-size:12px; color:var(--muted); margin-top:12px; }
abbr.stat { text-decoration:underline dotted; cursor:help; }

/* Verification panel */
.verify-rows { max-width:680px; margin:0 auto; display:grid; gap:0; }
.verify-row { display:flex; align-items:center; gap:14px; padding:13px 6px; border-bottom:1px solid var(--paper-dim); font-size:14.5px; color:var(--ink); }
.verify-row:last-child { border-bottom:none; }
.verify-row .vk { flex:none; width:26px; height:26px; border-radius:8px; background:rgba(91,79,224,.1); color:#4A43D6; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.verify-row a { color:var(--signal); font-weight:600; text-decoration:none; }
.verify-row .sp { margin-left:auto; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:11px; color:var(--muted); text-align:right; }
@media (max-width:560px) { .verify-row .sp { display:none; } }

/* Stepper */
.stepper { display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:980px; margin:34px auto 0; position:relative; }
.stepper::before { content:""; position:absolute; top:17px; left:16%; right:16%; height:2px; background:var(--line-soft); }
.step-node { position:relative; text-align:center; padding:0 18px; }
.step-node .dot { position:relative; z-index:1; width:36px; height:36px; margin:0 auto 12px; border-radius:50%; background:var(--signal); color:#fff; font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.step-node h3 { font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size:16px; margin:0 0 6px; color:var(--ink); }
.step-node p { font-size:13.5px; color:var(--muted); line-height:1.5; margin:0; }
@media (max-width:700px) { .stepper { grid-template-columns:1fr; gap:22px; } .stepper::before { display:none; } }

/* Language switch: a utility control, not a nav category */
.lang-switch {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11.5px; font-weight: 700;
  color: var(--muted); text-decoration: none; border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 6px 9px; letter-spacing: 0.04em;
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink); }


/* ===== Auto flow: staged progress + Report Ready screen ===== */
.auto-bar{height:6px;border-radius:99px;background:var(--line-soft,#E8E5F9);overflow:hidden;}
.auto-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--signal,#5B4FE0);}
.as-row{display:flex;align-items:center;gap:11px;padding:6px 2px;font-size:13.5px;color:var(--muted,#6B7089);transition:color .3s;}
.as-row .as-ic{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-soft,#E8E5F9);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;transition:background .3s,border-color .3s;}
.as-row.active{color:var(--ink,#272A42);font-weight:600;}
.as-row.active .as-ic{border-color:var(--signal,#5B4FE0);animation:asPulse 1.1s ease-in-out infinite;}
.as-row.done{color:var(--ink,#272A42);}
.as-row.done .as-ic{background:var(--signal,#5B4FE0);border-color:var(--signal,#5B4FE0);}
.as-row.done .as-ic::after{content:"\2713";}
@keyframes asPulse{0%,100%{box-shadow:0 0 0 0 rgba(91,79,224,.35);}50%{box-shadow:0 0 0 5px rgba(91,79,224,0);}}
@media (prefers-reduced-motion: reduce){.as-row.active .as-ic{animation:none;}.auto-bar i{transition:none !important;}}
.ready-flag{display:flex;align-items:center;justify-content:center;gap:8px;font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#16764A;}
.ready-dot{width:8px;height:8px;border-radius:50%;background:#1E8E5A;}
.ready-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.ready-stat{background:#faf9fe;border:1px solid var(--line-soft,#E8E5F9);border-radius:13px;padding:13px 12px;text-align:center;}
.ready-stat b{display:block;font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;font-weight:900;font-size:21px;color:var(--ink,#272A42);line-height:1.15;overflow-wrap:anywhere;}
.ready-stat b small{font-size:12px;color:var(--muted,#6B7089);font-weight:700;}
.ready-stat > span{display:block;font-size:11.5px;color:var(--muted,#6B7089);margin-top:3px;line-height:1.35;}
.ready-score b{color:var(--signal,#5B4FE0);font-size:27px;}
.ready-score b span{font-size:inherit;color:inherit;}
.ready-locked{margin:12px 0 0;border:1px solid var(--line-soft,#E8E5F9);border-radius:13px;padding:13px 15px;background:#fff;}
.rl-head{font-family:-apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6B7089);margin-bottom:8px;}
.ready-locked ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;}
.ready-locked li{position:relative;padding-left:20px;font-size:12.5px;color:var(--ink,#272A42);line-height:1.45;}
.ready-locked li::before{content:"\1F512";position:absolute;left:0;top:1px;font-size:10.5px;}
.ready-addons{display:flex;flex-wrap:wrap;gap:7px;}
.ready-addon{display:flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line,#DEDBEF);border-radius:99px;font-size:12.5px;font-weight:600;cursor:pointer;}
.ready-addon input{width:14px;height:14px;accent-color:var(--signal,#5B4FE0);}
.ready-addon b{font-weight:700;font-size:11.5px;}
@media (max-width:560px){.ready-locked ul{grid-template-columns:1fr;}}

/* ===== Free vs full comparison ===== */
.pc-wrap { margin: 14px 0 6px; }
.pricing-compare { width: 100%; border-collapse: collapse; font-size: 13px; }
/* The reset sets overflow-wrap:anywhere globally, and it inherits into these
   cells. In a narrower column that broke the headings mid-word: "ANALYSI / S".
   A column heading may wrap between words and nowhere else. */
.pricing-compare td { overflow-wrap: normal; }
.pricing-compare .pc-head td { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; text-align: center; }
.pricing-compare .pc-head td:first-child { text-align: left; }
.pricing-compare tr:not(.pc-head) { border-top: 1px solid var(--paper-dim); }
.pricing-compare .pc-feat { padding: 8px 4px; }
.pricing-compare .pc-free { text-align: center; color: var(--muted); }
.pricing-compare .pc-full { text-align: center; }
.pricing-compare .pc-full.is-hero { color: var(--signal); font-weight: 700; }

/* Mobile: a two-axis matrix is the wrong shape for a 390px screen, because the
   reader has to hold a column heading in their head while scanning a row. Each
   feature becomes one block that reads linearly instead, with the two values
   labelled in place. Same content, no cross-referencing. */
@media (max-width: 767px) {
  .pricing-compare, .pricing-compare tbody, .pricing-compare tr, .pricing-compare td { display: block; }
  .pricing-compare .pc-head { display: none; }
  .pricing-compare tr:not(.pc-head) { padding: 12px 0 10px; }
  .pricing-compare .pc-feat { padding: 0 0 8px; font-weight: 600; font-size: 14.5px; }
  .pricing-compare .pc-free, .pricing-compare .pc-full {
    display: flex; align-items: baseline; justify-content: space-between;
    text-align: left; padding: 3px 0; font-size: 14px;
  }
  .pricing-compare .pc-free::before, .pricing-compare .pc-full::before {
    content: attr(data-c);
    font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin-right: 14px;
  }

/* ...but stacking six features into label/value pairs made this card 980px, or
   1.4 phone screens, for 55 words. The card's job is to sell the full report,
   and the free-vs-paid split is already made three other places on the page.
   Drop the free column here and each feature becomes a single line. */
  .pc-wrap::before {
    content: 'What the full report includes';
    display: block; font-size: 12.5px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
    padding-bottom: 4px;
  }
  .pricing-compare .pc-free { display: none; }
  .pricing-compare tr:not(.pc-head) {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 9px 0;
  }
  .pricing-compare .pc-feat { padding: 0; font-weight: 500; font-size: 14px; flex: 1 1 auto; }
  .pricing-compare .pc-full {
    display: block; flex: 0 0 auto; text-align: right; padding: 0;
    font-size: 14px; white-space: nowrap;
  }
  .pricing-compare .pc-full::before { content: none; }
}

/* The score is one token and must never break: at 390px "56/100" was wrapping
   after "56/10", dropping a lone "0" onto the next line in the sample module. */
.hm-score, .hm-score small { white-space: nowrap; }
.hm-score-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

/* ===== No frosted glass on mobile =====
   Every translucent-plus-blur surface becomes a solid one. Frosted glass is an
   iOS material idiom: it works over photography, where there is colour to
   diffuse. Over a white page it costs a compositing layer on every frame to
   render, in effect, white, and the translucency is what lets scrolled content
   smear through in the first place.

   This block lives at the end of signal.css on purpose. signal.css loads after
   styles.css, and .signal-card and .frosted-card are declared here, so an
   equal-specificity override placed in styles.css would silently lose.

   A solid white card on a white page has no edge of its own, so the hairline
   border stops being white and starts doing real work. */
@media (max-width: 767px) {
  .signal-card,
  .frosted-card {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line-soft, #E8E5F9);
  }
  .mobile-cta {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ===== Signed-in header =====
   The marketing header and the app header have different jobs and cannot share
   a layout. Signed in there is already a primary action, "Run another report",
   and an account menu carrying a full email address, so adding the homepage nav
   on top left more in the bar than would fit. Everything shrank rather than
   overflowing, which is why the links broke inside words ("RESEARC H") and the
   address wrapped mid-domain.

   The rule here is simply that nothing in a nav bar may shrink. Links keep
   their width, the CTA keeps its width, and the one element with unbounded
   content, the email, is the one thing allowed to give: it truncates. */
.nav-links-app a { white-space: nowrap; }

/* Desktop keeps the action in the bar, so the in-menu duplicate stays off.
   Ranged against the mobile rule rather than relying on source order. */
@media (min-width: 768px) {
  .nav-cta-m { display: none; }
}

@media (max-width: 767px) {
  /* The bar was 130px on a phone: a full email address and a wide CTA sharing
     a row with the logo and the menu button, wrapping onto two lines. The
     action moves into the menu, the same way the language switch did, and the
     address gets a hard ceiling. Logo, who you are, and the menu. */
  nav.site-nav .nav-cta-persistent { display: none; }
  .account-menu-trigger { max-width: 148px; }
  .account-menu-trigger > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .nav-links.is-open .nav-cta-m { margin-top: 6px; }
}

@media (min-width: 768px) {
  nav.site-nav .nav-links-app {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.2vw, 34px);
    flex: 0 1 auto;
    margin-right: auto;      /* links sit with the logo; account and CTA go right */
    margin-left: clamp(22px, 3vw, 44px);
  }
  nav.site-nav .nav-links-app a { flex: 0 0 auto; }
  nav.site-nav .brand { flex: 0 0 auto; }
  nav.site-nav .nav-persistent { flex: 0 0 auto; gap: 12px; }
  nav.site-nav .nav-cta-persistent { flex: 0 0 auto; white-space: nowrap; }

  /* An email is the only thing in this bar whose length we do not control, so
     it is the only thing that truncates. */
  .account-menu-trigger {
    max-width: 220px;
    white-space: nowrap;
  }
  .account-menu-trigger > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* ===== Reports list =====
   The score leads every row, because the score is the product. Everything else
   on the row exists to tell you whose score it is and how much to trust it, so
   nothing else competes: one weight for the name, one muted line for the
   domain and the date, and the verdict in the report's own words. No card
   chrome, just hairlines, because thirteen bordered boxes read as thirteen
   equally important things and they are not. */
/* A global `section { padding: var(--space-5) 0 }` puts 95px above and below
   every section element on the site. These are list groups inside a page, not
   page sections, so they opt out: without this each one carried 190px of
   invisible padding and the page read as broken spacing. */
.rp-sec, .rp-strip { padding: 0; }
.rp-sec { margin: 0 0 40px; }
.rp-sec-h {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.rp-sec-h span {
  font-variant-numeric: tabular-nums; color: var(--muted);
  background: var(--paper-dim, #F4F2FB); border-radius: 999px; padding: 2px 8px; font-size: 10.5px;
}
/* An unexplained sort order reads as no order at all. */
.rp-sec-h em {
  font-style: normal; font-weight: 500; letter-spacing: 0.02em;
  text-transform: none; color: var(--muted); font-size: 11px; margin-left: 2px;
}
.rp-sec-alert .rp-sec-h { color: #B3261E; }

/* A table, not a stack of blocks. The columns are fixed so that scores align
   under scores and dates under dates down the whole list, which is the entire
   reason an enterprise tool is worth its width: the eye compares by position
   without reading. Denser vertically too, because a row that is 145px tall
   shows four sites per screen and a person with eleven wants to see eleven. */
.rp-row {
  display: grid;
  /* Every column fixed except the sentence. Each row is its own grid, so grid
     alignment does not carry between them: one `auto` column was enough to put
     the date at x=1010 on one row and x=1286 on another, which is exactly the
     failure a table exists to prevent. The action column is wide enough for
     three buttons and stays that wide on rows with two. */
  grid-template-columns: 128px 250px minmax(0, 1fr) 104px 150px;
  gap: 26px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft, #E8E5F9);
}
.rp-c { min-width: 0; }

/* The header is what tells a reader this is a table and not a list of cards. */
.rp-head-row {
  padding: 0 0 8px;
  border-top: 0;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
}
.rp-head-row:hover { background: none; }

.rp-c-when { font-size: 12.5px; color: var(--muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.rp-host { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.rp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rp-dash { color: var(--line-soft, #E8E5F9); }
.rp-c-found p {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink);
  /* Two lines keeps rows a uniform height so the columns stay a grid. The full
     sentence is one click away in the report itself. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rp-c-do { display: flex; gap: 7px; align-items: flex-start; }

/* Clamping is fine for a verdict, whose full text is one click away in the
   report. It is not fine for an error: the two-line clamp was cutting off
   "click Retry to try again", which is the only part of the message that tells
   the reader what to do. Errors are never truncated. */
.rp-row-alert .rp-c-found p { -webkit-line-clamp: unset; display: block; overflow: visible; }
/* Inherits the table grid now. Distinguished by colour and a marker, not by a
   different layout. */
.rp-alarm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-top: 2px;
  background: #FBE9E7; color: #B3261E; font-weight: 800; font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
}

/* ===== The score as a position =====
   One axis, shared by every row, so the numbers line up down the page as a
   distribution: weak sites sit left, strong sit right, and the spread between
   them is legible before a word is read. The number rides its own tick, which
   is why the column is wide: the horizontal position is the data, not
   decoration, and squeezing it would destroy the information. */
.rp-plot { position: relative; height: 40px; margin-top: 1px; }
.rp-plot-track {
  position: absolute; left: 0; right: 0; top: 27px; height: 3px; border-radius: 2px;
  background: var(--paper-dim, #F0EEFA);
}
.rp-plot-fill {
  position: absolute; left: 0; top: 27px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(91,79,224,0.25), var(--signal, #5B4FE0));
}
.rp-plot-tick {
  position: absolute; top: 23px; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: var(--signal, #5B4FE0); box-shadow: 0 0 0 3px #fff;
}
/* The median of the reader's own sites, so a score is read against their
   portfolio rather than against nothing. */
.rp-plot-med {
  position: absolute; top: 21px; width: 1px; height: 15px; background: var(--line-soft, #E8E5F9);
}
.rp-plot-num {
  position: absolute; top: 0; white-space: nowrap; display: flex; align-items: baseline; gap: 6px;
}
.rp-plot-num b {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.rp-plot-none .rp-plot-track { background: var(--paper-dim, #F4F2FB); }

.rp-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rp-row h3 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.rp-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }


.rp-tag {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--paper-dim, #F4F2FB); color: var(--muted);
}
.rp-tag.on { background: #E7F5EF; color: #0E7C55; }
.rp-tag.warn { background: #FDF1E7; color: #9A5B18; }
.rp-tag.alert { background: #FBE9E7; color: #B3261E; }

.rp-acts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.rp-act {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 12.5px; font-weight: 650; text-decoration: none; cursor: pointer;
  padding: 10px 15px; border-radius: 9px; border: 1px solid var(--line-soft, #E8E5F9);
  background: #fff; color: var(--ink); min-height: 40px;
}
.rp-act:hover { border-color: #C7C2E8; }
.rp-act.primary { background: var(--signal); color: #fff; border-color: var(--signal); }

/* Not started: one line each. These are things not yet done, not failures, so
   they get no border, no badge and no colour. */
.rp-thins { border-top: 1px solid var(--line-soft, #E8E5F9); }
.rp-thin {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline; padding: 13px 0;
  border-bottom: 1px solid var(--line-soft, #E8E5F9);
  text-decoration: none; color: inherit;
}
.rp-thin:hover .rp-thin-go { color: var(--signal, #5B4FE0); }
/* No separate host column when the name is the host. */
.rp-thin-solo { grid-template-columns: minmax(0, 1fr) auto; }
.rp-thin-name { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-thin-host { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-thin-go { font-size: 12.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }

@media (max-width: 767px) {
  /* Column alignment is worth nothing at 390px: five columns become five
     unreadable slivers. The row reverts to a block, and the axis takes the full
     width above the name where it keeps its meaning. */
  .rp-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; }
  .rp-head-row { display: none; }
  .rp-c-when { padding-top: 0; margin-top: 2px; }
  .rp-c-found p { -webkit-line-clamp: 3; }
  .rp-c-do { flex-wrap: wrap; margin-top: 10px; }
  .rp-plot { margin-top: 0; margin-bottom: 4px; }
  .rp-plot-num b { font-size: 24px; }
  .rp-row-alert { grid-template-columns: minmax(0, 1fr); }
  .rp-acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .rp-act { flex: 1 1 auto; min-height: 44px; }
  /* Three columns of truncated text in 390px is three unreadable columns. */
  .rp-thin { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .rp-thin-host { grid-column: 1; font-size: 12.5px; }
  .rp-thin-go { grid-row: 1 / span 2; align-self: center; }
}

/* ===== States the page did not have ===== */
.rp-row { transition: background-color 120ms ease; }
@media (hover: hover) {
  .rp-row:hover { background: rgba(91, 79, 224, 0.022); }
}
.rp-act:focus-visible,
.rp-thin:focus-visible {
  outline: 2px solid var(--signal, #5B4FE0);
  outline-offset: 2px;
  border-radius: 9px;
}

/* A skeleton says "your rows are coming and here is their shape". A spinner
   says "something is happening somewhere". */
.rp-skel { border-top: 1px solid var(--line-soft, #E8E5F9); padding: 26px 0; display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 22px; }
.rp-skel span { display: block; height: 11px; border-radius: 5px; background: var(--paper-dim, #F0EEFA); }
.rp-skel .a { height: 27px; width: 62%; }
.rp-skel .b { width: 46%; margin-bottom: 10px; height: 15px; }
.rp-skel .c { width: 88%; }
.rp-skel .d { width: 64%; margin-top: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .rp-skel span { animation: rpPulse 1.4s ease-in-out infinite; }
  .rp-skel:nth-child(2) span { animation-delay: 0.12s; }
  .rp-skel:nth-child(3) span { animation-delay: 0.24s; }
}
@keyframes rpPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ===== Empty state =====
   Shows the thing it is empty of, at full size, so a first-time reader learns
   what a score even looks like before deciding whether to want one. */
.rp-empty { max-width: 560px; padding: 8px 0 20px; }
.rp-empty-demo {
  border: 1px solid var(--line-soft, #E8E5F9); border-radius: 14px; padding: 18px 22px 16px;
  margin-bottom: 26px; background: #fff;
}
.rp-empty-demo p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.rp-empty h3 { font-size: 20px; font-weight: 750; margin: 0 0 8px; letter-spacing: -0.015em; }
.rp-empty > p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 20px; max-width: 54ch; }
.rp-empty .rp-act { display: inline-flex; }

@media (max-width: 767px) {
  .rp-strip { margin-bottom: 34px; }
  .rp-strip-foot { flex-wrap: wrap; }
  .rp-strip-worst { order: 3; flex: 1 0 100%; margin-top: 4px; }
  .rp-skel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ===== Facets: the overview and the filter, same object =====
   Built as an index rather than a row of pills. Each cell is a count over its
   label, cells share a baseline grid, and the active one is marked with a rule
   underneath rather than a filled shape, so the numbers stay the loudest thing
   in the band. The point is that every figure here is named: the chart this
   replaced showed unlabelled dots that overlapped each other. */
.rp-facets {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border-top: 1px solid var(--line-soft, #E8E5F9);
  border-bottom: 1px solid var(--line-soft, #E8E5F9);
  margin: 0 0 40px;
}
.rp-fx {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
  /* Tight on purpose: the content column is ~790px and five cells at 30px
     trailing space each orphan the last one onto its own line, which destroys
     the single shared baseline that makes the band readable as one index. */
  padding: 13px 20px 12px 0; margin-right: 20px; position: relative;
  display: flex; flex-direction: column; gap: 3px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
}
/* Hairline between cells, drawn rather than bordered so the last cell has none. */
.rp-fx + .rp-fx::before {
  content: ''; position: absolute; left: -20px; top: 11px; bottom: 11px;
  width: 1px; background: var(--line-soft, #E8E5F9);
}
.rp-fx-n {
  font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.rp-fx-l {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.rp-fx::after {
  content: ''; position: absolute; left: 0; right: 20px; bottom: -1px; height: 2px;
  background: var(--signal, #5B4FE0); opacity: 0; transition: opacity 120ms ease;
}
.rp-fx.is-on::after { opacity: 1; }
.rp-fx.is-on .rp-fx-l { color: var(--signal, #5B4FE0); }
@media (hover: hover) {
  .rp-fx:not(:disabled):not(.is-on):hover .rp-fx-n { color: var(--signal, #5B4FE0); }
}
.rp-fx:disabled { cursor: default; }
.rp-fx:disabled .rp-fx-n { color: var(--line-soft, #E8E5F9); }
.rp-fx:disabled .rp-fx-l { color: var(--line-soft, #E8E5F9); }
.rp-fx:focus-visible { outline: 2px solid var(--signal, #5B4FE0); outline-offset: -2px; }

.rp-nofilter { font-size: 14.5px; color: var(--muted); padding: 8px 0 40px; }
.rp-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--signal, #5B4FE0); font-weight: 650; text-decoration: underline;
}

@media (max-width: 767px) {
  /* Five cells will not sit on a 390px row, and wrapping them into a ragged
     block loses the shared baseline that makes them readable as a set. They
     scroll instead, keeping one line and one rhythm. */
  .rp-facets {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; margin-bottom: 30px;
  }
  .rp-facets::-webkit-scrollbar { display: none; }
  .rp-fx { flex: 0 0 auto; scroll-snap-align: start; padding-right: 22px; margin-right: 22px; }
  .rp-fx + .rp-fx::before { left: -22px; }
  .rp-fx::after { right: 22px; }
  .rp-fx-n { font-size: 21px; }
}

/* ===== Row menu =====
   One visible action per row and the rest behind a dots trigger: the standard
   pattern, and the only place to put things a person needs rarely but badly,
   like renaming a site. It also gave the actions column back 122px, which went
   to the verdict. */
.rp-menu { position: relative; }
.rp-dots {
  width: 38px; padding: 0; font-size: 17px; line-height: 1; letter-spacing: 0.06em;
  color: var(--muted);
}
.rp-dots[aria-expanded="true"] { border-color: #C7C2E8; color: var(--ink); }
.rp-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 208px; padding: 6px;
  background: #fff; border: 1px solid var(--line-soft, #E8E5F9); border-radius: 11px;
  box-shadow: 0 12px 32px rgba(21, 19, 42, 0.13);
  display: flex; flex-direction: column;
}
.rp-menu-pop[hidden] { display: none; }
.rp-menu-pop a, .rp-menu-pop button {
  appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; text-decoration: none; padding: 9px 11px; border-radius: 7px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 13.5px; font-weight: 550; color: var(--ink); white-space: nowrap;
}
.rp-menu-pop a:hover, .rp-menu-pop button:hover { background: var(--paper-dim, #F4F2FB); }
.rp-menu-pop a:focus-visible, .rp-menu-pop button:focus-visible {
  outline: 2px solid var(--signal, #5B4FE0); outline-offset: -2px;
}
.rp-menu-pop .danger { color: #B3261E; }
.rp-menu-pop .danger:hover { background: #FBE9E7; }
.rp-menu-sep { height: 1px; background: var(--line-soft, #E8E5F9); margin: 5px 4px; }

/* Editing happens in the row, at the size and position of the thing being
   edited, rather than in a system dialog dropped over the page. */
.rp-edit {
  font: inherit; color: inherit; width: 100%; max-width: 100%;
  padding: 2px 6px; margin: -2px -6px;
  border: 1px solid var(--signal, #5B4FE0); border-radius: 6px;
  background: #fff; outline: none;
}

@media (max-width: 767px) {
  /* Anchored to the right edge of the row rather than the trigger, so a 208px
     menu cannot hang off a 390px screen. */
  .rp-menu-pop { right: 0; left: auto; min-width: 200px; }
  .rp-dots { width: 44px; }
}

/* ===== Run history =====
   Grouping the list by website made every run except the newest unreachable.
   The count is the way back in: it opens each run, dated and scored, with the
   step between consecutive runs rather than only the distance from the newest,
   because "did the change I made work" is answered by the step. */
.rp-runs {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--signal, #5B4FE0); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.rp-runs[aria-expanded="true"] { color: var(--ink); }
.rp-runs:focus-visible { outline: 2px solid var(--signal, #5B4FE0); outline-offset: 2px; border-radius: 3px; }

.rp-hist[hidden] { display: none; }
.rp-hist { border-top: 1px solid var(--line-soft, #E8E5F9); }
.rp-hist-inner {
  /* Indented to the Site column so the panel reads as belonging to that row
     rather than as a new section. */
  margin-left: 154px; padding: 12px 0 16px;
}
.rp-hist-head {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 6px;
}
.rp-hist-row {
  display: grid; grid-template-columns: 54px 108px 1fr auto; gap: 16px; align-items: baseline;
  padding: 8px 10px 8px 0; text-decoration: none; color: inherit; border-radius: 7px;
}
@media (hover: hover) { .rp-hist-row:hover { background: var(--paper-dim, #F4F2FB); } }
.rp-hist-row:focus-visible { outline: 2px solid var(--signal, #5B4FE0); outline-offset: -2px; }
.rp-hist-score {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 17px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums;
}
.rp-hist-when { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-hist-first { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.rp-hist-go { font-size: 12.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.rp-hist-row:hover .rp-hist-go { color: var(--signal, #5B4FE0); }

@media (max-width: 767px) {
  .rp-hist-inner { margin-left: 0; }
  .rp-hist-row { grid-template-columns: 46px 1fr auto; gap: 10px; }
  .rp-hist-when { grid-column: 2; }
  .rp-hist-move { grid-column: 2; }
}

/* Shown only to someone who already has reports. It replaces a pitch they do
   not need with the one thing they came back for: where their work is. */
.hero-returning {
  font-size: 13.5px; line-height: 1.55; color: var(--ink);
  background: var(--paper-dim, #F4F2FB);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 14px;
}
.hero-returning a { color: var(--signal, #5B4FE0); font-weight: 650; text-decoration: none; }
.hero-returning a:hover { text-decoration: underline; }

/* ===== See-it-before-you-pay band =====
   Two products, two real screenshots, one row. Cards are whole-card links so
   the target is the card, not a 14px text link, which is what made these
   demos easy to miss (and impossible to hit on a phone). */
/* styles.css makes every direct child of <main> a full-viewport flex section;
   without opting out this band renders a screen tall with the cards floating in
   the middle of it. Every other band on this page opts out the same way. */
.demo-band { padding: clamp(38px,5vw,60px) 0; border-top: 1px solid var(--line-soft,#E8E5F9);
  min-height: 0; justify-content: flex-start; }
/* Header shares the grid's measure so it centres over the cards rather than
   over the wider page wrap. */
.demo-band .signal-eyebrow, .demo-h { max-width: 1000px; margin-inline: auto; }
.demo-h { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-weight: 900; font-size: clamp(22px,3vw,30px); text-align: center; margin: 6px auto 26px; }
/* --- One stage, three tabs --- */
.demo-band .signal-eyebrow, .demo-h, .demo-switch, .demo-stage { max-width: 1120px; }
.demo-switch { display: flex; gap: 4px; margin: 0 auto 18px; padding: 4px; width: max-content; max-width: 100%;
  background: var(--paper-dim,#F6F9FC); border: 1px solid var(--line-soft,#E8E5F9); border-radius: 12px; }
.demo-tab { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 9px; padding: 9px 16px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; color: var(--muted);
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease; }
.demo-tab .dt-name { font-size: 14.5px; font-weight: 700; }
.demo-tab .dt-price { font-size: 12.5px; font-weight: 500; opacity: .85; }
.demo-tab:hover { color: var(--ink); }
/* Selected reads as a raised chip on the track, which is the one convention
   people already know from every segmented control they use. */
.demo-tab[aria-selected="true"] { background: #fff; color: var(--ink); border-color: var(--line-soft,#E8E5F9);
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 10px rgba(63,53,184,.07); }
.demo-tab[aria-selected="true"] .dt-price { color: var(--signal); opacity: 1; }
.demo-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
/* The line that fills while a tab holds the stage. It is the whole affordance:
   something visibly counting down is the clearest way to say that these change
   and that you may change them yourself. Drawn on the tab rather than under the
   whole row so it points at the thing it is timing. */
.demo-tab { position: relative; overflow: hidden; }
.demo-tab::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--signal); transform: scaleX(0); transform-origin: left center; opacity: 0; }
.demo-tab.is-timing::after { opacity: 1; animation: demo-hold 6s linear forwards; }
@keyframes demo-hold { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.demo-stage { margin: 0 auto; }
.demo-panel { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.demo-panel[hidden] { display: none; }
/* The shot is the point of this band, so it gets the room a screenshot needs to
   be read rather than a third of a row. */
.demo-frame { background: #FAFBFF; border: 1px solid var(--line-soft,#E8E5F9); border-radius: 14px;
  overflow: hidden; box-shadow: 0 14px 40px rgba(63,53,184,.10); }
.demo-frame img { display: block; width: 100%; height: auto; }
.demo-say h3 { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 21px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.01em; }
.demo-say p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.demo-open { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 14.5px; font-weight: 700; color: var(--signal); text-decoration: none; }
.demo-open:hover { text-decoration: underline; }

/* Switching panels is a change of subject, so it gets a short settle rather
   than appearing instantly. Nothing moves horizontally: the frame stays put and
   only its contents change. */
.demo-panel:not([hidden]) { animation: demo-in .22s ease both; }
@keyframes demo-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .demo-panel { grid-template-columns: 1fr; gap: 18px; }
  .demo-switch { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .demo-switch::-webkit-scrollbar { display: none; }
  .demo-tab { padding: 9px 13px; }
  .demo-tab .dt-name { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-tab { transition: none; }
  .demo-panel:not([hidden]) { animation: none; }
  /* The script already declines to auto-advance here; this makes sure no timing
     line is left painted mid-fill if it ever did. */
  .demo-tab.is-timing::after { animation: none; opacity: 0; }
}

/* =============================================================================
   Pointer feedback, one language for the whole page
   -----------------------------------------------------------------------------
   This block lives at the END of the file on purpose: signal.css declares many
   selectors twice, so a rule placed earlier can be silently overridden by its
   own duplicate further down.

   An audit of the homepage found 8 groups of clickable things that answer the
   pointer with nothing at all: the logo, Log in, the hero's secondary button,
   the four sample-report tabs, the three sample links under the pricing cards,
   the hero field labels, and all 14 FAQ rows. This closes that, and puts the
   elements that already had feedback on one timing so the page feels like a
   single object rather than a collection of components.

   Rules this block keeps:
   1. Nothing here changes layout. Colour, background, border, shadow and
      transform only, so a hover can never reflow the page under the cursor.
   2. Loudness is inverse to size. A card may lift 2px; a text link only
      changes colour.
   3. Hover is for pointers, wrapped in (hover: hover), so a phone never leaves
      an element stuck in its hover state after a tap.
   4. :active sits outside that query, because press feedback belongs to touch.
   5. prefers-reduced-motion keeps every colour change and drops every movement.

   One thing this deliberately does NOT do: no hover on .demo-rail. It is a
   scroll container, not a control.

   A note on .pricing-card, which was held still at first because styles.css
   records that compositing it floats .pricing-badge over the sticky nav. That
   was fixed structurally further down the same file: main is an isolated
   stacking context at z-index 0, so nothing inside it can paint over the
   header no matter which descendant gets a compositor layer. Checked on the
   live page with the card composited and its badge geometrically behind the
   header before the lift was added here. Note that on the skinned pages the
   rules below lose to body.skin-stripe on specificity, which is why the
   pricing block's real hover state lives in stripe-skin.css.
   ========================================================================== */

:root { --ix-t: 130ms; --ix-e: cubic-bezier(.2,.6,.3,1); }

.brand, .auth-link-btn, .lang-switch, .preview-link, .sm-tab,
.faq-section .faq-item summary, .pricing-card, .hero-altlinks a, #expressOpen,
.signal-hero label, .demo-open, .pricing-cta {
  transition: color var(--ix-t) var(--ix-e), background-color var(--ix-t) var(--ix-e),
              border-color var(--ix-t) var(--ix-e), box-shadow var(--ix-t) var(--ix-e),
              opacity var(--ix-t) var(--ix-e), transform var(--ix-t) var(--ix-e);
}

@media (hover: hover) and (pointer: fine) {
  /* the wordmark acknowledges the pointer without moving */
  .brand:hover { opacity: .74; }

  /* header and hero text actions */
  .auth-link-btn:hover { color: var(--signal); }
  .hero-altlinks a:hover, #expressOpen:hover { color: var(--signal-deep, #3F37D6); }

  /* the field labels are click targets too, because they carry for= */
  .signal-hero label:hover { color: var(--ink); cursor: pointer; }

  /* the sample-report tabs had no idle-to-hover state, so the three you are not
     on read as decoration rather than as somewhere you can go */
  .sm-tab:not(.active):hover { background: var(--paper-dim, #F6F9FC); color: var(--ink); }

  /* the sample link under each pricing card */
  .preview-link:hover { color: var(--signal); }

  /* 14 rows that looked like headings rather than like something that opens */
  .faq-section .faq-item summary:hover { color: var(--signal); }

  /* the plan cards answer the pointer the way the sample cards above them do */
  .pricing-card:hover { border-color: #C7C2E8; box-shadow: 0 10px 30px rgba(63,53,184,.10); transform: translateY(-2px); }
  .pricing-card.featured:hover { box-shadow: 0 12px 34px rgba(91,79,224,.20); }

  /* one timing for the things that already had a hover */
  .demo-card:hover { transform: translateY(-2px); }
}

/* Press feedback. Anything that looks pressable should move a pixel when it is
   pressed, and this is the one state that has to survive on touch. */
.pricing-cta:active:not(:disabled),
.signal-submit:active:not(:disabled),
.nav-cta:active,
.demo-arrow:active:not(:disabled),
.sm-cta-btn:active,
.th-anat-cta:active { transform: translateY(1px); }

.demo-card:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .brand, .auth-link-btn, .lang-switch, .preview-link, .sm-tab,
  .faq-section .faq-item summary, .pricing-card, .hero-altlinks a, #expressOpen,
  .signal-hero label, .demo-open, .pricing-cta { transition: none; }
  .pricing-cta:active:not(:disabled), .signal-submit:active:not(:disabled),
  .nav-cta:active, .demo-arrow:active:not(:disabled), .sm-cta-btn:active,
  .th-anat-cta:active, .demo-card:hover, .pricing-card:hover { transform: none; }
}


/* An extra "}" used to sit here, left over and unbalanced. It was harmless
   for as long as it was the last thing in the file: a stray closer at the top
   level is a parse error, and the parser recovers by skipping to the next "}",
   which was the end of input. The moment anything was appended after it, that
   recovery ate the first rule instead. This block was that first rule, which
   is why .measure-panel computed to no background, no border and no padding
   while .measure-panel .segmented two rules later worked perfectly. */

/* The measurement choices, as one panel.
 *
 * Melinda read her own page as a user and said she would click straight past
 * this: it looked optional, and the toggle track was so close to white that
 * the control did not look like a control. Both are the same failure. The
 * market and the language decide which companies the answers can name, so a
 * choice nobody notices is a choice we made for them while telling ourselves
 * we asked.
 *
 * Tinted ground rather than a bordered card, so it separates from the white
 * form without turning into another boxed section on a page that already has
 * enough of them. */
.measure-panel {
  margin: 16px 0 0; padding: 14px 16px 16px;
  background: #F4F2FE; border: 1px solid #DED8F7; border-radius: 12px;
}
.measure-panel__head { margin-bottom: 12px; }
.measure-panel__title {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #4A43D6;
}
.measure-panel__head p {
  margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #5A5F76;
}
/* The rows sit tighter inside the panel than they did loose on the card. */
.measure-panel .market-action-row { margin: 0 0 10px; }
.measure-panel .market-action-row:last-child { margin-bottom: 0; }
.measure-panel .market-value-field { margin: 0 0 10px; }
/* On the tinted ground the track needs to stay darker than what is behind it,
   or the inversion above is undone by the panel. */
.measure-panel .segmented { background: #E6E3F7; border-color: #D8D3F0; }

@media (max-width: 640px) {
  /* Stacked, so the label is not competing with the control for one line. */
  .measure-panel .market-action-row { display: block; }
  .measure-panel .market-action-row .measured-for { display: block; margin-bottom: 6px; }
  .measure-panel .segmented { width: 100%; }
  .measure-panel .segmented label { flex: 1; text-align: center; }
}

/* ===== Report Ready gate: score split, rival colour, absence =====
   Appended at the end of the file on purpose. The .ready-* block above is
   duplicated verbatim in this stylesheet, so a rule added beside the first
   copy is overridden by the second and looks like it did nothing. */

/* The score's two halves, under its label. Quieter than the label: it
   qualifies the number rather than making a second claim about it. */
.ready-split { display: block; font-size: 10.5px; color: var(--muted, #6B7089); opacity: .85; margin-top: 2px; line-height: 1.5; }

/* A named rival takes amber, the colour every other surface gives a
   competitor. It was drawn in the customer's own ink, which is the one colour
   on this page that is supposed to mean "you". */
.ready-rival b { color: #94610C; }

/* Nothing found is not a finding. Absence leaves the measurement weight
   instead of being drawn as a value at 900 in full ink. */
.ready-stat b.is-absent { color: var(--muted, #6B7089); font-weight: 600; font-size: 15px; }

/* ===== The Source authority band on the pricing section =====
   A different product, so a different shape: full-width under the ladder,
   its own job question, price and protocol, never a fourth column. One rule
   for every storefront; the pages carry only content. */
.sa-band { margin: 34px auto 0; max-width: 880px; border: 1px solid var(--line-soft, #E8E5F9); border-radius: 12px; padding: 22px 26px; background: #fff; display: flex; gap: 18px 28px; align-items: center; flex-wrap: wrap; text-align: left; }
.sa-band .sa-copy { flex: 1 1 340px; min-width: 260px; }
.sa-band .sa-eyebrow { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal); margin-bottom: 6px; }
.sa-band .sa-name { font-family: -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.sa-band .sa-desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.sa-band .sa-price { flex: 0 1 auto; }
.sa-band .sa-price .pricing-price { font-size: 26px; margin: 0; }
.sa-band .sa-proto { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.sa-band .sa-ctas { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.sa-band .sa-ctas .pricing-cta { display: block; text-align: center; text-decoration: none; margin: 0; }
.sa-band .sa-ctas .preview-link { text-align: center; }