/* mevebu.web.id
   One stylesheet for all three pages. Plain CSS, no build step, no framework.

   Order:
     1. tokens        every colour, size and space comes from here
     2. base          reset, type, focus, selection, reduced motion
     3. shell         header, nav, footer, page frame
     4. components    buttons, cards, code blocks, tables, small controls
     5. sections      hero, features, FAQ, CTA, cross links
     6. motion        one-time reveals, hero entrance, micro interactions
     7. responsive    reflow at the widths where this content breaks

   Tokens mirror the mevebu app (DESIGN.md section 3): jade is the only accent
   and it means "the thing to press next". Everything else is a surface, a line
   or ink. Light is a white deck on a soft jade-grey void; dark is elevated
   jade-tinged greys, never pure black. */

/* ---------- 1. tokens ---------- */

:root {
  color-scheme: light;

  --void: #eef1ed;
  --deck: #ffffff;
  --deck-2: #f4f7f3;
  --deck-3: #eaefe9;
  --ink: #101a15;
  --ink-2: #46574d;
  --ink-3: #5f7166;
  --orbit: #dce2dc;
  --orbit-hard: #b9c6bc;

  --jade: #0f6b4a;
  --jade-hover: #0a5138;
  --jade-active: #083d2a;
  --on-jade: #ffffff;
  --jade-soft: #e0f0e7;
  --jade-tint: #f0f7f2;

  --amber: #9a6100;
  --amber-soft: #fbf1dc;
  --danger: #b0231d;

  --scrim: rgb(8 14 11 / 0.52);
  --shadow-sm: 0 1px 2px rgb(9 22 15 / 0.06);
  --shadow-md: 0 10px 30px -16px rgb(9 22 15 / 0.28);
  --shadow-lg: 0 28px 60px -24px rgb(9 22 15 / 0.34);

  /* code surfaces sit on their own ground so a snippet never competes with body copy */
  --code-bg: #101a15;
  --code-ink: #dbe6df;
  --code-dim: #8aa295;
  --code-key: #7fd4a8;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --ctl: 44px;
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --gutter: clamp(18px, 5vw, 40px);
  --section-y: clamp(56px, 9vw, 112px);
  --header-h: 64px;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.33, 0, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --void: #0d1310;
  --deck: #141b17;
  --deck-2: #1a231e;
  --deck-3: #202b25;
  --ink: #e7efe9;
  --ink-2: #a9bcb0;
  --ink-3: #8ca196;
  --orbit: #2a3630;
  --orbit-hard: #3c4a43;

  --jade: #4fbe8e;
  --jade-hover: #6acfa1;
  --jade-active: #8adcb6;
  --on-jade: #07130d;
  --jade-soft: #16332a;
  --jade-tint: #12251d;

  --amber: #e0ab54;
  --amber-soft: #2a2315;
  --danger: #f0807a;

  --scrim: rgb(3 8 5 / 0.68);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 10px 30px -16px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 28px 60px -24px rgb(0 0 0 / 0.7);

  --code-bg: #09100c;
  --code-ink: #d5e5db;
  --code-dim: #7a9387;
  --code-key: #6fd7a6;
}

/* ---------- 2. base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  min-height: 100dvh;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 640;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  letter-spacing: -0.033em;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem);
}

h3 {
  font-size: clamp(1.05rem, 0.98rem + 0.34vw, 1.25rem);
  letter-spacing: -0.012em;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: color-mix(in srgb, var(--jade) 32%, transparent);
}

/* Theme changes tween colour only, never layout. The class is added by the
   theme script after the first paint, so nothing animates on load. */
.theme-anim,
.theme-anim *,
.theme-anim *::before,
.theme-anim *::after {
  transition: background-color 240ms var(--ease),
    border-color 240ms var(--ease), color 240ms var(--ease),
    fill 240ms var(--ease), stroke 240ms var(--ease) !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--jade);
  color: var(--on-jade);
  font-weight: 600;
  transition: top 160ms var(--ease);
}

.skip-link:focus-visible {
  top: 12px;
}

/* ---------- 3. shell ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--void) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--orbit);
}

.header-inner {
  max-width: var(--wrap);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 680;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  padding-block: 6px;
}

.brand img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px var(--orbit);
}

.brand small {
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0;
}

.header-nav {
  display: none;
  margin-left: auto;
  gap: 4px;
  align-items: center;
}

.header-nav a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 520;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.header-nav a:hover {
  color: var(--ink);
  background: var(--deck-2);
}

.header-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-nav + .header-tools {
  margin-left: 0;
}

/* square, icon-only controls share one height */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--ctl);
  height: var(--ctl);
  border-radius: var(--radius-sm);
  border: 1px solid var(--orbit);
  background: var(--deck);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 160ms var(--ease), background-color 160ms var(--ease),
    border-color 160ms var(--ease);
}

.icon-btn:hover {
  color: var(--ink);
  background: var(--deck-2);
  border-color: var(--orbit-hard);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ctl);
  padding-inline: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--orbit);
  background: var(--deck);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 160ms var(--ease), background-color 160ms var(--ease),
    border-color 160ms var(--ease);
}

.lang-btn:hover {
  color: var(--ink);
  background: var(--deck-2);
  border-color: var(--orbit-hard);
}

.lang-btn svg {
  width: 15px;
  height: 15px;
}

/* theme + language menus */
.menu-host {
  position: relative;
}

.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--orbit);
  background: var(--deck);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 60;
}

.menu[data-open="true"] {
  display: block;
  animation: menu-in 160ms var(--ease-out) both;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.menu-label {
  padding: 8px 10px 4px;
  font-size: 0.72rem;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}

.menu button:hover {
  background: var(--deck-2);
  color: var(--ink);
}

.menu button[aria-checked="true"] {
  background: var(--jade-tint);
  color: var(--ink);
  font-weight: 600;
}

.menu button svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* A two letter code plus one line of name. Without this the longer names wrap
   to a second line inside the 196px menu and the row misaligns. */
.menu button .lang-code {
  flex: none;
  width: 22px;
  font-size: 0.72rem;
  font-weight: 640;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.menu button .lang-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu button .tick {
  margin-left: auto;
  color: var(--jade);
  opacity: 0;
}

.menu button[aria-checked="true"] .tick {
  opacity: 1;
}

/* mobile nav sheet */
.nav-toggle {
  display: inline-grid;
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100dvh - var(--header-h));
  overflow: auto;
  padding: 12px var(--gutter) 24px;
  background: var(--deck);
  border-bottom: 1px solid var(--orbit);
  box-shadow: var(--shadow-md);
  z-index: 45;
}

.mobile-nav[data-open="true"] {
  display: block;
  animation: menu-in 180ms var(--ease-out) both;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: var(--ctl);
  padding: 8px 4px;
  font-size: 1rem;
  font-weight: 520;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--orbit);
}

.mobile-nav a:last-child {
  border-bottom: 0;
}

/* page frame */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: var(--wrap-narrow);
}

main {
  flex: 1 0 auto;
}

section {
  padding-block: var(--section-y);
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 640;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lead {
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.15rem);
  color: var(--ink-2);
  max-width: 62ch;
}

.section-head {
  max-width: 62ch;
  display: grid;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.section-head h2 + p {
  color: var(--ink-2);
}

/* footer */
.site-footer {
  border-top: 1px solid var(--orbit);
  background: var(--deck);
  padding-block: clamp(40px, 6vw, 64px) 28px;
}

.footer-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}

.footer-brand {
  display: grid;
  gap: 14px;
  max-width: 34ch;
}

.footer-brand p {
  color: var(--ink-2);
  font-size: 0.92rem;
}

.footer-col h3 {
  font-size: 0.78rem;
  font-weight: 660;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-col a {
  color: var(--ink-2);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 140ms var(--ease);
}

.footer-col a:hover {
  color: var(--jade);
}

.footer-base {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--orbit);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--ink-3);
}

.footer-base nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-base a {
  color: var(--ink-3);
  text-decoration: none;
}

.footer-base a:hover {
  color: var(--ink);
}

/* ---------- 4. components ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ctl);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease),
    border-color 160ms var(--ease), transform 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn-primary {
  background: var(--jade);
  color: var(--on-jade);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--jade-hover);
}

.btn-primary:active {
  background: var(--jade-active);
  transform: translateY(1px);
}

.btn-ghost {
  background: var(--deck);
  color: var(--ink);
  border-color: var(--orbit);
}

.btn-ghost:hover {
  background: var(--deck-2);
  border-color: var(--orbit-hard);
}

.btn-ghost:active {
  transform: translateY(1px);
}

.btn-sm {
  min-height: 36px;
  padding: 8px 13px;
  font-size: 0.85rem;
}

.btn-block {
  width: 100%;
}

/* install command: a real control, so it gets focus, hover and a copied state */
.install {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 4px 4px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--orbit);
  background: var(--deck);
  box-shadow: var(--shadow-sm);
}

.install-prompt {
  color: var(--jade);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  user-select: none;
  flex: none;
}

.install code {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: 8px;
  font-size: 0.9rem;
  color: var(--ink);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.install code::-webkit-scrollbar {
  display: none;
}

.copy-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--deck-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.copy-btn:hover {
  background: var(--jade-soft);
  color: var(--jade);
}

.copy-btn:active {
  transform: scale(0.96);
}

.copy-btn svg {
  width: 16px;
  height: 16px;
}

.copy-btn[data-copied="true"] {
  background: var(--jade);
  color: var(--on-jade);
}

.copy-btn[data-copied="true"]:hover {
  background: var(--jade);
  color: var(--on-jade);
}

/* copy button with a label, for the one primary install block */
.copy-btn[data-labelled="true"] {
  width: auto;
  padding-inline: 14px;
  gap: 7px;
  grid-auto-flow: column;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}

/* version chip, filled by assets/js/version.js from the live registry */
.version-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--orbit);
  background: var(--deck);
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}

.version-chip:hover {
  border-color: var(--orbit-hard);
  color: var(--ink);
}

.version-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jade);
  flex: none;
}

.version-chip b {
  font-weight: 660;
  color: var(--ink);
}

/* code block */
.code-block {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--orbit);
  background: var(--code-bg);
  color: var(--code-ink);
  overflow: hidden;
}

.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--code-dim);
}

.code-block-head .copy-btn {
  background: rgb(255 255 255 / 0.07);
  color: var(--code-ink);
}

.code-block-head .copy-btn:hover {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}

.code-block pre {
  padding: 16px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.75;
  scrollbar-width: thin;
}

.code-block .tok-key {
  color: var(--code-key);
}

.code-block .tok-dim {
  color: var(--code-dim);
}

/* cards */
.card {
  background: var(--deck);
  border: 1px solid var(--orbit);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px);
  display: grid;
  gap: 12px;
  align-content: start;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease),
    transform 200ms var(--ease);
}

.card h3 {
  margin-top: 2px;
}

.card p {
  color: var(--ink-2);
  font-size: 0.94rem;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--jade-soft);
  color: var(--jade);
}

.card-icon svg {
  width: 20px;
  height: 20px;
}

.card-tag {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--deck-2);
  border: 1px solid var(--orbit);
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* an accent arrow that only travels when the whole card is a link */
a.card {
  color: inherit;
  text-decoration: none;
}

a.card:hover {
  border-color: var(--orbit-hard);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

a.card:hover .card-more {
  color: var(--jade);
}

a.card:hover .card-more svg {
  transform: translateX(3px);
}

.card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 0.86rem;
  font-weight: 600;
  transition: color 160ms var(--ease);
}

.card-more svg {
  width: 15px;
  height: 15px;
  transition: transform 200ms var(--ease-out);
}

/* comparison table */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--orbit);
  border-radius: var(--radius);
  background: var(--deck);
  scrollbar-width: thin;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th,
td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--orbit);
}

th {
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--deck-2);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

td code,
li code,
p code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--jade-tint);
  color: var(--ink);
  border: 1px solid var(--orbit);
  white-space: nowrap;
}

/* inline list of small items */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.chips li {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--orbit);
  background: var(--deck);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 520;
}

/* ---------- 5. sections ---------- */

/* hero: copy on the left, a real terminal capture on the right.
   The background is one very low contrast single-hue wash so the hero has a
   floor to sit on; the content does the work. */
.hero {
  position: relative;
  padding-block: clamp(44px, 7vw, 88px) clamp(48px, 7vw, 92px);
  overflow: clip;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(760px, 92%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--jade-tint) 90%, transparent) 0%,
    color-mix(in srgb, var(--void) 0%, transparent) 100%
  );
  mask-image: radial-gradient(
    120% 90% at 50% 0%,
    #000 0%,
    #000 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.hero-copy {
  display: grid;
  gap: 20px;
  justify-items: start;
}

.hero-title {
  max-width: 18ch;
}

.hero-title .accent {
  color: var(--jade);
}

.hero-sub {
  max-width: 52ch;
  font-size: clamp(1rem, 0.94rem + 0.42vw, 1.18rem);
  color: var(--ink-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.hero-install {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 440px;
}

.hero-install .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
}

.hero-install .hint a {
  color: var(--ink-2);
}

/* terminal: an illustration of a real run, labelled as sample output */
.terminal {
  border-radius: var(--radius-lg);
  border: 1px solid var(--orbit);
  background: var(--code-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--code-ink);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  background: rgb(255 255 255 / 0.03);
}

.terminal-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
}

.terminal-bar .term-title {
  width: auto;
  height: auto;
  margin-left: 8px;
  border-radius: 0;
  background: none;
  color: var(--code-dim);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.terminal-body {
  padding: 16px 16px 18px;
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: pre;
}

.terminal-body .p {
  color: var(--code-key);
}

.terminal-body .c {
  color: #fff;
}

.terminal-body .d {
  color: var(--code-dim);
}

.terminal-body .cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: var(--code-key);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* stat row under the hero: three facts, no invented numbers */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(36px, 5vw, 56px);
  border: 1px solid var(--orbit);
  border-radius: var(--radius);
  background: var(--orbit);
  overflow: hidden;
}

.stat {
  background: var(--deck);
  padding: 16px clamp(14px, 2.4vw, 22px);
  display: grid;
  gap: 2px;
}

.stat b {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  font-weight: 680;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stat span {
  font-size: 0.8rem;
  color: var(--ink-3);
}

/* feature grid: two steps is intentional, three is only used where content fits */
.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

.band {
  background: var(--deck);
  border-block: 1px solid var(--orbit);
}

/* a split feature: explanation on one side, evidence on the other */
.split {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.split-copy {
  display: grid;
  gap: 16px;
}

.split-copy ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}

.split-copy li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--ink-2);
}

.split-copy li svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--jade);
}

.split-copy li strong {
  color: var(--ink);
  font-weight: 600;
}

/* steps: a numbered sequence, so numbers carry information, not decoration */
.steps {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  counter-reset: step;
  border: 1px solid var(--orbit);
  border-radius: var(--radius-lg);
  background: var(--deck);
  overflow: hidden;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 20px clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--orbit);
}

.steps li:last-child {
  border-bottom: 0;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--jade);
  padding-top: 3px;
}

.steps h3 {
  margin-bottom: 4px;
}

.steps p {
  color: var(--ink-2);
  font-size: 0.92rem;
}

.steps code {
  margin-top: 8px;
  display: inline-block;
}

/* cross-sibling cards at the bottom of the page */
.cross-links {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.cross-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  padding: clamp(18px, 3vw, 24px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--orbit);
  background: var(--deck);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease),
    transform 200ms var(--ease);
}

.cross-card:hover {
  border-color: var(--orbit-hard);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cross-card:focus-visible {
  transform: translateY(-2px);
}

.cross-card img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--orbit);
}

.cross-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cross-card h3 svg {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  transition: transform 200ms var(--ease-out), color 200ms var(--ease);
}

.cross-card:hover h3 svg {
  color: var(--jade);
  transform: translateX(3px);
}

.cross-card p {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* FAQ: native disclosure, keyboard and screen reader correct with no script */
.faq {
  display: grid;
  gap: 10px;
}

.faq details {
  border: 1px solid var(--orbit);
  border-radius: var(--radius);
  background: var(--deck);
  transition: border-color 160ms var(--ease);
}

.faq details[open] {
  border-color: var(--orbit-hard);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--ctl);
  padding: 14px 18px;
  font-weight: 600;
  font-size: 0.96rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.faq .faq-body {
  padding: 0 18px 16px;
  color: var(--ink-2);
  font-size: 0.94rem;
}

.faq .faq-body p + p {
  margin-top: 10px;
}

/* closing action */
.cta {
  border-radius: var(--radius-xl);
  border: 1px solid var(--orbit);
  background: var(--deck);
  padding: clamp(28px, 5vw, 56px);
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.cta h2 {
  max-width: 22ch;
}

.cta p {
  max-width: 54ch;
  color: var(--ink-2);
}

.cta .install {
  width: 100%;
  max-width: 440px;
}

/* page hero for the sibling pages, shorter than the home hero */
.page-hero {
  padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--orbit);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--jade-tint) 70%, transparent),
    transparent
  );
}

.page-hero-inner {
  display: grid;
  gap: 24px;
}

.page-hero-copy {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.page-hero h1 {
  max-width: 20ch;
}

.page-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--orbit), var(--shadow-sm);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--ink-3);
  list-style: none;
  padding: 0;
}

.breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--ink);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--orbit-hard);
}

/* skill list on the sibling pages: label, description, one line of what changes */
.skill-list {
  display: grid;
  gap: 1px;
  background: var(--orbit);
  border: 1px solid var(--orbit);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.skill-row {
  background: var(--deck);
  padding: clamp(16px, 2.6vw, 22px) clamp(16px, 3vw, 24px);
  display: grid;
  gap: 8px;
}

.skill-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.skill-row-head code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.skill-row-head .tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--jade-soft);
  color: var(--jade);
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.skill-row p {
  font-size: 0.92rem;
  color: var(--ink-2);
  max-width: 74ch;
}

/* ---------- 6. motion ----------
   One shared reveal. Content is visible by default; the script only opts
   elements in once it is sure IntersectionObserver exists, and reduced motion
   turns the whole thing off. */

@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  html.reveal-ready [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  .hero-copy > *,
  .hero-visual {
    animation: hero-in 620ms var(--ease-out) both;
  }

  .hero-copy > :nth-child(1) { animation-delay: 40ms; }
  .hero-copy > :nth-child(2) { animation-delay: 100ms; }
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .hero-copy > :nth-child(4) { animation-delay: 220ms; }
  .hero-copy > :nth-child(5) { animation-delay: 280ms; }
  .hero-visual { animation-delay: 180ms; }

  @keyframes hero-in {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 7. responsive ----------
   Breakpoints sit where this layout stops working: 560 for the two column
   stat row, 720 for the hero split and the footer, 980 for three up grids. */

@media (min-width: 560px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cross-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-actions {
    width: auto;
  }

  .hero-install {
    width: auto;
    min-width: 380px;
  }

  .cta .install {
    width: auto;
    min-width: 380px;
  }
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
  }

  .page-hero-inner {
    grid-template-columns: 1.55fr 1fr;
    align-items: center;
  }
}

@media (min-width: 860px) {
  .header-nav {
    display: flex;
  }

  .nav-toggle,
  .mobile-nav {
    display: none !important;
  }

  .header-tools {
    margin-left: 0;
  }

  .hero-grid {
    grid-template-columns: 1.15fr 1fr;
  }

  .hero-copy {
    gap: 22px;
  }
}

@media (min-width: 980px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .skill-row {
    grid-template-columns: 260px 1fr;
    align-items: baseline;
  }
}

/* Below the split point the terminal would scroll sideways; hide the scroll
   affordance by shrinking type and letting it wrap the sample lines. */
@media (max-width: 559px) {
  .hero {
    padding-top: clamp(28px, 7vw, 44px);
  }

  .terminal {
    font-size: 0.74rem;
  }

  .terminal-body {
    padding: 14px;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .install {
    padding-left: 10px;
  }

  .install code {
    font-size: 0.82rem;
  }

  .footer-base {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Print: drop the shell and show the content */
@media print {
  .site-header,
  .site-footer,
  .copy-btn,
  .skip-link,
  .mobile-nav {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}