/* ============================================================
   developers.css - Developers.html page styles (v2, teal)
   Teal accent (--tap-teal) to tie the page to the POS Partner
   program; dark hero + code surfaces, warm light body sections.
   ============================================================ */

/* ---------- HERO ---------- */
.dev-hero {
  position: relative;
  background:
    radial-gradient(1200px 700px at 80% 18%, color-mix(in oklab, var(--tap-teal) 32%, transparent) 0%, transparent 60%),
    radial-gradient(900px 500px at 8% 100%, color-mix(in oklab, var(--tap-teal) 16%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #121815 0%, #0E1311 100%);
  color: #fff;
  padding: 72px var(--pad-x) 96px;
  overflow: hidden;
}
.dev-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.5;
}
.dev-hero-inner {
  position: relative;
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.dev-tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.dev-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  color: #5FD3CE;
  background: color-mix(in oklab, var(--tap-teal) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--tap-teal) 42%, transparent);
}
.dev-tag-soft {
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  letter-spacing: 0.06em; text-transform: none; font-weight: 600;
}
.dev-h1 {
  font-size: clamp(48px, 6.8vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 24px;
  color: #fff;
  text-wrap: balance;
}
.dev-h1-em { color: #5FD3CE; font-style: italic; }
.dev-deck {
  font-size: 19px; line-height: 1.55;
  color: rgba(255,255,255,0.74);
  max-width: 540px; margin: 0 0 32px;
  font-weight: 350;
}
.dev-deck strong { color: #fff; font-weight: 600; }
.dev-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* primary CTAs are themed teal via --p-grad on body[data-product=developers] (see TEAL OVERRIDES) */

/* ---------- TERMINAL ---------- */
.dev-hero-right { min-width: 0; }
.dev-terminal {
  background: #0C100E;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  position: relative;
}
.dev-terminal::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--tap-teal) 72%, transparent) 0%, transparent 60%);
  z-index: -1; filter: blur(40px); opacity: 0.55;
}
.dev-term-head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.dev-term-dots { display: flex; gap: 6px; }
.dev-term-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.dev-term-title {
  text-align: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}
.dev-term-copy {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.10);
}
.dev-term-body {
  margin: 0;
  padding: 18px 20px;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  overflow-x: auto;
  white-space: pre;
}
.dev-term-body .c   { color: rgba(255,255,255,0.40); }
.dev-term-body .kw  { color: #4FD1C5; }
.dev-term-body .str { color: #7BE3A4; }
.dev-term-body .num { color: #4AC3FF; }
.dev-term-body .op  { color: rgba(255,255,255,0.55); }
.dev-term-body .prop { color: #C7A2FF; }

/* ---------- PARTNER PROOF BAND (dark, image marks + quote) ---------- */
.dev-partners {
  position: relative;
  background:
    radial-gradient(900px 380px at 50% 0%, color-mix(in oklab, var(--tap-teal) 14%, transparent) 0%, transparent 60%),
    #0F1512;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: var(--pad-y) var(--pad-x);
}
.dev-partners-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
}
.dev-partners-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #5FD3CE;
  margin-bottom: 14px;
}
.dev-partners-h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.08;
  color: #fff; margin: 0 0 16px; text-wrap: balance;
}
.dev-partners-h2 .tl { color: #5FD3CE; }
.dev-partners-lede {
  font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.66);
  max-width: 620px; margin: 0 0 40px;
}
.dev-partners-row {
  display: flex; align-items: center; gap: 36px 64px; flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.dev-partner-logo { display: flex; align-items: center; height: 56px; }
.dev-partner-logo img { width: auto; display: block; opacity: 0.96; }
.dev-partner-logo img[alt="Surefire"] { max-height: 40px; max-width: 280px; }
.dev-partner-logo img[alt="GPK"]      { max-height: 54px; max-width: 220px; }
.dev-partner-logo img[alt="Canary"]   { max-height: 40px; max-width: 250px; }
.dev-partner-logo--lg { height: 74px; }
.dev-partner-logo--lg img { max-height: 70px; max-width: 320px; filter: brightness(0) invert(1); }
.dev-partners-quote {
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.4; color: #fff;
  max-width: 860px; margin: 40px 0 18px; text-wrap: balance;
}
.dev-partners-quote::before { content: "\201C"; color: #5FD3CE; }
.dev-partners-quote::after { content: "\201D"; color: #5FD3CE; }
.dev-partners-attrib { font-size: 14px; color: rgba(255,255,255,0.6); }
.dev-partners-attrib strong { color: #fff; font-weight: 700; }
.dev-partners-note { font-size: 13px; color: rgba(255,255,255,0.45); margin: 14px 0 0; }
@media (max-width: 640px) {
  .dev-partners-row { gap: 24px 40px; }
}

/* ---------- SHARED: eyebrow goes teal on this page ---------- */
.dev-pillars .eyebrow,
.dev-caps .eyebrow,
.dev-sdk .eyebrow,
.dev-commercials .eyebrow { color: var(--tap-teal); }

/* ---------- PILLARS (why build) ---------- */
.dev-pillars {
  max-width: 1280px; margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}
.dev-pillars-inner { display: flex; flex-direction: column; gap: 36px; }
.dev-pillars-h2 {
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  margin: 12px 0 0; text-wrap: balance;
}
.dev-pillars-h2 .tl { color: var(--tap-teal); }
.dev-pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.dev-pillar {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 16px;
  padding: 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.dev-pillar-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--tap-teal) 12%, #fff);
  color: var(--tap-teal-deep);
}
.dev-pillar-icon svg { width: 22px; height: 22px; }
.dev-pillar h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.dev-pillar p { font-size: 14.5px; line-height: 1.55; color: var(--tap-ink-2); margin: 0; }
.dev-pillar-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--tap-line); padding-top: 14px;
}
.dev-pillar-list li {
  font-size: 13px; color: var(--tap-ink); padding-left: 18px;
  position: relative;
}
.dev-pillar-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tap-teal);
}

/* ---------- CAPABILITIES + SURFACE ---------- */
.dev-caps {
  max-width: 1280px; margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}
.dev-caps-inner { display: flex; flex-direction: column; gap: 48px; }
.dev-caps-head { max-width: 720px; }
.dev-caps-head h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  margin: 12px 0 12px; text-wrap: balance;
}
.dev-caps-head p { font-size: 17px; color: var(--tap-ink-2); line-height: 1.55; }
.dev-caps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.dev-cap {
  display: grid; grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 18px 18px;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 12px;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms, background 120ms;
}
.dev-cap:hover {
  border-color: var(--tap-teal);
  background: color-mix(in oklab, var(--tap-teal) 6%, #fff);
  transform: translateY(-2px);
}
.dev-cap-glyph {
  grid-row: 1 / span 2;
  width: 44px; height: 44px; border-radius: 10px;
  background: color-mix(in oklab, var(--tap-teal) 12%, #fff);
  color: var(--tap-teal-deep);
  display: grid; place-items: center;
}
.dev-cap-glyph svg { width: 22px; height: 22px; }
.dev-cap-name {
  font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
  color: var(--tap-ink);
}
.dev-cap-sub { font-size: 12.5px; color: var(--tap-ink-2); }
.dev-cap:hover .dev-cap-glyph { background: #fff; }

/* ---------- QUICKSTART ---------- */
.dev-sdk {
  background: var(--tap-bg-warm);
  border-top: 1px solid var(--tap-line);
  border-bottom: 1px solid var(--tap-line);
  padding: var(--pad-y) var(--pad-x);
}
.dev-sdk-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px;
  align-items: center;
}
.dev-sdk-text h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  margin: 12px 0 14px; text-wrap: balance;
}
.dev-sdk-text p { font-size: 17px; color: var(--tap-ink-2); line-height: 1.55; max-width: 460px; }
.dev-sdk-list {
  list-style: none; padding: 0; margin: 24px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.dev-sdk-list li {
  font-size: 14.5px; line-height: 1.55; color: var(--tap-ink);
  padding-left: 22px; position: relative;
}
.dev-sdk-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tap-teal);
}
.dev-sdk-list strong { color: var(--tap-teal-deep); font-weight: 700; }

/* SDK install commands (names + commands only) */
.dev-sdk-install {
  list-style: none; padding: 18px 0 0; margin: 4px 0 0;
  border-top: 1px solid var(--tap-line);
  display: flex; flex-direction: column; gap: 0;
}
.dev-sdk-install li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--tap-line);
}
.dev-sdk-install li:last-child { border-bottom: none; }
.dev-sdk-install .lang {
  flex: none; width: 56px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--tap-ink);
}
.dev-sdk-install code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--tap-teal-deep);
  background: color-mix(in oklab, var(--tap-teal) 8%, #fff);
  border: 1px solid color-mix(in oklab, var(--tap-teal) 20%, transparent);
  border-radius: 6px; padding: 3px 9px;
}
.dev-sdk-note {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0;
  font-size: 13px; color: var(--tap-ink-2);
}
.dev-sdk-note svg { width: 15px; height: 15px; color: var(--tap-teal-deep); flex: none; }

.dev-sdk-code {
  background: #0C100E;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.dev-tabs {
  display: flex; gap: 0;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 8px;
}
.dev-tab {
  background: none; border: none;
  padding: 12px 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.dev-tab:hover { color: #fff; }
.dev-tab.active {
  color: #5FD3CE;
  border-bottom-color: var(--tap-teal);
}
.dev-code-block {
  margin: 0; padding: 22px 22px;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.85);
  overflow-x: auto;
  white-space: pre;
}
.dev-code-block .c   { color: rgba(255,255,255,0.40); font-style: italic; }
.dev-code-block .kw  { color: #4FD1C5; }
.dev-code-block .str { color: #7BE3A4; }
.dev-code-block .num { color: #4AC3FF; }
.dev-code-block .op  { color: rgba(255,255,255,0.55); }
.dev-code-block .prop { color: #C7A2FF; }

/* ---------- INTEGRATION FLOW (reuse .ai-loop dark) ---------- */
.dev-flow { padding: var(--pad-y) var(--pad-x); }

/* ---------- COMMERCIALS (structure-only, matches Partners) ---------- */
.dev-commercials {
  max-width: 1280px; margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}
.dev-commercials h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  margin: 12px 0 28px; text-wrap: balance;
}
.dev-commercials h2 .tl { color: var(--tap-teal); }
.dev-terms {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 16px;
  overflow: hidden;
}
.dev-term {
  display: grid; grid-template-columns: 320px 1fr; gap: 28px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--tap-line);
}
.dev-term:last-child { border-bottom: 0; }
.dev-term-name { font-size: 16px; font-weight: 800; letter-spacing: -0.012em; color: var(--tap-ink); line-height: 1.3; }
.dev-term-desc { font-size: 14px; color: var(--tap-ink-2); line-height: 1.55; }
.dev-terms-foot {
  font-size: 14px; color: var(--tap-ink-2); line-height: 1.6;
  margin: 22px 0 0; max-width: 720px;
}
.dev-terms-foot strong { color: var(--tap-ink); font-weight: 700; }

/* ---------- TRUST + SECURITY band ---------- */
.dev-trust {
  background: var(--tap-bg-warm);
  border-top: 1px solid var(--tap-line);
  border-bottom: 1px solid var(--tap-line);
  padding: 56px var(--pad-x);
}
.dev-trust-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1.5fr; gap: 56px; align-items: start;
}
.dev-trust-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.12;
  margin: 12px 0 14px; text-wrap: balance;
}
.dev-trust-head .eyebrow { color: var(--tap-teal); }
.dev-trust-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--tap-teal-deep);
  margin-top: 6px;
}
.dev-trust-link:hover { text-decoration: underline; }
.dev-trust-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.dev-trust-item {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 12px;
  padding: 18px 20px;
}
.dev-trust-mark {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--tap-teal) 12%, #fff);
  color: var(--tap-teal-deep);
}
.dev-trust-mark svg { width: 19px; height: 19px; }
.dev-trust-item-title { font-size: 15px; font-weight: 700; letter-spacing: -0.008em; color: var(--tap-ink); }
.dev-trust-item-sub { font-size: 13.5px; color: var(--tap-ink-2); line-height: 1.5; margin-top: 3px; }

/* ---------- CLOSING BLOCK ---------- */
.dev-close {
  background: linear-gradient(180deg, #121815 0%, #0E1311 100%);
  color: #fff;
  padding: var(--pad-y) var(--pad-x);
  position: relative; overflow: hidden;
}
.dev-close::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 480px at 50% 0%, color-mix(in oklab, var(--tap-teal) 26%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.dev-close-inner {
  position: relative; max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.dev-close .eyebrow { color: #5FD3CE; }
.dev-close h2 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.04;
  margin: 0; color: #fff; text-wrap: balance;
}
.dev-close p { font-size: 18px; color: rgba(255,255,255,0.74); line-height: 1.55; max-width: 540px; margin: 0; }
.dev-close-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* ---------- TEAL OVERRIDES (kill orange accents on this page) ----------
   developers.css loads only on Developers.html, so these page-scoped
   overrides retheme the product-theming vars + any orange that uses the
   brand token directly. Setting --p-grad/--p-color teal makes product.css
   theme every primary button + the subnav teal automatically. */
body[data-product="developers"] {
  --p-color: #0D8E8E;
  --p-color-deep: #086464;
  --p-color-tint: #E0F3F3;
  --p-color-bubble: #EBF7F7;
  --p-grad: linear-gradient(135deg, #14B8B8, #086464);
}
/* Integration path band: teal step numbers + dark-teal surface (was warm-brown + orange) */
.ai-loop.dev-flow {
  background: linear-gradient(135deg, #15201D 0%, #0E1311 100%);
}
.ai-loop.dev-flow .ai-loop-step-num { color: #5FD3CE; }
.ai-loop.dev-flow .eyebrow.on-dark { color: #5FD3CE; }
/* Sticky "book a demo" CTA chrome */
.sticky-cta-dot { background: var(--tap-teal) !important; }
/* Newsletter form focus ring */
.footer-form input:focus {
  border-color: var(--tap-teal) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tap-teal) 18%, transparent) !important;
}

/* Newsletter eyebrow + dot */
.footer-newsletter .eyebrow { color: var(--tap-teal-deep); }
.footer-newsletter .eyebrow::before { background: var(--tap-teal); }

/* Align the integration band + subnav to the same 1280 content edge as the hero */
.ai-loop.dev-flow .ai-loop-inner { max-width: 1280px; }
.prod-subnav-inner { max-width: 1280px; }

/* Anchored sections clear the main nav + sticky subnav */
#overview, #why-build, #capabilities, #quickstart, #integration {
  scroll-margin-top: 128px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .dev-hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .dev-pillars-grid, .dev-caps-grid { grid-template-columns: 1fr 1fr; }
  .dev-sdk-inner, .dev-trust-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  .dev-term { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
}
@media (max-width: 640px) {
  .dev-pillars-grid, .dev-caps-grid { grid-template-columns: 1fr; }
  .dev-term-body, .dev-code-block { font-size: 11.5px; padding: 16px 14px; }
}

/* ---------- GUTTER ALIGNMENT ----------
   Full-bleed sections (dark/warm backgrounds) keep their background edge-to-edge
   but carry the horizontal gutter on the INNER wrapper, so their content lands on
   the same --pad-x edge as the nav, subnav and the capped sections. */
.dev-hero, .dev-partners, .dev-sdk, .ai-loop.dev-flow, .dev-trust {
  padding-left: 0; padding-right: 0;
}
.dev-hero-inner, .dev-partners-inner, .dev-sdk-inner, .ai-loop.dev-flow .ai-loop-inner, .dev-trust-inner {
  padding-left: var(--pad-x); padding-right: var(--pad-x);
}