/* Gemacode — shared styles */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Serif:wght@300;400;500&display=swap');

:root{
  --bg:#F8F8F6;
  --bg-2:#F0F0ED;
  --ink:#111111;
  --muted:#5A5A55;
  --muted-2:#888884;
  --rule:#D9D9D4;
  --rule-strong:#111111;
  --navy:#0A1628;
  --teal:#1A6B5E;
  --white:#FFFFFF;

  --serif:"IBM Plex Serif", Georgia, serif;
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --pad: 64px;
  --max: 1280px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--ink); }
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
button, .btn { font-family:var(--sans); }
img{ display:block; max-width:100%; }
hr{ border:0; border-top:1px solid var(--rule); margin:0; }

/* Layout */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.section{ padding:96px 0; border-top:1px solid var(--rule); }
.section--first{ border-top:0; }
.section--grey{ background:var(--bg-2); }
.section--navy{ background:var(--navy); color:#EDEEF0; border-top:0; }
.section--navy .muted{ color:rgba(255,255,255,.55); }
.section--navy .rule{ background:rgba(255,255,255,.18); }

/* Type */
.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-0.005em; }
.mono{ font-family:var(--mono); font-weight:400; }
.label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.label--teal{ color:var(--teal); }
.label--ink{ color:var(--ink); }
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  display:flex; align-items:center; gap:10px;
  margin-bottom:28px;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--ink); display:inline-block; }

.h-display{ font-family:var(--serif); font-weight:400; font-size:54px; line-height:1.08; letter-spacing:-0.015em; }
.h-1{ font-family:var(--serif); font-weight:400; font-size:46px; line-height:1.12; letter-spacing:-0.012em; }
.h-2{ font-family:var(--serif); font-weight:400; font-size:36px; line-height:1.18; letter-spacing:-0.01em; }
.h-3{ font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.22; letter-spacing:-0.005em; }
.h-4{ font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.3; }

.lead{ font-size:19px; line-height:1.55; color:var(--muted); max-width:540px; }
.body{ font-size:15.5px; line-height:1.65; color:#2A2A28; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.tiny{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-size:13px; letter-spacing:.04em; font-weight:500;
  border:1px solid var(--navy);
  background:var(--navy); color:#fff;
  cursor:pointer;
  border-radius:0;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{ background:#000; }
.btn--ghost{ background:transparent; color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:#fff; }
.btn--light{ background:#fff; color:var(--navy); border-color:#fff;}
.btn--light:hover{ background:#EDEEF0; }
.btn .arr{ font-family:var(--mono); }

/* Nav / Header */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--rule);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.brand__mark{
  width:18px; height:18px; background:var(--navy); position:relative;
}
.brand__mark::after{
  content:""; position:absolute; left:50%; bottom:-8px; width:1px; height:8px; background:var(--navy);
}
.nav{ display:flex; gap:22px; flex-wrap:nowrap; }
.nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:8px 0; white-space:nowrap;
}
.nav a:hover{ color:var(--ink); }
.nav a.active{ color:var(--ink); border-bottom:1px solid var(--ink); }
.topbar__cta{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--ink); padding:8px 12px; white-space:nowrap;
}
.topbar__cta:hover{ background:var(--ink); color:#fff; }

@media (max-width: 1180px){
  .topbar__inner{ padding:0 32px; }
  .nav{ gap:16px; }
  .nav a{ font-size:10px; letter-spacing:.12em; }
}
@media (max-width: 980px){
  .nav{ display:none; }
}

/* Breadcrumb */
.crumb{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
  padding:28px 0 0;
}
.crumb a:hover{ color:var(--ink); }

/* Page header */
.pagehead{ padding-top:60px; padding-bottom:80px; border-bottom:1px solid var(--rule); }
.pagehead h1{ font-family:var(--serif); font-weight:400; font-size:48px; line-height:1.1; letter-spacing:-0.012em; max-width:780px; margin-top:18px;}
.pagehead p{ margin-top:22px; max-width:600px; color:var(--muted); font-size:18px; line-height:1.55; }

/* Three-column */
.cols-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; }
.cols-3 > .col{ padding:8px 36px 8px 24px; border-left:1px solid var(--rule); }
.cols-3 > .col:first-child{ border-left:0; padding-left:0; }
.col .h-3{ margin:14px 0 16px; }

/* Two-column */
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }

/* Section header (label + heading) */
.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:48px; }
.section-head .label{ display:block; }

/* Footer */
footer.site{
  background:#111111; color:#9C9C97;
  padding:80px 0 40px;
  font-size:13.5px;
}
footer.site a{ color:#D8D8D4; }
footer.site a:hover{ color:#fff; }
footer .ftgrid{
  display:grid; grid-template-columns: 1.2fr 2fr 1fr; gap:48px;
}
footer .ftcol h5{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:18px; font-weight:500;}
footer .ftcol ul{ list-style:none; display:flex; flex-wrap:wrap; gap:18px 28px; }
footer .ftcol li a{ font-size:14px; }
footer .ftbar{
  margin-top:64px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  line-height:1.7;
}

/* Tag */
.tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  display:inline-block;
}

/* === Compliance ticker (animated marquee) === */
.ticker{
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid rgba(10,22,40,.12);
  border-bottom:1px solid rgba(10,22,40,.12);
  padding:10px 0;
  margin-top:32px;
}
.ticker__inner{
  display:inline-block;
  animation: tickerScroll 28s linear infinite;
  will-change:transform;
}
@keyframes tickerScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 32px;
}
.ticker .dot{
  color:var(--teal);
  font-weight:700;
  padding:0 4px;
}
.ticker--dark{
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.ticker--dark span{ color:rgba(255,255,255,.7); }
.ticker--dark .dot{ color:var(--teal); }

/* Status pill (used for in-force / pending) */
.status{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#C49A2A;
}
.status--green{ color:#1A6B5E; }
.status--ink{ color:var(--ink); }
.status--white{ color:rgba(255,255,255,.85); }

/* Thin band (full-width strip below hero) */
.band-thin{
  background:var(--navy); color:#fff;
  padding:14px 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; line-height:1.7;
}
.band-thin .wrap{ display:flex; justify-content:center; }
.band-thin p{ max-width:880px; text-align:center; color:rgba(255,255,255,.85); }

/* === Compliance dashboard rows === */
.dash{
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:32px;
}
.dash__row{
  display:grid;
  grid-template-columns: 220px 1fr 320px;
  gap:32px;
  align-items:start;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.dash__name{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal);
}
.dash__obl{
  font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.82);
  max-width:520px;
}
.dash__status{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#C49A2A;
  text-align:right;
}
.dash__status .sep{ color:rgba(255,255,255,.35); margin:0 6px; }

/* Liability block (DE Haftungskontext) */
.liabilityblock{
  background:rgba(255,255,255,.04);
  border-left:3px solid var(--teal);
  padding:32px 36px;
  margin-top:48px;
  max-width:780px;
}
.liabilityblock + .liabilityblock{ margin-top:24px; padding:24px 36px; }

/* Timeline (Why Mandatory page) */
.timeline{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--ink);
  margin-top:48px;
  padding-top:0;
  position:relative;
}
.timeline::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:1px; background:var(--ink);
}
.timeline > .tl{
  border-left:1px solid var(--ink);
  padding:24px 28px 12px;
  position:relative;
}
.timeline > .tl:first-child{ border-left:0; }
.timeline > .tl::before{
  content:""; position:absolute; left:0; top:-1px; width:1px; height:14px; background:var(--ink);
}
.timeline > .tl:first-child::before{ left:0; }
.tl__date{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); margin-bottom:8px;
}
.tl__title{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin-bottom:14px;
}
.tl__body{ font-size:14px; color:var(--muted); line-height:1.6; }

/* Three-column gap analysis (Why Mandatory) */
.gap3{
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  gap:0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  margin-top:32px;
}
.gap3 > .col{
  padding:32px 28px;
  border-left:1px solid var(--rule);
}
.gap3 > .col:first-child{ border-left:0; }
.gap3 .colhead{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); margin-bottom:24px;
}
.gap3 ul{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.gap3 li{
  font-size:14.5px; color:var(--muted); line-height:1.55;
  padding-left:14px; position:relative;
}
.gap3 li::before{
  content:"—"; position:absolute; left:0; color:var(--muted-2);
}
.gap3 .center-bridge{
  background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:32px;
}
.gap3 .center-bridge p{
  font-family:var(--serif); font-size:22px; line-height:1.35; color:var(--ink); max-width:280px;
}

/* Vector row (Why Mandatory — 3 stacked) */
.vrow{
  border-top:1px solid var(--rule-strong);
  padding:48px 0;
}
.vrow:last-child{ border-bottom:1px solid var(--rule-strong); }
.vrow .tag{ color:var(--teal); margin-bottom:18px; display:block; }
.vrow h3{
  font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.2;
  letter-spacing:-0.005em; max-width:840px; margin-bottom:24px;
}
.vrow p.body{ max-width:780px; }
.vrow .statusbar{
  margin-top:32px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding-top:18px; border-top:1px solid var(--rule);
}
.vrow .statusbar .sep{ color:var(--muted-2); margin:0 8px; }

/* Cost block (dark) — already covered by section--navy + cols-3 but tighten borders */
.cost-cols{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:0;
  margin-top:48px;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.cost-cols > .col{
  padding:32px 28px;
  border-left:1px solid rgba(255,255,255,.18);
}
.cost-cols > .col:first-child{ border-left:0; }
.cost-cols .label{ color:rgba(255,255,255,.55); margin-bottom:12px; display:block; }
.cost-cols h4{
  font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.3;
  color:#fff; margin-bottom:14px;
}
.cost-cols p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.72); }
.cost-cols .ref{
  display:block; margin-top:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* Hero — revised layout */
.hero--v2 .hero__text{ max-width:680px; }
.hero--v2 h1.h-display{
  font-size:50px; line-height:1.08; letter-spacing:-0.015em;
}
.hero--v2 .h-display.teal{ color:var(--teal); }
.hero--v2 .lead{ max-width:520px; margin-top:28px; font-size:18px; }

@media (max-width: 1100px){
  .dash__row{ grid-template-columns:1fr; gap:8px; }
  .dash__status{ text-align:left; }
  .timeline{ grid-template-columns:1fr 1fr; }
  .timeline > .tl:nth-child(3){ border-left:0; border-top:1px solid var(--ink); }
  .gap3{ grid-template-columns:1fr; }
  .gap3 > .col{ border-left:0; border-top:1px solid var(--rule); }
  .gap3 > .col:first-child{ border-top:0; }
  .cost-cols{ grid-template-columns:1fr; }
  .cost-cols > .col{ border-left:0; border-top:1px solid rgba(255,255,255,.18); }
  .cost-cols > .col:first-child{ border-top:0; }
  .hero--v2 h1.h-display{ font-size:36px; }
}
.tag--teal{ color:var(--teal); }

/* Block bordered */
.bblock{ border:1px solid var(--rule-strong); padding:32px; }
.bblock--thin{ border:1px solid var(--rule); padding:32px; }

/* Bordered list */
.bullist{ list-style:none; }
.bullist li{
  border-left:1px solid var(--ink);
  padding:6px 0 6px 18px;
  margin-bottom:10px;
  font-size:15px;
}
.bullist li .arr{ font-family:var(--mono); margin-right:8px; color:var(--muted); }

/* Light grey CTA card */
.cta-card{
  background:var(--bg-2); padding:56px 64px; max-width:660px; margin:0 auto;
  border-left:3px solid var(--navy);
}
.cta-card.dark{ background:var(--navy); color:#fff; border-left-color:var(--teal); }

/* Bordered cards no fill 2x2 */
.grid-2x2{ display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--rule-strong);
  border-left:1px solid var(--rule-strong); }
.grid-2x2 > .cell{
  padding:36px;
  border-right:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
}

/* Hero diagram container */
.hero{
  display:grid; grid-template-columns: 1.05fr 1fr;
  gap:80px;
  min-height: calc(100vh - 64px);
  align-items:center;
  padding:60px 0 80px;
}
.hero__text{ max-width:620px; }
.hero__diagram{ position:relative; height:520px; }

.btn-row{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.bottom-strip{
  position:absolute; left:0; right:0; bottom:24px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#888;
}

/* Five principles row */
.principles{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.principles > div{
  padding:28px 24px;
  border-left:1px solid var(--rule);
}
.principles > div:first-child{ border-left:0; padding-left:0; }
.principles .label{ display:block; margin-bottom:8px; color:var(--ink); }
.principles p{ font-size:13.5px; color:var(--muted); }

/* Stack diagram */
.stack{
  max-width:480px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.stack__node{
  border:1px solid var(--navy);
  background:var(--bg);
  width:100%;
  padding:20px 24px;
  display:flex; flex-direction:column; gap:6px;
}
.stack__node .lab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); }
.stack__node .desc{ font-size:14px; color:var(--muted); }
.stack__arrow{
  height:36px; width:1px; background:var(--navy); position:relative;
}
.stack__arrow::after{
  content:""; position:absolute; left:-4px; bottom:0;
  width:9px; height:9px;
  border-right:1px solid var(--navy); border-bottom:1px solid var(--navy);
  transform: rotate(45deg) translate(-2px,-2px);
}

/* Two-system grid (homepage section) */
.systems{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--rule);
}
.systems > div{ padding:48px; border-left:1px solid var(--rule); }
.systems > div:first-child{ border-left:0; padding-left:0; }

/* Frameworks tags row */
.frameworks{
  display:flex; gap:0;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  margin-top:48px;
}
.frameworks > span{
  flex:1;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal);
  padding:22px 18px;
  border-left:1px solid rgba(255,255,255,.18);
  text-align:center;
}
.frameworks > span:first-child{ border-left:0; }

/* Publications */
.pub{
  padding:32px 0;
  border-top:1px solid var(--rule-strong);
  display:grid; grid-template-columns: 220px 1fr 220px; gap:48px; align-items:start;
}
.pub:last-child{ border-bottom:1px solid var(--rule-strong); }
.pub__meta{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pub__title{ font-family:var(--serif); font-size:22px; line-height:1.3; letter-spacing:-0.005em; margin-bottom:10px; }
.pub__abs{ font-size:14.5px; color:var(--muted); max-width:560px; }
.pub__avail{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }

/* Mapping table rows */
.mapping{ border-top:1px solid var(--rule-strong); }
.mapping .row{
  display:grid; grid-template-columns: 200px 1fr 1fr; gap:48px;
  padding:28px 0;
  border-bottom:1px solid var(--rule);
}
.mapping .row:last-child{ border-bottom:1px solid var(--rule-strong); }
.mapping .reg{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink); padding-top:4px; }
.mapping .colhead{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:8px; }
.mapping .ob, .mapping .tr{ font-size:14.5px; line-height:1.6; }
.mapping .ob{ color:var(--ink); }
.mapping .tr{ color:var(--muted); }

/* Two-side comparison (digital / physical) */
.split{ display:grid; grid-template-columns:1fr 2px 1fr; align-items:stretch; }
.split > .side{ padding:56px; }
.split > .rule-v{ background:var(--navy); }
.split .navy{ background:var(--navy); color:#fff; }
.split .white{ background:#fff; color:var(--ink); }
.split p{ font-size:16px; line-height:1.7; max-width:380px; white-space:pre-line; }
.split .label{ margin-bottom:24px; display:block; }
.split-cap{ text-align:center; padding:24px 0; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* Centered editorial */
.editorial{
  text-align:center;
  padding:140px 0;
}
.editorial h2{
  font-family:var(--serif); font-weight:400; font-size:46px; line-height:1.18; letter-spacing:-0.012em;
  max-width:760px; margin:0 auto;
  white-space:pre-line;
}
.editorial p{ margin:32px auto 0; max-width:560px; color:var(--muted); }

/* 2x3 concept grid */
.grid-2x3{ display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--rule-strong);
  border-left:1px solid var(--rule-strong);
}
.grid-2x3 > .cell{
  padding:36px;
  border-right:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
}
.cell .label{ display:block; margin-bottom:12px; }
.cell .h-3{ margin-bottom:12px; }
.cell p.body{ color:var(--muted); }

/* Key statement banner */
.keyline{
  font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.3;
  letter-spacing:-0.005em;
  text-align:center; max-width:880px; margin:0 auto;
  white-space:pre-line;
}
.keyline.navy{ color:var(--navy); }
.keyline.white{ color:#fff; }
.keyline-wrap{ padding:80px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.keyline-wrap.tealtop{ border-top:2px solid var(--teal); border-bottom:0; padding:80px 0; }

/* Two-column system in dark/teal accent variants */
.sysblock{ padding:80px 0; }
.sysblock .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:80px; }
.sysblock .diagram{ height:420px; border:1px solid var(--rule); }

/* Diagram base */
svg.diagram{ width:100%; height:100%; display:block; }

/* Utility */
.mt-12{ margin-top:12px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; }
.mt-48{ margin-top:48px; } .mt-64{ margin-top:64px; } .mt-80{ margin-top:80px; }
.mb-12{ margin-bottom:12px; } .mb-24{ margin-bottom:24px; } .mb-48{ margin-bottom:48px; }
.center{ text-align:center; }
.maxw-560{ max-width:560px; margin-left:auto; margin-right:auto; }
.maxw-680{ max-width:680px; margin-left:auto; margin-right:auto; }
.maxw-740{ max-width:740px; margin-left:auto; margin-right:auto; }
.maxw-780{ max-width:780px; margin-left:auto; margin-right:auto; }
.maxw-800{ max-width:800px; margin-left:auto; margin-right:auto; }

/* Concept relation diagram */
.rel-diagram{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--rule-strong);
  margin-top:48px;
}
.rel-diagram > .cell{
  padding:32px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  text-align:center;
}
.rel-diagram > .cell:first-child{ border-right:1px solid var(--rule-strong); }
.rel-diagram > .joined{
  grid-column:1 / span 2;
  border-top:1px solid var(--rule-strong);
  padding:24px;
  text-align:center;
  background:var(--bg);
}

/* Sidebar accent for what-it-resolves */
.resolves{
  list-style:none;
}
.resolves li{
  border-left:2px solid var(--navy);
  padding:10px 0 10px 18px;
  margin-bottom:8px;
  font-size:15px;
}

/* Six-column variant for produces */
.produces{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.produces > div{
  padding:22px 24px;
  border-left:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
}
.produces > div:first-child, .produces > div:nth-child(4){ border-left:0; padding-left:0; }

/* Dark variant for produces (AEL) */
.produces.dark{ border-color:rgba(255,255,255,.18); color:#EDEEF0; }
.produces.dark > div{ border-left-color:rgba(255,255,255,.18); color:#EDEEF0; }

/* notbox */
.notbox{
  background:var(--bg-2); padding:24px 28px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; line-height:1.7; color:var(--muted);
}
.notbox.dark{ background:rgba(255,255,255,.04); color:rgba(255,255,255,.45); }

/* Two implementations blocks (math foundations) */
.impls{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.impls > div{ border-left:3px solid var(--teal); padding:8px 0 8px 24px; }
.impls .label{ display:block; margin-bottom:10px; color:var(--teal); }

/* Make focus visible */
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

@media (max-width: 1100px){
  .hero{ grid-template-columns:1fr; min-height:auto; gap:48px; }
  .hero__diagram{ height:380px; }
  .cols-3{ grid-template-columns:1fr; }
  .cols-3 > .col{ border-left:0; border-top:1px solid var(--rule); padding:24px 0; }
  .cols-3 > .col:first-child{ border-top:0; }
  .cols-2{ grid-template-columns:1fr; gap:32px; }
  .systems{ grid-template-columns:1fr; }
  .systems > div{ border-left:0; border-top:1px solid var(--rule); padding:32px 0;}
  .systems > div:first-child{ border-top:0; }
  .principles{ grid-template-columns:1fr 1fr; }
  .principles > div{ border-left:1px solid var(--rule); padding:20px; }
  .grid-2x2, .grid-2x3{ grid-template-columns:1fr; }
  .pub{ grid-template-columns:1fr; gap:12px; }
  .mapping .row{ grid-template-columns:1fr; gap:12px; }
  .split{ grid-template-columns:1fr; }
  .split > .rule-v{ height:2px; width:100%; }
  .sysblock .grid{ grid-template-columns:1fr; }
  footer .ftgrid{ grid-template-columns:1fr; gap:32px; }
  :root{ --pad:32px; }
  .h-display{ font-size:40px; }
  .pagehead h1{ font-size:36px; }
  .editorial h2{ font-size:32px; }
  .impls{ grid-template-columns:1fr; }
}