/* =============================================================
   CONTACT FORM
   Narrow centered card, matches site card style (radius/border/shadow)
   ============================================================= */

.cf-block {
    width: 100%;
}

.cf-container {
    max-width: 1200px;
    box-sizing: border-box;
    margin: 24px auto;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 12px;
    border: 1px solid rgba(171, 170, 170, 0.10);
    box-shadow: 2px 2px 4px rgba(179, 179, 179, 0.3);
    background: #ffffff;
}

.cf-heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(22px, 3vw, 28px);
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.cf-subheading {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(19px, 2.2vw, 22px);
    color: #1a1a1a;
    margin: 4px 0 18px 0;
}

.cf-intro-blurb {
    font-size: clamp(14px, 1.6vw, 16px);
    color: #555;
    line-height: 1.5;
    margin: 0 0 28px 0;
}

.cf-intro-blurb ul {
    margin: 8px 0 16px 0;
    padding-left: 20px;
}

.cf-intro-blurb li {
    margin-bottom: 4px;
}

.cf-intro-blurb p {
    margin: 0 0 12px 0;
}

/* --- Labels --- */

.cf-label {
    display: block;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 17px);
    color: #1a1a1a;
    margin: 20px 0 10px 0;
}

.cf-label--sub {
    font-weight: 600;
    font-size: 14px;
    margin-top: 14px;
}

/* Persistent labels for "Other"/free-text follow-up fields. A placeholder
   alone reads as an instruction ("enter the type of property") rather
   than an editable field to some people — these mini-labels never
   disappear on focus/entry the way placeholder text does, so the field
   still reads as "type here" even once something's typed in. */

/* Label + input joined into one visual unit — a header strip attached
   directly to the top of the box it describes, sharing one border, no
   gap between them. Two separate elements with space in between read as
   disjointed (label floating above an unrelated box), especially on
   mobile — this makes the pairing visually obvious instead. */
.cf-field-joined {
    border: 1px solid rgba(171, 170, 170, 0.35);
    border-radius: 8px;
    overflow: hidden;
    margin: clamp(20px, 4vw, 30px) 0 0 0;
}

.cf-field-joined[hidden] {
    display: none;
}

/* Scoped to direct children (plus a fieldset's own legend) deliberately
   — NOT a plain descendant selector. A plain `.cf-field-joined .cf-label`
   was reaching into everything nested inside a joined box, including
   every .cf-label--sub sub-question inside a fieldset's grouped content
   (Site Access, Bathroom Facilities, Mattresses) — turning each one into
   a full header bar meant for the box's own single header, and (via the
   matching .cf-input rule below) stripping the border off every nested
   count/text field regardless of depth. That's what was making grouped
   sections look broken rather than just needing spacing. */
.cf-field-joined > .cf-label--hint,
.cf-field-joined > .cf-label,
.cf-field-joined > .cf-fieldset > legend.cf-label {
    margin: 0;
    padding: clamp(10px, 2vw, 13px) clamp(12px, 3vw, 14px);
    background: rgba(171, 170, 170, 0.10);
    border-bottom: 1px solid rgba(171, 170, 170, 0.35);
}

.cf-field-joined > .cf-input,
.cf-field-joined > .cf-select,
.cf-field-joined > .cf-textarea {
    border: none;
    border-radius: 0;
    margin: 0;
    width: 100%;
}

.cf-field-joined > .cf-input:focus,
.cf-field-joined > .cf-select:focus,
.cf-field-joined > .cf-textarea:focus {
    outline: none;
    border-color: transparent;
    box-shadow: inset 0 0 0 2px #535353;
}

/* The joined box strips a field's own border — needs restoring here or
   the red error state (set by JS on a failed Step 3 validation) would
   silently have no visible border at all, just the same as a normal
   field. */
.cf-field-joined > .cf-input--error,
.cf-field-joined > .cf-textarea--error {
    border: 2px solid #e00000;
}

.cf-field-joined > .cf-select {
    /* The joined box already has its own border/radius — the select's
       own dropdown-arrow background still applies, just without its own
       independent border/corners fighting the wrapper's. */
    padding-right: 38px;
}

/* For content that isn't a single .cf-input/.cf-select/.cf-textarea —
   a checkbox/radio group, a slider — and so needs its own padding
   inside the joined box rather than inheriting an input's built-in
   padding. */
.cf-field-joined-body {
    padding: 14px 14px 14px 14px;
}

.cf-field-joined-body .cf-checkbox,
.cf-field-joined-body .cf-radio {
    padding: 9px 0;
}

/* "Own little rounded box" for a sub-question living inside a shared
   fieldset body (a Yes/No pair, a count field, a notes box) — same
   header-bar-on-a-bordered-box idea as the main .cf-field-joined, just
   lighter/smaller since it's nested one level deeper. Distinct from
   .cf-field-joined itself so the scoped `>` rules above never conflict
   with it. */
.cf-subgroup {
    border: 1px solid rgba(171, 170, 170, 0.35);
    border-radius: 8px;
    overflow: hidden;
    margin: 16px 0 0 0;
}

.cf-subgroup:first-child {
    margin-top: 0;
}

.cf-subgroup > .cf-label--sub {
    display: block;
    margin: 0;
    padding: clamp(8px, 1.8vw, 11px) clamp(10px, 2.5vw, 12px);
    background: rgba(171, 170, 170, 0.08);
    border-bottom: 1px solid rgba(171, 170, 170, 0.35);
}

.cf-subgroup-body {
    padding: 6px 12px 10px 12px;
}

.cf-subgroup-body .cf-radio {
    padding: 7px 0;
}

.cf-subgroup-body .cf-input,
.cf-subgroup-body .cf-textarea {
    border: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.cf-field-joined > .cf-fieldset {
    margin: 0;
    padding: 0;
}

.cf-field-joined-body .cf-range {
    margin: 8px 0 0 0;
}

.cf-field-joined-body .cf-range-output {
    margin: 10px 0 0 0;
}

/* Indented variant — paired with a checkbox sitting above it, matches
   that checkbox's implied indent. */
.cf-field-joined--sub {
    margin-left: 30px;
    width: calc(100% - 30px);
}

/* Narrow variant — for the small room/count number boxes, which were
   never meant to be full-width to begin with. */
.cf-field-joined--count {
    max-width: 450px;
}

.cf-label--hint {
    display: block;
    font-family: Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(15px, 1.6vw, 16px);
    color: #1a1a1a;
    margin: 6px 0 4px 0;
}

.cf-label--hint[hidden] {
    display: none;
}

/* Paired with an indented .cf-input--sub field sitting under a checkbox —
   matches that field's 30px indent so the two visually pair up. Used by
   every "Other"/notes field not yet converted to the joined style above. */
.cf-label--hint-sub {
    margin-left: 30px;
}

/* --- Inputs / selects / textareas --- */

.cf-input,
.cf-select,
.cf-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid rgba(171, 170, 170, 0.35);
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #1a1a1a;
    background: #fff;
}

.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
    outline: none;
    border-color: #535353;
}

.cf-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23555' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 38px;
}

.cf-textarea {
    resize: vertical;
    font-family: Arial, sans-serif;
}

/* --- Checkboxes / radios --- */

.cf-fieldset {
    border: none;
    margin: 20px 0 0 0;
    padding: 0;
}

.cf-fieldset legend {
    padding: 0;
    width: 100%;
}

.cf-checkbox,
.cf-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: Arial, sans-serif;
    font-size: clamp(15px, 1.6vw, 16px);
    color: #333;
    padding: 9px 0;
    cursor: pointer;
}

.cf-checkbox input,
.cf-radio input {
    width: 18px;
    height: 18px;
    accent-color: #535353;
    cursor: pointer;
    flex-shrink: 0;
}

.cf-checkbox--rural {
    margin-top: 20px;
    font-style: italic;
    color: #555;
}

/* Had no styling at all before — falling back to the browser's bare
   default <p>, which is why it read so much smaller than the text
   around it despite nothing deliberately shrinking it. */
.cf-rural-note {
    font-family: Arial, sans-serif;
    font-size: clamp(16px, 4vw, 17px);
    font-style: italic;
    color: #555;
    line-height: 1.5;
    margin: 10px 0 0 0;
}

/* --- Errors / status --- */

.cf-error {
    color: #e00000;
    font-size: 14px;
    margin: 10px 0 0 0;
}

.cf-required {
    color: #e00000;
}

.cf-input--error,
.cf-textarea--error {
    border: 2px solid #e00000;
}

.cf-checkbox--error {
    color: #e00000;
    font-weight: 700;
}

/* --- Cancellation policy box --- */

.cf-cancellation-policy {
    margin-top: 24px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(171, 170, 170, 0.06);
    border: 1px solid rgba(171, 170, 170, 0.15);
}

.cf-policy-text {
    font-family: Arial, sans-serif;
    font-size: clamp(15px, 1.6vw, 16px);
    color: #333;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

/* --- Turnstile --- */

.cf-turnstile {
    margin: 20px 0;
}

/* --- Step 2 accordion ---
   Each section is a small card matching the site card style. The header
   is a real <button> so it's keyboard-operable; panels collapse with the
   hidden attribute rather than a height animation, so a long section
   never gets clipped. */

.cf-category-header {
    margin: 32px 0 12px 0;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid rgba(171, 170, 170, 0.10);
    box-shadow: 2px 2px 4px rgba(179, 179, 179, 0.3);
    background: #eae9e9;
}

.cf-category-header--commercial {
    background: #b6bdb1;
}

.cf-category-header .cf-subheading {
    margin: 0;
}

.cf-acc-item {
    display: block;
    margin: 0 0 12px 0;
    border-radius: 12px;
    border: 1px solid rgba(171, 170, 170, 0.10);
    box-shadow: 2px 2px 4px rgba(179, 179, 179, 0.3);
    background: #fff;
    overflow: hidden;
}

/* An author `display` declaration beats the UA stylesheet's
   `[hidden] { display: none }` no matter the specificity, so every rule
   above that sets display on an accordion part needs this guard — without
   it the Vacate/Bond section stays on screen for people who never ticked
   Bond, even though the attribute is correctly set. */
.cf-acc-item[hidden] {
    display: none;
}

.cf-acc-item--commercial {
    background: #fafff6;
}

/* A section not yet reached — inert to a tap until unlocked by the
   previous section's Next button. Dimmed and non-interactive-looking so
   a stray tap doing nothing reads as "not available yet", not "broken". */
.cf-acc-item--locked .cf-acc-toggle {
    cursor: default;
    opacity: 0.55;
}

.cf-acc-item--locked .cf-acc-toggle:hover {
    background: rgba(171, 170, 170, 0.06);
}

.cf-acc {
    margin-top: 8px;
}

.cf-acc-heading {
    margin: 0;
}

.cf-acc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border: none;
    background: rgba(171, 170, 170, 0.06);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cf-acc-toggle:hover {
    background: rgba(171, 170, 170, 0.14);
}

.cf-acc-toggle:focus-visible {
    outline: 2px solid #535353;
    outline-offset: -2px;
}

.cf-acc-item--open .cf-acc-toggle {
    background: rgba(171, 170, 170, 0.14);
}

.cf-acc-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(16px, 1.9vw, 18px);
    color: #1a1a1a;
}

/* Chevron: a rotating CSS caret, so there's no icon font or SVG to load.
   Hidden entirely below — real-world testing found it read as "you need
   to do something with this" to some people regardless of section
   state (currently working on it, or already finished and collapsed),
   which is the opposite of what an inert or already-completed section
   should communicate. Tapping a header still opens/closes it exactly as
   before; there's just no arrow icon attached to that any more. */
.cf-acc-chevron {
    display: none;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    transform-origin: center;
    margin-bottom: 4px;
    transition: transform 0.2s ease;
}

.cf-acc-item--open .cf-acc-chevron {
    transform: rotate(225deg);
    margin-bottom: 0;
    margin-top: 4px;
}

.cf-acc-panel {
    padding: 4px 18px 18px 18px;
}

.cf-acc-panel[hidden] {
    display: none;
}

.cf-acc-blurb {
    font-family: Arial, sans-serif;
    font-size: clamp(15px, 1.6vw, 16px);
    color: #555;
    line-height: 1.5;
    margin: 14px 0 0 0;
}

/* Per-section Next — display-only, so it reads lighter than the real
   step buttons in the bottom nav. */
.cf-acc-nav {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 14px;
}

.cf-acc-nav[hidden] {
    display: none;
}

.cf-btn--acc-next {
    padding: 8px 20px;
    font-size: 14px;
}

/* Room/mattress counts don't need the full input width. */
.cf-input--count {
    max-width: 140px;
}

/* The "Other" box belonging to a dropdown, shown only while "Other" is
   the selected value. It follows a full-width <select> rather than a
   checkbox, so it needs breathing room above but no indent. */
.cf-input--reveal {
    margin: 8px 0 0 0;
}

.cf-input--reveal[hidden] {
    display: none;
}

/* A free-text field that belongs to the checkbox above it — indented to
   show the pairing. Always on screen, never revealed on tick. */
.cf-input--sub {
    margin: 2px 0 6px 30px;
    width: calc(100% - 30px);
}

/* --- Tidiness slider --- */

.cf-range {
    width: 100%;
    margin: 4px 0 0 0;
    accent-color: #535353;
    cursor: pointer;
}

.cf-range-output {
    font-family: Arial, sans-serif;
    font-size: clamp(15px, 1.7vw, 17px);
    font-weight: 600;
    color: #333;
    margin: 10px 0 0 0;
}

/* --- Bottom nav (step indicator + button) --- */

.cf-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 20px;
}

.cf-nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cf-step-indicator {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #777;
}

.cf-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    border: none;
    background: #535353;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Same class of bug as .cf-acc-item[hidden] above: an author `display`
   rule beats the browser's [hidden] default regardless of specificity,
   so any custom-display element needs its own explicit [hidden] guard —
   otherwise setting .hidden = true in JS silently does nothing. */
.cf-btn[hidden] {
    display: none;
}

.cf-btn:hover {
    background: #1a1a1a;
}

.cf-btn--preview {
    background: transparent;
    color: #535353;
    border: 1px solid rgba(171, 170, 170, 0.35);
}

.cf-btn--preview:hover {
    background: rgba(171, 170, 170, 0.10);
    color: #1a1a1a;
}

.cf-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    z-index: 1000;
}

.cf-preview-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 2px 2px 4px rgba(179, 179, 179, 0.3);
}
.cf-preview-sticky-bar {
    /* No longer sticky/full-width — see .cf-preview-close below for why. */
    display: contents;
}

/* A sticky, full-width close bar was tried here first and reverted: once
   it locks into place while scrolling a long preview, position: sticky
   paints itself over whatever content is scrolling underneath it,
   hiding a strip of the person's own answers exactly where the old
   floating "×" was trying to avoid. Fixed to a small corner of the
   *viewport* instead — same footprint-minimising idea as the "Done"
   keyboard-dismiss button — so it only ever covers a small, constant
   patch of screen, never a moving strip of content. */
.cf-preview-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1002;
    padding: 10px 20px;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cf-review-section-heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 17px;
    color: #240293;
    margin: 20px 0 8px 0;
}

.cf-review-section-heading:not(:first-child) {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 2px solid rgba(55, 54, 54, 0.35);
}

.cf-review-subheading {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #333;
    margin: 16px 0 6px 0;
}

.cf-review-subheading-blurb {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #777;
    line-height: 1.5;
    margin: 0 0 8px 0;
}

.cf-review-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(171, 170, 170, 0.15);
    font-size: 14px;
}

.cf-review-label {
    font-weight: 700;
    color: #333;
    flex: 0 0 45%;
}

.cf-review-value {
    color: #555;
    text-align: right;
}

.cf-preview-overlay[hidden] {
    display: none;
}

/* Floating "Done" button while a field is focused — desktop has no
   keyboard-covers-the-screen problem to solve, so this stays off there
   entirely regardless of its hidden state; the mobile block below is
   the only place it's ever switched on. */
#cf-dismiss-keyboard {
    display: none;
}

#cf-reveal-cf-windows-interior-notes,
#cf-reveal-cf-com-windows-interior-notes,
#cf-reveal-cf-windows-exterior-notes,
#cf-reveal-cf-com-windows-exterior-notes,
#cf-reveal-inclusions-other-res,
#cf-reveal-inclusions-other {
    margin: 8px 0px;
}

/* --- Mobile: flatten card, matches hero/hg-grid pattern --- */

@media (max-width: 599px) {
    /* Deliberately targets :not([hidden]) rather than the bare id — a
       plain #cf-dismiss-keyboard { display: block } here would fall into
       the same trap flagged elsewhere in this file: an author `display`
       rule beats the browser's [hidden] default, so the button would
       stay visible even when JS sets hidden = true. Scoping the display
       change to the un-hidden state only sidesteps that entirely. */
    #cf-dismiss-keyboard:not([hidden]) {
        display: block;
        position: fixed;
        bottom: 16px;
        right: 16px;
        z-index: 2000;
        padding: 10px 22px;
        border-radius: 24px;
        border: none;
        background: #535353;
        color: #fff;
        font-family: Arial, sans-serif;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    .cf-container {
        border-radius: 0;
        border: none;
        box-shadow: none;
        margin: 0 auto;
        padding: 20px 16px;
    }

    .cf-heading {
        font-size: clamp(20px, 5vw, 24px);
    }

    cf-container {
        border-radius: 0;
        border: none;
        box-shadow: none;
        margin: 0 auto;
        padding: 20px 16px;
    }

    .cf-heading {
        font-size: clamp(20px, 5vw, 24px);
    }

    .cf-intro-blurb {
        font-size: clamp(18px, 4.5vw, 19px);
    }

    .cf-rural-note {
        font-size: clamp(18px, 4.5vw, 19px);
        margin-top: 16px;
    }

    .cf-policy-text {
        font-size: clamp(18px, 4.5vw, 19px);
    }

    .cf-subheading {
        font-size: clamp(19px, 4.5vw, 21px);
    }

    .cf-label {
        font-size: clamp(17px, 4vw, 18px);
    }

    .cf-label--sub {
        font-size: clamp(17px, 4vw, 18px);
    }

    /* Checkbox/radio labels never got the same mobile size boost every
       other text element already has — left at the desktop-sized clamp
       (which floors out at 15px on a narrow phone since 1.6vw barely
       grows), while headings/labels/inputs around them all got a
       stronger mobile-specific clamp. Reads noticeably smaller than its
       neighbours as a result. */
    .cf-checkbox,
    .cf-radio {
        font-size: clamp(17px, 4vw, 18px);
    }

    .cf-label--hint {
        font-size: clamp(17px, 4.5vw, 18px);
    }

    .cf-field-joined {
        margin: 50px 0 0 0;
    }

    /* The 50px bump above is sized for the main joined fields (Property
       Type, Property Level, etc.) — bleeding into these smaller indented
       reveal boxes (Windows, Other) as well made the gap above them look
       oversized. Own smaller value here, plus a touch of breathing room
       underneath. */
    .cf-field-joined--sub {
        margin-top: 5px;
        margin-bottom: 12px;
    }

    .cf-input,
    .cf-select,
    .cf-textarea {
        font-size: clamp(16px, 4vw, 17px);
        font-weight: 600;
    }

    /* Placeholder text runs smaller/lighter than typed text on mobile
       specifically — a long placeholder (an example, not an instruction,
       now that persistent labels carry that job) shouldn't clip against
       the narrower width the way a same-size placeholder would. */
    /* Bumped again — even the smaller variant tried first still read as
       too small to Bruce on his own phone. Matching the typed-text size
       outright removes any ambiguity; the placeholder still reads as
       secondary via its lighter weight and the browser's own default
       lighter placeholder colour, not via being smaller. */
    .cf-input::placeholder,
    .cf-textarea::placeholder {
        font-size: clamp(16px, 4vw, 17px);
        font-weight: 400;
    }

    .cf-step-indicator {
        font-size: clamp(17px, 4vw, 18px);
    }

    .cf-error {
        font-size: clamp(15px, 3.5vw, 16px);
    }

    .cf-acc-item {
        border-radius: 12px;
        margin-bottom: 8px;
    }

    /* Screen space is the whole reason for this: on mobile, a section
       you can't do anything with yet is pure clutter, not just inert —
       hide it entirely rather than showing a dimmed row with nothing to
       tap. Completed sections stay visible and collapsed (untouched by
       this rule) so reopening one to fix a mistake still works; only
       genuinely locked/not-yet-reached ones disappear. Desktop keeps
       showing every header, dimmed, since space isn't the constraint
       there. */
    .cf-acc-item--locked {
        display: none;
    }

    .cf-acc-toggle {
        padding: 14px 12px;
    }

    .cf-acc-panel {
        padding: 4px 12px 16px 12px;
    }

    .cf-acc-title {
        font-size: clamp(17px, 4.2vw, 19px);
    }

    .cf-acc-blurb {
        font-size: clamp(17px, 4.2vw, 19px);
    }

    .cf-btn--acc-next {
        font-size: clamp(15px, 3.5vw, 16px);
    }

    .cf-input--count {
        max-width: none;
    }

    .cf-field-joined--count {
        max-width: none;
    }

    .cf-range-output {
        font-size: clamp(17px, 4vw, 18px);
    }

    /* The exact bug just found: three buttons side by side (Back, Check
       my details, Submit) plus the step indicator simply don't fit in
       one row on a narrow phone — Submit was pushed off the edge of the
       visible screen entirely, not broken, just invisible without
       scrolling sideways, which nobody thinks to try. Check My Quote
       sits alone on its own full-width row up top; Back and Next/Submit
       share the row below it — chosen over stacking all three because
       Back and Next/Submit are a natural pair (previous/next), while
       Check My Quote is a side action that benefits from its own space
       and doesn't need to fight the other two for room. */
    .cf-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cf-nav-right {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .cf-nav-right .cf-btn {
        box-sizing: border-box;
        text-align: center;
    }

    #cf-property-type-other-group, 
    #cf-property-type-other-group-commercial {
        margin-top: 8px;
    }

    /* Full-width row of its own, always first regardless of where it
       sits in the markup (Step 3's hidden error message is also inside
       .cf-nav-right, ahead of the buttons in the DOM). */
    .cf-nav-right .cf-error {
        order: -1;
        flex: 1 1 100%;
    }

    .cf-nav-right .cf-btn--preview {
        order: 1;
        flex: 1 1 100%;
        /* Buried in with the other two otherwise — a bright red border
           makes it read as its own distinct action, not just a third
           button blending into the row. */
        border: 2px solid #e00000;
        color: #e00000;
    }

    .cf-nav-right .cf-btn--back {
        order: 2;
        flex: 1 1 calc(50% - 5px);
    }

    .cf-nav-right .cf-btn--next,
    .cf-nav-right .cf-btn--submit {
        order: 3;
        flex: 1 1 calc(50% - 5px);
    }
}