/* styles/1-tokens.css */
/*
 * T4Agent site — design tokens. The visual language is "spatial": the page is a floor, content sits on planes raised
 * above it, and light falls from the top left, so every raised plane has a bright top edge and casts its shadow down
 * and to the right. Two colours carry meaning and nothing else: indigo (the accent: actions, T4Agent, approvals) and
 * amber (the secrets boundary — what never leaves your device). Everything else is a cool neutral.
 *
 * Elevation has three levels, used consistently:
 *   0  floor     — the page and its tinted bands (--floor, --band)
 *   1  raised    — cards, planes, tables, chips, secondary buttons (--surface + --shadow-1)
 *   2  floating  — the header, the call to action, the featured plan, the focal plane of a drawing (--shadow-2/3)
 */

:root {
  color-scheme: light dark;

  /* Neutrals (light). Levels separate by light: the floor is a cool grey, planes are white, bands sit a step lower. */
  --floor: #f4f5f8;
  --floor-light: #fbfbfd;
  --band: #ebedf2;
  --surface: #ffffff;
  --surface-float: #ffffff;
  --surface-sunk: #f1f2f6;
  --line: rgb(17 24 39 / 0.1);
  --line-strong: rgb(17 24 39 / 0.2);
  --wire: #8a93a6;
  --dot: rgb(17 24 39 / 0.09);
  --text: #0b1020;
  --text-2: #444c5e;
  --text-3: #596275;
  --ink: #0b1020;
  --on-ink: #ffffff;

  /* Accent (indigo) and boundary (amber). */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-text: #4338ca;
  --accent-soft: rgb(79 70 229 / 0.07);
  --accent-line: rgb(79 70 229 / 0.5);
  --on-accent: #ffffff;
  --amber: #fbbf24;
  --amber-line: #d97706;
  --amber-text: #8a4b06;
  --amber-soft: rgb(251 191 36 / 0.1);

  /* Elevation: a hairline ring, a contact shadow and an ambient shadow offset down-right; a bright top edge. */
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow-1:
    0 0 0 1px var(--line), 0 1px 1px rgb(17 24 39 / 0.04), 1px 2px 4px -1px rgb(17 24 39 / 0.06),
    3px 8px 18px -8px rgb(17 24 39 / 0.12);
  --shadow-2:
    0 0 0 1px var(--line), 0 1px 2px rgb(17 24 39 / 0.05), 2px 6px 12px -4px rgb(17 24 39 / 0.08),
    10px 24px 48px -18px rgb(17 24 39 / 0.22);
  --shadow-3:
    0 0 0 1px var(--line), 0 2px 3px rgb(17 24 39 / 0.06), 4px 12px 24px -8px rgb(17 24 39 / 0.12),
    18px 40px 72px -24px rgb(17 24 39 / 0.3);
  --shadow-press: 0 0 0 1px var(--line-strong), inset 0 1px 2px rgb(17 24 39 / 0.12);

  /* Shape: one radius per size class. */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Space: a 4 px grid. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(3.5rem, 2.25rem + 4.2vw, 6.5rem);
  --pad-card: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);

  /* Type. System fonts only (no downloads); Segoe UI Variable on Windows, SF on Apple, Roboto/Noto elsewhere. */
  --font-sans:
    system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial,
    sans-serif;
  --font-display:
    system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial,
    sans-serif;
  --font-mono:
    ui-monospace, 'Cascadia Mono', 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', 'DejaVu Sans Mono',
    monospace;

  /* Scale: display (home h1), h1 (page titles), h2, h3, lead, body, small, label (monospace micro-labels). */
  --text-display: clamp(2.375rem, 1.6rem + 2.4vw, 3.5rem);
  --text-h1: clamp(2.125rem, 1.65rem + 1.6vw, 3rem);
  --text-h2: clamp(1.625rem, 1.35rem + 0.95vw, 2.25rem);
  --text-h3: 1.0625rem;
  --text-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;
  --leading-display: 1.04;
  --leading-heading: 1.12;
  --leading-body: 1.6;
  --tracking-display: -0.034em;
  --tracking-heading: -0.024em;
  --tracking-label: 0.07em;

  --container: 75rem;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --header-height: 4rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark: the floor goes near-black, planes are lit greys; shadows deepen, the top edge is a faint highlight. */
@media (prefers-color-scheme: dark) {
  :root {
    --floor: #090b10;
    --floor-light: #10131a;
    --band: #0d1016;
    --surface: #141821;
    --surface-float: #191e29;
    --surface-sunk: #0f1219;
    --line: rgb(255 255 255 / 0.085);
    --line-strong: rgb(255 255 255 / 0.17);
    --wire: #6b7488;
    --dot: rgb(255 255 255 / 0.07);
    --text: #eef0f6;
    --text-2: #aab2c3;
    --text-3: #949db0;
    --ink: #eef0f6;
    --on-ink: #0b0e14;

    --accent: #5048e5;
    --accent-hover: #5f58ee;
    --accent-text: #aab4fd;
    --accent-soft: rgb(129 140 248 / 0.1);
    --accent-line: rgb(129 140 248 / 0.55);
    --amber-line: #d9930f;
    --amber-text: #fbbf24;
    --amber-soft: rgb(251 191 36 / 0.07);

    --edge: inset 0 1px 0 rgb(255 255 255 / 0.06);
    --shadow-1:
      0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / 0.4), 3px 8px 18px -8px rgb(0 0 0 / 0.6);
    --shadow-2:
      0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / 0.45), 2px 6px 12px -4px rgb(0 0 0 / 0.45),
      10px 24px 48px -18px rgb(0 0 0 / 0.75);
    --shadow-3:
      0 0 0 1px var(--line-strong), 0 2px 3px rgb(0 0 0 / 0.5), 4px 12px 24px -8px rgb(0 0 0 / 0.55),
      18px 40px 72px -24px rgb(0 0 0 / 0.85);
    --shadow-press: 0 0 0 1px var(--line-strong), inset 0 1px 3px rgb(0 0 0 / 0.5);
  }
}

/* styles/2-base.css */
/* Reset, document, typography and accessibility primitives. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  /* The floor: brighter near the light, which falls from the top left. */
  background:
    radial-gradient(90rem 40rem at 12% -12rem, var(--floor-light), transparent 70%) no-repeat,
    var(--floor);
  font: 400 var(--text-body) / var(--leading-body) var(--font-sans);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
pre {
  margin: 0;
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}

p,
li,
dd,
td,
th {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

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

::selection {
  background: rgb(79 70 229 / 0.22);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Text helpers. */

.prose {
  max-width: 68ch;
  color: var(--text-2);
}

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

.fineprint {
  max-width: 72ch;
  margin-top: var(--space-6);
  color: var(--text-3);
  font-size: var(--text-small);
  line-height: 1.55;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-3);
  font: 500 var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* A small square of the accent: the one recurring mark of the system. */
.eyebrow::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 1px 1px 0 rgb(79 70 229 / 0.25);
}

.bullets {
  display: grid;
  gap: var(--space-2);
  color: var(--text-2);
}

.bullets li {
  position: relative;
  padding-left: var(--space-6);
}

.bullets li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0.25rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1.5px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--wire);
}

.hash,
.code {
  font-size: 0.8125rem;
  word-break: break-all;
}

.code {
  overflow-x: auto;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: pre-wrap;
}

/* styles/3-layout.css */
/* Page frame: header and menu, hero, sections and bands, call to action, footer. */

/* ------------------------------------------------------------------ Brand */

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  color: var(--text);
  font: 650 1.125rem / 1 var(--font-display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand__mark {
  flex: none;
  filter: drop-shadow(1px 2px 2px rgb(49 46 129 / 0.25));
}

/* The tile's gradient is in the markup (BrandMark: an id per instance); the mark has no amber, which stays reserved
   for the secrets boundary. */
.brand__glyph {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

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

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: color-mix(in srgb, var(--surface-float) 82%, transparent);
  box-shadow: 0 1px 0 var(--line), 0 12px 24px -20px rgb(17 24 39 / 0.35);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
}

.site-header .brand {
  margin-right: auto;
}

.site-header__cta {
  order: 2;
}

/* The menu: a <details> disclosure below the desktop breakpoint. */

.menu {
  order: 3;
}

.menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
  font: 500 var(--text-small) / 1 var(--font-sans);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

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

.menu__icon {
  position: relative;
  width: 1rem;
  height: 0.625rem;
  border-block: 1.5px solid currentColor;
  transition: border-color 0.15s var(--ease);
}

.menu__icon::before,
.menu__icon::after {
  content: '';
  position: absolute;
  top: calc(50% - 0.75px);
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  opacity: 0;
}

.menu[open] .menu__icon {
  border-color: transparent;
}

.menu[open] .menu__icon::before,
.menu[open] .menu__icon::after {
  opacity: 1;
  transform: rotate(45deg);
}

.menu[open] .menu__icon::after {
  transform: rotate(-45deg);
}

.menu[open] .menu__toggle {
  box-shadow: var(--shadow-press);
}

.menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: var(--gutter);
  left: var(--gutter);
  display: grid;
  gap: var(--space-4);
  max-height: calc(100vh - var(--header-height) - var(--space-8));
  overflow-y: auto;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-float);
  box-shadow: var(--edge), var(--shadow-3);
}

@media (min-width: 30rem) {
  .menu__panel {
    left: auto;
    width: 22rem;
  }
}

.site-nav__list {
  display: grid;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover {
  background: var(--surface-sunk);
}

.site-nav a[aria-current='page'] {
  color: var(--accent-text);
  background: var(--accent-soft);
}

/* Language switch: a sunk track with the current language raised out of it. */

.lang-switch__list {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 2px rgb(17 24 39 / 0.06);
}

.lang-switch li {
  flex: 1;
}

.lang-switch a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border-radius: 6px;
  color: var(--text-2);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--text);
}

.lang-switch a[aria-current='true'] {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
}

.lang-switch__code {
  display: none;
  font: 500 var(--text-label) / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* On the narrowest phones the menu button keeps only its icon; the label stays as its accessible name. */
@media (max-width: 25.99rem) {
  .menu__toggle {
    width: 2.5rem;
    justify-content: center;
    padding: 0;
  }

  .menu__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The header shows one navigation at a time: the <details> menu below 75rem, the inline copy from 75rem. The other
   is display: none, so it is neither seen nor exposed to assistive technology. */
.site-header__nav {
  display: none;
}

@media (min-width: 75rem) {
  .menu {
    display: none;
  }

  .site-header__nav {
    display: flex;
    flex: 1;
    order: 1;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
  }

  .site-header__nav .site-nav__list {
    display: flex;
    gap: 2px;
  }

  .site-header__nav .site-nav a {
    min-height: 2.25rem;
    padding: 0 0.5rem;
    white-space: nowrap;
    color: var(--text-2);
    font-size: 0.9375rem;
  }

  .site-header__nav .site-nav a:hover {
    color: var(--text);
  }

  .site-header__nav .site-nav a[aria-current='page'] {
    color: var(--text);
    background: none;
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: 0;
  }

  .site-header__nav .lang-switch a {
    min-height: 1.75rem;
    padding: 0 0.5rem;
  }

  .site-header__nav .lang-switch__code {
    display: inline;
  }

  .site-header__nav .lang-switch__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

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

.hero {
  padding-block: clamp(2.5rem, 1.5rem + 3.6vw, 5rem) clamp(2rem, 1.5rem + 1.6vw, 3rem);
}

/* The first section on the plain floor follows the hero closely; a band keeps its full padding. */
.hero + .section:not(.section--alt),
.hero + .container + .section:not(.section--alt),
.page-art + .section:not(.section--alt) {
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.hero__text {
  max-width: 46rem;
}

.hero__eyebrow {
  margin-bottom: var(--space-5);
}

.hero__title {
  font-size: var(--text-h1);
  font-weight: 680;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.hero__title + .badge {
  margin-top: var(--space-4);
}

.hero__lead {
  max-width: 40rem;
  margin-top: var(--space-5);
  color: var(--text-2);
  font-size: var(--text-lead);
  line-height: 1.55;
}

.hero .actions {
  margin-top: var(--space-8);
}

.hero__note {
  max-width: 36rem;
  margin-top: var(--space-5);
  color: var(--text-3);
  font: 400 0.8125rem / 1.55 var(--font-mono);
}

/* The home hero: display type next to the system stack. */

.hero--visual .hero__title {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

/* Russian and Polish headlines run 15–20 % longer: one step smaller, so they keep to three or four lines. */
.hero--visual .hero__title:lang(ru),
.hero--visual .hero__title:lang(pl) {
  font-size: clamp(2.125rem, 1.45rem + 2.05vw, 3.125rem);
}

.hero--visual .hero__inner {
  display: grid;
  gap: var(--space-12);
}

.hero--visual .hero__visual {
  min-width: 0;
  max-width: 46rem;
}

@media (min-width: 75rem) {
  .hero--visual {
    padding-block: clamp(3rem, 1rem + 3vw, 4.5rem) clamp(3rem, 1rem + 3vw, 4.5rem);
  }

  .hero--visual .hero__visual {
    max-width: none;
  }

  .hero--visual .hero__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 0.5rem + 3vw, 4.5rem);
  }
}

/* ------------------------------------------------------------------ Sections */

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

/* A band: the floor one step lower, tinted, between hairlines. Consecutive sections on the plain floor are divided
   by a hairline of the container's width. */
.section--alt {
  background: var(--band);
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}

.section:not(.section--alt) + .section:not(.section--alt) > .container::before {
  content: '';
  display: block;
  height: 1px;
  margin-top: calc(-1 * var(--space-section));
  margin-bottom: var(--space-section);
  background: var(--line);
}

.page-art + .section:not(.section--alt) > .container::before,
.hero + .section:not(.section--alt) > .container::before {
  content: none;
}

.section__header {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.section__header .eyebrow {
  margin-bottom: var(--space-4);
}

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

.section__title {
  font-size: var(--text-h2);
  font-weight: 660;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.section__lead {
  margin-top: var(--space-4);
  color: var(--text-2);
  font-size: var(--text-lead);
  line-height: 1.55;
}

.section__header:last-child {
  margin-bottom: 0;
}

.section > .container > * + p,
.section > .container > * + .prose,
.section > .container > * + .notice {
  margin-top: var(--space-8);
}

.section > .container > * + .fineprint {
  margin-top: var(--space-6);
}

.section > .container > * + .actions {
  margin-top: var(--space-6);
}

.section--split {
  padding-block: clamp(3rem, 2.25rem + 2.6vw, 4.75rem);
}

/* Split: a short text-only section reads as an editorial pair on wide screens — the title on the left, the text on
   the right — so it does not leave an empty half-page. */
@media (min-width: 64rem) {
  .section--split > .container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-12);
    align-items: start;
  }

  .section--split > .container > .section__header {
    margin: 0;
  }

  .section--split > .container > * + * {
    grid-column: 2;
    margin-top: 0;
  }

  .section--split > .container > .section__header + * {
    padding-top: 0.375rem;
  }

  .section--split .prose {
    font-size: 1.0625rem;
  }
}

/* A page-wide drawing between the hero and the first section. */
.page-art {
  padding-bottom: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

/* ------------------------------------------------------------------ Call to action */

.cta {
  padding-block: var(--space-section);
}

/* After a section on the plain floor, that section's bottom padding already separates them. */
.section:not(.section--alt) + .cta {
  padding-top: 0;
}

.cta__panel {
  display: grid;
  gap: var(--space-6);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(40rem 16rem at 0 0, var(--accent-soft), transparent 70%) no-repeat,
    var(--surface-float);
  box-shadow: var(--edge), var(--shadow-2);
}

.cta__title {
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
  font-weight: 660;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.cta__text {
  max-width: 40rem;
  margin-top: var(--space-3);
  color: var(--text-2);
}

@media (min-width: 48rem) {
  .cta__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-10);
  }
}

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

.site-footer {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--space-8);
  background: var(--band);
  box-shadow: inset 0 1px 0 var(--line);
  font-size: var(--text-small);
}

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

.site-footer__brand {
  grid-column: 1 / -1;
  max-width: 24rem;
}

.site-footer__tagline {
  margin-top: var(--space-4);
  color: var(--text-2);
  line-height: 1.55;
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  color: var(--text-3);
  font: 500 var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.site-footer__group ul {
  display: grid;
  gap: var(--space-1);
}

.site-footer__group a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--text-2);
  text-decoration: none;
}

.site-footer__group a:hover {
  color: var(--text);
  text-decoration: underline;
}

.site-footer__group a[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
}

.site-footer__bottom {
  display: grid;
  gap: var(--space-5);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.site-footer__note {
  max-width: 48rem;
  color: var(--text-3);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.site-footer__languages ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.site-footer__languages a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--space-3);
  border-radius: 999px;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 0.8125rem;
  text-decoration: none;
}

.site-footer__languages a:hover {
  color: var(--text);
}

.site-footer__languages a[aria-current='true'] {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
}

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

  .site-footer__brand {
    grid-column: auto;
  }

  .site-footer__bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* styles/4-components.css */
/* Components: buttons, cards, chips and badges, markers, steps, comparison table, plans, notices, legal text. */

/* ------------------------------------------------------------------ Buttons: physical keys, pressed on activation */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
  font: 600 0.9375rem / 1.2 var(--font-sans);
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  transition:
    box-shadow 0.15s var(--ease),
    transform 0.15s var(--ease),
    background-color 0.15s var(--ease);
}

.button:hover {
  box-shadow: var(--edge), var(--shadow-2);
  transform: translateY(-1px);
}

.button:active {
  box-shadow: var(--shadow-press);
  transform: translateY(1px);
}

.button--primary {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    inset 0 -1px 0 rgb(30 27 75 / 0.25),
    0 0 0 1px rgb(55 48 163 / 0.7),
    1px 2px 4px -1px rgb(55 48 163 / 0.45),
    4px 10px 20px -10px rgb(55 48 163 / 0.6);
}

.button--primary:hover {
  background: var(--accent-hover);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    inset 0 -1px 0 rgb(30 27 75 / 0.25),
    0 0 0 1px rgb(55 48 163 / 0.7),
    2px 4px 8px -2px rgb(55 48 163 / 0.5),
    6px 14px 28px -12px rgb(55 48 163 / 0.65);
}

.button--primary:active {
  box-shadow: 0 0 0 1px rgb(55 48 163 / 0.8), inset 0 1px 3px rgb(30 27 75 / 0.5);
}

.button--small {
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  font-size: var(--text-small);
}

/* ------------------------------------------------------------------ Cards: raised planes on a shared grid */

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

@media (min-width: 45rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

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

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

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

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--pad-card);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
}

.card > p,
.card .prose {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.card > p + p {
  margin-top: calc(-1 * var(--space-1));
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.card__title {
  font-size: var(--text-h3);
  font-weight: 640;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

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

.card__title a::after {
  content: ' →';
  color: var(--accent-text);
}

.card:has(.card__title a):hover {
  box-shadow: var(--edge), var(--shadow-2);
}

.card:has(.card__title a:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.card__title a:focus-visible {
  outline: none;
}

/* The link covers the whole card. */
.card:has(.card__title a) {
  position: relative;
}

.card__title a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.contact-link {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
}

.card > p:has(.contact-link) {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* A panel: a raised plane for one block of content (download coming soon). */
.panel {
  display: grid;
  gap: var(--space-5);
  max-width: 48rem;
  padding: var(--pad-card) clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(28rem 12rem at 0 0, var(--accent-soft), transparent 70%) no-repeat,
    var(--surface-float);
  box-shadow: var(--edge), var(--shadow-2);
}

.panel > .fineprint {
  margin-top: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* Facts: label / value pairs at the foot of a card. */
.facts {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
  gap: var(--space-3);
}

.facts dt {
  color: var(--text-3);
  font: 500 var(--text-label) / 1.65 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.facts dd {
  color: var(--text);
}

.facts--wide {
  max-width: 48rem;
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--pad-card);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
}

/* ------------------------------------------------------------------ Chips, badges and markers */

/* A chip: a small raised label (drawings, connectors). */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-xs);
  color: var(--text-2);
  background: var(--surface);
  box-shadow: var(--edge), 0 0 0 1px var(--line), 1px 2px 4px -1px rgb(17 24 39 / 0.12);
  font: 500 0.6875rem / 1.4 var(--font-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Status badge: a raised chip with a status light; the text carries the meaning. */
.badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.25rem 0.5625rem 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
  color: var(--text-2);
  background: var(--surface);
  box-shadow: var(--edge), 0 0 0 1px var(--line), 1px 2px 4px -1px rgb(17 24 39 / 0.1);
  font: 500 0.6875rem / 1.3 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge::before {
  content: '';
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--wire);
}

.badge--positive::before {
  background: var(--accent);
}

.badge--progress {
  color: var(--accent-text);
}

.badge--progress::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(79 70 229 / 0.18);
}

.badge--caution {
  color: var(--amber-text);
}

.badge--caution::before {
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-line);
}

.badge--neutral::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--wire);
}

.badge--muted {
  color: var(--text-3);
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}

.badge--muted::before {
  width: 0.5rem;
  height: 1.5px;
  border-radius: 0;
}

/* Marker: a numbered disc that keys a drawing to its notes. */
.marker {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: var(--on-ink);
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--surface), 1px 2px 4px rgb(17 24 39 / 0.25);
  font: 600 0.75rem / 1 var(--font-mono);
}

.note .marker {
  margin-bottom: var(--space-1);
}

@media (max-width: 63.99rem) {
  .note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
  }

  .note .marker {
    margin: 0;
  }

  .note > p {
    grid-column: 1 / -1;
  }
}

/* Legend: status badge and its meaning. */
.legend {
  display: grid;
  gap: var(--space-3);
}

.legend__item {
  display: grid;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-4) var(--pad-card);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
}

.legend dd {
  color: var(--text-2);
  font-size: 0.9375rem;
}

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

@media (min-width: 64rem) {
  .legend {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

/* ------------------------------------------------------------------ Steps: numbered planes joined by a rail */

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

.steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--pad-card);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
}

.steps__number {
  margin-bottom: var(--space-3);
  color: var(--accent-text);
  font: 600 var(--text-label) / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
}

/* The number sits on a short hairline that runs to the next step. */
.steps__number::after {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  margin-left: var(--space-3);
  vertical-align: middle;
  background: var(--accent-line);
}

.steps__title {
  font-size: var(--text-h3);
  font-weight: 640;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.steps__item p {
  color: var(--text-2);
  font-size: 0.9375rem;
}

@media (min-width: 45rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

  .steps__item:not(:last-child)::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: calc(var(--pad-card) + 0.375rem);
    right: calc(-1 * var(--space-5) - 1px);
    width: calc(var(--space-5) + 2px);
    height: 1px;
    background: var(--accent-line);
  }
}

/* ------------------------------------------------------------------ Comparison table */

.table-wrap {
  border-radius: var(--radius-lg);
}

.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.compare caption {
  padding-bottom: var(--space-4);
  color: var(--text-3);
  font: 500 var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-align: left;
  text-transform: uppercase;
}

.compare th,
.compare td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
}

.compare thead th {
  padding-block: var(--space-3);
  color: var(--text-3);
  font: 500 var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.compare tbody th {
  color: var(--text);
  font-weight: 600;
}

.compare tbody td {
  color: var(--text-2);
}

.compare tbody tr + tr > * {
  border-top: 1px solid var(--line);
}

/* The T4Agent column is a raised plane with an accent edge, standing a little above the table. */
.compare .compare__ours {
  color: var(--text);
  background: var(--surface-float);
  box-shadow:
    inset 1px 0 0 var(--accent-line),
    inset -1px 0 0 var(--accent-line),
    12px 0 24px -16px rgb(17 24 39 / 0.22);
}

.compare thead .compare__ours {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--accent-text);
  box-shadow:
    inset 1px 0 0 var(--accent-line),
    inset -1px 0 0 var(--accent-line),
    inset 0 2px 0 var(--accent),
    12px 0 24px -16px rgb(17 24 39 / 0.22);
}

.compare tbody tr:last-child .compare__ours {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow:
    inset 1px 0 0 var(--accent-line),
    inset -1px 0 0 var(--accent-line),
    inset 0 -1px 0 var(--accent-line),
    12px 10px 24px -14px rgb(17 24 39 / 0.25);
}

.compare tbody tr + tr > .compare__ours {
  border-top-color: rgb(79 70 229 / 0.14);
}

@media (min-width: 45rem) {
  .compare th[scope='row'] {
    width: 22%;
  }

  .compare thead th:nth-child(2) {
    width: 34%;
  }
}

/* Narrow screens: each row becomes a card; the T4Agent answer is the raised half of it. */
@media (max-width: 44.99rem) {
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
  }

  .compare caption {
    display: block;
  }

  .compare tbody {
    display: grid;
    gap: var(--space-3);
  }

  .compare tbody tr {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--edge), var(--shadow-1);
  }

  .compare tbody tr + tr > * {
    border-top: 0;
  }

  .compare th,
  .compare td {
    padding: var(--space-3) var(--space-4);
  }

  .compare tbody th {
    padding-top: var(--space-4);
  }

  .compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    color: var(--text-3);
    font: 500 0.6875rem / 1.4 var(--font-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .compare .compare__ours,
  .compare tbody tr:last-child .compare__ours {
    margin: var(--space-1) var(--space-2) var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--accent-line), inset 0 2px 0 var(--accent);
    background: var(--accent-soft);
  }

  .compare .compare__ours::before {
    color: var(--accent-text);
  }
}

/* ------------------------------------------------------------------ Plans */

.tier {
  gap: 0;
}

.tier .card__head {
  align-items: center;
}

.tier__summary {
  margin-top: var(--space-2);
  min-height: 3.2em;
}

.tier__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-block: var(--space-5);
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
}

.tier__amount {
  color: var(--text);
  font: 600 1.375rem / 1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.tier__price--tba .tier__amount {
  color: var(--text-3);
  font-size: 2.25rem;
  font-weight: 250;
  line-height: 1;
}

.tier__label {
  color: var(--text-3);
  font: 500 var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.tier .bullets {
  font-size: 0.9375rem;
}

/* The featured plan floats one level higher, with an accent edge. */
.tier--featured {
  background: var(--surface-float);
  box-shadow:
    var(--edge),
    inset 0 2px 0 var(--accent),
    0 0 0 1px var(--accent-line),
    0 2px 3px rgb(17 24 39 / 0.06),
    4px 12px 24px -8px rgb(17 24 39 / 0.12),
    14px 32px 64px -24px rgb(49 46 129 / 0.32);
}

.tier--featured .bullets li::before {
  background: var(--accent);
  box-shadow: none;
}

@media (min-width: 64rem) {
  .tier--featured {
    transform: translateY(-0.5rem);
  }
}

/* ------------------------------------------------------------------ Notices */

.notice {
  position: relative;
  display: grid;
  gap: var(--space-2);
  max-width: 56rem;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
  color: var(--text-2);
  font-size: 0.9375rem;
}

.notice__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-weight: 640;
}

.notice__body > * + * {
  margin-top: var(--space-2);
}

.notice--info {
  box-shadow: var(--edge), inset 2px 0 0 var(--accent), var(--shadow-1);
}

.notice--caution {
  box-shadow: var(--edge), inset 2px 0 0 var(--amber-line), var(--shadow-1);
}

/* The draft notice: a stamp across the top of a legal document — a hatched amber edge and a monospace status line. */
.notice--draft {
  overflow: hidden;
  max-width: none;
  margin-top: 0;
  padding-top: calc(var(--space-4) + 6px);
  box-shadow: var(--edge), 0 0 0 1px rgb(217 119 6 / 0.45), var(--shadow-1);
}

.notice--draft::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--amber) 0 6px, transparent 6px 12px);
  opacity: 0.85;
}

.notice--draft .notice__title {
  color: var(--amber-text);
  font: 600 var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.notice--draft .notice__title::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-line);
}

.notice--draft .notice__body {
  max-width: 72ch;
}

/* A notice between the hero and the first section (contact, legal pages). */
main > .container:has(> .notice) {
  padding-bottom: var(--space-6);
}

/* ------------------------------------------------------------------ Legal documents */

.legal-doc {
  max-width: 46rem;
}

.legal-doc section {
  padding-block: var(--space-8);
  border-top: 1px solid var(--line);
}

.legal-doc section:first-child {
  margin-top: var(--space-10);
}

.legal-doc h2 {
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
  font-weight: 640;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.legal-doc .prose {
  font-size: 1rem;
  line-height: 1.7;
}

.legal-doc > .fineprint {
  margin-top: 0;
  margin-bottom: var(--space-section);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

/* styles/5-drawings.css */
/*
 * Drawings: the home hero's system stack and the page diagrams (devices, legal posture, platforms). All are built from
 * the same parts: a board (a dotted floor plate), planes on it (raised, lit from the top left), wires between planes
 * that end exactly on the planes' edges, chips anchored to the wires, numbered markers, and the amber secrets
 * boundary — a dashed line around whatever keeps your sign-ins.
 */

/* ------------------------------------------------------------------ Shared parts */

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

.figure__caption {
  max-width: 64ch;
  color: var(--text-3);
  font-size: var(--text-small);
  line-height: 1.55;
}

/* The board: a floor plate with a dot grid, sunk one step below the planes standing on it. */
.stack__scene,
.flow {
  position: relative;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px) 0 0 / 16px 16px,
    var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 2px rgb(17 24 39 / 0.05);
}

.plane {
  position: relative;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-1);
}

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

.plane__kicker {
  color: var(--text-3);
  font: 500 0.6875rem / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.plane__title {
  margin-top: var(--space-1);
  color: var(--text);
  font: 650 1.0625rem / 1.3 var(--font-display);
  letter-spacing: -0.015em;
}

.plane__text {
  margin-top: var(--space-1);
  color: var(--text-2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.plane__items {
  display: grid;
  gap: 0.3125rem;
  margin-top: var(--space-3);
  color: var(--text-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.plane__items li {
  position: relative;
  padding-left: 0.875rem;
}

.plane__items li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 1px;
  box-shadow: 0 0 0 1px var(--wire);
}

.plane__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: var(--space-3);
}

.plane__tags li {
  padding: 0.125rem 0.4375rem;
  border-radius: var(--radius-xs);
  color: var(--text-2);
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 0.6875rem / 1.5 var(--font-mono);
}

/* "Never here": struck-through chips on the server plane. */
.plane__never {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line-strong);
}

.plane__never li {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: var(--text-3);
  font: 500 0.6875rem / 1.5 var(--font-mono);
}

.plane__never li::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background:
    linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, currentColor 44% 56%, transparent 56%);
}

.plane__vault {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--space-3);
  color: var(--amber-text);
  font: 500 0.6875rem / 1.4 var(--font-mono);
}

.plane__vault::before {
  content: '';
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-line);
}

/* The focal plane: one level higher, its kicker in the accent, the amber boundary around it. */
.plane--focus,
.plane--device {
  background: var(--surface-float);
  box-shadow: var(--edge), var(--shadow-3);
}

.plane--focus .plane__kicker,
.plane--device .plane__kicker {
  color: var(--accent-text);
}

.plane--focus {
  outline: 1px dashed var(--amber-line);
  outline-offset: 6px;
}

/* The approval gate: an accent edge. */
.plane--gate {
  box-shadow: var(--edge), inset 0 2px 0 var(--accent), 0 0 0 1px var(--accent-line), var(--shadow-1);
}

.plane--gate .plane__kicker {
  color: var(--accent-text);
}

/* Planned and not planned: outlines on the floor, not raised planes. */
.plane--ghost,
.plane--neutral,
.plane--muted {
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  box-shadow: none;
  outline: 1px dashed var(--line-strong);
  outline-offset: -1px;
}

.plane--muted .plane__title {
  color: var(--text-2);
}

.plane .badge {
  margin-top: var(--space-3);
}

/* Wires: 1 px lines with round terminals that sit on the planes' edges. */
.stack__wire,
.bus::before,
.bus::after,
.flow__row > li::before,
.flow__stage + .flow__stage::before {
  content: '';
  position: absolute;
  background: var(--wire);
}

/* ------------------------------------------------------------------ The system stack (home hero) */

.stack__scene {
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 0.4rem + 1.5vw, 1.75rem);
}

.stack__boundary {
  position: relative;
  padding: var(--space-3);
  border-radius: calc(var(--radius-md) + var(--space-3));
  background: var(--amber-soft);
  box-shadow: inset 0 0 0 1px transparent;
  outline: 1px dashed var(--amber-line);
  outline-offset: -1px;
}

.stack__boundary-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-1) var(--space-3);
  color: var(--amber-text);
  font: 600 0.6875rem / 1.4 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stack__boundary-label::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-line);
}

.plane--device .plane__items,
.plane--server .plane__items {
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  column-gap: var(--space-5);
}

.plane__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font: 500 0.6875rem / 1.45 var(--font-mono);
}

.plane__path {
  color: var(--text-3);
}

.plane__out {
  color: var(--text-2);
}

.plane__out::before {
  content: '↗ ';
  color: var(--accent-text);
}

.plane__out-via {
  color: var(--text-3);
}

.plane__out-via::before {
  content: '· ';
}

/* A link between two planes: one wire (official channels) or two opposite wires (commands down, results up). The chips
   sit next to their wire, centred on it; the marker sits between the two wires. */
.stack__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3.75rem;
}

.stack__wire {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.stack__link--duplex .stack__wire--down {
  left: calc(50% - 1.375rem);
}

.stack__link--duplex .stack__wire--up {
  left: calc(50% + 1.375rem);
}

/* Terminals on the plane edges. */
.stack__wire::before,
.stack__wire::after {
  content: '';
  position: absolute;
  left: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--wire);
}

.stack__wire::before {
  top: -3px;
}

.stack__wire::after {
  bottom: -3px;
}

/* Arrowheads: commands travel to the device, results to the server. In the flat stack the device is on top. */
.stack__wire--down::before,
.stack__wire--up::after {
  left: -3.5px;
  width: 8px;
  height: 6px;
  border-radius: 0;
  background: var(--wire);
  box-shadow: none;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.stack__wire--up::after {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.stack__link--duplex .stack__chip--start {
  position: absolute;
  right: calc(50% + 1.375rem + 0.625rem);
}

.stack__link--duplex .stack__chip--end,
.stack__link--single .stack__chip--end {
  position: absolute;
  left: calc(50% + 1.375rem + 0.625rem);
}

.stack__link--single .stack__chip--end {
  left: calc(50% + 0.75rem);
}

.stack__marker {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--surface-sunk), 1px 2px 4px rgb(17 24 39 / 0.25);
}

.plane--server .plane__never li:first-child {
  margin-right: 0;
}

/* Wide screens: the stack in perspective — the device nearest, the providers furthest away. The planes stay readable:
   a modest tilt, one light, shadows towards the lower right. */
@media (min-width: 75rem) {
  .stack {
    perspective: 2400px;
    perspective-origin: 0 40%;
  }

  .stack__scene {
    flex-direction: column-reverse;
    transform: rotateX(12deg) rotateY(-16deg) rotateZ(0.75deg);
    transform-origin: 50% 60%;
    box-shadow:
      inset 0 0 0 1px var(--line),
      inset 0 1px 2px rgb(17 24 39 / 0.05),
      24px 48px 80px -48px rgb(17 24 39 / 0.35);
  }

  /* With the device below the server, commands point down and results up. */
  .stack__wire--down::before,
  .stack__wire--up::after {
    left: -2.5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--wire);
    clip-path: none;
  }

  .stack__wire--down::after,
  .stack__wire--up::before {
    left: -3.5px;
    width: 8px;
    height: 6px;
    border-radius: 0;
    background: var(--wire);
    box-shadow: none;
  }

  .stack__wire--down::after {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .stack__wire--up::before {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }

  .plane--providers,
  .plane--server {
    margin-inline: var(--space-3);
  }

  .plane--providers {
    margin-inline: var(--space-8);
  }
}

/* ------------------------------------------------------------------ Page diagrams */

.flow {
  padding: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.flow--devices,
.flow--platforms {
  display: grid;
  justify-items: center;
}

.plane--hub {
  width: min(100%, 30rem);
  text-align: center;
}

.plane--hub .plane__tags {
  justify-content: center;
}

.flow__row {
  --gap: var(--space-4);
  display: grid;
  gap: var(--gap);
  width: 100%;
}

.flow__row > li {
  position: relative;
}

.plane--ghost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-6);
  padding-block: var(--space-3);
}

.plane--ghost .plane__title {
  margin: 0;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.plane--ghost .badge {
  margin: 0;
}

/* The bus: a stem from the hub with its chip, then (wide screens) a rail and a drop to every node. */
.bus {
  position: relative;
  width: 100%;
  height: 2.5rem;
}

.bus::before {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}

.bus::after {
  display: none;
}

.bus__chip {
  position: absolute;
  top: 50%;
  left: calc(50% + 0.75rem);
  transform: translateY(-50%);
}

.flow--devices .bus {
  height: 3.5rem;
}

@media (min-width: 45rem) {
  .flow--platforms .flow__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Narrow screens: the nodes stack; the chip sits on the stem, and a short wire joins each node to the next. */
@media (max-width: 44.99rem) {
  .bus,
  .flow--devices .bus {
    display: flex;
    justify-content: center;
    height: auto;
    min-height: 2rem;
    padding-block: var(--space-3);
  }

  .bus__chip {
    position: relative;
    top: auto;
    left: auto;
    max-width: 85%;
    transform: none;
    white-space: normal;
    text-align: center;
  }

  .flow__row > li + li::before {
    top: calc(-1 * var(--gap));
    left: 50%;
    width: 1px;
    height: var(--gap);
  }
}

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

  .flow__row--3 > li::before {
    top: calc(-1 * 1.75rem);
    left: 50%;
    width: 1px;
    height: 1.75rem;
  }

  .flow--devices .bus::before {
    height: 50%;
  }

  .flow--devices .bus::after,
  .flow--platforms .bus::after {
    display: block;
    top: 50%;
    height: 1px;
  }


  .bus__chip {
    top: 25%;
  }
}

@media (min-width: 68.75rem) {
  .flow--platforms .flow__row--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .flow--platforms .bus {
    height: 3.5rem;
  }

  .flow--platforms .bus::before {
    height: 50%;
  }

  .flow__row--5 > li::before {
    top: calc(-1 * 1.75rem);
    left: 50%;
    width: 1px;
    height: 1.75rem;
  }

}

/* The rail runs from the centre of the first node to the centre of the last. */
.bus--3 {
  --n: 3;
}

.bus--5 {
  --n: 5;
}

.bus::after {
  left: calc((100% - (var(--n, 1) - 1) * var(--space-4)) / (2 * var(--n, 1)));
  right: calc((100% - (var(--n, 1) - 1) * var(--space-4)) / (2 * var(--n, 1)));
}

@media (min-width: 45rem) and (max-width: 68.74rem) {
  .flow--platforms .bus::after {
    display: none;
  }
}

/* Legal posture: four stages in a row (wide) or a column, joined by arrows. */
.flow--trust {
  display: grid;
  gap: var(--space-8);
}

.flow__stage {
  position: relative;
}

.flow__stage .plane {
  height: 100%;
}

.flow__stage + .flow__stage::before {
  top: calc(-1 * var(--space-8));
  left: 50%;
  width: 1px;
  height: var(--space-8);
}

.flow__stage + .flow__stage::after {
  content: '';
  position: absolute;
  top: -8px;
  left: calc(50% - 3.5px);
  width: 8px;
  height: 6px;
  background: var(--wire);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (min-width: 56rem) {
  .flow--trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-10);
  }

  .flow__stage + .flow__stage::before {
    top: 50%;
    left: calc(-1 * var(--space-10));
    width: var(--space-10);
    height: 1px;
  }

  .flow__stage + .flow__stage::after {
    top: calc(50% - 3.5px);
    left: -8px;
    width: 6px;
    height: 8px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}

.flow--trust .plane--focus {
  outline-offset: 5px;
}

/* styles/6-motion.css */
/*
 * Motion: progressive enhancement, CSS only. The hero stack assembles from the back plane to the front one, and the
 * buttons' press is animated; nothing moves under prefers-reduced-motion, where the static composition is the final
 * state. Forced colours: the planes keep their outlines, the decorative fills give way to system colours.
 */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .stack__scene > * {
    animation: plane-in 0.7s var(--ease) both;
  }

  .stack__scene > :nth-child(5) {
    animation-delay: 0.05s;
  }

  .stack__scene > :nth-child(4) {
    animation-delay: 0.2s;
  }

  .stack__scene > :nth-child(3) {
    animation-delay: 0.3s;
  }

  .stack__scene > :nth-child(2) {
    animation-delay: 0.45s;
  }

  .stack__scene > :nth-child(1) {
    animation-delay: 0.55s;
  }

  @keyframes plane-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .card,
  .plane,
  .steps__item,
  .legend__item,
  .notice,
  .menu__panel,
  .chip,
  .badge,
  .button,
  .stack__scene,
  .flow,
  .cta__panel {
    border: 1px solid CanvasText;
  }

  .stack__wire,
  .bus::before,
  .bus::after,
  .flow__row > li::before,
  .flow__stage + .flow__stage::before,
  .marker {
    background: CanvasText;
    forced-color-adjust: none;
  }

  .marker {
    color: Canvas;
  }
}