/* ------------------------------- Hero Layout ------------------------------- */
.hero-centered-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.hero-centered-container h1 {
  color: var(--c-primary);
}
.hero-centered-container .tag {
  color: var(--c-accent);
  font: var(--sub-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 1rem;
}
.hero-centered-container .hero-description {
  margin: var(--spacer-m) auto;
  opacity: 0.8;
}

/* ------------------------------- System Audit Layout ------------------------------- */
.audit-grid-section {
  background-color: var(--c-secondary);
}

.audit-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--spacer-xl);
  align-items: center;
}
@media screen and (max-width: 60rem) {
  .audit-container {
    grid-template-columns: 1fr;
    gap: calc(var(--spacer-xl) * 1.5);
  }
}

/* ------------------------------- Fixed Gauge ------------------------------- */
.gauge-container {
  position: relative;
  width: 100%;
  max-width: 320px; /* Controls overall size */
  margin: 0 auto var(--spacer-l);
}

.gauge-svg {
  width: 100%;
  height: auto;
  display: block; /* Removes weird inline SVG spacing */
}

.gauge-path {
  fill: none;
  stroke-width: 30; /* Thickened the curve */
  stroke-linecap: round;
}

.gauge-bg {
  stroke: var(--c-metal2);
}

.gauge-fill {
  stroke: url(#gradient);
  stroke-dasharray: 400; /* Adjusted for the new viewBox math */
  stroke-dashoffset: 400;
  animation: fillGauge 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 0.3s;
}

.gauge-text {
  position: absolute;
  bottom: 5px; /* Sits perfectly in the center of the arc */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--c-primary);
}

.gauge-value {
  font: var(--h1-font); /* Larger number */
  line-height: 1;
  margin-bottom: 0.25rem;
}

.gauge-total {
  font: var(--sub-font);
  opacity: 0.6;
  font-weight: 700;
  letter-spacing: 1px;
}

@keyframes fillGauge {
  from {
    stroke-dashoffset: 400;
  }
  to {
    stroke-dashoffset: 130;
  } /* Math adjusted for a score of ~73% */
}
/* ------------------------------- Fixed Audit List ------------------------------- */
.audit-text h3 {
  margin-bottom: var(--spacer);
}
.audit-text p {
  margin-bottom: var(--spacer-l);
  font: var(--p-font);
  opacity: 0.8;
  text-wrap: balance;
}
.audit-text .audit-list {
  list-style: none;
  padding: 0;
}
.audit-text .audit-list li {
  font: var(--p-font);
  margin-bottom: 1.25rem;
  display: flex; /* Flexbox prevents awkward wrapping */
  align-items: flex-start;
  gap: 1rem;
}
.audit-text .audit-list li span {
  display: block; /* Forces text to act as a block next to the icon */
  line-height: 1.5;
}
.audit-text .audit-list li .list-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0; /* Prevents icon from shrinking when text wraps */
  margin-top: 2px;
  filter: invert(53%) sepia(30%) saturate(697%) hue-rotate(345deg) brightness(96%) contrast(89%);
}

/* ------------------------------- Form Adjustments ------------------------------- */
.audit-form-container {
  background: #ffffff;
  border-radius: var(--border-rad);
  padding: var(--spacer-l);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.audit-form-container h3 {
  color: var(--c-primary);
  margin-bottom: 0.5rem;
}
.audit-form-container .form-subtitle {
  margin-bottom: 1.5rem;
  opacity: 0.8;
  font: var(--sub-font);
}

@media screen and (max-width: 42rem) {
  .audit-form-container {
    padding: var(--spacer-m);
  }
}
/* ------------------------------- New Advantage Grid ------------------------------- */
.advantage-section {
  background-color: rgba(var(--c-metal2-data), 0.3);
}

.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacer-m);
  margin-top: var(--spacer-l);
}
@media screen and (max-width: 60rem) {
  .advantage-grid {
    grid-template-columns: 1fr;
  }
}

.advantage-card {
  background: var(--c-primary);
  color: var(--c-secondary);
  padding: var(--spacer-l);
  border-radius: var(--border-rad);
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 35px 35px;
  background-position: center center;
}
.advantage-card .icon-wrapper {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.advantage-card .icon-wrapper img {
  width: 24px;
  filter: brightness(0) invert(1);
}
.advantage-card h3 {
  margin-bottom: 0.75rem;
}
.advantage-card p {
  opacity: 0.8;
  line-height: 1.6;
}/*# sourceMappingURL=styles_system-audit.css.map */