/* Free Audit page /free-audit (LOCKED 17 Oct 2026, option 1 "Mission Scan"): on top of css/about.css; the form and
   pop-up styles are in css/fa-pop.css (every page). Tokens from css/system.css. */

.fa-btn,button.pillw{font-family:inherit;cursor:pointer}
.fa-page .sv-ic{width:24px;height:24px;fill:none;stroke:#e0580b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fa-page .ab-dark .sv-ic{stroke:#f78913}

/* ---------- 1. hero: copy left, the full form right (one screen from 1180px) ---------- */
.fa-hero{padding-bottom:clamp(40px,6vh,72px)}
@media (min-width:1180px){.fa-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}}
.fa-grid{display:grid;grid-template-columns:1fr minmax(0,560px);gap:clamp(32px,4vw,80px);align-items:center}
.fa-grid>*{min-width:0}
.fa-hero h1{font-size:min(var(--fs-h2),6.4vh)}
.fa-hero .hero-points{margin-top:clamp(18px,3.4vh,30px);grid-template-columns:minmax(0,max-content) minmax(0,max-content);gap:16px clamp(20px,3vw,40px)}
.fa-hero-radar{position:absolute!important;width:min(70vh,640px);right:-12%;top:50%;transform:translateY(-50%);opacity:.55}
.fa-card{background:#fff;border-radius:26px;padding:clamp(22px,3.2vh,36px) clamp(22px,2.4vw,36px);box-shadow:0 40px 80px -30px rgba(0,0,0,.65)}
.fa-card.fa-scope{background:#fff}
.fa-card .frow2,.fa-card .fld2{margin-top:clamp(14px,2.2vh,22px)}
.fa-card .fld textarea{min-height:clamp(56px,8vh,76px)}
.fa-live{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(14px,2.4vh,22px)!important;padding:6px 14px;border-radius:999px;background:#fff4ec;border:1px solid rgba(244,106,16,.25);font-size:var(--fs-label)!important;font-weight:600;color:#c2410c!important}
.fa-live .dot{position:relative;width:9px;height:9px;border-radius:50%;background:#1fae6b;flex:none}
.fa-live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1fae6b;animation:livedot 2s ease-out infinite}
/* trust row under the hero copy */
.fa-trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(18px,3.4vh,30px)}
.fa-trust-g{display:inline-flex;align-items:center;gap:10px;color:#fff}
.fa-trust-g .g-disc{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.fa-trust-g .g-disc svg{width:20px;height:20px}
.fa-trust-g>b{font-size:var(--fs-h3);font-weight:700}
.fa-trust-k{font-size:var(--fs-body);color:var(--text-on-dark)}
.fa-trust-k b{color:#fff}
@media (max-width:1179.98px){.fa-grid{grid-template-columns:1fr}.fa-card{max-width:640px}.fa-hero-radar{display:none}}
@media (max-width:600px){
  .fa-hero .st-copy{text-align:center}.fa-hero .be-crumbs ol{justify-content:center}.fa-hero .ab-rule{margin-left:auto;margin-right:auto}
  .fa-hero .hero-points{grid-template-columns:minmax(0,max-content);justify-content:center}.fa-hero .st-icons li{text-align:left}
  .fa-hero .fa-trust{justify-content:center}
  .fa-card .frow{grid-template-columns:1fr;gap:16px}.fa-card .frow2{margin-top:16px}
}
/* shorter laptop screens: the hero form tightens so the hero stays one screen (the optional message box goes below 700px) */
@media (min-width:1180px) and (max-height:820px){.fa-card .frow2,.fa-card .fld2{margin-top:14px}.fa-card .fld textarea{min-height:52px}.fa-card .send{margin-top:14px}.fa-hero{padding-bottom:16px}.fa-card{padding-top:18px;padding-bottom:16px}.fa-live{margin-bottom:10px!important}.fa-card .fa-safe{margin-top:8px}}
@media (min-width:1180px) and (max-height:700px){.fa-card .fld2:has(textarea),.fa-card .fa-safe,.fa-live{display:none}.fa-card .frow2{margin-top:12px}.fa-card .fld input,.fa-card .fld select{padding-top:10px;padding-bottom:10px}.fa-card .be-tel{min-height:44px}}

/* ---------- 2. what we check: 6 cards, a scan line passes on hover ---------- */
.fa-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fa-scan{overflow:hidden}
.fa-scanline{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,rgba(244,106,16,0),rgba(244,106,16,.10) 80%,rgba(244,106,16,.5) 100%);pointer-events:none;opacity:0}
@media (hover:hover){.fa-scan:hover{transform:translateY(-6px)}.fa-scan:hover .fa-scanline{opacity:1;animation:faScan 1.4s var(--ease) forwards}}
@keyframes faScan{from{top:-30%}to{top:100%}}
@media (max-width:1023.98px){.fa-cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.fa-cards{grid-template-columns:1fr}}

/* ---------- 3. how it works + what you get ---------- */
.fa-how-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.fa-flow{list-style:none;margin:0;padding:0;display:grid;gap:26px;position:relative}
.fa-flow::before{content:"";position:absolute;left:25px;top:30px;bottom:30px;border-left:2px dashed rgba(247,137,19,.45)}
.fa-flow li{position:relative;padding-left:76px}
.fa-flow .n{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:700;font-size:var(--fs-h3);box-shadow:0 12px 26px rgba(244,106,16,.34)}
.fa-flow h3{margin-top:12px}
.fa-flow p{margin-top:6px}
.fa-get{border-radius:28px;padding:clamp(26px,3vw,40px)}
.fa-get ul{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:14px}
.fa-get li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body);line-height:1.5;color:var(--text-on-dark)}
.fa-get li .sv-ic{width:22px;height:22px;flex:none;margin-top:1px}
.fa-get .rm{width:100%;justify-content:center}
@media (max-width:1023.98px){.fa-how-grid{grid-template-columns:1fr}}

/* ---------- 4. client logos + FAQ ---------- */
.fa-logos{padding-top:clamp(40px,6vh,64px);padding-bottom:clamp(28px,4vh,44px)}
.fa-logos-k{text-align:center;font-size:var(--fs-label)!important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-body);margin-bottom:18px!important}
.fa-faq{background:radial-gradient(760px 520px at 0% 0%,rgba(96,150,255,.16),transparent 62%),radial-gradient(820px 560px at 100% 100%,rgba(244,106,16,.11),transparent 62%),linear-gradient(180deg,#f7faff,#edf2fa)}
.fa-faq .faqfx{position:absolute;inset:0;pointer-events:none;overflow:hidden}

@media (prefers-reduced-motion:reduce){.fa-scan:hover .fa-scanline{animation:none;opacity:0}.fa-live .dot::after{animation:none}}

/* the "We never share your details." line sits on the white form card (it took the light hero text colour; pre-launch audit, 18 Oct 2026) */
.fa-card .fa-safe{color:rgba(16,25,40,.80)}