/* ============================================================
   Support page and its thank-you page. Loads after assets/home.css and
   reuses its tokens, header, footer, kicker/h2, FAQ rows, buttons and QR
   popup. Phone first (iPhone 17 Pro Max is the reference): one calm
   column, form fields that feel like iOS (label inside the box, 17px text
   so Safari never zooms on focus), light from a soft glow only.
   The inline form script relies on: .sup-status(--ok|--err), .sup-hp,
   #supSubmit[disabled]. The thank-you script relies on #doneReceipt[hidden].
   ============================================================ */

:root { --field:#0f0f11; --field-line:rgba(255,255,255,.12); --err:#ff8a80; }

/* ---------- hero: the shared .ph in home.css, plus who answers ---------- */
/* who answers: a face and a name, right under the promise */
.sp-who { margin-top:24px; display:inline-flex; align-items:center; gap:12px; text-align:left; }
.sp-who__face { width:48px; height:48px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 24px -8px var(--accent-glow); }
.sp-who__text { display:flex; flex-direction:column; gap:3px; }
.sp-who__name { font-size:16px; font-weight:700; line-height:1.2; color:var(--fg); }
.sp-who__role { font-size:13px; line-height:1.2; color:var(--t-60); }

/* ---------- one calm column for both sections ---------- */
.sp-col { max-width:640px; }
.sp-head { text-align:center; }
.sp-head .h2 { max-width:16ch; margin-inline:auto; }

/* ---------- quick answers (the homepage FAQ rows) ---------- */
.sp-quick { padding:64px 0 0; }
.sp-faq { margin-top:32px; }
.sp-faq > .faq__item:first-child::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); }

/* ---------- the message form ---------- */
.sp-contact { padding:var(--sec) 0; }
.sup-form { margin-top:32px; display:grid; gap:12px; }
.sup-pair { display:grid; gap:12px; }

.fld { position:relative; }
/* the label sits inside the box; the control fills the whole box, so a tap anywhere lands in it */
.fld__label { position:absolute; top:11px; left:17px; right:44px; z-index:1; font-size:13px; font-weight:600; line-height:16px; color:var(--t-60); pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fld__control {
  display:block; width:100%; min-height:64px; margin:0; padding:30px 16px 11px;
  background:var(--field); border:1px solid var(--field-line); border-radius:14px;
  font:inherit; font-size:17px; line-height:22px; color:var(--fg);
  -webkit-appearance:none; appearance:none; outline:none; box-shadow:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fld__control:focus { border-color:rgba(97,224,175,.6); box-shadow:0 0 0 4px rgba(97,224,175,.12); }
@media (hover:hover) and (pointer:fine) { .fld__control:hover:not(:focus) { border-color:rgba(255,255,255,.22); } }
.fld__control::placeholder { color:var(--t-45); opacity:1; }
.fld__control:user-invalid { border-color:rgba(255,138,128,.7); }
/* iOS autofill paints its own background; keep the field dark */
.fld__control:-webkit-autofill { -webkit-text-fill-color:var(--fg); caret-color:var(--fg); -webkit-box-shadow:0 0 0 1000px var(--field) inset; transition:background-color 9999s; }
.fld__control:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px var(--field) inset, 0 0 0 4px rgba(97,224,175,.12); }

.fld--select .fld__control { padding-right:44px; cursor:pointer; text-overflow:ellipsis; }
.fld--select .fld__control option { background:#0e0e10; color:var(--fg); }
.fld__chev { position:absolute; right:16px; top:50%; width:18px; height:18px; margin-top:-9px; fill:none; stroke:var(--t-60); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }

textarea.fld__control { min-height:176px; padding-top:32px; resize:vertical; }
/* the message label keeps a strip of field colour, so long text scrolls under it cleanly */
.fld--area .fld__label { top:1px; left:1px; right:1px; padding:10px 16px 6px; border-radius:13px 13px 0 0; background:var(--field); }

.sup-hint { margin-top:-4px; padding:0 4px; font-size:13px; line-height:1.4; color:var(--t-60); }
.sup-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sup-captcha { margin-top:4px; min-height:78px; display:flex; justify-content:center; }

.sup-send { width:100%; min-height:56px; margin-top:8px; font-size:17px; animation:none; }
.sup-send[disabled] { opacity:.55; pointer-events:none; }
.sup-status { margin-top:4px; text-align:center; font-size:15px; line-height:1.45; color:var(--t-75); text-wrap:balance; }
.sup-status:empty { display:none; }
.sup-status--ok { color:var(--accent); }
.sup-status--err { color:var(--err); }

.sup-alt { margin-top:24px; text-align:center; font-size:15px; line-height:1.5; color:var(--t-60); text-wrap:balance; }
.sup-alt a, .sp-done__note a { padding-block:14px; color:var(--accent); text-decoration:underline; text-decoration-color:rgba(97,224,175,.4); text-underline-offset:3px; }

/* ---------- thank-you page (hero is the shared .ph; the check sits inside the headline) ---------- */
.sp-done { padding-bottom:var(--sec); }
.sp-done__mark { display:inline-flex; align-items:center; justify-content:center; width:.82em; height:.82em; margin-right:.24em; vertical-align:-.1em; border-radius:50%; background:var(--accent-fill); box-shadow:0 0 0 1px var(--accent-border), 0 0 28px -8px var(--accent-glow); }
.sp-done__mark svg { width:58%; height:58%; fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.sp-done__mark path { stroke-dasharray:24; stroke-dashoffset:24; animation:sp-draw .6s .35s var(--ease-out) forwards; }
@keyframes sp-draw { to { stroke-dashoffset:0; } }
.sp-receipt { margin:28px auto 0; max-width:400px; background:var(--field); border:1px solid rgba(255,255,255,.08); border-radius:16px; text-align:left; }
.sp-receipt[hidden] { display:none; }
.sp-receipt > div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 16px; }
.sp-receipt > div + div { border-top:1px solid rgba(255,255,255,.07); }
.sp-receipt dt { flex:0 0 auto; font-size:15px; color:var(--t-60); }
.sp-receipt dd { min-width:0; font-size:15px; font-weight:600; color:var(--fg); text-align:right; overflow-wrap:anywhere; }
.sp-done__lead { margin-top:24px; }
.sp-done__lead strong { color:var(--fg); font-weight:600; }
.sp-done__note { margin:16px auto 0; max-width:36ch; font-size:15px; line-height:1.5; color:var(--t-60); text-wrap:balance; }
.sp-done__links { margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:0 28px; }
.sp-done__links a { display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--accent); }

/* Display Zoom (320pt): the spam check is 303pt wide, so it steps down to fit the column */
@media (max-width:359px) {
  .sup-captcha { justify-content:flex-start; overflow:hidden; }
  .sup-captcha .h-captcha { transform:scale(.9); transform-origin:left top; margin-bottom:-8px; }
}

/* ---------- tablets and desktop: same column, a little more air ---------- */
@media (min-width:600px) {
  .sup-pair { grid-template-columns:1fr 1fr; }
}
@media (min-width:900px) {
  .sp-quick { padding-top:88px; }
}

@media (prefers-reduced-motion:reduce) {
  .sp-done__mark path { animation:none; stroke-dashoffset:0; }
}

/* ---------- computers (2026-09-26): quick answers and the form side by side ----------
   One narrow centered column wasted the screen and pushed the form far down.
   From 1000px the answers sit on the left, centered against the form on the
   right, both headings left-aligned. The hero stays the shared centered .ph. */
@media (min-width:1000px) {
  .sp-duo { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(56px,7vw,120px); align-items:center;
    max-width:var(--wrap); margin-inline:auto; padding:88px var(--gr) var(--sec) var(--gl); }
  .sp-duo > section > .wrap { max-width:none; padding:0; }
  .sp-duo .sp-head { text-align:left; }
  .sp-duo .sp-head .h2 { margin-inline:0; }
  .sp-quick { padding:0; }
  .sp-contact { padding:0; }
  .sp-contact .sup-alt { text-align:left; }
}