:root{--shell-max:1440px;--chat-max:1560px;--mono-ws:ui-monospace,SFMono-Regular,Menlo,"JetBrains Mono",monospace;--bg:#05070d;--panel:#0b0f19cc;--line:#ffffff14;--text:#f5f4f1;--muted:#9ba0b4;--purple:#7b4dff;--blue:#21b8ff;--cyan:#7ee7ff}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 80% 5%,#17264f 0%,transparent 34%),radial-gradient(circle at 25% 20%,#1b1148 0%,transparent 34%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.01em;overflow-x:hidden}
/* --- the page is alive: one clock, one ambient field ------------------ */
/* --breath is the single period every pulsing thing on this page uses.
   script.js draws the ambient canvas on the same number (BREATH=3900). */
:root{--breath:3900ms}
/* The nav is a blurred translucent bar, so anything moving behind it is
   resampled by backdrop-filter every frame — that is why the field must not
   paint under the chrome. It is faded out INSIDE the canvas instead of with a
   CSS mask: a fixed, full-viewport, masked layer sitting under .grain's
   mix-blend-mode is a compositing stack Chrome is known to leave stale tiles
   in, and this page reportedly renders with smeared trails until a reload. */
.pulse{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
main,footer,.nav{position:relative;z-index:1}
.nav{z-index:20}
@keyframes nieme-breath{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
/* The mark breathes on its OWN composited layer. Animating box-shadow on .glyph
   repainted the whole header every frame — measured: with the glyph animation
   off the header changed 0 pixels between frames, with it on it changed
   thousands, which is what reads on a phone as the header moving by itself. */
@keyframes nieme-glow{0%,100%{opacity:.35}50%{opacity:1}}
.glyph::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 26px 2px #6c4cff8c;opacity:.6;
  animation:nieme-glow var(--breath) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .glyph::after{animation:none;opacity:.6}
}

/* The tile is greyscale with its alpha baked into luminance: under
   mix-blend-mode:screen the contribution is opacity x alpha x colour, so
   folding alpha in and dividing the opacity by the same 2.351 stretch is
   the identical result in 29 KiB instead of 215 KiB. Changing one of the
   two numbers without the other changes how heavy the grain reads. */
.grain{position:fixed;inset:0;pointer-events:none;opacity:.0766;z-index:10;background-image:url("./grain.webp");background-repeat:repeat;background-size:256px 256px;mix-blend-mode:screen}
.nav{position:fixed;top:0;left:0;right:0;height:84px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 44px;background:linear-gradient(#05070de8,#05070d00);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:white;font-size:25px;letter-spacing:.42em}
.glyph{width:46px;height:46px;border:3px solid var(--purple);border-radius:50%;display:inline-block;position:relative;box-shadow:0 0 28px #6c4cff80}
.glyph i{position:absolute;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--purple));top:50%;left:50%;transform:translate(-50%,-50%)}
.glyph b{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--purple);box-shadow:0 0 12px var(--purple);top:50%;left:50%;margin-top:-24.5px;margin-left:-4.5px;transform-origin:4.5px 24.5px;animation:logo-orbit 18s linear infinite}
.nav nav{display:flex;gap:28px;align-items:center}.nav a:not(.button){color:#d7d8e5;text-decoration:none;font-size:14px}
.locale-switcher{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#ffffff08}
.nav nav .locale-switcher a:not(.button){padding:5px 7px;border-radius:999px;color:var(--muted);font-size:11px;line-height:1;text-transform:uppercase}
.nav nav .locale-switcher a:not(.button)::before{display:none}
.nav nav .locale-switcher a.locale-active:not(.button){background:#ffffff12;color:#f5f4ff}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;z-index:21}
.nav-toggle span{display:block;width:22px;height:2px;margin:0 auto;background:#d7d8e5;border-radius:2px;transition:transform 220ms ease,opacity 180ms ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero{min-height:100vh;padding:190px 8vw 90px;position:relative;display:grid;align-content:center}.hero-bg{position:absolute;inset:0;overflow:hidden;opacity:.8}.arch{position:absolute;border-radius:50%;border:1px solid #ffffff1f;transform:rotate(-12deg)}.arch-one{width:980px;height:330px;right:-170px;top:90px;background:linear-gradient(180deg,#ffffff16,#ffffff03);box-shadow:inset 0 0 60px #fff1}.arch-two{width:660px;height:160px;right:130px;top:280px;background:#ffffff0c}.orbital-large{position:absolute;right:16vw;top:18vh;width:150px;height:150px;border:2px solid #7657ff;border-radius:50%;box-shadow:0 0 45px #7657ff66}.orbital-large span{position:absolute;right:9px;top:8px;width:22px;height:22px;background:#7657ff;border-radius:50%;box-shadow:0 0 28px #7657ff}
.kicker,.eyebrow{color:#a9a3ff;font-size:13px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:24px}h1{font-size:clamp(58px,8vw,132px);line-height:.92;margin:0;max-width:1120px;font-weight:500;letter-spacing:-.07em}.lede{font-size:clamp(20px,2vw,30px);line-height:1.45;color:#c6c8d3;max-width:760px;margin:34px 0 38px}.actions{display:flex;gap:16px;margin-bottom:60px}.button{padding:16px 24px;border-radius:999px;text-decoration:none;color:white;border:1px solid var(--line)}.primary{background:linear-gradient(135deg,var(--purple),#4d9fff);box-shadow:0 0 44px #654cff66}.ghost{background:#ffffff08}
h3{font-size:26px;margin:16px 0}
.hero-artifacts{max-width:var(--shell-max);padding:0 64px;margin-left:auto;margin-right:auto;margin-top:12px;position:relative;display:grid;grid-template-columns:1.57fr 1fr 1fr;gap:48px;align-items:stretch;box-sizing:border-box}
.card-surface{border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,#ffffff0b,#ffffff04);box-shadow:0 30px 120px #00000066,0 16px 46px #654cff12;will-change:transform}
.hero-artifacts *{box-sizing:border-box}
.narrative{display:grid}
.narrative-card{overflow:hidden}
.narrative-card,.narrative-card *{min-width:0}
.narrative-surface{padding:24px 26px;min-height:420px;display:flex;flex-direction:column;justify-content:flex-start}
.narrative-surface h3,.operation-title,.composer-headline{font-size:clamp(18px,1.8vw,22px);line-height:1.2;font-weight:500;letter-spacing:-.03em;color:#eef0f7;margin:0;height:60px;display:flex;align-items:flex-start;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.narrative-surface > p:not(.composer-answer):not(.artifact-subhead),.artifact-tray strong,.artifact-tray em,.hero-label,.artifact-subhead,.operation-row span,.operation-row strong,.composer-question,.composer-answer,.composer-tasks li,.composer-action{font-size:14px;line-height:1.3}
.narrative-composer{min-height:420px;display:flex;flex-direction:column;justify-content:flex-start;padding:24px 26px;gap:0}
.composer-question{color:#9ca1b4;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 20px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.composer-body{flex:1;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));padding:20px 20px 16px;display:flex;flex-direction:column;gap:16px;overflow:hidden;margin-bottom:20px}
.composer-answer{margin:0;color:#eef0f7;font-size:15px;line-height:1.55;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.composer-tasks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.composer-tasks li{color:#9ca1b4;font-size:13px;line-height:1.4;padding-left:18px;position:relative;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.composer-tasks li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;border:1.5px solid #6b7080}
.composer-action,.mock-control,.artifact-expand{
  width:240px;
  min-width:240px;
  max-width:240px;
  height:52px;
  min-height:52px;
  max-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:0 24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  color:#e7e9f3;
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  pointer-events:none;
  cursor:default;
  box-shadow:none;
  transition:none;
  transform:none;
  box-sizing:border-box;
}
.composer-action{margin-top:0;padding-top:0;flex-shrink:0}
.composer-action span,.mock-control span,.artifact-expand span{white-space:nowrap;display:flex;align-items:center;flex:1;min-width:0}
.composer-action span::after,.mock-control span::after,.artifact-expand span::after{
  content:" →";
  color:#a991ff;
  margin-left:auto;
}
.composer-action i,.composer-action svg,.mock-control i,.mock-control svg,.artifact-expand-icon{display:none}
.card-footer{margin-top:0;padding-top:0;align-self:flex-start;flex-shrink:0}
.hero-label{display:block;color:#9a7cff;font-size:12px;line-height:1;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.narrative-runtime{min-height:420px;display:flex;flex-direction:column;justify-content:flex-start}
.operation-title{margin:0;height:60px;display:flex;align-items:flex-start}
.operation-quality{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#9ca1b4;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.operation-rows{display:flex;flex-direction:column;gap:0;flex:1;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));overflow:hidden;margin-bottom:20px}
.operation-row{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.operation-row:last-child{border-bottom:0}
.operation-row span{color:#9ca1b4;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.operation-row strong{color:#eef0f7;font-size:14px;font-weight:400;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.narrative-runtime .card-footer{margin-top:0;padding-top:0;align-self:flex-start;flex-shrink:0}
.narrative-review{min-height:420px}
.artifact-subhead{margin:0 0 8px;color:#9ca1b4;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.artifact-tray{display:grid;gap:6px;margin-top:0;padding:0;flex:1;margin-bottom:20px}
.artifact-file{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:12px;align-items:center;height:44px;min-height:44px;max-height:44px;padding:0 14px;border:1px solid #ffffff10;border-radius:12px;background:linear-gradient(180deg,#ffffff06,#ffffff03);position:relative}
.artifact-file span{width:10px;height:12px;border-radius:2px;background:linear-gradient(180deg,#8a91a7,#6d7390);opacity:.7;position:relative}
.artifact-file span::after{content:"";position:absolute;right:-2px;top:0;width:0;height:0;border-left:4px solid #9ca1b4;border-top:4px solid transparent;border-bottom:4px solid transparent;opacity:.8}
.artifact-file strong{color:#d9dce7;font-weight:500;font-size:13px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.artifact-file em{font-style:normal;color:#a991ff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:.9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.narrative-surface,.narrative-surface h3,.narrative-surface p,.hero-label,.artifact-subhead,.artifact-file strong,.artifact-file em,.composer-question,.composer-answer,.composer-tasks li,.composer-action,.operation-title,.operation-quality,.operation-row span,.operation-row strong{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.hero-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9a7cff;font-weight:600}
.artifact-expand{margin-top:0;padding-top:0;flex-shrink:0}
.artifact-subhead{font-size:12px;letter-spacing:.12em;color:#9ca1b4}
.operation-quality{font-size:11px}
.operation-row span{font-size:12px;letter-spacing:.08em;color:#9ca1b4}
.operation-row strong{font-size:14px;color:#eef0f7}
.composer-question{font-size:12px;letter-spacing:.14em;color:#9ca1b4}
.artifact-expand-icon{display:none}
.artifact-footer{display:none}
.capability-curve,.runtime-intelligence{padding:120px 64px;position:relative}
.capability-curve .section-copy,.runtime-intelligence .section-copy{max-width:var(--shell-max);margin:0 auto 30px}
.capability-curve h2,.runtime-intelligence h2{font-size:clamp(44px,5vw,86px);line-height:1;letter-spacing:-.06em;font-weight:420;margin:0 0 18px}
.capability-curve .section-copy p,.runtime-intelligence .section-copy p{font-size:18px;line-height:1.5;color:#b6bac8;margin:0;max-width:760px}
.curve-figure{max-width:var(--shell-max);margin:0 auto;padding:30px 34px 26px;overflow:hidden}
.curve-chart{width:100%;height:auto;display:block;overflow:visible}
.curve-chart text{fill:#9ba0b4;font-size:12px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.curve-grid line{stroke:rgba(255,255,255,.08);stroke-width:1}
.curve-axes line{stroke:rgba(255,255,255,.12);stroke-width:1}
.curve-ticks line{stroke:rgba(255,255,255,.14);stroke-width:1}
.curve-ticks text,.curve-axis-labels text{fill:#9ba0b4;font-size:12px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.curve-fill{fill:rgba(123,77,255,.09)}
.curve-line{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.curve-typical{stroke:rgba(255,255,255,.42);stroke-width:2;stroke-dasharray:5 4}
.curve-nieme{stroke:var(--purple);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100}
.curve-reveal{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.curve-legend{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:18px;color:#9ba0b4;font-size:12px;line-height:1.4}
.curve-legend > div{display:flex;align-items:center;gap:10px}
.curve-swatch{width:10px;height:10px;display:inline-block;border-radius:2px}
.curve-swatch--typical{background:rgba(255,255,255,.42)}
.curve-swatch--nieme{background:var(--purple)}
.curve-caption{max-width:var(--shell-max);margin:44px auto 0;text-align:center;font-size:clamp(34px,4vw,58px);line-height:1.06;letter-spacing:-.06em;color:#eef0f7;padding:0 64px}
.motion-ready .capability-curve.is-visible .curve-reveal--typical{animation:curve-draw 1.2s ease forwards}
.motion-ready .capability-curve.is-visible .curve-nieme{animation:curve-draw 1.2s ease forwards}
.runtime-intelligence-shell{max-width:var(--shell-max);margin:0 auto;padding:34px 34px 42px;overflow:visible}
.runtime-diagram{position:relative}
.runtime-diagram--desktop{display:block;min-height:880px}
.runtime-diagram--mobile{display:none}
.runtime-ring{width:100%;height:auto;display:block}
.runtime-connector path,.runtime-connector line{fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.runtime-connector--ring path{stroke:rgba(255,255,255,.20)}
.runtime-connector--spokes line{stroke:rgba(255,255,255,.12)}
.runtime-ring marker path{fill:rgba(255,255,255,.20)}
.runtime-node-glass{border:1px solid rgba(255,255,255,.26);background:linear-gradient(180deg,#ffffff10,#ffffff07);box-shadow:0 0 28px color-mix(in srgb,var(--purple) 8%,transparent)}
.runtime-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:210px;height:210px;border:14px solid var(--purple);border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 0 128px color-mix(in srgb,var(--purple) 50%,transparent)}
.runtime-hub-wordmark{max-width:70%;font-size:25px;line-height:1;letter-spacing:.2em;color:#fff;white-space:nowrap}
.runtime-hub>b{position:absolute;width:41px;height:41px;border-radius:50%;background:var(--purple);box-shadow:0 0 55px var(--purple);top:50%;left:50%;margin-top:-112px;margin-left:-20.5px;transform-origin:20.5px 112px}
.runtime-node{position:absolute;width:176px;height:176px;border-radius:50%;display:grid;align-content:center;justify-items:center;text-align:center;gap:10px;padding:20px 16px}
.runtime-node-title{display:block;font-size:14px;line-height:1.2;font-weight:500;letter-spacing:-.02em;color:#eef0f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.runtime-node-caption{display:block;font-size:12px;line-height:1.45;color:#9ba0b4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;max-width:132px}
.runtime-node--context{left:50%;top:72px;transform:translateX(-50%)}
.runtime-node--operations{right:72px;top:50%;transform:translateY(-50%)}
.runtime-node--artifacts{left:50%;bottom:84px;transform:translateX(-50%)}
.runtime-node--intelligence{left:72px;top:50%;transform:translateY(-50%)}
.runtime-node-flow{position:absolute;left:25.5%;top:28.5%;transform:rotate(-50deg);transform-origin:left center;color:color-mix(in srgb,var(--purple) 70%,transparent);font-size:12px;letter-spacing:.04em;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;white-space:nowrap}
.runtime-mobile-head{position:relative;width:120px;height:120px;margin:0 auto 24px;border:8px solid var(--purple);border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 0 73px color-mix(in srgb,var(--purple) 50%,transparent)}
.runtime-mobile-head .runtime-hub-wordmark{font-size:15px;letter-spacing:.18em}
.runtime-mobile-head>b{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--purple);box-shadow:0 0 32px var(--purple);top:50%;left:50%;margin-top:-64px;margin-left:-12px}
.runtime-mobile-stack{display:grid;gap:12px}
.runtime-mobile-node{padding:18px 18px 16px;border-radius:20px;display:grid;gap:8px}
.runtime-mobile-connector{height:18px;margin-left:26px;border-left:1px solid rgba(255,255,255,.12);position:relative}
.runtime-mobile-connector::after{content:"";position:absolute;left:-4px;bottom:-2px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid rgba(255,255,255,.12)}
.runtime-mobile-return{margin-top:2px;padding:10px 0 0 26px;color:color-mix(in srgb,var(--purple) 70%,transparent);font-size:12px;letter-spacing:.04em;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.runtime-mobile-return::before{content:"";display:block;width:1px;height:22px;margin-left:-26px;margin-bottom:10px;background:rgba(255,255,255,.12)}
.runtime-mobile-return span{display:block}
.statement{padding:150px 8vw;text-align:center}.statement p{font-size:21px;line-height:1.5;color:#a8adbd;max-width:920px;margin:30px auto 0}.statement h2{font-size:clamp(44px,6vw,92px);font-weight:400;margin:0;letter-spacing:-.06em}
.definition,.flow,.trust{padding:120px 8vw}.definition .section-copy,.flow .section-copy,.trust .section-copy{max-width:1100px}.definition h2,.flow h2,.trust h2{font-size:clamp(42px,5vw,82px);line-height:1;letter-spacing:-.06em;font-weight:420;margin:0 0 26px}.definition p,.flow p,.trust p{font-size:21px;line-height:1.5;color:#b6bac8;margin:0;max-width:920px}
.flow p.continuous-payoff{margin-top:30px;font-size:clamp(24px,2.4vw,32px);line-height:1.15;font-weight:500;color:#f5f4ff;max-width:none;text-shadow:0 0 22px #9a7cff40}
.hero .definition{padding:120px 0}
.trust-banner{padding:150px 0 30px;text-align:center}
.trust-banner h2{font-size:clamp(44px,6vw,92px);margin:0 0 24px}
.trust-banner p{max-width:640px;margin:0 auto;font-size:17px}
.trust-banner .trust-banner-subline{margin-bottom:18px;font-size:clamp(24px,3vw,38px)}
.primitives{padding:100px 8vw;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.primitives article{min-height:270px;border:1px solid var(--line);border-radius:28px;padding:28px;background:#ffffff06}.primitives span{color:#756cff}.primitives h3{font-size:26px;margin:60px 0 16px}.primitives p{color:#aeb3c4;line-height:1.55}
.demo{padding:120px 8vw;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.demo h2,.final h2{font-size:clamp(42px,5vw,82px);line-height:1;letter-spacing:-.06em;font-weight:420;margin:0 0 26px}.demo p,.final p{font-size:21px;line-height:1.5;color:#b6bac8}.artifact-stack{display:grid;gap:18px}.artifact{border:1px solid var(--line);border-radius:26px;padding:26px;background:linear-gradient(180deg,#ffffff0b,#ffffff04)}.artifact span{font-size:12px;color:#9a7cff;text-transform:uppercase;letter-spacing:.12em}.artifact h4{font-size:22px;margin:14px 0 8px}.artifact p{font-size:15px;margin:0;color:#8e93a7}
.final{padding:140px 8vw 180px;text-align:center}.final em{font-style:normal;color:#8d6cff;text-shadow:0 0 10px rgba(123,92,255,.45),0 0 28px rgba(123,92,255,.38),0 0 70px rgba(123,92,255,.22),0 0 140px rgba(123,92,255,.10)}
/* The page ends in black. Everything above has been light and motion; this is
   where it stops, and the last thing on screen is what Nieme is for. */
/* the line stays where it was, centred; the legal links sit in the right
   corner and nowhere else — they are an obligation, not navigation */
footer{padding:0 8vw 48px;color:var(--muted);font-size:14px;
  position:relative;z-index:1;background:#000;
  display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.foot-made{grid-column:1;justify-self:start;color:#70768d;font-size:12.5px}
.foot-line{grid-column:2;text-align:center}
.foot-legal{grid-column:3;justify-self:end;display:flex;gap:18px}
.foot-legal a{color:#70768d;text-decoration:none;font-size:12.5px;
  transition:color 180ms ease}
.foot-legal a:hover{color:#9ba0b4}
@media (max-width:700px){
  footer{grid-template-columns:minmax(0,1fr);gap:14px;text-align:center}
  .foot-line{grid-column:1}
  .foot-legal{grid-column:1;justify-self:center}
}

/* ---- the legal pages: quiet, read-only, nothing to sell ---- */
.legal{max-width:820px;margin:0 auto;padding:calc(var(--section-padding) + 40px) var(--section-inline) var(--section-padding)}
.legal-head{padding-bottom:34px;margin-bottom:38px;border-bottom:1px solid var(--line)}
.legal h1{font-size:clamp(34px,4.4vw,60px);line-height:1.04;letter-spacing:-.05em;
  font-weight:420;margin:0;max-width:16ch}
.legal-meta{margin:18px 0 0;font-size:13px;letter-spacing:.06em;color:#6d7186}
.legal-body h2{font-size:clamp(18px,1.8vw,22px);line-height:1.25;letter-spacing:-.025em;
  font-weight:500;color:#eef0f7;margin:38px 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{font-size:16px;line-height:1.75;color:#9ba0b4;margin:0 0 14px;max-width:72ch}
.legal-body strong{color:#d7d8e5;font-weight:500}
.legal-body a{color:#a98bff;text-decoration:none;border-bottom:1px solid #a98bff47}
.legal-body a:hover{color:#c9b6ff;border-color:#c9b6ff8c}
.legal-body ul{margin:0 0 14px;padding-left:20px}
.legal-body li{font-size:16px;line-height:1.75;color:#9ba0b4;margin-bottom:6px}
/* the run into black happens BEHIND the last section's copy, never over it */
.final.statement-block{background:linear-gradient(180deg,#00000000 0%,#000000a6 62%,#000 100%)}
.epilogue{max-width:520px;margin:70px auto 110px;padding:0 22px;text-align:center;color:var(--muted)}
.epilogue div{font-size:11px;line-height:1;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.epilogue p{margin:0;font-size:15px;line-height:1.5;font-weight:400;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.invite-form{display:grid;grid-template-columns:minmax(220px,360px) auto;justify-content:center;gap:12px;margin:32px auto 0;max-width:620px}
.invite-form input{min-width:0;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:#ffffff08;color:var(--text);font:inherit;outline:none}
.invite-form input::placeholder{color:var(--muted)}
.invite-form input:focus{border-color:var(--purple);box-shadow:0 0 0 3px #7b4dff24}
.invite-form button:disabled{cursor:wait;opacity:.65}
.invite-status{grid-column:1 / -1;min-height:24px;margin:0!important;font-size:14px!important}
@media(max-width:900px){.nav{padding:0 22px}.brand{font-size:18px}.primitives,.demo{grid-template-columns:1fr}h1{font-size:56px}
  .nav-toggle{display:flex}
  .nav nav{position:fixed;top:84px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 20px;background:#080a12f7;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff14;transform:translateY(-14px);opacity:0;pointer-events:none;transition:opacity 200ms ease,transform 200ms ease}
  .nav nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav nav a:not(.button){padding:15px 4px;font-size:16px;border-bottom:1px solid #ffffff0d}
  .nav nav .button{margin-top:16px;width:100%}
}
@media(max-width:560px){.invite-form{grid-template-columns:1fr}.invite-form input{min-height:52px}.invite-status{grid-column:1}}
@media(max-width:560px){.epilogue p{white-space:normal}}
@media(max-width:900px){
  .nav nav .locale-switcher{align-self:flex-start;margin-top:14px}
  .nav nav .locale-switcher a:not(.button){padding:7px 9px;border-bottom:0;font-size:12px}
}

/* Material motion */
.button{padding:16px 24px;border-radius:999px;text-decoration:none;color:white;border:1px solid var(--line);cursor:pointer;font-weight:500;transition:transform 250ms ease,border-color 250ms ease,background 250ms ease}
.primary{background:linear-gradient(135deg,var(--purple),#4d9fff);box-shadow:0 0 44px #654cff66}
.ghost{background:#ffffff08}
.button:hover{transform:translateY(-3px)}
.button.primary:hover{box-shadow:0 8px 54px #654cff80}
.button.ghost:hover{box-shadow:0 8px 34px #654cff26}

.nav nav a:not(.button){position:relative;isolation:isolate;transition:color 250ms ease,text-shadow 250ms ease}
.nav nav a:not(.button)::before{position:absolute;inset:-9px -12px;z-index:-1;border:1px solid transparent;border-radius:999px;background:#ffffff00;content:"";transition:background 250ms ease,border-color 250ms ease}
.nav nav a:not(.button):hover::before{border-color:#ffffff0b;background:#ffffff0a;box-shadow:0 0 22px #7657ff1f}
.nav nav a:not(.button):hover{color:#f5f4ff;text-shadow:0 0 16px #9a7cff4d}
.nav nav .button{padding:10px 18px;font-size:13px;font-weight:500}
.nav nav .button.primary{box-shadow:0 0 20px #654cff40}

.terminal,.primitives article,.artifact,.narrative-surface{position:relative;will-change:transform;transition:transform 300ms ease,border-color 300ms ease}
.primitives article,.artifact{overflow:hidden}
.terminal:hover,.primitives article:hover,.artifact:hover{transform:translateY(-4px);border-color:#ffffff26;box-shadow:0 28px 80px #00000066,0 16px 46px #654cff1f}
.narrative-surface:hover{transform:none}

.statement,.definition,.flow,.primitives,.demo,.trust,.final,.capability-curve,.runtime-intelligence{content-visibility:auto;contain-intrinsic-size:800px}
.hero-bg,.glyph b{animation:none}
.motion-ready .hero.is-animation-active .hero-bg{animation:atmosphere-drift 16s ease-in-out infinite alternate}
.motion-ready .nav.is-animation-active .glyph b{animation:logo-orbit 40s linear infinite}
.motion-ready .runtime-intelligence.is-animation-active .runtime-hub>b{animation:logo-orbit 40s linear infinite}
.animations-paused *{animation-play-state:paused!important}

.reveal{opacity:0;transform:translateY(12px)}
.motion-ready .reveal{transition:opacity 500ms ease,transform 500ms ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

@keyframes atmosphere-drift{
  from{opacity:.78;transform:translate3d(-3px,2px,0)}
  to{opacity:.82;transform:translate3d(4px,-2px,0)}
}

@keyframes logo-orbit{
  to{transform:rotate(360deg)}
}

@keyframes curve-draw{
  to{stroke-dashoffset:0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glyph b,.hero-bg,.runtime-hub>b{animation:none}
  /* these two re-apply the orbit at (0,3,1), which beat every plain
     `.glyph b{animation:none}` above — reduced motion has to match them */
  .motion-ready .nav.is-animation-active .glyph b,
  .motion-ready .runtime-intelligence.is-animation-active .runtime-hub>b{animation:none}
  .button,.nav nav a:not(.button),.nav nav a:not(.button)::before,.primitives article,.artifact,.narrative-surface,.reveal{transition:none}
  .button:hover,.primitives article:hover,.artifact:hover,.narrative-surface:hover{transform:none}
  .reveal,.reveal.is-visible{opacity:1;transform:none}
  .capability-curve .curve-reveal,.capability-curve .curve-nieme{animation:none;stroke-dashoffset:0}
}
@media(max-width:900px){
  .hero{padding:160px 22px 70px}
  .hero-artifacts{grid-template-columns:1fr;gap:20px;padding:0}
  .narrative-surface{min-height:0;height:auto;max-height:none;width:100%}
  .narrative-composer,.narrative-runtime,.narrative-review{min-height:0;height:auto;max-height:none;width:100%}
  .operation-title{height:auto;display:block}
  .narrative-surface h3,.composer-headline{height:auto;display:block}
  .composer-body{margin-bottom:12px;overflow:visible}
  .operation-rows{margin-bottom:12px;flex:none}
  .artifact-tray{margin-bottom:12px;flex:none}
  .composer-action{width:100%;white-space:normal}
  .card-footer{width:100%;white-space:normal}
  .artifact-expand{width:100%;white-space:normal}
  .operation-row{grid-template-columns:80px 1fr;gap:8px}
  .operation-row strong{white-space:normal;word-break:break-word}
  .artifact-file{height:auto;min-height:44px;max-height:none;padding:10px 14px}
  .artifact-file strong{white-space:normal;word-break:break-word}
  .narrative-card,.narrative-card *{min-width:0;max-width:100%}
  .statement,.definition,.flow,.primitives,.demo,.trust,.final,.capability-curve,.runtime-intelligence{content-visibility:visible}
}
@media(max-width:768px){
  .capability-curve,.runtime-intelligence{padding:96px 22px}
  .curve-figure,.runtime-intelligence-shell{padding:24px 20px 22px}
  .capability-curve h2,.runtime-intelligence h2{font-size:clamp(34px,9vw,56px)}
  .curve-caption{font-size:clamp(24px,8vw,36px)}
  .runtime-diagram--desktop{display:none}
  .runtime-diagram--mobile{display:block}
  .runtime-intelligence-shell{padding:24px 20px 22px}
  .runtime-mobile-head{margin-bottom:18px}
  .runtime-mobile-stack{position:relative;padding-left:18px}
  .runtime-mobile-stack::before{content:"";position:absolute;left:7px;top:32px;bottom:72px;width:1px;background:rgba(255,255,255,.12)}
  .runtime-mobile-node{grid-template-columns:42px minmax(0,1fr);align-items:center;column-gap:14px;padding:16px 16px 16px 12px;border-radius:18px}
  .runtime-mobile-node::before{content:"";grid-column:1;grid-row:1 / span 2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:linear-gradient(180deg,#ffffff10,#ffffff07)}
  .runtime-mobile-node .runtime-node-title,.runtime-mobile-node .runtime-node-caption{grid-column:2;text-align:left}
  .runtime-mobile-connector{height:16px;margin-left:18px}
  .runtime-mobile-return{padding-left:18px}
  .runtime-mobile-return::before{margin-left:-18px}
}

.runtime-intelligence.reveal,.runtime-intelligence.reveal.is-visible{opacity:1;transform:none;transition:none}

/* Shared header system and section rhythm */
:root{--section-padding:60px;--section-inline:clamp(16px,2.4vw,44px)}
.runtime-intelligence,.statement,.capability-curve,.flow,.primitives,.demo,.trust,.final{padding:var(--section-padding) var(--section-inline)}
.hero{width:100%;grid-template-columns:minmax(0,1fr);padding-left:var(--section-inline);padding-right:var(--section-inline)}
.hero > *{min-width:0}
.hero .definition{padding:var(--section-padding) 0}
.section-title{width:100%;max-width:var(--shell-max);margin:0 auto 30px;text-align:left}
.section-title > .eyebrow{margin-bottom:24px}
.section-title > h2,.capability-curve .section-title > h2,.runtime-intelligence .section-title > h2{font-size:clamp(42px,5vw,82px);line-height:1;letter-spacing:-.06em;font-weight:420;margin:0 0 26px}
.section-title > p,.capability-curve .section-title > p,.runtime-intelligence .section-title > p{font-size:21px;line-height:1.5;color:#b6bac8;margin:0;max-width:920px}
.statement-block{padding-top:var(--section-padding);padding-bottom:var(--section-padding);text-align:center}
.statement-block > h2{font-size:clamp(44px,6vw,92px);line-height:1;letter-spacing:-.06em;font-weight:400;margin:0}
.statement-block > p{max-width:920px;margin:30px auto 0}
.trust-banner.statement-block{padding-left:0;padding-right:0}
.trust-banner.statement-block > .trust-banner-subline{margin:24px auto 18px}
.final.statement-block{padding-left:var(--section-inline);padding-right:var(--section-inline)}

@media(max-width:768px){
  :root{--section-padding:48px}
  h1{max-width:100%;font-size:clamp(44px,14vw,56px);overflow-wrap:anywhere}
  .section-title > h2,.capability-curve .section-title > h2,.runtime-intelligence .section-title > h2{font-size:clamp(34px,9vw,56px)}
}

/* =============================================
   HOME v3 + INNER PAGES — STRUCTURAL ADDITIONS
   ============================================= */

/* Nav active state */
.nav-active{color:#f5f4ff!important}

/* Inner page hero — shorter than home */
.page-inner .hero{min-height:0;padding-top:180px;padding-bottom:80px}
.page-inner .hero h1{font-size:clamp(38px,6vw,80px);max-width:980px}
.page-inner .hero .lede{font-size:clamp(17px,1.8vw,21px)}

/* Hero stack (supporting lines below subhead) */
.hero-stack{display:flex;flex-direction:column;gap:6px;margin:28px 0 36px}
.hero-stack span{font-size:15px;color:#9ba0b4;letter-spacing:.01em;padding-left:18px;position:relative;line-height:1.4}
.hero-stack span::before{content:"·";position:absolute;left:0;color:var(--purple);font-size:18px;line-height:1}

/* ---- THE CONSTITUTION ---- */
.constitution{padding:var(--section-padding) var(--section-inline)}
.constitution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--shell-max);margin:0 auto}
.constitution-col{padding:38px 34px;border-radius:28px}
.constitution-col h3{font-size:clamp(19px,2vw,28px);font-weight:420;letter-spacing:-.04em;margin:0 0 14px;color:var(--text);line-height:1.1}
.constitution-col p{font-size:17px;line-height:1.6;color:#b6bac8;margin:0}

/* ---- BEFORE / AFTER ---- */
.before-after{padding:var(--section-padding) var(--section-inline)}
.before-after-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:var(--shell-max);margin:0 auto 32px}
.before-after-col{padding:30px 28px;border-radius:28px}
.before-after-label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.before-after-label--nieme{color:#9a7cff}
.flow-chain{display:flex;flex-direction:column;align-items:flex-start}
.flow-node{padding:8px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);font-size:14px;color:#c6c8d3;line-height:1.35;max-width:280px}
.flow-node--gone{color:var(--muted);border-color:rgba(255,255,255,.04);background:transparent}
.flow-node--smart{color:#eef0f7;border-color:rgba(123,77,255,.3);background:rgba(123,77,255,.08)}
.flow-arrow{color:rgba(255,255,255,.18);font-size:13px;padding:5px 0 5px 16px;line-height:1}
.before-after-caption{max-width:var(--shell-max);margin:0 auto;font-size:clamp(20px,2.2vw,28px);font-weight:420;color:#c6c8d3;text-align:center;letter-spacing:-.02em;line-height:1.35}

/* ---- THE LEDGER ---- */
.ledger{padding:var(--section-padding) var(--section-inline)}
.ledger-content{max-width:var(--shell-max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.ledger-text .eyebrow{margin-bottom:22px}
.ledger-text h2{font-size:clamp(34px,4vw,62px);line-height:1;letter-spacing:-.06em;font-weight:420;margin:0 0 22px}
.ledger-text p{font-size:19px;line-height:1.55;color:#b6bac8;margin:0 0 28px}
.ledger-points{display:flex;flex-direction:column;gap:12px}
.ledger-point{font-size:16px;color:#b6bac8;padding-left:20px;position:relative;line-height:1.5}
.ledger-point::before{content:"·";position:absolute;left:0;color:var(--purple);font-size:20px;line-height:1.1}
.ledger-point strong{color:var(--text);font-weight:500}
.ledger-visual{padding:28px 30px;border-radius:24px}
.timeline-label-top{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.timeline-track{display:flex;flex-direction:column}
.timeline-item{display:flex;align-items:flex-start;gap:14px;padding:12px 0}
.timeline-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0;margin-top:4px}
.timeline-dot--active{background:var(--purple);box-shadow:0 0 10px var(--purple)}
.timeline-info{display:flex;flex-direction:column;gap:4px}
.timeline-step-label{font-size:14px;color:#eef0f7;font-weight:500}
.timeline-step-sub{font-size:13px;color:var(--muted);line-height:1.4}
.timeline-connector-line{width:1px;height:14px;background:rgba(255,255,255,.1);margin-left:3.5px}

/* ---- THE FLYWHEEL ---- */
.flywheel{padding:var(--section-padding) var(--section-inline)}
.flywheel .section-title{max-width:var(--shell-max);margin:0 auto 36px}
.flywheel .section-title h2{font-size:clamp(42px,5vw,82px);line-height:1;letter-spacing:-.06em;font-weight:420;margin:0 0 22px}
.flywheel .section-title p{font-size:21px;line-height:1.5;color:#b6bac8;max-width:920px}
.flywheel-loop-visual{max-width:var(--shell-max);margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;row-gap:12px;justify-content:center;padding:48px 0}
.flywheel-node{padding:14px 28px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font-size:16px;color:#d4d7e4;white-space:nowrap;transition:transform 240ms ease,border-color 240ms ease,background 240ms ease,box-shadow 240ms ease;cursor:default}
.flywheel-node:hover{transform:translateY(-3px);border-color:rgba(154,124,255,.4);background:rgba(123,77,255,.1);box-shadow:0 8px 28px rgba(123,77,255,.2)}
.flywheel-arrow{color:rgba(123,77,255,.45);font-size:20px;padding:0 12px;line-height:1;flex-shrink:0}

/* ---- FINAL CTA GLOW ---- */
.final.statement-block{position:relative;overflow:hidden}
.final.statement-block::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:800px;height:400px;background:radial-gradient(ellipse at center,rgba(123,77,255,.18) 0%,transparent 68%);pointer-events:none;z-index:0}
.final.statement-block>*{position:relative;z-index:1}
.final.statement-block h2{text-shadow:0 0 80px rgba(123,77,255,.28),0 0 200px rgba(123,77,255,.12)}

/* ---- SOUL BAND ---- */
.soul-band{padding:64px var(--section-inline);text-align:center;border-top:1px solid rgba(123,77,255,.12);border-bottom:1px solid rgba(123,77,255,.12);background:linear-gradient(rgba(123,77,255,.03),transparent)}
.soul-band p{font-size:clamp(17px,2vw,24px);font-weight:400;letter-spacing:-.02em;color:#d0c8f5;max-width:820px;margin:0 auto;line-height:1.5}

/* ---- ARCHITECTURE TEASER ---- */
.arch-teaser{padding:var(--section-padding) var(--section-inline)}
.arch-teaser .section-title p{font-size:21px;line-height:1.6;color:#b6bac8;max-width:920px;margin:0}
.arch-teaser a{color:#9a7cff;text-decoration:none;border-bottom:1px solid rgba(154,124,255,.28);padding-bottom:1px;transition:color 200ms,border-color 200ms}
.arch-teaser a:hover{color:#c4b0ff;border-color:rgba(196,176,255,.55)}

/* ---- TRUST FOOTER STRIP ---- */
.trust-footer{padding:36px var(--section-inline);border-top:1px solid var(--line);text-align:center}
.trust-footer p{font-size:13px;color:var(--muted);margin:0;letter-spacing:.03em}

/* ---- FOUNDER'S NOTE STUB ---- */
.founders-section{padding:var(--section-padding) var(--section-inline);max-width:var(--shell-max);margin:0 auto;box-sizing:border-box;width:100%}
.founders-stub{min-height:100px;border:1px dashed rgba(255,255,255,.09);border-radius:20px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.18);font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* =============================================
   HOW IT WORKS PAGE — LIFECYCLE FLOW
   ============================================= */

.lifecycle{padding:var(--section-padding) var(--section-inline)}
.lifecycle-header{max-width:var(--shell-max);margin:0 auto 32px}
.lifecycle-example-label{font-size:14px;color:var(--muted);letter-spacing:.04em;margin-bottom:8px}
.lifecycle-example-label em{font-style:normal;color:#c6c8d3;letter-spacing:0}
/* Two entry paths, side by side, both feeding the same loop. */
.hiw-entries{max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:26px;align-items:center}
.hiw-entry{min-width:0}
.hiw-entries .composer-label{margin-bottom:10px}
.hiw-or{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* The loop reads across, not down. Eight cards stacked in a 560px column left
   two thirds of the screen empty and read as a list, not a cycle. */
.lifecycle-flow{position:relative;max-width:1300px;margin:0 auto;
  padding:34px 34px 62px;border-radius:24px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 36px}
.lifecycle-node{position:relative;min-width:0;padding:16px 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  font-size:14.5px;color:#eef0f7;line-height:1.4}
/* the step arrow lives in the gap, so it never eats into a card */
.lifecycle-node:not(:nth-child(4n))::after{content:"";position:absolute;
  right:-24px;top:50%;width:12px;height:1px;background:#ffffff2b}
.lifecycle-node:not(:nth-child(4n))::before{content:"";position:absolute;
  right:-25px;top:50%;margin-top:-3px;width:5px;height:5px;
  border:1px solid #ffffff3d;border-left:0;border-bottom:0;transform:rotate(45deg)}
.lifecycle-node-label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9a7cff;margin-bottom:6px}
.lifecycle-node--review{border-color:rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04))}
.lifecycle-node--bright{border-color:rgba(123,77,255,.3);background:rgba(123,77,255,.07)}
/* and it is a LOOP: what was accepted runs back to the start */
.lifecycle-return{grid-column:1 / -1;position:relative;height:20px;margin-top:8px;
  border-left:1px solid #7b4dff4d;border-right:1px solid #2fd4b84d;
  border-bottom:1px solid #ffffff1f;border-radius:0 0 10px 10px}
.lifecycle-return span{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);
  padding:4px 12px;border-radius:999px;background:#0b0e17;border:1px solid var(--line);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8f93a8;white-space:nowrap}
.lifecycle-caption{max-width:760px;margin:52px auto 0;font-size:16px;line-height:1.65;color:var(--muted);text-align:center}
@media (max-width:1100px){
  .lifecycle-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lifecycle-node:not(:nth-child(4n))::after,.lifecycle-node:not(:nth-child(4n))::before{display:none}
}
@media (max-width:700px){
  .hiw-entries{grid-template-columns:minmax(0,1fr);gap:14px;justify-items:start}
  .lifecycle-flow{grid-template-columns:minmax(0,1fr);padding:24px 22px 62px}
  /* the return label is a single nowrap line by design; at phone width that
     line is wider than the screen, so it has to be allowed to break */
  .lifecycle-return span{white-space:normal;max-width:min(84vw,300px);
    text-align:center;line-height:1.5;letter-spacing:.12em}
}

/* =============================================
   HOW IT WORKS PAGE — EXPERIMENT SECTION
   ============================================= */

.experiment{padding:var(--section-padding) var(--section-inline)}
.experiment .section-title{max-width:var(--shell-max);margin:0 auto 20px}
.experiment .section-title h2{font-size:clamp(42px,5vw,82px);line-height:1;letter-spacing:-.06em;font-weight:420;margin:0 0 22px}
.experiment-lead{font-size:19px;line-height:1.55;color:#b6bac8;max-width:920px;margin:0 0 18px}
.experiment-bullets{max-width:var(--shell-max);margin:0 auto 36px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.experiment-bullets li{font-size:17px;color:#b6bac8;padding-left:24px;position:relative;line-height:1.5}
.experiment-bullets li::before{content:"·";position:absolute;left:0;color:var(--purple);font-size:20px;line-height:1.1}
.experiment-loop-visual{max-width:var(--shell-max);margin:0 auto 32px;display:flex;align-items:center;flex-wrap:wrap;row-gap:10px}
.experiment-closing{max-width:var(--shell-max);margin:0 auto;font-size:17px;color:#c6c8d3;line-height:1.6}

/* =============================================
   HOW IT WORKS PAGE — PLATFORM ARCH BODY
   ============================================= */

.platform-arch-body{margin-bottom:16px}
.platform-arch-body>p{font-size:19px;line-height:1.55;color:#b6bac8;max-width:920px;margin:0 0 22px}
.platform-arch-items{display:flex;flex-direction:column;gap:10px;max-width:820px;margin-bottom:24px}
.platform-arch-item{font-size:16px;color:#b6bac8;padding-left:24px;position:relative;line-height:1.55}
.platform-arch-item::before{content:"·";position:absolute;left:0;color:var(--purple);font-size:20px;line-height:1.1}
.platform-arch-item strong{color:#eef0f7;font-weight:500}
.platform-arch-swap{font-size:17px;color:#c6c8d3;max-width:920px;margin:0}

/* =============================================
   HOW IT WORKS PAGE — OPERATIONAL HIERARCHY
   ============================================= */

.hierarchy{padding:var(--section-padding) var(--section-inline)}
.hierarchy .section-title{max-width:var(--shell-max);margin:0 auto 32px}
.hierarchy-flow{max-width:460px;margin:0 auto}
.hierarchy-node{padding:14px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));font-size:15px;color:#eef0f7;display:flex;align-items:center;gap:14px}
.hierarchy-node--bright{border-color:rgba(123,77,255,.28);background:rgba(123,77,255,.06)}
.hierarchy-num{font-size:10px;color:var(--purple);letter-spacing:.1em;min-width:20px;flex-shrink:0;font-weight:600;text-transform:uppercase}
.hierarchy-connector{height:18px;margin-left:30px;border-left:1px solid rgba(255,255,255,.1);position:relative}
.hierarchy-connector::after{content:"";position:absolute;left:-4px;bottom:-1px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid rgba(255,255,255,.1)}
.hierarchy-caption{text-align:center;margin:28px auto 0;font-size:15px;color:var(--muted);max-width:620px;line-height:1.65}

/* =============================================
   WHY NIEME PAGE
   ============================================= */

/* VS sections */

/* Triad — three columns */
.triad{padding:var(--section-padding) var(--section-inline)}
.triad .section-title{max-width:var(--shell-max);margin:0 auto 32px}
.triad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--shell-max);margin:0 auto}
.triad-col{padding:36px 32px;border-radius:28px}
.triad-col h3{font-size:clamp(19px,2.2vw,26px);font-weight:420;letter-spacing:-.04em;margin:0 0 14px;color:var(--text);line-height:1.1}
.triad-col p{font-size:17px;line-height:1.6;color:#b6bac8;margin:0}

/* =============================================
   RESPONSIVE — NEW SECTIONS
   ============================================= */

@media(max-width:900px){
  .constitution-grid,.before-after-grid,.ledger-content,.triad-grid{grid-template-columns:1fr}
  .ledger-content{gap:40px}
  .flywheel-loop-visual,.experiment-loop-visual{row-gap:6px}
  .platform-arch-items{max-width:100%}
  .page-inner .hero h1{font-size:clamp(34px,10vw,52px)}
}

@media(max-width:768px){
  .lifecycle-flow{padding:24px 20px}
  .hierarchy-flow{max-width:100%}
  .flywheel .section-title h2,.experiment .section-title h2{font-size:clamp(34px,9vw,56px)}
}

/* =============================================
   POLISH PASS 2 — DESIGN ELEVATIONS
   ============================================= */

/* #1 — CTA: kill background glow, let <em> carry it */
.final.statement-block::before{display:none}
.final.statement-block h2{text-shadow:none}

/* #2 — Hero constitution: 3-col visual sequence */
.hero-constitution-visual{display:grid;grid-template-columns:repeat(3,1fr);margin:40px 0 44px;max-width:760px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));overflow:hidden}
.hero-const-col{padding:22px 26px;display:flex;flex-direction:column;gap:10px;position:relative}
.hero-const-col:not(:last-child)::after{content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;background:rgba(255,255,255,.08)}
.hero-const-num{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--purple);font-weight:600;line-height:1}
.hero-const-line{font-size:15px;color:#eef0f7;line-height:1.35;font-weight:420;letter-spacing:-.02em;margin:0}
@media(max-width:600px){
  .hero-constitution-visual{max-width:100%;grid-template-columns:1fr}
  .hero-const-col:not(:last-child){border-bottom:1px solid rgba(255,255,255,.06)}
  .hero-const-col:not(:last-child)::after{display:none}
}

/* #3 — Trust footer: elevated from footnote to trust band */
.trust-footer{padding:56px var(--section-inline);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);text-align:center;background:linear-gradient(rgba(123,77,255,.04),transparent)}
.trust-footer p{font-size:clamp(16px,1.5vw,20px);color:#c6c8d3;margin:0;letter-spacing:.01em;line-height:1.9;font-weight:400}

/* #4 — VS comparison visual */
/* The argument sits BESIDE its evidence, and the sides alternate down the page.
   Four identical 680px boxes stacked in a 1100px column left half the width
   empty every time and read as the same section printed four times. */

/* the two sides are not peers: noise is flat, governed is lifted */
/* the arrow between two stacked panels becomes the seam they cross */
@media(max-width:600px){
}

/* #5 — Ledger: breakthrough framing */
.ledger-invention-tag{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;background:rgba(123,77,255,.1);border:1px solid rgba(123,77,255,.28);color:#c4b0ff;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.ledger-invention-note{font-size:16px;line-height:1.6;color:rgba(154,124,255,.8);margin:20px 0 0!important;padding-left:16px;border-left:2px solid rgba(123,77,255,.3)}

/* #6 — OS card grid */
.os-intro{font-size:19px;line-height:1.55;color:#b6bac8;max-width:920px;margin:0 0 0}
.os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--shell-max);margin:32px auto 0}
.os-card{padding:36px 32px;border-radius:24px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.os-card--featured{border-color:rgba(123,77,255,.35)!important;box-shadow:0 30px 120px rgba(0,0,0,.5),0 0 60px rgba(123,77,255,.12)!important}
.os-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(123,77,255,.05),transparent 60%);pointer-events:none}
.os-card--featured::before{background:linear-gradient(135deg,rgba(123,77,255,.1),transparent 60%)}
.os-card-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#9a7cff;flex-shrink:0}
.os-card-system-label{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;background:rgba(123,77,255,.1);border:1px solid rgba(123,77,255,.2);color:#a991ff;font-size:10px;letter-spacing:.16em;text-transform:uppercase;width:fit-content}
.os-card-name{font-size:clamp(18px,1.8vw,24px);font-weight:500;letter-spacing:-.04em;margin:4px 0 0;color:var(--text);line-height:1}
.os-card-desc{font-size:15px;line-height:1.6;color:#b6bac8;margin:0}
.os-substrate{max-width:var(--shell-max);margin:24px auto 0;padding:24px 28px;display:grid;grid-template-columns:minmax(180px,.45fr) minmax(0,1.55fr);gap:24px;align-items:start;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(123,77,255,.05),rgba(255,255,255,.015) 55%,transparent)}
.os-substrate-label{color:#a991ff;font-size:10px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;padding-top:4px}
.os-substrate-copy h3{font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-.03em;color:var(--text);margin:0 0 8px}
.os-substrate-copy p{font-size:15px;line-height:1.6;color:#b6bac8;margin:0;max-width:920px}
.os-substrate code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:.92em;color:#c4b0ff;letter-spacing:-.02em}
.os-swap{font-size:17px;color:#c6c8d3;max-width:920px;margin:24px 0 0;font-style:italic}
@media(max-width:1024px){.os-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.os-grid{grid-template-columns:1fr}.os-substrate{grid-template-columns:1fr;gap:10px;padding:20px 18px}}

/* #7 — Orbital: text-on-path style */
.runtime-flow-text{font-size:11px;fill:color-mix(in srgb,var(--purple) 65%,transparent);letter-spacing:.06em;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}

/* Neon-glow signature — same style as .final em, usable anywhere */
em.glow{font-style:normal;color:#8d6cff;text-shadow:0 0 10px rgba(123,92,255,.45),0 0 28px rgba(123,92,255,.38),0 0 70px rgba(123,92,255,.22),0 0 140px rgba(123,92,255,.10)}

/* === BEFORE/AFTER ELEVATED — Pass 3 ===
   Centered, larger, always-on traveling wave */
.before-after{text-align:center}
.before-after .section-title{text-align:center;max-width:860px;margin-left:auto;margin-right:auto;margin-bottom:48px}
.before-after-subline{font-size:clamp(19px,2vw,26px);line-height:1.3;letter-spacing:-.03em;font-weight:420;color:#d4d7e4;margin:14px 0 0}
.before-after-grid{max-width:860px;margin-left:auto;margin-right:auto}
.before-after-col{padding:40px 34px;text-align:left}
.before-after .flow-node{padding:13px 22px;font-size:16px;border-radius:12px;max-width:340px}
.before-after .flow-arrow{font-size:15px;padding:7px 0 7px 22px}
.before-after .before-after-label{font-size:12px;letter-spacing:.28em;margin-bottom:26px}

/* End states — applied immediately when is-arguing is set, no transition needed */
.before-after.is-arguing [data-decay="1"]{opacity:1}
.before-after.is-arguing [data-decay="2"]{opacity:.80}
.before-after.is-arguing [data-decay="3"]{opacity:.60}
.before-after.is-arguing [data-decay="4"]{opacity:.45}
.before-after.is-arguing [data-decay="5"]{opacity:.33}
.before-after.is-arguing [data-decay="6"]{opacity:.25}
.before-after.is-arguing [data-glow="1"]{border-color:rgba(123,77,255,.16);background:rgba(123,77,255,.04);color:#d4d7e4}
.before-after.is-arguing [data-glow="2"]{border-color:rgba(123,77,255,.22);background:rgba(123,77,255,.05)}
.before-after.is-arguing [data-glow="3"]{border-color:rgba(123,77,255,.33);background:rgba(123,77,255,.07);color:#d4d7e4}
.before-after.is-arguing [data-glow="4"]{border-color:rgba(123,77,255,.45);background:rgba(123,77,255,.09);color:#dde0ea}
.before-after.is-arguing [data-glow="5"]{border-color:rgba(123,77,255,.58);background:rgba(123,77,255,.11);color:#e5e7f2}
.before-after.is-arguing [data-glow="6"]{border-color:rgba(123,77,255,.70);background:rgba(123,77,255,.13);color:#eaecf5}
.before-after.is-arguing [data-glow="7"]{border-color:rgba(123,77,255,.90);background:rgba(123,77,255,.18);box-shadow:0 0 32px rgba(123,77,255,.32),0 0 64px rgba(123,77,255,.12);color:#eef0f7}

/* Traveling wave — always-on, looping, premium slow
   Today: soft dimness travels down (knowledge dying)
   Nieme: soft brightening travels down (knowledge compounding)
   Negative delays start each chip mid-cycle so the wave is already moving on load */
@keyframes today-wave{
  0%,12%,100%{filter:brightness(1)}
  6%{filter:brightness(.42)}
}
@keyframes nieme-wave{
  0%,12%,100%{filter:brightness(1)}
  6%{filter:brightness(1.68)}
}
.motion-ready [data-decay]{animation:today-wave 8s ease-in-out infinite}
.motion-ready [data-decay="1"]{animation-delay:0s}
.motion-ready [data-decay="2"]{animation-delay:-1s}
.motion-ready [data-decay="3"]{animation-delay:-2s}
.motion-ready [data-decay="4"]{animation-delay:-3s}
.motion-ready [data-decay="5"]{animation-delay:-4s}
.motion-ready [data-decay="6"]{animation-delay:-5s}
.motion-ready [data-glow]{animation:nieme-wave 9s ease-in-out infinite}
.motion-ready [data-glow="1"]{animation-delay:0s}
.motion-ready [data-glow="2"]{animation-delay:-1s}
.motion-ready [data-glow="3"]{animation-delay:-2s}
.motion-ready [data-glow="4"]{animation-delay:-3s}
.motion-ready [data-glow="5"]{animation-delay:-4s}
.motion-ready [data-glow="6"]{animation-delay:-5s}
.motion-ready [data-glow="7"]{animation-delay:-6s}

/* Reduced motion: static end states, no loop */
@media(prefers-reduced-motion:reduce){
  .motion-ready [data-decay],.motion-ready [data-glow]{animation:none!important}
}

/* =============================================
   LOOP MOTIF — brand cycle signature
   ============================================= */

.loop-motif-svg{width:100%;height:auto;overflow:visible}
.loop-motif-svg--6{max-width:520px}
.loop-ring{fill:none;stroke:rgba(123,77,255,.22);stroke-width:1.5}
.loop-ring-glow{fill:none;stroke:rgba(123,77,255,.07);stroke-width:10}
.loop-dot{fill:rgba(154,124,255,.65)}
.loop-tracer{fill:#8d6cff}
.loop-lbl{fill:#9ba0b4;font-size:13px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em}
.loop-lbl--hi{fill:#d4d7e4;font-weight:500}
.loop-motif-center{max-width:520px;margin:36px auto 32px;display:flex;justify-content:center}
@media(prefers-reduced-motion:reduce){.loop-tracer{display:none}}

/* Hero split layout */
.hero--loop{
  padding-top:132px;
  padding-bottom:56px;
  align-content:center;
  align-items:center;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(32px,4vw,56px)
}
.hero-text-col,.hero-loop-col{min-width:0}
.hero-loop-col{display:flex;align-items:center;align-self:center}
@media(max-width:1080px){
  .hero--loop{grid-template-columns:1fr}
  .hero-loop-col{margin-top:48px;display:block}
}
@media(max-width:768px){
  /* the composer IS the product-family signal — it stays on mobile, compacted */
  .thc-shell{padding:12px 12px 10px;border-radius:17px}
  .thc-field{padding:13px 13px;min-height:50px;gap:10px;border-radius:13px}
  .thc-text,.thc-placeholder{font-size:15px}
  .thc-placeholder{left:48px;right:13px}
  .thc-attach{width:25px;height:25px}
  .thc-select{font-size:11px;padding:5px 9px}
/* The executor is not a fixed vendor. The hero rotates the provider so the page
   demonstrates provider neutrality instead of asserting it. */
.thc-select--model{min-width:74px;text-align:center;transition:opacity 260ms ease}
.thc-select--model.is-swapping{opacity:0}

  .thc-send{width:29px;height:29px;font-size:13px}
  .thc-draft-title{font-size:15px}
}

/* Composer input */
.composer-wrap{max-width:560px;margin:0 auto}
.composer-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;padding-left:2px}
.composer-field{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:0 0 0 1px rgba(123,77,255,.15),0 12px 40px rgba(0,0,0,.35)}
.composer-text{flex:1;font-size:16px;color:#eef0f7;line-height:1.4;letter-spacing:-.01em}
.composer-cursor{display:inline-block;width:2px;height:17px;background:#9a7cff;border-radius:1px;margin-left:1px;vertical-align:-3px;animation:cursor-blink 1.1s step-end infinite}
.composer-send{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--purple),#4d9fff);color:white;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 22px rgba(123,77,255,.42)}
.composer-down{width:1px;height:28px;background:linear-gradient(rgba(123,77,255,.4),rgba(255,255,255,.08));margin:10px auto}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.composer-cursor{animation:none}}

/* Ledger right column */
.ledger-right{display:flex;flex-direction:column;gap:28px}

/* ==========================================================================
   Hero — ONE Runtime canvas. Not a stack of widgets: the entry mode, the
   Runtime progression, the transient result and the real Theon-derived
   Composer all live inside a single surface, and the Composer is docked to
   its bottom edge rather than floated below it as a second card.
   ========================================================================== */
.rtc{width:100%;max-width:660px;height:696px;display:flex;flex-direction:column;
  border-radius:24px;overflow:hidden;
  border:1px solid #7b4dff4d;
  background:
    radial-gradient(120% 90% at 4% -6%, #7b4dff33 0%, #7b4dff00 52%),
    radial-gradient(110% 85% at 104% 106%, #2fd4b82b 0%, #2fd4b800 56%),
    linear-gradient(180deg,#141726,#0b0d14);
  box-shadow:0 34px 100px #00000099, inset 0 1px 0 #ffffff0f}

/* the entry mode lives INSIDE the canvas, at its head */
.rtc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;
  padding:15px 18px;border-bottom:1px solid #ffffff12}
.rtc-mode{display:flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#eef0f7;font-weight:560}
.hero-mode-dot{width:7px;height:7px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 12px #7b4dff99;transition:background .4s,box-shadow .4s}
/* an observation is not a request — it gets its own accent, at equal weight */
.rtc[data-scene="0"] .hero-mode-dot{background:var(--cyan);box-shadow:0 0 12px #7ee7ff99}
.rtc-live{display:flex;align-items:center;gap:8px;flex:none;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#787c92}
.stg-live{width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);animation:stg-pulse 2.4s ease-in-out infinite}
@keyframes stg-pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* the stage: it gives up its height to the Composer when the draft unfolds,
   exactly as the conversation area does in the product */
.rtc-stage{position:relative;flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;padding:16px 18px 4px}
.stg-entry{display:flex;align-items:baseline;gap:10px;padding:10px 13px;margin-bottom:8px;
  border-radius:11px;border:1px solid #ffffff14;background:#ffffff0a;flex:none;
  opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
.stg-entry.is-visible{opacity:1;transform:none}
.stg-entry-kind{flex:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#c4b5fd}
.stg-entry-text{font-size:14.5px;line-height:1.4;color:#c8cbd9;letter-spacing:-.01em}
.stg-rows{display:flex;flex-direction:column;gap:2px;flex:none}
.stg-row{display:grid;grid-template-columns:16px minmax(0,auto) minmax(0,1fr);align-items:center;
  gap:11px;padding:6px 2px;
  opacity:0;transform:translateY(4px);transition:opacity .38s ease,transform .38s ease}
.stg-row.is-visible{opacity:1;transform:none}
.stg-mark{width:13px;height:13px;position:relative}
.stg-mark::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:6px;height:6px;border-radius:50%;border:1.5px solid #7b4dff8c;transition:opacity .2s}
.stg-mark::after{content:"";position:absolute;top:50%;left:50%;width:4px;height:8px;
  margin:-6px 0 0 -2px;border:1.6px solid var(--cyan);border-top:0;border-left:0;
  transform:rotate(42deg);opacity:0;transition:opacity .2s}
.stg-row.is-done .stg-mark::before{opacity:0}
.stg-row.is-done .stg-mark::after{opacity:1}
.stg-row.is-running .stg-mark::before{border-color:var(--cyan);animation:stg-pulse 1.3s ease-in-out infinite}
.stg-row.is-held .stg-mark::before{border-style:dashed;border-color:#c4b5fd}
.stg-label{font-size:14.5px;line-height:1.4;color:#c8cbd9;letter-spacing:-.01em}
.stg-row.is-done .stg-label{color:#eef0f7}
.stg-row.is-held .stg-label{color:#fff;font-weight:520}
.stg-meta{font-size:12.5px;color:#787c92;line-height:1.4;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-row.is-held .stg-meta{color:#c4b5fd}

/* the result is a TRANSIENT execution state — it floats over the stage and
   takes no permanent vertical space */
/* transient: it takes no space at all until execution produces it, and gives
   the space back when the scene ends */
.thc-artifact{display:none;margin-top:12px;flex:none;
  border:1px solid #ffffff1f;border-radius:13px;overflow:hidden;
  background:linear-gradient(180deg,#12151f,#0b0d14);
  box-shadow:0 22px 60px #000000a6}
.thc-artifact.is-visible{display:block;animation:art-land .42s ease-out}
@keyframes art-land{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.thc-artifact-top{display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-bottom:1px solid #ffffff0d}
.thc-artifact-icon{width:22px;height:28px;flex:none;border-radius:3px;position:relative;
  background:linear-gradient(160deg,#2f8f6a,#1d6349);box-shadow:0 2px 8px #00000059}
.thc-artifact-icon::after{content:"";position:absolute;right:0;top:0;border-width:0 8px 8px 0;
  border-style:solid;border-color:transparent #0c0e15 transparent transparent}
.thc-artifact-name{font-size:14px;color:#eef0f7;letter-spacing:-.01em}
.thc-artifact-meta{margin-left:auto;font-size:11.5px;color:#787c92;white-space:nowrap}
.thc-artifact-preview{display:grid;grid-template-columns:1.6fr 1fr 1fr;font-size:11.5px;
  color:#9ba0b4;font-variant-numeric:tabular-nums}
.thc-artifact-preview span{padding:6px 14px;border-bottom:1px solid #ffffff08}
.thc-artifact-preview span:nth-child(-n+3){color:#c8cbd9;background:#ffffff06;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.thc-artifact-preview span:nth-child(3n){text-align:right}

/* ---- the Composer, docked to the canvas floor ---- */
.thc-shell{position:relative;flex:none;padding:14px 18px 12px;
  border-top:1px solid #ffffff14;background:#00000038}
.thc-context{display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:9px;
  background:#ffffff0f;border:1px solid #ffffff17;font-size:12.5px;max-width:100%}
.thc-context-key{color:#9096ab;flex:none}
.thc-context-val{color:#eef0f7;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thc-cmd{display:flex;align-items:center;gap:10px;margin:11px 0 0;padding-left:2px;
  font-size:12.5px;color:#6f738a}
.thc-cmd-key{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#7b4dff,#6f63ff);color:#fff;font-size:12px;font-weight:600}
.thc-opmode{display:none;align-items:center;gap:10px;margin:11px 0 0;padding-left:2px;font-size:12.5px}
.rtc[data-scene="0"] .thc-opmode{display:flex}
.rtc[data-scene="0"] .thc-cmd{display:none}
.thc-opmode-badge{font-size:10px;letter-spacing:.16em;color:#fff;padding:4px 9px;border-radius:6px;
  background:linear-gradient(120deg,#7b4dff,#6f63ff);white-space:nowrap}
.thc-opmode-desc{color:#8b8fa3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thc-opmode-close{margin-left:auto;color:#6f738a;font-size:15px;line-height:1;flex:none}
.thc-opmode-back{color:#aeb2c4;flex:none;border-bottom:1px solid #ffffff1f;padding-bottom:1px}
.thc-field{position:relative;display:flex;align-items:center;gap:12px;margin-top:10px;
  padding:14px 16px;border-radius:14px;border:1px solid #ffffff17;background:#080a10cc;min-height:54px;
  transition:border-color .4s}
.rtc.is-armed .thc-field{border-color:#7b4dff40}
.thc-attach{width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid #ffffff1c;background:#ffffff0a;color:#8b8fa3}
.thc-attach svg{width:14px;height:14px;display:block}
.thc-text{font-size:15.5px;color:#eef0f7;line-height:1.45;letter-spacing:-.01em;word-break:break-word}
.thc-placeholder{position:absolute;left:54px;right:16px;font-size:15.5px;color:#585c70;
  pointer-events:none;opacity:0;transition:opacity .25s}
.rtc.is-empty .thc-placeholder{opacity:1}
.rtc.is-empty .composer-cursor{opacity:0;animation:none}
.thc-field .composer-cursor{height:18px;vertical-align:-3px;margin-left:1px}
.thc-controls{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:11px}
.thc-select{font-size:12px;color:#aeb2c4;border:1px solid #ffffff17;border-radius:9px;
  padding:6px 10px;background:#ffffff0a;white-space:nowrap}
.thc-select::after{content:"⌄";margin-left:7px;color:#6f738a;font-size:11px;vertical-align:1px}
.thc-send{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#7b4dff,#5f6cff);color:#fff;font-size:14px;
  box-shadow:0 0 22px #7b4dff5c;transition:box-shadow .4s}
.rtc.is-armed .thc-send{box-shadow:0 0 30px #7b4dff8c,0 0 44px #2fd4b833}
.thc-foot{margin-top:9px;text-align:center;font-size:11.5px;color:#767a90}


/* ---- the draft.on, as Theon renders it: the Composer unfolds and the draft
       sits INSIDE the frame above the input. Structure, labels, radii, weights
       and the unfold easing are the product's .composer-draft-unfold. In the
       hero the secondary cells are folded away — the canvas gives its height to
       the draft, and the Runtime progression above must stay readable. ---- */
.composer-draft-unfold{
  margin:10px 0 0;border:1px solid rgba(167,139,250,.26);border-radius:18px;
  background:linear-gradient(135deg,rgba(35,40,62,.72),rgba(18,22,35,.78));
  box-shadow:0 18px 60px rgba(0,0,0,.26),0 0 0 1px rgba(126,231,255,.08),
             0 0 42px rgba(123,77,255,.13),inset 0 1px 0 rgba(255,255,255,.1);
  overflow:hidden;transform-origin:bottom center;display:none}
.composer-draft-unfold.is-visible{display:block;animation:composer-unfold .22s ease-out}
@keyframes composer-unfold{
  from{opacity:.45;transform:translateY(8px) scaleY(.94);filter:blur(1px)}
  to{opacity:1;transform:none;filter:none}}
.cdu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.cdu-kicker{font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#c4b5fd}
.cdu-title{font-size:14px;font-weight:850;color:#e9eefb;line-height:1.3;margin-top:2px}
.cdu-status{font-size:11px;color:#a9b4ca;line-height:1.5;margin-top:3px}
.cdu-close{flex:none;font-size:12px;font-weight:750;line-height:1.2;color:#788398;
  border:1px solid transparent;border-radius:8px;padding:6px 11px;white-space:nowrap}
.cdu-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:12px 14px}
.cdu-cell{border:1px solid rgba(255,255,255,.08);border-radius:12px;
  background:rgba(255,255,255,.035);padding:9px 10px;min-width:0}
.cdu-cell.wide{grid-column:1/-1}
.cdu-label{font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
  color:#788398;margin-bottom:4px}
.cdu-value{font-size:12px;color:#a9b4ca;line-height:1.5}
.cdu-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 12px}
.cdu-action{display:inline-flex;align-items:center;border-radius:8px;padding:7px 12px;
  font-size:12px;font-weight:750;line-height:1.2;white-space:nowrap;
  background:transparent;border:1px solid rgba(162,184,230,.22);color:#a9b4ca}
/* hero fold: Objective and Project carry the story; the rest stays in the product */
.rtc .cdu-cell:not(.wide){display:none}

/* Below 1080px this used to drop to height:auto with a 640px floor, so the box
   GREW when the draft unfolded inside the Composer — measured at 640 -> 848px,
   which pushed everything under the hero down 208px and back up again on every
   loop. The desktop rule was always a fixed height for exactly this reason: the
   stage is flex:1 and absorbs the change. 800px is the smallest height at which
   nothing clips at any scene (measured across the full cycle). */
@media (max-width:1080px){ .rtc{max-width:none;height:800px;min-height:0} }
/* narrower screens wrap the Composer and the draft onto more lines, so the
   locked height has to grow with them — still locked, just taller */
@media (max-width:480px){ .rtc{height:900px} }
@media (prefers-reduced-motion:reduce){
  .composer-draft-unfold.is-visible{animation:none}
  .stg-live{animation:none}
  .stg-row,.stg-entry{opacity:1;transform:none;transition:none}
  .thc-artifact.is-visible{animation:none}
}

@media(prefers-reduced-motion:reduce){
}

/* Balanced headings */
h1,h2,h3{text-wrap:balance}

/* Compact glass chips (bullet group replacement) */
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{flex:1 1 180px;padding:14px 18px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));font-size:14px;line-height:1.5;color:#c4c6d4;display:flex;align-items:flex-start;gap:9px}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(123,77,255,.65);flex-shrink:0;margin-top:6px}

/* Experiment section pull-quote */
.experiment-pullquote{max-width:800px;margin:44px auto 0;font-size:clamp(20px,2vw,26px);font-style:italic;line-height:1.5;color:#d0d2e0;text-align:center;letter-spacing:-.02em}

/* ============================================================================
   NIEME-WEBSITE-RUNTIME-REPOSITION-001
   Runtime positioning: hero, product-screenshot slots, entry paths, runtime
   loop, cross-system band, Operation anatomy, executors, judgment, learning,
   and the conceptual Runtime diagram.
   ========================================================================= */

/* Hero — text-led, single column, so the product frame below gets the width */
.hero--runtime{min-height:auto;padding-top:190px;padding-bottom:52px}
.hero--runtime .hero-text-col{max-width:1000px}
.hero--runtime h1{margin-bottom:26px}
.hero--runtime .lede{max-width:760px}

/* ---- Product screenshot slots -------------------------------------------
   To swap a slot for a real asset, replace the .shot-placeholder element with
   <img src="..." alt="..." />. The frame, ratio and spacing are unchanged. */
.shotband{padding:0 var(--section-inline) var(--section-padding)}
.shotband--hero{padding-top:0}
.shot{margin:0 auto;width:100%}
.shot--wide{max-width:1680px}
.shot--mid{max-width:1280px;margin-top:56px}
.shot-frame{position:relative;width:100%;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#ffffff0a,#ffffff03);
  box-shadow:0 40px 140px #00000080,0 18px 52px #654cff18}
.shot--wide .shot-frame{aspect-ratio:16/9}
.shot--mid .shot-frame{aspect-ratio:16/10}
.shot-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.shot-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:32px;
  background:repeating-linear-gradient(135deg,#ffffff05 0 14px,#ffffff00 14px 28px)}
.shot-slot-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--purple);font-weight:600}
.shot-slot-title{margin:0;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em;color:#eef0f7}
.shot-slot-desc{margin:0;max-width:640px;font-size:15px;line-height:1.5;color:var(--muted)}
.shot-placeholder code{font-size:12px;color:#8f93a8;background:#ffffff08;border:1px solid var(--line);border-radius:8px;padding:6px 12px}
.shot-slot-spec{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6f738a}
.shot figcaption{margin:20px auto 0;max-width:860px;text-align:center;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---- Section 1: two entry paths ---------------------------------------- */
.entrypaths,.loop,.crosssystem,.governed,.executors,.judgment,.learning,.runtimeviz{padding:var(--section-padding) var(--section-inline)}
.entrypaths-grid{max-width:var(--shell-max);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.entrypath{padding:34px 36px}
.entrypath-num{font-size:11px;letter-spacing:.2em;color:var(--purple);font-weight:600;margin-bottom:16px}
.entrypath h3{margin:0 0 12px;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.035em;font-weight:440}
.entrypath p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.entrypaths-converge{max-width:var(--shell-max);margin:34px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
.converge-node{border:1px solid var(--line);border-radius:999px;padding:11px 22px;font-size:14px;color:#d7d8e5;background:#ffffff07}
.converge-node--end{border-color:#7b4dff66;color:#fff;background:#7b4dff1a}
.converge-arrow{color:var(--purple);font-size:16px}

/* ---- Section 2: the runtime loop --------------------------------------- */
.loop-grid{max-width:var(--shell-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.loop-stage{padding:30px 30px 26px;display:flex;flex-direction:column;gap:12px}
.loop-stage-head{display:flex;align-items:baseline;gap:12px}
.loop-stage-num{font-size:11px;letter-spacing:.18em;color:var(--purple);font-weight:600}
.loop-stage h3{margin:0;font-size:23px;letter-spacing:-.03em;font-weight:440}
.loop-stage p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;flex:1}
.loop-stage-map{margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.loop-stage-map span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8f93a8}


/* ---- Section 3: cross-system ------------------------------------------- */
.crosssystem-band{max-width:1100px;margin:0 auto;text-align:center}
.xs-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.xs-sys{border:1px solid var(--line);border-radius:12px;padding:12px 20px;font-size:15px;color:#d7d8e5;background:#ffffff07}
.xs-down{color:var(--purple);font-size:20px;margin:18px 0}
.xs-runtime{display:inline-block;border:1px solid #7b4dff55;border-radius:16px;padding:18px 42px;font-size:15px;letter-spacing:.22em;
  color:#fff;background:linear-gradient(180deg,#7b4dff22,#7b4dff0a);box-shadow:0 0 60px #7b4dff26}
.xs-caption{margin-top:16px;font-size:14px;color:var(--muted)}
.crosssystem-note{max-width:900px;margin:34px auto 0;text-align:center;font-size:15px;line-height:1.6;color:#8f93a8}

/* ---- Section 4: Operation anatomy -------------------------------------- */
.anatomy-grid{max-width:var(--shell-max);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.anatomy-item{padding:22px 24px;display:flex;flex-direction:column;gap:8px;border-radius:18px}
.anatomy-key{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);font-weight:600}
.anatomy-val{font-size:15px;line-height:1.5;color:#d7d8e5}
.governed-note{max-width:900px;margin:32px auto 0;text-align:center;font-size:15px;line-height:1.6;color:#8f93a8}

/* ---- Section 5: executors ---------------------------------------------- */
.executors-row{max-width:var(--shell-max);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.executor{padding:16px 26px;border-radius:14px;font-size:15px;color:#d7d8e5}
.executors-note{max-width:800px;margin:28px auto 0;text-align:center;font-size:16px;color:var(--muted)}

/* ---- Section 6: result / evidence / decision --------------------------- */
.judgment-triple{max-width:var(--shell-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.judgment-card{padding:30px 32px}
.judgment-label{font-size:11px;letter-spacing:.2em;color:#8f93a8;font-weight:600;margin-bottom:14px}

.judgment-card--decision{border-color:#7ee7ff33;box-shadow:0 30px 120px #00000066,0 0 46px #7ee7ff14}
.judgment-card p{margin:0;font-size:18px;line-height:1.5;color:#eef0f7;letter-spacing:-.02em}
.judgment-note{max-width:900px;margin:32px auto 0;text-align:center;font-size:15px;line-height:1.6;color:#8f93a8}

/* ---- Section 7: learning ----------------------------------------------- */
.learning-chain{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
.lc-node{border:1px solid var(--line);border-radius:999px;padding:12px 24px;font-size:15px;color:#d7d8e5;background:#ffffff07}
.lc-node--end{border-color:#7ee7ff44;color:#fff;background:#7ee7ff12}
.lc-arrow{color:var(--purple)}

/* ---- Runtime conceptual visual ----------------------------------------- */
.rv-diagram{max-width:900px;margin:0 auto;text-align:center}
.rv-tier{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.rv-chip{border:1px solid var(--line);border-radius:12px;padding:12px 22px;font-size:15px;color:#d7d8e5;background:#ffffff07}
.rv-chip--state{border-color:#7ee7ff33;color:#fff}
.rv-chip code{font-size:14px;color:var(--cyan)}
.rv-down{color:var(--purple);font-size:20px;margin:16px 0}
.rv-core{border:1px solid #7b4dff55;border-radius:20px;padding:26px 32px;background:linear-gradient(180deg,#7b4dff1f,#7b4dff08);box-shadow:0 0 70px #7b4dff24}
.rv-core-name{font-size:16px;letter-spacing:.24em;color:#fff;margin-bottom:10px}
.rv-core-verbs{font-size:14px;color:#b9bcd0;letter-spacing:.04em}
.rv-note{max-width:800px;margin:30px auto 0;text-align:center;font-size:15px;color:#8f93a8}


/* ---- Responsive -------------------------------------------------------- */
@media (max-width:1080px){
  .loop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anatomy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .judgment-triple{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .hero--runtime{padding-top:150px}
  .entrypaths-grid{grid-template-columns:minmax(0,1fr)}
  .loop-grid{grid-template-columns:minmax(0,1fr)}
  .anatomy-grid{grid-template-columns:minmax(0,1fr)}
  .shot--wide .shot-frame,.shot--mid .shot-frame{aspect-ratio:4/3}
  .shot-slot-desc{font-size:14px}
}
/* How It Works — second entry path in the lifecycle opener */
.hiw-or{text-align:center;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#6f738a;margin:18px 0 14px}
.composer-field--observed{border-style:dashed}
.composer-observed{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);border:1px solid #7ee7ff40;border-radius:999px;padding:4px 12px;white-space:nowrap}


@media (max-width:1080px){ .outcomes{grid-template-columns:minmax(0,1fr)}
  .runtimeviz--teaser .rv-teaser{grid-template-columns:minmax(0,1fr);gap:38px} }
.rv-teaser-copy{max-width:var(--shell-max);margin:0 auto 44px}
.rv-teaser-copy .eyebrow{margin-bottom:24px}
/* the bridge out of the compounding story — this section is its conclusion,
   not a new subject */
.rv-bridge{margin:0 0 26px;padding-left:22px;position:relative;
  font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:#9ba0b4;max-width:640px}
.rv-bridge::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:2px;
  border-radius:2px;background:linear-gradient(180deg,#7b4dff,#2fd4b8)}
.rv-teaser-copy h2{font-size:clamp(34px,3.6vw,58px);line-height:1.05;letter-spacing:-.05em;font-weight:420;margin:0 0 22px}
.rv-teaser-copy p{font-size:19px;line-height:1.6;color:#b6bac8;margin:0;max-width:860px}
.rv-teaser-copy a{color:#a98bff;text-decoration:none;border-bottom:1px solid #a98bff47;padding-bottom:1px;transition:color .2s,border-color .2s;white-space:nowrap}
.rv-teaser-copy a:hover{color:#c9b6ff;border-color:#c9b6ff8c}

/* ============================================================================
   R3 — visual craft. One language per concept, motion only where it means
   something, hover/state on everything interactive.
   ========================================================================= */
/* .outcomes is a grid INSIDE .loop — it must not take the section padding again */
.jtbd,.proof,.crosssystem,.governed,.executors,.judgment,.learning,
.runtimeviz,.entrypaths,.loop{padding:var(--section-padding) var(--section-inline)}

/* hero: an observation is not a request — the send action is not armed for it */

/* ---- the problem, shown as the ARTEFACT of coordination rather than as a
       diagram of it. Nobody recognises a process chart; everybody recognises
       "can you send me the latest version?". Left: the pile of messages it
       takes to move one piece of work, none of which are the work. Right: the
       same work as one governed object. Clutter against calm — no reading,
       no chart, no chain. ---- */
.cmp{max-width:var(--shell-max);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;align-items:start}
.cmp-side{min-width:0;display:flex;flex-direction:column}
.cmp-cap{align-self:flex-start;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:5px 11px;border-radius:7px;margin-bottom:22px;
  color:#c8cbd9;background:#ffffff0d;border:1px solid #ffffff1c}
.cmp-cap--runtime{color:#fff;border-color:#7b4dff59;
  background:linear-gradient(100deg,#7b4dff33,#2fd4b81f)}
.cmp-note{margin:22px 0 0;font-size:15px;line-height:1.6;color:#8f93a8;max-width:520px}

/* the pile: real messages, slightly askew, stacking up */
/* the noisy side: one real thread, two days long, going nowhere */
.cm-thread{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.cm-thread-head{align-self:flex-start;display:flex;align-items:baseline;gap:10px;margin-bottom:4px;
  padding:7px 13px;border-radius:9px;border:1px solid #ffffff14;background:#ffffff08}
.cm-ch{font-size:13px;font-weight:600;color:#d5d8e6;letter-spacing:-.01em}
.cm-ch-sub{font-size:11.5px;color:#787c92}
.cm-msg{align-self:flex-start;max-width:min(100%,430px);margin-left:var(--x,0);
  transform:rotate(var(--r,0));
  padding:11px 15px;border-radius:13px 13px 13px 5px;
  border:1px solid #ffffff14;background:#ffffff08;
  box-shadow:0 10px 26px #00000059}
.cm-msg:nth-child(odd){background:#ffffff0a}
.cm-who{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#787c92}
.cm-msg p{margin:5px 0 0;font-size:15px;line-height:1.4;color:#c8cbd9;letter-spacing:-.01em}
.cm-time{display:block;margin-top:6px;font-size:11px;color:#5f6478}
/* the divider is the whole argument: a day passed and nothing moved */
.cm-day{display:flex;align-items:center;gap:14px;margin:6px 0 2px;
  font-size:10px;letter-spacing:.22em;color:#6d7186}
.cm-day::before,.cm-day::after{content:"";flex:1;height:1px;background:#ffffff14}

/* the calm side: the real governed object, and the one decision left */
.cm-obj{border-radius:16px;overflow:hidden;
  border:1px solid #7b4dff59;
  background:
    radial-gradient(120% 150% at 0% 0%, #7b4dff26 0%, #7b4dff00 58%),
    radial-gradient(120% 150% at 100% 100%, #2fd4b81f 0%, #2fd4b800 58%),
    linear-gradient(180deg,#171a2b,#0f1119);
  box-shadow:0 26px 70px #00000080, inset 0 1px 0 #ffffff14;
  display:flex;flex-direction:column}
.cm-obj-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 24px;border-bottom:1px solid #ffffff12;background:#ffffff06}
.cm-obj-kicker{font-size:10.5px;letter-spacing:.2em;color:#c4b5fd;font-weight:700}
.cm-obj-state{font-size:11.5px;line-height:1;padding:6px 11px;border-radius:999px;
  border:1px solid #7ee7ff4d;color:#a9f0ff;background:#7ee7ff12;white-space:nowrap}
.cm-obj-title{margin:0;padding:22px 24px 0;font-size:clamp(19px,1.85vw,25px);line-height:1.22;
  letter-spacing:-.03em;color:#fff;font-weight:440}
.cm-obj-rows{margin:20px 0 0;padding:0 24px}
.cm-obj-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:13px 0;border-top:1px solid #ffffff0f}
.cm-obj-row:first-child{border-top:0}
.cm-obj-row dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7f8499}
.cm-obj-row dd{margin:0;min-width:0;font-size:14.5px;line-height:1.35;color:#e7e9f3;letter-spacing:-.01em}
.cm-obj-row dd em{display:block;margin-top:4px;font-style:normal;font-size:12.5px;
  line-height:1.4;color:#868b9f;letter-spacing:0}
.cm-obj-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:6px;padding:16px 24px 18px;border-top:1px solid #ffffff12;background:#ffffff05}
.cm-obj-btn{font-size:13px;line-height:1;padding:11px 16px;border-radius:9px;
  border:1px solid var(--line);color:#c3c7d6;background:#ffffff08}
/* the payoff, said plainly: this is what the contrast is worth */
.cm-gain{margin-top:30px;padding-top:26px;border-top:1px solid #ffffff14}
.cm-gain-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cm-gain-was{font-size:clamp(17px,1.6vw,21px);color:#7c8096;letter-spacing:-.02em;
  text-decoration:line-through;text-decoration-color:#7c809666}
.cm-gain-arrow{flex:none;width:38px;height:1px;position:relative;
  background:linear-gradient(90deg,#7b4dff66,#2fd4b8)}
.cm-gain-arrow::after{content:"";position:absolute;right:0;top:-3px;
  width:6px;height:6px;border:1px solid #2fd4b8;border-left:0;border-bottom:0;
  transform:rotate(45deg)}
.cm-gain-now{font-size:clamp(17px,1.6vw,21px);color:#fff;letter-spacing:-.02em}
.cm-gain p{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:#8f93a8;max-width:520px}
.cm-obj-btn--go{color:#fff;border-color:#7b4dff80;
  background:linear-gradient(120deg,#7b4dff,#5b6dff);box-shadow:0 0 24px #6c4cff4d}

.coord-close{display:flex;align-items:center;gap:24px;max-width:var(--shell-max);margin:58px auto 0}
/* BRAND LAW: the Nieme glyph is the logo mark and nothing else — never a bullet,
   node, completion mark, flow endpoint, diagram ornament or status icon. */
.coord-close-trace{flex:none;width:72px;height:1px;
  background:linear-gradient(90deg,#7b4dff00,#7b4dff99 38%,var(--cyan))}
.jtbd-close{margin:0;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.035em;line-height:1.15;
  color:#fff;font-weight:420}

@media (max-width:1000px){
  .cmp{grid-template-columns:minmax(0,1fr);gap:44px}
  .cm-msg{margin-left:0;max-width:100%}
}
/* ---- entry paths: bifurcation converging ---- */
.bifurcate{max-width:var(--shell-max);margin:8px auto 0;text-align:center}
.bifurcate-svg{width:100%;max-width:720px;height:90px;display:block;margin:0 auto}
.bifurcate-out{display:inline-block;margin-top:2px;padding:12px 26px;border-radius:14px;
  border:1px solid #7b4dff4d;background:linear-gradient(100deg,#7b4dff1c,#2fd4b80a);color:#fff;font-size:16px}

/* ---- cross-system: a constellation around the core ---- */
/* ---- the Runtime orb: a 3D sphere on canvas. Work streams in from the
       systems it already lives in, the core processes it, and governed work
       leaves again. Labels ride the same rotation and dim behind the sphere. ---- */
.orb{position:relative;width:100%;max-width:min(var(--shell-max),1420px);height:clamp(600px,52vw,820px);margin:0 auto;
  isolation:isolate}
.orb-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.orb::before{content:"";position:absolute;left:50%;top:50%;width:72%;height:72%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#7b4dff2b 0%,#2fd4b80f 42%,transparent 68%);
  filter:blur(26px)}
.orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;z-index:9}
.orb-core-name{display:block;font-size:13px;letter-spacing:.24em;color:#fff;line-height:1.6;
  text-shadow:0 0 22px #7b4dffa6}
.orb-core-verbs{display:block;margin-top:8px;font-size:11px;letter-spacing:.07em;color:#b9bcd0}
.orb-labels{position:absolute;inset:0;pointer-events:none}
.orb-node,.orb-out{position:absolute;left:0;top:0;white-space:nowrap;max-width:44%;
  overflow:hidden;text-overflow:ellipsis;
  padding:8px 14px;border-radius:10px;font-size:13.5px;line-height:1;
  will-change:transform,opacity}
.orb-node{color:#d7d8e5;border:1px solid var(--line);background:#0c101aee;
  display:inline-flex;align-items:center;gap:8px}
/* the connectors orbit the sphere rather than sitting in a strip below it:
   the field already runs cyan motes inward, so the systems belong on the way in */
.orb-mark{width:16px;height:16px;flex:none}
@media (max-width:820px){.orb-mark{width:14px;height:14px}}
@media (max-width:560px){.orb-mark{width:13px;height:13px}}
/* ten connectors will not fit as labels on a phone arc, and they do not need to:
   the marks are the recognisable part. The orbit stays, the words step aside.
   .orb-labels is aria-hidden already; .orb-a11y carries the real description. */
@media (max-width:700px){
  .orb-node{font-size:0;gap:0;padding:7px;border-radius:9px}
  .orb-node .orb-mark{width:17px;height:17px}
}
.orb-out{color:#fff;border:1px solid #7b4dff59;
  background:linear-gradient(100deg,#7b4dff2b,#2fd4b814);backdrop-filter:blur(4px)}
.orb-a11y{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px){
  .orb{height:520px}
  .orb-node,.orb-out{font-size:12px;padding:6px 10px}
}
@media (max-width:560px){
  .orb{height:440px}
  .orb-node,.orb-out{font-size:11px;padding:5px 9px}
}

.cst-caption{margin:18px auto 0;text-align:center;font-size:14px;color:var(--muted)}

/* ---- governed work: copy beside a real state progression ---- */
.governed-split{max-width:var(--shell-max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.governed-points{display:flex;flex-direction:column}
.governed-point{padding:22px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.55;color:var(--muted);
  transition:color .25s}
.governed-point:last-child{border-bottom:1px solid var(--line)}
.governed-point:hover{color:#c8cbd9}
.governed-point strong{color:#eef0f7;font-weight:560}
.judgment-body{max-width:var(--shell-max);margin:0 auto}
.judgment-lead{max-width:1000px;margin:0;font-size:clamp(18px,1.7vw,22px);line-height:1.55;color:#c3c6d6}
/* three separate things, shown as three separate things */
.triptych{position:relative;margin:52px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line)}
/* sequence is carried by reveal timing on the hairline, never by semantic colour:
   all three labels, all three primaries and all three secondaries are identical */
.triptych::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:33.3333%;
  background:linear-gradient(90deg,#7b4dff00,#7b4dff99 55%,var(--cyan));
  animation:tri-sweep 8s ease-in-out infinite}
@keyframes tri-sweep{
  0%{transform:translateX(0);opacity:0}
  7%{opacity:1}
  30%{transform:translateX(0)}
  40%{transform:translateX(100%)}
  63%{transform:translateX(100%)}
  73%{transform:translateX(200%)}
  93%{opacity:1}
  100%{transform:translateX(200%);opacity:0}}
.tri{padding:26px 34px 6px 0}
.tri + .tri{padding-left:34px;border-left:1px solid var(--line)}
.tri-label{font-size:11px;font-weight:400;letter-spacing:.2em;color:var(--purple);margin:0 0 14px}
.tri-is{margin:0 0 10px;font-size:18px;line-height:1.4;color:#eef0f7;letter-spacing:-.01em}
.tri-not{margin:0;font-size:15px;line-height:1.5;color:#83879c}
@media (max-width:860px){
  .triptych{grid-template-columns:minmax(0,1fr)}
  .tri{padding:22px 0 18px;border-top:1px solid var(--line)}
  .tri:first-child{border-top:0}
  .tri + .tri{padding-left:0;border-left:0}
}

/* ---- executors: one socket, a bus, interchangeable units ---- */
.swap{max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,260px) 74px minmax(0,1fr);gap:0;align-items:center}
.swap-socket{border:1px solid #7b4dff4d;border-radius:18px;padding:26px;text-align:center;
  background:linear-gradient(180deg,#7b4dff1c,#7b4dff06)}
.swap-socket-label{font-size:11px;letter-spacing:.2em;color:#fff;margin-bottom:8px}
.swap-socket-body{font-size:13px;color:#b9bcd0;letter-spacing:.04em}
/* the bus: the work plugs in here; whichever unit is seated does the work */
.swap-bus{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.swap-bus-line{position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,#7b4dff8c,#7b4dff26)}
.swap-bus-plug{position:relative;width:9px;height:9px;border-radius:50%;
  background:#7b4dff;box-shadow:0 0 16px #7b4dffa6}
.swap-slot{display:flex;flex-direction:column;gap:0;border:1px dashed #ffffff26;border-radius:18px;padding:8px}
.swap-unit{position:relative;padding:15px 20px 15px 34px;border-radius:12px;font-size:15.5px;color:#9ba0b4;
  transition:background .22s,color .22s,transform .22s}
.swap-unit::before{content:"";position:absolute;left:16px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;border:1px solid #ffffff33;transition:background .22s,border-color .22s}
.swap-unit:hover::before{border-color:#7b4dff8c}
.swap-unit:hover{background:#ffffff0d;color:#fff;transform:translateX(5px)}
.swap-unit.is-active::before{background:#7b4dff;border-color:#7b4dff;box-shadow:0 0 12px #7b4dff8c}
.swap-unit.is-active{background:#ffffff12;color:#fff}
.executors-note{max-width:800px;margin:28px auto 0;text-align:center;font-size:16px;color:var(--muted)}

/* ---- learning, told as QUESTIONS BECOMING ANSWERS. The old version showed a
       line appearing in a list, which read like Nieme had memorised a
       spreadsheet layout. What an organisation actually gains is that settled
       things stop being re-litigated: which terms are authoritative, who may
       decide, what was agreed. The list of things a person must answer gets
       shorter — that is the compounding, and it is legible at a glance. ---- */
/* ---- Delivered: one operation, four governed deliverables ---------------
   Ending the proof on a single spreadsheet undersold the product. The shape
   here follows the real Operation detail surface — outcome, governed role,
   success criteria, the declared deliverables, the evidence and the one
   human decision. Verified against a real multi-deliverable Operation in a
   Runtime (one operation, one execution, three artifacts, status review);
   the Project, the file names and the ids are synthetic, as in every other
   native frame here. */
.ui-delivered{display:flex;flex-direction:column}
.dv-head{align-items:flex-start}
.dv-flags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
.dv-state{font-size:10.5px;letter-spacing:.14em;line-height:1;padding:6px 11px;border-radius:999px;
  border:1px solid #7ee7ff4d;color:#a9f0ff;background:#7ee7ff12;white-space:nowrap}
.dv-imm{font-size:11px;color:var(--ui-muted);white-space:nowrap}
.dv-meta{margin:0;padding:16px 22px 4px}
.dv-row{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:16px;
  padding:10px 0;border-top:1px solid #ffffff0d}
.dv-row:first-child{border-top:0}
.dv-row dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-muted)}
.dv-row dd{margin:0;min-width:0;font-size:13.5px;line-height:1.4;color:var(--ui-text)}
.dv-row dd em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--ui-muted)}
.dv-files{margin:12px 22px 0;border:1px solid var(--ui-line);border-radius:12px;overflow:hidden;
  background:#ffffff05}
.dv-files-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 15px;border-bottom:1px solid var(--ui-line);
  font-size:10px;letter-spacing:.2em;color:var(--ui-muted)}
.dv-count{letter-spacing:.04em;font-size:11.5px;color:#7fe3cd}
.dv-list{list-style:none;margin:0;padding:0}
.dv-list li{display:flex;align-items:center;gap:12px;min-width:0;
  padding:11px 15px;border-top:1px solid #ffffff08;font-size:13.5px}
.dv-list li:first-child{border-top:0}
.dv-kind{flex:none;width:46px;text-align:center;font-size:9.5px;letter-spacing:.08em;font-weight:700;
  line-height:1;padding:5px 0;border-radius:5px;color:#0b0e15}
.dv-kind--md{background:#9aa3b8}
.dv-kind--xlsx{background:#4caf7d}
.dv-kind--docx{background:#5b8def}
.dv-kind--pdf{background:#e0685f}
/* REVIEW-PRESENTATION-002 — o quinto entregavel e uma pagina, e ela e navegavel antes
   da decisao. A previa vive DENTRO da lista porque a pagina e um entregavel como os
   outros; um painel separado sugeriria que ela e outra coisa. */
.dv-kind--html{background:#7ee7ff}
.dv-list li.dv-lead{background:#7ee7ff0d}
.dv-list li.dv-lead .dv-name{font-weight:600;color:#fff}
.dv-prev{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 15px;border-top:1px solid var(--ui-line);background:#ffffff05}
.dv-prev img{flex:none;width:118px;height:74px;object-fit:cover;object-position:top left;
  border:1px solid var(--ui-line2);border-radius:7px}
.dv-prev-t{min-width:0;flex:1 1 210px}
.dv-prev-t b{display:block;font-size:13.5px;font-weight:600;color:var(--ui-text)}
.dv-prev-t span{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--ui-muted)}
.dv-url{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:#7fe3cd;padding:7px 10px;border-radius:7px;border:1px solid #2fd4b833;background:#2fd4b810}
@media (max-width:620px){
  .dv-prev{gap:10px}
  .dv-prev img{width:92px;height:58px}
}
.dv-name{min-width:0;flex:1;color:var(--ui-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-size{flex:none;font-size:12px;color:var(--ui-muted);font-variant-numeric:tabular-nums}
.dv-ok{flex:none;font-size:11.5px;color:#7fe3cd;display:inline-flex;align-items:center;gap:6px}
.dv-ok::before{content:"";width:5px;height:5px;border-radius:50%;background:#2fd4b8;
  box-shadow:0 0 7px #2fd4b899}
.dv-decide{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:14px 22px 16px;border-top:1px solid var(--ui-line);background:#ffffff05}
.dv-ev{font-size:12px;color:var(--ui-muted)}
.dv-ev b{font-weight:500;color:var(--ui-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dv-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dv-btn{font-size:12.5px;line-height:1;padding:9px 13px;border-radius:8px;
  border:1px solid var(--ui-line2);color:var(--ui-soft);background:#ffffff08;white-space:nowrap}
.dv-btn--go{color:#0b0e15;border-color:transparent;background:#7ee7ff;font-weight:600}
@media (max-width:620px){
  .dv-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .dv-list li{flex-wrap:wrap;gap:8px}
  .dv-name{flex:1 1 100%;order:3;white-space:normal}
}

/* ---- the Runtime, as a surface rather than a second diagram --------------
   The in/out diagram that used to sit here was the sphere's argument at a
   quarter of the size. This section claims the Runtime is a LAYER that keeps
   running underneath — so it shows the layer running. Synthetic Projects and
   state, like every other native frame here; the surface is the product's. */
.ui-runtime{max-width:1300px;margin:0 auto}
.rt-head{align-items:flex-start}
.rt-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);
  gap:1px;background:var(--ui-line);border-top:1px solid var(--ui-line)}
.rt-card{min-width:0;padding:17px 20px 18px;background:var(--ui-surf);display:flex;flex-direction:column}
.rt-lbl{font-size:9.5px;letter-spacing:.2em;color:var(--ui-muted);margin-bottom:12px}
.rt-big{font-size:22px;line-height:1;letter-spacing:-.03em;color:var(--ui-text);font-weight:500}
.rt-card .rt-sub{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--ui-soft)}
.rt-health{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:14px;border-top:1px solid #ffffff0d}
.rt-health .rt-lbl{margin:0}
.rt-ok{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#7fe3cd}
.rt-ok i{width:6px;height:6px;border-radius:50%;background:#2fd4b8;box-shadow:0 0 8px #2fd4b8}
.rt-hsub{margin-top:8px;font-size:11.5px;line-height:1.45;color:var(--ui-muted)}
.rt-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rt-nums b{display:block;font-size:20px;line-height:1;color:var(--ui-text);font-weight:500;
  font-variant-numeric:tabular-nums}
.rt-nums span{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.14em;color:var(--ui-muted)}
.rt-foot{margin:auto 0 0;padding-top:16px;font-size:11.5px;line-height:1.45;color:var(--ui-muted)}
.rt-conn,.rt-act{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rt-conn li{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;color:var(--ui-text)}
.rt-conn .rt-dot{margin-left:auto}
.rt-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#2fd4b8;box-shadow:0 0 7px #2fd4b899}
.rt-dot--cy{background:#7ee7ff;box-shadow:0 0 7px #7ee7ff99}
.rt-dot--pu{background:#c4b5fd;box-shadow:0 0 7px #c4b5fd99}
.rt-act li{display:flex;align-items:flex-start;gap:10px;min-width:0}
.rt-act .rt-dot{margin-top:6px}
.rt-act b{display:block;font-size:13px;font-weight:500;color:var(--ui-text);letter-spacing:-.01em}
.rt-act span:not(.rt-dot){display:block;margin-top:3px;font-size:11.5px;color:var(--ui-muted)}
@media (max-width:1100px){
  .rt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .rt-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- the artifact and its receipt as ONE object ------------------------
   The plain artifact card is the homepage's asset and it argues about a
   result. This section argues about the RECORD, so the result and the proof
   of how it got there are stapled together and torn as one. Field names and
   structure follow the product's delivery record; the ids and the Project are
   synthetic, like every other native frame on this site. */
.ui-receipt{padding:0;overflow:hidden}
.rc-head{display:flex;align-items:center;gap:13px;padding:18px 22px}
.rc-id{min-width:0;flex:1}
.rc-state{flex:none;font-size:11px;line-height:1;padding:6px 11px;border-radius:999px;
  border:1px solid #2fd4b84d;color:#7fe3cd;background:#2fd4b814;white-space:nowrap}
.rc-peek{position:relative;margin:0 22px;padding:12px 16px 14px;border-radius:10px;
  border:1px solid var(--ui-line);background:#ffffff05}
.rc-peek-name{font-size:9.5px;letter-spacing:.2em;color:var(--ui-muted);margin-bottom:9px}
.rc-peek-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  font-size:13px;color:var(--ui-text);font-variant-numeric:tabular-nums}
.rc-peek-fade{position:absolute;left:1px;right:1px;bottom:1px;height:16px;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#0e121b00,#0e121bcc)}
/* the tear: this is what makes two panels read as one torn object */
.rc-tear{position:relative;height:22px;margin:16px 0 0}
.rc-tear::before{content:"";position:absolute;left:16px;right:16px;top:50%;height:0;
  border-top:1px dashed #ffffff26}
/* the half below the tear is a different stock, like a stub */
.rc-receipt{padding:6px 22px 20px;background:#ffffff05;border-top:1px solid #ffffff0a}
.rc-title{font-size:10px;letter-spacing:.22em;color:#c4b5fd;font-weight:700;margin-bottom:14px}
.rc-rows{margin:0}
.rc-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;
  padding:9px 0;border-top:1px solid #ffffff0d}
.rc-row:first-child{border-top:0}
.rc-row dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-muted);
  align-self:center}
.rc-row dd{margin:0;min-width:0;font-size:13.5px;line-height:1.35;color:var(--ui-text);
  overflow-wrap:anywhere}
.rc-row dd em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--ui-muted)}
.rc-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ui-soft)}
.rc-note{margin:16px 0 0;padding-top:14px;border-top:1px solid #ffffff0d;
  font-size:12.5px;line-height:1.5;color:var(--ui-muted)}
@media (max-width:560px){
  .rc-row{grid-template-columns:minmax(0,1fr);gap:3px}
  .rc-peek-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the compounding chart — the shape of the value, not a benchmark */
.cx{max-width:1180px;margin:0 auto;padding:0;border-radius:20px;
  border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,#ffffff0a,#ffffff03);
  box-shadow:0 30px 110px #00000059}
.cx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:24px 30px 0}
.cx-title{font-size:20px;line-height:1.2;letter-spacing:-.025em;color:#eef0f7}
.cx-sub{margin-top:6px;font-size:13.5px;color:#8f93a8}
.cx-tag{flex:none;font-size:10px;letter-spacing:.2em;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);color:#8f93a8;background:#ffffff08}
.cx-legend{display:flex;gap:22px;flex-wrap:wrap;padding:18px 30px 4px}
.cx-key{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:#a9aec2}
.cx-key i{width:20px;height:3px;border-radius:2px;flex:none}
.cx-key--flat i{background:#6b7080}
.cx-key--nie i{background:linear-gradient(90deg,#8b6bff,#2fd4b8)}
.cx-plot{padding:4px 18px 6px;overflow-x:auto}
.cx-plot svg{display:block;width:100%;min-width:620px;height:auto}
.cx-grid line{stroke:#ffffff12;stroke-width:1}
.cx-axis{stroke:#ffffff1f;stroke-width:1}
.cx-yt{fill:#8f93a8;font-size:12.5px;text-anchor:end;font-family:inherit}
.cx-xt{fill:#787c92;font-size:12px;text-anchor:middle;font-family:inherit}
.cx-atitle{fill:#6d7186;font-size:11.5px;letter-spacing:.16em;text-anchor:middle;
  text-transform:uppercase;font-family:inherit}
.cx-gap{fill:#b9a6ff;font-size:13px;text-anchor:middle;letter-spacing:.02em;font-family:inherit;opacity:.9}
.cx-flat{fill:none;stroke:#6b7080;stroke-width:1.8;stroke-linejoin:round}
.cx-line{fill:none;stroke:url(#cxline);stroke-width:2.8;stroke-linejoin:round;stroke-linecap:round}
.cx-dot--flat{fill:#6b7080}
.cx-dot--nie{fill:#9b86ff}
.cx-badge circle{fill:#0c1018;stroke:#8b6bff;stroke-width:1.6}
.cx-badge text{fill:#fff;font-size:11px;text-anchor:middle;font-weight:600;font-family:inherit}
/* the lines draw themselves in when the section arrives */
.learning.is-visible .cx-area{animation:cx-fade 900ms ease 700ms both}
.learning.is-visible .cx-flat,.learning.is-visible .cx-line{
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:cx-draw 1500ms ease-out both}
.learning.is-visible .cx-line{animation-delay:180ms}
.learning.is-visible .cx-dot,.learning.is-visible .cx-badge,.learning.is-visible .cx-gap{
  animation:cx-fade 600ms ease 1200ms both}
@keyframes cx-draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes cx-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .learning.is-visible .cx-area,.learning.is-visible .cx-flat,.learning.is-visible .cx-line,
  .learning.is-visible .cx-dot,.learning.is-visible .cx-badge,.learning.is-visible .cx-gap{animation:none}
  .learning.is-visible .cx-flat,.learning.is-visible .cx-line{stroke-dasharray:none;stroke-dashoffset:0}
}
.cx-notes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin:0;padding:20px 30px 26px;border-top:1px solid var(--line);background:#ffffff05}
.cx-notes li{display:flex;align-items:flex-start;gap:12px;min-width:0}
.cx-num{flex:none;width:22px;height:22px;margin-top:-2px;border-radius:50%;
  display:grid;place-items:center;line-height:1;
  font-size:11px;font-weight:600;color:#fff;border:1.5px solid #8b6bff;background:#0c1018}
.cx-notes strong{display:block;font-size:14.5px;font-weight:500;color:#e7e9f3;letter-spacing:-.01em}
/* scoped to the caption's own span: a bare `.cx-notes span` also matched the
   numbered badge and beat .cx-num on specificity, killing its centring, its
   colour and pushing it 5px down the line it was supposed to sit on */
.cx-notes li > div > span{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:#868b9f}
.cx-note{max-width:1180px;margin:30px auto 0;font-size:15px;line-height:1.6;color:#8f93a8}
@media (max-width:900px){
  .cx-notes{grid-template-columns:1fr;gap:16px}
  .cx-head,.cx-legend,.cx-notes{padding-left:20px;padding-right:20px}
  .cx-plot{padding-left:10px;padding-right:10px}
}
@media (max-width:760px){
  /* the landscape plot is drawn small in this band, so its labels are sized up
     to survive the scale. The right-edge fade that used to live here went with
     WEBSITE-MOBILE-CHART-001: below 621px this chart is replaced outright, and
     from 621 to 760 it fits its container, so the fade only ever announced a
     horizontal scroll that no longer happens. */
  .cx-plot svg{min-width:560px}
  .cx-yt,.cx-xt,.cx-gap{font-size:16px}
  .cx-atitle{font-size:15px}
}

/* ---- executors: one socket, a bus, interchangeable units ---- */
.swap{max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,260px) 74px minmax(0,1fr);gap:0;align-items:center}
.swap-socket{border:1px solid #7b4dff4d;border-radius:18px;padding:26px;text-align:center;
  background:linear-gradient(180deg,#7b4dff1c,#7b4dff06)}
.swap-socket-label{font-size:11px;letter-spacing:.2em;color:#fff;margin-bottom:8px}
.swap-socket-body{font-size:13px;color:#b9bcd0;letter-spacing:.04em}
/* the bus: the work plugs in here; whichever unit is seated does the work */
.swap-bus{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.swap-bus-line{position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,#7b4dff8c,#7b4dff26)}
.swap-bus-plug{position:relative;width:9px;height:9px;border-radius:50%;
  background:#7b4dff;box-shadow:0 0 16px #7b4dffa6}
.swap-slot{display:flex;flex-direction:column;gap:0;border:1px dashed #ffffff26;border-radius:18px;padding:8px}
.swap-unit{position:relative;padding:15px 20px 15px 34px;border-radius:12px;font-size:15.5px;color:#9ba0b4;
  transition:background .22s,color .22s,transform .22s}
.swap-unit::before{content:"";position:absolute;left:16px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;border:1px solid #ffffff33;transition:background .22s,border-color .22s}
.swap-unit:hover::before{border-color:#7b4dff8c}
.swap-unit:hover{background:#ffffff0d;color:#fff;transform:translateX(5px)}
.swap-unit.is-active::before{background:#7b4dff;border-color:#7b4dff;box-shadow:0 0 12px #7b4dff8c}
.swap-unit.is-active{background:#ffffff12;color:#fff}
.executors-note{max-width:800px;margin:28px auto 0;text-align:center;font-size:16px;color:var(--muted)}

/* ---- learning: context carry-forward. Not a circle — the site already uses
       circular language for the constellation, the Runtime core and the logo.
       This shows a specific delta arriving in future Context. ---- */
/* the one line that was not there before — present at rest, and visibly arriving */
/* centre: what a person accepted, and the two things that make it defensible */
/* the two crossings */
@media (max-width:1000px){
  @keyframes carry-run-v{0%{top:0;opacity:0}8%{opacity:1}22%{opacity:1}30%{top:100%;opacity:0}100%{top:100%;opacity:0}}
}

/* ---- executors: one socket, a bus, interchangeable units ---- */
.swap{max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,260px) 74px minmax(0,1fr);gap:0;align-items:center}
.swap-socket{border:1px solid #7b4dff4d;border-radius:18px;padding:26px;text-align:center;
  background:linear-gradient(180deg,#7b4dff1c,#7b4dff06)}
.swap-socket-label{font-size:11px;letter-spacing:.2em;color:#fff;margin-bottom:8px}
.swap-socket-body{font-size:13px;color:#b9bcd0;letter-spacing:.04em}
/* the bus: the work plugs in here; whichever unit is seated does the work */
.swap-bus{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.swap-bus-line{position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,#7b4dff8c,#7b4dff26)}
.swap-bus-plug{position:relative;width:9px;height:9px;border-radius:50%;
  background:#7b4dff;box-shadow:0 0 16px #7b4dffa6}
.swap-slot{display:flex;flex-direction:column;gap:0;border:1px dashed #ffffff26;border-radius:18px;padding:8px}
.swap-unit{position:relative;padding:15px 20px 15px 34px;border-radius:12px;font-size:15.5px;color:#9ba0b4;
  transition:background .22s,color .22s,transform .22s}
.swap-unit::before{content:"";position:absolute;left:16px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;border:1px solid #ffffff33;transition:background .22s,border-color .22s}
.swap-unit:hover::before{border-color:#7b4dff8c}
.swap-unit:hover{background:#ffffff0d;color:#fff;transform:translateX(5px)}
.swap-unit.is-active::before{background:#7b4dff;border-color:#7b4dff;box-shadow:0 0 12px #7b4dff8c}
.swap-unit.is-active{background:#ffffff12;color:#fff}
.executors-note{max-width:800px;margin:28px auto 0;text-align:center;font-size:16px;color:var(--muted)}


/* ---- runtime: bidirectional core over a persistent substrate ---- */

/* ==========================================================================
   Product proof, rendered as NATIVE HTML instead of screenshots. Same reason
   Raycast and OpenAI look sharp: a PNG of an app squeezed into a column is
   always soft and always cropped. These are marketing components derived from
   the product — its own tokens, its own vocabulary, its own layout — authored
   at the size the page shows them, with the synthetic Acme Payments /
   Northstar Revenue story. Nothing is cropped, nothing is pixel-patched.
   Product tokens: text #e9eefb · soft #a9b4ca · muted #788398
                   surface #11141d · surface-raised #1b2130
   ========================================================================== */
.uiw{--ui-text:#e9eefb;--ui-soft:#a9b4ca;--ui-muted:#788398;--ui-surf:#11141d;
  --ui-raised:#1b2130;--ui-line:rgba(132,153,190,.16);--ui-line2:rgba(162,184,230,.24);
  border:1px solid var(--ui-line2);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#12151f,#0c0e15);
  box-shadow:0 40px 110px #00000099, inset 0 1px 0 #ffffff0d;
  color:var(--ui-soft);font-size:13px;line-height:1.5;min-width:0;max-width:100%}
.uiw-head{padding:20px 24px 18px;border-bottom:1px solid var(--ui-line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
.uiw-title{font-size:21px;font-weight:600;color:var(--ui-text);letter-spacing:-.02em}
.uiw-sub{margin:6px 0 0;font-size:12.5px;color:var(--ui-muted);max-width:560px;line-height:1.5}
.uiw-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.uiw-chip{font-size:11.5px;color:var(--ui-soft);border:1px solid var(--ui-line2);
  border-radius:999px;padding:5px 12px;white-space:nowrap}
.uiw-chip.is-on{color:#7ee7ff;border-color:#7ee7ff66}
.uiw-chip--sel::after{content:"⌄";margin-left:8px;color:var(--ui-muted)}

/* ---- 01 Signals: the incoming list, and the selected Signal ---- */
.ui-signals-body{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.sg-list{border-right:1px solid var(--ui-line);padding:16px 14px;display:flex;flex-direction:column;gap:8px}
.sg-list-head{font-size:14px;font-weight:600;color:var(--ui-text);padding:0 4px 4px}
.sg-list-head span{display:block;margin-top:3px;font-size:11px;font-weight:400;color:var(--ui-muted)}
.sg-row{display:flex;gap:10px;padding:11px 12px;border-radius:11px;border:1px solid var(--ui-line);
  background:#ffffff05}
.sg-row.is-sel{border-color:#7ee7ff5c;background:#7ee7ff0a;box-shadow:0 0 0 1px #7ee7ff1f}
.brand-sprite{position:absolute;width:0;height:0;overflow:hidden}
.sg-ico{flex:none;width:18px;height:18px;margin-top:1px;display:block;overflow:visible}
.sg-body{min-width:0;flex:1}
.sg-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sg-title{font-size:13.5px;font-weight:600;color:var(--ui-text);letter-spacing:-.01em}
.sg-age{flex:none;font-size:11px;color:var(--ui-muted)}
.sg-desc{margin:4px 0 0;font-size:12.5px;color:var(--ui-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-meta{margin:3px 0 0;font-size:11.5px;color:var(--ui-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.sg-proj{font-size:11.5px;color:var(--ui-soft);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-state{flex:none;font-size:10.5px;color:var(--ui-muted);border:1px solid var(--ui-line2);
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.sg-state.is-raised{color:#7ee7ff;border-color:#7ee7ff59}

.sg-detail{padding:20px 24px 22px;min-width:0}
.sg-dhead{display:flex;gap:12px;align-items:flex-start}
.sg-dhead .sg-ico{width:24px;height:24px;margin-top:3px}
.sg-dhead h3{margin:0;font-size:19px;font-weight:600;color:var(--ui-text);letter-spacing:-.02em}
.sg-dsub{margin:5px 0 0;font-size:13px;color:var(--ui-soft)}
.sg-dmeta{margin:4px 0 0;font-size:12px;color:var(--ui-muted)}
.sg-dstate{display:inline-block;margin:12px 0 0}
.sg-tabs{display:flex;gap:22px;margin:16px 0 0;padding-bottom:9px;border-bottom:1px solid var(--ui-line);
  font-size:13px;color:var(--ui-muted)}
.sg-tabs .is-on{color:var(--ui-text);font-weight:600;box-shadow:0 9px 0 -8px #7ee7ff}
.sg-cards{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin-top:16px}
.sg-side{display:flex;flex-direction:column;gap:14px}
.sg-card{border:1px solid var(--ui-line);border-radius:12px;background:#ffffff05;padding:15px 16px 16px}
.sg-card h4{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--ui-text);letter-spacing:-.01em}
.sg-kvs{margin:0;display:flex;flex-direction:column;gap:9px}
.sg-kv{display:grid;grid-template-columns:minmax(0,128px) minmax(0,1fr);gap:12px;align-items:baseline}
.sg-kv dt{font-size:12px;color:var(--ui-muted)}
.sg-kv dd{margin:0;font-size:12.5px;color:var(--ui-text)}
.sg-kv em{font-style:normal;color:var(--ui-muted)}
.sg-note{margin:14px 0 0;padding:10px 12px;border-left:2px solid #7ee7ff73;border-radius:0 7px 7px 0;
  background:#ffffff05;font-size:12px;color:var(--ui-soft);line-height:1.55}
.sg-lbl{margin:0;font-size:11.5px;color:var(--ui-muted)}
.sg-val{margin:3px 0 12px;font-size:12.5px;color:var(--ui-text)}
.sg-card .sg-val:last-child,.sg-card .sg-lbl:last-child{margin-bottom:0}

@media (max-width:900px){
  .ui-signals-body{grid-template-columns:minmax(0,1fr)}
  .sg-list{border-right:0;border-bottom:1px solid var(--ui-line)}
  .sg-cards{grid-template-columns:minmax(0,1fr)}
  .uiw-filters{display:none}
}

/* ---- 02 Operation Draft: the workbench, with its Source Package in the
       same view because that is where it lives ---- */
.ui-draft-head{align-items:center}
.dr-kicker{font-size:10.5px;letter-spacing:.16em;color:#7ee7ff;font-weight:700}
.dr-title{margin-top:6px;font-size:20px;max-width:620px;line-height:1.25}
.dr-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.dr-save{font-size:12px;font-weight:650;color:#fff;border-radius:9px;padding:8px 15px;
  background:linear-gradient(135deg,#7b4dff,#6f63ff);box-shadow:0 0 22px #7b4dff4d}
.ui-draft-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.dr-card{padding:20px 24px 24px;border-right:1px solid var(--ui-line)}
.dr-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}
.dr-eyebrow{font-size:10.5px;letter-spacing:.18em;color:var(--ui-muted);font-weight:700}
.dr-saved{font-size:11px;color:#5ad6a0;border:1px solid #5ad6a045;border-radius:999px;padding:4px 11px}
.dr-ready{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:13px 15px;border-radius:11px;
  border:1px solid #5ad6a03d;background:#5ad6a00a}
.dr-dot{width:7px;height:7px;border-radius:50%;background:#5ad6a0;box-shadow:0 0 10px #5ad6a08c}
.dr-ready b{font-size:13.5px;font-weight:600;color:var(--ui-text)}
.dr-ready span{font-size:12px;color:var(--ui-muted)}
.dr-sec{margin:22px 0 14px;font-size:10.5px;letter-spacing:.18em;color:var(--ui-muted);font-weight:700;
  padding-bottom:10px;border-bottom:1px solid var(--ui-line)}
.dr-field + .dr-field{margin-top:18px}
.dr-field label{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.16em;
  color:var(--ui-muted);font-weight:700;margin-bottom:8px}
.dr-explicit{letter-spacing:.1em;color:#5ad6a0;border:1px solid #5ad6a045;border-radius:5px;padding:2px 7px;font-size:9.5px}
.dr-input,.dr-area{border:1px solid var(--ui-line2);border-radius:9px;background:#00000059;
  padding:11px 13px;font-size:13px;color:var(--ui-text);line-height:1.5}
.dr-area{min-height:74px}
.dr-input--select{display:flex;align-items:center;justify-content:space-between;color:var(--ui-soft)}
.dr-input--select::after{content:"⌄";color:var(--ui-muted);margin-left:12px}
.dr-hint{margin:7px 0 0;font-size:11px;color:var(--ui-muted)}
.dr-side{padding:20px 22px 24px;background:#ffffff04}
.dr-proj{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--ui-text)}
/* the visible thread back to frame 01: this Draft came FROM that Signal */
.dr-from{margin:6px 0 0;padding-left:11px;position:relative;font-size:12px;line-height:1.4;
  color:#a9f0ff}
.dr-from::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;
  border-radius:2px;background:linear-gradient(180deg,#7b4dff,#7ee7ff)}
.dr-selected{margin:8px 0 0;font-size:12px;color:var(--ui-soft);line-height:1.5}
/* five sources, not one: the package spans Drive, Slack and a repository, and
   each row carries the Preview the product actually has
   (/projects/{id}/sources/{sid}/versions/{sha}/preview and the GitHub one). */
.dr-src{margin-top:9px;padding:10px 13px;border:1px solid var(--ui-line);border-radius:10px;background:#ffffff05}
.dr-src:first-of-type{margin-top:14px}
.dr-src-kind{font-size:9.5px;letter-spacing:.15em;color:#7ee7ff;font-weight:700}
.dr-src-row{display:flex;align-items:center;gap:10px;margin-top:5px}
.dr-src-name{min-width:0;flex:1;font-size:12.5px;font-weight:600;color:var(--ui-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-src-preview{flex:none;font-size:11px;line-height:1;padding:5px 9px;border-radius:6px;
  border:1px solid var(--ui-line2);color:var(--ui-soft);background:#ffffff0a;white-space:nowrap}
.dr-src-meta{margin:5px 0 0;font-size:11px;color:var(--ui-muted);line-height:1.45}
.dr-freeze{margin:16px 0 0;font-size:11.5px;color:var(--ui-muted);line-height:1.5}

/* ---- 03 the Artifact, with the rating a person actually left on it ---- */
.ui-artifact{max-width:none}
.ar-icon{flex:none;width:30px;height:38px;border-radius:4px;position:relative;
  background:linear-gradient(160deg,#2f8f6a,#1d6349);box-shadow:0 3px 10px #00000066}
.ar-icon::after{content:"";position:absolute;right:0;top:0;border-width:0 10px 10px 0;
  border-style:solid;border-color:transparent #0c0e15 transparent transparent}
.ar-name{font-size:17px;font-weight:600;color:var(--ui-text);letter-spacing:-.015em}
.ar-file{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:12.5px;color:var(--ui-muted);flex-wrap:wrap}
.ar-kind{font-size:10px;letter-spacing:.14em;color:var(--ui-soft);border:1px solid var(--ui-line2);
  border-radius:5px;padding:3px 8px;font-weight:700}
.ar-size{color:var(--ui-muted)}
/* the sheet is the one thing allowed to scroll sideways — in its own box,
   never letting the page itself scroll */

@media (max-width:900px){
  .ui-draft-body{grid-template-columns:minmax(0,1fr)}
  .dr-card{border-right:0;border-bottom:1px solid var(--ui-line)}
  .dr-bar{justify-content:flex-start}
}

/* ---- product proof: one state per row, full width, so the product is
       actually readable — and one thread running down the left, holding at the
       authority gate between 02 and 03. ---- */
.pf{position:relative;max-width:var(--shell-max);margin:52px auto 0;padding-left:72px;
  display:flex;flex-direction:column;gap:72px}
.pf-trace{position:absolute;left:15px;top:8px;bottom:8px;width:1px;z-index:1}
.pf-trace-line{position:absolute;inset:0;
  background:linear-gradient(180deg,#7b4dff00,#7b4dff99 12%,#7b4dffe6 46%,#7ee7ffe6 86%,#7ee7ff00)}
.pf-end{position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;background:#7b4dff}
.pf-end--a{top:-2px}
.pf-end--b{bottom:-2px;background:var(--cyan);box-shadow:0 0 10px #7ee7ff8c}
/* the gate sits in the gap between 02 and 03, where its label has room */
.pf-gate{position:relative;z-index:3;display:flex;align-items:center;gap:12px;
  margin:-36px 0 -36px -72px;padding-left:6px;height:0}
.pf-gate-mark{flex:none;width:19px;height:2px;border-radius:2px;background:#c4b5fd;
  box-shadow:0 0 12px #7b4dff8c;animation:pf-gate-hold 9s ease-in-out infinite}
@keyframes pf-gate-hold{0%,26%{opacity:.35}32%,56%{opacity:1;box-shadow:0 0 18px #c4b5fdcc}62%,100%{opacity:.35}}
.pf-gate i{font-style:normal;font-size:9.5px;letter-spacing:.2em;color:#c4b5fd;white-space:nowrap}
.pf-pulse{position:absolute;left:-2.5px;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 14px var(--cyan);
  animation:pf-pulse-run 9s ease-in-out infinite}
@keyframes pf-pulse-run{
  0%{top:1%;opacity:0}5%{opacity:1}
  28%{top:50%}32%{top:50%}56%{top:50%}
  84%{top:99%;opacity:1}92%,100%{top:99%;opacity:0}}

.pf-frame{position:relative;z-index:2;margin:0;min-width:0}
.pf-cap{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px;margin-bottom:18px}
.pf-n{font-size:11.5px;letter-spacing:.18em;color:var(--purple);flex:none}
.pf-cap b{font-size:clamp(21px,2vw,28px);letter-spacing:-.03em;font-weight:440;color:#eef0f7}
.pf-cap span{flex:1 1 100%;margin-top:6px;font-size:15.5px;line-height:1.45;color:var(--muted)}
.pf-shot{position:relative;min-width:0;z-index:0}
/* the glow the product sits in — the thing that makes a screen look lit rather
   than pasted on. It reads from behind the top edge, like a light source. */
.pf-shot::before{content:"";position:absolute;left:6%;right:6%;top:-46px;height:56%;z-index:-1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,#7b4dff59 0%,#6f63ff2b 38%,#2fd4b814 62%,transparent 78%);
  filter:blur(46px)}
.pf-frame--c .pf-shot::before{
  background:radial-gradient(60% 100% at 50% 0%,#2fd4b84d 0%,#7b4dff2b 40%,transparent 76%)}
/* a lit top rim, so the frame edge catches the light */
.uiw{position:relative}
.uiw::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#ffffff40,transparent)}
.proof-caption{display:block;max-width:820px;margin:52px auto 0;text-align:center;font-size:15px;color:#8f93a8}
@media (max-width:760px){
  .pf{padding-left:0;gap:52px}
  .pf-trace{display:none}
  .pf-gate{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pf-pulse{animation:none;top:50%;opacity:.9}
  .pf-gate-mark{animation:none;opacity:1}
}

/* outcomes keep their card treatment but gain state */
.outcomes{max-width:var(--shell-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.outcome{padding:34px 34px 30px;transition:transform .25s,border-color .25s}
.outcome:hover{transform:translateY(-4px);border-color:#ffffff2b}
.outcome h3{margin:0 0 10px;font-size:clamp(23px,2.2vw,29px);letter-spacing:-.035em;font-weight:440;line-height:1.15}
.outcome-lead{margin:0;font-size:17px;line-height:1.5;color:var(--muted)}
.loop-more{max-width:var(--shell-max);margin:32px auto 0}
.loop-more a{color:#a98bff;text-decoration:none;border-bottom:1px solid #a98bff47;padding-bottom:1px;transition:color .2s,border-color .2s}
.loop-more a:hover{color:#c9b6ff;border-color:#c9b6ff8c}
.entrypath{transition:transform .25s,border-color .25s}
.entrypath:hover{transform:translateY(-4px);border-color:#ffffff2b}

@media (max-width:1080px){
  .outcomes,.governed-split{grid-template-columns:minmax(0,1fr)}
  .swap{grid-template-columns:minmax(0,1fr);gap:22px}
  .swap-bus{height:34px}
  .swap-bus-line{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,#7b4dff8c,#7b4dff26)}
}
@media (prefers-reduced-motion:reduce){
  .triptych::after{animation:none!important;opacity:1;transform:translateX(200%)}
}

/* --- R3.1 hero balance: the loop hero is two columns, so the display scale
       has to answer to the column, not the viewport. --- */
.hero--loop h1{
  font-size:clamp(40px,4.6vw,78px);
  max-width:none;
  text-wrap:balance
}
.hero--loop .lede{max-width:640px}
.hero--loop .hero-loop-col{align-self:center}
@media(max-width:1080px){
  .hero--loop h1{font-size:clamp(44px,7vw,68px)}
  .hero--loop .hero-loop-col{align-self:start}
}

/* ---- WHY NIEME: three theses, three visual logics ----------------------
   The page used to be the same left/right comparison box four times over.
   It is now one argument in three moves, and each move gets a form of its
   own: systems that stay put, a record that travels, and a seam that a model
   change cannot cross. */
/* ---- the line Nieme does not cross ------------------------------------
   Three numbered sentences is a table of contents, not a design. The argument
   here is spatial: three things sit INSIDE your company, three exits reach a
   boundary and are stopped there. The gradient is deliberately absent — on this
   site purple->teal means crossing, and the whole point is that nothing does. */
.theses{padding:var(--section-padding) var(--section-inline)}
.theses .section-title{max-width:var(--shell-max);margin:0 auto clamp(34px,4vw,56px)}
.theses h2{font-size:clamp(32px,3.6vw,56px);line-height:1.05;letter-spacing:-.05em;
  font-weight:420;margin:0;max-width:18ch}

.kp{--kpw:clamp(56px,6vw,98px);
  max-width:var(--shell-max);margin:0 auto;position:relative;
  display:grid;grid-template-columns:minmax(0,1.15fr) var(--kpw) minmax(0,1fr);
  row-gap:14px;align-items:stretch}
.kp-head{font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:6px}
.kp-head--in{color:#c4b5fd}
.kp-head--out{color:#6d7186;padding-left:calc(var(--kpw) / 2)}

/* what stays: solid, lit, present */
.kp-in{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;row-gap:6px;align-content:center;
  padding:22px 26px;border-radius:16px;border:1px solid #7b4dff59;
  background:
    radial-gradient(120% 150% at 0% 0%,#7b4dff26 0%,#7b4dff00 58%),
    linear-gradient(180deg,#171a2b,#0f1119);
  box-shadow:0 22px 60px #00000066, inset 0 1px 0 #ffffff14}
.kp-n{grid-row:1 / span 2;align-self:center;font-size:11px;letter-spacing:.14em;color:#c4b5fd;
  padding:6px 9px;border-radius:7px;border:1px solid #7b4dff4d;background:#7b4dff14}
.kp-thing{font-size:clamp(20px,2.1vw,28px);line-height:1.1;letter-spacing:-.035em;color:#fff}
.kp-state{font-size:14.5px;line-height:1.45;color:#a9aec2}

/* the exit: it starts at the card, reaches the line, and is stopped ON it */
.kp-arrow{position:relative}
.kp-arrow i{position:absolute;left:8px;right:50%;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,#8f93a866 0 5px,transparent 5px 10px)}
.kp-arrow b{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;border:1px solid #ffffff33;background:#0c1018;
  box-shadow:0 0 0 5px #0c1018}
.kp-arrow b::before,.kp-arrow b::after{content:"";position:absolute;left:50%;top:50%;
  width:9px;height:1px;margin:-.5px 0 0 -4.5px;background:#9ba0b4}
.kp-arrow b::before{transform:rotate(45deg)}
.kp-arrow b::after{transform:rotate(-45deg)}

/* what you would otherwise give up: struck, unlit, on the far side */
.kp-out{min-width:0;display:flex;align-items:center;padding:18px 4px 18px 6px}
.kp-out s{font-size:clamp(15px,1.5vw,18px);line-height:1.45;color:#6d7186;
  text-decoration-color:#6d718666;letter-spacing:-.01em}

/* the boundary itself, drawn through the centre of the arrow column */
.kp-edge{position:absolute;top:26px;bottom:0;pointer-events:none;width:0;
  left:calc(1.15 / 2.15 * (100% - var(--kpw)) + var(--kpw) / 2);
  border-left:1px dashed #ffffff2b}
.kp-edge span{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,100%);
  white-space:nowrap;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#787c92}

@media (max-width:900px){
  /* one column: the card, the exit stopped beneath it, then the struck path.
     The two column captions only mean something side by side, so they go. */
  .kp{grid-template-columns:minmax(0,1fr);row-gap:0;--kpw:0px}
  .kp-head,.kp-edge{display:none}
  .kp-arrow{height:46px}
  .kp-arrow i{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:repeating-linear-gradient(180deg,#8f93a866 0 5px,transparent 5px 10px)}
  .kp-out{justify-content:center;text-align:center;padding:0 0 28px;
    border-bottom:1px solid var(--line);margin-bottom:28px}
  .kp > .kp-out:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
}

.wn{padding:var(--section-padding) var(--section-inline);border-top:1px solid var(--line)}
.wn-copy{max-width:var(--shell-max);margin:0 auto}
.wn-copy .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.wn-n{font-size:11px;letter-spacing:.16em;color:#fff;padding:4px 9px;border-radius:6px;
  background:linear-gradient(120deg,#7b4dff,#2fd4b8)}
.wn-copy h2{font-size:clamp(34px,3.8vw,60px);line-height:1.04;letter-spacing:-.05em;
  font-weight:420;margin:0 0 24px;max-width:16ch}
.wn-lede{font-size:clamp(17px,1.55vw,21px);line-height:1.6;color:#c6c8d3;margin:0;max-width:70ch}
.wn-copy > p:not(.wn-lede){font-size:16.5px;line-height:1.65;color:#9ba0b4;margin:18px 0 0;max-width:70ch}
.wn-grid{max-width:var(--shell-max);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  column-gap:clamp(40px,5vw,92px);align-items:center}
.wn-grid .wn-copy{max-width:none}
.wn-art{min-width:0}

/* 01 — the systems stay where they are, and one layer runs under all of them */
.stay{max-width:var(--shell-max);margin:clamp(40px,5vw,72px) auto 0}
.stay-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.3vw,18px)}
.stay-sys{min-width:0;padding:20px 18px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff09,#ffffff03);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.stay-ico{width:26px;height:26px;display:block;flex:none}
.stay-name{font-size:15px;color:#eef0f7;letter-spacing:-.015em}
.stay-note{font-size:12.5px;color:#8f93a8;line-height:1.4}
.stay-line{height:34px;margin:0 6%;position:relative}
.stay-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,#7b4dff00,#7b4dff8c 22%,#2fd4b8 78%,#2fd4b800)}
.stay-line::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,#ffffff00,#ffffff26)}
.stay-layer{padding:20px 26px;border-radius:16px;border:1px solid #7b4dff4d;
  background:linear-gradient(100deg,#7b4dff1c,#2fd4b810);
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center}
.stay-layer-name{font-size:12px;letter-spacing:.22em;color:#fff}
.stay-layer-note{font-size:13.5px;color:#b9bcd0;letter-spacing:.02em}
.stay-avail{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:#787c92;text-align:center}

/* 03 — a seam a model change cannot cross */
.endure{max-width:var(--shell-max);margin:clamp(40px,5vw,72px) auto 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(18px,3vw,44px);align-items:stretch}
.endure-col{min-width:0;padding:26px 28px;border-radius:18px;border:1px solid var(--line);
  background:#ffffff05}
.endure-col--stays{border-color:#7b4dff59;
  background:linear-gradient(160deg,#7b4dff1c,#2fd4b80f)}
.endure-cap{font-size:10.5px;letter-spacing:.2em;color:#8f93a8;margin-bottom:18px}
.endure-cap--stays{color:#c4b5fd}
.endure-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.endure-col li{font-size:16px;line-height:1.4;color:#9ba0b4;letter-spacing:-.01em}
.endure-col--changes li{text-decoration:line-through;text-decoration-color:#ffffff26;opacity:.62}
.endure-col--stays li{color:#eef0f7}
.endure-seam{position:relative;width:1px;justify-self:center;
  background:linear-gradient(180deg,#7b4dff00,#7b4dff8c 20%,#2fd4b8 80%,#2fd4b800)}
.endure-seam span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);
  white-space:nowrap;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8f93a8;
  background:var(--bg);padding:0 10px}
.endure-note{max-width:var(--shell-max);margin:clamp(28px,3.4vw,44px) auto 0;
  font-size:16.5px;line-height:1.65;color:#9ba0b4;max-width:70ch}

@media (max-width:1200px){
  .stay-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  .th-index{grid-template-columns:minmax(0,1fr);gap:0}
  .th-index li{padding:14px 0;border-top:1px solid var(--line)}
  .wn-grid{grid-template-columns:minmax(0,1fr);row-gap:34px}
  .stay-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stay-note{font-size:12px}
  .endure{grid-template-columns:minmax(0,1fr);gap:0}
  .endure-seam{width:auto;height:1px;margin:18px 0;justify-self:stretch;
    background:linear-gradient(90deg,#7b4dff00,#7b4dff8c 20%,#2fd4b8 80%,#2fd4b800)}
  .endure-seam span{transform:translate(-50%,-50%)}
}
@media (max-width:560px){
  .stay-row{grid-template-columns:minmax(0,1fr)}
}

/* ---- phone: the header must be still --------------------------------------
   On a phone the mark is ~30px and anything moving beside the wordmark reads as
   a rendering glitch rather than as life. Measured: with these stopped the idle
   header changes exactly 0 pixels. Desktop keeps the breath and the orbit.

   NOTE: `.motion-ready .nav.is-animation-active .glyph b` re-applies the orbit
   at specificity (0,4,1) partway down this file, so this block has to sit at the
   END — an identical selector earlier in the file loses on source order. This is
   the same trap that kept the mark orbiting under prefers-reduced-motion. */
@media (max-width:700px){
  .glyph::after{animation:none;opacity:.55}
  .glyph b,
  .motion-ready .nav.is-animation-active .glyph b{animation:none}
}
/* the inner-page hero atmosphere drifts directly behind the nav, and the blurred
   bar resamples it the same way — it stops at the chrome too */
.hero-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 86px,#000 156px);
  mask-image:linear-gradient(180deg,transparent 0,transparent 86px,#000 156px)}

/* ---- the context package: what a model was allowed to know ---------------
   How It Works had no product surface at all. This is the one the homepage
   deliberately does not show, because it is the deeper half of the argument:
   the Runtime decides what goes in BEFORE anything runs, and what it left out
   is recorded with the reason. Field shapes follow the real Operation detail
   (frozen source package with its digest, passages included/excluded, budget);
   the Project, the files and the counts are synthetic like every other frame. */
.ui-ctx{max-width:1180px;margin:clamp(34px,4vw,56px) auto 0}
.ctx-head{align-items:flex-start}
.ctx-frozen{flex:none;font-size:11px;line-height:1;padding:7px 12px;border-radius:999px;
  border:1px solid var(--ui-line2);color:var(--ui-soft);background:#ffffff08;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ctx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--ui-line);border-top:1px solid var(--ui-line)}
.ctx-col{min-width:0;padding:18px 22px 20px;background:var(--ui-surf)}
.ctx-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:9.5px;letter-spacing:.2em;margin-bottom:14px}
.ctx-cap span{letter-spacing:.02em;font-size:11.5px;color:var(--ui-muted)}
.ctx-cap--in{color:#7fe3cd}
.ctx-cap--out{color:#8f93a8}
.ctx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ctx-list li{display:flex;flex-direction:column;gap:3px;min-width:0;
  padding-left:14px;position:relative}
.ctx-list li::before{content:"";position:absolute;left:0;top:.45em;width:5px;height:5px;
  border-radius:50%;background:#2fd4b8;box-shadow:0 0 7px #2fd4b899}
.ctx-list--out li::before{background:none;border:1px solid #8f93a866;box-shadow:none;
  top:.4em;width:6px;height:6px}
.ctx-src{font-size:13.5px;color:var(--ui-text);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis}
.ctx-list--out .ctx-src{color:var(--ui-soft)}
.ctx-why{font-size:11.5px;color:var(--ui-muted);line-height:1.4}
.ctx-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 22px 16px;border-top:1px solid var(--ui-line);background:#ffffff05}
.ctx-budget{flex:none;font-size:12.5px;color:var(--ui-soft);font-variant-numeric:tabular-nums}
.ctx-budget b{font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ui-muted);margin-right:8px}
.ctx-note{min-width:0;font-size:12px;line-height:1.5;color:var(--ui-muted);max-width:62ch}
@media (max-width:760px){
  .ctx-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- the authority ladder -----------------------------------------------
   Four chips restating the paragraph above them is not a design. Authority in
   Nieme is a ladder with three rungs, and the whole claim is that YOU place the
   line — so the rungs are drawn, and the one that stops is the lit one. */
.au{max-width:var(--shell-max);margin:clamp(30px,3.4vw,46px) 0 0;display:flex;flex-direction:column;gap:10px}
.au-band{display:grid;grid-template-columns:minmax(0,180px) minmax(0,260px) minmax(0,1fr);
  gap:clamp(14px,2vw,30px);align-items:baseline;
  padding:20px 24px;border-radius:14px;border:1px solid var(--line);background:#ffffff05}
.au-band--stop{border-color:#7b4dff59;
  background:radial-gradient(120% 160% at 0% 0%,#7b4dff1f 0%,#7b4dff00 62%),#ffffff06;
  box-shadow:inset 0 1px 0 #ffffff14}
.au-cap{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#787c92}
.au-band--stop .au-cap{color:#c4b5fd}
.au-title{font-size:clamp(16px,1.6vw,20px);line-height:1.25;letter-spacing:-.025em;color:#eef0f7}
/* Tuning the three strings to the same length fixes one viewport width and
   breaks another — the wrap point moves with the container, not with the copy.
   So the guarantee is structural: every band reserves two lines, and the rows
   are the same height whether a note takes one line or two. */
.au-note{font-size:14.5px;line-height:1.5;color:#8f93a8;text-wrap:pretty;
  min-height:calc(14.5px * 1.5 * 2)}
.au-foot{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:#787c92}
@media (max-width:900px){
  .au-band{grid-template-columns:minmax(0,1fr);gap:6px}
  .au-cap{order:-1}
}

/* ---- execution is not the end -------------------------------------------
   The loop the rest of the page implies but never showed: a governed run that
   missed the objective is still a miss, so the loop closes on a person saying
   whether it was any good. Drawn as a PROGRESSION, not a circle — the same work
   three times, converging, until it has earned a place further up the ladder.
   The mechanism is real: work_feedback/v1 is an append-only ledger bound to an
   exact Artifact and an exact Execution, and it reaches future context as
   quality evidence, never as an instruction and never as authority. */
.feedback{padding:var(--section-padding) var(--section-inline);border-top:1px solid var(--line)}
.feedback .section-copy{max-width:var(--shell-max);margin:0 auto}
.feedback h2{font-size:clamp(32px,3.6vw,56px);line-height:1.05;letter-spacing:-.05em;
  font-weight:420;margin:0 0 24px;max-width:16ch}
.feedback .section-copy p{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:#b6bac8;
  margin:0 0 16px;max-width:76ch}
.feedback .section-copy p em{font-style:normal;color:#fff}

.fb{max-width:var(--shell-max);margin:clamp(36px,4.5vw,64px) auto 0}
.fb-runs{display:flex;flex-direction:column;gap:10px}
.fb-run{display:grid;
  grid-template-columns:minmax(0,130px) minmax(0,1fr) auto minmax(0,1.5fr);
  gap:clamp(14px,2vw,28px);align-items:center;
  padding:18px 24px;border-radius:14px;border:1px solid var(--line);background:#ffffff05}
.fb-run--best{border-color:#7b4dff59;
  background:radial-gradient(120% 160% at 0% 0%,#7b4dff1f 0%,#7b4dff00 62%),#ffffff06;
  box-shadow:inset 0 1px 0 #ffffff14}
.fb-when{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#787c92}
.fb-run--best .fb-when{color:#c4b5fd}
.fb-res{font-size:15.5px;color:#eef0f7;letter-spacing:-.015em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-stars{white-space:nowrap;font-size:15px;letter-spacing:2px;color:#d9a400}
.fb-s.is-off{color:#ffffff26}
.fb-note{font-size:14.5px;line-height:1.5;color:#8f93a8;text-wrap:pretty;
  min-height:calc(14.5px * 1.5 * 2)}

.fb-arrive{display:flex;align-items:flex-start;gap:18px;margin-top:22px;padding-left:24px}
.fb-arrive-line{flex:none;width:1px;height:46px;margin-top:2px;
  background:linear-gradient(180deg,#7b4dff8c,#2fd4b8)}
.fb-arrive p{margin:0;font-size:clamp(16px,1.6vw,20px);line-height:1.5;color:#eef0f7;
  letter-spacing:-.02em;max-width:70ch}

.fb-law{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,38px);
  margin-top:clamp(32px,4vw,54px);padding-top:26px;border-top:1px solid var(--line)}
.fb-law-item{min-width:0}
.fb-law-item b{display:block;font-size:14.5px;font-weight:500;color:#eef0f7;letter-spacing:-.01em}
.fb-law-item span{display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:#8f93a8}

@media (max-width:1000px){
  .fb-run{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:baseline}
  .fb-when{grid-column:1}
  .fb-stars{grid-column:2;grid-row:1;justify-self:end}
  .fb-res{grid-column:1 / -1}
  .fb-note{grid-column:1 / -1;min-height:0}
  .fb-law{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* --- The flow: where work comes from, what it passes through, where it lands.
   One continuous diagram instead of four disconnected cards. The pulse runs the
   pipe; the direct one never stops, the governed one glows at every checkpoint
   before the destination fills. The asymmetry is the argument. --- */
.entrypaths .flow{max-width:1400px;margin:26px auto 0;display:grid;
  grid-template-columns:minmax(0,262px) 70px minmax(0,1fr) minmax(0,302px);
  align-items:center;column-gap:0}
.entrypaths .flow-origins{display:flex;flex-direction:column;gap:26px}
.entrypaths .origin{padding:18px 22px}
.entrypaths .origin-lbl{font-size:11px;letter-spacing:.2em;font-weight:600;color:#a9a3ff;margin-bottom:10px}
.entrypaths .origin--notice .origin-lbl{color:var(--cyan)}
.entrypaths .origin-main{font-size:16px;line-height:1.5;color:var(--text)}
.entrypaths .origin-sub{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:6px}

.entrypaths .flow-junction{position:relative;height:240px}
.entrypaths .flow-junction svg{width:100%;height:100%;display:block;overflow:visible}
.entrypaths .flow-node{display:none}

.entrypaths .flow-rails{position:relative;height:240px}
.entrypaths .rail{position:absolute;left:0;right:0;height:0}
.entrypaths .rail--direct{top:104px}
.entrypaths .rail--governed{top:174px}
.entrypaths .rail-head{position:absolute;left:0;right:0;bottom:14px}
.entrypaths .rail-lbl{font-size:11px;letter-spacing:.2em;font-weight:600}
.entrypaths .rail--direct .rail-lbl{color:var(--cyan)}
.entrypaths .rail--governed .rail-lbl{color:#a9a3ff}
.entrypaths .rail--direct .rail-lbl{margin-bottom:9px}
.entrypaths .rail-items{font-size:14.5px;line-height:1.5;color:var(--muted)}
.entrypaths .rail-line{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px}
.entrypaths .rail--direct .rail-line{background:linear-gradient(90deg,#7ee7ff45,#7ee7ffd6)}
.entrypaths .rail--governed .rail-line{background:linear-gradient(90deg,#a9a3ff45,#a9a3ffd6)}
.entrypaths .rail-pulse{position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;opacity:0}
.entrypaths .rail--direct .rail-pulse{background:#7ee7ff}
.entrypaths .rail--governed .rail-pulse{background:#a9a3ff}
.entrypaths .cp{position:absolute;top:50%;transform:translate(-50%,-50%);text-align:center}
.entrypaths .cp i{display:block;width:17px;height:17px;border-radius:50%;border:2px solid #a9a3ff;
  background:var(--bg);margin:0 auto;transition:background .3s ease,border-color .3s ease}
.entrypaths .cp em{position:absolute;left:50%;top:22px;transform:translateX(-50%);white-space:nowrap;
  font-style:normal;font-size:13.5px;color:var(--muted);transition:color .3s ease}

.entrypaths .flow-ends{display:flex;flex-direction:column;gap:26px;padding-left:20px}
.entrypaths .endpill{border:1px solid #ffffff2e;border-radius:14px;padding:16px 20px;
  transition:background .5s ease,border-color .5s ease}
.entrypaths .endpill strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.entrypaths .endpill--direct strong{color:var(--cyan)}
.entrypaths .endpill--governed strong{color:#c9c4ff}
.entrypaths .endpill span{font-size:14px;line-height:1.5;color:var(--muted)}
.entrypaths .tracks-note{max-width:1400px;margin:34px auto 0;color:var(--muted);font-size:15px;line-height:1.6;text-align:center}

/* the pulse runs, the checkpoints answer, the destination fills */
.entrypaths.is-animation-active .rail--direct .rail-pulse{animation:pulse-direct 9s ease-in-out infinite}
.entrypaths.is-animation-active .rail--governed .rail-pulse{animation:pulse-governed 9s linear infinite}
.entrypaths.is-animation-active .endpill--direct{animation:pill-fill-direct 9s ease-in-out infinite}
.entrypaths.is-animation-active .endpill--governed{animation:pill-fill-governed 9s ease-in-out infinite}
.entrypaths.is-animation-active .cp i{animation:cp-hit 9s linear infinite}
.entrypaths.is-animation-active .cp em{animation:cp-lbl 9s linear infinite}
.entrypaths.is-animation-active .cp:nth-of-type(2) i,
.entrypaths.is-animation-active .cp:nth-of-type(2) em{animation-delay:1.1s}
.entrypaths.is-animation-active .cp:nth-of-type(3) i,
.entrypaths.is-animation-active .cp:nth-of-type(3) em{animation-delay:2.4s}
.entrypaths.is-animation-active .cp:nth-of-type(4) i,
.entrypaths.is-animation-active .cp:nth-of-type(4) em{animation-delay:3.7s}

@keyframes pulse-direct{
  0%{left:0;opacity:0} 4%{opacity:1} 22%{left:100%;opacity:1}
  86%{left:100%;opacity:1} 92%{left:100%;opacity:0} 100%{left:0;opacity:0}
}
@keyframes pulse-governed{
  0%{left:0;opacity:0} 3%{opacity:1}
  12%{left:22%} 20%{left:22%}
  27%{left:52%} 35%{left:52%}
  42%{left:82%} 50%{left:82%}
  58%{left:100%} 86%{left:100%;opacity:1} 92%{left:100%;opacity:0} 100%{left:0;opacity:0}
}
@keyframes pill-fill-direct{
  0%,20%{background:transparent;border-color:#ffffff2e}
  26%,86%{background:#7ee7ff14;border-color:#7ee7ff8c}
  100%{background:transparent;border-color:#ffffff2e}
}
@keyframes pill-fill-governed{
  0%,56%{background:transparent;border-color:#ffffff2e}
  62%,86%{background:#a9a3ff14;border-color:#a9a3ff8c}
  100%{background:transparent;border-color:#ffffff2e}
}
@keyframes cp-hit{
  0%,11%{background:var(--bg);border-color:#a9a3ff}
  14%,86%{background:#a9a3ff;border-color:#a9a3ff}
  92%,100%{background:var(--bg);border-color:#a9a3ff}
}
@keyframes cp-lbl{
  0%,11%{color:var(--muted)} 14%,86%{color:var(--text)} 92%,100%{color:var(--muted)}
}
body.animations-paused .rail-pulse,body.animations-paused .endpill,
body.animations-paused .cp i,body.animations-paused .cp em{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .entrypaths .rail-pulse{animation:none!important;opacity:1;left:100%}
  .entrypaths .endpill, .entrypaths .cp i, .entrypaths .cp em{animation:none!important}
  .entrypaths .endpill--direct{background:#7ee7ff14;border-color:#7ee7ff8c}
  .entrypaths .endpill--governed{background:#a9a3ff14;border-color:#a9a3ff8c}
}
@media (max-width:1100px){
  /* stacked: the rails leave absolute positioning and flow normally again */
  .entrypaths .flow{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .entrypaths .flow-junction{display:none}
  .entrypaths .flow-rails{height:auto;display:flex;flex-direction:column;gap:46px}
  .entrypaths .rail{position:relative;height:auto;top:auto}
  .entrypaths .rail-head{position:relative;bottom:auto;margin-bottom:14px}
  .entrypaths .rail-line{position:relative;top:auto}
  .entrypaths .rail--governed{padding-bottom:34px}
  .entrypaths .flow-ends{padding-left:0;flex-direction:row;gap:16px}
  .entrypaths .endpill{flex:1}
  .entrypaths .cp em{font-size:12.5px}
}
@media (max-width:680px){
  .entrypaths .flow-ends{flex-direction:column}
  .entrypaths .cp em{font-size:11.5px}
  .entrypaths .rail-items{font-size:14px}
}

/* --- The authority boundary. What is Nieme's is one solid block; the
   execution layer clips in and out of it. The modules take turns being the
   connected one, which is the claim: the executor changes, the block does not.
   Every selector here is scoped to the section: .mod and .boundary are generic
   enough to collide with another page, which is exactly what happened once. --- */
.executors .boundary{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) 46px minmax(0,1.05fr);align-items:stretch;gap:0}
.executors .boundary-lbl{font-size:11px;letter-spacing:.2em;font-weight:600;color:#a9a3ff;margin-bottom:16px}
.executors .boundary-lbl--swap{color:var(--cyan)}
.executors .boundary-solid{padding:26px 30px;border-color:#a9a3ff40}
.executors .boundary-solid ul{margin:0;padding:0;list-style:none}
.executors .boundary-solid li{font-size:16px;line-height:1.5;color:var(--text);padding:11px 0;
  border-bottom:1px solid #ffffff12}
.executors .boundary-solid li:last-child{border-bottom:0;padding-bottom:0}
.executors .boundary-membrane{position:relative;display:flex;align-items:center;justify-content:center}
.executors .boundary-membrane span{width:2px;height:82%;border-radius:2px;
  background:linear-gradient(180deg,#7ee7ff00,#7ee7ffd6 18%,#7ee7ffd6 82%,#7ee7ff00)}
.executors .boundary-mods{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-left:4px}
.executors .mod{position:relative;border:1px dashed #ffffff2e;border-radius:12px;padding:14px 18px 14px 26px;
  font-size:15.5px;color:var(--muted);transition:border-color .45s ease,color .45s ease,background .45s ease}
.executors .mod-plug{position:absolute;left:-26px;top:50%;width:26px;height:1px;margin-top:-.5px;
  background:#ffffff26;transition:background .45s ease}

.executors.is-animation-active .mod{animation:mod-cycle 11s ease-in-out infinite}
.executors.is-animation-active .mod-plug{animation:plug-cycle 11s ease-in-out infinite}
.executors.is-animation-active .mod:nth-child(2),
.executors.is-animation-active .mod:nth-child(2) .mod-plug{animation-delay:0s}
.executors.is-animation-active .mod:nth-child(3),
.executors.is-animation-active .mod:nth-child(3) .mod-plug{animation-delay:2.2s}
.executors.is-animation-active .mod:nth-child(4),
.executors.is-animation-active .mod:nth-child(4) .mod-plug{animation-delay:4.4s}
.executors.is-animation-active .mod:nth-child(5),
.executors.is-animation-active .mod:nth-child(5) .mod-plug{animation-delay:6.6s}
.executors.is-animation-active .mod:nth-child(6),
.executors.is-animation-active .mod:nth-child(6) .mod-plug{animation-delay:8.8s}
@keyframes mod-cycle{
  0%{border-color:#ffffff2e;color:var(--muted);background:transparent}
  3%{border-color:#7ee7ff8c;color:var(--text);background:#7ee7ff12;border-style:solid}
  18%{border-color:#7ee7ff8c;color:var(--text);background:#7ee7ff12;border-style:solid}
  22%,100%{border-color:#ffffff2e;color:var(--muted);background:transparent}
}
@keyframes plug-cycle{
  0%{background:#ffffff26}
  3%,18%{background:#7ee7ffd6}
  22%,100%{background:#ffffff26}
}
body.animations-paused .executors .mod,
body.animations-paused .executors .mod-plug{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .executors .mod,.executors .mod-plug{animation:none!important}
}
@media (max-width:980px){
  .executors .boundary{grid-template-columns:minmax(0,1fr);gap:20px}
  .executors .boundary-membrane{height:34px}
  .executors .boundary-membrane span{width:82%;height:2px;
    background:linear-gradient(90deg,#7ee7ff00,#7ee7ffd6 18%,#7ee7ffd6 82%,#7ee7ff00)}
  .executors .boundary-mods{padding-left:0}
  .executors .mod{padding-left:18px}
  .executors .mod-plug{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   WEBSITE-HERO-WORKSPACE-001
   The hero is one statement. The Workspace below it is the product running
   in the reader's browser, and it is also the focus the ambient field
   converges on: cyan motes run into the conversation, purple ones leave it.
   Every selector here is namespaced .hero--statement or .ws-* on purpose —
   generic names in this file have leaked across pages before.
   The composer proportions are lifted from the product's own stylesheet
   (padding, radii, type sizes), not re-invented.
   ═══════════════════════════════════════════════════════════════════════ */

.hero--statement{min-height:0;padding:clamp(104px,12vh,150px) 8vw clamp(40px,5vh,64px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.hero--statement .kicker{margin-bottom:0}
.hero--statement h1{max-width:none;font-size:clamp(40px,7.6vw,108px);line-height:.95;
  letter-spacing:-.062em;font-weight:420}
/* the same four-layer neon the closing statement uses */
.hero--statement h1 em{font-style:normal;color:#8d6cff;
  text-shadow:0 0 10px rgba(123,92,255,.45),0 0 28px rgba(123,92,255,.38),
              0 0 70px rgba(123,92,255,.22),0 0 140px rgba(123,92,255,.10)}
.hero--statement .lede{max-width:58ch;margin:0}
.hero--statement .actions{margin-bottom:0;justify-content:center;flex-wrap:wrap}

/* the widest block on the page on purpose: this is the one the reader operates,
   and next to the Signals screen (1368px) and the Runtime band (1552px) anything
   narrower reads as a card about the product rather than the product itself. */
/* the --ui-* palette lives on .uiw, so every .ws-* rule that referenced it was
   resolving to nothing outside that subtree. The Workspace declares the same
   set, which is why the attach icon had stroke:none and read as an empty ring. */
.workspace{--ui-text:#e9eefb;--ui-soft:#a9b4ca;--ui-muted:#788398;--ui-surf:#11141d;--ui-raised:#1b2130;--ui-line:rgba(132,153,190,.16);--ui-line2:rgba(162,184,230,.24);padding:0 var(--section-inline) clamp(70px,10vh,120px);position:relative;z-index:1;
  scroll-margin-top:100px}   /* the nav is fixed at 84px; never let it cover the topbar */
.ws-frame{max-width:var(--chat-max);margin:0 auto;border-radius:23px;padding:1px;
  background:linear-gradient(150deg,rgba(167,139,250,.55),rgba(123,77,255,.16) 44%,rgba(126,231,255,.3));
  box-shadow:0 42px 120px rgba(123,77,255,.15)}
.ws-win{background:#080b12;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  height:min(88vh,1040px);min-height:600px}

.ws-topbar{display:flex;align-items:center;gap:12px;padding:11px clamp(14px,1.6vw,22px);flex:none;
  border-bottom:1px solid var(--ui-line);background:#0a0d15}
.ws-back{font-size:13px;color:var(--ui-soft);white-space:nowrap}
.ws-search{flex:1;min-width:0;max-width:430px;display:flex;align-items:center;gap:9px;
  padding:7px 12px;border:1px solid var(--ui-line);border-radius:9px;background:#ffffff06;
  font-size:13px;color:var(--ui-muted)}
.ws-search kbd{margin-left:auto;font-family:var(--mono-ws);font-size:10.5px;padding:1px 5px;
  border:1px solid var(--ui-line);border-radius:4px}
.ws-tops{margin-left:auto;display:flex;gap:7px}
.ws-chip{font-size:12.5px;padding:6px 11px;border:1px solid var(--ui-line);border-radius:8px;
  background:#ffffff06;color:var(--ui-soft);white-space:nowrap}
.ws-chip.is-ws{color:var(--ui-text)}

.ws-chead{display:flex;align-items:center;gap:12px;padding:14px clamp(18px,2vw,30px) 12px;flex:none;flex-wrap:wrap}
.ws-t{font-size:15px;color:var(--ui-muted)}
.ws-t b{color:var(--ui-text);font-weight:500}
.ws-r{margin-left:auto;display:flex;gap:8px}
.ws-ghost{font:inherit;font-size:12.5px;padding:6px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--ui-line);background:transparent;color:var(--ui-soft)}
.ws-ghost.is-on{color:var(--cyan);border-color:rgba(126,231,255,.4)}

.ws-line{display:flex;align-items:center;gap:14px;padding:0 clamp(18px,2vw,30px) 12px;flex:none;flex-wrap:wrap;
  font-size:12.5px;color:var(--ui-muted)}
.ws-n{display:inline-flex;align-items:center;gap:7px;color:var(--ui-text)}
.ws-n i{width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.ws-v{display:inline-flex;align-items:center;gap:6px;color:#f0c674}

/* answers need room to be read, not packed: the turn gap and the top padding
   are deliberately generous, and the thread centres its empty state. */
.ws-thread{flex:1;min-height:0;overflow-y:auto;padding:18px clamp(20px,2.4vw,36px) 16px;
  display:flex;flex-direction:column;gap:30px}
.ws-turn{flex:none;align-self:flex-end;max-width:min(76%,660px);padding:11px 16px;
  border-radius:16px 16px 5px 16px;background:rgba(123,77,255,.15);
  border:1px solid rgba(123,77,255,.28);font-size:15px;color:var(--ui-text);word-break:break-word}
.ws-ans{flex:none;align-self:stretch;display:flex;flex-direction:column;gap:11px}
.ws-who{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-muted)}
.ws-pills{display:flex;flex-wrap:wrap;gap:7px}
.ws-sp{display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:5px 11px;
  border-radius:999px;border:1px solid;white-space:nowrap}
.ws-sp i{width:6px;height:6px;border-radius:50%;flex:none}
.ws-sp.ok{color:#3fd39b;border-color:rgba(63,211,155,.32);background:rgba(63,211,155,.08)}
.ws-sp.ok i{background:#3fd39b}
.ws-sp.cy{color:var(--cyan);border-color:rgba(126,231,255,.3);background:rgba(126,231,255,.07)}
.ws-sp.cy i{background:var(--cyan)}
.ws-sp.vi{color:#c4b5fd;border-color:rgba(196,181,253,.3);background:rgba(196,181,253,.07)}
.ws-sp.vi i{background:#c4b5fd}
.ws-sp.no{color:#5b6478;border-color:rgba(91,100,120,.4);background:transparent}
.ws-sp.no i{background:transparent;border:1px solid #5b6478}
.ws-body{font-size:15px;line-height:1.62;color:var(--ui-soft);max-width:78ch}
.ws-body b{color:var(--ui-text);font-weight:500}
.ws-body p{margin:0 0 11px}
.ws-body p:last-child{margin-bottom:0}
.ws-body code{font-family:var(--mono-ws);font-size:.85em;padding:2px 6px;border-radius:5px;
  background:rgba(255,255,255,.07);color:var(--cyan)}

.ws-dock{flex:none;padding:12px clamp(14px,2vw,26px) 14px;border-top:1px solid var(--ui-line);background:#0a0d15}
.ws-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px}
.ws-pill b{color:var(--ui-text);font-weight:450}

.ws-input::placeholder{color:var(--ui-muted)}
/* a touch thicker than the platform caret, with the brand gradient travelling
   through it rather than the hue cycling. One small composited element. */
.ws-caret.is-live{opacity:1;animation:ws-spiral 2.6s linear infinite}
.ws-caret.is-idle{animation:ws-spiral 2.6s linear infinite,ws-breathe 1.3s ease-in-out infinite}
@keyframes ws-spiral{from{background-position:0 0}to{background-position:0 -380%}}
@keyframes ws-breathe{0%,100%{opacity:1}50%{opacity:.26}}
.ws-tail{display:flex;align-items:center;gap:7px;flex:none}

.ws-drop{position:relative}
.ws-drop > button{font:inherit;font-size:12px;color:var(--ui-soft);padding:6px 10px;border-radius:8px;
  border:1px solid var(--ui-line);background:#ffffff07;cursor:pointer;display:flex;align-items:center;
  gap:6px;white-space:nowrap}
.ws-drop > button svg{width:9px;height:6px;stroke:currentColor;fill:none;stroke-width:1.3;flex:none;
  transition:transform .15s}
.ws-drop.is-open > button{border-color:rgba(126,231,255,.4);color:var(--ui-text)}
.ws-drop.is-open > button svg{transform:rotate(180deg)}
.ws-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:12;min-width:240px;
  background:#141826;border:1px solid var(--ui-line);border-radius:10px;padding:4px;display:none;
  max-height:min(44vh,300px);overflow-y:auto;box-shadow:0 22px 52px rgba(0,0,0,.62)}
.ws-drop.is-open .ws-menu{display:block}
.ws-mi{padding:9px 12px;border-radius:7px;cursor:pointer}
.ws-mi:hover{background:rgba(255,255,255,.04)}
.ws-mi-n{font-size:12px;font-weight:600;color:var(--ui-text);line-height:1.3}
.ws-mi-d{font-size:11px;color:var(--ui-muted);margin-top:1px;line-height:1.4}
.ws-mi.is-on{background:rgba(126,231,255,.07)}
.ws-mi.is-on .ws-mi-n{color:var(--cyan)}
.ws-mi.is-na{opacity:.45;cursor:not-allowed}
.ws-mi.is-na .ws-mi-n::after{content:" · not available";font-weight:400;color:var(--ui-muted)}
.ws-mgroup{padding:8px 12px 4px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ui-muted)}

.ws-pal{position:absolute;left:10px;right:10px;bottom:calc(100% + 9px);z-index:14;background:#151a2a;
  border:1px solid rgba(123,77,255,.42);border-radius:14px;padding:6px;display:none;
  max-height:min(46vh,300px);overflow-y:auto;box-shadow:0 26px 60px rgba(0,0,0,.68)}
.ws-pal.is-open{display:block}
.ws-ph{padding:8px 11px;margin:0;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ui-muted)}
.ws-cmd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:baseline;
  padding:9px 11px;border-radius:9px;cursor:pointer}
.ws-cmd[aria-selected="true"]{background:rgba(123,77,255,.22)}
.ws-cmd.is-off{opacity:.5}
.ws-cmd.is-off[aria-selected="true"]{background:rgba(132,153,190,.13)}
.ws-cmd-nm{font-family:var(--mono-ws);font-size:13px;color:var(--cyan)}
.ws-cmd.is-off .ws-cmd-nm{color:var(--ui-muted)}
.ws-cmd-ds{font-size:13.5px;color:var(--ui-text);min-width:0}
.ws-cmd.is-off .ws-cmd-ds{color:var(--ui-muted)}
.ws-cmd-bd{font-family:var(--mono-ws);font-size:11px;color:var(--ui-muted);white-space:nowrap}

.ws-tries{display:none;flex-wrap:wrap;gap:6px;padding:0 2px}
.ws-comp.has-cmd .ws-tries.is-shown{display:flex}
.ws-try{font:inherit;font-size:12px;padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px dashed var(--ui-line);background:transparent;color:var(--ui-muted);text-align:left;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-try:hover{color:var(--ui-text);border-color:rgba(123,77,255,.45);background:rgba(123,77,255,.08)}
.ws-try.is-blank{border-style:solid;color:var(--ui-soft)}

.ws-thinking{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#f0c674}
.ws-thinking i{width:7px;height:7px;border-radius:50%;background:#f0c674;flex:none;
  animation:ws-pulse 1.15s ease-in-out infinite}
@keyframes ws-pulse{0%,100%{opacity:.35}50%{opacity:1}}

.ws-cap{margin:10px 0 0;font-size:12.5px;color:var(--ui-muted);text-align:center}

.ws-bound{flex:none;align-self:stretch;display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:13px 15px;border-radius:13px;border:1px solid rgba(126,231,255,.3);
  background:rgba(126,231,255,.06);font-size:14px;color:var(--ui-soft)}
.ws-bound b{color:var(--ui-text);font-weight:500}
.ws-bound .ws-cta{margin-left:auto}
.ws-cta{font:inherit;font-size:12.5px;padding:8px 14px;border-radius:9px;cursor:pointer;
  border:0;background:#9de8ff;color:#07202b;font-weight:600}

.ws-skey:focus-visible,.ws-swap:focus-visible,.ws-try:focus-visible,.ws-send:focus-visible,
.ws-ghost:focus-visible,.ws-cta:focus-visible,.ws-drop > button:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px}

@media (max-width:860px){
  .ws-win{height:min(88vh,720px)}
  .ws-search,.ws-chip.is-ws{display:none}
  .ws-turn{max-width:90%}
  .ws-menu{right:auto;left:0;min-width:min(84vw,240px)}
  .ws-tail .ws-drop:first-of-type{display:none}
  .ws-bound .ws-cta{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .ws-caret.is-live,.ws-caret.is-idle{animation:none;opacity:1}
  .ws-thinking i{animation:none}
}


/* ---- the product's own draft card, lifted verbatim and scoped ---- */
.ws-thread .composer-draft-unfold{display:none;margin:0 0 10px;border:1px solid rgba(167,139,250,.26);border-radius:22px;background:linear-gradient(135deg,rgba(35,40,62,.72),rgba(18,22,35,.78));box-shadow:0 18px 60px rgba(0,0,0,.26),0 0 0 1px rgba(126,231,255,.08),0 0 42px rgba(123,77,255,.13),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden;transform-origin:bottom center}
.ws-thread .composer-draft-unfold-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.08)}
.ws-thread .composer-draft-unfold-kicker{font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#c4b5fd}
.ws-thread .composer-draft-unfold-title{font-size:15px;font-weight:850;color:var(--text);line-height:1.3;margin-top:2px}
.ws-thread .composer-draft-unfold-status{font-size:11px;color:var(--soft);line-height:1.5;margin-top:3px}
.ws-thread .composer-draft-unfold-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:13px 15px}
.ws-thread .composer-draft-cell{border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035);padding:10px;min-width:0}
.ws-thread .composer-draft-cell.wide{grid-column:1/-1}
.ws-thread .composer-draft-label{font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.ws-thread .composer-draft-value{font-size:12px;color:var(--soft);line-height:1.5;white-space:pre-wrap}
.ws-thread .composer-draft-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 15px 13px}

/* the card lives in the thread here, not above a composer, so it does not
   animate in from the bottom and it never needs display:none */
.ws-thread .composer-draft-unfold{display:block;margin:0;flex:none;align-self:stretch;
  transform:none;animation:none}
.ws-thread .composer-draft-actions{align-items:center}
.ws-thread .ws-prov{margin-left:auto;font-family:var(--mono-ws);font-size:11px;color:var(--ui-muted)}
.ws-thread .ws-cinput{width:100%;font:inherit;font-size:12.5px;line-height:1.5;color:var(--ui-text);
  background:rgba(0,0,0,.28);border:1px solid rgba(126,231,255,.2);border-radius:9px;padding:7px 9px;
  resize:vertical;outline:0}
.ws-thread .ws-cinput:focus{border-color:rgba(126,231,255,.58);box-shadow:0 0 0 1px rgba(126,231,255,.2)}
.ws-thread .ws-cinput::placeholder{color:#5b6478}
@media (max-width:860px){.ws-thread .composer-draft-unfold-body{grid-template-columns:minmax(0,1fr)}
  .ws-thread .ws-prov{margin-left:0;width:100%}}

/* WEBSITE-HERO-WORKSPACE-001 — one shell width for every product surface.
   The Workspace, the Signals screen and the Runtime band were 1606 / 1368 / 1552,
   which read as three different products. They share --shell-max now. */
.uiw,.rv-teaser,.runtime-intelligence-shell,.curve-figure{max-width:var(--shell-max);
  margin-left:auto;margin-right:auto;width:100%}

/* the proof flow indented its screen 72px for a rail that no longer needs the
   gutter at desktop width; without this the Signals screen renders 72px narrower
   than every other product surface, which reads as three different products. */
/* WEBSITE-PROOF-MARGINS-001 — a rule lived here that set .pf{padding-left:0}
   above 1100px, to make the proof flow's screens as wide as every other product
   surface. The 72px it reclaimed was not spare: .pf-trace hangs its rail at
   left:15px inside it and .pf-gate pulls itself back into it with
   margin-left:-72px. With the gutter gone both of them kept their offsets and
   ended up outside the content column — measured at 1920px, .pf-gate sat at
   left:48 while every sibling sat at left:120. The screens are 72px narrower
   than the other surfaces again, which is what they were for the weeks before
   it, and the rail has its gutter back. */

/* ---- the composer's mode row, at the product's own proportions ----------
   26px command button with an 8px radius, a 10px/700 uppercase chip on a
   999px pill, an 11px hint that takes the remaining width, then the dismiss
   and Return to Chat. Sizes lifted from the product stylesheet, not guessed. */
.ws-mode-row{display:flex;align-items:center;gap:7px;min-height:22px;position:relative;z-index:1}
.ws-cmd-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  flex-shrink:0;border:none;cursor:pointer;border-radius:8px;color:#fff;font:inherit;
  background:linear-gradient(145deg,#8b5cf6,#6d4aff);box-shadow:0 0 13px rgba(123,77,255,.42)}
.ws-cmd-btn:hover{filter:brightness(1.08)}
.ws-cmd-btn:active{transform:translateY(1px)}
.ws-cmd-glyph{font-size:15px;font-weight:800;line-height:1;transform:translateY(-.5px)}
.ws-mode-chip{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(167,139,250,.24);background:rgba(167,139,250,.11);color:#c4b5fd}
.ws-mode-hint{font-size:11px;color:var(--ui-muted);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-mode-dismiss{background:none;border:none;color:var(--ui-muted);cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px;transition:color .1s}
.ws-mode-dismiss:hover{color:var(--ui-text)}
.ws-return-chat{background:none;border:1px solid var(--ui-line);color:var(--ui-muted);cursor:pointer;
  font:inherit;font-size:12px;line-height:1;padding:4px 9px;border-radius:12px;margin-left:6px}
.ws-return-chat:hover{color:var(--ui-text)}
.ws-cmd-btn:focus-visible,.ws-mode-dismiss:focus-visible,.ws-return-chat:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px}
/* the product's attach is a bordered circle and its send is a rounded square */

/* ---- the composer surface, lifted from the product's .input-area ----------
   26px radius on a white-alpha glass, a violet-to-cyan gradient ring drawn by
   ::before with mask-composite:exclude, and the four-layer shadow that gives it
   its lift. The input row is its own 18px surface on top with an inset
   highlight. Every number here is the product's, not an approximation of it. */
.ws-comp{position:relative;z-index:12;display:flex;flex-direction:column;gap:10px;
  padding:16px 18px 18px;border:1px solid rgba(123,77,255,.24);border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:0 30px 120px rgba(0,0,0,.4),0 16px 46px rgba(101,76,255,.12),
             0 0 0 1px rgba(126,231,255,.08),inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  transition:border-color .22s ease,box-shadow .22s ease}
.ws-comp::before{content:"";position:absolute;inset:-1px;border-radius:26px;pointer-events:none;
  background:radial-gradient(circle at 18% 0,rgba(167,139,250,.23),transparent 34%),
             radial-gradient(circle at 80% 100%,rgba(34,199,216,.15),transparent 32%);
  padding:1px;opacity:.8;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask-composite:exclude}
.ws-comp.is-armed{border-color:rgba(123,77,255,.45);
  box-shadow:0 30px 120px rgba(0,0,0,.4),0 16px 52px rgba(101,76,255,.2),
             0 0 0 1px rgba(126,231,255,.12),inset 0 1px 0 rgba(255,255,255,.14)}

.ws-field{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:12px;padding:12px 13px;border-radius:18px;cursor:text;
  background:rgba(6,9,17,.72);border:1px solid rgba(162,184,230,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:border-color .15s}
.ws-field:focus-within{border-color:rgba(126,231,255,.42);
  box-shadow:0 0 0 3px rgba(126,231,255,.12),inset 0 1px 0 rgba(255,255,255,.09)}
.ws-clip{width:34px;height:34px;flex:none;border-radius:50%;padding:9px;box-sizing:border-box;
  border:1px solid rgba(162,184,230,.18);stroke:var(--ui-muted);fill:none;stroke-width:1.5}
.ws-iw{position:relative;min-width:0;height:28px}
.ws-input{position:absolute;inset:0;width:100%;height:100%;border:0;outline:0;background:none;
  color:var(--ui-text);font:inherit;font-size:15px;line-height:28px;caret-color:transparent;padding:0}
.ws-input::placeholder{color:#6f7b91}
.ws-measure{position:absolute;visibility:hidden;white-space:pre;font:inherit;font-size:15px;
  left:0;top:0;pointer-events:none}
.ws-caret{position:absolute;top:2px;left:0;width:3.5px;height:24px;border-radius:2px;opacity:0;
  background:linear-gradient(180deg,#7ee7ff,#7b4dff,#4d9fff,#a9a3ff,#7ee7ff);
  background-size:100% 380%;pointer-events:none;
  box-shadow:0 0 12px rgba(123,77,255,.8),0 0 3px rgba(126,231,255,.9)}
.ws-send{width:38px;height:38px;border-radius:14px;border:0;flex:none;cursor:pointer;color:#fff;
  display:grid;place-items:center;font-size:15px;
  background:linear-gradient(135deg,#7b4dff,#4d9fff);
  box-shadow:0 0 44px rgba(101,76,255,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.ws-send:hover{filter:brightness(1.06)}

.ws-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;
  font-size:11px;color:var(--ui-soft);background:rgba(255,255,255,.055);
  border:1px solid rgba(162,184,230,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ws-pill b{color:var(--ui-text);font-weight:700}

.ws-empty{margin:auto;padding:0 16px;text-align:center;font-size:14.5px;color:var(--ui-muted);
  max-width:46ch;line-height:1.6}
.ws-empty kbd{font-family:var(--mono-ws);font-size:12px;padding:2px 7px;border-radius:5px;
  border:1px solid var(--ui-line);background:rgba(255,255,255,.05);color:#c4b5fd}

/* author display beats the user-agent's [hidden]{display:none}, so anything in
   the mode row that sets display has to opt back out of it by hand. */
.ws-mode-chip[hidden],.ws-mode-dismiss[hidden],.ws-return-chat[hidden],
.ws-tries[hidden],.ws-empty[hidden]{display:none!important}


/* ---------------------------------------------------------------------------
   WEBSITE-MOBILE-COMPOSER-001 — the composer was unusable on a phone.

   .ws-field is a three-column grid (auto | 1fr | auto). Two of those columns are
   fixed: the 34px clip and the tail, which is 184.6px once the model pill has a
   real name in it. Measured on the live site at a 390px viewport, the field is
   290px wide, so the 1fr input column was left with 19.4px — one character at a
   time, and the amount visible moved with the length of the model's name.

   These rules are at the end of the file on purpose: the base .ws-input and
   .ws-measure declarations live below the earlier @media blocks, so a font-size
   override placed up there would lose to them.
   --------------------------------------------------------------------------- */
@media (max-width:620px){
  /* the input takes a row of its own; the controls sit underneath it */
  .ws-field{grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"iw   iw"
                        "clip tail";
    row-gap:10px;column-gap:10px}
  .ws-iw{grid-area:iw}
  .ws-clip{grid-area:clip}
  .ws-tail{grid-area:tail;justify-content:flex-end}

  /* iOS Safari zooms the whole page when a focused input renders under 16px,
     and it does not zoom back out afterwards. The animated caret is positioned
     from .ws-measure's measured text width, so these two font sizes have to
     stay identical or the caret drifts away from the text it is marking. */
  .ws-input,.ws-measure{font-size:16px}
  .ws-thread .ws-cinput{font-size:16px}
}


/* ---------------------------------------------------------------------------
   WEBSITE-MOBILE-CHART-001 — the learning curve gets a phone-sized twin.

   The desktop figure is 960x430 with a 150px left gutter for a rotated axis
   title. It cannot shrink into 356px: scaled to fit, its 12px labels land at
   about 4px. The previous answer was to let it scroll sideways (min-width:560px
   + overflow-x:auto + a fade mask on the right edge), and that failed in the
   field — a horizontal scroll nested inside a vertically scrolling page fights
   the reader's gesture, and the fade is too quiet to read as an affordance.
   Nobody scrolled it, so on a phone the chart ended at the 5th round of ten.

   So the phone gets its own instrument for the same claim: 360x300, both poles
   labelled inline above their gridlines instead of down a rotated gutter, and
   three of the ten rounds named instead of all ten. Same two series, same
   emphasis (Nieme in the accent gradient, the flat comparison in gray), same
   curve — the points are the desktop values renormalised, not redrawn by eye.
   --------------------------------------------------------------------------- */
/* .cx-plot svg already sets display:block, and it outranks a bare .cx-m — the
   hide rule has to carry the same parent or both charts render at every width. */
.cx-plot .cx-m{display:none}

@media (max-width:620px){
  .cx-plot{overflow-x:visible;padding:6px 14px 2px}
  .cx-plot .cx-d{display:none}
  .cx-plot .cx-m{display:block;width:100%;min-width:0;height:auto}

  /* the shared label rules are written for the landscape plot: .cx-yt hangs its
     text off the right of a left gutter this one does not have, and the ≤760px
     block sizes the labels for a chart being viewed at 560px. */
  /* sized in viewBox units: at a 390px viewport this plot draws at 0.91 scale,
     so each of these lands about 9% smaller than it reads here. */
  .cx-m .cx-yt{text-anchor:start;font-size:12.5px}
  .cx-m .cx-xt{font-size:12px}
  .cx-m .cx-atitle{text-anchor:start;font-size:11px;letter-spacing:.14em}
  .cx-m .cx-line{stroke:url(#cxline-m);stroke-width:2.6}
  .cx-m .cx-badge text{font-size:11px}
}


/* ---------------------------------------------------------------------------
   WEBSITE-MOBILE-CHROME-001 — the Workspace stops being a desktop screenshot
   held inside a card, and starts behaving like something built for a thumb.

   Three changes, all of them chrome. The thread, the turns, the composer's own
   contents and every word on the page are untouched: same claims, same copy,
   one document. What changes is the frame around them.
   --------------------------------------------------------------------------- */
@media (max-width:620px){

  /* 1 — full bleed. .workspace was spending var(--section-inline) (16px a side
     at this width) plus the frame's 1px on a rounded card, so the window drew
     356px of the 390px a phone has. The gradient frame keeps its top and bottom
     hairline and gives up its sides; the corner radius goes with them, because
     a rounded corner reads as "a picture of an app" rather than an app. */
  .workspace{padding-left:0;padding-right:0}
  .ws-frame{border-radius:0;padding:1px 0;box-shadow:0 26px 80px rgba(123,77,255,.13)}
  .ws-win{border-radius:0}

  /* 2 — the window is sized against what is actually visible. 88vh measures the
     layout viewport, which on a phone includes the strip under Safari's toolbar;
     88dvh is the same fraction of what the reader can see. min-height:600px came
     from the desktop rule and is taller than a small phone's whole viewport, so
     it has to come down or the window overflows the screen it is sizing to. */
  .ws-win{height:min(88vh,720px);min-height:420px}
  .ws-dock{padding-bottom:calc(14px + env(safe-area-inset-bottom))}

  /* 3 — the model picker becomes a sheet. It opened out of a button 12px tall,
     anchored right:0 to it, which is a cursor shape; at this width it comes up
     from the bottom edge instead, where a thumb always reaches.

     The command palette deliberately does NOT do this. It was built as a sheet
     first and that was wrong: you filter it by typing, so a sheet on the bottom
     edge covers the composer and hides the text doing the filtering. It stays
     where it is — directly above the composer, which on a phone is already in
     the bottom third of the screen — and takes only the thumb-sized rows.

     No backdrop on purpose — the palette already closes on the input's blur and
     open dropdowns already close on a document click, so a backdrop would be a
     tap target that adds nothing and can only get in the way of the row
     underneath it.

     position:fixed only escapes to the viewport if nothing above it has built a
     containing block, and two things here had: .ws-comp's backdrop-filter and
     the identity transform .reveal leaves on the section after it has arrived.
     Measured with both in place, the sheet landed 360px wide with its bottom
     78px short of the viewport — pinned inside the composer, which is the one
     box it was trying to get out of. Both are given up below this width:

     - the blur is filtering .ws-dock's flat opaque #0a0d15. There is nothing
       behind the composer for it to reveal, so it changes nothing you can see,
       and dropping it also takes a full-width 22px blur off a phone's
       compositor on every frame.
     - .reveal's transform is translateY(0) once the section is visible. Taking
       it off costs this section its 12px entrance slide on phones; the opacity
       fade, which is what actually reads, is untouched. */
  .ws-comp{backdrop-filter:none;-webkit-backdrop-filter:none}
  .workspace.reveal{transform:none}

  /* --ws-kb is the keyboard's height. iOS pins a fixed
     element to the LAYOUT viewport, which the keyboard does not shrink, so
     bottom:0 alone would put this sheet behind the keyboard — exactly where a
     command list you pick from while typing must not be. */
  .ws-menu{position:fixed;inset:auto 0 var(--ws-kb,0px) 0;
    width:auto;min-width:0;max-width:none;
    border-width:1px 0 0;border-radius:20px 20px 0 0;
    max-height:min(58vh,420px);
    padding:0 6px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -20px 64px rgba(0,0,0,.72);z-index:60}
  .ws-menu::before{content:"";display:block;
    width:40px;height:4px;margin:9px auto 7px;border-radius:2px;background:var(--ui-line2)}
  /* the rows grew, so the palette needs the height to show a useful number of
     them without running past the top of the window */
  .ws-pal{max-height:min(44vh,330px)}

  /* 9px of vertical padding is a cursor target; a thumb wants about 44px of row.
     The badge also comes off the description's line: three columns in 340px left
     the description wrapping to three lines while `operation.on` sat alone in a
     column of its own. It goes under the description instead. */
  .ws-cmd{padding:14px 12px;row-gap:3px;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"nm ds"
                        "nm bd"}
  .ws-cmd-nm{grid-area:nm;align-self:center}
  .ws-cmd-ds{grid-area:ds}
  .ws-cmd-bd{grid-area:bd}
  .ws-mi{padding:13px 13px}

}
@supports (height:100dvh){
  @media (max-width:620px){
    .ws-win{height:min(88dvh,720px)}
    .ws-menu{max-height:min(58dvh,420px)}
    .ws-pal{max-height:min(44dvh,330px)}
  }
}


/* ---------------------------------------------------------------------------
   WEBSITE-WORKSPACE-INVITE-001 — the composer says it is a composer.

   Everything in the Workspace window is real and working, and at rest none of
   it moved: .ws-caret sits at opacity:0 until the input takes focus, and the
   field's only lift is :focus-within. So the whole thing read as a screenshot
   of a product, and people sat looking at it waiting for nothing to happen.

   The fix is motion, because motion is the one thing a screenshot cannot have —
   a static instruction is exactly what a picture of a composer would also
   contain. It stops at the first focus and never comes back: an invitation is
   for someone who has not worked out that they can type, and the moment they
   have, it is only a distraction.
   --------------------------------------------------------------------------- */
.ws-caret.is-invite{opacity:.9;
  animation:ws-spiral 2.6s linear infinite,ws-breathe 1.3s ease-in-out infinite}

.ws-field::after{content:"";position:absolute;inset:-1px;border-radius:19px;
  pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px rgba(126,231,255,.22),0 0 30px rgba(123,77,255,.2)}
.ws-field.is-invite{border-color:rgba(126,231,255,.3)}
.ws-field.is-invite::after{animation:ws-invite 2.8s ease-in-out infinite}
/* the real focus ring takes over the moment it exists; two glows at once reads
   as a bug rather than as emphasis */
.ws-field:focus-within::after{animation:none;opacity:0}
@keyframes ws-invite{0%,100%{opacity:.2}50%{opacity:1}}

/* where the pulse does not run, the opening turn is what carries the message —
   which is why the invitation is two things and not one. The field keeps its
   brighter resting border, since that costs no motion. */
@media (prefers-reduced-motion:reduce){
  .ws-caret.is-invite{animation:none;opacity:1}
  .ws-field.is-invite::after{animation:none;opacity:.5}
}


/* ---------------------------------------------------------------------------
   WEBSITE-HERO-STACK-001 — the hero holds still and the Workspace rides over it.

   This replaces a scroll-linked rise-and-grow that was tried first and was the
   wrong effect: it moved the window towards its place, when what was wanted was
   the window covering what is above it, and uncovering it again on the way back
   up. That is not an animation at all — it is two boxes and a sticky, so the
   scroll stays entirely native. No library, no scroll hijacking, nothing to
   throttle, and it runs in reverse for free because the browser is not playing
   anything: it is just where the boxes are.

   .cover-stack exists only to bound the stick. Without it the sticky container
   is <main> and the hero stays pinned behind all fourteen sections for the
   length of the page; with it the hero is released the moment the Workspace has
   finished passing over it.

   The Workspace has to be opaque for any of this to read — a transparent panel
   sliding over the hero shows the hero's headline through the conversation.
   The fixed .grain layer sits at z-index:10, above this, so the page texture
   carries across the panel unchanged. The .pulse canvas is at z-index:0 and is
   occluded inside this band; that is the one thing the effect costs.
   --------------------------------------------------------------------------- */
.cover-stack{position:relative}
.hero{position:sticky;top:0}
.workspace{z-index:2;
  background:linear-gradient(180deg,#0b1020 0,#05070d 46%);
  border-radius:30px 30px 0 0;
  padding-top:40px;
  box-shadow:0 -1px 0 rgba(162,184,230,.17),0 -36px 96px rgba(0,0,0,.6)}
@media (max-width:620px){
  .workspace{border-radius:22px 22px 0 0;padding-top:26px}
}


/* ---------------------------------------------------------------------------
   WEBSITE-HERO-STACK-001 — the catch.

   With the cover running entirely on native scroll it is also entirely
   frictionless, and a reader with any momentum goes straight past the moment
   the Workspace takes the screen without registering that it did.

   One snap point on the whole page, at the top of the Workspace — which is
   exactly the position where the panel has finished covering the hero.

   scroll-snap-stop:always is the part that does the work. It is defined as: the
   scroll must not pass OVER this position during a single scrolling gesture. A
   hard flick on a Magic Mouse, which would otherwise carry its momentum halfway
   down the page, is arrested here, and continuing takes a second gesture. That
   is the behaviour asked for, stated in one property, by the people who wrote
   the spec for exactly this.

   proximity and not mandatory, though. There is one snap area on a 14,000px
   page; under `mandatory` the scrollport must sit at a snap position whenever
   it is at rest, and with only one of them to choose from that is a scroller
   that pulls the reader back from wherever they stopped. proximity leaves every
   other position on the page free, and `always` still holds at this one.

   .workspace already carries scroll-margin-top:100px to keep its topbar out
   from under the fixed nav, and snapping honours it, so the catch lands with
   the panel's edge clear of the header rather than behind it.

   Above 621px only. On a phone the scroll is the reader's primary gesture and
   it already has momentum behaviour of its own; a snap point in the middle of
   that is something to add on purpose after feeling it, not by default.
   --------------------------------------------------------------------------- */
@media (min-width:621px){
  html{scroll-snap-type:y proximity}
  .workspace{scroll-snap-align:start;scroll-snap-stop:always}
}


/* ---------------------------------------------------------------------------
   WEBSITE-PROOF-BAND-001 — the one claim in this set nobody else can make.

   Every competitor shows a picture of their product. This company is run on its
   own, and these counts are read out of that Runtime — including the governed
   Operations that produced this website. It was first built quiet, on the
   theory that a number filed reads as evidence where a number shouted reads as
   a claim. That was wrong for this page: filed so quietly nobody saw it. It is
   the strongest thing in the hero after the headline and it is now sized like it.

   The figures count up on arrival. The digits are tabular and each number
   reserves its final width in ch before it starts, so nothing reflows while it
   runs and the layout never shifts — the markup ships the true value, so a
   reader without JavaScript sees the number and not a zero.
   --------------------------------------------------------------------------- */
.hero-proof{margin:24px auto 0;max-width:880px;display:flex;flex-direction:column;
  align-items:center;gap:11px}

/* the gap is a variable so the rule can be placed at the middle of it. It used
   to sit at left:0 of the following column, which is the edge of that column's
   padding box and not the middle of the space — the three figures read as
   unevenly spaced because they were. */
.proof-figs{--pgap:clamp(38px,6.4vw,88px);display:flex;align-items:flex-start;
  justify-content:center;gap:var(--pgap);flex-wrap:wrap}
/* drawn, not typed, so a wrapped row never leaves a separator alone on a line */
.proof-fig{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0}
.proof-fig + .proof-fig::before{content:"";position:absolute;left:calc(var(--pgap) / -2);
  top:2px;bottom:1px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(162,184,230,.32) 30%,rgba(162,184,230,.32) 70%,transparent)}

.proof-n{font-family:var(--mono-ws);font-variant-numeric:tabular-nums;
  font-size:clamp(38px,4.2vw,54px);font-weight:600;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,#7ee7ff 0%,#a9a3ff 52%,#7b4dff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 38px rgba(123,77,255,.22);display:inline-block}
.proof-l{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
  text-align:center;line-height:1.4;white-space:nowrap}

.proof-note{margin:0;font-size:13px;line-height:1.55;color:var(--muted);
  max-width:80ch;text-align:center;text-wrap:balance}

@media (max-width:620px){
  .hero-proof{margin-top:34px;gap:14px}
  .proof-figs{--pgap:0px;gap:10px 0;width:100%}
  .proof-fig{flex:1 1 0;min-width:0;padding:0;gap:5px}
  .proof-fig + .proof-fig::before{top:4px;bottom:10px}
  .proof-n{font-size:clamp(28px,8.6vw,38px)}
  .proof-l{font-size:9.5px;letter-spacing:.1em;white-space:normal;max-width:11ch;
    min-height:2.8em;display:flex;align-items:flex-start;justify-content:center}
  .proof-note{font-size:12.5px}
}
/* a reader who asked for no motion gets the number, not a counter */
@media (prefers-reduced-motion:reduce){.proof-n{transition:none}}

/* ---------------------------------------------------------------------------
   WEBSITE-FOUNDER-LINE-001 — a person, under the proof.

   Every other door in this hero is a form or a waitlist. This one is quieter
   than both on purpose: it is not competing for the click, it is there for the
   reader who would rather not queue — which, at this stage, is usually the one
   worth talking to. It sits under the counts because proof and a name read as
   one thing: here is what we did, and here is who answers for it.
   --------------------------------------------------------------------------- */
.hero-founder{margin:9px auto 0;font-size:13px;line-height:1.55;color:var(--muted);text-align:center}
.hero-founder a{color:var(--soft,#b9bcd0);text-decoration:none;
  border-bottom:1px solid rgba(126,231,255,.32);padding-bottom:1px;
  transition:color .16s ease,border-color .16s ease}
.hero-founder a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.hero-founder a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
@media (max-width:620px){.hero-founder{font-size:12.5px;margin-top:12px}}


/* ---------------------------------------------------------------------------
   WEBSITE-GREETING-HOLD-001 — the caret that says this is being written.

   The opening turn is typed rather than placed, and the scroll is held for as
   long as the first line takes. The block below is what makes the pause legible:
   without a cursor the reader sees a stopped page and some text, and has to
   guess they are related.
   --------------------------------------------------------------------------- */
.ws-body.is-typing > p:last-child::after{content:"";display:inline-block;
  width:2px;height:1em;margin-left:3px;vertical-align:-2px;border-radius:1px;
  background:var(--cyan);box-shadow:0 0 8px rgba(126,231,255,.7);
  animation:ws-type-caret 1.05s step-end infinite}
@keyframes ws-type-caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
/* a reader who asked for no motion never sees this: the whole greeting is
   placed at once on that path, so .is-typing is never added */
@media (prefers-reduced-motion:reduce){
  .ws-body.is-typing > p:last-child::after{display:none}
}


/* ---------------------------------------------------------------------------
   WEBSITE-ORB-PHONE-001 — the sphere gets a phone-sized instrument.

   The diagram is a left-in, right-out orbit: twelve systems on one side, twelve
   kinds of governed work on the other, positioned around a sphere by script. It
   cannot survive a 358px column. Measured on a phone, twenty-five pairs of the
   input labels overlapped each other, and the rule that saved room by setting
   .orb-node{font-size:0} left that side a clump of unreadable icons — the two
   things a reader is supposed to take from it, the systems and what comes back,
   were the two things they could not read.

   So on a phone the same claim is made vertically, which is the axis a phone
   has: what goes in, then the sphere, then what comes out. The orbit needs
   horizontal room to say "these converge"; a column says it with order instead.

   The canvas goes with it. An animated 200px sphere costs a phone real work per
   frame to draw something this size cannot carry, so below the breakpoint the
   core is a still one and the script skips the whole loop.
   --------------------------------------------------------------------------- */
/* transparent above the breakpoint: the labels stay absolutely positioned
   against .orb-labels exactly as before, and these wrappers are not in the way */
.orb-in,.orb-outs{display:contents}

@media (max-width:700px){
  .orb{height:auto;display:flex;flex-direction:column;align-items:center;
    gap:16px;padding:4px 0 2px}
  .orb::before{display:none}
  .orb-canvas{display:none}
  .orb-labels{position:static;display:contents}

  .orb-in{order:1}
  .orb-core{order:2}
  .orb-outs{order:3}
  .orb-in,.orb-outs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:100%}

  /* the script writes transform, opacity and z-index inline every frame while it
     is running; these have to outrank that, and it stops running here anyway */
  .orb-node,.orb-out{position:static;transform:none!important;opacity:1!important;
    z-index:auto!important;max-width:none;white-space:nowrap}
  /* the text comes back — an icon alone was never the point */
  .orb-node{font-size:11px;gap:6px;padding:6px 9px;border-radius:9px}
  .orb-node .orb-mark{width:14px;height:14px}
  .orb-out{font-size:11px;padding:6px 9px;border-radius:9px}

  /* a still sphere, drawn in CSS, where the canvas used to be */
  .orb-core{position:static;transform:none;display:grid;place-items:center;
    width:154px;height:154px;border-radius:50%;flex:none;
    background:radial-gradient(circle,rgba(123,77,255,.3) 0%,rgba(47,212,184,.09) 46%,transparent 72%);
    border:1px solid rgba(162,184,230,.22);
    box-shadow:0 0 54px rgba(123,77,255,.24),inset 0 0 40px rgba(123,77,255,.14)}
  .orb-core-name{font-size:11.5px;letter-spacing:.2em}
  .orb-core-verbs{margin-top:5px;font-size:10px;max-width:15ch;text-wrap:balance;line-height:1.5}
}


/* ---------------------------------------------------------------------------
   WEBSITE-THEON-BRANCHES-001 — no answer is a dead end.

   Every answer offers the questions it opens, as buttons. The reader is never
   handed back an empty composer and asked to invent the next thing to say, and
   the three the greeting starts with are the mouth of a funnel rather than the
   whole of it: each one leads to three more.

   Styled as an offer and not as a toolbar — dashed, quiet, warming on hover —
   because the composer is still the primary way in and these must not compete
   with it.
   --------------------------------------------------------------------------- */
.ws-next{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.ws-nextq{font:inherit;font-size:12.5px;line-height:1.35;text-align:left;cursor:pointer;
  padding:7px 13px;border-radius:999px;max-width:100%;
  color:var(--ui-soft);background:rgba(126,231,255,.045);
  border:1px dashed rgba(126,231,255,.32);
  transition:color .16s ease,border-color .16s ease,background .16s ease}
.ws-nextq:hover{color:var(--ui-text);border-style:solid;
  border-color:rgba(126,231,255,.6);background:rgba(126,231,255,.1)}
.ws-nextq:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (max-width:620px){
  .ws-next{gap:6px;margin-top:11px}
  .ws-nextq{font-size:12px;padding:8px 12px}
}


/* ---------------------------------------------------------------------------
   WEBSITE-MOBILE-KEYBOARD-002 — stop competing with iOS over the keyboard.

   There was machinery here that resized the Workspace to the visible viewport
   while the composer had focus, and then stripped its chrome to make the dock
   fit. Both were mine and both made it worse, in two different ways:

     - at 88% of the visible viewport the window was shorter than its own
       contents and overflow:hidden sliced the composer in half
     - at exactly the visible viewport it fitted, but shrinking a window pulls
       its bottom edge UP, away from the keyboard. iOS then scrolls the focused
       field into view and the reader ends up looking at the space below a window
       that is no longer there

   iOS already solves this: when a field takes focus it scrolls that field into
   view, and a window taller than the visible area is not a problem, because you
   simply see the part of it with the composer in. The fix is to stop competing.

   What remains of the visualViewport work is --ws-kb, and only that: a fixed
   bottom sheet is positioned against the LAYOUT viewport, which the keyboard
   does not shrink, so the sheets genuinely do have to be lifted by hand. That
   part was never the problem.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   WEBSITE-MOBILE-SCROLL-003 — the chat stops trapping the page scroll.

   On a phone the window was a fixed box — min(88dvh,720px), which on a 844px
   screen is 85% of it — with .ws-thread as its own overflow-y:auto scroller
   inside. Empty that is harmless. After three turns the thread holds ~1950px
   of its own scroll, and a touch gesture that BEGINS inside a nested scroller
   never chains to the page: the browser spends the whole gesture on the inner
   scroller, and you have to lift your finger and swipe again, and again, while
   the page underneath barely moves. That is what reads as the chat "trapping"
   the navigation, and no amount of overscroll-behaviour fixes it — chaining
   was already allowed. The nesting itself is the defect.

   So on phones there is no nested scroller. The window grows with the
   conversation and the PAGE scrolls, which means one fling carries you through
   the whole thing with momentum, exactly like any other section. The composer
   keeps the reachability a fixed-height window was buying by sticking to the
   bottom edge for as long as the window is on screen.

   Desktop is untouched: there the window is a real app frame and the inner
   scroller is the point.
   --------------------------------------------------------------------------- */
@media (max-width:620px){
  .ws-win{height:auto;min-height:0;overflow:visible}

  /* flex:none so the thread takes its content's height instead of filling a
     box that no longer has one. The min-height keeps the empty state — the
     greeting, which is what most first visits see — from collapsing to a
     couple of lines. */
  .ws-thread{flex:none;overflow:visible;min-height:340px}

  /* Opaque, and above the turns it slides over.

     bottom is --ws-kb, not 0, for the same reason .ws-menu is: a sticky element
     pins to the SCROLLPORT, which is the layout viewport, and iOS does not
     shrink that for the keyboard — so bottom:0 would park the composer behind
     the keyboard, which is the one place it must never be. --ws-kb is already
     set (on .workspace, which this inherits from) for exactly the moment that
     matters here: while the input holds focus.

     Note this also retires the old failure by construction. The composer used
     to be cut in half when the keyboard came up because the window clipped it;
     with overflow:visible there is nothing left to clip it with. */
  .ws-dock{position:sticky;bottom:var(--ws-kb,0px);z-index:3;
    box-shadow:0 -14px 28px rgba(5,7,13,.55)}
}
@supports (height:100dvh){
  @media (max-width:620px){
    .ws-thread{min-height:42dvh}
  }
}