/* The public site is light by brand rule, so this sketch is deliberately single-theme with explicit colours. */
  /* Söhne (Klim), the purchased web fonts, carried in the page so every viewer sees it; Inter is the fallback */
  @font-face { font-family: "Brand Sohne"; src: url("/fonts/sohne/soehne-buch.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "Brand Sohne"; src: url("/fonts/sohne/soehne-kraftig.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
  @font-face { font-family: "Brand Sohne"; src: url("/fonts/sohne/soehne-halbfett.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
  @font-face { font-family: "Brand Sohne"; src: url("/fonts/sohne/soehne-buch-kursiv.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

  :root {
    color-scheme: light;
    --bg: #FAFAFA; --ink: #0A0A0A; --sub: #5A5A5A; --indigo: #3D3BF3;
    --faint: #8C8C93; --card: #FAFAFA; --tint: #F3F3FA; --indigo-soft: #ECECFE;
    --line: rgba(10, 10, 10, .08); --line-2: rgba(10, 10, 10, .14);
    --ok: #134E4A; --ok-bg: #ECF2F2; --warn: #78350F; --warn-bg: #F6F0EC; --bad: #831843; --bad-bg: #F5ECEF; --info: #1E293B; --info-bg: #F0F1F3;
    --sans: "Brand Sohne", "Inter", system-ui, sans-serif;
    --mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, monospace;
    --r-card: 16px; --r-inner: 10px;
    --shadow-product: 0 0 0 1px rgba(10,10,10,.07), 0 2px 4px rgba(10,10,10,.03), 0 24px 48px -16px rgba(30,28,120,.18), 0 64px 96px -40px rgba(61,59,243,.22);
    --shadow-card: 0 0 0 1px rgba(10,10,10,.07), 0 1px 2px rgba(10,10,10,.03), 0 16px 32px -18px rgba(30,28,120,.20);
    --gut: 24px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  .g { padding-inline: var(--gut); }
  .in { max-width: 1240px; margin: 0 auto; }
  a { color: inherit; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
  .m { font-family: var(--mono); }
  [hidden] { display: none !important; }

  .plate-note { font-family: var(--mono); font-size: 11px; color: var(--sub); text-align: center; padding: 9px 16px; background: #FAFAFA; border-bottom: 1px solid var(--line); }
  .plate-note b { color: var(--indigo); font-weight: 500; }

  /* type scale: display, section, card title, body, small, mono label */
  h1 { font-weight: 500; font-size: clamp(40px, 4.7vw, 72px); line-height: .98; letter-spacing: -0.045em; margin: 0; text-wrap: balance; }
  h2 { font-weight: 500; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.02; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
  h3 { font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
  .lede { font-size: 18px; color: var(--sub); margin: 0; max-width: 56ch; }
  .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--indigo); text-transform: uppercase; margin: 0 0 16px; }
  .label { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
  .sec { padding-block: 128px; }
  .sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 56px; }
  .sec-head .lede, .sec-aside { justify-self: end; }

  .btn { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--sans); padding: 14px 20px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; white-space: nowrap; border: 0; }
  .btn.ghost { background: rgba(255,255,255,.75); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
  .btn.sm { padding: 10px 15px; font-size: 14px; }
  .btn[aria-disabled="true"] { cursor: default; }
  .tlink { font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
  .tlink:hover { border-color: var(--ink); }

  .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 999px; background: #F2F2F5; color: #3A3A3F; white-space: nowrap; }
  .pill.ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(17,94,89,.2); } .pill.warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(146,64,14,.2); } .pill.bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(136,19,55,.2); } .pill.in { background: var(--indigo-soft); color: var(--indigo); } .pill.info { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px rgba(71,85,105,.2); }
  .pill.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--sub); }

  /* product card primitive, used by every section */
  .pc { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 20px; font-size: 14px; line-height: 1.45; }
  .pc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
  .pc-h b { font-weight: 500; }
  .kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding-block: 9px; border-top: 1px solid var(--line); }
  .kv:first-of-type { border-top: 0; }
  .kv span:first-child { color: var(--sub); }
  .kv b { font-weight: 500; text-align: right; }
  .hash { font-family: var(--mono); font-size: 12px; color: var(--sub); }

  /* nav */
  .nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(250,250,250,.78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; }
  .nav .in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand svg { width: 26px; height: 26px; flex: none; }
  .brand b { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--indigo); }
  .brand span { font-size: 12.5px; font-weight: 500; }
  .nav-links { display: flex; gap: 32px; font-size: 15px; color: var(--sub); }
  .nav-links a { text-decoration: none; }
  .nav-links a:hover { color: var(--ink); }

  /* ---------- hero ---------- */
  .hero { position: relative; overflow: hidden; background:
      radial-gradient(55% 60% at 88% 40%, rgba(61,59,243,.17), rgba(61,59,243,0) 70%),
      radial-gradient(35% 40% at 8% 100%, rgba(61,59,243,.07), rgba(61,59,243,0) 70%),
      linear-gradient(180deg, #FAFAFA 0%, #F3F3FA 100%); }
  .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.04  0 0 0 0 0.1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
  .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 72px; }
  .hero-copy { padding-bottom: 88px; }
  .chip { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px var(--line); padding: 6px 12px 6px 8px; border-radius: 999px; margin-bottom: 26px; }
  .chip i { width: 18px; height: 18px; border-radius: 50%; background: var(--ok-bg); display: grid; place-items: center; }
  .chip i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
  .chip a { color: var(--indigo); text-decoration: none; font-weight: 500; }
  .hero .lede { margin-top: 24px; max-width: 34ch; }
  .actions { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
  .trustline { margin: 22px 0 0; font-family: var(--mono); font-size: 12px; color: var(--sub); }

  .run { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line-2); max-width: 470px; }
  .run-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .dots { display: flex; gap: 5px; }
  .dots i { width: 22px; height: 3px; border-radius: 3px; background: var(--line-2); transition: background .4s; }
  .dots i.on { background: var(--indigo); }
  .replay { font: 500 13px/1 var(--sans); color: var(--ink); background: #FAFAFA; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 999px; padding: 8px 13px; cursor: pointer; }
  .replay:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .run-cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; min-height: 26px; }
  .run-cap span { min-width: 0; }
  .who { font-style: normal; font-family: var(--mono); font-size: 11px; padding: 5px 9px; border-radius: 999px; flex: none; transition: background .35s, color .35s; }
  .who.agent { background: var(--indigo-soft); color: var(--indigo); }
  .who.human { background: var(--ink); color: var(--bg); }
  .who.proof { background: var(--ok-bg); color: var(--ok); }

  .crop { position: relative; margin-right: calc(-1 * max(var(--gut), (100vw - 1240px) / 2)); border-radius: 18px 0 0 0; overflow: hidden; box-shadow: var(--shadow-product); max-height: 660px; margin-top: 8px; }
  .frame { width: 1240px; container-type: inline-size; background: #FAFAFA; }

  /* the case workspace, sized in container units of a fixed 1240px frame, so 1cqw is always 12.4px */
  .app { display: grid; grid-template-columns: 15cqw minmax(0, 1fr); font-size: 1.05cqw; line-height: 1.45; background: #FAFAFA; }
  .app small { font-size: .78cqw; letter-spacing: .07em; color: var(--sub); font-weight: 500; }
  .a-side { background: #F8F8F9; border-right: 1px solid var(--line); padding: 1.4cqw 1.1cqw; display: flex; flex-direction: column; gap: 1.2cqw; min-height: 53cqw; }
  .a-logo, .a-ten, .a-user { display: flex; gap: .8cqw; align-items: center; }
  .a-logo svg { width: 2.2cqw; height: 2.2cqw; flex: none; }
  .a-logo span, .a-ten span, .a-user span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .a-logo b { font-weight: 600; font-size: 1.25cqw; } .a-logo i { color: var(--indigo); font-size: .8cqw; }
  .a-ten { background: #FAFAFA; border-radius: .8cqw; padding: .7cqw; box-shadow: 0 0 0 1px var(--line); }
  .a-ten em, .a-user em { font-style: normal; width: 2.2cqw; height: 2.2cqw; border-radius: .6cqw; background: var(--indigo); color: #FAFAFA; display: grid; place-items: center; font-size: .9cqw; font-weight: 600; flex: none; }
  .a-user em { border-radius: 50%; background: #E4E4F6; color: var(--indigo); }
  .a-ten b, .a-user b { font-weight: 500; font-size: .95cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a-ten i, .a-user i { font-style: normal; font-family: var(--mono); font-size: .75cqw; color: var(--sub); }
  .a-ten small { margin-left: auto; font-size: .65cqw; background: var(--indigo-soft); color: var(--indigo); padding: .15cqw .4cqw; border-radius: .3cqw; }
  .a-nav { display: flex; flex-direction: column; gap: .2cqw; }
  .a-nav span { display: flex; justify-content: space-between; padding: .55cqw .7cqw; border-radius: .6cqw; }
  .a-nav span.on { background: var(--indigo-soft); color: var(--indigo); font-weight: 500; }
  .a-nav small { font-size: .75cqw; }
  .a-user { margin-top: auto; }
  .a-main { padding: 1.3cqw 2cqw 2cqw; display: flex; flex-direction: column; gap: 1.3cqw; min-width: 0; }
  .a-crumb { display: flex; justify-content: space-between; color: var(--sub); font-size: .9cqw; padding-bottom: 1cqw; border-bottom: 1px solid var(--line); }
  .a-crumb b { color: var(--ink); font-weight: 500; }
  .st-run { color: var(--warn); } .st-run::before { content: "\25CB  "; }
  .st-ok { color: var(--ok); } .st-ok::before { content: "\25CF  "; }
  .st-form { color: var(--sub); } .st-form::before { content: "\25CB  "; }
  .a-head h4 { margin: 0; font-size: 1.75cqw; font-weight: 500; letter-spacing: -0.02em; }
  .a-meta { display: flex; gap: 2.4cqw; margin-top: 1cqw; flex-wrap: wrap; }
  .a-meta small { display: block; margin-bottom: .25cqw; }
  .a-meta b { font-weight: 500; }
  .a-acts { display: flex; gap: .7cqw; margin-top: 1.2cqw; flex-wrap: wrap; }
  .a-acts span { padding: .55cqw 1.1cqw; border-radius: .6cqw; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; font-size: .92cqw; }
  .a-cols { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr 1fr; gap: 1.3cqw; align-items: start; }
  .a-cols > div { display: flex; flex-direction: column; gap: .7cqw; min-width: 0; }
  .a-cols h6 { margin: .4cqw 0 0; font-size: .78cqw; letter-spacing: .08em; color: var(--sub); font-weight: 500; }
  .a-cols h6 span { color: #9A9AA4; margin-left: .4cqw; }
  .a-cols h6 em { font-style: normal; float: right; letter-spacing: 0; color: var(--warn); font-weight: 400; }
  .a-cols h6 em.done { color: var(--ok); }
  .a-box, .a-ev, .a-fact, .a-ow { border: 1px solid var(--line); border-radius: .8cqw; padding: .9cqw; display: flex; flex-direction: column; gap: .6cqw; }
  .a-row { display: flex; justify-content: space-between; align-items: center; gap: .6cqw; }
  .a-row b { font-weight: 500; display: flex; gap: .6cqw; align-items: center; }
  .a-row .s, .a-kv { color: var(--sub); }
  .a-kv small { display: block; margin-bottom: .15cqw; }
  .a-ladder .a-row { display: grid; grid-template-columns: 6.2cqw minmax(0, 1fr) auto; }
  .a-ladder .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a-ev .a-row { flex-wrap: wrap; row-gap: .4cqw; }
  .a-ladder i { width: .7cqw; height: .7cqw; border-radius: 50%; background: #CFCFD4; display: inline-block; transition: background .4s; }
  .a-ladder i.d { background: var(--ok); }
  .p { font-size: .8cqw; padding: .2cqw .65cqw; border-radius: 99px; background: #F2F2F5; color: #3A3A3F; white-space: nowrap; transition: background-color .45s, color .45s, box-shadow .45s; }
  .p.ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(17,94,89,.2); } .p.warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(146,64,14,.2); } .p.info { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px rgba(71,85,105,.2); } .p.in { background: #F3F3FE; color: var(--indigo); box-shadow: inset 0 0 0 1px rgba(61,59,243,.2); }
  .a-chips { display: flex; gap: .4cqw; flex-wrap: wrap; }
  .a-chips span { font-size: .78cqw; color: var(--sub); padding: .15cqw .55cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
  .a-fact .addr { font-family: var(--mono); font-size: 1.2cqw; line-height: 1.35; }
  .a-src { color: var(--sub); font-size: .85cqw; }
  .a-src b { color: var(--ink); font-weight: 500; }
  .a-note { font-size: .82cqw; color: var(--ok); border-top: 1px dashed var(--line-2); padding-top: .5cqw; }
  .a-ow { gap: .3cqw; }
  .a-ow .st { color: var(--warn); } .a-ow .wk { color: var(--indigo); } .a-ow.done small { color: var(--ok); }
  .a-box .pct { font-size: 1.8cqw; color: var(--indigo); letter-spacing: -0.02em; font-weight: 500; }
  .a-bar { height: .55cqw; border-radius: 99px; background: #ECECF3; overflow: hidden; }
  .a-bar i { display: block; height: 100%; background: var(--indigo); transition: width .9s cubic-bezier(.3,.7,.2,1); }
  .a-seal { text-align: center; border-radius: .6cqw; padding: .7cqw; font-weight: 500; font-size: .9cqw; transition: background .45s, color .45s; }
  .a-seal.wait { background: none; color: var(--sub); text-align: left; padding: 0; font-weight: 400; font-size: .82cqw; }
  .a-seal.ready { background: var(--indigo); color: #FAFAFA; }
  .a-seal.sealing { background: rgba(61,59,243,.7); color: #FAFAFA; }
  .a-seal.sealed { background: var(--ink); color: var(--bg); }
  .phone-case .a-seal.wait { font-size: 12.5px; padding: 0; }
  .a-tl { gap: .45cqw; }
  .a-tl .tl { display: flex; justify-content: space-between; gap: .6cqw; font-size: .85cqw; }
  .a-tl .tl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .a-tl .tl i { font-style: normal; font-family: var(--mono); color: var(--sub); font-size: .78cqw; }
  .tl.new { animation: tlin .5s ease both; }
  @keyframes tlin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .flash { box-shadow: 0 0 0 3px rgba(61,59,243,.22) !important; }

  /* phone version of the same case: one readable card instead of a shrunken desktop */
  .phone-case { display: none; }
  .phone-case .pc { padding: 18px; font-size: 14px; }
  .phone-case .ph-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--sub); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .phone-case h4 { margin: 14px 0 2px; font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
  .phone-case .ph-ref { font-family: var(--mono); font-size: 11.5px; color: var(--sub); }
  .phone-case .ph-sec { margin-top: 16px; }
  .phone-case .ph-sec .label { display: block; margin-bottom: 6px; }
  .phone-case .ph-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 8px; border-top: 1px solid var(--line); }
  .phone-case .ph-row:first-of-type { border-top: 0; }
  .phone-case .ph-row .p { font-size: 11.5px; padding: 4px 8px; }
  .phone-case .ph-bar { height: 5px; border-radius: 99px; background: #ECECF3; overflow: hidden; margin: 8px 0 12px; }
  .phone-case .ph-bar i { display: block; height: 100%; background: var(--indigo); transition: width .9s cubic-bezier(.3,.7,.2,1); }
  .phone-case .a-seal { font-size: 13px; padding: 11px; border-radius: 10px; }
  .phone-case .ph-pct { display: flex; justify-content: space-between; align-items: baseline; }
  .phone-case .ph-pct b { font-size: 24px; color: var(--indigo); font-weight: 500; letter-spacing: -0.02em; }

  /* ---------- names do not match ---------- */
  .chain-sec { padding-block: 96px; border-bottom: 1px solid var(--line); }
  .chain-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 56px; align-items: center; }
  .chain-grid h2 { font-size: clamp(30px, 3vw, 44px); }
  .chain-grid .lede { margin-top: 16px; }
  .chain { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr) 92px minmax(0, 1fr); align-items: center; }
  .node { background: #FAFAFA; border-radius: 14px; box-shadow: var(--shadow-card); padding: 14px 16px; font-size: 14px; }
  .node .label { display: block; margin-bottom: 6px; }
  .node b { display: block; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
  .node .st { font-size: 13px; color: var(--sub); margin-top: 4px; display: flex; gap: 6px; align-items: center; }
  .node .st i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
  .node.subject { box-shadow: 0 0 0 1.5px var(--indigo), var(--shadow-card); }
  .node.subject .label { color: var(--indigo); }
  .node.sanct { background: var(--bad-bg); box-shadow: 0 0 0 1.5px rgba(163,38,56,.45), var(--shadow-card); }
  .node.sanct .label, .node.sanct .st { color: var(--bad); }
  .node.sanct .st i { background: var(--bad); }
  .stack2 { display: grid; gap: 14px; }
  .edge { position: relative; height: 100%; min-height: 40px; display: grid; place-items: center; }
  .edge::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1.5px solid var(--line-2); }
  .edge.hot::before { border-color: rgba(163,38,56,.55); }
  .edge span { position: relative; font-family: var(--mono); font-size: 11px; background: var(--bg); padding: 2px 4px; color: var(--sub); white-space: nowrap; }
  .edge.hot span { color: var(--bad); }
  .edge-pair { display: grid; gap: 14px; height: 100%; align-content: center; }
  .why { margin-top: 16px; font-size: 13px; color: var(--sub); padding: 12px 14px; border-radius: 12px; background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line); }
  .why b { color: var(--bad); font-weight: 500; }

  /* ---------- manifesto ---------- */
  .manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .manifesto > div { padding: 8px 56px 0 0; }
  .manifesto > div + div { padding: 8px 0 0 56px; border-left: 1px solid var(--line); }
  .manifesto h2 { font-size: clamp(34px, 3.8vw, 56px); }
  .manifesto h2 em { font-style: normal; color: var(--indigo); }
  .docs { margin-top: 36px; display: grid; gap: 8px; }
  .doc { display: grid; grid-template-columns: 22px 150px 1fr; gap: 12px; align-items: center; background: #FAFAFA; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; font-size: 14px; }
  .doc .ck { width: 18px; height: 18px; border-radius: 50%; background: var(--ok-bg); display: grid; place-items: center; }
  .doc .ck::after { content: ""; width: 7px; height: 4px; border-left: 1.5px solid var(--ok); border-bottom: 1.5px solid var(--ok); transform: rotate(-45deg) translate(1px, -1px); }
  .doc .m { font-size: 12px; color: var(--sub); }
  .decision { margin-top: 36px; }
  .decision .pc-h b { display: flex; gap: 8px; align-items: center; color: var(--indigo); }
  .manifesto-foot { margin-top: 56px; text-align: center; font-size: 13px; color: var(--faint); font-family: var(--mono); }

  /* ---------- shift ---------- */
  .shift { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .shift .pc { padding: 28px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
  .shift h3 { font-size: 21px; }
  .shift p { margin: 0; color: var(--sub); }
  .resolve { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
  .resolve i { width: 30px; height: 30px; border-radius: 9px; background: var(--indigo-soft); display: grid; place-items: center; flex: none; }
  .resolve i::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(-45deg) translate(1px, -1px); }
  .resolve span { display: flex; flex-direction: column; font-size: 14px; font-weight: 500; }
  .resolve .label { font-weight: 400; margin-bottom: 2px; }

  /* ---------- workforce ---------- */
  .life { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tile { border-radius: 20px; background: #FAFAFA; box-shadow: 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; }
  .tile-art { padding: 28px; background: radial-gradient(90% 80% at 70% 20%, rgba(61,59,243,.13), rgba(61,59,243,0) 70%), var(--tint); }
  .tile-art .pc { box-shadow: var(--shadow-product); }
  .tile-copy { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; }
  .tile-copy p { margin: 0; color: var(--sub); font-size: 15px; }
  .runhead { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--sub); margin-bottom: 8px; }
  .runhead b { font-weight: 500; color: var(--indigo); display: flex; gap: 6px; align-items: center; }
  .runhead b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
  .outcome { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: 13px; }
  .outcome .label { color: var(--ok); display: block; margin-bottom: 2px; }

  /* ---------- how it works ---------- */
  .how { background: radial-gradient(50% 60% at 50% 30%, rgba(61,59,243,.10), rgba(61,59,243,0) 70%), linear-gradient(180deg, #F3F3FA, #FAFAFA); }
  .flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
  .flow .pc { position: relative; box-shadow: var(--shadow-product); }
  .flow .step { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  .flow .step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 500 11px/22px var(--mono); text-align: center; }
  .flow .pc + .pc::before { content: ""; position: absolute; left: -16px; top: 32px; width: 16px; border-top: 1.5px dashed rgba(61,59,243,.45); }
  .agent-line { display: flex; gap: 10px; align-items: flex-start; padding-block: 8px; border-top: 1px solid var(--line); }
  .agent-line:first-of-type { border-top: 0; }
  .agent-line i { width: 16px; height: 16px; border-radius: 50%; background: var(--ok-bg); flex: none; margin-top: 2px; display: grid; place-items: center; }
  .agent-line i::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid var(--ok); border-bottom: 1.5px solid var(--ok); transform: rotate(-45deg) translate(.5px, -.5px); }
  .agent-line b { font-weight: 500; display: block; }
  .agent-line span { color: var(--sub); font-size: 13px; }
  .call-btns { display: flex; gap: 8px; margin-top: 14px; }
  .call-btns span { flex: 1; text-align: center; padding: 9px; border-radius: 9px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-2); }
  .call-btns span.p1 { background: var(--indigo); color: #FAFAFA; box-shadow: none; }
  .export { margin-top: 12px; text-align: center; padding: 9px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; }
  .flow-cap { text-align: center; margin: 28px 0 0; font-size: 15px; color: var(--sub); }
  .two-text { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--line-2); }
  .two-text p { color: var(--sub); margin: 14px 0 0; max-width: 58ch; }
  .two-text h3 { font-size: 24px; letter-spacing: -0.025em; }

  /* ---------- dark chapter ---------- */
  .dark { background: #0A0A0A; color: #F4F4F6; position: relative; overflow: hidden; }
  .dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 35% at 75% 18%, rgba(61,59,243,.34), rgba(61,59,243,0) 70%), radial-gradient(40% 30% at 20% 70%, rgba(61,59,243,.16), rgba(61,59,243,0) 70%); }
  .dark .in { position: relative; }
  .dark .eyebrow { color: #A4A3FA; }
  .dark .lede { color: #A9A9B1; }
  .dark .label { color: #8E8E97; }
  .arch { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
  .layers { display: grid; gap: 10px; }
  .layer { border-radius: 16px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; }
  .layer .label { grid-column: 1 / -1; }
  .layer b { font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
  .layer .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .layer .tags span { font-family: var(--mono); font-size: 11px; padding: 4px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #C9C9D0; }
  .l-models { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
  .l-models b { color: #B8B8C0; }
  .l-space { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
  .l-space p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: #A9A9B1; }
  .l-graph { background: linear-gradient(135deg, #3D3BF3, #2F2DC9); box-shadow: 0 0 0 1px rgba(170,169,255,.5), 0 24px 60px -20px rgba(61,59,243,.7); }
  .l-graph .label { color: #D5D4FF; }
  .l-graph .tags span { color: #FAFAFA; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
  .l-out { background: #FAFAFA; color: var(--ink); }
  .l-out .label { color: var(--sub); }
  .l-out .tags span { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
  .conn { display: flex; justify-content: center; font-family: var(--mono); font-size: 11px; color: #7C7C85; letter-spacing: .06em; }
  .dark-split { height: 1px; background: rgba(255,255,255,.10); margin-block: 120px; }
  .vdr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .steps5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid rgba(255,255,255,.14); }
  .steps5 div { padding: 14px 12px 0 0; font-size: 14px; color: #C9C9D0; }
  .steps5 .m { display: block; font-size: 11px; color: #8E8E97; margin-bottom: 4px; }
  .feat { margin-top: 40px; display: grid; }
  .feat div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding-block: 13px; border-top: 1px solid rgba(255,255,255,.10); font-size: 15px; }
  .feat b { font-weight: 500; }
  .feat span { color: #A9A9B1; }
  .boundary { margin-top: 32px; font-size: 15px; color: #F4F4F6; }
  .usecases { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
  .usecases span { font-family: var(--mono); font-size: 12px; padding: 6px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #C9C9D0; }
  .verify { color: var(--ink); }
  .verify .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 4px 0 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
  .verify .stats div { padding: 12px 14px; }
  .verify .stats div + div { border-left: 1px solid var(--line); }
  .verify .stats b { display: block; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px; }
  .verify .stats b small { font-size: 12px; color: var(--ok); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
  .access { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: baseline; padding-block: 10px; border-top: 1px solid var(--line); }
  .access b { font-weight: 500; }
  .access span { font-size: 13px; color: var(--sub); }
  .access .m { font-size: 12px; }

  /* ---------- worked example ---------- */

  /* ---------- calibration ---------- */
  .calib-sec { background: linear-gradient(180deg, #FAFAFA, #F3F3FA); }
  .calib { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; }
  .loop { margin-top: 40px; display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: center; }
  .loop .pc { padding: 16px; font-size: 13px; text-align: center; }
  .loop .pc b { display: block; font-weight: 500; margin-bottom: 4px; font-size: 14px; }
  .loop .pc span { color: var(--sub); display: block; }
  .loop .arr { text-align: center; color: var(--indigo); font-size: 15px; }
  .loop-back { grid-column: 1 / -1; height: 44px; }
  .loop-back svg { width: 100%; height: 44px; display: block; overflow: visible; }
  .loop-note { text-align: center; font-size: 13px; color: var(--indigo); font-family: var(--mono); margin-top: 2px; }
  .boundary-note { margin-top: 32px; padding: 16px 18px; border-radius: 14px; background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
  .boundary-note .label { display: block; margin-bottom: 4px; }
  .entry { box-shadow: var(--shadow-product); padding: 24px; }
  .entry .kv { grid-template-columns: 110px minmax(0, 1fr); }
  .entry .kv b { text-align: left; }
  .entry .kv .m { font-size: 13px; }
  .entry-foot { margin-top: 12px; display: flex; justify-content: flex-end; }

  /* ---------- early access ---------- */
  .ea { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
  .ea h2 { font-size: clamp(38px, 4.4vw, 64px); }
  .ea .big { font-size: 24px; line-height: 1.35; letter-spacing: -0.01em; margin: 22px 0 0; max-width: 30ch; }
  .ea .lede { margin-top: 14px; }
  .chart-card { padding: 24px 24px 16px; box-shadow: var(--shadow-product); }
  .chart-card svg { width: 100%; height: auto; display: block; }
  .ea-why { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line-2); }
  .ea-why h3 { font-size: 24px; letter-spacing: -0.025em; margin-top: 8px; }
  .checks { display: grid; gap: 8px; margin-top: 18px; font-size: 15px; }
  .checks span { display: flex; gap: 10px; align-items: center; }
  .checks span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--ok-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.1 4.8-4.8' fill='none' stroke='%231F7A55' stroke-width='1.6'/></svg>") center / 16px no-repeat; flex: none; }
  .ea-why p { margin: 0; color: var(--sub); }

  /* ---------- pricing ---------- */
  .scale { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
  .scale h2 { font-size: clamp(32px, 3.2vw, 48px); }
  .price-head { text-align: center; margin: 120px auto 48px; max-width: 760px; }
  .price-head p { color: var(--sub); margin: 16px auto 0; max-width: 62ch; }
  .tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .tier { position: relative; background: #FAFAFA; border-radius: 20px; box-shadow: 0 0 0 1px var(--line); padding: 28px 24px 24px; display: flex; flex-direction: column; font-size: 14px; }
  .tier.rec { box-shadow: 0 0 0 1.5px var(--indigo), var(--shadow-product); }
  .tier .tag { position: absolute; top: 14px; right: 14px; }
  .tier h3 { font-size: 18px; }
  .tier .for { color: var(--sub); margin: 6px 0 0; min-height: 66px; font-size: 14px; }
  .tier .price { margin: 18px 0 18px; display: flex; align-items: baseline; gap: 6px; }
  .tier .price small { font-family: var(--mono); font-size: 12px; color: var(--sub); }
  .tier .price b { font-size: 40px; font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
  .tier ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
  .tier li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; }
  .tier li::before { content: ""; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--indigo-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.1 4.8-4.8' fill='none' stroke='%233D3BF3' stroke-width='1.6'/></svg>") center / 16px no-repeat; }
  .tier .foot { margin-top: auto; padding-top: 24px; display: grid; gap: 8px; text-align: center; }
  .tier .foot .btn { justify-content: center; }
  .tier .foot small { color: var(--faint); font-size: 13px; }
  .tier:not(.rec) .foot .btn { background: #FAFAFA; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
  .deploy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .deploy div { border-radius: 16px; background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line); padding: 20px 22px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
  .deploy b { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
  .deploy span { color: var(--faint); font-size: 13px; }
  .deploy a { margin-top: auto; font-weight: 500; text-decoration: none; font-size: 14px; }
  .obligation { margin-top: 64px; text-align: center; }
  .obligation p { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; margin: 0; }
  .obligation .trustline { margin-top: 14px; font-size: 12px; letter-spacing: 0; }

  /* ---------- insights ---------- */
  .articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .art { border-radius: 20px; background: #FAFAFA; box-shadow: 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
  .art-thumb { aspect-ratio: 16 / 10; padding: 22px; background: radial-gradient(90% 80% at 70% 10%, rgba(61,59,243,.12), rgba(61,59,243,0) 70%), var(--tint); display: flex; align-items: flex-end; }
  .art-thumb .pc { width: 100%; padding: 14px 16px; font-size: 13px; box-shadow: var(--shadow-product); }
  .art-thumb .kv { padding-block: 6px; }
  .art-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .art-body h3 { font-size: 20px; }
  .art-body p { margin: 0; color: var(--sub); font-size: 15px; }
  .art-meta { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; font-size: 13px; color: var(--faint); font-family: var(--mono); }
  .mini-chain { display: flex; align-items: center; gap: 5px; font-size: 12px; flex-wrap: wrap; row-gap: 6px; }
  .mini-chain span { padding: 5px 7px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); background: #FAFAFA; white-space: nowrap; }
  .mini-chain span.x { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(163,38,56,.3); }
  .mini-chain i { flex: 1; border-top: 1.5px solid var(--line-2); min-width: 8px; }
  .view-all { margin-top: 36px; text-align: center; }

  /* ---------- faq ---------- */
  .faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
  .faq .side p { color: var(--sub); margin: 16px 0 0; max-width: 34ch; }
  .qa { border-top: 1px solid var(--line-2); }
  .qa details { border-bottom: 1px solid var(--line); }
  .qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary::after { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M9 3v12M3 9h12' stroke='%230A0A0A' stroke-width='1.5'/></svg>") center / 18px no-repeat; transition: transform .25s; }
  .qa details[open] summary::after { transform: rotate(45deg); }
  .qa details p { margin: 0 0 22px; color: var(--sub); max-width: 68ch; font-size: 15px; }

  /* ---------- final + footer ---------- */
  .final { text-align: center; padding-block: 120px; background: radial-gradient(50% 70% at 50% 100%, rgba(61,59,243,.16), rgba(61,59,243,0) 70%), linear-gradient(180deg, #FAFAFA, #F3F3FA); }
  .final h2 { font-size: clamp(38px, 4.6vw, 68px); max-width: 16ch; margin: 0 auto; }
  .final p { color: var(--sub); margin: 18px 0 30px; font-size: 18px; }
  footer { background: #FAFAFA; border-top: 1px solid var(--line); padding-block: 64px 32px; font-size: 14px; }
  .foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
  .foot-grid p { color: var(--sub); margin: 14px 0 0; max-width: 30ch; }
  .foot-grid h4 { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--sub); }
  .foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .foot-base { display: flex; justify-content: space-between; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--sub); flex-wrap: wrap; gap: 12px; }
  .foot-base span a { margin-left: 16px; text-decoration: none; }

  .notes { background: #F4F4F6; border-top: 1px solid var(--line); padding-block: 56px 88px; }
  .notes h3 { margin-bottom: 16px; }
  .notes ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; color: #2A2A2E; max-width: 86ch; }
  .notes b { font-weight: 500; }

  /* ---------- responsive ---------- */
  @media (max-width: 1180px) {
    .frame { margin-left: -186px; }           /* on narrower screens the crop starts at the case, not the sidebar */
    .crop { border-radius: 18px 0 0 0; }
    .hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 40px; }
    .sec-head, .arch, .vdr, .calib, .ea, .ea-why, .scale, .faq, .chain-grid { grid-template-columns: 1fr; gap: 40px; }
    .sec-head .lede, .sec-aside { justify-self: start; }
    .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .foot-grid > div:first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 900px) {
    .nav-links { display: none; }
    .shift, .life, .articles, .deploy { grid-template-columns: 1fr; }
    .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow .pc:nth-child(3)::before { display: none; }
    .compare, .two-text { grid-template-columns: 1fr; }
    .manifesto { grid-template-columns: 1fr; }
    .manifesto > div, .manifesto > div + div { padding: 0; border: 0; }
    .manifesto > div + div { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
    .steps5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  }
  @media (min-width: 701px) and (max-width: 900px) {
    .tile, .art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tile-art, .art-thumb { display: flex; align-items: center; aspect-ratio: auto; }
    .tile-copy, .art-body { justify-content: center; }
  }
  @media (max-width: 700px) {
    :root { --gut: 16px; }
    body { font-size: 16px; }
    .sec { padding-block: 80px; }
    .hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
    .hero-copy { padding-bottom: 0; }
    .crop { display: none; }
    .phone-case { display: block; padding-bottom: 56px; }
    .run { margin-top: 32px; }
    .chain { grid-template-columns: 1fr; gap: 0; }
    .chain .edge { min-height: 34px; }
    .chain .edge::before { left: 50%; right: auto; top: 4px; bottom: 4px; border-top: 0; border-left: 1.5px solid var(--line-2); }
    .chain .edge.hot::before { border-color: rgba(163,38,56,.55); }
    .edge-pair { grid-template-columns: 1fr; gap: 0; }
    .doc { grid-template-columns: 22px minmax(0, 1fr); }
    .doc .m, .doc > span:last-child { grid-column: 2; }
    .flow { grid-template-columns: 1fr; }
    .flow .pc::before { display: none; }
    .tiers { grid-template-columns: 1fr; }
    .tier .for { min-height: 0; }
    .loop { grid-template-columns: 1fr; gap: 8px; }
    .loop .arr { transform: rotate(90deg); }
    .loop-back { display: none; }
    .feat div { grid-template-columns: 1fr; gap: 2px; }
    .steps5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .verify .stats b { font-size: 21px; }
    .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dark-split { margin-block: 80px; }
    .price-head { margin-top: 80px; }
    .sys { padding: 22px; }
    .nav .brand span { display: none; }
    .chain .edge[style*="hidden"], .chain .node[aria-hidden="true"] { display: none; }
    .layer { grid-template-columns: 1fr; }
    .layer .tags { justify-content: flex-start; }
    .chart-card { overflow-x: auto; }
    .chart-card svg { min-width: 540px; }
  }

  /* ---------- worked example, one screen ---------- */
  .ex { padding-block: 36px 34px; }
  .xt-cap { margin: 0 0 8px; font-size: 14px; color: var(--sub); display: flex; gap: 10px; align-items: baseline; }
  .xt-cap b { color: var(--ink); font-weight: 500; }
  .ex-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 16px; }
  .ex-head h2 { font-size: clamp(30px, 3.1vw, 46px); }
  .ex-head .lede { font-size: 15px; justify-self: end; max-width: 56ch; }
  .xt { display: grid; font-size: 14px; line-height: 1.4; }
  .xr { display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr); }
  .xk, .xc { padding: 7px 14px; border-top: 1px solid var(--line); }
  .xk { padding-left: 0; color: var(--sub); }
  .xc.conv { color: #6B6B72; }
  .xc.cmp { background: #FAFAFA; box-shadow: inset 1.5px 0 0 var(--indigo), inset -1.5px 0 0 var(--indigo); color: var(--ink); font-weight: 500; }
  .xr-sys .xk, .xr-sys .xc { border-top: 0; padding-top: 14px; padding-bottom: 12px; display: flex; align-items: center; }
  .xr-sys b { font-weight: 500; font-size: 15px; color: var(--ink); }
  .lp { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; }
  .xr-sys .xc.cmp { border-radius: 16px 16px 0 0; box-shadow: inset 1.5px 0 0 var(--indigo), inset -1.5px 0 0 var(--indigo), inset 0 1.5px 0 var(--indigo); }
  .xr-path .xc.cmp { border-radius: 0 0 16px 16px; box-shadow: inset 1.5px 0 0 var(--indigo), inset -1.5px 0 0 var(--indigo), inset 0 -1.5px 0 var(--indigo), 0 30px 50px -30px rgba(61,59,243,.35); }
  .xr-verdict .xk { align-self: stretch; display: flex; align-items: center; }
  .xr-verdict .xc { font-size: clamp(32px, 3.2vw, 48px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; padding-block: 8px; }
  .xr-verdict .xc.conv { color: #A2A2AA; }
  .xr-verdict .xc.cmp { color: var(--indigo); }
  .xc .bad { color: var(--bad); font-weight: 500; }
  .xc .m { font-size: 13px; font-weight: 400; }
  .xr-path .xc { padding-block: 9px 12px; }
  .hl { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-weight: 400; }
  .hl span { font-size: 13px; padding: 3px 7px; border-radius: 8px; background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
  .conv .hl span { background: transparent; color: #6B6B72; }
  .hl span.x { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(136,19,55,.25); }
  .hl i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); }
  .hl i::before { content: "→ "; color: var(--indigo); }
  .ex-foot { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 32px; margin-top: 14px; font-size: 13px; }
  .ex-foot p { margin: 0; color: var(--sub); }
  .ex-foot p b { color: var(--ink); font-weight: 500; }
  .ex-props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; color: var(--sub); font-size: 13px; line-height: 1.4; }
  .ex-props b { display: block; color: var(--ink); font-weight: 500; font-size: 13px; }
  @media (max-width: 900px) {
    .ex-head, .ex-foot { grid-template-columns: 1fr; gap: 16px; }
    .ex-head .lede { justify-self: start; }
  }
  @media (max-width: 700px) {
    .ex { padding-block: 64px; }
    .xr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .xk { grid-column: 1 / -1; padding: 12px 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
    .xc { border-top: 0; padding: 4px 10px 10px; font-size: 13px; }
    .xr-sys .xk { display: none; }
    .xr-sys .xc b { font-size: 14px; }
    .ex-props { grid-template-columns: 1fr; gap: 10px; }
  }

  /* ================= round 5 ================= */
  .sec { padding-block: clamp(52px, 7.2vh, 92px); }
  .sec-head { margin-bottom: clamp(24px, 3.4vh, 40px); }
  .draft-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9A5B0B; margin-left: 8px; vertical-align: middle; }

  /* ---------- the core, scoped (lifted from the approved architecture section) ---------- */
  .core { --ink: #F4F4F6; --sub: #A9A9B1; --faint: #74747D; --cal-ink: #D4D3FF; position: relative; }
  .core .cfig { position: relative; height: clamp(460px, 48vw, 560px); }
  .core .cfig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .core .cfig .labels > *, .core .cfig .events > * { position: absolute; }
  .core .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
  .core .lid-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--sub); white-space: nowrap; }
  .core .lid-lbl b { color: var(--ink); font-weight: 500; }
  .core .graph-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--cal-ink); white-space: nowrap; }
  .core .zone { font-size: 12px; color: var(--sub); white-space: nowrap; text-align: center; transform: translateX(-50%); line-height: 1.35; transition: color .3s ease; }
  .core .zone b { display: block; color: var(--ink); font-weight: 500; font-size: 13px; transition: color .3s ease, text-shadow .3s ease; }
  .core .zone.cm b { color: var(--cal-ink); }
  .core .zone.on b { color: #FAFAFA; text-shadow: 0 0 14px rgba(169,168,255,.9); }
  .core .zone.on { color: #D4D3FF; }
  /* "Shared embedding space" stays on one line where there is room; where the core is narrow it breaks after "Shared" */
  @media (min-width: 901px) and (max-width: 1180px) { .core .zone.sv b { white-space: normal; max-width: 8.4em; margin-inline: auto; } }
  @media (max-width: 700px) { .core:not(.cal-core) .zone b { font-size: 12px; } }
  .core .pack { display: flex; align-items: center; gap: 16px; padding: 13px 26px 13px 13px; min-width: 380px; border-radius: 16px; background: #111116; box-shadow: inset 0 0 0 1px rgba(169,168,255,.3), 0 16px 40px -16px rgba(61,59,243,.55); white-space: nowrap; transition: box-shadow .5s ease; }
  .core .pack.lit { box-shadow: inset 0 0 0 1.5px #A9A8FF, 0 0 44px -6px rgba(109,107,255,.95); }
  .core .pack > i { width: 34px; height: 34px; border-radius: 9px; background: #3D3BF3; display: grid; place-items: center; flex: none; transition: box-shadow .4s ease; }
  .core .pack > i svg { position: static; width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity .35s ease, transform .35s ease; }
  .core .pack > span { font-size: 13px; color: var(--sub); line-height: 1.45; }
  .core .pack > span > b { display: block; color: var(--ink); font-weight: 500; font-size: 13px; letter-spacing: -0.005em; margin-bottom: 3px; }
  .core .pack .ic-seal { opacity: 0; transform: scale(.6); }
  .core .pack.sealed .ic-doc { opacity: 0; transform: scale(.6); }
  .core .pack.sealed .ic-seal { opacity: 1; transform: none; }
  .core .pack.sealed > i { box-shadow: 0 0 0 3px rgba(61,59,243,.35), 0 0 18px rgba(109,107,255,.8); }
  .core .pk-lines { display: grid; }
  .core .pk-lines > span { grid-area: 1 / 1; transition: opacity .4s ease; }
  .core .pk-sub { word-spacing: .08em; }
  .core .pk-sub em { font-style: normal; transition: color .3s ease, text-shadow .3s ease; }
  .core .pk-sub em.on { color: #F4F4F6; text-shadow: 0 0 12px rgba(169,168,255,.7); }
  .core .pk-rec { opacity: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: #D4D3FF; display: flex; align-items: center; gap: 6px; }
  .core .pk-rec i { width: 5px; height: 5px; border-radius: 50%; background: #A9A8FF; }
  .core .pack.sealed .pk-sub { opacity: 0; }
  .core .pack.sealed .pk-rec { opacity: 1; }
  /* the pack's two lines share one spot: the outgoing line fades out before the incoming one fades in, so they never overlap */
  .core .pk-lines > span { transition: opacity .22s ease; }
  .core .pack.sealed .pk-rec, .core .pack:not(.sealed) .pk-sub { transition-delay: .22s; }
  .core .ev-pill { z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; white-space: nowrap; pointer-events: none; padding: 4px 10px 4px 8px; border-radius: 999px; color: #F4F4F6; background: rgba(10,10,10,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 8px 24px -8px rgba(0,0,0,.8); opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
  .core .ev-pill.on { opacity: 1; transform: none; }
  .core .ev-pill i { width: 6px; height: 6px; border-radius: 50%; background: #F4F4F6; }
  .core .hop { z-index: 4; width: 16px; height: 16px; border-radius: 50%; background: #3D3BF3; color: #FAFAFA; font: 500 11px/16px var(--mono); text-align: center; transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); pointer-events: none; box-shadow: 0 0 0 3px rgba(10,10,10,.8); }
  .core .hop.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .core .hop-name { z-index: 4; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: #E6E6F0; background: rgba(10,10,10,.82); padding: 1px 6px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
  .core .hop-name.on { opacity: 1; }
  .core .hop-name.term { color: #FFB3C1; }
  .core .fade-out { transition: opacity .8s ease !important; opacity: 0 !important; }
  .core .trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .core-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
  .dark .hint { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #74747D; margin: 26px 0 0; display: flex; align-items: center; gap: 10px; }
  .dark .hint::before { content: ""; width: 22px; height: 1px; background: rgba(255,255,255,.3); }
  .arch5 .lede { max-width: 44ch; margin-top: 20px; }

  /* ---------- shared figure helpers ---------- */
  .wire { fill: none; stroke-linecap: round; }
  .fine-card { background: #FAFAFA; border-radius: 16px; box-shadow: var(--shadow-card); }

  /* ---------- 2. names do not match: the chain ---------- */
  .ch .sec-head { align-items: end; }
  .ch-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); background: #FAFAFA; margin-top: 18px; }
  .ch-tabs button { font: 500 13px/1 var(--sans); color: var(--sub); background: none; border: 0; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
  .ch-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .ch-card { border-radius: 20px; background: #FAFAFA; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(30,28,120,.25); overflow: hidden; }
  .ch-card-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
  .ch-fig { position: relative; height: 270px; margin: 18px 22px 8px; }
  .ch-fig > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .ch-node em svg { display: block; }
  .ch-node { position: absolute; width: 238px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #FAFAFA; box-shadow: 0 0 0 1px var(--line-2), 0 10px 24px -16px rgba(30,28,120,.3); transition: opacity .4s ease, box-shadow .5s ease, background .5s ease; z-index: 1; }
  .ch-node em { font-style: normal; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 500 12px/1 var(--mono); background: #F2F2F5; color: var(--ink); }
  .ch-node small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
  .ch-node b { display: block; font-weight: 500; font-size: 14px; letter-spacing: -0.01em; margin-top: 2px; }
  .ch-node span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); margin-top: 3px; }
  .ch-node span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
  .ch-node.subj em { background: var(--indigo); color: #FAFAFA; }
  .ch-node.subj small { color: var(--indigo); }
  .ch-node[data-n="zc"] { left: 0; top: 50%; transform: translateY(-50%); }
  .ch-node[data-n="wg"] { left: 37%; top: 0; }
  .ch-node[data-n="mi"] { left: 37%; bottom: 0; }
  .ch-node[data-n="dv"] { right: 0; bottom: 0; }
  .ch-node.sanct em { background: var(--bad-bg); color: var(--bad); }
  .ch-node.sanct.hot { box-shadow: 0 0 0 1.5px rgba(136,19,55,.55), 0 14px 30px -14px rgba(136,19,55,.45); }
  .ch-node.sanct.hot small, .ch-node.sanct.hot span { color: var(--bad); }
  .ch-node.sanct span::before { background: var(--bad); }
  .ch-lbl { position: absolute; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 11px; color: var(--sub); background: #FAFAFA; padding: 2px 6px; border-radius: 4px; white-space: nowrap; z-index: 2; transition: color .4s, opacity .4s; }
  .ch-lbl.hot { color: var(--bad); }
  .ch-hop { position: absolute; z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: var(--indigo); color: #FAFAFA; font: 500 10px/18px var(--mono); text-align: center; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px #FAFAFA; transition: opacity .3s, transform .3s; }
  .ch-why { margin: 0 22px 20px; padding: 14px 16px; border-radius: 12px; background: #FBFBFC; box-shadow: inset 0 0 0 1px var(--line); display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; font-size: 14px; color: var(--sub); transition: box-shadow .5s ease, background .5s ease; }
  .ch-why b { font-weight: 500; color: var(--bad); }
  .ch-why p { margin: 0; }
  .ch-why.hot { background: var(--bad-bg); box-shadow: inset 0 0 0 1px rgba(136,19,55,.25); }
  .ch[data-view="exp"] .ch-node[data-n="wg"], .ch[data-view="exp"] [data-e="wg"] { opacity: .22; }

  /* ---------- 3. the assessment tour ---------- */
  .tr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
  .tr-head h2 { margin: 0; }
  .sec.tr { padding-block: clamp(40px, 5.8vh, 76px); }
  .tr-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: stretch; }
  .tr h2 { font-size: clamp(28px, 2.7vw, 40px); }
  .tr-lede { margin: 0 0 6px; color: var(--sub); font-size: 15px; }
  .tr-rail { list-style: none; margin: 0 0 0 -12px; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
  .tr-rail button { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; padding: 8px 12px; border-radius: 12px; transition: background .3s ease, box-shadow .3s ease; }
  .tr-rail button:hover { background: rgba(10,10,10,.03); }
  .tr-rail .n { font-family: var(--mono); font-size: 11px; color: var(--faint); grid-row: span 2; padding-top: 2px; }
  .tr-rail b { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
  .tr-rail .d { font-size: 13px; color: var(--sub); line-height: 1.4; }
  .tr-rail button[aria-current="step"] { background: #FAFAFA; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px rgba(30,28,120,.35); }
  .tr-rail button[aria-current="step"] .n { color: var(--indigo); }
  .tr-rail button .bar { grid-column: 2; height: 2px; border-radius: 2px; background: var(--line); margin-top: 8px; overflow: hidden; display: none; }
  .tr-rail button[aria-current="step"] .bar { display: block; }
  .tr-rail button .bar i { display: block; height: 100%; width: 0; background: var(--indigo); }
  .tr-win { border-radius: 16px; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(10,10,10,.08), 0 30px 70px -34px rgba(30,28,120,.35); overflow: hidden; height: 528px; display: flex; flex-direction: column; font-size: 13px; line-height: 1.45; }
  .tr-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #FBFBFC; font-family: var(--mono); font-size: 11px; color: var(--sub); }
  .tr-bar i { width: 8px; height: 8px; border-radius: 50%; background: #E2E2E6; }
  .tr-bar span { margin-left: 10px; }
  .tr-body { flex: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 0; }
  .tr-list { border-right: 1px solid var(--line); background: #FBFBFC; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .tr-list .top { display: flex; justify-content: space-between; align-items: center; }
  .tr-list .top b { font-weight: 500; font-size: 13px; }
  .tr-list .new { font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 7px; background: var(--ink); color: #FAFAFA; }
  .tr-search { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s ease; }
  .tr-search .q { font-family: var(--mono); font-size: 12px; min-height: 16px; }
  .tr-search .q::after { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--indigo); margin-left: 1px; vertical-align: -2px; opacity: 0; }
  .tr-win[data-step="0"] .tr-search { box-shadow: inset 0 0 0 1.5px var(--indigo); }
  .tr-win[data-step="0"] .tr-search .q::after { opacity: 1; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .tr-search small { font-size: 11px; color: var(--sub); white-space: nowrap; }
  .tr-filters { display: flex; flex-wrap: wrap; gap: 4px; }
  .tr-filters span { font-size: 11px; padding: 3px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--sub); }
  .tr-filters span b { font-weight: 500; color: var(--ink); margin-left: 3px; }
  .tr-filters span.on { background: var(--ink); color: #FAFAFA; box-shadow: none; } .tr-filters span.on b { color: #FAFAFA; }
  .tr-item { border-radius: 10px; padding: 8px 9px; box-shadow: inset 0 0 0 1px var(--line); background: #FAFAFA; display: grid; gap: 4px; transition: opacity .35s ease, box-shadow .3s ease; }
  .tr-item .t { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-weight: 500; font-size: 12px; }
  .tr-item .t small { font-weight: 400; font-size: 11px; color: var(--sub); }
  .tr-item .r { display: grid; grid-template-columns: 24px 26px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 11px; color: var(--sub); }
  .tr-item .r .sc { font-family: var(--mono); color: var(--ink); }
  .tr-item.sel { box-shadow: inset 0 0 0 1.5px var(--indigo); }
  .tr-win[data-step="0"] .tr-item:not(.sel) { opacity: .35; }
  .tr-detail { padding: 14px 18px 0; display: flex; flex-direction: column; min-width: 0; position: relative; }
  .tr-crumb { font-size: 11px; color: var(--sub); }
  .tr-title { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
  .tr-title b { font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }
  .tr-sub { color: var(--sub); font-size: 12px; margin-top: 2px; }
  .tr-assess { font-size: 12px; margin-top: 6px; } .tr-assess small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); margin-right: 6px; }
  .tr-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-top: 10px; }
  .tr-tabs span { padding: 7px 0; color: var(--sub); font-weight: 500; border-bottom: 1.5px solid transparent; margin-bottom: -1px; transition: color .3s, border-color .3s; }
  .tr-win[data-step="0"] .tr-tabs span[data-t="summary"], .tr-win[data-step="1"] .tr-tabs span[data-t="summary"], .tr-win[data-step="2"] .tr-tabs span[data-t="trace"], .tr-win[data-step="3"] .tr-tabs span[data-t="evidence"], .tr-win[data-step="4"] .tr-tabs span[data-t="history"], .tr-win[data-step="5"] .tr-tabs span[data-t="history"] { color: var(--ink); border-color: var(--ink); }
  .tr-panes { position: relative; flex: 1; min-height: 0; }
  .tr-pane { position: absolute; inset: 0; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: none; overflow: hidden; }
  .tr-win[data-step="0"] .tr-pane[data-p="summary"], .tr-win[data-step="1"] .tr-pane[data-p="summary"], .tr-win[data-step="2"] .tr-pane[data-p="trace"], .tr-win[data-step="3"] .tr-pane[data-p="evidence"], .tr-win[data-step="4"] .tr-pane[data-p="history"], .tr-win[data-step="5"] .tr-pane[data-p="history"] { opacity: 1; visibility: visible; transform: none; transition: opacity .32s ease .04s, transform .32s ease .04s; }
  .tr-k { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
  .tr-rec { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
  .tr-box { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); padding: 10px 12px; }
  .tr-box p { margin: 4px 0 0; color: var(--sub); font-size: 12px; }
  .tr-box .call { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 500; }
  .tr-esc { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(146,64,14,.2); }
  .tr-score { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
  .tr-score b { font-size: 34px; font-weight: 500; letter-spacing: -0.03em; }
  .tr-score span { color: var(--bad); font-size: 12px; }
  .tr-scale { position: relative; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #DDEBE8, #F2E4D7 50%, #F0D5DD); margin: 8px 0 4px; }
  .tr-scale i { position: absolute; top: -3px; left: 72%; width: 2px; height: 11px; background: var(--ink); border-radius: 1px; }
  .tr-ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--faint); }
  .tr-factors { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .tr-factors .tr-k { grid-column: 1 / -1; }
  .tr-factors div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 5px; border-top: 1px solid var(--line); font-size: 12px; }
  .tr-factors div span:last-child { font-family: var(--mono); font-size: 11px; color: var(--sub); white-space: nowrap; }
  .tr-trace-h { display: flex; justify-content: space-between; align-items: baseline; }
  .tr-trace-h b { font-weight: 500; }
  .tr-steps { margin-top: 8px; display: grid; }
  .tr-steps div { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
  .tr-steps div > i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C9C9CF; transition: background .3s, box-shadow .3s; }
  .tr-steps div.done > i { background: var(--ok); box-shadow: none; }
  .tr-steps div .st { font-size: 11px; color: var(--sub); }
  .tr-steps div .tm { font-family: var(--mono); font-size: 11px; color: var(--sub); min-width: 34px; text-align: right; }
  .tr-steps .edge { grid-template-columns: 16px minmax(0, 1fr) auto; color: var(--sub); font-size: 12px; }
  .tr-sha { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: var(--ok-bg); color: var(--ok); font-size: 12px; transition: opacity .4s; }
  .tr-sha span { font-family: var(--mono); }
  .tr-pack { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .tr-pack b { font-weight: 500; }
  .tr-dl { font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 7px; background: var(--ink); color: #FAFAFA; transition: background .3s; }
  .tr-dl.done { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(17,94,89,.2); }
  .tr-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: var(--sub); }
  .tr-meta .m { color: var(--ink); }
  .tr-ev { margin-top: 10px; display: grid; gap: 8px; }
  .tr-ev .line { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
  .tr-ev .line.miss .tr-k { color: var(--bad); }
  .tr-fact { margin-top: 2px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); padding: 9px 11px; display: grid; gap: 4px; }
  .tr-fact .h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .tr-fact .h b { font-weight: 500; }
  .tr-fact p { margin: 0; color: var(--sub); }
  .tr-tl { display: grid; margin-top: 4px; }
  .tr-tl div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
  .tr-tl div .tm { font-family: var(--mono); font-size: 11px; color: var(--sub); }
  .tr-tl div b { font-weight: 500; display: block; }
  .tr-tl div span { color: var(--sub); font-size: 12px; }
  .tr-tl .note { display: block; margin-top: 8px; font-size: 12px; color: var(--ok); }
  .tr-call { position: absolute; left: 18px; right: 18px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 12px; background: #FAFAFA; box-shadow: 0 0 0 1px var(--line-2), 0 16px 34px -18px rgba(30,28,120,.4); z-index: 2; transition: opacity .35s, transform .35s; opacity: 0; transform: translateY(8px); pointer-events: none; }
  .tr-win[data-step="5"] .tr-call { opacity: 1; transform: none; }
  .tr-call b { font-weight: 500; }
  .tr-call .btns { display: flex; gap: 6px; }
  .tr-call .btns span { font-size: 12px; font-weight: 500; padding: 6px 11px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s, color .25s; }
  .tr-call .btns span.press { background: var(--ink); color: #FAFAFA; box-shadow: none; }
  .tr-call .done { display: none; align-items: center; gap: 8px; color: var(--ok); font-weight: 500; }
  .tr-call.escalated .btns { display: none; } .tr-call.escalated .done { display: flex; }
  .tr-call .done::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.1 4.8-4.8' fill='none' stroke='%23FAFAFA' stroke-width='1.6'/></svg>") center / 16px no-repeat; }
  .tr-rail button:focus-visible, .ch-tabs button:focus-visible, .bill button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
  .tr-dlg { position: absolute; inset: 0; background: rgba(250,250,250,.72); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 3; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .tr-dlg.on { opacity: 1; visibility: visible; }
  .tr-dlg > div { width: min(360px, 86%); background: #FAFAFA; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -20px rgba(30,28,120,.45); padding: 16px 18px; }
  .tr-dlg b { font-weight: 500; font-size: 14px; }
  .tr-dlg p { margin: 6px 0 12px; color: var(--sub); font-size: 12px; }
  .tr-dlg .btns { display: flex; justify-content: flex-end; gap: 6px; }
  .tr-dlg .btns span { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
  .tr-dlg .btns span.p { background: var(--indigo); color: #FAFAFA; box-shadow: none; }

  /* ---------- 4. manifesto: documents gather into one decision ---------- */
  .mf-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; }
  .mf-grid h2 { font-size: clamp(30px, 3.4vw, 50px); }
  .mf-grid h2 em { font-style: normal; color: var(--indigo); }
  .mf-docs { margin-top: 30px; display: grid; gap: 8px; }
  .mf-doc { position: relative; display: grid; grid-template-columns: 22px 130px minmax(0, 1fr); gap: 12px; align-items: center; background: #FAFAFA; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; font-size: 14px; transition: box-shadow .4s ease; }
  .mf-doc .ck { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C9C9CF; display: grid; place-items: center; transition: background .35s, box-shadow .35s; }
  .mf-doc .ck::after { content: ""; width: 7px; height: 4px; border-left: 1.5px solid #FAFAFA; border-bottom: 1.5px solid #FAFAFA; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; transition: opacity .3s; }
  .mf-doc.got .ck { background: var(--ok); box-shadow: none; } .mf-doc.got .ck::after { opacity: 1; }
  .mf-doc.got { box-shadow: inset 0 0 0 1px rgba(17,94,89,.25); }
  .mf-doc .m { font-size: 12px; color: var(--sub); }
  .mf-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .mf-right { grid-column: 3; }
  .mf-rec { margin-top: 30px; border-radius: 16px; background: #FAFAFA; box-shadow: var(--shadow-product); padding: 18px 20px; font-size: 14px; transition: box-shadow .5s ease; }
  .mf-rec.lit { box-shadow: 0 0 0 1.5px var(--indigo), var(--shadow-product); }
  .mf-rec .h { display: flex; justify-content: space-between; align-items: center; }
  .mf-rec .h b { font-weight: 500; display: flex; align-items: center; gap: 10px; color: var(--indigo); }
  .mf-rec .seal { width: 22px; height: 22px; border-radius: 7px; background: var(--indigo-soft); display: grid; place-items: center; transition: background .4s; }
  .mf-rec .seal svg { width: 12px; height: 12px; }
  .mf-rec.signed .seal { background: var(--indigo); }
  .mf-rec .hash { font-family: var(--mono); font-size: 12px; color: var(--sub); margin-top: 12px; min-height: 18px; }
  .mf-rec .who { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--sub); transition: opacity .4s; }
  .mf-rec .who b { font-weight: 500; color: var(--ink); }
  .mf-foot { margin: 34px 0 0; text-align: center; font-size: 12px; color: var(--faint); font-family: var(--mono); }

  /* ---------- 5. the shift: each problem resolves ---------- */
  .sh-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a1 a2 a3" "b1 b2 b3" "lg lg lg" "r1 r2 r3"; background: #FAFAFA; border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -40px rgba(30,28,120,.35); overflow: hidden; }
  .sh-art.c1 { grid-area: a1; } .sh-art.c2 { grid-area: a2; } .sh-art.c3 { grid-area: a3; }
  .sh-body.c1 { grid-area: b1; } .sh-body.c2 { grid-area: b2; } .sh-body.c3 { grid-area: b3; }
  .sh-res.c1 { grid-area: r1; } .sh-res.c2 { grid-area: r2; } .sh-res.c3 { grid-area: r3; }
  .sh-panel .c2, .sh-panel .c3 { box-shadow: inset 1px 0 0 var(--line); }
  .sh-art { position: relative; height: 104px; background: linear-gradient(180deg, #F7F7FA, #FBFBFC); border-bottom: 1px solid var(--line); }
  .sh-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .sh-art .sh-n { position: absolute; right: 16px; top: 12px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
  .sh-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
  .sh-body h3 { font-size: 18px; line-height: 1.25; }
  .sh-body p { margin: 0; color: var(--sub); line-height: 1.5; }
  /* one rule, one label: it fills as each problem resolves */
  .sh-legend { grid-area: lg; position: relative; height: 1px; background: var(--line); }
  .sh-legend i { position: absolute; inset: 0; background: var(--indigo); transform-origin: left center; transform: scaleX(1); transition: transform .7s cubic-bezier(.3,.7,.2,1); }
  .sh-legend span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 12px; border-radius: 999px; background: #FAFAFA; box-shadow: inset 0 0 0 1px rgba(61,59,243,.28); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); white-space: nowrap; }
  .sh-res { display: flex; gap: 12px; align-items: center; padding: 22px 22px 20px; background: #FBFBFF; font-size: 14px; font-weight: 500; }
  .sh-res i { width: 26px; height: 26px; border-radius: 8px; background: var(--indigo-soft); display: grid; place-items: center; flex: none; transition: background .4s ease, box-shadow .4s ease; }
  .sh-res i::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(-45deg) translate(1px, -1px); transition: border-color .4s ease; }
  .sh-res.resolved i { background: var(--indigo); box-shadow: 0 0 0 4px rgba(61,59,243,.12); } .sh-res.resolved i::after { border-color: #FAFAFA; }
  .sh-res > span { display: flex; flex-direction: column; }
  .sh-res .label { display: none; font-weight: 400; font-size: 11px; margin-bottom: 2px; color: var(--indigo); }

  /* ---------- 6. workforce run cards ---------- */
  .life .tile-art { padding: 14px 16px; }
  .life .tile-art .pc { padding: 14px 16px; }
  .life .kv { padding-block: 6px; }
  .life .outcome { margin-top: 8px; padding: 8px 10px; }
  .life .tile-copy { padding: 14px 18px 18px; gap: 6px; }
  .life .tile-copy p { font-size: 13px; line-height: 1.5; }
  #workforce h2, #how h2 { font-size: clamp(28px, 3vw, 44px); }
  #how .flow .pc { padding: 16px; }
  #how .flow-cap { margin-top: 16px; }
  .sec.ex { padding-block: 36px 34px; }
  .vd-head { margin-bottom: 18px; }
  .vd-panel .access { padding-block: 6px; }
  .vd-panel .stats b { font-size: 24px; }
  .vd-panel .stats div { padding: 9px 12px; }
  .art-thumb { aspect-ratio: 16 / 8.5; }
  .art-body { padding: 18px 20px 20px; }
  .runhead b.live::before { animation: pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .25; } }
  .outcome { transition: opacity .45s ease, transform .45s ease; }
  .outcome.pending { opacity: 0; transform: translateY(4px); }

  /* ---------- 7. how it works ---------- */
  .how .flow .pc { transition: box-shadow .4s ease; }
  .how .flow .pc.on { box-shadow: 0 0 0 1.5px var(--indigo), var(--shadow-product); }
  .agent-line i { transition: background .3s, box-shadow .3s; }
  .agent-line.pending i { background: #FAFAFA; box-shadow: inset 0 0 0 1.5px #C9C9CF; }
  .agent-line.pending i::after { opacity: 0; }
  .call-btns span { transition: background .3s, color .3s, box-shadow .3s; }
  .call-btns.pending span.p1 { background: #FAFAFA; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
  .fill-in { transition: opacity .4s ease; }
  .fill-in.pending { opacity: 0; }
  .agentic { padding-block: clamp(44px, 6vh, 72px); border-top: 1px solid var(--line); }
  .agentic .two-text { margin-top: 0; padding-top: 0; border-top: 0; }
  .ul-draw { background-image: linear-gradient(var(--indigo), var(--indigo)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1.5px; transition: background-size 1.1s cubic-bezier(.3,.7,.2,1); padding-bottom: 1px; color: var(--ink); }
  .ul-draw.pending { background-size: 0% 1.5px; }

  /* ---------- 9. virtual data room: only hashes cross the boundary ---------- */
  .vd-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 26px; }
  .vd-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
  .vd-room { position: relative; border-radius: 20px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: 16px 18px 14px; display: flex; flex-direction: column; }
  .vd-fig { position: relative; flex: 1; min-height: 186px; }
  .vd-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .vd-fig .lb { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8E8E97; white-space: nowrap; transform: translateX(-50%); }
  .vd-fig .lb.in { color: #A4A3FA; }
  .vd-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
  .vd-steps div { font-size: 13px; color: #C9C9D0; line-height: 1.35; transition: color .3s; }
  .vd-steps div .m { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #74747D; margin-bottom: 3px; }
  .vd-steps div .m::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); transition: background .3s, box-shadow .3s; }
  .vd-steps div span { display: block; color: #8E8E97; font-size: 12px; margin-top: 2px; }
  .vd-steps div.on { color: #FAFAFA; }
  .vd-steps div.on .m::before { background: #A9A8FF; box-shadow: 0 0 10px #8F8DFF; }
  .vd-steps div.on span { color: #B8B8C0; }
  .vd-panel { padding: 18px 20px; }
  .vd-panel .stats b { transition: color .4s; }
  .vd-panel .stats b.bump { color: var(--indigo); }
  .vd-panel .access { transition: background .4s; border-radius: 8px; }
  .vd-panel .access.hl { background: var(--indigo-soft); }
  .vd-panel .access { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 10px; padding-inline: 6px; margin-inline: -6px; }
  .vd-panel .access > b { order: 0; } .vd-panel .access > span:nth-child(4) { order: 1; grid-column: auto !important; color: var(--sub); }
  .vd-panel .access > span.m { order: 2; } .vd-panel .access > span:nth-child(3) { order: 3; }
  @media (max-width: 480px) { .vd-panel .access { grid-template-columns: auto minmax(0, 1fr); } .vd-panel .access > span.m, .vd-panel .access > span:nth-child(3) { justify-self: start; } }
  .vd-foot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 18px; align-items: start; }
  .vd-feat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .vd-feat div { font-size: 12px; color: #A9A9B1; line-height: 1.4; border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px; }
  .vd-feat b { display: block; color: #F4F4F6; font-weight: 500; font-size: 13px; margin-bottom: 2px; }
  .vd-bound p { margin: 0; font-size: 14px; color: #F4F4F6; line-height: 1.45; }
  .vd-bound .usecases { margin-top: 10px; }

  /* ---------- 10. worked example paths ---------- */
  .hl span, .hl i { transition: opacity .35s ease, transform .35s ease; }
  .hl .pending { opacity: 0; transform: translateX(-4px); }
  .xr-verdict .xc { transition: opacity .4s ease; }
  .lp-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
  @media (min-width: 901px) and (max-height: 880px), (min-width: 901px) and (max-width: 1180px) {
    .ex-head { margin-bottom: 10px; } .ex-head .lede { font-size: 14px; }
    .xt-cap { margin-bottom: 4px; }
    .xr-sys .xk, .xr-sys .xc { padding-top: 10px; padding-bottom: 8px; }
    .xr-verdict .xc { padding-block: 4px; font-size: clamp(28px, 2.8vw, 42px); }
    .xr-path .xc { padding-block: 7px 9px; }
    .ex-foot { margin-top: 10px; }
  }
  @media (min-width: 901px) and (max-width: 1180px) { .xr { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr); } .xt { font-size: 13px; } .ex-head h2 { font-size: 29px; } .ex-foot { font-size: 13px; gap: 20px; } .ex-props { font-size: 12px; gap: 12px; } .ex-props b { font-size: 13px; } }
  .hl span small { font-family: var(--mono); font-size: 11px; color: var(--sub); margin-left: 4px; }
  .hl span.x small { color: var(--bad); opacity: .75; }
  .xr-verdict .xc.pending { opacity: .12; }

  /* ---------- 11. calibration ---------- */
  .cal5-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px; align-items: center; }
  .cal5-copy h2 { font-size: clamp(28px, 2.8vw, 42px); }
  .cal5-copy .lede { font-size: 15px; margin-top: 16px; }
  .cal5-copy .boundary-note { margin-top: 18px; font-size: 13px; }
  .cal-core { background: #0A0A0A; border-radius: 22px; padding: 18px 16px 8px; box-shadow: 0 30px 70px -34px rgba(30,28,120,.55); }
  .cal-core .cfig { height: 470px; }
  .cal-core .zone { white-space: normal; width: 31%; }
  .cal-core .zone b { font-size: 13px; }
  .cal-core .zone span { font-size: 11px; line-height: 1.3; }
  .cal-core .pack { min-width: 0; padding: 11px 18px 11px 11px; gap: 12px; }
  .cal-core .pack > span > b { font-size: 13px; }
  .cal-entry { padding: 18px 20px; font-size: 13px; }
  .cal-entry .kv { grid-template-columns: 92px minmax(0, 1fr); padding-block: 7px; transition: background .35s ease; border-radius: 6px; }
  .cal-entry .kv b { text-align: left; }
  .cal-entry .kv.hl { background: var(--indigo-soft); }
  .cal-entry .kv .m { font-size: 12px; }
  .cal-entry .entry-foot { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
  .cal-entry .entry-foot .hash { transition: color .4s; }
  .cal-entry.signed .entry-foot .hash { color: var(--indigo); }
  /* ---------- stable 2.27 · calibration: one decision, then the next case ---------- */
  .cl-grid { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(30px, 3.6vw, 56px); align-items: center; }
  /* the decision and the next case span the entry's height: steps 1 and 2 start on one line, 3 and the entry end on one line */
  .cl-flow { display: grid; row-gap: clamp(28px, 4vh, 48px); align-content: space-between; align-self: stretch; min-width: 0; }
  .cl-c2 { align-self: stretch; display: flex; flex-direction: column; }
  .cl-c2 .cal-entry { flex: 1; }
  .cl-c2 .cal-entry .entry-foot { margin-top: auto; padding-top: 10px; }
  .cal5-copy { align-self: center; }
  .cl-col { min-width: 0; }
  .cl-step { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font: 500 10px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
  .cl-step i { flex: none; font-style: normal; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; letter-spacing: 0; color: #FAFAFA; background: var(--indigo); }
  .cl-case, .cl-next { position: relative; padding: 14px 16px 12px; font-size: 13px; box-shadow: var(--shadow-product); }
  .cl-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .cl-h .m { font-size: 12px; color: var(--ink); }
  .cl-h .pill, .cl-h .x2-tag { margin-left: auto; }
  .cl-who { font-size: 13px; color: var(--sub); padding-bottom: 9px; }
  .cl-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-block: 8px; border-top: 1px solid var(--line); }
  .cl-row > span:first-child { color: var(--sub); }
  .cl-cls { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .cl-was { color: var(--bad); text-decoration-thickness: 1.5px; transition: opacity .3s ease; }
  .cl-now { font-weight: 500; }
  .cl-now.hi { color: var(--bad); } .cl-now.me { color: var(--warn); }
  /* the rationale keeps its full size while it is typed, so nothing below it moves */
  .cl-type { position: relative; display: block; font-weight: 500; }
  .cl-ghost { visibility: hidden; }
  .cl-typed { position: absolute; inset: 0; }
  .cl-typed.typing::after { content: ""; display: inline-block; width: 1px; height: 13px; margin-left: 1px; vertical-align: -2px; background: var(--ink); }
  .cl-foot { display: grid; padding-top: 10px; border-top: 1px solid var(--line); }
  .cl-foot > * { grid-area: 1 / 1; align-self: center; transition: opacity .25s ease; }
  .cl-acts { display: flex; gap: 8px; }
  .cl-btn { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-2); background: #FAFAFA; color: var(--ink); }
  .cl-btn.p { background: var(--ink); color: #FAFAFA; box-shadow: none; }
  .cl-by { font: 400 12px/1.3 var(--mono); color: var(--sub); }
  .cl-case.decided .cl-acts, .cl-case:not(.decided) .cl-by { opacity: 0; }
  .cl-case.decided .cl-by { transition-delay: .25s; }
  .cl-cal { font: 500 11px/1 var(--mono); color: var(--indigo); background: var(--indigo-soft); padding: 4px 8px; border-radius: 999px; transition: box-shadow .4s ease; }
  .cl-cal.on { box-shadow: 0 0 0 4px rgba(61,59,243,.16); }
  .cl-last { padding-bottom: 0; }
  .cal-entry .kv.cl-on { background: var(--indigo-soft); }
  /* what is still to come waits in place, faded, so nothing shifts */
  #calibration [data-pending] { opacity: .22; transition: opacity .35s ease; }
  .cl-wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .cl-wire path { fill: none; stroke: var(--indigo); stroke-width: 1.8; stroke-linecap: round; opacity: .9; transition: opacity .35s ease; }
  .cl-wire circle { fill: var(--indigo); transition: opacity .35s ease; }
  .cl-wire circle.s { fill: #FAFAFA; stroke: var(--indigo); stroke-width: 1.5; }
  #calibration .cl-wire [data-pending] { opacity: 0; }
  .cl-ptrs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  @media (min-width: 901px) and (max-width: 1180px) {
    .cl-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 28px; }
    .cl-row { grid-template-columns: 104px minmax(0, 1fr); }
    .cl-case, .cl-next { padding: 12px 13px 10px; font-size: 13px; }
    .cl-by { font-size: 11px; white-space: nowrap; }
  }
  @media (max-width: 900px) {
    /* stacked: the decision, the signal, the next case, in that order */
    .cl-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
    .cl-flow { align-content: start; }
    .cl-flow { display: contents; }
    .cl-c1 { order: 2; } .cl-c2 { order: 3; } .cl-c3 { order: 4; }
    .cl-wire { display: none; }
  }
  @media (max-width: 1180px) {
    /* where the card is narrow, the status sits on its own line, so the header keeps one height whatever the status says */
    .cl-h { display: grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
    .cl-h .pill { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
  }
  /* ---------- end stable 2.27 calibration ---------- */

  /* ---------- 12. early access chart ---------- */
  .chart-card path.draw { transition: stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1); }
  .chart-card .area { transition: opacity 1s ease .6s; }
  .chart-card .area.pending { opacity: 0; }
  .chart-card .livepulse { transform-box: fill-box; transform-origin: center; animation: live 1.8s ease-in-out infinite; }
  @keyframes live { 50% { transform: scale(1.6); opacity: .25; } }
  .ea-why { margin-top: 26px; padding-top: 22px; }

  /* ---------- stable 2.28 · early access ---------- */
  .ea2-live.ea2-illus { color: var(--faint); }
  .ea-why .ea-why-body { align-self: end; margin: 0; font-size: 18px; color: var(--sub); text-wrap: pretty; }
  /* ---------- end stable 2.28 early access ---------- */

  /* ---------- stable 2.31 · pricing page and homepage link ---------- */
  body:not(.on-pricing) #pricing-page { display: none; }
  /* homepage sections collapse rather than disappear, so their drawings keep their size and never redraw at zero */
  body.on-pricing main > section:not(.final) { height: 0; min-height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; visibility: hidden; }
  #pricing .pr-more { margin: 22px 0 0; }
  #pricing .tlink span { display: inline-block; transition: transform .2s ease; }
  #pricing .tlink:hover span { transform: translateX(3px); }
  .pz-page .pz-copy h1 { font-size: clamp(34px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -0.035em; }
  .pz-page { padding-top: clamp(48px, 8vh, 96px); }
  /* ---------- stable 2.30 · pricing (now the pricing page): your price starts from what the work costs you today ---------- */
  .pz-a { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
  .pz-copy h2 { font-size: clamp(30px, 3.2vw, 46px); }
  .pz-copy .lede { margin-top: 18px; font-size: 18px; max-width: 50ch; text-wrap: pretty; }
  .pz-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; max-width: 54ch; }
  .pz-points li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--sub); text-wrap: pretty; }
  .pz-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
  .pz-points b { color: var(--ink); font-weight: 500; }
  /* the baseline sheet is a static record: plain values, nothing that looks like a field to fill in */
  .pz-sheet { margin: 0; padding: 18px 22px 16px; box-shadow: var(--shadow-product); }
  .pz-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; }
  .pz-h .m { font-size: 12px; color: var(--faint); }
  .pz-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px 176px; gap: 12px; align-items: baseline; padding-block: 10px; border-top: 1px solid var(--line); font-size: 14px; }
  .pz-row i { font-style: normal; font: 400 12px/1.35 var(--mono); color: var(--sub); }
  .pz-row i:last-child { color: var(--indigo); }
  .pz-cols { border-top: 0; padding-block: 0 6px; }
  .pz-cols em { font-style: normal; font: 500 11px/1 var(--sans); color: var(--sub); }
  .pz-cols em:last-child { color: var(--indigo); }
  .pz-total { border-top: 1.5px solid var(--ink); }
  .pz-total span { font-weight: 500; }
  .pz-total i.c { grid-column: 2 / span 2; color: var(--ink); }
  .pz-foot { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--sub); }
  .pz-b { margin-top: clamp(56px, 8vh, 96px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--line-2); }
  .pz-bh { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; max-width: 24ch; }
  /* the path: three steps on one line, joined by a hairline */
  .pz-steps { position: relative; list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
  .pz-steps::before { content: ""; position: absolute; left: 13px; right: 13px; top: 13px; height: 1px; background: linear-gradient(90deg, var(--indigo), rgba(61,59,243,.25)); }
  .pz-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; }
  .pz-n { position: relative; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--mono); color: #FAFAFA; background: var(--indigo); box-shadow: 0 0 0 5px var(--bg); margin-bottom: 6px; }
  .pz-steps b { font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
  .pz-steps p { margin: 0; color: var(--sub); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
  .pz-end { margin: 28px 0 0; font-size: 15px; color: var(--sub); max-width: 80ch; text-wrap: pretty; }
  .pz-end b { color: var(--ink); font-weight: 500; }
  .pz-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
  .pz-strip .label { display: block; margin-bottom: 8px; }
  .pz-strip p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
  .pz-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
  .pz-strip li { display: flex; gap: 8px; align-items: baseline; }
  .pz-strip li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--indigo); flex: none; transform: translateY(-2px); }
  .pz-cta { margin-top: 28px; }
  @media (max-width: 1180px) { .pz-row { grid-template-columns: minmax(0, 1fr) 92px 158px; } .pz-row i { font-size: 11px; } }
  @media (max-width: 900px) {
    .pz-a { grid-template-columns: minmax(0, 1fr); }
    .pz-steps, .pz-strip { grid-template-columns: minmax(0, 1fr); }
    .pz-steps::before { left: 13px; right: auto; top: 13px; bottom: 13px; width: 1px; height: auto; background: linear-gradient(180deg, var(--indigo), rgba(61,59,243,.25)); }
    .pz-steps li { padding-left: 44px; }
    .pz-n { position: absolute; left: 0; top: 0; margin: 0; }
  }
  @media (max-width: 560px) { .pz-row { grid-template-columns: minmax(0, 1fr) 76px 92px; gap: 8px; font-size: 13px; } .pz-row i { font-size: 11px; } }
  /* ---------- end stable 2.30 pricing ---------- */
  /* ---------- end stable 2.31 pricing ---------- */

  /* ---------- stable 2.32 · pricing page: measure, unit, source; four steps; the page's own buttons and questions ---------- */
  .pz-page .pz-row { grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1.05fr); align-items: baseline; }
  .pz-page .pz-row em { font-style: normal; font: 400 12px/1.35 var(--mono); color: var(--sub); white-space: nowrap; }
  .pz-page .pz-row i { font: 400 13px/1.4 var(--sans); color: var(--ink); text-wrap: pretty; }
  .pz-page .pz-row i:last-child { color: var(--ink); }
  .pz-page .pz-cols em { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
  .pz-page .pz-cols em:last-child { color: var(--faint); }
  .pz-page .pz-total i { font-weight: 500; }
  .pz-page .pz-total i.c { grid-column: auto; }
  .pz-steps4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pz-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
  .pz-faq { margin-top: clamp(56px, 8vh, 88px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--line-2); }
  .pz-faq .side h3 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.1; }
  .qa details p .tlink { font-size: inherit; margin-left: 4px; }
  @media (max-width: 1180px) { .pz-page .pz-row { grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr); } }
  @media (max-width: 900px) { .pz-steps4 { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 560px) {
    .pz-page .pz-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 2px; }
    .pz-page .pz-row em { grid-column: 2; grid-row: 1; justify-self: end; }
    .pz-page .pz-row i { grid-column: 1 / -1; color: var(--sub); }
    .pz-page .pz-cols { display: none; }
  }
  /* ---------- end stable 2.32 pricing page ---------- */

  /* ---------- stable 2.33 · the business case on your own numbers ---------- */
  .pz-page .pz-copy .lede { max-width: 46ch; }
  .pz-page .pz-a > .pz-copy .pz-cta { margin-top: 26px; }
  .pz-page .pz-total2 span, .pz-page .pz-total2 i { font-weight: 500; }
  .pz-after { margin: 28px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); max-width: 76ch; text-wrap: pretty; }
  .pz-b > .pz-cta { margin-top: 28px; }
  .pz-cta a.btn { text-decoration: none; }
  /* ---------- end stable 2.33 pricing ---------- */

  /* ---------- stable 2.34 · contrast, the step line, the homepage block's padding ---------- */
  /* small grey labels in the pricing areas meet WCAG AA (4.5:1) on the page and on white cards */
  #pricing, #pricing-page { --faint: #6B6B73; }
  /* the homepage pricing block: less vertical padding, the text still has room */
  #pricing.sec { padding-block: clamp(40px, 5.6vh, 68px); }
  /* the step line runs from each step to the next and stops at the last one */
  .pz-page .pz-steps { --pzgap: clamp(24px, 3vw, 44px); gap: var(--pzgap); }
  .pz-page .pz-steps::before { content: none; }
  .pz-page .pz-steps li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 27px; width: calc(100% + var(--pzgap) - 27px); height: 1px; background: rgba(61,59,243,.45); }
  .pz-page .pz-n { z-index: 1; }
  @media (max-width: 900px) {
    .pz-page .pz-steps li:not(:last-child)::after { top: 27px; left: 13px; width: 1px; height: auto; bottom: calc(-1 * var(--pzgap)); }
  }
  /* ---------- end stable 2.34 ---------- */

  /* ---------- stable 2.35 · plain language: the second lede line ---------- */
  .pz-page .pz-copy .lede.pz-lede2 { margin-top: 14px; }
  /* ---------- end stable 2.35 ---------- */

  /* ---------- stable 2.36 · pricing page: agent jobs, one idea ---------- */
  .pj .pz-a { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .pj.sec { padding-top: clamp(56px, 10vh, 112px); padding-bottom: clamp(56px, 9vh, 104px); }
  /* on /pricing the hidden homepage pricing block keeps no padding (its 2.34 padding rule outranked the collapse and left an 87 px band) */
  body.on-pricing main > #pricing.sec { padding: 0; }
  /* the card is a static plate: nothing on it looks clickable */
  .pj-card { margin: 0; padding: 16px 22px 16px; border-radius: 18px; box-shadow: var(--shadow-product); cursor: default; }
  .pj-h { padding-bottom: 12px; }
  .pj-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "type st" "sub mk"; column-gap: 16px; row-gap: 6px; align-items: center; padding: 13px 0 12px; border-top: 1px solid var(--line); }
  .pj-type { grid-area: type; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
  .pj-sub { grid-area: sub; min-width: 0; font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-st { grid-area: st; justify-self: end; }
  .pj-st.pj-wait { background: var(--indigo-soft); color: var(--indigo); box-shadow: inset 0 0 0 1px rgba(61,59,243,.2); }
  .pj-run .pj-st { min-width: 104px; justify-content: center; }
  .pj-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); animation: pulse 1.4s ease-in-out infinite; }
  .pj-run.on .pj-dot { display: none; }
  /* the marker says the job is finished; it does not say what is billed */
  .pj-mk { grid-area: mk; justify-self: end; display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--indigo); transition: opacity .35s ease; }
  .pj-mk i { width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); }
  .pj-row:not(.on) .pj-mk { opacity: 0; }
  .pj-row.ping .pj-mk i { animation: cpPing .9s ease-out 1; }
  /* the running job's progress rides on its own top rule, so nothing moves */
  .pj-prog { position: absolute; left: 0; right: 0; top: -1px; height: 1.5px; background: var(--indigo); transform-origin: left center; transform: scaleX(.35); }
  .pj-run.on .pj-prog { opacity: 0; }
  .pj-foot { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 14px; font-weight: 500; }
  .pj-foot b { display: inline-block; min-width: 1ch; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--indigo); font-variant-numeric: tabular-nums; }
  .pj-team { display: flex; align-items: center; gap: 14px; margin: 24px 0 0 6px; }
  .pj-avs { display: flex; flex: none; }
  .pj-avs i { width: 30px; height: 30px; margin-left: -4px; border-radius: 50%; display: grid; place-items: center; font: 500 10px/1 var(--mono); font-style: normal; color: var(--ink); background: var(--card); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-2); }
  .pj-avs i:first-child { margin-left: 0; }
  .pj-avs i:last-child { background: var(--indigo-soft); color: var(--indigo); }
  .pj-names { display: grid; gap: 3px; font-size: 13px; line-height: 1.35; }
  .pj-names b { font-weight: 500; }
  .pj-names span { color: var(--sub); font-size: 13px; }
  @media (max-width: 900px) { .pj .pz-a { grid-template-columns: minmax(0, 1fr); } .pj-stage { max-width: 560px; } }
  /* narrow screens: the state moves to its own line so the subject keeps its full name */
  @media (max-width: 560px) {
    .pj-card { padding-inline: 18px; }
    .pj-row { grid-template-areas: "type mk" "sub sub" "st st"; row-gap: 5px; }
    .pj-st { justify-self: start; margin-top: 3px; }
    .pj-run .pj-st { min-width: 0; }
  }
  /* ---------- end stable 2.36 ---------- */

  /* ---------- stable 2.38 · pricing page: the button carries the message; the team strip says it once ---------- */
  .pj .pz-a > .pz-copy .pj-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
  .pj-cta-note { font-size: 15px; line-height: 1.4; color: var(--sub); }
  .pj-avs i { width: 32px; height: 32px; margin-left: -3px; font-size: 10px; letter-spacing: .02em; }
  .pj-avs i:first-child { margin-left: 0; }
  .pj-names.pj-one { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
  .pj-names.pj-one > span { color: inherit; font-size: inherit; white-space: nowrap; }
  /* ---------- end stable 2.38 ---------- */

  /* ---------- stable 2.39 · pricing CTA: the button alone ---------- */
  .pj-cta .btn span { display: inline-block; transition: transform .2s ease; }
  .pj-cta .btn:hover span, .pj-cta .btn:focus-visible span { transform: translateX(3px); }
  /* ---------- end stable 2.39 ---------- */

  /* ---------- stable 2.40 · pricing page: one sample month, counted two ways ---------- */
  .qa details p .tlink.pj-inl { margin-left: 0; }
  .pj-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pj-mo-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding-bottom: 14px; }
  .pj-mo.cm .pj-sw button[data-pj-mode="cm"] { color: var(--indigo); }
  .pj-sw button:focus-visible { outline: 1.5px solid var(--indigo); outline-offset: -3px; border-radius: 999px; }
  /* the team: the people are the same in both views; the per-seat view rings each one as a seat */
  .pj-team2 { display: grid; gap: 9px; padding: 14px 0 14px; border-top: 1px solid var(--line); }
  .pj-mo .pj-avs i { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line-2); transition: box-shadow .35s ease, color .35s ease, opacity .35s ease, transform .35s cubic-bezier(.3,.7,.2,1); }
  .pj-mo .pj-avs i svg { width: 14px; height: 14px; }
  .pj-mo .pj-avs i:last-child { background: var(--card); }
  .pj-mo .pj-avs i.pj-more { background: var(--indigo-soft); color: var(--indigo); }
  .pj-mo .pj-avs i.pj-new { color: var(--sub); }
  .pj-mo .pj-avs i.pj-new:not(.joined) { opacity: 0; transform: scale(.6); }
  .pj-mo.seat .pj-avs i { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--indigo); color: var(--indigo); }
  .pj-ev { min-height: 1.4em; font-size: 13px; line-height: 1.4; color: var(--sub); transition: opacity .18s ease; }
  /* the jobs: the same four in both views; the per-seat view does not count them */
  .pj-mo .pj-dot { display: none; }
  .pj-mo .pj-row.pj-running .pj-dot { display: inline-block; }
  .pj-mo .pj-prog { opacity: 0; transform: scaleX(0); transition: opacity .3s ease; }
  .pj-mo .pj-row.pj-running .pj-prog { opacity: 1; }
  .pj-mo .pj-mk, .pj-mo .pj-mk i { transition: opacity .35s ease, color .35s ease, background .35s ease; }
  .pj-mo.seat .pj-mk { color: var(--faint); }
  .pj-mo.seat .pj-mk i { background: var(--faint); }
  .pj-mo.seat .pj-row.ping .pj-mk i { animation: none; }
  /* the count: one line per view, stacked in one place, so switching never moves anything */
  .pj-foot2 { display: grid; padding-top: 12px; border-top: 1px solid var(--line-2); }
  .pj-f { grid-area: 1 / 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; font-weight: 500; transition: opacity .3s ease, visibility .3s; }
  .pj-f b { display: inline-block; min-width: 2ch; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
  .pj-f-cm b { color: var(--indigo); }
  .pj-f em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 500; color: var(--sub); transition: color .3s ease; }
  .pj-f-cm em.nudge { color: var(--indigo); }
  .pj-mo.cm .pj-f-seat, .pj-mo.seat .pj-f-cm { opacity: 0; visibility: hidden; }
  @media (max-width: 560px) {
    .pj-mo-h .pj-sw { width: 100%; }
    .pj-sw button { flex: 1; justify-content: center; }
    .pj-ev { min-height: 2.8em; }
    .pj-f em { margin-left: 0; flex-basis: 100%; }
  }
  /* ---------- end stable 2.40 ---------- */

  /* ---------- stable 2.41 · pricing page: every dot is a job ---------- */
  .pd-in { position: relative; }
  .pd-field { aspect-ratio: 2 / 1; margin-top: 2px; }
  .pd-dots { display: block; width: 100%; height: 100%; overflow: visible; }
  .pd-dots circle[data-c] { transform-box: fill-box; transform-origin: center; transition: fill .4s ease, transform .4s cubic-bezier(.3,.7,.2,1); }
  .pd-dots .s { fill: rgba(10,10,10,.07); transform: scale(.5); }
  .pd-dots .q { fill: #D0D0D8; transform: scale(.8); }
  .pd-dots .f { fill: var(--indigo); }
  .pj-mo.seat .pd-dots .f { fill: #A3A3AC; }
  /* the reveal: when the view flips to cmpliance, the finished jobs light up left to right */
  .pd.wave .pd-dots circle[data-c] { transition-delay: calc(var(--c) * 26ms); }
  .pd-ring { fill: none; stroke: var(--indigo); stroke-width: 1.5; opacity: 0; transition: opacity .3s ease, stroke .3s ease; }
  .pd.zoomed .pd-ring { opacity: 1; }
  .pj-mo.seat .pd-ring { stroke: #8C8C95; }
  /* one job, opened: the card sits over the field and a dashed leader ties it to its dot */
  .pd-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
  .pd-lead path { fill: none; stroke: var(--indigo); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity .3s ease; }
  .pd.zoomed .pd-lead path { opacity: .8; }
  .pj-mo.seat .pd-lead path { stroke: #8C8C95; }
  .pd-zoom { position: absolute; z-index: 2; left: 33%; top: 7%; width: 64%; display: grid; justify-items: start; gap: 5px; padding: 12px 14px 13px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-product); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: opacity .35s ease, transform .5s cubic-bezier(.3,.7,.2,1); }
  .pd-zoom.hide { opacity: 0; transform: scale(.06); }
  .pd-zoom > *, .pd-zl > * { grid-area: auto; }
  .pd-zoom > * { transition: opacity .18s ease; }
  .pd-zoom.fade > * { opacity: 0; }
  .pd-zl { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .pd-zoom .pj-type { font-size: 13px; white-space: nowrap; }
  .pd-zoom .pj-sub { max-width: 100%; font-size: 13px; }
  .pd-zoom .pj-st { justify-self: start; margin-top: 3px; }
  .pd-cursors { z-index: 6; }
  .pd-cursors .cur.flip .tag { left: auto; right: 4px; border-radius: 10px 3px 10px 10px; }
  /* the team: the same people all month; an event line says who joins */
  .pd-team { display: flex; align-items: center; gap: 14px; min-height: 36px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
  .pd-evt { flex: 1; min-width: 0; font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .25s ease; }
  .pd-evt.on { opacity: 1; }
  .pd .pj-foot2 { margin-top: 14px; }
  .pd .pj-f b { min-width: 3ch; }
  @media (max-width: 560px) {
    .pd-zoom { position: relative; left: auto; top: auto; width: auto; margin-top: 12px; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(30,28,120,.25); }
    .pd-lead { display: none; }
    .pd-team { flex-wrap: wrap; row-gap: 8px; }
    .pd-evt { flex-basis: 100%; min-height: 1.4em; }
  }
  /* ---------- end stable 2.41 ---------- */

  /* ---------- stable 2.42 · pricing page: one month, side by side ---------- */
  .sx-h { padding-bottom: 14px; }
  .sx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .sx-p { display: grid; align-content: start; gap: 8px; padding: 14px 14px 12px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
  .sx-cm { background: #F7F7FE; box-shadow: inset 0 0 0 1px rgba(61,59,243,.16); }
  /* panel titles in sentence case: cmpliance is always lowercase, so no uppercase label style here */
  .sx-t { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); letter-spacing: -0.005em; color: var(--ink); }
  .sx-t i { width: 7px; height: 7px; border-radius: 50%; background: #A3A3AC; }
  .sx-cm .sx-t { color: var(--indigo); }
  .sx-cm .sx-t i { background: var(--indigo); }
  .sx-c { display: block; width: 100%; height: auto; overflow: visible; margin: 8px 0 2px; }
  .sx-dots circle { transform-box: fill-box; transform-origin: center; transition: opacity .5s ease, fill .6s ease, transform .5s cubic-bezier(.3,.7,.2,1); }
  .sx-dots .h { opacity: 0; transform: translateY(3px) scale(.5); }
  .sx-dots .w { fill: #C6C6CF; }
  .sx-dots .f { fill: var(--indigo); }
  .sx-base { stroke: var(--line-2); stroke-width: 1; }
  .sx-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
  .sx-ph { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .5s ease; }
  .sx-cm .sx-ph { stroke: var(--indigo); }
  .sx-ph.on { opacity: .75; }
  .sx-tick { fill: var(--card); stroke: var(--sub); stroke-width: 1.2; opacity: 0; transition: opacity .5s ease; }
  .sx-cm .sx-tick { stroke: rgba(61,59,243,.55); }
  .sx-tick.on { opacity: 1; }
  .sx-f { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; font-weight: 500; }
  .sx-f b { display: inline-block; min-width: 3ch; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
  .sx-cm .sx-f b { color: var(--indigo); }
  .sx-e { min-height: 2.8em; font-style: normal; font-size: 13px; line-height: 1.4; color: var(--sub); transition: color .4s ease; }
  .sx-e.nudge { color: var(--indigo); }
  .sx-e > span { white-space: nowrap; }
  .sx .pd-team { margin-top: 14px; }
  @media (max-width: 560px) { .sx-grid { grid-template-columns: minmax(0, 1fr); } .sx-e { min-height: 0; } }
  /* ---------- end stable 2.42 ---------- */

  /* ---------- stable 2.43 · the side-by-side month, made exact: work is done on both sides ---------- */
  .sx-dots .d { fill: #9A9AA4; }
  /* ---------- end stable 2.43 ---------- */

  /* ---------- stable 2.45 · labels in the chart, the homepage graph's way ---------- */
  .sx-cw { position: relative; }
  /* the seat line's own label, just above where the line starts (the line starts at y = 30 in a viewBox running -4 to 126) */
  .sx-lbl { position: absolute; left: 0; top: 26.15%; transform: translateY(calc(-100% - 4px)); font-size: 13px; line-height: 1.2; font-weight: 500; color: var(--ink); white-space: nowrap; pointer-events: none; transition: opacity .5s ease; }
  .sx-p .sx-key { display: flex; align-items: center; gap: 7px; margin-top: -2px; font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--sub); }
  .sx-key i { width: 5px; height: 5px; border-radius: 50%; background: #9A9AA4; flex: none; }
  .sx-cm .sx-key i { background: var(--indigo); }
  /* ---------- end stable 2.45 ---------- */

  /* ---------- stable 2.46 · the team inside both panels: a paid seat each on the left, free on the right ---------- */
  .sx-team { display: flex; align-items: center; margin-top: 2px; }
  /* one row of separate circles, so every person can be counted */
  .sx-p .pj-avs { gap: 4px; }
  .sx-p .pj-avs i, .sx-p .pj-avs i:first-child { width: 24px; height: 24px; margin-left: 0; font-size: 8.5px; letter-spacing: 0; }
  .sx-p .pj-avs i svg { width: 12px; height: 12px; }
  /* on the seat-based side every person is a paid seat: an ink ring each */
  .sx-seat .pj-avs i { box-shadow: inset 0 0 0 1.3px var(--ink); color: var(--ink); }
  .sx-seat .pj-avs i.pj-more { background: #EDEDF1; color: var(--ink); }
  .sx-cm .pj-avs i { box-shadow: inset 0 0 0 1px var(--line-2); }
  .sx-cm .sx-e { min-height: 0; margin-top: -2px; }
  /* ---------- end stable 2.46 ---------- */

  /* ---------- stable 2.47 · people, not initials ---------- */
  .sx-cm .pj-avs i { color: var(--sub); }
  .sx-cm .pj-avs i.pj-more { color: var(--indigo); }
  /* ---------- end stable 2.47 ---------- */

  /* ---------- stable 2.48 · pricing on the homepage ---------- */
  /* the two who join are paid seats like everyone else */
  .sx-seat .pj-avs i.pj-new { color: var(--ink); box-shadow: inset 0 0 0 1.3px var(--ink); }
  #pricing .pz-copy h2 { text-wrap: balance; }
  /* the footer's Pricing link lands below the sticky 68 px nav */
  #pricing { scroll-margin-top: 68px; }
  /* ---------- end stable 2.48 ---------- */

  /* ---------- stable 2.49 · larger people on wide screens ---------- */
  @media (min-width: 1181px) {
    .sx-p .pj-avs { gap: 5px; }
    .sx-p .pj-avs i, .sx-p .pj-avs i:first-child { width: 28px; height: 28px; font-size: 9.5px; }
    .sx-p .pj-avs i svg { width: 14px; height: 14px; }
  }
  /* ---------- end stable 2.49 ---------- */

  /* ---------- stable 2.50 · why agentic: routed or done ---------- */
  .ra-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
  .ra-copy h2 { font-size: clamp(32px, 3.3vw, 48px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
  .ra-copy .lede { margin-top: 20px; max-width: 44ch; text-wrap: pretty; }
  .ra-card { position: relative; margin: 0; padding: 16px 22px 14px; border-radius: 18px; box-shadow: var(--shadow-product); cursor: default; }
  .ra-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 10px; }
  .ra-case { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
  .ra-rows { list-style: none; margin: 0; padding: 0; }
  .ra-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "job agent" "state state"; column-gap: 12px; row-gap: 7px; align-items: center; padding: 11px 0 12px; border-top: 1px solid var(--line); }
  .ra-job { grid-area: job; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
  .ra-agent { grid-area: agent; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); opacity: 0; transition: opacity .45s ease; }
  .ra-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  /* before the agent: a task routed to a person */
  .ra-task { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 13px; line-height: 1.2; color: #3A3A3F; background: #F0F0F3; transition: color .45s ease, background .45s ease, box-shadow .45s ease; }
  .ra-task svg { width: 12px; height: 12px; flex: none; }
  .ra-arrow { color: #6B6B73; font-size: 13px; opacity: 0; transition: opacity .45s ease; }
  .ra-done { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--ink); opacity: 0; transform: translateX(-4px); transition: opacity .5s ease, transform .5s ease; }
  .ra-done i { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--indigo); display: grid; place-items: center; }
  .ra-done i svg { width: 16px; height: 16px; }
  /* after the agent: the task is crossed out and the work is done, with its evidence */
  .ra-row.on .ra-agent, .ra-row.on .ra-arrow { opacity: 1; }
  .ra-row.on .ra-task { color: #6B6B73; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: line-through; text-decoration-color: rgba(10,10,10,.45); }
  .ra-row.on .ra-done { opacity: 1; transform: none; }
  /* the officer's row: never crossed out */
  .ra-decide { grid-template-areas: "job state"; row-gap: 0; padding-top: 12px; }
  .ra-decide .ra-state { justify-self: end; gap: 10px; }
  .ra-call { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1.3px var(--ink); transition: box-shadow .4s ease; }
  .ra-decide.on .ra-call { box-shadow: inset 0 0 0 1.3px var(--ink), 0 0 0 4px rgba(10,10,10,.07); }
  .ra-who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); }
  .ra-who svg { width: 13px; height: 13px; }
  .ra-foot { display: grid; gap: 3px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line-2); }
  .ra-foot p { margin: 0; font-size: 13px; color: var(--sub); }
  .ra-foot b { font-weight: 500; color: var(--ink); }
  .ra-foot .ra-cm { color: var(--indigo); }
  .ra-foot .ra-cm b { color: var(--indigo); }
  .ra-cursors { z-index: 6; }
  .ra-cursors .cur.flip .tag { left: auto; right: 4px; border-radius: 10px 3px 10px 10px; }
  @media (max-width: 900px) { .ra-grid { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 560px) { .ra-card { padding-inline: 16px; } .ra-decide { grid-template-areas: "job" "state"; row-gap: 8px; } .ra-decide .ra-state { justify-self: start; } }
  /* ---------- end stable 2.50 ---------- */

  /* ---------- stable 2.51 · why agentic: the evidence as product objects ---------- */
  .ra-done { flex-wrap: wrap; gap: 5px 7px; }
  .ra-out { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  .ra-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; font: 500 11px/1.45 var(--mono); letter-spacing: .02em; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
  .ra-doc { font-family: var(--sans); font-size: 12px; letter-spacing: 0; }
  .ra-doc svg { width: 11px; height: 13px; color: var(--sub); }
  .ra-chain { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
  .ra-link { color: var(--indigo); font-size: 12px; line-height: 1; }
  .ra-risk { font-size: 12px; padding: 3px 9px; }
  .ra-note { color: var(--sub); font-size: 13px; }
  /* ---------- end stable 2.51 ---------- */

  /* ---------- stable 2.54 · final call: the call to action with the brand mark, in the original light colours ---------- */
  .fc-in { position: relative; }
  .fc-btn span { display: inline-block; transition: transform .2s ease; }
  .fc-btn:hover span, .fc-btn:focus-visible span { transform: translateX(3px); }
  /* the brand mark: three nested arcs in brand indigo, an emblem above the headline */
  .fc-mark { position: relative; display: block; width: clamp(84px, 8.5vw, 112px); height: auto; margin: 0 auto clamp(22px, 3vh, 30px); pointer-events: none; overflow: visible; filter: drop-shadow(0 6px 14px rgba(61,59,243,.22)); }
  .fc-a { stroke: var(--indigo); stroke-width: 2.6px; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.45,.05,.2,1); }
  .fc-a1 { opacity: .5; } .fc-a2 { opacity: .75; } .fc-a3 { opacity: 1; }
  .final.fc.pending .fc-a { stroke-dashoffset: 1; }
  .fc-a2 { transition-delay: .22s; } .fc-a3 { transition-delay: .44s; }
  /* ---------- end stable 2.54 ---------- */

  /* ---------- stable 2.55 · final call: a direct invitation ---------- */
  .final.fc .fc-line { max-width: 46ch; margin-inline: auto; text-wrap: balance; }
  /* ---------- end stable 2.55 ---------- */

  /* ---------- stable 2.57 · the shift: one band, three changes ---------- */
  .sh-band .sh-body h3 { font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 30ch; text-wrap: balance; }
  .sh-band .sh-body { gap: 8px; }
  .sh-ob b { white-space: nowrap; }
  @media (min-width: 901px) {
    /* the three drawings sit in one white band, a product object across the section */
    .sh-band::before { content: ""; grid-row: 1; grid-column: 1 / -1; margin-inline: -8px; border-radius: 18px; background: #FAFAFA; box-shadow: var(--shadow-product); pointer-events: none; }
    .sh-band .sh-art { z-index: 1; height: clamp(150px, 19vh, 176px); margin-top: 0; }
    .sh-band .sh-art.c2::before, .sh-band .sh-art.c3::before { content: ""; position: absolute; left: -14px; top: 18px; bottom: 18px; width: 1px; background: var(--line); }
    .sh-band .sh-body { padding: 18px 0 16px; }
  }
  @media (min-width: 1281px) { .sh-band::before { margin-inline: -18px; } }
  /* ---------- end stable 2.57 ---------- */

  /* ---------- stable 2.58 · the shift: the band floats ---------- */
  /* the older shift layers sit later in the file, so these rules carry the section id to win */
  @media (min-width: 901px) {
    #shift .sh-band::before { box-shadow: 0 0 0 1px rgba(10,10,10,.07), 0 2px 4px rgba(10,10,10,.03), 0 18px 36px -20px rgba(30,28,120,.16), 0 30px 50px -36px rgba(61,59,243,.14); }
    #shift .sh-band .sh-body { padding-top: 28px; padding-bottom: 26px; }
  }
  /* ---------- end stable 2.58 ---------- */

  /* ---------- stable 2.59 · the FAQ, considered ---------- */
  #faq.fq { padding-top: clamp(40px, 6vh, 72px); interpolate-size: allow-keywords; }
  #faq.fq .side p { font-size: 15px; }
  #faq.fq .side .fq-link { margin-top: 14px; }
  #faq.fq .fq-link .tlink span { display: inline-block; transition: transform .2s ease; }
  #faq.fq .fq-link .tlink:hover span { transform: translateX(3px); }
  /* questions numbered 01 to 06 in mono; the number sits in its own column, the answer lines up under the question text */
  #faq.fq .qa { counter-reset: fq; }
  #faq.fq .qa details { counter-increment: fq; }
  #faq.fq .qa summary { justify-content: flex-start; gap: 0; padding: 19px 0; }
  #faq.fq .qa summary::before { content: counter(fq, decimal-leading-zero); flex: none; width: 44px; font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--faint); transition: color .25s ease; }
  #faq.fq .qa summary::after { margin-left: auto; padding-left: 24px; box-sizing: content-box; background-position: right center; transform-origin: calc(100% - 9px) 50%; transition: transform .25s ease; }
  #faq.fq .qa summary:hover::before, #faq.fq .qa details[open] summary::before { color: var(--indigo); }
  #faq.fq .qa summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; border-radius: 4px; }
  #faq.fq .qa details p { margin: -4px 0 22px 44px; max-width: 62ch; line-height: 1.6; }
  /* answers open smoothly where the browser supports it; elsewhere they simply open */
  #faq.fq .qa details::details-content { height: 0; overflow: clip; transition: height .35s cubic-bezier(.3,.7,.2,1), content-visibility .35s allow-discrete; }
  #faq.fq .qa details[open]::details-content { height: auto; }
  @media (max-width: 560px) { #faq.fq .qa summary::before { width: 34px; } #faq.fq .qa details p { margin-left: 34px; } }
  /* ---------- end stable 2.59 ---------- */

  /* ---------- stable 2.60 · FAQ focus ring, as on the rest of the site ---------- */
  #faq.fq .qa summary:focus-visible { outline: 1.5px solid rgba(61,59,243,.55); outline-offset: 2px; border-radius: 10px; }
  #faq.fq .qa summary:focus-visible::before { color: var(--indigo); }
  /* ---------- end stable 2.60 ---------- */

  /* ---------- stable 2.62 · one spacing system, two heading sizes ---------- */
  /* the same padding above and below every section's content; !important because older layers and two inline styles set their own */
  :root { --sec-pad: clamp(52px, 7.2vh, 92px); }
  main > section.sec, main > section.final { padding-block: var(--sec-pad) !important; }
  footer { padding-top: var(--sec-pad); }
  /* headings: the standard size, and a slightly smaller one for the long headings */
  main #manifesto h2, main #why-agentic h2, main #pricing h2, main #chain h2, main #shift h2, main #architecture h2, main #vdr h2,
  main #example h2, main #early-access h2, main #insights h2, main #faq h2 { font-size: clamp(32px, 3.5vw, 52px); }
  main #how h2, main #workforce h2, main #tour h2, main #calibration h2 { font-size: clamp(30px, 3.05vw, 46px); }
  /* ---------- end stable 2.62 ---------- */

  /* ---------- stable 2.64 · contrast, the phone chain, tap targets ---------- */
  /* small grey labels meet 4.5:1: the site grey on light, and the dark chapter's own grey */
  html:root { --faint: #6B6B73; }
  main .dark, main .core { --faint: #9A9AA4; }
  main .dark .vd-num { color: #B4B4BD; }
  main .dark .hint, main .vd-steps div .m { color: #9A9AA4; }
  /* the white verification card inside the dark data room keeps the light-page grey */
  main .dark .pc.verify .label { color: #6B6B73; }
  main .vd-steps div > span:not(.m) { color: #A6A6AF; }
  .foot-base span a:first-child { margin-left: 0; }
  @media (max-width: 700px) {
    /* the chain's drawing grows with its nodes, so nothing spills onto the note below */
    #chain .ch-fig { height: auto !important; }
    #chain .ch-card-h .chw-right { flex-wrap: wrap; row-gap: 6px; }
  }
  @media (max-width: 560px) {
    html:root { --sec-pad: 44px; }
    /* footer links: at least a 24 px tap target */
    footer li a, .foot-base span a, footer .brand { display: inline-block; padding-block: 5px; }
    footer li { margin-block: 0; }
  }
  /* ---------- end stable 2.64 ---------- */

  /* ---------- 13. pricing toggle ---------- */
  .bill { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); background: #FAFAFA; margin-top: 22px; }
  .bill button { font: 500 13px/1 var(--sans); color: var(--sub); background: none; border: 0; padding: 8px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
  .bill button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .bill .save { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); }
  .tier .billed { font-size: 12px; color: var(--sub); margin-top: -12px; margin-bottom: 14px; visibility: hidden; }
  .pricing-annual .tier .billed { visibility: visible; }
  .price-head { margin: 96px auto 36px; }
  .scale .chart-card path.draw { transition: stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1); }

  /* ---------- final fit on shorter laptop screens ---------- */
  @media (max-height: 820px) and (min-width: 901px) {
    .vd-fig { min-height: 160px; }
    .vd-steps div span { display: none; }
    .vd-panel { padding: 14px 16px; }
    .vd-panel .outcome { margin-top: 8px !important; }
    .xk, .xc { padding-block: 6px; }
    .ea-why { margin-top: 18px; padding-top: 16px; }
    .art-thumb { aspect-ratio: 16 / 7.4; }
  }
  @media (min-width: 901px) and (max-width: 1180px) {
    #how .sec-head { margin-bottom: 18px; }
    .vd-feat div { font-size: 12px; }
    .vd-steps div span { display: none; }
    .art-thumb { aspect-ratio: 16 / 7.4; }
  }
  .qa summary { padding: 15px 0; font-size: 18px; }

  /* ---------- notes ---------- */
  .notes ol ol { margin-top: 6px; }

  /* keep two-column layouts down to 900px, so every section still fits one laptop screen */
  @media (min-width: 901px) and (max-width: 1180px) {
    .sec-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
    .sec-head .lede, .sec-aside { justify-self: end; }
    .ea, .ea-why, .scale, .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
    .core-split { gap: 32px; }
    .vd-head, .vd-grid, .vd-foot { gap: 18px; }
    .flow .kv { grid-template-columns: 1fr; gap: 1px; } .flow .kv b { text-align: left; }
    .cal5-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.95fr); gap: 18px; }
    .cal5-copy h2 { font-size: 27px; } .cal5-copy .lede { font-size: 13px; }
    .cal-core .zone span { display: none; }
    .cal-entry { padding: 14px 14px; font-size: 12px; } .cal-entry .kv { grid-template-columns: 74px minmax(0, 1fr); }
    .tr-grid { grid-template-columns: 244px minmax(0, 1fr); gap: 22px; }
    .tr-body { grid-template-columns: 196px minmax(0, 1fr); }
    .tr-win { height: 520px; }
  }
  @media (min-width: 1000px) and (max-width: 1180px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .tier { padding: 24px 16px 18px; } }
  @media (max-width: 1180px) { .cal-core .zone { width: 30%; } }
  @media (max-width: 900px) {
    .core-split { grid-template-columns: 1fr; gap: 28px; }
    .cal5-grid { grid-template-columns: 1fr; }
    .vd-head, .vd-grid, .vd-foot { grid-template-columns: 1fr; gap: 16px; }
  }
  @media (min-width: 701px) and (max-height: 820px) {
    .hero-grid { padding-top: 34px; } .hero-copy { padding-bottom: 48px; } .run { margin-top: 24px; }
    .ch-fig { height: 248px; }
  }
  @media (min-width: 1181px) and (max-height: 880px) {
    .core .cfig { height: 500px; }
  }
  @media (max-width: 900px) {
    .tr-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
    .tr-grid { grid-template-columns: 1fr; gap: 14px; }
    .tr-rail { display: grid; margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tr-rail button { grid-template-columns: 1fr; padding: 8px 10px; }
    .tr-rail .n { grid-row: auto; }
    .tr-rail .d { display: none; }
    .tr-rail button .bar { grid-column: 1; }
  }
  @media (max-width: 900px) {
    .mf-grid { grid-template-columns: 1fr; }
    .mf-right { grid-column: 1; margin-top: 36px; }
    .mf-wires { display: none; }
    .sh-panel { grid-template-columns: 1fr; grid-template-areas: "a1" "b1" "r1" "a2" "b2" "r2" "a3" "b3" "r3"; }
    .sh-panel .c2, .sh-panel .c3 { box-shadow: none; } .sh-art.c2, .sh-art.c3 { border-top: 1px solid var(--line); }
    .sh-legend { display: none; } .sh-res .label { display: block; } .sh-res { border-top: 1px solid var(--line); padding: 16px 22px; }
    .ch-fig { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 14px; }
    .ch-node { position: relative; inset: auto !important; transform: none !important; width: auto; }
    .ch-node[data-n="zc"] { grid-column: 1 / -1; justify-self: center; width: min(100%, 300px); }
    .ch-node[data-n="dv"] { grid-column: 2; }
    .ch-why { grid-template-columns: 1fr; gap: 4px; }
  }
  @media (max-width: 700px) {
    .core .pack { min-width: 0; padding: 11px 18px 11px 11px; gap: 12px; }
    .core .cfig { height: 372px; }
    .core .zone span { display: none; }
    .cal5-grid { grid-template-columns: 1fr; }
    .cal-core .cfig { height: 380px; }
    .tr-body { grid-template-columns: 1fr; }
    .tr-list { display: none; }
    .tr-win { height: 470px; }
    .tr-rec { grid-template-columns: 1fr; gap: 8px; }
    .tr-factors { grid-template-columns: 1fr; } .tr-factors div:nth-child(n+4) { display: none; }
    .tr-call .btns span { padding: 6px 8px; }
    .vd-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    .vd-steps div span { display: none; }
    .vd-steps div { font-size: 11px; }
    .vd-feat { grid-template-columns: 1fr 1fr; }
    .ch-fig { gap: 34px 10px; margin: 14px 14px 6px; }
    .ch-node { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 9px 10px; align-items: start; }
    .ch-node em { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
    .ch-node small { font-size: 11px; } .ch-node b { font-size: 13px; line-height: 1.25; } .ch-node span { font-size: 11px; }
    .ch-lbl { font-size: 11px; padding: 1px 4px; }
    .ch-why { margin: 0 14px 14px; }
  }

  /* ---------- stable 2 · workforce: three lifecycles, one workforce, one clock ---------- */
  .wf-console { --wf-cols: minmax(0, 1fr) minmax(0, 1.32fr); --wf-run: 168px minmax(0, 1fr) 86px; --wf-gap: 36px; --wf-pad: 26px; position: relative; background: #FAFAFA; border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 30px 70px -44px rgba(30,28,120,.4); overflow: hidden; }
  .wf-axis { display: grid; grid-template-columns: var(--wf-cols); gap: var(--wf-gap); padding: 0 var(--wf-pad); height: 30px; align-items: center; background: #FBFBFC; border-bottom: 1px solid var(--line); }
  .wf-scale { display: grid; grid-template-columns: var(--wf-run); gap: 12px; align-items: center; height: 100%; }
  .wf-ticks { position: relative; height: 100%; }
  .wf-ticks > span { position: absolute; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 11px; color: var(--faint); }
  .wf-ticks > span:first-child { transform: translate(0, -50%); }
  .wf-ticks > span::before { content: ""; position: absolute; left: 50%; top: 19px; width: 1px; height: 5px; background: var(--line-2); }
  .wf-ticks > span:first-child::before { left: 0; }
  .wf-now { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); font: 500 11px/1 var(--mono); color: #FAFAFA; background: var(--indigo); padding: 4px 6px; border-radius: 6px; opacity: 0; transition: opacity .3s ease; z-index: 2; }
  .wf-lane { display: grid; grid-template-columns: var(--wf-cols); gap: var(--wf-gap); padding: 16px var(--wf-pad); align-items: start; }
  .wf-lane + .wf-lane { border-top: 1px solid var(--line); }
  .wf-copy { display: flex; flex-direction: column; gap: 6px; }
  .wf-copy h3 { font-size: 18px; line-height: 1.25; }
  .wf-copy p { margin: 2px 0 0; color: var(--sub); font-size: 13px; line-height: 1.5; }
  .wf-run { display: grid; gap: 2px; }
  .wf-runhead, .wf-step, .wf-out { display: grid; grid-template-columns: var(--wf-run); gap: 12px; align-items: center; }
  .wf-runhead { margin-bottom: 4px; }
  .wf-runhead b { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); }
  .wf-runhead b i { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
  .wf-lane.live .wf-runhead b i { animation: wfpulse 1s ease-in-out infinite; }
  @keyframes wfpulse { 50% { box-shadow: 0 0 0 4px rgba(61,59,243,.18); } }
  .wf-timer { grid-column: 3; justify-self: end; font-family: var(--mono); font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; }
  .wf-k { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wf-step { height: 22px; }
  .wf-track { position: relative; height: 100%; }
  .wf-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(10,10,10,.06); }
  .wf-track i { position: absolute; top: calc(50% - 3px); height: 6px; border-radius: 3px; background: var(--indigo); transform-origin: left center; }
  .wf-step.going .wf-track i { background: linear-gradient(90deg, rgba(61,59,243,.35), #3D3BF3); box-shadow: 0 0 10px rgba(61,59,243,.45); }
  .wf-step b { justify-self: end; font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .wf-out { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
  .wf-out > .wf-k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); align-self: start; padding-top: 3px; }
  .wf-o { grid-column: 2 / 4; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--ink); transition: color .4s ease; }
  .wf-seal { position: relative; width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; background: var(--indigo); color: var(--sub); transition: background .35s ease, box-shadow .35s ease; box-shadow: 0 0 0 3px rgba(61,59,243,.14); }
  .wf-seal svg { width: 12px; height: 12px; grid-area: 1 / 1; transition: opacity .3s ease, transform .3s ease; }
  .wf-seal .ic-doc { opacity: 0; transform: scale(.6); }
  .wf-lane.pending .wf-seal { background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line-2); }
  .wf-lane.pending .wf-seal .ic-doc { opacity: 1; transform: none; }
  .wf-lane.pending .wf-seal .ic-ok { opacity: 0; transform: scale(.6); }
  .wf-lane.pending .wf-o { color: var(--sub); }
  .wf-lane.sealing .wf-seal { box-shadow: 0 0 0 5px rgba(61,59,243,.2), 0 0 18px rgba(61,59,243,.55); }
  .wf-head { position: absolute; top: 30px; bottom: 0; left: 0; width: 1px; background: linear-gradient(180deg, #3D3BF3, rgba(61,59,243,.25)); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
  .wf-console.playing .wf-head, .wf-console.playing .wf-now { opacity: 1; }
  @media (min-width: 901px) and (max-width: 1180px) {
    .wf-console { --wf-cols: minmax(0, 1.08fr) minmax(0, 1.2fr); --wf-run: 142px minmax(0, 1fr) 72px; --wf-gap: 24px; --wf-pad: 20px; }
    .wf-copy h3 { font-size: 18px; } .wf-copy p { font-size: 13px; }
    .wf-k, .wf-step b, .wf-o { font-size: 13px; }
  }
  @media (min-width: 901px) and (max-height: 900px) {
    .sec.wf { padding-block: clamp(34px, 4.8vh, 60px); }
    .wf .sec-head { margin-bottom: 22px; }
    .wf-lane { padding-block: 12px; }
    .wf-step { height: 20px; }
    .wf-copy { gap: 4px; } .wf-copy h3 { font-size: 18px; }
  }
  @media (max-width: 900px) {
    .wf-console { --wf-cols: minmax(0, 1fr); --wf-gap: 14px; --wf-pad: 20px; }
    .wf-axis, .wf-head { display: none; }
  }
  @media (max-width: 700px) {
    .wf-console { --wf-run: minmax(0, 1fr) auto; --wf-pad: 16px; }
    .wf-track { display: none; }
    .wf-runhead b { grid-column: 1; } .wf-timer { grid-column: 2; }
    .wf-runhead, .wf-step, .wf-out { gap: 0 10px; }
    .wf-out { grid-template-columns: minmax(0, 1fr); } .wf-out > .wf-k { display: none; } .wf-o { grid-column: 1; }
    .wf-k { white-space: normal; }
  }

  /* ---------- stable 2 · calibration: aligned edges, zones keep their two live lines ---------- */
  .cal5-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.95fr); align-items: stretch; }
  .cal5-copy { align-self: center; }
  .cal-core { display: flex; flex-direction: column; padding: 18px 16px 14px; }
  .cal-core .cfig { flex: 1; height: auto; min-height: 440px; }
  .cal-core .zone { white-space: nowrap; width: auto; }
  .cal-core .zone span { display: block; font-size: 11px; line-height: 1.35; }
  .cal-entry { display: flex; flex-direction: column; }
  .cal-entry .entry-foot { margin-top: auto; padding-top: 10px; }
  @media (min-width: 901px) and (max-width: 1180px) { .cal5-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 0.95fr); } .cal-core .zone b { font-size: 12px; } .cal-core .zone span { font-size: 11px; } }
  @media (max-width: 900px) { .cal5-grid { grid-template-columns: 1fr; } .cal-core .cfig { flex: none; height: 440px; } }
  @media (max-width: 700px) { .cal-core .cfig { height: 400px; min-height: 0; } .cal-core .zone span { display: block; font-size: 11px; } }

  /* ---------- stable 2 · early access: calibration depth as layers ---------- */
  .ea2-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
  .ea2-head h2 { margin-bottom: 0; }
  .ea2-head .actions { margin-top: 22px; }
  .ea2-aside .big { margin: 0; }
  .ea2-aside .lede { margin: 12px 0 0; }
  .ea2-fig { margin: 30px 0 0; }
  .ea2-cap { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
  .ea2-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--indigo); }
  .ea2-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
  .ea2-live.beat i { animation: eabeat 1s ease-out; }
  @keyframes eabeat { from { box-shadow: 0 0 0 0 rgba(61,59,243,.5); } to { box-shadow: 0 0 0 10px rgba(61,59,243,0); } }
  .ea2-plot { position: relative; height: clamp(200px, 29vh, 280px); }
  .ea2-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ea2-plot path, .ea2-plot circle { transition: opacity .25s ease; }
  .ea2-lbls > * { position: absolute; }
  .ea2-tier, .ea2-ord { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; color: var(--faint); text-transform: uppercase; white-space: nowrap; line-height: 12px; }
  .ea2-coh { font-size: 13px; line-height: 1.35; white-space: nowrap; transition: opacity .4s ease; }
  .ea2-coh b { display: block; font-weight: 500; }
  .ea2-coh span { color: var(--sub); font-size: 12px; }
  .ea2-coh.r { text-align: right; }
  .ea2 .ea-why { margin-top: 20px; padding-top: 20px; }
  @media (min-width: 901px) and (max-height: 880px) { .sec.ea2 { padding-block: clamp(36px, 5vh, 64px); } .ea2-fig { margin-top: 22px; } .ea2-cap { margin-bottom: 12px; } .ea2 .ea-why { margin-top: 14px; padding-top: 16px; } }
  @media (max-width: 900px) { .ea2-head { grid-template-columns: 1fr; gap: 16px; } }
  @media (max-width: 560px) { .ea2-coh { font-size: 12px; } .ea2-coh span { display: none; } .ea2-plot { height: 230px; } }

  /* ---------- stable 2 · pricing: volume as units of work ---------- */
  .sc2 { align-items: center; }
  .vol { position: relative; margin: 0; height: 330px; }
  .vol svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .vol-lbls > * { position: absolute; white-space: nowrap; }
  .vol-t { font-family: var(--mono); font-size: 11px; color: var(--faint); line-height: 14px; }
  .vol-l { font-size: 13px; line-height: 1.3; }
  .vol-l.reg { font-weight: 500; }
  .vol-l.hc { color: var(--sub); }
  .vol-gap { font-size: 13px; line-height: 1.35; color: var(--indigo); text-align: center; transition: opacity .5s ease; }
  .vol-key { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--sub); line-height: 14px; }
  .vol-key i { width: 5px; height: 5px; border-radius: 50%; background: rgba(61,59,243,.78); }
  @media (max-width: 900px) { .vol { height: 300px; margin-top: 20px; } }

  /* ---------- stable 2 · featured articles: the live cover art ---------- */
  .articles2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .art2 { display: flex; flex-direction: column; background: #FAFAFA; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .3s ease, transform .3s ease; }
  .art2:hover { box-shadow: 0 0 0 1px rgba(61,59,243,.3), 0 26px 50px -30px rgba(30,28,120,.45); transform: translateY(-2px); }
  .art2:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
  .art2-cover { position: relative; aspect-ratio: 1200 / 540; overflow: hidden; border-bottom: 1px solid var(--line); background: #ECECF9; }
  .art2-cover svg { display: block; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.3,.7,.2,1); }
  .art2:hover .art2-cover svg { transform: scale(1.035); }
  .art2-feat { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(61,59,243,.18); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); }
  .art2-feat i { width: 5px; height: 5px; border-radius: 50%; background: var(--indigo); }
  .art2-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .art2-body .label { color: var(--indigo); }
  .art2-body h3 { font-size: 18px; line-height: 1.25; }
  .art2-body p { margin: 0; color: var(--sub); font-size: 13px; line-height: 1.5; }
  .art2-meta { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--sub); }
  .art2-meta span:last-child { display: inline-flex; align-items: center; gap: 6px; }
  .art2-meta svg { width: 13px; height: 13px; transition: transform .3s ease, color .3s ease; }
  .art2:hover .art2-meta svg { transform: translateX(3px); color: var(--indigo); }
  @media (min-width: 901px) and (max-height: 820px) { .art2-cover { aspect-ratio: 1200 / 470; } }
  @media (min-width: 901px) and (max-width: 1180px) { .art2-cover { aspect-ratio: 1200 / 470; } .art2-body { padding: 16px 18px; } .art2-body p { font-size: 13px; } }
  @media (max-width: 900px) { .articles2 { grid-template-columns: 1fr; } }

  /* ---------- stable 2 · fit on shorter laptop screens ---------- */
  @media (min-width: 901px) and (max-height: 880px) {
    .sh-art { height: 88px; }
    .sh-body { padding: 15px 20px 16px; gap: 8px; }
    .sh-res { padding: 16px 20px 15px; }
  }
  @media (min-width: 901px) and (max-height: 800px) {
    .sec.tr { padding-block: clamp(32px, 4.8vh, 60px); }
    .tr-head { margin-bottom: 18px; }
  }

  /* the pack fits its panel at mid widths and on phones */
  @media (min-width: 901px) and (max-width: 1180px), (max-width: 700px) {
    .cal-core .pack { padding: 9px 14px 9px 9px; gap: 10px; }
    .cal-core .pack > i { width: 28px; height: 28px; border-radius: 8px; }
    .cal-core .pack > span { font-size: 11px; } .cal-core .pack > span > b { font-size: 12px; margin-bottom: 2px; }
    .cal-core .pk-rec { font-size: 11px; }
  }
  /* the recommended badge sits on the card's top edge, clear of the plan name */
  .tier .tag { top: 0; right: auto; left: 50%; transform: translate(-50%, -50%); background: #FAFAFA; box-shadow: inset 0 0 0 1px rgba(61,59,243,.35); white-space: nowrap; }

  /* ---------- stable 2.1 · the officer stays in view; ladder names are never cut ---------- */
  .crop { max-height: none; }
  .crop .frame, .crop .app { height: 100%; }
  .crop .a-side { min-height: 0; }
  .crop .a-main { overflow: hidden; }
  .a-ladder .a-row { grid-template-columns: 5.6cqw minmax(max-content, 1fr) auto; gap: .5cqw; }
  .a-ladder .s { overflow: visible; text-overflow: clip; }
  .a-ladder .p { font-size: .74cqw; padding-inline: .55cqw; }
  /* the workspace floats: space beneath it and a rounded lower corner, at every size */
  .crop { border-radius: 18px 0 0 18px; margin-bottom: clamp(44px, 6.5vh, 72px); }
  /* side by side, the message sits centred against the workspace instead of leaving the lower half empty */
  @media (min-width: 901px) {
    .hero-grid { align-items: center; padding-bottom: clamp(44px, 6.5vh, 72px); }
    .hero-copy { padding-bottom: 0; margin-top: -2vh; }
    .crop { margin-bottom: 0; }
  }

  /* ---------- stable 2.5 · agents at work in the hero: pointers with name tags, presence on the card they work ---------- */
  .crop .frame { position: relative; }
  .cursors { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
  .cur { position: absolute; left: 0; top: 0; opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.45,.05,.2,1), ease; will-change: transform; }
  .cur.on { opacity: 1; }
  .cur svg { position: relative; z-index: 1; display: block; width: 17px; height: 19px; margin: -1px 0 0 -1px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(10,10,40,.28)); transform-origin: 2px 2px; transition: transform .14s ease; }
  .cur svg path { stroke: #FAFAFA; stroke-width: 1.4; stroke-linejoin: round; }
  .cur.agent { color: #3D3BF3; } .cur.human { color: #0A0A0A; }
  .cur.agent svg path { fill: #3D3BF3; } .cur.human svg path { fill: #0A0A0A; }
  .cur .tag { position: absolute; left: 13px; top: 17px; white-space: nowrap; font: 500 12px/1 var(--sans); letter-spacing: -0.005em; color: #FAFAFA; padding: 5px 9px 6px; border-radius: 3px 10px 10px 10px; background: currentColor; box-shadow: 0 8px 18px -8px rgba(20,18,90,.55); }
  .cur .tag { background: #3D3BF3; } .cur.human .tag { background: #0A0A0A; }
  .cur .ring { position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; }
  .cur.press svg { transform: scale(.84); }
  .cur.click .ring { animation: curRing .55s ease-out; }
  @keyframes curRing { from { transform: scale(.3); opacity: .75; } to { transform: scale(1.7); opacity: 0; } }
  .app .a-ev, .app .a-fact, .app .a-box, .app .a-user { transition: outline-color .3s ease; outline: 1.5px solid transparent; outline-offset: 2px; }
  .app .pres-agent { outline-color: rgba(61,59,243,.55); }
  .app .pres-human { outline-color: rgba(10,10,10,.45); }

  /* ---------- stable 2.6 · worked example: two product screens, the same counterparty, rows aligned across ---------- */
  .x2 .sec-head { margin-bottom: 14px; }
  .x2-cap { margin: 0 0 8px; }
  .x2-runs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(9, auto); column-gap: 20px; }
  .x2-win { position: relative; grid-row: 1 / span 9; display: grid; grid-template-rows: subgrid; background: #FAFAFA; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 28px 60px -42px rgba(30,28,120,.35); font-size: 13px; line-height: 1.4; }
  .x2-win.cmp { box-shadow: 0 0 0 1.5px var(--indigo), 0 30px 64px -38px rgba(61,59,243,.45); }
  .x2-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .x2-bar b { font-weight: 500; font-size: 14px; white-space: nowrap; }
  .x2-win.conv .x2-bar { background: #F6F6F7; }
  .x2-win.conv .x2-bar b { color: #56565C; }
  .x2-tags { display: flex; gap: 6px; flex: none; }
  .x2-tag { font-size: 11px; padding: 3px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--sub); white-space: nowrap; }
  .x2-tag.rev { background: var(--indigo-soft); color: var(--indigo); box-shadow: none; transition: box-shadow .4s ease; }
  .x2-tag.rev.handoff { box-shadow: 0 0 0 4px rgba(61,59,243,.16); }
  .x2-q { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
  .x2-in { font-family: var(--mono); font-size: 13px; color: var(--ink); min-height: 18px; }
  .x2-in.typing::after { content: ""; display: inline-block; width: 1px; height: 13px; margin-left: 1px; vertical-align: -2px; background: var(--indigo); }
  .x2-k { color: var(--sub); font-size: 13px; }
  .x2-ex { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
  .x2-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .x2-path { display: grid; justify-items: start; }
  .x2-path .hop { display: flex; align-items: center; gap: 8px; font-size: 13px; transition: opacity .35s ease; }
  .x2-path .hop i { width: 9px; height: 9px; border-radius: 50%; background: #FAFAFA; box-shadow: inset 0 0 0 2px var(--indigo); flex: none; transition: box-shadow .3s ease, background .3s ease; }
  .x2-path .hop small { font-family: var(--mono); font-size: 11px; color: var(--sub); }
  .x2-path .link { position: relative; margin-left: 4px; padding: 3px 0 3px 14px; }
  .x2-path .link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--indigo); transform-origin: top; transition: transform .35s ease; }
  .x2-path .link em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--sub); transition: opacity .3s ease; }
  .x2-path .hop.hit span { color: var(--bad); font-weight: 500; }
  .x2-path .hop.hit i { background: var(--bad); box-shadow: 0 0 0 3px rgba(136,19,55,.14); }
  .x2-win.conv .x2-path .hop i { box-shadow: inset 0 0 0 2px #A2A2AA; }
  .x2-win.conv .x2-path .hop.end i { background: #A2A2AA; }
  .x2-win.conv .x2-path .link::before { background: repeating-linear-gradient(180deg, #B8B8BE 0 3px, transparent 3px 6px); }
  .x2-win.conv .x2-path .hop span { color: #56565C; }
  .x2-verdict { display: grid; justify-items: end; gap: 2px; text-align: right; }
  .x2-verdict b { font-size: clamp(30px, 3vw, 46px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; transition: opacity .4s ease, transform .4s ease; }
  .x2-win.conv .x2-verdict b { color: #A2A2AA; }
  .x2-win.cmp .x2-verdict b { color: var(--indigo); }
  .x2-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; padding: 6px 16px; border-top: 1px solid var(--line); }
  .x2-top + .x2-row { border-top: 0; }
  .x2-v { transition: opacity .35s ease; }
  .x2-win.conv .x2-v { color: #6B6B72; }
  .x2-win.cmp .x2-v { color: var(--ink); font-weight: 500; }
  .x2-bad { color: var(--bad); font-weight: 500; }
  .x2-m { font-family: var(--mono); font-size: 12px; font-weight: 400; }
  .x2 [data-pending] { opacity: 0; }
  .x2 .link[data-pending]::before { transform: scaleY(0); }
  .x2 .link[data-pending] { opacity: 1; } .x2 .link[data-pending] em { opacity: 0; }
  .x2-verdict b[data-pending] { transform: translateY(4px); }
  /* the agent pointers in the cmpliance screen, drawn like the hero's */
  .x2-ptrs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  .xp { position: absolute; left: 0; top: 0; opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.45,.05,.2,1), ease; }
  .xp.on { opacity: 1; }
  .xp svg { display: block; width: 17px; height: 19px; margin: -1px 0 0 -1px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(10,10,40,.28)); transform-origin: 2px 2px; transition: transform .14s ease; }
  .xp svg path { fill: #3D3BF3; stroke: #FAFAFA; stroke-width: 1.4; stroke-linejoin: round; }
  .xp .xp-tag { position: absolute; left: 13px; top: 17px; white-space: nowrap; font: 500 12px/1 var(--sans); color: #FAFAFA; padding: 5px 9px 6px; border-radius: 3px 10px 10px 10px; background: #3D3BF3; box-shadow: 0 8px 18px -8px rgba(20,18,90,.55); }
  .xp .xp-ring { position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #3D3BF3; opacity: 0; }
  .xp.press svg { transform: scale(.84); }
  .xp.up .xp-tag { top: auto; bottom: 21px; border-radius: 10px 10px 10px 3px; }
  .xp.click .xp-ring { animation: xpRing .55s ease-out; }
  @keyframes xpRing { from { transform: scale(.3); opacity: .75; } to { transform: scale(1.7); opacity: 0; } }
  @media (min-width: 901px) and (max-width: 1180px) {
    .x2-row { grid-template-columns: 112px minmax(0, 1fr); }
    .x2-win { font-size: 13px; }
    .x2-bar b { font-size: 13px; }
  }
  @media (min-width: 901px) and (max-height: 880px) {
    .sec.x2 { padding-block: 26px 24px; }
    .x2-row { padding-block: 4px; }
    .x2-top { padding-block: 9px; }
    .x2-bar { padding-block: 8px; } .x2-q { padding-block: 6px; }
    .x2 .ex-foot { margin-top: 10px; }
  }
  @media (max-width: 900px) {
    .x2-runs { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 16px; }
    .x2-win { grid-row: auto; grid-template-rows: none; display: block; }
  }
  @media (max-width: 560px) {
    .x2-bar { flex-wrap: wrap; }
    .x2-q { flex-wrap: wrap; row-gap: 2px; } .x2-ex { order: -1; width: 100%; margin: 0; }
    .x2-row { grid-template-columns: 1fr; gap: 2px; }
  }

  /* ---------- stable 2.7 · the assessment: agents run on their own, everything stops for the human call ---------- */
  .tr-win { position: relative; }
  /* 01 search: the queue filters to the one match */
  .tr-search small { transition: opacity .3s ease; }
  .tr-search small.pending { opacity: 0; }
  .tr-item.out { display: none; }
  .tr-item.leaving { opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }
  .tr-win[data-step="0"] .tr-item:not(.sel) { opacity: 1; }
  /* 03 trace: empty, then running, then completed with its timing */
  .tr-steps div > i { position: relative; display: grid; place-items: center; }
  .tr-steps div.done > i::after { content: ""; width: 5px; height: 3px; border-left: 1.5px solid #FAFAFA; border-bottom: 1.5px solid #FAFAFA; transform: rotate(-45deg) translate(.5px, -.5px); }
  .tr-steps div.run > i { box-shadow: none; border: 1.5px solid rgba(61,59,243,.22); border-top-color: #3D3BF3; animation: trSpin .6s linear infinite; }
  @keyframes trSpin { to { transform: rotate(360deg); } }
  .tr-steps div:not(.edge) .st, .tr-steps div:not(.edge) .tm { transition: opacity .25s ease; }
  .tr-steps div:not(.edge):not(.done) .st, .tr-steps div:not(.edge):not(.done) .tm { opacity: 0; }
  .tr-steps .edge[data-end] { transition: opacity .3s ease; }
  .tr-steps .edge[data-end].pending, .tr-sha.pending { opacity: 0; }
  .tr-sha { transition: opacity .45s ease, transform .45s ease; }
  .tr-sha.pending { transform: translateY(4px); }
  /* 06 decision: waits for a named human, then records the call */
  .tr-call .lhs { display: flex; align-items: center; gap: 12px; }
  .tr-call .await { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); }
  .tr-call .await i { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
  .tr-call.decided .await, .tr-call.decided .btns { display: none; }
  .tr-call.decided .done { display: flex; }
  .tr-call .done { animation: trLand .4s ease; }
  @keyframes trLand { from { opacity: 0; transform: translateY(3px); } }
  .tr-new { transition: opacity .4s ease, transform .4s ease; }
  .tr-new.pending { opacity: 0; transform: translateY(-3px); }
  .tr-new b { color: var(--ok); }
  /* Lena Brandt's pointer: ink, drawn like the hero's human pointer */
  .tr-ptrs { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
  .xp.human svg path { fill: #0A0A0A; }
  .xp.human .xp-tag { background: #0A0A0A; }
  .xp.human .xp-ring { border-color: #0A0A0A; }
  /* phones: room for the recorded decision above the call bar */
  @media (max-width: 700px) { .tr-win { height: 540px; } .tr-tl div { padding: 6px 0; } }
  .xp.left .xp-tag { left: auto; right: 4px; border-radius: 10px 3px 10px 10px; }
  .xp.up.left .xp-tag { border-radius: 10px 10px 3px 10px; }

  /* ---------- stable 2.8 · names do not match: the product's entity view; the names clear, then the chain finds the exposure ---------- */
  .ch-card { position: relative; border-radius: 16px; }
  .chw-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #FBFBFC; font-family: var(--mono); font-size: 11px; color: var(--sub); }
  .chw-bar i { width: 8px; height: 8px; border-radius: 50%; background: #E2E2E6; }
  .chw-bar span { margin-left: 10px; }
  .ch-card-h { gap: 16px; padding: 11px 20px; }
  .chw-crumb { font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chw-crumb b { font-weight: 500; color: var(--ink); }
  .ch-card-h .label { white-space: nowrap; }
  /* start states: a name not yet screened, an entity further up the chain not yet reached, a finding not yet written */
  .ch-node > div > span { transition: opacity .3s ease; }
  .ch-node > div > span.pending { opacity: 0; }
  .ch-node.sanct.unseen { opacity: .5; box-shadow: 0 0 0 1px var(--line-2); }
  .ch-node.sanct.unseen em { background: #F2F2F5; color: #A2A2AA; }
  .ch-node.sanct.unseen small, .ch-node.sanct.unseen > div > span { opacity: 0; }
  .ch-node.sanct small, .ch-node.sanct em { transition: opacity .35s ease, background .4s ease, color .4s ease; }
  .ch-why { transition: opacity .45s ease, box-shadow .5s ease, background .5s ease; }
  .ch-why.pending { opacity: 0; }
  .ch-lbl, .ch-hop { transition: opacity .3s ease; }
  .ch-ptrs { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
  @media (min-width: 701px) and (max-height: 820px) { .ch-card-h { padding-block: 9px; } }
  @media (max-width: 700px) { .ch-card-h { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; } }
  .ch-node.sanct em svg { transition: opacity .35s ease; }
  .ch-node.sanct.unseen em svg { opacity: 0; }
  @media (min-width: 901px) and (max-height: 780px) {
    .chw-bar { padding-block: 7px; }
    .ch-card-h { padding-block: 8px; }
    .ch-fig { margin-top: 12px; }
  }

  /* ---------- stable 2.9 · the chain as the product shows it: status pills, the risk on the case header, drawn links ---------- */
  .cp { display: inline-flex; align-items: center; font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 99px; background: #F2F2F5; color: #3A3A3F; white-space: nowrap; transition: background-color .45s ease, color .45s ease, box-shadow .45s ease; }
  .cp.ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(17,94,89,.2); }
  .cp.bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(136,19,55,.2); }
  .cp.in { background: #F3F3FE; color: var(--indigo); box-shadow: inset 0 0 0 1px rgba(61,59,243,.2); }
  .cp.ping { animation: cpPing .9s ease; }
  @keyframes cpPing { 0% { box-shadow: 0 0 0 0 rgba(61,59,243,.45); } 100% { box-shadow: 0 0 0 7px rgba(61,59,243,0); } }
  .chw-right { display: inline-flex; align-items: center; gap: 12px; flex: none; }
  .ch-node .ch-st { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
  .ch-node .ch-st::before, .ch-node .ch-st span::before { content: none; }
  .ch-node .ch-st span { margin: 0; }
  .ch-node .ch-j { font-size: 12px; color: var(--sub); }
  .ch-node.sanct.hot .ch-j { color: var(--bad); }
  .ch-node .cp { font-size: 11px; padding: 3px 7px; }
  .ch-fig { height: 280px; }
  .ch-why { transform: none; transition: opacity .45s ease, transform .45s ease, box-shadow .5s ease, background .5s ease; }
  .ch-why.pending { opacity: 0; transform: translateY(6px); }
  @media (min-width: 701px) and (max-height: 820px) { .ch-fig { height: 258px; } }
  @media (min-width: 901px) and (max-height: 780px) { .ch-fig { height: 250px; } }
  @media (max-width: 700px) { .chw-right { width: 100%; justify-content: space-between; } .ch-node .ch-st { flex-wrap: wrap; row-gap: 4px; } }

  /* ---------- stable 2.10 · manifesto: the evidence is gathered, the record waits, a person decides ---------- */
  .mf-docs { gap: 0; }
  .mf-docs .mf-doc { background: transparent; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); padding: 13px 2px; }
  .mf-docs .mf-doc:last-child { border-bottom: 1px solid var(--line); }
  .mf-docs .mf-doc.got { box-shadow: none; }
  .mf-state { display: inline-grid; }
  .mf-state > span { grid-area: 1 / 1; transition: opacity .35s ease; }
  .mf-rec .mf-wait { opacity: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--sub); font-weight: 400; }
  .mf-rec .mf-wait::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
  .mf-rec.awaiting .mf-done { opacity: 0; }
  .mf-rec.awaiting .mf-wait { opacity: 1; }
  .mf-rec.awaiting .mf-wait::before { animation: mfWait 1.4s ease-in-out infinite; }
  @keyframes mfWait { 50% { box-shadow: 0 0 0 4px rgba(146,64,14,.14); } }
  .mf-rec [data-flag] { transition: opacity .35s ease, transform .35s ease; }
  .mf-rec.awaiting [data-flag] { opacity: 0; transform: scale(.85); }
  .mf-rec .mf-route { transition: opacity .45s ease; }
  .mf-rec.awaiting .mf-route { opacity: 0; }
  .mf-rec .mf-sig b.typing::after { content: ""; display: inline-block; width: 1px; height: 13px; margin-left: 1px; vertical-align: -2px; background: var(--indigo); }
  /* phones: the reviewer on one line, the routing on the next */
  @media (max-width: 700px) { .mf-rec .mf-who { flex-wrap: wrap; row-gap: 4px; } .mf-rec .mf-sig, .mf-rec .mf-route { white-space: nowrap; } }

  /* the evidence reads like a compliance file: source, document, result; the result shows once the item is gathered */
  .mf-docs .mf-doc { grid-template-columns: 22px 150px minmax(0, 1fr) auto; }
  .mf-doc .m { white-space: nowrap; }
  .mf-res { font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 99px; white-space: nowrap; background: #F2F2F5; color: #3A3A3F; transition: opacity .3s ease; }
  .mf-res.ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(17,94,89,.2); }
  .mf-res.bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(136,19,55,.22); }
  .mf-docs .mf-doc:not(.got) .mf-res { opacity: 0; }
  @media (max-width: 1180px) {
    .mf-docs .mf-doc { padding-block: 10px; }
    .mf-doc .m { font-size: 11px; }
  }
  @media (max-width: 1180px) {
    .mf-docs .mf-doc { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ck name res" ". src res"; row-gap: 2px; column-gap: 10px; }
    .mf-doc .ck { grid-area: ck; } .mf-doc .mf-name { grid-area: name; } .mf-doc .m { grid-area: src; } .mf-doc .mf-res { grid-area: res; }
  }

  /* ---------- stable 2.11 · the shift: no drawn check boxes; the fragments seal into an evidence pack, the obligation is a pin ---------- */
  .sh-pack { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 12px; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(61,59,243,.25), 0 10px 22px -14px rgba(61,59,243,.4); white-space: nowrap; transition: box-shadow .4s ease; }
  .sh-pack i { display: grid; color: var(--indigo); }
  .sh-art .sh-pack svg { position: static; inset: auto; display: block; width: 15px; height: 15px; }
  .sh-pack span { display: flex; flex-direction: column; line-height: 1.25; }
  .sh-pack b { font-weight: 500; font-size: 13px; color: var(--ink); }
  .sh-pack em { font-style: normal; font-size: 11px; color: var(--sub); }
  .sh-art .sh-pack .ok { width: 14px; height: 14px; color: var(--indigo); opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .35s cubic-bezier(.3,1.6,.5,1); }
  .sh-pack.sealed { box-shadow: 0 0 0 1px rgba(61,59,243,.5), 0 10px 22px -14px rgba(61,59,243,.55); }
  .sh-art .sh-pack.sealed .ok { opacity: 1; transform: none; }
  .sh-pack.tight em { display: none; }
  /* the resolution row: a plain check mark that draws in, no filled tile */
  .sh-res i { width: 18px; height: 18px; border-radius: 0; background: none; box-shadow: none; }
  .sh-res i::after { width: 11px; height: 5.5px; border-color: #C9C9CF; transform: rotate(-45deg) translate(1px, -2px) scale(.7); transition: border-color .4s ease, transform .45s cubic-bezier(.3,1.6,.5,1); }
  .sh-res.resolved i { background: none; box-shadow: none; }
  .sh-res.resolved i::after { border-color: var(--indigo); transform: rotate(-45deg) translate(1px, -2px) scale(1); }

  /* ---------- stable 2.12 · the shift, opened up: no panel, no strips; the drawings and the text sit on the page ---------- */
  .sh-panel { background: none; border-radius: 0; box-shadow: none; overflow: visible; column-gap: 44px; }
  .sh-panel .c2, .sh-panel .c3 { box-shadow: none; }
  .sh-panel .sh-art { background: none; border-bottom: 0; margin-inline: -16px; }
  .sh-panel .sh-body { padding: 10px 0 28px; }
  .sh-panel .sh-res { background: none; padding: 20px 0 0; }
  .sh-panel .sh-legend span { background: var(--bg); }
  @media (min-width: 901px) and (max-height: 880px) { .sh-panel .sh-body { padding: 6px 0 22px; } .sh-panel .sh-res { padding-top: 16px; } }
  @media (max-width: 900px) {
    .sh-panel .sh-art { margin-inline: -8px; }
    .sh-panel .sh-art.c2, .sh-panel .sh-art.c3 { border-top: 0; margin-top: 30px; }
    .sh-panel .sh-body { padding: 6px 0 14px; }
    .sh-panel .sh-res { border-top: 1px solid var(--line); padding: 12px 0 0; }
  }

  /* ---------- stable 2.13 · the shift: one grammar for all three drawings (grey in, one accountable object out), more room ---------- */
  .sh-panel .sh-art { height: 128px; }
  @media (min-width: 901px) and (max-height: 880px) { .sh-panel .sh-art { height: 108px; } }
  @media (max-width: 900px) { .sh-panel .sh-art { height: 112px; } }
  .sh-pack b { font-size: 13px; }
  .sh-pack em { font-size: 11px; }

  /* ---------- stable 2.14 · the workforce: named agents do the steps, each outcome goes to the reviewer ---------- */
  .wf-console { --wf-run: 168px minmax(0, 1fr) 104px; }
  .wf-team { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 11px var(--wf-pad); background: #FBFBFC; border-bottom: 1px solid var(--line); }
  .wf-mate { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
  .wf-mate svg { width: 10px; height: 11px; flex: none; transition: transform .3s ease, filter .3s ease; }
  .wf-mate svg path { fill: #3D3BF3; stroke: #FAFAFA; stroke-width: 1.4; stroke-linejoin: round; }
  .wf-mate.on svg { transform: translate(-1px, -1px) scale(1.18); filter: drop-shadow(0 0 4px rgba(61,59,243,.55)); }
  .wf-mate.human { margin-left: auto; }
  .wf-mate.human svg { width: 13px; height: 13px; color: #0A0A0A; }
  .wf-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); white-space: nowrap; transition: opacity .35s ease; min-width: 0; }
  .wf-by svg { width: 8px; height: 9px; flex: none; }
  .wf-by svg path { fill: #3D3BF3; }
  .wf-by.pending { opacity: 0; }
  .wf-o { grid-column: 2 / 3; }
  .wf-pk { display: grid; width: 16px; height: 16px; flex: none; color: var(--indigo); transition: color .3s ease; }
  .wf-pk svg { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity .3s ease, transform .35s cubic-bezier(.3,1.6,.5,1); }
  .wf-pk .wf-pk-doc { opacity: 0; }
  .wf-lane.pending .wf-pk { color: #A2A2AA; }
  .wf-lane.pending .wf-pk .wf-pk-doc { opacity: 1; }
  .wf-lane.pending .wf-pk .wf-pk-ok { opacity: 0; transform: scale(.6); }
  .wf-rev { grid-column: 3; justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1; color: #FAFAFA; background: #0A0A0A; padding: 5px 10px 5px 8px; border-radius: 99px; white-space: nowrap; transition: opacity .4s ease, transform .4s ease; }
  .wf-rev svg { width: 12px; height: 12px; color: #FAFAFA; }
  .wf-lane.pending .wf-rev { opacity: 0; transform: translateX(-8px); }
  .wf-ptrs { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
  @media (min-width: 901px) and (max-width: 1180px) { .wf-console { --wf-run: 146px minmax(0, 1fr) 96px; } .wf-team { gap: 6px 14px; } .wf-mate { font-size: 12px; } }
  @media (max-width: 700px) {
    .wf-console { --wf-run: minmax(0, 1fr) auto; }
    .wf-step { height: auto; grid-template-areas: "k v" "by v"; row-gap: 1px; padding-block: 3px; }
    .wf-step .wf-k { grid-area: k; } .wf-step .wf-by { grid-area: by; } .wf-step b { grid-area: v; }
    .wf-out { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    .wf-rev { grid-column: 1; justify-self: start; }
    .wf-team { gap: 6px 14px; } .wf-mate.human { margin-left: 0; }
  }

  /* the workforce's own pointers: the tag sits inline, on the row the agent is working */
  .wfp { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 2px; opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.45,.05,.2,1), ease; will-change: transform; }
  .wfp.on { opacity: 1; }
  .wfp svg { display: block; width: 13px; height: 15px; margin-top: -9px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(10,10,40,.28)); transform-origin: 2px 2px; transition: transform .14s ease; }
  .wfp svg path { fill: #3D3BF3; stroke: #FAFAFA; stroke-width: 1.4; stroke-linejoin: round; }
  .wfp-tag { font: 500 11px/1 var(--sans); color: #FAFAFA; background: #3D3BF3; padding: 4px 8px 5px; border-radius: 8px; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(20,18,90,.55); }
  .wfp.press svg { transform: scale(.84); }
  .wfp.click .wfp-tag { animation: wfpTap .5s ease-out; }
  @keyframes wfpTap { from { box-shadow: 0 0 0 0 rgba(61,59,243,.5); } to { box-shadow: 0 0 0 6px rgba(61,59,243,0); } }
  /* one screen at 1280 x 800 and below 880px high */
  @media (min-width: 901px) and (max-height: 900px) { .wf-team { padding-block: 9px; } }
  @media (min-width: 901px) and (max-height: 800px) {
    .sec.wf { padding-block: 24px 22px; }
    .wf .sec-head { margin-bottom: 16px; }
    .wf-team { padding-block: 7px; }
    .wf-lane { padding-block: 10px; }
    .wf-step { height: 19px; }
    .wf-out { margin-top: 4px; padding-top: 6px; }
  }

  /* named reviewers: each pack is handed into a person's queue, awaiting approval */
  .wf-console { --wf-run: 168px minmax(0, 1fr) 128px; }
  .wf-humans { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }
  .wf-mate.human { margin-left: 0; }
  .wf-mate.human.on svg { filter: drop-shadow(0 0 4px rgba(10,10,10,.45)); }
  .wf-rev { background: none; color: inherit; padding: 0; border-radius: 0; flex-direction: column; align-items: flex-end; gap: 5px; font-size: inherit; }
  .wf-lane.pending .wf-rev { opacity: 1; transform: none; }
  .wf-lane:not(.handed) .wf-rev { opacity: 0; transform: translateX(-8px); }
  .wf-rev-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1; color: #FAFAFA; background: #0A0A0A; padding: 5px 10px 5px 8px; border-radius: 99px; white-space: nowrap; transition: box-shadow .45s ease; }
  .wf-rev.got .wf-rev-pill { box-shadow: 0 0 0 4px rgba(10,10,10,.12); }
  .wf-rev-st { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1; color: var(--sub); white-space: nowrap; }
  .wf-rev-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
  .wf-fly { position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #FAFAFA; color: var(--indigo); box-shadow: 0 0 0 1px rgba(61,59,243,.4), 0 6px 14px -6px rgba(61,59,243,.5); pointer-events: none; }
  .wf-fly svg { width: 13px; height: 13px; }
  @media (min-width: 901px) and (max-width: 1180px) { .wf-console { --wf-run: 146px minmax(0, 1fr) 116px; } }
  @media (max-width: 700px) {
    .wf-console { --wf-run: minmax(0, 1fr) auto; }
    .wf-rev { flex-direction: row; align-items: center; gap: 10px; }
    .wf-humans { margin-left: 0; }
  }
  .wf-rev-st.ok::before { background: var(--ok); }
  .wf-by svg.wf-lock { width: 10px; height: 10px; color: var(--sub); }
  .wf-by svg.wf-lock path, .wf-by svg.wf-lock rect { fill: none; }

  /* ---------- stable 2.15 · how it works: the headline's six steps, one case through them ---------- */
  .hw { position: relative; --hw-gap: 12px; }
  .hw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--hw-gap); }
  .hw-track { position: absolute; left: 7px; right: calc((100% - 5 * var(--hw-gap)) / 6 + var(--hw-gap) - 7px); top: 6px; height: 1.5px; background: var(--line-2); }
  .hw-track i { position: absolute; inset: 0; background: var(--indigo); transform-origin: left center; transform: scaleX(1); transition: transform .55s cubic-bezier(.3,.7,.2,1); }
  .hw-st { display: flex; flex-direction: column; min-width: 0; }
  .hw-head { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 24px 2px 10px; min-height: 64px; }
  .hw-dot { position: absolute; left: 1px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #FAFAFA; box-shadow: inset 0 0 0 1.5px #C9C9CF; transition: background .3s ease, box-shadow .3s ease; }
  .hw-st.reached .hw-dot { background: var(--indigo); box-shadow: 0 0 0 3px rgba(61,59,243,.14); }
  .hw-n { font: 400 11px/1 var(--mono); color: var(--faint); flex: none; }
  .hw-v { font-weight: 500; font-size: 14px; line-height: 1.25; letter-spacing: -0.01em; }
  .hw-card { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 13px 14px; background: #FAFAFA; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -32px rgba(30,28,120,.35); font-size: 13px; transition: box-shadow .4s ease; }
  .hw-card > * { transition: opacity .35s ease; }
  .hw-st.pending .hw-card > * { opacity: .3; }
  .hw-st.on .hw-card { box-shadow: 0 0 0 1.5px var(--indigo), 0 18px 40px -26px rgba(61,59,243,.45); }
  .hw-t, .hw-f small, .hw-who small { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
  .hw-f { display: flex; flex-direction: column; gap: 2px; }
  .hw-f b, .hw-who b { font-weight: 500; font-size: 13px; line-height: 1.3; }
  .hw-f b.hw-m { font-family: var(--mono); font-size: 12px; font-weight: 400; }
  .hw-bad { color: var(--bad); }
  .hw-pill { display: inline-flex; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 99px; }
  .hw-pill.bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(136,19,55,.2); }
  .hw-who { display: flex; align-items: center; gap: 9px; }
  .hw-who svg { width: 15px; height: 15px; flex: none; color: var(--ink); }
  .hw-who span { display: flex; flex-direction: column; gap: 1px; }
  .hw-ag { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: start; }
  .hw-ag b { display: block; font-weight: 500; font-size: 13px; line-height: 1.3; }
  .hw-ag small { display: block; font-size: 12px; line-height: 1.3; color: var(--sub); }
  .hw-ck { width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px #C9C9CF; display: grid; place-items: center; transition: background .3s ease, box-shadow .3s ease; }
  .hw-ck::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid #FAFAFA; border-bottom: 1.5px solid #FAFAFA; transform: rotate(-45deg) translate(.5px, -.5px); opacity: 0; transition: opacity .25s ease; }
  .hw-ag.done .hw-ck { background: var(--ok); box-shadow: none; } .hw-ag.done .hw-ck::after { opacity: 1; }
  .hw-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .hw-btns span { text-align: center; font-size: 13px; font-weight: 500; padding: 7px 0; border-radius: 9px; background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
  .hw-btns.decided .hw-flag { background: var(--ink); color: #FAFAFA; box-shadow: none; }
  .hw-dec { display: flex; flex-direction: column; gap: 3px; padding-top: 9px; border-top: 1px solid var(--line); transition: opacity .4s ease; }
  .hw-dec b { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--warn); }
  .hw-dec b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
  .hw-dec small { font-size: 12px; color: var(--sub); }
  .hw-dec.pending, [data-hwfill].pending { opacity: 0; }
  .hw-export { margin-top: auto; text-align: center; font-size: 13px; font-weight: 500; padding: 7px 0; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-2); }
  #how .flow-cap { margin-top: 18px; }
  @media (min-width: 901px) and (max-width: 1180px) {
    .hw { --hw-gap: 8px; }
    .hw-card { padding: 10px 10px; gap: 7px; font-size: 13px; }
    .hw-v { font-size: 13px; } .hw-head { min-height: 58px; }
    .hw-f b, .hw-who b { font-size: 13px; } .hw-f b.hw-m { font-size: 11px; }
    .hw-ag b { font-size: 12px; } .hw-ag small { font-size: 11px; }
    .hw-btns span { font-size: 12px; }
  }
  @media (min-width: 901px) and (max-height: 880px) {
    .hw-head { padding: 22px 2px 8px; min-height: 56px; }
    .hw-card { gap: 7px; padding-block: 11px; }
    #how .flow-cap { margin-top: 12px; }
  }
  @media (max-width: 900px) {
    .hw-steps { grid-template-columns: 1fr 1fr; }
    .hw-track, .hw-dot { display: none; }
    .hw-head { padding: 0 2px 8px; min-height: 0; }
  }
  @media (max-width: 560px) { .hw-steps { grid-template-columns: 1fr; row-gap: 16px; } }
  /* what has not happened yet is not shown, not even dimmed: the decision and the pack's fields */
  .hw-st .hw-card > .hw-dec.pending, .hw-st .hw-card > [data-hwfill].pending { opacity: 0; }
  .hw-nb { white-space: nowrap; }

  /* the headline says the six steps once, full width; the stations point back to it with its verbs; cards as tall as their content */
  @media (min-width: 901px) {
    #how .sec-head { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
    #how .sec-head .lede { margin: 0; }
  }
  .hw-steps { align-items: start; }
  .hw-card { flex: none; }
  .hw-head, .hw-st .hw-head { min-height: 0; }
  .hw-v { font-size: 15px; }

  /* ---------- stable 2.16 · what agentic actually means: the difference in two rows ---------- */
  .agentic .ag-lead { margin-top: 14px; }
  .ag-rows { margin: 18px 0 0; display: grid; max-width: 58ch; }
  .ag-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
  .ag-row:last-child { border-bottom: 1px solid var(--line); }
  .ag-row dt { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); padding-top: 4px; }
  .ag-row dd { margin: 0; color: var(--sub); line-height: 1.5; }
  .ag-row.us dt { color: var(--indigo); }
  .ag-row.us dd { color: var(--ink); }
  .agentic .ag-call { margin-top: 16px; color: var(--ink); }
  @media (max-width: 560px) { .ag-row { grid-template-columns: 1fr; gap: 4px; } .ag-row dt { padding-top: 0; } }

  /* the brand stays lowercase; the two columns read as a pair and end on the same line */
  .ag-row dt { text-transform: none; letter-spacing: 0; font-size: 12px; }
  .agentic h3 { text-wrap: balance; }
  @media (min-width: 901px) {
    .agentic .two-text > div { display: flex; flex-direction: column; }
    .agentic .two-text > div > .ag-call { margin-top: auto; padding-top: 16px; }
  }
  .agentic p, .agentic dd { text-wrap: pretty; }
  /* phones: the longer record line ("Ready for review · EP-… · hash") stays inside the core */
  @media (max-width: 480px) { .core .pack { padding: 10px 12px 10px 10px; gap: 10px; } .core .pack > i { width: 30px; height: 30px; } .core .pk-rec { font-size: 11px; letter-spacing: 0; gap: 5px; } .core .pack > span { font-size: 12px; } }

  /* ---------- stable 2.18 · virtual data room: the mechanism, calmer around it ---------- */
  .vd-fig { min-height: 200px; }
  .vd-pack { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 12px; background: #111116; box-shadow: inset 0 0 0 1px rgba(169,168,255,.3), 0 10px 26px -14px rgba(61,59,243,.55); white-space: nowrap; color: #F4F4F6; transition: box-shadow .4s ease; }
  .vd-pack i { display: grid; color: #A9A8FF; }
  .vd-fig .vd-pack svg { position: static; inset: auto; width: 15px; height: 15px; display: block; }
  .vd-pack span { display: flex; flex-direction: column; line-height: 1.25; }
  .vd-pack b { font-weight: 500; font-size: 13px; }
  .vd-pack em { font-style: normal; font-size: 11px; color: #A9A9B1; }
  .vd-fig .vd-pack .vd-ok { width: 14px; height: 14px; color: #A9A8FF; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .35s cubic-bezier(.3,1.6,.5,1); }
  .vd-pack.sealed { box-shadow: inset 0 0 0 1px rgba(169,168,255,.7), 0 10px 26px -12px rgba(61,59,243,.75); }
  .vd-fig .vd-pack.sealed .vd-ok { opacity: 1; transform: none; }
  .vd-pack.tight em { display: none; }
  .vd-num { position: absolute; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 500 9.5px/1 var(--mono); color: #8E8E97; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); background: #0B0B0E; transition: color .3s ease, background .3s ease, box-shadow .3s ease; }
  .vd-num.on { color: #FAFAFA; background: #3D3BF3; box-shadow: 0 0 0 3px rgba(61,59,243,.3), 0 0 12px rgba(143,141,255,.6); }
  .vd-num.done { color: #D4D3FF; box-shadow: inset 0 0 0 1px rgba(169,168,255,.55); }
  /* the verification card stays white, with less in it */
  .vd-panel .vd-title { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); margin-bottom: 10px; }
  .vd-panel .stats { box-shadow: none; gap: 0; }
  .vd-panel .stats div { box-shadow: none; border: 0; background: none; padding: 2px 14px 10px 0; }
  .vd-panel .stats div + div { border-left: 1px solid var(--line); padding-left: 14px; }
  .vd-panel .vd-out { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ok); }
  .vd-panel .vd-out i { width: 16px; height: 16px; border-radius: 50%; background: var(--ok); flex: none; display: grid; place-items: center; }
  .vd-panel .vd-out i::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid #FAFAFA; border-bottom: 1.5px solid #FAFAFA; transform: rotate(-45deg) translate(.5px, -.5px); }
  /* the boundary sentence and the use cases on one quiet line */
  .vd .vd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
  .vd .vd-foot p { margin: 0; font-size: 14px; color: #C9C9D0; }
  .vd .vd-foot .usecases { margin: 0; }
  @media (max-width: 900px) { .vd .vd-foot { display: flex; } }
  .vd-panel .access.vd-hl { background: var(--indigo-soft); }
  .vd-panel .access.vd-new > * { animation: vdNew .5s ease-out both; }
  @keyframes vdNew { from { opacity: 0; transform: translateY(-4px); } }
  @media (prefers-reduced-motion: reduce) { .vd-panel .access.vd-new > * { animation: none; } }

  /* ---------- stable 2.19 · virtual data room: the room hugs its contents; the card ends on its outcome ---------- */
  .vd-fig { min-height: 150px; }
  .vd-panel { display: flex; flex-direction: column; }
  .vd-panel .vd-out { margin-top: auto; }
  .vd-panel [data-acc="2"] { margin-bottom: 12px; }   /* keeps the gap above the outcome line when there is no spare height */
  @media (min-width: 1181px) { .vd-steps div span { display: block; } }
  /* the data room continues the architecture section's dark chapter: its glow fades out before the top edge, so no seam shows where the two meet */
  #vdr.dark::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 180px); mask-image: linear-gradient(to bottom, transparent 0, #000 180px); }
  /* the five steps share three rows (number, title, caption), so every caption starts on the same line when a title wraps */
  @supports (grid-template-rows: subgrid) {
    .vd-steps { row-gap: 0; }
    .vd-steps > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  }

  /* ---------- stable 2.22 · worked example: the graph beside the reader ---------- */
  .x2 .kg, .x2 .kl { display: inline-block; flex: none; vertical-align: -1px; margin-right: 5px; }
  .x2 .kg { width: 13px; height: 7px; background: radial-gradient(circle at 2.5px 3.5px, var(--indigo) 2.1px, transparent 2.5px), radial-gradient(circle at 10.5px 3.5px, var(--indigo) 2.1px, transparent 2.5px), linear-gradient(var(--indigo), var(--indigo)) 3px 2.9px / 7px 1.2px no-repeat; }
  .x2 .kl { width: 10px; height: 8px; background: linear-gradient(var(--indigo), var(--indigo)) 0 0 / 10px 1.3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 0 3.3px / 7px 1.3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 0 6.6px / 9px 1.3px no-repeat; }
  .x2-key { display: inline-flex; align-items: center; }
  .x2-key .kg { margin-left: 5px; } .x2-key .kl { margin-left: 4px; }
  /* the two kinds of work, each with its own lane */
  .x2-lane { min-width: 0; }
  .x2-lane-h { display: flex; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); white-space: nowrap; margin: 1px 0 9px; }
  .x2-win.conv .x2-lane-h { color: #8A8A92; }
  .x2-win.cmp .x2-top { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
  .x2-lane.g { padding-right: 20px; }
  .x2-lane.l { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; border-left: 1px solid var(--line); }
  .x2-lane-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .x2-lane-top .x2-lane-h { margin: 1px 0 0; }
  /* a link read from text, not from a register */
  .x2-win.cmp .x2-path .link.llm::before { background: repeating-linear-gradient(180deg, var(--indigo) 0 3px, transparent 3px 6px); }
  .x2-win.cmp .x2-path .link.llm em { color: var(--indigo); }
  /* the page the language model reads */
  .x2-doc { position: relative; z-index: 1; margin-top: auto; display: grid; gap: 5px; padding: 9px 12px 10px; border-radius: 10px; background: #FBFBFC; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; line-height: 1.35; color: #3A3A3F; transition: opacity .35s ease, transform .35s ease; }
  .x2-doc-h { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 1px; }
  .x2-doc .ln { display: flex; align-items: center; gap: 5px; min-height: 16px; white-space: nowrap; margin-inline: -4px; padding-inline: 4px; border-radius: 4px; transition: background .2s ease; }
  .x2-doc .ln i { flex: none; width: var(--w, 40%); height: 6px; border-radius: 3px; background: #E4E4EB; }
  .x2-doc .ln i.fill { flex: 1; width: auto; min-width: 12px; }
  .x2-doc .ln.scan { background: rgba(61,59,243,.07); }
  .x2-doc mark { color: var(--indigo); padding: 0 2px; margin: 0 -1px; border-radius: 3px; background: linear-gradient(var(--indigo-soft), var(--indigo-soft)) no-repeat left / 100% 100%; transition: background-size .6s cubic-bezier(.4,0,.2,1), color .3s ease; }
  .x2-doc.unread mark { background-size: 0% 100%; color: inherit; }
  .x2 .x2-doc[data-pending] { transform: translateY(4px); }
  /* what was read, carried into the chain */
  .x2-wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
  .x2-wire [data-wire] { fill: none; stroke: var(--indigo); stroke-width: 1.8; stroke-linecap: round; transition: opacity .35s ease; }
  .x2-wire [data-wire-end] { fill: var(--indigo); transition: opacity .35s ease; }
  .x2 .x2-wire [data-pending] { opacity: 0; }
  @media (max-width: 1180px) {
    .x2-long { display: none; }
    .x2-win.cmp .x2-top { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .x2-lane-top { flex-direction: column-reverse; align-items: stretch; gap: 2px; }
    .x2-lane-h { margin-bottom: 6px; }
    .x2-win.cmp .x2-path .link { padding-block: 2px; }
    .x2-lane.l { gap: 6px; }
    .x2-lane.g { padding-right: 14px; } .x2-lane.l { padding-left: 14px; }
    .x2-doc { font-size: 11px; padding: 6px 10px 7px; gap: 4px; }
  }
  @media (max-width: 560px) {
    .x2-win.cmp .x2-top { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
    .x2-lane.g { padding-right: 0; }
    .x2-lane.l { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .x2-wire [data-wire], .x2-wire [data-wire-end] { display: none; }
    /* phones read top to bottom: the graph, then the page the model reads, then the result */
    .x2-lane-top { display: contents; }
    .x2-lane.l .x2-lane-h { order: 1; margin: 0; }
    .x2-lane.l .x2-doc { order: 2; margin-top: 0; }
    .x2-lane.l .x2-verdict { order: 3; align-self: flex-end; }
  }

  /* ---------- stable 2.23 · worked example: the text above and below the screens gets the same air as the rest of the page ---------- */
  .x2 .sec-head { margin-bottom: clamp(28px, 4vh, 38px); }
  .x2 .ex-foot { margin-top: clamp(26px, 3.6vh, 36px); column-gap: 44px; }
  .x2 .ex-props { column-gap: 22px; }
  @media (min-width: 901px) and (max-height: 880px) {
    .x2 .sec-head { margin-bottom: 26px; }
    .x2 .ex-foot { margin-top: 24px; }
    /* the height comes back where nobody sees it: a pixel per table row, and the section's outer padding */
    .sec.x2 { padding-block: 20px 18px; }
    .x2-row { padding-block: 3px; }
  }

  /* ---------- stable 2.24 · worked example: one graph, two lenses ---------- */
  .lens { position: relative; background: #FAFAFA; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 28px 60px -42px rgba(30,28,120,.35); transition: box-shadow .45s ease; }
  .lens.cm { box-shadow: 0 0 0 1.5px var(--indigo), 0 30px 64px -38px rgba(61,59,243,.42); }
  .lens-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .lens-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: #F2F2F5; box-shadow: inset 0 0 0 1px var(--line); }
  .lens-switch button { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: var(--sub); background: none; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
  .lens-switch button:hover { color: var(--ink); }
  .lens-switch button[aria-pressed="true"] { background: #FAFAFA; color: var(--ink); box-shadow: 0 1px 2px rgba(10,10,10,.08), 0 0 0 1px var(--line-2); }
  .lens.cm .lens-switch button[data-mode="cm"] { color: var(--indigo); }
  .lens-key { display: inline-flex; align-items: center; font-weight: 400; font-size: 12px; color: var(--sub); }
  .lens-key .kg { margin-left: 2px; } .lens-key .kl { margin-left: 4px; }
  .lens-q { display: flex; align-items: center; gap: 12px; }
  .lens-in { font-family: var(--mono); font-size: 13px; color: var(--ink); }
  .lens-canvas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 210px); }
  /* the map: one graph, laid out once; each lens lights a different part of it */
  .lens-map { position: relative; display: grid; grid-template-columns: auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto; grid-template-rows: auto auto auto auto; grid-template-areas: "lg lg lg lg lg" "n0 e1 n1 e2 n2" "nl rd rd rd v" "ls rd rd rd n3"; align-items: center; padding: 18px 20px 20px; }
  .lens .lane-h { display: flex; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); white-space: nowrap; }
  .lens .lane-h.lg { grid-area: lg; margin-bottom: 14px; }
  .lens.nm .lane-h.lg { color: #8A8A92; }
  .lens.cm .o-nm, .lens.nm .o-cm { display: none; }
  .lens .n { justify-self: start; display: grid; grid-template-columns: 9px auto; column-gap: 9px; align-items: center; padding: 7px 12px 7px 10px; border-radius: 12px; background: #FAFAFA; box-shadow: inset 0 0 0 1px var(--line-2); transition: opacity .4s ease, filter .4s ease, box-shadow .4s ease; }
  .lens .n i { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--indigo); }
  .lens .n b { font-weight: 500; font-size: 13px; line-height: 1.3; white-space: nowrap; }
  .lens .n small { font-family: var(--mono); font-size: 11px; line-height: 1.3; color: var(--sub); white-space: nowrap; }
  .lens .n.hit b { color: var(--bad); }
  .lens .n.hit i { background: var(--bad); box-shadow: 0 0 0 3px rgba(136,19,55,.14); }
  .lens .n.hit { box-shadow: inset 0 0 0 1px rgba(136,19,55,.28); }
  .lens .n0 { grid-area: n0; } .lens .n1 { grid-area: n1; } .lens .n2 { grid-area: n2; } .lens .n3 { grid-area: n3; align-self: start; }
  .lens .e { position: relative; align-self: stretch; transition: opacity .4s ease, filter .4s ease; }
  .lens .e1 { grid-area: e1; } .lens .e2 { grid-area: e2; }
  .lens .e::before { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px; background: var(--indigo); }
  .lens .e em, .lens .v em, .lens .nl em { position: absolute; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--sub); white-space: nowrap; }
  .lens .e em { left: 50%; bottom: calc(50% + 6px); transform: translateX(-50%); }
  /* the link read from text: dashed, and it lines up with the node dots above and below */
  .lens .v { grid-area: v; position: relative; justify-self: stretch; align-self: stretch; min-height: 46px; transition: opacity .4s ease, filter .4s ease; }
  .lens .v::before { content: ""; position: absolute; left: 14.25px; top: 0; bottom: 0; width: 1.5px; background: repeating-linear-gradient(180deg, var(--indigo) 0 3px, transparent 3px 6px); }
  .lens .v em { left: 26px; top: 50%; transform: translateY(-50%); color: var(--indigo); }
  /* what name matching does: the name against a list */
  .lens .nl { grid-area: nl; position: relative; justify-self: stretch; align-self: stretch; min-height: 46px; }
  .lens .nl::before { content: ""; position: absolute; left: 14.25px; top: 0; bottom: 0; width: 1.5px; background: repeating-linear-gradient(180deg, #B8B8BE 0 2px, transparent 2px 5px); }
  .lens .nl em { left: 26px; top: 50%; transform: translateY(-50%); }
  .lens .ls { grid-area: ls; align-self: start; }
  .lens .ls i { background: #A2A2AA; box-shadow: inset 0 0 0 2px #A2A2AA; }
  .lens .n0 i { transition: box-shadow .4s ease; }
  .lens.nm .n0 i { box-shadow: inset 0 0 0 2px #A2A2AA; }
  .lens .nm-only { transition: opacity .4s ease; }
  .lens.cm .nm-only { opacity: 0; visibility: hidden; }
  /* the reader: the page the language model reads */
  .lens .rd { grid-area: rd; justify-self: center; align-self: end; width: min(100%, 300px); margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
  .lens .rd .lane-h { transition: opacity .4s ease, filter .4s ease; }
  .lens .rd-cap { margin: 0; display: grid; gap: 3px; font-size: 12px; line-height: 1.35; color: var(--ink); }
  .lens .rd-cap .x2-k { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
  .lens.cm .rd-cap .o-cm { font-weight: 500; }
  .lens.nm .rd-cap .o-nm { color: var(--sub); }
  .lens-wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .lens-wire [data-beam] { fill: none; stroke: var(--indigo); stroke-width: 1.8; stroke-linecap: round; transition: opacity .4s ease; }
  .lens-wire [data-beam-end] { fill: var(--indigo); transition: opacity .4s ease; }
  /* the ghost: what a lens does not see stays on the map, faded */
  .lens.nm .cmx, .lens .cmx[data-pending] { opacity: .16; filter: grayscale(1); }
  .lens.nm .lens-wire .cmx, .lens .lens-wire .cmx[data-pending] { opacity: .12; }
  .lens .x2-doc[data-pending] { transform: none; }
  /* the result */
  .lens-result { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; text-align: right; padding: 18px 20px; border-left: 1px solid var(--line); }
  .lens-result .rs > div { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; transition: opacity .4s ease, transform .4s ease; }
  .lens-result .rs > div[data-pending] { opacity: 0; transform: translateY(4px); filter: none; }
  .lens .r-word { font-size: clamp(34px, 3.3vw, 50px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
  .lens.nm .r-word { color: #A2A2AA; }
  .lens.cm .r-word { color: var(--indigo); }
  .lens .r-find { margin: 0; font-size: 13px; line-height: 1.35; color: var(--sub); max-width: 22ch; }
  .lens.cm .r-find { color: var(--bad); font-weight: 500; }
  /* one small table instead of two: the name-match row and the cmpliance row */
  .lens-diff { display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 18px; padding: 12px 20px 14px; border-top: 1px solid var(--line); background: #FBFBFC; font-size: 13px; line-height: 1.4; }
  .lens-diff .dg { display: contents; }
  .lens-diff .dt { font: 500 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding-bottom: 6px; align-self: end; }
  .lens-diff .d-nm, .lens-diff .d-cm { padding-block: 4px; transition: color .4s ease; }
  .lens-diff .dlg span { font-size: 12px; color: var(--sub); }
  .lens-diff .d-nm { color: var(--faint); }
  .lens-diff .d-cm { color: var(--ink); font-weight: 500; }
  .lens-diff .d-cm.m { font-family: var(--mono); font-size: 12px; font-weight: 400; }
  .lens.nm .lens-diff .d-nm { color: var(--ink); }
  .lens.nm .lens-diff .d-cm { color: var(--faint); font-weight: 400; }
  .lens.cm .lens-diff .dlg .d-cm { color: var(--indigo); font-weight: 500; }
  .lens.nm .lens-diff .dlg .d-nm { color: var(--ink); font-weight: 500; }
  @media (max-width: 1180px) {
    .lens-canvas { grid-template-columns: minmax(0, 1fr) 160px; }
    .lens-map { padding: 16px 14px 18px; }
    .lens .rd { width: min(100%, 250px); }
    .lens .n b { font-size: 13px; }
    .lens-diff { grid-template-columns: 84px repeat(4, minmax(0, 1fr)); column-gap: 14px; padding-inline: 14px; font-size: 12px; }
  }
  @media (min-width: 901px) and (max-height: 880px) {
    .lens-bar { padding-block: 7px; }
    .lens-map { padding-block: 12px 14px; }
    .lens .lane-h.lg { margin-bottom: 10px; }
    .lens .rd { margin-top: 16px; gap: 6px; }
    .lens-result { padding-block: 12px; }
    .lens-diff { padding-block: 8px 10px; }
    .lens-diff .d-nm, .lens-diff .d-cm { padding-block: 3px; }
  }
  @media (max-width: 900px) {
    .lens-canvas { grid-template-columns: minmax(0, 1fr); }
    .lens-result { border-left: 0; border-top: 1px solid var(--line); flex-direction: row; justify-content: space-between; align-items: center; }
    .lens-result .rs > div { align-items: flex-end; }
  }
  @media (max-width: 640px) {
    /* phones: the graph runs top to bottom, then the report, then the result */
    .lens-map { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lg" "n0" "nl" "ls" "e1" "n1" "e2" "n2" "v" "n3" "rd"; }
    .lens.cm .nm-only { display: none; }
    .lens .e { min-height: 30px; }
    .lens .e::before { left: 14.25px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
    .lens .e em { left: 26px; bottom: auto; top: 50%; transform: translateY(-50%); }
    .lens .v, .lens .nl { min-height: 34px; }
    .lens .rd { justify-self: stretch; width: auto; margin: 16px 0 0; }
    .lens-wire { display: none; }
    .lens-bar .lens-switch { width: 100%; }
    .lens-switch button { flex: 1; justify-content: center; }
    .lens-key { display: none; }
    .lens-q { flex-wrap: wrap; row-gap: 2px; }
    .lens-diff { display: block; }
    .lens-diff .dg { display: block; padding-block: 8px; border-top: 1px solid var(--line); }
    .lens-diff .dg:first-child { display: none; }
    .lens-diff .dg:nth-child(2) { border-top: 0; }
    .lens-diff .d-nm, .lens-diff .d-cm { display: block; padding: 2px 0; }
    .lens-diff .d-nm::before, .lens-diff .d-cm::before { content: attr(data-sys) " · "; font-weight: 400; color: var(--faint); }
  }

  /* ---------- stable 2.25 · worked example: a compact, balanced map; a calmer table ---------- */
  /* the map sits as one block: links have a natural length instead of stretching to the edges */
  .lens-canvas { grid-template-columns: minmax(0, 1fr) minmax(190px, 250px); }
  .lens-map { grid-template-columns: auto minmax(64px, 180px) auto minmax(64px, 180px) auto; justify-content: center; }
  /* the report sits lower left, under the chain's start, so the line from it crosses the map */
  .lens .rd { justify-self: start; }
  .lens .r-find { text-wrap: balance; max-width: 24ch; }
  .lens-q .x2-ex { padding-left: 12px; border-left: 1px solid var(--line-2); }
  /* the table: columns sized to what they hold, balanced line breaks, the name-match row quieter */
  .lens-diff { grid-template-columns: 96px minmax(0, .7fr) minmax(0, 1.45fr) minmax(0, 1.3fr) minmax(0, 1.2fr); }
  .lens-diff .d-nm, .lens-diff .d-cm { text-wrap: balance; }
  .lens-diff .d-nm { font-size: 12px; }
  /* under the window: the section's line, and the three notes beside it */
  .x2 .ex-foot2 { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); align-items: start; column-gap: 48px; }
  .x2 .ex-thesis { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); text-wrap: balance; }
  .x2 .ex-thesis b { font-weight: 500; }
  @media (max-width: 1180px) {
    .lens-canvas { grid-template-columns: minmax(0, 1fr) 170px; }
    .lens-map { grid-template-columns: auto minmax(40px, 140px) auto minmax(40px, 140px) auto; }
    .lens-diff { grid-template-columns: 84px minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1.25fr) minmax(0, 1.2fr); }
  }
  @media (max-width: 900px) {
    .lens-canvas { grid-template-columns: minmax(0, 1fr); }
    .x2 .ex-foot2 { grid-template-columns: 1fr; row-gap: 14px; }
  }
  @media (max-width: 640px) {
    .lens-map { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
    .lens .rd { justify-self: stretch; }
  }
  /* the switch keeps a focus ring for keyboard users, drawn inside the pill so it never bulges out of the switch */
  .lens-switch button:focus-visible { outline: 1.5px solid var(--indigo); outline-offset: -3px; border-radius: 999px; }
  /* the bar now holds only "Example assessment": no divider in front of it */
  .lens-q .x2-ex:first-child { padding-left: 0; border-left: 0; }

  .a-rec { visibility: hidden; font-family: var(--mono); font-size: .78cqw; color: var(--indigo); text-align: center; }
  .a-rec.on { visibility: visible; }
  .phone-case .a-rec { font-size: 11px; margin-top: 8px; }

  /* ---------- logo: exactly the repo's lockups ---------- */
  /* site header and footer (Nav.tsx, Footer.tsx): inline-flex, baseline, gap 4px; 1.4rem / 0.875rem from 640px, 1.2rem / 0.68rem below */
  .brand { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; line-height: 1; text-decoration: none; min-width: 0; }
  .brand b { font-weight: 600; font-size: 1.4rem; letter-spacing: -0.025em; line-height: 1; color: #3D3BF3; flex: none; }
  .brand span { font-weight: 600; font-size: .875rem; line-height: 1.25rem; letter-spacing: normal; color: #5A5A5A; }
  @media (max-width: 639px) { .brand b { font-size: 1.2rem; } .brand span { font-size: .68rem; line-height: 1; } }
  @media (max-width: 700px) { .nav .brand span { display: inline; } }
  /* the product sidebar (app-sidebar.tsx): rings mark size-6, then cmpliance 15.5px and the tagline 10.5px italic in primary/80, on a 1240px frame */
  .a-logo { gap: .806cqw; align-items: center; }
  .a-logo svg.rings { width: 1.935cqw; height: 1.935cqw; color: #3D3BF3; flex: none; }
  .a-logo > span { line-height: 1; }
  .a-logo b { font-weight: 600; font-size: 1.25cqw; letter-spacing: -0.015em; color: #0A0A0A; line-height: 1; }
  .a-logo i { font-style: italic; font-weight: 400; font-size: .847cqw; letter-spacing: .005em; color: rgba(61,59,243,.8); margin-top: .16cqw; line-height: 1; }

  /* ---------- stable 2.66 · one card system: two corners, three depths ---------- */
  /* corners: 18 px for every card that sits on the page (the hero's), 12 px for anything smaller or inside a card;
     pills and buttons stay round, and controls inside the product windows keep the product's own small corners.
     depths: hairline (inside cards; the articles at rest), raised (small cards on the page), floating (the hero's own shadow). */
  html:root {
    --depth-raise: 0 1px 2px rgba(10,10,10,.03), 0 12px 28px -18px rgba(30,28,120,.30);
    --depth-float: 0 2px 4px rgba(10,10,10,.03), 0 24px 48px -16px rgba(30,28,120,.18), 0 64px 96px -40px rgba(61,59,243,.22);
  }
  /* floating: every product window, record and panel */
  main #manifesto .mf-rec, main #chain .ch-card, main #workforce .wf-console, main #tour .tr-win, main #example .lens,
  main #calibration .cl-case, main #calibration .cl-next, main #calibration .cal-entry, main #vdr .vd-panel, main #vdr .vd-room { border-radius: 18px; }
  main #chain .ch-card, main #workforce .wf-console, main #tour .tr-win, main #example .lens,
  main #calibration .cal-entry, main #vdr .vd-panel { box-shadow: var(--shadow-product); }
  main #example .lens.cm { box-shadow: 0 0 0 1.5px var(--indigo), var(--depth-float); }
  /* raised: small cards that sit on the page */
  main #chain .ch-node { border-radius: 12px; box-shadow: 0 0 0 1px var(--line-2), var(--depth-raise); }
  main #chain .ch-node.sanct.hot { box-shadow: 0 0 0 1.5px rgba(136,19,55,.55), 0 1px 2px rgba(10,10,10,.03), 0 12px 28px -18px rgba(136,19,55,.45); }
  main #chain .ch-node.sanct.unseen { box-shadow: 0 0 0 1px var(--line-2); }
  main #how .hw-card { border-radius: 12px; box-shadow: 0 0 0 1px var(--line), var(--depth-raise); }
  main #how .hw-st.on .hw-card { box-shadow: 0 0 0 1.5px var(--indigo), 0 1px 2px rgba(10,10,10,.03), 0 12px 28px -16px rgba(61,59,243,.42); }
  main #tour .tr-call { box-shadow: 0 0 0 1px var(--line-2), var(--depth-raise); }
  main #tour .tr-rail button[aria-current="step"] { box-shadow: 0 0 0 1px var(--line), var(--depth-raise); }
  /* the evidence pack is one lit object wherever it appears (the shift, the architecture, the data room): one corner, one glow */
  main #shift .sh-pack { box-shadow: 0 0 0 1px rgba(61,59,243,.25), 0 12px 30px -14px rgba(61,59,243,.4); }
  main #shift .sh-pack.sealed { box-shadow: 0 0 0 1px rgba(61,59,243,.5), 0 12px 30px -14px rgba(61,59,243,.55); }
  main .core .pack { box-shadow: inset 0 0 0 1px rgba(169,168,255,.3), 0 12px 30px -14px rgba(61,59,243,.55); }
  main .core .pack.lit { box-shadow: inset 0 0 0 1.5px #A9A8FF, 0 0 44px -6px rgba(109,107,255,.95); }
  main #vdr .vd-pack { box-shadow: inset 0 0 0 1px rgba(169,168,255,.3), 0 12px 30px -14px rgba(61,59,243,.55); }
  main #vdr .vd-pack.sealed { box-shadow: inset 0 0 0 1px rgba(169,168,255,.7), 0 12px 30px -14px rgba(61,59,243,.75); }
  /* hairline: items inside a card */
  main #tour .tr-item, main #example .x2-doc, main #vdr .vd-panel .access { border-radius: 12px; }
  main .core .pack { border-radius: 12px; }
  /* lifecycles: the step names fit; "Decision records hash-chained" was cut off with an ellipsis since 2.61 */
  @media (min-width: 701px) { main #workforce .wf-console { --wf-run: 186px minmax(0, 1fr) 128px; } }
  @media (min-width: 901px) and (max-width: 1180px) { main #workforce .wf-console { --wf-run: 176px minmax(0, 1fr) 116px; --wf-cols: minmax(0, 1fr) minmax(0, 1.3fr); } }
  /* motion settles, it doesn't bounce: the four check marks use the page's entrance curve */
  main #shift .sh-art .sh-pack .ok { transition: opacity .3s ease, transform .35s cubic-bezier(.3,.7,.2,1); }
  main #shift .sh-res i::after { transition: border-color .4s ease, transform .45s cubic-bezier(.3,.7,.2,1); }
  main #workforce .wf-pk svg { transition: opacity .3s ease, transform .35s cubic-bezier(.3,.7,.2,1); }
  main #vdr .vd-fig .vd-pack .vd-ok { transition: opacity .3s ease, transform .35s cubic-bezier(.3,.7,.2,1); }
  /* ---------- end stable 2.66 ---------- */

  /* ---------- stable 2.67 · the audit's defects ---------- */
  /* tour, 901–1180 px: the queue has room for its status and reviewer; the button stays on one line */
  @media (min-width: 901px) and (max-width: 1180px) { main #tour .tr-body { grid-template-columns: 216px minmax(0, 1fr); } }
  main #tour .tr-list .new { white-space: nowrap; }
  /* chain on tablets: the drawing grows with its nodes, as it does on phones since 2.64 */
  @media (max-width: 900px) { #chain .ch-fig { height: auto !important; } }
  main #chain .ch-why p { max-width: 92ch; }
  /* architecture at 380 px and below: layer names break onto two lines instead of running into each other */
  @media (max-width: 380px) {
    main .core:not(.cal-core) .zone b { white-space: normal; max-width: 6.6em; margin-inline: auto; line-height: 1.2; }
    main .core .lid-lbl b { display: block; }
    main .core .lid-lbl { transform: translateY(-14px); }
    main .core .pack { white-space: normal; }
  }
  /* nav: the tagline shows only where it fits beside the button */
  @media (max-width: 372px) { .nav .brand span { display: none; } }
  /* footer links look like the rest of the page */
  footer .foot-grid a { text-decoration: none; color: var(--ink); transition: color .2s ease; }
  footer .foot-grid a:hover { color: var(--indigo); }
  /* lifecycles: room for the longest step name in the fallback font as well */
  @media (min-width: 701px) { main #workforce .wf-console { --wf-run: 196px minmax(0, 1fr) 128px; } }
  @media (min-width: 901px) and (max-width: 1180px) { main #workforce .wf-console { --wf-run: 188px minmax(0, 1fr) 116px; --wf-cols: minmax(0, 1fr) minmax(0, 1.36fr); } }
  /* early access on tablets: the middle cohort label wraps instead of reaching the last one */
  @media (min-width: 561px) and (max-width: 900px) { main #early-access .ea2-coh span { display: block; white-space: normal; max-width: 10em; } }
  /* hero panel: the timeline column fits its transitions, the tenant name wraps, the evidence count is readable */
  .crop .a-cols { grid-template-columns: 1.42fr 1.15fr 1.15fr 1fr; }
  .crop .a-ten b { white-space: normal; }
  .crop .a-cols h6 span { color: #6B6B73; }
  /* ---------- end stable 2.67 ---------- */

  /* ---------- stable 2.68 · what the larger labels need ---------- */
  /* tour on narrow phones: the window is tall enough for the history and the call bar together */
  @media (max-width: 380px) { main #tour .tr-win { height: 606px; } }
  /* lifecycles at 901–1180 px: the step name fits at 13 px in either font */
  @media (min-width: 901px) and (max-width: 1180px) { main #workforce .wf-console { --wf-run: 198px minmax(0, 1fr) 116px; } }
  /* architecture: layer names break onto two lines on every phone, not only the narrowest */
  @media (max-width: 440px) { main .core:not(.cal-core) .zone b { white-space: normal; max-width: 6.6em; margin-inline: auto; line-height: 1.2; } }
  /* the early-access statement sits on the scale (it inherited 17 px) */
  main #early-access p.big { font-size: 18px; }
  /* ---------- end stable 2.68 ---------- */

  /* ---------- stable 2.73 · the time axis is named in the chart's header row ---------- */
  .ea2-cap .ea2-xs { display: none; }
  @media (max-width: 560px) { .ea2-cap .ea2-xl { display: none; } .ea2-cap .ea2-xs { display: inline; } }
  /* ---------- end stable 2.73 ---------- */

  /* ---------- stable 2.74 · the manifesto as one statement ---------- */
  main #manifesto .mf-statement { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 500; margin: 0 0 clamp(40px, 5.5vh, 64px); text-align: center; max-width: 20ch; margin-inline: auto; }
  main #manifesto .mf-statement span { display: block; text-wrap: balance; }
  main #manifesto .mf-statement em { font-style: normal; color: var(--indigo); }
  main #manifesto .mf-grid { align-items: center; }
  main #manifesto .mf-docs, main #manifesto .mf-rec { margin-top: 0; }
  @media (max-width: 900px) { main #manifesto .mf-right { margin-top: 28px; } }
  /* the reviewer row is a divider, not a pill (its 999 px corners curved the top line) */
  main #manifesto .mf-rec .who { border-radius: 0; }
  /* ---------- end stable 2.74 ---------- */

  /* ---------- stable 2.77 · swipes on phones ---------- */
  .swipe-dots { display: none; }
  @media (max-width: 700px) {
    .swipe:not(.swipe-in) { display: flex !important; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
      margin-inline: -16px; padding: 4px 16px 26px; margin-bottom: -16px; scroll-padding-inline: 16px; scrollbar-width: none; position: relative; }
    .swipe::-webkit-scrollbar { display: none; }
    .swipe:not(.swipe-in) > .swipe-i { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
    .swipe-s:not(.swipe-in) > .swipe-i { flex-basis: 72%; }
    .swipe-dots:not(.swipe-in) { display: flex; justify-content: center; gap: 0; margin-top: 4px; }
    .swipe-dots button { width: 24px; height: 24px; padding: 0; margin: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
    .swipe-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(10,10,10,.2); transition: width .25s ease, background .25s ease; }
    .swipe-dots button[aria-current]::before { width: 18px; background: var(--indigo); }
    .swipe-dots button:focus-visible { outline: 2px solid var(--indigo); outline-offset: -3px; border-radius: 999px; }
    /* how it works: each step is a slide; the dots replace the progress line */
    #how .hw-steps.swipe { align-items: stretch; }
    #how .hw-steps.swipe > .hw-st { gap: 10px; display: flex; flex-direction: column; }
    #how .hw-steps.swipe .hw-card { flex: 1; }
    /* the example's feature row: three small cards */
    #example .ex-props.swipe > span { background: #FAFAFA; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); padding: 14px 16px; }
  }
  @media (max-width: 640px) {
    /* the comparison swipes inside its own card */
    #example .lens-diff.swipe-in { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: 14px; padding: 12px 14px 14px; position: relative; }
    #example .lens-diff.swipe-in > .swipe-i { flex: 0 0 76%; min-width: 0; scroll-snap-align: start; border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); padding: 12px 14px; background: #FAFAFA; }
    .swipe-dots.swipe-in { display: flex; justify-content: center; margin: -6px 0 6px; }
  }
  /* ---------- end stable 2.77 ---------- */

  /* ---------- stable 2.80 · the footer as on the live site ---------- */
  footer.g { background: var(--bg); border-top: 1px solid var(--line); }
  footer .foot-grid p { font-size: 14px; line-height: 1.62; color: #6B6B73; max-width: none; }
  footer .foot-grid h4 { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); margin: 0 0 18px; }
  footer .foot-grid ul { gap: 14px; }
  footer .foot-grid li a { font-size: 14px; line-height: 20px; color: #6B6B73; }
  footer .foot-grid li a:hover { color: var(--ink); }
  .foot-social { display: flex; align-items: center; gap: 10px; margin: 18px 0 0 -4px; }
  footer .foot-grid .foot-social a { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #6B6B73; transition: color .2s ease; }
  footer .foot-grid .foot-social a:hover { color: var(--indigo); }
  .foot-social a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
  .foot-social svg { width: 20px; height: 20px; }
  .foot-social .yt svg { width: 24px; height: 24px; }
  footer .foot-base { font-size: 12px; color: #6B6B73; align-items: center; }
  footer .foot-base a { color: inherit; text-decoration: none; transition: color .2s ease; }
  footer .foot-base a:hover { color: var(--ink); }
  /* ---------- end stable 2.80 ---------- */

  /* ---------- stable 2.81 · the data room's drawing is the centrepiece ---------- */
  .vd-room.vd-big .vd-fig { min-height: 292px; }
  .vd-room.vd-big .vd-steps { position: absolute; inset: 0; display: block; margin: 0; padding: 0; border: 0; pointer-events: none; }
  .vd-room.vd-big .vd-steps > div { position: absolute; transform: translateX(-50%); text-align: center; font-size: 13px; line-height: 1.3; color: #E4E4EB; }
  .vd-room.vd-big .vd-steps > div .m { justify-content: center; margin-bottom: 4px; }
  .vd-room.vd-big .vd-steps > div > span:not(.m) { color: #A6A6AF; font-size: 12px; margin-top: 3px; }
  .vd-room.vd-big .vd-steps > div.on { color: #FAFAFA; }
  .vd-room.vd-big .vd-steps > div.on > span:not(.m) { color: #C9C9D0; }
  .vd-room.vd-big .vd-fig .vd-pack { padding: 9px 13px 9px 11px; }
  /* ---------- end stable 2.81 ---------- */

  /* ---------- stable 2.82 · featured articles: one lead, two beside it ---------- */
  @media (min-width: 901px) {
    .articles2.ed { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
    .articles2.ed .art-side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; min-width: 0; }
    .art2.art-row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: start; }
    .art2.art-row .art2-cover { margin: 18px 0 18px 18px; border: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
    .art2.art-row .art2-body { padding: 18px 20px 18px 18px; height: 100%; box-sizing: border-box; }
  }
  .art2.art-lead .art2-body { padding: 22px 26px 22px; gap: 10px; }
  .art2.art-lead .art2-body h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.012em; }
  .art2.art-lead .art2-body > p { font-size: 15px; line-height: 1.55; }
  .art-quote { margin: 4px 0 0; padding: 1px 0 1px 16px; border-left: 2px solid var(--indigo); font-size: 15px; line-height: 1.5; color: var(--ink); }
  @media (min-width: 901px) and (max-width: 1180px) {
    .art2.art-lead .art2-cover { aspect-ratio: 1200 / 540; }
    .art2.art-lead .art2-body { padding: 18px 22px; gap: 8px; }
    .art2.art-lead .art2-body h3 { font-size: 18px; }
    .art2.art-lead .art2-body > p, .art-quote { font-size: 13px; }
  }
  @media (max-width: 900px) {
    .articles2.ed .art-side { display: grid; gap: 18px; }
  }
  @media (min-width: 701px) and (max-width: 900px) {
    .articles2.ed .art-side { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 700px) {
    /* phones keep the swipe: the side column steps aside so all three are slides */
    #insights .articles2.swipe .art-side { display: contents; }
    #insights .articles2.swipe .swipe-i { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
    .art2.art-lead .art2-body h3 { font-size: 18px; }
    .art2.art-lead .art2-body > p, .art-quote { font-size: 13px; }
  }
  /* ---------- end stable 2.82 ---------- */

  /* ---------- stable 2.83 · the footer credit as on the live site ---------- */
  footer .foot-base a.foot-by { color: var(--ink); font-weight: 500; text-underline-offset: 4px; }
  footer .foot-base a.foot-by:hover { color: var(--ink); text-decoration: underline; }
  /* ---------- end stable 2.83 ---------- */

  /* ---------- stable 2.84 · the data room as one picture ---------- */
  @media (min-width: 1000px) {
    main #vdr .vd-grid { grid-template-columns: minmax(0, 1fr) clamp(410px, 34vw, 480px); column-gap: clamp(108px, 11vw, 158px); padding: 22px 24px; border-radius: 20px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); align-items: stretch; }
    main #vdr .vd-room { padding: 0; background: none; box-shadow: none; border-radius: 0; }
    main #vdr .vd-room.vd-big .vd-fig { min-height: 292px; }
    main #vdr .vd-fig .lb.corner { transform: none; }
    main #vdr .vd-room.vd-big .vd-steps > div { text-wrap: balance; }
    main #vdr .vd-room.vd-big .vd-steps > div > span:not(.m) { display: block; }   /* the picture has room for every step's words */
    main #vdr .vd-fig .vd-pack em.id { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: #C9C9D0; }
  }
  @media (min-width: 1000px) and (max-width: 1180px) {
    main #vdr .vd-grid { padding: 18px 18px; }
  }
  /* the use cases are words, not buttons */
  @media (min-width: 901px) {
    main #vdr .usecases { gap: 0; }
    main #vdr .usecases span { padding: 0; box-shadow: none; border-radius: 0; color: #A6A6AF; }
    main #vdr .usecases span + span::before { content: "·"; margin: 0 10px; color: #74747D; }
  }
  /* ---------- end stable 2.84 ---------- */

  /* ---------- stable 2.86 · straight row separators in the data room card ---------- */
  main #vdr .vd-panel .access { position: relative; border-top-color: transparent; }   /* the border keeps its 1 px, so nothing moves */
  main #vdr .vd-panel .access::before { content: ""; position: absolute; top: -1px; left: 6px; right: 6px; height: 1px; background: var(--line); pointer-events: none; }
  /* ---------- end stable 2.86 ---------- */

  /* ---------- stable 2.87 · the verification card in light grey, so it no longer outshines the picture ---------- */
  main #vdr .vd-panel { --card: #E8E8EE; --sub: #52525A; --line: rgba(10,10,10,.10); --indigo-soft: #DADAF6; }
  main #vdr.dark .pc.verify .label { color: #5A5A62; }
  /* ---------- end stable 2.87 ---------- */

  /* ---------- stable 2.88 · every nav and footer link at least 24 px tall; padding balanced by negative margin, so nothing moves ---------- */
  header .nav-links a { padding-block: .5px; margin-block: -.5px; }
  @media (min-width: 561px) {   /* phones already give these links 5 px of padding */
    footer .foot-grid li a { padding-block: 1px; margin-block: -1px; }
    footer .foot-base a { padding-block: 2.5px; margin-block: -2.5px; }
  }
  @media (max-width: 900px) { header .brand { padding-block: 2.5px; margin-block: -2.5px; } }                        /* the lockup is smaller here */
  @media (min-width: 561px) and (max-width: 900px) { footer .brand { padding-block: 2.5px; margin-block: -2.5px; } }
  /* ---------- end stable 2.88 ---------- */

  /* ---------- stable 2.89 · the worked example closes on its thesis ---------- */
  .x2 .ex-foot2 { grid-template-columns: minmax(0, 1fr); }
  .x2 .ex-thesis { font-size: 18px; line-height: 1.35; letter-spacing: -0.005em; }
  @media (max-width: 700px) { .x2 .ex-thesis { font-size: 15px; } }
  /* ---------- end stable 2.89 ---------- */

  /* ---------- stable 2.90 · the sketch's note floats at the side instead of a bar across the top ---------- */
  .sk-note { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; transition: opacity .25s ease, transform .25s ease; }
  .sk-note.away { opacity: 0; transform: translateY(8px); pointer-events: none; }
  .sk-pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: rgba(10,10,10,.84); color: #F4F4F6; font: 500 11px/1 var(--mono); letter-spacing: .04em; cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px -8px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .sk-pill i { width: 6px; height: 6px; border-radius: 50%; background: #8F8DFF; }
  .sk-pill:hover { background: rgba(10,10,10,.94); }
  .sk-pill:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
  .sk-pop { width: min(340px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 12px; background: rgba(10,10,10,.92); color: #C9C9D0; font: 400 12px/1.5 var(--mono);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 16px 40px -12px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .sk-pop p { margin: 0; } .sk-pop p + p { margin-top: 8px; } .sk-pop b { color: #F4F4F6; font-weight: 500; }
  @media (prefers-reduced-motion: reduce) { .sk-note { transition: none; } }
  /* ---------- end stable 2.90 ---------- */

  /* ---------- stable 2.91 · the side articles' pictures fill their cards' height ---------- */
  @media (min-width: 901px) {
    .art2.art-row { grid-template-columns: minmax(0, 48%) minmax(0, 1fr); align-items: stretch; }
    .art2.art-row .art2-cover { aspect-ratio: auto; align-self: stretch; margin: 14px 0 14px 14px; }
  }
  @media (min-width: 901px) and (max-width: 1180px) {
    .art2.art-row { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }   /* the text keeps its width, so the section fits a laptop screen */
    /* the narrow frame keeps the sanctions chain's highlighted circle whole: its right edge sits just past the circle */
    .art2.art-row[href*="sanctions-exposure"] .art2-cover svg { position: absolute; top: 0; right: 0; width: auto; height: 100%; aspect-ratio: 1200 / 630; transform: translateX(33.3%); }
    .art2.art-row[href*="sanctions-exposure"]:hover .art2-cover svg { transform: translateX(33.3%) scale(1.035); }
  }
  /* ---------- end stable 2.91 ---------- */

  /* ---------- stable 2.95 · the work behind cmpliance: the line from 2017 ---------- */
  .nda.sec { padding-block: 0 clamp(40px, 5.6vh, 68px); }        /* part of the pricing chapter; the articles keep their gap */
  .nda-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 40px; }
  .nda-head h3 { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; line-height: 1.12; letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; max-width: 24ch; }   /* two lines, never “cmpliance” alone */
  .nda-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--sub); max-width: 46ch; }
  .nda-head a { color: var(--ink); font-weight: 500; text-decoration: none; }
  .nda-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .nda-k { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); }

  /* the line: 2017 on the left, the cmpliance mark today on the right, three deployments branching down from it */
  .nda-tl { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 176px; grid-template-rows: 40px auto; align-items: start; }
  .tl-line { grid-column: 1 / -1; grid-row: 1; align-self: center; position: relative; height: 2px; margin: 0 150px 0 8px; background: #DCDCE3; }
  .tl-line i { position: absolute; inset: 0; background: var(--indigo); transform-origin: left center; transform: scaleX(1); }
  .tl-start { grid-column: 1; grid-row: 1; align-self: center; position: relative; display: flex; align-items: center; gap: 10px; width: max-content; padding-right: 10px; background: var(--bg); }
  .tl-o { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--indigo); background: var(--bg); box-sizing: border-box; }
  .tl-start b { font: 500 13px/1 var(--mono); letter-spacing: .02em; color: var(--ink); }
  .tl-nodes { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 40px auto; column-gap: 28px; margin: 0; padding: 0 0 0 28px; list-style: none; }
  .tl-node { display: grid; grid-row: 1 / 3; grid-template-rows: subgrid; position: relative; min-width: 0; }
  .tl-dot { grid-row: 1; align-self: center; position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2px solid #C9C9D3; background: var(--bg); transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
  .tl-node.on .tl-dot { background: var(--indigo); border-color: var(--indigo); box-shadow: 0 0 0 6px rgba(61,59,243,.12); }
  .tl-card { grid-row: 2; position: relative; padding: 18px 0 0 24px; transition: opacity .45s ease, transform .45s ease; }
  .tl-card::before { content: ""; position: absolute; left: 6px; top: -6px; height: 26px; width: 2px; background: #DCDCE3; transition: background .35s ease; }   /* the branch */
  .tl-node.on .tl-card::before { background: var(--indigo); }
  .tl-node:not(.on) .tl-card { opacity: .35; transform: translateY(4px); }
  .tl-s { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink); max-width: 30ch; text-wrap: pretty; }
  .tl-nda { margin: 10px 0 0; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
  .tl-end { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; display: flex; align-items: center; gap: 12px; transition: opacity .5s ease, transform .5s ease; }
  .tl-end:not(.on) { opacity: .3; transform: translateX(-6px); }
  .tl-rings { width: 38px; height: 38px; color: var(--indigo); flex: none; }
  .tl-end span { display: flex; flex-direction: column; line-height: 1.1; }
  .tl-end b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--indigo); }
  .tl-end small { margin-top: 4px; font: 500 12px/1 var(--mono); letter-spacing: .02em; color: var(--sub); }

  .nda-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }
  .nda-foot p { margin: 0; max-width: 78ch; font-size: 13px; line-height: 1.5; color: var(--sub); }
  .nda-a { flex: none; padding-block: 3px; font-size: 14px; font-weight: 500; color: var(--indigo); text-decoration: none; white-space: nowrap; }
  .nda-a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .nda-a:focus-visible, .nda-head a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
  @media (min-width: 761px) and (max-width: 1180px) {
    .nda-tl { grid-template-columns: 80px minmax(0, 1fr) 150px; }
    .tl-line { margin-right: 130px; }
    .tl-nodes { column-gap: 20px; padding-left: 20px; }
    .tl-s { font-size: 15px; }
    .tl-end b { font-size: 19px; } .tl-rings { width: 32px; height: 32px; }
  }
  /* phones: the line runs downwards, 2017 at the top and cmpliance at the bottom */
  @media (max-width: 760px) {
    .nda-head { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 26px; }
    .nda-head h3 { font-size: 24px; }
    .nda-head p { font-size: 15px; }
    .nda-tl { grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; }
    .tl-line { grid-column: 1; grid-row: 1 / -1; justify-self: center; align-self: stretch; width: 2px; height: auto; margin: 7px 0 19px; }
    .tl-line i { transform-origin: center top; transform: scaleY(1); }
    .tl-start { grid-column: 1 / -1; grid-row: 1; padding: 0 0 6px; background: transparent; }
    .tl-nodes { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 22px; padding: 18px 0 22px; }
    .tl-node { display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: none; column-gap: 16px; }
    .tl-dot { grid-row: 1; grid-column: 1; align-self: start; margin-top: 1px; }
    .tl-card { grid-row: 1; grid-column: 2; padding: 0; }
    .tl-card::before { display: none; }
    .tl-node:not(.on) .tl-card { transform: translateX(4px); }
    .tl-end { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-left: -12px; }
    .tl-end:not(.on) { transform: translateY(-6px); }
    .tl-rings { width: 38px; height: 38px; }
    .nda-foot { flex-direction: column; align-items: flex-start; margin-top: 28px; }
  }
  @media (prefers-reduced-motion: reduce) { .tl-card, .tl-end, .tl-dot, .tl-card::before { transition: none; } }
  /* ---------- end stable 2.95 ---------- */

  /* ---------- stable 2.96 · the line arrives at the mark instead of touching it ---------- */
  @media (min-width: 761px) { .tl-end { justify-self: start; } .tl-line { margin-right: calc(176px + 18px); } }
  @media (min-width: 761px) and (max-width: 1180px) { .tl-line { margin-right: calc(150px + 18px); } }
  @media (max-width: 760px) { .tl-line { margin-bottom: calc(38px + 16px); } }
  /* ---------- end stable 2.96 ---------- */

  /* ---------- stable 2.97 · the line ends one ring-gap from the mark ---------- */
  @media (min-width: 1181px) { .tl-line { margin-right: calc(176px + 3.15px); } }                     /* visible gap = the mark's ring gap, 3.3 px */
  @media (min-width: 761px) and (max-width: 1180px) { .tl-line { margin-right: calc(150px + 2.6px); } } /* 2.8 px at the 32 px mark */
  @media (max-width: 760px) { .tl-line { margin-bottom: calc(38px + 2.05px); } }                      /* 3.8 px above the arch */
  /* ---------- end stable 2.97 ---------- */

  /* ---------- stable 2.98 · the line ends halfway between 2.96 and 2.97 ---------- */
  @media (min-width: 1181px) { .tl-line { margin-right: calc(176px + 10.57px); } }                    /* visible gap 10.8 px */
  @media (min-width: 761px) and (max-width: 1180px) { .tl-line { margin-right: calc(150px + 10.32px); } } /* 10.5 px */
  @media (max-width: 760px) { .tl-line { margin-bottom: calc(38px + 9.02px); } }                      /* 10.7 px above the arch */
  /* ---------- end stable 2.98 ---------- */

  /* ---------- stable 2.99 · the work behind cmpliance as a dark chapter (variation G) ---------- */
  /* the dark band: the block becomes a dark chapter and the line glows */
  main .nda.dark { padding-block: clamp(64px, 9vh, 104px); }
  #insights.sec { padding-top: clamp(52px, 7.2vh, 92px) !important; }
  .nda.dark .nda-head h3, .nda.dark .nda-head a, .nda.dark .tl-start b { color: #F4F4F6; }
  .nda.dark .nda-head p, .nda.dark .tl-end small, .nda.dark .nda-foot p { color: #A9A9B1; }
  .nda.dark .nda-k, .nda.dark .nda-a { color: #A4A3FA; }
  .nda.dark .tl-s { color: #E4E4EB; }
  .nda.dark .tl-nda { color: #8E8E97; }
  .nda.dark .tl-line { background: rgba(255,255,255,.14); margin-left: 96px; }
  .nda.dark .tl-line i { background: #8F8DFF; box-shadow: 0 0 14px rgba(143,141,255,.55); }
  .nda.dark .tl-start { background: transparent; }
  .nda.dark .tl-o { border-color: #A4A3FA; background: transparent; }
  .nda.dark .tl-dot { background: #0A0A0A; border-color: rgba(255,255,255,.3); }
  .nda.dark .tl-node.on .tl-dot { background: #8F8DFF; border-color: #8F8DFF; box-shadow: 0 0 0 6px rgba(143,141,255,.16), 0 0 18px rgba(143,141,255,.55); }
  .nda.dark .tl-card::before { background: rgba(255,255,255,.16); }
  .nda.dark .tl-node.on .tl-card::before { background: #8F8DFF; }
  .nda.dark .tl-rings { color: #A4A3FA; }
  .nda.dark .tl-end b { color: #C9C8FF; }
  .nda.dark .nda-foot { border-top-color: rgba(255,255,255,.12); }
  @media (max-width: 760px) { .nda.dark .tl-line { margin-left: 0; } }
  /* the large year: the year is the anchor the line runs from */
  @media (min-width: 761px) {
    .nda-tl { grid-template-columns: 196px minmax(0, 1fr) 176px; grid-template-rows: 76px auto; }
    .tl-nodes { grid-template-rows: 76px auto; }
    .tl-o { display: none; }
    .tl-start { padding-right: 18px; }
    .tl-start b { font: 400 68px/1 var(--sans); letter-spacing: -0.045em; color: var(--ink); }
  }
  @media (min-width: 761px) and (max-width: 1180px) { .nda-tl { grid-template-columns: 150px minmax(0, 1fr) 150px; } .tl-start b { font-size: 50px; } }
  .nda.dark .tl-start b { color: #F4F4F6; }
  @media (min-width: 761px) { .nda.dark .tl-line { margin-left: 196px; } }
  @media (min-width: 761px) and (max-width: 1180px) { .nda.dark .tl-line { margin-left: 150px; } }
  @media (min-width: 761px) { .tl-card::before { top: -24px; height: 44px; } }   /* the branch starts at the dot in the taller row */
  @media (min-width: 1181px) { .nda.dark .tl-line { margin-left: 147px; } }
  @media (min-width: 761px) and (max-width: 1180px) { .nda.dark .tl-line { margin-left: 113px; } }

  /* refinements: the year steps back from the headline; the call to action ends the line; the foot is a quiet note */
  @media (min-width: 761px) { .nda.dark .tl-start b { font-size: 64px; color: #D4D4DE; } }
  @media (min-width: 761px) and (max-width: 1180px) { .nda.dark .tl-start b { font-size: 48px; } }
  .tl-cta { grid-column: 3; grid-row: 2; justify-self: start; align-self: start; margin-top: var(--cta-top, 39px); margin-left: 50px; padding-block: 3px; font-size: 15px; font-weight: 500; color: #A4A3FA; text-decoration: none; white-space: nowrap; transition: opacity .5s ease; }
  .tl-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
  .tl-cta:focus-visible { outline: 2px solid #A4A3FA; outline-offset: 2px; border-radius: 4px; }
  .tl-end:not(.on) ~ .tl-cta { opacity: .3; }
  @media (min-width: 761px) { .nda-tl { column-gap: 28px; } }   /* a gutter between the deployments and the mark's column */
  @media (min-width: 761px) and (max-width: 1180px) { .tl-cta { margin-left: 44px; } }   /* under the wordmark at the 32 px mark */
  @media (min-width: 761px) and (max-width: 1180px) { .nda .tl-card { padding-left: 18px; } .nda .nda-k { letter-spacing: .03em; } }   /* labels stay on one line from 1000 px */
  .nda.dark .nda-foot { justify-content: flex-start; margin-top: 44px; }
  .nda.dark .nda-foot p { color: #8E8E97; font-size: 13px; }
  @media (max-width: 760px) {
    .tl-cta { grid-column: 1 / -1; grid-row: 4; margin: 14px 0 0 38px; }   /* under the wordmark */
    .nda.dark .nda-foot { margin-top: 30px; }
  }
  @media (prefers-reduced-motion: reduce) { .tl-cta { transition: none; } }
  /* ---------- end stable 2.99 ---------- */

  /* ---------- stable 2.100 · the dark chapter as a section like its peers ---------- */
  .nda { --nda-h: clamp(32px, 3.5vw, 52px); --nda-yr: calc(var(--nda-h) * 1.25); }   /* the page's h2 size; the year scales from it */
  .nda-head h2 { max-width: 24ch; }
  .nda-head .eyebrow { margin: 0 0 16px; font-size: 12px; line-height: inherit; max-width: none; color: var(--indigo); }   /* the page's eyebrow, not the block's paragraph style */
  .nda.dark .nda-head .eyebrow { color: #A4A3FA; }   /* as on the other dark sections */
  @media (min-width: 761px) {
    .nda.dark .tl-start b { font-size: var(--nda-yr); }
    .nda.dark .tl-line { margin-left: calc(var(--nda-yr) * 1.896 + 18px); }   /* "2017" is 1.896 em wide: the line starts 18 px after it */
  }
  @media (min-width: 761px) and (max-width: 1180px) {
    .nda-tl { grid-template-columns: 112px minmax(0, 1fr) 150px; column-gap: 20px; }
    .tl-nodes { padding-left: 12px; column-gap: 16px; }
  }
  /* ---------- end stable 2.100 ---------- */

  /* ---------- stable 2.101 · rhythm: less air between sections on desktop; nothing else moves ---------- */
  @media (min-width: 901px) {
    :root { --sec-pad: clamp(40px, 5.6vh, 72px); }                                      /* was clamp(52px, 7.2vh, 92px) */
    main > #manifesto.sec { padding-top: clamp(52px, 7.2vh, 92px) !important; }          /* the space under the hero is unchanged */
    main > #insights.sec { padding-top: var(--sec-pad) !important; }
    main > #architecture.sec { padding-bottom: calc(var(--sec-pad) * .7) !important; }   /* one dark background with the data room */
    main > #vdr.sec { padding-top: calc(var(--sec-pad) * .7) !important; }
  }
  /* ---------- end stable 2.101 ---------- */

  /* ---------- stable 2.104 · calibration: the standard head above the cards ---------- */
  @media (min-width: 901px) {
    #calibration .cl-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); row-gap: clamp(24px, 3.4vh, 40px); }
    #calibration .cal5-copy { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 48px; align-items: start; align-self: start; }
    #calibration .cal5-copy .eyebrow { grid-column: 1; grid-row: 1; }
    #calibration .cal5-copy h2 { grid-column: 1; grid-row: 2; }
    #calibration .cal5-copy .lede { grid-column: 2; grid-row: 1 / 4; justify-self: end; align-self: start; margin: 0; font-size: 18px; max-width: 56ch; }   /* starts on the eyebrow's line */
  }
  /* ---------- end stable 2.104 ---------- */

  /* ---------- stable 2.105 · type floors on desktop: running text 14, captions 13, screen labels 11 ---------- */
  @media (min-width: 901px) {
    main #tour .tr-rail .d { font-size: 14px; }
    main #early-access .ea2-lbls .ea2-coh span { font-size: 13px; }
    main #calibration .cl-step { font-size: 11px; }
    main #calibration .cl-step i { font-size: 11px; }
    main #pricing .pj-avs .pj-more { font-size: 11px; }
  }
  /* the architecture diagram's captions need the room of a wide screen: at laptop widths its three label zones sit 8 to 17 px apart */
  @media (min-width: 1181px) { main #architecture .cfig .labels .zone span { font-size: 13px; } }
  /* ---------- end stable 2.105 ---------- */

  /* ---------- stable 2.106 · data room: capabilities, not invented activity ---------- */
  .vd-panel .vd-caps b { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: var(--indigo, #3D3BF3); }
  /* ---------- end stable 2.106 ---------- */

  /* ---------- stable 2.108 · data room: the ledger entries for the pack in the drawing, fitted into the panel ---------- */
  #vdr .vd-panel .vd-caps { margin-bottom: 10px; }
  #vdr .vd-led-h { display: flex; justify-content: space-between; margin: 0 0 2px; font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
  #vdr .vd-led { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35; color: var(--ink); }
  #vdr .vd-led .n { font-family: var(--mono); font-size: 11px; color: var(--sub); }
  #vdr .vd-led b { font-weight: 500; }
  #vdr .vd-led .m { font-family: var(--mono); font-size: 11.5px; color: var(--sub); }
  /* ---------- end stable 2.108 ---------- */

  /* ---------- stable 2.111 · heading to content: workforce and the worked example take the site's own gap ---------- */
  @media (min-width: 901px) { main #workforce .sec-head, main #example .sec-head { margin-bottom: clamp(24px, 3.4vh, 40px); } }
  /* ---------- end stable 2.111 ---------- */

  /* ---------- stable 2.113 · the hero is the whole first screen on desktop ---------- */
  @media (min-width: 901px) {
    main > section.hero { min-height: min(calc(100vh - 69px), 1600px); min-height: min(calc(100svh - 69px), 1600px); display: flex; flex-direction: column; justify-content: center; }
    main > section.hero > .hero-grid { width: 100%; }
  }
  /* ---------- end stable 2.113 ---------- */

  /* ---------- stable 2.114 · the header scrolls with the page and flows into the hero (desktop) ---------- */
  @media (min-width: 901px) {
    header.nav { position: absolute; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; box-shadow: none; }
    main > section.hero { padding-top: 69px; min-height: min(100vh, 1669px); min-height: min(100svh, 1669px); }
  }
  /* ---------- end stable 2.114 ---------- */

  /* ---------- stable 2.115 · on large screens the header and hero enlarge with the screen (the scale is --hz, set in the page head) ---------- */
  @media (min-width: 901px) {
    header.nav .in, main > section.hero > .hero-grid { zoom: var(--hz, 1); }
    main > section.hero { padding-top: calc(69px * var(--hz, 1)); }
  }
  /* ---------- end stable 2.115 ---------- */

  /* ---------- stable 2.125 · keyboard: a skip link and focus rings that meet 3:1 ---------- */
  .skip { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 500 14px/1.2 var(--sans); text-decoration: none; }
  .skip:focus { top: 12px; outline: 2px solid var(--indigo); outline-offset: 2px; }
  main:focus { outline: none; }
  .sec.dark a:focus-visible, .sec.dark button:focus-visible, .sec.dark summary:focus-visible { outline-color: #A4A3FA; }
  #faq.fq .qa summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 10px; }
  /* ---------- end stable 2.125 ---------- */

  /* ---------- stable 2.126 · phone: foundations ---------- */
  .m-btn { display: none; }
  @media (max-width: 900px) {
    /* the header: logo, "Contact us" and a menu; the bar steps away while reading down and returns on the way up */
    header.nav { transition: transform .28s cubic-bezier(.3,.7,.2,1); background: rgba(250,250,250,.94); }
    header.nav.nav-away { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
    header.nav .in { gap: 8px; }
    header.nav .brand { margin-right: auto; padding-block: 10px; margin-block: -10px; }
    header.nav .btn.sm { position: relative; }
    header.nav .btn.sm::after { content: ""; position: absolute; inset: -5px -3px; }
    .m-btn { display: grid; place-content: center; gap: 6px; flex: none; width: 44px; height: 44px; margin-right: -6px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .m-btn i { display: block; width: 20px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .25s ease; }
    .m-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
    header.nav.m-open { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; border-bottom-color: transparent; }
    header.nav.m-open .m-btn i:first-child { transform: translateY(3.8px) rotate(45deg); }
    header.nav.m-open .m-btn i:last-child { transform: translateY(-3.8px) rotate(-45deg); }
    /* the menu: the header's own four links, large, one per row */
    header.nav.m-open .nav-links { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: calc(68px + env(safe-area-inset-top, 0px)); max-height: calc(100svh - 68px - env(safe-area-inset-top, 0px)); z-index: 30;
      gap: 0; padding: 8px var(--gut) 28px; background: var(--bg); border-radius: 0 0 22px 22px; box-shadow: 0 24px 48px -24px rgba(10,10,10,.28); overflow-y: auto; overscroll-behavior: contain; animation: m-in .22s cubic-bezier(.3,.7,.2,1) both; }
    header.nav.m-open .nav-links a { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0; margin: 0; border-bottom: 1px solid var(--line);
      font-size: 28px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); }
    header.nav.m-open .nav-links a::after { content: "→"; font-size: 20px; color: var(--sub); font-weight: 400; }
    header.nav.m-open .nav-links a[target="_blank"]::after { content: "↗"; }
    header.nav.m-open .nav-links a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 6px; }
    header.nav.m-open::after { content: ""; position: fixed; left: 0; right: 0; top: calc(68px + env(safe-area-inset-top, 0px)); bottom: 0; z-index: 29; background: rgba(10,10,12,.34); animation: m-fade .22s ease both; }
    header.nav.m-open .nav-links a:last-child { border-bottom: 0; }
    html.m-lock, html.m-lock body { overflow: hidden; }
    /* anchors land clear of the header */
    main > section[id], main [id="how"], footer { scroll-margin-top: 76px; }
    /* touch targets: 44 px for every control, without moving anything */
    .tlink, .tl-cta { position: relative; }
    .tlink::after, .tl-cta::after { content: ""; position: absolute; left: -4px; right: -4px; top: calc(50% - 22px); bottom: calc(50% - 22px); }
    .swipe-dots button { width: 44px !important; height: 44px !important; }
    .swipe-dots button::before { width: 22px !important; height: 3px !important; border-radius: 3px !important; background: var(--line-2) !important; }
    .swipe-dots button[aria-current]::before { background: var(--indigo) !important; }
    .swipe-dots { position: relative; z-index: 1; }
    .swipe-dots:not(.swipe-in) { margin-top: -6px !important; }
    .swipe-dots.swipe-in { margin: -12px 0 0 !important; }
    footer .brand { display: inline-flex !important; gap: 4px; padding-block: 10px !important; margin-block: -10px !important; }
    footer .foot-social { gap: 0 !important; margin-left: -11px !important; }
    footer .foot-grid .foot-social a { width: 44px; height: 44px; margin-block: -7px; }
    footer .foot-grid ul { gap: 0 !important; }
    footer .foot-grid li a { display: inline-block !important; min-width: 44px; text-wrap: balance; padding-block: 12px !important; margin-block: 0 !important; }
    footer .foot-base a { display: inline-flex !important; align-items: center; min-height: 44px; padding-block: 0 !important; margin-block: -12px !important; }
  }
  @media (max-width: 900px) and (prefers-reduced-motion: reduce) { header.nav, .m-btn i { transition: none; } header.nav.m-open .nav-links, header.nav.m-open::after { animation: none; } }
  @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes m-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @media (max-width: 400px) { header.nav .brand span { display: none; } }
  @media (max-width: 900px) {
    /* running text at 16 px or more; the section ledes as on desktop */
    main #calibration .lede { font-size: 17px; }
    main .nda .nda-head p:not(.eyebrow) { font-size: 17px; }
    main #vdr .vd-foot p { font-size: 16px; }
    main #insights .art2-body p, main #insights .art2-body blockquote { font-size: 16px; }
    footer .foot-grid p { font-size: 16px; }
    /* captions at 12 px or more */
    main #architecture p.hint, main #insights .art2-body .label, main #insights .art2-meta span { font-size: 12px; }
  }
  /* ---------- end stable 2.126 ---------- */

  /* ---------- stable 2.127 · phone: workforce ---------- */
  /* a phone segmented control, drawn like the worked example's lens switch, every segment a 44 px target */
  .ph-seg { display: none; }
  @media (max-width: 700px) {
    .ph-seg { display: flex; padding: 0; border-radius: 999px; background: #F2F2F5; box-shadow: inset 0 0 0 1px var(--line); }
    .ph-seg button { position: relative; flex: 1; min-width: 0; height: 44px; padding: 0 6px; border: 0; background: none; border-radius: 999px; font: 500 13px/1 var(--sans); color: var(--sub); cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .ph-seg button::before { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: #FAFAFA; box-shadow: 0 1px 2px rgba(10,10,10,.08), 0 0 0 1px var(--line-2); opacity: 0; transform: scale(.96); transition: opacity .25s ease, transform .25s ease; }
    .ph-seg button span { position: relative; }
    .ph-seg button[aria-current="true"] { color: var(--ink); }
    .ph-seg button[aria-current="true"]::before { opacity: 1; transform: none; }
    .ph-seg button:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
    /* workforce: the console as a phone view; the team, a switch for the three lifecycles, one lifecycle at a time */
    #workforce .wf-team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
    #workforce .wf-humans { display: contents; }
    #workforce .wf-seg-wrap { padding: 12px var(--wf-pad) 4px; }
    #workforce .wf-pages { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: flex-start; }
    #workforce .wf-pages::-webkit-scrollbar { display: none; }
    #workforce .wf-pages > .wf-lane { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; border-top: 0; padding-top: 14px; padding-bottom: 18px; }
    #workforce .wf-copy p { font-size: 14px; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { .ph-seg button::before { transition: none; } }
  /* ---------- end stable 2.127 ---------- */

  /* ---------- stable 2.128 · phone: data room ---------- */
  @media (max-width: 700px) {
    /* data room: the five steps as a vertical record under the drawing, number, step and what is kept, joined by one line */
    main #vdr .vd-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 12px; padding-top: 14px; }
    main #vdr .vd-steps > div { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; grid-row: auto; column-gap: 12px; row-gap: 2px; align-content: start; padding-bottom: 14px; font-size: 15px; line-height: 1.3; }
    main #vdr .vd-steps > div:last-child { padding-bottom: 2px; }
    main #vdr .vd-steps > div::before { content: ""; position: absolute; left: 10.5px; top: 24px; bottom: 2px; width: 1px; background: rgba(255,255,255,.14); }
    main #vdr .vd-steps > div:last-child::before { display: none; }
    main #vdr .vd-steps > div .m { grid-column: 1; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 22px; height: 22px; margin: -1px 0 0; border-radius: 50%; font-size: 11px; color: #C9C9D0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: box-shadow .3s, color .3s, background .3s; }
    main #vdr .vd-steps > div .m::before { display: none; }
    main #vdr .vd-steps > div.on .m { color: #FAFAFA; background: rgba(143,141,255,.18); box-shadow: inset 0 0 0 1px #A9A8FF, 0 0 10px rgba(143,141,255,.6); }
    main #vdr .vd-steps > div > span:not(.m) { display: block; grid-column: 2; font-size: 13px; line-height: 1.4; margin: 0; color: #A6A6AF; }
    /* the verification card: each capability on its own row, label over value */
    main #vdr .vd-panel .stats.vd-caps { grid-template-columns: minmax(0, 1fr); }
    main #vdr .vd-panel .stats.vd-caps div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; align-items: baseline; padding: 11px 14px; }
    main #vdr .vd-panel .stats.vd-caps div + div { border-left: 0; border-top: 1px solid var(--line); }
    main #vdr .vd-panel .stats.vd-caps b { margin: 0; font-size: 15px; line-height: 1.35; }
  }
  @media (max-width: 900px) { main #vdr .vd-fig .vd-num { width: 20px; height: 20px; font-size: 11px; } }
  @media (max-width: 359px) {
    /* the narrowest phones: the drawing keeps its shapes and drops its words and numbers (the record below names and numbers every step) */
    main #vdr .vd-fig .vd-num { display: none; }
    main #vdr .vd-fig .vd-pack > span { display: none; }
  }
  @media (max-width: 700px) {
    /* the hash in the drawing at 11 px, its pill widened to hold it (SVG2 geometry in CSS) */
    main #vdr .vd-fig svg text { font-size: 11px; }
    main #vdr .vd-fig svg rect[height="16"][rx="8"] { x: -32px; width: 64px; }
    main #vdr .vd-fig svg rect[height="18"][rx="9"] { x: -32px; width: 64px; }
  }
  /* ---------- end stable 2.128 ---------- */

  /* ---------- stable 2.129 · phone: shift ---------- */
  @media (max-width: 700px) {
    /* the shift: three problems, each resolved, as three clear units; the drawing, the problem, and its resolution held together */
    main #shift .sh-panel .sh-art { height: 100px; }
    main #shift .sh-panel .sh-art.c2, main #shift .sh-panel .sh-art.c3 { margin-top: 18px; border-top: 0; padding-top: 0; }
    main #shift .sh-panel .sh-art.c2::after, main #shift .sh-panel .sh-art.c3::after { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: var(--line); }
    main #shift .sh-panel .sh-body { padding: 4px 0 12px; }
    main #shift .sh-panel .sh-body h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.012em; }
    main #shift .sh-panel .sh-res { padding: 12px 0 22px; font-size: 16px; }
  }
  /* ---------- end stable 2.129 ---------- */

  /* ---------- stable 2.130 · phone: how it works ---------- */
  @media (max-width: 700px) {
    /* how it works: the six steps of the headline, one per line, as the cards below number them */
    main #how .hw-l { display: block; }
  }
  /* ---------- end stable 2.130 ---------- */

  /* ---------- stable 2.131 · phone: architecture ---------- */
  @media (max-width: 700px) {
    /* architecture: both layer names set the same way, name over descriptor, one on each side; the hint's rule sits on its first line */
    main .core .lid-lbl, main .core .graph-lbl { transform: translateY(-14px); line-height: 1.35; }
    main .core .lid-lbl b, main .core .graph-lbl b { display: block; }
    main .core .graph-lbl.ph2 { text-align: right; }
    main .core .graph-lbl.ph2 b { color: var(--cal-ink); font-weight: 500; }
    main .dark .hint { align-items: flex-start; }
    main .dark .hint::before { flex: none; margin-top: .62em; }
  }
  /* ---------- end stable 2.131 ---------- */

  /* ---------- stable 2.132 · phone: type floors ---------- */
  @media (max-width: 900px) {
    /* the desktop's type floors (2.105) on phones and tablets: screen labels at 11 px */
    main #calibration .cl-step { font-size: 11px; }
    main #calibration .cl-step i { font-size: 11px; width: 19px; height: 19px; }
    main #pricing .pj-avs .pj-more { font-size: 11px; letter-spacing: 0; }
  }
  /* ---------- end stable 2.132 ---------- */

  /* ---------- stable 2.133 · phone: example switch ---------- */
  @media (max-width: 900px) {
    /* the worked example's switch: each side a 44 px target, drawn as before */
    main #example .lens-switch { padding: 0; }
    main #example .lens-switch button { position: relative; isolation: isolate; min-height: 44px; background: none !important; box-shadow: none !important; }
    main #example .lens-switch button::before { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 999px; background: #FAFAFA; box-shadow: 0 1px 2px rgba(10,10,10,.08), 0 0 0 1px var(--line-2); opacity: 0; transition: opacity .3s ease; }
    main #example .lens-switch button[aria-pressed="true"]::before { opacity: 1; }
  }
  /* ---------- end stable 2.133 ---------- */

  /* ---------- stable 2.134 · phone: why agentic ---------- */
  @media (max-width: 560px) {
    /* why agentic: the ownership the agent mapped reads as a short vertical chain, as the worked example draws it on phones */
    main #why-agentic .ra-out:has(.ra-chain) { flex-basis: 100%; align-items: flex-start; }
    main #why-agentic .ra-done:has(.ra-chain) { display: grid; grid-template-columns: 16px auto; justify-content: start; align-items: center; column-gap: 8px; row-gap: 5px; }
    main #why-agentic .ra-done .ra-chain { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
    main #why-agentic .ra-done .ra-chain .ra-link { display: block; width: 12px; text-align: center; margin-left: 9px; transform: rotate(90deg); font-size: 12px; line-height: 14px; }
    main #why-agentic .ra-done .ra-note { grid-column: 2; }
  }
  /* ---------- end stable 2.134 ---------- */

  /* ---------- stable 2.135 · phone: pricing ---------- */
  @media (max-width: 560px) {
    /* pricing: each month as one wide row, the chart on the left and its count on the right, so the two shapes still read
       one above the other and the section stays short; the key runs under the chart at full width */
    main #pricing .pj-card { padding-inline: 12px; }
    main #pricing .sx-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    main #pricing .sx-p { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "t t" "c f" "c x" "k k"; column-gap: 16px; row-gap: 6px; align-items: start; padding: 14px; }
    main #pricing .sx-p .sx-t { grid-area: t; }
    main #pricing .sx-p .sx-cw { grid-area: c; align-self: end; }
    main #pricing .sx-p .sx-c { margin: 4px 0 0; }
    main #pricing .sx-p .sx-key { grid-area: k; margin-top: 2px; }
    main #pricing .sx-p .sx-f { grid-area: f; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 6px; }
    main #pricing .sx-p .sx-f b { font-size: 30px; }
    main #pricing .sx-p .sx-team, main #pricing .sx-p .sx-e { grid-area: x; align-self: start; }
    main #pricing .sx-p .pj-avs { flex-wrap: wrap; max-width: 84px; gap: 4px; }
    main #pricing .sx-p .pj-avs i, main #pricing .sx-p .pj-avs i:first-child { margin-left: 0; }
    main #pricing .sx-p .sx-e { min-height: 0; font-size: 13px; line-height: 1.4; }
    main #pricing .sx-p .sx-e > span { white-space: normal; }
  }
  /* ---------- end stable 2.135 ---------- */

  /* ---------- stable 2.136 · phone: 200% zoom ---------- */
  @media (max-width: 299px) {
    /* 200% zoom on a phone (a layout under 300 px): nothing runs off the side; rows that sit side by side stack instead */
    header.nav .in { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 6px; }
    header.nav .brand { flex: 1 1 auto; min-width: 0; }
    header.nav .brand span { display: none; }
    header.nav .btn.sm { order: 3; flex: 1 1 100%; justify-content: center; }
    header.nav.m-open .nav-links { top: 0; padding-top: 72px; }
    footer .brand { flex-wrap: wrap !important; white-space: normal; }
    main #manifesto .mf-docs .mf-doc { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "ck name" ". src" ". res"; }
    main #manifesto .mf-doc .mf-res { justify-self: start; }
    main #calibration .cl-acts { flex-wrap: wrap; }
    main #why-agentic .ra-row { grid-template-areas: "job" "agent" "state"; grid-template-columns: minmax(0, 1fr); }
    main #why-agentic .ra-row .ra-agent { justify-self: start; }
    main #tour .tr-rail { grid-template-columns: minmax(0, 1fr) !important; }
    main #tour .tr-tabs { flex-wrap: wrap; gap: 0 12px; }
    main #tour .tr-tabs span, main #tour .tr-rail b { white-space: nowrap !important; }
    main #workforce .wf-team { grid-template-columns: minmax(0, 1fr); }
    main #workforce .ph-seg { flex-direction: column; border-radius: 16px; }
    main #workforce .ph-seg button { flex: none; }
    main #workforce .ph-seg button::before { border-radius: 12px; }
    main #pricing .sx-t { white-space: normal; }
    main #pricing .sx-team { flex-wrap: wrap; } main #pricing .pj-avs { flex: 1 1 auto; flex-wrap: wrap; row-gap: 4px; }
    main #tour .tr-win { height: 960px !important; }
    main > section[id], main [id="how"], footer, main #disc { scroll-margin-top: 124px; }
    .swipe-dots:not(.swipe-in) { flex-wrap: wrap; max-width: 132px; margin-inline: auto; }
    .ph-seg button { border-radius: 0; }
    main .btn { white-space: normal; text-align: center; }
    main h2, main .hero h1 { font-size: 27px !important; line-height: 1.12 !important; }
    main #manifesto .mf-statement { font-size: 27px !important; }
    main #vdr .vd-led { grid-template-columns: 18px minmax(0, 1fr) !important; }
    main #vdr .vd-led .m { grid-column: 2; }
    main #vdr .vd-panel .stats.vd-caps div { grid-template-columns: minmax(0, 1fr) !important; gap: 2px !important; }
    main #vdr .vd-led-h { flex-wrap: wrap; }
    /* reflow: at this width, any line may wrap and no box keeps a minimum width of its own */
    main *, footer *:not(li a) { min-width: 0 !important; }
    main :where(span, b, em, small, i, a, p, div, li, h3, strong), footer :where(span, a, b) { white-space: normal !important; overflow-wrap: break-word; }
  }
  .ph-seg button { border-radius: 0 !important; }
  /* ---------- end stable 2.136 ---------- */

  /* ---------- stable 2.137 · phone: tour progress ---------- */
  @media (max-width: 700px) {
    /* tour: the six steps read as one progress track, as stories do: steps done are full, the current one fills, the rest wait */
    main #tour .tr-rail { gap: 4px 8px; }
    main #tour .tr-rail button .bar { display: block; margin-top: 9px; background: var(--line-2); }
    main #tour .tr-rail li:has(~ li button[aria-current="step"]) .bar i { width: 100% !important; }
    main #tour .tr-rail li:has(~ li button[aria-current="step"]) .n { color: var(--indigo); }
  }
  /* ---------- end stable 2.137 ---------- */

  /* ---------- stable 2.138 · phone: calibration line ---------- */
  @media (max-width: 700px) {
    /* calibration: the three steps joined by the line the desktop draws between them */
    main #calibration .cl-c2 .cl-step, main #calibration .cl-c3 .cl-step { position: relative; }
    main #calibration .cl-c2 .cl-step::before, main #calibration .cl-c3 .cl-step::before { content: ""; position: absolute; left: 9px; bottom: calc(100% + 1px); height: 26px; width: 1.5px; border-radius: 1px; background: linear-gradient(180deg, rgba(61,59,243,.25), var(--indigo)); }
  }
  /* ---------- end stable 2.138 ---------- */

  /* ---------- stable 2.139 · phone: card heights ---------- */
  @media (max-width: 700px) {
    /* no empty card bottoms: How it works' cards take their own height; the workforce console takes the height of the lifecycle shown */
    main #how .hw-steps.swipe { align-items: flex-start !important; }
    main #how .hw-steps.swipe .hw-card { flex: none !important; }
    main #workforce .wf-pages, main #how .hw-steps.swipe { overflow-y: hidden; transition: height .35s cubic-bezier(.3,.7,.2,1); }
    main #workforce .wf-out { grid-template-columns: minmax(0, 1fr) !important; }
    main #workforce .wf-out .wf-o, main #workforce .wf-out .wf-rev { grid-column: 1 !important; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { main #workforce .wf-pages, main #how .hw-steps.swipe { transition: none; } }
  /* ---------- end stable 2.139 ---------- */

  /* ---------- stable 2.140 · phone: calibration rows ---------- */
  @media (max-width: 700px) {
    /* calibration: tighter rows in the three cards, and the scope reads one setting at a time (no lone separator on a line) */
    main #calibration .kv { padding-block: 7px; }
    main #calibration .cl-row { padding-block: 7px; }
  }
  @media (max-width: 359px) {
    /* the narrowest phones: the calibration entry's values run under their labels, so long settings keep the card's width */
    main #calibration .cal-entry .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    main #calibration .cal-entry .kv b { text-align: left; }
  }
  /* ---------- end stable 2.140 ---------- */

  /* ---------- stable 2.141 · phone: track mark ---------- */
  @media (max-width: 760px) {
    /* track record: the timeline moves in by the mark's overhang, so the cmpliance mark sits on the page margin like everything else */
    main .nda .nda-tl { padding-left: 12px; }
  }
  @media (max-width: 900px) {
    /* the inline "paterhn" link: a 24 px target in either font, without moving the line */
    main .nda .nda-head p a { display: inline-block; padding-block: 3px; margin-block: -3px; }
  }
  /* ---------- end stable 2.141 ---------- */

  /* ---------- stable 2.142 · phone: hero card ---------- */
  @media (max-width: 359px) {
    /* the hero's phone card on the narrowest phones: the status runs under "Cases" instead of wrapping beside it,
       and the pack's percentage sits on its own line clear of the label */
    main .hero .phone-case .ph-top { flex-wrap: wrap; row-gap: 4px; }
    main .hero .phone-case .ph-top > span:last-child { flex-basis: 100%; }
    main .hero .phone-case .ph-pct { flex-wrap: wrap; gap: 2px 10px; }
    main .hero .phone-case .ph-pct b { margin-left: auto; }
  }
  /* ---------- end stable 2.142 ---------- */

  /* ---------- stable 2.143 · phone: last details ---------- */
  @media (max-width: 640px) {
    /* worked example: the result reads top to bottom (label, verdict, finding), and the feature cards take their own height */
    main #example .lens-result { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; gap: 6px; }
    main #example .lens-result .rs > div { align-items: flex-start !important; }
    main #example .lens-diff.swipe-in { align-items: flex-start; }
  }
  @media (max-width: 700px) {
    /* workforce: the console keeps the tallest lifecycle's height, each lifecycle's outcome and reviewer sit at its foot,
       and the pack lands in the reviewer's row without a separate flight on a phone */
    main #workforce .wf-pages { align-items: stretch !important; height: auto !important; }
    main #workforce .wf-pages > .wf-lane { grid-template-rows: auto 1fr; }
    main #workforce .wf-pages .wf-run { display: flex; flex-direction: column; }
    main #workforce .wf-pages .wf-out { margin-top: auto; }
    main #workforce .wf-fly { display: none !important; }
    /* tour: the last step's bar is full once the tour rests there */
    main #tour .tr-rail button[aria-current="step"]:last-child .bar i, main #tour .tr-rail li:last-child button[aria-current="step"] .bar i { width: 100% !important; }
    /* architecture: during the run the step markers sit above the hop names, never under them */
    main #architecture .events .hop { z-index: 3; }
    main #architecture .events .hop-name { z-index: 2; }
    /* shift: the deadline's chip sits clear of the timeline's flag */
    main #shift .sh-art[data-sh="deadline"] .sh-pack { margin-top: -10px; }
  }
  @media (max-width: 359px) {
    /* the narrowest phones: the tour window's tabs stay on one line and scroll; every calibration card puts values under labels */
    main #tour .tr-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    main #tour .tr-tabs span { flex: none; white-space: nowrap; }
    main #tour .tr-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
    main #calibration .cl-row { grid-template-columns: minmax(0, 1fr) !important; gap: 2px; }
  }
  /* ---------- end stable 2.143 ---------- */

  /* ---------- stable 2.144 · phone: Trust links (no styles) ---------- */
  /* ---------- end stable 2.144 ---------- */

  /* ---------- stable 2.145 · phone: round 2 calibration ---------- */
  /* Phone round 2, calibration (13 Oct): the hero, why agentic and how it works, judged screen by screen at 375×667 and 360×800.
     Cards in these three sections take the brand #FAFAFA instead of pure white; each section shows its finished state on arrival with one small movement. */
  main #how .hw-rail { display: none; }
  @media (max-width: 700px) {
    /* the sketch's version tag sits at the top of the page under the header and scrolls away with it, never over content */
    .sk-note { position: absolute; top: calc(77px + env(safe-area-inset-top, 0px)); right: 16px; left: auto; bottom: auto; flex-direction: column-reverse; align-items: flex-end; }
    .sk-pill { height: 24px; padding: 0 10px 0 8px; gap: 6px; }

    /* hero: one sentence per line, the lede across the full column, the case card starting on the first screen */
    main .hero .hero-grid { padding-top: 42px; gap: 26px; }
    main .hero h1 { font-size: min(40px, calc((100vw - 32px) / 9.3)); line-height: 1.02; }
    main .hero .lede { margin-top: 16px; max-width: none; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
    main .hero .actions { margin-top: 22px; }
    main .hero .phone-case .pc { background: var(--bg); }

    /* why agentic: the finished case at once, at phone size; each analyst task is crossed out in turn as the card arrives */
    main #why-agentic .ra-card { background: var(--bg); padding: 16px 16px 14px; }
    main #why-agentic .ra-cursors { display: none; }
    main #why-agentic .ra-h { padding-bottom: 12px; }
    main #why-agentic .ra-row { grid-template-areas: "agent" "job" "state"; grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding: 13px 0 14px; }
    main #why-agentic .ra-row .ra-agent { justify-self: start; opacity: 1; }
    main #why-agentic .ra-job { font-size: 15px; }
    main #why-agentic .ra-state { margin-top: 7px; display: grid; justify-items: start; row-gap: 7px; }
    main #why-agentic .ra-row .ra-task { position: relative; color: #6B6B73; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: none; }
    main #why-agentic .ra-row .ra-task::after { content: ""; position: absolute; left: 26px; right: 10px; top: 50%; height: 1.2px; background: rgba(10,10,10,.5); transform-origin: left center; }
    main #why-agentic .ra-row .ra-arrow { opacity: 1; }
    main #why-agentic .ra-row .ra-done { opacity: 1; transform: none; }
    main #why-agentic .ra-decide { grid-template-areas: "job state"; grid-template-columns: minmax(0, 1fr) auto; padding-top: 13px; }
    main #why-agentic .ra-decide .ra-state { justify-self: end; margin-top: 0; display: flex; }
    main #why-agentic .ra-foot p { font-size: 14px; }
    main #why-agentic .ra-out { align-items: flex-start; }
    main #why-agentic .ra-out:has(.ra-chain) { flex-basis: auto; }
    main #why-agentic .ra-out .ra-arrow { line-height: 22px; }
    main #why-agentic .ra-done:has(.ra-chain) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; }
    main #why-agentic .ra-done .ra-chain { display: contents; }
    main #why-agentic .ra-done .ra-chain .ra-link { display: inline; width: auto; margin: 0; transform: none; line-height: 1; }
    main #why-agentic .ra-row.ph-wait .ra-task::after { transform: scaleX(0); }
    main #why-agentic .ra-row .ra-done i { transition: background .35s ease .55s, box-shadow .35s ease .55s; }
    main #why-agentic .ra-row .ra-done i svg { transition: opacity .25s ease .7s; }
    main #why-agentic .ra-row.ph-wait .ra-done i { background: transparent; box-shadow: inset 0 0 0 1.3px var(--line-2); }
    main #why-agentic .ra-row.ph-wait .ra-done i svg { opacity: 0; }
    main #why-agentic .ra-row.ph-go .ra-task::after { transition: transform .55s cubic-bezier(.3,.7,.2,1) .2s; }

    /* how it works: a rail of the six steps over one full card at a time; every card shows its finished content */
    main #how .hw-track, main #how .hw .swipe-dots { display: none !important; }
    main #how .hw-steps.swipe { gap: 16px; align-items: stretch !important; height: auto !important; }
    main #how .hw-steps.swipe > .hw-st { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
    main #how .hw-steps.swipe .hw-head { display: none; }
    main #how .hw-steps.swipe .hw-card { flex: 1 !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 16px 18px; padding: 18px 18px 20px; background: var(--bg); border-radius: 16px; box-shadow: var(--shadow-card) !important; }
    main #how .hw-card > .hw-t, main #how .hw-card > .hw-btns, main #how .hw-card > .hw-dec, main #how .hw-card > .hw-export,
    main #how .hw-st:nth-child(1) .hw-f:first-child, main #how .hw-st:nth-child(4) .hw-f:nth-child(3) { grid-column: 1 / -1; }
    main #how .hw-card > .hw-t { margin-bottom: -4px; }
    main #how .hw-f { gap: 4px; }
    main #how .hw-f b, main #how .hw-who b { font-size: 15px; line-height: 1.35; }
    main #how .hw-f b.hw-m { font-size: 13px; }
    main #how .hw-st:nth-child(1) .hw-f:first-child b, main #how .hw-st:nth-child(4) .hw-f:nth-child(3) b { font-size: 17px; letter-spacing: -0.01em; }
    main #how .hw-btns span { padding: 9px 0; }
    main #how .hw-st:nth-child(4) .hw-f:nth-child(3) { margin-top: 2px; padding: 12px 14px 13px; border-radius: 12px; background: var(--bad-bg); box-shadow: inset 0 0 0 1px rgba(136,19,55,.12); }
    main #how .hw-btns span { font-size: 14px; padding: 10px 0; }
    main #how .hw-dec b, main #how .hw-dec small { font-size: 14px; }
    main #how .hw-st:nth-child(6) .hw-card > .hw-t { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
    main #how .hw-st:nth-child(6) .hw-card > .hw-export { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin: -4px 0; font-size: 13px; padding: 7px 14px; }
    main #how .hw-card { row-gap: 14px; }
    main #how .hw-who { gap: 10px; grid-column: 1 / -1; }
    main #how .hw-who svg { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: var(--indigo-soft); color: var(--indigo); }
    main #how .hw-ag { grid-template-columns: 16px minmax(0, 1fr); }
    main #how .hw-ag b { font-size: 13.5px; } main #how .hw-ag small { font-size: 12.5px; }
    main #how .hw-st .hw-card > *, main #how .hw-st.pending .hw-card > * { opacity: 1 !important; }
    main #how .hw-ag .hw-ck { background: var(--ok); box-shadow: none; } main #how .hw-ag .hw-ck::after { opacity: 1; }
    main #how .hw-btns .hw-flag { background: var(--ink); color: #FAFAFA; box-shadow: none; }
    main #how .flow-cap { margin-top: 18px; text-wrap: balance; }

    main #how .hw-rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 4px 0 14px; }
    main #how .hw-rail::before, main #how .hw-rail > i { content: ""; position: absolute; top: 15px; left: calc(100% / 12); right: calc(100% / 12); height: 1.5px; background: var(--line-2); }
    main #how .hw-rail > i { background: var(--indigo); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .45s cubic-bezier(.3,.7,.2,1); }
    main #how .hw-rail button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 60px; padding: 9px 0 6px; margin: 0; border: 0; background: none; color: var(--sub); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    main #how .hw-rail button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px #C9C9CF; transition: background .3s ease, box-shadow .3s ease; }
    main #how .hw-rail button.seen::before { background: var(--indigo); box-shadow: none; }
    main #how .hw-rail button[aria-current="step"]::before { background: var(--indigo); box-shadow: 0 0 0 4px rgba(61,59,243,.16); }
    main #how .hw-rail button small { font: 400 11px/1 var(--mono); color: var(--faint); }
    main #how .hw-rail button b { font-size: 13px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
    main #how .hw-rail button[aria-current="step"] { color: var(--ink); }
    main #how .hw-rail button[aria-current="step"] small { color: var(--indigo); }
    main #how .hw-rail button:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; border-radius: 10px; }
  }
  @media (max-width: 359px) { main #how .hw-rail button b { font-size: 11.5px; } }
  @media (max-width: 299px) {
    /* 200% zoom: the version tag steps aside (the header takes two rows here); the six steps in two rows of three, each a full touch target */
    .sk-note { display: none; }
    main #how .hw-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 4px; }
    main #how .hw-rail::before, main #how .hw-rail > i { display: none; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { main #how .hw-rail > i, main #how .hw-rail button::before { transition: none; } }
  /* ---------- end stable 2.145 ---------- */

  /* ---------- stable 2.146 · phone: mobile-first tree ---------- */
  /* Stable 2.146: the phone's own component tree, mobile-first. Five reused parts: the section opener, the stage with its card,
     the vertical line of steps, the two-way switch and the row. No pure white surfaces: cards are the brand #FAFAFA on a soft indigo stage.
     One colour means "done" everywhere: indigo. */
  .mf { display: none; }
  @media (max-width: 700px) {
    .mf { display: block; --m-g: 16px; --m-card: #FAFAFA; --m-edge: rgba(10,10,10,.09); }
    main > section.hero, main > #manifesto, main > #shift, main > #why-agentic, main > #how { display: none !important; }
    header.nav.m-edge { box-shadow: 0 1px 0 var(--line); }
    .mf .m-sec { padding: 64px var(--m-g) 0; scroll-margin-top: 76px; }
    .mf h2 { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
    .mf .eyebrow { margin: 0 0 14px; font-size: 12px; letter-spacing: .08em; }
    .mf .m-lede { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--sub); text-wrap: pretty; }
    .mf .label { font-size: 11px; }
    .mf .p { font-size: 12px; line-height: 1.25; padding: 4px 9px; border-radius: 999px; text-align: center; white-space: nowrap; }
    .mf .p.bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(136,19,55,.18); }
    .mf .m-ck { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; color: #FAFAFA; background: var(--indigo); }
    .mf .m-ck svg { width: 14px; height: 14px; }

    /* the stage: a soft indigo light behind a product card, fading out before the margins, so the brand-white card stands out without pure white */
    .mf .m-stage { position: relative; margin: 24px calc(-1 * var(--m-g)) 0; padding: 20px var(--m-g) 24px;
      background: radial-gradient(64% 52% at 50% 56%, rgba(61,59,243,.09), rgba(61,59,243,.03) 58%, rgba(61,59,243,0) 76%); }
    .mf .m-card { position: relative; background: var(--m-card); border-radius: 20px; padding: 18px;
      box-shadow: 0 0 0 1px var(--m-edge), 0 1px 2px rgba(10,10,10,.04), 0 12px 28px -18px rgba(30,28,120,.26); }
    .mf .m-label { margin: 18px 0 2px; font: 400 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
    .mf .m-rows { list-style: none; margin: 0; padding: 0; }
    .mf .m-rows li { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; column-gap: 10px; height: 42px; border-top: 1px solid var(--line); font-size: 15px; }
    .mf .m-rows li:first-child { border-top: 0; }
    .mf .m-rows li .p { justify-self: end; }

    /* hero: words grouped tight, the actions apart, the case card set off below */
    .mf .m-hero { padding: 34px var(--m-g) 0; background: radial-gradient(70% 36% at 100% 60%, rgba(61,59,243,.13), rgba(61,59,243,0) 72%); }
    .mf .m-h1 { margin: 0; font-size: min(40px, calc((100vw - 32px) / 9.6)); line-height: 1.02; letter-spacing: -0.045em; font-weight: 500; text-wrap: balance; }
    .mf .m-hero .m-lede { margin-top: 16px; }
    .mf .m-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    .mf .m-acts .btn { min-height: 48px; padding: 0 22px; font-size: 16px; }
    .mf .m-hero .m-stage { margin-top: 40px; padding: 0 var(--m-g); background: none; }
    .mf .m-case { padding: 18px 16px; }
    .mf .m-case .p { font-size: 11px; padding: 4px 8px; }
    .mf .m-case-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--sub); }
    .mf .m-case-top .st-ok { color: var(--ok); }
    .mf .m-case-name { margin: 14px 0 2px; font-size: 19px; line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; }
    .mf .m-case-ref { margin: 0; font: 400 11.5px/1.4 var(--mono); color: var(--sub); }
    .mf .m-pack { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px; font-size: 14px; }
    .mf .m-pack b { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--indigo); }
    .mf .m-bar { height: 5px; margin: 8px 0 10px; border-radius: 99px; background: #E9E9F1; overflow: hidden; }
    .mf .m-bar i { display: block; height: 100%; background: var(--indigo); transition: width .9s cubic-bezier(.3,.7,.2,1); }
    .mf .m-case .a-seal { font-size: 15px; padding: 13px; border-radius: 12px; }
    .mf .m-case .a-seal.wait { padding: 0; font-size: 13px; text-align: left; text-wrap: pretty; }
    .mf .m-case .a-rec { margin-top: 9px; font-size: 11px; }
    .mf .m-cells { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; margin-top: 12px; }
    .mf .m-cells > div { display: grid; align-content: start; gap: 3px; padding: 10px 0 11px; border-top: 1px solid var(--line); }
    .mf .m-cells > div > span:first-child { font-size: 14px; line-height: 1.3; }
    .mf .m-cells .p { display: flex; gap: 7px; align-items: baseline; padding: 0; border-radius: 0; background: none !important; box-shadow: none !important; font-size: 12.5px; line-height: 1.3; text-align: left; white-space: normal; color: #6B6B73; }
    .mf .m-cells .p::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
    .mf .m-cells .p.in { width: auto; max-width: none; margin: 0; padding: 0; }
    .mf .m-cells .p.ok { color: var(--ok); } .mf .m-cells .p.info { color: #3F4F63; } .mf .m-cells .p.warn { color: var(--warn); } .mf .m-cells .p.in { color: var(--indigo); }
    .mf .m-cells > div:nth-child(3) .p, .mf .m-cells > div:nth-child(4) .p { min-height: 2.6em; }
    .mf .m-cells > .m-so { border-top-color: var(--line-2); }
    .mf .m-seal-slot { display: grid; align-items: center; height: 46px; }
    .mf .m-case .m-seal-slot .a-seal:not(.wait) { display: grid; place-items: center; height: 46px; padding: 0; }
    .mf .m-hero .sk-note { position: static; z-index: auto; display: flex; flex-direction: column; align-items: center; margin: 18px 0 0; }

    /* manifesto: each sentence on its own lines; the four sources sit on one line that runs down into the decision */
    .mf .m-statement { font-size: min(34px, calc((100vw - 32px) / 9.6)); line-height: 1.06; letter-spacing: -0.035em; }
    .mf .m-mf .m-stage { margin-top: 14px; padding: 12px var(--m-g) 18px; }
    .mf .m-statement > span { display: block; text-wrap: balance; }
    .mf .m-statement em { font-style: normal; color: var(--indigo); }
    .mf .m-src { position: relative; list-style: none; margin: 0; padding: 0; }
    .mf .m-src::before { content: ""; position: absolute; left: 8.25px; top: 26px; bottom: -18px; width: 1.5px; background: linear-gradient(rgba(61,59,243,.35), rgba(61,59,243,.7)); }
    .mf .m-src li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) max-content; grid-template-areas: "d n p" "d s p"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 11px 0; }
    .mf .m-src li + li { border-top: 1px solid var(--line); }
    .mf .m-src .m-dot { grid-area: d; align-self: center; }
    .mf .m-src-n { grid-area: n; font-size: 15px; line-height: 1.3; }
    .mf .m-src-s { grid-area: s; font: 400 12px/1.3 var(--mono); letter-spacing: .03em; color: var(--sub); }
    .mf .m-src .p { grid-area: p; font-size: 11.5px; padding: 4px 8px; }
    .mf .m-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--indigo); color: #FAFAFA; box-shadow: 0 0 0 4px #F1F1FB; }
    .mf .m-dot svg { width: 13px; height: 13px; }
    .mf .m-rec { position: relative; margin-top: 18px; padding: 15px 16px 13px; border-radius: 16px; background: var(--m-card);
      box-shadow: 0 0 0 1px rgba(61,59,243,.28), 0 12px 28px -18px rgba(61,59,243,.45); }
    .mf .m-rec-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .mf .m-rec-h b { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 500; color: var(--indigo); }
    .mf .m-seal { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--indigo); color: #FAFAFA; }
    .mf .m-seal svg { width: 14px; height: 14px; }
    .mf .m-rec .pill { font: 500 11px/1 var(--mono); letter-spacing: .06em; }
    .mf .m-rec-hash { margin: 8px 0 0; font: 400 12px/1.4 var(--mono); color: var(--sub); }
    .mf .m-rec-who { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font: 400 11.5px/1.4 var(--mono); color: var(--sub); }
    .mf .m-rec-who b { color: var(--ink); font-weight: 500; }

    /* shift: three problems on one line; each answered where it sits, with what the agents leave behind */
    .mf .m-legend { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 22px 0 0; }
    .mf .m-legend .m-ck { width: 15px; height: 15px; } .mf .m-legend .m-ck svg { width: 12px; height: 12px; }
    .mf .m-legend .label { font-size: 12px; letter-spacing: .06em; color: var(--indigo); }
    .mf .m-pairs { position: relative; list-style: none; margin: 4px 0 0; padding: 0 0 0 30px; display: grid; gap: 24px; }
    .mf .m-pairs::before { content: ""; position: absolute; left: 8.25px; top: 6px; bottom: 30px; width: 1.5px; background: linear-gradient(var(--line-2), rgba(61,59,243,.45)); }
    .mf .m-pairs li { position: relative; }
    .mf .m-pairs li::before { content: ""; position: absolute; left: -26px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px #B9B9C2; }
    .mf .m-pairs .label { font-size: 12px; letter-spacing: .06em; }
    .mf .m-pairs h3 { margin: 6px 0 0; font-size: 18px; line-height: 1.32; font-weight: 500; letter-spacing: -0.012em; text-wrap: balance; }
    .mf .m-res { position: relative; display: grid; gap: 10px; margin: 12px 0 0; padding: 12px 12px 12px 14px; border-radius: 14px; background: rgba(61,59,243,.055); box-shadow: inset 0 0 0 1px rgba(61,59,243,.14); }
    .mf .m-res > span:first-of-type { font-size: 18px; line-height: 1.32; font-weight: 500; letter-spacing: -0.012em; color: var(--indigo); text-wrap: pretty; }
    .mf .m-res .m-ck { position: absolute; left: -31px; top: 13px; box-shadow: 0 0 0 4px var(--bg); }
    .mf .m-art { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .mf .m-art-d { flex: 1 1 auto; min-width: 40px; height: 20px; }
    .mf .m-art-c { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; background: var(--m-card); font-size: 13.5px; font-weight: 500; color: var(--ink); box-shadow: 0 0 0 1px rgba(61,59,243,.32), 0 6px 14px -10px rgba(61,59,243,.55); }
    .mf .m-art-c svg { width: 14px; height: 14px; color: var(--indigo); }

    /* why agentic: one case and a switch for who does the work; the switch stays at the card's top while it is read */
    .mf .m-ra .m-stage { padding-top: 20px; }
    .mf .m-ra-fig { margin: 0; }
    .mf .m-switch-bar { margin: -16px -16px 4px; padding: 10px; border-radius: 20px 20px 0 0; box-shadow: 0 1px 0 var(--line); }
    .mf .m-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(10,10,10,.05); box-shadow: inset 0 0 0 1px var(--line); }
    .mf .m-switch button { min-height: 44px; border: 0; border-radius: 999px; background: none; font: 500 15px/1 var(--sans); color: var(--sub); cursor: pointer; transition: background .3s ease, color .3s ease, box-shadow .3s ease; -webkit-tap-highlight-color: transparent; }
    .mf .m-switch button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), 0 4px 10px -6px rgba(10,10,10,.3); }
    .mf .m-switch button[data-m-mode="cm"][aria-pressed="true"] { background: var(--bg); color: var(--indigo); box-shadow: 0 0 0 1.5px var(--indigo), 0 4px 10px -6px rgba(61,59,243,.45); }
    .mf .m-switch button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
    .mf .m-ra-card { margin: 0; padding: 16px; }
    .mf .m-ra-h { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; }
    .mf .m-jobs { list-style: none; margin: 0; padding: 0; }
    .mf .m-job { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid var(--line); }
    .mf .m-job:first-child { border-top: 0; }
    .mf .m-ag { color: var(--indigo); transition: opacity .35s ease; }
    .mf .m-ra-card.is-wf .m-ag { color: var(--sub); }
    .mf .m-job-n { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
    .mf .m-st { display: grid; margin-top: 4px; }
    .mf .m-st > * { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 7px; transition: opacity .35s ease, transform .35s ease; }
    .mf .m-st-cm:has(.m-chain) { align-items: flex-start; flex-wrap: nowrap; }
    .mf .m-task { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 13px; color: #3A3A3F; background: rgba(10,10,10,.06); }
    .mf .m-task svg { width: 13px; height: 13px; }
    .mf .m-done { display: inline-flex; align-items: center; gap: 7px; min-height: 22px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
    .mf .m-done .m-ck { width: 17px; height: 17px; }
    .mf .m-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; font: 500 11px/1.5 var(--mono); letter-spacing: .02em; color: var(--ink); background: rgba(10,10,10,.035); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
    .mf .m-doc { font-family: var(--sans); font-size: 12px; letter-spacing: 0; }
    .mf .m-doc svg { width: 11px; height: 13px; color: var(--sub); }
    .mf .m-chain { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; }
    .mf .m-chain i { display: block; width: 12px; margin-left: 10px; font-style: normal; font-size: 12px; line-height: 14px; text-align: center; color: var(--indigo); transform: rotate(-90deg); }
    .mf .m-chain .m-note { margin-top: 3px; }
    .mf .m-note { font-size: 13px; color: var(--sub); }
    .mf .m-risk { font-size: 12px; padding: 3px 9px; }
    .mf .m-ra-card.is-cm .m-st-wf, .mf .m-ra-card.is-wf .m-st-cm { opacity: 0; transform: translateY(3px); pointer-events: none; }
    .mf .m-decide { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; }
    .mf .m-call { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1.3px var(--ink); }
    .mf .m-who { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--sub); }
    .mf .m-who svg { width: 13px; height: 13px; }
    .mf .m-ra-foot { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line-2); }
    .mf .m-ra-foot p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--faint); transition: color .35s ease; }
    .mf .m-ra-foot b { font-weight: 500; }
    .mf .m-ra-card.is-wf .m-f-wf { color: var(--ink); }
    .mf .m-ra-card.is-cm .m-f-cm, .mf .m-ra-card.is-cm .m-f-cm b { color: var(--indigo); }

    /* how it works: the headline's six steps are the steps, on one line that fills as you read */
    .mf .m-how { padding-bottom: 40px; }
    .mf .m-open > span { display: block; }
    .mf .m-open { margin: 0 0 30px; font-size: 30px; line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
    .mf .m-steps { position: relative; list-style: none; margin: 6px 0 0; padding: 0 0 0 34px; }
    .mf .m-steps > li:not(:last-child)::after { content: ""; position: absolute; left: -25.75px; top: 30px; height: 100%; width: 1.5px; background: var(--indigo); transition: background .45s ease; }
    .mf .m-steps[data-wait] > li:not(:has(+ li.on))::after { background: var(--line-2); }
    .mf .m-steps > li { position: relative; padding: 0 0 22px; }
    .mf .m-steps > li::before { content: ""; position: absolute; z-index: 1; left: -31px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 4px var(--bg); transition: background .3s ease, box-shadow .3s ease; }
    .mf .m-steps[data-wait] > li:not(.on)::before { background: var(--bg); box-shadow: 0 0 0 4px var(--bg), inset 0 0 0 1.5px #9A9AA3; }
    .mf .m-n { display: block; font: 400 12px/1 var(--mono); color: var(--faint); letter-spacing: .04em; margin-bottom: 6px; }
    .mf .m-steps h3 { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
    .mf .m-d { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; padding: 11px 13px 12px; border-radius: 14px; font-size: 14px; color: var(--sub); background: var(--m-card); box-shadow: 0 0 0 1px var(--m-edge), 0 10px 22px -18px rgba(30,28,120,.26); }
    .mf .m-d > b { flex-basis: 100%; font-weight: 500; color: var(--ink); font-size: 15px; }
    .mf .m-d .m-line1 { display: inline-flex; align-items: center; gap: 8px; }
    .mf .m-pair { gap: 8px 18px; }
    .mf .m-pair > span { display: inline-grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; }
    .mf .m-pair svg { grid-row: 1 / 3; width: 30px; height: 30px; padding: 8px; border-radius: 50%; background: var(--indigo-soft); color: var(--indigo); }
    .mf .m-pair small { font: 400 11px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
    .mf .m-pair b { font-size: 15px; font-weight: 500; color: var(--ink); }
    .mf .m-ags { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .mf .m-ags > span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); white-space: nowrap; }
    .mf .m-ags .m-ck { width: 17px; height: 17px; }
    .mf .m-d .m-bad { color: var(--bad); }
    .mf .m-d .m-warn { display: inline-flex; align-items: center; gap: 8px; color: var(--warn); }
    .mf .m-d .m-warn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
    .mf .m-k { font: 400 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--sub); margin-right: 2px; }
    .mf .m-b2 { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--sub); box-shadow: inset 0 0 0 1px var(--line-2); }
    .mf .m-b2.on { background: var(--ink); color: #FAFAFA; box-shadow: none; }
    .mf .m-pk { display: block; }
    .mf .m-pk-h { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
    .mf .m-pk dl { display: grid; margin: 0; }
    .mf .m-pk dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
    .mf .m-pk dt { font: 400 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
    .mf .m-pk dd { margin: 0; font: 400 12.5px/1.35 var(--mono); color: var(--ink); }
    .mf .m-pk dd.m-sans { font: 500 14px/1.35 var(--sans); }
    .mf .m-cap { margin: 4px 0 0; font-size: 17px; line-height: 1.45; color: var(--sub); text-wrap: balance; }
    .mf .m-cta { margin-top: 20px; min-height: 48px; padding: 0 22px; font-size: 16px; }
  }
  @media (max-width: 359px) {
    .mf .m-rows li { height: auto; min-height: 42px; padding-block: 6px; }
    .mf .m-pk dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  }
  @media (max-width: 299px) {
    /* 200% zoom: rows put their status under the label, the switch stacks, and long values wrap */
    .mf .m-rows li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
    .mf .m-src li { grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "d n" "d s" "d p"; }
    .mf .m-rows li .p, .mf .m-src li .p { justify-self: start; white-space: normal; max-width: none; text-align: left; }
    .mf .m-switch { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
    .mf .m-switch-bar { position: static; }
    .mf .m-d .m-line1 { flex-wrap: wrap; }
    .mf .m-cells { grid-template-columns: minmax(0, 1fr); }
    .mf .m-art { flex-wrap: wrap; }
    .mf .m-switch button { white-space: normal; padding: 6px 10px; }
    .mf .m-chip, .mf .m-pk dd, .mf .m-rec-hash, .mf .m-ags > span, .mf .m-done { white-space: normal; overflow-wrap: anywhere; }
    .mf .m-st-cm:has(.m-chain) { flex-wrap: wrap; }
    .mf .m-case-top { flex-wrap: wrap; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { .mf .m-st > *, .mf .m-ag, .mf .m-steps > li::after, .mf .m-steps > li::before, .mf .m-ra-foot p, .mf .m-switch button { transition: none; } }
  /* ---------- end stable 2.146 ---------- */

  /* ---------- stable 2.147 · phone: shift as 2.145 ---------- */
  @media (max-width: 700px) {
    /* the shift as in 2.145: the desktop's three drawings over each problem and its answer; its chips in the brand white */
    .mf .m-shift { display: none !important; }
    .mf > #shift { padding-block: 64px 0; }
    .mf #shift .sh-pack { background: var(--bg); }
  }
  /* ---------- end stable 2.147 ---------- */

  /* ---------- stable 2.148 · phone: mobile-first, next five ---------- */
  /* Stable 2.148: the phone's own tree for tour, worked example, architecture, data room and calibration, in the 2.146 kit. */
  @media (max-width: 700px) {
    main > #tour, main > #example, main > #architecture, main > #vdr, main > #calibration { display: none !important; }
    .mf .m-k { margin: 0; font: 400 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
    .mf .m-mock { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--sub); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
    .mf .m-mono, .mf .m-id { font-family: var(--mono); }

    /* tour: a row of the six steps over one app card that shows the step */
    .mf .m-chips { display: flex; gap: 8px; margin: 24px calc(-1 * var(--m-g)) 0; padding: 2px var(--m-g) 4px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); scroll-padding-inline: var(--m-g); scrollbar-width: none; }
    .mf .m-chips::-webkit-scrollbar { display: none; }
    .mf .m-chips button { position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: baseline; gap: 7px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 15px/44px var(--sans); color: var(--sub); scroll-snap-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .25s ease, box-shadow .25s ease; }
    .mf .m-chips button small { font: 400 12px/1 var(--mono); color: var(--faint); }
    .mf .m-chips button[aria-selected="true"] { color: var(--indigo); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--indigo), 0 4px 12px -8px rgba(61,59,243,.5); }
    .mf .m-chips button[aria-selected="true"] small { color: var(--indigo); }
    .mf .m-chips.m-run button[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 2px; border-radius: 1px; background: var(--indigo); opacity: .35; transform-origin: left; animation: m-fill 3.2s linear both; }
    @keyframes m-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .mf .m-chips button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
    .mf .m-tds { display: grid; margin-top: 14px; }
    .mf .m-tds > p { grid-area: 1 / 1; margin: 0; font-size: 16px; line-height: 1.45; color: var(--sub); opacity: 0; transition: opacity .3s ease; }
    .mf .m-tds > p.on { opacity: 1; }
    .mf .m-tour .m-stage { margin-top: 10px; }
    .mf .m-app { padding: 0; overflow: hidden; }
    .mf .m-appbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 400 12px/1 var(--mono); color: var(--sub); }
    .mf .m-appbar i { width: 7px; height: 7px; border-radius: 50%; background: #DADAE0; }
    .mf .m-appbar span { margin-left: 8px; }
    .mf .m-panes { display: grid; }
    .mf .m-pane { grid-area: 1 / 1; display: grid; align-content: start; gap: 7px; padding: 13px 14px 14px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
    .mf .m-pane.on { opacity: 1; visibility: visible; transition: opacity .3s ease; }
    .mf .m-pane > .m-k { margin-top: 6px; }
    .mf .m-ph { display: flex; justify-content: space-between; align-items: center; }
    .mf .m-ph b { font-size: 16px; font-weight: 500; }
    .mf .m-q { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); font: 400 14px/1 var(--mono); }
    .mf .m-q small { font: 400 12px/1 var(--sans); color: var(--sub); }
    .mf .m-fl { display: grid; grid-template-columns: repeat(2, max-content); justify-items: start; gap: 6px; }
    .mf .m-fl span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; color: var(--sub); box-shadow: inset 0 0 0 1px var(--line-2); }
    .mf .m-fl span.on { background: var(--ink); color: #FAFAFA; box-shadow: none; }
    .mf .m-fl b { font-weight: 600; }
    .mf .m-item { margin-top: 4px; padding: 11px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--indigo); }
    .mf .m-item p { margin: 0; }
    .mf .m-item p:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
    .mf .m-item b { font-size: 14.5px; font-weight: 500; }
    .mf .m-item small { font-size: 12px; color: var(--sub); white-space: nowrap; }
        .mf .m-ir { display: grid; grid-template-columns: 28px 30px 1fr auto; gap: 8px; padding: 3px 0; font-size: 12.5px; color: var(--sub); }
    .mf .m-ir .sc { font-family: var(--mono); color: var(--ink); }
    .mf .m-ch { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
    .mf .m-ch small { font-size: 12px; color: var(--sub); }
    .mf .m-ch p { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; }
    .mf .m-ch b { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
    .mf .m-ch .pill { font-size: 12px; }
    .mf .m-esc { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; }
    .mf .m-esc span { flex: none; padding: 3px 7px; border-radius: 6px; font: 500 11px/1.3 var(--mono); letter-spacing: .05em; color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px rgba(146,64,14,.2); }
    .mf .m-score { display: flex; align-items: baseline; gap: 10px; }
    .mf .m-score b { font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
    .mf .m-score span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--bad); }
    .mf .m-score span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
    .mf .m-scale { position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #D8E6E2, #EFE4D4 50%, #EDD5DC); }
    .mf .m-scale i { position: absolute; left: 72%; top: -4px; width: 2px; height: 14px; border-radius: 1px; background: var(--ink); }
    .mf .m-ticks { display: flex; justify-content: space-between; font: 400 11px/1 var(--mono); color: var(--faint); }
    .mf .m-trace { list-style: none; margin: 0; padding: 0; }
    .mf .m-trace li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35; }
    .mf .m-trace li:first-child { border-top: 0; }
    .mf .m-trace li::before { content: ""; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.1 4.8-4.8' fill='none' stroke='%23FAFAFA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
    .mf .m-trace time { font: 400 12px/1.4 var(--mono); color: var(--sub); }
    .mf .m-sha { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 9px 11px; border-radius: 10px; background: var(--ok-bg); font-size: 13px; color: var(--ok); }
    .mf .m-sha span:last-child { font: 400 11.5px/1.5 var(--mono); }
    .mf .m-ep { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
    .mf .m-ep i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--indigo-soft); color: var(--indigo); }
    .mf .m-ep i svg { width: 13px; height: 15px; }
    .mf .m-ep p { display: grid; margin: 0; }
    .mf .m-ep b { font-size: 14.5px; font-weight: 500; }
    .mf .m-ep small { font: 400 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--indigo); }
    .mf .m-evl { margin: 0; font-size: 13.5px; line-height: 1.45; }
    .mf .m-k.m-miss { color: var(--warn); }
    .mf .m-tl { list-style: none; margin: 0; padding: 0; }
    .mf .m-tl li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
    .mf .m-tl li:first-child { border-top: 0; }
    .mf .m-tl time { font: 400 12px/1.6 var(--mono); color: var(--sub); }
    .mf .m-tl li > span { display: grid; gap: 2px; }
    .mf .m-tl b { font-size: 13.5px; font-weight: 500; }
    .mf .m-tl li > span > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; color: var(--sub); }
    .mf .m-tl .m-new b { color: var(--ok); }
    .mf .m-av { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 600 9px/1 var(--sans); font-style: normal; letter-spacing: 0; color: var(--indigo); background: var(--indigo-soft); }
    .mf .m-tnote { margin: 0; font-size: 13px; color: var(--sub); }
    .mf .m-callbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
    .mf .m-callbar b { margin-right: auto; font-size: 14px; font-weight: 500; }
    .mf .m-decided { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--ok); }
    .mf .m-decided .m-ck { width: 17px; height: 17px; background: var(--ok); }

    /* worked example: the same switch as why agentic, over a chain that reads down */
    .mf .m-switch button[data-m-x][aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), 0 4px 10px -6px rgba(10,10,10,.3); }
    .mf .m-switch button[data-m-x="cm"][aria-pressed="true"] { color: var(--indigo); box-shadow: 0 0 0 1.5px var(--indigo), 0 4px 10px -6px rgba(61,59,243,.45); }
    .mf .m-ex-card { padding: 16px; }
    .mf .m-ex-fig { margin: 0; }
    .mf .m-ex-card.is-cm .m-nmo, .mf .m-ex-card.is-nm .m-cmo { display: none !important; }
    .mf .m-lane { margin: 8px 0 10px; font: 400 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--indigo); }
    .mf .m-chain2 { list-style: none; margin: 0; padding: 0; display: grid; }
    .mf .m-node { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--m-card); box-shadow: 0 0 0 1px var(--line-2); }
    .mf .m-node i { grid-row: 1 / 3; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--indigo); }
    .mf .m-node b { font-size: 14.5px; font-weight: 500; }
    .mf .m-node small { font: 400 11px/1.3 var(--mono); color: var(--sub); }
    .mf .m-node.m-hit { background: var(--bad-bg); box-shadow: 0 0 0 1px rgba(136,19,55,.3); }
    .mf .m-node.m-hit i { background: var(--bad); box-shadow: none; }
    .mf .m-node.m-hit b { color: var(--bad); }
    .mf .m-edge { position: relative; margin-left: 16px; padding: 8px 0 8px 18px; font: 400 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
    .mf .m-edge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--line-2); }
    .mf .m-edge.m-hot { color: var(--indigo); }
    .mf .m-edge.m-hot::before { background: none; border-left: 1.5px dashed var(--indigo); }
    .mf .m-edge .m-llm { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--m-card); box-shadow: inset 0 0 0 1px rgba(61,59,243,.3); text-transform: none; letter-spacing: 0; font-family: var(--sans); color: var(--ink); }
    .mf .m-edge .m-adv { margin-top: 8px; }
    .mf .m-llm .m-lane { margin: 0 0 6px; }
    .mf .m-mrep { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sub); }
    .mf .m-mrep .m-k { display: block; margin-bottom: 3px; }
    .mf .m-mrep mark { padding: 0 3px; border-radius: 4px; color: var(--indigo); background: var(--indigo-soft); }
    .mf .m-adv { display: grid; gap: 3px; margin: 12px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); }
    .mf .m-res2 { display: grid; gap: 6px; margin: 4px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
    .mf .m-res2 p { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
    .mf .m-res2 p > b { grid-row: 1 / 3; }
    .mf .m-res2 p { display: grid; justify-items: start; row-gap: 4px; margin: 0; }
    .mf .m-res2 b { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
    .mf .m-res2 .m-high { color: var(--indigo); } .mf .m-res2 .m-clear { color: var(--sub); }
    .mf .m-res2 p > span { font-size: 15px; font-weight: 500; }
    .mf .m-res2 .m-cmo > span:nth-of-type(1) { color: var(--bad); }
    .mf .m-rev { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500 !important; color: var(--indigo); background: var(--indigo-soft); }
    .mf .m-diff { display: grid; gap: 0; margin-top: 24px; }
    .mf .m-diff > div { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
    .mf .m-diff > div:first-child { border-top: 0; padding-top: 0; }
    .mf .m-diff p:not(.m-k) { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--sub); }
    .mf .m-diff p > span:first-child { font-size: 13px; color: var(--faint); }
    .mf .m-diff p.c { color: var(--ink); font-weight: 500; }
    .mf .m-diff p.c > span:first-child { color: var(--indigo); font-weight: 400; }
    .mf .m-diff .m-mono { font-size: 12.5px; font-weight: 400; overflow-wrap: anywhere; }
    .mf .m-ex { padding-bottom: 64px; }
    .mf .m-nw { white-space: nowrap; }
    .mf .m-thesis { margin: 18px 0 0; font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }

    /* the dark chapter: architecture and data room */
    .mf .m-dark { color: #F4F4F6; padding-bottom: 64px; background: radial-gradient(90% 40% at 100% 30%, rgba(61,59,243,.22), rgba(61,59,243,0) 70%), #0A0A0A; }
    .mf .m-dark + .m-dark { padding-top: 24px; background: radial-gradient(90% 30% at 0% 60%, rgba(61,59,243,.16), rgba(61,59,243,0) 70%), #0A0A0A; }
    .mf .m-dark .eyebrow { color: #A4A3FA; }
    .mf .m-dark .m-lede { color: #A9A9B1; }
    /* architecture: the desktop's own core, playing at phone size */
    .mf .m-core-live { margin: 26px 0 0; }
    .mf .m-core-live .cfig { height: 400px; }
    .mf .m-core-live .events .hop { z-index: 3; }
    .mf .m-core-live .events .hop-name { z-index: 2; }
    .mf .m-hint { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; text-wrap: balance; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8E8E97; }
    .mf .m-hint::before { content: ""; flex: none; width: 22px; height: 1px; margin-top: .7em; background: rgba(255,255,255,.3); }

    .mf .m-vsteps { position: relative; list-style: none; margin: 28px 0 0; padding: 0; }
    .mf .m-vsteps::before { content: ""; position: absolute; left: 25px; top: 40px; bottom: 34px; width: 1.5px; background: rgba(169,168,255,.35); }
    .mf .m-vsteps li { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 50px; }
    .mf .m-vsteps li.in1, .mf .m-vsteps li.in2, .mf .m-vsteps li.in3 { border-left: 1px dashed rgba(169,168,255,.45); border-right: 1px dashed rgba(169,168,255,.45); background: rgba(61,59,243,.06); }
    .mf .m-vsteps li.in1 { padding-top: 38px; border-top: 1px dashed rgba(169,168,255,.45); border-radius: 16px 16px 0 0; }
    .mf .m-vsteps li.in3 { padding-bottom: 16px; border-bottom: 1px dashed rgba(169,168,255,.45); border-radius: 0 0 16px 16px; margin-bottom: 8px; }
    .mf .m-bl { position: absolute; left: 14px; top: 13px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #A4A3FA; }
    .mf .m-vn { position: absolute; left: 13px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 500 11px/1 var(--mono); color: #FAFAFA; background: var(--indigo); box-shadow: 0 0 0 4px #0A0A0A, 0 0 14px rgba(143,141,255,.55); transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
    .mf .m-vsteps li.in1 .m-vn { top: 38px; }
    .mf .m-vsteps[data-wait] li:not(.on) .m-vn { color: #C9C9D0; background: #1A1A21; box-shadow: 0 0 0 4px #0A0A0A, inset 0 0 0 1px rgba(255,255,255,.45); }
    .mf .m-vsteps li > b { font-size: 16px; font-weight: 500; }
    .mf .m-vsteps li > span:not(.m-vn):not(.m-bl) { font-size: 14px; color: #A9A9B1; }
    .mf .m-vsteps .m-vpack, .mf .m-vsteps .m-vhash { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 12px 7px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: #F4F4F6 !important; background: #111116; box-shadow: inset 0 0 0 1px rgba(169,168,255,.35); }
    .mf .m-vpack svg { width: 12px; height: 14px; color: #A4A3FA; }
    .mf .m-vpack small { font: 400 11px/1 var(--mono); color: #A9A9B1; }
    .mf .m-vhash { font: 400 12px/1 var(--mono) !important; }
    .mf .m-verify { margin-top: 22px; padding: 16px; color: var(--ink); }
    .mf .m-caps { display: grid; margin: 10px 0 0; }
    .mf .m-caps > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 9px 0; border-top: 1px solid var(--line); }
    .mf .m-caps > div:first-child { border-top: 0; }
    .mf .m-caps dt { font: 400 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
    .mf .m-caps dd { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--indigo); }
    .mf .m-ledh { display: flex; justify-content: space-between; margin: 12px 0 4px; font: 400 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
    .mf .m-led { list-style: none; margin: 0; padding: 0; }
    .mf .m-led li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
    .mf .m-led li > span { font: 400 11.5px/1.4 var(--mono); color: var(--sub); }
    .mf .m-led b { font-weight: 500; }
    .mf .m-vout { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ok); }
    .mf .m-vout .m-ck { width: 17px; height: 17px; margin-top: 1px; background: var(--ok); }
    .mf .m-vfoot { margin: 24px 0 0; font-size: 17px; line-height: 1.45; color: #C9C9D0; text-wrap: pretty; }
    .mf .m-uses { margin: 14px 0 0; font: 400 13px/1.7 var(--mono); color: #A9A9B1; }
    .mf .m-uses i { font-style: normal; color: #8E8E97; padding: 0 4px; }
    
    /* calibration: the three steps on the line, each with its record */
    .mf .m-cal .m-steps { margin-top: 30px; }
    .mf .m-cal .m-steps { padding-left: 32px; }
    .mf .m-cal .m-steps > li::before { display: none; }
    .mf .m-cal .m-steps > li:not(:last-child)::after { left: -21.75px; top: 26px; }
    .mf .m-cal .m-n { position: absolute; z-index: 1; left: -32px; top: 0; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; border-radius: 50%; font: 500 12px/1 var(--mono); color: #FAFAFA; background: var(--indigo); box-shadow: 0 0 0 4px var(--bg); transition: background .3s ease, color .3s ease; }
    .mf .m-cal .m-steps[data-wait] > li:not(.on) .m-n { color: var(--sub); background: var(--bg); box-shadow: 0 0 0 4px var(--bg), inset 0 0 0 1.5px #9A9AA3; }
    .mf .m-cal .m-steps h3 { line-height: 22px; }
    .mf .m-cal .m-steps h3 { text-wrap: balance; }
    .mf .m-who2 { text-wrap: pretty; }
    .mf .m-clc { display: grid; gap: 7px; }
    .mf .m-clh { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k p" "i i"; align-items: center; gap: 2px 8px; margin: 0; }
    .mf .m-clh .m-k { grid-area: k; } .mf .m-clh .m-id { grid-area: i; } .mf .m-clh .pill { grid-area: p; }
    .mf .m-clh .m-id { font-size: 13px; color: var(--ink); }
    .mf .m-clh .pill { font-size: 12px; }
    .mf .m-who2 { margin: 0; font-size: 13.5px; color: var(--sub); }
    .mf .m-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding-top: 7px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; }
    .mf .m-kv { gap: 2px; }
    .mf .m-kv > span { font: 400 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
    .mf .m-kv b { font-weight: 500; color: var(--ink); }
    .mf .m-kv b.m-id { font-size: 12.5px; font-weight: 400; }
    .mf .m-kv s, .mf .m-kv .hi { color: var(--bad); text-decoration-color: var(--bad); }
    .mf .m-kv em { font-style: normal; color: var(--warn); }
    .mf .m-calid { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 6px; font: 400 11.5px/1.5 var(--mono); color: var(--indigo); background: var(--indigo-soft); }
    .mf .m-by { margin: 0; font: 400 11.5px/1.4 var(--mono); color: var(--sub); }
    .mf .m-hc { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--indigo); }
  }
  @media (max-width: 359px) {
    .mf .m-diff p:not(.m-k), .mf .m-caps > div, .mf .m-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  }
  @media (max-width: 299px) {
    .mf .m-sec { scroll-margin-top: 124px; }
    .mf .m-led li { grid-template-columns: 16px minmax(0, 1fr); }
    .mf .m-led li > span:last-child { grid-column: 2; }
    .mf .m-ir { grid-template-columns: 28px 30px minmax(0, 1fr); }
    .mf .m-sha, .mf .m-ep { flex-wrap: wrap; grid-template-columns: 30px minmax(0, 1fr); }
    .mf .m-q, .mf .m-mono, .mf .m-id, .mf .m-calid { overflow-wrap: anywhere; }
    .mf .m-res2 p { grid-template-columns: minmax(0, 1fr); }
    .mf .m-res2 p > b { grid-row: auto; }
    .mf .m-vsteps .m-vpack { flex-wrap: wrap; white-space: normal; }
    .mf .m-vsteps li { padding-right: 10px; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { .mf .m-tds > p, .mf .m-pane, .mf .m-chips button, .mf .m-vn { transition: none !important; } }
  /* ---------- end stable 2.148 ---------- */

  /* ---------- stable 2.149 · phone: evidence thread ---------- */
  /* (refined in stable 2.151) */
  .m-thread, .m-tail { display: none; }
  @media (max-width: 700px) {
    main { position: relative; }

    /* the hero's live agent stream: whole lines only, the newest at the foot, under one hairline; the human in ink */
    .mf .m-hero .m-acts { margin-top: 24px; }
    .mf .m-hero .m-stage { margin-top: 24px; }
    .mf .m-stream { position: relative; margin: 12px 0 0; height: 90px; overflow: hidden; border-top: 1px solid var(--line); -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px); }
    .mf .m-stream ol { position: absolute; left: 0; right: 0; bottom: 0; list-style: none; margin: 0; padding: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
    .mf .m-stream li { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 8px; align-items: start; font-size: 13.5px; line-height: 1.36; color: var(--ink); animation: m-in .38s cubic-bezier(.2,.7,.2,1) both; }
    .mf .m-stream li.m-past { color: var(--faint); }
    .mf .m-stream li > b { display: inline-flex; align-items: center; gap: 6px; height: 18px; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--indigo); }
    .mf .m-stream li > b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .mf .m-stream li.m-now > b::before { animation: m-pulse 1.1s ease-in-out infinite; }
    .mf .m-stream li.m-human > b { color: var(--ink); }
    .mf .m-stream li.m-proof > b { color: var(--ok); }
    .mf .m-stream li.m-past > b { color: var(--faint); }
    .mf .m-stream li.m-past > b::before { animation: none; }
    @keyframes m-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @keyframes m-pulse { 50% { opacity: .25; } }
    /* the pack's hash in full once it is hashed: the SHA-256 of this case record, computed in the visitor's browser */
    .mf .m-case .a-rec { text-align: left; }
    .mf .m-hash { margin: 4px 0 0; font: 400 11px/1.45 var(--mono); letter-spacing: .02em; color: var(--indigo); visibility: hidden; overflow-wrap: anywhere; }
    .mf .m-hash span { display: block; }
    .mf .m-case .a-rec.on + .m-hash { visibility: visible; }

    /* the evidence thread: in the outer gutter, clear of every card; it gives way where a section draws its own line */
    .m-thread { display: block; position: absolute; z-index: 4; left: 0; top: 0; width: 10px; pointer-events: none; }
    .m-thread-track, .m-thread-fill { position: absolute; left: 4.25px; top: 0; width: 1.5px; height: 100%; border-radius: 1px; }
    .m-thread-track { background: rgba(61,59,243,.12); }
    .m-thread-fill { background: linear-gradient(rgba(61,59,243,.3), #3D3BF3 60px); transform-origin: top; transform: scaleY(0); will-change: transform; }
    .m-thread .m-node { position: absolute; left: 2px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(61,59,243,.35); transition: background .35s ease, box-shadow .35s ease; }
    .m-thread .m-node.on { background: #3D3BF3; box-shadow: none; }
    .m-thread .m-node.m-dk { background: #0A0A0A; box-shadow: inset 0 0 0 1.5px rgba(169,168,255,.45); }
    .m-thread .m-node.m-dk.on { background: #8F8DFF; box-shadow: none; }
    /* at the final call the thread turns in, runs to the mark and becomes it; the pack seals inside the arcs */
    .m-tail { display: block; position: absolute; z-index: 4; left: 0; top: 0; overflow: visible; pointer-events: none; }
    .m-tail path { fill: none; stroke: #3D3BF3; stroke-width: 1.5; stroke-linecap: round; }
    .m-tail path.m-tail-bg { stroke: rgba(61,59,243,.12); }
    main > section.final .fc-in { position: relative; }
    .m-seal-badge { position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 8px; display: grid; place-items: center; background: #3D3BF3; color: #FAFAFA; box-shadow: 0 6px 16px -6px rgba(61,59,243,.75); opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .45s cubic-bezier(.3,1.5,.5,1); pointer-events: none; }
    .m-seal-badge svg { width: 15px; height: 15px; }
    .m-seal-badge.on { opacity: 1; transform: none; }

    /* light and dark chapters: one clean cut each way, the dark side lit from its edge in indigo */
    .mf .m-arch { background: radial-gradient(120% 40% at 50% 0%, rgba(61,59,243,.26), rgba(61,59,243,0) 62%), radial-gradient(90% 40% at 100% 34%, rgba(61,59,243,.18), rgba(61,59,243,0) 70%), #0A0A0A !important; }
    .mf .m-vdr { background: radial-gradient(90% 30% at 0% 55%, rgba(61,59,243,.16), rgba(61,59,243,0) 70%), radial-gradient(120% 30% at 50% 100%, rgba(61,59,243,.2), rgba(61,59,243,0) 62%), #0A0A0A !important; }
    main > section.nda.dark { background-image: radial-gradient(120% 40% at 50% 0%, rgba(61,59,243,.24), rgba(61,59,243,0) 62%), radial-gradient(120% 34% at 50% 100%, rgba(61,59,243,.16), rgba(61,59,243,0) 62%); background-color: #0A0A0A; }

    /* the glass header: light glass on light chapters, dark glass on dark ones */
    header.nav { background: rgba(250,250,250,.8) !important; -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); transition: transform .28s cubic-bezier(.3,.7,.2,1), background-color .35s ease; }
    header.nav.m-open { -webkit-backdrop-filter: none; backdrop-filter: none; }
    header.nav.m-ondark { background: rgba(14,14,18,.66) !important; box-shadow: 0 1px 0 rgba(255,255,255,.08) !important; }
    header.nav.m-ondark .brand b { color: #FAFAFA; }
    header.nav.m-ondark .brand span { color: #A9A9B1; }
    header.nav.m-ondark .btn.sm { background: #F4F4F6; color: #0A0A0A; }
    header.nav.m-ondark .m-btn i { background: #F4F4F6; }

    /* data room uses, one per line */
    .mf ul.m-uses { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; font: 400 13px/1.6 var(--mono); color: #A9A9B1; }
    .mf ul.m-uses li { display: flex; align-items: center; gap: 10px; }
    .mf ul.m-uses li::before { content: ""; width: 10px; height: 1px; background: rgba(169,168,255,.6); }

    .mf .m-open > span { text-wrap: balance; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .mf .m-stream li, .mf .m-stream li.m-now > b::before { animation: none; }
    .m-thread .m-node, .m-seal-badge { transition: none; }
  }
  /* ---------- end stable 2.149 ---------- */

  /* ---------- stable 2.150 · phone: back half ---------- */
  /* Stable 2.150: the back half, mobile-first. Phone only; every section keeps its desktop words and its own animation engine. */
  @media (max-width: 700px) {
    /* compounding calibration: a taller chart, full width; the three stages read as a legend under it instead of floating labels */
    main #early-access .ea2-plot { height: 250px; }
    main #early-access .ea2-coh { display: none; }
    main #early-access .ea2-fig { margin-inline: 0; }
    .m-ea-legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
    .m-ea-legend li { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
    .m-ea-legend li:first-child { border-top: 0; }
    .m-ea-legend small { font: 400 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
    .m-ea-legend b { display: block; font-size: 15px; font-weight: 500; }
    .m-ea-legend span { display: block; font-size: 14px; color: var(--sub); }
    .m-ea-legend li:last-child b { color: var(--indigo); }

    /* workforce: the console in the brand white; agents marked by dots, not desktop pointers (the lifecycle switch stays as in 2.127) */
    main #workforce .wf-console { background: var(--bg); }
    main #workforce .wf-mate:not(.human) svg, main #workforce .wf-by svg { display: none; }
    main #workforce .wf-mate:not(.human)::before, main #workforce .wf-by::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 3px rgba(61,59,243,.12); }
    main #workforce .wf-by::before { width: 6px; height: 6px; box-shadow: none; }
    main #workforce .wf-mate.on::before { box-shadow: 0 0 0 4px rgba(61,59,243,.22), 0 0 10px rgba(61,59,243,.45); }
    main #workforce .wf-copy p { font-size: 14px; line-height: 1.5; color: var(--sub); }
    main #workforce .wf-copy h3 { font-size: 19px; }

    /* FAQ: rows at a steady rhythm, nothing left hanging below */
    main #faq { padding-bottom: 56px !important; }
    main #faq .qa summary { font-size: 17px; }

    /* the final call is the climax: most of a screen, larger type, the mark drawing itself, where the thread seals */
    main > section.final { min-height: min(86svh, 720px); display: grid; align-content: center; padding-block: 72px !important; }
    main > section.final .fc-mark { width: 112px; margin-bottom: 26px; }
    main > section.final h2 { font-size: min(46px, calc((100vw - 32px) / 7.4)); line-height: 1.02; letter-spacing: -0.04em; }
    main > section.final .fc-line { font-size: 18px; margin-top: 14px; }
    main > section.final .fc-btn { min-height: 52px; padding: 0 26px; font-size: 16px; margin-top: 26px; }

    /* footer: the brand white, the four link groups folded into rows; one tap opens a group */
    footer { background: var(--bg) !important; }
    footer .foot-grid { display: block !important; }
    footer .foot-grid > div:first-child { padding-bottom: 22px; margin-bottom: 6px; }
    footer .foot-grid > div.m-fold { border-top: 1px solid var(--line); }
    footer .foot-grid > div.m-fold:last-of-type { border-bottom: 1px solid var(--line); }
    footer .m-fold h4 { margin: 0 !important; }
    footer .m-fold h4 button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; font: 500 15px/1 var(--sans); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
    footer .m-fold h4 button::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border-right: 1.5px solid var(--sub); border-bottom: 1.5px solid var(--sub); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease; }
    footer .m-fold.open h4 button::after { transform: rotate(-135deg) translate(-2px, -2px); }
    footer .m-fold h4 button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 6px; }
    footer .m-fold ul { display: none !important; margin: 0 0 14px !important; }
    footer .m-fold.open ul { display: grid !important; gap: 0; }
    footer .foot-base { margin-top: 22px !important; }
  }
  @media (max-width: 299px) {
    /* 200% zoom: each workforce step's value under its label; pricing's count above its note */
    main #workforce .wf-step { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "k" "by" "v" !important; }
    main #workforce .wf-step b { justify-self: start !important; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { footer .m-fold h4 button::after { transition: none; } }
  /* ---------- end stable 2.150 ---------- */

  /* ---------- stable 2.151 · phone: thread refined (no styles) ---------- */
  /* ---------- end stable 2.151 ---------- */

  /* ---------- stable 2.152 · phone: pricing and articles as 2.149 (no styles) ---------- */
  /* ---------- end stable 2.152 ---------- */

  /* ---------- stable 2.153 · phone: why agentic in the pricing grammar ---------- */
  @media (max-width: 700px) {
    /* why agentic in the pricing's grammar: one white card, two panels, grey against indigo; the rows across, the count in the foot as pricing's "Paid seats: 17" */
    .mf .m-ra2 { margin: 26px 0 0; padding: 14px 12px 12px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-product); display: grid; gap: 10px; }
    .mf .m-ra2-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 4px 2px; font-size: 14px; font-weight: 500; }
    .mf .m-ra2-p { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "r" "f" "c"; column-gap: 14px; row-gap: 10px; align-items: start; padding: 14px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
    .mf .m-ra2-wf { grid-template-areas: "t" "r" "f"; }
    .mf .m-ra2-cm { background: #F7F7FE; box-shadow: inset 0 0 0 1px rgba(61,59,243,.16); }
    .mf .m-ra2-t { grid-area: t; display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); letter-spacing: -0.005em; color: var(--ink); }
    .mf .m-ra2-t i { width: 7px; height: 7px; border-radius: 50%; background: #A3A3AC; }
    .mf .m-ra2-cm .m-ra2-t { color: var(--indigo); }
    .mf .m-ra2-cm .m-ra2-t i { background: var(--indigo); }
    .mf .m-ra2-rows { grid-area: r; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
    .mf .m-ra2-rows li { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 8px; align-items: start; font-size: 13px; line-height: 1.3; color: #3A3A3F; }
    .mf .m-ra2-rows li > svg { width: 13px; height: 13px; margin-top: 1px; color: #8E8E97; }
    .mf .m-ra2-cm .m-ra2-rows li { color: var(--ink); }
    .mf .m-ra2-ck { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #FAFAFA; background: var(--indigo); transition: background .3s ease, box-shadow .3s ease; }
    .mf .m-ra2-ck svg { width: 11px; height: 11px; transition: opacity .25s ease; }
    .mf .m-ra2-f { grid-area: f; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; margin: 2px 0 0; }
    .mf .m-ra2-f b { font-size: 30px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
    .mf .m-ra2-cm .m-ra2-f b { color: var(--indigo); }
    .mf .m-ra2-f span { font-size: 13px; line-height: 1.4; color: var(--sub); }
    .mf .m-ra2-call { grid-area: c; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 0; padding-top: 9px; border-top: 1px solid rgba(61,59,243,.14); font-size: 13px; transition: opacity .4s ease; }
    .mf .m-ra2-call > span:first-child { font-weight: 500; }
    .mf .m-ra2-call b { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; box-shadow: inset 0 0 0 1.2px var(--ink); }
    .mf .m-ra2-who { display: inline-flex; align-items: center; gap: 4px; color: var(--sub); }
    .mf .m-ra2-who svg { width: 12px; height: 12px; }
    /* before the run: the agents' rows wait, the count is at zero, the call is not yet asked */
    .mf .m-ra2.m-wait .m-ra2-cm li:not(.on) .m-ra2-ck { background: transparent; box-shadow: inset 0 0 0 1.3px rgba(61,59,243,.35); }
    .mf .m-ra2.m-wait .m-ra2-cm li:not(.on) .m-ra2-ck svg { opacity: 0; }
    .mf .m-ra2.m-wait .m-ra2-cm li:not(.on) { color: var(--faint); }
    .mf .m-ra2.m-wait .m-ra2-call:not(.on) { opacity: 0; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { .mf .m-ra2-ck, .mf .m-ra2-ck svg, .mf .m-ra2-call { transition: none; } }
  /* ---------- end stable 2.153 ---------- */

  /* ---------- stable 2.154 · phone: example in the pricing grammar ---------- */
  @media (max-width: 700px) {
    /* the worked example in the pricing's grammar: the card and panels of why agentic (153.css); the path left, the result right */
    .mf .m-ex2 .m-ra2-p { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
    .mf .m-ex2 .m-ra2-wf { grid-template-areas: "t t" "p r" "a a"; }
    .mf .m-ex2 .m-ra2-cm { grid-template-areas: "t t" "p r" "a a" "k k"; }
    .mf .m-ex2-path { grid-area: p; list-style: none; margin: 0; padding: 0; display: grid; color: #A3A3AC; }
    .mf .m-ra2-cm .m-ex2-path { color: var(--indigo); }
    .mf .m-ex2-n { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 9px; align-items: center; }
    .mf .m-ex2-n i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
    .mf .m-ex2-n b { font-size: 13.5px; line-height: 1.3; font-weight: 500; color: var(--ink); }
    .mf .m-ex2-n small { grid-column: 2; font: 400 11px/1.3 var(--mono); color: var(--sub); }
    .mf .m-ex2-hit i { background: currentColor; }
    .mf .m-ex2-e { position: relative; margin-left: 4px; padding: 4px 0 4px 14px; font: 400 11px/1.3 var(--mono); color: var(--sub); }
    .mf .m-ex2-e::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; border-left: 1.5px solid currentColor; transform-origin: top; }
    .mf .m-ra2-wf .m-ex2-e::before { color: #C4C4CB; }
    .mf .m-ra2-cm .m-ex2-e::before { color: rgba(61,59,243,.5); }
    .mf .m-ex2-dash::before { border-left-style: dashed !important; }
    .mf .m-ra2-cm .m-ex2-dash { color: var(--indigo); }
    .mf .m-ra2-cm .m-ex2-dash::before { color: var(--indigo); }
    .mf .m-ex2-r { grid-area: r; display: grid; justify-items: start; gap: 6px; margin: 0; }
    .mf .m-ex2-r b { font-size: 30px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--sub); }
    .mf .m-ra2-cm .m-ex2-r b { color: var(--indigo); }
    .mf .m-ex2-r > span { font-size: 13px; line-height: 1.4; color: var(--sub); }
    .mf .m-ra2-cm .m-ex2-r > span { color: var(--ink); }
    .mf .m-ra2-cm .m-ex2-r .m-ex2-rev { margin-top: 2px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--indigo); background: var(--indigo-soft); }
    .mf .m-ex2-adv { grid-area: a; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 2px 0 0; font-size: 13px; color: var(--sub); }
    .mf .m-ra2-cm .m-ex2-adv { color: var(--ink); }
    .mf .m-ex2-pack { grid-area: k; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 2px 0 0; padding-top: 9px; border-top: 1px solid rgba(61,59,243,.14); font-size: 13px; font-weight: 500; }
    .mf .m-ex2-id { font: 400 12px/1.3 var(--mono); color: var(--indigo); }
    /* on phones the four comparison rows leave the screen (each is in the panels) and stay for screen readers */
    .mf .m-ex .m-diff { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    /* before the run: the cmpliance path waits as a trace; the result, its evidence and the pack are not yet there */
    .mf .m-ex2 [data-ex2-path] > li { transition: opacity .3s ease; }
    .mf .m-ex2 [data-ex2-path] > .m-ex2-e::before { transition: transform .26s ease; }
    .mf .m-ex2 [data-ex2-late] { transition: opacity .4s ease; }
    .mf .m-ex2.m-ex2-wait [data-ex2-path] > li:not(.on) { opacity: .22; }
    .mf .m-ex2.m-ex2-wait [data-ex2-path] > .m-ex2-e:not(.on)::before { transform: scaleY(0); }
    .mf .m-ex2.m-ex2-wait [data-ex2-late]:not(.on) { opacity: 0; }
  }
  @media (max-width: 349px) {
    /* too narrow for the result beside the path: it follows the path */
    .mf .m-ex2 .m-ra2-p { grid-template-columns: minmax(0, 1fr); }
    .mf .m-ex2 .m-ra2-wf { grid-template-areas: "t" "p" "a" "r"; }
    .mf .m-ex2 .m-ra2-cm { grid-template-areas: "t" "p" "a" "r" "k"; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { .mf .m-ex2 [data-ex2-path] > li, .mf .m-ex2 [data-ex2-path] > .m-ex2-e::before, .mf .m-ex2 [data-ex2-late] { transition: none; } }
  /* ---------- end stable 2.154 ---------- */

  /* ---------- stable 2.155 · phone: hero first screen ---------- */
  @media (max-width: 700px) {
    /* the first screen (founder, 20 Oct): on an iPhone 16 Pro (402 wide, about 718 px of page in Safari) the hero and the whole case card
       show without scrolling. Same words, same card, same run; only the spacing and a few sizes tighten. */
    .mf .m-hero { padding-top: 6px; }
    .mf .m-h1 { font-size: min(34px, calc((100vw - 32px) / 10.8)); }
    .mf .m-hero .m-lede { margin-top: 6px; font-size: 16px; line-height: 1.45; }
    .mf .m-hero .m-acts { margin-top: 14px; }
    .mf .m-hero .m-acts .btn { min-height: 44px; }
    .mf .m-hero .m-stage { margin-top: 10px; }
    .mf .m-case { padding: 10px 14px; }
    /* the app's "Cases" bar steps aside on phones (key-moment rule, 13 Oct): its status repeats the stream's last line */
    .mf .m-case-top { display: none; }
    .mf .m-case-name { margin: 2px 0 1px; font-size: 18px; }
    /* the agent stream: two lines, the box as tall as they are */
    .mf .m-stream { margin-top: 4px; height: 56px; }
    .mf .m-stream ol { padding-bottom: 3px; gap: 4px; }
    .mf .m-stream li { font-size: 12.5px; line-height: 1.3; }
    .mf .m-cells { margin-top: 4px; }
    .mf .m-cells > div { gap: 1px; padding: 5px 0 4px; }
    .mf .m-pack { margin-top: 5px; }
    .mf .m-pack b { font-size: 24px; line-height: 1; }
    .mf .m-bar { margin: 5px 0 6px; }
    .mf .m-seal-slot, .mf .m-case .m-seal-slot .a-seal:not(.wait) { height: 44px; }
    .mf .m-case .a-rec { margin-top: 6px; }
    /* the pack's real hash in short on the record line (155.js), as on the desktop's record line, instead of two lines in full */
    .mf .m-hash { display: none; }
    .mf .m-case .a-rec[data-short]::after { content: " · " attr(data-short); }
  }
  /* ---------- end stable 2.155 ---------- */

  /* ---------- stable 2.156 · phone: hero breathes ---------- */
  @media (max-width: 700px) {
    /* the first screen breathes with the screen (founder, 20 Oct: 2.155 "compacted way too hard"). Every gap and size in the hero runs
       from 2.155's compact value on a 718 px screen (an iPhone 16 Pro in Safari) to 2.154's value on a 940 px screen, so the hero and
       the whole card fit on the first screen and use the height there is. --m-t is the extra height, 0 to 222 px; each factor is that
       property's own range divided by 222. */
    .mf .m-hero { --m-t: clamp(0px, calc(100svh - 718px), 222px); padding-top: calc(6px + var(--m-t) * .126); }
    .mf .m-h1 { font-size: min(calc((100vw - 32px) / 9.6), calc(34px + var(--m-t) * .027)); }
    .mf .m-hero .m-lede { margin-top: calc(6px + var(--m-t) * .045); font-size: calc(16px + var(--m-t) * .0045); }
    .mf .m-hero .m-acts { margin-top: calc(14px + var(--m-t) * .045); }
    .mf .m-hero .m-acts .btn { min-height: calc(44px + var(--m-t) * .018); }
    .mf .m-hero .m-stage { margin-top: calc(10px + var(--m-t) * .063); }
    .mf .m-case { padding: calc(10px + var(--m-t) * .036) calc(14px + var(--m-t) * .009); }
    .mf .m-case-name { margin-top: calc(2px + var(--m-t) * .018); }
    .mf .m-stream { height: calc(56px + var(--m-t) * .126); }
    .mf .m-stream ol { gap: calc(4px + var(--m-t) * .0135); padding-bottom: calc(3px + var(--m-t) * .018); }
    .mf .m-cells { margin-top: calc(4px + var(--m-t) * .036); }
    .mf .m-cells > div { padding: calc(5px + var(--m-t) * .0225) 0 calc(4px + var(--m-t) * .0315); }
    .mf .m-pack { margin-top: calc(5px + var(--m-t) * .0315); }
    .mf .m-bar { margin: calc(5px + var(--m-t) * .0135) 0 calc(6px + var(--m-t) * .018); }
    .mf .m-seal-slot, .mf .m-case .m-seal-slot .a-seal:not(.wait) { height: calc(44px + var(--m-t) * .009); }
    .mf .m-case .a-rec { margin-top: calc(6px + var(--m-t) * .0135); }
  }
  /* ---------- end stable 2.156 ---------- */

  /* ---------- stable 2.157 · phone: thread from the next section (no styles) ---------- */
  /* ---------- end stable 2.157 ---------- */

  /* ---------- stable 2.158 · phone: no thread ---------- */
  @media (max-width: 700px) {
    /* no evidence thread on phones (founder, 20 Oct: the line that follows the page "is a gimmick… it kills the whole minimalist approach").
       The line, its nodes, its tail into the final mark and the check in the mark go; the 2.151 script keeps running for the header's
       dark glass over the dark chapters and the browser bar's colour. */
    .m-thread, .m-tail, .m-seal-badge { display: none !important; }
  }
  /* ---------- end stable 2.158 ---------- */

  /* ---------- stable 2.159 · phone: spacing after the thread ---------- */
  @media (max-width: 700px) {
    /* spacing after the thread went (20 Oct inspection, shown to the founder as before/after):
       the final call at its own height (its 86% height was for the thread's ending into the mark) */
    main > section.final { min-height: 0; padding-block: 48px 64px !important; }
    /* the footer: one hairline above the © line, not two */
    footer .foot-grid > div.m-fold:last-of-type { border-bottom: 0; }
    footer .foot-base { margin-top: 0 !important; }
    /* insights: the heading and its note at the rhythm of the other sections; the cards in the brand white */
    main #insights .sec-head { row-gap: 14px; }
    main #insights .art2 { background: var(--bg) !important; }
  }
  /* ---------- end stable 2.159 ---------- */

  /* ---------- stable 2.160 · phone: step lines drawn (no styles) ---------- */
  /* ---------- end stable 2.160 ---------- */

  /* ---------- stable 2.161 · phone: tour counts (no styles) ---------- */
  /* ---------- end stable 2.161 ---------- */

  /* ---------- stable 2.162 · phone: hero rows, option A ---------- */
  @media (max-width: 700px) {
    /* the hero card's gap, option A (20 Oct, shown to the founder online): the four evidence rows each take a full line, label left and status
       right, so even "Replay outside freshness bound" stays on one line; no reserved second line, and the card keeps one height through the run */
    .mf .m-cells > div:nth-child(-n+4) { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: calc(4px + var(--m-t, 0px) * .018) 0; }
    .mf .m-cells > div:nth-child(-n+4) > span:first-child { flex: none; }
    .mf .m-cells > div:nth-child(-n+4) .p { min-height: 0 !important; white-space: nowrap; justify-content: flex-end; text-align: right; }
  }
  @media (max-width: 359px) {
    /* below the target phones the long status cannot fit on one line beside its label: it wraps there (the card grows a line for that second) */
    .mf .m-cells > div:nth-child(-n+4) .p { white-space: normal; }
  }
  /* ---------- end stable 2.162 ---------- */

  /* ---------- stable 2.163 · phone: hero rows, option B ---------- */
  @media (max-width: 700px) {
    /* the hero card's gap, option B (20 Oct): option A without the hairlines and dots between the evidence rows, labels in grey, quieter */
    .mf .m-cells > div:nth-child(-n+4) { border-top: 0 !important; }
    .mf .m-cells > div:nth-child(1) { padding-top: calc(8px + var(--m-t, 0px) * .018) !important; }
    .mf .m-cells > div:nth-child(4) { padding-bottom: calc(8px + var(--m-t, 0px) * .018) !important; }
    .mf .m-cells > div:nth-child(-n+4) .p::before { display: none; }
    .mf .m-cells > div:nth-child(-n+4) > span:first-child { color: var(--sub); }
    .mf .m-cells > div:nth-child(-n+4) .p { font-size: 13px !important; }
  }
  /* ---------- end stable 2.163 ---------- */

  /* ---------- stable 2.164 · phone: one system ---------- */
  @media (max-width: 700px) {
    /* stage A of the 21 Oct plan (founder: "9 or nothing"): one system for the whole phone page. Nothing here changes a word.
       1 · one gap. 72 px between the end of one section's content and the start of the next, everywhere; today 44 / 64 / 88 / 96 / 104.
       Light sections carry the gap above them; a light section before a dark chapter also carries 72 below; dark chapters carry 72 inside both edges. */
    .mf .m-sec:not(.m-hero) { padding-top: 72px; padding-bottom: 0; }
    .mf > #shift { padding-block: 72px 0; }
    .mf .m-sec:has(+ .m-dark) { padding-bottom: 72px; }
    .mf .m-sec.m-dark { padding-top: 72px; padding-bottom: 72px; }
    .mf .m-dark + .m-sec.m-dark { padding-top: 0; }
    main > section.sec, main > section#early-access.sec, main > section#workforce.sec, main > section#pricing.sec, main > section#insights.sec, main > section#faq.sec { padding-block: 72px 0 !important; }
    main > section#pricing.sec { padding-bottom: 72px !important; }          /* before the dark track record */
    main > section.sec.nda { padding-block: 72px !important; }
    main > section.final { padding-block: 72px !important; }
    footer { padding-top: 72px !important; }
    /* 2 · one type scale. Section headings 30 / 1.08 / -0.03em (the phone tree's value; the manifesto's statement and the final call's headline keep their own size on purpose);
       ledes 17 / 1.5; one eyebrow: 12 px mono, regular, letter-spacing .08em. */
    .mf > #shift h2, main > section.sec h2 { font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -0.03em !important; }
    main > section.sec .lede, main > section#faq .side > p:not(.fq-link), main > section.final .fc-line { font-size: 17px !important; line-height: 1.5 !important; }
    .mf .eyebrow, main > section .eyebrow, main > section#insights.sec .eyebrow { font-weight: 400 !important; font-size: 12px !important; line-height: 1.55 !important; letter-spacing: .08em !important; }
    /* 3 · one button: 44 px, 16 px text, for every call to action (the hero's already is). */
    .mf .m-how .btn, main > section#pricing .pj-cta .btn, main > section.final .fc-btn { min-height: 44px !important; padding: 0 22px !important; font-size: 16px !important; }
    /* 4 · one card radius: 18 for every outer card (the hero's case, the tour, the data room's card, and the step cards of How it works and calibration); inner panels keep 12. */
    .mf .m-case, .mf .m-card, .mf .m-d { border-radius: 18px; }
    .mf .m-switch-bar { border-radius: 18px 18px 0 0; }
  }
  /* ---------- end stable 2.164 ---------- */

  /* ---------- stable 2.165 · phone: one step style ---------- */
  @media (max-width: 700px) {
    /* stage A, second step: one step style. How it works draws its steps as a mono number ("01") over the title with a dot on the line.
       Calibration and the data room drew filled circles instead; they now draw the same mono number and dot. Their numbers read 01–03 and 01–05 (165.py). */
    .mf .m-cal .m-steps > li::before { display: block; left: -29px; }               /* calibration keeps its 32 px indent (its cards fit their timestamp line); the dot and line land on the same x as How it works' */
    .mf .m-cal .m-steps > li:not(:last-child)::after { left: -23.75px; top: 30px; }
    .mf .m-cal .m-n { position: static; left: auto; top: auto; display: block; width: auto; height: auto; margin: 0 0 6px; border-radius: 0; font: 400 12px/1 var(--mono); letter-spacing: .04em; color: var(--faint); background: none; box-shadow: none; }
    /* the data room, on dark: the number in the text column, the dot on the line beside the title, one line segment per step as in How it works */
    .mf .m-vsteps::before { display: none; }
    .mf .m-vn { position: static; left: auto; top: auto; display: block; width: auto; height: auto; margin: 0 0 4px; border-radius: 0; font: 400 12px/1 var(--mono); letter-spacing: .04em; color: rgba(244,244,246,.55); background: none; box-shadow: none; }
    .mf .m-vsteps li.in1 .m-vn { top: auto; }
    .mf .m-vsteps li > b { position: relative; }
    .mf .m-vsteps li > b::before { content: ""; position: absolute; z-index: 1; left: -30.25px; top: calc(.75em - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 4px #0A0A0A; }
    .mf .m-vsteps li.in1 > b::before, .mf .m-vsteps li.in2 > b::before, .mf .m-vsteps li.in3 > b::before { left: -31.25px; box-shadow: 0 0 0 4px rgb(13,13,24); }
    .mf .m-vsteps li:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 40px; height: 100%; width: 1.5px; background: var(--indigo); }
    .mf .m-vsteps li.in1::after { top: 66px; }
    .mf .m-vsteps li.in3::after { height: calc(100% + 8px); }
  }
  /* ---------- end stable 2.165 ---------- */

  /* ---------- stable 2.166 · phone: motion states ---------- */
  @media (max-width: 700px) {
    /* stage B of the 21 Oct plan: the motion states the audit flagged. No words change (one phone-only text link is hidden).
       1 · the hero stream shows whole lines or nothing: a line whose top would sit above the stream is hidden (166.js), never clipped; the top fade goes with it */
    .mf .m-stream { -webkit-mask-image: none; mask-image: none; }
    .mf .m-stream li.m-clip { visibility: hidden; }
    /* 3 · the tour's chip row fades out over 72 px at the edge instead of 36, so the next chip reads as "more", not as cut */
    .mf .m-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
    /* 4 · the workforce's "How it works" text link under its lede points at the desktop's section, which phones do not show; hidden on phones */
    main #workforce .sec-aside > p:has(> a.tlink) { display: none; }
    /* 5 · the workforce's outcome line stays dimmed until its lifecycle hands over (the desktop greys it; on a phone still that read as full strength) */
    main #workforce .wf-lane .wf-o { transition: color .4s ease, opacity .4s ease; }
    main #workforce .wf-lane.pending .wf-o { opacity: .45; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { main #workforce .wf-lane .wf-o { transition: none; } }
  /* ---------- end stable 2.166 ---------- */

  /* ---------- stable 2.167 · phone: tour panes level ---------- */
  @media (max-width: 700px) {
    /* stage C, the tour (2.167): the six panes share one height so the page never jumps while the tour plays; the tallest (the trace) was 31 px
       taller than the queue, which left the queue's card with an empty bottom at rest. The tall panes come in: the trace rows and the evidence
       lists sit tighter, so every pane ends within a card padding of the others. No words change. */
    .mf .m-trace li { padding: 3px 0; }
    .mf .m-pane > .m-k { margin-top: 4px; }
    .mf .m-sha { margin-top: 2px; }
    .mf .m-evl { line-height: 1.35; }
  }
  /* ---------- end stable 2.167 ---------- */

  /* ---------- stable 2.168 · phone: data room as one figure ---------- */
  @media (max-width: 700px) {
    /* stage C, the data room (2.168): one figure. The verification card sits inside step 05 as that step's product view (168.py). Its
       "Verification" label and the three capability rows are kept for screen readers only; the ledger and the check line are what the eye needs. */
    .mf .m-vsteps li > .m-verify { margin-top: 10px; padding: 12px 14px 14px; }
    .mf .m-vsteps li > .m-verify > .m-k, .mf .m-vsteps li > .m-verify .m-caps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .mf .m-vsteps li > .m-verify .m-ledh { margin-top: 0; }
    .mf .m-vsteps li > .m-verify .m-led li { padding: 7px 0; }
  }
  @media (max-width: 700px) {
    /* the ledger inside step 05 is its own list: 2.165's step dots, lines and step-row padding must not reach it */
    .mf .m-vsteps .m-led li { padding: 7px 0; border-left: 0; border-right: 0; background: none; }
    .mf .m-vsteps .m-led li::after, .mf .m-vsteps .m-led li > b::before { content: none; display: none; }
    .mf .m-vsteps .m-led li > b { position: static; font-size: 13.5px; }
    .mf .m-vsteps .m-led li > span { font: 400 11.5px/1.4 var(--mono); color: var(--sub); }
  }
  @media (max-width: 700px) {
    /* the card keeps the light palette it had as a direct child of the dark section, and its ledger refs sit under their titles in the narrower column */
    .mf .m-vsteps li > .m-verify { --ink: #0A0A0A; --sub: #5A5A5A; --faint: #8C8C93; color: var(--ink); }
    .mf .m-vsteps .m-led li { grid-template-columns: 16px minmax(0, 1fr); row-gap: 1px; }
    .mf .m-vsteps .m-led li > span:last-child:not(:empty) { grid-column: 2; }
  }
  @media (max-width: 700px) {
    /* 2.148 colours every span under a step row (#A9A9B1, 14 px); the ledger's own spans must win it back */
    .mf .m-vsteps .m-led li > span:not(.m-vn):not(.m-bl) { font: 400 11.5px/1.4 var(--mono); color: var(--sub); }
  }
  /* ---------- end stable 2.168 ---------- */

  /* ---------- stable 2.169 · phone: calibration key moment ---------- */
  @media (max-width: 700px) {
    /* stage C, calibration (2.169): the three cards at their key moment. Step 02 shows the override, the training line and the hash-chained mark;
       its scope and hash rows are read by screen readers but not drawn (the desktop keeps them). The cards sit a little tighter. */
    .mf .m-cal .m-kv.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
    .mf .m-cal .m-clc { gap: 6px; }
  }
  /* ---------- end stable 2.169 ---------- */

  /* ---------- stable 2.170 · phone: shift stronger and tighter ---------- */
  @media (max-width: 700px) {
    /* stage C, the shift (2.170): the three drawings read faint (their ink is drawn at 55 % and their guide lines at 14 %); on phones the ink
       goes to 82 % and the guides to 24 %, and the three units sit tighter, so the section reads as three clear statements, not three faint vignettes. */
    main #shift .sh-art svg [stroke="rgba(10,10,10,.55)"] { stroke: rgba(10,10,10,.82); }
    main #shift .sh-art svg [fill="rgba(10,10,10,.55)"] { fill: rgba(10,10,10,.82); }
    main #shift .sh-art svg [stroke="rgba(10,10,10,.14)"] { stroke: rgba(10,10,10,.24); }
    main #shift .sh-art svg [fill="rgba(10,10,10,.14)"] { fill: rgba(10,10,10,.24); }
    main #shift .sh-panel .sh-art { height: 92px; }
    main #shift .sh-panel .sh-art.c2, main #shift .sh-panel .sh-art.c3 { margin-top: 10px; }
    main #shift .sh-panel .sh-body { padding: 2px 0 10px; }
    main #shift .sh-panel .sh-res { padding: 10px 0 16px; }
  }
  /* ---------- end stable 2.170 ---------- */

  /* ---------- stable 2.171 · phone: one selector style ---------- */
  @media (max-width: 700px) {
    /* option for his call (2.171): one selector style. The tour's six steps are outlined chips; the workforce's three lifecycles were a segmented
       control with a sliding white thumb. The workforce's switch now draws as the tour's chips: outlined pills, the chosen one in indigo. Same buttons, same words. */
    main #workforce .ph-seg { display: flex; gap: 8px; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
    main #workforce .ph-seg button { flex: 1; min-height: 44px; height: auto; padding: 0 12px; border-radius: 999px !important; font: 500 15px/1 var(--sans); color: var(--sub); background: none !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; transition: color .2s ease, box-shadow .2s ease, background .2s ease; }
    main #workforce .ph-seg button::before { content: none; display: none; }
    main #workforce .ph-seg button[aria-current="true"] { color: var(--indigo); background: var(--bg) !important; box-shadow: inset 0 0 0 1.5px var(--indigo), 0 4px 12px -8px rgba(61,59,243,.5) !important; }
    main #workforce .ph-seg button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
  }
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) { main #workforce .ph-seg button { transition: none; } }
  /* ---------- end stable 2.171 ---------- */

  /* ---------- stable 2.172 · phone: articles without the quote ---------- */
  @media (max-width: 700px) {
    /* 2.172 · the articles, his call of 21 Oct: no pull-quote in the phone cards ("Let's not include a quote… one size for all of them"), so the three
       cards of the swipe row share one height set by their excerpts, not by the one card that carried a quote. The quote stays for screen readers; the desktop keeps it. */
    main #insights .art-quote { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
  /* ---------- end stable 2.172 ---------- */

  /* ---------- stable 2.174 · phone: landing like Harvey ---------- */
  @media (max-width: 700px) {
    /* 2.174 · landing in Harvey's pattern (his ask, 21 Oct): the headline high under the nav, the lede, one call to action, and a picture of the
       platform, all on the first screen. The picture is the real case workspace in miniature (174.js): one flat rectangle the width of the text,
       the whole app from sidebar to the last column, and it ends; no frame around it. The spacing follows the screen's height so all five fit. Phone only. */
    .mf .m-hero { --m-t: 222px; min-height: calc(100svh - 69px); padding-top: clamp(28px, 6.5svh, 56px) !important; display: flex; flex-direction: column; justify-content: safe center; }
    /* his word, 21 Oct evening: "lower it a little bit so it's more proportionate". The block sits in the middle of the first screen: the space the
       screen leaves over is shared above the headline and below the picture; on a short screen there is none, and nothing moves. Children keep their
       own top margins (none has a bottom margin), so the spacing inside the block is unchanged. */
    .mf .m-h1 { font-size: clamp(42px, 5.65svh, 48px) !important; line-height: 1.02; letter-spacing: -0.04em; }
    .mf .m-hero .m-lede { margin-top: clamp(16px, 2.8svh, 24px); font-size: 18px; line-height: 1.5; max-width: 32ch; }
    .mf .m-hero .m-acts { margin-top: clamp(20px, 3.8svh, 32px); }
    .mf .m-hero .m-acts .btn.ghost { display: none; }                      /* one call to action, as Harvey */
    .mf .m-hero .m-stage { margin: clamp(24px, 4.7svh, 40px) 0 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
    /* 760 frame px tall: the case view's columns reach 725 at their fullest, so the whole app shows and nothing runs off */
    .mf .m-hero .crop.m-mini { display: block !important; margin: 0; height: auto !important; max-height: none; aspect-ratio: 1240 / 760; border-radius: 6px; overflow: hidden; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(10,10,10,.1), 0 18px 40px -24px rgba(10,10,10,.28); }
    .mf .m-hero .crop.m-mini .frame { margin-left: 0 !important; }        /* the sidebar stays in the picture (the desktop drops it on narrow screens) */
  }
  /* ---------- end stable 2.174 ---------- */

  /* ---------- stable 2.176 · phone: brand buttons, header without contact ---------- */
  @media (max-width: 700px) {
    /* 2.176 · Harvey's button and header, on the phone (his ask, 21 Oct evening, on the locked 2.174): the calls to action keep their size and words,
       with small rounded corners instead of the pill, in our indigo; the header carries the logo and the menu only. Contact us stays in the footer. */
    header.nav .btn.sm { display: none; }
    .mf .m-hero .m-acts .btn:not(.ghost), .mf .m-how .btn, main > section#pricing .pj-cta .btn, main > section.final .fc-btn { border-radius: 6px; background: #3D3BF3; color: #FAFAFA; box-shadow: none; }
    /* no line under the header when the page scrolls (his word, 21 Oct): the hairline 2.146 drew on scroll and the dark chapters' white hairline */
    header.nav.m-edge { box-shadow: none; }
    header.nav.m-ondark { box-shadow: none !important; }
    .mf .m-hero .m-acts .btn:not(.ghost):hover, .mf .m-how .btn:hover, main > section#pricing .pj-cta .btn:hover, main > section.final .fc-btn:hover { background: #2F2DD9; }
  }
  /* ---------- end stable 2.176 ---------- */

  /* ---------- road 2.0.1 · phone: finish: end states ---------- */
  /* (no styles) */
  /* ---------- end road 2.0.1 ---------- */

  /* ---------- road 2.0.2 · phone: finish: one system ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.2 · Finish, part 2: one system. One family of corners: 12 px for cards, 8 px for panels inside them, 6 px for everything you press
       (and the picture), pills only for status tags. One card surface: #FAFAFA with a hairline and a soft shadow, no white shells, no glows.
       Selected states in indigo, never black. The product drawn flat: the tour loses its browser bar, the data room's ledger is a dark card on dark. */
    .mf { --c-card: 0 0 0 1px rgba(10,10,10,.08), 0 1px 2px rgba(10,10,10,.04), 0 10px 24px -20px rgba(10,10,10,.22); }

    /* cards: 12 px, #FAFAFA, one shadow */
    .mf .m-card, .mf .m-d, .mf .m-ra2, .mf .m-mf-card .m-rec,
    main > section#pricing .pj-card, main > section#workforce .wf-console, main > section#insights .art2 { border-radius: 12px; }
    .mf .m-card, .mf .m-d, .mf .m-ra2, main > section#pricing .pj-card, main > section#workforce .wf-console { background: #FAFAFA; box-shadow: var(--c-card); }
    .mf .m-mf-card .m-rec { box-shadow: 0 0 0 1px rgba(61,59,243,.28), 0 1px 2px rgba(10,10,10,.04); }   /* the recorded decision keeps its indigo hairline, without the glow */
    main > section#insights .art2 { box-shadow: 0 0 0 1px rgba(10,10,10,.08); }
    .mf .m-stage { background: none; }                                      /* the indigo light behind product cards is gone: one surface, no glows */
    .mf .m-dark .m-vsteps > li.in1 { border-radius: 12px 12px 0 0; }        /* the data room's boundary: one frame across steps 01 to 03 */
    .mf .m-dark .m-vsteps > li.in3 { border-radius: 0 0 12px 12px; }

    /* panels inside cards: 8 px */
    .mf .m-ra2-p, main > section#pricing .sx-p, .mf .m-tour .m-item, .mf .m-tour .m-q, .mf .m-dark .labels .pack,
    main > section#shift .sh-pack, .mf .m-vsteps .m-vpack { border-radius: 8px; }
    main > section#shift .sh-pack { box-shadow: 0 0 0 1px rgba(61,59,243,.45); }
    .mf .m-vsteps .m-vhash { border-radius: 6px; }

    /* what you press, in the figures too: 6 px */
    .mf .m-chips button, main #workforce .ph-seg button, .mf .m-b2, .mf .m-tour .m-mock, .mf .m-tour .m-fl > span, .mf .m-ra2-call > b { border-radius: 6px !important; }

    /* selected states: indigo, never black */
    .mf .m-b2.on, .mf .m-tour .m-fl > span.on { background: #3D3BF3; color: #FAFAFA; box-shadow: none; }

    /* the product drawn flat: no browser bar on the tour's window (its address stays for screen readers) */
    .mf .m-tour .m-appbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

    /* the ledger in the data room: a dark card on dark, like the other figures there */
    .mf .m-vsteps li > .m-verify { --ink: #F4F4F6; --sub: rgba(244,244,246,.62); --faint: rgba(244,244,246,.45); --line: rgba(255,255,255,.1); --ok: #C9C8FF;
      color: var(--ink); background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(169,168,255,.24); }
    .mf .m-vsteps li > .m-verify .m-vout .m-ck { background: var(--ok); color: #0D0D18; }
  }
  /* ---------- end road 2.0.2 ---------- */

  /* ---------- road 2.0.3 · phone: finish: one rhythm ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.3 · Finish, part 3: one rhythm. In every chapter: eyebrow to headline 14 px, headline to intro 14 px, intro to figure 24 px.
       One intro size (17 px; the hero keeps 18). Two label styles: the eyebrow (12 px, indigo, lavender on dark) and the figure label
       (11 px on a 1.3 line, regular weight), each keeping its own colour. */

    /* chapters carried over from the desktop: their heads */
    .mf > #shift .sec-head, main > section .sec-head, main > section#early-access .ea2-head { row-gap: 14px; margin-bottom: 24px; }
    .mf > #shift .eyebrow, main > section .eyebrow { margin-bottom: 14px; }
    main > section#early-access .ea2-fig { margin-top: 0; }
    main > section#early-access .ea2-aside > .lede { margin-top: 0; }
    .mf > #shift .sec-head .lede { font-size: 17px; line-height: 1.5; }
    main > section#pricing .lede { margin-top: 14px; }
    main > section#pricing .pz-cta { margin-top: 24px; }
    main > section#faq h2 + p { margin-top: 14px; }
    main > section.final .fc-line { margin-bottom: 0; }
    main > section.final .fc-btn { margin-top: 24px; }

    /* the phone's own chapters: intro to figure */
    .mf .m-ra > .m-ra2, .mf .m-ex > .m-ra2, .mf .m-how > .m-steps, .mf .m-vdr > .m-vsteps, .mf .m-cal > .m-steps, .mf .m-dark.m-arch > .m-hint, .mf .m-mf > .m-stage { margin-top: 24px; }
    .mf .m-dark.m-arch > .m-hint + * { margin-top: 12px; }                  /* the figure's own caption sits on it */
    .mf .m-tour > .m-tds { margin-top: 14px; }
    .mf .m-tour > .m-tds + .m-stage { margin-top: 16px; }

    /* figure labels: one style */
    .mf .label, .mf .m-k, .mf .m-bl, .mf .m-ledh span, .mf dt, .mf .m-kv > span, .mf .m-hint, .mf small,
    main > section .label, main > section .ea2-tier, main > section .ea2-ord, main > section .ea2-xs, main > section .ea2-x,
    main > section .wf-runhead b, main > section .m-ea-legend small { font-size: 11px; line-height: 1.3; letter-spacing: .07em; font-weight: 400; }
    main > section#insights .art2 .label { font-size: 12px; line-height: 1.55; letter-spacing: .08em; }   /* the article's topic reads as an eyebrow */
    .mf .m-hint, main > section .m-ea-legend small { font-size: 12px; line-height: 1.4; }   /* labels outside a figure keep the 12 px floor */
  }
  /* ---------- end road 2.0.3 ---------- */

  /* ---------- road 2.0.4 · phone: edit: the shift on one screen ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.4 · Edit, merge 1: the shift on one screen. Its three problem-and-answer pairs as rows, without the three thin drawings.
       The drawings' own labels ("Owned work", "Evidence pack · Decision · Sources · Trace · Hash", "Obligation · evidence a reviewer can defend",
       "timeline") stay on the page for screen readers only. */
    main #shift .sh-panel { grid-template-areas: "b1" "r1" "b2" "r2" "b3" "r3"; }
    main #shift .sh-panel .sh-art { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    main #shift .sh-panel .sh-body { padding: 18px 0 0; }
    main #shift .sh-panel .sh-body.c1 { padding-top: 0; }
    main #shift .sh-panel .sh-body.c2, main #shift .sh-panel .sh-body.c3 { border-top: 1px solid var(--line); }
    main #shift .sh-panel .sh-res { padding: 10px 0 18px; border-top: 0; }
    main #shift .sh-panel .sh-res.c3 { padding-bottom: 0; }
  }
  /* ---------- end road 2.0.4 ---------- */

  /* ---------- road 2.0.5 · phone: edit: track record and articles tighter ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.5 · Edit, merge 2: the track record and the articles, tighter. The timeline's rows sit closer; each article card shows its
       excerpt in three lines (the whole excerpt stays in the page for screen readers and on the article itself). */
    main > section.nda .nda-foot { margin-top: 20px; }
    main > section#insights .art2-body > p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  }
  /* ---------- end road 2.0.5 ---------- */

  /* ---------- road 2.0.6 · phone: edit: architecture and data room as one ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.6 · Edit, merge 3: architecture and the data room as one dark chapter with one figure, the boundary (inside: the document,
       the agents, the pack; leaving it: the hash, checked by the auditor against the ledger). The architecture's line drawing and its caption
       stay on the page for screen readers only (its labels: model layer, model-agnostic, graph layer, documents, shared embedding space,
       entity structures, agent reasoning · evidence pack), and so does the data room's list of uses. The data room reads as the second half
       of the chapter: its headline one size down. */
    .mf .m-sec.m-dark.m-arch { padding-bottom: 48px; }                     /* the break inside a merged chapter: 48 px, as in calibration (2.0.7) */
    .mf .m-dark.m-arch > .m-hint, .mf .m-dark.m-arch > .core, .mf .m-vdr > .m-uses {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .mf .m-vdr > h2 { font-size: 24px !important; line-height: 1.15; letter-spacing: -0.02em; }
    .mf .m-vdr > .m-vfoot { margin-top: 20px; }
  }
  /* ---------- end road 2.0.6 ---------- */

  /* ---------- road 2.0.7 · phone: edit: calibration and compounding as one ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.7 · Edit, merge 4: calibration and compounding calibration as one chapter. The three cards keep their decision, override and
       precedent; each case's descriptor line stays for screen readers. Compounding follows as the chapter's second half: its headline one size down, its chart as drawn; the list under the chart repeated the chart and was already hidden
       from screen readers, so it goes. */
    .mf .m-cal .m-clc > .m-who2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    main > section#early-access.sec { padding-top: 48px !important; }
    main > section#early-access .ea2-head h2 { font-size: 24px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
    main > section#early-access .m-ea-legend { display: none; }
  }
  /* ---------- end road 2.0.7 ---------- */

  /* ---------- road 2.0.8 · phone: edit: intros at three lines ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.8 · Edit: the sentences after an intro's first stay for screen readers (architecture, calibration) */
    .mf .m-lede .m-more { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  }
  /* ---------- end road 2.0.8 ---------- */

  /* ---------- road 2.0.9 · phone: finish: the reviewers' frame fixes ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.9 · Finish, part 4, from the reviewers of 2.0.3: the frame reaches the chapters carried over from the desktop (the console and
       the pricing card were drawn without their hairline), selected tabs fill in indigo like every other selected state, text links are one
       style, the data room's timeline takes the dark chapters' lavender, every main button is 48 px tall, and two lines no longer break badly. */
    body { --c-card: 0 0 0 1px rgba(10,10,10,.08), 0 1px 2px rgba(10,10,10,.04), 0 10px 24px -20px rgba(10,10,10,.22); }
    main > section#workforce .wf-console, main > section#pricing .pj-card { box-shadow: var(--c-card); }

    .mf .m-chips button[aria-selected="true"], main #workforce .ph-seg button[aria-current="true"] { background: #3D3BF3 !important; color: #FAFAFA !important; box-shadow: none !important; }
    .mf .m-chips button[aria-selected="true"] *, main #workforce .ph-seg button[aria-current="true"] * { color: inherit !important; }

    main a.tlink, .mf a.tlink { color: #3D3BF3; border-bottom: 0; padding-bottom: 0; font-weight: 500; }
    main > section.dark a.tlink, main > section.nda a { color: #A4A3FA; }
    main > section#insights .sec-aside a.tlink { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: .3em; position: relative; }
    main > section#insights .sec-aside a.tlink::before { content: "→"; }   /* the arrow after the text, like "Trust →"; ::after stays the 44 px tap area (2.126) */

    .mf .m-vsteps li > b::before { background: #8F8DFF; }
    .mf .m-vsteps li:not(:last-child)::after { background: #8F8DFF; }

    .mf .m-hero .m-acts .btn:not(.ghost), .mf .m-how .btn, main > section#pricing .pj-cta .btn, main > section.final .fc-btn { min-height: 48px !important; }

    .mf .m-cal .m-by, main #workforce .wf-out p, main #workforce .wf-out span { text-wrap: balance; }
  }
  @media (max-width: 700px) {
    /* from the reviewers of 2.0.8: the data room's step titles at the 19 px of the other timelines; the shift shows its key once ("Agentic
       resolution", the row labels stay for screen readers) and lets its headlines run the full width; the closing chapter's light sits
       inside the chapter, so the footer no longer cuts it at its brightest */
    .mf .m-vsteps > li > b { font-size: 19px; line-height: 1.2; }
    main #shift .sh-panel { grid-template-areas: "lg" "b1" "r1" "b2" "r2" "b3" "r3"; }
    main #shift .sh-panel .sh-legend { display: flex; align-items: center; gap: 10px; height: auto; margin: 0 0 18px; background: none; }
    main #shift .sh-panel .sh-legend > i { position: static; flex: none; width: 16px; height: 1.5px; transform: none; background: #3D3BF3; }
    main #shift .sh-panel .sh-legend > span { position: static; transform: none; padding: 0; border-radius: 0; background: none; box-shadow: none;
      font: 400 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #3D3BF3; }
    main #shift .sh-panel .sh-res .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    main #shift .sh-panel .sh-body h3 { max-width: none; text-wrap: pretty; }
    main > section.final { background: radial-gradient(60% 46% at 50% 58%, rgba(61,59,243,.13), rgba(61,59,243,0) 72%) !important; }
  }
  @media (max-width: 700px) {
    /* from reviewer B of 2.0.8: the officer in the console is a person label (grey, as in why agentic), not a filled chip that reads as a
       button; the data room's check line takes the dark chapters' lavender instead of a green used nowhere else (202); the shift's row
       kickers and its key in sentence-case sans, so mono capitals stay for eyebrows and figure fields; no single word left on a last line in
       the tour's caption and the FAQ's questions */
    main #workforce .wf-rev-pill { background: none; color: #5A5A5A; box-shadow: none; padding-left: 0; padding-right: 0; }
    main #workforce .wf-rev-pill svg { color: #5A5A5A; }                   /* the person icon follows the label (it was white on the old filled chip) */
    main #shift .sh-body .label, main #shift .sh-panel .sh-legend > span { font: 500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
    main #shift .sh-body .label { color: #5A5A5A; }
    .mf .m-tds > p, main #faq .qa summary { text-wrap: balance; }
  }
  /* ---------- end road 2.0.9 ---------- */

  /* ---------- road 2.0.10 · phone: edit: one product chapter ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.10 · Edit, merge 5: one product chapter. How it works keeps its six steps; the agentic workforce follows as the chapter's second
       half (its eyebrow for screen readers, its headline one size down), then the chapter's call to action. The EU AI Act review stays in the
       page for screen readers only (2010.js keeps its tabs out of the keyboard order). The rules the workforce had as a child of main follow it. */
    .mf .m-tour { position: absolute; width: 1px; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .mf > #workforce.sec { padding-block: 48px 0 !important; }
    .mf > #workforce .sec-head { row-gap: 14px; margin-bottom: 24px; }
    .mf > #workforce .sec-head .eyebrow { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .mf > #workforce h2 { font-size: 24px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
    .mf > #workforce .lede { font-size: 17px !important; line-height: 1.5 !important; }
    .mf > #workforce .wf-console { border-radius: 12px; background: #FAFAFA; box-shadow: var(--c-card); }
    .mf > #workforce .label, .mf > #workforce .wf-runhead b { font-size: 11px; line-height: 1.3; letter-spacing: .07em; font-weight: 400; }
    .mf > #workforce a.m-cta { display: inline-flex; align-items: center; margin-top: 24px; min-height: 48px !important; padding: 0 22px !important; font-size: 16px !important;
      border-radius: 6px; background: #3D3BF3; color: #FAFAFA; box-shadow: none; }   /* the call to action keeps its look where it moved */
    .mf > #workforce a.m-cta:hover { background: #2F2DD9; }
  }
  @media (max-width: 700px) { .mf > #workforce { scroll-margin-top: 76px; } }    /* links to the workforce still clear the header where it moved */
  @media (max-width: 299px) { .mf > #workforce { scroll-margin-top: 124px; } }
  @media (max-width: 700px) {
    /* from the reviewers of 2.0.11: the three second halves read alike, a headline one size down without an eyebrow (the eyebrows of the
       data room, the workforce and compounding stay for screen readers), so no two eyebrows stack in one chapter; a selected tab is an indigo
       tint, so it no longer looks like the main button; the two wider breaks between chapters (under the manifesto's card, under the
       compounding chart) come down to the page's ~72 px */
    main > section#early-access .ea2-head .eyebrow, .mf .m-vdr > .eyebrow { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .mf .m-chips button[aria-selected="true"], main #workforce .ph-seg button[aria-current="true"] { background: #ECECFE !important; color: #3D3BF3 !important; box-shadow: inset 0 0 0 1px rgba(61,59,243,.35) !important; }
    .mf .m-mf > .m-stage { padding-bottom: 0; }
    main > section#early-access + section#pricing.sec { padding-top: 54px !important; }
  }
  /* ---------- end road 2.0.10 ---------- */

  /* ---------- road 2.0.12 · phone: truth: one story ---------- */
  /* Road 2.0.12 · Truth, desktop and phone: the tour's queue labels its numbers as risk scores. On the desktop the queue's column is narrow, so
     the label shows once per assessment, above the first row's score; the other rows keep it for screen readers. */
  .tr-item .r .sc { position: relative; }
  .tr-item .r .sc small { position: absolute; left: 0; bottom: calc(100% + 2px); white-space: nowrap; font: 500 8.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
  .tr-item .t + .r { margin-top: 12px; }
  .tr-item .r ~ .r .sc small { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  /* ---------- end road 2.0.12 ---------- */

  /* ---------- road 2.0.13 · phone: one line, one colour per meaning ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.13 · one line with dots, in How it works only (his call, 21 Oct: "having it go in one section is okay, but it's in multiple
       sections. It became very trivial"). The other four take the form their content has. Phone only; no word changes. */

    /* manifesto: the four evidence rows as a plain checklist in one card, the decision card under it, no line between them */
    .mf .m-src::before { display: none; }
    .mf .m-mf-card .m-src { padding: 4px 14px; border-radius: 12px; background: #FAFAFA; box-shadow: var(--c-card); }
    .mf .m-mf-card .m-rec { margin-top: 12px; }

    /* data room: the boundary as the picture. The dashed box holds what stays inside (01 to 03); the hash that leaves it (04) and the auditor's
       check (05) sit outside. The step numbers stay as labels; no dots, no line. */
    .mf .m-vsteps li > b::before, .mf .m-vsteps li::after { display: none !important; }
    .mf .m-vsteps > li { padding-left: 0 !important; }                     /* the indent was the line's; text now starts at the edge */
    .mf .m-vsteps > li.in1, .mf .m-vsteps > li.in2, .mf .m-vsteps > li.in3 { padding-left: 18px !important; padding-right: 18px; }

    /* calibration: one card in the pricing grammar. This case (01) and the next case (03) as its two panels, the labeled signal (02) between
       them as what carries the decision across; no dots, no line, no card inside a card */
    .mf .m-cal .m-steps > li::before, .mf .m-cal .m-steps > li::after { display: none !important; }
    .mf .m-cal .m-steps { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #FAFAFA; box-shadow: var(--c-card); }
    .mf .m-cal .m-steps > li { margin: 0; padding: 14px; border-radius: 8px; }
    .mf .m-cal .m-steps > li:nth-child(1) { background: #FAFAFA; box-shadow: inset 0 0 0 1px rgba(10,10,10,.08); }
    .mf .m-cal .m-steps > li:nth-child(2) { background: none; box-shadow: inset 0 0 0 1px rgba(61,59,243,.22); border: 0; }
    .mf .m-cal .m-steps > li:nth-child(3) { background: #F7F7FE; box-shadow: inset 0 0 0 1px rgba(61,59,243,.16); }
    .mf .m-cal .m-steps > li > .m-d { margin-top: 10px; padding: 0; border-radius: 0; background: none; box-shadow: none; }

    /* one colour per meaning: risk is red, what needs attention (a flag, an escalation, a pending decision) is amber, clear and decided are
       green, and indigo is cmpliance and what you can press */
    .mf .m-ex2 .m-ra2-cm .m-ex2-r b { color: rgb(131,24,67); }
    .mf .m-ex2-rev { color: rgb(120,53,15); background: rgb(246,240,236); box-shadow: inset 0 0 0 1px rgba(146,64,14,.2); }
    .mf .m-how b.m-warn { color: rgb(120,53,15); }
    #workforce .wf-step[data-agent="cls"] b[data-val] { color: rgb(131,24,67); }
  }
  /* ---------- end road 2.0.13 ---------- */

  /* ---------- road 2.0.14 · phone: cut the retelling, one system ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.14, with his yes (21 Oct, "let's do what you recommend"). Part B, cut the retelling, phone only: what repeats the steps or the
       story leaves the screen and stays for screen readers. Part A, one system: one status style, one check, every figure in a card. */
    .mf .m-vsteps .m-led li:nth-child(-n+3),
    #workforce .wf-team, #workforce .wf-copy > p,
    .mf .m-how .m-steps > li:nth-child(5) .m-line1, .mf .m-how .m-steps > li:nth-child(6) .m-pk-h,
    .mf .m-how .m-steps > li:nth-child(6) dl > div:nth-child(n+3), .mf .m-how .m-steps > li:nth-child(6) dt,
    main #shift .sh-panel .sh-legend {
      position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

    /* B3 · How it works, steps 04 to 06: one plain line each, so the worked example tells the verdict */
    .mf .m-how .m-steps > li:nth-child(n+4) > .m-d { margin-top: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
    .mf .m-how .m-steps > li:nth-child(4) > .m-d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
    .mf .m-how .m-steps > li:nth-child(4) .m-line1 { display: contents; }
    .mf .m-how .m-steps > li:nth-child(6) dl { display: block; margin: 0; font: 400 13px/1.5 var(--mono); color: var(--sub); }
    .mf .m-how .m-steps > li:nth-child(6) dl > div, .mf .m-how .m-steps > li:nth-child(6) dl dd { display: inline; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; }
    .mf .m-how .m-steps > li:nth-child(6) dl > div:nth-child(2)::before { content: "·"; margin: 0 8px; }
    .mf .m-how .m-steps > li:nth-child(5) > .m-d { display: block; }

    /* A1 · one status style: every status is the same sans pill; amber for what needs attention */
    .mf .m-how b.m-warn { width: max-content; max-width: 100%; }
    .mf .m-ex2 .m-ra2-cm .m-ex2-rev { color: rgb(120,53,15); background: rgb(246,240,236); box-shadow: inset 0 0 0 1px rgba(146,64,14,.2); }   /* 2.0.13's amber, at the specificity the card's own rule needs */
    .mf .m-mf .pill.warn, .mf .m-rec-who > span:last-child, .mf .m-how b.m-warn {
      display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font: 500 12px/1.4 var(--sans); letter-spacing: 0;
      color: rgb(120,53,15); background: rgb(246,240,236); box-shadow: inset 0 0 0 1px rgba(146,64,14,.2); }
    .mf .m-mf .pill.warn { letter-spacing: .02em; }
    .mf .m-ra2-call > b { color: #3D3BF3; background: #ECECFE; box-shadow: none; border-color: transparent; }   /* the officer's call is an action: indigo */

    /* A2 · one check: a filled indigo circle (lavender on dark) */
    .mf .m-seal { border-radius: 50%; }
    main #shift .sh-res > i { width: 18px; height: 18px; border-radius: 50%; background: #3D3BF3; }
    main #shift .sh-res > i::after { border-color: #FAFAFA !important; transform: rotate(-45deg) translate(1px, -1px) scale(.62); }
    #workforce .wf-out .wf-pk { place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #3D3BF3; color: #FAFAFA; }
    #workforce .wf-out .wf-pk svg { width: 12px; height: 12px; }

    /* A3 · the compounding chart in a card, like pricing's */
    main > section#early-access .ea2-fig { padding: 14px; border-radius: 12px; background: #FAFAFA; box-shadow: var(--c-card); }
    /* A4 · the ledger card at full width, like every other card */
    .mf .m-vsteps > li:not(.in1):not(.in2):not(.in3) { padding-right: 0; }
    /* A5 · the shift's titles break cleanly */
    main #shift .sh-panel .sh-body h3 { text-wrap: balance; }
    /* A6 · calibration: indigo only on the next case, the cmpliance side */
    .mf .m-cal .m-steps > li:nth-child(2) { box-shadow: inset 0 0 0 1px rgba(10,10,10,.08); }
    /* A8 · the workforce half joins How it works like the other second halves; its button sits clear of the card */
    .mf > #workforce.sec { padding-top: 32px !important; }
    .mf > #workforce a.m-cta { margin-top: 32px; }
    /* A9 · no empty band under the last button */
    main > section.final.g { padding-bottom: 32px !important; }
  }
  /* ---------- end road 2.0.14 ---------- */

  /* ---------- road 2.0.15 · phone: the reviewers' last repeats, one button ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.15, with his yes (22 Oct). Phone only, no words: what still repeats leaves the screen and stays for screen readers, and the last
       sizes and gaps are made one. */
    .mf .m-vsteps .m-led li:nth-child(4) > span:first-child, .mf .m-vsteps .m-verify .m-vout,
    .mf .m-csteps > li:nth-child(1) .m-clh .pill, .mf .m-csteps > li:nth-child(2) .m-clc > p:nth-child(2) {
      position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
    /* the ledger's one row without its number: the hash row spans the card */
    .mf .m-vsteps .m-led li:nth-child(4) { grid-template-columns: minmax(0, 1fr); }
    .mf .m-vsteps .m-led li:nth-child(4) > b, .mf .m-vsteps .m-led li:nth-child(4) > span:last-child:not(:empty) { grid-column: 1; }

    /* one heading scale: the manifesto statement at the chapter headline size */
    .mf .m-mf .m-statement { font-size: 30px; line-height: 1.06; letter-spacing: -.035em; }
    /* one sub-part gap (56 px), like the console's under How it works */
    body .mf section.m-vdr { padding-top: 8px !important; }
    html body main > section#early-access.sec { padding-top: 56px !important; }
    /* chapter gaps at the page's 72 px: calibration to pricing, and the articles' dots (their ink sits 20 px inside the tap area) to the FAQ */
    html body main > section#early-access + section#pricing.sec { padding-top: 72px !important; }
    html body main > section#faq.sec { padding-top: 52px !important; }
  }
  /* ---------- end road 2.0.15 ---------- */

  /* ---------- road 2.0.16 · phone: one company ---------- */
  /* (no styles) */
  /* ---------- end road 2.0.16 ---------- */

  /* ---------- road 2.0.17 · phone: pricing's grammar for the figures ---------- */
  @media (max-width: 700px) {
    /* Road 2.0.17, with his yes (22 Oct, "3 x yes": the pricing component's style for the other figures). Phone only, no words: what the
       reviewers saw twice leaves the screen and stays for screen readers; calibration, How it works and why agentic take pricing's economy. */
    .mf .m-how .m-steps > li:nth-child(4) b.m-bad, .mf .m-vsteps .m-vhash,
    .mf .m-csteps .m-clh .m-k, .mf .m-csteps > li:nth-child(2) .m-clh .pill,
    .mf .m-ra > .m-ra2 > .m-ra2-p .m-ra2-rows {
      position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

    /* 1 · How it works in one style: all six steps as plain lines (04 to 06 have been since 2.0.14) */
    .mf .m-how .m-steps > li > .m-d { margin-top: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
    .mf .m-how .m-steps > li:nth-child(1) > .m-d { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; color: var(--sub); }
    .mf .m-how .m-steps > li:nth-child(1) > .m-d b { font-weight: 500; color: var(--ink); }
    .mf .m-how .m-steps > li:nth-child(2) > .m-d { display: flex; flex-wrap: wrap; gap: 4px 16px; }
    .mf .m-how .m-steps > li:nth-child(3) > .m-d { display: flex; flex-wrap: wrap; gap: 6px 14px; }

    /* 2 · calibration as one compact card, in pricing's grammar: each panel is its number and title, one ID line and its facts as label · value */
    main .mf .m-cal .m-csteps > li { padding: 11px 14px 12px; }
    main .mf .m-cal .m-csteps > li > .m-n { display: inline-block; margin: 0 8px 0 0; vertical-align: 2px; }
    main .mf .m-cal .m-csteps > li > h3 { display: inline; font-size: 17px; line-height: 1.3; }
    main .mf .m-cal .m-csteps .m-clc { margin-top: 8px; }
    main .mf .m-cal .m-csteps .m-clh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    main .mf .m-cal .m-csteps .m-kv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 4px 0 0; border: 0; }
    main .mf .m-cal .m-csteps .m-kv > b { font-size: 14px; }
    main .mf .m-cal .m-csteps .m-by { margin-top: 4px; font: 400 12.5px/1.4 var(--sans); color: var(--sub); }
    main .mf .m-cal .m-csteps .m-hc { display: inline-block; margin-top: 2px; }
    main .mf .m-cal .m-csteps { row-gap: 8px; }

    /* 3 · small fixes */
    main > section.final.g { padding-bottom: 72px !important; }   /* the button 72 px above the footer, like every chapter gap */
    .mf .m-mf { padding-top: 8px !important; }   /* hero to manifesto at the page's chapter gap; the hero is untouched */
    main #shift .sh-panel .sh-body h3 { text-wrap: pretty; }   /* the shift's titles use the full width */
    .mf .m-ex2 .m-ex2-path .m-ex2-n b, .mf .m-ex2 .m-ra2-wf b { text-wrap: balance; }   /* "Brenvik Components GmbH" breaks evenly, never "GmbH" alone */

    /* 4 · why agentic lists the four jobs once: each row shows both sides (your team's task in workflow software → done by cmpliance), and
       the two panels below keep pricing's grey-and-indigo pair with their totals; the officer's call closes the card */
    .mf .m-ra > .m-ra2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .mf .m-ra > .m-ra2 > .m-ra2-h, .mf .m-ra > .m-ra2 > .m-ra3, .mf .m-ra > .m-ra2 > .m-ra2-call { grid-column: 1 / -1; }
    .mf .m-ra > .m-ra2 > .m-ra2-p { margin: 0; padding: 12px; grid-template-areas: "t" "f"; row-gap: 8px; }
    .mf .m-ra > .m-ra2 > .m-ra2-p .m-ra2-f { margin: 0; align-items: start; }
    .mf .m-ra3 { list-style: none; margin: 0 0 4px; padding: 0 2px; }
    .mf .m-ra3 li { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35; }
    .mf .m-ra3 li:first-child { border-top: 0; }
    .mf .m-ra3 .m-ra3-you { display: inline-flex; align-items: center; gap: 10px; color: #8A8A8A; font-style: normal; }
    .mf .m-ra3 .m-ra3-you svg { width: 16px; height: 16px; }
    .mf .m-ra3 .m-ra3-you::after { content: "→"; font-size: 13px; color: var(--sub); }
    .mf .m-ra3 .m-ra2-ck { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #3D3BF3; color: #FAFAFA; }
    .mf .m-ra3 .m-ra2-ck svg { width: 12px; height: 12px; }
    .mf .m-ra > .m-ra2 > .m-ra2-call { grid-area: auto; grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 10px 2px 0; }
  }
  /* ---------- end road 2.0.17 ---------- */