/* THE PUBLIC PAGES CHRIS DIDN'T DRAW — FAQ, the four legal pages, the
 * booking wizard — in the new site's look (Oct 2026 revamp). These are the
 * existing pages, unchanged, with this sheet laid over them; build-v2-site.py
 * writes the copies the proxy serves to a browser with the new UI turned on.
 * Wording, ids and behaviour are untouched (legal wording verbatim; the
 * wizard's ids are what its script and the e2e suite use).
 *
 * The look comes from the drawn pages: dark animated backdrop (home ember
 * silk; the scanner in living/auto.js turns the body's photo into it), a glass
 * pill nav, a crumb pill over a large Inter Tight title, content on smoked
 * glass cards, white pill buttons, and the dunes footer.
 */

:root { color-scheme: dark; --v2-sans: 'Inter Tight', -apple-system, system-ui, sans-serif; --v2-ac: #ffad7a; }
html { background: #1b1410 !important; }
body {
  background-color: #1b1410 !important; color: #fff !important; font-family: var(--v2-sans) !important;
  /* the scanner replaces this photograph with the living "home" scene */
  background-image: linear-gradient(180deg, rgba(26, 9, 4, 0.35) 0%, rgba(26, 9, 4, 0.15) 30%, rgba(14, 10, 8, 0.55) 70%, rgba(10, 8, 6, 0.85) 100%), url(/atlas-v2/site/images/4bce12e8c983c9cf5e27ff125b4e082d.jpg) !important;
  background-size: cover;
}
body *:not(svg, svg *) { font-family: var(--v2-sans) !important; font-style: normal !important; }
body.grain::before, body.grain::after, .particles { opacity: 0.25; }

/* Nav: the drawn site's — mark left, a glass pill of links, the white Sign in pill. */
.nav { position: absolute !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 26px 40px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nav .word, .nav-mark .word { color: #fff !important; letter-spacing: 0.32em !important; font-size: 13px !important; font-weight: 500 !important; }
.nav-links {
  background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 999px !important;
  padding: 5px !important; gap: 2px !important; -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
.nav-links a { color: #fff !important; font-size: 13.5px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 8px 16px !important; border-radius: 999px !important; opacity: 0.9; }
.nav-links a:hover, .nav-links a.active { background: rgba(255, 255, 255, 0.18) !important; opacity: 1; }
.nav-cta, .nav-cta:hover { background: #fff !important; color: #1b1410 !important; border: 0 !important; border-radius: 999px !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 20px !important; }

/* The phone menu (atlas-common.js): three white bars, no circle (Rob, 8 Oct). */
.nav-burger { width: 44px !important; height: 44px !important; background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-burger span { background: #fff !important; }
/* Its drawer: the drawn menu's smoked glass, white links, the site's pills. */
.nav-drawer { background: rgba(27, 20, 16, 0.82) !important; -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  border-left: 1px solid rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
.nav-drawer a, .nav-drawer-inner a { color: #fff !important; font-size: 20px !important; letter-spacing: -0.01em !important; text-transform: none !important; border-color: rgba(255, 255, 255, 0.12) !important; }
.nav-close span { background: #fff !important; }
.nav-drawer-cta { border-color: rgba(255, 255, 255, 0.12) !important; background: transparent !important; }
.nav-drawer-cta a { border-radius: 999px !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; }
.nav-drawer-cta .ndc-up { background: #fff !important; color: #1b1410 !important; border-color: #fff !important; }
.nav-drawer-cta .ndc-in { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; }

/* The mark: the drawn site's (Rob, 6 Oct: the old filled circle was "wrong") — a 44px  in the mark
   face inside a thin ring of the four pillar colours. Nav, footer, and /schedule's pillar cards, summary
   and confirmation (Rob, 6 Oct: "full sweep for the crest"). */
.nav .nav-mark .circle, .site-footer .atlas-mark, .sched :is(.pillar-pick .mark, .summary-pillar-mark, .confirm-mark) {
  position: relative; width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 50%; background: none !important;
  display: grid !important; place-items: center; color: #fff !important; line-height: 1;
  font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 24px !important; font-weight: 300 !important; font-style: normal !important; letter-spacing: 0;
}
.nav .nav-mark .circle::before, .site-footer .atlas-mark::before, .sched :is(.pillar-pick .mark, .summary-pillar-mark, .confirm-mark)::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; border: 0 !important; background-color: transparent !important;
  background-image: conic-gradient(transparent 0 4deg, #2c5a4a 4deg 86deg, transparent 86deg 94deg, #8c5238 94deg 176deg, transparent 176deg 184deg, #6e2a35 184deg 266deg, transparent 266deg 274deg, #4b5d6e 274deg 356deg, transparent 356deg) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - clamp(2px, 13.6%, 3px)), #000 calc(100% - clamp(2px, 13.6%, 3px) + 0.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - clamp(2px, 13.6%, 3px)), #000 calc(100% - clamp(2px, 13.6%, 3px) + 0.5px));
}
.sched .confirm-hero .confirm-mark.confirm-mark { display: inline-grid !important; width: 64px !important; height: 64px !important; font-size: 40px !important; }
/* The pillar cards' mark is that pillar's colour in all four quadrants (Rob, 6 Oct: "all four
   quadrants would be green on the Integrated Health choice"). */
.sched .pillar-pick[data-pillar="health"] { --q: #2c5a4a; }
.sched .pillar-pick[data-pillar="wellness"] { --q: #8c5238; }
.sched .pillar-pick[data-pillar="therapy"] { --q: #6e2a35; }
.sched .pillar-pick[data-pillar="living"] { --q: #4b5d6e; }
.sched .pillar-pick[data-pillar] .mark::before {
  background-image: conic-gradient(transparent 0 4deg, var(--q) 4deg 86deg, transparent 86deg 94deg, var(--q) 94deg 176deg, transparent 176deg 184deg, var(--q) 184deg 266deg, transparent 266deg 274deg, var(--q) 274deg 356deg, transparent 356deg) !important;
}
/* Provider photos: the chosen pillar's ring around them, the same four quadrants (Rob, 6 Oct). On
   "With whom?" and in the profile pop-up. The photo is rounded itself so the ring can sit outside it. */
.sched:has(.pillar-pick.selected[data-pillar="health"]), body:has(.pillar-pick.selected[data-pillar="health"]) .pf-modal { --pq: #2c5a4a; }
.sched:has(.pillar-pick.selected[data-pillar="wellness"]), body:has(.pillar-pick.selected[data-pillar="wellness"]) .pf-modal { --pq: #8c5238; }
.sched:has(.pillar-pick.selected[data-pillar="therapy"]), body:has(.pillar-pick.selected[data-pillar="therapy"]) .pf-modal { --pq: #6e2a35; }
.sched:has(.pillar-pick.selected[data-pillar="living"]), body:has(.pillar-pick.selected[data-pillar="living"]) .pf-modal { --pq: #4b5d6e; }
.sched .provider-row .avatar, .pf-modal .pf-av { overflow: visible !important; }
.sched .provider-row .avatar img, .pf-modal .pf-av img { border-radius: 50%; }
.sched .provider-row .avatar::after, .pf-modal .pf-av::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(transparent 0 4deg, var(--pq, #2c5a4a) 4deg 86deg, transparent 86deg 94deg, var(--pq, #2c5a4a) 94deg 176deg, transparent 176deg 184deg, var(--pq, #2c5a4a) 184deg 266deg, transparent 266deg 274deg, var(--pq, #2c5a4a) 274deg 356deg, transparent 356deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - clamp(2px, 13.6%, 3px)), #000 calc(100% - clamp(2px, 13.6%, 3px) + 0.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - clamp(2px, 13.6%, 3px)), #000 calc(100% - clamp(2px, 13.6%, 3px) + 0.5px));
}

/* Page top: crumb pill + large title. */
:is(.pg-hero, .legal-hero) { background: transparent !important; border: 0 !important; padding-top: 48px !important; }
:is(.pg-eyebrow, .legal-hero .eyebrow) {
  display: inline-flex !important; border-radius: 999px; padding: 7px 14px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important;
}
:is(.pg-eyebrow, .eyebrow) span { color: #fff !important; }
:is(.pg-hero, .legal-hero) h1 {
  color: #fff !important; font-size: clamp(48px, 7vw, 92px) !important; font-weight: 400 !important; letter-spacing: -0.055em !important; line-height: 0.95 !important; text-transform: none !important;
}
:is(.pg-hero, .legal-hero) h1 em { color: #fff !important; opacity: 0.55; }
:is(.lede, .legal-meta, .legal-meta span, .legal-meta strong) { color: rgba(255, 255, 255, 0.8) !important; }

/* Content on smoked glass. */
:is(.faq-wrap .cat-section, .legal-body, .closing-cta) {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  padding: 28px 32px !important; margin: 0 auto 18px !important; color: #fff !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 70px -44px rgba(0, 0, 0, 0.7);
}
:is(.cat-section, .legal-body, .closing-cta) :is(h2, h3, h4, strong, .q, span.q) { color: #fff !important; font-weight: 400; letter-spacing: -0.02em; }
:is(.cat-section, .legal-body, .closing-cta) :is(p, li, td, th, .a, .cat-desc, dd, dt) { color: rgba(255, 255, 255, 0.8) !important; }
:is(.cat-section, .legal-body) h2 { font-size: 26px !important; }
:is(.cat-section, .legal-body, .closing-cta) a { color: #fff !important; text-decoration-color: rgba(255, 255, 255, 0.5) !important; }
.qa { border-color: rgba(255, 255, 255, 0.1) !important; }
.qa .ic { color: var(--v2-ac) !important; border-color: rgba(255, 255, 255, 0.3) !important; }
.legal-body table, .anchor-table { border-color: rgba(255, 255, 255, 0.14) !important; }
.legal-body :is(th, td), .anchor-table :is(th, td) { border-color: rgba(255, 255, 255, 0.12) !important; background: transparent !important; }
:is(.btns, .closing-cta) a, a.filled, .filled { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; }
a.filled, .btns a.filled { background: #fff !important; color: #1b1410 !important; border-color: #fff !important; }

/* Footer: the drawn pages' footer, laid over the same content (Rob, 8 Oct: the /faq footer was "like an
   old ui"). The dunes band (the scanner makes the photo move), the links in one glass card — the brand and
   its line, then Anchors, Subsidiaries (with their pillar dots) and Company — and the legal row under it. */
.site-footer {
  color: #fff !important; border: 0 !important; padding: 96px 40px 0 !important;
  background-image: linear-gradient(180deg, rgba(20, 10, 8, 0.55), rgba(20, 10, 8, 0.85)), url(/atlas-v2/site/images/bd4f1a58b168c119058324d2e2b8a796.jpg) !important;
  background-size: cover !important; background-position: center !important;
}
.site-footer .footer-inner {
  max-width: 1160px; margin: 0 auto; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; padding: 48px; border-radius: 40px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
.site-footer .footer-brand .mark { margin: 0; gap: 12px; }
.site-footer .footer-brand .word { color: #fff !important; font-size: 13px !important; font-weight: 500; letter-spacing: 0.32em !important; }
.site-footer .footer-brand p { margin: 24px 0 0; font-size: 30px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 400; color: rgba(255, 255, 255, 0.55) !important; }
.site-footer .footer-brand p::first-line { color: #fff; }
.site-footer .footer-col h4 { margin: 0 0 16px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, 0.65) !important; }
.site-footer .footer-col li { margin: 0; font-size: 15px; }
.site-footer .footer-col li a { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: #fff !important; text-decoration: none; }
.site-footer .footer-col a[href^="/pillars/"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.site-footer .footer-col a[href="/pillars/health"]::before { background: #a9d3bf; }
.site-footer .footer-col a[href="/pillars/wellness"]::before { background: #f0b48e; }
.site-footer .footer-col a[href="/pillars/therapy"]::before { background: #e3a6ae; }
.site-footer .footer-col a[href="/pillars/living"]::before { background: #b4c4d2; }
/* Off-site: a drawn arrow, not the ↗ character, which an iPhone draws as an emoji (Rob, 8 Oct). */
.site-footer .footer-col a[href^="http"]::after {
  content: ""; width: 9px; height: 9px; flex: none; background: currentColor; opacity: 0.8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-footer .footer-base {
  max-width: 1160px; margin: 0 auto; padding: 28px 8px 40px; border: 0 !important; gap: 12px; flex-wrap: wrap;
  font-size: 13px; letter-spacing: 0 !important; text-transform: none !important;
}
.site-footer .footer-base, .site-footer .footer-base * { color: rgba(255, 255, 255, 0.7) !important; }
@media (max-width: 900px) { .site-footer .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px; } }
@media (max-width: 600px) { .site-footer { padding: 96px 16px 0 !important; } .site-footer .footer-inner { grid-template-columns: minmax(0, 1fr); } }


/* Fixes after the first look (6 Oct). */
.nav-links { flex: 0 0 auto !important; margin: 0 auto !important; width: auto !important; }
:is(.pg-hero, .legal-hero) { padding-top: 110px !important; }
:is(.cat-section, .legal-body, .closing-cta, .pg-hero, .legal-hero) :is(h1, h2, h3, h4) em,
:is(.cat-section, .legal-body) .q em { color: var(--v2-ac) !important; opacity: 1 !important; }
:is(.pg-hero, .legal-hero) h1 em { color: #fff !important; opacity: 0.55 !important; }
.callout, .legal-body .callout {
  background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 20px !important; color: rgba(255, 255, 255, 0.85) !important;
}
.callout * { color: rgba(255, 255, 255, 0.85) !important; }
.callout strong, .callout b { color: #fff !important; }
.anchor-table, .anchor-table * { background: transparent !important; color: rgba(255, 255, 255, 0.85) !important; }
.anchor-table th { color: var(--v2-ac) !important; }
.lede a { color: #fff !important; text-decoration-color: rgba(255, 255, 255, 0.5) !important; }
:is(.legal-body, .cat-section, .faq-wrap) em, .a em { color: #fff !important; }

/* ── The booking wizard (/schedule), rebuilt (Rob, 6 Oct: "needs an ass load
   of work"). The title sits on the backdrop like every drawn page's; the step
   is ONE smoked card; Back / Continue are pills under it; the summary is the
   matching card beside it. Choices are glass; a chosen one takes the accent
   wash (a 16% tint and a 45% hairline of the accent, all the way round — the
   app's selected-row look); times and the calendar's day take the white pill.
   The page's script, ids and wording are untouched. */
.sched { --g-card: rgba(10, 18, 14, 0.42); --g-edge: rgba(255, 255, 255, 0.16); --g-tile: rgba(255, 255, 255, 0.07); --g-tile-edge: rgba(255, 255, 255, 0.16);
  --wash-on: color-mix(in srgb, var(--v2-ac) 16%, transparent); --edge-on: color-mix(in srgb, var(--v2-ac) 55%, transparent);
  max-width: 1280px !important; padding: 132px 40px 96px !important; grid-template-columns: minmax(0, 1fr) 360px !important; gap: 24px !important; align-items: start; }
/* The stage lends its children to the page grid, so the title spans both
   columns and the summary's top lines up with the step card's (the script's
   own offset, which lined it up with the old layout's first tile, is unused). */
.sched { row-gap: 0 !important; }
.sched .stage { display: contents; }
.sched h1.stage-title { grid-column: 1 / -1; grid-row: 1; }
.sched .panel { grid-column: 1; grid-row: 2; }
.sched .footnav { grid-column: 1; grid-row: 3; }
.sched .book-error { grid-column: 1; grid-row: 4; }
.sched .summary { grid-column: 2; grid-row: 2 / span 3; padding-top: 0 !important; align-self: start; }
.sched h1.stage-title { margin: 0 0 28px; color: #fff; font-size: clamp(44px, 6vw, 84px); font-weight: 400; line-height: 0.95; letter-spacing: -0.055em; }
.sched h1.stage-title em { color: #fff; opacity: 0.55; }

/* You're set: the summary steps aside, so the card takes the middle. */
.sched:has(> .summary[hidden]) .panel { grid-column: 1 / -1; width: 100%; max-width: 820px; justify-self: center; }
.sched:has(> .summary[hidden]) h1.stage-title { max-width: 820px; width: 100%; justify-self: center; }

/* The step: one smoked card. */
.sched .panel { background: var(--g-card); border: 1px solid var(--g-edge); border-radius: 32px; padding: 36px 40px 40px; color: #fff; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 70px -44px rgba(0, 0, 0, 0.7); }
/* The card's blur sits on a layer behind its content: Chrome can't blur through a blurred
   ancestor, so a dropdown opened in the card couldn't blur what's behind it. */
.sched .panel.active { position: relative; }
.sched .panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); }
/* The step's entrance: the card slides, its contents fade. Fading the card itself (the page's
   panelIn) made Chrome draw the blur layer above black until something repainted it (Rob, 6 Oct:
   "Choose a service" started black and came right on hover). */
.sched .panel { animation-name: v2PanelSlide; }
.sched .panel.active > * { animation: v2PanelFade 650ms cubic-bezier(.2, .8, .2, 1); }
@keyframes v2PanelSlide { from { transform: translateY(14px); } to { transform: translateY(0); } }
@keyframes v2PanelFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sched .panel, .sched .panel.active > * { animation: none; } }
:root[data-reduce-motion] :is(.sched .panel, .sched .panel.active > *) { animation: none; }
.sched .panel h2 { margin: 0 0 26px; color: #fff; font-size: 34px; font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; }
.sched .panel h2 em { color: #fff; opacity: 0.55; }
.sched .panel :is(.lede, .lede-sub) { color: rgba(255, 255, 255, 0.8); font-size: 15px; line-height: 1.6; }
.sched .panel .lede strong { color: #fff; font-weight: 500; }
.sched .already-have { margin: 22px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 13.5px; }
.sched :is(.already-have, .panel, .resend-line) a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }
.sched :is(.n, .r-k, .pf-label, .field-label) { font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--v2-ac) !important; }
.sched .soon-tag { display: inline-flex; margin-top: 12px; padding: 5px 12px; border-radius: 999px; font-size: 12px; letter-spacing: 0; text-transform: none;
  color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24); }

/* Choices: glass tiles; chosen = the accent wash. */
.sched :is(.pillar-pick, .service-pick, .provider-row) { background: var(--g-tile); border: 1px solid var(--g-tile-edge); border-radius: 24px; color: #fff; box-shadow: none; transform: none; }
.sched :is(.pillar-pick, .service-pick, .provider-row)::before { display: none; }
.sched :is(.pillar-pick, .service-pick, .provider-row):hover:not([disabled]) { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); transform: none; box-shadow: none; }
.sched :is(.pillar-pick, .service-pick, .provider-row).selected { background: var(--wash-on); border-color: transparent; box-shadow: inset 0 0 0 1px var(--edge-on); }
.sched :is(.pillar-pick, .service-pick)[disabled] { opacity: 0.6; filter: none; }
.sched .pillar-pick { padding: 26px 24px 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.sched .pillar-pick .mark { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.sched .pillar-pick .t { margin: 6px 0 8px; color: #fff; font-size: 26px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.sched :is(.pillar-pick, .service-pick, .provider-row) :is(.d, .spec, .where) { color: rgba(255, 255, 255, 0.74); }
.sched :is(.pillar-pick .check, .service-pick .radio, .provider-row .radio) { border-color: rgba(255, 255, 255, 0.45); background: transparent; }
.sched :is(.pillar-pick.selected .check, .service-pick.selected .radio, .provider-row.selected .radio) { background: #fff; border-color: #fff; }
.sched .pillar-pick.selected .check::after { color: #1b1410; }
.sched :is(.service-pick, .provider-row).selected .radio::after { background: #1b1410; }
.sched .service-pick { padding: 20px 24px; }
.sched .service-pick .label .t { color: #fff; font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.sched .service-pick .meta { color: rgba(255, 255, 255, 0.6); font-size: 11px; letter-spacing: 0.14em; }
.sched .service-pick .meta .big { color: #fff; font-family: var(--v2-sans); font-size: 20px; }
/* The hairline is an outline drawn inside, not a border, so a photo still fills the circle exactly. */
.sched .provider-row .avatar { background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; outline: 1px solid rgba(255, 255, 255, 0.2); outline-offset: -1px; }
.sched .provider-row .name { color: #fff; font-size: 21px; font-weight: 400; letter-spacing: -0.02em; text-decoration-color: rgba(255, 255, 255, 0.35); }
.sched .provider-row .tag { color: rgba(255, 255, 255, 0.85); }
.sched .provider-row .where b { color: #fff; }
.sched .provider-row .mods span { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.24); }
.sched .provider-row:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* When: the calendar is a glass tile; days are discs; the chosen day and
   time are white pills. */
.sched .calendar { background: var(--g-tile); border: 1px solid var(--g-tile-edge); border-radius: 24px; padding: 20px 20px 16px; }
.sched .cal-dow { font-size: 11px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.sched .cal-head .m { color: #fff; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.sched .cal-nav button { border-color: rgba(255, 255, 255, 0.26); color: #fff; background: transparent; }
.sched .cal-nav button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.sched .cal-day { color: #fff; font-family: var(--v2-sans); font-size: 15px; }
.sched .cal-day.has { background: rgba(255, 255, 255, 0.12); }
.sched .cal-day:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); color: #fff; }
.sched .cal-day:disabled, .sched .cal-day.off { color: rgba(255, 255, 255, 0.3); }
.sched .cal-day.today::after { background: var(--v2-ac); }
.sched .cal-day.selected, .sched .cal-day.selected:hover { background: #fff; color: #1b1410; }
.sched .slot { background: var(--g-tile); border: 1px solid var(--g-tile-edge); border-radius: 999px; color: #fff; font-family: var(--v2-sans); font-size: 15px; }
.sched .slot:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.sched .slot.selected, .sched .slot.selected:hover { background: #fff; border-color: #fff; color: #1b1410; }
.sched .slot.selected * { color: #1b1410; }
.sched .mode-pick { border-radius: 20px; text-align: left; }
.sched :is(.mode-b, .mode-note) { color: rgba(255, 255, 255, 0.7); }
.sched .slots-empty { color: rgba(255, 255, 255, 0.7); font-style: normal; font-family: var(--v2-sans); }
.sched .slot-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); }

/* Your details: glass fields, chips as pills. */
.sched .field label, .sched .consent label { color: rgba(255, 255, 255, 0.8); font-size: 13px; letter-spacing: 0; text-transform: none; }
.sched .field .req { color: var(--v2-ac); }
.sched :is(.field input, .field select, .field textarea) { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; border-radius: 14px; font-size: 15px; }
.sched :is(.field input, .field select, .field textarea):focus { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); outline: none; }
.sched :is(input, textarea)::placeholder { color: rgba(255, 255, 255, 0.45); }
.sched select option { color: #1b1410; background: #fff; }
.sched .ins-chip { background: var(--g-tile); border: 1px solid var(--g-tile-edge); border-radius: 999px; color: #fff; }
.sched .ins-chip:hover:not(.selected) { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.sched .ins-chip.selected, .sched .ins-chip.on, .sched .ins-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: #1b1410; }
.sched .consent { color: rgba(255, 255, 255, 0.8); }
.sched .consent input { accent-color: #fff; }

/* You're set. */
.sched .confirm-mark { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.sched .receipt { background: var(--g-tile); border: 1px solid var(--g-tile-edge); border-radius: 24px; }
.sched .receipt .r-v { color: #fff; font-family: var(--v2-sans); font-weight: 400; letter-spacing: -0.01em; }
.sched .receipt .r-v.code { color: var(--v2-ac); font-family: ui-monospace, monospace; }
.sched .receipt .r-v :is(em, small) { color: rgba(255, 255, 255, 0.65); }
.sched .keep-btn { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; border-radius: 999px; font-size: 14px; letter-spacing: 0; text-transform: none; }
.sched .keep-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.sched .resend-line { color: rgba(255, 255, 255, 0.72); }
.sched #btn-resend { background: none; border: 0; padding: 0; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); font: inherit; cursor: pointer; }

/* Back and Continue: pills under the card. */
.sched .footnav { margin-top: 18px; padding: 0; border: 0; }
.sched .footnav .back { height: 48px; padding: 0 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff;
  font-size: 14px; letter-spacing: 0; text-transform: none; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.sched .footnav .back:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.sched .footnav .next { height: 52px; padding: 0 28px; border-radius: 999px; background: #fff; border: 0; color: #1b1410; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sched .footnav .next:hover:not(:disabled) { background: rgba(255, 255, 255, 0.9); transform: none; }
.sched .footnav .next:disabled { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.5); }
.sched .book-error { margin-top: 14px; padding: 14px 18px; border-radius: 18px; background: rgba(140, 40, 30, 0.45); border: 1px solid rgba(255, 160, 140, 0.4); color: #fff; }

/* The summary: the matching card. */
.sched .summary-card { background: var(--g-card); border: 1px solid var(--g-edge); border-radius: 32px; padding: 28px 28px 26px; color: #fff;
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 70px -44px rgba(0, 0, 0, 0.7); }
.sched .summary-pillar-mark { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.sched .summary-head { border-color: rgba(255, 255, 255, 0.14); }
.sched .summary-head .t { color: #fff; font-size: 24px; font-weight: 400; letter-spacing: -0.03em; }
.sched .summary-head .t em { color: #fff; opacity: 0.55; }
.sched .summary-head .n { color: rgba(255, 255, 255, 0.6) !important; }
.sched .s-row .k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.sched .s-row .v { color: #fff; font-size: 16px; font-family: var(--v2-sans); }
.sched .s-row.empty .v { color: rgba(255, 255, 255, 0.5); font-style: normal; font-family: var(--v2-sans); }
.sched .s-row.active .k { color: var(--v2-ac); }

/* The provider profile: the pop-ups' light frosted glass. */
.pf-scrim { background: rgba(14, 10, 8, 0.45) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pf-modal { background: rgba(250, 246, 240, 0.86) !important; -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important; border-radius: 32px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 40px 90px -40px rgba(20, 8, 4, 0.7) !important; }
.pf-modal, .pf-modal * { color: #1b1410; }
.pf-modal .pf-label { color: #8a3712 !important; }
.pf-modal :is(.pf-spec, .pf-where, .pf-bio) { color: #574e45; }
.pf-modal .pf-tags span { border-color: rgba(27, 20, 16, 0.18); }
.pf-modal .pf-x { border-radius: 999px; }

@media (max-width: 1100px) {
  .sched { grid-template-columns: minmax(0, 1fr) !important; padding: 112px 20px 64px !important; }
  .sched .summary { grid-column: 1; grid-row: 5; margin-top: 24px; }
  .sched .panel { padding: 26px 22px 28px; border-radius: 28px; }
  .sched .panel h2 { font-size: 28px; }
}
/* On a phone the calendar fits the card: its column may shrink, and the days
   size to the space (seven 38px discs and their gaps were 332px in 289). */
@media (max-width: 760px) {
  .sched .dt-wrap { grid-template-columns: minmax(0, 1fr); }
  .sched .calendar { padding: 16px 12px 12px; min-width: 0; }
  .sched .cal-grid { gap: 4px 2px; }
  .sched .cal-day { width: min(36px, 100%); height: auto; aspect-ratio: 1; }
}

/* Dropdowns (glass-select.js): the field looks like the page's other fields; the list is the app's
   frosted list (Rob, 6 Oct: the whole external scheduling flow on the app's dropdowns). The native
   select is laid invisibly under the button: it is still what the form sends and what the keyboard
   and screen reader use. */
.gsel { position: relative; display: block; }
.gsel-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none; margin: 0 !important; }
.gsel-btn {
  display: block; width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; text-align: left; cursor: pointer;
  border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff;
  font-family: var(--v2-sans); font-size: 15px; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsel-btn.is-empty { color: rgba(255, 255, 255, 0.55); }
/* The same chevron as every dropdown in the app, clear of the edge (Rob, 6 Oct). */
.gsel-btn { padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.gsel.is-open .gsel-btn, .gsel:has(.gsel-native:focus-visible) .gsel-btn { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); }
.gsel-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 18px; text-align: left; color-scheme: light;
  background: rgba(250, 246, 240, 0.86); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 40px 90px -40px rgba(20, 8, 4, 0.7);
}
.gsel-opt { padding: 10px 16px; border-radius: 12px; font-size: 14px; color: #1b1410 !important; cursor: pointer; }
.gsel-opt:hover { background: rgba(27, 20, 16, 0.06); }
.gsel-opt[aria-selected="true"] { background: rgba(27, 20, 16, 0.08); box-shadow: inset 0 0 0 1px rgba(27, 20, 16, 0.18); }

/* Page to page cross-fades rather than cuts (Rob, 6 Oct). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
:root[data-reduce-motion]::view-transition-old(root), :root[data-reduce-motion]::view-transition-new(root) { animation: none; }