/* audit.css
   Page-owned styles for audit.html only.
   Scoped to .page-audit to avoid competing with global styles.css.
*/

.page-audit .audit-hero{
  padding: 64px 0 44px;
}
.page-audit .audit-hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items:center;
}
.page-audit .audit-eyebrow{
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--text2);
  margin:0 0 10px;
}
.page-audit .audit-title{
  margin:0 0 12px;
  line-height:1.06;
}
.page-audit .audit-lede{
  margin:0 0 18px;
  max-width: 60ch;
  color:var(--text);
  opacity:.92;
}
.page-audit .audit-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 0 0 16px;
}
.page-audit .audit-trust{
  margin: 0;
  padding-left: 18px;
  color:var(--text2);
}
.page-audit .audit-hero-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.page-audit .audit-media-caption{
  margin-top:12px;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  color: var(--navy);
}
:root.dark .page-audit .audit-media-caption{
  background: rgba(2,6,23,.35);
  border-color: rgba(255,255,255,.10);
}

.page-audit .audit-section{
  padding: 54px 0;
}
.page-audit .audit-alt{
  background: rgba(15,23,42,.03);
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
:root.dark .page-audit .audit-alt{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}

.page-audit .audit-inline-links{
  margin-top: 16px;
  color:var(--text2);
}
.page-audit .audit-dot{
  margin: 0 10px;
  opacity:.55;
}

.page-audit .audit-split{
  align-items:start;
}
.page-audit .audit-checklist{
  margin: 14px 0 0;
  padding-left: 18px;
  color:var(--text2);
}
.page-audit .audit-panel{
  padding: 18px;
}
.page-audit .audit-muted{
  margin: 10px 0 0;
  padding-left: 18px;
  color:var(--text2);
}
.page-audit .audit-panel-actions{
  margin-top: 14px;
}

.page-audit .audit-steps{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.page-audit .audit-steps .card{
  padding: 18px;
}
.page-audit .audit-step-head{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 8px;
}
.page-audit .audit-step-num{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.15);
  color:var(--text2);
}
:root.dark .page-audit .audit-step-num{
  border-color: rgba(255,255,255,.14);
}

.page-audit .audit-callout{
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  color: var(--navy);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap:wrap;
}
:root.dark .page-audit .audit-callout{
  background: rgba(2,6,23,.35);
  border-color: rgba(255,255,255,.10);
}

.page-audit .audit-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.page-audit .audit-form-intro .audit-micro{
  margin-top: 14px;
  color:var(--text2);
}

.page-audit .audit-privacy{
  margin-top: 14px;
  padding: 16px;
}

.page-audit .audit-form{
  padding: 18px;
}

.page-audit .form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.page-audit .field-full{
  grid-column: 1 / -1;
}
@media (max-width: 900px){
  .page-audit .audit-hero-grid{
    grid-template-columns: 1fr;
  }
  .page-audit .audit-form-grid{
    grid-template-columns: 1fr;
  }
  .page-audit .form-grid{
    grid-template-columns: 1fr;
  }
}

.page-audit .audit-faq{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}
.page-audit .audit-faq details{
  padding: 16px 18px;
}
.page-audit .audit-faq summary{
  cursor:pointer;
  font-weight: 650;
}
.page-audit .audit-faq-body{
  margin-top: 10px;
  color:var(--text2);
}
.page-audit .audit-footer-cta{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

/* Readability fixes (light panels) */
.page-audit .audit-media-caption,
.page-audit .audit-callout{
  color: var(--text);
}
.page-audit .audit-media-caption strong,
.page-audit .audit-callout h3{
  color: var(--navy);
}
:root.dark .page-audit .audit-media-caption,
:root.dark .page-audit .audit-callout{
  color: var(--white);
}
:root.dark .page-audit .audit-media-caption strong,
:root.dark .page-audit .audit-callout h3{
  color: var(--white);
}
html[data-theme="dark"] .page-audit .audit-media-caption,
html[data-theme="dark"] .page-audit .audit-callout{
  background: rgba(2,6,23,.45);
  border-color: rgba(255,255,255,.12);
  color: var(--white);
}


/* Lighter supporting text for callouts */
.page-audit .audit-muted-text{
  color: var(--text2);
}
html[data-theme="dark"] .page-audit .audit-muted-text{
  color: rgba(230,237,246,.78);
}


/* Form polish */
.page-audit .form-grid--audit{
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.page-audit .form-section--full{ grid-column: 1 / -1; }
.page-audit .form-section-title{
  margin: 6px 0 2px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text2);
}
.page-audit .audit-form{
  color-scheme: light;
}
html[data-theme="dark"] .page-audit .audit-form{
  color-scheme: dark;
}

/* Inputs */
.page-audit .audit-form input,
.page-audit .audit-form textarea,
.page-audit .audit-form select{
  background: var(--surface-1);
  color: rgba(15,23,42,.78);
  border: 1px solid var(--border);
}
html[data-theme="dark"] .page-audit .audit-form input,
html[data-theme="dark"] .page-audit .audit-form textarea,
html[data-theme="dark"] .page-audit .audit-form select{
  background: rgba(255,255,255,.03);
  border-color: rgba(230,237,246,.12);
  color: rgba(230,237,246,.90);
}
.page-audit .audit-form input::placeholder,
.page-audit .audit-form textarea::placeholder{
  color: rgba(15,23,42,.45);
}
html[data-theme="dark"] .page-audit .audit-form input::placeholder,
html[data-theme="dark"] .page-audit .audit-form textarea::placeholder{
  color: rgba(230,237,246,.45);
}
.page-audit .audit-form input:focus,
.page-audit .audit-form textarea:focus,
.page-audit .audit-form select:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(47,125,109,.18);
  border-color: rgba(47,125,109,.55);
}

/* Nicer native select */
.page-audit .select-wrap{ position: relative; }
.page-audit .select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding-right: 44px;
}
.page-audit .select-wrap::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(15,23,42,.55);
  border-bottom: 2px solid rgba(15,23,42,.55);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}
html[data-theme="dark"] .page-audit .select-wrap::after{
  border-right-color: rgba(230,237,246,.60);
  border-bottom-color: rgba(230,237,246,.60);
}
.page-audit .select option{
  color: rgba(15,23,42,.86);
  background: #FFFFFF;
}
html[data-theme="dark"] .page-audit .select option{
  color: #E6EDF6;
  background: #0B1224;
}

@media (max-width: 900px){
  .page-audit .form-grid--audit{ grid-template-columns: 1fr; }
}
/* Example cue: gently pulse the field when it is focused and still showing placeholder */
@keyframes examplePulse{
  0%{ box-shadow: 0 0 0 0 rgba(47,125,109,.00); }
  50%{ box-shadow: 0 0 0 6px rgba(47,125,109,.14); }
  100%{ box-shadow: 0 0 0 0 rgba(47,125,109,.00); }
}
.page-audit .audit-form input:focus:placeholder-shown,
.page-audit .audit-form textarea:focus:placeholder-shown{
  animation: examplePulse 1.8s ease-in-out infinite;
}

/* Make placeholders look clearly like examples */
.page-audit .audit-form input::placeholder,
.page-audit .audit-form textarea::placeholder{
  font-style: italic;
}


/* Theme-matched validation (calm) */
.page-audit .audit-form input:invalid,
.page-audit .audit-form textarea:invalid,
.page-audit .audit-form select:invalid{
  border-color: rgba(183, 52, 52, .35);
}
.page-audit .audit-form input:focus:invalid,
.page-audit .audit-form textarea:focus:invalid,
.page-audit .audit-form select:focus:invalid{
  box-shadow: 0 0 0 4px rgba(183, 52, 52, .14);
  border-color: rgba(183, 52, 52, .55);
}
.page-audit .audit-form input:valid,
.page-audit .audit-form textarea:valid,
.page-audit .audit-form select:valid{
  border-color: rgba(47,125,109,.25);
}