.s5-guide-section {
  /* Align with s5-rebrand surfaces (e.g. .s5-projects-grid__card, .s5-testimonial-split__card, .s5-getting-started__figure). */
  --s5-guide-surface-radius: 12px;

  width: min(100%, 1440px);
  /* Outer vertical spacing: parent .s5-brand-section (halved band padding stacks to one full step between sections). */
  margin-block: 0;
  margin-inline: auto;
  padding-block: 0;
  padding-inline: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-height: 0;

  .s5-guide-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--s5-guide-surface-radius);
    padding: 10px;
    background: transparent;
    overflow: visible;
    position: relative;
  }

  .s5-guide-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--s5-color-yellow, #fbc72f);
    border-radius: var(--s5-guide-surface-radius);
    pointer-events: none;
  }

  /* Default fill color only; image size/position/repeat come from Elementor (Inner panel → Background). */
  .s5-guide {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--s5-color-gray-950, #111111);
    border-radius: var(--s5-guide-surface-radius);
    overflow: visible;
    margin: 0 auto;
  }

  .s5-guide-inner {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 5vw, 48px);
    min-height: 0;
    padding: 28px 20px 32px;
  }

  /* Lead + title + intro; max-width overridable in Elementor (Style → Copy stack).
     Use a div, not <header>: theme globals style every header { position:absolute; top:0; … }. */
  .s5-guide-copy-stack {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: min(42rem, 100%);
    margin-inline: auto;
    text-align: center;
    box-sizing: border-box;
    background: transparent;
    box-shadow: none;
  }

  .s5-guide-lead {
    margin: 0 0 0.55rem;
    color: var(--s5-color-yellow, #fbc72f);
    font-size: clamp(1.0625rem, 1.5vw + 0.5rem, 1.375rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  .s5-guide-title {
    margin: 0 0 0.85rem;
    color: #ffffff;
    font-size: clamp(1.625rem, 4vw + 0.75rem, 2.5rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  }

  .s5-guide-intro {
    margin: 0;
    max-width: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.9375rem, 0.8vw + 0.65rem, 1.0625rem);
    line-height: 1.55;
    font-weight: 400;
    text-wrap: balance;
  }

  .s5-guide-cards {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }

  .s5-guide-step-card {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  /* Wrapper only positions the panel; the trigger is the full card (no inset padding). */
  .s5-guide-step-card .s5-guide-dd {
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;

    &.is-open {
      z-index: 5;
    }
  }

  .s5-guide-dd__trigger {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 3.35rem;
    padding: 1rem 1.15rem;
    box-sizing: border-box;
    border: 1px solid var(--s5-color-yellow, #fbc72f);
    border-radius: var(--s5-guide-surface-radius);
    background-color: var(--s5-color-gray-900, #1f1f1f);
    color: #ffffff;
    font-size: clamp(0.9375rem, 0.35vw + 0.8rem, 1.0625rem);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

    &:hover {
      /* Opaque lift — avoids washed-out yellow glass over dark gray */
      background-color: #2e2e2e;
      border-color: #fdd057;
    }

    &:focus-visible {
      outline: 2px solid var(--s5-focus-ring, rgba(251, 199, 47, 0.55));
      outline-offset: 2px;
    }
  }

  .s5-guide-dd.is-open .s5-guide-dd__trigger {
    background-color: #3a362f;
    border-color: #fdd057;
  }

  .s5-guide-dd__trigger-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .s5-guide-dd__chevron {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--s5-color-yellow, #fbc72f);
    transition: transform 0.2s ease;
  }

  .s5-guide-dd.is-open .s5-guide-dd__chevron {
    transform: rotate(180deg);
  }

  .s5-guide-dd__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: min(320px, 55vh);
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    background: #1a1a1a;
    border: 1px solid rgba(251, 199, 47, 0.35);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }

  .s5-guide-dd__option {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.15s ease;

    &:hover,
    &:focus-visible {
      background: rgba(255, 255, 255, 0.06);
    }

    &:focus-visible {
      outline: 2px solid var(--s5-focus-ring, rgba(251, 199, 47, 0.55));
      outline-offset: -2px;
    }

    &:hover .s5-guide-dd__option-arrow,
    &:focus-visible .s5-guide-dd__option-arrow {
      border-color: var(--s5-color-yellow, #fbc72f);
      opacity: 1;
    }
  }

  .s5-guide-dd__option-arrow {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-inline-start: auto;
    border-right: 2px solid rgba(255, 255, 255, 0.45);
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
    transform: rotate(-45deg);
    opacity: 0.75;
    transition: border-color 0.15s ease, opacity 0.15s ease;
  }

  .s5-guide-dd__swatch {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.15);
  }

  .s5-guide-dd__option-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .s5-guide-dd__option-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .s5-guide-dd__option-desc {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
  }

}

/* When Elementor sets min-height on the widget (e.g. hero image behind .s5-guide), fill height and pin intro toward the cards. */
.elementor-widget-im-s5-guide .elementor-widget-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
}

.elementor-widget-im-s5-guide .s5-guide-section {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Base .s5-guide-section uses padding-inline: 24px — that insets the bg panel; use full widget width for the image surface. */
  padding-inline: 0;
}

.elementor-widget-im-s5-guide .s5-guide-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
}

.elementor-widget-im-s5-guide .s5-guide {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Optional overlay (Style → Inner panel → Background overlay). Elementor adds fill to ::before. */
.elementor-widget-im-s5-guide.s5-guide--overlay-yes .s5-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

.s5-brand-section .s5-guide-section {
  padding-inline: 0;
}

@media (min-width: 768px) {
  .s5-guide-section {
    .s5-guide-inner {
      padding: 36px 28px 40px;
    }

    .s5-guide-lead {
      margin-bottom: 0.65rem;
    }

    .s5-guide-title {
      margin-bottom: 1rem;
    }

    .s5-guide-cards {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }

    .s5-guide-step-card {
      flex: 1 1 calc(33.333% - 14px);
      min-width: min(100%, 260px);
      max-width: 340px;
    }

    .s5-guide-dd__trigger {
      min-height: 3.5rem;
      padding: 1.1rem 1.25rem;
      font-size: clamp(1rem, 0.4vw + 0.85rem, 1.125rem);
    }

  }
}

/* ─── S5 Guide — slot wizard (prototype: Web/S5/Guide) ─── */
/* 0.625rem ≈ 10px at 16px root — same scale as prototype html { font-size: 62.5% }; inner sizes use em. */
.s5-guide-section .s5-guide.s5-guide--wizard {
  position: relative;
  min-height: 0;
  overflow: visible;
  font-size: 0.625rem;
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--s5-color-white, #ffffff);
  --s5-wizard-action-row-h: 3.5em;
  /* Fixed action column so the button/options split sits in the same spot on every card,
     regardless of the button label length. Sized for the widest label ("This is my roof type.")
     plus a little slack, so the options get as much of the remaining width as possible. */
  --s5-wizard-action-col-w: 13.5rem;
  /* Desktop: floor width for card layout while strip columns animate (slot clips with overflow: hidden). */
  --s5-wizard-panel-content-min-width: 10.5rem;
  @media (min-width: 768px) {
    --s5-wizard-action-row-h: 5em;
  }

  /* Isolate from body.new--globals header rules (fixed/top/width) and editor inline top. */
  .s5-wizard-header {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100%;
    z-index: 1;
    flex-shrink: 0;
    margin-bottom: 1em;
    color: var(--s5-color-white, #ffffff);
    transition: opacity 0.3s ease;
    box-shadow: none !important;
    background: transparent !important;
    transform: none;

    @media (max-width: 1023.98px) {
      /* In flow on tablet too — tablet anchors the card text at the top (see the tablet band on
         .s5-wizard-card-row), so the absolute header would overlap it. Desktop keeps the header
         floating above the bottom-anchored card content. */
      position: relative !important;
      top: 0 !important;
      left: auto !important;
      right: auto !important;
      width: 100% !important;
      margin-bottom: 1.25rem;
    }

    @media (min-width: 768px) {
      margin-bottom: 1.5em;
    }
  }

  .s5-wizard-title {
    margin: 0;
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--s5-color-white, #ffffff);

    @media (min-width: 768px) {
      font-size: 3.2em;
    }
  }

  .s5-wizard-lead {
    margin: 0.25em 0 0;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--s5-color-white, #ffffff);

    @media (min-width: 768px) {
      font-size: 2.4em;
    }
  }

  .s5-wizard-intro {
    margin: 0.5em 0 0;
    max-width: 30em;
    font-size: 1.5em;
    line-height: 1.45;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    text-wrap: balance;

    @media (min-width: 768px) {
      margin-top: 0.75em;
      font-size: 1.6em;
    }
  }

  .s5-wizard-controls {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    z-index: 10;

    @media (min-width: 768px) {
      top: 0.75em;
      right: 0.75em;
    }
  }

  .s5-wizard-start-over {
    padding: 0;
    font-size: 1.3em;
    font-weight: 500;
    color: var(--s5-color-gray-400, #bebebe);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;

    &:hover {
      color: var(--s5-color-yellow, #fbc72f);
    }
  }

  .s5-wizard-change-link {
    display: inline-block;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    font-size: 1.3em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;

    &:hover {
      color: var(--s5-color-yellow, #fbc72f);
    }
  }

  .s5-wizard-slots {
    display: flex;
    overflow: hidden;
    /* Mobile: content-driven height cap; desktop fixed strip. */
    height: min(48em, 88vh);

    @supports (height: 1svh) {
      height: min(48em, 88svh);
    }
    border-radius: 0.5em;

    /* Pin cards to their final width (in cqw) so their contents don't reflow while a slot's flex-basis animates. */
    container-type: inline-size;
    container-name: s5-wizard-slots;

    @media (min-width: 768px) {
      height: 50em;
      border-radius: 0.75em;
    }
  }

  @media (max-width: 767px) {
    .s5-wizard-slots {
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    @supports (width: 1cqw) {
      .s5-wizard-slot .s5-wizard-card,
      .s5-wizard-slot .s5-wizard-cta-card {
        min-width: 100cqw;
      }
    }
  }

  .s5-wizard-slot {
    flex: 0 0 var(--s5-wizard-slot-width, 100%);
    min-width: 0;
    position: relative;
    overflow: hidden;
    transition: flex-basis 0.4s ease;
  }

  /* Outcome frame: column so the CTA card (height: 100% elsewhere) stacks above the
     results links instead of filling the slot and clipping them. No gap — the seam
     rules below merge the pair into one continuous card at step 4. */
  .s5-wizard-slot:last-child {
    display: flex;
    flex-direction: column;

    /* The floating Reset control (.s5-wizard-controls, absolute top-right) overlays
       this frame from step 2 on. Pad content below it: 0.75em inset + 2em button
       + 0.75em breathing room. */
    @media (min-width: 768px) {
      padding-top: 3.5em;
    }
  }

  .s5-wizard-slot:last-child .s5-wizard-cta-card {
    height: auto;
    flex: 0 0 auto;
  }

  .s5-wizard-card--slide-in {
    transform: translateX(100%);
    transition: transform 0.4s ease;
  }

  .s5-wizard-card--slide-in-visible {
    transform: translateX(0);
  }

  .s5-wizard-cta-card--slide-in {
    transform: translateX(100%);
    transition: transform 0.4s ease;
  }

  .s5-wizard-cta-card--slide-in-visible {
    transform: translateX(0);
  }

  @media (max-width: 767px) {
    /* One full-width column — only the active step (slot index + 1). Scoped so desktop flex % transitions stay clean. */
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(1) {
      --s5-wizard-slot-width: 100%;
    }
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(2),
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(3),
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(4) {
      --s5-wizard-slot-width: 0;
    }

    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(2) {
      --s5-wizard-slot-width: 100%;
    }
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(1),
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(3),
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(4) {
      --s5-wizard-slot-width: 0;
    }

    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(3) {
      --s5-wizard-slot-width: 100%;
    }
    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(1),
    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(2),
    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(4) {
      --s5-wizard-slot-width: 0;
    }

    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(4) {
      --s5-wizard-slot-width: 100%;
    }
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(1),
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(2),
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(3) {
      --s5-wizard-slot-width: 0;
    }

    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:not(:nth-child(1)),
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:not(:nth-child(2)),
    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:not(:nth-child(3)),
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:not(:nth-child(4)) {
      pointer-events: none;
    }
  }

  @media (min-width: 768px) {
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(2) {
      padding-left: 0.75em;
    }

    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(2),
    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(3) {
      padding-left: 0.75em;
    }

    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(2),
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(3),
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(4) {
      padding-left: 0.75em;
    }

    .s5-wizard-slots[data-step="2"] .s5-wizard-slot,
    .s5-wizard-slots[data-step="3"] .s5-wizard-slot,
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot {
      pointer-events: auto;
    }

    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(1) {
      --s5-wizard-slot-width: 100%;
    }
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(2),
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(3),
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(4) {
      --s5-wizard-slot-width: 0;
    }

    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(1) {
      --s5-wizard-slot-width: 25%;
    }
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(1) {
      --s5-wizard-slot-width: 33.333%;
    }
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(2) {
      --s5-wizard-slot-width: 66.667%;
    }
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(3) {
      --s5-wizard-slot-width: 0;
    }
    /* Outcome frame reserved for the completed flow — it opens only once all three picks are in. */
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(4) {
      --s5-wizard-slot-width: 0;
    }

    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(1),
    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(2),
    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(3) {
      --s5-wizard-slot-width: 33.333%;
    }
    .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(4) {
      --s5-wizard-slot-width: 0;
    }

    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(1),
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(2),
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(3) {
      --s5-wizard-slot-width: 22%;
    }
    .s5-wizard-slots[data-step="4"] .s5-wizard-slot:nth-child(4) {
      --s5-wizard-slot-width: 34%;
    }

    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(2),
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(3),
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(4) {
      pointer-events: none;
    }

    /* Pin the active picker card to its final width (cqw of the fixed strip) so its options
        are already at their final wrap/height while the slot's flex-basis animates in.
        This keeps the options row height constant, so revealing them is a pure fade with no reflow.
        The cqw values MUST track the desktop slot scheme (step2 = 33.333/66.667/0/0, step3 =
        33.333×3/0 — selection frames expand while the outcome frame is closed, step4 = 22/22/22/34):
        a pin wider than the slot's final width clips the card at the slot's overflow:hidden edge. */
    @supports (width: 1cqw) {
      .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(1) .s5-wizard-card {
        min-width: 100cqw;
      }
      .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(2) .s5-wizard-card {
        min-width: 66.667cqw;
      }
      .s5-wizard-slots[data-step="3"] .s5-wizard-slot:nth-child(3) .s5-wizard-card {
        min-width: 33.333cqw;
      }
    }

    /* The "need" step's foot also answers to this name, so only its options can switch to the
       multi-column layout (see .s5-wizard-thumbnails--stack) — role and roof keep the single
       stacked column at any width. */
    .s5-wizard-slots[data-step="2"] .s5-wizard-slot:nth-child(2) .s5-wizard-card-foot {
      container-name: s5-wizard-foot s5-wizard-foot-need;
    }

    /* The "role" step is always full-width, so its foot has room to lay options out in a row
       instead of stacking — scoped the same way so need/roof are unaffected. */
    .s5-wizard-slots[data-step="1"] .s5-wizard-slot:nth-child(1) .s5-wizard-card-foot {
      container-name: s5-wizard-foot s5-wizard-foot-row;
    }
  }

  .s5-wizard-card {
    --s5-wizard-card-pad: 2em;
    height: 100%;
    min-height: 0;
    /* Width container for the narrow-card layout below (options-vs-text overlap fix). */
    container-type: inline-size;
    container-name: s5-wizard-card;
    border-radius: 0.5em;
    padding-block: var(--s5-wizard-card-pad);
    padding-inline: var(--s5-wizard-card-pad);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;

    @media (max-width: 767px) {
      &:has(.s5-wizard-card-row--stack) {
        justify-content: flex-start;
        min-height: 100%;
      }
    }

    @media (min-width: 768px) {
      --s5-wizard-card-pad: 4em;
      border-radius: 0.75em;
      min-width: var(--s5-wizard-panel-content-min-width);
    }

    /* Tablet: locked slots are ~22% of a ~750–980px strip; 4em side padding starves the
       text column, so tighten the card chrome until the desktop breakpoint. */
    @media (min-width: 768px) and (max-width: 1023.98px) {
      --s5-wizard-card-pad: 2.5em;
    }
  }

  .s5-wizard-card-bg {
    position: absolute;
    /* Expand past the card so blur does not leave soft transparent halos at the edges. */
    inset: -18px;
    border-radius: inherit;
    background-image: var(--s5-wizard-card-bg-image);
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: blur(var(--s5-wizard-card-blur, 12px));

    @media (min-width: 768px) {
      inset: -24px;
      filter: blur(var(--s5-wizard-card-blur, 18px));
    }
  }

  .s5-wizard-card-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    /* Two layers: base wash for overall contrast, radial so the center still reads as photo. */
    background:
      radial-gradient(
        ellipse 92% 78% at 50% 42%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 34%,
        rgba(0, 0, 0, 0.66) 70%,
        rgba(0, 0, 0, 0.88) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.46) 0%,
        rgba(0, 0, 0, 0.3) 45%,
        rgba(0, 0, 0, 0.56) 100%
      );

    @media (min-width: 768px) {
      background:
        radial-gradient(
          ellipse 96% 82% at 50% 40%,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.28) 40%,
          rgba(0, 0, 0, 0.64) 74%,
          rgba(0, 0, 0, 0.9) 100%
        ),
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.4) 0%,
          rgba(0, 0, 0, 0.26) 42%,
          rgba(0, 0, 0, 0.52) 100%
        );
    }
  }

  .s5-wizard-card:not([style*="--s5-wizard-card-bg-image"]) .s5-wizard-card-overlay {
    opacity: 0;
    background: none;
  }

  .s5-wizard-card-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1em;
    margin-top: auto;
    /* Header is out of flow; row fills remaining card height. */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    z-index: 2;
    position: relative;

    @media (min-width: 768px) {
      gap: 1.5em;
    }
  }

  .s5-wizard-card-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .s5-wizard-card-row--stack {
    flex-wrap: wrap;
    row-gap: 1em;

    @media (max-width: 767px) {
      flex-direction: column;
      align-items: stretch;
      flex-wrap: nowrap;
      justify-content: flex-start;
      flex: 1 1 auto;
      min-height: 0;
      margin-top: 0;
      row-gap: 0;

      .s5-wizard-card-body,
      .s5-wizard-card-primary {
        display: contents;
      }

      .s5-wizard-card-content {
        display: contents;
      }

      .s5-wizard-card-content-inner {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        margin-top: auto;
        order: 1;
      }

      .s5-wizard-card-foot {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
        margin-top: 30px;
        order: 2;
      }

      .s5-wizard-card-content > .s5-wizard-btn-wrap {
        order: 3;
        margin-top: 1.25rem;
      }
    }

    @media (min-width: 768px) {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: flex-end;
      row-gap: 1.25em;

      /* Content on top; button + options on one row (primary width:100% was stacking them). */
      .s5-wizard-card-body {
        position: relative;
        display: grid;
        /* Fixed first column keeps the action in the same position on every card. */
        grid-template-columns: var(--s5-wizard-action-col-w) minmax(0, 1fr);
        grid-template-areas:
          "content content"
          "btn foot";
        column-gap: 1.5em;
        row-gap: 1.25em;
        align-items: center;
        flex: 0 1 auto;
        align-self: stretch;
        width: 100%;
      }

      .s5-wizard-card-primary,
      .s5-wizard-card-content {
        display: contents;
      }

      .s5-wizard-card-content-inner {
        grid-area: content;
      }

      .s5-wizard-card-content > .s5-wizard-btn-wrap {
        grid-area: btn;
        margin-top: 0;
      }

      .s5-wizard-card-foot {
        /* Out of flow so the options' height (1 vs 2 wrapped rows) never shifts the body:
           the content + button stay pinned to the same spot on every card. Options fill the
           track to the right of the fixed action column and grow upward, bottom-aligned to the button. */
        position: absolute;
        right: 0;
        bottom: 0;
        width: calc(100% - var(--s5-wizard-action-col-w) - 1.5em);
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        min-width: 0;
        /* Query container so the options can respond to the foot's own width (differs per card),
           not the viewport. */
        container-type: inline-size;
        container-name: s5-wizard-foot;
      }

      .s5-wizard-thumbnails--stack {
        flex: 0 1 auto;
        justify-content: flex-end;
        width: auto;
        min-width: 0;
        margin-left: auto;
      }
    }
  }

  /* Narrow picker cards at ≥768 (33.333% slots at steps 2–3, 22% slots at step 4; the need card
     around ~1024–1100 viewports): the fixed 13.5rem action column underflows the body — the
     foot's calc() width degenerates and the absolutely-positioned options stack paints outside
     its box, over the card text. Same single-column layout the tablet band below uses, keyed to
     the card's own width so wide cards (role full-strip, need ≥66% at step 2) keep the
     button-left / options-right split. Threshold 460px: 33.333% cards max out ~384px content,
     66.667%/100% pickers never dip below ~570px at ≥1024 viewports. */
  @media (min-width: 768px) {
    @container s5-wizard-card (max-width: 460px) {
      /* Reclaims the card's 4em block padding (a container query cannot restyle the card
         itself): text + five enlarged options otherwise overrun the fixed 50em strip and
         clip the last option. Side padding is untouched. */
      .s5-wizard-card-row {
        margin-block: -2.5em;
        align-items: flex-start;
      }

      .s5-wizard-card-row--stack {
        justify-content: flex-start;
      }

      /* Foot in flow (below text + button) so the option stack can never paint over the text;
         the card scrolls instead when text + five options exceed the fixed 50em strip. */
      .s5-wizard-card-row--stack .s5-wizard-card-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        align-content: start;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "content"
          "btn"
          "foot";
      }

      .s5-wizard-card-row--stack .s5-wizard-card-foot {
        /* grid-area: without it the foot auto-places into a zero-width implicit column
           (both this template and the tablet band's name a "foot" area but nothing
           assigned the div to it — the old absolute positioning never needed one). */
        grid-area: foot;
        position: static;
        width: 100%;
        margin-top: 1.25em;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .s5-wizard-card-row--stack .s5-wizard-thumbnails--stack {
        flex: 0 0 auto;
        width: 100%;
        margin-left: 0;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
      }
    }
  }

  /* Tablet: anchor the text block at the top of the tall frame and give the
     options the space below, mirroring the mobile stack reading order. */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .s5-wizard-card-row {
      align-items: flex-start;
    }

    .s5-wizard-card-row--stack {
      justify-content: flex-start;
    }

    .s5-wizard-card-row--stack .s5-wizard-card-body {
      flex: 1 1 auto;
      align-content: start;
      /* The removed-button action column (13.5rem) underflows 22% picker slots
         at tablet (~165px cards): the second grid column goes to zero and the
         foot's calc() width turns negative, so the options escape its box.
         Single column — the action reservation is desktop-proportioned chrome. */
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "content"
        "foot";
    }

    .s5-wizard-card-row--stack .s5-wizard-card-foot {
      /* 100% not auto: shrink-to-fit degenerates to 0 when the thumbnails grid
         inside reports no intrinsic width — and the foot is a container-query
         container, so the options' column count keys off this real width. */
      width: 100%;
      flex-wrap: wrap;
    }

    /* max-content column sizes to the widest label (~140px) and overflows the
       ~122px foot at tablet — fill the foot instead and let labels wrap. */
    .s5-wizard-card-row--stack .s5-wizard-thumbnails--stack {
      grid-template-columns: minmax(0, 1fr);
      justify-content: stretch;
      /* Whole row above the wrapped help link so labels keep the full foot width. */
      flex: 1 1 100%;
    }

    .s5-wizard-card-row--stack .s5-wizard-thumb-preview {
      flex-basis: 4em;
    }
  }

  .s5-wizard-card-content {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--s5-color-white, #ffffff);
  }

  .s5-wizard-card-content-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0;

    @media (min-width: 768px) {
      width: auto;
      /* Cap only: locked cards can be narrower than 21em (22% slots at tablet widths),
         so the column must be allowed to shrink or the text clips at the card edge.
         break-word (not anywhere): min-content stays one word wide, so long heads like
         "Corrugated/Trapezoidal" wrap at the slash, not at an arbitrary glyph. */
      min-width: 0;
      max-width: 21em;
      overflow-wrap: break-word;
    }
  }

  .s5-wizard-card-subhead {
    margin: 0;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.15;
    color: var(--s5-color-white, #ffffff);

    @media (min-width: 768px) {
      font-size: 2.4em;
    }

    /* Tablet: heads wrap instead of clipping in the narrow locked cards (see content-inner cap note). */
    @media (min-width: 768px) and (max-width: 1023.98px) {
      font-size: 1.8em;
    }
  }

  .s5-wizard-card-descriptor {
    margin: 0.65em 0 0;
    font-size: 1.4em;
    line-height: 1.4;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);

    @media (min-width: 768px) {
      margin-top: 0.75em;
      font-size: 1.5em;
    }

    @media (min-width: 768px) and (max-width: 1023.98px) {
      font-size: 1.3em;
    }
  }

  .s5-wizard-thumbnails {
    flex-shrink: 0;
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    transition: opacity 0.3s ease;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;

    @media (min-width: 768px) {
      gap: 0.75em;
      width: auto;
    }
  }

  .s5-wizard-thumbnails--delayed {
    /* Keep the options fully laid out (final width via the card's cqw min-width) so the row height
       is constant while the panel animates. Only visibility is deferred, so revealing is a pure fade
       with no reflow — the bottom-pinned content never jumps. */
    opacity: 0;
    pointer-events: none;
  }

  .s5-wizard-thumbnails--visible {
    width: auto;
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
    /* Panel is settled by now, so fade/rise in place without reflowing the layout. */
    animation: s5-wizard-thumbs-in 0.35s ease both;
  }

  @keyframes s5-wizard-thumbs-in {
    from {
      opacity: 0;
      transform: translateY(0.5em);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .s5-wizard-thumbnails--visible {
      animation: none;
    }
  }

  .s5-wizard-thumbnails--stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    max-width: none;
    gap: 0.5em 0.65em;

    @media (max-width: 767px) {
      align-self: stretch;
    }

    @media (min-width: 768px) {
      /* Default = uniform-width stacked column. max-content sizes the single column to the widest
         option and every row fills it, so all options share one width; justify-content: end
         right-aligns the block so the swatches line up. */
      grid-template-columns: max-content;
      justify-content: end;
      width: 100%;
      gap: 0.5em;
      align-self: stretch;

      /* Only the "need" step's foot answers to this container name (see .s5-wizard-card-foot above),
         so this multi-column layout is scoped to that panel alone; role and roof are unaffected
         regardless of their width. Once that foot has room, lay the 5 options out as three equal
         columns (3 over 2) instead of one stacked column. */
      @container s5-wizard-foot-need (min-width: 340px) {
        grid-template-columns: repeat(3, 1fr);
        justify-content: stretch;
        gap: 0.6em 0.9em;
      }

      /* Only the "role" step's foot answers to this name (see .s5-wizard-card-foot above), so this
         is scoped to that panel alone. It's always full-width, so lay the options out in a row
         (content-sized, wrapping as needed) instead of a stacked column. */
      @container s5-wizard-foot-row (min-width: 460px) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5em 2.75em;
      }
    }
  }

  .s5-wizard-thumbnails--stack .s5-wizard-thumb {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 6em;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0.65em;
    overflow: visible;
    text-align: left;
    background: transparent;
    border: 2px solid transparent;

    @media (min-width: 768px) {
      /* Fill the grid column so every option is the same width (whether 1 or 3 columns). */
      width: 100%;
      min-width: 0;
      max-width: none;
      min-height: 5.8em;
      gap: 0.75em;

      /* Row tier (role step): size to content instead of filling a column. */
      @container s5-wizard-foot-row (min-width: 460px) {
        width: auto;
        flex: 0 1 auto;
        min-width: 12em;
        max-width: 18em;
      }
    }

    &:hover {
      transform: none;
      background: transparent;

      .s5-wizard-thumb-preview {
        filter: brightness(1.12);
      }
    }

    &.is-selected {
      background: transparent;
    }
  }

  .s5-wizard-thumb-preview {
    flex: 0 0 5em;
    align-self: stretch;
    min-height: 100%;
    border-radius: 0.375em;
    overflow: hidden;

    @media (min-width: 768px) {
      flex-basis: 6em;
      border-radius: 0.5em;
    }
  }

  .s5-wizard-thumb-preview--color {
    display: block;
  }

  .s5-wizard-thumb-preview--image {
    display: block;
    background-color: rgba(0, 0, 0, 0.2);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  .s5-wizard-thumbnails--stack .s5-wizard-thumb-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 0.95em;
    padding: 0.35em 0;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    background: transparent;

    @media (min-width: 768px) {
      font-size: 1.05em;
      padding: 0.4em 0;
    }
  }


  .s5-wizard-thumb {
    width: 6.4em;
    height: 6.4em;
    border-radius: 0.375em;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    color: var(--s5-color-white, #ffffff);
    appearance: none;
    font: inherit;

    @media (min-width: 768px) {
      width: 12em;
      height: 12em;
      border-radius: 0.5em;
    }

    &:hover {
      transform: scale(1.05);
    }

    &.is-selected {
      border-color: var(--s5-color-yellow, #fbc72f);
      box-shadow: 0 0 0 1px rgba(251, 199, 47, 0.35);
    }
  }

  .s5-wizard-thumb-label {
    display: block;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 0.25em;
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: var(--s5-color-white, #ffffff);

    @media (min-width: 768px) {
      font-size: 1.1em;
    }
  }

  @keyframes s5-wizard-btn-wrap-collapse {
    to {
      height: var(--s5-wizard-action-row-h);
      min-height: var(--s5-wizard-action-row-h);
      overflow: hidden;
    }
  }

  @keyframes s5-wizard-btn-wrap-expand {
    from {
      height: 1.6em;
      min-height: 1.6em;
    }
    to {
      height: var(--s5-wizard-action-row-h);
      min-height: var(--s5-wizard-action-row-h);
    }
  }

  .s5-wizard-btn-wrap {
    min-height: 1.6em;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .s5-wizard-card-content > .s5-wizard-btn-wrap,
  .s5-wizard-card-content-inner .s5-wizard-btn-wrap {
    margin-top: 1.25rem;

    @media (max-width: 767px) {
      width: 100%;
      max-width: 100%;
      margin-top: 0;
    }
  }

  @media (max-width: 767px) {
    .s5-wizard-card-row--stack .s5-wizard-card-content > .s5-wizard-btn-wrap {
      margin-top: 1.25rem;
    }
  }

  .s5-wizard-btn-wrap:has(.s5-wizard-btn),
  .s5-wizard-btn-wrap:has(.s5-wizard-change-link) {
    height: var(--s5-wizard-action-row-h);
    min-height: var(--s5-wizard-action-row-h);
  }

  .s5-wizard-btn-wrap--collapse {
    height: var(--s5-wizard-action-row-h);
    animation: s5-wizard-btn-wrap-collapse 0.4s ease forwards;
  }

  .s5-wizard-btn-wrap--expand {
    height: 1.6em;
    min-height: 1.6em;
    animation: s5-wizard-btn-wrap-expand 0.4s ease forwards;
  }

  .s5-wizard-btn-wrap--collapsed {
    height: var(--s5-wizard-action-row-h);
    min-height: var(--s5-wizard-action-row-h);
    overflow: hidden;
  }

  .s5-wizard-btn-wrap .s5-wizard-btn {
    margin-top: 0;
  }

  @media (max-width: 767px) {
    .s5-wizard-card-content > .s5-wizard-btn-wrap .s5-wizard-btn,
    .s5-wizard-card-content-inner .s5-wizard-btn {
      display: block;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
  }

  .s5-wizard-btn {
    display: inline-block;
    margin-top: 1em;
    padding: 0.625em 1.25em;
    font-size: 1.4em;
    font-weight: 700;
    border: none;
    border-radius: 0.375em;
    cursor: pointer;
    background-color: var(--s5-btn-bg, var(--s5-color-yellow, #fbc72f));
    color: var(--s5-btn-fg, var(--s5-color-gray-900, #1f1f1f));
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;

    @media (min-width: 768px) {
      margin-top: 1.25em;
      padding: 0.75em 1.5em;
      font-size: 1.5em;
      border-radius: 0.5em;
    }

    &:hover {
      background-color: var(--s5-btn-bg-hover, var(--s5-color-yellow-hover, #e4b82b));
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
      background-color: var(--s5-btn-bg-active, var(--s5-color-yellow-active, #d5a925));
    }
  }

  .s5-wizard-cta-card {
    height: 100%;
    background-color: var(--s5-color-gray-900, #1f1f1f);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em 1.5em;
    border-radius: 0.5em;
    text-align: center;

    @media (min-width: 768px) {
      padding: 2.5em;
      border-radius: 0.75em;
      min-width: var(--s5-wizard-panel-content-min-width);
    }
  }

  .s5-wizard-cta-headline {
    margin: 0;
    width: 100%;
    max-width: 32.5em;
    font-size: 1.6em;
    font-weight: 700;
    color: var(--s5-color-white, #ffffff);
    line-height: 1.4;
    text-wrap: balance;

    @media (min-width: 768px) {
      font-size: 1.8em;
    }
  }

  .s5-wizard-cta-btn {
    margin-top: 1.25em;
  }

  /* "Not sure? What's my roof type?" helper under the roof options. */
  .s5-wizard-help-link {
    display: inline-block;
    margin-top: 0.75em;
    font-size: 0.8125em;
    font-weight: 600;
    color: var(--s5-color-gray-400, #bebebe);
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover,
    &:focus-visible {
      color: var(--s5-color-yellow, #fbc72f);
    }
  }

  /* "Relevant solutions" — rendered inside the fourth (outcome) frame, which only opens at
      step 4 (all three picks made); two columns on desktop (the frame is ~34% of the strip;
      single-column links + CTA overflow the fixed 50em strip below ~1400px viewports), one
      column on mobile. Hidden entirely when the selected tier has no links configured. */
  .s5-wizard-results {
    /* Long link sets (some personas carry 13+) exceed the fixed 50em strip, so the
       frame's leftover height is a scroll region rather than a clip. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;

    &[hidden] {
      display: none;
    }
  }

  /* Merged seam: when the CTA card sits directly above visible results (step 4), the
     pair reads as ONE card — the CTA keeps its top radius, the results scroll region
     closes the bottom corners (fixed while links scroll inside), and the inner columns
     drop their own card chrome. Standalone results (steps 2–3, no CTA) keep the full
     card look via the .s5-wizard-result-columns base styles. */
  .s5-wizard-slot:last-child .s5-wizard-cta-card:has(+ .s5-wizard-results:not([hidden])) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .s5-wizard-slot:last-child .s5-wizard-cta-card + .s5-wizard-results:not([hidden]) {
    background-color: var(--s5-color-gray-900, #1f1f1f);
    border-radius: 0 0 0.5em 0.5em;
  }

  .s5-wizard-slot:last-child .s5-wizard-cta-card + .s5-wizard-results:not([hidden]) .s5-wizard-result-columns {
    background-color: transparent;
    border-radius: 0;
    padding-top: 0.75em;
  }

  .s5-wizard-result-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1em;
    padding: 1.5em 1.5em 1.25em 2.25em;
    border-radius: 0.5em;
    background-color: var(--s5-color-gray-900, #1f1f1f);

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .s5-wizard-result-col {
    min-width: 0;
  }

  .s5-wizard-result-heading {
    margin-bottom: 0.5em;
    /* Headings resolve in the 10px wizard root context, but result links
       inherit 18px from the global theme li rule — keep the heading visibly
       larger than the links it labels. */
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--s5-color-yellow, #fbc72f);
  }

  .s5-wizard-result-links {
    list-style: none;
    margin: 0;
    padding: 0;

    & > li + li {
      margin-top: 0.25em;
    }
  }

  .s5-wizard-result-link {
    display: inline-block;
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--s5-color-white, #ffffff);
    text-decoration: none;
    transition: color 0.18s ease;

    &:hover {
      color: var(--s5-color-yellow, #fbc72f);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    &:focus-visible {
      outline: 2px solid var(--s5-focus-ring, rgba(251, 199, 47, 0.55));
      outline-offset: 2px;
      color: var(--s5-color-yellow, #fbc72f);
    }
  }
}

.elementor-widget-im-s5-guide-wizard .elementor-widget-container,
.elementor-widget-im-s5-guide-wizard .s5-guide-section,
.elementor-widget-im-s5-guide-wizard .s5-guide-shell,
.elementor-widget-im-s5-guide-wizard .s5-guide {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
}

.elementor-widget-im-s5-guide-wizard .s5-guide-section {
  flex: 1 1 auto;
  padding: 0;
}

.elementor-widget-im-s5-guide-wizard .s5-guide-shell {
  flex: 1 1 auto;
}

.elementor-widget-im-s5-guide-wizard .s5-guide {
  flex: 1 1 auto;
  margin-inline: 0;
}

/* Match the hero module's content column (.s5-hero-module__outer/inner: pad 24px >1024, 18px 768-1024, cap 1440). */
@media (min-width: 1025px) {
  .elementor-widget-im-s5-guide-wizard .s5-guide-section {
    padding-inline: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-widget-im-s5-guide-wizard .s5-guide-section {
    padding-inline: 18px;
  }
}

@media (min-width: 768px) {
  .elementor-widget-im-s5-guide-wizard .s5-guide-shell {
    max-width: 1392px;
    margin-inline: auto;
  }
}

/* The hero band's Elementor section is full-width, so its column keeps tracking the viewport past
   the site content width; this band's section is boxed at 1392px, which decouples the wizard from
   the hero column above ~1425px viewports. Cap THIS section's container at the hero outer cap
   (1440px, widget-s5-hero.css .s5-hero-module__outer) so section padding 24 + shell cap 1392
   reproduce the hero inner column (min(vw,1440) - 48) at every width. Plain max-width on an
   auto-width container: no negative margins, no 100vw, scrollbar-safe. */
.elementor-section:has(.elementor-widget-im-s5-guide-wizard) > .elementor-container {
  /* !important to beat Elementor's per-page rule (.elementor-149576 .elementor-element.elementor-element-6549279 > .elementor-container), same approach as widget-stats-bar.css. */
  max-width: 1440px !important;
}

.elementor-widget-im-s5-guide-wizard.s5-guide--overlay-yes .s5-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Sub-headers inside a results link list (IMP-panel product groups):
   same accent family as the column heading, one step smaller. */
.s5-wizard-result-links .s5-wizard-result-subhead {
  /* px throughout: this sheet mixes a 10px root with 18px inherited li sizing —
     ems resolve unpredictably (measured 0.85em = 8.5px vs 12px heading).
     Spacing via padding-top: a higher-precedence scoped li rule (0.25em margin-top)
     otherwise overrides margin-top on these li's. */
  margin-top: 0 !important;
  margin-bottom: 4px;
  padding-top: 14px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--s5-color-yellow, #fbc72f);
}

.s5-wizard-result-links .s5-wizard-result-subhead:first-child {
  padding-top: 0;
}