/* The setup site's own stylesheet. Every value in :root below is copied, to the digit, from the WeTalk
   Workspaces portal (design-tokens.css, theme.css and shopfront.css), so the two products read as one.
   This site is a separate project and never loads a portal file; the values are copied, not linked.
   No raw colour, type size or duration is typed below :root. */
:root {
  /* palette (theme.css + design-tokens.css) */
  --navy: #0A1628;
  --blue: #2E7CF6;
  --cyan: #00D4FF;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --spinner-line: rgba(255, 255, 255, .45);
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --ground: #f4f5f6;
  --canvas: #fcfdff;
  --text: #0A1628;
  --ink-2: #4A5A75;
  --ink-3: #4A5A75;
  --ink-4: #4A5A75;
  --ink-off: #a6b0c0;
  --ink-faint: #c3cddb;
  --border: #dfe5ee;
  --line-2: #e8edf4;
  --line-strong: #c9d4e2;
  --line-dashed: #ccd7e6;
  --blue-text: #0d76ab;
  --blue-soft: #eaf5fd;
  --blue-tint: #eaf6fd;
  --blue-edge: #cfe6f8;
  --blue-line: #bfe3f7;
  --blue-ring: #9fd4ef;
  --blue-ink: #0b6f9e;
  --on-blue: #ffffff;
  --danger-ink: #b3261e;
  --danger-bg: #fdecea;
  --ok-ink: #136b47;
  --ok-bg: #e4f5ec;
  --warn-ink: #8a5a08;
  --warn-bg: #fdf0da;
  --scrim: rgba(10, 32, 63, .34);
  --page-wash: radial-gradient(900px 440px at 50% 100%, rgba(33, 169, 238, .22), transparent 72%),
    radial-gradient(560px 320px at 10% 0%, rgba(33, 169, 238, .10), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fff 36%, #f0f8fe 68%, #dff0fb 100%);
  /* depth */
  --card-shadow: 0 1px 2px rgba(10, 32, 63, .04), 0 8px 24px rgba(10, 32, 63, .05);
  --lift: 0 1px 2px rgba(10, 32, 63, .05), 0 14px 34px rgba(10, 32, 63, .10);
  --lift-sm: 0 1px 2px rgba(10, 32, 63, .05), 0 6px 16px rgba(10, 32, 63, .08);
  --press-shadow: 0 1px 1px rgba(10, 32, 63, .12);
  --rest-shadow: 0 1px 2px rgba(10, 32, 63, .10);
  --gate-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
  --box-ring: 0 0 0 4px rgba(33, 169, 238, .06);
  --focus-ring: 0 0 0 3px rgba(33, 169, 238, .18);
  --thumb-shadow: 0 1px 2px rgba(10, 32, 63, .25);
  /* shape and spacing (radii 11 and 16 are the portal's; spacing is the 4 / 8 / 12 / 16 / 24 / 32 scale) */
  --radius: 16px;
  --r-ctl: 11px;
  --r-pill: 999px;
  --r-sm: 8px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --head-before: 18px;
  --head-sub-gap: 20px;
  --head-after: 36px;
  --underline-hang: 9px;
  --frame: 8px;
  /* motion: one curve and three durations, plus the portal's own entrance curve (a control stays under 250ms) */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .12s;
  --t: .18s;
  --t-slow: .24s;
  --t-underline: .24s;
  /* type (the portal's roles; field text is held at the gate's phone size so a phone never zooms on focus) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-hero: 61px;
  --fs-hero-sub: 22px;
  --fs-hero-md: 38px;
  --fs-hero-sm: 28px;
  --fs-hero-sub-sm: 15px;
  --fs-page-title: 53px;
  --fs-page-title-sm: 26px;
  --fs-page-sub: 17px;
  --fs-title-sm: 16.5px;
  --fs-ui-lg: 15px;
  --fs-ui: 14.5px;
  --fs-body-lg: 14px;
  --fs-body: 13.5px;
  --fs-meta: 13px;
  --fs-meta-sm: 12.5px;
  --fs-label: 12px;
  --fs-label-xs: 11px;
  --fs-field: 16px;
  --fs-gate-title: 49px;
  --fs-gate-title-sm: 30px;
  --fs-gate-lede: 24px;
  --fs-gate-lede-sm: 17px;
  --z-header: 10;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; min-height: 100vh; background: var(--page-wash); background-attachment: fixed; color: var(--text); font: var(--fs-ui-lg)/1.6 var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { appearance: none; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button:disabled, input:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; color: var(--navy); }
.lead, .help, .message { text-wrap: pretty; }

/* header: a white bar, the same hairline and ground as the portal's top bar */
header { position: sticky; top: 0; z-index: var(--z-header); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--card-shadow); }
.topbar { display: flex; align-items: center; gap: var(--s3); min-height: 72px; padding: var(--s4) var(--s8); max-width: 1440px; margin: auto; }
.logo { width: auto; height: 32px; max-width: 40%; object-fit: contain; }
.save-pill { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2); color: var(--ok-ink); background: var(--ok-bg); font-size: var(--fs-meta-sm); font-weight: 700; white-space: nowrap; border-radius: var(--r-pill); padding: var(--s1) var(--s3); }
.save-pill.saving { color: var(--blue-ink); background: var(--blue-soft); }
.save-pill.just-saved { animation: pop var(--t-slow) var(--ease-out) both; }
.save-pill.warning { background: var(--warn-bg); color: var(--warn-ink); white-space: normal; }
.progress-wrap { max-width: 1440px; margin: auto; padding: var(--s1) var(--s8) var(--s1); }
.progress-track { height: 6px; border-radius: var(--r-pill); overflow: hidden; background: var(--line-2); }
.progress-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 78%, var(--navy))); transition: width var(--t-slow) var(--ease); }
.progress-meta { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--fs-meta); color: var(--ink-3); margin-top: var(--s1); }
.step-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2); padding: var(--s1) var(--s4) var(--s3); }
main { margin: var(--s8) auto var(--s12); padding: 0 var(--s4); }
main:focus { outline: none; }
.single { max-width: 752px; }
main[data-screen="signin"] { max-width: 642px; }

/* cards and the page title with its animated underline (the portal's signature) */
.card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: var(--s8); margin-bottom: var(--s6); min-width: 0; }
h1 { position: relative; width: max-content; max-width: 100%; font: 700 var(--fs-page-title)/1.1 var(--font); letter-spacing: -.025em; margin: var(--head-before) 0 var(--head-sub-gap); overflow-wrap: anywhere; }
h1::after { content: ""; position: absolute; left: 0; bottom: calc(var(--underline-hang) * -1); width: 100%; height: 4px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 78%, var(--navy))); transform: scaleX(0); transform-origin: left; animation: title-underline var(--t-underline) var(--ease-out) .08s forwards; }
h2 { font-size: var(--fs-title-sm); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 var(--s3); }
h3 { font-size: var(--fs-ui-lg); font-weight: 700; margin: 0 0 var(--s2); line-height: 1.5; }
p { margin: 0 0 var(--s4); overflow-wrap: anywhere; }
.lead { font-size: var(--fs-page-sub); color: var(--ink-4); margin-bottom: var(--head-after); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-label-xs); font-weight: 800; color: var(--navy); margin-bottom: var(--s4); display: flex; align-items: center; gap: var(--s2); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.muted, .help { color: var(--ink-3); }
.help, .provenance { font-size: var(--fs-body-lg); }
.callout { background: var(--blue-soft); border: 1px solid var(--blue-edge); border-radius: var(--radius); padding: var(--s4); margin: var(--s4) 0 var(--s6); color: var(--navy); }
.loading { color: var(--ink-3); animation: loading-late 1ms linear 600ms both; }

/* the first screens speak like the portal's front door: a centred title on the gate, a centred greeting on welcome and thanks */
main[data-screen="signin"] .card { padding: var(--s8) var(--s6) var(--s8); text-align: center; box-shadow: var(--gate-shadow); }
main[data-screen="signin"] h1 { margin-inline: auto; font-size: var(--fs-gate-title); }
main[data-screen="signin"] h1::after { display: none; }
main[data-screen="signin"] .lead { font-size: var(--fs-gate-lede-sm); }
main[data-screen="signin"] form { text-align: left; }
body:has(main[data-screen="signin"]) header { background: transparent; border-bottom: 0; box-shadow: none; position: static; }
body:has(main[data-screen="signin"]) { background: var(--canvas); }
body:has(main[data-screen="signin"]) .topbar { justify-content: center; padding-top: var(--s12); min-height: 0; }
body:has(main[data-screen="signin"]) .logo { height: 63px; max-width: 70%; }
main[data-screen="signin"] .button { width: 100%; min-height: 56px; margin-top: var(--s4); }
main[data-screen="welcome"] .card, main[data-screen="thanks"] .card { text-align: center; }
main[data-screen="welcome"] h1, main[data-screen="thanks"] h1 { margin-inline: auto; font-size: var(--fs-hero); letter-spacing: -.03em; }
main[data-screen="welcome"] h1::after, main[data-screen="thanks"] h1::after { display: none; }
main[data-screen="welcome"] .lead, main[data-screen="thanks"] .lead { font-size: var(--fs-hero-sub); margin-bottom: var(--s6); }
main[data-screen="welcome"] .eyebrow, main[data-screen="thanks"] .eyebrow { justify-content: center; }

/* controls: one shape family, blue fill for the one main action (.sf-btn), white outline for the rest (.sf-btn-ghost) */
.button, .secondary, .quiet, .quiet-pill, .pill, .dropzone, .mic, .check-item, .switch, .section-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: var(--s3) var(--s6); border: 1px solid transparent; border-radius: var(--r-ctl); text-decoration: none; line-height: 1.35; font-weight: 700; text-align: center; transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.button { color: var(--on-blue); background: var(--blue); font-size: var(--fs-ui); box-shadow: var(--rest-shadow); }
.button:hover:not(:disabled) { box-shadow: var(--lift-sm); background: color-mix(in srgb, var(--blue) 92%, var(--navy)); }
.button:active:not(:disabled), .secondary:active:not(:disabled), .pill:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--press-shadow); }
.button:disabled { box-shadow: none; }
.button + p, .button + .button { margin-top: var(--s4); }
.secondary { color: var(--ink-2); background: var(--surface); border-color: var(--border); font-size: var(--fs-ui); }
.secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }
.quiet, .quiet-pill { color: var(--ink-2); background: transparent; padding: var(--s2) var(--s3); font-size: var(--fs-ui); font-weight: 600; }
.quiet:hover:not(:disabled), .quiet-pill:hover:not(:disabled) { background: var(--surface-2); color: var(--navy); }
.quiet.inverse { color: var(--ink-2); background: var(--surface); border-color: var(--border); font-weight: 700; padding: var(--s2) var(--s4); }
.quiet.inverse:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }
[aria-current="step"] { color: var(--blue-ink); background: var(--blue-soft); }
.quiet-pill, .pill { border-radius: var(--r-pill); border-color: var(--border); }
.pill { color: var(--ink-2); background: var(--surface); padding: var(--s2) var(--s4); font-size: var(--fs-ui); }
.pill:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); }
[aria-checked="true"], [aria-selected="true"], [aria-pressed="true"] { background: var(--blue-tint); border-color: var(--blue-line); color: var(--blue-ink); }
.pills, .actions, .field-actions, .section-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.field-actions { margin-top: var(--s3); }
.section-actions { justify-content: space-between; margin-top: var(--s8); }
.actions { margin-top: var(--s3); }

/* fields */
label, .field-label { display: block; font-size: var(--fs-ui); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s2); }
form label:not(:first-child) { margin-top: var(--s4); }
input, textarea { width: 100%; min-width: 0; color: var(--navy); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-ctl); padding: var(--s3) var(--s4); min-height: 48px; font-size: var(--fs-field); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
input::placeholder, textarea::placeholder { color: var(--ink-off); }
input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--line-strong); }
input:focus, textarea:focus { border-color: var(--blue); box-shadow: var(--focus-ring); }
textarea { display: block; resize: vertical; min-height: 112px; line-height: 1.6; }
input:disabled, textarea:disabled { background: var(--surface-2); opacity: .7; }
.error, .message { color: var(--danger-ink); margin-top: var(--s3); font-size: var(--fs-ui); }
.error:empty { margin: 0; }
.welcome-steps { padding-left: var(--s6); margin: var(--s8) 0; text-align: left; }
.welcome-steps li { padding: 0 0 var(--s4) var(--s3); }
.welcome-steps li::marker { color: var(--blue-text); font-weight: 700; }
.welcome-steps h2 { font-size: var(--fs-title-sm); margin-bottom: var(--s1); }
.welcome-steps p { color: var(--ink-3); font-size: var(--fs-body-lg); }

/* the drop panel and the file list */
.dropzone { width: 100%; min-height: 120px; border: 1px dashed var(--line-dashed); background: var(--surface-2); color: var(--navy); margin-bottom: var(--s3); border-radius: var(--radius); }
.dropzone:hover, .dropzone.dragging { background: var(--blue-soft); border-color: var(--blue-edge); }
.file-list { display: grid; gap: var(--s3); }
.file-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); border-top: 1px solid var(--line-2); padding-top: var(--s3); font-size: var(--fs-body-lg); overflow-wrap: anywhere; animation: rise var(--t-slow) var(--ease) both; }
.file-row strong { min-width: 0; }
.file-row progress { width: 100%; grid-column: 1/-1; height: 6px; appearance: none; border: 0; border-radius: var(--r-pill); overflow: hidden; background: var(--line-2); }
progress::-webkit-progress-bar { background: var(--line-2); }
progress::-webkit-progress-value { background: var(--blue); transition: width var(--t) var(--ease); }
progress::-moz-progress-bar { background: var(--blue); }
.mic { border-radius: var(--r-pill); background: var(--blue); color: var(--on-blue); min-height: 56px; margin: var(--s3) 0; box-shadow: var(--rest-shadow); }
.mic:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 92%, var(--navy)); box-shadow: var(--lift-sm); }
.mic.recording { animation: pulse 1.5s var(--ease) infinite; outline: calc(2px + var(--level, 0) * 12px) solid var(--blue-edge); }
.spinner { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; border: 2px solid var(--blue-ring); border-top-color: var(--blue-ink); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; margin-right: var(--s1); }
.button .spinner, .mic .spinner { border-color: var(--spinner-line); border-top-color: var(--on-blue); }

/* Clinic home and the clinic picker share the same raised card treatment. */
h1 { font-family: var(--display); }
.clinic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.clinic-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); width: 100%; min-width: 0; text-align: left; padding: var(--s6); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); font-size: var(--fs-ui-lg); overflow-wrap: anywhere; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.clinic-tile:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--lift); border-color: var(--blue); }
.clinic-tile:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--press-shadow); }
.clinic-tile + .card { margin-top: var(--s6); }
.tile-percent { font-size: var(--fs-hero-sm); font-weight: 700; color: var(--blue-ink); }
[data-state="done"] { color: var(--ok-ink); background: var(--ok-bg); }
[data-state="progress"] { color: var(--blue-ink); background: var(--blue-soft); }
.invited-row, .gensolve-item { border-top: 1px solid var(--line-2); padding: var(--s4) 0; }
.gensolve-item p { margin: var(--s2) 0 0; font-size: var(--fs-meta); }
.dialog-overlay { position: fixed; inset: 0; z-index: calc(var(--z-header) + 1); background: var(--scrim); display: grid; place-items: center; padding: var(--s4); }
.clinic-dialog { width: 100%; max-width: 560px; max-height: calc(100dvh - var(--s8)); overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--lift); padding: var(--s6); animation: rise var(--t) var(--ease) both; }
.clinic-dialog > .quiet { margin-top: var(--s4); }
.step-nav [aria-current="page"] { color: var(--blue-ink); background: var(--blue-soft); }
.quiet:active:not(:disabled), .dropzone:active:not(:disabled), .check-item:active:not(:disabled), .mic:active:not(:disabled) { transform: translateY(1px); }
@media (max-width: 600px) { .clinic-grid { grid-template-columns: minmax(0, 1fr); } }

/* sections */
.sections-layout { max-width: 1504px; display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.section-nav { display: flex; overflow-x: auto; gap: var(--s2); min-width: 0; padding: var(--s1) 0 var(--s3); }
.section-link { justify-content: start; color: var(--ink-2); background: transparent; white-space: nowrap; padding: var(--s2) var(--s3); font-size: var(--fs-ui); font-weight: 600; flex-shrink: 0; }
.section-link:hover:not([aria-current="step"]) { background: var(--surface-2); }
.section-link[aria-current="step"] { color: var(--blue-ink); background: var(--blue-soft); }
.ordinal { display: inline-grid; place-content: center; min-width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: var(--fs-label); background: var(--surface); }
.section-link[aria-current="step"] .ordinal { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.field-card { padding: var(--s6) 0; border-top: 1px solid var(--line-2); border-radius: var(--r-sm); min-width: 0; scroll-margin-top: 230px; transition: background var(--t-slow) var(--ease), box-shadow var(--t) var(--ease); }
.field-card.asking { box-shadow: -3px 0 0 var(--blue); padding-left: var(--s3); }
.field-card.written { background: var(--blue-tint); }
.field-card h3 { font-size: var(--fs-title-sm); }
.clinic-tabs { margin: var(--s6) 0; }
.provenance { color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); align-items: baseline; }
.chip { display: inline-block; font-size: var(--fs-meta-sm); font-weight: 700; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-3); border-radius: var(--r-pill); padding: 0 var(--s3); }
.staff-chip { color: var(--blue-ink); background: var(--blue-soft); border-color: var(--blue-edge); margin-top: var(--s2); }
.switch { position: relative; color: var(--ink-2); background: transparent; font-size: var(--fs-meta); font-weight: 600; padding: var(--s2); text-align: left; }
.switch::before { content: ''; display: block; flex-shrink: 0; width: 34px; height: 22px; border-radius: var(--r-pill); background: var(--ink-faint); transition: background var(--t) var(--ease); }
.switch::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--thumb-shadow); left: 11px; top: calc(50% - 8px); transition: transform var(--t) var(--ease); }
.switch[aria-checked="true"] { background: transparent; border-color: transparent; color: var(--navy); }
.switch[aria-checked="true"]::before { background: var(--blue); }
.switch[aria-checked="true"]::after { transform: translateX(12px); }
.conflict { background: var(--warn-bg); color: var(--warn-ink); padding: var(--s4); border-radius: var(--r-ctl); margin-top: var(--s4); overflow-wrap: anywhere; }
.day-row { display: grid; grid-template-columns: 40px auto 1fr 1fr; align-items: end; gap: var(--s3); padding: var(--s3) 0; }
.day-row strong { align-self: center; font-size: var(--fs-ui); color: var(--navy); }
.day-row .pill { align-self: center; }
.time-label { margin: 0; font-size: var(--fs-label); }
.time-label input { padding: var(--s2); }
.row-card { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.row-field { min-width: 0; }
.row-field:has(.pills) { grid-column: 1/-1; }

/* the interviewer: the portal's ask box, a card with the blue edge and ring */
.interviewer { min-width: 0; border-color: var(--blue-edge); box-shadow: var(--card-shadow), var(--box-ring); }
.interviewer-desktop-title { display: none; }
.transcript { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3); }
.bubble { font-size: var(--fs-ui); padding: var(--s3) var(--s4); border-radius: var(--radius); max-width: 94%; margin: 0; white-space: pre-wrap; animation: rise var(--t-slow) var(--ease) both; }
.bubble.assistant { background: var(--surface-2); border: 1px solid var(--line-2); align-self: flex-start; }
.bubble.person { color: var(--navy); background: var(--blue-soft); border: 1px solid var(--blue-edge); align-self: flex-end; }
.transcript:not(:empty) { margin: var(--s4) 0; }
.review-row { display: flex; align-items: center; gap: var(--s4); justify-content: space-between; padding: var(--s4) 0; border-bottom: 1px solid var(--line-2); }
.review-row p { margin: 0; font-size: var(--fs-ui); }
.check-item { width: 100%; justify-content: flex-start; padding: var(--s3); color: var(--navy); background: var(--surface); border-color: var(--border); text-align: left; font-weight: 400; font-size: var(--fs-ui-lg); }
.check-item::before { content: ''; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.check-item[aria-checked="true"]::before { content: '✓'; background: var(--blue); border-color: var(--blue); color: var(--on-blue); text-align: center; animation: pop var(--t-slow) var(--ease-out) both; }
.check-item:hover:not(:disabled) { background: var(--surface-2); }

/* entrances: each screen rises in, its cards a beat after each other (a section switch redraws the same way) */
main > * { animation: rise var(--t-slow) var(--ease) both; }
main > :nth-child(2) { animation-delay: .05s; }
main > :nth-child(3) { animation-delay: .1s; }
main > :nth-child(n+4) { animation-delay: .15s; }

@media (min-width: 1024px) {
  .sections-layout { grid-template-columns: 160px minmax(0, 720px) 360px; gap: var(--s4); }
  .section-nav { flex-direction: column; overflow-x: visible; position: sticky; top: 220px; max-height: calc(100vh - 240px); overflow-y: auto; }
  .section-link { white-space: normal; text-align: left; }
  .interviewer { position: sticky; top: 220px; padding: var(--s6); }
  .interviewer-phone-title { display: none; }
  .interviewer-desktop-title { display: block; }
  .section-body > .card { padding: var(--s6); }
}
@media (min-width: 1280px) { .sections-layout { gap: var(--s6); grid-template-columns: 180px minmax(0, 720px) 360px; } }
@media (max-width: 1023px) {
  h1 { font-size: var(--fs-hero-md); }
  main[data-screen="welcome"] h1, main[data-screen="thanks"] h1 { font-size: var(--fs-hero-md); }
}
@media (max-width: 600px) {
  .topbar { padding: var(--s3) var(--s4); gap: var(--s2); min-height: 64px; }
  .logo { height: 26px; max-width: 34%; }
  body:has(main[data-screen="signin"]) .logo { height: 40px; }
  body:has(main[data-screen="signin"]) .topbar { padding-top: var(--s8); }
  .save-pill { font-size: var(--fs-label); padding: var(--s1) var(--s2); }
  .quiet.inverse { font-size: var(--fs-meta); padding: var(--s2) var(--s3); }
  .progress-wrap { padding: var(--s1) var(--s4) var(--s1); }
  .progress-meta { font-size: var(--fs-label-xs); }
  main { margin-top: var(--s6); }
  .card { padding: var(--s4); }
  h1 { font-size: var(--fs-page-title-sm); }
  main[data-screen="signin"] h1 { font-size: var(--fs-gate-title-sm); }
  main[data-screen="welcome"] h1, main[data-screen="thanks"] h1 { font-size: var(--fs-hero-sm); }
  main[data-screen="welcome"] .lead, main[data-screen="thanks"] .lead { font-size: var(--fs-hero-sub-sm); }
  .lead { font-size: var(--fs-ui-lg); margin-bottom: var(--s6); }
  .row-card { grid-template-columns: minmax(0, 1fr); padding: var(--s3); }
  .day-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: var(--s3); margin-bottom: var(--s3); }
  .day-row strong { font-size: var(--fs-ui-lg); }
  .field-card { padding-top: var(--s4); padding-bottom: var(--s4); }
  .check-item { padding: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px var(--blue-soft); } }
@keyframes title-underline { to { transform: scaleX(1); } }
@keyframes loading-late { from { color: transparent; } to { color: var(--ink-3); } }
/* the off switch: a person who asked for less motion keeps every colour and state, and loses only the movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  h1::after { transform: scaleX(1); }
  .spinner { border-top-color: var(--blue-ring); }
}