/* Redveil compare page overrides
   Loaded after app/site/styles.css. No sticky or fixed layout overrides here. */

body[data-page="compare"] {
  background:
    radial-gradient(circle at 72% 8%, rgba(255, 30, 53, 0.13), transparent 34%),
    radial-gradient(circle at 12% 28%, rgba(255, 30, 53, 0.08), transparent 26%),
    linear-gradient(180deg, #050608 0%, #07080d 48%, #030405 100%) !important;
  color: #f4f5f7 !important;
}

body[data-page="compare"] .page-stack {
  gap: 18px !important;
  padding-top: clamp(22px, 3.4vw, 42px) !important;
}

body[data-page="compare"] .panel,
body[data-page="compare"] .section-block,
body[data-page="compare"] .service-subhero,
body[data-page="compare"] .compare-card,
body[data-page="compare"] .compare-memo-card,
body[data-page="compare"] .metric-compare-card,
body[data-page="compare"] .alternative-board,
body[data-page="compare"] .risk-delta-card,
body[data-page="compare"] .alternative-support-grid section {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 30, 53, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(18, 21, 30, 0.94), rgba(8, 10, 15, 0.92)) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body[data-page="compare"] .service-subhero {
  overflow: hidden;
  position: relative;
  padding: clamp(26px, 3.2vw, 38px) !important;
}

body[data-page="compare"] .service-subhero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 30, 53, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 30, 53, 0.04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

body[data-page="compare"] .subhero-copy {
  position: relative;
  z-index: 1;
  align-items: center !important;
}

body[data-page="compare"] .section-label,
body[data-page="compare"] .card-label,
body[data-page="compare"] .result-label {
  color: rgba(190, 196, 210, 0.66) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body[data-page="compare"] .compare-card .rank-pill,
body[data-page="compare"] .decision-memo-row.is-primary span,
body[data-page="compare"] .risk-signal-card.tone-high span {
  color: #ff6675 !important;
}

body[data-page="compare"] .section-head h2,
body[data-page="compare"] .subhero-copy h2,
body[data-page="compare"] .compare-section-title,
body[data-page="compare"] .candidate-title strong,
body[data-page="compare"] .alternative-hero strong,
body[data-page="compare"] .metric-compare-card strong {
  color: #fff !important;
}

body[data-page="compare"] .subhero-copy h2 {
  max-width: 820px;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.045em !important;
}

body[data-page="compare"] .subhero-copy p,
body[data-page="compare"] .compact-note,
body[data-page="compare"] .section-copy,
body[data-page="compare"] .candidate-title p,
body[data-page="compare"] .alternative-hero p,
body[data-page="compare"] .metric-compare-card p,
body[data-page="compare"] .compact-checklist li,
body[data-page="compare"] .risk-delta-card p {
  color: rgba(190, 196, 210, 0.68) !important;
}

body[data-page="compare"] .service-status-card {
  border: 1px solid rgba(255, 30, 53, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 30, 53, 0.12), rgba(255, 255, 255, 0.035)) !important;
}

body[data-page="compare"] .service-status-card strong {
  color: #fff !important;
}

body[data-page="compare"] .field span {
  color: rgba(210, 216, 230, 0.78) !important;
}

body[data-page="compare"] .field select,
body[data-page="compare"] .field input {
  height: 48px !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(3, 5, 9, 0.66) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.18) !important;
}

body[data-page="compare"] select,
body[data-page="compare"] option {
  background: #080a0f !important;
  color: #fff !important;
}

body[data-page="compare"] .button-primary,
body[data-page="compare"] #compare-run {
  border-color: rgba(255, 30, 53, 0.52) !important;
  background: linear-gradient(135deg, #ff1e35, #b90f22) !important;
  color: #fff !important;
  box-shadow:
    0 18px 34px rgba(255, 30, 53, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body[data-page="compare"] .compare-card-grid {
  gap: 16px !important;
}

body[data-page="compare"] .compare-card {
  padding: 20px !important;
  border-radius: 24px !important;
}

body[data-page="compare"] .compare-card::before {
  top: 22px !important;
  bottom: 22px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: #ff3650 !important;
  box-shadow:
    0 0 10px rgba(255, 54, 80, 0.46),
    0 0 22px rgba(255, 54, 80, 0.2) !important;
}

body[data-page="compare"] .risk-signal-card,
body[data-page="compare"] .decision-cue,
body[data-page="compare"] .metric-compare-card,
body[data-page="compare"] .compare-memo-card #compare-memo > *,
body[data-page="compare"] .benchmark-line,
body[data-page="compare"] .chip-row span,
body[data-page="compare"] .alternative-support-grid section {
  border-color: rgba(255, 255, 255, 0.085) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.024)) !important;
  box-shadow: none !important;
}

body[data-page="compare"] .risk-signal-card.tone-high,
body[data-page="compare"] .decision-cue {
  border-color: rgba(255, 30, 53, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 30, 53, 0.1), rgba(255, 255, 255, 0.026)) !important;
}

body[data-page="compare"] .risk-signal-card span,
body[data-page="compare"] .risk-delta-card span,
body[data-page="compare"] .decision-cue span,
body[data-page="compare"] .decision-memo-row span {
  color: rgba(190, 196, 210, 0.68) !important;
}

body[data-page="compare"] .risk-signal-card.tone-high span,
body[data-page="compare"] .decision-memo-row.is-primary span {
  color: #ff6675 !important;
}

body[data-page="compare"] .risk-signal-card strong,
body[data-page="compare"] .risk-delta-card strong {
  color: #fff !important;
}

body[data-page="compare"] .risk-signal-card.tone-high strong,
body[data-page="compare"] .metric-scoreline span {
  color: #ff6675 !important;
}

body[data-page="compare"] .risk-signal-card.tone-mid strong {
  color: #ffbf69 !important;
}

body[data-page="compare"] .risk-signal-card.tone-low strong {
  color: #8ee0d2 !important;
}

body[data-page="compare"] .risk-signal-card p,
body[data-page="compare"] .decision-cue p,
body[data-page="compare"] .decision-memo-row p {
  color: rgba(225, 229, 238, 0.78) !important;
}

body[data-page="compare"] .progress-track,
body[data-page="compare"] .metric-mini-row .progress-track {
  background: rgba(255, 255, 255, 0.08) !important;
}

body[data-page="compare"] .progress-fill,
body[data-page="compare"] .metric-mini-row .progress-fill,
body[data-page="compare"] .progress-track span,
body[data-page="compare"] .metric-mini-row .progress-track span {
  background: #ff3650 !important;
  box-shadow: none !important;
}

body[data-page="compare"] #compare-memo {
  display: grid;
  gap: 10px;
}

/* Compare detail pass: hierarchy, memo, hero alignment */

/* 1) Hero alignment with diagnosis-style calm console card */
body[data-page="compare"] .service-subhero {
  min-height: 210px;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 30, 53, 0.075)transparent 32%),
    linear-gradient(180deg, rgba(16, 19, 27, 0.94), rgba(8, 10, 15, 0.92)) !important;
}

body[data-page="compare"] .service-subhero::before {
  opacity: 0.58;
  background:
    linear-gradient(rgba(255, 30, 53, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 30, 53, 0.028) 1px, transparent 1px);
  background-size: 36px 36px;
}

body[data-page="compare"] .subhero-copy {
  gap: clamp(22px, 4vw, 56px) !important;
}

body[data-page="compare"] .subhero-copy > div:first-child
{
  max-width: 760px;
}

body[data-page="compare"] .subhero-copy h2 {
  max-width: 760px;
  font-size: clamp(30px, 3.2vw 44px) !important;
  line-height: 1.08 !important;
}

body[data-page="compare"] .subhero-copy > div:first-child > p:not(.section-label) {
  max-width: 620px;
  color: rgba (210, 216, 230, 0.72) !important;
}

/* r) Candidate cards: cleaner inner hierarchy */
body[data-page="compare"] .compare-card {
  position: relative;
  display: grid;
  gap: 156px;
}

body[data-page="compare"] .compare-card-head {
  align-items: center;
  margin-bottom: 2px;
}

body[data-page="compare"] .rank-pill {
  border-color: rgba(255, 54, 80, 0.28) !important;
  background: rgba(255, 54, 80, 0.09) !important;
  color: #ff6675 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

body[data-page="compare"] .tone-pill {
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}

body[data-page="compare"] .candidate-title {
  padding-bottom: 2px;
}

body[data-page="compare"] .candidate-title strong {
  margin-top: 5px !important;
  font-size: 13px !important;
  color: rgba(190, 196, 210, 0.62) !important;
}

body[data-page="compare"] .candidate-title p {
  margin-top: 5px !important;
  font-size: 13px !important;
  color: rgba(190, 196, 210, 0.62) !important;
}

/* benchmark and badges should read as metadata, not another red alert */
body[data-page="compare"] .benchmark-line {
  padding: 12px, 13px !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  background: rgba(255, 255, 255, 0.032 ) !important;
}

body[data-page="compare"] .benchmark-line strong {
  color: rgba(245, 257, 252, 0.92) !important;
  font-size: 12px !important;
}

body[data-page="compare"] .benchmark-line span {
  color: rgba(190, 196, 210, 0.58) !important;
  font-size: 12px !important;
}

body[data-page="compare"] .interpretation-strip {
  gap: 6px !important;
}

body[data-page="compare"] .interpretation-badge {
  border-color: rgba(255, 255, 255, 0.085) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(205, 211, 225, 0.7) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

/* Risk Signals: reduce noise, make high/mid/low hierarchy obvious */
body[data-page="compare"] .risk-signal-border {
  display: grid;
  gap: 9px;
}

body[data-page="compare"] .risk-signal-grid {
  gap: 8px !important;
}

body[data-page="compare"] .risk-signal-card {
  min-height: 112px;
  padding: 13px !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.022)) !important;
}

body[data-page="compare"] .risk-signal-card span {
  color: rgba(190, 196, 210, 0.6) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

body[data-page="compare"] .risk-signal-card strong {
  margin-top: 7px;
  font-size: 20px !important;
  line-height: 1 !important;
}

body[data-page="compare"] .risk-sinal-card p {
  margin-top: 8px !important;
  color: rgba(190, 196, 210, 0.66) !important;
  font-size: 12px !important;
  line-height: 1.48 !important;
}

body[data-page="compare"] .risk-signal-card.tone-high {
  border-color: rgba(255, 54, 80, 0.28) !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 54, 80, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 54, 80, 0.075), rgba(255, 255, 255, 0.02)) !important;
}

body[data-page="compare"] .risk-signal-card.tone-mid {
  border-color: rgba(255, 191, 105, 0.2) !important;
}

body[data-page="compare"] .risk-signal-card.tone-low {
  border-color: rgba(142, 224, 210, 0.16) !important;
}

/* Decision cue: make it a quiet fianl note, not a second waring card */
body[data-page="compare"] .decision-cue {
  position: relative;
  padding: 13px 14px 13px 16px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.022)) !important;
}

body[data-page="compare"] .decision-cue::before {
  content: "";
  position:absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 2px;
  border-radius: 999px;
  background: #ff3650;
  box-shadow: 0 0 12px rgba(255, 54, 80, 0.34);
}

body[data-page="compare"] .decision-cue span {
  color: rgba(190, 196, 210, 0.62) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

body[data-page="compare"] .decision-cue p {
  color: rgba(245, 247, 252, 0.88) !important;
  font-weight: 720 !important;
}

/* 3) Comparsion memo: stronger editorial/detial system */
body[data-page="compare"] .compre-memo-card {
  position: relative;
  overflow: hidden;
}

body[data-page="compare"] .compre-memo-card::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 26px;
  width: 52px;
  height: 52px;
  border-top: 1px solid rgba(255, 54, 80, 0.42);
  border-right: 1px solid rgba(255, 54, 80, 0.42);
  opacity: 0.8;
  pointer-events: none;
}

body[data-page="compare"] .decision-memo-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(92px, 0.22fr) minmax(180px, 0.34fr) 1fr;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  padding: 15px 46px 15px 18px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.022)) !important;
}

body[data-page="compare"] .decision-memo-row::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 999px;
  background: rgba(190, 196, 210, 0.18);
}

body[data-page="compare"] .decision-memo-row.is-primary {
  border-color: rgva(255, 54, 80, 0.28) !important;
  background:
    radial-gradient(circle at 95% 18%, rgba(255, 54, 80, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 54, 80, 0.08), rgba(255, 255, 255, 0.024)) !important;
}

body[data-page="compare"] .decision-memo-row.is-primary::after {
  background: #ff3650;
  box-shadow:
    0 0 10px rgba(255, 54, 80, 0.42),
    0 0 22px rgba(255, 54, 80, 0.18);
}

body[data-page="compare"] .decision-memo-row span {
  color: rgba(190, 196 ,210, 0.62) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

body[data-page="compare"] .decision-memo-row.is-primary span {
  color: #ff6675 !important;
}

body[data-page="compare"] .decsion-memo-roe strong {
  color: #fff !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
}

body[data-page="compare"] .decision-memo-row p {
  margin: 0 !important;
  color: rgba(190, 196, 210, 0.68) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

@media (max-width: 820px) {
  body[data-page="compare"] .decision-memo-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-right: 42px !important;
  }
  
  body[data-page="compare"] .sevice-status-card {
    width: 100%;
  }
}

/* Compare candidate card abstract map detail */
body[data-page="compare"] .compare-card {
  overflow: hidden;
  min-height: 520px;
}

body[data-page="compare"] .compare-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 92px;
  width: 148px;
  height: 148px;
  transform: translateX(-50%) rotate(12deg);
  opacity: 0.34;
  pointer-events: none;
  clip-path: polygon(
    50% 0%,
    84% 18%,
    100% 52%,
    76% 88%,
    36% 100%,
    0% 68%,
    12% 24%
  );
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%),
    rgba(255, 54, 80, 0.28);
  box-shadow:
    0 0 34px rgba(255, 54, 80, 0.16),
    inset 0 0 24px rgba(255, 255, 255, 0.04);
}

body[data-page="compare"] .compare-card:nth-child(2)::after {
  transform: translateX(-50%) rotate(-10deg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%),
    rgba(255, 191, 105, 0.25);
  box-shadow:
    0 0 34px rgba(255, 191, 105, 0.13),
    inset 0 0 24px rgba(255, 255, 255, 0.04);
}

body[data-page="compare"] .compare-card:nth-child(3)::after {
  transform: translateX(-50%) rotate(18deg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%),
    rgba(142, 224, 210, 0.2);
  box-shadow:
    0 0 34px rgba(142, 224, 210, 0.12),
    inset 0 0 24px rgba(255, 255, 255, 0.04);
}

body[data-page="compare"] .compare-card .candidate-title {
  position: relative;
  z-index: 2;
  min-height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

body[data-page="compare"] .compare-card .candidate-title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 190px;
  height: 120px;
  transform: translateX(-50%);
  opacity: 0.52;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 54, 80, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 54, 80, 0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

body[data-page="compare"] .compare-card:nth-child(2) .candidate-title::before {
  background:
    linear-gradient(rgba(255, 191, 105, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 191, 105, 0.08) 1px, transparent 1px);
  background-size: 18px 18px;
}

body[data-page="compare"] .compare-card:nth-child(3) .candidate-title::before {
  background:
    linear-gradient(rgba(142, 224, 210, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 224, 210, 0.075) 1px, transparent 1px);
  background-size: 18px 18px;
}

body[data-page="compare"] .compare-card .candidate-title strong,
body[data-page="compare"] .compare-card .candidate-title p {
  position: relative;
  z-index: 3;
}

body[data-page="compare"] .compare-card .benchmark-line,
body[data-page="compare"] .compare-card .interpretation-strip,
body[data-page="compare"] .compare-card .risk-signal-board,
body[data-page="compare"] .compare-card .decision-cue {
  position: relative;
  z-index: 4;
}

/* Replace abstract polygon with urban scan panel */
body[data-page="compare"] .compare-card::after,
body[data-page="compare"] .compare-card .candidate-title::before {
  content: none !important;
  display: none !important;
}

/* Compare candidate urban scan panel */
body[data-page="compare"] .compare-card {
  min-height: auto !important;
  gap: 14px !important;
}

body[data-page="compare"] .compare-card .candidate-title {
  min-height: auto !important;
  display: block !important;
  padding-bottom: 0 !important;
}

body[data-page="compare"] .candidate-scan-panel {
  position: relative;
  height: 132px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 54, 80, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018));
}

body[data-page="compare"] .candidate-scan-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background:
    linear-gradient(rgba(255, 54, 80, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 54, 80, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 78%);
}

body[data-page="compare"] .candidate-scan-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 54, 80, 0.18);
  box-shadow:
    0 0 0 22px rgba(255, 54, 80, 0.035),
    0 0 0 44px rgba(255, 54, 80, 0.018);
}

body[data-page="compare"] .scan-road {
  position: absolute;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transform-origin: center;
}

body[data-page="compare"] .scan-road-a {
  left: 18px;
  right: 20px;
  top: 64px;
  transform: rotate(-12deg);
}

body[data-page="compare"] .scan-road-b {
  left: 34px;
  right: 28px;
  top: 76px;
  transform: rotate(19deg);
  opacity: 0.7;
}

body[data-page="compare"] .scan-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ff3650;
  box-shadow:
    0 0 14px rgba(255, 54, 80, 0.62),
    0 0 34px rgba(255, 54, 80, 0.22);
}

body[data-page="compare"] .scan-building {
  position: absolute;
  width: 14px;
  border-radius: 3px 3px 1px 1px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%),
    rgba(255, 54, 80, 0.26);
  box-shadow: 0 0 16px rgba(255, 54, 80, 0.1);
}

body[data-page="compare"] .scan-building.b1 {
  left: 29%;
  bottom: 35px;
  height: 44px;
}

body[data-page="compare"] .scan-building.b2 {
  left: 39%;
  bottom: 31px;
  height: 64px;
}

body[data-page="compare"] .scan-building.b3 {
  left: 50%;
  bottom: 34px;
  height: 84px;
  width: 17px;
}

body[data-page="compare"] .scan-building.b4 {
  left: 62%;
  bottom: 32px;
  height: 54px;
}

body[data-page="compare"] .scan-building.b5 {
  left: 70%;
  bottom: 37px;
  height: 34px;
}

/* Candidate B amber tone */
body[data-page="compare"] .candidate-scan-panel.is-amber {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 191, 105, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018));
}

body[data-page="compare"] .candidate-scan-panel.is-amber::before {
  background:
    linear-gradient(rgba(255, 191, 105, 0.062) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 191, 105, 0.062) 1px, transparent 1px);
  background-size: 18px 18px;
}

body[data-page="compare"] .candidate-scan-panel.is-amber::after {
  border-color: rgba(255, 191, 105, 0.16);
  box-shadow:
    0 0 0 22px rgba(255, 191, 105, 0.03),
    0 0 0 44px rgba(255, 191, 105, 0.016);
}

body[data-page="compare"] .candidate-scan-panel.is-amber .scan-core {
  background: #ffbf69;
  box-shadow:
    0 0 14px rgba(255, 191, 105, 0.46),
    0 0 34px rgba(255, 191, 105, 0.15);
}

body[data-page="compare"] .candidate-scan-panel.is-amber .scan-building {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 34%),
    rgba(255, 191, 105, 0.21);
}

/* Candidate C cool tone */
body[data-page="compare"] .candidate-scan-panel.is-cool {
  background:
    radial-gradient(circle at 50% 48%, rgba(142, 224, 210, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018));
}

body[data-page="compare"] .candidate-scan-panel.is-cool::before {
  background:
    linear-gradient(rgba(142, 224, 210, 0.056) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 224, 210, 0.056) 1px, transparent 1px);
  background-size: 18px 18px;
}

body[data-page="compare"] .candidate-scan-panel.is-cool::after {
  border-color: rgba(142, 224, 210, 0.14);
  box-shadow:
    0 0 0 22px rgba(142, 224, 210, 0.026),
    0 0 0 44px rgba(142, 224, 210, 0.014);
}

body[data-page="compare"] .candidate-scan-panel.is-cool .scan-core {
  background: #8ee0d2;
  box-shadow:
    0 0 14px rgba(142, 224, 210, 0.36),
    0 0 34px rgba(142, 224, 210, 0.12);
}

body[data-page="compare"] .candidate-scan-panel.is-cool .scan-building {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 34%),
    rgba(142, 224, 210, 0.18);
}

/* Compare candidate scan panel natural map refinement */
body[data-page="compare"] .compare-card {
  gap: 12px !important;
}

body[data-page="compare"] .candidate-scan-panel {
  height: 118px !important;
  margin-top: 4px;
  margin-bottom: 2px;
  border-radius: 17px;
  border-color: rgba(255, 255, 255, 0.07) !important;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 54, 80, 0.105), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.016)) !important;
}

body[data-page="compare"] .candidate-scan-panel::before {
  opacity: 0.48 !important;
  background:
    linear-gradient(rgba(255, 54, 80, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 54, 80, 0.052) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 76%) !important;
}

body[data-page="compare"] .candidate-scan-panel::after {
  width: 46px !important;
  height: 46px !important;
  border-color: rgba(255, 54, 80, 0.14) !important;
  box-shadow:
    0 0 0 18px rgba(255, 54, 80, 0.026),
    0 0 0 38px rgba(255, 54, 80, 0.012) !important;
}

/* make roads feel like faint map paths, not graphic X-lines */
body[data-page="compare"] .scan-road {
  height: 1px !important;
  opacity: 0.42;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(225, 229, 238, 0.14),
    transparent
  ) !important;
}

body[data-page="compare"] .scan-road-a {
  left: 26px !important;
  right: 30px !important;
  top: 53px !important;
  transform: rotate(-9deg) !important;
}

body[data-page="compare"] .scan-road-b {
  left: 42px !important;
  right: 34px !important;
  top: 68px !important;
  transform: rotate(14deg) !important;
  opacity: 0.34 !important;
}

/* reduce central target: quieter intelligence marker */
body[data-page="compare"] .scan-core {
  width: 8px !important;
  height: 8px !important;
  opacity: 0.88;
  box-shadow:
    0 0 10px rgba(255, 54, 80, 0.42),
    0 0 24px rgba(255, 54, 80, 0.14) !important;
}

/* turn vertical buildings into top-down parcels / building footprints */
body[data-page="compare"] .scan-building {
  width: 28px !important;
  height: 14px !important;
  border-radius: 3px !important;
  opacity: 0.42;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 42%),
    rgba(255, 54, 80, 0.18) !important;
  box-shadow: none !important;
  transform-origin: center;
}

body[data-page="compare"] .scan-building.b1 {
  left: 29% !important;
  top: 44px !important;
  bottom: auto !important;
  transform: rotate(-15deg);
}

body[data-page="compare"] .scan-building.b2 {
  left: 39% !important;
  top: 34px !important;
  bottom: auto !important;
  width: 34px !important;
  height: 16px !important;
  transform: rotate(10deg);
}

body[data-page="compare"] .scan-building.b3 {
  left: 49% !important;
  top: 59px !important;
  bottom: auto !important;
  width: 38px !important;
  height: 18px !important;
  transform: rotate(-4deg);
}

body[data-page="compare"] .scan-building.b4 {
  left: 61% !important;
  top: 39px !important;
  bottom: auto !important;
  width: 30px !important;
  height: 14px !important;
  transform: rotate(16deg);
}

body[data-page="compare"] .scan-building.b5 {
  left: 66% !important;
  top: 70px !important;
  bottom: auto !important;
  width: 24px !important;
  height: 12px !important;
  transform: rotate(-12deg);
}

/* Candidate B amber tone refinement */
body[data-page="compare"] .candidate-scan-panel.is-amber {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 191, 105, 0.085), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.016)) !important;
}

body[data-page="compare"] .candidate-scan-panel.is-amber::before {
  background:
    linear-gradient(rgba(255, 191, 105, 0.046) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 191, 105, 0.046) 1px, transparent 1px) !important;
}

body[data-page="compare"] .candidate-scan-panel.is-amber::after {
  border-color: rgba(255, 191, 105, 0.13) !important;
  box-shadow:
    0 0 0 18px rgba(255, 191, 105, 0.022),
    0 0 0 38px rgba(255, 191, 105, 0.01) !important;
}

body[data-page="compare"] .candidate-scan-panel.is-amber .scan-building {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 42%),
    rgba(255, 191, 105, 0.15) !important;
}

/* Candidate C cool tone refinement */
body[data-page="compare"] .candidate-scan-panel.is-cool {
  background:
    radial-gradient(circle at 50% 52%, rgba(142, 224, 210, 0.072), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.016)) !important;
}

body[data-page="compare"] .candidate-scan-panel.is-cool::before {
  background:
    linear-gradient(rgba(142, 224, 210, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 224, 210, 0.04) 1px, transparent 1px) !important;
}

body[data-page="compare"] .candidate-scan-panel.is-cool::after {
  border-color: rgba(142, 224, 210, 0.12) !important;
  box-shadow:
    0 0 0 18px rgba(142, 224, 210, 0.018),
    0 0 0 38px rgba(142, 224, 210, 0.008) !important;
}

body[data-page="compare"] .candidate-scan-panel.is-cool .scan-building {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 42%),
    rgba(142, 224, 210, 0.13) !important;
}

/* Responsive card containment */
body[data-page="compare"] .page-stack,
body[data-page="compare"] .page-stack > *,
body[data-page="compare"] .compare-selector-grid,
body[data-page="compare"] .compare-card-grid,
body[data-page="compare"] .comparison-grid,
body[data-page="compare"] .compare-decision-grid,
body[data-page="compare"] .compare-card,
body[data-page="compare"] .candidate-scan-panel {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 480px) {
  body[data-page="compare"] .compare-heading-phrase {
    white-space: normal;
  }

  body[data-page="compare"] .compare-card {
    padding: 16px !important;
  }

  body[data-page="compare"] .candidate-scan-panel {
    height: 104px !important;
  }

  body[data-page="compare"] .decision-memo-row {
    padding: 14px 34px 14px 14px !important;
  }
}