/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGES — Direction A "Quiet dark" (chosen 2026-09-28)

   Shared by products/bulk-comments.html and products/bulk-page-cloner.html,
   linked AFTER each page's own <style> so it wins on source order, and scoped
   through body.product-page so it wins on specificity against the pages'
   single-class rules. Nothing here reaches any other page on the site.

   The redesign is subtraction: the site's dark ground stays, and what goes is
   the glow, gradient text, gradient buttons, hover lifts and the card around
   every block. Each page gets ONE product colour, used for the button, the
   eyebrows and the active state — plus a tinted hero ground (purple for Bulk
   Comments, blue for Bulk Page Cloner) — the C mockup's hero ground, faded
   into the page ground over the hero's last third so there is no band edge.
   ══════════════════════════════════════════════════════════════════════════ */

.product-page--bcj {
  --pp-acc:        #A5B4FC;               /* text accent — 10.0:1 on #020911 */
  --pp-acc-strong: #C7D2FE;
  --pp-fill:       #5B5EEA;               /* button — white text 4.96:1 */
  --pp-fill-ink:   #FFFFFF;
  --pp-line:       rgba(129,140,248,0.5);
  --pp-tint:       rgba(99,102,241,0.12);
  --pp-hue:        linear-gradient(to bottom, rgba(2,9,17,0) 68%, #020911 100%),
                   radial-gradient(ellipse 85% 105% at 76% 30%, #2C2170 0%, #16113A 55%, #0B0920 100%);
}
.product-page--bpc {
  --pp-acc:        #67E8F9;               /* 13.8:1 on #020911 */
  --pp-acc-strong: #A5F3FC;
  --pp-fill:       #05CEF0;               /* the site's own teal, dark ink on it */
  --pp-fill-ink:   #020911;
  --pp-line:       rgba(34,211,238,0.45);
  --pp-tint:       rgba(34,211,238,0.1);
  --pp-hue:        linear-gradient(to bottom, rgba(2,9,17,0) 68%, #020911 100%),
                   radial-gradient(ellipse 85% 105% at 76% 30%, #0E3A6E 0%, #0A2344 55%, #061428 100%);
}
.product-page { --pp-rule: rgba(148,170,196,0.14); --pp-raised: #050D19; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* The tint replaces the old faint corner glow. It is an ellipse centred
   behind the demo that dissolves into the page ground, so the hero has a
   colour without a hard band edge under it. */
.product-page .product-hero::before { background: var(--pp-hue); }
/* The ::before is absolutely positioned and the hero's content is not, so it
   paints ABOVE the copy. Harmless while it was a 7% glow; with a real colour
   it veiled the H1. Lift the content onto its own layer. */
.product-page .product-hero-inner { position: relative; z-index: 1; }
.product-page .product-hero-icon { box-shadow: 0 10px 28px rgba(0,0,0,0.35); }
.product-page .product-hero-tag {
  background: transparent; border-color: var(--pp-rule); color: var(--pp-acc);
}

/* ── Buttons: one solid product colour, no glow, no shine, no lift ─────── */
.product-page .btn-primary,
.product-page .btn-primary--indigo,
.product-page .btn-primary--teal,
.product-page .calc-cta-btn {
  background: var(--pp-fill); color: var(--pp-fill-ink);
  box-shadow: none; border: 0;
  transition: filter 0.18s ease, background-color 0.18s ease;
}
.product-page .btn-primary::after { display: none; }
.product-page .btn-primary:hover,
.product-page .btn-primary--indigo:hover,
.product-page .btn-primary--teal:hover,
.product-page .calc-cta-btn:hover {
  transform: none; box-shadow: none; opacity: 1; filter: brightness(1.08);
}
/* Same box as the hero pair on both pages: BPC's hero used the shared
   .btn-primary metrics and its CTA the bigger --teal ones, so the two
   pages' closing buttons did not match. */
.product-page .cta-actions .btn-primary,
.product-page .cta-actions .btn-secondary { padding: 13px 26px; font-size: 0.875rem; font-weight: 600; }
/* The outline's 1px border comes out of its padding, so the pair match. */
.product-page .cta-actions .btn-secondary { padding: 12px 26px; }
/* Phones: aurora.css gives every button 15px/24px, but Bulk Comments' hero
   primary kept its desktop 13px (a more specific page rule), so its pair
   stood 49px beside 55px. Put it back on the shared phone metric. */
@media (max-width: 768px) {
  .product-page .product-hero-actions .btn-primary--indigo { padding: 15px 24px; }
  .product-page .product-hero-actions .btn-secondary { padding: 14px 24px; }
  .product-page .cta-actions .btn-primary { padding: 15px 24px; }
  .product-page .cta-actions .btn-secondary { padding: 14px 24px; }
}

.product-page .btn-secondary {
  background: transparent; border: 1px solid rgba(148,170,196,0.26); color: var(--white);
}
.product-page .btn-secondary:hover {
  background: rgba(255,255,255,0.03); border-color: var(--pp-line);
  transform: none; box-shadow: none;
}
.product-page :is(.btn-primary, .btn-primary--indigo, .btn-primary--teal, .btn-secondary, .calc-cta-btn):focus-visible {
  outline: 2px solid var(--pp-acc); outline-offset: 3px;
}

/* ── Section headers ─────────────────────────────────────────────────── */
.product-page .eyebrow { color: var(--pp-acc); }
.product-page .eyebrow::before,
.product-page .eyebrow::after { background: var(--pp-acc); }
.product-page .section-desc a,
.product-page .faq-answer a { color: var(--pp-acc); }
.product-page .prod-nav-list a.active { color: var(--pp-acc); }

/* ── Highlights: rows, not cards ─────────────────────────────────────────
   Each highlight was a bordered card with its own background and a hover
   glow. Now the figure keeps its frame and the copy sits on the page; rows
   are separated by a hairline and alternate sides, so the eye zig-zags
   instead of reading one tall column of identical boxes. */
.product-page .highlight-stack { gap: 0; margin-top: 40px; }
.product-page .highlight-card {
  background: none; border: 0; border-radius: 0; overflow: visible;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center;
  padding: 40px 0;
}
.product-page .highlight-card + .highlight-card { border-top: 1px solid var(--pp-rule); }
.product-page .highlight-card:hover { border-color: var(--pp-rule); box-shadow: none; }
.product-page .highlight-card:nth-child(even) .highlight-card-media { order: 2; }
.product-page .highlight-card-media {
  border: 1px solid var(--pp-rule); border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(0,0,0,0.35);
}
.product-page .highlight-card-copy { padding: 0; }
.product-page .highlight-num { color: var(--pp-acc); }
.product-page .highlight-num::before { background: var(--pp-acc); }
.product-page .highlight-card-copy h3 { font-size: 1.6rem; }
.product-page .highlight-card-copy p { max-width: 460px; }
@media (max-width: 860px) {
  .product-page .highlight-card { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 0; }
  .product-page .highlight-card:nth-child(even) .highlight-card-media { order: 0; }
  .product-page .highlight-card-media { border-bottom: 1px solid var(--pp-rule); }
}

/* ── Details strip — the old Features grid, folded into Highlights ───────
   The Features tiles repeated the highlights almost word for word. What was
   NOT already a highlight (limits, safety, theming, Forge) lives here as one
   quiet row. */
.pp-specs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 32px; border: 1px solid var(--pp-rule); border-radius: 16px;
  background: var(--pp-raised); overflow: hidden;
}
.pp-spec { padding: 24px 24px 26px; }
.pp-spec + .pp-spec { border-left: 1px solid var(--pp-rule); }
.pp-spec b {
  display: block; margin-bottom: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--pp-acc-strong);
  font-variant-numeric: tabular-nums;
}
.pp-spec span { display: block; font-size: 0.87rem; line-height: 1.6; color: var(--slate); }
.pp-specs-link {
  display: flex; width: fit-content; margin: 22px auto 0; font-size: 0.9rem; font-weight: 600;
  color: var(--pp-acc); text-decoration: none;
}
.pp-specs-link:hover, .pp-specs-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  .pp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-spec:nth-child(3) { border-left: 0; }
  .pp-spec:nth-child(n+3) { border-top: 1px solid var(--pp-rule); }
}
@media (max-width: 560px) {
  .pp-specs { grid-template-columns: minmax(0, 1fr); }
  .pp-spec + .pp-spec { border-left: 0; border-top: 1px solid var(--pp-rule); }
}

/* ── How it works ────────────────────────────────────────────────────── */
.product-page .hiw-tab-btn:hover { border-color: var(--pp-line); background: rgba(255,255,255,0.02); }
.product-page .hiw-tab-btn.active { border-color: var(--pp-line); background: var(--pp-tint); }
.product-page .hiw-tab-num { color: var(--pp-acc); }
.product-page .hiw-tab-progress { background: var(--pp-acc); }
.product-page .hiw-preview { box-shadow: 0 24px 52px rgba(0,0,0,0.45); }
.product-page .hiw-theme-btn.active { background: var(--pp-fill); color: var(--pp-fill-ink); }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.product-page .calc-card { background: var(--pp-raised); }
.product-page .calc-panel { background: rgba(255,255,255,0.015); }
.product-page .calc-pill:hover { border-color: var(--pp-line); }
.product-page .calc-pill.active { border-color: var(--pp-line); background: var(--pp-tint); }
.product-page .calc-save-badge { background: var(--pp-tint); color: var(--pp-acc); }
.product-page .calc-slider::-webkit-slider-thumb { background: var(--pp-fill); box-shadow: none; }
.product-page .calc-slider::-moz-range-thumb     { background: var(--pp-fill); box-shadow: none; }
.product-page .calc-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pp-line); }
.product-page .calc-slider:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 3px var(--pp-line); }
.product-page .calc-input:focus { border-color: var(--pp-line); }
.product-page .calc-free-badge { background: var(--pp-tint); border-color: var(--pp-line); color: var(--pp-acc); }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.product-page .faq-item { background: var(--pp-raised); }
.product-page .faq-chevron { color: var(--pp-acc); }

/* ── Closing CTA — support folded in ─────────────────────────────────────
   The separate "Questions? We're here." section is gone; its two actions
   (docs, support) live here, one as a button and one as a line of text. */
.product-page .cta-inner {
  background: none; border: 0; border-radius: 0; padding: 8px 0 0;
}
.product-page .cta-inner::before,
.product-page .cta-inner::after { display: none; }
.product-page .cta-desc { max-width: 520px; }
.pp-support {
  margin: 26px auto 0; font-size: 0.88rem; line-height: 1.7; color: var(--slate);
  max-width: 560px; text-align: center;
}
.pp-support-note { display: block; margin-top: 2px; }
.pp-support a { color: var(--white); font-weight: 600; text-decoration-color: rgba(232,244,255,0.35);
  text-underline-offset: 3px; }
.pp-support a:hover, .pp-support a:focus-visible { text-decoration-color: var(--pp-acc); }

@media (prefers-reduced-motion: reduce) {
  .product-page :is(.btn-primary, .btn-primary--indigo, .btn-primary--teal, .btn-secondary, .calc-cta-btn) { transition: none; }
}

/* ── Hero demos: same subtraction inside the mockups ─────────────────── */
.product-page .bpc-create { background: var(--pp-fill); color: var(--pp-fill-ink); }
.product-page .bpc-create.pressed { box-shadow: 0 0 0 3px var(--pp-tint); }

/* Closing CTA uses the header's own button (the brand gradient), at the
   size of the secondary beside it, so the page ends on the same button it
   starts with. */
.product-page .cta-actions .pp-cta-brand { display: inline-flex; align-items: center; padding: 13px 26px; font-size: 0.875rem; font-weight: 600; border-radius: 9px; }
@media (max-width: 768px) { .product-page .cta-actions .pp-cta-brand { padding: 15px 24px; } }