/* Product presentation only. Checkout, account state and product data remain in app.js. */
body[data-product-design] {
  --accent: #e63946;
  --muted: #aaa9b7;
  background: radial-gradient(ellipse at 78% 0, #e639460a, transparent 40%), #0a0a12;
}
body[data-product-design] main { width: min(1180px, calc(100% - 80px)); padding: 34px 0 80px; }
body[data-product-design] header { padding-inline: max(40px, calc((100vw - 1180px) / 2)); }
body[data-product-design] section { margin-top: 64px; scroll-margin-top: 110px; }
body[data-product-design] h2 { color: #f4f2f7; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; line-height: 1.2; font-weight: 750; }
body[data-product-design] .product-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 24px; color: #878591; font-size: 12px; }
body[data-product-design] .product-breadcrumb a { display: inline-flex; align-items: center; gap: 8px; color: #d5d2dc; }
body[data-product-design] .product-breadcrumb a:hover { color: #ff7b85; }
body[data-product-design] .hero {
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: 510px; margin: 0; padding: 64px 48px 80px; overflow: hidden;
  border: 1px solid #ffffff16; border-radius: 26px; background: #111118;
}
body[data-product-design] .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #111118 5%, #111118f5 35%, #11111880 60%, #11111810 100%), linear-gradient(0deg, #111118 0, transparent 35%);
}
body[data-product-design] .product-art { position: absolute; inset: 0 0 0 30%; z-index: -2; overflow: hidden; }
body[data-product-design] .product-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 36%; animation: product-art-enter 1.1s cubic-bezier(.22, 1, .36, 1) both; }
body[data-product-design] .product-hero-copy { width: 64%; max-width: 690px; animation: product-enter .7s cubic-bezier(.22, 1, .36, 1) both; }
body[data-product-design] .hero .kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #ef959d; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
body[data-product-design] .hero .kicker::before { content: ""; width: 24px; height: 2px; background: #e63946; flex: 0 0 auto; }
body[data-product-design] .hero h1 { font-size: clamp(45px, 6vw, 78px); line-height: .99; letter-spacing: -.05em; font-weight: 800; margin: 0; text-wrap: balance; }
body[data-product-design] .hero .lede { font-size: 16px; line-height: 1.7; max-width: 450px; margin: 22px 0; color: #bbb7c4; }
body[data-product-design] .hero .product-meta { gap: 10px; }
body[data-product-design] .hero .actions { margin-top: 32px; gap: 10px; }
body[data-product-design] .hero .actions .btn { padding-inline: 20px; font-size: 13px; }
body[data-product-design] .product-edition { position: absolute; left: 48px; bottom: 26px; font-size: 9px; letter-spacing: .25em; color: #777480; }
body[data-product-design] .btn { border-radius: 11px; transition: background .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
body[data-product-design] .btn:not(.ghost):not(.off):hover { background: #f34653; box-shadow: 0 8px 26px #e6394626; transform: translateY(-2px); }
body[data-product-design] .btn.ghost { background: #16161d8c; border-color: #ffffff26; }
body[data-product-design] .btn.ghost:hover { border-color: #e6394680; background: #21212a; }
body[data-product-design] :is(a, button, summary, input):focus-visible { outline: 2px solid #ff818b; outline-offset: 4px; }
body[data-product-design] .product-sections { display: flex; flex-wrap: wrap; gap: 0 32px; padding: 12px 4px; border-bottom: 1px solid #ffffff15; }
body[data-product-design] .product-sections a { display: inline-flex; align-items: center; gap: 9px; padding: 12px 0; font-size: 12px; color: #bbb8c5; transition: color .18s ease; }
body[data-product-design] .product-sections a > span:first-child { color: #746572; font-size: 9px; letter-spacing: .1em; }
body[data-product-design] .product-sections a:hover { color: #ff818b; }
body[data-product-design] #buy > h2 { margin: 0 0 14px; }
body[data-product-design] #price-note { font-size: 15px; max-width: 760px; line-height: 1.65; }
body[data-product-design] .prices { gap: 14px; margin-top: 26px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
body[data-product-design] .plan { position: relative; overflow: hidden; padding: 26px 24px 30px; min-height: 150px; border-radius: 18px; background: linear-gradient(135deg, #1b1a24, #111118); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
body[data-product-design] .plan::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, #e6394690, #e6394600); }
body[data-product-design] .plan::after { content: "↗"; position: absolute; right: 22px; bottom: 22px; color: #827c8b; font-size: 19px; transition: color .2s ease, transform .2s ease; }
body[data-product-design] .plan h3 { margin: 0 0 24px; color: #c8c2cf; font-size: 14px; font-weight: 600; }
body[data-product-design] .plan p { margin: 0; padding-right: 22px; color: #fff; font-size: 27px; line-height: 1.1; letter-spacing: -.04em; }
body[data-product-design] .plan:hover:not(:disabled):not(.off) { transform: translateY(-4px); border-color: #e6394690; background: linear-gradient(135deg, #271c28, #14121a); }
body[data-product-design] .plan:hover:not(:disabled):not(.off)::after { color: #ff818b; transform: translate(2px, -2px); }
body[data-product-design] .plan:disabled::after, body[data-product-design] .plan.off::after { content: "—"; }
body[data-product-design] .pay-marks { margin-top: 20px; }
body[data-product-design] .specs { padding: 0; }
body[data-product-design] .spec-panel { padding: 32px; border-radius: 22px; background: linear-gradient(125deg, #17151f, #111118); }
body[data-product-design] .spec-h { margin-bottom: 28px; }
body[data-product-design] .spec-table { gap: 0 34px; }
body[data-product-design] .spec-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; }
body[data-product-design] .spec-row:nth-child(1), body[data-product-design] .spec-row:nth-child(2) { padding-top: 0; }
body[data-product-design] .spec-row dt, body[data-product-design] .spec-row dd { font-size: 13px; line-height: 1.65; }
body[data-product-design] .spec-row dd { text-align: left; color: #e0dce7; }
body[data-product-design] .spec-warn { margin-top: 20px; padding: 16px; border-color: #e6394630; border-left-color: #e63946; border-radius: 10px; background: #e6394608; }
body[data-product-design] .spec-warn-h { color: #ee8b94; }
body[data-product-design] .spec-warn-p { line-height: 1.6; }
body[data-product-design] .fx { counter-reset: product-category; padding: 0; }
body[data-product-design] .fx h2 { margin-bottom: 26px; font-size: clamp(25px, 3vw, 34px); }
body[data-product-design] .fx-cat { counter-increment: product-category; border: 1px solid #ffffff12; border-radius: 16px; background: #12121a; padding: 0; margin: 0 0 10px; overflow: hidden; transition: border-color .2s ease, background .2s ease; }
body[data-product-design] .fx-cat:hover { border-color: #ffffff2b; }
body[data-product-design] .fx-cat[open] { border-color: #e6394640; background: linear-gradient(120deg, #19151f, #111118); }
body[data-product-design] .fx-cat-h { position: relative; display: flex; align-items: center; gap: 18px; padding: 23px 28px; padding-right: 62px; margin: 0; list-style: none; font-size: 16px; letter-spacing: -.01em; line-height: 1.3; cursor: pointer; }
body[data-product-design] .fx-cat-h::-webkit-details-marker { display: none; }
body[data-product-design] .fx-cat-h::before { content: counter(product-category, decimal-leading-zero); font-size: 10px; color: #a46b77; letter-spacing: .1em; font-weight: 500; flex: 0 0 auto; }
body[data-product-design] .fx-cat-h::after { content: "+"; position: absolute; right: 28px; color: #978e9d; font-size: 22px; font-weight: 400; }
body[data-product-design] .fx-cat[open] > .fx-cat-h::after { content: "−"; color: #ef8691; }
body[data-product-design] .fx-cat-h span { color: #e4dfe9; font-weight: 600; }
body[data-product-design] .fx-list { padding: 2px 28px 26px 62px; gap: 8px 28px; }
body[data-product-design] .fx-list li { padding: 2px 0 2px 14px; color: #aca6b6; font-size: 13px; line-height: 1.6; }
body[data-product-design] .fx-list li::before { width: 3px; height: 3px; top: .8em; border-radius: 50%; background: #b54e61; }
body[data-product-design] .fx-cat[open] .fx-list { animation: product-enter .25s ease both; }
body[data-product-design] .shots { margin-top: 30px; }
body[data-product-design] .shot { border-radius: 18px; transition: border-color .2s ease; }
body[data-product-design] .shot:not(.shot-empty):hover { border-color: #e6394680; }
body[data-product-design] .shot:not(.shot-empty):hover img { transform: scale(1.025); }
body[data-product-design] #faq-list { display: grid; gap: 10px; margin-top: 26px; }
body[data-product-design] #faq-list details { border: 1px solid #ffffff13; border-radius: 14px; background: #12121a; padding: 0; }
body[data-product-design] #faq-list summary { position: relative; list-style: none; padding: 21px 58px 21px 24px; font-size: 15px; font-weight: 600; }
body[data-product-design] #faq-list summary::-webkit-details-marker { display: none; }
body[data-product-design] #faq-list summary::after { content: "+"; position: absolute; right: 24px; top: 17px; font-size: 22px; color: #a394a4; }
body[data-product-design] #faq-list details[open] summary::after { content: "−"; color: #ee8b94; }
body[data-product-design] #faq-list details[open] { border-color: #e6394640; }
body[data-product-design] #faq-list p { margin: 0; padding: 0 24px 24px; max-width: 900px; font-size: 14px; line-height: 1.75; }
body[data-product-design] .legal-home { gap: 16px; }
body[data-product-design] .legal-home article { padding: 26px; border-radius: 18px; background: #101017; }
body[data-product-design] .legal-home h3 { font-size: 16px; font-weight: 650; margin: 0 0 18px; }
body[data-product-design] .legal-home p { font-size: 13px; line-height: 1.7; }
body[data-product-design] .legal-home p + p { margin-top: 16px; }
body[data-product-design] .legal-home .more { color: #ed8993; }
body[data-product-design] footer { border-top: 1px solid #ffffff10; padding-inline: max(40px, calc((100vw - 1180px) / 2)); }
body[data-product-design] .sheet { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border-color: #ffffff20; border-radius: 22px; padding: 28px; background: linear-gradient(140deg, #1d1924, #111118); box-shadow: 0 30px 90px #0009; }
body[data-product-design] .sheet h2 { font-size: 25px; }
body[data-product-design] .sheet .promo-row input { min-width: 0; }
body[data-product-design] .sheet .pay-gate { transition: background .2s ease, border-color .2s ease; }
body[data-product-design] .sheet .pay-gate:hover { background: #201b28; }
body[data-product-design] [hidden] { display: none !important; }
@keyframes product-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes product-art-enter { from { opacity: .5; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 1100px) {
  body[data-product-design] header { padding-inline: 24px; flex-wrap: wrap; gap: 12px 22px; }
  body[data-product-design] header nav { order: 3; flex: 1 0 100%; overflow-x: auto; gap: 20px; padding-bottom: 3px; white-space: nowrap; font-size: 13px; }
  body[data-product-design] main { width: calc(100% - 48px); }
  body[data-product-design] .hero { min-height: 460px; padding-inline: 36px; }
  body[data-product-design] .product-edition { left: 36px; }
}
@media (max-width: 900px) {
  body[data-product-design] header nav { gap: 0; overflow: visible; padding: 4px 0 8px; }
}
@media (max-width: 719px) {
  body[data-product-design] main { width: calc(100% - 32px); padding-top: 22px; }
  body[data-product-design] header { padding: 16px; }
  body[data-product-design] header .right { gap: 12px; }
  body[data-product-design] section { margin-top: 42px; scroll-margin-top: 145px; }
  body[data-product-design] .product-breadcrumb { margin-bottom: 18px; }
  body[data-product-design] .hero { min-height: 540px; align-items: flex-end; padding: 215px 24px 60px; border-radius: 20px; }
  body[data-product-design] .product-art { inset: 0 0 auto; height: 390px; }
  body[data-product-design] .product-art img { object-position: center 25%; }
  body[data-product-design] .hero::after { background: linear-gradient(0deg, #111118 4%, #111118e8 40%, #11111810 95%); }
  body[data-product-design] .product-hero-copy { width: 100%; max-width: none; }
  body[data-product-design] .hero h1 { font-size: clamp(40px, 9vw, 60px); }
  body[data-product-design] .hero .kicker { margin-bottom: 16px; }
  body[data-product-design] .hero .lede { font-size: 14px; margin-block: 18px; }
  body[data-product-design] .hero .actions { margin-top: 24px; }
  body[data-product-design] .product-edition { left: 24px; bottom: 20px; }
  body[data-product-design] .product-sections { gap: 0 20px; padding-block: 8px; }
  body[data-product-design] .product-sections a { font-size: 11px; padding-block: 10px; }
  body[data-product-design] .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-product-design] .plan { min-height: 140px; padding: 22px 18px; }
  body[data-product-design] .plan p { font-size: 24px; }
  body[data-product-design] .spec-panel { padding: 24px 20px; border-radius: 18px; }
  body[data-product-design] .spec-row { gap: 18px; grid-template-columns: 1fr 1fr; }
  body[data-product-design] .spec-row:nth-child(2) { padding-top: 16px; }
  body[data-product-design] .spec-row dt, body[data-product-design] .spec-row dd { font-size: 12px; }
  body[data-product-design] .spec-warn { padding: 14px; }
  body[data-product-design] .fx-cat-h { padding: 20px; padding-right: 52px; gap: 14px; font-size: 15px; }
  body[data-product-design] .fx-cat-h::after { right: 20px; }
  body[data-product-design] .fx-list { padding: 0 20px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; }
  body[data-product-design] .fx-list li { font-size: 12px; }
  body[data-product-design] .legal-home { grid-template-columns: 1fr; }
  body[data-product-design] #faq-list summary { padding-left: 20px; font-size: 14px; }
  body[data-product-design] #faq-list p { padding-inline: 20px; }
  body[data-product-design] footer { padding-inline: 24px; }
}
@media (max-width: 420px) {
  body[data-product-design] .hero { padding-inline: 20px; }
  body[data-product-design] .prices { grid-template-columns: 1fr; }
  body[data-product-design] .plan { min-height: 115px; }
  body[data-product-design] .plan h3 { margin-bottom: 18px; }
  body[data-product-design] .fx-list { grid-template-columns: 1fr; }
  body[data-product-design] .sheet { padding: 24px 20px; }
}
/* Navigation and motion are progressive enhancements: content is never hidden. */
html.product-page { scroll-behavior: smooth; }
body[data-product-design] { --product-header-offset: 84px; --product-scroll-offset: 176px; }
body[data-product-design] section { scroll-margin-top: var(--product-scroll-offset); }
body[data-product-design] .product-switcher {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: 0 0 24px; padding: 0; width: 100%; border: 0;
}
body[data-product-design] .product-switcher a {
  position: relative; display: grid; gap: 5px; align-content: center;
  padding: 17px 44px 17px 20px; min-height: 82px; border: 1px solid #ffffff12;
  border-radius: 14px; background: #111118; color: #a6a0b1;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
body[data-product-design] .product-switcher a::after { content: ""; position: absolute; inset: auto 20px -1px; height: 2px; background: #e63946; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
body[data-product-design] .product-switcher a:hover { transform: translateY(-2px); color: #fff; border-color: #e6394650; background: #19141e; }
body[data-product-design] .product-switcher a[aria-current="page"] { border-color: #e6394660; background: linear-gradient(125deg, #291720, #141219); color: #fff; }
body[data-product-design] .product-switcher a[aria-current="page"]::after { transform: scaleX(1); }
body[data-product-design] .product-switch-family { color: #8c818f; font-size: 8px; letter-spacing: .16em; font-weight: 650; }
body[data-product-design] .product-switcher strong { font-size: 15px; letter-spacing: -.02em; font-weight: 650; }
body[data-product-design] .product-switch-arrow { position: absolute; right: 20px; top: 29px; font-size: 16px; color: #897381; transition: color .2s ease, transform .2s ease; }
body[data-product-design] .product-switcher a:hover .product-switch-arrow { color: #f38793; transform: translate(2px, -2px); }
body[data-product-design] .product-breadcrumb a { padding: 5px 0; transition: color .2s ease; }
body[data-product-design] .product-sections {
  position: sticky; top: calc(var(--product-header-offset) + 8px); z-index: 8;
  flex-wrap: nowrap; gap: 6px; margin: 14px 0 0; padding: 8px;
  width: 100%; border: 1px solid #ffffff18; border-radius: 14px;
  background: #101017ed; backdrop-filter: blur(18px); box-shadow: 0 10px 30px #0003;
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: #51404e transparent;
}
body[data-product-design] .product-sections a {
  position: relative; flex: 0 0 auto; gap: 9px; min-height: 42px; padding: 11px 17px;
  border-radius: 8px; font-size: 12px; white-space: nowrap; color: #aaa2b3;
  transition: color .2s ease, background .2s ease;
}
body[data-product-design] .product-sections a:hover { background: #ffffff07; color: #e9e3ee; }
body[data-product-design] .product-sections a[aria-current="location"] { background: #e639461c; color: #fff; }
body[data-product-design] .product-sections a[aria-current="location"] > span:first-child { color: #f07d8b; }
body[data-product-design] .product-sections a:focus-visible { outline-offset: -2px; }
body[data-product-design] main > section:not(.hero) > h2 { display: flex; align-items: center; gap: 14px; }
body[data-product-design] main > section:not(.hero) > h2::before { content: ""; width: 4px; height: .9em; background: linear-gradient(#f15c6b, #9c263b); border-radius: 3px; flex: 0 0 auto; }
body[data-product-design] .fx-cat-h { transition: background .2s ease; }
body[data-product-design] .fx-cat-h:hover { background: #ffffff03; }
body[data-product-design] .product-document-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 10px 14px; width: 100%; border: 1px solid #ffffff1e; border-radius: 10px; background: #ffffff03; transition: background .2s ease, border-color .2s ease; }
body[data-product-design] .product-document-link > span:last-child { color: #c07f8d; transition: transform .2s ease; }
body[data-product-design] .product-document-link:hover { border-color: #e6394670; background: #e639460c; }
body[data-product-design] .product-document-link:hover > span:last-child { transform: translate(2px, -2px); }
body[data-product-design] .legal-home article { display: flex; flex-direction: column; }
body[data-product-design] .legal-home article > p:last-child { margin-top: auto; padding-top: 22px; }
body[data-product-design] .product-support-links { display: grid; gap: 8px; margin-top: 20px; }
body[data-product-design] .product-support-links a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 15px; align-items: center; gap: 10px; padding: 11px; border: 1px solid #ffffff10; border-radius: 10px; transition: background .2s ease, border-color .2s ease; }
body[data-product-design] .product-support-links a:hover { background: #211a26; border-color: #e6394650; }
body[data-product-design] .product-link-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e6394630; border-radius: 9px; color: #ed8595; background: #e639460d; font-size: 10px; font-weight: 750; letter-spacing: .06em; }
body[data-product-design] .product-support-links strong { display: block; font-size: 12px; color: #e1dbe6; font-weight: 650; }
body[data-product-design] .product-support-links small { display: block; overflow-wrap: anywhere; font-size: 10px; color: #948a9c; margin-top: 2px; }
body[data-product-design] .product-link-arrow { color: #ad7c8d; transition: transform .2s ease; }
body[data-product-design] .product-support-links a:hover .product-link-arrow { transform: translate(2px, -2px); }
body[data-product-design] .foot-legal { gap: 9px; }
body[data-product-design] .foot-legal a, body[data-product-design] .foot-social a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid #ffffff12; border-radius: 8px; color: #aca2b5; font-size: 12px; transition: color .2s ease, border-color .2s ease, background .2s ease; }
body[data-product-design] .foot-legal a:hover, body[data-product-design] .foot-social a:hover { color: #eadfe9; border-color: #e6394660; background: #e6394609; }
body[data-product-design] .foot-social a::after { content: "↗"; color: #c28799; }
body[data-product-design] header nav a { transition: color .2s ease; }
body[data-product-design] header nav a:hover { color: #f397a2; }
@media (max-width: 900px) {
  body[data-product-design] .product-switcher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-product-design] .product-switcher a { padding: 15px; min-height: 76px; }
  body[data-product-design] .product-switch-arrow { display: none; }
  body[data-product-design] .product-sections { flex-direction: row; padding: 6px; }
  body[data-product-design] .product-sections a { min-height: 42px; padding: 10px 13px; font-size: 11px; }
}
@media (max-width: 520px) {
  body[data-product-design] .product-switcher { gap: 6px; margin-bottom: 18px; }
  body[data-product-design] .product-switcher a { padding: 12px 10px; min-height: 78px; border-radius: 10px; }
  body[data-product-design] .product-switcher strong { font-size: 12px; line-height: 1.4; }
  body[data-product-design] .product-switch-family { font-size: 6px; letter-spacing: .08em; }
  body[data-product-design] .product-switcher a::after { inset-inline: 10px; }
  body[data-product-design] .product-sections { border-radius: 12px; top: calc(var(--product-header-offset) + 5px); }
  body[data-product-design] .product-sections a { padding-inline: 11px; gap: 7px; }
}
@media print {
  body[data-product-design] .product-sections { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  html.product-page { scroll-behavior: auto; }
  body[data-product-design] *, body[data-product-design] *::before, body[data-product-design] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}