/*
Direction contract: this page is measured in leads, not in looks. The booking
surface is the first thing a visitor can touch on every width, nothing sits
between the headline and the mount, and every later section ends in a link back
to that mount. Anything that would push the widget below the fold is cut.
*/

body {
  background: #eef1f4;
}

.chk-shell {
  width: min(calc(100% - 40px), 1180px);
  margin: 0 auto;
}

/* ---------- header ------------------------------------------------------- */

.chk-free-tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: #e7f8ef;
  color: #0a7a4b;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- hero + widget ------------------------------------------------ */

.chk-hero {
  position: relative;
  overflow: clip;
  padding: 40px 0 56px;
}

.chk-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 500px;
  background: var(--navy);
}

.chk-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(380px, 0.84fr) minmax(560px, 1.16fr);
  gap: 52px;
  width: min(calc(100% - 40px), 1180px);
  margin: 0 auto;
  align-items: start;
}

.chk-pitch {
  padding-top: 26px;
  color: var(--white);
}

.chk-pitch .hero-heading {
  max-width: 460px;
  color: var(--white);
  font-size: 56px;
}

.chk-pitch .hero-heading em {
  color: #ff3636;
}

.chk-pitch .hero-copy {
  max-width: 460px;
  margin-top: 18px;
  color: #c9d2db;
  font-size: 18px;
}

.chk-pitch .hero-copy strong {
  color: var(--white);
  font-weight: 700;
}

.chk-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 22px;
}

.chk-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 13px;
}

.chk-rating__g {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.chk-rating__stars {
  display: flex;
  gap: 1px;
}

.chk-rating__stars svg {
  width: 14px;
  height: 14px;
  fill: #ffb400;
}

.chk-rating strong {
  font-size: 14px;
  font-weight: 800;
}

.chk-rating__count {
  color: #b7c3ce;
}

.chk-deadline {
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.chk-pitch .location-line {
  margin-top: 18px;
  color: #d7dee5;
  font-size: 14.5px;
}

.chk-pitch .location-line svg {
  stroke: #ff3b3b;
}

.chk-tool {
  min-width: 0;
  padding: 18px 18px 16px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 26px 58px rgba(2, 10, 20, 0.22);
}

.chk-tool__lead {
  margin: 0 0 12px;
  padding: 0 2px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.chk-tool__lead strong {
  color: #0a7a4b;
  font-weight: 800;
}

.chk-tool .booking-stage {
  border-radius: 10px;
  background: var(--white);
  box-shadow: none;
}

.chk-tool #hdp-booking,
.chk-tool .booking-stage.is-ready #hdp-booking {
  min-height: 548px;
}

.chk-tool .booking-loading {
  padding: 12px 8px 22px;
}

.chk-tool .booking-loading__dates {
  margin-top: 16px;
}

.chk-tool .booking-loading__line:first-of-type {
  margin-top: 24px;
}

.chk-smallprint {
  display: grid;
  gap: 6px;
  padding: 13px 4px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.chk-smallprint p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
}

.chk-smallprint svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 2px;
  stroke: var(--green);
}

.chk-smallprint__note {
  padding-left: 21px;
}

.chk-kues {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.chk-kues img {
  width: 34px;
  height: 24px;
  object-fit: contain;
}

/* ---------- shared section furniture ------------------------------------- */

.chk-included,
.chk-steps,
.chk-price,
.chk-place,
.chk-faq {
  padding: 54px 0;
}

.chk-included {
  background: var(--white);
}

.chk-price,
.chk-faq {
  background: var(--white);
}

.chk-included h2,
.chk-steps h2,
.chk-price h2,
.chk-place h2,
.chk-faq h2 {
  max-width: 720px;
  margin: 0;
  color: var(--ink);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.chk-included h2 em,
.chk-steps h2 em,
.chk-price h2 em,
.chk-place h2 em {
  color: var(--red);
  font-style: normal;
}

.chk-section__lead {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}

.chk-price .eyebrow,
.chk-place .eyebrow {
  margin-bottom: 12px;
}

/* ---------- what is included --------------------------------------------- */

.chk-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.chk-items li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 14px;
  padding: 18px 18px 19px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.chk-items__icon {
  grid-row: 1 / span 2;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: #fff0f0;
}

.chk-items__icon svg {
  width: 21px;
  height: 21px;
  stroke: var(--red);
}

.chk-items strong {
  align-self: center;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
}

.chk-items li > span:last-child {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.45;
}

.chk-items li.chk-items__more {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  border-style: dashed;
  background: var(--soft);
  text-align: center;
}

.chk-items__more strong {
  color: var(--muted);
  font-size: 17px;
  white-space: nowrap;
}

/* ---------- steps --------------------------------------------------------- */

.chk-stepgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.chk-stepgrid li {
  display: grid;
  gap: 5px;
  padding: 22px 22px 24px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.chk-stepgrid__no {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
}

.chk-stepgrid strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.chk-stepgrid li > span:last-child {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.chk-steps__cta {
  margin: 28px 0 0;
}

/* ---------- price comparison (paid HU/AU, the upsell) -------------------- */

.chk-price__label {
  margin-top: 26px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chk-price__bars {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin-top: 14px;
}

.chk-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chk-bar__body {
  flex: 1 1 auto;
  min-width: 0;
}

.chk-bar__name {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.chk-bar__price {
  flex: 0 0 auto;
  min-width: 96px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.chk-bar__track {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: #e6eaee;
}

.chk-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #b8c1cb;
}

.chk-bar.is-hdp .chk-bar__fill {
  background: var(--red);
}

.chk-bar.is-hdp .chk-bar__name,
.chk-bar.is-hdp .chk-bar__price {
  color: var(--red);
}

.chk-price__foot {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- branch -------------------------------------------------------- */

.chk-place__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.chk-place__address {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.chk-place__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

.chk-place .benefit-list {
  margin: 0;
}

/* ---------- FAQ ----------------------------------------------------------- */

.chk-faq details {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.chk-faq details[open] {
  border-color: #c4ccd4;
}

.chk-faq summary {
  padding: 17px 46px 17px 20px;
  position: relative;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.chk-faq summary::-webkit-details-marker {
  display: none;
}

.chk-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 2.2px solid var(--muted);
  border-bottom: 2.2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 160ms ease-out;
}

.chk-faq details[open] summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.chk-faq details p {
  margin: 0;
  padding: 0 20px 19px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}

.chk-faq h2 {
  margin-bottom: 22px;
}

/* ---------- footer -------------------------------------------------------- */

.chk-footer {
  padding: 30px 0 34px;
  background: var(--white);
}

.chk-footer__legal {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.chk-footer__legal strong {
  color: var(--ink);
}

.chk-footer .site-footer__links {
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- sticky CTA ----------------------------------------------------
   Revealed by app.js only once the mount has scrolled off screen, so it can
   never cover the time slots it is supposed to sell. It stays out of the way
   while the consent bar owns the bottom of the screen. */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -8px 24px rgba(2, 10, 20, 0.12);
}

.sticky-cta .primary-link {
  width: min(100%, 520px);
  margin: 0 auto;
}

body.consent-open .sticky-cta {
  display: none;
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1080px) {
  .chk-hero__inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .chk-hero::before {
    height: 330px;
  }

  .chk-pitch {
    padding-top: 0;
  }

  .chk-pitch .hero-heading,
  .chk-pitch .hero-copy {
    max-width: 720px;
  }

  .chk-place__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 720px) {
  .chk-shell {
    width: calc(100% - 32px);
  }

  .chk-header {
    height: 58px;
    box-shadow: none;
  }

  .chk-header .site-header__inner {
    width: calc(100% - 24px);
  }

  .chk-header .brand-logo {
    width: 142px;
  }

  .chk-header .brand-divider {
    display: block;
    height: 22px;
  }

  .chk-header .kues-logo {
    display: block;
    width: 36px;
    height: 25px;
  }

  .chk-header .phone-link {
    display: inline-flex;
  }

  .chk-free-tag {
    display: none;
  }

  .chk-hero {
    padding: 16px 0 26px;
  }

  .chk-hero::before {
    height: 292px;
  }

  .chk-hero__inner {
    width: 100%;
    gap: 12px;
  }

  .chk-pitch {
    padding: 0 16px 2px;
  }

  .chk-pitch .hero-heading {
    font-size: 38px;
    line-height: 0.98;
  }

  .chk-pitch .hero-copy {
    margin-top: 9px;
    font-size: 15px;
    line-height: 1.35;
  }

  .chk-badges {
    gap: 8px;
    margin-top: 13px;
  }

  .chk-rating,
  .chk-deadline {
    padding: 6px 10px;
    font-size: 11.5px;
  }

  .chk-rating {
    gap: 6px;
  }

  .chk-rating__stars svg {
    width: 12px;
    height: 12px;
  }

  .chk-pitch .location-line {
    margin-top: 11px;
    font-size: 13px;
  }

  .chk-pitch .location-line svg {
    width: 16px;
    height: 16px;
  }

  .chk-tool {
    padding: 13px 8px 12px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -5px 22px rgba(2, 10, 20, 0.12);
  }

  .chk-tool__lead {
    margin-bottom: 10px;
    padding: 0 6px;
    font-size: 16px;
  }

  .chk-tool #hdp-booking,
  .chk-tool .booking-stage.is-ready #hdp-booking {
    min-height: 510px;
  }

  .chk-smallprint {
    padding: 11px 6px 0;
    font-size: 11.5px;
  }

  .chk-included,
  .chk-steps,
  .chk-price,
  .chk-place,
  .chk-faq {
    padding: 34px 0;
  }

  .chk-included h2,
  .chk-steps h2,
  .chk-price h2,
  .chk-place h2,
  .chk-faq h2 {
    font-size: 26px;
  }

  .chk-section__lead {
    font-size: 15.5px;
  }

  .chk-items {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .chk-items li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 12px;
    padding: 14px 15px 15px;
  }

  .chk-items__icon {
    width: 34px;
    height: 34px;
  }

  .chk-items__icon svg {
    width: 18px;
    height: 18px;
  }

  .chk-items strong {
    font-size: 16px;
  }

  .chk-items li > span:last-child {
    font-size: 14px;
  }

  .chk-items__more {
    padding: 12px 15px;
  }

  .chk-stepgrid {
    gap: 10px;
    margin-top: 20px;
  }

  .chk-stepgrid li {
    padding: 16px 17px 18px;
  }

  .chk-steps__cta .primary-link {
    display: flex;
    width: 100%;
  }

  .chk-price__bars {
    gap: 14px;
  }

  .chk-bar__price {
    min-width: 84px;
    font-size: 18px;
  }

  .chk-faq summary {
    padding: 15px 42px 15px 16px;
    font-size: 15.5px;
  }

  .chk-faq details p {
    padding: 0 16px 16px;
    font-size: 14.5px;
  }

  .chk-place__address {
    font-size: 15.5px;
  }

  .chk-place__actions .secondary-link {
    flex: 1 1 160px;
  }

  /* Room for the sticky bar so it never lands on the last footer link. */
  .chk-footer {
    padding-bottom: 96px;
  }
}

@media (max-width: 390px) {
  .chk-pitch .hero-heading {
    font-size: 34px;
  }

  .chk-header .brand-logo {
    width: 130px;
  }
}

/* ---------- service switch ---------------------------------------------
   The free check is the offer, but a visitor whose HU is actually due should
   not have to leave to book the paid one. Two links rather than a JS toggle:
   the widget picks the service up from ?service= at mount, so a navigation is
   the honest way to change it — remounting its React root in place is exactly
   the widget-internals fiddling that has broken these pages before.
   The variant is set on <html> in <head>, before first paint. */

.chk-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
}

.chk-switch__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--muted);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.chk-switch__opt:hover { border-color: #c3cad3; }

.chk-switch__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.chk-switch__meta {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Active state. Free is the default, so it wins unless the paid flag is set. */
.chk-switch__opt--free,
.is-paid-hu .chk-switch__opt--paid {
  border-color: var(--navy);
  background: var(--soft);
  color: var(--ink);
}

.is-paid-hu .chk-switch__opt--free {
  border-color: var(--line);
  background: var(--white);
  color: var(--muted);
}

.chk-switch__opt--free .chk-switch__meta { color: #0a7a4b; }
.is-paid-hu .chk-switch__opt--free .chk-switch__meta { color: inherit; }

.chk-switch__opt:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Copy that belongs to one variant only. */
.chk-paid-only { display: none; }
.is-paid-hu .chk-paid-only { display: block; }
.is-paid-hu .chk-free-only { display: none; }

@media (max-width: 380px) {
  .chk-switch { grid-template-columns: 1fr; }
}