/* Intelligent Products. Layout: black and charcoal fields for claims and the sovereign
   story, grey-and-white pages for the platform, very large regular-weight type, our own
   data as imagery. Teal is kept for links between graphs, highlights and evidence.
   Type is nation.dev's: IBM Plex Sans and IBM Plex Mono (nation.dev serves them as
   Vision Sans and Vision Mono). Each page commits to one look; there is no light/dark switch. */
:root {
  --night: #0b0d10;
  --night-2: #13171b;
  --char: #1c1f22;
  --char-2: #262a2e;
  --night-rule: #2b3137;
  --night-ink: #f1f3f4;
  --night-muted: #9ba4ab;
  --paper: #eff1f2;
  --white: #ffffff;
  --ink: #0b0d10;
  --ink-2: #39414a;
  --muted: #4d565e;
  --dim: #6b747c;
  --rule: #d5dadd;
  --teal: #1fa595;
  --teal-ink: #0f766b;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter-l: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.t-dark { background: var(--night); color: var(--night-ink); color-scheme: dark; }
.t-char { background: var(--char); color: var(--night-ink); color-scheme: dark; }
.t-light { background: var(--paper); color: var(--ink); }
body.menu-open { overflow: hidden; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; }

.wrap { max-width: 84rem; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: 0.6rem 1rem; border-radius: 4px;
  background: var(--teal); color: var(--night); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }
.label { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Section surfaces */
.s-dark { background: var(--night); color: var(--night-ink); }
.s-char { background: var(--char); color: var(--night-ink); }
.s-light { background: var(--paper); color: var(--ink); }
.s-white { background: var(--white); color: var(--ink); }
.s-dark .muted, .s-char .muted, .t-dark .hero .muted, .t-char .hero .muted { color: var(--night-muted); }
.s-light .muted, .s-white .muted { color: var(--muted); }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); scroll-margin-top: 4.5rem; }
.section.tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 2.75rem; padding: 0.6rem 1.15rem; border-radius: 4px; border: 1px solid currentColor;
  background: transparent; color: inherit; font: 500 1.02rem/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
}
.btn-solid-light { background: var(--night-ink); border-color: var(--night-ink); color: var(--night); }
.btn-solid-light:hover { background: var(--white); border-color: var(--white); }
.btn-solid-dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-solid-dark:hover { background: #22282e; border-color: #22282e; }
.btn-line-dark { border-color: var(--night-rule); color: var(--night-ink); }
.btn-line-dark:hover { border-color: var(--night-ink); }
.btn-line-light { border-color: var(--rule); color: var(--ink); }
.btn-line-light:hover { border-color: var(--ink); }
.arrow-link {
  display: inline-flex; align-items: baseline; gap: 0.45rem; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 0.15rem;
}
.arrow-link::before { content: "\21B3"; font-family: var(--font-mono); font-size: 0.9em; }
.arrow-link:hover { color: var(--teal); }
.s-light .arrow-link:hover, .s-white .arrow-link:hover { color: var(--teal-ink); }
.hl { color: var(--teal); }
.s-light .hl, .s-white .hl, .t-light .hero .hl { color: var(--teal-ink); }

/* Header */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  border-bottom: 1px solid var(--hrule);
  background: var(--hbg); background: color-mix(in srgb, var(--hbg) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--hfg);
}
.t-dark, .t-char { --hbg: var(--night); --hfg: var(--night-ink); --hrule: var(--night-rule); }
.t-char { --hbg: var(--char); }
.t-light { --hbg: var(--paper); --hfg: var(--ink); --hrule: var(--rule); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 51; background: var(--hbg); }
.head-row { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; margin-right: auto; color: inherit; text-decoration: none; font-size: 1.12rem; font-weight: 500; letter-spacing: -0.01em; }
.mark { width: 1.6rem; height: 1.6rem; flex: none; }
.mark .m-bg { fill: var(--teal); }
.mark .m-line { fill: none; stroke: var(--night); stroke-width: 1.8; stroke-linejoin: round; }
.mark .m-dot { fill: var(--night); }
.head-cta { min-height: 2.6rem; padding-block: 0.4rem; font-size: 1rem; }
.t-light .head-cta { border-color: var(--ink); }
.t-dark .head-cta, .t-char .head-cta { border-color: var(--night-ink); }
.menu-btn { min-height: 2.6rem; padding: 0.4rem 0.8rem; gap: 0.6rem; font-size: 1rem; }
.t-light .menu-btn { border-color: var(--rule); }
.t-dark .menu-btn, .t-char .menu-btn { border-color: var(--night-rule); }
.menu-btn .bars { display: inline-grid; gap: 4px; width: 16px; }
.menu-btn .bars i { display: block; height: 1.5px; background: currentColor; }
@media (max-width: 34rem) { .head-cta { display: none; } }

/* Full-screen menu */
.menu-layer {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: var(--char); color: var(--night-ink);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.menu-layer[hidden] { display: none; }
.menu-top { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; }
.menu-close { min-height: 2.45rem; padding: 0.4rem 0.9rem; border-color: var(--night-rule); }
.menu-close:hover { border-color: var(--night-ink); }
.menu-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); padding-block: 2rem 4rem; }
.menu-col { border-top: 1px solid var(--night-ink); padding-top: 1.1rem; min-width: 0; }
.menu-col + .menu-col { border-top-color: var(--night-rule); }
.menu-col .col-head { display: flex; justify-content: space-between; gap: 1rem; color: var(--night-muted); margin-bottom: 1.5rem; }
.menu-nav { list-style: none; display: grid; gap: 0.15rem; }
.menu-nav a { display: inline-flex; align-items: baseline; gap: 0.6rem; text-decoration: none; font-size: clamp(1.7rem, 1rem + 1.6vw, 2.5rem); line-height: 1.25; letter-spacing: -0.02em; }
.menu-nav a:hover, .menu-nav a[aria-current="page"] { color: var(--teal); }
.menu-nav .sub a::before { content: "\21B3"; font-family: var(--font-mono); font-size: 0.6em; color: var(--night-muted); transform: translateY(-0.1em); }
.menu-card { display: grid; gap: 0.9rem; }
.menu-card img { border-radius: 4px; background: var(--night); width: 100%; }
.menu-figs { font-size: 1.05rem; line-height: 1.55; color: var(--night-muted); }
.menu-figs b { display: block; margin-bottom: 0.15rem; color: var(--night-ink); font-weight: 400; font-size: 2rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.menu-list { list-style: none; display: grid; gap: 0; }
.menu-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--night-rule); }
.menu-list a { text-decoration: none; font-size: 1.2rem; }
.menu-list a:hover { color: var(--teal); }
.menu-list .state { color: var(--night-muted); }
.menu-quick { margin-top: 2.25rem; display: grid; gap: 0.5rem; }
.menu-quick a { text-decoration: none; }
.menu-quick a:hover { color: var(--teal); }
@media (max-width: 60rem) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* Heroes */
.hero { padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero .label { color: inherit; opacity: 0.75; }
.t-light .hero .label { color: var(--muted); opacity: 1; }
.hero h1 { font-size: clamp(2.55rem, 0.9rem + 6.2vw, 6.6rem); line-height: 0.98; letter-spacing: -0.042em; margin-top: 1rem; }
.hero .lead { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 40ch; font-size: clamp(1.22rem, 1.06rem + 0.6vw, 1.6rem); line-height: 1.5; }
.t-dark .hero .lead, .t-char .hero .lead { color: var(--night-muted); }
.t-light .hero .lead { color: var(--ink-2); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }
.hero-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-split > * { min-width: 0; }
.hero-art { border-radius: 6px; overflow: hidden; }
.hero-art img { width: 100%; }
.hero-art.boxed { background: var(--night); }
.hero-wide-art { margin-top: clamp(2.5rem, 5vw, 4rem); border-radius: 6px; overflow: hidden; background: var(--night); }
@media (max-width: 60rem) {
  .hero-split { grid-template-columns: minmax(0, 1fr); }
}

/* Sub-navigation for platform pages */
.subnav { position: sticky; top: calc(4rem + env(safe-area-inset-top, 0px)); z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule); }
.subnav ul { list-style: none; display: flex; gap: 1.75rem; overflow-x: auto; scrollbar-width: none; min-height: 3rem; align-items: center; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { white-space: nowrap; text-decoration: none; color: var(--muted); font-size: 1.02rem; }
.subnav a:hover { color: var(--ink); }

/* Section heads */
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem clamp(2rem, 5vw, 5rem); padding-top: 1.75rem; border-top: 1px solid currentColor; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.s-dark .split-head, .s-char .split-head { border-top-color: var(--night-rule); }
.s-light .split-head, .s-white .split-head { border-top-color: var(--rule); }
.split-head h2 { font-size: clamp(2rem, 1rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; }
.split-head .lead { font-size: clamp(1.25rem, 1.08rem + 0.6vw, 1.7rem); line-height: 1.42; }
.s-dark .split-head .lead, .s-char .split-head .lead { color: var(--night-ink); }
.split-head .label { grid-column: 1 / -1; }
.s-dark .split-head .label, .s-char .split-head .label { color: var(--night-muted); }
.s-light .split-head .label, .s-white .split-head .label { color: var(--muted); }
@media (max-width: 54rem) { .split-head { grid-template-columns: minmax(0, 1fr); } }

.statement { font-size: clamp(1.8rem, 0.9rem + 3.1vw, 3.85rem); line-height: 1.1; letter-spacing: -0.032em; max-width: 22em; text-wrap: pretty; }
.statement .dim { color: var(--dim); }
.statement.center { margin-inline: auto; text-align: center; }
.provocation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.provocation h2 { grid-column: 1 / -1; font-size: clamp(2.3rem, 1rem + 4.6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.provocation .body { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 5vw, 5rem); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem); line-height: 1.42; }
@media (max-width: 54rem) { .provocation, .provocation .body { grid-template-columns: minmax(0, 1fr); } }

/* Featured image cards */
.featured { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; }
.feature { display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background: var(--night-2); min-width: 0; text-decoration: none; color: var(--night-ink); border: 1px solid var(--night-rule); }
.feature:hover { border-color: var(--teal); }
.feature .pic { aspect-ratio: 4 / 3; background: var(--night); display: grid; place-items: center; overflow: hidden; }
.feature .pic img { width: 100%; height: 100%; object-fit: cover; }
.feature .pic.contain img { object-fit: contain; padding: 0.75rem; }
.feature .pic.light { background: var(--white); }
.feature .txt { display: grid; gap: 0.4rem; padding: 1rem 1.1rem 1.2rem; }
.feature .txt .label { color: var(--night-muted); }
.feature .txt strong { font-weight: 400; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.feature .txt strong::after { content: " \2197"; font-size: 0.8em; color: var(--teal); }
@media (max-width: 72rem) { .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .featured { grid-template-columns: minmax(0, 1fr); } }

/* The core list */
.core-list { list-style: none; border-bottom: 1px solid var(--rule); }
.core-item { border-top: 1px solid var(--rule); }
.core-item a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 2rem; padding-block: 1.6rem 2rem; text-decoration: none; color: inherit; }
.core-item h3 { font-size: clamp(2.4rem, 1.1rem + 4.6vw, 5.4rem); line-height: 0.95; letter-spacing: -0.045em; transition: color 0.15s; }
.core-item a:hover h3 { color: var(--teal-ink); }
.core-item .kind { color: var(--muted); padding-top: 0.6rem; white-space: nowrap; }
.core-item .desc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; align-items: baseline; }
.core-item .desc p { max-width: 54ch; font-size: clamp(1.15rem, 1.06rem + 0.3vw, 1.35rem); color: var(--ink-2); }
.core-item .go { font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); white-space: nowrap; }
.core-item a:hover .go { color: var(--teal-ink); }
@media (max-width: 40rem) { .core-item a { grid-template-columns: minmax(0, 1fr); } .core-item .kind { padding-top: 0; } }

.fig-note { margin-top: 1.25rem; font-size: 1.02rem; line-height: 1.55; max-width: 72ch; }
.s-dark .fig-note, .s-char .fig-note { color: var(--night-muted); }
.s-light .fig-note, .s-white .fig-note { color: var(--muted); }

/* Vertical tiles */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.tile { display: flex; flex-direction: column; min-width: 0; background: var(--white); color: var(--ink); border-radius: 6px; overflow: hidden; }
.tile .pic { background: var(--night); aspect-ratio: 28 / 15; display: grid; }
.tile .pic img { width: 100%; height: 100%; object-fit: cover; }
.tile .pic .realised { display: grid; place-content: center; gap: 0.35rem; text-align: center; color: var(--night-ink); font-family: var(--font-mono); }
.tile .pic .realised b { font-weight: 400; font-size: 1.4rem; letter-spacing: 0.16em; }
.tile .pic .realised span { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--night-muted); text-transform: uppercase; }
.tile .body { display: flex; flex-direction: column; flex: 1; gap: 0.7rem; padding: 1.5rem 1.6rem 1.6rem; }
.tile .label { color: var(--muted); }
.tile h3 { font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; }
.tile p:not(.label) { color: var(--ink-2); font-size: 1.12rem; }
.tile .foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.88rem; }
.tile .foot a { text-underline-offset: 0.2em; }
.tile .foot .none { color: var(--muted); }
.state { display: inline-flex; align-items: center; gap: 0.45rem; }
.state::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--teal); flex: none; }
.state.building::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--teal); }
.state.realised::before { border-radius: 1px; background: var(--dim); }
@media (max-width: 72rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* Steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid var(--night-rule); }
.s-light .steps, .s-white .steps { border-top-color: var(--rule); }
.steps li { display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem 1.4rem 1.75rem 0; min-width: 0; }
.steps li + li { padding-left: 1.4rem; border-left: 1px solid var(--night-rule); }
.s-light .steps li + li, .s-white .steps li + li { border-left-color: var(--rule); }
.steps .n { font-family: var(--font-mono); font-size: 0.88rem; color: var(--teal); }
.s-light .steps .n, .s-white .steps .n { color: var(--teal-ink); }
.steps h3 { font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; }
.steps p { font-size: 1.1rem; }
.s-dark .steps p, .s-char .steps p { color: var(--night-muted); }
.s-light .steps p, .s-white .steps p { color: var(--ink-2); }
@media (max-width: 60rem) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li, .steps li + li { padding: 1.35rem 0; border-left: 0; border-top: 1px solid var(--night-rule); }
  .s-light .steps li, .s-white .steps li { border-top-color: var(--rule); }
  .steps li:first-child { border-top: 0; }
}

/* Numbered cards (dark) */
.ncards { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1rem; }
.ncard { display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1.25rem 1.25rem 1.4rem; border-radius: 4px; background: var(--char-2); color: var(--night-ink); text-decoration: none; }
.s-dark .ncard { background: var(--night-2); border: 1px solid var(--night-rule); }
a.ncard:hover { outline: 1px solid var(--teal); }
.ncard .n { font-family: var(--font-mono); font-size: 0.9rem; color: var(--teal); }
.ncard strong { font-weight: 400; font-size: clamp(1.45rem, 1.1rem + 0.8vw, 1.85rem); line-height: 1.1; letter-spacing: -0.025em; }
.ncard p { color: var(--night-muted); font-size: 1.08rem; }
.ncard .go { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--night-rule); font-size: 1.04rem; }
.ncard .go::after { content: " \2192"; color: var(--teal); }
@media (max-width: 72rem) { .ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ncards { grid-template-columns: minmax(0, 1fr); } }

/* White panels (light pages) */
.panels { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 1rem; }
.panel { background: var(--white); border-radius: 6px; padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.s-white .panel { background: var(--paper); }
.panel h3 { font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.65rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--teal-ink); }
.panel p { color: var(--ink-2); }
.panel .more { margin-top: auto; padding-top: 0.5rem; }
@media (max-width: 54rem) { .panels { grid-template-columns: minmax(0, 1fr); } }

/* Tabs */
.tabs { margin-top: 0.5rem; }
.tablist { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.25rem; }
.tablist [role="tab"] {
  min-height: 2.6rem; padding: 0.45rem 1.4rem; border-radius: 999px; border: 1px solid var(--night-ink);
  background: transparent; color: var(--night-ink); font: 400 1.08rem var(--font-sans); cursor: pointer;
}
.tablist [role="tab"][aria-selected="true"] { background: var(--night-ink); color: var(--night); }
.tabpanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); }
.tabpanel h3 { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.8rem); line-height: 1.05; letter-spacing: -0.03em; }
.tabpanel .intro { margin-top: 1rem; color: var(--night-muted); font-size: 1.22rem; max-width: 40ch; }
.tabpanel ul { list-style: none; border-top: 1px solid var(--night-rule); }
.tabpanel li {
  position: relative; padding: 1.15rem 0 1.15rem 1.5em; border-bottom: 1px solid var(--night-rule);
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty;
}
.tabpanel li::before {
  content: ""; position: absolute; left: 0.3em; top: calc(1.15rem + 0.33em); width: 0.3em; height: 0.58em;
  border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.no-js .tablist { display: none; }
.no-js .tabpanel[hidden] { display: grid; margin-top: 3rem; }
@media (max-width: 54rem) { .tabpanel { grid-template-columns: minmax(0, 1fr); } }
/* Wide screens: the points start level with the tab buttons, so no gap opens under the header.
   The open panel spans both rows of the tab block and shares its tracks (subgrid): its title sits
   under the buttons, its points fill the right column. Without JS every panel shows, so this stays off. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 54.01rem) {
    html:not(.no-js) .tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
    html:not(.no-js) .tablist { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
    html:not(.no-js) .tabpanel { grid-column: 1 / -1; grid-row: 1 / span 2; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 0 clamp(2rem, 5vw, 5rem); }
    html:not(.no-js) .tabpanel > div { grid-column: 1; grid-row: 2; }
    html:not(.no-js) .tabpanel > ul { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  }
}

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 1.06rem; }
th, td { text-align: left; vertical-align: top; padding: 0.85rem 0.6rem; border-bottom: 1px solid var(--rule); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { padding-top: 0; font: 500 0.8rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-dark table th, .s-dark table td, .s-char table th, .s-char table td { border-bottom-color: var(--night-rule); }
.s-dark thead th, .s-char thead th { color: var(--night-muted); }
.own-table td:first-child { font-size: 1.2rem; }
.own-table .who { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.own-table .who.owned { color: var(--teal); }
.own-table .who.used { color: var(--night-muted); }
.s-dark .own-table td:last-child, .s-char .own-table td:last-child { color: var(--night-muted); }

/* Lists of rules */
.rules { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.rules li { display: grid; gap: 0.3rem; align-content: start; padding-block: 1.1rem; border-top: 1px solid var(--rule); }
.s-dark .rules li, .s-char .rules li { border-top-color: var(--night-rule); }
.rules strong { font-weight: 600; }
.rules span { color: var(--ink-2); }
.s-dark .rules span, .s-char .rules span { color: var(--night-muted); }
.rules em { font-style: normal; font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); }
.s-dark .rules em, .s-char .rules em { color: var(--night-muted); }
@media (max-width: 44rem) { .rules { grid-template-columns: minmax(0, 1fr); } }

/* Attribute anatomy */
.anatomy { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.anatomy li { background: var(--white); border-radius: 6px; padding: 1.1rem 1.1rem 1.3rem; display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.anatomy .label { color: var(--teal-ink); }
.anatomy strong { font-weight: 400; font-size: 1.5rem; letter-spacing: -0.02em; }
.anatomy p { color: var(--ink-2); font-size: 1.06rem; }
@media (max-width: 64rem) { .anatomy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .anatomy { grid-template-columns: minmax(0, 1fr); } }

/* Figures */
.figs-3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.figs-3 figure { display: grid; gap: 0.6rem; min-width: 0; }
.figs-3 img { border-radius: 6px; width: 100%; }
.figs-3 figcaption { font-size: 1.02rem; color: var(--muted); }
@media (max-width: 54rem) { .figs-3 { grid-template-columns: minmax(0, 1fr); } }
.flow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.96rem; }
.flow li { padding: 0.55rem 0.8rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--white); }
.flow li.arrow { border: 0; background: none; padding: 0; color: var(--teal-ink); }
.flow li.alt { border-color: var(--teal-ink); color: var(--teal-ink); }

/* Vertical feature rows */
.vrow { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.vrow:first-of-type { border-top: 0; padding-top: 0; }
.vrow > * { min-width: 0; }
.vrow .pic { border-radius: 6px; overflow: hidden; background: var(--night); }
.vrow .pic .realised { aspect-ratio: 32 / 15; display: grid; place-content: center; gap: 0.35rem; text-align: center; color: var(--night-ink); font-family: var(--font-mono); }
.vrow .pic .realised b { font-weight: 400; font-size: 1.8rem; letter-spacing: 0.16em; }
.vrow .pic .realised span { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--night-muted); text-transform: uppercase; }
.vrow .txt { display: grid; gap: 1rem; }
.vrow h2 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; }
.vrow .meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--font-mono); font-size: 0.92rem; color: var(--muted); }
.vrow .lede { font-size: 1.3rem; color: var(--ink-2); max-width: 46ch; }
.vrow dl { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.vrow dl div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.35rem 1.5rem; padding-block: 0.85rem; border-bottom: 1px solid var(--rule); }
.vrow dt { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; }
.vrow dd { color: var(--ink-2); }
@media (max-width: 60rem) { .vrow { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .vrow dl div { grid-template-columns: minmax(0, 1fr); } }

/* Big closing band */
.closer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; }
.closer h2 { font-size: clamp(2.4rem, 1.1rem + 4.6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.045em; }
.closer .side { display: grid; gap: 1.25rem; }
.closer .side p { font-size: 1.25rem; }
.s-dark .closer .side p, .s-char .closer .side p { color: var(--night-muted); }
@media (max-width: 54rem) { .closer { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 5rem; align-items: start; }
.contact-grid > * { min-width: 0; }
.contact-grid h2 { font-size: clamp(2.6rem, 1.1rem + 4.8vw, 5.6rem); line-height: 0.98; letter-spacing: -0.045em; margin-top: 1rem; }
.audiences { list-style: none; border-top: 1px solid var(--rule); }
.audiences li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0.35rem 2rem; padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.audiences h3 { font-size: 1.22rem; font-weight: 500; }
.audiences p { color: var(--ink-2); }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }
.btn-mail { font-family: var(--font-mono); font-weight: 500; }
.copy-status { font-size: 1rem; color: var(--muted); }
@media (max-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .audiences li { grid-template-columns: minmax(0, 1fr); } }

/* Footer */
.site-foot { background: var(--night); color: var(--night-muted); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; font-size: 1.02rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 2rem 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--night-rule); }
.foot-grid > * { min-width: 0; }
.foot-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--night-ink); font-weight: 500; font-size: 1.12rem; text-decoration: none; }
.foot-grid .tag { margin-top: 1rem; max-width: 30ch; }
.foot-grid h2 { font: 500 0.82rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); margin-bottom: 1rem; }
.foot-grid ul { list-style: none; display: grid; gap: 0.55rem; }
.foot-grid a { color: var(--night-ink); text-decoration: none; overflow-wrap: anywhere; }
.foot-grid a:hover { color: var(--teal); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2.5rem; padding-top: 1.5rem; font-size: 0.96rem; }
.foot-bottom p { max-width: 62ch; }
@media (max-width: 75rem) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Page-level variants */
.featured > li, .ncards > li { display: flex; }
.feature, .ncards > li > .ncard { flex: 1; }
.hero.compact h1 { font-size: clamp(2.4rem, 1rem + 4.2vw, 4.6rem); }
.hero-split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.steps.six h3 { font-size: 1.2rem; }
.hero-wide-art.narrow { max-width: 62rem; margin-inline: auto; }
.figs-3 li { min-width: 0; }
@media (max-width: 60rem) { .hero-split.even { grid-template-columns: minmax(0, 1fr); } }

/* Hidden means hidden, even for elements that set their own display. Without JS every tab panel shows. */
[hidden] { display: none !important; }
.no-js .tabpanel[hidden] { display: grid !important; margin-top: 3rem; }

/* Five-item grids: let the column count follow the width so no card sits alone in a row. */
@media (max-width: 64rem) { .anatomy { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
@media (max-width: 72rem) { .ncards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
@media (max-width: 36rem) { .anatomy, .ncards { grid-template-columns: minmax(0, 1fr); } }

/* The two graphs: one count, two cards, joined by shared attributes (teal: links between graphs). */
.graph-pair { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem minmax(0, 1fr); align-items: stretch; }
.graph-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 6px; background: var(--paper); color: var(--ink); }
.s-light .graph-card { background: var(--white); }
.graph-card:hover { outline: 1px solid var(--teal-ink); }
.gc-pic { background: var(--night); }
.gc-pic img { width: 100%; }
.gc-body { display: flex; flex-direction: column; gap: 0.9rem; flex: 1; padding: clamp(1.25rem, 3vw, 2rem); }
.gc-body .label { color: var(--muted); }
.gc-body h3 { font-size: clamp(2.1rem, 1rem + 2.8vw, 3.6rem); line-height: 0.98; letter-spacing: -0.04em; }
.gc-body h3 a { color: inherit; text-decoration: none; }
.gc-body h3 a::after { content: ""; position: absolute; inset: 0; }
.graph-card:hover h3 { color: var(--teal-ink); }
.gc-body > p:not(.label):not(.go) { max-width: 52ch; font-size: clamp(1.14rem, 1.05rem + 0.3vw, 1.32rem); color: var(--ink-2); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { padding: 0.35rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font: 500 0.8rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.s-light .chips li { background: var(--paper); }
.gc-body .go { margin-top: auto; padding-top: 0.25rem; font-family: var(--font-mono); font-size: 0.92rem; color: var(--muted); }
.gc-body .go::after { content: " \2192"; }
.graph-card:hover .go { color: var(--teal-ink); }
.graph-join { position: relative; display: grid; place-items: center; }
.graph-join::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--teal-ink); }
.graph-join span {
  position: relative; writing-mode: vertical-rl; transform: rotate(180deg); padding: 0.85rem 0.3rem; white-space: nowrap;
  background: var(--white); border: 1px solid var(--teal-ink); border-radius: 999px; color: var(--teal-ink);
  font: 500 0.8rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.s-light .graph-join span { background: var(--paper); }
@media (max-width: 60rem) {
  .graph-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 3.5rem auto; }
  .graph-join::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px dashed var(--teal-ink); }
  .graph-join span { writing-mode: horizontal-tb; transform: none; padding: 0.3rem 0.8rem; }
}
.featured.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 54rem) { .featured.three { grid-template-columns: minmax(0, 1fr); } }
.hero-wide-art.square { max-width: 42rem; margin-inline: auto; }

/* Images always fill their frame (a picture element is inline by default). */
picture { display: block; }
.hero-wide-art img, .hero-wide-art picture, .hero-art picture, .gc-pic picture { width: 100%; }

/* Feature headers (home, EU-sovereign AI, agents, partners): the claim on the left, a picture or the
   model on the right, so no header is all text beside an empty half. The headline steps down a size
   to keep its lines whole in half the width. */
.hero-feature h1 { font-size: clamp(2.55rem, 0.9rem + 4.4vw, 5.1rem); }
/* Stacked on tablets, the header picture keeps a readable size instead of filling the width. */
@media (max-width: 60rem) { .hero-feature .hero-art { max-width: 40rem; } }
.steps.stacked { grid-template-columns: minmax(0, 1fr); }
.steps.stacked li, .steps.stacked li + li { padding: 1.35rem 0; border-left: 0; border-top: 1px solid var(--night-rule); }
.s-light .steps.stacked li, .s-white .steps.stacked li { border-top-color: var(--rule); }
.steps.stacked li:first-child { border-top: 0; }

/* Verticals header: the four verticals as an index, each a jump to its row. */
.hero-split.index-right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 60rem) { .hero-split.index-right { grid-template-columns: minmax(0, 1fr); } }
.v-index { list-style: none; border-top: 1px solid var(--ink); }
.v-index li { border-bottom: 1px solid var(--rule); }
.v-index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1.5rem; align-items: baseline; padding-block: 1rem 1.15rem; color: inherit; text-decoration: none; }
.v-index .v-name { font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; }
.v-index .v-kind { grid-column: 1; font: 500 0.82rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.v-index .state { grid-column: 2; grid-row: 1; font: 500 0.86rem var(--font-mono); color: var(--muted); }
.v-index a:hover .v-name { color: var(--teal-ink); }

/* The full stack, labelled, between the own-vs-use heading and its table. */
.own-stack { margin-block: 0 clamp(2.5rem, 5vw, 4rem); }

/* An odd last rule spans the row instead of sitting alone beside an empty cell. */
.rules li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Legends for the graph images, as page text so they stay readable at any size. */
.graph-legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; padding: 0.9rem 1.2rem 1.1rem; background: var(--night); color: var(--night-muted); font: 500 0.82rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.graph-legend > span { display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; }
.graph-legend .lg { display: inline-block; flex: none; }
.lg-step { width: 1.3em; height: 0.9em; border: 1.5px solid var(--teal); border-radius: 3px; background: #13171b; }
.lg-actor { width: 1.3em; height: 0.9em; border: 1.5px solid var(--night-ink); border-radius: 999px; }
.lg-asset { width: 1.3em; height: 0.9em; border: 1.5px dashed #858e96; border-radius: 1px; }
.lg-loop { width: 1.6em; height: 0; border-top: 2px dashed #7cc4b9; }
.lg-inv { width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgb(31 165 149 / 0.18); }
.lg-co { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--night-ink); }
.lg-link { width: 1.6em; height: 0; border-top: 1px solid #5a646c; }

/* Where we stand: EU-sovereign, GDPR compliant, Stockholm. A short strip of commitments under a hero. */
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0.65rem 2rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); font: 500 0.86rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.trust li { display: inline-flex; align-items: center; gap: 0.7rem; }
.trust li::before { content: ""; flex: none; width: 0.36rem; height: 0.7rem; margin-top: -0.25rem; border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.trust a { text-decoration: none; border-bottom: 1px solid transparent; }
.trust a:hover { border-bottom-color: currentColor; }
.t-light .trust li::before { border-color: var(--teal-ink); }