/* ============================================================
   Free SEO audit (/tools/seo-audit) + private report page.
   Builds on the .tool-* components in styles.css.
   ============================================================ */

.sa-sec { padding-top: 8px; }
/* As wide as the site container (.wrap, --maxw), like the header and footer.
   Long text inside keeps its own max-width so lines stay readable. */
.sa-app { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sa-result { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sa-result[hidden] { display: none; }

/* Domain form */
.sa-form-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.sa-form-row { display: flex; gap: 10px; }
.sa-form-row .sa-url { flex: 1; min-width: 0; font-size: 16px; padding: 13px 14px; border-radius: var(--radius-s); }
.sa-form-row .sa-go { flex-shrink: 0; }
.sa-form-row .sa-go:disabled { opacity: .6; cursor: progress; }
.sa-error { margin-top: 10px; font-size: 14px; color: oklch(0.52 0.19 25); }

/* Progress: pre-check (steps) and the running audit (ticker) */
.sa-progress { padding: 26px 28px; }
.sa-progress .sa-progress-title { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 16px; overflow-wrap: anywhere; }
.sa-bar { height: 6px; }
.sa-bar > i { width: 3%; }
.sa-prep .sa-bar > i { width: 0; transition: width .12s linear; }
.sa-progress-text { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.sa-ticker { margin-top: 4px; font-size: 13px; color: var(--faint); min-height: 1.5em; }
.sa-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.sa-step { position: relative; padding-left: 32px; font-size: 15px; line-height: 22px; color: var(--faint); transition: color .2s ease; }
.sa-step::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center;
}
.sa-step.is-active { color: var(--ink); font-weight: 600; }
.sa-step.is-active::before { border-color: var(--accent-line); border-top-color: var(--accent); animation: sa-spin .8s linear infinite; }
.sa-step.is-done { color: var(--ink-soft); }
.sa-step.is-done::before { content: "✓"; border: 0; background: oklch(0.62 0.15 155); color: #fff; font-size: 12px; font-weight: 800; }
@keyframes sa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sa-step.is-active::before { animation: none; } }

/* Email step: the site is checked, the email starts the audit */
.sa-ready {
  padding: 36px 28px; text-align: center; border-color: var(--accent-line);
  background: radial-gradient(120% 140% at 50% 0%, var(--accent-soft), transparent 62%), var(--surface);
}
.sa-ready > * { max-width: 620px; margin-left: auto; margin-right: auto; }
.sa-ready .sa-ready-title { margin-bottom: 0; font-family: var(--display); font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.sa-ready-text { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.sa-ready .sa-email { margin-top: 22px; }
.sa-ready .sa-error { text-align: left; }
.sa-ready .sa-host, .sa-sent .sa-email-addr { overflow-wrap: anywhere; }
.sa-ready .sa-host { display: inline-block; max-width: 100%; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sa-link { display: inline-block; margin-top: 14px; padding: 4px 2px; background: none; border: 0; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.sa-link:hover { text-decoration: underline; }

/* Summary: score + counters */
.sa-summary { display: flex; gap: 26px; align-items: center; }
.sa-summary-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.sa-summary-side h2, .sa-report-title { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.sa-report-title { font-size: 26px; }
.sa-report-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; width: 100%; }
.sa-report-head-copy { flex: 1 1 320px; min-width: 0; }
.sa-download { flex-shrink: 0; padding: 10px 18px; font-size: 14.5px; }
.sa-download svg { flex: none; }
.sa-score-box { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.sa-score {
  --p: 0; --tone: var(--accent);
  width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--tone) calc(var(--p) * 1%), var(--bg-2) 0);
}
.sa-score::before { content: ""; grid-area: 1 / 1; width: 104px; height: 104px; border-radius: 50%; background: var(--surface); }
.sa-score-num { grid-area: 1 / 1; position: relative; display: flex; align-items: baseline; gap: 2px; }
.sa-score-num strong { font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.sa-score-num span { font-size: 13px; color: var(--faint); }
.sa-score-good { --tone: oklch(0.62 0.15 155); }
.sa-score-ok { --tone: oklch(0.72 0.15 75); }
.sa-score-bad { --tone: oklch(0.6 0.2 25); }
.sa-score-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.sa-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.sa-counter { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; background: var(--bg); }
.sa-counter strong { display: block; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.sa-counter span { font-size: 12.5px; color: var(--muted); }
.sa-counter.sa-fail strong { color: oklch(0.55 0.2 25); }
.sa-counter.sa-warn strong { color: oklch(0.6 0.15 65); }
.sa-counter.sa-pass strong { color: oklch(0.52 0.14 155); }
.sa-counter.sa-na strong { color: var(--faint); }

/* Report tabs: the four counters switch the findings group below */
.sa-tab {
  position: relative; display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; padding: 12px 14px 14px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
  --tab-tone: var(--accent); --tab-soft: var(--accent-soft);
}
.sa-tab.sa-fail { --tab-tone: oklch(0.6 0.2 25); --tab-soft: oklch(0.97 0.025 25); }
.sa-tab.sa-warn { --tab-tone: oklch(0.72 0.15 70); --tab-soft: oklch(0.975 0.03 85); }
.sa-tab.sa-pass { --tab-tone: oklch(0.6 0.14 155); --tab-soft: oklch(0.97 0.025 155); }
.sa-tab.sa-na { --tab-tone: oklch(0.6 0.02 286); --tab-soft: var(--bg-2); }
.sa-tab::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: transparent; transition: background .15s ease;
}
.sa-tab:hover:not(:disabled) { border-color: var(--tab-tone); transform: translateY(-1px); box-shadow: 0 10px 22px -16px oklch(0.35 0.12 292 / 0.55); }
.sa-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sa-tab[aria-selected="true"] { border-color: var(--tab-tone); background: var(--tab-soft); box-shadow: inset 0 0 0 1px var(--tab-tone); }
.sa-tab[aria-selected="true"]::after { background: var(--tab-tone); }
.sa-tab[aria-selected="true"] span { color: var(--ink); font-weight: 600; }
.sa-tab:disabled { cursor: default; opacity: .45; background: var(--bg-2); }

/* Findings */
.sa-h { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 6px 0 2px; }
.sa-top, .sa-group { display: flex; flex-direction: column; gap: 20px; }
.sa-tabpanel:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 6px; border-radius: var(--radius-l); }
.sa-empty { font-size: 15px; color: var(--ink-soft); }
.sa-finding {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius-l); padding: 22px 26px;
  box-shadow: 0 12px 28px -24px oklch(0.3 0.08 290 / 0.45);
}
.sa-finding.sa-fail { border-left-color: oklch(0.6 0.2 25); }
.sa-finding.sa-warn { border-left-color: oklch(0.75 0.15 75); }
.sa-finding.sa-pass { border-left-color: oklch(0.65 0.14 155); }
.sa-finding-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sa-finding-head h3 { font-family: var(--display); font-size: 16.5px; font-weight: 700; color: var(--ink); }
.sa-badge { flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--bg-2); color: var(--muted); }
.sa-badge.sa-fail { background: oklch(0.95 0.04 25); color: oklch(0.5 0.19 25); }
.sa-badge.sa-warn { background: oklch(0.96 0.05 85); color: oklch(0.5 0.12 65); }
.sa-badge.sa-pass { background: oklch(0.95 0.04 155); color: oklch(0.45 0.12 155); }
.sa-about { margin-top: 4px; font-size: 13px; color: var(--faint); }
.sa-finding-title { margin-top: 10px; font-size: 15.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sa-finding-desc { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; }
.sa-finding .sa-about, .sa-finding-title, .sa-finding-desc, .sa-fix { max-width: 78ch; }
.sa-fix-label { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.sa-fix { margin: 6px 0 0 18px; display: flex; flex-direction: column; gap: 5px; }
.sa-fix li { font-size: 14px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }

/* Locked part: placeholders under blur + email gate */
.sa-locked { position: relative; border-radius: var(--radius-l); overflow: hidden; min-height: 360px; }
.sa-locked-rows {
  display: flex; flex-direction: column; gap: 14px; filter: blur(5px); opacity: .7;
  pointer-events: none; user-select: none;
}
.sa-ghost { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 16px 18px; }
.sa-ghost-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sa-ghost-lines i { display: block; height: 10px; border-radius: 6px; background: var(--bg-2); }
.sa-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--line); }
.sa-dot.sa-fail { background: oklch(0.65 0.19 25); }
.sa-dot.sa-warn { background: oklch(0.78 0.14 80); }
.sa-dot.sa-pass { background: oklch(0.7 0.13 155); }
.sa-gate { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; background: linear-gradient(180deg, oklch(1 0 0 / 0.15), oklch(1 0 0 / 0.75)); }
.sa-gate-card {
  width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--accent-line);
  border-radius: 20px; padding: 26px; box-shadow: 0 24px 60px -24px oklch(0.4 0.15 292 / 0.45); text-align: center;
}
.sa-gate-card h3 { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.sa-gate-card > p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.sa-email { display: flex; gap: 8px; margin-top: 16px; }
.sa-email .tool-in { flex: 1; min-width: 0; border-radius: var(--radius-s); }
.sa-email .btn { flex-shrink: 0; }
.sa-email .btn:disabled { opacity: .6; cursor: progress; }
.sa-gate-card .tool-note-inline { margin-top: 10px; }
.sa-sent .sa-email-addr { color: var(--accent-ink); }
.sa-sent .tool-copy { margin-top: 16px; }
.sa-sent-solo { display: grid; place-items: center; }
.sa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Report page */
.sa-report-sec { padding-top: 132px; }
.sa-loading { text-align: center; color: var(--muted); padding: 40px 0; }
.sa-report-sec .sa-result { gap: 26px; }

/* SERP Agent offer: under the teaser (below the report notice) and at the
   very end of the report page. Dark panel in the .lp-cta-inner family. */
.sa-offer {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "copy list" "actions actions";
  gap: 24px 36px; align-items: center;
  padding: 34px 34px 32px; border-radius: 24px; color: oklch(0.97 0.01 290);
  background:
    radial-gradient(120% 130% at 0% -10%, oklch(0.31 0.11 290), transparent 58%),
    radial-gradient(90% 120% at 100% 115%, oklch(0.30 0.10 18 / 0.55), transparent 60%),
    linear-gradient(180deg, oklch(0.175 0.05 287), oklch(0.135 0.04 286));
  border: 1px solid oklch(0.50 0.13 290 / 0.6);
  box-shadow: 0 30px 70px -40px oklch(0.3 0.15 292 / 0.75);
}
.sa-offer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.sa-offer-copy { grid-area: copy; min-width: 0; }
.sa-offer-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: oklch(0.80 0.13 292); }
.sa-offer-mark {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none;
  background: var(--grad); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: 0;
  box-shadow: 0 2px 8px oklch(0.50 0.20 290 / 0.45);
}
.sa-offer-title { margin-top: 14px; font-family: var(--display); font-size: clamp(22px, 2.4vw, 27px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: oklch(0.97 0.01 290); overflow-wrap: anywhere; }
.sa-offer .sa-host { display: inline-block; max-width: 100%; overflow-wrap: anywhere; background: linear-gradient(96deg, oklch(0.82 0.11 268), oklch(0.80 0.14 320)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sa-offer-text { margin-top: 12px; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: oklch(0.82 0.02 290); }
.sa-offer-list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sa-offer-list li { position: relative; padding: 13px 14px 13px 46px; border-radius: 14px; background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.09); }
.sa-offer-list li::before {
  content: "✓"; position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 12px; font-weight: 800;
}
.sa-offer-list strong { display: block; font-size: 15px; line-height: 1.35; color: oklch(0.97 0.01 290); }
.sa-offer-list span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: oklch(0.78 0.02 290); }
.sa-offer-actions {
  grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  padding-top: 22px; border-top: 1px solid oklch(1 0 0 / 0.09);
}
.sa-offer-btn { white-space: normal; text-align: center; justify-content: center; max-width: 100%; overflow-wrap: anywhere; }
.sa-offer-more { font-size: 14.5px; font-weight: 600; color: oklch(0.85 0.08 292); }
.sa-offer-more:hover { color: #fff; }
.sa-failed { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sa-failed .sa-error { margin-top: 0; font-size: 15px; }

/* SEO guide between the checks list and the FAQ */
.sa-guide { max-width: 760px; margin: 0 auto; }
.sa-guide-intro { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.6; color: var(--ink-soft); }
.sa-guide h3 { margin-top: 40px; font-family: var(--display); font-size: clamp(21px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.sa-guide p { margin-top: 12px; font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.sa-guide-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.sa-guide-list li {
  position: relative; padding: 14px 16px 14px 46px; border: 1px solid var(--line-soft); border-radius: var(--radius-s);
  background: var(--surface); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft);
}
.sa-guide-list li::before {
  content: "✓"; position: absolute; left: 15px; top: 15px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--accent-ink); background: var(--accent-soft);
}
.sa-guide-steps { list-style: none; counter-reset: sa-step; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.sa-guide-steps li { counter-increment: sa-step; position: relative; min-height: 30px; padding-left: 46px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.sa-guide-steps li::before {
  content: counter(sa-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 14px; font-weight: 700;
}
.sa-guide strong { color: var(--ink); }
.sa-guide p.sa-guide-more { margin-top: 18px; }
.sa-guide-more a { font-weight: 600; color: var(--accent-ink); }
.sa-guide-more a:hover { text-decoration: underline; }

/* What-we-check list */
.sa-checklist { list-style: none; counter-reset: sa; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; max-width: 980px; margin: 0 auto; padding: 0; }
.sa-checklist li { counter-increment: sa; position: relative; padding: 12px 14px 12px 46px; border: 1px solid var(--line-soft); border-radius: var(--radius-s); background: var(--surface); }
.sa-checklist li::before { content: counter(sa); position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); }
.sa-checklist strong { display: block; font-size: 14.5px; color: var(--ink); }
.sa-checklist span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }

@media (max-width: 760px) {
  .sa-form-row, .sa-email { flex-direction: column; }
  .sa-form-row .sa-go, .sa-email .btn { justify-content: center; }
  .sa-summary { flex-direction: column; align-items: stretch; }
  .sa-score-box { align-self: center; }
  .sa-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-checklist { grid-template-columns: 1fr; }
  .sa-locked { min-height: 420px; }
  .sa-gate-card { padding: 20px; }
  .sa-progress, .sa-ready { padding: 22px 18px; }
  .sa-finding { padding: 18px 18px; }
  .sa-report-title { font-size: 22px; }
  .sa-download { width: 100%; justify-content: center; }
  .sa-offer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "list" "actions"; gap: 20px; padding: 28px 20px 24px; }
  .sa-offer-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .sa-offer-btn { width: 100%; justify-content: center; border-radius: 20px; }
}