:root {
  --paper: #f7f7fa;
  --paper-2: #ededf3;
  --ink: #16161d;
  --ink-2: #4b4b58;
  --violet: #4a00d0;
  --violet-deep: #4a00d0;
  --violet-ink: #2c0080;
  --line: #d9d9e3;
  --radius: 14px;
  --nav-h: 90px;
  --ease-momentum: cubic-bezier(.22, 1, .36, 1);
}
html {
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--nav-h);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  background:
    radial-gradient(120% 70% at 88% -5%,
      color-mix(in srgb, var(--violet) 9%, transparent), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.site-header {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  z-index: 100;
  min-block-size: var(--nav-h);
  padding-block-start: 10px;
  display: flex; align-items: center;
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after { scale: 1 1; }
.nav-links a.is-current::after { scale: 1 1; }
.dropdown-toggle {
  display: inline-flex; align-items: center; gap: .4em;
  background: none; border: 0; margin: 0; padding: .4em 0;
  font: inherit; font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  color: var(--ink); cursor: pointer;
}
.dropdown-toggle[aria-expanded="true"] .caret { rotate: 180deg; }
.dropdown-toggle[aria-expanded="true"] + .dropdown { display: block; }
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; }
  .nav-links {
    position: fixed; inset-block-start: var(--nav-h); inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-block: 1px solid var(--line);
    padding: 1rem 1.5rem 1.5rem; display: none;
  }
  .nav-links li { padding-block: .55rem; }
  .nav-links .nav-cta { justify-content: center; margin-block-start: .5rem; }
  .site-header:has(.menu-btn[aria-expanded="true"]) .nav-links { display: flex; }
  .dropdown {
    position: static; min-inline-size: 0; border: 0; box-shadow: none;
    background: transparent; padding: .25rem 0 .25rem 1rem;
    display: block;
  }
  .has-dropdown { inline-size: 100%; }
  .dropdown-toggle { inline-size: 100%; justify-content: space-between; }
}
html:not(.js) .menu-btn { display: none; }
@media (max-width: 760px) {
  html:not(.js) .nav-links {
    position: static; display: flex; flex-direction: column;
    gap: .5rem; background: none; border: 0; padding: 0;
  }
}
.eyebrow.center { justify-content: center; }
.breadcrumb { margin-block-end: 1.6rem; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-2); }
.breadcrumb li + li::before {
  content: ""; inline-size: .4em; block-size: .4em; flex: none; rotate: 45deg; margin-inline-end: .1rem;
  border-block-start: 1.6px solid color-mix(in srgb, var(--ink-2) 50%, transparent);
  border-inline-end: 1.6px solid color-mix(in srgb, var(--ink-2) 50%, transparent);
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; position: relative; transition: color .25s var(--ease-momentum); }
.breadcrumb a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -3px; block-size: 1.5px;
  background: var(--violet); scale: 0 1; transform-origin: left; transition: scale .3s var(--ease-momentum);
}
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--violet-deep); }
.breadcrumb a:hover::after, .breadcrumb a:focus-visible::after { scale: 1 1; }
.breadcrumb [aria-current] { color: var(--ink); }
.sb-orb {                              /* CSS fallback orb (no-webgl) */
  position: fixed; z-index: 0; pointer-events: none;
  inline-size: clamp(220px, 30vw, 460px); aspect-ratio: 1;
  inset-inline-end: clamp(-60px, 2vw, 6vw); inset-block-start: 42%;
  translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(circle at 33% 30%, #fff 0%, #f2f1fa 35%, #ddd9ee 62%, #c7c1e4 82%, #b1a8da 100%);
  box-shadow: inset -28px -34px 60px rgba(58, 0, 166,.18),
              inset 14px 18px 40px rgba(255,255,255,.9),
              0 40px 80px -30px rgba(44, 0, 128,.35);
}
html.webgl .sb-orb { display: none; }
#snowball-stage {
  position: fixed; inset: 0; z-index: 0;
  inline-size: 100%; block-size: 100%; pointer-events: none; display: block;
}
.journey { position: fixed; z-index: 90; pointer-events: none; inset-inline-start: clamp(14px, 3.5vw, 46px); inset-block-start: 50%; translate: 0 -50%; display: none; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-momentum), visibility .45s; }
.journey.is-visible { opacity: 1; visibility: visible; }
@media (min-width: 1180px) { .journey { display: block; } }
html:not(.js) .journey { display: none; }
.journey-track { position: relative; inline-size: 3px; block-size: min(54vh, 440px); border-radius: 3px; background: var(--line); }
.journey-fill { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: calc(var(--p, 0) * 100%); border-radius: 3px; background: linear-gradient(180deg, var(--accent, var(--violet)), var(--accent-2, #a78bfa)); }
.journey-ball { position: absolute; inset-inline-start: 50%; inset-block-start: calc(var(--p, 0) * 100%); inline-size: calc(13px + var(--p, 0) * 28px); block-size: calc(13px + var(--p, 0) * 28px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 33% 30%, #fff, #e7e3f5 55%, #b7aee0); box-shadow: 0 10px 22px -6px rgba(74, 0, 208, .5); }
@media (prefers-reduced-motion: reduce) { .journey { transition: none; } }
.s-hero {
  position: relative;
  min-block-size: auto;
  display: grid; align-items: center;
  padding-block-start: var(--nav-h);
  overflow: clip;
  container-type: inline-size;
}
.s-hero-inner {
  position: relative; z-index: 3;
  inline-size: min(100% - 3rem, 1280px);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vh, 5rem) clamp(1.25rem, 3vh, 2rem);
}
.s-hero-copy { max-inline-size: 44rem; }
.s-hero h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.4rem, 1.1rem + 5.4vw, 5.2rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.038em; text-wrap: balance;
}
.s-hero h1 .accent {
  background-image: linear-gradient(100deg, var(--violet) 0%, var(--violet) 35%, #a78bfa 50%, var(--violet) 65%, var(--violet) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-block-end: .06em; padding-inline-end: .12em; margin-inline-end: -.12em;
  animation: h1-shimmer 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .s-hero h1 .accent { animation: none; background-position: 50% 0; } }
.s-hero .lede {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.32rem);
  color: var(--ink-2); max-inline-size: 36rem; margin-block-end: 2.25rem;
}
.s-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.s-hero-note { margin: 1.6rem 0 0; font-size: .9rem; color: var(--ink-2); }
.s-hero-note strong { color: var(--ink); }
@media (max-width: 760px), (hover: none) { .s-hero-note { display: none; } }
.s-hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--paper) 0%,
      color-mix(in srgb, var(--paper) 90%, transparent) 34%,
      color-mix(in srgb, var(--paper) 40%, transparent) 56%,
      transparent 78%);
  /* feather top + bottom so the veil never leaves a hard edge against the page bg */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 82%, transparent 100%);
}
.hero-stats {
  position: relative; z-index: 3;
  inline-size: min(100% - 3rem, 1280px); margin: clamp(.5rem, 2vh, 1.5rem) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border-radius: 20px; overflow: hidden;
  background: color-mix(in srgb, var(--line) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  box-shadow: 0 40px 90px -55px rgba(74, 0, 208, .5);
}
.hero-stat {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  background: color-mix(in srgb, #fff 58%, var(--paper));
  transition: background .35s var(--ease-momentum);
}
.hero-stat:hover { background: color-mix(in srgb, var(--violet) 7%, #fff); }
.hero-stat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(12rem 12rem at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--violet) 16%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease-momentum);
}
.hero-stat:hover::after { opacity: 1; }
.hs-spark { display: inline-flex; align-items: flex-end; gap: 3px; block-size: 1.45rem; }
.hs-spark i {
  inline-size: 5px; border-radius: 2px; block-size: var(--h, 60%);
  background: linear-gradient(180deg, var(--violet), var(--violet-ink));
  transform-origin: bottom;
}
.hs-spark i:nth-child(1) { --h: 52%; }
.hs-spark i:nth-child(2) { --h: 80%; }
.hs-spark i:nth-child(3) { --h: 100%; }
.hero-stats.is-live .hs-spark i { animation: hsRise .9s var(--ease-momentum) both; }
.hero-stats.is-live .hs-spark i:nth-child(1) { animation-delay: .1s; }
.hero-stats.is-live .hs-spark i:nth-child(2) { animation-delay: .2s; }
.hero-stats.is-live .hs-spark i:nth-child(3) { animation-delay: .3s; }
@keyframes hsRise { from { block-size: 12%; opacity: .35; } to { block-size: var(--h); opacity: 1; } }
.hs-spark-ai svg { inline-size: 1.7rem; block-size: 1.7rem; fill: var(--violet-deep); }
.hero-stats.is-live .hs-spark-ai svg { animation: hsPulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes hsPulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.14); opacity: 1; } }
.hs-num {
  font-size: clamp(1.85rem, 1.1rem + 2vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; padding-block-end: .1em;
  background: linear-gradient(120deg, var(--violet-ink), var(--violet) 55%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.hs-num-ai { font-size: clamp(1.85rem, 1.1rem + 2vw, 2.5rem); }
.hs-label { font-size: .9rem; color: var(--ink-2); font-weight: 600; line-height: 1.35; margin-block-start: auto; }
@media (max-width: 860px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) {
  .hero-stat { padding: 1rem .9rem; gap: .4rem; }
  .hs-num { font-size: clamp(1.6rem, 5.5vw, 2.05rem); }
  .hs-num-ai { font-size: clamp(1.6rem, 5.5vw, 2.05rem); }
  .hs-label { font-size: .8rem; line-height: 1.3; }
  .hs-spark { block-size: 1.1rem; } .hs-spark-ai svg { inline-size: 1.3rem; block-size: 1.3rem; }
}
.s-hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.s-hero-copy { max-inline-size: 40rem; }
.rankviz { position: relative; justify-self: center; inline-size: min(100%, 30rem); }
.rv-card {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 40px 90px -50px rgba(74, 0, 208, .55);
}
.rv-results { padding: 1.1rem 1.2rem 1.3rem; }
.rv-search {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .85rem; border-radius: 999px;
  background: color-mix(in srgb, #fff 75%, var(--paper-2));
  border: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-2); font-weight: 600;
}
.rv-mag { inline-size: .95rem; block-size: .95rem; stroke: var(--violet-deep); fill: none; stroke-width: 2; flex: none; }
.rv-ai {
  margin-block-start: .9rem; padding: .85rem .9rem; border-radius: 14px;
  background:
    radial-gradient(120% 120% at 0 0, color-mix(in srgb, var(--violet) 12%, transparent), transparent 60%),
    color-mix(in srgb, #fff 72%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--violet) 22%, var(--line));
}
.rv-ai-head {
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--violet-deep); margin-block-end: .6rem;
}
.rv-ai-head svg { inline-size: .9rem; block-size: .9rem; fill: var(--violet-deep); }
.rv-line {
  block-size: .5rem; border-radius: 4px; margin-block-end: .42rem; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.rv-line::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--violet) 35%, transparent) 50%, transparent 70%);
  background-size: 250% 100%; background-position: 200% 0;
}
.rankviz.is-live .rv-line::after { animation: rvShimmer 2.4s linear infinite; }
@keyframes rvShimmer { to { background-position: -120% 0; } }
.rv-line.w1 { inline-size: 96%; }
.rv-line.w2 { inline-size: 88%; }
.rv-line.w3 { inline-size: 60%; margin-block-end: 0; }
.rv-cite {
  display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .7rem;
  padding: .3rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700;
  color: var(--violet-ink); background: color-mix(in srgb, var(--violet) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent);
}
.rv-cite .rv-dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--violet); }
.rv-serp { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rv-row {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 12px;
  background: color-mix(in srgb, #fff 55%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.rv-row.rv-brand {
  position: relative; z-index: 2; overflow: hidden;
  border-color: color-mix(in srgb, var(--violet) 55%, transparent);
  background: color-mix(in srgb, var(--violet) 9%, #fff);
  box-shadow: 0 12px 30px -16px rgba(74, 0, 208, .65);
}
.rv-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(167, 139, 250, .5) 50%, transparent 68%);
  background-size: 250% 100%; background-position: 200% 0;
}
.rankviz.is-live .rv-brand::after { animation: rvSweep 1.2s ease 1.3s 1 both; }
@keyframes rvSweep { to { background-position: -130% 0; } }
.rv-rank {
  inline-size: 1.45rem; block-size: 1.45rem; flex: none; border-radius: 7px;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  color: var(--ink-2); background: var(--paper-2);
}
.rv-brand .rv-rank { color: #fff; background: var(--violet-deep); }
.rv-fav { inline-size: .85rem; block-size: .85rem; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.rv-brand .rv-fav { background: linear-gradient(135deg, #c4b5fd, #4a00d0); }
.rv-bars { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.rv-bars i { display: block; block-size: .42rem; border-radius: 3px; background: color-mix(in srgb, var(--ink) 11%, transparent); }
.rv-bars i:first-child { inline-size: 72%; }
.rv-bars i:last-child { inline-size: 46%; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.rv-brand .rv-bars i:first-child { inline-size: 64%; background: color-mix(in srgb, var(--violet) 42%, transparent); }
.rv-climb {
  position: absolute; inset-inline-start: -1.4rem; inset-block-end: -1.6rem;
  padding: .85rem 1rem; min-inline-size: 11.5rem;
}
.rankviz.is-live .rv-climb { animation: rvFloat 7s ease-in-out 2s infinite alternate; }
@keyframes rvFloat { to { transform: translateY(-7px); } }
.rv-climb-head { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-block-end: .5rem; }
.rv-climb-body { display: flex; align-items: center; gap: .75rem; }
.rv-chart { inline-size: 6rem; block-size: 3.2rem; overflow: visible; flex: none; }
.rv-chart-line {
  fill: none; stroke: url(#rvGrad); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 132; stroke-dashoffset: 0;
}
.js .rankviz:not(.is-live) .rv-chart-line { stroke-dashoffset: 132; }
.rankviz.is-live .rv-chart-line { animation: rvDraw 1.7s var(--ease-momentum) .2s both; }
@keyframes rvDraw { from { stroke-dashoffset: 132; } to { stroke-dashoffset: 0; } }
.rv-chart-dot { fill: var(--violet-deep); }
.js .rankviz:not(.is-live) .rv-chart-dot { opacity: 0; }
.rankviz.is-live .rv-chart-dot { animation: rvDot .35s ease 1.8s both; }
@keyframes rvDot { from { opacity: 0; } to { opacity: 1; } }
.rv-climb-fig b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--violet-deep); line-height: 1; }
.rv-trend { font-size: .68rem; font-weight: 700; color: #15a06a; display: inline-flex; align-items: center; gap: .2rem; }
.js .rankviz:not(.is-live) .rv-ai,
.js .rankviz:not(.is-live) .rv-row { opacity: 0; transform: translateY(12px); }
.rankviz.is-live .rv-ai { animation: rvUp .65s var(--ease-momentum) .15s both; }
.rankviz.is-live .rv-row.rv-other { animation: rvUp .55s var(--ease-momentum) both; }
.rankviz.is-live .rv-row.rv-other:nth-of-type(2) { animation-delay: .35s; }
.rankviz.is-live .rv-row.rv-other:nth-of-type(3) { animation-delay: .5s; }
.rankviz.is-live .rv-brand { animation: rvClimb 1.4s var(--ease-momentum) .9s both; }
@keyframes rvUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rvClimb { 0% { opacity: 0; transform: translateY(54px) scale(.97); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@container (max-width: 920px) {
  .s-hero-grid { grid-template-columns: 1fr; }
  .rankviz { margin-block-start: 2.5rem; inline-size: min(100%, 27rem); justify-self: start; }
  .rv-climb { position: static; min-inline-size: 0; margin-block-start: 1rem; }
  .rankviz.is-live .rv-climb { animation: none; }
}
@media (max-width: 560px) {
  .rankviz { inline-size: 100%; margin-block-start: 1.75rem; }
  .rv-card { box-shadow: 0 14px 34px -24px rgba(30, 22, 60, .22); }  /* tight neutral shadow, no purple pooling */
  .rv-results { padding: .85rem .9rem 1rem; }
  .rv-search { padding: .5rem .7rem; font-size: .78rem; }
  .rv-ai { margin-block-start: .7rem; padding: .7rem .75rem; }
  .rv-ai-head { font-size: .64rem; margin-block-end: .45rem; }
  .rv-line { block-size: .42rem; margin-block-end: .34rem; }
  .rv-line.w3 { display: none; }
  .rv-cite { font-size: .68rem; margin-block-start: .55rem; padding: .26rem .5rem; }
  .rv-serp { gap: .4rem; margin-block-start: .7rem; }
  .rv-row { padding: .5rem .6rem; gap: .55rem; }
  .rv-serp .rv-row:nth-child(3) { display: none; }
  .rv-rank { inline-size: 1.3rem; block-size: 1.3rem; font-size: .68rem; }
  .rv-bars i { block-size: .36rem; }
  .rv-climb { display: none; }   /* hide the AI answer rank card on phones */
  .rv-climb-body { justify-content: space-between; }
  .rv-climb-fig { text-align: right; }
  .rv-climb-head { font-size: .62rem; margin-block-end: .4rem; }
  .rv-chart { flex: 1; min-inline-size: 0; inline-size: auto; block-size: 2.9rem; }
  .rv-chart-dot { display: none; }
  .rv-chart-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .rv-climb-fig b { font-size: 1.25rem; }
  .rv-trend { font-size: .64rem; }
}
@container (max-width: 760px) {
  .s-hero-copy { max-inline-size: 100%; }
  .s-hero-veil { display: none; }   /* not needed on mobile; avoids a tonal band where it faded out */
}
.section {
  position: relative; z-index: 2;
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line);
  container-type: inline-size;
}
#what-is-seo { border-block-start: 0; }
.wrap { inline-size: min(100% - 3rem, 1280px); margin-inline: auto; }
.wrap-narrow { inline-size: min(100% - 3rem, 940px); margin-inline: auto; }
.sec-head { max-inline-size: 46rem; margin-block-end: clamp(2rem, 5vh, 3.5rem); }
.sec-index {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--violet) 55%, var(--line));
  line-height: 1; margin-block-end: .75rem;
}
.section h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3.2rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance;
}
.section h2 .accent { color: var(--violet-deep); }
.sec-intro { font-size: clamp(1.02rem, 1rem + .35vw, 1.22rem); color: var(--ink-2); margin: 0; }
.answer-card {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 24px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 40px 90px -60px rgba(74, 0, 208, .4);
}
.answer-card .lead-def {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.4; margin: 0 0 1.25rem; color: var(--ink);
  text-wrap: pretty;
}
.answer-card .lead-def b { color: var(--violet-deep); }
.answer-card p { margin: 0 0 1rem; color: var(--ink-2); max-inline-size: 60rem; }
.answer-card p:last-child { margin-bottom: 0; }
.answer-card a { color: var(--violet-deep); font-weight: 700; }
.process-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  counter-reset: step;
}
.step {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: .65rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border-radius: 20px;
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .45s var(--ease-momentum), box-shadow .45s var(--ease-momentum), border-color .45s var(--ease-momentum);
}
.step:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--violet) 50%, var(--line));
  box-shadow: 0 32px 60px -38px rgba(74, 0, 208, .5);
}
.step::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--violet) 15%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease-momentum);
}
.step:hover::after { opacity: 1; }
.step-top { display: flex; align-items: center; gap: .9rem; }
.step-num {
  counter-increment: step;
  display: inline-grid; place-items: center;
  inline-size: 2.6rem; block-size: 2.6rem; flex: none;
  border-radius: 50%; font-weight: 800; font-size: 1rem; color: #fff;
  background: linear-gradient(150deg, var(--violet) 0%, var(--violet-ink) 100%);
  box-shadow: 0 10px 24px -12px rgba(74, 0, 208, .8);
}
.step-num::before { content: "0" counter(step); }
.step-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-deep); }
.step h3 { margin: 0; font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--ink-2); font-size: .98rem; }
@container (max-width: 760px) { .process-grid { grid-template-columns: 1fr; } }
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.svc-card {
  position: relative;
  display: flex; flex-direction: column; gap: .8rem;
  padding: clamp(1.4rem, 2.2vw, 1.85rem);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow: hidden; isolation: isolate;
  transition: transform .45s var(--ease-momentum), box-shadow .45s var(--ease-momentum), border-color .45s var(--ease-momentum);
}
.svc-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--violet) 50%, var(--line));
  box-shadow: 0 32px 60px -38px rgba(74, 0, 208, .5);
}
.svc-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(14rem 14rem at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--violet) 16%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease-momentum);
}
.svc-card:hover::after { opacity: 1; }
.svc-icon {
  display: inline-grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: 13px; color: var(--violet-deep);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--violet) 18%, transparent),
    color-mix(in srgb, var(--violet) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--violet) 32%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .45s var(--ease-momentum);
}
.svc-card:hover .svc-icon { transform: scale(1.08) rotate(-3deg); }
.svc-icon-svg {
  inline-size: 1.45rem; block-size: 1.45rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.svc-card h3 { margin: 0; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.svc-card p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.6; }
.svc-card p a, .step p a, .why-list p a, .case-card p a, .sec-intro a, .pillar-intro a, .answer-card a, .faq-a p a, .feature-copy p a {
  color: var(--violet-deep); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--violet) 40%, transparent);
  transition: text-decoration-color .2s var(--ease-momentum);
}
.svc-card p a:hover, .step p a:hover, .why-list p a:hover, .case-card p a:hover, .sec-intro a:hover, .pillar-intro a:hover, .answer-card a:hover, .faq-a p a:hover, .feature-copy p a:hover { text-decoration-color: var(--violet-deep); }
@container (max-width: 860px) { .services-grid { grid-template-columns: 1fr; } }
.feature { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.feature-copy h2 { margin-block-end: 1.1rem; }
.feature-copy p { color: var(--ink-2); margin: 0 0 1rem; }
.feature-copy p:last-child { margin-bottom: 0; }
.feature-copy .eyebrow { color: var(--violet-deep); margin: 0 0 1.25rem; }
.feature-copy .lede { font-size: clamp(1.02rem, 1rem + .35vw, 1.2rem); }
.ai-stats { display: grid; gap: 1rem; }
.ai-stat {
  position: relative; overflow: hidden;
  padding: 1.4rem 1.5rem; border-radius: 18px;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 60%),
    color-mix(in srgb, var(--paper) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ai-stat b {
  display: block; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 800; letter-spacing: -.03em; color: var(--violet-deep); line-height: 1.05;
}
.ai-stat span { color: var(--ink-2); font-size: .95rem; }
@container (max-width: 860px) { .feature { grid-template-columns: 1fr; } }
.results-lead {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  margin-block-end: clamp(2.25rem, 5vh, 3.5rem);
}
.results-lead .sec-head { margin-block-end: 0; }
.rankviz-mini { inline-size: min(100%, 25rem); justify-self: end; }
@container (max-width: 920px) {
  .results-lead { grid-template-columns: 1fr; }
  .rankviz-mini { justify-self: start; }
}
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.case-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: .7rem;
  padding: clamp(1.5rem, 2.4vw, 2rem); border-radius: 20px;
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .45s var(--ease-momentum), box-shadow .45s var(--ease-momentum), border-color .45s var(--ease-momentum);
}
.case-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--violet) 50%, var(--line));
  box-shadow: 0 32px 60px -38px rgba(74, 0, 208, .5);
}
.case-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(15rem 15rem at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--violet) 15%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease-momentum);
}
.case-card:hover::after { opacity: 1; }
.case-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.case-sector { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-deep); }
.case-time {
  font-size: .72rem; font-weight: 700; color: var(--ink-2); white-space: nowrap;
  padding: .2rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 22%, transparent);
}
.case-metric {
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; padding-block-end: .14em;
  background: linear-gradient(120deg, var(--violet-ink), var(--violet) 55%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.case-card p { margin: 0; color: var(--ink-2); font-size: .96rem; }
@container (max-width: 860px) { .cases { grid-template-columns: 1fr; } }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem); }
.gauge-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.4vw, 2rem);
  border-radius: 22px;
  background: color-mix(in srgb, var(--paper) 64%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .45s var(--ease-momentum), box-shadow .45s var(--ease-momentum), border-color .45s var(--ease-momentum);
}
.gauge-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--violet) 45%, var(--line));
  box-shadow: 0 36px 70px -40px rgba(74, 0, 208, .55);
}
.gauge-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--violet) 14%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease-momentum);
}
.gauge-card:hover::after { opacity: 1; }
.gauge { position: relative; inline-size: clamp(150px, 18vw, 188px); aspect-ratio: 1; }
.gauge svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: color-mix(in srgb, var(--line) 90%, transparent); stroke-width: 9; }
.gauge-arc {
  fill: none; stroke: url(#gaugeArc); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ);
  transition: stroke-dashoffset 2s var(--ease-momentum);
}
.gauge.is-live .gauge-arc { stroke-dashoffset: 0; }
.gauge-figure {
  position: absolute; inset: 0; display: grid; place-content: center; line-height: 1;
}
.gauge-figure b {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--violet-ink), var(--violet) 55%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gauge-card h3 { margin: 0; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.gauge-card p { margin: 0; color: var(--ink-2); font-size: .94rem; }
@container (max-width: 860px) { .results-grid { grid-template-columns: 1fr; max-inline-size: 26rem; margin-inline: auto; } }
.why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.why-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.why-tick {
  inline-size: 2.1rem; block-size: 2.1rem; flex: none; border-radius: 9px;
  display: inline-grid; place-items: center; color: var(--violet-deep);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 28%, transparent);
}
.why-tick svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.why-list h3 { margin: 0 0 .25rem; font-size: 1.06rem; font-weight: 800; }
.why-list p { margin: 0; color: var(--ink-2); font-size: .96rem; }
@container (max-width: 860px) { .why { grid-template-columns: 1fr; } }
.faq-list { display: grid; gap: .85rem; }
.faq-item {
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent); border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow: hidden; transition: border-color .3s, box-shadow .3s;
}
.faq-item[open] { border-color: color-mix(in srgb, var(--violet) 40%, var(--line)); box-shadow: 0 24px 50px -40px rgba(74, 0, 208, .5); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 2vw, 1.6rem); font-weight: 700; font-size: 1.06rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q-plus { flex: none; inline-size: 1.5rem; block-size: 1.5rem; position: relative; }
.faq-q-plus::before, .faq-q-plus::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  background: var(--violet-deep); border-radius: 2px; transition: transform .3s var(--ease-momentum), opacity .3s;
}
.faq-q-plus::before { inline-size: 14px; block-size: 2.4px; translate: -50% -50%; }
.faq-q-plus::after { inline-size: 2.4px; block-size: 14px; translate: -50% -50%; }
.faq-item[open] .faq-q-plus::after { transform: rotate(90deg); opacity: 0; }
.faq-a { padding: 0 clamp(1.1rem, 2vw, 1.6rem) 1.3rem; color: var(--ink-2); }
.faq-a p { margin: 0; }
.faq-a a { color: var(--violet-deep); font-weight: 700; text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }
@property --cta-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.s-cta { position: relative; z-index: 2; padding: clamp(3rem, 8vh, 6rem) 0 clamp(4rem, 9vh, 7rem); }
.cta-panel {
  position: relative;
  inline-size: min(100% - 3rem, 1000px); margin-inline: auto;
  padding: clamp(2.75rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center; border-radius: 30px; color: #fff;
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(74, 0, 208,.5), transparent 55%),
    linear-gradient(160deg, #1d1340 0%, #130c29 55%, #0f0a22 100%);
  box-shadow: 0 50px 120px -50px rgba(74, 0, 208,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
.cta-aurora {
  position: absolute; inset: -25%; z-index: 0; filter: blur(60px); opacity: .9; pointer-events: none;
  background: radial-gradient(38% 46% at 72% 78%, rgba(236,72,153,.5), transparent 70%);
}
.cta-aurora::before, .cta-aurora::after { content: ""; position: absolute; inline-size: 55%; aspect-ratio: 1; border-radius: 50%; }
.cta-aurora::before { background: radial-gradient(circle, #4a00d0, transparent 62%); inset-block-start: -8%; inset-inline-start: 2%; animation: cta-aurora-a 17s ease-in-out infinite alternate; }
.cta-aurora::after  { background: radial-gradient(circle, #4f46e5, transparent 62%); inset-block-end: -10%; inset-inline-end: 0%; animation: cta-aurora-b 21s ease-in-out infinite alternate; }
@keyframes cta-aurora-a { to { transform: translate(22%, 16%) scale(1.25); } }
@keyframes cta-aurora-b { to { transform: translate(-18%, -14%) scale(.85); } }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .cta-panel::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 3; pointer-events: none;
    background: conic-gradient(from var(--cta-angle), transparent 8%, var(--violet), #c4b5fd, transparent 38%, transparent 62%, var(--violet), transparent 92%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: cta-rotate 7s linear infinite;
  }
}
@keyframes cta-rotate { to { --cta-angle: 360deg; } }
.cta-content { position: relative; z-index: 4; }
.cta-eyebrow { color: #c4b5fd; justify-content: center; }
.cta-eyebrow::before { background: var(--violet); }
.cta-eyebrow::after { content: ""; inline-size: 1.125em; block-size: 2px; background: var(--violet); }
.s-cta h2 {
  font-size: clamp(2.2rem, 1.4rem + 4vw, 4rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.12; margin: .4rem 0 1.1rem; padding-block-end: .18em; text-wrap: balance;
  background: linear-gradient(100deg, #fff 0%, #ddd6fe 35%, #fff 60%, #c4b5fd 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cta-shimmer 6s linear infinite;
}
@keyframes cta-shimmer { to { background-position: 220% 0; } }
.cta-lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: rgba(255,255,255,.78); margin: 0 auto 2.25rem; max-inline-size: 40rem; }
.cta-btn-wrap { display: inline-block; position: relative; padding: 1.4rem; }
.cta-btn-wrap::before {
  content: ""; position: absolute; inset: .9rem; border-radius: 999px; z-index: 0;
  background: radial-gradient(60% 70% at var(--mx, 50%) var(--my, 50%), rgba(167,139,250,.55), transparent 70%);
  filter: blur(12px); opacity: 0; transition: opacity .3s var(--ease-momentum);
}
.cta-btn-wrap:hover::before { opacity: 1; }
.cta-btn {
  position: relative; z-index: 1;
  transition: transform .25s var(--ease-momentum), box-shadow .3s var(--ease-momentum);
  box-shadow: 0 18px 40px -16px rgba(74, 0, 208,.8); will-change: transform;
}
.cta-btn:hover { box-shadow: 0 24px 60px -18px rgba(167,139,250,.95); }
@media (prefers-reduced-motion: reduce) {
  .cta-aurora::before, .cta-aurora::after, .cta-panel::before, .s-cta h2 { animation: none; }
}
.site-footer {
  position: relative; z-index: 2; overflow: clip;
  background: var(--ink); color: #fff;
  padding: clamp(4rem, 9vh, 7rem) 0 1.75rem;
}
@media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
.theme-data-seo { --accent:#4a00d0; --accent-2:#a78bfa; }
.lrn-wrap { max-inline-size:1180px; margin-inline:auto; padding-inline:clamp(1.2rem,5vw,2rem); }
.hub-hero { padding-block:calc(var(--nav-h) + clamp(1.5rem,4vw,3rem)) clamp(1.4rem,3.5vw,2.2rem); }
.hub-hero .kick { font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent,var(--violet-deep)); }
.hub-hero h1 { font-size:clamp(2.2rem,6vw,3.8rem); line-height:1.04; letter-spacing:-.03em; margin:.35em 0 .35em; max-inline-size:20ch; }
.hub-hero .lede { font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--ink-2); max-inline-size:60ch; line-height:1.5; margin:0; }
.hub-hero h1 .accent { background-image:linear-gradient(100deg, var(--violet) 0%, var(--violet) 35%, #a78bfa 50%, var(--violet) 65%, var(--violet) 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; padding-block-end:.06em; padding-inline-end:.12em; margin-inline-end:-.12em; animation:h1-shimmer 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hub-hero h1 .accent { animation:none; background-position:50% 0; } }
.hub-controls { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; justify-content:space-between; margin-block:1.8rem 1.2rem; }
.hub-search { position:relative; flex:1 1 300px; max-inline-size:440px; }
.hub-search input { inline-size:100%; padding:.85rem 1.1rem .85rem 2.9rem; border:1px solid var(--line); border-radius:999px; font:inherit; font-size:1rem; background:var(--paper-2); color:var(--ink); }
.hub-search input::placeholder { color:var(--ink-2); }
.hub-search input:focus { outline:2px solid var(--accent,var(--violet)); outline-offset:1px; border-color:var(--accent,var(--violet)); background:var(--paper); }
.hub-search svg { position:absolute; inset-inline-start:1.05rem; inset-block-start:50%; translate:0 -50%; inline-size:18px; block-size:18px; color:var(--ink-2); pointer-events:none; }
.hub-filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { font:inherit; font-size:.9rem; font-weight:600; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); cursor:pointer; text-decoration:none; transition:background .2s var(--ease-momentum), color .2s var(--ease-momentum), border-color .2s var(--ease-momentum); }
a.chip { display:inline-block; }
.chip:hover { border-color:var(--accent,var(--violet)); }
.chip.is-active { background:var(--accent,var(--violet)); color:#fff; border-color:var(--accent,var(--violet)); }
.chip-n { opacity:.6; font-weight:700; font-size:.82em; margin-inline-start:.15em; }
.chip.is-active .chip-n { opacity:.85; }
.hub-count { color:var(--ink-2); font-size:.9rem; margin:0 0 1.3rem; }
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.5rem; }
.hub-card { display:flex; flex-direction:column; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .3s var(--ease-momentum), box-shadow .3s var(--ease-momentum), border-color .3s var(--ease-momentum); }
.hub-card:hover { transform:translateY(-5px); box-shadow:0 28px 56px -30px rgba(44,0,128,.42); border-color:color-mix(in srgb, var(--accent,var(--violet)) 35%, var(--line)); }
.hub-thumb { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper); }
.hub-thumb .thumb-svg { inline-size:100%; block-size:100%; display:block; }
.hub-body { padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.hub-tag { font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent,var(--violet-deep)); }
.hub-card h3 { font-size:1.22rem; line-height:1.25; margin:0; letter-spacing:-.01em; }
.hub-card p { margin:0; color:var(--ink-2); font-size:.96rem; line-height:1.5; }
.hub-meta { margin-block-start:auto; padding-block-start:.7rem; font-size:.85rem; color:var(--ink-2); display:flex; align-items:center; }
.hub-meta .go { color:var(--accent,var(--violet-deep)); font-weight:700; margin-inline-start:auto; }
.hub-empty { padding:3rem 1.2rem; text-align:center; color:var(--ink-2); border:1px dashed var(--line); border-radius:var(--radius); }
.hub-empty a { color:var(--accent,var(--violet-deep)); }
.hub-pillars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-block-start:1.2rem; }
@media (max-width:760px){ .hub-pillars { grid-template-columns:1fr; } }
.hub-pillar { display:flex; flex-direction:column; gap:.2rem; padding:1.3rem 1.5rem; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink); transition:transform .3s var(--ease-momentum), box-shadow .3s var(--ease-momentum); }
.hub-pillar:hover { transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(44,0,128,.34); }
.hp-name { font-weight:700; font-size:1.1rem; }
.hp-sub { color:var(--ink-2); font-size:.9rem; }
.hp-go { margin-block-start:.4rem; font-weight:700; color:var(--accent,var(--violet-deep)); font-size:.9rem; }
.lrn-section { padding-block:clamp(2.4rem,5.5vw,3.6rem); }
.sec-eyebrow { font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent,var(--violet-deep)); margin:0 0 .4em; }
.lrn-section > .lrn-wrap > h2 { font-size:clamp(1.5rem,3.4vw,2.1rem); letter-spacing:-.015em; margin:0 0 1.2rem; }
.hub-pager { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.45rem; margin-block-start:clamp(2rem,4vw,3rem); }
.hub-pager[hidden] { display:none; }
.pg-btn { min-inline-size:44px; block-size:44px; padding:0 .8rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px; background:var(--paper-2); color:var(--ink); font:inherit; font-size:1rem; font-weight:700; cursor:pointer; transition:background .2s var(--ease-momentum), border-color .2s var(--ease-momentum), color .2s var(--ease-momentum); }
.pg-btn:hover:not(:disabled) { border-color:var(--accent,var(--violet)); color:var(--accent,var(--violet-deep)); }
.pg-btn.is-active { background:var(--accent,var(--violet)); border-color:var(--accent,var(--violet)); color:#fff; cursor:default; }
.pg-btn:disabled { opacity:.4; cursor:default; }
.pg-btn.pg-arrow { font-size:1.3rem; line-height:1; }
.s-cta h2 { background-image:linear-gradient(100deg,#ece7fb 0%,#ece7fb 40%,#ffffff 50%,#ece7fb 60%,#ece7fb 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:cta-shimmer 6s linear infinite; }
.hub-stat { margin:.9rem 0 0; font-size:.92rem; font-weight:600; color:var(--ink-2); }
.hub-search-hero { margin-block-start:1.4rem; max-inline-size:520px; flex:none; }
.svc-rail { margin:1.1rem 0 0; font-size:.92rem; line-height:1.7; color:var(--ink-2); max-inline-size:70ch; }
.svc-rail a { color:var(--accent,var(--violet-deep)); font-weight:600; text-decoration:none; border-block-end:1px solid transparent; }
.svc-rail a:hover, .svc-rail a:focus-visible { border-block-end-color:currentColor; }
.svc-rail-all { white-space:nowrap; }
.sec-lede { margin:0 0 1.4rem; color:var(--ink-2); font-size:1rem; line-height:1.6; max-inline-size:62ch; }
.sec-more { margin:1.4rem 0 0; font-weight:700; }
.sec-more a { color:var(--accent,var(--violet-deep)); text-decoration:none; }
.sec-more a:hover, .sec-more a:focus-visible { text-decoration:underline; }
.hub-dot { margin-inline:.45em; opacity:.5; }
.chip-n { opacity:1; color:var(--ink-2); }
.chip.is-active .chip-n { opacity:.85; color:inherit; }
.start-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem; }
.start-card { display:flex; flex-direction:column; gap:.45rem; padding:1.3rem 1.4rem 1.4rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink); transition:transform .3s var(--ease-momentum), box-shadow .3s var(--ease-momentum), border-color .3s var(--ease-momentum); }
.start-card:hover, .start-card:focus-visible { transform:translateY(-4px);
  box-shadow:0 24px 50px -28px rgba(44,0,128,.34);
  border-color:color-mix(in srgb, var(--accent,var(--violet)) 35%, var(--line)); }
.start-tag { font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent,var(--violet-deep)); }
.start-card h3 { margin:0; font-size:1.08rem; line-height:1.3; letter-spacing:-.01em; }
.start-why { margin:0; font-size:.9rem; line-height:1.5; color:var(--ink-2); }
.start-go { margin-block-start:auto; padding-block-start:.5rem; font-weight:700; font-size:.88rem; color:var(--accent,var(--violet-deep)); }
.hub-pillar { cursor:default; }
.hub-pillar:hover { transform:none; box-shadow:none; }
.hp-desc { margin:.55rem 0 .2rem; font-size:.93rem; line-height:1.5; color:var(--ink-2); }
.hp-clusters { list-style:none; margin:.5rem 0 .2rem; padding:0; display:flex; flex-direction:column; gap:.1rem; }
.hp-clusters li { margin:0; }
.hp-clusters a { display:flex; align-items:baseline; gap:.5rem; padding:.32rem 0; font-size:.9rem;
  color:var(--ink); text-decoration:none; border-block-end:1px solid transparent; }
.hp-clusters a:hover, .hp-clusters a:focus-visible { color:var(--accent,var(--violet-deep)); }
.hp-n { margin-inline-start:auto; font-size:.78rem; font-weight:700; color:var(--ink-2); }
.hub-pillar .hp-go { margin-block-start:auto; padding-block-start:.8rem; text-decoration:none; }
.hub-pillar .hp-go:hover, .hub-pillar .hp-go:focus-visible { text-decoration:underline; }
.recent-list { list-style:none; margin:0; padding:0; border-block-start:1px solid var(--line); }
.recent-list li { margin:0; }
.recent-list a { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; padding:.85rem .2rem;
  border-block-end:1px solid var(--line); text-decoration:none; color:var(--ink);
  transition:background .25s var(--ease-momentum), padding-inline-start .25s var(--ease-momentum); }
.recent-list a:hover, .recent-list a:focus-visible { background:var(--paper-2); padding-inline-start:.7rem; }
.rc-date { flex:none; inline-size:7.5rem; font-size:.82rem; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.rc-title { flex:1 1 16rem; font-size:1rem; font-weight:600; line-height:1.35; }
.rc-pillar { flex:none; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent,var(--violet-deep)); }
.svc-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem 2rem; }
.svc-col h3 { margin:0 0 .55rem; font-size:1rem; letter-spacing:-.01em; }
.svc-col h3 a { color:var(--ink); text-decoration:none; }
.svc-col h3 a:hover, .svc-col h3 a:focus-visible { color:var(--accent,var(--violet-deep)); }
.svc-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem; }
.svc-col li { margin:0; }
.svc-col a { display:block; padding:.3rem 0; font-size:.93rem; color:var(--ink-2); text-decoration:none; }
.svc-col ul a:hover, .svc-col ul a:focus-visible { color:var(--accent,var(--violet-deep)); }
.svc-mini-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.svc-mini { display:flex; flex-direction:column; gap:.4rem; padding:1.2rem 1.3rem 1.3rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink);
  transition:transform .3s var(--ease-momentum), box-shadow .3s var(--ease-momentum), border-color .3s var(--ease-momentum); }
.svc-mini:hover, .svc-mini:focus-visible { transform:translateY(-4px);
  box-shadow:0 24px 50px -28px rgba(44,0,128,.34);
  border-color:color-mix(in srgb, var(--accent,var(--violet)) 35%, var(--line)); }
.svc-mini h3 { margin:0; font-size:1.02rem; line-height:1.3; letter-spacing:-.01em; }
.svc-mini p { margin:0; font-size:.9rem; line-height:1.5; color:var(--ink-2); }
.svc-go { margin-block-start:auto; padding-block-start:.5rem; font-weight:700; font-size:.86rem; color:var(--accent,var(--violet-deep)); }
.svc-spec { margin:1.2rem 0 0; font-size:.92rem; line-height:1.75; color:var(--ink-2); }
.svc-spec a { color:var(--accent,var(--violet-deep)); text-decoration:none; font-weight:600; }
.svc-spec a:hover, .svc-spec a:focus-visible { text-decoration:underline; }
.cluster-sec { padding-block:clamp(1.6rem,3.4vw,2.4rem); }
.cluster-sec + .cluster-sec { border-block-start:1px solid var(--line); }
.cluster-svc { margin:0 0 1.3rem; font-size:.9rem; font-weight:600; color:var(--ink-2); }
.cluster-svc a { color:var(--accent,var(--violet-deep)); text-decoration:none; }
.cluster-svc a:hover, .cluster-svc a:focus-visible { text-decoration:underline; }
.cluster-chips { margin-block-end:1.4rem; }
.cs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; }
.cs-teaser { display:flex; flex-direction:column; gap:.45rem; padding:1.3rem 1.4rem 1.4rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink);
  transition:transform .3s var(--ease-momentum), box-shadow .3s var(--ease-momentum), border-color .3s var(--ease-momentum); }
.cs-teaser:hover, .cs-teaser:focus-visible { transform:translateY(-4px);
  box-shadow:0 24px 50px -28px rgba(44,0,128,.34);
  border-color:color-mix(in srgb, var(--accent,var(--violet)) 35%, var(--line)); }
.cs-tag { font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent,var(--violet-deep)); }
.cs-teaser h3 { margin:0; font-size:1.08rem; line-height:1.3; letter-spacing:-.01em; }
.cs-teaser p { margin:0; font-size:.9rem; line-height:1.5; color:var(--ink-2); }
.cs-go { margin-block-start:auto; padding-block-start:.5rem; font-weight:700; font-size:.86rem; color:var(--accent,var(--violet-deep)); }
@media (max-width:960px) {
  .svc-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .svc-mini-grid { grid-template-columns:1fr; }
  .rc-date { inline-size:100%; }
  .svc-rail { font-size:.88rem; }
  .recent-list a { padding-block:.75rem; }
}

/* HUB-REFRESH-START */
/* --- visual refresh, 5 Aug 2026 ------------------------------------------
   The hub was not using the house type system. Measured against /case-studies,
   which is the standard:

                     case studies        hub before
     section heading  51.2px / 800        33.6px / 700
     tracking         -1.54px             -0.50px
     leading          1.06                1.60
     section lede     19.5px              16px
     section padding  90px top            38px

   A 1.6 leading on a 33.6px heading is what made cluster titles float instead of
   sitting as a block, and at 38px of padding the sections ran together into one
   sheet. These rules port the case-studies scale across. They are APPENDED, not
   edited in above, so the cascade resolves them last and the originals stay
   readable as the record of what changed.

   The ghost index label is lifted from .sec-index on /case-studies: transparent
   fill with a 1.5px stroke. That page scores accessibility 100 with it, so the
   treatment is known safe rather than assumed safe. */

.cluster-sec { padding-block-start:clamp(3rem,6vw,5.6rem); padding-block-end:0; }
.cluster-sec + .cluster-sec { border-block-start:0; }

/* Applied to every .lrn-section, not just cluster sections, so all four hub pages
   share one treatment. /learn has no clusters at all: its six sections carry
   proper names ("New here", "Browse by pillar", "Fresh"), which suit a ghost
   label better than the pillar pages' "16 guides" counts do. */
.lrn-section .sec-eyebrow {
  font-size:clamp(2rem,3.3vw,3rem); font-weight:800; letter-spacing:-.03em;
  line-height:1; text-transform:none; color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--violet) 62%, #fff);
  margin:0 0 .75rem; }
.lrn-section .sec-eyebrow .cl-n { color:transparent; font-weight:800; opacity:1; }

/* Specificity matters here. The first version of this rule was `.cluster-sec h2`
   (0,1,1) and it silently lost to the pre-existing `.lrn-section > .lrn-wrap > h2`
   (0,3,1), which caps the heading at 2.1rem. Every gate passed and the heading
   never changed size. Measured, not eyeballed: the ghost label above it grew, so
   the section LOOKED different while the h2 was untouched. This selector is
   (0,4,1) and beats it. */
.lrn-section > .lrn-wrap > h2 {
  font-size:clamp(2.1rem,4vw,3.2rem); font-weight:800; letter-spacing:-.03em;
  line-height:1.06; margin:0 0 .85rem; max-inline-size:22ch; }
.lrn-section .sec-lede {
  font-size:clamp(1.05rem,1.4vw,1.22rem); line-height:1.6;
  max-inline-size:46rem; margin-block-end:2.2rem; }
.cluster-sec .cluster-svc { margin-block-end:2rem; }

/* Cards. 102 items at identical visual weight with no hover reward is most of
   why the grid read as flat. Elevation plus a pillar rule that wipes in on
   hover, and the thumbnail grounded with a scrim instead of floating. */
.hub-grid { gap:1.6rem; }
.hub-card { position:relative; overflow:hidden; border-radius:16px;
  box-shadow:0 1px 2px rgba(22,22,29,.04), 0 10px 26px -14px rgba(22,22,29,.16);
  transition:transform .4s var(--ease-momentum), box-shadow .4s var(--ease-momentum), border-color .4s var(--ease-momentum); }
.hub-card::before { content:""; position:absolute; inset-inline:0; inset-block-start:0;
  block-size:3px; background:var(--violet-deep); z-index:3;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-momentum); }
.hub-card:hover, .hub-card:focus-visible { transform:translateY(-6px);
  border-color:var(--violet-deep);
  box-shadow:0 6px 12px rgba(22,22,29,.06), 0 28px 54px -22px rgba(22,22,29,.3); }
.hub-card:hover::before, .hub-card:focus-visible::before { transform:scaleX(1); }
.hub-thumb { display:block; position:relative; overflow:hidden; }
.hub-thumb::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(22,22,29,.16)); }
.hub-thumb .thumb-svg { display:block; transition:transform .55s var(--ease-momentum); }
.hub-card:hover .thumb-svg, .hub-card:focus-visible .thumb-svg { transform:scale(1.055); }
.hub-tag { display:inline-block; padding:.34em .72em; border-radius:999px;
  background:color-mix(in srgb, var(--violet) 12%, #fff); }
.hub-card h3 { margin:.7rem 0 .45rem; letter-spacing:-.015em; line-height:1.25; }

/* --- hero -----------------------------------------------------------------
   H1 was clamp(2.2rem,6vw,3.8rem) = 60.8px/700 against the case-studies 83.2px/800.
   The winning rule was `.hub-hero h1` (0,1,1); this is (0,2,1) so it wins outright
   rather than relying on source order, which is the mistake that made the section
   heading change a no-op the first time round.

   The right half of every hub hero was empty: 1440px wide with the copy stopping
   just past halfway. It now carries one featured guide, the first Start here pick
   on /learn and an authored pick per pillar. */
.hub-hero .hub-hero-copy h1 {
  font-size:clamp(3rem,6.2vw,5.2rem); font-weight:800;
  letter-spacing:-.038em; line-height:1.02; }
.hub-hero .hub-hero-copy .lede { font-size:clamp(1.08rem,1.5vw,1.22rem); line-height:1.6; }

.hub-hero-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:center; }

.hero-feature { min-inline-size:0; }
.hf-card { display:block; overflow:hidden; border-radius:18px; text-decoration:none;
  color:var(--ink); background:var(--paper-2); border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(22,22,29,.05), 0 24px 48px -24px rgba(22,22,29,.26);
  transition:transform .4s var(--ease-momentum), box-shadow .4s var(--ease-momentum), border-color .4s var(--ease-momentum); }
.hf-card:hover, .hf-card:focus-visible { transform:translateY(-6px);
  border-color:var(--violet-deep);
  box-shadow:0 8px 16px rgba(22,22,29,.07), 0 34px 64px -26px rgba(22,22,29,.34); }
.hf-thumb { display:block; position:relative; overflow:hidden; }
.hf-thumb::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 52%, rgba(22,22,29,.2)); }
.hf-thumb .thumb-svg { display:block; inline-size:100%; block-size:auto;
  transition:transform .55s var(--ease-momentum); }
.hf-card:hover .hf-thumb .thumb-svg { transform:scale(1.05); }
.hf-body { display:flex; flex-direction:column; gap:.5rem;
  padding:1.3rem clamp(1.3rem,1.8vw,1.7rem) 1.45rem; }
.hf-label { align-self:flex-start; font-size:.64rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--violet-deep);
  background:color-mix(in srgb, var(--violet) 12%, #fff);
  padding:.34em .72em; border-radius:999px; }
.hf-title { font-size:clamp(1.15rem,1.5vw,1.35rem); font-weight:800;
  letter-spacing:-.015em; line-height:1.25; }
.hf-excerpt { font-size:.94rem; line-height:1.55; color:var(--ink-2); }
.hf-go { font-weight:700; font-size:.88rem; color:var(--violet-deep); }

/* Below the two-column breakpoint the hero stacks, and the feature is redundant:
   on /learn it is literally the first Start here card, which follows immediately.
   Hiding the duplicate is better than showing the same link twice in a row. */
@media (max-width:1040px) {
  .hub-hero-grid { grid-template-columns:1fr; }
  .hero-feature { display:none; }
}

/* --- the three pillar panels ----------------------------------------------
   These are the three core delivery pillars and they were the quietest thing on
   the page: 1.08rem names sitting in flat grey boxes, lighter than the article
   cards beneath them. Names go to ~2rem/800, the panel gets a white surface, an
   index to match the 01/02/03 the services page uses, and a violet cap rule.

   NO hover lift on the panel. It is a <div> containing links, not a link: the
   existing `.hub-pillar:hover { transform:none; box-shadow:none }` was a
   deliberate choice, because elevating a non-clickable surface promises a click
   target that is not there. Hover belongs on the rows and the CTA, which ARE
   links. That old rule also zeroed box-shadow, so the base shadow has to be
   restated on hover or the panel visibly flattens under the cursor. */
/* Every row aligns across all three panels, using subgrid.
   The panels hold different amounts of copy: "Data, SEO & AI Search" wraps to two
   lines where the other two names fit on one, and the descriptions run to two or
   three lines. That pushed the eyebrow, the rule and the cluster list to a
   different height in each panel. Only the CTA lined up, because it was pinned to
   the bottom with margin-block-start:auto.

   Subgrid makes the six rows (index, name, kick, description, clusters, CTA) share
   one set of track heights across all three panels, so each row starts on the same
   line no matter how the copy wraps. Min-heights would have been the alternative
   and would break the moment anyone edits the copy or the viewport changes.

   row-gap is 0 deliberately: the parent's gap would otherwise open up between every
   internal row. Spacing stays on the children's own margins, and column-gap keeps
   the space between panels. */
.hub-pillars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(6,auto);
  column-gap:clamp(1.1rem,1.8vw,1.7rem); row-gap:0; align-items:stretch; }
.hub-pillar { position:relative; display:grid; grid-template-rows:subgrid;
  grid-row:1 / span 6; row-gap:0; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:clamp(1.7rem,2.3vw,2.2rem) clamp(1.4rem,2vw,1.8rem) clamp(1.5rem,2vw,1.8rem);
  box-shadow:0 2px 4px rgba(22,22,29,.04), 0 20px 44px -26px rgba(22,22,29,.24); }
.hub-pillar::before { content:""; position:absolute; inset-inline:0; inset-block-start:0;
  block-size:4px; background:linear-gradient(90deg, var(--violet-deep),
  color-mix(in srgb, var(--violet) 42%, #fff)); }
.hub-pillar:hover { transform:none;
  box-shadow:0 2px 4px rgba(22,22,29,.04), 0 20px 44px -26px rgba(22,22,29,.24); }

.hp-idx { font-size:.74rem; font-weight:800; letter-spacing:.2em;
  color:var(--violet-deep); margin-block-end:.9rem; font-variant-numeric:tabular-nums; }
.hp-name { font-size:clamp(1.42rem,2.1vw,1.95rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.12; }
.hp-sub { display:block; margin-block-start:.45rem; font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--violet-deep); }
.hp-desc { margin:.9rem 0 1.1rem; font-size:.97rem; line-height:1.6; }

.hp-clusters { border-block-start:1px solid var(--line); padding-block-start:.4rem; gap:0; }
.hp-clusters a { padding:.55rem; margin-inline:-.55rem; border-radius:10px; font-size:.95rem;
  transition:background .25s var(--ease-momentum), color .25s, padding-inline-start .25s var(--ease-momentum); }
.hp-clusters a:hover, .hp-clusters a:focus-visible {
  background:color-mix(in srgb, var(--violet) 8%, transparent);
  color:var(--violet-deep); padding-inline-start:.85rem; }
/* Still no opacity on this count, for the reason recorded above: at .75 it fell
   to 3.96:1. Violet on a 12% violet tint measures 8.05:1. */
.hp-n { font-size:.72rem; font-weight:800; color:var(--violet-deep);
  background:color-mix(in srgb, var(--violet) 12%, #fff);
  padding:.22em .6em; border-radius:999px; min-inline-size:2em; text-align:center; }
.hub-pillar .hp-go { margin-block-start:auto; padding-block-start:1.15rem;
  font-weight:800; font-size:.95rem; color:var(--violet-deep); }

/* --- "What we do about all this" ------------------------------------------
   The same three pillars again, as the services behind the library, and it was
   three bare columns of links under 1rem headings: the flattest thing left on the
   page. Same treatment as the panels above, so the two sections read as a pair.

   Three rows here (index, heading, list) rather than six, on the same subgrid so
   the headings and the rules line up even when a name wraps.

   Note `.svc-col a` already sets font-size on EVERY link in the column, including
   the one inside the h3, so the heading needs font-size:inherit on its anchor or
   it silently stays at .93rem however large the h3 is set. */
.svc-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,auto);
  column-gap:clamp(1.1rem,1.8vw,1.7rem); row-gap:0; align-items:stretch; }
.svc-col { position:relative; display:grid; grid-template-rows:subgrid;
  grid-row:1 / span 3; row-gap:0; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:clamp(1.7rem,2.3vw,2.2rem) clamp(1.4rem,2vw,1.8rem) clamp(1.5rem,2vw,1.8rem);
  box-shadow:0 2px 4px rgba(22,22,29,.04), 0 20px 44px -26px rgba(22,22,29,.24); }
.svc-col::before { content:""; position:absolute; inset-inline:0; inset-block-start:0;
  block-size:4px; background:linear-gradient(90deg, var(--violet-deep),
  color-mix(in srgb, var(--violet) 42%, #fff)); }

.svc-idx { font-size:.74rem; font-weight:800; letter-spacing:.2em;
  color:var(--violet-deep); margin-block-end:.9rem; font-variant-numeric:tabular-nums; }
.svc-col h3 { margin:0 0 1.05rem; font-size:clamp(1.42rem,2.1vw,1.95rem);
  font-weight:800; letter-spacing:-.03em; line-height:1.12; }
.svc-col h3 a { font-size:inherit; display:inline; padding:0; color:var(--ink); }
.svc-col h3 a:hover, .svc-col h3 a:focus-visible { color:var(--violet-deep); }

.svc-col ul { border-block-start:1px solid var(--line); padding-block-start:.4rem; gap:0; }
.svc-col ul a { padding:.55rem; margin-inline:-.55rem; border-radius:10px; font-size:.95rem;
  color:var(--ink-2);
  transition:background .25s var(--ease-momentum), color .25s, padding-inline-start .25s var(--ease-momentum); }
.svc-col ul a:hover, .svc-col ul a:focus-visible {
  background:color-mix(in srgb, var(--violet) 8%, transparent);
  color:var(--violet-deep); padding-inline-start:.85rem; }

/* One column: subgrid has nothing left to align against, and leaving it on would
   auto-place three multi-row panels into a parent sized for one. Back to flex. */
@media (max-width:960px) {
  .hub-pillars { grid-template-columns:1fr; grid-template-rows:none; row-gap:1.1rem; }
  .hub-pillar { display:flex; flex-direction:column; grid-row:auto; }
  .svc-cols { grid-template-columns:1fr; grid-template-rows:none; row-gap:1.1rem; }
  .svc-col { display:flex; flex-direction:column; grid-row:auto; }
}

/* Motion is a reward, not a requirement. */
@media (prefers-reduced-motion: reduce) {
  .hub-card, .hub-card::before, .hub-thumb .thumb-svg,
  .hf-card, .hf-thumb .thumb-svg { transition:none; }
  .hub-card:hover, .hub-card:focus-visible, .hf-card:hover, .hf-card:focus-visible { transform:none; }
  .hub-card:hover .thumb-svg, .hub-card:focus-visible .thumb-svg,
  .hf-card:hover .hf-thumb .thumb-svg { transform:none; }
}

/* HUB-REFRESH-END */