/* Wundervault 1.0 site styles. Fonts come from /static/fonts/fonts.css (self-hosted).
   Drafted with GPT-6 Astra, adapted to our theme script and tokens. */

/* Dark is the fallback if a browser cannot evaluate the theme media query. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #060a08;
  --panel: #0b1014;
  --panel2: #0d141a;
  --fg: #d8efe2;
  --dim: #5d7a6c;
  --faint: #384a40;
  --border: #19261f;
  /* One green in both modes. In dark it is also the text/line colour (--label);
     on white it is only 1.7:1, so light mode keeps it for fills, bars and highlights
     and draws text and thin lines in ink. */
  --brand: #3ce078;
  --brand-on: #04130a;
  --warn: #ff9a3a;
  --danger: #ff5a5a;
  --info: #7aa2ff;

  --muted: #a2b9ac;
  --label: #3ce078;
  --action-bg: #3ce078;
  --action-fg: #04130a;
  --mark-line: none;
  --stage: #10261b;
  --grid-line: rgba(60, 224, 120, 0.055);
  --hero-halo: rgba(60, 224, 120, 0.085);
  --selection-bg: #3ce078;
  --selection-fg: #04130a;
  --shadow: 0 18px 56px rgba(0, 0, 0, 0.2);

  --header-glow:
    0 0 14px rgba(60, 224, 120, 0.55),
    0 0 36px rgba(60, 224, 120, 0.25);
  --btn-glow:
    0 0 28px rgba(60, 224, 120, 0.4),
    inset 0 0 26px rgba(60, 224, 120, 0.1);

  --font-main: "JetBrains Mono", ui-monospace, monospace;
  /* The pre-1.0 logo face, kept by request (owner, 2026-10-13); body text stays in the new font. */
  --font-wordmark: "JetBrains Mono", ui-monospace, monospace;
  --font-reading: "IBM Plex Sans", system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --text-2xl: clamp(1.625rem, 1.2rem + 1.65vw, 2.5rem);
  --text-3xl: clamp(2rem, 1.25rem + 3vw, 4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm: 0.375rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --container: 74rem;
  --reading-width: 70ch;
}

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

  --bg: #fafafa;
  --panel: #fff;
  --panel2: #f3f4f4;
  --fg: #0e1410;
  --dim: #5b6660;
  --faint: #c6cec9;
  --border: #dee1de;
  --brand: #3ce078;
  --label: #0e1410;
  --brand-on: #04130a;
  --warn: #c46410;
  --danger: #c2261c;
  --info: #1556d4;

  --muted: #526058;
  --action-bg: #3ce078;
  --action-fg: #04130a;
  --mark-line: underline;
  --stage: #ecfcf2;
  --grid-line: rgba(60, 224, 120, 0.11);
  --hero-halo: rgba(60, 224, 120, 0.12);
  --selection-bg: #3ce078;
  --selection-fg: #04130a;
  --shadow: 0 18px 56px rgba(14, 20, 16, 0.06);

  --header-glow: none;
  --btn-glow: 0 0 24px rgba(60, 224, 120, 0.45);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]),
  html[data-theme="auto"] {
    color-scheme: light;

    --bg: #fafafa;
    --panel: #fff;
    --panel2: #f3f4f4;
    --fg: #0e1410;
    --dim: #5b6660;
    --faint: #c6cec9;
    --border: #dee1de;
    --brand: #3ce078;
    --label: #0e1410;
    --brand-on: #04130a;
    --warn: #c46410;
    --danger: #c2261c;
    --info: #1556d4;

    --muted: #526058;
    --action-bg: #3ce078;
    --action-fg: #04130a;
    --mark-line: underline;
    --stage: #ecfcf2;
    --grid-line: rgba(60, 224, 120, 0.11);
    --hero-halo: rgba(60, 224, 120, 0.12);
    --selection-bg: #3ce078;
    --selection-fg: #04130a;
    --shadow: 0 18px 56px rgba(14, 20, 16, 0.06);

    --header-glow: none;
    --btn-glow: 0 0 24px rgba(60, 224, 120, 0.45);
  }
}

/* Foundation */

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

html {
  font-size: 100%;
  /* Anchors land below the locked header, not under it. --header-h is measured by site.js. */
  scroll-padding-top: calc(var(--header-h, 0px) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-main);
  font-size: var(--text-base);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-main);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.045em;
}

h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.035em;
}

h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.025em;
}

h4 {
  font-size: var(--text-base);
}

p + p {
  margin-top: var(--space-4);
}

a {
  color: var(--label);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  max-width: 100%;
}

button,
a,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--label);
  outline-offset: 4px;
}

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

img {
  height: auto;
}

ul,
ol {
  padding-inline-start: 1.4em;
}

li + li {
  margin-top: var(--space-2);
}

code,
pre,
kbd {
  font-family: var(--font-main);
  font-size: 0.9em;
}

code {
  padding: 0.1em 0.3em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel2);
  color: var(--fg);
  white-space: normal;
  overflow-wrap: anywhere;
}

pre {
  max-width: 100%;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel2);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre code {
  padding: 0;
  border: 0;
  background: transparent;
  white-space: inherit; /* code's "normal" ran a block's lines together, so a copied command broke */
}

[hidden] {
  display: none !important;
}

.container {
  width: min(var(--container), calc(100% - 2rem));
  margin-inline: auto;
}

.section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.section + .section {
  border-top: 1px solid var(--border);
}

.section-head {
  max-width: 52rem;
  margin-bottom: var(--space-6);
}

.section-head > * + * {
  margin-top: var(--space-4);
}

.stack > * + * {
  margin-top: var(--space-5);
}

.stack-sm > * + * {
  margin-top: var(--space-3);
}

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

.grid-2,
.grid-3,
.principle-grid,
.protection-grid {
  display: grid;
  gap: var(--space-5);
}

.grid-2 > *,
.grid-3 > *,
.principle-grid > *,
.protection-grid > *,
.story-layout > *,
.doc-layout > *,
.footer-grid > *,
.site-header-inner > * {
  min-width: 0;
}

.muted {
  color: var(--muted);
}

.reading {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  line-height: 1.8;
}

.eyebrow {
  color: var(--label);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.glow-heading {
  color: var(--label);
  text-shadow: var(--header-glow);
  text-decoration-line: var(--mark-line);
  text-decoration-color: var(--brand);
  text-decoration-thickness: 0.32em;
  text-underline-offset: -0.14em;
  text-decoration-skip-ink: none;
}

.fine-print {
  color: var(--muted);
  font-size: var(--text-sm);
}

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

.skip-link {
  position: absolute;
  z-index: 100;
  top: var(--space-4);
  left: var(--space-4);
  max-width: calc(100% - 2rem);
  padding: var(--space-3) var(--space-4);
  transform: translateY(-200%);
  border: 2px solid var(--label);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--fg);
}

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

/* Buttons and navigation */

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.875rem;
  max-width: 100%;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.button:hover {
  border-color: var(--label);
  text-decoration: none;
}

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

.button-primary {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-fg);
  box-shadow: var(--btn-glow);
}

.button-primary:hover {
  border-color: var(--action-bg);
  box-shadow: var(--btn-glow), 0 0 0 2px var(--panel);
}

.site-header {
  /* Locked to the top while the page scrolls (owner, 2026-10-06). Opaque, above the scroll
     story's pinned diagram, and a little tighter once the page has moved. */
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  transition: box-shadow 160ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.site-header.is-scrolled .site-header-inner {
  padding-block: var(--space-3);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-5);
}

.wordmark {
  color: var(--label);
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 1.4375rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-shadow: var(--header-glow);
}

.primary-nav {
  width: 100%;
}

.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav li {
  margin: 0;
}

.primary-nav a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--fg);
  font-size: var(--text-sm);
  text-decoration: none;
}

/* Not the buttons: in dark mode --label is the button's own fill, so a current-page START FREE
   went green on green (on /auth/register). */
.primary-nav a:not(.button):hover,
.primary-nav a:not(.button)[aria-current="page"] {
  color: var(--label);
}

.primary-nav a[aria-current="page"] {
  text-decoration: underline;
}

/* Tools: a small menu on desktop; on phones its links sit in the MENU list under a label. */
.primary-nav .nav-tools {
  position: relative;
}

.primary-nav .nav-tools-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.primary-nav .nav-tools-toggle:hover,
.primary-nav .nav-tools-toggle[aria-expanded="true"],
.primary-nav .nav-tools.is-current .nav-tools-toggle {
  color: var(--label);
}

.primary-nav .nav-tools-caret {
  font-size: 0.8em;
}

.primary-nav .nav-tools-label {
  display: none;
}

.primary-nav .nav-tools-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-3));
  z-index: 20;
  min-width: 13rem;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.primary-nav .nav-tools.is-open .nav-tools-menu {
  display: block;
}

.primary-nav .nav-tools-menu a:not(.button) {
  display: flex;
  white-space: nowrap;
}

/* Phones and narrow tablets: one slim row. The links drop down from MENU. */
.header-cta-compact,
.menu-toggle {
  display: none;
}

@media (max-width: 59.99rem) {
  .site-header-inner {
    position: relative;
    flex-wrap: nowrap;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }

  .site-header .wordmark {
    margin-right: auto;
    font-size: 1.25rem;
  }

  .header-cta-compact {
    display: inline-flex;
    min-height: 2.5rem;
    padding-inline: var(--space-3);
    white-space: nowrap;
  }

  .menu-toggle {
    display: inline-flex;
    min-height: 2.5rem;
    padding-inline: var(--space-3);
    cursor: pointer;
  }

  .menu-toggle[aria-expanded="true"] {
    border-color: var(--label);
    color: var(--label);
  }

  .site-header .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
  }

  .site-header.menu-open .primary-nav {
    display: block;
  }

  .site-header .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-5) var(--space-4);
  }

  .site-header .primary-nav a:not(.button) {
    display: flex;
    min-height: 3rem;
    border-bottom: 1px solid var(--border);
  }

  .site-header .primary-nav .button {
    margin-top: var(--space-3);
    justify-content: center;
    width: 100%;
  }

  .site-header .primary-nav .nav-tools-toggle {
    display: none;
  }

  .site-header .primary-nav .nav-tools-label {
    display: block;
    padding-top: var(--space-3);
    color: var(--muted);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .site-header .primary-nav .nav-tools-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 0 var(--space-3);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  /* The bar already carries it. */
  .site-header .primary-nav #nav-cta {
    display: none;
  }
}

@media (min-width: 60rem) {
  .site-header .primary-nav {
    width: auto;
  }
}

@media (max-width: 23rem) {
  .site-header-inner {
    gap: var(--space-2);
  }

  .site-header .wordmark {
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  .header-cta-compact,
  .menu-toggle {
    padding-inline: var(--space-2);
    font-size: 0.72rem;
  }
}

/* Hero */

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse at 60% 0%, var(--hero-halo), transparent 65%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}

.hero-copy {
  max-width: 62rem;
}

.hero-copy > * + * {
  margin-top: var(--space-5);
}

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

.hero .lead {
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--text-lg);
}

.page-intro {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.page-intro > * + * {
  margin-top: var(--space-5);
}

.page-intro p {
  max-width: 65ch;
}

/* Cards and principles */

.card,
.principle-card,
.protection-card {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.card > * + *,
.principle-card > * + *,
.protection-card > * + * {
  margin-top: var(--space-4);
}

.card p,
.principle-card p,
.protection-card p {
  color: var(--muted);
}

.principle-card {
  border-top: 3px solid var(--brand);
}

.principle-number {
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 700;
}

.protection-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.protection-card .learn-more {
  margin-top: auto;
  padding-top: var(--space-4);
}

.spot-stage {
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--stage);
}

.spot-stage img {
  width: min(100%, 17rem);
  height: 10rem;
  object-fit: contain;
}

/* Security page (2026-10-06): the claim, the named protections as badges, and how a secret
   is locked, drawn instead of explained. */
.sec-intro h1 {
  max-width: 24ch;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem);
  line-height: 1.1;
}

.sec-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 54rem;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .sec-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sec-badges li,
.lock-strip li {
  margin: 0;
}

.sec-badge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  align-items: center;
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 160ms ease;
}

.sec-badge:hover,
.sec-badge:focus-visible {
  border-color: var(--label);
}

.sec-badge .sec-icon {
  grid-row: span 2;
  width: 2rem;
  height: 2rem;
}

.sec-icon {
  fill: none;
  stroke: var(--label);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec-badge strong {
  font-size: var(--text-sm);
}

.sec-badge span {
  color: var(--muted);
  font-size: var(--text-xs);
}

.lock-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lock-step;
}

.lock-frame {
  counter-increment: lock-step;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--stage);
}

:is(.lock-frame, .sec-pic) svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-main);
}

.lock-frame p {
  margin: var(--space-3) var(--space-2) var(--space-1);
  color: var(--fg);
  font-size: var(--text-sm);
}

.lock-frame p::before {
  margin-right: var(--space-2);
  color: var(--label);
  font-weight: 700;
  content: counter(lock-step) ".";
}

:is(.lock-frame, .sec-pic) .lf-panel,
:is(.lock-frame, .sec-pic) .lf-server rect,
:is(.lock-frame, .sec-pic) .lf-broker {
  fill: var(--panel);
  stroke: var(--faint);
  stroke-width: 1.5;
}

:is(.lock-frame, .sec-pic) .lf-line,
:is(.lock-frame, .sec-pic) .lf-dot {
  stroke: var(--faint);
  stroke-width: 1.5;
  fill: var(--faint);
}

:is(.lock-frame, .sec-pic) .lf-field {
  fill: var(--panel2);
  stroke: var(--muted);
  stroke-width: 1.2;
}

:is(.lock-frame, .sec-pic) .lf-locked {
  stroke: var(--label);
}

:is(.lock-frame, .sec-pic) .lf-plain {
  fill: var(--fg);
  font-size: 14px;
}

:is(.lock-frame, .sec-pic) .lf-cipher {
  fill: var(--label);
  font-size: 14px;
  letter-spacing: 0.04em;
}

:is(.lock-frame, .sec-pic) .lf-small {
  font-size: 11px;
}

:is(.lock-frame, .sec-pic) .lf-lock *,
:is(.lock-frame, .sec-pic) .lf-key *,
:is(.lock-frame, .sec-pic) .lf-nokey * {
  fill: none;
  stroke: var(--label);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(.lock-frame, .sec-pic) .lf-key {
  filter: drop-shadow(0 0 4px var(--brand));
}

:is(.lock-frame, .sec-pic) .lf-nokey * {
  stroke: var(--muted);
}

:is(.lock-frame, .sec-pic) .lf-nokey .lf-cross {
  stroke: var(--danger);
  stroke-width: 2.5;
}

:is(.lock-frame, .sec-pic) .lf-server circle {
  fill: var(--brand);
}

:is(.lock-frame, .sec-pic) .lf-broker {
  stroke: var(--label);
  stroke-width: 2;
}

/* 2026-10-07: the protections drawn in the lock strip's style. Wide: two then three. */
.sec-protect {
  display: grid;
  gap: var(--space-4);
}

.sec-protect > * {
  min-width: 0;
}

@media (min-width: 40rem) {
  .sec-protect {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sec-protect > :last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .sec-protect {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sec-protect > *,
  .sec-protect > :last-child {
    grid-column: span 2;
  }

  .sec-protect > :nth-child(-n + 2) {
    grid-column: span 3;
  }
}

.sec-pic {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--stage);
}

.sec-pic svg {
  max-height: 10.5rem;
}

:is(.lock-frame, .sec-pic) .lf-cap {
  fill: var(--muted);
  font-size: 11px;
}

:is(.lock-frame, .sec-pic) .pf-agent > *,
:is(.lock-frame, .sec-pic) .pf-try,
:is(.lock-frame, .sec-pic) .pf-env {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(.lock-frame, .sec-pic) .pf-agent .pf-eye,
.sec-pic .pf-wait {
  fill: var(--muted);
  stroke: none;
}

.sec-pic .pf-env {
  stroke-width: 1.2;
}

.sec-pic .pf-env-on {
  stroke: var(--label);
}

:is(.lock-frame, .sec-pic) .pf-block {
  fill: none;
  stroke: var(--danger);
  stroke-width: 2.5;
  stroke-linecap: round;
}

:is(.lock-frame, .sec-pic) .pf-go,
.sec-pic .pf-link,
.sec-pic .pf-glass *,
.sec-pic .pf-finger {
  fill: none;
  stroke: var(--label);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec-pic .pf-finger {
  stroke-width: 1.5;
}

.sec-pic .pf-glass circle {
  fill: var(--panel);
  stroke-width: 2.5;
}

.sec-pic .pf-glass path {
  stroke-width: 3.5;
}

.sec-pic .pf-account {
  fill: none;
  stroke: var(--label);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

:is(.lock-frame, .sec-pic) .pf-allow,
:is(.lock-frame, .sec-pic) .pf-seal {
  fill: var(--brand);
}

:is(.lock-frame, .sec-pic) .pf-allow-t {
  fill: var(--brand-on);
  font-size: 12px;
  font-weight: 700;
}

:is(.lock-frame, .sec-pic) .pf-seal-t {
  fill: none;
  stroke: var(--brand-on);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec-pic .pf-old * {
  stroke: var(--muted);
}

.sec-pic .pf-new {
  filter: drop-shadow(0 0 4px var(--brand));
}

.sec-pic .pf-new circle {
  fill: var(--brand);
  stroke: none;
}

/* The encryption section: three cards under the lock strip, one row when there's room. */
@media (min-width: 64rem) {
  .sec-protect.sec-protect-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sec-protect.sec-protect-3 > * {
    grid-column: auto;
  }
}

.lock-strip + .sec-protect {
  margin-top: var(--space-5);
}

.sec-subhead {
  margin: var(--space-6) 0 var(--space-4);
  font-size: var(--text-lg, 1.25rem);
}

.sec-pic .pf-hourglass *,
.sec-pic .pf-wave {
  fill: none;
  stroke: var(--label);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sec-pic .pf-sand {
  fill: var(--brand);
}

/* What we tell you plainly: an icon per card; one row of four when there's room. */
.honest-grid {
  display: grid;
  gap: var(--space-4);
}

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

@media (min-width: 64rem) {
  .honest-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.honest-card .sec-icon {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
}

.honest-card h3 {
  font-size: var(--text-base, 1rem);
}

/* 2026-10-13: the sections the security page was missing. The four kinds of key and the
   account list are icon cards like "What we tell you plainly"; what we can and can't see is
   three plain lists. */
.key-kinds,
.account-grid {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .key-kinds,
  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .key-kinds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

:is(.key-kind, .account-card, .what-if-card) .sec-icon {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
}

:is(.key-kind, .account-card) :is(h3, h4) {
  font-size: var(--text-base, 1rem);
}

.key-guards,
.know-keep {
  max-width: 70ch;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.know-grid {
  display: grid;
  gap: var(--space-4);
}

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

.know-card h3 {
  font-size: var(--text-base, 1rem);
}

.key-kinds > li + li,
.account-grid > li + li {
  margin-top: 0;
}

.know-card ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.know-card li + li {
  margin-top: var(--space-2);
}

.know-card code {
  overflow-wrap: anywhere;
}

/* For agents (2026-10-13): agent vault vs .env files vs secret managers. The table scrolls
   inside its own box on a narrow screen rather than widening the page. */
.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.compare {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.compare :is(th, td) {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.compare tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.compare thead th {
  color: var(--label);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.compare tbody th {
  width: 22%;
  color: var(--fg);
}

.compare td {
  color: var(--muted);
}

.compare :is(th, td):last-child {
  background: var(--stage);
  color: var(--fg);
}

#compare .callout {
  margin-top: var(--space-5);
}

/* Home page listings strip (2026-10-13, back from the pre-1.0 page): where the MCP server and
   the OpenClaw skill are published. Wraps on a narrow screen; no motion. */
.listed {
  padding-block: var(--space-5);
  border-block: 1px solid var(--border);
}

.listed-label {
  margin: 0 0 var(--space-4);
  color: var(--label);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.listed-label a {
  color: inherit;
  text-decoration: none;
}

.listed-label a:hover,
.listed-label a:focus-visible {
  text-decoration: underline;
}

.listed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.listed-chips > li + li {
  margin-top: 0;
}

.listed-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.listed-chip:hover,
.listed-chip:focus-visible {
  border-color: var(--brand);
}

.listed-mark {
  display: block;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
}

.listed-dot {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brand);
}

/* Home page: agent payments, a short band linking /agent-wallets (2026-10-13). */
.pay-band {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 52rem) {
  .pay-band {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.pay-points {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pay-points > li {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
}

.pay-points strong {
  color: var(--fg);
}

/* Scroll story: readable baseline, enhancement added by external JS. */

.story-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.story-visual {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.story-visual figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}

.broker-diagram {
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-main);
}

.broker-diagram text {
  fill: var(--fg);
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
}

.broker-diagram .diagram-start {
  text-anchor: start;
}

.broker-diagram .diagram-end {
  text-anchor: end;
}

.broker-diagram .diagram-small {
  font-size: 14px;
  font-weight: 400;
}

.broker-diagram .machine-boundary {
  fill: var(--stage);
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.broker-diagram .diagram-node {
  fill: var(--panel2);
  stroke: var(--muted);
  stroke-width: 2;
}

.broker-diagram .broker-node {
  stroke: var(--label);
  stroke-width: 2.5;
}

.broker-diagram .diagram-key {
  fill: none;
  stroke: var(--label);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.broker-diagram .diagram-lock {
  fill: var(--stage);
  stroke: var(--label);
  stroke-width: 2;
}

.broker-diagram .diagram-flow {
  fill: none;
  stroke: var(--label);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.broker-diagram .diagram-request {
  stroke-dasharray: 4 5;
}

.broker-diagram .diagram-arrow {
  fill: var(--label);
}

.broker-diagram .diagram-badge {
  fill: var(--panel);
  stroke: var(--label);
  stroke-width: 2;
}

.broker-diagram .diagram-badge-text {
  fill: var(--label);
  font-size: 15px;
}

/* 2026-10-06 refresh (option A): icons, the broker's own account inside your computer, the
   log inside that, and a dot that travels the active step's path. */
.broker-diagram .own-account {
  fill: color-mix(in srgb, var(--stage) 70%, var(--brand) 8%);
  stroke: var(--label);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.broker-diagram .diagram-place {
  fill: var(--muted);
}

.broker-diagram .diagram-node {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.1));
}

.broker-diagram .diagram-icon * {
  fill: none;
  stroke: var(--fg);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.broker-diagram .diagram-dot {
  display: none;
  fill: var(--brand);
}

.story-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: broker-step;
}

.story-step {
  position: relative;
  counter-increment: broker-step;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.story-step + .story-step {
  margin-top: var(--space-4);
}

.story-step::before {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 700;
  content: "0" counter(broker-step);
}

.story-step h3 {
  font-size: var(--text-xl);
}

.story-step p {
  margin-top: var(--space-3);
  color: var(--muted);
}

.story-note {
  margin-top: var(--space-5);
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--brand);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* The scroll story at EVERY width. On a phone the diagram sticks to the top of the screen
   while the steps scroll beneath it; on a wide screen it sits beside them. Either way the
   step in view lights its part of the diagram. Without JS, or with reduced motion, nothing
   here applies and every step is simply shown in order. */
@media (min-height: 30rem) and (prefers-reduced-motion: no-preference) {
  [data-scroll-story].is-enhanced .story-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.5;
    transition:
      opacity 240ms ease,
      border-color 240ms ease,
      background-color 240ms ease;
  }

  [data-scroll-story].is-enhanced .story-step.is-active {
    opacity: 1;
    border-inline-start-color: var(--brand);
    background: var(--panel2);
  }

  [data-scroll-story].is-enhanced .story-step.is-active h3 {
    color: var(--label);
    text-shadow: var(--header-glow);
    text-decoration-line: var(--mark-line);
    text-decoration-color: var(--brand);
    text-decoration-thickness: 0.32em;
    text-underline-offset: -0.14em;
    text-decoration-skip-ink: none;
  }

  [data-scroll-story].is-enhanced [data-diagram-state] .diagram-flow {
    stroke: var(--faint);
    transition: stroke 240ms ease;
  }

  [data-scroll-story].is-enhanced [data-diagram-state] .diagram-arrow {
    fill: var(--faint);
    transition: fill 240ms ease;
  }

  [data-scroll-story].is-enhanced [data-diagram-state] .diagram-badge {
    stroke: var(--muted);
  }

  [data-scroll-story].is-enhanced [data-diagram-state].is-active .diagram-flow {
    stroke: var(--label);
    stroke-width: 3.5;
  }

  [data-scroll-story].is-enhanced [data-diagram-state].is-active .diagram-arrow {
    fill: var(--label);
  }

  [data-scroll-story].is-enhanced [data-diagram-state].is-active .diagram-badge {
    stroke: var(--label);
    stroke-width: 3;
  }

  [data-scroll-story].is-enhanced [data-diagram-state].is-active .diagram-flow {
    filter: drop-shadow(0 0 4px var(--brand));
  }

  [data-scroll-story].is-enhanced [data-diagram-state].is-active .diagram-dot {
    display: inline;
    filter: drop-shadow(0 0 5px var(--brand));
  }

  /* The parts the active step involves stay bright; the rest step back. */
  [data-scroll-story].is-enhanced[data-active-step] .diagram-part {
    opacity: 0.4;
    transition: opacity 240ms ease;
  }

  [data-scroll-story][data-active-step="1"] .diagram-part[data-on~="1"],
  [data-scroll-story][data-active-step="2"] .diagram-part[data-on~="2"],
  [data-scroll-story][data-active-step="3"] .diagram-part[data-on~="3"],
  [data-scroll-story][data-active-step="4"] .diagram-part[data-on~="4"] {
    opacity: 1;
  }
}

/* The heading and the diagram hold as one block (SPEC-1.0-finetune H1-H2). scroll-story.js sets
   --story-diagram-max so the whole diagram fits under the heading on this screen. */
[data-scroll-story].is-enhanced .broker-diagram {
  display: block;
  max-height: var(--story-diagram-max, none);
  margin-inline: auto;
}

/* Not enough room to hold the heading and the whole diagram: the plain flow (review round 1, F1). */
[data-scroll-story].is-unpinned .story-pin {
  position: static !important;
}

/* Phone and narrow tablet: the heading and a compact diagram pin to the top, opaque so the steps
   pass underneath, and each step gets most of what is left so it has time to be read. */
@media (max-width: 55.99rem) and (min-height: 30rem) and (prefers-reduced-motion: no-preference) {
  [data-scroll-story].is-enhanced .story-pin {
    position: sticky;
    top: var(--header-h, 0px);
    z-index: 2;
    margin-inline: calc(-1 * var(--space-2));
    padding: var(--space-3) var(--space-2) var(--space-2);
    background: var(--bg);
    box-shadow: 0 14px 22px -10px rgba(0, 0, 0, 0.35);
  }

  [data-scroll-story].is-enhanced .story-pin .section-head {
    margin-bottom: var(--space-2);
  }

  [data-scroll-story].is-enhanced .story-pin .section-head h2 {
    font-size: var(--text-xl, 1.35rem);
  }

  [data-scroll-story].is-enhanced .story-pin .section-head > * + * {
    margin-top: var(--space-1);
  }

  [data-scroll-story].is-enhanced .story-pin .section-head .muted {
    font-size: var(--text-sm);
  }

  [data-scroll-story].is-enhanced .story-visual {
    padding: var(--space-2) var(--space-3);
  }

  [data-scroll-story].is-enhanced .story-visual figcaption {
    display: none;
  }

  [data-scroll-story].is-enhanced .story-step {
    min-height: 48vh;
  }
}

/* Wide screens: diagram beside the steps. */
@media (min-width: 56rem) and (min-height: 42rem) and (prefers-reduced-motion: no-preference) {
  [data-scroll-story].is-enhanced .story-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: var(--space-7);
  }

  [data-scroll-story].is-enhanced .story-pin {
    position: sticky;
    top: calc(var(--header-h, 0px) + var(--space-4));
  }

  [data-scroll-story].is-enhanced .story-pin .section-head {
    margin-bottom: var(--space-4);
  }

  [data-scroll-story].is-enhanced .story-step {
    min-height: max(13rem, 38vh);
  }
  /* Room after the last step, so step 4 reaches the middle of the screen while the diagram is
     still held in place. Without it, on a laptop-height screen the section ended before step 4
     lit up and the diagram scrolled away first (owner, 2026-10-13). */
  [data-scroll-story].is-enhanced .story-steps {
    padding-bottom: 42vh;
  }
}

/* Illustrations: only this region scrolls horizontally. */

.strip-hint {
  color: var(--muted);
  font-size: var(--text-sm);
}

.illustration-strip {
  display: flex;
  gap: var(--space-5);
  max-width: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-1) var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--space-1);
  scrollbar-color: var(--muted) var(--panel2);
  list-style: none;
}

.illustration-strip > li {
  flex: 0 0 min(82%, 20rem);
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

.illustration-card {
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.illustration-stage {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--stage);
}

.illustration-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.illustration-card figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg);
}

/* Wide screens: the section holds still and the pictures slide across as you scroll down
   (owner, 2026-10-13). scroll-story.js sets the section's height to the sliding distance and
   moves the strip; without it (no JS, narrow, short or reduced-motion screens) nothing here
   applies and the strip stays the swipe strip above. */
@media (min-width: 56rem) and (min-height: 36rem) and (prefers-reduced-motion: no-preference) {
  /* Full width while pinned (the section is a .container otherwise), without 100vw, which
     counts the scrollbar and would push the page sideways on Windows. */
  [data-pin-strip].is-pinned {
    width: 100%;
    padding-block: 0;
  }
  [data-pin-strip].is-pinned .strip-pin {
    position: sticky;
    top: var(--header-h, 0px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - var(--header-h, 0px));
    overflow: hidden;
  }
  [data-pin-strip].is-pinned .section-head {
    width: min(var(--container), calc(100% - 2rem));
    margin-inline: auto;
    margin-bottom: var(--space-5);
  }
  [data-pin-strip].is-pinned .strip-hint {
    display: none;
  }
  [data-pin-strip].is-pinned .illustration-strip {
    gap: var(--space-6);
    max-width: none;
    padding: 0 max(1rem, calc((100% - var(--container)) / 2));
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
  }
  [data-pin-strip].is-pinned .illustration-strip > li {
    flex: 0 0 auto;
    /* As large as the screen allows: the picture's height is what is left after the heading
       and caption, at the pictures' own 12:7 shape, never wider than most of the screen. */
    /* Not tied to --header-h: the header shrinks on scroll, and a width that changed with it
       would no longer match the distance the strip was measured to travel. */
    width: min(80vw, calc((100vh - 23rem) * 12 / 7 + 2 * var(--space-4)));
  }
  [data-pin-strip].is-pinned .illustration-stage {
    aspect-ratio: 12 / 7;
    padding: var(--space-2);
  }
  [data-pin-strip].is-pinned .illustration-card figcaption {
    font-size: var(--text-md, 1.0625rem);
  }
}

/* Printing never shows the sliding version (round 2, B1). */
@media print {
  [data-pin-strip] { height: auto !important; }
  [data-pin-strip] .illustration-strip { transform: none !important; }
}

/* Promises, trust strip, closing CTA */

.promise-grid {
  display: grid;
  gap: var(--space-5);
}

.promise {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--brand);
}

.promise h3 {
  font-size: var(--text-lg);
}

.promise p {
  margin-top: var(--space-3);
  color: var(--muted);
}

.trust-strip {
  padding-block: var(--space-5);
  border-block: 1px solid var(--border);
  background: var(--panel);
}

.trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-strip li {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.trust-strip a {
  font-weight: 700;
}

.final-cta {
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at top right, var(--hero-halo), transparent 70%),
    var(--panel);
}

.final-cta > * + * {
  margin-top: var(--space-5);
}

.final-cta p {
  max-width: 62ch;
  color: var(--muted);
}

/* Long documents */

.doc-layout {
  display: grid;
  gap: var(--space-7);
  align-items: start;
  padding-bottom: var(--space-8);
}

.toc {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  font-family: var(--font-main);
  font-size: var(--text-sm);
}

.toc h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

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

.toc a {
  display: block;
  padding-block: var(--space-2);
  color: var(--muted);
}

.toc a:hover,
.toc a:focus-visible {
  color: var(--label);
}

.document {
  min-width: 0;
  max-width: var(--reading-width);
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  line-height: 1.8;
}

.document > section {
  scroll-margin-top: var(--space-6);
}

.document > section + section {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
}

.document section > h2 {
  margin-bottom: var(--space-5);
}

.document h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}

.document p,
.document li {
  color: var(--fg);
}

.document .eyebrow,
.document .fine-print,
.document .callout-title {
  font-family: var(--font-main);
}

.document .fine-print {
  color: var(--muted);
}

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

.feature-list li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.feature-list li:first-child {
  padding-top: 0;
}

.feature-list a {
  display: inline-block;
  margin-inline-start: var(--space-2);
  font-family: var(--font-main);
  font-size: var(--text-sm);
}

.document .principle-card h3 {
  margin-top: 0;
}

.document .principle-card p {
  color: var(--muted);
}

.story-box {
  margin-block: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--stage);
}

.story-box h3 {
  margin-top: 0;
  font-size: var(--text-lg);
}

.story-box .eyebrow {
  margin-bottom: var(--space-3);
}

.technical-detail {
  margin-block: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.technical-detail summary {
  padding: var(--space-4) var(--space-5);
  color: var(--fg);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.technical-detail summary::marker {
  color: var(--label);
}

.technical-detail[open] summary {
  border-bottom: 1px solid var(--border);
}

.technical-content {
  padding: var(--space-5);
}

.technical-content > * + * {
  margin-top: var(--space-4);
}

.technical-content ul,
.technical-content ol {
  margin-bottom: 0;
}

.callout {
  margin-block: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--info);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel2);
}

.callout-warning {
  border-inline-start-color: var(--warn);
}

.callout-danger {
  border-inline-start-color: var(--danger);
}

.callout-title {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--fg);
  font-weight: 700;
}

.callout p {
  color: var(--fg);
}

.choice-list {
  margin: 0;
}

.choice-list dt {
  margin-top: var(--space-5);
  font-family: var(--font-main);
  font-size: var(--text-base);
  font-weight: 700;
}

.choice-list dd {
  margin: var(--space-2) 0 0;
}

.limit-list {
  padding-inline-start: 1.25em;
}

.limit-list li + li {
  margin-top: var(--space-5);
}

/* Footer */

.site-footer {
  padding-block: var(--space-7);
  border-top: 1px solid var(--border);
  background: var(--panel);
}

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

.footer-grid h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

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

.footer-grid a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.footer-grid a:hover {
  color: var(--label);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.theme-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
}

.theme-control select {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--panel2);
  color: var(--fg);
}

@media (min-width: 42rem) {
  .container {
    width: min(var(--container), calc(100% - 3rem));
  }

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

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

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

  .story-visual {
    max-width: 36rem;
  }
}

@media (min-width: 64rem) {
  .primary-nav {
    width: auto;
  }

  .doc-layout {
    grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  }

  .toc {
    position: sticky;
    top: calc(var(--header-h, 0px) + var(--space-6));
    max-height: calc(100vh - 4rem - var(--header-h, 0px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}

@media (max-width: 23rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .button {
    padding-inline: var(--space-3);
  }

  .story-step,
  .card,
  .principle-card,
  .protection-card {
    padding: var(--space-4);
  }

  .story-visual {
    padding: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .illustration-strip {
    scroll-snap-type: none;
  }

  [data-scroll-story] .story-visual,
  [data-scroll-story] .story-pin {
    position: static;
  }

  [data-scroll-story] .story-step {
    min-height: 0;
  }
}

@media (forced-colors: active) {
  .button,
  .card,
  .story-step,
  .story-visual,
  .technical-detail,
  .toc {
    border: 1px solid CanvasText;
  }

  .glow-heading,
  .wordmark {
    text-shadow: none;
  }

  .button-primary {
    box-shadow: none;
  }

  .broker-diagram .diagram-node,
  .broker-diagram .machine-boundary {
    fill: Canvas;
    stroke: CanvasText;
  }

  .broker-diagram text {
    fill: CanvasText;
  }

  .broker-diagram .diagram-flow,
  .broker-diagram .diagram-key {
    stroke: CanvasText;
  }
}

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .toc,
  .final-cta {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .container {
    width: 100%;
  }

  .doc-layout,
  .story-layout {
    display: block;
  }

  .document {
    max-width: none;
  }

  .story-visual {
    position: static !important;
    max-width: 28rem;
    box-shadow: none;
  }

  .story-step {
    min-height: 0 !important;
    break-inside: avoid;
  }

  .glow-heading,
  .wordmark {
    text-shadow: none;
  }

  a,
  .document p,
  .document li,
  .muted {
    color: #000;
  }

  .illustration-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
}
/* ── Additions for the 1.0 pages ─────────────────────────────────────────── */

/* Numbered steps outside the scroll story (how it works, get started): always all visible. */
.story-steps-static {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.story-steps-static .story-step { min-height: 0; }
.story-step pre { margin: var(--space-3) 0; }

/* "Works with" — plain text chips, no logos. */
.chips {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* A card that is a link. */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
a.card:hover,
a.card:focus-visible {
  border-color: var(--label);
  box-shadow: var(--btn-glow);
}

.learn-more {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* The limitations document is long: give each limit room. */
.limit-document li + li { margin-top: var(--space-3); }
.limit-document ul { list-style-type: square; }
.limit-document li::marker { color: var(--brand); }
/* Each section opens with a short green bar, so the long page reads in chapters. */
.limit-document h2 { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.limit-document h2::before {
  content: "";
  display: block;
  width: 3rem;
  height: 0.3rem;
  margin-bottom: var(--space-4);
  background: var(--brand);
}
.limit-document h3 { font-size: var(--text-lg); }
.limit-document hr { margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--border); }

/* Four principles read as two pairs, never three-plus-one. */
@media (min-width: 42rem) {
  .principle-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Copy on every command block (copy-code.js; SPEC-1.0-finetune C1). The button sits in the
   block's top corner; the block keeps room for it so no command runs underneath. */
.wv-codebox { position: relative; margin: 1em 0; }
.story-step .wv-codebox { margin: var(--space-3) 0; }
.wv-codebox > pre { margin: 0; padding-right: 5.75rem; }
.wv-copy { position: absolute; top: 8px; right: 8px; min-height: 30px; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--fg);
  font-family: var(--font-main); font-size: 12px; letter-spacing: .04em; cursor: pointer; }
.wv-copy:hover, .wv-copy:focus-visible { border-color: var(--brand); }
.wv-copy.is-inline { position: static; min-height: 26px; margin-left: 6px; padding: 2px 10px; vertical-align: baseline; }

/* Coming soon (How it works, For agents; SPEC-1.0-finetune W2): the unbuilt list, marked as such. */
.soon-grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.soon-grid > li + li { margin-top: 0; }
.soon-card { border-style: dashed; }
.soon-card h3 { margin: var(--space-2) 0 0; font-size: var(--text-lg, 1.125rem); }
.soon-pill { display: inline-block; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: var(--text-sm); letter-spacing: .04em; }

/* Get started as a story (SPEC-1.0-finetune Q1): chapters, text beside a picture on a wide screen,
   the sides alternating; stacked on a phone, picture first. */
.chapter-list { margin: 0 0 var(--space-7, 3rem); padding: 0; list-style: none; display: grid; gap: var(--space-7, 3rem); }
.chapter-list > li + li { margin-top: 0; }
.chapter { display: grid; gap: var(--space-5); align-items: center; }
.chapter > * { min-width: 0; }
.chapter-text > * + * { margin-top: var(--space-3); }
.chapter-text h2 { margin-top: var(--space-1); }
.chapter-text p:not(.eyebrow) { max-width: 60ch; }
.chapter-next { padding-top: var(--space-2); }
.chapter-pic { margin: 0; display: grid; place-items: center; padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--stage); }
.chapter-pic img { width: min(100%, 26rem); height: auto; max-height: 15rem; object-fit: contain; }
@media (max-width: 55.99rem) {
  .chapter-pic { order: -1; }
  .chapter-pic img { max-height: 11rem; }
}
@media (min-width: 56rem) {
  .chapter { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-7, 3rem); }
  .chapter:nth-child(even) .chapter-pic { order: -1; }
  .chapter:nth-child(even) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* The 1.0 announcement (SPEC-1.0-finetune R2): the chapter layout, a numbered list for moving across. */
.release-hero .lead { max-width: 60ch; }
.release-steps { margin: 0; padding-left: 1.25rem; }
.release-steps li { color: var(--muted); }
.release-about { margin-top: var(--space-5); max-width: 70ch; }
.quickstart-upgrade { margin-top: var(--space-5); }