:root {
    --navy: #102f3c;
    --navy-deep: #09222d;
    --navy-soft: #244956;
    --teal: #0d7472;
    --teal-dark: #075a5b;
    --mint: #bfe3d8;
    --mint-light: #e7f5f0;
    --mint-faint: #f2faf7;
    --coral: #ee8067;
    --coral-dark: #d96550;
    --coral-light: #fae5df;
    /* Coral that CARRIES TEXT — as a background under white, or as a glyph on a
       light surface. White on `--coral` is 2.65:1 and on `--coral-dark` 3.54:1;
       both were well under the 4.5:1 of WCAG 1.4.3 while carrying the primary
       call to action on the landing page, the search button and the selected day
       in the calendar. `--coral` itself is unchanged wherever it is pure
       decoration (the brand mark, the step badge fills, the legend swatch).
       Chosen against every light surface in this palette, not just white: the
       first attempt cleared 4.54:1 on #fff and still failed at 4.39:1 on the
       paper tint the doctor profiles use. Worst case is now 4.56:1. */
    --coral-strong: #b3452c;
    --coral-strong-hover: #a4361d;
    --sand: #e8d9bd;
    --sand-light: #f7f1e6;
    --cream: #f7f5ef;
    --paper: #fcfbf8;
    --white: #fff;
    --ink: #152e37;
    /* 4.23:1 on `--sand-light` and 4.36:1 on `--cream` before: under 4.5:1 on
       most of the tinted surfaces it was actually used on. Chosen against ALL
       NINE surfaces of this palette, not the handful a page happens to pair it
       with today — worst case is now 4.55:1, on `--coral-light`. */
    --muted: #596c72;
    --line: #dce3df;
    --line-dark: rgb(16 47 60 / 16%);
    --danger: #a73d35;
    --danger-light: #fff0ec;
    /* 4.08:1 on its own `--success-light` background — the status pill said
       "confirmed" in a green nobody with reduced contrast sensitivity could
       read against the pale green behind it. Now ≥4.52:1 on all nine surfaces. */
    --success: #28765d;
    --success-light: #eaf7f0;
    --focus: #e45741;
    --serif: Georgia, "Times New Roman", serif;
    --sans: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --shell: 1120px;
    --shadow: 0 24px 70px rgb(15 45 56 / 12%);
    --shadow-soft: 0 10px 35px rgb(15 45 56 / 8%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 8%, rgb(191 227 216 / 26%), transparent 27rem),
        radial-gradient(circle at 94% 32%, rgb(238 128 103 / 9%), transparent 23rem),
        var(--cream);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--teal-dark);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--teal);
}

button {
    color: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    color: var(--navy);
}

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

[hidden] {
    display: none !important;
}

.skip-link {
    position: fixed;
    z-index: 999;
    top: 10px;
    left: 10px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    color: var(--white);
    background: var(--navy);
    transform: translateY(-150%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    color: var(--white);
    transform: translateY(0);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Bot honeypot: intentionally absent from both visual and accessibility trees. */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.site-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: rgb(247 250 247 / 92%);
    backdrop-filter: blur(16px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 48px), var(--shell));
    min-height: 84px;
    margin: 0 auto;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--navy);
    text-decoration: none;
}

.brand:hover {
    color: var(--navy);
}

.brand__mark {
    display: block;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    margin-right: 11px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgb(16 47 60 / 14%);
}

.brand__word {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.brand__claim {
    padding-left: 13px;
    margin-left: 13px;
    border-left: 1px solid var(--line-dark);
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .01em;
}

.brand--compact .brand__mark {
    width: 31px;
    height: 31px;
    border-radius: 8px;
}

.brand--compact .brand__word {
    font-size: 18px;
}

.site-header__trust {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--navy);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-header__appointments {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.site-header__appointments:hover {
    color: var(--teal);
}

.site-header__trust > span:last-child {
    display: grid;
}

.site-header__trust strong {
    font-size: 13px;
    line-height: 1.2;
}

.site-header__trust small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.trust-lock {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mint-light);
}

.trust-lock::before {
    position: absolute;
    top: 12px;
    left: 9px;
    width: 12px;
    height: 10px;
    border-radius: 2px;
    background: var(--teal);
    content: "";
}

.trust-lock::after {
    position: absolute;
    top: 7px;
    left: 11px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--teal);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    content: "";
}

.trust-lock--teal {
    background: var(--white);
}

#inhalt {
    min-height: calc(100vh - 250px);
}

.booking-shell {
    width: min(calc(100% - 48px), var(--shell));
    margin: 0 auto;
    padding: 32px 0 84px;
}

.booking-steps {
    width: min(100%, 690px);
    margin: 0 auto 42px;
}

.booking-steps ol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
    margin: 0;
    list-style: none;
}

.booking-steps ol::before {
    position: absolute;
    z-index: -1;
    top: 17px;
    right: 16.66%;
    left: 16.66%;
    height: 1px;
    background: var(--line);
    content: "";
}

.booking-steps li {
    display: grid;
    justify-items: center;
    gap: 7px;
    color: #809095;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.booking-steps__number {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    background: var(--cream);
    font-size: 12px;
}

.booking-steps li.is-active {
    color: var(--navy);
}

.booking-steps li.is-active .booking-steps__number {
    border-color: var(--navy);
    color: var(--white);
    background: var(--navy);
    box-shadow: 0 0 0 5px var(--mint-light);
}

.booking-steps li.is-complete {
    color: var(--teal);
}

.booking-steps li.is-complete .booking-steps__number {
    border-color: var(--teal);
    color: var(--white);
    background: var(--teal);
}

.booking-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 36px;
}

.booking-hero > div:first-child {
    max-width: 700px;
}

.booking-hero--compact {
    max-width: 800px;
    margin-bottom: 38px;
}

.booking-hero--appointments {
    align-items: center;
    margin: 8px 0 46px;
}

.booking-hero--appointments .button-primary {
    flex: 0 0 auto;
}

.eyebrow {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: var(--teal-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.eyebrow > span:first-child {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 4px var(--mint-light);
}

.booking-hero h1,
.state-page h1 {
    margin-bottom: 11px;
    font-family: var(--serif);
    font-size: clamp(34px, 4.4vw, 50px);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.booking-hero__lead {
    max-width: 660px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 16px;
}

.service-summary {
    display: flex;
    align-items: center;
    width: min(100%, 310px);
    padding: 17px 19px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgb(255 255 255 / 80%);
    box-shadow: var(--shadow-soft);
}

.service-summary__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    flex: 0 0 auto;
    margin-right: 13px;
    border-radius: 10px;
    color: var(--teal);
    background: var(--mint-light);
    font-size: 23px;
    font-weight: 400;
}

.service-summary > span:last-child {
    display: grid;
    min-width: 0;
}

.service-summary small,
.reservation-summary small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.service-summary strong {
    overflow: hidden;
    margin: 1px 0;
    color: var(--navy);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-summary > span:last-child > span {
    color: var(--muted);
    font-size: 12px;
}

.alerts {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.alert,
.error-summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgb(167 61 53 / 25%);
    border-radius: 10px;
    color: #7d302a;
    background: var(--danger-light);
    font-size: 13px;
}

.alert {
    margin: 0;
}

.alert strong {
    color: var(--danger);
}

.alert__icon {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--white);
    background: var(--danger);
    font-size: 12px;
    font-weight: 800;
}

.booking-card {
    overflow: hidden;
    border: 1px solid rgb(13 116 114 / 22%);
    border-radius: 22px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.calendar {
    transition: opacity 160ms ease;
}

.calendar.htmx-swapping {
    opacity: .52;
}

.calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    padding: 19px 26px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(110deg, var(--mint-faint), var(--white));
    gap: 20px;
}

.calendar__header > div,
.slot-panel__heading,
.patient-card__heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-number {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--white);
    background: var(--navy);
    font-size: 12px;
    font-weight: 700;
}

.calendar__kicker {
    margin: 0 0 1px;
    color: var(--teal);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.calendar__header h2,
.patient-card__heading h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.month-nav {
    display: flex;
    align-items: center;
    gap: 7px;
}

.month-nav__button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--navy);
    background: var(--white);
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.month-nav__button:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--mint-faint);
    transform: translateY(-1px);
}

/* A real `disabled` button now, not a span pretending to be one (docs/12 §4.3):
   the horizon is a native control that genuinely cannot run, so it is disabled
   natively and carries a reason through `aria-describedby`. */
.month-nav__button:disabled {
    color: #6b7472;
    background: #f5f6f4;
    cursor: not-allowed;
}

/* The reason belongs to assistive technology; sighted users already see a
   greyed control at the edge of the range. It is in the accessibility tree via
   aria-describedby, so it must NOT be display:none. */
.month-nav__reason {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.calendar__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
}

.calendar__date-panel {
    min-width: 0;
    padding: 24px 26px 18px;
}

.calendar__months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.calendar table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 3px;
}

.calendar caption {
    padding-bottom: 13px;
    color: var(--navy);
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}

.calendar th {
    height: 27px;
    /* Was a hard-coded #859398: 3.17:1 on white. These are the weekday headers —
       the labels that tell a reader which column is Monday, at 9px, uppercase.
       Using the shared token instead of a one-off grey also means the contrast
       gate covers them from now on. */
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.calendar th abbr {
    text-decoration: none;
}

.calendar td {
    height: 46px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.day {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 34px;
    height: 44px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ink);
    font-size: 12px;
    text-decoration: none;
}

.day--empty {
    visibility: hidden;
}

.day--available {
    border-color: rgb(13 116 114 / 12%);
    background: var(--mint-faint);
    font-weight: 700;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

/* ── Day status markers (docs/12 §4.2, WCAG 1.4.1 Use of Color) ─────────────
   Every status carries a SHAPE as well as a colour, so the calendar stays
   readable in greyscale, at low contrast, and for the roughly one in twelve men
   who cannot separate the green from the grey. The marker is `aria-hidden`: the
   status is spoken by the cell's visually hidden text, and announcing it twice
   would be its own defect. */
.day__mark {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    width: 8px;
    height: 8px;
    margin: auto;
}

.day__mark--available {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
}

.day__mark--selected {
    background: none;
}

/* A slash for "fully booked" and a bar for "not bookable": two different marks,
   because they are two different answers — one day is full, the other was never
   on offer, and a patient deciding whether to try tomorrow needs to know which. */
.day__mark--fully_booked {
    height: 9px;
    background: linear-gradient(45deg, transparent 44%, #4a5654 44%, #4a5654 56%, transparent 56%);
}

.day__mark--not_bookable,
.day__mark--past {
    height: 2px;
    background: #6b7472;
}

.day--selected .day__mark--available {
    background: var(--white);
}

/* The check that makes "selected" more than a colour. */
.day--selected::after {
    position: absolute;
    top: 2px;
    right: 3px;
    color: var(--white);
    content: "✓";
    font-size: 9px;
    line-height: 1;
}

.day--available:hover {
    border-color: var(--teal);
    color: var(--teal-dark);
    background: var(--mint-light);
    transform: translateY(-1px);
}

.day--selected,
.day--selected:hover {
    border-color: var(--coral-strong);
    color: var(--white);
    background: var(--coral-strong);
    box-shadow: 0 6px 14px rgb(238 128 103 / 24%);
}

/* #bbc3c1 and #9ba7a7 on white are 2.0:1 and 2.7:1 — below the 4.5:1 of 1.4.3
   even before anyone squints. These days are unavailable, not decorative: their
   DATE still has to be readable, because "which Tuesday was that?" is the
   question a patient is answering while looking at them. */
.day--past,
.day--not_bookable {
    color: #5c6664;
}

.day--fully_booked {
    color: #55605e;
    background:
        linear-gradient(135deg, transparent 46%, rgb(99 118 124 / 18%) 48%, rgb(99 118 124 / 18%) 52%, transparent 54%);
}

.calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
}

/* The legend is a list now, so its four entries are announced as four entries
   rather than as one run-on line. */
.calendar__legend {
    list-style: none;
}

.calendar__legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Inside the legend the markers stand on their own rather than sitting under a
   date, so they need static positioning and a box to occupy. */
.calendar__legend .day__mark {
    position: static;
    flex: none;
    margin: 0;
}

.calendar__legend .day__mark--selected {
    width: 8px;
    height: 8px;
    background: var(--coral);
}

.slot-panel {
    min-width: 0;
    padding: 24px;
    border-left: 1px solid var(--line);
    background: #fbfcfa;
}

.slot-panel h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 750;
}

.slot-panel__date {
    margin: 19px 0 12px;
    color: var(--muted);
    font-size: 12px;
}

.slot-panel__date strong {
    color: var(--navy);
}

.slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.slots form,
.slots li {
    min-width: 0;
}

.slots button {
    display: flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 8px;
    border: 1px solid var(--line-dark);
    border-radius: 9px;
    color: var(--teal-dark);
    background: var(--white);
    cursor: pointer;
    gap: 4px;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
}

.slots button:hover {
    border-color: var(--coral-strong);
    color: var(--white);
    background: var(--coral-strong);
    box-shadow: 0 7px 16px rgb(238 128 103 / 20%);
    transform: translateY(-1px);
}

.slots time {
    font-size: 14px;
    font-weight: 800;
}

.slots button span {
    font-size: 9px;
}

.slot-panel__hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 11px 12px;
    margin: 16px 0 0;
    border-radius: 8px;
    color: var(--muted);
    background: var(--mint-faint);
    font-size: 10px;
}

.slot-panel__hint > span {
    color: var(--teal);
    font-size: 8px;
}

.slot-placeholder {
    display: grid;
    min-height: 250px;
    place-items: center;
    align-content: center;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

.slot-placeholder p {
    max-width: 220px;
    margin: 15px 0 0;
    font-size: 12px;
}

.slot-placeholder p strong {
    display: block;
    margin-bottom: 3px;
    color: var(--navy);
    font-size: 13px;
}

.slot-placeholder__calendar,
.reservation-summary__date-icon {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgb(13 116 114 / 15%);
    border-radius: 14px;
    background: var(--mint-light);
}

.slot-placeholder__calendar::before,
.reservation-summary__date-icon::before {
    width: 24px;
    height: 21px;
    border: 2px solid var(--teal);
    border-radius: 4px;
    content: "";
}

.slot-placeholder__calendar::after,
.reservation-summary__date-icon::after {
    position: absolute;
    top: 19px;
    width: 24px;
    border-top: 2px solid var(--teal);
    content: "";
}

.slot-placeholder__calendar i,
.reservation-summary__date-icon i {
    position: absolute;
    top: 13px;
    width: 15px;
    border-top: 3px dotted var(--teal);
}

.empty-state--compact {
    min-height: 230px;
    align-content: center;
    padding: 18px;
}

.booking-assurance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 22px 12px 0;
}

.booking-assurance > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    padding: 0 22px;
    border-right: 1px solid var(--line);
}

.booking-assurance > div:last-child {
    border-right: 0;
}

.booking-assurance > div > span {
    grid-row: 1 / span 2;
    color: var(--teal);
    font-size: 15px;
}

.booking-assurance strong {
    color: var(--navy);
    font-size: 11px;
}

.booking-assurance small {
    color: var(--muted);
    font-size: 9px;
}

.details-layout {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.35fr);
    align-items: start;
    gap: 26px;
}

.reservation-column {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 14px;
}

.reservation-summary,
.timer,
.privacy-note,
.patient-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.reservation-summary {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    padding: 52px 20px 20px;
    gap: 14px;
}

.reservation-summary__eyebrow {
    position: absolute;
    top: 17px;
    left: 20px;
    margin: 0;
    color: var(--teal);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.reservation-summary > div:last-child {
    display: grid;
}

.reservation-summary strong {
    margin: 2px 0;
    color: var(--navy);
    font-size: 15px;
}

.reservation-summary > div:last-child > span {
    color: var(--muted);
    font-size: 12px;
}

.timer {
    overflow: hidden;
    padding: 18px;
    border-color: rgb(13 116 114 / 30%);
    background: linear-gradient(145deg, var(--mint-faint), var(--white));
}

.timer__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.timer__top > span:last-child {
    display: grid;
}

.timer__top small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.timer__top strong {
    color: var(--teal-dark);
    font-family: var(--serif);
    font-size: 23px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.timer__clock {
    position: relative;
    display: block;
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    border: 2px solid var(--teal);
    border-radius: 50%;
}

.timer__clock::before,
.timer__clock::after {
    position: absolute;
    top: 9px;
    left: 17px;
    width: 2px;
    height: 10px;
    border-radius: 2px;
    background: var(--teal);
    transform-origin: bottom;
    content: "";
}

.timer__clock::after {
    height: 8px;
    transform: rotate(125deg);
}

.timer__until {
    margin: 11px 0 0 51px;
    color: var(--muted);
    font-size: 10px;
}

.timer__until time {
    color: var(--ink);
    font-weight: 700;
}

.timer__warning {
    display: flex;
    gap: 7px;
    padding: 9px;
    margin: 12px 0 0;
    border-radius: 7px;
    color: var(--danger);
    background: var(--danger-light);
    font-size: 10px;
}

.timer__warning span {
    font-weight: 800;
}

.timer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 14px;
    margin-top: 15px;
    border-top: 1px solid rgb(13 116 114 / 15%);
    gap: 7px 12px;
}

.timer__actions form {
    margin: 0;
}

.timer__refresh {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    margin: -5px 0 -9px;
    color: var(--muted);
    font-size: 10px;
}

.button-primary,
.button-secondary,
.button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 11px 21px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    gap: 12px;
    transition: box-shadow 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.button-primary {
    border: 1px solid var(--teal);
    color: var(--white);
    background: var(--teal);
    box-shadow: 0 10px 23px rgb(13 116 114 / 18%);
}

.button-primary:hover {
    border-color: var(--teal-dark);
    color: var(--white);
    background: var(--teal-dark);
    box-shadow: 0 13px 28px rgb(13 116 114 / 24%);
    transform: translateY(-1px);
}

.button-primary--wide {
    width: 100%;
}

.button-secondary {
    border: 1px solid var(--line-dark);
    color: var(--navy);
    background: var(--white);
}

.button-secondary:hover {
    border-color: var(--teal);
    color: var(--teal-dark);
    background: var(--mint-faint);
    transform: translateY(-1px);
}

.button-secondary--small {
    min-height: 44px;
    padding: 7px 12px;
    border-color: var(--teal);
    font-size: 10px;
}

.button-secondary:disabled,
.button-secondary[aria-disabled="true"] {
    border-color: var(--line);
    color: #98a3a2;
    background: #f2f4f2;
    cursor: not-allowed;
    transform: none;
}

.button-link {
    min-height: 44px;
    padding: 6px 2px;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: 10px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.button-danger {
    border: 1px solid rgb(167 61 53 / 30%);
    color: var(--danger);
    background: var(--white);
}

.button-danger:hover {
    border-color: var(--danger);
    color: var(--white);
    background: var(--danger);
}

.timer--expired {
    display: flex;
    align-items: flex-start;
    box-shadow: none;
    gap: 11px;
}

.timer--expired p {
    margin: 0 0 5px;
    font-size: 12px;
}

.privacy-note {
    display: flex;
    align-items: flex-start;
    padding: 15px 16px;
    box-shadow: none;
    gap: 11px;
}

.privacy-note p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.privacy-note strong {
    display: block;
    margin-bottom: 2px;
    color: var(--navy);
    font-size: 11px;
}

.patient-card {
    padding: 28px 30px 31px;
}

.patient-card__heading {
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.patient-card__intro,
.patient-card > p {
    color: var(--muted);
    font-size: 13px;
}

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

.field {
    margin-bottom: 17px;
}

.field label {
    display: flex;
    align-items: baseline;
    margin-bottom: 6px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
}

.field label > span,
.required-note > span {
    /* The required-field asterisk is VISIBLE text at 3.54:1. It is also the
       only mark distinguishing a mandatory field from an optional one for a
       sighted user, so `aria-hidden` does not excuse it from 1.4.3. */
    color: var(--coral-strong);
}

.field label small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 500;
}

.field input {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbd5d1;
    border-radius: 8px;
    color: var(--ink);
    background: var(--paper);
    font-size: 16px;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.field input:hover {
    border-color: #99aca7;
}

.field input:focus {
    border-color: var(--teal);
    outline: 0;
    background: var(--white);
    box-shadow: 0 0 0 3px rgb(13 116 114 / 13%);
}

.field input[aria-invalid="true"] {
    border-color: var(--danger);
    background: #fffafa;
}

.field__hint {
    display: flex;
    align-items: flex-start;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 9px;
    gap: 5px;
}

.field__hint span {
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    font-size: 8px;
    font-weight: 700;
}

.field__error {
    margin: 6px 0 0;
    color: var(--danger);
    font-size: 10px;
    font-weight: 600;
}

.required-note {
    margin: -2px 0 15px;
    color: var(--muted);
    font-size: 9px;
}

.form-legal {
    max-width: 440px;
    margin: 10px auto 0;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}

.error-summary {
    max-width: 770px;
    margin: 0 0 22px auto;
}

.error-summary h2 {
    margin-bottom: 5px;
    color: var(--danger);
    font-family: var(--sans);
    font-size: 14px;
}

.error-summary ul {
    padding-left: 18px;
    margin: 0;
    font-size: 11px;
}

/* 2.5.8 Target Size. The error summary's links were 21 px tall and stacked with
   no gap, so the "safe clickable space" around each was 21 px — under the 24 px
   floor, and adjacent enough that a shaky tap lands on the wrong field. This is
   the list somebody uses precisely when they are already frustrated, and the one
   place where hitting the wrong entry costs them the field they were looking for. */
.error-summary li + li {
    margin-top: 6px;
}

.error-summary li a {
    display: inline-block;
    min-height: 24px;
    padding: 3px 0;
    line-height: 18px;
}

.verified-account {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 22px 0;
    border: 1px solid rgb(54 132 107 / 22%);
    border-radius: 10px;
    background: var(--success-light);
    gap: 11px;
}

.verified-account > span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--success);
    font-weight: 800;
}

.verified-account p {
    display: grid;
    margin: 0;
}

.verified-account strong {
    color: var(--navy);
    font-size: 12px;
}

.verified-account small {
    color: var(--muted);
    font-size: 10px;
}

.back-link {
    margin: 27px 0 0;
    text-align: center;
}

.back-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 12px;
    font-weight: 600;
    gap: 7px;
}

.state-page {
    width: min(100%, 760px);
    padding: 52px clamp(24px, 7vw, 70px);
    margin: 8px auto 0;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 0, rgb(191 227 216 / 30%), transparent 15rem),
        var(--white);
    box-shadow: var(--shadow);
    text-align: center;
}

.state-page--success {
    border-color: rgb(54 132 107 / 25%);
}

.state-page .eyebrow {
    justify-content: center;
    margin-top: 17px;
}

.state-page h1 {
    margin-bottom: 13px;
    font-size: clamp(36px, 5vw, 50px);
}

.state-page__lead {
    max-width: 580px;
    margin: 0 auto 26px;
    color: var(--muted);
    font-size: 15px;
}

.state-icon {
    position: relative;
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    color: var(--white);
    font-size: 27px;
    font-weight: 700;
}

.state-icon--success {
    background: var(--teal);
    box-shadow: 0 0 0 11px var(--mint-light);
}

.state-icon--warning {
    color: var(--danger);
    background: var(--danger-light);
    box-shadow: 0 0 0 11px rgb(255 240 236 / 55%);
}

.state-icon--neutral {
    color: var(--navy);
    background: var(--sand-light);
    box-shadow: 0 0 0 11px rgb(247 241 230 / 55%);
}

.state-icon--mail {
    background: var(--teal);
    box-shadow: 0 0 0 11px var(--mint-light);
}

.state-icon--mail i {
    position: relative;
    width: 31px;
    height: 22px;
    border: 2px solid var(--white);
    border-radius: 4px;
}

.state-icon--mail i::before,
.state-icon--mail i::after {
    position: absolute;
    top: 4px;
    width: 19px;
    border-top: 2px solid var(--white);
    content: "";
}

.state-icon--mail i::before {
    left: -1px;
    transform: rotate(34deg);
}

.state-icon--mail i::after {
    right: -1px;
    transform: rotate(-34deg);
}

.appointment-ticket {
    overflow: hidden;
    margin: 29px 0 22px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--paper);
    text-align: left;
}

.appointment-ticket__date {
    display: flex;
    align-items: center;
    padding: 18px 21px;
    border-bottom: 1px solid var(--line);
    background: var(--mint-faint);
    gap: 13px;
}

.appointment-ticket__date p {
    display: grid;
    margin: 0;
}

.appointment-ticket__date small,
.appointment-ticket dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.appointment-ticket__date strong {
    color: var(--navy);
    font-family: var(--serif);
    font-size: 19px;
}

.appointment-ticket__date p > span {
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 700;
}

.appointment-ticket dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    margin: 0;
}

.appointment-ticket dl > div {
    padding: 15px 18px;
    border-right: 1px solid var(--line);
}

.appointment-ticket dl > div:last-child {
    border-right: 0;
}

.appointment-ticket dt,
.appointment-ticket dd {
    margin: 0;
}

.appointment-ticket dd {
    margin-top: 3px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 700;
}

.state-note {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 560px;
    padding: 12px 15px;
    margin: 0 auto 23px;
    border: 1px solid rgb(54 132 107 / 20%);
    border-radius: 9px;
    color: var(--success);
    background: var(--success-light);
    font-size: 11px;
    gap: 10px;
}

.state-note > span:first-child {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--white);
    background: var(--success);
    font-size: 10px;
    font-weight: 800;
}

.state-note p {
    display: grid;
    margin: 0;
    text-align: left;
}

.state-note small {
    color: var(--muted);
    font-size: 9px;
}

.state-note--info {
    border-color: rgb(13 116 114 / 17%);
    color: var(--navy);
    background: var(--mint-faint);
}

.state-note--info > span:first-child {
    background: var(--teal);
}

.state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.mail-steps {
    display: grid;
    margin: 27px 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    text-align: left;
}

.mail-steps > div {
    display: flex;
    align-items: center;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
}

.mail-steps > div:last-child {
    border-bottom: 0;
}

.mail-steps > div > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--white);
    background: var(--navy);
    font-size: 11px;
    font-weight: 700;
}

.mail-steps p {
    display: grid;
    margin: 0;
}

.mail-steps strong {
    color: var(--navy);
    font-size: 12px;
}

.mail-steps small {
    color: var(--muted);
    font-size: 10px;
}

.appointment-section {
    margin-top: 10px;
}

.appointment-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3px 12px;
    border-bottom: 1px solid var(--line);
}

.appointment-section__heading h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.appointment-section__heading > span {
    color: var(--muted);
    font-size: 11px;
}

.appointment-list {
    display: grid;
    padding: 0;
    margin: 14px 0 0;
    gap: 13px;
    list-style: none;
}

.appointment {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr) auto;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
    gap: 21px;
}

.appointment__date {
    display: grid;
    min-height: 84px;
    place-items: center;
    align-content: center;
    border-radius: 12px;
    color: var(--teal-dark);
    background: var(--mint-light);
}

.appointment__date span {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.appointment__date strong {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 500;
}

.appointment__body {
    min-width: 0;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--success);
    background: var(--success-light);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    gap: 5px;
}

.status-pill i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--success);
}

.appointment-when {
    margin: 7px 0 2px;
    color: var(--muted);
    font-size: 10px;
}

.appointment-what {
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-doctor,
.appointment-where {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.appointment-where span {
    color: var(--teal);
}

.appointment-deadline {
    display: flex;
    align-items: flex-start;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 9px;
    gap: 6px;
}

.appointment-deadline > span:first-child {
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    font-size: 8px;
    font-weight: 700;
}

.appointment-actions {
    display: grid;
    min-width: 170px;
    gap: 8px;
}

.appointment-actions form {
    margin: 0;
}

.appointment-actions .button-secondary,
.appointment-actions .button-danger {
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 10px;
}

.empty-state {
    display: grid;
    justify-items: center;
    text-align: center;
}

.empty-state--appointments {
    padding: 62px 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.empty-state--appointments h2 {
    margin: 18px 0 6px;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.empty-state--appointments > p {
    max-width: 490px;
    color: var(--muted);
    font-size: 13px;
}

.booking-footer {
    position: relative;
    border-top: 1px solid var(--line);
    background: linear-gradient(110deg, #edf6f2, var(--cream) 62%);
}

.booking-footer::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal) 0 42%, var(--mint) 42% 73%, var(--coral) 73%);
    content: "";
}

.booking-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: min(calc(100% - 48px), var(--shell));
    padding: 30px 0 24px;
    margin: 0 auto;
    gap: 22px 40px;
}

.booking-footer__inner > div > p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.booking-footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    gap: 8px;
    list-style: none;
}

.booking-footer li {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgb(255 255 255 / 50%);
    font-size: 9px;
}

.booking-footer li span {
    color: var(--teal);
}

.booking-footer__legal {
    grid-column: 1 / -1;
    padding-top: 14px;
    margin: 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 9px;
}

.home-page {
    background: var(--cream);
}

.home-header .site-header__inner {
    width: min(calc(100% - 48px), 1240px);
}

.home-nav {
    display: flex;
    align-self: stretch;
    gap: 36px;
}

.home-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.home-nav a:first-child::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--coral);
    content: "";
}

.home-nav a:hover {
    color: var(--teal);
}

.home-login {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 18px;
    border-radius: 9px;
    color: var(--white);
    background: var(--teal);
    box-shadow: 0 8px 20px rgb(13 116 114 / 18%);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    gap: 12px;
}

.home-login:hover {
    color: var(--white);
    background: var(--teal-dark);
}

.home-hero {
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 72% 50%, rgb(13 116 114 / 48%), transparent 26rem),
        linear-gradient(120deg, var(--navy-deep), var(--navy));
}

.home-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr);
    width: min(calc(100% - 48px), 1240px);
    min-height: 620px;
    margin: 0 auto;
}

.home-hero__copy {
    position: relative;
    z-index: 3;
    align-self: center;
    padding: 68px 0 76px;
}

.home-eyebrow {
    display: flex;
    align-items: center;
    margin-bottom: 19px;
    color: var(--mint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.home-eyebrow > span {
    width: 24px;
    margin-right: 10px;
    border-top: 1px solid var(--mint);
}

.home-hero h1 {
    max-width: 690px;
    margin-bottom: 24px;
    color: var(--white);
    font-family: var(--serif);
    font-size: clamp(46px, 5.2vw, 66px);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.04;
}

.home-hero h1 em {
    color: var(--coral);
    font-weight: 500;
}

.home-hero__copy > p:not(.home-eyebrow) {
    max-width: 650px;
    margin-bottom: 29px;
    color: rgb(255 255 255 / 70%);
    font-size: 16px;
    line-height: 1.7;
}

.home-search {
    display: grid;
    grid-template-columns: 1fr .82fr auto;
    width: min(100%, 760px);
    min-height: 84px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 13px;
    background: var(--white);
    box-shadow: 0 24px 60px rgb(0 0 0 / 24%);
}

.home-search > div {
    display: grid;
    align-content: center;
    padding: 14px 22px;
    border-right: 1px solid var(--line);
}

.home-search label {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-search input {
    width: 100%;
    margin-top: 3px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--navy);
    background: transparent;
    font-size: 15px;
    font-weight: 750;
}

.home-search > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 174px;
    min-height: 56px;
    margin: 7px;
    padding: 10px 17px;
    border: 0;
    border-radius: 9px;
    color: var(--white);
    background: var(--coral-strong);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    gap: 14px;
    cursor: pointer;
}

.home-search > button:hover {
    color: var(--white);
    background: var(--coral-strong-hover);
}

.home-search__pending {
    display: inline-flex;
    align-items: center;
    padding: 16px;
    color: var(--muted);
    background: var(--sand-light);
    font-size: 11px;
    font-weight: 700;
}

.home-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 18px;
    color: rgb(255 255 255 / 60%);
    font-size: 10px;
    gap: 8px;
}

.home-popular > a {
    padding: 6px 11px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    color: rgb(255 255 255 / 78%);
    text-decoration: none;
}

.home-popular > a:hover {
    border-color: rgb(255 255 255 / 38%);
    color: var(--white);
}

.home-hero-image {
    position: relative;
    align-self: end;
    width: min(100%, 430px);
    height: 510px;
    overflow: hidden;
    margin: 38px 0 0 auto;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 180px 180px 20px 20px;
    background: var(--teal-dark);
    box-shadow: 0 28px 70px rgb(0 0 0 / 27%);
}

.home-hero-image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 68%, rgb(9 34 45 / 18%));
    content: "";
    pointer-events: none;
}

.home-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
}

.home-trust {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, .7fr) 1.35fr;
    width: min(calc(100% - 48px), 1240px);
    min-height: 108px;
    padding: 0 26px;
    margin: -1px auto 0;
    border-bottom: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.home-trust > div {
    display: grid;
    align-content: center;
    padding: 16px 24px;
    border-right: 1px solid var(--line);
}

.home-trust > div > strong {
    color: var(--navy);
    font-size: 18px;
    font-weight: 750;
}

.home-trust > div > span {
    color: var(--muted);
    font-size: 10px;
}

.home-trust__privacy {
    display: flex !important;
    align-items: center;
    border-right: 0 !important;
    background: var(--mint-faint);
    gap: 12px;
}

.home-trust__privacy p {
    display: grid;
    margin: 0;
}

.home-trust__privacy p strong {
    color: var(--navy);
    font-size: 11px;
}

.home-trust__privacy p span {
    color: var(--muted);
    font-size: 9px;
}

.home-section {
    width: min(calc(100% - 48px), 1120px);
    padding: 100px 0 80px;
    margin: 0 auto;
}

.home-section__intro {
    max-width: 650px;
    margin-bottom: 45px;
}

.home-section__eyebrow {
    margin-bottom: 9px;
    color: var(--teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.home-section__intro h2,
.home-practice h2 {
    margin-bottom: 13px;
    font-family: var(--serif);
    font-size: clamp(32px, 4.2vw, 46px);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.12;
}

.home-section__intro > p:last-child,
.home-practice > p:not(.home-section__eyebrow) {
    color: var(--muted);
    font-size: 15px;
}

.home-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
    margin: 0;
    gap: 18px;
    list-style: none;
}

.home-steps li {
    min-height: 230px;
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.home-steps li > span {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin-bottom: 34px;
    border-radius: 10px;
    color: var(--white);
    background: var(--navy);
    font-size: 10px;
    font-weight: 800;
}

.home-steps li:nth-child(2) > span {
    background: var(--teal);
}

/* This badge carries the step NUMBER in white, so it is a text surface — the
   one coral fill on the landing page that looked decorative and is not. */
.home-steps li:nth-child(3) > span {
    background: var(--coral-strong);
}

.home-steps h3 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.home-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.home-demo {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: min(calc(100% - 48px), 1120px);
    padding: 28px 30px;
    margin: 0 auto 92px;
    border: 1px solid rgb(13 116 114 / 20%);
    border-radius: 20px;
    background: linear-gradient(120deg, var(--white), var(--mint-faint));
    box-shadow: var(--shadow);
    gap: 30px;
}

.home-demo__identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.home-demo__avatar {
    position: relative;
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--white);
    background: var(--teal);
    font-family: var(--serif);
    font-size: 25px;
}

.home-demo__avatar span {
    position: absolute;
    right: -1px;
    bottom: 2px;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 3px solid var(--white);
    border-radius: 50%;
    color: var(--white);
    background: var(--success);
    font-family: var(--sans);
    font-size: 8px;
}

.home-demo__identity p {
    margin: 0 0 2px;
    color: var(--teal);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
}

.home-demo__identity h2 {
    margin: 0 0 3px;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.home-demo__identity > div:last-child > span {
    color: var(--muted);
    font-size: 11px;
}

.home-demo__booking {
    display: flex;
    align-items: center;
    gap: 22px;
}

.home-demo__booking > span:first-child {
    display: grid;
    min-width: 160px;
}

.home-demo__booking small {
    color: var(--muted);
    font-size: 9px;
}

.home-demo__booking strong {
    color: var(--navy);
    font-size: 12px;
}

.home-demo__pending {
    max-width: 230px;
    color: var(--muted);
    font-size: 10px;
}

.home-practice {
    padding: 90px max(24px, calc((100vw - 1120px) / 2));
    color: var(--white);
    background:
        radial-gradient(circle at 84% 20%, rgb(13 116 114 / 58%), transparent 24rem),
        var(--navy);
}

.home-practice .home-section__eyebrow {
    color: var(--mint);
}

.home-practice h2 {
    max-width: 680px;
    color: var(--white);
}

.home-practice > p:not(.home-section__eyebrow) {
    max-width: 620px;
    color: rgb(255 255 255 / 67%);
}

.home-practice .button-secondary {
    margin-top: 12px;
    border-color: rgb(255 255 255 / 24%);
    color: var(--navy);
}

/* Public doctor directory -------------------------------------------------- */

.directory-page {
    background:
        radial-gradient(circle at 7% 3%, rgb(191 227 216 / 33%), transparent 25rem),
        var(--cream);
}

.directory-shell {
    width: min(calc(100% - 48px), 1180px);
    margin-right: auto;
    margin-left: auto;
}

.directory-header {
    position: sticky;
    top: 0;
}

.directory-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 29px;
}

.directory-nav a {
    position: relative;
    padding: 31px 0 28px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.directory-nav a:hover {
    color: var(--teal);
}

.directory-nav a[aria-current="page"]::after {
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: var(--coral);
    content: "";
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 25px 0;
    color: var(--muted);
    font-size: 11px;
    gap: 9px;
}

.breadcrumbs a {
    color: var(--teal-dark);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.directory-search-hero {
    overflow: hidden;
    padding-bottom: 40px;
    color: var(--white);
    background:
        radial-gradient(circle at 86% 13%, rgb(20 145 139 / 48%), transparent 23rem),
        linear-gradient(122deg, var(--navy-deep), var(--navy));
}

.directory-search-hero .breadcrumbs {
    color: rgb(255 255 255 / 55%);
}

.directory-search-hero .breadcrumbs a {
    color: rgb(255 255 255 / 78%);
}

.directory-search-hero__copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: end;
    margin: 13px 0 28px;
    gap: 50px;
}

.directory-search-hero__copy h1 {
    max-width: 720px;
    margin-bottom: 0;
    color: var(--white);
    font-family: var(--serif);
    font-size: clamp(38px, 4.4vw, 52px);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.08;
}

.directory-search-hero__copy > p {
    margin-bottom: 4px;
    color: rgb(255 255 255 / 68%);
    font-size: 14px;
}

.directory-search-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(190px, 1fr) minmax(160px, .8fr) auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.directory-search-form--compact {
    box-shadow: 0 24px 70px rgb(0 0 0 / 24%);
}

.directory-search-form__field {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 84px;
    padding: 13px 22px 11px 52px;
    border-right: 1px solid var(--line);
}

.directory-search-form__field > span {
    position: absolute;
    top: 29px;
    left: 22px;
    display: grid;
    width: 21px;
    height: 21px;
    border: 1px solid var(--mint);
    border-radius: 7px;
    color: var(--teal);
    background: var(--mint-light);
    font-size: 14px;
    font-weight: 800;
    place-items: center;
}

.directory-search-form label {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.directory-search-form input,
.directory-search-form select {
    width: 100%;
    min-width: 0;
    padding: 3px 0 0;
    border: 0;
    outline: 0;
    color: var(--navy);
    background: transparent;
    font-size: 14px;
    font-weight: 700;
}

.directory-search-form__field--select {
    padding-left: 22px;
}

.directory-search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 142px;
    margin: 8px;
    padding: 12px 21px;
    border: 0;
    border-radius: 10px;
    color: var(--white);
    background: var(--coral-strong);
    font-size: 12px;
    font-weight: 800;
    gap: 14px;
    cursor: pointer;
}

.directory-search-form button:hover {
    background: var(--coral-strong-hover);
}

.directory-results-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    padding: 46px 0 84px;
    gap: 36px;
}

.directory-filters {
    position: sticky;
    top: 112px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.directory-filters__heading {
    display: flex;
    align-items: center;
    padding: 20px 21px;
    border-bottom: 1px solid var(--line);
    gap: 10px;
}

.directory-filters__heading > span {
    display: grid;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--teal-dark);
    background: var(--mint-light);
    font-weight: 800;
    place-items: center;
}

.directory-filters h2 {
    margin: 0;
    font-size: 16px;
}

.directory-filters dl {
    margin: 0;
}

.directory-filters dl > div {
    padding: 17px 21px;
    border-bottom: 1px solid var(--line);
}

.directory-filters dt {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.directory-filters dd {
    margin: 0;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.directory-filter-form {
    display: grid;
    padding: 18px 21px;
    border-bottom: 1px solid var(--line);
    gap: 9px;
}

.directory-filter-form > label {
    color: var(--navy-soft);
    font-size: 11px;
    font-weight: 700;
}

.directory-filter-form > label:has(input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.directory-filter-form select,
.directory-filter-form > button {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--white);
}

.directory-filter-form > button[type="submit"] {
    border-color: var(--teal-dark);
    color: var(--white);
    background: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.directory-filter-form .directory-location-button {
    color: var(--teal-dark);
    background: var(--mint-faint);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.directory-location-status {
    min-height: 0;
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.directory-location-status:empty {
    display: none;
}

.directory-filter-reset {
    display: block;
    padding: 15px 21px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 750;
}

.directory-filter-note {
    display: flex;
    padding: 18px 20px;
    color: var(--muted);
    background: var(--mint-faint);
    gap: 11px;
}

.directory-filter-note .trust-lock {
    flex: 0 0 auto;
    margin-top: 4px;
}

.directory-filter-note p {
    display: grid;
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
    gap: 2px;
}

.directory-filter-note strong {
    color: var(--navy);
    font-size: 11px;
}

.directory-results__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    min-height: 67px;
    margin-bottom: 20px;
    gap: 24px;
}

.directory-results__heading h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -.015em;
}

/* The active-filter chips. They moved from a paragraph of spans to a named list
   so assistive technology announces them AS the active filters and counts them;
   the appearance is unchanged. */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0;
    margin: 0 0 4px;
    list-style: none;
    gap: 7px;
}

.active-filters li {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--teal-dark);
    background: var(--mint-light);
    font-size: 10px;
    font-weight: 750;
}

.directory-map-view {
    margin-bottom: 18px;
    border: 1px solid var(--mint);
    border-radius: 14px;
    background: var(--mint-faint);
}

.directory-map-view summary {
    min-height: 48px;
    padding: 13px 17px;
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.directory-map-view > p {
    padding: 0 17px;
    color: var(--muted);
    font-size: 11px;
}

.directory-map-view ol {
    display: grid;
    padding: 0 17px 17px 37px;
    gap: 10px;
}

.directory-map-view li {
    padding-left: 4px;
    font-size: 11px;
}

.directory-map-view li strong,
.directory-map-view li span,
.directory-map-view li a {
    display: block;
}

.doctor-result-list {
    display: grid;
    gap: 15px;
}

.doctor-result-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 218px;
    align-items: center;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
    gap: 22px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.doctor-result-card:hover {
    border-color: var(--mint);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.doctor-result-card__avatar,
.doctor-profile-avatar {
    position: relative;
    display: grid;
    overflow: visible;
    border: 4px solid var(--white);
    border-radius: 26px 26px 46px 46px;
    color: var(--white);
    background:
        radial-gradient(circle at 50% 28%, rgb(255 255 255 / 14%), transparent 24px),
        linear-gradient(155deg, #168d88, var(--teal-dark));
    box-shadow: 0 12px 30px rgb(7 90 91 / 22%);
    place-items: center;
}

.doctor-result-card__avatar {
    width: 80px;
    height: 96px;
}

.doctor-result-card__avatar > span,
.doctor-profile-avatar > span {
    font-family: var(--serif);
    font-size: 29px;
    letter-spacing: -.04em;
}

.doctor-result-card__avatar > i,
.doctor-profile-avatar > i {
    position: absolute;
    right: -7px;
    bottom: -5px;
    display: grid;
    width: 25px;
    height: 25px;
    border: 3px solid var(--paper);
    border-radius: 50%;
    color: var(--white);
    background: var(--success);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    place-items: center;
}

.doctor-result-card__topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 2px;
    gap: 10px;
}

.doctor-result-card__topline p {
    margin: 0;
    color: var(--teal);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.doctor-result-card__topline > span {
    color: var(--success);
    font-size: 9px;
    font-weight: 750;
}

.doctor-result-card__topline i {
    font-style: normal;
}

.doctor-result-card h3 {
    margin-bottom: 1px;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.doctor-result-card h3 a {
    color: var(--navy);
    text-decoration: none;
}

.doctor-result-card h3 a:hover {
    color: var(--teal);
}

.doctor-result-card__practice {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
}

.doctor-result-card__address {
    margin-bottom: 11px;
    color: var(--navy-soft);
    font-size: 11px;
}

.doctor-result-card__address span {
    margin-right: 5px;
    /* 2.56:1 as `--coral` on white. Decorative, but a glyph nobody can see is
       not decoration either — it is a smudge next to an address. */
    color: var(--coral-strong);
}

.doctor-tags,
.fact-chips,
.fact-list,
.profile-services {
    padding: 0;
    margin: 0;
    list-style: none;
}

.doctor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.doctor-tags li {
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--white);
    font-size: 9px;
    font-weight: 700;
}

.doctor-result-card__actions {
    display: grid;
    align-self: stretch;
    align-content: center;
    padding-left: 22px;
    border-left: 1px solid var(--line);
    text-align: center;
    gap: 9px;
}

.doctor-result-card__actions p {
    display: grid;
    margin: 0 0 3px;
    gap: 2px;
}

.doctor-result-card__actions small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.doctor-result-card__actions strong {
    color: var(--success);
    font-size: 11px;
}

.doctor-result-card__actions .button-primary {
    min-height: 47px;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 11px;
}

.doctor-profile-link {
    color: var(--teal-dark);
    font-size: 10px;
    font-weight: 750;
}

.directory-empty {
    display: grid;
    min-height: 360px;
    padding: 55px 30px;
    border: 1px dashed var(--mint);
    border-radius: 18px;
    background: var(--paper);
    text-align: center;
    place-items: center;
}

.directory-empty > span,
.directory-not-found > span {
    display: grid;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    color: var(--teal);
    background: var(--mint-light);
    font-family: var(--serif);
    font-size: 35px;
    place-items: center;
}

.directory-empty h3 {
    max-width: 550px;
    margin: 20px 0 7px;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.directory-empty p {
    max-width: 510px;
    color: var(--muted);
    font-size: 13px;
}

.directory-transparency {
    display: flex;
    align-items: flex-start;
    padding: 18px 20px;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--muted);
    background: var(--sand-light);
    font-size: 10px;
    gap: 12px;
}

.directory-transparency > span {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--white);
    background: var(--navy);
    font-family: var(--serif);
    font-weight: 800;
    place-items: center;
}

.directory-transparency p {
    margin: 2px 0 0;
}

.directory-transparency strong {
    color: var(--navy);
}

/* Doctor profile ---------------------------------------------------------- */

.doctor-breadcrumbs {
    padding-bottom: 18px;
}

.doctor-profile-hero {
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 88% 22%, rgb(20 145 139 / 50%), transparent 25rem),
        linear-gradient(122deg, var(--navy-deep), var(--navy));
}

.doctor-profile-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    align-items: center;
    min-height: 375px;
    padding: 52px 0;
    gap: 62px;
}

.doctor-profile-identity {
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr);
    align-items: center;
    gap: 34px;
}

.doctor-profile-avatar {
    width: 154px;
    height: 194px;
    border-width: 6px;
    border-radius: 48px 48px 80px 80px;
    box-shadow: 0 25px 55px rgb(0 0 0 / 30%);
}

.doctor-profile-avatar > span {
    font-size: 54px;
}

.doctor-profile-avatar > i {
    right: 2px;
    bottom: 1px;
    width: 34px;
    height: 34px;
    border-color: var(--navy);
    font-size: 14px;
}

.doctor-profile-identity h1 {
    margin: 7px 0 8px;
    color: var(--white);
    font-family: var(--serif);
    font-size: clamp(40px, 4.6vw, 56px);
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.06;
}

.doctor-profile-identity__practice {
    margin-bottom: 6px;
    color: rgb(255 255 255 / 77%);
    font-size: 15px;
    font-weight: 700;
}

.doctor-profile-identity__address {
    margin-bottom: 18px;
    color: rgb(255 255 255 / 60%);
    font-size: 12px;
}

.doctor-profile-identity__address span {
    margin-right: 6px;
    color: var(--coral);
}

.doctor-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.doctor-profile-badges > span {
    padding: 6px 10px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 999px;
    color: rgb(255 255 255 / 76%);
    background: rgb(255 255 255 / 6%);
    font-size: 9px;
    font-weight: 750;
}

.doctor-profile-badges > .is-verified {
    border-color: rgb(191 227 216 / 30%);
    color: var(--mint);
    background: rgb(13 116 114 / 22%);
}

.doctor-profile-badges i {
    margin-right: 3px;
    font-style: normal;
}

.profile-booking-card {
    padding: 27px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 19px;
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 28px 70px rgb(0 0 0 / 28%);
}

.profile-booking-card h2 {
    margin: 6px 0 9px;
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.profile-booking-card > p:not(.home-section__eyebrow) {
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 11px;
}

.profile-booking-card__availability {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 11px;
    background: var(--success-light);
    gap: 10px;
}

.profile-booking-card__availability > span {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px rgb(54 132 107 / 12%);
}

.profile-booking-card__availability p {
    display: grid;
    margin: 0;
    gap: 1px;
}

.profile-booking-card__availability small {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.profile-booking-card__availability strong {
    color: var(--success);
    font-size: 11px;
}

.profile-booking-card > .button-primary {
    width: 100%;
}

.profile-booking-card > small {
    display: block;
    margin-top: 9px;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}

.doctor-profile-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    padding: 64px 0 95px;
    gap: 56px;
}

.doctor-profile-main {
    display: grid;
    gap: 30px;
}

.profile-section {
    padding: 34px 36px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.profile-section h2 {
    margin: 5px 0 18px;
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.profile-section__lead {
    max-width: 750px;
    margin-bottom: 0;
    color: var(--navy-soft);
    font-size: 16px;
    line-height: 1.8;
}

.profile-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.profile-section__heading > span {
    display: grid;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 15px;
    color: var(--teal);
    background: var(--mint-light);
    font-family: var(--serif);
    font-size: 28px;
    place-items: center;
}

.profile-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}

.profile-services li {
    display: flex;
    align-items: center;
    min-height: 47px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--navy);
    background: var(--mint-faint);
    font-size: 12px;
    font-weight: 700;
    gap: 9px;
}

.profile-services li span {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--white);
    background: var(--teal);
    font-size: 9px;
    place-items: center;
}

.profile-practice-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 18px;
}

.profile-address-card {
    display: flex;
    min-height: 180px;
    align-items: flex-end;
    padding: 23px;
    border-radius: 14px;
    color: var(--white);
    background:
        radial-gradient(circle at 78% 20%, rgb(255 255 255 / 14%), transparent 8rem),
        linear-gradient(150deg, var(--teal), var(--navy));
    gap: 12px;
}

.profile-address-card > span {
    display: grid;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    border-radius: 10px;
    color: var(--navy);
    background: var(--coral);
    font-weight: 900;
    place-items: center;
}

.profile-address-card p {
    display: grid;
    margin: 0;
    gap: 2px;
}

.profile-address-card strong {
    font-size: 13px;
}

.profile-address-card p span {
    color: rgb(255 255 255 / 68%);
    font-size: 10px;
}

.profile-opening-hours {
    padding: 19px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.profile-opening-hours h3 {
    margin-bottom: 11px;
    font-size: 15px;
}

.profile-opening-hours dl {
    margin: 0 0 12px;
}

.profile-opening-hours dl > div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    gap: 20px;
}

.profile-opening-hours dd {
    margin: 0;
    color: var(--navy);
    font-weight: 750;
}

.profile-opening-hours > small {
    color: var(--muted);
    font-size: 9px;
}

.doctor-profile-facts {
    position: sticky;
    top: 112px;
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
}

.doctor-profile-facts > section {
    padding: 23px;
    border-bottom: 1px solid var(--line);
}

.doctor-profile-facts > section:last-child {
    border-bottom: 0;
}

.doctor-profile-facts h2 {
    margin-bottom: 12px;
    font-size: 15px;
}

.doctor-profile-facts section > p {
    display: grid;
    margin-bottom: 11px;
    color: var(--navy);
    font-size: 11px;
    gap: 3px;
}

.fact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fact-chips li {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--teal-dark);
    background: var(--mint-light);
    font-size: 9px;
    font-weight: 800;
}

.fact-list {
    display: grid;
    gap: 8px;
}

.fact-list li {
    color: var(--navy-soft);
    font-size: 11px;
}

.fact-list li span {
    margin-right: 7px;
    /* The bullet in front of every fact on a doctor's profile: 2.56:1 as
       `--coral` on white. */
    color: var(--coral-strong);
    font-size: 7px;
}

.doctor-profile-facts > .doctor-profile-facts__safety {
    display: flex;
    padding: 20px 22px;
    color: var(--muted);
    background: var(--mint-faint);
    gap: 11px;
}

.doctor-profile-facts__safety .trust-lock {
    flex: 0 0 auto;
    margin-top: 3px;
}

.doctor-profile-facts__safety p {
    margin: 0;
    line-height: 1.5;
}

.doctor-profile-facts__safety strong {
    font-size: 11px;
}

.doctor-profile-facts__safety p span {
    color: var(--muted);
    font-size: 9px;
}

.profile-sticky-cta {
    display: none;
}

.directory-not-found {
    display: grid;
    min-height: 620px;
    align-content: center;
    justify-items: center;
    padding: 80px 24px;
    text-align: center;
}

.directory-not-found .home-section__eyebrow {
    margin: 20px 0 6px;
}

.directory-not-found h1 {
    margin-bottom: 10px;
    font-family: var(--serif);
    font-size: clamp(43px, 6vw, 64px);
    font-weight: 500;
}

.directory-not-found > p:not(.home-section__eyebrow) {
    max-width: 570px;
    margin-bottom: 25px;
    color: var(--muted);
}

@media (max-width: 980px) {
    .home-nav {
        gap: 18px;
    }

    .home-hero__inner {
        grid-template-columns: 1fr;
    }

    .home-hero__copy {
        padding-bottom: 38px;
    }

    .home-hero-image {
        width: min(100%, 620px);
        height: 470px;
        margin: 0 auto;
        border-radius: 180px 180px 18px 18px;
    }

    .home-trust {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-trust > div:nth-child(2) {
        border-right: 0;
    }

    .home-trust > div {
        border-bottom: 1px solid var(--line);
    }

    .home-trust > div:nth-child(n + 3) {
        border-bottom: 0;
    }

    .home-demo {
        grid-template-columns: 1fr;
    }

    .home-demo__booking {
        justify-content: space-between;
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }

    .calendar__workspace {
        grid-template-columns: 1fr;
    }

    .slot-panel {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .slot-placeholder {
        min-height: 160px;
    }

    .slots {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .details-layout {
        grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
    }

    .appointment {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .appointment-actions {
        grid-column: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .directory-nav {
        gap: 17px;
    }

    .directory-search-form {
        grid-template-columns: 1fr 1fr;
    }

    .directory-search-form__field:nth-child(2) {
        border-right: 0;
    }

    .directory-search-form__field--select {
        border-top: 1px solid var(--line);
    }

    .directory-search-form button {
        min-height: 60px;
        margin: 8px;
    }

    .doctor-result-card {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .doctor-result-card__actions {
        grid-column: 2;
        grid-template-columns: minmax(145px, 1fr) minmax(170px, auto) auto;
        align-items: center;
        padding: 15px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
        text-align: left;
    }

    .doctor-profile-hero__inner {
        grid-template-columns: minmax(0, 1fr) 315px;
        gap: 34px;
    }

    .doctor-profile-identity {
        grid-template-columns: 115px minmax(0, 1fr);
        gap: 25px;
    }

    .doctor-profile-avatar {
        width: 112px;
        height: 152px;
    }

    .doctor-profile-avatar > span {
        font-size: 40px;
    }

    .doctor-profile-content {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 30px;
    }

    .profile-practice-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .home-nav,
    .directory-nav {
        display: none;
    }

    .home-hero__inner,
    .home-trust,
    .home-section,
    .home-demo {
        width: min(calc(100% - 32px), 1120px);
    }

    .home-hero h1 {
        font-size: clamp(42px, 11vw, 54px);
    }

    .home-search {
        grid-template-columns: 1fr 1fr;
    }

    .home-search > button,
    .home-search__pending {
        grid-column: 1 / -1;
        min-height: 54px;
        margin: 0;
        border-radius: 0;
    }

    .home-steps {
        grid-template-columns: 1fr;
    }

    .home-steps li {
        min-height: 0;
    }

    .home-demo__booking {
        display: grid;
    }

    .site-header__inner,
    .booking-shell,
    .booking-footer__inner {
        width: min(calc(100% - 32px), var(--shell));
    }

    .booking-shell {
        padding-top: 24px;
    }

    .brand__claim,
    .site-header__trust small {
        display: none;
    }

    .site-header__actions {
        gap: 12px;
    }

    .booking-steps {
        margin-bottom: 33px;
    }

    .booking-hero,
    .booking-hero--appointments {
        display: grid;
        align-items: start;
        gap: 20px;
    }

    .booking-hero h1 {
        font-size: clamp(35px, 10vw, 48px);
    }

    .service-summary {
        width: 100%;
        max-width: none;
    }

    .calendar__months {
        grid-template-columns: 1fr;
    }

    .calendar__month--second {
        display: none;
    }

    .calendar__date-panel,
    .slot-panel {
        padding: 22px 18px;
    }

    .booking-assurance {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .booking-assurance > div {
        padding: 0;
        border-right: 0;
    }

    .details-layout {
        grid-template-columns: 1fr;
    }

    .reservation-column {
        position: static;
        grid-template-columns: 1fr 1fr;
    }

    .privacy-note {
        grid-column: 1 / -1;
    }

    .error-summary {
        margin-left: 0;
    }

    .appointment-ticket dl {
        grid-template-columns: 1fr;
    }

    .appointment-ticket dl > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .appointment-ticket dl > div:last-child {
        border-bottom: 0;
    }

    .booking-footer__inner {
        grid-template-columns: 1fr;
    }

    .booking-footer ul {
        justify-content: flex-start;
    }

    .directory-shell {
        width: min(calc(100% - 32px), 1180px);
    }

    .directory-search-hero__copy {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .directory-search-hero__copy > p {
        max-width: 520px;
    }

    .directory-results-shell {
        grid-template-columns: 1fr;
        padding-top: 28px;
        gap: 24px;
    }

    .directory-filters {
        position: static;
    }

    .directory-filters dl {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .directory-filters dl > div {
        border-right: 1px solid var(--line);
    }

    .directory-filters dl > div:last-child {
        border-right: 0;
    }

    .directory-filter-note {
        display: none;
    }

    .doctor-profile-hero__inner {
        grid-template-columns: 1fr;
        padding: 42px 0;
    }

    .profile-booking-card {
        width: 100%;
    }

    .doctor-profile-content {
        grid-template-columns: 1fr;
        padding-top: 35px;
    }

    .doctor-profile-facts {
        position: static;
        grid-template-columns: 1fr 1fr;
    }

    .doctor-profile-facts > section {
        border-right: 1px solid var(--line);
    }

    .doctor-profile-facts > .doctor-profile-facts__safety {
        grid-column: 1 / -1;
        border-right: 0;
    }
}

@media (max-width: 560px) {
    .home-header .site-header__inner {
        width: min(calc(100% - 24px), 1240px);
    }

    .home-login {
        min-height: 44px;
        padding: 8px 12px;
        font-size: 10px;
    }

    .home-hero__inner {
        width: min(calc(100% - 24px), 1120px);
        min-height: 0;
    }

    .home-hero__copy {
        padding: 56px 0 32px;
    }

    .home-hero h1 {
        font-size: 40px;
    }

    .home-hero__copy > p:not(.home-eyebrow) {
        font-size: 14px;
    }

    .home-search {
        grid-template-columns: 1fr;
    }

    .home-search > div {
        min-height: 70px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .home-search > button,
    .home-search__pending {
        grid-column: auto;
    }

    .home-hero-image {
        width: 100%;
        height: 390px;
        border-radius: 120px 120px 14px 14px;
    }

    .home-trust {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .home-trust > div,
    .home-trust > div:nth-child(2),
    .home-trust > div:nth-child(n + 3) {
        min-height: 82px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .home-trust > div:last-child {
        border-bottom: 0;
    }

    .home-section {
        padding: 72px 0 62px;
    }

    .home-demo {
        padding: 22px 18px;
        margin-bottom: 70px;
    }

    .home-demo__identity {
        align-items: flex-start;
    }

    .home-demo__avatar {
        width: 55px;
        height: 55px;
    }

    .home-demo__identity h2 {
        font-size: 21px;
    }

    .home-practice {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .site-header__inner {
        min-height: 70px;
    }

    .site-header__trust > span:last-child {
        display: none;
    }

    .site-header__appointments {
        font-size: 10px;
    }

    .booking-shell {
        width: min(calc(100% - 24px), var(--shell));
        padding: 20px 0 58px;
    }

    .booking-steps ol::before {
        top: 15px;
    }

    .booking-steps__number {
        width: 31px;
        height: 31px;
    }

    .booking-steps li {
        font-size: 10px;
    }

    .booking-hero {
        margin-bottom: 23px;
    }

    .booking-hero__lead {
        font-size: 14px;
    }

    .booking-card {
        border-radius: 16px;
    }

    .calendar__header {
        min-height: 78px;
        padding: 16px;
    }

    .calendar__header h2,
    .patient-card__heading h2 {
        font-size: 20px;
    }

    .month-nav__button {
        width: 40px;
        height: 40px;
    }

    .calendar__date-panel {
        padding-right: 12px;
        padding-left: 12px;
    }

    .calendar table {
        border-spacing: 2px;
    }

    .calendar td {
        height: 46px;
    }

    .day {
        min-width: 38px;
        height: 44px;
    }

    .slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reservation-column {
        grid-template-columns: 1fr;
    }

    .privacy-note {
        grid-column: auto;
    }

    .patient-card {
        padding: 22px 18px 24px;
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .state-page {
        padding: 42px 18px;
        border-radius: 18px;
    }

    .state-page h1 {
        font-size: 35px;
    }

    .state-page__lead {
        font-size: 13px;
    }

    .appointment {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 15px;
        gap: 14px;
    }

    .appointment__date {
        min-height: 70px;
    }

    .appointment__date strong {
        font-size: 20px;
    }

    .appointment-what {
        font-size: 18px;
    }

    .appointment-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .booking-footer__inner {
        width: min(calc(100% - 32px), var(--shell));
    }

    .directory-header .site-header__inner {
        width: min(calc(100% - 24px), var(--shell));
    }

    .directory-shell {
        width: min(calc(100% - 24px), 1180px);
    }

    .breadcrumbs {
        padding: 18px 0;
        font-size: 9px;
    }

    .directory-search-hero {
        padding-bottom: 24px;
    }

    .directory-search-hero__copy {
        margin-top: 8px;
    }

    .directory-search-hero__copy h1 {
        font-size: 35px;
    }

    .directory-search-form {
        grid-template-columns: 1fr;
    }

    .directory-search-form__field,
    .directory-search-form__field:nth-child(2),
    .directory-search-form__field--select {
        min-height: 70px;
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .directory-search-form__field > span {
        top: 23px;
    }

    .directory-search-form button {
        min-height: 52px;
        margin: 7px;
    }

    .directory-filters dl {
        grid-template-columns: 1fr;
    }

    .directory-filters dl > div,
    .directory-filters dl > div:last-child {
        border-right: 0;
    }

    .directory-results__heading {
        display: grid;
        align-items: start;
        gap: 10px;
    }

    .directory-results__heading > p {
        justify-content: flex-start;
    }

    .doctor-result-card {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 18px;
        gap: 15px;
    }

    .doctor-result-card__avatar {
        width: 62px;
        height: 76px;
        border-radius: 20px 20px 34px 34px;
    }

    .doctor-result-card__avatar > span {
        font-size: 23px;
    }

    .doctor-result-card h3 {
        font-size: 22px;
    }

    .doctor-result-card__actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .doctor-result-card__actions p {
        text-align: left;
    }

    .doctor-profile-identity {
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: start;
        gap: 18px;
    }

    .doctor-profile-avatar {
        width: 80px;
        height: 106px;
        border-width: 4px;
        border-radius: 27px 27px 44px 44px;
    }

    .doctor-profile-avatar > span {
        font-size: 29px;
    }

    .doctor-profile-avatar > i {
        width: 27px;
        height: 27px;
        font-size: 11px;
    }

    .doctor-profile-identity h1 {
        font-size: 35px;
    }

    .doctor-profile-badges {
        grid-column: 1 / -1;
    }

    .profile-booking-card {
        padding: 22px 19px;
    }

    .doctor-profile-content {
        padding-bottom: 125px;
    }

    .profile-section {
        padding: 25px 20px;
    }

    .profile-section h2 {
        font-size: 24px;
    }

    .profile-section__lead {
        font-size: 17px;
    }

    .profile-services {
        grid-template-columns: 1fr;
    }

    .doctor-profile-facts {
        grid-template-columns: 1fr;
    }

    .doctor-profile-facts > section {
        border-right: 0;
    }

    .doctor-profile-facts > .doctor-profile-facts__safety {
        grid-column: auto;
    }

    .profile-sticky-cta {
        position: fixed;
        z-index: 30;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 13px;
        border-top: 1px solid var(--line);
        background: rgb(252 251 248 / 96%);
        box-shadow: 0 -12px 30px rgb(9 34 45 / 13%);
        backdrop-filter: blur(16px);
        gap: 12px;
    }

    .profile-sticky-cta > span {
        display: grid;
        min-width: 0;
    }

    .profile-sticky-cta small {
        overflow: hidden;
        color: var(--muted);
        font-size: 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-sticky-cta strong {
        overflow: hidden;
        color: var(--navy);
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-sticky-cta .button-primary {
        min-height: 44px;
        padding: 9px 14px;
        font-size: 10px;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body {
        background: var(--white);
    }

    .site-header,
    .booking-footer,
    .booking-steps,
    .appointment-actions,
    .button-primary,
    .button-secondary,
    .button-danger {
        display: none !important;
    }

    .booking-shell {
        width: 100%;
        padding: 0;
    }

    .appointment,
    .appointment-ticket,
    .state-page {
        box-shadow: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   M8 — the WCAG 2.2 criteria docs/15 names explicitly.
   Kept together at the end rather than scattered, because each one is a whole
   criterion rather than a property of one component, and a reviewer asking
   "where is 2.4.11 handled?" should find an answer instead of a search.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 2.4.11 Focus Not Obscured (Minimum) ──────────────────────────────────
   `.directory-header` is `position: sticky; top: 0`, so browser-native
   scroll-into-view happily parks a freshly focused control underneath it. The
   user then presses Tab, hears the next field announced, and sees nothing move.
   scroll-margin-top reserves the header's height plus a little air, which is
   the whole fix — no script, no scroll handler, nothing to get out of sync. */
:root {
    --sticky-header-h: 112px;
}

a,
button,
input,
select,
textarea,
summary,
[tabindex] {
    scroll-margin-top: calc(var(--sticky-header-h) + 16px);
    scroll-margin-bottom: 24px;
}

/* ── 2.5.8 Target Size (Minimum) ──────────────────────────────────────────
   24 CSS px is the AA floor; the primary calls to action keep the 44 px the
   design already used. Applied as a floor rather than a fixed size so a control
   that is already larger is left alone. */
.day,
.slots button,
.month-nav__button,
.filter-chip,
.pagination a,
.row-actions a,
.row-actions button {
    min-width: 24px;
    min-height: 24px;
}

.button-primary,
.button-secondary,
.button-danger,
.slots button,
.month-nav__button {
    min-height: 44px;
}

/* ── 1.4.1 / 1.4.11 under forced colours ──────────────────────────────────
   Windows High Contrast replaces every author colour with a system one, which
   silently deletes any status carried by background alone — the "fully booked"
   stripe and the "selected" fill both vanish. The shapes are re-drawn from
   system colours so the four day states stay distinguishable, and the focus
   ring is made explicit because an outline of `transparent` is a real one. */
@media (forced-colors: active) {
    .day__mark--available {
        forced-color-adjust: none;
        background: CanvasText;
    }

    .day__mark--fully_booked,
    .day__mark--not_bookable,
    .day__mark--past {
        forced-color-adjust: none;
        background: GrayText;
    }

    .day--selected {
        outline: 3px solid Highlight;
        outline-offset: -3px;
    }

    .day--selected::after {
        color: HighlightText;
    }

    :focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 3px;
    }

    /* A disabled control must still LOOK disabled when the system picks the
       colours, and GrayText is the only signal the platform guarantees. */
    .month-nav__button:disabled {
        color: GrayText;
    }
}

/* ── 2.5.7 Dragging Movements ─────────────────────────────────────────────
   Nothing in this application requires a drag: the calendar, the board and the
   filters are all links and buttons. This rule exists to keep it that way — a
   `draggable` element added later will be visibly wrong in review rather than
   quietly shipping a path no keyboard can follow. */
[draggable="true"] {
    outline: 3px dashed #b3261e;
}

/* ── Administration login ──────────────────────────────────────────────── */
.auth-page main {
    display: grid;
    width: 100%;
    min-height: calc(100vh - 84px);
    place-items: center;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    width: calc(100% - 48px);
    max-width: 1040px;
    padding: 64px 0 76px;
    margin-inline: auto;
    gap: clamp(48px, 8vw, 104px);
}

.auth-intro {
    align-self: center;
    max-width: 500px;
}

.auth-eyebrow {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    gap: 9px;
}

.auth-eyebrow span {
    width: 24px;
    height: 2px;
    background: var(--coral-strong);
}

.auth-intro h1 {
    max-width: 620px;
    margin-bottom: 20px;
    font-family: var(--serif);
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.04em;
}

.auth-lead {
    max-width: 500px;
    margin-bottom: 34px;
    color: var(--muted);
    font-size: 17px;
}

.auth-benefits {
    display: grid;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 18px;
}

.auth-benefits li {
    display: flex;
    align-items: flex-start;
    color: var(--muted);
    font-size: 13px;
    gap: 12px;
}

.auth-benefits li > span:first-child {
    display: grid;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--teal-dark);
    background: var(--mint-light);
    font-weight: 800;
}

.auth-benefits strong {
    display: block;
    margin-bottom: 1px;
    color: var(--navy);
    font-size: 14px;
}

.auth-card {
    align-self: center;
    padding: clamp(28px, 5vw, 42px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.auth-card__header {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.auth-card__kicker {
    margin-bottom: 7px;
    color: var(--teal-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.auth-card__header h2 {
    margin-bottom: 7px;
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
}

.auth-card__header > p:last-child,
.auth-card__alternative p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.auth-form .field {
    margin-bottom: 18px;
}

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.auth-label-row a {
    min-height: 24px;
    font-size: 12px;
    font-weight: 600;
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 0 0 20px;
    border: 1px solid rgb(167 61 53 / 30%);
    border-radius: 9px;
    color: var(--danger);
    background: var(--danger-light);
    gap: 10px;
}

.auth-alert > span {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid currentcolor;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.auth-alert p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.auth-status {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid rgb(28 107 98 / 25%);
    border-radius: 10px;
    color: var(--teal-dark);
    background: var(--mint-light);
    gap: 12px;
}

.auth-status > span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--white);
    background: var(--teal-dark);
    font-weight: 800;
}

.auth-status p {
    margin: 1px 0 0;
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
}

.auth-submit {
    margin-top: 4px;
}

.auth-card--security {
    min-width: 0;
}

.auth-security-data {
    display: grid;
    margin: 0 0 24px;
    gap: 12px;
}

.auth-security-data > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--cream);
}

.auth-security-data dt {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-security-data dd {
    margin: 0;
}

.auth-security-data code {
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 13px;
}

.auth-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    margin: 0 0 24px;
    list-style-position: inside;
    gap: 8px;
}

.auth-recovery-codes li {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.auth-recovery-codes code {
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
}

.auth-continue {
    text-align: center;
}

.auth-card__alternative {
    padding-top: 22px;
    margin-top: 24px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.auth-card__alternative > span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
}

.auth-card__alternative a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 800px) {
    .auth-page main {
        min-height: auto;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        width: min(calc(100% - 32px), 560px);
        padding: 42px 0 56px;
        gap: 34px;
    }

    .auth-intro h1 {
        font-size: clamp(36px, 11vw, 50px);
    }

    .auth-lead {
        margin-bottom: 26px;
    }
}

@media (max-width: 480px) {
    .auth-benefits {
        display: none;
    }

    .auth-card {
        padding: 25px 20px;
        border-radius: 14px;
    }

    .auth-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }

    .auth-recovery-codes {
        grid-template-columns: 1fr;
    }
}

/* ── Legal pages ──────────────────────────────────────────────────────────
   Long-form prose: a narrower measure than the directory shell, and the draft
   banner that stays until the L-gates close. */
.legal-shell {
    max-width: 760px;
    padding: 32px 0 64px;

    h2 {
        margin-top: 2rem;
    }

    h3 {
        margin-top: 1.25rem;
    }
}

.legal-draft-banner {
    margin: 16px 0 24px;
    padding: 12px 16px;
    border: 1px solid var(--coral-dark);
    border-left-width: 6px;
    border-radius: 6px;
    background: var(--coral-light);
    color: var(--ink);
}

.legal-lang-switch {
    margin: 4px 0 0;
    font-size: 0.95rem;
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.table-scroll {
    overflow-x: auto;

    table {
        border-collapse: collapse;
        min-width: 480px;
    }

    th,
    td {
        padding: 8px 12px;
        border: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
    }

    th {
        background: var(--mint-faint);
    }
}

.booking-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
        margin: 0 0 6px;
    }
}

.profile-services li > div { min-width: 0; }
.profile-services li strong { display: block; font-weight: 650; }
.profile-services li p { margin: .45rem 0 0; font-size: .9rem; line-height: 1.65; font-weight: 400; color: var(--muted, #59626b); }

.essential-cookies {
    max-width: 70rem;
    margin: 1rem auto;
    padding: 0 1rem;
    font-size: .875rem;
    line-height: 1.6;
}
.essential-cookies a { text-decoration: underline; text-underline-offset: .2em; }

.auth-page .be-email-agreement {
    margin: 1rem 0;
    font-size: 13px;
    line-height: 1.5;
}

.auth-page .be-email-agreement-label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.auth-page .be-email-agreement-label input {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1875rem 0 0;
}

.auth-card__header--compact {
    padding-bottom: 0;
    margin-bottom: 18px;
    border-bottom: 0;
}

/* Agreement prose must not inherit the resend controls' centered, tall links. */
.auth-page .be-email-agreement-label { text-align: left; }
.auth-page .be-email-agreement-label > span { min-width: 0; }
.auth-page .be-email-agreement-label a { display: inline; min-height: 0; font-size: inherit; }