@import url("../../_ds/fonts.css");
@import url("../../_ds/theme.css");
@import url("../../_shared/chrome.css");
@import url("../../_shared/components.css");
@import url("../../_shared/audience-switcher.css");

/* ──────────────────────────────────────────────────────────
   /products/sdk — Every primitive, typed.

   The native-code surface.  Editorial-minimal; the page lives in
   your editor.  Hero signature: type `client.` and the seven
   primitives autocomplete in as typed methods.  Warm-dark,
   border-before-fill, type-led.
─────────────────────────────────────────────────────────── */

main {
  position: relative;
  z-index: 1;
}
.back-to-top,
.back-to-top * { cursor: none; }

/* ═══════════════════════════════════════════════════════════
   Act 1 — Hero  (typed-client autocomplete)
═══════════════════════════════════════════════════════════ */
.sk-hero-section {
  padding: clamp(100px, 15vh, 184px) var(--page-gutter, 7vw) clamp(80px, 11vh, 132px);
}
.sk-hero {
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  grid-template-areas: "code return" "foot foot";
  column-gap: clamp(40px, 5vw, 90px);
  row-gap: clamp(40px, 6vh, 72px);
  align-items: start;
}
.sk-hero-code { grid-area: code; min-width: 0; }
.sk-hero-foot { grid-area: foot; }

/* Live typed-return panel — the active method's return, synced. */
.sk-return {
  grid-area: return;
  align-self: center;
  position: relative;
  display: grid;
  min-height: 172px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: clamp(18px, 1.6vw, 26px);
}
.sk-return-card {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
  pointer-events: none;
}
.sk-return-card.is-active { opacity: 1; transform: none; }
.sk-return-type {
  margin: 0 0 12px;
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #7ADAE6;
}
.sk-return-body {
  margin: 0;
  font-family: var(--font-code);
  font-size: var(--mkt-body-xs);
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: none;
}
.sk-return-body::-webkit-scrollbar { display: none; }
.sk-rs { color: var(--text-tertiary); }
.sk-rn { color: var(--text-primary); }

/* The editor — borderless code on the warm-dark canvas. */
.sk-editor {
  margin-top: clamp(20px, 2.6vh, 34px);
  font-family: var(--font-code);
  font-size: var(--mkt-lead);
  line-height: 1.9;
}
.sk-line { margin: 0; color: var(--text-secondary); white-space: pre; }
.sk-kw  { color: var(--zen-purple-5, #7C4FE8); }
.sk-fn  { color: #7ADAE6; }
.sk-var { color: var(--text-primary); }
.sk-str { color: var(--text-tertiary); }
.sk-dot { color: var(--text-primary); }
/* Ghost completion — dim preview of the active method, like an IDE. */
.sk-ghost { color: var(--text-quaternary); transition: opacity 160ms ease; }
.sk-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  transform: translateY(0.16em);
  background: #7ADAE6;
  animation: sk-blink 1.05s step-end infinite;
}
@keyframes sk-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Autocomplete — hairline popup anchored under `client.`; the seven
   primitives cascade in as typed methods. */
.sk-ac {
  list-style: none;
  margin: 10px 0 0;
  padding: 6px;
  width: min(100%, 460px);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: transparent;
  /* popup enters as a whole, then items stagger in */
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top left;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sk-editor.is-open .sk-ac { opacity: 1; transform: none; }

.sk-ac-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0 10px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: var(--mkt-body-sm);
  /* stagger-in */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 200ms ease;
  transition-delay: calc(var(--i) * 55ms + 160ms);
}
.sk-editor.is-open .sk-ac-item { opacity: 1; transform: none; }
.sk-ac-item.is-active { background: rgba(255, 255, 255, 0.055); }
.sk-ac-name { color: #7ADAE6; }
.sk-ac-sig  { color: var(--text-tertiary); }
.sk-ac-ret  {
  justify-self: end;
  font-size: 0.86em;
  color: var(--text-quaternary);
  letter-spacing: 0.01em;
}

/* Claim + CTA share a baseline row — H1 left, CTA right. */
.sk-hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.sk-claim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.0;
  letter-spacing: var(--tracking-denser, -0.03em);
  color: var(--text-primary);
}
.sk-cta { flex-shrink: 0; margin-bottom: 6px; }
.sk-cta .link-cta { align-self: center; }

@media (max-width: 640px) {
  .sk-hero-foot { align-items: flex-start; }
  /* Keep "Start building free" + "Read the docs" side by side (they fit at
     phone widths); overrides the global cta-stack--inline column stack. */
  .sk-cta { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Below desktop: single column; the return panel is a wide-screen
     balancer, so it drops out and the editor + claim carry the hero. */
  .sk-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "code" "foot";
  }
  .sk-return { display: none; }
}
@media (max-width: 720px) {
  .sk-editor { font-size: var(--mkt-body); }
  .sk-ac { width: 100%; }
}

/* Wide tiers — scale type + widths so the hero commands the canvas. */
@media (min-width: 1600px) {
  .sk-hero { max-width: 1460px; grid-template-columns: minmax(0, 1fr) minmax(340px, 480px); }
  .sk-editor { font-size: 23px; }
  .sk-ac { width: min(100%, 520px); }
  .sk-claim { font-size: clamp(56px, 4.6vw, 76px); }
  .sk-return-body { font-size: 15px; }
}
@media (min-width: 1920px) {
  .sk-hero { max-width: 1620px; }
  .sk-editor { font-size: 25px; }
  .sk-ac { width: min(100%, 560px); }
  .sk-claim { font-size: 84px; }
}
@media (min-width: 2400px) {
  .sk-hero { max-width: 1840px; }
  .sk-editor { font-size: 28px; }
  .sk-claim { font-size: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-caret { animation: none; }
  .sk-ac, .sk-ac-item { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   Act 2 — Python and Node, same shape.  (scroll line sweep)
   Sticky stage; --p (0→1, JS) lights the program cumulatively,
   line-by-line, in lockstep across both columns.
═══════════════════════════════════════════════════════════ */
.sk-act2 { position: relative; min-height: 240vh; }
.sk-act2-stage {
  --p: 0;
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 5vh, 60px);
  padding: 0 var(--page-gutter, 7vw);
  text-align: center;
}
.sk-act2-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.02;
  letter-spacing: var(--tracking-dense, -0.024em);
  color: var(--text-primary);
}
.sk-langs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 60px);
  width: 100%;
  max-width: 1040px;
  text-align: left;
}
.sk-lang { min-width: 0; }
.sk-lang-label {
  margin: 0 0 16px;
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.sk-lang-code {
  margin: 0;
  font-family: var(--font-code);
  font-size: clamp(12.5px, 1vw, 15px);
  line-height: 2;
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: none;
}
.sk-lang-code::-webkit-scrollbar { display: none; }
.sk-l {
  display: block;
  color: var(--text-secondary);
  opacity: 0.2;
  transition: opacity 340ms ease;
}
.sk-l.is-lit { opacity: 1; }

@media (max-width: 720px) {
  .sk-act2 { min-height: 220vh; }
  .sk-langs { grid-template-columns: 1fr; gap: 28px; max-width: 420px; }
}

/* ═══════════════════════════════════════════════════════════
   Acts 3-4 — the teal section.  Solid #7ADAE6 revealed by a
   scroll bloom; dark content; body.is-on-teal inverts the topbar.
═══════════════════════════════════════════════════════════ */
.sk-teal {
  position: relative;
  isolation: isolate;
  color: #1D1612;
}
/* Teal enters as a vertical shutter/weave — columns grow (alternating
   from top / bottom), interlocking, then merge into solid teal.  --p
   (0→1) is driven by scroll entrance.  (Deliberately not a bloom.) */
/* Full-bleed SOLID teal underneath, so the shared topbar band-adapt watcher
   (_shared/nav-band-adapt.js) detects it. The weave now reads as dark shutters
   RETRACTING to reveal the teal (same interlocking motion, teal as the
   destination) instead of narrow teal slats the watcher can't see. */
.sk-teal-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #7ADAE6;
}
.sk-teal-slat {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--si, 0) * (100% / 6));
  width: calc(100% / 6 + 1px);
  background: var(--background);
  --s: clamp(0, (var(--p, 0) - var(--si, 0) * 0.06) / 0.55, 1);
  transform: scaleX(calc(1 - var(--s)));
  will-change: transform;
}
.sk-teal-slat:nth-child(odd)  { transform-origin: left; }
.sk-teal-slat:nth-child(even) { transform-origin: right; }
.sk-teal-h2, .sk-act4-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-denser, -0.03em);
  color: #1D1612;
}

/* Act 3 — typed result */
.sk-act3 {
  padding: clamp(120px, 18vh, 220px) var(--page-gutter, 7vw) clamp(80px, 10vh, 130px);
}
.sk-act3-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(36px, 5vw, 90px);
  align-items: center;
}
.sk-teal-h2 { font-size: var(--mkt-hero); line-height: 0.98; }
.sk-rdemo {
  font-family: var(--font-code);
  font-size: var(--mkt-body);
  line-height: 1.85;
}
.sk-rline { margin: 0; color: rgba(29, 22, 18, 0.75); white-space: pre; }
.sk-rvar { color: #1D1612; }
.sk-rnum { color: #1D1612; }
.sk-rdot { color: #1D1612; }
.sk-rghost { color: rgba(29, 22, 18, 0.4); }
.sk-rcaret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
  transform: translateY(0.16em); background: #7C4FE8;
  animation: sk-blink 1.05s step-end infinite;
}
.sk-rac {
  list-style: none; margin: 10px 0 0; padding: 6px;
  width: min(100%, 320px);
  border: 1px solid rgba(29, 22, 18, 0.22); border-radius: 12px;
}
.sk-rac-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 12px; border-radius: 7px;
  font-size: var(--mkt-body-sm);
  transition: background-color 200ms ease;
}
.sk-rac-item.is-active { background: rgba(29, 22, 18, 0.07); }
.sk-rac-name { color: #1D1612; font-weight: 600; }
.sk-rac-ret { color: rgba(29, 22, 18, 0.5); }

/* Act 4 — one client, every primitive */
.sk-act4 {
  padding: clamp(60px, 8vh, 120px) var(--page-gutter, 7vw) clamp(130px, 20vh, 240px);
  text-align: center;
}
.sk-act4-inner { max-width: 1100px; margin: 0 auto; }
.sk-teal-kicker {
  margin: 0 0 18px;
  font-family: var(--font-code); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(29, 22, 18, 0.55);
}
.sk-act4-h2 { font-size: clamp(46px, 8vw, 120px); line-height: 0.96; }
.sk-methods {
  margin: clamp(28px, 4vh, 48px) 0 0;
  font-family: var(--font-code);
  font-size: clamp(13px, 1.3vw, 18px);
  color: rgba(29, 22, 18, 0.5);
}
.sk-methods span { color: #1D1612; }

/* ── Topbar inversion while the teal section is under it ── */

@media (max-width: 900px) {
  .sk-act3-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-rcaret { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   Act 5 — It handles the hard parts.  (warm-dark, IO reveal)
═══════════════════════════════════════════════════════════ */
.sk-act5 { padding: clamp(110px, 16vh, 200px) var(--page-gutter, 7vw); }
.sk-act5-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: clamp(40px, 5vw, 90px);
  align-items: center;
}
.sk-act5-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero);
  line-height: 1.0;
  letter-spacing: var(--tracking-denser, -0.03em);
  color: var(--text-primary);
}
.sk-handles { list-style: none; margin: 0; padding: 0; }
.sk-handle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: clamp(16px, 2.2vh, 24px) 0;
  border-bottom: 1px solid var(--border-subtle);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 90ms);
}
.sk-handle:last-child { border-bottom: none; }
.sk-act5.is-in .sk-handle { opacity: 1; transform: none; }
.sk-handle-k { font-family: var(--font-base); font-weight: 600; font-size: var(--mkt-body); color: var(--text-primary); }
.sk-handle-d { font-family: var(--font-base); font-size: var(--mkt-body-sm); color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   Act 6 — Closer.  Install in one line + CTA.
═══════════════════════════════════════════════════════════ */
.sk-end {
  padding: clamp(120px, 18vh, 210px) var(--page-gutter, 7vw);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sk-end-h2 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero);
  line-height: 0.98;
  letter-spacing: var(--tracking-denser, -0.03em);
  color: var(--text-primary);
}
.sk-install {
  margin-top: clamp(28px, 4vh, 46px);
  font-family: var(--font-code);
  font-size: var(--mkt-body);
  line-height: 2.1;
}
.sk-install-line { margin: 0; color: var(--text-secondary); }
.sk-install-pr { color: var(--text-quaternary); margin-right: 8px; }
.sk-install-pkg { color: #7ADAE6; }
.sk-end-cta { margin-top: clamp(30px, 4.5vh, 52px); }

@media (max-width: 900px) {
  .sk-act5-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-handle { transition: none; }
}