/* ══════════════════════════════════════════════════════════════════════
   SHOUTOUT LANDING — shared styling for the two shoutout SEO pages
   (/free-youtube-shoutouts and /buy-youtube-shoutouts)

   Both pages open with the same night hero the homepage uses, so the
   entry point a stranger lands on from Google matches the quality of the
   homepage. The hero + console rules below are ported from home.css
   under a `sol-` prefix ON PURPOSE rather than loading home.css here:
   these pages live or die on Core Web Vitals, and home.css carries ~700
   lines of homepage-only sections that would never match this markup.
   Porting also means the homepage is never at risk from a change made
   for an SEO page.

   Loaded AFTER landing-shared.css, which supplies .home-section,
   .section-header*, .final-cta*, .paid-upsell* and .reveal.
   .night*, .breadcrumb*, .faq-* and .button* come from the global bundle.
   ══════════════════════════════════════════════════════════════════════ */

/* No one-word orphans on display lines (founder rule 2026-07-14). */
.sol-hero__title,
.sol-cards__card-title,
.sol-steps__title { text-wrap: balance; }
.sol-hero__sub,
.sol-summary__text { text-wrap: pretty; }

/* ══════════════════════════════════════════════════════════════════
   1. HERO — the night bookend
   ══════════════════════════════════════════════════════════════════ */
.sol-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-20);
  text-align: center;
}
.sol-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sol-hero__grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(rgba(148, 163, 220, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 220, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
}
.sol-hero__graph {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 62%;
  opacity: 0.9;
}
.sol-hero__graph-line {
  stroke-dasharray: 2700;
  stroke-dashoffset: 2700;
  animation: sol-draw 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
.sol-hero__graph-fill { opacity: 0; animation: sol-graph-fade 1s ease 1s forwards; }
@keyframes sol-draw { to { stroke-dashoffset: 0; } }
@keyframes sol-graph-fade { to { opacity: 1; } }

.sol-hero__breadcrumb {
  position: absolute;
  top: var(--space-6);
  left: 0; right: 0;
  z-index: 2;
  margin: 0;
  padding: 0 var(--space-6);
}
.sol-hero__breadcrumb .breadcrumb__list { justify-content: center; }
/* Brighter than the current-page label beside it: the only clickable crumb
   should not be the dimmer of the two. */
.sol-hero__breadcrumb a { color: rgba(255, 255, 255, 0.78); }
.sol-hero__breadcrumb a:hover { color: #fff; }
/* --night-text-faint computes to 3.56:1 here, under the 4.5:1 contrast
   floor. This crumb needs its own value. */
.sol-hero__breadcrumb .breadcrumb__current { color: rgba(255, 255, 255, 0.62); }

/* .container carries 32px of top padding, which the homepage hero does not
   pick up. Left in, it started the hero content 32px lower than the homepage. */
.sol-hero > .container { padding-top: 0; }
.sol-hero__stage { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.sol-hero .night__eyebrow { margin-bottom: var(--space-5); }
/* Matches the homepage hero scale (4.5rem). The headlines were shortened to
   earn it: at 72px the longer wording ran to four lines and pushed the button
   below the fold, so "in your niche" moved into the subheadline instead. */
.sol-hero__title {
  font-size: clamp(2.4rem, 6.6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: var(--space-2) auto 0;
  max-width: 760px;
}
.sol-hero__sub {
  max-width: 580px;
  margin: var(--space-5) auto 0;
  font-size: var(--font-size-xl);
}
.sol-hero__go { max-width: 440px; margin: var(--space-8) auto 0; }
.sol-hero__cta { width: 100%; }
.sol-hero__hint {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-4) 0 0;
}

/* ── The console: an example shoutout, so a stranger understands the
   product before reading a single word of body copy. ─────────────── */
.sol-hero__visual { position: relative; margin-top: var(--space-8); }
.sol-hero__visual::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%; top: 46%;
  width: 108%; height: 88%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(99, 102, 241, 0.4), transparent 72%);
  filter: blur(28px);
  opacity: 0.7;
  pointer-events: none;
}
.sol-console {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  padding: 0 var(--space-5) var(--space-5);
  background:
    radial-gradient(130% 120% at 12% -10%, var(--surface-night-bloom) 0%, transparent 58%),
    var(--surface-night-raised);
  border: 1px solid rgba(165, 180, 252, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(99, 102, 241, 0.06),
    0 44px 96px rgba(4, 7, 18, 0.74);
}

.solc__chrome {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  margin: 0 calc(-1 * var(--space-5));
  padding: 12px var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015);
}
.solc__dots { display: inline-flex; gap: 6px; }
.solc__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.solc__dots i:first-child { background: rgba(251, 191, 36, 0.55); }
.solc__dots i:nth-child(2) { background: rgba(52, 211, 153, 0.5); }
.solc__chrome-tag {
  font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--night-text-faint);
  padding: 3px 10px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09);
}

/* Matched-creator strip (buy page) */
.solc__head { display: flex; align-items: center; gap: 12px; margin-top: var(--space-4); }
.solc__av {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}
.solc__id { flex: 1 1 auto; min-width: 0; }
.solc__name {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: #fff; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.solc__meta {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: var(--font-size-xs); font-weight: 600; color: var(--night-text-faint);
}
.solc__meta i { color: #34d399; }
.solc__badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--font-size-xs); font-weight: 800; color: #34d399;
  background: rgba(52, 211, 153, 0.14); border: 1px solid rgba(52, 211, 153, 0.3);
  padding: 5px 10px; border-radius: var(--radius-full);
}

/* ── The example shoutout post itself ─────────────────────────────── */
.sol-post {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
.sol-post__top { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.sol-post__av {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}
.sol-post__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sol-post__name {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sol-post__meta { font-size: var(--font-size-xs); color: var(--night-text-faint); }
.sol-post__body {
  margin: 0 0 var(--space-3);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--night-text);
  text-align: left;
}
.sol-post__body b { color: #a5b4fc; font-weight: 700; }
.sol-post__foot {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 9px;
}
.sol-post__foot span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--font-size-xs); font-weight: 600; color: var(--night-text-faint);
}
.sol-post__live { margin-left: auto; color: #34d399 !important; font-weight: 800 !important; }

/* ── The three shoutout types, igniting one by one ────────────────── */
.solc__rail { margin-top: var(--space-5); display: flex; flex-direction: column; gap: 9px; }
.solc__rail-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0.34; transform: translateY(6px);
}
.solc__rail-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(99, 102, 241, 0.16); border: 1px solid rgba(129, 140, 248, 0.28);
  color: #c7d2fe; font-size: 0.82rem;
}
.solc__rail-txt {
  flex: 1 1 auto; min-width: 0; font-size: 0.86rem; font-weight: 700;
  color: var(--night-text); line-height: 1.25; text-align: left;
}
.solc__rail-live {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.solc__rail-row--1 { animation: sol-ignite 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards; }
.solc__rail-row--2 { animation: sol-ignite 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.18s forwards; }
.solc__rail-row--3 { animation: sol-ignite 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.41s forwards; }
.solc__rail-row--1 .solc__rail-live { animation: sol-live 0.5s ease 1.35s forwards, sol-live-pulse 2.2s ease-in-out 1.85s infinite; }
.solc__rail-row--2 .solc__rail-live { animation: sol-live 0.5s ease 1.58s forwards, sol-live-pulse 2.2s ease-in-out 2.08s infinite; }
.solc__rail-row--3 .solc__rail-live { animation: sol-live 0.5s ease 1.81s forwards, sol-live-pulse 2.2s ease-in-out 2.31s infinite; }
@keyframes sol-ignite { to { opacity: 1; transform: none; } }
@keyframes sol-live { to { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); } }
@keyframes sol-live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.20); }
  50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.06); }
}

/* Orchestrated one-time entrance */
.sol-hero .night__eyebrow,
.sol-hero__title,
.sol-hero__sub,
.sol-hero__visual,
.sol-hero__go { animation: sol-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.sol-hero__title { animation-delay: 70ms; }
.sol-hero__sub { animation-delay: 140ms; }
.sol-hero__visual { animation-delay: 220ms; }
.sol-hero__go { animation-delay: 300ms; }
@keyframes sol-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sol-hero .night__eyebrow,
  .sol-hero__title,
  .sol-hero__sub,
  .sol-hero__visual,
  .sol-hero__go { animation: none; }
  .sol-hero__graph-line { animation: none; stroke-dashoffset: 0; }
  .sol-hero__graph-fill { animation: none; opacity: 1; }
  .solc__rail-row { animation: none; opacity: 1; transform: none; }
  .solc__rail-live { animation: none; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
}

/* ── Desktop: two columns, copy left, console right ───────────────── */
@media (min-width: 992px) {
  .sol-hero { text-align: left; padding: var(--space-20) 0 var(--space-24); }
  .sol-hero__breadcrumb .breadcrumb__list { justify-content: flex-start; }
  .sol-hero__stage {
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, 460px);
    column-gap: var(--space-14);
    /* Top-aligned, not centred: the console is taller than the copy here, so
       centring pushed the headline 32px below where the homepage starts its
       hero. Aligning to the top puts the copy back on the homepage's line. */
    align-items: start;
  }
  .sol-hero__copy { grid-column: 1; }
  .sol-hero__title { margin: var(--space-2) 0 0; max-width: none; }
  .sol-hero__sub { margin: var(--space-5) 0 0; max-width: 520px; }
  .sol-hero__go { margin: var(--space-8) 0 0; }
  .sol-hero__hint { justify-content: flex-start; }
  .sol-hero__visual { grid-column: 2; margin: 0; justify-self: center; }
}

/* ══════════════════════════════════════════════════════════════════
   2. TRUST BAR
   ══════════════════════════════════════════════════════════════════ */
.sol-trust-bar {
  background: var(--color-gray-900);
  padding: var(--space-6) 0;
}
.sol-trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-4);
  text-align: center;
}
.sol-trust-bar__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.sol-trust-bar__item span {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-gray-400);
}
@media (min-width: 768px) {
  .sol-trust-bar__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   3. AI SUMMARY — the extractable definition
   ══════════════════════════════════════════════════════════════════ */
.sol-summary__content { max-width: 820px; margin: 0 auto; text-align: center; }
.sol-summary__heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 800;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-4);
  line-height: 1.25;
}
.sol-summary__text {
  font-size: var(--font-size-lg);
  line-height: 1.75;
  color: var(--color-gray-700);
  margin: 0;
}
.sol-summary__updated {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* ══════════════════════════════════════════════════════════════════
   4. CARD GRIDS — shoutout types, warnings, value props
   ══════════════════════════════════════════════════════════════════ */
.sol-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.sol-cards__card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all 150ms ease;
}
.sol-cards__card:hover {
  transform: translateY(-1px);
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-md);
}
.sol-cards__card-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: var(--space-4);
  background: var(--color-primary-lightest, #eef2ff);
  color: var(--color-primary);
}
.sol-cards__card-icon--red { background: #fee2e2; color: #dc2626; }
.sol-cards__card-icon--green { background: #dcfce7; color: #16a34a; }
.sol-cards__card-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
}
.sol-cards__card-text {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-gray-600);
  margin: 0;
}
.sol-cards__card-tag {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .sol-cards__grid { grid-template-columns: repeat(3, 1fr); }
  .sol-cards__grid--two { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   5. STEPS — how it works
   ══════════════════════════════════════════════════════════════════ */
.sol-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  counter-reset: sol-step;
}
.sol-steps__item {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-6);
}
.sol-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}
.sol-steps__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
}
.sol-steps__text {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-gray-600);
  margin: 0;
}
@media (min-width: 768px) {
  .sol-steps__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .sol-steps__list { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   6. LONG-FORM PROSE BLOCK
   ══════════════════════════════════════════════════════════════════ */
.sol-prose { max-width: 820px; margin: 0 auto; }
.sol-prose p {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-gray-700);
  margin: 0 0 var(--space-5);
  overflow-wrap: break-word;
  word-break: break-word;
}
.sol-prose a { color: var(--color-primary); font-weight: 600; }
.sol-definitions { margin: var(--space-6) 0 0; }
.sol-definitions dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  margin-top: var(--space-5);
}
.sol-definitions dd {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-gray-600);
}

/* ══════════════════════════════════════════════════════════════════
   7. COMPARISON TABLE — scrolls on mobile, never overflows the page
   ══════════════════════════════════════════════════════════════════ */
.sol-compare__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: #fff;
}
.sol-compare__table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.sol-compare__table th,
.sol-compare__table td {
  padding: var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-100);
  vertical-align: top;
  line-height: 1.6;
}
.sol-compare__table thead th {
  background: var(--color-gray-50);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-gray-900);
  white-space: nowrap;
}
.sol-compare__table tbody th {
  font-weight: 600;
  color: var(--color-gray-700);
}
.sol-compare__table td { color: var(--color-gray-600); }
.sol-compare__col--us { background: rgba(79, 70, 229, 0.04); }
.sol-compare__table thead .sol-compare__col--us { background: rgba(79, 70, 229, 0.1); color: var(--color-primary); }
.sol-compare__yes { color: #16a34a; font-weight: 700; }
.sol-compare__no { color: #dc2626; font-weight: 700; }
.sol-compare__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-align: center;
}
@media (min-width: 768px) { .sol-compare__hint { display: none; } }

/* ══════════════════════════════════════════════════════════════════
   8. INTERNAL LINK SILO
   ══════════════════════════════════════════════════════════════════ */
.sol-links__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.sol-links__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  min-height: 56px;
  transition: all 150ms ease;
}
.sol-links__item:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.sol-links__item i {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  color: var(--color-primary);
}
@media (min-width: 640px) { .sol-links__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sol-links__grid { grid-template-columns: repeat(3, 1fr); } }

/* ══════════════════════════════════════════════════════════════════
   8b. PACKAGE CARDS (buy page)
   Layout + pricing modifiers ONLY. The card surface itself is the
   shared .card component, per the Component Library Rule.
   ══════════════════════════════════════════════════════════════════ */
/* .card sets overflow:hidden for its rounded corners; the badge has to
   escape the top edge, so this one card opts out. */
@media (min-width: 900px) {
}

/* ══════════════════════════════════════════════════════════════════
   8c. FREE ROUTE LINE (buy page) — a quiet escape hatch, never a
   second primary button competing with the paid call to action.
   ══════════════════════════════════════════════════════════════════ */
/* Secondary path under the closing call to action. Sits on the night surface,
   so it is muted white rather than indigo, and tall enough to tap. Replaced
   .sol-free-route, which gave one sentence a full-width section of its own. */
.sol-final__alt {
  margin: var(--space-5) auto 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
/* Vertical padding, not min-height: on an inline element padding grows the
   hit area without changing the line box, so the sentence keeps its rhythm.
   inline-flex + min-height pushed the second line away and read as broken. */
.sol-final__alt a {
  padding: 14px 2px;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sol-final__alt a:hover { color: var(--color-primary-200, #c7d2fe); }

/* ══════════════════════════════════════════════════════════════════
   8d. VISUAL CARDS — the richness layer
   Per .claude/plans/zero-thinking-design-foundation.md §2: a feature
   grid must lead each card with a real mini-visual, never a tinted
   icon squircle (that stack is the named AI-slop pattern, and it is
   what the first build of this page shipped). Each viz is built from
   lightweight CSS primitives seeded by what the card actually shows,
   so every card is differentiated by its graphic instead of by yet
   another icon.
   ══════════════════════════════════════════════════════════════════ */
.sol-viz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) { .sol-viz-grid { grid-template-columns: repeat(3, 1fr); } }

.sol-viz-card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all 150ms ease;
}
.sol-viz-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.sol-viz {
  position: relative;
  /* Tall enough for the tallest of the six panels (the description card at
     154px). A 132px panel silently clipped its link and caption. */
  height: 158px;
  padding: 14px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
  overflow: hidden;
}
/* Single column below 768px, so the panels do not need to be the same height
   and a fixed one silently clips the description card's link and caption. */
@media (max-width: 767px) {
  .sol-viz { height: auto; min-height: 158px; }
}
.sol-viz::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 20% 0%, rgba(99, 102, 241, 0.10), transparent 65%);
}
.sol-viz > * { position: relative; }

.sol-viz-card__body { padding: var(--space-5); }
.sol-viz-card__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 6px;
}
.sol-viz-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
}
.sol-viz-card__tag {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ── Primitives the mini-pictures are built from ────────────────── */
.vz-row { display: flex; align-items: center; gap: 8px; }
.vz-stack > * + * { margin-top: 7px; }
.vz-av {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}
.vz-av--sm { width: 18px; height: 18px; flex: 0 0 18px; }
.vz-av--xs { width: 16px; height: 16px; flex: 0 0 16px; }
.vz-av--grey { background: var(--color-gray-300); }
.vz-bar { height: 7px; border-radius: 4px; background: #d7dbe3; }
.vz-bar--w85 { width: 85%; }
.vz-bar--w70 { width: 70%; }
.vz-bar--w55 { width: 55%; }
.vz-bar--w40 { width: 40%; }
.vz-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(79, 70, 229, 0.12);
  color: var(--color-primary);
  white-space: nowrap;
}
.vz-card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 9px;
  padding: 9px;
}
.vz-meta { font-size: 0.75rem; color: var(--color-gray-400); font-weight: 600; }
.vz-reply { margin-left: 18px; }
.vz-actions { gap: 14px; margin-top: 2px; }
.vz-actions span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600; color: var(--color-gray-400);
}
.vz-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-400);
  font-weight: 800;
}
.vz-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; color: var(--color-primary);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* ── The failure pictures.
   These carry REAL text, not grey bars. Two of them previously read as
   loading skeletons on a phone, which is the exact gap between this page
   and /youtube-channel-audit: the reference fills its visuals with real
   words and real numbers. ─────────────────────────────────────────── */
.vz-txt {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Declared AFTER .vz-txt on purpose: equal specificity, so source order is
   what makes this modifier win. Above the base rule it was dead and the one
   real sentence in the card truncated to "their edit..." on mobile. */
.vz-txt--wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  margin: 0;
  color: var(--color-gray-600);
}
/* The chip is inline-block with padding, so punctuation after it needs
   pulling back or it reads as "@YourChannel , their edits". */
.vz-punc { margin-left: -7px; }

.vz-buried { display: flex; flex-direction: column; gap: 6px; }
.vz-buried .vz-row { opacity: 0.45; }
.vz-buried .vz-mine { opacity: 1; }
.vz-buried .vz-mine .vz-txt {
  color: #b91c1c;
  font-weight: 700;
}
.vz-caption {
  margin-top: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gray-400);
}

/* Swap-group chat: the thing those rooms actually look like. */
.vz-chat { display: flex; flex-direction: column; gap: 6px; }
.vz-msg {
  align-self: flex-start;
  max-width: 82%;
  padding: 5px 9px;
  border-radius: 10px 10px 10px 3px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  font-size: 0.75rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vz-msg--out {
  align-self: flex-end;
  border-radius: 10px 10px 3px 10px;
  background: var(--color-gray-100);
}

.vz-chart { display: block; width: 100%; height: 100%; }
.vz-chart-wrap { position: relative; height: 100%; padding-top: 14px; box-sizing: border-box; }
.vz-chart-tag {
  position: absolute;
  top: 2px; right: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #b91c1c;
}

/* ══════════════════════════════════════════════════════════════════
   8e. ANSWER PANELS — the SEO explainer, as panels rather than
   three unbroken screens of grey paragraphs. Same words, same H2
   text and anchors, so nothing a search engine cites moves.
   ══════════════════════════════════════════════════════════════════ */
.sol-ans { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) { .sol-ans { grid-template-columns: repeat(2, 1fr); } }
.sol-ans__panel {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.sol-ans__eyebrow {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(79, 70, 229, 0.10);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.sol-ans__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
.sol-ans__text {
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--color-gray-600);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sol-ans__text a { color: var(--color-primary); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   8f. REVIEWS WALL — verbatim quotes, masonry, monogram avatars.
   HARD RULE: never show star ratings. We collect none, so inventing
   them would be a lie and a Google self-serving-review risk.
   ══════════════════════════════════════════════════════════════════ */
.sol-wall { column-count: 1; column-gap: var(--space-5); }
@media (min-width: 768px) { .sol-wall { column-count: 2; } }
@media (min-width: 992px) { .sol-wall { column-count: 3; } }

.sol-rev {
  break-inside: avoid;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
}
.sol-rev__mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(79, 70, 229, 0.22);
}
.sol-rev__quote {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-gray-700);
  margin: 2px 0 var(--space-4);
  overflow-wrap: break-word;
  word-break: break-word;
}
.sol-rev__quote mark {
  background: rgba(79, 70, 229, 0.11);
  color: var(--color-primary);
  font-weight: 600;
  padding: 0 2px;
}
.sol-rev__by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--color-gray-100);
  padding-top: var(--space-3);
}
.sol-rev__av {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 0.82rem;
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--color-primary), #818cf8);
  text-transform: uppercase;
}
.sol-rev__name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.25;
}
.sol-rev__role {
  display: block;
  font-size: 0.75rem;
  color: var(--color-gray-500);
  line-height: 1.25;
}

/* ══════════════════════════════════════════════════════════════════
   8g. STEPS — a connected run rather than four loose boxes
   ══════════════════════════════════════════════════════════════════ */
.sol-steps__item { position: relative; }
.sol-steps__num {
  box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.10);
}
/* The connecting line only exists once the row is genuinely a row. */
@media (min-width: 992px) {
  .sol-steps__list { position: relative; }
  .sol-steps__item::after {
    content: '';
    position: absolute;
    top: calc(var(--space-6) + 17px);
    right: calc(-1 * var(--space-5));
    width: var(--space-5);
    height: 2px;
    background: var(--color-gray-200);
  }
  .sol-steps__item:last-child::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   8h. FINAL CTA — a night bookend that closes like an event.
   Reuses the hero depth layer; same CTA label and destination as the
   hero (law 6). landing-shared.css styles .final-cta for a light
   surface, so these overrides put it on the night surface.
   ══════════════════════════════════════════════════════════════════ */
.sol-final { position: relative; overflow: hidden; }
.sol-final .final-cta__title {
  /* Matches the homepage close (4rem). It was running 57.6px against its 64px. */
  font-size: clamp(2.1rem, 6.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  /* 1.03 matches the homepage close; at 1.12 the two-line title sat loose. */
  line-height: 1.03;
  color: #fff;
  text-wrap: balance;
}
.sol-final .final-cta__title em {
  font-style: normal;
  color: #a5b4fc;
}
.sol-final .final-cta__subtitle {
  color: var(--night-text);
  text-wrap: pretty;
}
.sol-final .final-cta__content { position: relative; z-index: 1; }
.sol-final__sub {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-sm);
  color: var(--night-text-faint);
}

/* ══════════════════════════════════════════════════════════════════
   8i. ONE DARK, AND A SECTION CADENCE

   Two things that made the page visibly change hands below the fold:

   (a) The hero sits on --surface-night, but landing-shared.css paints
       .final-cta and .paid-upsell with slate-900, and the trust bar was
       hand-rolled on gray-900. Three different darks under one hero.
       Everything dark on these pages now uses the SAME night surface.
       Scoped to .sol-page so the five other SEO pages that share
       .paid-upsell are untouched.

   (b) Every light section was transparent, so eight sections ran
       together in one flat wash. They now alternate white and gray-50,
       which is what the homepage and the audit landing both do.
   ══════════════════════════════════════════════════════════════════ */
body.sol-page .sol-trust-bar,
body.sol-page .sol-final {
  background-color: var(--surface-night);
}
/* The upsell sits immediately before the night bookend, so it stays LIGHT.
   Two adjacent night sections is a hard no (foundation rule 1), and it also
   left the upsell card with no surface of its own to sit on. */
body.sol-page .paid-upsell__inner {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
}
body.sol-page .paid-upsell__title { color: var(--color-gray-900); }
body.sol-page .paid-upsell__text { color: var(--color-gray-600); }
body.sol-page .paid-upsell__text a { color: var(--color-primary); }
body.sol-page .sol-final {
  background-image: radial-gradient(120% 100% at 50% 0%, var(--surface-night-bloom) 0%, transparent 62%);
}