/* Landing page (/) - the Operational Superintelligence entrance. Ported from the approved design artifact (Norbert and Rich, September 2026) by scripts-side tooling: every selector is scoped under `body.lp` so this sheet can carry its own type scale and component set without touching the 50+ pages that use base.css / components.css / mocks.css. The landing page is the only page with `class="lp"` on . Re-port rather than hand-editing when the design changes. Behaviour lives in assets/js/product.js: the worker console (six scenarios), the deploy stage (Autonomy -> OS -> Both) and the governance toggles. */ body.lp{ --cream:#F8F8F0;--cream-2:#EFEEE6;--paper:#FFFFFF;--black:#000000;--black-2:#161614; --ink:#121212;--ink-2:#64645F;--ink-3:#A3A39C; --line:#E3E3DA;--line-strong:#CFCFC6;--pill:#EFEFE8; --ok-bg:#E4F6DE;--ok-fg:#1E6B3A;--ok:#5CCB7A;--warn-bg:#FCF0D2;--warn-fg:#8A5A00;--warn:#F2B84B;--err-bg:#F6E4DE;--err-fg:#A12F22;--info-bg:#D2E4F0;--info-fg:#24557F; --w60:rgba(255,255,255,.62);--w40:rgba(255,255,255,.4);--w14:rgba(255,255,255,.14); --display:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --xl:clamp(3rem,8vw,7rem);--lg:clamp(2.4rem,5vw,4.4rem);--md:clamp(1.9rem,3.2vw,2.8rem); --container:1240px;--gutter:clamp(1rem,4vw,3rem);--pad:clamp(4.5rem,9vw,8rem); --ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1); } body.lp{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip} body.lp main img{max-width:100%;display:block} body.lp main a{color:inherit} body.lp main p, body.lp main h1, body.lp main h2, body.lp main h3{margin:0} body.lp main .wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)} body.lp main .d{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.98;text-wrap:balance} body.lp main .xl{font-size:var(--xl)}body.lp main .lg{font-size:var(--lg)}body.lp main .md{font-size:var(--md);letter-spacing:-.035em;line-height:1.05} body.lp main .dim{color:var(--ink-3)} body.lp main .dark{background:var(--black);color:#fff} body.lp main .dark .dim{color:var(--w40)} body.lp main .grey{background:var(--cream-2)} body.lp main .sub{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-2);line-height:1.45;max-width:46ch} body.lp main .dark .sub{color:var(--w60)} body.lp main .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} body.lp main .dark .mono{color:var(--w40)} body.lp main .chapter{display:flex;gap:1.25rem;align-items:baseline;margin-bottom:1.25rem} body.lp main .chapter b{font:500 .72rem var(--mono);letter-spacing:.06em;color:var(--ink-3)} body.lp main .dark .chapter b{color:var(--w40)} body.lp main .btn{display:inline-flex;align-items:center;gap:.6rem;font:500 .95rem var(--body);padding:.95rem 1.4rem;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .18s var(--ease)} body.lp main .btn:hover{transform:translateY(-1px)} body.lp main .btn-lg{font-size:1.05rem;padding:1.15rem 1.8rem} body.lp main .btn-b{background:var(--black);color:#fff} body.lp main .btn-o{border-color:var(--line-strong);color:var(--ink)} body.lp main .dark .btn-o{border-color:var(--w14);color:#fff} body.lp main .status{display:inline-block;font-size:.78rem;font-weight:500;padding:.22rem .6rem;border-radius:999px;line-height:1.4} body.lp main .status[data-s="ok"]{background:var(--ok-bg);color:var(--ok-fg)}body.lp main .status[data-s="warn"]{background:var(--warn-bg);color:var(--warn-fg)}body.lp main .status[data-s="err"]{background:var(--err-bg);color:var(--err-fg)}body.lp main .status[data-s="info"]{background:var(--info-bg);color:var(--info-fg)} body.lp main :focus-visible{outline:2px solid currentColor;outline-offset:3px} body.lp main section{padding-block:var(--pad)} body.lp main .head2{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;margin-bottom:3rem} body.lp main .head2 .sub{max-width:34ch;text-align:right} @media (max-width:800px){body.lp main .head2{grid-template-columns:1fr}body.lp main .head2 .sub{text-align:left}} @media (prefers-reduced-motion:reduce){} /* floating world bar (Autonomy | Finmile OS) above every page of both worlds */ @media (max-width:700px){} @media (max-width:420px){} /* nav: the existing site's floating pill, standard for both worlds (Norbert, 17 Sep) */ @media (max-width:1240px){} @media (max-width:1000px){} @media (max-width:600px){} /* hero */ body.lp main .hero{padding-block:clamp(3rem,5.5vw,4.25rem) clamp(3rem,6vw,5rem);position:relative;overflow:hidden} body.lp main .hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:160px 160px;opacity:.55;mask-image:radial-gradient(ellipse at 75% 30%,#000 15%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 75% 30%,#000 15%,transparent 65%)} body.lp main .hero .wrap{position:relative} body.lp main .hero .pre{font-family:var(--display);font-weight:500;letter-spacing:-.03em;font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--ink-3);margin-bottom:.6rem} body.lp main .hero h1{max-width:13ch} body.lp main .hero .row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-top:1.5rem} @media (max-width:800px){body.lp main .hero .row{grid-template-columns:1fr}} body.lp main .hero .actions{display:flex;gap:.75rem;flex-wrap:wrap} body.lp main .hero .live{justify-self:end;display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--ink-2)} body.lp main .hero .live i{width:8px;height:8px;border-radius:50%;background:var(--ok-fg);animation:pulse 1.6s var(--ease-io) infinite} @keyframes pulse{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.1);opacity:1}} @media (max-width:800px){body.lp main .hero .live{justify-self:start}} body.lp main .choose{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem} body.lp main .choose a{position:relative;display:grid;gap:.45rem;padding:1.2rem 1.4rem;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-decoration:none;color:inherit;transition:transform .3s var(--ease)} body.lp main .choose a:hover{transform:translateY(-2px)} body.lp main .choose a.k{background:var(--black);color:#fff;border-color:var(--black)} body.lp main .choose a.k .mono{color:var(--w40)} body.lp main .choose img{height:22px;width:auto;margin:.2rem 0 .3rem} body.lp main .choose b{font:700 1.25rem var(--display);letter-spacing:-.03em} body.lp main .choose a>span:not(.mono){font-size:.9rem;color:var(--ink-2)} body.lp main .choose a.k>span:not(.mono){color:var(--w60)} body.lp main .choose i{position:absolute;right:1.25rem;top:1.05rem;font-style:normal;font-size:1.2rem} @media (max-width:800px){body.lp main .choose{grid-template-columns:1fr}} /* scenario tabs */ body.lp main .scen{display:flex;gap:.35rem;margin-top:3rem;flex-wrap:wrap} body.lp main .scen button{font:500 .8rem var(--body);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.5rem .85rem;cursor:pointer;color:var(--ink-2);display:flex;gap:.5rem;align-items:center;white-space:nowrap} body.lp main .scen button b{font:500 .68rem var(--mono);letter-spacing:.06em;color:var(--ink-3)} body.lp main .scen button[aria-selected="true"]{background:var(--black);color:#fff;border-color:var(--black)} body.lp main .scen button[aria-selected="true"] b{color:var(--w60)} /* console */ body.lp main .wc{margin-top:.75rem;background:var(--black);color:#fff;border-radius:18px;overflow:hidden;font-size:.92rem;display:grid;grid-template-columns:1.15fr .85fr} @media (max-width:900px){body.lp main .wc{grid-template-columns:1fr}} body.lp main .wc-main{padding:1.5rem 1.75rem;display:grid;gap:1.25rem;align-content:start} body.lp main .wc-side{border-left:1px solid var(--w14);padding:1.5rem 1.75rem;display:grid;gap:1.4rem;align-content:start;background:var(--black-2)} @media (max-width:900px){body.lp main .wc-side{border-left:0;border-top:1px solid var(--w14)}} body.lp main .wc-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} body.lp main .wc-ident{display:flex;align-items:center;gap:.7rem;font-weight:500} body.lp main .wc-ident img{height:18px;width:18px} body.lp main .wc-ident .id{color:var(--w40);font-weight:400;font-family:var(--mono);font-size:.78rem} body.lp main .wc-status{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--w60)} body.lp main .wc-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn);animation:pulse 1.6s var(--ease-io) infinite} body.lp main .wc[data-state="resolved"] .wc-status::before{background:var(--ok);animation:none} body.lp main .wc-obj{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.1} body.lp main .wc-obj small{display:block;font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w40);margin-bottom:.5rem} body.lp main .wc-log{list-style:none;margin:0;padding:0;height:calc(9 * 36px);overflow:hidden;position:relative;border-top:1px solid var(--w14)} body.lp main .wc-log::after{content:"";position:absolute;inset:auto 0 0 0;height:48px;background:linear-gradient(to bottom,transparent,var(--black));pointer-events:none} body.lp main .wc-row{display:grid;grid-template-columns:74px 1fr;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--w14);opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)} body.lp main .wc-row.on{opacity:1;transform:none} body.lp main .wc-row time{color:var(--w40);font:400 .78rem var(--mono)} body.lp main .wc-row .tag{display:inline-block;font:500 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.12rem .4rem;border-radius:4px;background:#fff;color:var(--black);margin-right:.5rem;vertical-align:middle} body.lp main .wc-row.dec .tag{background:var(--info-bg);color:var(--info-fg)} body.lp main .wc-result{padding:1rem 1.15rem;background:var(--ok-bg);color:var(--ok-fg);border-radius:12px;font-weight:500;opacity:0;transform:translateY(8px) scale(.98);transition:all .5s var(--ease);display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap} body.lp main .wc-result.on{opacity:1;transform:none} body.lp main .wc-result small{font-weight:400;color:var(--ok-fg);opacity:.8} body.lp main .wc-result button{font:500 .8rem var(--body);background:var(--black);color:#fff;border:0;border-radius:999px;padding:.45rem .85rem;cursor:pointer} body.lp main .wc-ch{display:flex;gap:.5rem;padding:.6rem 0 .9rem;border-top:1px solid var(--w14)} body.lp main .chn{flex:1;display:grid;justify-items:center;gap:.3rem;text-align:center;color:var(--w40);transition:color .3s} body.lp main .chn i{width:40px;height:40px;border-radius:50%;border:1px solid var(--w14);display:grid;place-items:center;color:var(--w40);transition:all .35s var(--ease)} body.lp main .chn i svg{width:18px;height:18px} body.lp main .chn b{font:500 .78rem var(--body);color:inherit} body.lp main .chn small{font:400 .64rem var(--mono);letter-spacing:.04em;color:var(--w40);white-space:nowrap} body.lp main .chn.on{color:#fff} body.lp main .chn.on i{background:#fff;color:var(--black);border-color:#fff} body.lp main .chn.on small{color:var(--w60)} body.lp main .chn.wait i{background:var(--warn);color:var(--black);border-color:var(--warn);animation:chpulse 1.4s var(--ease-io) infinite} body.lp main .chn.ok i{background:var(--ok);color:var(--black);border-color:var(--ok)} @keyframes chpulse{0%,100%{box-shadow:0 0 0 0 rgba(242,184,75,.45)}50%{box-shadow:0 0 0 8px rgba(242,184,75,0)}} body.lp main .wc-dur{font:500 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;background:rgba(30,107,58,.12);color:var(--ok-fg);margin-left:auto} @media (max-width:600px){body.lp main .wc-ch{flex-wrap:wrap}body.lp main .chn{flex:1 1 30%}} body.lp main .kv{display:grid;gap:.9rem;margin:0} body.lp main .kv div{display:grid;gap:.2rem} body.lp main .kv dt{font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w40)} body.lp main .kv dd{margin:0;font-weight:500} body.lp main .loop{display:grid;gap:.4rem;list-style:none;padding:0;margin:0} body.lp main .loop li{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--w60)} body.lp main .loop li::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid #fff;flex:none} body.lp main .loop li.done{color:#fff}body.lp main .loop li.done::before{background:#fff} body.lp main .sys{display:flex;flex-wrap:wrap;gap:.35rem} body.lp main .sys span{font-size:.78rem;padding:.25rem .6rem;border:1px solid var(--w14);border-radius:999px;color:var(--w60);transition:all .3s} body.lp main .sys span.on{background:#fff;color:var(--black);border-color:#fff} /* logo grid */ body.lp main .logos{padding-block:clamp(4rem,8vw,6.5rem)} body.lp main .logogrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line);gap:1px;margin-top:1.25rem} @media (max-width:700px){body.lp main .logogrid{grid-template-columns:repeat(2,1fr)}} body.lp main .logogrid div{background:var(--cream);aspect-ratio:2.4/1;display:grid;place-items:center;font:700 clamp(1rem,1.5vw,1.3rem) var(--display);letter-spacing:-.03em;color:var(--ink-2)} body.lp main .logogrid div:nth-child(3n){background:var(--paper)} /* quote */ body.lp main .quote{padding-block:clamp(5rem,11vw,9rem)} body.lp main .quote p{font-family:var(--display);font-weight:500;letter-spacing:-.035em;line-height:1.08;font-size:clamp(2rem,4.4vw,3.8rem);color:var(--ink-3);max-width:22ch} body.lp main .quote p b{font-weight:500;color:var(--ink)} /* stories */ body.lp main .stories{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} @media (max-width:900px){body.lp main .stories{grid-template-columns:1fr}} body.lp main .story{display:grid;align-content:space-between;gap:3rem;min-height:420px;padding:1.75rem;border-radius:16px;text-decoration:none;position:relative;overflow:hidden;transition:transform .3s var(--ease)} body.lp main .story:hover{transform:translateY(-3px)} body.lp main .story.b{background:var(--black);color:#fff} body.lp main .story.w{background:var(--paper);border:1px solid var(--line)} body.lp main .story .who{font:500 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} body.lp main .story.b .who{color:var(--w40)} body.lp main .story .num{font-family:var(--display);font-weight:800;letter-spacing:-.05em;line-height:.9;font-size:clamp(3.5rem,6vw,5.5rem);font-variant-numeric:tabular-nums} body.lp main .story .num small{display:block;font:500 1.1rem/1.3 var(--body);letter-spacing:-.01em;margin-top:.9rem;color:var(--ink-2)} body.lp main .story.b .num small{color:var(--w60)} body.lp main .story .more{font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid currentColor;justify-self:start;padding-bottom:.15rem} body.lp main .story .bgn{position:absolute;right:-.5rem;bottom:-1.2rem;font-family:var(--display);font-weight:800;font-size:12rem;letter-spacing:-.06em;line-height:1;opacity:.05;pointer-events:none} body.lp main .story .num .pre{display:block;font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .5rem} body.lp main .story.b .num .pre{color:var(--w40)} body.lp main .stats b small{font:600 .42em var(--display);letter-spacing:-.01em;vertical-align:.45em;margin-right:.25em;color:var(--ink-2)} /* flow */ body.lp main .flow{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:3rem} @media (max-width:900px){body.lp main .flow{grid-template-columns:1fr}} body.lp main .flow div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.35rem 1.35rem;min-height:190px;display:grid;align-content:space-between} body.lp main .flow div:last-child{background:var(--black);color:#fff;border-color:var(--black)} body.lp main .flow .n{font:500 .68rem var(--mono);letter-spacing:.08em;color:var(--ink-3)} body.lp main .flow div:last-child .n{color:var(--w40)} body.lp main .flow h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:1.6rem} body.lp main .flow p{font-size:.9rem;color:var(--ink-2);margin-top:.5rem} body.lp main .flow div:last-child p{color:var(--w60)} /* deploy stage */ body.lp main .deploy{padding:0} body.lp main .deploy-track{height:330vh;position:relative} body.lp main .deploy-pin{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--navh,3.4rem));height:calc(100vh - var(--navh,3.4rem) - .5rem);z-index:1;overflow:hidden;background:var(--cream);isolation:isolate} body.lp main .deploy-inner{position:relative;height:100%;display:grid;grid-template-columns:4.5fr 7.5fr;gap:3rem;align-items:center;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)} body.lp main .deploy-bg{position:absolute;inset:0;z-index:0;background:var(--black);clip-path:circle(0% at var(--cx,62%) var(--cy,50%));pointer-events:none} body.lp main .deploy .copy{position:relative;display:grid;gap:1.75rem;color:#fff;mix-blend-mode:difference} body.lp main .deploy .copy .c{opacity:.58;transition:opacity .35s} body.lp main .deploy .copy .c.on{opacity:1} body.lp main .deploy .copy h2{font-size:clamp(1.9rem,3vw,2.7rem)} body.lp main .deploy .copy p{font-size:1rem;color:rgba(255,255,255,.86);max-width:38ch;margin-top:.6rem} body.lp main .deploy .copy .chapter b{color:rgba(255,255,255,.7)} body.lp main .deploy .copy a{color:#fff} body.lp main .deploy .copy a{display:inline-block;margin-top:.7rem;font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.15rem} body.lp main .stage{position:relative;z-index:2;height:min(600px,72vh);isolation:isolate} body.lp main .sysc{position:absolute;width:124px;padding:.7rem .75rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;font-size:.85rem;font-weight:500;text-align:center;transition:all .6s var(--ease-io)} body.lp main .core{position:absolute;left:50%;top:50%;width:220px;padding:1.3rem 1rem;transform:translate(-50%,-50%);background:var(--black);color:#fff;border-radius:14px;text-align:center;transition:all .6s var(--ease-io);display:grid;gap:.45rem;justify-items:center;z-index:3} body.lp main .core img{height:22px;width:auto} body.lp main .core small{font-size:.75rem;color:var(--w60)} body.lp main .osl{position:absolute;left:50%;transform:translateX(-50%);width:min(600px,94%);display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;bottom:9%;opacity:0;transition:all .6s var(--ease-io)} body.lp main .osl .l{background:var(--black-2);border:1px solid var(--w14);color:#fff;border-radius:10px;padding:.9rem .7rem;font:700 1.05rem var(--display);letter-spacing:-.02em;text-align:center;transform:translateY(40px);transition:transform .6s var(--ease-io)} body.lp main .osl .l small{display:block;font:400 .72rem var(--body);letter-spacing:0;color:var(--w60);margin-top:.25rem} body.lp main .threads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} body.lp main .threads path{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 6;opacity:.8;transition:stroke .5s,opacity .5s} body.lp main .bar{position:absolute;left:50%;transform:translateX(-50%) translateY(10px);bottom:-3.5rem;white-space:nowrap;padding:.75rem 1.2rem;font-weight:500;font-size:.95rem;opacity:0;transition:all .5s var(--ease);background:#fff;color:var(--black);border-radius:999px} body.lp main .deploy[data-state="os"] .sysc, body.lp main .deploy[data-state="both"] .sysc{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.28)} body.lp main .deploy[data-state="os"] .sysc{opacity:.5;transform:scale(.92)} body.lp main .deploy[data-state="both"] .sysc{opacity:1;transform:scale(.95)} body.lp main .deploy[data-state="os"] .core, body.lp main .deploy[data-state="both"] .core{top:26%;background:#fff;color:var(--black);width:240px} body.lp main .deploy[data-state="os"] .core small, body.lp main .deploy[data-state="both"] .core small{color:var(--ink-2)} body.lp main .deploy[data-state="os"] .osl, body.lp main .deploy[data-state="both"] .osl{opacity:1} body.lp main .deploy[data-state="os"] .osl .l, body.lp main .deploy[data-state="both"] .osl .l{transform:none} body.lp main .threads .t-both path{opacity:0} body.lp main .deploy[data-state="os"] .threads path{opacity:0} body.lp main .deploy[data-state="both"] .threads .t-across path{opacity:0} body.lp main .deploy[data-state="both"] .threads .t-both path{stroke:var(--w60);opacity:.9} body.lp main .core .lb, body.lp main .core .cap-o, body.lp main .core .cap-b{display:none} body.lp main .deploy[data-state="os"] .core .lw, body.lp main .deploy[data-state="both"] .core .lw, body.lp main .deploy[data-state="os"] .core .cap-a, body.lp main .deploy[data-state="both"] .core .cap-a{display:none} body.lp main .deploy[data-state="os"] .core .lb, body.lp main .deploy[data-state="both"] .core .lb{display:block} body.lp main .deploy[data-state="os"] .core .cap-o{display:block} body.lp main .deploy[data-state="both"] .core .cap-b{display:block} body.lp main .deploy[data-state="both"] .bar{opacity:1;transform:translateX(-50%)} body.lp main .toggle{display:none;gap:.35rem;margin:0 auto;max-width:var(--container);padding-inline:var(--gutter)} body.lp main .toggle button{font:500 .85rem var(--body);border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.5rem 1rem;cursor:pointer} body.lp main .toggle button[aria-selected="true"]{background:var(--black);color:#fff;border-color:var(--black)} @media (max-width:900px){ body.lp main .deploy-track{height:auto}body.lp main .deploy-pin{position:static;height:auto;overflow:visible}body.lp main .deploy-inner{grid-template-columns:1fr;padding-block:var(--pad) 2.5rem}body.lp main .deploy-bg{display:none} body.lp main .deploy{background:var(--cream);transition:background .4s}body.lp main .deploy[data-state="os"], body.lp main .deploy[data-state="both"]{background:var(--black)} body.lp main .deploy .copy .c{opacity:1}body.lp main .stage{height:520px}body.lp main .toggle{display:flex;justify-content:center;flex-wrap:wrap;padding-bottom:var(--pad)} } /* memory */ body.lp main .compound{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:1rem} @media (max-width:900px){body.lp main .compound{grid-template-columns:1fr}} body.lp main .ring{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;width:100%} body.lp main .ring .c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--black);display:grid;place-items:center;text-align:center;font:700 clamp(1rem,1.6vw,1.3rem)/1.15 var(--display);letter-spacing:-.03em;padding:1rem} body.lp main .ring .o{position:absolute;inset:0;border:1px dashed var(--w40);border-radius:50%;animation:spin 60s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} body.lp main .ring .n{position:absolute;padding:.55rem .9rem;border:1px solid var(--w14);border-radius:999px;font-size:.85rem;background:var(--black);white-space:nowrap;transform:translate(-50%,-50%)} body.lp main .ring .n.k{background:#fff;color:var(--black);border-color:#fff;font-weight:500} body.lp main .bigline{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.98;font-size:clamp(2.4rem,5vw,4.4rem)} /* more than intelligence */ body.lp main .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem} @media (max-width:900px){body.lp main .trio{grid-template-columns:1fr}} body.lp main .trio>div{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1.75rem;min-height:230px;display:grid;align-content:start;gap:.7rem} body.lp main .trio .k{background:var(--black);color:#fff;border-color:var(--black)} body.lp main .trio .n{font:500 .68rem var(--mono);letter-spacing:.08em;color:var(--ink-3)} body.lp main .trio .k .n{color:var(--w40)} body.lp main .trio h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:1.4rem;line-height:1.1} body.lp main .trio p{font-size:.95rem;color:var(--ink-2)} body.lp main .trio .k p{color:var(--w60)} /* governance */ body.lp main .plat{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center} @media (max-width:900px){body.lp main .plat{grid-template-columns:1fr}} body.lp main .gov{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:.9rem} body.lp main .gov .h{padding:1rem 1.25rem;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--ink-2)} body.lp main .gov .h b{color:var(--ink);font-weight:500} body.lp main .gov .r{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--line)} body.lp main .gov .r:last-of-type{border-bottom:0} body.lp main .gov .r small{display:block;color:var(--ink-3);font-size:.78rem} body.lp main .sw{width:34px;height:20px;border-radius:999px;background:var(--black);position:relative;flex:none} body.lp main .sw::after{content:"";position:absolute;top:3px;left:17px;width:14px;height:14px;border-radius:50%;background:#fff} body.lp main .sw.half{background:var(--warn)} body.lp main .sw.off{background:var(--line-strong)}body.lp main .sw.off::after{left:3px} body.lp main .gov .f{padding:1rem 1.25rem;background:var(--black);color:#fff;font-size:.9rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} body.lp main .gov .f span{color:var(--w60)} body.lp main .plat ul{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--line)} body.lp main .plat li{padding:1.1rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:1rem;font-size:.95rem;color:var(--ink-2)} body.lp main .plat li b{font-weight:500;color:var(--ink)} @media (max-width:560px){body.lp main .plat li{grid-template-columns:1fr;gap:.2rem}} /* workers */ body.lp main .workers{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem} @media (max-width:900px){body.lp main .workers{grid-template-columns:1fr 1fr}} @media (max-width:560px){body.lp main .workers{grid-template-columns:1fr}} body.lp main .worker{background:var(--black-2);border:1px solid var(--w14);border-radius:16px;padding:1.6rem 1.5rem;display:grid;gap:1.25rem;align-content:start;min-height:260px} body.lp main .worker .t{font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w40)} body.lp main .worker h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:1.45rem} body.lp main .worker h3 small{display:block;font:400 .95rem/1.4 var(--body);letter-spacing:0;color:var(--w60);margin-top:.35rem} body.lp main .worker .meta{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:1px solid var(--w14);padding-top:1rem;font-size:.8rem;color:var(--w60)} body.lp main .worker .meta b{display:block;font:500 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w40);margin-bottom:.3rem} body.lp main .indrow{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem} body.lp main .indrow a{font-size:.9rem;padding:.55rem 1rem;border:1px solid var(--w14);border-radius:999px;text-decoration:none;color:var(--w60)} body.lp main .indrow a b{font:500 .66rem var(--mono);color:var(--w40);margin-right:.5rem} /* stats */ body.lp main .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden} @media (max-width:800px){body.lp main .stats{grid-template-columns:1fr 1fr}} body.lp main .stats div{background:var(--cream-2);padding:2rem 1.75rem} body.lp main .stats b{display:block;font:800 clamp(2.6rem,4.8vw,4.2rem)/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums} body.lp main .stats span{display:block;margin-top:.75rem;font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} /* founder */ body.lp main .founder{padding-block:clamp(4rem,8vw,6rem)} body.lp main .founder .split{display:grid;grid-template-columns:1fr 2fr 1fr;gap:3rem;align-items:start} @media (max-width:900px){body.lp main .founder .split{grid-template-columns:1fr}} body.lp main .founder q{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.1;font-size:clamp(1.6rem,2.8vw,2.4rem);quotes:"\201C" "\201D"} body.lp main .founder p{font-size:.95rem;color:var(--ink-2)} /* final */ body.lp main .final{text-align:center} body.lp main .final .d{margin:0 auto} body.lp main .choice{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem auto 0;max-width:980px;text-align:left} @media (max-width:760px){body.lp main .choice{grid-template-columns:1fr}} body.lp main .choice a{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1.75rem;text-decoration:none;display:grid;gap:.6rem;min-height:220px;align-content:start;transition:transform .3s var(--ease)} body.lp main .choice a.k{background:var(--black);color:#fff;border-color:var(--black)} body.lp main .choice a:hover{transform:translateY(-3px)} body.lp main .choice .mono{margin-bottom:.4rem} body.lp main .choice a.k .mono{color:var(--w40)} body.lp main .choice img{height:22px;width:auto;margin-bottom:.5rem} body.lp main .choice h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:1.6rem} body.lp main .choice p{color:var(--ink-2);font-size:.95rem} body.lp main .choice a.k p{color:var(--w60)} body.lp main .final .actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:3rem} @media (max-width:900px){} /* ---------- site integration (added by the port, not in the artifact) ---------- The artifact's navigation sat in the normal flow. On the site the nav pill is position: fixed under the world bar, so the first section has to clear it: world bar 42px (already body padding) + pill 14px offset + 64px pill. The sticky deploy panel needs the same offset so it parks under the pill, not behind it. */ body.lp main .hero { padding-top: clamp(7rem, 9vw, 8.5rem); } /* Desktop only. Unscoped, this fixed height also applied on phones, where the stage is static and taller than the viewport: the container stayed 100vh, the stage overflowed it, and the deployment toggle underneath ended up UNDER the system cards, so a finger could not reach it (reported 21 Sep 2026). */ @media (min-width: 901px) { body.lp main .deploy-pin { top: calc(var(--worldbar) + 5rem); height: calc(100vh - var(--worldbar) - 5.5rem); } } @media (max-width: 1023px) { body.lp main .hero { padding-top: clamp(5.5rem, 12vw, 7rem); } } /* A few class names exist in BOTH the artifact and the v3 kit in components.css. Where the kit sets a property the artifact's own rule does not, the kit still wins and the layout doubles up: `.founder` is a grid in the kit, but on this page `.founder` is the section and the grid belongs to its `.wrap.split` child, so the section was turning into a second three-column grid. Reset the ones the landing page owns. */ body.lp main .founder { display: block; } /* ---------- phone pass (added by the port, 21 Sep 2026) ---------------------- The artifact was designed at desktop width and its type scale only has vw in the middle of each clamp, so on a 390px screen every headline sat at the clamp FLOOR: --xl bottomed out at 3rem, which put "Superintelligence" edge to edge with about five pixels of gutter left. The floors are what needed lowering, not the ceilings, so the desktop composition is untouched. */ @media (max-width: 600px) { body.lp { --xl: clamp(2.25rem, 9.5vw, 3rem); --lg: clamp(1.9rem, 7.5vw, 2.4rem); --md: clamp(1.45rem, 5.6vw, 1.9rem); --gutter: 1.25rem; } body.lp main .hero .pre { font-size: clamp(1.05rem, 4.6vw, 1.3rem); } body.lp main .quote p { font-size: clamp(1.6rem, 7vw, 2rem); } body.lp main .bigline { font-size: clamp(1.9rem, 8vw, 2.4rem); } body.lp main .story .num { font-size: clamp(2.6rem, 12vw, 3.5rem); } body.lp main .stats b { font-size: clamp(2rem, 9vw, 2.6rem); } body.lp main .wc-obj { font-size: clamp(1.15rem, 5vw, 1.4rem); } body.lp main .deploy .copy h2 { font-size: clamp(1.6rem, 6.5vw, 1.9rem); } /* The five loop steps are a fixed 190px tall with their label and their text pushed to opposite ends. In one column that reads as five nearly empty black boxes, so on a phone the step becomes an ordinary block that is as tall as its own words. */ body.lp main .flow div { min-height: 0; align-content: start; gap: .5rem; padding: 1.15rem 1.15rem 1.25rem; } /* Same shape of problem in every other card that was built for a three-up row: a fixed minimum height with the content pushed to both ends. Stacked one per screen they became tall boxes with a hole in the middle, which is what made the page feel unfinished on a phone. Each card is now as tall as what it holds. */ body.lp main .story { min-height: 0; align-content: start; gap: 1.25rem; } body.lp main .trio > div, body.lp main .worker, body.lp main .choice a { min-height: 0; } body.lp main .story .bgn { font-size: 7rem; } /* The console log reserves nine desktop rows so nothing shifts as entries arrive (the CLS rule in knowledge/ERRORS.md). On a phone the rows wrap to two lines and only four fit, so that reservation showed as a black void for the first seconds of the run. Five rows of wrapped height reserves the same way without the hole; the log already scrolls itself as later entries land. */ body.lp main .wc-log { height: calc(5 * 48px); } } /* Three pieces of the artifact place their children with absolute percentages inside a fixed-height box. That composition cannot survive a 390px screen: the pieces landed on top of each other and on the section below, and because each section carries overflow: hidden, nothing ever widened the page, so an overflow check saw a clean page while the phone showed a mess (reported 21 Sep 2026). Below 900px each one becomes an ordinary stacked layout instead. */ @media (max-width: 900px) { /* The deploy stage: eight system cards pinned around a core, with drawn threads. */ body.lp main .stage { height: auto !important; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-content: start; position: static; } body.lp main .deploy-track, body.lp main .deploy-pin, body.lp main .deploy-inner { height: auto; } body.lp main .toggle { position: relative; z-index: 3; margin-top: 1.5rem; } /* On desktop the three copy blocks sit in one column and the scroll position says which one is live. A phone has no scrub, so all three read at once and the toggle appears to do nothing. Here the section is an ordinary tabbed block: one copy block, the cards for that state, nothing reserved for what is hidden. */ /* The copy is white text with mix-blend-mode: difference, which only makes sense over the desktop ink circle. On a phone it blended the heading into the cream ground and the whole block read as a ghost. Here the colour just follows the state. */ body.lp main .deploy .copy { mix-blend-mode: normal; color: var(--ink); } body.lp main .deploy .copy p { color: var(--ink-2); } body.lp main .deploy .copy a, body.lp main .deploy .copy .chapter b { color: var(--ink); } body.lp main .deploy[data-state="os"] .copy, body.lp main .deploy[data-state="both"] .copy { color: #fff; } body.lp main .deploy[data-state="os"] .copy p, body.lp main .deploy[data-state="both"] .copy p { color: rgba(255,255,255,.86); } body.lp main .deploy[data-state="os"] .copy a, body.lp main .deploy[data-state="both"] .copy a, body.lp main .deploy[data-state="os"] .copy .chapter b, body.lp main .deploy[data-state="both"] .copy .chapter b { color: #fff; } body.lp main .deploy .copy .c { display: none; opacity: 1; } body.lp main .deploy[data-state="autonomy"] .copy .c[data-for="autonomy"], body.lp main .deploy[data-state="os"] .copy .c[data-for="os"], body.lp main .deploy[data-state="both"] .copy .c[data-for="both"] { display: block; } body.lp main .deploy .copy .chapter { display: block; } /* the OS layer only exists in two of the three states, so it must not hold space in the third: that empty band was most of the dead space under the cards */ body.lp main .stage .osl { position: static; transform: none; width: auto; display: none; grid-template-columns: 1fr 1fr; gap: .6rem; grid-column: 1 / -1; } body.lp main .deploy[data-state="os"] .stage .osl, body.lp main .deploy[data-state="both"] .stage .osl { display: grid; } body.lp main .osl .l { transform: none; } body.lp main .deploy[data-state="os"] .sysc { display: none; } /* the stack itself */ /* The pinned panel paints cream as its own base, which on a phone covered the section's black state and left white card text on a cream ground: the systems were invisible in two of the three states. */ body.lp main .deploy-pin { background: transparent; } /* full-width bar rather than a pill: wrapped onto three lines, the 999px radius made it read as a lopsided oval */ body.lp main .deploy .bar { position: static; transform: none !important; opacity: 1; white-space: normal; text-align: center; margin: 1.1rem 0 0; width: auto; display: none; border-radius: 14px; padding: 1rem 1.1rem; } body.lp main .deploy[data-state="both"] .bar { display: block; } /* The toggle sits on the section, which is black in two of the three states, so the selected pill was black on black and the current choice was invisible. */ body.lp main .toggle { gap: .4rem; } body.lp main .toggle button { font-size: .8rem; padding: .5rem .85rem; } body.lp main .deploy[data-state="os"] .toggle button, body.lp main .deploy[data-state="both"] .toggle button { background: transparent; color: #fff; border-color: var(--w40); } body.lp main .deploy[data-state="os"] .toggle button[aria-selected="true"], body.lp main .deploy[data-state="both"] .toggle button[aria-selected="true"] { background: #fff; color: var(--black); border-color: #fff; } body.lp main .stage .threads { display: none; } body.lp main .sysc { position: static; width: auto; transform: none !important; } body.lp main .stage .core { position: static; grid-column: 1 / -1; order: -1; width: auto; transform: none; display: grid; justify-items: center; gap: .35rem; padding: 1.1rem; } body.lp main .stage .osl .l { position: static; width: auto; transform: none; } /* The Operational Memory ring: six labels placed on a circle, which at this width hung off both edges of the screen. */ body.lp main .ring { aspect-ratio: auto; max-width: none; display: grid; gap: .5rem; justify-items: stretch; } body.lp main .ring .o { display: none; } body.lp main .ring .c { position: static; width: auto; aspect-ratio: auto; border-radius: 16px; transform: none; padding: 1.1rem; margin-bottom: .25rem; } /* Stacked, the six labels became six identical pills and the loop disappeared. The hub keeps its weight and the steps are numbered, so the sequence still reads. (The ring is aria-hidden, so generated numbers add nothing for a screen reader.) */ body.lp main .ring { counter-reset: ring; } body.lp main .ring .c { font-size: 1.15rem; padding: 1.35rem 1.1rem; } body.lp main .ring .n { position: static; transform: none; white-space: normal; display: grid; grid-template-columns: 2.1rem 1fr; align-items: center; text-align: left; padding: .7rem 1rem; border-radius: 12px; } body.lp main .ring .n::before { counter-increment: ring; content: counter(ring, decimal-leading-zero); font: 500 .68rem var(--mono); letter-spacing: .06em; color: var(--w40); } body.lp main .ring .n.k::before { color: var(--ink-3); } } @media (max-width: 600px) { /* keep the phone block open for anything added later */ body.lp main .stage { grid-template-columns: 1fr 1fr; } /* short words, two per row */ body.lp main .stage .osl { grid-template-columns: 1fr 1fr; } /* Six scenario pills wrapped into six rows and pushed the console most of a screen down the page. One swipeable row keeps the console where the eye lands. */ body.lp main .scen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: x proximity; overscroll-behavior-x: contain; } body.lp main .scen::-webkit-scrollbar { display: none; } body.lp main .scen button { scroll-snap-align: start; flex: none; } /* Long words in display type had nowhere to break at this size. */ body.lp main .d { overflow-wrap: break-word; } } /* Every section the nav links to sits under a fixed pill, so an anchor jump used to land with the heading hidden behind it. */ body.lp main section[id] { scroll-margin-top: calc(var(--worldbar) + 5.5rem); }