/* ==========================================================================
   SalonYar website — multi-page additions (features, customize, about, buy)
   Builds on landing.css tokens. Motion: transform/opacity only.
   ========================================================================== */

/* ---------- Page transition curtain ---------- */
.lx-curtain {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none;
    background: radial-gradient(80% 60% at 50% 40%, #2a1024, var(--ink-0));
}
.lx-curtain .lx-logo { width: 64px; height: 64px; }
html:not(.js) .lx-curtain { display: none; }

/* ---------- Sub-page hero ---------- */
.page-hero { position: relative; padding: 160px 0 90px; min-height: 78vh; display: flex; align-items: center; }
.page-hero.compact { min-height: 0; padding-bottom: 40px; }
.page-hero.center { text-align: center; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.page-title { font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1.18; font-weight: 850; margin: 0 0 24px; letter-spacing: -.02em; }
.page-title .line { display: block; overflow: hidden; padding-block: .06em; }
.page-title .word { display: inline-block; will-change: transform; }
.page-lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--muted); max-width: 36em; margin: 0 0 32px; }
.page-lead.mx { margin-inline: auto; }
.page-lead b { color: var(--pearl); font-weight: 700; }
.hero-ctas.center { justify-content: center; }
html.js .page-title .word { transform: translateY(110%); }

.lx-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--champagne); font-weight: 700; text-decoration: none; font-size: .95rem; }
.lx-more i { transition: transform .4s var(--ease-out); }
.lx-more:hover i { transform: translateX(-6px); }

/* home: story cards are links now */
a.story-card { color: inherit; text-decoration: none; transition: border-color .4s, transform .6s var(--ease-out); }
a.story-card:hover { border-color: rgba(231, 201, 150, .35); transform: translateY(-6px); }

/* home: final CTA replaces the old sign-up form */
.start-cta { display: flex; flex-direction: column; justify-content: center; }
.start-cta .lx-lead { font-size: 1rem; margin-bottom: 22px; }
.start-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.start-steps li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255, 244, 232, .04); border: 1px solid var(--line); }
.start-steps i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(231, 201, 150, .12); color: var(--champagne); font-size: 1.1rem; flex: none; }
.start-steps b { display: block; font-size: .95rem; } .start-steps small { color: var(--muted); font-size: .8rem; }

/* ---------- Final CTA (all sub-pages) ---------- */
.final-cta { padding-top: 40px; }
.cta-card { position: relative; overflow: hidden; border-radius: 36px; padding: clamp(40px, 6vw, 80px) clamp(22px, 5vw, 70px); text-align: center; }
.cta-card .lx-lead { margin: 0 auto 32px; }
.cta-glow { position: absolute; inset: -40% 10% auto; height: 120%; background: radial-gradient(closest-side, rgba(194, 71, 127, .35), transparent); filter: blur(40px); pointer-events: none; animation: ctaGlow 9s var(--ease-io) infinite alternate; }
@keyframes ctaGlow { to { transform: translateY(12%) scale(1.15); } }
.cta-card > *:not(.cta-glow) { position: relative; }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.module-orbit { position: relative; aspect-ratio: 1; width: min(520px, 100%); margin-inline: auto; transform-style: preserve-3d; container-type: inline-size; }
.orbit-core { position: absolute; top: 50%; left: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; display: grid; place-content: center; justify-items: center; text-align: center; z-index: 2; }
.orbit-core .lx-logo { width: 44px; height: 44px; margin-bottom: 4px; }
.orbit-core b { font-size: 1.9rem; font-weight: 850; line-height: 1.1; } .orbit-core small { color: var(--muted); font-size: .76rem; }
.orbit-ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed var(--line-strong); }
.orbit-ring.r2 { inset: 24%; border-style: solid; border-color: var(--line); }
.orbit-items { position: absolute; inset: 0; animation: spinslow 70s linear infinite; }
.orbit-items span {
    --r: 42cqw; position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 17px;
    display: grid; place-items: center; font-size: 1.3rem; color: var(--champagne);
    background: rgba(30, 17, 28, .9); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
    transform: rotate(calc(var(--a) * 30deg)) translate(var(--r)) rotate(calc(var(--a) * -30deg));
}
.orbit-items span i { animation: spinslow 70s linear infinite reverse; }
.orbit-items span:nth-child(3n) { color: #e27aa8; } .orbit-items span:nth-child(4n) { color: var(--mint); }

.module-nav { position: sticky; top: 84px; z-index: 30; padding: 0 var(--gutter); margin-bottom: 20px; }
.module-nav-track {
    max-width: var(--container); margin-inline: auto; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 8px; border-radius: 99px; background: rgba(19, 10, 19, .78); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.module-nav-track::-webkit-scrollbar { display: none; }
.module-nav a { flex: none; text-decoration: none; color: var(--muted); font-size: .86rem; font-weight: 600; padding: 7px 14px; border-radius: 99px; transition: color .25s, background-color .25s; }
.module-nav a:hover { color: var(--pearl); }
.module-nav a.is-active { color: #1a0d14; background: var(--metal); }

.module { padding-block: clamp(70px, 9vw, 120px); scroll-margin-top: 140px; }
.module.alt { background: linear-gradient(180deg, transparent, rgba(255, 244, 232, .018) 20%, rgba(255, 244, 232, .018) 80%, transparent); }
.module-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.module.alt .module-copy { order: 2; }
.module-num { font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: rgba(231, 201, 150, .25); display: block; margin-bottom: 8px; }
.module .lx-h2 i { color: var(--champagne); font-size: .8em; margin-left: 8px; }
.module .lx-lead { margin-bottom: 22px; }
.module-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.module-list li { position: relative; padding-right: 28px; color: var(--muted); line-height: 1.8; }
.module-list li::before { content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; right: 0; top: 1px; color: var(--mint); }
.module-list b { color: var(--pearl); }
.module-visual { display: grid; place-items: center; perspective: 1200px; }
.module-visual > .glass { border-radius: 26px; padding: 24px; width: min(460px, 100%); box-shadow: var(--shadow-deep); }
.mv-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.mv-head small { color: var(--muted); font-size: .78rem; }

/* scenes start hidden, play once the module scrolls in (.is-in) */
.module [style*="--i"] { transition-delay: calc(var(--i) * 90ms + 200ms); }

.mv-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mv-slot-grid span { padding: 12px 0; text-align: center; border-radius: 14px; border: 1px solid var(--line); font-weight: 600; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--ease-out), background-color .4s, color .4s; }
.mv-slot-grid span.taken { text-decoration: line-through; color: var(--faint); }
.module.is-in .mv-slot-grid span { opacity: 1; transform: none; }
.module.is-in .mv-slot-grid span.taken { opacity: .35; }
.module.is-in .mv-slot-grid span.pick { background: var(--metal); color: #1a0d14; border-color: transparent; transition-delay: 1.3s; box-shadow: 0 10px 30px -8px rgba(231, 201, 150, .6); }
.mv-confirm { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(127, 212, 176, .1); color: var(--mint); font-size: .88rem; display: flex; gap: 8px; opacity: 0; transform: translateY(10px); transition: all .6s var(--ease-out) 1.8s; }
.module.is-in .mv-confirm { opacity: 1; transform: none; }

.mv-cal-days { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; font-size: .78rem; color: var(--faint); margin-bottom: 8px; }
.mv-cal-body { position: relative; height: 300px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
    background: repeating-linear-gradient(to bottom, rgba(255, 244, 232, .04) 0 1px, transparent 1px 30px); border-radius: 12px; }
.mv-cal-body i { position: absolute; width: calc(100% / 6 - 6px); right: calc(var(--x) * 100% / 6 + 3px); top: calc(var(--y) * 1%); height: calc(var(--h) * 1%);
    border-radius: 8px; background: color-mix(in srgb, var(--c) 35%, transparent); border-right: 3px solid var(--c);
    opacity: 0; transform: scale(.8); transform-origin: top; transition: opacity .5s, transform .7s var(--ease-out); }
.module.is-in .mv-cal-body i { opacity: 1; transform: none; }
.mv-cal-body i.is-new { transition-delay: 1.8s !important; box-shadow: 0 0 0 2px var(--champagne), 0 0 30px rgba(231, 201, 150, .6); }

.mv-profile-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.mv-profile-head b { display: block; font-size: 1.1rem; } .mv-profile-head small { color: var(--champagne); font-size: .8rem; }
.mv-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.mv-profile-stats div { padding: 10px; border-radius: 12px; background: rgba(255, 244, 232, .04); }
.mv-profile-stats small { display: block; font-size: .7rem; color: var(--faint); } .mv-profile-stats b { font-size: 1.05rem; }
.mv-timeline { display: grid; gap: 8px; }
.mv-timeline span { position: relative; padding: 9px 14px 9px 0; padding-right: 18px; font-size: .85rem; border-right: 3px solid var(--c); background: rgba(255, 244, 232, .03); border-radius: 8px;
    opacity: 0; transform: translateX(-16px); transition: all .6s var(--ease-out); }
.module.is-in .mv-timeline span { opacity: 1; transform: none; }

.mv-otp { text-align: center; }
.mv-otp > small { color: var(--muted); }
.mv-otp-boxes { display: flex; justify-content: center; gap: 10px; margin: 16px 0 22px; direction: ltr; }
.mv-otp-boxes span { width: 52px; height: 60px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; border: 1px solid var(--line-strong);
    color: transparent; transition: color .3s, border-color .3s, background-color .3s; }
.module.is-in .mv-otp-boxes span { color: var(--pearl); border-color: var(--champagne); background: rgba(231, 201, 150, .08); }
.mv-ticket { text-align: right; padding: 16px; border-radius: 16px; border: 1px dashed var(--line-strong); display: grid; gap: 4px; opacity: 0; transform: translateY(14px); transition: all .6s var(--ease-out) 1.1s; }
.module.is-in .mv-ticket { opacity: 1; transform: none; }
.mv-ticket small { color: var(--muted); }
.mv-cancel { justify-self: start; margin-top: 8px; font-size: .78rem; padding: 5px 12px; border-radius: 99px; color: #f2a0b8; border: 1px solid rgba(242, 160, 184, .35); }

.mv-menu { display: grid; gap: 10px; }
.mv-menu div { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255, 244, 232, .035); border-right: 4px solid var(--c);
    opacity: 0; transform: translateY(16px) rotateX(20deg); transition: all .7s var(--ease-out); }
.mv-menu small { grid-column: 1; color: var(--faint); font-size: .75rem; }
.mv-menu em { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-weight: 800; color: var(--champagne); }
.module.is-in .mv-menu div { opacity: 1; transform: none; }

.mv-staff { display: grid; gap: 14px; }
.mv-staff div { display: grid; grid-template-columns: 40px 60px 1fr 34px; gap: 12px; align-items: center; opacity: 0; transform: translateX(-20px); transition: all .6s var(--ease-out); }
.mv-staff .st-avatar { width: 40px; height: 40px; border-radius: 13px; }
.mv-staff i { height: 8px; border-radius: 8px; background: rgba(255, 244, 232, .06); position: relative; overflow: hidden; }
.mv-staff i::after { content: ""; position: absolute; inset: 0 0 0 auto; width: calc(var(--v) * 100%); background: var(--metal); border-radius: 8px; transform: scaleX(0); transform-origin: right; transition: transform 1.2s var(--ease-out); transition-delay: inherit; }
.mv-staff em { font-style: normal; font-weight: 800; color: var(--champagne); }
.module.is-in .mv-staff div { opacity: 1; transform: none; }
.module.is-in .mv-staff i::after { transform: none; }

.mv-eq { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 22px; }
.mv-eq span { flex: 1; padding: 10px; border-radius: 14px; background: rgba(255, 244, 232, .04); text-align: center; }
.mv-eq small { display: block; color: var(--faint); font-size: .72rem; } .mv-eq b { font-size: 1.05rem; }
.mv-eq .neg b { color: #f2a0b8; } .mv-eq .pos { background: rgba(127, 212, 176, .1); } .mv-eq .pos b { color: var(--mint); }
.mv-eq em { font-family: var(--serif); font-style: normal; font-size: 1.6rem; color: var(--champagne); }
.mv-bars { height: 170px; display: flex; align-items: flex-end; gap: 14px; direction: ltr; }
.mv-bars i { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; gap: 4px; }
.mv-bars i::before, .mv-bars i::after { content: ""; flex: 1; border-radius: 6px 6px 2px 2px; transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s var(--ease-out); transition-delay: inherit; }
.mv-bars i::before { height: calc(var(--r) * 100%); background: linear-gradient(to top, rgba(231, 201, 150, .3), var(--champagne)); }
.mv-bars i::after { height: calc(var(--e) * 100%); background: linear-gradient(to top, rgba(194, 71, 127, .3), var(--orchid)); }
.module.is-in .mv-bars i::before, .module.is-in .mv-bars i::after { transform: none; }

.heatmap.mini { grid-template-columns: 26px repeat(10, 1fr); gap: 4px; }
.heatmap.mini .hc { border-radius: 5px; }

.mv-chat { display: grid; gap: 12px; font-size: .88rem; }
.mv-chat span { padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: rgba(255, 244, 232, .07); max-width: 88%; opacity: 0; transform: translateY(14px) scale(.96); transform-origin: bottom right; transition: all .6s var(--ease-out); }
.mv-chat span.me { justify-self: end; border-radius: 18px 18px 4px 18px; background: rgba(231, 201, 150, .18); transform-origin: bottom left; }
.module.is-in .mv-chat span { opacity: 1; transform: none; }
.module.is-in .mv-chat span:nth-child(2) { transition-delay: .9s; } .module.is-in .mv-chat span:nth-child(3) { transition-delay: 1.6s; }

.mv-roles { display: grid; gap: 6px; font-size: .82rem; }
.mv-roles-row { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 244, 232, .03); }
.mv-roles-row.head { background: none; color: var(--muted); font-size: .76rem; text-align: center; }
.mv-roles-row i { justify-self: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255, 244, 232, .05); display: grid; place-items: center; font-style: normal; }
.mv-roles-row i.y::after, .mv-roles-row i.p::after { font-family: "bootstrap-icons"; opacity: 0; transform: scale(.4); transition: all .5s var(--ease-out); }
.mv-roles-row i.y::after { content: "\F26E"; color: var(--mint); }
.mv-roles-row i.p::after { content: "\F4DA"; color: var(--champagne); }
.module.is-in .mv-roles-row i::after { opacity: 1; transform: none; }
.module.is-in .mv-roles-row:nth-child(3) i::after { transition-delay: .3s; } .module.is-in .mv-roles-row:nth-child(4) i::after { transition-delay: .5s; } .module.is-in .mv-roles-row:nth-child(5) i::after { transition-delay: .7s; }

.mv-branches { position: relative; width: min(420px, 100%); height: 300px; }
.mv-branches > div { position: absolute; inset-inline: 0; height: 140px; border-radius: 22px; padding: 22px; display: grid; align-content: start; gap: 4px;
    top: calc(var(--i) * 70px); transform: translateY(40px) scale(.9); opacity: 0; transition: all .8s var(--ease-out); box-shadow: var(--shadow-deep); }
.mv-branches > div:nth-child(2) { inset-inline: 20px; } .mv-branches > div:nth-child(3) { inset-inline: 40px; }
.mv-branches i { font-size: 1.4rem; color: var(--champagne); } .mv-branches small { color: var(--muted); }
.module.is-in .mv-branches > div { transform: none; opacity: 1; }

.mv-code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; display: grid; gap: 10px; text-align: left; }
.mv-code span { opacity: 0; transform: translateX(-14px); transition: all .5s var(--ease-out); }
.mv-code em { font-style: normal; color: var(--champagne); margin-right: 10px; }
.mv-code .ok { color: var(--mint); }
.module.is-in .mv-code span { opacity: 1; transform: none; }

/* before / after */
.compare-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 30px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-deep); }
.compare-side { min-width: 0; padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; }
.compare-side h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 0 0 18px; display: flex; gap: 10px; align-items: center; }
.compare-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.compare-side li { display: flex; gap: 10px; align-items: center; }
.compare-side.before { background: repeating-linear-gradient(-45deg, #1a1419 0 14px, #171116 14px 28px); color: rgba(247, 238, 230, .7); }
.compare-side.before li::before { content: "\F62A"; font-family: "bootstrap-icons"; color: #f2a0b8; }
.compare-side.after { background: linear-gradient(135deg, #2a1024, #3a1830 50%, #2a1a14); }
.compare-side.after li::before { content: "\F26A"; font-family: "bootstrap-icons"; color: var(--mint); }
.compare-side.after h3 i { color: var(--champagne); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.faq-grid .lx-head { position: sticky; top: 120px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border-radius: 20px; padding: 0 22px; }
.faq-item summary { cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; list-style: none; padding: 20px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--champagne); transition: transform .4s var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 20px; color: var(--muted); line-height: 1.9; animation: faqIn .5s var(--ease-out); }
.faq-item a { color: var(--champagne); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* ==========================================================================
   CUSTOMIZE
   ========================================================================== */
.cz-hero-swatches { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
.cz-hero-swatches i { width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 16px 40px -14px var(--a); animation: swatchFloat 5s var(--ease-io) infinite; }
.cz-hero-swatches i:nth-child(2) { animation-delay: -1s; } .cz-hero-swatches i:nth-child(3) { animation-delay: -2s; } .cz-hero-swatches i:nth-child(4) { animation-delay: -3s; } .cz-hero-swatches i:nth-child(5) { animation-delay: -4s; }
@keyframes swatchFloat { 50% { transform: translateY(-12px) rotate(-6deg); } }

.studio-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.studio-controls { border-radius: 28px; padding: 24px; display: grid; gap: 22px; position: sticky; top: 100px; }
.studio-controls fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.studio-controls legend { font-weight: 800; font-size: .95rem; margin-bottom: 12px; padding: 0; }
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-options button, .theme-options label {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 244, 232, .03);
    font-size: .84rem; font-weight: 600; cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; text-align: right; color: var(--pearl); transition: border-color .3s, background-color .3s, transform .3s var(--ease-out);
}
.theme-options span { width: 26px; height: 26px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--bg) 0 30%, var(--a) 30% 70%, var(--b) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.theme-options .rainbow span { background: conic-gradient(#f43f5e, #f59e0b, #10b981, #0ea5e9, #8b5cf6, #f43f5e); }
.theme-options [aria-checked="true"], .theme-options label:has(input:checked) { border-color: var(--champagne); background: rgba(231, 201, 150, .1); transform: translateY(-2px); }
.theme-options label input { position: absolute; opacity: 0; pointer-events: none; }
.theme-options label:has(input:focus-visible) { outline: 2px solid var(--champagne); outline-offset: 2px; }
.color-pick { display: flex; gap: 12px; align-items: center; font-size: .82rem; color: var(--muted); cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; }
.color-pick input { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 14px; background: none; cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; flex: none; }
.color-pick input::-webkit-color-swatch-wrapper { padding: 0; } .color-pick input::-webkit-color-swatch { border: 0; border-radius: 14px; }
.studio-input { width: 100%; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(255, 244, 232, .04); color: var(--pearl); font: inherit; }
.studio-input:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 4px rgba(231, 201, 150, .12); }
.studio-modules { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-modules label, .module-chips label { cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; }
.studio-modules input, .module-chips input { position: absolute; opacity: 0; pointer-events: none; }
.studio-modules span, .module-chips span {
    display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: .82rem; color: var(--muted);
    transition: all .3s var(--ease-out);
}
.studio-modules input:checked + span, .module-chips input:checked + span { color: #1a0d14; background: var(--metal); border-color: transparent; }
.studio-modules input:focus-visible + span, .module-chips input:focus-visible + span { outline: 2px solid var(--champagne); outline-offset: 2px; }
.seg { display: inline-flex; padding: 4px; border-radius: 99px; background: rgba(255, 244, 232, .05); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 8px 16px; border-radius: 99px; font-size: .84rem; cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; color: var(--muted); display: flex; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--pearl); color: #1a0d14; font-weight: 700; }

.studio-preview {
    --sp-accent: #872e59; --sp-accent-2: #e7c996; --sp-bg: #14090f; --sp-surface: #22121e; --sp-ink: #f7eee6; --sp-muted: rgba(247, 238, 230, .6); --sp-line: rgba(255, 244, 232, .08);
    position: relative; padding: 28px; border-radius: 30px; background: var(--sp-bg); border: 1px solid var(--line-strong); box-shadow: var(--shadow-deep);
    min-height: 520px; transition: background-color .6s var(--ease-out); color: var(--sp-ink); overflow: hidden;
}
.studio-preview * { transition: background-color .5s, color .5s, border-color .5s, opacity .4s, transform .5s var(--ease-out), max-height .5s var(--ease-out); }
.sp-app { display: grid; grid-template-columns: 200px 1fr; border-radius: 20px; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--sp-line); min-height: 440px; margin-left: 110px; }
.sp-side { padding: 18px 12px; display: grid; align-content: start; gap: 4px; border-left: 1px solid var(--sp-line); }
.sp-brand { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.sp-brand b { font-size: .95rem; }
.sp-brand.small b { font-size: .8rem; }
.sp-logo { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2)); color: #fff; font-weight: 800; flex: none; }
.sp-nav { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 11px; font-size: .8rem; color: var(--sp-muted); max-height: 40px; overflow: hidden; }
.sp-nav.is-on { background: color-mix(in srgb, var(--sp-accent) 18%, transparent); color: var(--sp-ink); font-weight: 700; }
.sp-nav.is-off, [data-mod-block].is-off { opacity: 0; max-height: 0; padding-block: 0; margin: 0; transform: translateX(10px); pointer-events: none; }
.sp-main { padding: 18px; display: grid; align-content: start; gap: 14px; }
.sp-top { display: flex; justify-content: space-between; align-items: center; }
.sp-btn { padding: 7px 14px; border-radius: 99px; background: var(--sp-accent); color: #fff; font-size: .78rem; font-weight: 700; }
.sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.sp-kpis div { padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--sp-accent) 8%, transparent); border: 1px solid var(--sp-line); max-height: 90px; }
.sp-kpis small { display: block; font-size: .7rem; color: var(--sp-muted); } .sp-kpis b { font-size: 1.1rem; }
.sp-chart { height: 130px; display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--sp-line); max-height: 130px; direction: ltr; }
.sp-chart i { flex: 1; height: calc(var(--v) * 100%); border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, color-mix(in srgb, var(--sp-accent) 30%, transparent), var(--sp-accent)); }
.sp-chart i:last-child { background: linear-gradient(to top, color-mix(in srgb, var(--sp-accent-2) 40%, transparent), var(--sp-accent-2)); }
.sp-list { display: grid; gap: 8px; max-height: 120px; }
.sp-list span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: .8rem; background: color-mix(in srgb, var(--sp-ink) 4%, transparent); }
.sp-list i { width: 4px; height: 20px; border-radius: 4px; background: var(--sp-accent); }
.sp-list em { margin-right: auto; font-style: normal; font-weight: 700; color: var(--sp-accent); }
.studio-preview[data-mode="dark"] .sp-list em { color: var(--sp-accent-2); }
.sp-empty { padding: 30px; text-align: center; color: var(--sp-muted); }
.sp-phone { position: absolute; left: 22px; bottom: 26px; width: 190px; height: 380px; border-radius: 34px; padding: 9px; background: #0e0a0d; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sp-phone-screen { height: 100%; border-radius: 26px; padding: 34px 14px 14px; background: var(--sp-surface); display: flex; flex-direction: column; gap: 8px; }
.sp-phone-screen > small { color: var(--sp-muted); font-size: .72rem; }
.sp-chip { padding: 9px 12px; border-radius: 12px; font-size: .74rem; border: 1px solid var(--sp-line); }
.sp-chip.on { border-color: var(--sp-accent); background: color-mix(in srgb, var(--sp-accent) 14%, transparent); }
.sp-cta { margin-top: auto; text-align: center; padding: 10px; border-radius: 99px; background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2)); color: #fff; font-weight: 800; font-size: .8rem; }

.cz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cz-card { border-radius: 22px; padding: 24px; transition: transform .6s var(--ease-out), border-color .4s; }
.cz-card:hover { transform: translateY(-6px); border-color: rgba(231, 201, 150, .3); }
.cz-card i { font-size: 1.6rem; color: var(--champagne); }
.cz-card h3 { font-size: 1.05rem; margin: 14px 0 6px; }
.cz-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.8; }
.how-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.how-steps li { border-radius: 24px; padding: 28px; position: relative; }
.how-steps li > span { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-weight: 850; font-size: 1.2rem; background: var(--metal); color: #1a0d14; margin-bottom: 16px; }
.how-steps h3 { margin: 0 0 8px; font-size: 1.1rem; } .how-steps p { margin: 0; color: var(--muted); font-size: .9rem; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.ab-visual { position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: var(--shadow-deep); }
.ab-visual img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
.ab-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 30%, rgba(12, 6, 16, .75)); }
.ab-f1 { bottom: 24px; right: 24px; z-index: 2; }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fact { border-radius: 24px; padding: 28px 22px; text-align: center; }
.fact b { display: block; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 850; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.2; }
.fact span { color: var(--muted); font-size: .88rem; }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.value-card { border-radius: 26px; padding: 30px; }
.value-card i { font-size: 1.8rem; color: var(--champagne); }
.value-card h3 { margin: 14px 0 8px; font-size: 1.2rem; } .value-card p { margin: 0; color: var(--muted); line-height: 1.9; }

.timeline { position: relative; max-width: 860px; margin-inline: auto; display: grid; gap: 22px; }
.timeline-line { position: absolute; top: 10px; bottom: 10px; right: 27px; width: 2px; background: var(--line); }
.timeline-line span { position: absolute; inset: 0; background: var(--metal); transform-origin: top; transform: scaleY(0); }
.tl-item { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.tl-dot { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 1.3rem; background: var(--ink-1); border: 1px solid var(--line-strong); color: var(--muted); z-index: 1; transition: all .6s var(--ease-out); }
.tl-item.is-on .tl-dot { background: var(--metal); color: #1a0d14; border-color: transparent; box-shadow: 0 0 0 8px rgba(231, 201, 150, .1); }
.tl-item > div { border-radius: 22px; padding: 20px 24px; }
.tl-item small { color: var(--champagne); font-weight: 700; font-size: .78rem; }
.tl-item h3 { margin: 4px 0 6px; font-size: 1.15rem; } .tl-item p { margin: 0; color: var(--muted); }
.tech-stack { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tech-stack span { display: inline-flex; gap: 10px; align-items: center; padding: 16px 22px; border-radius: 18px; font-weight: 700; }
.tech-stack i { color: var(--champagne); font-size: 1.2rem; }

/* ==========================================================================
   BUY
   ========================================================================== */
.buy { padding-bottom: clamp(80px, 10vw, 140px); }
.buy-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.buy-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.buy-steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: .9rem; cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; transition: all .4s var(--ease-out); }
.buy-steps span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 244, 232, .06); flex: none; transition: all .4s var(--ease-out); }
.buy-steps li.is-active { border-color: var(--champagne); color: var(--pearl); background: rgba(231, 201, 150, .06); }
.buy-steps li.is-active span, .buy-steps li.is-done span { background: var(--metal); color: #1a0d14; }
.buy-steps li.is-done { color: var(--pearl); }
.buy-form { border-radius: 30px; padding: clamp(22px, 3.4vw, 40px); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.buy-step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.buy-step.is-active { display: grid; gap: 16px; }
.buy-step legend { float: right; width: 100%; margin-bottom: 4px; padding: 0; }
.buy-step legend + * { clear: both; }
.buy-step .lx-muted { margin: -6px 0 6px; }
.packages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.package { position: relative; border-radius: 22px; cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; transition: transform .5s var(--ease-out), border-color .3s, background-color .3s; }
.package input { position: absolute; opacity: 0; pointer-events: none; }
.pk-body { display: grid; gap: 4px; padding: 22px; }
.pk-icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(231, 201, 150, .12); color: var(--champagne); font-size: 1.3rem; margin-bottom: 8px; transition: all .4s; }
.pk-body b { font-size: 1.2rem; } .pk-body small { color: var(--muted); }
.pk-body ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: .86rem; color: var(--muted); }
.pk-body li::before { content: "\F26A"; font-family: "bootstrap-icons"; color: var(--mint); margin-left: 8px; }
.pk-badge { position: absolute; top: 16px; left: 16px; font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: var(--metal); color: #1a0d14; }
.package:hover { transform: translateY(-4px); }
.package:has(input:checked) { border-color: var(--champagne); background: linear-gradient(160deg, rgba(231, 201, 150, .14), rgba(231, 201, 150, .02)); box-shadow: 0 30px 70px -40px rgba(231, 201, 150, .6); }
.package:has(input:checked) .pk-icon { background: var(--metal); color: #1a0d14; }
.package:has(input:focus-visible) { outline: 2px solid var(--champagne); outline-offset: 3px; }
.stepper { display: flex; align-items: stretch; border-radius: 14px; border: 1px solid var(--line-strong); overflow: hidden; height: 50px; }
.stepper button { width: 50px; border: 0; background: rgba(255, 244, 232, .05); font-size: 1.3rem; cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; color: var(--pearl); }
.stepper button:hover { background: rgba(231, 201, 150, .15); }
.stepper input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0 !important; text-align: center; height: 100% !important; box-shadow: none !important; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy-sub { font-weight: 800; margin-top: 6px; } .buy-sub small { color: var(--faint); font-weight: 400; }
.theme-options.compact { grid-template-columns: repeat(3, 1fr); }
.module-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-field select, .lx-field textarea {
    width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(255, 244, 232, .04); color: var(--pearl); font: inherit; font-size: .95rem;
}
.lx-field select { height: 50px; padding-block: 0; }
.lx-field select option { background: var(--ink-2); }
.lx-field textarea { resize: vertical; min-height: 110px; line-height: 1.8; }
.lx-field select:focus, .lx-field textarea:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 4px rgba(231, 201, 150, .12); }
.lx-field textarea::placeholder { color: rgba(247, 238, 230, .28); }
.lx-check { display: flex; gap: 10px; align-items: center; font-size: .9rem; color: var(--muted); cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; }
.lx-check input { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }
.lx-check input[aria-invalid="true"] { outline: 2px solid #f2a0b8; outline-offset: 2px; }
.buy-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.buy-nav [data-next], .buy-nav [data-submit] { margin-inline-start: auto; }
.buy-form .lx-form-error { margin-top: 16px; }

.buy-success { border-radius: 30px; padding: clamp(28px, 4vw, 50px); text-align: center; display: grid; justify-items: center; gap: 8px; outline: none; }
.buy-success[hidden] { display: none; }
.buy-success .success-mark { width: 96px; height: 96px; }
.buy-success.is-in .success-mark circle { transition: stroke-dashoffset .9s var(--ease-out) .2s; stroke-dashoffset: 0; }
.buy-success.is-in .success-mark path { transition: stroke-dashoffset .5s var(--ease-out) .9s; stroke-dashoffset: 0; }
.tracking { font-size: 1.6rem; font-weight: 800; letter-spacing: .08em; padding: 10px 22px; border-radius: 16px; background: rgba(231, 201, 150, .1); color: var(--champagne); border: 1px dashed rgba(231, 201, 150, .4); direction: ltr; user-select: all; }
.next-steps { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; text-align: right; }
.next-steps li { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.next-steps i { color: var(--champagne); }

.buy-summary { position: sticky; top: 100px; border-radius: 26px; padding: 20px; }
.sum-preview { position: relative; height: 150px; border-radius: 18px; padding: 18px; margin-bottom: 18px; overflow: hidden; background: var(--bg); transition: background-color .5s;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; border: 1px solid var(--line); }
.sum-preview::before { content: ""; position: absolute; inset: auto -20% -60% 30%; height: 140%; border-radius: 50%; background: radial-gradient(closest-side, var(--a), transparent); opacity: .7; transition: background .5s; }
.sum-logo { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--a), var(--b)); }
.sum-logo .lx-logo { width: 26px; height: 26px; }
.sum-preview b { position: relative; color: var(--b); font-size: 1.1rem; mix-blend-mode: normal; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.sum-preview i { position: relative; height: 6px; border-radius: 6px; background: var(--a); opacity: .6; width: 70%; }
.sum-preview i:nth-of-type(2) { width: 50%; opacity: .4; } .sum-preview i:nth-of-type(3) { width: 30%; background: var(--b); opacity: .6; }
.buy-summary dl { margin: 0; display: grid; gap: 12px; }
.buy-summary dl div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.buy-summary dt { color: var(--faint); font-size: .76rem; } .buy-summary dd { margin: 0; font-weight: 700; font-size: .92rem; }
.sum-note { margin: 14px 0 0; font-size: .8rem; color: var(--muted); display: flex; gap: 8px; }
.sum-note i { color: var(--champagne); }

/* ---------- Studio (shared) extras ---------- */
.studio-count { font-weight: 600; font-size: .78rem; color: var(--champagne); margin-right: 4px; }
.sp-extras { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-extras:empty { display: none; }
.sp-extras span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 99px; font-size: .72rem;
    color: var(--sp-ink); background: color-mix(in srgb, var(--sp-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sp-accent) 30%, transparent); }
.sp-phone.is-off { opacity: 0; transform: translateY(20px) scale(.96); pointer-events: none; }
.studio-controls .lx-btn-block { margin-top: 4px; }

/* ---------- Studio inside the purchase form (step 2) ---------- */
.buy-grid.is-studio { grid-template-columns: minmax(0, 1fr); }
.buy-grid.is-studio .buy-summary { display: none; }
.buy-step-studio .studio-grid { margin-top: 6px; }
.buy-step-studio .studio-controls { top: 96px; background: rgba(255, 244, 232, .03); }
.buy-step-studio [data-studio-note] i { color: var(--champagne); margin-left: 6px; }
.sum-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }

/* ==========================================================================
   DEMO request
   ========================================================================== */
.demo-section { padding-bottom: clamp(80px, 10vw, 140px); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 24px; align-items: start; }
.demo-side { position: sticky; top: 100px; }
.demo-agenda { border-radius: 28px; padding: clamp(22px, 3vw, 34px); }
.agenda { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 14px; position: relative; }
.agenda::before { content: ""; position: absolute; top: 20px; bottom: 20px; right: 19px; width: 2px; background: var(--line); }
.agenda li { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.agenda li > span { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; font-weight: 800; background: var(--ink-1); border: 1px solid var(--line-strong); color: var(--champagne); z-index: 1; }
.agenda b { display: block; } .agenda small { color: var(--muted); font-size: .84rem; }
.demo-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-facts div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: rgba(255, 244, 232, .04); text-align: center; font-size: .8rem; }
.demo-facts i { color: var(--champagne); font-size: 1.2rem; }
.demo-main .buy-form { display: grid; gap: 16px; }
.demo-block { border: 0; margin: 0; padding: 0; min-width: 0; }
.format-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.format { border-radius: 18px; cursor: url("/assets/images/cursor-hand.svg") 11 2, pointer; transition: border-color .3s, background-color .3s, transform .4s var(--ease-out); }
.format input { position: absolute; opacity: 0; pointer-events: none; }
.format > span { display: grid; gap: 2px; padding: 16px; }
.format i { font-size: 1.4rem; color: var(--champagne); margin-bottom: 4px; }
.format small { color: var(--muted); font-size: .8rem; }
.format:has(input:checked) { border-color: var(--champagne); background: rgba(231, 201, 150, .1); transform: translateY(-2px); }
.format:has(input:focus-visible) { outline: 2px solid var(--champagne); outline-offset: 3px; }
@media (max-width: 1023px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } .demo-side { position: static; order: 2; } }
@media (max-width: 767px) { .format-options { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
    .cz-grid { grid-template-columns: repeat(2, 1fr); }
    .studio-grid { grid-template-columns: minmax(0, 1fr); }
    .studio-controls { position: static; }
    .buy-grid { grid-template-columns: minmax(0, 1fr); }
    .buy-summary { position: static; order: -1; display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
    .sum-preview { margin: 0; }
    .sum-note { grid-column: 1 / -1; margin: 0; }
}
@media (max-width: 1023px) {
    .page-hero { padding-top: 130px; min-height: 0; }
    .page-hero-grid, .module-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
    .module.alt .module-copy { order: 0; }
    .module-orbit { width: min(420px, 100%); }
    .faq-grid .lx-head { position: static; }
    .facts-grid { grid-template-columns: repeat(2, 1fr); }
    .how-steps { grid-template-columns: minmax(0, 1fr); }
    .sp-app { margin-left: 0; grid-template-columns: 160px 1fr; }
    .sp-phone { display: none; }
}
@media (max-width: 767px) {
    .page-title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .module-nav { top: 72px; padding: 0 12px; }
    .module-visual > .glass { padding: 18px; }
    .mv-cal-body { height: 240px; }
    .orbit-items span { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 1.05rem; border-radius: 14px; }
    .orbit-core { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
    .compare-box { grid-template-columns: minmax(0, 1fr); }
    .compare-side li { font-size: .88rem; }
    .cz-grid, .values-grid { grid-template-columns: minmax(0, 1fr); }
    .theme-options, .theme-options.compact { grid-template-columns: repeat(2, 1fr); }
    .studio-preview { padding: 14px; min-height: 0; }
    .sp-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .sp-side { display: flex; overflow-x: auto; border: 0; border-bottom: 1px solid var(--sp-line); gap: 6px; padding: 12px; }
    .sp-side .sp-brand { margin: 0 0 0 8px; flex: none; }
    .sp-nav { flex: none; }
    .sp-nav.is-off { display: none; }
    .packages { grid-template-columns: minmax(0, 1fr); }
    .buy-steps { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .buy-steps li { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: .72rem; text-align: center; }
    .buy-summary { grid-template-columns: minmax(0, 1fr); }
    .buy-nav .lx-btn { flex: 1; }
    .tl-item { grid-template-columns: 44px 1fr; gap: 14px; }
    .tl-dot { width: 44px; height: 44px; border-radius: 14px; font-size: 1.05rem; }
    .timeline-line { right: 21px; }
}

/* Reduced motion: every scene in its final state */
@media (prefers-reduced-motion: reduce) {
    .orbit-items, .orbit-items span i, .cz-hero-swatches i, .cta-glow { animation: none; }
    .module [style], .module .mv-confirm, .module .mv-ticket { opacity: 1 !important; transform: none !important; }
}
html.rm .timeline-line span { transform: none; }
@media (max-width: 359px) {
    .page-hero-grid,.module-grid,.demo-grid,.buy-grid,.studio-grid { min-width:0; }
    .buy-form,.buy-summary,.buy-nav,.studio-controls { min-width:0; }
    .buy-nav { flex-wrap:wrap; }
    .buy-nav .lx-btn { min-width:0; }
    .theme-options,.theme-options.compact { grid-template-columns:minmax(0,1fr); }
    .sp-app,.studio-preview { min-width:0; }
}