:root {
  --gold: #c9a84c;
  --gold-light: #f0cf82;
  --gold-dark: #8b6914;
  --black: #080807;
  --charcoal: #10100e;
  --panel: #161511;
  --panel-2: #1b1710;
  --border: #2c2415;
  --border-soft: #1d1912;
  --text: #f6f0e7;
  --muted: #b2a58d;
  --dim: #786d5d;
  --blue: #36aee2;
  --danger: #d46b55;
  --ok: #7ccf9b;
  --max: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .32;
  mask-image: linear-gradient(to bottom, #000 0, transparent 76%);
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px 40px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(8, 8, 7, .94);
  backdrop-filter: blur(16px);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-light);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.logo-mark {
  width: 50px;
  height: 36px;
  color: var(--gold);
  display: inline-flex;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.nav-launch-mobile {
  display: none;
}

.nav-links a,
.footer-links a,
.blog-sidebar a,
.text-link {
  color: var(--muted);
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.nav-links a:hover,
.footer-links a:hover,
.blog-sidebar a:hover,
.text-link:hover {
  color: var(--gold-light);
}

.nav-actions,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-launch {
  min-height: 38px;
  padding: 9px 15px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--border);
  background: var(--charcoal);
  color: var(--gold-light);
  border-radius: 8px;
  min-height: 40px;
  padding: 0 14px;
  font: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.btn svg,
.text-link svg,
.feature-icon svg,
.pricing-card li svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-gold {
  background: var(--gold);
  color: #050505;
}

.btn-gold:hover {
  background: var(--gold-light);
}

.btn-outline,
.btn-ghost {
  color: var(--gold-light);
  border-color: rgba(201, 168, 76, .42);
  background: rgba(201, 168, 76, .04);
}

.btn-outline:hover,
.btn-ghost:hover {
  border-color: var(--gold);
  background: rgba(201, 168, 76, .1);
}

.btn-lg {
  min-height: 50px;
  padding: 14px 24px;
}

.hero,
.page-hero,
.workflow,
.features,
.comparison,
.pricing,
.solution-map,
.content-hub,
.faq,
.blog-decision-paths,
.blog-layout,
.article-shell,
.landing-shell,
.start-steps,
.start-shell,
.start-plans,
.start-support,
.final-cta {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.hero {
  min-height: calc(100vh - 73px);
  display: grid;
  place-items: center;
  gap: 38px;
  padding: 58px 0 44px;
  text-align: center;
}

.hero-copy {
  max-width: 880px;
  margin: 0 auto;
}

.eyebrow,
.section-label {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

h1,
h2 {
  font-family: "Playfair Display", Georgia, serif;
}

h1 {
  font-size: 64px;
  font-weight: 900;
  max-width: 920px;
  margin: 0 auto;
}

h2 {
  font-size: 42px;
  font-weight: 900;
}

h3 {
  font-size: 20px;
}

p {
  margin: 0;
}

.hero-sub,
.page-hero p,
.section-head > p:last-child,
.final-cta p,
.article-header > p {
  color: var(--muted);
  font-size: 18px;
  font-weight: 300;
}

.hero-sub {
  max-width: 760px;
  margin: 22px auto 30px;
}

.hero-actions {
  justify-content: center;
}

.proof-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.proof-strip span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: #11100c;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
}

#features,
#pricing,
#faq,
#next-steps,
#setup-routes,
#plans,
.start-plans .pricing-card {
  scroll-margin-top: 96px;
}

.product-stage {
  position: relative;
  width: min(100%, 980px);
  min-height: 390px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 18px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(240, 207, 130, .08), transparent 38%),
    #0d0c09;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .35);
}

.dashboard-card,
.phone-card,
.gate-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(16, 15, 12, .95);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .26);
}

.dashboard-main {
  min-height: 310px;
  padding: 18px;
  text-align: left;
}

.card-top,
.member-row,
.metrics-row {
  display: grid;
  align-items: center;
  gap: 12px;
}

.card-top {
  grid-template-columns: auto 1fr auto;
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.card-top strong {
  color: var(--ok);
}

.status-dot {
  width: 9px;
  height: 9px;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(124, 207, 155, .1);
}

.metrics-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0;
}

.metrics-row div {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 14px;
  background: #11100d;
}

.metrics-row span,
.gate-card span {
  display: block;
  color: var(--dim);
  font-size: 12px;
}

.metrics-row strong {
  display: block;
  margin-top: 6px;
  color: var(--gold-light);
  font-size: 28px;
  line-height: 1;
  font-family: "Playfair Display", Georgia, serif;
}

.member-table {
  display: grid;
  gap: 8px;
}

.member-row {
  grid-template-columns: 1.1fr .9fr auto;
  min-height: 42px;
  padding: 9px 12px;
  background: #0e0d0b;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
}

.member-row.head {
  background: transparent;
  border: 0;
  min-height: 24px;
  color: var(--dim);
}

.member-row b {
  justify-self: end;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
}

.ok {
  color: var(--ok);
  background: rgba(124, 207, 155, .1);
}

.warn {
  color: var(--gold-light);
  background: rgba(201, 168, 76, .1);
}

.bad {
  color: var(--danger);
  background: rgba(212, 107, 85, .1);
}

.phone-card {
  position: relative;
  min-height: 300px;
  padding: 36px 14px 16px;
  background: linear-gradient(180deg, #141924 0%, #0d0c0a 100%);
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 6px;
  border-radius: 999px;
  background: #282b33;
}

.chat-head {
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 16px;
}

.chat-bubble {
  width: fit-content;
  max-width: 100%;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 13px;
  text-align: left;
}

.chat-bubble.dark {
  background: #202225;
  color: #d8e0eb;
}

.chat-bubble.gold {
  margin-left: auto;
  background: var(--gold);
  color: #050505;
  font-weight: 800;
}

.gate-card {
  position: absolute;
  left: 48px;
  bottom: 18px;
  width: 260px;
  padding: 14px;
  text-align: left;
}

.gate-card strong {
  display: block;
  margin-top: 4px;
}

.gate-line {
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--ok));
}

section {
  padding-top: 84px;
  padding-bottom: 84px;
}

.band {
  width: 100%;
  max-width: none;
  padding-left: max(24px, calc((100vw - var(--max)) / 2));
  padding-right: max(24px, calc((100vw - var(--max)) / 2));
  background: #0d0c09;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.section-head {
  max-width: 760px;
  margin-bottom: 36px;
}

.section-head.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head h2 {
  margin-bottom: 14px;
}

.section-subhead {
  max-width: 720px;
  margin: 34px 0 18px;
}

.section-subhead h3 {
  font-size: 24px;
}

.section-subhead p {
  margin-top: 8px;
  color: var(--muted);
}

.pain-grid,
.workflow-grid,
.feature-grid,
.pricing-grid,
.solution-grid,
.topic-grid,
.article-grid,
.glossary-grid,
.search-results {
  display: grid;
  gap: 16px;
}

.pain-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pain-grid article,
.workflow-step,
.feature-card,
.pricing-card,
.solution-card,
.topic-card,
.landing-section,
.landing-sidebar,
.article-card,
.blog-row,
.glossary-card,
.search-result,
.takeaways,
.faq-list details,
.faq-inline details {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.pain-grid article {
  padding: 22px;
}

.pain-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-light);
}

.pain-grid span,
.workflow-step p,
.feature-card p,
.pricing-card p,
.article-card p,
.blog-row p,
.glossary-card p,
.search-result p,
.article-content p,
.article-content li,
.faq-list p,
.faq-inline p {
  color: var(--muted);
}

.workflow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workflow-step {
  padding: 22px;
  min-height: 210px;
}

.workflow-step span {
  display: block;
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  font-weight: 900;
  opacity: .55;
  margin-bottom: 16px;
}

.workflow-step h3,
.feature-card h3,
.pricing-card h3,
.article-card h3 {
  margin-bottom: 10px;
}

.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card {
  padding: 22px;
  min-height: 228px;
  transition: border-color .16s ease, transform .16s ease;
}

.feature-card:hover,
.solution-card:hover,
.topic-card:hover,
.article-card:hover,
.blog-row:hover,
.glossary-card:hover,
.search-result:hover {
  border-color: rgba(201, 168, 76, .55);
  transform: translateY(-2px);
}

.feature-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--gold-light);
  background: #10100c;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.compare-table {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.compare-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  border-bottom: 1px solid var(--border-soft);
}

.compare-table > div:last-child {
  border-bottom: 0;
}

.compare-table span {
  padding: 16px;
  color: var(--muted);
}

.compare-table span:first-child,
.compare-table span:last-child {
  color: var(--text);
}

.compare-head span {
  background: #100f0c;
  color: var(--gold-light);
  font-weight: 800;
}

.pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-card {
  position: relative;
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-height: 430px;
}

.pricing-card.featured {
  border-color: var(--gold);
  background: #130f05;
}

.popular {
  align-self: flex-start;
  margin-bottom: 12px;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--gold);
  color: #050505;
  font-size: 12px;
  font-weight: 900;
}

.plan-role {
  color: var(--muted);
  font-style: italic;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 18px 0 4px;
}

.price-annual {
  color: var(--dim);
  font-size: 13px;
  margin: 0 0 14px;
}

.pricing-offer {
  margin-top: 26px;
  border: 1px solid var(--gold-dark);
  border-radius: 14px;
  background: linear-gradient(135deg, #15100a, #0d0b06);
  padding: 18px 22px;
  text-align: center;
}

.pricing-offer strong {
  display: block;
  color: var(--gold-light);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  margin-bottom: 6px;
}

.pricing-offer p {
  color: var(--muted);
  margin: 0;
}

.story {
  padding: 0;
}

.story-panel {
  max-width: var(--max);
  margin: 0 auto;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--panel-2), var(--charcoal));
  padding: 40px 44px;
}

.story-panel h2 {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--text);
  margin: 10px 0 14px;
}

.story-panel p {
  color: var(--muted);
  max-width: 70ch;
}

.story-highlight {
  color: var(--gold-light) !important;
  font-weight: 600;
}

.price strong {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--gold-light);
  font-size: 42px;
  line-height: 1;
}

.price span {
  color: var(--muted);
}

.pricing-card ul,
.takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-card li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--muted);
  margin: 10px 0;
}

.pricing-card li svg {
  width: 16px;
  height: 16px;
  color: var(--gold-light);
  margin-top: 4px;
}

.pricing-card .btn {
  margin-top: auto;
}

.content-hub .section-head {
  max-width: 820px;
}

.blog-decision-paths {
  padding-top: 24px;
  padding-bottom: 44px;
}

.blog-decision-paths .section-head {
  max-width: 820px;
}

.decision-path-grid,
.decision-path-featured {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.decision-path-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100%;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 38%),
    linear-gradient(145deg, rgba(201, 168, 76, .08), transparent 48%),
    var(--panel);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .28);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.decision-path-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(240, 207, 130, .18));
  opacity: .76;
}

.decision-path-card > * {
  position: relative;
  z-index: 1;
}

.decision-path-card:hover {
  border-color: rgba(201, 168, 76, .5);
  box-shadow: 0 26px 58px rgba(0, 0, 0, .34);
  transform: translateY(-1px);
}

.decision-path-card > span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.decision-path-card h3 {
  margin: 10px 0;
  font-size: 24px;
}

.decision-path-card p {
  color: var(--muted);
}

.decision-path-card div {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.decision-path-card a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding-top: 8px;
  border-top: 1px solid rgba(201, 168, 76, .14);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

.decision-path-card a:hover {
  border-color: rgba(240, 207, 130, .5);
  color: var(--text);
  transform: translateX(2px);
}

.decision-path-card a svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.decision-path-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.decision-path-mini {
  position: relative;
  display: grid;
  grid-template-columns: minmax(126px, .42fr) minmax(0, 1fr) minmax(176px, .64fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px 16px 20px;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, .14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(201, 168, 76, .06), transparent 36%),
    rgba(255, 255, 255, .025);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.decision-path-mini::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--gold), rgba(240, 207, 130, .2));
}

.decision-path-mini > * {
  position: relative;
  z-index: 1;
}

.decision-path-mini:hover {
  border-color: rgba(201, 168, 76, .44);
  background:
    linear-gradient(90deg, rgba(201, 168, 76, .1), transparent 40%),
    rgba(255, 255, 255, .035);
  transform: translateY(-1px);
}

.decision-path-mini > span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.decision-path-mini h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.decision-path-mini p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.decision-path-mini nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: flex-end;
}

.decision-path-mini a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(240, 207, 130, .16);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

.decision-path-mini a:hover {
  border-color: rgba(240, 207, 130, .72);
  color: var(--text);
  transform: translateX(2px);
}

.decision-path-mini a svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.solution-map .section-head {
  max-width: 860px;
}

.compact-map {
  padding-top: 28px;
  padding-bottom: 44px;
}

.topic-brief {
  padding-top: 62px;
  padding-bottom: 62px;
}

.topic-brief-inner,
.topic-brief-answers {
  width: min(100%, var(--max));
  margin-left: auto;
  margin-right: auto;
}

.topic-brief-inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: 28px;
  align-items: start;
}

.topic-brief-copy h2 {
  max-width: 680px;
  margin-bottom: 14px;
}

.topic-brief-copy > p:last-of-type {
  max-width: 690px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 300;
}

.topic-checks {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.topic-checks article,
.topic-brief-answers details {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.topic-checks article {
  padding: 18px;
}

.topic-checks h3 {
  margin-bottom: 8px;
  color: var(--gold-light);
}

.topic-checks p {
  color: var(--muted);
}

.topic-diagram {
  margin: 0;
}

.topic-brief-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.topic-brief-answers details {
  padding: 18px;
}

.topic-brief-answers p {
  color: var(--muted);
}

.solution-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-grid.tight {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-card {
  transition: border-color .16s ease, transform .16s ease;
}

.topic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.compact-topics {
  margin-bottom: 16px;
}

.topic-card {
  background: #11100d;
  transition: border-color .16s ease, transform .16s ease;
}

.solution-card a,
.topic-card a {
  display: block;
  height: 100%;
  padding: 22px;
  text-decoration: none;
}

.solution-card span,
.topic-card span {
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
}

.solution-card h3,
.topic-card h3 {
  margin: 10px 0;
}

.solution-card p,
.topic-card p {
  color: var(--muted);
}

.solution-card small,
.topic-card small {
  display: block;
  margin-top: 16px;
  color: var(--dim);
}

.article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-card {
  position: relative;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.article-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(201, 168, 76, .82), rgba(240, 207, 130, .16));
  opacity: .62;
}

.article-card:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

.article-card a,
.blog-row a {
  display: block;
  height: 100%;
  padding: 22px;
  text-decoration: none;
}

.article-card a {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.article-card span,
.blog-row span,
.article-meta,
.breadcrumbs {
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
}

.article-card h3,
.blog-row h2,
.blog-row h3 {
  margin: 10px 0;
}

.article-card small,
.blog-row small {
  color: var(--dim);
}

.article-card small {
  margin-top: auto;
  padding-top: 16px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--gold-light);
  font-weight: 800;
}

.faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

details {
  padding: 18px 20px;
}

summary {
  cursor: pointer;
  font-weight: 800;
}

details p {
  margin-top: 12px;
}

.final-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(201, 168, 76, .12), rgba(54, 174, 226, .08)),
    #0f0e0b;
}

.final-cta h2 {
  max-width: 720px;
  margin-bottom: 10px;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: end;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0;
  border-top: 1px solid var(--border-soft);
}

.footer-brand p,
.footer-copy {
  color: var(--dim);
  font-size: 13px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  font-size: 13px;
}

.footer-copy {
  grid-column: 1 / -1;
}

.page-hero {
  padding-top: 72px;
  padding-bottom: 44px;
}

.page-hero.compact {
  max-width: 900px;
}

.page-hero h1 {
  margin: 0;
  max-width: 850px;
  font-size: 56px;
}

.page-hero p:last-child {
  margin-top: 18px;
}

.landing-hero {
  padding-bottom: 34px;
}

.blog-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.blog-sidebar {
  position: sticky;
  top: 96px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

.blog-sidebar h2 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  margin-bottom: 12px;
}

.blog-sidebar a {
  display: block;
  padding: 9px 0;
  border-top: 1px solid var(--border-soft);
}

.blog-list {
  display: grid;
  gap: 34px;
}

.blog-row {
  transition: border-color .16s ease, transform .16s ease;
}

.blog-cluster {
  display: grid;
  gap: 16px;
  scroll-margin-top: 96px;
}

.blog-cluster-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.blog-cluster-head span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-cluster-head h2 {
  margin-bottom: 8px;
  font-size: 34px;
}

.blog-cluster-head p {
  max-width: 720px;
  color: var(--muted);
}

.blog-cluster-head a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--gold-light);
  font-weight: 900;
  text-decoration: none;
}

.blog-cluster-head svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-cluster-list {
  display: grid;
  gap: 16px;
}

.search-hero {
  padding-bottom: 28px;
}

.search-form {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  max-width: 820px;
}

.search-form label {
  color: var(--gold-light);
  font-weight: 800;
}

.search-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.search-form input {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0f0e0b;
  color: var(--text);
  padding: 0 15px;
  font: inherit;
}

.search-form input::placeholder {
  color: var(--dim);
}

.search-panel,
.glossary-grid,
.comparison-matrix,
.methodology-list,
.answer-index,
.answer-list,
.alternative-grid,
.guide-directory,
.checklist-layout,
.decision-grid,
.intent-overview,
.intent-matrix,
.intent-proof,
.resource-intents,
.resource-map,
.tool-grid,
.tool-workbench,
.tool-example {
  width: min(var(--max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.resource-intents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.resource-intents article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(201, 168, 76, .06), transparent 44%),
    var(--panel);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.resource-intents article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(201, 168, 76, .78), rgba(240, 207, 130, .14));
}

.resource-intents article > * {
  position: relative;
  z-index: 1;
}

.resource-intents article:hover {
  border-color: rgba(201, 168, 76, .48);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
  transform: translateY(-1px);
}

.resource-intents span {
  display: block;
  margin-bottom: 12px;
  color: var(--gold-light);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}

.resource-intents p {
  color: var(--muted);
}

.resource-intents div {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(201, 168, 76, .14);
}

.resource-intents a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(240, 207, 130, .16);
  color: var(--gold-light);
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

.resource-intents a:hover {
  border-color: rgba(240, 207, 130, .72);
  color: var(--text);
  transform: translateX(2px);
}

.resource-map {
  padding-bottom: 50px;
}

.resource-lanes {
  display: grid;
  gap: 34px;
}

.resource-lane {
  display: grid;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.resource-lane-head {
  display: grid;
  grid-template-columns: minmax(132px, .34fr) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.resource-lane-head > span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.resource-lane-head h3 {
  margin: 0 0 8px;
  font-size: 26px;
}

.resource-lane-head p {
  max-width: 780px;
  color: var(--muted);
}

.resource-lane-head strong {
  justify-self: end;
  min-width: max-content;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--gold-light);
  font-size: 12px;
  line-height: 1;
}

.resource-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.resource-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, .024);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.resource-card:hover {
  border-color: rgba(240, 207, 130, .45);
  background: rgba(201, 168, 76, .07);
  transform: translateY(-1px);
}

.resource-card > span {
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.resource-card strong {
  line-height: 1.2;
}

.resource-card small {
  display: block;
  margin-top: 7px;
  color: var(--gold-light);
  font-weight: 800;
  line-height: 1.35;
}

.resource-card p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.intent-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 34px;
}

.intent-overview article,
.intent-card,
.intent-proof {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.intent-overview article {
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(201, 168, 76, .08), transparent 52%),
    var(--panel);
}

.intent-overview span,
.intent-card > span {
  display: block;
  margin-bottom: 12px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.intent-overview h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

.intent-overview p,
.intent-card h3,
.intent-proof p {
  color: var(--muted);
}

.intent-matrix {
  padding-bottom: 34px;
}

.intent-board {
  display: grid;
  gap: 16px;
}

.intent-card {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.8fr);
  gap: 20px;
  padding: 24px;
}

.intent-card h3 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

.intent-query-list {
  counter-reset: intent-link;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.intent-query-list a {
  counter-increment: intent-link;
  position: relative;
  display: block;
  min-height: 100%;
  padding: 15px 15px 15px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.intent-query-list a::before {
  content: counter(intent-link, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 16px;
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.intent-query-list a:hover {
  border-color: rgba(240, 207, 130, .45);
  background: rgba(201, 168, 76, .08);
  transform: translateY(-1px);
}

.intent-query-list strong,
.intent-query-list small,
.intent-query-list em {
  display: block;
}

.intent-query-list strong {
  line-height: 1.25;
}

.intent-query-list small {
  margin-top: 6px;
  color: var(--gold-light);
  font-weight: 800;
  line-height: 1.35;
}

.intent-query-list em {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.intent-proof {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  margin-bottom: 54px;
}

.intent-proof h2 {
  margin-bottom: 10px;
  font-size: 30px;
}

.intent-proof p {
  max-width: 820px;
}

.resource-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow-x: auto;
}

.resource-row {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 1.8fr) 1fr .92fr;
  min-width: 980px;
  color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
}

.resource-row:last-child {
  border-bottom: 0;
}

.resource-row span {
  padding: 16px;
  border-right: 1px solid var(--border-soft);
}

.resource-row span:last-child {
  border-right: 0;
}

.resource-row strong {
  display: block;
  color: var(--text);
  line-height: 1.2;
}

.resource-row small {
  display: block;
  margin-top: 7px;
  color: var(--dim);
  line-height: 1.5;
}

.resource-row:not(.resource-head) {
  transition: background .16s ease, color .16s ease;
}

.resource-row:not(.resource-head):hover {
  background: rgba(201, 168, 76, .07);
  color: var(--text);
}

.resource-head {
  background: #100f0c;
}

.resource-head span {
  color: var(--gold-light);
  font-weight: 900;
}

.comparison-matrix {
  display: grid;
  gap: 0;
  margin-bottom: 50px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow-x: auto;
}

.matrix-row {
  display: grid;
  grid-template-columns: 1.08fr repeat(4, minmax(156px, 1fr));
  min-width: 980px;
  border-bottom: 1px solid var(--border-soft);
}

.matrix-row:last-child {
  border-bottom: 0;
}

.matrix-row > span,
.matrix-row > div {
  padding: 16px;
  border-right: 1px solid var(--border-soft);
  color: var(--muted);
}

.matrix-row > span:last-child,
.matrix-row > div:last-child {
  border-right: 0;
}

.matrix-head {
  background: #100f0c;
}

.matrix-head span {
  color: var(--gold-light);
  font-weight: 900;
}

.matrix-row strong {
  display: block;
  color: var(--text);
}

.matrix-row small {
  display: block;
  margin-top: 8px;
  color: var(--dim);
}

.alternative-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 56px;
}

.alternative-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)), var(--panel);
}

.alternative-card > span {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.alternative-card h2 {
  margin-top: 13px;
  font-size: clamp(24px, 2.2vw, 32px);
}

.alternative-card p,
.alternative-card small {
  color: var(--muted);
}

.alternative-card ul {
  display: grid;
  gap: 9px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.alternative-card li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.45;
}

.alternative-card li::before {
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  content: "";
}

.alternative-card small {
  display: block;
  margin-top: auto;
  padding-top: 6px;
  line-height: 1.5;
}

.alternative-card .text-link {
  margin-top: 18px;
}

.guide-directory {
  margin-bottom: 58px;
}

.guide-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.guide-group {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(201, 168, 76, .055), transparent 46%),
    var(--panel);
}

.guide-group > span {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.guide-group h3 {
  margin-top: 12px;
  font-size: 24px;
}

.guide-group p {
  color: var(--muted);
}

.guide-link-list {
  counter-reset: guide-link;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.guide-link-list a {
  counter-increment: guide-link;
  position: relative;
  display: block;
  padding: 14px 15px 14px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.guide-link-list a::before {
  content: counter(guide-link, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 15px;
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.guide-link-list a:hover {
  border-color: rgba(240, 207, 130, .45);
  background: rgba(201, 168, 76, .08);
  transform: translateY(-1px);
}

.guide-link-list strong {
  display: block;
  line-height: 1.25;
}

.guide-link-list small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
}

.guide-directory > .text-link {
  margin-top: 22px;
}

.alternative-decision {
  padding-top: 62px;
  padding-bottom: 70px;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.decision-grid article {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.decision-grid h3 {
  font-size: 20px;
}

.decision-grid p {
  margin-top: 12px;
  color: var(--muted);
}

.decision-grid a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--gold-light);
  font-weight: 800;
}

@media (max-width: 760px) {
  .resource-table,
  .comparison-matrix {
    display: grid;
    gap: 12px;
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .resource-head,
  .matrix-head {
    display: none;
  }

  .resource-row,
  .matrix-row {
    grid-template-columns: 1fr;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
  }

  .resource-row span,
  .matrix-row > span,
  .matrix-row > div {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .resource-row span:last-child,
  .matrix-row > span:last-child,
  .matrix-row > div:last-child {
    border-bottom: 0;
  }

  .resource-row span::before,
  .matrix-row:not(.matrix-head) > span::before,
  .matrix-row:not(.matrix-head) > div::before {
    display: block;
    margin-bottom: 7px;
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .resource-row span:nth-child(1)::before {
    content: "Intent";
  }

  .resource-row span:nth-child(2)::before {
    content: "Resource";
  }

  .resource-row span:nth-child(3)::before {
    content: "Primary query";
  }

  .resource-row span:nth-child(4)::before {
    content: "Type";
  }

  .matrix-row:not(.matrix-head) > div::before {
    content: "Criterion";
  }

  .matrix-row:not(.matrix-head) > span:nth-child(2)::before {
    content: "Manual admin";
  }

  .matrix-row:not(.matrix-head) > span:nth-child(3)::before {
    content: "Generic bot";
  }

  .matrix-row:not(.matrix-head) > span:nth-child(4)::before {
    content: "Membership platform";
  }

  .matrix-row:not(.matrix-head) > span:nth-child(5)::before {
    content: "KickThemBot fit";
  }
}

.methodology-list {
  display: grid;
  gap: 16px;
  padding-bottom: 44px;
}

.methodology-list article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.methodology-list span {
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 38px;
  font-weight: 900;
  opacity: .72;
}

.methodology-list h2 {
  margin-bottom: 8px;
  font-size: 28px;
}

.methodology-list p {
  color: var(--muted);
}

.answer-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 26px;
}

.answer-index article,
.answer-list article,
.checklist-layout article {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.answer-index article {
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(201, 168, 76, .08), transparent 46%),
    var(--panel);
}

.answer-index h2 {
  margin-bottom: 10px;
  font-size: 22px;
}

.answer-index a {
  display: block;
  padding: 9px 0;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}

.answer-index a:hover,
.answer-index a:focus-visible {
  color: var(--gold-light);
  padding-left: 6px;
}

.answer-list {
  display: grid;
  gap: 16px;
  padding-bottom: 46px;
}

.answer-list article {
  scroll-margin-top: 96px;
  padding: 24px;
  border-left: 3px solid rgba(201, 168, 76, .5);
  transition: border-color .16s ease, transform .16s ease;
}

.answer-list article:hover {
  border-color: rgba(201, 168, 76, .55);
  transform: translateY(-1px);
}

.answer-list span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.answer-list h2 {
  margin: 8px 0 10px;
  font-size: 30px;
}

.answer-list p {
  max-width: 880px;
  color: var(--muted);
}

.answer-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.answer-list div a {
  padding: 7px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--gold-light);
  background: #100f0c;
  font-size: 13px;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}

.answer-list div a:hover,
.answer-list div a:focus-visible {
  border-color: rgba(201, 168, 76, .5);
  background: rgba(201, 168, 76, .08);
}

.answer-detail-shell,
.answer-detail-card,
.answer-related-grid {
  width: min(var(--max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.answer-detail-hero {
  margin-left: auto;
  margin-right: auto;
}

.answer-detail-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(201, 168, 76, .1), transparent 42%),
    var(--panel);
}

.answer-detail-card > span {
  display: block;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.answer-detail-card h2 {
  margin-bottom: 12px;
  font-size: 34px;
}

.answer-detail-card > p {
  max-width: 900px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.55;
}

.answer-source-note {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

.answer-source-note strong {
  color: var(--gold-light);
}

.answer-source-note p {
  max-width: 860px;
  color: var(--muted);
}

.answer-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 28px;
  padding-bottom: 46px;
}

.answer-related-grid > div {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.answer-related-grid h2 {
  margin-bottom: 16px;
  font-size: 28px;
}

.answer-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.answer-link-list a {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #100f0c;
  color: var(--gold-light);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}

.answer-link-list a:hover,
.answer-link-list a:focus-visible {
  border-color: rgba(201, 168, 76, .5);
  background: rgba(201, 168, 76, .08);
}

.start-hero {
  max-width: 920px;
}

.start-launch-note {
  max-width: 680px;
  margin: 16px auto 0;
  color: var(--dim);
  font-size: 13px;
}

.start-steps {
  padding-bottom: 64px;
}

.start-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.start-step-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}

.start-step-action p {
  max-width: 560px;
  color: var(--muted);
}

.start-shell {
  padding-bottom: 48px;
}

.start-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.start-route-card,
.start-support {
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(201, 168, 76, .08), transparent 44%),
    var(--panel);
}

.start-route-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px;
}

.start-route-card > span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.start-route-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  line-height: 1.08;
}

.start-route-card p,
.start-route-card li,
.start-support p {
  color: var(--muted);
}

.start-route-card ol {
  margin: 0;
  padding-left: 20px;
}

.start-route-card li + li {
  margin-top: 8px;
}

.compact-pricing {
  padding-bottom: 0;
}

.start-support {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 24px;
  align-items: center;
  padding: 28px;
  margin-bottom: 48px;
}

.start-support h2 {
  margin-bottom: 12px;
  max-width: 760px;
}

.start-support-links {
  display: grid;
  gap: 10px;
}

.start-support-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #100f0c;
  color: var(--gold-light);
  font-weight: 900;
  text-decoration: none;
}

.checklist-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 48px;
}

.checklist-layout article {
  padding: 24px;
}

.checklist-layout span {
  display: block;
  color: var(--gold);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 38px;
  font-weight: 900;
  opacity: .72;
}

.checklist-layout h2 {
  margin: 8px 0 14px;
  font-size: 28px;
}

.checklist-layout ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.checklist-layout li + li {
  margin-top: 10px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 48px;
}

.tool-card,
.tool-panel,
.tool-notes article {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.tool-card {
  transition: border-color .16s ease, transform .16s ease;
}

.tool-card:hover {
  border-color: rgba(201, 168, 76, .55);
  transform: translateY(-2px);
}

.tool-card a {
  display: grid;
  gap: 8px;
  min-height: 230px;
  padding: 22px;
  text-decoration: none;
}

.tool-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tool-card h3 {
  font-size: 26px;
}

.tool-card p,
.tool-card small {
  color: var(--muted);
}

.tool-workbench {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-bottom: 48px;
}

.tool-workbench > div:first-child {
  position: sticky;
  top: 96px;
}

.tool-panel {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.tool-example {
  padding-top: 0;
  padding-bottom: 48px;
}

.tool-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tool-example-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.tool-example-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tool-example-card p,
.tool-example-card li {
  color: var(--muted);
}

.tool-example-card ul,
.tool-example-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.tool-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tool-form label,
.permission-list label {
  display: grid;
  gap: 7px;
  color: var(--gold-light);
  font-weight: 800;
}

.tool-form input,
.tool-form select {
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0f0e0b;
  color: var(--text);
  padding: 0 12px;
  font: inherit;
}

.permission-list {
  display: grid;
  gap: 12px;
}

.permission-list label {
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #11100d;
  color: var(--muted);
}

.permission-list input {
  margin-top: 6px;
  accent-color: var(--gold);
}

.tool-output {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(201, 168, 76, .28);
  border-radius: 8px;
  background: #100f0c;
  padding: 18px;
}

.tool-output strong {
  color: var(--gold-light);
}

.tool-output p,
.tool-output li {
  color: var(--muted);
}

.tool-output ol {
  margin: 0;
  padding-left: 20px;
}

.tool-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tool-metrics span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}

.tool-metrics b {
  color: var(--gold-light);
  font-size: 24px;
}

.tool-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tool-notes article {
  padding: 18px;
}

.tool-notes p {
  color: var(--muted);
}

.search-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.search-result,
.glossary-card {
  transition: border-color .16s ease, transform .16s ease;
}

.search-result a {
  display: grid;
  gap: 8px;
  min-height: 178px;
  padding: 22px;
  text-decoration: none;
}

.search-result span,
.glossary-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.search-result h3 {
  font-size: 24px;
}

.muted-note {
  margin-top: 18px;
  color: var(--dim);
}

.glossary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 10px;
  padding-bottom: 44px;
}

.glossary-card {
  scroll-margin-top: 96px;
  padding: 22px;
  min-height: 238px;
}

.glossary-card h2 {
  margin: 9px 0 10px;
  font-size: 26px;
}

.glossary-card small {
  display: block;
  margin-top: 16px;
  color: var(--dim);
}

.article-shell {
  padding-top: 56px;
  padding-bottom: 48px;
}

.article-header {
  max-width: 860px;
  margin-bottom: 38px;
}

.breadcrumbs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.article-header h1 {
  margin: 0 0 18px;
  max-width: 900px;
  font-size: 58px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  color: var(--dim);
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  color: var(--dim);
  font-size: 13px;
  font-weight: 800;
}

.article-byline span,
.article-byline a {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: #100f0c;
  padding: 7px 10px;
}

.article-byline a {
  color: var(--gold-light);
}

.article-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.toc {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

.toc strong {
  color: var(--gold-light);
}

.toc a {
  color: var(--muted);
  text-decoration: none;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  font-size: 14px;
}

.article-content {
  max-width: 800px;
  min-width: 0;
}

.article-content section {
  padding: 0 0 38px;
}

.article-content h2 {
  font-size: 32px;
  margin-bottom: 14px;
}

.article-content p + p {
  margin-top: 14px;
}

.article-decision-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 34px;
  padding-bottom: 0 !important;
}

.article-decision-summary article {
  min-height: 100%;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(201, 168, 76, .08), transparent 52%),
    #11100d;
}

.article-decision-summary span {
  display: block;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.article-decision-summary strong {
  display: block;
  color: var(--text);
  line-height: 1.25;
}

.article-decision-summary p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

.article-decision-summary a {
  color: var(--gold-light);
  font-weight: 800;
}

.article-intent-owner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 34px;
  border: 1px solid rgba(201, 168, 76, .32);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #11100d;
}

.article-content .article-intent-owner {
  padding: 24px;
}

.article-intent-owner span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.article-intent-owner h2 {
  margin-bottom: 8px;
  font-size: 27px;
}

.article-intent-owner p {
  color: var(--muted);
}

.article-intent-owner .btn {
  min-width: 220px;
}

.landing-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-top: 32px;
}

.landing-sidebar {
  position: sticky;
  top: 96px;
  padding: 20px;
}

.landing-sidebar strong,
.sidebar-links span {
  display: block;
  color: var(--gold-light);
  font-weight: 900;
}

.landing-sidebar p {
  margin: 8px 0 18px;
  color: var(--muted);
}

.sidebar-links {
  display: grid;
  gap: 9px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

.sidebar-links a {
  color: var(--muted);
  text-decoration: none;
}

.sidebar-links a:hover {
  color: var(--gold-light);
}

.landing-main {
  display: grid;
  gap: 16px;
}

.landing-section {
  padding: 26px;
}

.landing-section h2 {
  font-size: 32px;
  margin-bottom: 12px;
}

.landing-section p {
  color: var(--muted);
}

.landing-section ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 20px 0 0;
}

.landing-section li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #11100d;
  padding: 12px;
  font-size: 14px;
}

.landing-section li svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--gold-light);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.landing-proof {
  margin-top: 36px;
  margin-bottom: 8px;
}

.landing-proof-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.landing-proof .section-head p:last-child {
  color: var(--muted);
}

.tool-comparison-hub {
  margin-top: 36px;
}

#tool-category-comparison,
#comparison-sources,
#primary-comparison-hub,
#evidence-table {
  scroll-margin-top: 90px;
}

.tool-comparison-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.tool-comparison-hub .section-head p:last-child {
  color: var(--muted);
}

.comparison-method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 30px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.comparison-method > div {
  padding: 20px 24px 20px 0;
}

.comparison-method > div + div {
  border-left: 1px solid var(--border);
  padding-left: 24px;
}

.comparison-method span {
  display: block;
  margin-bottom: 7px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.comparison-method p {
  color: var(--muted);
}

.tool-comparison-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.tool-comparison-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}

.tool-comparison-table caption {
  padding: 16px 18px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 14px;
}

.tool-comparison-table th,
.tool-comparison-table td {
  padding: 18px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tool-comparison-table tr > :last-child {
  border-right: 0;
}

.tool-comparison-table tbody tr:last-child > * {
  border-bottom: 0;
}

.tool-comparison-table thead th {
  color: var(--gold-light);
  background: #0b0a08;
  font-size: 13px;
  font-weight: 900;
}

.tool-comparison-table tbody th {
  background: #11100d;
}

.tool-comparison-table tbody th strong,
.tool-comparison-table tbody th span,
.tool-comparison-table tbody th a {
  display: block;
}

.tool-comparison-table tbody th strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
}

.tool-comparison-table tbody th span {
  margin: 5px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.tool-comparison-table tbody th a {
  color: var(--gold-light);
  font-size: 13px;
  text-decoration: none;
}

.tool-comparison-table tbody th a + a {
  margin-top: 8px;
}

.tool-comparison-table tbody th svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  vertical-align: -2px;
}

.tool-comparison-table .tool-guide-link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tool-comparison-table td {
  color: var(--muted);
  font-size: 14px;
}

.comparison-sources {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
  gap: 28px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.comparison-sources h3 {
  margin-bottom: 10px;
  font-size: 26px;
}

.comparison-sources > div > p:last-child,
.comparison-reviewed {
  color: var(--muted);
}

.comparison-sources ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  margin: 0;
  padding-left: 22px;
}

.comparison-sources li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--gold);
}

.comparison-sources li a,
.comparison-sources li span {
  display: block;
}

.comparison-sources li a {
  color: var(--gold-light);
  font-weight: 800;
}

.comparison-sources li span {
  color: var(--muted);
  font-size: 13px;
}

.comparison-reviewed {
  grid-column: 1 / -1;
  margin-top: 0;
  font-size: 14px;
}

.lifecycle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.lifecycle-grid article {
  min-height: 210px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.lifecycle-grid span {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lifecycle-grid h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.lifecycle-grid p {
  color: var(--muted);
}

.ops-console {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 16px;
  border: 1px solid rgba(201, 168, 76, .28);
  border-radius: 8px;
  background: #11100d;
  padding: 18px;
}

.ops-console-main,
.ops-console-side {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #090907;
}

.ops-console-main {
  padding: 18px;
}

.ops-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.ops-flow span {
  position: relative;
  min-height: 86px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 800;
}

.ops-flow span::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--ok));
}

.ops-console-side {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
}

.ops-console-side strong {
  color: var(--gold-light);
  font-size: 18px;
}

.ops-console-side p {
  color: var(--muted);
}

.ops-console-side div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ops-console-side div span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: #11100c;
  color: var(--dim);
  font-size: 12px;
  font-weight: 800;
}

.takeaways {
  padding: 22px !important;
  margin-bottom: 34px;
}

.anchor-offset {
  position: relative;
  top: -112px;
  display: block;
  height: 0;
  visibility: hidden;
}

.article-trust {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(232, 194, 122, .24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(232, 194, 122, .08), rgba(20, 18, 14, .96) 42%),
    #11100d;
  padding: 24px;
  margin-bottom: 34px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

.article-trust::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-light), rgba(232, 194, 122, .18));
}

.article-content .article-trust {
  padding: 24px;
}

.article-trust-head {
  max-width: 680px;
  margin-bottom: 18px;
}

.article-trust-head span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.article-trust-head h2 {
  margin-bottom: 10px;
}

.article-trust-head p {
  color: var(--muted);
}

.article-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.article-trust-grid article {
  border: 1px solid rgba(232, 194, 122, .18);
  border-radius: 8px;
  background: rgba(8, 8, 7, .72);
  padding: 18px;
  min-height: 100%;
}

.article-trust-grid span {
  display: block;
  margin-bottom: 10px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.article-trust-grid p {
  color: var(--muted);
  font-size: 15px;
}

.article-diagram {
  margin: 0 0 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.article-diagram img {
  display: block;
  width: 100%;
  height: auto;
  background: #080807;
}

.article-diagram figcaption {
  border-top: 1px solid var(--border-soft);
  padding: 14px 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.article-evidence {
  margin-bottom: 34px;
  padding-bottom: 0 !important;
}

.article-evidence-heading {
  margin-bottom: 16px;
}

.article-evidence-heading span {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.article-evidence-heading h2 {
  margin-bottom: 0;
}

.article-evidence-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.article-evidence table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

.article-evidence caption {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  text-align: left;
  font-size: 14px;
}

.article-evidence th,
.article-evidence td {
  padding: 15px 16px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.article-evidence tr > :last-child {
  border-right: 0;
}

.article-evidence tbody tr:last-child > * {
  border-bottom: 0;
}

.article-evidence thead th {
  color: var(--gold-light);
  background: #0b0a08;
  font-size: 13px;
}

.article-evidence tbody th {
  color: var(--text);
  background: #11100d;
  font-size: 14px;
}

.article-evidence td {
  color: var(--muted);
  font-size: 14px;
}

.howto-steps {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 22px !important;
  margin-bottom: 34px;
}

.howto-steps ol {
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.howto-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  color: var(--muted);
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

.howto-steps li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--gold-light);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.takeaways li {
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
}

.takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.related .article-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1180px) and (min-width: 1041px) {
  .site-nav {
    gap: 16px;
    padding-inline: 24px;
  }

  .nav-links {
    gap: 14px;
  }
}

@media (max-width: 1040px) {
  .site-nav {
    grid-template-columns: auto auto;
  }

  .nav-toggle {
    display: inline-flex;
    justify-self: end;
    align-items: center;
  }

  .nav-links,
  .nav-actions {
    display: none;
  }

  .nav-links.open {
    grid-column: 1 / -1;
    display: grid;
    justify-content: stretch;
    gap: 0;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
  }

  .nav-links.open a {
    padding: 12px 0;
  }

  .nav-links.open .nav-launch-mobile {
    display: inline-flex;
    justify-content: center;
    margin-top: 8px;
    border: 1px solid var(--gold-dark);
    border-radius: 8px;
    color: var(--gold-light);
  }

  .workflow-grid,
  .feature-grid,
  .pricing-grid,
  .start-step-grid,
  .lifecycle-grid,
  .ops-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solution-grid,
  .solution-grid.tight,
  .topic-grid,
  .article-grid,
  .article-decision-summary,
  .decision-path-grid,
  .decision-path-featured,
  .alternative-grid,
  .guide-group-grid,
  .intent-overview,
  .intent-query-list,
  .resource-intents,
  .resource-card-list,
  .glossary-grid,
  .answer-index,
  .checklist-layout,
  .decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-stage {
    grid-template-columns: 1fr;
  }

  .decision-path-compact {
    grid-template-columns: 1fr;
  }

  .decision-path-mini {
    grid-template-columns: minmax(116px, .4fr) minmax(0, 1fr);
  }

  .decision-path-mini nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .phone-card {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
  }

  .gate-card {
    position: static;
    width: 100%;
  }

  .resource-lane-head {
    grid-template-columns: minmax(116px, .34fr) minmax(0, 1fr);
  }

  .resource-lane-head strong {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .blog-layout,
  .article-body,
  .landing-shell,
  .start-route-grid,
  .start-support,
  .ops-console,
  .topic-brief-inner,
  .intent-card,
  .intent-proof,
  .tool-workbench {
    grid-template-columns: 1fr;
  }

  .intent-proof {
    display: grid;
    align-items: start;
  }

  .blog-sidebar,
  .toc,
  .landing-sidebar,
  .tool-workbench > div:first-child {
    position: static;
  }

  .blog-cluster-head {
    display: grid;
    align-items: start;
  }
}

@media (max-width: 760px) {
  .site-nav {
    padding: 14px 20px;
  }

  .hero,
  .page-hero,
  .workflow,
  .features,
    .comparison,
    .pricing,
    .solution-map,
    .blog-decision-paths,
    .content-hub,
    .faq,
    .blog-layout,
    .article-shell,
    .landing-shell,
    .start-steps,
    .start-shell,
    .start-plans,
    .start-support,
    .search-panel,
    .alternative-grid,
    .guide-directory,
    .decision-grid,
    .intent-overview,
    .intent-matrix,
    .intent-proof,
    .resource-intents,
    .resource-map,
    .topic-brief-inner,
    .topic-brief-answers,
    .glossary-grid,
    .comparison-matrix,
    .methodology-list,
    .answer-detail-shell,
    .answer-detail-card,
    .answer-related-grid,
    .answer-index,
    .answer-list,
    .checklist-layout,
    .tool-grid,
    .tool-workbench,
    .tool-example,
    .final-cta,
    .site-footer {
    width: min(100% - 32px, var(--max));
  }

  section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  h1,
  .page-hero h1,
  .article-header h1 {
    font-size: 40px;
  }

  .answer-detail-hero h1 {
    font-size: 36px;
    line-height: 1.08;
  }

  h2 {
    font-size: 31px;
  }

  .hero {
    min-height: auto;
    padding-top: 46px;
  }

  .hero-sub,
  .page-hero p,
  .section-head > p:last-child,
  .final-cta p,
  .article-header > p {
    font-size: 16px;
  }

  .product-stage {
    padding: 12px;
    min-height: 0;
  }

  .metrics-row,
  .member-row,
  .pain-grid,
    .workflow-grid,
    .feature-grid,
    .pricing-grid,
    .solution-grid,
    .solution-grid.tight,
    .topic-grid,
    .article-grid,
    .article-decision-summary,
    .decision-path-grid,
    .decision-path-featured,
    .decision-path-compact,
    .search-results,
    .alternative-grid,
    .guide-group-grid,
    .intent-overview,
    .intent-query-list,
    .decision-grid,
    .topic-brief-answers,
    .answer-related-grid,
    .start-route-grid,
    .start-step-grid,
    .article-trust-grid,
    .resource-intents,
    .resource-card-list,
    .glossary-grid,
    .answer-index,
    .checklist-layout,
    .tool-grid,
    .tool-example-grid,
    .tool-form,
    .tool-metrics,
    .tool-notes,
    .lifecycle-grid,
    .ops-flow,
    .related .article-grid,
    .landing-section ul,
    .article-intent-owner,
    .comparison-method,
    .comparison-sources,
    .comparison-sources ul {
    grid-template-columns: 1fr;
  }

  .start-step-action {
    align-items: stretch;
    flex-direction: column;
  }

  .start-step-action .btn {
    width: 100%;
  }

  .article-intent-owner .btn {
    width: 100%;
    min-width: 0;
  }

  .comparison-method > div {
    padding: 18px 0;
  }

  .comparison-method > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
    padding-left: 0;
  }

  .tool-comparison-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .tool-comparison-table,
  .tool-comparison-table tbody,
  .tool-comparison-table tr,
  .tool-comparison-table th,
  .tool-comparison-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .tool-comparison-table thead {
    display: none;
  }

  .tool-comparison-table caption {
    display: block;
    margin-bottom: 12px;
    border: 0;
    padding: 0;
  }

  .tool-comparison-table tbody tr {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
  }

  .tool-comparison-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .tool-comparison-table th,
  .tool-comparison-table td,
  .tool-comparison-table tbody tr:last-child > * {
    border: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .tool-comparison-table tbody tr > :last-child {
    border-bottom: 0;
  }

  .tool-comparison-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .article-evidence-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .article-evidence table,
  .article-evidence tbody,
  .article-evidence tr,
  .article-evidence th,
  .article-evidence td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .article-evidence thead {
    display: none;
  }

  .article-evidence caption {
    display: block;
    margin-bottom: 12px;
    border: 0;
    padding: 0;
  }

  .article-evidence tbody tr {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
  }

  .article-evidence tbody tr:last-child {
    margin-bottom: 0;
  }

  .article-evidence th,
  .article-evidence td,
  .article-evidence tbody tr:last-child > * {
    border: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .article-evidence tbody tr > :last-child {
    border-bottom: 0;
  }

  .article-evidence tbody th::before,
  .article-evidence td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .comparison-sources ul {
    padding-left: 20px;
  }

  .comparison-reviewed {
    grid-column: auto;
  }

  .decision-path-mini {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .decision-path-mini nav {
    justify-content: flex-start;
  }

  .decision-path-mini a {
    white-space: normal;
  }

  .start-route-card,
  .start-support {
    padding: 20px;
  }

  .start-route-card h3 {
    font-size: 25px;
  }

  .resource-lane-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .resource-lane-head h3 {
    font-size: 23px;
  }

  .ops-console {
    padding: 12px;
  }

  .ops-flow span {
    min-height: 72px;
  }

  .search-form > div {
    grid-template-columns: 1fr;
  }

  .methodology-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .member-row.head {
    display: none;
  }

  .member-row {
    gap: 5px;
  }

  .compare-table {
    gap: 12px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .compare-head {
    display: none !important;
  }

  .compare-table > div {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--panel);
  }

  .compare-table span {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
  }

  .compare-table span:last-child {
    border-bottom: 0;
    background: #101006;
  }

  .compare-table span::before {
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .compare-table span:nth-child(1)::before {
    content: "Need";
  }

  .compare-table span:nth-child(2)::before {
    content: "Manual setup";
  }

  .compare-table span:nth-child(3)::before {
    content: "KickThemBot";
  }

  .final-cta {
    display: grid;
    padding: 24px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  h1,
  .page-hero h1,
  .article-header h1 {
    font-size: 36px;
    line-height: 1.08;
  }

  .article-header {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  h1,
  .page-hero h1,
  .article-header h1 {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}