/* ============================================================
   Questionnaire + back office. Inherits every colour token from
   styles.css, so the palette only ever lives in one file.
   ============================================================ */

.q-body{ background:var(--bg-2); }
.q-top{ background:var(--bg); border-bottom:1px solid var(--line); padding:16px var(--pad); }
.q-wrap{ max-width:760px; margin:0 auto; padding:clamp(32px,6vw,64px) var(--pad) 64px; }
.q-foot{ text-align:center; padding:0 var(--pad) 48px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.q-foot p{ margin:0; }

.q-intro h1{ font-size:clamp(1.9rem,4.4vw,2.7rem); margin-bottom:.35em; }
.q-intro .lede{ font-size:1.05rem; }

/* progress ------------------------------------------------- */
.q-progress{ height:4px; background:var(--line); border-radius:999px; overflow:hidden; margin:34px 0 10px; }
.q-progress__bar{ height:100%; width:0; background:var(--accent); transition:width .35s ease; }
.q-count{ font-family:var(--mono); font-size:12px; color:var(--muted); margin:0 0 22px; }

/* steps ---------------------------------------------------- */
.q-form{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,4vw,34px); box-shadow:var(--shadow); }
.q-step{ display:none; }
.q-step.is-active{ display:block; animation:qIn .35s ease; }
@keyframes qIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .q-step.is-active{ animation:none; } }
.q-step h2{ font-size:1.5rem; margin-bottom:.25em; }
.q-blurb{ color:var(--muted); font-size:15px; margin-bottom:26px; }

.q-field{ margin-bottom:22px; }
.q-field label{ display:block; font-size:15px; font-weight:600; color:var(--head); margin-bottom:6px; }
.req{ font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.1em;
      text-transform:uppercase; color:var(--accent-ink); vertical-align:middle; margin-left:6px; }
.q-hint{ font-size:13.5px; color:var(--muted); margin:-2px 0 8px; }

.q-field input, .q-field textarea, .q-field select{
  font:inherit; font-size:16px; color:var(--head); width:100%;
  background:var(--bg); border:1px solid var(--line-2); border-radius:8px; padding:12px 14px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.q-field textarea{ resize:vertical; }
.q-field select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent-ink) 50%),linear-gradient(135deg,var(--accent-ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px; background-size:6px 6px; background-repeat:no-repeat; }
.q-field input:focus, .q-field textarea:focus, .q-field select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16); outline:none; }
.q-field input.is-bad, .q-field textarea.is-bad{ border-color:var(--bad); }

.q-checks{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (max-width:560px){ .q-checks{ grid-template-columns:1fr; } }
.q-check{ display:flex; align-items:flex-start; gap:10px; font-weight:400 !important;
  background:var(--bg); border:1px solid var(--line-2); border-radius:8px; padding:11px 13px;
  cursor:pointer; font-size:14.5px; margin:0; transition:border-color .15s ease, background .15s ease; }
.q-check:hover{ border-color:var(--accent); }
.q-check input{ width:auto; margin:2px 0 0; accent-color:var(--accent); }
.q-check span{ color:var(--text); }

.q-nav{ display:flex; gap:12px; align-items:center; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.q-nav .btn--ghost[hidden], .q-nav .btn[hidden]{ display:none; }
#qNext, #qSend{ margin-left:auto; }
.q-saved{ font-family:var(--mono); font-size:11.5px; color:var(--muted); margin:14px 0 0; min-height:1em; }

.q-errors{ background:rgba(192,57,43,.07); border:1px solid var(--bad); border-radius:var(--r);
  padding:16px 20px; margin-bottom:24px; color:var(--head); font-size:15px; }
.q-errors ul{ margin:8px 0 0; padding-left:20px; }

.q-done{ background:var(--surf); border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:var(--r); padding:clamp(26px,5vw,40px); box-shadow:var(--shadow); }
.q-done h1{ font-size:clamp(1.7rem,3.6vw,2.3rem); }
.q-done .lede{ font-size:1.05rem; }
.q-done a:not(.btn){ color:var(--accent-ink); }

/* ============================================================
   The agreement page — a client reading their own quote.
   Every token comes from styles.css; nothing new is defined here.
   ============================================================ */

.ag-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:26px; }
.ag-head h1{ font-size:clamp(1.7rem,4vw,2.4rem); margin:0 0 .3em; }
.ag-meta{ font-family:var(--mono); font-size:12px; color:var(--muted); margin:0; }
.ag-price{ font-family:var(--mono); font-size:clamp(1.9rem,4.4vw,2.6rem); font-weight:500;
  color:var(--head); margin:0; line-height:1; white-space:nowrap; }

/* the one-line answer to "where does this stand" */
.ag-state{ border-radius:var(--r); padding:14px 18px; margin:0 0 26px; font-size:15px;
  border:1px solid var(--line); background:var(--surf); color:var(--text); }
.ag-state--yes{ border-color:rgba(var(--ok-rgb),.35); background:rgba(var(--ok-rgb),.07); }
.ag-state--old{ border-color:var(--line-2); background:var(--surf-2); color:var(--muted); }

.ag-yes{ background:var(--surf); border:1px solid rgba(var(--ok-rgb),.35); border-radius:var(--r);
  padding:clamp(22px,4vw,32px); margin-bottom:30px; box-shadow:var(--shadow); }
.ag-yes h1{ font-size:clamp(1.6rem,3.6vw,2.2rem); margin:.1em 0 .35em; }
.ag-yes .lede{ margin:0; }

.ag-block{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,3.5vw,30px); margin-bottom:20px; box-shadow:var(--shadow); }
.ag-block h2{ font-size:1.15rem; margin:0 0 14px; }
.ag-lede{ color:var(--text); font-size:15px; margin:0 0 16px; }
.ag-bound{ font-size:14px; color:var(--muted); margin:0; padding:12px 14px;
  background:var(--raise); border-radius:8px; }

/* Wide on a phone only because a price column cannot wrap usefully. */
.ag-table{ width:100%; border-collapse:collapse; }
.ag-table td{ padding:12px 0; border-bottom:1px solid var(--line); vertical-align:top;
  font-size:15px; color:var(--text); }
.ag-table tr:last-child td{ border-bottom:none; }
.ag-n{ font-family:var(--mono); text-align:right; white-space:nowrap; padding-left:16px !important;
  color:var(--head); }
.ag-sub{ display:block; font-size:13px; color:var(--muted); margin-top:3px; }
.ag-total td{ border-top:2px solid var(--line-2); border-bottom:1px solid var(--line);
  font-weight:600; color:var(--head); padding-top:14px; }
.ag-total .ag-n{ font-size:1.15rem; }

.ag-terms{ margin:0; }
.ag-terms dt{ font-weight:600; color:var(--head); font-size:14.5px; margin-top:14px; }
.ag-terms dt:first-child{ margin-top:0; }
.ag-terms dd{ margin:3px 0 0; font-size:14.5px; color:var(--text); }

.ag-accept{ border-color:var(--accent); }
.ag-form .q-field{ margin-bottom:16px; }
.ag-check{ margin-bottom:20px !important; }
.ag-form .btn{ width:100%; }
.ag-form .q-hint{ margin:14px 0 0; }

/* Two ways to pay, as cards the radio lives inside. Both the same size
   so neither reads as the recommended one -- the recommendation is in
   the conversation, not the layout. */
.ag-pick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.ag-opt{ display:flex; gap:12px; align-items:flex-start; padding:16px; border:1px solid var(--line-2);
         border-radius:var(--r); background:var(--surf-2); cursor:pointer; min-width:0; }
.ag-opt:has(input:checked){ border-color:var(--accent); background:var(--surf); }
.ag-opt input{ margin-top:4px; flex:none; }
.ag-opt__body{ display:flex; flex-direction:column; gap:4px; min-width:0; font-size:14.5px; }
.ag-opt__head{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.ag-opt__n{ font-family:var(--mono); font-weight:500; white-space:nowrap; }
.ag-opt__line{ color:var(--text); }
.ag-opt__fine, .ag-fine{ font-size:13px; color:var(--muted); }
.ag-pay{ margin-bottom:26px; }

/* ── book a call ──
   Days are links (a day is a page), times are radios (a time is a
   choice), the rest is a form. Nothing here needs JavaScript. */
.bk-tz{ display:block; margin-top:8px; font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.bk fieldset{ border:0; padding:0; margin:0 0 28px; min-width:0; }
.bk legend{ font-weight:600; color:var(--head); font-size:15.5px; margin-bottom:12px; padding:0; }
.bk-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.bk-days__list{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.bk-day{
  flex:0 0 auto; scroll-snap-align:start; min-width:64px; text-align:center; text-decoration:none;
  padding:10px 8px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surf); color:var(--text);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.bk-day:hover{ border-color:var(--accent); transform:translateY(-1px); }
.bk-day.is-on{ border-color:var(--accent); background:rgba(var(--accent-rgb),.07); color:var(--head); box-shadow:inset 0 0 0 1px var(--accent); }
.bk-day__dow{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.bk-day__n{ display:block; font-family:var(--display); font-size:1.35rem; font-weight:600; line-height:1.2; margin:2px 0; }
.bk-day__m{ display:block; font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.bk-times__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.bk-slot{ position:relative; display:block; min-width:0; }
.bk-slot input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.bk-slot span{
  display:block; text-align:center; padding:11px 6px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--surf); font-family:var(--mono); font-size:14px; color:var(--head);
  transition:border-color .16s ease, background .16s ease;
}
.bk-slot:hover span{ border-color:var(--accent); }
.bk-slot input:checked + span{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.bk-slot input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.bk-slot--taken span{ color:var(--muted); background:var(--surf-2); border-style:dashed; text-decoration:line-through; }
.bk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width:640px){ .bk-grid{ grid-template-columns:1fr; } }
.bk .btn{ width:100%; }
.bk-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin:0 0 26px; }
.bk-cancel{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:22px; }
.bk-cancel .q-hint{ margin:0; }

@media (max-width:520px){
  .ag-head{ gap:10px; }
  .ag-price{ font-size:2rem; }
}

/* ── the client portal ──
   Read-mostly: numbers a client scans, then one form. The only colour
   that carries meaning is status -- ok, bad, late -- so nothing else
   competes with it. */
.pt-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
          flex-wrap:wrap; margin-bottom:26px; }
.pt-head h1{ margin:0; font-size:clamp(1.7rem,4vw,2.4rem); }
.pt-plan-chip{ margin:0; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  padding:7px 14px; border-radius:999px; border:1px solid rgba(var(--accent-rgb),.45);
  background:rgba(var(--accent-rgb),.07); color:var(--head); white-space:nowrap; }
.pt-plan-chip span{ color:var(--muted); }

/* build timeline */
.pt-steps{ list-style:none; margin:0; padding:0; }
.pt-step{ position:relative; display:flex; gap:14px; padding:0 0 22px 0; }
.pt-step:not(:last-child)::before{ content:""; position:absolute; left:6px; top:16px; bottom:0;
  width:1px; background:var(--line-2); }
.pt-step__dot{ position:relative; z-index:1; flex:0 0 auto; width:13px; height:13px; margin-top:4px;
  border-radius:50%; border:2px solid var(--line-2); background:var(--surf); }
.pt-step.is-done .pt-step__dot{ border-color:var(--ok); background:var(--ok); }
.pt-step.is-now .pt-step__dot{ border-color:var(--accent); background:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18); }
.pt-step__body{ display:flex; flex-direction:column; gap:2px; min-width:0; font-size:14.8px; }
.pt-step__body strong{ color:var(--head); font-size:15.5px; }
.pt-step__body span{ color:var(--muted); }
.pt-step__body em{ font-style:normal; font-family:var(--mono); font-size:12px; color:var(--muted); }
.pt-step.is-todo .pt-step__body strong{ color:var(--muted); }

/* sites */
.pt-sites{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.pt-site{ border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; background:var(--surf-2); min-width:0; }
.pt-site__name{ display:flex; align-items:center; gap:9px; margin:0 0 12px; font-weight:600; }
.pt-site__name a{ color:var(--head); text-decoration:none; word-break:break-word; }
.pt-site__name a:hover{ text-decoration:underline; }
.pt-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--muted); }
.pt-dot.is-ok{ background:var(--ok); }
.pt-dot.is-bad{ background:var(--bad); }
.pt-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 12px; }
.pt-stats div{ min-width:0; }
.pt-stats dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pt-stats dd{ margin:2px 0 0; font-family:var(--mono); font-size:1.05rem; color:var(--head); }
.pt-spark-wrap{ display:flex; align-items:center; gap:10px; margin:0 0 10px; color:var(--accent); }
.pt-spark-wrap span{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.pt-spark{ display:block; flex:0 0 auto; }
.pt-note{ margin:0; font-size:13.5px; color:var(--muted); }
.pt-note--ok{ color:var(--ok); }

/* what we did */
.pt-did{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pt-did li{ display:flex; align-items:baseline; gap:10px; font-size:15px; flex-wrap:wrap; }
.pt-did em{ font-style:normal; font-family:var(--mono); font-size:12px; color:var(--muted); }
.pt-tick{ flex:0 0 auto; width:11px; height:6px; border-left:2px solid var(--ok);
  border-bottom:2px solid var(--ok); transform:rotate(-45deg); }

/* allowance meter */
.pt-meter{ margin:18px 0 0; }
.pt-meter__bar{ height:8px; border-radius:999px; background:var(--surf-2);
  border:1px solid var(--line); overflow:hidden; }
/* Width comes from data-pct, not style="": the CSP has no 'unsafe-inline',
   so an inline style attribute is dropped and the bar never moves. Rounded
   to the nearest 5, which is all the precision a progress bar carries. */
.pt-meter__bar span{ display:block; height:100%; width:0; background:var(--accent);
  border-radius:999px; transition:width .5s ease; }
.pt-meter__bar span[data-pct="5"]{ width:5%; }
.pt-meter__bar span[data-pct="10"]{ width:10%; }
.pt-meter__bar span[data-pct="15"]{ width:15%; }
.pt-meter__bar span[data-pct="20"]{ width:20%; }
.pt-meter__bar span[data-pct="25"]{ width:25%; }
.pt-meter__bar span[data-pct="30"]{ width:30%; }
.pt-meter__bar span[data-pct="35"]{ width:35%; }
.pt-meter__bar span[data-pct="40"]{ width:40%; }
.pt-meter__bar span[data-pct="45"]{ width:45%; }
.pt-meter__bar span[data-pct="50"]{ width:50%; }
.pt-meter__bar span[data-pct="55"]{ width:55%; }
.pt-meter__bar span[data-pct="60"]{ width:60%; }
.pt-meter__bar span[data-pct="65"]{ width:65%; }
.pt-meter__bar span[data-pct="70"]{ width:70%; }
.pt-meter__bar span[data-pct="75"]{ width:75%; }
.pt-meter__bar span[data-pct="80"]{ width:80%; }
.pt-meter__bar span[data-pct="85"]{ width:85%; }
.pt-meter__bar span[data-pct="90"]{ width:90%; }
.pt-meter__bar span[data-pct="95"]{ width:95%; }
.pt-meter__bar span[data-pct="100"]{ width:100%; }
.pt-meter.is-over .pt-meter__bar span{ background:var(--warn); }
.pt-meter__label{ margin:8px 0 0; font-size:14px; color:var(--muted); }
.pt-meter__label strong{ color:var(--head); }

/* request kinds */
.pt-kinds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:18px; }
.pt-kind{ position:relative; display:block; min-width:0; cursor:pointer; }
.pt-kind input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.pt-kind span{ display:flex; flex-direction:column; gap:3px; padding:12px 14px;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--surf); height:100%; }
.pt-kind strong{ font-size:14.5px; color:var(--head); }
.pt-kind em{ font-style:normal; font-size:12.8px; color:var(--muted); line-height:1.45; }
.pt-kind:hover span{ border-color:var(--accent); }
.pt-kind input:checked + span{ border-color:var(--accent); background:rgba(var(--accent-rgb),.06);
  box-shadow:inset 0 0 0 1px var(--accent); }
.pt-kind input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

/* statuses */
.pt-badge{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted);
  background:var(--surf-2); white-space:nowrap; }
.pt-badge.is-done{ border-color:rgba(var(--ok-rgb),.45); color:var(--ok); background:rgba(var(--ok-rgb),.08); }
.pt-badge.is-doing, .pt-badge.is-sent{ border-color:rgba(var(--accent-rgb),.45); color:var(--accent-ink);
  background:rgba(var(--accent-rgb),.07); }
.pt-badge.is-late{ border-color:var(--bad); color:var(--bad); background:rgba(192,57,43,.08); }
.pt-reqs td{ vertical-align:top; }
.pt-reply{ display:block; margin-top:6px; padding-left:12px; border-left:2px solid var(--line-2);
  font-size:14px; color:var(--text); }
@media (max-width:520px){
  .pt-stats{ grid-template-columns:1fr 1fr; }
  .pt-head{ gap:12px; }
}

/* portal sign-in and the signed-in header */
.pt-login h1{ font-size:clamp(1.7rem,4vw,2.4rem); margin:0 0 .35em; }
.pt-login .lede{ margin-bottom:26px; }
.pt-form{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,3.5vw,30px); box-shadow:var(--shadow); max-width:26rem; }
.pt-form .q-hint a{ color:var(--accent-ink); }
.pt-who{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.pt-out{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.pt-out button{ font:inherit; background:none; border:0; padding:0; cursor:pointer;
  color:var(--accent-ink); text-decoration:underline; }
.pt-out button:hover{ color:var(--head); }
@media (max-width:520px){ .pt-who{ align-items:flex-start; } }

/* What the twenty minutes are for, above the calendar. */
.bk-what{ margin:28px 0 32px; }
.bk-what h2{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
             margin:24px 0 10px; }
.bk-what ol{ padding-left:22px; margin:0; }
.bk-what li{ margin:0 0 10px; font-size:15px; line-height:1.55; }
.bk-what strong{ color:var(--head); }
.bk-what p{ margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--text); }

/* ── The proposal, above the price ──────────────────────────────────
   The argument half of an agreement. It reuses .ag-block so the page
   stays one document rather than two stapled together; only the shapes
   that do not exist yet are defined here. */
.ag-for{ font-size:15px; color:var(--muted); margin:0 0 6px; }
.ag-lede--open{ font-size:1.05rem; color:var(--text); max-width:62ch; margin:0 0 20px; }

/* Found / fixed. Two columns on a desk, stacked and labelled on a phone,
   because "what we found" and "what happens" are unreadable side by side
   at 390px and meaningless without their headings. */
.ag-fix th{ text-align:left; padding:0 0 10px; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500;
  border-bottom:1px solid var(--line); }
.ag-fix td{ width:50%; padding-right:18px; }
.ag-fix td:first-child{ color:var(--muted); }
@media (max-width:620px){
  .ag-fix, .ag-fix tbody, .ag-fix tr, .ag-fix td{ display:block; width:auto; }
  .ag-fix thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .ag-fix tr{ border-bottom:1px solid var(--line); padding:12px 0; }
  .ag-fix tr:last-child{ border-bottom:none; }
  .ag-fix td{ border:none; padding:0 0 4px; }
  .ag-fix td:first-child::before{ content:"Found: "; font-weight:600; color:var(--head); }
  .ag-fix td:last-child::before{ content:"Fixed: "; font-weight:600; color:var(--head); }
}

.ag-who{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:760px){ .ag-who{ grid-template-columns:1fr; } }
.ag-who > div{ background:var(--surf-2); border-radius:8px; padding:16px 18px; }
.ag-who h3{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:500; margin:0 0 10px; }
.ag-who ul{ margin:0; padding-left:18px; display:grid; gap:7px; }
.ag-who li{ font-size:14.5px; color:var(--text); line-height:1.5; }

.ag-time{ list-style:none; margin:0; padding:0; }
.ag-time li{ display:grid; grid-template-columns:150px 1fr; gap:18px; padding:13px 0;
  border-bottom:1px solid var(--line); }
.ag-time li:last-child{ border-bottom:none; }
.ag-time__when{ font-family:var(--mono); font-size:12.5px; color:var(--accent-ink); padding-top:2px; }
.ag-time__what{ font-size:15px; color:var(--text); line-height:1.55; }
@media (max-width:560px){
  .ag-time li{ grid-template-columns:1fr; gap:3px; }
}

.ag-checks{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:10px 26px; }
@media (max-width:620px){ .ag-checks{ grid-template-columns:1fr; } }
.ag-checks li{ position:relative; padding-left:24px; font-size:15px; color:var(--text);
  line-height:1.5; }
.ag-checks li::before{ content:""; position:absolute; left:0; top:6px; width:11px; height:11px;
  border:1.5px solid var(--accent-ink); border-radius:2px;
  background:linear-gradient(var(--accent-ink),var(--accent-ink)) center/4px 4px no-repeat; }

/* A proposal argues before it quotes, so the number stops being the
   headline: it shrinks to a reference at the top and is printed in full
   against the line items, where it can be read next to what it buys. */
/* Left, not right: a long headline wraps the price onto its own line, and
   right-aligning it inside a box only as wide as its caption indents the
   number away from everything above it. */
.ag-head--prop .ag-price{ font-size:1.5rem; color:var(--text); text-align:left; }
.ag-price__cap{ display:block; font-family:var(--sans,inherit); font-size:12px;
  color:var(--muted); white-space:normal; max-width:12em; margin-top:4px; }
@media (max-width:520px){ .ag-price__cap{ max-width:none; } }

/* ── One Page offer (/onepage.php) ───────────────────────────────────────
   The page has to read in under thirty seconds on a phone, so the price
   is the one thing that is allowed to shout. Everything else borrows the
   agreement page's blocks rather than inventing a second look.          */
.op-price{ margin:26px 0 8px; padding:20px 22px; border:1px solid var(--line);
           border-radius:var(--r); background:var(--surf); box-shadow:var(--shadow); }
.op-price__n{ margin:0; font-size:clamp(2.4rem,9vw,3.4rem); line-height:1;
              font-weight:700; color:var(--head); letter-spacing:-.02em; }
.op-price__cap{ margin:8px 0 0; font-family:var(--mono); font-size:13px; color:var(--muted); }

.op-steps{ margin:0 0 18px; padding-left:20px; }
.op-steps li{ margin:0 0 12px; line-height:1.6; }
.op-steps li:last-child{ margin-bottom:0; }

/* A refusal has to look like a refusal. The same green as a success is
   how "nothing was saved" reads as "saved" -- it has cost this project a
   day twice already. */
.op-err{ margin:0 0 18px; padding:12px 14px; border-radius:var(--r);
         border:1px solid var(--bad); background:rgba(200,30,30,.06);
         color:var(--bad); font-size:14.5px; line-height:1.55; }

/* A button whose label is allowed to wrap. `.btn` is white-space:nowrap
   site-wide, which is right for "Get a quote" and wrong for a sentence:
   at 390px the One Page submit was 277px of text in a 262px button and
   the label was clipped mid-word. The page's only call to action is not
   a place to lose the last three characters. */
.btn--wrap{ white-space:normal; text-align:center; line-height:1.3; padding-top:13px; padding-bottom:13px; }