/* ==========================================================================
   SKELO — Hybrid  "Boundaries"
   Dark brand base (from B) + the understandable inspection logic (from A),
   rebuilt as one system around a single idea: SKELO products define BOUNDARIES.
     Trading Platform -> the boundary is the client environment (brass).
     ADP              -> the boundary is the verification zone; payment stays
                         outside it (verdigris, outside = hatched).
   No decorative glows, grain or grid lines: every line, colour and motion
   carries meaning.

   Legibility: body 18px, secondary text >= 8:1 contrast, labels >= 14px.
   Motion (emil-design-eng / review-animations): transform + opacity only,
   strong custom ease-out, press feedback 140 ms, keyboard-driven steps are not
   animated, hover gated by (hover:hover) and (pointer:fine), reduced motion =
   fade only.  Mobile (mobile-native): no tap highlight, touch-action, dvh/svh,
   safe-area insets, controls not selectable, the ADP demo is its own
   full-screen stepper on phones.
   ========================================================================== */

@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader-latin-wght-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(../fonts/inter-tight-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #070C0C;
  --bg2: #0D1413;
  --bg3: #131C1B;
  --tx: #F1EDE3;
  --tx2: #CFD3CA;
  --tx3: #A7AFA8;
  --hair: rgba(241, 237, 227, 0.16);
  --hair2: rgba(241, 237, 227, 0.36);
  --brass: #E2BC72;
  --verd: #7AE8C6;
  --coral: #FF9C8C;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gut: 20px;
  --nav: 68px;
}
@media (min-width: 720px)  { :root { --gut: 32px; } }
@media (min-width: 1100px) { :root { --gut: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 1.125rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
body.locked { overflow: hidden; }
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
a { color: inherit; text-decoration: none; }
a, button, summary { touch-action: manipulation; }
button { font: inherit; color: inherit; }
.pill, .link, .seg button, .prog button, .nav a, .menu-btn, .tab, .chip-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--acc, var(--verd)); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gut); top: -64px; background: var(--tx); color: var(--bg); padding: 12px 18px; z-index: 200; }
.skip:focus { top: 10px; }
[data-tech="t"] { --acc: var(--brass); } [data-tech="a"] { --acc: var(--verd); }

/* ---- type ------------------------------------------------------------------ */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.03em; line-height: 0.98; text-wrap: balance; }
.h1 { font-size: clamp(2.8rem, 6.6vw, 6.6rem); }
.h2 { font-size: clamp(2.1rem, 4.2vw, 3.9rem); line-height: 1.02; }
.h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.08; letter-spacing: -0.02em; }
.lede { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.5; color: var(--tx2); max-width: 40ch; text-wrap: pretty; }
.copy { color: var(--tx2); max-width: 54ch; text-wrap: pretty; }
.label { font: 500 0.9rem/1.4 var(--mono); letter-spacing: 0.02em; color: var(--tx3); }
.label.acc { color: var(--acc); }
.small { font-size: 1rem; color: var(--tx2); }
b, strong { font-weight: 600; }

/* ---- header ----------------------------------------------------------------- */
.top { position: sticky; top: 0; z-index: 60; background: rgba(7, 12, 12, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); }
.top-in { height: var(--nav); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 600 0.95rem/1 var(--sans); letter-spacing: 0.32em; }
.brand svg { width: 26px; height: 26px; flex: none; }
.nav { display: none; gap: 4px; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; color: var(--tx2); font-size: 1.0625rem; transition: color 150ms var(--ease); }
.nav a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px; background: var(--acc, var(--verd)); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease); }
.nav a[aria-current="page"] { color: var(--tx); } .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a.trade { --acc: var(--brass); } .nav a.adp { --acc: var(--verd); }
.top-r { display: flex; align-items: center; gap: 10px; }
.lang { font: 500 0.9rem var(--mono); color: var(--tx3); min-height: 48px; display: inline-flex; align-items: center; padding: 0 6px; }
.login { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--hair2); border-radius: 999px; font-size: 1.0625rem; transition: transform 140ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease); }
.login:active { transform: scale(0.97); }
.menu-btn { width: 48px; height: 48px; margin-right: -12px; display: inline-grid; place-items: center; background: none; border: 0; cursor: pointer; }
.menu-btn i { display: block; width: 24px; height: 12px; position: relative; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--tx); transition: transform 200ms var(--ease); }
.menu-btn i::before { top: 0; } .menu-btn i::after { bottom: 0; }
.menu-btn[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }
.drawer { display: none; position: fixed; inset: var(--nav) 0 0 0; z-index: 59; background: var(--bg); padding: 12px max(var(--gut), env(safe-area-inset-left, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.drawer.open { display: block; opacity: 1; transition: opacity 180ms var(--ease); }
@starting-style { .drawer.open { opacity: 0; } }
.drawer a { display: flex; align-items: center; justify-content: space-between; min-height: 80px; border-bottom: 1px solid var(--hair); font: 400 2.6rem/1 var(--serif); letter-spacing: -0.03em; }
@media (min-width: 900px) { .nav { display: flex; } .menu-btn, .drawer { display: none !important; } }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--tx); } .login:hover { background: var(--tx); color: var(--bg); border-color: var(--tx); } }

/* ---- controls ------------------------------------------------------------------ */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px; border: 1px solid var(--hair2); border-radius: 999px; background: transparent; color: var(--tx); font: 500 1.0625rem/1 var(--sans); cursor: pointer; transition: transform 140ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease); }
.pill:active { transform: scale(0.97); }
.pill svg, .link svg { width: 18px; height: 18px; flex: none; transition: transform 200ms var(--ease); }
.pill--solid { background: var(--tx); color: var(--bg); border-color: var(--tx); }
.pill--acc { background: var(--acc, var(--verd)); color: #04100d; border-color: var(--acc, var(--verd)); }
.pill:disabled { opacity: 0.4; pointer-events: none; }
.link { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; color: var(--acc, var(--verd)); font: 500 1.125rem var(--sans); border-bottom: 1px solid color-mix(in srgb, var(--acc, var(--verd)) 55%, transparent); transition: transform 140ms var(--ease), border-color 150ms var(--ease); }
.link:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { background: var(--tx); color: var(--bg); border-color: var(--tx); }
  .pill--acc:hover { background: var(--tx); border-color: var(--tx); }
  .pill:hover svg, .link:hover svg { transform: translateX(4px); }
  .link:hover { border-bottom-color: var(--acc, var(--verd)); }
}
.row { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.row .pill { flex: 1 1 220px; } @media (min-width: 720px) { .row .pill { flex: 0 0 auto; } }

.seg { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: 52px; min-width: 56px; padding: 0 20px; border: 1px solid var(--hair2); border-radius: 12px; background: transparent; font: 500 1.0625rem var(--sans); cursor: pointer; transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), transform 140ms var(--ease); }
.seg button:active { transform: scale(0.97); }
.seg button[aria-checked="true"] { background: var(--tx); color: var(--bg); border-color: var(--tx); }
@media (hover: hover) and (pointer: fine) { .seg button:hover:not([aria-checked="true"]) { border-color: var(--tx); } }
.badge { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--acc, var(--verd)); border-radius: 999px; color: var(--acc, var(--verd)); font: 500 0.9rem var(--mono); letter-spacing: 0.04em; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- sections ---------------------------------------------------------------------- */
.sec { padding-block: clamp(72px, 10vw, 150px); border-top: 1px solid var(--hair2); }
.head { display: grid; gap: 22px; max-width: 980px; margin-bottom: clamp(32px, 5vw, 64px); }
.split { display: grid; gap: 40px; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; } .split .stick { position: sticky; top: 120px; } }
.stack { display: grid; gap: 22px; }
.note { border-left: 2px solid var(--hair2); padding-left: 18px; color: var(--tx2); font-size: 1.0625rem; max-width: 66ch; }
.enter > * { animation: up 640ms var(--ease) both; }
.enter > *:nth-child(2) { animation-delay: 80ms; } .enter > *:nth-child(3) { animation-delay: 160ms; } .enter > *:nth-child(4) { animation-delay: 240ms; }
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- home hero + the two perimeters --------------------------------------------------- */
.hero { padding-block: clamp(36px, 6vw, 88px) clamp(48px, 7vw, 100px); }
.hero-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 5fr 6fr; gap: 72px; } }
.hero-txt { display: grid; gap: 28px; align-content: center; }
.peri { display: grid; gap: 18px; }
@media (min-width: 700px) { .peri { grid-template-columns: 1fr 1fr; } }
.pbox { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 22px 22px 24px; border: 2px solid var(--acc); border-radius: 22px; background: var(--bg2); transition: background-color 180ms var(--ease), transform 140ms var(--ease); }
.pbox:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .pbox:hover { background: var(--bg3); } .pbox:hover .go svg { transform: translateX(4px); } }
.ptag { position: absolute; top: -15px; left: 18px; padding: 0 12px; background: var(--bg); color: var(--acc); font: 500 0.9rem var(--mono); letter-spacing: 0.03em; }
.ptitle { font: 400 1.9rem/1.05 var(--serif); letter-spacing: -0.02em; }
.pnote { font-size: 1rem; color: var(--tx2); }
.portal { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--acc); border-radius: 10px; font: 500 0.95rem var(--sans); }
.portal span:last-child { color: var(--tx3); font: 400 0.9rem var(--mono); }
.envs { display: grid; gap: 10px; position: relative; padding-left: 18px; }
.envs::before { content: ""; position: absolute; left: 4px; top: -18px; bottom: 28px; width: 1px; background: var(--hair2); }
.env { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--acc) 70%, transparent); border-radius: 12px; background: var(--bg); }
.env::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 1px; background: var(--hair2); }
.env .hb { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); }
.env b { font: 500 1rem var(--sans); } .env span { font-size: 0.95rem; color: var(--tx2); }
.stages { display: grid; gap: 0; position: relative; padding-left: 4px; }
.stage-i { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 10px 0; }
.stage-i::before { content: ""; position: absolute; left: 11px; top: 36px; bottom: -8px; width: 1px; background: var(--hair2); }
.stage-i:last-child::before { display: none; }
.stage-i i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--acc); margin-top: 2px; }
.stage-i:last-child i { background: var(--acc); }
.stage-i b { display: block; font: 500 1.0625rem var(--sans); } .stage-i span { font-size: 0.95rem; color: var(--tx2); }
.out { position: relative; margin-top: 4px; padding: 14px 16px; border: 1px dashed var(--hair2); border-radius: 14px; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(241, 237, 227, 0.07) 8px 9px); }
.out b { display: block; font: 500 1rem var(--sans); } .out span { font-size: 0.95rem; color: var(--tx2); }
.out::before { content: attr(data-label); position: absolute; top: -13px; left: 14px; padding: 0 8px; background: var(--bg2); font: 500 0.85rem var(--mono); color: var(--tx3); }
.go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--acc); font: 500 1.0625rem var(--sans); padding-top: 6px; }
.go svg { width: 18px; height: 18px; transition: transform 200ms var(--ease); }
.gap-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; color: var(--tx3); font: 400 0.95rem var(--sans); }
.gap-note::before, .gap-note::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* two equal technology panels (home) */
.dip { display: grid; border-top: 1px solid var(--hair2); }
.dip > section { padding: clamp(36px, 5vw, 80px) max(var(--gut), env(safe-area-inset-left, 0px)); display: grid; gap: 22px; align-content: start; }
.dip > section + section { border-top: 1px solid var(--hair2); }
@media (min-width: 900px) { .dip { grid-template-columns: 1fr 1fr; } .dip > section + section { border-top: 0; border-left: 1px solid var(--hair2); } }
.facts { display: grid; gap: 0; margin-top: 8px; }
.facts li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--hair); color: var(--tx); }
.facts li::before { content: ""; width: 8px; height: 8px; background: var(--acc); flex: none; transform: translateY(-2px); }

/* mini verification (home) */
.mini { border: 1px solid var(--hair2); border-radius: 22px; background: var(--bg2); padding: clamp(22px, 3vw, 36px); display: grid; gap: 26px; }
.mini-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 16px; border: 1px solid var(--hair2); border-radius: 999px; font-size: 1.0625rem; }
.chips li svg { width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; color: var(--verd); }
.fld { display: grid; gap: 10px; }
.res { min-height: 150px; display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid var(--hair); }
.res .pending { color: var(--tx3); font-size: 1.0625rem; }
.crit { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 1.0625rem; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.crit:first-child { border-top: 0; }
.crit .m { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; }
.crit .m svg { width: 14px; height: 14px; }
.crit.ok { color: var(--verd); } .crit.bad { color: var(--coral); } .crit.wait { color: var(--tx3); }
.crit .t { color: var(--tx); } .crit .t small { display: block; font-size: 0.95rem; color: var(--tx3); }
.crit .v { font: 500 0.95rem var(--mono); }
.crit.hide { opacity: 0; transform: translateY(6px); }
.verdict { font: 400 clamp(2.8rem, 7vw, 5rem)/0.95 var(--serif); letter-spacing: -0.035em; transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.verdict.ok { color: var(--verd); } .verdict.bad { color: var(--coral); }
.verdict.hide { opacity: 0; transform: scale(0.96); }

/* ---- footer ----------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--hair2); padding-top: clamp(48px, 7vw, 96px); }
.foot-cols { display: grid; gap: 32px 24px; grid-template-columns: 1fr 1fr; padding-bottom: 36px; }
.foot-cols h4 { font: 500 0.9rem var(--mono); color: var(--tx3); margin-bottom: 10px; }
.foot-cols a { display: block; min-height: 44px; line-height: 44px; color: var(--tx2); transition: color 150ms var(--ease); }
.foot-note { border-top: 1px solid var(--hair); padding: 26px 0 calc(40px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; color: var(--tx3); font-size: 1rem; max-width: 84ch; }
@media (min-width: 900px) { .foot-cols { grid-template-columns: 1.4fr 1fr 1.4fr 1fr; } }
@media (hover: hover) and (pointer: fine) { .foot-cols a:hover { color: var(--tx); } }

/* ============================ ADP simulation ============================================= */
.demo { --acc: var(--verd); border: 1px solid var(--hair2); border-radius: 26px; background: var(--bg2); overflow: hidden; }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px clamp(16px, 2.6vw, 32px); border-bottom: 1px solid var(--hair); }
.demo-bar .meta { color: var(--tx2); font-size: 1rem; flex: 1 1 240px; }
.demo-bar .count { font: 500 0.95rem var(--mono); color: var(--tx2); margin-left: auto; }
.demo-close { display: none; }
.prog { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; padding: 18px clamp(16px, 2.6vw, 32px) 0; }
.prog button { position: relative; width: 100%; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; align-items: center; }
.prog button::before { content: ""; height: 6px; border-radius: 3px; background: var(--hair2); transition: background-color 220ms var(--ease), transform 220ms var(--ease); transform-origin: left; }
.prog li.done button::before { background: var(--verd); }
.prog li.cur button::before { background: var(--tx); transform: scaleY(1.7); }
.prog li.pay button::before { background: repeating-linear-gradient(90deg, var(--hair2) 0 6px, transparent 6px 10px); }
.prog li.pay.cur button::before { background: var(--tx); }
.zones { display: grid; grid-template-columns: 1fr 3fr 1fr; gap: 6px; padding: 0 clamp(16px, 2.6vw, 32px); }
.zones span { padding: 6px 0 0; border-top: 2px solid var(--hair2); font: 500 0.9rem var(--mono); color: var(--tx3); transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.zones span.live { color: var(--tx); border-top-color: var(--tx); }
.zones .z-adp.live { color: var(--verd); border-top-color: var(--verd); }
.zones .z-out { border-top-style: dashed; }

.narr { display: grid; gap: 12px; padding: clamp(22px, 3vw, 40px) clamp(16px, 2.6vw, 32px) 8px; max-width: 980px; }
.narr .phase { font: 500 0.95rem var(--mono); color: var(--verd); }
.narr h3 { font: 400 clamp(2rem, 3.8vw, 3.2rem)/1.02 var(--serif); letter-spacing: -0.03em; text-wrap: balance; }
.narr p.tx { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--tx2); max-width: 60ch; }
.narr .objtag { font: 500 0.95rem var(--mono); color: var(--tx); display: inline-flex; gap: 10px; align-items: center; }
.narr .objtag::before { content: ""; width: 10px; height: 10px; background: var(--verd); }
.fade { transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.fade.swap { opacity: 0; transform: translateY(6px); }

.stage { display: grid; grid-template-columns: minmax(170px, 0.8fr) 44px minmax(0, 3.8fr) 44px minmax(190px, 0.9fr); padding: 20px clamp(16px, 2.6vw, 32px) 8px; align-items: stretch; }
.col { display: grid; gap: 14px; align-content: start; }
.col-h { font: 500 0.95rem var(--mono); color: var(--tx2); display: flex; align-items: center; gap: 10px; min-height: 30px; }
.outside { position: relative; padding: 16px; border: 1px dashed var(--hair2); border-radius: 18px; background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(241, 237, 227, 0.065) 9px 10px); transition: border-color 200ms var(--ease); }
.outside.live { border-color: var(--tx2); }
.party { border: 1px solid var(--hair2); border-radius: 14px; background: var(--bg); padding: 14px 16px; display: grid; gap: 4px; transition: border-color 200ms var(--ease); }
.party b { font: 500 1.0625rem var(--sans); } .party span { font-size: 0.95rem; color: var(--tx2); }
.party.live { border-color: var(--tx); }
.track { position: relative; align-self: center; height: 2px; background: var(--hair2); margin-block: 0; }
.track::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 8px solid var(--hair2); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.track.l::after { right: auto; left: -1px; border-left: 0; border-right: 8px solid var(--hair2); }
.track.live { background: var(--verd); } .track.live::after { border-left-color: var(--verd); } .track.l.live::after { border-right-color: var(--verd); border-left-color: transparent; }
.track .pk { position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--tx); opacity: 0; }
.track.go-r .pk { animation: pk-r 480ms var(--ease-io) both; } .track.go-l .pk { animation: pk-l 480ms var(--ease-io) both; }
@keyframes pk-r { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(44px); } }
@keyframes pk-l { 0% { opacity: 1; transform: translateX(44px); } 100% { opacity: 1; transform: translateX(0); } }
.track.instant .pk { animation: none; }
.track.dashed { background: none; border-top: 2px dashed var(--hair2); height: 0; } .track.dashed::after { top: -6px; border-left-color: var(--hair2); }
.track.dashed.live { border-top-color: var(--tx2); } .track.dashed.live::after { border-left-color: var(--tx2); }
.zone { position: relative; border: 2px solid var(--verd); border-radius: 22px; padding: 22px 18px 18px; background: var(--bg); display: grid; gap: 14px; align-content: start; }
.zone-label { position: absolute; top: -16px; left: 20px; padding: 0 12px; background: var(--bg2); color: var(--verd); font: 500 0.95rem var(--mono); letter-spacing: 0.03em; }
.docs { display: grid; gap: 12px; }
.dcol { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1000px) { .docs { grid-template-columns: 1fr 1fr; align-items: start; } }
.doc { position: relative; border: 1px solid var(--hair2); border-radius: 14px; background: var(--bg2); padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-height: 74px; transition: border-color 200ms var(--ease), background-color 200ms var(--ease); }
.doc-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font: 500 0.95rem var(--mono); color: var(--tx2); }
.doc-h b { font-weight: 500; color: var(--tx); }
.doc-b { display: grid; gap: 10px; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.doc.ghost { border-style: dashed; background: transparent; }
.doc.ghost .doc-b { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
.doc.ghost .doc-h { color: var(--tx3); }
.doc.cur { border-color: var(--tx); background: var(--bg3); }
.doc.instant, .doc.instant .doc-b { transition: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 1rem; }
.kv dt { color: var(--tx3); } .kv dd { color: var(--tx); }
.lock { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--tx2); }
.lock svg { width: 16px; height: 16px; color: var(--verd); }
.kline { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 1.0625rem; }
.kline:first-of-type { border-top: 0; }
.kline svg { width: 16px; height: 16px; color: var(--verd); flex: none; }
.edit { display: grid; gap: 14px; padding-top: 6px; border-top: 1px solid var(--hair); }
.edit .lab { font: 500 0.9rem var(--mono); color: var(--tx2); }
.edit .seg button { min-height: 48px; padding: 0 16px; }
.scen { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--hair2); border-radius: 999px; background: transparent; font: 500 1rem var(--sans); cursor: pointer; transition: transform 140ms var(--ease), border-color 150ms var(--ease); }
.chip-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip-btn:hover { border-color: var(--tx); } }
.stamp { display: inline-flex; align-items: center; min-height: 70px; padding: 0 26px; border: 3px solid currentColor; border-radius: 6px; font: 600 clamp(1.9rem, 4vw, 3rem)/1 var(--serif); letter-spacing: 0.01em; width: max-content; max-width: 100%; transform: rotate(-1.5deg); }
.stamp.ok { color: var(--verd); background: rgba(122, 232, 198, 0.1); } .stamp.bad { color: var(--coral); background: rgba(255, 156, 140, 0.1); }
.stamp.in { animation: stamp 300ms var(--ease) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-1.5deg) scale(0.94); } to { opacity: 1; transform: rotate(-1.5deg); } }
.pend { color: var(--tx3); font-size: 1.0625rem; }
.gate-note { display: grid; gap: 6px; padding: 14px 16px; border: 1px dashed var(--hair2); border-radius: 12px; background: var(--bg); font-size: 1rem; color: var(--tx2); }
.gate-note b { color: var(--tx); font: 500 1.0625rem var(--sans); }

.demo-nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 18px clamp(16px, 2.6vw, 32px) 24px; }
.demo-nav .sp { flex: 1; }
.hint { color: var(--tx3); font-size: 1rem; }
.sofar, .demo-entry { display: none; }

/* ---------- phones: the simulation becomes its own full-screen stepper ---------------------- */
@media (max-width: 899px) {
  .demo-entry { display: grid; gap: 18px; padding: 24px; border: 1px solid var(--hair2); border-radius: 22px; background: var(--bg2); }
  .demo-entry p { color: var(--tx2); }
  .demo { display: none; position: fixed; inset: 0; z-index: 100; border: 0; border-radius: 0; flex-direction: column; height: 100dvh; background: var(--bg); }
  .demo.open { display: flex; }
  .demo-bar { flex-wrap: nowrap; padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); gap: 12px; }
  .demo-bar .meta { display: none; }
  .demo-bar { gap: 8px; }
  .demo-bar .count { font-size: 0.85rem; white-space: nowrap; min-width: 0; }
  .demo-bar .badge { padding: 0 10px; flex: none; }
  .demo-close { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-left: -10px; background: none; border: 0; cursor: pointer; order: -1; }
  .demo-close svg { width: 22px; height: 22px; }
  .prog { padding: 4px 16px 0; gap: 4px; } .prog button { height: 40px; }
  .zones { padding: 0 16px; }
  .scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
  .narr { padding: 20px 16px 6px; }
  .narr h3 { font-size: 2rem; }
  .sofar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
  .sofar span { padding: 6px 12px; border: 1px solid var(--hair2); border-radius: 999px; font: 500 0.9rem var(--mono); color: var(--tx2); }
  .stage { display: flex; flex-direction: column; padding: 16px; gap: 0; }
  .col, .party-wrap { display: contents; }
  .outside { padding: 0; border: 0; background: none; display: contents; }
  .col-h, .track, .party, .zone-label { display: none; }
  .zone { display: contents; }
  .docs, .dcol { display: contents; }
  .stage [data-at] { display: none; }
  .stage [data-at].cur { display: grid; }
  .doc.cur, .doc { background: var(--bg2); border-color: var(--hair2); }
  .doc.ghost { display: none !important; }
  .doc-b { gap: 14px; } .doc-h { font-size: 0.95rem; }
  .kv, .kline { font-size: 1.125rem; }
  .demo-nav { padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--hair2); background: var(--bg); flex-wrap: nowrap; }
  .demo-nav .pill { flex: 1; min-height: 60px; }
  .demo-nav .hint, .demo-nav .sp, .demo-nav [data-replay-d] { display: none; }
  .stamp { font-size: 2.3rem; }
}

/* ============================ shared: sequence + boundary + cert ============================== */
.bound { display: grid; gap: 0; border: 1px solid var(--hair2); border-radius: 22px; overflow: hidden; }
.bound > div { padding: clamp(22px, 3vw, 40px); display: grid; gap: 14px; align-content: start; }
.bound .in { border-bottom: 2px solid var(--verd); }
.bound .ex { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(241, 237, 227, 0.06) 10px 11px); }
.bound h3 { font: 400 clamp(1.7rem, 3vw, 2.4rem)/1.05 var(--serif); letter-spacing: -0.02em; }
.bound li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.bound .in li svg { width: 18px; height: 18px; color: var(--verd); flex: none; margin-top: 4px; }
.bound .ex li svg { width: 18px; height: 18px; color: var(--tx3); flex: none; margin-top: 4px; }
@media (min-width: 900px) { .bound { grid-template-columns: 1.2fr 1fr; } .bound .in { border-bottom: 0; border-right: 2px solid var(--verd); } }

.seq { border-top: 1px solid var(--hair2); }
.seq-head, .seq-body { display: none; }
.msg { position: relative; display: grid; gap: 8px; padding: 22px 0 22px 56px; border-bottom: 1px solid var(--hair); }
.msg .n { position: absolute; left: 0; top: 22px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair2); font: 500 0.95rem var(--mono); }
.msg .who { font: 500 0.9rem var(--mono); color: var(--tx3); }
.msg b { font: 400 1.6rem/1.1 var(--serif); letter-spacing: -0.02em; }
.msg code { justify-self: start; font: 500 0.95rem var(--mono); color: var(--verd); padding: 4px 12px; border: 1px solid rgba(122, 232, 198, 0.5); border-radius: 999px; }
.msg.ext code { color: var(--tx2); border-style: dashed; border-color: var(--hair2); }
.msg .arr { display: none; }
.seq-list { display: grid; }
@media (min-width: 900px) {
  .seq-head { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--hair2); }
  .seq-head span { padding: 16px 8px; text-align: center; font: 500 0.95rem var(--mono); color: var(--tx); }
  .seq-head .a { color: var(--verd); } .seq-head .o { color: var(--tx2); }
  .seq-list { position: relative;
    background: linear-gradient(var(--hair2), var(--hair2)) 12.5% 0 / 1px 100% no-repeat, linear-gradient(rgba(122, 232, 198, 0.6), rgba(122, 232, 198, 0.6)) 37.5% 0 / 2px 100% no-repeat,
                linear-gradient(var(--hair2), var(--hair2)) 62.5% 0 / 1px 100% no-repeat, linear-gradient(var(--hair2), var(--hair2)) 87.5% 0 / 1px 100% no-repeat; }
  .msg { min-height: 156px; padding: 0; border-bottom: 0; }
  .msg .n, .msg .who { display: none; }
  .msg .lab { position: absolute; top: 18px; left: var(--lx); display: grid; gap: 8px; padding: 12px 16px; background: var(--bg); border: 1px solid var(--hair2); border-radius: 12px; }
  .msg .lab b { font-size: 1.3rem; }
  .msg.ext .lab { border-style: dashed; }
  .msg .arr { display: block; position: absolute; left: var(--ax); width: var(--aw); top: 108px; height: 2px; background: var(--verd); }
  .msg .arr::after { content: ""; position: absolute; right: -1px; top: -5px; border-left: 9px solid var(--verd); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
  .msg.r2l .arr::after { right: auto; left: -1px; border-left: 0; border-right: 9px solid var(--verd); }
  .msg.ext .arr { background: none; border-top: 2px dashed var(--tx3); height: 0; } .msg.ext .arr::after { border-left-color: var(--tx3); top: -7px; }
  .msg.self .arr { height: 30px; width: 48px; border: 2px solid var(--verd); border-left: 0; border-radius: 0 14px 14px 0; background: none; top: 96px; }
  .msg.self .arr::after { right: auto; left: -1px; top: 20px; border-left: 0; border-right: 9px solid var(--verd); }
}
.p12 { --ax: 12.5%; --aw: 25%; --lx: 13.5%; } .p32 { --ax: 37.5%; --aw: 25%; --lx: 38.5%; } .p24 { --ax: 37.5%; --aw: 50%; --lx: 38.5%; } .s2 { --ax: 37.5%; --aw: 48px; --lx: 41.5%; }

.cert { display: grid; border-top: 1px solid var(--hair2); }
.cert > div { padding: 30px 0; border-bottom: 1px solid var(--hair); display: grid; gap: 4px; align-content: start; }
.cert h3 { font: 400 2.1rem/1 var(--serif); letter-spacing: -0.025em; margin-bottom: 14px; }
.cert li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--hair); }
.cert li svg { width: 16px; height: 16px; flex: none; transform: translateY(3px); }
.cert .y svg { color: var(--verd); } .cert .n svg { color: var(--coral); } .cert .n li { color: var(--tx2); }
@media (min-width: 900px) { .cert { grid-template-columns: 1fr 1.2fr 1.2fr; gap: 56px; } .cert > div { border-bottom: 0; } }
.devs { border-top: 1px solid var(--hair2); }
.devs a { display: grid; gap: 14px 40px; padding: 36px 0; border-bottom: 1px solid var(--hair); align-items: end; }
.devs h3 { font: 400 clamp(2.4rem, 6vw, 5rem)/0.95 var(--serif); letter-spacing: -0.035em; transition: color 180ms var(--ease); }
.devs p { color: var(--tx2); max-width: 44ch; }
.devs svg { width: 34px; height: 34px; color: var(--verd); transition: transform 220ms var(--ease); }
@media (min-width: 900px) { .devs a { grid-template-columns: 6fr 4fr auto; } }
@media (hover: hover) and (pointer: fine) { .devs a:hover svg { transform: translateX(8px); } .devs a:hover h3 { color: var(--verd); } }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tags li { padding: 8px 16px; border: 1px dashed var(--hair2); border-radius: 999px; font: 500 0.9rem var(--mono); color: var(--tx2); }

/* ============================ Trading system map ============================================== */
.tmap { --acc: var(--brass); border: 1px solid var(--hair2); border-radius: 26px; background: var(--bg2); overflow: hidden; }
.tmap-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 16px clamp(16px, 2.6vw, 32px); border-bottom: 1px solid var(--hair); }
.tmap-bar .meta { color: var(--tx2); font-size: 1rem; flex: 1 1 240px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 18px clamp(16px, 2.6vw, 32px) 0; }
.tab { min-height: 48px; padding: 0 18px; border: 1px solid var(--hair2); border-radius: 999px; background: transparent; font: 500 1rem var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), transform 140ms var(--ease); }
.tab:active { transform: scale(0.97); }
.tab .no { font: 500 0.9rem var(--mono); color: var(--tx3); }
.tab[aria-selected="true"] { background: var(--brass); color: #1a1405; border-color: var(--brass); } .tab[aria-selected="true"] .no { color: #1a1405; }
.tmap-narr { padding: clamp(20px, 3vw, 36px) clamp(16px, 2.6vw, 32px) 4px; display: grid; gap: 10px; max-width: 920px; }
.tmap-narr h3 { font: 400 clamp(1.9rem, 3.4vw, 2.8rem)/1.04 var(--serif); letter-spacing: -0.025em; }
.tmap-narr p { font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--tx2); line-height: 1.5; max-width: 62ch; }
.map { display: grid; gap: 16px; padding: 22px clamp(16px, 2.6vw, 32px) 28px; }
@media (min-width: 1000px) { .map { grid-template-columns: 1fr 1.05fr 1.7fr; gap: 0 30px; align-items: start; } }
.mn { position: relative; border: 1px solid var(--hair2); border-radius: 16px; background: var(--bg); padding: 16px 18px; display: grid; gap: 6px; align-content: start; transition: border-color 200ms var(--ease), background-color 200ms var(--ease), opacity 200ms var(--ease); }
.mn b { font: 500 1.125rem var(--sans); } .mn span { font-size: 1rem; color: var(--tx2); }
.mn .tg { font: 500 0.9rem var(--mono); color: var(--tx3); }
.mn.lit { border-color: var(--brass); background: var(--bg3); } .mn.lit .tg { color: var(--brass); }
.mn.dim { opacity: 0.45; }
.mn.ext { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(241, 237, 227, 0.06) 9px 10px); }
.mcol { display: grid; gap: 16px; align-content: start; }
.mcol .arrow { display: none; }
@media (min-width: 1000px) { .mcol .arrow { display: block; height: 22px; width: 2px; background: var(--hair2); margin-left: 24px; } }
.clients { border: 2px solid var(--brass); border-radius: 22px; padding: 26px 18px 18px; display: grid; gap: 12px; position: relative; background: var(--bg); }
.clients > .lab { position: absolute; top: -15px; left: 20px; padding: 0 12px; background: var(--bg2); color: var(--brass); font: 500 0.95rem var(--mono); }
.cl { border: 1px dashed color-mix(in srgb, var(--brass) 70%, transparent); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; background: var(--bg2); transition: border-color 200ms var(--ease), opacity 200ms var(--ease), background-color 200ms var(--ease); cursor: pointer; text-align: left; width: 100%; }
.cl b { font: 500 1.0625rem var(--sans); } .cl span { font-size: 0.975rem; color: var(--tx2); }
.cl .hb { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--brass); margin-right: 8px; }
.cl:active { transform: scale(0.99); }
.cl[aria-pressed="true"] { border-style: solid; border-color: var(--brass); background: var(--bg3); }
.clients.pick .cl:not([aria-pressed="true"]) { opacity: 0.4; }
.cl-detail { padding: 14px 16px; border: 1px solid var(--hair2); border-radius: 12px; font-size: 1rem; color: var(--tx2); background: var(--bg); display: none; }
.cl-detail.on { display: block; }
.cl-detail b { color: var(--tx); }
.mfoot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 0 clamp(16px, 2.6vw, 32px) 24px; }
.mfoot .sp { flex: 1; }
.dets { border-top: 1px solid var(--hair2); }
.dets details { border-bottom: 1px solid var(--hair); }
.dets summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 76px; cursor: pointer; list-style: none; font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 var(--serif); letter-spacing: -0.02em; }
.dets summary::-webkit-details-marker { display: none; }
.dets summary::after { content: "+"; font: 300 2rem/1 var(--sans); color: var(--brass); transition: transform 200ms var(--ease); }
.dets details[open] summary::after { transform: rotate(45deg); }
.dets p { padding: 0 0 28px; color: var(--tx2); max-width: 66ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enter > * { animation: fade 200ms ease both; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .fade.swap, .crit.hide, .verdict.hide, .doc.ghost .doc-b { transform: none; }
  .track.go-r .pk, .track.go-l .pk { animation: none; }
  .stamp.in { animation: fade 200ms ease both; }
  .pill:active, .seg button:active, .tab:active, .chip-btn:active, .pbox:active { transform: none; }
}

/* ---- additions ---------------------------------------------------------------------------- */
.tcol { display: grid; align-content: center; gap: 56px; }
.mn.dim { opacity: 0.62; }
.cl.mn.dim { opacity: 0.75; }
.cl.mn { padding: 14px 16px; }
.sec-h { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-bottom: 18px; }
.sim-note { color: var(--tx2); font-size: 1.0625rem; max-width: 62ch; }
.hero-adp .lede, .hero-trade .lede { max-width: 46ch; }
.crumb { display: inline-flex; gap: 12px; align-items: center; }
@media (max-width: 899px) { .demo-entry .badge { justify-self: start; } .tmap .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .tmap .tab { flex: none; } }

.mt { margin-top: 28px; } .mt-s { margin-top: 10px; }
.drawer-lang { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0 8px; }
.drawer .drawer-lang a { min-height: 48px; padding: 0 18px; border: 1px solid var(--hair2); border-radius: 999px; font: 500 1.0625rem var(--sans); display: inline-flex; align-items: center; justify-content: center; }
.drawer .drawer-lang a[aria-current="true"] { background: var(--tx); color: var(--bg); border-color: var(--tx); }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; font: 500 0.9rem var(--mono); color: var(--tx2); min-height: 48px; display: inline-flex; align-items: center; padding: 0 8px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul { position: absolute; right: 0; top: 52px; min-width: 190px; background: var(--bg2); border: 1px solid var(--hair2); border-radius: 14px; padding: 6px; z-index: 70; }
.lang-menu li a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; font-size: 1.0625rem; }
.lang-menu li a[aria-current="true"] { background: var(--bg3); }
@media (hover: hover) and (pointer: fine) { .lang-menu li a:hover { background: var(--bg3); } }
@media (max-width: 899px) { .lang-menu { display: none; } }
.rowsx { display: grid; border-top: 1px solid var(--hair2); }
.rowsx > div { padding: 26px 0; border-bottom: 1px solid var(--hair); display: grid; gap: 8px; }
.rowsx h3 { font: 400 1.7rem/1.1 var(--serif); letter-spacing: -0.02em; }
.rowsx p { color: var(--tx2); max-width: 62ch; }
@media (min-width: 900px) { .rowsx > div { grid-template-columns: 4fr 8fr; gap: 40px; } }
.dl2 { display: grid; gap: 6px; } .dl2 dt { font: 500 0.9rem var(--mono); color: var(--tx3); margin-top: 14px; } .dl2 dd { color: var(--tx); max-width: 56ch; }
.sub { display: flex; gap: 8px; flex-wrap: wrap; }
.stack-lg { display: grid; gap: 28px; }
@media (max-width: 380px) { .top .lang-menu, .top .lang { display: none; } .login { padding: 0 14px; } }
svg.c-arrow { width: 18px; height: 18px; flex: none; }
.drawer a svg.c-arrow { width: 28px; height: 28px; color: var(--tx3); }
.devs svg.c-arrow { width: 34px; height: 34px; }
.hint-line { color: var(--tx3); font-size: 1rem; }

/* narrow screens and long words (DE/ES/PT/FR) */
.dip > section, .hero-grid > *, .split > *, .bound > div, .cert > div, .peri > *, .msg, .msg > *, .docs, .dcol, .wrap > * { min-width: 0; }
.serif, .ptitle, .lede, .copy, .msg b { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.msg code { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.msg .lab { max-width: 100%; }
.facts li, .chips li, .kv dd, .kline, .crit .t, .gate-note { overflow-wrap: anywhere; }