/* The homepage stylesheet. Lifted out of web/index.html on 2026-08-26 and NOT an optimisation for its own sake: inline, it pushed to 28KB and put the

at byte 30,814, so an agent that reads only the first chunk of the document saw a head and no content at all. An agent-readiness audit reported the page as having no H1 for exactly that reason. Keep it external. The page already loads /theme-light.css and /demo/demo.css the same way, so this costs no extra round trip on the same connection. */ @font-face{font-family:"Fraunces";src:url("/fonts/Fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} :root{ --bg:#0a0c10; --panel:#13181f; --panel-2:#171d26; --line:#222a35; --ink:#e8ecf2; --muted:#98a3b3; --mint:#39aaaa; --amber:#aa3939; --red:#ff6b6b; --radius:14px; --max:1080px; --ease:cubic-bezier(.16,1,.3,1); --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; } .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.6; cursor: not-allowed; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .mint{color:var(--mint)} .amber{color:var(--amber)} .muted{color:var(--muted)} .mono{font-family:var(--mono)} /* nav */ nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(10,12,16,.7);border-bottom:1px solid var(--line)} nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px} .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em} .brand .dot{width:11px;height:11px;border-radius:3px;background:var(--mint);box-shadow:0 0 12px var(--mint)} .brand small{color:var(--muted);font-weight:500} .nav-links{display:flex;gap:26px;align-items:center} .nav-links a{color:var(--muted);text-decoration:none;font-size:15px} .nav-links a:hover{color:var(--ink)} @media(max-width:760px){.nav-links a:not(.btn){display:none}} /* THE CTA MUST NEVER BE THE THING THAT GETS SQUEEZED OUT, and at 390px it was: "Start free" sat half off the right edge while the brand wrapped onto two lines. `.brand` is a flex item and so defaults to `min-width:auto`, which refuses to shrink below its own content no matter what the container wants. Same trap that has now bitten this project four times. The parent-company attribution is the part that gives way, because it is the widest and the least load-bearing here: it is still in the footer (`.ft-by`) and still in the Organization JSON-LD, so nothing about the InferHaven relationship is lost by dropping it on a phone. Mirrored in the inline nav styles in `web/solo.html`, which carries its own copy of this block. */ @media(max-width:560px){ nav .wrap{gap:10px} .brand{min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden} /* The mark is a flex item too, so `min-width:0` on the parent let it shrink to nothing and the logo vanished at 360px while the wordmark stayed. Only the TEXT may give way. */ .brand svg{flex:0 0 auto} .brand small{display:none} .nav-links{flex:0 0 auto;gap:14px} } /* Below this the BETA pill is what stops fitting, and `overflow:hidden` on .brand was slicing it down the middle, which reads as a broken element rather than a tight one. It survives at 390 (the common phone width), so the cut-off is here and not in the block above. */ @media(max-width:380px){ .brand .beta{display:none} /* Buy the last ~25px from the CTA's own padding and the page gutter rather than from the wordmark, which `overflow:hidden` was otherwise clipping to "CodeTra" at 320. */ nav .wrap{padding:0 16px} .nav-links .btn{padding:9px 13px;font-size:14px} } .beta{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mint);border:1px solid var(--mint);border-radius:999px;padding:1px 7px;vertical-align:middle} /* beta banner */ .beta-bar{background:var(--panel-2);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)} .beta-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 24px} .beta-bar a{color:var(--mint)} .beta-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:4px;flex:0 0 auto} .beta-x:hover{color:var(--ink)} .btn{display:inline-block;border-radius:10px;padding:11px 18px;font-weight:600;text-decoration:none;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .16s var(--ease),filter .16s,box-shadow .16s,border-color .16s,color .16s} .btn-primary{background:var(--mint);color:#04181a;border-color:var(--mint);font-weight:700;box-shadow:0 6px 16px -9px rgba(57,170,170,.8)} .btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(57,170,170,.9)} /* background is load-bearing on