/* Ordicura — Main Stylesheet
   Mobile-first responsive design
   CSS Custom Properties for theming

   Tokens follow docs/design/DESIGN.md. Where that document and the original
   scaffold disagreed, the scaffold's names were kept and the values moved to
   clear 4.5:1 — see docs/DRAFT-NOTES.md. */

:root {
  /* Ordicura brand: Navy #1b2a41, Bronze #b0793b, Parchment #f6f3ee.
     Bronze is darkened to #8c5a22 wherever it carries text, so it clears 4.5:1. */
  /* Surfaces and text */
  --color-bg: #f6f3ee;
  --color-surface: #efeae2;
  --color-surface-raised: #fbf9f6;
  --color-border: #ddd5c8;
  --color-text: #1b2a41;
  --color-text-muted: #5a6475;

  /* Accents */
  --color-primary: #8c5a22;
  --color-primary-hover: #6f4618;
  --color-primary-contrast: #fbf9f6;
  --color-warm: #3b587f;
  --color-secure: #2e6b4e;
  --color-tint: #efe6d8;

  /* The inverted panel — dark in both themes, so it stays a panel */
  --color-ink: #1b2a41;
  --color-ink-raised: #22344f;
  --color-ink-border: #33465f;
  --color-on-ink: #f6f3ee;
  --color-on-ink-muted: #aeb6c2;
  --color-on-ink-primary: #d9a566;
  --color-on-ink-warm: #e9c48f;
  --color-on-ink-contrast: #1b2a41;

  /* Typography */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-size-base: 1rem;
  --line-height-base: 1.6;
  --line-height-tight: 1.15;
  --tracking-tight: -0.022em;

  /* Spacing — 4px grid */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Layout */
  --max-width: 1140px;
  --max-measure: 60ch;
  --radius: 12px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgb(27 42 65 / 5%), 0 12px 32px -12px rgb(27 42 65 / 18%);
  --shadow-lift: 0 2px 4px rgb(27 42 65 / 6%), 0 20px 44px -16px rgb(27 42 65 / 28%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: #0f1724;
    --color-surface: #152033;
    --color-surface-raised: #1a273d;
    --color-border: #2a3a54;
    --color-text: #f6f3ee;
    --color-text-muted: #a9b2bf;
    --color-primary: #d4a066;
    --color-primary-hover: #e6bc88;
    --color-primary-contrast: #1b2a41;
    --color-warm: #9db4d6;
    --color-secure: #7cc4a0;
    --color-tint: #182437;
    --color-ink: #0a111c;
    --color-ink-raised: #121c2c;
    --color-ink-border: #22314a;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px -12px rgb(0 0 0 / 60%);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 45%), 0 20px 44px -16px rgb(0 0 0 / 70%);
  }
}

:root[data-theme='dark'] {
  --color-bg: #0f1724;
  --color-surface: #152033;
  --color-surface-raised: #1a273d;
  --color-border: #2a3a54;
  --color-text: #f6f3ee;
  --color-text-muted: #a9b2bf;
  --color-primary: #d4a066;
  --color-primary-hover: #e6bc88;
  --color-primary-contrast: #1b2a41;
  --color-warm: #9db4d6;
  --color-secure: #7cc4a0;
  --color-tint: #182437;
  --color-ink: #0a111c;
  --color-ink-raised: #121c2c;
  --color-ink-border: #22314a;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px -12px rgb(0 0 0 / 60%);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 45%), 0 20px 44px -16px rgb(0 0 0 / 70%);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-primary); text-underline-offset: 0.15em; }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.5rem + 3.1vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.1875rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }

p, li { text-wrap: pretty; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* A class-based display beats the UA's [hidden] rule, so restate it. Without
   this the chat's Stop button never hides. */
[hidden] { display: none !important; }

/* Utilities */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.measure { max-width: var(--max-measure); }

/* The content security policy forbids inline styles, so spacing that would
   otherwise be a style attribute is a class. */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

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

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -4rem;
  z-index: 100;
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus { top: var(--space-md); color: var(--color-primary-contrast); }

/* Scroll reveal. Only ever hidden when JS is running, so a failed script or a
   reader without one still gets the whole page. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.site-header.is-stuck { border-bottom-color: var(--color-border); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0.625rem var(--space-md);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-decoration: none;
  margin-right: auto;
}

.nav__logo:hover { color: var(--color-text); }
/* The logo comes in a navy and a parchment version; the theme picks one. */
.brand-logo { height: 2.25rem; width: auto; }
.brand-logo--dark { display: none; }

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

:root[data-theme='dark'] .brand-logo--light { display: none; }
:root[data-theme='dark'] .brand-logo--dark { display: block; }

.nav__toggle,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.nav__toggle:hover,
.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

.nav__links {
  list-style: none;
  display: none;
  gap: var(--space-md);
  font-size: 0.9375rem;
}

.nav__links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
  padding-block: var(--space-xs);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav__links a:hover,
.nav__links a[aria-current='true'] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.nav__links.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md);
  gap: var(--space-sm);
}

/* Buttons */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 650;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

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

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: 0 6px 18px -8px var(--color-primary);
}

.btn-primary:hover { background-color: var(--color-primary-hover); color: var(--color-primary-contrast); }

.btn-outline {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Buttons on the dark hero */
.hero .btn-primary {
  background-color: var(--color-on-ink-primary);
  color: var(--color-on-ink-contrast);
  box-shadow: 0 8px 24px -10px var(--color-on-ink-primary);
}

.hero .btn-primary:hover { background-color: #e9c48f; color: var(--color-on-ink-contrast); }

.hero .btn-outline { border-color: var(--color-ink-border); color: var(--color-on-ink); }
.hero .btn-outline:hover { border-color: var(--color-on-ink-primary); color: var(--color-on-ink-primary); }

/* Application pages */
.subhero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ink);
  color: var(--color-on-ink);
  border-bottom: 1px solid var(--color-ink-border);
  padding-block: var(--space-lg) var(--space-xl);
}

.subhero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(176 121 59 / 20%), transparent 62%);
}

.subhero > .container { position: relative; z-index: 1; }

.subhero__title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-md);
  color: var(--color-on-ink);
}

.backlink {
  /* Block, so the flag beneath it — which is inline-flex — does not share
     the line with it. */
  display: block;
  width: fit-content;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-on-ink-muted);
  text-decoration: none;
  margin-bottom: var(--space-lg);
}

.backlink::before { content: '\2190\00a0'; }
.backlink:hover { color: var(--color-on-ink-primary); }

/* Screenshots. Until a real one is dropped in, the slot states which file it
   is waiting for — a portfolio with invented pictures of software is worse
   than one with none. */
.shots {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

.shot { display: grid; gap: var(--space-sm); }

.shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface-raised);
}

.shot__slot {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface-raised);
}

.shot__file {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.shot figcaption { font-size: 0.875rem; color: var(--color-text-muted); }

/* Sections */
.section { padding-block: var(--space-xl); }
.section--tint { background-color: var(--color-surface); }
.section--edge { border-top: 1px solid var(--color-border); }

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

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.section__eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background-color: currentColor;
}

.section__lead {
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  font-size: 1.125rem;
}

/* Hero — inverted, so the rest of the page reads as deliberate */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ink);
  color: var(--color-on-ink);
  border-bottom: 1px solid var(--color-ink-border);
  padding-block: calc(var(--space-xl) * 1.1) var(--space-xl);
}

/* Two soft lights and a hairline grid, drawn rather than loaded */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.hero::before {
  inset: 0;
  background-image:
    linear-gradient(var(--color-ink-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-ink-border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 70% 70% at 30% 30%, #000 20%, transparent 75%);
}

.hero::after {
  top: -28%;
  right: -18%;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(176 121 59 / 22%), transparent 62%);
}

/* On a dark page the hero is no longer an inversion, so it needs its own
   light to stay a distinct zone rather than merging with what follows. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero::after {
    background: radial-gradient(circle, rgb(176 121 59 / 34%), transparent 60%);
  }
}

:root[data-theme='dark'] .hero::after {
  background: radial-gradient(circle, rgb(176 121 59 / 34%), transparent 60%);
}

.hero > .container { position: relative; z-index: 1; }

.hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-on-ink-muted);
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-ink-border);
  background-color: color-mix(in srgb, var(--color-ink-raised) 70%, transparent);
  border-radius: 999px;
  padding: 0.3rem 0.85rem 0.3rem 0.35rem;
}

.flag {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-ink-contrast);
  background-color: var(--color-on-ink-primary);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.hero__title { margin-bottom: var(--space-md); color: var(--color-on-ink); }

.hero__subtitle {
  font-size: 1.1875rem;
  color: var(--color-on-ink-muted);
  margin-bottom: var(--space-lg);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.hero__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: center;
}

/* The terminal — real commands, from the assistant's own README */
.term {
  background-color: var(--color-ink-raised);
  border: 1px solid var(--color-ink-border);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 80%);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--color-ink-border);
}

.term__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--color-ink-border);
}

.term__name {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  color: var(--color-on-ink-muted);
}

.term__body { padding: var(--space-md); display: grid; gap: 0.9rem; }

.term__line { display: grid; gap: 0.15rem; }

.term__cmd { color: var(--color-on-ink); }

.term__cmd::before {
  content: '$ ';
  color: var(--color-on-ink-primary);
  font-weight: 700;
}

.term__note { color: var(--color-on-ink-muted); }
.term__note::before { content: '# '; color: var(--color-on-ink-warm); }

/* The hero carousel: one slide per application, all stacked in the same
   cell so the hero keeps the height of the tallest and never jumps. Without
   JavaScript the other slides stay hidden and the first one is the hero. */
.carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.carousel__controls[hidden] { display: none; }

.carousel__tabs {
  display: flex;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.carousel__tab {
  position: relative;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-on-ink-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}

.carousel__tab:hover { color: var(--color-on-ink); }

@media (max-width: 479px) {
  .carousel__more { display: none; }
  .carousel__tab { padding-inline: 0.6rem; }
}
.carousel__tab[aria-selected='true'] { color: var(--color-on-ink); }

.carousel__tab:focus-visible,
.carousel__pause:focus-visible {
  outline: 2px solid var(--color-on-ink-primary);
  outline-offset: 2px;
}

/* A hairline under every tab; the selected one fills as its time runs. */
.carousel__progress {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-ink-border);
  overflow: hidden;
}

.carousel__progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-on-ink-primary);
  transform: scaleX(0);
  transform-origin: left;
}

.carousel__tab[aria-selected='true'] .carousel__progress::after { transform: scaleX(1); }

.carousel.is-playing .carousel__tab[aria-selected='true'] .carousel__progress::after {
  animation: carousel-fill var(--carousel-interval, 8s) linear forwards;
}

.carousel.is-held .carousel__tab[aria-selected='true'] .carousel__progress::after {
  animation-play-state: paused;
}

@keyframes carousel-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.carousel__pause {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-on-ink-muted);
  background-color: color-mix(in srgb, var(--color-ink-raised) 70%, transparent);
  border: 1px solid var(--color-ink-border);
  border-radius: 50%;
  cursor: pointer;
}

.carousel__pause:hover { color: var(--color-on-ink); border-color: var(--color-on-ink-muted); }
.carousel__icon { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.carousel__icon--play,
.carousel__pause[data-paused='true'] .carousel__icon--pause { display: none; }
.carousel__pause[data-paused='true'] .carousel__icon--play { display: block; }

.carousel__slides { display: grid; }

.carousel__slide {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

.carousel.is-ready .carousel__slide:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  pointer-events: none;
}

.carousel.is-ready .carousel__slide.is-active {
  transition-delay: 0s;
}

/* Only one h1 on the page: the other slides' titles are h2, sized alike. */
h2.hero__title { font-size: clamp(2.25rem, 1.5rem + 3.1vw, 3.5rem); }

/* The window beside the CRM and IT Portal slides: rows, not commands. */
.term--app { font-family: var(--font-body); font-size: 0.875rem; }

.mini {
  list-style: none;
  padding: var(--space-md);
  display: grid;
  gap: 0.85rem;
}

.mini__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-on-ink);
}

.mini__label { color: var(--color-on-ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__row:not(.mini__row--asset) .mini__label { color: var(--color-on-ink); }

.mini__bar {
  height: 0.5rem;
  border-radius: 999px;
  background:
    linear-gradient(var(--color-on-ink-warm), var(--color-on-ink-warm)) left / var(--w, 50%) 100% no-repeat,
    var(--color-ink-border);
  opacity: 0.85;
}

.mini__row--won .mini__bar {
  background:
    linear-gradient(var(--color-on-ink-primary), var(--color-on-ink-primary)) left / var(--w, 50%) 100% no-repeat,
    var(--color-ink-border);
  opacity: 1;
}

.mini__value { font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.mini__row--asset { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
.mini__code { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-on-ink); }

.mini__status {
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--color-ink-border);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  color: var(--color-on-ink-muted);
  white-space: nowrap;
}

.mini__status--ok { color: #8fd3ad; border-color: color-mix(in srgb, #8fd3ad 45%, transparent); }
.mini__status--warn { color: var(--color-on-ink-warm); border-color: color-mix(in srgb, var(--color-on-ink-warm) 45%, transparent); }

.mini__foot {
  border-top: 1px solid var(--color-ink-border);
  padding: 0.7rem var(--space-md);
  font-size: 0.8125rem;
  color: var(--color-on-ink-muted);
}

.mini__foot::before { content: '\2192  '; color: var(--color-on-ink-primary); }

@media (prefers-reduced-motion: reduce) {
  .carousel__slide { transition: none; }
  .carousel.is-ready .carousel__slide:not(.is-active) { transform: none; }
}

/* Statistics */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-ink-border);
}

.stats dt {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-on-ink-warm);
  font-variant-numeric: tabular-nums;
}

.stats dd {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-on-ink-muted);
}

/* The two that matter most — privacy and cost — given more weight than the
   pillars below them, and a colour each. */
.highlights {
  list-style: none;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-xl);
}

.highlight {
  position: relative;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  overflow: hidden;
}

.highlight::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
}

.highlight--privacy::before { background-color: var(--color-primary); }
.highlight--efficiency::before { background-color: var(--color-warm); }
.highlight--security::before { background-color: var(--color-secure); }

.highlight__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.highlight--privacy .highlight__label { color: var(--color-primary); }
.highlight--efficiency .highlight__label { color: var(--color-warm); }
.highlight--security .highlight__label { color: var(--color-secure); }

.highlight h3 {
  font-size: 1.375rem;
  margin-bottom: var(--space-md);
}

.highlight__list {
  list-style: none;
  display: grid;
  gap: var(--space-sm);
}

.highlight__list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.highlight__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.45;
}

/* Pillars */
.pillars {
  list-style: none;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-xl);
}

.pillars > li { padding-left: var(--space-md); border-left: 2px solid var(--color-primary); }
.pillars h3 { margin-bottom: var(--space-sm); }
.pillars p { color: var(--color-text-muted); }

/* The capability list. Two identical copies scroll upward as one track; the
   animation resets at -50%, where the second copy sits exactly where the
   first began, so the loop has no seam. */
.feature {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.feature__text > p {
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  max-width: var(--max-measure);
}

.ticker {
  position: relative;
  height: 20rem;
  overflow: hidden;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  /* Fades the list in at the bottom edge and out at the top. */
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.ticker__track {
  display: flex;
  flex-direction: column;
  animation: ticker-rise 80s linear infinite;
}

/* Reading one is worth more than watching them all go by. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

@keyframes ticker-rise {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.ticker__list { list-style: none; }

.ticker__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.5rem var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.ticker__name { font-size: 0.9375rem; font-weight: 600; }

.ticker__group {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
  flex: none;
}

/* Must come after the rules above to beat them on order: the loop becomes an
   ordinary scrollable list, and the duplicate copy that exists only to make
   the loop seamless is taken out of it. Without the reset the shortened track
   would sit translated halfway up its own height. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
    transform: none !important;
  }

  .ticker__list[aria-hidden='true'] { display: none; }
  .ticker { overflow-y: auto; }
}

/* Cards */
.card {
  position: relative;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background-color: var(--color-primary);
  opacity: 0.85;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}

.card--cta { background-color: var(--color-tint); }
.card--cta::before { background-color: var(--color-warm); }

.card-title { font-size: 1.1875rem; font-weight: 700; margin-bottom: var(--space-sm); }

/* A section heading that leads somewhere, without looking like body copy
   that happens to be blue. */
.title-link { color: inherit; text-decoration: none; }
.title-link:hover { color: var(--color-primary); }

/* The whole card is the target, not just the words in its heading. */
.card-link { color: inherit; text-decoration: none; }

.card-link::after { content: ''; position: absolute; inset: 0; }

.card:has(.card-link):hover .card-link { color: var(--color-primary); }
.card-text { color: var(--color-text-muted); margin-bottom: var(--space-md); font-size: 0.9375rem; }
.card-text:last-child { margin-bottom: 0; }

.card-grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }

/* Principles */
.principles {
  list-style: none;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  counter-reset: principle;
}

.principles > li { counter-increment: principle; }

.principles h3::before {
  content: counter(principle, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-warm);
  margin-bottom: var(--space-sm);
}

.principles p { color: var(--color-text-muted); margin-top: var(--space-sm); font-size: 0.9375rem; }

/* The chat panel */
.chat {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.chat.is-retired { opacity: 0.72; }

.chat__log {
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
  min-height: 14rem;
  max-height: 26rem;
  overflow-y: auto;
  align-content: start;
}

.chat__hint { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: var(--space-md); }

.chat__msg {
  max-width: 44ch;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  white-space: pre-wrap;
}

.chat__msg--you {
  justify-self: end;
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  border-bottom-right-radius: var(--radius-sm);
}

.chat__msg--them {
  justify-self: start;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}

.chat__msg--them.is-waiting { color: var(--color-text-muted); font-style: italic; }

.chat__note {
  font-size: 0.875rem;
  color: var(--color-warm);
  padding-inline: 0.2rem;
}

.chat__form {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.chat__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--color-text);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.6rem 1rem;
}

.chat__input::placeholder { color: var(--color-text-muted); }
.chat__input:disabled { cursor: not-allowed; }

.chat__send:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.chat__foot {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--color-border);
}

.chat__leave {
  font: inherit;
  color: var(--color-primary);
  background: none;
  border: 0;
  padding: 0;
  margin-left: var(--space-sm);
  text-decoration: underline;
  cursor: pointer;
}

/* Leaving a message, inside the conversation */
.chat__message {
  display: grid;
  gap: var(--space-sm);
  max-width: 32rem;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.chat__message-title { font-weight: 600; }

.chat__message label { display: grid; gap: 0.25rem; }

.chat__message input:not([type="checkbox"]),
.chat__message textarea {
  font: inherit;
  color: var(--color-text);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

.chat__message .chat__message-check { display: flex; align-items: center; gap: 0.5rem; }

.chat__message-fine { font-size: 0.8125rem; color: var(--color-text-muted); }

.chat__message-status { font-size: 0.875rem; color: var(--color-warm); }
.chat__message-status:empty { display: none; }

.chat__message-actions { display: flex; gap: var(--space-sm); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-lg);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
}

.site-footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-md); }
.site-footer__links a { color: var(--color-text-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--color-primary); }

/* Breakpoints — tablet */
@media (min-width: 480px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop */
@media (min-width: 768px) {
  .nav__toggle { display: none; }

  .nav__links { display: flex; flex-direction: row; }

  .nav__links.is-open {
    position: static;
    flex-direction: row;
    padding: 0;
    border: 0;
    background: none;
  }

  .principles { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .highlight { padding: var(--space-lg); padding-top: calc(var(--space-lg) + 4px); }

  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
    align-items: center;
    gap: var(--space-xl);
  }

  .ticker { height: 24rem; }
}

/* Wide */
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: repeat(3, 1fr); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .highlights { grid-template-columns: repeat(3, 1fr); }
}

/* Demo request form (application pages) */
.demo-form {
  display: grid;
  gap: var(--space-sm);
  max-width: 28rem;
  margin-top: var(--space-lg);
}

.demo-form label { display: grid; gap: 0.25rem; font-weight: 500; }

.demo-form input {
  font: inherit;
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

.demo-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.demo-form__actions { margin: 0; }

.demo-form__status { margin: 0; font-size: 0.9375rem; color: var(--color-warm); }
.demo-form__status:empty { display: none; }