/*
 * HOLZCOM Quiz Widget v0.9.34 — Premium UI
 * Палитра: кремовый #faf7f0, чёрный #1a1611, тёплый акцент #c8a96a.
 * Три режима: hzq-mode-page (отдельная страница), hzq-mode-modal (overlay поверх сайта),
 *             hzq-mode-inline (встроенный inline).
 * Без тёмной темы. Без Tailwind. Один файл, без зависимостей.
 */

:host{
  all: initial;

  --hzq-bg:           #faf7f0;
  --hzq-surface:      #ffffff;
  --hzq-surface-soft: #f5f1e6;
  --hzq-surface-warm: #f3ede0;

  --hzq-ink:          #1a1611;
  --hzq-ink-soft:     #5e574b;
  --hzq-ink-mute:     #948b78;

  --hzq-line:         #e6dfcb;
  --hzq-line-soft:    #efe9d8;

  --hzq-accent:       #1a1611;
  --hzq-accent-fg:    #faf7f0;
  --hzq-highlight:    #c8a96a;

  --hzq-success:      #7a8a58;
  --hzq-success-soft: #e9efd6;
  --hzq-success-ink:  #5a6a3e;

  --hzq-danger:       #b91c1c;
  --hzq-danger-soft:  #fde9e9;

  --hzq-overlay:      rgba(26,22,17,.55);
  --hzq-shadow:       0 24px 56px rgba(26,22,17,.18);

  --hzq-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --hzq-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  --hzq-radius-sm: 10px;
  --hzq-radius:    14px;
  --hzq-radius-lg: 20px;
  --hzq-radius-xl: 24px;

  font-family: var(--hzq-font);
  color: var(--hzq-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== MODE WRAPPERS ===== */

.overlay{
  position:fixed; inset:0;
  background: var(--hzq-overlay);
  display:none;
  align-items:flex-start; justify-content:center;
  z-index:2147483645;
  padding:32px 16px;
  overflow-y:auto;
  animation: hzqFadeOverlay .25s ease both;
}
@keyframes hzqFadeOverlay{ from{ opacity:0; } to{ opacity:1; } }

.inlineWrap{
  position:relative; width:100%;
  background: var(--hzq-bg);
  border-radius: var(--hzq-radius-lg);
  overflow:hidden;
}

.modal{
  width: min(720px, 100%);
  max-height: min(92vh, 900px);
  overflow-y:auto; overflow-x:hidden;
  background: var(--hzq-bg);
  border-radius: var(--hzq-radius-xl);
  box-shadow: var(--hzq-shadow);
  color: var(--hzq-ink);
  position:relative;
  animation: hzqRiseModal .35s cubic-bezier(.2,.7,.3,1) both;
}
.modal.hzq-inline{
  max-height:none; box-shadow:none;
  border-radius: var(--hzq-radius-lg);
  width:100%;
  background: var(--hzq-bg);
}
@keyframes hzqRiseModal{
  from{ opacity:0; transform: translateY(16px) scale(.985); }
  to  { opacity:1; transform: translateY(0)    scale(1); }
}

:host(.hzq-mode-page) .overlay{
  background: var(--hzq-bg);
  align-items:flex-start;
  padding:0;
}
:host(.hzq-mode-page) .modal{
  width:100%; max-width:none; max-height:none;
  border-radius:0; box-shadow:none;
  background: var(--hzq-bg);
  animation:none;
}
:host(.hzq-mode-modal) .modal{ width: min(720px, 100%); }
:host(.hzq-mode-inline) .inlineWrap{ box-shadow:none; }

/* ===== HEAD ===== */

.head{
  display:flex; align-items:center; gap:12px;
  padding: 16px 24px;
  background: var(--hzq-surface);
  border-bottom: 1px solid var(--hzq-line);
  position:sticky; top:0; z-index:5;
}
:host(.hzq-mode-page) .head{ padding: 18px 64px; }

.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:500; font-size:15px; letter-spacing:-0.2px;
  color: var(--hzq-ink); white-space:nowrap;
}
.brand-mark{
  width:22px; height:22px; border-radius:7px;
  background: var(--hzq-accent);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-mark svg{ width:14px; height:14px; }
.brand-name{
  font-weight:500;
  letter-spacing:-0.2px;
  color: var(--hzq-ink);
}

.head-meta{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color: var(--hzq-ink-mute);
}
.head-meta-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--hzq-success);
}

.close{
  flex-shrink:0;
  width:32px; height:32px;
  border-radius: 10px;
  border:none;
  background: var(--hzq-surface-warm);
  color: var(--hzq-ink-soft);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
.close:hover{ background: var(--hzq-line); }
.close svg{ width:14px; height:14px; }

@media (max-width: 480px){
  .head{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    gap:8px;
    padding:12px 14px;
    overflow:hidden;
  }
  .brand{
    flex:1 1 auto;
    min-width:0;
  }
  .brand-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .head-meta{
    flex:0 0 auto;
    margin-left:0;
    gap:0;
  }
  .head-meta-text{ display:none; }
  .close{
    flex:0 0 40px;
    width:40px;
    height:40px;
  }
}

/* ===== STEPPER ===== */

.stepper{
  display:flex; align-items:center; gap:0;
  padding: 16px 24px;
  overflow-x:auto;
  scrollbar-width: none;
}
.stepper::-webkit-scrollbar{ display:none; }
:host(.hzq-mode-page) .stepper{ padding: 18px 64px; }

.stepper-node{
  display:inline-flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.stepper-dot{
  width:12px; height:12px; border-radius:50%;
  background: var(--hzq-surface);
  border: 1px solid var(--hzq-line);
  flex-shrink:0;
}
.stepper-dot.is-done{ background: var(--hzq-success); border-color: var(--hzq-success); }
.stepper-dot.is-active{ background: var(--hzq-accent); border-color: var(--hzq-accent); }
.stepper-name{
  font-size:13px; color: var(--hzq-ink-mute);
  white-space:nowrap; letter-spacing:-0.1px;
}
.stepper-node.is-active .stepper-name,
.stepper-node.is-done   .stepper-name{ color: var(--hzq-ink-soft); }
.stepper-line{ flex:0 0 80px; height:1px; background: var(--hzq-line); }
.stepper-line.is-done{ background: var(--hzq-success); }

:host(.hzq-mode-modal) .stepper-name{ display:none; }
:host(.hzq-mode-modal) .stepper-line{ flex-basis: 56px; }

.stepper-meta{
  margin-left:auto;
  font-size:12px; color: var(--hzq-ink-mute);
  white-space:nowrap; flex-shrink:0; padding-left:16px;
}

/* ===== BODY ===== */

.body{ padding: 32px 24px; }
:host(.hzq-mode-page) .body{ padding: 56px 64px; max-width: 1280px; margin: 0 auto; }
:host(.hzq-mode-modal) .body{ padding: 28px 24px; }
:host(.hzq-mode-inline) .body{ padding: 28px 24px; }

.body.anim.anim-next > *{ animation: none; opacity:1; transform:none; }
.body.anim.anim-back > *{ animation: none; opacity:1; transform:none; }
@keyframes hzqSlideNext{ from{ opacity:0; transform:translateX(24px);} to{ opacity:1; transform:translateX(0);} }
@keyframes hzqSlideBack{ from{ opacity:0; transform:translateX(-24px);} to{ opacity:1; transform:translateX(0);} }
@keyframes hzqFadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.kicker{
  font-size:11px; font-weight:500; letter-spacing:2px;
  text-transform:uppercase;
  margin: 0 0 16px;
  display:inline-block;
  background: var(--hzq-surface-warm);
  padding: 6px 12px;
  border-radius: 8px;
  color: #92400e;
}
.kicker.is-success{ color: var(--hzq-success-ink); background: var(--hzq-success-soft); }

.q{
  font-size: 36px; font-weight: 500;
  letter-spacing: -0.8px; line-height: 1.15;
  color: var(--hzq-ink);
  margin: 0 0 12px;
}
:host(.hzq-mode-page) .q{ font-size: 52px; letter-spacing: -1.4px; }

.subhead{
  font-size:15px; line-height:1.5;
  color: var(--hzq-ink-soft);
  margin: 0 0 32px; max-width: 620px;
}
:host(.hzq-mode-page) .subhead{ font-size: 17px; margin-bottom: 40px; }

/* ===== OPTIONS ===== */

.opts{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, 1fr);
}
:host(.hzq-mode-page) .opts{ grid-template-columns: repeat(4, 1fr); gap:20px; }
@media (max-width: 720px){
  .opts{ grid-template-columns: 1fr 1fr; }
  :host(.hzq-mode-page) .opts{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .opts{ grid-template-columns: 1fr; }
  :host(.hzq-mode-page) .opts{ grid-template-columns: 1fr; }
}

.opt{
  position:relative;
  display:grid; grid-template-columns: 1fr; gap: 0;
  background: var(--hzq-surface);
  border-radius: var(--hzq-radius-lg);
  border: 1px solid var(--hzq-line);
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
  overflow: hidden;
  text-align:left;
  font-family: inherit;
  color: inherit;
}
.opt:hover{ border-color: var(--hzq-ink-soft); transform: translateY(-1px); }
.opt:active{ transform: translateY(0) scale(.99); }
.opt.is-active{
  background: var(--hzq-surface-warm);
  border-color: var(--hzq-ink);
  border-width: 1.5px;
  padding: 15.5px;
}

:host(.hzq-mode-modal) .opt{
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
  padding: 14px;
  align-items:start;
}
:host(.hzq-mode-modal) .opt.is-active{ padding: 13.5px; }
:host(.hzq-mode-modal) .opt.noImage{ grid-template-columns: minmax(0, 1fr); }
:host(.hzq-mode-modal) .optImgWrap{
  order: 2;
  align-self:center;
  aspect-ratio: 120 / 76;
  background: transparent;
  margin-bottom: 0;
}
:host(.hzq-mode-modal) .optTxt{
  order: 1;
  min-width: 0;
}

:host(.hzq-mode-page) .opt{
  grid-template-columns: 1fr;
  padding: 20px;
  min-height: 320px;
}
:host(.hzq-mode-page) .opt.is-active{ padding: 19.5px; }
:host(.hzq-mode-page) .opt.noImage{ min-height: 0; }

.opt-num{
  font-size:11px; font-weight:500; letter-spacing:1.5px;
  color: var(--hzq-ink-mute);
  text-transform:uppercase;
  margin-bottom:8px;
}
.opt-img{
  background: var(--hzq-surface-warm);
  border-radius: var(--hzq-radius-sm);
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
  overflow:hidden;
}
:host(.hzq-mode-page) .opt-img{ aspect-ratio: 5/3; margin-bottom: 16px; }

.opt-title{
  font-size: 17px; font-weight: 500; letter-spacing: -0.2px;
  color: var(--hzq-ink); margin: 4px 0 4px;
}
:host(.hzq-mode-page) .opt-title{ font-size: 22px; letter-spacing: -0.3px; margin-top: 8px; }

.opt-body{
  font-size:13px; line-height:1.4;
  color: var(--hzq-ink-soft);
  margin: 0 0 8px;
}
:host(.hzq-mode-page) .opt-body{ font-size: 14px; }

.opt-price{
  font-size:13px; font-weight:500;
  color: var(--hzq-ink);
  margin-top:auto;
}
.opt-score{
  font-size:12px; font-weight:500;
  color: var(--hzq-success-ink);
}

.opt-popular-pill{
  display:inline-block;
  font-size:10px; font-weight:500; letter-spacing:1.2px;
  background: var(--hzq-accent);
  color: var(--hzq-accent-fg);
  padding: 4px 10px;
  border-radius: 99px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.opt-check{
  position:absolute;
  top: 16px; right: 16px;
  width: 26px; height: 26px;
  border-radius:50%;
  background: var(--hzq-accent);
  color: var(--hzq-accent-fg);
  display:none;
  align-items:center; justify-content:center;
  flex-shrink:0;
}
.opt.is-active .opt-check{ display:inline-flex; }
.opt-check svg{ width:14px; height:14px; }

/* ===== RANGE SLIDER ===== */

.rangeWrap{ display:flex; flex-direction:column; gap: 24px; }
.rangeBig{
  font-size: 56px; font-weight: 500;
  letter-spacing: -1.5px;
  color: var(--hzq-ink);
  line-height:1;
  display:flex; align-items:baseline; gap:8px;
}
:host(.hzq-mode-page) .rangeBig{ font-size: 96px; letter-spacing: -3px; }
.rangeBig-cur{
  font-size:50%; font-weight:400;
  color: var(--hzq-ink-mute);
  letter-spacing: -0.5px;
}
.rangeClass{ font-size:13px; color: var(--hzq-ink-soft); }

.rangeSlider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px;
  background:transparent;
  cursor:pointer;
}
.rangeSlider::-webkit-slider-runnable-track{
  height:8px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--hzq-accent) 0%,
    var(--hzq-accent) var(--hzq-fill, 0%),
    var(--hzq-line)   var(--hzq-fill, 0%),
    var(--hzq-line)   100%);
}
.rangeSlider::-moz-range-track{
  height:8px; border-radius: 999px;
  background: var(--hzq-line);
}
.rangeSlider::-moz-range-progress{
  height:8px; border-radius: 999px;
  background: var(--hzq-accent);
}
.rangeSlider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width: 28px; height: 28px;
  border-radius:50%;
  background: var(--hzq-accent);
  border: 4px solid var(--hzq-bg);
  margin-top: -10px;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(26,22,17,.18);
}
.rangeSlider::-webkit-slider-thumb:active{ cursor:grabbing; }
.rangeSlider::-moz-range-thumb{
  width: 28px; height: 28px;
  border-radius:50%;
  background: var(--hzq-accent);
  border: 4px solid var(--hzq-bg);
  cursor: grab;
}

.rangeTicks{
  display:flex; justify-content:space-between;
  font-size:12px; color: var(--hzq-ink-mute);
  margin-top: 6px;
}

.rangePresets{ display:flex; flex-wrap:wrap; gap:8px; }
.rangePreset{
  padding: 8px 16px; border-radius: 99px;
  border: 1px solid var(--hzq-line);
  background: var(--hzq-surface);
  font-size:13px; color: var(--hzq-ink);
  cursor:pointer; font-family:inherit;
  transition: border-color .15s ease, background .15s ease;
}
.rangePreset:hover{ border-color: var(--hzq-ink-soft); }
.rangePreset.is-active{
  background: var(--hzq-accent);
  color: var(--hzq-accent-fg);
  border-color: var(--hzq-accent);
}

.rangeIncluded{
  background: var(--hzq-surface-warm);
  border-radius: var(--hzq-radius);
  padding: 20px 24px;
  margin-top: 8px;
}
.rangeIncluded-h{
  font-size:11px; font-weight:500; letter-spacing:1.5px;
  color: var(--hzq-ink-mute);
  text-transform:uppercase;
  margin: 0 0 16px;
}
.rangeIncluded-row{
  display:flex; align-items:flex-start; gap: 12px;
  margin-bottom: 12px;
}
.rangeIncluded-row:last-child{ margin-bottom:0; }
.rangeIncluded-check{
  width: 18px; height: 18px;
  border-radius:50%;
  background: var(--hzq-surface);
  border:1px solid var(--hzq-line);
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--hzq-ink);
  margin-top: 2px;
}
.rangeIncluded-check svg{ width:11px; height:11px; }
.rangeIncluded-text{ font-size:14px; color: var(--hzq-ink); line-height: 1.4; }
.rangeIncluded-meta{ font-size:12px; color: var(--hzq-ink-mute); }

/* ===== NUMBER INPUT ===== */

.numWrap{ display:flex; flex-direction:column; gap:16px; max-width: 420px; }
.numInput{
  font-family: inherit;
  font-size: 36px; font-weight: 500; letter-spacing: -0.6px;
  color: var(--hzq-ink);
  background: var(--hzq-surface);
  border: 1.5px solid var(--hzq-line);
  border-radius: var(--hzq-radius);
  padding: 20px 24px;
  width: 100%; outline:none;
  transition: border-color .15s ease;
}
.numInput:focus{ border-color: var(--hzq-ink); }
.numHint{ font-size:13px; color: var(--hzq-ink-mute); }

/* ===== RATING ===== */

.ratingWrap{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 660px;
}
.ratingStar{
  -webkit-appearance:none; appearance:none;
  aspect-ratio: 1;
  border-radius: var(--hzq-radius-sm);
  border: 1px solid var(--hzq-line);
  background: var(--hzq-surface);
  cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  font-size: 36px; line-height: 1;
  color: var(--hzq-line);
  font-family: inherit;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.ratingStar:hover{
  transform: translateY(-2px) scale(1.04);
  border-color: var(--hzq-ink-soft);
}
.ratingStar.is-on{
  background: var(--hzq-surface-warm);
  border-color: #f59e0b;
  color: #f59e0b;
  animation: hzqStarPop .25s ease;
}
@keyframes hzqStarPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.ratingLabel{
  font-size:14px; font-weight:500;
  color: var(--hzq-ink);
  margin-top: 12px;
}

/* ===== NPS ===== */

.npsWrap{
  display:grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 6px;
  max-width: 100%;
}
.npsCell{
  -webkit-appearance:none; appearance:none;
  aspect-ratio: 1;
  min-height: 56px;
  border-radius: var(--hzq-radius);
  border: 1px solid var(--hzq-line);
  background: var(--hzq-surface);
  cursor: pointer;
  font-size: 22px; font-weight: 500;
  color: var(--hzq-ink-mute);
  font-family: inherit;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
  display:flex; align-items:center; justify-content:center;
}
.npsCell:hover{ transform: translateY(-2px); border-color: var(--hzq-ink-soft); }

.npsCell.npsPassive{ background: #fef9e7; border-color: #f7e3a2; color: #92400e; }
.npsCell.npsPromoter{ background: var(--hzq-success-soft); border-color: #bcd095; color: var(--hzq-success-ink); }

.npsCell.is-on{
  background: var(--hzq-accent);
  color: var(--hzq-accent-fg);
  border-color: var(--hzq-accent);
  transform: scale(1.06);
}
.npsCell.is-on.npsPromoter{ background: var(--hzq-success); border-color: var(--hzq-success); color: #ffffff; }
.npsCell.is-on.npsPassive { background: #d97706; border-color: #d97706; color: #ffffff; }

.npsLegend{
  display:flex; justify-content:space-between;
  font-size:12px; color: var(--hzq-ink-mute);
  margin-top: 12px;
}

@media (max-width: 720px){
  .npsWrap{ grid-template-columns: repeat(6, 1fr); }
  .npsCell{ min-height: 44px; font-size: 16px; }
}

/* ===== INPUTS ===== */

.formRow{ display:grid; grid-template-columns: 1fr; gap: 24px; max-width: 600px; }
.formRow.cols-2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 600px){ .formRow.cols-2{ grid-template-columns: 1fr; } }

.field{ display:flex; flex-direction:column; gap:8px; }
.field-label{
  font-size:11px; font-weight:500; letter-spacing:1.5px;
  color: var(--hzq-ink-mute);
  text-transform:uppercase;
}
.input,
.textarea{
  font-family: inherit;
  font-size: 17px;
  color: var(--hzq-ink);
  background: var(--hzq-surface);
  border: 1.5px solid var(--hzq-line);
  border-radius: var(--hzq-radius);
  padding: 16px 20px;
  width: 100%; outline:none;
  box-sizing: border-box;
  transition: border-color .15s ease;
}
.input:focus, .textarea:focus{ border-color: var(--hzq-ink); }
.input.is-valid{ border-color: var(--hzq-success); }
.input.is-invalid{ border-color: var(--hzq-danger); }

.field-help{ font-size:12px; color: var(--hzq-ink-mute); line-height:1.4; }
.field-error{ font-size:12px; color: var(--hzq-danger); line-height: 1.4; }

.checkboxRow{ display:flex; align-items:flex-start; gap: 12px; }
.checkbox{
  -webkit-appearance:none; appearance:none;
  width: 20px; height:20px;
  border-radius: 6px;
  border: 1.5px solid var(--hzq-line);
  background: var(--hzq-surface);
  cursor: pointer;
  flex-shrink:0; margin-top:1px;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
}
.checkbox:checked{
  background: var(--hzq-accent);
  border-color: var(--hzq-accent);
}
.checkbox:checked::after{
  content:"";
  width: 10px; height: 5px;
  border-left: 2px solid var(--hzq-accent-fg);
  border-bottom: 2px solid var(--hzq-accent-fg);
  transform: rotate(-45deg) translate(1px, -1px);
  display:block;
}
.checkbox-label{
  font-size:13px; color: var(--hzq-ink-soft);
  line-height: 1.5; cursor: pointer;
}

.pillRow{ display:flex; flex-wrap:wrap; gap: 8px; }
.pill{
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--hzq-line);
  background: var(--hzq-surface);
  font-size: 13px; color: var(--hzq-ink);
  cursor: pointer; font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.pill:hover{ border-color: var(--hzq-ink-soft); }
.pill.is-active{
  background: var(--hzq-accent);
  color: var(--hzq-accent-fg);
  border-color: var(--hzq-accent);
}

/* ===== SUMMARY ===== */

.contactGrid{
  display:grid; grid-template-columns: 1fr; gap: 24px;
  align-items:start;
}
:host(.hzq-mode-page) .contactGrid{
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
}

.summary{
  background: var(--hzq-surface);
  border: 1px solid var(--hzq-line);
  border-radius: var(--hzq-radius-lg);
  padding: 24px;
}
.summary-h{
  font-size:11px; font-weight:500; letter-spacing:1.5px;
  color: var(--hzq-ink-mute);
  text-transform:uppercase;
  margin: 0 0 8px;
}
.summary-title{
  font-size: 20px; font-weight:500; letter-spacing: -0.3px;
  color: var(--hzq-ink);
  margin: 0 0 4px;
}
.summary-meta{ font-size:13px; color: var(--hzq-ink-mute); margin: 0 0 16px; }
.summary-rule{ border-top: 1px solid var(--hzq-line); margin: 0 0 16px; }
.summary-row{ display:flex; justify-content: space-between; padding: 6px 0; font-size:13px; }
.summary-row-key{ color: var(--hzq-ink-mute); }
.summary-row-val{ color: var(--hzq-ink); font-weight:500; }
.summary-estimate{
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--hzq-line);
}
.summary-estimate-num{
  font-size: 24px; font-weight: 500; letter-spacing: -0.5px;
  color: var(--hzq-ink);
}
.summary-estimate-meta{ font-size:12px; color: var(--hzq-ink-mute); margin-top:4px; }

/* ===== SUCCESS ===== */

.successWrap{ text-align:center; padding: 24px 0; }
.successSeal{
  width: 88px; height: 88px;
  border-radius:50%;
  background: var(--hzq-success);
  margin: 0 auto 32px;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
}
.successSeal::before{
  content:"";
  position:absolute; inset:-8px;
  border-radius:50%;
  background: var(--hzq-success-soft);
  z-index:-1;
}
.successSeal svg{ width: 36px; height: 36px; color: var(--hzq-accent-fg); }
.successKicker{ color: var(--hzq-success-ink); background: var(--hzq-success-soft); }
.successWrap .successKicker{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 12px;
  margin-bottom:18px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.successMeta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--hzq-line);
  border-radius:999px;
  padding:9px 14px;
  color:var(--hzq-ink-soft);
  background:var(--hzq-surface);
  font-size:13px;
}
.successMeta span{
  color:var(--hzq-ink);
  font-variant-numeric:tabular-nums;
}
.successQ{
  font-size: 36px; font-weight:500; letter-spacing:-0.8px;
  color: var(--hzq-ink); margin: 0 0 8px;
}
:host(.hzq-mode-page) .successQ{ font-size:64px; letter-spacing:-1.8px; }

/* ===== FOOTER ===== */

.footer{
  display:flex; align-items:center; gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid var(--hzq-line);
  background: var(--hzq-surface);
  position:sticky; bottom:0; z-index:5;
}
:host(.hzq-mode-page) .footer{
  padding: 20px 64px;
  background: transparent;
  border-top: none;
  position: static;
}
:host(.hzq-mode-page) .footer-inner{
  max-width: 1280px;
  margin: 0 auto;
  display:flex; align-items:center; gap:16px;
  width:100%;
}

.skip{
  font-size: 13px;
  color: var(--hzq-ink-mute);
  background: none; border:none;
  cursor: pointer; font-family: inherit;
  padding: 8px 0;
  text-decoration: underline;
  text-decoration-color: rgba(148,139,120,.4);
  text-underline-offset: 3px;
}
.skip:hover{ color: var(--hzq-ink-soft); text-decoration-color: var(--hzq-ink-soft); }

.spacer{ flex:1; }

.btn{
  font-family: inherit;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.1px;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  display:inline-flex; align-items:center; gap: 8px;
  transition: background .15s ease, transform .12s ease;
}
.btn.btn-primary{ background: var(--hzq-accent); color: var(--hzq-accent-fg); }
.btn.btn-primary:hover{ background: #2a241c; }
.btn.btn-primary:active{ transform: scale(.98); }
.btn.btn-primary:disabled{ background: var(--hzq-ink-mute); cursor: not-allowed; }
.btn.btn-ghost{
  background: transparent;
  color: var(--hzq-ink-soft);
  padding: 8px 12px;
}
.btn.btn-ghost:hover{ color: var(--hzq-ink); }
.btn svg{ width: 14px; height: 14px; flex-shrink: 0; }

.btn.btn-large{
  font-size: 16px;
  padding: 18px 32px;
  border-radius: 14px;
  width: 100%;
  justify-content: center;
}

/* ===== TRUST STRIP ===== */

.trustStrip{
  display:none;
  flex-wrap:wrap; gap: 24px;
  padding: 16px 24px 0;
  font-size:13px; color: var(--hzq-ink-soft);
}
:host(.hzq-mode-page) .trustStrip{
  display:flex;
  padding: 16px 64px 0;
  max-width: 1280px;
  margin: 0 auto;
}
.trustItem{ display:inline-flex; align-items:center; gap:8px; }
.trustItem-dot{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--hzq-success-soft);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--hzq-success-ink);
  flex-shrink:0;
}
.trustItem-dot svg{ width:10px; height:10px; }

/* ===== TOAST ===== */

.toast{
  display:none;
  margin: 16px 24px 0;
  padding: 12px 16px;
  border-radius: var(--hzq-radius);
  font-size:13px;
  border: 1px solid var(--hzq-line);
  background: var(--hzq-surface-warm);
  color: var(--hzq-ink);
}
.toast.is-error{
  background: var(--hzq-danger-soft);
  border-color: #f5b1b1;
  color: var(--hzq-danger);
}

/* ===== SKELETON ===== */

.hzSkeleton{
  background: linear-gradient(90deg, var(--hzq-surface-warm), var(--hzq-line-soft), var(--hzq-surface-warm));
  background-size: 200% 100%;
  animation: hzqSk 1.4s linear infinite;
  border-radius: var(--hzq-radius);
}
@keyframes hzqSk{ from{ background-position: 0% 0%; } to{ background-position: 200% 0%; } }

/* ===== CONFETTI ===== */

.hzqConfettiOverlay{
  position:absolute; inset:0;
  pointer-events:none; overflow:hidden;
  z-index: 100;
}
.hzqConfettiPiece{
  position:absolute;
  width: 8px; height: 14px;
  border-radius: 2px;
  animation: hzqConfettiFall 1.6s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes hzqConfettiFall{
  0%   { transform: translateY(-30px) rotate(0deg);   opacity:1; }
  100% { transform: translateY(420px) rotate(540deg); opacity:0; }
}

/* ===== LEGACY HOOKS (compat with v0.9.32 markup) ===== */

.progressWrap{ display:none; }
.head .title{ display:none; }
.bar{ display:none; }
.pct{ display:none; }


/* ============================================================
 * LEGACY ALIASES — compat with v0.9.32 markup classes
 * Старые классы (.grid, .opt, .optImg, .stepTitle, .stepDesc) маппятся на новые токены.
 * ============================================================ */

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, 1fr);
}
:host(.hzq-mode-page) .grid{ grid-template-columns: repeat(4, 1fr); gap:20px; }
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr 1fr; }
  :host(.hzq-mode-page) .grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .grid{ grid-template-columns: 1fr; }
  :host(.hzq-mode-page) .grid{ grid-template-columns: 1fr; }
}

/* Old `.opt.active` → use .is-active */
.opt.active{
  background: var(--hzq-surface-warm);
  border-color: var(--hzq-ink);
  border-width: 1.5px;
  padding: 15.5px;
}

/* Old optImgWrap/optImg/optTxt/optLbl/optSub → new opt-img/opt-title/opt-body */
.optImgWrap{
  background: var(--hzq-surface-warm);
  border-radius: var(--hzq-radius-sm);
  aspect-ratio: 4/3;
  position:relative;
  overflow:hidden;
  margin-bottom: 16px;
}
.optImg{
  width:100%; height:100%; object-fit:contain;
  display:block;
}
.optTxt{ display:flex; flex-direction:column; gap:4px; flex:1; }
.optLbl{
  font-size: 17px; font-weight: 500; letter-spacing: -0.2px;
  color: var(--hzq-ink);
}
:host(.hzq-mode-page) .optLbl{ font-size: 22px; letter-spacing: -0.3px; }
.optSub{
  font-size:13px; line-height:1.4;
  color: var(--hzq-ink-soft);
}
:host(.hzq-mode-page) .optSub{ font-size: 14px; }

/* Old stepTitle/stepDesc */
.stepTitle{
  font-size: 36px; font-weight: 500;
  letter-spacing: -0.8px; line-height: 1.15;
  color: var(--hzq-ink);
  margin: 0 0 12px;
}
:host(.hzq-mode-page) .stepTitle{ font-size: 52px; letter-spacing: -1.4px; }

.stepDesc{
  font-size:15px; line-height:1.5;
  color: var(--hzq-ink-soft);
  margin: 0 0 32px; max-width: 620px;
}
:host(.hzq-mode-page) .stepDesc{ font-size: 17px; margin-bottom: 40px; }

/* Old stepper / stepperDot (named with circle+label) */
.stepperDot{
  display:inline-flex; align-items:center; gap:8px;
  flex-shrink:0; margin-right:12px;
}
.stepperCircle{
  width:12px; height:12px; border-radius:50%;
  background: var(--hzq-surface);
  border: 1px solid var(--hzq-line);
  flex-shrink:0;
  /* Hide the digit/checkmark inside — premium style uses just dots */
  font-size:0; color: transparent;
}
.stepperDot.done .stepperCircle{
  background: var(--hzq-success);
  border-color: var(--hzq-success);
}
.stepperDot.active .stepperCircle{
  background: var(--hzq-accent);
  border-color: var(--hzq-accent);
}
.stepperLabel{
  font-size:13px; color: var(--hzq-ink-mute);
  white-space:nowrap; letter-spacing:-0.1px;
}
.stepperDot.active .stepperLabel,
.stepperDot.done   .stepperLabel{ color: var(--hzq-ink-soft); }

:host(.hzq-mode-modal) .stepperLabel{ display:none; }

/* In modal/inline — old stepper hides circle text and shows compact bar */
.stepper{ gap: 12px; }

/* Old finalContact wrapper → keep simple */
.finalContact{ display:flex; flex-direction:column; gap:24px; }

/* Old `.note` (skip line) */
.note{
  margin-top: 16px;
  font-size:13px;
  color: var(--hzq-ink-mute);
}
.note .skip{
  cursor:pointer;
  color: var(--hzq-ink-mute);
  text-decoration: underline;
  text-decoration-color: rgba(148,139,120,.4);
  text-underline-offset: 3px;
}
.note .skip:hover{ color: var(--hzq-ink-soft); }

/* Old .formRow */
.formRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 600px;
}
@media (max-width: 600px){ .formRow{ grid-template-columns: 1fr; } }

/* Old .upWrap / .upBox (file upload) */
.upWrap{ display:flex; flex-direction:column; gap:12px; }
.upBox{
  border: 1.5px dashed var(--hzq-line);
  border-radius: var(--hzq-radius);
  background: var(--hzq-surface);
  padding: 32px 24px;
  text-align: center;
  font-size:14px;
  color: var(--hzq-ink-soft);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.upBox:hover{ border-color: var(--hzq-ink-soft); background: var(--hzq-surface-warm); }

/* Page mode tweaks */
:host(.hzq-mode-page) .close{ display:none; }
:host(.hzq-mode-page) .head{ background: rgba(255,255,255,.92); backdrop-filter: blur(10px); }


/* ============================================================
 * UTILITY & STATE CLASSES (replacing former inline styles)
 * ============================================================ */

.is-hidden{ display: none !important; }
.is-shown { display: flex; }

/* Overlay state — was inline style="display:none" */
.overlay.is-shown{ display: flex; }
.overlay.is-hidden{ display: none; }

/* Form layout helpers — was inline style="grid-template-columns:1fr" */
.formRow.formRow-1col{ grid-template-columns: 1fr; }

/* Range slider display — was inline font-size/weight/text-align/margin */
.rangeDisplay{
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin: 8px 0 18px;
  color: var(--hzq-ink);
  letter-spacing: -0.4px;
}
.rangeUnit{
  font-size: 14px;
  opacity: .7;
  font-weight: 400;
  margin-left: 2px;
}
.rangeLabels{
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--hzq-ink-mute);
}

/* Hint under inputs — was inline style="font-size:12px;opacity:.6;margin-top:6px" */
.hzqHint{
  font-size: 12px;
  color: var(--hzq-ink-mute);
  margin-top: 6px;
  line-height: 1.4;
}

/* PDF placeholder in upload — was inline style="font-size:11px; opacity:.8" */
.hzqPdfPlaceholder{
  font-size: 11px;
  color: var(--hzq-ink-soft);
  font-weight: 500;
}

/* Tight link button — was inline style="padding:8px 10px; text-decoration:none" */
.btn-link-tight{
  padding: 8px 10px;
  text-decoration: none;
}

/* Captcha slot — was inline style="margin-top:12px" */
.hzqCaptchaSlot{
  margin-top: 12px;
}

.consentRow{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:52px;
  padding:12px 14px;
  border:1px solid var(--hzq-line);
  border-radius:var(--hzq-radius);
  background:var(--hzq-surface);
  box-sizing:border-box;
  cursor:pointer;
  line-height:1.45;
}
.consentRow input[type="checkbox"]{
  width:24px;
  height:24px;
  margin:0;
  flex:0 0 24px;
  accent-color:var(--hzq-accent);
  cursor:pointer;
}
.consentRow span{ font-size:13px; color:var(--hzq-ink-soft); }
.consentRow a{ color:var(--hzq-ink); text-underline-offset:2px; }

.successExtra{
  margin-top:20px;
  padding:16px;
  border:1px solid var(--hzq-line);
  border-radius:var(--hzq-radius);
  background:var(--hzq-surface);
}
.successExtraTitle{ font-weight:700; color:var(--hzq-ink); }
.successExtra p{ margin:6px 0 14px; color:var(--hzq-ink-soft); font-size:14px; line-height:1.45; }
.successMessenger{ justify-content:center; min-height:44px; box-sizing:border-box; }

/* Messenger row layout — was inline style="display:flex;gap:10px;..." */
.messengerRow{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Messenger buttons — Telegram/WhatsApp brand colors */
.messengerBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease;
}
.messengerBtn:hover{ transform: translateY(-1px); }

.messengerBtn-tg{
  border: 1px solid rgba(42,171,238,.35);
  background: rgba(42,171,238,.10);
  color: #2AABEE;
}
.messengerBtn-tg:hover{ background: rgba(42,171,238,.18); }

.messengerBtn-wa{
  border: 1px solid rgba(37,211,102,.35);
  background: rgba(37,211,102,.10);
  color: #25D366;
}
.messengerBtn-wa:hover{ background: rgba(37,211,102,.18); }

.stepHero,
.stepInsight{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) 160px;
  gap:18px;
  padding:20px 22px;
  margin: 0 0 24px;
  border:1px solid var(--hzq-line);
  border-radius: var(--hzq-radius-lg);
  background:
    radial-gradient(circle at top right, rgba(200,169,106,.14), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,241,230,.92));
}
:host(.hzq-mode-page) .stepHero,
:host(.hzq-mode-page) .stepInsight{
  grid-template-columns:minmax(0, 1.2fr) 220px;
  gap:24px;
  padding:26px 28px;
}
.stepHeroMain,
.stepInsight{ align-items:start; }
.stepHeroEyebrow,
.stepInsightEyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color: var(--hzq-success-ink);
  margin-bottom:10px;
}
.stepHeroTitle,
.stepInsightTitle,
.contactIntroTitle{
  font-size:24px;
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.5px;
  color: var(--hzq-ink);
}
:host(.hzq-mode-page) .stepHeroTitle,
:host(.hzq-mode-page) .stepInsightTitle,
:host(.hzq-mode-page) .contactIntroTitle{ font-size:30px; letter-spacing:-.8px; }
.stepHeroText,
.stepInsightText,
.contactIntroText{
  margin-top:10px;
  font-size:14px;
  line-height:1.55;
  color: var(--hzq-ink-soft);
}
.stepHeroBullets,
.stepInsightBullets,
.summaryBullets{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.stepHeroBullets li,
.stepInsightBullets li,
.summaryBullets li{
  position:relative;
  padding-left:18px;
  color: var(--hzq-ink);
  font-size:13px;
  line-height:1.45;
}
.stepHeroBullets li::before,
.stepInsightBullets li::before,
.summaryBullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:.48em;
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--hzq-highlight);
}
.stepHeroArt,
.stepInsightArt{
  align-self:center;
  background: rgba(255,255,255,.65);
  border:1px solid var(--hzq-line-soft);
  border-radius: var(--hzq-radius);
  padding:14px;
}
.stepHeroArt img,
.stepInsightArt img{
  width:100%;
  height:auto;
  object-fit:contain;
}
.stepInsight{
  margin-bottom: 18px;
}
.measureLayout{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:18px;
}
:host(.hzq-mode-page) .measureLayout{
  grid-template-columns:minmax(0, .88fr) minmax(280px, .72fr);
  align-items:start;
}
.quickValueRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.quickValueBtn{
  min-width:72px;
  justify-content:center;
}
.contactFormPanel{
  background: var(--hzq-surface);
  border:1px solid var(--hzq-line);
  border-radius: var(--hzq-radius-lg);
  padding:24px;
}
.contactIntro{ margin-bottom:20px; }
.contactIntro .stepHeroEyebrow{ margin-bottom:8px; }
.summaryMetaPill{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background: var(--hzq-surface-warm);
  border:1px solid var(--hzq-line);
  font-size:12px;
  color: var(--hzq-ink-soft);
}
.compactSummary{
  margin-top:20px;
  background: var(--hzq-surface);
}
.compactSummary .sumRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--hzq-line-soft);
}
.compactSummary .sumRow:last-child{ border-bottom:none; }
.compactSummary .sumK{
  color: var(--hzq-ink-mute);
  font-size:13px;
}
.compactSummary .sumV{
  color: var(--hzq-ink);
  font-size:13px;
  font-weight:500;
  text-align:right;
}
.fieldErr{
  display:block;
  font-size:12px;
  color: var(--hzq-danger);
  line-height:1.4;
}

@media (max-width: 840px){
  .stepHero,
  .stepInsight{
    grid-template-columns:1fr;
  }
}
.messengerBtn-wa:hover{ background: rgba(37,211,102,.18); }

/* Launcher icon — was inline style="width:18px;height:18px;display:inline-flex..." */
.hzqLauncherIcon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Skeleton tall — was inline style="height:200px; margin:8px 0" */
.hzSkeleton-tall{
  height: 200px;
  margin: 8px 0;
}

/* Fast first-paint state: informative and compact instead of an empty panel. */
.hzLoading{min-height:154px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:22px;text-align:center}
.hzLoadingTitle{font-size:18px;font-weight:650;color:var(--hzq-ink);letter-spacing:-.2px}
.hzLoadingSub{margin-top:5px;font-size:12px;color:var(--hzq-ink-mute)}
.hzLoadingRows{width:min(320px,100%);display:grid;gap:9px;margin-top:22px}
.hzLoadingRows span{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--hzq-surface-warm),var(--hzq-line-soft),var(--hzq-surface-warm));background-size:200% 100%;animation:hzqSk 1.1s linear infinite}
.hzLoadingRows span:nth-child(2){width:78%;margin-inline:auto}.hzLoadingRows span:nth-child(3){width:56%;margin-inline:auto}
.footer.is-loading .footer-inner{visibility:hidden}
@media(max-width:600px){.hzLoading{min-height:128px;padding:18px 12px}.hzLoadingRows{margin-top:17px}.hzLoadingTitle{font-size:16px}}

/* compact insight v0.9.50 */
.stepInsight{ grid-template-columns:minmax(0,1fr) 120px; gap:16px; padding:16px 18px; margin:0 0 16px; align-items:center; }
.stepInsight.noArt{ grid-template-columns:1fr; }
.stepInsightMain{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.stepInsight .stepInsightTitle{ font-size:18px; line-height:1.2; letter-spacing:-.3px; }
.stepInsight .stepInsightText{ margin-top:0; font-size:13px; line-height:1.5; }
.stepInsight .stepInsightEyebrow{ margin-bottom:0; }
.stepInsight .stepInsightBullets{ margin-top:4px; gap:6px; }
.stepInsight .stepInsightArt{ align-self:center; padding:10px; }

/* ===== MOBILE page-mode adaptation (added 2026-06-09) ===== */
@media (max-width: 600px){
  :host(.hzq-mode-page) .head{ padding: 14px 16px; }
  :host(.hzq-mode-page) .stepper{ padding: 12px 16px; }
  :host(.hzq-mode-modal) .stepper{
    flex-wrap:wrap;
    overflow:visible;
    padding:12px 16px;
  }
  :host(.hzq-mode-modal) .stepper-meta{
    order:-1;
    width:100%;
    margin:0 0 8px;
    padding:0;
    text-align:right;
  }
  :host(.hzq-mode-modal) .stepper-line{ flex:1 1 20px; }
  :host(.hzq-mode-page) .body{ padding: 24px 16px; }
  :host(.hzq-mode-page) .q{ font-size: 30px; letter-spacing: -0.5px; }
  :host(.hzq-mode-page) .subhead{ font-size: 15px; margin-bottom: 22px; }
  :host(.hzq-mode-page) .stepper-name{ display: none; }
  :host(.hzq-mode-page) .stepper-line{ flex-basis: 20px; }
  :host(.hzq-mode-page) .stepHero,
  :host(.hzq-mode-page) .stepInsight,
  .stepHero, .stepInsight{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 18px;
  }
  :host(.hzq-mode-page) .stepHeroTitle,
  :host(.hzq-mode-page) .stepInsightTitle,
  :host(.hzq-mode-page) .contactIntroTitle{ font-size: 22px; letter-spacing: -.4px; }
  .stepHeroArt, .stepInsightArt{ max-width: 240px; margin: 0 auto; width: 100%; }
}