/* OpenBrain: a curious brain, a calm workspace. */
:root{color-scheme:dark;--ink:#F8FAFF;--muted:#AFB3BE;--paper:#111113;--white:#1B1B1E;--surface:#222226;--soft:#18181B;--section:#171719;--line:#37373D;--blue:#6EA9FF;--aqua:#2CD5EC;--action:#3987F9;--on-action:#0B1020;--action-hover:#67A3FA;--focus:#2CD5EC;--header:rgb(17 17 19 / .96);--device-frame:#3A3A42;--warning-bg:#30271A;--warning-text:#F4C26B;--serif:'Fraunces',Georgia,serif;--sans:'DM Sans',system-ui,-apple-system,sans-serif;--hand:'Caveat',cursive}
:root[data-theme="light"]{color-scheme:light;--ink:#20232B;--muted:#5B6270;--paper:#FAFAFB;--white:#FFFFFF;--surface:#F0F1F4;--soft:#F2F3F5;--section:#ECEEF2;--line:#D7DBE2;--blue:#1D5CAF;--aqua:#067C8E;--action:#1D5CAF;--on-action:#F8FAFF;--action-hover:#144B91;--focus:#146A9A;--header:rgb(250 250 251 / .96);--device-frame:#34343B;--warning-bg:#FFF3DF;--warning-text:#765017}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;vertical-align:middle}
img{height:auto}
button,input{font:inherit}
button{cursor:pointer}
h1,h2,h3,h4,h5,p{margin:0}
h1,h2,h3,h4,h5{line-height:1.1;letter-spacing:-.045em}
h1{font-size:clamp(46px,5.3vw,78px);font-weight:600;line-height:1.08}
h2{font-size:clamp(35px,3.5vw,51px);font-weight:500}
h3{font-size:25px;font-weight:600}
h1 em,h2 em{font-family:var(--serif);font-weight:400}
p{color:var(--muted)}
p+p{margin-top:18px}
.shell{width:min(1240px,calc(100% - 96px));margin-inline:auto}
.section-space{padding-block:108px}
.compact-top{padding-top:24px}
.icon{display:inline-block;width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--blue);margin-bottom:22px}
.eyebrow.light{color:var(--muted)}
.card-kicker{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid transparent;border-radius:100px;min-height:52px;padding:12px 23px;font-size:13px;font-weight:700;transition:background .15s,transform .15s}
.button:hover{transform:translateY(-2px)}
.button-dark{background:var(--ink);color:var(--ink)}
.button-dark:hover{background:var(--white)}
.button-outline{border-color:var(--line);background:transparent}
.button-outline:hover{background:var(--white)}
.button-white{background:var(--white);color:var(--ink)}
.button-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.text-link{display:inline-flex;align-items:center;gap:18px;padding-block:10px;border-bottom:1px solid var(--ink);font-size:14px;font-weight:700}
.handwritten{font-family:var(--hand);font-size:29px;line-height:1.1}
.soft-band{background:var(--white)}
.section-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:end;margin-bottom:45px}
.section-heading>p{max-width:450px;font-size:17px}
.section-heading>p:empty{display:none}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.detail-grid h2{margin-bottom:27px}
.detail-grid p{max-width:510px}
.skip-link{position:fixed;z-index:999;left:16px;top:-100px;background:var(--white);border:2px solid var(--blue);padding:12px}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}

/* Navigation */
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:var(--header);backdrop-filter:blur(18px)}
.header-inner{height:86px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:23px;font-weight:800;letter-spacing:-.06em}
.brand img{width:48px;height:40px;object-fit:contain}
.desktop-nav{display:flex;align-items:center;gap:26px}
.desktop-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;font-weight:600;color:var(--muted)}
.desktop-nav a[aria-current],.desktop-nav a:hover{color:var(--ink)}
.desktop-nav a[aria-current]{text-decoration:underline;text-underline-offset:7px}
.header-actions{display:flex;align-items:center;gap:12px}
.app-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:12px;font-weight:700}
.app-link .icon{width:17px}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;align-items:center;justify-content:center;color:var(--ink)}
.mobile-nav[hidden]{display:none}
.mobile-nav{display:grid;padding-block:15px}
.mobile-nav a{padding:10px 0;font-size:14px;border-bottom:1px solid var(--line)}

/* Official client marks stay intact, with room to breathe. */
.agent-compatibility{background:var(--white);border-bottom:1px solid var(--line)}
.agent-compatibility .section-space{padding-block:76px}
.agent-compatibility-heading{grid-template-columns:1fr 1fr;gap:70px;margin-bottom:34px}
.agent-compatibility-heading h2{font-size:clamp(34px,3.2vw,46px)}
.agent-compatibility-heading .eyebrow{margin-bottom:15px}
.agent-compatibility-heading>p{font-size:15px;max-width:440px}
.agent-client-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.agent-client{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:15px;padding:24px 13px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:border-color .15s,box-shadow .15s}
.agent-client:hover{border-color:var(--line);box-shadow:0 8px 24px #243b5b0b}
.agent-logo{display:flex;align-items:center;justify-content:center;width:100%;height:58px;margin-bottom:19px}
.agent-logo img{display:block;width:132px;height:52px;object-fit:contain}
.agent-client-openclaw .agent-logo img,.agent-client-hermes .agent-logo img,.agent-client-gemini .agent-logo img{width:52px;height:52px}
.agent-client h3{font-size:15px;letter-spacing:-.025em;line-height:1.3;font-weight:700;margin-bottom:12px}
.agent-client-status{display:inline-flex;align-items:center;gap:5px;border-radius:100px;padding:5px 8px;font-size:11px;line-height:1.4;white-space:nowrap}
.agent-client-status .icon{width:12px;height:12px;stroke-width:2}
.agent-client-status.verified{background:var(--white);color:var(--muted)}
.agent-client-status.compatible{background:var(--white);color:var(--muted)}
.agent-compatibility-details{display:grid;grid-template-columns:1.7fr 1fr;align-items:start;gap:45px;margin-top:27px}
.agent-compatibility-details p{font-size:12px;line-height:1.8;max-width:760px}
.agent-compatibility-details strong{font-weight:600;color:var(--muted)}
.agent-compatibility-details .text-link{justify-self:end;font-size:12px;gap:12px;min-height:44px;white-space:nowrap}
.agent-compatibility-details .text-link .icon{width:17px}
.agent-brand-note{font-size:12px;margin-top:19px;color:var(--muted)}

/* Hero: long headline is intentional; mascot gets its own space. */
.hero{padding:72px 0 77px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.14fr 1fr;gap:34px;align-items:center}
.hero-copy{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:25px}
.hero-description{max-width:480px;font-size:17px;line-height:1.7;margin-top:27px}
.hero .button-row{margin-top:28px}
.access-note{font-size:11px!important;margin-top:20px!important;display:flex;gap:8px;align-items:center}
.access-note>span,.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--white);flex-shrink:0}
.hero-visual{position:relative;padding:20px 14px 75px;min-width:0}
.hero-visual>img{position:relative;width:100%;height:auto;filter:drop-shadow(0 20px 22px #2e3f7520);transform:rotate(-4deg)}
.hero-scribble{position:absolute;right:2%;bottom:0;transform:rotate(-5deg);color:var(--muted)}
.product-strip{border-block:1px solid var(--line)}
.strip-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:75px}
.strip-inner span{font-size:12px;font-weight:600;color:var(--muted)}
.strip-inner span:first-child{font-size:10px;letter-spacing:.09em;color:var(--ink);max-width:400px}
.page-hero{padding-block:84px 55px}
.page-hero h1{max-width:900px;font-size:clamp(47px,6vw,82px)}
.page-hero>p{max-width:660px;margin-top:26px;font-size:19px}

/* Calm, synthetic notes-first project preview. */
.workspace-preview{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:15px;box-shadow:0 25px 70px #1a2b4e17;overflow:hidden}
.preview-window{padding:11px 20px;display:flex;align-items:center;gap:22px;font-size:10px;color:var(--muted);background:var(--white);border-bottom:1px solid var(--line)}
.window-dots{letter-spacing:3px;color:var(--muted);font-size:8px}
.preview-label{margin-left:auto;font-size:8px;letter-spacing:.11em}
.preview-layout{display:grid;grid-template-columns:175px 1fr}
.preview-sidebar{padding:25px 14px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);background:var(--white)}
.preview-sidebar>span{padding:8px 9px;font-size:11px;color:var(--muted);border-radius:5px}
.preview-brand{font-size:14px;font-weight:700;margin-bottom:21px}
.preview-sidebar .preview-new{display:flex;justify-content:space-between;border:1px solid var(--line);color:var(--ink);margin-bottom:13px}
.preview-new span{font-size:10px;color:var(--muted)}
.preview-sidebar .selected{color:var(--ink)}
.preview-sidebar small{font-size:8px;color:var(--muted);letter-spacing:.1em;margin:22px 9px 7px}
.preview-sidebar .pinned{background:var(--white);color:var(--ink)}
.preview-main{padding:29px 34px 33px;min-width:0}
.preview-title{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.project-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:var(--white);color:var(--muted);font-size:22px}
.preview-title .card-kicker{color:var(--muted);font-size:8px;margin-bottom:5px}
.preview-title h3{font-size:25px;letter-spacing:-.03em}
.save-state{margin-left:auto;font-size:9px;color:var(--muted)}
.preview-tabs{display:flex;gap:21px;border-bottom:1px solid var(--line);padding-bottom:12px;font-size:10px;color:var(--muted);white-space:nowrap}
.preview-tabs .active{color:var(--ink)}
.preview-about{padding:23px 0 27px;max-width:570px}
.preview-about>small{font-size:8px;color:var(--muted);letter-spacing:.1em}
.preview-about h4{font-size:21px;margin:15px 0 11px;font-weight:500;letter-spacing:-.02em}
.preview-about p{font-size:11px;color:var(--muted);line-height:1.8}
.preview-reference{font-size:10px;display:flex;align-items:center;gap:8px;color:var(--muted);margin-top:15px}
.preview-reference .icon{width:14px;height:14px}
.preview-reference>span{margin-left:10px}
.preview-task-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.preview-task-heading strong{font-size:11px;font-weight:500}
.preview-task-heading>span{font-size:9px;color:var(--muted)}
.preview-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.preview-board>div{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:11px;min-height:165px}
.preview-board h5{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:500;letter-spacing:0;color:var(--muted);margin-bottom:13px}
.preview-board h5>span{color:var(--muted);margin-left:3px}
.preview-board i{width:5px;height:5px;border-radius:50%;background:var(--white)}
.preview-board .amber{background:var(--white)}
.preview-board .lavender{background:var(--white)}
.preview-task{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:10px 9px;font-size:10px;line-height:1.5;margin-top:7px}
.preview-task small{display:block;font-size:8px;color:var(--muted);margin-top:8px}
.preview-task.done{color:var(--muted)}
.preview-caption{display:flex;justify-content:space-between;gap:20px;margin-top:17px;font-size:10px;color:var(--muted)}
.preview-caption a{font-size:12px;font-weight:700;color:var(--ink)}

/* Features and workflow */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{background:var(--white);border:1px solid var(--line);border-radius:15px;padding:29px 27px 31px}
.feature-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--white);color:var(--muted);margin-bottom:24px}
.feature-card:nth-child(3n+2) .feature-icon{background:var(--white);color:var(--muted)}
.feature-card:nth-child(3n) .feature-icon{background:var(--white);color:var(--muted)}
.feature-card .card-kicker{margin-bottom:10px;font-size:9px}
.feature-card h3{font-size:23px;line-height:1.15;max-width:260px;margin-bottom:15px}
.feature-card p{font-size:13px;line-height:1.85}
.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.step-number{display:block;font-size:19px;font-family:var(--serif);color:var(--blue);padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:25px}
.workflow-grid h3{font-size:26px;line-height:1.2;margin-bottom:17px}
.workflow-grid p{font-size:14px}
.agent-band{background:var(--white);color:var(--white)}
.agent-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.agent-band h2{margin-bottom:25px}
.agent-band p{color:var(--muted);font-size:15px}
.agent-band .button{margin-top:27px}
.context-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:32px}
.context-card .card-kicker{color:var(--muted);margin-bottom:30px;font-size:9px}
.context-clients{display:flex;justify-content:space-between;gap:16px;font-size:9px;color:var(--ink);padding-bottom:26px;border-bottom:1px dashed var(--line)}
.context-core{text-align:center;padding:28px 0;font-size:29px;color:var(--muted)}
.context-core strong{font-size:30px;letter-spacing:-.06em;color:var(--ink);vertical-align:middle}
.context-core small{display:block;font-size:10px;letter-spacing:0;color:var(--muted);margin-top:7px}
.context-bottom{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:22px}
.context-bottom>span{font-size:9px;border:1px solid var(--line);padding:5px 8px;border-radius:6px}
.context-card>p{font-size:10px;text-align:center;margin-top:18px}
.tech-pills{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.tech-pills>span{display:block;border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:11px;color:var(--muted)}
.architecture-teaser .text-link{margin-top:8px}
.faq-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:100px}
.faq-list details{border-top:1px solid var(--line);padding:18px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:25px;align-items:center;font-size:14px;font-weight:600;min-height:32px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';font-size:22px;color:var(--blue);font-weight:400}
.faq-list details[open] summary::after{content:'−'}
.faq-list p{font-size:13px;margin:16px 25px 4px 0;line-height:1.9}
.final-cta{background:var(--white);color:var(--ink);overflow:hidden}
.cta-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:center;padding-block:80px}
.cta-layout h2{font-size:clamp(39px,4vw,61px)}
.cta-layout p{max-width:500px;color:var(--muted);margin-top:22px;font-size:15px}
.cta-layout>img{width:300px;justify-self:center;transform:rotate(8deg)}
.existing-link{font-size:12px;display:inline-flex;min-height:44px;align-items:center;margin-left:8px;color:var(--ink)}

/* Product details */
.structure-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:35px}
.structure-card>span{display:block;font-size:24px;font-weight:600;letter-spacing:-.04em;margin-bottom:17px}
.structure-card>div{margin-left:12px;padding:15px 0 15px 20px;border-left:1px solid var(--line);font-size:15px}
.structure-card small{display:block;font-size:10px;color:var(--muted)}
.structure-card>div small{margin-left:19px;margin-top:3px}
.structure-card>p{font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-top:1px solid var(--line);padding-top:23px;margin-top:19px}
.structure-card strong{font-size:15px;display:block;margin:6px 0}
.image-library{border-radius:18px;border:1px solid var(--line);background:var(--white);padding:25px}
.image-library-head{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:17px;margin-bottom:20px}
.image-library-head>span{font-size:9px;color:var(--muted)}
.image-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.image-tile{border-radius:11px;overflow:hidden;aspect-ratio:1;display:grid;place-items:center}
.tile-blue{background:var(--white)}
.tile-blue img{width:94%;height:auto}
.tile-desk img{height:100%;width:100%;object-fit:cover}
.image-library-foot{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:17px}
.image-library-foot>span{font-size:9px;border:1px solid var(--line);border-radius:100px;padding:3px 8px}
.image-library-foot small{font-size:8px;color:var(--muted);margin-left:auto}
.api-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:30px}
.api-card>span{font-size:9px;letter-spacing:.12em;color:var(--ink)}
.api-card dl{margin:20px 0 0;display:grid;grid-template-columns:110px 1fr;gap:0}
.api-card dt,.api-card dd{padding-block:17px;border-top:1px solid var(--line);font-size:12px;margin:0}
.api-card dd{color:var(--muted);font-size:11px}
.api-card>small{font-size:10px;color:var(--muted)}
.architecture-flow{display:flex;gap:16px;align-items:center;justify-content:space-between;background:var(--white);border:1px solid var(--line);padding:25px;border-radius:12px;margin-bottom:40px}
.architecture-flow>span{font-size:12px;font-weight:600}
.architecture-flow>b{font-size:22px;font-weight:400;color:var(--muted)}
.technical-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 60px}
.technical-grid article{border-top:1px solid var(--line);padding-top:24px}
.technical-grid article>span{font-size:9px;letter-spacing:.1em;color:var(--blue);font-weight:700}
.technical-grid h3{font-size:27px;margin:12px 0 15px}
.technical-grid p{font-size:14px;line-height:1.85}
.phone-card{width:295px;justify-self:center;background:var(--white);border:7px solid var(--line);box-shadow:0 25px 50px #1f354b1c;border-radius:30px;padding:26px 20px 20px;min-height:390px}
.phone-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:37px}
.phone-top>span{font-size:8px;color:var(--muted)}
.phone-card>small{font-size:8px;letter-spacing:.13em;color:var(--blue)}
.phone-card h3{font-size:31px;font-family:var(--serif);font-weight:400;margin:12px 0 18px}
.phone-card p{font-size:11px}
.phone-note{font-size:10px;margin-top:30px;border-top:1px solid var(--line);padding-top:16px}
.phone-nav{font-size:8px;border-top:1px solid var(--line);padding-block:18px 12px;margin-top:32px;white-space:nowrap}
.phone-card .card-kicker{font-size:6px;text-align:center}

/* Use cases, principles, availability */
.case-list{padding-bottom:100px}
.case-detail{border-top:1px solid var(--line);padding:55px 0;display:grid;grid-template-columns:1fr 2fr;gap:70px}
.case-detail>.eyebrow{padding-top:9px}
.case-detail h2{font-size:39px;margin-bottom:23px}
.case-detail p{max-width:650px;font-size:16px}
.case-detail .tech-pills{margin-bottom:0}
.manifesto-layout{display:grid;grid-template-columns:.75fr 1.5fr;gap:120px;align-items:start;padding-top:20px}
.manifesto-aside{position:sticky;top:130px}
.manifesto-aside img{width:250px;transform:rotate(-7deg);margin-bottom:22px}
.manifesto-aside .handwritten{display:block;color:var(--muted);margin-left:20px}
.prose h2{font-size:31px;margin:43px 0 20px;line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose p{font-size:17px;line-height:1.85}
.prose .manifesto-signoff{font-family:var(--serif);font-size:29px;color:var(--ink);line-height:1.35;margin-top:40px}
.availability-banner{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px 30px;display:flex;align-items:center;gap:20px;margin-bottom:32px}
.availability-banner .status-dot{width:9px;height:9px}
.availability-banner p{font-size:12px;max-width:650px;margin-top:5px}
.availability-banner strong{font-size:16px}
.availability-banner .button{margin-left:auto;flex-shrink:0;font-size:12px;min-height:46px}
.plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.plan-card{padding:42px;border:1px solid var(--line);border-radius:18px;background:var(--white)}
.plan-card h2{font-size:40px;margin-bottom:25px}
.plan-card p{font-size:14px}
.plan-card ul{padding-left:20px;margin:26px 0 35px;font-size:13px;line-height:2.2;color:var(--muted)}
.cloud-plan{background:var(--white)}
.plan-status{font-size:11px;letter-spacing:.03em;border-top:1px solid var(--line);display:block;padding-top:20px;color:var(--muted)}
.availability-note{font-size:12px;max-width:850px;margin-top:28px}
.site-footer{background:var(--white)}
.footer-grid{padding:65px 0 50px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start}
.footer-grid p{font-size:13px;margin-top:17px}
.footer-grid .handwritten{margin-top:19px;color:var(--muted)}
.footer-label{font-size:10px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase;margin:11px 0 17px}
.footer-grid>div>a:not(.brand){font-size:12px;display:flex;align-items:center;min-height:36px}
.footer-grid>div>a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding-block:24px;font-size:9px;color:var(--muted)}
.legal-page{max-width:850px}
.legal-page h1{font-size:50px;margin-bottom:30px}
.legal-page h2{font-size:26px;margin:30px 0 15px}
.legal-warning{background:var(--white);padding:18px;border-radius:10px;color:var(--muted);font-size:14px}

@media(min-width:1450px){.hero{padding-top:90px;padding-bottom:90px}
.hero-grid{gap:70px}
.hero-visual{padding-inline:25px}
.hero-visual>img{width:100%}
}

@media(max-width:1200px){.agent-client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:1100px){
.agent-client{padding-block:23px 20px}
.agent-client-status{font-size:11px}
.agent-compatibility-details{gap:30px}
.shell{width:calc(100% - 64px)}
.desktop-nav{gap:16px}
.hero-grid{grid-template-columns:1.2fr 1fr;gap:15px}
.hero h1{font-size:59px}
.hero .eyebrow{font-size:9px}
.hero-scribble{font-size:25px}
.hero-description{font-size:15px}
.feature-card{padding:24px 22px}
.feature-card h3{font-size:22px}
.section-heading{gap:50px}
.detail-grid,.agent-grid{gap:60px}
.preview-main{padding:25px}
.preview-sidebar{padding-inline:10px}
.preview-layout{grid-template-columns:155px 1fr}
.context-card{padding:26px}
.context-clients{font-size:8px}
.faq-layout{gap:60px}
.manifesto-layout{gap:65px}
.strip-inner span:first-child{max-width:300px;font-size:9px}
.strip-inner span{font-size:10px}
}

@media(max-width:850px){.desktop-nav{display:none}
.menu-toggle{display:flex}
.header-inner{height:74px}
.hero{padding:55px 0}
.hero h1{font-size:54px}
.hero-grid{grid-template-columns:1.3fr 1fr;gap:6px}
.hero-description{font-size:14px}
.hero .button{font-size:11px;padding:11px 18px;min-height:47px}
.hero-visual{padding:25px 0 70px}
.hero-scribble{font-size:22px;right:0}
.access-note{font-size:9px!important}
.strip-inner{gap:15px;min-height:70px;flex-wrap:wrap;padding-block:18px;justify-content:flex-start}
.strip-inner span:first-child{flex-basis:100%;max-width:none}
.strip-inner span+span{margin-right:16px}
.section-space{padding-block:75px}
.compact-top{padding-top:10px}
.section-heading{gap:35px;margin-bottom:35px}
.section-heading>p{font-size:14px}
.feature-grid{grid-template-columns:repeat(2,1fr)}
.feature-card p{font-size:12px}
.workflow-grid{gap:25px}
.workflow-grid h3{font-size:22px}
.workflow-grid p{font-size:12px}
.detail-grid,.agent-grid{gap:35px}
.agent-band p{font-size:13px}
.context-card{padding:21px}
.context-clients{display:grid;justify-content:center;gap:10px;text-align:center}
.context-core strong{font-size:27px}
.context-core small{font-size:8px}
.context-core{padding-block:20px}
.context-bottom{gap:5px}
.context-bottom>span{font-size:8px}
.faq-layout{gap:40px;grid-template-columns:.9fr 1.1fr}
.faq-layout h2{font-size:32px}
.preview-layout{grid-template-columns:130px 1fr}
.preview-brand{font-size:11px}
.preview-sidebar>span{font-size:9px;padding:7px}
.preview-sidebar small{font-size:7px}
.preview-main{padding:20px}
.preview-title h3{font-size:22px}
.preview-tabs{font-size:8px;gap:17px}
.preview-board>div{padding:8px;min-height:145px}
.preview-task{font-size:8px;padding:8px 6px}
.preview-task small{font-size:7px}
.preview-about h4{font-size:19px}
.preview-about p{font-size:10px}
.preview-board h5{font-size:8px}
.preview-label{font-size:6px}
.preview-window{font-size:8px;padding-inline:15px}
.cta-layout{gap:20px;padding-block:65px}
.cta-layout>img{width:235px}
.cta-layout p{font-size:13px}
.cta-layout .eyebrow{font-size:8px}
.existing-link{font-size:10px;margin-left:0}
.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:20px}
.footer-grid .brand{font-size:20px}
.footer-grid .brand img{width:36px}
.footer-grid p{font-size:11px}
.footer-grid>div>a:not(.brand){font-size:10px}
.footer-label{font-size:9px}
.technical-grid{gap:35px}
.technical-grid p{font-size:12px}
.technical-grid h3{font-size:23px}
.architecture-flow{gap:8px;padding:20px 15px}
.architecture-flow>span{font-size:9px}
.architecture-flow>b{font-size:17px}
.structure-card{padding:25px}
.structure-card>span{font-size:20px}
.structure-card>div{font-size:13px}
.image-library{padding:17px}
.image-library-head{font-size:15px}
.image-library-head>span{font-size:7px}
.image-library-foot small{margin-left:0}
.api-card{padding:22px}
.api-card dl{grid-template-columns:80px 1fr}
.api-card dt,.api-card dd{font-size:10px}
.phone-card{width:270px}
.plan-card{padding:30px}
.plan-card h2{font-size:33px}
.availability-banner{padding:23px}
.case-detail{gap:35px;grid-template-columns:.6fr 1.7fr}
.case-detail h2{font-size:34px}
.case-detail p{font-size:14px}
.manifesto-layout{grid-template-columns:.7fr 1.5fr;gap:40px}
.prose p{font-size:15px}
.prose h2{font-size:28px}
.manifesto-aside .handwritten{font-size:24px}
.page-hero{padding-top:65px}
.page-hero>p{font-size:17px}
}

@media(max-width:600px){.agent-compatibility .section-space{padding-block:48px}
.agent-compatibility-heading{grid-template-columns:1fr;gap:17px;margin-bottom:25px}
.agent-compatibility-heading h2{font-size:35px}
.agent-compatibility-heading>p{font-size:14px}
.agent-client-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.agent-client{padding:20px 9px 18px;border-radius:12px}
.agent-logo{height:48px;margin-bottom:15px}
.agent-logo img{width:116px;height:43px}
.agent-client-openclaw .agent-logo img,.agent-client-hermes .agent-logo img,.agent-client-gemini .agent-logo img{width:44px;height:44px}
.agent-client h3{font-size:14px;margin-bottom:10px}
.agent-client-status{font-size:10px;padding:5px 7px}
.agent-compatibility-details{grid-template-columns:1fr;gap:13px;margin-top:22px}
.agent-compatibility-details p{font-size:11px}
.agent-compatibility-details .text-link{justify-self:start;font-size:11px;white-space:normal}
.agent-brand-note{font-size:11px;margin-top:16px}
.shell{width:calc(100% - 40px)}
.header-inner{height:70px;gap:15px}
.brand{font-size:21px}
.brand img{width:40px;height:35px}
.header-actions{gap:13px}
.app-link{font-size:11px;gap:5px}
.app-link .icon{width:15px}
.hero{padding:39px 0 35px}
.hero-grid{display:flex;flex-direction:column;gap:16px}
.hero-copy{width:100%}
.hero h1{font-size:clamp(43px,10.7vw,62px);line-height:1.08}
.hero .eyebrow{font-size:8px;letter-spacing:.14em;margin-bottom:20px}
.hero-description{font-size:15px;margin-top:24px;max-width:430px}
.hero .button{min-height:49px;font-size:11px;padding-inline:17px;gap:10px}
.hero .button-row{gap:8px;margin-top:23px}
.hero .access-note{font-size:9px!important;margin-top:17px!important}
.hero-visual{width:min(330px,90%);padding:5px 30px 58px;margin-top:5px}
.hero-visual>img{max-height:240px;width:auto;object-fit:contain}
.hero-scribble{bottom:0;right:12px;font-size:23px}
.strip-inner{padding-block:17px;gap:11px}
.strip-inner span:first-child{font-size:8px;letter-spacing:.07em}
.strip-inner span+span{font-size:10px;margin-right:15px}
.section-space{padding-block:58px}
.compact-top{padding-top:0}
.section-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}
.eyebrow{font-size:9px;margin-bottom:17px}
h2{font-size:36px}
.section-heading>p{font-size:14px}
.feature-grid{grid-template-columns:1fr;gap:12px}
.feature-card{padding:25px;display:grid;grid-template-columns:43px 1fr;gap:0 17px}
.feature-icon{grid-row:1 / 4;margin:0;width:39px;height:39px;border-radius:10px}
.feature-card .card-kicker{font-size:8px;margin-bottom:8px}
.feature-card h3{font-size:23px;max-width:none;margin-bottom:11px}
.feature-card p{font-size:12px;line-height:1.8}
.workflow-grid{grid-template-columns:1fr;gap:30px}
.workflow-grid article{display:grid;grid-template-columns:42px 1fr;gap:0 20px}
.step-number{grid-row:1 / 3;margin:0;padding:0;border:0;font-size:18px}
.workflow-grid h3{font-size:24px;margin-bottom:13px}
.workflow-grid p{font-size:13px}
.detail-grid,.agent-grid{grid-template-columns:1fr;gap:35px}
.agent-band p{font-size:14px}
.context-card{padding:28px}
.context-clients{display:flex;justify-content:space-between;font-size:8px;gap:15px}
.context-core{padding-block:27px}
.context-core strong{font-size:31px}
.context-core small{font-size:9px}
.context-card>p{font-size:9px}
.context-bottom>span{font-size:9px}
.faq-layout{grid-template-columns:1fr;gap:30px}
.faq-layout h2{font-size:36px}
.faq-list summary{font-size:13px;line-height:1.5;min-height:44px}
.faq-list details{padding-block:10px}
.faq-list p{font-size:12px}
.tech-pills{gap:7px;margin-block:23px}
.tech-pills>span{font-size:9px;padding:6px 11px}
.text-link{font-size:12px}
.workspace-preview{border-radius:10px}
.preview-window{padding:9px 11px;gap:11px;font-size:7px}
.window-dots{font-size:5px;letter-spacing:1px}
.preview-label{font-size:5px;letter-spacing:.03em}
.preview-layout{grid-template-columns:1fr}
.preview-sidebar{display:none}
.preview-main{padding:20px 15px}
.preview-title{gap:9px;margin-bottom:20px}
.preview-title h3{font-size:22px}
.project-mark{width:31px;height:31px;font-size:20px}
.save-state{font-size:8px}
.preview-title .card-kicker{font-size:6px}
.preview-tabs{gap:16px;font-size:8px;padding-bottom:10px}
.preview-about{padding:20px 0}
.preview-about>small{font-size:6px}
.preview-about h4{font-size:19px;margin:11px 0}
.preview-about p{font-size:9px}
.preview-reference{font-size:8px}
.preview-task-heading strong{font-size:9px}
.preview-task-heading>span{font-size:7px}
.preview-board{gap:6px}
.preview-board>div{padding:8px 5px;min-height:140px}
.preview-board h5{font-size:7px;gap:3px;margin-bottom:10px}
.preview-board i{width:4px;height:4px}
.preview-task{font-size:7px;padding:7px 5px;line-height:1.5}
.preview-task small{font-size:6px;margin-top:6px}
.preview-caption{font-size:9px;flex-direction:column;gap:8px}
.preview-caption a{min-height:44px;display:flex;align-items:center}
.cta-layout{grid-template-columns:1fr;gap:30px;padding-block:55px}
.cta-layout>img{width:190px;grid-row:1;justify-self:start;margin-left:20px;display:none}
.cta-layout h2{font-size:41px}
.cta-layout .eyebrow{font-size:8px}
.cta-layout p{font-size:13px}
.cta-layout .button-row{gap:14px;margin-top:25px}
.cta-layout .button{font-size:11px;min-height:49px}
.existing-link{font-size:10px}
.footer-grid{grid-template-columns:repeat(3,1fr);padding-block:44px 30px;gap:26px 18px}
.footer-grid>div:first-child{grid-column:1 / -1;position:relative}
.footer-grid .handwritten{position:absolute;right:10px;top:40px;font-size:24px}
.footer-grid .brand{font-size:22px}
.footer-grid .brand img{width:40px}
.footer-grid p{font-size:12px}
.footer-grid>div>a:not(.brand){font-size:10px;min-height:44px}
.footer-label{font-size:8px;margin:0 0 7px}
.footer-bottom{font-size:8px;flex-direction:column;gap:8px;padding-block:19px}
.page-hero{padding-block:45px 38px}
.page-hero h1{font-size:47px}
.page-hero>p{font-size:15px;line-height:1.75;margin-top:23px}
.page-hero .button{font-size:11px;min-height:48px;padding-inline:18px;gap:11px}
.detail-grid p{font-size:14px}
.structure-card{padding:27px}
.structure-card>span{font-size:23px}
.structure-card>div{font-size:14px}
.image-library{padding:21px}
.image-library-head{font-size:17px}
.image-library-head>span{font-size:8px}
.image-library-foot small{font-size:7px;margin-left:auto}
.api-card{padding:25px}
.api-card dl{grid-template-columns:95px 1fr}
.api-card dt,.api-card dd{font-size:11px}
.architecture-flow{display:grid;grid-template-columns:1fr;gap:9px;padding:22px;text-align:center;margin-bottom:30px}
.architecture-flow>span{font-size:12px}
.architecture-flow>b{transform:rotate(90deg);font-size:19px;line-height:1}
.technical-grid{grid-template-columns:1fr;gap:28px}
.technical-grid h3{font-size:26px}
.technical-grid p{font-size:13px}
.phone-card{width:285px}
.case-list{padding-bottom:55px}
.case-detail{grid-template-columns:1fr;gap:10px;padding-block:32px}
.case-detail>.eyebrow{padding-top:0;margin-bottom:5px}
.case-detail h2{font-size:34px;line-height:1.15;margin-bottom:18px}
.case-detail p{font-size:14px}
.manifesto-layout{grid-template-columns:1fr;gap:35px;padding-top:0}
.manifesto-aside{position:static;display:flex;align-items:center;gap:20px}
.manifesto-aside img{width:130px;margin:0}
.manifesto-aside .handwritten{font-size:24px;margin-left:0}
.prose h2{font-size:29px;margin-top:35px}
.prose p{font-size:15px}
.prose .manifesto-signoff{font-size:27px}
.availability-banner{display:grid;grid-template-columns:9px 1fr;gap:15px;padding:22px}
.availability-banner>.status-dot{align-self:start;margin-top:8px}
.availability-banner .button{grid-column:2;margin-left:0;justify-self:start;margin-top:0}
.availability-banner p{font-size:12px}
.plans-grid{grid-template-columns:1fr;gap:17px}
.plan-card{padding:28px}
.plan-card h2{font-size:37px}
.plan-card p{font-size:13px}
.plan-card ul{font-size:12px}
.availability-note{font-size:11px}
.legal-page h1{font-size:37px}
.legal-page h2{font-size:25px}
.legal-page p{font-size:13px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}

.agent-vendor{display:block;color:var(--muted);font-size:11px;margin:4px 0 10px}

/* One appearance choice across every public page. */
.site-header{background:var(--header);border-color:var(--line)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:80px;min-height:44px;padding:0 11px;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--ink);font-size:12px;font-weight:600}
.theme-toggle:hover{background:var(--surface)}
.theme-toggle .icon{width:17px;height:17px;stroke-width:1.8}
.theme-moon{display:none}
[data-theme="light"] .theme-sun{display:none}
[data-theme="light"] .theme-moon{display:inline-flex}
.button-dark{background:var(--action);color:var(--on-action)}
.button-dark:hover{background:var(--action-hover)}
.button-white{background:var(--action);color:var(--on-action)}
.button-white:hover{background:var(--action-hover)}
.button-outline{border-color:var(--line);color:var(--ink)}
.button-outline:hover{background:var(--surface)}
.soft-band,.agent-compatibility,.site-footer{background:var(--soft)}
.agent-band,.final-cta{background:var(--section);color:var(--ink)}
.agent-band p,.cta-layout p,.existing-link{color:var(--muted)}
.context-card,.api-card{background:var(--white);color:var(--ink);border-color:var(--line)}
.context-core,.eyebrow.light{color:var(--aqua)}
.context-core strong{color:var(--ink)}
.context-core small,.context-card .card-kicker,.context-clients,.api-card>span,.api-card dd,.api-card>small{color:var(--muted)}
.feature-icon,.feature-card:nth-child(3n+2) .feature-icon,.feature-card:nth-child(3n) .feature-icon{background:color-mix(in srgb,var(--blue) 12%,var(--white));color:var(--blue)}
.feature-card:nth-child(3n+2) .feature-icon{color:var(--aqua);background:color-mix(in srgb,var(--aqua) 10%,var(--white))}
.agent-client-status.verified,.agent-client-status.compatible{background:color-mix(in srgb,var(--aqua) 10%,var(--white));color:var(--aqua)}
.agent-client-status.compatible{background:color-mix(in srgb,var(--blue) 10%,var(--white));color:var(--blue)}
.agent-compatibility-details strong{color:var(--ink)}
.agent-client:hover{border-color:var(--blue)}
.access-note>span,.status-dot{background:var(--aqua)}
.structure-card,.architecture-flow,.cloud-plan,.availability-banner,.tile-blue{background:var(--surface);border-color:var(--line)}
.hero-scribble,.manifesto-aside .handwritten,.footer-grid .handwritten,.architecture-flow>b{color:var(--blue)}
.phone-card{background:var(--white);border-color:var(--device-frame)}
.phone-top>span,.save-state{color:var(--aqua)}
.workspace-preview,.preview-sidebar,.preview-task{background:var(--soft);color:var(--ink);border-color:var(--line)}
.preview-window,.preview-board>div{background:var(--surface);border-color:var(--line)}
.preview-sidebar .pinned,.preview-sidebar .selected{background:color-mix(in srgb,var(--blue) 12%,var(--white));color:var(--ink)}
.preview-sidebar .preview-new,.preview-title h3,.preview-about h4{color:var(--ink)}
.preview-about p,.preview-tabs,.preview-window,.preview-board h5,.preview-reference,.preview-task small,.preview-task.done,.preview-sidebar>span{color:var(--muted)}
.preview-tabs .active,.project-mark{color:var(--aqua)}
.project-mark{background:color-mix(in srgb,var(--aqua) 12%,var(--white))}
.preview-board .amber{background:var(--blue)}
.preview-board .lavender{background:var(--aqua)}
.legal-warning{background:var(--warning-bg);color:var(--warning-text)}
.skip-link{background:var(--white);color:var(--ink)}
@media(max-width:1100px){.header-inner{gap:18px}.desktop-nav{gap:13px}.brand{font-size:21px}.theme-toggle{min-width:44px;width:44px;padding:0}.theme-toggle [data-theme-label]{display:none}}
@media(max-width:600px){.header-actions{gap:8px}.header-actions>.app-link{display:none}.header-inner{gap:12px}.theme-toggle{flex:none}}
/* Preserve each vendor's official mark on a neutral white backplate. */
.agent-logo{background:#FFFFFF;border-radius:9px;padding:8px}
.agent-logo img{max-height:100%}

/* Founding 60 shares the Carbon Blue surfaces and type with the rest of the site. */
.founding-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:end;margin-bottom:30px}
.founding-intro p{font-size:16px;max-width:530px}
.founding-preview{display:flex;align-items:baseline;gap:20px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:9px;margin-bottom:28px}
.founding-preview>span{color:var(--blue);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.founding-preview p{font-size:13px}
.founding-ladder{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.founding-step{border:1px solid var(--line);border-radius:10px;padding:22px 15px;background:var(--white);display:flex;flex-direction:column;min-width:0}
.founding-step .card-kicker{font-size:9px;letter-spacing:.08em}
.founding-step>strong{font-size:35px;font-weight:600;letter-spacing:-.04em;margin:12px 0 3px;line-height:1.15}
.founding-step-period{font-size:10px;color:var(--muted);white-space:nowrap}
.founding-step-state{font-size:11px;line-height:1.5;padding-top:18px;min-height:52px;color:var(--muted)}
.founding-step[data-state="current"]{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,var(--white))}
.founding-step[data-state="current"] .founding-step-state{color:var(--blue)}
.founding-step[data-state="sold_out"]>strong{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}
.founding-step[data-state="reserved"]{border-style:dashed;border-color:var(--blue)}
.founding-availability{display:flex;justify-content:space-between;gap:35px;align-items:center;border-bottom:1px solid var(--line);padding:30px 0}
.founding-availability>div:first-child{max-width:620px}
.founding-counter{font-size:15px;font-weight:700;color:var(--ink)}
.founding-availability progress{display:block;width:min(100%,420px);height:5px;accent-color:var(--blue);margin:14px 0}
.founding-availability progress[hidden]{display:none}
.founding-availability [data-founding-availability]{font-size:13px;margin-top:10px}
.founding-purchase{display:grid;justify-items:start;gap:12px;flex-shrink:0}
.founding-purchase>strong{font-size:22px;letter-spacing:-.04em}
.founding-purchase .button{font-size:12px;min-width:210px}
.founding-purchase .button:disabled{cursor:default;background:var(--surface);border-color:var(--line);color:var(--muted);transform:none}
.founding-message{font-size:12px;margin-top:17px;min-height:20px}
.founding-retry{background:none;color:var(--ink);border:0;border-bottom:1px solid var(--line);font:inherit;font-size:12px;cursor:pointer}
.founding-retry[hidden]{display:none}
.founding-facts{list-style:none;padding:0;margin:30px 0;display:flex;flex-wrap:wrap;gap:10px 25px;font-size:12px;color:var(--muted)}
.founding-facts li::before{content:'✓';color:var(--blue);margin-right:8px}
.availability-note a,.faq-list p a,.legal-page p a{text-decoration:underline;text-underline-offset:3px}
.standard-prices{display:flex;flex-wrap:wrap;gap:30px;margin:25px 0}
.standard-prices p{display:flex;align-items:baseline;gap:7px;margin:0}
.standard-prices strong,.community-price{font-size:35px;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.standard-prices span{font-size:13px}
.community-price{margin:25px 0}
.community-price small{font-size:14px;font-weight:400;letter-spacing:normal;color:var(--muted)}
.founding-home>p{max-width:640px;margin:24px 0 28px;font-size:17px}
@media(max-width:1050px){.founding-ladder{grid-template-columns:repeat(3,minmax(0,1fr))}.founding-intro{gap:35px}.founding-step-state{min-height:35px}}
@media(max-width:700px){.founding-intro{grid-template-columns:1fr;gap:20px}.founding-intro p{font-size:14px}.founding-preview{align-items:start;flex-direction:column;gap:7px}.founding-availability{align-items:stretch;flex-direction:column;gap:25px}.founding-purchase{justify-items:stretch}.founding-purchase .button{width:100%}.founding-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}.founding-facts{display:grid;gap:10px}.founding-step{padding:20px 16px}.founding-home>p{font-size:15px}}

.legal-updated{font-size:12px;margin-top:-12px;margin-bottom:30px}