:root {
  --bg-0: #060a12;
  --bg-1: #0b111a;
  --bg-2: #131c2a;
  --panel: rgba(13, 19, 28, 0.72);
  --panel-inner: rgba(6, 10, 18, 0.6);
  --panel-border: rgba(0, 154, 168, 0.28);
  --panel-border-strong: rgba(0, 184, 199, 0.6);
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.12);
  --text: #f1f6fc;
  --text-dim: #a8b8cc;
  --text-faint: #6f8094;
  --teal: #009aa8;
  --teal-bright: #00b8c7;
  --teal-glow: rgba(0, 154, 168, 0.5);
  --teal-glow-soft: rgba(0, 154, 168, 0.18);
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
  --slate: #94a3b8;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --max-w: 980px;
  --ease-out: cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
[hidden] { display: none !important; }

::selection { background: rgba(0, 154, 168, 0.45); color: #fff; }
::-moz-selection { background: rgba(0, 154, 168, 0.45); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 154, 168, 0.25); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 154, 168, 0.5); border: 2px solid transparent; background-clip: padding-box; }

body {
  margin: 0;
  font-family: "helvetica-neue-lt-pro", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0, 154, 168, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(0, 154, 168, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Calm parallax depth field (replaces the reactive Vanta dots). Layers drift
   slowly at different scroll rates for depth, never competing with content. */
.depth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.depth-layer { position: absolute; inset: -12% 0; }
.depth-stars {
  background-image:
    radial-gradient(1.5px 1.5px at 18% 28%, rgba(0,184,199,0.30), transparent),
    radial-gradient(1px 1px at 68% 58%, rgba(0,184,199,0.22), transparent),
    radial-gradient(1px 1px at 41% 82%, rgba(255,255,255,0.16), transparent),
    radial-gradient(1.5px 1.5px at 84% 19%, rgba(0,184,199,0.20), transparent),
    radial-gradient(1px 1px at 55% 44%, rgba(0,184,199,0.16), transparent),
    radial-gradient(1px 1px at 8% 64%, rgba(255,255,255,0.12), transparent);
  background-size: 380px 380px;
  opacity: 0.55;
}
.depth-stars--near {
  background-size: 240px 240px;
  opacity: 0.4;
}
.depth-glow {
  background:
    radial-gradient(42vw 42vw at 76% 12%, rgba(0,154,168,0.10), transparent 60%),
    radial-gradient(46vw 46vw at 14% 78%, rgba(0,154,168,0.08), transparent 62%);
}
@media (prefers-reduced-motion: reduce) {
  .depth-layer { transform: none !important; }
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 32px;
}

.site-logo { display: inline-flex; width: 132px; max-width: 42vw; flex: 0 0 auto; }
.site-logo:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 4px; border-radius: 6px; }
.ft-logo { width: 100%; height: auto; display: block; }

.header-link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.header-link:hover {
  color: var(--text);
  border-color: var(--panel-border-strong);
  background: rgba(0, 154, 168, 0.06);
}
.header-link:active { transform: scale(0.98); }

/* ---------- Layout ---------- */
.site-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 24px 48px;
}

.view {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  animation: fadeUp 480ms var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hero--compact { padding-top: 8px; }

.hero-logo {
  width: clamp(240px, 36vw, 380px);
  margin: 0 auto 12px;
  filter: drop-shadow(0 6px 24px rgba(0, 154, 168, 0.32)) drop-shadow(0 0 60px rgba(0, 154, 168, 0.12));
}

.tagline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 14px;
  text-shadow: 0 0 24px rgba(0, 184, 199, 0.35);
}

.hero-blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 auto;
  max-width: 580px;
}

/* ---------- Calc card ---------- */
.calc-card {
  background: var(--panel);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---------- Mode toggle (Rate card / Reverse) ---------- */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  background: var(--panel-inner);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: inherit;
  cursor: pointer;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.mode-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.02); }
.mode-btn.is-active {
  background: rgba(0, 184, 199, 0.12);
  border-color: rgba(0, 184, 199, 0.36);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(0, 184, 199, 0.12), 0 6px 18px rgba(0, 154, 168, 0.18);
}
.mode-label { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.mode-sub { font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.mode-btn.is-active .mode-sub { color: var(--text-dim); }

/* ---------- Service toggles ---------- */
.service-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .service-toggles { grid-template-columns: 1fr; } }

.switch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--panel-inner);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.switch:hover { border-color: var(--panel-border); background: rgba(8, 14, 22, 0.7); }
.switch:has(input:checked) {
  border-color: var(--panel-border-strong);
  background: rgba(0, 184, 199, 0.07);
  box-shadow: 0 0 0 1px rgba(0, 184, 199, 0.12);
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch input:focus-visible ~ .switch-track {
  outline: 2px solid var(--teal-bright);
  outline-offset: 2px;
}

.switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: transform 220ms var(--ease-spring), background 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.switch input:checked + .switch-track {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 100%);
  border-color: var(--panel-border-strong);
}
.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(16px);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.switch-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.switch-title { font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: 0.01em; }
.switch-sub { font-size: 11.5px; color: var(--text-faint); line-height: 1.4; }

/* ---------- Controls ---------- */
.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.control { display: flex; flex-direction: column; gap: 8px; }
.control-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.select-wrap, .input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(11, 17, 26, 0.78);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  transition: border-color 200ms var(--ease-out), box-shadow 240ms var(--ease-out), background 200ms var(--ease-out);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.select-wrap:hover, .input-wrap:hover { border-color: rgba(0, 184, 199, 0.45); background: rgba(15, 22, 32, 0.85); }
.select-wrap:focus-within, .input-wrap:focus-within {
  border-color: var(--panel-border-strong);
  box-shadow: 0 0 0 4px rgba(0, 184, 199, 0.14);
  background: rgba(15, 22, 32, 0.92);
}

.select, .input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  padding: 12px 14px;
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
}
.select { padding-right: 36px; cursor: pointer; }
.select option { background: var(--bg-1); color: var(--text); }
.select-chevron { position: absolute; right: 12px; pointer-events: none; color: var(--text-faint); }

.input-wrap--suffix .input { padding-right: 36px; }
.input-wrap--prefix .input { padding-left: 30px; }
.input-suffix, .input-prefix {
  position: absolute;
  color: var(--text-faint);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}
.input-suffix { right: 14px; }
.input-prefix { left: 14px; }

.control-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.4;
  margin: 0;
}

/* ---------- Results header ---------- */
.results-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.results-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.results-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}
.results-status {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 220ms var(--ease-out);
}
.results-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--slate);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
  flex-shrink: 0;
  transition: background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
/* When any service mode is on, the status dot + text shift to teal so
   it's instantly obvious the user is no longer in the default tier. */
.results-status[data-mode="managed"],
.results-status[data-mode="growth"],
.results-status[data-mode="both"] {
  color: var(--teal-bright);
}
.results-status[data-mode="managed"]::before,
.results-status[data-mode="growth"]::before,
.results-status[data-mode="both"]::before {
  background: var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(0, 184, 199, 0.22);
}
.results-actions { display: flex; gap: 8px; }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.ghost-btn:hover {
  color: var(--text);
  border-color: var(--panel-border-strong);
  background: rgba(0, 154, 168, 0.1);
}
.ghost-btn:active { transform: scale(0.97); }
.ghost-btn:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; }

/* ---------- Tactic table ---------- */
.forward-pane, .reverse-pane {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Real-time blurb above the table — small muted prose with a soft
   pulsing dot to signal "live data feed". */
.results-blurb {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: -4px 0 0;
  max-width: 760px;
}
.live-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(0, 184, 199, 0.18);
  animation: liveDotPulse 2.2s ease-out infinite;
}
@keyframes liveDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 184, 199, 0.45); }
  60%      { box-shadow: 0 0 0 6px rgba(0, 184, 199, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

.tactic-table-wrap {
  background: var(--panel-inner);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  /* Let wide numeric rows scroll horizontally on narrow screens instead of
     clipping. overflow-x:auto still respects the rounded corners. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.tactic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.tactic-table thead th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 12px 22px;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
  text-align: left;
}
.tactic-table thead th.col-range,
.tactic-table thead th.col-avg { text-align: right; }

.tactic-table tbody td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tactic-table tbody tr:last-child td { border-bottom: none; }
.tactic-table tbody tr:hover td { background: rgba(0, 184, 199, 0.04); }

.col-margin { width: 1%; white-space: nowrap; padding-right: 6px !important; }
.col-tactic { font-weight: 600; }
.col-range {
  text-align: right;
  color: var(--text-dim);
  font-weight: 500;
}
.col-range--accent {
  color: var(--teal-bright) !important;
  font-weight: 600;
}
.col-avg {
  text-align: right;
  color: var(--green);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.row--flat td { font-style: italic; }
.row--flat .col-tactic { font-style: normal; }
.row--flat .margin-input { font-style: normal; }

/* ---------- Stock-ticker flash ---------- */
/* Cell wraps its value in a span so we can slide the value without
   affecting cell layout. The cell itself flashes a soft green/red
   background to signal direction; the span slides in from above/below. */
.cell-value {
  display: inline-block;
  will-change: transform, opacity;
}
.tactic-table tbody td.col-range,
.tactic-table tbody td.col-avg {
  transition: background-color 600ms var(--ease-out);
}
.tactic-table tbody td.tick-up { background-color: rgba(74, 222, 128, 0.10); }
.tactic-table tbody td.tick-down { background-color: rgba(248, 113, 113, 0.10); }
.tactic-table tbody td.tick-up .cell-value {
  animation: cellTickUp 420ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.tactic-table tbody td.tick-down .cell-value {
  animation: cellTickDown 420ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
@keyframes cellTickUp {
  0%   { transform: translateY(7px); opacity: 0; }
  55%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes cellTickDown {
  0%   { transform: translateY(-7px); opacity: 0; }
  55%  { transform: translateY(2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tactic-table tbody td.tick-up,
  .tactic-table tbody td.tick-down { background-color: transparent; }
  .tactic-table tbody td.tick-up .cell-value,
  .tactic-table tbody td.tick-down .cell-value { animation: none; }
}

/* Flat inline margin input — no border-box look. Subtle hover/focus
   underline keeps it editable without competing with the data. */
.margin-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 4px 8px;
  border-radius: 6px;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 180ms var(--ease-out), border-color 200ms var(--ease-out);
}
.margin-cell:hover {
  background: rgba(0, 184, 199, 0.06);
  border-bottom-color: rgba(0, 184, 199, 0.35);
}
.margin-cell:focus-within {
  background: rgba(0, 184, 199, 0.09);
  border-bottom-color: var(--teal-bright);
}
.margin-input {
  width: 44px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 0;
  appearance: textfield;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
.margin-input::-webkit-outer-spin-button,
.margin-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.margin-suffix {
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

.footnote-mark {
  color: var(--amber);
  font-weight: 700;
  margin-left: 2px;
  font-family: "helvetica-neue-lt-pro", 'Helvetica Neue', Arial, sans-serif;
  font-style: normal;
}

.footnote {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.5;
  margin: 0;
}

/* ---------- Reverse result card ---------- */
.reverse-result {
  display: flex;
  flex-direction: column;
}

.reverse-card {
  background: var(--panel-inner);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reverse-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.reverse-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.reverse-rate-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  border-left: 3px solid var(--teal-bright);
}
.reverse-rate-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.reverse-rate-value {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal-bright);
  letter-spacing: -0.015em;
}

.reverse-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.55;
}
.reverse-meta p { margin: 0; }
.reverse-viability {
  font-family: "helvetica-neue-lt-pro", 'Helvetica Neue', Arial, sans-serif !important;
  color: var(--text-dim) !important;
  font-size: 12.5px !important;
  margin-top: 4px !important;
}

.viability-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.viability-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.viability-pill--in_range { background: rgba(74, 222, 128, 0.1); color: var(--green); border-color: rgba(74, 222, 128, 0.3); }
.viability-pill--below_floor { background: rgba(248, 113, 113, 0.1); color: var(--red); border-color: rgba(248, 113, 113, 0.3); }
.viability-pill--above_ceiling { background: rgba(251, 191, 36, 0.1); color: var(--amber); border-color: rgba(251, 191, 36, 0.3); }

/* ---------- CTA row ---------- */
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) { .cta-row { grid-template-columns: 1fr; } }

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  text-decoration: none;
  position: relative;
  transition: transform 180ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out), filter 200ms var(--ease-out);
  border: 1px solid transparent;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 50%);
  pointer-events: none;
}
.cta:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }
.cta svg {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0.65;
  transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out);
}
.cta:hover svg { opacity: 1; transform: translate(2px, -2px); }
.cta-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.78;
}
.cta-main { font-size: 15px; font-weight: 600; }
.cta--primary {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 100%);
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(0, 154, 168, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.cta--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 154, 168, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); filter: brightness(1.06); }
.cta--primary:active { transform: translateY(-1px); filter: brightness(0.98); }
.cta--secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border-color: var(--hairline-strong);
}
.cta--secondary:hover { border-color: var(--panel-border-strong); background: rgba(0, 154, 168, 0.1); transform: translateY(-2px); }
.cta--secondary:active { transform: translateY(-1px); background: rgba(0, 154, 168, 0.06); }

.footer-note {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 16px);
  background: rgba(0, 154, 168, 0.94);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 154, 168, 0.4);
  z-index: 50;
  opacity: 0;
  transition: opacity 220ms var(--ease-out), transform 240ms var(--ease-out);
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  font-size: 11.5px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .tactic-table thead th, .tactic-table tbody td { padding: 12px 14px; font-size: 13px; }
}
@media (max-width: 600px) {
  .site-header { padding: 18px 20px; }
  .hero-logo { width: clamp(200px, 60vw, 300px); }
  .tagline { font-size: 11px; letter-spacing: 0.28em; }
  .calc-card { padding: 22px; }
  .tactic-table thead th, .tactic-table tbody td { padding: 10px 12px; font-size: 12.5px; }
  .reverse-rate-value { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- proposal app: step-1 --- */
.url-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.text-input { flex: 1 1 260px; padding: 14px 16px; border-radius: 12px;
  background: var(--panel-inner); border: 1px solid var(--panel-border);
  color: var(--text); font-size: 16px; }
.text-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-glow); }
.field-label { display:block; color: var(--text-dim); margin: 0 0 8px; font-size: 14px; }
.check-result { margin-top: 20px; }
.verdict { padding: 16px; border-radius: 14px; margin-bottom: 16px; }
.verdict--live { background: rgba(0,154,168,0.10); border: 1px solid var(--panel-border-strong); }
.verdict--none { background: var(--panel-inner); border: 1px solid var(--hairline); }
.cta--block { display:flex; justify-content:center; margin-top: 8px; }

/* Inline primary action button for the URL row (distinct from the 2-line
   card .cta). Matches the input height via stretch; stacks full-width on
   narrow screens. */
.btn-primary {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 100%);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 154, 168, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 160ms var(--ease-out), filter 200ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(0, 154, 168, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.98); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.btn-primary:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }

@media (max-width: 480px) {
  .url-row { flex-direction: column; align-items: stretch; }
  .url-row .text-input { flex: 0 0 auto; width: 100%; }
  .url-row .btn-primary { width: 100%; padding: 14px 24px; }
}

/* ---------- Login screen ---------- */
.view--center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 180px);
}

.login-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}
.login-hero .hero-logo {
  width: clamp(260px, 38vw, 400px);
  margin: 0 auto 16px;
  filter: drop-shadow(0 6px 24px rgba(0, 154, 168, 0.32)) drop-shadow(0 0 60px rgba(0, 154, 168, 0.12));
}

.login-heading {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--text);
  margin: 4px 0 14px;
  max-width: 560px;
}

.login-blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 auto 32px;
  max-width: 540px;
}

.login-form {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 32px;
}

.login-bar {
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(11, 17, 26, 0.78);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
  gap: 12px;
  transition: border-color 200ms var(--ease-out), box-shadow 240ms var(--ease-out), background 200ms var(--ease-out);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.login-bar:hover {
  border-color: rgba(0, 184, 199, 0.45);
  background: rgba(15, 22, 32, 0.85);
}
.login-bar:focus-within {
  border-color: var(--panel-border-strong);
  box-shadow: 0 0 0 4px rgba(0, 184, 199, 0.14), 0 14px 44px rgba(0, 154, 168, 0.22);
  background: rgba(15, 22, 32, 0.92);
}
.login-bar.is-invalid {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(28, 14, 14, 0.7);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.1), 0 6px 22px rgba(248, 113, 113, 0.16);
  animation: shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.login-bar.is-invalid .login-icon { color: var(--red); }

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.login-icon { color: var(--text-faint); flex-shrink: 0; transition: color 200ms var(--ease-out); }
.login-bar:focus-within .login-icon { color: var(--teal-bright); }

.login-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15.5px;
  font-family: inherit;
  font-weight: 500;
  padding: 14px 0;
  min-width: 0;
  caret-color: var(--teal-bright);
  letter-spacing: 0.02em;
}
.login-input::placeholder { color: var(--text-faint); font-weight: 400; letter-spacing: 0.01em; }

.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 100%);
  color: #ffffff;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 154, 168, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 160ms var(--ease-out), box-shadow 220ms var(--ease-out), filter 200ms var(--ease-out);
}
.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 154, 168, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  filter: brightness(1.08);
}
.login-btn:active { transform: translateY(0); filter: brightness(0.98); }
.login-btn:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }

.login-error {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--red);
  margin: 14px 0 0;
  font-weight: 500;
}

.cta-row--login { width: 100%; max-width: 620px; margin: 0 auto; }

.header-link--signout {
  color: var(--text-faint);
}
.header-link--signout:hover {
  color: var(--text-dim);
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.06);
}

@media (max-width: 540px) {
  .login-bar { padding: 4px 4px 4px 16px; gap: 8px; }
  .login-btn { padding: 11px 16px; font-size: 13px; }
  .login-btn svg { display: none; }
  .login-blurb { font-size: 13.5px; }
}

/* --- proposal app: builder --- */
.builder { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 820px) { .builder { grid-template-columns: 1fr; } }
.knob { margin-bottom: 22px; }
.knob-val { color: var(--teal-bright); font-variant-numeric: tabular-nums; float: right; }
.hint { color: var(--text-faint); font-size: 12px; font-weight: normal; }
.slider { width: 100%; accent-color: var(--teal); }
.total-row { display:flex; justify-content:space-between; align-items:baseline;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline-strong); }
.total-label { color: var(--text-dim); }
.total-val { font-size: 28px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tactic-table .col-avg { font-variant-numeric: tabular-nums; }
.tactic-table .col-range { font-variant-numeric: tabular-nums; }

/* --- proposal app: final proposal --- */
.proposal-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items:start; }
@media (max-width: 820px){ .proposal-grid{ grid-template-columns:1fr; } }
.card-title { margin: 0 0 16px; font-size: 18px; color: var(--text); }
.creative-status { color: var(--text-dim); padding: 12px 0; }
.creative-banners { display:flex; flex-direction:column; gap:16px; }
.banner img { max-width:100%; border-radius:8px; border:1px solid var(--hairline); }
.banner figcaption { color: var(--text-faint); font-size:12px; margin-top:4px; }
.easy-button { display:flex; justify-content:center; align-items:center;
  margin: 32px auto 8px; padding: 22px 32px; width:100%; max-width:520px;
  font-size: 20px; font-weight:700; color:#fff; text-decoration:none;
  background: var(--teal); border-radius: 18px; box-shadow: 0 0 0 1px var(--panel-border-strong), 0 10px 30px var(--teal-glow);
  transition: transform .1s ease, box-shadow .2s ease; }
.easy-button:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--teal-bright), 0 14px 40px var(--teal-glow); }
.proposal-footer { text-align:center; margin-top:12px; }

/* --- proposal app: mobile-first refinements --- */

/* Sticky "Monthly Investment" bar — only on stacked (mobile) builder layout,
   so the live total is always visible while dragging sliders that push the
   result card below the fold. Hidden on desktop where both columns are seen. */
.builder-sticky-total { display: none; }

@media (max-width: 820px) {
  .builder-sticky-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    padding: 13px 20px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px));
    background: rgba(9, 14, 22, 0.92);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--panel-border-strong);
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.5);
  }
  .builder-sticky-total .sticky-label {
    font-size: 12px; letter-spacing: 0.02em; color: var(--text-dim);
  }
  .builder-sticky-total .sticky-val {
    font-size: 22px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  }
  /* Reserve room so the fixed bar never covers the Generate button/footnote. */
  .builder { padding-bottom: 76px; }
}

@media (max-width: 600px) {
  /* Reclaim horizontal space on phones. */
  .site-main { padding: 16px 14px 36px; }
  .calc-card { padding: 20px 16px; }
  /* iOS repaints fixed backgrounds poorly behind the animated canvas. */
  body { background-attachment: scroll; }
  /* Keep the hero figure prominent but not oversized on small screens. */
  .total-val { font-size: 24px; }
  .easy-button { font-size: 18px; padding: 20px 24px; }
  .card-title { font-size: 16px; }
}

/* --- proposal app: narrative redesign --- */
.proposal { display: flex; flex-direction: column; gap: 76px; }

/* Scroll-triggered reveal: GPU-only (opacity + transform). */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
/* Staggered children animate sequentially once the section is in view. */
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.stagger.is-visible > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hero */
.prop-hero { text-align: center; display: flex; flex-direction: column; align-items: center; }
.prop-hero .hero-logo { width: clamp(220px, 32vw, 340px); margin: 0 auto 20px; }
.prop-eyeline { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 18px; }
.prop-eyeline .prop-x { color: var(--teal-bright); margin: 0 4px; }
.prop-headline { font-size: clamp(34px, 7vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; color: var(--text); margin: 0 0 20px; }
.prop-subhead { font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: var(--text-dim); max-width: 620px; margin: 0 auto; }

/* Section scaffolding */
.prop-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-bright); margin: 0 0 12px; }
.prop-h2 { font-size: clamp(24px, 4vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--text); margin: 0 0 28px; }

/* Concept band */
.prop-concept { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.concept-step { background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); padding: 26px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
.concept-num { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--teal-bright); }
.concept-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 10px 0 8px; }
.concept-body { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0; }

/* The surround — household centered, channels orbiting */
.surround-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "crctv  ctv     crolv"
    "audio  house   olv"
    "smail  crdisp  disp";
  gap: 18px 20px;
  align-items: center;
}
.sc-ctv { grid-area: ctv; }
.sc-olv { grid-area: olv; }
.sc-disp { grid-area: disp; }
.sc-smail { grid-area: smail; }
.sc-audio { grid-area: audio; }
.sc-cre-ctv { grid-area: crctv; }
.sc-cre-olv { grid-area: crolv; }
.sc-cre-disp { grid-area: crdisp; }

/* Concentric audience core: 1P households at center, 3P extension as the ring. */
.surround-core { grid-area: house; position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.core-3pring { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed rgba(0, 184, 199, 0.45); background: radial-gradient(circle, rgba(0, 154, 168, 0.12), rgba(0, 154, 168, 0.02) 68%); }
.core-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.house-svg { width: 92px; height: 92px; overflow: visible; }
.core-1p-num { font-size: 30px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.05; margin-top: 4px; }
.core-1p-cap { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-bright); margin-top: 3px; }
.core-3p-chip { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: rgba(9, 14, 22, 0.92); border: 1px solid var(--panel-border-strong); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; z-index: 2; }
.core-3p-chip .est { color: var(--text-faint); font-weight: 500; }
.audience-reach .emph { color: var(--teal-bright); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Generated creative placed in the orbit cells around the household: two 16:9
   video frames (CTV + Online Video) and one display banner. They tilt slightly
   inward toward the household to reinforce the "immersed / surrounded" idea. */
.surround-card, .surround-core { position: relative; z-index: 1; }
.sur-cre {
  position: relative; z-index: 2; margin: 0; width: 100%;
  border-radius: 10px; overflow: hidden;
  background: var(--panel-inner); border: 1px solid var(--hairline-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.96);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.sur-cre.is-loaded { opacity: 1; transform: scale(1); }
.sur-cre--video { aspect-ratio: 16 / 9; justify-self: center; max-width: 240px; }
.sur-cre--banner { aspect-ratio: 300 / 250; justify-self: center; max-width: 168px; }
.sur-cre .cre-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sur-cre:hover { box-shadow: 0 20px 48px rgba(0, 0, 0, 0.58); border-color: var(--panel-border-strong); }

/* Inward tilt so the creatives lean toward the household at the center. */
.sc-cre-ctv  { transform-origin: bottom right; }
.sc-cre-olv  { transform-origin: bottom left; }
.sc-cre-disp { transform-origin: top center; }
.sc-cre-ctv.is-loaded  { transform: rotate(-3deg) translate(8px, 6px); }
.sc-cre-olv.is-loaded  { transform: rotate(3deg) translate(-8px, 6px); }
.sc-cre-disp.is-loaded { transform: rotate(-2deg) translateY(-6px); }
.sc-cre-ctv:hover, .sc-cre-olv:hover, .sc-cre-disp:hover { transform: rotate(0) scale(1.04); z-index: 4; }

/* Channel tag, top-right (brand mark is baked top-left of the still). */
.sur-cre-tag { position: absolute; top: 7px; right: 7px; z-index: 3; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); background: rgba(9, 14, 22, 0.72); border: 1px solid var(--panel-border-strong); border-radius: 999px; padding: 3px 8px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* CSS player chrome — only shown on video frames once the still has loaded. */
.vchrome { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 400ms var(--ease-out); pointer-events: none; }
.sur-cre--video.is-loaded .vchrome { opacity: 1; }
.vchrome::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); }
.vplay-lg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); border: 1.5px solid rgba(255, 255, 255, 0.92); }
.vplay-lg::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.vbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 9px 7px; }
.vbar-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.32); overflow: hidden; }
.vbar-fill { display: block; height: 100%; width: 9%; background: var(--teal-bright); }
.vbar-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: #fff; font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vbar-play { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent #fff; }
.vbar-spacer { flex: 1; }
.vbar-ico { width: 12px; height: 12px; flex: none; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; }

/* Hero lockup: fullthrottle.ai × prospect, with optional scraped logo. */
.prop-lockup { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 18px; }
.prop-lockup .prop-x { color: var(--teal-bright); }
.lockup-ft { text-transform: none; }
.prospect-logo { height: 30px; width: auto; max-width: 180px; object-fit: contain; border-radius: 4px; background: rgba(255,255,255,0.92); padding: 4px 8px; }
.lockup-prospect { color: var(--text); }

/* Sample creative + blueprint (debug-friendly). */
.creative-status { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; }
.creative-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: start; }
@media (max-width: 820px) { .creative-layout { grid-template-columns: 1fr; } }
.creative-grid { display: flex; flex-direction: column; gap: 16px; }
.cgrid-item { margin: 0; }
.cgrid-item img { max-width: 100%; display: block; border-radius: 8px; border: 1px solid var(--hairline-strong); background: #0a0f17; }
.cgrid-item figcaption { margin-top: 6px; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.tag--live { background: rgba(74,222,128,0.16); color: var(--green); }
.tag--mock { background: rgba(251,191,36,0.16); color: var(--amber); }
.banner-reason { color: var(--amber); }
.hint { color: var(--text-faint); font-size: 13px; line-height: 1.5; margin: 0; }

.blueprint { background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); padding: 20px 22px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
.blueprint-title { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-bright); margin: 0 0 14px; }
.blueprint-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bp-row { display: grid; grid-template-columns: 12px 110px 1fr auto; align-items: baseline; gap: 10px; }
.bp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); align-self: center; }
.bp-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.bp-val { font-size: 14px; color: var(--text); word-break: break-word; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--hairline-strong); display: inline-block; }
.bp-hex { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.bp-logo { max-height: 26px; max-width: 120px; object-fit: contain; background: rgba(255,255,255,0.92); border-radius: 3px; padding: 2px 5px; }
.bp-src { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.04em; }
@media (max-width: 560px) { .bp-row { grid-template-columns: 10px 84px 1fr; } .bp-src { grid-column: 2 / -1; } }

/* Spinner (creative loading) */
.spinner { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0, 184, 199, 0.25); border-top-color: var(--teal-bright); animation: spin 0.8s linear infinite; vertical-align: -4px; }
.creative-pending .spinner { margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.8s; } }

/* Scan loader (step 1 — matches the ft-tag-checker hex loader) */
.loader-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 20px 8px; }
.hex-loader { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.hex-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 184, 199, 0.5); animation: ringPulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.hex-ring--2 { animation-delay: 1.1s; }
@keyframes ringPulse { 0% { transform: scale(0.6); opacity: 0.95; border-width: 2px; } 100% { transform: scale(1.4); opacity: 0; border-width: 1px; } }
.hex-icon { position: relative; z-index: 2; filter: drop-shadow(0 0 22px var(--teal-glow)); animation: hexSpin 3.5s linear infinite; }
@keyframes hexSpin { to { transform: rotate(360deg); } }
.loader-status { font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 6px; letter-spacing: 0.01em; }
.loader-url { font-size: 13px; color: var(--text-faint); margin: 0; word-break: break-all; max-width: 460px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .hex-icon { animation: none; }
  .hex-ring { animation-duration: 3s; }
}
.house-roof { fill: #0f3a42; stroke: var(--teal-bright); stroke-width: 1.5; stroke-linejoin: round; }
.house-body { fill: #0e2a30; stroke: var(--teal-bright); stroke-width: 1.5; }
.house-win { fill: var(--teal-bright); }
.house-door { fill: var(--teal-bright); opacity: 0.85; }
/* Signal beams radiating toward each channel, plus expanding pulse rings. */
.hbeam { stroke: var(--teal-bright); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 9; opacity: 0.7; animation: hflow 1.5s linear infinite; }
.hring { fill: none; stroke: var(--teal-bright); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: hpulse 3.4s ease-out infinite; }
.hring2 { animation-delay: 1.13s; }
.hring3 { animation-delay: 2.26s; }
@keyframes hflow { to { stroke-dashoffset: -26; } }
@keyframes hpulse { 0% { transform: scale(0.7); opacity: 0.34; } 100% { transform: scale(2.4); opacity: 0; } }

.surround-card { background: var(--panel-inner); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 20px; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out); }
.surround-card:hover { border-color: var(--panel-border-strong); transform: translateY(-3px); }
.surround-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 184, 199, 0.12); color: var(--teal-bright); margin-bottom: 14px; }
.surround-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.surround-name { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.surround-copy { font-size: 13px; line-height: 1.55; color: var(--text-dim); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .hbeam { animation: none; stroke-dasharray: none; opacity: 0.5; }
  .hring { animation: none; opacity: 0.12; }
}
@media (max-width: 820px) {
  .surround-stage { display: flex; flex-direction: column; align-items: center; }
  .surround-core { order: -1; margin-bottom: 18px; max-width: 240px; }
  .sur-cre { max-width: 320px; width: 100%; }
  .sur-cre.is-loaded,
  .sc-cre-ctv.is-loaded, .sc-cre-olv.is-loaded, .sc-cre-disp.is-loaded { transform: none; }
}

/* Audience strategy */
.audience-layers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.audience-card { background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); padding: 28px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
.audience-card--3p { border-color: var(--panel-border-strong); background: rgba(0, 154, 168, 0.08); }
.audience-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; }
.audience-figure { font-size: clamp(34px, 6vw, 52px); font-weight: 700; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; margin: 0 0 8px; line-height: 1; }
.audience-figure--muted { color: var(--text-faint); }
.audience-est { font-size: 14px; font-weight: 600; color: var(--text-faint); letter-spacing: 0; vertical-align: middle; margin-left: 6px; }
.audience-desc { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin: 0; }
/* Audience data points under the household visual */
.core-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 28px; }
.core-stat { background: var(--panel-inner); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 16px 18px; }
.core-stat-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.core-stat-val { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.core-stat-ext { color: var(--teal-bright); letter-spacing: 0.06em; }
.core-stat-pending { color: var(--text-faint); font-weight: 600; }

.audience-reach { margin: 20px 0 0; font-size: clamp(15px, 2.2vw, 18px); color: var(--text-dim); }
.audience-reach span { color: var(--teal-bright); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Sample creative gallery */
.creative-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; align-items: start; }
.creative-gallery .banner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.creative-gallery .banner img { width: 100%; }

/* The plan */
.plan-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.plan-modify { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--radius-md); border: 1px solid var(--panel-border-strong); background: var(--panel-inner); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), transform 180ms var(--ease-out); }
.plan-modify:hover { border-color: var(--teal-bright); background: rgba(0, 154, 168, 0.10); transform: translateY(-1px); }
.plan-modify:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }
.plan-modify[aria-expanded="true"] { border-color: var(--teal-bright); background: rgba(0, 154, 168, 0.10); }
.plan-modify .arr { color: var(--teal-bright); font-size: 15px; line-height: 1; }
.plan-modify[aria-expanded="true"] .arr { transform: rotate(90deg); }

/* Inline media-mix editor panel. */
.mix-panel { margin-top: 14px; padding: 20px 22px; border: 1px solid var(--panel-border-strong); border-radius: var(--radius-lg); background: var(--panel-inner); animation: mix-reveal 260ms var(--ease-out); }
.mix-panel-note { margin: 0 0 16px; font-size: 13px; color: var(--text-dim); }
.mix-knobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
@keyframes mix-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .mix-knobs { grid-template-columns: 1fr; } }
.plan-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.plan-stat { background: var(--panel-inner); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 16px 18px; }
.plan-stat-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.plan-stat-val { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.plan-table .rate-note { display: block; font-size: 11px; font-weight: 500; color: var(--text-faint); margin-top: 2px; }
.plan-table .col-alloc { white-space: nowrap; }
.alloc-bar { display: inline-block; width: 80px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.alloc-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-bright)); border-radius: 999px; }
.alloc-pct { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 13px; }

/* About */
.prop-about { text-align: center; }
.about-copy { font-size: clamp(15px, 2.4vw, 19px); line-height: 1.65; color: var(--text-dim); max-width: 680px; margin: 0 auto; }

/* CTA */
.prop-cta { text-align: center; display: flex; flex-direction: column; align-items: center; }
.prop-cta-headline { font-size: clamp(24px, 4.5vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); margin: 0 0 24px; max-width: 640px; }

@media (max-width: 820px) {
  .prop-concept { grid-template-columns: 1fr; }
  .audience-layers { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .proposal { gap: 56px; }
  .plan-summary { grid-template-columns: 1fr; }
  .concept-step, .audience-card { padding: 20px; }
  .alloc-bar { width: 52px; }
}