/* Product atmospheres are scoped to marketing pages, never app notices. */
.product { --world-panel: #2d2b25; }
.product .product-art { min-height: 370px; }
.product .product-features { gap: 18px; border: 0; padding-top: 8px; }
.product .product-features article { padding: 24px; border-radius: 18px; background: var(--world-panel); }
.product .product-resources { background: var(--world-panel); }
.product .product-details { border-top: 1px solid var(--line); }
.product .feature-number { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; }

.product-phone { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 20px; max-width: 440px; margin-top: 24px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--world-panel); color: var(--ivory); text-decoration: none; }
.product-phone .phone-qr { display: block; width: 100%; height: auto; border-radius: 6px; }
.product-phone h2 { margin: 0 0 8px; font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 450; line-height: 1.2; }
.product-phone p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.phone-link { color: var(--app-accent); font-size: 13px; font-weight: 650; }
.product-phone:hover .phone-link { text-decoration: underline; text-underline-offset: 4px; }
.product-phone:focus-visible { outline: 3px solid var(--app-accent); outline-offset: 5px; }

.product-gameplay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; gap: clamp(24px, 6vw, 88px); padding: clamp(24px, 4vw, 48px); margin-bottom: 32px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(ellipse at 0% 100%, #6c805b26, transparent 65%), var(--world-panel); }
.gameplay-copy { max-width: 370px; }
.gameplay-copy h2 { margin: 18px 0; font-family: "Fraunces", Georgia, serif; font-size: clamp(30px, 3.5vw, 44px); font-weight: 450; line-height: 1.12; letter-spacing: -.035em; }
.gameplay-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
.gameplay-film { width: 100%; max-width: 300px; margin: 0; justify-self: center; }
.gameplay-film video { display: block; width: 100%; height: auto; aspect-ratio: var(--gameplay-ratio, 9 / 16); object-fit: contain; background: #101b15; border-radius: 14px; box-shadow: 0 14px 38px #07110b55; }
.gameplay-film video:focus-visible { outline: 3px solid var(--app-accent); outline-offset: 5px; }
.gameplay-film figcaption { margin-top: 14px; text-align: center; color: var(--muted); font-size: 12px; }

.world-tiny-traffic-circle { --ink: #1c251f; --line: #435348; --muted: #bcc8b7; --world-panel: #2a362b; background: radial-gradient(ellipse at 95% 15%, #52634538, transparent 50%), #1c251f; }
.world-tiny-traffic-circle .product-art { isolation: isolate; background: #263926; min-height: 440px; }
.world-tiny-traffic-circle .product-art .world-backdrop { position: absolute; z-index: -2; inset: 0; width: 100%; max-width: none; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 68%; border-radius: 0; box-shadow: none; opacity: .7; }
.world-tiny-traffic-circle .product-art::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(#15281810, #142719a0); }
.world-tiny-traffic-circle .product-art .product-icon { width: 57%; border: 1px solid #d1d9b52b; }
.world-tiny-traffic-circle .product-art p { background: #18271eeb; padding: 10px 16px; border-radius: 30px; color: #e0e8c8; }
.world-tiny-traffic-circle .art-orbit { display: none; }
.world-tiny-traffic-circle .product-features { position: relative; }
.world-tiny-traffic-circle .feature-number { border: 1px dashed #b8c2a4; box-shadow: 0 0 0 5px #1f2b22; margin: 5px; }

.world-sandbloom { --ink: #302421; --ivory: #f4e6d7; --muted: #d0b9ac; --line: #60463d; --world-panel: #3c2c29; background: radial-gradient(ellipse at 100% 0%, #a66c4145, transparent 55%), radial-gradient(ellipse at 0% 50%, #904e452e, transparent 50%), #302421; }
.world-sandbloom .product-art { background: radial-gradient(ellipse at 75% 10%, #d5b57a38, transparent 60%), #65483e; isolation: isolate; border-radius: 42% 42% 20px 20px; }
.world-sandbloom .product-art::before, .world-sandbloom .product-art::after { position: absolute; z-index: -1; content: ""; width: 160%; height: 75%; left: -30%; bottom: -43%; transform: rotate(-13deg); border-radius: 45%; background: #dc9a794d; }
.world-sandbloom .product-art::after { bottom: -52%; background: #d3b6725c; transform: rotate(14deg); }
.world-sandbloom .product-art .product-icon { width: 63%; transform: rotate(5deg); }
.world-sandbloom .product-art p { color: #ffdfc8; }
.world-sandbloom .product-gameplay { background: radial-gradient(ellipse at 0% 100%, #e3ad891a, transparent 65%), var(--world-panel); }
.world-sandbloom .gameplay-film video { background: #302421; }
.world-sandbloom .art-orbit { border: 0; }
.world-sandbloom .art-orbit::before { border: 1px dotted #e7bd7b80; }
.world-sandbloom .product-features article:nth-child(2) { background: #403731; }
.world-sandbloom .product-features article:nth-child(3) { background: #42312f; }
.world-sandbloom .feature-number { border-radius: 12px 50% 50%; color: #302421; background: #e3ad89; border: 0; }

.world-pocket-prosody { --ink: #29232a; --muted: #c7bac7; --line: #544551; --world-panel: #342b33; background: radial-gradient(ellipse at 20% 0%, #80624729, transparent 65%), #29232a; }
.world-pocket-prosody .product-art { background: repeating-linear-gradient(0deg, transparent 0 35px, #d9b78d17 35px 36px), #3c303a; border-radius: 8px 28px 28px 8px; border-left: 5px solid #83666f; }
.world-pocket-prosody .art-orbit { border-radius: 0; border: 0; transform: none; background: repeating-linear-gradient(90deg, transparent 0 28px, #d9b78d22 28px 32px); height: 48px; top: auto; bottom: 25px; }
.world-pocket-prosody .art-orbit::before { display: none; }
.world-pocket-prosody .product-art p { padding: 8px 13px; background: #3c303a; }
.world-pocket-prosody .product-features article { border-top: 2px solid #9e7976; border-radius: 0 0 16px 16px; }
.world-pocket-prosody .feature-number { border-radius: 0; border-width: 0 0 1px; }

.world-your-pace { --ink: #242c32; --muted: #c1c8c8; --line: #4c5b61; --world-panel: #2c373e; background: radial-gradient(ellipse at 100% 35%, #52635b40, transparent 65%), #242c32; }
.world-your-pace .product-art { background: radial-gradient(circle at 75% 19%, #dec9a64a 0 28px, transparent 29px), linear-gradient(160deg, #384b64, #2f4848); border-radius: 48% 48% 20px 20px; }
.world-your-pace .art-orbit { top: 50%; transform: rotate(-23deg) scaleY(.5); border-color: #d4c8a83d; width: 140%; }
.world-your-pace .product-features article { border-radius: 28px 12px 28px 12px; }
.world-your-pace .feature-number { border: 0; background: #c4caaa20; }

.world-tap-for-a-pixel { --ink: #18212d; --muted: #b2c6d4; --line: #38516a; --world-panel: #202e3e; background: radial-gradient(ellipse at 90% 15%, #31648524, transparent 55%), #18212d; }
.world-tap-for-a-pixel .product-art { background: radial-gradient(circle at 18% 22%, #bee7fa 0 1px, transparent 2px), radial-gradient(circle at 84% 63%, #bfe4b3 0 2px, transparent 3px), radial-gradient(circle at 70% 18%, #82d4d8 0 1px, transparent 2px), radial-gradient(ellipse at 50% 75%, #34639466, transparent 70%), #15243b; border-radius: 6px; border: 1px solid #365475; }
.world-tap-for-a-pixel .art-orbit, .world-tap-for-a-pixel .art-orbit::before { border-radius: 0; transform: rotate(45deg) scale(.8); border-color: #5e9abc55; }
.world-tap-for-a-pixel .product-features article { border-radius: 4px; border-bottom: 3px solid #46667b; }
.world-tap-for-a-pixel .feature-number { border-radius: 2px; color: #82d4d8; }

@media (max-width: 600px) {
  .product-phone { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; margin-top: 20px; }
  .product-phone h2 { font-size: 20px; }
  .product-gameplay { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px; border-radius: 18px; }
  .gameplay-film { max-width: 280px; }
  .product .product-art, .world-tiny-traffic-circle .product-art { min-height: 300px; }
  .product .product-art .product-icon { max-width: 190px; }
  .product .product-features article { display: block; padding: 22px; }
  .product .product-features h2 { margin-block: 14px 10px; }
  .product .product-features p { grid-column: auto; }
}