.hero h1{
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.07; letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink-900);
  text-wrap: balance;
}
.hero-sub{
  margin: 0;
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--ink-500); text-wrap: pretty;
}
.hero-actions{ display: flex; gap: var(--space-3); flex-wrap: wrap; }

.jc-code pre code{ font: inherit; }
.hero .jc-split__body{ gap: 0; }
.code-stack{ display: grid; }
.code-stack > pre{ grid-area: 1 / 1; }
.code-stack > pre[hidden]{ display: block; visibility: hidden; }
.tab .tab-lang{ display: block; width: 20px; height: 20px; }

.api-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.api-grid--stack{ grid-template-columns: minmax(0, 1fr); }

.api-steps{ list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.api-steps li{ display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); }
.api-steps h3{ margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink-900); }
.api-steps p{ margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-700); }
.api-steps code, .faq-a code{ font-family: var(--font-mono); font-size: 13px; }

.faq{ padding-block: var(--space-6) var(--space-8); }
.faq-head h2{
  margin: 16px 0;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.09; letter-spacing: -0.025em;
  font-weight: 600; text-wrap: balance;
}
.faq-item > summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink-900);
  transition: background .15s ease, color .15s ease;
  grid-row: 1;
}
.faq-item > summary .faq-ic{
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--surface-sunken); color: var(--ink-700);
  display: grid; place-items: center;
  transition: background .2s ease, color .2s ease;
}
.faq-a a{ color: var(--blue-600); }
.faq-a a:hover{ color: var(--blue-700); }

.cta-card{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: 32px; text-align: center;
  background: var(--inverse);
  border-radius: var(--radius-lg);
  color: var(--on-inverse);
}
.cta-card h2{ margin: 0; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
.cta-card p{ margin: 0 0 var(--space-2); max-width: 480px; font-size: 18px; color: var(--on-inverse-muted); text-wrap: pretty; }
.cta-buttons{ display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 280px; }

@media (min-width: 981px) and (min-height: 640px){
  .hero.jc-section{ padding-block: var(--space-12); }
}
@media (max-width: 640px){
  .api-grid{ grid-template-columns: minmax(0, 1fr); }
  .faq-item > summary{ padding: 18px 20px; font-size: 16px; gap: 14px; }
  .faq-a{ padding: 20px; font-size: 14px; }
}