/* Homepage additions: hero trust lines, hero sizing, and open-source-first pricing (the demo is agent-demo.css).
   Production tokens only: black canvas, near-black panels, hairline borders, Geist, and the OC
   mark's lavender face with coral and cobalt layers. Dark only, like production. */
:root{--p-face:#7d82ff;--p-face-2:#959aff;--p-ink:#0c0d2a;--p-coral:#ff6268;--p-cobalt:#164bff;--p-line:#282328;--p-panel:#0b0a0c;--p-raise:#141216;--p-muted:#c9c4c8;--p-faint:#8f8a8e;--p-tint:#10112a;--p-tint-line:#3b3d7a;--p-tint-text:#d9dbff;--p-layers:-1px 0 0 var(--p-coral),1px 0 0 var(--p-cobalt);color-scheme:dark;background:#000}
html{background:#000!important;color:#f7f5f6}
/* The body stays see-through so the side grids behind the page show on the black background. */
body{background:transparent!important;color:#f7f5f6}
/* Side grids: the jitter grid shows only in the outer quarter of each side, fading toward the centre. The mask
   sits on the three base grids, not the container, so the closing call's pointer lens can light the grid anywhere. */
.jitter-grid{-webkit-mask-image:none;mask-image:none}
.jitter-grid>span{-webkit-mask-image:linear-gradient(90deg,#000 0%,#0009 8%,#0003 17%,transparent 25%,transparent 75%,#0003 83%,#0009 92%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,#0009 8%,#0003 17%,transparent 25%,transparent 75%,#0003 83%,#0009 92%,#000 100%)}
body{overflow-x:clip}

/* ---------- Hero ---------- */
/* Backers sit above the headline as a quiet eyebrow, so the hero has one trust line above and one below. */
#top .p-eyebrow{justify-content:center;margin:0 0 26px}
@media(max-width:600px){#top .p-eyebrow{margin-bottom:18px}}

/* ---------- Used by: an endless logo belt ---------- */
.u-strip{width:min(100%,920px);margin:30px auto 0}
.u-strip>p{font:500 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint)}
.u-track{margin-top:16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.u-belt{display:flex;width:max-content;animation:u-belt 38s linear infinite}
.u-track:hover .u-belt{animation-play-state:paused}
.u-row{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:56px;padding-right:56px}
.u-row li{display:grid;place-items:center;height:48px}
.u-row img{display:block;height:var(--h);width:auto;max-width:none;filter:brightness(0) invert(1);opacity:.62;transition:opacity .2s}
.u-row img:hover{opacity:1}
@keyframes u-belt{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.u-belt{animation:none;width:auto}.u-row{flex-wrap:wrap;justify-content:center;gap:20px 36px;padding:0}.u-row[aria-hidden]{display:none}.u-track{-webkit-mask-image:none;mask-image:none}}
@media(max-width:600px){.u-row{gap:36px;padding-right:36px}.u-row li{height:36px}.u-row img{height:calc(var(--h) * .72)}.u-strip{margin-top:22px}.u-track{margin-top:12px}}

/* ---------- Hero height ---------- */
/* The hero fills the first screen below the header, centred, with nothing peeking in. */
#top.hero.hero-centered{min-height:calc(100svh - 93px);padding:44px 32px 20px;display:flex;align-items:center;justify-content:center}
@media(max-width:760px){#top.hero.hero-centered{min-height:calc(100svh - 73px);padding:20px 16px}}
@media(max-height:800px) and (min-width:761px){#top.hero.hero-centered{padding-top:8px;padding-bottom:0}#top .p-eyebrow{margin-bottom:18px}#top .u-strip{margin-top:24px}#top .hero-description{margin-top:18px}#top .hero-ctas{margin-top:24px}}

/* ---------- Pricing ---------- */
.price-value small{margin-left:6px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--p-faint)}
.p-oss{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:36px;padding:30px 32px;border:1px solid var(--p-line);border-radius:14px;background:var(--surface,#090809)}
.p-oss h3{font-size:16px;font-weight:500}
.p-oss .price-value{margin-top:14px}
.p-oss-action{padding-top:0;margin-top:0}
.p-feats{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.p-feats li{display:flex;gap:9px;font-size:13.5px;line-height:1.55;color:var(--p-muted)}
.p-feats svg{width:15px;height:15px;margin-top:3px;flex:none;color:var(--p-face)}
.p-oss-feats{margin:0}
.p-cloud-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:48px 0 18px}
.p-cloud-head h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
.p-cloud-head p{font-size:14px;color:var(--p-muted)}
.p-plan{min-height:0}
.p-plan .price-details dd{text-align:right}
.p-plan .price-details dd small{display:block;margin-top:2px;font-size:12px;color:var(--p-faint)}
.p-plan .price-action .primary-button,.p-plan .price-action .secondary-button{width:100%}
.price-value small{white-space:nowrap}
/* Startup is the plan we want most people on: the card wears the OC mark's lavender face with
   static coral and cobalt edges. */
.p-plan-featured{--ink:#0c0d2a;background:var(--p-face);border-color:var(--p-face);color:var(--ink);box-shadow:-3px 0 0 var(--p-coral),3px 0 0 var(--p-cobalt)}
.p-plan-featured :is(h3,.price-value,.price-summary,dt,dd,.p-feats li){color:var(--ink)}
.p-plan-featured .price-value small,.p-plan-featured .price-details dd small{color:#2b2e6e}
.p-plan-featured .price-details>div{border-color:#0c0d2a33}
.p-plan-featured .price-details{border-color:#0c0d2a33}
.p-plan-featured .p-feats svg{color:var(--ink)}
:root .p-plan-featured .price-action .primary-button{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
:root .p-plan-featured .price-action .primary-button:hover{background:#000;border-color:#000;color:#fff;box-shadow:none}
/* Scale keeps the black card with a thinner, quieter edge. */
.p-plan:not(.p-plan-featured){border-color:#1d1a1e}
/* Open source is not public yet. */
.p-soon{display:inline-flex;align-items:center;min-height:45px;padding:12px 18px;border:1px dashed #3a3540;border-radius:6px;color:var(--p-faint);font-size:12px;white-space:nowrap;cursor:default}

@media(max-width:900px){
  .p-oss{grid-template-columns:minmax(0,1fr);gap:22px}
  .p-oss-action{justify-self:start}
}

/* Short phones (iPhone SE): tighter, so the whole hero fits the first screen. */
@media(max-width:600px) and (max-height:700px){
  #top .p-eyebrow{margin-bottom:14px!important}
  #top .hero-description{margin-top:12px!important}
  #top .hero-ctas{margin-top:20px!important}
  #top .u-strip{margin-top:20px!important}
  #top.hero.hero-centered{padding-top:8px}
}
/* Phones: give each block of the hero room to breathe. */
@media(max-width:600px){
  #top .p-eyebrow{margin-bottom:24px}
  #top .hero-description{margin-top:18px;text-wrap:balance}
  #top .hero-ctas{margin-top:28px}
  #top .u-strip{margin-top:36px}
}

/* ---------- Buttons ----------
   Primary buttons are the logo lavender with black text, with static coral and cobalt edges like the OC mark.
   Secondary buttons are quiet outlines in every theme. The Startup card keeps its dark button on lavender. */
:root{--btn-bg:var(--p-face);--btn-hover:#8d92ff;--btn-fg:#000;--btn-line:var(--p-face);--btn-edge:-2px 0 0 var(--p-coral),2px 0 0 var(--p-cobalt)}
:root :is(.hero-ctas .primary-button,.price-action .primary-button,.header-nav .header-try,.dialog-actions .copy-button){background:var(--btn-bg);border:1px solid var(--btn-line);color:var(--btn-fg);box-shadow:var(--btn-edge);font-weight:600}
:root :is(.hero-ctas .primary-button,.price-action .primary-button,.header-nav .header-try,.dialog-actions .copy-button):hover{background:var(--btn-hover);border-color:var(--btn-line);color:var(--btn-fg);text-decoration:none}
:root :is(.hero-ctas .secondary-button,.price-action .secondary-button){background:transparent;border:1px solid #3a3540;color:#f7f5f6;box-shadow:none;font-weight:500}
:root :is(.hero-ctas .secondary-button,.price-action .secondary-button):hover{background:#ffffff0d;border-color:#f7f5f6;color:#fff}

/* Messages on the shared agent board: the centrepiece of the right-hand run. */
.t-bd{padding-left:1ch;background:linear-gradient(90deg,#ff62681f,#7d82ff14 60%,transparent);box-shadow:inset 2px 0 0 #ff6268}
.t-bd-topic{color:#ff8f93}
.t-bd-who{color:#b9bbff;font-weight:700}

/* ---------- Copied state ----------
   The copy button itself becomes "Copied!" with a circled check, flashes and pops, and squares burst off it (site.js).
   The old toast stays only as a screen-reader announcement. */
.toast{position:fixed!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;box-shadow:none!important}
@keyframes cp-pop{0%{transform:scale(1)}30%{transform:scale(.94)}65%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes cp-flash{0%{background:#fff;border-color:#fff}}
@keyframes cp-check{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
:root [data-copy].is-copied{animation:cp-pop .45s cubic-bezier(.2,.9,.3,1.3),cp-flash .5s ease-out;white-space:nowrap;overflow:hidden;justify-content:center}
:root [data-copy].is-sizing{transition:width .3s cubic-bezier(.2,.9,.3,1);white-space:nowrap;overflow:hidden}
[data-copy] .cp-ok{display:inline-flex;align-items:center;gap:8px}
[data-copy] .cp-ok b{font-weight:700}
[data-copy] .cp-ok em{font-style:normal;font-weight:500}
[data-copy] .cp-dot{flex:none;width:24px;height:24px;border-radius:999px;background:#000;color:var(--p-face);display:grid;place-items:center}
[data-copy] .cp-dot svg{width:15px;height:15px}
.p-plan-featured [data-copy] .cp-dot{background:var(--p-face);color:#000}
[data-copy] .cp-dot svg{display:block!important;animation:cp-check .35s .1s cubic-bezier(.2,.9,.3,1.4) both}
.cp-px{position:fixed;z-index:2147483000;width:8px;height:8px;border-radius:1px;pointer-events:none}
@media(prefers-reduced-motion:reduce){:root [data-copy].is-copied{animation:none}[data-copy] .cp-dot svg{animation:none}}

/* ---------- Setup dialog ----------
   A black panel with the OC mark's static coral and cobalt edges, mono labels and a black prompt box. */
:root .setup-dialog{background:var(--p-panel);color:#f4f1f3;border:1px solid #2a262b;border-radius:14px;box-shadow:-3px 0 0 var(--p-coral),3px 0 0 var(--p-cobalt),0 40px 120px #000;width:min(600px,calc(100% - 32px))}
:root .setup-dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}
:root .setup-dialog .dialog-top{height:auto;padding:14px 16px 14px 22px;background:transparent;border-bottom:1px solid #2a262b;color:#9a959a;font:600 11px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;box-shadow:none}
:root .setup-dialog .dialog-close{width:32px;height:32px;border:1px solid #2a262b;border-radius:8px;background:transparent;color:#f4f1f3;font-size:18px;line-height:1}
:root .setup-dialog .dialog-close:hover{background:var(--p-raise);border-color:#4a454b}
:root .setup-dialog .dialog-body{padding:26px 26px 24px}
:root .setup-dialog .dialog-body h2{margin:0;font-size:30px;font-weight:600;letter-spacing:-.03em}
:root .setup-dialog .dialog-body p{font-size:15px;line-height:1.55;color:#b4afb4;margin:10px 0 20px}
:root .setup-dialog .dialog-body label{font:600 11px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8f8a8e;margin-bottom:10px}
:root .setup-dialog .dialog-body textarea{background:#000;border:1px solid #2a262b;border-radius:8px;color:#e8e4e7;font:12.5px/1.7 "Geist Mono",ui-monospace,monospace;padding:16px;min-height:200px;box-shadow:none}
:root .setup-dialog .dialog-body textarea:focus{outline:none;border-color:var(--p-face)}
:root .setup-dialog .dialog-actions{margin-top:18px}
:root .setup-dialog .dialog-body p:last-child{margin:16px 0 0;font-size:13px;color:#8f8a8e}

/* ---------- Hero size and spacing ----------
   A large headline with room between each block. The description stays on one line where it fits. */
#top h1{font-size:clamp(36px,5vw,76px);line-height:1.02}
#top .p-eyebrow{font-size:15px;margin-bottom:clamp(24px,4.5vh,44px)!important}
#top .hero-description{font-size:clamp(15px,1.2vw,18px);max-width:none;margin-top:clamp(20px,3.6vh,36px)!important;text-wrap:balance}
#top .hero-ctas{margin-top:clamp(28px,5.4vh,50px)!important}
#top .hero-ctas>*{padding-top:15px;padding-bottom:15px}
#top .u-strip{margin-top:clamp(52px,11vh,100px)!important}
#top .u-track{margin-top:22px}

/* ---------- OpenCrawl Cloud ----------
   The one hosted plan: the same layout as the self-host card, in the logo's lavender. */
.p-cloud{margin-top:16px}
.p-cloud .price-value{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.03em}
.p-cloud .price-value small{display:block;margin:6px 0 0;font-size:16px;font-weight:600;letter-spacing:0;color:var(--p-ink)}
.p-cloud .price-summary{color:#1c1e52}
.p-cloud .p-feats{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 24px}
.p-cloud .p-feats li{white-space:nowrap}
.p-cloud .p-feats svg{color:var(--p-ink)}
/* What's free and what's billed, as a plain two-column list on the lavender card. */
.p-cloud-bill{margin:0}
.p-cloud-bill div{padding:10px 0;border-color:#0c0d2a26!important;font-size:14px}
.p-cloud-bill dt{color:var(--p-ink)}
.p-cloud-bill dd{color:var(--p-ink);font-weight:600;white-space:nowrap}
@media(max-width:600px){.p-cloud .p-feats{flex-direction:column}.p-cloud-bill dd{white-space:normal;max-width:9.5em}}

/* ---------- Free, no credit card ----------
   A quiet line under every main call to action, and under the Cloud card's button. */
.no-card{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:16px 0 0;font-size:14px;color:#d4cfd3}
.no-card svg{width:14px;height:14px;color:var(--p-face)}
.no-card-dot{margin:0 6px;color:#5a555b}
.p-cloud-action{display:flex;flex-direction:column;align-items:center;gap:10px}
.p-cloud-nocard{margin:0;font-size:13px;font-weight:600;color:var(--p-ink)}