/* ============================================================
   SEOLens

   Layout only. Not one colour, font or radius is invented here:
   every value comes from the theme through a CSS variable, with a
   fallback for themes that define none. On a site whose theme sets
   --blue and --radius the plugin simply looks like the rest of it,
   and there is no second layer of styling to keep in step.
   ============================================================ */

/* The scan app and the page around it share one set of tokens. */
.seolens,
.seolens-page {
  --sl-ink:      var(--dark, #212934);
  --sl-body:     var(--body, #444c5a);
  --sl-muted:    var(--muted, #8a8f9a);
  --sl-accent:   var(--blue, #0057ff);
  --sl-accent-lt:var(--blue-lt, rgba(0, 87, 255, 0.08));
  --sl-surface:  var(--white, #ffffff);
  --sl-sunken:   var(--bg, #f9f9fb);
  --sl-line:     var(--border, #e2e2e2);
  --sl-radius:   var(--radius, 14px);
  --sl-radius-lg:var(--radius-lg, 20px);
  --sl-pill:     var(--radius-pill, 100px);
  --sl-good:     var(--price, #0f9d58);
  --sl-warn:     #d98324;
  --sl-bad:      var(--price-was, #b4534b);

  color: var(--sl-body);
}

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

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

.seolens-hero {
  background: var(--bg2, #f1f6ff);
  padding: 150px 40px 72px;
  text-align: center;
}
.seolens-hero-inner { max-width: 960px; margin: 0 auto; }

.seolens-eyebrow {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--sl-accent);
}
.seolens-headline {
  max-width: 800px; margin: 0 auto 28px;
  font-size: clamp(32px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -1px;
  color: var(--sl-ink);
}
.seolens-gradient {
  background: linear-gradient(90deg, var(--purple, #4a00e0), var(--sl-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.seolens-hero--closed { min-height: 60vh; display: grid; align-content: center; }
.seolens-admin-note {
  margin: 0 auto 24px; padding: 12px 20px; max-width: 760px;
  border-radius: var(--sl-radius);
  background: #fff3e0; color: #7a4a00; font-size: 14px; font-weight: 600;
}
.seolens-hero-sub {
  max-width: 640px; margin: 28px auto 0;
  font-size: 17px; line-height: 1.7; color: var(--sl-body);
}
.seolens-hero-sub p { margin: 0 0 12px; }
.seolens-hero-sub p:last-child { margin-bottom: 0; }

/* ── The form ─────────────────────────────────────────────── */

.seolens-form {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  max-width: 640px; margin: 0 auto;
}
.seolens-label { display: block; }

.seolens-field {
  flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center;
  padding: 0 8px 0 22px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: var(--sl-pill);
  transition: border-color .25s, box-shadow .25s;
}
.seolens-field:focus-within {
  border-color: var(--sl-accent);
  box-shadow: 0 0 0 4px var(--sl-accent-lt);
}
.seolens-prefix { color: var(--sl-muted); font-size: 15px; }
.seolens-input {
  flex: 1; min-width: 0;
  padding: 17px 10px;
  background: transparent; color: var(--sl-ink);
  border: none; outline: none;
  font: inherit; font-size: 16px;
}
.seolens-submit { flex: none; }
.seolens-submit[disabled] { opacity: .55; cursor: progress; transform: none; box-shadow: none; }

.seolens-note { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; color: var(--sl-muted); }

.seolens-error {
  flex-basis: 100%;
  margin: 6px 0 0; padding: 12px 16px; text-align: left;
  border: 1px solid var(--sl-line); border-left: 4px solid var(--sl-bad);
  border-radius: var(--sl-radius);
  background: var(--sl-surface); color: var(--sl-ink);
  font-size: 15px;
}

/* ── The offer, when the free scans are spent ─────────────── */

.seolens-offer {
  position: relative;
  max-width: 640px; margin: 28px auto 0; padding: 32px 34px 28px;
  text-align: left;
  background: var(--sl-surface);
  border: 2px solid var(--sl-accent); border-radius: var(--sl-radius-lg);
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 87, 255, .10));
}
.seolens-offer-badge {
  position: absolute; top: -13px; left: 30px;
  padding: 6px 14px; border-radius: var(--sl-pill);
  background: var(--sl-accent); color: var(--sl-surface);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.seolens-offer-title { margin: 0 0 10px; font-size: 22px; color: var(--sl-ink); }
.seolens-offer-text { margin: 0 0 16px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.seolens-offer-list { margin: 0 0 22px; padding: 0; list-style: none; }
.seolens-offer-list li { position: relative; margin-bottom: 9px; padding-left: 28px; font-size: 15px; line-height: 1.55; }
.seolens-offer-list li::before {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 6px; height: 11px;
  border: solid var(--sl-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.seolens-offer-button { display: inline-flex; }
.seolens-offer-note { margin: 14px 0 0; font-size: 13.5px; color: var(--sl-muted); }

@media (max-width: 600px) {
  .seolens-offer { padding: 26px 20px 22px; }
  .seolens-offer-button { width: 100%; justify-content: center; }
}

.seolens-unlock-button {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 6px; padding: 15px 32px;
  background: var(--sl-accent); color: var(--sl-surface);
  border: none; border-radius: var(--sl-pill);
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none;
  cursor: pointer;
  transition: filter .2s, transform .2s;
}
.seolens-unlock-button:hover { filter: brightness(.92); transform: translateY(-1px); color: var(--sl-surface); }

/* ── Progress ─────────────────────────────────────────────── */

.seolens-progress { max-width: 640px; margin: 32px auto 0; text-align: center; }

.seolens-spinner {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border: 3px solid var(--sl-accent-lt);
  border-top-color: var(--sl-accent);
  border-radius: 50%;
  animation: seolens-spin 900ms linear infinite;
}
@keyframes seolens-spin { to { transform: rotate(360deg); } }

.seolens-progress-text { margin: 0 0 16px; color: var(--sl-ink); font-weight: 600; }

.seolens-steps {
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.seolens-steps li {
  padding: 6px 14px; border-radius: var(--sl-pill);
  background: var(--sl-sunken); color: var(--sl-muted);
  font-size: 13px; font-weight: 600;
}
.seolens-steps li[data-state="active"] { background: var(--sl-accent-lt); color: var(--sl-accent); }
.seolens-steps li[data-state="done"]   { background: var(--sl-sunken); color: var(--sl-good); }

/* A spinner that never stops is the wrong signal for someone who cannot see
   it; the text beside it carries the state for a screen reader. */
@media (prefers-reduced-motion: reduce) {
  .seolens-spinner { animation-duration: 3s; }
}

/* ── Score ────────────────────────────────────────────────── */

.seolens-result { margin-top: 40px; text-align: left; }

.seolens-score {
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px 40px;
  padding: 32px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg);
}

/* The strip above the dial: what is wrong, before the number that averages
   it away. It spans the card, so the dial and the bars sit below it. */
.seolens-score-top {
  flex: 1 0 100%;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 16px;
  margin: -8px 0 -12px; padding-bottom: 16px;
  border-bottom: 1px solid var(--sl-line);
}
.seolens-score-title {
  margin: 0; font-size: 17px; color: var(--sl-ink);
}
.seolens-score-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seolens-flag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: var(--sl-pill);
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--sl-surface); background: var(--sl-muted);
}
.seolens-flag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .65;
}
.seolens-flag[data-status="critical"] { background: #8f342c; }
.seolens-flag[data-status="fail"] { background: var(--sl-bad); }
.seolens-flag[data-status="warn"] { background: var(--sl-warn); }
.seolens-flag[data-status="pass"] { background: var(--sl-good); }
a.seolens-flag:hover { filter: brightness(1.08); }

.seolens-score-dial {
  position: relative;
  width: 168px; height: 168px; flex: none;
  border-radius: 50%;
  /* The sweep is set from script as --sl-sweep; the tone class picks the hue. */
  background: conic-gradient(var(--sl-tone, var(--sl-accent)) calc(var(--sl-sweep, 0) * 1%), var(--sl-sunken) 0);
}
.seolens-score-dial::after {
  content: ""; position: absolute; inset: 14px;
  background: var(--sl-surface); border-radius: 50%;
}
/* Number and grade are one block, centred in the ring as a pair. */
.seolens-score-dial-inner {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.seolens-score-value { font-size: 48px; font-weight: 800; line-height: 1; color: var(--sl-ink); }
.seolens-score-grade {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sl-muted);
}

.seolens-score-dial[data-tone="good"] { --sl-tone: var(--sl-good); }
.seolens-score-dial[data-tone="ok"]   { --sl-tone: var(--sl-warn); }
.seolens-score-dial[data-tone="bad"]  { --sl-tone: var(--sl-bad); }

.seolens-score-meta { flex: 1 1 280px; min-width: 0; }
.seolens-score-host { margin: 0 0 6px; overflow-wrap: anywhere; }
.seolens-score-caption { margin: 0; color: var(--sl-muted); font-size: 15px; }
.seolens-score-caption:empty { display: none; }

/* The areas the score is made of, one bar each. */
.seolens-score-bars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 32px;
  margin-top: 18px;
}
.seolens-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; font-size: 14px; }
.seolens-bar-label { color: var(--sl-ink); font-weight: 500; }
.seolens-bar-value { font-weight: 700; color: var(--sl-ink); white-space: nowrap; }
.seolens-bar-track { height: 8px; border-radius: var(--sl-pill); background: var(--sl-sunken); overflow: hidden; }
.seolens-bar-fill { height: 100%; border-radius: var(--sl-pill); background: var(--sl-tone, var(--sl-accent)); transition: width .6s ease; }
.seolens-bar.is-pending .seolens-bar-value { color: var(--sl-accent); animation: seolens-pulse 1.6s ease-in-out infinite; }
.seolens-bar.is-pending .seolens-bar-track { background: var(--sl-accent-lt); }

/* ── The page at a glance ─────────────────────────────────── */

.seolens-page-grid { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 28px; align-items: start; }
.seolens-page-shot {
  aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius);
  background: var(--sl-sunken);
}
.seolens-page-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.seolens-page-shot.is-empty { display: grid; place-items: center; color: var(--sl-muted); font-size: 14px; }
.seolens-page-facts { min-width: 0; }
.seolens-page-line { margin-bottom: 14px; }
.seolens-page-key { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; color: var(--sl-accent); }
.seolens-page-val { display: block; font-size: 15px; color: var(--sl-ink); overflow-wrap: anywhere; }
.seolens-page-val.is-muted { color: var(--sl-muted); font-style: italic; }
.seolens-page-url { color: var(--sl-accent); text-decoration: none; }
.seolens-page-url:hover { text-decoration: underline; }
.seolens-page-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 24px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--sl-line);
}
.seolens-page-stat .seolens-page-val { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.seolens-badge {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 700; color: #ffffff;
}
.seolens-badge.is-good { background: var(--sl-good); }
.seolens-badge.is-bad { background: var(--sl-bad); }

@media (max-width: 700px) {
  .seolens-page-grid { grid-template-columns: 1fr; }
  .seolens-page-shot { max-width: 320px; }
}

/* ── The locked part ──────────────────────────────────────── */

.seolens-locked { position: relative; margin-top: 24px; }

/* Placeholder bars, not hidden content. There is nothing behind the blur. */
.seolens-skeleton {
  display: grid; gap: 26px;
  padding: 28px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg);
  filter: blur(5px);
  user-select: none; pointer-events: none;
}
.seolens-skeleton-group { display: grid; gap: 12px; }
.seolens-skeleton-title,
.seolens-skeleton-row {
  display: block; height: 12px; border-radius: var(--sl-pill);
  background: var(--sl-sunken);
}
.seolens-skeleton-title { height: 18px; width: 42%; background: var(--sl-accent-lt); }
.seolens-skeleton-row:nth-child(2) { width: 96%; }
.seolens-skeleton-row:nth-child(3) { width: 88%; }
.seolens-skeleton-row:nth-child(4) { width: 92%; }
.seolens-skeleton-row:nth-child(5) { width: 74%; }

/* The offer that used to sit over the blur now lives in the score card. What
   is left here is the blur itself: the shape of a report, with nothing behind
   it to uncover. */

@media (max-width: 600px) {
  .seolens-hero { padding: 120px 20px 56px; }
  .seolens-form { flex-direction: column; }
  /* Stacked, the flex basis would be read as a height and leave a field three
     hundred pixels tall. The field is as tall as its contents here. */
  .seolens-field { flex: 0 0 auto; width: 100%; }
  .seolens-submit { width: 100%; }
  .seolens-score { gap: 20px; padding: 20px; justify-content: center; }
  .seolens-score-dial { width: 136px; height: 136px; }
  .seolens-score-value { font-size: 38px; }
  .seolens-score-meta { text-align: center; }
  .seolens-score-bars { text-align: left; }
}

/* ── The report ───────────────────────────────────────────── */

.seolens-report { display: grid; gap: 28px; margin-top: 28px; }

.seolens-section {
  padding: 28px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg);
}
.seolens-section-title { margin: 0 0 18px; font-size: 22px; }
.seolens-sub { margin: 26px 0 12px; font-size: 17px; }
.seolens-lead { font-size: 17px; line-height: 1.6; color: var(--sl-ink); }
.seolens-verdict { padding: 14px 18px; border-left: 4px solid var(--sl-accent); background: var(--sl-sunken); border-radius: 0 var(--sl-radius) var(--sl-radius) 0; }

.seolens-writing { text-align: center; }
.seolens-writing .seolens-progress-text { margin: 0; }

/* Parts of the report still waiting on the speed measurement. They keep their
   final size and place; only their colour says they are not in yet. */
.seolens-section.is-pending .seolens-section-title { color: var(--sl-muted); }
.seolens-vitals-pending {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 92px; padding: 14px;
  border: 1px dashed var(--sl-line); border-radius: var(--sl-radius);
  color: var(--sl-muted); font-size: 15px;
}
.seolens-pending-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--sl-accent);
  animation: seolens-pulse 1.2s ease-in-out infinite;
}
@keyframes seolens-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.seolens-factor.is-pending .seolens-factor-count {
  background: var(--sl-accent-lt); color: var(--sl-accent);
  animation: seolens-pulse 1.6s ease-in-out infinite;
}
.seolens-factor.is-pending .seolens-factor-label,
.seolens-factor.is-pending .seolens-factor-detail { color: var(--sl-muted); }
.seolens-test-pending { color: var(--sl-accent); font-weight: 600; }
.seolens-writing .seolens-section-title { text-align: left; }

/* Tones shared by every card: the same three hues as the dial. */
.seolens [data-tone="good"] { --sl-tone: var(--sl-good); }
.seolens [data-tone="ok"]   { --sl-tone: var(--sl-warn); }
.seolens [data-tone="bad"]  { --sl-tone: var(--sl-bad); }
.seolens [data-tone="unknown"] { --sl-tone: var(--sl-muted); }

/* Core Web Vitals */
.seolens-vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.seolens-vital {
  display: grid; gap: 4px; padding: 14px;
  border: 1px solid var(--sl-line); border-top: 3px solid var(--sl-tone, var(--sl-line));
  border-radius: var(--sl-radius); background: var(--sl-sunken);
}
.seolens-vital-key { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--sl-muted); }
.seolens-vital-value { font-size: 20px; font-weight: 800; color: var(--sl-ink); }

/* The to-do list: worst first, with what each item is worth. */
.seolens-section-hint { margin: -6px 0 16px; font-size: 14px; color: var(--sl-muted); }
.seolens-todo-wrap { overflow-x: auto; }
.seolens-todo { width: 100%; border-collapse: collapse; font-size: 15px; }
.seolens-todo th {
  text-align: left; padding: 0 12px 8px 0; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sl-muted);
  border-bottom: 1px solid var(--sl-line); white-space: nowrap;
}
.seolens-todo td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--sl-line); vertical-align: top; }
.seolens-todo tr:last-child td { border-bottom: 0; }
.seolens-todo-narrow { width: 1%; white-space: nowrap; }
.seolens-todo-task { padding-left: 14px !important; position: relative; }
.seolens-todo-task::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sl-warn);
}
.seolens-todo tr[data-status="fail"] .seolens-todo-task::before { background: var(--sl-bad); }
.seolens-todo-task strong { display: block; color: var(--sl-ink); }
.seolens-todo-why { display: block; margin-top: 2px; font-size: 14px; color: var(--sl-muted); }
.seolens-todo-gain { font-weight: 700; color: var(--sl-ink); }
.seolens-todo-jump { color: var(--sl-accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.seolens-todo-jump:hover { text-decoration: underline; }
.seolens-chip {
  display: inline-block; padding: 2px 10px; border-radius: var(--sl-pill);
  font-size: 12px; font-weight: 700; color: var(--sl-surface); background: var(--sl-warn);
}
.seolens-chip[data-status="fail"] { background: var(--sl-bad); }

/* An area inside the findings card: a chapter, not a box. One card holds the
   whole section, so every heading has its own content around it and nothing is
   framed twice - the nesting that cost 40px on every line.

   The padding reset is not cosmetic. The theme gives every <section> a
   100px/40px frame for a landing page, and this element is a section by
   meaning rather than by layout: inherited, that frame pushed the contents
   40px inwards and opened a 100px hole above each heading. */
.seolens-group { padding: 0; margin-top: 38px; }
.seolens-group:first-of-type { margin-top: 22px; }
.seolens-group-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 16px; padding: 0 0 10px;
  border-bottom: 2px solid var(--sl-line);
}
.seolens-group-label { margin: 0; font-size: 19px; }
.seolens-group-score { display: flex; align-items: center; gap: 10px; flex: none; }
.seolens-group-track {
  width: 54px; height: 9px; border-radius: var(--sl-pill);
  background: var(--sl-sunken); overflow: hidden; display: block;
}
.seolens-group-fill { display: block; height: 100%; background: var(--sl-tone, var(--sl-muted)); }
.seolens-group-number { font-size: 19px; font-weight: 800; color: var(--sl-ink); }
/* Its own line under the title, still part of the heading it describes. */
.seolens-group-blurb { flex: 1 0 100%; margin: 0; font-size: 14px; color: var(--sl-muted); }

/* One check: a row under its area heading. The verdict is carried by the
   stripe down the left edge, which is where it already lived, so the row needs
   no border and no surface of its own. */
.seolens-factor {
  position: relative; padding: 18px 0 18px 18px;
}
.seolens-factor + .seolens-factor { border-top: 1px solid var(--sl-line); }
.seolens-factor::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 2px; background: var(--sl-muted);
}
.seolens-factor[data-status="pass"]::before { background: var(--sl-good); }
.seolens-factor[data-status="warn"]::before { background: var(--sl-warn); }
.seolens-factor[data-status="fail"]::before { background: var(--sl-bad); }
.seolens-factor[data-status="info"]::before,
.seolens-factor[data-status="not_measured"]::before { background: var(--sl-line); }
.seolens-factor[data-status="pending"]::before { background: var(--sl-accent); }

.seolens-factor-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 16px;
}
.seolens-factor-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.seolens-factor-label { margin: 0; font-size: 16px; color: var(--sl-ink); }
.seolens-factor-meta { display: flex; align-items: center; gap: 18px; flex: none; }
.seolens-factor-count {
  min-width: 44px; padding: 2px 8px; text-align: center;
  border-radius: var(--sl-pill); background: var(--sl-sunken);
  font-size: 14px; font-weight: 700; color: var(--sl-ink);
}
.seolens-factor-count-empty { font-size: 12px; font-weight: 600; color: var(--sl-muted); }

/* How much the check is worth, on the same three-step scale throughout. */
.seolens-weight { display: flex; align-items: center; gap: 8px; }
.seolens-weight-bars { display: flex; flex-direction: column-reverse; gap: 2px; }
.seolens-weight-bar { width: 16px; height: 3px; border-radius: 1px; background: var(--sl-accent); }
.seolens-weight-bar.is-off { background: var(--sl-line); }
.seolens-weight-label { font-size: 13px; font-weight: 600; color: var(--sl-muted); white-space: nowrap; }

/* The measurement itself, before any judgement about it. */
.seolens-factor-value {
  margin: 12px 0 0; padding: 8px 12px; border-radius: 8px;
  background: var(--sl-sunken); font-size: 14px; color: var(--sl-ink);
  overflow-wrap: anywhere;
}

/* The individual assertions behind the verdict. */
.seolens-tests { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.seolens-test {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 10px; border-radius: 8px; font-size: 14px;
  border: 1px solid transparent; background: var(--sl-sunken);
}
.seolens-test-mark {
  flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  background: var(--sl-line); position: relative;
}
.seolens-test-mark::after {
  content: ""; position: absolute; inset: 0;
  background: center / 11px 11px no-repeat;
}
.seolens-test[data-status="pass"] .seolens-test-mark { background: var(--sl-good); }
.seolens-test[data-status="pass"] .seolens-test-mark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.seolens-test[data-status="warn"] { background: rgba(217, 131, 36, .1); border-color: rgba(217, 131, 36, .35); }
.seolens-test[data-status="warn"] .seolens-test-mark { background: var(--sl-warn); }
.seolens-test[data-status="warn"] .seolens-test-mark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 7h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E");
}
.seolens-test[data-status="fail"] { background: rgba(180, 83, 75, .1); border-color: rgba(180, 83, 75, .35); }
.seolens-test[data-status="fail"] .seolens-test-mark { background: var(--sl-bad); }
.seolens-test[data-status="fail"] .seolens-test-mark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.7 7.7 16.3 6.3 12 10.6 7.7 6.3 6.3 7.7 10.6 12l-4.3 4.3 1.4 1.4L12 13.4l4.3 4.3 1.4-1.4L13.4 12z'/%3E%3C/svg%3E");
}
.seolens-test[data-status="info"] { background: transparent; }
.seolens-test[data-status="info"] .seolens-test-mark { background: var(--sl-line); }
.seolens-test-text { min-width: 0; overflow-wrap: anywhere; }

.seolens-factor-detail { margin: 12px 0 0; font-size: 14px; }
.seolens-factor-note { margin: 8px 0 0; font-size: 13px; color: var(--sl-muted); }

/* Commentary */
.seolens-priorities { margin: 0; padding-left: 22px; display: grid; gap: 18px; }
.seolens-priority-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.seolens-tag { padding: 2px 10px; border-radius: var(--sl-pill); background: var(--sl-accent-lt); color: var(--sl-accent); font-size: 12px; font-weight: 700; }
.seolens-priority p { margin: 6px 0 0; font-size: 15px; }
.seolens-plain { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.seolens-plain p { margin: 4px 0 0; font-size: 14px; }
.seolens-outcome { color: var(--sl-muted); }
.seolens-roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.seolens-month { padding: 18px; background: var(--sl-sunken); border-radius: var(--sl-radius); }
.seolens-month-title { margin: 0 0 4px; font-size: 15px; }
.seolens-month-focus { margin: 0 0 12px; font-size: 14px; color: var(--sl-muted); }

@media (max-width: 600px) {
  .seolens-section { padding: 20px; }
  .seolens-factor { padding: 16px 0 16px 14px; }
  /* On a phone the importance label costs more room than it earns; the bars
     still carry the ranking. */
  .seolens-weight-label { display: none; }
  .seolens-factor-meta { gap: 12px; }
}

/* The written assessment: the one part of the report a list cannot be. */
.seolens-block--advice .seolens-card { border-color: var(--sl-border2, var(--sl-line)); }
.seolens-block-sub {
  max-width: 62ch; margin: 12px 0 0;
  font-size: 16px; color: var(--sl-body);
}
.seolens-block-note {
  max-width: 74ch; margin: 24px auto 0;
  font-size: 14px; line-height: 1.65; color: var(--sl-muted); text-align: center;
}

/* ── The case for the report ──────────────────────────────── */

.seolens-block { padding: 84px 40px; }
.seolens-block > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.seolens-block--alt { background: var(--sl-sunken); }
/* The heading column is narrowed on its contents rather than on itself. The
   theme widens every direct child of a section to 1200px with a selector
   carrying five classes, which no plain class here can outrank; the label, the
   heading and the lead are a level deeper, where that rule does not reach. All
   three then start at the same left edge, which is the point of the block. */
.seolens-block-head { margin-bottom: 44px; }
.seolens-block-head > * { max-width: 720px; }
.seolens-block-head .section-title { margin-bottom: 0; }

.seolens-cards {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.seolens-card {
  padding: 30px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius);
}
.seolens-card-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 18px;
  border-radius: 10px;
  background: var(--sl-accent-lt); color: var(--sl-accent);
  font-weight: 800;
}
.seolens-card h3 { margin: 0 0 10px; font-size: 19px; }
.seolens-card p { margin: 0; font-size: 15px; line-height: 1.7; }

.seolens-tiers {
  display: grid; gap: 24px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.seolens-tier {
  position: relative; padding: 34px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius-lg);
}
.seolens-tier--featured { border: 2px solid var(--sl-accent); box-shadow: var(--shadow, 0 8px 32px rgba(0, 87, 255, .10)); }
.seolens-tier-badge {
  position: absolute; top: -13px; left: 34px;
  padding: 6px 14px; border-radius: var(--sl-pill);
  background: var(--sl-accent); color: var(--sl-surface);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.seolens-tier h3 { margin: 0 0 6px; font-size: 21px; }
.seolens-tier-price { margin: 0 0 22px; font-size: 38px; font-weight: 800; color: var(--sl-ink); }
.seolens-tier-price .woocommerce-Price-amount { color: var(--sl-ink); }
.seolens-tier-price del { margin-right: 10px; font-size: 18px; font-weight: 500; color: var(--sl-bad); }
.seolens-tier-price ins { text-decoration: none; }
.seolens-tier-price > span:last-child { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--sl-muted); }
.seolens-tier-list { margin: 0 0 20px; padding: 0; list-style: none; }
.seolens-tier-list li {
  position: relative; margin-bottom: 11px; padding-left: 28px;
  font-size: 15px; line-height: 1.6;
}
.seolens-tier-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 11px;
  border: solid var(--sl-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.seolens-tier-note { margin: 0; font-size: 13.5px; color: var(--sl-muted); }

@media (max-width: 600px) {
  .seolens-block { padding: 60px 20px; }
  .seolens-tier { padding: 26px 22px; }
}

/* ── The invitation to get help ───────────────────────────── */

.seolens-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  padding: 30px 34px;
  border-radius: var(--sl-radius-lg);
  background: linear-gradient(135deg, var(--purple, #4a00e0), var(--sl-accent));
  color: #ffffff;
}
.seolens-cta-body { flex: 1 1 380px; min-width: 0; }
.seolens-cta-title { margin: 0 0 8px; font-size: 22px; color: #ffffff; }
.seolens-cta-text { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .9); }
.seolens-cta-button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 14px 28px;
  background: #ffffff; color: var(--sl-accent);
  border-radius: var(--sl-pill);
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}
.seolens-cta-button:hover { color: var(--sl-accent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }

@media (max-width: 600px) {
  .seolens-cta { padding: 24px 20px; }
  .seolens-cta-button { width: 100%; }
}

/* ── The report button on the order pages ─────────────────── */

.seolens-order-report {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin: 0 0 28px; padding: 20px 24px;
  border: 1px solid var(--border2, rgba(0, 87, 255, .15)); border-radius: var(--radius, 14px);
  background: var(--bg2, #f1f6ff);
}
.seolens-order-report-text { margin: 0 !important; font-weight: 600; color: var(--dark, #212934); }
.seolens-order-report-button.button { white-space: nowrap; }

/* ── Sharing ──────────────────────────────────────────────── */

.seolens-share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 20px 24px;
  background: var(--sl-sunken);
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius);
}
.seolens-share-head { flex: 1 1 260px; min-width: 0; }
.seolens-share-label { display: block; font-weight: 700; color: var(--sl-ink); }
.seolens-share-hint { display: block; margin-top: 2px; font-size: 13px; color: var(--sl-muted); }
.seolens-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.seolens-share-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  background: var(--sl-surface); color: var(--sl-ink);
  border: 1px solid var(--sl-line); border-radius: var(--sl-pill);
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.seolens-share-button:hover { border-color: var(--sl-accent); color: var(--sl-accent); }
.seolens-share-button--whatsapp:hover { border-color: #25d366; color: #128c4a; }
.seolens-share-button--pdf { background: var(--sl-accent); border-color: var(--sl-accent); color: var(--sl-surface); }
.seolens-share-button--pdf:hover { color: var(--sl-surface); filter: brightness(.92); }
.seolens-share-button.is-copied { border-color: var(--sl-good); color: var(--sl-good); }

.seolens-score-date { margin: 0 0 6px; font-size: 14px; color: var(--sl-muted); }
.seolens-score-date:empty { display: none; }

.seolens-print-mark { display: none; }

@media (max-width: 600px) {
  .seolens-share { padding: 18px 16px; }
  .seolens-share-buttons { width: 100%; }
  .seolens-share-button { flex: 1 1 calc(50% - 8px); }
}

/* ── On paper, or in the PDF a browser makes of it ────────── */

@media print {
  /* Everything that exists to get you to the report, rather than being it. */
  .seolens-form,
  .seolens-progress,
  .seolens-offer,
  .seolens-locked,
  .seolens-share,
  .seolens-cta,
  .seolens-admin-note,
  .seolens-block,
  .seolens-eyebrow,
  .seolens-headline,
  .seolens-hero-sub { display: none !important; }

  /* The colours are the meaning here: the dial says the score, the pills say
     pass or fail, the bars say which area is weak. A browser leaves every
     background out of a printed page unless it is asked, so it is asked. */
  .seolens-page,
  .seolens-page * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The band behind the report is the page's own ground, not part of the
     report; on paper the paper is the ground. The cards keep their colours. */
  .seolens-hero { padding: 0; background: none; }
  .seolens-result { margin-top: 0; }
  .seolens-report { gap: 16px; margin-top: 16px; }

  /* Page breaks that do not cut a card in half. */
  .seolens-section,
  .seolens-score {
    box-shadow: none;
    break-inside: avoid; page-break-inside: avoid;
  }
  .seolens-factor,
  .seolens-priority,
  .seolens-vital,
  .seolens-month,
  .seolens-todo tr { break-inside: avoid; page-break-inside: avoid; }
  .seolens-group-head { break-after: avoid; page-break-after: avoid; }
  .seolens-todo-jump { display: none; }
  .seolens-section-title { break-after: avoid; page-break-after: avoid; }

  .seolens-page-shot { max-width: 180px; }
  .seolens-score-dial { width: 120px; height: 120px; }
  .seolens-score-value { font-size: 34px; }

  .seolens-print-mark {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 8px; padding-top: 10px; border-top: 1px solid #ddd;
    font-size: 12px; color: #666;
  }

  /* A printed link that says where it goes is useful; one that repeats a
     signed report address is noise. */
  .seolens-report a[href]::after { content: ""; }
}

/* ── The offer, beside the score ──────────────────────────── */

/* Under the button, not beside it: the reader has already decided to look at
   the price, and this answers the question that comes next. */
.seolens-pay {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.seolens-pay-marks { display: flex; align-items: center; gap: 6px; }
.seolens-pay-mark {
  display: block; width: 32px; height: 24px;
  border-radius: 4px;
}
.seolens-pay-note { font-size: 13px; color: var(--sl-muted); }

/* Quiet on purpose. It qualifies the number above it, so it has to be read
   before the offer below it without competing with either. */
.seolens-provisional {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--sl-accent-lt);
  border-left: 3px solid var(--sl-accent);
  border-radius: 0 8px 8px 0;
}
.seolens-provisional-title {
  margin: 0 0 4px;
  font-size: 15px; font-weight: 700; color: var(--sl-ink);
}
.seolens-provisional-body { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.seolens-provisional-body:last-child { margin-bottom: 0; }

.seolens-score-cta {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--sl-line);
}
.seolens-score-cta-title { margin: 0 0 6px; font-size: 19px; color: var(--sl-ink); }
.seolens-score-cta-text { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }
.seolens-score-cta .seolens-unlock-button { margin-top: 0; }

/* ── The page under the form: what we check, the score, the questions ── */

/* One short line under the headline. On the English page it carries the
   positioning that the Dutch page carries in the word "gratis". */
.seolens-hero-claim {
  margin: 0 0 22px;
  font-size: 16px; font-weight: 500;
  color: var(--sl-muted);
}

.seolens-areas {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.seolens-area {
  padding: 22px 24px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius);
}
.seolens-area h3 { margin: 0 0 8px; font-size: 17px; color: var(--sl-ink); }
.seolens-area p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.seolens-area-link {
  font-size: 14px; font-weight: 700; color: var(--sl-accent);
  text-decoration: none;
}
.seolens-area-link:hover { text-decoration: underline; }

/* The bands as a row of letters rather than a table: seven rows of two cells
   is a table nobody reads, and the letters are the part being looked up. */
.seolens-grades {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}
.seolens-grade {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 92px; padding: 14px 12px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: 12px;
}
.seolens-grade-letter { font-size: 22px; font-weight: 800; color: var(--sl-ink); }
.seolens-grade-letter[data-grade="A+"],
.seolens-grade-letter[data-grade="A"] { color: var(--sl-good); }
.seolens-grade-letter[data-grade="B"],
.seolens-grade-letter[data-grade="C"] { color: var(--sl-warn); }
.seolens-grade-letter[data-grade="D"],
.seolens-grade-letter[data-grade="E"],
.seolens-grade-letter[data-grade="F"] { color: var(--sl-bad); }
.seolens-grade-range { font-size: 13px; color: var(--sl-muted); }

.seolens-prose { max-width: 720px; margin: 0 auto; }
.seolens-prose p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; }
.seolens-prose p:last-child { margin-bottom: 0; }

.seolens-fixes {
  max-width: 760px; margin: 0 auto; padding: 0;
  list-style: none; counter-reset: seolens-fix;
}
.seolens-fixes li {
  position: relative;
  margin-bottom: 22px; padding-left: 46px;
  counter-increment: seolens-fix;
}
.seolens-fixes li::before {
  content: counter(seolens-fix);
  position: absolute; left: 0; top: 2px;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--sl-accent-lt); color: var(--sl-accent);
  border-radius: 50%;
  font-size: 14px; font-weight: 800;
}
.seolens-fixes h3 { margin: 0 0 6px; font-size: 17px; color: var(--sl-ink); }
.seolens-fixes p { margin: 0; font-size: 15px; line-height: 1.6; }
.seolens-fixes a { color: var(--sl-accent); font-weight: 600; }

.seolens-faq { max-width: 760px; margin: 0 auto; }
.seolens-faq-item {
  padding: 16px 20px; margin-bottom: 10px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: 12px;
}
.seolens-faq-item summary {
  cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 700; color: var(--sl-ink);
}
.seolens-faq-item summary::-webkit-details-marker { display: none; }
.seolens-faq-item summary::after {
  content: "+"; float: right;
  font-size: 20px; font-weight: 400; color: var(--sl-muted); line-height: 1;
}
.seolens-faq-item[open] summary::after { content: "\2212"; }
.seolens-faq-item p { margin: 12px 0 0; font-size: 15px; line-height: 1.7; }

@media (max-width: 600px) {
  .seolens-grade { min-width: 74px; padding: 12px 8px; }
  .seolens-fixes li { padding-left: 40px; }
}

/* ── How the page can look in a result ─────────────────────── */

/* Deliberately not in the report's own typeface. This is a picture of
   somebody else's page, so it borrows that page's fonts and colours; styling
   it like the rest of the report would make it look like our opinion rather
   than their search result. The widths are Google's: 600px for the desktop
   column and 372px for a phone, and the text is clamped by the box rather
   than cut at a character count, so what overflows here overflows there. */
.seolens-serp {
  /* Stacked, not side by side. Two columns inside the report would squeeze
     both to the same width, and the difference between the two widths is
     half of what there is to see here. */
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 22px;
  padding: 20px;
  background: var(--sl-sunken);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
}
.seolens-serp-title {
  grid-column: 1 / -1;
  margin: 0; font-size: 15px; font-weight: 700; color: var(--sl-ink);
}
.seolens-serp-col { min-width: 0; }
.seolens-serp-kind {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--sl-muted);
}
.seolens-serp-card {
  max-width: 600px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--sl-line); border-radius: 10px;
  font-family: arial, sans-serif;
}
.seolens-serp-card[data-kind="mobile"] { max-width: 372px; }

.seolens-serp-site { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.seolens-serp-favicon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid #ecedef; border-radius: 50%;
  overflow: hidden; background: #fff;
}
.seolens-serp-favicon img { width: 18px; height: 18px; object-fit: contain; }
/* No icon of their own: Google draws a plain globe in that circle. */
.seolens-serp-favicon.is-blank::after {
  content: ""; width: 14px; height: 14px;
  border: 1.5px solid #9aa0a6; border-radius: 50%;
}
.seolens-serp-where { min-width: 0; line-height: 1.3; }
.seolens-serp-host { display: block; font-size: 14px; color: #202124; }
.seolens-serp-path {
  display: block; font-size: 12px; color: #4d5156;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.seolens-serp-headline {
  margin: 2px 0 3px;
  font-size: 20px; line-height: 1.3; color: #1a0dab;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden;
}
.seolens-serp-card[data-kind="mobile"] .seolens-serp-headline {
  font-size: 18px; -webkit-line-clamp: 2;
}
.seolens-serp-desc {
  font-size: 14px; line-height: 1.58; color: #4d5156;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.seolens-serp-card[data-kind="mobile"] .seolens-serp-desc { -webkit-line-clamp: 3; }

/* Nothing there to show: say what Google will do instead, in our voice. */
.seolens-serp-headline.is-missing,
.seolens-serp-desc.is-missing {
  color: var(--sl-muted); font-style: italic;
  font-size: 14px; line-height: 1.5;
  -webkit-line-clamp: 3;
}

.seolens-serp-hint {
  grid-column: 1 / -1;
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--sl-muted);
}

@media (max-width: 600px) {
  .seolens-serp { padding: 16px; }
  .seolens-serp-card { padding: 14px; }
}

/* ── Another address ──────────────────────────────────────── */

.seolens-again { margin-top: 28px; text-align: center; }
.seolens-again-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 28px;
  background: transparent; color: var(--sl-accent);
  border: 1px solid var(--sl-accent); border-radius: var(--sl-pill);
  font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.seolens-again-button:hover { background: var(--sl-accent-lt); }

/* Once a result is on screen the page is about that result. Everything that
   exists to explain the scan to someone who has not run one yet steps aside. */
/* The one thing that is read before the score, because it decides what the
   score is worth. Loud on purpose, and worded for both cases: a page kept out
   of search deliberately is not a page with a problem. */
.seolens-alert {
  padding: 22px 26px;
  border: 1px solid rgba(180, 83, 75, .45);
  border-left: 6px solid var(--sl-bad);
  border-radius: var(--sl-radius-lg);
  background: rgba(180, 83, 75, .07);
}
.seolens-alert-title {
  margin: 0 0 10px; font-size: 20px; color: var(--sl-bad);
  display: flex; align-items: center; gap: 10px;
}
.seolens-alert-title::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sl-bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 7h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.seolens-alert p { margin: 0 0 10px; font-size: 15px; }
.seolens-alert p:last-child { margin-bottom: 0; }
.seolens-alert-found {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; color: var(--sl-ink);
  overflow-wrap: anywhere;
}
.seolens-alert-else { font-weight: 600; color: var(--sl-ink); }

@media (max-width: 600px) {
  .seolens-alert { padding: 18px 18px 18px 16px; }
}

/* A result answers the question the hero was asking, so the pitch goes and
   the form stays: an address, and a button that offers the next scan. */
body.seolens-has-result .seolens-block,
body.seolens-has-result .seolens-hero-sub,
body.seolens-has-result .seolens-eyebrow,
body.seolens-has-result .seolens-headline,
body.seolens-has-result .seolens-note { display: none; }
body.seolens-has-result .seolens-hero { padding-top: 118px; padding-bottom: 24px; }
body.seolens-has-result .seolens-form { margin-top: 0; }

@media (max-width: 600px) {
  body.seolens-has-result .seolens-hero { padding-top: 96px; padding-bottom: 16px; }
}

@media print {
  .seolens-score-cta,
  .seolens-provisional,
  .seolens-again { display: none !important; }
}

.seolens-factor-doc {
  font-size: 12px; color: var(--sl-muted); text-decoration: none;
  border-bottom: 1px dotted var(--sl-line); white-space: nowrap;
}
.seolens-factor-doc:hover { color: var(--sl-accent); border-bottom-color: var(--sl-accent); }

@media print {
  .seolens-factor-doc { display: none; }
}

/* ── What is on the page ──────────────────────────────────── */

.seolens-detail { margin-top: 26px; }
.seolens-detail:first-of-type { margin-top: 0; }
.seolens-detail-title { margin: 0 0 12px; font-size: 16px; color: var(--sl-ink); }
.seolens-detail-count {
  display: inline-block; margin-left: 6px; padding: 1px 9px;
  border-radius: var(--sl-pill); background: var(--sl-sunken);
  font-size: 13px; font-weight: 700; color: var(--sl-muted);
}
.seolens-detail-empty { margin: 0; font-size: 14px; color: var(--sl-muted); font-style: italic; }
.seolens-detail-note { margin: 10px 0 0; font-size: 13px; color: var(--sl-muted); }

/* The outline, stepped by level so a skipped one is visible at a glance. */
.seolens-outline { margin: 0; padding: 0; list-style: none; }
.seolens-outline-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--sl-line);
  font-size: 14px;
}
.seolens-outline-item:last-child { border-bottom: 0; }
.seolens-outline-item[data-level="2"] { padding-left: 20px; }
.seolens-outline-item[data-level="3"] { padding-left: 40px; }
.seolens-outline-item[data-level="4"] { padding-left: 60px; }
.seolens-outline-item[data-level="5"] { padding-left: 80px; }
.seolens-outline-item[data-level="6"] { padding-left: 100px; }
.seolens-outline-tag {
  flex: none; min-width: 26px; padding: 1px 6px; text-align: center;
  border-radius: 5px; background: var(--sl-accent-lt); color: var(--sl-accent);
  font-size: 11px; font-weight: 700;
}
.seolens-outline-text { color: var(--sl-ink); overflow-wrap: anywhere; }

/* Word counts, as bars, because the shape is the point. */
.seolens-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.seolens-term-heading { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sl-muted); }
.seolens-term { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; gap: 10px; align-items: center; margin-bottom: 7px; font-size: 14px; }
.seolens-term-word { color: var(--sl-ink); overflow-wrap: anywhere; }
.seolens-term-track { height: 7px; border-radius: var(--sl-pill); background: var(--sl-sunken); overflow: hidden; }
.seolens-term-fill { display: block; height: 100%; border-radius: var(--sl-pill); background: var(--sl-accent); }
.seolens-term-count { font-weight: 700; color: var(--sl-muted); font-size: 13px; }

/* Link and file lists: long, so they scroll on screen and print in full. */
.seolens-links { max-height: 320px; overflow-y: auto; border: 1px solid var(--sl-line); border-radius: var(--sl-radius); }
.seolens-link-row {
  display: grid; grid-template-columns: minmax(120px, 38%) 1fr auto; gap: 12px; align-items: baseline;
  padding: 8px 14px; border-bottom: 1px solid var(--sl-line); font-size: 13.5px;
}
.seolens-link-row:last-child { border-bottom: 0; }
.seolens-link-anchor { color: var(--sl-ink); font-weight: 500; overflow-wrap: anywhere; }
.seolens-link-anchor.is-empty { color: var(--sl-bad); font-style: italic; font-weight: 400; }
.seolens-link-target { color: var(--sl-muted); text-decoration: none; overflow-wrap: anywhere; }
.seolens-link-target:hover { color: var(--sl-accent); }
.seolens-link-target.is-plain { grid-column: 1 / -1; }
.seolens-link-rel { flex: none; padding: 1px 8px; border-radius: var(--sl-pill); background: var(--sl-sunken); font-size: 11px; font-weight: 700; color: var(--sl-muted); }

/* The tags themselves, as found. */
.seolens-meta-table { display: grid; gap: 1px; background: var(--sl-line); border: 1px solid var(--sl-line); border-radius: var(--sl-radius); overflow: hidden; }
.seolens-meta-row { display: grid; grid-template-columns: minmax(130px, 26%) 1fr; gap: 14px; padding: 9px 14px; background: var(--sl-surface); font-size: 13.5px; }
.seolens-meta-key { font-weight: 600; color: var(--sl-ink); }
.seolens-meta-value { color: var(--sl-body); overflow-wrap: anywhere; }
.seolens-meta-value.is-muted { color: var(--sl-muted); font-style: italic; }

@media (max-width: 600px) {
  .seolens-link-row { grid-template-columns: 1fr; gap: 2px; }
  .seolens-meta-row { grid-template-columns: 1fr; gap: 2px; }
  .seolens-term { grid-template-columns: minmax(80px, 45%) 1fr auto; }
}

@media print {
  /* On paper there is no scrolling, so the lists print whole. */
  .seolens-links { max-height: none; overflow: visible; }
  .seolens-link-row,
  .seolens-meta-row,
  .seolens-outline-item { break-inside: avoid; page-break-inside: avoid; }
}