/* ============================================================
   FAMOUS REGISTRAR — SEO CONTENT PAGES
   Per-page sheet, loaded only by the 25 SEO pages. Owns:
     1. .seo-layout   article + contents rail
     2. .seo-rail     sticky contents and related links
     3. .seo-art      shared decorative hero SVGs
   Nothing here applies to the rest of the site.
   ============================================================ */

/* ---------- 1. Layout ---------- */

.seo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* 75ch keeps the measure comfortable and still fits the 620px data
   table, so the table no longer needs its own horizontal scroll. */
.seo-layout .prose {
  max-width: 75ch;
}

/* The article column measures 606px at 1440, so the global 620px
   table floor would force a 16px scrollbar for no benefit. */
.seo-layout .data-table {
  min-width: 600px;
}

.seo-rail {
  position: sticky;
  top: calc(var(--header-h) + var(--topbar-h) + var(--sp-6));
}

/* ---------- 2. Contents rail ---------- */

.seo-toc,
.seo-related {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
}

.seo-related {
  margin-top: var(--sp-4);
}

.seo-toc__title {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--slate-500);
}

.seo-toc ul,
.seo-related ul {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.seo-toc a,
.seo-related a {
  display: block;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--slate-600);
}

.seo-toc a:hover,
.seo-toc a:focus-visible,
.seo-related a:hover,
.seo-related a:focus-visible {
  color: var(--brand-700);
  border-left-color: var(--brand-300);
}

.seo-related a {
  font-weight: 600;
}

@media (max-width: 1023px) {
  .seo-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-layout .prose {
    max-width: none;
  }

  .seo-rail {
    position: static;
    order: -1;
  }

  .seo-toc ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-4);
  }
}

@media (max-width: 560px) {
  .seo-toc ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 3. Hero art ---------- */

/* The house art hero aligns the copy to the bottom for cut-out images.
   These pieces are compositions rather than grounded cut-outs, so the
   two columns centre against each other instead. */
.seo-hero .page-hero__inner {
  align-items: center;
}

.seo-art {
  width: 100%;
}

.seo-art svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
}

/* Every animated group moves about the viewBox centre. */
.seo-globe-spin,
.seo-orbit-a,
.seo-orbit-b,
.seo-pulse,
.seo-float-a,
.seo-float-b,
.seo-guide-card {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.seo-globe-spin { animation: seo-spin 52s linear infinite; }
.seo-orbit-a   { animation: seo-spin 38s linear infinite; }
.seo-orbit-b   { animation: seo-spin-rev 46s linear infinite; }
.seo-pulse     { animation: seo-pulse 7s ease-in-out infinite; }

.seo-float-a { animation: seo-bob 9s ease-in-out infinite; }
.seo-float-b { animation: seo-bob 9s ease-in-out infinite; animation-delay: -4.5s; }

.seo-guide-card { animation: seo-bob-small 11s ease-in-out infinite; }

/* The comparison connector draws once, then holds. */
.seo-compare-arc {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: seo-draw 1.4s var(--ease-out) forwards;
}

/* Guide checkmarks draw in sequence, once. */
.seo-guide-check {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: seo-draw 0.6s var(--ease-out) forwards;
}

.seo-check-1 { animation-delay: 0.15s; }
.seo-check-2 { animation-delay: 0.3s; }
.seo-check-3 { animation-delay: 0.45s; }
.seo-check-4 { animation-delay: 0.6s; }

@keyframes seo-spin {
  to { transform: rotate(360deg); }
}

@keyframes seo-spin-rev {
  to { transform: rotate(-360deg); }
}

@keyframes seo-pulse {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%      { opacity: 0.42; transform: scale(1.05); }
}

@keyframes seo-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes seo-bob-small {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes seo-draw {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 900px) {
  .seo-art {
    max-width: 340px;
    margin-inline: auto;
  }
}

/* Belt and braces: base.css already zeroes durations under reduced
   motion, but the art must also stop rotating and land on its final
   drawn state. */
@media (prefers-reduced-motion: reduce) {
  .seo-art *,
  .seo-art *::before,
  .seo-art *::after {
    animation: none !important;
  }

  .seo-compare-arc,
  .seo-guide-check {
    stroke-dashoffset: 0;
  }
}

/* ---------- 4. Art colour hooks ----------
   Colours live here rather than in SVG presentation attributes because
   var() is not reliable in attributes. */
.seo-stroke-slate { stroke: var(--slate-300); }
.seo-stroke-slate-strong { stroke: var(--slate-200); }
.seo-stroke-brand { stroke: var(--brand-500); }
.seo-stroke-brand-strong { stroke: var(--brand-600); }
.seo-fill-brand-soft { fill: var(--brand-50); }
.seo-fill-brand { fill: var(--brand-500); }
.seo-fill-brand-light { fill: var(--brand-300); }
.seo-fill-amber { fill: var(--amber-500); }
.seo-fill-teal { fill: var(--teal-500); }
.seo-fill-white { fill: var(--white); }
.seo-fill-ink { fill: var(--ink-900); }
.seo-fill-slate { fill: var(--slate-200); }

/* ---------- 5. Page chrome ---------- */

/* The SEO pages carry a price-free topbar line. On phones the tag and
   the second clause are dropped so the bar stays one line, the same
   way the old price line hid its renewal and fee spans. */
@media (max-width: 639px) {
  .topbar__promo .tag,
  .seo-topbar-more {
    display: none;
  }
}

/* ---------- 6. Ink hero ---------- */

.seo-hero {
  background: var(--grad-ink);
  border-bottom-color: transparent;
}

/* Faceted wallpaper, faded into the ink so it reads as texture. */
.seo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(10, 18, 32, 0.2) 0%, rgba(10, 18, 32, 0.55) 55%, var(--ink-950) 100%),
    url("../img/hero/products-geo-navy.svg");
  background-size: cover, cover;
  background-position: center;
  opacity: 0.6;
  pointer-events: none;
}

/* Two drifting aurora fields. Transform and opacity only. */
.seo-hero::after {
  content: "";
  position: absolute;
  inset: -25% -15%;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(18, 166, 111, 0.3) 0%, rgba(18, 166, 111, 0) 55%),
    radial-gradient(circle at 84% 70%, rgba(14, 165, 165, 0.24) 0%, rgba(14, 165, 165, 0) 58%);
  animation: seo-hero-drift 30s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes seo-hero-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
}

/* Content sits above both layers. */
.seo-hero .container {
  position: relative;
  z-index: 1;
}

.seo-hero .accent {
  --product-accent-from: var(--brand-300);
  --product-accent-to: var(--brand-500);
}

.seo-hero h2 {
  color: var(--white);
}

.seo-hero .domain-search {
  margin-top: var(--sp-6);
  max-width: 560px;
  box-shadow: 0 18px 40px -18px rgba(6, 11, 20, 0.65);
}

.seo-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--slate-300);
}

.seo-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.seo-hero__facts svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--brand-300);
}

/* The article headings carry the same short rule as the site's eyebrows. */
.seo-layout .prose h2 {
  position: relative;
  padding-top: var(--sp-4);
}

.seo-layout .prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--brand-400);
}

.seo-toc__title::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-right: var(--sp-2);
  vertical-align: middle;
  border-radius: var(--r-full);
  background: var(--brand-400);
}

/* Art gradients: stops are styled here, not via SVG attributes. */
.seo-stop-brand-strong { stop-color: var(--brand-500); stop-opacity: 0.55; }
.seo-stop-brand-mid { stop-color: var(--brand-700); stop-opacity: 0.4; }
.seo-stop-glow { stop-color: var(--brand-400); stop-opacity: 0.26; }
.seo-stop-transparent { stop-color: var(--brand-500); stop-opacity: 0; }

.seo-stroke-brand-light { stroke: var(--brand-300); }
.seo-stroke-light { stroke: rgba(255, 255, 255, 0.22); }