/* ─── Fonts ──────────────────────────────────────────────────────────────── */
/* Geist and Geist Mono, self-hosted (the same cuts the previous build shipped) */

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2) format("woff2");
  unicode-range: U+00??, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range: U+00??, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}


/* ─── Tokens ─────────────────────────────────────────────────────────────── */
/* The app's own themes (src/renderer/styles/globals.css), with the live agent's
   holographic state palette (live-agent/lib/colors.ts) as the accent. Those
   state colors are the same in both themes, as they are in the app. */

:root {
  /* Live agent states */
  --state-idle: #ff4081;
  --state-thinking: #0088ff;
  --state-tool: #fca935;
  --state-complete: #00c950;
  --state-error: #fb2c36;
  --state-permission: #a855f7;

  /* The accent: the color a working agent's tool call glows in */
  --neon-rgb: 252, 169, 53;

  --sans: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* What the project cards are held off by, above and below alike */
  --card-gap: clamp(24px, 4vw, 48px);

  --radius: 12px;
  --shell: 1180px;
  --gutter: 24px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Dark is the default; light takes over below when the system asks for it */
:root {
  color-scheme: dark;

  --bg: #151515;
  --bg-deep: #111111;
  --card: #20201f;
  --card-hover: #262524;
  --card-face: #191918;
  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 14px 30px -22px rgba(0, 0, 0, 0.95);

  --fg: #f0efec;
  --fg-rgb: 240, 239, 236;
  --fg-muted: #c3c2b7;
  --fg-dim: #8a8984;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --tint: rgba(255, 255, 255, 0.045);
  --tint-strong: rgba(255, 255, 255, 0.075);
  --header-bg: rgba(21, 21, 21, 0.72);

  /* The accent as text: bright enough to read against the dark page */
  --neon-ink: #fcb44f;
  --neon-text-glow: 0 0 14px rgba(var(--neon-rgb), 0.45);
  --grid-line: rgba(255, 255, 255, 0.035);
  --slide-back: 0.45;
  --shade: rgba(0, 0, 0, 0.95);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #fcfcfb;
    --bg-deep: #fbfbf9;
    --card: #ffffff;
    --card-hover: #f6f5f2;
    --card-face: #fdfdfc;
    --card-shadow:
      inset 0 1px 0 #ffffff,
      0 1px 2px rgba(11, 11, 11, 0.04),
      0 14px 28px -22px rgba(11, 11, 11, 0.35);

    --fg: #0b0b0b;
    --fg-muted: #52514e;
    --fg-dim: #76756f;
    --border: rgba(11, 11, 11, 0.1);
    --border-strong: rgba(11, 11, 11, 0.22);
    --tint: rgba(11, 11, 11, 0.035);
    --tint-strong: rgba(11, 11, 11, 0.06);
    --header-bg: rgba(252, 252, 251, 0.78);

    --neon-ink: #9a5a04;
    --neon-text-glow: none;
    --grid-line: rgba(11, 11, 11, 0.05);
  --slide-back: 0.6;
  --shade: rgba(11, 11, 11, 0.22);
  }
}

/* A project page takes its own color as the page accent, so the section
   labels, the accent words and the lit column all belong to that project
   rather than to the design system they share. */
.page-lg {
  --neon-rgb: 59, 130, 246;
  --neon-ink: #6aa6ff;
}

@media (prefers-color-scheme: light) {
  .page-lg {
    --neon-ink: #1d5fd0;
  }
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

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

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

/* A column at least as tall as the window, so a page with little on it still
   has its footer at the bottom rather than partway down */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* What takes up the slack; a long page simply grows past it */
main {
  flex: 1 0 auto;
}

/* The glow behind the page: the accent at the top, a cool wash further down */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 540px at 78% -8%, rgba(var(--neon-rgb), 0.12), transparent 68%),
    radial-gradient(760px 520px at 8% 22%, rgba(0, 136, 255, 0.07), transparent 70%);
}

h1,
h2,
h3,
.shots-caption p {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

p {
  margin: 0;
}

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

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

code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--tint-strong);
  font-family: var(--mono);
  font-size: 0.88em;
}

:focus-visible {
  outline: 2px solid var(--neon-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

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

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

/* ─── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: var(--header-bg);
}

.site-header .shell {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
}

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

/* Each page is headed by the mark of what it is: the org on its own front
   page, the project on a project's */
.brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--fg-muted);
  transition: color 0.15s, background-color 0.15s;
}

.nav a:hover {
  color: var(--fg);
  background: var(--tint);
}

/* The header's buttons sit together at its right edge */
.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Ghosts, like the links they stand next to: nothing drawn until hovered */
.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.icon-button:hover {
  color: var(--fg);
  background: var(--tint);
}

.icon-button svg {
  width: 17px;
  height: 17px;
}

/* The hamburger is only there once the links have nowhere else to go */
.nav-toggle {
  display: none;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

@media (max-width: 760px) {
  /* The wordmark keeps the two buttons beside it; the links drop into a panel
     under the header, which the hamburger opens */
  .nav-toggle {
    display: grid;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px var(--gutter) 16px;
    background: var(--bg);
    box-shadow: 0 18px 34px -24px var(--shade);
  }

  .nav[data-open="true"] {
    display: flex;
  }

  .nav a {
    padding: 12px;
    font-size: 15px;
  }
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px);
}

/* The home page has no second column: one centred measure instead */
.hero.is-centered {
  padding-bottom: var(--card-gap);
  text-align: center;
}

.hero.is-centered h1 {
  max-width: 19ch;
  margin-inline: auto;
}


.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.55rem);
  max-width: 15ch;
}

/* The accent words run through the live agent's whole palette: every color a
   node glows in, laid out as one gradient that slides across the letters, so
   the words keep moving through the states the graph shows. Where the letters
   can't be painted with it, they stay one of those colors. */
.hero h1 em {
  font-style: normal;
  color: var(--state-thinking);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 em {
    background-image: linear-gradient(90deg,
        var(--state-thinking),
        var(--state-complete),
        var(--state-tool),
        var(--state-idle),
        var(--state-error),
        var(--state-permission),
        var(--state-thinking));
    /* A quarter of the sequence shows at a time, and it tiles seamlessly
       because it ends on the color it began with */
    background-size: 400% 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: agent-hues 60s linear infinite;
  }
}

/* LangGraphics marks a node blue while it runs, green once it has, red where
   it failed: the heading cycles through the three the same way */
.page-lg .hero h1 em {
  background-image: linear-gradient(90deg,
      var(--state-thinking),
      var(--state-complete),
      var(--state-error),
      var(--state-thinking));
}

/* 400% of the way along shifts the image by exactly three of its own widths,
   so the sequence comes round without a seam */
@keyframes agent-hues {
  from {
    background-position-x: 0%;
  }

  to {
    background-position-x: 400%;
  }
}

.hero-sub {
  margin-top: 20px;
  max-width: 50ch;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: var(--fg-muted);
}

@media (max-width: 920px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Agent stage (the live agent canvas) ────────────────────────────────── */
/* The stage has no frame and no wash of its own: its grid fades out into the
   page, so the graph reads as drawn on the page rather than shown in a window,
   and the only light comes off the nodes themselves, as it does in the app.
   Only how far the bloom is turned up changes with the theme, which the canvas
   reads itself; the nodes' own colors don't. */

.hero-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 540px;
}

/* A faint grid, so the nodes read as sitting in a space */
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 12%, transparent 100%);
}

/* The execution graph is taller than it is wide, and reads at its own size */
.hero-stage.is-flow {
  aspect-ratio: 0.92;
  max-height: 520px;
}

.hero-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ─── Download buttons ───────────────────────────────────────────────────── */
/* Each platform carries its own color, the way its mark is usually drawn: the
   Windows blue, the Apple mark in the page's own ink, the Linux amber. The
   platform you are on is lit in that color; the other two stay quiet. */

.dl {
  margin-top: 34px;
  max-width: 620px;
}

.dl-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

@media (max-width: 620px) {
  .dl-buttons {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-os="win"] {
  --accent: var(--state-thinking);
  --accent-rgb: 0, 136, 255;
}

[data-os="mac"] {
  --accent: var(--fg);
  --accent-rgb: var(--fg-rgb);
}

[data-os="linux"] {
  --accent: var(--state-idle);
  --accent-rgb: 255, 64, 129;
}

/* A platform with one build is a single button; one with several is that
   button and a chevron beside it, sharing a border */
.dl-group {
  display: flex;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s;
}

.dl-group:hover {
  border-color: var(--border-strong);
  background: var(--card-hover);
}

.dl-group[data-lit="true"] {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.075);
  box-shadow: 0 0 16px -10px rgba(var(--accent-rgb), 0.35), inset 0 0 18px -17px var(--accent);
}

.dl-group[data-lit="true"]:hover {
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 0 20px -9px rgba(var(--accent-rgb), 0.5), inset 0 0 18px -14px var(--accent);
}

.dl-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s var(--ease);
}

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

.dl-btn-icon {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--fg);
  transition: color 0.18s;
}

/* Tux is drawn with room around him on his artboard: a nudge up to match the
   other two marks optically */
[data-os="linux"] .dl-btn-icon {
  width: 28px;
  height: 28px;
  margin: -2px;
}

.dl-group[data-lit="true"] .dl-btn-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.3));
}

.dl-btn-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.dl-btn-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.dl-group[data-lit="true"] .dl-btn-kicker {
  color: var(--accent);
}

.dl-btn-name {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* What the chosen platform actually downloads, under its button: one button
   per build, so macOS offers its two architectures side by side. They carry
   that platform's color too, so the choice and the download read as one.
   (auto-fit collapses the tracks it doesn't fill, so a lone button spans the
   whole row.) */
.dl-primaries {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.dl-primary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: var(--radius);
  background: rgba(var(--accent-rgb), 0.075);
  color: var(--fg);
  line-height: 1.3;
  box-shadow: 0 0 16px -10px rgba(var(--accent-rgb), 0.35), inset 0 0 20px -17px var(--accent);
  transition: background-color 0.18s, box-shadow 0.18s, transform 0.18s var(--ease);
}

.dl-primary:hover {
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 0 20px -9px rgba(var(--accent-rgb), 0.5), inset 0 0 20px -14px var(--accent);
}

.dl-primary:active {
  transform: translateY(1px);
}

.dl-primary b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
}

.dl-primary small {
  font-size: 11.5px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Sections ───────────────────────────────────────────────────────────── */

.section {
  padding: clamp(56px, 8vw, 104px) 0;
}

.section-head {
  margin-bottom: clamp(32px, 4vw, 52px);
}

.section-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neon-ink);
  text-shadow: var(--neon-text-glow);
}

.section-head h2,
.section-head .shots-caption p {
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
}

.section-head p {
  margin-top: 16px;
  color: var(--fg-muted);
  font-size: clamp(0.98rem, 1.4vw, 1.06rem);
}

/* ─── Features ───────────────────────────────────────────────────────────── */

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

/* No edge at all: a flat face a shade off the page, lit along its top and
   lifted by its shadow, is the whole of the card */
.feature {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--card-face);
  box-shadow: var(--card-shadow);
}

/* Each card's icon glows in its own state color, as a node does */
.feature-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 15px;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 13%, transparent);
  box-shadow: 0 0 20px -8px currentColor, inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
}

.feature-icon svg {
  width: 17px;
  height: 17px;
}

.feature h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--fg);
}

.feature p {
  margin-top: 8px;
  font-size: 13.6px;
  color: var(--fg-muted);
}

/* ─── LangGraphics' mark ─────────────────────────────────────────────────── */

/* The play head beats green, the way a run does in the tool itself */
@keyframes lg-pulse {
  0%,
  100% {
    fill: currentColor;
  }

  50% {
    fill: #238636;
  }
}

.play-pulse {
  animation: lg-pulse 1.6s ease-in-out infinite;
}

/* ─── Project cards ──────────────────────────────────────────────────────── */
/* The org's two projects, each a link to its own site. They take the feature
   card's surface, and the project's own color on the mark and on hover. */

.section.is-tight {
  padding-top: 0;
  padding-bottom: var(--card-gap);
}

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

.project {
  display: flex;
  gap: 18px;
  padding: 26px;
  border-radius: var(--radius);
  background: var(--card-face);
  box-shadow: var(--card-shadow);
}

.project[data-project="workbench"] {
  --accent: var(--state-tool);
  --accent-rgb: 252, 169, 53;
}

.project[data-project="langgraphics"] {
  --accent: var(--state-thinking);
  --accent-rgb: 59, 130, 246;
}


.project-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.project-mark svg {
  width: 26px;
  height: 26px;
}

/* A mark that only exists as artwork is painted through as a mask, so it
   still takes the color of the text it stands with */
.mask-mark {
  display: block;
  width: 28px;
  height: 28px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.mask-mark[data-mark="org"] {
  mask-image: url("/assets/img/proactive-agent.png");
}

.project-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.project-name {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.project-tag {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
}

.project-copy {
  margin-top: 13px;
  font-size: 14px;
  color: var(--fg-muted);
}

.project-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
}

.project-go svg {
  width: 15px;
  height: 15px;
}


/* ─── Code blocks ────────────────────────────────────────────────────────── */

.install {
  margin-top: 30px;
  max-width: 560px;
}

.code {
  position: relative;
  border-radius: var(--radius);
  background: var(--card-face);
  box-shadow: var(--card-shadow);
}

.code pre {
  margin: 0;
  padding: 15px 52px 15px 18px;
  overflow-x: auto;
}

.code code {
  padding: 0;
  background: none;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg);
  white-space: pre;
}

.code.is-block {
  max-width: 720px;
}

.code-dim {
  color: var(--fg-dim);
  user-select: none;
}

.tok-kw {
  color: var(--state-permission);
}

.tok-fn {
  color: var(--state-thinking);
}

.tok-call {
  color: var(--state-tool);
  font-weight: 600;
}

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

/* The button swaps to a tick for a moment once the text is on the clipboard */
.code-copy {
  position: absolute;
  top: 10px;
  right: 10px;
}

.code-copy .icon-done {
  display: none;
}

.code[data-copied] .code-copy {
  color: var(--state-complete);
}

.code[data-copied] .code-copy .icon-copy {
  display: none;
}

.code[data-copied] .code-copy .icon-done {
  display: block;
}

/* ─── Comparison table ───────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--card-face);
  box-shadow: var(--card-shadow);
}

.compare {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.compare th,
.compare td {
  padding: 12px 18px;
  text-align: left;
}

.compare thead th {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.compare tbody th {
  font-weight: 400;
  color: var(--fg-muted);
}

.compare tbody tr + tr th,
.compare tbody tr + tr td {
  border-top: 1px solid var(--border);
}

/* The project's own column is the one being argued for: it is lit */
.compare .is-own {
  background: rgba(var(--neon-rgb), 0.05);
}

.compare thead .is-own {
  color: var(--neon-ink);
}

.compare td {
  width: 1%;
  white-space: nowrap;
}

/* A tick or a cross, drawn rather than set, so no font has to carry it */
.compare td[data-has]::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  margin-inline: auto;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.compare td[data-has="yes"] {
  color: var(--state-complete);
}

.compare td[data-has="yes"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}

.compare td[data-has="no"] {
  color: var(--fg-dim);
  opacity: 0.55;
}

.compare td[data-has="no"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* ─── Screenshot carousel ────────────────────────────────────────────────── */
/* The three windows on a turntable: the one in front is full size and lit, the
   other two sit back and to either side, turned slightly inward. It comes
   round on its own, the left one taking the front each time. */

/* The description stands in for the section's heading, so it is set like one
   and runs the whole width. All three sit in the same grid cell with only the
   live one visible, so the box is always as tall as the longest of them and
   the carousel under it never jumps as they come round. */
#screens .section-head {
  max-width: none;
}

.section-head .shots-caption {
  display: grid;
  margin-top: 14px;
}

/* Two classes, so the color outranks the `.section-head p` lead paragraph;
   everything else about the type comes from the heading rules above */
.section-head .shots-caption p {
  grid-area: 1 / 1;
  color: var(--fg);
  visibility: hidden;
}

/* Going from no animation to this one is what plays it, every time round */
.section-head .shots-caption p[data-active] {
  visibility: visible;
  animation: caption-in 0.55s var(--ease) both;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.carousel {
  position: relative;
  /* Room for the front slide at 72% of the width, plus the ones behind it */
  aspect-ratio: 2.28;
  perspective: 1400px;
  outline-offset: 10px;
}

.slide {
  position: absolute;
  top: 50%;
  left: 14%;
  width: 72%;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-deep);
  overflow: hidden;
  transform-origin: 50% 50%;
  transition: transform 0.75s var(--ease), opacity 0.75s var(--ease),
    filter 0.75s var(--ease), box-shadow 0.75s var(--ease);
  will-change: transform;
}

/* `height: auto` keeps the image at its own ratio: the width and height
   attributes would otherwise pin it to the full pixel height */
.slide img {
  width: 100%;
  height: auto;
}

/* In front, and the only one that can be read */
.slide[data-pos="front"] {
  z-index: 3;
  transform: translate(0, -50%) scale(1);
  opacity: 1;
  box-shadow: 0 44px 86px -48px var(--shade);
}

.slide[data-pos="left"],
.slide[data-pos="right"] {
  z-index: 2;
  opacity: var(--slide-back);
  filter: saturate(0.6);
  cursor: pointer;
  box-shadow: 0 30px 60px -44px var(--shade);
}

.slide[data-pos="left"] {
  transform: translate(-25%, -50%) scale(0.78) rotateY(16deg);
}

.slide[data-pos="right"] {
  transform: translate(25%, -50%) scale(0.78) rotateY(-16deg);
}

.slide[data-pos="left"]:hover,
.slide[data-pos="right"]:hover {
  opacity: calc(var(--slide-back) + 0.22);
  filter: saturate(0.85);
}

@media (max-width: 720px) {
  /* No room to stand two slides behind the front one: it takes the width, and
     the others only show at its shoulders */
  .carousel {
    aspect-ratio: 1.95;
  }

  .slide {
    left: 8%;
    width: 84%;
  }

  .slide[data-pos="left"] {
    transform: translate(-24%, -50%) scale(0.76) rotateY(16deg);
  }

  .slide[data-pos="right"] {
    transform: translate(24%, -50%) scale(0.76) rotateY(-16deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* It doesn't turn on its own; what moves is only what was asked for */
  .slide {
    transition-duration: 0.01ms;
  }
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  padding: 34px 0;
}

.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  font-size: 13px;
  color: var(--fg-dim);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-left: auto;
}

.site-footer a:hover {
  color: var(--fg);
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */

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