/* ==========================================================================
   Agentic Development Kit - landing design system - "Vercel light"
   White canvas, Geist grotesk, zinc neutrals. Monochrome on purpose: no brand
   gradient anywhere. The only colour on the page belongs to the AI platform
   logos and to terminal output, where green and amber mean pass and fail
   rather than decoration. Hierarchy is carried by weight and value instead.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-2: #fafafa; /* alternating sections */
  --bg-3: #f4f4f5; /* sunken wash */
  --fg: #0a0a0a; /* near-black text */
  --fg-2: #3f3f46; /* secondary */
  --muted: #71717a; /* body muted (zinc-500) */
  --faint: #a1a1aa; /* captions (zinc-400) */
  --line: #e4e4e7; /* hairline (zinc-200) */
  --line-2: #d4d4d8; /* stronger hairline */

  --accent: #0a0a0a;
  --accent-tint: rgba(9, 9, 11, 0.07);

  /* Kept as a token so every "accent fill" call site stays in one place. It is
     a flat near-black now, not a gradient. */
  --grad: #0a0a0a;

  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-display: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 76rem;
  --radius: 12px;

  --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.05), 0 1px 1px rgba(9, 9, 11, 0.04);
  --shadow-md:
    0 2px 4px rgba(9, 9, 11, 0.04), 0 12px 28px -12px rgba(9, 9, 11, 0.18);
  --shadow-lg:
    0 4px 8px rgba(9, 9, 11, 0.05), 0 32px 64px -24px rgba(9, 9, 11, 0.28);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-sans);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
canvas,
svg {
  display: block;
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--accent-tint);
  color: var(--fg);
}

/* ---------------------------------------------------------------- backdrop */

.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg);
}
body.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- layout */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.75rem;
}

.section {
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  position: relative;
}
.section--panel {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}
.section--wash {
  background: var(--bg-3);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 48rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.section-head h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin-bottom: 1.1rem;
}
.section-head .lede {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 44rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.eyebrow-idx {
  color: var(--fg);
  font-weight: 600;
}

/* ---------------------------------------------------------------- surfaces */

.glass {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-mono);
}
.chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--grad);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.62rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--bg);
  font-family: var(--font-mono);
}
.badge--native,
.badge--plugin {
  color: var(--fg);
  border-color: var(--line-2);
  background: var(--bg-3);
}
.badge--fallback {
  color: var(--faint);
  border-style: dashed;
  background: var(--bg);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.btn:active {
  transform: scale(0.98);
}
.btn--sm {
  height: 2.3rem;
  padding-inline: 0.95rem;
  font-size: 0.875rem;
}
.btn--lg {
  height: 3.1rem;
  padding-inline: 1.6rem;
  font-size: 1rem;
}
.btn--primary {
  background: var(--fg);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: #1f1f23;
}
.btn--ghost {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  border-color: var(--fg);
  transform: translateY(-1px);
}

.focus-ring {
  outline: none;
}
.focus-ring:focus-visible {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px color-mix(in srgb, var(--accent) 75%, transparent);
  border-radius: 8px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: max(1.75rem, calc((100% - var(--maxw)) / 2));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--line);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.logo-mark {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
}
.logo-mark svg {
  width: 100%;
  height: 100%;
}
/* The full product name plus the GitHub button is wider than a phone. Left in
   flow it forces the document past the viewport and every section overflows
   with it, so the header falls back to the short mark below 620px. */
.logo-word-short {
  display: none;
}
@media (max-width: 620px) {
  .site-header .logo-word {
    display: none;
  }
  .site-header .logo-word-short {
    display: inline;
  }
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav-link {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.nav-link:hover {
  color: var(--fg);
}
@media (max-width: 940px) {
  .site-nav .nav-link {
    display: none;
  }
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3.5rem, 8vw, 5.5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    #000 20%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    #000 20%,
    transparent 75%
  );
  opacity: 0.7;
}
.hero .container {
  position: relative;
  z-index: 1;
}
/* The card aligns to the top of the column, not to its centre. Centring pushed
   it down against the install block and left it floating below the headline. */
.hero-layout {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 1000px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
.hero-content {
  max-width: 38rem;
}
.hero-title {
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 1.4rem 0;
}
.hero-sub {
  max-width: 35rem;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--muted);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.hero-install {
  margin-top: 1.5rem;
  max-width: 30rem;
}
.hero-cue {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--faint);
  font-family: var(--font-mono);
}

/* ------------------------------------------------------ hero token bar */

.tokenbar {
  padding: 1.5rem 1.5rem 1.35rem;
  border-radius: 14px;
}
.tokenbar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.15rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.tokenbar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
}
.tokenbar-src {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--faint);
  text-align: right;
}
.tokenbar-row + .tokenbar-row {
  margin-top: 1.5rem;
}
.tokenbar-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.tokenbar-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-2);
}
.tokenbar-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.tokenbar-track {
  height: 0.85rem;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tokenbar-fill {
  height: 100%;
  width: 0;
  border-radius: 5px 0 0 5px;
  transition: width 1.1s var(--ease);
}
.tokenbar-fill--before {
  background: #d4d4d8;
}
.tokenbar-fill--after {
  background: var(--grad);
}
.tokenbar-note {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.tokenbar-foot {
  margin-top: 1.6rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--fg-2);
}
.tokenbar-delta {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
}

/* ---------------------------------------------------------------- tools */

.tools-lead {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--faint);
  margin-bottom: 2.25rem;
}
.tools-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .tools-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .tools-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The platforms are the proof that one canon reaches five tools, so they are
   the one element on the page allowed to keep its own colour, at full size. */
.tool-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fg);
  text-align: center;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.tool-logo:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
.tool-logo svg {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--logo, var(--fg));
}

/* ---------------------------------------------------------------- grids */

.feature-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.step-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* Grid and flex children default to min-width:auto, so a wide child - the
   measurement table, a terminal - refuses to shrink and pushes the whole
   document past the viewport instead of scrolling inside its own box. */
.split > *,
.feature-grid > *,
.step-grid > *,
.install-grid > *,
.skill-grid > *,
.hero-layout > * {
  min-width: 0;
}
.table-wrap,
.terminal,
.code {
  max-width: 100%;
}

.card-pad {
  padding: 1.6rem;
}
.card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 0.5rem;
}
.card-body {
  color: var(--muted);
  font-size: 0.95rem;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--accent);
  margin-bottom: 1rem;
}
.icon-wrap svg {
  width: 1.25rem;
  height: 1.25rem;
}
.step-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--faint);
  margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------- code */

/* The copy button is pinned rather than laid out in flow: a long command would
   otherwise push it out of the scrollable area and make it unreachable. */
.code {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: #0a0a0a;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  box-shadow: var(--shadow-md);
}
/* pre-wrap rather than pre: a long install command wraps instead of scrolling
   out from under the pinned copy button. Authored line breaks still hold. */
.code code {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #ededed;
  line-height: 1.75;
  padding-right: 4.25rem;
}
.code-copy {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0a0a0a;
  color: #d4d4d8;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.code-copy:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.code code .pr {
  color: #71717a;
}
.code-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--faint);
  margin-bottom: 0.5rem;
}
.terminal {
  border-radius: 12px;
  background: #0a0a0a;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.terminal-dots {
  display: flex;
  gap: 0.42rem;
}
.terminal-dots i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.terminal-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #a1a1aa;
  margin-left: 0.45rem;
}
.terminal-body {
  padding: 1.05rem 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.8;
  color: #ededed;
  white-space: pre-wrap;
  overflow-x: auto;
}
.terminal-body .pr {
  color: #a1a1aa;
}
.terminal-body .num {
  color: #ededed;
}
.terminal-body .ok {
  color: #34d399;
}
.terminal-body .warn {
  color: #fbbf24;
}
.terminal-body .dim {
  color: #71717a;
}

/* ---------------------------------------------------------------- tables */

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 34rem;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table thead th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--faint);
  background: var(--bg-2);
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table tbody tr.is-total td {
  background: var(--bg-2);
  font-weight: 600;
  color: var(--fg);
}
.data-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.data-table td.name {
  font-family: var(--font-mono);
  font-size: 0.83rem;
  color: var(--fg);
}
.data-table td.wrap {
  white-space: normal;
  color: var(--muted);
}
.delta-neg,
.delta-pos {
  color: var(--fg);
  font-weight: 600;
}
.table-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* tier list beside the table */
.tier-card {
  padding: 1.5rem;
}
.tier-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.tier-row:last-of-type {
  border-bottom: 0;
}
.tier-name {
  font-weight: 600;
  color: var(--fg);
  font-size: 0.95rem;
}
.tier-size {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.tier-when {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------- skills */

.skill-group + .skill-group {
  margin-top: 2.75rem;
}
.skill-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
.skill-group-head h3 {
  font-size: 1.15rem;
  font-weight: 600;
}
.skill-group-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--faint);
}
.skill-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.skill-card {
  padding: 1.05rem 1.15rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  transition:
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease),
    transform 0.22s var(--ease);
}
.skill-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.skill-name {
  font-family: var(--font-mono);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.skill-name::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--grad);
  flex: none;
}
.skill-desc {
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ---------------------------------------------------------------- misc */

.spec-strip {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.spec-item {
  padding: 1.15rem 1.35rem;
  border-right: 1px solid var(--line);
}
.spec-item:last-child {
  border-right: 0;
}
.spec-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.03em;
}
.spec-num em {
  font-style: normal;
  color: var(--fg);
}
.spec-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 0.5rem;
}

.checklist {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--fg-2);
}
.checklist svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: var(--accent);
}
ul.checklist {
  list-style: none;
  padding: 0;
}

.install-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .install-grid {
    grid-template-columns: 1fr;
  }
}
.install-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.install-card .code {
  margin-top: auto;
}
.install-card .card-body {
  margin-bottom: 1.25rem;
}

.final-cta {
  text-align: center;
}
.final-cta h2 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  margin-bottom: 1.3rem;
}
.final-cta .lede {
  margin-inline: auto;
  max-width: 36rem;
  color: var(--muted);
  font-size: 1.1rem;
}
.final-cta .hero-cta {
  justify-content: center;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 3.5rem 3rem;
  color: var(--muted);
  background: var(--bg-2);
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2rem 1.5rem;
}
@media (max-width: 760px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}
.footer-brand {
  max-width: 22rem;
}
.footer-brand .card-body {
  margin-top: 0.7rem;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--faint);
  margin: 0 0 0.9rem;
  font-weight: 500;
}
.footer-col a {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.22rem 0;
}
.footer-col a:hover {
  color: var(--fg);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.footer-meta {
  font-size: 0.85rem;
  color: var(--faint);
}
.footer-meta a:hover {
  color: var(--fg);
}
.footer-social {
  display: flex;
  gap: 0.8rem;
}
.footer-social a {
  color: var(--muted);
  transition: color 0.2s var(--ease);
}
.footer-social a:hover {
  color: var(--fg);
}

/* ---------------------------------------------------------------- reveal */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn,
  .glass,
  .skill-card,
  .feature-card,
  .tool-logo,
  .tokenbar-fill {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 560px) {
  .container {
    padding-inline: 1.25rem;
  }
  .tokenbar {
    padding: 1.25rem;
  }
  .spec-item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .spec-item:last-child {
    border-bottom: 0;
  }
  .hero-cta .btn {
    width: 100%;
  }
}