/* Aqxle / Hearst deck-aligned tokens */
:root {
  --navy: #0A1929;
  --cream: #FAF6EE;
  --paper: #FFFFFF;
  --mint: #2BB082;
  --mint-dark: #0E7A52;
  --steel: #4C76A2;
  --steel-lt: #7593B6;
  --terra: #C84545;
  --terra-dk: #A33333;
  --gold: #D4A24C;
  --text: #1F2937;
  --muted: #7A8B9C;
  --line: #E5DCC9;
  --line-strong: #C9BFA8;
  --card-bg: #FFFFFF;
  --card-shadow: 0 1px 0 rgba(10,25,41,0.04), 0 6px 18px -8px rgba(10,25,41,0.10);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cream); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { min-width: 1480px; }

.topbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 28px 40px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--steel); text-transform: uppercase; font-weight: 600;
}
.title {
  margin: 6px 0 0 0;
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--navy);
}
.topbar-right { display: flex; gap: 36px; }
.topstat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.topstat .num { font-size: 18px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.topstat .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.intro {
  max-width: 1100px;
  margin: 18px 40px 8px;
  font-size: 13.5px; line-height: 1.55; color: #3a4756;
}

.board {
  padding: 6px 40px 40px;
  display: flex; flex-direction: column; gap: 28px;
}

.property {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px 26px;
  box-shadow: 0 1px 0 rgba(10,25,41,0.04), 0 10px 28px -16px rgba(10,25,41,0.18);
}
.property.prop-rw { border-top: 3px solid var(--navy); }
.property.prop-rr { border-top: 3px solid var(--terra); }

.prop-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.prop-head-left { display: flex; align-items: center; gap: 12px; }
.prop-head .dot { width: 10px; height: 10px; border-radius: 50%; }
.prop-head .dot-navy { background: var(--navy); }
.prop-head .dot-terra { background: var(--terra); }
.prop-name { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.prop-sub  { font-size: 12px; color: var(--muted); margin-top: 2px; font-family: var(--mono); }
.ph-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ph-stat .num { font-size: 22px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ph-stat .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.prop-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.05fr 0.9fr 1.05fr;
  gap: 22px;
}

.col {
  position: relative;
  display: flex; flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.col-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.col-head .step {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.col-head .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--navy); text-transform: uppercase; font-weight: 700;
}
.col-head .count {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}

/* CARDS */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: var(--card-shadow);
  position: relative;
}
.card .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase; font-weight: 600;
}
.card .tag.hl { color: var(--terra); }
.card .name {
  margin: 4px 0 6px 0;
  font-weight: 700; font-size: 15px; color: var(--navy);
  letter-spacing: -0.005em;
}
.card .meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: #3a4756;
}
.card .meta .links { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); }
.card .meta .pct { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.card .sub {
  margin-top: 6px;
  font-size: 11.5px; color: var(--muted); line-height: 1.45;
}

.card.muted { background: #FBF9F2; }
.card.hero { border-color: var(--terra); border-width: 1px; box-shadow: 0 0 0 1px var(--terra), 0 6px 18px -8px rgba(200,69,69,0.25); }
.card.hero .name { color: var(--terra-dk); }
.card.hero .tag { color: var(--terra); }

.card.site {
  background: var(--navy);
  color: var(--cream);
  border: none;
}
.card.site .tag { color: var(--steel-lt); }
.card.site .name { color: #ffffff; font-size: 16px; }
.card.site .meta { color: #c9d4df; }
.card.site .meta .links { color: #ffffff; }
.card.site .meta .pct { color: var(--steel-lt); }
.card.site .sub { color: #a9b6c4; }

/* drill list (top destinations within bucket) */
.drill {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.drill li {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: #3a4756;
  padding: 3px 0;
  border-bottom: 1px dotted #eee5d0;
}
.drill li:last-child { border-bottom: none; }
.drill li .d-name { color: #2f3a48; }
.drill li .d-val { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 11px; color: var(--muted); }

.col-body { display: flex; flex-direction: column; gap: 10px; }
.card.site .unit { font-size: 12px; font-weight: 500; color: #c9d4df; letter-spacing: 0; }
.card.site .name { font-size: 18px; }

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
  margin: 14px 0 10px;
}
.divider-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--muted); text-transform: uppercase;
  text-align: center; margin-bottom: 4px;
}

/* SVG layer for connector ribbons */
.connectors {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.connectors path {
  fill: none;
  stroke-linecap: round;
}

/* foreground cards above ribbons */
.col { z-index: 1; }

.foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 40px 28px;
  font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--line);
}
.foot .brand { font-family: var(--mono); letter-spacing: 0.12em; font-weight: 600; color: var(--navy); }

/* color accent stripes on bucket cards */
.card.bucket { border-left: 3px solid var(--steel-lt); }
.card.bucket[data-color="terra"] { border-left-color: var(--terra); }
.card.bucket[data-color="mint"]  { border-left-color: var(--mint); }
.card.bucket[data-color="mint-dark"] { border-left-color: var(--mint-dark); }
.card.bucket[data-color="steel"] { border-left-color: var(--steel); }
.card.bucket[data-color="steel-lt"] { border-left-color: var(--steel-lt); }
.card.bucket[data-color="gold"]  { border-left-color: var(--gold); }
.card.bucket[data-color="muted"] { border-left-color: var(--muted); }
.card.bucket[data-color="navy"]  { border-left-color: var(--navy); }

/* =========================================================================
   PAGE 3 — Comparison summary
   ========================================================================= */
.compare {
  padding: 24px 40px 50px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.compare-head { margin-bottom: 22px; }
.compare-title {
  margin: 6px 0 6px;
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy);
}
.compare-intro {
  margin: 0; max-width: 1100px;
  font-size: 13.5px; line-height: 1.55; color: #3a4756;
}

.cmp-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px 22px;
  margin-bottom: 18px;
  box-shadow: 0 1px 0 rgba(10,25,41,0.04), 0 8px 22px -14px rgba(10,25,41,0.14);
}
.cmp-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cmp-block-head .step {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.cmp-block-title { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -0.005em; }
.cmp-block-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }

.cmp-row { margin-bottom: 18px; }
.cmp-row:last-child { margin-bottom: 0; }
.cmp-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cmp-row-title { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.cmp-row-sub   { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }

.cmp-bar {
  display: flex; height: 28px; width: 100%;
  border-radius: 6px; overflow: hidden;
  background: #f0e9d6;
  border: 1px solid var(--line);
}
.cmp-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; overflow: hidden; flex-shrink: 1;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.02em;
  transition: filter 0.15s ease;
}
.cmp-seg:hover { filter: brightness(1.1); }
.cmp-seg .in { white-space: nowrap; padding: 0 6px; }

.cmp-legend {
  display: flex; flex-wrap: wrap; gap: 14px 18px;
  margin-top: 10px;
}
.cmp-leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #3a4756;
}
.cmp-leg i {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.cmp-leg .l { color: #3a4756; }
.cmp-leg .v { font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }

/* Contrast callouts */
.contrast {
  margin-top: 22px;
  background: var(--navy);
  color: var(--cream);
  border-radius: 14px;
  padding: 22px 24px 24px;
}
.contrast-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #a3b3c3;
  margin-bottom: 14px;
}
.contrast-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.contrast-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 16px 18px 18px;
}
.contrast-num {
  font-size: 32px; font-weight: 700; color: var(--terra);
  letter-spacing: -0.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.contrast-lbl {
  margin-top: 4px;
  font-size: 13px; font-weight: 600; color: #ffffff;
}
.contrast-vs {
  margin-top: 6px;
  font-size: 12px; color: #c9d4df;
  font-family: var(--mono);
}
.contrast-vs b { color: #ffffff; font-weight: 600; }
.contrast-take {
  margin-top: 10px;
  font-size: 12.5px; line-height: 1.5; color: #b8c6d4;
}

/* Column 6 — Revenue cards */
.card.rev-head { background: linear-gradient(180deg, #0E7A52 0%, #0a5c3e 100%); border-left-color: var(--mint); }
.card.rev-head .tag.hl { color: #b6f0d4; }
.card.rev-head .name { color: #ffffff; font-size: 30px; letter-spacing: -0.5px; }
.card.rev-head .name .unit { font-size: 13px; font-weight: 500; color: #cfe9dc; margin-left: 6px; letter-spacing: 0; }
.card.rev-head .sub { color: #d5ecdf; font-size: 11.5px; line-height: 1.45; margin-top: 8px; }

.card.rev-apport { border-left-color: var(--mint-dark); }
.card.rev-apport .drill .d-val { color: var(--mint-dark); font-variant-numeric: tabular-nums; }

.card.rev-gap { border-left-color: var(--muted); background: #f3eee0; }
.card.rev-gap .name { font-size: 14px; color: #5a5240; }
.card.rev-gap .sub { font-size: 11.5px; color: #7a6e54; line-height: 1.5; margin-top: 8px; }

/* Merchant-class badges inside the revenue list */
.mclass {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: 1px;
}
.mclass-brand_dtc { background: rgba(14, 122, 82, 0.12); color: #0E7A52; }
.mclass-retailer  { background: rgba(76, 118, 162, 0.14); color: #4C76A2; }
.mclass-mass      { background: rgba(212, 162, 76, 0.18); color: #8a6720; }

.drill.rev-list li { gap: 8px; }

/* RPM unit treatment */
.card.rev-head .name .unit { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: #cfe9dc; }