:root{ --bg:#F4F3EE; --bg-2:#FAF9F5; --card:#FFFFFF; --ink:#17150F; --ink-2:#54524A; --ink-3:#8C8A7F; --line:rgba(23,21,15,.10); --line-2:rgba(23,21,15,.06); --dark:#161510; --dark-2:#201E17; --dark-line:rgba(255,255,255,.12); --on-dark:#F1EFE6; --on-dark-2:#A6A395; --accent:#2C7A4B; --accent-ink:#1E5736; --accent-bright:#54C083; --accent-soft:rgba(44,122,75,.10); --maxw:1180px; --sans:'Inter',system-ui,sans-serif; --display:'Space Grotesk','Inter',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; } *{box-sizing:border-box} html,body{margin:0} /* Column flex + min-height, paired with footer{margin-top:auto}, holds the footer at the bottom of the window on pages shorter than the viewport (the docs index). */ body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:#fff} /* width:100% reads as redundant on a block box and is not: body is a column flex container (above), and a flex item whose cross-axis margins are both auto is NOT stretched to fill. A .wrap placed straight into (the obvious way to build a new page) would shrink to fit-content without this. No effect where .wrap is nested, which is every page today. */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} section{padding:104px 0} h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.02} .eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1.4rem} .dark .eyebrow{color:var(--accent-bright)} .lede{font-size:1.18rem;line-height:1.55;color:var(--ink-2);max-width:34rem} .dark .lede{color:var(--on-dark-2)} /* buttons */ .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.96rem;padding:.72rem 1.25rem;border-radius:7px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease;white-space:nowrap} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-ink)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)} .dark .btn-ghost{color:var(--on-dark);border-color:var(--dark-line)} .dark .btn-ghost:hover{border-color:var(--on-dark)} .arrowlink{font-weight:600;color:var(--accent-ink);display:inline-flex;align-items:center;gap:.35rem} .dark .arrowlink{color:var(--accent-bright)} .arrowlink:hover{gap:.6rem} /* nav */ .nav{position:sticky;top:0;z-index:50;background:rgba(244,243,238,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)} .nav .row{display:flex;align-items:center;justify-content:space-between;height:64px} .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.02em} .brand svg{display:block} .nav .links{display:flex;align-items:center;gap:2rem;font-size:.92rem;color:var(--ink-2)} .nav .links a:hover{color:var(--ink)} .nav .links a.switch{color:var(--accent-ink);font-weight:700;white-space:nowrap} .nav .links a.switch:hover{color:var(--accent)} .nav .cta{display:flex;align-items:center;gap:1.4rem} /* hero */ .hero{padding-top:72px;padding-bottom:88px} .hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .hero h1{font-size:clamp(2.7rem,6.2vw,5rem);font-weight:700;letter-spacing:-.035em} .hero h1 .g{color:var(--accent)} .hero .lede{margin:1.6rem 0 0;font-size:1.28rem;max-width:33rem} .signup{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:2rem;max-width:30rem} .signup input{flex:1 1 15rem;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:7px;padding:.72rem .95rem;font:450 1rem var(--sans);color:var(--ink)} .signup input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .heromicro{margin:.85rem 0 0;font-size:.85rem;color:var(--ink-3)} .heromicro a{color:var(--ink-2);font-weight:600;border-bottom:1px solid var(--line)} /* hero thread motif */ .thread-art{position:relative;width:100%;aspect-ratio:5/4} .thread-art svg{width:100%;height:100%;overflow:visible} .thread-art .path{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round} .thread-art .branch{fill:none;stroke:var(--accent);stroke-width:1.3;opacity:.35;stroke-dasharray:3 4} .thread-art .node{fill:var(--card);stroke:var(--accent);stroke-width:2} .thread-art .node-fill{fill:var(--accent)} .thread-art .nlabel{font-family:var(--mono);font-size:11px;fill:var(--ink-2);letter-spacing:.02em;paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;stroke-linejoin:round} .thread-art .ndim{fill:var(--card);stroke:var(--accent);stroke-width:1.5;opacity:.5} html.js .thread-art .path{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.2s ease forwards .2s} html.js .thread-art .branch{opacity:0;animation:fade 1s ease forwards 1.8s} html.js .thread-art .g-node{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;animation:pop .5s cubic-bezier(.2,.8,.2,1) forwards} html.js .thread-art .nlabel{opacity:0;animation:fade .6s ease forwards} @keyframes draw{to{stroke-dashoffset:0}} @keyframes pop{to{opacity:1;transform:scale(1)}} @keyframes fade{to{opacity:1}} /* provocation (dark) */ .dark{background:var(--dark);color:var(--on-dark)} .provoke h2{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;letter-spacing:-.03em;max-width:18ch} .provoke h2 .mut{color:var(--on-dark-2)} .provoke .lede{margin-top:1.6rem;max-width:40rem} /* triad */ .sechead{max-width:40rem;margin-bottom:64px} .sechead h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:600} .sechead .lede{margin-top:1.1rem} .triad{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)} .triad .item{padding:34px 28px 34px 0;border-right:1px solid var(--line)} .triad .item:last-child{border-right:0;padding-right:0} .triad .num{font-family:var(--mono);font-size:.8rem;color:var(--accent-ink);margin-bottom:1.1rem} .triad h3{font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:.7rem} .triad p{margin:0;color:var(--ink-2);font-size:.98rem} /* decision card showcase */ .showcase{background:var(--bg-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .showcase .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center} .showcase h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:600;max-width:14ch} .showcase .lede{margin-top:1.2rem} .dcard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -28px rgba(23,21,15,.28);overflow:hidden} .dcard .top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line-2);background:var(--bg-2)} .dcard .id{font-family:var(--mono);font-size:.78rem;color:var(--ink-3)} .pill{font-family:var(--mono);font-size:.7rem;padding:.28rem .6rem;border-radius:20px;background:var(--accent-soft);color:var(--accent-ink);font-weight:500} .dcard .body{padding:22px 22px 8px} .dcard .claim{font-family:var(--display);font-size:1.55rem;font-weight:600;letter-spacing:-.02em;line-height:1.1} .dcard .meta{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);margin-top:.5rem} .dcard .meta b{color:var(--accent-ink);font-weight:600} .dcard .field{margin-top:18px} .dcard .flabel{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem} .dcard .ftext{font-size:.92rem;color:var(--ink)} .dcard .ftext.rej{color:var(--ink-2)} .chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem} .chip{font-family:var(--mono);font-size:.72rem;padding:.22rem .55rem;border:1px solid var(--line);border-radius:6px;color:var(--ink-2)} .dcard .links{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-2);margin-top:20px} .dcard .lcol{padding:16px 22px} .dcard .lcol:first-child{border-right:1px solid var(--line-2)} .dcard .lrow{display:flex;gap:.5rem;align-items:baseline;font-size:.82rem;margin:.32rem 0} .dcard .lrow .did{font-family:var(--mono);font-size:.7rem;color:var(--accent-ink);flex:none} .dcard .lrow span{color:var(--ink-2)} .dcard .more{font-size:.78rem;color:var(--ink-3);margin-top:.3rem} /* two audiences */ .aud .cols{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden} .aud .col{padding:40px} .aud .col:first-child{border-right:1px solid var(--line)} .aud .col .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.8rem} .aud .col h3{font-family:var(--display);font-size:1.7rem;font-weight:600;margin:0 0 1.6rem} .aud .pt{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:16px 0;border-top:1px solid var(--line-2)} .aud .pt .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:.55rem} .aud .pt b{font-weight:600;display:block;margin-bottom:.15rem} .aud .pt p{margin:0;color:var(--ink-2);font-size:.95rem} /* how it works (dark) + terminal */ .how .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-bottom:56px} .how .step .n{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--accent-bright);color:var(--accent-bright);display:grid;place-items:center;font-family:var(--mono);font-size:.85rem;margin-bottom:1.2rem} .how .step h3{font-family:var(--display);font-size:1.25rem;font-weight:600;margin-bottom:.5rem} .how .step p{margin:0;color:var(--on-dark-2);font-size:.95rem} .term{background:#100F0B;border:1px solid var(--dark-line);border-radius:12px;font-family:var(--mono);font-size:.84rem;overflow:hidden} .term .bar{display:flex;gap:.45rem;padding:12px 16px;border-bottom:1px solid var(--dark-line)} .term .bar i{width:11px;height:11px;border-radius:50%;background:#3a382f;display:block} .term .body{padding:18px 20px;line-height:1.75;color:var(--on-dark-2);white-space:pre-wrap;overflow-x:auto} .term .body .c{color:#6f6d60} .term .body .p{color:var(--accent-bright)} .term .body .w{color:var(--on-dark)} .term .body .id{color:#cdbb6a} .integ{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem} .integ .lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);margin-right:.6rem} .integ .pill2{font-family:var(--mono);font-size:.78rem;padding:.3rem .7rem;border:1px solid var(--dark-line);border-radius:20px;color:var(--on-dark)} /* trust */ .trust .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .trust h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:600;max-width:16ch} .trust .g{color:var(--accent)} .trust p{color:var(--ink-2);font-size:1.05rem;margin:0} /* closing cta */ .cta-final{text-align:center;background:var(--bg-2);border-top:1px solid var(--line-2)} .cta-final h2{font-size:clamp(2.1rem,4.5vw,3.4rem);font-weight:700;letter-spacing:-.03em} .cta-final .lede{margin:1.1rem auto 0} .cta-final .signup{margin:2rem auto 0;justify-content:center} .cta-final .heromicro{text-align:center} /* leaders cross-link band */ .xlink{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:36px 40px} .xlink-text{max-width:36rem} .xlink-text h3{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;margin:.4rem 0 .5rem} .xlink-text p{margin:0;color:var(--ink-2)} /* footer */ /* Takes up the slack itself rather than the content region growing into it: a taller .docshell would hand the sticky .docsnav room to drift down (see docs.css). */ footer{background:var(--dark);color:var(--on-dark);padding:64px 0 40px;margin-top:auto} footer .row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap} footer .brand{color:var(--on-dark)} footer .tag{color:var(--on-dark-2);margin:1rem 0 0;max-width:22rem;font-size:.95rem} footer .navcols{display:flex;gap:64px;flex-wrap:wrap} footer .navcols h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);margin:0 0 1rem;font-weight:500} footer .navcols a{display:block;color:var(--on-dark);font-size:.92rem;margin:.5rem 0;opacity:.85} footer .navcols a:hover{opacity:1;color:var(--accent-bright)} footer .legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--on-dark-2);font-size:.84rem} /* reveal */ html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease} html.js .reveal.in{opacity:1;transform:none} @media (max-width:900px){ section{padding:72px 0} .hero .grid{grid-template-columns:1fr;gap:8px} .thread-art{max-width:440px;margin-top:8px} .showcase .grid,.trust .grid{grid-template-columns:1fr;gap:36px} .triad{grid-template-columns:1fr} .triad .item{border-right:0;border-bottom:1px solid var(--line);padding:28px 0} .triad .item:last-child{border-bottom:0} .aud .cols{grid-template-columns:1fr} .aud .col:first-child{border-right:0;border-bottom:1px solid var(--line)} .how .steps{grid-template-columns:1fr;gap:28px} .nav .links a:not(.switch){display:none} } @media (max-width:560px){ .dcard .links{grid-template-columns:1fr} .dcard .lcol:first-child{border-right:0;border-bottom:1px solid var(--line-2)} footer .row{flex-direction:column} .nav .brand{font-size:0;gap:0} } @media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1;transform:none;transition:none} html.js .thread-art *{animation:none !important;stroke-dashoffset:0 !important;opacity:1 !important;transform:none !important} }