:root {
  --article-ink: #18162b;
  --article-muted: #59566a;
  --article-purple: #5a37c9;
  --article-purple-dark: #3d218e;
  --article-lilac: #eee9ff;
  --article-gold: #ffd35c;
  --article-mint: #a6ebc1;
  --article-paper: #fff;
  --article-canvas: #f8f7fc;
  --article-line: #ded9ec;
}

.buying-requests-page {
  color: var(--article-ink);
  background:
    radial-gradient(circle at 6% 16%, rgba(255, 211, 92, 0.24), transparent 23rem),
    radial-gradient(circle at 94% 38%, rgba(166, 235, 193, 0.2), transparent 26rem),
    var(--article-canvas);
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: -100px;
  left: 16px;
  padding: 10px 14px;
  background: var(--article-ink);
  color: white;
  font-weight: 800;
}

.skip-link:focus { top: 12px; }

.article-site-header {
  border-bottom-color: var(--article-line);
}

.article-site-header a:focus-visible,
.article-main a:focus-visible {
  outline: 4px solid rgba(90, 55, 201, 0.25);
  outline-offset: 4px;
}

.article-main {
  width: min(1080px, calc(100% - 36px));
  margin: 0 auto;
  padding: 48px 0 70px;
}

.article-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  align-items: end;
  gap: clamp(28px, 7vw, 78px);
  padding: 38px 0 78px;
}

.article-kicker {
  margin: 0 0 10px;
  color: var(--article-purple);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-hero h1 {
  margin: 0 0 22px;
  max-width: 720px;
  color: var(--article-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.25rem, 7.2vw, 6.6rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.article-lede {
  max-width: 690px;
  margin-bottom: 20px;
  color: var(--article-muted);
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.55;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--article-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.quick-script {
  padding: 28px;
  border: 2px solid var(--article-ink);
  border-radius: 22px;
  background: var(--article-gold);
  box-shadow: 8px 8px 0 var(--article-ink);
}

.quick-script .article-kicker { color: #5e4b05; }
.quick-script h2 { margin: 0 0 14px; font-size: 1.7rem; }
.quick-script blockquote { margin: 0; color: var(--article-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; line-height: 1.5; }

.article-section {
  display: grid;
  grid-template-columns: 70px minmax(0, 730px);
  justify-content: center;
  gap: 22px;
  padding: 78px 0;
  border-top: 1px solid var(--article-line);
}

.section-number {
  margin: 5px 0 0;
  color: var(--article-purple);
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.article-section h2,
.framework h2,
.family-rule h2,
.article-cta h2 {
  margin: 0 0 18px;
  color: var(--article-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4.8vw, 3.7rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.article-section p,
.article-section li,
.framework p,
.family-rule li,
.article-cta p,
.sources p,
.sources li {
  color: var(--article-muted);
  font-size: 1.05rem;
  line-height: 1.72;
}

.say-this {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 6px solid var(--article-mint);
  border-radius: 6px 15px 15px 6px;
  background: var(--article-paper);
}

.framework {
  margin: 22px 0 78px;
  padding: clamp(34px, 6vw, 66px);
  border-radius: 32px;
  background: var(--article-purple);
  color: white;
}

.framework .section-heading { max-width: 640px; }
.framework .article-kicker { color: #ded5ff; }
.framework h2 { color: white; }

.framework-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 38px;
}

.framework-grid section {
  padding: 25px;
  border-radius: 20px;
  background: white;
  color: var(--article-ink);
}

.framework-grid section > span { display: block; margin-bottom: 38px; font-size: 1.7rem; }
.framework-grid .step-label { margin: 0 0 6px; color: var(--article-purple); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.framework-grid h3 { margin: 0 0 12px; font-size: 1.4rem; line-height: 1.25; }
.framework-grid p:last-child { margin: 0; font-size: 0.96rem; line-height: 1.6; }

.question-list {
  display: grid;
  gap: 12px;
  margin: 30px 0 20px;
  padding: 0;
  counter-reset: questions;
  list-style: none;
}

.question-list li {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px;
  padding: 19px 0;
  border-bottom: 1px solid var(--article-line);
  counter-increment: questions;
}

.question-list strong::before {
  margin-right: 10px;
  color: var(--article-purple);
  content: counter(questions, decimal-leading-zero);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.question-list span { color: var(--article-muted); }

.small-note { font-size: 0.91rem !important; }

.example-card {
  margin: 28px 0;
  padding: 24px;
  border: 2px solid var(--article-ink);
  border-radius: 18px;
  background: var(--article-lilac);
  box-shadow: 6px 6px 0 var(--article-ink);
}

.example-card p:last-child { margin-bottom: 0; color: var(--article-ink); }

.script-stack {
  display: grid;
  gap: 10px;
  margin: 30px 0;
}

.script-stack blockquote {
  margin: 0;
  padding: 16px 19px;
  border-radius: 13px;
  background: var(--article-paper);
  color: var(--article-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}

.script-stack blockquote:nth-child(2) { margin-left: 26px; background: var(--article-gold); }
.script-stack blockquote:nth-child(3) { margin-left: 52px; background: var(--article-mint); }

.avoid-list { display: grid; gap: 16px; padding-left: 22px; }

.family-rule {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(380px, 1.25fr);
  gap: 48px;
  margin: 30px 0 90px;
  padding: clamp(32px, 6vw, 62px);
  border: 2px solid var(--article-ink);
  border-radius: 30px;
  background: var(--article-gold);
  box-shadow: 9px 9px 0 var(--article-ink);
}

.family-rule .article-kicker { color: #5e4b05; }
.family-rule ol { display: grid; gap: 13px; margin: 0; padding-left: 24px; }
.family-rule li { color: var(--article-ink); font-weight: 700; }

.platform-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 28px 0 18px;
}

.platform-cards article {
  padding: 22px;
  border: 1px solid var(--article-line);
  border-radius: 17px;
  background: var(--article-paper);
}

.platform-cards h3 { margin: 0 0 10px; }
.platform-cards p { font-size: 0.95rem; line-height: 1.6; }
.platform-cards a { color: var(--article-purple-dark); font-weight: 800; text-underline-offset: 3px; }

.article-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 44px;
  margin: 45px 0 58px;
  padding: clamp(30px, 6vw, 56px);
  border-radius: 28px;
  background: var(--article-purple);
  color: white;
}

.article-cta .article-kicker { color: #ded5ff; }
.article-cta h2 { color: white; }
.article-cta p { max-width: 650px; margin-bottom: 0; color: rgba(255,255,255,0.78); }

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 13px 20px;
  border: 2px solid var(--article-ink);
  border-radius: 14px;
  background: var(--article-gold);
  box-shadow: 5px 5px 0 var(--article-ink);
  color: var(--article-ink);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.sources {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--article-line);
  border-radius: 16px;
  background: rgba(255,255,255,0.7);
}

.sources h2 { margin: 0 0 12px; font-size: 1.3rem; }
.sources ul { margin: 0 0 12px; padding-left: 20px; }
.sources li, .sources p { font-size: 0.87rem; line-height: 1.55; }
.sources a { color: var(--article-purple-dark); }

.back-link { max-width: 820px; margin: 28px auto 0; }
.back-link a { color: var(--article-purple-dark); font-weight: 800; }

@media (max-width: 820px) {
  .article-hero,
  .framework-grid,
  .family-rule,
  .article-cta { grid-template-columns: 1fr; }

  .article-hero { align-items: start; }
  .quick-script { max-width: 620px; }
  .framework-grid section > span { margin-bottom: 20px; }
  .article-cta { align-items: start; }
  .cta-button { justify-self: start; }
}

@media (max-width: 620px) {
  .article-main { width: min(100% - 24px, 1080px); padding-top: 20px; }
  .article-hero { padding: 24px 0 58px; }
  .article-hero h1 { font-size: clamp(2.75rem, 15vw, 4.6rem); }
  .article-section { grid-template-columns: 1fr; gap: 6px; padding: 58px 0; }
  .question-list li { grid-template-columns: 1fr; gap: 7px; }
  .script-stack blockquote:nth-child(2),
  .script-stack blockquote:nth-child(3) { margin-left: 0; }
  .platform-cards { grid-template-columns: 1fr; }
  .framework, .family-rule, .article-cta { border-radius: 22px; }
  .cta-button { width: 100%; }
}

@media print {
  .article-site-header,
  .article-cta,
  .sources,
  .back-link,
  #dinoChatLauncher,
  #dinoChatPanel { display: none !important; }

  .buying-requests-page { background: white; }
  .article-main { width: 100%; padding: 0; }
  .article-section { break-inside: avoid; }
  .framework, .family-rule { border: 1px solid #333; box-shadow: none; }
}
