/* ============================================================
   Budget Finance — /fld/ campaign subsite (go.budgetfinance.au)
   ADDITIVE ONLY. Loaded AFTER css/styles.css; every value here is
   either an existing design token (var(--…)) or an existing
   measured metric copied from styles.css (input height 50px,
   .submit height 52px, radius 14px / var(--radius), pill radius
   999px, 16px control type). NO new fonts, NO new colours, NO
   background photography — the lander is the same light "Gallery"
   surface as the rest of the site.
   Built 31/07/2026 (Pablo) — replaces the GHL-hosted funnel pages.
   ============================================================ */

/* ---------- Campaign chrome ----------
   Same fixed .nav bar as the site, minus the links + burger (a
   lander keeps exits to a minimum). No new geometry: .nav/.brand/
   .nav-tel all come straight from styles.css. */
.fld-nav .nav-right{gap:0}

/* Pages without the sticky thumb bar don't need its 120px footer
   clearance (styles.css footer{padding-bottom:120px} exists for it). */
.no-thumb footer{padding-bottom:56px}

/* ---------- Survey card ---------- */
.fld-card{padding-top:26px}

/* Progress dots — one per slide. Colours are tokens only. */
.fld-dots{display:flex;justify-content:center;gap:7px;margin-bottom:22px}
.fld-dots i{
  width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.12);
  display:block;transition:background .25s ease,transform .25s ease;
}
.fld-dots i.on{background:var(--accent);transform:scale(1.15)}

.fld-slide{display:none}
.fld-slide.on{display:block}

/* The question IS the card's heading — it is an <h2> inside .form-card,
   so it inherits the site's own form-heading ramp verbatim
   (clamp(24px,6.4vw,32px)/700/-.02em, centred) from styles.css.
   Nothing is redefined here on purpose: measured 32px at 1440 and
   24px at 375, identical to "Get a quote" on contact.html. */
.fld-q{line-height:1.15}
.fld-help{font-size:13.5px;color:var(--dim);text-align:center;margin-top:9px}
.fld-field{margin-top:22px}

/* Single-select choice buttons — identical box to an <input>
   (height 50px, radius 14px, 1px hairline, 16px type, white fill)
   so the survey and the site's forms are visually the same control. */
.fld-choices{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
.choice{
  width:100%;height:50px;padding:0 18px;
  font-family:var(--sans);font-size:16px;font-weight:550;color:var(--ink);
  background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:14px;
  text-align:left;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,color .15s ease;
}
.choice:hover{border-color:var(--accent)}
.choice.sel{
  border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,102,204,.15);   /* == input:focus ring */
}
.choice:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,102,204,.15)}
@media(min-width:600px){
  .fld-choices{grid-template-columns:1fr 1fr}
}

/* Back link under the primary button */
.fld-back{
  display:block;width:100%;margin-top:14px;
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:14.5px;color:var(--dim);
}
.fld-back:hover{color:var(--ink)}

/* ---------- Booking step ---------- */
.fld-book{max-width:640px;margin:0 auto}
/* Placeholder that holds the calendar's spot until the GHL embed id
   is wired (fld.js swaps in the iframe when data-ghl-calendar-id is
   set). Same dashed treatment as the site's .media.ph placeholder. */
.fld-slot{
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 12px,rgba(0,0,0,.04) 12px 24px),
    var(--card);
  border-radius:var(--radius);
  padding:46px 26px;text-align:center;
}
.fld-slot h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.fld-slot p{font-size:15px;color:var(--dim);margin-top:8px;max-width:34ch;margin-left:auto;margin-right:auto}
/* Live calendar frame (replaces the placeholder once wired) */
.fld-cal{width:100%;min-height:640px;border:0;border-radius:var(--radius);background:#fff;display:block}

/* The "prefer to talk?" line + outlined phone button.
   .cta / .cta .tlink are the site's own approved CTA components
   (outlined pill, LIVE 31/07) — nothing new is defined here. */
.fld-or{font-size:14.5px;color:var(--dim);text-align:center;margin-top:26px}

/* ---------- Footer disclaimer ----------
   Uses the footer's existing .legal type ramp; the mandatory
   not-affiliated line sits above the credit-licence line. */
footer .fld-disc{
  font-size:11.5px;color:var(--faint);line-height:1.65;
  max-width:640px;margin:0 auto 12px;
}