/*
 * The landing page's stylesheet (issue #1021; ported from Docusaurus to plain
 * CSS by PRD #1419).
 *
 * Four parts, in order:
 *
 * 1. The colour tokens, carried over from `site/src/css/custom.css`. Light is
 *    the default; dark applies when the OS prefers it and nothing explicit is
 *    chosen, or when the toggle has set `data-theme="dark"`. The toggle's
 *    `data-theme="light"` overrides a dark OS preference.
 * 2. Base element styles standing in for the Infima defaults the page used to
 *    inherit from the Docusaurus theme (font stacks, link colour, code chips).
 * 3. The page's own header and footer, which replaced the Docusaurus navbar
 *    and footer, and the pieces PRD #1419 added (the agent prompt in the
 *    hero, and the docs index for agents above the footer).
 * 4. The design itself, `site/src/pages/index.module.css` ported rather than
 *    restyled: the CSS-module class names became plain classes and nothing
 *    else moved.
 */

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

:root {
  --c-bg: #ffffff;
  --c-bg-alt: #f5f7f9;
  --c-ink: #0e1418;
  --c-dim: #55636e;
  --c-line: #e2e7eb;
  --c-teal: #0a7c73;
  --c-teal-soft: rgba(15, 156, 144, 0.12);
  --c-violet: #6248d6;
  --c-violet-soft: rgba(98, 72, 214, 0.1);
  --c-amber: #8a5200;
  --c-amber-soft: rgba(224, 165, 49, 0.14);
  --c-shadow: 0 30px 70px -30px rgba(14, 20, 24, 0.35);
  --c-cta-from: #0b7d74;
  --c-cta-to: #5a3fd0;
  --c-cta-ink: #ffffff;
  --c-code-bg: rgba(14, 20, 24, 0.05);
  --c-code-line: rgba(14, 20, 24, 0.1);
  --c-nav-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  /* The footer is dark in both themes, as the Docusaurus `style: 'dark'` footer was. */
  --c-footer-bg: #303846;
  --c-footer-ink: #ebedf0;
  --c-footer-dim: #c3c7cd;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --c-bg: #0a0e12;
    --c-bg-alt: #101720;
    --c-ink: #edf2f6;
    --c-dim: #9aa8b4;
    --c-line: #1e2833;
    --c-teal: #4ecdc4;
    --c-teal-soft: rgba(78, 205, 196, 0.14);
    --c-violet: #9d8bff;
    --c-violet-soft: rgba(157, 139, 255, 0.14);
    --c-amber: #e0a531;
    --c-amber-soft: rgba(224, 165, 49, 0.14);
    --c-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
    --c-cta-from: #4ecdc4;
    --c-cta-to: #9d8bff;
    --c-cta-ink: #07121a;
    --c-code-bg: rgba(255, 255, 255, 0.08);
    --c-code-line: rgba(255, 255, 255, 0.1);
    --c-nav-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

/* The same dark values, for an explicit choice from the toggle. */
:root[data-theme='dark'] {
  --c-bg: #0a0e12;
  --c-bg-alt: #101720;
  --c-ink: #edf2f6;
  --c-dim: #9aa8b4;
  --c-line: #1e2833;
  --c-teal: #4ecdc4;
  --c-teal-soft: rgba(78, 205, 196, 0.14);
  --c-violet: #9d8bff;
  --c-violet-soft: rgba(157, 139, 255, 0.14);
  --c-amber: #e0a531;
  --c-amber-soft: rgba(224, 165, 49, 0.14);
  --c-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
  --c-cta-from: #4ecdc4;
  --c-cta-to: #9d8bff;
  --c-cta-ink: #07121a;
  --c-code-bg: rgba(255, 255, 255, 0.08);
  --c-code-line: rgba(255, 255, 255, 0.1);
  --c-nav-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell,
    'Noto Sans', sans-serif, BlinkMacSystemFont, Helvetica, Arial,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-size: 100%;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: var(--c-teal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code,
pre {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
}

code {
  font-size: 95%;
  background: var(--c-code-bg);
  border: 1px solid var(--c-code-line);
  border-radius: 0.4rem;
  padding: 0.1rem 0.25rem;
  vertical-align: middle;
}

.skipLink {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}

.skipLink:focus {
  top: 0.5rem;
}

/* ---------- 3. header ---------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 3.75rem;
  padding: 0.5rem 1rem;
  background: var(--c-bg-alt);
  box-shadow: var(--c-nav-shadow);
}

.navbarInner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1.25rem;
}

.navbarBrand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-ink);
  font-weight: 700;
  font-size: 1.05rem;
}

.navbarBrand:hover {
  color: var(--c-ink);
  text-decoration: none;
}

.navbarBrand img {
  width: 2rem;
  height: 2rem;
}

.navbarLinks,
.navbarRight {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.navbarRight {
  margin-left: auto;
}

.navbarLinks a,
.navbarRight a {
  color: var(--c-ink);
  font-weight: 500;
}

.navbarLinks a:hover,
.navbarRight a:hover {
  color: var(--c-teal);
  text-decoration: none;
}

.themeToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
}

.themeToggle[hidden] {
  display: none;
}

.themeToggle:hover {
  background: var(--c-bg-alt);
}

/* The toggle shows the theme it will switch TO. */
.iconSun {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .iconSun {
    display: block;
  }

  :root:not([data-theme='light']) .iconMoon {
    display: none;
  }
}

:root[data-theme='dark'] .iconSun {
  display: block;
}

:root[data-theme='dark'] .iconMoon {
  display: none;
}

@media (max-width: 560px) {
  .navbarLinks a[href='/llms.txt'] {
    display: none;
  }
}

/* ---------- 3. footer ---------- */

.footer {
  background: var(--c-footer-bg);
  color: var(--c-footer-ink);
  padding: 2rem 1rem;
}

.footerInner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.footerTitle {
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li {
  margin: 0.2rem 0;
}

.footer a {
  color: var(--c-footer-dim);
}

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

.footerCopyright {
  text-align: center;
  margin: 2rem 0 0;
  color: var(--c-footer-dim);
  font-size: 0.9rem;
}

/* ---------- 3. the agent prompt (PRD #1419) ---------- */

/*
 * The page's call to action, inside the hero under the lede: a heading, one
 * line on what the prompt does, the prompt with its copy button, and the one
 * link for a person who would rather install by hand. The hero is centred;
 * the prompt itself is left-aligned, because it is text to read and copy.
 */
.heroPrompt {
  max-width: 680px;
  margin: 2.4rem auto 0;
  padding: 1.4rem 1.5rem 1.2rem;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-bg-alt);
  box-shadow: 0 18px 40px -28px var(--c-violet);
  text-align: left;
}

.heroPromptTitle {
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

.heroPromptLede {
  color: var(--c-dim);
  margin: 0;
  font-size: 0.95rem;
}

/* The one link for a person who would rather install it by hand. */
.diyLink {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--c-dim);
}

.diyLink a {
  font-weight: 600;
  white-space: nowrap;
}

.promptBox {
  position: relative;
  margin-top: 1rem;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-teal);
  border-radius: 8px;
  background: var(--c-bg);
}

.promptBox pre {
  margin: 0;
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--c-ink);
}

.copyButton {
  display: block;
  margin: 0 0.75rem 0.75rem auto;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-bg-alt);
  color: var(--c-ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.copyButton[hidden] {
  display: none;
}

.copyButton:hover {
  border-color: var(--c-teal);
}

/* ---------- 3. the docs index, for agents (PRD #1419) ---------- */

/*
 * The last band above the footer, kept quiet: small text, flat surface,
 * hairline rules. It is there for an agent reading the served HTML (every
 * published page as a plain link, beside where an agent should start), not
 * as something a person is asked to click through.
 */
.forAgents {
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-alt);
  padding: 2.5rem 1rem 3rem;
}

.forAgentsInner {
  max-width: 1080px;
  margin: 0 auto;
}

.forAgentsTitle {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-dim);
  margin: 0;
}

.forAgentsNote {
  color: var(--c-dim);
  font-size: 0.85rem;
  margin: 0.75rem 0 1.25rem;
  max-width: 80ch;
}

.forAgentsNote strong {
  color: var(--c-ink);
}

.docsIndex {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 2rem;
}

.docsIndex li {
  break-inside: avoid;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.8rem;
}

.docsIndex a {
  font-weight: 600;
}

.docsIndex span {
  display: block;
  color: var(--c-dim);
  font-size: 0.75rem;
}

@media (max-width: 996px) {
  .docsIndex {
    columns: 2;
  }
}

@media (max-width: 560px) {
  .docsIndex {
    columns: 1;
  }
}

/* ---------- 4. the design (index.module.css) ---------- */

/*
 * Everything below is scoped under `.page`, the landing page's own visual
 * layer: its own bands, its own background, its own marketing devices.
 */

.page {
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.6;
  /* Contains the hero spotlight, which is deliberately wider than the page. */
  overflow-x: hidden;
}

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

.hero {
  position: relative;
  padding: 5rem 1rem 3rem;
  text-align: center;
  overflow: hidden;
}

.spotlight {
  position: absolute;
  inset: -40% 50% auto;
  width: 120vw;
  height: 90vh;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, var(--c-teal-soft), transparent 72%),
    radial-gradient(closest-side at 65% 40%, var(--c-violet-soft), transparent 70%);
  pointer-events: none;
}

.heroInner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--c-dim);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin: 0 0 1.75rem;
  background: var(--c-bg);
}

.dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-teal);
}

.heroTitle {
  font-size: clamp(2.25rem, 8vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 0;
}

.heroTitleAccent {
  background: linear-gradient(100deg, var(--c-teal), var(--c-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heroLede {
  font-size: clamp(1rem, 3.2vw, 1.22rem);
  color: var(--c-dim);
  max-width: 44rem;
  margin: 1.4rem auto 0;
}

.ctaRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2.1rem 0 0;
}

.ctaPrimary,
.ctaGhost {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.ctaPrimary {
  background: linear-gradient(100deg, var(--c-cta-from), var(--c-cta-to));
  color: var(--c-cta-ink);
  box-shadow: 0 10px 24px -12px var(--c-violet);
}

.ctaPrimary:hover,
.ctaPrimary:focus-visible {
  color: var(--c-cta-ink);
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.ctaGhost {
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  background: var(--c-bg);
}

.ctaGhost:hover,
.ctaGhost:focus-visible {
  color: var(--c-ink);
  text-decoration: none;
  border-color: var(--c-teal);
}

/* ---------- showcase ---------- */

.showcase {
  padding: 1rem 1rem 3.5rem;
}

/*
 * The hero is one window per client, side by side (PRD #1321). The column
 * widths come from `index.html` as `--hero-columns`, each in proportion to its
 * frame's aspect ratio, so the two windows stand the same height without
 * cropping either. A custom property rather than an inline
 * `grid-template-columns`, so the narrow-screen rule below can still
 * override it and stack them.
 */
.showcasePair {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--hero-columns, repeat(2, minmax(0, 1fr)));
  gap: 1.25rem;
  align-items: start;
}

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

.device {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-bg-alt);
  box-shadow: var(--c-shadow);
}

.deviceBar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--c-line);
}

.light {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--c-line);
}

.deviceTitle {
  margin-left: 0.75rem;
  font-size: 0.75rem;
  color: var(--c-dim);
}

.deviceLabel {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.deviceImage {
  display: block;
  width: 100%;
  height: auto;
}

.showcaseCaption {
  text-align: center;
  color: var(--c-dim);
  font-size: 0.85rem;
  margin: 1rem auto 0;
  max-width: 44rem;
}

/* ---------- agent strip ---------- */

.agentStrip {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 1.75rem 1rem;
  text-align: center;
  background: var(--c-bg-alt);
}

.agentStripLabel {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-dim);
  margin: 0 0 1.1rem;
}

.agentStripList {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem 2.25rem;
  margin: 0;
  padding: 0;
}

.agentStripList a {
  color: var(--c-ink);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 650;
}

.agentStripList a:hover {
  color: var(--c-teal);
}

.agentStripNote {
  max-width: 54rem;
  margin: 1.4rem auto 0;
  font-size: 0.82rem;
  color: var(--c-dim);
}

/* ---------- section basics ---------- */

.sectionTitle {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}

/* ---------- why ---------- */

.why {
  max-width: 860px;
  margin: 0 auto;
  padding: 4.5rem 1rem 3rem;
  text-align: center;
}

.pullQuote {
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--c-teal);
  text-align: left;
}

.whyRest {
  text-align: left;
  color: var(--c-dim);
}

.whyRest p {
  margin: 0 0 1rem;
}

/* ---------- scroll story ---------- */

.story {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}

/*
 * Each step is text over its frames rather than text beside one frame
 * (PRD #1321). The home page shows BOTH clients at once instead of asking the
 * reader to pick one, so a step carries up to two frames, and two frames only
 * fit side by side at a readable size when they have the whole row: at the
 * story's 1120px each gets about 540px, close to the 602.6px the single frame
 * had in the old two-column row. Side by side beside the text they would have
 * shared that 602.6px column and dropped to under 300px each, where neither the
 * terminal's text nor the dashboard's rows can be read.
 *
 * The text keeps a reading measure and sits at the row's left edge, over the
 * first frame, so the eye runs text -> TUI frame -> desktop frame in one pass.
 */
.storyRow {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.storyText {
  max-width: 46rem;
}

.storyStep {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-violet);
  background: var(--c-violet-soft);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  margin-bottom: 0.9rem;
}

.storyText h3 {
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 0.6rem;
}

.storyText p {
  color: var(--c-dim);
  margin: 0;
}

/*
 * The frames. Two columns of equal width; `align-items: start` because the
 * two clients' frames have different shapes (the terminal UI's real captures
 * run from 1.30 to 1.78 wide-to-tall, the desktop app's generated frames are
 * all 1.60), and stretching them to one height would letterbox one inside its
 * border. A step with a single frame -- row 04, which has no desktop frame --
 * takes one column's width, centred, so it is the same size as a frame in the
 * rows above it rather than a frame twice as large.
 */
.storyFigures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.storyFiguresSingle {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc((100% - 1.5rem) / 2);
  width: 100%;
  margin: 0 auto;
}

.storyFigure {
  margin: 0;
  min-width: 0;
}

.storyFigureLabel {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-teal);
  margin-bottom: 0.5rem;
}

.storyFigure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: var(--c-shadow);
}

.storyFigure figcaption {
  font-size: 0.8rem;
  color: var(--c-dim);
  margin-top: 0.6rem;
}

/*
 * Below the site's desktop breakpoint two half-width frames get too small to
 * read, so they stack, each at the full width, in the same order: terminal UI
 * first, then the desktop app. The single frame of row 04 goes full width too.
 */
@media (max-width: 996px) {
  .storyFigures {
    grid-template-columns: minmax(0, 1fr);
  }

  .storyFiguresSingle {
    max-width: none;
  }
}

/* ---------- audience ---------- */

.audience {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 4rem 1rem;
}

.audienceInner {
  max-width: 780px;
  margin: 0 auto;
}

.audienceList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.audienceList li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 1.05rem;
}

.check {
  flex: 0 0 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--c-teal-soft);
  color: var(--c-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 0.15rem;
}

.audienceNot {
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--c-line);
  color: var(--c-dim);
  font-size: 0.95rem;
}

/* ---------- two clients ---------- */

.clients {
  max-width: 1120px;
  margin: 0 auto;
  padding: 4rem 1rem 1rem;
}

.clientsIntro {
  color: var(--c-dim);
  max-width: 62ch;
  margin: 0 0 1.75rem;
}

.clientGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.clientCard {
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--c-bg-alt);
}

.clientCard img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: 8px;
}

.clientCard h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
  letter-spacing: -0.02em;
}

.clientCard p {
  color: var(--c-dim);
  margin: 0;
  font-size: 0.95rem;
}

.clientCard .clientLink {
  margin: 0.9rem 0 0;
  font-weight: 600;
}

/* ---------- principles ---------- */

.principles {
  max-width: 1120px;
  margin: 0 auto;
  padding: 4rem 1rem 2rem;
}

.principleGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.principleCard {
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 1.5rem 1.6rem;
  background: var(--c-bg-alt);
}

.principleNum {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-teal);
}

.principleCard h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0.5rem 0 0.5rem;
  letter-spacing: -0.02em;
}

.principleCard p {
  color: var(--c-dim);
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- platforms ---------- */

.install {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 4rem 1rem;
}

.installInner {
  max-width: 720px;
  margin: 0 auto;
}

.platformList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.platformList li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--c-line);
}

.markOk {
  flex: 0 0 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-teal);
}

.platformName {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.platformDetail {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--c-dim);
}

.platformStatus {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--c-dim);
  text-align: right;
}

.install .diyLink {
  margin-top: 1.25rem;
}

/* ---------- close ---------- */

.close {
  padding: 4.5rem 1rem 4rem;
  text-align: center;
  background: radial-gradient(
    ellipse at 50% 120%,
    var(--c-teal-soft),
    transparent 65%
  );
}

.closeInner {
  max-width: 680px;
  margin: 0 auto;
}

.closeTitle {
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
}

/* ---------- links inside the dimmed text, pinned to the accent ---------- */

.diyLink a,
.clientLink a {
  color: var(--c-teal);
}

.diyLink a:hover,
.clientLink a:hover {
  color: var(--c-teal);
  text-decoration: underline;
}

/* ---------- focus ---------- */

/*
 * One focus ring for every link on the page. `.ctaPrimary` and `.ctaGhost`
 * carry their own `:focus-visible` rules while the agent-strip links and the
 * colour-override links fell back to the browser default, so keyboard focus
 * looked different from place to place and was close to invisible in some.
 * Those rules stay -- they are the hover affordance repeated -- and this adds
 * the indicator they were standing in for.
 *
 * `--c-teal` is #0a7c73 on the light background (5.07:1) and #4ecdc4 on the
 * dark one (10.01:1), so the ring clears WCAG's 3:1 for non-text in both.
 */
.page a:focus-visible,
.navbar a:focus-visible,
.themeToggle:focus-visible,
.copyButton:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/*
 * The footer is dark in both themes, where the light theme's #0a7c73 would be
 * about 2.3:1 against --c-footer-bg; the dark theme's #4ecdc4 is about 6:1
 * there, so the footer uses that teal in both.
 */
.footer a:focus-visible {
  outline: 2px solid #4ecdc4;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- utilities ---------- */

/*
 * Present to a screen reader, absent to the eye. Used for the story section's
 * <h2>, which exists so the four <h3> steps do not hang off nothing.
 */
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

@media (max-width: 996px) {
  .storyRow {
    gap: 1.5rem;
  }

  .principleGrid,
  .clientGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .story {
    gap: 3rem;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 3rem;
  }

  .heroPrompt {
    padding: 1.1rem 1rem 1rem;
  }

  .ctaPrimary,
  .ctaGhost {
    width: 100%;
    text-align: center;
  }

  /* The status column needs its own line before it starts squeezing the name. */
  .platformList li {
    flex-wrap: wrap;
  }

  /* A zero basis keeps a long detail beside its mark instead of wrapping it
     onto a line of its own. */
  .platformName {
    flex-basis: 0;
  }

  .platformStatus {
    flex: 1 0 100%;
    padding-left: 1.75rem;
    text-align: left;
  }
}