/* ============================================================
   Elite Traders Lounge — Babysitting Services
   Design tokens + component styles
   ============================================================ */

:root {
  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  --text-hero: clamp(2.75rem, 0.8rem + 6vw, 5.5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 980px;
  --content-wide: 1240px;

  /* Fonts */
  --font-display: 'Chillax', 'Segoe UI', sans-serif;
  --font-body: 'General Sans', 'Segoe UI', sans-serif;
}

/* ---------- Light mode (default) ---------- */
:root,
[data-theme='light'] {
  --color-bg: #faf6ef;
  --color-surface: #ffffff;
  --color-surface-2: #fdfbf7;
  --color-surface-offset: #f2ece0;
  --color-surface-offset-2: #ece3d3;
  --color-divider: #e3d9c6;
  --color-border: #d9cbae;

  --color-text: #2a251d;
  --color-text-muted: #6e6555;
  --color-text-faint: #a89d86;
  --color-text-inverse: #faf6ef;

  /* Primary accent — warm terracotta */
  --color-primary: #c85a3a;
  --color-primary-hover: #a8492e;
  --color-primary-active: #8a3a24;
  --color-primary-highlight: #f0dcd2;

  /* Secondary — deep trust teal */
  --color-secondary: #1f5c52;
  --color-secondary-hover: #16453d;
  --color-secondary-active: #0f322c;
  --color-secondary-highlight: #d3e2de;

  --color-warning: #96591a;
  --color-warning-highlight: #ecdcc4;
  --color-error: #a1332f;
  --color-error-highlight: #e6d2cf;
  --color-success: #3f7a4a;
  --color-success-highlight: #d7e5d5;
  --color-gold: #b6862f;
  --color-gold-highlight: #ecdfc4;

  --shadow-sm: 0 1px 2px oklch(0.25 0.03 55 / 0.08);
  --shadow-md: 0 6px 16px oklch(0.25 0.03 55 / 0.10);
  --shadow-lg: 0 16px 40px oklch(0.25 0.03 55 / 0.16);
}

/* ---------- Dark mode ---------- */
[data-theme='dark'] {
  --color-bg: #171410;
  --color-surface: #1d1a15;
  --color-surface-2: #211d17;
  --color-surface-offset: #26221b;
  --color-surface-offset-2: #2c281f;
  --color-divider: #322c22;
  --color-border: #423b2d;

  --color-text: #ece5d6;
  --color-text-muted: #b3a891;
  --color-text-faint: #766c58;
  --color-text-inverse: #201c15;

  --color-primary: #e08462;
  --color-primary-hover: #ec9a7a;
  --color-primary-active: #f4b299;
  --color-primary-highlight: #402d24;

  --color-secondary: #5ba99a;
  --color-secondary-hover: #79bdaf;
  --color-secondary-active: #97d0c4;
  --color-secondary-highlight: #223c37;

  --color-warning: #d69a55;
  --color-warning-highlight: #453224;
  --color-error: #e08a86;
  --color-error-highlight: #442824;
  --color-success: #86bf8f;
  --color-success-highlight: #263d29;
  --color-gold: #dcb968;
  --color-gold-highlight: #443a24;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 16px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.45);
}

/* ============================================================
   Base type & layout
   ============================================================ */

body {
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-10));
}

.container--narrow {
  max-width: var(--content-default);
}

section {
  position: relative;
}

.section-pad {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.section-pad--tight {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

h1,
h2,
h3,
.font-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-title {
  font-size: var(--text-xl);
  max-width: 32ch;
}

.section-lede {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-top: var(--space-4);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-hover);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  z-index: 200;
  transition: top var(--transition-interactive);
  font-size: var(--text-sm);
  font-weight: 600;
}
.skip-link:focus {
  top: var(--space-4);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn[hidden] {
  display: none;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  min-height: 44px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff8f4;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  color: #fff8f4;
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-secondary);
  border-color: var(--color-border);
}
.btn--secondary:hover {
  background: var(--color-surface-offset);
  color: var(--color-secondary-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  background: var(--color-surface-offset);
}

.btn--danger {
  background: var(--color-error);
  color: #fff8f4;
  box-shadow: var(--shadow-sm);
}
.btn--danger:hover {
  background: var(--color-error);
  filter: brightness(0.9);
  color: #fff8f4;
  box-shadow: var(--shadow-md);
}
.btn--danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  min-height: 36px;
}

/* ============================================================
   Header
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(from var(--color-bg) l c h / 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid oklch(from var(--color-border) l c h / 0.6);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.15;
}

.brand__mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.brand__name {
  display: flex;
  flex-direction: column;
}

.brand__name span:last-child {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}

.nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.nav__links a:hover {
  color: var(--color-text);
}
.nav__links a.is-active {
  color: var(--color-text);
  font-weight: 600;
}

/* Divider between the site's real pages and the grouped dropdowns, so the
   nav doesn't read as one flat row of identical-looking tabs. */
.nav__divider {
  width: 1px;
  height: 18px;
  background: var(--color-border);
  list-style: none;
}

/* "About" (homepage scroll-sections) and "Policies" dropdowns — built on
   <details>/<summary> so they work with no JS; app.js only adds outside-click
   / Escape-to-close and single-open-at-a-time polish on top. */
.nav__dropdown {
  position: relative;
}
.nav__dropdown summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}
.nav__dropdown summary::-webkit-details-marker {
  display: none;
}
.nav__dropdown summary:hover,
.nav__dropdown > details[open] summary,
.nav__dropdown summary.is-active {
  color: var(--color-text);
}
.nav__dropdown-chevron {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.nav__dropdown > details[open] .nav__dropdown-chevron {
  transform: rotate(180deg);
}
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 30;
}
.nav__dropdown-menu a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.nav__dropdown-menu a:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}
.nav__dropdown-menu a.is-active {
  color: var(--color-text);
  font-weight: 600;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* "Book a sitter" header CTA, expanded to a Babysitter / Au Pair choice.
   Built on <details>/<summary> so it works with no JS, styled to look like
   the .btn--primary.btn--sm it replaced. */
.header__book-dropdown {
  position: relative;
}
.header__book-dropdown summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}
.header__book-dropdown summary::-webkit-details-marker {
  display: none;
}
.header__book-dropdown summary .header__book-chevron {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.header__book-dropdown > details[open] .header__book-chevron {
  transform: rotate(180deg);
}
.header__book-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 30;
}
.header__book-dropdown-menu a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}
.header__book-dropdown-menu a small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.header__book-dropdown-menu a:hover {
  background: var(--color-surface-offset);
}

.theme-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--color-surface-offset);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

/* The full navigation needs roughly 1130px once the brand, the five top-level
   items and the two calls to action are laid out. The threshold used to sit at
   1320px, which meant a 1280-wide laptop -- one of the most common screens --
   was given the phone menu and lost both header buttons. 1180px keeps a little
   headroom while letting those laptops see the real navigation. */
@media (max-width: 1180px) {
  .nav__links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .header__actions .btn--primary.btn--sm,
  .header__actions .btn--secondary.btn--sm {
    display: none;
  }
}

@media (max-width: 400px) {
  .brand__name span:last-child {
    display: none;
  }
  .brand__name span:first-child {
    white-space: nowrap;
  }

  /* On a narrow phone the brand name is nowrap, and a flex item defaults to
     min-width:auto, so the brand refused to shrink and pushed the theme and
     menu buttons past the header's right padding -- the menu button was
     clipped at the screen edge on every page. Let the brand give way instead,
     and keep the controls whole: a truncated word is recoverable, a
     half-visible menu button is not. */
  .header__inner {
    gap: var(--space-3);
  }
  .brand {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  .brand__name {
    min-width: 0;
    overflow: hidden;
  }
  /* Shrink the wordmark slightly rather than cut it off. Keeping the menu
     button whole cost the brand about fifteen pixels of width, which was
     enough to clip the name to "Elite Traders Lou..." on a 360px phone. A
     marginally smaller wordmark reads better than a truncated company name.
     The ellipsis stays as a last resort for narrower screens still. */
  .brand {
    font-size: 0.8125rem;
  }
  .brand__name span:first-child {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header__actions {
    flex: 0 0 auto;
  }
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) 0 var(--space-6);
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
}
.mobile-menu.is-open {
  display: flex;
}
.header:has(.mobile-menu.is-open) {
  background: var(--color-bg);
  backdrop-filter: none;
}
.mobile-menu a {
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-base);
  color: var(--color-text);
  border-radius: var(--radius-md);
}
.mobile-menu a:hover {
  background: var(--color-surface-offset);
}
.mobile-menu__label {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-divider);
}
.mobile-menu > a:first-child,
.mobile-menu > .mobile-menu__label:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding-block: clamp(var(--space-12), 8vw, var(--space-20)) clamp(var(--space-16), 8vw, var(--space-24));
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-10), 6vw, var(--space-16));
  align-items: center;
}

.hero__copy h1 {
  font-size: var(--text-3xl);
  max-width: 15ch;
  margin-bottom: var(--space-6);
}

.hero__copy h1 em {
  font-style: normal;
  color: var(--color-primary);
}

.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-bottom: var(--space-8);
  font-weight: 400;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

.trust-strip__item svg {
  width: 16px;
  height: 16px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.hero__media {
  position: relative;
}

.hero__media img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
}

.hero__badge {
  position: absolute;
  bottom: -1.25rem;
  left: -1.25rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 260px;
  border: 1px solid var(--color-divider);
}

.hero__badge svg {
  width: 30px;
  height: 30px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.hero__badge strong {
  display: block;
  font-size: var(--text-sm);
  font-family: var(--font-display);
  font-weight: 600;
}
.hero__badge span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__badge {
    left: var(--space-4);
    bottom: -1rem;
  }
}

/* ============================================================
   Marquee band
   ============================================================ */

.band {
  background: var(--color-secondary);
  color: #eef5f2;
  padding-block: var(--space-6);
}

.band__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-10);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  font-weight: 500;
}

.band__row span {
  opacity: 0.9;
}

/* ============================================================
   How it works — tabs
   ============================================================ */

.tabs {
  display: inline-flex;
  padding: var(--space-1);
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-10);
  gap: var(--space-1);
}

.tab {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.tab[aria-selected='true'] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.steps[hidden] {
  display: none;
}

.step {
  display: none;
}
.step.is-active {
  display: contents;
}

.step-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.step-card__num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.step-card h3 {
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-body);
}

.step-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Trust & Safety split
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: center;
}

.split--reverse .split__media {
  order: 2;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-xl);
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.check-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.check-item svg {
  width: 22px;
  height: 22px;
  color: var(--color-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

.check-item h3 {
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.check-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__media {
    order: 0;
  }
}

/* ============================================================
   Pricing / rate bands
   ============================================================ */

.rate-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  position: relative;
}

.rate-table-hint {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

@media (max-width: 640px) {
  .rate-table-hint {
    display: block;
  }
}

table.rate-table {
  width: 100%;
  min-width: 640px;
  font-size: var(--text-sm);
}

.rate-table th,
.rate-table td {
  text-align: left;
  padding: var(--space-4) var(--space-5);
}

.rate-table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
}

.rate-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-divider);
}

.rate-table td strong {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
}

.rate-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.badge-verified svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.badge-verified--pending {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}

/* An earned badge — same proven colour pairing as .badge-verified (so it
   stays legible in both light and dark themes), distinguished by an outline
   rather than a new background we would have to re-check for contrast.
   currentColor, not a fixed hue: the sitter card re-colours these pills, so a
   hard-coded border clashes there and would need checking per theme. */
.badge-verified--earned {
  border: 1px solid currentColor;
}

.badge-renewal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.badge-renewal--current {
  background: var(--color-success-highlight);
  color: var(--color-success);
}

.badge-renewal--due-soon {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}

.badge-renewal--overdue {
  background: var(--color-error-highlight);
  color: var(--color-error);
}

.badge-renewal--unknown {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}

.pricing-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.pricing-note {
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.pricing-note strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
}

.pricing-note p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 780px) {
  .pricing-notes {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Benefits — asymmetric two column
   ============================================================ */

.benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.benefit-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 4vw, var(--space-10));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.benefit-card--accent {
  background: var(--color-secondary);
  color: #eef5f2;
  border-color: transparent;
}

.benefit-card--accent .benefit-card__title,
.benefit-card--accent h3 {
  color: #fff;
}

.benefit-card--accent .benefit-card__sub {
  color: oklch(from #eef5f2 l c h / 0.75);
}

.benefit-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.benefit-card__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.benefit-list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  align-items: flex-start;
}

.benefit-list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.benefit-card:not(.benefit-card--accent) .benefit-list svg {
  color: var(--color-primary);
}
.benefit-card--accent .benefit-list svg {
  color: #f0c7ab;
}

@media (max-width: 860px) {
  .benefits {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FAQ accordion
   ============================================================ */

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-divider);
  max-width: var(--content-default);
}

.faq-item {
  border-bottom: 1px solid var(--color-divider);
}

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
}

.faq-item__q svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform var(--transition-interactive);
}

.faq-item[data-open='true'] .faq-item__q svg {
  transform: rotate(45deg);
  color: var(--color-primary);
}

.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item__a p {
  padding-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 68ch;
}

/* ============================================================
   CTA banner
   ============================================================ */

.cta-banner {
  background: linear-gradient(160deg, var(--color-secondary), var(--color-secondary-active));
  color: #f2f7f5;
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  justify-content: space-between;
}

.cta-banner h2 {
  font-size: var(--text-xl);
  max-width: 22ch;
}

.cta-banner p {
  color: oklch(from #f2f7f5 l c h / 0.8);
  margin-top: var(--space-3);
  max-width: 42ch;
}

.cta-banner__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cta-banner .btn--secondary {
  background: #fff;
  border-color: transparent;
  color: #16453d;
}
.cta-banner .btn--secondary:hover {
  background: #f2ece0;
}
.cta-banner .btn--ghost {
  border-color: oklch(from #f2f7f5 l c h / 0.4);
  color: #fff;
}
.cta-banner .btn--ghost:hover {
  background: oklch(from #f2f7f5 l c h / 0.1);
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-divider);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
}

.footer__brand p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  max-width: 32ch;
}

.footer h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.footer ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer ul a,
.footer ul span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.footer ul a:hover {
  color: var(--color-text);
}

.footer__bottom {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

@media (max-width: 860px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Utility
   ============================================================ */

.mt-0 {
  margin-top: 0 !important;
}

@media (max-width: 700px) {
  .hero__ctas .btn {
    width: 100%;
  }
}

/* ============================================================
   Sub-page header (Register / Book / Check-in / Policies)
   ============================================================ */

.page-hero {
  padding: clamp(var(--space-16), 10vw, var(--space-24)) 0 clamp(var(--space-10), 6vw, var(--space-16));
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-divider);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--color-primary);
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  max-width: 22ch;
  margin-bottom: var(--space-4);
}
.page-hero p {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 62ch;
}

/* ============================================================
   Forms
   ============================================================ */

.form-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  box-shadow: var(--shadow-sm);
}

.form-section + .form-section {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-divider);
}

.form-section__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.form-section__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.child-row {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.child-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.child-row__title {
  font-weight: 600;
  font-size: var(--text-sm);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.field-grid[hidden] {
  display: none;
}
.field-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.field-grid--sitter-profile {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.field-grid--sitter-profile .field label {
  font-size: var(--text-sm);
}
@media (max-width: 640px) {
  .field-grid,
  .field-grid--3 {
    grid-template-columns: 1fr;
  }
  .field-grid--sitter-profile {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.field[hidden] {
  display: none;
}
.field:last-child {
  margin-bottom: 0;
}
.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.field .field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}
.required-mark {
  color: var(--color-error);
  font-weight: 700;
  margin-left: 2px;
}
.form-section__required-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  margin-bottom: var(--space-4);
}
.form-section__required-note .required-mark {
  margin-left: 0;
  margin-right: 2px;
}
.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='date'],
.field input[type='time'],
.field input[type='number'],
.field textarea,
.field select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--color-secondary);
  outline: 2px solid oklch(from var(--color-secondary) l c h / 0.25);
  outline-offset: 1px;
}
.field input[readonly] {
  background: var(--color-surface-alt, var(--color-surface));
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.field .field__static {
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, var(--color-surface));
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 600;
}
.field textarea {
  min-height: 6rem;
  resize: vertical;
}
.field select {
  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='%236e6555' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

.radio-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 700px) {
  .radio-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
.radio-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.radio-card input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.radio-card strong {
  display: block;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
.radio-card span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.radio-card:has(input:checked) {
  border-color: var(--color-secondary);
  background: var(--color-secondary-highlight);
}
.radio-card:has(input:focus-visible) {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.checkbox-field input {
  margin-top: 0.2em;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--color-secondary);
  flex-shrink: 0;
}
.checkbox-field label {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}
.checkbox-field a {
  color: var(--color-secondary);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}
.checkbox-grid .checkbox-field {
  align-items: center;
}

.form-actions {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.quote-box {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
}
.quote-box__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
}
.quote-box__row strong {
  font-variant-numeric: tabular-nums;
}
.quote-box__row.total {
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  font-size: var(--text-base);
  font-weight: 600;
}
.quote-box__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-warning);
}

/* ---------- Alerts / status ---------- */
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-top: var(--space-6);
}
.alert svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.1em;
}
/* An alert is a flex row: an icon, then one block of content. When several
   paragraphs are dropped in as siblings they became separate flex columns,
   each squeezed to a few characters wide and running off the side of a phone
   screen. Rather than rely on every author remembering to wrap them, let any
   loose block content claim a full row and stack normally. */
.alert {
  flex-wrap: wrap;
}
.alert > p,
.alert > ul,
.alert > ol,
.alert > h3,
.alert > h4 {
  flex: 1 1 100%;
  min-width: 0;
}
.alert > p + p,
.alert > p + ul,
.alert > ul + p {
  margin-top: var(--space-3);
}
/* The icon must not be pulled onto its own row by the rule above. */
.alert > svg ~ p:first-of-type {
  flex: 1 1 calc(100% - 20px - var(--space-3));
}
.alert--success {
  background: var(--color-success-highlight);
  /* Same reason as .alert--warning: 3.92:1 with the raw token. This is the
     confirmation shown after bookings, registrations and payout changes, so
     it has to be comfortably readable. */
  color: #23512c;
}
.alert--error {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.alert--info {
  background: var(--color-secondary-highlight);
  color: var(--color-secondary);
}
.alert--warning {
  background: var(--color-warning-highlight);
  /* --color-warning is tuned for the page background. On the pale warning
     chip it only reaches 4.17:1, so the alert darkens it to clear 4.5:1.
     Scoped to the alert so status pills and other users of the token keep
     their existing appearance. Dark mode overrides colour below. */
  color: #754512;
}
[data-theme='dark'] .alert--success,
[data-theme='dark'] .alert--error,
[data-theme='dark'] .alert--info,
[data-theme='dark'] .alert--warning {
  color: var(--color-text);
}
.alert[hidden] {
  display: none;
}

/* ============================================================
   Getting-started guide — big numbered steps
   ============================================================ */

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.guide-step {
  display: flex;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.guide-step__num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.guide-step__body h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.guide-step__body p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.guide-step__body ul {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.guide-audio {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.guide-audio p {
  font-weight: 600;
  margin: 0;
  flex-shrink: 0;
}

.guide-audio audio {
  flex: 1;
  min-width: 240px;
}

.guide-glossary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.guide-glossary dt {
  font-weight: 700;
  color: var(--color-text);
}

.guide-glossary dd {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

@media (max-width: 640px) {
  .guide-step {
    flex-direction: column;
  }
  .guide-glossary {
    grid-template-columns: 1fr;
  }
}

/* ---------- File uploads ---------- */
.field input[type='file'] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.field input[type='file']:focus {
  border-color: var(--color-secondary);
  outline: 2px solid oklch(from var(--color-secondary) l c h / 0.25);
  outline-offset: 1px;
}
.field input[type='file']::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: #fff8f4;
  font-weight: 600;
  font-size: var(--text-xs);
  cursor: pointer;
}
.file-status {
  display: block;
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}
.file-status--ok {
  color: var(--color-success);
  font-weight: 600;
}
.file-status--error {
  color: var(--color-error);
  font-weight: 600;
}

/* ---------- Smile ID final step ---------- */
.form-section--final {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.smile-id-placeholder {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
  background: var(--color-surface);
  margin-bottom: var(--space-5);
}
.smile-id-placeholder__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-secondary-highlight);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.smile-id-placeholder__icon svg {
  width: 20px;
  height: 20px;
}
.smile-id-placeholder__body {
  flex: 1;
  min-width: 0;
}
.smile-id-placeholder__body strong {
  display: block;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
.smile-id-placeholder__body p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}
.smile-id-placeholder .badge-verified {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .smile-id-placeholder {
    flex-direction: column;
  }
}

/* ---------- Selfie / liveness capture widget ---------- */
.selfie-capture {
  margin-bottom: var(--space-5);
}
.selfie-capture__frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-offset);
  border: 1px dashed var(--color-border);
}
.selfie-capture__frame video,
.selfie-capture__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.selfie-capture__frame video[hidden],
.selfie-capture__frame img[hidden] {
  display: none;
}
.selfie-capture__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.selfie-capture__placeholder svg {
  width: 40px;
  height: 40px;
}
.selfie-capture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.booking-ref-box[hidden] {
  display: none;
}
.booking-ref-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.booking-ref-box__item {
  background: var(--color-surface);
  border: 1px dashed var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  text-align: center;
}
.booking-ref-box__item span {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.booking-ref-box__item strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
}

/* ============================================================
   Check-in / Check-out tool
   ============================================================ */

.checkin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 860px) {
  .checkin-grid {
    grid-template-columns: 1fr;
  }
}

.role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  margin-bottom: var(--space-6);
}
.role-toggle button {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.role-toggle button[aria-pressed='true'] {
  background: var(--color-surface);
  color: var(--color-secondary);
  box-shadow: var(--shadow-sm);
}

.action-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.action-toggle label {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}
.action-toggle input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.action-toggle label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary-hover);
}

.status-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.status-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.status-row:last-child {
  border-bottom: none;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.status-pill--pending {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.status-pill--done {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
/* Used for a chargeback that is past, or close to, the Paystack response
   deadline. Deliberately the loudest pill on the dashboard: once that window
   closes Paystack accepts the dispute on our behalf and refunds the customer
   from our balance, so this is the one state an admin must not scroll past. */
.status-pill--urgent {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
[data-theme='dark'] .status-pill--pending,
[data-theme='dark'] .status-pill--done,
[data-theme='dark'] .status-pill--urgent {
  color: var(--color-text);
}
.status-timestamp {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.worked-hours-banner {
  margin-top: var(--space-6);
  text-align: center;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  color: #fff;
}
.worked-hours-banner strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
}
[data-theme='dark'] .worked-hours-banner {
  color: var(--color-text-inverse);
}

/* ============================================================
   Policy tables & TOC (policies page)
   ============================================================ */

.policy-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}
.policy-toc a {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  text-decoration: none;
}
.policy-toc a:hover {
  background: var(--color-secondary-highlight);
  color: var(--color-secondary);
}

.policy-section {
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-divider);
}
.policy-section:last-child {
  border-bottom: none;
}
.policy-section h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.policy-section h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin: var(--space-6) 0 var(--space-3);
}
.policy-section p,
.policy-section li {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}
.policy-section ul {
  padding-left: var(--space-5);
  list-style: disc;
}
.policy-section ul li {
  margin-bottom: var(--space-2);
}
.policy-section .rate-table-wrap {
  margin-top: var(--space-4);
}
.policy-callout {
  background: var(--color-surface-offset);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}
.policy-callout strong {
  color: var(--color-secondary);
}

@media (max-width: 640px) {
  .booking-ref-box {
    flex-direction: column;
  }
  .radio-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------------------
   Admin & sitter dashboards
   --------------------------------------------------------------------- */
.dash-login {
  max-width: 420px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.dash-login h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.dash-login p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.dash-login .field {
  margin-bottom: var(--space-4);
}
.dash-panel[hidden],
.dash-login[hidden] {
  display: none;
}
.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.dash-toolbar__who {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.dash-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.dash-tab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.dash-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.dash-tabpanel[hidden] {
  display: none;
}
.dash-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.dash-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.dash-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.dash-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}
.dash-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.dash-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.dash-kv dt {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.dash-kv dd {
  color: var(--color-text);
  font-weight: 500;
}
.dash-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.dash-checklist label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}
.dash-checklist input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-secondary);
}
.dash-smile-status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}
.dash-smile-status strong {
  color: var(--color-text);
}
.dash-docs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}
.dash-docs__missing {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
.dash-notes textarea {
  width: 100%;
  min-height: 64px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  resize: vertical;
  margin-bottom: var(--space-3);
}
.dash-card__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.dash-card__actions select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.dash-empty {
  text-align: center;
  color: var(--color-text-faint);
  padding: var(--space-10) 0;
  font-size: var(--text-sm);
}
.clash-warning {
  background: var(--color-error-highlight);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}
[data-theme='dark'] .btn--danger {
  background: #b33a3a;
  color: #fff8f4;
}
[data-theme='dark'] .btn--danger:hover {
  background: #c94848;
  filter: none;
  color: #fff8f4;
}

[data-theme='dark'] .clash-warning {
  color: var(--color-text);
}
.mini-cal {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.mini-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.mini-cal__head h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
}
.mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.mini-cal__dow {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding-bottom: var(--space-2);
}
.mini-cal__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--color-surface-2);
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--color-text);
}
.mini-cal__day--empty {
  visibility: hidden;
  cursor: default;
}
.mini-cal__day--booked {
  background: var(--color-secondary-highlight);
  color: var(--color-secondary);
  font-weight: 600;
  cursor: default;
}
.mini-cal__day--unavailable {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
  font-weight: 600;
}
.mini-cal__day--past {
  opacity: 0.35;
  cursor: default;
}
.mini-cal__legend {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.mini-cal__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.mini-cal__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

/* --- Calendar nav + admin calendar extras --- */
.mini-cal__nav {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  font-size: var(--text-base);
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mini-cal__nav:hover {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.mini-cal__day {
  position: relative;
}
.mini-cal__day--today {
  border-color: var(--color-primary);
}
.mini-cal__day--selected {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.mini-cal__day-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 0.6rem;
  line-height: 1;
  font-weight: 700;
  color: inherit;
  opacity: 0.75;
}
.admin-cal-day-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.admin-cal-day-detail h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}
.admin-cal-day-detail .dash-card-list,
.admin-cal-day-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.admin-cal-day-detail[hidden] {
  display: none;
}
.dash-card--compact {
  padding: var(--space-4);
}
.dash-card--compact .dash-card__title {
  margin-bottom: 2px;
}

/* --- Babysitter profile photo on admin cards --- */
.dash-card__photo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--color-divider);
  flex-shrink: 0;
}
.dash-card__photo--placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--color-text-faint);
  text-align: center;
  flex-shrink: 0;
}
.dash-card__photo-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* --- Manual booking modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 24, 18, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  overflow-y: auto;
  z-index: 200;
}
.modal-overlay[hidden] {
  display: none;
}
.modal-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  padding: var(--space-6);
  max-width: 640px;
  width: 100%;
  margin: auto;
}
.modal-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.modal-box__head h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

/* --- Babysitter browse cards (book.html) --- */
.sitter-browse {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sitter-browse__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.sitter-browse__empty {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  padding: var(--space-4) 0;
}
.sitter-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  position: relative;
}
.sitter-card input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sitter-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.sitter-card--none {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-weight: 600;
}
.sitter-card--unavailable {
  opacity: 0.55;
  cursor: not-allowed;
}
.sitter-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sitter-card__photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--color-divider);
  flex-shrink: 0;
}
.sitter-card__photo--placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-text-faint);
  flex-shrink: 0;
}
.sitter-card__name {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 2px;
}
.sitter-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
}
.sitter-card__rating {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-warning);
}
.sitter-card__rating--none {
  color: var(--color-text-faint);
  font-weight: 400;
}
.sitter-card__badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.sitter-card__badges span {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-secondary-highlight);
  color: var(--color-secondary);
  font-weight: 600;
}
.sitter-card__badges .badge-unavailable {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}

/* Honeypot field — invisible to real visitors (off-screen + unfocusable),
   but many spam bots auto-fill every input on a page, including this one.
   If it comes back non-empty, the server rejects the submission as spam. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* ============================================================
   Knowledge Hub — search, read progress, completion badge,
   language toggle (allergies/medication translations)
   ============================================================ */
.hub-search {
  margin-bottom: var(--space-6);
}
.hub-search input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.hub-search input:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 1px;
}
.hub-search__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-4) 0;
}

.hub-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.hub-progress__bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  overflow: hidden;
}
.hub-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  transition: width 0.3s ease;
}
.hub-progress__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hub-tab__check {
  color: var(--color-success);
  margin-left: var(--space-1);
}

.hub-lang-toggle {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.hub-lang-toggle button {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.hub-lang-toggle button[aria-selected='true'] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   REAL FAMILIES GALLERY
   ============================================================ */
.family-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.family-gallery__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 3/4;
}

.family-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.family-gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .family-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .family-gallery {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .family-gallery__caption {
    font-size: 0.7rem;
  }
}

.recruit-family-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  margin: var(--space-8) 0;
}

.recruit-family-note__media img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
  object-fit: cover;
}

@media (max-width: 760px) {
  .recruit-family-note {
    grid-template-columns: 1fr;
  }
}


/* Payout bank account change flow (admin). Visually separated from the rest of
   the sitter card because it is the one control on the page that moves money to
   a different destination -- it should not read as just another field. */
.banking-block {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface-2, rgba(0, 0, 0, 0.02));
}
.banking-block__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
}
.banking-block__current {
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.banking-block__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.banking-block__form {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.banking-block__warn {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-error-highlight, #fdecea);
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.5;
}
.banking-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.banking-block__msg:not(:empty) { margin-top: var(--space-3); }
.banking-block__history:not([hidden]) { margin-top: var(--space-3); }
.banking-log {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.banking-log th,
.banking-log td {
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.banking-log th {
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* The log is wider than a phone screen and the columns must stay readable,
   so it scrolls horizontally rather than compressing into unreadable wraps. */
.banking-block__history { overflow-x: auto; }
.banking-block__notice { margin-top: var(--space-3); }
/* The log scrolls horizontally, so a pill should never wrap mid-phrase. */
.banking-log .status-pill { white-space: nowrap; }


/* Paystack connection check. Each row must read as pass/fail at a glance
   without relying on colour alone, so every state carries a glyph too. */
.ps-checks { margin: var(--space-4) 0; padding: 0; list-style: none; }
.ps-check {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.ps-check:last-child { border-bottom: 0; }
.ps-check__icon {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}
/* The tick is a small bold glyph on a pale green chip. The shared
   --color-success (#3f7a4a) only reaches 3.92:1 against that chip, so this
   sets a darker green for the glyph specifically rather than lightening the
   chip, which would weaken the pass/fail colour difference. */
.ps-check--pass .ps-check__icon { background: var(--color-success-highlight); color: #23512c; }
[data-theme='dark'] .ps-check--pass .ps-check__icon { color: var(--color-success); }
.ps-check--fail .ps-check__icon { background: var(--color-error-highlight, #fdecea); color: var(--color-error, #b3261e); }
.ps-check--warn .ps-check__icon { background: var(--color-warning-highlight); color: var(--color-warning); }
.ps-check--skip .ps-check__icon { background: var(--color-surface-2, rgba(0,0,0,0.05)); color: var(--color-text-muted); }
.ps-check__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-check__label { font-weight: 600; }
.ps-check__detail { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.5; }
.ps-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
}
.ps-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-fact dt {
  /* --color-text-faint measures only 2.49:1 in light mode. These labels say
     which number is which on a payments screen, so they use the muted token
     that clears 4.5:1 instead. */
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ps-fact dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.ps-foot {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* The webhook URL must stay selectable and must not force the panel wider
   than the screen, so it wraps rather than overflowing. */
.ps-foot code {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Logged-out availability preview on the booking page. A visitor who has not
   signed in needs to learn whether we cover their town and what registering
   actually buys them, without us revealing a single babysitter's identity. */
#availability-preview {
  margin-top: var(--space-5);
}
#availability-preview .preview__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
#availability-preview h3.preview__title {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
#availability-preview p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.preview__check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-block: var(--space-4);
}
.preview__check .field {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
}
.preview__check .btn {
  flex: 0 0 auto;
  /* Match the input's height so the row reads as one control. */
  height: 46px;
}
.preview__list {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  color: var(--color-text-muted);
}
.preview__list li {
  margin-bottom: var(--space-2);
}
@media (max-width: 480px) {
  .preview__check .btn {
    width: 100%;
  }
}

/* Progress indicator for the long registration forms. Sticks below the site
   header so an applicant can always see which section she is in and how many
   required answers are left, without scrolling back to find out. The `top`
   value is set in form-progress.js from the header's measured height. */
.form-progress {
  position: sticky;
  top: 0;
  z-index: 90;
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  /* Opaque rather than translucent: form fields scroll underneath it, and
     text over moving text is unreadable. */
  background: var(--color-surface);
}
.form-progress__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.form-progress__step {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
}
.form-progress__name {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
  min-width: 0;
}
.form-progress__count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  /* Pushed to the end on a wide row, but wraps underneath on a phone rather
     than squeezing the section name. */
  margin-left: auto;
  white-space: nowrap;
}
.form-progress__track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.form-progress__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width 0.25s ease;
}
@media (max-width: 560px) {
  .form-progress__count {
    margin-left: 0;
    flex-basis: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .form-progress__fill {
    transition: none;
  }
}

/* Draft-saving notice on the long registration forms. Placed under the
   progress bar so an applicant reads it before she starts typing, not after
   she has already lost a bundle's worth of work. */
.form-draft {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
}
.form-draft p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.form-draft__lead strong {
  color: var(--color-text);
}
.form-draft__note {
  font-size: var(--text-xs);
}
.form-draft__status:empty {
  display: none;
}
.form-draft__status {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
}
.form-draft__clear {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  /* Comfortable to hit on a phone without looking like a primary action. */
  min-height: 32px;
}
.form-draft__clear:hover,
.form-draft__clear:focus-visible {
  color: var(--color-primary-hover);
}

/* ---- 18:00 day-booking cut-off notice (book.html) ------------------------ */
/* Sits inside .alert--warning, so colour comes from the alert. These rules
   only handle the internal layout of the explanation and the two transport
   choices, which are denser than a normal one-line alert. */
.late-finish__body {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.late-finish__options {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.late-finish__legend {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
}
.late-finish__options .checkbox-field {
  align-items: flex-start;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.late-finish__options .checkbox-field:last-child { margin-bottom: 0; }
.late-finish__options .checkbox-field input { margin-top: 0.2em; flex: none; }

/* Booking-page price estimate: four short columns, so it fits a phone
   without the 640px minimum the full rate tables need. */
table.rate-table#price-estimate-table {
  min-width: 0;
}
#price-estimate-table th,
#price-estimate-table td {
  padding: var(--space-2) var(--space-3);
}

/* Plain-language summary box at the top of the policies and terms pages. */
.policy-callout--summary {
  font-size: var(--text-base);
  margin: 0 0 var(--space-6) 0;
}
.policy-summary__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3) 0;
}
.policy-callout--summary ul {
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
}
.policy-callout--summary li {
  margin-bottom: var(--space-2);
}
.policy-summary__note {
  margin: var(--space-3) 0 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}