/* =====================================================================
   /free-audit — 2026 Waucht skin
   assets/css/free-audit-2026.css

   WHAT THIS FILE IS
   The visual layer for the free-audit landing page after it moved onto the
   2026 shell (includes/os2026.php). It re-skins the EXISTING audit-form
   markup into the Waucht language. It does not rename or restructure
   anything.

   WHY IT IS A SKIN AND NOT A REWRITE — READ BEFORE EDITING
   assets/js/audit-form.js binds to this page by literal class and id:
     #audit-form · #audit-email · #audit-ref · .audit-form__submit
     .audit-form__error · .audit-form__input · .audit-counter__number
     .teaser-score · .teaser-score__gauge-fill · .teaser-score__number
     .teaser-score__message
   and it drives a four-state machine by toggling classes on the wrapper
   .hero__form-wrapper:  (idle) -> is-loading -> is-teaser-loading ->
   is-teaser-result. Those show/hide rules live in assets/css/audit-form.css,
   which is still loaded BEFORE the 2026 style block via os2026_head()'s
   head_pre. So:

     audit-form.css  = the state machine (what is visible when)
     this file       = the paint (what it looks like)

   Renaming a class here silently breaks the teaser score — the form would
   still submit, so it would fail quietly. Repaint freely; do not rename.

   CASCADE ORDER, which is load-bearing:
     1. audit-form.css + normalize   (head_pre — legacy, must lose)
     2. os2026 tokens + base         (the <style> block in os2026_head)
     3. this file                    (opts['head'] — loads last, wins)
   ===================================================================== */

/* ---------------------------------------------------------------------
   PAGE FRAME
   .phero reserves clamp(118px,14vh,164px) of top padding for the fixed
   site nav. This page deliberately has no nav — it is a QR/ad landing
   page and every outbound link is an exit — so that space is reclaimed.
   --------------------------------------------------------------------- */
.product--free-audit .phero { padding-top: clamp(34px, 5vw, 58px); }

/* Minimal header: the wordmark, and nothing to click away with. */
.fa-head { padding: clamp(20px, 3vw, 30px) 0; position: relative; z-index: 3; }
.fa-head__in { width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(22px, 6vw, 88px); }
.fa-head__logo { display: inline-block; width: 132px; color: var(--orange); }
.fa-head__logo .loopmark { width: 100%; }

/* ---------------------------------------------------------------------
   HERO — argument left, form right (the .pcta/.pform "convert" shape)
   --------------------------------------------------------------------- */
.fa-benefits { list-style: none; margin-top: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 14px; }
.fa-benefits li { display: flex; gap: 12px; align-items: flex-start;
  font-size: 15.5px; line-height: 1.55; color: #4c5165; }
.fa-benefits .tick { width: 18px; height: 18px; flex: 0 0 auto;
  color: var(--orange); margin-top: 3px; }

/* ---------------------------------------------------------------------
   THE FORM PLATE
   Same octagon plate /aeo-services uses for its audit form, so the two
   AEO surfaces read as one product.
   --------------------------------------------------------------------- */
.auditplate { --oct: 20px; }
.auditplate .oct__in { padding: clamp(24px, 3vw, 34px); }

/* Returning visitor, arriving from the report email with ?email= set. */
.audit-form__returning { background: var(--cream-soft); border-left: 2px solid var(--orange);
  padding: 12px 14px; margin-bottom: 16px; font-size: 14px; line-height: 1.5;
  color: var(--navy); }

.audit-counter { display: inline-block; font-weight: 700; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 14px; }
.audit-counter__number { font-size: 13px; }

/* audit-form.css centres this block. Its own fields are left-aligned, so
   centred-heading-over-left-fields read as an accident inside one card. */
.audit-form-header { text-align: left; }
.audit-form-header h3 { font-weight: 700; font-size: clamp(19px, 2vw, 23px);
  line-height: 1.18; color: var(--navy); margin: 0 0 6px; letter-spacing: -.01em; }
.audit-form-header p { font-size: 14.5px; line-height: 1.55; color: var(--grey);
  margin: 0 0 20px; }

.audit-form__honeypot { position: absolute; left: -9999px; width: 1px;
  height: 1px; overflow: hidden; }

.audit-form__group { display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 16px; }
.audit-form__label { font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey); }
.audit-form__input { font-family: inherit; font-weight: 300; font-size: 16px;
  color: var(--navy); background: var(--white); padding: 14px 15px;
  border: 1.5px solid rgba(50, 54, 81, .22); border-radius: 2px; width: 100%;
  transition: border-color .25s var(--ease); }
.audit-form__input::placeholder { color: #9ca1ad; }
.audit-form__input:focus { outline: 0; border-color: var(--orange); }
/* Prevent, never error: the invalid state is a border + a line of plain
   English, never a modal or a colour-only signal. */
.audit-form__input.is-invalid { border-color: #a53612; }
.audit-form__input.is-valid { border-color: rgba(50, 54, 81, .22); }
.audit-form__error { font-size: 13px; font-weight: 700; color: #a53612;
  min-height: 0; }
.audit-form__error:empty { display: none; }

.audit-form__submit { display: inline-flex; align-items: center;
  justify-content: center; gap: 11px; width: 100%; margin-top: 6px;
  font-family: inherit; font-weight: 700; font-size: 15px; letter-spacing: .02em;
  color: #fff; background: var(--orange); border: 0; border-radius: 2px;
  padding: 17px 28px; cursor: pointer;
  box-shadow: 0 8px 26px -10px rgba(255, 117, 41, .7);
  transition: box-shadow .35s var(--ease), transform .3s var(--ease); }
.audit-form__submit:hover { transform: translateY(-1px);
  box-shadow: 0 16px 40px -10px rgba(255, 117, 41, .9); }
/* The arrow glyph is sized by `.btn .arr` in the shell. This button is NOT a
   .btn — it is .audit-form__submit, because audit-form.js targets that class —
   so it inherits no size and the raw SVG expands to fill the flex line,
   wrapping the label onto three lines. Size it here. */
.audit-form__submit .arr { width: 17px; height: 17px; flex: 0 0 auto;
  transition: transform .3s var(--ease); }
.audit-form__submit:hover .arr { transform: translateX(3px); }
.audit-form__submit.is-loading { opacity: .6; cursor: progress;
  transform: none; }

.audit-form__disclaimer { margin-top: 14px; font-size: 13.5px; line-height: 1.55;
  color: var(--grey); text-align: center; }

/* ---- loading / success / teaser: painted, visibility still audit-form.css --- */
.audit-form__loading-text, .teaser-score-loading__text { font-weight: 700;
  font-size: 16px; color: var(--navy); }
.audit-form__loading-sub, .teaser-score-loading__sub { font-size: 14px;
  color: var(--grey); margin-top: 6px; }
.audit-form__loading-dots span, .teaser-score-loading__dots span {
  background: var(--orange); }

.audit-form__success { background: var(--navy); color: #fff;
  padding: clamp(26px, 3.2vw, 38px); border-radius: 2px; }
.audit-form__success h3 { font-weight: 700; font-size: 22px; margin-bottom: 14px; }
.audit-form__success p { font-size: 16px; line-height: 1.6; color: #dfe2ee; }
.audit-form__success-icon { color: var(--orange); width: 40px; height: 40px;
  margin-bottom: 12px; }
.audit-form__success-icon svg { width: 100%; height: 100%; }

.teaser-score__gauge-bg { stroke: rgba(50, 54, 81, .14); }
.teaser-score__gauge-fill { stroke: var(--orange); }
.teaser-score__number { font-weight: 700; color: var(--navy); }
.teaser-score__outof { color: var(--grey); font-weight: 300; }
.teaser-score__message { font-weight: 700; font-size: 17px; color: var(--navy);
  line-height: 1.4; }
.teaser-score__cta { font-size: 14.5px; line-height: 1.55; color: var(--grey);
  margin-top: 10px; }

/* ---------------------------------------------------------------------
   TRUST RAIL — numbers come from includes/reviews.php, never typed here.
   --------------------------------------------------------------------- */
.fa-trust { border-top: 1px solid rgba(50, 54, 81, .14);
  border-bottom: 1px solid rgba(50, 54, 81, .14); padding: 18px 0; }
.fa-trust__in { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: clamp(14px, 3vw, 34px);
  font-size: 14px; color: var(--grey); text-align: center; }
.fa-trust b { color: var(--navy); font-weight: 700; }
.fa-trust .star { width: 15px; height: 15px; color: var(--orange);
  vertical-align: -2px; margin-right: 5px; }

/* ---------------------------------------------------------------------
   STEPS / PREVIEW / TESTIMONIALS
   --------------------------------------------------------------------- */
.fa-grid3 { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px); }
@media (max-width: 880px) { .fa-grid3 { grid-template-columns: 1fr; } }

.fa-step .oct__in { padding: clamp(24px, 3vw, 32px); }
.fa-step__n { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--orange);
  color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 16px; }
.fa-step h3 { font-weight: 700; font-size: 17.5px; line-height: 1.2;
  color: var(--navy); margin-bottom: 10px; letter-spacing: -.01em; }
.fa-step p { font-size: 15px; line-height: 1.6; color: var(--grey); }

/* Single column while the sample-report figure is withdrawn (see the note in
   free-audit.php). Restore `1fr 1fr` when a genuine figure is regenerated —
   a two-column grid holding one child leaves a dead half-width gutter. */
.fa-preview__grid { display: grid; grid-template-columns: 1fr;
  gap: clamp(30px, 4.4vw, 62px); align-items: center; }
.fa-preview__grid > * { max-width: 760px; }
.fa-list { list-style: none; margin-top: 24px; display: flex;
  flex-direction: column; gap: 12px; }
.fa-list li { display: flex; gap: 11px; align-items: flex-start;
  font-size: 15.5px; line-height: 1.55; color: #4c5165; }
.fa-list .tick { width: 18px; height: 18px; flex: 0 0 auto; color: var(--orange);
  margin-top: 3px; }

.fa-quote .oct__in { padding: clamp(24px, 3vw, 30px); display: flex;
  flex-direction: column; height: 100%; }
.fa-quote__stars { color: var(--orange); letter-spacing: 2px; font-size: 14px;
  margin-bottom: 14px; }
.fa-quote__text { font-size: 15.5px; line-height: 1.6; color: #4c5165;
  flex: 1 1 auto; }
.fa-quote__by { margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(50, 54, 81, .14); font-size: 14px; }
.fa-quote__by b { display: block; color: var(--navy); font-weight: 700; }
.fa-quote__by span { color: var(--grey); font-size: 13px; }

/* ---------------------------------------------------------------------
   CLOSING CTA + FOOTER
   The only link out of this page is the one that scrolls back to the form.
   --------------------------------------------------------------------- */
.fa-close { text-align: center; }
.fa-close .h-lg { max-width: 20ch; margin: 0 auto; }
.fa-close p { margin: 18px auto 28px; color: #dfe2ee; }

.fa-foot { background: var(--navy); color: #aab0c4; padding: 34px 0;
  font-size: 13px; line-height: 1.6; text-align: center; }
.fa-foot__in { width: 100%; max-width: 780px; margin: 0 auto;
  padding: 0 clamp(22px, 6vw, 88px); }
.fa-foot p + p { margin-top: 10px; font-size: 12px; color: #8990a6; }

/* ---------------------------------------------------------------------
   LUNA CLEARANCE
   Luna is position:fixed at the bottom of the viewport. On this page the
   form IS the page, so the closing CTA and footer reserve enough room
   that she never rests on top of a field or the submit button at the
   scroll positions where those are the target.
   The full-width-bar defect itself is fixed in assets/css/luna.css.
   --------------------------------------------------------------------- */
.product--free-audit .fa-foot { padding-bottom: 88px; }