/* ==========================================================================
   A1-API landing — in-place redesign
   Header tokens are copied from the site's own SPA build so the restored
   header renders identically (oklch values flattened from
   /static/css/index.*.css): primary #3ea4ec, fg #0a0a0a, border #e8e8e8,
   muted #606060, --radius 1rem => rounded-lg 16px, rounded-2xl 28.8px,
   --spacing .25rem => h-16 64px, h-12 48px, size-7 28px, 7xl 1280px.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* page palette: white + very light blue-grey + blue accents.
     There is no dark surface anywhere on the page - the bottom CTA used to be
     deep navy and is now a light gradient. */
  --bg: #ffffff;
  --soft: #f7f9fc;
  --ink: #0b1a2e;
  --text: #47536b;
  --muted: #6b7689;
  --line: #e3e8ef;
  --brand: #0e72bc;
  --brand-hover: #0a5a96;
  --brand-soft: #eaf3fb;

  /* restored header (SPA) */
  --spa-fg: #0a0a0a;
  --spa-muted: #606060;
  --spa-border: #e8e8e8;
  /* --spa-primary is the page-wide button colour: it is exactly the colour the
     header sign-in button renders, and every solid button now uses it. */
  --spa-primary: #3ea4ec;
  --spa-primary-hover: #2f93db;
  --spa-lg: 16px;
  --spa-md: 12.8px;

  /* inline code palette (light console) */
  --k-punc: #a3adbb;
  --k-key: #2f5d94;
  --k-str: #a5522a;
  --k-num: #1f7a5c;
  --k-com: #8b95a6;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --section-y: 104px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; color: var(--ink); letter-spacing: -0.022em; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   HEADER — restored PublicHeader
   ========================================================================== */
.hdr {
  position: fixed; inset-inline: 0; top: 0; z-index: 60;
  pointer-events: none;
}
.hdr-wrap {
  pointer-events: auto;
  margin: 0 auto; max-width: 1280px; padding: 0 24px;
  transition: max-width .7s var(--ease), padding .7s var(--ease);
}
.hdr-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 8px; gap: 12px;
  transition: height .7s var(--ease), border-radius .7s var(--ease),
              padding .7s var(--ease), background .7s var(--ease),
              box-shadow .7s var(--ease);
}

/* Squeeze step: below this the links tighten up instead of wrapping. The row
   is nowrap by design, so trimming padding is the only graceful give. */
@media (max-width: 1240px) {
  .hdr-links a { padding-left: 8px; padding-right: 8px; font-size: 13.5px; }
  .hdr-nav { gap: 8px; }
  .hdr-sep { margin: 0 5px; }
}
@media (max-width: 1080px) {
  .hdr-links a { padding-left: 6px; padding-right: 6px; font-size: 13px; }
  .hdr-sep { margin: 0 3px; }
}

/* scrolled -> floating pill, exactly like the original scrolled state */
.hdr.scrolled .hdr-wrap { max-width: 920px; padding: 12px; }
.hdr.scrolled .hdr-logo-text { display: none; }
.hdr.scrolled .hdr-nav {
  height: 48px; border-radius: 28.8px;
  padding-left: 16px; padding-right: 6px;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: saturate(180%) blur(40px);
  backdrop-filter: saturate(180%) blur(40px);
  box-shadow: 0 0 0 .5px rgba(232, 232, 232, .5), 0 2px 16px -6px rgba(0, 0, 0, .08);
}

/* 2026-10-14 scroll-pill fit fix: pill widened 832->920 + content compressed so
   the link row never overlaps the logo (right cluster grew: Telegram pill +
   bell button pushed it ~53px past the pill edge). */
.hdr.scrolled .hdr-links a { padding-left: 9px; padding-right: 9px; }
.hdr.scrolled .hdr-sep { margin: 0 5px; }
.hdr.scrolled .hdr-nav { gap: 8px; }

/* give the brand mark a little air before the wordmark; the trailing cluster is
   separated by the nav gap, not by a margin here, so the menu keeps its right
   alignment at every width. */
.hdr-logo { display: flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap;
  margin-right: 4px; }
.hdr-logo-box {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 21px; flex-shrink: 0;
}
/* keep the native 92x56 ratio (1.643) - do not square it off.
   Round 14 sized the mark down again (46x28 -> 34x21) so the lockup reads as a
   small logo beside the name rather than a dominant badge. At 21px against the
   11px wordmark the mark still leads, but no longer overwhelms it. */
.hdr-logo-box img { width: 34px; height: 21px; display: block; }
.hdr-logo-text {
  font-size: 11px; font-weight: 600; letter-spacing: -.01em; color: var(--spa-fg);
  white-space: nowrap;
}

/* flex: 1 1 auto + min-width: 0 lets this grow into the free space so that
   .hdr-nav's justify-content: space-between actually pushes the link row to the
   right; without flex-grow it collapses to its own content and the buttons end
   up hugging the links instead of sitting at the far edge. min-width: 0 (not
   the min-content floor) is what lets it give up padding, not width, when the
   viewport tightens. */
.hdr-right { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
/* The header must never wrap onto a second line. Nothing here may break, and
   the link row is allowed to give up padding (not width) as space runs out.
   justify-content: flex-end is what actually parks the menu on the RIGHT:
   with flex-grow the row owns the free space, and flex-end makes that space
   collect on the left of the row instead of being spread between the links.
   Without it the links fan out from the logo and the trailing cluster looks
   detached. */
.hdr-links {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  flex: 1 1 auto; flex-wrap: nowrap; min-width: 0;
}
/* Below 640px .hdr-right is display:none; flex-grow on a hidden box is inert,
   so .hdr-nav falls back to [logo | hamburger] pushed apart - still one line. */
.hdr-links a {
  padding: 6px 12px; border-radius: var(--spa-lg);
  font-size: 14px; font-weight: 500; color: var(--spa-muted);
  white-space: nowrap; transition: color .2s, padding .2s;
}
.hdr-links a:hover { color: var(--spa-fg); }

.hdr-sep { width: 1px; height: 16px; background: rgba(232, 232, 232, .4); margin: 0 8px; flex-shrink: 0; }

/* language switcher (icon-only, same footprint as the original ghost button) */
.lang { position: relative; flex-shrink: 0; }
.lang-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--spa-md); background: transparent;
  color: var(--spa-fg); cursor: pointer; transition: background .2s;
}
.lang-btn:hover { background: rgba(0, 0, 0, .05); }
.lang-btn svg { width: 17px; height: 17px; }
.lang-menu {
  display: none; position: absolute; top: 44px; right: 0; min-width: 148px;
  background: #fff; border: 1px solid var(--spa-border); border-radius: var(--spa-md);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .18); padding: 6px; z-index: 70;
}
.lang.open .lang-menu { display: block; }
.lang-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: none; border: 0; border-radius: 8px;
  font-family: var(--font); font-size: 14px; color: var(--spa-fg); cursor: pointer;
}
.lang-menu button:hover { background: #f5f5f5; }
.lang-menu button[aria-current="true"] { color: var(--spa-primary); font-weight: 600; }

.btn-tg {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 4px;
  height: 32px; padding: 0 12px; border-radius: var(--spa-lg);
  border: 1px solid var(--spa-border); background: #fff;
  font-size: 12px; font-weight: 500; color: var(--spa-fg); white-space: nowrap;
  flex-shrink: 0; transition: background .2s;
}
.btn-tg:hover { background: #f5f5f5; }
.tg-ico { width: 14px; height: 14px; }

.btn-signin {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: var(--spa-lg); background: var(--spa-primary); color: #fff;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  flex-shrink: 0; transition: opacity .2s;
}
.btn-signin:hover { opacity: .88; }

.hdr-mobile { display: none; }
.burger {
  width: 36px; height: 36px; border: 0; border-radius: var(--spa-md);
  background: transparent; cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 50%; width: 16px; height: 1.5px; margin-left: -8px;
  background: var(--spa-fg); border-radius: 2px;
  transition: transform .3s, top .3s, opacity .3s;
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 18px; }
.burger span:nth-child(3) { top: 23px; }
.burger.open span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 18px; transform: rotate(-45deg); }

/* mobile overlay */
.mnav {
  display: none;
  position: fixed; inset: 0; z-index: 55;
  background: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  padding: 84px 32px 40px;
  flex-direction: column; justify-content: space-between;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}
.mnav.open { opacity: 1; pointer-events: auto; }
.mnav-links { display: flex; flex-direction: column; gap: 4px; }
.mnav-links a {
  padding: 12px 0; font-size: 16px; font-weight: 500; color: var(--spa-muted);
  letter-spacing: -.015em; transition: color .2s;
}
.mnav-links a:hover { color: var(--spa-fg); }
.mnav-actions { display: flex; flex-direction: column; gap: 12px; }
.mnav-btn-tg, .mnav-btn-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; border-radius: var(--spa-lg); font-size: 14px; font-weight: 500;
}
.mnav-btn-tg { border: 1px solid var(--spa-border); color: var(--spa-fg); }
.mnav-btn-login { background: var(--spa-primary); color: #fff; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; overflow: hidden; }
/* reference hero: soft sky-blue wash across the top fading to white by
   ~60% of the first screen, plus a faint cyan cast toward the top-right.
   Sampled from the mock: #e2f2fe/#e1f4f6 at the top, #ffffff from ~y320. */
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(62% 58% at 88% -10%, rgba(205, 238, 240, .45) 0%, rgba(205, 238, 240, 0) 62%),
    linear-gradient(180deg, #e0f0fd 0%, #e9f5fe 30%, #f5faff 52%, #ffffff 74%);
}
.hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 56px; align-items: center;
  padding-top: 144px; padding-bottom: 92px; min-height: 648px;
}

/* two-line headline: line 1 = claim, line 2 = explanation. Sized so that
   neither line wraps on desktop (>= 900px) inside the 55% column. */
h1 { margin: 0; max-width: 660px; }
/* caps are measured against the 55% hero column (647px at >=1280px):
   line 1 needs <= ~52px, line 2 <= ~28px to stay on a single line. */
.h1-l1 {
  display: block;
  font-size: clamp(34px, 4.1vw, 52px);
  font-weight: 800; line-height: 1.08; letter-spacing: -.033em; color: var(--ink);
}
.h1-l2 {
  display: block; margin-top: 10px;
  font-size: clamp(18px, 2.05vw, 28px);
  font-weight: 700; line-height: 1.24; letter-spacing: -.02em; color: var(--text);
}
/* reference headline colour: azure -> periwinkle -> violet, clipped to the
   glyphs. Fallback stays var(--text) if background-clip:text is missing. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .h1-l2 {
    background-image: linear-gradient(92deg, #4a9bff 0%, #8b8cff 52%, #ae55ff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
/* small positioning tag above the headline: the former H1 line 1, demoted.
   Kept in sentence case (no uppercase transform) so the Russian wording reads
   exactly as authored. */
.hero-eyebrow {
  display: inline-block; margin-bottom: 16px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(14, 114, 188, .09);
  border: 1px solid rgba(14, 114, 188, .18);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--brand);
}
.hero-copy > .hero-sub { margin-top: 22px; }
.hero-sub {
  font-size: 19px; line-height: 1.55; color: var(--text); max-width: 600px;
}

.claim-row {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px;
}
/* "need help?" line under the two hero CTAs */
.hero-help {
  margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: var(--muted);
}
.hero-help a {
  color: var(--brand); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(14, 114, 188, .28); padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.hero-help a:hover { color: var(--brand-hover); border-bottom-color: rgba(10, 90, 150, .55); }

.claim-row li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--muted);
}
.claim-row svg { width: 15px; height: 15px; color: var(--brand); flex-shrink: 0; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 24px; border-radius: 12px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.btn-primary { background: var(--spa-primary); color: #fff; }
.btn-primary:hover { background: var(--spa-primary-hover); }
.btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-outline:hover { border-color: #cfd8e4; background: #fafcfe; }
.btn .arw { width: 15px; height: 15px; }
.btn .tg-ico { width: 17px; height: 17px; color: var(--spa-primary); }

/* ---------- API console (light, tabbed) ---------- */
.hero-console { display: flex; justify-content: flex-end; }
.console {
  width: 100%; max-width: 520px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 18px 44px -28px rgba(11, 26, 46, .22);
}
.console-top {
  display: flex; align-items: stretch; justify-content: space-between; gap: 10px;
  padding: 0 14px; border-bottom: 1px solid var(--line);
}
.ctabs { position: relative; display: flex; gap: 2px; }
.ctab {
  appearance: none; -webkit-appearance: none; border: 0; background: none;
  padding: 14px 11px 13px; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  letter-spacing: -.005em; color: var(--muted);
  transition: color .18s ease;
}
.ctab:hover { color: var(--text); }
.ctab.is-active { color: var(--ink); }
.ctab-ink {
  position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  border-radius: 2px; background: var(--ink);
  transition: transform .18s var(--ease), width .18s var(--ease);
}
.cstatus {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding-bottom: 13px; align-self: flex-end;
  font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap;
}
.cd-dot { width: 6px; height: 6px; border-radius: 50%; background: #2fa36b; }

/* min-height = tallest pane, so switching tabs never resizes the console */
.cbody { padding: 16px 20px 14px; min-height: 370px; }
.cpane { display: none; }
.cpane.is-active { display: block; animation: cFade .18s ease both; }
@keyframes cFade { from { opacity: 0; } to { opacity: 1; } }

.cep {
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink);
  overflow-x: auto; white-space: nowrap;
}
.clabel {
  margin: 14px 0 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--k-com);
}
.code-wrap { overflow-x: auto; }
.code {
  font-family: var(--mono); font-size: 12.8px; line-height: 1.8; color: var(--ink);
}
.code .ln { white-space: pre; }
.cfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 20px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--k-com);
}
.csse {
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 10.5px; letter-spacing: .06em; color: var(--muted);
}

/* inline code colours — restrained, no glow */
.k-method { color: var(--brand); font-weight: 700; }
.k-path { color: var(--ink); }
.k-head { color: var(--k-com); }
.k-secret { color: var(--k-str); }
.k-punc { color: var(--k-punc); }
.k-key { color: var(--k-key); }
.k-str { color: var(--k-str); }
.k-num { color: var(--k-num); }
.k-bool { color: var(--brand); font-weight: 600; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: var(--section-y) 0; }
.section-soft { background: var(--soft); border-radius: 0; }

.block-2 {
  margin-top: 88px; padding-top: 88px; border-top: 1px solid #eef1f6;
}

.cols-50-50 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 76px; }
.col, .hero-copy { min-width: 0; }

.eyebrow {
  display: inline-block; margin-bottom: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand);
}
h2 {
  font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1.16;
  letter-spacing: -.026em;
}
.h2-sm { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.22; }
.section-title { max-width: 820px; margin-bottom: 52px; }

.lead { font-size: 17.5px; line-height: 1.62; color: var(--text); max-width: 640px; margin-top: 20px; }
.note { font-size: 16px; line-height: 1.6; color: var(--muted); margin-top: 22px; }
.claim { font-size: 16.5px; font-weight: 600; color: var(--ink); margin-top: 24px; }

/* ---------- model marquee ---------- */
#unified { padding: 96px 0; }
/* centred text block; the marquee below keeps the full column width */
.uni-head { max-width: 850px; margin: 0 auto; text-align: center; }
.uni-h2 { max-width: 850px; font-size: 44px; line-height: 1.14; }
.uni-lead { max-width: 640px; margin: 20px auto 0; font-size: 19px; }
.uni-note { max-width: 720px; margin: 26px auto 0; }
.uni-foot {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 22px; margin-top: 16px;
}
.uni-foot .claim { margin-top: 0; }
.uni-foot .models-more { margin-top: 0; color: var(--brand); font-size: 15px; font-weight: 600; }

.marquee {
  position: relative; margin-top: 36px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}
.mtrack { display: flex; width: max-content; animation: mscroll 40s linear infinite; }
.mgroup { display: flex; gap: 12px; padding-right: 12px; }
.mtag {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  height: 48px; padding: 0 17px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; font-size: 15.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap;
}
.mtag .mi { width: 21px; height: 21px; }
.mi-mono { color: var(--ink); }
.marquee:hover .mtrack, .marquee:focus-within .mtrack { animation-play-state: paused; }
@keyframes mscroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.models-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color .2s;
}
.models-more:hover { color: var(--brand); }
.models-more svg { width: 14px; height: 14px; }

.note code {
  font-family: var(--mono); font-size: 14.5px; padding: 2px 7px; margin: 0 0 0 3px;
  border-radius: 6px; background: var(--brand-soft); color: var(--brand);
}

/* ---------- 2x2 developer-experience panel (one container, hairlines) --- */
/* header centred; the panel is centred too but keeps left-aligned cells, so
   the heading midline and the panel midline share the same axis */
.dx-block { text-align: center; }
/* .eyebrow is inline-block, and margin:auto does nothing on an inline box -
   it must become a block so text-align:center can centre it */
.dx-block .eyebrow { display: block; }
.dx-block h2 { max-width: 850px; margin-left: auto; margin-right: auto; }
.dx-block .lead { max-width: 720px; margin-left: auto; margin-right: auto; }
.dx-panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; max-width: 960px; margin: 34px auto 0;
  text-align: left;
  background: #eef1f6; border: 1px solid #E7EBF0;
  border-radius: 18px; overflow: hidden;
}
.dx-cell {
  display: flex; flex-direction: column; min-height: 196px;
  padding: 24px 26px; background: #fff;
}
.dx-cell h3 { font-size: 16px; line-height: 1.3; font-weight: 640; letter-spacing: -.012em; margin-bottom: 5px; }
.dx-cell > p { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-bottom: 14px; }
.dx-em {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 12px;
  font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--ink);
}
.dx-em code { font-family: var(--mono); font-size: 12px; color: var(--muted); }
/* last flex item: its inherited bottom margin would inflate the cell */
.dx-cell > p.dx-em { margin-bottom: 0; }

/* 01 — three parameters */
.dx-rows { border: 1px solid #edf0f5; border-radius: 10px; overflow: hidden; }
.dx-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 25px; padding: 0 11px; font-size: 12.5px;
}
.dx-row + .dx-row { border-top: 1px solid #f1f4f8; }
.dx-row span { color: var(--muted); }
.dx-row code { font-family: var(--mono); font-size: 12px; color: var(--ink); }

/* 02 — single response line (the chain sketch was dropped as noise) */
.dx-hosts { display: flex; align-items: center; gap: 6px; }
.dx-host {
  padding: 3px 9px; border: 1px solid #edf0f5; border-radius: 7px;
  background: #fafbfd; font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  white-space: nowrap;
}
.dx-host-hub { background: var(--brand-soft); border-color: rgba(14, 114, 188, .16); color: var(--brand); font-weight: 600; }
.dx-host-ar { color: #c3cbd8; font-size: 12px; }
.dx-ok {
  display: inline-flex; align-items: center; height: 21px; padding: 0 8px;
  border-radius: 6px; background: #eaf6ef; color: #1f7a5c;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.dx-post { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* 03 — model selector look (text only, no brand logos) */
.dx-sel { border: 1px solid #edf0f5; border-radius: 10px; overflow: hidden; }
.dx-sel-cur {
  display: flex; align-items: center; justify-content: space-between;
  height: 26px; padding: 0 11px; font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.dx-sel-cur svg { width: 13px; height: 13px; color: #9aa5b5; }
.dx-sel-list {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 7px;
  border-top: 1px solid #f1f4f8; background: #fafbfd;
}
.dx-sel-list span {
  padding: 2px 7px; border: 1px solid #edf0f5; border-radius: 6px;
  background: #fff; font-family: var(--mono); font-size: 11px; color: var(--muted);
}

/* 04 — developer surface tags */
.dx-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dx-tags span {
  padding: 3px 9px; border: 1px solid #edf0f5; border-radius: 999px;
  background: #fafbfd; font-size: 12px; color: var(--muted);
}

/* ---------- advantage cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card {
  display: flex; flex-direction: column;
  padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.card-ico {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--brand-soft); color: var(--brand); margin-bottom: 20px;
}
.card-ico svg { width: 22px; height: 22px; }
.card h3 { font-size: 23px; font-weight: 650; line-height: 1.32; margin-bottom: 12px; }
.card p { font-size: 16px; line-height: 1.62; }
.card-stat {
  font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.02em;
  margin-top: 18px;
}
.card-note { font-size: 15px; color: var(--muted); margin-top: 10px; }
.card-claim {
  margin-top: auto; padding-top: 22px;
  font-size: 15.5px; font-weight: 600; color: var(--brand); line-height: 1.5;
}
.card-claim::before {
  content: ''; display: block; height: 1px; background: var(--line);
  margin-bottom: 18px;
}

/* ---------- dashboard UI ---------- */
.dash {
  margin-top: 28px; border: 1px solid var(--line); border-radius: 16px;
  background: #fff; overflow: hidden;
  box-shadow: 0 18px 44px -30px rgba(11, 26, 46, .35);
}
.dash-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.dash-row {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; border-bottom: 1px solid rgba(227, 232, 239, .75);
  font-size: 14.5px;
}
.dash-row:last-child { border-bottom: 0; }
.dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #c9d2de; }
.dot.ok { background: #2fa36b; box-shadow: 0 0 0 3px rgba(47, 163, 107, .14); }
.key-label { color: var(--ink); font-weight: 500; }
.key {
  font-family: var(--mono); font-size: 13.5px; color: var(--muted);
  margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--soft);
}
.dash-more { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
.dash-more i { width: 3px; height: 3px; border-radius: 50%; background: #b9c2d0; }

/* ---------- pricing ---------- */
.price-lead {
  font-size: clamp(22px, 2.1vw, 28px); font-weight: 650; line-height: 1.35;
  color: var(--ink); letter-spacing: -.022em; margin-top: 18px;
}
.ticks { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.ticks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 16.5px; line-height: 1.55; color: var(--text);
}
.ticks svg {
  width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px;
  color: var(--brand);
}
.price-chart {
  display: flex; align-items: flex-end; gap: 10px; height: 92px; margin-top: 32px;
}
.price-chart i {
  flex: 1; height: var(--h); border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #dbe9f6, var(--brand-soft));
}
.price-chart i.hi { background: linear-gradient(180deg, var(--brand), #7db8e4); }

/* ---------- bottom CTA (light - matches the rest of the page) ---------- */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fd 100%);
  border-top: 1px solid var(--line);
  padding: 104px 0;
}
.cta-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cta-inner { position: relative; text-align: center; }
.cta h2 { color: var(--ink); max-width: 760px; margin: 0 auto; }
.cta-body {
  margin: 20px auto 0; max-width: 640px;
  font-size: 17.5px; line-height: 1.6; color: var(--text);
}
.cta-claim {
  margin-top: 20px; font-size: 15px; font-weight: 500; color: var(--muted);
}
.cta-btns { justify-content: center; margin-top: 32px; }
/* the band is light now, so there is no "on navy" variant left - both
   buttons use the standard light-page treatment. */
.btn-onnavy {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
}
.btn-onnavy:hover { border-color: #cfd8e4; background: #fafcfe; }
.btn-onnavy .tg-ico { color: var(--spa-primary); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 40px 0 34px; }
.footer a { transition: color .2s; }
.footer a:hover { color: var(--brand); }

/* row 1: logo | nav (centred) | subscribe button */
.ft-top { display: flex; align-items: center; gap: 24px; }
.ft-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ft-logo-box { display: flex; align-items: center; justify-content: center; width: 46px; height: 28px; flex-shrink: 0; }
/* same native 92x56 ratio as the header logo - do not square it off */
.ft-logo-box img { width: 46px; height: 28px; display: block; }
.ft-logo-text { font-size: 14px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }

/* the nav keeps the same type as the header links, only lighter */
.ft-nav {
  /* flex:1 alone lets the row shrink to min-content and wrap every link onto
     its own line - the row never has to do that, so keep the intrinsic width */
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 4px;
}
.ft-nav a { padding: 6px 12px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.ft-nav a:hover { color: var(--ink); }

/* subscribe = the primary action, so it reuses the header's sign-in button */
.ft-sub {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 36px; padding: 0 18px; border-radius: 18px;
  background: var(--spa-primary); color: #fff;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.ft-sub:hover { color: #fff; opacity: .9; }
.ft-sub .tg-ico { width: 15px; height: 15px; color: #fff; flex-shrink: 0; }

/* the rule only spans row 1: it starts under the nav, like the reference */
.ft-rule { height: 1px; background: var(--line); margin: 22px 0 0 0; }

/* row 2: legal links stacked on the left, copyright pushed to the right */
.ft-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-top: 20px; }
.ft-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-size: 13.5px; line-height: 1.35; flex-shrink: 0; }
.ft-legal a { color: var(--muted); white-space: nowrap; }
.ft-legal .ft-mail { color: var(--muted); }
.ft-copy { font-size: 13.5px; line-height: 1.35; color: #9aa4b2; text-align: right; flex-shrink: 0; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1120px) {
  .cols-50-50 { gap: 48px; }
  .hero-inner { gap: 40px; }
}

/* below ~1000px the two columns squeeze the sentences onto two lines and
   the cells grow past the intended height -> collapse to one column early */
@media (max-width: 980px) {
  .dx-panel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --section-y: 80px; }
  .uni-h2 { font-size: 38px; }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr); gap: 48px;
    padding-top: 120px; padding-bottom: 72px; min-height: 0;
  }
  .hero-console { justify-content: flex-start; }
  .console { max-width: 100%; }
  .cols-50-50 { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .block-2 { margin-top: 64px; padding-top: 64px; }
  #unified { padding: 84px 0; }
}

@media (max-width: 760px) {
  /* footer: one column - logo, nav, button, then the legal stack */
  .footer { padding: 32px 0 28px; }
  .ft-top { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ft-nav { justify-content: flex-start; flex: 0 0 auto; gap: 2px; margin: 0 -12px; }
  .ft-rule { margin-top: 20px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 18px; }
  .ft-copy { text-align: left; }

  /* longhand: the shorthand form reset padding-top and outranked
     .hero-inner{padding-top:120px} (same specificity, later in file) */
  .wrap { padding-left: 20px; padding-right: 20px; }
  .h1-l1 { font-size: 34px; }
  .h1-l2 { font-size: 21px; }
  .hero-sub { font-size: 17px; }
  .cta { padding: 72px 0; }
  .uni-h2 { font-size: 33px; }
  .uni-foot { flex-direction: column; align-items: center; gap: 10px; }
  .dx-cell { padding: 22px 20px; min-height: 0; }
  .dx-panel { max-width: 100%; }
}

@media (max-width: 640px) {
  .hdr-right { display: none; }
  .hdr-mobile { display: flex; align-items: center; }
  .mnav { display: flex; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn { width: 100%; }
  .card-claim { margin-top: 22px; }
  .uni-h2 { font-size: 29px; }
  .h1-l1 { font-size: 30px; }
  .h1-l2 { font-size: 19px; }
  .console-top { padding: 0 10px; }
  .ctab { padding: 13px 8px 12px; font-size: 13px; }
  .cbody { padding: 14px 14px 12px; }
  .cfoot { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .mtrack { animation: none !important; }
  .mgroup[aria-hidden="true"] { display: none; }
  .marquee { overflow-x: auto; }
}