/* ==========================================================================
   Pitch Page Styles — agencies.html & enterprise.html
   ========================================================================== */

/* ── Subsection heading spacer (in-section <h3> break) ── */
.subsection-heading {
  margin-top: 2.5rem;
}

/* ── Cover ── */
/* Kunal's ask (Oct 2026): on wide screens, the hero text block should
   line up with the same centered grid every section below it already
   uses (.pitch-page: max-width:1200px, margin:0 auto, padding:...32px —
   its real left edge is therefore max(0, (100vw - 1200px)/2) + 32px).
   First attempt used max(180px, (100% - 1200px)/2), assuming .pitch-page
   had a similar ~180px floor on narrower desktop widths — WRONG, measured
   directly via Playwright (not assumed): .pitch-page has no floor at all,
   it sits flush left with only its own side padding below 1216px wide
   and only starts growing its margin above that. Matched that exact
   formula instead, measured correct at 991/992/1200/1216/1366/1600/1920px
   widths before shipping. .cover's background must stay full-bleed
   edge-to-edge (can't become max-width+margin:auto like .pitch-page
   itself, that would leave empty background on either side instead of
   extending the gradient to the viewport edge), so this is applied as
   padding using the identical centering math margin:0 auto performs
   internally.
   Oct 2026 follow-up (iPad Pro screenshot): .pitch-page's own side
   padding was bumped from 8px to 32px (see that rule's own comment — 8px
   left almost no real gutter at 1024px/834px) — updated the +8px here to
   +32px to match, so the hero and body content stay aligned after that
   change too. */
.cover {
  padding-top: 80px;
  padding-bottom: 120px;
  padding-left: calc(max(0px, (100% - 1200px) / 2) + 32px);
  padding-right: calc(max(0px, (100% - 1200px) / 2) + 32px);
  position: relative;
  overflow: hidden;
}

.cover::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.cover::after {
  content: "";
  position: absolute;
  bottom: -120px;
  left: -60px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.cover-inner {
  max-width: 780px;
  position: relative;
  z-index: 1;
}
.cover-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.cover-logo-name {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.02em;
}
.cover-pill {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: var(--13-fs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 16px;
}
.cover h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.05em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.cover h1 span {
  color: rgba(255, 255, 255, 0.8);
}
.cover-sub {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  line-height: 1.65;
  margin-bottom: 40px;
}
.cover-meta {
  display: flex;
  gap: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 26px;
  flex-wrap: wrap;
}
.cover-meta-item {
  font-size: var(--14-fs);
  color: rgba(255, 255, 255, 0.7);
}
.cover-meta-item strong {
  display: block;
  font-size: var(--16-fs);
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  font-family: "JetBrains Mono", "Courier New", monospace;
  letter-spacing: -0.03em;
}

/* ── Page wrapper ── */
/* Kunal's ask (Oct 2026, iPad Pro screenshot): content ran edge-to-edge
   at the iPad Pro breakpoints (1024px/834px) — confirmed via measurement
   that .pitch-page's old 8px side padding left almost no real gutter at
   any width below 1216px (where max-width:1200px + margin:0 auto starts
   growing its own margin). Bumped to 32px, matching .section-padding's
   own 2rem horizontal gutter (public/css/shared.css) already used
   consistently on the homepage/downloads at every width — so every page
   now has the same minimum side margin regardless of which container
   convention it uses. */
.pitch-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 52px 32px 80px;
}
.section {
  margin-bottom: 40px;
}
.section p {
  font-size: var(--15-fs);
}
.section ul {
  margin: 8px 0 16px;
  padding-left: 20px;
}
.section ul li {
  font-size: var(--15-fs);
  color: inherit;
  margin-bottom: 8px;
  padding-left: 4px;
}
.section-label {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: var(--13-fs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #4f46e5;
  margin-bottom: 10px;
}
h2 {
  font-size: clamp(1.45rem, 3.5vw, 1.85rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  line-height: 1.2;
}
h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
p {
  color: #475569;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.7;
}
strong {
  color: #0f172a;
}

/* ── Callouts ── */
.callout {
  background: #fff;
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-left: 4px solid #4f46e5;
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 18px 0;
  font-size: var(--16-fs);
}
.callout-success {
  border-left-color: #10b981;
  border-color: rgba(16, 185, 129, 0.2);
}
.callout-red {
  border-left-color: #ef4444;
  border-color: rgba(239, 68, 68, 0.15);
}

/* ── Sources / citation footnote block ── */
.sources-block {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}
.sources-block p {
  margin-bottom: 0.25rem;
}
.sources-block p:last-child {
  margin-bottom: 0;
}

/* ── Audience cards ── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.audience-card {
  background: var(--bg-cards);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.audience-card h3 {
  font-size: var(--16-fs);
  margin-bottom: 5px;
}
.audience-card p {
  font-size: var(--14-fs);
  color: #5e6d83;
  margin: 0;
}

.audience-icon {
  font-size: 22px;
  /* margin-bottom: 10px; */
  display: block;
}

/* ── Problem/Solution ── */
.ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.ps-card {
  border-radius: 8px;
  padding: 24px;
}
.ps-card-full {
  grid-column: 1 / -1;
}
.ps-card-full ul {
  column-count: 2;
  column-gap: 32px;
}
.ps-card-full ul li {
  break-inside: avoid;
}
@media (max-width: 768px) {
  .ps-card-full ul {
    column-count: 1;
  }
}
.ps-problem {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.ps-solution {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.ps-card h3 {
  font-size: var(--16-fs);
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ps-problem h3 {
  color: #991b1b;
}
.ps-solution h3 {
  color: #065f46;
}
.ps-card ul {
  list-style: none;
  padding: 0;
}
.ps-card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--14-fs);
  margin-bottom: 9px;
  color: #374151;
  line-height: 1.5;
}
.ps-problem li::before {
  content: "✕";
  flex-shrink: 0;
  color: #dc2626;
  font-weight: 900;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 2px;
}
.ps-solution li::before {
  content: "✓";
  flex-shrink: 0;
  color: #10b981;
  font-weight: 900;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 2px;
}

/* ── Dark stat block ── */
.diff-block {
  background: #0f172a;
  border-radius: 12px;
  padding: 36px;
  margin: 20px 0;
  color: #fff;
}
.diff-block h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.diff-block > p {
  color: #fff;
  margin-bottom: 0;
  font-size: var(--15-fs);
}
.diff-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.diff-stat {
  text-align: center;
}
.diff-num {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--brand-purple);
  display: block;
  letter-spacing: -0.04em;
}
.diff-label {
  font-size: var(--13-fs);
  color: #fff;
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Risk block (enterprise) ── */
.risk-block {
  background: #0f172a;
  border-radius: 12px;
  padding: 36px;
  margin: 20px 0;
  color: #fff;
}
.risk-block h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.risk-block > p {
  color: #94a3b8;
  margin-bottom: 0;
}
.risk-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.risk-stat {
  text-align: center;
}
.risk-num {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: #f87171;
  display: block;
  letter-spacing: -0.04em;
}
.risk-label {
  font-size: var(--13-fs);
  color: #bac2cf;
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Seat explainer ── */
.seat-explainer {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 10px;
  padding: 24px 28px;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.seat-col h3 {
  font-size: var(--15-fs);
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}
.seat-col ul {
  list-style: none;
  padding: 0;
}
.seat-col li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--14-fs);
  color: #334155;
  margin-bottom: 7px;
}
.seat-col li::before {
  content: "→";
  flex-shrink: 0;
  color: #4f46e5;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 2px;
}
.seat-pill {
  display: inline-block;
  background: rgba(79, 70, 229, 0.07);
  border: 1px solid rgba(79, 70, 229, 0.2);
  color: #4f46e5;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-family: "JetBrains Mono", "Courier New", monospace;
}

/* ── Portfolio cards (enterprise) ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.portfolio-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-left: 4px solid #4f46e5;
  border-radius: 6px;
  padding: 18px 20px;
}
.portfolio-card h3 {
  font-size: var(--16-fs);
  margin-bottom: 5px;
  color: #0f172a;
}
.portfolio-card p {
  font-size: var(--14-fs);
  color: #64748b;
  margin: 0;
}

/* ── Feature list ── */
.feature-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.feature-list-item {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.feature-list-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.feature-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--15-fs);
  color: #334155;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 6px;
  padding: 12px 14px;
}
.feature-list li .icon {
  font-size: var(--15-fs);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Tool cards ── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.tool-card {
  background: var(--bg-cards);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-left: 4px solid #0284c7;
  border-radius: 6px;
  padding: 18px 20px;
}
.tool-card h3 {
  font-size: var(--15-fs);
  margin-bottom: 5px;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tool-card p {
  font-size: var(--13-fs);
  color: #5e6d83;
  margin: 0;
}

/* ── Dev workflow block ── */
.dev-block {
  background: linear-gradient(135deg, #f0fdf4, #eff6ff);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 32px;
  margin-top: 20px;
}
.dev-block h3 {
  font-size: var(--16-fs);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.dev-block p {
  font-size: var(--14-fs);
  color: #475569;
  margin-bottom: 0;
}
.dev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.dev-item {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
  padding: 18px;
}
.dev-item h4 {
  font-size: var(--15-fs);
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 5px;
}
.dev-item p {
  font-size: var(--13-fs);
  color: #64748b;
  margin: 0;
}
/* Kunal's ask (Oct 2026, AEO & SEO page screenshot): the "Every stage of
   this pipeline also works on authenticated pages..." note right after
   the Stage 5/6 dev-grid read as cramped — it only had the browser's
   default <p> top margin (~1em) separating it from .dev-block's bottom
   edge, not a deliberate gap. 4px-grid value (CLAUDE.md's padding/margin
   convention for this codebase), applied with no breakpoint override so
   it's consistent at every screen size, per Kunal's explicit "on all
   breakpoints" ask. */
.dev-block-footer-note {
  margin-top: 24px;
}
.dev-badge {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: var(--12-fs);
  font-weight: 700;
  background: rgba(79, 70, 229, 0.08);
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: 4px;
  padding: 2px 7px;
  display: inline-block;
  margin-bottom: 6px;
}

/* ── Report grid ── */
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.report-item {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.report-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.report-item .fmt {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: var(--12-fs);
  color: #027dbc;
  font-weight: 700;
  margin-bottom: 3px;
  display: block;
}
.report-item .name {
  font-size: var(--15-fs);
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.report-item .desc {
  font-size: var(--13-fs);
  color: #64748b;
  line-height: 1.45;
}

/* ── Feature list item description (icon + text rows) ── */
.feature-desc {
  font-size: var(--13-fs);
  color: #64748b;
}
.feature-desc-sm {
  font-size: 11px;
  color: #64748b;
}

/* ── Comparison teaser (replaces full table) ── */
.comparison-teaser {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border: 1px solid rgba(79, 70, 229, 0.15);
  border-radius: 12px;
  padding: 36px;
  margin-top: 20px;
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.comparison-teaser-text {
  flex: 1;
  min-width: 220px;
}
.comparison-teaser-text h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.comparison-teaser-text p {
  font-size: var(--14-fs);
  color: #475569;
  margin: 0;
}
.comparison-teaser-cta {
  flex-shrink: 0;
  text-align: center;
}
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #4f46e5;
  color: #fff;
  padding: 13px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s;
}
.download-btn:hover {
  background: #3730a3;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
  color: #fff;
}
.download-note {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
}

/* ── ROI table (kept — it's about the product, not competitors) ── */
.table-wrap-roi {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 18px;
}
.table-wrap-roi:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}
.roi-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.roi-table th {
  background: #0f172a;
  color: #fff;
  padding: 9px 12px;
  text-align: left;
  font-size: var(--15-fs);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: "JetBrains Mono", "Courier New", monospace;
  text-transform: uppercase;
}
.roi-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-size: var(--14-fs);
}
.roi-table tr:nth-child(even) td {
  background: #f8fafc;
}
.roi-table .hl td {
  background: rgba(79, 70, 229, 0.05);
  font-weight: 700;
}
.roi-table .hl td:first-child {
  border-left: 3px solid #4f46e5;
}
.yes {
  color: #0b7f59;
  font-weight: 700;
}
.no {
  color: #dc2626;
  font-weight: 700;
}
.partial {
  color: #d97706;
  font-weight: 700;
}

/* ── Pricing card ── */
.pricing-card {
  background: #fff;
  border: 2px solid #4f46e5;
  border-radius: 12px;
  padding: 36px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}
.pricing-card .section-label {
  margin-bottom: 8px;
}
.pricing-card::before {
  content: "FLAT RATE";
  position: absolute;
  top: 20px;
  right: -28px;
  background: #4f46e5;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 40px;
  transform: rotate(45deg);
}
.price-main {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: clamp(2.5rem, 6vw, 3.2rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-period {
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
  margin-left: 4px;
}
.price-annual {
  font-size: 13px;
  color: #64748b;
  margin-top: 6px;
}
.price-features {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  border-top: 1px solid #f1f5f9;
  padding-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.price-features li {
  display: flex;
  gap: 7px;
  font-size: var(--15-fs);
  color: #334155;
}
.price-features li::before {
  content: "✓";
  color: #10b981;
  font-weight: 900;
  flex-shrink: 0;
}

/* ── Objections ── */
.objection {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 8px;
  /* padding: 20px 22px; */
  margin-bottom: 10px;
}
.objection-q {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 7px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  line-height: 1.4;
}
/* .objection-q::before {
  content: "Q.";
  color: #4f46e5;
  font-family: "JetBrains Mono", "Courier New", monospace;
  flex-shrink: 0;
  font-weight: 700;
  margin-top: 1px;
} */
.objection-a {
  font-size: 13px;
  color: #475569;
  padding-left: 24px;
  line-height: 1.65;
}

/* ── CTA section ── */
.cta-section {
  border-radius: 12px;
  padding: 44px;
  text-align: center;
  margin-top: 20px;
}
.cta-section--indigo {
  background: linear-gradient(135deg, #1e1b4b, #4f46e5);
}
.cta-section--violet {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}
.cta-section h2 {
  color: #fff;
  margin-bottom: 10px;
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  letter-spacing: -0.04em;
}
.cta-section p {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--15-fs);
}
.cta-btn {
  display: inline-block;
  background: #fff;
  color: #4f46e5 !important;
  font-weight: 700;
  font-size: var(--15-fs);
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none;
  margin: 0 6px 10px;
  transition: all 0.2s;
}
.cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.cta-btn-outline {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none;
  margin: 0 6px 10px;
  transition: all 0.2s;
}
.cta-btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.7);
}
.cta-legal {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 14px;
  font-family: "JetBrains Mono", "Courier New", monospace;
  letter-spacing: 0.5px;
}

/* accordion styles */

.objection {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.objection.active {
  border-color: var(--brand-primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.objection-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  background: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
}

.accordion-icon {
  font-size: 28px;
  width: 1em;
  height: 1em;
  color: transparent;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  margin-left: 20px;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5em;
  height: 3px;
  background: var(--brand-primary);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.objection.active .accordion-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.objection-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 24px;
  font-size: var(--15-fs);
  line-height: 1.7;
}

.objection-a::after {
  content: "";
  display: block;
  height: 24px;
}

.objection.active .objection-a {
  max-height: 500px;
}

/* ── Mobile responsive — pitch ── */
@media (max-width: 991px) {
  .cover {
    padding: 60px 20px 80px;
  }
  .cover-inner {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .audience-icon-wrapper {
    display: flex;
    gap: 10px;
  }
  .portfolio-card-wrapper {
    display: flex;
    gap: 10px;
  }

  .pitch-page {
    padding: 36px 18px 60px;
  }
  .audience-grid {
    grid-template-columns: 1fr;
  }
  .ps-grid {
    grid-template-columns: 1fr;
  }
  .diff-stat-row {
    grid-template-columns: 1fr;
  }
  .risk-stat-row {
    grid-template-columns: 1fr;
  }
  .seat-explainer {
    grid-template-columns: 1fr;
  }
  .feature-list {
    grid-template-columns: 1fr;
  }
  .tools-grid {
    grid-template-columns: 1fr;
  }
  .dev-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .report-grid {
    grid-template-columns: 1fr 1fr;
  }
  .price-features {
    grid-template-columns: 1fr;
  }
  .comparison-teaser {
    flex-direction: column;
    text-align: center;
  }
  .cta-section {
    padding: 32px 20px;
  }
  .pricing-card {
    padding: 24px;
  }
  .cover-meta {
    gap: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cover h1 {
    font-size: 1.85rem;
  }
  .report-grid {
    grid-template-columns: 1fr;
  }
  .pricing-card::before {
    display: none;
  }
}

/* ── Download page: spinner + post-download modal ── */
.dl-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dl-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes dl-spin {
  to {
    transform: rotate(360deg);
  }
}

.dl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.dl-modal {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  text-align: center;
}
.dl-modal h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 10px;
}
.dl-modal p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.dl-modal a {
  color: var(--brand-primary);
  font-weight: 600;
}

.dl-signup-note {
  max-width: 500px;
  margin: 2.5rem auto 0;
  background: #eef2ff;
  border: 1px solid rgba(79, 70, 229, 0.25);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}
.dl-signup-note-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 8px;
}
.dl-signup-note-desc {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.dl-signup-note .btn {
  text-decoration: none;
}