/* Bry3D fit check (sales.html): one question per screen, the setup record
   that fills beside it, the personal setup, then contact details.
   Tokens and components come from site.css (the Bry3D Master). */

/* Top bar */
.sales-top {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--ground);
}
.sales-top .brand img { height: 32px; }
.sales-top-r { display: flex; align-items: center; gap: var(--space-4); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.back-link:hover { color: var(--ink); }
.back-link svg { width: 16px; height: 16px; }

/* Layout: the flow, and the record at the right */
.fit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-16);
    align-items: start;
    padding-block: clamp(16px, 3.5vh, 56px) var(--space-12);
    --fit-above: 424px; /* everything on a format screen that isn't the image */
    min-height: calc(100dvh - 64px);
}
.fit.is-setup { grid-template-columns: minmax(0, 1fr); }
.fit.is-setup .sales-record { display: none; }
.fit-flow { min-width: 0; }
.fit-noscript { max-width: 56ch; font-size: 17px; color: var(--ink-2); }

.fit-step[hidden] { display: none; }
.fit-step { max-width: 680px; }
.fit-step.fit-setup, .fit-step.fit-show { max-width: none; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fit-step:not([hidden]) { animation: step-in 0.45s var(--ease-out); }

.step-count { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.fit-q {
    max-width: 22ch;
    font-size: clamp(30px, 3.2vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    outline: none;
}
.fit-hint { margin-top: var(--space-3); max-width: 64ch; font-size: 17px; color: var(--ink-2); }

/* Answers: the Master's option chip at questionnaire scale */
.tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-8);
}
.tile {
    align-items: center;
    min-height: 56px;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.3;
}
.tile .tile-l { flex: 1; }
.tiles.two-line .tile {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-height: 76px;
}
.tiles.two-line .tile .tile-l { flex: none; }
.tile small { font-size: 13.5px; white-space: normal; }
.tile[aria-disabled="true"] { color: var(--muted); border-color: var(--hairline); cursor: not-allowed; }
.tile[aria-disabled="true"]:hover { border-color: var(--hairline); }

/* Pick up to three: a box that ticks, so it reads as more than one */
.fit-step[data-step="slow"] .tile::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface) no-repeat center / 12px 12px;
    transition: border-color 0.15s, background-color 0.15s;
}
.fit-step[data-step="slow"] .tile { gap: 12px; }
.fit-step[data-step="slow"] .tile[aria-disabled="true"]::before { border-color: var(--border); background-color: var(--ground); }
.fit-step[data-step="slow"] .tile[aria-pressed="true"]::before {
    border-color: var(--blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f38b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.slow-full { min-height: 20px; margin-top: 10px; font-size: 14px; color: var(--ink-2); }

.other-field { margin-top: var(--space-6); }
.other-field label { font-size: 15px; font-weight: 600; }
.other-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.other-row .input { flex: 1; min-height: 52px; font-size: 18px; }
.other-row .btn { min-height: 52px; }
.other-field .field-error { min-height: 20px; margin-top: 6px; }

.step-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.skip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.keys-hint { font-size: 13px; color: var(--muted); }
@media (hover: none), (pointer: coarse) { .keys-hint { display: none; } }
.skip { font-size: 14px; color: var(--muted); }
.skip a {
    color: var(--blue-ink);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--blue-ink) 45%, transparent);
}
.skip a:hover { text-decoration-color: currentColor; }

/* The format that suits them: real work, captioned with where it came from */
.show-media {
    position: relative;
    margin-top: var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--ground);
}
.show-media[hidden] { display: none; }
/* The image scales with the window height, keeping its own ratio (--r, set per image), so the screen never scrolls */
.show-block > figure.show-media { width: min(100%, calc((100dvh - var(--fit-above)) * var(--r, 1.5))); }
.show-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.show-img { position: relative; }
.show-block[hidden] { display: none; }

/* A guided-form answer: the product, with a sample of the form beside it (never on top of the image) */
.show-block > figure.show-media.has-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    width: 100%;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
}
.show-media.has-form .show-img {
    flex: 0 1 auto;
    width: min(calc(100% - 316px), calc((100dvh - var(--fit-above)) * var(--r, 1.5)));
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--ground);
}
.sample-form.is-over {
    flex: 0 0 300px;
    width: 300px;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}
.sample-form.is-over .sf-q { margin: var(--space-3) 0 10px; font-size: 16px; }
.sample-form.is-over .opt { min-height: 32px; padding: 6px 10px; font-size: 13.5px; }
.sample-form.is-over .sf-foot { margin-top: var(--space-4); padding-top: var(--space-3); }
.sample-form.is-over .sf-foot b { font-size: 20px; }
.show-media figcaption {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    padding: 4px 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
}
.sample-form { max-width: 460px; padding: var(--space-6); background: var(--surface); }
.sf-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 13px; color: var(--muted); }
.sf-q { margin: var(--space-4) 0 var(--space-3); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.sample-form .opt { cursor: default; }
.sample-form .opt.is-on {
    background: var(--plan-select);
    border-color: var(--blue);
    box-shadow: inset 0 0 0 1px var(--blue);
    font-weight: 600;
}
.sample-form .opt.is-on small { color: var(--ink-2); }
.sf-foot {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--hairline);
}
.sf-foot span { font-size: 14px; color: var(--muted); }
.sf-foot b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

/* "A mix" and "Not sure yet": the three formats side by side */
.show-all {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
}
.show-all[hidden] { display: none; }
.fmt-card {
    display: grid;
    align-content: start;
    gap: 6px;
    padding-bottom: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.fmt-card > p { padding-inline: 14px; }
.fmt-card > p:first-of-type { margin-top: 8px; font-size: 14.5px; }
.fmt-card-l { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.fmt-card-shot { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground); border-bottom: 1px solid var(--border); }
.show-media .fmt-card-shot img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.fmt-card-shot { position: relative; }
.map-credit {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-2);
}
.fmt-card-form { display: grid; align-content: center; gap: 10px; padding: 14px; }
.fmt-card-form b { font-size: 14px; }
.fmt-card-form .sample-tag { justify-self: start; }
.fmt-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fmt-card-chips .opt { min-height: 30px; padding: 5px 9px; font-size: 13px; cursor: default; }
.fmt-card-chips .opt.is-on { background: var(--plan-select); border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); font-weight: 600; }

/* The setup: the record, complete, with what Bry3D does about each answer */
.fit-setup .fit-q { max-width: none; }
.fit-setup .fit-hint { max-width: none; }
.setup-card .record-h { padding: 12px var(--space-4) 12px 18px; }
.setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6);
    align-items: start;
    margin-top: var(--space-4);
}
.setup-card, .next-card, .sales-record {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.record-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-4) 18px;
    background: var(--side);
    color: var(--side-ink);
}
.record-h b { font-size: 16px; font-weight: 600; }
.record-stage {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    background: var(--side-wash);
    color: var(--side-ink);
}
.setup-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "dt btn" "dd dd";
    gap: 2px var(--space-3);
    align-content: start;
    padding: 12px 18px 13px;
    border-top: 1px solid var(--hairline);
}
.setup-row:nth-child(-n+2) { border-top: 0; }
.setup-row:nth-child(even) { border-left: 1px solid var(--hairline); }
.setup-row dt { grid-area: dt; font-size: 12.5px; color: var(--muted); }
.setup-row dd { grid-area: dd; }
.setup-row .sv { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.setup-row .sl { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.setup-row .sp { list-style: none; display: grid; gap: var(--space-2); }
.setup-row .sp b { display: block; font-size: 14px; }
.setup-row .sp span { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.btn-change { grid-area: btn; min-height: 24px; margin-top: -3px; padding: 0 4px; font-size: 13.5px; }

.next-card { position: sticky; top: var(--space-6); padding: 20px; overflow: visible; }
.next-card h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
.next-steps { list-style: none; counter-reset: next; display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
.next-steps li {
    counter-increment: next;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 15px;
    color: var(--ink-2);
}
.next-steps li::before {
    content: counter(next);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-lg);
    background: var(--hairline);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.next-card .btn-primary { width: 100%; white-space: normal; text-align: center; padding-block: 10px; }
.next-card .arrow-link { margin-top: var(--space-4); }
.next-card .arrow-link[hidden] { display: none; }
.next-note { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline); font-size: 13px; color: var(--muted); }

/* Contact details */
.contact-form { margin-top: var(--space-6); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.contact-form .field { align-content: start; }
.field[data-field="note"] { grid-column: 1 / -1; }
.opt-mark { font-weight: 400; color: var(--muted); }
.contact-form .input { min-height: 52px; font-size: 17px; }
.contact-form textarea.input { min-height: 72px; resize: vertical; line-height: 1.5; }
.contact-form .field-error:empty { display: none; }
.privacy-note { margin-top: var(--space-4); max-width: 60ch; font-size: 14px; color: var(--muted); }
.privacy-note a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.submit-error { margin-top: var(--space-3); min-height: 1em; font-size: 14px; color: var(--bad-ink); }

/* Sent: while they wait, the demo closest to their answers first */
.fit-sent .fit-hint b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sent-demos-h { margin-top: var(--space-8); font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
.sent-demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.demo-mini {
    display: grid;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color 0.2s;
}
.demo-mini:hover { border-color: var(--border-strong); }
.demo-mini-shot { aspect-ratio: 1440 / 844; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--ground); }
.demo-mini-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.demo-mini:hover img { transform: scale(1.015); }
.demo-mini-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 14px 16px; }
.demo-mini-body b { font-size: 15px; }
.demo-mini-body > span:last-child { grid-column: 2; font-size: 13px; color: var(--muted); }
.fmt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--blue-tint);
    color: var(--blue-ink);
}

/* The record: your setup, filling as you answer */
.sales-record { position: sticky; top: var(--space-8); }
.record-peek { display: none; }
.sales-record .ramp {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    padding: var(--space-3) var(--space-4) var(--space-2);
}
.sales-record .ramp li {
    position: relative;
    padding-top: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sales-record .ramp li::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    border-radius: var(--radius-xs);
    background: var(--hairline);
    transition: background-color 0.5s var(--ease-out);
}
.sales-record .ramp li.is-on { color: var(--ink); }
.sales-record .ramp li.is-on:nth-child(1)::before { background: var(--stage-1); }
.sales-record .ramp li.is-on:nth-child(2)::before { background: var(--stage-2); }
.sales-record .ramp li.is-on:nth-child(3)::before { background: var(--stage-3); }
.sales-record .ramp li.is-on:nth-child(4)::before { background: var(--stage-4); }
.sales-record dl { padding: 0 var(--space-4); }
.sales-record dl > div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    padding: 9px 6px;
    margin-inline: -6px;
    border-top: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
}
.sales-record dt { font-size: 12.5px; color: var(--muted); }
.sales-record dd { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.sales-record .is-ghost dd {
    width: fit-content;
    padding-bottom: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    background-image: linear-gradient(90deg, var(--border-strong) 50%, transparent 50%);
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-position: 0 100%;
}
.sales-record .record-f {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    background: var(--ground);
    font-size: 13px;
    color: var(--muted);
}
.sales-record.is-complete .record-f { color: var(--good-ink); }
/* Contact rows join the record once the visitor reaches their details */
.fit:not(.is-contact) .sales-record [data-rec="name"],
.fit:not(.is-contact) .sales-record [data-rec="company"],
.fit:not(.is-contact) .sales-record [data-rec="email"] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .fit-step:not([hidden]) { animation: none; }
}

/* Short laptop screens: the setup keeps to one screen */
@media (min-width: 961px) and (max-height: 780px) {
    .fit { padding-top: var(--space-4); }
    .fit-setup .fit-q { font-size: 30px; }
    .fit-setup .fit-hint { display: none; }
    .setup-grid { margin-top: var(--space-3); }
    .setup-row { padding-block: 8px 9px; }
    .setup-row .sl, .setup-row .sp span { font-size: 13.5px; line-height: 1.38; }
    .setup-row .sp { gap: 6px; }
}
@media (max-width: 960px) {
    .fit { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-3); min-height: 0; }
    .sales-top { height: 56px; }
    .sales-top-r .lang-switch { display: none; }

    /* Phones and tablets: the record is a slim bar pinned at the top on every step (ramp and the last answer),
       the way quiz flows show progress. Tapping it opens the full card below it. */
    .sales-record {
        position: sticky;
        top: var(--space-2);
        z-index: 900;
        order: -1;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 20px -10px rgba(21, 23, 31, 0.4);
    }
    .record-peek {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 20px;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        min-height: 46px;
        padding: 8px 12px;
        border: 0;
        background: var(--surface);
        text-align: left;
        font-size: 13.5px;
    }
    .record-peek svg { width: 18px; height: 18px; color: var(--ink-2); transform: rotate(180deg); transition: transform 0.3s var(--ease-out); }
    .sales-record.is-expanded .record-peek svg { transform: none; }
    .peek-ramp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
    .peek-ramp i { height: 6px; border-radius: var(--radius-xs); background: var(--hairline); transition: background-color 0.5s var(--ease-out); }
    .peek-ramp i.is-on:nth-child(1) { background: var(--stage-1); }
    .peek-ramp i.is-on:nth-child(2) { background: var(--stage-2); }
    .peek-ramp i.is-on:nth-child(3) { background: var(--stage-3); }
    .peek-ramp i.is-on:nth-child(4) { background: var(--stage-4); }
    .peek-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
    .peek-text b { margin-right: 4px; font-weight: 600; color: var(--muted); }
    .record-full { display: none; }
    .sales-record.is-expanded .record-full { display: block; max-height: 62vh; overflow-y: auto; border-top: 1px solid var(--border); }
    .record-h { padding: 10px 12px 10px 16px; }

    /* Setup: the summary, with the send action pinned to the bottom of the screen */
    .setup-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .next-card {
        position: sticky;
        top: auto;
        bottom: 0;
        z-index: 5;
        margin: var(--space-4) calc(-1 * var(--gutter)) 0;
        padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: 0 -10px 16px -10px rgba(21, 23, 31, 0.2);
    }
    .next-card h2, .next-steps, .next-note { display: none; }
    .next-card .arrow-link { margin-top: 10px; font-size: 14px; }

    .show-all { grid-template-columns: minmax(0, 1fr); }
    .fmt-card { grid-template-columns: 38% minmax(0, 1fr); column-gap: 0; padding-bottom: 0; }
    .fmt-card-shot { grid-row: 1 / span 2; aspect-ratio: auto; min-height: 104px; border-bottom: 0; border-right: 1px solid var(--border); }
    .fmt-card > p:first-of-type { margin-top: 10px; }
    .fmt-card-l { padding-bottom: 10px; }
}
@media (max-width: 640px) {
    .fit-hint { margin-top: var(--space-2); font-size: 16px; }
    .tiles { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-4); gap: 6px; }
    .fit-step[data-step="sell"] .tiles, .fit-step[data-step="team"] .tiles, .fit-step[data-step="start"] .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile { min-height: 50px; padding: 10px 12px; font-size: 15px; }
    .tiles.two-line .tile { min-height: 58px; }
    .step-foot { margin-top: var(--space-4); }
    .skip-row { margin-top: var(--space-4); padding-top: var(--space-3); }
    .show-media { margin-top: var(--space-4); }
    .show-block > figure.show-media.has-form { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .show-media.has-form .show-img { width: 100%; }
    .sample-form.is-over { flex: none; width: auto; padding: 12px 14px; }
    .sample-form.is-over .sf-q { margin: 6px 0 8px; font-size: 15px; }
    .sample-form.is-over .sf-foot { margin-top: 10px; padding-top: 8px; }
    .setup-grid { margin-top: var(--space-4); }
    .setup-rows { grid-template-columns: minmax(0, 1fr); }
    .setup-row { padding: 12px 14px 14px; }
    .setup-row:nth-child(even) { border-left: 0; }
    .setup-row:nth-child(2) { border-top: 1px solid var(--hairline); }
    .contact-form { margin-top: var(--space-4); }
    .field-grid { gap: var(--space-3); }
    .field[data-field="email"], .field[data-field="phone"] { grid-column: 1 / -1; }
    .contact-form .input { min-height: 48px; font-size: 16px; }
    .contact-form textarea.input { min-height: 64px; }
    .sent-demos-h { margin-top: var(--space-6); }
    .sent-demos { gap: var(--space-2); }
    .demo-mini-body { padding: 10px 12px; }
    .demo-mini-body > span:last-child { display: none; }
    .other-row { flex-direction: column; }
    .step-foot .btn { flex: 1 1 auto; }
    .keys-hint { display: none; }
}