:root {
  --bg-page: #fafafa;
  --bg-white: #ffffff;
  --bg-subtle: #f4f4f5;
  --bg-muted: #ebebf0;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --ink: #09090b;
  --ink-secondary: #52525b;
  --ink-muted: #71717a;
  --accent: #4f46e5;
  --accent-soft: #eef2ff;
  --emerald: #059669;
  --emerald-soft: #ecfdf5;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-md: 0 12px 32px -8px rgba(9, 9, 11, 0.07), 0 2px 6px rgba(9, 9, 11, 0.03);
  --shadow-lg: 0 24px 56px -12px rgba(9, 9, 11, 0.10), 0 4px 12px rgba(9, 9, 11, 0.04);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background-color: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button, input {
  font: inherit;
  color: inherit;
}

.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.container {
  width: min(100% - 48px, 1160px);
  margin-inline: auto;
}

/* Minimal Editorial Navbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 250, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-secondary);
}

.nav-links a:hover {
  color: var(--ink);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-ink {
  background: var(--ink);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.btn-ink:hover {
  background: #27272a;
}

.btn-outline {
  background: var(--bg-white);
  border-color: var(--border-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
  background: var(--bg-subtle);
}

.btn-accent {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.btn-accent:hover {
  background: #4338ca;
}

.btn-lg {
  padding: 13px 24px;
  font-size: 14.5px;
  border-radius: 10px;
}

.btn-sm {
  padding: 7px 12px;
  font-size: 12.5px;
}

/* Hero Section */
.hero {
  padding: 64px 0 36px;
  text-align: center;
}

.prepared-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-secondary);
  margin-bottom: 22px;
}

.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 780px;
  margin: 0 auto 16px;
}

.hero h1 em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.08em;
  color: var(--accent);
}

.hero-sub {
  font-size: 17px;
  color: var(--ink-secondary);
  max-width: 620px;
  margin: 0 auto 28px;
  line-height: 1.55;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Interactive Product Showcase Frame */
.showcase-section {
  padding: 12px 0 88px;
}

.showcase-frame {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Top Control Bar inside Showcase */
.showcase-toolbar {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.company-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.selector-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-right: 4px;
}

.company-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.company-chip:hover {
  color: var(--ink);
  background: rgba(9, 9, 11, 0.04);
}

.company-chip.active {
  background: var(--bg-white);
  border-color: var(--border-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.company-chip-edit {
  color: var(--accent);
}

/* View Switcher Segmented Control */
.view-segmented {
  display: inline-flex;
  background: var(--bg-muted);
  padding: 3px;
  border-radius: 10px;
  gap: 2px;
}

.view-tab {
  padding: 7px 14px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.view-tab:hover {
  color: var(--ink);
}

.view-tab.active {
  background: var(--bg-white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Inline Brief Editor Drawer */
.brief-drawer {
  display: none;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
}

.brief-drawer.open {
  display: block;
}

.brief-form-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.9fr 1.1fr auto;
  gap: 12px;
  align-items: end;
}

.brief-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.brief-input {
  width: 100%;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-white);
  font-size: 13px;
  color: var(--ink);
}

.brief-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Showcase Body Panes */
.showcase-body {
  padding: 28px;
}

.view-pane {
  display: none;
}

.view-pane.active {
  display: block;
}

/* ============================================================ */
/* VIEW 1: 10-SLIDE PITCH DECK STAGE                            */
/* ============================================================ */
.deck-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.deck-stage-title h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.deck-stage-title p {
  font-size: 13.5px;
  color: var(--ink-secondary);
}

.deck-stage-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deck-viewer-layout {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 20px;
  align-items: start;
}

.main-slide-canvas {
  background: #0b0e17;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
  box-shadow: var(--shadow-md);
}

.main-slide-canvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.slide-Inspector-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.slide-counter-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.slide-Inspector-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}

.slide-Inspector-card p {
  font-size: 13.5px;
  color: var(--ink-secondary);
  margin-bottom: 18px;
}

.slide-nav-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

/* 10-Slide Filmstrip */
.slide-filmstrip {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.film-thumb {
  border: 2px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  opacity: 0.65;
  transition: all 0.14s ease;
  background: #0b0e17;
}

.film-thumb:hover {
  opacity: 0.95;
}

.film-thumb.active {
  border-color: var(--accent);
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.film-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================ */
/* VIEW 2: INTERACTIVE INVESTOR DEAL ROOM                       */
/* ============================================================ */
.dealroom-top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.dealroom-ask-pill {
  background: var(--emerald-soft);
  border: 1px solid rgba(5, 150, 105, 0.25);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  text-align: right;
}

.dealroom-ask-pill span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--emerald);
  font-weight: 600;
}

.dealroom-ask-pill strong {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.dealroom-ask-pill small {
  display: block;
  font-size: 12px;
  color: var(--ink-secondary);
}

.kpi-strip-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.kpi-clean-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.kpi-clean-card span {
  font-size: 12px;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 4px;
}

.kpi-clean-card strong {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  display: block;
}

.kpi-clean-card em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--emerald);
}

.dealroom-sim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.clean-panel {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
}

.clean-panel h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

.clean-list {
  list-style: none;
  display: grid;
  gap: 10px;
}

.clean-list li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-secondary);
}

.clean-list li::before {
  content: "✓";
  color: var(--emerald);
  font-weight: 700;
}

.sim-slider-group {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.sim-row label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-secondary);
  margin-bottom: 5px;
}

.sim-row label strong {
  font-family: var(--font-mono);
  color: var(--ink);
}

input[type="range"].editorial-range {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.sim-output-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.sim-out-item span {
  font-size: 11px;
  color: var(--ink-muted);
  display: block;
}

.sim-out-item strong {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

/* ============================================================ */
/* VIEW 3: INCLUDED LAUNCH BONUSES (REELS + LANDING PAGE)       */
/* ============================================================ */
.bonuses-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: start;
}

.reels-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.phone-frame-light {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow-sm);
}

.phone-frame-light video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 9px;
  display: block;
  background: #09090b;
}

.phone-frame-meta {
  padding: 8px 4px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
}

/* Section 2: How It Works (3 Quiet Editorial Cards) */
.editorial-section {
  padding: 72px 0;
  border-top: 1px solid var(--border);
}

.section-header-clean {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 44px;
}

.eyebrow-clean {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}

.section-header-clean h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.section-header-clean p {
  font-size: 15.5px;
  color: var(--ink-secondary);
}

.steps-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 14px;
}

.step-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.step-card p {
  font-size: 14px;
  color: var(--ink-secondary);
}

/* Section 3: Simple 2-Card Pricing */
.pricing-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}

.pricing-card-clean {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.pricing-card-clean.primary-tier {
  border: 2px solid var(--ink);
}

.tier-badge-top {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.tier-head h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
}

.tier-head p {
  font-size: 13.5px;
  color: var(--ink-secondary);
  margin-bottom: 20px;
}

.tier-price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.tier-price-line strong {
  font-family: var(--font-mono);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.tier-price-line span {
  font-size: 13px;
  color: var(--ink-muted);
}

.tier-checklist {
  list-style: none;
  display: grid;
  gap: 11px;
  margin-bottom: 26px;
}

.tier-checklist li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-secondary);
}

.tier-checklist li::before {
  content: "✓";
  color: var(--emerald);
  font-weight: 700;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 11, 0.45);
  backdrop-filter: blur(6px);
  z-index: 250;
  display: none;
  place-items: center;
  padding: 20px;
}

.modal-backdrop.open {
  display: grid;
}

.modal-dialog {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  max-width: 540px;
  width: 100%;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.modal-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  cursor: pointer;
  font-size: 16px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 36px 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 960px) {
  .deck-viewer-layout,
  .dealroom-sim-grid,
  .bonuses-layout,
  .steps-grid-3,
  .pricing-grid-2,
  .brief-form-grid {
    grid-template-columns: 1fr;
  }
  .kpi-strip-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .slide-filmstrip {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 600px) {
  .container {
    width: calc(100% - 32px);
  }
  .nav-links {
    display: none;
  }
  .hero {
    padding: 40px 0 24px;
  }
  .showcase-body {
    padding: 18px;
  }
  .reels-mini-grid {
    grid-template-columns: 1fr;
  }
}


/* View 1 (Default): 3-Column Light Editorial Reels Stage */
.reels-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.reel-editorial-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reel-editorial-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.reel-video-frame {
  background: #09090b;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--border);
  margin-bottom: 14px;
}

.reel-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-card-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
}

.reel-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}

.reel-caption-preview {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.45;
  margin-bottom: 12px;
}

.reel-card-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 960px) {
  .reels-stage-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* WHAT WE BUILT & UPGRADED FOR [COMPANY] SUMMARY CARD          */
/* ============================================================ */
.upgrade-summary-card {
  background: var(--bg-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 24px 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-md);
}

.upgrade-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.upgrade-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--emerald-soft);
  border: 1px solid rgba(5, 150, 105, 0.3);
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.upgrade-summary-top h2 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.5vw, 23px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.upgrade-summary-top p {
  font-size: 13.5px;
  color: var(--ink-secondary);
}

.before-after-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ba-pillar-box {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ba-pillar-box:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.ba-pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.ba-pillar-head strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.ba-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
}

.ba-row-before {
  font-size: 12.5px;
  color: var(--ink-muted);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.ba-row-before > span:first-child {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #dc2626;
  margin-right: 4px;
}

.ba-row-after {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
}

.ba-row-after > span:first-child {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--emerald);
  margin-right: 4px;
}

/* ============================================================ */
/* DYNAMIC 16:9 WIDESCREEN LIVE SLIDE CANVAS                    */
/* ============================================================ */
.dynamic-slide-stage {
  width: 100%;
  height: 100%;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
  user-select: none;
}

.dynamic-slide-stage.theme-dark {
  background: #0b0e17;
  color: #f8fafc;
}

.dynamic-slide-stage.theme-light {
  background: #f8fafc;
  color: #0f172a;
}

.slide-accent-bar {
  position: absolute;
  left: 18px;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 4px;
  background: #6366f1;
}

.dynamic-slide-stage.theme-light .slide-accent-bar {
  background: #10b981;
}

.ds-top-row {
  padding-left: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-dark .ds-top-row { color: #34d399; }
.theme-light .ds-top-row { color: #4f46e5; }

.ds-center-body {
  padding-left: 12px;
  margin: auto 0;
}

.ds-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

.ds-subtitle {
  font-size: clamp(12px, 1.3vw, 15px);
  line-height: 1.45;
  max-width: 92%;
  margin-bottom: 16px;
}

.theme-dark .ds-subtitle { color: #94a3b8; }
.theme-light .ds-subtitle { color: #475569; }

.ds-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ds-kpi-box {
  border-radius: 8px;
  padding: 10px 12px;
}

.theme-dark .ds-kpi-box {
  background: #151b2b;
  border: 1px solid #26304a;
}

.theme-light .ds-kpi-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.ds-kpi-box small {
  display: block;
  font-size: 10px;
  opacity: 0.72;
  margin-bottom: 2px;
}

.ds-kpi-box strong {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 800;
}

.ds-kpi-box em {
  font-style: normal;
  font-size: 10px;
  color: #10b981;
  font-weight: 600;
}

.ds-bullets-stack {
  display: grid;
  gap: 8px;
}

.ds-bullet-row {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-dark .ds-bullet-row {
  background: #151b2b;
  border: 1px solid #26304a;
  color: #e2e8f0;
}

.theme-light .ds-bullet-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

.ds-bullet-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #6366f1;
  flex-shrink: 0;
}

.ds-bottom-row {
  padding-left: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  opacity: 0.65;
}

/* Filmstrip dynamic mini cards */
.film-thumb-dynamic {
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-size: 8px;
  line-height: 1.15;
  text-align: left;
}

.film-thumb-dynamic.theme-dark {
  background: #0b0e17;
  color: #f8fafc;
}

.film-thumb-dynamic.theme-light {
  background: #f8fafc;
  color: #0f172a;
}

@media (max-width: 960px) {
  .before-after-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  body { max-width: 100vw; overflow-x: clip; }
  .upgrade-summary-card {
    padding: 18px 16px;
  }
  .dynamic-slide-stage {
    padding: 14px 16px;
  }
  .ds-title {
    font-size: 16px;
    margin-bottom: 4px;
  }
  .ds-subtitle {
    font-size: 11px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ds-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .ds-kpi-box {
    padding: 6px 8px;
  }
  .ds-kpi-box strong {
    font-size: 12px;
  }
  .ds-kpi-box em {
    display: none;
  }
  .ds-bullet-row {
    padding: 5px 8px;
    font-size: 10.5px;
  }
  .main-slide-canvas {
    aspect-ratio: auto;
    min-height: 230px;
  }
  .showcase-toolbar {
    padding: 12px 14px;
  }
  .view-segmented {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  .view-tab {
    text-align: center;
  }
}

/* ============================================================ */
/* PRIVATE NUMBERS & DEAL TERMS EDITOR DRAWER                   */
/* ============================================================ */
.brief-drawer {
  display: none;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-strong);
  padding: 22px 24px;
}

.brief-drawer.open {
  display: block;
}

.editor-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.editor-header-row h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.editor-header-row p {
  font-size: 12.5px;
  color: var(--ink-secondary);
}

.brief-form-grid-8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: end;
}

.brief-field.span-2 {
  grid-column: span 2;
}

.editor-actions-bar {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.benchmark-note {
  font-size: 12px;
  color: var(--ink-muted);
}

@media (max-width: 960px) {
  .brief-form-grid-8 {
    grid-template-columns: repeat(2, 1fr);
  }
  .brief-field.span-2 {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .brief-drawer {
    padding: 16px;
  }
  .brief-form-grid-8 {
    grid-template-columns: 1fr;
  }
  .brief-field.span-2 {
    grid-column: span 1;
  }
  .editor-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .editor-actions-bar .btn {
    width: 100%;
  }
}

/* ============================================================ */
/* MULTI-ROOM SWITCHER (INVESTOR ROOM vs B2B CLIENT QUOTE ROOM) */
/* ============================================================ */
.multiroom-bar {
  background: linear-gradient(90deg, #eef2ff 0%, #ecfdf5 100%);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.multiroom-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.multiroom-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-right: 4px;
}

.room-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-white);
  color: var(--ink-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.room-mode-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.room-mode-pill.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.room-mode-pill.new-quote-pill {
  border-style: dashed;
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 255, 255, 0.85);
}

/* Inline New Client Quote Spawner Bar */
.new-quote-drawer {
  display: none;
  background: #ffffff;
  border-bottom: 2px solid var(--accent);
  padding: 16px 24px;
}

.new-quote-drawer.open {
  display: block;
}

.new-quote-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

/* Live Buyer / Investor Telemetry Notification Strip */
.telemetry-strip {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-secondary);
}

.telemetry-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--emerald);
  background: var(--emerald-soft);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

/* Interactive 3-Tier B2B Price Quote Selector inside Deal Room */
.quote-tiers-section {
  display: none;
  margin-bottom: 22px;
}

.quote-tiers-section.active {
  display: block;
}

.quote-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.quote-option-card {
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quote-option-card:hover {
  border-color: var(--border-strong);
}

.quote-option-card.selected {
  border-color: var(--emerald);
  background: var(--emerald-soft);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.12);
}

.quote-opt-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.quote-opt-name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

.quote-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: transparent;
}

.quote-option-card.selected .quote-radio {
  border-color: var(--emerald);
  background: var(--emerald);
  color: #fff;
}

.quote-opt-price {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.quote-opt-desc {
  font-size: 12.5px;
  color: var(--ink-secondary);
}

@media (max-width: 960px) {
  .new-quote-grid,
  .quote-tiers-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .multiroom-bar {
    padding: 12px 14px;
  }
  .multiroom-left {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .room-mode-pill {
    justify-content: center;
    width: 100%;
  }
  .new-quote-drawer {
    padding: 14px;
  }
}

.room-mode-pill {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* Dynamic 9:16 Animated Reel Cards inside View 03 (Included Bonuses) */
.dynamic-reel-screen {
  aspect-ratio: 9 / 16;
  background: #090b12;
  border-radius: 9px;
  padding: 14px 12px;
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border: 1px solid #1e293b;
}

.reel-prog-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.reel-prog-fill {
  height: 100%;
  background: #6366f1;
  width: 72%;
  animation: reelPulse 3.2s infinite ease-in-out;
}

@keyframes reelPulse {
  0% { width: 22%; }
  50% { width: 92%; }
  100% { width: 22%; }
}

.reel-kicker-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: block;
}

.reel-dyn-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 6px;
}

.reel-dyn-sub {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reel-dyn-metric-box {
  background: #13192b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}

.reel-dyn-metric-box small {
  display: block;
  font-size: 8.5px;
  color: #94a3b8;
  text-transform: uppercase;
}

.reel-dyn-metric-box strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 800;
  color: #34d399;
  margin-top: 2px;
}

.reel-bars-row {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 28px;
  margin-top: 8px;
}

.reel-bars-row span {
  flex: 1;
  background: #6366f1;
  border-radius: 3px;
}

.reel-bars-row span:last-child {
  background: #10b981;
}

@media (max-width: 600px) {
  .dealroom-ask-pill {
    width: 100%;
    text-align: left;
  }
  .dealroom-ask-pill strong {
    font-size: 20px;
    line-height: 1.25;
    word-break: break-word;
  }
}

/* ============================================================ */
/* V12 FLAGSHIP ARCHITECTURAL GRID & LINEAR/ATTIO WINDOW CHROME */
/* ============================================================ */
.hero {
  position: relative;
  padding: 72px 0 42px;
  text-align: center;
  background-image:
    linear-gradient(to right, rgba(9, 9, 11, 0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9, 9, 11, 0.038) 1px, transparent 1px);
  background-size: 48px 48px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, transparent 35%, var(--bg-page) 85%);
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 2;
}

.trust-proof-strip {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(9, 9, 11, 0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

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

.trust-proof-item strong {
  color: var(--ink);
}

/* Flagship macOS / Linear App Window Chrome */
.showcase-frame {
  background: var(--bg-white);
  border: 1px solid #d4d4d8;
  border-radius: 20px;
  box-shadow:
    0 28px 70px -16px rgba(9, 9, 11, 0.12),
    0 4px 16px -2px rgba(9, 9, 11, 0.05),
    0 0 0 1px rgba(9, 9, 11, 0.03);
  overflow: hidden;
}

.app-window-bar {
  background: #f4f4f6;
  border-bottom: 1px solid var(--border);
  padding: 11px 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.window-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.window-dots {
  display: flex;
  gap: 6px;
}

.window-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.window-dots span:nth-child(1) { background: #fca5a5; border: 1px solid #f87171; }
.window-dots span:nth-child(2) { background: #fde68a; border: 1px solid #fbbf24; }
.window-dots span:nth-child(3) { background: #6ee7b7; border: 1px solid #34d399; }

.window-url-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 7px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-secondary);
  box-shadow: var(--shadow-sm);
}

.window-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Consolidated Single-Row Sub-Control Bar */
.app-control-strip {
  background: #fafafa;
  border-bottom: 1px solid var(--border);
  padding: 9px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.control-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-right: 2px;
}

/* Flagship 3-Card Visual Bento Grid (#how-it-works) */
.bento-visual-box {
  background: #0f172a;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
  color: #f8fafc;
  border: 1px solid #1e293b;
  font-size: 12px;
}

.bento-mini-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  margin-bottom: 8px;
}

.bento-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
}

@media (max-width: 960px) {
  .app-window-bar {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .window-right {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .trust-proof-strip {
    flex-direction: column;
    gap: 8px;
  }
  .app-window-bar {
    padding: 10px 12px;
  }
  .window-url-pill {
    font-size: 10.5px;
    padding: 4px 8px;
  }
  .app-control-strip {
    padding: 10px 12px;
  }
}

@media (max-width: 600px) {
  .site-header .btn-outline {
    display: none;
  }
}

/* ============================================================ */
/* V13 HONEST PLACEHOLDERS FOR NON-PUBLIC METRICS               */
/* ============================================================ */
.kpi-clean-card.is-placeholder {
  border: 1.5px dashed #6366f1;
  background: rgba(99, 102, 241, 0.04);
  cursor: pointer;
  transition: all 0.15s ease;
}

.kpi-clean-card.is-placeholder:hover {
  background: rgba(99, 102, 241, 0.09);
  border-color: #4f46e5;
}

.kpi-clean-card.is-placeholder strong {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: #4f46e5;
  margin: 6px 0 4px;
}

.kpi-clean-card.is-placeholder em {
  color: var(--ink-muted);
  font-size: 11px;
}

.dealroom-ask-pill.is-placeholder {
  border: 1.5px dashed #6366f1;
  background: rgba(99, 102, 241, 0.05);
  cursor: pointer;
}

.dealroom-ask-pill.is-placeholder strong {
  font-size: 16px;
  color: #4f46e5;
}

/* ============================================================ */
/* V14 EXTRACTED CLAIM SOURCE ATTRIBUTION & 1-CLICK CONFIRM     */
/* ============================================================ */
.source-confirm-row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.source-origin-tag {
  font-size: 11px;
  color: var(--ink-muted);
}

.confirm-claim-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-white);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.14s ease;
}

.confirm-claim-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.confirm-claim-btn.confirmed {
  border-color: rgba(5, 150, 105, 0.35);
  background: var(--emerald-soft);
  color: var(--emerald);
}

/* ============================================================ */
/* V15 COUNCIL EDITION: 10-SECOND ZERO-HOMEWORK LIVE TEST BAR   */
/* ============================================================ */
.aha-live-test-bar {
  background: linear-gradient(135deg, #090d16 0%, #111827 100%);
  color: #ffffff;
  border: 2px solid #4f46e5;
  border-radius: 16px;
  padding: 18px 22px;
  margin: 0 auto 22px;
  max-width: 1040px;
  text-align: left;
  box-shadow: 0 20px 44px -12px rgba(79, 70, 229, 0.28), 0 0 0 4px rgba(79, 70, 229, 0.10);
}

.aha-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.aha-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #a5b4fc;
  letter-spacing: 0.02em;
}

.aha-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 11px;
  border-radius: 999px;
}

.aha-controls-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr 0.85fr 0.85fr auto;
  gap: 10px;
  align-items: end;
}

.aha-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.aha-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1.5px solid #4f46e5;
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.aha-input.client-pulse {
  border-color: #34d399;
  background: rgba(6, 78, 59, 0.35);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

.aha-input:focus {
  outline: none;
  border-color: #34d399;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.32);
}

.aha-bottom-row {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.aha-quick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #94a3b8;
}

.aha-chip-btn {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.aha-chip-btn:hover {
  border-color: #34d399;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
}

.live-tracking-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}

.viral-wedge-footer {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(90deg, #eef2ff 0%, #ecfdf5 100%);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.viral-wedge-footer a {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 960px) {
  .aha-controls-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .aha-live-test-bar {
    padding: 14px;
  }
  .aha-controls-grid {
    grid-template-columns: 1fr;
  }
  .aha-trust-badge,
  .live-tracking-toast {
    font-size: 11px;
    white-space: normal;
    border-radius: 10px;
  }
}

/* ============================================================ */
/* V16 PROPOSAL-TO-DEPOSIT ENGINE & 375PX ZERO-OVERFLOW RULES   */
/* ============================================================ */
body { max-width: 100%; overflow-x: clip; }

.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sample-tiers-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.38);
  padding: 3px 10px;
  border-radius: 999px;
}

.sample-tiers-inline-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

.tier-mini-tag {
  font-size: 9.5px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}

.live-tracking-toast.waiting {
  background: rgba(148, 163, 184, 0.14);
  border: 1px dashed rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
}

@media (max-width: 768px) {
  .container {
    width: calc(100% - 28px);
  }
  .nav-inner {
    height: 58px;
    gap: 8px;
  }
  .nav-links,
  .nav-edit-only-desktop {
    display: none !important;
  }
  #nav-primary-cta {
    font-size: 12px;
    padding: 7px 11px;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .prepared-pill {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    padding: 6px 12px;
  }
  .showcase-body {
    padding: 16px 12px;
  }
  .upgrade-summary-card {
    padding: 16px 14px;
  }
  .dealroom-ask-pill {
    text-align: left;
    width: 100%;
  }
  .sim-output-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================ */
/* V16: 35-SECOND LIVE PRODUCT DEMO VIDEO SHOWCASE CARD         */
/* ============================================================ */
.demo-video-showcase-card {
  margin: 26px auto 10px;
  max-width: 1040px;
  background: var(--bg-white);
  border: 1.5px solid var(--border-strong);
  border-radius: 18px;
  padding: 18px 22px 20px;
  text-align: left;
  box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.12);
}

.demo-video-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.demo-video-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(79, 70, 229, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.demo-video-title-group h3 {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.demo-step-chapters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.demo-chapter-btn {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-page);
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s ease;
}

.demo-chapter-btn:hover,
.demo-chapter-btn.active {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

.demo-video-frame-wrap {
  background: #090d16;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #1e293b;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.demo-video-frame-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #090d16;
}

@media (max-width: 768px) {
  .demo-video-showcase-card {
    padding: 14px;
    margin-top: 18px;
  }
  .demo-chapter-btn {
    font-size: 10px;
    padding: 4px 8px;
  }
  .hero-cta-row .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* ===== v17 Ultra-Clean Edition ===== */
.nav-links,.hero-cta-row,#demo-video-section,.upgrade-summary-card,.template-switcher-bar,.studio-tab,#how-it-works,#pagelift-comparison-section,#sim-card,.view-segmented,.app-control-strip,.viral-wedge-footer,.trust-proof-strip,#view-deck,#view-bonuses,.aha-quick-chips,.nav-edit-only-desktop{display:none!important}
.btn-quiet{background:transparent;border:1px solid transparent;color:var(--ink-secondary,#52525b)}
.btn-quiet:hover{border-color:var(--border,#e4e4e7)}
.hero-v17{max-width:820px;text-align:center}
.hero-v17 h1{font-size:clamp(30px,4.4vw,48px);line-height:1.1;margin:14px auto 10px}
.hero-v17 .hero-sub{max-width:640px;margin:0 auto 22px}
.aha-card-v17{background:#fff;border:1px solid var(--border-strong,#d4d4d8);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.06);text-align:left;display:flex;flex-direction:column;gap:12px}
.aha-card-v17 .aha-input{width:100%;padding:11px 12px;border:1px solid #d4d4d8;border-radius:10px;font-size:15px;color:#09090b;background:#fff}
.aha-card-v17 .v17-client{font-size:17px;padding:14px}
.aha-v17-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;padding-top:18px}
.aha-v17-tiers label{font-size:11.5px;font-weight:700;color:#52525b;display:flex;flex-direction:column;gap:4px}
.v17-sample-tag{position:absolute;top:0;right:0;font-size:10.5px;background:#fef3c7;color:#92400e;border-radius:99px;padding:1px 8px}
.aha-v17-actions{display:flex;gap:8px;flex-wrap:wrap}
.aha-card-v17 .live-tracking-toast{color:#334155;background:#f1f5f9;border-radius:8px;padding:8px 12px;font-size:12.5px}
.v17-trust-line{margin-top:14px;font-size:13px;color:var(--ink-muted,#71717a)}
.v17-link{font-size:12.5px;color:var(--ink-secondary,#52525b);text-decoration:underline;margin-right:6px}
#demo-video-modal.open,#client-deposit-modal.open,#checkout-modal.open{display:flex}
@media(max-width:640px){.aha-v17-tiers{grid-template-columns:1fr}.window-right{flex-wrap:wrap}}

.webhook-radar-strip, #webhook-radar-strip { display: none !important; }

/* ===== v18 Mobile-Perfect & Responsive Layout Rules ===== */
.pricing-grid-2 > *,
.pricing-card-clean,
.quote-tiers-grid > *,
.kpi-strip-4 > *,
.dealroom-sim-grid > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.tier-price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.tier-price-line > strong {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.tier-price-line span strong {
  font-family: var(--font-sans);
  font-size: 13.5px !important;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}

.tier-badge-top {
  max-width: calc(100% - 32px);
  white-space: normal;
  line-height: 1.25;
}

.pricing-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.pricing-cta-grid .btn {
  width: 100%;
  min-width: 0;
  white-space: normal;
  text-align: center;
  justify-content: center;
  padding: 12px 10px;
  font-size: 13px;
  line-height: 1.25;
}

.modal-plan-grid,
.modal-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.modal-plan-grid > *,
.modal-2col-grid > * {
  min-width: 0;
}

#quote-approve-cta {
  white-space: normal;
  text-align: center;
  justify-content: center;
  line-height: 1.3;
  max-width: 100%;
}

@media (max-width: 640px) {
  .nav-cta-group {
    gap: 6px;
  }
  #nav-demo-btn {
    font-size: 11.5px;
    padding: 6px 8px;
  }
  #nav-primary-cta {
    font-size: 11.5px;
    padding: 6px 10px;
  }
  .pricing-card-clean {
    padding: 26px 18px 20px;
  }
  .tier-badge-top {
    left: 16px;
    right: auto;
    max-width: calc(100% - 32px);
    font-size: 10.5px;
    padding: 4px 10px;
  }
  .tier-price-line > strong {
    font-size: 34px;
  }
  .pricing-cta-grid,
  .modal-plan-grid,
  .modal-2col-grid {
    grid-template-columns: 1fr;
  }
  .modal-dialog {
    padding: 18px 14px;
  }
}

@media (max-width: 480px) {
  .brand {
    font-size: 15px;
    gap: 7px;
  }
  .brand-mark {
    width: 24px;
    height: 24px;
  }
  .nav-cta-group {
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
  }
  #nav-demo-btn,
  #nav-primary-cta {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
}

/* Clean non-clipped badge & modal spacing */
.pricing-card-clean .tier-badge-top {
  position: static !important;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  font-size: 11px;
  line-height: 1.3;
  max-width: 100%;
}

.modal-backdrop {
  padding: 16px;
  overflow-y: auto;
}

.modal-dialog {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 22px 20px 24px;
}

@media (max-width: 640px) {
  .aha-card-v17 .v17-client {
    font-size: 14.5px;
    padding: 12px 12px;
  }
  .pricing-card-clean {
    padding: 22px 18px 22px;
  }
  .modal-dialog {
    padding: 18px 16px 22px;
  }
}

/* Generous breathing room inside pricing cards, hero card, and modals */
.pricing-card-clean {
  padding: 28px 28px 32px !important;
  border: 1.5px solid #d4d4d8;
  justify-content: flex-start !important;
  gap: 16px;
}

.pricing-card-clean.primary-tier {
  border: 2px solid var(--ink) !important;
}

.pricing-card-clean .tier-badge-top {
  position: static !important;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 4px !important;
  padding: 6px 12px !important;
  font-size: 11px;
  line-height: 1.3;
  border-radius: 999px;
}

.pricing-cta-grid {
  margin-top: auto;
  padding-top: 8px;
}

.aha-card-v17 {
  padding: 20px 18px 24px !important;
}

.modal-dialog {
  padding: 24px 22px 28px !important;
}

@media (max-width: 640px) {
  .pricing-card-clean {
    padding: 24px 20px 28px !important;
  }
  .modal-dialog {
    padding: 20px 18px 26px !important;
  }
}

/* Ensure Hero card and Pricing cards fit 100% inside a single iPhone viewport height with generous margin */
.pricing-card-clean {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 18px !important;
  padding: 26px 26px 30px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
}

.pricing-card-clean.primary-tier {
  border: 2px solid #09090b !important;
}

.tier-checklist {
  gap: 9px !important;
  margin-bottom: 20px !important;
}

.tier-checklist li {
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}

.tier-price-line {
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
}

.pricing-cta-grid .btn {
  padding: 13px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  height: auto !important;
}

@media (max-width: 640px) {
  .hero-section {
    padding: 22px 0 28px !important;
  }
  .hero-v17 h1 {
    font-size: 27px !important;
    line-height: 1.15 !important;
    margin: 10px auto 8px !important;
  }
  .hero-v17 .hero-sub {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin: 0 auto 14px !important;
  }
  .aha-card-v17 {
    padding: 16px 14px 18px !important;
    gap: 10px !important;
  }
  .aha-v17-tiers {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding-top: 20px !important;
  }
  .aha-v17-tiers label {
    font-size: 10.5px !important;
    min-width: 0 !important;
  }
  .aha-card-v17 .aha-input.tabular {
    font-size: 12.5px !important;
    padding: 8px 6px !important;
  }
  .pricing-card-clean {
    padding: 22px 18px 26px !important;
    gap: 12px !important;
  }
}

/* Clean up Proposal Room top bar & KPI cards on mobile and desktop */
.telemetry-strip {
  display: none !important;
}

.window-right #window-pdf-link {
  display: none !important;
}

@media (max-width: 640px) {
  .window-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .window-url {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px !important;
  }
  .window-right {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px !important;
    width: 100%;
  }
  .window-right .btn {
    width: 100%;
    justify-content: center;
    font-size: 11.5px !important;
    padding: 7px 8px !important;
  }
  .kpi-strip-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .kpi-box {
    padding: 10px 12px !important;
    min-width: 0 !important;
  }
  .kpi-box strong {
    font-size: 14.5px !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }
  .kpi-box span,
  .kpi-box small {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}

.quote-tier-check {
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

.site-header { position: sticky !important; top: 0; z-index: 100; }