/* =========================================================================
   product-page.css — SP-12 shared "PP shell" for /product/* marketing pages.
   Anthropic product-page anatomy on Ink & Ivory tokens. senova-ui.css only for
   colour/type; this file is layout + the product-specific compositions.
   ========================================================================= */

/* ---- Products dropdown (header) ---- */
.pp-products { position: relative; }
.pp-products > button { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; font-family: var(--sn-sans); font-size: var(--sn-ui); color: var(--sn-ink-2); cursor: pointer; }
.pp-products > button:hover { color: var(--sn-ink); }
.pp-menu { position: absolute; top: 30px; left: -12px; min-width: 300px; background: var(--sn-surface); border: 1px solid var(--sn-hairline); border-radius: var(--sn-r-card); box-shadow: var(--sn-shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--sn-micro) var(--sn-ease), transform var(--sn-micro) var(--sn-ease), visibility var(--sn-micro); z-index: 60; }
.pp-products:hover .pp-menu, .pp-products:focus-within .pp-menu { opacity: 1; visibility: visible; transform: none; }
.pp-menu a { display: block; padding: 10px 12px; border-radius: 8px; }
.pp-menu a:hover { background: var(--sn-bg-raised); }
.pp-menu b { display: block; font-size: var(--sn-ui); font-weight: 600; color: var(--sn-ink); }
.pp-menu span { display: block; font-size: var(--sn-meta); color: var(--sn-ink-3); margin-top: 1px; }

/* ---- Hero ---- */
.pp-hero { padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 56px); }
.pp-crumb { margin-bottom: var(--sn-4); }
.pp-crumb a { color: var(--sn-ink-3); }
.pp-crumb a:hover { color: var(--sn-ink); }
.pp-hero h1 { max-width: 16ch; margin-bottom: var(--sn-4); }
.pp-hero .sn-lead { margin-bottom: var(--sn-6); }
.pp-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sn-3); align-items: center; }
.pp-avail { margin-top: var(--sn-4); font-size: var(--sn-meta); color: var(--sn-ink-3); }

/* ---- Proof stage frame (hero proof) ---- */
.pp-stage { margin-top: var(--sn-7); }

/* ---- Fact strip ---- */
.pp-facts { border-block: 1px solid var(--sn-hairline); padding-block: var(--sn-5); display: flex; flex-wrap: wrap; gap: var(--sn-4) var(--sn-7); justify-content: center; }
.pp-facts span { font-size: var(--sn-ui); color: var(--sn-ink-2); }
.pp-facts b { color: var(--sn-ink); font-weight: 600; }

/* ---- Section head ---- */
.pp-head { max-width: 640px; margin-bottom: var(--sn-6); }
.pp-head h2 { margin: var(--sn-3) 0 var(--sn-4); }

/* ---- Capability rows (alternating) ---- */
.pp-cap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sn-7); align-items: center; padding-block: var(--sn-7); }
.pp-cap:nth-child(even) .pp-cap-media { order: -1; }
.pp-cap h3 { margin: var(--sn-2) 0 var(--sn-3); }
.pp-cap p { color: var(--sn-ink-2); margin: 0 0 var(--sn-4); }
.pp-cap-media { border-radius: var(--sn-r-media); overflow: hidden; border: 1px solid var(--sn-hairline); background: var(--sn-surface); }
.pp-cap-media img, .pp-cap-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sn-4); }

/* ---- Generation wall (media page) ---- */
.pp-wall { columns: 4 220px; column-gap: var(--sn-4); }
.pp-wall .sn-media-tile { break-inside: avoid; margin-bottom: var(--sn-4); }

/* ---- Model / preset cards ---- */
.pp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sn-4); }
.pp-model { display: flex; flex-direction: column; gap: 6px; }
.pp-model .name { font-family: var(--sn-sans); font-weight: 600; font-size: var(--sn-h4); }
.pp-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sn-3); }
.pp-preset { border: 1px solid var(--sn-hairline); border-radius: var(--sn-r-card); overflow: hidden; background: var(--sn-surface); }
.pp-preset img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pp-preset span { display: block; padding: 8px 10px; font-family: var(--sn-mono); font-size: var(--sn-overline); text-transform: uppercase; letter-spacing: .04em; color: var(--sn-ink-2); }

/* ---- Pricing band ---- */
.pp-pricing { display: grid; grid-template-columns: 340px 1fr; gap: var(--sn-6); align-items: start; }
.pp-plan { border: 1px solid var(--sn-hairline); border-radius: var(--sn-r-card); padding: var(--sn-5); background: var(--sn-surface); }
.pp-plan .price { font-family: var(--sn-serif); font-weight: 600; font-size: 2.25rem; letter-spacing: -.02em; }
.pp-plan .price small { font-family: var(--sn-sans); font-size: var(--sn-ui); font-weight: 400; color: var(--sn-ink-3); }
.pp-plan ul { list-style: none; margin: var(--sn-4) 0; padding: 0; display: grid; gap: 8px; }
.pp-plan li { font-size: var(--sn-ui); color: var(--sn-ink-2); padding-left: 20px; position: relative; }
.pp-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--sn-accent-ink); }

/* ---- FAQ (no-JS details) ---- */
.pp-faq { max-width: 760px; }
.pp-faq details { border-bottom: 1px solid var(--sn-hairline); padding: var(--sn-4) 0; }
.pp-faq summary { font-family: var(--sn-sans); font-weight: 600; font-size: var(--sn-body-lg); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: "+"; color: var(--sn-ink-3); font-weight: 400; }
.pp-faq details[open] summary::after { content: "–"; }
.pp-faq p { color: var(--sn-ink-2); margin: var(--sn-3) 0 0; }

/* ---- Resources ---- */
.pp-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sn-4); }

/* ---- Cross-sell rail ---- */
.pp-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sn-4); }
.pp-rail a { display: flex; gap: var(--sn-3); align-items: center; }
.pp-rail img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid var(--sn-hairline); flex: none; }
.pp-rail b { display: block; font-size: var(--sn-ui); color: var(--sn-ink); }
.pp-rail span { font-size: var(--sn-meta); color: var(--sn-ink-3); }

/* ---- Final CTA ---- */
.pp-final { text-align: center; }
.pp-final h2 { max-width: 18ch; margin: 0 auto var(--sn-6); }

/* ---- dark Studio page variant ---- */
[data-theme="studio"] .pp-facts span { color: var(--sn-ink-2); }

@media (max-width: 860px) {
  .pp-cap, .pp-pricing, .pp-rail { grid-template-columns: 1fr; }
  .pp-cap:nth-child(even) .pp-cap-media { order: 0; }
  .pp-wall { columns: 2 150px; }
}