/* Dottpace landing — the audit page's hero, and the Home audit section's note. The scan, the small example card and the "what it checks" list
   are audit-scan.css; the report and its close (the funnel's three panels) are audit-report.css (the app's flat panels). The Ivory / Midnight / Matte Black
   materials, the grain, the severity colours and the old report and close styles were removed on Oct 15 (audit SPEC §1.2). */

/* ---------- Home audit section ---------- */
.ax-home .audit-note{max-width:34em}

/* ---------- audit page hero: one column (the report's head and area strip follow right under it, so no preview card repeats them) ---------- */
.ax-hero{padding-block:clamp(48px,6vw,88px) clamp(40px,5vw,72px)}
.ax-hero-in{display:grid;grid-template-columns:minmax(0,1fr)}
.ax-hero-h{font-size:var(--t-display);font-weight:600;line-height:1.05;letter-spacing:-.034em;text-wrap:balance}
.ax-hero-lead{margin-top:18px;max-width:30em}
.ax-form{margin-top:30px;width:min(100%,560px)}
@media (min-width:561px){.ax-form .audit-field{height:56px}.ax-form .audit-field .btn{height:46px}}

/* ---------- the start: Website + Email + one button (funnel study §5.1) — no scan runs without both ---------- */
.ax-form.au-start{width:min(100%,880px)}
.au-start [hidden]{display:none!important}
.jf-unwired .au-start .jf-off[hidden]{display:flex!important}   /* config.js marks "not connected" before the first paint: the note is there from the start */
.au-start .jf-off{margin:0 0 16px;max-width:560px}
.au-sf-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:start;gap:10px}
.au-sf{min-width:0}
.au-sf-l{display:block;margin-bottom:6px;font-size:13px;font-weight:500;line-height:18px;color:var(--text-1)}
.au-start .audit-field{height:56px;padding:0 14px}
.au-start .audit-field.is-bad:focus-within{box-shadow:inset 0 0 0 1px var(--neg),0 0 0 3px color-mix(in srgb,var(--neg) 22%,transparent)}
.au-start .audit-err{margin-top:8px;line-height:18px}
.au-sf-go{height:56px;margin-top:24px;padding:0 22px}   /* 24 = the label's line and gap, so the button sits level with the fields */
.au-fix{font-size:13px;line-height:18px;color:var(--text-3)}
.au-fix:not(:empty){margin-top:8px}
.au-fix-b{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.au-fix-b:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:3px}
.au-why{margin-top:12px;font-size:13px;line-height:18px;color:var(--text-3)}
.au-why a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.au-start .audit-note{margin-top:4px;max-width:46em}
@media (max-width:899px){
  .au-sf-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .au-sf-go{grid-column:1/-1;justify-self:start;margin-top:4px}
}
@media (max-width:640px){
  .au-sf-g{grid-template-columns:minmax(0,1fr);gap:12px}
  .au-start .audit-field,.au-start .audit-field input{height:48px}
  .au-start .audit-field{flex-wrap:nowrap;padding:0 12px}
  .au-start .audit-field input{flex:1;padding:0}
  .au-start .audit-ic{display:block}
  .au-sf-go{width:100%;height:48px;margin-top:2px}
}