/* Free SEO checker (SPEC-5). Brand rules: one gold CTA, one key number in Ink
   with a gold underline — never gold text on Bone. Tokens come from base.css. */

/* Flex column so the footer pins to the viewport bottom on short states
   (scan theater, failure) instead of floating mid-screen. */
.seo-page {
  background: var(--bone); color: var(--ink); font-family: var(--sans);
  display: flex; flex-direction: column; min-height: 100vh;
}

.seo-page > main { flex: 1 }

.seo-main { max-width: 720px; margin: 0 auto; padding: 96px 24px 120px }

.seo-eyebrow {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--moss);
  display: flex; align-items: center; gap: 8px;
}

.seo-main h1 {
  font-size: clamp(38px, 6vw, 60px); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.02; margin: 16px 0;
}

.seo-main h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -.022em; margin-bottom: 20px;
}

.seo-sub { font-size: 17px; line-height: 1.55; color: var(--moss); max-width: 46ch }
.seo-note { font-size: 14px; color: var(--moss); margin-top: 16px }
.seo-error { font-size: 14px; color: #c94942; margin-top: 12px }

.seo-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Landing form and the gate share one input/button shape. */
.seo-form, .seo-gate-row { display: flex; gap: 8px; margin-top: 32px; flex-wrap: wrap }
.seo-gate-row { margin-top: 12px }

.seo-form input, .seo-gate-row input {
  flex: 1 1 260px; min-height: 48px; padding: 0 16px;
  font: 400 16px var(--sans); color: var(--ink);
  background: var(--bone); border: 1px solid var(--fog); border-radius: 6px;
}

.seo-form input:focus, .seo-gate-row input:focus {
  outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink);
}

.seo-form button, .seo-gate-row button, .seo-cta {
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 6px;
  font: 600 16px var(--sans); color: var(--ink); background: var(--gold);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}

.seo-form button:hover, .seo-gate-row button:hover, .seo-cta:hover { background: var(--gold-dark) }

/* Scan theater */
.seo-theater { text-align: center; padding-top: 40px }
.seo-theater .seo-eyebrow { justify-content: center }
.seo-counter { font-size: 17px; color: var(--moss); margin-bottom: 32px }

.seo-progress { height: 2px; background: var(--fog); overflow: hidden; border-radius: 2px }
.seo-progress span {
  display: block; height: 100%; width: 40%; background: var(--gold);
  animation: seo-sweep 1.4s ease-in-out infinite;
}

@keyframes seo-sweep {
  0% { transform: translateX(-100%) }
  100% { transform: translateX(350%) }
}

@media (prefers-reduced-motion: reduce) {
  .seo-progress span { animation: none; width: 100% }
}

/* The score is the page's one key number: Ink type, gold underline. */
.seo-score { text-align: center; padding-bottom: 48px; border-bottom: 1px solid var(--fog) }
.seo-score .seo-eyebrow { justify-content: center }
.seo-favicon { border-radius: 3px }

.seo-number {
  font-size: clamp(84px, 16vw, 132px); font-weight: 500; letter-spacing: -.02em;
  line-height: 1; margin: 20px 0 0; color: var(--ink);
}

/* text-decoration hugs the glyphs; a border-bottom would sit a descender's
   worth below the digits at this size and read as a floating dash. */
.seo-number span {
  text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 6px; text-underline-offset: 12px;
}

.seo-number b { font-size: .28em; font-weight: 500; color: var(--moss); margin-left: 6px }

.seo-grade {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--moss); margin: 40px 0 12px;
}

.seo-score .seo-sub { margin: 0 auto }

/* Stat strip */
.seo-stats {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: center;
  padding: 32px 0; border-bottom: 1px solid var(--fog);
}

.seo-stats div { text-align: center }
.seo-stats b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em }
.seo-stats span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--moss) }
.seo-pass { color: #16855b }
.seo-fail { color: #c94942 }
.seo-pending { font-size: 16px; color: var(--moss) }

/* Problems: headline, one big pie, tally legend — outside the card, above it. */
.seo-problems { padding: 40px 0 0; text-align: center }
.seo-problems h2 { margin-bottom: 0 }

.seo-problem-viz {
  display: flex; flex-direction: column; align-items: center;
  gap: 28px; margin-top: 28px;
}

.seo-pie { width: min(100%, 320px); aspect-ratio: 1; border-radius: 50% }

/* Severity tally — doubles as the pie legend, so colors match the segments. */
.seo-tally {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}

.seo-tally em { font-style: normal; font-size: 14px; color: var(--moss) }

.seo-tally li {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 500; letter-spacing: -.02em;
}

.seo-badge {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  padding: 4px 8px; border-radius: 4px; color: var(--bone);
}

.seo-badge.seo-critical { background: #c94942 }
.seo-badge.seo-warning { background: #f4c20d; color: var(--ink) }
.seo-badge.seo-notice { background: #8a928d; color: var(--ink) }

/* Findings — one paper card, same sheet as the home-page steps/tiers:
   hairline ink edge, hard shadow, square corners, a hair off true. */
.seo-findings {
  margin: 48px 0; padding: 32px;
  background: var(--bone); border: 1px solid var(--ink); border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-.3deg);
}

/* Redacted teaser above the gate: three short checklist-style rows, each a
   little more blurred, fading out under the gate. Placeholders, not findings. */
/* Negative margin + matching padding widen the masked box so the blur can
   bleed past the content edge instead of being clipped sharp. */
.seo-preview {
  list-style: none; margin: -8px -14px 0; padding: 8px 14px 0;
  user-select: none; pointer-events: none;
  mask-image: linear-gradient(#000 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(#000 20%, transparent 100%);
}

.seo-preview li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--fog);
  font-size: 16px;
}

/* Empty checkbox, same shape the mega checklist ships with. */
.seo-preview li::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 1.5px solid var(--moss); border-radius: 3px;
}

.seo-preview li:nth-child(1) { filter: blur(1.5px) }
.seo-preview li:nth-child(2) { filter: blur(3px) }
.seo-preview li:nth-child(3) { filter: blur(4.5px) }

/* Email gate — rises over the fading teaser and turns the card's bottom half
   Pine: the page's one dark block, so the ask is the loudest thing on it.
   Negative margins bleed it to the card edges; they mirror .seo-findings
   padding, including the mobile override below. */
.seo-gate {
  margin: -30px -32px -32px; padding: 28px 32px 32px;
  position: relative; background: var(--pine); color: var(--bone);
}

@media (max-width: 640px) {
  .seo-findings { padding: 24px 20px }
  .seo-gate { margin: -30px -20px -24px; padding: 22px 20px 24px }
  .seo-gate-count { font-size: 26px }
  .seo-gate-list li { font-size: 15px }
}

.seo-gate-eyebrow {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--fog);
}

.seo-gate-count {
  font-size: clamp(28px, 5vw, 36px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.15; margin-top: 10px;
}

/* The count is the gate's key number: Bone type, gold underline. */
.seo-gate-number {
  text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 4px; text-underline-offset: 7px;
}

.seo-gate input { background: var(--bone) }
.seo-gate input:focus { outline-color: var(--gold); border-color: var(--gold) }

/* Same gold-dash bullet as the home-page tiers. */
.seo-gate-list { list-style: none; margin: 14px 0 0; padding: 0 }

.seo-gate-list li {
  position: relative; padding-left: 22px; margin-top: 6px;
  font-size: 17px; line-height: 1.5; color: var(--fog);
}

.seo-gate-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 2px; background: var(--gold);
}

/* Comparison */
.seo-compare, .seo-compare-form { padding: 40px 0; border-top: 1px solid var(--fog) }
.seo-compare-row { display: flex; gap: 24px; flex-wrap: wrap }

.seo-compare-row div {
  flex: 1 1 160px; padding: 24px; border: 1px solid var(--fog); border-radius: 8px;
}

.seo-compare-row b { display: block; font-size: 44px; font-weight: 500; letter-spacing: -.02em }
.seo-compare-row span { font-size: 14px; color: var(--moss); word-break: break-word }

/* Outro — no card, just air: the pitch breathes on the page after the gate. */
.seo-outro { text-align: center; padding: 112px 0 48px }

.seo-outro .seo-sub { margin: 16px auto 28px }
.seo-outro .seo-note { margin-top: 16px }

.seo-share {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--fog); border-radius: 6px;
  background: transparent; font: 600 14px var(--sans); color: var(--ink); cursor: pointer;
}

.seo-share:hover { border-color: var(--ink) }

.seo-failed, .seo-thanks { text-align: center; padding-top: 40px }
.seo-failed .seo-eyebrow, .seo-thanks .seo-eyebrow { justify-content: center }
.seo-failed .seo-sub, .seo-thanks .seo-sub { margin: 0 auto 32px }
.seo-failed .seo-cta { margin-top: 24px }
.seo-thanks .seo-note a { color: var(--moss) }