:root {
    --cali-ink: #1a1a1a;
    --cali-forest: #30382b;
    --cali-sage: #a8b5a2;
    --cali-sage-deep: #7e8f78;
    /* Decoration only — see --cali-rust-deep for anything that carries text. */
    --cali-rust: #c46a4a;
    /* The text-safe rust: same hue, dark enough to clear WCAG AA (4.5:1) at small
       sizes on the cream/ivory Connect surfaces. */
    --cali-rust-deep: #9b4d31;
    --cali-gold: #d4a373;
    --cali-sand: #d8d1c7;
    --cali-ivory: #f7f6f2;
    --cali-paper: #fffdf8;
    --cali-cream: #f3efe6;
    --cali-border: #e6dfd4;
    --cali-muted: #746f67;
    --connect-shadow: 0 18px 48px rgba(48, 56, 43, 0.12);
    --connect-shadow-sm: 0 8px 24px rgba(48, 56, 43, 0.08);
    --connect-radius: 22px;
    --connect-radius-sm: 14px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

.connect-body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    color: var(--cali-ink);
    background: linear-gradient(180deg, var(--cali-cream) 0%, var(--cali-cream) 420px, var(--cali-ivory) 900px, var(--cali-ivory) 100%);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.connect-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px 72px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.connect-shell--narrow {
    max-width: 720px;
    padding-top: 40px;
}

/* Sub-pages (Weekend, Confirmation) have no hero for the wizard card to tuck
   under, so drop the hero-overlap negative margin that otherwise pulls the
   card — and its title — off the top of the viewport. */
.connect-shell--narrow .connect-wizard {
    margin-top: 0;
}

/* ---- hero ------------------------------------------------------------- */
.connect-hero {
    position: relative;
    min-height: 440px;
    border-radius: 0;
    padding: 64px 64px 96px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--cali-cream);
}

.connect-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    pointer-events: none;
}

/* soft fade on the left so overlaid copy stays legible */
.connect-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, var(--cali-cream) 18%, rgba(243, 239, 230, 0.55) 42%, rgba(243, 239, 230, 0) 62%);
    pointer-events: none;
}

/* bottom band fades the photo into the solid page color (no transparency) */
.connect-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(243, 239, 230, 0) 0%, var(--cali-cream) 82%, var(--cali-cream) 100%);
    pointer-events: none;
}

.connect-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 50%;
}

.connect-wordmark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 28px;
}

.connect-wordmark-img {
    display: block;
    width: auto;
    height: 96px;
}

.connect-headline {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.8rem, 5.5vw, 4rem);
    line-height: 1.02;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--cali-forest);
    margin: 0 0 18px;
}

.connect-subcopy {
    font-size: 1.08rem;
    color: var(--cali-muted);
    max-width: 32ch;
    margin: 0 0 36px;
}

.connect-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 28px;
}

.connect-trust li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    font-size: 0.86rem;
    line-height: 1.25;
    color: var(--cali-forest);
    font-weight: 500;
    text-align: left;
}

.connect-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(126, 143, 120, 0.35);
    color: var(--cali-sage-deep);
}

.connect-trust-icon svg { width: 20px; height: 20px; }

/* ---- wizard ----------------------------------------------------------- */
.connect-wizard {
    position: relative;
    z-index: 2;
    margin: -92px 48px 0;
    background: var(--cali-paper);
    border: 1px solid var(--cali-border);
    border-radius: var(--connect-radius);
    padding: 44px 48px 48px;
    box-shadow: var(--connect-shadow);
}

.wizard-steps {
    list-style: none;
    margin: 0 auto 40px;
    padding: 0;
    max-width: 640px;
    display: flex;
    justify-content: space-between;
    gap: 0;
    position: relative;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
    color: var(--cali-muted);
    font-size: 0.84rem;
    font-weight: 500;
    text-align: center;
    position: relative;
}

/* connector line between numbered circles */
.wizard-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 19px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--cali-border);
    z-index: 0;
}

.wizard-step.is-active:not(:first-child)::before,
.wizard-step.is-complete:not(:first-child)::before {
    background: var(--cali-sage);
}

.wizard-step-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cali-paper);
    border: 2px solid var(--cali-border);
    color: var(--cali-muted);
    font-weight: 600;
    transition: all 0.2s ease;
}

.wizard-step.is-active .wizard-step-num {
    background: var(--cali-forest);
    border-color: var(--cali-forest);
    color: #fff;
}

.wizard-step.is-active { color: var(--cali-forest); }

.wizard-step.is-complete .wizard-step-num {
    background: var(--cali-sage);
    border-color: var(--cali-sage);
    color: var(--cali-forest);
}

.wizard-panel { animation: fade-in 0.25s ease; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.wizard-panel-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--cali-forest);
    text-align: center;
    margin: 0 0 6px;
}

.wizard-panel-title.align-start { text-align: left; }

.wizard-panel-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--cali-sage-deep);
    margin: 10px 0 12px;
}

.wpd-sprig { width: auto; height: 28px; object-fit: contain; display: block; }

.wpd-line {
    height: 1px;
    width: 64px;
    background: var(--cali-border);
}

.wizard-panel-sub {
    text-align: center;
    color: var(--cali-muted);
    margin: 0 0 28px;
}

.wizard-panel-sub.align-start { text-align: left; }

/* ---- call type cards -------------------------------------------------- */
.calltype-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.calltype-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    background: var(--cali-ivory);
    border: 1.5px solid var(--cali-border);
    border-radius: var(--connect-radius-sm);
    padding: 32px 28px;
    cursor: pointer;
    font: inherit;
    color: var(--cali-ink);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.calltype-card:hover {
    border-color: var(--cali-sage);
    box-shadow: var(--connect-shadow-sm);
    transform: translateY(-2px);
}

.calltype-card.is-selected {
    border-color: var(--cali-forest);
    background: var(--cali-paper);
    box-shadow: 0 0 0 2px rgba(48, 56, 43, 0.12);
}

.calltype-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(168, 181, 162, 0.22);
    color: var(--cali-sage-deep);
}

.calltype-icon svg { width: auto; height: 34px; }
.calltype-icon img { width: auto; height: 40px; object-fit: contain; display: block; }

.calltype-name {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cali-forest);
}

.calltype-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cali-sage-deep);
    background: rgba(168, 181, 162, 0.18);
    border-radius: 999px;
    padding: 4px 14px;
}

.calltype-duration svg { width: 15px; height: 15px; }

.calltype-desc {
    color: var(--cali-muted);
    font-size: 0.95rem;
}

.calltype-cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 150px;
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 6px;
    background: transparent;
    color: var(--cali-forest);
    border: 1.5px solid var(--cali-forest);
    transition: background 0.18s ease, color 0.18s ease;
}

.calltype-cta-selected { display: none; align-items: center; gap: 6px; }
.calltype-cta-selected svg { width: 16px; height: 16px; }
.calltype-card.is-selected .calltype-cta {
    background: var(--cali-forest);
    color: #fff;
    border-color: var(--cali-forest);
}
.calltype-card.is-selected .calltype-cta-select { display: none; }
.calltype-card.is-selected .calltype-cta-selected { display: inline-flex; }

/* second card gets a warm tan icon tint per screenshot */
.calltype-card:nth-child(2) .calltype-icon {
    background: rgba(212, 163, 115, 0.22);
    color: var(--cali-gold);
}

/* ---- date & time ------------------------------------------------------ */
.datetime-panel {
    background: var(--cali-cream);
    border: 1px solid var(--cali-border);
    border-radius: var(--connect-radius);
    padding: 28px 28px 30px;
}

.datetime-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.tz-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cali-forest);
    background: #fff;
    border: 1px solid var(--cali-border);
    border-radius: 6px;
    padding: 9px 16px;
    white-space: nowrap;
    box-shadow: var(--connect-shadow-sm);
}

.tz-pill svg { width: 16px; height: 16px; color: var(--cali-sage-deep); }
.tz-pill svg:last-child { width: 14px; height: 14px; color: var(--cali-muted); }

.datetime-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.cal-card, .slot-card {
    background: var(--cali-paper);
    border: 1px solid var(--cali-border);
    border-radius: var(--connect-radius-sm);
    padding: 22px;
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cal-month {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cali-forest);
}

.cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--cali-border);
    background: var(--cali-paper);
    color: var(--cali-forest);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cal-nav:hover:not(:disabled) { background: var(--cali-cream); }
.cal-nav:disabled { opacity: 0.35; cursor: default; }
.cal-nav svg { width: 16px; height: 16px; }

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.cal-weekdays span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--cali-muted);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    color: var(--cali-ink);
    cursor: pointer;
}

.cal-day.is-outside { color: var(--cali-border); }
.cal-day.is-disabled { color: var(--cali-sand); cursor: default; }

.cal-day.is-available {
    color: var(--cali-forest);
    font-weight: 600;
}

.cal-day.is-available::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cali-sage);
}

.cal-day.is-available:hover { background: rgba(168, 181, 162, 0.22); }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--cali-sage); }

.cal-day.is-selected {
    background: var(--cali-forest);
    color: #fff;
    font-weight: 600;
}

.cal-day.is-selected::after { background: #fff; }

.slot-date-label {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cali-forest);
    margin: 0 0 16px;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.slot-hint {
    grid-column: 1 / -1;
    color: var(--cali-muted);
    font-size: 0.92rem;
    margin: 0;
    padding: 12px 0;
}

.slot-btn {
    padding: 12px 8px;
    border: 1.5px solid var(--cali-border);
    border-radius: 10px;
    background: var(--cali-paper);
    font: inherit;
    font-weight: 600;
    color: var(--cali-forest);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.slot-btn:hover { border-color: var(--cali-sage); }
.slot-btn.is-selected { background: var(--cali-forest); border-color: var(--cali-forest); color: #fff; }

.slot-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    font-size: 0.85rem;
    color: var(--cali-muted);
}

.slot-foot svg { width: 16px; height: 16px; }

/* ---- details form ----------------------------------------------------- */
.details-grid {
    display: grid;
    /* minmax(0, …): plain 1fr won't shrink below an input's intrinsic width
       (datetime-local, select), which pushes the grid outside the card. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field--full { grid-column: 1 / -1; }

.field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cali-forest);
}

.req { color: var(--cali-rust-deep); margin-left: 2px; }

.field-hint {
    font-size: 0.85rem;
    color: var(--cali-muted);
    margin-top: -3px;
}

.field-input {
    font: inherit;
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--cali-border);
    border-radius: 10px;
    background: var(--cali-paper);
    color: var(--cali-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Native selects don't inherit the branded look — flatten them to match
   .field-input and draw our own chevron. */
select.field-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2330382b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
    cursor: pointer;
}

.field-input:focus {
    outline: none;
    border-color: var(--cali-sage);
    box-shadow: 0 0 0 3px rgba(168, 181, 162, 0.22);
}

textarea.field-input { resize: vertical; min-height: 84px; }

/* ---- actions ---------------------------------------------------------- */
.wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--cali-border);
}

.connect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 600;
    padding: 13px 30px;
    border-radius: 6px;
    border: 1.5px solid var(--cali-forest);
    background: var(--cali-forest);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.1s ease;
}

.connect-btn:hover:not(:disabled) { background: #262d22; }
.connect-btn:active:not(:disabled) { transform: translateY(1px); }
.connect-btn:disabled { opacity: 0.4; cursor: default; }

.connect-btn--ghost {
    background: transparent;
    color: var(--cali-forest);
    border-color: var(--cali-border);
}

.connect-btn--ghost:hover:not(:disabled) { background: var(--cali-ivory); }

.connect-weekend-note {
    text-align: center;
    margin: 28px 0 0;
    color: var(--cali-muted);
    font-size: 0.92rem;
}

.connect-weekend-note a { color: var(--cali-forest); font-weight: 600; text-decoration: none; }
.connect-weekend-note a:hover { text-decoration: underline; }

/* "Back to your portal" escape hatch for signed-in portal clients. */
.connect-portal-back {
    margin: 0 0 18px;
    font-size: 0.92rem;
}

.connect-portal-back--center { text-align: center; margin: 24px 0 0; }
.connect-portal-back a { color: var(--cali-forest); font-weight: 600; text-decoration: none; }
.connect-portal-back a:hover { text-decoration: underline; }

/* ---- alerts / empty --------------------------------------------------- */
.connect-alert {
    background: rgba(196, 106, 74, 0.1);
    border: 1px solid rgba(196, 106, 74, 0.3);
    border-radius: var(--connect-radius-sm);
    padding: 14px 18px;
    margin-bottom: 24px;
    color: #8c4327;
}

.connect-alert p { margin: 0; }
.connect-alert p + p { margin-top: 6px; }

.connect-alert--ok {
    background: rgba(168, 181, 162, 0.18);
    border-color: rgba(126, 143, 120, 0.4);
    color: var(--cali-forest);
}

.connect-empty {
    text-align: center;
    color: var(--cali-muted);
    padding: 36px;
    background: var(--cali-ivory);
    border-radius: var(--connect-radius-sm);
}

/* ---- footer band ------------------------------------------------------ */
.connect-footer-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin-top: 32px;
    padding: 32px 40px;
    background: linear-gradient(180deg, var(--cali-ivory), var(--cali-cream));
    border: 1px solid var(--cali-border);
    border-radius: var(--connect-radius-sm);
    color: var(--cali-forest);
    text-align: center;
}

.footer-band-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    color: var(--cali-forest);
}

.footer-band-leaf { color: var(--cali-sage-deep); display: inline-flex; }
.footer-band-leaf svg { width: 22px; height: 22px; }
.footer-band-leaf img { width: auto; height: 26px; object-fit: contain; display: block; }

.footer-band-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

.footer-band-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--cali-muted);
    padding: 0 28px;
}

.footer-band-features li + li {
    border-left: 1px solid var(--cali-border);
}

.footer-band-features svg { width: 18px; height: 18px; color: var(--cali-sage-deep); }

/* ---- confirmation ----------------------------------------------------- */
.confirm-card {
    background: var(--cali-paper);
    border: 1px solid var(--cali-border);
    border-radius: var(--connect-radius);
    padding: 56px 48px;
    box-shadow: var(--connect-shadow);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.confirm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(168, 181, 162, 0.22);
    color: var(--cali-sage-deep);
    margin-bottom: 24px;
}

.confirm-check svg { width: 36px; height: 36px; }

.confirm-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--cali-forest);
    margin: 0 0 12px;
}

.confirm-sub {
    color: var(--cali-muted);
    max-width: 42ch;
    margin: 0 0 32px;
}

.confirm-details {
    width: 100%;
    max-width: 420px;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--cali-border);
    border-radius: var(--connect-radius-sm);
    overflow: hidden;
    background: var(--cali-ivory);
}

.confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.confirm-details > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cali-border);
}

.confirm-details > div:last-child { border-bottom: none; }
.confirm-details dt { color: var(--cali-muted); font-size: 0.9rem; margin: 0; }
.confirm-details dd { margin: 0; font-weight: 600; color: var(--cali-forest); text-align: right; }

/* ---- weekend / back link --------------------------------------------- */
.connect-back-link {
    align-self: flex-start;
    color: var(--cali-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
}

.connect-back-link:hover { color: var(--cali-forest); }

.weekend-form { margin-top: 8px; }
.weekend-form .wizard-actions { justify-content: flex-start; }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 860px) {
    .connect-hero { padding: 32px 32px 64px; min-height: 0; }
    .connect-hero-copy { max-width: 100%; }
    /* Photo-first hero: on phones the image shows at its natural ratio anchored
       top-right (no cover-zoom) — branch and curtain fill the top, the vase lands
       around mid-hero — and the headline starts below it, on plain cream. The
       oversized width hangs off the left edge, clipped by the hero's overflow. */
    .connect-hero-bg {
        inset: 0 0 auto auto;
        height: min(100vw, 420px);
        width: auto;
        object-fit: contain;
        object-position: top right;
    }
    .connect-hero::after { height: 70%; }
    /* Wordmark sits beside the vase, at the height of its mouth (~46% of the
       photo's height), tracking the image as it scales. The logo PNG carries
       ~9.7% transparent left padding; pull it left so the visible C lines up
       with the copy below (mobile only — desktop keeps the original position). */
    .connect-wordmark { margin-top: calc(min(46vw, 193px) - 75px); margin-left: -14px; }
    .connect-headline { margin-top: calc(min(100vw, 420px) - 280px); }
    .connect-hero-bg svg { opacity: 0.35; max-width: 90%; }
    .connect-trust { gap: 14px 18px; }
    .connect-trust-icon { width: 40px; height: 40px; }
    .connect-wizard { padding: 32px 24px 36px; margin: -40px 0 0; }
    .datetime-panel { padding: 20px; }
    .datetime-grid { grid-template-columns: 1fr; }
    .calltype-grid { grid-template-columns: 1fr; }
    .details-grid { grid-template-columns: minmax(0, 1fr); }
    .wizard-step-label { display: none; }
    .footer-band-features li { padding: 6px 18px; }
    .footer-band-features li + li { border-left: none; }
}

/* --- Global link default ---------------------------------------------------------
   Keep stray links on-brand instead of falling back to the browser's default blue.
   :where() carries zero specificity, so this only colors links that set no color of
   their own; themed links (buttons, nav, etc.) are untouched. */
:where(.connect-body) a {
    color: var(--cali-rust-deep);
    text-underline-offset: 2px;
}
:where(.connect-body) a:hover,
:where(.connect-body) a:focus {
    color: var(--cali-forest);
}