/* Thriver Booking, shared styles. Brand: navy #0C2340, lime dot, Onest. */
:root {
  --navy: #0C2340;
  --ink2: rgba(12, 35, 64, .72);
  --ink3: rgba(12, 35, 64, .38);
  --rule: rgba(12, 35, 64, .16);
  --line: rgba(12, 35, 64, .24);
  --field: rgba(12, 35, 64, .32);
  --deep: #ADF129;
  --lime: #CCFF32;
  --off: #F6F6F1;
  --white: #FFFFFF;
  --error: #9B1C1C;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Onest', system-ui, sans-serif; color: var(--navy); background: var(--off); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; color: inherit; }
a { color: var(--navy); text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dot { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--deep); margin-left: .06em; vertical-align: baseline; }

/* Header */
.top { background: var(--white); border-bottom: 1px solid var(--rule); }
.top-in { max-width: 1440px; margin: 0 auto; min-height: 96px; padding: 16px 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 20px; text-decoration: none; }
.brand img { display: block; width: 190px; height: auto; }
.brand .sep { width: 1px; height: 32px; background: var(--line); }
.brand .area { font-size: 18px; font-weight: 800; color: var(--navy); }
.top-meta { display: flex; align-items: center; gap: 20px; font-size: 15px; font-weight: 500; color: var(--ink2); text-align: right; }
.top-meta b { color: var(--navy); font-weight: 800; }

/* Layout */
.wrap { max-width: 1440px; margin: 0 auto; padding: 48px 64px 64px; display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 72px; }
.side { display: flex; flex-direction: column; gap: 32px; }
h1 { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -0.012em; }
.lede { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink2); max-width: 36em; }
.slogan { margin: auto 0 0; font-size: 20px; line-height: 1.3; }
.slogan b { font-weight: 800; }

h2.step { margin: 0 0 14px; font-size: 17px; font-weight: 800; padding-bottom: 8px; border-bottom: 1.5px solid var(--navy); }
.stack { display: flex; flex-direction: column; gap: 32px; }
.split { display: grid; grid-template-columns: 392px minmax(0, 1fr); column-gap: 48px; row-gap: 32px; }

/* Definition rows */
.dl { border-top: 2px solid var(--navy); }
.dl .r { display: grid; grid-template-columns: 110px minmax(0, 1fr); padding: 13px 0; border-bottom: 1px solid var(--rule); align-items: baseline; gap: 12px; }
.dl .k { font-size: 14px; font-weight: 500; color: var(--ink2); }
.dl .v { font-size: 16px; line-height: 1.4; }
.dl .v.strong { font-weight: 800; }
.dl.big .r { grid-template-columns: 160px minmax(0, 1fr); padding: 16px 0; }
.dl.big .v { font-size: 18px; }

/* Choice buttons */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { text-align: left; padding: 16px 18px; min-height: 84px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.choice .t { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; }
.choice .s { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--ink2); }
.choice[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.choice[aria-pressed="true"] .s { color: rgba(255, 255, 255, .82); }
.choice:hover:not([aria-pressed="true"]) { border-color: var(--navy); }

.people { display: flex; flex-direction: column; gap: 8px; }
.person { height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: 15px; font-weight: 800; text-align: left; }
.person small { font-size: 12px; font-weight: 500; }
.person[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }

/* Calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head .month { font-size: 16px; font-weight: 800; }
.icon-btn { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 13px; font-weight: 500; color: var(--ink2); text-align: center; margin-bottom: 4px; }
.cal-grid button { height: 48px; font-size: 15px; font-weight: 800; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.cal-grid button:disabled { border-color: transparent; background: transparent; color: var(--ink3); font-weight: 400; cursor: default; }
.cal-grid button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.cal-grid .blank { height: 48px; }

.day-title { font-size: 16px; font-weight: 800; min-height: 44px; display: flex; align-items: center; margin-bottom: 10px; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slots button { height: 48px; font-size: 15px; font-weight: 500; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.slots button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.empty { font-size: 15px; line-height: 1.5; color: var(--ink2); }

/* Buttons */
.btn { height: 56px; padding: 0 32px; border: 0; background: var(--navy); color: var(--white); font-size: 17px; font-weight: 800; cursor: pointer; }
.btn:disabled { opacity: .35; cursor: default; }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.link-btn { height: 44px; padding: 0; border: 0; background: transparent; color: var(--navy); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.small-btn { height: 44px; padding: 0 16px; border: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 500; cursor: pointer; }

/* Forms */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink2); }
.field.wide { grid-column: span 2; }
.field input, .field select, .field textarea { height: 48px; padding: 0 14px; border: 1px solid var(--field); background: var(--white); color: var(--navy); font-size: 16px; border-radius: 0; }
.field textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--navy); outline-offset: 0; border-color: var(--navy); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--navy); margin: 0; }
.actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.error { margin: 16px 0 0; padding: 12px 0; border-top: 2px solid var(--error); color: var(--error); font-size: 15px; font-weight: 500; }
.fine { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink2); }

.done h2 { margin: 0; font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.done .lede { font-size: 18px; }
.done .dl { margin-top: 32px; max-width: 760px; }
.done .row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

.loading { color: var(--ink2); font-size: 15px; }
.demo-banner { background: var(--navy); color: var(--white); font-size: 13px; font-weight: 500; text-align: center; padding: 8px 16px; }
.demo-banner b { color: var(--lime); font-weight: 800; }

/* Sign-in layout */
.signin { max-width: 1440px; margin: 0 auto; padding: 96px 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 120px; }
.signin h1 { font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; }
.panel { border-top: 2px solid var(--navy); padding-top: 28px; }
.panel .field input { height: 56px; font-size: 17px; }

@media (max-width: 1100px) {
  .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding: 32px 24px 48px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .signin { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding: 48px 24px; }
  .top-in { padding: 12px 24px; min-height: 76px; }
  .slogan { display: none; }
}
@media (max-width: 640px) {
  h1, .signin h1 { font-size: 34px; }
  .done h2 { font-size: 40px; }
  .brand img { width: 150px; }
  .brand .sep, .top-meta .hide-sm { display: none; }
  .choices, .choices.three { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .field.wide { grid-column: auto; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions { flex-direction: column-reverse; align-items: stretch; }
  .dl .r, .dl.big .r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }