/* Shares the comparator's navy, coral and mint palette. Scoped to the shortcode. */
.vs-rec {
    --rec-ink: #17233c;
    --rec-muted: #667085;
    --rec-line: #dde3ea;
    --rec-accent: #e65336;
    --rec-dark: #be3c25;
    --rec-mint: #dff1e9;
    max-width: 1240px;
    margin: 24px auto 64px;
    padding: 0 24px;
    color: var(--rec-ink);
    font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height: 1.5;
    scroll-margin-top: 100px;
}
.vs-rec * {
    box-sizing: border-box;
}
.vs-rec [hidden] {
    display: none!important;
}
.vs-rec a, .vs-rec button, .vs-rec input {
    touch-action: manipulation;
}
.vs-rec button, .vs-rec a {
    transition: background .18s,border-color .18s,box-shadow .18s;
}
.vs-rec button {
    font: inherit;
}
.vs-rec button:focus-visible, .vs-rec a:focus-visible, .vs-rec textarea:focus-visible {
    outline: 3px solid #087fb3;
    outline-offset: 4px;
}
.vs-rec button:disabled {
    cursor: default;
    opacity: .4;
}
.vs-rec h2, .vs-rec h3, .vs-rec h4, .vs-rec h5 {
    font-family: inherit;
    letter-spacing: -.035em;
    line-height: 1.15;
}
.vs-rec__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
    padding: 32px 38px 38px;
    border-radius: 20px;
    background: radial-gradient(ellipse at 98% 0,rgba(230,83,54,.25),transparent 50%),linear-gradient(125deg,#101a2e,#1d3152 70%,#17233c);
    color: #fff;
}
.vs-rec__hero-copy {
    max-width: 760px;
    position: relative;
    z-index: 1;
}
.vs-rec__eyebrow {
    color: #ffad9b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    margin: 0 0 14px;
}
.vs-rec__hero h2 {
    color: #fff;
    font-size: clamp(30px,3.4vw,44px);
    font-weight: 800;
    letter-spacing: -.055em;
    margin: 0 0 16px;
    max-width: 700px;
}
.vs-rec__intro {
    color: #d7e0ed;
    font-size: 15px;
    max-width: 620px;
    margin: 0;
}
.vs-rec__trust {
    color: #e4eaf3;
    display: inline-block;
    border-top: 1px solid #ffffff25;
    padding-top: 12px;
    margin: 16px 0 0;
    font-size: 12px;
}
.vs-rec__layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 270px;
    gap: 24px;
    margin: 20px 0 0;
    align-items: start;
}
.vs-rec__panel {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--rec-line);
    border-radius: 18px;
    box-shadow: 0 12px 40px #17233c09;
    overflow: hidden;
}
.vs-rec__progress {
    padding: 26px 30px 0;
}
.vs-rec__progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--rec-muted);
    margin-bottom: 10px;
}
.vs-rec__progress-meta strong {
    color: var(--rec-dark);
}
.vs-rec__track {
    height: 5px;
    background: #edf0f4;
    border-radius: 9px;
    overflow: hidden;
}
.vs-rec__track span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--rec-accent);
    transition: width .25s;
    border-radius: inherit;
}
.vs-rec form {
    padding: 26px 30px 24px;
    margin: 0;
}
.vs-rec fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.vs-rec legend {
    display: block;
    width: 100%;
    font-size: clamp(22px,2.5vw,30px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.2;
    padding: 0;
    color: var(--rec-ink);
}
.vs-rec legend:focus {
    outline: none;
}
.vs-rec__hint {
    font-size: 13px;
    color: var(--rec-muted);
    margin: 12px 0 24px;
}
.vs-rec__hint>span {
    display: inline-block;
    background: var(--rec-mint);
    color: #30644f;
    font-size: 10px;
    font-weight: 750;
    border-radius: 5px;
    padding: 3px 6px;
    margin-right: 5px;
}
.vs-rec__options {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}
.vs-rec__option {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
    min-height: 76px;
    padding: 15px 14px;
    border: 1px solid var(--rec-line);
    border-radius: 11px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    background: #fff;
    color: var(--rec-ink);
    transition: border-color .18s,background .18s;
}
.vs-rec__option:hover {
    border-color: #e69a8a;
    background: #fffcfb;
}
.vs-rec__option.is-selected {
    border-color: var(--rec-accent);
    background: #fff5f1;
    box-shadow: 0 0 0 1px var(--rec-accent);
}
.vs-rec__option:focus-within {
    outline: 3px solid #087fb3;
    outline-offset: 3px;
}
.vs-rec__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    inset: 0;
}
.vs-rec__option-number {
    font-size: 11px;
    color: #9ba4b2;
    flex: none;
    font-weight: 500;
}
.vs-rec__check {
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    height: 20px;
    margin-left: auto;
    border: 1px solid #b8c1ce;
    border-radius: 50%;
    font-size: 12px;
    color: transparent;
    background: #fff;
}
.vs-rec__option:has(input[type="checkbox"]) .vs-rec__check {
    border-radius: 5px;
}
.vs-rec__option.is-selected .vs-rec__check {
    color: #fff;
    background: var(--rec-accent);
    border-color: var(--rec-accent);
}
.vs-rec__validation {
    color: #b42318;
    font-size: 13px;
    min-height: 20px;
    margin: 16px 0 10px;
}
.vs-rec__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #edf0f4;
    padding-top: 20px;
}
.vs-rec button, .vs-rec__compare, .vs-rec__details {
    border-radius: 9px;
    padding: 12px 16px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    text-decoration: none;
}
.vs-rec__back {
    color: var(--rec-muted);
    background: transparent;
    border: 0;
    padding-left: 0!important;
}
.vs-rec__next, .vs-rec__compare {
    background: var(--rec-accent);
    border: 1px solid var(--rec-accent);
    color: #fff;
}
.vs-rec__next:hover, .vs-rec__compare:hover {
    background: var(--rec-dark);
    color: #fff;
}
.vs-rec__sidebar {
    display: grid;
    gap: 18px;
    padding-top: 0;
}
.vs-rec__profile {
    border: 1px solid var(--rec-line);
    border-radius: 14px;
    padding: 20px;
    background: #f8fafb;
}
.vs-rec__kicker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #30644f;
}
.vs-rec__profile>p {
    font-size: 13px;
    color: var(--rec-muted);
    margin: 12px 0 0;
}
.vs-rec [data-profile] button {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 12px 18px 12px 0;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--rec-line);
    border-radius: 0;
    background: transparent;
    font-size: 12px;
}
.vs-rec [data-profile] button:last-child {
    border-bottom: 0;
}
.vs-rec [data-profile] button span {
    display: block;
    color: var(--rec-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 4px;
}
.vs-rec [data-profile] button strong {
    font-weight: 650;
}
.vs-rec [data-profile] button i {
    position: absolute;
    right: 0;
    top: 50%;
    font-style: normal;
    color: var(--rec-dark);
}
.vs-rec__help {
    padding: 20px;
    border: 1px solid var(--rec-line);
    border-radius: 14px;
    background: #fff;
}
.vs-rec__help-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: #e9f3f9;
    color: #196a98;
    border-radius: 10px;
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 12px;
}
.vs-rec__help h3 {
    font-size: 19px;
    margin: 0 0 10px;
    color: var(--rec-ink);
}
.vs-rec__help p {
    font-size: 12px;
    color: var(--rec-muted);
    margin: 0 0 16px;
    line-height: 1.65;
}
.vs-rec__help>a {
    display: block;
    color: #196a98;
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
    padding: 10px 0;
}
.vs-rec__help .vs-rec__copy {
    background: #fff;
    border: 1px solid #c3d0dd;
    color: var(--rec-ink);
    width: 100%;
    font-size: 12px;
}
.vs-rec__help textarea {
    width: 100%;
    font: inherit;
    font-size: 12px;
    margin-top: 8px;
}
.vs-rec__help label {
    font-size: 12px;
}
.vs-rec__loading {
    text-align: center;
    min-height: 360px;
    padding: 80px 30px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 20px;
}
.vs-rec__loading>span {
    width: 36px;
    height: 36px;
    border: 3px solid #f6dcd5;
    border-top-color: var(--rec-accent);
    border-radius: 50%;
    animation: vs-rec-spin .8s linear infinite;
}
.vs-rec__loading p {
    max-width: 350px;
    font-size: 14px;
    color: var(--rec-muted);
}
@keyframes vs-rec-spin {
    to {
        transform: rotate(360deg);
    }
}
.vs-rec__results {
    padding: 28px;
}
.vs-rec__results:focus {
    outline: none;
}
.vs-rec__result-head h3 {
    font-size: 30px;
    color: var(--rec-ink);
    margin: 10px 0 24px;
}
.vs-rec.has-results .vs-rec__layout {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
}
.vs-rec.has-results .vs-rec__sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    gap: 28px;
}
.vs-rec.has-results .vs-rec__help {
    padding: 22px;
    border: 1px solid var(--rec-line);
    border-radius: 14px;
}
.vs-rec.has-results .vs-rec__help p {
    font-size: 13px;
}
.vs-rec.has-results .vs-rec__help-icon {
    float: left;
    margin-right: 12px;
}
.vs-rec.has-results [data-profile] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
.vs-rec__cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
    align-items: stretch;
}
.vs-rec__card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--rec-line);
    border-radius: 13px;
    padding: 20px;
    background: #fff;
}
.vs-rec__card.is-winner {
    border: 2px solid var(--rec-accent);
    background: linear-gradient(#fff9f6,#fff 35%);
    padding: 19px;
}
.vs-rec__badge {
    align-self: flex-start;
    display: inline-block;
    color: #526073;
    background: #f0f3f6;
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.4;
}
.vs-rec__badge.best {
    color: #a3321c;
    background: #ffe5dc;
}
.vs-rec__badge.value {
    background: var(--rec-mint);
    color: #30644f;
}
.vs-rec__image {
    height: 175px;
    display: grid;
    place-items: center;
    margin: 12px 0;
}
.vs-rec__image img {
    width: 100%;
    height: 100%;
    max-height: 175px;
    object-fit: contain;
}
.vs-rec__image>span {
    font-size: 12px;
    color: #8a93a2;
}
.vs-rec__card>small {
    font-size: 11px;
    color: var(--rec-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.vs-rec__card h4 {
    font-size: 20px;
    margin: 6px 0 14px;
    overflow-wrap: anywhere;
}
.vs-rec__card h4 a {
    color: var(--rec-ink);
    text-decoration: none;
}
.vs-rec__score {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
    margin: 0 0 18px;
}
.vs-rec__score strong {
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.05em;
}
.vs-rec__score small {
    font-size: 12px;
    color: var(--rec-muted);
    margin-left: 2px;
    font-weight: 500;
}
.vs-rec__score>span {
    font-size: 11px;
    color: var(--rec-muted);
    max-width: 85px;
    line-height: 1.3;
}
.vs-rec__card h5 {
    font-size: 12px;
    margin: 0 0 8px;
    letter-spacing: 0;
}
.vs-rec__evidence {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 12px;
    color: #41634f;
}
.vs-rec__evidence li {
    position: relative;
    padding-left: 17px;
    margin: 7px 0;
    line-height: 1.45;
}
.vs-rec__evidence li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #398064;
}
.vs-rec__caveat {
    font-size: 11px;
    line-height: 1.6;
    color: #80622f;
    background: #fff9ec;
    border-radius: 6px;
    padding: 9px;
    margin: 0 0 14px;
}
.vs-rec__card-actions {
    margin-top: auto;
}
.vs-rec__price {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.04em;
    margin: 12px 0;
}
.vs-rec__price>span {
    font-size: 12px;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--rec-muted);
}
.vs-rec__details {
    display: block;
    text-align: center;
    background: var(--rec-ink);
    color: #fff;
    border: 1px solid var(--rec-ink);
    font-size: 12px;
}
.vs-rec__details:hover {
    background: #2c4368;
    color: #fff;
}
.vs-rec__buy {
    display: block;
    min-height: 44px;
    padding: 12px 0 0;
    text-align: center;
    font-size: 11px;
    font-weight: 650;
    color: var(--rec-dark);
    text-decoration: none;
}
.vs-rec__buy:hover {
    text-decoration: underline;
}
.vs-rec__method {
    font-size: 11px;
    color: var(--rec-muted);
    line-height: 1.65;
    max-width: 800px;
    margin: 18px 0 24px;
}
.vs-rec__result-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.vs-rec__result-actions button {
    border: 1px solid var(--rec-line);
    color: var(--rec-ink);
    background: #fff;
}
.vs-rec__result-actions .vs-rec__restart {
    border: 0;
    font-size: 11px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    color: var(--rec-muted);
    background: transparent;
}
.vs-rec__notice {
    background: #fff9ec;
    color: #725524;
    border: 1px solid #edddba;
    padding: 16px;
    border-radius: 9px;
    font-size: 13px;
    margin: 0 0 22px;
}
.vs-rec__empty {
    font-size: 15px;
    line-height: 1.7;
    color: var(--rec-muted);
    max-width: 650px;
    margin: 0 0 28px;
}
.vs-rec [data-price-notice] {
    font-size: 11px;
    color: var(--rec-muted);
    padding: 0 28px 24px;
}
.vs-rec .vacuum-amazon-price-notice {
    border-top: 1px solid var(--rec-line);
    padding-top: 12px;
    font-size: 11px;
}
.vs-rec__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/* A compact journey header keeps the question and price control in view. */
.vs-rec__phases {
    display: flex;
    gap: 24px;
    padding: 20px 30px;
    border-bottom: 1px solid #edf0f4;
    background: #fafbfc;
}
.vs-rec__phases > span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 650;
    color: #8590a1;
}
.vs-rec__phases b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: #edf0f4;
    border-radius: 50%;
    font-size: 10px;
}
.vs-rec__phases .is-active { color: var(--rec-dark); }
.vs-rec__phases .is-active b { color: #fff; background: var(--rec-accent); }
.vs-rec__phases .is-done { color: #30644f; }
.vs-rec__phases .is-done b { background: var(--rec-mint); }
.vs-rec__budget {
    padding: 24px;
    border: 1px solid #f0d9d1;
    border-radius: 16px;
    background: linear-gradient(135deg, #fffbf8, #fff5ee);
}
.vs-rec__budget-heading > span {
    display: block;
    color: #866253;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.vs-rec__budget-heading output {
    display: block;
    color: var(--rec-ink);
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1.2;
    margin: 9px 0 22px;
    font-variant-numeric: tabular-nums;
}
.vs-rec__budget-slider {
    position: relative;
    height: 44px;
    margin: 0 10px;
}
.vs-rec__budget-slider::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(to right, #e2dcd8 0 var(--budget-start, 0%), var(--rec-accent) var(--budget-start, 0%) var(--budget-end, 100%), #e2dcd8 var(--budget-end, 100%) 100%);
}
.vs-rec__budget-slider input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
    box-shadow: none;
}
.vs-rec__budget-slider input:first-child { z-index: 2; }
.vs-rec__budget-slider input:last-child { z-index: 1; }
.vs-rec__budget-slider input:focus-visible { outline: 2px solid #087fb3; outline-offset: 4px; border-radius: 6px; }
.vs-rec__budget-slider input::-webkit-slider-runnable-track { height: 7px; background: transparent; }
.vs-rec__budget-slider input::-moz-range-track { height: 7px; background: transparent; }
.vs-rec__budget-slider input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -10px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: var(--rec-accent);
    box-shadow: 0 0 0 1px #da795f, 0 3px 8px #b5643430;
    pointer-events: auto;
    cursor: grab;
}
.vs-rec__budget-slider input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: var(--rec-accent);
    box-shadow: 0 0 0 1px #da795f, 0 3px 8px #b5643430;
    pointer-events: auto;
    cursor: grab;
}
.vs-rec__budget-scale {
    display: flex;
    justify-content: space-between;
    margin: 0 0 22px;
    font-size: 10px;
    color: #86746b;
}
.vs-rec__budget-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.vs-rec__budget-fields > span { margin-top: 22px; color: #a0938d; }
.vs-rec__budget-field { display: block; min-width: 0; }
.vs-rec__budget-field > span:first-child { display: block; margin-bottom: 7px; font-size: 11px; color: #806c60; font-weight: 650; }
.vs-rec__budget-input { display: flex; align-items: center; gap: 6px; border: 1px solid #ded3ca; border-radius: 10px; padding: 0 12px; background: #fff; }
.vs-rec__budget-input:focus-within { border-color: var(--rec-accent); outline: 3px solid #e6533618; }
.vs-rec__budget-input input[type="number"] { min-width: 0; width: 100%; height: 48px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--rec-ink); font: inherit; font-size: 19px; font-weight: 750; box-shadow: none; }
.vs-rec__budget-input b { font-size: 10px; color: #8b7b70; font-weight: 650; }
.vs-rec__budget-input:has([aria-invalid="true"]) { border-color: #b42318; }
.vs-rec__budget-presets { margin-top: 18px; }
.vs-rec__budget-presets > span { font-size: 11px; color: var(--rec-muted); }
.vs-rec__budget-presets > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.vs-rec__budget-presets button { min-height: 38px; border: 1px solid var(--rec-line); background: #fff; color: var(--rec-muted); font-size: 11px; padding: 8px 12px; border-radius: 999px; }
.vs-rec__budget-presets button:hover, .vs-rec__budget-presets button.is-active { border-color: var(--rec-accent); background: #fff5ef; color: var(--rec-dark); }

@media(max-width:980px) {
    .vs-rec__layout {
        grid-template-columns: minmax(0,1fr) 225px;
        margin-right: 0;
        margin-left: 0;
        gap: 18px;
    }
    .vs-rec__hero {
        padding: 28px;
    }
    .vs-rec__options {
        grid-template-columns: 1fr;
    }
    .vs-rec__cards {
        gap: 10px;
    }
    .vs-rec__card {
        padding: 14px;
    }
    .vs-rec__card.is-winner {
        padding: 13px;
    }
    .vs-rec__card h4 {
        font-size: 18px;
    }
    .vs-rec__details {
        font-size: 11px;
        padding: 12px 8px;
    }
}
@media(max-width:700px) {
    .vs-rec {
        padding: 0;
        margin: 12px auto 40px;
    }
    .vs-rec__phases { gap: 8px; padding: 16px 18px; justify-content: space-between; }
    .vs-rec__phases > span { font-size: 10px; gap: 4px; }
    .vs-rec__phases b { width: 20px; height: 20px; font-size: 9px; }
    .vs-rec__budget { padding: 18px 14px; }
    .vs-rec__budget-heading output { font-size: 26px; }
    .vs-rec__budget-fields { gap: 9px; }
    .vs-rec__budget-input { padding: 0 8px; }
    .vs-rec__budget-input input[type="number"] { font-size: 16px; }
    .vs-rec__budget-presets > div { display: grid; grid-template-columns: 1fr 1fr; }
    .vs-rec__hero {
        padding: 24px 20px;
        border-radius: 16px;
    }
    .vs-rec__hero h2 {
        font-size: 30px;
        max-width: 450px;
    }
    .vs-rec__eyebrow {
        font-size: 9px;
        letter-spacing: .1em;
    }
    .vs-rec__intro {
        font-size: 14px;
    }
    .vs-rec__trust {
        font-size: 10px;
        line-height: 1.8;
        padding-top: 12px;
        margin-top: 16px;
    }
    .vs-rec__layout {
        grid-template-columns: 1fr;
        margin-top: 16px;
        gap: 20px;
    }
    .vs-rec__panel {
        border-radius: 12px;
    }
    .vs-rec__progress {
        padding: 22px 20px 0;
    }
    .vs-rec form, .vs-rec__results {
        padding: 24px 20px;
    }
    .vs-rec legend {
        font-size: 25px;
    }
    .vs-rec__hint {
        font-size: 12px;
        margin-bottom: 20px;
    }
    .vs-rec__option {
        min-height: 62px;
        font-size: 13px;
        padding: 14px;
    }
    .vs-rec__actions {
        padding-top: 16px;
    }
    .vs-rec__next {
        max-width: 75%;
        font-size: 12px;
    }
    .vs-rec__sidebar {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .vs-rec__help {
        padding: 20px;
        border: 1px solid var(--rec-line);
        border-radius: 12px;
    }
    .vs-rec.has-results .vs-rec__sidebar, .vs-rec__cards {
        grid-template-columns: 1fr;
    }
    .vs-rec__card, .vs-rec__card.is-winner {
        padding: 20px;
    }
    .vs-rec__card h4 {
        font-size: 22px;
    }
    .vs-rec__image {
        height: 175px;
    }
    .vs-rec__details {
        font-size: 13px;
    }
    .vs-rec__result-head h3 {
        font-size: 28px;
    }
    .vs-rec__result-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .vs-rec__result-actions .vs-rec__restart {
        margin: 0;
    }
    .vs-rec.has-results [data-profile] {
        grid-template-columns: 1fr;
    }
    .vs-rec [data-price-notice] {
        padding: 0 20px 20px;
    }
}
@media(prefers-reduced-motion:reduce) {
    .vs-rec * {
        transition: none!important;
        animation: none!important;
        scroll-behavior: auto!important;
    }
}
/* Follows the light hero when selected in the comparator's design settings. */
.vs-rec--light .vs-rec__hero {
    background: radial-gradient(ellipse at 90% 30%,#fff1e8,transparent 60%),radial-gradient(ellipse at 30% 0,#fff0f8,transparent 65%),#fff;
    color: #11131a;
    border: 1px solid #f2e5e9;
}
.vs-rec--light .vs-rec__hero h2 {
    color: #11131a;
    background: linear-gradient(100deg,#11131a 0 35%,#ed007f 65%,#ff7524 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vs-rec--light .vs-rec__eyebrow {
    color: #c6006d;
}
.vs-rec--light .vs-rec__intro {
    color: #444954;
}
.vs-rec--light .vs-rec__trust {
    color: #444954;
    border-color: #17233c22;
}
.vs-rec--light .vs-rec__orbit, .vs-rec--light .vs-rec__orbit::after {
    border-color: #17233c22;
}

/* Original illustrations explain each question without adding external requests. */
.vs-rec__hero-art { flex: 0 0 300px; width: 300px; overflow: hidden; border-radius: 20px; background: #fff5ec; box-shadow: 0 14px 32px #0002; transform: rotate(2deg); }
.vs-rec__hero-art img { display: block; width: 100%; height: auto; }
.vs-rec legend { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 18px; }
.vs-rec__question-art { display: block; width: 120px; height: 79px; object-fit: contain; }
.vs-rec__clearance-choices { display: grid; grid-template-columns: 1fr; gap: 12px; }
.vs-rec__clearance-field { margin-top: 18px; padding: 20px; background: #fff7ef; border: 1px solid #f0ded1; border-radius: 12px; }
.vs-rec__clearance-field label { display: block; font-size: 13px; font-weight: 650; }
.vs-rec__clearance-field label > span { display: flex; align-items: center; gap: 12px; max-width: 260px; margin-top: 10px; background: #fff; border: 1px solid #d9cabc; border-radius: 9px; padding: 0 12px; }
.vs-rec__clearance-field input { width: 100%; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--rec-ink); font: inherit; font-size: 22px; font-weight: 700; box-shadow: none; }
.vs-rec__clearance-field label > span:focus-within { outline: 3px solid #e6533628; border-color: var(--rec-accent); }
.vs-rec__clearance-field b { color: var(--rec-muted); font-size: 12px; }
.vs-rec__height-match { font-size: 12px; padding: 9px 10px; border-radius: 7px; background: var(--rec-mint); color: #30644f; }
.vs-rec__loading > img { display: block; width: min(100%, 310px); height: auto; border-radius: 20px; }
.vs-rec__loading-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; padding: 0; margin: 0; max-width: 580px; font-size: 11px; }
.vs-rec__loading-steps li { padding: 12px; background: #f8fafb; border: 1px solid var(--rec-line); border-radius: 9px; color: var(--rec-muted); }
.vs-rec__loading-steps li:first-child { color: #30644f; background: var(--rec-mint); }
.vs-rec__loading-steps .is-active { color: var(--rec-dark); border-color: #edb9a9; background: #fff7f0; }
.vs-rec__floor-plan { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px 30px; margin-bottom: 26px; padding: 26px; border: 1px solid #b9d7c8; border-radius: 16px; background: linear-gradient(125deg, #f0f8f3, #fff); }
.vs-rec__floor-plan h4 { font-size: 27px; margin: 10px 0 12px; }
.vs-rec__floor-plan-copy > p { font-size: 13px; line-height: 1.65; color: #53655b; max-width: 620px; margin: 12px 0; }
.vs-rec__plan-price { font-size: 36px; font-weight: 800; letter-spacing: -.04em; }
.vs-rec__floor-plan .vs-rec__details { display: inline-block; margin-top: 6px; }
.vs-rec__floor-plan-art { display: grid; align-content: center; justify-items: center; gap: 10px; }
.vs-rec__floor-plan-art img { max-width: 100%; height: auto; max-height: 170px; object-fit: contain; mix-blend-mode: multiply; border-radius: 10px; }
.vs-rec__floor-plan-art > span { font-size: 24px; font-weight: 800; padding: 4px 18px; border-radius: 99px; background: var(--rec-mint); color: #30644f; }
.vs-rec__floor-plan .vs-rec__plan-notice { grid-column: 1 / -1; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #cddfd2; font-size: 11px; color: #5c6e61; line-height: 1.6; }
.vs-rec__floors-advice { padding: 16px 20px; border-radius: 10px; background: #f3f7fa; margin-bottom: 20px; }
.vs-rec__floors-advice h4 { font-size: 15px; letter-spacing: 0; margin: 0 0 6px; }
.vs-rec__floors-advice p { font-size: 12px; line-height: 1.6; margin: 0; color: var(--rec-muted); }
@media (max-width: 980px) {
    .vs-rec__hero-art { flex-basis: 230px; width: 230px; }
}
@media (max-width: 700px) {
    .vs-rec__hero-art { display: none; }
    .vs-rec legend { grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; font-size: 23px; }
    .vs-rec__question-art { width: 76px; height: 66px; }
    .vs-rec__floor-plan { grid-template-columns: 1fr; padding: 20px; }
    .vs-rec__floor-plan h4 { font-size: 23px; }
    .vs-rec__floor-plan-art { grid-template-columns: 120px auto; justify-content: start; align-items: center; }
    .vs-rec__floor-plan-art img { max-height: 90px; }
    .vs-rec__plan-price { font-size: 30px; }
    .vs-rec__loading-steps { grid-template-columns: 1fr; text-align: left; }
}

/* Answer cards each have their own editable illustration. */
.vs-rec__option--visual { flex-direction: column; align-items: center; justify-content: flex-start; min-height: 172px; padding: 15px 20px 18px; gap: 10px; text-align: center; }
.vs-rec__option--visual .vs-rec__check { position: absolute; right: 12px; top: 12px; margin: 0; }
.vs-rec__answer-art { width: min(100%, 160px); height: 96px; object-fit: contain; }
.vs-rec__answer-copy strong { display: block; font: inherit; font-weight: 700; }
.vs-rec__answer-copy small { display: block; margin-top: 7px; color: var(--rec-muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.vs-rec__clearance-choices { grid-template-columns: repeat(2, minmax(0,1fr)); }
.vs-rec__budget-presets button { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 12px; padding: 8px 12px; }
.vs-rec__budget-presets button img { display: block; height: 48px; width: 72px; object-fit: contain; }
@media(max-width:700px) {
    .vs-rec__options { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .vs-rec__option--visual { min-height: 150px; padding: 14px 10px; font-size: 12px; }
    .vs-rec__answer-art { height: 76px; }
    .vs-rec__option--visual .vs-rec__check { width: 18px; height: 18px; right: 8px; top: 8px; }
}

.vs-rec legend:not(:has(.vs-rec__question-art)) { display: block; }