/* ==========================================================================
   ASKLERA — sovereign health infrastructure
   Self-hosted, dependency-free and progressively enhanced.
   ========================================================================== */

:root {
  color-scheme: dark;
  --ink: #f6f5ff;
  --ink-soft: #c3c1d4;
  /* Raised from #85839b to #9a98ad: the faint token labels captions and meta at
     small sizes; #9a98ad measures ~6.4:1 on --night (was ~5.2:1), keeping small
     faint text comfortably above the 4.5:1 AA threshold. */
  --ink-faint: #9a98ad;
  --night: #05050a;
  --night-2: #090a13;
  --surface: #0d0e18;
  --surface-2: #141622;
  --surface-3: #1a1c2a;
  --line: rgba(246, 245, 255, 0.14);
  --line-bright: rgba(246, 245, 255, 0.28);
  --acid: #d7ff3f;
  --acid-soft: #ecff9b;
  --blue: #4967ff;
  --blue-bright: #8aa2ff;
  --violet: #8c5cff;
  --cyan: #53e7ff;
  --coral: #ff6657;
  --danger-soft: #ffbbb3;
  --shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
  --shell: 1280px;
  --measure: 68ch;
  --radius: 22px;
  --radius-sm: 12px;
  --font-display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --scroll-progress: 0;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #0a0a11;
  --ink-soft: #414151;
  --ink-faint: #6c6b7c;
  --night: #f4f4f8;
  --night-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #e9eaf1;
  --surface-3: #dddfea;
  --line: rgba(10, 10, 17, 0.14);
  --line-bright: rgba(10, 10, 17, 0.28);
  --acid: #567000;
  --acid-soft: #334700;
  --blue: #2e4ce7;
  --blue-bright: #1936bd;
  --violet: #6d37e5;
  --cyan: #006a7d;
  /* #df3e31 measured 4.31:1 on #ffffff — below the 4.5:1 required for the
     ~10.7px eyebrow text it is used on. Darkened to reach 5.9:1. */
  --coral: #be2d23;
  --danger-soft: #8f1f18;
  --shadow: 0 34px 90px rgba(21, 23, 36, 0.16);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--night);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 12%, rgba(73, 103, 255, 0.12), transparent 24rem),
    radial-gradient(circle at 15% 36%, rgba(140, 92, 255, 0.08), transparent 28rem),
    var(--night);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

main,
section,
.wrap,
.wrap > *,
.grid > *,
.story-grid > *,
.audience-grid > *,
.moat-grid > * {
  min-width: 0;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

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

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

/* Hyphenation is enabled only for running prose. Browser French hyphenation
   dictionaries are not reliable enough for display type: at 72px a break like
   "tourne-ra" lands in the middle of the first thing the eye reads. Headings,
   buttons and labels therefore opt out entirely. */
:lang(fr) p,
:lang(fr) li,
:lang(fr) dd,
:lang(fr) td {
  hyphens: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
.kicker,
.eyebrow,
.btn,
.brand,
nav.site a,
footer.site a,
th,
.status td:first-child,
.lead,
.hero-copy p,
.hero-disclaimer,
.badge,
.status-signal,
blockquote {
  hyphens: none !important;
}

h1,
h2 {
  text-wrap: balance;
}

a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

a {
  color: var(--ink);
  text-decoration-color: var(--acid);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--acid);
}

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

button {
  color: inherit;
  font: inherit;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 4px;
  border-radius: 6px;
}

::selection {
  color: #08090d;
  background: var(--acid);
}

:root[data-theme="light"] ::selection {
  color: #fff;
}

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

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

.prose :is(p, li, dd),
.editorial-intro__copy :is(p, li),
.section-heading > p {
  max-width: 68ch;
  text-wrap: pretty;
}

.skip {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: #08090d;
  background: var(--acid);
  font: 800 0.78rem/1 var(--font-mono);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip:focus {
  transform: none;
}

.scroll-progress {
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  width: calc(var(--scroll-progress) * 100%);
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--acid), var(--cyan), var(--violet), var(--coral));
  box-shadow: 0 0 18px var(--blue);
}

/* Header */
header.site {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--night) 78%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

header.site.is-scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--night) 92%, transparent);
}

header.site .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 68px;
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* WCAG 2.5.8: the primary "back to home" control needs a 24x24 target.
     It measured 90x18 on a phone. */
  min-height: 24px;
  padding-block: 4px;
  gap: 0.56rem;
  color: var(--ink);
  font: 900 0.78rem/1 var(--font-display);
  text-decoration: none;
  letter-spacing: 0.025em;
}

.brand::before {
  width: 18px;
  height: 18px;
  content: "";
  background: conic-gradient(
    from 205deg,
    var(--acid),
    var(--cyan) 30%,
    var(--violet) 62%,
    var(--coral) 82%,
    var(--acid)
  );
  clip-path: polygon(50% 0, 100% 88%, 75% 100%, 61% 70%, 39% 70%, 25% 100%, 0 88%);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--cyan) 40%, transparent),
    0 0 30px color-mix(in srgb, var(--violet) 24%, transparent);
}

.brand::after {
  position: absolute;
  top: 7px;
  left: 6px;
  width: 6px;
  height: 7px;
  content: "";
  background: var(--night);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

nav.site {
  justify-self: center;
}

nav.site ul {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.site a {
  position: relative;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 760;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

nav.site a::after {
  position: absolute;
  right: 0;
  bottom: -0.42rem;
  left: 0;
  height: 2px;
  content: "";
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

nav.site a:hover,
nav.site a[aria-current="page"] {
  color: var(--ink);
}

nav.site a:hover::after,
nav.site a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.lang a,
.theme-toggle,
.menu-toggle {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  color: var(--ink);
  font: 800 0.76rem/1 var(--font-mono);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lang a {
  display: inline-flex;
  align-items: center;
  padding: 0.72rem 0.9rem;
}

.theme-toggle,
.menu-toggle {
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.78rem;
  cursor: pointer;
}

.theme-toggle {
  display: inline-flex;
}

.theme-toggle:hover,
.menu-toggle:hover,
.lang a:hover {
  border-color: var(--acid);
  color: var(--ink);
}

.theme-toggle__orb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 12px var(--acid);
}

.menu-toggle {
  display: none;
}

.menu-toggle__icon {
  display: grid;
  width: 14px;
  gap: 4px;
}

.menu-toggle__icon i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 180ms ease;
}

/* Type and common blocks */
h1,
h2,
h3 {
  margin-top: 0;
  color: var(--ink);
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.04em;
}

h1 {
  max-width: 15ch;
  margin-bottom: 1.2rem;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  line-height: 0.98;
}

h2 {
  max-width: 22ch;
  margin-bottom: 1.2rem;
  font-size: clamp(1.95rem, 3.45vw, 3.4rem);
  line-height: 1.02;
}

h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.15;
}

p {
  margin: 0 0 1.1rem;
}

p.lead {
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  line-height: 1.48;
}

.kicker,
.eyebrow,
.section-index {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  margin-bottom: 1.45rem;
  color: var(--acid);
  font: 800 0.78rem/1.25 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.kicker::before,
.eyebrow::before {
  width: 22px;
  height: 1px;
  content: "";
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.gradient-text {
  color: transparent;
  background: linear-gradient(100deg, var(--acid) 0%, var(--cyan) 40%, var(--violet) 76%, var(--coral) 100%);
  background-position: 0% 50%;
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  transition:
    background-position 460ms cubic-bezier(0.2, 0.75, 0.25, 1),
    filter 300ms ease;
}

:is(h1, h2, .intro-statement .statement, .system-panel h3, .manifesto-quote p) {
  transition:
    color 260ms ease,
    text-shadow 320ms ease,
    filter 320ms ease;
}

@media (hover: hover) and (pointer: fine) {
  :is(
      .hero-copy,
      .section-heading,
      .editorial-intro,
      .cta-box,
      .manifesto-quote,
      .system-panel__content
    ):hover
    :is(h1, h2, .statement, h3) {
    color: color-mix(in srgb, var(--ink) 86%, var(--cyan));
    text-shadow:
      0 0 20px color-mix(in srgb, var(--cyan) 18%, transparent),
      0 0 48px color-mix(in srgb, var(--violet) 12%, transparent);
  }

  .manifesto-quote:hover p {
    color: color-mix(in srgb, var(--ink) 86%, var(--cyan));
    text-shadow:
      0 0 20px color-mix(in srgb, var(--cyan) 18%, transparent),
      0 0 48px color-mix(in srgb, var(--violet) 12%, transparent);
  }

  :is(
      .hero-copy,
      .section-heading,
      .editorial-intro,
      .cta-box,
      .manifesto-quote
    ):hover
    .gradient-text {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cyan) 38%, transparent));
  }

  .manifesto-quote:hover {
    border-color: color-mix(in srgb, var(--cyan) 58%, var(--line));
    box-shadow:
      var(--shadow),
      0 0 56px color-mix(in srgb, var(--violet) 14%, transparent);
  }
}

.neon {
  color: var(--acid);
  text-shadow:
    0 0 16px color-mix(in srgb, var(--acid) 48%, transparent),
    0 0 40px color-mix(in srgb, var(--acid) 20%, transparent);
}

.neon-cyan {
  color: var(--cyan);
  text-shadow:
    0 0 16px color-mix(in srgb, var(--cyan) 48%, transparent),
    0 0 40px color-mix(in srgb, var(--cyan) 20%, transparent);
}

.neon-violet {
  color: var(--blue-bright);
  text-shadow:
    0 0 16px color-mix(in srgb, var(--violet) 55%, transparent),
    0 0 40px color-mix(in srgb, var(--violet) 22%, transparent);
}

.neon-coral {
  color: var(--coral);
  text-shadow:
    0 0 16px color-mix(in srgb, var(--coral) 46%, transparent),
    0 0 40px color-mix(in srgb, var(--coral) 18%, transparent);
}

.small {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.hero-promise {
  max-width: 56ch;
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--cyan);
  color: var(--ink-soft);
  font-size: 0.98rem;
}

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

code {
  padding: 0.12em 0.38em;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--acid-soft);
  background: var(--surface-2);
  font-size: 0.88em;
}

section {
  position: relative;
  padding-block: clamp(5.2rem, 10vw, 9.5rem);
}

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

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.section-heading > * {
  margin-bottom: 0;
}

.section-heading p {
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 0.35rem 0.5rem 0.35rem 0;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.btn::after {
  margin-left: 0.85rem;
  content: "↗";
  font-size: 1rem;
  transition: transform 180ms ease;
}

.btn:hover {
  border-color: var(--acid);
  color: var(--ink);
  transform: translateY(-2px);
}

.btn:hover::after {
  transform: translate(2px, -2px);
}

.btn-primary {
  border-color: var(--acid);
  color: #08090d;
  background: var(--acid);
  box-shadow: 0 0 30px color-mix(in srgb, var(--acid) 20%, transparent);
}

.btn-primary:hover {
  color: #08090d;
  background: var(--acid-soft);
  box-shadow: 0 0 46px color-mix(in srgb, var(--acid) 32%, transparent);
}

:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .skip {
  color: #fff;
}

/* Homepage hero */
.hero {
  position: relative;
  min-height: min(820px, calc(100svh - 68px));
  padding-block: clamp(4.2rem, 8vw, 7.6rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

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

.hero--home .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(24rem, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.hero--home h1 {
  max-width: 12ch;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-copy .lead {
  max-width: 55ch;
  margin-bottom: 1.7rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  font: 700 0.8rem/1.25 var(--font-mono);
}

/* The pre-homologation disclaimer sits at body size in the hero, not in a
   10px chip: it is the site's most important sentence and its legal margin. */
.hero-disclaimer {
  max-width: 46ch;
  margin-top: 1.15rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--acid);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  font-size: 0.95rem;
  line-height: 1.55;
}

.hero-disclaimer strong {
  color: var(--ink);
}

.hero-disclaimer a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.hero-meta li::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: var(--acid);
  box-shadow: 0 0 9px var(--acid);
}

.hero-meta li[data-state="clear"]::before {
  background: var(--ink-faint);
  box-shadow: none;
}

.hero-visual {
  position: relative;
  min-width: 0;
  perspective: 1200px;
}

.hero-visual::before {
  position: absolute;
  z-index: -1;
  inset: 10% -8%;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(73, 103, 255, 0.38), transparent 64%);
  filter: blur(44px);
}

.hero-visual__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.62 / 1;
  border: 1px solid var(--line-bright);
  border-radius: clamp(20px, 3vw, 42px);
  background: #030408;
  box-shadow: var(--shadow);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 220ms ease;
}

.hero-visual__frame::after,
.visual-shell::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.08), transparent 58%);
  mix-blend-mode: screen;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual-label {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  background: rgba(3, 4, 8, 0.68);
  backdrop-filter: blur(10px);
  font: 700 0.76rem/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.signal {
  position: absolute;
  z-index: 2;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(215, 255, 63, 0.45);
  border-radius: 50%;
  pointer-events: none;
  animation: signal 3.2s ease-out infinite;
}

.signal--one {
  top: 28%;
  right: 27%;
}

.signal--two {
  right: 9%;
  bottom: 18%;
  animation-delay: 1.45s;
}

@keyframes signal {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  18% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

.hero-rail {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.hero-rail__track {
  display: flex;
  width: max-content;
  animation: rail 30s linear infinite;
}

.hero-rail span {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 2rem 0.85rem 0;
  color: var(--ink-soft);
  font: 800 0.76rem/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-rail span::after {
  color: var(--acid);
  content: "✦";
}

@keyframes rail {
  to {
    transform: translateX(-50%);
  }
}

/* Homepage content */
.intro-statement {
  display: grid;
  grid-template-columns: minmax(11rem, 0.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 8vw, 8rem);
}

.intro-statement .statement {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4.1vw, 4.15rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.intro-statement .statement strong {
  color: var(--acid);
}

.intro-copy {
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1.8vw, 1.38rem);
}

/* The statement and the copy share a grid column, and the statement carries
   margin: 0 — without this the display heading's descenders ran into the first
   line of the paragraph. */
.intro-statement .statement + .intro-copy,
.intro-statement .statement + * {
  margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(3.5rem, 7vw, 7rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof-item {
  min-width: 0;
  padding: 1.65rem 1.25rem;
  border-right: 1px solid var(--line);
}

.proof-item:last-child {
  border-right: 0;
}

.proof-item strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--acid);
  font: 900 clamp(1.25rem, 2vw, 1.8rem)/1 var(--font-display);
  letter-spacing: -0.04em;
}

.proof-item span {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.systems {
  background:
    radial-gradient(circle at 80% 40%, rgba(83, 231, 255, 0.1), transparent 30rem),
    var(--night-2);
}

.systems-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.system-tabs {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--line);
}

.system-tab {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1.15rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.system-tab__index {
  color: var(--ink-faint);
  font: 700 0.76rem/1 var(--font-mono);
}

.system-tab__name {
  font-weight: 800;
}

.system-tab::after {
  color: var(--ink-faint);
  content: "＋";
}

.system-tab:hover,
.system-tab[aria-selected="true"] {
  color: var(--ink);
}

.system-tab[aria-selected="true"] .system-tab__index,
.system-tab[aria-selected="true"]::after {
  color: var(--acid);
}

.system-tab[aria-selected="true"]::after {
  content: "→";
}

.system-stage {
  position: relative;
}

.system-panel {
  min-height: 100%;
}

.system-panel[hidden] {
  display: none;
}

.system-panel__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.75fr);
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
}

.system-panel h3 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.5rem);
  letter-spacing: -0.035em;
}

.system-panel p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.visual-shell {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: #03050a;
  box-shadow: var(--shadow);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:
    border-color 200ms ease,
    transform 220ms ease;
}

.visual-shell:hover {
  border-color: color-mix(in srgb, var(--acid) 55%, var(--line));
}

.visual-shell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual-shell--wide {
  aspect-ratio: 1.78 / 1;
}

.visual-shell--square {
  aspect-ratio: 1 / 1;
}

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

.principle,
.card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 52%),
    var(--surface);
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.principle::before,
.card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--acid), var(--blue), transparent 72%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.principle:hover,
.card:hover {
  border-color: var(--line-bright);
  background: var(--surface-2);
  transform: translateY(-4px);
}

.principle:hover::before,
.card:hover::before {
  transform: scaleX(1);
}

.principle__number {
  display: block;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  color: var(--acid);
  font: 800 0.76rem/1 var(--font-mono);
}

.principle p,
.card p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.security-layout,
.sovereignty-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
}

.security-layout .visual-shell {
  max-width: 610px;
}

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

.feature-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.8rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.feature-list li::before {
  color: var(--acid);
  content: "↳";
  font-family: var(--font-mono);
}

.transparency {
  background:
    linear-gradient(135deg, rgba(215, 255, 63, 0.06), transparent 38%),
    var(--night-2);
}

.status-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 8vw, 8rem);
  margin-bottom: 3rem;
}

.status-intro p {
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.status-signal {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--coral) 50%, var(--line));
  border-radius: 999px;
  color: var(--danger-soft);
  font: 800 0.82rem/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.status-signal::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: var(--coral);
  box-shadow: 0 0 12px var(--coral);
}

.scroll-x {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--acid) var(--surface-2);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.scroll-x:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 4px;
}

table.status {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  border-top: 1px solid var(--line-bright);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

table.status caption {
  padding-bottom: 0.8rem;
  color: var(--ink-faint);
  text-align: left;
}

table.status th,
table.status td {
  padding: 1.05rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

table.status th {
  color: var(--ink-faint);
  font: 800 0.78rem/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

table.status tbody tr {
  transition: background 160ms ease;
}

table.status tbody tr:hover {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

table.status td:first-child {
  color: var(--ink);
  font-weight: 760;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.36rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font: 800 0.76rem/1.15 var(--font-mono);
  white-space: nowrap;
}

.badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: currentColor;
}

.badge-wip {
  border-color: color-mix(in srgb, var(--acid) 44%, transparent);
  color: var(--acid-soft);
  background: color-mix(in srgb, var(--acid) 8%, transparent);
}

.badge-todo {
  border-style: dashed;
  color: var(--ink-faint);
}

.badge-done {
  border-color: color-mix(in srgb, var(--cyan) 44%, transparent);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}

.note {
  position: relative;
  margin: 2rem 0;
  padding: 1.35rem 1.45rem;
  border: 1px solid color-mix(in srgb, var(--blue) 48%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

.note::before {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 3px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  content: "";
  background: var(--blue);
}

.note.warn {
  border-color: color-mix(in srgb, var(--coral) 42%, var(--line));
  background: color-mix(in srgb, var(--coral) 6%, var(--surface));
}

.note.warn::before {
  background: var(--coral);
}

.note p:last-child {
  margin-bottom: 0;
}

.sovereignty-layout .copy {
  max-width: 57ch;
}

.cta-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 100%, rgba(215, 255, 63, 0.16), transparent 30rem),
    radial-gradient(circle at 90% 10%, rgba(140, 92, 255, 0.26), transparent 34rem),
    var(--surface);
}

.cta-box {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}

.cta-box h2 {
  max-width: 18ch;
  margin-bottom: 0;
  font-size: clamp(2.1rem, 4.1vw, 4.15rem);
}

.cta-box .btn {
  margin-bottom: 0.45rem;
}

/* Standard editorial pages */
body.page-standard main {
  position: relative;
}

body.page-standard main > section:first-child {
  min-height: 72svh;
  padding-top: clamp(7rem, 14vw, 12rem);
  overflow: hidden;
}

body.page-standard main > section:first-child::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -5%;
  width: min(72vw, 1050px);
  height: 650px;
  content: "";
  opacity: 0.45;
  background-position: center;
  background-size: cover;
  mask-image: linear-gradient(90deg, transparent, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 30%, black 70%, transparent 100%);
  filter: saturate(1.1);
}

body.page-standard[data-page="ambition"] main > section:first-child::before,
body.page-standard[data-page="investors"] main > section:first-child::before {
  background-image: url("/assets/images/asklera-sovereignty.webp");
}

body.page-standard[data-page="security"] main > section:first-child::before,
body.page-standard[data-page="philosophy"] main > section:first-child::before {
  background-image: url("/assets/images/asklera-security.webp");
}

body.page-standard[data-page="about"] main > section:first-child::before {
  background-image: url("/assets/images/asklera-interop.webp");
}

body.page-standard .prose {
  position: relative;
  z-index: 1;
  max-width: min(780px, 100%);
}

body.page-standard .page-hero .prose {
  max-width: min(920px, 100%);
}

body.page-standard h1 {
  max-width: 15ch;
  margin-bottom: 1.6rem;
}

body.page-standard h1 + .lead,
body.page-standard h1 + .note + .lead {
  max-width: 54ch;
}

body.page-standard h2,
body.page-legal h2 {
  max-width: 26ch;
  margin-top: clamp(4.5rem, 9vw, 8rem);
  font-size: clamp(1.85rem, 3.15vw, 3.15rem);
}

body.page-standard h3,
body.page-legal h3 {
  margin-top: 2.5rem;
}

body.page-standard
  :is(.story-card, .principle-row, .refusal, .pathway-step, .thesis-step, .card, .principle)
  h3 {
  margin-top: 0;
}

body.page-standard .grid {
  width: min(1080px, calc(100vw - 2rem));
}

body.page-standard main > section:not(:first-child) h2 {
  margin-top: 0;
}

.page-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}

.page-hero__proof li {
  padding: 0.55rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  font: 800 0.76rem/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.page-hero__proof li::before {
  margin-right: 0.48rem;
  color: var(--acid);
  content: "●";
  text-shadow: 0 0 12px var(--acid);
}

.editorial-intro {
  display: grid;
  grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.editorial-intro__copy {
  max-width: 800px;
}

.editorial-intro__copy > p:first-of-type {
  color: var(--ink);
  font-size: clamp(1.2rem, 1.85vw, 1.65rem);
  font-weight: 650;
  line-height: 1.35;
}

.manifesto-quote {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid color-mix(in srgb, var(--violet) 48%, var(--line));
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0, rgba(83, 231, 255, 0.14), transparent 24rem),
    radial-gradient(circle at 0 100%, rgba(215, 255, 63, 0.12), transparent 24rem),
    var(--surface);
  box-shadow: var(--shadow);
  transition:
    border-color 260ms ease,
    box-shadow 320ms ease;
}

.manifesto-quote::before {
  position: absolute;
  top: -0.25em;
  right: 0.06em;
  color: color-mix(in srgb, var(--violet) 18%, transparent);
  content: "“";
  font: 900 clamp(6rem, 16vw, 14rem)/1 var(--font-display);
}

.manifesto-quote p {
  position: relative;
  z-index: 1;
  max-width: 30ch;
  margin: 0;
  color: var(--ink);
  font: 900 clamp(1.8rem, 3.7vw, 3.7rem)/1.03 var(--font-display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.manifesto-quote footer {
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  color: var(--ink-faint);
  font: 800 0.76rem/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.story-grid,
.audience-grid,
.moat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.foundation-story {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(73, 103, 255, 0.12), transparent 26rem),
    radial-gradient(circle at 88% 80%, rgba(215, 255, 63, 0.09), transparent 28rem),
    var(--night-2);
}

.foundation-story .manifesto-quote {
  margin-top: clamp(3.5rem, 8vw, 7rem);
}

.story-card {
  position: relative;
  min-height: 280px;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent, var(--blue)) 10%, transparent), transparent 44%),
    var(--surface);
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.story-card:nth-child(2),
.audience-grid > :nth-child(2),
.moat-grid > :nth-child(2) {
  --card-accent: var(--acid);
}

.story-card:nth-child(3),
.audience-grid > :nth-child(3),
.moat-grid > :nth-child(3) {
  --card-accent: var(--coral);
}

.story-card:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--cyan)) 70%, var(--line));
  box-shadow: 0 22px 60px color-mix(in srgb, var(--card-accent, var(--cyan)) 10%, transparent);
  transform: translateY(-5px);
}

.story-card__index {
  display: block;
  margin-bottom: 4.5rem;
  color: var(--card-accent, var(--cyan));
  font: 800 0.76rem/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.story-card p {
  color: var(--ink-soft);
}

.story-card p:last-child {
  margin-bottom: 0;
}

.story-card strong {
  color: var(--ink);
}

.principle-stack {
  border-top: 1px solid var(--line);
}

.principle-row {
  display: grid;
  grid-template-columns: 5rem minmax(14rem, 0.36fr) minmax(0, 0.64fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: 2.1rem;
  border-bottom: 1px solid var(--line);
}

.principle-row__index {
  color: var(--acid);
  font: 800 0.76rem/1.4 var(--font-mono);
}

.principle-row h3 {
  margin: 0;
}

.principle-row p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-soft);
}

.refusal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.refusal {
  min-height: 210px;
  padding: 1.6rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.refusal b {
  display: block;
  margin-bottom: 1rem;
  color: var(--coral);
  font: 800 0.76rem/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.refusal h3 {
  max-width: 22ch;
}

.refusal p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.pathway {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pathway-step {
  position: relative;
  min-height: 250px;
  padding: 1.35rem;
  border-right: 1px solid var(--line);
}

.pathway-step:last-child {
  border-right: 0;
}

.pathway-step::before {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: 4rem;
  border-radius: 50%;
  content: "";
  background: var(--step-accent, var(--acid));
  box-shadow: 0 0 18px var(--step-accent, var(--acid));
}

.pathway-step:nth-child(2) {
  --step-accent: var(--cyan);
}

.pathway-step:nth-child(3) {
  --step-accent: var(--blue-bright);
}

.pathway-step:nth-child(4) {
  --step-accent: var(--violet);
}

.pathway-step:nth-child(5) {
  --step-accent: var(--coral);
}

.pathway-step span {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ink-faint);
  font: 800 0.76rem/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pathway-step p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.thesis-ladder {
  display: grid;
  gap: 1rem;
  counter-reset: thesis;
}

.thesis-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 0.68fr);
  gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(100deg, color-mix(in srgb, var(--step-accent, var(--blue)) 10%, var(--surface)), var(--surface));
  counter-increment: thesis;
}

.thesis-step:nth-child(2) {
  --step-accent: var(--cyan);
  margin-left: 4%;
}

.thesis-step:nth-child(3) {
  --step-accent: var(--acid);
  margin-left: 8%;
}

.thesis-step::before {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  color: var(--step-accent, var(--blue-bright));
  content: "0" counter(thesis);
  font: 800 0.76rem/1.2 var(--font-mono);
  letter-spacing: 0.1em;
}

.thesis-step h3 {
  margin: 0;
}

.thesis-step p {
  max-width: 65ch;
  margin: 0;
  color: var(--ink-soft);
}

.conversion-strip {
  background:
    radial-gradient(circle at 14% 80%, rgba(83, 231, 255, 0.12), transparent 24rem),
    radial-gradient(circle at 88% 20%, rgba(255, 102, 87, 0.12), transparent 24rem),
    var(--night-2);
}

.conversion-strip .cta-box h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 3.8vw, 3.8rem);
}

body.page-legal main > section:first-child {
  padding-top: clamp(6rem, 11vw, 10rem);
}

body.page-legal h1 {
  max-width: 14ch;
  font-size: clamp(2.2rem, 4vw, 4rem);
}

dl.meta {
  display: grid;
  grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 0.65fr);
  margin: 2rem 0;
  border-top: 1px solid var(--line);
}

dl.meta dt,
dl.meta dd {
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

dl.meta dt {
  color: var(--ink-faint);
  font: 800 0.76rem/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

ul.tight {
  padding-left: 1.2rem;
}

ul.tight li {
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
}

/* Footer */
footer.site {
  padding-block: clamp(3rem, 6vw, 5.2rem);
  border-top: 1px solid var(--line);
  background: var(--night-2);
}

footer.site .wrap::before {
  display: block;
  margin-bottom: 1.8rem;
  color: var(--ink);
  content: "ASKLERA / INFRASTRUCTURE FOR CARE";
  font: 900 clamp(0.92rem, 1.8vw, 1.45rem)/1 var(--font-display);
  letter-spacing: -0.025em;
}

footer.site ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.4rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

footer.site a {
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-decoration: none;
}

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

footer.site p {
  max-width: 62ch;
  margin-bottom: 0;
  font-size: 0.76rem;
}

/* Progressive motion.

   Content availability must never depend on an IntersectionObserver firing.
   A capture tool that does not scroll, a print/PDF export, or an observer that
   simply never fires would otherwise leave whole sections blank. The reveal is
   therefore driven by an animation that ends in the visible state on its own:
   if `is-visible` arrives first the transition takes over, and if nothing
   arrives at all the element still becomes visible after `--reveal-failsafe`.
   The JS adds a matching timeout and a beforeprint handler; this is the
   CSS-side guarantee that survives even when the script is broken. */
.has-js .will-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: reveal-failsafe 1ms linear var(--reveal-failsafe, 2500ms) forwards;
}

@keyframes reveal-failsafe {
  to {
    opacity: 1;
    transform: none;
  }
}

.has-js .will-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms cubic-bezier(0.2, 0.75, 0.25, 1),
    transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.has-js .principle.will-reveal:nth-child(2),
.has-js .card.will-reveal:nth-child(2) {
  transition-delay: 70ms;
}

.has-js .principle.will-reveal:nth-child(3),
.has-js .card.will-reveal:nth-child(3) {
  transition-delay: 140ms;
}

.has-js .principle.will-reveal:nth-child(4),
.has-js .card.will-reveal:nth-child(4) {
  transition-delay: 210ms;
}

/* The photographic assets are dark-only. On the light theme they previously sat
   as hard black rectangles against a near-white page. Rather than fake a light
   variant, they are framed deliberately as dark media panels: inset ring, warmer
   shadow, and a small amount of breathing room so the darkness reads as a choice
   rather than as a rendering fault. */
:root[data-theme="light"] .visual-shell,
:root[data-theme="light"] .hero-visual__frame {
  border: 1px solid rgba(10, 10, 17, 0.16);
  background: #05050a;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 26px 60px rgba(21, 23, 36, 0.22);
}

:root[data-theme="light"] .visual-shell img,
:root[data-theme="light"] .hero-visual__frame img {
  opacity: 0.94;
}

@media (max-width: 1040px) {
  header.site .wrap {
    grid-template-columns: auto 1fr auto;
  }

  nav.site ul {
    gap: 0.85rem;
  }

  nav.site a {
    font-size: 0.76rem;
  }

  .hero--home .wrap,
  .security-layout,
  .sovereignty-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-bottom: 6.5rem;
  }

  .hero--home h1 {
    max-width: 14ch;
  }

  .hero-visual {
    width: min(820px, 100%);
    margin-inline: auto;
  }

  .security-layout .visual-shell {
    max-width: 760px;
  }
}

@media (max-width: 840px) {
  .has-js .menu-toggle {
    display: inline-flex;
  }

  header.site .wrap {
    grid-template-columns: auto 1fr auto;
    min-height: 68px;
  }

  .lang a,
  .theme-toggle,
  .menu-toggle {
    min-height: 44px;
  }

  nav.site {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    max-height: none;
    padding-bottom: 1rem;
  }

  .has-js nav.site {
    display: none;
  }

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

  nav.site ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
  }

  nav.site li {
    border-bottom: 1px solid var(--line);
  }

  nav.site a {
    display: block;
    min-height: 46px;
    padding: 0.9rem 0.35rem;
    font-size: 0.78rem;
  }

  nav.site a::after {
    display: none;
  }

  .section-heading,
  .systems-layout,
  .system-panel__content,
  .status-intro,
  .cta-box {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: start;
  }

  .editorial-intro,
  .thesis-step {
    grid-template-columns: 1fr;
  }

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

  .story-grid > :last-child:nth-child(odd),
  .audience-grid > :last-child:nth-child(odd),
  .moat-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .story-card {
    min-height: 0;
  }

  .story-card__index {
    margin-bottom: 2.5rem;
  }

  .principle-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .principle-row p {
    grid-column: 2;
  }

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

  .pathway-step {
    border-bottom: 1px solid var(--line);
  }

  .pathway-step:nth-child(2n) {
    border-right: 0;
  }

  .pathway-step:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }

  .thesis-step:nth-child(2),
  .thesis-step:nth-child(3) {
    margin-left: 0;
  }

  .intro-statement {
    grid-template-columns: 1fr;
  }

  .proof-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .proof-item:nth-child(2) {
    border-right: 0;
  }

  .proof-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  body.page-standard main > section:first-child::before {
    right: -32%;
    width: 110%;
    opacity: 0.26;
  }

  body.page-standard main > section:first-child {
    min-height: auto;
    padding-top: clamp(4.75rem, 11vw, 6.5rem);
    padding-bottom: clamp(4.5rem, 10vw, 6rem);
  }

  .page-hero__proof {
    gap: 0.5rem;
    margin-top: 1.75rem;
  }

  .manifesto-quote {
    padding: clamp(1.5rem, 5vw, 2.5rem);
  }

  .manifesto-quote footer {
    max-width: 46ch;
    font-size: 0.76rem;
    line-height: 1.55;
  }

  table.status {
    min-width: 680px;
    font-size: 0.94rem;
  }

  table.status th,
  table.status td {
    padding: 0.95rem 0.8rem;
  }

  .scroll-x::before {
    position: sticky;
    z-index: 2;
    left: 0;
    display: inline-flex;
    margin-bottom: 0.65rem;
    padding: 0.38rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    content: "Défilement horizontal →";
    font: 800 0.76rem/1.25 var(--font-mono);
    letter-spacing: 0.06em;
  }

  html[lang="en"] .scroll-x::before {
    content: "Scroll horizontally →";
  }
}

/* Below 700px the data tables stop scrolling sideways and stack instead.

   Horizontal scroll was hiding the column that carries the meaning: on the
   homepage a phone showed "MSSanté — En développement" and clipped
   "homologation ANS et convention opérateur à obtenir" off-screen, so the
   caveats were exactly the part that disappeared. Each cell now carries its
   header inline (data-label, generated at build time from the <th>). */
@media (max-width: 700px) {
  .scroll-x {
    overflow-x: visible;
  }

  .scroll-x::before {
    display: none;
  }

  table.status {
    min-width: 0;
    border-top: 0;
  }

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

  table.status tbody tr {
    display: block;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0 0.2rem;
    border: 1px solid var(--line);
    border-radius: 14px;
  }

  table.status td {
    display: block;
    padding: 0.55rem 0.95rem;
    border-bottom: 0;
  }

  table.status td[data-label]::before {
    display: block;
    margin-bottom: 0.28rem;
    color: var(--ink-faint);
    content: attr(data-label);
    font: 800 0.76rem/1.3 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  table.status td:first-child {
    padding-top: 0.85rem;
    font-size: 1.02rem;
  }

  table.status td:last-child {
    padding-bottom: 0.95rem;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
    line-height: 1.65;
  }

  .wrap {
    width: min(100% - 2rem, var(--shell));
  }

  .theme-toggle__label,
  .menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .theme-toggle,
  .menu-toggle {
    width: 44px;
    justify-content: center;
    padding-inline: 0;
  }

  .lang a {
    padding-inline: 0.72rem;
  }

  h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.45rem);
  }

  h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.65rem);
  }

  section {
    padding-block: clamp(3.75rem, 13vw, 5rem);
  }

  .hero {
    padding-top: 3.25rem;
    padding-bottom: 5.25rem;
  }

  .hero--home .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-visual__frame {
    aspect-ratio: 1.28 / 1;
    border-radius: 18px;
  }

  .hero-visual img {
    object-position: 66% center;
  }

  .principles-grid,
  .grid {
    grid-template-columns: 1fr;
  }

  .story-grid,
  .audience-grid,
  .moat-grid {
    grid-template-columns: 1fr;
  }

  .story-grid > :last-child:nth-child(odd),
  .audience-grid > :last-child:nth-child(odd),
  .moat-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .story-card,
  .refusal,
  .principle,
  .card {
    padding: 1.25rem;
  }

  .story-card__index {
    margin-bottom: 1.75rem;
  }

  .principle-row {
    grid-template-columns: 2.5rem 1fr;
  }

  .principle-row p {
    grid-column: 2;
  }

  .refusal-grid,
  .pathway {
    grid-template-columns: 1fr;
  }

  .pathway-step,
  .pathway-step:nth-child(2n) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .pathway-step:last-child {
    grid-column: auto;
  }

  .pathway-step {
    min-height: 0;
    padding: 1.25rem;
  }

  .pathway-step::before {
    margin-bottom: 2rem;
  }

  .proof-strip {
    grid-template-columns: 1fr;
  }

  .proof-item,
  .proof-item:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .proof-item:last-child {
    border-bottom: 0;
  }

  dl.meta {
    grid-template-columns: 1fr;
  }

  dl.meta dt {
    padding-bottom: 0.25rem;
    border-bottom: 0;
  }

  dl.meta dd {
    padding-top: 0;
  }

  .btn {
    min-height: 54px;
    width: 100%;
    margin-right: 0;
    padding-inline: 1rem;
  }

  .cta-box .btn {
    width: 100%;
  }

  .kicker,
  .eyebrow,
  .section-index {
    max-width: 100%;
    margin-bottom: 1.1rem;
    font-size: 0.76rem;
    line-height: 1.45;
    letter-spacing: 0.12em;
  }

  p.lead {
    font-size: 1.08rem;
    line-height: 1.58;
  }

  .intro-copy,
  .status-intro p {
    font-size: 1rem;
  }

  .hero-meta {
    gap: 0.45rem;
  }

  .hero-meta li,
  .page-hero__proof li {
    line-height: 1.4;
  }

  .status-signal {
    max-width: 100%;
    border-radius: var(--radius-sm);
    line-height: 1.45;
    white-space: normal;
  }

  .system-tab {
    min-height: 52px;
    padding-block: 0.95rem;
  }

  .system-panel__content {
    gap: 0.75rem;
  }

  .visual-shell {
    border-radius: 18px;
  }

  .note {
    padding: 1.15rem 1.15rem 1.15rem 1.3rem;
  }

  table.status {
    font-size: 0.9rem;
  }

  footer.site {
    padding-block: 3rem;
  }

  footer.site ul {
    gap: 0.2rem 1rem;
  }

  footer.site a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 0.82rem;
  }

  footer.site p {
    font-size: 0.8rem;
    line-height: 1.65;
  }
}

@media (max-width: 460px) {
  header.site .wrap {
    gap: 0.55rem;
  }

  .header-actions {
    gap: 0.35rem;
  }

  .lang a {
    padding-inline: 0.65rem;
  }

  nav.site ul {
    grid-template-columns: 1fr;
  }

  .brand {
    gap: 0.45rem;
    font-size: 0.76rem;
  }

  h1 {
    font-size: clamp(2.15rem, 10vw, 2.75rem);
  }

  h2,
  body.page-standard h2,
  body.page-legal h2 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .intro-statement .statement,
  .cta-box h2,
  .conversion-strip .cta-box h2,
  .manifesto-quote p {
    font-size: clamp(1.7rem, 7.8vw, 2.2rem);
  }

  .page-hero__proof {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-hero__proof li {
    width: 100%;
  }

  .hero-meta li {
    width: 100%;
  }

  .proof-item {
    padding: 1.3rem 0.25rem;
  }

  .principle-row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .manifesto-quote::before {
    font-size: 6rem;
  }

  .visual-label {
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: calc(100% - 1.5rem);
    font-size: 0.76rem;
    white-space: normal;
  }

}

@media (max-width: 360px) {
  .wrap {
    width: min(100% - 1.5rem, var(--shell));
  }

  .brand {
    font-size: 0.76rem;
  }

  .brand::before {
    width: 16px;
    height: 16px;
  }

  .brand::after {
    top: 6px;
    left: 5px;
  }

  .lang a {
    padding-inline: 0.55rem;
    font-size: 0.76rem;
  }

  .theme-toggle,
  .menu-toggle {
    width: 42px;
    min-height: 42px;
  }

  h1 {
    font-size: 2rem;
  }

  h2,
  body.page-standard h2,
  body.page-legal h2 {
    font-size: 1.7rem;
  }

  .btn {
    font-size: 0.76rem;
    letter-spacing: 0.05em;
  }
}

@media (max-height: 650px) and (orientation: landscape) {
  .hero,
  body.page-standard main > section:first-child,
  body.page-legal main > section:first-child {
    min-height: auto;
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .principle:hover,
  .card:hover {
    border-color: var(--line);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 52%),
      var(--surface);
    box-shadow: none;
    transform: none;
  }

  .story-card:hover {
    border-color: var(--line);
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--card-accent, var(--blue)) 10%, transparent), transparent 44%),
      var(--surface);
    box-shadow: none;
    transform: none;
  }
}

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

  .has-js .will-reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  /* Reveal state must never survive into a printed or saved page. Investors,
     public buyers and the Ordre routinely save a supplier site as PDF; before
     this reset, any section that had not yet been scrolled into view was
     exported blank. */
  .has-js .will-reveal,
  .has-js .will-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  :root,
  :root[data-theme] {
    color-scheme: light;
    --ink: #000;
    --ink-soft: #222;
    --ink-faint: #555;
    --night: #fff;
    --night-2: #fff;
    --surface: #fff;
    --surface-2: #f2f2f2;
    --line: #bbb;
  }

  header.site,
  .scroll-progress,
  .hero-rail,
  .theme-toggle,
  .menu-toggle,
  .btn {
    display: none !important;
  }

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

  body::before,
  body.page-standard main > section:first-child::before {
    display: none;
  }

  section {
    padding-block: 2rem;
  }

  .note,
  .card,
  .principle,
  table.status {
    break-inside: avoid;
  }
}

/* ==========================================================================
   ACCESSIBILITY LAYER
   Added 2026-08-07. Three opt-in surfaces on top of the base design:
   (1) a colour-vision-deficiency ("daltonien") palette,
   (2) a user motion switch that forces reduced motion regardless of the OS,
   (3) a Windows High-Contrast / forced-colours fallback.
   All are driven by data-* attributes on <html> set by site.js, so they work
   without JS falling back to the OS preferences alone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   (1) Colour-vision-deficiency palette — data-palette="cvd".
   The base brand accents (acid/cyan/violet/coral) are remapped to a
   colour-blind-safe set derived from the Okabe–Ito palette, chosen so the four
   decorative accents stay mutually distinguishable under deutan/protan/tritan
   vision. Meaning is never carried by colour alone on this site (status badges
   also use text + a dashed/solid border), so this is about making the
   decorative layer legible, not about re-encoding state.
   -------------------------------------------------------------------------- */
:root[data-palette="cvd"] {
  --acid: #ffd21e;        /* yellow — primary highlight, high luminance on dark */
  --acid-soft: #ffe57a;
  --blue: #4a7bff;
  --blue-bright: #8fb0ff;
  --violet: #cc79a7;      /* reddish-purple */
  --cyan: #56b4e9;        /* sky-blue */
  --coral: #ff8c42;       /* orange in place of red — separable from yellow-green */
  --danger-soft: #ffc38a;
}

:root[data-theme="light"][data-palette="cvd"] {
  --acid: #5a4a00;        /* dark olive — ~9:1 on white */
  --acid-soft: #3f3400;
  --blue: #0053c7;
  --blue-bright: #003b96;
  --violet: #8e3b6b;
  --cyan: #005b82;
  --coral: #9a4a00;       /* dark orange */
  --danger-soft: #6e3500;
}

/* --------------------------------------------------------------------------
   (2) User-forced reduced motion — data-motion="reduced".
   Mirrors the @media (prefers-reduced-motion: reduce) rules so a visitor can
   silence motion from the page itself, even when the OS flag is not set.
   -------------------------------------------------------------------------- */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

:root[data-motion="reduced"] .has-js .will-reveal {
  opacity: 1;
  transform: none;
}

/* The hero ticker is decorative (aria-hidden) and its content is duplicated in
   the accessible .hero-meta list, but WCAG 2.2.2 requires a pause mechanism for
   any motion lasting > 5s for ALL users — not only those with the OS flag. It
   now pauses on hover/focus, and stops entirely under either reduced-motion
   signal. */
.hero-rail:hover .hero-rail__track,
.hero-rail:focus-within .hero-rail__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero-rail__track {
    animation: none !important;
    transform: none !important;
  }
}

:root[data-motion="reduced"] .hero-rail__track {
  animation: none !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   (3) Windows High-Contrast Mode / forced-colours fallback.
   `.gradient-text` renders load-bearing H1 words as transparent text clipped to
   a gradient; in forced-colours the gradient is stripped and the text would
   vanish. Restore a solid system colour, drop decorative glow, and give the
   selected tab and badges a non-colour outline.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    filter: none;
  }

  .neon,
  .neon-cyan,
  .neon-violet,
  .neon-coral {
    text-shadow: none;
  }

  .system-tab[aria-selected="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .badge {
    border-color: CanvasText;
  }

  .badge::before {
    forced-color-adjust: none;
  }

  :where(a, button, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
  }

  .scroll-progress {
    background: Highlight;
  }
}

/* --------------------------------------------------------------------------
   Accessibility toggle controls (palette + motion), styled to match the pill
   controls already in the header. site.js injects them next to the theme
   toggle; without JS they simply never appear and the OS preferences govern.
   -------------------------------------------------------------------------- */
.pref-toggle__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  font: 800 0.9rem/1 var(--font-mono);
  color: var(--acid);
}

.pref-toggle[aria-pressed="true"] {
  border-color: var(--acid);
  color: var(--ink);
  background: color-mix(in srgb, var(--acid) 12%, var(--surface));
}

.pref-toggle[aria-pressed="true"] .pref-toggle__glyph {
  color: var(--acid);
}

@media (forced-colors: active) {
  .pref-toggle[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -3px;
  }
}