/* ============================================================
   Intake form — v3 (website style)
   Loaded on top of embed-v2.css when ?version=3 (see RequestIntakeForm.mjs).
   Mirrors harbr-website-2026: ink navy text on warm paper, Space Grotesk
   headings over Inter body, 20px soft-shadow cards, rounded-xl inputs and
   pill buttons. The customer's brand colour stays the accent: screens still
   set it inline on headings/buttons, and RequestIntakeForm.mjs exposes it
   here as --brand for focus rings, progress dots and the loader.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

:root {
    /* Tokens from harbr-website-2026/src/index.css (@theme) */
    --ink: #0a1a2f;
    --ivory: #f7f5ef;
    --paper: #fbfaf6;
    --slate: #5b6b7c;
    --slate-light: #8695a4;
    --line: rgba(10, 26, 47, 0.10);
    --line-soft: rgba(10, 26, 47, 0.08);
    --field-border: rgba(10, 26, 47, 0.12);
    --shadow-soft: 0 1px 2px rgba(10, 26, 47, 0.04), 0 8px 24px rgba(10, 26, 47, 0.06);
    --shadow-lift: 0 2px 4px rgba(10, 26, 47, 0.05), 0 18px 48px rgba(10, 26, 47, 0.12);
    --radius-card: 20px;
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --error: #dc2626;

    /* v2 names, re-pointed at the website neutrals. --primary-color is left
       alone on purpose: v2 also uses it for error states, which stay red. */
    --primary-text: var(--ink);
    --secondary-text: var(--slate-light);

    /* Fallback when the page didn't set one. */
    --brand: var(--ink);
}

/* Paper goes on <html>, not <body>: on direct-URL pages <body> is a flex
   container, so the branding bar (.direct-embed-profile-container, z-index:
   -999) paints *under* any body background and disappears. main.css already
   sets html white, so this just swaps the colour. */
html {
    background-color: var(--paper);
}

body {
    -webkit-font-smoothing: antialiased;
}

/* ---- Page frame -------------------------------------------------------- */

.direct-embed-profile-header {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.direct-embed-intake-container {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
}

#harbr-intake-form {
    padding: 40px 48px;
    font-family: var(--font-sans);
    color: var(--ink);
}

.powered-by-row {
    padding: 20px 48px 0;
}

.powered-by-footer,
.harbr-privacy-footer,
.pause-container {
    font-family: var(--font-sans);
    color: var(--slate-light);
}

#harbr-intake-footer a {
    color: var(--slate);
}

/* Progress: hairline dots, the active step stretches into a brand pill. */
.screen-progress-indicator-item {
    padding: 0;
    width: 8px;
    height: 8px;
    margin: 0.4em;
    border-radius: 999px;
    background-color: var(--field-border);
    transition: width 0.2s ease, background-color 0.2s ease;
}

.screen-progress-indicator-item.active {
    width: 24px;
    background-color: var(--brand);
}

/* ---- Typography --------------------------------------------------------- */

#harbr-intake-form .intake-header {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 8px 0 6px;
}

#harbr-intake-form .intake-subheader {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 32px 0 4px;
}

#harbr-intake-form .instructions {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--slate-light);
}

#harbr-intake-form .deferralText {
    color: var(--slate);
    line-height: 1.6;
}

#harbr-intake-form .field-label,
#harbr-intake-form .intake-subheader ~ .field-label {
    margin-top: 18px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
}

#harbr-intake-form .conditional-field-label {
    margin-top: 18px;
    font-size: 0.875rem;
    color: var(--slate);
}

/* The [?] tooltip. embed-v2 draws its bubble as inline ::after text at
   opacity 0, so the invisible text still takes up room and, on narrow
   screens, wraps and pushes the field down. Float the bubble above the icon. */
#harbr-intake-form .field-label .tooltip {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

#harbr-intake-form .field-label .tooltip::after {
    position: absolute;
    z-index: 5;
    left: -8px;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: 240px;
    padding: 6px 9px;
    border-radius: 8px;
    background-color: var(--ink);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
}

/* ---- Fields --------------------------------------------------------------- */

#harbr-intake-form input[type=text],
#harbr-intake-form input[type=number],
#harbr-intake-form input[type=email],
#harbr-intake-form input[type=tel],
#harbr-intake-form input[type=date],
#harbr-intake-form input[type=textarea],
#harbr-intake-form select,
#harbr-intake-form textarea {
    margin: 6px 0 4px;
    padding: 12px 16px;
    border: 1px solid var(--field-border);
    border-radius: 12px;
    background-color: #fff;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    letter-spacing: normal;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#harbr-intake-form input::placeholder,
#harbr-intake-form textarea::placeholder {
    color: color-mix(in srgb, var(--slate-light) 70%, transparent);
}

#harbr-intake-form input[type=text]:focus,
#harbr-intake-form input[type=number]:focus,
#harbr-intake-form input[type=email]:focus,
#harbr-intake-form input[type=tel]:focus,
#harbr-intake-form input[type=date]:focus,
#harbr-intake-form input[type=textarea]:focus,
#harbr-intake-form select:focus,
#harbr-intake-form select:focus-visible,
#harbr-intake-form textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Readonly fields keep the screens' inline #f5f5f5; soften their text too. */
#harbr-intake-form input[readonly] {
    color: var(--slate);
}

/* Inputs are now opaque white, so lift the symbol above the field it overlaps. */
.currency-symbol {
    position: relative;
    z-index: 1;
    margin-right: -26px;
    padding-left: 14px;
    color: var(--slate-light);
}

.currency-input-wrapper input {
    padding-left: 30px !important;
}

/* Element-qualified so it outranks the input[type=...] field rule above. */
#harbr-intake-form input.has-error,
#harbr-intake-form select.has-error,
#harbr-intake-form textarea.has-error,
#harbr-intake-form .has-error {
    border: 1px solid var(--error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent);
}

#harbr-intake-form .error-container .error {
    color: var(--error);
    border-color: var(--error);
}

/* ---- Buttons ---------------------------------------------------------------
   Pills, like the site's <Button>. Primary/secondary colours come from the
   inline brand styles on each button, so only shape and motion live here. */

#harbr-intake-form input[type=submit],
#harbr-intake-form input[type=button],
#harbr-intake-form button,
#harbr-intake-form .button {
    border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
    border-radius: 999px;
    padding: 12px 28px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}

#harbr-intake-form input[type=submit]:hover,
#harbr-intake-form input[type=button]:hover,
#harbr-intake-form button:hover,
#harbr-intake-form .button:hover {
    filter: brightness(108%);
    transform: translateY(-1px);
}

#harbr-intake-form input[type=submit]:active,
#harbr-intake-form input[type=button]:active,
#harbr-intake-form button:active,
#harbr-intake-form .button:active {
    transform: scale(0.98);
}

#harbr-intake-form input[type=submit]:focus,
#harbr-intake-form input[type=button]:focus,
#harbr-intake-form .button:focus {
    filter: none;
}

#harbr-intake-form input[type=submit]:focus-visible,
#harbr-intake-form input[type=button]:focus-visible,
#harbr-intake-form button:focus-visible,
#harbr-intake-form .button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}

#harbr-intake-form .primary-button {
    color: #fff;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 28%, transparent);
}

#harbr-intake-form .primary-button:hover {
    box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 38%, transparent);
}

#harbr-intake-form .secondary-button {
    background-color: #fff;
}

#harbr-intake-form .secondary-button:hover {
    background-color: color-mix(in srgb, var(--brand) 5%, #fff);
}

/* Ghost "← Back", like the site's ghost button. */
#harbr-intake-form #go-to-prev-screen {
    border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
    background-color: transparent;
    color: var(--ink);
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
}

#harbr-intake-form #go-to-prev-screen:hover {
    background-color: color-mix(in srgb, var(--ink) 3%, transparent);
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
    filter: none;
}

#harbr-intake-form .next-button {
    margin-top: 40px;
}

#harbr-intake-form .go-to-next-screen {
    padding: 14px 28px;
    font-size: 16px;
}

#harbr-intake-form input[type=file]::file-selector-button {
    border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
    border-radius: 999px;
    padding: 10px 24px;
    background-color: #fff;
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 600;
    cursor: pointer;
}

#harbr-intake-form .pause-container {
    font-size: 13px;
}

#harbr-intake-form .pause-container span {
    color: var(--slate);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Cards & panels ------------------------------------------------------ */

/* Company / customer search results: small cards that lift on hover,
   like the site's sample-company picker. */
#harbr-intake-form .company-select-button,
#harbr-intake-form .company .company-select-button {
    margin: 8px 0;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background-color: #fff;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#harbr-intake-form .company .company-select-button:hover {
    background-color: #fff;
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

#harbr-intake-form .selected > .u-layout-row-cli > .company-select-button {
    background-color: color-mix(in srgb, var(--brand) 5%, #fff);
    border-color: var(--brand);
    font-size: 105%;
}

#harbr-intake-form .company-select {
    color: var(--ink);
    font-size: 15px;
}

/* Repeatable owner/principal/bank blocks stay flat: each one opens with its
   own .intake-subheader, so boxing the section would box the heading too.
   Copies added via "Add another" (appended as siblings) get a hairline
   divider above them so repeated entries still read as separate. */
#harbr-intake-form .repeatable-section + .repeatable-section,
#harbr-intake-form .additional-section + .additional-section {
    margin-top: 28px;
    padding-top: 4px;
    border-top: 1px solid var(--line-soft);
}

#harbr-intake-form .terms-and-conditions-formatter,
#harbr-intake-form .request-signatory-terms-and-conditions-formatter {
    padding: 16px 20px;
    border-radius: 16px;
    background-color: color-mix(in srgb, var(--ivory) 70%, transparent);
    box-shadow: inset 0 0 0 1px var(--line-soft);
    color: var(--slate);
    font-size: 14px;
    line-height: 1.6;
    overflow: auto;
}

#harbr-intake-form .file-upload-formatter {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Drop zones set border/background inline (and JS toggles them on drag);
   only the corner radius is safe to restyle. */
#harbr-intake-form .trade-reference-dropzone,
#harbr-intake-form [id$="-dropzone"] {
    border-radius: 16px !important;
}

/* Microsite application picker. */
.ms-app-link {
    border: 1px solid var(--line);
    border-radius: 16px;
    background-color: #fff;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: normal;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ms-app-link:hover {
    transform: translateY(-2px);
    border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent) !important;
    box-shadow: var(--shadow-lift) !important;
}

#harbr-intake-form .harbr-loading div {
    background: var(--brand);
}

/* ---- Choice buttons --------------------------------------------------------
   embed-v3/select-controls.mjs replaces short selects with a row of buttons:
   radio-style for a single pick, checkbox-style for Select Multiple. Long
   selects become a searchable list (next section). Either way the select stays
   in the form (it's what gets posted), just out of sight. Selected state is a
   brand border + tint rather than brand text, so light brand colours stay
   readable. */

#harbr-intake-form select.select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

#harbr-intake-form .choice-field[hidden] {
    display: none;
}

#harbr-intake-form .choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 4px;
}

#harbr-intake-form .choice-group--stacked {
    flex-direction: column;
}

#harbr-intake-form .choice-group .choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0;
    padding: 11px 18px 11px 14px;
    border: 1px solid var(--field-border);
    border-radius: 12px;
    background-color: #fff;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    box-shadow: none;
    filter: none;
    transform: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Two or three short options split the row evenly, like a segmented control,
   and wrap once each would drop below 8rem. */
#harbr-intake-form .choice-group--even .choice {
    flex: 1 1 8rem;
}

#harbr-intake-form .choice-group .choice:hover {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--field-border));
    background-color: color-mix(in srgb, var(--brand) 3%, #fff);
}

#harbr-intake-form .choice-group .choice:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

#harbr-intake-form .choice-group .choice.is-selected {
    border-color: var(--brand);
    background-color: color-mix(in srgb, var(--brand) 6%, #fff);
    box-shadow: inset 0 0 0 1px var(--brand);
}

#harbr-intake-form .choice-group .choice.is-selected:focus-visible {
    box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

#harbr-intake-form .choice-group .choice:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#harbr-intake-form .choice-mark {
    position: relative;
    flex: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
    border-radius: 999px;
    background-color: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#harbr-intake-form .choice-group[role="group"] .choice-mark {
    border-radius: 5px;
}

/* Radio: brand ring around a brand dot. */
#harbr-intake-form .choice.is-selected .choice-mark {
    border-color: var(--brand);
    background-color: var(--brand);
    box-shadow: inset 0 0 0 3px #fff;
}

/* Checkbox: filled square with a white tick. */
#harbr-intake-form .choice-group[role="group"] .choice.is-selected .choice-mark {
    box-shadow: none;
}

#harbr-intake-form .choice-group[role="group"] .choice.is-selected .choice-mark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* error.mjs marks the hidden select; the script mirrors that onto the field.
   Colour the buttons (or the search box), not a box around the whole field. */
#harbr-intake-form .choice-field.has-error,
#harbr-intake-form .combo-field.has-error {
    border: 0;
    box-shadow: none;
}

#harbr-intake-form .choice-field.has-error .choice:not(.is-selected) {
    border-color: var(--error);
}

#harbr-intake-form .combo-field.has-error .combo-input {
    border-color: var(--error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent);
}

/* ---- Searchable lists ------------------------------------------------------
   Long single selects (state, currency, language…) become a text box that
   filters its options as you type. Arrow keys move, Enter picks, Escape puts
   the current pick back. */

/* flow-root keeps the input's margins inside .combo, so the chevron, the list
   and a floating label above it all measure from the same place. */
#harbr-intake-form .combo {
    position: relative;
    display: flow-root;
}

#harbr-intake-form .combo .combo-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-right: 44px;
    text-overflow: ellipsis;
}

/* A 44px tap target over the right end of the box; ::before draws the chevron. */
#harbr-intake-form .combo-chevron {
    position: absolute;
    top: 6px;
    right: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

#harbr-intake-form .combo-chevron::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border: solid var(--slate);
    border-width: 0 1.5px 1.5px 0;
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform 0.15s ease;
}

#harbr-intake-form .combo-input[aria-expanded="true"] ~ .combo-chevron::before {
    transform: translate(-50%, -25%) rotate(-135deg);
}

#harbr-intake-form .combo-list {
    position: absolute;
    z-index: 30;
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    max-height: 264px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 14px;
    background-color: #fff;
    box-shadow: var(--shadow-lift);
}

#harbr-intake-form .combo-list[hidden] {
    display: none;
}

/* Not enough room below (near the bottom of the card): open upward. */
#harbr-intake-form .combo-field--up .combo-list {
    top: auto;
    bottom: calc(100% - 2px);
}

#harbr-intake-form .combo-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
}

#harbr-intake-form .combo-option[hidden] {
    display: none;
}

#harbr-intake-form .combo-option.is-active {
    background-color: color-mix(in srgb, var(--brand) 8%, #fff);
}

#harbr-intake-form .combo-option[aria-selected="true"] {
    font-weight: 600;
}

/* Tick after the current pick. */
#harbr-intake-form .combo-option[aria-selected="true"]::after {
    content: '';
    flex: none;
    width: 5px;
    height: 10px;
    margin: -3px 4px 0 0;
    border: solid var(--brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#harbr-intake-form .combo-option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

/* ---- Floating labels -------------------------------------------------------
   embed-v3/float-labels.mjs marks fields whose only label was their
   placeholder (templates with field labels off, the new-company address). The
   label sits inside the field like a placeholder and shrinks to the top edge
   once the field has focus or a value. */

#harbr-intake-form .field-label.float-label {
    position: relative;
    z-index: 2;
    height: 0;
    margin-bottom: 0;
    pointer-events: none;
}

/* Labels we added to placeholder-only fields: those fields sat closer together. */
#harbr-intake-form .field-label.float-label--generated {
    margin-top: 10px;
}

/* Resting position = where the placeholder text sat: input margin (6) +
   border (1) + top padding (12). */
#harbr-intake-form .float-label > span {
    position: absolute;
    top: 19px;
    left: 17px;
    max-width: calc(100% - 34px);
    overflow: hidden;
    color: var(--slate-light);
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform-origin: left top;
    transition: transform 0.15s ease, color 0.15s ease;
}

#harbr-intake-form .float-label:has(+ .currency-input-wrapper) > span {
    left: 31px;
}

/* Once the label floats the digits sit lower in the box; keep the symbol on their line. */
#harbr-intake-form .float-label.is-floated + .currency-input-wrapper .currency-symbol {
    transform: translateY(7px);
}

/* .is-floated comes from float-labels.mjs (focus, typing, each pass). The
   :has() line covers a plain input whose value a script set between passes. */
#harbr-intake-form .float-label--pinned > span,
#harbr-intake-form .float-label.is-floated > span,
#harbr-intake-form .float-label:has(+ .has-float-label:not(:placeholder-shown)) > span {
    color: var(--slate);
    transform: translateY(-10px) scale(0.75);
}

/* Same 44px box, with the text nudged down under the shrunken label. */
#harbr-intake-form input.has-float-label {
    padding-top: 19px;
    padding-bottom: 5px;
}

#harbr-intake-form textarea.has-float-label {
    padding-top: 24px;
}

#harbr-intake-form .has-float-label::placeholder {
    color: transparent;
}

/* The [?] tooltip moves inside the field, at its right end. */
#harbr-intake-form .float-label .tooltip {
    display: block;
    position: absolute;
    top: 20px;
    right: 14px;
    line-height: 0;
    pointer-events: auto;
}

#harbr-intake-form .float-label .tooltip::after {
    position: absolute;
    left: auto;
    right: -6px;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: 260px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}

#harbr-intake-form .float-label:has(.tooltip) + .has-float-label,
#harbr-intake-form .float-label:has(.tooltip) + .currency-input-wrapper .has-float-label {
    padding-right: 40px;
}

/* ---- Inline errors ----------------------------------------------------------
   error.mjs puts a field's error right under the field (data-field-errors=
   "inline" on #harbr-intake-form) and clears it once the field is edited. The
   copy in the banner above the form is dropped when it's shown inline. */

#harbr-intake-form .field-error-message {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 6px 2px 0;
    color: var(--error);
    font-size: 13px;
    line-height: 1.4;
    animation: v3-error-in 0.18s ease-out;
}

#harbr-intake-form .field-error-message::before {
    content: '!';
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 999px;
    background-color: var(--error);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.error-container .error.shown-inline {
    display: none;
}

.error-container:has(.error.shown-inline):not(:has(.error:not(.shown-inline))) {
    display: none;
}

/* ---- Side-by-side fields ---------------------------------------------------
   embed-v3/field-rows.mjs groups short related fields (first/last name, email/
   phone, city/state/zip) into one row; they stack again on narrow screens. */

#harbr-intake-form .field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
}

#harbr-intake-form .field-row--3 {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr);
}

#harbr-intake-form .field-cell input:not([type=hidden]),
#harbr-intake-form .field-cell textarea {
    width: 100%;
    box-sizing: border-box;
}

/* ---- Company confirmation modal ------------------------------------------- */

.company-confirmation-modal {
    background-color: rgba(10, 26, 47, 0.45);
    backdrop-filter: blur(4px);
}

.company-confirmation-content {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
    font-family: var(--font-sans);
    color: var(--ink);
}

.company-confirmation-header {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.company-confirmation-details {
    border-radius: 16px;
    background-color: color-mix(in srgb, var(--ivory) 70%, transparent);
    box-shadow: inset 0 0 0 1px var(--line-soft);
}

.company-confirmation-field label {
    font-weight: 500;
    color: var(--ink);
}

.company-confirmation-input {
    border: 1px solid var(--field-border);
    border-radius: 12px;
}

.company-confirmation-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

.company-confirmation-button {
    border-radius: 999px;
    font-weight: 600;
}

.company-cancel-btn {
    background-color: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 15%, transparent);
}

.company-cancel-btn:hover {
    background-color: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* ---- Mobile ----------------------------------------------------------------
   v2 already turns the card full-bleed below 868px; just tighten v3 spacing. */

@media screen and (max-width: 868px) {
    #harbr-intake-form {
        padding: 24px 16px;
    }

    .powered-by-row {
        padding: 16px 16px 0;
    }

    .direct-embed-intake-container {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    #harbr-intake-form .intake-header {
        font-size: 1.5rem;
    }
}

/* ---- Motion ----------------------------------------------------------------
   Each screen eases in when it appears, whether new or revealed again by Back
   (screens toggle .hidden, which restarts the animation). */

@keyframes v3-screen-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes v3-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes v3-error-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
}

#harbr-intake-form .form-screen:not(.hidden) {
    animation: v3-screen-in 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Side-by-side rows stack again on narrow screens. */
@media screen and (max-width: 600px) {
    #harbr-intake-form .field-row--3 {
        display: block;
    }
}

@media screen and (max-width: 420px) {
    #harbr-intake-form .field-row {
        display: block;
    }
}

/* ---- Mobile action bar -----------------------------------------------------
   On phones Back and Next sit in a bar pinned to the bottom of the screen,
   within thumb reach. Only while the visible screen's Next is showing: screens
   hide it with .hidden or an inline display: none until it's usable.
   embed-v3/action-bar.mjs adds .has-back when Back is showing. The bar's
   backdrop hangs off .direct-embed-container so it shares the buttons'
   stacking context (that container has its own z-index). */

@media screen and (max-width: 868px) {
    #harbr-intake-form .form-screen:not(.hidden) .go-to-next-screen:not(.hidden):not([style*="display: none"]) {
        position: fixed;
        z-index: 21;
        left: 16px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        /* !important to beat embed-v2's .go-to-next-screen fill-available width. */
        width: calc(100% - 32px) !important;
        height: 50px;
        margin: 0;
        padding: 0 16px;
        text-align: center;
    }

    #harbr-intake-form .form-screen.has-back:not(.hidden) .go-to-next-screen:not(.hidden):not([style*="display: none"]) {
        left: calc(30% + 12px);
        width: calc(70% - 28px) !important;
    }

    #harbr-intake-form .form-screen.has-back:not(.hidden):has(.go-to-next-screen:not(.hidden):not([style*="display: none"])) #go-to-prev-screen {
        position: fixed;
        z-index: 21;
        left: 16px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        width: calc(30% - 12px);
        height: 50px;
        margin: 0;
        padding: 0 8px;
        background-color: #fff;
        font-size: 15px;
        text-align: center;
    }

    .direct-embed-container:has(.form-screen:not(.hidden) .go-to-next-screen:not(.hidden):not([style*="display: none"]))::after {
        content: '';
        position: fixed;
        z-index: 20;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(78px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line-soft);
        background-color: color-mix(in srgb, var(--paper) 88%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Room so the last field and the footer links can scroll clear of the bar. */
    #harbr-intake-form:has(.form-screen:not(.hidden) .go-to-next-screen:not(.hidden):not([style*="display: none"])) {
        padding-bottom: 96px;
    }

    body:has(#harbr-intake-form .form-screen:not(.hidden) .go-to-next-screen:not(.hidden):not([style*="display: none"])) #harbr-intake-footer {
        padding-bottom: 96px;
    }

    /* A moving screen would carry the pinned buttons with it: fade only. */
    #harbr-intake-form .form-screen:not(.hidden) {
        animation-name: v3-fade-in;
    }
}

/* ---- Reduced motion --------------------------------------------------------
   Honour the OS setting: no entrance animations, transitions or hover lifts.
   The loading indicator keeps spinning; it's telling people to wait. */

@media (prefers-reduced-motion: reduce) {
    #harbr-intake-form .form-screen:not(.hidden),
    #harbr-intake-form .field-error-message {
        animation: none;
    }

    #harbr-intake-form *,
    #harbr-intake-form *::before,
    #harbr-intake-form *::after,
    .screen-progress-indicator-item,
    .ms-app-link {
        transition: none !important;
    }

    #harbr-intake-form input[type=submit]:hover,
    #harbr-intake-form input[type=button]:hover,
    #harbr-intake-form button:hover,
    #harbr-intake-form .button:hover,
    #harbr-intake-form .company .company-select-button:hover,
    .ms-app-link:hover {
        transform: none !important;
    }
}