/* ==========================================================================
   COMPONENTS — the shared vocabulary every page draws from.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-800);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink-800);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.9375rem 1.625rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); transition-duration: 60ms; }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.4);
}

/* Primary — safety yellow on ink. The only element on the page allowed this. */
.btn--primary {
  --btn-bg: var(--signal); --btn-fg: var(--signal-ink); --btn-bd: var(--signal);
  box-shadow: var(--e-signal);
}
.btn--primary:hover { --btn-bg: var(--signal-hot); --btn-bd: var(--signal-hot); box-shadow: 0 3px 0 var(--signal-deep), 0 10px 26px rgba(26,100,200,.38); }
.btn--primary:active { box-shadow: 0 1px 0 var(--signal-deep); }

.btn--dark { --btn-bg: var(--ink-800); --btn-fg: var(--paper); --btn-bd: var(--ink-800); box-shadow: var(--e-2); }
.btn--dark:hover { --btn-bg: var(--ink-600); --btn-bd: var(--ink-600); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--rule-strong); }
.btn--ghost:hover { --btn-bd: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.on-dark .btn--ghost { --btn-fg: var(--paper); --btn-bd: var(--ink-500); }
.on-dark .btn--ghost:hover { --btn-bd: var(--steel-300); background: rgba(255,255,255,.07); }

.btn--quiet {
  --btn-bg: transparent; --btn-fg: var(--fg-muted); --btn-bd: transparent;
  padding-inline: var(--s-3); font-family: var(--font-ui); font-size: var(--t-sm);
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
.btn--quiet:hover { --btn-fg: var(--fg); background: var(--bg-sunk); }

.btn--lg { padding: 1.1875rem 2.25rem; font-size: 1.375rem; }
/* min-height, not padding alone: at 0.625rem padding this measured 37px,
   under the 44px floor the brief sets. */
.btn--sm { padding: 0.625rem 1.0625rem; font-size: 0.9375rem; min-height: 44px; }
.btn--block { width: 100%; }

.btn__arrow { transition: transform var(--base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   HEADER  (injected by ui.js so nav lives in exactly one place)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow var(--base) var(--ease), background-color var(--base) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--e-2); background: color-mix(in srgb, var(--paper) 97%, transparent); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--s-5); }

.brand { display: inline-flex; align-items: center; gap: 0.625rem; flex: none; min-height: 44px; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; color: var(--ink-900);
}
/* "HUB" in the brand blue, as the painted mark sets it. On ink the same blue
   only reaches 3.4:1, which large bold text clears but nothing else does, so
   the dark grounds get the lit tint instead. */
.brand__hub { color: var(--signal); }
.on-dark .brand__hub, .site-footer .brand__hub { color: var(--signal-lit); }

.site-nav { display: none; margin-left: auto; }
@media (min-width: 62em) { .site-nav { display: flex; align-items: center; gap: var(--s-2); } }
.site-nav a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px; justify-content: center;
  padding: 0.5rem 0.8125rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 550; color: var(--fg-muted);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.site-nav a:hover { color: var(--fg); background: var(--bg-sunk); }
.site-nav a[aria-current='page'] { color: var(--fg); font-weight: 650; }
.site-nav a[aria-current='page']::after {
  content: ''; position: absolute; left: 0.8125rem; right: 0.8125rem; bottom: 0.125rem;
  height: 2px; background: var(--signal); border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
@media (min-width: 62em) { .header-actions { margin-left: 0; } }
.header-phone {
  display: none; font-family: var(--font-mono); font-size: var(--t-sm);
  font-weight: 600; color: var(--fg-muted);
}
@media (min-width: 75em) { .header-phone { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding-inline: 0.25rem; } }
.header-phone:hover { color: var(--fg); }

.nav-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm); color: var(--fg);
}
@media (min-width: 62em) { .nav-toggle { display: none; } }
.nav-toggle:hover { border-color: var(--fg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: var(--z-overlay);
  background: var(--paper); padding: var(--s-6) var(--gutter) var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-2);
  transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease), visibility var(--base);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
.mobile-nav a.mobile-nav__link {
  font-family: var(--font-display); font-size: 2rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--tr-display);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); color: var(--ink-800);
}
.mobile-nav a.mobile-nav__link[aria-current='page'] { color: var(--signal-deep); }
.mobile-nav__foot { margin-top: auto; padding-top: var(--s-6); display: grid; gap: var(--s-3); }

/* Sticky mobile action bar — the site's single most important conversion
   surface on phones, where most of this traffic lives. */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-3);
  padding: 0.6875rem var(--gutter) calc(0.6875rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink-900) 96%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--ink-500);
  transform: translateY(110%); transition: transform var(--base) var(--ease-out);
}
.mobile-cta.is-shown { transform: none; }
@media (min-width: 62em) { .mobile-cta { display: none; } }
.mobile-cta__meta { min-width: 0; }
.mobile-cta__price { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; color: var(--paper); line-height: 1; }
.mobile-cta__note { font-size: var(--t-micro); color: var(--steel-300); letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
body.has-mobile-cta { padding-bottom: 78px; }
@media (min-width: 62em) { body.has-mobile-cta { padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: var(--steel-300); padding-block: var(--s-9) var(--s-6); }
.site-footer a:not(.btn):not(.brand) { color: var(--steel-300); transition: color var(--fast) var(--ease); }
.site-footer a:not(.btn):not(.brand):hover { color: var(--signal); }
.site-footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-6); } }
.site-footer h5 {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--paper); margin-bottom: var(--s-4);
}
.site-footer li + li { margin-top: 0.5rem; }
/* Footer links are a real navigation surface on phones, where most of this
   traffic lives — give them tap targets rather than 19px of text. */
.site-footer li > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-footer li:has(> a:not(.btn)) + li { margin-top: 0; }
.site-footer .fine li > a:not(.btn) { min-height: 0; }
.site-footer .brand__name { color: var(--paper); }
.site-footer__bottom {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--ink-500);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between;
  font-size: var(--t-xs);
}
/* min-width too: short labels like "Terms" measured 38px wide, which is a
   target as much as height is. */
.site-footer__bottom a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}

/* --------------------------------------------------------------------------
   CARDS & PANELS
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-raised); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--e-1);
}
.card--flush { padding: 0; overflow: hidden; }
.card--lift { transition: transform var(--base) var(--ease-out), box-shadow var(--base) var(--ease-out), border-color var(--base) var(--ease); }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--e-3); border-color: var(--rule-strong); }
.card--signal { border-color: var(--signal); box-shadow: var(--e-2), 0 0 0 4px var(--signal-wash); }

.panel { background: var(--bg-sunk); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5); }

/* Callout — the cancellation-terms box and its siblings. */
.callout {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  border: 1px solid var(--rule); background: var(--bg-sunk); font-size: var(--t-sm);
}
.callout__icon { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.callout strong { display: block; margin-bottom: 2px; color: var(--fg); }
.callout--warn { background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: #6E3F04; }
.callout--warn strong { color: #5A3403; }
.callout--info { background: var(--info-wash); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: #17455A; }
.callout--info strong { color: #113646; }
.callout--go { background: var(--go-wash); border-color: color-mix(in srgb, var(--go) 32%, transparent); color: #126034; }
.callout--go strong { color: #0D4A28; }
.callout--stop { background: var(--stop-wash); border-color: color-mix(in srgb, var(--stop) 32%, transparent); color: #7C231C; }
.callout--stop strong { color: #631B15; }

/* --------------------------------------------------------------------------
   CHIPS / BADGES / PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3125rem 0.6875rem; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--bg-sunk); color: var(--fg-muted); border: 1px solid var(--rule);
}
.badge--signal { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.badge--go { background: var(--go-wash); color: #126034; border-color: color-mix(in srgb, var(--go) 30%, transparent); }
.badge--warn { background: var(--warn-wash); color: #6E3F04; border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.badge--dark { background: var(--ink-800); color: var(--paper); border-color: var(--ink-800); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.dot--go { background: var(--go); }
.dot--warn { background: var(--warn); }
.dot--stop { background: var(--stop); }
.dot--live { position: relative; background: var(--go); }
.dot--live::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--go); opacity: .6; animation: ping 2.2s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dot--live::after { animation: none; } }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: var(--s-5); }
.field__label {
  display: block; font-size: var(--t-sm); font-weight: 650; color: var(--fg); margin-bottom: 0.4375rem;
}
.field__label .req { color: var(--stop); margin-left: 2px; }
.field__help { font-size: var(--t-xs); color: var(--fg-muted); margin-top: 0.375rem; line-height: 1.5; }
/* Reserved, never collapsed. When this box was display:none until invalid,
   clearing three errors at once removed ~130px between a touchstart and its
   click — the tap landed on whatever slid up into place, and the control the
   customer aimed at never registered. Keeping the row means an error can
   appear and clear without moving anything under a thumb. */
.field__error {
  display: flex; align-items: center; gap: 0.375rem;
  min-height: 1.15rem; line-height: 1.15rem;
  font-size: var(--t-xs); font-weight: 600; color: var(--stop); margin-top: 0.375rem;
}
.field__error:empty { margin-top: 0.25rem; }

.input, .select, .textarea {
  width: 100%; padding: 0.8125rem 0.9375rem;
  background: var(--bg-raised); color: var(--fg);
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--steel-500); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ink-800);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 45%, transparent);
}
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea {
  border-color: var(--stop); background: color-mix(in srgb, var(--stop-wash) 60%, var(--bg-raised));
}
.textarea { min-height: 6.5rem; resize: vertical; }
.select {
  appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B767E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1.0625rem;
}
.input--mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 34em) { .field-row--2 { grid-template-columns: 1fr 1fr; } .field-row--3 { grid-template-columns: repeat(3, 1fr); } }

/* Segmented yes/no — used for the vehicle safety screen. Big targets. */
.segmented { display: inline-grid; grid-auto-flow: column; gap: 0; border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm); overflow: hidden; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  padding: 0.6875rem 1.375rem; font-size: var(--t-sm); font-weight: 650;
  cursor: pointer; background: var(--bg-raised); color: var(--fg-muted);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
  text-align: center; min-width: 5.5rem;
}
/* The emitted DOM is input,label,input,label — an <input> always sits between
   two labels, so `label + label` could never match and the dividers never drew.
   Target every label after the first instead. */
.segmented label:not(:first-of-type) { border-left: 1.5px solid var(--rule-strong); }
.segmented label:hover { background: var(--bg-sunk); color: var(--fg); }
.segmented input:checked + label { background: var(--ink-800); color: var(--paper); }
.segmented input:focus-visible + label { outline: 3px solid var(--signal); outline-offset: -3px; }

/* Selectable card (add-ons, membership picks, duration) */
.choice {
  position: relative; display: block; cursor: pointer;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--bg-raised); padding: var(--s-4) var(--s-5);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.choice:hover { border-color: var(--steel-500); transform: translateY(-1px); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) {
  border-color: var(--ink-800); background: var(--bg-raised);
  box-shadow: inset 0 0 0 1.5px var(--ink-800), var(--e-2);
}
.choice:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 2px; }
.choice__check {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rule-strong);
  display: grid; place-items: center; flex: none; transition: all var(--fast) var(--ease);
  background: var(--bg-raised);
}
/* A circle means pick one. Multi-select groups — add-ons, acknowledgements —
   must square off, or six circles read as a radio group and the customer
   assumes choosing a second unpicks the first. */
.choice--multi .choice__check { border-radius: var(--r-xs); }
.choice__check svg { opacity: 0; transform: scale(.5); transition: all var(--fast) var(--ease-out); color: var(--ink-900); }
.choice:has(input:checked) .choice__check { background: var(--signal); border-color: var(--signal); }
.choice:has(input:checked) .choice__check svg { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
.table { font-size: var(--t-sm); min-width: 30rem; }
.table th, .table td { padding: 0.9375rem 1.125rem; text-align: left; border-bottom: 1px solid var(--rule); }
.table thead th {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  background: var(--bg-sunk); border-bottom: 1.5px solid var(--rule-strong);
  position: sticky; top: 0;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--signal-wash) 55%, transparent); }
.table td.num, .table th.num { text-align: right; }

/* --------------------------------------------------------------------------
   ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__q {
  display: flex; align-items: flex-start; gap: var(--s-4); justify-content: space-between;
  padding: var(--s-5) 0; font-weight: 650; font-size: 1.0625rem; color: var(--fg);
  transition: color var(--fast) var(--ease);
}
.accordion__q:hover { color: var(--signal-deep); }
.accordion__icon { flex: none; width: 22px; height: 22px; margin-top: 2px; transition: transform var(--base) var(--ease-out); color: var(--fg-muted); }
.accordion__item[open] .accordion__icon { transform: rotate(45deg); color: var(--signal-deep); }
.accordion__a { padding-bottom: var(--s-5); max-width: 68ch; color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.68; }
.accordion__a > * + * { margin-top: var(--s-3); }
.accordion__item[open] .accordion__a { animation: fade-in var(--base) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   TOASTS
   -------------------------------------------------------------------------- */
.toast-host {
  position: fixed; z-index: var(--z-toast); left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom)); display: grid; gap: var(--s-2);
  width: min(26rem, calc(100vw - 2rem)); pointer-events: none;
}
@media (min-width: 62em) { .toast-host { left: auto; right: 1.5rem; transform: none; bottom: 1.5rem; } }
.toast {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--ink-800); color: var(--paper);
  padding: 0.875rem 1.125rem; border-radius: var(--r-md);
  box-shadow: var(--e-4); font-size: var(--t-sm); pointer-events: auto;
  animation: toast-in var(--base) var(--ease-out);
  border-left: 3px solid var(--signal);
}
.toast--go { border-left-color: var(--go); }
.toast--stop { border-left-color: var(--stop); }
.toast.is-out { animation: toast-out var(--fast) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   MODAL
   -------------------------------------------------------------------------- */
.modal { border: 0; padding: 0; background: transparent; max-width: min(38rem, calc(100vw - 2rem)); width: 100%; }
.modal::backdrop { background: rgba(11,14,16,.62); backdrop-filter: blur(3px); }
.modal__card { background: var(--bg-raised); border-radius: var(--r-lg); box-shadow: var(--e-4); overflow: hidden; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6) 0; }
.modal__body { padding: var(--s-4) var(--s-6) var(--s-6); }
.modal[open] { animation: modal-in var(--base) var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__close { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--fg-muted); }
.modal__close:hover { background: var(--bg-sunk); color: var(--fg); }

/* --------------------------------------------------------------------------
   IN-PROSE LINK
   Lived in legal.css, so it was invisible on any page that does not load that
   stylesheet — the home page picked it up and rendered three plain-text links.
   -------------------------------------------------------------------------- */
/* A real tap target, not a 20px-tall word in a sentence. */
.ilink {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.25rem;
  color: var(--fg); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  text-decoration-color: var(--rule-strong);
  transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease);
}
.ilink:hover { color: var(--signal-deep); text-decoration-color: currentColor; }
.on-dark .ilink { color: var(--paper); }
.on-dark .ilink:hover { color: var(--signal); }

/* --------------------------------------------------------------------------
   SKELETON (availability loading)
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-sunk) 25%, color-mix(in srgb, var(--bg-sunk) 55%, var(--bg-raised)) 37%, var(--bg-sunk) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* --------------------------------------------------------------------------
   TRUST STRIP — small, factual, no fake logos
   -------------------------------------------------------------------------- */
.trust {
  display: grid; gap: var(--s-4) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.trust__item { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-sm); }
.trust__item svg { width: 20px; height: 20px; flex: none; color: var(--signal-deep); margin-top: 2px; }
.on-dark .trust__item svg { color: var(--signal); }
.trust__item strong { display: block; font-weight: 650; color: var(--fg); }
.trust__item span { color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   PHOTO SLOT
   Wraps an illustration that stands in for a photograph the owner will shoot.
   The data-photo attribute carries the shot description; it is deliberately
   NOT rendered, so the live site never shows production notes. README.md
   carries the full shot list.
   -------------------------------------------------------------------------- */
.photo-slot { display: block; margin: 0; }
.photo-slot > img, .photo-slot > svg { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   FUNNEL CHROME
   Booking is a funnel, not a brochure page. The header CTA is redundant once
   you are inside it, and a full sitemap footer is a leak — and on a phone it
   was adding roughly a screen and a half of dead scroll to every step.
   -------------------------------------------------------------------------- */
body.is-funnel .header-actions .btn { display: none; }

.site-footer--minimal { padding-block: var(--s-6) var(--s-5); }
.site-footer__mini {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-3) var(--s-5);
}
.site-footer__mini-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--s-5); color: var(--steel-300); }
.site-footer__mini-facts a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .brand { min-height: 44px; }
.site-footer__terms { margin-top: var(--s-4); max-width: 60ch; color: var(--steel-300); }
.site-footer--minimal .site-footer__bottom { margin-top: var(--s-5); padding-top: var(--s-4); }

/* --------------------------------------------------------------------------
   STICKY STEP BAR (mobile)
   On a phone the step's primary action sat below a long slot grid, so the
   customer had to scroll the whole wall to find it. Pin it instead.
   -------------------------------------------------------------------------- */
.step-actions { display: flex; gap: var(--s-3); justify-content: flex-end; align-items: center; }

@media (max-width: 62em) {
  .step-actions--sticky {
    position: sticky; bottom: 0; z-index: var(--z-sticky);
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
    /* Opaque, not translucent: content scrolling underneath was ghosting
       through, and backdrop-filter is not dependable enough to carry
       legibility on its own. A soft shadow does the lifting instead. */
    background: var(--bg);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -6px 18px -8px rgba(11, 14, 16, .18);
  }
  .step-actions--sticky .btn { flex: 1; }
  .step-actions--sticky .btn--ghost { flex: 0 0 auto; }
  /* The funnel supplies its own bottom bar, so the site-wide one would stack. */
  body.is-funnel .mobile-cta { display: none; }
  body.is-funnel.has-mobile-cta { padding-bottom: 0; }
}