.pp { padding-bottom: 24px; }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 22px; font: 13px/1.4 var(--mono); color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.p-head {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(24px, 4vw, 48px);
  padding-block: clamp(24px, 4vw, 40px) clamp(28px, 5vw, 48px); border-bottom: 2px solid var(--ink); align-items: start;
}
.id { display: grid; gap: 18px; min-width: 0; justify-items: start; }
.id-top { display: flex; align-items: center; gap: 16px; }
.id-top img { width: 72px; height: 72px; border-radius: 16px; flex: none; display: block; }
.p-head h1 {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.02; letter-spacing: -0.05em; overflow-wrap: anywhere;
}
.cat { font: 13px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lead { margin: 0; max-width: 56ch; font-size: 19px; line-height: 1.55; color: var(--muted); letter-spacing: -0.01em; text-wrap: pretty; }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; display: grid; gap: 14px; min-width: 0; }
.panel .cta.buy { justify-content: center; margin-top: 0; }
.panel .alt-store { margin: 0; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.facts dt { font: 11px/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font: 14px/1.6 var(--mono); min-width: 0; }
.price { font: 600 30px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price small { font: 13px/1 var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.panel-note { margin: 0; font-size: 14px; color: var(--muted); }

section.s {
  display: grid; grid-template-columns: minmax(160px, 0.6fr) minmax(0, 2fr); gap: clamp(16px, 4vw, 48px);
  padding-block: clamp(28px, 5vw, 44px); border-bottom: 1px solid var(--rule);
}
section.s > h2 { margin: 0; font: 600 13px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.s-body { display: grid; gap: 18px; min-width: 0; }
.s-body > p { margin: 0; max-width: 64ch; }
@media (max-width: 760px) { .p-head, section.s { grid-template-columns: minmax(0, 1fr); } }

.feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--rule); }
.feat li { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; min-width: 0; }
.feat strong { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.feat span { font-size: 14px; color: var(--muted); }

.pp-gallery { max-width: 600px; margin-top: 0; }
.pp-gallery .gallery-stage { cursor: default; }
.pp-gallery .gallery-stage > img { cursor: zoom-in; }
.gallery-stage > .video {
  position: absolute; inset: 0; border: 0; border-radius: 0; aspect-ratio: auto;
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s;
}
.gallery-stage > .video.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.gallery.on-video .gallery-zoom { display: none; }
.thumb-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.thumb-strip button {
  all: unset; box-sizing: border-box; position: relative; flex: none; width: 72px; height: 48px; cursor: pointer;
  border-radius: 6px; overflow: hidden; background: #0B0F15; box-shadow: inset 0 0 0 1px var(--rule); opacity: .55; transition: opacity .2s ease;
}
.thumb-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-strip button:hover, .thumb-strip button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.thumb-strip button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vthumb span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; text-shadow: 0 1px 4px rgb(0 0 0 / .7); }
@media (prefers-reduced-motion: reduce) { .gallery-stage > .video, .thumb-strip button { transition: none; } }

.track { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.track a { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 10px; text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.track a:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--muted); }
.track a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.track a > b { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.track small { font: 13px/1.4 var(--mono); color: var(--muted); }
.track .bar { display: block; height: 6px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.track .bar > b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7B3FF2, #2F5BEA); border-radius: inherit; }

.help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.help p { margin: 0; color: var(--muted); max-width: 60ch; }
.help .cta { margin-top: 0; }

:lang(ja) .p-head h1, :lang(ko) .p-head h1, :lang(zh-CN) .p-head h1 { letter-spacing: -0.02em; }
:lang(ja) :is(.cat, .facts dt, section.s > h2, .crumb), :lang(ko) :is(.cat, .facts dt, section.s > h2, .crumb),
:lang(zh-CN) :is(.cat, .facts dt, section.s > h2, .crumb) { letter-spacing: 0; }

.gallery-stage .video-play img { position: static; opacity: 1; transition: filter .2s; }
.pp > section.s:last-child { border-bottom: 0; }
.gallery-stage > img:not(.is-active) { pointer-events: none; }
.gallery-stage > .video.is-active { z-index: 1; }

.price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.once { font: 500 12px/1 var(--mono); color: var(--live); border: 1px solid currentColor; border-radius: 99px; padding: 4px 8px; }
.panel .secure { display: flex; gap: 10px; align-items: flex-start; margin: -2px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.panel .secure svg { flex: none; margin-top: 1px; color: var(--live); }
.panel .secure b { color: var(--ink); font-weight: 600; }
.terms { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 8px; font-size: 14px; }
.terms li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.terms svg { margin-top: 3px; color: var(--accent); }
.terms small { display: block; color: var(--muted); font-size: 13px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 13px/1.4 var(--mono); }
.legal-links a { color: var(--accent); text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }
.legal-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.faq { gap: 0; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 16px; align-items: center;
  padding: 16px 0; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; text-wrap: balance; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq summary i { position: relative; width: 14px; height: 14px; justify-self: end; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--muted); border-radius: 2px; transition: transform .2s ease; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq .a { padding: 0 36px 18px 0; color: var(--muted); max-width: 64ch; display: grid; gap: 8px; justify-items: start; }
.faq .a p { margin: 0; }
.faq-link { font: 13px/1.4 var(--mono); color: var(--accent); text-decoration: none; }
.faq-link::after { content: " →"; }
.faq-link:hover { text-decoration: underline; }
.faq-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (max-width: 760px) { .faq .a { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .faq summary i::before, .faq summary i::after { transition: none; } }