:root {
  --blue: #08457f;
  --blue-bright: #0d5daa;
  --blue-soft: #e7f1fb;
  --ink: #102a43;
  --muted: #586d82;
  --line: #d4e1ed;
  --paper: #f4f8fc;
}

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

h1,
h2,
h3,
.copy h3,
.specs b {
  color: var(--ink) !important;
}

.brand img {
  width: 120px !important;
  max-height: 66px !important;
  object-fit: contain !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.descriptor {
  color: #35516b !important;
}

.hero {
  background: #f8fbfe !important;
  color: var(--ink) !important;
}

.hero:before {
  display: block !important;
  background: linear-gradient(90deg, rgba(248, 251, 254, 1) 0%, rgba(248, 251, 254, .97) 34%, rgba(248, 251, 254, .7) 52%, rgba(248, 251, 254, .08) 79%, rgba(248, 251, 254, 0) 100%) !important;
}

.hero:after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 58%, rgba(224, 235, 245, .24)) !important;
}

.hero-subtitle {
  color: #35516b !important;
}

.customer-scenarios {
  max-width: 710px;
  margin: 0 0 24px;
}

.customer-scenarios ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.customer-scenarios li {
  position: relative;
  padding: 11px 15px 11px 21px;
  border: 1px solid rgba(8, 69, 127, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .76);
  color: #28445e;
  font-size: 15px;
  line-height: 1.42;
}

.customer-scenarios li::before {
  position: absolute;
  top: 18px;
  left: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  content: '';
}

.payment-pitch {
  max-width: 650px;
  margin: 0 0 30px;
}

.payment-pitch strong {
  display: block;
  margin-bottom: 7px;
  color: var(--blue);
  font: 700 clamp(24px, 2.3vw, 33px)/1 Unbounded, Arial, sans-serif;
  letter-spacing: -.07em;
}

.payment-pitch p {
  margin: 0;
  color: #35516b;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.eyebrow,
.deadline,
.number,
.benefit-icon,
.price-main,
.kicker {
  color: var(--blue) !important;
}

.eyebrow i,
.kicker i {
  background: var(--blue) !important;
  box-shadow: 0 0 0 5px rgba(8, 69, 127, .14) !important;
}

.offer {
  border: 1px solid rgba(8, 69, 127, .13);
  box-shadow: 0 22px 58px rgba(22, 63, 99, .15) !important;
}

.discount,
button,
.lead-form button {
  background: var(--blue) !important;
}

button:hover,
.lead-form button:hover {
  background: #063968 !important;
}

@keyframes cta-pulse-out {
  0% { box-shadow: 0 0 0 0 rgba(8, 69, 127, .52); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(8, 69, 127, 0); }
}

.offer-main,
.offer > .lead-form,
.side-promo,
.catalog-slot {
  background: rgba(255, 255, 255, .98) !important;
}

.lead-form input:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(8, 69, 127, .11) !important;
}

.benefits,
.catalog {
  background: var(--paper) !important;
}

.card {
  border-color: var(--line) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(31, 70, 105, .04);
}

.card:hover {
  background: #fff !important;
  box-shadow: 0 18px 38px rgba(31, 70, 105, .11) !important;
}

.card p,
.copy p,
.specs,
.price-unit {
  color: var(--muted) !important;
}

.top {
  background: #f8fbfe !important;
  color: var(--ink) !important;
}

.top:first-child {
  border-bottom: 1px solid var(--line);
}

.thanks {
  background: linear-gradient(135deg, #f8fbfe 0%, #edf5fb 100%) !important;
}

.thanks p {
  color: #4b6278 !important;
}

.thanks:after {
  color: rgba(8, 69, 127, .11) !important;
}

footer {
  background: #102a43 !important;
  color: #b9c9d9 !important;
  border-top: 0;
}

.footer-grid h4,
.footer-grid h4 span,
.privacy,
.privacy a {
  color: #9cc9f3 !important;
}

.footer-grid p {
  color: #e1edf8 !important;
}

.footer-grid strong {
  color: #fff !important;
}

.phone {
  color: #fff !important;
}

.privacy {
  border-top-color: rgba(255, 255, 255, .16) !important;
}

.footer-grid--details {
  grid-template-columns: 2fr 1fr !important;
}

@media (max-width: 850px) {
  .footer-grid--details {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px) {
  .customer-scenarios {
    margin-bottom: 20px;
  }

  .customer-scenarios li {
    padding: 10px 13px 10px 20px;
    font-size: 14px;
  }

  .payment-pitch {
    margin-bottom: 26px;
  }

  .payment-pitch p {
    font-size: 15px;
  }

  .footer-grid--details {
    grid-template-columns: 1fr !important;
  }
}

/* Refined typography: calmer contrast, no heavy display weights. */
body { font-synthesis: none; }
h1, h2, h3, .copy h3, .section-top h2 { font-weight: 400 !important; letter-spacing: -.045em !important; }
.hero-subtitle, .payment-pitch p, .customer-scenarios li, .card p, .copy p, .specs { font-weight: 400 !important; }
.payment-pitch strong, .gain, .price-main { font-weight: 500 !important; letter-spacing: -.055em !important; }
.card h3 { font-weight: 500 !important; }
.deadline, .eyebrow, .kicker, .number, .footer-grid h4, .footer-grid h4 span { font-weight: 500 !important; }
.footer-grid strong { font-weight: 500 !important; }
button, .lead-form button { font-weight: 500 !important; letter-spacing: 0 !important; }

.region-actions .yes {
  background: #16803c !important;
}

.region-actions .yes:hover {
  background: #106d32 !important;
}

.region-actions .no {
  background: #d9303e !important;
}

.region-actions .no:hover {
  background: #bd2431 !important;
}

@media (max-width: 700px) {
  .brand img {
    width: 90px !important;
    max-height: 54px !important;
  }

  .hero:before {
    background: linear-gradient(180deg, #f8fbfe 0%, #f8fbfe 55%, rgba(248, 251, 254, .78) 69%, rgba(248, 251, 254, 0) 88%) !important;
  }

  .hero:after {
    background: linear-gradient(180deg, #f8fbfe 0%, rgba(248, 251, 254, .7) 16%, rgba(248, 251, 254, .12) 38%, rgba(248, 251, 254, 0) 58%) !important;
  }
}

/* Kitchen selection quiz */
body.quiz-open {
  overflow: hidden;
}

.quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 7, 13, .82);
  backdrop-filter: blur(10px);
}

.quiz-modal[hidden],
.quiz-step[hidden] {
  display: none;
}

.quiz-dialog {
  position: relative;
  width: min(100%, 880px);
  max-height: calc(100dvh - 48px);
  padding: 38px 42px 34px;
  overflow: auto;
  border: 1px solid rgba(132, 162, 255, .26);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(84, 118, 220, .2), transparent 38%),
    #101621;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .58);
  color: #f6f8ff;
  animation: region-dialog-in .38s cubic-bezier(.2,.8,.2,1) both;
}

.quiz-close {
  position: absolute;
  top: 13px;
  right: 16px;
  z-index: 2;
  display: grid;
  width: 38px;
  min-height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07) !important;
  color: #dce5fb !important;
  font: 400 29px/1 Arial, sans-serif !important;
  box-shadow: none !important;
  animation: none !important;
}

.quiz-close:hover {
  transform: none !important;
  background: rgba(255, 255, 255, .14) !important;
}

.quiz-progress {
  height: 5px;
  margin: 0 50px 24px 0;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
}

.quiz-progress-bar {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6b8df3, #84a2ff);
  transition: width .35s ease;
}

.quiz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  color: #aabfff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.quiz-step h2 {
  max-width: 760px;
  margin: 0 0 27px;
  color: #f7f9ff;
  font: 500 clamp(28px, 3.2vw, 42px)/1.12 Manrope, Arial, sans-serif;
  letter-spacing: -.045em;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quiz-option {
  position: relative;
  min-height: 76px;
  padding: 16px 52px 16px 20px;
  justify-content: flex-start;
  border: 1px solid rgba(192, 207, 240, .16) !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045) !important;
  color: #edf2ff !important;
  text-align: left;
  white-space: normal;
  font: 500 15px/1.38 Manrope, Arial, sans-serif;
  box-shadow: none !important;
  animation: none !important;
}

.quiz-option::after {
  position: absolute;
  top: 50%;
  right: 19px;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(170, 191, 255, .6);
  border-radius: 50%;
  content: '';
  transform: translateY(-50%);
}

.quiz-option:hover,
.quiz-option.is-selected {
  transform: translateY(-1px) !important;
  border-color: #6b8df3 !important;
  background: rgba(107, 141, 243, .14) !important;
}

.quiz-option.is-selected::after {
  border: 5px solid #6b8df3;
  background: #fff;
}

.quiz-back {
  width: auto;
  min-height: 36px;
  margin-top: 22px;
  padding: 0;
  background: transparent !important;
  color: #aabfff !important;
  box-shadow: none !important;
  animation: none !important;
  font-size: 14px;
}

.quiz-back:hover {
  transform: none !important;
  color: #fff !important;
}

.quiz-final > p {
  max-width: 650px;
  margin: -10px 0 22px;
  color: #c5cede;
  font-size: 17px;
  line-height: 1.5;
}

.quiz-final ul {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  color: #eef2fb;
}

.quiz-final li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 0;
}

.quiz-final li::before {
  display: none;
}

.quiz-final .benefit-icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 20px;
  color: #6b8df3 !important;
}

.quiz-lead-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
  gap: 10px;
  max-width: 720px;
}

.quiz-lead-form > .phone-field {
  width: 100%;
  min-width: 0;
  flex: none;
}

.quiz-lead-form input[type='tel'] {
  width: 100%;
  height: 64px;
  padding: 0 17px;
  border: 1px solid #c9d8e8;
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: #102a43;
  font: 500 16px Manrope, Arial, sans-serif;
  transition: border-color .18s, box-shadow .18s;
}

.quiz-lead-form input[type='tel']:focus {
  border-color: #6b8df3;
  box-shadow: 0 0 0 4px rgba(107, 141, 243, .25), 0 10px 30px rgba(0, 0, 0, .18);
}

.quiz-lead-form button[type='submit'] {
  min-height: 64px;
  border-radius: 11px;
  font-size: 15px;
}

.quiz-phone-error {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  color: #ff9ca7;
  font-size: 12px;
  font-weight: 700;
}

.quiz-phone-error.is-visible {
  display: block;
}

@media (max-width: 650px) {
  .quiz-modal {
    align-items: end;
    padding: 0;
  }

  .quiz-dialog {
    width: 100%;
    max-height: 94dvh;
    padding: 28px 20px 24px;
    border-radius: 22px 22px 0 0;
  }

  .quiz-progress {
    margin: 0 44px 20px 0;
  }

  .quiz-meta {
    margin-bottom: 14px;
    font-size: 10px;
  }

  .quiz-step h2 {
    margin-bottom: 21px;
    font-size: 28px;
  }

  .quiz-options {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .quiz-option {
    min-height: 63px;
    padding: 13px 48px 13px 16px;
    font-size: 14px;
  }

  .quiz-final > p {
    font-size: 15px;
  }

  .quiz-final ul {
    font-size: 14px;
  }

  .quiz-lead-form {
    grid-template-columns: 1fr;
  }

  .quiz-phone-error {
    grid-column: auto;
  }
}

@media (min-width: 561px) {
  .hero header .brand img {
    width: 107px !important;
    max-height: 43px !important;
  }
}

/* The quiz uses the same light, centred modal language as the catalog. */
.quiz-modal {
  place-items: center;
  padding: 24px;
  background: rgba(4, 10, 18, .74);
  backdrop-filter: blur(9px);
}

.quiz-dialog {
  width: min(100%, 620px);
  max-height: calc(100dvh - 48px);
  padding: 42px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .4);
  color: #102a43;
}

.quiz-close {
  top: 13px;
  right: 16px;
  width: 34px;
  min-height: 34px;
  background: transparent !important;
  color: #586d82 !important;
}

.quiz-close:hover {
  background: #eef4fa !important;
  color: #102a43 !important;
}

.quiz-progress {
  margin: 0 42px 22px 0;
  background: #e8eef5;
}

.quiz-progress-bar {
  background: linear-gradient(90deg, #6b8df3, #5476dc);
}

.quiz-meta {
  color: #5476dc;
}

.quiz-step h2 {
  margin-bottom: 24px;
  color: #102a43;
  font: 400 clamp(27px, 3vw, 36px)/1.12 Manrope, Arial, sans-serif;
}

.quiz-options {
  grid-template-columns: 1fr;
  gap: 10px;
}

.quiz-option {
  min-height: 64px;
  border-color: #d5e0eb !important;
  background: #f7f9fc !important;
  color: #18344f !important;
}

.quiz-option::after {
  border-color: #88a1b8;
}

.quiz-option:hover,
.quiz-option.is-selected {
  border-color: #6b8df3 !important;
  background: #f0f3ff !important;
  color: #102a43 !important;
}

.quiz-option.is-selected::after {
  border-color: #6b8df3;
}

.quiz-back {
  color: #5476dc !important;
}

.quiz-back:hover {
  color: #3f5fc6 !important;
}

.quiz-final > p {
  color: #586d82;
}

.quiz-final ul {
  color: #18344f;
}

.quiz-final li::before {
  color: #5476dc;
}

.quiz-lead-form .phone-field label {
  background: #fff !important;
  color: #6b7280 !important;
}

.quiz-lead-form .phone-field.is-active label {
  color: #5476dc !important;
}

.quiz-lead-form input[type='tel']:focus {
  border-color: #6b8df3;
  box-shadow: 0 0 0 4px rgba(107, 141, 243, .2), 0 10px 28px rgba(85, 118, 220, .12);
}

.quiz-lead-form button[type='submit'] {
  background: linear-gradient(135deg, #6b8df3, #5476dc) !important;
  box-shadow: 0 10px 28px rgba(85, 118, 220, .24) !important;
}

.quiz-lead-form button[type='submit']:hover {
  background: linear-gradient(135deg, #84a2ff, #5d7ee0) !important;
}

.quiz-phone-error {
  color: #c72d38;
}

@media (max-width: 650px) {
  .quiz-modal {
    align-items: center;
    padding: 16px;
  }

  .quiz-dialog {
    width: min(100%, 540px);
    max-height: calc(100dvh - 32px);
    padding: 32px 22px 24px;
    border-radius: 16px;
  }

  .quiz-progress {
    margin: 0 38px 18px 0;
  }

  .quiz-step h2 {
    font-size: 27px;
  }
}

/* Dark premium skin for bel-mebel.online */
:root {
  --blue: #6f96ff;
  --blue-bright: #91adff;
  --blue-soft: rgba(111, 150, 255, .14);
  --ink: #f4f6fb;
  --muted: #9ea8ba;
  --line: rgba(213, 223, 242, .14);
  --paper: #080b12;
}

body { background: #080b12 !important; color: #f4f6fb !important; }
h1, h2, h3, .copy h3, .specs b { color: #f4f6fb !important; }
.descriptor { color: #a5afbf !important; }

.hero { background: #070a10 !important; color: #f4f6fb !important; }
.hero:before { display: block !important; background: radial-gradient(circle at 77% 18%, rgba(81, 109, 174, .2), transparent 33%), linear-gradient(90deg, #070a10 0%, rgba(7, 10, 16, .97) 33%, rgba(7, 10, 16, .75) 53%, rgba(7, 10, 16, .23) 78%, rgba(7, 10, 16, .08) 100%) !important; }
.hero:after { background: linear-gradient(180deg, rgba(6, 8, 13, .08), transparent 58%, rgba(5, 7, 12, .65)) !important; }
.hero-subtitle { color: #d9deea !important; }

.customer-scenarios { max-width: 710px; margin-bottom: 25px; }
.customer-scenarios li { position: relative; padding: 12px 16px 12px 23px; border: 1px solid rgba(190, 207, 245, .13); border-radius: 12px; background: linear-gradient(120deg, rgba(22, 29, 43, .92), rgba(14, 19, 29, .76)); box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 12px 30px rgba(0, 0, 0, .16); color: #c7cfdd; }
.customer-scenarios li::before { background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.payment-pitch strong { color: #fff; }
.payment-pitch p { color: #aeb8c9; }

.eyebrow, .deadline, .number, .benefit-icon, .price-main, .kicker { color: var(--blue) !important; }
.eyebrow i, .kicker i { background: var(--blue) !important; box-shadow: 0 0 0 5px rgba(111, 150, 255, .14), 0 0 18px rgba(111, 150, 255, .38) !important; }

.offer { border-color: rgba(192, 207, 240, .16) !important; background: rgba(14, 19, 29, .84) !important; box-shadow: 0 28px 78px rgba(0, 0, 0, .38) !important; }
.discount, button, .lead-form button { background: linear-gradient(135deg, #6b8df3, #5476dc) !important; box-shadow: 0 10px 28px rgba(85, 118, 220, .24) !important; }
button:hover, .lead-form button:hover { background: linear-gradient(135deg, #84a2ff, #5d7ee0) !important; }
@keyframes cta-pulse-out { 0% { box-shadow: 0 0 0 0 rgba(111, 150, 255, .52); } 70%, 100% { box-shadow: 0 0 0 18px rgba(111, 150, 255, 0); } }
.offer-main, .offer > .lead-form, .side-promo, .catalog-slot { background: #101621 !important; }
.offer-main { border-left: 1px solid rgba(192, 207, 240, .1); }
.side-promo { background: linear-gradient(160deg, #121a27, #0e131d) !important; }
.catalog-slot { background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .075), transparent 60%) !important; }
.gain, .offer li { color: #eef2fb !important; }
.lead-form input { border-color: rgba(205, 218, 247, .17) !important; background: #0b1019 !important; color: #fff !important; }
.phone-field label { background: #0b1019 !important; color: #a7b0c0 !important; }
.lead-form input::placeholder { color: #7d8798; }
.lead-form input:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(111, 150, 255, .13) !important; }

.benefits, .catalog { background: #080b12 !important; }
.card { border-color: var(--line) !important; background: linear-gradient(145deg, #131a27, #0e141e) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 30px rgba(0, 0, 0, .14); }
.card:hover { background: linear-gradient(145deg, #182131, #111824) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 20px 42px rgba(0, 0, 0, .26) !important; }
.card p, .copy p, .specs, .price-unit { color: var(--muted) !important; }
.visual { background: #161d2a !important; }

.top { background: #080b12 !important; color: #f4f6fb !important; }
.top:first-child { border-bottom-color: rgba(206, 218, 246, .1) !important; }
.thanks { background: radial-gradient(circle at 80% 20%, rgba(70, 97, 165, .18), transparent 33%), #080b12 !important; }
.thanks p { color: #b4bdcd !important; }
.thanks:after { color: rgba(111, 150, 255, .15) !important; }
footer { background: #05070c !important; color: #aeb8ca !important; border-top: 1px solid rgba(206, 218, 246, .09) !important; }
.footer-grid h4, .footer-grid h4 span, .privacy, .privacy a { color: #8eabff !important; }
.footer-grid p { color: #bbc4d2 !important; }
.footer-grid strong { color: #fff !important; }
.privacy { border-top-color: rgba(255, 255, 255, .11) !important; }

@media (max-width: 700px) {
  .hero:before { background: linear-gradient(180deg, #080b12 0%, #080b12 51%, rgba(8, 11, 18, .82) 71%, rgba(8, 11, 18, .08) 100%) !important; }
  .hero:after { background: linear-gradient(180deg, rgba(8, 11, 18, .88), rgba(8, 11, 18, .28) 42%, rgba(8, 11, 18, 0) 70%) !important; }
}

/* Iteration: compact copy column, icon-led advantages and stripped CTA shell. */
.brand img { filter: brightness(0) invert(1) !important; }

.hero-content,
.offer {
  max-width: 620px !important;
}

.customer-scenarios ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-scenarios .scenario-repair {
  grid-column: 1 / -1;
}

.offer {
  grid-template-columns: 1fr !important;
}

.offer-main {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-left: 0;
  border-radius: 20px 20px 0 0 !important;
}

.offer > .lead-form {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.benefit-card-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 0 32px;
  color: var(--blue);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(111, 150, 255, .24));
}

.footer-grid--details > div:first-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
}

.footer-grid--details > div:first-child h4 {
  grid-column: 1 / -1;
}

footer {
  padding: 46px 0 24px !important;
}

.footer-grid {
  padding-bottom: 0 !important;
}

.privacy {
  margin-top: 24px !important;
}

@media (max-width: 700px) {
  .hero:before {
    background: linear-gradient(180deg, rgba(8, 11, 18, .98) 0%, rgba(8, 11, 18, .9) 48%, rgba(8, 11, 18, .46) 73%, rgba(8, 11, 18, .12) 100%) !important;
  }
}

@media (max-width: 560px) {
  .hero-content,
  .offer {
    max-width: none !important;
  }

  .customer-scenarios ul {
    gap: 8px;
  }

  .customer-scenarios li {
    min-height: 118px;
    padding: 11px 11px 11px 19px;
    font-size: 13px;
    line-height: 1.38;
  }

  .customer-scenarios .scenario-repair {
    min-height: auto;
  }

  .benefit-card-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 28px;
  }

  .footer-grid--details > div:first-child {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  footer {
    padding: 40px 0 22px !important;
  }
}

/* Hero v2: a concise offer and a quiz-first CTA. */
.hero-content,
.offer {
  max-width: 730px !important;
}

.hero h1 {
  max-width: 700px;
  margin-bottom: 18px;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(48px, 4.55vw, 76px) !important;
  font-weight: 400 !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}

.hero-subtitle {
  margin-bottom: 31px !important;
  font-size: 18px !important;
}

.payment-pitch {
  max-width: 560px;
  margin: 0 0 31px;
}

.payment-rate {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
}

.payment-pitch strong {
  margin: 0 0 10px;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(31px, 2.8vw, 43px) !important;
  font-weight: 400 !important;
  letter-spacing: -.065em !important;
}

.rate-chip {
  position: absolute;
  top: -8px;
  right: -42px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(151, 177, 255, .58);
  border-radius: 50%;
  background: rgba(84, 118, 220, .22);
  color: #b9c9ff;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 0 18px rgba(111, 150, 255, .19);
}

.payment-pitch p {
  max-width: 530px;
  font-size: 16px;
}

.offer {
  display: grid !important;
  grid-template-columns: 184px minmax(0, 1fr) !important;
  grid-template-rows: auto auto;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.offer-promo {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 232px;
  padding: 24px 20px;
  border-right: 1px solid rgba(192, 207, 240, .12);
  background: linear-gradient(155deg, #192a57, #101827 65%, #0c111b) !important;
}

.offer-promo .discount {
  height: auto;
  padding: 0;
  background: transparent !important;
  color: #fff;
  font: 400 clamp(50px, 5.2vw, 74px)/.9 Manrope, Arial, sans-serif;
  letter-spacing: -.1em;
}

.offer-promo .deadline {
  color: #aabfff !important;
  font-size: 12px;
  font-weight: 500 !important;
  line-height: 1.35;
}

.offer-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 0 !important;
  padding: 25px 27px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.gain {
  margin-bottom: 15px !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(23px, 2vw, 30px) !important;
  font-weight: 400 !important;
  line-height: 1.13 !important;
  letter-spacing: -.045em !important;
}

.offer ul {
  gap: 8px !important;
  font-size: 14px !important;
}

.quiz-cta {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  min-height: 57px;
  margin: 0 27px 23px;
  padding: 0 22px;
  border: 1px solid rgba(183, 202, 255, .22);
  border-radius: 11px;
  font-size: 16px;
  font-weight: 500 !important;
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: clamp(44px, 7vw, 61px) !important;
  }
}

@media (max-width: 560px) {
  .hero-content,
  .offer {
    max-width: none !important;
  }

  .hero h1 {
    margin-bottom: 18px;
    font-size: 45px !important;
    line-height: .98 !important;
  }

  .hero-subtitle {
    margin-bottom: 27px !important;
    font-size: 17px !important;
  }

  .payment-pitch {
    margin-bottom: 28px;
  }

  .payment-pitch strong {
    font-size: 35px !important;
  }

  .payment-pitch p {
    font-size: 15px !important;
  }

  .rate-chip {
    top: -5px;
    right: -35px;
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .offer {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto;
    border-radius: 16px !important;
  }

  .offer-promo {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    min-height: 0;
    padding: 19px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(192, 207, 240, .12);
  }

  .offer-promo .discount {
    font-size: 55px;
  }

  .offer-promo .deadline {
    max-width: 100px;
    text-align: right;
  }

  .offer-main {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 22px 20px 12px !important;
  }

  .gain {
    font-size: 26px !important;
  }

  .offer ul {
    font-size: 14px !important;
  }

  .quiz-cta {
    grid-column: 1;
    grid-row: 3;
    width: auto;
    min-height: 58px;
    margin: 8px 20px 20px;
  }
}

/* Light modal surfaces keep their own dark type hierarchy. */
.region-dialog h1,
.region-dialog h2,
.region-dialog h3 {
  color: #111827 !important;
}

.region-dialog p {
  color: #5b6574 !important;
}

/* Final typography and CTA refinement. */
body,
button,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6,
.discount,
.deadline,
.gain,
.price-main,
.payment-pitch strong,
.kicker,
.eyebrow,
.footer-grid h4,
.number {
  font-family: Manrope, Arial, sans-serif !important;
}

.brand img {
  opacity: 1 !important;
  filter: grayscale(1) brightness(0) invert(1) contrast(500%) !important;
}

.hero h1 {
  width: 100%;
  max-width: none;
}

.hero-price {
  display: inline-flex;
  align-items: center;
  gap: .16em;
  margin-left: 0;
  font-size: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.hero-price .rate-chip {
  position: static;
  right: auto;
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin: 0;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transform: translateY(-.08em);
}

.hero .hero-subtitle {
  max-width: 690px;
  color: #d8e0ef !important;
  font-weight: 400 !important;
}

/* A light gradient keeps copy readable while preserving the kitchen photograph. */
.hero::before {
  display: block !important;
  background: linear-gradient(90deg, rgba(4, 9, 17, .64) 0%, rgba(4, 9, 17, .52) 35%, rgba(4, 9, 17, .24) 62%, rgba(4, 9, 17, .04) 100%) !important;
}

.hero::after {
  display: none !important;
}

.offer {
  overflow: visible !important;
}

.offer-promo {
  background: transparent !important;
  border-right-color: transparent !important;
}

.offer-promo .discount {
  text-shadow: 0 0 18px rgba(135, 163, 255, .3), 0 0 45px rgba(78, 113, 225, .2);
}

.quiz-cta {
  position: relative;
  z-index: 4;
  min-height: 68px;
  font-size: 18px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.quiz-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(79, 112, 218, .42) !important;
  filter: brightness(1.08);
}

@media (max-width: 560px) {
  .gain {
    font-size: 22px !important;
    line-height: 1.14 !important;
  }

  .quiz-cta {
    min-height: 66px;
    font-size: 18px;
  }
}

/* Visual polish: larger desktop statement, an unambiguous white mark and a lighter mobile image. */
.brand img {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.offer-promo .discount {
  background: transparent !important;
  box-shadow: none !important;
}

.offer-promo,
.offer-main {
  background: transparent !important;
}

.offer-promo {
  border-right-color: transparent !important;
}

.offer {
  background: #101621 !important;
  border-radius: 18px !important;
}

.offer-promo .deadline span {
  display: block;
  white-space: nowrap;
}

.offer-promo .deadline .deadline-label {
  font-weight: 600;
}

.offer ul {
  margin: 18px 0 20px !important;
}

@media (min-width: 701px) {
  .hero,
  .hero-inner {
    min-height: 740px !important;
  }

  .hero-content {
    max-width: 730px !important;
    padding-top: 45px !important;
    padding-bottom: 38px !important;
  }

  .hero h1 {
    width: 100% !important;
    max-width: 730px !important;
    font-size: clamp(78px, 6.8vw, 100px) !important;
    letter-spacing: -.075em !important;
  }

  .offer {
    max-width: 730px !important;
  }

  .payment-pitch p {
    max-width: none !important;
    font-size: 14px !important;
    letter-spacing: -.022em;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .hero-price {
    display: inline-flex;
    font-size: inherit;
  }

  .hero-price .rate-chip {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 11px;
  }

  .hero .hero-subtitle {
    max-width: 100%;
  }

  .hero::before {
    display: block !important;
    background: linear-gradient(180deg, rgba(4, 9, 17, .8) 0%, rgba(4, 9, 17, .68) 42%, rgba(4, 9, 17, .46) 74%, rgba(4, 9, 17, .24) 100%) !important;
  }

  .payment-pitch p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: -.025em;
  }

  .hero-photo {
    object-position: 95% center !important;
    filter: brightness(1.78) contrast(1.08) saturate(1.08) !important;
  }

  .hero:before {
    background: linear-gradient(180deg, rgba(4, 9, 17, .8) 0%, rgba(4, 9, 17, .68) 42%, rgba(4, 9, 17, .46) 74%, rgba(4, 9, 17, .24) 100%) !important;
  }

  .offer-promo .deadline {
    max-width: none !important;
  }

  .offer ul {
    margin-top: 28px !important;
    margin-bottom: 22px !important;
  }
}

/* A calm travelling glint makes the primary CTA feel actionable without visual noise. */
.quiz-cta {
  isolation: isolate;
  overflow: hidden !important;
  animation: none !important;
}

.quiz-cta::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, .08) 54%, transparent 68%);
  content: '';
  pointer-events: none;
  transform: translateX(-125%);
  animation: quiz-cta-glint 4.4s ease-in-out infinite;
}

@keyframes quiz-cta-glint {
  0%, 58% { transform: translateX(-125%); }
  82%, 100% { transform: translateX(125%); }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-cta::before { animation: none; }
}

/* Shared interaction language for every lead field and action button. */
input:not([type='hidden']):focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #0d5daa !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(13, 93, 170, .16) !important;
}

.lead-form button {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
}

.lead-form button::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, .08) 54%, transparent 68%);
  content: '';
  pointer-events: none;
  transform: translateX(-125%);
  animation: quiz-cta-glint 4.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lead-form button::before { animation: none; }
}

/* The repeated CTA is deliberately warmer and brighter than the hero offer. */
.benefits-cta {
  padding: 0 0 110px;
  background: #080c14;
}

.benefits-cta-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px;
  align-items: stretch;
}

.offer.offer--secondary {
  max-width: 100% !important;
  grid-template-columns: 236px minmax(0, 1fr) !important;
  border-color: rgba(90, 132, 239, .72) !important;
  background: radial-gradient(circle at 82% 12%, rgba(47, 99, 209, .18), transparent 34%), #101621 !important;
  box-shadow: 0 0 0 1px rgba(84, 118, 220, .18), 0 26px 76px rgba(0, 0, 0, .42), 0 0 48px rgba(40, 89, 191, .18) !important;
}

.offer--secondary .offer-promo,
.offer--secondary .offer-main {
  background: transparent !important;
}

.offer--secondary .offer-promo {
  border-right: 1px solid rgba(255, 255, 255, .22) !important;
}

.offer--secondary .discount {
  color: #fff !important;
  text-shadow: 0 6px 22px rgba(16, 7, 40, .38) !important;
}

.offer--secondary .deadline,
.offer--secondary .gain,
.offer--secondary .offer-main,
.offer--secondary .offer-main li {
  color: #fff !important;
}

.offer--secondary .deadline {
  color: #aabfff !important;
}

.offer--secondary .benefit-icon {
  color: #6f96ff !important;
}

.quiz-cta.quiz-cta--secondary {
  border-color: rgba(183, 202, 255, .22) !important;
  background: linear-gradient(135deg, #6b8df3, #5476dc) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(85, 118, 220, .28) !important;
}

.quiz-cta.quiz-cta--secondary::before {
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .32) 48%, rgba(255, 255, 255, .08) 54%, transparent 68%);
}

.benefits-cta-aside {
  position: relative;
  display: flex;
  min-height: 100%;
  padding: 38px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(90, 132, 239, .62);
  border-radius: 18px;
  background: radial-gradient(circle at 82% 14%, rgba(47, 99, 209, .28), transparent 36%), #101621;
  box-shadow: 0 0 0 1px rgba(84, 118, 220, .16), 0 26px 76px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .08);
  color: #fff;
}

.benefits-cta-aside::before,
.benefits-cta-aside::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  content: '';
}

.benefits-cta-aside::before {
  top: -210px;
  right: -155px;
  width: 410px;
  height: 410px;
}

.benefits-cta-aside::after {
  top: -125px;
  right: -70px;
  width: 250px;
  height: 250px;
}

.benefits-cta-aside img,
.benefits-cta-aside span,
.benefits-cta-aside p {
  position: relative;
  z-index: 1;
}

.benefits-cta-aside img {
  width: 134px;
  height: auto;
  margin-bottom: auto;
}

.benefits-cta-aside span {
  margin-bottom: 10px;
  color: #aabfff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.benefits-cta-aside p {
  margin: 0;
  font-size: clamp(25px, 2.1vw, 34px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.055em;
}

@media (max-width: 700px) {
  .benefits-cta {
    padding-bottom: 72px;
  }

  .benefits-cta-layout {
    grid-template-columns: 1fr;
  }

  .offer.offer--secondary {
    grid-template-columns: 1fr !important;
  }

  .offer--secondary .offer-promo {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .2) !important;
  }

.benefits-cta-aside {
    min-height: 220px;
    padding: 28px;
  }
}

/* Keep quiz headings dark on the shared light modal surface. */
.quiz-dialog .quiz-step h2 {
  color: #102a43 !important;
}

/* Text navigation must never inherit the primary CTA treatment. */
button.quiz-back,
button.quiz-back:hover,
button.quiz-back:active {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  padding: 0;
  flex: none;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  color: #5476dc !important;
  font-size: 14px;
  font-weight: 600 !important;
  transition: color .18s ease !important;
}

button.quiz-back:hover {
  color: #304fad !important;
}

button.quiz-back:focus-visible {
  outline: 2px solid #6b8df3;
  outline-offset: 4px;
}

@media (min-width: 651px) {
  .quiz-lead-form {
    grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr);
  }

  .quiz-lead-form button[type='submit'],
  .catalog-dialog .lead-form button[type='submit'] {
    font-size: 18px !important;
  }
}

/* Catalog popup: editorial copy, a tactile cover, and a full-width form below. */
.catalog-modal .catalog-dialog {
  width: min(100%, 700px);
  padding: 36px 38px 38px;
}

.catalog-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 190px;
  align-items: center;
  gap: 28px;
  margin-bottom: 26px;
}

.catalog-modal .catalog-copy h2 {
  margin: 0 0 16px;
  color: #102a43 !important;
  font: 400 clamp(30px, 3.2vw, 43px)/1.06 Manrope, Arial, sans-serif !important;
  letter-spacing: -.055em;
}

.catalog-modal .catalog-copy p {
  margin: 0;
  color: #586d82;
  font-size: 16px;
  line-height: 1.5;
}

.catalog-preview {
  position: relative;
  display: grid;
  min-height: 228px;
  place-items: center;
  overflow: visible;
  background: transparent;
}

.catalog-preview::after {
  display: none;
}

.catalog-book-image {
  display: block;
  width: 176px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 15px rgba(20, 30, 45, .2));
}

.catalog-book {
  position: relative;
  z-index: 1;
  width: 164px;
  height: 220px;
  overflow: hidden;
  border-radius: 3px 7px 7px 3px;
  background: #0a0c10;
  box-shadow: 0 14px 28px rgba(20, 30, 45, .24);
  transform: none;
}

.catalog-book::before {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 3;
  width: 9px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(255, 255, 255, .08));
  content: '';
}

.catalog-book-photo,
.catalog-book-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.catalog-book-photo {
  top: auto;
  height: 56%;
  object-fit: cover;
  object-position: center;
}

.catalog-book-shade {
  background: linear-gradient(180deg, rgba(5, 9, 16, .34), rgba(5, 9, 16, .16) 42%, rgba(5, 9, 16, .82));
}

.catalog-book-logo {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  width: 68px;
  height: auto;
}

.catalog-book span {
  position: absolute;
  top: 72px;
  right: 14px;
  bottom: auto;
  left: 18px;
  z-index: 2;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.05em;
}

.catalog-modal .catalog-dialog .lead-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
}

.catalog-modal .catalog-dialog .lead-form .phone-field,
.catalog-modal .catalog-dialog .lead-form button {
  width: 100%;
}

.catalog-modal .catalog-dialog .phone-error {
  grid-row: 2;
}

@media (max-width: 650px) {
  .catalog-modal .catalog-dialog {
    width: min(100%, 540px);
    padding: 30px 20px 22px;
  }

  .catalog-intro {
    grid-template-columns: minmax(0, 1.25fr) 104px;
    gap: 13px;
    margin: 4px 0 24px;
  }

  .catalog-modal .catalog-copy h2 {
    margin-bottom: 11px;
    font-size: clamp(23px, 7vw, 29px) !important;
  }

  .catalog-modal .catalog-copy p {
    font-size: 13px;
    line-height: 1.42;
  }

  .catalog-preview {
    min-height: 150px;
  }

  .catalog-book {
    width: 102px;
    height: 146px;
    box-shadow: 0 10px 20px rgba(20, 30, 45, .22);
  }

  .catalog-book-image {
    width: 104px;
    filter: drop-shadow(0 9px 10px rgba(20, 30, 45, .18));
  }

  .catalog-book-logo {
    top: 11px;
    left: 13px;
    width: 48px;
  }

  .catalog-book span {
    top: 50px;
    right: 9px;
    bottom: auto;
    left: 13px;
    font-size: 15px;
  }
}