/* PowerVisa — Consultation flow design system (CD-01 handoff).
   Portal-aligned look: warm paper, system serif (Georgia) headings + system
   sans, navy/gold/cream tokens. NO webfonts (system stacks by design).
   Shared by the intake wizard, the prospect confirmation page, and the staff
   console (all same-origin on powervisa.com). */

:root {
  --navy:#0E2A4E; --navy-2:#13355E; --navy-deep:#0A1F3C;
  --cream:#F5F0E6; --cream-2:#FBF6EA; --gold:#C29329; --gold-2:#E0B964;
  --line:#EBDFC2; --ink:#2A2A28; --muted:#6B7585; --slate:#41506A;
  --bg:#F3F2EE; --surface:#FFFFFF;
  --border-warm:#ECE6D9; --border-input:#DCD5C6;
  --green-deep:#2E6B3E; --tint-green:#E7F2EC; --tint-green-border:#BFE0CD;
  --gold-soft:#9A8A63; --gold-text:#8A6512; --red-text:#B0413A;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r-input:8px; --r-field:11px; --r-card:14px; --r-card-lg:16px; --r-hero:18px; --r-btn:10px;
  --shadow-card:0 2px 8px rgba(14,42,78,.05);
  --shadow-navy:0 6px 18px rgba(14,42,78,.18);
}

* { box-sizing:border-box; }
html,body { margin:0; }
body { font-family:var(--font-sans); color:var(--ink); background:var(--bg);
  font-size:14px; line-height:1.5; -webkit-text-size-adjust:100%; }
.serif { font-family:var(--font-serif); }
a { color:#2E4A74; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--gold-soft); }

/* ---- chrome ---- */
.c-topbar { background:var(--navy-deep); color:#cdd7e6; font-size:12.5px; }
.c-topbar .in { max-width:1040px; margin:0 auto; padding:8px 20px; display:flex; justify-content:space-between; gap:12px; }
.c-topbar a { color:var(--gold-2); text-decoration:none; font-weight:600; }
.c-header { background:var(--navy); }
.c-header .in { max-width:1040px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:12px; }
.c-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.c-brand .mark { width:34px; height:34px; border-radius:8px; background:var(--gold); color:var(--navy-deep);
  font-family:var(--font-serif); font-weight:600; display:grid; place-items:center; font-size:17px; letter-spacing:-0.5px; }
.c-brand .mark em { font-style:italic; }
.c-brand .name { color:#fff; font-family:var(--font-serif); font-size:19px; font-weight:700; }
.c-brand .sub { color:var(--text-on-navy-sub,#A9B6CA); font-size:11px; letter-spacing:.5px; text-transform:uppercase; }

/* ---- hero band ---- */
.c-hero { background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%); color:#fff; }
.c-hero .in { max-width:1040px; margin:0 auto; padding:10px 20px 12px; text-align:center; }
.c-hero .bc { font-size:12px; color:#A9B6CA; margin-bottom:3px; }
.c-hero .bc a { color:#cdd7e6; text-decoration:none; }
.c-hero h1 { font-family:var(--font-serif); font-size:22px; line-height:1.12; margin:0 0 3px; font-weight:700; }
/* Wide measure so the subtitle is two lines on desktop, not three — the third line
   was what made this band eat a fifth of the viewport. It still wraps naturally on
   narrow screens, where the band is short anyway. */
.c-hero p { color:#cdd7e6; font-size:13px; line-height:1.45; max-width:100ch; margin:0 auto; }
@media (max-width:560px) {
  .c-hero h1 { font-size:21px; }
  .c-hero .in { padding:9px 18px 11px; }
  .c-hero p { font-size:12.5px; line-height:1.4; }
}

/* ---- page shell ---- */
.c-main { max-width:1040px; margin:0 auto; padding:26px 20px 56px; }

/* ---- light page title (replaces the navy hero band on get-started) ----
   Title on the cream page instead of a heavy navy block, so the form is the focus. */
.form-head { text-align:center; max-width:720px; margin:0 auto 18px; }
.form-head h1 { font-family:var(--font-serif); color:var(--navy); font-size:27px;
  line-height:1.15; margin:0 0 6px; font-weight:700; }
.form-head p { color:var(--slate); font-size:14px; line-height:1.5; margin:0 auto; }
@media (max-width:560px) {
  .form-head h1 { font-size:22px; }
  .form-head p { font-size:13px; }
}

/* ---- stepper ---- */
.steps { list-style:none; display:flex; align-items:center; justify-content:center; gap:8px; padding:0; margin:0 0 24px; flex-wrap:wrap; }
.steps li { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--muted); }
.steps .dot { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:#E4E0D5; color:var(--navy); font-size:13px; font-weight:700; }
.steps .line { width:40px; height:2px; background:#DcD7CA; border:0; margin:0 2px; }
.steps li.current { color:var(--navy); }
.steps li.current .dot { background:var(--gold); color:#fff; }
.steps li.done { color:var(--navy); }
.steps li.done .dot { background:var(--green-deep); color:#fff; }

/* ---- single centered intake column ---- */
.cflow { max-width:720px; margin:0 auto; }
.card { background:var(--surface); border:1px solid var(--border-warm); border-radius:var(--r-card-lg);
  box-shadow:var(--shadow-card); padding:26px 28px; }
h1.c-h { font-family:var(--font-serif); color:var(--navy); font-size:27px; margin:2px 0 18px; font-weight:700; }
h2.c-h { font-family:var(--font-serif); color:var(--navy); font-size:22px; margin:2px 0 14px; font-weight:700; }

/* ---- form ---- */
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field.full { grid-column:1 / -1; }
label, .lbl { font-size:13px; font-weight:700; color:var(--navy); }
label .opt { font-weight:400; color:var(--muted); }
label .req { color:var(--gold); }
/* Single-line fields run compact on a mouse; @media (pointer:coarse) below restores
   full-size touch targets on phones/tablets. Font stays 16px — anything smaller makes
   iOS Safari zoom the page on focus. */
input, select, textarea { font-family:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--border-input); border-radius:var(--r-input); padding:6px 12px; width:100%; }
/* select lays its inner text out differently than input and ignores line-height, so it
   needs 1px less padding to match a paired input's height (phone/topic sit in one row) */
input { line-height:1.3; }
select { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--gold); }
textarea { resize:vertical; line-height:1.5; padding:9px 12px; }
input::placeholder, textarea::placeholder { color:#9AA4B2; }

/* agreement */
/* Font sized up as the column widened: at 13.5px the wider box ran ~96 characters per
   line, past a comfortable measure. 15px holds it near 85 at no extra height, and keeps
   this signed notice conspicuous. */
.agreement { border:1px solid var(--border-input); border-radius:var(--r-field); background:#FCFAF4;
  padding:14px 20px; font-size:15px; line-height:1.55; color:var(--ink); }
.agreement p { margin:0 0 10px; }
.agreement b { color:var(--navy); }
.agree-check { display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink); cursor:pointer; }
.agree-check input { width:20px; height:20px; flex:none; margin-top:1px; accent-color:var(--navy); }
.sig-input { font-family:var(--font-serif); font-style:italic; font-size:20px; color:var(--navy);
  border:1px solid var(--border-input); border-radius:var(--r-input); background:#fff; padding:7px 14px; }
.hint { font-size:12px; color:var(--muted); margin:5px 0 0; }
.form-error { color:var(--red-text); font-size:13.5px; font-weight:600; min-height:1.1em; margin:2px 0 0; }

/* Inline field errors. The "!" glyph carries the meaning alongside the colour, so
   the error still reads for anyone who can't distinguish the red. Empty by default
   and given no height, so nothing shifts when a message appears. */
.field-err { color:var(--red-text); font-size:12.5px; font-weight:600; margin:4px 0 0; }
.field-err:empty { display:none; }
.field-err::before { content:"! "; font-weight:800; }
[aria-invalid="true"] { border-color:var(--red-text); }

/* ---- preliminary screening questions ----
   Kept deliberately plain. This is a consultation request, not an immigration
   application: no boxes-within-boxes, no heavy rules, one quiet separator to set
   the questions apart from the free-text field above them. */
.qset { border:0; padding:0; margin:0; min-width:0; }
.qset legend { font-size:13px; font-weight:700; color:var(--navy); padding:0; margin-bottom:6px; line-height:1.45; }
.qset .hint { margin:0 0 9px; }
/* the grouped list of examples under a short legend — small, never shouty */
.qlegend-sub { font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 10px; }

/* short answers (No / Yes / Unsure) — inline pills */
.qopts { display:flex; gap:9px; flex-wrap:wrap; }
.qopt { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink);
  border:1px solid var(--border-input); border-radius:999px; padding:7px 15px; cursor:pointer; background:#fff; }
.qopt:hover { border-color:var(--gold); }
.qopt input { width:17px; height:17px; margin:0; flex:none; accent-color:var(--navy); }
.qopt:has(input:checked) { border-color:var(--gold); background:var(--cream-2); }

/* long answers — a compact vertical radio list. Used where option text is too long
   for pills or for a collapsed select to show without truncating. */
.qlist { display:flex; flex-direction:column; gap:2px; }
.qrow { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink);
  padding:5px 0; cursor:pointer; line-height:1.45; }
.qrow input { width:16px; height:16px; margin:1px 0 0; flex:none; accent-color:var(--navy); }
.qrow:hover span { color:var(--navy); }

/* conditional follow-ups — indented under the answer that revealed them */
.qmore { margin:11px 0 0; padding-left:14px; border-left:2px solid var(--line);
  display:flex; flex-direction:column; gap:11px; }
.qmore[hidden] { display:none; }
.qnote { font-size:12.5px; color:var(--gold-text); line-height:1.5; margin:0; }
.qnote[hidden] { display:none; }

/* the one warning that must be read before typing, not after */
.hint-warn { color:var(--red-text); font-weight:700; }

.privacy-note { margin-top:8px; }

/* consultation terms link + gate state */
.terms-cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); background:var(--cream-2); border-radius:var(--r-field); padding:13px 16px; }
.terms-link { font-size:14.5px; font-weight:700; color:#2E4A74; }
.terms-state { font-size:12.5px; color:var(--gold-text); margin-left:auto; }
.terms-state.ok { color:var(--green-deep); font-weight:600; }
.terms-state.ok::before { content:"\2713 "; font-weight:800; }

/* ---- consultation terms modal ----
   Nearly full-screen on phones (a short fixed-height box is miserable to scroll on
   a small screen); a comfortable centred sheet on desktop. */
.tmodal { padding:0; border:0; width:min(760px, 100vw - 32px); max-width:100%;
  max-height:min(86vh, 100% - 32px); border-radius:var(--r-hero); box-shadow:0 20px 60px rgba(10,27,51,.4);
  background:var(--surface); color:var(--ink); overflow:hidden; }
.tmodal::backdrop { background:rgba(10,27,51,.55); }
.tmodal[open] { display:flex; flex-direction:column; }
.tmodal-hd { background:var(--navy); color:#fff; padding:14px 20px; display:flex; align-items:center; gap:12px; flex:none; }
.tmodal-hd h2 { font-family:var(--font-serif); font-size:18px; font-weight:700; margin:0; }
.tmodal-x { margin-left:auto; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:8px; padding:8px 14px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; flex:none; }
.tmodal-x:hover { background:rgba(255,255,255,.22); }
.tmodal-body { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:22px 26px; flex:1 1 auto; min-height:0; }
/* Cap the measure inside the wide modal: 16px running the full width is ~90
   characters a line, past comfortable. Centring the column keeps it deliberate. */
.tmodal-body .terms { font-size:16px; line-height:1.7; max-width:66ch; margin:0 auto; }
.tmodal-body:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; }
.tmodal-ft { border-top:1px solid var(--border-warm); background:var(--cream-2); padding:14px 20px; flex:none;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tmodal-ft .hint { margin:0; }
.tmodal-ft .btn { margin-left:auto; }
.tmodal-ft .btn:disabled { opacity:.5; }

/* terms typography — shared by the modal and the standalone terms page */
/* Scrollable terms box on the confirmation page (read-to-end gate reads its scroll). */
.terms-scroll { max-height:min(46vh, 380px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border-input); border-radius:var(--r-field); background:#FCFAF4; padding:14px 18px; }
.terms-scroll:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; }

.terms { font-size:15px; line-height:1.65; color:var(--ink); }
.terms h2 { font-family:var(--font-serif); font-size:17px; color:var(--navy); font-weight:700; margin:22px 0 7px; }
.terms h2:first-child { margin-top:0; }
.terms p { margin:0 0 11px; }
.terms ol, .terms ul { margin:0 0 11px; padding-left:22px; }
.terms li { margin-bottom:5px; }
.terms-meta { font-size:12.5px; color:var(--muted); margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--border-warm); }
.terms-end-mark { font-size:12.5px; font-weight:700; color:var(--gold-text); text-transform:uppercase;
  letter-spacing:.6px; margin-top:20px; padding-top:12px; border-top:1px solid var(--border-warm); }
/* The end-of-terms sentinel MUST have area. An empty inline span measures 0x0, and
   IntersectionObserver reports nothing for a zero-area target however far it is
   scrolled into view — which would leave the agreement gate permanently shut. */
#terms-end { display:block; height:1px; width:100%; }

/* nested screening question inside a conditional follow-up */
.qmore .qset legend { font-size:12.5px; margin-bottom:7px; }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit;
  font-size:15px; font-weight:700; border-radius:var(--r-btn); padding:13px 22px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; }
.btn-primary { background:var(--navy); color:#fff; box-shadow:var(--shadow-navy); }
.btn-primary:hover { background:var(--navy-2); }
.btn-outline { background:#fff; color:var(--navy); border-color:var(--border-input); }
.btn-lg { font-size:16px; padding:14px 26px; }
.btn:disabled { opacity:.55; cursor:default; }
.linkback { display:inline-block; color:var(--muted); font-size:14px; text-decoration:none; margin-top:14px; }

/* ---- right rail ---- */
.rail { display:flex; flex-direction:column; gap:14px; }
.rail-navy { background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%); color:#fff;
  border-radius:var(--r-card-lg); padding:20px; }
.rail-navy .eyebrow { color:var(--gold-2); }
.wexpect { list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:14px; }
.wexpect li { display:flex; gap:11px; font-size:13.5px; line-height:1.45; color:#D7DEEA; }
.wexpect .n { width:24px; height:24px; border-radius:50%; border:1px solid var(--gold-2); color:var(--gold-2);
  font-size:12px; font-weight:700; display:grid; place-items:center; flex:none; }
.att-card { background:#fff; border:1px solid var(--border-warm); border-radius:var(--r-card); padding:16px;
  display:flex; gap:12px; align-items:center; box-shadow:var(--shadow-card); }
.att-card .av { width:46px; height:46px; border-radius:50%; background:var(--gold); color:var(--navy-deep);
  font-weight:800; display:grid; place-items:center; font-size:16px; flex:none; overflow:hidden; }
.att-card .av img { width:100%; height:100%; object-fit:cover; }
.att-card .nm { font-family:var(--font-serif); font-size:16px; color:var(--navy); font-weight:700; }
.att-card .role { font-size:12.5px; color:var(--muted); }
.att-card .rep { font-size:12.5px; color:var(--gold-text); }
.trust { background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-card); padding:16px; }
.trust .hd { font-weight:700; color:var(--gold-text); font-size:13.5px; margin-bottom:10px; }
.trust ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.trust li { display:flex; gap:9px; font-size:13px; color:var(--slate); line-height:1.4; }
.trust li svg { flex:none; margin-top:2px; }

/* ---- step 2: inline Calendly booking ---- */
.cflow-book { max-width:880px; margin:0 auto; text-align:center; }
.book-sub { color:var(--muted); font-size:14px; margin:0 auto 16px; max-width:62ch; }
/* The calendar itself. Calendly injects an iframe that fills this box; the rounded
   corners are clipped by overflow:hidden. Tall enough to show the month + times
   without Calendly's own inner scrollbar on desktop. */
.cal-embed { min-width:320px; width:100%; height:680px; background:#fff;
  border:1px solid var(--border-warm); border-radius:var(--r-card-lg); overflow:hidden; }
.cal-embed iframe { display:block; width:100%; height:100%; border:0; }
.cal-fallback { font-size:13px; color:var(--muted); margin:10px 0 0; }
.book-actions { display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-top:16px; }
.book-actions .linkback { margin-top:0; }
@media (max-width:560px) {
  .cal-embed { height:1040px; }        /* Calendly stacks vertically on narrow screens */
  .book-actions { flex-direction:column-reverse; align-items:stretch; }
  .book-actions .btn { width:100%; }
}

/* ---- step 2 ---- */
.signed-banner { background:var(--tint-green); border:1px solid var(--tint-green-border); border-radius:var(--r-card);
  padding:16px 18px; display:flex; gap:12px; align-items:flex-start; margin-bottom:20px; }
.signed-banner .ic { width:26px; height:26px; border-radius:50%; background:var(--green-deep); color:#fff;
  display:grid; place-items:center; flex:none; }
.signed-banner b { font-family:var(--font-serif); color:var(--navy); font-size:16px; }
.signed-banner p { margin:4px 0 0; color:var(--slate); font-size:13.5px; }
.req-card { background:#fff; border:1px solid var(--border-warm); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow-card); }
.req-card .eyebrow { color:var(--gold-soft); }
.req-card dl { margin:12px 0 0; display:flex; flex-direction:column; gap:11px; }
.req-card dt { font-size:11.5px; color:var(--muted); }
.req-card dd { margin:0; font-size:14px; color:var(--navy); font-weight:600; }

/* ---- booking modal ---- */
.modal-ov { position:fixed; inset:0; background:rgba(10,27,51,.55); display:none; z-index:60;
  padding:20px; overflow:auto; }
.modal-ov.open { display:flex; align-items:flex-start; justify-content:center; }
.modal { background:#fff; border-radius:var(--r-hero); width:100%; max-width:860px; margin:24px auto;
  overflow:hidden; box-shadow:0 20px 60px rgba(10,27,51,.4); }
.modal-hd { background:var(--navy); color:#fff; padding:16px 20px; display:flex; align-items:center; gap:12px; }
.modal-hd .mark { width:34px; height:34px; border-radius:8px; background:var(--gold); color:var(--navy-deep);
  font-weight:800; display:grid; place-items:center; flex:none; }
.modal-hd .t { font-family:var(--font-serif); font-size:18px; font-weight:700; }
.modal-hd .s { font-size:12.5px; color:#A9B6CA; }
.modal-hd .x { margin-left:auto; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:8px; padding:8px 14px; font:inherit; font-weight:600; cursor:pointer; }
.modal-strip { background:var(--cream-2); border-bottom:1px solid var(--line); color:var(--gold-text);
  font-size:12.5px; padding:10px 20px; display:flex; gap:8px; align-items:center; }
.modal-body { padding:0; min-height:420px; }
.modal-body iframe { width:100%; height:560px; border:0; display:block; }
.modal-fallback { padding:32px; text-align:center; }

/* ---- step 3 ---- */
.done-hero { background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%); color:#fff;
  border-radius:var(--r-hero) var(--r-hero) 0 0; padding:34px; text-align:center; }
.done-hero .ck { width:58px; height:58px; border-radius:50%; background:rgba(224,185,100,.22);
  border:1px solid var(--gold-2); color:var(--gold-2); display:grid; place-items:center; margin:0 auto 14px; }
.done-hero h1 { font-family:var(--font-serif); font-size:28px; margin:0 0 8px; }
.done-hero .req { color:#cdd7e6; font-size:14px; }
.done-body { background:#fff; border:1px solid var(--border-warm); border-top:0;
  border-radius:0 0 var(--r-hero) var(--r-hero); padding:26px 30px; }
.next-list { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:16px; }
.next-list li { display:flex; gap:13px; font-size:14px; color:var(--slate); line-height:1.5; }
.next-list .n { width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--cream-2);
  color:var(--gold-text); font-size:13px; font-weight:700; display:grid; place-items:center; flex:none; }
.next-list b { color:var(--navy); }
.done-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

/* ---- footer ---- */
.c-footer { background:var(--navy-deep); color:#A9B6CA; margin-top:40px; }
.c-footer .in { max-width:1040px; margin:0 auto; padding:26px 20px; font-size:12.5px; }
.c-footer .discl { border-top:1px solid rgba(255,255,255,.12); margin-top:16px; padding-top:14px; line-height:1.5; }
.c-footer a { color:#cdd7e6; }

/* ---- responsive (900px breakpoint per handoff) ---- */
/* Touch devices get the taller fields back: a compact mouse-sized field is under the
   44px minimum tap target. Keyed to pointer type, not width, so a large touchscreen
   is treated as touch and a small desktop window is not. */
@media (pointer:coarse) {
  input, select, textarea { padding:11px 12px; }
  select { padding-top:10px; padding-bottom:10px; }
  .sig-input { padding:12px 14px; }
  /* the No/Yes/Unsure pills are 37px on a mouse, which is under the 44px tap target */
  .qopt { min-height:44px; }
  .qrow { padding:9px 0; }
  .agree-check { padding:4px 0; }
}
@media (max-width:900px) {
  .card { padding:22px 20px; }
  .steps li { font-size:13px; }
  .steps .line { width:22px; }
}
@media (max-width:560px) {
  .fgrid { grid-template-columns:1fr; }
  .btn-lg, .done-actions .btn { width:100%; }
  .c-brand .sub { display:none; }
  .modal { margin:0; border-radius:0; }
  .modal-body iframe { height:70vh; }
  /* the 15px agreement is sized for the wide desktop column; on a phone it just
     forces more lines, so drop back to the tighter size */
  .agreement { font-size:13.5px; line-height:1.6; padding:12px 14px; }
  /* Terms modal becomes a full-screen sheet. dvh (not vh) so the footer button
     isn't stranded under Safari's collapsing address bar; vh is the fallback. */
  .tmodal { width:100vw; max-width:100vw; height:100vh; height:100dvh;
    max-height:100vh; max-height:100dvh; border-radius:0; }
  .tmodal-body { padding:16px; }
  .tmodal-body .terms { font-size:15px; line-height:1.65; max-width:none; }
  .tmodal-ft { flex-direction:column; align-items:stretch; gap:9px; }
  .tmodal-ft .btn { margin-left:0; width:100%; }
  .qopt { flex:1 1 auto; justify-content:center; }
}

/* ==== staff console (master–detail) ==== */
.sc-head { background:var(--navy); }
.sc-head .in { max-width:1180px; margin:0 auto; padding:13px 20px; display:flex; align-items:center; gap:11px; }
.sc-head .mark { width:32px; height:32px; border-radius:8px; background:var(--gold); color:var(--navy-deep); font-family:var(--font-serif); font-weight:600; display:grid; place-items:center; font-size:16px; letter-spacing:-0.5px; }
.sc-head .mark em { font-style:italic; }
.sc-head .t { color:#fff; font-family:var(--font-serif); font-size:18px; font-weight:700; }
.sc-head .lbl { color:#A9B6CA; font-size:11px; letter-spacing:.5px; text-transform:uppercase; }
.sc-head .who { margin-left:auto; color:#A9B6CA; font-size:12.5px; }
.sc-wrap { max-width:1180px; margin:0 auto; padding:20px; }
.sc-grid { display:grid; grid-template-columns:360px minmax(0,1fr); gap:20px; align-items:start; }
.sc-search { width:100%; margin-bottom:12px; }
.sc-list { display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 170px); overflow:auto; }
.sc-item { background:#fff; border:1px solid var(--border-warm); border-radius:var(--r-card); padding:13px 14px; cursor:pointer; display:flex; gap:11px; align-items:flex-start; box-shadow:var(--shadow-card); }
.sc-item:hover { border-color:var(--border-input); }
.sc-item.active { background:var(--cream-2); border-color:var(--gold); border-left:4px solid var(--gold); padding-left:11px; }
.sc-av { width:38px; height:38px; border-radius:50%; background:var(--navy); color:var(--gold-2); font-weight:800; font-size:13px; display:grid; place-items:center; flex:none; }
.sc-item .nm { font-weight:700; color:var(--navy); font-size:14.5px; }
.sc-item .mt { font-size:12px; color:var(--muted); margin-top:1px; }
.sc-badges { margin-left:auto; flex:none; }
.badge { display:inline-block; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.b-new { background:#E7EDF6; color:#2E4A74; }
.b-sent { background:#F3E9CE; color:var(--gold-text); }
.b-reply { background:#F6E3C7; color:#8A5A12; }
.b-ok { background:var(--tint-green); color:var(--green-deep); }
.b-warn { background:#FBEAE6; color:#B0533A; }
.b-cancel { background:#EEF1F5; color:#6B7585; }
.sc-detail { background:#fff; border:1px solid var(--border-warm); border-radius:var(--r-card-lg); padding:24px 26px; box-shadow:var(--shadow-card); min-height:320px; }
.sc-empty { color:var(--muted); text-align:center; padding:70px 20px; }
.sc-dhead { display:flex; gap:13px; align-items:flex-start; }
.sc-dhead .sc-av { width:48px; height:48px; font-size:16px; }
.sc-dhead .nm { font-family:var(--font-serif); font-size:22px; color:var(--navy); font-weight:700; line-height:1.15; }
.sc-dhead .contact { font-size:13px; color:var(--muted); margin-top:3px; }
.sc-dhead .badge { margin-left:auto; }
.sc-chips { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.chip { font-size:12px; background:#F2EEE3; color:var(--slate); padding:4px 11px; border-radius:999px; }
.chip.topic { background:#F3E9CE; color:var(--gold-text); }
.quote { background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 18px; margin-top:6px; }
.quote .q { font-style:italic; color:var(--ink); line-height:1.6; font-size:14px; }
.quote .sig { font-size:12.5px; color:var(--gold-text); margin-top:10px; }
.sc-prep { margin-top:22px; }
.sc-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
.sc-actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.sc-out { margin-top:12px; font-size:13px; color:var(--slate); }
.sc-out .lk { word-break:break-all; background:#FBF6EA; border:1px solid var(--line); padding:9px 10px; border-radius:8px; font-size:12.5px; margin-top:6px; }
.sc-resp { font-size:13px; margin-top:12px; padding:10px 12px; border-radius:8px; background:#F6E3C7; color:#8A5A12; }
@media (max-width:900px) {
  .sc-grid { grid-template-columns:1fr; }
  .sc-list { max-height:none; }
  .sc-fields { grid-template-columns:1fr; }
}