/* ==========================================================================
   Free deal audit landing page (/curation/audit) — page-specific layout.
   Reuses the shell (site.css) and interior-page patterns (pages.css):
   .pagehero, .page-section, .section-head, .method-icon, .panel-label,
   .stat-grid, .agent-chip, .fleet-primary. Every colour is a token.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.audit-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}
.audit-hero-copy {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(22px, 3vw, 30px);
}
.audit-hero-copy .pagehero-sub { text-wrap: pretty; }
.audit-hero-copy .hero-ctas { margin-top: 4px; }
/* the deal-readout mock: decorative, inline-styled like the site's glimpses */
.audit-visual {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* ---- What the audit delivers --------------------------------------------- */
.audit-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.audit-card {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.4vw, 30px);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface-elevated);
}
.audit-card .spec-title,
.audit-walkthrough .spec-title { margin: 0; }
.audit-card p,
.audit-walkthrough p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-body);
}
.audit-card .audit-card-note {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.audit-walkthrough {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--chip-feature-border);
  border-radius: 16px;
  background: var(--chip-feature-bg);
}
.audit-walkthrough .method-icon { flex: none; }
.audit-walkthrough-copy {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- How it works: a row of numbered steps joined by a line;
        a vertical timeline on phones ---------------------------------------- */
.audit-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.audit-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.audit-step-head { display: flex; align-items: center; }
.audit-step-num {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--chip-feature-border);
  background: var(--icon-tile);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
}
.audit-step-line {
  flex: 1 1 auto;
  min-width: 1px;
  min-height: 1px;
  margin: 0 20px;
  background: var(--chip-feature-border);
}
.audit-step:last-child .audit-step-line { background: transparent; }
.audit-step p {
  margin: 0;
  padding-right: 32px;
  max-width: 380px;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--text-strong);
  text-wrap: pretty;
}

/* ---- Request form -------------------------------------------------------- */
.audit-request { scroll-margin-top: 72px; }
.audit-request-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 88px);
  align-items: flex-start;
}
.audit-request-aside {
  flex: 1 1 320px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 110px;
}
.audit-request-aside .lead { text-wrap: pretty; }
.audit-request-aside .lead a { font-weight: 600; color: var(--link); }
.audit-request-aside .lead a:hover { color: var(--text-strong); }
.audit-request-main { flex: 1 1 560px; min-width: 0; }

.audit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.audit-form[hidden] { display: none; }
.audit-panel {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface-elevated);
}
.audit-panel > legend { float: left; width: 100%; padding: 0; margin: 0; }
.audit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.audit-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.audit-field label,
.audit-choices-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}
.audit-field input,
.audit-field textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color var(--speed-base) ease;
}
.audit-field textarea {
  min-height: 116px;
  resize: vertical;
  line-height: 1.5;
}
.audit-field input:hover,
.audit-field textarea:hover { border-color: var(--chip-feature-border); }
.audit-field input:focus-visible,
.audit-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.audit-hint { font-size: 13px; color: var(--text-secondary); }

/* choice groups: a fieldset of chips, each a real radio/checkbox */
.audit-choices {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.audit-choices-label { float: left; width: 100%; padding: 0; margin: 0 0 10px; }
.audit-chip-row {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.audit-chip {
  position: relative;
  height: 44px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 14.5px;
  background-color: transparent;
}
.audit-chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.audit-chip:has(input:checked) {
  border-color: var(--chip-feature-border);
  color: var(--accent);
  background-color: var(--chip-feature-bg);
  font-weight: 500;
}
.audit-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.audit-kpi-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
}
.audit-kpi-row .audit-choices { flex: 0 1 auto; }
.audit-field--target { flex: 1 1 150px; }
.audit-field--target input { height: 44px; padding-block: 0; }

.audit-submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
}
.audit-submit .fleet-primary { min-width: 200px; }
.audit-submit .fleet-primary:disabled { opacity: 0.6; cursor: progress; }
.audit-submit .audit-hint { font-size: 14px; }

.audit-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--ok-border);
  border-radius: 16px;
  background: var(--surface-elevated);
  outline: none;
}
.audit-success[hidden] { display: none; }
.audit-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--status-ok);
  display: flex;
  align-items: center;
  justify-content: center;
}
.audit-success-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  text-wrap: pretty;
}

/* ---- Mobile sticky CTA (shown by audit.js) ------------------------------- */
.audit-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--nav-bg-solid);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  border-top: 1px solid var(--border-soft);
}
.audit-sticky[hidden] { display: none; }
.audit-sticky .fleet-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-sizing: border-box;
}

/* ---- Phones -------------------------------------------------------------- */
@media (max-width: 759px) {
  .audit-steps { flex-direction: column; }
  .audit-step { flex-direction: row; gap: 20px; }
  .audit-step-head { flex-direction: column; }
  .audit-step-line { margin: 10px 0; }
  .audit-step p { padding: 0 0 32px; }
  .audit-request-aside { position: static; }
  /* the readout card grows taller than a 5:4 frame at phone widths */
  .audit-visual-frame { aspect-ratio: 1 / 1 !important; }
  .audit-fields { grid-template-columns: minmax(0, 1fr); }
  .audit-submit .fleet-primary { width: 100%; }
  /* room under the footer so the pinned CTA never covers it */
  .page:has(.audit-sticky) .footer-bottom { padding-bottom: 84px; }
}
@media (min-width: 760px) {
  .audit-sticky { display: none; }
}