:root, body {
  --ds-page: #0b0b0b; --ds-raised: #181818; --ds-white: #141414;
  --ds-ink: #f5f5f5; --ds-ink-2: #c4c4c4; --ds-ink-3: #8f8f8f; --ds-ink-4: #555;
  --ds-hairline: #2a2a2a; --ds-teal: #5fd01f;
}
html, body, #root { margin: 0; min-height: 100%; }
body { background: #0b0b0b; color: #f5f5f5; }
.ip { text-align: right; color: #f5f5f5; }
.ip-hero { background: #0b0b0b; border-radius: 16px; overflow: hidden; text-align: center; margin-bottom: 20px; }
.ip-hero img { display: block; width: 100%; max-width: 520px; margin: 0 auto; }
.ip-tagline { margin: 0; padding: 0 16px 20px; color: #fff; font-size: 20px; font-weight: 600; }
.ip-tagline b { color: #5fd01f; }
.ip-services { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ip-services-title { margin: 0 0 6px; text-align: center; color: #5fd01f; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.ip-services { gap: 4px 0; }
.ip-services li { padding: 0 12px; color: #d8d8d8; font-size: 14px; font-weight: 500; cursor: default; border-inline-start: 1px solid #3a3a3a; }
.ip-services li:first-child { border-inline-start: 0; }
.ip-intro { text-align: center; color: #c4c4c4; margin: 0 0 32px; }
.ip-product { margin: 0 0 56px; padding-top: 32px; border-top: 1px solid #2a2a2a; }
.ip-name { margin: 0 0 4px; font-size: 24px; font-weight: 700; color: #fff; }
.ip-sub { margin: 0 0 16px; color: #5fd01f; font-weight: 600; }
.ip-gallery { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.ip-gallery img { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: 12px; background: #141414; }
.ip-price { margin: 12px 0; font-size: 24px; font-weight: 700; color: #5fd01f; }
.ip-note { font-size: 14px; font-weight: 400; color: #c4c4c4; }
.ip-cta { margin: 20px 0 0; }
.ip a[class*="button"], .ip .file-button { background: #5fd01f; color: #0b0b0b; box-shadow: none; font-weight: 700; }

.ip-availability { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; padding: 20px; border: 1px solid #2a2a2a; border-radius: 12px; background: #141414; }
.ip-availability div { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.ip-availability span { font-size: 14px; color: #c4c4c4; }
.ip-availability strong { font-size: 20px; color: #5fd01f; font-weight: 700; }
@media (max-width: 360px) { .ip-availability { gap: 10px; padding: 16px 10px; } .ip-availability strong { font-size: 18px; } }
.ip-general-cta { display: flex; justify-content: center; margin: -12px 0 32px; }
.ip-general-cta a[class*="button"], .ip-general-cta .file-button { min-width: 180px; min-height: 48px; justify-content: center; font-size: 17px; }
.ip-bottom-cta { margin: 12px 0 20px; }
.ip-old-price { text-decoration: line-through; text-decoration-thickness: 2px; font-size: 18px; font-weight: 400; color: #9a9a9a; margin-inline-end: 10px; }
.ip-cat { margin: 48px 0 0; padding: 12px 16px; border-radius: 12px; background: #141414; box-shadow: inset 0 0 0 1.5px #5fd01f; color: #5fd01f; font-size: 22px; font-weight: 700; text-align: center; }
.ip-cat + .ip-product { border-top: 0; }

.ip-video { display: block; width: 100%; max-height: 520px; border-radius: 12px; background: #000; }
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.5;margin:0}
.card{max-width:720px;margin:0 auto;padding:20px 16px 40px}
h1,h2,h3{font-family:inherit}
.ip-tagline{font-size:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:#5fd01f;color:#0b0b0b;font-weight:700;text-decoration:none;border-radius:999px;padding:14px 22px;min-height:48px;text-align:center}
.ip-cta .btn{width:100%}
.facts{margin:16px 0 0;padding:0;border-top:1px solid #2a2a2a}
.facts div{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #2a2a2a}
.facts dt{flex:0 0 28%;color:#8f8f8f;font-size:14px}
.facts dd{margin:0;flex:1;color:#f5f5f5}
.closing{text-align:center;color:#c4c4c4;margin:16px 0 0}
.ip-general-cta .btn{min-width:180px;font-size:17px}
.ip-hero img{height:auto}
.ip-name{font-size:24px}
h2.ip-cat{font-size:22px}

body{font-size:14px}
.card{padding:20px 20px 40px}
.btn{border-radius:8px;font-size:14px;padding:10px 16px;min-height:40px}
.ip-general-cta .btn{font-size:15px;min-width:150px}
.facts dt{font-size:13px}.facts dd{font-size:14px}
.facts div{padding:8px 0}
.about{color:#8f8f8f;font-size:13px;text-align:center;margin:24px 0 8px}
.ip-tagline{font-size:18px}
.ip-intro{font-size:14px}