/* ============================================
   FEATURE DETAIL PAGES (shared)
   ============================================

   One stylesheet for all three child pages under /features/:
     page-feature-negative-keywords.php
     page-feature-budget-pacing.php
     page-feature-spend-drop-off.php

   Enqueued from functions.php against that template list rather than through
   the /assets/css/{template-slug}.css auto-loader, because the three pages are
   structurally identical and three copies of this file would drift the first
   time one of them was edited. Same reasoning as the page-pricing.css enqueue
   on page-account (see functions.php).

   TWO CLASS FAMILIES, AND THE SPLIT IS LOAD-BEARING:

   fx-   page layout: hero, outcome grid, numbered steps, limits, final CTA.
   mkp-  MOCKUP. Purely presentational recreations of real in-app components.

   WHY THE MOCKUPS ARE NOT THE APP'S OWN CLASSES. Every app stylesheet
   (page-negative-keywords.css, page-gads-budget-pacing.css,
   page-gads-monitoring.css) is loaded only on its own template, and the shared
   app rules in style.css that these pages would want are scoped to
   body[class*="page-template-page-app..."] / body.ppcs-app. A marketing page
   carries none of those body classes, so an app class used here would render
   as unstyled markup. The mkp- family mirrors those components visually while
   pulling every value from the same design tokens in style.css, so the two
   cannot drift in color, radius or type scale even though they share no rule.

   THE MOCKUPS CONTAIN NOTHING FOCUSABLE. No button, input, select, anchor,
   [tabindex] or [contenteditable] appears inside any .mkp block -- fake
   controls are divs and spans styled to look like controls. A keyboard user
   tabs straight past a mockup instead of landing inside a dead interface.
   Each mockup root carries role="img" plus an aria-label describing what it
   shows, so a screen reader gets one sentence instead of a fake data table.
   ============================================ */


/* ============================================
   SHARED SECTION HEADER
   ============================================ */

.fx-section-header {
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
  text-align: center;
}

.fx-section-header h2 {
  margin-bottom: var(--space-3);
}

.fx-section-header p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: 0;
}


/* ============================================
   HERO
   ============================================ */

.fx-hero {
  background: linear-gradient(160deg, #F0F5FF 0%, var(--color-bg) 60%);
  padding-block: var(--space-16) var(--space-16);
  text-align: center;
}

.fx-hero__inner {
  max-width: 780px;
}

.fx-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
  letter-spacing: 0.01em;
}

/* --space-8, not the --space-5 this carried while .fx-hero__sub sat
   between it and the CTA: the sub owned that larger gap down to the
   button, so inheriting only the smaller one left the button crowded
   against the headline. */
.fx-hero__headline {
  font-size: clamp(2rem, 3.5vw, var(--text-5xl));
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
}

.fx-hero .btn {
  margin-inline: auto;
}

/* Back-to-parent link, so a child page under /features/ always has a way up. */
.fx-hero__back {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}


/* ============================================
   OUTCOMES
   ============================================ */

.fx-outcomes {
  background: var(--color-surface);
}

.fx-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.fx-outcome {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fx-outcome__icon {
  width: 44px;
  height: 44px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-outcome h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: 0;
  line-height: 1.3;
}

.fx-outcome p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 0;
}


/* ============================================
   HOW IT WORKS -- NUMBERED STEPS
   ============================================ */

.fx-steps {
  background: #EEF2FF;
}

.fx-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}

.fx-step:last-child {
  margin-bottom: 0;
}

/* center, not flex-start: flex-start was right while the head held a
   title plus .fx-step__line, a block taller than the 36px number. The
   title alone is one 26px line, which top-aligning leaves sitting 5px
   above the number's center. A title that wraps to two lines is 52px
   and centers just as well. */
.fx-step__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.fx-step__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

/* No bottom margin: this is the only thing in the step head now that
   .fx-step__line is gone, and .fx-step__head already carries the gap
   down to the mockup. */
.fx-step__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: 0;
  line-height: 1.3;
}




/* ============================================
   WHAT IT DOES NOT DO
   ============================================ */

.fx-limits {
  background: var(--color-dark);
}

.fx-limits h2 {
  color: var(--color-surface);
}

.fx-limits .fx-section-header p {
  color: rgba(255, 255, 255, 0.7);
}

.fx-limits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.fx-limit {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.fx-limit h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-surface);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.fx-limit__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.fx-limit__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.fx-limit__list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: #8FB8FF;
}


/* ============================================
   FINAL CTA
   ============================================ */

.fx-final-cta {
  background: var(--color-primary);
  padding-block: var(--space-20);
}

.fx-final-cta__inner {
  text-align: center;
  max-width: 620px;
}

.fx-final-cta h2 {
  color: var(--color-surface);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

.fx-final-cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
}

.fx-final-cta .btn--primary {
  background: var(--color-surface);
  color: var(--color-primary);
}

.fx-final-cta .btn--primary:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}


/* ============================================
   MOCKUP SHELL
   ============================================
   Window chrome around every recreation, so a reader reads it as a picture of
   the product rather than as live page furniture they can click. */

.mkp {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.mkp__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-dark);
}

.mkp__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.mkp__title {
  margin-left: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkp__body {
  padding: var(--space-5);
  background: var(--color-bg);
}

.mkp__body--flush {
  padding: 0;
}

/* Contained horizontal scroll. A wide recreation may overflow inside this box
   on a narrow screen, which is fine; what must never happen is the page itself
   scrolling sideways. max-width: 100% plus overflow-x here keeps the overflow
   inside the mockup. */
.mkp-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ============================================
   MOCKUP: FAKE CONTROLS
   ============================================
   Divs and spans only. Nothing here is a button, an input or a link. */

.mkp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.mkp-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}

.mkp-btn--ghost {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.mkp-btn--tiny {
  padding: 5px 10px;
}

.mkp-link {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
}

.mkp-muted-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.mkp-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 10px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkp-select::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: translateY(-2px) rotate(45deg);
}

.mkp-input {
  display: block;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkp-check {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  vertical-align: middle;
}

.mkp-check--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  position: relative;
}

.mkp-check--on::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(45deg);
}

/* The app's X and restore glyphs, drawn in CSS rather than repeated as SVG
   inside a mockup that nobody can activate. */
.mkp-x {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  color: var(--color-text-muted);
}

.mkp-x::before,
.mkp-x::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 6px;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}

.mkp-x::before { transform: rotate(45deg); }
.mkp-x::after  { transform: rotate(-45deg); }


/* ============================================
   MOCKUP: STATUS PILLS (mirrors .negkw-status-filter / .mon-status-filter)
   ============================================ */

.mkp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mkp-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.mkp-pill--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}


/* ============================================
   MOCKUP: SUMMARY STAT PILLS (mirrors .negkw-stat-pill)
   ============================================ */

.mkp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mkp-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text);
  white-space: nowrap;
}

.mkp-stat svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.mkp-stat strong {
  font-weight: var(--weight-bold);
}

.mkp-stat--danger strong {
  color: var(--color-danger);
}


/* ============================================
   MOCKUP: BADGES (mirrors .badge and .negkw-status-badge)
   ============================================ */

.mkp-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.mkp-badge--high    { background: #FEE2E2; color: var(--color-danger); }
.mkp-badge--medium  { background: var(--color-warning-light); color: var(--color-warning-dark); }
.mkp-badge--low     { background: var(--color-navy-light); color: var(--color-dark); }
.mkp-badge--pending { background: var(--color-navy-light); color: var(--color-dark); }
.mkp-badge--approved{ background: var(--color-primary-light); color: var(--color-primary); }
.mkp-badge--applied { background: #DCFCE7; color: var(--color-success); }


/* ============================================
   MOCKUP: DATA TABLE (mirrors .sherpa-table's look)
   ============================================
   A CSS grid rather than a real <table>: the mockup is decorative, and a grid
   lets whole columns drop out at narrow widths without markup changes. */

/* THE LABELS COLUMN IS GONE. It is a real column in the app, but labels are
   user-created and an account that has never made one renders every cell
   empty -- which on a marketing page read as a broken column full of dashes.
   Eleven columns, matching the app minus that one. */
.mkp-table {
  display: grid;
  min-width: 1000px;
  font-size: 12px;
  background: var(--color-surface);
  grid-template-columns:
    32px            /* checkbox        */
    minmax(190px, 1.4fr) /* negative keyword */
    minmax(120px, 1fr)   /* matched keyword  */
    minmax(140px, 1fr)   /* campaign         */
    58px            /* clicks          */
    82px            /* impressions     */
    68px            /* cost            */
    92px            /* annual waste    */
    78px            /* severity        */
    82px            /* status          */
    120px;          /* actions         */
}

/* Hero cut-down: the four columns that carry the argument, no horizontal
   scroll at any width the hero is ever shown at. */
.mkp-table--compact {
  min-width: 0;
  grid-template-columns:
    minmax(150px, 1.6fr)  /* negative keyword */
    minmax(110px, 1fr)    /* campaign         */
    92px                  /* annual waste     */
    78px;                 /* severity         */
}

.mkp-table__cell {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.mkp-table__cell--head {
  background: var(--color-dark);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  padding-block: 9px;
}

.mkp-table__cell--body {
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.mkp-table__row--alt .mkp-table__cell--body {
  background: var(--color-bg);
}

.mkp-table__term {
  font-weight: var(--weight-semibold);
  color: var(--color-dark);
  word-break: break-word;
}

.mkp-table__reason {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.mkp-table__mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
}

.mkp-table__num {
  font-variant-numeric: tabular-nums;
}

.mkp-table__actions {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.mkp-table__sorted::after {
  content: '\25BC';
  font-size: 8px;
  margin-left: 4px;
  opacity: 0.8;
}


/* ============================================
   MOCKUP: SELECT-ALL BANNER (mirrors .negkw-selectall-banner)
   ============================================ */

.mkp-selectall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text);
}


/* ============================================
   MOCKUP: ADVANCED FILTER PANEL (mirrors .negkw-filter-panel)
   ============================================ */

.mkp-filter {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  max-width: 720px;
}

.mkp-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.mkp-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: 10px;
  font-weight: var(--weight-bold);
}

.mkp-filter__row {
  display: grid;
  grid-template-columns: 96px 1fr 1fr 1fr 24px;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

.mkp-filter__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1;
}

.mkp-filter__add {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.mkp-filter__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}


/* ============================================
   MOCKUP: BULK ACTION BAR (mirrors .bulk-action-bar)
   ============================================
   Rendered inline here, not fixed to the viewport: this is a picture of the
   bar, and a marketing page must not pin anything to the bottom of a reader's
   screen. */

.mkp-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.mkp-bulkbar__spacer {
  flex: 1 1 auto;
  min-width: 0;
}


/* ============================================
   MOCKUP: APPLY CONFIRMATION MODAL (mirrors .negkw-modal)
   ============================================ */

.mkp-modal {
  max-width: 520px;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

.mkp-modal__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

.mkp-modal__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.mkp-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}


/* ============================================
   MOCKUP: SETTINGS BUDGET ROWS (mirrors .settings-campaign__budget)
   ============================================ */

.mkp-settings {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  max-width: 560px;
}

.mkp-settings__name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.mkp-settings__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.mkp-settings__label {
  flex: 0 0 120px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.mkp-settings__value {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.mkp-settings__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.mkp-settings__pencil {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 2px 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0.8;
}

.mkp-settings__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}


/* ============================================
   MOCKUP: BUDGET PACING CARD (mirrors .bp-card)
   ============================================ */

.mkp-bp {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.mkp-bp:last-child { margin-bottom: 0; }

.mkp-bp--over     { border-left-color: var(--color-danger); }
.mkp-bp--under    { border-left-color: var(--color-warning); }
.mkp-bp--on-track { border-left-color: var(--color-success); }

.mkp-bp__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.mkp-bp__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.mkp-bp__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mkp-bp__band {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mkp-bp--over .mkp-bp__band     { color: var(--color-danger); }
.mkp-bp--under .mkp-bp__band    { color: var(--color-warning-dark); }
.mkp-bp--on-track .mkp-bp__band { color: var(--color-success); }

.mkp-bp__figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.mkp-bp__figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mkp-bp__figure-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.mkp-bp__figure-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.mkp-bp__figure-none {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
}

.mkp-bp__figure-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mkp-bp__chart {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.mkp-bp__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: 11px;
  color: var(--color-text-muted);
}

.mkp-bp__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mkp-bp__swatch {
  width: 24px;
  height: 8px;
  flex-shrink: 0;
}

.mkp-bp__svg {
  width: 75%;
  min-width: 320px;
  height: auto;
}

.mkp-bp__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Chart strokes. Spent and Projected share a color deliberately, exactly as
   the real chart does: they are one quantity, measured then extrapolated, so
   the dash pattern is what separates them and the comparison survives
   grayscale. */
.mkp-line-spent {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
}

.mkp-line-projected {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}

.mkp-line-target {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
}

.mkp-grid-line {
  stroke: var(--color-border);
  stroke-width: 1;
}

/* 10px rather than 9px, and the svg's min-width raised to match. The chart
   scales proportionally inside a 75%-wide box, so at the old floor a 9px label
   rendered near 5px and the y-axis figures crowded the plot edge. The gutter
   between an end-anchored y label and the first gridline is set in the markup
   (labels anchor at x=47, the plot starts at x=56) rather than here. */
.mkp-axis-label {
  font-size: 10px;
  fill: var(--color-text-muted);
  font-family: var(--font-body);
}


/* ============================================
   MOCKUP: SPEND DROP-OFF SUMMARY BAND (mirrors .mon-summary-band)
   ============================================ */

.mkp-mon-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.mkp-mon-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.mkp-mon-stat__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.mkp-mon-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* ============================================
   MOCKUP: SPEND DROP-OFF CARD (mirrors .mon-card)
   ============================================ */

.mkp-mon-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.mkp-mon-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.mkp-mon-card__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.mkp-mon-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.mkp-mon-card__days {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.mkp-mon-card__pattern--fresh { color: var(--color-danger); }
.mkp-mon-card__pattern--stale { opacity: 0.7; }

.mkp-mon-card__figure {
  flex-shrink: 0;
  text-align: right;
}

.mkp-mon-card__amount {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.mkp-mon-card__amount-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mkp-mon-card__chart {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.mkp-mon-card__caption {
  margin-top: var(--space-2);
  font-size: 11px;
  color: var(--color-text-muted);
}

.mkp-mon-card__list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.mkp-mon-day {
  display: grid;
  grid-template-columns: 96px 1fr auto 20px;
  gap: var(--space-3);
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
}

.mkp-mon-day__date {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
}

.mkp-mon-day__desc {
  color: var(--color-text-muted);
  line-height: 1.5;
}

.mkp-mon-day__amount {
  font-weight: var(--weight-semibold);
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mkp-mon-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

/* Bars: ordinary days muted navy, flagged days danger, plus a solid cap along
   the top edge of the plot so a short flagged bar is findable at a glance --
   the same signal the real chart uses, for the same reason. */
.mkp-bar        { fill: var(--color-navy-light); }
.mkp-bar--flag  { fill: var(--color-danger); }
.mkp-bar-cap    { fill: var(--color-danger); }
.mkp-bar-band   { fill: var(--color-danger); opacity: 0.16; }


/* ============================================
   MOCKUP: FINDING HEADLINE ROWS
   ============================================ */

.mkp-finding {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.mkp-finding:last-child { margin-bottom: 0; }

.mkp-finding__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--color-danger);
}

.mkp-finding__headline {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  line-height: 1.4;
}

.mkp-finding__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.mkp-finding__amount {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
}


/* ============================================
   MOCKUP: READINESS NOTE (mirrors .mon-readiness)
   ============================================ */

.mkp-readiness {
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.mkp-readiness__lead {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.55;
  margin-bottom: var(--space-3);
}

.mkp-readiness__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mkp-readiness__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-xs);
}

.mkp-readiness__check {
  font-weight: var(--weight-semibold);
  color: var(--color-dark);
}

.mkp-readiness__reason {
  color: var(--color-text-muted);
}


/* ============================================
   SPLIT HERO (copy left, product visual right)
   ============================================
   Opt-in modifier on .fx-hero. The centred single-column hero is still the
   default and is what the other two feature pages use, so nothing here changes
   them. */

.fx-hero--split {
  text-align: left;
}

.fx-hero--split .fx-hero__inner {
  max-width: var(--container-max);
}

.fx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

.fx-hero__copy {
  min-width: 0;
}

.fx-hero--split .btn {
  margin-inline: 0;
}

/* min-width: 0 so a wide mockup inside a grid track shrinks instead of
   forcing the track wider than its share. */
.fx-hero__visual {
  min-width: 0;
}


/* ============================================
   STEP WITH TWO VISUALS SIDE BY SIDE
   ============================================ */

.fx-step__visuals {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* Two mockups that each need full width, stacked rather than sat side by
   side. Same gap, so a step reads the same whichever it uses. */
.fx-step__visuals--stacked {
  grid-template-columns: minmax(0, 1fr);
}


/* ============================================
   REASONS (closing argument, replaces the old limits grid on the
   spend drop-off page)
   ============================================
   Same dark navy ground the limits section used, so the page keeps its
   surface / tint / dark / primary rhythm. */

.fx-reasons {
  background: var(--color-dark);
}

.fx-reasons h2 {
  color: var(--color-surface);
}

.fx-reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.fx-reason h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-surface);
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

.fx-reason p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
  margin-bottom: 0;
}


/* ============================================
   CROSSLINKS TO THE OTHER FEATURE PAGES
   ============================================
   Real navigation, so these ARE anchors. They sit outside every .mkp block;
   the no-focusable-element rule applies to the mockups, not to the page. */

.fx-crosslinks {
  background: var(--color-surface);
}

.fx-crosslinks__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.fx-crosslink {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fx-crosslink:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.fx-crosslink__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.fx-crosslink__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

.fx-crosslink__line {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-3);
}

.fx-crosslink__more {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}


/* ============================================
   MOCKUP: ALERT BELL DROPDOWN (mirrors .alerts-dropdown / .alerts-row)
   ============================================ */

.mkp-bell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.mkp-bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mkp-bell__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
}

.mkp-bell__markall {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.mkp-bell__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mkp-bell__row:last-child {
  border-bottom: none;
}

.mkp-bell__row--unread {
  background: var(--color-primary-light);
}

.mkp-bell__type {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}

.mkp-bell__rowtitle {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-dark);
  line-height: 1.35;
}

.mkp-bell__body {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: 2px;
}

.mkp-bell__time {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
}


/* ============================================
   MOCKUP: DAILY EMAIL DIGEST
   ============================================
   The alert text renders as a SPAN styled to look like a link, not as an
   anchor. In the real email it is a link; here it must not be focusable, so
   the appearance is recreated and the behaviour is not. */

.mkp-email__meta {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.mkp-email__from {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mkp-email__subject {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-dark);
  margin-top: 2px;
}

.mkp-email__body {
  padding: var(--space-6);
  background: var(--color-surface);
}

.mkp-email__brand {
  margin-bottom: var(--space-4);
}

.mkp-email__logo {
  width: 40px;
  height: auto;
}

.mkp-email__headline {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.mkp-email__subhead {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

.mkp-email__count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.mkp-email__account {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  line-height: 1.3;
}

.mkp-email__cid {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.mkp-email__account-block + .mkp-email__account-block {
  margin-top: var(--space-6);
}

.mkp-email__table {
  width: 100%;
  border-collapse: collapse;
}

.mkp-email__th {
  text-align: left;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.mkp-email__td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  vertical-align: top;
  line-height: 1.5;
}

.mkp-email__td--date {
  white-space: nowrap;
}

.mkp-email__alert {
  color: var(--color-primary);
  text-decoration: underline;
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .fx-outcomes__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fx-hero__grid {
    gap: var(--space-8);
  }

  .fx-step__visuals {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  /* Drop the columns a reader does not need to understand the table. The grid
     is redefined rather than hiding cells, so the remaining columns keep their
     alignment. */
  /* :not(--compact) on both rules, and it is load-bearing. This block sits
     LATER in the file than .mkp-table--compact and carries the same (0,1,0)
     specificity, so an unscoped .mkp-table here would win on source order and
     hand the four-column hero table the eleven-column table's seven-column
     grid. The compact table gets its own treatment at 768px below. */
  .mkp-table:not(.mkp-table--compact) {
    min-width: 720px;
    grid-template-columns:
      32px
      minmax(180px, 1.4fr)
      minmax(120px, 1fr)
      minmax(130px, 1fr)
      86px
      74px
      110px;
  }

  .mkp-table:not(.mkp-table--compact) .mkp-table__cell--clicks,
  .mkp-table:not(.mkp-table--compact) .mkp-table__cell--impressions,
  .mkp-table:not(.mkp-table--compact) .mkp-table__cell--cost,
  .mkp-table:not(.mkp-table--compact) .mkp-table__cell--severity {
    display: none;
  }

  /* The compact table drops severity too, leaving the term, its campaign and
     what it costs. Its own columns are already narrow, so no scroll. */
  .mkp-table--compact {
    grid-template-columns:
      minmax(140px, 1.6fr)
      minmax(100px, 1fr)
      86px;
  }

  .mkp-table--compact .mkp-table__cell--severity {
    display: none;
  }
}

@media (max-width: 768px) {
  .fx-hero__headline {
    font-size: var(--text-3xl);
  }

  .fx-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .fx-outcomes__grid {
    grid-template-columns: 1fr;
  }

  .fx-reasons__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .fx-crosslinks__grid {
    grid-template-columns: 1fr;
  }

  .mkp-email__body {
    padding: var(--space-4);
  }

  .mkp-email__headline {
    font-size: var(--text-xl);
  }

  /* The digest table is three columns of short values, so it fits at 375px
     once the horizontal padding comes off the cells. Category wraps rather
     than pushing the row wider. */
  .mkp-email__th,
  .mkp-email__td {
    padding-right: var(--space-2);
  }

  .fx-step {
    padding: var(--space-5);
  }

  .fx-step__head {
    gap: var(--space-3);
  }

  .fx-step__title {
    font-size: var(--text-lg);
  }

  .fx-limits__grid {
    grid-template-columns: 1fr;
  }

  .fx-final-cta h2 {
    font-size: var(--text-3xl);
  }

  .mkp__body {
    padding: var(--space-4);
  }

  .mkp-bp__figures {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .mkp-bp__figure-value {
    font-size: var(--text-xl);
  }

  .mkp-bp__svg {
    width: 100%;
  }

  .mkp-filter__row {
    grid-template-columns: 1fr 1fr;
  }

  .mkp-filter__remove {
    display: none;
  }

  /* The day rows stack: date and sentence on their own lines, figure and
     dismiss control on one row beneath. */
  .mkp-mon-day {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-1);
  }

  .mkp-mon-day__date {
    grid-column: 1 / -1;
  }

  .mkp-mon-day__desc {
    grid-column: 1 / -1;
  }

  .mkp-mon-card__header {
    flex-direction: column;
  }

  .mkp-mon-card__figure {
    text-align: left;
  }

  .mkp-mon-summary {
    gap: var(--space-5);
  }

  .mkp-settings__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .mkp-settings__label {
    flex-basis: auto;
  }
}