/* =================================================================
   Digital Snowstorm — Home (from scratch, reference-driven)
   Near-black canvas, violet→blue→cyan glow + gradient, bento, scorecard
   dashboard, auto-scrolling logos, custom lead-intake modal + form.
   Self-contained. Font: Google Sans. No theme system.
   ================================================================= */

@font-face{font-family:"Google Sans";src:url("/assets/fonts/google-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Google Sans";src:url("/assets/fonts/google-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Google Sans";src:url("/assets/fonts/google-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Google Sans";src:url("/assets/fonts/google-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

:root{
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:2.5rem;--s8:3rem;--s9:4rem;--s10:5rem;--s11:6.5rem;--s12:8rem;
  --fs-sm:.875rem;--fs-xs:.75rem;--fs-base:1.0625rem;--fs-lg:1.1875rem;
  --fs-h3:1.5rem;--fs-h2:clamp(2rem,3vw + 1rem,2.9rem);--fs-h1:clamp(2.9rem,5vw + 1rem,4.75rem);
  --bg:#08090F;--bg-2:#0C0E18;--surface:#12141F;--surface-2:#191B28;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);
  --ink:#F5F6FB;--muted:#A2A6BA;--faint:#6F738A;
  --violet:#9B8CFF;--blue:#5E9BFF;--cyan:#74E0F2;--pink:#E6A2FF;--green:#5BE7B0;
  --accent:#A9B6FF;--link:#A9B6FF;--link-hover:#CBD4FF;
  --chart-a:#B69CFF;--chart-b:#6E9DFF;--chart-c:#74E0F2;
  /* RGB triples for the recurring tinted blues, tokenized so Evening can warm
     them all at once. Defaults match the dark/light blue accents. */
  --accent-rgb:110,157,255;--focus-rgb:94,155,255;--cyan-rgb:116,224,242;--violet-rgb:155,124,255;--pink-rgb:230,162,255;--accent-2:#9DB7FF;
  --grad:linear-gradient(110deg,#B69CFF 0%,#6E9DFF 48%,#74E0F2 100%);
  --container:75rem;--radius:14px;--radius-lg:22px;--radius-pill:999px;--header-h:4.5rem;
  --ease:cubic-bezier(.16,1,.3,1);--dur:.28s;
  --shadow:0 2px 8px rgba(0,0,0,.5),0 30px 80px rgba(0,0,0,.5);
  --glow-violet:rgba(var(--violet-rgb),.5);--glow-blue:rgba(var(--focus-rgb),.4);--glow-cyan:rgba(var(--cyan-rgb),.35);
}

*,*::before,*::after{box-sizing:border-box;}*{margin:0;}
html{scroll-behavior:smooth;scroll-padding-top:6rem;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:"Google Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:var(--fs-base);line-height:1.62;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;position:relative;}
body::before{content:"";position:absolute;inset:0 0 auto 0;height:120vh;z-index:-2;pointer-events:none;background:radial-gradient(60rem 50rem at 50% -8rem,rgba(var(--accent-rgb),.16),transparent 60%),radial-gradient(50rem 40rem at 80% 6rem,rgba(var(--violet-rgb),.12),transparent 55%);}
img,svg,video{display:block;max-width:100%;height:auto;}svg{fill:currentColor;}
/* Line icons authored with fill="none" must stay unfilled. A bare `svg{fill:currentColor}`
   rule overrides the fill="none" attribute (CSS beats presentation attributes), which would
   fill every outline icon solid. Re-assert it so stroke icons render as outlines. */
svg[fill="none"]{fill:none;}
h1,h2,h3,h4{font-family:"Google Sans",sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.025em;color:var(--ink);text-wrap:balance;}
h1{font-size:var(--fs-h1);}h2{font-size:var(--fs-h2);}h3{font-size:var(--fs-h3);}
p{text-wrap:pretty;}
a{color:var(--link);text-decoration:none;transition:color var(--dur);}a:hover{color:var(--link-hover);}
strong{color:var(--ink);font-weight:600;}
ul,ol{padding-left:1.2em;}li{margin-block:.4rem;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}
::selection{background:rgba(var(--accent-rgb),.35);color:#fff;}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s5);}
/* Uniform module rhythm — every section shares the same symmetric vertical
   padding, so the gap between any two adjacent modules is identical on every
   page. Modules are separated by background-color alternation (.band /
   .stats-band), never by rules. pt-tight / pb-tight are kept as no-op hooks so
   existing markup stays valid; the interactive tool pages re-scope their own
   tighter spacing in roi-calculator.css. */
.section{padding-block:clamp(3rem,4.5vw,4rem);}
.section.pt-tight,.section.pb-tight{padding-block:clamp(3rem,4.5vw,4rem);}
.eyebrow{display:inline-block;font-size:var(--fs-sm);font-weight:600;letter-spacing:.04em;color:var(--accent);margin-bottom:var(--s4);}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lead{font-size:var(--fs-lg);color:var(--muted);line-height:1.6;}
.muted{color:var(--muted);}.center{text-align:center;}
.head{max-width:46rem;margin:0 auto var(--s8);text-align:center;}
.head p{margin-top:var(--s4);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.8rem 1.6rem;font-size:var(--fs-base);font-weight:600;line-height:1;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;text-align:center;transition:transform var(--dur) var(--ease),box-shadow var(--dur),background var(--dur),border-color var(--dur),color var(--dur);}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:#fff;color:#0A0A12;box-shadow:0 8px 30px rgba(180,200,255,.25);}
.btn-primary:hover{background:#fff;color:#0A0A12;box-shadow:0 12px 40px rgba(180,200,255,.4);}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-2);}
.btn-ghost:hover{color:var(--ink);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08);}
.btn-lg{min-height:3.4rem;padding-inline:2rem;font-size:var(--fs-lg);}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;}
.btn-row.center{justify-content:center;}

.badge{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .9rem;border-radius:var(--radius-pill);background:rgba(255,255,255,.04);border:1px solid var(--line-2);font-size:var(--fs-sm);color:var(--ink);font-weight:600;margin-bottom:var(--s5);}
.badge .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(91,231,176,.55);animation:dotBreathe 2s ease-in-out infinite;}
.badge .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:dotRing 2s ease-out infinite;}
@keyframes dotBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.22);}}
@keyframes dotRing{0%{opacity:.5;transform:scale(1);}70%{opacity:0;transform:scale(3.4);}100%{opacity:0;transform:scale(3.4);}}
@media (prefers-reduced-motion:reduce){.badge .dot{animation:none;box-shadow:0 0 0 4px rgba(91,231,176,.18);}.badge .dot::after{display:none;}}

/* ---------------------------------------------------------------
   Header / nav / mega
   --------------------------------------------------------------- */
.skip-link{position:absolute;left:1rem;top:-100px;background:#fff;color:#0A0A12;padding:.7rem 1.2rem;border-radius:10px;font-weight:700;z-index:200;}
.skip-link:focus{top:1rem;}
.hdr{position:sticky;top:0;z-index:60;height:var(--header-h);display:flex;align-items:center;background:rgba(8,9,15,.7);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line);}
.hdr .wrap{display:flex;align-items:center;gap:var(--s4);}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink);margin-right:auto;}
.brand:hover{color:var(--ink);}
.brand-mark{width:30px;height:30px;flex:none;}
.brand .lite{color:var(--muted);font-weight:500;}

.nav{display:flex;align-items:center;gap:.25rem;}
.nav-list{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0;}
.nav-link{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .85rem;font-size:var(--fs-sm);font-weight:500;color:var(--muted);border-radius:10px;}
.nav-link:hover{color:var(--ink);background:rgba(255,255,255,.05);}
.caret{width:12px;height:12px;transition:transform var(--dur);}
.has-mega:hover .caret{transform:rotate(180deg);}
.nav-cta{margin-left:.5rem;}
.nav-cta .btn{min-height:2.4rem;padding:.5rem 1.05rem;font-size:var(--fs-sm);}

.has-mega{position:relative;}
.mega,.menu{position:absolute;top:calc(100% + 14px);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--dur),transform var(--dur),visibility var(--dur);z-index:70;}
.has-mega:hover .mega,.has-mega:hover .menu,.has-mega:focus-within .mega,.has-mega:focus-within .menu{opacity:1;visibility:visible;transform:translateY(0);}
.menu{left:0;min-width:16rem;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:.5rem;list-style:none;margin:0;}
.menu li{margin:0;}
.menu a{display:block;padding:.7rem .9rem;border-radius:10px;color:var(--muted);font-size:var(--fs-sm);font-weight:500;}
.menu a:hover{background:var(--surface-2);color:var(--ink);}
.menu a small{display:block;color:var(--faint);font-size:var(--fs-xs);margin-top:2px;font-weight:400;}
/* Solutions nested dropdown */
.solutions-menu{min-width:15rem;}
.has-sub{position:relative;}
.sub-label{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem .9rem;border-radius:10px;background:none;border:none;color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer;text-align:left;}
.sub-label:hover{background:var(--surface-2);color:var(--ink);}
/* Case Studies / Free Tools level-2 labels are links (navigate to their hub page);
   keep the flex layout the .sub-label buttons use so the caret still sits right. */
.menu a.sub-label{display:flex;text-decoration:none;}
.subcaret{width:14px;height:14px;flex:none;color:var(--faint);transition:transform var(--dur);}
.submenu{position:absolute;top:-.5rem;left:calc(100% + .35rem);min-width:15rem;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:.5rem;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateX(6px);transition:opacity var(--dur),transform var(--dur),visibility var(--dur);}
/* Desktop flyouts open on hover/focus only. The clicked-open (aria-expanded) state is
   intentionally NOT honored here; it's for the stacked mobile menu (see media query below).
   Honoring it on desktop left a clicked submenu stuck open, bleeding over a sibling on hover. */
.has-sub:hover > .submenu,.has-sub:focus-within > .submenu{opacity:1;visibility:visible;transform:translateX(0);}
.has-sub:hover > .sub-label .subcaret{color:var(--accent);}
.submenu li{margin:0;}
.submenu a{display:flex;align-items:center;justify-content:space-between;gap:1rem;white-space:nowrap;padding:.6rem .9rem;border-radius:9px;color:var(--muted);font-size:var(--fs-sm);font-weight:500;}
.submenu a:hover{background:var(--surface-2);color:var(--ink);}
.nav-badge{flex:none;font-size:.625rem;font-weight:700;line-height:1;letter-spacing:.03em;text-transform:uppercase;padding:.22rem .44rem;border-radius:999px;background:var(--surface-2);color:var(--faint);border:1px solid var(--line-2);}
/* SaaS = brand violet; eComm = gold/yellow. Badges keep their literal category hue across all
   themes (they aren't part of evening's warm veil). Bright gold reads on dark; on the light and
   cream (evening) surfaces a deeper gold keeps the small uppercase text legible. */
.nav-badge--saas{color:#a98bff;background:rgba(150,120,255,.16);border-color:rgba(150,120,255,.5);}
.nav-badge--ecomm{color:#f2c230;background:rgba(240,196,48,.16);border-color:rgba(240,196,48,.5);}
html:is([data-theme="light"],[data-theme="evening"]) .nav-badge--ecomm{color:#8a6308;background:rgba(214,158,20,.20);border-color:rgba(190,140,20,.55);}
/* Real Estate = deep red. Keeps its literal category hue across themes; a bright crimson reads on
   dark, while a deeper oxblood keeps the small uppercase text legible on light/evening surfaces. */
.nav-badge--realestate{color:#ff6166;background:rgba(176,28,36,.18);border-color:rgba(176,28,36,.55);}
html:is([data-theme="light"],[data-theme="evening"]) .nav-badge--realestate{color:#9e1119;background:rgba(158,17,25,.12);border-color:rgba(158,17,25,.5);}
.menu-all{margin-top:.25rem;border-top:1px solid var(--line);padding-top:.4rem;}
.menu-all a{font-weight:600;color:var(--ink);}

.mega{position:fixed;left:50%;transform:translateX(-50%) translateY(8px);top:var(--header-h);margin-top:.6rem;width:min(62rem,calc(100vw - 2rem));background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--s6);}
.has-mega:hover .mega,.has-mega:focus-within .mega{transform:translateX(-50%) translateY(0);}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6) var(--s7);}
.mega-col h5{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin-bottom:.6rem;font-weight:700;}
.mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;}
.mega-col li{margin:0;}
.mega-col a{display:block;padding:.45rem .6rem;border-radius:9px;color:var(--muted);font-size:var(--fs-sm);font-weight:500;}
.mega-col a:hover{background:var(--surface-2);color:var(--ink);}
.mega-foot{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;align-items:center;font-size:var(--fs-sm);}
.mega-foot a{font-weight:600;}

.nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line-2);border-radius:10px;color:var(--ink);cursor:pointer;}
.nav-toggle svg{width:22px;height:22px;}.nav-toggle .x{display:none;}
.nav-toggle[aria-expanded="true"] .mn{display:none;}.nav-toggle[aria-expanded="true"] .x{display:block;}

@media (max-width:1024px){
  .nav-toggle{display:inline-flex;}
  /* position:fixed here resolves against the .hdr ancestor (its backdrop-filter makes it the
     containing block), not the viewport — so use an explicit height instead of bottom:0, which
     would collapse the panel to the header's height. Works for both containing blocks.
     The closed panel is hidden IN PLACE (opacity/visibility + a small vertical slide), never
     parked off-screen with translateX(100%): because .hdr is the fixed containing block, an
     off-screen panel escapes body{overflow-x:hidden} and adds horizontal scroll on mobile.
     pointer-events:none keeps the invisible full-width panel from swallowing taps when closed. */
  .nav{position:fixed;top:var(--header-h);left:0;right:0;height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));flex-direction:column;align-items:stretch;gap:0;background:var(--bg);padding:var(--s5);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);border-top:1px solid var(--line);}
  .nav.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-link{padding:1rem .25rem;font-size:var(--fs-lg);border-bottom:1px solid var(--line);color:var(--ink);border-radius:0;}
  .nav-cta{margin:var(--s5) 0 0;}.nav-cta .btn{width:100%;}
  .mega,.menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:.5rem 0 1rem 1rem;width:auto;min-width:0;}
  .mega-grid{grid-template-columns:1fr 1fr;gap:var(--s4);}
  .caret{display:none;}.mega-foot{display:none;}
  .solutions-menu{min-width:0;}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:.25rem 0 .5rem 1rem;min-width:0;display:none;}
  .sub-label[aria-expanded="true"] + .submenu{display:block;}
  .sub-label .subcaret{transition:transform var(--dur);}
  .sub-label[aria-expanded="true"] .subcaret{transform:rotate(90deg);}
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero{position:relative;text-align:center;padding-top:clamp(3rem,6vw,5.5rem);padding-bottom:clamp(2rem,4vw,3rem);overflow:visible;}
.hero .orb{z-index:-1;}
.hero .badge,.hero h1,.hero .lead,.hero .btn-row,.hero .hero-note{position:relative;z-index:2;}
.hero h1{margin-bottom:var(--s5);max-width:18ch;margin-inline:auto;}
.hero .lead{max-width:42rem;margin:0 auto var(--s6);font-size:clamp(1.1rem,1vw + .8rem,1.35rem);}
.hero .btn-row{margin-bottom:var(--s5);}
.hero-note{font-size:var(--fs-sm);color:var(--ink);font-weight:700;}
.snow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}

.orb{position:absolute;left:50%;top:7rem;width:min(48rem,90vw);height:min(48rem,90vw);transform:translateX(-50%);z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle at 38% 38%,var(--glow-violet),transparent 55%),radial-gradient(circle at 65% 45%,var(--glow-blue),transparent 55%),radial-gradient(circle at 50% 68%,var(--glow-cyan),transparent 55%);filter:blur(60px);opacity:.85;}

.hero-visual{position:relative;z-index:2;margin-top:var(--s8);}

/* Dashboard (scorecards + graphs) */
.app{max-width:62rem;margin:0 auto;background:linear-gradient(180deg,#11131E,#0B0D16);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;text-align:left;}
.app-bar{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);}
.app-bar .dots{display:flex;gap:.4rem;}.app-bar .dots i{width:11px;height:11px;border-radius:50%;background:var(--line-2);}
.app-bar .tt{font-size:var(--fs-sm);color:var(--muted);font-weight:500;}.app-bar .tt b{color:var(--ink);font-weight:600;}
.app-bar .range{margin-left:auto;font-size:var(--fs-xs);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;}
.app-body{display:grid;grid-template-columns:54px 1fr;}
.app-rail{border-right:1px solid var(--line);padding:var(--s4) 0;display:flex;flex-direction:column;gap:.9rem;align-items:center;}
.app-rail i{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.06);display:block;}
.app-rail i.on{background:var(--grad);}
.app-main{padding:var(--s5);display:grid;gap:var(--s4);}

.sc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;}
.sc-row.four{grid-template-columns:repeat(4,1fr);}
.sc{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;}
.sc .lab{font-size:var(--fs-xs);color:var(--muted);line-height:1.3;min-height:2.1em;}
.sc .val{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin-top:.35rem;line-height:1;}
.sc .d{font-size:var(--fs-xs);color:var(--green);font-weight:600;margin-top:.35rem;display:inline-flex;align-items:center;gap:.25rem;}
@media (max-width:620px){.sc-row,.sc-row.four{grid-template-columns:1fr 1fr;}}

.panel{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:var(--s4) var(--s5) var(--s5);}
.panel .ptitle{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4);}
.panel .ptitle h4,.panel .ptitle .pt{font-size:1rem;font-weight:600;}
.panel .ptitle .up{color:var(--green);font-size:var(--fs-sm);font-weight:600;}
.chart{width:100%;height:auto;display:block;}

.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.fn{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:.7rem .6rem;text-align:center;}
.fn b{display:block;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;}
.fn span{font-size:var(--fs-xs);color:var(--muted);}
@media (max-width:600px){.app-body{grid-template-columns:1fr;}.app-rail{flex-direction:row;justify-content:center;border-right:none;border-bottom:1px solid var(--line);}.sc-row{grid-template-columns:1fr;}.funnel{grid-template-columns:1fr 1fr;}}

/* ---------------------------------------------------------------
   Logo marquee
   --------------------------------------------------------------- */
.logos{padding-block:var(--s8);}
.logos .lab{text-align:center;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:var(--s6);}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marq 50s linear infinite;will-change:transform;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track img{width:auto;flex:none;max-width:170px;margin-right:clamp(2.5rem,5vw,4.5rem);opacity:.72;filter:invert(1) brightness(1.6);transition:opacity var(--dur);}
.marquee-track img:hover{opacity:1;}
/* Optically balanced per-logo heights so each mark reads at a similar size */
.marquee-track .lg-ww{height:44px;}
.marquee-track .lg-credit{height:42px;}
.marquee-track .lg-charles{height:26px;}
.marquee-track .lg-thrive{height:46px;}
.marquee-track .lg-cocoavia{height:40px;}
.marquee-track .lg-yardbarker{height:24px;}
.marquee-track .lg-backstage{height:26px;}
.marquee-track .lg-helium{height:28px;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}.marquee-track img{margin:.5rem 1.5rem;}}

/* ---------------------------------------------------------------
   Services bento
   --------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.bento{grid-template-columns:1fr;}}
.bento.center-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);max-width:46rem;margin-inline:auto;}
@media (max-width:600px){.bento.center-2{grid-template-columns:1fr;}}
/* Modules are separated by background-color alternation, not rules. The former
   .divide hairline has been removed; any remaining .divide markup just inherits
   the standard uniform section rhythm. */
.tile{position:relative;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6);overflow:hidden;transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur);}
a.tile{color:inherit;display:block;}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(20rem 14rem at 100% 0,rgba(var(--violet-rgb),.14),transparent 60%);opacity:0;transition:opacity var(--dur);pointer-events:none;}
.tile:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow);}
.tile:hover::after{opacity:1;}
.tile .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:var(--s5);color:#0A0A12;background:var(--grad);}
.tile .ic svg{width:24px;height:24px;}
.tile h3{font-size:1.3rem;margin-bottom:.5rem;}
.tile p{color:var(--muted);font-size:var(--fs-base);}
.tile .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--s4);font-weight:600;font-size:var(--fs-sm);color:var(--accent);}
.tile .more svg{width:15px;height:15px;transition:transform var(--dur);}
.tile:hover .more svg{transform:translateX(4px);}
.bento-note{margin:var(--s4) 0 0;font-size:var(--fs-sm);color:var(--faint);}
.solutions-cta{display:flex;justify-content:center;margin-top:var(--s7);}

/* ---------------------------------------------------------------
   Blog post-card grid + pagination
   (blog index/paginated pages; mirrors the related-articles cards)
   --------------------------------------------------------------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
@media (max-width:900px){.post-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr;}}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur);}
.post-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow);}
.post-card .pc-media{aspect-ratio:16 / 9;background:linear-gradient(120deg,#12141f,#0c0e18);display:grid;place-items:center;border-bottom:1px solid var(--line);}
.post-card .pc-media img{width:100%;height:100%;object-fit:cover;display:block;}
.post-card .pc-media .ph{display:inline-flex;align-items:center;gap:.5rem;color:var(--faint);font-size:var(--fs-sm);}
.post-card .pc-media .ph svg{width:20px;height:20px;}
.post-card .pc-body{padding:var(--s5);display:flex;flex-direction:column;gap:.5rem;flex:1;}
.post-card .pc-tag{align-self:flex-start;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--accent);}
.post-card h3{font-size:1.12rem;line-height:1.3;margin:0;color:var(--ink);}
.post-card .pc-body p{font-size:var(--fs-sm);color:var(--muted);margin:0;line-height:1.55;flex:1;}
.post-card .pc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin-top:var(--s2);font-size:var(--fs-xs);color:var(--faint);}
.post-card .pc-meta .pc-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;}
.post-card .pc-meta .pc-author{font-weight:600;color:var(--muted);}
.post-card .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--s2);font-weight:600;font-size:var(--fs-sm);color:var(--accent);}
.post-card .more svg{width:15px;height:15px;transition:transform var(--dur);}
.post-card:hover .more svg{transform:translateX(4px);}

/* Pagination — crawlable <a> links; first/last always shown + a window of
   neighbours around the current page. Pure HTML/CSS, no JS. */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;margin-top:var(--s7);}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0 .7rem;border-radius:10px;font-size:var(--fs-sm);font-weight:600;text-decoration:none;}
.pagination a{color:var(--muted);border:1px solid var(--line);background:var(--surface);transition:border-color var(--dur),color var(--dur),background var(--dur);}
.pagination a:hover{border-color:var(--line-2);color:var(--ink);}
.pagination .pg-current{color:#0A0A12;background:var(--grad);border:1px solid transparent;}
.pagination .pg-gap{color:var(--faint);border:none;background:none;min-width:1.5rem;padding:0;}
.pagination .pg-prev,.pagination .pg-next{font-weight:700;}
.pagination .pg-prev[aria-disabled="true"],.pagination .pg-next[aria-disabled="true"]{opacity:.4;pointer-events:none;}
@media (max-width:600px){.pagination .pg-prev span,.pagination .pg-next span{display:none;}}

/* ---------------------------------------------------------------
   Stats band
   --------------------------------------------------------------- */
.stats-band{background:var(--bg-2);}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);text-align:center;}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s5);}}
.stat .n{font-size:clamp(2.4rem,4vw,3.3rem);font-weight:700;letter-spacing:-.03em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .l{margin-top:.6rem;font-size:var(--fs-sm);color:var(--muted);line-height:1.4;}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);counter-reset:st;}
@media (max-width:860px){.steps{grid-template-columns:1fr;}}
.stp{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6);}
.stp .num{counter-increment:st;font-weight:700;font-size:1rem;color:#0A0A12;background:var(--grad);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;margin-bottom:var(--s4);}
.stp .num::before{content:counter(st);}
.stp h4{font-size:1.15rem;margin-bottom:.4rem;}
.stp p{color:var(--muted);font-size:var(--fs-base);}
.callout{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.22);border-radius:var(--radius-lg);padding:var(--s5) var(--s6);margin-top:var(--s5);}
.callout svg{width:30px;height:30px;color:var(--accent);}
.callout p{margin:0;}

/* cases + chips */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:stretch;}
@media (max-width:760px){.cases{grid-template-columns:1fr;}}
.case{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur);}
.case:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow);}
.case-link{position:absolute;inset:0;z-index:2;border-radius:inherit;}
.case-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.case-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line);}
.case-media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--ease);}
.case:hover .case-media img{transform:scale(1.045);}
.case-body{display:flex;flex-direction:column;flex:1;padding:var(--s6);}
.case-badge{align-self:flex-start;font-size:.625rem;font-weight:700;line-height:1;letter-spacing:.03em;text-transform:uppercase;padding:.3rem .55rem;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--faint);margin-bottom:var(--s4);}
.case-badge--saas{color:#a98bff;background:rgba(150,120,255,.16);border-color:rgba(150,120,255,.5);}
.case-badge--ecomm{color:#f2c230;background:rgba(240,196,48,.16);border-color:rgba(240,196,48,.5);}
html:is([data-theme="light"],[data-theme="evening"]) .case-badge--ecomm{color:#8a6308;background:rgba(214,158,20,.20);border-color:rgba(190,140,20,.55);}
.case-badge--realestate{color:#ff6166;background:rgba(176,28,36,.18);border-color:rgba(176,28,36,.55);}
html:is([data-theme="light"],[data-theme="evening"]) .case-badge--realestate{color:#9e1119;background:rgba(158,17,25,.12);border-color:rgba(158,17,25,.5);}
.case h3{font-size:1.35rem;margin-bottom:.5rem;}
.case p{color:var(--muted);}
.case .metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:auto;padding-top:var(--s5);}
.case .metrics .m b{display:block;font-size:1.8rem;font-weight:700;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;}
.case .metrics .m span{display:block;margin-top:.35rem;font-size:var(--fs-xs);color:var(--muted);}
.rankings{margin-top:var(--s8);text-align:center;}
.rankings .eyebrow{margin-bottom:var(--s5);}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:0;list-style:none;margin:0;}
.chips li{margin:0;}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);font-size:var(--fs-sm);font-weight:500;}
.chip::before{content:"#1";font-weight:700;font-size:var(--fs-xs);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* blog/post cards: 3-up, featured image, date + read-time meta */
.cases.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.cases.three{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.cases.three{grid-template-columns:1fr;}}
.case-media.ph{display:grid;place-items:center;background:linear-gradient(120deg,var(--surface-2),var(--bg-2));}
.case-media.ph svg{width:34px;height:34px;color:var(--faint);}
.pmeta{display:flex;align-items:center;gap:.55rem;margin-top:auto;padding-top:var(--s5);font-size:var(--fs-xs);color:var(--faint);}
.pmeta time{color:var(--muted);}
.pmeta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;flex:none;}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:stretch;}
@media (max-width:860px){.quotes{grid-template-columns:1fr;}}
.q{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6);}
.q blockquote{margin:0 0 var(--s5);font-size:var(--fs-lg);line-height:1.5;color:var(--ink);flex:1;}
.q .who{display:flex;align-items:center;gap:.8rem;padding-top:var(--s5);border-top:1px solid var(--line);}
.q .who img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;}
.q .who .nm{font-weight:600;font-size:var(--fs-sm);line-height:1.2;}
.q .who .ro{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;}

/* CTA */
.cta{position:relative;text-align:center;border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:clamp(3rem,6vw,5rem);overflow:hidden;background:linear-gradient(180deg,var(--surface),var(--bg-2));}
.cta .orb{top:-22rem;opacity:.6;}
.cta h2,.cta p,.cta .btn-row{position:relative;z-index:2;}
.cta p{max-width:40rem;margin:var(--s4) auto var(--s6);color:var(--muted);font-size:var(--fs-lg);}

/* footer */
.ft{border-top:1px solid var(--line);padding-block:var(--s9) var(--s6);background:var(--bg-2);}
.ft-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--s7);}
@media (max-width:820px){.ft-grid{grid-template-columns:1fr 1fr;gap:var(--s6);}}
@media (max-width:520px){.ft-grid{grid-template-columns:1fr;}}
.ft-brand p{color:var(--faint);font-size:var(--fs-sm);margin-top:var(--s4);max-width:30ch;}
.ft-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s5) var(--s7);flex-wrap:wrap;padding-bottom:var(--s6);}
.ft-nav{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);}
.ft-nav a{color:var(--muted);font-size:var(--fs-sm);font-weight:500;}
.ft-nav a:hover{color:var(--ink);}
.ft h5{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:var(--s4);font-weight:700;}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;}.ft li{margin:0;}
.ft-col a{color:var(--muted);font-size:var(--fs-sm);}.ft-col a:hover{color:var(--ink);}
.ft-bot{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;color:var(--faint);font-size:var(--fs-sm);}
.ft-bot .soc a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:10px;color:var(--muted);}
.ft-bot .soc a:hover{color:var(--ink);border-color:rgba(255,255,255,.3);}

/* ---------------------------------------------------------------
   Lead intake modal + form (replaces the old Calendly popup)
   --------------------------------------------------------------- */
.lead-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:clamp(.5rem,3vw,2rem);background:rgba(4,5,11,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-y:auto;}
.lead-overlay.open{display:flex;}
.lead-card{position:relative;width:min(42rem,100%);margin:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;}
.lead-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);padding:var(--s5) var(--s6);border-bottom:1px solid var(--line);}
.lead-head .t{font-weight:700;font-size:1.15rem;letter-spacing:-.02em;}
.lead-head .t small{display:block;color:var(--muted);font-weight:400;font-size:var(--fs-sm);margin-top:4px;letter-spacing:0;}
.lead-close{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;}
.lead-close:hover{background:rgba(255,255,255,.08);}
.lead-body{padding:var(--s6);}

/* button + form helpers shared by modal and contact page */
.btn-block{width:100%;}
.field-lbl{font-size:var(--fs-sm);font-weight:600;color:var(--ink);}
.field .req{color:var(--cyan);font-style:normal;}
label.field{cursor:pointer;}
.grp{border:0;padding:0;margin:0;min-width:0;}
.grp legend{padding:0;}
.opt-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;}
.opt{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .85rem;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);font-size:var(--fs-sm);color:var(--ink);cursor:pointer;transition:border-color var(--dur),background var(--dur);}
.opt:hover{border-color:rgba(255,255,255,.35);}
/* Custom checkbox / radio that match the dark theme and brand gradient,
   instead of the browser's default native glyphs. */
.field .opt input{-webkit-appearance:none;appearance:none;width:18px;height:18px;min-width:18px;margin:0;padding:0;flex:none;border:1.5px solid var(--line-2);background:var(--bg);cursor:pointer;transition:border-color var(--dur),background var(--dur),box-shadow var(--dur);}
.field .opt input[type="checkbox"]{border-radius:5px;}
.field .opt input[type="radio"]{border-radius:50%;}
.field .opt input:hover{border-color:var(--blue);}
.field .opt input:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(var(--focus-rgb),.35);}
.field .opt input[type="checkbox"]:checked{border-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A12' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),var(--grad);background-repeat:no-repeat;background-position:center;background-size:11px,auto;}
.field .opt input[type="radio"]:checked{border-color:transparent;background-image:radial-gradient(circle,#0A0A12 0 30%,transparent 33%),var(--grad);}
.opt:has(input:checked){border-color:var(--blue);background:rgba(var(--focus-rgb),.14);}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.form-status{font-size:var(--fs-sm);color:#FF8E8E;margin-top:.25rem;}
.form-status:empty{display:none;}
.lead-success{text-align:center;padding:var(--s5) var(--s4) var(--s4);}
.lead-success[hidden]{display:none;}
.lead-success .ls-ic{width:54px;height:54px;margin:0 auto var(--s4);border-radius:50%;display:grid;place-items:center;color:#0A0A12;background:var(--grad);}
.lead-success .ls-ic svg{width:28px;height:28px;}
.lead-success h3{font-size:1.4rem;margin-bottom:.5rem;}
.lead-success p{color:var(--muted);max-width:32rem;margin:0 auto;}
.lead-success .btn{margin-top:var(--s5);}
/* "Sent" confirmation popup: a compact centred card with a corner close button. */
.lead-sent-card{width:min(32rem,100%);}
.lead-sent-card .lead-close{position:absolute;top:var(--s4);right:var(--s4);z-index:1;}

/* ---------------------------------------------------------------
   The Details (expandable long-form)
   --------------------------------------------------------------- */
.details-wrap{max-width:56rem;margin:0 auto;}
/* Accordion */
.acc{display:grid;gap:var(--s3);}
.acc-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color var(--dur);}
.acc-item:hover{border-color:var(--line-2);}
.acc-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s5) var(--s6);font-family:"Google Sans",sans-serif;font-size:1.15rem;font-weight:600;color:var(--ink);}
.acc-q:hover{color:var(--accent);}
.acc-q .ai{width:24px;height:24px;flex:none;transition:transform var(--dur);color:var(--accent);}
.acc-q[aria-expanded="true"] .ai{transform:rotate(45deg);}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease);}
.acc-q[aria-expanded="true"] + .acc-a{grid-template-rows:1fr;}
.acc-a > div{overflow:hidden;}
.acc-a .inner{padding:0 var(--s6) var(--s6);}
.prose-d > p:first-child{margin-top:0;}
.prose-d h4{font-size:1.05rem;margin:var(--s5) 0 var(--s2);color:var(--ink);}
.prose-d p{color:var(--muted);margin-bottom:var(--s4);}
.prose-d p:last-child{margin-bottom:0;}
.prose-d ul{color:var(--muted);margin:0 0 var(--s4);padding-left:1.25em;}
.prose-d li{margin-block:.4rem;}
.prose-d li::marker{color:var(--blue);}
.prose-d strong{color:var(--ink);}
.comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s4) 0;}
@media (max-width:680px){.comp-grid{grid-template-columns:1fr;}}
.comp-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:680px){.comp-grid.cols-3{grid-template-columns:1fr;}}
.comp{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:var(--s5);}
.comp h4,.comp h3{margin:0 0 .4rem;font-size:1rem;color:var(--ink);}
.comp p{margin:0;font-size:var(--fs-sm);color:var(--muted);}
.comp .tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.5rem;}
.comp.bad .tag{color:#FF8E8E;} .comp.good .tag{color:var(--green);}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s7);margin:var(--s4) 0;}
@media (max-width:680px){.fit-grid{grid-template-columns:1fr;gap:0;}}
.check{list-style:none;padding:0;margin:0 0 var(--s4);display:grid;gap:var(--s2);}
.check li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);margin:0;color:var(--muted);font-size:var(--fs-sm);}
.check li::before{content:"";width:20px;height:20px;margin-top:2px;flex:none;border-radius:50%;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s4) 0;}
@media (max-width:680px){.mini-stats{grid-template-columns:1fr;}}
.mini{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:var(--s5);}
.mini b{display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mini span{display:block;margin-top:.4rem;font-size:var(--fs-sm);color:var(--muted);}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--s4) 0;padding:0;list-style:none;}
.chip-row li{margin:0;}
.chip-row .chip{display:inline-block;padding:.45rem .85rem;border-radius:999px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink);font-size:var(--fs-sm);font-weight:500;}
.chip-row .chip::before{content:none;}

/* themed scrollbars */
*{scrollbar-width:auto;scrollbar-color:rgba(150,165,205,.55) transparent;}
::-webkit-scrollbar{width:16px;height:16px;}
::-webkit-scrollbar-track{background:var(--bg-2);}
::-webkit-scrollbar-thumb{background:rgba(150,165,205,.55);border-radius:999px;border:3px solid var(--bg-2);}
::-webkit-scrollbar-thumb:hover{background:rgba(169,182,255,.7);}
.lead-overlay{scrollbar-color:rgba(150,165,205,.5) var(--bg-2);}

/* ===============================================================
   Inner pages (shared across the site)
   =============================================================== */
.page-hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,5vw,4.25rem);}
.page-hero .orb{top:-16rem;opacity:.5;}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero.center{text-align:center;}
.page-hero.center .lead{margin-inline:auto;}
.page-hero h1{font-size:clamp(2.4rem,4vw + 1rem,3.5rem);margin-bottom:var(--s4);max-width:20ch;}
.page-hero.center h1{margin-inline:auto;}
.page-hero .lead{max-width:46rem;font-size:clamp(1.05rem,1vw + .7rem,1.25rem);}
.page-hero .btn-row{margin-top:var(--s6);}

.crumbs{font-size:var(--fs-sm);color:var(--faint);margin-bottom:var(--s5);}
.crumbs a{color:var(--muted);} .crumbs a:hover{color:var(--ink);}
.crumbs .sep{padding:0 .4rem;opacity:.6;}
.crumbs .cur{color:var(--ink);}

.band{background:var(--bg-2);}

.prose{max-width:44rem;}
.prose p{color:var(--muted);font-size:var(--fs-lg);margin-bottom:var(--s4);}
.prose h2{margin-top:var(--s8);} .prose h3{margin-top:var(--s6);margin-bottom:var(--s2);}
.prose ul{color:var(--muted);font-size:var(--fs-lg);margin:0 0 var(--s4);padding-left:1.25em;}
.prose li{margin-block:.4rem;} .prose li::marker{color:var(--blue);}
.prose strong{color:var(--ink);}
.pullquote{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:600;line-height:1.4;color:var(--ink);border-left:3px solid var(--blue);padding-left:var(--s5);margin:var(--s6) 0;}
.pullquote cite{display:block;margin-top:var(--s4);font-size:var(--fs-sm);font-weight:500;color:var(--muted);font-style:normal;}

/* split: text + visual/portrait */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center;}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:var(--s6);}}
.split.media-first > :first-child{order:-1;}
.portrait{border-radius:var(--radius-lg);border:1px solid var(--line-2);overflow:hidden;box-shadow:var(--shadow);max-width:24rem;}
.portrait img{width:100%;display:block;}

/* icon rows */
.iconrows{display:grid;gap:var(--s5);}
.iconrow{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;}
.iconrow .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;color:#0A0A12;background:var(--grad);}
.iconrow .ic svg{width:22px;height:22px;}
.iconrow h4{margin-bottom:.25rem;} .iconrow p{color:var(--muted);margin:0;}

/* chips row (non-rank) */
.taglist{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none;margin:0;}
.taglist li{margin:0;}
.taglist .chip::before{content:none;}

/* content card grid (cgrid / ccard) — hub + tool pages */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:stretch;}
.cgrid.two{grid-template-columns:1fr 1fr;}
@media (max-width:900px){.cgrid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.cgrid,.cgrid.two{grid-template-columns:1fr;}}
.ccard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6);transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur);}
a.ccard{color:inherit;}
.ccard:hover{border-color:var(--line-2);}
a.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.ccard h3{font-size:1.3rem;margin-bottom:.5rem;}
.ccard > p{color:var(--muted);font-size:var(--fs-base);margin:0;}
.ccard .check{margin:var(--s4) 0 0;}
.ccard .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:var(--s4);font-weight:600;font-size:var(--fs-sm);color:var(--accent);}
.ccard .more svg{width:15px;height:15px;transition:transform var(--dur);}
a.ccard:hover .more svg{transform:translateX(4px);}

/* forms */
.form{display:grid;gap:var(--s4);}
.field{display:grid;gap:.4rem;}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--ink);}
.field .req{color:var(--cyan);}
.field input,.field textarea{width:100%;padding:.8rem 1rem;font:inherit;font-size:var(--fs-base);color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;transition:border-color var(--dur),box-shadow var(--dur);}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(var(--focus-rgb),.25);}
.field textarea{resize:vertical;min-height:8rem;}
.form-note{font-size:var(--fs-xs);color:var(--faint);}
.form-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:clamp(1.5rem,4vw,2.25rem);}

/* tools / calculators */
.tool{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:clamp(1.5rem,4vw,2.5rem);}
@media (max-width:860px){.tool{grid-template-columns:1fr;}}
.tool-inputs,.tool-output{display:grid;gap:var(--s5);align-content:start;}
.range-field{display:grid;gap:.5rem;}
.range-top{display:flex;justify-content:space-between;align-items:baseline;}
.range-val{font-weight:700;color:var(--cyan);font-size:var(--fs-lg);}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--surface-2);}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--blue);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--blue);cursor:pointer;}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--blue);border:3px solid var(--bg);cursor:pointer;}
.result-card{background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:var(--s6);}
.result-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.4rem;}
.result-big{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.result-row{display:flex;justify-content:space-between;gap:var(--s4);padding-block:.75rem;border-top:1px solid var(--line);}
.result-row:first-of-type{border-top:none;} .result-row .val{font-weight:700;color:var(--ink);}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:stretch;}
@media (max-width:860px){.price-grid{grid-template-columns:1fr;}}
.price-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s7);}
.price-card.feat{border-color:rgba(var(--accent-rgb),.5);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3),0 20px 60px rgba(var(--focus-rgb),.14);position:relative;}
.price-badge{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);background:var(--grad);color:#0A0A12;font-size:var(--fs-xs);font-weight:700;padding:.3rem .9rem;border-radius:999px;white-space:nowrap;}
.price-card h3{font-size:1.3rem;}
.price-amt{font-size:clamp(2rem,4vw,2.6rem);font-weight:700;letter-spacing:-.03em;margin:.6rem 0 .25rem;}
.price-amt span{font-size:var(--fs-base);color:var(--muted);font-weight:500;}
.price-card .check{flex:1;margin:var(--s4) 0;}

/* comparison table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);}
table.cmp{width:100%;border-collapse:collapse;min-width:34rem;}
table.cmp th,table.cmp td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);font-size:var(--fs-sm);}
table.cmp thead th{background:var(--surface-2);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:var(--fs-xs);}
table.cmp tbody th{color:var(--ink);font-weight:600;}
table.cmp td{color:var(--muted);}
table.cmp .col-hi{background:rgba(var(--accent-rgb),.08);color:var(--ink);border-inline:1px solid rgba(var(--accent-rgb),.25);}
table.cmp thead .col-hi{color:var(--ink);}
.yes{color:var(--green);font-weight:700;} .no{color:#FF8E8E;font-weight:700;}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}.reveal{opacity:1;transform:none;}}

/* =================================================================
   Light theme — opt in with <html data-theme="light">. An early inline
   script sets that attribute from localStorage before paint (no flash).
   The UI runs on CSS variables, so overriding them flips most of it; the
   rules below patch the spots that hardcode dark-only colors, plus the
   nav theme-toggle button. (Snow flake colors are swapped in home.js.)
   ================================================================= */
html[data-theme="light"]{
  --bg:#FBFCFE;--bg-2:#EEF2F9;--surface:#FFFFFF;--surface-2:#EEF3FA;
  --line:rgba(17,24,52,.10);--line-2:rgba(17,24,52,.16);
  --ink:#141828;--muted:#535A72;--faint:#838AA0;
  --cyan:#0E8FA8;--accent:#5A55E0;--link:#5A55E0;--link-hover:#3B3FC0;
  --grad:linear-gradient(110deg,#7A5CF0 0%,#3E72E6 48%,#1AA0C4 100%);
  --green:#0E9E6C;
  --shadow:0 2px 8px rgba(20,28,60,.07),0 24px 60px rgba(20,28,60,.10);
  --glow-violet:rgba(var(--violet-rgb),.22);--glow-blue:rgba(var(--focus-rgb),.18);--glow-cyan:rgba(var(--cyan-rgb),.16);
}
html:is([data-theme="light"],[data-theme="evening"]) body::before{background:radial-gradient(60rem 50rem at 50% -8rem,rgba(var(--focus-rgb),.10),transparent 60%),radial-gradient(50rem 40rem at 80% 6rem,rgba(var(--violet-rgb),.08),transparent 55%);}
html:is([data-theme="light"],[data-theme="evening"]) .orb{opacity:.55;}
html:is([data-theme="light"],[data-theme="evening"]) ::selection{background:rgba(var(--focus-rgb),.28);color:#10142a;}
html:is([data-theme="light"],[data-theme="evening"]) .hdr{background:rgba(255,255,255,.72);}
html:is([data-theme="light"],[data-theme="evening"]) .btn-primary{background:#3A6BE0;color:#fff;box-shadow:0 8px 30px rgba(58,107,224,.30);}
html:is([data-theme="light"],[data-theme="evening"]) .btn-primary:hover{background:#2F5BCB;color:#fff;box-shadow:0 12px 40px rgba(58,107,224,.42);}
/* Glyphs/numbers sit on the violet-cyan gradient chips: white reads best on it in light mode. */
html:is([data-theme="light"],[data-theme="evening"]) .tile .ic,html:is([data-theme="light"],[data-theme="evening"]) .stp .num,html:is([data-theme="light"],[data-theme="evening"]) .price-badge,html:is([data-theme="light"],[data-theme="evening"]) .iconrow .ic,html:is([data-theme="light"],[data-theme="evening"]) .lead-success .ls-ic{color:#fff;}
html:is([data-theme="light"],[data-theme="evening"]) .btn-ghost{background:rgba(17,24,52,.04);}
html:is([data-theme="light"],[data-theme="evening"]) .btn-ghost:hover{border-color:rgba(17,24,52,.30);background:rgba(17,24,52,.07);}
html:is([data-theme="light"],[data-theme="evening"]) .badge{background:rgba(17,24,52,.04);}
html:is([data-theme="light"],[data-theme="evening"]) .skip-link{background:#15182A;color:#fff;}
html:is([data-theme="light"],[data-theme="evening"]) .nav-link:hover{background:rgba(17,24,52,.05);}
html:is([data-theme="light"],[data-theme="evening"]) .app{background:linear-gradient(180deg,#FFFFFF,#EEF2F9);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.7);}
html:is([data-theme="light"],[data-theme="evening"]) .chart line{stroke:rgba(17,24,52,.07);}  /* gridlines are 5% white inline; recolor for light */
html:is([data-theme="light"],[data-theme="evening"]) .app-rail i{background:rgba(17,24,52,.06);}
html:is([data-theme="light"],[data-theme="evening"]) .sc{background:rgba(17,24,52,.025);}
html:is([data-theme="light"],[data-theme="evening"]) .panel{background:rgba(17,24,52,.02);}
html:is([data-theme="light"],[data-theme="evening"]) .fn{background:rgba(17,24,52,.03);}
html:is([data-theme="light"],[data-theme="evening"]) .marquee-track img{filter:none;opacity:.66;}
html:is([data-theme="light"],[data-theme="evening"]) .marquee-track img:hover{opacity:1;}
html:is([data-theme="light"],[data-theme="evening"]) .ft-bot .soc a:hover{border-color:rgba(17,24,52,.3);}
html:is([data-theme="light"],[data-theme="evening"]) .lead-close:hover{background:rgba(17,24,52,.07);}
html:is([data-theme="light"],[data-theme="evening"]) .opt:hover{border-color:rgba(17,24,52,.3);}
html:is([data-theme="light"],[data-theme="evening"]) .form-status,html:is([data-theme="light"],[data-theme="evening"]) .comp.bad .tag,html:is([data-theme="light"],[data-theme="evening"]) .no{color:#D64550;}
html:is([data-theme="light"],[data-theme="evening"]) *{scrollbar-color:rgba(90,100,140,.55) transparent;}
html:is([data-theme="light"],[data-theme="evening"]) ::-webkit-scrollbar-thumb{background:rgba(90,100,140,.55);}
html:is([data-theme="light"],[data-theme="evening"]) ::-webkit-scrollbar-thumb:hover{background:rgba(90,85,224,.7);}

/* Theme toggle button — last child of the header .wrap, so it sits flush in the
   far-right corner (the brand's margin-right:auto pushes everything else right). */
.theme-toggle{width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line-2);border-radius:10px;color:var(--muted);cursor:pointer;transition:color var(--dur),border-color var(--dur),background var(--dur);}
.theme-toggle:hover{color:var(--ink);background:rgba(255,255,255,.06);}
html:is([data-theme="light"],[data-theme="evening"]) .theme-toggle:hover{background:rgba(17,24,52,.05);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .ic-moon{display:none;}
.theme-toggle .ic-sun{display:block;}
html:is([data-theme="light"],[data-theme="evening"]) .theme-toggle .ic-sun{display:none;}
html:is([data-theme="light"],[data-theme="evening"]) .theme-toggle .ic-moon{display:block;}
.theme-toggle .tt-label{display:none;}

/* =================================================================
   Evening theme — a warm cream "paper" mode (blue-light friendly).
   Built on the LIGHT theme: soft cream canvas, readable warm-dark text,
   and the signature violet->blue->cyan gradient kept as the accent. The
   "filter warmth" slider drives a gentle amber veil (html::after) on top.
   The light-theme patch rules above are shared via :is(light, evening).
   ================================================================= */
html[data-theme="evening"]{
  --bg:#F0E9DB;--bg-2:#E7DECE;--surface:#FBF6EC;--surface-2:#F2EBDC;
  --line:rgba(74,58,34,.12);--line-2:rgba(74,58,34,.20);
  --ink:#2C2419;--muted:#6E6453;--faint:#9A8E78;
  /* Blue-light feel: EVERY blue/violet/cyan accent warms to copper/amber -
     borders, fills, focus rings, icon glyphs, the gradient, and the glow orb.
     The tokenized rgba triples warm the many tinted literals at once. */
  --blue:#B86A2E;--cyan:#B07A28;--accent:#A05A22;--accent-2:#D8A56A;--violet:#C56A38;--pink:#D89A66;
  --accent-rgb:184,106,46;--focus-rgb:198,128,56;--cyan-rgb:196,134,60;--violet-rgb:190,110,60;--pink-rgb:212,150,92;
  --link:#C2410C;--link-hover:#8F2D08;
  --chart-a:#D9952E;--chart-b:#C86A22;--chart-c:#B0481E;
  --grad:linear-gradient(110deg,#CC7A26 0%,#BC5C1E 48%,#A4431A 100%);
  --green:#0E9E6C;
  --shadow:0 2px 8px rgba(70,52,24,.08),0 24px 60px rgba(70,52,24,.12);
  --glow-violet:rgba(var(--violet-rgb),.20);--glow-blue:rgba(var(--focus-rgb),.16);--glow-cyan:rgba(var(--cyan-rgb),.16);
}
html[data-theme="evening"] ::selection{background:rgba(184,106,46,.22);color:#2C2419;}
/* Primary CTAs ("See My Forecast", "Apply for a Free SEO Analysis", etc.) are
   solid blue in light/evening via the shared rule — warm them for Evening. */
html[data-theme="evening"] .btn-primary{background:#A85F26;color:#fff;box-shadow:0 8px 30px rgba(168,95,38,.30);}
html[data-theme="evening"] .btn-primary:hover{background:#965225;color:#fff;box-shadow:0 12px 40px rgba(168,95,38,.42);}

/* PRINT / PDF: always the clean light report, never the Evening (or any) tint.
   Kill the warm veil and reset Evening's tokens to the light palette so exports
   match the pre-theme white version. (Tool print blocks then force cards white,
   text dark, charts print-safe on top of this.) */
@media print{
  html::after{display:none!important;}
  html[data-theme="evening"]{
    --bg:#FBFCFE;--bg-2:#EEF2F9;--surface:#FFFFFF;--surface-2:#EEF3FA;
    --line:rgba(17,24,52,.10);--line-2:rgba(17,24,52,.16);
    --ink:#141828;--muted:#535A72;--faint:#838AA0;
    --blue:#3A6BE0;--cyan:#0E8FA8;--accent:#5A55E0;--accent-2:#9DB7FF;
    --link:#5A55E0;--link-hover:#3B3FC0;
    --accent-rgb:110,157,255;--focus-rgb:94,155,255;--cyan-rgb:116,224,242;--violet-rgb:155,124,255;--pink-rgb:230,162,255;
    --chart-a:#B69CFF;--chart-b:#6E9DFF;--chart-c:#74E0F2;
    --grad:linear-gradient(110deg,#7A5CF0,#3E72E6,#1AA0C4);
    --glow-violet:rgba(155,124,255,.22);--glow-blue:rgba(94,155,255,.18);--glow-cyan:rgba(116,224,242,.16);
  }
}

/* Blue-light "filter warmth" veil — a gentle amber wash over the cream paper.
   Opacity = the intensity the visitor picks (--ev-warmth, 0 to .2). Capped low
   so cranking it reads as candlelight warmth, not an orange cast.
   pointer-events:none so it never blocks clicks. */
html::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;background:#F2B85C;mix-blend-mode:multiply;opacity:0;transition:opacity .35s var(--ease);}
html[data-theme="evening"]::after{opacity:var(--ev-warmth,.08);}
@media (prefers-reduced-motion:reduce){html::after{transition:none;}}

/* Theme dropdown (built by home.js around the .theme-toggle trigger) */
.theme-switch{position:relative;flex:none;}
.theme-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:13.5rem;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s2);list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--dur),transform var(--dur),visibility var(--dur);z-index:120;}
.theme-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.theme-menu li{margin:0;}
.theme-menu button[data-theme-val]{width:100%;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:none;background:none;color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:600;border-radius:10px;cursor:pointer;text-align:left;}
.theme-menu button[data-theme-val] span{flex:1;white-space:nowrap;}
.theme-menu button[data-theme-val]:hover{background:var(--surface-2);}
.theme-menu button[data-theme-val] svg{width:18px;height:18px;color:var(--muted);flex:none;}
.theme-menu button[data-theme-val][aria-checked="true"]{color:var(--accent);}
.theme-menu button[data-theme-val][aria-checked="true"] svg{color:var(--accent);}
.theme-menu .tick{margin-left:auto;width:16px;height:16px;opacity:0;}
.theme-menu button[data-theme-val][aria-checked="true"] .tick{opacity:1;}

/* Warmth ("filter intensity") control — clear value, gradient track, scale labels */
.theme-warmth{padding:var(--s3) var(--s4) var(--s4);margin-top:var(--s2);border-top:1px solid var(--line);}
.theme-warmth[hidden]{display:none;}
.theme-warmth .warmth-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s3);}
.theme-warmth label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.theme-warmth .warmth-val{font-size:var(--fs-sm);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;}
.theme-warmth input[type="range"]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:18px;margin:0;background:transparent;cursor:pointer;}
.theme-warmth input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#CFC8B8 0%,#F2B85C 100%);}
.theme-warmth input[type="range"]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#CFC8B8 0%,#F2B85C 100%);}
.theme-warmth input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-5px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-shadow:0 1px 4px rgba(40,30,10,.3);cursor:pointer;}
.theme-warmth input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-shadow:0 1px 4px rgba(40,30,10,.3);cursor:pointer;}
.theme-warmth input[type="range"]:focus-visible{outline:none;}
.theme-warmth input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(95,84,207,.4);}
.theme-warmth input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(95,84,207,.4);}
.theme-warmth .warmth-scale{display:flex;justify-content:space-between;margin-top:var(--s2);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);}