:root {
  /* Imperstar brand book: background, accent, secondary accent, text on dark */
  --brand-bg: #0b1220;
  --brand-accent: #1e88e5;
  --brand-accent-2: #4fc3f7;
  --brand-text: #f5f7fb;
  --navy-950: #050b18;
  --navy-900: var(--brand-bg);
  --navy-800: #0b2348;
  --blue-600: #1769e0; /* darker shade kept for small text on white (contrast) */
  --blue-500: var(--brand-accent);
  --blue-100: #e8f1ff;
  --ink: #10213b;
  --muted: #607089;
  --line: #d8e2ef;
  --surface: #ffffff;
  --page: #f4f7fb;
  --danger: #b42318;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(12, 37, 75, 0.12);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html { min-width: 320px; background: var(--page); overflow-x: hidden; }
body { margin: 0; min-height: 100svh; background: var(--page); color: var(--ink); overflow-x: hidden; }
body.dark { background: radial-gradient(circle at 50% -10%, #123263 0, var(--navy-900) 35%, var(--navy-950) 100%); color: var(--brand-text); }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.app { width: min(100%, 920px); min-height: 100svh; margin: 0 auto; padding: env(safe-area-inset-top) 18px env(safe-area-inset-bottom); }
.topbar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54px; }
.brand { font-size: 18px; font-weight: 700; letter-spacing: .08em; }
.brand sup { font-size: 8px; vertical-align: top; }
.brand b { color: var(--blue-500); }
.back { position: absolute; left: 0; display: grid; width: 44px; min-height: 48px; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: currentColor; cursor: pointer; }
.progress { position: absolute; right: 0; width: min(42%, 210px); height: 5px; overflow: hidden; border-radius: 99px; background: rgba(96, 112, 137, .2); }
.progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue-500); transition: width .22s ease; }

main { min-height: calc(100svh - 100px); }
.screen { width: min(100%, 620px); margin: 0 auto; padding: 18px 0 34px; animation: enter .22s ease both; }
.screen-intro { width: min(100%, 880px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 34px; align-items: center; padding-top: 12px; }
.intro-hero-media { display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.28); background: #d9e1e9; aspect-ratio: 16 / 9; }
.hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-copy { min-width: 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 18ch; margin-bottom: 16px; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.04; letter-spacing: -.035em; }
h2 { margin-bottom: 14px; font-size: clamp(28px, 4vw, 36px); line-height: 1.12; letter-spacing: -.025em; }
h2[tabindex="-1"]:focus { outline: none; }
.lead { margin-bottom: 16px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.lead strong { color: var(--ink); font-weight: 800; }
body.dark .lead { color: #d9e5f6; }
.screen-intro strong { color: #fff; font-weight: 800; background: linear-gradient(transparent 66%, rgba(47,127,241,.46) 66%); }
.intro-kicker { display: inline-flex; margin-bottom: 10px; padding: 6px 10px; border: 1px solid rgba(117,174,255,.45); border-radius: 99px; background: rgba(47,127,241,.14); color: var(--brand-accent-2); font-size: 12px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.question-explainer { margin-bottom: 12px; color: #bdcae0; font-size: 15px; line-height: 1.48; }
/* Two numbered steps instead of one paragraph: the meeting promise must not get lost at the end of a sentence */
.intro-steps { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.intro-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; color: #bdcae0; font-size: 15px; line-height: 1.35; }
.intro-steps strong { color: #fff; font-weight: 800; }
.intro-step-num { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--blue-600); color: #fff; font-size: 13px; font-weight: 800; }
.hint, .format-line, .meta-line, .duration-note, .tz-note { color: var(--muted); font-size: 14px; line-height: 1.4; }
body.dark .hint, body.dark .format-line { color: #aebdd3; }
.hint { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.format-line { margin: 10px 0 0; text-align: center; }
.eyebrow { margin-bottom: 10px; color: var(--blue-600); font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.question-help { margin: -4px 0 16px; color: var(--muted); font-size: 15px; line-height: 1.48; }

.cta, .secondary, .option, .slot, .link-btn { min-height: 48px; border-radius: 13px; cursor: pointer; }
.cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border: 1px solid #4a92f6; background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); box-shadow: 0 10px 26px rgba(23,105,224,.28); color: #fff; font-weight: 750; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(23,105,224,.34); }
.cta:disabled { cursor: wait; opacity: .65; transform: none; }
.secondary { padding: 11px 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 650; }
.link-btn { padding: 8px 4px; border: 0; background: transparent; color: var(--blue-600); }

.options { display: grid; gap: 11px; }
.option { --icon-a: #1769e0; --icon-b: #6557df; position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 13px; align-items: center; width: 100%; padding: 12px 50px 12px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; line-height: 1.35; box-shadow: 0 6px 18px rgba(12,37,75,.055); transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.option[data-answer="exploring"] { --icon-a: #138fa9; --icon-b: #5860df; }
.option-icon { position: relative; isolation: isolate; display: grid; width: 46px; height: 46px; overflow: hidden; place-items: center; border: 1px solid rgba(74,117,196,.2); border-radius: 14px; background: #f7faff; color: var(--icon-a); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 14px rgba(32,86,164,.12); transition: transform .18s ease, color .18s ease, box-shadow .18s ease; }
.option-icon::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(135deg, var(--icon-a), var(--icon-b)); opacity: .11; }
.option-icon::after { content: ""; position: absolute; z-index: -1; top: -18px; right: -16px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.72); }
.option-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(20,75,150,.12)); }
.option-copy { display: grid; gap: 3px; min-width: 0; }
.option-copy strong { color: var(--ink); font-size: 16px; font-weight: 780; line-height: 1.25; }
.option-copy small { color: var(--muted); font-size: 13px; font-weight: 450; line-height: 1.35; }
.option::after { content: ""; position: absolute; top: 50%; right: 17px; width: 19px; height: 19px; border: 2px solid #a8b6c9; border-radius: 50%; box-shadow: 0 0 0 4px #f3f6fa; transform: translateY(-50%); transition: border .15s ease, box-shadow .15s ease; }
.option:hover { border-color: #9abdeb; box-shadow: 0 10px 24px rgba(12,37,75,.09); transform: translateY(-1px); }
.option:hover .option-icon { transform: translateY(-1px) scale(1.03); }
.option[aria-checked="true"] { border-color: var(--icon-a); background: linear-gradient(105deg, #eef5ff, #f7f5ff); box-shadow: 0 10px 25px rgba(35,96,190,.13); }
.option[aria-checked="true"] .option-icon { border-color: transparent; background: linear-gradient(135deg, var(--icon-a), var(--icon-b)); color: #fff; box-shadow: 0 7px 18px rgba(36,93,188,.28); }
.option[aria-checked="true"] .option-icon::before { opacity: 1; }
.option[aria-checked="true"]::after { border: 6px solid var(--icon-a); background: #fff; box-shadow: 0 0 0 4px rgba(23,105,224,.1); }

.media-card { width: min(100%, 430px); aspect-ratio: 4 / 3; margin: 0 auto 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #e9eef5; box-shadow: var(--shadow); }
.media-card img { display: block; width: 100%; height: auto; object-fit: contain; }
.media-call { width: min(100%, 430px); background: #e9eef5; }
.benefit-list { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; color: var(--muted); font-size: 16px; line-height: 1.48; }
.benefit-list li { position: relative; padding-left: 30px; }
.benefit-list li::before { content: "✓"; position: absolute; top: 1px; left: 0; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: var(--blue-100); color: var(--blue-600); font-size: 13px; font-weight: 900; }
.benefit-list strong { color: var(--ink); font-weight: 780; }
.value-note { margin: 16px 0; padding: 14px 16px; border-left: 4px solid var(--blue-600); border-radius: 0 12px 12px 0; background: #eaf3ff; color: #345477; font-size: 15px; line-height: 1.48; }
.value-note strong { color: #164f9a; }
.sphere-field { display: grid; gap: 6px; margin: 8px 0 18px; }
.sphere-field label { font-size: 16px; font-weight: 700; }
.screen-about .cta:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meeting-note { margin: 0 0 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.sphere-field input { min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); font: inherit; }
.meta-line { margin-bottom: 16px; font-weight: 650; text-align: center; }
.prices { display: grid; gap: 10px; padding: 0; list-style: none; }
.prices li { display: flex; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.prices .amount { flex: 0 0 auto; font-weight: 750; }

.calendar { display: grid; gap: 16px; }
.cal-day { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 20px rgba(12,37,75,.04); }
.cal-day h3 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; font-size: 18px; }
.cal-day h3 small { color: var(--muted); font-size: 13px; font-weight: 500; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { border: 1px solid #b9cce4; background: #fff; color: var(--ink); font-weight: 700; }
.slot:hover, .slot[aria-pressed="true"] { border-color: var(--blue-600); background: var(--blue-100); color: #0b4eae; }
.cal-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.cal-loading, .cal-empty { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--muted); text-align: center; }

.chosen { display: inline-block; margin-bottom: 12px; padding: 8px 12px; border-radius: 99px; background: var(--blue-100); color: #1554a9; font-size: 14px; font-weight: 700; }
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; font-weight: 650; }
.field em { color: var(--muted); font-size: 13px; font-style: normal; font-weight: 450; }
.field input, .field select { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); outline: 0; }
.field input:focus, .field select:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(23,105,224,.14); }
.phone-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; color: var(--muted); font-size: 13px; font-weight: 450; line-height: 1.45; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue-600); }
.consent a, .foot a, .cookie-link { color: var(--blue-600); }
.err { display: none; color: var(--danger); font-size: 12px; font-weight: 550; }
.err.show, .invalid .err { display: block; }
.invalid input, .invalid select { border-color: var(--danger); }
.form-error { margin: 0; padding: 11px 13px; border-radius: 10px; background: #fff1f0; color: var(--danger); font-size: 14px; }

.foot { display: flex; justify-content: center; gap: 18px; padding: 14px 0 22px; font-size: 12px; }
body.dark .foot a, body.dark .cookie-link { color: #aebdd3; }
.cookie-link { padding: 0; border: 0; background: transparent; cursor: pointer; text-decoration: underline; }
.noscript { margin: 20px; padding: 14px; border-radius: 12px; background: #fff1f0; color: var(--danger); text-align: center; }

.cookie-panel { position: fixed; z-index: 50; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; width: min(100% - 32px, 520px); margin-left: auto; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 18px 60px rgba(5, 11, 24, .28); color: var(--ink); }
.cookie-panel h2 { margin-bottom: 8px; font-size: 20px; }
.cookie-panel p { margin-bottom: 13px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie-actions button { min-height: 48px; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .app { padding-right: 15px; padding-left: 15px; }
  .screen-intro { grid-template-columns: 1fr; gap: 15px; max-width: 600px; padding-top: 4px; }
  .intro-hero-media { aspect-ratio: 4 / 2.15; border-radius: 18px; }
  .intro-hero-media .hero-img { object-position: center 43%; }
  h1 { max-width: none; margin-bottom: 10px; font-size: 31px; }
  .screen-intro .lead { margin-bottom: 9px; font-size: 15px; line-height: 1.42; }
  .question-explainer { margin-bottom: 8px; font-size: 14px; line-height: 1.4; }
  .intro-steps { gap: 6px; margin-bottom: 10px; }
  .intro-steps li { font-size: 14px; }
  .hint { margin-bottom: 9px; }
  .format-line { font-size: 12.5px; }
}

@media (max-width: 600px) {
  .screen { padding-top: 10px; }
  .screen-intro { gap: 12px; }
  .intro-hero-media { min-height: 190px; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .benefit-list { font-size: 15px; }
}

@media (max-width: 390px) {
  .app { padding-right: 12px; padding-left: 12px; }
  .topbar { min-height: 46px; }
  h1 { font-size: 28px; }
  h2 { font-size: 27px; }
  .question-help { font-size: 14px; }
  .option { grid-template-columns: 42px 1fr; gap: 10px; padding-right: 43px; }
  .option-icon { width: 42px; height: 42px; border-radius: 12px; }
  .option-icon svg { width: 23px; height: 23px; }
  .option-copy strong { font-size: 15px; }
  .option-copy small { font-size: 12.5px; }
  .phone-row { grid-template-columns: 108px 1fr; }
}

@media (max-width: 375px) and (max-height: 700px) {
  .screen-intro { gap: 8px; padding-top: 0; }
  .intro-hero-media { height: 190px; min-height: 190px; aspect-ratio: auto; }
  .intro-hero-media .hero-img { object-position: center center; }
  .intro-kicker { margin-bottom: 5px; padding: 4px 8px; font-size: 10px; }
  h1 { margin-bottom: 7px; font-size: 23px; line-height: 1.04; }
  .screen-intro .lead { margin-bottom: 6px; font-size: 13.5px; line-height: 1.32; }
  .question-explainer { margin-bottom: 5px; font-size: 12.5px; line-height: 1.3; }
  .intro-steps { gap: 4px; margin-bottom: 6px; }
  .intro-steps li { font-size: 12.5px; }
  .hint { margin-bottom: 6px; font-size: 12px; }
  .screen-intro .cta { min-height: 48px; padding: 10px 16px; }
  .format-line { margin-top: 6px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Deploy fix 09.10: keep the progress bar clear of the centred logo on narrow screens */
.progress { width: min(42%, 210px, calc(50% - 72px)); }

/* Consent: centered dialog over a backdrop until the visitor picks an option */
.cookie-backdrop { position: fixed; z-index: 49; inset: 0; background: rgba(5, 11, 24, .62); }
.cookie-backdrop[hidden] { display: none; }
.cookie-open .cookie-panel { top: 50%; bottom: auto; left: 50%; right: auto; width: min(100% - 32px, 440px); margin: 0; transform: translate(-50%, -50%); }
html.cookie-open, html.cookie-open body { overflow: hidden; }

/* Consent notice under the submit button replaces the checkbox */
.consent-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }
.consent-note a { color: var(--blue-600); }

/* The main button of every step stays on screen: nobody has to guess that the page scrolls */
.screen-step > .cta, #submit-booking {
  position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 5;
}
.screen-step > .cta::before { content: none; }
@media (max-width: 760px) {
  /* Smaller pictures so a step fits one phone screen */
  .screen-step h2 { font-size: 24px; margin-bottom: 10px; }
  .screen-step .lead { font-size: 14.5px; line-height: 1.4; margin-bottom: 10px; }
  .benefit-list { gap: 6px; margin-bottom: 10px; font-size: 14px; line-height: 1.38; }
  .value-note { margin: 10px 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.4; }
  .meta-line { margin: 8px 0; font-size: 12.5px; }
  .prices li { padding: 11px 14px; }
}
/* clip (not hidden) keeps the page from scrolling sideways without breaking sticky buttons */
html, body { overflow-x: clip; }
/* A ring of page colour under the sticky button so text scrolling behind it never shows through */
.screen-step > .cta, #submit-booking { box-shadow: 0 10px 26px rgba(23,105,224,.28), 0 0 0 12px var(--page); }

/* Step chain 14.10: one idea, one visual, one button per screen (mobile first, 375 px) */
.intro-hero-media { aspect-ratio: 720 / 760; }
.motion-media { position: relative; overflow: hidden; }
.motion-media video, .motion-media .motion-still { display: block; width: 100%; height: 100%; object-fit: cover; }
.motion-media .motion-still { display: none; }
.sound-toggle { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 99px; background: rgba(11,18,32,.72); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.screen-session .sound-toggle { left: 10px; right: auto; }
.sound-toggle:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.step-media { width: min(100%, 460px); margin: 0 auto 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--brand-bg); box-shadow: var(--shadow); }
.screen-session .step-media { aspect-ratio: 720 / 690; max-height: 42svh; }
.step-list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: step; }
.step-list li { position: relative; padding: 10px 12px 10px 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 650; line-height: 1.35; counter-increment: step; }
.step-list li::before { content: counter(step); position: absolute; top: 50%; left: 12px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--brand-accent); color: #fff; font-size: 13px; font-weight: 800; transform: translateY(-50%); }
.caption { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.4; text-align: center; }
.caption strong { color: var(--ink); font-weight: 800; background: linear-gradient(transparent 62%, rgba(47,127,241,.28) 62%); }
.screen-see .caption { margin-bottom: 4px; }
/* Accent, not a footnote: solid green with white text stands out on the blue page and echoes the slider knob */
.caption-note { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px; margin: 6px auto 16px; padding: 9px 14px; border: 0; border-radius: 12px; background: #15803d; color: #fff; font-size: 14.5px; box-shadow: 0 6px 16px rgba(21,128,61,.28); font-weight: 650; line-height: 1.35; text-align: left; }
.caption-note strong { color: #fde047; font-weight: 900; }
.caption-note-icon { flex: none; color: #fde047; font-size: 16px; }

.compare { --pos: 50%; position: relative; width: min(100%, 360px, calc(46svh * 3 / 4)); aspect-ratio: 600 / 800; margin: 0 auto 10px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); touch-action: pan-y; }
.compare img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.compare-top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* Green handle with a thick white rim: a blue knob blended into the aura image; 58 px is an easy thumb target */
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: #16a34a; box-shadow: 0 0 0 1px rgba(255,255,255,.9); pointer-events: none; }
.compare-line::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; border: 4px solid #fff; border-radius: 50%; background: #16a34a; color: #fff; font-size: 22px; font-weight: 900; line-height: 1; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(11,18,32,.35), 0 8px 20px rgba(12,37,75,.35); }
.compare-tag { position: absolute; top: 10px; padding: 4px 8px; border-radius: 99px; background: rgba(11,18,32,.72); color: var(--brand-text); font-size: 12px; font-weight: 700; pointer-events: none; }
.compare-tag-left { left: 10px; }
.compare-tag-right { right: 10px; }
.compare-tag { transition: opacity .15s ease; }
.compare.hide-left .compare-tag-left, .compare.hide-right .compare-tag-right { opacity: 0; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare:focus-within .compare-line::after { outline: 3px solid var(--brand-accent); outline-offset: 2px; }

.kit-map { position: relative; width: 100%; margin: 0 auto 10px; overflow: hidden; border-radius: var(--radius); background: var(--brand-bg); box-shadow: var(--shadow); }
.kit-map img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; top: var(--y); left: var(--x); display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--brand-accent); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(79,195,247,.28); }
.hotspot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* 48 px touch target */
.hotspot[aria-pressed="true"] { background: var(--brand-accent-2); color: var(--brand-bg); }
.kit-caption { min-height: 1.4em; margin: 0 0 12px; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; }
.kit-includes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.price-card { margin: 0 0 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.price-card .price-name { margin-bottom: 12px; }
.price-card .kit-includes { margin: 0; }
.kit-includes li { transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.kit-includes li.is-active { background: var(--blue-600); color: #fff; box-shadow: 0 4px 12px rgba(23,105,224,.3); }
.kit-includes li { padding: 6px 10px; border-radius: 99px; background: var(--blue-100); color: #0b4eae; font-size: 13.5px; font-weight: 650; }

.price-big { margin: 4px 0 2px; color: var(--ink); font-size: 52px; font-weight: 850; line-height: 1; letter-spacing: -.03em; }
.price-name { margin-bottom: 14px; color: var(--muted); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .motion-media video, .sound-toggle { display: none; }
  .motion-media .motion-still { display: block; }
}
@media (max-width: 760px) {
  /* Near-square video in a wide box: taller box and top-weighted crop keep both faces in frame */
  .intro-hero-media { aspect-ratio: auto; height: 44svh; min-height: 190px; }
  .intro-hero-media video, .intro-hero-media .hero-img { object-position: center 18%; }
  .screen-session .step-media { max-height: 46svh; }
  .screen-session .step-media video, .screen-session .step-media .motion-still { object-position: center 12%; }
  .step-list li { padding-top: 8px; padding-bottom: 8px; font-size: 14.5px; }
  .price-big { font-size: 46px; }
}