/* Tia: Elite 8's AI concierge. Shared styles for the experience, booking, and What's Next pages. */
:root {
  color-scheme: light;
  --navy: #1c2b4d;
  --ink: #34405a;
  --muted: #66718a;
  --green: #1d7a4a;
  --green-deep: #14603a;
  --green-soft: #e8f3ec;
  --blue-hand: #2f6fd1;
  --red: #e5484d;
  --rule: #e3e7ee;
  --tint: #f4f7fb;
  --card: #ffffff;
  --night: #0f1830;
  --ui: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Libre Baskerville", Georgia, serif;
  --body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --shadow: 0 0 0 1px rgba(28,43,77,.07), 0 30px 64px -28px rgba(28,43,77,.5);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--tint); color: var(--ink); font-family: var(--body); font-size: 16px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: var(--green-deep); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue-hand); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* App shell */
.app { min-height: 100%; height: 100%; display: flex; flex-direction: column; }
.top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: #fff; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 44px; height: 44px; display: block; }
.brand span { font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--muted); }
.brand span b { color: var(--navy); }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.iconbtn:hover { background: var(--tint); color: var(--navy); }
main { flex: 1; min-height: 0; overflow-y: auto; }
.view > * { min-width: 0; max-width: 100%; }
.view { min-height: 100%; padding: 32px 16px 40px; display: grid; justify-items: center; align-content: start; gap: 20px; text-align: center; animation: rise .3s ease-out; }

/* Home */
.eb { font-family: var(--hand); font-size: 24px; color: var(--blue-hand); margin: 0 0 -12px; }
.h1 { font-family: var(--display); color: var(--navy); font-size: clamp(28px, 4.4vw, 40px); line-height: 1.12; margin: 0; font-weight: 700; }
.h1 em { font-style: normal; color: var(--green); }
.lede { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; }
.inner { width: 100%; max-width: 760px; display: grid; gap: 18px; justify-items: center; }
.poster { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--night); box-shadow: 0 26px 52px -28px rgba(28,43,77,.6); }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 30%; }
.poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,18,38,.7), rgba(10,18,38,0) 45%); }
.poster figcaption { position: absolute; z-index: 1; left: 18px; bottom: 14px; color: #fff; font-family: var(--ui); font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.poster figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2fb36b; box-shadow: 0 0 0 3px rgba(47,179,107,.3); }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 520px; }
.mode { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; border-radius: 12px; padding: 14px 16px; border: 2px solid var(--green); font-size: 17px; font-weight: 600; transition: transform .15s, box-shadow .15s; }
.mode:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(29,122,74,.6); }
.mode small { display: block; font-size: 13px; font-weight: 400; opacity: .85; }
.mode--talk { background: var(--green); color: #fff; }
.mode--chat { background: #fff; color: var(--green-deep); }
.mode .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mode--talk .ico { background: rgba(255,255,255,.18); }
.mode--chat .ico { background: var(--green-soft); }
.mode svg { width: 20px; height: 20px; fill: currentColor; }
.note { margin: -4px 0 0; font-size: 14px; color: var(--muted); max-width: 52ch; line-height: 1.5; }

/* Talk */
.talkwrap { width: 100%; max-width: 980px; }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100dvh - 120px); border-radius: 18px; overflow: hidden; background: var(--night); box-shadow: 0 26px 52px -28px rgba(28,43,77,.6); transition: box-shadow .35s; --lvl: 0; }
.stage img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 30%; transform: scale(calc(1.04 + var(--lvl) * .03)); transition: transform .12s linear; }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,18,38,.85), rgba(10,18,38,0) 52%), linear-gradient(to bottom, rgba(10,18,38,.45), rgba(10,18,38,0) 22%); pointer-events: none; }
.stage.speaking { box-shadow: 0 0 0 4px rgba(52,168,107,.65), 0 0 42px 6px rgba(52,168,107,.35), 0 26px 52px -28px rgba(28,43,77,.6); }
.stage.listening { box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 26px 52px -28px rgba(28,43,77,.6); }
.layer { position: absolute; inset: 0; z-index: 2; }
.pill { position: absolute; top: 14px; background: rgba(10,18,38,.55); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; display: flex; gap: 8px; align-items: center; font-family: var(--ui); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pill.l { left: 14px; }
.stage:not(.live) .pill.l { display: none; } .pill.r { right: 14px; }
.pill.l::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 3px rgba(255,90,90,.25); }
.bars { display: inline-flex; gap: 2px; align-items: center; height: 14px; }
.bars i { width: 3px; height: 4px; background: #7fe0a8; border-radius: 2px; transition: height .08s linear; }
.cap { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); width: min(88%, 640px); text-align: center; color: #fff; font-size: 18px; line-height: 1.45; text-shadow: 0 1px 2px rgba(0,0,0,.55); margin: 0; }
.cap b { color: #9be7bd; } .cap.you b { color: #c9d6ee; }
.end { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 15px; cursor: pointer; font-family: var(--ui); }
.help { position: absolute; right: 14px; bottom: 20px; background: rgba(10,18,38,.55); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--ui); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.startbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; gap: 10px; align-items: center; background: var(--green); color: #fff; border: 0; border-radius: 999px; padding: 14px 24px; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); animation: pulse 1.8s ease-in-out infinite; }
.startbtn svg { width: 20px; height: 20px; fill: currentColor; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,179,107,.55), 0 12px 30px -10px rgba(0,0,0,.6); } 50% { box-shadow: 0 0 0 10px rgba(47,179,107,0), 0 12px 30px -10px rgba(0,0,0,.6); } }
#over { position: absolute; z-index: 3; right: 16px; top: 58px; width: min(330px, 46%); display: grid; gap: 10px; }
.oc { background: #fff; border-radius: 14px; padding: 14px 16px; text-align: left; box-shadow: 0 16px 40px -16px rgba(0,0,0,.6); animation: rise .35s ease-out; font-size: 14.5px; }
.toast.inline { position: static; transform: none; justify-self: center; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.talkview { align-content: center; }
.toast { position: absolute; z-index: 4; left: 50%; top: 58px; transform: translateX(-50%); background: var(--green-soft); color: var(--green-deep); font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; white-space: nowrap; animation: rise .3s ease-out; font-family: var(--ui); }

/* Phone: the call goes full screen */
@media (max-width: 700px) {
  .view { padding: 22px 16px 32px; gap: 16px; }
  .modes { gap: 10px; }
  .mode { padding: 12px; font-size: 15px; gap: 8px; }
  .mode .ico { width: 32px; height: 32px; }
  body.in-call .top { display: none; }
  body.in-call .view.talkview { padding: 0; }
  body.in-call .talkwrap { max-width: none; height: 100dvh; }
  body.in-call .stage { position: fixed; inset: 0; aspect-ratio: auto; max-height: none; border-radius: 0; box-shadow: none; }
  body.in-call .stage.speaking { box-shadow: inset 0 0 0 4px rgba(52,168,107,.75), inset 0 0 70px rgba(52,168,107,.45); }
  body.in-call .stage.listening { box-shadow: inset 0 0 0 3px rgba(255,255,255,.75); }
  .pill { top: max(16px, env(safe-area-inset-top)); }
  .cap { bottom: calc(96px + env(safe-area-inset-bottom)); font-size: 19px; }
  .end { bottom: calc(28px + env(safe-area-inset-bottom)); padding: 12px 24px; left: 50%; transform: translateX(calc(-100% - 6px)); }
  .help { bottom: calc(30px + env(safe-area-inset-bottom)); left: 50%; right: auto; transform: translateX(6px); padding: 10px 14px; }
  #over { left: 14px; right: 14px; width: auto; top: calc(62px + env(safe-area-inset-top)); }
}

/* Sheets */
.sheet { position: absolute; z-index: 6; inset: 0; background: rgba(10,18,38,.5); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease-out; }
.sheet.center { align-items: center; }
.sheet.fixed { position: fixed; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.panel { width: 100%; max-width: 460px; max-height: 92%; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); text-align: left; animation: rise .25s ease-out; }
.sheet.center .panel { border-radius: 18px; width: calc(100% - 32px); padding-bottom: 22px; }
.panel h2 { margin: 0 0 4px; color: var(--navy); font-size: 19px; font-family: var(--display); }
.panel > p { margin: 0 0 12px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.opt { display: flex; width: 100%; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--rule); background: #fff; border-radius: 12px; padding: 11px 14px; margin-top: 8px; font-size: 15px; color: var(--navy); font-weight: 600; cursor: pointer; text-decoration: none; }
.opt small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.opt:hover { border-color: var(--green); background: var(--green-soft); }
.opt.primary { background: var(--green); border-color: var(--green); color: #fff; }
.opt.primary small { color: rgba(255,255,255,.85); }
.opt .em { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--green); }
.opt .em svg { width: 20px; height: 20px; }
.opt.primary .em { color: #fff; }
.tip { background: var(--tint); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 8px 0 0; }
.tip ol { margin: 4px 0 6px; padding-left: 18px; }
.quiet { font-size: 13px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--rule); border-top-color: var(--green); animation: sp 1s linear infinite; margin: 4px 0 10px; }
@keyframes sp { to { transform: rotate(360deg); } }
.phone-line { margin: 14px 0 0; font-size: 15px; color: var(--ink); }
.phone-line a { color: var(--navy); font-weight: 700; text-decoration: none; }

/* Chat */
.chatview { padding-top: 24px; }
.chat { width: 100%; max-width: 640px; height: min(680px, calc(100dvh - 120px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #fff; border-radius: 20px; overflow: hidden; text-align: left; box-shadow: var(--shadow); }
@media (max-width: 700px) {
  body.in-chat .top { display: none; }
  body.in-chat .view.chatview { padding: 0; }
  body.in-chat .chat { max-width: none; height: 100dvh; border-radius: 0; box-shadow: none; }
  body.in-chat .ch { padding-top: max(12px, env(safe-area-inset-top)); }
}
.ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; border-bottom: 1px solid #eef1f5; }
.who { display: flex; gap: 12px; align-items: center; }
.av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green-soft); }
.av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.who b { color: var(--navy); }
.tag { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green-deep); background: var(--green-soft); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-family: var(--ui); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c2c9d6; }
.status.on::before { background: #2fb36b; box-shadow: 0 0 0 3px rgba(47,179,107,.18); }
.log { overflow-y: auto; padding: 18px 18px 10px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; overscroll-behavior: contain; }
.disc { align-self: center; text-align: center; font-size: 12.5px; color: var(--muted); max-width: 44ch; line-height: 1.45; margin: 0 0 4px; }
.m { font-size: 16px; line-height: 1.6; max-width: 88%; margin: 0; animation: rise .25s ease-out; white-space: pre-wrap; overflow-wrap: anywhere; }
.m.tia { align-self: flex-start; color: var(--ink); }
.m.you { align-self: flex-end; background: #eef2f8; color: var(--navy); padding: 9px 15px; border-radius: 18px; max-width: 80%; }
.m a { color: var(--green-deep); font-weight: 600; }
.sys { align-self: center; text-align: center; font-size: 13.5px; color: var(--muted); background: var(--tint); border-radius: 12px; padding: 10px 14px; max-width: 92%; }
.sys button { margin-top: 8px; border: 0; background: var(--green); color: #fff; border-radius: 999px; padding: 7px 16px; font-weight: 700; cursor: pointer; }
.typing { align-self: flex-start; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); font-family: var(--ui); }
.typing span { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa6bb; animation: dot 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.sent { align-self: center; background: var(--green-soft); color: var(--green-deep); font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; animation: rise .3s ease-out; font-family: var(--ui); }
.compose { display: flex; align-items: center; gap: 6px; margin: 10px 12px calc(12px + env(safe-area-inset-bottom)); padding: 5px 5px 5px 16px; border: 1px solid #d9dfe8; border-radius: 999px; background: #fff; }
.compose:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.compose input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--navy); padding: 8px 0; }
.compose input::placeholder { color: #9aa6bb; }
.compose button { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--green); color: #fff; font-weight: 700; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.compose button:disabled { background: #c2c9d6; cursor: default; }

/* Cards (chat log, call overlay, end screen) */
.card { align-self: stretch; border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; background: #fbfcfe; animation: rise .3s ease-out; font-size: 15px; text-align: left; }
.card h3, .oc h3 { margin: 0 0 4px; color: var(--navy); font-size: 16px; font-family: var(--body); font-weight: 700; }
.card ul, .oc ul { margin: 6px 0; padding-left: 18px; }
.price { font-family: var(--display); color: var(--green-deep); font-size: 21px; margin: 6px 0 2px; }
.price span { font-size: 13px; font-family: var(--body); color: var(--muted); }
.sub { color: var(--muted); font-size: 13.5px; margin: 0; }
.pay { display: block; width: 100%; margin-top: 12px; background: var(--green); color: #fff; border: 0; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 16px; cursor: pointer; text-align: center; text-decoration: none; }
.pay:hover { background: var(--green-deep); }
.secure { text-align: center; margin: 7px 0 0; font-size: 12.5px; color: var(--muted); }
.after { text-align: center; margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* Done / end / booking / next */
.done { width: 100%; max-width: 580px; background: #fff; border-radius: 20px; padding: 28px 24px; text-align: center; box-shadow: var(--shadow); }
.done .eb { margin: 0; font-size: 22px; }
.done h1, .done h2 { font-family: var(--display); color: var(--navy); font-size: 25px; margin: 8px 0 6px; line-height: 1.25; }
.done > p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
.done .card { margin-top: 6px; }
.prog { display: flex; justify-content: center; gap: 6px; margin: 0 0 14px; font-family: var(--ui); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; flex-wrap: wrap; }
.prog span { padding: 4px 10px; border-radius: 99px; background: #f1f2f5; color: #8a90a0; }
.prog span.ok { background: var(--green-soft); color: var(--green-deep); }
.prog span.now { background: var(--navy); color: #fff; }
.calwrap { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; min-height: 680px; position: relative; background: #fff; }
.calwrap .calendly-inline-widget { min-width: 280px; height: 700px; }
.calload { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); font-size: 14px; pointer-events: none; }
.appt { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; margin: 0 0 18px; }
.appt .dt { flex: none; width: 48px; height: 52px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; align-content: center; font-family: var(--ui); line-height: 1.05; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.appt .dt b { font-size: 20px; }
.appt p { margin: 0; color: var(--navy); font-weight: 600; font-size: 15.5px; }
.appt small { display: block; color: var(--muted); font-weight: 400; font-size: 13.5px; }
.done > p.wnh, .wnh { text-align: left; margin: 0 0 10px; color: var(--navy); font-weight: 700; }
.wn { list-style: none; padding: 0; margin: 0 0 18px; text-align: left; display: grid; gap: 12px; counter-reset: wn; }
.wn li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: var(--navy); font-size: 15px; line-height: 1.4; }
.wn li::before { counter-increment: wn; content: counter(wn); width: 26px; height: 26px; border-radius: 50%; background: var(--green-soft); color: var(--green-deep); font-weight: 700; font-size: 13px; display: grid; place-items: center; font-family: var(--ui); }
.wn li b { display: block; }
.wn li span { color: var(--muted); font-size: 13.5px; }
.btn { display: block; width: 100%; background: var(--green); color: #fff; border: 0; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 16px; cursor: pointer; text-align: center; text-decoration: none; }
.btn:hover { background: var(--green-deep); }
.ph { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }
.ph a { color: var(--navy); font-weight: 700; text-decoration: none; }
.pagehead { display: flex; justify-content: center; padding: 18px 16px 0; }
.pagehead img { width: 56px; height: 56px; display: block; border-radius: 50%; }
.wide { max-width: 760px; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .stage img.photo { transform: none; } }