/* ==========================================================================
   Trust, legal and FAQ pages, built by src/pages_trust.py:
   /faq, /proof, /our-work, /sms-terms, /sms-consent.
   Uses only the var(--...) roles from brand/tokens.css. No colour is named here.
   One border width everywhere (1px), no side bars, no lifts on hover.
   ========================================================================== */

/* ---------------------------------------------------------------- legal pages */
.legal-body .upd{color:var(--c-muted);font-size:18px;margin-top:-.3em}
.legal-body h3{font-size:22px;margin:1.3em 0 .4em}
.legal-body .box{margin:0 0 1em}
.legal-body .box ul{margin:0 0 1em;padding-left:1.2em}

/* ---------------------------------------------------------------- consent form */
.cform{display:grid;gap:24px;max-width:620px;margin:8px 0 0}
.cform[hidden]{display:none}
.cform .f{display:grid;gap:8px}
.cform .f label{font-family:var(--f-display);font-weight:700;font-size:21px;line-height:1.3}
.cform input[type=text],.cform input[type=tel],.cform input[type=email]{
  width:100%;min-height:58px;padding:12px 16px;font:inherit;font-size:21px;line-height:1.3;
  color:var(--c-text);background:var(--c-screen);border:1px solid var(--c-muted);border-radius:var(--radius)}
.cform input::placeholder{color:var(--c-muted);opacity:1}
.cform input[type=text]:focus,.cform input[type=tel]:focus,.cform input[type=email]:focus{border-color:var(--c-text)}
.cform .consent{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;
  padding:22px 22px 20px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-card)}
.cform .consent input{width:26px;height:26px;margin:3px 0 0;accent-color:var(--c-accent);cursor:pointer}
.cform .consent label{font-size:19px;line-height:1.55;cursor:pointer}
.cform .fine{font-size:17px;line-height:1.55;color:var(--c-text);margin:0}
.cform .btn{justify-self:start;cursor:pointer}
.cform .btn[disabled]{opacity:.75;cursor:progress}
.msg{border:1px solid var(--c-accent);border-radius:var(--radius);background:var(--c-accent-tint);padding:22px 24px;margin-top:8px;max-width:620px}
.msg.bad{border-color:var(--c-alert);background:var(--c-note-bg)}
.msg[hidden]{display:none}
.msg:focus{outline:none}
.msg p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- proof: the evidence ledger */
.ledger{display:grid;gap:24px;max-width:1000px}
.ledger .claim{max-width:none;display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);column-gap:40px;align-items:start}
.ledger .fig{font-family:var(--f-display);font-weight:700;font-size:clamp(46px,4.4vw,58px);line-height:1.02;color:var(--c-accent);margin:0}
.ledger .body>p{max-width:40em}
.ledger .src a{overflow-wrap:anywhere}
.refused .lead-in{margin-bottom:1.4em}
.refused .foot{font-family:var(--f-display);font-weight:700;font-size:23px;line-height:1.35;color:var(--c-on-dark)}

/* ---------------------------------------------------------------- our work: real sites, real screenshots */
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.work a{display:flex;flex-direction:column;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);
  color:var(--c-text);text-decoration:none;overflow:hidden;transition:border-color .4s ease,background-color .4s ease}
.work a:hover{border-color:var(--c-accent);background:var(--c-accent-tint)}
.work img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-bottom:1px solid var(--c-line)}
.work .txt{display:flex;flex-direction:column;gap:8px;padding:24px 26px 26px;flex:1}
.work h3{margin:0}
.work p{margin:0;font-size:20px}
.work .go{margin-top:auto;padding-top:8px;font-weight:700;color:var(--c-accent);text-decoration:underline;text-underline-offset:3px}
.work .first{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.work .first img{border-bottom:0;border-right:1px solid var(--c-line);height:100%}
.work .first .txt{justify-content:center;padding:36px 36px}
.demo-note{font-size:18px;color:var(--c-muted);margin:24px 0 0;max-width:42em}

/* ---------------------------------------------------------------- faq: every answer visible */
.qa{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:64px;align-items:start}
.qa-index{position:sticky;top:112px;display:grid;gap:2px}
.qa-index b{font-family:var(--f-display);font-size:22px;line-height:1.3;margin-bottom:8px}
.qa-index a{display:block;padding:7px 0;font-size:19px;line-height:1.35;color:var(--c-text);
  text-decoration:underline;text-decoration-color:var(--c-line);text-underline-offset:5px;transition:color .35s ease,text-decoration-color .35s ease}
.qa-index a:hover{color:var(--c-accent);text-decoration-color:var(--c-accent)}
.qa-group{scroll-margin-top:110px}
.qa-group+.qa-group{margin-top:64px;padding-top:56px;border-top:1px solid var(--c-line)}
.qa-group h2{margin-bottom:32px}
.qa-item{max-width:42em}
.qa-item+.qa-item{margin-top:36px}
.qa-item h3{font-size:24px;line-height:1.3;margin:0 0 .35em}
.qa-item p{margin:0}
.more-q{margin:32px 0 0;font-size:21px}

/* ---------------------------------------------------------------- footer: trade pages under Contractors */
footer.on-dark .fcol a.fsub{padding-left:20px}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:900px){
  .qa{grid-template-columns:minmax(0,1fr);gap:40px}
  .qa-index{position:static;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-card);padding:20px 22px}
  .work{grid-template-columns:minmax(0,1fr)}
  .work .first{display:flex}
  .work .first img{border-right:0;border-bottom:1px solid var(--c-line);height:auto}
  .work .first .txt{padding:24px 26px 26px}
}
@media (max-width:760px){
  .ledger .claim{grid-template-columns:minmax(0,1fr)}
  .ledger .fig{margin-bottom:14px}
}
@media (max-width:560px){
  .cform input[type=text],.cform input[type=tel],.cform input[type=email]{font-size:19px}
  .cform .btn{justify-self:stretch}
  .cform .consent{padding:18px 16px}
  .work p{font-size:19px}
  .work .txt,.work .first .txt{padding:20px 20px 22px}
  .qa-item h3{font-size:21px}
  .qa-group+.qa-group{margin-top:48px;padding-top:40px}
  .refused .foot{font-size:21px}
}