/* v2 mechanics shared by A, B, C, D2 (layout and look live in each variant file). */
.pv { --q-accent: #111; --q-btn: #111; --q-btn-ink: #fff; --q-bg: #fff; --q-line: rgba(0,0,0,.12); --q-muted: #666; }
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }
.pv h1, .pv h2, .pv h3, .pv h4 { margin: 0; font-style: normal; }
.pv p { color: inherit; }
.pv img { max-width: 100%; height: auto; display: block; }
.pv video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #111; }
.pv a { -webkit-text-fill-color: currentColor; }
.pv [hidden] { display: none !important; }

/* quiz */
.pv .q { position: relative; background: var(--q-bg); overflow: hidden; }
.pv .q-bar { height: 4px; background: var(--q-line); }
.pv .q-bar span { display: block; height: 100%; width: 0; background: var(--q-accent); transition: width .3s ease; }
.pv .q-step { border: 0; padding: 18px 0 0; margin: 0; min-width: 0; }
.pv .q-step legend { padding: 0; margin-bottom: 14px; font-weight: 700; font-size: 20px; line-height: 1.25; }
.pv .q-num { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--q-muted); margin-bottom: 6px; }
.pv .q-opts { display: grid; gap: 8px; }
.pv .q-opt { min-height: 52px; padding: 12px 16px; text-align: left; font: inherit; font-weight: 600; font-size: 16px; color: inherit; background: transparent;
  border: 2px solid var(--q-line); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.pv .q-opt:hover { border-color: var(--q-accent); }
.pv .q-opt:focus-visible, .pv .q-cta:focus-visible, .pv .ba-range:focus-visible + * { outline: 3px solid var(--q-accent); outline-offset: 2px; }
.pv .q-opt.is-on { background: var(--q-btn); color: var(--q-btn-ink); border-color: var(--q-btn); }
.pv .q-result { padding-top: 16px; }
.pv .q-k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--q-muted); }
.pv .q-total { margin: 6px 0; font-size: 42px; font-weight: 700; line-height: 1; }
.pv .q-line { margin: 4px 0; }
.pv .q-save { font-weight: 700; color: var(--q-accent); }
.pv .q-msg { margin: 12px 0; padding: 12px 14px; border-left: 3px solid var(--q-accent); font-size: 15px; line-height: 1.5; }
.pv .q-sched ol { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; }
.pv .q-sched p { margin: 8px 0; }
.pv .q-fine { font-size: 13px; color: var(--q-muted); }
.pv .q-cta { display: flex; align-items: center; justify-content: center; min-height: 54px; margin-top: 12px; padding: 12px 18px; text-decoration: none;
  font-weight: 700; background: var(--q-btn); color: var(--q-btn-ink); }
.pv .q-restart { margin-top: 8px; background: none; border: 0; color: var(--q-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }

/* static price table */
.pv .ptable { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.pv .ptable caption { text-align: left; font-weight: 700; padding: 0 0 8px; }
.pv .ptable th, .pv .ptable td { padding: 10px 8px; border-bottom: 1px solid var(--q-line); text-align: left; vertical-align: top; }
.pv .ptable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--q-muted); }

/* before/after slider */
.pv .ba-frame { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; }
.pv .ba-after img, .pv .ba-before img { width: 100%; height: auto; display: block; }
.pv .ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pv .ba-before img { height: 100%; object-fit: cover; }
.pv .ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.4); pointer-events: none; }
.pv .ba-line::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: #111; display: grid; place-items: center; font-size: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.pv .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.pv .ba-tag { position: absolute; top: 10px; padding: 5px 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.pv .ba-tag-l { left: 10px; } .pv .ba-tag-r { right: 10px; }
.pv .ba-pair figcaption { margin-top: 10px; font-size: 14px; }
.pv .ba-dots { display: flex; gap: 8px; margin-top: 12px; }
.pv .ba-dot { width: 44px; height: 44px; border: 2px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; border-radius: 50%; opacity: .55; }
.pv .ba-dot[aria-pressed="true"] { opacity: 1; background: var(--dot-on, #111); color: var(--dot-on-ink, #fff); border-color: var(--dot-on, #111); }

/* faq (reuses the shell's .faq-q toggle) */
.pv .faq-list .faq-item { border-bottom: 1px solid var(--q-line); }

/* reveal: opacity 0 → 1, scale .92 → 1, y 16 → 0, 400 ms, 60 ms stagger, back-out (ui-ux-pro-max "Stagger List") */
.v2-anim .pv .st, .v2-anim .pv .c-reveal { opacity: 0; transform: translateY(16px) scale(.92); transition: opacity .4s cubic-bezier(.34,1.56,.64,1) var(--d, 0ms), transform .4s cubic-bezier(.34,1.56,.64,1) var(--d, 0ms); }
.v2-anim .pv .c-reveal { transform: translateY(24px); transition-timing-function: cubic-bezier(.2,.7,.2,1); transition-duration: .7s; }
.v2-anim .pv .st.in, .v2-anim .pv .c-reveal.in { opacity: 1; transform: none; }

/* sticky CTA (mobile) */
.v2-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); box-shadow: 0 -6px 22px rgba(0,0,0,.12); transform: translateY(110%); transition: transform .25s ease; }
.v2-sticky.is-on { transform: none; }
.v2-sticky-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 0 auto; }
.v2-sticky p { margin: 0; display: flex; flex-direction: column; line-height: 1.15; font-family: Inter, system-ui, sans-serif; }
.v2-sticky span, .v2-sticky em { font-size: 12px; font-style: normal; color: #666; }
.v2-sticky strong { font-size: 20px; color: #111; }
.v2-sticky-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; font: 700 15px/1.2 Inter, system-ui, sans-serif; text-decoration: none;
  background: #111; color: #fff; -webkit-text-fill-color: currentColor; }
/* no bottom padding for the sticky CTA: it hides over the final CTA and the footer (v2.js) */
body.v2-has-sticky { padding-bottom: 0; }   /* also drops the 32px the old site sticky bar reserved */
@media (min-width: 860px) { .v2-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .pv *, .v2-sticky { transition: none !important; animation: none !important; } }