/* ==========================================================================
   ABGARMKON — landing page
   Extends /account/assets/ui.css (same tokens, same palette).
   ========================================================================== */

/* ---------- Header -------------------------------------------------------- */
.site-head{
	position:sticky; inset-block-start:0; z-index:60;
	background:var(--topbar-bg);
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	backdrop-filter:saturate(180%) blur(14px);
	border-bottom:1px solid transparent;
	transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.site-head.stuck{ border-bottom-color:var(--line); }
.site-head-in{
	max-width:1180px; margin-inline:auto;
	padding:12px var(--gutter);
	display:flex; align-items:center; gap:14px;
}
.site-nav{ display:none; align-items:center; gap:4px; margin-inline:auto; }
@media (min-width:900px){ .site-nav{ display:flex; } }
.site-nav a{
	display:inline-flex; align-items:center; min-height:36px;
	padding:8px 13px; border-radius:var(--r-pill);
	font-size:.9375rem; font-weight:600; color:var(--ink-2);
	transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.site-nav a:hover{ background:var(--surface-3); color:var(--ink); }
.site-head-actions{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
/* the brand wordmark yields first when the header runs out of room */
@media (max-width:479px){
	.site-head .brand span{ display:none; }
	.site-head-in{ gap:8px; }
	.site-head-actions{ gap:6px; }
}
@media (min-width:900px){ .site-head-actions{ margin-inline-start:0; } }

/* ---------- Page rhythm --------------------------------------------------- */
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:clamp(48px,8vw,92px); }
.sec-narrow{ max-width:760px; margin-inline:auto; }
.sec-head{ text-align:center; margin-bottom:clamp(26px,4vw,42px); }
.sec-head .t-eyebrow{ display:block; margin-bottom:10px; }
.sec-head h2{ font-size:clamp(1.5rem,4vw,2.3rem); letter-spacing:-.03em; }
.sec-head p{ margin-top:10px; color:var(--ink-3); font-size:1rem; max-width:56ch; margin-inline:auto; }

/* ---------- Hero ---------------------------------------------------------- */
.hero{
	position:relative; overflow:hidden;
	padding-block:clamp(44px,8vw,96px) clamp(48px,9vw,110px);
}
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg::before{
	content:''; position:absolute; inset:0;
	background:
		radial-gradient(80% 60% at 82% -6%, rgba(240,229,207,.95) 0%, rgba(240,229,207,0) 60%),
		radial-gradient(60% 50% at 4% 22%,  rgba(75,101,135,.16) 0%, rgba(75,101,135,0) 62%),
		radial-gradient(70% 55% at 96% 92%, rgba(222,187,132,.30) 0%, rgba(222,187,132,0) 66%);
}
.hero-bg .grid{
	position:absolute; inset:0; opacity:.5;
	background-image:
		linear-gradient(to right, rgba(75,101,135,.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(75,101,135,.07) 1px, transparent 1px);
	background-size:56px 56px;
	-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 75%);
	mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 75%);
}
.hero-in{ position:relative; z-index:1; display:grid; gap:clamp(32px,5vw,56px); align-items:center; }
@media (min-width:960px){ .hero-in{ grid-template-columns:1.05fr .95fr; } }

.hero-copy .t-display{ margin-block:14px 0; }
.hero-copy .lead{
	margin-top:16px; font-size:clamp(1rem,2vw,1.15rem);
	color:var(--ink-2); line-height:1.9; max-width:48ch;
}
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.hero-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }

/* the floating panel mock */
.mock{
	position:relative;
	border-radius:var(--r-2xl); padding:14px;
	background:rgba(255,255,255,.55);
	border:1px solid rgba(255,255,255,.85);
	-webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
	box-shadow:0 40px 80px -30px rgba(30,38,50,.34);
	animation:mockFloat 9s var(--ease-io) infinite alternate;
}
@keyframes mockFloat{ to{ transform:translateY(-14px); } }
.mock-win{
	background:var(--surface); border:1px solid var(--line);
	border-radius:var(--r-xl); overflow:hidden;
}
.mock-bar{
	display:flex; align-items:center; gap:6px;
	padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.mock-bar i{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); display:block; }
.mock-bar i:first-child{ background:#D6A6A0; }
.mock-bar i:nth-child(2){ background:#DFC79A; }
.mock-bar i:nth-child(3){ background:#A7C3B2; }
.mock-bar span{ margin-inline-start:auto; font-size:.8125rem; color:var(--ink-3); }
.mock-body{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.mock-hero{
	border-radius:var(--r-md); padding:15px 16px;
	background:radial-gradient(120% 150% at 100% 0%, rgba(240,229,207,.95), rgba(240,229,207,0) 60%), var(--surface-2);
	border:1px solid var(--line);
}
.mock-num{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; }
.mock-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mock-tile{
	border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface-2);
	padding:11px 10px; display:flex; flex-direction:column; gap:5px;
}
.mock-tile.on{ border-color:var(--accent); box-shadow:0 0 0 2.5px var(--accent-ring); background:var(--surface); }
.mock-line{ height:7px; border-radius:var(--r-pill); background:var(--surface-3); }
.mock-line.w60{ width:60%; } .mock-line.w40{ width:40%; } .mock-line.w80{ width:80%; }
.mock-line.acc{ background:linear-gradient(90deg,var(--accent),#7A93B5); }

/* ---------- Feature grid -------------------------------------------------- */
/* six cards, so cap at three columns — auto-fit gave a lopsided 4 + 2 */
.feat-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:620px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .feat-grid{ grid-template-columns:repeat(3,1fr); } }
.feat{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:22px 20px; display:flex; flex-direction:column; gap:11px;
	transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.feat:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-strong); }
.feat-ic{
	width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
	background:var(--surface-cream); color:var(--accent-800);
	border:1px solid var(--line-slate);
}
.feat h3{ font-size:1rem; }
.feat p{ font-size:.9375rem; color:var(--ink-3); line-height:1.85; }

/* ---------- Feature cards with a stage ------------------------------------
   The three headline cards carry a small scene on top that plays itself —
   the pattern from the collectui feature-card set. Each scene runs once when
   the card is revealed, and replays on hover so a visitor can look again.
   Everything is CSS; the scenes are decorative and hidden from assistive tech.
   -------------------------------------------------------------------------- */
.feat-lead{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .feat-lead{ grid-template-columns:repeat(3,1fr); } }

.feat-big{ padding:0; overflow:hidden; }
.feat-big > .feat-ic{ margin-inline-start:20px; }
.feat-big > h3{ padding-inline:20px; }
.feat-big > p{ padding:0 20px 22px; }

/* the middle card is the one being pointed at, the way the reference set has
   a lead card — it sits a step forward until you point at another one */
.feat-big.is-lead{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring), var(--sh-2); }
@media (hover:hover){
	.feat-lead:has(.feat-big:hover) .feat-big.is-lead:not(:hover){
		border-color:var(--line); box-shadow:none;
	}
}

.feat-stage{
	display:block; position:relative; overflow:hidden;
	margin-bottom:18px;
	aspect-ratio:16 / 10;
	background:
		radial-gradient(120% 88% at 50% 6%, var(--surface-cream), transparent 66%),
		var(--surface-2);
	border-block-end:1px solid var(--line);
}
.sc{ position:absolute; inset:0; display:grid; place-items:center; }

/* --- the little window every scene is built around --- */
.sc-win{
	position:relative;
	width:min(78%, 230px);
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:14px;
	box-shadow:var(--sh-2);
	padding:12px 13px;
	display:flex; flex-direction:column; gap:8px;
	text-align:start;
}
.sc-dots{ display:flex; gap:4px; }
.sc-dots i{ width:6px; height:6px; border-radius:50%; background:var(--line-strong); }
.sc-lbl{ font-size:.8125rem; font-weight:700; color:var(--ink-3); letter-spacing:.01em; }
.sc-rows{ display:flex; flex-direction:column; gap:5px; }
.sc-rows i{ height:5px; border-radius:3px; background:var(--line); }
.sc-rows i:nth-child(2){ width:62%; }

/* the badge that lands once the scene finishes */
.sc-badge{
	position:absolute; inset-block-end:12px; inset-inline-end:12px;
	display:inline-flex; align-items:center; gap:5px;
	padding:5px 10px; border-radius:999px;
	font-size:.8125rem; font-weight:800; line-height:1;
	background:var(--accent); color:var(--on-accent);
	box-shadow:var(--sh-accent);
}
.sc-badge svg{ flex:none; }

/* ---------- scene 1: the link types itself out ---------- */
.sc-type{
	font-size:.8125rem; font-weight:700; color:var(--ink-2);
	white-space:nowrap; overflow:hidden;
}
.sc-caret{
	display:inline-block; max-width:100%;
	overflow:hidden; white-space:nowrap; vertical-align:bottom;
	border-inline-end:2px solid transparent;
	width:100%;
}

/* ---------- scene 2: the balance fills, coins drop ---------- */
.sc-amt{ font-size:1.15rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.sc-track{ display:block; height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.sc-track i{ display:block; height:100%; width:78%; border-radius:4px; background:var(--accent); }
.sc-coin{
	position:absolute; inset-block-start:14px;
	width:13px; height:13px; border-radius:50%;
	background:var(--accent); opacity:0;
	box-shadow:inset 0 -2px 0 rgba(0,0,0,.16);
}
.sc-coin-1{ inset-inline-start:20%; }
.sc-coin-2{ inset-inline-start:46%; }
.sc-coin-3{ inset-inline-start:72%; }

/* ---------- scene 3: the ring sweeps round ---------- */
.sc-renew .sc-ring{ position:relative; display:grid; place-items:center; }
.sc-ring svg{ display:block; transform:rotate(-90deg); }
.sc-ring-bg{ stroke:var(--line); }
.sc-ring-fg{
	stroke:var(--accent);
	stroke-dasharray:214;
	stroke-dashoffset:34;
}
.sc-ring-ic{
	position:absolute; display:grid; place-items:center;
	color:var(--accent-800);
}

/* ==== the animations ====================================================== */
@keyframes sc-type   { from{ width:0 } to{ width:100% } }
@keyframes sc-caret  { 50%{ border-color:transparent } }
@keyframes sc-fill   { from{ width:0 } to{ width:78% } }
@keyframes sc-pop    { from{ opacity:0; transform:translateY(8px) scale(.9) } to{ opacity:1; transform:none } }
@keyframes sc-drop   { 0%{ opacity:0; transform:translateY(-14px) scale(.6) } 55%{ opacity:1 } 100%{ opacity:0; transform:translateY(54px) scale(.85) } }
@keyframes sc-sweep  { from{ stroke-dashoffset:214 } to{ stroke-dashoffset:34 } }
@keyframes sc-spin   { from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
@keyframes sc-rise   { from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* The scene plays when the card scrolls into view, and again on hover. A
   single `.playing` class drives it, added by the small script on the page —
   which lets a hover restart an animation that has already run. If that script
   never runs, every scene simply sits in its finished state above. */
.feat-big.playing .sc-caret{ animation:sc-type 1.5s steps(24) .25s both, sc-caret .7s step-end 6; }
.feat-big.playing .sc-rows i{ animation:sc-rise .5s var(--ease) both; }
.feat-big.playing .sc-rows i:nth-child(1){ animation-delay:1.5s; }
.feat-big.playing .sc-rows i:nth-child(2){ animation-delay:1.65s; }

.feat-big.playing .sc-track i{ animation:sc-fill 1.3s var(--ease) .35s both; }
.feat-big.playing .sc-coin{ animation:sc-drop 1.15s var(--ease) both; }
.feat-big.playing .sc-coin-1{ animation-delay:.15s; }
.feat-big.playing .sc-coin-2{ animation-delay:.42s; }
.feat-big.playing .sc-coin-3{ animation-delay:.68s; }

.feat-big.playing .sc-ring-fg{ animation:sc-sweep 1.5s var(--ease) .2s both; }
.feat-big.playing .sc-ring-ic{ animation:sc-spin 1.6s var(--ease) .2s both; }

.feat-big.playing .sc-badge{ animation:sc-pop .5s var(--ease) 1.75s both; }

/* Reduced motion: never play, just show the finished scene. The global rule
   collapses durations, and the base state above is already the end frame. */
@media (prefers-reduced-motion:reduce){
	.feat-big.playing .sc-caret,
	.feat-big.playing .sc-rows i,
	.feat-big.playing .sc-track i,
	.feat-big.playing .sc-coin,
	.feat-big.playing .sc-ring-fg,
	.feat-big.playing .sc-ring-ic,
	.feat-big.playing .sc-badge{ animation:none; }
	.sc-coin{ opacity:0; }
}

.feat-more{
	margin:22px 0 12px; text-align:center;
	font-size:.875rem; font-weight:700; color:var(--ink-3);
	letter-spacing:.02em;
}

/* ---------- Steps --------------------------------------------------------- */
.steps{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); counter-reset:s; }
.step{
	position:relative; background:var(--surface-2); border:1px solid var(--line);
	border-radius:var(--r-lg); padding:22px 20px;
	display:flex; flex-direction:column; gap:9px;
}
.step::before{
	counter-increment:s; content:counter(s);
	width:30px; height:30px; border-radius:10px;
	display:grid; place-items:center;
	background:var(--accent); color:var(--on-accent); font-weight:800; font-size:.875rem;
	box-shadow:var(--sh-accent);
}
.step h3{ font-size:1.0625rem; }
.step p{ font-size:.9375rem; color:var(--ink-3); line-height:1.85; }

/* ---------- FAQ ----------------------------------------------------------
   Same card language as the feature set, animated on open: an accent rail
   grows down the side, the chevron turns into a minus, and the answer slides
   in a line at a time. Still a <details>, so it works with the script absent
   and it is still searchable and keyboard-operable.
   -------------------------------------------------------------------------- */
.faq{ display:flex; flex-direction:column; gap:9px; }
.faq details{
	position:relative;
	background:var(--surface); border:1px solid var(--line);
	border-radius:var(--r-md); overflow:hidden;
	transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
	           background var(--t) var(--ease);
}
/* Open answers borrow the light-cast from the plan cards, so "the one you are
   looking at" reads the same way everywhere in the product: the marker button
   lights up and throws a soft glow into the card behind it. Anchored to the
   marker (30px in from the inline-end edge, 28px down) rather than to a corner,
   so it mirrors with the text direction. */
.faq details::before{
	content:''; position:absolute; pointer-events:none;
	inset-block-start:-37px; inset-inline-end:-55px;
	width:170px; height:130px; border-radius:50%;
	background:var(--accent);
	filter:blur(32px);
	opacity:0;
	transition:opacity var(--t-slow) var(--ease);
}
.faq details[open]{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring), var(--sh-2); }
.faq details[open]::before{ opacity:var(--cast-2); }
@media (hover:hover){
	.faq details:not([open]):hover{ background:var(--surface-2); border-color:var(--line-strong); }
}

.faq summary{
	position:relative; z-index:1;
	list-style:none; cursor:pointer;
	display:flex; align-items:center; gap:12px;
	padding:15px 17px; font-size:1rem; font-weight:700;
	transition:color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq details[open] > summary{ color:var(--accent-800); }

/* the marker: a quiet outline circle closed, the lit source of the glow open */
.faq summary .gl{
	margin-inline-start:auto; flex:none;
	width:26px; height:26px; border-radius:50%;
	display:grid; place-items:center;
	color:var(--ink-3); background:var(--surface-2);
	box-shadow:inset 0 0 0 1px var(--line);
	transition:transform var(--t-slow) var(--ease), background var(--t) var(--ease),
	           color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.faq details[open] > summary .gl{
	transform:rotate(180deg);
	background:var(--accent); color:var(--on-accent);
	box-shadow:var(--sh-accent);
}

.faq .faq-body{
	position:relative; z-index:1;
	padding:0 17px 16px;
	font-size:.9375rem; color:var(--ink-3); line-height:1.95;
}
/* opening animation — the browser reveals the content, this gives it motion */
@keyframes faq-in{
	from{ opacity:0; transform:translateY(-6px); }
	to  { opacity:1; transform:none; }
}
.faq details[open] > .faq-body{ animation:faq-in .34s var(--ease) both; }

/* the closing half: the script sets this while it animates the card shut,
   because a <details> drops its content the moment `open` is removed */
.faq details.closing > .faq-body{ animation:faq-in .22s var(--ease) reverse both; }

/* ---------- CTA band ------------------------------------------------------ */
.cta-band{
	position:relative; overflow:hidden;
	border-radius:var(--r-2xl);
	background:
		radial-gradient(90% 140% at 100% 0%, rgba(240,229,207,.9), rgba(240,229,207,0) 58%),
		linear-gradient(140deg,#3F566F,#2C3F58);
	color:#F4F2ED;
	padding:clamp(30px,5vw,52px);
	text-align:center;
	box-shadow:var(--sh-3);
}
.cta-band h2{ font-size:clamp(1.4rem,3.6vw,2rem); letter-spacing:-.03em; }
.cta-band p{ margin-top:10px; color:rgba(244,242,237,.78); font-size:1rem; max-width:48ch; margin-inline:auto; }
.cta-band .cluster{ justify-content:center; margin-top:22px; }
.cta-band .btn-ghost{ --btn-bd:rgba(255,255,255,.35); color:#F4F2ED; }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.12); }

/* ---------- Footer -------------------------------------------------------- */
.site-foot{ border-top:1px solid var(--line); margin-top:clamp(40px,7vw,80px); }
.site-foot-in{
	max-width:1180px; margin-inline:auto; padding:30px var(--gutter);
	display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.site-foot-links{ display:flex; gap:6px 14px; flex-wrap:wrap; font-size:.875rem; color:var(--ink-3); }
.site-foot-links a{ display:inline-flex; align-items:center; min-height:32px; padding-inline:4px; }
.site-foot-links a:hover{ color:var(--ink); }

@media (prefers-color-scheme:dark){


/* ==========================================================================
   Dark theme — the parts of the landing page that carry their own colour.
   Everything else rides on the tokens in ui.css and flips automatically.
   ========================================================================== */
:root:not([data-theme="light"]) .hero-bg::before{
	background:
		radial-gradient(80% 60% at 82% -6%, rgba(96,78,46,.42) 0%, rgba(96,78,46,0) 60%),
		radial-gradient(60% 50% at 4% 22%,  rgba(75,101,135,.26) 0%, rgba(75,101,135,0) 62%),
		radial-gradient(70% 55% at 96% 92%, rgba(120,92,48,.26) 0%, rgba(120,92,48,0) 66%);
}
:root:not([data-theme="light"]) .hero-bg .grid{
	background-image:
		linear-gradient(to right, rgba(140,167,204,.09) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(140,167,204,.09) 1px, transparent 1px);
}
:root:not([data-theme="light"]) .mock{
	background:rgba(27,34,44,.6);
	border-color:rgba(255,255,255,.10);
	box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
}
:root:not([data-theme="light"]) .mock-hero{
	background:radial-gradient(120% 150% at 100% 0%, rgba(120,98,58,.35), rgba(120,98,58,0) 60%), var(--surface-2);
}
:root:not([data-theme="light"]) .mock-bar i:first-child{ background:#B4756D; }
:root:not([data-theme="light"]) .mock-bar i:nth-child(2){ background:#B99A62; }
:root:not([data-theme="light"]) .mock-bar i:nth-child(3){ background:#6F947F; }
:root:not([data-theme="light"]) .cta-band{
	background:
		radial-gradient(90% 140% at 100% 0%, rgba(120,98,58,.45), rgba(120,98,58,0) 58%),
		linear-gradient(140deg,#232C38,#171E27);
	border:1px solid var(--line);
}
:root:not([data-theme="light"]) .cta-band .btn-cream{ --btn-bg:#E8D9B8; --btn-fg:#241F17; --btn-bd:transparent; }
:root:not([data-theme="light"]) .cta-band .btn-cream:hover{ background:#D9C8A2; }

}


/* ==========================================================================
   Dark theme — the parts of the landing page that carry their own colour.
   Everything else rides on the tokens in ui.css and flips automatically.
   ========================================================================== */
:root[data-theme="dark"] .hero-bg::before{
	background:
		radial-gradient(80% 60% at 82% -6%, rgba(96,78,46,.42) 0%, rgba(96,78,46,0) 60%),
		radial-gradient(60% 50% at 4% 22%,  rgba(75,101,135,.26) 0%, rgba(75,101,135,0) 62%),
		radial-gradient(70% 55% at 96% 92%, rgba(120,92,48,.26) 0%, rgba(120,92,48,0) 66%);
}
:root[data-theme="dark"] .hero-bg .grid{
	background-image:
		linear-gradient(to right, rgba(140,167,204,.09) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(140,167,204,.09) 1px, transparent 1px);
}
:root[data-theme="dark"] .mock{
	background:rgba(27,34,44,.6);
	border-color:rgba(255,255,255,.10);
	box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
}
:root[data-theme="dark"] .mock-hero{
	background:radial-gradient(120% 150% at 100% 0%, rgba(120,98,58,.35), rgba(120,98,58,0) 60%), var(--surface-2);
}
:root[data-theme="dark"] .mock-bar i:first-child{ background:#B4756D; }
:root[data-theme="dark"] .mock-bar i:nth-child(2){ background:#B99A62; }
:root[data-theme="dark"] .mock-bar i:nth-child(3){ background:#6F947F; }
:root[data-theme="dark"] .cta-band{
	background:
		radial-gradient(90% 140% at 100% 0%, rgba(120,98,58,.45), rgba(120,98,58,0) 58%),
		linear-gradient(140deg,#232C38,#171E27);
	border:1px solid var(--line);
}
:root[data-theme="dark"] .cta-band .btn-cream{ --btn-bg:#E8D9B8; --btn-fg:#241F17; --btn-bd:transparent; }
:root[data-theme="dark"] .cta-band .btn-cream:hover{ background:#D9C8A2; }