:root {
  color-scheme: light;
  --ink: #292538;
  --muted: #696477;
  --paper: #fffdf8;
  --coral: #f15f5d;
  --coral-dark: #d9474c;
  --yellow: #f3c650;
  --mint: #bdebd2;
  --blue: #c8e6f7;
  --lilac: #e7dff5;
  --line: rgba(41, 37, 56, 0.12);
  --shadow: 0 24px 70px rgba(50, 42, 62, 0.15);
  font-family:
    Inter, ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 47px,
      rgba(41, 37, 56, 0.025) 48px
    ),
    linear-gradient(135deg, #fff8e9 0%, #ffedf0 35%, #e5f1fa 69%, #e7f7ed 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select,
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

.shell {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 22px 18px 30px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.wordmark {
  color: var(--ink);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
}

.wordmark span {
  color: var(--coral);
}

.top-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
}

.hero {
  display: grid;
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
}

.hero-copy {
  max-width: 680px;
}

.eyebrow,
.step-label {
  margin: 0 0 10px;
  color: var(--coral-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eyebrow span {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 720px;
  margin-bottom: 16px;
  font-size: 48px;
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: 0;
}

.hero-subtitle {
  max-width: 630px;
  margin-bottom: 12px;
  color: #504a5c;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.promise {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.hero-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(41, 37, 56, 0.08);
  border-radius: 22px;
  background: #e8e1f5;
  box-shadow: 0 16px 46px rgba(54, 43, 76, 0.13);
}

/* Let the illustration keep its natural aspect ratio inside a padded frame
   (matching the design reference) instead of being cover-stretched to a fixed
   height. height: auto never overflows on small screens. */
.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.hero-visual figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(41, 37, 56, 0.09);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.9);
  font-size: 11px;
  font-weight: 850;
  backdrop-filter: blur(10px);
}

.hero-visual figcaption span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #52b982;
  box-shadow: 0 0 0 3px rgba(82, 185, 130, 0.17);
}

.scheduler-card {
  border: 1px solid rgba(41, 37, 56, 0.1);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
}

#form-view,
.confirmation {
  padding: 24px 18px;
}

.card-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.card-heading h2,
.confirmation h2 {
  margin-bottom: 0;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: 0;
}

.tiny-spark {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  place-items: center;
  border-radius: 50%;
  color: #735e0b;
  background: var(--yellow);
  font-size: 18px;
}

form {
  display: grid;
  gap: 18px;
}

.mode-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.mode-field legend {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.mode-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mode-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mode-control label {
  display: grid;
  gap: 4px;
  min-height: 76px;
  align-content: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.mode-control label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.mode-control input:checked + label {
  border-color: var(--coral);
  background: #fff4f3;
  box-shadow: 0 0 0 3px rgba(241, 95, 93, 0.1);
}

.mode-control input:focus-visible + label {
  outline: 3px solid rgba(241, 95, 93, 0.22);
}

.check-in-note {
  position: static !important;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

.field {
  position: relative;
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.field small {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  color: var(--ink);
  background: #fff;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

input,
select {
  min-height: 52px;
  padding: 0 14px;
}

textarea {
  min-height: 114px;
  resize: vertical;
  padding: 14px 14px 28px;
  line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(241, 95, 93, 0.13);
}

.time-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.time-field legend {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.time-controls {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) 12px minmax(64px, 1fr) minmax(122px, 1.4fr);
  gap: 7px;
  align-items: center;
}

.time-colon {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
}

.period-control {
  display: grid;
  min-height: 52px;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.period-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.period-control label {
  display: grid;
  min-width: 0;
  place-items: center;
  border-radius: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.period-control input:checked + label {
  color: #fff;
  background: var(--ink);
}

.period-control input:focus-visible + label {
  outline: 3px solid rgba(241, 95, 93, 0.22);
}

.time-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.consent {
  display: flex;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.consent input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--coral);
}

.primary-button,
.secondary-button,
.stop-button {
  border: 0;
  border-radius: 7px;
  font-weight: 900;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.primary-button {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  color: #fff;
  background: var(--coral);
  box-shadow: 0 12px 28px rgba(217, 71, 76, 0.27);
  font-size: 15px;
}

.button-arrow {
  font-size: 23px;
  line-height: 1;
}

.primary-button:hover,
.secondary-button:hover {
  transform: translateY(-1px);
}

.primary-button:hover {
  background: var(--coral-dark);
  box-shadow: 0 15px 32px rgba(217, 71, 76, 0.32);
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

.secondary-button {
  min-height: 48px;
  padding: 0 16px;
  color: var(--ink);
  background: var(--mint);
}

.stop-button {
  min-height: 48px;
  margin-right: 8px;
  padding: 0 16px;
  color: #fff;
  background: var(--coral);
}

.stop-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.error-message {
  margin-bottom: 18px;
  padding: 12px 13px;
  border-left: 4px solid var(--coral);
  border-radius: 4px;
  color: #6a2d34;
  background: #fff0f1;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.confirmation {
  min-height: 390px;
  text-align: center;
}

.confirmation-mark {
  display: grid;
  width: 66px;
  height: 66px;
  margin: 14px auto 22px;
  place-items: center;
  border: 8px solid #e5f5ec;
  border-radius: 50%;
  color: #fff;
  background: #52b982;
  font-size: 28px;
  font-weight: 900;
}

.confirmation > p:not(.step-label):not(.confirmation-message) {
  max-width: 360px;
  margin: 14px auto;
  color: var(--muted);
  line-height: 1.5;
}

.confirmation strong {
  color: var(--ink);
}

.confirmation-message {
  max-width: 420px;
  margin: 22px auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 18px 4px 0;
  color: #615b6e;
  font-size: 10px;
  font-weight: 750;
}

[hidden] {
  display: none !important;
}

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

@media (min-width: 760px) {
  .shell {
    padding: 28px 28px 44px;
  }

  .topbar {
    margin-bottom: 42px;
  }

  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.85fr);
    gap: 34px;
    min-height: 430px;
    margin-bottom: 34px;
  }

  h1 {
    font-size: 76px;
  }

  .scheduler-card {
    max-width: 650px;
    margin: 0 auto;
  }

  #form-view,
  .confirmation {
    padding: 34px;
  }
}

@media (max-width: 390px) {
  .top-note {
    display: none;
  }

  h1 {
    font-size: 43px;
  }

  .time-controls {
    grid-template-columns: minmax(54px, 1fr) 8px minmax(54px, 1fr) minmax(108px, 1.35fr);
    gap: 5px;
  }

  input,
  select {
    padding-right: 8px;
    padding-left: 8px;
  }
}

/* --- Auth --- */
.account-bar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--coral-dark);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.auth-card .auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-tab {
  /* Column layout so the Phone tab's "coming soon" label sits on its own line
     instead of wrapping unpredictably on narrow screens. The single-word Email
     tab stretches to match height via the row's default align-items: stretch. */
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--muted);
  font-weight: 600;
  line-height: 1.15;
}

.auth-tab.is-active {
  border-color: var(--coral);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 6px 18px rgba(241, 95, 93, 0.18);
}

.auth-tab:disabled {
  cursor: not-allowed;
  border-color: var(--line);
  background: var(--paper);
  color: var(--muted);
  box-shadow: none;
  opacity: 0.6;
}

.tab-soon {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-switch {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}

.google-button:hover {
  box-shadow: var(--shadow);
}

#recaptcha-container {
  margin-top: 8px;
}

/* Auth card polish ---------------------------------------------------------
   The .scheduler-card border/shadow/background already apply to #auth-view, but
   the card had no interior padding, so content sat flush against the edges and
   read as part of the page. Give it real padding and a tighter, more lifted
   shadow so it sits as a clear floating card. Scoped to .auth-card — the
   schedule-call card (#form-view / .confirmation) keeps its own padding. */
.auth-card {
  padding: 36px 34px;
  border-radius: 18px;
  box-shadow: 0 18px 44px -22px rgba(50, 42, 62, 0.4);
}

/* Login inputs: stronger resting border + coral focus ring, matching the
   product's existing coral focus colour. Scoped to .auth-card so the
   schedule-call form inputs are untouched. */
.auth-card input {
  border-width: 1.5px;
  border-radius: 12px;
}

.auth-card input::placeholder {
  /* Darker than the original #b8b2a8 for legible contrast on the white field
     while staying clearly lighter than entered text. */
  color: #8f8a7e;
}

.auth-card input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(241, 95, 93, 0.16);
}

/* The shared .primary-button uses justify-content: space-between for the
   scheduler button's label + arrow. The auth submit button has only a label,
   so centre it (matching the design reference). The scheduler button keeps
   its own layout. */
.auth-card .primary-button {
  justify-content: center;
}

/* --- Two-column auth layout (signed-out only) --- */
/* The wrapper is a plain block by default, so in the signed-in state (where
   #auth-view is hidden) the hero and scheduler card render exactly as before.
   The two-column grid is scoped with :has() to the signed-out state only, so it
   never applies once auth.js hides #auth-view. No JS changes required. */
@media (min-width: 900px) {
  .auth-layout:has(#auth-view:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    gap: 64px;
    align-items: start;
  }

  /* DOM order is #auth-view then .hero; pin both to row 1 with explicit columns
     so hero is left and the login card is right (without the explicit grid-row,
     sparse auto-placement drops the hero onto a second row). Collapse the hero's
     own two-column rule (set at the 760px breakpoint) into a single column
     inside the narrower left pane. */
  .auth-layout:has(#auth-view:not([hidden])) .hero {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: none;
    min-height: auto;
    margin-bottom: 0;
  }

  /* Smaller hero headline + tighter subtitle in the two-column layout only,
     so the value prop has room to breathe next to the card. Scoped to this
     state — the global / small-screen h1 rules are untouched. */
  .auth-layout:has(#auth-view:not([hidden])) .hero h1 {
    font-size: 58px;
  }

  .auth-layout:has(#auth-view:not([hidden])) .hero-subtitle {
    max-width: 460px;
  }

  /* Cancel the centered max-width the .scheduler-card gets at 760px so the card
     fills the right column. */
  .auth-layout:has(#auth-view:not([hidden])) #auth-view {
    grid-column: 2;
    grid-row: 1;
    max-width: 460px;
    margin: 0;
  }
}

/* --- View reveal fade-in --- */
/* When a view is revealed (its `hidden` attribute removed by auth.js/app.js),
   ease it in with opacity + a slight rise. Pure CSS: @starting-style supplies
   the pre-reveal values and `display ... allow-discrete` lets the swap animate,
   so no JS toggle is needed and the existing hidden-attribute contract stands. */
#auth-view,
#scheduler-view,
#account-bar {
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    display 200ms allow-discrete;
}

@starting-style {
  #auth-view:not([hidden]),
  #scheduler-view:not([hidden]),
  #account-bar:not([hidden]) {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* --- Mobile auth tuning --- */
@media (max-width: 759px) {
  /* iOS Safari zooms the page on focus for any input under 16px. The auth
     inputs inherit 13px from .field, so bump them to 16px on small screens to
     stop the zoom-and-reflow jump. Scoped to .auth-card and to mobile widths so
     the desktop design and the scheduler form are untouched. */
  .auth-card input {
    font-size: 16px;
  }

  /* Tighter side padding so the form fields aren't cramped on narrow phones
     (36/34px ate too much of a 320px viewport). */
  .auth-card {
    padding: 28px 20px;
  }
}

/* Stacked signed-out layout (below the 900px two-column breakpoint): the auth
   card and the hero sit flush with no gap between them, which reads as cramped.
   Add breathing room. Scoped to the signed-out state via :has() so the hero's
   spacing is untouched once #auth-view is hidden, and capped below 900px where
   the two-column grid handles its own gap. */
@media (max-width: 899px) {
  .auth-layout:has(#auth-view:not([hidden])) .hero {
    margin-top: 40px;
  }
}

/* --- Touch input tuning --- */
/* Keyed off input *capability* (coarse pointer = touchscreen), not device type,
   so a touch laptop benefits and a mouse desktop is untouched. Inputs (52px) and
   the primary button (58px) are already comfortable; bump the smaller targets to
   a ~48px minimum and widen the inline text links' hit area. */
@media (pointer: coarse) {
  .auth-tab,
  .google-button {
    min-height: 48px;
  }

  /* Grow the tap box of inline text links without shifting layout: padding
     enlarges the hit area, the matching negative margin cancels the offset. */
  .link-button {
    padding: 6px 4px;
    margin: -6px -4px;
  }
}

/* --- Reduced motion --- */
/* Respect the user's reduced-motion preference: drop the reveal fade/rise and
   the button hover lifts so nothing animates for users who opt out. */
@media (prefers-reduced-motion: reduce) {
  #auth-view,
  #scheduler-view,
  #account-bar {
    transition: none;
  }

  @starting-style {
    #auth-view:not([hidden]),
    #scheduler-view:not([hidden]),
    #account-bar:not([hidden]) {
      opacity: 1;
      transform: none;
    }
  }

  .primary-button:hover,
  .secondary-button:hover {
    transform: none;
  }
}