/* design\components.css: the CSS of the components in design\components.md, the director's: the header, the footer,
   the exit popup, the call bar, the stop icon, and each section pattern, card, form box and call-to-action block as the
   home page built them. Every page loads it (the build copies it to site\assets\css\components.css). Every page uses these
   classes as they are; a page's own CSS only places and sizes its parts, with the tokens of system.css. */

/* ---------- Layout and type ---------- */
*, *::before, *::after { box-sizing: border-box; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }
.band { position: relative; padding-block: var(--section-y); }
.band--sand { background: var(--c-paper-alt); }
.band--night { background: var(--c-night); color: var(--c-on-brand); }

.h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--c-ink); text-wrap: balance; }
.voice { font-family: var(--font-voice); font-style: italic; font-weight: 560; font-size: 1.04em; letter-spacing: -0.012em; color: var(--c-brand-text); }
.h2--night { color: var(--c-on-brand); }
.h2--night .voice, .band--night .voice { color: var(--c-accent); }

.head { max-width: 880px; margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.head__line { margin: var(--space-3) 0 0; max-width: 640px; font-size: calc(var(--fs-body) * 1.06); color: var(--c-ink-soft); text-wrap: pretty; }
.band--night .head__line { color: var(--c-on-night-soft); }
.head--split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-5); align-items: end; max-width: none; }
.head--split .head__line { margin: 0; }
@media (max-width: 860px) { .head--split { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ---------- Buttons and the reassurance line ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 1.5em; border: 0; border-radius: 999px; font: 700 var(--fs-ui)/1 var(--font-ui); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.button--main { background: var(--c-accent); color: var(--c-ink); box-shadow: 0 1px 0 color-mix(in srgb, var(--c-on-brand) 45%, transparent) inset, 0 10px 24px color-mix(in srgb, var(--c-brand) 30%, transparent); }
.button--main:hover { background: color-mix(in srgb, var(--c-accent) 84%, var(--c-brand)); transform: translateY(-1px); }
.button:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.band--night .button:focus-visible, .picker--night .button:focus-visible { outline-color: var(--c-on-brand); }
.button__arrow { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.button:hover .button__arrow { transform: translateX(3px); }

.assure { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .85rem 0 0; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.assure span { display: inline-flex; align-items: center; gap: .42em; }
.assure span::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--c-brand-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l3.6 3.6L16 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l3.6 3.6L16 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cta-row { display: flex; flex-direction: column; align-items: center; margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.cta-row .assure { justify-content: center; }
.cta-row--left { align-items: flex-start; text-align: left; }
.cta-row--left .assure { justify-content: flex-start; }

/* ---------- The clients picker ---------- */
.picker { max-width: 540px; padding: clamp(1.1rem, 2vw, 1.5rem); border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-card); box-shadow: var(--shadow-m); }
.picker__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.picker__legend { margin-bottom: .85rem; padding: 0; font: 700 1.0625rem/1.3 var(--font-ui); color: var(--c-ink); }
.picker__choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.picker__choice { position: relative; display: block; }
.picker__choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picker__choice span { display: grid; place-items: center; height: 50px; border: 1.5px solid var(--c-line); border-radius: 14px; background: var(--c-paper); font: 750 1.125rem/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-ink); transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.picker__choice:hover span { border-color: var(--c-accent); }
.picker__choice input:checked + span { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-on-brand); }
.picker__choice input:focus-visible + span { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.picker__go { width: 100%; min-height: 58px; margin-top: 1rem; font-size: 1.0625rem; }
.picker__note { justify-content: center; }
.picker--night { border-color: var(--c-night-line); background: color-mix(in srgb, var(--c-night-2) 88%, transparent); box-shadow: none; }
.picker--night .picker__legend { color: var(--c-on-brand); }
.picker--night .picker__choice span { border-color: var(--c-night-line); background: transparent; color: var(--c-on-brand); }
.picker--night .picker__choice input:checked + span { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-ink); }
.picker--night .picker__choice input:focus-visible + span { outline-color: var(--c-accent); }
.picker--night .assure { color: var(--c-on-night-soft); }
.picker--night .assure span::before { background: var(--c-accent); }
.picker--flat { box-shadow: none; background: var(--c-card); }

/* ---------- The stop icon (h.stop, and the tour's own) ---------- */
.stop, [data-kit-tabs-stop] { z-index: 6; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-card) 92%, transparent); color: var(--c-ink); box-shadow: var(--shadow-s); cursor: pointer; }
.stop:hover, [data-kit-tabs-stop]:hover { background: var(--c-card); }
.stop:focus-visible, [data-kit-tabs-stop]:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
[data-kit-tabs-stop] .stop__play, .stop--copy .stop__play { display: none; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__play, .stop--copy[aria-pressed="true"] .stop__play { display: inline; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__pause, .stop--copy[aria-pressed="true"] .stop__pause { display: none; }

/* ---------- Chips, cards, links ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.chips li { padding: .55rem .9rem; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-card); font: 600 .9375rem/1 var(--font-ui); color: var(--c-ink); }
.card { padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-card); box-shadow: var(--shadow-s); }
.more-link { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; text-align: center; }
.more-link a { display: inline-flex; align-items: center; gap: .5em; font: 700 1.0625rem/1 var(--font-ui); color: var(--c-brand-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.slab { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--c-night); color: var(--c-on-brand); isolation: isolate; }

/* ---------- The closing band: a night slab, its own clip, the rings (moved here from home.css in Part 2, as it was) ---------- */
.close { padding-top: clamp(2rem, 4vw, 3rem); }
.close__slab { position: relative; display: grid; align-items: center; min-height: 560px; overflow: hidden; border-radius: var(--radius-l); background: var(--c-night); color: var(--c-on-brand); isolation: isolate; }
.close__bg { position: absolute; inset: -1px; z-index: 0; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 60% 50%; } /* 1 px past its slab (kit.md, "Video") */
.close__bg--flip { transform: scaleX(-1); } /* a clip whose face sits left: mirrored, so the face stands clear of the words */
.close__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--c-night) 94%, transparent) 0%, color-mix(in srgb, var(--c-night) 82%, transparent) 42%, color-mix(in srgb, var(--c-night) 30%, transparent) 100%); }
.close__rings { position: absolute; z-index: 1; right: -240px; top: 50%; width: 1000px; height: 1000px; max-width: none; fill: none; stroke: var(--c-accent); stroke-width: 1.3; translate: 0 -50%; pointer-events: none; }
.close__rings circle { opacity: calc(.5 - var(--k) * .055); }
.close__body { position: relative; z-index: 2; max-width: 620px; padding: clamp(1.75rem, 5vw, 4.5rem); }
.close__line { margin: 1rem 0 1.75rem; font-size: 1.125rem; color: var(--c-on-night-soft); }
.close__picker { max-width: 520px; }
.close__stop { position: absolute; top: 1rem; right: 1rem; }
/* the wide close (Part 2, the inner pages; never the home's): full bleed, its words centered in its lower half under
   the clip's faces, the rings rising from its foot and fading before it, its stop level with its last line of words
   (in view with them, clear of the sticky header); it meets the part above with no cream strip, and its foot runs
   into the footer's night, whose arcs fade in below the seam, so no ring is cut along it */
.close--wide { padding-block: 0; }
.close--wide > .wrap { width: 100%; }
.close--wide .close__slab { min-height: clamp(560px, 48vw, 700px); align-items: end; justify-items: center; border-radius: 0; text-align: center; }
.close--wide .close__bg { object-position: 50% 20%; }
.close--wide .close__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-night) 16%, transparent) 0%, color-mix(in srgb, var(--c-night) 34%, transparent) 32%, color-mix(in srgb, var(--c-night) 86%, transparent) 60%, color-mix(in srgb, var(--c-night) 95%, transparent) 86%, var(--c-night) 100%); }
.close--wide .close__rings { right: auto; left: 50%; top: auto; bottom: -560px; width: 1120px; height: 1120px; translate: -50% 0; -webkit-mask-image: linear-gradient(180deg, #000 24%, transparent 47%); mask-image: linear-gradient(180deg, #000 24%, transparent 47%); }
body:has(.close--wide) .site-footer__rings { -webkit-mask-image: linear-gradient(180deg, transparent 220px, #000 360px); mask-image: linear-gradient(180deg, transparent 220px, #000 360px); }
.close--wide .close__body { max-width: 780px; padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(2.5rem, 5vw, 4.5rem); }
.close--wide .close__line { margin-inline: auto; }
.close--wide .close__picker { margin-inline: auto; }
.close--wide .close__stop { top: auto; bottom: clamp(2.5rem, 5vw, 4.5rem); }
@media (max-width: 760px) {
  .close__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-night) 86%, transparent), color-mix(in srgb, var(--c-night) 94%, transparent)); }
  .close__body { padding: 2.25rem 1.1rem 1.5rem; }
  .close--wide .close__slab { min-height: 640px; }
  .close--wide .close__shade { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c-night) 40%, transparent) 30%, color-mix(in srgb, var(--c-night) 92%, transparent) 56%, color-mix(in srgb, var(--c-night) 96%, transparent) 86%, var(--c-night) 100%); }
  .close--wide .close__body { padding: 2.25rem var(--gutter) 4.5rem; }
  .close--wide .close__stop { top: 5rem; bottom: auto; } /* clear of the sticky header at the band's top and of the call bar at its foot */
}

/* ---------- Questions (details[data-faq]) ---------- */
.qa { border-bottom: 1px solid var(--c-line); }
.qa:first-child { border-top: 1px solid var(--c-line); }
.qa__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; list-style: none; font: 750 clamp(1.125rem, 1rem + .4vw, 1.3125rem)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--c-ink); cursor: pointer; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 4px; border-radius: 6px; }
.qa__icon { position: relative; flex: none; width: 36px; height: 36px; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-card); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--c-ink); translate: -50% -50%; transition: rotate var(--dur-fast) var(--ease-out); }
.qa__icon::after { rotate: 90deg; }
.qa[open] .qa__icon::after { rotate: 0deg; }
.qa__a { padding: 0 3.25rem 1.4rem 0; color: var(--c-ink-soft); }
.qa__a p { margin: 0; }
/* the FAQ part: its head sticky beside the questions (moved here from home.css in Part 2, as it was) */
.faq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__head { position: sticky; top: 100px; }
.faq__cta { margin-top: 1.6rem; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq__head { position: static; } }

/* ---------- The header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-paper) 95%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--c-line) 75%, transparent); }
.site-header__in { display: flex; align-items: center; gap: 1.25rem; width: min(100% - 2 * var(--gutter), 1400px); height: 76px; margin-inline: auto; }
.site-header__logo { flex: none; display: block; border-radius: 8px; }
.site-header__logo img { display: block; width: auto; height: 34px; } /* Todd's logo is cut tight (5.6:1): 34 px shows its tile as large as the first logo's at 38 */
.site-header__logo:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 4px; }
.site-header__nav { display: flex; align-items: center; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.nav__item a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; border-radius: 999px; font: 600 1rem/1 var(--font-ui); color: var(--c-ink); text-decoration: none; transition: background var(--dur-fast); }
.nav__item a:hover { background: var(--c-paper-alt); }
.nav__item a:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.nav__item a[aria-current="page"] { color: var(--c-brand-text); }
.nav__item--pill a { margin-left: .35rem; border: 1.5px solid var(--c-line); }
.nav__cta { display: none; }
.site-header__cta { flex: none; min-height: 46px; padding: 0 1.25em; }
.site-header__menu { display: none; }
@media (max-width: 1080px) {
  .site-header__in { gap: .6rem; height: 64px; }
  .site-header__logo img { height: 24px; }
  .site-header__cta { margin-left: auto; min-height: 42px; padding: 0 1em; font-size: .9375rem; }
  .site-header__menu { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--c-line); border-radius: 50%; background: var(--c-card); color: var(--c-ink); cursor: pointer; }
  .site-header__menu:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
  .site-header__menu-icon { display: grid; gap: 5px; }
  .site-header__menu-icon i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-fast) var(--ease-out); }
  .site-header[data-open] .site-header__menu-icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .site-header[data-open] .site-header__menu-icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-header__nav { display: none; position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; max-height: calc(100dvh - 64px); margin: 0; padding: 1rem var(--gutter) 2rem; overflow: auto; background: var(--c-night); }
  .site-header[data-open] .site-header__nav { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav__item a { width: 100%; min-height: 54px; padding: 0 .6rem; border-radius: 12px; font-size: 1.25rem; color: var(--c-on-brand); }
  .nav__item a:hover { background: var(--c-night-2); }
  .nav__item a[aria-current="page"] { color: var(--c-accent); }
  .nav__item--pill a { margin: 0; border: 0; }
  .nav__cta { display: inline-flex; margin-top: 1.25rem; min-height: 56px; }
}
/* the logo, the button and the menu on one line from 375 px: the button loses its arrow on the phone */
@media (max-width: 479px) { .site-header__cta { padding: 0 .85em; font-size: .875rem; } .site-header__cta .button__arrow { display: none; } }
@media (max-width: 374px) { .site-header__cta { display: none; } .site-header__menu { margin-left: auto; } }

/* ---------- The footer ---------- */
.site-footer { position: relative; overflow: hidden; padding: clamp(3.5rem, 6vw, 5.5rem) 0 2rem; background: var(--c-night); color: var(--c-on-night-soft); isolation: isolate; }
.site-footer__rings { position: absolute; z-index: -1; right: -200px; top: -220px; width: 680px; height: 680px; fill: none; stroke: var(--c-accent); stroke-width: 1; opacity: .2; pointer-events: none; }
.site-footer__in { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.5rem 2rem; width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }
.site-footer__logo { display: inline-block; border-radius: 8px; }
.site-footer__logo img { display: block; width: auto; height: 40px; }
.site-footer__line { max-width: 32ch; margin: 1.1rem 0 1.5rem; }
.site-footer__cta { min-height: 48px; }
.site-footer__title { margin: .4rem 0 1rem; font: 700 1rem/1.2 var(--font-ui); color: var(--c-on-brand); }
.site-footer__col ul, .site-footer__legal ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col ul { display: grid; gap: .6rem; }
.site-footer a { color: var(--c-on-brand); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }
.site-footer .site-footer__cta, .site-footer .site-footer__cta:hover { color: var(--c-ink); text-decoration: none; }
.site-footer__contact p { margin: .4rem 0 0; }
.site-footer__contact p:first-child { margin-top: .4rem; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--c-night-line); font-size: var(--fs-small); }
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { display: flex; gap: 1.5rem; }
@media (max-width: 900px) {
  .site-footer__in { grid-template-columns: 1fr 1fr; }
  .site-footer__brand, .site-footer__contact { grid-column: 1 / -1; }
}

/* ---------- The form box (Contact; kit.md "The form"): a cream card on cream with a line; its step marks over a line
   that fills as the steps pass; the choices shown as rows with their icon, the chosen one in ink; errors in the
   brand's text color (the kit shows and hides them) ---------- */
.form-box { position: relative; padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-card); box-shadow: var(--shadow-m); }
.form-box__marks { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0 0 clamp(1.5rem, 3vw, 2rem); padding: 0 0 1rem; list-style: none; counter-reset: mark; }
.form-box__marks::before, .form-box__marks::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; }
.form-box__marks::before { right: 0; background: var(--c-line); }
.form-box__marks::after { width: calc(100% * var(--kit-at, 1) / var(--kit-steps, 3)); background: var(--c-brand); transition: width var(--dur-med) var(--ease-out); }
.form-box__marks li { display: flex; align-items: center; gap: .55rem; min-width: 0; font: 650 .9375rem/1.2 var(--font-ui); color: var(--c-ink-soft); counter-increment: mark; }
.form-box__marks li::before { content: counter(mark); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--c-line); border-radius: 50%; background: var(--c-paper); font: 800 .9375rem/1 var(--font-display); color: var(--c-ink-soft); }
.form-box__marks li[aria-current="step"] { color: var(--c-ink); }
.form-box__marks li[aria-current="step"]::before { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand) 16%, transparent); }
.form-box__marks li[data-kit-past] { color: var(--c-ink); }
.form-box__marks li[data-kit-past]::before { content: ""; border-color: var(--c-ink); background: var(--c-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.4 3.4L15.5 6.5' fill='none' stroke='%23FFF8EE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.form-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-step__q { float: left; width: 100%; margin: 0 0 1.25rem; padding: 0; font: 800 clamp(1.5rem, 1.2rem + 1vw, 1.875rem)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--c-ink); text-wrap: balance; }
.form-step__q + * { clear: both; }
.field { display: grid; gap: .4rem; margin: 0 0 1rem; }
.field__label { font: 650 .9375rem/1.3 var(--font-ui); color: var(--c-ink); }
.field__opt { font-weight: 500; color: var(--c-ink-soft); }
.field__input { width: 100%; min-height: 52px; padding: .8rem 1rem; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); font: 500 1.0625rem/1.35 var(--font-ui); color: var(--c-ink); }
textarea.field__input { min-height: 120px; resize: vertical; }
.field__input::placeholder { color: var(--c-ink-soft); opacity: 1; }
.field__input:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; border-color: var(--c-brand); }
.field[data-kit-invalid] .field__input { border-color: var(--c-brand-text); }
.field__error { margin: 0; font: 600 .875rem/1.35 var(--font-ui); color: var(--c-brand-text); }
.choices { display: grid; gap: .65rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.choice > span { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: .9rem; padding: .85rem 1rem; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink); transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.choice:hover > span { border-color: var(--c-brand); }
.choice input:focus-visible + span { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.choice__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-brand-light); }
.choice__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--c-brand-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.choice__text { display: grid; gap: .15rem; min-width: 0; }
.choice__text b { font: 700 1.0625rem/1.25 var(--font-ui); }
.choice__text small { font: 500 .875rem/1.35 var(--font-ui); color: var(--c-ink-soft); }
.choice__tick { width: 24px; height: 24px; border: 1.5px solid var(--c-line); border-radius: 50%; background: var(--c-card); }
.choice[data-kit-on] > span { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-on-ink); }
.choice[data-kit-on] .choice__text small { color: var(--c-on-night-soft); }
.choice[data-kit-on] .choice__icon { background: color-mix(in srgb, var(--c-on-ink) 12%, transparent); }
.choice[data-kit-on] .choice__icon svg { stroke: var(--c-accent); }
.choice[data-kit-on] .choice__tick { border-color: var(--c-accent); background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.4 3.4L15.5 6.5' fill='none' stroke='%2316130F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.form-step__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.form-step__nav .button[data-kit-back] { margin-right: auto; border: 1.5px solid var(--c-line); background: transparent; color: var(--c-ink); }
.form-step__nav .button[data-kit-back]:hover { border-color: var(--c-ink); }
.form-box[data-kit-sending] .button--main { opacity: .7; pointer-events: none; }
.form-box__note { margin: 1rem 0 0; font: 500 .875rem/1.4 var(--font-ui); color: var(--c-ink-soft); }
.form-box__note a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-brand); text-underline-offset: .18em; }
@media (max-width: 560px) {
  .form-box__marks li { flex-direction: column; align-items: flex-start; gap: .35rem; font-size: .8125rem; }
  .choice > span { grid-template-columns: 40px minmax(0, 1fr) 22px; gap: .75rem; padding: .8rem .85rem; }
  .choice__icon { width: 40px; height: 40px; }
  .form-step__nav .button { flex: 1 1 auto; }
}

/* ---------- The exit popup ---------- */
.exit { width: min(560px, calc(100% - 2rem)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--c-ink); }
.exit:focus, .exit:focus-visible { outline: none; }
.exit::backdrop { background: color-mix(in srgb, var(--c-night) 64%, transparent); }
.exit__in { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); }
.exit[data-kit-on] .exit__in { animation: exit-in var(--dur-med) var(--ease-out); }
@keyframes exit-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.exit__rings { position: absolute; right: 0; top: 0; width: 300px; height: 300px; fill: none; stroke: var(--c-accent); stroke-width: 1.2; opacity: .32; pointer-events: none; }
.exit__mark { position: relative; display: block; width: 56px; height: 56px; border-radius: 15px; }
.exit__headline { position: relative; margin: 1.1rem 0 .6rem; padding-right: 2rem; font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.45rem); line-height: 1.05; letter-spacing: var(--ls-display); text-wrap: balance; }
.exit__line { position: relative; margin: 0 0 1.25rem; color: var(--c-ink-soft); }
.exit .picker { position: relative; max-width: none; }
.exit__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--c-card); color: var(--c-ink); box-shadow: var(--shadow-s); cursor: pointer; }
.exit__close:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
html[data-kit-modal] { overflow: hidden; }

/* ---------- The call bar on the phone ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--c-night); box-shadow: 0 -8px 24px color-mix(in srgb, var(--c-night) 30%, transparent); transform: translateY(110%); transition: transform var(--dur-med) var(--ease-out); }
.callbar[data-kit-on] { transform: none; }
.callbar a { display: grid; place-items: center; min-height: 50px; border-radius: 999px; font: 700 1rem/1 var(--font-ui); text-decoration: none; }
.callbar__call { border: 1.5px solid var(--c-night-line); color: var(--c-on-brand); }
.callbar__cta { background: var(--c-accent); color: var(--c-ink); }
.callbar a:focus-visible { outline: 3px solid var(--c-on-brand); outline-offset: 2px; }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------- The thank-you and 404 pages ---------- */
.thanks, .not-found { width: min(100% - 2 * var(--gutter), 860px); margin: 0 auto; padding: clamp(4.5rem, 11vw, 9rem) 0; text-align: center; }
.thanks__headline, .not-found__headline { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: var(--ls-display); text-wrap: balance; }
.thanks__body, .not-found__body { max-width: 56ch; margin: 1.25rem auto 0; font-size: 1.125rem; color: var(--c-ink-soft); }
.thanks__next { margin: 2.25rem 0 0; padding: 0; list-style: none; }
.thanks__next a, .not-found__home { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 1.6em; border-radius: 999px; background: var(--c-accent); color: var(--c-ink); font: 700 1.0625rem/1 var(--font-ui); text-decoration: none; }
.thanks__next a:focus-visible, .not-found__home:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
/* the 404: the main button first; the way home beside it, quiet (an outline), and the main button's line under both */
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; }
.not-found__home { min-height: 52px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-line); }
.not-found__home:hover { box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.not-found__note { justify-content: center; }

/* Sure Bet Media edits, Nov 12 2026: example labels, footer address, SMS consent */
.sbg-tag { display: inline-block; margin: 0 .4rem .2rem 0; padding: .12em .55em; border-radius: 999px; background: #16130F; color: #FBF6EE; font: 700 .6875rem/1.4 var(--font-ui, system-ui, sans-serif); font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
[data-scene]::after { content: "Example"; position: absolute; top: 8px; right: 8px; z-index: 30; padding: .12em .55em; border-radius: 999px; background: #16130F; color: #FBF6EE; font: 700 11px/1.4 var(--font-ui, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.sbg-note { margin: 1rem 0 0; text-align: center; font: 600 .875rem/1.4 var(--font-ui, system-ui, sans-serif); color: var(--c-ink-soft); }
.site-footer__addr { margin-top: .35rem; }
.field--consent { margin-top: .25rem; }
.consent { display: flex; gap: .6rem; align-items: flex-start; font: 500 .875rem/1.45 var(--font-ui, system-ui, sans-serif); color: var(--c-ink-soft); cursor: pointer; }
.consent input { flex: none; width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--c-brand); }
.consent a { color: var(--c-brand-text); text-decoration: underline; }
[data-scene="fillcal"]::after { top: auto; right: auto; bottom: 8px; left: 8px; }