/* ═══════════════════════════════════════════════════════════════
   MAGNOLIA AUDIT FUNNEL — Frontend styles
   Layered on top of /assets/css/main.css and critical.css.
   Section styles for the landing page; form styles populated by Task 5+.
   ═══════════════════════════════════════════════════════════════ */

.audit-landing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.audit-hero {
  padding: 80px 0 60px;
  text-align: center;
}

.audit-hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  margin: 0 0 24px;
}

.audit-hero .lede {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  max-width: 720px;
  margin: 0 auto 36px;
  color: #444;
}

/* Default loaded state is amber (urgency by design, not green/relaxing).
   data-state="low" goes red when <=30% remaining.
   data-full is the booked-out warning. */
.scarcity-badge {
  display: inline-block;
  padding: 8px 20px;
  background: #fef3c7;
  border: 1px solid #f5c181;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
  color: #8a4a00;
}

.scarcity-badge[data-pending] {
  opacity: 0.5;
  background: #f5f5f5;
  border-color: #ddd;
  color: #666;
}

.scarcity-badge[data-state="low"] {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.scarcity-badge[data-full] {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.audit-hero .btn {
  margin-top: 8px;
}

.audit-hero .hero-meta {
  margin-top: 24px;
  color: #666;
  font-size: 15px;
}

/* Section padding rhythm pinned to a single token across audit sections.
   Desktop: 96px (--s10). Tablet: 64px (--s8). Mobile: 48px (--s7). */
.audit-includes,
.audit-preview,
.audit-why,
.audit-form-section {
  padding: clamp(48px, 8vw, 96px) 0;
}
.audit-offramp-section {
  padding: clamp(32px, 5vw, 56px) 0;
}
.audit-offramp {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 0 0;
  border-top: 1px solid rgba(8,8,12,0.08);
  text-align: center;
}
.audit-offramp-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: block;
  margin-bottom: 12px;
}
.audit-offramp-q {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.audit-offramp-link {
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  display: inline-block;
}
.audit-offramp-link:hover { opacity: 0.75; }

/* Mobile hero H1: allow full content width so the line doesn't wrap to 9 lines */
@media (max-width: 640px) {
  .audit-hero h1 {
    max-width: 100% !important;
    padding: 0 4px;
  }
}
.audit-why,
.audit-form-section {
  text-align: center;
}
.audit-why h2,
.audit-form-section h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#audit-form-mount {
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
}

/* ── Anti-Objection Ladder (replaces audit-why prose) ─────────── */
.objection-ladder{list-style:none;padding:0;margin:32px auto 0;border-top:1px solid rgba(8,8,12,0.08);max-width:760px;text-align:left;}
.objection-row{padding:24px 0;border-bottom:1px solid rgba(8,8,12,0.08);display:flex;flex-direction:column;gap:14px;}
.objection-q,.objection-a{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:baseline;}
.objection-mark{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.16em;color:var(--accent);text-transform:uppercase;}
.objection-q .objection-text{font-family:var(--display);font-size:17px;font-weight:700;color:var(--text);line-height:1.35;}
.objection-a .objection-mark{color:var(--text-dim);}
.objection-a .objection-text{font-size:15px;color:var(--text-muted);line-height:1.7;}
@media(max-width:640px){
  .objection-q,.objection-a{grid-template-columns:1fr;gap:6px;}
  .objection-q .objection-text{font-size:17px;}
}

/* ── My bar full-bleed pull quote band ────────────────────────── */
.audit-pullquote-band{background:#FAFAF7;padding:clamp(64px,8vw,96px) 0 clamp(88px,10vw,120px);border-top:1px solid rgba(8,8,12,0.08);border-bottom:1px solid rgba(8,8,12,0.08);}
.audit-pullquote-inner{max-width:760px;margin:0 auto;text-align:center;position:relative;}
.audit-pullquote-glyph{font-family:Georgia,serif;font-size:96px;color:var(--accent-data);line-height:0.6;display:block;margin-bottom:24px;font-weight:700;}
.audit-pullquote-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(22px,2.6vw,32px);font-weight:500;line-height:1.4;color:#08080C;margin:0 0 28px;letter-spacing:-0.01em;}
.audit-pullquote-attr{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin:0 0 6px;}
.audit-pullquote-sig{font-family:'Caveat','Comic Sans MS',cursive;font-size:24px;color:#7B6CFF;margin:0;font-weight:500;}

/* ── Audit Pricing Receipt (replaces pricing-stack list) ──────── */
.audit-receipt{max-width:480px;margin:0 auto;background:#FFFEFB;border:1px solid rgba(8,8,12,0.85);border-radius:0;padding:32px 36px 24px;font-family:var(--mono);position:relative;box-shadow:0 1px 0 rgba(0,0,0,0.04),0 28px 56px -16px rgba(0,0,0,0.18);}
.audit-receipt::before,.audit-receipt::after{content:'';position:absolute;left:-1px;right:-1px;height:6px;background:repeating-linear-gradient(90deg,#08080C 0 8px,transparent 8px 14px);}
.audit-receipt::before{top:-1px;}
.audit-receipt::after{bottom:-1px;}
.ar-head{font-size:13px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#08080C;text-align:center;line-height:1.5;}
.ar-head-sub{font-size:10px;font-weight:500;letter-spacing:0.18em;color:rgba(8,8,12,0.65);}
.ar-rule{height:1px;background:#08080C;margin:14px 0;opacity:0.85;}
.ar-section-head{font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(8,8,12,0.6);text-align:center;margin:0;}
.ar-list{list-style:none;padding:0;margin:0;}
.ar-row{display:flex;align-items:flex-end;font-size:13px;color:#08080C;line-height:1.4;padding:4px 0;font-feature-settings:'tnum';}
.ar-row--sub{padding:1px 0 1px 16px;font-size:11px;color:rgba(8,8,12,0.55);}
.ar-label{font-weight:500;letter-spacing:0.04em;}
.ar-dots{flex:1;border-bottom:1px dotted #08080C;margin:0 8px 4px;opacity:0.5;}
.ar-val{font-weight:600;white-space:nowrap;}
.ar-val--sub{font-size:11px;font-weight:500;color:rgba(8,8,12,0.55);margin-left:auto;}
.ar-total{display:flex;align-items:flex-end;font-size:14px;color:#08080C;padding:8px 0;}
.ar-total-label{font-weight:700;letter-spacing:0.06em;text-transform:uppercase;flex:1;}
.ar-total-val{font-weight:700;font-size:18px;font-feature-settings:'tnum';}
.ar-stamp{text-align:center;font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:rgba(8,8,12,0.7);line-height:1.6;padding:6px 0;}
.ar-stamp-thanks{display:block;margin-top:8px;font-family:Georgia,serif;font-style:italic;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(8,8,12,0.5);}
.audit-receipt-cap{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:rgba(8,8,12,0.45);text-align:center;margin:24px 0 0;}
@media(max-width:540px){
  .audit-receipt{padding:26px 22px 20px;}
  .ar-row{font-size:12px;}
}

.audit-includes h2,
.audit-preview h2,
.audit-why h2,
.audit-form-section h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 28px;
}

.includes-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
  max-width: 720px;
}

.includes-list li {
  padding-left: 28px;
  position: relative;
  line-height: 1.5;
}

.includes-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2c5d1e;
  font-weight: 700;
}

.audit-why p {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.55;
  color: #444;
}

.form-intro {
  text-align: center;
  max-width: 520px;
  margin: 0 auto var(--s5);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

.form-coming-soon {
  padding: 48px 24px;
  background: #f5f5f5;
  border: 2px dashed #ccc;
  border-radius: 12px;
  text-align: center;
  color: #888;
  font-style: italic;
}

/* Sample audit preview section */
.audit-preview .preview-intro {
  max-width: 720px;
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.55;
  color: #444;
}

.audit-preview .preview-mockup {
  max-width: 900px;
  margin: 0 0 32px;
}

.audit-preview .preview-mockup img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.audit-preview .preview-highlights {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.audit-preview .preview-highlights li {
  padding-left: 28px;
  position: relative;
  line-height: 1.5;
}

.audit-preview .preview-highlights li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: #2c5d1e;
  font-weight: 700;
}

/* Alpine.js x-cloak */
[x-cloak] { display: none !important; }

/* Form layout */
.audit-form-wrapper {
  max-width: 720px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 48px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* Segmented progress bar — 12 mono segments, orange filled, "01 / 12" counter */
.audit-form-progress {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.audit-form-progress-track {
  display: flex;
  gap: 3px;
  flex: 1;
}
.audit-form-progress-segment {
  flex: 1;
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  transition: background var(--dur-fast);
}
.audit-form-progress-segment.is-filled {
  background: var(--accent-data);
}
.audit-form-progress-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.audit-form-q {
  font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 8px;
  line-height: 1.25;
}

.audit-form-sub {
  margin: 0 0 28px;
  color: #666;
  font-size: 16px;
}

.audit-form-input {
  margin-bottom: 28px;
}

.audit-form-error {
  color: #b00020;
  margin: 0 0 20px;
  font-size: 14px;
}

.audit-form-nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.audit-form-nav .btn {
  min-height: 48px;
  padding: 14px 24px;
}

.audit-form-confirmed {
  max-width: 720px;
  background: #f0f7ee;
  border: 1px solid #c5e0b8;
  border-radius: 16px;
  padding: 48px;
}

.audit-form-confirmed h3 {
  margin: 0 0 16px;
  font-size: 28px;
  color: #2c5d1e;
}

.audit-form-confirmed p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.55;
  color: #333;
}

/* Form inputs */
.audit-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 17px;
  font-family: inherit;
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}

.audit-input:focus {
  outline: none;
  border-color: #2c5d1e;
}

.audit-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 15px;
  color: #555;
  cursor: pointer;
}

.audit-help {
  margin-top: 8px;
  font-size: 14px;
  color: #888;
  font-style: italic;
}

/* Multi-select / single-select option buttons */
.audit-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.audit-option:hover {
  border-color: #2c5d1e;
  background: #f9fbf8;
}

.audit-option.is-selected {
  border-color: #2c5d1e;
  background: #f0f7ee;
  font-weight: 600;
}

/* Contact step */
.audit-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.audit-contact-row .audit-input {
  margin-bottom: 0;
}

/* ── Step 12: GHL calendar embed ──────────────────────────────── */
.audit-form-calendar-wrap {
  margin-top: var(--s4);
}
.audit-form-calendar-iframe {
  width: 100%;
  /* GHL's form_embed.js auto-sizes the iframe via postMessage using an
     "offset" height calculation that undersizes the form view (the time
     picker resizes correctly, but the Enter Details form gets clipped).
     min-height beats the inline height the embed script sets, so we hold
     the iframe tall enough that the full form is visible without any
     internal scrolling on either view. Cost: some blank space below
     the calendar time picker. Trade is intentional. */
  min-height: 2400px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-lg);
  background: var(--elevated);
  display: block;
  overflow: hidden;
}
.audit-form-calendar-foot {
  margin-top: var(--s4);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 640px) {
  /* Mobile stacks fields vertically — taller form view. */
  .audit-form-calendar-iframe { min-height: 2800px; }
}

/* ── Audit Includes Ledger (replaces 4-card grid) ─────────────── */
.audit-includes-shell {
  background: var(--surface);
  padding: clamp(64px, 8vw, 96px) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.audit-includes-ledger {
  list-style: none;
  padding: 0;
  margin: var(--s7) auto var(--s6);
  max-width: 880px;
}
.audit-includes-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  align-items: start;
}
.audit-includes-row:last-child {
  border-bottom: 0;
}
.audit-includes-num {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-data);
  letter-spacing: -1px;
}
.audit-includes-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--s2);
  letter-spacing: -0.4px;
}
.audit-includes-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
.audit-includes-receive {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  max-width: 680px;
  margin: var(--s7) auto 0;
  line-height: 1.8;
}
.audit-includes-receive span {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-top: var(--s2);
  font-size: 13px;
  letter-spacing: 0.08em;
}
@media (max-width: 640px) {
  .audit-includes-row { grid-template-columns: 60px 1fr; gap: var(--s4); }
  .audit-includes-num { font-size: 20px; }
}

/* ── Pricing reframe additions ────────────────────────────────── */
.audit-pricing-lede {
  max-width: 640px;
  margin: 0 auto var(--s6);
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
}
.ar-val--note {
  font-size: 12px;
  color: var(--text-dim);
}

/* Hint line under the business-name input. Shows the linked GBP address
   after a Places selection, or a "type and continue" nudge before. */
.audit-form-hint {
  margin: 6px 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #2c5d1e;
}
.audit-form-hint--muted {
  color: #777;
}

/* Google Places autocomplete dropdown — `pac-*` classes are injected by
   the Maps JS SDK. Match the form's rounded, off-white aesthetic. */
.pac-container {
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  font-family: inherit;
  margin-top: 4px;
  z-index: 9999;
}
.pac-item {
  padding: 10px 16px;
  font-size: 15px;
  cursor: pointer;
  border-top: 1px solid #f0f0f0;
}
.pac-item:first-child {
  border-top: none;
}
.pac-item:hover,
.pac-item-selected {
  background: #f0f7ee;
}
.pac-item-query {
  font-size: 15px;
  color: #1a1a1a;
}
.pac-matched {
  font-weight: 600;
}