/*
 * public-marketing.css — rules shared by the 13 marketing pages that are
 * NOT part of public-nav/public-footer's own dependency closure (see
 * public-base.css for those).
 *
 * Phase 1 of docs/plans/2026-09-03-public-site-visual-unification.md.
 * Selection rule, comparison script, and full candidate/exclusion tables:
 * see docs/plans/2026-09-03-public-marketing-css-extraction-report.md and
 * scripts/public-css-rule-diff.js (both committed and re-runnable — the
 * script is not a one-off, Phase 2a/2b re-runs it to find what's still
 * eligible for inline deletion). Short version: a rule is included here
 * ONLY if it is byte-for-byte IDENTICAL across at least 8 of the 13 pages
 * that have that selector at all (any N from 6-8 yields the same result
 * set — see the report for the occurrence-count gap this is based on).
 * Rules whose VALUE differs per page (grid column counts, hero/CTA color
 * tokens, hero background gradients, etc.) are deliberately EXCLUDED even
 * when a majority variant exists and even when the selector is
 * conceptually "shared" — see the report's exclusion table.
 * Selectors are copied verbatim; do not rewrite/combine/re-specificity.
 */

/* ── Hero (structural only — colored/sized hero content is excluded, see
   the extraction report: .hero / .hero-grid / .hero-copy h1 / .hero-copy
   .sub / .hero-bg all vary by page) ── */
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-screenshot { border-radius:14px; border:1px solid rgba(255,255,255,.12); overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.4); }
/* height:auto is load-bearing, not tidiness: the <img> carries intrinsic
   width/height attributes so the slot is reserved before the bytes land,
   and without this the height ATTRIBUTE becomes the used height while
   width:100% shrinks the width -- at 390px the hero shot rendered
   357x567 instead of 357x169, i.e. stretched to 3.3x its aspect ratio,
   with no overflow and no error to notice it by. */
.hero-screenshot img { width:100%; height:auto; display:block; }

/* ── Section furniture ── */
.eyebrow { font-size:.85rem; color:var(--primary); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin:0 0 14px; }

/* ── Pain / Capability / Contrast / Audience cards ── */
.pain-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,90,90,.12); color:#ff9090; font-size:1.1rem; margin-bottom:12px; }
.pain-card { background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:14px; padding:20px 16px; }
.pain-card h3 { margin:0 0 8px; font-size:1.05rem; }
.pain-card p { margin:0; color:var(--muted); line-height:1.6; font-size:.92rem; }

.cap-card { background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:14px; padding:20px 16px; }
.cap-card h3 { margin:0 0 8px; font-size:1.05rem; }
.cap-card p { margin:0; color:var(--muted); line-height:1.6; font-size:.92rem; }

.contrast-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.contrast-card { background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:14px; padding:20px 16px; }

.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.audience-card { background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:14px; padding:22px 18px; }
.audience-card h3 { margin:0 0 8px; font-size:1.02rem; }
.audience-card p { margin:0; color:var(--muted); line-height:1.6; font-size:.92rem; }

/* ── FAQ (the shared details/summary accordion pattern used on /faq and
   embedded in the feature pages; the market.ejs-only .faq-grid/.faq-item
   preview cards are a different, single-page pattern and stay inline) ── */
.faq-list { display:flex; flex-direction:column; gap:10px; }
details.faq-details { background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
details.faq-details summary { cursor:pointer; padding:18px 20px; font-size:1rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; }
details.faq-details summary::-webkit-details-marker { display:none; }
details.faq-details summary::after { content:'+'; font-size:1.2rem; color:var(--primary); flex-shrink:0; margin-left:12px; }
details.faq-details[open] summary::after { content:'−'; }
details.faq-details .faq-answer { padding:0 20px 18px; color:var(--muted); line-height:1.7; font-size:.95rem; }

/* ── Cross-links ── */
.internal-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

/* ── Bottom CTA band ── */
.cta-band .section-title { max-width:640px; margin:0 auto 16px; }

/* ── Responsive ── */
@media (max-width:960px) {
  .hero { min-height:auto; }
  .hero-screenshot { margin-top:16px; }
}