/* Custom scheduler prototype — Lumin Health.
   Palette + type: AUTHORITATIVE, mirrored from the Brand Guide (May 2025) tokens at
   DOMAINS/brand/visual-identity/design-tokens.css. Coral + deep indigo on WARM off-white;
   NO royal blue, no bluish neutrals. Aleo = headings only; Lato = body/labels/buttons
   (do NOT invert). First-party CSS = part of the "no iframe, sub-second" win (Pain B). */
:root {
  /* ---- Brand tokens (authoritative — Brand Guide pp.15-16) ---- */
  --coral-orange: #f67958;
  --coral-red:    #ff5a5f;
  --deep-indigo:  #2c2c54;
  --off-white:    #f8f7f5;
  --brand-gradient: linear-gradient(135deg, var(--coral-orange), var(--coral-red));
  --font-heading: "Aleo", Georgia, "Times New Roman", serif;
  --font-body:    "Lato", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---- Component semantic mapping ---- */
  --indigo:   var(--deep-indigo);  /* headings, primary text */
  --indigo-2: #5a5a7c;             /* secondary text — tint of deep indigo */
  --coral:    var(--coral-red);    /* primary accent / selected */
  --coral-d:  #d6454b;             /* deepened coral-red for text links (legibility) */
  --ink:      var(--deep-indigo);  /* body text */
  --line:     #ece8e2;             /* warm hairline (off-white-derived) */
  --bg:       var(--off-white);    /* warm page background */
  --card:     #ffffff;
  --tint:     #fbefea;             /* warm coral-tinted fill (was bluish #f3f2fb) */
  --ok:       #6f8d86;             /* deepened muted-sage for success states */
  --radius:   18px;                /* brand --radius-sm, slightly softer */
  /* layered shadow reads more premium than one big blur */
  --shadow:   0 1px 3px rgba(44,44,84,.05), 0 14px 38px rgba(44,44,84,.11);
  --ring:     0 0 0 3px rgba(255,90,95,.18); /* coral focus-visible ring */
}
* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.card {
  max-width: 560px; margin: 32px auto; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  position: relative;
}
/* signature gradient hairline across the card top — premium brand cue */
.card::before { content: ""; display: block; height: 4px; background: var(--brand-gradient); }
/* ── Header ── */
.hd { padding: 28px 28px 20px; border-bottom: 1px solid var(--line); }
.brand {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: .3px;
  font-size: 15px; margin-bottom: 12px; line-height: 1; padding: 1px 0; display: inline-block;
  /* signature gradient wordmark (Brand Guide approved: gradient on white) */
  background: var(--brand-gradient); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.title { font-family: var(--font-heading); font-weight: 800; color: var(--indigo);
  font-size: 30px; line-height: 1.04; letter-spacing: -.01em; margin: 0 0 8px; }
.sub { margin: 0; color: var(--indigo-2); font-size: 14px; line-height: 1.45; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(111,141,134,.18); }

/* ── Steps ── */
.step { padding: 22px 28px 28px; display: none; }
.step.is-active { display: block; }
.step-h { font-family: var(--font-heading); font-weight: 700; color: var(--indigo);
  font-size: 19px; margin: 0 0 4px; }
.step-note { color: var(--indigo-2); font-size: 13px; margin: 0 0 16px; }

/* ── Calendar (rolling 4-week grid; DEC-2026-06-29-002) ──
   Week-aligned grid covering today → +28d. Dense near-term, no sparse
   block-month tail: past days + days beyond the rolling window are disabled. */
/* Mobile-first: calendar stacked above the day's times. Side-by-side once the
   widget is wide enough (Trishan review 2026-07-01: kill the right-side blank
   space, horizontal on web). The media query keys off the IFRAME's own width,
   not the page — the embed iframe renders ~516px in the /consultation host box,
   so the breakpoint is 500px (a 560px breakpoint never fired: the iframe is
   narrower than that even on desktop). Phones portrait (<=430px) stay stacked. */
.cal-wrap { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 500px) {
  .cal-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  /* the day's times panel is the right column; give it a min height so the
     grid doesn't jump as slots load */
  .cal-wrap .daypanel { min-height: 1px; }
  /* at the tighter side-by-side width the time pills need a smaller min so they
     don't overflow their 2nd column */
  .cal-wrap .times { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
/* minmax(0,1fr) — NOT 1fr — so the 7 columns can shrink below their content
   min-width on narrow screens instead of overflowing the card (mobile overflow
   bug, found in dogfood 2026-06-30). */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dow { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--indigo-2); text-transform: uppercase; padding-bottom: 4px; }
.cal .cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.cal .d {
  width: 100%; height: 100%; border: 1px solid transparent; border-radius: 11px;
  background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--indigo);
  cursor: pointer; position: relative;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.cal .d.has { background: var(--tint); border-color: #f3ded6; }
.cal .d.has::after { content: ""; position: absolute; bottom: 6px; left: 50%;
  transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.cal .d.has:hover { border-color: var(--coral); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,90,95,.16); }
.cal .d.sel { background: var(--coral); color: #fff; border-color: var(--coral);
  box-shadow: 0 6px 16px rgba(255,90,95,.36); }
.cal .d.sel::after { background: #fff; }
.cal .d.off { color: #cbcad6; cursor: default; background: none; font-weight: 600; }
.cal .d.off::after { display: none; }
.cal .d:focus-visible { outline: none; box-shadow: var(--ring); }
.cal .d.sel:focus-visible { box-shadow: 0 6px 16px rgba(255,90,95,.36), var(--ring); }

/* selected-day time panel */
/* Trishan review 2026-07-01: add a clear line break between the day heading
   ("Thursday, July 2nd") and the time slots for layout clarity (esp. mobile). */
.daypanel .dp-h { font-family: var(--font-heading); font-weight: 700; color: var(--indigo);
  font-size: 15px; margin: 0 0 18px; }
/* tidy aligned grid of time pills (was ragged flex-wrap) */
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.slot {
  border: 1px solid var(--line); background: #fff; color: var(--indigo);
  font: inherit; font-size: 13px; font-weight: 700; padding: 11px 10px;
  border-radius: 10px; cursor: pointer; text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.slot:hover { border-color: var(--coral); color: var(--coral-d); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,90,95,.16); }
.slot:focus-visible { outline: none; border-color: var(--coral); box-shadow: var(--ring); }
.empty { color: var(--indigo-2); font-size: 13px; padding: 18px 0; text-align: center; }

/* skeleton */
.sk-cal { height: 230px; border-radius: 10px;
  background: linear-gradient(90deg, #efe9e3 25%, #f7f2ec 37%, #efe9e3 63%);
  background-size: 400% 100%; animation: sk 1.2s ease infinite; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Form ── */
.back { background: none; border: none; color: var(--coral-d); font: inherit;
  font-weight: 700; cursor: pointer; padding: 2px 0 12px; border-radius: 6px; }
.back:hover { color: var(--coral); }
.back:focus-visible { outline: none; box-shadow: var(--ring); }
.chosen { color: var(--indigo); font-weight: 700; font-size: 15px; margin: 2px 0 18px;
  padding: 12px 14px; background: var(--tint); border-radius: 10px;
  border-left: 3px solid var(--coral); }
.fld { display: block; margin-bottom: 16px; }
.lbl { display: block; font-size: 13px; font-weight: 700; color: var(--indigo);
  margin-bottom: 6px; }
.lbl em { font-style: normal; font-weight: 400; color: var(--indigo-2); font-size: 12px; }
input, select, textarea {
  /* 16px minimum — iOS Safari auto-zooms the PARENT page when focusing any
     field below 16px (even inside our iframe), leaving the whole page
     horizontally pannable after blur. 15px caused exactly that (2026-07-06). */
  width: 100%; font: inherit; font-size: 16px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--coral);
  box-shadow: var(--ring); }
textarea { resize: vertical; }
.consent { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5;
  color: var(--indigo-2); }
.consent a { color: var(--coral-d); }
.cta {
  width: 100%; border: none; border-radius: 12px; background: var(--brand-gradient);
  color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 16px;
  letter-spacing: .2px; padding: 15px; cursor: pointer; margin-top: 6px;
  box-shadow: 0 8px 20px rgba(255,90,95,.30);
  transition: filter .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cta:hover { filter: brightness(.97); transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,90,95,.36); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: none; box-shadow: 0 8px 20px rgba(255,90,95,.30), var(--ring); }
.cta:disabled { opacity: .55; cursor: progress; filter: none; box-shadow: none; transform: none; }

/* ── Done ── */
.done { text-align: center; }
.check { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-gradient);
  color: #fff; font-size: 30px; line-height: 60px; margin: 8px auto 16px;
  box-shadow: 0 10px 26px rgba(255,90,95,.34); }
.stubnote { font-size: 12px; color: var(--indigo-2); margin-top: 18px;
  padding-top: 14px; border-top: 1px dashed var(--line); }

.err { color: #c0392b; font-size: 13px; margin: 8px 0 0; }

/* ── Prototype banner ── */
.proto-banner { max-width: 560px; margin: -16px auto 32px; padding: 12px 20px;
  font-size: 12px; line-height: 1.5; color: var(--indigo-2); text-align: center; }
.proto-banner strong { color: var(--indigo); }

@media (max-width: 480px) {
  .card { margin: 0; border-radius: 0; }
  .title { font-size: 24px; }
  /* tighter gutters so the calendar + slots have room on small screens */
  .hd { padding: 24px 16px 18px; }
  .step { padding: 20px 16px 24px; }
  .cal { gap: 3px; }
}

/* ── Embed mode (?embed=1) — chrome-less, fills the host container ──
   Used by embed.js on /consultation, where the Webflow page already shows its
   own "Book a free 20-minute call…" heading above the widget. Strip our brand
   header + prototype banner and fill the box so it sits exactly like the old
   Calendly widget (the .calendly-inline-widget 320×900 container). */
body.embed { background: transparent; }
body.embed .hd { display: none; }
body.embed .proto-banner { display: none; }
body.embed .card::before { display: none; }
/* Hug content (NOT 100% height) — embed.js auto-fits the iframe to our reported
   scrollHeight, so forcing full height would pin it to the old 900px box and
   leave empty space. */
body.embed .card {
  margin: 0; border-radius: 0; box-shadow: none; max-width: none;
}

/* Honeypot (bot defense 2026-07-13): offscreen, zero-size, non-interactive —
   invisible to humans and screen readers (aria-hidden on the wrapper),
   present in the DOM for form-stuffing bots. display:none is deliberately
   avoided (naive bots skip hidden fields). */
.hp-wrap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}