/* language.blue v3: concept-led technical entrance */
:root {
  --tech-ink: #07172c;
  --tech-ink-2: #0c2747;
  --tech-blue: #2d63ff;
  --tech-cyan: #38d1f4;
  --tech-violet: #7a5cff;
  --tech-mint: #38d8aa;
  --tech-text: #193653;
  --tech-muted: #61758d;
  --tech-line: #dce7f2;
  --tech-soft: #f4f8fc;
  --tech-code: #07182e;
}

.tech-hero {
  position: relative;
  min-height: 790px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 22%, rgba(60, 208, 244, .20), transparent 30%),
    radial-gradient(circle at 17% 12%, rgba(122, 92, 255, .20), transparent 30%),
    linear-gradient(148deg, #061326 0%, #0a2444 54%, #07162c 100%);
}
.tech-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image:
    linear-gradient(rgba(105, 178, 255, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 178, 255, .14) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.tech-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(540px, 1.08fr);
  align-items: center;
  gap: 62px;
  padding: 95px 0 112px;
}
.tech-hero-copy { position: relative; z-index: 3; }
.tech-hero .exp-kicker { color: #80e8ff; }
.tech-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: clamp(56px, 6.4vw, 88px);
  line-height: .98;
  letter-spacing: -.064em;
}
.tech-hero h1 span {
  display: block;
  background: linear-gradient(90deg, #fff 0%, #a8ecff 52%, #c2b8ff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tech-hero .hero-definition {
  max-width: 760px;
  margin: 29px 0 0;
  color: #c0d0e2;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
}
.tech-hero .hero-definition strong { color: #fff; font-weight: 720; }
.tech-hero-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.tech-hero-meta span {
  padding: 6px 9px;
  border: 1px solid rgba(142, 211, 255, .19);
  border-radius: 999px;
  color: #8faac5;
  background: rgba(255,255,255,.035);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.runtime-panel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(145, 213, 255, .24);
  border-radius: 25px;
  background: rgba(4, 18, 38, .79);
  box-shadow: 0 38px 90px rgba(0, 5, 18, .38), inset 0 1px rgba(255,255,255,.09);
  backdrop-filter: blur(18px);
}
.runtime-panel::after {
  content: "";
  position: absolute;
  inset: auto 10% -35% 10%;
  height: 50%;
  border-radius: 50%;
  background: rgba(48, 176, 255, .18);
  filter: blur(50px);
  pointer-events: none;
}
.runtime-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 17px;
  border-bottom: 1px solid rgba(145, 213, 255, .13);
  color: #7893ae;
  font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.runtime-head i { width: 7px; height: 7px; border-radius: 50%; background: #39d8ad; box-shadow: 0 0 13px #39d8ad; }
.runtime-trace { position: relative; display: grid; gap: 12px; padding: 19px; }
.trace-node {
  position: relative;
  padding: 16px 17px;
  border: 1px solid rgba(147, 202, 247, .13);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
.trace-node::before {
  content: "";
  position: absolute;
  left: 21px;
  bottom: -14px;
  width: 1px;
  height: 14px;
  background: linear-gradient(#3fcff5, rgba(63,207,245,.12));
}
.trace-node:last-child::before { display: none; }
.trace-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.trace-label strong { color: #eaf5ff; font: 750 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.trace-label span { color: #64809c; font: 700 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.trace-code { display: grid; gap: 4px; color: #9fb4c9; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.trace-code b { color: #7ee5ff; font-weight: 600; }
.trace-code em { color: #c0b7ff; font-style: normal; }
.trace-code mark { padding: 0; color: #5fe0b9; background: none; }
.trace-checks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 11px; }
.trace-checks span { padding: 7px 8px; border-radius: 8px; color: #8ea7bf; background: rgba(45, 111, 176, .09); font-size: 8px; font-weight: 720; }
.trace-checks span::before { content: "✓"; margin-right: 5px; color: #49d8ad; }
.trace-node.output { border-color: rgba(67, 222, 181, .21); background: rgba(31, 150, 119, .065); }
.trace-node.output .trace-label strong { color: #76e7c5; }
.runtime-foot { position: relative; z-index: 1; padding: 12px 17px; border-top: 1px solid rgba(145, 213, 255, .11); color: #6c849e; font-size: 9px; }
.runtime-foot strong { color: #b6cae0; }

.execution-band { position: relative; z-index: 4; margin-top: -50px; }
.execution-card {
  padding: 37px 42px;
  border: 1px solid var(--tech-line);
  border-radius: 23px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 30px 75px rgba(15,45,83,.13);
}
.execution-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: center; gap: 42px; }
.execution-top h2 { margin: 0; color: var(--tech-ink); font-size: clamp(31px, 3.3vw, 47px); line-height: 1.08; letter-spacing: -.045em; }
.execution-formula {
  padding: 20px 22px;
  border: 1px solid #1c3b5f;
  border-radius: 15px;
  color: #d8eaff;
  background: var(--tech-code);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.execution-formula b { color: #7fe2ff; }
.execution-formula em { color: #70e0bd; font-style: normal; }
.execution-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 31px; overflow: hidden; border: 1px solid var(--tech-line); border-radius: 15px; background: var(--tech-line); }
.execution-step { padding: 18px; background: #fff; }
.execution-step small { display: block; margin-bottom: 8px; color: #2a64ed; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.execution-step strong { display: block; margin-bottom: 5px; color: var(--tech-ink); font-size: 14px; }
.execution-step span { display: block; color: var(--tech-muted); font-size: 11px; line-height: 1.5; }

.tech-section { padding: 115px 0; }
.tech-section.soft { background: var(--tech-soft); }
.tech-section.dark { color: #fff; background: var(--tech-ink); }
.tech-section-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.55fr); gap: 50px; align-items: end; margin-bottom: 44px; }
.tech-section-head h2 { max-width: 800px; margin: 0; color: var(--tech-ink); font-size: clamp(38px, 4.4vw, 59px); line-height: 1.04; letter-spacing: -.052em; }
.tech-section.dark .tech-section-head h2 { color: #fff; }
.tech-section-head > p { margin: 0 0 6px; color: var(--tech-muted); font-size: 16px; }
.tech-section.dark .tech-section-head > p { color: #a4b8ce; }

.key-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.key-card {
  position: relative;
  min-height: 330px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 31px;
  overflow: hidden;
  border: 1px solid var(--tech-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 9px 35px rgba(15,45,83,.055);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.key-card:hover { transform: translateY(-5px); border-color: #b7cdf5; box-shadow: 0 24px 55px rgba(15,45,83,.11); }
.key-card.wide { grid-column: 1 / -1; min-height: 260px; grid-template-columns: minmax(0,.85fr) minmax(380px,1.15fr); grid-template-rows: auto; gap: 44px; align-items: center; }
.key-card .key-index { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; color: #2d63ff; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.key-card .key-index i { width: 34px; height: 1px; background: currentColor; opacity: .35; }
.key-card h3 { max-width: 580px; margin: 0 0 13px; color: var(--tech-ink); font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -.04em; }
.key-card p { max-width: 650px; margin: 0; color: var(--tech-muted); font-size: 14px; }
.key-links { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.key-links a { color: #245ff0; font-size: 12px; font-weight: 780; }
.key-links a.secondary-link { color: #60758e; }
.key-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.key-visual { position: relative; min-height: 114px; margin-top: 26px; padding: 17px; border: 1px solid #e2ebf4; border-radius: 15px; background: #f8fbfe; overflow: hidden; }
.key-card.wide .key-visual { min-height: 190px; margin: 0; }

.identity-visual { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.identity-file { padding: 11px; border: 1px solid #d7e4f0; border-radius: 9px; color: #526c86; background: #fff; font: 9px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.identity-file b { color: #245ff0; }
.identity-arrow { color: #8da4ba; font-size: 15px; }
.identity-id { padding: 13px; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#215cff,#7156ff); font: 750 9px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.entry-visual { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.entry-envelope, .operation-decl { padding: 13px; border-radius: 10px; color: #506b86; background: #fff; box-shadow: inset 0 0 0 1px #d8e5f0; font: 9px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.entry-envelope b, .operation-decl b { color: #235fef; }
.entry-join { width: 45px; height: 1px; background: linear-gradient(90deg,#30c9f1,#745bff); }
.frontier-visual { display: grid; gap: 10px; }
.frontier-lane { position: relative; height: 25px; padding-left: 86px; color: #56718b; font-size: 8px; font-weight: 800; }
.frontier-lane::before { content: ""; position: absolute; left: 86px; right: 0; top: 12px; height: 1px; background: #c9dbea; }
.frontier-lane strong { position: absolute; left: 0; top: 5px; width: 80px; color: #294866; }
.frontier-dot { position: absolute; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #2d63ff; box-shadow: 0 0 0 4px rgba(45,99,255,.08); }
.frontier-cut { position: absolute; left: 65%; top: 3px; bottom: 3px; width: 1px; background: #3bd3aa; box-shadow: 0 0 10px rgba(59,211,170,.55); }
.frontier-cut span { position: absolute; top: -3px; left: 6px; color: #289875; font-size: 7px; white-space: nowrap; }
.embed-visual { min-height: 150px; }
.embed-root { position: absolute; inset: 16px 24px 16px 22%; border: 1px solid #a8c8ee; border-radius: 15px; background: linear-gradient(145deg,#fff,#eef6ff); box-shadow: 0 16px 32px rgba(30,79,127,.08); }
.embed-root::before { content: "Agreement Root"; position: absolute; top: 13px; left: 15px; color: #143b69; font-size: 9px; font-weight: 850; }
.embed-child { position: absolute; left: 34%; top: 52px; width: 155px; height: 78px; padding: 14px; border: 1px solid #59ccec; border-radius: 12px; color: #19516f; background: rgba(218,247,255,.92); font-size: 9px; font-weight: 800; }
.embed-child small { display: block; margin-top: 5px; color: #5f8199; font-weight: 650; }
.embed-provider { position: absolute; left: 4px; top: 54px; width: 88px; padding: 10px; border-radius: 10px; color: #526d86; background: #fff; box-shadow: inset 0 0 0 1px #d6e4f0; font-size: 8px; font-weight: 800; text-align: center; }
.embed-line { position: absolute; left: 91px; top: 91px; width: calc(34% - 88px); height: 1px; background: repeating-linear-gradient(90deg,#38c9ef 0 5px,transparent 5px 8px); }
.mandate-visual-mini { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr; align-items: center; gap: 7px; }
.mandate-party, .mandate-doc-mini { padding: 10px; border-radius: 10px; text-align: center; font-size: 8px; font-weight: 780; }
.mandate-party { color: #536f89; background: #fff; box-shadow: inset 0 0 0 1px #d9e5f0; }
.mandate-doc-mini { color: #fff; background: linear-gradient(145deg,#235fff,#7357ff); }
.mandate-doc-mini small { display: block; margin-top: 4px; color: #c8d8ff; }
.mandate-arrow { color: #8aa3ba; }
.determinism-visual { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; }
.determinism-input, .determinism-output { padding: 16px; border-radius: 12px; font: 9px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.determinism-input { color: #506d88; background: #fff; box-shadow: inset 0 0 0 1px #d7e4f0; }
.determinism-output { color: #d7eaff; background: #071a31; }
.determinism-output b { color: #6fe3c0; }
.network-mini { position: relative; min-height: 180px; }
.network-mini-node { position: absolute; width: 105px; padding: 12px; border: 1px solid #c7dced; border-radius: 11px; color: #34516e; background: #fff; box-shadow: 0 8px 20px rgba(25,70,113,.07); font-size: 8px; font-weight: 800; text-align: center; }
.network-mini-node.main { left: 50%; top: 50%; width: 125px; color: #fff; border-color: transparent; background: linear-gradient(145deg,#215cff,#7256ff); transform: translate(-50%,-50%); }
.network-mini-node.a { left: 3%; top: 9%; }
.network-mini-node.b { right: 3%; top: 9%; }
.network-mini-node.c { left: 3%; bottom: 9%; }
.network-mini-node.d { right: 3%; bottom: 9%; }
.network-mini-line { position: absolute; left: 50%; top: 50%; width: 38%; height: 1px; transform-origin: 0 0; background: #a4c6e4; }
.network-mini-line.l1 { transform: rotate(205deg); }
.network-mini-line.l2 { transform: rotate(-25deg); }
.network-mini-line.l3 { transform: rotate(155deg); }
.network-mini-line.l4 { transform: rotate(25deg); }

.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 19px; }
.scenario-tile {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 25px;
  min-height: 250px;
  padding: 25px;
  border: 1px solid var(--tech-line);
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(15,45,83,.05);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.scenario-tile:hover { transform: translateY(-4px); border-color: #b8cdf4; box-shadow: 0 22px 50px rgba(15,45,83,.1); }
.scenario-glyph { position: relative; min-height: 190px; overflow: hidden; border: 1px solid #d8e8f4; border-radius: 17px; background: radial-gradient(circle at 50% 40%,#fff,#edf6fd); }
.scenario-glyph::before { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(51,154,226,.36); border-radius: 16px; box-shadow: inset -18px -18px 35px rgba(46,138,218,.08); transform: rotateX(8deg) rotateY(-10deg); }
.scenario-glyph::after { content: attr(data-glyph); position: absolute; inset: 0; display: grid; place-items: center; color: #2261ef; font-size: 38px; font-weight: 820; }
.scenario-tile .card-label { margin-bottom: 12px; }
.scenario-tile h3 { margin: 0 0 10px; color: var(--tech-ink); font-size: 23px; line-height: 1.16; letter-spacing: -.035em; }
.scenario-tile p { margin: 0; color: var(--tech-muted); font-size: 13px; }
.scenario-tile .scenario-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 19px; }
.scenario-tile .scenario-actions span { color: #245ff0; font-size: 12px; font-weight: 780; }
.scenario-tile .scenario-actions em { color: #73869a; font-size: 11px; font-style: normal; }

.stack-frame { overflow: hidden; border: 1px solid rgba(143,190,232,.16); border-radius: 23px; background: rgba(255,255,255,.035); }
.stack-row-v3 { display: grid; grid-template-columns: 190px 1fr 1.2fr; gap: 25px; align-items: center; padding: 22px 25px; border-bottom: 1px solid rgba(143,190,232,.12); }
.stack-row-v3:last-child { border-bottom: 0; }
.stack-row-v3 strong { color: #fff; font-size: 15px; }
.stack-row-v3 span { color: #7fe2ff; font-size: 11px; font-weight: 750; }
.stack-row-v3 p { margin: 0; color: #a1b5cb; font-size: 13px; }
.stack-note { margin: 30px 0 0; color: #99aec4; font-size: 15px; }
.stack-note strong { color: #fff; }

.not-replace { display: grid; grid-template-columns: .82fr 1.18fr; gap: 60px; align-items: center; }
.not-replace h2 { margin: 0; color: var(--tech-ink); font-size: clamp(36px,4vw,54px); line-height: 1.05; letter-spacing: -.05em; }
.not-replace p { color: var(--tech-muted); font-size: 16px; }
.system-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 11px; min-height: 290px; padding: 35px; border: 1px solid var(--tech-line); border-radius: 24px; background: radial-gradient(circle at 50% 50%,#fff,#f0f6fc); }
.system-cloud span { padding: 12px 14px; border: 1px solid #d6e4f0; border-radius: 999px; color: #4b6680; background: #fff; font-size: 12px; font-weight: 730; box-shadow: 0 8px 20px rgba(15,45,83,.05); }
.system-cloud strong { padding: 17px 20px; border-radius: 16px; color: #fff; background: linear-gradient(135deg,#215cff,#7558ff); box-shadow: 0 18px 35px rgba(55,73,255,.22); }

.path-grid-v3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.path-card-v3 { padding: 29px; border: 1px solid var(--tech-line); border-radius: 21px; background: #fff; }
.path-card-v3 small { color: #2d63ff; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.path-card-v3 h3 { margin: 15px 0 9px; color: var(--tech-ink); font-size: 24px; line-height: 1.15; letter-spacing: -.035em; }
.path-card-v3 p { margin: 0; color: var(--tech-muted); font-size: 13px; }
.path-card-v3 a { display: inline-block; margin-top: 21px; color: #245ff0; font-size: 12px; font-weight: 780; }

/* Concepts hub and detail pages */
.tech-inner-hero {
  position: relative;
  padding: 128px 0 88px;
  overflow: hidden;
  background: linear-gradient(180deg,#f4f8fd 0%,#fff 100%);
}
.tech-inner-hero::before { content: ""; position: absolute; right: -180px; top: -230px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle,rgba(63,194,255,.18),transparent 68%); }
.tech-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: #71849a; font-size: 11px; font-weight: 700; }
.tech-breadcrumbs a:hover { color: #245ff0; }
.tech-inner-hero h1 { max-width: 980px; margin: 0; color: var(--tech-ink); font-size: clamp(48px,6vw,79px); line-height: 1.01; letter-spacing: -.061em; }
.tech-inner-hero .exp-lede { max-width: 900px; }
.tech-status-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.tech-status { padding: 6px 9px; border: 1px solid #d4e2ee; border-radius: 999px; color: #5c738b; background: #fff; font-size: 9px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.tech-status.live { color: #147a5f; border-color: #bde8db; background: #f0fbf7; }
.tech-status.evolving { color: #95621c; border-color: #efdcb6; background: #fff9ec; }

.concept-map { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.concept-map-card { position: relative; min-height: 295px; display: flex; flex-direction: column; padding: 27px; overflow: hidden; border: 1px solid var(--tech-line); border-radius: 20px; background: #fff; transition: .2s ease; }
.concept-map-card:hover { transform: translateY(-4px); border-color: #b5cdf3; box-shadow: 0 20px 45px rgba(15,45,83,.09); }
.concept-map-card small { color: #2d63ff; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.concept-map-card h2 { margin: 16px 0 10px; color: var(--tech-ink); font-size: 26px; line-height: 1.12; letter-spacing: -.04em; }
.concept-map-card p { margin: 0; color: var(--tech-muted); font-size: 13px; }
.concept-map-card span { position: static; display: inline-block; margin-top: auto; padding-top: 18px; color: #245ff0; font-size: 12px; font-weight: 780; }

.concept-body { padding: 92px 0 116px; }
.concept-layout { display: grid; grid-template-columns: 245px minmax(0,760px) minmax(220px,1fr); gap: 50px; align-items: start; }
.concept-nav { position: sticky; top: 104px; padding: 18px; border: 1px solid var(--tech-line); border-radius: 17px; background: #fff; }
.concept-nav strong { display: block; margin-bottom: 10px; color: var(--tech-ink); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.concept-nav a { display: block; padding: 8px 9px; border-radius: 8px; color: #60758b; font-size: 11px; }
.concept-nav a:hover, .concept-nav a.current { color: #245ff0; background: #eef4ff; }
.concept-article { min-width: 0; }
.concept-article h2 { margin: 58px 0 17px; color: var(--tech-ink); font-size: 35px; line-height: 1.13; letter-spacing: -.04em; }
.concept-article h2:first-child { margin-top: 0; }
.concept-article h3 { margin: 30px 0 10px; color: var(--tech-ink); font-size: 21px; letter-spacing: -.025em; }
.concept-article p, .concept-article li { color: #506a84; font-size: 15px; }
.concept-article ul { padding-left: 21px; }
.concept-summary { padding: 24px 25px; border-left: 4px solid #2d63ff; border-radius: 0 15px 15px 0; color: #34516e; background: #eff5ff; font-size: 17px; line-height: 1.58; }
.concept-summary strong { color: var(--tech-ink); }
.concept-code { overflow: auto; padding: 22px; border: 1px solid #173758; border-radius: 16px; color: #d6e9fb; background: #07182d; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.concept-code b { color: #7fe2ff; }
.concept-code em { color: #70e0bd; font-style: normal; }
.concept-code .violet { color: #c0b5ff; }
.concept-diagram { margin: 28px 0; padding: 25px; border: 1px solid var(--tech-line); border-radius: 19px; background: #f8fbfe; }
.mechanism-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.mechanism-node { min-height: 112px; padding: 16px; border: 1px solid #d4e3ef; border-radius: 13px; color: #557089; background: #fff; font-size: 11px; }
.mechanism-node strong { display: block; margin-bottom: 7px; color: var(--tech-ink); font-size: 13px; }
.mechanism-node.highlight { color: #a8bed4; border-color: #173a5d; background: #081a32; }
.mechanism-node.highlight strong { color: #7fe2ff; }
.concept-aside { position: sticky; top: 104px; display: grid; gap: 13px; }
.aside-card { padding: 20px; border: 1px solid var(--tech-line); border-radius: 17px; background: #fff; }
.aside-card.dark { color: #fff; border-color: #183856; background: #07192f; }
.aside-card small { display: block; margin-bottom: 9px; color: #2d63ff; font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.aside-card.dark small { color: #72dcfa; }
.aside-card strong { display: block; margin-bottom: 7px; color: var(--tech-ink); font-size: 16px; }
.aside-card.dark strong { color: #fff; }
.aside-card p { margin: 0; color: #6a7f94; font-size: 11px; }
.aside-card.dark p { color: #9eb2c7; }
.aside-card a { display: inline-block; margin-top: 14px; color: #245ff0; font-size: 11px; font-weight: 780; }
.aside-card.dark a { color: #75defa; }
.contrast-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
.contrast-card { padding: 20px; border: 1px solid var(--tech-line); border-radius: 15px; background: #fff; }
.contrast-card strong { display: block; margin-bottom: 7px; color: var(--tech-ink); }
.contrast-card p { margin: 0; font-size: 12px; }
.next-panel { margin-top: 62px; padding: 31px; border-radius: 21px; color: #fff; background: linear-gradient(135deg,#07192e,#0d3159); }
.next-panel h3 { margin: 0 0 9px; color: #fff; font-size: 27px; }
.next-panel p { margin: 0; color: #adc0d4; }
.next-panel .exp-button.secondary { color: #fff; border-color: rgba(165,212,247,.28); background: rgba(255,255,255,.06); }

/* Scenario pages */
.scenario-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(440px,.72fr); gap: 60px; align-items: center; }
.scenario-hero-art { min-height: 380px; position: relative; border: 1px solid #d5e5f1; border-radius: 25px; background: radial-gradient(circle at 50% 42%,#fff,#edf6fd); box-shadow: 0 30px 70px rgba(15,45,83,.11); overflow: hidden; }
.scenario-hero-art .cube { position: absolute; width: 130px; height: 130px; border: 1px solid rgba(43,146,218,.48); border-radius: 19px; background: linear-gradient(145deg,rgba(255,255,255,.85),rgba(69,166,231,.09)); box-shadow: inset -18px -18px 30px rgba(40,130,208,.06),0 22px 35px rgba(23,76,123,.1); }
.scenario-hero-art .cube::before { content: attr(data-label); position: absolute; left: 50%; top: -31px; padding: 5px 9px; border: 1px solid #cddfec; border-radius: 999px; color: #153c69; background: #fff; font-size: 8px; font-weight: 850; white-space: nowrap; transform: translateX(-50%); }
.scenario-hero-art .cube::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(65,163,227,.18); border-radius: 13px; }
.scenario-hero-art .line { position: absolute; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg,#54ccef,#7b60ff); }
.scenario-hero-art .dash { background: repeating-linear-gradient(90deg,#54ccef 0 5px,transparent 5px 9px); }
.scenario-hero-art .label { position: absolute; padding: 5px 7px; border-radius: 999px; color: #50708e; background: rgba(255,255,255,.9); box-shadow: 0 5px 15px rgba(15,45,83,.08); font-size: 7px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.scenario-body { padding: 92px 0 116px; }
.scenario-layout { display: grid; grid-template-columns: minmax(0,780px) minmax(280px,1fr); gap: 64px; align-items: start; }
.scenario-copy h2 { margin: 58px 0 16px; color: var(--tech-ink); font-size: 35px; line-height: 1.12; letter-spacing: -.04em; }
.scenario-copy h2:first-child { margin-top: 0; }
.scenario-copy p, .scenario-copy li { color: #506a84; font-size: 15px; }
.scenario-steps { display: grid; gap: 12px; margin: 25px 0; counter-reset: scenario; }
.scenario-step { position: relative; padding: 21px 21px 21px 65px; border: 1px solid var(--tech-line); border-radius: 16px; background: #fff; }
.scenario-step::before { counter-increment: scenario; content: counter(scenario); position: absolute; left: 19px; top: 19px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #245ff0; background: #edf4ff; font-size: 10px; font-weight: 850; }
.scenario-step strong { display: block; margin-bottom: 5px; color: var(--tech-ink); }
.scenario-step p { margin: 0; font-size: 13px; }
.inspect-list { display: grid; gap: 9px; padding: 0; list-style: none; }
.inspect-list li { display: flex; gap: 10px; }
.inspect-list li::before { content: "→"; color: #245ff0; font-weight: 850; }
.scenario-sidebar { position: sticky; top: 102px; display: grid; gap: 14px; }
.scenario-cta { padding: 27px; border-radius: 20px; color: #fff; background: linear-gradient(145deg,#081a31,#0e3560); }
.scenario-cta small { display: block; margin-bottom: 9px; color: #77ddfa; font-size: 8px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.scenario-cta h3 { margin: 0 0 9px; color: #fff; font-size: 23px; }
.scenario-cta p { margin: 0; color: #a9bdd1; font-size: 12px; }
.scenario-cta .exp-button { width: 100%; margin-top: 19px; }
.scenario-facts { padding: 22px; border: 1px solid var(--tech-line); border-radius: 18px; background: #fff; }
.scenario-facts strong { display: block; margin-bottom: 12px; color: var(--tech-ink); }
.scenario-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; font-size: 10px; }
.scenario-facts dt { color: #7890a7; }
.scenario-facts dd { margin: 0; color: #35516d; font-weight: 720; }

/* Playground additions */
.play-learn-link { display: inline-flex; align-items: center; padding: 8px 10px; border: 1px solid rgba(161,201,243,.18); border-radius: 9px; color: #9fc3e4; background: rgba(255,255,255,.035); font-size: 10px; font-weight: 750; }
.play-learn-link:hover { color: #fff; border-color: rgba(111,202,255,.44); }

.tech-footer { padding: 67px 0 25px; border-top: 1px solid var(--tech-line); background: #f7faff; }
.tech-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 50px; }
.tech-footer-brand p { max-width: 330px; color: #71849a; font-size: 12px; }
.tech-footer-grid > div:not(.tech-footer-brand) { display: grid; align-content: start; gap: 8px; }
.tech-footer-grid > div > strong { margin-bottom: 4px; color: var(--tech-ink); font-size: 11px; }
.tech-footer-grid > div > a { color: #62778d; font-size: 11px; }
.tech-footer-grid > div > a:hover { color: #245ff0; }
.tech-footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 19px; border-top: 1px solid var(--tech-line); color: #8999aa; font-size: 9px; }

@media (max-width: 1080px) {
  .tech-hero-grid { grid-template-columns: 1fr; }
  .runtime-panel { width: min(760px,100%); }
  .execution-top { grid-template-columns: 1fr; }
  .concept-map { grid-template-columns: repeat(2,1fr); }
  .concept-layout { grid-template-columns: 210px minmax(0,1fr); }
  .concept-aside { grid-column: 2; position: static; grid-template-columns: repeat(2,1fr); }
  .scenario-hero-grid { grid-template-columns: 1fr; }
  .scenario-hero-art { max-width: 720px; }
  .tech-footer-grid { grid-template-columns: 1.4fr repeat(2,1fr); }
}

@media (max-width: 820px) {
  .tech-hero { min-height: auto; }
  .tech-hero-grid { padding: 78px 0 96px; }
  .tech-hero h1 { font-size: clamp(48px,12vw,70px); }
  .execution-band { margin-top: -35px; }
  .execution-card { padding: 29px; }
  .execution-steps { grid-template-columns: repeat(2,1fr); }
  .tech-section { padding: 82px 0; }
  .tech-section-head { grid-template-columns: 1fr; gap: 17px; }
  .key-grid, .scenario-grid { grid-template-columns: 1fr; }
  .key-card.wide { grid-column: auto; grid-template-columns: 1fr; }
  .scenario-tile { grid-template-columns: 125px 1fr; }
  .stack-row-v3 { grid-template-columns: 150px 1fr; }
  .stack-row-v3 p { grid-column: 1 / -1; }
  .not-replace { grid-template-columns: 1fr; }
  .path-grid-v3 { grid-template-columns: 1fr; }
  .concept-map { grid-template-columns: 1fr; }
  .concept-layout { grid-template-columns: 1fr; }
  .concept-nav, .concept-aside { position: static; grid-column: auto; }
  .concept-nav { display: none; }
  .concept-aside { grid-template-columns: repeat(2,1fr); }
  .scenario-layout { grid-template-columns: 1fr; }
  .scenario-sidebar { position: static; grid-template-columns: repeat(2,1fr); }
  .tech-footer-grid { grid-template-columns: repeat(2,1fr); }
  .tech-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .tech-hero-grid { gap: 40px; }
  .tech-hero h1 { font-size: 45px; }
  .runtime-trace { padding: 13px; }
  .trace-checks { grid-template-columns: 1fr; }
  .execution-card { padding: 22px; }
  .execution-formula { overflow-x: auto; font-size: 10px; }
  .execution-steps { grid-template-columns: 1fr; }
  .key-card { min-height: 0; padding: 24px; }
  .identity-visual { grid-template-columns: 1fr; }
  .identity-arrow { transform: rotate(90deg); text-align: center; }
  .entry-visual, .determinism-visual { grid-template-columns: 1fr; }
  .entry-join { width: 1px; height: 28px; margin: auto; }
  .scenario-tile { grid-template-columns: 1fr; }
  .scenario-glyph { min-height: 150px; }
  .stack-row-v3 { grid-template-columns: 1fr; gap: 7px; }
  .mechanism-flow { grid-template-columns: 1fr; }
  .contrast-grid { grid-template-columns: 1fr; }
  .concept-aside, .scenario-sidebar { grid-template-columns: 1fr; }
  .scenario-hero-art { min-height: 310px; }
  .tech-footer-grid { grid-template-columns: 1fr; }
  .tech-footer-brand { grid-column: auto; }
  .tech-footer-bottom { display: block; }
}


/* --------------------------------------------------------------------------
   language.blue v4 — agentic executable documents and application graphs
   -------------------------------------------------------------------------- */

:root {
  --v4-night: #061326;
  --v4-night-2: #0a2444;
  --v4-ink: #07172c;
  --v4-text: #193653;
  --v4-muted: #60758e;
  --v4-line: #dce7f2;
  --v4-blue: #285fff;
  --v4-violet: #765cff;
  --v4-cyan: #35cef1;
  --v4-mint: #39d8ad;
  --v4-gold: #f3bd56;
  --v4-soft: #f4f8fc;
  --v4-card: rgba(255,255,255,.92);
}

.v4-nav .exp-links { margin-left: 30px; gap: 1px; }
.v4-nav .exp-links a { padding-inline: 9px; font-size: 13px; }
.v4-nav .exp-actions { gap: 5px; }
.v4-nav .exp-actions .exp-docs { padding-inline: 8px; }

.v4-eyebrow {
  margin: 0 0 15px;
  color: var(--v4-blue);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.v4-lede {
  margin: 22px 0 0;
  color: var(--v4-muted);
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.58;
}
.v4-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: #a9c5ff;
  font-size: 14px;
  font-weight: 760;
}
.v4-text-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.v4-section {
  position: relative;
  padding: 116px 0;
}
.v4-section-head {
  margin-bottom: 44px;
}
.v4-section-head.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(310px, .55fr);
  align-items: end;
  gap: 62px;
}
.v4-section-head h2 {
  max-width: 880px;
  margin: 0;
  color: var(--v4-ink);
  font-size: clamp(38px, 4.5vw, 62px);
  line-height: 1.035;
  letter-spacing: -.052em;
}
.v4-section-head > p {
  margin: 0 0 5px;
  color: var(--v4-muted);
  font-size: 16px;
  line-height: 1.62;
}
.v4-section-head.light h2 { color: #fff; }
.v4-section-head.light > p { color: #a8bdd4; }
.v4-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 35px; }

/* Hero */
.v4-hero {
  position: relative;
  min-height: 830px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 83% 17%, rgba(52,206,241,.20), transparent 29%),
    radial-gradient(circle at 13% 10%, rgba(118,92,255,.24), transparent 31%),
    linear-gradient(147deg, #051225 0%, #0a2443 53%, #07172e 100%);
}
.v4-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image:
    linear-gradient(rgba(105,178,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,178,255,.14) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.v4-hero::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -160px;
  bottom: -300px;
  border: 1px solid rgba(100,205,255,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 75px rgba(73,160,255,.03), 0 0 0 150px rgba(73,160,255,.025);
}
.v4-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(540px, 1.05fr);
  align-items: center;
  gap: 64px;
  padding: 96px 0 108px;
}
.v4-hero-copy { position: relative; z-index: 2; }
.v4-hero .v4-eyebrow { color: #81e7ff; }
.v4-hero h1 {
  max-width: 750px;
  margin: 0;
  color: #fff;
  font-size: clamp(56px, 6.55vw, 91px);
  line-height: .965;
  letter-spacing: -.067em;
}
.v4-hero h1 span {
  display: block;
  background: linear-gradient(91deg,#fff 2%,#a6ecff 51%,#c8bcff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v4-hero-lede {
  max-width: 760px;
  margin: 28px 0 0;
  color: #c4d4e6;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.56;
}
.v4-hero-agent {
  max-width: 720px;
  margin: 15px 0 0;
  color: #8fa7c1;
  font-size: 15px;
  line-height: 1.6;
}
.v4-hero-actions { align-items: center; }
.v4-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.v4-hero-tags span {
  padding: 6px 9px;
  border: 1px solid rgba(142,211,255,.18);
  border-radius: 999px;
  color: #8fa9c4;
  background: rgba(255,255,255,.035);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

/* Interactive agent proof */
.agent-demo {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border: 1px solid rgba(149,215,255,.24);
  border-radius: 26px;
  background: rgba(4,18,38,.79);
  box-shadow: 0 42px 105px rgba(0,5,18,.42), inset 0 1px rgba(255,255,255,.09);
  backdrop-filter: blur(18px);
}
.agent-demo::after {
  content: "";
  position: absolute;
  inset: auto 12% -32% 12%;
  height: 48%;
  border-radius: 50%;
  background: rgba(48,176,255,.16);
  filter: blur(55px);
  pointer-events: none;
}
.agent-demo-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 17px;
  border-bottom: 1px solid rgba(145,213,255,.13);
  color: #7893ae;
  font: 700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.agent-demo-bar span { display: flex; align-items: center; gap: 8px; }
.agent-demo-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--v4-mint); box-shadow: 0 0 14px var(--v4-mint); }
.agent-demo-bar a { color: #98c8ff; }
.agent-demo-doc { position: relative; z-index: 2; padding: 22px; }
.agent-demo-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.agent-demo-title small { display: block; color: #718ba6; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.agent-demo-title strong { display: block; margin-top: 2px; color: #eef7ff; font-size: 19px; }
.agent-demo-id { padding: 6px 8px; border: 1px solid rgba(137,203,255,.14); border-radius: 8px; color: #68839d; background: rgba(255,255,255,.025); font: 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.agent-price { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 20px 0 15px; padding: 17px 18px; border: 1px solid rgba(133,207,255,.12); border-radius: 14px; background: rgba(255,255,255,.035); }
.agent-price small { color: #7e98b2; font-size: 10px; }
.agent-price strong { color: #fff; font-size: 28px; letter-spacing: -.035em; }
.agent-mandate { padding: 15px 16px; border: 1px solid rgba(118,92,255,.25); border-radius: 14px; background: linear-gradient(145deg,rgba(118,92,255,.10),rgba(53,206,241,.035)); }
.agent-mandate-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.agent-mandate-head span { color: #c5bcff; font: 750 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.agent-mandate-head b { padding: 4px 7px; border-radius: 999px; color: #74e5c3; background: rgba(57,216,173,.08); font-size: 7px; letter-spacing: .09em; }
.agent-mandate dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
.agent-mandate dl div { display: grid; gap: 2px; }
.agent-mandate dt { color: #637e99; font-size: 8px; text-transform: uppercase; }
.agent-mandate dd { margin: 0; color: #b7c9db; font-size: 10px; }
.agent-choices { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 14px; }
.agent-choices button {
  padding: 12px 13px;
  border: 1px solid rgba(139,204,255,.15);
  border-radius: 12px;
  color: #a5bbd0;
  background: rgba(255,255,255,.03);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.agent-choices button:hover { transform: translateY(-2px); border-color: rgba(122,188,255,.38); }
.agent-choices button.active { border-color: rgba(72,207,246,.48); background: rgba(48,159,214,.10); box-shadow: inset 0 0 0 1px rgba(57,212,246,.08); }
.agent-choices button span { display: block; color: #718ba4; font-size: 8px; }
.agent-choices button strong { display: block; margin-top: 3px; color: #eef7ff; font-size: 11px; }
.agent-result { margin-top: 14px; padding: 14px 15px; border: 1px solid rgba(57,216,173,.22); border-radius: 14px; background: rgba(34,155,119,.06); transition: border-color .2s ease, background .2s ease; }
.agent-result.withheld { border-color: rgba(244,173,85,.30); background: rgba(204,111,37,.07); }
.agent-result-status { display: flex; align-items: center; gap: 7px; }
.agent-result-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--v4-mint); box-shadow: 0 0 12px rgba(57,216,173,.75); }
.agent-result.withheld .agent-result-status i { background: var(--v4-gold); box-shadow: 0 0 12px rgba(243,189,86,.65); }
.agent-result-status strong { color: #73e5c3; font-size: 9px; letter-spacing: .1em; }
.agent-result.withheld .agent-result-status strong { color: #f5c66e; }
.agent-result p { margin: 7px 0 10px; color: #9eb5ca; font-size: 10px; line-height: 1.5; }
.agent-result-proof { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.agent-result-proof span { padding: 6px 7px; border-radius: 7px; color: #839bb3; background: rgba(255,255,255,.025); font-size: 8px; }
.agent-result-proof b { color: #66839e; font-weight: 700; }
.agent-result-proof em { color: #80e6c7; font-style: normal; }
.agent-result.withheld .agent-result-proof em { color: #f5c66e; }
.agent-demo-foot { position: relative; z-index: 2; margin: 0; padding: 13px 18px; border-top: 1px solid rgba(145,213,255,.11); color: #6f89a3; font-size: 9px; line-height: 1.5; }

/* proof strip */
.v4-proof-strip { position: relative; z-index: 5; margin-top: -31px; }
.v4-proof-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  overflow: hidden;
  border: 1px solid var(--v4-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,45,83,.13);
}
.v4-proof-grid a { min-height: 92px; display: flex; flex-direction: column; justify-content: center; padding: 18px; border-right: 1px solid var(--v4-line); transition: background .18s ease; }
.v4-proof-grid a:last-child { border-right: 0; }
.v4-proof-grid a:hover { background: #f6f9fd; }
.v4-proof-grid strong { color: var(--v4-ink); font-size: 12px; }
.v4-proof-grid span { margin-top: 4px; color: var(--v4-muted); font-size: 9px; line-height: 1.45; }

/* Agent action */
.agent-action-section { padding-top: 135px; }
.agent-action-flow { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--v4-line); border-radius: 20px; background: var(--v4-line); }
.agent-action-flow article { min-height: 260px; padding: 26px; background: #fff; }
.agent-action-flow article span { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg,var(--v4-blue),var(--v4-violet)); font-size: 9px; font-weight: 850; }
.agent-action-flow h3 { margin: 23px 0 10px; color: var(--v4-ink); font-size: 22px; line-height: 1.16; letter-spacing: -.035em; }
.agent-action-flow p { margin: 0; color: var(--v4-muted); font-size: 13px; line-height: 1.58; }
.agent-action-flow code { padding: 2px 4px; border-radius: 5px; color: #245ff0; background: #eef4ff; font-size: 11px; }
.direct-mandated { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 24px; padding: 25px 28px; border: 1px solid #cfdff0; border-radius: 18px; background: #f7faff; }
.direct-mandated > div { display: grid; gap: 5px; }
.direct-mandated small { color: #2c63e9; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.direct-mandated strong { color: #173a5b; font-size: 13px; line-height: 1.45; }
.direct-mandated > i { width: 1px; height: 58px; background: #ccdceb; }
.direct-mandated p { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid #dce7f2; color: #5f748b; font-size: 13px; }
.direct-mandated p b { color: #143653; }

/* Application graph */
.graph-section { overflow: hidden; color: #fff; background:
  radial-gradient(circle at 76% 28%, rgba(53,206,241,.14), transparent 30%),
  linear-gradient(145deg,#061326,#0b284a 60%,#07172e); }
.graph-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(560px,1.2fr); align-items: center; gap: 66px; }
.graph-copy .v4-eyebrow { color: #78e4ff; }
.graph-copy h2 { margin: 0; color: #fff; font-size: clamp(44px,5vw,68px); line-height: 1; letter-spacing: -.058em; }
.graph-copy .v4-lede { color: #b5c8dc; }
.graph-principles { display: grid; gap: 14px; margin-top: 29px; }
.graph-principles div { padding-left: 17px; border-left: 2px solid rgba(74,207,241,.48); }
.graph-principles strong { display: block; color: #eef7ff; font-size: 13px; }
.graph-principles span { display: block; margin-top: 3px; color: #8ea7bf; font-size: 12px; line-height: 1.55; }
.host-rule { margin: 25px 0; padding: 17px 18px; border: 1px solid rgba(141,205,255,.16); border-radius: 14px; color: #89a3bd; background: rgba(255,255,255,.035); font-size: 12px; line-height: 1.6; }
.host-rule strong { color: #fff; }

.app-graph { position: relative; min-height: 620px; }
.app-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.app-graph svg path { fill: none; stroke: url(#graphLine); stroke-width: 2; opacity: .42; }
.app-graph svg path.dashed { stroke-dasharray: 7 8; opacity: .22; }
.graph-node {
  position: absolute;
  width: 176px;
  min-height: 136px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  border: 1px solid rgba(155,220,255,.34);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg,rgba(255,255,255,.14),rgba(67,151,255,.045));
  box-shadow: inset 0 1px rgba(255,255,255,.35),0 24px 48px rgba(0,6,20,.27);
  backdrop-filter: blur(11px);
  transition: transform .2s ease,border-color .2s ease;
}
.graph-node::after { content:""; position:absolute; inset:9px; border:1px solid rgba(147,220,255,.13); border-radius:14px; pointer-events:none; }
.graph-node:hover { transform: translateY(-5px); border-color: rgba(156,233,255,.82); }
.graph-node small { position: relative; z-index: 1; color: #7f9bb7; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.graph-node strong { position: relative; z-index: 1; margin-top: 3px; font-size: 17px; }
.graph-node span { position: relative; z-index: 1; margin-top: 4px; color: #91a9c1; font-size: 9px; }
.graph-node.main { left: 37%; top: 37%; width: 205px; min-height: 175px; border-color: rgba(107,213,255,.57); background: linear-gradient(145deg,rgba(255,255,255,.19),rgba(39,116,255,.11)); }
.graph-node.policy { left: 4%; top: 7%; }
.graph-node.mandate { right: 2%; top: 5%; }
.graph-node.orders { right: 0; top: 43%; }
.graph-node.paynote { right: 12%; bottom: 1%; }
.graph-node.module { left: 7%; bottom: 2%; }
.graph-caption { position: absolute; left: 31%; bottom: 5px; display: flex; gap: 8px; align-items: center; color: #667f99; font-size: 8px; }
.graph-caption span { color: #8fcce5; text-transform: uppercase; font-weight: 800; }

/* Agent extension */
.extend-section { background: #f5f8fc; }
.extension-pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; }
.extension-pipeline > div { min-height: 180px; padding: 21px; border: 1px solid var(--v4-line); border-radius: 17px; background: #fff; box-shadow: 0 10px 28px rgba(15,45,83,.04); }
.extension-pipeline > i { align-self: center; color: #9bb1c6; font-style: normal; }
.extension-pipeline b { display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #285fff; background: #edf3ff; font-size: 8px; }
.extension-pipeline strong { display: block; margin-top: 25px; color: var(--v4-ink); font-size: 16px; }
.extension-pipeline span { display: block; margin-top: 7px; color: var(--v4-muted); font-size: 11px; line-height: 1.5; }
.proof-distinctions { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-top: 20px; }
.proof-distinctions div { padding: 15px; border: 1px solid #d6e3ef; border-radius: 13px; background: rgba(255,255,255,.72); }
.proof-distinctions strong { display: block; color: #1b456d; font-size: 10px; }
.proof-distinctions span { display: block; margin-top: 4px; color: #697e93; font-size: 9px; line-height: 1.45; }
.extension-honesty { margin: 18px 0 0; padding: 16px 18px; border-left: 3px solid #f0b84e; color: #677c91; background: #fff9ea; font-size: 12px; }
.extension-honesty b { color: #6b4d11; }

/* Build patterns */
.build-patterns-section { background: #fff; }
.build-patterns { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.build-pattern { min-height: 260px; display: flex; flex-direction: column; padding: 27px; border: 1px solid var(--v4-line); border-radius: 20px; background: #fff; box-shadow: 0 9px 30px rgba(15,45,83,.045); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.build-pattern:hover { transform: translateY(-5px); border-color: #b7cdf5; box-shadow: 0 22px 48px rgba(15,45,83,.10); }
.build-pattern small { color: #2b63ef; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.build-pattern h3 { margin: 25px 0 10px; color: var(--v4-ink); font-size: 25px; line-height: 1.12; letter-spacing: -.04em; }
.build-pattern p { margin: 0; color: var(--v4-muted); font-size: 13px; line-height: 1.58; }
.build-pattern > span { margin-top: auto; padding-top: 25px; color: #275ff0; font-size: 11px; font-weight: 780; }
.build-pattern.featured { grid-column: span 2; min-height: 300px; color: #fff; background:
  radial-gradient(circle at 82% 15%,rgba(53,206,241,.20),transparent 32%),
  linear-gradient(140deg,#061326,#123f72); }
.build-pattern.featured small { color: #77e3ff; }
.build-pattern.featured h3 { margin-top: 32px; color: #fff; font-size: 42px; }
.build-pattern.featured p { max-width: 610px; color: #b7cbe0; font-size: 15px; }
.build-pattern.featured > span { color: #9ceaff; }

/* Concepts */
.concepts-section { background: #f5f8fc; }
.core-concepts { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.core-concepts > a { min-height: 330px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--v4-line); border-radius: 20px; background: #fff; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.core-concepts > a:hover { transform: translateY(-5px); border-color:#b8cdf5; box-shadow:0 22px 48px rgba(15,45,83,.09); }
.concept-symbol { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg,var(--v4-blue),var(--v4-violet)); box-shadow: 0 12px 24px rgba(57,83,255,.20); font: 800 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.core-concepts small { margin-top: 27px; color: #2d63ed; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.core-concepts h3 { margin: 10px 0 9px; color: var(--v4-ink); font-size: 23px; line-height: 1.13; letter-spacing: -.035em; }
.core-concepts p { margin: 0; color: var(--v4-muted); font-size: 12px; line-height: 1.58; }
.core-concepts > a > span { margin-top: auto; padding-top: 23px; color: #285fff; font-size: 10px; font-weight: 780; }
.secondary-concepts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.secondary-concepts a { padding: 10px 12px; border: 1px solid #d7e3ef; border-radius: 999px; color: #47617a; background: rgba(255,255,255,.75); font-size: 10px; font-weight: 700; }
.secondary-concepts a:hover { color:#245ff0; border-color:#b9cff4; }

/* MyOS */
.myos-section { background: #fff; overflow: hidden; }
.myos-grid { display: grid; grid-template-columns: minmax(0,.72fr) minmax(610px,1.28fr); align-items: center; gap: 64px; }
.myos-copy h2 { margin: 0; color: var(--v4-ink); font-size: clamp(42px,4.7vw,64px); line-height: 1.03; letter-spacing: -.055em; }
.myos-model-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin: 28px 0 0; padding: 0; list-style: none; }
.myos-model-list li { padding: 11px 12px; border: 1px solid #dce7f2; border-radius: 11px; background: #f8fbfe; }
.myos-model-list b { display: block; color: #153b61; font-size: 11px; }
.myos-model-list span { display: block; margin-top: 2px; color: #667d94; font-size: 9px; }
.myos-separation { margin: 20px 0 0; color: #62778d; font-size: 12px; line-height: 1.58; }
.myos-separation strong { color: #153a5e; }
.myos-visual { position: relative; padding: 14px; border: 1px solid #d3e1ee; border-radius: 24px; background: #fff; box-shadow: 0 36px 80px rgba(15,45,83,.15); transform: perspective(1200px) rotateY(-3deg); }
.myos-visual img { border-radius: 14px; }
.myos-underlay { position: absolute; left: 6%; right: 6%; bottom: -54px; padding: 16px; border: 1px solid rgba(113,193,255,.32); border-radius: 15px; color: #fff; background: rgba(7,30,57,.94); box-shadow: 0 20px 40px rgba(0,10,30,.28); backdrop-filter: blur(12px); }
.myos-underlay strong { display: block; font-size: 11px; }
.myos-underlay div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.myos-underlay span { padding: 5px 7px; border: 1px solid rgba(125,211,255,.18); border-radius: 999px; color: #9fbcd7; font-size: 8px; }

/* Providers */
.providers-section { color: #fff; background:
  radial-gradient(circle at 20% 18%,rgba(118,92,255,.17),transparent 28%),
  radial-gradient(circle at 82% 28%,rgba(53,206,241,.14),transparent 32%),
  #061326; }
.providers-section .v4-eyebrow { color:#7fe5ff; }
.provider-map { position: relative; min-height: 430px; display: grid; grid-template-columns: repeat(4,1fr); align-items: start; gap: 16px; padding-top: 8px; }
.provider-map::before { content:""; position:absolute; left:8%; right:8%; top:168px; height:1px; background:linear-gradient(90deg,transparent,#3cccef 20%,#765cff 80%,transparent); opacity:.48; }
.provider-card { position: relative; z-index: 2; min-height: 155px; padding: 20px; border: 1px solid rgba(142,207,255,.18); border-radius: 17px; background: rgba(255,255,255,.04); backdrop-filter: blur(10px); }
.provider-card i { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(133,213,255,.20); border-radius:12px; color:#7fe4ff; background:rgba(53,206,241,.06); font-size:9px; font-style:normal; font-weight:850; }
.provider-card strong { display:block; margin-top:20px; color:#fff; font-size:15px; }
.provider-card span { display:block; margin-top:5px; color:#8fa8c0; font-size:10px; line-height:1.5; }
.provider-center { position:absolute; left:50%; bottom:0; width:270px; min-height:165px; transform:translateX(-50%); display:flex; flex-direction:column; justify-content:center; padding:28px; border:1px solid rgba(119,217,255,.46); border-radius:23px; text-align:center; background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(42,118,255,.09)); box-shadow:0 30px 60px rgba(0,5,18,.35),inset 0 1px rgba(255,255,255,.3); }
.provider-center small { color:#7fe4ff; font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.provider-center strong { margin-top:4px; font-size:30px; }
.provider-center span { margin-top:6px; color:#91abc3; font-size:10px; }
.providers-rule { max-width:930px; display:grid; grid-template-columns:auto 1fr; gap:18px; margin:35px 0 25px; padding:19px 21px; border:1px solid rgba(145,211,255,.16); border-radius:15px; background:rgba(255,255,255,.035); }
.providers-rule strong { color:#fff; font-size:13px; }
.providers-rule span { color:#91a9c1; font-size:12px; line-height:1.55; }

/* scenarios */
.scenarios-section { background:#fff; }
.scenario-cards-v4 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.scenario-card-v4 { min-height:330px; display:flex; flex-direction:column; padding:29px; border:1px solid var(--v4-line); border-radius:22px; background:#fff; box-shadow:0 10px 32px rgba(15,45,83,.045); }
.scenario-card-v4.primary { color:#fff; background:
  radial-gradient(circle at 85% 15%,rgba(53,206,241,.19),transparent 30%),
  linear-gradient(145deg,#061326,#123c6e); }
.scenario-no { color:#2b63ef; font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.scenario-card-v4.primary .scenario-no { color:#7de3ff; }
.scenario-card-v4 h3 { max-width:520px; margin:30px 0 11px; color:var(--v4-ink); font-size:31px; line-height:1.1; letter-spacing:-.044em; }
.scenario-card-v4.primary h3 { color:#fff; }
.scenario-card-v4 p { margin:0; color:var(--v4-muted); font-size:13px; line-height:1.58; }
.scenario-card-v4.primary p { color:#b7cbe0; }
.scenario-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:21px; }
.scenario-tags span { padding:5px 7px; border:1px solid #d8e4ef; border-radius:999px; color:#657b91; background:#f8fbfe; font-size:8px; }
.scenario-card-v4.primary .scenario-tags span { border-color:rgba(130,207,255,.16); color:#9ab6d0; background:rgba(255,255,255,.04); }
.scenario-card-v4 > div:last-child { display:flex; gap:17px; margin-top:auto; padding-top:28px; }
.scenario-card-v4 > div:last-child a { color:#285fff; font-size:11px; font-weight:780; }
.scenario-card-v4.primary > div:last-child a { color:#8be9ff; }

/* stack */
.stack-section { background:#f5f8fc; }
.stack-v4 { display:grid; grid-template-columns:repeat(2,1fr); overflow:hidden; border:1px solid #d7e3ef; border-radius:20px; background:#d7e3ef; gap:1px; }
.stack-v4 a { display:grid; grid-template-columns:45px 180px 1fr; align-items:center; gap:16px; min-height:110px; padding:20px; background:#fff; }
.stack-v4 a:hover { background:#f9fbfe; }
.stack-v4 span { display:grid; width:35px; height:35px; place-items:center; border-radius:10px; color:#285fff; background:#edf3ff; font-size:8px; font-weight:850; }
.stack-v4 strong { color:#143a5f; font-size:14px; }
.stack-v4 p { margin:0; color:#63798f; font-size:11px; line-height:1.52; }
.stack-positioning { margin:22px 0 0; padding:18px 20px; border-left:3px solid var(--v4-blue); color:#62778d; background:#fff; font-size:13px; }
.stack-positioning strong { color:#153a5e; }

/* evidence */
.evidence-section { color:#fff; background:linear-gradient(145deg,#07162b,#0d2d50); }
.evidence-section .v4-eyebrow { color:#7ee4ff; }
.evidence-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(520px,1.2fr); gap:66px; align-items:start; }
.evidence-layout h2 { margin:0; color:#fff; font-size:clamp(42px,4.8vw,65px); line-height:1.03; letter-spacing:-.054em; }
.evidence-layout .v4-lede { color:#a9bdd2; }
.evidence-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.evidence-cards a { min-height:210px; display:flex; flex-direction:column; padding:23px; border:1px solid rgba(141,207,255,.17); border-radius:18px; background:rgba(255,255,255,.04); transition:transform .2s ease,border-color .2s ease; }
.evidence-cards a:hover { transform:translateY(-4px); border-color:rgba(141,226,255,.42); }
.evidence-cards small { color:#7ee4ff; font-size:8px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.evidence-cards strong { margin-top:25px; color:#fff; font-size:18px; line-height:1.2; }
.evidence-cards span { margin-top:auto; padding-top:18px; color:#8fa8c0; font-size:10px; line-height:1.5; }

/* persona paths */
.path-section { background:#fff; }
.path-grid-v4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.path-grid-v4 a { min-height:290px; display:flex; flex-direction:column; padding:25px; border:1px solid var(--v4-line); border-radius:19px; background:#fff; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.path-grid-v4 a:hover { transform:translateY(-5px); border-color:#b9cef4; box-shadow:0 20px 44px rgba(15,45,83,.08); }
.path-grid-v4 small { color:#2b63ef; font-size:8px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.path-grid-v4 h3 { margin:29px 0 10px; color:var(--v4-ink); font-size:25px; line-height:1.12; letter-spacing:-.038em; }
.path-grid-v4 p { margin:0; color:var(--v4-muted); font-size:12px; line-height:1.58; }
.path-grid-v4 span { margin-top:auto; padding-top:22px; color:#285fff; font-size:10px; font-weight:780; }

.v4-final { padding:78px 0; color:#fff; background:linear-gradient(105deg,#265fff,#745cff); }
.v4-final-inner { display:flex; align-items:center; justify-content:space-between; gap:52px; }
.v4-final .v4-eyebrow { color:#d7e9ff; }
.v4-final h2 { max-width:840px; margin:0; color:#fff; font-size:clamp(34px,4vw,54px); line-height:1.05; letter-spacing:-.05em; }
.v4-final .exp-button.secondary { border-color:rgba(255,255,255,.34); color:#fff; background:rgba(255,255,255,.08); }

/* New top-level inner pages */
.v4-inner-hero {
  position:relative;
  overflow:hidden;
  padding:122px 0 90px;
  color:#fff;
  background:
    radial-gradient(circle at 82% 15%,rgba(53,206,241,.17),transparent 28%),
    radial-gradient(circle at 12% 4%,rgba(118,92,255,.20),transparent 29%),
    linear-gradient(145deg,#061326,#0b294b 62%,#07162b);
}
.v4-inner-hero::before {
  content:""; position:absolute; inset:0; opacity:.18;
  background-image:linear-gradient(rgba(105,178,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(105,178,255,.13) 1px,transparent 1px);
  background-size:68px 68px; mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.v4-inner-hero .exp-container { position:relative; z-index:2; }
.v4-breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:29px; color:#7892ac; font-size:10px; }
.v4-breadcrumbs a:hover { color:#fff; }
.v4-inner-hero .v4-eyebrow { color:#7fe5ff; }
.v4-inner-hero h1 { max-width:1000px; margin:0; color:#fff; font-size:clamp(50px,6.2vw,84px); line-height:.99; letter-spacing:-.064em; }
.v4-inner-hero p.v4-lede { max-width:840px; color:#b7cadf; }
.v4-inner-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.v4-inner-meta span { padding:6px 9px; border:1px solid rgba(142,211,255,.18); border-radius:999px; color:#93abc3; background:rgba(255,255,255,.035); font-size:9px; font-weight:760; }

.v4-content-section { padding:94px 0; }
.v4-content-section.soft { background:#f5f8fc; }
.v4-content-section.dark { color:#fff; background:#061326; }
.v4-content-section h2 { margin:0; color:var(--v4-ink); font-size:clamp(34px,4vw,54px); line-height:1.06; letter-spacing:-.048em; }
.v4-content-section.dark h2 { color:#fff; }
.v4-content-section .section-intro { max-width:800px; margin:18px 0 0; color:var(--v4-muted); font-size:17px; line-height:1.65; }
.v4-content-section.dark .section-intro { color:#a6bad0; }

.hub-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:38px; }
.hub-card { min-height:300px; display:flex; flex-direction:column; padding:29px; border:1px solid var(--v4-line); border-radius:21px; background:#fff; box-shadow:0 9px 30px rgba(15,45,83,.045); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.hub-card:hover { transform:translateY(-5px); border-color:#b7cdf5; box-shadow:0 22px 48px rgba(15,45,83,.09); }
.hub-card small { color:#2c63ed; font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.hub-card h3 { margin:31px 0 11px; color:var(--v4-ink); font-size:31px; line-height:1.1; letter-spacing:-.043em; }
.hub-card p { margin:0; color:var(--v4-muted); font-size:13px; line-height:1.62; }
.hub-card span { margin-top:auto; padding-top:26px; color:#285fff; font-size:11px; font-weight:780; }
.hub-card.featured { grid-column:1 / -1; min-height:320px; color:#fff; background:
  radial-gradient(circle at 84% 16%,rgba(53,206,241,.18),transparent 30%),
  linear-gradient(145deg,#061326,#123e70); }
.hub-card.featured small { color:#7ee4ff; }
.hub-card.featured h3 { max-width:760px; color:#fff; font-size:42px; }
.hub-card.featured p { max-width:760px; color:#b6cadf; font-size:15px; }
.hub-card.featured span { color:#91eaff; }

.status-badge { display:inline-flex; width:max-content; padding:5px 8px; border-radius:999px; font-size:8px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.status-badge.stable { color:#127353; background:#e7faf3; }
.status-badge.draft { color:#78520f; background:#fff4d8; }
.status-badge.emerging { color:#6244c9; background:#f0ebff; }
.status-badge.planned { color:#53677b; background:#edf2f7; }
.status-badge.concept { color:#145e83; background:#e5f7ff; }

.detail-layout { display:grid; grid-template-columns:minmax(0,.75fr) minmax(520px,1.25fr); gap:60px; align-items:start; }
.detail-copy h2 { margin:0; }
.detail-copy p { color:var(--v4-muted); line-height:1.65; }
.detail-panel { padding:27px; border:1px solid var(--v4-line); border-radius:20px; background:#fff; box-shadow:0 18px 50px rgba(15,45,83,.08); }
.detail-panel h3 { margin:0 0 17px; color:var(--v4-ink); font-size:24px; }
.detail-panel p { color:var(--v4-muted); font-size:13px; line-height:1.6; }

.literal-list { display:grid; gap:12px; margin-top:30px; }
.literal-list > div { padding:18px 20px; border:1px solid var(--v4-line); border-radius:14px; background:#fff; }
.literal-list strong { display:block; color:#153b60; font-size:14px; }
.literal-list span { display:block; margin-top:4px; color:#657b91; font-size:12px; line-height:1.55; }

.callout-v4 { margin-top:25px; padding:20px 22px; border-left:3px solid var(--v4-blue); color:#62788e; background:#f5f8ff; font-size:13px; line-height:1.65; }
.callout-v4 strong { color:#123b68; }
.callout-v4.warning { border-left-color:#e5aa3e; background:#fff8e9; }
.callout-v4.warning strong { color:#76510f; }
.callout-v4.dark { border:1px solid rgba(142,211,255,.17); border-left:3px solid #48d2f4; color:#9ab2c9; background:rgba(255,255,255,.04); }
.callout-v4.dark strong { color:#fff; }

/* Scenario explanation pages */
.scenario-hero-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(480px,1.15fr); align-items:center; gap:55px; }
.scenario-hero-card { padding:24px; border:1px solid rgba(143,213,255,.22); border-radius:22px; background:rgba(255,255,255,.05); box-shadow:0 30px 65px rgba(0,6,20,.28); }
.scenario-hero-card h3 { margin:0; color:#fff; font-size:20px; }
.scenario-trace { display:grid; gap:8px; margin-top:17px; }
.scenario-trace div { display:grid; grid-template-columns:120px 1fr; gap:12px; padding:11px 12px; border:1px solid rgba(139,204,255,.12); border-radius:10px; background:rgba(255,255,255,.025); }
.scenario-trace b { color:#7ee4ff; font-size:9px; }
.scenario-trace span { color:#9bb2c8; font-size:10px; }
.scenario-outcomes { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:32px; }
.scenario-outcome { padding:24px; border:1px solid var(--v4-line); border-radius:18px; background:#fff; }
.scenario-outcome h3 { margin:0; color:var(--v4-ink); font-size:23px; }
.scenario-outcome p { margin:10px 0 0; color:var(--v4-muted); font-size:13px; line-height:1.6; }
.scenario-outcome.applied { border-top:3px solid var(--v4-mint); }
.scenario-outcome.withheld { border-top:3px solid var(--v4-gold); }

/* MyOS inner */
.myos-product-grid { display:grid; grid-template-columns:minmax(0,.72fr) minmax(600px,1.28fr); gap:58px; align-items:center; }
.myos-product-grid img { border:1px solid #d6e3ef; border-radius:20px; box-shadow:0 28px 70px rgba(15,45,83,.14); }
.document-model-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; }
.document-model-grid div { min-height:190px; padding:22px; border:1px solid var(--v4-line); border-radius:17px; background:#fff; }
.document-model-grid strong { display:block; color:#153b60; font-size:17px; }
.document-model-grid span { display:block; margin-top:8px; color:#657b91; font-size:11px; line-height:1.55; }

/* specification */
.spec-map { display:grid; gap:11px; margin-top:34px; }
.spec-row { display:grid; grid-template-columns:190px 110px 1fr 150px; gap:18px; align-items:center; min-height:92px; padding:18px 20px; border:1px solid var(--v4-line); border-radius:15px; background:#fff; }
.spec-row strong { color:#153b60; font-size:14px; }
.spec-row p { margin:0; color:#667c92; font-size:11px; line-height:1.55; }
.spec-row > a { color:#285fff; font-size:10px; font-weight:780; text-align:right; }

/* footer */
.v4-footer .tech-footer-brand p { max-width:330px; }

/* Docs top navigation compatibility */
body .topbar .topnav { gap: 1px; }
body .topbar .topnav a { padding-inline: 9px; font-size: 12px; }
body .topbar .brand-copy span { font-size: 10px; }

/* Responsive */
@media (max-width: 1180px) {
  .v4-nav .exp-links { margin-left: 18px; }
  .v4-nav .exp-links a { padding-inline: 7px; font-size: 12px; }
  .v4-nav .exp-brand small { display:none; }
  .v4-hero-grid { grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr); gap:42px; }
  .v4-hero h1 { font-size:clamp(51px,6.2vw,75px); }
  .graph-layout { grid-template-columns:minmax(0,.8fr) minmax(500px,1.2fr); gap:40px; }
  .myos-grid { grid-template-columns:minmax(0,.8fr) minmax(520px,1.2fr); gap:42px; }
  .provider-map { grid-template-columns:repeat(2,1fr); min-height:600px; }
  .provider-map::before { display:none; }
  .provider-center { bottom:0; }
  .core-concepts { grid-template-columns:repeat(2,1fr); }
  .path-grid-v4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 980px) {
  .v4-nav .exp-links, .v4-nav .exp-actions { display:none; }
  .v4-nav .exp-menu { display:block; }
  body.menu-visible .v4-nav { height:auto; min-height:72px; flex-wrap:wrap; padding-bottom:18px; }
  body.menu-visible .v4-nav .exp-links { order:3; width:100%; display:grid; grid-template-columns:repeat(2,1fr); margin:14px 0 0; }
  body.menu-visible .v4-nav .exp-actions { order:4; width:100%; display:flex; margin:12px 0 0; }
  .v4-hero { min-height:auto; }
  .v4-hero-grid, .graph-layout, .myos-grid, .evidence-layout, .detail-layout, .myos-product-grid, .scenario-hero-grid { grid-template-columns:1fr; }
  .v4-hero-grid { padding:84px 0 95px; }
  .agent-demo { max-width:680px; }
  .v4-proof-grid { grid-template-columns:repeat(2,1fr); }
  .v4-proof-grid a { border-bottom:1px solid var(--v4-line); }
  .v4-proof-grid a:nth-child(2n) { border-right:0; }
  .v4-proof-grid a:last-child { grid-column:1/-1; }
  .v4-section-head.split { grid-template-columns:1fr; gap:20px; }
  .agent-action-flow { grid-template-columns:repeat(2,1fr); }
  .app-graph { max-width:720px; width:100%; margin:0 auto; }
  .extension-pipeline { grid-template-columns:repeat(5,1fr); gap:9px; }
  .extension-pipeline > i { display:none; }
  .proof-distinctions { grid-template-columns:repeat(2,1fr); }
  .proof-distinctions div:last-child { grid-column:1/-1; }
  .build-patterns { grid-template-columns:repeat(2,1fr); }
  .build-pattern.featured { grid-column:1/-1; }
  .myos-visual { transform:none; margin-bottom:55px; }
  .stack-v4 a { grid-template-columns:40px 150px 1fr; }
  .v4-final-inner { flex-direction:column; align-items:flex-start; }
  .spec-row { grid-template-columns:160px 100px 1fr; }
  .spec-row > a { grid-column:3; text-align:left; }
}
@media (max-width: 720px) {
  .exp-container { width:min(100% - 32px,1220px); }
  .v4-section { padding:82px 0; }
  .v4-hero-grid { padding:67px 0 84px; }
  .v4-hero h1 { font-size:clamp(45px,13vw,64px); }
  .v4-hero-lede { font-size:18px; }
  .v4-text-link { width:100%; min-height:auto; margin-top:4px; }
  .agent-demo-doc { padding:17px; }
  .agent-demo-title { display:grid; }
  .agent-demo-id { width:max-content; }
  .agent-mandate dl, .agent-result-proof { grid-template-columns:1fr; }
  .v4-proof-strip { margin-top:-18px; }
  .v4-proof-grid { grid-template-columns:1fr; }
  .v4-proof-grid a, .v4-proof-grid a:nth-child(2n) { border-right:0; border-bottom:1px solid var(--v4-line); }
  .v4-proof-grid a:last-child { grid-column:auto; border-bottom:0; }
  .agent-action-flow, .build-patterns, .core-concepts, .scenario-cards-v4, .stack-v4, .path-grid-v4, .hub-grid, .scenario-outcomes, .document-model-grid { grid-template-columns:1fr; }
  .direct-mandated { grid-template-columns:1fr; }
  .direct-mandated > i { width:100%; height:1px; }
  .graph-layout { gap:45px; }
  .app-graph { min-height:760px; transform:scale(.9); transform-origin:center top; margin-bottom:-70px; }
  .graph-node.main { left:31%; top:38%; }
  .graph-node.policy { left:0; top:4%; }
  .graph-node.mandate { right:0; top:4%; }
  .graph-node.orders { right:0; top:51%; }
  .graph-node.paynote { right:3%; bottom:1%; }
  .graph-node.module { left:0; bottom:1%; }
  .graph-caption { left:20%; }
  .extension-pipeline { grid-template-columns:1fr; }
  .extension-pipeline > div { min-height:auto; }
  .proof-distinctions { grid-template-columns:1fr; }
  .proof-distinctions div:last-child { grid-column:auto; }
  .build-pattern.featured { grid-column:auto; }
  .myos-model-list { grid-template-columns:1fr; }
  .provider-map { grid-template-columns:1fr; min-height:920px; }
  .provider-center { width:100%; }
  .providers-rule { grid-template-columns:1fr; }
  .stack-v4 a { grid-template-columns:42px 1fr; }
  .stack-v4 a p { grid-column:2; }
  .evidence-cards { grid-template-columns:1fr; }
  .spec-row { grid-template-columns:1fr; gap:8px; }
  .spec-row > a { grid-column:auto; text-align:left; }
  .v4-inner-hero { padding:98px 0 70px; }
  .v4-inner-hero h1 { font-size:clamp(44px,12vw,65px); }
  .scenario-trace div { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .agent-choices { grid-template-columns:1fr; }
  .agent-action-flow article { min-height:auto; }
  .v4-final { padding:62px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}