/* ═══════════════════════════════════════════════════════════════
   SEGMENTATION LAB — page-specific styles
   Matches the churn-lab patterns in visual weight and rhythm.
   All colors via var(--ink), var(--ink-soft), var(--ink-dim),
   var(--paper), var(--paper-2), var(--rule), var(--accent).
   ═══════════════════════════════════════════════════════════════ */

.seg-main { position: relative; z-index: 1; }

/* Active nav link (shared pattern) */
.masthead-nav a.active {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* ── Hero / title ─────────────────────────────────────────── */
.seg-hero {
  padding: 140px 48px 64px;
  max-width: 1080px;
}
.seg-title { margin-top: 18px; }
.seg-kicker {
  margin-top: 32px; max-width: 620px;
  font-size: 18px; line-height: 1.55; color: var(--ink-soft);
}
.seg-dateline {
  margin-top: 48px;
  display: flex; gap: 40px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.seg-dateline .label { opacity: 0.6; }
.seg-dateline .value {
  color: var(--ink); margin-top: 4px;
  text-transform: none; letter-spacing: 0.06em;
}

/* ── Section wrapper ──────────────────────────────────────── */
.seg-section {
  padding: 72px 48px;
  max-width: 1180px;
  margin: 0 auto;
}
.seg-section + .seg-section { padding-top: 56px; }
.seg-section > .section-label { margin-bottom: 28px; }

/* Rhythm variants — prose sections breathe, dense data sections compress. */
.seg-section--airy  { padding-top: 104px; padding-bottom: 96px; }
.seg-section--airy + .seg-section { padding-top: 72px; }
.seg-section--dense { padding-top: 44px; padding-bottom: 48px; }
.seg-section--dense > .section-label { margin-bottom: 18px; }

/* Prose */
.seg-prose p {
  max-width: 720px;
  font-size: 17px; line-height: 1.65; color: var(--ink-soft);
  margin: 0 0 22px 0;
}
.seg-prose em { font-style: italic; color: var(--ink); }
.seg-prose .seg-lede {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: 26px; line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 780px;
  margin-bottom: 28px;
  text-wrap: balance;
}
.seg-prose .seg-footnote {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-dim);
  max-width: 720px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.seg-prose .seg-footnote em { color: var(--ink-soft); }

.headline-num {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.seg-note {
  max-width: 720px;
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 28px 0;
}
.seg-note em { color: var(--ink); font-style: italic; }
.seg-caveat {
  max-width: 760px;
  margin-top: 18px;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-dim); text-transform: uppercase;
}

.profile-sub {
  margin-top: 24px; font-size: 11px; letter-spacing: 0.12em;
  color: var(--ink-dim); text-transform: uppercase;
}

/* Profile grid — six stats in one row. Clamp font size so long integers
   can't overflow their 1/6 columns and collide with neighbors. */
#profile-grid { gap: 18px; }
#profile-grid .metric { min-width: 0; overflow: hidden; }
#profile-grid .metric-value {
  font-size: clamp(26px, 2.6vw, 42px);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Model comparison table ───────────────────────────────── */
.table-wrap { overflow-x: auto; }
.seg-table {
  width: 100%; border-collapse: collapse;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.seg-table th, .seg-table td {
  text-align: right;
  padding: 14px 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  font-size: 14px;
}
.seg-table th {
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
  border-bottom: 1px solid var(--ink);
  font-weight: 400;
}
.seg-table th:first-child, .seg-table td:first-child { text-align: left; }
.seg-table td.name {
  font-family: 'Newsreader', serif; font-weight: 300;
  font-size: 22px;
  color: var(--ink);
}
.seg-table tr.winner td.name { color: var(--accent); }
.seg-table tr.winner td.name::before {
  content: '▸ ';
  color: var(--accent);
}
.seg-table td.is-best {
  color: var(--accent);
  position: relative;
}
.seg-table td.is-best::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
  opacity: 0.75;
}

/* ── Chart frame (shared) ─────────────────────────────────── */
.chart-frame {
  position: relative;
  background: var(--paper-2);
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  padding: 28px;
  margin-top: 4px;
}
.chart-corners { position: absolute; inset: 0; pointer-events: none; }
.chart-corners .cc {
  position: absolute; width: 10px; height: 10px; opacity: 0.45;
}
.chart-corners .cc.tl { top: 0; left: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.chart-corners .cc.tr { top: 0; right: 0; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.chart-corners .cc.bl { bottom: 0; left: 0; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.chart-corners .cc.br { bottom: 0; right: 0; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.chart-svg {
  display: block; width: 100%; height: auto;
  overflow: visible;
}
.chart-readout {
  position: absolute; top: 14px; right: 18px;
  font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--ink-dim); text-transform: uppercase;
  background: color-mix(in oklab, var(--paper) 85%, transparent);
  padding: 4px 8px;
  pointer-events: none;
  max-width: 54%;
  text-align: right;
}
.chart-readout .label { color: var(--accent); }
.chart-readout .value { color: var(--ink); }
.chart-legend {
  margin-top: 14px;
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.chart-legend .sw {
  display: inline-block;
  width: 20px; height: 2px;
  vertical-align: middle; margin-right: 8px;
}
.chart-frame .frame-label {
  position: absolute; top: 10px; left: 14px;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
  z-index: 2; pointer-events: none;
}

/* SVG stroke/fill tokens (CSS vars via classes, never hex in JS) */
.chart-svg .axis,
.chart-svg .gridline { stroke: var(--ink); stroke-opacity: 0.18; }
.chart-svg .axis { stroke-opacity: 0.5; }
.chart-svg .tick-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  fill: var(--ink-dim);
  letter-spacing: 0.08em;
}
.chart-svg .axis-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  fill: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.chart-svg .series {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.chart-svg .series-accent { stroke: var(--accent); }
.chart-svg .series-ink    { stroke: var(--ink); }
.chart-svg .series-soft   { stroke: var(--ink-soft); }
.chart-svg .series-dim    { stroke: var(--ink-dim); }
.chart-svg .dot           { fill: var(--ink); fill-opacity: 0.42; }
.chart-svg .dot-accent    { fill: var(--accent); }
.chart-svg .dot-soft      { fill: var(--ink-soft); fill-opacity: 0.42; }
.chart-svg .dot-dim       { fill: var(--ink-dim); fill-opacity: 0.42; }
.chart-svg .hover-dot {
  fill: var(--accent);
  stroke: var(--paper);
  stroke-width: 1.5;
  pointer-events: none;
}
.chart-svg .hover-line {
  stroke: var(--ink);
  stroke-opacity: 0.35;
  stroke-dasharray: 3 3;
  pointer-events: none;
}
.chart-svg .you-dot {
  fill: var(--accent);
  stroke: var(--paper);
  stroke-width: 2;
}
.chart-svg .centroid-marker {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

/* ── § IV — k-selection two-up grid ───────────────────────── */
.k-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 4px;
}

/* ── § V — Segment map ────────────────────────────────────── */
.map-frame { padding: 32px; }
.seg-map-legend {
  margin-top: 16px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.seg-map-legend .legend-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  background: var(--paper);
  cursor: pointer;
  user-select: none;
  transition: border-color 180ms, background 180ms;
  font-size: 11px;
}
.seg-map-legend .legend-chip:hover {
  border-color: var(--ink);
}
.seg-map-legend .legend-chip.dimmed {
  opacity: 0.35;
}
.seg-map-legend .legend-swatch {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.seg-map-legend .legend-name {
  font-family: 'Newsreader', serif;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.seg-map-legend .legend-meta {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  margin-left: 2px;
}

/* ── § VI — Live classifier ───────────────────────────────── */
.classify-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
  margin-top: 8px;
}
.classify-inputs {
  display: flex; flex-direction: column; gap: 22px;
}
.classify-input-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  gap: 14px;
  align-items: center;
}
.classify-input-row label {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim);
}
.classify-input-row label .hint {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  color: var(--ink-dim);
  opacity: 0.7;
  letter-spacing: 0.08em;
  text-transform: none;
}
.classify-input-row .val {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  height: 22px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: color-mix(in oklab, var(--ink) 60%, transparent);
}
input[type="range"]::-moz-range-track {
  height: 2px;
  background: color-mix(in oklab, var(--ink) 60%, transparent);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  transition: transform 140ms, background 140ms;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
  background: var(--accent); transform: scale(1.1);
}

select {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
  padding: 8px 12px;
  border-radius: 0;
  cursor: pointer;
}
select:focus { outline: 1px solid var(--accent); outline-offset: 1px; }

.classify-output {
  background: var(--paper-2);
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  padding: 28px;
  position: sticky; top: 80px;
}
.classify-label {
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.classify-name {
  font-size: 42px;
  font-weight: 300;
  line-height: 1.05; letter-spacing: -0.015em;
  color: var(--accent);
  margin: 6px 0 20px;
}
/* Editorial fact line — label-above-number laid out as a newspaper dateline
   rather than a card grid. Breaks the repeated stat-grid pattern. */
.classify-facts {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: baseline;
}
.classify-facts > div {
  display: flex; align-items: baseline; gap: 10px;
  white-space: nowrap;
}
.classify-facts dt {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.classify-facts dd {
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.classify-median {
  margin-top: 18px;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.classify-median em {
  color: var(--ink);
  font-style: italic;
  font-family: 'Newsreader', serif;
}
.classify-inset {
  margin-top: 24px;
  display: block; width: 100%; height: auto;
  overflow: visible;
  aspect-ratio: 420 / 260;
  background: var(--paper);
  border: 1px dashed color-mix(in oklab, var(--ink) 20%, transparent);
}
.classify-footnote {
  margin-top: 14px;
  font-size: 10.5px; line-height: 1.55;
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ── § VII — Segment cards ────────────────────────────────── */
.segment-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 4px;
}
.segment-card {
  background: var(--paper-2);
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}
.segment-card.is-top {
  border-color: var(--accent);
}
.segment-card.is-top::before {
  content: '▸ TOP SEGMENT';
  position: absolute;
  top: -1px; right: -1px;
  background: var(--accent);
  color: var(--paper);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
}
.segment-card-head { display: flex; flex-direction: column; gap: 2px; }
.segment-card-name {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.segment-card-size {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* RFM micro bars */
.rfm-micro { display: flex; flex-direction: column; gap: 8px; }
.rfm-micro-row {
  display: grid; grid-template-columns: 32px 1fr 60px;
  gap: 10px; align-items: center;
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--ink-dim); text-transform: uppercase;
}
.rfm-micro-label { color: var(--ink-dim); }
.rfm-micro-track {
  position: relative; height: 4px;
  background: color-mix(in oklab, var(--ink) 10%, transparent);
}
.rfm-micro-tick {
  position: absolute; top: -4px; bottom: -4px;
  width: 2px; background: var(--accent);
}
.rfm-micro-val {
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Revenue contribution bar — paired % customers vs % revenue */
.rev-contrib {
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  display: flex; flex-direction: column; gap: 6px;
}
.rev-contrib-row {
  display: grid; grid-template-columns: 82px 1fr 56px;
  gap: 10px; align-items: center;
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-dim); text-transform: uppercase;
}
.rev-contrib-track {
  position: relative; height: 8px;
  background: color-mix(in oklab, var(--ink) 10%, transparent);
}
.rev-contrib-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
}
.rev-contrib-fill.customers { background: var(--ink); }
.rev-contrib-fill.revenue   { background: var(--accent); }
.rev-contrib-val {
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.segment-narrative {
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.segment-narrative em { color: var(--ink); font-style: italic; }

/* ── § VIII — Campaign simulator ──────────────────────────── */
.sim-box {
  padding: 32px;
  background: var(--paper-2);
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  display: flex; flex-direction: column; gap: 28px;
}
.sim-controls {
  display: grid; grid-template-columns: minmax(200px, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: end;
}
.sim-control {
  display: flex; flex-direction: column; gap: 8px;
}
.sim-control label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.sim-control label .val {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.sim-control select { width: 100%; }
.sim-control input[type="range"] { width: 100%; }

.sim-flow {
  display: flex; align-items: stretch; gap: 10px;
  padding: 18px 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  overflow-x: auto;
}
.sim-step {
  flex: 1 1 0;
  min-width: 130px;
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 8px;
  justify-content: space-between;
}
.sim-step-lbl {
  font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim);
  line-height: 1.4;
}
.sim-step-lbl .sub { opacity: 0.7; letter-spacing: 0.04em; font-size: 8.5px; }
.sim-step-val {
  font-size: 28px;
  font-weight: 300; line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sim-step.accent .sim-step-val { color: var(--accent); }
.sim-arrow {
  align-self: center;
  font-size: 18px;
  color: var(--ink-dim);
  opacity: 0.55;
  flex-shrink: 0;
}

.sim-outputs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.sim-out {
  padding: 18px;
  border: 1px solid color-mix(in oklab, var(--ink) 15%, transparent);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 6px;
}
.sim-out.sim-roi {
  border-color: var(--accent);
}
.sim-out-lbl {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.sim-out-val {
  font-size: 36px;
  font-weight: 300; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sim-out.sim-roi .sim-out-val { color: var(--accent); }
.sim-out-sub {
  font-size: 9.5px; letter-spacing: 0.08em;
  color: var(--ink-dim); text-transform: uppercase;
}

.sim-honesty {
  font-size: 11px; line-height: 1.65;
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0.02em;
  max-width: 760px;
}
.sim-honesty em { color: var(--ink-soft); font-style: italic; }

/* ── Methodology / colophon ───────────────────────────────── */
.method-grid {
  margin-top: 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 48px;
}
.method-head {
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 12px;
}
.method-grid p {
  margin: 0;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft);
}
.method-grid em { color: var(--ink); font-style: italic; }
.method-ctas {
  margin-top: 48px;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.method-ctas .btn-outline {
  padding: 12px 20px;
  color: var(--ink); border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 200ms, color 200ms;
}
.method-ctas .btn-outline:hover {
  background: var(--ink); color: var(--paper);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .k-grid { grid-template-columns: 1fr; }
  .classify-grid { grid-template-columns: 1fr; gap: 32px; }
  .classify-output { position: static; }
  .method-grid { grid-template-columns: 1fr; gap: 28px; }
  .sim-controls { grid-template-columns: 1fr; gap: 20px; }
  .sim-outputs { grid-template-columns: 1fr; }
  .sim-flow { flex-direction: column; }
  .sim-arrow { transform: rotate(90deg); }
}
@media (max-width: 700px) {
  .seg-hero { padding: 110px 24px 40px; }
  .seg-section { padding: 56px 24px; }
  .seg-title { font-size: 52px; }
  .seg-dateline { gap: 20px; }
  #profile-grid { grid-template-columns: repeat(2, 1fr); }
  .segment-cards { grid-template-columns: 1fr; }
  .classify-input-row { grid-template-columns: 108px 1fr 64px; gap: 10px; }
  .classify-input-row label { font-size: 10px; }
  .seg-table th, .seg-table td { padding: 10px 6px; font-size: 12px; }
  .seg-table td.name { font-size: 18px; }
  .method-ctas { flex-direction: column; align-items: stretch; }
  .method-ctas .btn-outline { text-align: center; }
}

@media (max-width: 900px) {
  /* profile-grid adapts on this breakpoint too (matches main.css metrics-grid) */
  #profile-grid { grid-template-columns: repeat(3, 1fr); }
}