/* ═══════════════════════════════════════════════════════════════════════
   Monetizr Blackbelt — COMPONENT + INTERACTION styles (plain CSS)
   ───────────────────────────────────────────────────────────────────────
   This shared layer includes base component appearance, the document reset,
   hover/active/focus states, form defaults and structural reduced motion.
   It also owns layout: mobile nav-logo size and desktop heading breaks,
   the <=700px primary width switch, and capture/follow-up action rows.
   Those action selectors can outrank page-local .capture-actions rules.
   custom-audiences.html retains a historical >=701px counter-rule which
   now repeats the shared desktop layout; its removal is deferred.
   Changes here affect every consuming page; inspect the cascade first.
   Primary buttons use a fixed 250x50 box with 100% width at <=700px.
   Alert anchoring follows the nav breakpoint at <=960px.
   Shared interaction feedback normally uses ease-out and <=200ms.
   Longer loading, reveal, burst, preview and 404 motion are documented
   in animation-states.md, alongside unresolved motion exceptions.
   This documentation pass changes comment text only.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── reset & document defaults ───────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* The browser's built-in `[hidden] { display: none }` rule is UA-origin, so
   any normal author rule setting `display` on the same element (e.g. a
   `.foo { display: flex }` component class) silently wins and the element
   stays visibly rendered even with the `hidden` attribute set via JS. Restate
   it here as an author rule so `el.hidden = true` always actually hides. */
[hidden] { display: none !important; }

html, body { background: var(--bg); }

body {
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

input, textarea, select { font-family: var(--font-sans); caret-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:is([type="text"], [type="email"], [type="url"], [type="search"]),
textarea,
select,
.ui-field { border-radius: var(--radius-field); }
input[type="email"], .email-field { border-radius: var(--radius-email-field); }
.ui-dropzone { border-radius: var(--radius-dropzone); }

/* Shared squircle family: reusable content surface and image crops. */
.ui-box {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-box);
}

.photo-mask {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-photo-crop);
}
.photo-mask > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-photo-crop);
}

/* inline icons — always beside text, never a stacked tile over a heading */
.licon { line-height: 1; vertical-align: -2px; }
@media (max-width: 700px) {
  /* Master mobile nav-logo size. The child selector deliberately outranks
     older page-local `.nav svg` overrides without affecting nav icons. */
  .nav > a:first-child > svg,
  .nav .nav-logo { height: 32px !important; width: auto; }
  .mtz-desktop-break { display: none; }
  .mtz-desktop-break + .accent::before { content: ' '; }
}

/* ── Card ─────────────────────────────────────────────────────────────
   Elevation is surface + hairline border, NOT shadow. Hover: border → gold
   at 55%, card lifts -2px; the footer view-link turns gold + arrow slides 3px. */
.mtz-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-box);
  padding: 22px;
  transition: border-color var(--dur-slow) var(--ease-out),
              transform   var(--dur-slow) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .mtz-card:hover { border-color: var(--border-hover); transform: translateY(var(--lift)); }
}
.mtz-card .mtz-view-link .mtz-arrow { display: inline-block; transition: transform 180ms var(--ease-out); }
.mtz-card:hover .mtz-view-link { color: var(--accent); }
.mtz-card:hover .mtz-view-link .mtz-arrow { transform: translateX(3px); }

/* ── Button ───────────────────────────────────────────────────────────
   primary = solid gold, navy text · secondary = gold outline, gold text. */
.mtz-btn {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; cursor: pointer;
  border-radius: var(--radius-button);
  font-family: var(--font-sans); font-weight: 700;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.mtz-btn--primary {
  background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--accent);
  justify-content: center; width: var(--width-cta-standard); max-width: 100%;
  height: var(--height-cta-standard); padding: 0 20px;
  font-size: 14px; font-weight: var(--fw-black); line-height: 1; text-align: center;
}
.mtz-btn--secondary {
  background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
  padding: 9px 16px; font-size: 13px;
}
.modal-followup .capture-actions {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-cta-followup);
  flex-wrap: nowrap;
  text-align: left;
}
.modal-followup .capture-actions > .mtz-secondary-link {
  align-self: auto;
  justify-content: flex-start;
}
@media (max-width: 700px) {
  .mtz-btn.mtz-btn--primary { width: 100%; }
  .capture-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-cta-followup);
  }
  .capture-actions > .mtz-secondary-link {
    align-self: center;
    justify-content: center;
    text-align: center;
  }
  .modal-followup .capture-actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
}
@media (hover:hover) and (pointer:fine) {
  .mtz-btn--primary:not([disabled]):hover {
    /* color MUST be re-asserted: these buttons are <a>, and the generic
       a:hover{color:accent-hover} would otherwise turn the navy label light-gold
       on the light-gold hover fill → invisible text. Keep it navy. */
    background: var(--accent-hover); color: var(--on-accent);
    transform: translateY(var(--lift)); box-shadow: var(--shadow-btn-hover);
  }
  .mtz-btn--secondary:not([disabled]):hover {
    border-color: var(--accent); color: var(--accent); transform: translateY(var(--lift));
  }
}
.mtz-btn--primary:not([disabled]):active {
  transform: scale(var(--press-scale)); box-shadow: var(--shadow-btn-press);
  transition: transform 100ms var(--ease-out);
}
.mtz-btn--secondary:not([disabled]):active {
  transform: scale(var(--press-scale)); transition: transform 100ms var(--ease-out);
}

/* ── ArrowLink ────────────────────────────────────────────────────────
   Gold, bold, trailing → that slides right on hover. No underline. */
.mtz-arrow-link { color: var(--accent); font-weight: 700; }
.mtz-arrow-link .mtz-arrow { display: inline-block; transition: transform 180ms var(--ease-out); }
.mtz-arrow-link:hover { color: var(--accent-hover); }
.mtz-arrow-link:hover .mtz-arrow { transform: translateX(3px); }

/* ── Tab pill (catalogue filter) ───────────────────────────────────────────────────
   Active = gold fill + navy text. Inactive = transparent + hairline + muted. */
.bb-tab {
  padding: 7px 15px; font-size: 12.5px; font-weight: 700;
  border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans);
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.bb-tab:hover { color: var(--text); border-color: var(--border-hover); }
.bb-tab[aria-selected="true"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

/* ── FilterDropdown trigger (pill) ────────────────────────────────────
   Unused shared pill: gold hover border with -1px lift; active scales to 0.97. */
.mtz-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 10px 16px; font-size: 13px; font-weight: 700; font-family: var(--font-sans);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mtz-dropdown-trigger .mtz-chevron { transition: transform 180ms var(--ease-out); color: var(--muted); }
@media (hover:hover) and (pointer:fine) {
  .mtz-dropdown-trigger:hover { border-color: var(--accent); transform: translateY(-1px); }
}
.mtz-dropdown-trigger:active { transform: scale(var(--press-scale)); }

/* ── Panel secondary link ─────────────────────────────────────────────── */
.mtz-secondary-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 700; }
.mtz-secondary-link .mtz-arrow { display: inline-block; transition: transform 180ms var(--ease-out); }
.mtz-secondary-link:hover { color: var(--accent); }
.mtz-secondary-link:hover .mtz-arrow { transform: translateX(3px); }

/* ── Removable tag ────────────────────────────────────────────────────
   A selected value the user can remove — quiet surface+hairline pill with
   a dedicated close-button hit target (never the whole pill). */
.mtz-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-pill);
  padding: 7px 7px 7px 14px; white-space: nowrap;
}
.mtz-tag-remove {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: var(--radius-full);
  background: none; border: none; color: var(--faint); cursor: pointer; padding: 0;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.mtz-tag-remove .licon-svg { width: 12px; height: 12px; }
.mtz-tag-remove:hover { background: var(--line); color: var(--text); }
.mtz-tag-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Alert (top-of-viewport banner) ──────────────────────────────────────
   Three-layer state pattern (see specs/state-colors.spec.md): solid icon/text,
   .14 soft fill, .35 hairline border — fill and border always the same hue.

   Position is one canonical, site-wide rule (not a per-page override):
   desktop centers the toast on the fixed nav's own height; at and below the
   960px NAV-COLLAPSE breakpoint (not the site's 700px content breakpoint —
   this rule tracks the nav, so it uses the nav's number) it anchors just under
   the nav instead, since a wrapped two-line message no longer fits inside the
   mobile nav's shorter height and would otherwise hang half off it. Every page that uses
   .mtz-alert must expose --kb-nav-h (its fixed nav's real measured height,
   kept live via the standard padForNav() resize script — see
   specs/header-footer.spec.md) for this to track correctly; the 77px/56px
   fallbacks match the nav's typical desktop/mobile measured heights. */
:root {
  --alert-top: calc(var(--kb-nav-h, 77px) / 2);
  --alert-rest-y: -50%;
  --alert-hide-y: calc(-50% - 12px);
}
@media (max-width: 960px) {
  :root {
    --alert-top: calc(var(--kb-nav-h, 56px) + 10px);
    --alert-rest-y: 0%;
    --alert-hide-y: -6px;
  }
}
.mtz-alert {
  position: fixed; top: var(--alert-top); left: 50%; z-index: 500;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text);
  padding: 13px 20px; border-radius: var(--radius-lg); box-shadow: var(--shadow-dropdown);
  max-width: calc(100vw - 40px);
  /* Alerts float over arbitrary page content (hero headings, cards, the nav
     itself), not just a uniform surface — the .14-alpha soft fill alone lets
     whatever's underneath show through sharply enough to read as visual
     noise. Blur it the same way the fixed nav blurs the page scrolling
     beneath it, so the alert stays legible regardless of what's behind it. */
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 0; transform: translate(-50%, var(--alert-hide-y)); pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.mtz-alert.visible { opacity: 1; transform: translate(-50%, var(--alert-rest-y)); pointer-events: auto; }
.mtz-alert .licon { flex-shrink: 0; font-size: 18px; }
.mtz-alert--guidance { background: var(--guidance-soft); border: 1px solid var(--line-guidance); }
.mtz-alert--guidance .licon { color: var(--guidance); }
.mtz-alert--error   { background: var(--error-soft);   border: 1px solid var(--line-error); }
.mtz-alert--error   .licon { color: var(--error); }
.mtz-alert--success { background: var(--success-soft); border: 1px solid var(--line-success); }
.mtz-alert--success .licon { color: var(--success); }
.mtz-alert--warning { background: var(--warning-soft); border: 1px solid var(--line-warning); }
.mtz-alert--warning .licon { color: var(--warning); }

/* ── Information note ───────────────────────────────────────────────────
   The icon belongs to the first text line, not a separate grid/flex column. */
.mtz-info-note { color: var(--faint); line-height: var(--lh-body); }
.mtz-info-note .mtz-info-note-icon {
  display: inline-block;
  margin-right: var(--space-1);
  color: var(--muted);
  font-size: var(--fs-body);
  vertical-align: var(--icon-inline-shift);
}
.mtz-info-note strong { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .mtz-alert { transition: opacity var(--dur-fast) ease !important; transform: translate(-50%, var(--alert-rest-y)) !important; }
}

/* ── Data table ───────────────────────────────────────────────────────── */
.bb-tech-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; font-size: 13px; margin: 14px 0;
}
.bb-tech-table th, .bb-tech-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.bb-tech-table thead th {
  background: var(--surface-recessed); color: var(--muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.bb-tech-table tbody tr:last-child td { border-bottom: none; }
.bb-id { color: var(--faint); font-family: var(--font-mono); font-size: 11px; }

/* mock-tool placeholder — dashed well where a live interactive tool renders */
.bb-mock {
  background: var(--surface-recessed); border: var(--border-dashed);
  border-radius: var(--radius-lg); padding: 26px; text-align: center;
  font-size: 13px; color: var(--faint); font-family: var(--font-mono);
}

/* ── Slider ───────────────────────────────────────────────────────────
   Single-thumb range control on the gold rail. See specs/slider.spec.md.
   Built by design-system/reference/slider.js — this file is visuals only. */
/* pan-y, not none: the box is ~70px of full-width padding, rail and end
   labels, so touch-action: none made it a dead zone for vertical page
   scrolling. pan-y lets the browser keep vertical panning (the drag ends via
   the bound pointercancel) while horizontal gestures stay ours. Same choice
   as .brand-marquee.is-interactive and .fdd-menu. */
.mtz-slider { position: relative; padding-top: 34px; padding-bottom: 4px; touch-action: pan-y; user-select: none; }
.mtz-slider-rail { position: relative; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); cursor: pointer; }
.mtz-slider-fill { position: absolute; top: 0; left: 0; height: 5px; border-radius: var(--radius-pill); background: var(--accent); pointer-events: none; }
.mtz-slider-marks { position: absolute; top: 50%; left: 0; width: 100%; height: 0; pointer-events: none; }
.mtz-slider-mark { position: absolute; top: 50%; width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--line-strong); transform: translate(-50%, -50%); }
.mtz-slider-mark.active { background: var(--on-accent); }
.mtz-slider-thumb {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--accent); box-shadow: 0 0 0 3.2px var(--surface);
  transform: translate(-50%, -50%) scale(1); cursor: grab;
  transition: transform 140ms var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* The thumb ring supplies focus feedback; avoid a second box around the rail. */
.mtz-slider:focus { outline: none; }
.mtz-slider:focus-visible .mtz-slider-thumb {
  box-shadow: 0 0 0 3.2px var(--surface), 0 0 0 6px var(--accent);
}
.mtz-slider.dragging .mtz-slider-thumb { transform: translate(-50%, -50%) scale(0.82); cursor: grabbing; }
.mtz-slider-tooltip {
  position: absolute; bottom: calc(100% + 26px); left: 50%; transform: translateX(-50%);
  background: var(--surface-recessed); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  padding: 4px 9px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out);
}
.mtz-slider-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--surface-recessed);
}
.mtz-slider-thumb.show-tip .mtz-slider-tooltip { opacity: 1; }
.mtz-slider.mtz-slider--reduced-motion .mtz-slider-thumb,
.mtz-slider.mtz-slider--reduced-motion .mtz-slider-tooltip { transition: none !important; }
.mtz-slider-end-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; color: var(--faint); }

/* ── PhoneFrame — iPhone 16-style bezel for campaign screenshots ────────
   Every geometric metric (outer radius, bezel padding, rim, screen radius)
   is a % of the frame's *measured* width, applied via phone-frame.js
   (ResizeObserver) — NOT fixed px — so corners stay concentric and the
   bezel reads correctly at any size. Values below are just the pre-JS /
   no-JS fallback, computed at the 206px reference width; phone-frame.js
   overrides them inline as soon as it measures the real rendered width.
   Width-driven: aspect-ratio derives height, never set height directly.
   One motion: 3px hover lift, ease-out, reduced-motion-aware (below). */
.mtz-phone-frame {
  width: 100%;
  box-sizing: border-box;
  padding: 8px; /* 206px × 0.04 */
  border-radius: var(--radius-phone); /* 206px × 0.165 ≈ 34px */
  background: linear-gradient(150deg, #3a3b40, #17181b 55%, #202127);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-phone);
  transition: transform 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .mtz-phone-frame:hover { transform: translateY(-3px); }
}
.mtz-phone-screen {
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 26px; /* fallback = 206px × 0.125; phone-frame.js sets the real value inline */
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, var(--surface), var(--surface-recessed));
}
.mtz-phone-screen img,
.mtz-phone-screen image-slot {
  position: absolute;
  /* Responsive overscan is measured by phone-frame.js: about 0.8% of the
     inner screen, clamped to 1–3px. Values below are the no-JS fallback. */
  inset: var(--mtz-phone-overscan-offset, -2px);
  width: calc(100% + var(--mtz-phone-overscan-grow, 4px));
  height: calc(100% + var(--mtz-phone-overscan-grow, 4px));
  max-width: none;
  object-fit: cover;
  display: block;
}
/* Outer wrapper: centers the frame + caption as a column — matters once the
   frame is given a fixed width narrower than its parent (see specs/phone-frame.spec.md). */
.mtz-phone-frame-wrap { display: flex; flex-direction: column; align-items: center; }
.mtz-phone-caption { margin-top: 12px; font-size: 13px; line-height: 1.4; text-align: center; }
.mtz-phone-caption .num { font-family: var(--font-sans); font-weight: var(--fw-black); color: var(--accent); margin-right: 6px; }
.mtz-phone-caption .lbl { font-family: var(--font-sans); font-weight: var(--fw-regular); color: var(--text); }

/* ── Focus ring (keyboard only) — gold ring is the ONE focus signal ────── */
.mtz-btn:focus-visible, .mtz-arrow-link:focus-visible, .mtz-card:focus-visible,
.bb-tab:focus-visible, .mtz-dropdown-trigger:focus-visible, .mtz-secondary-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}