/* Personal Coach's website look, worn by the booking steps
   (public/customer/booking/index.html at /s/<name>/book/now) when the coach has
   the website on. ⚠ ONLY COLOURS, TYPE AND CORNERS: the booking page's layout
   and every step stay its own. The two looks match site.css's White and Black.
   `html[data-coach]` outranks the page's own :root, including its dark-mode
   block, so the coach's pick wins whatever the phone is set to. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html[data-coach="white"] {
  --bg: #FFFFFF; --card: #FFFFFF; --ink: #0B0B0B; --ink-2: #2B2B2B; --ink-3: #6B6B6B; --ink-4: #9A9A9A; --line: #E6E6E4;
  --accent: #0B0B0B; --accent-ink: #0B0B0B; --accent-fill: #0B0B0B; --on-accent: #FFFFFF;
  --soft: #F5F5F3; --star: #0B0B0B;
}
html[data-coach="black"] {
  --bg: #0A0A0A; --card: #0A0A0A; --ink: #F4F4F2; --ink-2: #D6D6D3; --ink-3: #9B9B98; --ink-4: #6E6E6B; --line: #2A2A2A;
  --accent: #F4F4F2; --accent-ink: #F4F4F2; --accent-fill: #F4F4F2; --on-accent: #0A0A0A;
  --soft: #151515; --star: #F4F4F2; --green: #5AD08A; --red: #FF8A80;
}
html[data-coach] body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); }
html[data-coach] *:not(.spin):not(.step-n) { border-radius: 0 !important; }
html[data-coach] .card { border-color: var(--line); }
html[data-coach] .card-t { font-weight: 700; letter-spacing: -.01em; }
html[data-coach] .pick.on { background: var(--soft); box-shadow: inset 0 0 0 1px var(--accent); }
html[data-coach] .policy, html[data-coach] .phone-p { background: var(--soft); }
html[data-coach] .cta { font-weight: 600; letter-spacing: 0; }
html[data-coach] .cta:hover { opacity: .88; }

/* The coach's name and the way back sit in the bar; the page's own photo,
   name and intro are the website's job. */
html[data-coach] #top .hero, html[data-coach] #top .biz, html[data-coach] #top .intro { display: none; }
html[data-coach] #top .head { padding-top: 28px; }
.coach-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1240px; margin: 0 auto; padding: 18px 24px; border-bottom: 1px solid var(--line); font-family: 'Inter', system-ui, sans-serif; }
.coach-bar a { color: var(--ink); text-decoration: none; }
.coach-name { font-weight: 800; font-size: 19px; letter-spacing: -.03em; text-transform: uppercase; }
.coach-back { font-size: 14px; font-weight: 500; color: var(--ink-3) !important; }
.coach-back:hover { color: var(--ink) !important; }
@media (max-width: 620px) { .coach-bar { padding: 14px 16px; } .coach-name { font-size: 16px; } }