/* ---------------------------------------------------------------------------
   Conduit website — layout and components
   No framework, no build step. Tokens live in tokens.css.
   --------------------------------------------------------------------------- */

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

@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;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  height: auto;
}

a {
  color: var(--hue-text);
  text-decoration: none;
  transition: color 400ms ease;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding-left: 1.25em;
}

code,
kbd,
pre {
  font-family: var(--font-mono);
}

:focus-visible {
  outline: 2px solid var(--hue-text);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--hue-wash);
}

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: 760px;
}

section {
  padding-block: 88px;
}

.section-head {
  max-width: 640px;
  margin-bottom: 44px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hue-text);
  margin-bottom: 14px;
}

h2 {
  font-size: clamp(26px, 3.4vw, 36px);
}

h3 {
  font-size: 17px;
}

.lede {
  color: var(--ink-2);
  font-size: 17px;
  margin-top: 14px;
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  transition: top var(--transition);
}

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

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    transform var(--transition);
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

.btn:hover {
  text-decoration: none;
}

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

.btn--primary {
  background: var(--hue-solid);
  color: #fff;
}

.btn--primary:hover {
  filter: brightness(1.08);
}

.btn--ghost {
  background: var(--card);
  border-color: var(--line-hi);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--card-hi);
  border-color: var(--ink-3);
}

.btn--sm {
  padding: 8px 14px;
  font-size: 14px;
}

.btn svg {
  flex-shrink: 0;
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg); /* fallback where color-mix() is unsupported */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-right: auto;
}

.brand:hover {
  text-decoration: none;
}

.brand .mark {
  width: 18px;
  height: 18px;
  color: var(--hue);
  transition: color var(--transition);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 15px;
  transition: color var(--transition), background var(--transition);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  background: var(--card-hi);
  text-decoration: none;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition),
    background var(--transition);
}

.icon-btn:hover {
  color: var(--ink);
  background: var(--card-hi);
  border-color: var(--line-hi);
}

.nav-toggle {
  display: none;
}

/* Language switcher — native names, no flags. Placed next to the theme toggle. */
.lang-switch {
  position: relative;
  flex-shrink: 0;
}

.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition),
    background var(--transition);
}

.lang-switch__btn:hover,
.lang-switch__btn[aria-expanded="true"] {
  color: var(--ink);
  background: var(--card-hi);
  border-color: var(--line-hi);
}

.lang-switch__chev {
  opacity: 0.55;
}

.lang-switch__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 132px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  z-index: 60;
}

.lang-switch__menu[hidden] {
  display: none;
}

.lang-switch__menu a {
  display: block;
  padding: 8px 12px;
  border-radius: calc(var(--r-sm) - 2px);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.lang-switch__menu a:hover,
.lang-switch__menu a[aria-current="true"] {
  color: var(--ink);
  background: var(--card-hi);
  text-decoration: none;
}

.footer-lang {
  margin-top: 16px;
}

.footer-lang .lang-switch__menu {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.footer-lang .lang-switch__menu[hidden] {
  display: flex;
}

.footer-lang .lang-switch__menu a {
  padding: 4px 8px;
  color: var(--ink-3);
  font-size: 13px;
}

.footer-lang .lang-switch__menu a[aria-current="true"] {
  color: var(--ink-2);
  background: var(--card-hi);
}

/* Icons swap with theme; JS keeps data-theme in sync. */
.icon-sun {
  display: none;
}
:root[data-theme="dark"] .icon-sun {
  display: block;
}
:root[data-theme="dark"] .icon-moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun {
    display: block;
  }
  :root:not([data-theme="light"]) .icon-moon {
    display: none;
  }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-block: 92px 76px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% 30% auto -10%;
  height: 480px;
  background: radial-gradient(
    ellipse at center,
    var(--hue-wash) 0%,
    transparent 68%
  );
  pointer-events: none;
  transition: background 400ms ease;
}

.hero .wrap {
  position: relative;
}

.hero-inner {
  max-width: 720px;
}

.hero h1 {
  font-size: clamp(38px, 6vw, 62px);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.hero h1 em {
  font-style: normal;
  color: var(--hue-text);
  transition: color 400ms ease;
}

.hero-sub {
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 620px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-3);
}

/* --- Screenshot frame ----------------------------------------------------- */

.shot {
  margin-top: 60px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-side);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--card);
}

.shot-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-hi);
}

.shot-body {
  display: block;
  width: 100%;
  background: var(--bg);
}

.shot-placeholder {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
}

/* --- Provider strip ------------------------------------------------------- */

.providers {
  padding-block: 56px;
  border-block: 1px solid var(--line-soft);
  background: var(--bg-side);
}

.providers-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 12px;
}

.providers-note {
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.providers-note strong {
  color: var(--ink-2);
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  font-size: 14px;
  color: var(--ink-2);
  transition: border-color var(--transition), color var(--transition);
}

.chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--ink-3));
  flex-shrink: 0;
}

.chip.is-active {
  border-color: var(--dot, var(--line-hi));
  color: var(--ink);
}

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

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  transition: border-color var(--transition), transform var(--transition);
}

.card:hover {
  border-color: var(--line-hi);
}

.card .card-icon {
  width: 20px;
  height: 20px;
  color: var(--hue-text);
  margin-bottom: 16px;
}

.card h3 {
  margin-bottom: 8px;
}

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

/* --- Split sections ------------------------------------------------------- */

.split {
  display: grid;
  gap: 48px;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}

/* Grid items default to min-width:auto, which lets wide content (the diagram's
   fixed-width SVG, a long code line) push the column past the viewport instead
   of scrolling inside it. */
.split > * {
  min-width: 0;
}

.split--alt .split-media {
  order: -1;
}

.split-body h2 {
  margin-bottom: 16px;
}

.split-body p {
  color: var(--ink-2);
}

.split-body p + p {
  margin-top: 14px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin-top: 22px;
  display: grid;
  gap: 11px;
}

.feature-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-2);
}

.feature-list svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 4px;
  color: var(--hue-text);
}

/* --- Trust boundary diagram ----------------------------------------------- */

.diagram {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}

/* The diagram has a fixed 440x250 viewBox, so shrinking it to fit a phone
   takes its 9.5px labels below legibility. Below 600px it renders at natural
   size and this container scrolls instead. */
.diagram-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
}

.diagram-scroll::-webkit-scrollbar {
  height: 6px;
}

.diagram-scroll::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: 3px;
}

.diagram-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.diagram svg {
  width: 100%;
  height: auto;
}

/* Presentation attributes don't reliably resolve var() for font-family, so the
   diagram's type is set here instead. fill/stroke var() is fine. */
.diagram svg text {
  font-family: var(--font-ui);
}

.diagram svg text.mono {
  font-family: var(--font-mono);
}

.diagram figcaption {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* --- Pillars -------------------------------------------------------------- */

.pillars {
  background: var(--bg-side);
  border-block: 1px solid var(--line-soft);
}

.pillar h3 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hue-text);
  margin-bottom: 10px;
}

.pillar p {
  color: var(--ink-2);
  font-size: 15px;
}

/* --- Badge ---------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--hue);
  border-radius: var(--r-pill);
  background: var(--hue-wash);
  color: var(--hue-text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Inline CTA row ------------------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.cta-row .note {
  font-size: 14px;
  color: var(--ink-3);
}

/* --- "Or build from source" sub-head -------------------------------------
   Separates the download CTA from the clone instructions under #get, without
   competing with the section's own h2.
   ------------------------------------------------------------------------ */

.get-alt-head {
  margin: 40px 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}

/* --- Status table markers ------------------------------------------------- */

.status-now,
.status-soon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.status-now {
  color: var(--ok);
}

.status-soon {
  color: var(--warn);
}

.status-now::before,
.status-soon::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-soon::before {
  background: transparent;
  border: 1.5px solid currentColor;
}

/* --- Code blocks ---------------------------------------------------------- */

.code {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-side);
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px 9px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

.code pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink);
}

.code .c-comment {
  color: var(--ink-3);
}

.code .c-cmd {
  color: var(--code);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-side);
  color: var(--ink-2);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.copy-btn:hover {
  color: var(--ink);
  border-color: var(--line-hi);
}

.copy-btn.is-done {
  color: var(--ok);
  border-color: var(--ok);
}

/* --- Callout -------------------------------------------------------------- */

.callout {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 15px;
  color: var(--ink-2);
}

.callout svg {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  color: var(--warn);
}

.callout strong {
  color: var(--ink);
  font-weight: 600;
}

/* --- Download / build section --------------------------------------------- */

.platforms {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 28px;
}

.platform {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  text-align: center;
}

.platform svg {
  width: 24px;
  height: 24px;
  margin: 0 auto 12px;
  color: var(--ink-2);
}

.platform h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.platform p {
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* Where a platform ships more than one artefact -- Apple silicon vs Intel,
   AppImage vs .deb -- both are offered rather than guessed at. Guessing wrong
   hands someone a binary that will not start. */
.platform-dl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.platform-dl__link {
  display: block;
  padding: 7px 10px;
  border: 1px solid var(--line-hi);
  border-radius: calc(var(--r) - 6px);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.platform-dl__link:hover,
.platform-dl__link:focus-visible {
  border-color: var(--hue);
  background: var(--hue-wash);
  color: var(--hue-text);
}

/* The first artefact of each platform is the one most visitors want. */
.platform-dl__link:first-child {
  border-color: var(--hue);
  color: var(--hue-text);
}

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

.faq {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
}

details {
  border-bottom: 1px solid var(--line-soft);
}

details:last-child {
  border-bottom: 0;
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  transition: background var(--transition);
}

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

summary:hover {
  background: var(--card-hi);
}

summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}

details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

details .answer {
  padding: 0 22px 20px;
  color: var(--ink-2);
  font-size: 15px;
}

details .answer p + p {
  margin-top: 12px;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-side);
  padding-block: 48px 40px;
  font-size: 14px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: var(--ink-2);
  transition: color var(--transition);
}

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

.footer-bottom {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.7;
}

.footer-bottom p + p {
  margin-top: 8px;
}

/* --- Prose (docs / privacy) ----------------------------------------------- */

.prose h1 {
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: -0.03em;
}

.prose h2 {
  font-size: 24px;
  margin-top: 52px;
  padding-top: 8px;
}

.prose h3 {
  font-size: 17px;
  margin-top: 32px;
}

.prose p,
.prose ul,
.prose ol {
  margin-top: 14px;
  color: var(--ink-2);
}

.prose li + li {
  margin-top: 6px;
}

.prose .code,
.prose .callout,
.prose .faq {
  margin-top: 20px;
}

.prose code:not(pre code) {
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--card-hi);
  border: 1px solid var(--line-soft);
  color: var(--code);
  font-size: 0.88em;
}

.prose kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--line-hi);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}

.prose table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 15px;
}

.prose th,
.prose td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--card-hi);
  font-weight: 600;
  color: var(--ink);
}

.prose td {
  color: var(--ink-2);
}

.table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
}

.table-scroll::-webkit-scrollbar {
  height: 6px;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: 3px;
}

.table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* A command or shortcut broken across two lines reads as two things. The cell
   can widen instead — the table scrolls if that costs it the fit. */
.prose th code,
.prose td code {
  white-space: nowrap;
}

.page-head {
  padding-block: 64px 8px;
}

/* Prose pages end on a paragraph or button, with no section padding to space
   them off the footer's border. */
.prose {
  padding-bottom: 96px;
}

.page-head .lede {
  font-size: 18px;
}

/* --- Reveal animation ----------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* No JS? Show everything. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

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

@media (max-width: 860px) {
  section {
    padding-block: 64px;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* #artifacts puts its figure before its body so the image sits left on wide
     screens. Stacked, that leads the section with a screenshot instead of a
     heading — every split reads text-first here. */
  .split .split-media {
    order: 1;
  }

  .nav-toggle {
    display: inline-grid;
  }

  .nav-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px var(--gutter) 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .nav-links[hidden] {
    display: none;
  }

  .nav-links a {
    padding: 11px 12px;
  }
}

@media (min-width: 861px) {
  /* The mobile menu is never hidden on desktop, whatever JS last set. */
  .nav-links[hidden] {
    display: flex;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 18px;
  }

  .hero {
    padding-block: 60px 52px;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .shot {
    margin-top: 40px;
  }

  .prose {
    padding-bottom: 72px;
  }

  .diagram {
    padding: 20px 14px 14px;
  }

  /* Scoped to phones on purpose: at ~1024px the split column is narrower than
     440px too, but a 0.94 scale is fine there and a scrollbar would not be. */
  .diagram-scroll {
    padding-bottom: 10px;
  }

  .diagram-scroll svg {
    min-width: 440px;
  }

  /* Three columns squeeze every cell to three or four wrapped lines at this
     width, and scrolling would hide one. Each row becomes its own block, with
     the column heading carried down from thead via data-label. */
  .table-stack table,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
  }

  .table-stack thead {
    display: none;
  }

  .table-stack table {
    margin-top: 16px;
  }

  .table-stack tr {
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
  }

  .table-stack tr + tr {
    margin-top: 10px;
  }

  .table-stack td {
    padding: 0;
    border: 0;
  }

  /* The first column is the row's subject, so it reads as the block's title
     rather than as another labelled field. */
  .table-stack td:first-child {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }

  .table-stack td + td {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--line-soft);
  }

  .table-stack td + td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
}

/* --- Zoomable screenshots -------------------------------------------------- */

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

/* The button is a transparent wrapper around .shot-body — it must not disturb
   the figure's layout, so no padding, border, or background of its own. */
.shot-zoom {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  color: inherit;
  font: inherit;
}

.shot-zoom .shot-body {
  display: block;
  width: 100%;
  height: auto;
}

.shot-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.shot-zoom:hover .shot-zoom-hint,
.shot-zoom:focus-visible .shot-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

/* Without JS the button does nothing, so don't advertise it as interactive. */
.no-js .shot-zoom {
  cursor: default;
}

.no-js .shot-zoom-hint {
  display: none;
}

/* --- Lightbox -------------------------------------------------------------- */

.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  /* minmax(0, 1fr), not auto: an auto track sizes to the panel's max-content,
     which is the image's natural width once mobile uncaps it. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  cursor: zoom-out;
}

.lightbox-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

.lightbox-viewport {
  max-width: 100%;
  min-width: 0;
}

.lightbox-img {
  display: block;
  /* Capped at the 1x logical width so a @2x source downsamples into it and
     stays crisp, rather than being upscaled past its natural resolution. */
  max-width: min(1440px, 94vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  background: var(--bg-side);
}

.lightbox-cap {
  max-width: min(760px, 90vw);
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.lightbox-close:hover {
  background: var(--card-hi);
  border-color: var(--ink-3);
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox {
    animation: lightbox-in 140ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 640px) {
  .lightbox {
    padding: 12px;
  }

  .lightbox-close {
    top: -8px;
    right: -8px;
  }

  /* Capping a 1440px-wide UI shot at 94vw makes it no larger than the one
     already on the page. Show it at natural size; the viewport pans. */
  .lightbox-viewport {
    overflow: auto;
    max-height: 68vh;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-side);
    overscroll-behavior: contain;
  }

  .lightbox-img {
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Touch screens have no hover state to reveal this, and the shots are too
     small to read here, so the cue has to be permanent. */
  .shot-zoom-hint {
    opacity: 1;
    transform: none;
  }
}

/* ---- Break-even calculator (api-vs-subscription) -------------------------
   Hidden without JavaScript rather than left as a form that computes nothing;
   the worked-examples table on that page carries the same answer statically. */

.calc {
  margin: 28px 0 8px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 20px;
}

.calc-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.calc-field input {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--transition);
}

.calc-field input:focus-visible {
  outline: 2px solid var(--hue-solid);
  outline-offset: 1px;
  border-color: var(--hue-solid);
}

.calc-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}

.calc-out {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  align-items: baseline;
}

.calc-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calc-result-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.calc-result-value {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.calc-verdict {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

.calc-nojs {
  display: none;
}

.no-js .calc {
  display: none;
}

.no-js .calc-nojs {
  display: block;
}