/*
   Survey pages.

   Namespaced under .svy- so nothing here can reach existing pages, but the palette,
   type scale, radii and focus treatment are taken from the Careers and Services pages
   so the survey reads as part of the same site rather than a bolted-on form.
*/

.svy-page {
    --svy-accent: #FFC000;
    --svy-accent-soft: rgba(255, 192, 0, 0.14);
    --svy-ink: #ffffff;
    --svy-soft: rgba(255, 255, 255, 0.78);
    --svy-muted: rgba(255, 255, 255, 0.56);
    --svy-faint: rgba(255, 255, 255, 0.38);
    --svy-line: rgba(255, 255, 255, 0.08);
    --svy-panel: rgba(255, 255, 255, 0.03);
    --svy-panel-raised: rgba(255, 255, 255, 0.05);
    --svy-shadow: 0 22px 44px rgba(0, 0, 0, 0.22);

    background: radial-gradient(circle at 82% 10%, rgba(255, 192, 0, 0.06), transparent 22%),
                linear-gradient(180deg, #030405 0%, #050607 100%);
    color: var(--svy-soft);

    /* Not 100vh. The other pages carry enough content that a full-viewport floor
       never shows, but a survey list with one card ends after ~400px, and forcing
       the section to a full screen pushed the site footer a screen and a half down
       and left the difference empty. This floor keeps a short page from looking
       truncated without inventing a void beneath it. */
    min-height: 52vh;
    padding: 72px 0 88px;
}

.svy-container {
    /* Same shell as .careers-shell and the other pages, so the survey's left edge
       lines up with the rest of the site instead of floating in its own column. */
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Reading measures inside the shell. Content stays left-aligned with the site;
   only its line length is constrained, which is what a form actually needs. */
.svy-title {
    max-width: 24ch;
}

/* The form panel spans the shell, exactly as the contact panel on What we do
   does. Line length is controlled by the two-column grid inside it, not by
   pinching the panel into a narrow strip and leaving the page half empty. */
.svy-panel,
.svy-progress {
    max-width: none;
}

/* Cards flow across the width instead of stacking down the left. */
.svy-list {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.svy-empty {
    max-width: none;
}

.svy-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--svy-accent);
    margin-bottom: 14px;
}

.svy-title {
    font-family: "Montserrat", sans-serif;
    margin: 0 0 14px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--svy-ink);
}

.svy-lede {
    margin: 0 0 34px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 68ch;
}

/* ---- Index list ---- */

.svy-list {
    display: grid;
    gap: 18px;
}

.svy-card {
    display: block;
    background: var(--svy-panel);
    border: 1px solid var(--svy-line);
    border-radius: 18px;
    padding: 26px 28px;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.svy-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 192, 0, 0.42);
    background: var(--svy-panel-raised);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    text-decoration: none;
}

.svy-card__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--svy-ink);
    margin: 0 0 6px;
}

.svy-card__meta {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--svy-muted);
    margin: 0 0 10px;
}

.svy-card__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0;
}

.svy-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.svy-badge--open {
    background: var(--svy-accent-soft);
    border: 1px solid rgba(255, 192, 0, 0.32);
    color: var(--svy-accent);
}

.svy-badge--closed {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--svy-line);
    color: var(--svy-muted);
}

/* ---- Panels ---- */

.svy-panel {
    background: var(--svy-panel);
    border: 1px solid var(--svy-line);
    border-radius: 22px;
    padding: 34px 32px;
    box-shadow: var(--svy-shadow);
}

/* ---- Multi-step chrome ---- */

.svy-progress {
    display: flex;
    gap: 8px;
    margin: 0 0 32px;
}

.svy-progress__bar {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

.svy-progress__bar.is-done {
    background: var(--svy-accent);
    box-shadow: 0 0 12px rgba(255, 192, 0, 0.34);
}

.svy-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--svy-line);
}

.svy-fact {
    display: flex;
    flex-direction: column;
}

.svy-fact__value {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    color: var(--svy-accent);
    line-height: 1.1;
}

.svy-fact__label {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--svy-muted);
    margin-top: 6px;
}

.svy-steps-preview {
    margin: 0 0 24px;
    padding-left: 20px;
    color: var(--svy-muted);
    line-height: 1.9;
}

.svy-steps-preview strong {
    color: var(--svy-soft);
    font-weight: 600;
}

/* ---- Sections ---- */

.svy-section + .svy-section {
    margin-top: 38px;
    padding-top: 32px;
    border-top: 1px solid var(--svy-line);
}

.svy-section__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    /* The brand accent, same #FFC000 the kicker and nav highlight use. */
    color: var(--svy-accent);
    margin: 0 0 6px;
}

.svy-section__desc {
    color: var(--svy-muted);
    font-size: 0.96rem;
    line-height: 1.65;
    margin: 0 0 6px;
}

/* ---- Questions ---- */

/* Two columns on a wide screen, matching the contact form on What we do.
   Prose, scales and rankings opt out and take the full measure. */
.svy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
    align-items: start;
    margin-top: 18px;
}

.svy-q {
    min-width: 0;
    padding: 16px 0;
}

.svy-q--full {
    grid-column: 1 / -1;
}

.svy-q__label {
    display: block;
    font-size: 0.98rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 6px;
}

.svy-q__req {
    color: var(--svy-accent);
    margin-left: 4px;
}

.svy-q__help {
    display: block;
    font-size: 0.88rem;
    color: var(--svy-muted);
    line-height: 1.6;
    margin-bottom: 14px;
}

/* ---- Inputs ---- */

.svy-input,
.svy-textarea,
.svy-select {
    width: 100%;
    font: inherit;
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--svy-line);
    border-radius: 16px;
    padding: 14px 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.svy-input::placeholder,
.svy-textarea::placeholder {
    color: var(--svy-faint);
}

.svy-input:focus,
.svy-textarea:focus,
.svy-select:focus {
    border-color: rgba(255, 192, 0, 0.42);
    box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.svy-textarea {
    resize: vertical;
    min-height: 130px;
}

/* Native date/number widgets are near-invisible on a dark field without this. */
.svy-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
    cursor: pointer;
}

/* ---- Choice options ---- */

.svy-options {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.svy-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--svy-line);
    border-radius: 16px;
    color: var(--svy-soft);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.svy-option:hover {
    border-color: rgba(255, 192, 0, 0.42);
    background: rgba(255, 255, 255, 0.04);
}

.svy-option:has(input:checked) {
    border-color: rgba(255, 192, 0, 0.62);
    background: rgba(255, 192, 0, 0.07);
    color: #fff;
}

.svy-option input {
    margin-top: 3px;
    accent-color: var(--svy-accent);
    flex-shrink: 0;
}

/* ---- Rating with labelled endpoints ---- */

/* The wrapper shrinks to the scale, so the endpoint labels below line up with
   the first and last box rather than with the panel edges. */
.svy-rating {
    display: inline-block;
    max-width: 100%;
}

.svy-rating__ends {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 10px;
}

.svy-rating__end {
    flex: 0 1 auto;
    font-size: 0.84rem;
    color: var(--svy-muted);
    line-height: 1.45;
    max-width: 46%;
}

.svy-rating__end--max {
    text-align: right;
}

.svy-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.svy-scale__item {
    position: relative;
}

.svy-scale__item input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.svy-scale__box {
    display: grid;
    place-items: center;
    min-width: 50px;
    height: 50px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--svy-line);
    border-radius: 16px;
    font-weight: 600;
    color: var(--svy-soft);
    transition: all 0.2s ease;
}

.svy-scale__item:hover .svy-scale__box {
    border-color: rgba(255, 192, 0, 0.42);
}

.svy-scale__item input:checked + .svy-scale__box {
    background: var(--svy-accent);
    border-color: var(--svy-accent);
    color: #14100a;
    box-shadow: 0 8px 20px rgba(255, 192, 0, 0.24);
}

.svy-scale__item input:focus-visible + .svy-scale__box {
    box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.28);
}

/* ---- "Other" free text ---- */

.svy-other {
    margin-top: 12px;
    display: none;
}

.svy-other.is-visible {
    display: block;
}

/* No scripting: the field stays available rather than unreachable. */
.no-js .svy-other {
    display: block;
}

/* ---- Ranking ---- */

.svy-rank {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.svy-rank__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--svy-line);
    border-radius: 16px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.svy-rank__row:hover {
    border-color: rgba(255, 192, 0, 0.3);
}

.svy-rank__row:has(select:not([value=""])) {
    background: rgba(255, 255, 255, 0.035);
}

.svy-rank__select {
    flex: 0 0 72px;
    font: inherit;
    padding: 8px 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--svy-line);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.svy-rank__select:focus {
    border-color: rgba(255, 192, 0, 0.42);
    box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.08);
}

.svy-rank__label {
    color: var(--svy-soft);
}

/* Dropdown lists render in the OS palette; keep the open list readable. */
.svy-select option,
.svy-rank__select option {
    background: #0d0f12;
    color: #fff;
}

/* ---- Actions ---- */

.svy-submit {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 240px;
    margin-top: 30px;
    /* Tighter on the right: the icon carries its own visual weight. */
    padding: 12px 12px 12px 24px;
    font: inherit;
    font-size: 0.96rem;
    font-weight: 600;
    color: #fff;
    background: rgba(10, 14, 20, 0.68);
    border: 1px solid rgba(255, 192, 0, 0.42);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.svy-submit:hover {
    color: #fff;
    transform: translateY(-2px);
    border-color: rgba(255, 192, 0, 0.82);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    text-decoration: none;
}

.svy-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.32);
}

a.svy-submit {
    text-decoration: none;
}

/* The filled circle is what makes the control read as actionable rather than as
   an outlined box. It is the same treatment as .careers-btn__icon and the CTAs on
   Who we are and What we do: accent fill, near-black glyph, 40px round. */
.svy-submit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--svy-accent);
    color: #060606;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.svy-submit__icon svg {
    width: 18px;
    height: 18px;
}

.svy-submit:hover .svy-submit__icon {
    transform: translateX(3px);
    box-shadow: 0 6px 18px rgba(255, 192, 0, 0.34);
}

.svy-submit:disabled .svy-submit__icon {
    background: rgba(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .svy-submit:hover .svy-submit__icon {
        transform: none;
    }
}

.svy-skip {
    display: inline-block;
    margin-left: 20px;
    color: var(--svy-muted);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
}

.svy-skip:hover {
    color: #fff;
}

/* ---- Alerts & notes ---- */

.svy-alert {
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.65;
}

.svy-alert--error {
    background: rgba(214, 69, 55, 0.1);
    border: 1px solid rgba(214, 69, 55, 0.34);
    color: #ffd7d7;
}

.svy-alert ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.svy-note {
    font-size: 0.88rem;
    color: var(--svy-muted);
    line-height: 1.7;
    margin-top: 20px;
}

.svy-note a {
    color: var(--svy-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.svy-note a:hover {
    color: #ffd873;
}

.svy-empty {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 192, 0, 0.28);
    border-radius: 20px;
    padding: 48px 28px;
    text-align: center;
    color: var(--svy-muted);
}

/* Honeypot. Hidden from people, present for bots. Not display:none, which some bots skip. */
.svy-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Responsive ---- */

@media (max-width: 767.98px) {
    .svy-page {
        padding: 48px 18px 72px;
    }

    .svy-panel {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .svy-facts {
        gap: 22px;
    }

    .svy-submit {
        width: 100%;
        min-width: 0;
    }

    .svy-skip {
        display: block;
        margin: 16px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svy-card,
    .svy-option,
    .svy-scale__box,
    .svy-submit,
    .svy-progress__bar {
        transition: none !important;
    }

    .svy-card:hover,
    .svy-submit:hover {
        transform: none !important;
    }
}

/* ------------------------------------------------------------------
   Robustness against authored content.

   Question text, option labels and section titles come from BPM and are not
   reviewed here. Long words, pasted URLs, ten-point scales and twenty-option
   rankings all have to land without breaking the layout or forcing the page
   to scroll sideways.
   ------------------------------------------------------------------ */

/* Own the box model rather than inheriting it. Bootstrap happens to set
   border-box globally today, but width:100% plus padding and a border is a
   34px overflow the moment that reset is absent or load order changes. */
.svy-page,
.svy-page *,
.svy-page *::before,
.svy-page *::after {
    box-sizing: border-box;
}

/* Flex and grid children default to min-width:auto, which lets a long
   unbroken token push a row wider than its container. */
.svy-option,
.svy-option > span,
.svy-rank__row,
.svy-rank__label,
.svy-rating,
.svy-facts,
.svy-fact {
    min-width: 0;
}

/* Ordinary prose breaks at words; authored values may have no spaces at all. */
.svy-title,
.svy-lede,
.svy-section__title,
.svy-section__desc,
.svy-q__label,
.svy-q__help,
.svy-card__title,
.svy-card__desc,
.svy-steps-preview,
.svy-alert {
    overflow-wrap: break-word;
}

.svy-option > span,
.svy-rank__label,
.svy-rating__end,
.svy-fact__value {
    overflow-wrap: anywhere;
}

/* Nothing inside the page may exceed the shell. */
.svy-page img,
.svy-page table,
.svy-input,
.svy-textarea,
.svy-select {
    max-width: 100%;
}

/* A long single word in a heading should never widen the column. */
.svy-title,
.svy-section__title,
.svy-card__title {
    hyphens: auto;
}

/* Many options stay a single readable column rather than a cramped grid. */
.svy-options {
    grid-template-columns: minmax(0, 1fr);
}

/* ---- Shell padding matches the rest of the site at every breakpoint ---- */

@media (max-width: 991.98px) {
    .svy-container {
        padding: 0 24px;
    }
}

@media (max-width: 767.98px) {
    .svy-container {
        padding: 0 18px;
    }

    .svy-page {
        padding: 48px 0 72px;
    }

    .svy-rating {
        display: block;
    }

    .svy-rating__ends {
        gap: 14px;
    }

    .svy-scale__box {
        min-width: 44px;
        height: 44px;
    }

    .svy-rank__row {
        align-items: flex-start;
    }

    .svy-title {
        max-width: none;
    }
}

/* Very small screens: the scale must still fit five to ten boxes. */
@media (max-width: 400px) {
    .svy-scale {
        gap: 6px;
    }

    .svy-scale__box {
        min-width: 38px;
        height: 40px;
        padding: 0 6px;
        border-radius: 12px;
    }
}

/* ------------------------------------------------------------------
   Multi-select dropdown.

   The checkbox list is rendered open so the question works with scripting
   off. survey.js adds .is-enhanced, which turns it into a dropdown: a
   thirty-option question is then the same height as a two-option one.

   The panel is absolutely positioned against the control and pinned to
   left:0/right:0, so it is always exactly the width of its own field and
   can never reach past the column or the panel edge.
   ------------------------------------------------------------------ */

.svy-multi {
    position: relative;
}

/* Without scripting the toggle does nothing, so it is not shown at all. */
.svy-multi__toggle {
    display: none;
}

.svy-multi.is-enhanced .svy-multi__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    font: inherit;
    text-align: left;
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--svy-line);
    border-radius: 16px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.svy-multi.is-enhanced .svy-multi__toggle:hover {
    border-color: rgba(255, 192, 0, 0.42);
}

.svy-multi.is-enhanced .svy-multi__toggle:focus-visible,
.svy-multi.is-enhanced.is-open .svy-multi__toggle {
    outline: none;
    border-color: rgba(255, 192, 0, 0.42);
    box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.svy-multi__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.svy-multi__value.is-placeholder {
    color: var(--svy-faint);
}

.svy-multi__chev {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--svy-muted);
    border-bottom: 2px solid var(--svy-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}

.svy-multi.is-open .svy-multi__chev {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* Enhanced: the list becomes a panel hanging off the control. */
.svy-multi.is-enhanced .svy-multi__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    background: #0d1015;
    border: 1px solid rgba(255, 192, 0, 0.28);
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
}

.svy-multi.is-enhanced.is-open .svy-multi__panel {
    display: grid;
    gap: 6px;
}

/* Near the foot of a long form, open upward instead. */
.svy-multi.is-enhanced.is-up .svy-multi__panel {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Options inside the panel sit tighter than standalone ones. */
.svy-multi__panel .svy-option {
    border-radius: 12px;
    padding: 9px 12px;
}

/* Unenhanced (no scripting): the plain list, spaced like any other group. */
.svy-multi:not(.is-enhanced) .svy-multi__panel {
    display: grid;
    gap: 10px;
}

/* Scrollbar inside the panel, so it does not inherit the page's. */
.svy-multi__panel::-webkit-scrollbar {
    width: 10px;
}

.svy-multi__panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* ---- One column below the site's form breakpoint ---- */

@media (min-width: 1400px) {
    .svy-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Prose still wants a readable measure, not a third of a wide page. */
    .svy-q--full .svy-textarea {
        max-width: 1000px;
    }
}

@media (max-width: 900px) {
    .svy-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ------------------------------------------------------------------
   Two-column hero, used by the survey list and the survey landing page.

   With a single column the heading sat alone on the left of a 1600px
   shell and the call to action was pushed below the fold on a laptop.
   Putting the panel beside the heading uses the width the page already
   has and lifts "Start the survey" into the first screen.
   ------------------------------------------------------------------ */

.svy-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 64px;
    align-items: start;
}

.svy-hero__lead {
    min-width: 0;
    /* Optically settles the heading against the panel beside it. */
    padding-top: 4px;
}

.svy-hero__aside {
    min-width: 0;
}

/* Inside a column the heading no longer needs its own measure. */
.svy-hero .svy-title {
    max-width: none;
}

.svy-hero .svy-lede {
    margin-bottom: 0;
}

/* The panel is the aside here, so it must not also stretch to the shell. */
.svy-hero .svy-panel {
    max-width: none;
}

/* A single survey should look like a card, not a lonely narrow strip. */
.svy-hero__aside .svy-list {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
}

.svy-hero__aside .svy-empty {
    max-width: none;
}

/* Below the site's form breakpoint the two columns stack, heading first. */
@media (max-width: 1100px) {
    .svy-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .svy-hero .svy-lede {
        margin-bottom: 4px;
    }
}

/* ------------------------------------------------------------------
   The step form.

   Questions run one after another down a single readable column rather
   than being spread three across a 1600px panel, which stretched every
   dropdown to ~550px and made a three-question step look sparse and
   hard to scan. The width the form gives up goes to a rail carrying the
   title, the progress and where the respondent is in the three steps.
   ------------------------------------------------------------------ */

.svy-hero--form {
    grid-template-columns: minmax(0, 340px) minmax(0, 720px);
    gap: 32px 72px;
    justify-content: start;
}

/* The rail follows the respondent down a long step. */
.svy-hero__lead--sticky {
    position: sticky;
    top: calc(var(--app-nav-height, 80px) + 28px);
}

/* A title beside a form is a label for it, not a headline. */
.svy-title--form {
    font-size: clamp(1.5rem, 2.1vw, 2.1rem);
    line-height: 1.15;
    margin-bottom: 20px;
}

/* One question per row. */
.svy-hero--form .svy-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.svy-hero--form .svy-panel {
    max-width: none;
}

/* ---- Where you are, in words as well as bars ---- */

.svy-steps-track {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    counter-reset: svy-step;
}

.svy-steps-track li {
    counter-increment: svy-step;
    position: relative;
    padding: 0 0 14px 34px;
    font-size: 0.92rem;
    color: var(--svy-muted);
    line-height: 1.4;
}

.svy-steps-track li::before {
    content: counter(svy-step);
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--svy-line);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--svy-muted);
    background: rgba(255, 255, 255, 0.03);
}

/* The line joining one step to the next. */
.svy-steps-track li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 4px;
    width: 1px;
    background: var(--svy-line);
}

.svy-steps-track li.is-current {
    color: #fff;
    font-weight: 600;
}

.svy-steps-track li.is-current::before {
    border-color: var(--svy-accent);
    background: var(--svy-accent);
    color: #14100a;
}

.svy-steps-track li.is-done::before {
    content: "";
    border-color: rgba(255, 192, 0, 0.5);
    background: rgba(255, 192, 0, 0.18);
}

/* A tick for a completed step, drawn rather than shipped as an icon. */
.svy-steps-track li.is-done::before {
    background-image: linear-gradient(45deg, transparent 44%, var(--svy-accent) 44%, var(--svy-accent) 56%, transparent 56%),
                      linear-gradient(-45deg, transparent 44%, var(--svy-accent) 44%, var(--svy-accent) 56%, transparent 56%);
    background-size: 9px 2px, 5px 2px;
    background-position: 8px 12px, 5px 13px;
    background-repeat: no-repeat;
}

@media (max-width: 1100px) {
    .svy-hero--form {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .svy-hero__lead--sticky {
        position: static;
    }

    /* Horizontal on a narrow screen: three short words, not a tall list. */
    .svy-steps-track {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 20px;
        margin-top: 18px;
    }

    .svy-steps-track li {
        padding-bottom: 0;
    }

    .svy-steps-track li:not(:last-child)::after {
        display: none;
    }
}

/* ---- A question that failed validation ---- */

.svy-q__error {
    display: block;
    margin: 0 0 12px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ff9d92;
}

/* A rule down the side, so the failing question is findable by eye when
   several are on screen. */
.svy-q.has-error {
    border-left: 2px solid rgba(214, 69, 55, 0.75);
    padding-left: 16px;
    margin-left: -18px;
}

.svy-q.has-error .svy-input,
.svy-q.has-error .svy-textarea,
.svy-q.has-error .svy-select,
.svy-q.has-error .svy-multi__toggle {
    border-color: rgba(214, 69, 55, 0.6);
}

.svy-q.has-error .svy-input:focus,
.svy-q.has-error .svy-textarea:focus,
.svy-q.has-error .svy-select:focus {
    border-color: rgba(214, 69, 55, 0.9);
    box-shadow: 0 0 0 3px rgba(214, 69, 55, 0.12);
}