/* OCALLY · convert.css: the two ways in. Tokens and components come from base.css. /fit (one question a screen,
   big chips, a verdict, the calendar) and /consultation (the call, the offer, the calendar). */
html, body { background: var(--sky); }
.cv { min-height: calc(100svh - var(--bar)); color: var(--navy); }

/* ── the fit check ── */
.fit { width: min(820px, 100%); margin: 0 auto; padding: clamp(28px, 6vh, 72px) 20px 64px; }
.fit__top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 20px; }
.fit__bar { grid-column: 1 / -1; grid-row: 2; height: 4px; background: var(--line); }
.fit__bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .5s cubic-bezier(.65, 0, .25, 1); }
.fit__count { margin: 0; font: var(--t-label); letter-spacing: var(--ls-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.fit__form { position: relative; margin-top: clamp(32px, 6vh, 64px); }
.fq { margin: 0; padding: 0; border: 0; min-width: 0; display: none; }
.fq.is-on { display: block; animation: fq-in .5s var(--ease-out) both; }
@keyframes fq-in { from { opacity: 0; transform: translateY(16px); } }
.fq__h { display: block; padding: 0; margin: 0; font: var(--t-h2); letter-spacing: var(--ls-h2); color: var(--navy); text-wrap: balance; }
.fq__h span { color: var(--orange); }
.fq__p { margin: 14px 0 0; max-width: 36em; font: var(--t-body); color: var(--body); }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(24px, 4vh, 36px); }
.chips--row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.chips:not(.chips--row):not(.chips--wrap) > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.chips--wrap { display: flex; flex-wrap: wrap; }
.chips button { position: relative; display: grid; gap: 4px; padding: 18px 20px; text-align: left; background: var(--paper); border: var(--rule); box-shadow: var(--lift-s) var(--navy); color: var(--navy); font: var(--t-h6); letter-spacing: var(--ls-h6); cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s, background-color .15s, color .15s; }
.chips--row button { text-align: center; font: var(--t-h5); padding: 20px 12px; }
.chips--wrap button { padding: 13px 16px; font: var(--t-ui); }
.chips button small { font: var(--t-small); color: var(--muted); }
.chips button:hover { transform: translate(-2px, -2px); box-shadow: var(--lift) var(--navy); }
.chips button[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); box-shadow: var(--lift-s) var(--orange); }
.chips button[aria-pressed="true"] small { color: var(--on-navy-body); }
.chips--wrap button[aria-pressed="true"]::before { content: "\2713  "; color: var(--amber); }
.chips--small { margin-top: 22px; align-items: center; gap: 8px; }
.chips--small button { padding: 9px 13px; font: var(--t-ui-s); box-shadow: var(--lift-xs) var(--navy); }
.chips__k { margin-right: 6px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.fq__next, .fq__send { margin-top: 28px; }
.fq__send:disabled { opacity: .6; cursor: progress; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 24px; }
.fields label { display: grid; gap: 7px; }
.fields span { font: var(--t-ui-s); color: var(--navy); }
.fields em { font-style: normal; font-weight: 400; color: var(--muted); }
/* 16px in every field, so phones never zoom in */
.fields input, .fields textarea { width: 100%; padding: 13px 14px; background: #fff; border: 1.5px solid rgba(23, 34, 61, .35); border-radius: 0; font: 400 16px/1.3 var(--font); color: var(--navy); }
.fields input:focus, .fields textarea:focus { outline: none; border-color: var(--navy); box-shadow: var(--lift-s) var(--orange); }
.fields__wide { grid-column: 1 / -1; }
.fq__err { min-height: 1.4em; margin: 14px 0 0; font: var(--t-small); font-weight: 600; color: var(--orange-ink); }
.fq__err:empty { min-height: 0; margin: 0; }
.fq__fine { margin: 14px 0 0; font: var(--t-fine); color: var(--muted); }
.fit__nav { margin-top: 28px; }
.fit__back { padding: 8px 0; background: none; border: 0; font: var(--t-ui-s); color: var(--muted); cursor: pointer; }
.fit__back:hover { color: var(--navy); }
.fq--result .fq__h { margin-top: 14px; }
.fq--result .cv-cal { margin-top: 32px; }
.fq--result [hidden] { display: none; }
.cv--fit .fit:has(.fq--result.is-on) { width: min(1040px, 100%); }

/* the result: the tier's message, what we heard, where Kai would start */
.res__head[hidden], .fq--result [hidden] { display: none; }
.res__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 28px; }
.res__card { padding: 20px 22px; background: var(--paper); border: var(--rule); box-shadow: var(--lift) var(--navy); }
.res__card--start { background: var(--cream); }
.res__k { margin: 0 0 12px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.res__heard { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.res__heard dt { font: var(--t-small); font-weight: 600; color: var(--muted); }
.res__heard dd { margin: 0; font: var(--t-card); font-weight: 500; color: var(--navy); }
.res__start { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.res__start a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--paper); border: var(--rule); font: var(--t-h6); letter-spacing: var(--ls-h6); color: var(--navy); text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.res__start a::after { content: "\2192"; color: var(--orange); }
.res__start a:hover { transform: translate(-2px, -2px); box-shadow: var(--lift-s) var(--orange); }
.res__read { display: grid; justify-items: start; gap: 14px; margin-top: 28px; }

/* ── the calendar ── */
.cv-cal { position: relative; min-height: 640px; background: #fff; border: var(--rule); box-shadow: var(--lift-l) var(--navy); }
.cv-cal [data-cal-inline] { position: relative; z-index: 1; width: 100%; min-height: 640px; }
.cv-cal__wait { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; font: var(--t-small); color: var(--muted); }
.cv-cal__wait p { margin: 0; }
.cv-cal__wait a { color: var(--navy); font-weight: 600; }
.cv-cal.is-ready .cv-cal__wait { display: none; }
/* Cal.com's embed lays a 170px loading block above its (still hidden) frame, then removes it when the calendar is
   ready, so the frame jumped up 170px as it appeared: the page's one layout shift. Ordered first, the hidden frame
   already sits where it will end up; the loading spinner is positioned on its own and does not move. */
.cv-cal iframe.cal-embed { order: -1; }

/* ── the consultation ── */
.bk { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--gap-cols); padding: clamp(48px, 9vh, 112px) var(--edge) var(--sec-y); }
/* the title shares the screen with the calendar, so it takes the section size */
.bk__h1 { margin: clamp(20px, 3.4vh, 32px) 0 0; font: var(--t-h2); letter-spacing: var(--ls-h2); text-wrap: balance; }
.bk__h1 span { color: var(--orange); }
.bk__lead { margin: var(--gap-lede) 0 0; max-width: 32em; font: var(--t-lead); color: var(--body); }
.bk__steps { list-style: none; counter-reset: s; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; }
.bk__steps li { counter-increment: s; position: relative; display: grid; gap: 3px; padding: 14px 0 14px 56px; border-top: 1px solid var(--line); }
.bk__steps li::before { content: counter(s); position: absolute; left: 0; top: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--on-navy); font: var(--t-h6); }
.bk__steps b { font: var(--t-h6); letter-spacing: var(--ls-h6); }
.bk__steps span { font: var(--t-card); color: var(--body); }
.bk__offer { margin-top: 28px; padding: 22px 24px; background: var(--cream); border: var(--rule); box-shadow: var(--lift) var(--orange); }
.bk__offer p { margin: 8px 0 0; font: var(--t-card); color: var(--body); }
.bk__offer .bk__offer-k { margin: 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.bk__offer .bk__offer-h { margin: 8px 0 0; font: var(--t-h5); letter-spacing: var(--ls-h5); color: var(--navy); }
.bk__alt { margin: 28px 0 0; font: var(--t-body); color: var(--body); }
.bk__alt a, .bk__foot a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--orange); }
.bk__cal { align-self: start; position: sticky; top: calc(var(--bar) + 24px); }
.bk__foot { margin: 16px 0 0; font: var(--t-small); color: var(--muted); }

@media (max-width: 960px) { .bk { grid-template-columns: 1fr; } .bk__cal { position: static; } }
@media (max-width: 600px) {
  .res__grid { grid-template-columns: 1fr; }
  .chips { grid-template-columns: 1fr; }
  .chips--row { grid-template-columns: repeat(3, 1fr); }
  .chips--row button { font: var(--t-h6); padding: 16px 6px; }
  .fields { grid-template-columns: 1fr; }
  .cv-cal, .cv-cal [data-cal-inline] { min-height: 560px; }
  /* each step's button sits at the bottom of the screen, in thumb reach */
  .fq__next, .fq__send { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; height: 52px; margin: 0; }
  .cv--fit .fit { padding-bottom: 112px; }
}