/* Coffee & Chocolate: approved brand palette */
:root{--coffee-burgundy:#910029;--coffee-espresso:#211714;--coffee-chocolate:#3B2723;--coffee-caramel:#C18A5B;--coffee-latte:#D8BEA5;--coffee-foam:#F5EDE3;--bg:var(--coffee-espresso);--bg-soft:#2b1e1a;--surface:var(--coffee-chocolate);--surface-2:#49332b;--ink:var(--coffee-foam);--ink-soft:var(--coffee-latte);--ink-mute:var(--coffee-latte);--line:#705444;--tea:var(--coffee-burgundy);--tea-dark:#a60b39;--tea-bright:#e9afbf;--tea-light:rgba(145,0,41,.22);--leaf:var(--coffee-foam);--leaf-light:rgba(245,237,227,.08)}
body:not(.overlay-body){background:var(--coffee-espresso);color:var(--coffee-foam)}
.nav{background:rgba(33,23,20,.95)}.hero{background:radial-gradient(ellipse at 20% 40%,rgba(193,138,91,.12),transparent 65%)}
.hero-art{background:var(--coffee-espresso);border-color:#705444}.hero-art:after{background:linear-gradient(0deg,rgba(33,23,20,.7),transparent 40%,transparent 75%,rgba(33,23,20,.2))}
.btn-primary,.side-nav a.active{background:var(--coffee-burgundy);color:var(--coffee-foam)}.btn-primary:hover{background:#a60b39}.btn-dark{background:var(--coffee-foam);color:var(--coffee-espresso)}
.claim,.support-preview,.showcase .demo-card{background:var(--coffee-foam);color:var(--coffee-espresso)}
.claim input,.claim .prefix,.support-preview small,.demo-card .who small,.demo-foot,.showcase .demo-card p{color:#624636}.claim input::placeholder{color:#705444}
.demo-card .pill{color:#3b2723;border-color:#9c7d66}.demo-card .pill.active{color:#f5ede3;background:#910029}
.card,.panel,.tile,.auth-card,.ui-dialog-box,.plan,.feature,.fee-visual{border-color:#705444}
.footer,.side{background:#1b120f}.creator-strip{background:#2b1e1a}.field,input.field,textarea.field,select.field{background-color:#211714;border-color:#94735b;color:#f5ede3}.field::placeholder{color:#a58f7c;opacity:1}
.section-head .eyebrow,.editorial-kicker,.showcase .eyebrow{color:var(--coffee-caramel)!important}.hero h1 .accent{color:#f5ede3}.hero h1 .accent:after{background:#910029}
.goal .bar,.stack,.calc-bar{background:#705444}.goal .bar i{background:#c18a5b}.fee-chip.you{background:#f5ede3;color:#211714}.fee-chip.us{background:#910029;color:#f5ede3}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#d8bea5}
::selection{background:#910029;color:#f5ede3}

.hero-art>img[src*='espresso-hero']{object-fit:cover;object-position:50% 50%;background:#211714;}

/* Coffee and chocolate default creator cover */
.cover-banner{background-image:linear-gradient(90deg,transparent 30%,rgba(33,23,20,.35)),url('/assets/coffee-chocolate-cover.webp');background-size:cover;background-position:center 55%;}

/* Borderless branded iced macchiato for default creator covers. */
.cover-banner{height:360px;background-color:#211714;background-image:url('/assets/creator-iced-macchiato.webp');background-size:auto 100%;background-position:14% center;background-repeat:no-repeat;border:0;box-shadow:none}
.cover-banner .container{position:relative;padding-top:90px}
@media(max-width:700px){.cover-banner{height:300px;background-size:auto 90%;background-position:-85px bottom}.cover-banner .container{padding-top:30px}.cover-banner h2{max-width:55%;margin-inline-end:0}}
/* Keep the title clear of the default cover picture (cover-mobile.css pins the picture to the start side at 14% on desktop/tablet): narrower title, smaller picture on tablets, picture on the right in English (LTR, where the title starts on the left). Custom covers (inline background-size) keep the full-width title. */
@media(min-width:701px) and (max-width:900px){html .cover-banner{background-size:auto 66% !important;background-position:2% 60% !important}html[lang="en"] .cover-banner{background-position:98% 60% !important}.cover-banner:not([style*="background-size"]) .cover-title,.cover-banner:not([style*="background-size"]) h2{max-width:calc(100% - 330px)}}
@media(min-width:901px){html[lang="en"] .cover-banner{background-position:86% 60% !important}.cover-banner:not([style*="background-size"]) .cover-title,.cover-banner:not([style*="background-size"]) h2{max-width:calc(100% - 460px)}}