/* ===================================
   Tax Radar - Contact / exposure check
   Evidence Pack register: light ground, ruled rows, one bordered card.

   Loaded last, after css/tokens.css, css/fonts.css, css/cookie-consent.css,
   css/footer.css and css/nav.css. Every var() carries the tokens.css hex as a
   fallback so the page still renders correctly if tokens.css fails to load.

   Two values in the approved mockup have no token: the muted grey used for
   placeholder text, and the darker teal used on hover. Both are declared
   below as local custom properties rather than added to the locked set in
   tokens.css.

   The global reset lives here because this page carries no inline <style>
   block and css/footer.css relies on list and heading margins being zeroed.

   Motion: this page has no transitions, transforms or animations of any kind,
   so there is nothing for a prefers-reduced-motion block to guard. The step
   swap is a plain hidden-attribute toggle.
   ================================ */

:root {
    /* Mockup values with no token. */
    --muted: #98A1B3;
    --teal-hover: #238A7E;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    font-family: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    background: var(--paper, #F8F9FA);
    color: var(--navy, #1B2A4A);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--teal, #2A9D8F);
}

a:hover {
    color: var(--teal-hover, #238A7E);
}

/* Skip link ---------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--teal, #2A9D8F);
    color: #FFFFFF;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-size: 15px;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

/* Page shell --------------------------------------------------------- */

.exposure {
    max-width: 1160px;
    margin: 0 auto;
    padding: 72px 32px 96px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 64px;
    align-items: start;
}

/* Left column -------------------------------------------------------- */

.kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal, #2A9D8F);
    margin-bottom: 24px;
}

.kicker-rule {
    width: 28px;
    height: 1px;
    background: var(--teal, #2A9D8F);
    display: inline-block;
    flex-shrink: 0;
}

.exposure-title {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: 44px;
    line-height: 1.1;
    margin-bottom: 20px;
    max-width: 16ch;
}

.exposure-lede {
    font-size: 18px;
    color: var(--ink-soft, #4A5568);
    max-width: 44ch;
}

.exposure-steps {
    list-style: none;
    margin-top: 36px;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.exposure-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule, #D6DAE1);
    align-items: baseline;
}

.exposure-step-number {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: 20px;
    color: var(--teal, #2A9D8F);
}

.exposure-step-body {
    font-size: 14.5px;
    color: var(--ink-soft, #4A5568);
}

.exposure-step-body b {
    color: var(--navy, #1B2A4A);
}

.trust-marks {
    list-style: none;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.trust-marks li {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #4A5568);
}

/* The card ----------------------------------------------------------- */

.check-card {
    background: #FFFFFF;
    border: 1px solid var(--navy, #1B2A4A);
}

.step-indicator {
    list-style: none;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 26px 32px 0;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-soft, #4A5568);
}

.step-indicator li[aria-current="step"] {
    color: var(--teal, #2A9D8F);
    font-weight: 500;
}

.check-card-body {
    padding: 24px 32px 32px;
}

/* Form --------------------------------------------------------------- */

.field {
    margin-bottom: 16px;
}

.field-label {
    display: block;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.field-optional {
    color: var(--teal, #2A9D8F);
    text-transform: none;
    letter-spacing: 0.04em;
}

.field-input {
    width: 100%;
    background: var(--paper, #F8F9FA);
    border: 1px solid var(--rule, #D6DAE1);
    border-radius: 3px;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--navy, #1B2A4A);
    font-family: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

.field-input::placeholder {
    color: var(--muted, #98A1B3);
}

.field-input:focus-visible {
    border-color: var(--teal, #2A9D8F);
    outline: 2px solid var(--teal, #2A9D8F);
    outline-offset: 2px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Band selector ------------------------------------------------------ */

.band-group {
    border: 0;
    margin: 0 0 16px;
}

.band-legend {
    display: block;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.band-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.band-option {
    position: relative;
    display: inline-flex;
}

/* The radio stays in the accessibility tree and stays focusable, so arrow keys
   still move through the group; only its native box is taken out of view. It
   is clipped rather than hidden with display or visibility, both of which
   would drop it from the tab order and from the group's arrow-key handling.
   It is clipped to the top left of its chip so focus scrolls the chip into
   view. */
.band-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.band-chip {
    display: inline-block;
    border: 1px solid var(--rule, #D6DAE1);
    border-radius: 3px;
    padding: 9px 15px;
    font-size: 13.5px;
    color: var(--ink-soft, #4A5568);
    cursor: pointer;
    user-select: none;
}

.band-input:checked + .band-chip {
    border-color: var(--teal, #2A9D8F);
    color: var(--teal, #2A9D8F);
    font-weight: 700;
    background: rgba(42, 157, 143, 0.06);
}

.band-input:focus-visible + .band-chip {
    border-color: var(--teal, #2A9D8F);
    outline: 2px solid var(--teal, #2A9D8F);
    outline-offset: 2px;
}

/* Submit and privacy line -------------------------------------------- */

.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: var(--teal, #2A9D8F);
    color: #FFFFFF;
    font-family: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-submit:hover {
    background: var(--teal-hover, #238A7E);
}

.btn-submit:focus-visible {
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

.btn-submit[disabled] {
    background: var(--muted, #98A1B3);
    cursor: default;
}

.btn-submit svg {
    flex-shrink: 0;
}

.btn-submit.btn-loading svg {
    display: none;
}

.privacy-line {
    font-size: 12.5px;
    color: var(--ink-soft, #4A5568);
    margin-top: 14px;
}

/* Validation --------------------------------------------------------- */

.form-message {
    font-size: 14px;
}

.form-message:empty {
    display: none;
}

.form-message.error {
    border: 1px solid var(--red, #C0504A);
    border-left-width: 3px;
    background: rgba(192, 80, 74, 0.06);
    color: var(--navy, #1B2A4A);
    border-radius: 3px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.form-message:focus-visible {
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

.field-error {
    font-size: 12.5px;
    color: var(--red, #C0504A);
    margin-top: 6px;
}

.field-invalid {
    border-color: var(--red, #C0504A);
}

/* The band group's fieldset has no border of its own to colour, so the
   invalid state is carried on the chips. */
.band-group.field-invalid .band-chip {
    border-color: var(--red, #C0504A);
}

/* Step two ----------------------------------------------------------- */

.check-card-heading {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: var(--navy, #1B2A4A);
    margin-bottom: 14px;
}

.check-card-heading:focus-visible {
    outline: 2px solid var(--teal, #2A9D8F);
    outline-offset: 2px;
}

.cal-fallback {
    border: 1px dashed var(--rule, #D6DAE1);
    background: var(--paper-deep, #EFF1F4);
    border-radius: 3px;
    padding: 24px;
    font-size: 14px;
    color: var(--ink-soft, #4A5568);
}

/* Calendly needs an explicit height on the parent element; 700px is the
   height its inline embed is documented against and the shortest that shows
   a full month without the widget scrolling inside itself. No min-width:
   inside the card at 375px there are only about 295px to give it, and a
   320px floor here would push the page into horizontal scroll. */
.cal-widget {
    width: 100%;
    height: 700px;
}

.cal-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--ink-soft, #4A5568);
}

/* Contact strip ------------------------------------------------------ */

.contact-strip {
    list-style: none;
    margin-top: 56px;
    border-top: 1px solid var(--rule, #D6DAE1);
    padding-top: 28px;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.contact-strip li {
    font-size: 14px;
    color: var(--ink-soft, #4A5568);
}

.contact-strip-label {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--teal, #2A9D8F);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.contact-strip a {
    color: var(--navy, #1B2A4A);
    font-weight: 500;
    text-decoration: none;
}

.contact-strip a:hover {
    color: var(--navy, #1B2A4A);
    text-decoration: underline;
}

.contact-strip a:focus-visible {
    outline: 2px solid var(--teal, #2A9D8F);
    outline-offset: 2px;
}

/* Narrow screens ----------------------------------------------------- */

@media (max-width: 640px) {
    .exposure {
        padding: 48px 20px 64px;
        gap: 48px;
    }

    .exposure-title {
        font-size: 34px;
    }

    .exposure-lede {
        font-size: 17px;
    }

    .step-indicator {
        padding: 22px 20px 0;
    }

    .check-card-body {
        padding: 20px 20px 24px;
    }

    .contact-strip {
        gap: 28px;
        margin-top: 40px;
    }

    .cal-widget {
        height: 780px;
    }
}

@media (max-width: 480px) {
    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}