/* KSS-UZ V2 preview — deliberately scoped to Screen 1 and Screen 2 only.
   Existing screens 3+ keep the production theme until V2 is approved. */

/* ---------- shared V2 surfaces, only while Screen 1 or Screen 2 is mounted ---------- */
body:has(#screen .hook-v2),
body:has(#screen .seg-option) {
  --v2-bg:#fff;
  --v2-surface:#fff;
  --v2-text:#171717;
  --v2-muted:#6b6b6b;
  --v2-line:#e5e5e5;
  --v2-yellow:#ffc400;
  --v2-yellow-soft:#fff8dc;
  background:var(--v2-bg);
  color:var(--v2-text);
}
body:has(#screen .hook-v2)::before,
body:has(#screen .seg-option)::before { display:none; }
body:has(#screen .hook-v2) .app,
body:has(#screen .seg-option) .app { background:var(--v2-bg); }
body:has(#screen .hook-v2) .brand-mark,
body:has(#screen .seg-option) .brand-mark { color:var(--v2-yellow); }
body:has(#screen .hook-v2) .brand,
body:has(#screen .seg-option) .brand,
body:has(#screen .seg-option) .back { color:var(--v2-text); }

/* ---------- Screen 1: ad -> test bridge ---------- */
body:has(#screen .hook-v2) .topbar { display:none; }
body:has(#screen .hook-v2) .progress { display:none; }
body:has(#screen .hook-v2) .foot { color:#858585; }
body:has(#screen .hook-v2) .screen {
  padding:clamp(24px,5vh,48px) 24px 20px;
  display:flex;
  align-items:center;
}
.hook-v2 {
  width:100%;
  min-height:auto;
  justify-content:center;
  text-align:left;
}
.hook-v2 .h1 {
  margin:0 0 12px;
  max-width:430px;
  font-family:var(--display);
  font-size:clamp(32px,9vw,46px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.045em;
  color:#111;
  text-transform:uppercase;
}
.hook-v2 .lead {
  margin:0 0 16px;
  max-width:430px;
  font-family:var(--display);
  font-size:clamp(21px,5.8vw,29px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.025em;
  color:#111;
  text-transform:uppercase;
}
.hook-v2 .highlight {
  display:inline;
  padding:0 .13em .06em;
  background:linear-gradient(transparent 12%, var(--v2-yellow) 12%, var(--v2-yellow) 92%, transparent 92%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hook-v2 .meta {
  display:inline-flex;
  align-self:flex-start;
  margin:0 0 18px;
  padding:8px 13px;
  border:1.5px solid #111;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:13px;
  line-height:1;
  font-weight:800;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.hook-v2 .hook-action { width:100%; }
.hook-v2 .btn {
  width:100%;
  min-height:62px;
  margin:0;
  padding:17px 20px;
  border-radius:14px;
  background:var(--v2-yellow);
  color:#111;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  font-size:19px;
  font-weight:800;
  text-transform:uppercase;
}
.hook-v2 .btn:hover { background:#ffd126; color:#111; box-shadow:0 9px 24px rgba(0,0,0,.14); }
.hook-v2 .benefits {
  margin-top:15px;
  color:#4f4f4f;
  font-size:11.5px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:.035em;
  text-align:center;
}
.hook-v2 .note {
  margin-top:7px;
  color:#929292;
  font-size:12px;
  line-height:1.35;
  text-align:center;
}

/* ---------- Screen 2: reference question screen ---------- */
body:has(#screen .seg-option) .topbar { padding-top:14px; }
body:has(#screen .seg-option) .progress {
  position:relative;
  gap:5px;
  padding:14px 24px 28px;
}
body:has(#screen .seg-option) .progress::after {
  content:"1 из 3";
  position:absolute;
  right:24px;
  top:27px;
  transform:translateY(100%);
  color:var(--v2-muted);
  font-size:13px;
  line-height:1;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
body:has(#screen .seg-option) .seg { height:4px; background:var(--v2-line); }
body:has(#screen .seg-option) .seg > i { background:var(--v2-yellow); }
body:has(#screen .seg-option) .screen { padding-top:20px; }
body:has(#screen .seg-option) .h2 {
  margin-bottom:9px;
  color:var(--v2-text);
  font-size:24px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.025em;
}
body:has(#screen .seg-option) .q {
  margin:5px 0 5px;
  color:var(--v2-text);
  font-size:20px;
  line-height:1.22;
  font-weight:800;
}
body:has(#screen .seg-option) .hint {
  margin-bottom:14px;
  color:var(--v2-muted);
  font-size:14px;
}
body:has(#screen .seg-option) .options { gap:9px; margin-top:2px; }
body:has(#screen .seg-option) .option {
  min-height:68px;
  padding:14px 16px;
  border:1.5px solid var(--v2-line);
  border-radius:13px;
  background:var(--v2-surface);
  box-shadow:none;
}
body:has(#screen .seg-option) .option:hover { border-color:var(--v2-yellow); box-shadow:none; transform:none; }
body:has(#screen .seg-option) .option-mark {
  width:23px;
  height:23px;
  border:2px solid #d4d4d4;
}
body:has(#screen .seg-option) .option.sel {
  border-color:var(--v2-yellow);
  background:var(--v2-yellow-soft);
  box-shadow:0 0 0 1px var(--v2-yellow);
}
body:has(#screen .seg-option) .option.sel .option-mark { border-color:var(--v2-yellow); background:var(--v2-yellow); }
body:has(#screen .seg-option) .option.sel .option-mark::after { border-color:#111; }
body:has(#screen .seg-option) .seg-name { color:var(--v2-text); font-size:17px; font-weight:750; }
body:has(#screen .seg-option) .seg-range { color:#333; font-size:14.5px; }
body:has(#screen .seg-option) .seg-usd { color:var(--v2-muted); font-size:13px; }
body:has(#screen .seg-option) .foot { color:#8b8b8b; }

@media (max-width:380px) {
  body:has(#screen .hook-v2) .screen { padding-left:20px; padding-right:20px; }
  .hook-v2 .h1 { font-size:31px; }
  .hook-v2 .lead { font-size:20px; }
  .hook-v2 .benefits { font-size:10.5px; }
  body:has(#screen .seg-option) .screen { padding-left:20px; padding-right:20px; }
  body:has(#screen .seg-option) .option { min-height:62px; padding:12px 14px; }
  body:has(#screen .seg-option) .seg-name { font-size:16px; }
}

@media (min-width:560px) {
  body:has(#screen .hook-v2), body:has(#screen .seg-option) { background:#f4f4f4; }
  body:has(#screen .hook-v2) .app, body:has(#screen .seg-option) .app {
    background:#fff;
    border-left:1px solid #ececec;
    border-right:1px solid #ececec;
  }
}


/* ============================================================
   V2.1 — denser bridge + softer forward motion
   ============================================================ */
body:has(#screen .hook-v2) .screen {
  position:relative;
  overflow:hidden;
  padding:clamp(28px,4.5vh,46px) 24px 24px;
}
body:has(#screen .hook-v2) .screen::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.91) 43%, rgba(255,255,255,.76) 100%),
    url("assets/kss-project.jpg") left top / 235% auto no-repeat;
  opacity:1;
  pointer-events:none;
}
body:has(#screen .hook-v2) .screen::after {
  content:"";
  position:absolute;
  right:-70px;
  bottom:40px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(255,196,0,.13);
  pointer-events:none;
}
.hook-v2 {
  position:relative;
  z-index:1;
  max-width:470px;
  margin:0 auto;
}
.hook-v2 .h1 {
  max-width:460px;
  font-size:clamp(38px,10vw,52px);
  line-height:.94;
  margin-bottom:16px;
}
.hook-v2 .lead {
  max-width:455px;
  font-size:clamp(24px,6.4vw,32px);
  line-height:1.04;
  margin-bottom:18px;
}
.hook-v2 .meta {
  font-size:14px;
  padding:9px 15px;
  margin-bottom:20px;
}
.hook-v2 .btn {
  min-height:68px;
  font-size:21px;
  border:2px solid #111;
  box-shadow:0 7px 0 #111;
}
.hook-v2 .btn:active {
  transform:translateY(4px);
  box-shadow:0 3px 0 #111;
}
.hook-v2 .benefits {
  margin-top:19px;
  color:#252525;
  font-size:12.5px;
  line-height:1.5;
  font-weight:800;
}
.hook-v2 .note {
  color:#666;
  font-size:12.5px;
}

/* Screen 2: more visible yellow identity without turning it into a banner */
body:has(#screen .seg-option) .progress::after {
  padding:5px 9px;
  border-radius:999px;
  background:var(--v2-yellow);
  color:#111;
  font-weight:800;
}
body:has(#screen .seg-option) .h2::before {
  content:"";
  display:block;
  width:44px;
  height:7px;
  margin-bottom:12px;
  border-radius:99px;
  background:var(--v2-yellow);
}
body:has(#screen .seg-option) .q {
  display:inline;
  background:linear-gradient(transparent 70%, rgba(255,196,0,.62) 70%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
body:has(#screen .seg-option) .hint {
  margin-top:10px;
}
body:has(#screen .seg-option) .option-mark {
  background:#fffdf4;
}

@media (max-width:380px) {
  .hook-v2 .h1 { font-size:36px; }
  .hook-v2 .lead { font-size:23px; }
  .hook-v2 .btn { min-height:64px; font-size:19px; }
}


/* ============================================================
   V2.2 — clean white bridge + restrained yellow accents
   ============================================================ */

/* Screen 1: remove decorative kitchen/image layers entirely */
body:has(#screen .hook-v2) .screen::before,
body:has(#screen .hook-v2) .screen::after {
  content:none !important;
  display:none !important;
  background:none !important;
}
body:has(#screen .hook-v2) .screen {
  background:#fff !important;
}
body:has(#screen .hook-v2) .foot,
body:has(#screen .seg-option) .foot {
  display:none !important;
}

/* Screen 2: yellow should be an accent, not a highlighter stripe */
body:has(#screen .seg-option) .h2::before {
  width:30px;
  height:5px;
  margin-bottom:10px;
}
body:has(#screen .seg-option) .q {
  display:block;
  background:none !important;
}
body:has(#screen .seg-option) .q::after {
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin-top:7px;
  border-radius:99px;
  background:var(--v2-yellow);
}
body:has(#screen .seg-option) .progress::after {
  padding:4px 8px;
  font-size:12px;
}

/* ============================================================
   V2.4 — approved visual system applied to the full UZ funnel
   ============================================================ */
:root {
  --bg:#fff;
  --bg-2:#f7f7f7;
  --surface:#fff;
  --surface-2:#fafafa;
  --ink:#111;
  --text:#242424;
  --muted:#6b6b6b;
  --faint:#969696;
  --line:#e8e8e8;
  --line-2:#dddddd;
  --accent:#ffc400;
  --accent-ink:#111;
  --accent-soft:#fff8dc;
  --accent-line:#ffc400;
  --shadow:0 3px 12px rgba(0,0,0,.07);
  --shadow-soft:0 1px 4px rgba(0,0,0,.05);
}
body { background:#fff; color:var(--text); }
body::before { display:none !important; }
.app { background:#fff; }
.brand-mark { color:var(--accent); }
.brand, .back { color:var(--ink); }
.seg { background:var(--line); }
.seg > i, .seg.done > i { background:var(--accent); }
.h2 { color:var(--ink); font-weight:800; }
.lead, .hint, .q { color:var(--text); }

/* restrained yellow identity on content screens */
.screen-body:not(.hook-v2) > .h2:first-child::before,
.screen-body:not(.hook-v2) > .bridge + .h2::before {
  content:"";
  display:block;
  width:30px;
  height:5px;
  margin-bottom:10px;
  border-radius:99px;
  background:var(--accent);
}

/* answer cards throughout the funnel */
.option {
  background:#fff;
  border-color:var(--line-2);
  box-shadow:none;
}
.option:hover { border-color:var(--accent); box-shadow:none; transform:none; }
.option.sel { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent); }
.option-mark { background:#fffdf4; border-color:#d4d4d4; }
.option.sel .option-mark { border-color:var(--accent); background:var(--accent); }
/* perfectly centered check mark */
.option.sel .option-mark::after {
  content:"✓";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  border:0;
  transform:none;
  display:grid;
  place-items:center;
  color:#111;
  font-family:Arial, sans-serif;
  font-size:15px;
  line-height:1;
  font-weight:900;
}

/* soft, low-friction CTA system */
.btn, .pay {
  background:var(--accent);
  color:#111;
  border-color:transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  font-weight:800;
}
.btn:hover, .pay:hover { background:#ffd126; color:#111; box-shadow:0 5px 14px rgba(0,0,0,.12); }
.btn.secondary { background:#111; color:#fff; }

/* compare / explanation */
.quote, .cmp-card, .qlist li, .goal-maker {
  background:#fff;
  border-color:var(--line-2);
  box-shadow:none;
}
.cmp-tag, .steps-title { color:#111; }
.keyline {
  background:#fff;
  border-color:var(--line-2);
  border-left:4px solid var(--accent);
  box-shadow:none;
}
.keyline.strong {
  background:var(--accent-soft);
  border-color:var(--accent);
  color:#111;
}
.qlist li::before, .step-n {
  background:var(--accent);
  color:#111;
  box-shadow:none;
}
.step:not(:last-child) .step-n::after { background:var(--accent); }
.goal-you { background:var(--accent-soft); border-color:#ffe17a; }
.goal-you .goal-label { color:#111; }

/* product */
.showcase-img { box-shadow:var(--shadow); border-radius:16px; }
.showcase-img.ph { background:var(--surface-2); border-color:var(--line-2); }

/* offer — intensity rises again */
.offer-range { color:#111; }
.price-block { background:#111; color:#fff; border-radius:16px; }
.price-label, .price-cur, .price-old, .price-24 { color:#d7d7d7; }
.price-num { color:#fff; }
.inc-ic { color:var(--accent); }

/* booking / slots */
.booking .subtitle, .slot-offer, .payinfo-24 { color:#111; }
.booking-msg, .chosen-slot {
  background:var(--accent-soft);
  border-color:var(--accent);
  color:#111;
}
.booking-none, .payinfo {
  background:#fff;
  border-color:var(--line-2);
  box-shadow:none;
}
.payinfo { border-left-color:var(--accent); }
.dayblock.day-expand { border-top-color:var(--line-2); }
.slot, .daychip {
  background:#fff;
  color:#111;
  border-color:var(--line-2);
  box-shadow:none;
}
.slot:hover, .daychip:hover { border-color:var(--accent); }
.daychip.sel { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent); }
.lead-input { background:#fff; border-color:var(--line-2); box-shadow:none; }
.lead-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* Real test question counter: 3 questions only; main progress bar remains untouched. */
body:has(#screen .quotes) .progress,
body:has(#screen .options) .progress { position:relative; }
body:has(#screen .quotes) .progress::after,
body:has(#screen .options) .progress::after {
  position:absolute;
  right:24px;
  top:27px;
  transform:translateY(100%);
  padding:4px 8px;
  border-radius:999px;
  background:var(--accent);
  color:#111;
  font-size:12px;
  line-height:1;
  font-weight:800;
}
/* Screen 2 already has 1/3 from the approved rule above. */
body:has(#screen .quotes) .progress::after { content:"2 из 3"; }
/* choice/fear is the other .options question; segment gets its existing 1/3 rule */
body:has(#screen .options):not(:has(#screen .seg-option)):not(:has(#screen .quotes)) .progress::after { content:"3 из 3"; }

/* no generic footer copy anywhere */
.foot { display:none !important; }

@media (min-width:560px) {
  body { background:#f4f4f4; }
  .app { background:#fff; border-left:1px solid #ececec; border-right:1px solid #ececec; }
}

/* V2.5 — minimal top chrome: progress segments only. */
body .topbar { display:none !important; }
body:has(#screen .seg-option) .progress::after { content:none !important; display:none !important; }
body:has(#screen .seg-option) .progress {
  padding:18px 24px 14px;
}
body .progress::after { content:none !important; display:none !important; }

/* ==== V2.6 refinements: clean comparison divider + softer offer price ==== */
.compare2 .cmp-vs {
  font-size: 0;
  line-height: 0;
  writing-mode: horizontal-tb;
  transform: none;
  padding: 0;
  width: 1px;
  min-width: 1px;
  align-self: stretch;
  margin: 12px 2px;
  background: #1a1a1a;
  border-radius: 1px;
}

/* Карточка действия */
.price-block {
  margin: 22px 0 10px;
  padding: 20px;
  background: #fff;
  color: #111;
  border: 2px solid var(--accent);
  border-radius: 16px;
  box-shadow: none;
}
.price-block .price-old {
  display: block;
  color: #858585;
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 6px;
  text-decoration-color: #858585;
}
.price-block .price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price-block .price-num {
  color: #111;
  font-size: 46px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.035em;
}
.price-block .price-cur {
  color: #111;
  font-size: 20px;
  font-weight: 700;
}
.price-block .price-label { color: var(--muted); }
.price-block .price-24 {
  display: inline-block;
  width: fit-content;
  margin-top: 13px;
  padding: 7px 10px;
  background: var(--accent);
  color: #111;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}

@media (max-width: 380px) {
  .compare2 .cmp-vs {
    width: auto;
    min-width: 0;
    height: 1px;
    min-height: 1px;
    margin: 2px 12px;
    align-self: stretch;
  }
  .price-block .price-num { font-size: 40px; }
}