/* products.php (hub + detail) — page layout only; components come from ui-v2.css */

.post-hero .hero-actions{margin-top:var(--s-6)}
.post-hero + .section{padding-top:var(--section-pad-tight)}

/* hub: product tiles */
.pr-tiles{max-width:1000px;margin-inline:auto}
.pr-tile{display:flex;flex-direction:column;gap:var(--s-3);min-height:240px;text-decoration:none;color:#fff}
.pr-tile.c-sky{background:var(--grad-sky)}
.pr-tile.c-blue{background:linear-gradient(150deg,#3E41AD 0%,#4a59c9 45%,#7DD5FD 120%)}
.pr-tile.c-ink{background:var(--grad-ink)}
.pr-tile .tag--on-dark{align-self:flex-start;background:rgba(255,255,255,.12);color:#fff}
.pr-tile h3{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.025em;line-height:1.08;color:#fff;margin:0;max-width:14ch}
.pr-tile p{color:rgba(255,255,255,.82);font-size:var(--fs-body);max-width:34ch;margin:0}
.pr-tile__go{margin-top:auto;padding-top:var(--s-3);display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:#fff}
.pr-tile__go .arr{transition:transform var(--dur-2) var(--ease-spring)}
.pr-tile:hover .pr-tile__go .arr{transform:translateX(4px)}
.pr-tile .card__art{color:#fff;opacity:.3;width:150px;height:150px;right:10px;bottom:-20px}
.pr-tile:focus-visible{outline:3px solid var(--blue-2);outline-offset:3px}
.pr-empty{text-align:center;color:var(--text-muted);max-width:var(--measure);margin:0 auto}
@media (max-width:768px){
  .pr-tile{min-height:0;padding:20px}
  .pr-tile h3{font-size:clamp(24px,1.2rem + 2vw,28px);max-width:none;padding-right:64px}
  .pr-tile p{font-size:var(--fs-small);max-width:none}
  .pr-tile .card__art{width:64px;height:64px;top:16px;right:16px;bottom:auto;opacity:.35}
}

/* detail: lead copy */
.pr-lead{display:grid;gap:var(--s-4)}
.pr-lead .summary{font-size:var(--fs-lead);line-height:1.5;color:var(--text);font-weight:500;max-width:var(--measure-lead);margin:0;letter-spacing:-.01em}
.pr-lead .intro{font-size:var(--fs-body);line-height:1.65;color:var(--text-muted);max-width:var(--measure);margin:0}

/* detail: features + steps as ruled spec cards */
.card--spec h4{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0}
.card--spec p{font-size:var(--fs-small);margin:0}
.pr-features .card--spec{gap:6px;padding-top:var(--s-4);padding-bottom:var(--s-3)}
.pr-steps .card--spec{gap:var(--s-3)}
@media (max-width:1024px){.pr-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .pr-features .card--spec{padding-top:12px;padding-bottom:8px}
  .pr-features h4{font-size:15px}
  .pr-features p{font-size:13px}
  .pr-steps{gap:0}
  .pr-steps .card--spec{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:0;row-gap:6px;align-content:start;border-top:0;padding:0 0 var(--s-5);position:relative}
  .pr-steps .card__num{grid-column:1;grid-row:1;padding-top:4px}
  .pr-steps h4{grid-column:2;grid-row:1}
  .pr-steps p{grid-column:2;grid-row:2}
  .pr-steps .card--spec::before{content:"";position:absolute;left:7px;top:24px;bottom:0;width:1px;background:var(--hair-strong)}
  .pr-steps .card--spec:last-child::before{display:none}
}

/* detail: pricing band (statement only; the product CTA lives in the hero) */
.pr-pricing{grid-template-columns:minmax(0,1fr)}
.pr-pricing>div{display:grid;gap:8px}
.pr-pricing p{font-size:var(--fs-lead);line-height:1.5;color:#fff;max-width:var(--measure-lead)}