/* =========================================================
   PAMS — Porsche AfterSales Marketing Program
   Reusable component stylesheet. Page-agnostic by design.
   ========================================================= */

/* ---------- Web fonts ---------- */
/* Porsche Next — the brand typeface. The woff2 files live alongside this
   stylesheet in app/static and are wired up here so every page resolves the
   family named in --font-sans, falling back to Helvetica/Arial until the font
   swaps in. Only Thin / Regular / Bold weights ship, so requests for 600
   (semibold) resolve to the nearest available face (Bold) per the CSS
   font-matching rules. Paths are relative to this file, so they're just the
   bare filenames now that the CSS is served from /static beside the fonts. */
@font-face {
  font-family: 'Porsche Next';
  src: url('PorscheNextWLa-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Porsche Next';
  src: url('PorscheNextWLa-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Porsche Next';
  src: url('PorscheNextWLa-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Porsche Next';
  src: url('PorscheNextWLa-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Porsche Next';
  src: url('PorscheNextWLa-Thin.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Porsche Next';
  src: url('PorscheNextWLa-ThinItalic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-card: #e5e5e5;
  --color-card-soft: #efefef;
  --color-text: #0a0a0a;
  --color-text-muted: #6b6b6b;
  --color-divider: #cfcfcf;
  --color-border: #d8d8d8;
  --color-journey-car: #93a8a1;      /* muted oak-green vehicle silhouette */
  --color-accent: #D5001C;
  --color-accent-hover: #b30018;
  --color-sidebar-bg: #ffffff;
  --color-sidebar-selected: #e5e5e5;
  --color-sidebar-hover: #f2f2f2;
  --color-checkbox-border: #b8b8b8;
  --color-checkbox-bg: #ffffff;

  /* Chart palette */
  --color-chart-charcoal: #3a3a3a;   /* donut "Direct Mail" segment */
  --color-chart-grey:     #9a9a9a;   /* donut "Digital" segment */
  --color-insight-bg:     #111111;   /* near-black insight panel */
  --color-insight-text:   #c9c9c9;   /* light-grey body copy on the panel */

  /* Typography */
  --font-sans: 'Porsche Next', 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --size-heading-xl: 32px;
  --size-heading-lg: 22px;
  --size-heading-md: 18px;
  --size-body: 15px;
  --size-label: 13px;
  --size-small: 12px;
  --size-stat-number: 44px;

  /* Radii */
  --radius-card: 24px;
  --radius-card-sm: 1px;
  --radius-pill: 999px;
  --radius-checkbox: 4px;

  /* Shadows */
  --shadow-soft: 0 8px 12px 0px rgba(0, 0, 0, 0.18);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: var(--font-sans);
}

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--font-weight-bold); }

button { all: unset; cursor: pointer; font-family: inherit; }

a { color: inherit; text-decoration: none; }

/* ---------- App shell layout ---------- */
.app-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  min-height: 100vh;
}

.app-header { grid-area: header; }
.app-sidebar { grid-area: sidebar; }
.app-main    { grid-area: main; min-width: 0; }

.container {
  padding: var(--space-6) var(--space-7);
  max-width: 1400px;
}

.section { margin-bottom: var(--space-7); }

.row {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.row--2col { grid-template-columns: 1fr 1fr; }
.row--3col { grid-template-columns: 1fr 1fr 1fr; }
/* Wider-left split for a primary chart + a secondary chart. */
.row--charts { grid-template-columns: 1.6fr 1fr; align-items: stretch; }

/* ---------- Header ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-header__logo {
  display: inline-flex;
  width: 56px;
  height: 56px;
}
.app-header__logo svg { width: 100%; height: 100%; }

/* Image-based brand lockup (crest + wordmark in one asset) */
.app-header__logo-img {
  display: block;
  height: 52px;
  width: auto;
}

.app-header__title {
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  line-height: 1.15;
  white-space: pre-line;
}

.app-header__account {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-border);
}

.app-header__account-name,
.app-header__account-role,
.app-header__user-email {
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-label);
  border-right: 1px solid var(--color-border);
  background: var(--color-card-soft);
  color: var(--color-text-muted);
}
.app-header__account-role {
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}
.app-header__user-email {
  background: var(--color-bg);
  color: var(--color-text);
}

.app-header__user-icon {
  padding: var(--space-3) var(--space-4);
  display: inline-flex;
  align-items: center;
}
.app-header__user-icon svg { width: 20px; height: 20px; }

/* ---------- Sidebar ---------- */
.app-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--color-sidebar-bg);
  padding: var(--space-5) 0;
  min-height: 100%;
}

.nav { flex: 0 0 auto; }

.nav-item {
  font-size: var(--size-body);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.nav-item:hover { background: var(--color-sidebar-hover); }
.nav-item--selected {
  background: var(--color-sidebar-selected);
  font-weight: var(--font-weight-semibold);
}
.nav-item--selected:hover { background: var(--color-sidebar-selected); }

/* Row layout lives on the inner wrapper so the whole row — padding included —
   is clickable for items that link to a page. Items whose page doesn't exist
   yet reuse the same wrapper as a non-navigating <span>. */
.nav-item__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  color: inherit;
  text-decoration: none;
}

.nav-item__label { flex: 1; }
.nav-item__chevron {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  line-height: 1;
}

.brand-wordmark {
  margin-top: auto;
  padding: var(--space-6) var(--space-5) var(--space-5);
  display: flex;
  align-items: flex-end;
}
.brand-wordmark svg { width: 160px; height: auto; }
/* Image variant of the bottom-left wordmark (uses the real Porsche wordmark). */
.brand-wordmark__img { width: 170px; height: auto; }

/* ---------- Page header (title + filters) ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.page-title {
  font-size: var(--size-heading-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.filter-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.filter-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  min-width: 180px;
  border: 1px solid var(--color-text);
  background: var(--color-bg);
  font-size: var(--size-label);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
}
.filter-select::after {
  content: '\25BE'; /* ▾ */
  margin-left: var(--space-3);
  font-size: 12px;
  color: var(--color-text);
}

/* ---------- Section titles ---------- */
.section-title {
  font-size: var(--size-heading-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-5);
}

/* Lead / descriptive copy beneath a title. Reusable on any page. */
.section-text {
  font-size: var(--size-body);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 70ch;
  margin-bottom: var(--space-6);
}

/* ---------- Stat tiles ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.stat-tile {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
}
.stat-tile:not(:first-child) {
  padding-left: var(--space-4);
}

.stat-tile__label {
  font-size: var(--size-label);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-regular);
}
.stat-tile__value {
  font-size: var(--size-stat-number);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.5px;
}

/* ---------- Segment cards ---------- */
.seg-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
}
.seg-card--wide { grid-column: 1 / -1; }

.seg-card__title {
  font-size: var(--size-heading-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-5);
}

.seg-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.seg-card__grid { display: grid; }
.seg-card__grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.seg-card__grid--divided > * {
  padding: 0 var(--space-5);
  border-left: 1px solid var(--color-divider);
}
.seg-card__grid--divided > *:nth-child(3n+1) {
  border-left: none;
  padding-left: 0;
}

.seg-card__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.seg-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--size-body);
  cursor: pointer;
}
.seg-option__label {
  color: var(--color-text);
}
.seg-option__count {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* ---------- Metric list (label / value rows) ---------- */
/* Body of a report card: a left-aligned label with a bold right-aligned value. */
.metric-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.metric-row__label {
  color: var(--color-text-muted);
  font-size: var(--size-body);
}
.metric-row__value {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--size-body);
}

/* ---------- Charts ---------- */
/* A titled chart sits on the page background (no card). The header row carries
   the title on the left and an optional legend on the right. */
.chart-panel {
  display: flex;
  flex-direction: column;
}
.chart-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.chart-panel__title {
  font-size: var(--size-heading-lg);
  font-weight: var(--font-weight-bold);
}
.chart-panel__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Legend: a coloured dot + label. Reusable beside any chart. */
.legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-label);
  color: var(--color-text-muted);
}
.legend__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  flex-shrink: 0;
}
.legend__dot--accent { background: var(--color-accent); }
.legend__dot--muted  { background: var(--color-text-muted); }

/* Line chart: a single inline SVG drawn in its own coordinate space so axes,
   gridlines, lines, marker and tooltip stay aligned as the SVG scales. */
.linechart { width: 100%; }
.linechart__svg { display: block; width: 100%; height: auto; }
.linechart__grid { stroke: var(--color-border); stroke-width: 1; }
.linechart__axis-label {
  fill: var(--color-text-muted);
  font-size: 11px;
  font-family: var(--font-sans);
}
.linechart__line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.linechart__line--revenue { stroke: var(--color-accent); }
.linechart__line--ros     { stroke: var(--color-text-muted); }
.linechart__indicator { stroke: var(--color-divider); stroke-width: 1; }
.linechart__marker { fill: var(--color-accent); stroke: #fff; stroke-width: 2; }
.linechart__tip-box { fill: #fff; }
.linechart__tip-value {
  fill: var(--color-text);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: 14px;
}
.linechart__tip-label {
  fill: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
}

/* Donut: stacked stroked circles (circumference ~100 so dasharray == percent),
   with a white centre hole. Labels are an HTML overlay positioned over each
   segment as a percentage of the square wrapper, so they track the donut as it
   scales. */
.donut {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.donut__svg { display: block; width: 100%; height: auto; }
.donut__seg { fill: none; stroke-width: 12.074; }
.donut__seg--email   { stroke: var(--color-accent); }
.donut__seg--mail    { stroke: var(--color-chart-charcoal); }
.donut__seg--digital { stroke: var(--color-chart-grey); }
.donut__label {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  line-height: 1.1;
  pointer-events: none;
}
.donut__label-name { display: block; font-size: var(--size-small); }
.donut__label-pct  {
  display: block;
  font-size: var(--size-heading-md);
  font-weight: var(--font-weight-bold);
}

/* ---------- Insight panel (AI-summary callout) ---------- */
.insight-panel {
  background: var(--color-insight-bg);
  color: #ffffff;
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-7);
}
.insight-panel__title {
  font-size: var(--size-heading-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}
.insight-panel__text {
  color: var(--color-insight-text);
  font-size: var(--size-body);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
.insight-panel__text:last-child { margin-bottom: 0; }

/* ---------- Checkboxes ---------- */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkbox__box {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-checkbox-border);
  background: var(--color-checkbox-bg);
  border-radius: var(--radius-checkbox);
  flex-shrink: 0;
  position: relative;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.checkbox__input:checked + .checkbox__box {
  background: var(--color-text);
  border-color: var(--color-text);
}
.checkbox__input:checked + .checkbox__box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox__input:focus-visible + .checkbox__box {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Buttons / CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  font-size: var(--size-heading-md);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-checkbox);
  transition: background-color 120ms ease;
}
.btn--primary {
  background: var(--color-accent);
  color: #ffffff;
}
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--block { width: 100%; height: 100%; }
.btn--dark { background: var(--color-text); color: #ffffff; }
.btn--dark:hover { background: #2a2a2a; }
/* Compact button (e.g. the "Save Audience" actions on the audience page). */
.btn--sm { padding: var(--space-3) var(--space-5); font-size: var(--size-body); }

.cta-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.cta-card:hover { background: var(--color-accent-hover); }
.cta-card__title {
  color: #ffffff;
  font-size: 28px;
  font-weight: var(--font-weight-bold);
}

/* ---------- Selected campaign audience summary ---------- */
/* Third column of the segment row. Unlike the seg-cards beside it, this sits
   directly on the page (no card background); the Generate Campaign button is
   anchored to the bottom so it lines up with the cards' lower edge. */
.summary { display: flex; flex-direction: column; }
.summary__title {
  font-size: var(--size-heading-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}
.summary__headcount {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.summary__count {
  font-size: var(--size-stat-number);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.5px;
}
.summary__count-label { font-size: var(--size-body); color: var(--color-text-muted); }
.summary__cost-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-body);
  margin-bottom: var(--space-2);
}
.summary__divider {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--space-3) 0;
}
.summary__cost-row--total { font-weight: var(--font-weight-bold); }
.summary .cta-card { margin-top: auto; }

/* ---------- Campaign footer (audience size · investment · generate) ---------- */
/* Three blocks beneath the segment builder: the live audience tally + a save
   action, the estimated investment breakdown, and the prominent Generate
   Campaign CTA. Equal columns stretch to a shared height so the red CTA fills
   its cell beside the taller investment block. Reuses the .summary__* count and
   cost-row pieces. */
.campaign-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-7);
  align-items: stretch;
  margin-top: var(--space-7);
}
.campaign-footer__block { display: flex; flex-direction: column; }
.campaign-footer__block .btn { align-self: flex-start; }
.campaign-footer__title {
  font-size: var(--size-heading-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-5);
}
.campaign-footer__note {
  margin: var(--space-4) 0 0;
  font-size: var(--size-small);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ---------- Upload custom audience card ---------- */
/* Reuses the divided 3-column seg-card grid (same as Mileage Distribution).
   Each column stacks copy/controls via the .seg-card__col gap; buttons hug the
   left rather than stretching the full column width. */
.upload-col__lead { margin: 0; font-weight: var(--font-weight-bold); }
.upload-col__text { margin: 0; color: var(--color-text-muted); line-height: 1.5; }
.upload-col__note {
  margin: 0;
  font-size: var(--size-small);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.upload-col .btn,
.upload-col .upload-btn { align-self: flex-start; }
.upload-link { color: var(--color-accent); text-decoration: underline; }
.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-checkbox);
  font-weight: var(--font-weight-semibold);
  transition: border-color 120ms ease;
}
.upload-btn:hover { border-color: var(--color-text); }

/* ---------- Two-pane workspace (picker + live preview) ---------- */
/* Left column sizes to its content (the thumbnail grid); the preview takes
   the remaining space. Stacks vertically on narrower screens. */
.split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

/* Equal-column variant (e.g. info panel + form). Inherits .split's gap,
   alignment, and the 1340px stacking rule defined further below. */
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ---------- Thumbnail grid ---------- */
.thumb-grid {
  display: grid;
  gap: var(--space-5);
}
.thumb-grid--3col { grid-template-columns: repeat(3, max-content); }

/* A selectable thumbnail that frames a scaled-down document. The inner
   .__scaler renders the real component at full design width and `zoom`s it
   down, so the frame auto-sizes to the shrunk content (no clipping, no
   per-template height guessing) and the same markup powers full-size previews
   and thumbnails alike. */
.template-thumb {
  --thumb-design-w: 600px;
  --thumb-zoom: 0.33;
  box-sizing: content-box;
  display: block;
  width: calc(var(--thumb-design-w) * var(--thumb-zoom));
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.template-thumb:hover { border-color: var(--color-divider); }
.template-thumb--selected,
.template-thumb--selected:hover { border-color: var(--color-accent); }

.template-thumb__scaler {
  width: var(--thumb-design-w);
  zoom: var(--thumb-zoom);
}

/* ---------- Preview pane ---------- */
.preview-pane {
  width: 100%;
  max-width: 600px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

/* ---------- "PORSCHE" text wordmark ---------- */
/* Inherits color from context. padding-left balances the trailing
   letter-spacing so the glyphs stay optically centered. */
.wordmark {
  display: inline-block;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  text-transform: uppercase;
}

/* ---------- Email document (reusable email layout) ---------- */
.email-doc {
  width: 100%;
  background: #ffffff;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
}

/* Photo placeholder: neutral gradient (overridable per template via
   --hero-tint) with the white wordmark near the top, as in the mockup. */
.email-doc__hero {
  height: 320px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 36px;
  background: var(--hero-tint, linear-gradient(135deg, #4a5560 0%, #222831 100%));
}
.email-doc__hero .wordmark {
  color: #ffffff;
  font-size: 24px;
}

.email-doc__body { padding: 32px 40px 40px; }

.email-doc__heading {
  font-size: 26px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin-bottom: 24px;
}

.email-doc__text { margin: 0 0 16px; }

.email-doc__links { margin-top: 28px; }
.email-doc__links-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
}
.email-doc__link { display: block; padding: 3px 0; }

.email-doc__social { margin-top: 28px; }
.email-doc__social-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: 12px;
}
.email-doc__social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #0a0a0a;
  border-radius: var(--radius-checkbox);
  color: #ffffff;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  flex-shrink: 0;
}

.email-doc__footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.email-doc__footer p { margin: 0 0 10px; }
.email-doc__footer a {
  color: var(--color-text-muted);
  text-decoration: underline;
}
.email-doc__footer-wordmark {
  text-align: center;
  margin: 28px 0 12px;
}
.email-doc__footer-wordmark .wordmark {
  color: var(--color-text);
  font-size: 18px;
}

/* ---------- Email container (production email markup) ---------- */
/* Self-contained styles for the real table-based Porsche email. Everything is
   scoped under .email-container so the email's global element rules (table / td /
   p / a / h1) and its !important sizing stay inside the email and never leak into
   the surrounding PAMS UI. Reused by any .template-thumb (and the preview) that
   embeds an .email-container; fonts come from the local Porsche Next faces
   declared at the top of this file (var(--font-sans)). The retained !important
   flags carry real cascade meaning — e.g. .dealership-name must beat the
   more-specific .dealership-row p, and .offer-row must beat .row-padding. */
.email-container {
  width: 600px;
  max-width: 600px;
  background: #ffffff;
}
.email-container,
.email-container table,
.email-container td,
.email-container p,
.email-container a {
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  line-height: 1.2;
}
.email-container img { display: block; border: 0; max-width: 100%; height: auto; }
.email-container table { border-spacing: 0; border-collapse: collapse; }
.email-container p { margin-bottom: 20px; }
.email-container a,
.email-container a:visited,
.email-container a:active { color: #000000; font-weight: 700; }
.email-container a:hover { color: #737278; }
.email-container h1 { font-weight: 700; font-size: 36px; line-height: 1.2; }

.email-container .row-padding { padding: 40px 40px 0 40px; }
.email-container .customer-name { font-weight: 700; }
.email-container .disclaimer p { font-size: 11px; margin-bottom: 10px !important; }
.email-container .dealership-row p { margin-bottom: 5px !important; font-size: 12px; }
.email-container .dealership-row a { font-weight: 400; text-decoration: none; }
.email-container .dealership-name { font-weight: 700; font-size: 16px !important; }
.email-container .offer-row { padding-top: 0 !important; }
.email-container .offer-disclaimer { font-size: 10px; line-height: 1.2; }
.email-container .footer-logo { width: 150px; margin: 0 auto 100px auto; padding: 10px; }

.email-container .schedule-service-button {
  background-color: #000000;
  padding: 10px 20px;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none !important;
  display: inline-block;
  margin-top: 15px;
}
.email-container .schedule-service-button:hover { background-color: #737278; }

/* Mobile email reflow (only fires when the browser viewport itself is ≤600px). */
@media only screen and (max-width: 600px) {
  .email-container { width: 100% !important; max-width: 100% !important; }
  .email-container .row-padding { padding: 30px 30px 0 30px !important; }
}

/* ---------- Campaign Builder: Email edit ---------- */
/* The "Customize your email." step renders the email-container (600px) with its
   editable regions swapped for real form controls, plus a muted helper label to
   the right of every field. Each label is absolutely positioned at the right
   edge of the 600px frame: its anchor is the field's own 600px-wide box — the
   .ee-field wrapper for the subject/preview inputs, or the full-width table cell
   .ee-cell for the in-email fields — so left:100% always lands at the email's
   right edge regardless of the row-padding inset on the control itself. */
.email-edit {
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

/* Intro copy: tip line hugs the lead paragraph above it. */
.cb-intro-copy { margin-bottom: var(--space-6); }
.cb-intro-copy .section-text { margin-bottom: var(--space-2); }
.cb-edit-tip {
  font-size: var(--size-label);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Positioning anchors for the right-hand labels. */
.ee-field { position: relative; }
.ee-cell { position: relative; }

/* Editable controls — same visual language as the reusable .input/.textarea. */
.ee-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-checkbox);
}
.ee-input:focus { outline: none; border-color: var(--color-text); }

/* Headline and offer mirror the email's h1 (36px / 700). */
.ee-headline,
.ee-offer {
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  resize: vertical;
  min-height: 92px;
}
.ee-body {
  line-height: 1.4;
  resize: vertical;
  min-height: 150px;
}
/* Disclaimer mirrors .offer-disclaimer (10px) and stays a short box. */
.ee-disclaimer {
  font-size: 10px;
  max-width: 380px;
}

/* Helper labels, pinned just past the email's right edge and aligned to the
   top of each field (top values track each cell's top padding). */
.ee-hint {
  position: absolute;
  left: 100%;
  margin-left: var(--space-6);
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--size-body);
}
.ee-field > .ee-hint { top: var(--space-3); }
.ee-cell > .ee-hint { top: 40px; }
.row-padding--tight.ee-cell > .ee-hint { top: var(--space-4); }
.offer-row.ee-cell > .ee-hint { top: 0; }

/* Tightens the greeting → body → CTA cluster so it reads as one block. */
.email-container .row-padding--tight { padding-top: var(--space-4); }

/* ---------- Campaign Builder: Direct mail edit ---------- */
/* The "Customize your direct mail" step renders the mailer as two stacked
   panels — the photo front and the letter back — each capped at the 600px
   editor width, with a muted helper label pinned just past the panel's right
   edge (the same right-rail treatment the email-edit fields use). */
.dm-edit {
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Each panel anchors its right-hand helper label to its own top-right corner. */
.dm-panel { position: relative; }
.dm-panel > .ee-hint { top: 0; }

/* ----- Front: hero photo with an editable caption overlaid bottom-left. The
   dark gradient is a fallback so the white caption stays legible before — or
   if — the photo loads. ----- */
.dm-front {
  position: relative;
  min-height: 320px;
  line-height: 0;
  background: linear-gradient(135deg, #4a5560 0%, #222831 100%);
}
.dm-front img { display: block; width: 100%; height: auto; }
.dm-front__caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 62%;
  padding: 10px 14px;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-checkbox);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  resize: none;
}
.dm-front__caption:focus { outline: none; border-color: #ffffff; }

/* ----- Back: postcard — letter copy on the left, recipient address right. ----- */
.dm-back {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  background: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.5;
}
.dm-back__main { min-width: 0; }
.dm-back__greeting { margin: 0 0 var(--space-3); }

/* Editable fields reuse .ee-input for the bordered-box look; the sizes here
   scale that box down to suit the denser postcard layout. */
.dm-back__body {
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: var(--space-3);
}
.dm-back__offer {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  resize: vertical;
  margin-bottom: var(--space-3);
}
.dm-back__disclaimer { font-size: 10px; }

.dm-back__service { margin: var(--space-4) 0 0; }
.dm-back__dealership { margin-top: var(--space-5); font-size: 10px; line-height: 1.6; }
.dm-back__dealership p { margin: 0 0 2px; }
.dm-back__dealership-name { font-weight: var(--font-weight-bold); }

/* Recipient address sits in the address zone, vertically centered in the panel. */
.dm-back__aside { align-self: center; }
.dm-back__aside p { margin: 0 0 2px; }
.dm-back__recipient-name { font-weight: var(--font-weight-bold); }

/* ---------- Direct-mail document (letter + photo panel) ---------- */
/* Landscape mailer: letter copy on the left, photo panel on the right. The
   same component renders full-size in the preview and zoomed-down inside a
   .template-thumb, so there is no per-thumbnail height guessing. */
.dm-doc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  background: #ffffff;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.45;
}

.dm-doc__letter { padding: 32px 36px; }
.dm-doc__text { margin: 0 0 12px; }
.dm-doc__signature { margin-top: 20px; line-height: 1.5; }
.dm-doc__signature-name { font-weight: var(--font-weight-bold); }

/* Photo placeholder: per-template gradient (--hero-tint) with the wordmark
   top-right and the caption pinned bottom-left — mirrors .email-doc__hero. The
   grid's default align-items:stretch lets this panel match the taller letter
   column, so margin-top:auto reliably drops the caption to the bottom. */
.dm-doc__hero {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  color: #ffffff;
  background: var(--hero-tint, linear-gradient(135deg, #4a5560 0%, #222831 100%));
}
.dm-doc__hero .wordmark {
  align-self: flex-end;
  font-size: 18px;
}
.dm-doc__caption {
  margin-top: auto;
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

/* Landscape thumbnail: wider design width + larger zoom than the
   .template-thumb default (560px / 0.33) so two read clearly per row. */
.template-thumb--landscape { --thumb-design-w: 760px; --thumb-zoom: 0.5; }

/* Layout helpers — extend the existing --Ncol / preview families. */
.thumb-grid--2col { grid-template-columns: repeat(2, max-content); }
.preview-pane--wide { max-width: 1040px; }

/* ---------- Forms (reusable) ---------- */
/* Vertical form stack with labelled fields, text inputs and textareas. Spacing
   is driven by flex gap rather than <p> margins (which the reset leaves intact). */
.form { display: flex; flex-direction: column; gap: var(--space-6); }
.form p { margin: 0; }

.form-intro { display: flex; flex-direction: column; gap: var(--space-3); }

.form-section { display: flex; flex-direction: column; gap: var(--space-4); }
.form-section__title {
  font-size: var(--size-heading-md);
  font-weight: var(--font-weight-bold);
}

.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field__label { font-size: var(--size-label); color: var(--color-text); }

.input,
.textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-checkbox);
}
.input:focus,
.textarea:focus { outline: none; border-color: var(--color-text); }
.input::placeholder,
.textarea::placeholder { color: var(--color-text-muted); }

.textarea { min-height: 160px; resize: vertical; }

.form-actions { display: flex; }

/* ---------- Support page ---------- */
.support-info { display: flex; flex-direction: column; gap: var(--space-5); }

/* The info panel reuses .seg-card; these add internal rhythm + its headings. */
.support-card { gap: var(--space-4); }
.support-card__title {
  font-size: var(--size-heading-md);
  font-weight: var(--font-weight-bold);
}
.support-card__title:not(:first-child) { margin-top: var(--space-3); }
.support-card p { margin: 0; color: var(--color-text); }

.support-list { display: flex; flex-direction: column; gap: var(--space-3); }
.support-list__item { font-weight: var(--font-weight-bold); }

/* Submit confirmation. The request form has no backend yet (see
   support-form.js); a "successful" submit just reveals this card and hides the
   form fields until the page reloads. .form-success ships [hidden]; the guard
   below restores the display:none that the flex rule would otherwise mask, and
   .form--submitted hides every sibling field once the confirmation is shown. */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
}
.form-success[hidden] { display: none; }
.form--submitted > :not(.form-success) { display: none; }

.form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #ffffff;
}
.form-success__icon svg { width: 26px; height: 26px; }

.form-success__title {
  font-size: var(--size-heading-lg);
  font-weight: var(--font-weight-bold);
}
.form-success__text { color: var(--color-text-muted); }

.support-hours { line-height: 1.7; }

/* Decorative photo placeholder (no asset yet); mirrors the email/dm hero tint. */
.support-photo {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #4a5560 0%, #222831 100%);
}

/* ---------- Customer Lifecycle Journey (Service & Retention) ---------- */
/* A wide, horizontally-scrolling service/retention timeline. The intro (title,
   model picker, model showcase) stays in the normal .container; the timeline
   itself lives in a full-bleed .journey-scroll so its many milestone columns can
   run past the viewport edge and scroll sideways. --journey-col drives both the
   column width and the outcome-row offset so they stay in lock-step. */
/* Sized to its widest row (the track) via max-content so the connector rail and
   outcome branches span the full timeline width, not just the viewport; the
   parent .journey-scroll then scrolls it horizontally. */
.journey {
  --journey-col: 220px;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 100%;
}

/* Model showcase (silhouette + model name) above the timeline. */
.journey-modelbar { margin: var(--space-5) 0 var(--space-7); }

.journey-hero {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-7);
}
.journey-hero__img { width: 440px;}
.journey-hero__name { height: 120px; }
.journey-hero__model {
  font-style: italic;
  font-weight: var(--font-weight-regular);
  font-size: 44px;
  line-height: 1;
}
.journey-hero__trim {
  margin-top: var(--space-2);
  font-size: var(--size-heading-md);
  letter-spacing: 0.14em;
}

/* Shared vehicle silhouette — defined once as an SVG <symbol> and referenced via
   <use>. The body inherits --color-journey-car through currentColor; the wheels
   carry their own fill inside the symbol. Width/height are pinned in px (to the
   200x80 viewBox ratio) so the inline SVG never collapses. */
.journey-car { display: block; color: var(--color-journey-car); }
.journey-hero__car { width: 300px; height: 120px; }
.journey-mark__car { width: 220px; }

/* Full-bleed horizontal scroller; side padding matches .container so the first
   milestone lines up beneath the page title. */
.journey-scroll { overflow-x: auto; padding: 0 var(--space-7) var(--space-7); }

/* Row of milestone columns with a dotted "road" threaded through the cars. */
.journey-track {
  position: relative;
  display: flex;
  align-items: stretch;   /* equal-height columns so every connector ends on the rail */
  gap: var(--space-9);
}
.journey-track__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  border-top: 2px dashed var(--color-divider);
  z-index: 0;
  margin-left: var(--journey-col);
  margin-right: var(--journey-col);
}

.journey-stop {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--journey-col);
  display: flex;
  flex-direction: column;
}
.journey-stop__marker {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.journey-stop__head { margin: var(--space-4) 0 var(--space-3); }
.journey-stop__mile,
.journey-stop__title {
  font-size: var(--size-label);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

/* Shared white card — used by both milestones and the outcome branches. */
.journey-card {
  background: #ffffff;
  border-radius: var(--radius-card-sm);
  border: solid 2px var(--color-divider);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}

.journey-field + .journey-field { margin-top: var(--space-3); }
.journey-field__label {
  font-size: var(--size-small);
  font-weight: var(--font-weight-bold);
  margin-bottom: 2px;
}
.journey-field__items li { font-size: var(--size-small); line-height: 1.4; }

/* Milestone cards size to their content. The column then ends in a vertical
   connector that absorbs the leftover height beneath the card and drops to the
   outcome rail — a flex item, so a taller card leaves a shorter line and a
   shorter card a longer one, while flex-basis guarantees every stop keeps at
   least one drop. The mirror of .journey-branch::before, which stubs up to the
   same rail from below. */
.journey-stop::after {               /* vertical connector down to the rail */
  content: '';
  align-self: center;
  flex: 1 0 var(--space-7);
  width: 0;
  border-left: 2px solid var(--color-divider);
}

/* Outcome branches (Engaged / Non-Engaged) hang from a connector rail that runs
   the full width of the timeline. */
.journey-branches {
  position: relative;
  padding-top: var(--space-6);
}
.journey-branches__rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 2px solid var(--color-divider);
  margin-left: calc((var(--journey-col) / 2) - 1px);
  margin-right: calc((var(--journey-col) / 2) - 1px);
}
/* Offset the cards by one column so they sit beneath the early milestones. */
.journey-branches__row {
  display: flex;
  gap: var(--space-4);
  padding-left: calc(var(--journey-col) + var(--space-4));
}
.journey-branch { position: relative; flex: 0 0 var(--journey-col); }
.journey-branch::before {            /* vertical stub up to the rail */
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--space-6));
  height: var(--space-6);
  border-left: 2px solid var(--color-divider);
}
.journey-branch__title {
  font-size: var(--size-body);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-3);
}
.journey-branch__list { display: flex; flex-direction: column; gap: var(--space-2); }
.journey-branch__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--size-label);
}
.journey-branch__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
}

/* ---------- Utilities ---------- */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive fallback ---------- */
/* Below this width the picker + preview no longer sit comfortably side by
   side, so the preview drops beneath the thumbnail grid. */
@media (max-width: 1340px) {
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main";
  }
  .app-sidebar { min-height: auto; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .stat-tile { border-right: none !important; }
  .row--2col, .row--3col, .row--charts { grid-template-columns: 1fr; }
  .campaign-footer { grid-template-columns: 1fr; }
  .seg-card__grid--3col { grid-template-columns: 1fr; }
  .seg-card__grid--divided > * {
    border-left: none;
    padding-left: 0;
    padding-bottom: var(--space-3);
  }
  .thumb-grid--3col { grid-template-columns: repeat(2, max-content); }
  .thumb-grid--2col { grid-template-columns: max-content; }
  .preview-pane--wide { max-width: 100%; }
  .dm-doc { grid-template-columns: 1fr; }
  .dm-back { grid-template-columns: 1fr; }
  .container { padding: var(--space-4); }
  /* The timeline keeps scrolling horizontally; just align its padding to the
     narrower container and shrink the model showcase. */
  .journey-scroll { padding: 0 var(--space-4) var(--space-4); }
  .journey-hero { gap: var(--space-5); }
  .journey-hero__car { width: 220px; height: 88px; }
  .journey-hero__model { font-size: 34px; }
}

@media (max-width: 460px) {
  .thumb-grid--3col { grid-template-columns: max-content; }
}

/* ---------- Campaign Builder: choose focus ---------- */
.cb-header { margin-bottom: var(--space-6); }
.cb-eyebrow {
  font-size: var(--size-heading-md);
  margin-bottom: var(--space-3);
}

/* Step breadcrumb. Current step reads in full-strength text; the rest are muted. */
.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--size-body);
  color: var(--color-text-muted);
}
.steps__item--current { color: var(--color-text); }
.steps__sep { color: var(--color-text-muted); }

/* Grid of selectable campaign options. Wraps 4 + 3 to mirror the mockup. */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: 980px;
  margin-bottom: var(--space-7);
}
.focus-card {
  position: relative;
  display: block;
  border-radius: var(--radius-checkbox);
  overflow: hidden;
}
/* Grey placeholder standing in for the campaign image. */
.focus-card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-card);
}
.focus-card__label {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  color: #ffffff;
  font-size: var(--size-body);
  font-weight: var(--font-weight-bold);
}
/* Bottom gradient so the white label stays legible over the placeholder. */
.focus-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Light-grey secondary button (e.g. "Go back"); pairs with .btn--dark. */
.btn--secondary { background: var(--color-card); color: var(--color-text); }
.btn--secondary:hover { background: var(--color-divider); }

/* Medium-grey button (e.g. "Skip email…"); a step between .btn--secondary
   (light grey) and .btn--dark (black). */
.btn--muted { background: #8a8a8a; color: #ffffff; }
.btn--muted:hover { background: #767676; }

/* ---------- Campaign Builder: campaign complete ---------- */
/* Submission confirmation: a list of label/value summary rows bracketed by
   dividers, sitting between the intro copy and the "make a change" note. */
.cb-summary { margin-bottom: var(--space-6); }
.cb-summary__row {
  font-size: var(--size-body);
  margin-bottom: var(--space-3);
}
.cb-summary__divider {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--space-5) 0;
}

/* ---------- Campaign Builder: confirm focus ---------- */
/* Shown once a focus is chosen: a photo placeholder beside a short intro,
   then the branch actions (set up email, or skip straight to direct mail). */
.cb-intro {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  max-width: 860px;
  margin-bottom: var(--space-7);
}

/* Photo placeholder: gradient + top-centred wordmark, mirroring .email-doc__hero. */
.cb-intro__media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 36px;
  aspect-ratio: 5 / 4;
  background: var(--hero-tint, linear-gradient(135deg, #4a5560 0%, #222831 100%));
}
.cb-intro__media .wordmark {
  color: #ffffff;
  font-size: 24px;
}

/* Intro copy reuses .section-text; the grid owns spacing, so drop its margin. */
.cb-intro__text { margin-bottom: 0; }

@media (max-width: 900px) {
  .focus-grid { grid-template-columns: repeat(2, 1fr); }
  .cb-intro { grid-template-columns: 1fr; max-width: 420px; }
}

/* ---------- Campaign Builder: review & launch (submit) ---------- */
/* A stacked summary of the campaign: each line is a [label][content] grid, with
   a top rule separating the major sections. Section labels and the inner pair
   keys read muted; the values read full-strength. */
.cb-review { max-width: 880px; }

.cb-review__line {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5) 0;
}
.cb-review__line--divided { border-top: 1px solid var(--color-divider); }

.cb-review__label { color: var(--color-text-muted); }

/* Campaign-name field doesn't need the full content width. */
.cb-review__name-input { max-width: 480px; }

/* Label/value pairs inside a section. A fixed key column keeps the values
   aligned across every section (sized for the longest key). */
.cb-review__pairs {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  align-items: start;
}
.cb-review__pairs dt { color: var(--color-text-muted); }
.cb-review__pairs dd { margin: 0; color: var(--color-text); }

.cb-review__edit {
  display: inline-block;
  margin-top: var(--space-5);
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

/* Cost lines reuse the .cb-review__line grid (six cells → three rows). */
.cb-review__cost-val { color: var(--color-text); }
.cb-review__total {
  margin-top: var(--space-2);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--size-heading-lg);
}

.cb-review__checks { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-review__check { align-items: flex-start; }   /* labels can wrap to 2 lines */

.cb-review__disclaimer { max-width: 880px; margin: var(--space-5) 0 var(--space-6); }
.cb-review__success { margin-bottom: var(--space-6); }

/* Disabled action button (e.g. Launch until every confirmation is checked). */
.btn:disabled {
  background: var(--color-divider);
  color: var(--color-text-muted);
  cursor: not-allowed;
}