/* product-page.css — /preview/product/* template styles.
   Leans on preview-system.css for tokens, nav, footer, buttons.
   TEST PAGES (2026-10-26, rev 2026-10-29): review set generated from
   assets/product-pages.json + the migration generator.
   v4-v8: backwash, CTA hierarchy, icon chips, Querious card.
   v9-v11: glassmorphic cards/chips; two-layer backwash, sharp layer
   hard-masked right so the left text column stays readable.
   v12 (10-29): DARK MODE pass — the glass surfaces, chips, edchips,
   platform select and ghost button were hardcoded light and vanished
   in dark mode (Sandeep review): dark overrides added under
   prefers-color-scheme; CDN brand icons get an invert filter in dark.
   Also: .buy .btn forced block/centered (off-center report) and new
   .sysreq info icon (system requirements tooltip; min-OS line pending
   a data source — currently approximate download size from the
   product table's iPhoneNativeMemory/AndroidMemory). */

/* Layer 1 — soft full-bleed wash (heavy blur, fades downward). */
.phero{padding:52px 0 44px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero>.wrap{position:relative;z-index:1}
.phero::before{content:"";position:absolute;inset:-48px;pointer-events:none;
  background:var(--pbg) no-repeat center top / cover;
  opacity:.22;filter:blur(24px) saturate(1.08);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 96%)}
/* Layer 2 — near-sharp art, RIGHT HALF ONLY. */
.phero::after{content:"";position:absolute;inset:-32px;pointer-events:none;
  background:var(--pbg) no-repeat right center / auto 130%;
  opacity:.38;filter:blur(4px) saturate(1.12);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 48%,rgba(0,0,0,.75) 74%,#000 92%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 48%,rgba(0,0,0,.75) 74%,#000 92%)}
@media(max-width:900px){.phero::before{opacity:.16}.phero::after{display:none}}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:48px;align-items:start}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}}
.pmeta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;font-size:14.5px;color:var(--muted)}
.pmeta b{color:inherit;font-weight:700}
.edchip{display:inline-block;margin-left:12px;padding:3px 10px;border:1px solid rgba(255,255,255,.75);border-radius:6px;font-size:13px;vertical-align:middle;color:var(--muted);white-space:nowrap;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Frosted buy card. */
.buy{border:1px solid rgba(255,255,255,.7);border-radius:16px;padding:24px 22px;text-align:center;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);
  box-shadow:0 18px 50px rgba(25,45,70,.14),0 2px 8px rgba(25,45,70,.06)}
@supports not (backdrop-filter:blur(1px)){.buy{background:rgba(255,255,255,.92)}}
.buy .cover{width:150px;height:200px;margin:0 auto 14px;display:block;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(25,45,70,.22))}
.buy .cover-fb{width:150px;height:200px;margin:0 auto 14px;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:14px;background:var(--sky-ink,#0078a6);color:#fff;font-weight:800;line-height:1.25;font-size:15px;text-align:center}
.buy .price{font-size:30px;font-weight:800;margin:4px 0 2px}
.buy .price small{font-size:14px;font-weight:600;color:var(--muted)}
.buy .rate{font-size:13.5px;color:var(--muted);margin:0 0 2px}
.buy .btn{display:block;width:100%;box-sizing:border-box;text-align:center;margin:10px 0 0}
.buy .sub{font-size:13px;color:var(--muted);margin:12px 0 0}
.buy .sub a{color:inherit}
.buy .btn.ghost{background:rgba(255,255,255,.6)}

/* Where it works — frosted icon chips + the .sysreq info dot. */
.avail{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center;margin:14px 0 2px;padding:0;font-size:13.5px}
.avail span{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border:1px solid rgba(255,255,255,.85);border-radius:999px;
  color:#2d3748;white-space:nowrap;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 3px 10px rgba(25,45,70,.1)}
.avail img,.avail svg{height:15px;width:15px;display:block;opacity:.88;flex:none}
.avail .ai{border-color:rgba(232,162,0,.55);background:linear-gradient(180deg,rgba(255,249,230,.95),rgba(255,240,205,.7))}
.avail .ai svg{color:#e8a200;opacity:1}
.avail .sysreq{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border-radius:50%;
  border:1.5px solid var(--line);background:transparent;box-shadow:none;
  font:italic 700 12px Georgia,serif;color:var(--muted);cursor:help}

.plat{display:block;width:100%;margin:12px 0 0;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font:inherit;font-size:14.5px;color:inherit;background:rgba(255,255,255,.85)}
.plat.err{border-color:var(--action,#c22);outline:2px solid var(--action,#c22);outline-offset:1px}

/* Last-resort trial nudge. */
.tryfree{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);max-width:72ch;font-size:14px;color:var(--muted)}
.tryfree b{color:var(--ink,inherit)}
.tryfree a{display:inline-block;margin:10px 14px 0 0;vertical-align:middle}
.tryfree img{height:36px;width:auto;opacity:.85}
.tryfree a:hover img{opacity:1}

/* Hero claims — frosted; amber .q = Querious-enabled. */
.claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,260px));gap:14px;margin:34px 0 0}
@media(max-width:900px){.claims{grid-template-columns:repeat(2,1fr)}}
.claims .c{border:1px solid rgba(255,255,255,.7);border-radius:10px;padding:13px 15px;font-size:13.5px;line-height:1.35;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:0 6px 20px rgba(25,45,70,.08)}
@supports not (backdrop-filter:blur(1px)){.claims .c{background:rgba(255,255,255,.88)}}
.claims .c b{display:block;font-size:14px;margin-bottom:3px}
.claims .q{border-color:rgba(232,162,0,.5);background:rgba(255,244,214,.55)}
.claims .q b svg{height:13px;width:13px;vertical-align:-2px;margin-right:5px;color:#e8a200}

.prose{max-width:72ch;font-size:16px;line-height:1.62}
.prose ul{padding-left:22px}
.prose li{margin:7px 0}
.prose table img{max-width:170px;height:auto}
.prose p{margin:0 0 14px}

.pdetails{margin-top:8px;font-size:14.5px;color:var(--muted)}
.pdetails span{display:inline-block;margin-right:26px;margin-top:6px}

.shortcode{margin-top:18px;font-family:"Space Mono",monospace;font-size:11.5px;color:var(--muted);opacity:.45;user-select:all}

.testband{background:var(--band,#f4f7f9);border-bottom:1px solid var(--line);font-size:13px;padding:8px 0;color:var(--muted)}
.testband .wrap{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}

/* ---------- DARK MODE (v12) ----------
   The glass system above assumes a light page. In dark mode every
   hardcoded white surface flips to translucent ink-glass, text
   lightens, and the fixed-color CDN brand icons are inverted. */
@media (prefers-color-scheme: dark){
  .edchip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#c9d2dd}
  .buy{background:rgba(18,26,36,.55);border-color:rgba(255,255,255,.14);
    box-shadow:0 18px 50px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3)}
  @supports not (backdrop-filter:blur(1px)){.buy{background:rgba(18,26,36,.95)}}
  .buy .btn.ghost{background:rgba(255,255,255,.08)}
  .avail span{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
    border-color:rgba(255,255,255,.25);color:#e2e8f0;box-shadow:0 3px 10px rgba(0,0,0,.35)}
  .avail img{filter:invert(.9) brightness(1.1)}
  .avail .ai{border-color:rgba(232,162,0,.55);background:linear-gradient(180deg,rgba(232,162,0,.22),rgba(232,162,0,.1));color:#f2cd7b}
  .avail .sysreq{border-color:rgba(255,255,255,.3);color:#aeb8c4;background:transparent}
  .plat{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#e2e8f0}
  .plat option{color:#1a202c}
  .claims .c{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);box-shadow:0 6px 20px rgba(0,0,0,.3)}
  @supports not (backdrop-filter:blur(1px)){.claims .c{background:rgba(24,32,42,.95)}}
  .claims .q{background:rgba(232,162,0,.14);border-color:rgba(232,162,0,.45)}
  .phero::before{opacity:.3}
  .phero::after{opacity:.3}
}