/* ============================================================
   SEO page
============================================================ */

:root { --seo: #8aa2f0; --seo-tint: color-mix(in srgb, #8aa2f0 12%, transparent); }

.nav-links a.active { color: var(--ink); font-weight: 500; }
.nav-links a.active::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); margin-left: 6px; vertical-align: middle; }

.subnav { background: var(--bg-alt); border-bottom: 1px solid var(--line); position: sticky; top: 65px; z-index: 40; }
.subnav-inner { display: flex; align-items: center; gap: 22px; padding: 12px var(--pad-x); overflow-x: auto; }
.subnav-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.subnav-inner a { text-decoration: none; color: var(--muted); font-size: 13.5px; white-space: nowrap; padding: 4px 0; }
.subnav-inner a:hover { color: var(--ink); }
.subnav-inner a.active { color: var(--ink); font-weight: 500; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }

.hero-seo { position: relative; overflow: hidden; }
.seo-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sg-mesh {
  position: absolute; inset: -10%;
  background:
    radial-gradient(40% 36% at 78% 12%, rgba(82,102,235,0.18), transparent 70%),
    radial-gradient(38% 32% at 16% 38%, rgba(110,210,122,0.08), transparent 72%),
    radial-gradient(50% 40% at 92% 80%, rgba(122,142,240,0.10), transparent 70%);
  animation: meshDrift 22s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(1%,-1%,0) scale(1.03); }
}
.sg-grain {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(var(--ink-rgb),0.010) 0 1px, transparent 1px 3px),
              repeating-linear-gradient(90deg, rgba(var(--ink-rgb),0.010) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  opacity: 0.45;
}
.hero-seo .container { position: relative; z-index: 1; }

.kicker.seo { background: var(--seo-tint); border-color: color-mix(in srgb, var(--seo) 28%, transparent); color: #c4d2f4; }
.kicker .dot.seo { background: var(--seo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seo) 25%, transparent); }
.hero-seo .display { font-size: clamp(56px, 8.6vw, 112px); line-height: 0.96; }

/* ============================================================
   HERO SCORE FRAME (before/after)
============================================================ */
.seo-peek { max-width: 1100px; margin: clamp(56px, 6vw, 84px) auto 0; }
.score-frame {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.sf-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.sf-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.score-frame h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }

.sf-cmp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  padding: 32px;
  align-items: center;
}
@media (max-width: 820px){ .sf-cmp { grid-template-columns: 1fr; } .sf-arrow svg { transform: rotate(90deg); } }
.sf-side { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ss-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ss-eyebrow.ok { color: var(--ok); }
.sf-ring { position: relative; width: 130px; height: 130px; }
.sf-ring svg { width: 100%; height: 100%; }
.sf-ring .ring-fill { animation: ringDraw 1.6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes ringDraw {
  0% { stroke-dashoffset: 314; }
  100% { stroke-dashoffset: 22; }
}
.sf-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.03em;
}
.sf-grade {
  position: absolute;
  bottom: -8px; right: 8px;
  background: var(--ok);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.08em;
}
.sf-issues {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  width: 100%;
  max-width: 220px;
}
.sf-issues li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); color: var(--ink-mid); }
.sf-issues li:last-child { border-bottom: none; }

.sf-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sf-arrow svg { width: 60px; height: 12px; color: var(--seo); }
.sf-arrow path { stroke-dashoffset: 0; animation: dashFlow 1.4s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -16; } }
.sf-arrow-lbl { font-size: 11px; color: var(--muted); }

.sf-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 22px 32px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}
@media (max-width: 720px){ .sf-foot { grid-template-columns: 1fr 1fr; } }
.sf-foot > div { display: flex; flex-direction: column; gap: 2px; }
.sf-foot b { font-weight: 500; font-size: 22px; letter-spacing: -0.025em; line-height: 1; }
.sf-foot span { font-size: 11.5px; color: var(--muted); }

/* ============================================================
   STAT STRIP
============================================================ */
.seo-trust { padding: 50px 0 30px; }
.trust-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 4vw, 60px); padding-top: 30px; border-top: 1px solid var(--line); }
@media (max-width: 720px){ .trust-stats { grid-template-columns: 1fr 1fr; gap: 30px; } }
.ts { display: flex; flex-direction: column; gap: 6px; }
.ts b { font-weight: 500; font-size: clamp(32px, 4vw, 50px); letter-spacing: -0.035em; line-height: 1; }
.ts span { font-size: 13px; color: var(--muted); }

/* ============================================================
   PIPELINE
============================================================ */
.pipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px){ .pipe-grid { grid-template-columns: 1fr; } }
.pipe {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.pipe.pipe-2 { background: var(--bg-dark); color: #fff; border-color: var(--line-light); }
.pipe.pipe-2 .p-tag { color: rgba(255,255,255,0.6); }
.pipe.pipe-2 p { color: rgba(255,255,255,0.78); }
.pipe.pipe-2 .po-h { color: rgba(255,255,255,0.55); }
.pipe.pipe-2 .po-row { border-color: rgba(255,255,255,0.10); }
.pipe.pipe-2 .po-l { color: rgba(255,255,255,0.55); }
.pipe.pipe-2 .po-v { color: rgba(255,255,255,0.92); }
.pipe.pipe-2 .p-out { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
.p-i {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--seo-tint);
  color: var(--seo);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pipe.pipe-2 .p-i { background: rgba(255,255,255,0.10); color: #fff; }
.pipe h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; }
.p-tag { margin: 0; font-size: 11.5px; color: var(--muted); }
.pipe > p { margin: 0; font-size: 14.5px; color: var(--ink-mid); line-height: 1.55; }
.p-out {
  margin-top: auto;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.po-h { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.po-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
  align-items: baseline;
}
.po-row:last-child { border-bottom: none; }
.pipe.pipe-3 .po-row { grid-template-columns: 16px 1fr; align-items: center; }
.po-l { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); }
.po-v { color: var(--ink); }

/* ============================================================
   INTERNAL LINK CARD
============================================================ */
.link-card { padding: 26px 26px 22px; width: 100%; max-width: 540px; }
.lc-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.lc-tag { font-family: var(--f-mono); font-size: 11.5px; padding: 4px 10px; background: var(--ink); color: var(--bg); border-radius: 5px; }
.lc-meta { font-size: 11.5px; color: var(--muted); }
.lc-list { display: flex; flex-direction: column; gap: 0; }
.lc-row {
  display: grid;
  grid-template-columns: 1.3fr auto 1.6fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
}
.lc-row:last-child { border-bottom: none; }
.lc-row.dim { color: var(--muted); }
.lc-anchor { color: var(--ink); font-style: italic; font-family: var(--f-serif); font-size: 14px; }
.lc-arr { color: var(--muted); }
.lc-target { color: var(--seo); font-size: 11px; }
.lc-score {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 2px 7px;
  background: rgba(110,210,122,0.14);
  color: var(--ok);
  border-radius: 4px;
}
.lc-foot { display: flex; gap: 8px; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 6px; }

/* ============================================================
   META / SCHEMA / OG (dark)
============================================================ */
.meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 920px){ .meta-grid { grid-template-columns: 1fr; } }
.meta-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mc-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* SERP preview */
.serp { background: var(--bg-card); border-radius: 10px; padding: 14px 16px; color: var(--ink); }
.serp-url { font-size: 11.5px; color: #bdc1c6; margin-bottom: 4px; }
.serp-title { font-size: 18px; color: #8ab4f8; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; line-height: 1.25; }
.serp-desc { font-size: 13px; color: #9aa0a6; line-height: 1.5; }
.serp-meter { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line-light); }
.sm-row { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.85); }

/* schema pre */
.schema {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line-light);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.85);
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  line-height: 1.6;
}

/* OG preview */
.og { background: var(--bg-card); border-radius: 10px; overflow: hidden; }
.og-img { aspect-ratio: 1.91 / 1; position: relative; overflow: hidden; }
.og-img .ai-fill { position: absolute; inset: 0; }
.og-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.glare-wrap { cursor: pointer; }
.glare-wrap:hover img { transform: scale(1.04); }
.glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 65%,
    transparent 100%);
  background-size: 250% 100%;
  background-position: -100% 0;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .25s ease;
}
.glare-wrap:hover .glare {
  opacity: 1;
  animation: glareSlide 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes glareSlide {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
.og-meta { padding: 12px 14px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.og-site { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.og-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.og-desc { font-size: 12px; color: var(--muted); }
.og-tabs { display: flex; gap: 6px; }
.ot { font-family: var(--f-mono); font-size: 11px; padding: 4px 10px; background: rgba(255,255,255,0.05); border-radius: 5px; color: rgba(255,255,255,0.65); }
.ot.on { background: rgba(255,255,255,0.15); color: #fff; }

/* ============================================================
   IMPACT TABLE
============================================================ */
.impact-table { padding: 0; overflow: hidden; }
.imp-row { display: grid; grid-template-columns: 1.4fr 1.3fr 1.3fr 0.8fr; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 14px; }
.imp-row:last-child { border-bottom: none; }
.imp-row > span:first-child { font-weight: 500; }
.imp-row .hl { background: color-mix(in srgb, var(--seo) 10%, transparent); margin: -16px 0; padding: 16px 14px; font-weight: 500; color: var(--seo); }
.imp-row .del { font-family: var(--f-mono); font-size: 12px; color: var(--ok); font-weight: 600; }
.imp-row.imp-head { background: var(--bg-card); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 14px 22px; }
.imp-row.imp-head .hl { background: var(--seo); color: var(--bg); margin: -14px 0; padding: 14px 14px; }
.imp-row.imp-head .del { color: var(--muted); font-weight: 500; }
@media (max-width: 820px){
  .imp-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .imp-row .hl { margin: 0; padding: 6px 10px; border-radius: 5px; }
  .imp-row.imp-head { display: none; }
}
.imp-foot { text-align: center; font-size: 13.5px; color: var(--muted); margin: 28px auto 0; max-width: 720px; line-height: 1.6; }

/* ============================================================
   AUDIT QUEUE CARD
============================================================ */
.audit-card { padding: 0; overflow: hidden; width: 100%; max-width: 560px; }
.ac-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.ac-tag { font-family: var(--f-mono); font-size: 11.5px; padding: 4px 10px; background: var(--ink); color: var(--bg); border-radius: 5px; }
.ac-meta { font-size: 11.5px; color: var(--muted); }
.ac-rows { display: flex; flex-direction: column; }
.ac-row {
  display: grid;
  grid-template-columns: 1.6fr auto 1.4fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.ac-row:last-child { border-bottom: none; }
.ac-page { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink); }
.ac-score { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.ac-score b { font-weight: 600; }
.ac-score.warn b { color: var(--warn); }
.ac-score.err b { color: var(--err); }
.ac-score.ok b { color: var(--ok); }
.ac-issues { color: var(--muted); font-size: 11.5px; }
.ac-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.ac-summary { font-size: 12px; color: var(--muted); }

@media (max-width: 720px){
  .ac-row { grid-template-columns: 1fr auto; }
  .ac-row .ac-score, .ac-row .ac-issues { display: none; }
}

.foot-cols a.on { color: #fff; }

/* ── White mode (html[data-theme="light"]) overrides ── */
/* Restore the original light-theme SEO palette and tints. */
html[data-theme="light"] {
  --seo: #2C5BD6;
  --seo-tint: #E5ECFB;
}
html[data-theme="light"] .kicker.seo { color: #15327A; }
/* Hero background: pastel mesh + multiply grain (dark glows / screen otherwise). */
html[data-theme="light"] .sg-mesh {
  background:
    radial-gradient(40% 36% at 78% 12%, rgba(44,91,214,0.16), transparent 70%),
    radial-gradient(38% 32% at 16% 38%, rgba(110,210,122,0.10), transparent 72%),
    radial-gradient(50% 40% at 92% 80%, rgba(232, 220, 210, 0.40), transparent 70%);
}
html[data-theme="light"] .sg-grain { mix-blend-mode: multiply; }
/* Google SERP mockup: the card is var(--bg-card) (white in light mode),
   so restore the classic light SERP colors instead of the dark-SERP ones. */
html[data-theme="light"] .serp-url { color: var(--muted); }
html[data-theme="light"] .serp-title { color: #1A0DAB; }
html[data-theme="light"] .serp-desc { color: #4D5156; }