/* ==========================================================================
   SkillCat landing page — Cobalt (modern-minimal · Workbench)
   Every colour and font-family below resolves through a token in tokens.css.
   ========================================================================== */

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

html,
body {
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  line-height: 1.12;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  transform: translateY(-6rem);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Layout primitives ---------- */

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

.section {
  padding-block: clamp(3.5rem, 7vw, var(--space-9));
  border-top: 1px solid var(--color-rule);
}

.section--flush {
  border-top: 0;
}

/* ---------- Type helpers ---------- */

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-3);
}

.lede {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink-2);
  max-width: var(--measure);
}

.text-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

.text-link:hover {
  text-decoration-color: var(--color-accent);
}

/* Inline code token (CLI names, file names, flags). A span rather than <code>
   so the text stays extractable by crawlers and static analysers. */
.code-inline {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-ink);
}

/* Section head — single column: heading directly above its lede (gate 54).
   Eyebrows are omitted by design (anti-patterns: "eyebrow on every section"). */
.sec-head {
  margin-bottom: var(--space-7);
  max-width: 54ch;
}

.sec-head__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.sec-head__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover {
  background: var(--color-accent-2);
}

.btn--ghost {
  border-color: var(--color-rule-2);
  background: transparent;
  color: var(--color-ink);
}

.btn--ghost:hover {
  border-color: var(--color-rule-3);
  background: var(--color-paper-2);
}

.btn--lg {
  min-height: 3rem;
  padding: 0 var(--space-5);
  font-size: var(--text-base);
}

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

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ---------- Nav — N1b bordered bar (wordmark · links · language · download) ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--color-paper) 86%, transparent);
  border-bottom: 1px solid var(--color-rule);
  backdrop-filter: blur(10px);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.brand img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-5);
  margin-inline-start: var(--space-4);
}

.nav__link {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

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

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-3);
  white-space: nowrap;
  transition:
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.lang-switch:hover {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.nav__download {
  display: none;
}

/* ---------- Hero — H2 split diptych ---------- */

.hero {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.hero__eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}

.hero__h1 {
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.03;
  margin-bottom: var(--space-5);
}

.hero__lede {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink-2);
  max-width: 52ch;
  margin-bottom: var(--space-6);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.hero__facts li {
  white-space: nowrap;
}

/* ---------- Code card — the hero's proof ---------- */

.code-card {
  background: var(--color-graphite);
  border: 1px solid var(--color-graphite-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-family: var(--font-mono);
}

.code-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-graphite-rule);
}

.code-card__file {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-graphite-ink-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--ok {
  color: var(--color-ok);
}

.code-card__body {
  padding: var(--space-4);
  overflow-x: auto;
}

.code-card pre {
  margin: 0;
}

.code-card code {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-graphite-ink);
}

.tok-key {
  color: var(--color-accent-on-dark);
}

.tok-str {
  color: var(--color-ok);
}

.tok-punct {
  color: var(--color-graphite-muted);
}

.tok-dim {
  color: var(--color-graphite-muted);
}

.code-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-graphite-rule);
  font-size: var(--text-xs);
  color: var(--color-graphite-muted);
}

.code-card__foot li {
  white-space: nowrap;
}

/* ---------- Agents strip — T2 hairline ---------- */

.agents {
  border-block: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}

.agents__inner {
  padding-block: var(--space-5);
}

.agents__label {
  margin-bottom: var(--space-3);
}

.agents__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
}

.agents__list li {
  white-space: nowrap;
}

/* ---------- Tour — scroll-snap screenshot carousel ----------
   A native horizontal track: swipe on touch, arrow keys when focused, or the
   prev/next buttons and the segmented pager. Every slide stays in the document
   (nothing is display:none), so all five captures remain indexable. Looping is
   done with two runtime clones of the end slides (JS-only, so the served HTML
   keeps exactly five slides). No auto-rotation — WCAG 2.2.2 is satisfied by
   never moving on its own. */

.carousel {
  /* Gutter reserved either side of the screenshot so the arrows can sit
     outside the image instead of covering it. */
  --carousel-gutter: var(--space-8);
  --carousel-btn: 2.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.carousel__viewport {
  position: relative;
}

/* On phones the arrows sit in the pager row, next to the counter — overlaying
   them on a 343 px-wide screenshot would cover a quarter of the image. */
.carousel__arrows {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.carousel__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.carousel__btn:active {
  transform: translateY(1px);
}

.carousel__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.carousel__counter {
  display: flex;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-4);
  white-space: nowrap;
}

.carousel__counter [data-carousel-current] {
  color: var(--color-accent-2);
}

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

/* Caption first, screenshot under it. The 1fr caption row equalises across
   slides, so the images stay vertically aligned while swiping even though the
   five descriptions differ in length. */
.carousel__slide {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-4);
  margin: 0;
  scroll-snap-align: start;
}

.carousel__frame {
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-paper-2);
  box-shadow: var(--shadow-card);
}

.carousel__frame img {
  width: 100%;
}

.carousel__cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-2) var(--space-5);
}

.carousel__idx {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-accent-2);
}

.carousel__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.carousel__desc {
  color: var(--color-ink-2);
  max-width: var(--measure);
}

/* Hidden on phones (the counter already reports position); shown from tablet
   up, where the arrows have moved out of the pager row onto the screenshot. */
.carousel__dots {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

.carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carousel__dot::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-rule-3);
  transition: background-color var(--dur-fast) var(--ease);
}

.carousel__dot:hover::before {
  background: var(--color-ink-4);
}

.carousel__dot[aria-current='true']::before {
  background: var(--color-accent);
}

/* ---------- Features — F3 tabular spec sheet ---------- */

.spec {
  border-top: 1px solid var(--color-rule-2);
}

.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-rule);
}

.spec__head {
  display: none;
}

.spec__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}

.spec__sub {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-ink-4);
}

.spec__desc {
  color: var(--color-ink-2);
  max-width: var(--measure);
}

.spec__mode {
  justify-self: start;
  align-self: start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ---------- Graphite band — the page's one dark beat ---------- */

.band {
  background: var(--color-graphite);
  color: var(--color-graphite-ink-2);
  border-top: 1px solid var(--color-graphite-rule);
}

.band .mono-label {
  color: var(--color-accent-on-dark);
}

.band .sec-head__title {
  color: var(--color-graphite-ink);
}

.band .sec-head__body .lede {
  color: var(--color-graphite-ink-2);
}

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-graphite-rule);
}

.step {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-graphite-rule);
}

.step__idx {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--space-3);
}

.step__title {
  font-size: var(--text-lg);
  color: var(--color-graphite-ink);
  margin-bottom: var(--space-2);
}

.step__desc {
  color: var(--color-graphite-ink-2);
  max-width: var(--measure);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.split__col {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-graphite-rule);
}

.split__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--space-3);
}

.split__title {
  font-size: var(--text-lg);
  color: var(--color-graphite-ink);
  margin-bottom: var(--space-2);
}

.split__desc {
  color: var(--color-graphite-ink-2);
}

.band .code-inline {
  color: var(--color-accent-on-dark);
}

/* ---------- Principles ---------- */

.principles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-rule-2);
}

.principle {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-rule);
}

.principle__idx {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-4);
  margin-bottom: var(--space-3);
}

.principle__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.principle__desc {
  color: var(--color-ink-2);
  max-width: var(--measure);
}

/* ---------- Install ---------- */

.install {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.os {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule-2);
}

.os__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-2);
  margin-bottom: var(--space-3);
}

.os__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.os__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-ink-2);
}

.os__list li {
  position: relative;
  padding-left: var(--space-5);
}

.os__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--color-rule-3);
}

.os__cmd {
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  overflow-x: auto;
  white-space: nowrap;
}

.note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.note__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* ---------- FAQ ---------- */

.faq {
  border-top: 1px solid var(--color-rule-2);
}

.faq__item {
  border-bottom: 1px solid var(--color-rule);
}

.faq__q {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: '+';
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-ink-4);
  transition: transform var(--dur-fast) var(--ease);
}

.faq__item[open] .faq__q::after {
  content: '−';
}

.faq__idx {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-4);
  flex: none;
}

.faq__a {
  padding: 0 0 var(--space-5) var(--space-6);
  color: var(--color-ink-2);
  max-width: var(--measure);
}

/* ---------- Final CTA ---------- */

.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding-block: clamp(3rem, 6vw, var(--space-8));
}

.cta__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.035em;
  margin-bottom: var(--space-3);
}

.cta__lede {
  color: var(--color-ink-2);
  max-width: 48ch;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ---------- Footer — Ft1 mast-headed ---------- */

.footer {
  border-top: 1px solid var(--color-rule-2);
  background: var(--color-paper-2);
  padding-block: var(--space-7) var(--space-6);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}

.footer__tagline {
  margin-top: var(--space-3);
  max-width: 48ch;
  color: var(--color-ink-2);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

.footer__link:hover {
  color: var(--color-accent-2);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-4);
}

/* ---------- Sticky CTA — C4 ---------- */

.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  z-index: 30;
  transform: translate(-50%, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: calc(100% - 2 * var(--pad-inline));
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    visibility var(--dur-fast) var(--ease);
}

.sticky-cta[data-visible='true'] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.sticky-cta__text {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-cta__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-ink-4);
  cursor: pointer;
}

.sticky-cta__close:hover {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

/* ---------- Hero type-in caret ----------
   The page is composed: no scroll reveals (modern-minimal; also avoids the
   universal fade-up tell). One orchestrated entrance — the hero line types
   once. The caret shows only while typing, then script hides it. */

.type-target {
  display: inline;
}

.type-caret {
  display: inline-block;
  width: 0.5ch;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--color-accent-on-dark);
}

.type-caret[hidden] {
  display: none;
}

/* ---------- 404 ---------- */

.page-404 {
  padding-block: var(--space-10);
}

.page-404__eyebrow {
  margin-bottom: var(--space-4);
}

.page-404__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.page-404__lede {
  margin-bottom: var(--space-6);
}

/* ---------- Responsive ---------- */

@media (max-width: 40rem) {
  .brand,
  .footer__link,
  .lang-switch {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  /* Spec rows: name and mode tag share a line, description spans below. */
  .spec__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-4);
  }

  .spec__name {
    grid-column: 1;
    grid-row: 1;
  }

  .spec__mode {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }

  .spec__desc {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .footer__links {
    gap: var(--space-1) var(--space-5);
  }

  .faq__a {
    padding-left: 0;
  }

  .sticky-cta {
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
    transform: translateY(1.5rem);
  }

  .sticky-cta[data-visible='true'] {
    transform: translateY(0);
  }

  .code-card__body {
    padding: var(--space-3);
  }

  /* Slightly smaller code on a phone, so the hero card stays legible. */
  .code-card code {
    font-size: var(--text-xs);
  }
}

/* Tablet — 768 px and up. Nav gets its links back and the paired blocks go
   two-up; the hero, steps and footer stay single-column until 60 rem. */
@media (min-width: 48rem) {
  /* Inset the whole scroller by the gutter (margin, not padding) so the
     screenshot is narrower than the carousel and the neighbouring slides are
     clipped at the image edge rather than peeking into the gutter. */
  .carousel__track {
    margin-inline: var(--carousel-gutter);
  }

  /* Arrows are anchored to the image, not to the whole slide: the overlay is
     exactly as wide and tall as the frame (same inset, same aspect ratio) and
     sits on the frame's bottom edge, so centring it centres on the image.
     Negative margins then pull each button out into the gutter. */
  .carousel__arrows {
    position: absolute;
    left: var(--carousel-gutter);
    right: var(--carousel-gutter);
    bottom: calc(var(--carousel-btn) + var(--space-4));
    aspect-ratio: 1440 / 900;
    justify-content: space-between;
    pointer-events: none;
  }

  .carousel__arrows .carousel__btn:first-child {
    margin-inline-start: calc((var(--carousel-gutter) + var(--carousel-btn)) / -2);
  }

  .carousel__arrows .carousel__btn:last-child {
    margin-inline-end: calc((var(--carousel-gutter) + var(--carousel-btn)) / -2);
  }

  .carousel__btn {
    pointer-events: auto;
  }

  .carousel__dots {
    display: flex;
  }

  .nav__links {
    display: flex;
  }

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

  .principle {
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
  }

  .principle:nth-child(odd) {
    border-right: 1px solid var(--color-rule);
    padding-right: var(--space-6);
  }

  .principle:nth-child(even) {
    padding-left: var(--space-6);
  }

  .install {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

@media (min-width: 40rem) {
  .spec__row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-5);
  }

  .spec__name,
  .spec__desc {
    grid-column: auto;
    grid-row: auto;
  }

  .spec__mode {
    grid-column: 2;
    grid-row: auto;
  }

  .footer__bottom {
    justify-content: space-between;
  }

  .nav__download {
    display: inline-flex;
  }
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
    gap: clamp(2.5rem, 5vw, var(--space-8));
  }

  .sec-head {
    max-width: 56ch;
  }

  .carousel__cap {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .spec__row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 8rem;
  }

  .spec__head {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 8rem;
    gap: var(--space-5);
    padding-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-4);
  }

  .spec__mode {
    grid-column: 3;
    justify-self: end;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step {
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
    border-bottom: 0;
    border-right: 1px solid var(--color-graphite-rule);
  }

  .step:last-child {
    border-right: 0;
    padding-right: 0;
  }

  .step + .step {
    padding-left: var(--space-6);
  }

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }

  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
  }

  .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

@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;
  }
  .type-caret {
    display: none;
  }

  .sticky-cta {
    transition: none;
  }
}