/* ============================================================
   FREE WEBSITE AUDIT PAGE — /free-website-audit
   Linked from free-website-audit.html only.
   ============================================================ */

/* Audit hero */
.audit-hero{padding-block:clamp(48px,8vw,88px)}
.audit-hero h1{max-width:22ch;margin-top:var(--space-4)}
.audit-hero__lead{margin-top:var(--space-5);max-width:58ch}
.audit-hero__points{list-style:none;padding:0;margin:var(--space-6) 0 0;display:flex;flex-direction:column;gap:var(--space-3)}
.audit-hero__points li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:.9375rem;color:var(--text-on-dark-muted)}
.audit-hero__points li svg{flex:none;width:18px;height:18px;margin-top:2px;stroke:var(--accent);stroke-width:2.5;fill:none}
.audit-hero__expect{margin-top:var(--space-6);padding:var(--space-4) var(--space-5);border-left:3px solid var(--accent);background:rgba(220,98,21,.08);border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:.9375rem;color:var(--text-on-dark-muted)}

/* What happens next strip */
.audit-process-grid{display:grid;gap:var(--space-5)}
@media(min-width:640px){.audit-process-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.audit-process-grid{grid-template-columns:repeat(4,1fr)}}
.audit-step{display:flex;align-items:flex-start;gap:var(--space-4)}
.audit-step__num{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-on-accent);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-extrabold);font-size:.8125rem}
.audit-step__body h3{font-weight:var(--fw-semibold);font-size:.9375rem;margin-bottom:var(--space-1);color:var(--text-on-light)}
.audit-step__body p{font-size:.875rem;color:var(--text-on-light-muted)}

/* Qualification strip */
.audit-qual{max-width:700px}

/* Two-col form layout */
.audit-form-layout{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.audit-form-layout{grid-template-columns:5fr 7fr;align-items:start}}

/* Sticky info panel (desktop) */
.audit-panel{display:flex;flex-direction:column;gap:var(--space-6)}
@media(min-width:900px){.audit-panel{position:sticky;top:calc(var(--header-h) + var(--space-5))}}
.audit-panel__heading{font-weight:var(--fw-extrabold);font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:var(--lh-heading);letter-spacing:var(--ls-tight)}
.audit-panel__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.audit-panel__list li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:.9375rem;color:var(--text-on-dark-muted)}
.audit-panel__list li svg{flex:none;width:18px;height:18px;margin-top:2px;stroke:var(--accent);stroke-width:2.5;fill:none}
.audit-panel__trust{padding:var(--space-5);background:rgba(255,255,255,.04);border:1px solid var(--border-on-dark);border-radius:var(--radius-md);font-size:.875rem;color:var(--text-on-dark-muted);line-height:1.6}
.audit-panel__trust a{color:var(--accent)}
.audit-panel__trust p+p{margin-top:var(--space-3)}

/* Form card */
.audit-form-card{background:var(--surface-card-dark);border:1px solid var(--border-on-dark);border-radius:var(--radius-md);padding:clamp(var(--space-6),4vw,var(--space-8))}

/* Error summary */
.form-error-summary{background:rgba(220,60,60,.12);border:1px solid rgba(220,60,60,.35);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6);color:#ff7b7b;font-weight:var(--fw-medium);font-size:.9375rem}

/* Success state */
.form-success{text-align:center;padding:var(--space-8) var(--space-5)}
.form-success:focus{outline:none}
.form-success__icon{width:64px;height:64px;border-radius:50%;background:rgba(220,98,21,.12);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-5)}
.form-success__icon svg{width:28px;height:28px;stroke:var(--accent);stroke-width:2.5;fill:none}
.form-success h2{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-tight)}
.form-success p{margin-top:var(--space-4);color:var(--text-on-dark-muted)}

/* Fieldset sections */
.form-section{border:0;padding:0;margin:0 0 var(--space-7)}
.form-section:last-of-type{margin-bottom:var(--space-6)}
.form-section__legend{width:100%;font-weight:var(--fw-extrabold);font-size:1.0625rem;letter-spacing:-.01em;color:var(--z6-white);padding:0 0 var(--space-4);margin-bottom:var(--space-5);display:flex;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--border-on-dark)}
.form-section__legend::before{content:'';display:block;width:18px;height:2px;background:var(--accent);flex:none}

/* Fields */
.field{margin-bottom:var(--space-5)}
.field__label{display:block;font-weight:var(--fw-medium);font-size:.9375rem;margin-bottom:var(--space-2);color:var(--text-on-dark)}
.field__required{color:var(--accent);margin-left:2px;font-weight:var(--fw-bold)}
.field__hint{display:block;font-size:.875rem;color:var(--text-on-dark-muted);margin-bottom:var(--space-2);line-height:1.5}
.field__error{display:block;font-size:.875rem;color:#ff7b7b;margin-top:var(--space-2);font-weight:var(--fw-medium)}

/* Inputs */
.field__input,.field__select,.field__textarea{display:block;width:100%;min-height:48px;padding:var(--space-3) var(--space-4);background:rgba(255,255,255,.06);border:1px solid var(--border-on-dark);border-radius:var(--radius-md);color:var(--text-on-dark);font-family:var(--font);font-size:1rem;font-weight:var(--fw-regular);line-height:1.5;transition:border-color .18s ease,background .18s ease;-webkit-appearance:none;appearance:none}
.field__input::placeholder,.field__textarea::placeholder{color:rgba(255,255,255,.3)}
.field__input:focus,.field__select:focus,.field__textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(220,98,21,.22)}
.field__textarea{min-height:96px;resize:vertical}
.field__select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px;cursor:pointer}
.field__select option{background:var(--z6-charcoal);color:var(--z6-white)}

/* Error state */
.field--error .field__input,.field--error .field__select,.field--error .field__textarea{border-color:#ff7b7b}

/* Field row (2 columns) */
.field-row{display:grid;gap:var(--space-5)}
@media(min-width:540px){.field-row{grid-template-columns:1fr 1fr}}

/* ============================================================
   OPTION ROWS — the one reusable pattern for every checkbox and
   radio choice in the audit form. Compact 19px accent controls,
   full-row click target, 44px min touch height, control aligned
   to the first line of wrapped labels.
   ============================================================ */
.radio-group{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-2)}
.radio-item{
  display:flex;align-items:flex-start;gap:10px;
  min-height:44px;padding:10px 0;box-sizing:border-box;
  cursor:pointer;font-size:.9375rem;line-height:1.45;
  color:var(--text-on-dark-muted);
}
.radio-item:hover{color:var(--text-on-dark)}
.radio-item input[type="radio"],
.radio-item input[type="checkbox"]{
  width:19px;height:19px;min-width:19px;max-width:19px;
  margin:2px 0 0;padding:0;
  accent-color:var(--accent);cursor:pointer;flex:none;
  background:none;border:none;
}
.radio-item input[type="radio"]:focus-visible,
.radio-item input[type="checkbox"]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.radio-item input[type="radio"]:focus-visible{border-radius:50%}
.radio-item input:checked + *,
.radio-item:has(input:checked){color:var(--text-on-dark)}
.field--error .radio-group .radio-item{color:#ff7b7b}

/* Question-group fieldsets: borderless with clear legend spacing —
   no default fieldset borders colliding with titles. */
#auditForm fieldset.field{border:0;padding:0;margin:0;min-width:0}
#auditForm fieldset.field legend{padding:0;margin-bottom:var(--space-1)}
/* Uniform vertical rhythm between every question in a section —
   robust even when hidden conditional blocks sit between fields. */
#auditForm .form-section > * + *{margin-top:var(--space-5)}
#auditForm .form-section > legend + *{margin-top:var(--space-4)}
#auditForm .field-row > .field{margin-top:0}
/* A field left alone in a two-column row spans the full width */
#auditForm .field-row > .field:only-child{grid-column:1/-1}
#auditForm #gbp_followups > * + *{margin-top:var(--space-5)}

/* Consent */
.consent-stack{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-2)}
.consent-item{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;padding:var(--space-1) 0}
.consent-item input[type="checkbox"]{width:20px;height:20px;min-width:20px;margin-top:2px;accent-color:var(--accent);cursor:pointer;flex:none}
.consent-item input[type="checkbox"]:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
.consent-item__text{font-size:.9375rem;color:var(--text-on-dark-muted);line-height:1.55}
.consent-item__text a{color:var(--accent)}
.consent-item__text strong{color:var(--text-on-dark);font-weight:var(--fw-semibold)}
.field--error .consent-item__text{color:#ff7b7b}

/* Honeypot — visible to bots, invisible to humans */
.field--honeypot{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* Turnstile widget */
.turnstile-wrap{margin-top:var(--space-5)}

/* Disclaimer bar */
.audit-disclaimer{padding:var(--space-7) 0;font-size:.875rem;color:var(--text-on-dark-muted);max-width:800px;margin-inline:auto;line-height:1.6;border-top:1px solid var(--border-on-dark)}

/* Mobile adjustments */
@media(max-width:899px){.audit-panel{position:static}.audit-form-card{padding:var(--space-6) var(--space-5)}}
@media(max-width:599px){.form-section__legend{font-size:.9375rem}.audit-form-card{padding:var(--space-5) var(--space-4)}}


/* Tidy multi-column layout for large checkbox groups (goals, socials,
   channels). Equal columns on wide screens; drops to a single column
   before labels get cramped. */
.checks-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:0 var(--space-5);
  align-items:start;
}
.checks-grid .radio-item{margin:0;width:100%}
@media(max-width:559px){
  .checks-grid{grid-template-columns:1fr}
}