/*
 * Mobile first. Everything before the first @media is the phone layout; each min-width block adds a wider
 * screen (361px, 641px tablet, 851px, 1101px desktop, 1500px wide), and a few max-width ranges hold
 * phone-only details. Text sizes come from the rem type scale in :root (--fs-*): body never under 16px,
 * supporting text never under 12px. Funnel Display sets headings, Funnel Sans the rest, Instrument Serif
 * the italic accents. The product preview (.product-stage) is the real app at its real sizes, in its own section.
 * Motion is opt-out: site.js adds .motion unless reduced motion is asked for, and nothing hides without it.
 */
:root{--paper:#f7f7f2;--ink:#20241f;--muted:#687067;--line:#dfe2d9;--purple:#6d4aff;--lime:#e1eea1;--ease:cubic-bezier(.23,1,.32,1);--pop:cubic-bezier(.34,1.56,.64,1);--serif:'Instrument Serif',Georgia,serif;--sans:'Funnel Sans',system-ui,sans-serif;--display:'Funnel Display','Funnel Sans',system-ui,sans-serif;color-scheme:light;--fs-label:.75rem;--fs-note:.8125rem;--fs-small:.875rem;--fs-body:clamp(1rem,.96rem + .2vw,1.0625rem);--fs-lead:clamp(1.125rem,1.05rem + .35vw,1.3125rem);--fs-h3:clamp(1.25rem,1.15rem + .45vw,1.5rem);--fs-h2:clamp(2.375rem,1.7rem + 2.6vw,4rem);--fs-display:clamp(2.75rem,1.8rem + 4vw,4.75rem)}
*{box-sizing:border-box}
picture{display:contents}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);font-size:var(--fs-body);font-kerning:normal;-webkit-font-smoothing:antialiased}
button{font:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
input{font:inherit;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent;color:inherit;text-decoration:none}
summary{-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
a:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
summary:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
input:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
[tabindex]:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
button:disabled{cursor:default}
img{display:block;max-width:100%;object-fit:contain}
[hidden]{display:none!important}
::selection{background:#e1eea1;color:#20241f}
.wrap{width:calc(100% - 36px);margin-inline:auto}
.section{padding-block:60px}
h1{margin:0;line-height:1.08;font-size:9.2vw;font-family:var(--display);font-weight:500;letter-spacing:-.03em;white-space:nowrap}
h2{margin:0;font-family:var(--display);font-weight:500;line-height:1.04;font-size:var(--fs-h2);letter-spacing:-.03em;text-wrap:balance}
h3{margin:0;font-weight:550;font-family:var(--display);letter-spacing:-.035em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
h1 em{font-family:var(--serif);font-weight:400;font-size:1.08em;letter-spacing:-.01em}
h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.muted{color:var(--muted)}
.eyebrow{letter-spacing:.12em;font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;margin-bottom:20px}
/* ✳ and ☁ are drawn, not typed: no web font has them, so phones fall back to their color emoji */
.spark,.cloud{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:url(spark.svg) center/contain no-repeat;mask:url(spark.svg) center/contain no-repeat}
.cloud{-webkit-mask-image:url(cloud.svg);mask-image:url(cloud.svg)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:14px 23px;min-height:48px;border-radius:7px;border:1px solid transparent;font-weight:650;line-height:1.4;font-size:var(--fs-small);transition:background .18s,transform .18s,box-shadow .18s}
@media(hover:hover){.button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #20241f12}}
.button:active{scale:.97}
.button span{font-weight:400;font-size:1.25em;line-height:1}
.button-primary{background:var(--purple);color:white}
.button-primary:hover{background:#5736e1}
.button-dark{background:var(--ink);color:white}
.button-dark:hover{background:#3a4438}
.button-outline{border-color:#cbd0c3;background:transparent}
.button-outline:hover{background:white}
.button-small{padding:10px 17px;min-height:41px}
.text-link{display:inline-flex;align-items:center;gap:12px;font-weight:650;font-size:var(--fs-small)}
.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.status-dot{display:inline-block;width:6px;height:6px;background:#728c36;border-radius:50%;flex-shrink:0}
.green-dot{display:inline-block;width:6px;height:6px;background:#728c36;border-radius:50%;flex-shrink:0}
.announcement{height:auto;display:flex;justify-content:center;align-items:center;gap:5px;background:#e9eddf;color:#454d3a;font-size:var(--fs-note);min-height:35px;padding:6px 16px;flex-wrap:wrap;text-align:center}
.announcement a{font-weight:650;margin-left:1px}
.announcement a:hover{text-decoration:underline}
.header{position:relative;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:75px;border-bottom:1px solid var(--line);gap:8px}
.brand{display:flex;align-items:center;gap:9px;font-size:22px;line-height:1;font-weight:750;font-family:var(--display);letter-spacing:-.05em}
.brand-dot{font-size:9px;align-self:flex-start;margin:3px 0 0 -5px;letter-spacing:0}
.beta-badge{align-self:flex-start;margin:-3px 0 0 -4px;padding:3px 6px;border-radius:999px;background:#ece8fc;color:#5b38f0;font:600 9px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.nav-links{display:none;align-items:stretch;gap:0;margin-left:auto;margin-right:0;font-weight:500;font-size:var(--fs-small)}
.nav-links>a:hover{color:var(--purple)}
.external-arrow{font-size:10px;margin-left:2px}
.menu-toggle{display:flex}
.skip-link{position:fixed;left:20px;top:-60px;background:white;padding:10px 20px;z-index:99}
.skip-link:focus{top:10px}
.hero{padding-top:34px}
.hero-top{display:grid;grid-template-columns:1fr;gap:24px;align-items:end;padding-bottom:30px}
.hero-top .eyebrow{margin-bottom:18px}
.mini-spark{color:var(--purple);line-height:1;font-size:15px}
.hero-pitch{padding:0}
.hero-pitch>p:first-child{line-height:1.5;font-size:var(--fs-lead);letter-spacing:-.018em}
.hero-pitch>.muted{font-size:var(--fs-body);line-height:1.65;max-width:36ch}
.hero-actions{display:flex;gap:14px;align-items:center}
.hero-actions .button{padding:12px 13px;gap:10px;font-size:var(--fs-small)}
.hero-actions .text-link{white-space:nowrap;font-size:var(--fs-small)}
.product-stage{padding:12px 10px 10px;background:#e9e7f0;border:1px solid #dfdce8;border-radius:9px;position:relative;scroll-margin-top:25px}
.stage-top{display:flex;align-items:center;justify-content:space-between;color:#655e77;font-size:var(--fs-note)}
.stage-top>span:first-child{display:flex;align-items:center;gap:4px}
.tiny-star{color:#78658e;font-size:15px}
.preview-label{letter-spacing:.12em;font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
.preview-tabs{display:flex;width:100%;gap:2px;margin:12px 0 13px;border:1px solid #d6d1e2;border-radius:7px;padding:3px;background:#e3dfec}
.preview-tabs button{font-weight:550;font-size:clamp(.75rem,.7rem + .25vw,.875rem);border:0;border-radius:4px;background:transparent;padding:7px 6px;color:#6a627a;display:flex;align-items:center;gap:4px;transition:background .2s}
.preview-tabs button[aria-selected=true]{background:white;color:#342b49;box-shadow:0 1px 4px #31204512}
.preview-tabs button:hover{color:var(--ink)}
.stage-bottom{display:block;justify-content:space-between;color:#837992;padding-top:11px;gap:15px;font-size:var(--fs-note)}
.stage-bottom>span:first-child{display:flex;align-items:center;gap:6px}
.stage-bottom .green-dot{width:4px;height:4px}
.ecosystem{display:flex;align-items:center;justify-content:space-between;padding-block:24px 29px;border-bottom:1px solid var(--line);gap:19px}
.ecosystem>p{color:#5f685c;max-width:none;line-height:1.7;font-size:var(--fs-note)}
.ecosystem em{font-family:var(--serif);font-size:15px}
.tool-logos{display:flex;gap:20px 26px;align-items:center;flex-wrap:wrap}
.tool-logos>span{display:flex;gap:7px;align-items:center;font-weight:550;font-size:14px;letter-spacing:-.055em;color:#5d6458}
.tool-logos img{filter:grayscale(1);opacity:.7}
.text-logo{font-weight:700!important}
.section-intro{display:block;justify-content:space-between;align-items:end;gap:30px;margin-bottom:29px}
.section-intro .eyebrow{margin-bottom:23px}
.section-description{color:var(--muted);max-width:38ch;font-size:var(--fs-body);line-height:1.65}
.benefit-grid,.example-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,340px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:-18px;padding:4px 18px 14px;scroll-padding-inline:18px}
.benefit-grid::-webkit-scrollbar,.example-grid::-webkit-scrollbar{display:none}
.benefit,.example-card{scroll-snap-align:start}
.feature-art{height:188px;border-radius:8px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:20px}
.find-art{background:#e9e7f0}
.floating-file{position:absolute;top:27px;left:55px;transform:rotate(-14deg);font-size:13px;color:#927cb0;border-radius:5px;background:#f6f3fb;width:62px;height:75px;padding:35px 14px 0;border:1px solid #d7cde5;box-shadow:0 5px 10px #57436e10}
.search-mini{display:flex;align-items:center;width:77%;padding:13px 14px;background:white;border-radius:6px;box-shadow:0 4px 12px #48345e0c;color:#777080;font-size:14px;transform:rotate(-3deg);z-index:1}
.search-mini>span:last-child{margin-left:auto;color:#a397ad}
.found-pill{position:absolute;bottom:22px;right:35px;font-size:10px;padding:6px 12px;background:#f6f3fb;border:1px solid #d4cbe2;color:#6f5687;border-radius:5px;transform:rotate(3deg);z-index:2}
.guidelines-art{background:#eeeada;gap:45px}
.color-stack{display:flex;transform:rotate(-10deg)}
.color-stack i{height:80px;width:50px;background:#767751;box-shadow:0 3px 10px #34381915;border-radius:4px;border:3px solid #fbf9ef}
.color-stack i:nth-child(2){background:#c9ceae;margin-left:-12px;transform:rotate(13deg)}
.color-stack i:nth-child(3){background:#f5f3e8;margin-left:-10px;transform:rotate(25deg)}
.type-sample{font-family:var(--serif);line-height:1;font-size:85px;letter-spacing:-.06em;color:#686a4e}
.sync-pill{position:absolute;bottom:24px;left:65px;color:#86856b;font-size:10px;background:#f8f6ed;border-radius:5px;border:1px solid #e4decc;padding:5px 10px;transform:rotate(-3deg)}
.share-art{background:#e5ebdf}
.portal-mini{width:58%;background:#f9fbf7;border:1px solid #d7dfcf;border-radius:6px;transform:rotate(5deg);box-shadow:0 6px 20px #283d2510;padding:13px}
.portal-mini>span{display:flex;justify-content:space-between;border-bottom:1px solid #e4e9df;padding-bottom:9px;font-size:8px;color:#7b8874}
.portal-mini>div{display:flex;gap:5px;padding-top:12px}
.portal-mini i{height:65px;background:#c5d0b7;border-radius:3px;flex:1}
.portal-mini i:nth-child(2){background:#e1e6d5}
.portal-mini i:nth-child(3){background:#b0bda6}
.share-pill{position:absolute;bottom:21px;left:35px;transform:rotate(-3deg);font-size:10px;background:#f7faf3;border:1px solid #d0dbc5;border-radius:5px;padding:5px 10px;color:#7a896e}
.feature-number{letter-spacing:.12em;color:#68725f;font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
.benefit h3{margin:9px 0 10px;font-weight:550;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.025em}
.benefit p{font-size:var(--fs-body);line-height:1.65;color:var(--muted);max-width:44ch}
.benefit .text-link{margin-top:15px;font-size:var(--fs-small)}
.agent-section{background:#232c24;color:#f7f7ee;padding:58px 0}
.agent-layout{display:grid;grid-template-columns:1fr;gap:37px;align-items:center}
.agent-copy .eyebrow{color:#aeba8d}
.agent-copy>p:not(.eyebrow){margin-top:25px;font-size:var(--fs-body);line-height:1.65;max-width:44ch}
.agent-copy>p.agent-muted{color:#acb5a9;margin-top:15px;font-size:.9375rem}
.agent-copy .text-link{color:#e3edb5;margin-top:26px;font-size:var(--fs-small)}
.agent-assurances{display:flex;gap:10px;border-top:1px solid #46503f;margin-top:31px;padding-top:20px;color:#aebb9f;font-size:var(--fs-note)}
.agent-demo{background:#f9f8f3;color:#3f4037;border-radius:10px;box-shadow:0 16px 35px #11171130;transform:none;border:1px solid #66715b}
.chat-header{display:flex;align-items:center;gap:7px;padding:15px;border-bottom:1px solid #e7e6dc;font-size:var(--fs-note)}
.example-badge{margin-left:auto;letter-spacing:.12em;color:#6b6a5c;font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
.chat-body{padding:20px}
.user-message{padding:12px;background:#eae8de;border-radius:9px 9px 0 9px;line-height:1.7;font-size:var(--fs-small);margin-left:20px}
.agent-tool{display:flex;gap:8px;align-items:center;margin-top:23px;font-size:var(--fs-note)}
.agent-tool>span>span{color:#6b6a5c;font-size:var(--fs-label)}
.tool-status{margin-left:auto;display:grid;place-items:center}
.tool-status>*{grid-area:1/1}
.tool-check{color:#56663a}
.tool-dots{display:flex;gap:3px;opacity:0}
.tool-dots i{width:4px;height:4px;border-radius:50%;background:#8d8b7d}
.agent-reply{margin:13px 0 16px;line-height:1.75;font-size:var(--fs-small)}
.rendition{border:1px solid #dddcd1;border-radius:6px;overflow:hidden}
.rendition img{width:100%;height:auto;object-fit:cover}
.rendition>div{display:flex;justify-content:space-between;padding:8px;color:#66655a;font-size:var(--fs-label)}
.chat-footer{display:flex;align-items:center;gap:7px;margin-top:16px;color:#5d6650;font-size:var(--fs-note)}
.image-credit{color:#66655a;margin-top:10px;font-size:var(--fs-label)}
.example-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fafaf6;transition:transform .2s,box-shadow .2s}
@media(hover:hover){.example-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #26301e08}}
.example-image{height:150px;display:flex;align-items:center;justify-content:center;position:relative;background:#f0e8dd}
.firefox-example .example-image{background:#e8e4f1}
.rust-example .example-image{background:#e7e9dc}
.example-arrow{position:absolute;right:10px;top:10px;color:#6b6356;font-size:13px}
.example-text{padding:22px 17px}
.example-text h3{font-weight:550;font-size:var(--fs-h3);line-height:1.25;margin-bottom:5px;letter-spacing:-.025em}
.example-text>span{display:block;color:#68725f;font-size:var(--fs-small)}
.example-text>.example-category{letter-spacing:.12em;margin-top:18px;color:#68725f;font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
.examples-note{color:#68725f;margin-top:17px;line-height:1.8;font-size:var(--fs-note)}
.examples-note a{text-decoration:underline;text-underline-offset:2px}
.cloud-section{background:#eeefe7;border-block:1px solid var(--line)}
.center-intro{text-align:center}
.center-intro .eyebrow{justify-content:center}
.center-intro>p:last-child{color:#626d56;font-size:var(--fs-body);line-height:1.65;margin-top:19px}
.plans{display:grid;grid-template-columns:1fr;gap:18px;max-width:1100px;margin:49px auto 0;margin-top:31px;scroll-margin-top:40px}
.plans article{border:1px solid #d9ddcf;border-radius:11px;padding:27px;display:flex;flex-direction:column}
.plans article{background:#f1f2ea}
.plans .featured{background:#fbfcf7;box-shadow:0 9px 26px #303a1f06;position:relative;overflow:hidden;border-color:#cbc2f0}
.plans .featured:before{position:absolute;top:0;left:0;width:100%;height:4px;background:var(--purple);content:''}
.featured .plan-tag{border-color:#d9d0fb;color:#5b38f0;background:#ece8fc}
.plans-more{text-align:center;margin-top:14px}
.plan-tag{font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;border-radius:30px;border:1px solid #dde3d0;padding:5px 8px;color:#56643f;background:#f5f8ed}
.plan-price{margin:14px 0 0;color:#616c56;font-size:var(--fs-small)}
.plan-price strong{display:block;font-family:var(--display);font-size:clamp(1.75rem,1.6rem + .6vw,2.125rem);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.plan-footnote a{color:inherit;text-decoration:underline;white-space:nowrap}
.plans-note{text-align:center;color:#5a6650;margin:22px auto 0;max-width:1100px;font-size:var(--fs-note)}
.beta-tag{display:flex;align-items:center;gap:6px;font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;border:1px solid #d9d0fb;border-radius:999px;padding:5px 10px;color:#5b38f0;background:#ece8fc}
.beta-tag .status-dot{width:4px;height:4px;background:#6d4aff}
.plan-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.plan-icon{font-size:25px;line-height:1;color:#746092}
.code-icon{font:19px monospace;color:#8c977c}
.small-tag{letter-spacing:.12em;color:#5d6a51;font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
.plans h3{margin-bottom:10px;font-size:clamp(1.5rem,1.35rem + .6vw,1.875rem)}
.plan-description{color:#616c56;font-size:var(--fs-body);line-height:1.65}
.plans ul{list-style:none;padding:17px 0 23px;margin:20px 0 0;margin-top:18px;border-top:1px solid #e0e5d7;flex:1}
.plans li{padding:7px 0 7px 22px;position:relative;color:#647256;font-size:.9375rem}
.plans li:before{content:'✓';position:absolute;left:0;color:#94a677}
.plans .button{width:100%;justify-content:space-between;font-size:var(--fs-small)}
.plan-footnote{text-align:center;color:#5a6650;margin-top:12px;font-size:var(--fs-note)}
.open-source-section{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;border-bottom:1px solid var(--line)}
.opensource-symbol{display:flex;align-items:center;justify-content:center;gap:10px;background:#eaeddf;border-radius:50%;width:175px;height:175px;margin:auto;color:#82916f}
.opensource-symbol>span{font:125px var(--serif);font-weight:400;line-height:1;font-size:75px;color:#a0ad8d}
.opensource-symbol>i{font-style:normal;line-height:1;font-size:72px;color:#596c48}
.open-source-section p:not(.eyebrow){color:var(--muted);font-size:var(--fs-body);line-height:1.65;max-width:56ch;margin-top:24px}
.opensource-links{display:flex;gap:16px;margin-top:28px}
.faq-section{display:grid;grid-template-columns:1fr;gap:30px}
.faqs{border-top:1px solid #dce0d4}
.faqs details{border-bottom:1px solid #dce0d4}
.faqs summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;gap:20px;padding:22px 0;padding-block:19px;font-size:1rem;font-weight:550}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary>span{color:#6b7560;font-size:19px;line-height:1;transition:transform .2s}
.faqs details[open] summary>span{transform:rotate(45deg)}
.faqs details[open] summary{padding-bottom:12px}
.faqs p{color:#616d54;font-size:var(--fs-body);line-height:1.65;padding:0 20px 22px 0}
.final-cta{position:relative;background:var(--lime);padding:47px 20px;text-align:center;border-radius:9px;overflow:hidden}
.final-cta .eyebrow{justify-content:center;color:#4f5a2c}
.final-cta>p:not(.eyebrow){color:#586537;font-size:var(--fs-body);line-height:1.65}
.final-cta .button{margin-top:26px;font-size:var(--fs-small)}
.final-note{display:block;color:#5e6c3e;margin-top:16px;font-size:var(--fs-note)}
.final-spark{position:absolute;line-height:1;font-size:56px;color:#c8d881;transform:rotate(15deg);pointer-events:none}
.footer{padding-bottom:23px;padding-top:34px}
.footer-main{display:flex;align-items:flex-start;gap:25px;border-bottom:1px solid var(--line);padding-bottom:23px}
.footer-main .brand{font-size:20px}
.footer-main>span{color:#66715b;font-size:var(--fs-small)}
.footer-main>div{margin-left:0;display:flex;gap:25px;font-size:var(--fs-small)}
.footer-main a:hover{color:var(--purple)}
.footer-bottom{display:flex;justify-content:space-between;gap:8px;color:#69745e;padding-top:22px;font-size:var(--fs-note)}
.legal-note{color:#69745e;margin-top:12px;text-align:left}
.nav-cta{font-size:var(--fs-note)}
.hero-top>div{min-width:0}
li{text-wrap:pretty}
.final-cta h2{font-size:var(--fs-display)}
.opensource-links .text-link{font-size:var(--fs-small)}
@media(max-width:360px){
.hero-actions .text-link{gap:7px}
.nav .brand{font-size:18px;gap:6px}
.nav-cta{gap:7px;padding:8px 11px;padding-inline:9px;white-space:nowrap}
.nav .brand img{width:24px;height:24px}
.nav .menu-toggle{flex-shrink:0}
}
@media(max-width:640px){
.brand-dot{display:none}
.nav-links{position:fixed;top:var(--sheet-top,75px);left:0;right:0;bottom:0;flex-direction:column;background:var(--paper);padding:8px 18px 32px;font-family:var(--display);font-size:1.75rem;letter-spacing:-.02em;overflow-y:auto;opacity:0;translate:0 -12px;transition:opacity .25s,translate .35s var(--ease),display .35s allow-discrete}
.nav-links.is-open{opacity:1;translate:none}
@starting-style{.nav-links.is-open{opacity:0;translate:0 -12px}}
html:has(.nav-links.is-open){overflow:hidden}
.plans[data-show=free] article:not([data-plan=free]),.plans[data-show=team] article:not([data-plan=team]),.plans[data-show=business] article:not([data-plan=business]){display:none}
.plans article{view-transition-name:plan}
.announce-long{display:none}
.menu-toggle{flex-direction:column;gap:5px;order:3;background:none;border:1px solid #d7dccf;border-radius:5px;width:44px;height:44px;justify-content:center;align-items:center;padding:0}
.hero-top .eyebrow{letter-spacing:.11em}
.hero-pitch{display:block}
.hero-pitch>p:first-child{margin:0;margin-bottom:10px}
.hero-actions{margin:0;margin-top:22px}
.preview-label{display:none}
.preview-tabs{justify-content:space-between}
.preview-tabs button{flex:1;justify-content:center;white-space:nowrap}
.stage-bottom>span:first-child{justify-content:center}
.ecosystem{flex-direction:column}
.tool-logos{justify-content:center;max-width:360px}
.tool-logos img{width:17px;height:17px}
.section-description{padding:0;margin-top:22px}
.agent-assurances{justify-content:space-between;max-width:360px}
.rendition img{aspect-ratio:1.905}
.final-cta>p:not(.eyebrow){margin-inline:auto;margin-top:19px;max-width:230px}
.final-cta .button{padding:13px 16px;gap:14px}
.final-spark{top:auto;bottom:30px;right:-13px}
.footer-main{flex-direction:column}
.footer-bottom{flex-wrap:wrap}
.legal-note{line-height:1.7;font-size:var(--fs-label)}
.nav .brand{margin-right:auto}
.nav-cta{min-height:44px}
.announcement .status-dot{width:4px;height:4px}
.menu-toggle span{height:1.5px;width:16px;background:#3e4b32;transition:translate .3s var(--ease),rotate .3s var(--ease)}
.menu-toggle[aria-expanded=true] span:first-child{translate:0 3.25px;rotate:45deg}
.menu-toggle[aria-expanded=true] span:last-child{translate:0 -3.25px;rotate:-45deg}
.nav-links.is-open{display:flex}
.nav-links>a{padding:16px 0;border-bottom:1px solid var(--line)}
.hero-pitch>p:first-child br{display:none}
.preview-tabs button>span{font-size:10px;display:none}
.stage-bottom>span:last-child{display:block;margin-top:8px;text-align:center}
.find-art .floating-file{left:60px}
.example-image>img{width:72px;height:72px}
.center-intro>p:last-child br{display:none}
.footer-bottom>span:last-child{width:100%}
}
@media(max-width:850px){
.hero-pitch{grid-template-columns:1fr 1fr;column-gap:40px}
.hero-pitch>p:first-child{align-self:end}
.hero-pitch>.muted{grid-column:1;grid-row:2}
.hero-actions{grid-column:2;grid-row:1}
.footer-main>span{display:none}
.chat-header img{width:18px}
}
@media(min-width:361px){
h1{font-size:clamp(35px,9.2vw,57px);line-height:1.08;font-family:var(--display);font-weight:500}
.nav{gap:10px}
.hero-actions{gap:22px}
.hero-actions .button{padding:13px 16px;gap:15px}
.opensource-links{gap:23px}
}
@media(min-width:361px) and (max-width:640px){
.nav-cta{gap:9px;padding:8px 11px}
.nav .brand img{width:28px;height:28px}
}
@media(min-width:361px) and (max-width:850px){
.nav .brand{font-size:20px}
}
@media(min-width:641px){
html{scroll-padding-top:100px}
.wrap{width:calc(100% - 56px)}
.section{padding-block:76px}
h1{line-height:1.08;font-size:68px;font-family:var(--display);font-weight:500}
.eyebrow{margin-bottom:24px}
.announcement{gap:9px}
.announcement a{margin-left:5px}
.nav{min-height:91px;gap:22px}
.nav-links{display:flex;align-items:center;gap:18px}
.menu-toggle{display:none}
.hero{padding-top:42px}
.hero-top{gap:25px;padding-bottom:35px}
.hero-top .eyebrow{margin-bottom:22px}
.mini-spark{font-size:19px;line-height:1}
.hero-pitch>p:first-child{line-height:1.45;font-size:var(--fs-lead)}
.hero-actions{gap:13px}
.hero-actions .button{padding:13px 17px;padding-inline:12px;gap:12px}
.product-stage{padding:17px 18px 13px;border-radius:13px}
.stage-top>span:first-child{gap:7px}
.tiny-star{font-size:18px}
.preview-tabs{width:fit-content;gap:4px;margin:9px auto 17px;padding:4px}
.preview-tabs button{padding:8px 20px;gap:7px}
.stage-bottom{display:flex;padding-top:13px}
.ecosystem{padding-block:32px 38px;gap:25px}
.ecosystem>p{max-width:110px}
.tool-logos{gap:19px}
.section-intro{display:flex;margin-bottom:46px}
.section-description{padding-bottom:5px}
.benefit-grid,.example-grid{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin-inline:0;padding:0;scroll-snap-type:none}
.benefit-grid{gap:18px}
.feature-art{height:150px;margin-bottom:25px}
.search-mini{font-size:12px}
.found-pill{bottom:22px;right:14px;font-size:8px}
.guidelines-art{gap:20px}
.color-stack i{height:62px;width:34px}
.type-sample{font-family:var(--serif);line-height:1;font-size:62px}
.sync-pill{bottom:24px;left:20px;font-size:8px}
.portal-mini{width:61%}
.portal-mini i{height:47px}
.share-pill{bottom:21px;left:12px;font-size:7px}
.benefit h3{margin:12px 0 12px}
.benefit .text-link{margin-top:22px}
.agent-section{padding:88px 0}
.agent-layout{grid-template-columns:1fr 1fr;gap:35px}
.chat-body{padding:16px}
.rendition img{height:140px}
.example-grid{gap:25px}
.example-image{height:160px}
.example-arrow{right:17px;top:14px;font-size:18px}
.example-text{padding:20px 18px}
.example-text>.example-category{margin-top:23px}
.examples-note{margin-top:20px}
.center-intro>p:last-child{margin-top:25px}
.plans{gap:22px;margin:49px auto 0}
.plans ul{padding:22px 0 26px;margin:20px 0 0}
.open-source-section{grid-template-columns:.85fr 1fr;gap:50px}
.opensource-symbol{gap:13px;width:230px;height:230px}
.opensource-symbol>span{font:125px var(--serif);font-weight:400;line-height:1;font-size:95px}
.opensource-symbol>i{font-style:normal;line-height:1;font-size:95px}
.opensource-links{gap:16px}
.faq-section{grid-template-columns:.85fr 1.15fr;gap:45px}
.faqs summary{padding:22px 0}
.final-cta{padding:62px 35px 58px;border-radius:12px}
.final-cta>p:not(.eyebrow){margin-top:23px}
.final-spark{right:4%;top:27%;line-height:1;font-size:90px}
.footer{padding-top:48px;padding-bottom:23px}
.footer-main{align-items:center;gap:22px;padding-bottom:28px}
.footer-main>div{margin-left:auto}
.footer-bottom{gap:20px}
.legal-note{text-align:center;font-size:var(--fs-label)}
}
@media(min-width:641px) and (max-width:850px){
.hero-pitch{display:grid}
.hero-pitch>p:first-child{margin:0}
.hero-actions{margin:0}
.tool-logos img{width:18px;height:18px}
.nav-cta{gap:12px;padding:9px 12px}
}
@media(min-width:851px){
.section{padding-block:105px}
h1{line-height:1.08;font-family:var(--display);font-weight:500;font-size:min(5.3vw,72px)}
.nav{gap:35px}
.nav-links{gap:22px;margin-left:auto;margin-right:12px}
.hero{padding-top:61px}
.hero-top{grid-template-columns:1.25fr 1fr;gap:15px;padding-bottom:49px}
.hero-pitch{padding:0 0 3px 23px;padding-left:15px}
.hero-pitch>p:first-child{margin-bottom:12px}
.hero-actions{margin-top:22px}
.product-stage{padding:18px 30px 15px}
.ecosystem>p{max-width:145px}
.tool-logos{gap:24px}
.tool-logos>span{font-weight:550;font-size:16px}
.section-intro{gap:60px}
.benefit-grid{gap:28px}
.feature-art{height:184px}
.found-pill{right:32px;bottom:22px;font-size:9px}
.guidelines-art{gap:30px}
.color-stack i{height:75px;width:46px}
.type-sample{font-family:var(--serif);font-size:81px;line-height:1}
.sync-pill{bottom:24px;left:72px;font-size:9px}
.share-pill{bottom:21px;left:24px;font-size:9px}
.agent-layout{gap:60px}
.agent-assurances{gap:19px}
.agent-demo{transform:rotate(1deg)}
.chat-header{gap:10px;padding:17px 20px}
.chat-body{padding:22px}
.user-message{padding:14px 18px;margin-left:37px}
.rendition img{height:165px}
.rendition>div{padding:9px 12px}
.example-image{height:193px}
.example-text{padding:22px 23px}
.plans article{padding:32px 35px}
.open-source-section{gap:100px}
.opensource-symbol{gap:20px;width:290px;height:290px}
.opensource-symbol>span{font:125px var(--serif);font-weight:400;line-height:1}
.opensource-symbol>i{font-style:normal;font-size:122px;line-height:1}
.opensource-links{gap:25px}
.faq-section{gap:80px}
.final-spark{top:22%;right:5%;line-height:1;font-size:115px}
}
@media(min-width:1101px){
.wrap{width:min(1200px,calc(100% - 80px))}
.nav-links{gap:31px;margin-left:auto;margin-right:30px}
.hero-top{grid-template-columns:1.42fr 1fr;gap:40px}
.hero-pitch{padding:0 0 3px 23px}
.hero-actions{gap:22px}
.hero-actions .button{padding:13px 17px;gap:19px}
.tool-logos{gap:43px}
.tool-logos>span{font-size:19px;font-weight:550}
.agent-layout{gap:110px}
.final-spark{right:6%;top:22%;font-size:155px;line-height:1}
}
@media(min-width:1500px){
.wrap{width:min(1280px,calc(100% - 100px))}
h1{line-height:1.08;font-family:var(--display);font-weight:500;font-size:78px}
.hero-top{grid-template-columns:1.6fr 1fr}
}
/* Product preview: the real app, rebuilt at its real sizes from its light theme (app shell, library grid, brand
   builder) and the Blender portal as it is served. The builder's canvas and the portal read the same page
   templates, so a section added and published in one shows up in the other. */
.app-window{--a-line:#eae8eb;--a-input:#dcdae0;--a-soft:#f4f4f7;--a-muted:#67646e;--a-violet:#6d4aff;--a-on:#ece8fc;--a-on-ink:#5b38f0;position:relative;display:grid;grid-template-columns:minmax(0,1fr);height:560px;background:#fff;border:1px solid #d2cedd;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px -28px #26104760;font:14px/20px var(--sans);color:var(--ink);text-align:left}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-window kbd{font:500 11px/16px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--a-muted);border:1px solid var(--a-line);border-radius:4px;padding:0 4px;margin-left:auto}
.app-window button{font:inherit;color:inherit}
.preview-panel{min-width:0;min-height:0}

/* Sidebar, shared by the library and the builder. */
.app-nav{display:none;flex-direction:column;background:#fafafc;border-right:1px solid var(--a-line);padding:8px;overflow:hidden}
.app-window[data-screen=portal] .app-nav{display:none}
.org{display:flex;align-items:center;gap:8px;padding:6px 8px 8px}
.org b{display:block;font-weight:600;letter-spacing:-.025em;line-height:18px}
.org small{display:block;font-size:12px;line-height:16px;color:var(--a-muted)}
.org .i{margin-left:auto;color:var(--a-muted)}
.jump{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;margin-bottom:8px;border:1px solid var(--a-line);border-radius:8px;background:#fff;color:var(--a-muted);box-shadow:0 1px 2px #0000000d}
.nav-group{display:grid;gap:2px}
.nav-item{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:8px;white-space:nowrap}
.nav-item em{margin-left:auto;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--a-muted)}
.nav-item .star{margin-left:auto;width:14px;height:14px;color:var(--a-muted)}
.app-window[data-screen=library] [data-for=library-collection],.app-window[data-screen=brand] [data-for=brand],.app-window[data-screen=overview] [data-for=brand],.app-window[data-screen=overview] [data-for=brands],.app-window[data-screen=brand] [data-for=brands]{background:var(--a-on);color:var(--a-on-ink);font-weight:500}
.app-window[data-screen=library] [data-for=library-collection] em{color:var(--a-on-ink)}
.nav-label{display:flex;align-items:center;justify-content:space-between;padding:14px 8px 4px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--a-muted)}
.nav-label .i{width:14px;height:14px}
.brand-dot{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--a-soft);font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace}
.brand-dot.user{border-radius:50%}
.nav-foot{margin-top:auto;display:grid;gap:2px;padding-top:8px}
.nav-foot .nav-item:last-child .i{margin-left:auto;color:var(--a-muted)}

/* The main column: top bar, tabs, scrolling body. */
.app-main{position:relative;display:flex;flex-direction:column;background:#fff}
.app-top{display:flex;align-items:center;gap:10px;height:52px;flex:none;padding:0 12px;border-bottom:1px solid var(--a-line)}
.app-top .dim{color:var(--a-muted)}
.crumbs{display:none;align-items:center;gap:6px;color:var(--a-muted);white-space:nowrap;overflow:hidden}
.crumbs b{font-weight:400;color:var(--ink)}
.crumbs .i{width:14px;height:14px}
.filter{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:32px;padding:0 8px;border:1px solid var(--a-input);border-radius:8px;color:var(--a-muted);box-shadow:0 1px 2px #0000000d}
.filter:focus-within{border-color:var(--a-violet);box-shadow:0 0 0 3px #6d4aff33}
.filter input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;color:var(--ink)}
.filter input::placeholder{color:var(--a-muted)}
.filter input::-webkit-search-cancel-button{display:none}
.upload{display:flex;height:32px;border-radius:8px;background:var(--a-violet);color:#fff;font-weight:500;overflow:hidden}
.upload>span{display:flex;align-items:center;gap:6px;padding:0 10px}
.upload>span:first-child{font-size:0;padding:0 8px}
.upload>span:last-child{border-left:1px solid #ffffff4d;padding:0 6px}
.app-tabs{display:flex;gap:4px;height:44px;flex:none;padding:0 12px;border-bottom:1px solid var(--a-line)}
.app-tabs span{position:relative;display:flex;align-items:center;gap:6px;padding:0 8px;color:var(--a-muted)}
.app-tabs .on{color:var(--ink)}
.app-tabs .on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--a-violet);border-radius:2px}
.app-tabs em{font:500 11px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;background:var(--a-soft);border-radius:999px;padding:0 6px;color:var(--ink)}
.app-scroll{flex:1;min-height:0;overflow:auto;padding:18px 14px 80px}
.coll-head{display:flex;align-items:center;gap:8px}
.coll-head h3{font:600 20px/28px var(--display);letter-spacing:-.025em}
.count{font:500 12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--a-soft);border-radius:999px;padding:2px 8px}
.head-tools{display:none;margin-left:auto;gap:6px}
.head-tools .i{box-sizing:content-box;padding:7px;border:1px solid var(--a-line);border-radius:8px}
.coll-desc{color:var(--a-muted);margin:4px 0 16px}
.facets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.select-all{display:flex;align-items:center;gap:8px;margin-right:4px}
.select-all input{width:16px;height:16px;margin:0;accent-color:var(--a-violet)}
.facet{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px dashed var(--a-input);border-radius:8px;background:#fff;font-weight:500;box-shadow:0 1px 2px #0000000d;white-space:nowrap}
.facet .i{color:var(--a-muted)}
.facet.dead{display:none}
.facet[data-value]{border-style:solid;border-color:#cfc6fb;background:var(--a-on);color:var(--a-on-ink)}
.facet[data-value] .i{color:var(--a-on-ink);rotate:45deg}
.facet-wrap{position:relative}
.facet-menu{position:absolute;z-index:5;top:38px;left:0;display:grid;min-width:150px;padding:4px;background:#fff;border:1px solid var(--a-line);border-radius:10px;box-shadow:0 12px 30px -12px #20241f40}
.facet-menu button{text-align:left;padding:6px 8px;border:0;border-radius:6px;background:none}
.facet-menu button:hover,.facet-menu button:focus-visible{background:var(--a-soft)}
.view-tools{display:flex;gap:8px;margin-left:auto}
.tool,.seg button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--a-line);border-radius:8px;background:#fff;color:var(--a-muted)}
.seg{display:flex}
.seg button{border-radius:0}
.seg button:first-child{border-radius:8px 0 0 8px}
.seg button:last-child{border-radius:0 8px 8px 0;border-left:0}
.seg button[aria-checked=true]{background:var(--a-soft);color:var(--ink)}

/* Asset tiles: grid and list, gray, white, dark or checker wells. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;background:#fff;border:1px solid var(--a-line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px #0000000d;cursor:pointer;transition:box-shadow .2s,border-color .2s}
@media(hover:hover){.tile:hover{box-shadow:0 6px 18px -8px #20241f33}}
.tile[aria-pressed=true]{border-color:var(--a-violet);box-shadow:0 0 0 1px var(--a-violet)}
.tile[aria-pressed=true]::after{content:'';position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:6px;background:var(--a-violet)}
.tile[aria-pressed=true]::before{content:'';position:absolute;z-index:1;top:14px;right:16px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg}
.thumb{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--a-soft);transition:background .3s}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px}
.thumb.logo img{inset:26%;width:48%;height:48%}
.thumb.logo img{padding:0}
.tiles[data-well=white] .thumb{background:#fff}
.tiles[data-well=dark] .thumb{background:#171717}
.tiles[data-well=checker] .thumb{background:repeating-conic-gradient(#ececf0 0 25%,#fff 0 50%) 0 0/16px 16px}
.thumb.dark,.tiles .thumb.dark{background:#171717}
.thumb.dark img{filter:brightness(0) invert(1)}
.type{position:absolute;top:8px;left:8px;font:500 11px/16px ui-monospace,SFMono-Regular,Menlo,monospace;background:#ffffffd9;backdrop-filter:blur(6px);border-radius:999px;padding:1px 7px}
.play{position:absolute;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#000000a6;color:#fff}
.play .i{width:14px;height:14px;fill:#fff;stroke:none;margin-left:2px}
.dur{position:absolute;right:8px;bottom:8px;font:500 11px/16px ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;background:#000000a6;border-radius:4px;padding:0 5px}
.meta{display:grid;gap:2px;padding:10px 12px 12px;min-width:0}
.meta b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta small{font-size:12px;line-height:16px;color:var(--a-muted)}
.tags{display:flex;gap:4px;margin-top:6px;overflow:hidden}
.tags i{font-style:normal;font-size:12px;line-height:16px;border:1px solid var(--a-line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.tiles[data-layout=list]{grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--a-line);border-radius:12px;overflow:hidden}
.tiles[data-layout=list] .tile{flex-direction:row;align-items:center;gap:12px;padding:8px 12px;border:0;border-bottom:1px solid var(--a-line);border-radius:0;box-shadow:none}
.tiles[data-layout=list] .tile:last-child{border-bottom:0}
.tiles[data-layout=list] .tile[aria-pressed=true]{background:#f8f6ff}
.tiles[data-layout=list] .tile::after,.tiles[data-layout=list] .tile::before{display:none}
.tiles[data-layout=list] .thumb{width:40px;flex:none;border-radius:6px;overflow:hidden}
.tiles[data-layout=list] .thumb img{padding:2px}
.tiles[data-layout=list] .type,.tiles[data-layout=list] .play,.tiles[data-layout=list] .dur,.tiles[data-layout=list] .tags{display:none}
.tiles[data-layout=list] .meta{display:flex;align-items:center;gap:16px;flex:1;padding:0}
.tiles[data-layout=list] .meta b{flex:1}
.empty-state{text-align:center;padding:48px 16px;color:var(--a-muted)}
.multi-bar{position:absolute;z-index:6;left:50%;bottom:16px;translate:-50% 0;display:flex;align-items:center;gap:14px;padding:6px 6px 6px 14px;border-radius:12px;background:var(--ink);color:#fff;white-space:nowrap;box-shadow:0 14px 30px -12px #20241f80;transition:opacity .25s,translate .35s var(--ease)}
@starting-style{.multi-bar{opacity:0;translate:-50% 12px}}
.multi-bar span{display:none;align-items:center;gap:6px;color:#d8dad3}
.multi-bar button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:#ffffff1a;color:#fff}

/* The brand builder: pages and layers, the canvas, sections to add, device sizes, publish. */
.tool-row{display:none;align-items:center;gap:12px;margin-left:auto}
.tool-row .dim{opacity:.45}
.tool-row .sep{width:1px;height:16px;background:var(--a-line)}
.badge-wrap{position:relative;display:flex}
.badge-wrap em{position:absolute;top:-7px;right:-9px;font:600 10px/14px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:#fff;background:#d97706;border-radius:999px;padding:0 4px}
.publish{display:flex;align-items:center;gap:6px;height:32px;margin-left:auto;padding:0 12px;border:0;border-radius:8px;background:var(--a-violet);color:#fff!important;font-weight:500;white-space:nowrap;transition:background .3s,width .3s}
.publish.busy .i{animation:spin .8s linear infinite}
.publish.done{background:#2f6b2a}
@keyframes spin{to{rotate:360deg}}
.builder{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
.pages-pane{display:none;flex-direction:column;padding:10px 8px;border-right:1px solid var(--a-line);overflow:auto}
.pane-head{display:flex;align-items:center;gap:6px;padding:4px 6px 8px;font-weight:500}
.pane-head small{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--a-muted)}
.pane-head .i{margin-left:auto;color:var(--a-muted)}
.page-tree{display:grid;gap:2px}
.page-tree button{height:30px;padding:0 10px;border:0;border-radius:8px;background:none;text-align:left}
.page-tree button:hover{background:#f7f7f9}
.page-tree button[aria-current=page]{background:var(--a-soft);font-weight:500}
.pane-hint{font-size:12px;line-height:16px;color:var(--a-muted);padding:8px 6px 12px;margin-bottom:10px;border-bottom:1px solid var(--a-line)}
.layers{display:grid;gap:2px}
.layer{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:6px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer::before{content:'';width:14px;height:10px;flex:none;border-radius:2px;border:1px solid var(--a-input);background:var(--a-soft)}
.layer.sel{background:var(--a-on);color:var(--a-on-ink)}
.canvas-wrap{min-height:0;overflow:auto;background:#fff;transition:background .3s}
.canvas-wrap:has(.canvas:not([data-device=desktop])){background:var(--a-soft)}
.canvas{margin:0 auto;max-width:100%;transition:max-width .5s var(--ease),margin .5s var(--ease)}
.canvas[data-device=tablet]{max-width:560px;margin-top:16px}
.canvas[data-device=phone]{max-width:340px;margin-top:16px}
.canvas:not([data-device=desktop]) .brand-site{border-radius:12px;box-shadow:0 10px 30px -18px #0006}
#builder-page section,#builder-page .page-head{position:relative;outline:1px solid transparent;outline-offset:6px;border-radius:4px;cursor:pointer;transition:outline-color .2s}
@media(hover:hover){#builder-page section:hover,#builder-page .page-head:hover{outline-color:#6d4aff80}}
#builder-page .sel{outline:2px solid var(--a-violet)}
#builder-page .sel::before{content:attr(data-label);position:absolute;top:-30px;left:-6px;font:500 11px/18px var(--sans);color:#fff;background:var(--a-violet);border-radius:5px;padding:0 6px}
#builder-page .fresh{animation:land .7s var(--ease)}
@keyframes land{from{opacity:0;translate:0 14px;background:#6d4aff26}}
.add-section{display:grid;justify-items:center;gap:10px;margin:14px;padding:16px;border:1px dashed var(--a-input);border-radius:12px;background:#fff}
.add-btn{display:flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;background:var(--a-violet);color:#fff;font-weight:500}
.templates{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.templates button{padding:4px 10px;border:1px solid var(--a-line);border-radius:999px;background:#fff;font-size:12px;line-height:16px;color:var(--a-muted)!important;transition:color .2s,border-color .2s}
.templates button:hover{color:var(--ink)!important;border-color:var(--a-input)}
.devices{position:sticky;bottom:12px;display:flex;gap:2px;width:fit-content;margin:0 auto 12px;padding:3px;border:1px solid var(--a-line);border-radius:10px;background:#fff;box-shadow:0 6px 18px -10px #20241f40}
.devices button{display:grid;place-items:center;width:30px;height:28px;padding:0;border:0;border-radius:7px;background:none;color:var(--a-muted)}
.devices button[aria-checked=true]{background:var(--a-soft);color:var(--ink)}
.toast{position:absolute;z-index:6;right:14px;bottom:14px;left:14px;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 14px 30px -12px #20241f80;transition:opacity .3s,translate .4s var(--ease)}
@starting-style{.toast{opacity:0;translate:0 12px}}
.toast .i{color:#8fe09f}
.toast span{flex:1}
.toast button{border:0;border-radius:7px;padding:4px 10px;background:#ffffff1f;color:#fff}

/* The Blender guidelines, as its brand site draws them: Inter on Studio Night, or on white. */
.brand-site{--g:#1c1e22;--t:#fff;--m:#b0b0b2;--l:#34363b;--s:#25272c;background:var(--g);color:var(--t);font:15px/1.6 Inter,system-ui,sans-serif;padding:26px 20px 40px;min-height:100%;transition:background .4s,color .4s}
[data-ground=light] .brand-site{--g:#fff;--t:#1c1e22;--m:#5c5f66;--l:#e4e4e7;--s:#f4f4f5}
.brand-site h1,.brand-site h2{font-family:inherit;white-space:normal}
.brand-site h1{font-size:34px;line-height:1.05;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.brand-site h2{font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.brand-site .num{font-size:12px;color:var(--m);margin-bottom:10px}
.brand-site .lede{font-size:16px;line-height:1.5;color:var(--m);max-width:36em}
.page-head small{display:block;margin-top:10px;font-size:12px;color:var(--m)}
.brand-site section{margin-top:26px;padding-top:24px;border-top:1px solid var(--l)}
.brand-site p,.brand-site figure,.brand-site ul,.brand-site ol,.brand-site blockquote{margin:0}
.kit{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.kit-btn{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--l);border-radius:6px;background:var(--s);color:var(--t)!important;font-size:13px;font-weight:500}
.kit-btn.busy .i{animation:spin .8s linear infinite}
.kit-btn.done{border-color:#2f6b2a;color:#8fe09f!important}
[data-ground=light] .kit-btn.done{color:#2f6b2a!important}
.kit small{font-size:13px;color:var(--m)}
.marks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mark{display:grid;place-items:center;aspect-ratio:4/3;border:1px solid var(--l);border-radius:10px}
.checker{background:repeating-conic-gradient(color-mix(in oklab,var(--g) 88%,var(--t)) 0 25%,var(--g) 0 50%) 0 0/16px 16px}
.mark img{width:36%;height:auto}
.mark.white img,.brand-site .white img{filter:brightness(0) invert(1)}
[data-ground=light] .mark.white{background:#1c1e22}
.marks figcaption{font-size:13px;line-height:1.45;color:var(--m);margin-top:8px}
.marks figcaption small{display:block;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}
.marks figcaption b,.swatches b,.habits b{display:block;font-size:15px;font-weight:600;color:var(--t);margin:4px 0 2px}
.anatomy{list-style:none;padding:0;display:grid;gap:10px;font-size:14px;color:var(--m)}
.anatomy b{display:block;color:var(--t)}
.brand-site code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--s);border:1px solid var(--l);border-radius:4px;padding:0 5px;color:var(--t)}
.cover{text-align:center;padding:20px 0 8px;border-top:0!important;margin-top:0!important}
.logo-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--l);border-radius:12px;background:var(--s)}
.logo-chip b{font-size:22px;font-weight:700;letter-spacing:-.03em}
.kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--m);margin:18px 0 6px!important}
.cover-title{font-size:40px!important;margin-bottom:8px!important}
.cover .lede{margin:0 auto}
.strip{display:flex;height:40px;margin-top:22px;border:1px solid var(--l);border-radius:10px;overflow:hidden}
.strip i,.bar i{flex:var(--w,1);background:var(--c)}
blockquote{border-left:3px solid #e87d0d;padding:2px 0 2px 16px;font-size:19px;line-height:1.4}
blockquote b{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.bar{display:flex;height:40px;border:1px solid var(--l);border-radius:10px;overflow:hidden}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px!important;font-size:12px;color:var(--m)}
.legend span::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--l)}
.swatches{display:grid;grid-template-columns:1fr;gap:14px}
.swatches span{display:block;height:96px;padding:10px 14px;border-radius:10px;background:var(--c);color:#fff;font-size:26px;font-weight:700}
.swatches figcaption{font-size:13px;line-height:1.45;color:var(--m);margin-top:8px}
.swatches code{display:inline-block;margin:0 0 4px}
.scale-note{font-size:13px;color:var(--m);margin:-8px 0 14px!important}
.specimen p{margin-bottom:14px!important;font-size:var(--s);font-weight:700;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.specimen small{display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--m);margin-bottom:4px}
.habits{display:grid;gap:18px}
.habits ul{padding-left:18px;font-size:14px;display:grid;gap:4px}
.habits li::marker{color:#e87d0d}
.habits .avoid li::marker{color:#ef6b6b}
.stills{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stills img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.credit{font-size:12px;color:var(--m);margin-top:8px!important}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dodont>div{padding:12px;border:1px solid var(--l);border-radius:10px;font-size:13px;color:var(--m)}
.dodont .mark{aspect-ratio:16/10;margin-bottom:8px;background:var(--s)}
.dodont b{display:block;font-size:14px;color:#8fe09f}
.dodont .dont b{color:#ef6b6b}
.dodont .dont img{scale:1.7 .8;opacity:.8}
[data-ground=light] .dodont b{color:#2f6b2a}
[data-ground=light] .dodont .dont b{color:#c2410c}

/* The portal as served: its chrome, page list, the page, and what is on it. */
.portal{display:flex;flex-direction:column;font-family:var(--sans);background:#1c1e22}
.portal-chrome{display:flex;align-items:center;justify-content:space-between;height:40px;flex:none;padding:0 8px 0 14px;background:#f1f1f8;font-weight:600}
.theme-toggle{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:7px;background:none}
.theme-toggle:hover{background:#e3e3ee}
.portal-body{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;background:#1c1e22;color:#fff;transition:background .4s,color .4s}
.portal-body[data-ground=light]{background:#fff;color:#1c1e22}
.portal-nav{position:sticky;z-index:2;top:0;display:flex;gap:6px;padding:8px 12px;background:inherit;border-bottom:1px solid #2c2e33;overflow-x:auto;scrollbar-width:none;font-size:13px}
[data-ground=light] .portal-nav{border-color:#e4e4e7}
.p-search,.p-print{display:none}
.p-pages{display:flex;gap:4px}
.p-pages button{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:0;border-radius:6px;background:none;color:inherit!important;opacity:.8;white-space:nowrap;text-align:left}
.p-pages small{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.7}
.p-pages button[aria-current=page]{background:#2a2c31;opacity:1}
[data-ground=light] .p-pages button[aria-current=page]{background:#f0f0f2}
.portal-main{min-width:0}
.toc{display:none;position:sticky;top:0;align-self:start;padding:26px 14px;font-size:13px}
.toc small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.toc #toc span{display:block;padding:3px 0;opacity:.75}
@media(min-width:641px){
.app-window{height:600px}
.crumbs{display:flex}
.filter{flex:none;width:220px;margin-left:auto}
.upload>span:first-child{font-size:14px;padding:0 10px}
.app-scroll{padding:22px 20px 80px}
.head-tools,.facet.dead{display:flex}
.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.multi-bar span{display:flex}
.toast{left:auto}
.brand-site{padding:34px 36px 48px}
.brand-site h1{font-size:44px}
.brand-site h2{font-size:26px}
.brand-site .lede{font-size:18px}
.swatches,.habits{grid-template-columns:1fr 1fr}
.portal-body{grid-template-columns:180px minmax(0,1fr)}
.portal-nav{flex-direction:column;gap:2px;align-self:start;padding:12px;border-bottom:0;background:none;overflow:visible}
.portal-main{border-left:1px solid #2c2e33}
[data-ground=light] .portal-main{border-color:#e4e4e7}
[data-ground=light] .portal-nav{border-color:#e4e4e7}
.p-search{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border:1px solid #3a3d44;border-radius:8px;opacity:.85}
.p-print{display:flex;align-items:center;gap:8px;padding:8px;opacity:.8;margin-bottom:6px}
[data-ground=light] .p-search{border-color:#e4e4e7}
.p-pages{flex-direction:column;gap:2px}
}
@media(min-width:1024px){
.app-window{grid-template-columns:232px minmax(0,1fr);height:640px}
.app-window[data-screen=portal]{grid-template-columns:minmax(0,1fr)}
.app-nav{display:flex}
.tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tool-row{display:flex}
.tool-row+.publish{margin-left:14px}
.builder{grid-template-columns:200px minmax(0,1fr)}
.pages-pane{display:flex}
.portal-body{grid-template-columns:200px minmax(0,1fr) 170px}
.toc{display:block}
}

/* Header: sticks, frosts once the page scrolls under it, steps aside while you read down. The blur sits on a
   pseudo-element: on the header itself it would trap the phone menu, which is position:fixed inside it. */
.header{position:sticky;top:0;transition:translate .35s var(--ease)}
.header::before{content:'';position:absolute;inset:0;z-index:-1;background:color-mix(in oklab,var(--paper) 84%,transparent);backdrop-filter:blur(14px) saturate(1.3);opacity:0;transition:opacity .25s}
.header[data-scrolled]::before{opacity:1}
.header.is-hidden{translate:0 -100%}
@media(min-width:641px){.announce-short{display:none}}
/* Tap areas: at least 44px tall on every small link, without moving the layout. */
.text-link,.brand,.announcement a,.nav-links>a,.examples-note a,.footer-main a{position:relative}
.text-link::after,.brand::after,.announcement a::after,.nav-links>a::after,.examples-note a::after,.footer-main a::after{content:'';position:absolute;inset:-14px -6px}
/* Arrows lean where they go. */
.button span,.text-link span{transition:translate .25s var(--ease)}
@media(hover:hover){.button:hover span,.text-link:hover span{translate:2px -2px}.hero-actions .text-link:hover span{translate:0 2px}}
/* Phones pick one plan at a time; the pill slides to the one shown. */
.plan-switch{display:none}
@media(max-width:640px){
.js .plan-switch{position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:360px;margin:28px auto 0;padding:4px;border:1px solid #d9ddcf;border-radius:10px;background:#e6e8de}
.plan-switch::before{content:'';position:absolute;inset:4px auto 4px 4px;width:calc((100% - 8px) / 3);border-radius:7px;background:#fff;box-shadow:0 1px 4px #20241f14;transition:translate .4s var(--ease)}
.plan-switch[data-show=team]::before{translate:100% 0}
.plan-switch[data-show=business]::before{translate:200% 0}
.plan-switch button{position:relative;min-height:44px;border:0;background:none;font-weight:600;font-size:var(--fs-small);color:#555d52;transition:color .25s}
.plan-switch button[aria-pressed=true]{color:var(--ink)}
.js .plans{margin-top:16px}
html:not(.js) .plans[data-show] article{display:flex}
}
::view-transition-group(plan){animation-duration:.45s;animation-timing-function:var(--ease)}
/* Plans: three across on wide screens; open source and the commercial license side by side under them. */
.plan-extras{display:grid;gap:14px;max-width:1100px;margin:22px auto 0}
.plan-extras article{padding:22px 24px;border:1px solid #d9ddcf;border-radius:11px;background:#f5f6ef}
.plan-extras h3{font-size:var(--fs-h3);margin:8px 0 6px}
.plan-extras p{color:#616c56;margin-bottom:14px;max-width:46ch}
@media(min-width:641px){.plan-extras{grid-template-columns:1fr 1fr}}
@media(min-width:851px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}.plan-description{min-height:4.95em}}

/* FAQ answers open to their height; the plus turns into a cross. */
:root{interpolate-size:allow-keywords}
.faqs details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.faqs details[open]::details-content{block-size:auto}
.faqs summary>span{transition:transform .35s var(--ease)}
/* Motion (.motion is set by site.js unless reduced motion is asked for): sections rise in as they arrive. */
.motion .reveal{opacity:0;translate:0 18px;transition:opacity .8s var(--ease) var(--d,0s),translate .8s var(--ease) var(--d,0s)}
.motion .reveal.in{opacity:1;translate:none}
/* Benefit art plays once when its card arrives. */
.motion .typed{display:inline-block;vertical-align:bottom;clip-path:inset(0 100% 0 0);transition:clip-path .9s steps(12) .3s}
.motion .in .typed{clip-path:inset(0 0 0 0)}
.motion .found-pill{opacity:0;scale:.6;transition:opacity .3s 1.2s,scale .5s var(--pop) 1.2s}
.motion .in .found-pill{opacity:1;scale:1}
.motion .floating-file{translate:-12px 10px;transition:translate 1.2s var(--ease) .2s}
.motion .in .floating-file{translate:none}
.motion .color-stack i{transition:rotate .9s var(--pop) .3s,translate .9s var(--pop) .3s}
.motion .benefit:not(.in) .color-stack i:nth-child(2){rotate:-13deg;translate:-12px 0}
.motion .benefit:not(.in) .color-stack i:nth-child(3){rotate:-25deg;translate:-22px 0}
.motion .type-sample,.motion .sync-pill,.motion .share-pill{opacity:0;translate:0 8px;transition:opacity .5s var(--ease) .8s,translate .5s var(--ease) .8s}
.motion .in .type-sample,.motion .in .sync-pill,.motion .in .share-pill{opacity:1;translate:none}
.motion .portal-mini i{scale:1 0;transform-origin:bottom;transition:scale .6s var(--pop)}
.motion .portal-mini i:nth-child(2){transition-delay:.12s}
.motion .portal-mini i:nth-child(3){transition-delay:.24s}
.motion .in .portal-mini i{scale:1}
/* The agent chat plays itself: the ask, the tool working, its check, the answer, the image coming into focus. */
.motion .chat-body>*{opacity:0;translate:0 8px;transition:opacity .45s var(--ease) var(--t),translate .45s var(--ease) var(--t)}
.motion .in .chat-body>*{opacity:1;translate:none}
.motion .user-message{--t:.2s}.motion .agent-tool{--t:.7s}.motion .agent-reply{--t:1.9s}.motion .rendition{--t:2.2s}.motion .chat-footer{--t:2.9s}.motion .image-credit{--t:3s}
.motion .in .tool-dots{animation:working 1.1s .8s both}
.motion .in .tool-dots i{animation:dot .55s ease-in-out infinite alternate}
.motion .tool-dots i:nth-child(2){animation-delay:.15s}
.motion .tool-dots i:nth-child(3){animation-delay:.3s}
.motion .tool-check{opacity:0;scale:.4;transition:opacity .2s 1.8s,scale .45s var(--pop) 1.8s}
.motion .in .tool-check{opacity:1;scale:1}
.motion .rendition img{filter:blur(14px);scale:1.04;transition:filter 1s var(--ease) 2.4s,scale 1s var(--ease) 2.4s}
.motion .in .rendition img{filter:none;scale:1}
@keyframes working{0%,100%{opacity:0}10%,85%{opacity:1}}
@keyframes dot{to{translate:0 -3px;opacity:.4}}
/* Desktop example cards tilt toward the pointer (site.js sets --rx and --ry). */
@media(hover:hover) and (pointer:fine){.example-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}.example-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px)}}
/* The final spark turns as it scrolls past. */
@supports(animation-timeline:view()){.motion .final-spark{animation:turn linear both;animation-timeline:view()}}
@keyframes turn{from{rotate:-50deg}to{rotate:50deg}}
/* The hero's italic word swaps with a blur. */
.word-cycle .word{display:inline-block}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Subpages (/ai, /open-source): no product preview; illustrations drawn in HTML carry them instead. */
.page-hero .hero-top{padding-bottom:10px}
.nav-links>a[aria-current=page]{color:var(--purple)}
.gh{gap:8px}
.gh::before{content:'';width:1.15em;height:1.15em;flex:none;background:currentColor;mask:url(/logos/github.svg) center/contain no-repeat}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fine-print{margin-top:18px;color:var(--muted);font-size:var(--fs-note)}

/* /ai hero: the Artbucket orb, agents on the outer ring, its MCP tools on the inner one. */
.ai-hero{display:grid;gap:8px;justify-items:center;text-align:center;padding-bottom:24px;border-bottom:1px solid var(--line)}
.ai-copy{display:flex;flex-direction:column;align-items:center}
.ai-hero .eyebrow{justify-content:center}
.ai-pitch{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.018em;max-width:32ch;margin:18px 0 24px}
.orb-stage{--d:calc(100vw - 88px);position:relative;width:calc(var(--d) + 56px);height:calc(var(--d) + 56px);display:grid;place-items:center;margin-top:20px}
.ring{position:absolute;width:var(--d);aspect-ratio:1;border:1px dashed #cdc6e4;border-radius:50%}
.ring-inner{width:calc(var(--d) * .58);border-color:#ddd8ec}
.ring>span{position:absolute;left:50%;top:50%;translate:-50% -50%;--a:calc(360deg / var(--n) * var(--i));transform:rotate(var(--a)) translateY(calc(var(--d) / -2)) rotate(calc(-1 * var(--a)))}
.ring-inner>span{transform:rotate(calc(var(--a) + 45deg)) translateY(calc(var(--d) * -.29)) rotate(calc(-1 * var(--a) - 45deg))}
.ring b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px -8px #26104740}
.ring b.word{width:auto;padding:0 12px;border-radius:24px;font:700 13px var(--sans);letter-spacing:-.04em}
.ring b.tool{width:auto;height:auto;padding:6px 10px;border-radius:6px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5b38f0;background:#f4f1fe;border-color:#e1daf9;box-shadow:none}
.orb{position:relative;display:grid;place-items:center;gap:4px;width:calc(var(--d) * .3);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#efeafe 60%,#e1d8ff);box-shadow:0 0 0 12px #6d4aff0f,0 0 0 26px #6d4aff09,0 20px 70px -10px #6d4aff66;align-content:center}
.orb img{width:40%;height:auto}
.orb span{font:750 clamp(14px,3vw,19px) var(--display);letter-spacing:-.05em}
@keyframes orbit{to{rotate:360deg}}
@keyframes breathe{50%{box-shadow:0 0 0 18px #6d4aff12,0 0 0 38px #6d4aff08,0 24px 90px -6px #6d4aff80}}
.motion .ring-outer{animation:orbit 80s linear infinite}
.motion .ring-inner{animation:orbit 55s linear infinite reverse}
.motion .ring-outer b{animation:orbit 80s linear infinite reverse}
.motion .ring-inner b{animation:orbit 55s linear infinite}
.motion .orb{animation:breathe 5s ease-in-out infinite}

/* Two columns: copy, and the illustration beside it. */
.split,.chapter{display:grid;gap:36px;align-items:center}
.split h2,.chapter h2{margin-bottom:22px}
.chapter-copy p:not(.eyebrow){color:var(--muted);line-height:1.65;max-width:44ch}
.chapter-num{display:block;font:400 64px/1 var(--serif);color:#b9b0d9;margin-bottom:14px}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:s;display:flex;align-items:center;gap:14px;font-weight:550}
.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ece8fc;color:#5b38f0;font-size:var(--fs-note);flex:none}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;font-weight:550}
.checks li::before{content:'✓';color:#728c36}
.consent,.inspector,.art-panel,.terminal{margin:0;border:1px solid #dcd7ea;border-radius:14px;background:#fff;box-shadow:0 24px 50px -30px #26104755}
.consent{padding:26px;max-width:400px;justify-self:center;width:100%;text-align:center}
.consent-logos{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}
.consent-logos>span{display:flex;gap:5px}
.consent-logos i{width:5px;height:5px;border-radius:50%;background:#c5bde0}
.consent>b{font:600 1.25rem var(--display);letter-spacing:-.03em}
.consent>p{color:var(--muted);font-size:var(--fs-small);margin:6px 0 18px}
.scopes{display:grid;gap:8px;text-align:left}
.scopes span{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-small)}
.scopes i{width:16px;height:16px;border-radius:50%;border:1.5px solid #bbb5cc;flex:none}
.scopes small{margin-left:auto;color:var(--muted);font-size:var(--fs-label)}
.scopes .on{border-color:var(--purple);background:#f7f5ff}
.scopes .on i{border:5px solid var(--purple)}
.consent-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;font-size:var(--fs-small);font-weight:600}
.consent-actions span{padding:8px 16px;border-radius:7px;border:1px solid var(--line)}
.consent-actions .allow{background:var(--purple);border-color:var(--purple);color:#fff}

/* /ai use cases: art for the home page's benefit cards. */
.art-size{background:#e9e7f0;padding:18px}
.art-size img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.url-pill{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:7px;padding:8px 10px;background:#fff;border-radius:6px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#67646e;box-shadow:0 6px 16px -8px #26104755;white-space:nowrap;overflow:hidden}
.url-pill b{color:#5b38f0;font-weight:600}
.url-pill .i{width:13px;height:13px}
.art-check{background:#eeeada;flex-direction:column;gap:10px}
.verdict-row{display:flex;align-items:center;gap:9px;width:76%;padding:10px 12px;border-radius:8px;background:#fbf9ef;font-size:var(--fs-small);font-weight:600}
.verdict-row small{margin-left:auto;font-weight:500;font-size:var(--fs-label);color:var(--muted)}
.verdict-row.no{color:#9a3b2e;text-decoration:line-through;text-decoration-color:#9a3b2e88;opacity:.8}
.verdict-row.no small{text-decoration:none}
.verdict-row.yes{border:1.5px solid #728c36;box-shadow:0 6px 16px -8px #34381940}
.art-check .i{width:18px;height:18px}
.art-tokens{background:#e5ebdf;flex-direction:column;gap:14px}
.swatch-row{display:flex;gap:8px}
.swatch-row i{width:44px;height:44px;border-radius:8px;background:var(--c);border:3px solid #fff;box-shadow:0 4px 10px #28381a1a}
.art-tokens code{background:#232c24;color:#cfd8b8;padding:10px 14px;border-radius:7px;font-size:12px;line-height:1.7}
.art-tokens code b{color:#e1eea1;font-weight:500}
.verdict{display:flex;align-items:center;padding:14px 0 0}
.verdict img{width:64px;height:64px;margin:0 16px 14px}
.verdict>div{flex:1;flex-direction:column;align-self:stretch;justify-content:center;gap:2px}

/* /ai provenance: an asset's inspector. */
.inspector{overflow:hidden;max-width:440px;justify-self:center;width:100%}
.inspector-thumb{position:relative;height:170px;background:radial-gradient(circle at 25% 35%,#f3b35e,transparent 45%),radial-gradient(circle at 75% 60%,#e87d0d,transparent 50%),radial-gradient(circle at 50% 100%,#7a3b12,transparent 60%),#f6d7a8}
.review-pill{position:absolute;top:12px;left:12px;padding:3px 10px;border-radius:20px;background:#fff;font-size:var(--fs-label);font-weight:600;color:#8a5a12}
.cr-badge{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#20241f;color:#fff;font:700 11px var(--sans)}
.inspector dl{margin:0;padding:6px 18px 12px}
.inspector dl>div{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #f0eee8;font-size:var(--fs-small)}
.inspector dl>div:last-child{border:0}
.inspector dt{color:var(--muted)}
.inspector dd{margin:0;display:flex;align-items:center;gap:6px;font-weight:550}
.inspector dd.quote{font:italic 400 1rem var(--serif)}
.inspector .i{width:14px;height:14px}
.gen-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;background:#f4f1fe;color:#5b38f0;font-size:var(--fs-note)}
.standards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.standards li{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:#fafaf6}
.standards b{font:600 1.25rem var(--display);letter-spacing:-.03em}
.standards span{color:var(--muted);font-size:var(--fs-note)}

/* /open-source story. */
.art-panel{padding:24px}
.questions{display:grid;gap:10px}
.questions>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:9px;background:#f7f7f2}
.questions .q{font-weight:550;font-size:var(--fs-small)}
.questions .a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;background:#eef3e0;color:#4f5a2c;font-size:var(--fs-note);font-weight:600}
.questions .a.no{background:#fdf1ee;color:#9a3b2e}
.questions .a i{width:12px;height:12px;border-radius:3px;background:var(--c)}
.pixels{display:grid;grid-template-columns:1fr auto 1.4fr;align-items:center;gap:14px}
.pixel-side{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--muted);font-size:var(--fs-note)}
.pixel-side img{filter:grayscale(1);opacity:.55}
.pixel-arrow{font-size:22px;color:#b9b0d9}
.json{margin:0;padding:14px;background:#232c24;color:#cfd8b8;border-radius:8px;font-size:12px;line-height:1.7;overflow-x:auto}
.json b{color:#f0a58f;font-weight:500}
.terminal{overflow:hidden;background:#1d241e;border-color:#1d241e}
.terminal-bar{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid #2f3a30}
.terminal-bar i{width:10px;height:10px;border-radius:50%;background:#46503f}
.terminal-bar span{margin-left:10px;color:#8d9885;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}
.terminal pre{margin:0;padding:18px;color:#dfe6cf;font:13px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.terminal .p{color:#8d9885}
.terminal .ok{color:#b5d36a}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 18px}
.chips span{padding:3px 10px;border-radius:20px;border:1px solid #3a463b;color:#aeb8a3;font-size:var(--fs-label)}
.features{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.features li{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line);border-radius:10px;background:#fafaf6;font-weight:600;line-height:1.35}
.features .i{width:22px;height:22px;color:var(--purple)}
.roadmap{list-style:none;margin:0;padding:0}
.roadmap li{position:relative;padding:0 0 30px 30px;border-left:2px solid var(--line);margin-left:6px}
.roadmap li:last-child{border-color:transparent;padding-bottom:0}
.roadmap li::before{content:'';position:absolute;left:-8px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid #b6bdaa}
.roadmap li[data-state=shipped]::before{background:#728c36;border-color:#728c36}
.roadmap li[data-state=now]::before{background:var(--purple);border-color:var(--purple);box-shadow:0 0 0 5px #6d4aff26}
.roadmap h3{font-size:var(--fs-h3);letter-spacing:-.025em;margin:10px 0 4px}
.roadmap p{color:var(--muted)}
.chip{display:inline-block;letter-spacing:.12em;font-size:var(--fs-label);font-weight:600;padding:3px 9px;border-radius:5px;background:#eaeddf;color:#4f5a2c}
[data-state=now] .chip{background:#ece8fc;color:#5b38f0}
[data-state=next] .chip,[data-state=later] .chip{background:transparent;border:1px solid #cbd0c3;color:#5d6a51}
.plan-extras.wide{max-width:none;margin:0}
.cta-pair{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.cta-pair .button{margin:0}
@media(max-width:640px){
.ring b{width:40px;height:40px}
.ring b img{width:20px;height:20px}
.ring b.tool{font-size:10.5px;padding:4px 7px}
.pixels{grid-template-columns:1fr}
.pixel-arrow{rotate:90deg;justify-self:center}
}
@media(min-width:641px){
.orb-stage{--d:min(70vw,500px)}
.standards{grid-template-columns:repeat(4,minmax(0,1fr))}
.features{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:851px){
.ai-hero{grid-template-columns:minmax(0,1fr) auto;justify-items:start;align-items:center;text-align:left;gap:40px;padding-block:40px 56px}
.ai-copy{align-items:flex-start}
.ai-hero .eyebrow{justify-content:flex-start}
.ai-pitch{margin:22px 0 30px}
.orb-stage{--d:min(40vw,500px);margin:0}
.split,.chapter{grid-template-columns:1fr 1fr;gap:80px}
.chapter.flip>figure{order:-1}
.chapter{padding-block:80px}
.page-hero .hero-top{padding-bottom:20px}
.roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.roadmap li{border-left:0;border-top:2px solid var(--line);margin:0;padding:30px 0 0}
.roadmap li:last-child{border-color:var(--line)}
.roadmap li::before{left:0;top:-8px}
}
.nav-links>a,.nav-cta{white-space:nowrap}
/* One brand, one answer: four askers get the same logo; the check says no, why, and what instead; the five things the layer holds. */
.answer-section .sprite{position:absolute;width:0;height:0}
.answer-section .i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--purple)}
.ask-bubble{display:inline-block;padding:10px 16px;border-radius:16px 16px 16px 4px;background:var(--ink);color:#fff;font-weight:550;line-height:1.4}
.same-answer{display:grid;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fbfcf7}
.askers ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.askers li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.askers li b{font-family:var(--display);font-weight:550;letter-spacing:-.02em}
.askers li span{margin-left:auto;color:var(--muted);font-size:var(--fs-note)}
.answer-arrow{justify-self:center;font-size:26px;line-height:1;color:var(--purple);rotate:90deg}
.answer-tile{display:grid;gap:4px;padding:14px;border:1.5px solid #cfc6ef;border-radius:12px;background:#fff;box-shadow:0 12px 34px -14px #6d4aff40}
.answer-well{display:grid;place-items:center;height:130px;margin-bottom:8px;border-radius:8px;background:#f1efe6}
.answer-tile b{font-family:var(--display);font-weight:550;letter-spacing:-.02em}
.answer-tile span{color:var(--muted);font-size:var(--fs-note)}
.answer-tile .answer-ok{margin-top:6px;color:#55702a;font-weight:600}
.check-demo{display:grid;gap:18px;margin-top:18px;padding:18px;border-radius:14px;background:#ecebf3}
.check-copy{display:grid;gap:12px;align-content:start;justify-items:start}
.use-verdict{padding:12px 14px;border-left:3px solid;border-radius:4px 10px 10px 4px;background:#fff}
.use-verdict.no{border-color:#b23c26}
.use-verdict.no b{color:#b23c26}
.use-verdict.yes{border-color:#55702a}
.use-verdict.yes b{color:#55702a}
.check-note{color:var(--muted);font-size:var(--fs-small)}
.check-note code{font-size:.9em;color:var(--ink)}
.check-note .text-link{margin-left:4px}
.check-demo .terminal{min-width:0;margin:0;border-radius:10px}
.check-demo .terminal pre{font-size:12px}
.answer-note{margin-top:22px;text-align:center;font-family:var(--serif);font-size:var(--fs-lead);letter-spacing:-.01em}
@media(min-width:851px){.same-answer{grid-template-columns:minmax(0,1fr) auto minmax(0,300px);padding:28px}.answer-arrow{rotate:none}.check-demo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;padding:28px}}

/* The brand context layer, drawn like a data catalog: who asks on top, the layer's jobs in the middle, what it holds below.
   Stems between the bands carry packets (questions down, answers up). Lenses (flow.js) re-caption tiles and dim the rest. */
.flow-section .i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lens{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}

.lens button{flex-shrink:0;padding:9px 15px;min-height:40px;border:1px solid #cbd0c3;border-radius:99px;background:transparent;font-weight:600;font-size:var(--fs-small);color:#555d52;transition:background .25s,color .25s,border-color .25s}
.lens button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.catalog{display:grid;gap:0}

.band-label{letter-spacing:.12em;font-size:var(--fs-label);font-weight:600;color:#68725f;text-transform:uppercase;margin-bottom:10px}
.band{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ctile{position:relative;padding:14px 14px 16px;border:1px solid var(--line);border-radius:10px;background:#fbfcf7;transition:opacity .45s var(--ease)}
.ctile .i{color:var(--purple);margin-bottom:10px}
.ctile b{display:block;font-family:var(--display);font-weight:550;letter-spacing:-.02em;line-height:1.25;margin-bottom:4px}
.ctile .cap{display:block;color:var(--muted);font-size:var(--fs-note);line-height:1.5}
.ctile .logos{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:10px;font-size:var(--fs-note);font-weight:550;color:#4d5549}
.ctile .logos span{display:inline-flex;align-items:center;gap:5px}
.ctile .logos img{width:16px;height:16px;object-fit:contain}
.src-icons{display:inline-flex;gap:4px;flex-shrink:0}
.src-icons img,.src-icons .i{width:18px;height:18px}
.src-icons .i{color:var(--purple)}
.ctile code{display:block;font-size:.85em;color:var(--ink);overflow-wrap:anywhere}
/* Stems: the top band hangs into the layer, the bottom band grows up into it. */
.band-top{padding-bottom:34px}
.band-top .ctile::after,.band-bottom li::before{content:'';position:absolute;left:50%;width:2px;background:#d7d2e6}
.band-top .ctile::after{top:100%;height:34px}
.band-bottom{padding-top:34px}
.band-bottom li{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f5f6ef;text-align:center;font-weight:550;font-size:var(--fs-note);line-height:1.3;transition:opacity .45s var(--ease)}
.band-bottom li::before{bottom:100%;height:34px}

.clayer{padding:18px 16px 16px;border:1.5px solid #cfc6ef;border-radius:14px;background:#fff;box-shadow:0 12px 34px -14px #6d4aff40;position:relative;z-index:1}
.clayer-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.clayer-head b{font-family:var(--display);font-size:var(--fs-h3);font-weight:550;letter-spacing:-.03em;line-height:1}
.clayer-head span{color:var(--muted);font-size:var(--fs-small)}
.band-layer{gap:8px}
.band-layer .ctile{padding:12px 12px 14px;background:#f8f7fc;border-color:#e4e0f0}
.band-layer .i{width:20px;height:20px;margin-bottom:8px}
.band-layer .ctile b{font-size:var(--fs-small)}
.live{position:relative;height:2.6em;margin-top:12px;padding:0 12px;border-radius:8px;background:#f1efe6;font-size:var(--fs-note);line-height:1.4;font-variant-numeric:tabular-nums;overflow:hidden}
.live span{position:absolute;inset:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 12px;opacity:0}
.live span:first-child{opacity:1}
.live em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:.9em;color:var(--purple)}
.live i{font-style:normal;font-weight:650}
.live .no{color:#b23c26}
.live .yes{color:#55702a}
.foundation{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-weight:550}
.foundation .band-label{margin:0;flex-basis:100%;text-align:center}
.foundation>span:not(.band-label){display:inline-flex;align-items:center;gap:8px}
.foundation img{width:20px;height:20px}
.foundation .text-logo{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;background:#e8a33c;color:#fff;font-size:10px;letter-spacing:0}
@media(min-width:641px){.foundation .band-label{flex-basis:auto;margin-right:6px}}
.dim{opacity:.3}
.lens-note{min-height:1.6em;margin-top:22px;text-align:center;font-family:var(--serif);font-size:var(--fs-lead);letter-spacing:-.01em}
@media(min-width:641px){
.lens{justify-content:center;margin-bottom:26px}
.band{grid-template-columns:repeat(4,minmax(0,1fr))}
.band-layer{grid-template-columns:repeat(4,minmax(0,1fr))}
.band-bottom{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1101px){.band-bottom{grid-template-columns:repeat(6,minmax(0,1fr))}.band-top{padding-bottom:44px}.band-top .ctile::after{height:44px}.band-bottom{padding-top:44px}.band-bottom li::before{height:44px}}
/* Packets ride the stems when motion is on: purple asks go down, green answers come up; assets rise into the layer. */
.motion .band-top .ctile::before,.motion .band-bottom li::after{content:'';position:absolute;left:50%;width:8px;height:8px;margin-left:-3px;border-radius:50%;background:var(--purple);opacity:0;z-index:2}
.motion .band-top .ctile::before{top:100%;animation:ask 3.6s linear infinite}
.motion .band-top .ctile:nth-child(2)::before{animation-delay:.9s}
.motion .band-top .ctile:nth-child(3)::before{animation-delay:1.8s}
.motion .band-top .ctile:nth-child(4)::before{animation-delay:2.7s}
@keyframes ask{0%{opacity:0;translate:0 0;background:var(--purple)}8%,42%{opacity:1}50%{opacity:0;translate:0 var(--stem,34px);background:var(--purple)}51%{background:#728c36;translate:0 var(--stem,34px)}58%,92%{opacity:1}100%{opacity:0;translate:0 0;background:#728c36}}
.motion .band-bottom li::after{bottom:100%;background:#e8a33c;animation:rise 4s linear infinite}
.motion .band-bottom li:nth-child(2n)::after{animation-delay:1s}
.motion .band-bottom li:nth-child(3n)::after{animation-delay:2s}
.motion .band-bottom li:nth-child(5n)::after{animation-delay:3s}
@keyframes rise{0%{opacity:0;translate:0 0}10%,80%{opacity:1}100%{opacity:0;translate:0 calc(-1 * var(--stem,34px))}}
@media(min-width:1101px){.band-top,.band-bottom{--stem:44px}}
.motion .band-layer .ctile:not(.dim){animation:lit 12s var(--ease) infinite}
.motion .band-layer .ctile:nth-child(2){animation-delay:-10.5s}.motion .band-layer .ctile:nth-child(3){animation-delay:-9s}.motion .band-layer .ctile:nth-child(4){animation-delay:-7.5s}.motion .band-layer .ctile:nth-child(5){animation-delay:-6s}.motion .band-layer .ctile:nth-child(6){animation-delay:-4.5s}.motion .band-layer .ctile:nth-child(7){animation-delay:-3s}.motion .band-layer .ctile:nth-child(8){animation-delay:-1.5s}
@keyframes lit{0%,10%{background:#ece7ff;border-color:#c9bdf6}14%,100%{background:#f8f7fc;border-color:#e4e0f0}}
.motion .live span{animation:live 12s var(--ease) infinite}
.motion .live span:nth-child(2){animation-delay:4s}.motion .live span:nth-child(3){animation-delay:8s}
@keyframes live{0%,2%{opacity:0;translate:0 6px}6%,30%{opacity:1;translate:none}34%,100%{opacity:0;translate:0 -6px}}
.motion .live span:first-child{opacity:0}
/* Phones: the lenses scroll sideways; who asks and the layer's tiles are lists of short rows (icon, name, line; no logos),
   one stem from who asks into the layer; the ticker gets room for two lines; the bottom band keeps stems on its first row only. */
@media(max-width:640px){
.lens{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-18px;padding-inline:18px}
.lens::-webkit-scrollbar{display:none}
.band-top,.band-layer,.band-catalog{grid-template-columns:1fr;gap:8px}
.band-top{position:relative}
:is(.band-top,.band-layer) .ctile{display:grid;grid-template-columns:22px 1fr;column-gap:12px;padding:12px 14px}
:is(.band-top,.band-layer) .ctile .i{grid-row:span 3;width:20px;height:20px;margin:2px 0 0}
.band-catalog .ctile:last-child{grid-column:auto}
.live{height:3.8em}
.band-top .ctile .logos,.band-top .ctile::before,.band-top .ctile::after{display:none}
.band-top::after{content:'';position:absolute;left:50%;bottom:0;width:2px;height:34px;background:#d7d2e6}
.band-bottom li:not(:nth-child(-n+2))::before,.band-bottom li:not(:nth-child(-n+2))::after{display:none}
}
@media(min-width:641px) and (max-width:1100px){.band-bottom li:not(:nth-child(-n+3))::before,.band-bottom li:not(:nth-child(-n+3))::after{display:none}}

/* Inside the Artbucket block: the context layer (the voice) sits on the catalog (the body), each labeled. */
.clayer-part{padding:12px;border-radius:10px}
.clayer-part+.clayer-part{margin-top:10px}
.clayer-part.voice{background:#f3f0fd}
.clayer-part.body{background:#f4f5ee}
.part-label{margin-bottom:10px;font-size:var(--fs-note);color:var(--muted)}
.part-label b{margin-right:6px;letter-spacing:.12em;font-size:var(--fs-label);font-weight:650;text-transform:uppercase;color:var(--purple)}
.body .part-label b{color:#55702a}
.band-layer .ctile{background:#fff}
.body .band-layer .ctile{border-color:var(--line)}
.body .ctile .i{color:#55702a}
@media(min-width:641px){.band-context{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1101px){.band-context{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:641px){.band-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Deployment and trust pages: who each option is for, and the subprocessor table. */
.plan-extras .for{font-size:var(--fs-small)}
.plan-extras .for b{letter-spacing:.12em;font-size:var(--fs-label);text-transform:uppercase;margin-right:4px}
.table-scroll{overflow-x:auto}
.subprocessors{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.subprocessors th,.subprocessors td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.subprocessors thead th{font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.subprocessors td{color:var(--muted)}
.plan-extras .text-link+.text-link{margin-left:18px}

/* Legal pages: a side list of the documents and a readable column of prose. */
.legal-hero{padding-bottom:12px}
.legal-hero h1{margin:14px 0 12px;white-space:normal}
.legal-lede{font-size:var(--fs-lead);max-width:48ch}
.legal-date{margin-top:10px;color:var(--muted);font-size:var(--fs-small)}
.legal-layout{display:grid;gap:28px;padding-block:24px 96px}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--fs-small);font-weight:500}
.legal-nav a{color:var(--muted)}
.legal-nav a[aria-current=page]{color:var(--purple)}
.legal{max-width:72ch;font-size:var(--fs-body);line-height:1.7}
.legal h2{font-size:var(--fs-h3);font-weight:550;letter-spacing:-.02em;margin:40px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p,.legal ul,.legal table,.legal blockquote{margin-bottom:14px}
.legal ul{padding-left:1.2em;list-style:disc}
.legal li{margin-bottom:6px}
.legal a{text-decoration:underline;text-underline-offset:2px}
.legal-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.legal-table thead th{font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.legal-form{padding:16px 18px;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-small)}
@media(min-width:851px){.legal-layout{grid-template-columns:200px 1fr;gap:60px}.legal-solo{grid-template-columns:1fr}.legal-nav{flex-direction:column;position:sticky;top:100px;align-self:start}}
/* Tablets have room for five nav links: Open source and Developers wait in the footer. */
@media(min-width:641px) and (max-width:1100px){.nav-links>a:is([href="/open-source"],[href="https://docs.artbucket.io/"]){display:none}}

/* Brand as code: the repository on one side, the pull request Artbucket checks on the other. Phones stack them. */
.git-demo{display:grid;gap:14px;padding:14px;border-radius:14px;background:#ecebf3}
.git-code{border-radius:10px;overflow:hidden;background:#1d1f24;color:#d7dae0;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-note)}
.git-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#25282e;color:#aeb4bf;font-family:var(--sans);font-size:var(--fs-note)}
.git-bar img{filter:invert(1);opacity:.8}
.git-branch{margin-left:auto;padding:2px 8px;border-radius:20px;background:#343842;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-label)}
.git-body{display:grid}
.git-tree{display:none;list-style:none;margin:0;padding:14px 10px;border-right:1px solid #30343b;color:#8b919c;line-height:1.9}
.git-tree li{padding-left:14px}
.git-tree .dir{padding-left:0;color:#aeb4bf}
.git-tree .on{color:#fff;background:#343842;border-radius:4px}
.git-file{margin:0;padding:14px 16px;overflow-x:auto;line-height:1.7}
.git-file .c{color:#7f8793}
.git-file .del{display:block;margin:0 -16px;padding:0 16px;background:#4a2326;color:#ffb4ae}
.git-file .add{display:block;margin:0 -16px;padding:0 16px;background:#1f3b27;color:#a6e3b0}
.git-pr{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:10px;background:#fff;border:1px solid #dcd8e8;font-size:var(--fs-note)}
.pr-title{font-family:var(--display);font-size:var(--fs-h3);font-weight:550;letter-spacing:-.02em;line-height:1.3}
.pr-state{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:20px;background:#ece8fc;color:#5b38f0;font-family:var(--sans);font-size:var(--fs-label);font-weight:600;vertical-align:3px}
.pr-num{color:var(--muted);font-weight:400}
.pr-check{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.pr-check .ok{color:#1a7f37;font-weight:700}
.pr-check b{margin-right:6px}
.pr-comment{display:flex;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fafaf7}
.pr-comment small{padding:0 6px;border:1px solid var(--line);border-radius:10px;color:var(--muted)}
.pr-comment p{margin:6px 0;color:var(--muted);line-height:1.6}
.pr-comment code{color:var(--ink)}
.pr-comment .sw{display:inline-block;width:10px;height:10px;margin:0 4px 0 2px;border-radius:3px;background:var(--c);vertical-align:-1px}
.pr-link{color:var(--purple);font-weight:600}
.pr-merge{display:flex;gap:8px;align-items:center;color:var(--muted)}
.pr-merge .ok{color:#1a7f37;font-weight:700}
.git-points{list-style:none;margin:28px 0 22px;padding:0;display:grid;gap:18px}
.git-points li{color:var(--muted);line-height:1.6;font-size:var(--fs-body)}
.git-points b{display:block;margin-bottom:4px;color:var(--ink);font-family:var(--display);font-weight:550;font-size:var(--fs-h3);letter-spacing:-.02em}
@media(min-width:641px){.git-points{grid-template-columns:repeat(3,1fr);gap:28px}.git-body{grid-template-columns:150px 1fr}.git-tree{display:block}}
@media(min-width:1101px){.git-demo{grid-template-columns:1.25fr 1fr;padding:18px;gap:18px}}
@media(min-width:641px){.band-top{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1101px){.band-top{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* The preview as the app now is: the sidebar's places, the builder's labeled tools, the brand page, the portal's links. */
.nav-item em.count{font-family:inherit;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--a-violet);color:#fff;display:grid;place-items:center;font-size:11px}
.nav-foot .storage{padding:0 8px 4px;font-size:11px;color:var(--a-muted);font-variant-numeric:tabular-nums}
.tool-row .tb{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:0 4px;white-space:nowrap}
.tool-row .tb .i{width:14px;height:14px}
.p-links{display:none;gap:16px;margin-left:24px;font-size:13px;opacity:.72}
@media(min-width:851px){.p-links{display:flex}}
.bp{padding:18px 22px 24px}
.bp-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.bp-logo{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--a-line);background:#fff}
.bp-name{min-width:0;flex:1}
.bp-name>div{display:flex;align-items:center;gap:8px}
.bp-name b{font-size:20px;letter-spacing:-.02em}
.bp-name small{display:block;margin-top:2px;font-size:12px;color:var(--a-muted)}
.bp-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--a-line);border-radius:20px;font-size:11px;font-weight:500}
.bp-pill .i{width:12px;height:12px}
.bp-actions{display:flex;gap:6px}
.bp-btn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:1px solid var(--a-line);border-radius:7px;background:#fff;font:inherit;font-size:12px;font-weight:500;color:inherit;cursor:pointer}
.bp-btn .i{width:14px;height:14px}
.bp-btn.pri{background:var(--a-violet);border-color:var(--a-violet);color:#fff}
.bp-tabs{display:flex;gap:18px;margin:14px -22px 16px;padding:0 22px;border-bottom:1px solid var(--a-line);font-size:12px;color:var(--a-muted);overflow-x:auto;scrollbar-width:none}
.bp-tabs span{position:relative;padding:8px 0;white-space:nowrap}
.bp-tabs .on{color:var(--ink);font-weight:500}
.bp-tabs .on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--a-violet);border-radius:2px}
.bp-grid{display:grid;gap:12px}
@media(min-width:1024px){.bp-grid{grid-template-columns:1.6fr 1fr}}
.bp-col{display:grid;gap:12px;align-content:start}
.bp-card{padding:12px 14px;border:1px solid var(--a-line);border-radius:10px;background:#fff;font-size:12px}
.bp-card h4{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;font-size:13px;font-weight:600}
.bp-card h4 small{font-weight:400;color:var(--a-muted);font-size:11px}
.bp-card p{margin:0 0 4px}
.bp-card>small{color:var(--a-muted)}
.bp-chip{padding:1px 7px;border-radius:10px;background:var(--a-soft);font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace}
.bp-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bp-swatches figure{margin:0}
.bp-swatches span{display:block;height:44px;padding:6px;border-radius:7px;background:var(--c);color:#fff;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace}
.bp-swatches figcaption{margin-top:4px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--a-muted)}
.bp-score{display:flex;align-items:center;gap:12px}
.bp-score small{display:block;color:var(--a-muted)}
.bp-ring{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--a-violet) calc(var(--p)*1%),var(--a-soft) 0);flex:none}
.bp-ring b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;font-size:14px}
.bp-signals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.bp-signals dt{color:var(--a-muted);font-size:11px}
.bp-signals dd{margin:0;font-size:16px;font-weight:600}
.bp-type{font:600 20px Inter,system-ui,sans-serif}
/* Phones: the four tabs scroll sideways; the brand page stacks its buttons and shows two swatches a row. */
.preview-tabs{overflow-x:auto;scrollbar-width:none;max-width:100%}
.preview-tabs::-webkit-scrollbar{display:none}
.preview-tabs button{flex:none}
.bp-actions{flex-wrap:wrap}
.bp-btn{white-space:nowrap}
.bp-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
.bp-swatches figcaption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:641px){.bp-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Nav dropdowns (site.js): Product and Solutions are buttons that open a panel of pages under them, one at a time;
   in the phone sheet they are groups that fold open in place. Without script, focus opens them. */
.nav-group{position:relative;display:flex;flex-direction:column}
.nav-drop{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;white-space:nowrap}
.nav-drop:hover,.nav-drop[aria-expanded=true]{color:var(--purple)}
.chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:rotate .25s var(--ease)}
.nav-drop[aria-expanded=true] .chev{rotate:180deg}
.drop{display:none;gap:2px;font-family:var(--sans);font-size:var(--fs-small);letter-spacing:0}
.nav-drop[aria-expanded=true]+.drop,html:not(.js) .nav-group:focus-within .drop{display:grid}
.drop a{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:8px}
.drop a:hover,.drop a:focus-visible,.drop a[aria-current=page]{background:#f1f2ea}
.drop a[aria-current=page] b{color:var(--purple)}
.drop svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:var(--purple);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.drop b{display:block;font-weight:600;line-height:1.35}
.drop small{display:block;color:var(--muted);font-size:var(--fs-note);line-height:1.4;font-weight:400}
.drop .drop-foot{grid-column:1/-1;display:flex;gap:18px;margin-top:4px;padding:12px 12px 6px;border-top:1px solid var(--line);border-radius:0;background:none;font-weight:600}
.drop .drop-foot a{padding:0;background:none}
.drop .drop-foot a:hover{color:var(--purple);background:none}
@media(max-width:640px){
.nav-group{border-bottom:1px solid var(--line)}
.nav-drop{padding:16px 0;min-height:44px}
.chev{width:22px;height:22px}
.drop{padding:0 0 14px}
.drop a{padding:10px 4px;font-size:1rem}
}
@media(min-width:641px){
.drop{position:absolute;z-index:20;top:calc(100% + 32px);left:50%;translate:-50% 0;width:330px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 28px 60px -28px #20241f55}
.nav-drop+.drop::before{content:'';position:absolute;inset:-34px 0 auto;height:34px}
}
@media(min-width:1101px){.drop-wide{left:0;translate:-24px 0;width:600px;grid-template-columns:1fr 1fr}}
/* Tablets: Open source and Developers wait in the footer, BrandHub in the Product menu. */
@media(min-width:641px) and (max-width:1100px){.nav-links>a[href="https://hub.artbucket.io/"]{display:none}}

/* Footer: the brand, then a column per part of the site. */
.footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;width:100%;font-size:var(--fs-small)}
.footer-cols h2{margin:0 0 12px;font:600 var(--fs-label)/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#69745e}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-cols a[aria-current=page]{color:var(--purple)}
.footer-main .footer-cols{margin-left:0}
@media(min-width:641px){.footer-main:has(.footer-cols){align-items:flex-start;flex-direction:column;gap:30px}.footer-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1101px){.footer-main:has(.footer-cols){flex-direction:row;gap:60px}.footer-main:has(.footer-cols)>span{display:none}.footer-cols{flex:1}}

/* Feature and solution pages: an app screen drawn in HTML (.mock), capability blocks (.caps), docs links. */
.mock{--a-line:#eae8eb;--a-input:#dcdae0;--a-soft:#f4f4f7;--a-muted:#67646e;--a-violet:#6d4aff;--a-on:#ece8fc;--a-on-ink:#5b38f0;margin:0;border:1px solid #d2cedd;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 24px 50px -30px #26104766;font:14px/1.5 var(--sans);text-align:left}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #eae8eb;background:#fafafc}
.mock-bar>i{width:9px;height:9px;border-radius:50%;background:#dcdae0;flex:none}
.mock-url{margin-left:10px;padding:3px 12px;border-radius:20px;background:#efeef3;color:#67646e;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mock-body{display:grid;gap:14px;padding:16px}
.mock-cols{display:grid;gap:14px}
.mock h3{font-size:1rem;letter-spacing:-.02em;margin:0}
.mock .muted,.mock small{color:#67646e}
.mock small{font-size:12px}
.mrows{display:grid;margin:0;padding:0;list-style:none;border:1px solid #eae8eb;border-radius:10px;overflow:hidden}
.mrows>li,.mrows>div{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #eae8eb;font-size:13px;min-width:0}
.mrows>:last-child{border-bottom:0}
.mrows code{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mrows .end{margin-left:auto;flex:none}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;background:#efeef3;color:#4b4855}
.pill.ok{background:#eaf3dc;color:#3d5a1c}
.pill.no{background:#fdecea;color:#9a3b2e}
.pill.warn{background:#fdf3e1;color:#8a5a12}
.pill.violet{background:#ece8fc;color:#5b38f0}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px #0000001a;flex:none}
.mock-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;border:1px solid #e1dfe6;background:#fff;font-size:12px;font-weight:600;white-space:nowrap}
.mock-btn.pri{background:var(--purple);border-color:var(--purple);color:#fff}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.chip-row span{padding:4px 11px;border:1px solid #e1dfe6;border-radius:20px;background:#fff;font-size:12px;color:#4b4855;white-space:nowrap}
.chip-row .on{border-color:var(--purple);background:#f4f1fe;color:#5b38f0;font-weight:600}
.caps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.caps li{padding:22px;border:1px solid var(--line);border-radius:12px;background:#fafaf6}
.caps .i{width:24px;height:24px;color:var(--purple);margin-bottom:14px;stroke-width:1.7}
.caps h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.025em;margin-bottom:8px}
.caps p{color:var(--muted);line-height:1.6;max-width:44ch}
.caps code{font-size:.85em;color:var(--ink)}
.doc-links{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:26px}
.related{display:grid;gap:12px}
.related a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:#fafaf6;transition:border-color .2s,translate .2s}
.related a:hover{border-color:#cbc2f0;translate:0 -2px}
.related b{font-family:var(--display);font-weight:550;font-size:1.125rem;letter-spacing:-.02em}
.related small{color:var(--muted);font-size:var(--fs-small)}
.illus-note{margin-top:12px;color:var(--muted);font-size:var(--fs-note);text-align:center}
.split-copy>p:not(.eyebrow){color:var(--muted);line-height:1.65;max-width:44ch;margin-bottom:22px}
.split-copy .checks{margin-top:4px}
@media(min-width:641px){
.caps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.related{grid-template-columns:repeat(3,minmax(0,1fr))}
.mock-body{padding:20px}
}
@media(min-width:1101px){.caps.three{grid-template-columns:repeat(3,minmax(0,1fr))}.mock-cols{grid-template-columns:1.3fr 1fr}}

/* /library: the URL taken apart, the asset's panel, and the formats it previews. */
.anatomy-url{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start;padding:18px;border-radius:12px;background:#1d241e;color:#dfe6cf;font:clamp(.8rem,.7rem + .5vw,1.05rem) ui-monospace,SFMono-Regular,Menlo,monospace}
.anatomy-url span{display:flex;flex-direction:column;gap:6px}
.anatomy-url b{font-weight:500;padding:3px 6px;border-radius:5px;background:#2b352c}
.anatomy-url .p1 b{color:#b5d36a}.anatomy-url .p2 b{color:#c9b6ff}.anatomy-url .p3 b{color:#f0c27a}.anatomy-url .p4 b{color:#8fd0e8}
.anatomy-url small{font:11px var(--sans);color:#8d9885;padding-left:6px}
.formats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.formats li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:10px;background:#fafaf6;font-size:var(--fs-note);color:var(--muted);text-align:center}
.formats img{width:32px;height:32px}
@media(min-width:641px){.formats{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1101px){.formats{grid-template-columns:repeat(9,minmax(0,1fr))}}
.lib-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lib-tiles .tile{cursor:default}
.lib-tiles .thumb{aspect-ratio:4/3}
@media(min-width:641px){.lib-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* /guidelines: the rule as a record, the builder's canvas, the releases. */
.record{padding:16px;border-radius:12px;background:#1d241e;color:#dfe6cf;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow-x:auto;margin:0}
.record .k{color:#c9b6ff}.record .s{color:#b5d36a}.record .c{color:#8d9885}
.mini-site{border-radius:10px;overflow:hidden;border:1px solid #eae8eb}
.mini-site .brand-site{padding:22px 20px 26px}
.mini-site .brand-site section{margin-top:18px;padding-top:16px}

/* /insights: weekly bars, the adoption meter, the lists. */
.bars{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:6px}
.bars i{flex:1;display:flex;flex-direction:column-reverse;height:var(--h);border-radius:4px 4px 0 0;overflow:hidden;background:#d9d1fb}
.bars i::before{content:'';height:var(--a);background:var(--purple)}
.legend-row{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:#67646e}
.legend-row span::before{content:'';display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:3px;background:var(--c)}
.meter{display:flex;height:12px;border-radius:6px;overflow:hidden;background:#f0a58f}
.meter i{width:var(--w);background:#728c36}
.stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid #eae8eb;border-radius:10px}
.stat b{font:600 1.5rem var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:641px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* A builder or portal drawn small: a side list beside a canvas, the list folded away on phones. */
.mock-split{display:grid;grid-template-columns:minmax(0,1fr)}
.mock-side{display:none;list-style:none;margin:0;padding:12px 8px;border-right:1px solid #eae8eb;font-size:13px}
.mock-side li{padding:6px 10px;border-radius:7px;color:#4b4855}
.mock-side li.on{background:#f4f4f7;color:var(--ink);font-weight:600}
.mock-side li.sub{padding-left:22px}
.mock-side .head{padding:4px 10px 8px;color:#67646e;font-size:12px;font-weight:600}
.mock-main{min-width:0;display:grid;gap:14px;padding:14px;align-content:start}
.mock-bar .end{margin-left:auto;display:flex;gap:6px;align-items:center}
@media(min-width:641px){.mock-split{grid-template-columns:170px minmax(0,1fr)}.mock-side{display:block}.mock-main{padding:18px}}
.p-pages>span{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:6px;opacity:.8;white-space:nowrap}
.p-pages>span.on{background:#2a2c31;opacity:1}
.mock .portal-body{max-height:none}
.mock .toc span{display:block;padding:3px 0;opacity:.75}
/* A README badge, drawn like the one BrandHub serves. */
.badge-mock{display:inline-flex;border-radius:4px;overflow:hidden;font:600 11px/20px var(--sans);color:#fff;vertical-align:middle}
.badge-mock b{padding:0 7px;background:#555;font-weight:600}
.badge-mock i{padding:0 7px;background:var(--purple);font-style:normal}

/* Insights, as the app draws it (core: src/components/analytics.tsx): numbers across the top, a line over bars, breakdown cards. */
.ins-top{display:grid;gap:12px;padding:10px;border:1px solid #eae8eb;border-radius:12px}
.ins-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.ins-kpi{display:grid;gap:1px;padding:8px 10px;border-radius:8px;position:relative}
.ins-kpi small{font-size:11px;color:#6e6a73}
.ins-kpi b{font:600 1.25rem var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ins-kpi i{font-style:normal;font-size:11px;height:14px;color:#3f7d34}
.ins-kpi i.down{color:#b4433a}
.ins-kpi.on{background:#f3f1f6}
.ins-kpi.on::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--purple)}
.ins-chart{position:relative;display:grid;gap:6px;border-top:1px solid #eae8eb;padding-top:12px}
.ins-grid{position:absolute;top:12px;left:0;height:150px;display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:#9a96a0;font-variant-numeric:tabular-nums}
.ins-plot{width:calc(100% - 28px);height:150px;margin-left:28px;overflow:visible}
.ins-plot line{stroke:#ece9ef;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.ins-bars rect{fill:#c9bcff}
.ins-bars rect.now{opacity:.5}
.ins-area{fill:url(#ins-fill)}
.ins-line{fill:none;stroke:#5b38f0;stroke-width:2.25;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ins-now{stroke-dasharray:4 5}
.ins-x{display:flex;justify-content:space-between;margin:0 0 0 28px;font-size:10px;color:#9a96a0}
.ins-cards{display:grid;gap:12px}
.ins-card{display:grid;gap:6px;align-content:start;padding:12px;border:1px solid #eae8eb;border-radius:12px;min-width:0}
.ins-card-head{display:flex;align-items:center;gap:8px;min-width:0}
.ins-card h3{font:600 .875rem var(--display);margin:0}
.ins-tabs{display:flex;gap:2px;margin:0 0 0 auto;font-size:11px;color:#6e6a73;overflow:hidden}
.ins-tabs span{padding:2px 7px;border-radius:6px;white-space:nowrap}
.ins-tabs .on{background:#f1eff4;color:#1d1b20}
.ins-col{margin:0;text-align:right;font-size:11px;color:#6e6a73}
.ins-rows{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.ins-rows li{position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;min-height:30px;padding:3px 8px;font-size:12.5px;border-radius:7px;overflow:hidden}
.ins-rows li::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);z-index:-1;border-radius:7px;background:rgba(109,74,255,.12)}
.ins-card.warn .ins-rows li::before{background:rgba(214,138,24,.16)}
.ins-rows span{display:grid;min-width:0;flex:1}
.ins-rows small{font-size:10.5px;color:#6e6a73;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-rows b{font-weight:600;font-variant-numeric:tabular-nums}
@media(min-width:641px){.ins-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1101px){.ins-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}.ins-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* BrandHub stands out in the header: purple and semibold, with the arrow of a link that leaves the site. */
.nav-links>a.nav-hub{display:flex;align-items:center;gap:5px;color:var(--purple);font-weight:600}
.nav-hub span{font-size:.85em;transition:translate .2s var(--ease)}
.nav-hub:hover span{translate:2px -2px}

/* Home: the solution and feature pages, as cards with the menus' icons. */
.explore-label{margin:34px 0 14px;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.explore a{flex-direction:row;align-items:flex-start;gap:14px}
.explore svg{width:22px;height:22px;flex:none;margin-top:2px;fill:none;stroke:var(--purple);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.explore span{display:grid;gap:4px}

/* Pricing page: monthly or yearly, the estimator, the full comparison. */
.interval-switch{display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid #d9ddcf;border-radius:10px;background:#e6e8de}
.interval-switch button{min-height:40px;padding:0 16px;border:0;border-radius:7px;background:none;font-weight:600;font-size:var(--fs-small);color:#555d52;transition:background .25s,color .25s}
.interval-switch button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 4px #20241f14}
.interval-switch small{color:#5b38f0;font-weight:600;margin-left:4px}
html:not(.js) .interval-switch{display:none}
.interval-row{text-align:center;margin-top:26px}
.estimator{display:grid;gap:18px;max-width:1100px;margin:0 auto}
html:not(.js) .estimator-section{display:none}
.estimator form{display:grid;gap:22px;padding:24px;border:1px solid var(--line);border-radius:12px;background:#fafaf6}
.estimator label{display:grid;gap:8px;font-weight:550;font-size:var(--fs-small)}
.estimator label>span{display:flex;justify-content:space-between;gap:12px}
.estimator output{font-variant-numeric:tabular-nums;color:var(--purple);font-weight:650}
.estimator input[type=range]{width:100%;accent-color:var(--purple)}
.estimator .check{display:flex;align-items:center;gap:10px;font-weight:500}
.estimator .check input{width:18px;height:18px;accent-color:var(--purple)}
.estimate{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:12px;background:var(--ink);color:#f3f4ee}
.estimate .small-tag{color:#c9cfbd}
.estimate h3{font-size:clamp(1.5rem,1.35rem + .6vw,1.875rem)}
.estimate-total{font-family:var(--display);font-size:clamp(2.25rem,2rem + 1vw,3rem);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.estimate-total small{font:500 var(--fs-small) var(--sans);color:#c9cfbd;margin-left:6px}
.estimate ul{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid #ffffff22;display:grid;gap:8px;font-size:var(--fs-small);color:#d8dccf;flex:1}
.estimate li{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.estimate .why{font-size:var(--fs-note);color:#c9cfbd;line-height:1.6}
.estimate .button{justify-content:space-between}
.compare{width:100%;min-width:620px;border-collapse:collapse;font-size:var(--fs-small)}
.compare th,.compare td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{font:600 var(--fs-h3)/1.2 var(--display);letter-spacing:-.02em;padding-bottom:16px}
.compare thead th small{display:block;font:500 var(--fs-note) var(--sans);color:var(--muted);letter-spacing:0;margin-top:4px}
.compare tbody th{font-weight:500;color:var(--muted);width:30%}
.compare td{font-variant-numeric:tabular-nums}
.compare .featured{background:#f3f0fe}
.compare .group th{padding-top:28px;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:600}
.compare .no{color:#a3a99b}
.addons{display:grid;gap:14px}
.addons article{padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:#fafaf6}
.addons h3{font-size:var(--fs-h3);margin:8px 0 6px}
.addons p{color:var(--muted);line-height:1.6}
.addons strong{color:var(--ink)}
@media(min-width:641px){.addons{grid-template-columns:1fr 1fr}}
@media(min-width:851px){.estimator{grid-template-columns:1.25fr 1fr}.estimator form{padding:30px;grid-template-columns:1fr 1fr;align-content:start}.estimator .check{grid-column:1/-1}}
.estimator-note{grid-column:1/-1;color:var(--muted);font-size:var(--fs-note)}
.pricing-extras{max-width:none;margin-top:14px}