@import url('canvas.css');
:root{--bg:#101010;--ink:#ededed;--chalk:#ededed;--lichen:#b6c9c0;--dim:#aaa;--amber:#e7ad45;--body:'DM Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',monospace;--sys:system-ui,sans-serif;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.4,.64,1)}

:root{color-scheme:dark;--nav-bg:#101010ed;--surface:#1a1a1a;--surface-hover:#292929;--panel:#202020;--border:#303030;--border-soft:#ffffff0d;--border-strong:#414141;--muted:#b0b0b0;--subtle:#999;--action:#ededed;--action-hover:#d2d2d2;--on-action:#171717;--success:#9fbea9;--warning:#d5ac70}
:root[data-theme="light"]{color-scheme:light;--bg:#fff;--ink:#161616;--nav-bg:#ffffffed;--surface:#f6f6f4;--surface-hover:#eaeae8;--panel:#fff;--border:#e5e5e2;--border-soft:#0000000d;--border-strong:#ccc;--muted:#626262;--subtle:#777;--action:#171717;--action-hover:#3a3a3a;--on-action:#fff;--success:#65806e;--warning:#b38645}
.theme-toggle{display:inline-grid;place-items:center;flex-shrink:0;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.theme-toggle:hover{background:var(--surface-hover)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-moon,[data-theme="light"] .theme-sun{display:none}
[data-theme="light"] .theme-moon{display:block}
@media(max-width:420px){.nav nav .nav-pill{display:none}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}button{font:inherit}img{max-width:100%}
a,button,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--subtle);outline-offset:5px}
.wrap{width:min(1200px,calc(100% - 64px));margin-inline:auto}
.skip{position:absolute;left:-9999px;z-index:50;background:var(--bg);padding:12px}.skip:focus{left:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nav{height:76px;padding:0 max(32px,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;background:var(--nav-bg);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:600;text-decoration:none;letter-spacing:-.8px}
.brand img{border-radius:8px}.brand-beta{display:none}
.nav nav,.foot nav{display:flex;align-items:center;gap:30px}
.nav nav a,.foot a{font-size:13px;text-decoration:none}
.nav nav a:hover,.foot a:hover{color:var(--subtle)}
.nav-pill{background:var(--action);color:var(--on-action);padding:9px 18px;display:flex;gap:20px;border-radius:100px}
.nav nav .nav-pill:hover{color:var(--on-action);background:var(--action-hover)}
.hero{text-align:center;padding-top:82px;padding-bottom:48px}
.announcement{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:12px;background:var(--surface);padding:7px 8px 7px 15px;border-radius:100px}
.announcement>span:first-child{color:var(--subtle)}.announcement>span:last-child{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-hover)}
h1{display:flex;align-items:center;justify-content:center;gap:14px;font-size:clamp(44px,5vw,68px);font-weight:500;line-height:1.1;letter-spacing:-3px;margin:25px 0 20px}
h1 .hero-icon{position:relative;display:inline-block;flex:none;width:1em;height:1em;border-radius:24%;transform:rotate(-8deg);isolation:isolate;--icon-light:#dcefe2;--icon-spark:#b7d8c3;--icon-glow:156,195,171}
h1 .hero-icon img{display:block;width:100%;height:100%;border-radius:inherit}
[data-theme="light"] .hero-icon{--icon-light:#759b84;--icon-spark:#416d53;--icon-glow:83,123,99}
.hero-icon::before{content:"";position:absolute;inset:-16%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--icon-glow),.28),transparent 70%);opacity:.25}
.hero-icon::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(120deg,transparent 34%,var(--icon-light) 49%,transparent 64%) 100% 0/300% 100% no-repeat;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0}
.hero-icon-embers{position:absolute;inset:0;pointer-events:none}
.hero-icon-embers i{position:absolute;left:var(--x);top:8%;width:2px;height:2px;border-radius:50%;background:var(--icon-spark);box-shadow:0 0 5px rgba(var(--icon-glow),.5);opacity:0}
@media(prefers-reduced-motion:no-preference){
  .hero-icon.is-lit::before{animation:hero-icon-bloom 3.6s ease-out both}
  .hero-icon.is-lit::after{animation:hero-icon-rim 3.6s ease-in-out both}
  .hero-icon.is-lit .hero-icon-embers i{animation:hero-icon-ember 1.4s ease-out both;animation-delay:var(--delay)}
}
.hero-icon.is-resting::before,.hero-icon.is-resting::after,.hero-icon.is-resting i{animation-play-state:paused!important}
@keyframes hero-icon-bloom{0%,100%{opacity:.25;transform:scale(.95)}40%{opacity:1;transform:scale(1.12)}}
@keyframes hero-icon-rim{0%{background-position:100% 0;opacity:0}20%{opacity:.8}70%{opacity:.65}100%{background-position:0 0;opacity:0}}
@keyframes hero-icon-ember{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
.hero-description{font-size:18px;line-height:1.65;color:var(--muted);margin:0 auto;max-width:650px}
.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:28px}
.cta,.secondary-cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:12px 23px;font-size:14px;text-decoration:none;border-radius:100px;transition:background .15s}
.cta{background:var(--action);color:var(--on-action)}.cta:hover{background:var(--action-hover)}
.secondary-cta{background:var(--surface)}.secondary-cta:hover{background:var(--surface-hover)}
.hero-note{font-size:11px;color:var(--subtle);margin:17px 0 0}
.demo-section{width:min(1200px,calc(100% - 64px));margin:0 auto;padding:16px 16px 0;background:var(--surface);border:1px solid var(--border);border-radius:24px;overflow:hidden}
.demo-heading{display:flex;justify-content:space-between;gap:20px;padding:4px 8px 14px;font-size:12px;color:var(--muted)}.demo-hint{font-size:11px;color:var(--subtle)}
.hero-win{margin:0}.tri{--dw:992;--fw:min(1166px,calc(100vw - 98px));width:var(--fw);position:relative}
.win-frame{box-shadow:0 12px 40px #0002}.win-cap{color:var(--subtle);margin:14px 0}.win-cap p{font-size:10px;color:var(--subtle)}.w-replay{color:var(--ink);font-size:10px}.w-replay:hover{color:var(--ink)}
.statement{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-block:95px 75px}
h2{font-size:40px;font-weight:500;line-height:1.18;letter-spacing:-1.6px;margin:0 0 20px}h2 em{font:inherit}
.statement p{font-size:16px;color:var(--muted);line-height:1.8;margin:0 0 16px}
.agent-names{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;font-size:12px;color:var(--subtle)}
.workflow{padding-block:60px 95px}.section-heading,.workspace-heading{text-align:center;max-width:740px;margin-inline:auto}
.section-heading>p,.workspace-heading>p{font-size:16px;color:var(--muted);margin:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.steps article{background:var(--surface);border-radius:24px;padding:26px;display:flex;flex-direction:column}
.step-no{font:11px var(--mono);color:var(--subtle)}
h3{font-weight:500}.steps h3{font-size:21px;letter-spacing:-.6px;line-height:1.25;margin:20px 0 12px}
.steps article>p{font-size:14px;color:var(--muted);margin:0 0 30px;line-height:1.7}
.workspace{padding:20px 0 85px}.workspace-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.feature-main{background:var(--surface);border-radius:24px;padding:36px 36px 0;overflow:hidden}
.feature-top{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:.04em;color:var(--subtle)}
.feature-icon{font-size:26px;line-height:1;color:var(--ink)}
.feature-main h3{font-size:29px;line-height:1.2;letter-spacing:-1px;margin:28px 0 15px}
.feature-main>p{font-size:15px;color:var(--muted);max-width:420px}
.feature-stack{display:grid;gap:24px}.feature-stack article{padding:34px;background:var(--surface);border-radius:24px}.feature-stack h3{font-size:23px;letter-spacing:-.7px;line-height:1.3;margin:20px 0 12px}.feature-stack p{font-size:14px;color:var(--muted);margin:0}.amber{color:var(--warning)}
.principles{padding-block:60px 95px;display:grid;grid-template-columns:1fr 1fr;gap:90px}.principles h2{font-size:36px}.principles dl{margin:0}.principles dl>div{padding:22px 0;border-bottom:1px solid var(--border)}.principles dl>div:first-child{padding-top:0}.principles dt{font-size:18px;font-weight:500}.principles dd{margin:9px 0 0;font-size:14px;color:var(--muted)}
.faq{border-top:1px solid var(--border);padding-block:65px 90px;display:grid;grid-template-columns:1fr 1fr;gap:90px}.faq h2{font-size:34px;margin:10px 0}.faq details{border-bottom:1px solid var(--border);padding:20px 0}.faq summary{font-size:15px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';font-size:20px;line-height:1}.faq details[open] summary:after{content:'−'}.faq details p{font-size:14px;color:var(--muted)}
.final{text-align:center;padding:85px 0 95px;background:var(--surface)}.final img{border-radius:16px;margin-bottom:20px}.final h2{font-size:48px;letter-spacing:-2px;margin:0 0 16px}.final p{color:var(--muted);font-size:16px}.release-note{display:inline-flex;align-items:center;background:var(--action);color:var(--on-action);padding:13px 23px;border-radius:100px;font-size:14px;margin-top:14px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b4c5b5;margin-right:9px}.final .fine{font-size:11px;margin:15px 0 28px}.final a{font-size:12px;text-underline-offset:5px}
.foot{display:flex;justify-content:space-between;align-items:center;padding-block:35px;gap:25px}.foot .brand{font-size:20px}.foot>span{font-size:11px;color:var(--subtle)}.foot nav{gap:20px}.foot nav a{font-size:11px}[hidden]{display:none!important}
@media(min-width:760px) and (max-width:999px){.tri{--dw:992}.nav nav{gap:18px}.steps{gap:16px}.steps article{padding:20px}.principles,.faq,.statement{gap:40px}}
@media(max-width:759px){html{scroll-padding-top:78px}.wrap{width:calc(100% - 40px)}.nav{height:68px;padding:0 20px}.brand{font-size:20px}.nav nav>a:not(.nav-pill){display:none}.nav-pill{padding:9px 14px;gap:12px}.nav nav a{font-size:11px}.hero{padding-top:55px;padding-bottom:35px}.announcement{font-size:10px;gap:8px}h1{font-size:clamp(34px,9vw,58px);letter-spacing:-1.8px;gap:8px;margin:28px 0 20px}.hero-description{font-size:16px;max-width:460px}.desktop-break{display:none}.hero-actions{gap:10px}.cta,.secondary-cta{padding:12px 18px;font-size:12px}.hero-note{font-size:10px}.demo-section{width:calc(100% - 24px);padding:10px 10px 0;border-radius:20px}.demo-heading{display:block;padding:4px 4px 12px;font-size:11px}.demo-hint{display:block;font-size:10px;margin-top:3px}.tri{--dw:360;--fw:min(460px,calc(100vw - 46px))}.hero-win{margin:0}.win-cap p{font-size:9px}.statement{grid-template-columns:1fr;gap:10px;padding-block:60px 25px}h2{font-size:31px;letter-spacing:-1.2px}.statement p{font-size:14px}.agent-names{font-size:11px;gap:15px}.workflow{padding-block:45px 60px}.section-heading>p,.workspace-heading>p{font-size:14px}.steps{grid-template-columns:1fr;gap:20px;margin-top:30px}.steps article{padding:26px}.steps h3{margin-top:15px}.steps article>p{max-width:450px;margin-bottom:22px}.workspace{padding:10px 0 60px}.workspace-grid{grid-template-columns:1fr;margin-top:30px}.feature-main{padding:26px 26px 0}.feature-main h3{font-size:29px}.feature-stack{gap:20px}.feature-stack article{padding:26px}.principles{grid-template-columns:1fr;gap:20px;padding-block:15px 60px}.principles h2{font-size:31px}.faq{grid-template-columns:1fr;gap:15px;padding-block:40px 60px}.faq h2{font-size:29px}.final{padding:60px 0}.final h2{font-size:37px;letter-spacing:-1.5px}.foot{flex-wrap:wrap;gap:20px}.foot>span{order:3;width:100%;font-size:10px}.foot nav{gap:14px}.foot nav a{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:759px){.nav nav{gap:12px}}

/* pricing */
.pricing{padding-block:60px 85px}
.bf-banner{margin:28px auto 0;max-width:720px;text-align:center;font-size:14px;padding:12px 20px;border:1px solid var(--border-strong);border-radius:100px;background:var(--surface);color:var(--ink)}
.bf-banner code{font:12px var(--mono);background:var(--surface-hover);padding:2px 7px;border-radius:6px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--surface);border:1px solid transparent;border-radius:24px;padding:30px}
.plan-featured{border-color:var(--border-strong);background:var(--panel);box-shadow:0 12px 40px #0002}
.plan h3{font-size:19px;letter-spacing:-.4px;margin:0}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan-tag{font:11px var(--mono);padding:4px 10px;border-radius:100px;background:var(--action);color:var(--on-action);white-space:nowrap}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:22px 0 0;line-height:1}
.plan-price .amount{font-size:48px;font-weight:500;letter-spacing:-2px}
.plan-price .per{font-size:15px;color:var(--muted)}
.plan-price .was{font-size:24px;color:var(--subtle)}
.plan-sub{font-size:13px;color:var(--muted);margin:8px 0 22px}
.plan ul{list-style:none;margin:0 0 28px;padding:18px 0 0;border-top:1px solid var(--border);display:grid;gap:10px;flex:1;align-content:start}
.plan li{font-size:14px;color:var(--muted);padding-left:22px;position:relative;line-height:1.5}
.plan li:before{content:"✓";position:absolute;left:0;color:var(--ink)}
.plan-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:13px 23px;font-size:14px;text-decoration:none;border:0;border-radius:100px;background:var(--action);color:var(--on-action);cursor:pointer;transition:background .15s}
.plan-btn:hover{background:var(--action-hover)}
.plan-btn-alt{background:var(--surface-hover);color:var(--ink)}.plan-btn-alt:hover{background:var(--border-strong)}
.plan-btn:disabled{opacity:.55;cursor:not-allowed}
.plan-error{font-size:12px;color:var(--warning);margin:10px 0 0;text-align:center}
.plan-edu{text-align:center;font-size:14px;color:var(--muted);margin:28px 0 0}
.plan-edu a{color:var(--ink);text-underline-offset:4px}
@media(max-width:899px){.plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}.plan-featured{order:-1}}
@media(max-width:759px){.pricing{padding-block:40px 60px}.plans{gap:20px;margin-top:30px}.plan{padding:26px}.bf-banner{border-radius:20px;font-size:13px}}
.plan-note{text-align:center;font-size:13px;color:var(--muted);margin:24px 0 0}
.plan-note+.plan-edu{margin-top:10px}
/* other platforms, coming soon */
.final .platforms{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;margin:-12px 0 8px}
.final .platforms li{font-size:12px;color:var(--muted);border:1px solid var(--line, rgba(127,127,127,.25));border-radius:100px;padding:5px 12px}
.final .platforms-note{margin-top:0}
/* link from the short homepage FAQ to /faq */
.faq-more{margin:18px 0 0;font-size:14px}.faq-more a{text-underline-offset:5px}
/* full FAQ page: one column */
.faq-full{display:block;padding:0}.faq-full>div{width:100%}
.final .cta{font-size:15px;margin-top:10px}.final .release-note.beta{display:flex;justify-content:center;background:transparent;color:var(--muted);padding:0;margin-top:14px;font-size:13px}
.cta .mac-logo{flex:none;margin:-2px -6px 0 0}
.is-unavailable{opacity:.55;cursor:default;pointer-events:none}
.nav-pill .mac-logo{flex:none;margin-top:-2px}.nav-pill{align-items:center;gap:8px}

/* Agents strip under the hero: two identical tracks scroll left forever; edges fade. */
.agents-strip{padding:8px 0 40px;text-align:center;overflow:hidden}
.agents-title{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.agents-marquee{display:flex;width:min(720px,calc(100% - 32px));margin:0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.agents-track{display:flex;flex:none;gap:10px;margin:0;padding:0 6px;list-style:none;animation:agents-scroll 40s linear infinite}
.agents-marquee:hover .agents-track{animation-play-state:paused}
.agent-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--ink);font-size:13px;white-space:nowrap}
.agent-logo{flex:none;width:15px;height:15px;object-fit:contain}
.logo-on-light,[data-theme="light"] .logo-on-dark{display:none}
[data-theme="light"] .logo-on-light{display:block}
@keyframes agents-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.agents-track{animation:none}.agents-track[aria-hidden]{display:none}.agents-marquee{justify-content:center;flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}.agents-track{flex-wrap:wrap;justify-content:center;row-gap:12px}}
/* Pricing: Free + Pro with a Monthly / Yearly switch (Yearly first). */
.billing{display:flex;width:max-content;margin:32px auto 0;padding:4px;gap:4px;border-radius:100px;background:var(--surface);border:1px solid var(--border)}
.billing-opt{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:0;border-radius:100px;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.billing-opt.on{background:var(--action);color:var(--on-action)}
.billing-save{font:11px var(--mono);padding:2px 7px;border-radius:100px;background:var(--surface-hover);color:var(--ink)}
.billing-opt.on .billing-save{background:var(--on-action);color:var(--action)}
.plans.plans-two{grid-template-columns:repeat(2,1fr);max-width:860px;margin-inline:auto;margin-top:28px}
.plan-featured{border-color:var(--ink);box-shadow:0 16px 48px #0004}
.plan-pro li{color:var(--ink)}
.plan-pro strong{font-weight:600}
.plan-fine{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 0}
@media(max-width:899px){.plans.plans-two{grid-template-columns:1fr;max-width:460px}}
/* Final call to action: one button, one meta line, folded first-open help, one quiet line. */
.final .final-meta{display:flex;align-items:center;justify-content:center;font-size:13px;margin:18px 0 0}
.final-help{margin:10px auto 0;max-width:440px;font-size:13px;color:var(--muted)}
.final-help summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--border-strong)}
.final-help summary::-webkit-details-marker{display:none}
.final-help summary::after{content:"+";font-size:13px}
.final-help[open] summary::after{content:"−"}
.final .final-help p{font-size:13px;line-height:1.55;margin:10px 0 0}
.final-help b{color:var(--ink);font-weight:500}
.final .final-soon{font-size:12px;color:var(--subtle);margin:28px 0 30px}
.foot{flex-wrap:wrap}.foot-tm{flex-basis:100%;margin:8px 0 0;font-size:12px;color:var(--subtle)}
/* Home: short pricing teaser; the full pricing section lives on /pricing. */
.pricing-teaser{display:grid;justify-items:center;gap:26px;padding-block:75px 90px;text-align:center}
.pricing-teaser h2{margin:0;max-width:680px}
@media(max-width:759px){.pricing-teaser{padding-block:50px 65px;gap:22px}}
.media-uses{padding-block:60px 30px}.media-note{font-size:15px;color:var(--muted);line-height:1.7;margin:16px 0 0;max-width:420px}.media-models{grid-column:1/-1;margin:-50px 0 0;font-size:12px;color:var(--subtle);font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.2px}
@media(max-width:759px){.media-uses{padding-block:40px 10px}.media-models{margin:0}}
.section-art{display:block;width:100%;height:auto;margin-top:30px;border-radius:16px;border:1px solid var(--border)}
.pricing-why{padding-block:70px 40px;border-top:1px solid var(--border);margin-top:70px}.pricing-why h2{font-size:36px;margin:0}
.plan-launch{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:12.5px;line-height:1.5;color:var(--ink,#ededed)}
.changelog h2{display:flex;align-items:baseline;gap:10px;margin-top:36px}.changelog h2 small{font-size:14px;font-weight:400;color:var(--muted)}.changelog ul{padding-left:20px}.changelog li{margin:6px 0}