/* ============================================================
   A2 Digital — Products pages (shared)
   Loaded AFTER /css/style.css. Additive only; never overrides core.
   Each product sets --p: its accent on <body data-product>.
   ============================================================ */

:root {
  --p: var(--accent);
  --p-soft: rgba(45,110,95,0.12);
  --p-ink: #0E1830;
}

body[data-product="gymiq"]            { --p:#2D6E5F; --p-soft:rgba(45,110,95,0.14); }
body[data-product="marketing-swarm"]  { --p:#B7791F; --p-soft:rgba(183,121,31,0.14); }
body[data-product="ads-copilot"]      { --p:#3B6FD8; --p-soft:rgba(59,111,216,0.14); }
body[data-product="webhook-hub"]      { --p:#6B5BD2; --p-soft:rgba(107,91,210,0.14); }
body[data-product="fake-door"]        { --p:#D2605B; --p-soft:rgba(210,96,91,0.14); }
body[data-product="promo-rotator"]    { --p:#C2410C; --p-soft:rgba(194,65,12,0.14); }
body[data-product="podkeeper"]        { --p:#0F766E; --p-soft:rgba(15,118,110,0.14); }
body[data-product="methods-library"]  { --p:#7C3AED; --p-soft:rgba(124,58,237,0.14); }
body[data-product="proposal-kit"]     { --p:#1D4ED8; --p-soft:rgba(29,78,216,0.14); }
body[data-product="transition-detector"]{ --p:#9F1239; --p-soft:rgba(159,18,57,0.14); }
body[data-product="clipmark"]         { --p:#DB2777; --p-soft:rgba(219,39,119,0.14); }
body[data-product="bridge"]           { --p:#0891B2; --p-soft:rgba(8,145,178,0.14); }
body[data-product="likeness-kit"]     { --p:#4338CA; --p-soft:rgba(67,56,202,0.14); }
body[data-product="peer-pay-990"]     { --p:#B45309; --p-soft:rgba(180,83,9,0.14); }
body[data-product="tool-pack"]        { --p:#15803D; --p-soft:rgba(21,128,61,0.14); }
body[data-product="send-check"]       { --p:#475569; --p-soft:rgba(71,85,105,0.14); }

/* ---------- Hero (light) ---------- */
.p-hero {
  background: radial-gradient(900px 500px at 90% -20%, var(--p-soft), transparent 65%), var(--cream);
  color: var(--ink);
  padding: 148px 0 64px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
}
.p-hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.p-hero .eyebrow { color: var(--p); }
.p-hero h1 { color: var(--ink); margin: 10px 0 16px; font-size: clamp(2.6rem, 5.6vw, 4.2rem); line-height: 1.05; letter-spacing: -0.02em; }
.p-hero .p-tagline { font-size: 1.2rem; color: var(--text); margin: 0 0 28px; max-width: 520px; line-height: 1.55; }
.p-hero .hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.p-hero .hero-cta-row .btn, .p-hero .hero-cta-row .btn--ghost { padding: 16px 28px; font-size: 1rem; border-radius: 10px; }
.p-hero .btn--primary { background: var(--p); border-color: var(--p); color: #fff; }
.p-hero .btn--primary:hover { background: color-mix(in srgb, var(--p) 85%, #000); border-color: transparent; }
.p-hero .btn--ghost { color: var(--ink); border: 1px solid var(--border); background: var(--white); font-weight: 500; display: inline-block; transition: all .25s var(--ease); }
.p-hero .btn--ghost:hover { border-color: var(--ink); }
.p-hero .p-price-line { margin: 18px 0 0; font-size: 0.95rem; color: var(--muted); }
.p-hero .p-price-line b { color: var(--ink); font-weight: 600; }

/* Browser-frame mockup */
.p-frame {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(20,33,61,0.16), 0 0 0 1px var(--border-light);
}
.p-frame-bar { height: 34px; background: #F1EFEA; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid #E2DED6; }
.p-frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D9D4CB; display: inline-block; }
.p-frame-bar i:nth-child(1){ background:#E8857B } .p-frame-bar i:nth-child(2){ background:#E9C46A } .p-frame-bar i:nth-child(3){ background:#8BC7A4 }
.p-frame-bar span { margin-left: 10px; font-size: 0.72rem; color: #8A8578; font-family: var(--font-body); }
.p-frame img, .p-frame svg { width: 100%; height: auto; display: block; }
.p-frame-body { padding: 18px; }

/* ---------- Badges ---------- */
.p-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.p-badge { font-size: 0.8rem; letter-spacing: 0.02em; padding: 6px 12px; border-radius: 999px; background: var(--p-soft); color: var(--ink); border: 1px solid transparent; }

/* ---------- Section rhythm on product pages ---------- */
body[data-product] .section-header h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -0.015em; }
body[data-product] .section { padding-top: 80px; padding-bottom: 80px; }

/* ---------- Definition strip (what AI search quotes) ---------- */
.p-define { background: var(--white); border-bottom: 1px solid var(--border-light); }
.p-define .container { padding-top: 28px; padding-bottom: 28px; }
.p-define p { font-size: 1.1rem; color: var(--ink); margin: 0; max-width: 900px; }
.p-define strong { color: var(--p); font-weight: 600; }

/* ---------- Benefits ---------- */
.p-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.p-benefit { background: var(--white); border: 1px solid var(--border-light); border-radius: 14px; padding: 28px 26px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.p-benefit:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(20,33,61,0.08); }
.p-benefit .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--p-soft); display: grid; place-items: center; margin-bottom: 18px; }
.p-benefit .ico svg { width: 24px; height: 24px; stroke: var(--p); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-benefit h3 { font-size: 1.35rem; margin-bottom: 8px; }
.p-benefit p { color: var(--muted); margin: 0; font-size: 0.97rem; }

/* ---------- How it works ---------- */
.p-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; position: relative; counter-reset: step; }
.p-steps::before { content: ""; position: absolute; top: 28px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--p) 15%, var(--p) 85%, transparent); opacity: 0.35; }
.p-step { text-align: center; padding: 0 18px; position: relative; }
.p-step .num { width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 2px solid var(--p); color: var(--p); font-family: var(--font-display); font-size: 1.5rem; display: grid; place-items: center; margin: 0 auto 18px; position: relative; z-index: 1; }
.p-step h3 { font-size: 1.25rem; margin-bottom: 8px; }
.p-step p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.p-steps--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Visual rows (image + text) ---------- */
.p-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 40px; }
.p-row + .p-row { margin-top: 72px; }
.p-row.rev > :first-child { order: 2; }
.p-row h3 { font-size: 1.7rem; margin-bottom: 12px; }
.p-row p { color: var(--text); }
.p-row .p-media { background: var(--white); border-radius: 14px; padding: 14px; border: 1px solid var(--border-light); box-shadow: 0 10px 30px rgba(20,33,61,0.07); }
.p-row .p-media img { border-radius: 8px; }
.p-media img, .p-frame img, .p-frame-body img { width: 100%; height: auto; }

/* ---------- Proof strip ---------- */
.p-proof { background: var(--ink); color: #fff; }
.p-proof .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.p-proof .k { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: #fff; }
.p-proof .k em { font-style: normal; color: color-mix(in srgb, var(--p) 65%, #fff); }
.p-proof .l { color: rgba(255,255,255,0.7); margin-top: 10px; font-size: 0.95rem; }

/* ---------- Pricing ---------- */
.p-pricing { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 26px; margin-top: 40px; align-items: start; }
.p-card { background: var(--white); border: 1px solid var(--border-light); border-radius: 16px; padding: 34px 32px; position: relative; }
.p-card--main { border-top: 5px solid var(--p); }
.p-card .lbl { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p); font-weight: 600; }
.p-card .amt { font-family: var(--font-display); font-size: 2.8rem; color: var(--ink); margin: 10px 0 2px; }
.p-card .amt small { font-family: var(--font-body); font-size: 1rem; color: var(--muted); margin-left: 6px; }
.p-card .sub { color: var(--muted); margin-bottom: 20px; }
.p-card ul { margin: 0 0 24px; }
.p-card li { padding: 8px 0 8px 30px; position: relative; border-bottom: 1px solid var(--border-light); font-size: 0.97rem; }
.p-card li:last-child { border-bottom: 0; }
.p-card li::before { content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: var(--p-soft); }
.p-card li::after { content: ""; position: absolute; left: 6px; top: 18px; width: 6px; height: 10px; border: solid var(--p); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.p-card li.no::before { background: var(--stone); }
.p-card li.no::after { border-color: var(--muted); width: 8px; height: 0; top: 23px; left: 5px; transform: none; border-width: 0 0 2px 0; }
.p-card li.no { color: var(--muted); }
.p-card .btn { width: 100%; text-align: center; }
.p-card .btn--primary { background: var(--p); border-color: var(--p); }
.p-card--side { background: var(--stone); border-color: transparent; }
.p-pricing--3 { grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; }
.p-pricing--3 .p-card { display: flex; flex-direction: column; }
.p-pricing--3 .p-card ul { flex: 1; }
.p-card--side .amt { font-size: 2rem; }
.p-fineprint { color: var(--muted); font-size: 0.88rem; margin-top: 18px; }

/* ---------- FAQ ---------- */
.p-faq { max-width: var(--narrow); margin: 36px auto 0; }
.p-faq details { background: var(--white); border: 1px solid var(--border-light); border-radius: 12px; margin-bottom: 12px; }
.p-faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); position: relative; }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: "+"; position: absolute; right: 22px; top: 14px; font-size: 1.6rem; color: var(--p); transition: transform .25s var(--ease); }
.p-faq details[open] summary::after { transform: rotate(45deg); }
.p-faq .a { padding: 0 24px 22px; color: var(--text); }
.p-faq .a p { margin: 0 0 10px; }

/* ---------- Who it's for ---------- */
.p-for { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.p-for span { background: var(--white); border: 1px solid var(--border); padding: 8px 14px; border-radius: 999px; font-size: 0.92rem; }

/* ---------- Hub ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.hub-card { background: var(--white); border: 1px solid var(--border-light); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); position: relative; }
.hub-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(20,33,61,0.10); }
.hub-card .swatch { width: 40px; height: 6px; border-radius: 3px; background: var(--c, var(--accent)); }
.hub-card h3 { font-size: 1.5rem; margin: 6px 0 0; }
.hub-card .tag { color: var(--muted); font-size: 0.95rem; flex: 1; }
.hub-card .price { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.hub-card .status { position: absolute; top: 18px; right: 18px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--stone); color: var(--muted); }
.hub-card .status.live { background: var(--accent-soft); color: var(--accent); }
.hub-section-title { margin-top: 64px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .p-hero .container { grid-template-columns: 1fr; gap: 40px; }
  .p-benefits { grid-template-columns: 1fr; }
  .p-steps, .p-steps--3 { grid-template-columns: 1fr 1fr; gap: 32px; }
  .p-steps::before { display: none; }
  .p-row, .p-row.rev { grid-template-columns: 1fr; }
  .p-row.rev > :first-child { order: 0; }
  .p-proof .container { grid-template-columns: 1fr; gap: 28px; }
  .p-pricing, .p-pricing--3 { grid-template-columns: 1fr; }
  .hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .p-hero { padding: 104px 0 48px; }
  .p-hero .hero-cta-row { flex-direction: column; }
  .p-hero .hero-cta-row .btn, .p-hero .hero-cta-row .btn--ghost { width: 100%; text-align: center; }
  body[data-product] .section { padding-top: 56px; padding-bottom: 56px; }
  .p-steps, .p-steps--3 { grid-template-columns: 1fr; }
  .hub-grid { grid-template-columns: 1fr; }
}

/* ---------- Sub-nav (tabbed products) ---------- */
.sw-subnav { padding-top: 84px; }
.sw-subnav + .p-hero { padding-top: 56px; }
.sw-sub { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
.sw-sub::-webkit-scrollbar { display: none; }
.sw-sub a { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 640px) { .sw-subnav { padding-top: 76px; } .sw-subnav .crumb { display: none; } .sw-subnav + .p-hero { padding-top: 36px; } }
/* ---------- Hub cards + featured band (shared, moved from hub inline 2026-11-05) ---------- */
.hub-card { padding: 0; overflow: hidden; }
.hub-card .thumb { aspect-ratio: 16/9; background: var(--stone); overflow: hidden; }
.hub-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-card .hub-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hub-card .hub-body h3 { margin: 0; }
.hub-card .status { top: 12px; right: 12px; background: rgba(255,255,255,.92); }
.hub-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: var(--white); border: 1px solid var(--border-light); border-radius: 18px; padding: 28px; margin-top: 8px; }
.hub-feature img { width: 100%; height: auto; border-radius: 12px; display: block; }
.hub-feature p { color: var(--text); margin: 0 0 18px; }
@media (max-width: 980px) { .hub-feature { grid-template-columns: 1fr; gap: 20px; padding: 18px; } }