/* Commerce disclosures, guide pages, and outbound-link states */
.commerce-disclosure {
  display: flex;
  width: min(100% - 40px, 1540px);
  margin: 18px auto 26px;
  padding: 13px 15px;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--violet, #7657ff) 22%, var(--line, rgba(56, 38, 104, .15)));
  border-radius: 15px;
  background: color-mix(in srgb, var(--violet, #7657ff) 6%, var(--white, #fff));
}
.commerce-disclosure > span {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--violet, #7657ff) 14%, transparent);
  color: var(--violet, #7657ff);
  font-weight: 950;
}
.commerce-disclosure p {
  margin: 0;
  color: var(--muted, #69617b);
  font-size: 11px;
  line-height: 1.55;
}
.commerce-disclosure strong { color: var(--ink, #18132e); }
.commerce-disclosure a { color: var(--violet, #7657ff); font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }

.guide-page main,
.guides-page main { overflow: visible; }
.guide-hero {
  width: min(100% - 40px, 1280px);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) 0 clamp(34px, 5vw, 68px);
}
.guide-hero .eyebrow { color: var(--pink, #ff3ca6); }
.guide-hero h1 {
  max-width: 980px;
  margin: 16px 0 20px;
  font-family: var(--display, "Arial Black", sans-serif);
  font-size: clamp(46px, 7.5vw, 104px);
  line-height: .9;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.guide-hero > p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted, #69617b);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
}
.guide-actions { display: flex; margin-top: 26px; flex-wrap: wrap; gap: 10px; }
.guide-proof {
  display: grid;
  width: min(100% - 40px, 1280px);
  margin: 0 auto 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line, rgba(56, 38, 104, .15));
  border-radius: 22px;
  background: var(--white, #fff);
  overflow: hidden;
}
.guide-proof div { min-height: 110px; padding: 24px; border-right: 1px solid var(--line, rgba(56, 38, 104, .15)); }
.guide-proof div:last-child { border-right: 0; }
.guide-proof strong { display: block; margin-bottom: 5px; font-size: 24px; letter-spacing: -.04em; }
.guide-proof span { color: var(--muted, #69617b); font-size: 12px; line-height: 1.45; }
.guide-grid,
.guide-article {
  width: min(100% - 40px, 1280px);
  margin: 0 auto clamp(60px, 9vw, 110px);
}
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guide-card {
  display: flex;
  min-height: 260px;
  padding: clamp(24px, 4vw, 38px);
  flex-direction: column;
  border: 1px solid var(--line, rgba(56, 38, 104, .15));
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--card-accent, #7657ff) 18%, transparent), transparent 14rem),
    var(--white, #fff);
  box-shadow: 0 16px 48px rgba(40, 22, 80, .06);
}
.guide-card small { color: var(--pink, #ff3ca6); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.guide-card h2 { margin: 16px 0 10px; font-size: clamp(26px, 3.1vw, 42px); line-height: .98; letter-spacing: -.055em; }
.guide-card p { margin: 0; color: var(--muted, #69617b); font-size: 13px; line-height: 1.6; }
.guide-card a { display: inline-flex; width: fit-content; margin-top: auto; padding-top: 24px; color: var(--violet, #7657ff); font-weight: 900; }
.guide-article { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(30px, 6vw, 90px); }
.guide-toc { position: sticky; top: 96px; height: fit-content; padding: 20px; border: 1px solid var(--line, rgba(56, 38, 104, .15)); border-radius: 18px; background: var(--white, #fff); }
.guide-toc strong { display: block; margin-bottom: 12px; font-size: 12px; }
.guide-toc nav { display: grid; gap: 8px; }
.guide-toc a { color: var(--muted, #69617b); font-size: 12px; line-height: 1.4; }
.guide-toc a:hover { color: var(--violet, #7657ff); }
.guide-content { min-width: 0; }
.guide-content section { scroll-margin-top: 100px; padding: 0 0 42px; }
.guide-content section + section { padding-top: 42px; border-top: 1px solid var(--line, rgba(56, 38, 104, .15)); }
.guide-content h2 { margin: 0 0 15px; font-size: clamp(28px, 4vw, 48px); line-height: 1; letter-spacing: -.055em; }
.guide-content h3 { margin: 25px 0 9px; font-size: 20px; letter-spacing: -.025em; }
.guide-content p,
.guide-content li { color: var(--muted, #69617b); font-size: 14px; line-height: 1.72; }
.guide-content ul,
.guide-content ol { padding-left: 20px; }
.guide-checklist { display: grid; margin: 18px 0 0; padding: 0; gap: 9px; list-style: none; }
.guide-checklist li { position: relative; padding: 12px 14px 12px 39px; border-radius: 12px; background: color-mix(in srgb, var(--violet, #7657ff) 6%, var(--white, #fff)); }
.guide-checklist li::before { position: absolute; left: 14px; content: "✓"; color: #2bb78b; font-weight: 950; }
.guide-callout { margin: 18px 0; padding: 17px 18px; border-left: 4px solid var(--pink, #ff3ca6); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--pink, #ff3ca6) 7%, var(--white, #fff)); }
.guide-callout strong { display: block; margin-bottom: 4px; }
.guide-callout p { margin: 0; }
.guide-next { display: flex; margin-top: 12px; padding: 24px; align-items: center; justify-content: space-between; gap: 20px; border-radius: 18px; background: linear-gradient(125deg, #18122e, #2b1d57); color: #fff; }
.guide-next p { margin: 4px 0 0; color: rgba(255,255,255,.65); }
.guide-next a { flex: 0 0 auto; color: #fff; font-weight: 900; }

@media (max-width: 820px) {
  .guide-proof { grid-template-columns: 1fr; }
  .guide-proof div { border-right: 0; border-bottom: 1px solid var(--line, rgba(56, 38, 104, .15)); }
  .guide-proof div:last-child { border-bottom: 0; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-article { grid-template-columns: 1fr; }
  .guide-toc { position: static; }
}
@media (max-width: 540px) {
  .commerce-disclosure,
  .guide-hero,
  .guide-proof,
  .guide-grid,
  .guide-article { width: min(100% - 24px, 1280px); }
  .guide-next { align-items: flex-start; flex-direction: column; }
}