/* Shared product-page styles (ReORDR, AkwardFreQ, SampleForge Agent). Builds on styles.css.
   No inline styles: the site CSP forbids them. Accent colour comes from a body class. */
body.acc-reordr { --acc: var(--reordr); } body.acc-akwardfreq { --acc: var(--akwardfreq); } body.acc-sfa { --acc: var(--sfa); }
.p-hero { grid-column: span 5; justify-content: center; padding: 48px; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 55%), var(--surface); }
.p-hero h1 { font-size: clamp(40px, 5.6vw, 84px); margin: 14px 0 18px; overflow-wrap: anywhere; }
.p-hero .lede { font-size: 17px; color: var(--ink-muted); max-width: 470px; margin-bottom: 26px; }
.p-hero .pill { display: inline-block; margin-right: 10px; border: 1px solid var(--acc); color: var(--acc); border-radius: 999px; padding: 4px 12px; font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
.p-note { margin-top: 18px; font-size: 12px; color: var(--ink-muted); max-width: 440px; }
.p-main { grid-column: span 7; padding: 14px; margin: 0; background: var(--raised); justify-content: center; gap: 14px; }
.p-main img, .p-fig img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #000; }
.p-main figcaption, .p-fig figcaption { color: var(--ink-muted); }
.p-feat { grid-column: span 4; }
.p-feat h3, .p-st h3 { font-family: var(--body); font-weight: 600; font-size: 20px; line-height: 1.2; margin: 12px 0 10px; }
.p-feat p, .p-st p { color: var(--ink-muted); font-size: 15px; }
.p-feat .label, .p-st .label { color: var(--acc); }
.p-fig { grid-column: span 6; padding: 14px; margin: 0; gap: 12px; }
.p-fig.wide { grid-column: span 12; }
.p-flow { grid-column: span 12; padding: 24px; }
.p-flow h2 { font-size: clamp(28px, 3.6vw, 48px); margin: 8px 0 18px; }
.p-flow img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.p-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; counter-reset: s; }
.p-steps li { counter-increment: s; background: var(--ground); border: 1px solid var(--line); border-radius: 14px; padding: 16px; position: relative; font-size: 14px; color: var(--ink-muted); }
.p-steps li::before { content: counter(s); display: block; font-family: var(--display); font-size: 26px; color: var(--acc); margin-bottom: 6px; }
.p-steps li b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.p-st { grid-column: span 4; }
.p-wide { grid-column: span 12; }
@media (max-width: 960px) {
  .p-hero, .p-main, .p-feat, .p-fig, .p-st { grid-column: span 12; }
  .p-hero { padding: 32px 24px; }
  .p-steps { grid-template-columns: 1fr; }
}
.k-small { font-size: 12px; color: var(--ink-muted); }
.p-hero h1.long { font-size: clamp(34px, 4.2vw, 62px); overflow-wrap: normal; }