/* ============================================================
   AI Build Audit - page-specific design

   Loaded only by offers/ai-build-audit.html, in addition to
   /styles.css, and every rule is scoped under `.audit-page`.

   Both of those matter:

   1. The class names in this design are generic - .hero, .section,
      .step, .intro, .fit-grid, .faq, .eyebrow - and all of them
      already mean something else in styles.css. Unscoped, this would
      redecorate the homepage.

   2. This design carries its own palette, and three of its token
      names collide with the brand tokens while holding DIFFERENT
      values: --green is a muted sage here rather than the brand
      #009B6A, --ink and --line differ too. Declared on :root they
      would repaint the site header and footer, which are meant to
      stay exactly as they are. They are declared on .audit-page
      instead, so they stop at the edges of the main content.
   ============================================================ */

.audit-page {
  /* this design's own palette, deliberately not the brand tokens */
  --a-navy:   #0b1533;
  --a-ink:    #172344;
  --a-muted:  #586176;
  --a-green:  #447b68;
  --a-mint:   #dceee6;
  --a-lime:   #d9fa78;
  --a-cream:  #fff9e8;
  --a-line:   #e8e9e5;
  --a-orange: #ff9b61;
  --a-shadow: 0 24px 70px #0b15331a;

  background: #fff;
  color: var(--a-navy);
  font-family: Inter, "Avenir Next", system-ui, sans-serif;
  line-height: 1.6;
  display: block;
}

.audit-page *,
.audit-page *::before,
.audit-page *::after { box-sizing: border-box; }

.audit-page a { color: inherit; }

.audit-page h1,
.audit-page h2,
.audit-page h3 {
  font-family: Poppins, "Avenir Next", system-ui, sans-serif;
  letter-spacing: -.04em;
  line-height: 1.08;
  /* styles.css pins headings to var(--ink), which is navy. This design
     never sets a heading colour and lets them take the colour of the
     section they sit in, so the h2 on the navy pricing band renders
     white. Without `inherit` that heading is navy on navy: present in
     the markup, visible to a screen reader, and invisible on screen. */
  color: inherit;
}
.audit-page h1 {
  font-size: clamp(3rem, 6vw, 5.65rem);
  margin: 20px 0 22px;
  max-width: 730px;
  letter-spacing: -.065em;
}
.audit-page h2 { font-size: clamp(2.2rem, 4vw, 3.55rem); margin: 0 0 18px; }
.audit-page h3 {
  font-size: 1.16rem; margin: 0 0 8px; letter-spacing: -.03em;
  font-weight: 700;          /* styles.css sets headings to 600 */
  text-transform: none;      /* and uppercases .step h3 specifically */
}
.audit-page p  { margin: 0 0 18px; color: var(--a-muted); line-height: 1.6; }

.audit-page .wrap { width: min(1160px, calc(100% - 48px)); margin: auto; }

.audit-page .eyebrow {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--a-green);
  /* styles.css also sets font-family, line-height and a bottom margin on
     .eyebrow. The design declares none of them, so it inherits the body's
     Inter at 1.6 and spaces by hand. Restated here or the global rule wins. */
  font-family: Inter, "Avenir Next", system-ui, sans-serif;
  line-height: 1.6;
  margin-bottom: 0;
}

.audit-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 999px;
  background: var(--a-navy);
  color: #fff;
  text-decoration: none;
  padding: 14px 22px;
  font-weight: 600;
  font-size: .92rem;
  box-shadow: 0 8px 20px #0b153322;
  transition: transform .2s, box-shadow .2s;
}
.audit-page .button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px #0b153333; }

/* ─────────────── Hero ─────────────── */

.audit-page .hero {
  position: relative;
  overflow: hidden;
  background: var(--a-cream);
  padding: 76px 0 72px;
}
.audit-page .hero::before {
  content: "";
  position: absolute;
  width: 580px; height: 580px;
  border-radius: 50%;
  background: #eaf5d5;
  right: -130px; top: -205px;
  opacity: .85;
}
.audit-page .hero::after {
  content: "";
  position: absolute;
  width: 330px; height: 330px;
  border: 1px solid #b6cd92;
  border-radius: 50%;
  right: 0; top: 14px;
  transform: translateX(17%);
}
.audit-page .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 45px;
}
.audit-page .hero-copy { max-width: 700px; }
.audit-page .hero-copy h1 em { font-style: normal; color: var(--a-green); }
.audit-page .lead { font-size: 1.13rem; line-height: 1.75; max-width: 650px; color: #4c566d; }
.audit-page .hero-actions {
  display: flex; align-items: center; gap: 20px; margin-top: 28px;
  flex-wrap: nowrap;       /* styles.css wraps this */
}
.audit-page .text-link {
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #9ba18d;
  padding-bottom: 2px;
}
.audit-page .micro-proof {
  display: flex; gap: 17px; align-items: center;
  margin-top: 29px; font-size: .82rem; color: #596276;
}
.audit-page .micro-proof b { color: var(--a-navy); }
.audit-page .micro-proof .check {
  background: var(--a-mint);
  border-radius: 50%;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  color: var(--a-green); font-weight: 800;
}

/* the report mock, drawn entirely in CSS so there is no image to ship */
.audit-page .report-wrap { position: relative; min-height: 445px; display: grid; place-items: center; }
.audit-page .orbit {
  position: absolute;
  width: 410px; height: 410px;
  border-radius: 50%;
  border: 1px dashed #95b18a;
  right: 9%; top: 10px;
}
.audit-page .orbit::before,
.audit-page .orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--a-orange); }
.audit-page .orbit::before { width: 17px; height: 17px; top: 34px; right: 34px; }
.audit-page .orbit::after  { width: 10px; height: 10px; bottom: 41px; left: 22px; background: #85bbaa; }

.audit-page .report {
  z-index: 1;
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 26px;
  width: min(385px, 100%);
  box-shadow: var(--a-shadow);
  transform: rotate(2deg);
}
.audit-page .report-top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 20px; border-bottom: 1px solid var(--a-line);
}
.audit-page .report-logo { font: 700 .65rem Poppins, sans-serif; letter-spacing: .12em; }
.audit-page .report-logo span {
  color: #738092;
  font: 500 .55rem Inter, sans-serif;
  letter-spacing: .04em;
}
.audit-page .tag {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  background: var(--a-mint); color: #31614f;
  border-radius: 999px; padding: 6px 9px; font-weight: 700;
}
.audit-page .report-kicker {
  font-size: .64rem; color: #778092; letter-spacing: .13em;
  text-transform: uppercase; margin-top: 21px;
}
.audit-page .report h3 { font-size: 1.2rem; margin: 7px 0 17px; }
.audit-page .risk-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 10px;
  align-items: center; padding: 11px 0;
  border-top: 1px solid #eff0ed; font-size: .74rem;
}
.audit-page .risk-num {
  width: 25px; height: 25px; border-radius: 8px;
  background: #ffe7d9; display: grid; place-items: center;
  color: #aa4a24; font-size: .68rem; font-weight: 700;
}
.audit-page .risk-row:nth-of-type(2) .risk-num { background: #fff2c7; color: #966d17; }
.audit-page .risk-row:nth-of-type(3) .risk-num { background: #e0efe8; color: #39745a; }
.audit-page .risk-status {
  font-size: .59rem; color: #a4522e; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.audit-page .report-footer {
  margin-top: 15px; border-radius: 10px; background: #f6f7f3;
  padding: 13px; display: flex; justify-content: space-between;
  font-size: .67rem; color: #5e687a;
}
.audit-page .stamp {
  position: absolute; z-index: 2; bottom: 30px; left: 4%;
  background: var(--a-lime);
  width: 99px; height: 99px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font: 700 .7rem/1.3 Poppins, sans-serif;
  text-transform: uppercase; letter-spacing: .04em;
  transform: rotate(-12deg);
  box-shadow: 0 7px 20px #0b15331c;
}

/* ─────────────── Metrics bar ─────────────── */

.audit-page .metrics { background: var(--a-navy); color: #fff; }
.audit-page .metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 25px 0; }
.audit-page .metric { padding: 4px 30px; border-right: 1px solid #ffffff2a; }
.audit-page .metric:first-child { padding-left: 0; }
.audit-page .metric:last-child { border: 0; }
.audit-page .metric b {
  display: block; color: var(--a-lime);
  font: 600 1.02rem Poppins, sans-serif; letter-spacing: -.02em;
}
.audit-page .metric span { font-size: .8rem; color: #d1d8e5; }

/* ─────────────── Sections ─────────────── */

.audit-page .section { padding: 104px 0; }
.audit-page .intro { max-width: 680px; }
.audit-page .intro p { font-size: 1.03rem; }

.audit-page .problem-grid {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start;
}
.audit-page .problem-grid .intro { position: sticky; top: 40px; }
.audit-page .callout {
  border-left: 3px solid var(--a-orange);
  padding: 6px 0 6px 22px;
  font-size: 1.05rem; color: var(--a-navy); font-weight: 500;
}
.audit-page .signals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.audit-page .signal { padding: 18px; background: #f7f8f5; border-radius: 12px; font-size: .84rem; color: #414b60; }
.audit-page .signal strong { display: block; color: var(--a-navy); font-size: .9rem; margin-bottom: 4px; }

.audit-page .covers { background: #f5f7f3; }
.audit-page .covers-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 38px; }
.audit-page .covers-head p { max-width: 390px; margin: 0; }
.audit-page .cover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.audit-page .cover { background: #fff; border-radius: 14px; padding: 24px; min-height: 185px; border: 1px solid #ebeee8; }
/* The design was drawn for six cards, which filled a three-column grid in two
   clean rows. There are seven areas now, so the last card would sit alone in
   its row. It runs the full width instead, and drops the min-height it no
   longer needs, so the row reads as deliberate rather than short. */
.audit-page .cover-grid > :last-child { grid-column: 1 / -1; min-height: 0; }
.audit-page .cover-icon {
  display: grid; place-items: center;
  width: 37px; height: 37px; border-radius: 11px;
  background: var(--a-mint); color: var(--a-green);
  font-weight: 800; margin-bottom: 17px;
}
.audit-page .cover p { font-size: .85rem; margin: 0; }

.audit-page .process-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.audit-page .process-list { border-top: 1px solid var(--a-line); }
.audit-page .step {
  display: grid; grid-template-columns: 48px 1fr; gap: 18px;
  padding: 23px 0; border-bottom: 1px solid var(--a-line);
  /* styles.css styles .step for the homepage journey, where the steps are
     centred cards. Here they are rows in a list, so both of those have to
     be undone: the design declares neither. */
  position: static;
  text-align: start;
}
.audit-page .step-no { font: 600 .85rem Poppins, sans-serif; color: var(--a-green); padding-top: 3px; }
.audit-page .step p { font-size: .88rem; margin: 0; }
.audit-page .step h3 { margin-bottom: 5px; }
.audit-page .deliverable {
  margin-top: 27px; padding: 25px; border-radius: 14px;
  background: var(--a-navy); color: #fff;
  display: flex; justify-content: space-between; gap: 24px; align-items: center;
}
.audit-page .deliverable p { color: #d4dae6; font-size: .84rem; margin: 0; }
.audit-page .deliverable strong { color: var(--a-lime); white-space: nowrap; }
.audit-page .deliverable .eyebrow { color: var(--a-lime); }

.audit-page .fit { background: var(--a-cream); }
.audit-page .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 35px; }
.audit-page .fit-card { background: #fff; border-radius: 16px; padding: 30px; }
.audit-page .fit-card.no { background: #f2f1ee; }
.audit-page .fit-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.audit-page .fit-title i {
  font-style: normal; width: 26px; height: 26px; border-radius: 50%;
  background: var(--a-mint); display: grid; place-items: center;
  color: var(--a-green); font-size: .75rem;
}
.audit-page .no .fit-title i { background: #e6e4df; color: #71716d; }
.audit-page .fit ul { list-style: none; padding: 0; margin: 0; display: block; }
.audit-page .fit li { padding: 9px 0 9px 23px; position: relative; color: #525d72; font-size: .9rem; }
.audit-page .fit li::before { content: "\2713"; position: absolute; left: 0; color: var(--a-green); font-weight: 700; }
.audit-page .no li::before { content: "\2013"; color: #92938c; }

.audit-page .pricing { background: var(--a-navy); color: #fff; position: relative; overflow: hidden; }
.audit-page .pricing::after {
  content: ""; position: absolute;
  width: 430px; height: 430px; border-radius: 50%;
  border: 1px solid #ffffff17; right: -100px; top: -220px;
}
.audit-page .price-grid {
  display: grid; grid-template-columns: 1fr .8fr; gap: 72px;
  align-items: center; position: relative; z-index: 1;
}
.audit-page .pricing h2 { max-width: 670px; }
.audit-page .pricing p { color: #cbd3e0; }
.audit-page .pricing > .wrap > div > .eyebrow { color: var(--a-lime); }
.audit-page .price-card { background: #fff; border-radius: 16px; padding: 27px; color: var(--a-navy); }
.audit-page .price-card .eyebrow { font-size: .68rem; color: var(--a-green); }
.audit-page .price-card h3 { font-size: 1.35rem; margin: 10px 0; }
.audit-page .price-card p { color: #5b6476; font-size: .87rem; }
.audit-page .price-card .button { width: 100%; margin-top: 8px; }

.audit-page .faq { max-width: 820px; margin: auto; }
.audit-page .faq .intro { margin-bottom: 30px; }
.audit-page .faq details { border-top: 1px solid var(--a-line); padding: 21px 0; border-bottom: 0; }
.audit-page .faq details:last-child { border-bottom: 1px solid var(--a-line); }
.audit-page .faq summary {
  cursor: pointer; list-style: none;
  font: 600 1rem Poppins, sans-serif;
  display: flex; justify-content: space-between;
  padding: 0; color: var(--a-navy);
  position: static;        /* styles.css makes .faq summary relative */
}
.audit-page .faq summary::-webkit-details-marker { display: none; }
.audit-page .faq summary::after {
  content: "+"; font-size: 1.25rem; color: var(--a-green);
  /* styles.css positions this absolutely and pins line-height to 1, which
     makes the summary row 24px instead of 30px and shortens the whole FAQ */
  position: static; transform: none; line-height: normal;
}
.audit-page .faq details[open] summary::after { content: "\2212"; }
.audit-page .faq details p {
  padding: 14px 28px 0 0; font-size: .91rem; margin: 0;
  max-width: none; color: var(--a-muted);   /* styles.css uses --ink-soft */
}
.audit-page .faq summary:focus-visible { outline: 2px solid var(--a-green); outline-offset: 3px; }

.audit-page .final { padding: 78px 0; background: var(--a-mint); }
.audit-page .final-inner { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.audit-page .final h2 { font-size: clamp(2rem, 3.5vw, 3.1rem); margin: 0 0 12px; }
.audit-page .final p { margin: 0; }

/* ─────────────── Responsive ─────────────── */

@media (max-width: 850px) {
  .audit-page .hero-grid,
  .audit-page .problem-grid,
  .audit-page .process-grid,
  .audit-page .price-grid { grid-template-columns: 1fr; gap: 35px; }
  .audit-page .hero { padding: 62px 0; }
  .audit-page .hero-grid { gap: 18px; }
  .audit-page .report-wrap { min-height: 420px; }
  .audit-page .problem-grid .intro { position: static; }
  .audit-page .section { padding: 78px 0; }
  .audit-page .price-grid { gap: 28px; }
  .audit-page .cover-grid { grid-template-columns: repeat(2, 1fr); }
  .audit-page .covers-head { align-items: start; flex-direction: column; }
  .audit-page .final-inner { align-items: flex-start; flex-direction: column; }
  .audit-page .stamp { left: 2%; }
}

@media (max-width: 560px) {
  .audit-page .wrap { width: min(100% - 34px, 1160px); }
  .audit-page .hero { padding: 50px 0 30px; }
  .audit-page .hero-grid { gap: 10px; }
  .audit-page h1 { font-size: 3.18rem; }
  .audit-page .lead { font-size: 1rem; }
  .audit-page .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .audit-page .micro-proof { align-items: flex-start; }
  .audit-page .report-wrap { min-height: 375px; }
  .audit-page .report { width: calc(100% - 20px); padding: 22px; }
  .audit-page .orbit { width: 320px; height: 320px; right: 0; top: 27px; }
  .audit-page .stamp { width: 80px; height: 80px; bottom: 20px; left: 0; font-size: .61rem; }
  .audit-page .metrics-grid { grid-template-columns: 1fr; padding: 12px 0; }
  .audit-page .metric,
  .audit-page .metric:first-child { border-right: 0; border-bottom: 1px solid #ffffff2a; padding: 14px 0; }
  .audit-page .metric:last-child { border: 0; }
  .audit-page .cover-grid,
  .audit-page .fit-grid,
  .audit-page .signals { grid-template-columns: 1fr; }
  .audit-page .cover { min-height: unset; }
  .audit-page .section { padding: 65px 0; }
  .audit-page .deliverable { align-items: flex-start; flex-direction: column; }
  .audit-page .price-grid { gap: 23px; }
  .audit-page .fit-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .audit-page *,
  .audit-page *::before,
  .audit-page *::after { transition: none !important; }
}