/* ==========================================================================
   Baromètre d'Impact Operating Partner — Operating Partners Academy

   Ported from the original standalone HTML export, then reworked: the flat
   navy surface is now a layered one (atmospheric glows + grain), answers read
   as cards, the run has a progress rail, and every interactive element has a
   hover/focus/selected state. Structure and class names are unchanged so the
   front-end flow in barometre.js keeps applying.
   ========================================================================== */

@font-face {
    font-family: SourceSans;
    src: url("../fonts/source-sans.woff2") format("woff2");
    font-display: swap;
}

:root {
    /* Brand surface — the original #060644 is kept as the mid tone, with a
       darker and a lighter step so panels can sit on top of each other. */
    --navy-900: #030326;
    --navy-800: #060644;
    --navy-700: #0c0c58;
    --navy-600: #14146d;

    /* Brand gold. Retuning the theme means editing this block and nothing
       else — every tint below is derived from the same hue. */
    --accent: #d4a24a;
    --accent-soft: #f0cd82;

    /* Text that sits ON gold. White fails contrast against it; navy does not. */
    --on-accent: #0a0a3f;

    /* Errors keep the red. The accent signals brand and progress, danger is a
       separate signal and must not read as either. */
    --danger: #ec281c;

    /* Success, likewise: a completed contact request is not brand or progress,
       it is a result, and green is the only colour that says so on sight. The
       hue is pushed light enough to hold contrast against the navy. */
    --success: #34d17f;
    --success-soft: #9df3c4;
    --on-success: #04361d;

    --success-08: #34d17f14;
    --success-15: #34d17f26;
    --success-30: #34d17f4d;
    --success-45: #34d17f73;

    --accent-05: #d4a24a0d;
    --accent-10: #d4a24a1a;
    --accent-15: #d4a24a26;
    --accent-25: #d4a24a40;
    --accent-45: #d4a24a73;
    --accent-60: #d4a24a99;
    --accent-80: #d4a24acc;

    --ink: #fff;
    --muted: #b6b9e2;

    --line: #ffffff1f;
    --line-mid: #ffffff33;
    --line-strong: #ffffff5c;

    --brand-h: 92px;

    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;

    --shadow-card: 0 18px 40px -22px #000000cc;
    --shadow-lift: 0 22px 45px -20px #00000099;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--navy-800);
    color: var(--ink);
    font-family: SourceSans, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Atmosphere: two fixed glows and a fine grain lift the flat fill off the
   screen without costing a request. Purely decorative, so pointer-inert. */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    background:
        radial-gradient(90ch 60ch at 12% -10%, #2b2bb055 0%, transparent 60%),
        radial-gradient(70ch 55ch at 100% 108%, var(--accent-25) 0%, transparent 62%),
        linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

body::after {
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * {
    position: relative;
    z-index: 1;
}

button,
input,
select {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 3px;
}

/* --- Chrome ------------------------------------------------------------- */

.brand {
    position: relative;
    height: var(--brand-h);
    padding: 13px 5vw;
    background: #06064499;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.brand img {
    width: 66px;
    height: 66px;
    object-fit: contain;
    transition: opacity .25s var(--ease);
}

.brand a:hover img {
    opacity: .78;
}

/* Hairline of brand gold under the header — ties the chrome to the accent. */
.brand::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 38%);
}

.over {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--ink);
}

/* The eyebrow gets a short accent rule instead of floating on its own. */
.over::before {
    content: "";
    width: 26px;
    height: 2px;
    flex: none;
    background: var(--accent);
}

.primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: max-content;
    border: 0;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 62%);
    color: var(--on-accent);
    padding: 16px 26px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 12px 26px -12px var(--accent-80);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

.primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 18px 34px -12px var(--accent-80);
}

.primary:active {
    transform: translateY(0);
}

.primary[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
    height: calc(100dvh - var(--brand-h));
    min-height: 520px;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    overflow: hidden;
}

.visual {
    position: relative;
    background: url("../img/hero.jpg") center/cover;
}

/* Scrim: darkens the foot of the photo so the claim always has contrast, and
   feathers the right edge into the copy column. */
.visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, #03032666 0%, transparent 34%, #030326e6 100%),
        linear-gradient(90deg, transparent 55%, #06064466 100%);
}

.claim {
    position: absolute;
    z-index: 1;
    bottom: 50px;
    left: 45px;
    right: 35px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    border-left: 3px solid var(--accent);
    padding-left: 20px;
    text-shadow: 0 2px 18px #000;
}

.copy {
    min-width: 0;
    padding: clamp(35px, 7vw, 105px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero h1 {
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.03;
    letter-spacing: -1px;
    margin: 16px 0 25px;
}

.lead {
    font-size: 20px;
    line-height: 1.55;
    max-width: 630px;
}

.copy p {
    color: var(--muted);
}

.copy .lead {
    color: var(--ink);
}

/* Reassurance strip under the intro copy: length, effort, benchmark size. */
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 6px 0 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.facts div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    color: var(--muted);
}

.facts strong {
    font-size: 22px;
    color: var(--ink);
}

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

.question-shell {
    min-height: calc(100dvh - var(--brand-h));
    display: grid;
    /* An `auto` track would size to the longest question line and let the card
       overflow the viewport on narrow screens; minmax(0, 1fr) pins it. */
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: clamp(18px, 4vh, 50px) 25px;
}

.card {
    width: min(930px, 100%);
    margin: auto;
    padding: 0;
}

.card h2 {
    font-size: clamp(27px, 3.5vw, 48px);
    line-height: 1.1;
    letter-spacing: -.5px;
    margin: clamp(12px, 2vh, 22px) 0;
    text-wrap: balance;
}

.card .subtitle {
    font-size: clamp(16px, 2vw, 20px);
    margin: -10px 0 25px;
    color: var(--muted);
}

/* Progress rail — the run reads as finite instead of open-ended. */
.progress {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(14px, 3vh, 26px);
}

.progress-track {
    position: relative;
    height: 4px;
    border-radius: 4px;
    background: #ffffff1a;
    overflow: hidden;
}

/* Only inside the question rail does the track take the leftover width — the
   completed rail on the form is a column-flex child and must not grow. */
.progress .progress-track {
    flex: 1;
}

.progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%);
    box-shadow: 0 0 14px var(--accent-60);
    transition: width .45s var(--ease);
}

.progress-count {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.progress-count b {
    color: var(--ink);
}

.answers {
    display: grid;
    gap: 12px;
}

.answers button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    position: relative;
    background: linear-gradient(180deg, #ffffff14 0%, #ffffff08 100%);
    border: 1px solid var(--line-mid);
    border-radius: var(--r-md);
    padding: clamp(12px, 2vh, 18px) clamp(14px, 2vh, 20px);
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    box-shadow: var(--shadow-card);
    transition: transform .18s var(--ease), border-color .18s var(--ease),
        background .18s var(--ease), box-shadow .18s var(--ease);
}

.answers button:hover {
    transform: translateY(-2px);
    border-color: #ffffff8a;
    background: linear-gradient(180deg, #ffffff21 0%, #ffffff0f 100%);
    box-shadow: var(--shadow-lift);
}

.answers button:active {
    transform: translateY(0);
}

/* Letter chip. The option letters used to live inside the label text; they are
   stripped in JS and rendered here so every question looks the same. */
.key {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 8px;
    border: 1px solid var(--line-mid);
    background: #ffffff0f;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    transition: background .18s var(--ease), color .18s var(--ease),
        border-color .18s var(--ease);
}

.answers button:hover .key {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* Chevron: appears on hover so the row reads as "this moves you forward". */
.answers button::after {
    content: "→";
    justify-self: end;
    font-weight: 700;
    color: var(--accent-soft);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}

.answers button:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Confirmation flash between the click and the next question. */
.answers button.is-picked {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-25) 0%, var(--accent-10) 100%);
    box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -20px var(--accent-80);
}

.answers button.is-picked .key {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.answers button.is-picked::after {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered entrance — six rows at most, so the list is enumerated. */
.answers button {
    animation: rise .42s var(--ease) both;
}

.answers button:nth-child(1) { animation-delay: .04s; }
.answers button:nth-child(2) { animation-delay: .08s; }
.answers button:nth-child(3) { animation-delay: .12s; }
.answers button:nth-child(4) { animation-delay: .16s; }
.answers button:nth-child(5) { animation-delay: .2s; }
.answers button:nth-child(6) { animation-delay: .24s; }

.card .over,
.card h2,
.card .subtitle,
.progress {
    animation: rise .5s var(--ease) both;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* --- Scale question ----------------------------------------------------- */

.scale {
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
}

.scale button {
    display: block;
    text-align: center;
    padding: clamp(12px, 2.4vh, 20px) 0;
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 700;
    animation-delay: 0s;
}

.scale button::after {
    content: none;
}

/* Tint ramp: cool on the left, brand gold on the right, so the axis is legible
   before the labels are read. */
.scale button:nth-child(-n+3) { background: linear-gradient(180deg, #6f74d81f, #6f74d80a); }
/* .scale button:nth-child(n+4):nth-child(-n+7) { background: linear-gradient(180deg, #9a86a81f, #9a86a80a); }
.scale button:nth-child(n+8) { background: linear-gradient(180deg, var(--accent-25), var(--accent-10)); } */

.scale button:hover {
    border-color: var(--accent);
}

.scale-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
}

.question-nav {
    display: flex;
    justify-content: flex-start;
    margin-top: clamp(28px, 4.5vh, 48px);
    margin-left: -10px;
}

.back {
    border: 0;
    background: transparent;
    color: var(--ink);
    border-radius: var(--r-sm);
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 400;
    opacity: .62;
    cursor: pointer;
    transition: opacity .18s var(--ease), background .18s var(--ease);
}

.back:hover {
    background: #ffffff14;
    opacity: 1;
}

/* --- Lead form ---------------------------------------------------------- */

/* Centring shell. The panel itself is content-height, so the viewport height
   lives here — min-height (not height), which lets the container grow past the
   viewport when the content is taller, rather than clipping it. */
.form-shell {
    min-height: calc(100dvh - var(--brand-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vh, 48px) 25px;
}

.formpage {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border: 1px solid var(--line-mid);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 40px 90px -50px #000;
    animation: rise .5s var(--ease) both;
}

.intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(160deg, var(--navy-600) 0%, var(--navy-700) 45%, #0a0a4e 100%);
    padding: 48px;
}

.intro::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 220px;
    pointer-events: none;
    background: radial-gradient(60ch 20ch at 0% 100%, var(--accent-15), transparent 70%);
}

.intro h2 {
    font-size: 58px;
    line-height: 1.02;
    letter-spacing: -1px;
    margin: 0 0 25px;
}

.intro p {
    color: var(--muted);
    line-height: 1.55;
}

/* Completion state: the run is over, only the reveal is left. */
.done {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    border: 1px solid var(--line-mid);
    border-radius: 999px;
    background: #ffffff14;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
}

.done-mark {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
}

.done-rail {
    margin: 16px 0 24px;
}

/* What the email actually buys — the ask needs a stated return. */
.gets {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 13px;
}

.gets li {
    position: relative;
    padding-left: 32px;
    font-size: 15px;
    line-height: 1.45;
    color: #e4e5f7;
}

.gets li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    border: 1px solid var(--accent-45);
    background: var(--accent-15);
    color: var(--accent-soft);
    font-size: 11px;
    font-weight: 700;
}

.note-label {
    margin: 28px 0 8px !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #ffffff8a !important;
}

/* Reassurance, not the headline act — it used to be the heaviest block here. */
.intro blockquote {
    position: relative;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--accent-60);
    line-height: 1.5;
    font-size: 13.5px;
    color: #ffffffb8;
}

.form {
    padding: 42px;
    display: grid;
    gap: 15px;
    background: #05053a99;
}

.form label {
    display: grid;
    gap: 7px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .2px;
    color: var(--muted);
}

/* Dark inputs: the stark white fields used to punch a hole in the panel. */
.form input,
.form select {
    padding: 13px 14px;
    border: 1px solid var(--line-mid);
    border-radius: var(--r-sm);
    background: #ffffff0f;
    color: var(--ink);
    transition: border-color .18s var(--ease), background .18s var(--ease),
        box-shadow .18s var(--ease);
}

.form input::placeholder {
    color: #ffffff59;
}

.form input:hover,
.form select:hover {
    border-color: var(--line-strong);
}

.form input:focus,
.form select:focus {
    outline: 0;
    border-color: var(--accent);
    /* background-color, not the shorthand — the select's chevron is a
       background-image and must survive the focus state. */
    background-color: #ffffff1a;
    box-shadow: 0 0 0 3px var(--accent-25);
}

.form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-position: calc(100% - 14px) center;
    background-size: 12px 8px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.form select option {
    background: var(--navy-700);
    color: var(--ink);
}

.form .primary {
    margin-top: 6px;
}

.form-note {
    margin: 0;
    font-size: 12.5px;
    color: #ffffff8a;
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.check {
    grid-template-columns: 18px 1fr !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 1.4;
    gap: 10px !important;
}

.check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

/* The form column is stretched to the height of the taller intro column, and
   grid's default `align-content: stretch` was inflating every auto row — inputs
   rendered ~78px tall and the consent row broke apart. Pin the tracks to their
   content height, and centre the group in the leftover space. */

.form {
    align-content: center;
}

.form label {
    align-content: start;
}

.check {
    align-items: center;
}

/* Server-side validation feedback — not in the original static export. */

.field-error {
    color: #ffb3ad;
    font-size: 13px;
    font-weight: 400;
}

.form-error {
    background: #ec281c26;
    border: 1px solid var(--danger);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: 14px;
}

.captcha {
    min-height: 65px;
}

/* --- Result ------------------------------------------------------------- */

.result {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
}

.result-photo {
    overflow: hidden;
    min-height: 100dvh;
    position: relative;
}

.result-photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    object-fit: cover;
    animation: slowzoom 14s var(--ease) both;
}

@keyframes slowzoom {
    from {
        transform: scale(1.07);
    }
}

/* Feathers the portrait into the copy column instead of a hard seam. */
.result-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #03032666 0%, transparent 45%, #06064499 100%);
}

.result-copy {
    min-width: 0;
    padding: clamp(35px, 8vw, 120px) clamp(28px, 6vw, 92px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: rise .6s var(--ease) both;
}

.result h1 {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -1.2px;
    margin: 18px 0;
}

/* The kicker is the payoff line — badge it so it lands as a verdict. */
.result h3 {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 700;
    margin: 0 0 18px;
    padding: 9px 16px;
    border: 1px solid var(--accent-45);
    border-radius: 999px;
    background: var(--accent-15);
}

.result h3::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-soft);
    box-shadow: 0 0 10px var(--accent-soft);
}

.result p {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.5;
    margin: 10px 0;
    color: #e4e5f7;
    max-width: 58ch;
}

.result p strong {
    color: var(--ink);
}

.result .primary {
    background: #fff;
    color: var(--navy-800);
    text-decoration: none;
    margin-top: 22px;
    max-width: 100%;
    text-align: center;
    box-shadow: 0 16px 34px -18px #000;
}

.result .primary:hover {
    filter: none;
    box-shadow: 0 22px 42px -18px #000;
}

/* Held mid-request, not refused — `not-allowed` would read as the latter. */
.result .primary:disabled {
    opacity: .78;
    cursor: progress;
    box-shadow: none;
}

/* --- Contact request ---------------------------------------------------- */

/* Profiles whose call to action is a contact request stay on the page: the
   button is replaced in place by the confirmation, so the swap reads as an
   answer to the click rather than a new screen. */

.result-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 58ch;
}

/* The confirmation is the one green thing on the page: it reads as a result,
   not as another step. It rises into place rather than replacing the button
   on the same frame — see the minimum pending delay in barometre.js. */

.contact-done {
    display: flex;
    gap: 15px;
    margin-top: 22px;
    padding: 20px 24px 21px;
    border: 1px solid var(--success-45);
    border-radius: var(--r-md);
    background:
        radial-gradient(40ch 18ch at 6% 0%, #34d17f66, transparent 78%),
        linear-gradient(180deg, var(--success-30) 0%, var(--success-15) 100%);
    box-shadow:
        0 20px 46px -20px #34d17f59,
        inset 0 1px 0 var(--success-30);
    animation: contact-rise .44s cubic-bezier(.22, .68, .36, 1) both;
}

.contact-done-mark {
    display: grid;
    place-items: center;
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--success);
    color: var(--on-success);
    /* Halo rather than a hard edge — the disc sits in its own light. */
    box-shadow: 0 0 0 5px var(--success-15), 0 6px 16px -6px var(--success);
    animation: contact-pop .38s cubic-bezier(.2, 1.3, .4, 1) .1s both;
}

/* One ring out of the tick, then gone — the beat that says "landed". */
.contact-done-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--success);
    animation: contact-ring .7s ease-out .26s both;
}

.contact-done-mark svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Drawn rather than revealed: the stroke lands after the disc has settled. */
.contact-done-mark path {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: contact-check .34s cubic-bezier(.65, 0, .35, 1) .3s forwards;
}

/* The headline carries the green so the panel reads as success even before
   the tick is noticed; the body stays near-white to keep it comfortable. */
.contact-done strong {
    display: block;
    font-size: 18px;
    line-height: 1.3;
    color: var(--success-soft);
}

.result .contact-done p {
    margin: 7px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #dff6e9;
}

/* Pending state: the spinner is what earns the held delay — without it the
   wait reads as a stall rather than as work in flight. */
.contact-spinner {
    /* The button is a flex row with a 2px gap, hence the short margin. */
    width: 14px;
    height: 14px;
    flex: none;
    margin-right: 7px;
    border: 2px solid var(--navy-800);
    border-top-color: transparent;
    border-radius: 50%;
    animation: contact-spin .7s linear infinite;
}

.result .contact-error {
    margin: 12px 0 0;
    font-size: 14px;
    color: #ffb3ad;
}

@keyframes contact-rise {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes contact-pop {
    from {
        opacity: 0;
        transform: scale(.3);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes contact-check {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes contact-ring {
    from {
        opacity: .8;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.9);
    }
}

@keyframes contact-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Short viewports ---------------------------------------------------- */

@media (max-height: 760px) and (min-width: 761px) {
    :root {
        --brand-h: 70px;
    }

    .brand {
        padding: 8px 5vw;
    }

    .brand img {
        width: 54px;
        height: 54px;
    }

    .hero {
        min-height: 0;
    }

    .hero h1 {
        font-size: clamp(36px, 6.5vh, 52px);
        margin: 10px 0 16px;
    }

    .lead {
        font-size: 17px;
        line-height: 1.4;
    }

    .copy p {
        margin: 8px 0;
    }

    .facts {
        margin: 4px 0 18px;
        padding-top: 13px;
    }

    .facts strong {
        font-size: 18px;
    }

    .intro,
    .form {
        padding: 26px 32px;
    }

    .intro h2 {
        font-size: 42px;
        margin-bottom: 14px;
    }

    .done-rail {
        margin: 12px 0 16px;
    }

    .gets {
        margin-top: 16px;
        gap: 9px;
    }

    .gets li {
        font-size: 14px;
    }

    .note-label {
        margin: 18px 0 6px !important;
    }

    .intro blockquote {
        font-size: 13px;
        line-height: 1.4;
    }

    .form {
        gap: 9px;
    }

    .form input,
    .form select {
        padding: 9px 12px;
    }

    .question-shell {
        padding: 14px 25px;
    }

    .card h2 {
        font-size: clamp(25px, 4vh, 38px);
    }

    .progress {
        margin-bottom: 12px;
    }

    .answers {
        gap: 8px;
    }

    .answers button {
        padding: 10px 14px;
    }

    .key {
        width: 28px;
        height: 28px;
    }

    .question-nav {
        margin-top: 16px;
        margin-left: -6px;
    }
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 760px) {
    :root {
        --brand-h: 70px;
    }

    .brand {
        padding: 8px 22px;
    }

    .brand img {
        width: 54px;
        height: 54px;
    }

    .hero,
    .formpage,
    .result {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: 0;
        grid-template-rows: minmax(180px, 38%) minmax(0, 62%);
    }

    .visual {
        grid-row: 1;
        min-height: 0;
    }

    .visual .claim {
        left: 22px;
        right: 20px;
        bottom: 20px;
        font-size: 18px;
        padding-left: 12px;
    }

    .copy {
        grid-row: 2;
        padding: 22px 24px;
    }

    .hero h1 {
        font-size: clamp(31px, 9vw, 42px);
        letter-spacing: -.5px;
        margin: 8px 0 12px;
    }

    .lead {
        font-size: 16px;
        line-height: 1.35;
        margin: 0 0 7px;
    }

    .copy p {
        font-size: 15px;
        margin: 6px 0 12px;
    }

    .facts {
        gap: 6px 18px;
        margin: 0 0 14px;
        padding-top: 12px;
    }

    .facts div {
        font-size: 12px;
    }

    .facts strong {
        font-size: 16px;
    }

    .copy .primary {
        padding: 13px 20px;
    }

    .scale {
        grid-template-columns: repeat(5, 1fr);
    }

    /* Full-bleed on phones: no shell padding, so no rounded card either. */
    .form-shell {
        padding: 0;
    }

    .formpage {
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .intro {
        padding: 22px;
    }

    .intro h2 {
        font-size: clamp(36px, 10vw, 44px);
        margin-bottom: 14px;
    }

    .intro p {
        margin: 7px 0;
    }

    .done-rail {
        margin: 14px 0 18px;
    }

    .gets {
        margin-top: 18px;
        gap: 10px;
    }

    .gets li {
        font-size: 14px;
    }

    .note-label {
        margin: 20px 0 6px !important;
    }

    .intro blockquote {
        font-size: 13px;
        line-height: 1.45;
    }

    .form {
        padding: 22px;
        gap: 9px;
        /* Stacked under the intro panel, so centring would only open a gap. */
        align-content: start;
    }

    .form label {
        font-size: 13px;
    }

    .form input,
    .form select {
        width: 100%;
        min-width: 0;
        /* 16px keeps iOS Safari from zooming the viewport on focus. */
        font-size: 16px;
        padding: 11px 12px;
    }

    .form .primary {
        width: 100%;
        padding: 14px 15px;
    }

    .result {
        display: flex;
        min-height: 100dvh;
        overflow: visible;
        flex-direction: column;
    }

    .result-photo {
        width: 100%;
        min-height: 0;
        height: 34dvh;
        flex: 0 0 34dvh;
    }

    .result-photo::after {
        background: linear-gradient(180deg, transparent 40%, #060644e6 100%);
    }

    .result-copy {
        min-height: 66dvh;
        padding: 30px 25px;
    }

    .result h1 {
        font-size: clamp(36px, 11vw, 48px);
        margin: 14px 0;
    }

    .result h3 {
        font-size: 14px;
        padding: 7px 13px;
    }

    .result p {
        font-size: 17px;
        line-height: 1.45;
        margin: 8px 0;
    }

    .result .primary {
        width: 100%;
        margin-top: 16px;
        padding: 14px 16px;
    }

    .result-cta {
        align-self: stretch;
    }

    .contact-done {
        margin-top: 16px;
        padding: 15px 16px;
    }
}

/* --- Motion preferences ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .primary:hover,
    .answers button:hover {
        transform: none;
    }
}

/* The result screen is full-bleed in the original design. */
body.result-view .brand {
    display: none;
}