/* The free audit page.
   ============================================================================
   Its own stylesheet rather than more lines in styles.css: this page is the
   top of the funnel and will be iterated on far more often than the workspace,
   and a separate file means that iteration cannot break the app. */

.auditpage main { padding-bottom: 80px; }

/* ---- the ask ---- */
.au-hero {
  padding: clamp(50px, 8vw, 96px) var(--gutter) clamp(30px, 5vw, 56px);
  max-width: 900px; margin: 0 auto; text-align: center;
}
.au-hero h1 {
  font-size: clamp(42px, 6.4vw, 82px); line-height: .94; letter-spacing: -.06em; margin: 18px 0 24px;
}
.au-hero h1 em { font-family: "Instrument Serif", serif; font-weight: 400; font-style: italic; }
.au-hero .lede { max-width: 640px; margin: 0 auto; }
.au-hero.done { padding-bottom: 24px; }
.au-hero.done h1 { font-size: clamp(30px, 4vw, 44px); }

.au-form { max-width: 560px; margin: 36px auto 0; text-align: left; }
.au-form label { font-size:var(--t-sm); font-weight: 800; }
.au-form > div { display: flex; margin: 9px 0; }
.au-form input {
  min-width: 0; flex: 1; border: 1px solid var(--line); border-right: 0;
  border-radius: 999px 0 0 999px; padding: 15px 22px; background: #fff; font: inherit;
}
.au-form button {
  border-radius: 0 999px 999px 0; padding: 15px 26px; background: var(--ink); color: #fff; font-weight: 700;
}
.au-form button:disabled { opacity: .6; cursor: default; }
.au-form small { color: var(--soft); display: block; }

.au-error, .au-flag {
  max-width: 620px; margin: 20px auto 0; padding: 16px 20px;
  border: 1px solid #efd3bd; background: #fdf2ea; border-radius: 16px; text-align: left;
}
.au-error p, .au-flag p { margin: 6px 0 0; color: var(--soft); font-size:var(--t-base); line-height: 1.6; }
.au-flag { max-width: none; margin: 0 0 22px; }

/* ---- the wait ----
   Paced, not reported: the work happens in one call. Each line is dimmed until
   its turn and ticked when the next one starts, which is honest about ordering
   without claiming a thing was found. */
.au-progress { max-width: 560px; margin: 0 auto; padding: 0 var(--gutter) 40px; }
.au-steps { list-style: none; padding: 0; margin: 0 0 14px; }
.au-steps li {
  padding: 11px 0 11px 30px; position: relative; font-size:var(--t-base); color: var(--soft);
  opacity: .4; transition: opacity .3s ease, color .3s ease;
}
.au-steps li:before {
  content: ''; position: absolute; left: 6px; top: 16px; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid var(--line);
}
.au-steps li.on { opacity: 1; color: var(--ink); font-weight: 600; }
.au-steps li.on:before { border-color: var(--dot); background: var(--dot); }
.au-steps li.done { opacity: .85; }
.au-steps li.done:before { content: '\2713'; border: 0; color: #4e7953; font-size:var(--t-sm); top: 11px; left: 4px; width: auto; height: auto; }

/* ---- the report ---- */
/* The header is sticky, so whatever is scrolled to has to clear it. The margin
   goes on the element the script actually scrolls, which is the outer mount
   rather than the section inside it. */
#au-report { scroll-margin-top: 96px; }
.au-report { max-width: 1060px; margin: 0 auto; padding: 0 var(--gutter); }
.au-top h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.05em; margin: 8px 0 14px; }
.au-top .lede { font-size:var(--t-h4); max-width: 700px; }
.au-quote { font-size:var(--t-base); color: var(--soft); max-width: 700px; }
.au-quote q { color: var(--ink); }

.au-dials { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.au-dial {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px 28px;
}
.au-dial-num { display: flex; align-items: baseline; gap: 3px; }
.au-dial-num b { font-size: 56px; letter-spacing: -.05em; line-height: 1; }
.au-dial-num small { font-size:var(--t-base); color: var(--soft); }
.au-dial p { margin: 5px 0 0; font-size:var(--t-sm); color: var(--soft); }
.au-dial.good { border-color: #c5e0ca; background: linear-gradient(180deg, #f4faf5, #fff); }
.au-dial.fair { border-color: #e6e2b8; background: linear-gradient(180deg, #fbfaee, #fff); }
.au-dial.poor { border-color: #efd3bd; background: linear-gradient(180deg, #fdf5ef, #fff); }

.au-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.au-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; margin-bottom: 16px;
}
.au-card h3 { font-size:var(--t-h3); letter-spacing: -.03em; margin: 8px 0 10px; }
.au-lead { font-size:var(--t-base); line-height: 1.65; margin: 0 0 14px; }

.au-checks { list-style: none; padding: 0; margin: 0; }
.au-checks li { padding: 11px 0 11px 26px; border-top: 1px solid var(--line); position: relative; }
.au-checks li:first-child { border-top: 0; }
.au-checks li:before { position: absolute; left: 2px; top: 11px; font-size:var(--t-sm); font-weight: 800; }
.au-checks li.ok:before { content: '\2713'; color: #4e7953; }
.au-checks li.no:before { content: '!'; color: #a8510f; }
.au-checks b { display: block; font-size:var(--t-sm); }
.au-checks span { display: block; font-size:var(--t-sm); color: var(--soft); line-height: 1.55; margin-top: 2px; }

/* ---- voice ---- */
.au-rules { display: grid; gap: 12px; margin: 16px 0; }
.au-rule { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--paper); }
.au-rule b { font-size:var(--t-base); }
.au-rule blockquote {
  margin: 9px 0 0; padding-left: 13px; border-left: 3px solid var(--acid);
  font-size:var(--t-base); line-height: 1.6;
}
.au-rule small { display: block; margin-top: 7px; font-size:var(--t-sm); color: var(--soft); }
.au-voice em { font-style: normal; font-weight: 700; }

/* ---- keywords ---- */
.au-kw { list-style: none; padding: 0; margin: 0; }
.au-kw li { padding: 13px 0; border-top: 1px solid var(--line); }
.au-kw li:first-child { border-top: 0; }
.au-kw b { font-size:var(--t-base); }
.au-kw small { display: block; font-size:var(--t-xs); color: var(--soft); margin: 3px 0; }
.au-kw span { display: block; font-size:var(--t-sm); color: var(--soft); line-height: 1.55; }
.au-tag {
  display: inline-block; font-size:var(--t-micro); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); margin-right: 5px;
}
.au-tag.low { background: var(--mint); border-color: #c5e0ca; }
.au-tag.high { background: var(--peach); border-color: #efd3bd; }

/* ---- communities ---- */
.au-subs { display: grid; gap: 12px; margin-top: 16px; }
.au-sub { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--paper); }
.au-sub > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.au-sub b { font-size:var(--t-base); }
.au-sub small { font-size:var(--t-xs); color: var(--soft); }
.au-sub p { margin: 7px 0 0; font-size:var(--t-sm); line-height: 1.6; color: var(--soft); }
.au-sub blockquote {
  margin: 10px 0 0; padding-left: 13px; border-left: 3px solid var(--acid);
  font-size:var(--t-sm); line-height: 1.55; color: var(--soft);
}

/* ---- the ask at the end ---- */
.au-cta {
  background: var(--ink); color: var(--paper); border-radius: 26px;
  padding: clamp(30px, 5vw, 52px); margin: 26px 0;
}
.au-cta .eyebrow { color: #9ba19b; }
.au-cta h3 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.04em; margin: 12px 0 16px; }
.au-cta > p { font-size:var(--t-md); line-height: 1.65; color: #cdd2cd; max-width: 720px; }
.au-cta-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; max-width: 760px; }
.au-cta-list li { font-size:var(--t-base); line-height: 1.6; color: #cdd2cd; padding-left: 20px; position: relative; }
.au-cta-list li:before { content: '\2192'; position: absolute; left: 0; color: var(--acid); }
.au-cta-list b { color: var(--paper); }
.au-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.au-primary, .au-secondary {
  display: inline-block; padding: 14px 26px; border-radius: 999px; font-weight: 700;
  font-size:var(--t-base); text-decoration: none;
}
.au-primary { background: var(--acid); color: var(--ink); }
.au-secondary { border: 1px solid #3a423b; color: var(--paper); }
.au-cta .small { color: #9ba19b; margin-top: 14px; }

@media (max-width: 860px) {
  .au-dials, .au-two { grid-template-columns: 1fr; }
  .au-form > div { display: grid; gap: 8px; }
  .au-form input, .au-form button { border-radius: 999px; border-right: 1px solid var(--line); min-height: 52px; }
  .au-form button { border-color: var(--ink); }
}

/* A community Reddit would not let us check. Marked rather than dressed up
   with numbers we did not read. */
.au-unchecked { color: #a8510f; font-weight: 700; }

/* The header CTA is a link on this page, which has no workspace to open, and
   `.top nav a` would otherwise turn it grey on ink and shrink it. */
.top nav a.nav-cta { color: white; font-size: inherit; }
@media (max-width: 560px) { .top nav a.nav-cta { font-size: var(--t-xs); } }