/* th-sites.css — the ten stand-in website layouts (S8, 2026-09-28), shared by /demos (th-demos2.js) and /instant-demo
   (th-idemo2.js). One DOM (.dm-site > .dms-nav, .dms-hero > .dms-copy + .dms-art, .dms-menu, .dms-info), ten looks
   picked by [data-theme]. Colours come ONLY from variables so any business colour works:
   --acc (brand) --acc-ink (text on it) --acc2 (its lighter companion) --bg (page) --bot (a quiet surface)
   --soft (the hero tint) --ff (the font stack). Layout that depends on the page (room for the chat, phone hiding) lives
   in each page's own CSS, never here. These are the fictional businesses' sites: their brand, not ours. */
.dm-site{--hi:var(--acc);--deepink:color-mix(in srgb,var(--acc) 32%,#111);position:absolute;inset:0;z-index:0;isolation:isolate;overflow:hidden;
  background:var(--bg);color:#151515;font-family:var(--ff)}
.dm-site[data-dark="1"]{--hi:var(--acc2);--deepink:#F4F1EE;color:#F4F1EE}
.dms-nav{position:relative;z-index:3;display:flex;align-items:center;gap:14px;height:64px;padding:0 5%}
.dms-brand{display:flex;align-items:center;gap:10px;min-width:0;font-weight:800;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.dms-brand span{overflow:hidden;text-overflow:ellipsis}
.dms-logo{width:34px;height:34px;border-radius:10px;flex:none}
.dms-links{display:flex;gap:20px;margin-left:auto;font-size:.84rem;opacity:.72;white-space:nowrap}
.dms-navcta{padding:9px 16px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font-size:.8rem;font-weight:700;white-space:nowrap}
.dms-hero{position:relative;margin:6px 5% 0;overflow:hidden}
.dms-copy{position:relative;z-index:2}
.dms-kick{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.78}
.dms-h{margin:.4em 0 0;max-width:12ch;font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800;line-height:1;letter-spacing:-.035em;overflow-wrap:anywhere}
.dms-p{margin:.7em 0 0;max-width:28ch;font-size:clamp(.95rem,1.4vw,1.1rem);line-height:1.45;opacity:.86}
.dms-cta{display:inline-flex;align-items:center;margin-top:1.1em;height:44px;padding:0 20px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:.9rem}
.dms-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.dms-art i{position:absolute;display:block}
.dms-menu{position:relative;margin:22px 5% 0}
.dms-mh{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.dms-menu ol{list-style:none;margin:0;padding:0}
.dms-menu li{display:flex;align-items:baseline;gap:10px;padding:9px 0;font-size:.95rem}
.dms-menu li em{font-style:normal;font-size:.72rem;opacity:.45}
.dms-menu li b{font-weight:600}
.dms-menu li i{flex:1;min-width:16px;border-bottom:1.5px dotted currentColor;opacity:.28}
.dms-menu li span{font-weight:700;white-space:nowrap;color:var(--hi)}
.dms-info{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 5% 0;font-size:.8rem;opacity:.7}

/* 1 salon — editorial: a serif name, two tall arches */
[data-theme="salon"] .dms-nav{justify-content:center;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent)}
[data-theme="salon"] .dms-links{text-transform:uppercase;letter-spacing:.2em;font-size:.7rem}
[data-theme="salon"] .dms-hero{padding:clamp(24px,5vw,60px) 0 clamp(20px,4vw,40px)}
[data-theme="salon"] .dms-kick{color:var(--hi)}
[data-theme="salon"] .dms-h{font-weight:400;font-style:italic;font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-.02em}
[data-theme="salon"] .dms-cta{background:transparent;color:var(--hi);box-shadow:inset 0 0 0 1px var(--hi)}
[data-theme="salon"] .dms-art i:nth-child(1){right:6%;top:6%;width:24%;height:118%;border-radius:999px 999px 0 0;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 30%,#0a0a0a))}
[data-theme="salon"] .dms-art i:nth-child(2){right:26%;top:22%;width:16%;height:110%;border-radius:999px 999px 0 0;background:linear-gradient(180deg,var(--acc2),var(--acc));opacity:.85}
[data-theme="salon"] .dms-menu ol{columns:2;column-gap:36px}
[data-theme="salon"] .dms-menu li{break-inside:avoid}

/* 2 clinic — airy, a soft rounded card, round blobs */
[data-theme="clinic"] .dms-hero{padding:clamp(24px,5vw,56px);border-radius:36px;background:linear-gradient(135deg,var(--soft),var(--bg) 72%)}
[data-theme="clinic"] .dms-h{color:var(--hi);font-weight:700}
[data-theme="clinic"] .dms-art i:nth-child(1){right:-4%;top:-20%;width:44%;padding-top:44%;border-radius:50%;background:var(--acc2);opacity:.3}
[data-theme="clinic"] .dms-art i:nth-child(2){right:18%;bottom:-24%;width:22%;padding-top:22%;border-radius:50%;background:var(--acc);opacity:.14}
[data-theme="clinic"] .dms-menu ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
[data-theme="clinic"] .dms-menu li{flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:22px;background:var(--soft)}
[data-theme="clinic"] .dms-menu li i{display:none}
[data-theme="clinic"] .dms-menu li span{padding:3px 10px;border-radius:999px;background:var(--bg);font-size:.82rem}

/* 3 bistro — an evening panel with an ember glow, a framed menu card */
[data-theme="bistro"] .dms-hero{padding:clamp(28px,6vw,70px) clamp(18px,4vw,48px);text-align:center;border-radius:6px;color:#F6EEE8;
  background:radial-gradient(90% 70% at 50% 120%,color-mix(in srgb,var(--acc) 58%,transparent),transparent 70%),color-mix(in srgb,var(--acc) 9%,#140f0c)}
[data-theme="bistro"] .dms-kick{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--acc2)}
[data-theme="bistro"] .dms-kick::before,[data-theme="bistro"] .dms-kick::after{content:"";width:28px;height:1px;background:currentColor}
[data-theme="bistro"] .dms-h{margin-left:auto;margin-right:auto;font-weight:700;letter-spacing:-.02em}
[data-theme="bistro"] .dms-p{margin-left:auto;margin-right:auto}
[data-theme="bistro"] .dms-menu{padding:18px 22px;border:1px solid color-mix(in srgb,var(--acc2) 38%,transparent);outline:1px solid color-mix(in srgb,var(--acc2) 18%,transparent);outline-offset:4px}
[data-theme="bistro"] .dms-mh{text-align:center;color:var(--hi);opacity:1}
[data-theme="bistro"] .dms-menu li em{display:none}

/* 4 motion — split and light, motion rings, big numerals */
[data-theme="motion"] .dms-hero{padding:clamp(24px,5vw,56px) 0}
[data-theme="motion"] .dms-h{font-weight:800;letter-spacing:-.05em;color:var(--deepink)}
[data-theme="motion"] .dms-kick{color:var(--hi)}
[data-theme="motion"] .dms-art i:nth-child(1){right:0;top:4%;width:34%;padding-top:34%;border-radius:50%;border:14px solid var(--acc2);opacity:.7}
[data-theme="motion"] .dms-art i:nth-child(2){right:8%;top:22%;width:18%;padding-top:18%;border-radius:50%;border:10px solid var(--acc)}
[data-theme="motion"] .dms-art i:nth-child(3){left:-10%;bottom:6%;width:130%;height:22px;background:var(--acc2);transform:rotate(-6deg);opacity:.5}
[data-theme="motion"] .dms-menu ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:color-mix(in srgb,currentColor 12%,transparent)}
[data-theme="motion"] .dms-menu li{flex-direction:column;align-items:flex-start;gap:4px;padding:14px;background:var(--bg)}
[data-theme="motion"] .dms-menu li em{font-size:1.9rem;font-weight:800;opacity:1;color:var(--hi);letter-spacing:-.04em}
[data-theme="motion"] .dms-menu li i{display:none}

/* 5 road — asphalt and a moving centre line, bold capitals, cards with a coloured top */
[data-theme="road"] .dms-hero{padding:clamp(24px,5vw,56px) clamp(18px,4vw,44px) clamp(40px,6vw,70px);border-radius:4px;background:#1D1D1D;color:#fff;border-left:10px solid var(--acc)}
[data-theme="road"] .dms-h{text-transform:uppercase;font-weight:900;letter-spacing:-.02em;max-width:14ch}
[data-theme="road"] .dms-cta,[data-theme="road"] .dms-navcta{border-radius:4px}
[data-theme="road"] .dms-art i:nth-child(1){left:0;right:0;bottom:22px;height:6px;background:repeating-linear-gradient(90deg,#fff 0 46px,transparent 46px 86px);opacity:.85;animation:dmRoad 1.6s linear infinite}
[data-theme="road"] .dms-menu ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
[data-theme="road"] .dms-menu li{flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-top:5px solid var(--acc);background:var(--soft);border-radius:2px}
[data-theme="road"] .dms-menu li i{display:none}
[data-theme="road"] .dms-menu li span{font-size:1.3rem;font-weight:900;color:currentColor}
@keyframes dmRoad{to{background-position:86px 0}}

/* 6 coast — sand, layered sea waves, cards with a picture band */
[data-theme="coast"] .dms-hero{padding:clamp(24px,5vw,56px) clamp(18px,4vw,44px) clamp(70px,9vw,110px);border-radius:28px;background:var(--soft)}
[data-theme="coast"] .dms-h{font-weight:300;letter-spacing:-.03em;color:var(--hi)}
[data-theme="coast"] .dms-art i:nth-child(1){left:-10%;right:-10%;bottom:-40px;height:110px;border-radius:50% 50% 0 0;background:var(--acc2);opacity:.55}
[data-theme="coast"] .dms-art i:nth-child(2){left:-20%;right:20%;bottom:-60px;height:100px;border-radius:50% 50% 0 0;background:var(--acc)}
[data-theme="coast"] .dms-menu ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
[data-theme="coast"] .dms-menu li{flex-direction:column;align-items:flex-start;gap:6px;padding:0 0 12px;border-radius:16px;overflow:hidden;background:var(--bot)}
[data-theme="coast"] .dms-menu li::before{content:"";display:block;width:100%;height:70px;background:linear-gradient(160deg,var(--acc2),var(--acc))}
[data-theme="coast"] .dms-menu li em,[data-theme="coast"] .dms-menu li i{display:none}
[data-theme="coast"] .dms-menu li b,[data-theme="coast"] .dms-menu li span{padding:0 12px}

/* 7 sun — a warm disc rising behind the words */
[data-theme="sun"] .dms-hero{padding:clamp(24px,5vw,56px) clamp(18px,4vw,44px) clamp(40px,6vw,70px);border-radius:26px;
  background:linear-gradient(180deg,var(--soft),color-mix(in srgb,var(--acc2) 34%,var(--soft)))}
[data-theme="sun"] .dms-h{font-weight:800;color:var(--deepink)}
[data-theme="sun"] .dms-kick{color:var(--hi)}
[data-theme="sun"] .dms-art i:nth-child(1){right:4%;bottom:-38%;width:40%;padding-top:40%;border-radius:50%;background:radial-gradient(circle,var(--acc2),var(--acc));box-shadow:0 0 90px 30px color-mix(in srgb,var(--acc2) 45%,transparent)}
[data-theme="sun"] .dms-art i:nth-child(2){right:-6%;bottom:-70%;width:60%;padding-top:60%;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--acc) 18%,transparent) 0 6deg,transparent 6deg 18deg)}

/* 8 counsel — classical: centred serif, double rules, faint columns */
[data-theme="counsel"] .dms-nav{border-bottom:3px double color-mix(in srgb,var(--acc) 40%,transparent)}
[data-theme="counsel"] .dms-hero{padding:clamp(28px,6vw,64px) 0;text-align:center;border-bottom:3px double color-mix(in srgb,var(--acc) 40%,transparent)}
[data-theme="counsel"] .dms-kick{font-variant:small-caps;letter-spacing:.24em;color:var(--hi)}
[data-theme="counsel"] .dms-h{margin-left:auto;margin-right:auto;font-weight:400;letter-spacing:-.01em;color:var(--hi)}
[data-theme="counsel"] .dms-p{margin-left:auto;margin-right:auto;font-style:italic}
[data-theme="counsel"] .dms-cta,[data-theme="counsel"] .dms-navcta{border-radius:0}
[data-theme="counsel"] .dms-art{background:repeating-linear-gradient(90deg,transparent 0 58px,color-mix(in srgb,var(--acc) 6%,transparent) 58px 62px)}
[data-theme="counsel"] .dms-menu li{border-bottom:1px solid color-mix(in srgb,var(--acc) 16%,transparent)}
[data-theme="counsel"] .dms-menu li i{border:0}
[data-theme="counsel"] .dms-menu li em{color:var(--hi);opacity:.8;font-style:italic}

/* 9 iron — huge outlined capitals, slashes */
[data-theme="iron"] .dms-nav{text-transform:uppercase;letter-spacing:.06em}
[data-theme="iron"] .dms-hero{padding:clamp(24px,5vw,56px) 0}
[data-theme="iron"] .dms-kick{color:var(--hi)}
[data-theme="iron"] .dms-h{text-transform:uppercase;font-weight:900;font-size:clamp(2.6rem,7vw,5.6rem);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:2px var(--acc);max-width:9ch}
[data-theme="iron"] .dms-cta,[data-theme="iron"] .dms-navcta{border-radius:0;text-transform:uppercase;letter-spacing:.06em}
[data-theme="iron"] .dms-art i:nth-child(1){right:4%;top:0;width:26px;height:120%;background:var(--acc);transform:skewX(-18deg)}
[data-theme="iron"] .dms-art i:nth-child(2){right:12%;top:0;width:14px;height:120%;background:var(--acc2);transform:skewX(-18deg);opacity:.7}
[data-theme="iron"] .dms-menu li{text-transform:uppercase;font-size:.86rem;letter-spacing:.03em;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
[data-theme="iron"] .dms-menu li i{border:0}

/* 10 studio — giant type, overlapping discs, tilted tiles */
[data-theme="studio"] .dms-hero{padding:clamp(24px,5vw,56px) 0}
[data-theme="studio"] .dms-h{font-weight:800;font-size:clamp(2.6rem,7vw,5.6rem);letter-spacing:-.05em}
[data-theme="studio"] .dms-cta{transform:rotate(-3deg);background:currentColor}
[data-theme="studio"] .dms-cta{color:var(--bg)}
[data-theme="studio"] .dms-art i:nth-child(1){right:10%;top:6%;width:26%;padding-top:26%;border-radius:50%;background:var(--acc);opacity:.92}
[data-theme="studio"] .dms-art i:nth-child(2){right:0;top:26%;width:20%;padding-top:20%;border-radius:50%;background:var(--acc2);opacity:.85}
[data-theme="studio"] .dms-art i:nth-child(3){right:24%;top:46%;width:9%;padding-top:9%;border-radius:50%;background:currentColor}
[data-theme="studio"] .dms-menu ol{display:flex;flex-wrap:wrap;gap:12px}
[data-theme="studio"] .dms-menu li{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;border-radius:18px;background:var(--bot);box-shadow:0 10px 26px -14px color-mix(in srgb,var(--acc) 50%,transparent)}
[data-theme="studio"] .dms-menu li:nth-child(odd){transform:rotate(-1.5deg)}
[data-theme="studio"] .dms-menu li:nth-child(even){transform:rotate(1.5deg)}
[data-theme="studio"] .dms-menu li i,[data-theme="studio"] .dms-menu li em{display:none}

@media (prefers-reduced-motion:reduce){[data-theme="road"] .dms-art i{animation:none}}

/* ═══ S9 (2026-09-28) · the illustrated scene per layout (th-scenes.js → .dms-scene inside .dms-art). Duval: "more
   creative designs per industry… next level". Fills and strokes are classes mapped to the site's own variables, so the
   visitor's colour repaints the drawing. The old abstract shapes step aside (the road keeps its moving lane). ═══ */
.dms-art:has(.dms-scene) i{display:none}
[data-theme="road"] .dms-art:has(.dms-scene) i:nth-child(1){display:block}
.dms-scene{position:absolute;right:0;bottom:0;width:62%;height:100%;overflow:visible;z-index:1}
.dms-scene .sc-a{fill:var(--acc)}
.dms-scene .sc-b{fill:var(--acc2)}
.dms-scene .sc-s{fill:var(--soft)}
.dms-scene .sc-l{fill:color-mix(in srgb,var(--bg) 70%,#fff)}
.dm-site[data-dark="1"] .dms-scene .sc-l{fill:color-mix(in srgb,var(--acc2) 22%,#f4f1ee)}
.dms-scene .sc-o{fill:none;stroke:var(--acc2);stroke-width:8}
.dms-scene .sc-o2{opacity:.45}
.dms-scene .sc-k,.dms-scene .sc-ks,.dms-scene .sc-bs,.dms-scene .sc-ws,.dms-scene .sc-lk{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.dms-scene .sc-k{stroke:var(--deepink)}
.dms-scene .sc-kk{stroke-width:12}
.dms-scene circle.sc-kk{fill:none}
.dms-scene .sc-ks{stroke:var(--acc)}
.dms-scene .sc-bs{stroke:var(--acc2)}
.dms-scene .sc-ws{stroke:color-mix(in srgb,var(--bg) 60%,#fff);stroke-width:5}
.dms-scene .sc-lk{stroke:color-mix(in srgb,var(--acc) 40%,#fff);stroke-width:3}
.dms-scene g,.dms-scene path,.dms-scene circle,.dms-scene rect{transform-box:fill-box;transform-origin:50% 50%}
@keyframes scTw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.05)}}
@keyframes scPulse{0%,100%{transform:scale(.96)}50%{transform:scale(1.03)}}
@keyframes scSteam{0%{stroke-dashoffset:0;opacity:0}30%{opacity:.9}100%{stroke-dashoffset:-60;opacity:0;transform:translateY(-14px)}}
@keyframes scDraw{0%{stroke-dashoffset:520}60%,100%{stroke-dashoffset:0}}
@keyframes scSteer{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes scWave{to{transform:translateX(-180px)}}
@keyframes scSpin{to{transform:rotate(360deg)}}
@keyframes scTilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes scLift{0%,100%{transform:translateY(24px)}45%,60%{transform:translateY(-22px)}}
@keyframes scSnip{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-8deg)}90%{transform:rotate(4deg)}}
@keyframes scFlick{0%,86%,100%{opacity:1}90%{opacity:.35}94%{opacity:1}}
.dms-scene .sc-tw{animation:scTw 2.6s ease-in-out infinite}
.dms-scene .sc-tw2{animation-delay:1.1s}
.dms-scene .sc-pulse{animation:scPulse 4s ease-in-out infinite}
.dms-scene .sc-steam{stroke-dasharray:14 12;animation:scSteam 2.8s linear infinite}
.dms-scene .sc-dash{stroke-dasharray:520;animation:scDraw 3.6s cubic-bezier(.16,1,.3,1) infinite}
.dms-scene .sc-arc{stroke-dasharray:8 14;opacity:.6}
.dms-scene .sc-steer{animation:scSteer 5s ease-in-out infinite}
.dms-scene .sc-wave{animation:scWave 6s linear infinite;transform-box:view-box;transform-origin:0 0}
.dms-scene .sc-wave2{animation-duration:9s;opacity:.6}
.dms-scene .sc-rays{animation:scSpin 24s linear infinite}
.dms-scene .sc-bolt{animation:scFlick 3.2s ease-in-out infinite}
.dms-scene .sc-scale{animation:scTilt 5s ease-in-out infinite;transform-origin:50% 12%}
.dms-scene .sc-lift{animation:scLift 3.4s cubic-bezier(.62,.05,.29,1) infinite}
.dms-scene .sc-snip{animation:scSnip 2.4s ease-in-out infinite;transform-origin:30% 60%}
.dms-scene .sc-ap{animation:scSpin 30s linear infinite}
/* a card on the wall is small: the scene is the picture; phones in a takeover: a quiet backdrop behind the copy */
@media (max-width:700px){.dms-scene{width:78%;opacity:.3}}
@media (prefers-reduced-motion:reduce){.dms-scene *{animation:none!important}}
/* S9: the instant demo's per-trade scenes (lodge, venue, medic, paw, tools, garage, services, ledger, school, shop) */
@keyframes scBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.08)}24%{transform:scale(.98)}36%{transform:scale(1.05)}}
@keyframes scBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes scTurn{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(10deg)}}
@keyframes scDrip{0%,40%{transform:translateY(-20px);opacity:0}55%{opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes scGrow{0%{transform:scaleY(.2)}40%,100%{transform:scaleY(1)}}
@keyframes scWrite{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,6px)}}
@keyframes scSwing{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes scClink{0%,70%,100%{transform:rotate(0)}82%{transform:rotate(9deg)}}
.dms-scene .sc-beat{animation:scBeat 1.6s ease-in-out infinite}
.dms-scene .sc-bounce{animation:scBounce 2.4s ease-in-out infinite}
.dms-scene .sc-turn{animation:scTurn 3.2s ease-in-out infinite;transform-origin:70% 30%}
.dms-scene .sc-drip{animation:scDrip 2.2s ease-in infinite}
.dms-scene .sc-gear{animation:scSpin 9s linear infinite}
.dms-scene .sc-grow{animation:scGrow 4s cubic-bezier(.16,1,.3,1) infinite;transform-origin:50% 100%}
.dms-scene .sc-write{animation:scWrite 2.6s ease-in-out infinite}
.dms-scene .sc-swing{animation:scSwing 3s ease-in-out infinite;transform-origin:50% 0}
.dms-scene .sc-clink{animation:scClink 2.8s ease-in-out infinite;transform-origin:50% 100%}
.dms-scene .sc-clink2{animation-name:scClink;animation-direction:reverse}
[data-theme="road"] .dms-art:has(.dms-scene:not([data-scene="road"])) i:nth-child(1){display:none}

/* ═══ S10 (2026-09-28) · the DoubleDown AI look for the stand-in sites. Duval: "improve all products view demo pages and the
   actual demos please to fit the style of doubledown ai... look clean and with quality". /demos and /instant-demo now
   paint every fictional business's site in ONE clean layout (data-theme="ddai"): white and paper, Satoshi headings,
   Switzer text, deep-green ink, the trade's illustrated scene drawn in mint and deep green. The CHATBOT keeps the
   business's own colour (the widget's cfg, and --bc for the wall's bubble and button): that part is their brand, and
   showing it is what the demo is for. The pages set the DDAI variables inline (th-demos2.js / th-idemo2.js DDAI_VARS). ═══ */
.dm-site[data-theme="ddai"]{font-family:Switzer,ui-sans-serif,system-ui,sans-serif;color:#04241A;--deepink:#04241A;--hi:#0B7A55}
.dm-site[data-theme="ddai"][data-dark="1"]{background:radial-gradient(90% 70% at 70% 0%,#0A5A3F 0%,#063D2B 50%,#02180F 100%);color:#fff;--deepink:#fff;--hi:#4FD8A6}
[data-theme="ddai"] .dms-nav{height:62px;border-bottom:1px solid rgba(4,36,26,.08)}
[data-theme="ddai"][data-dark="1"] .dms-nav{border-bottom-color:rgba(255,255,255,.1)}
[data-theme="ddai"] .dms-brand{font-family:Satoshi,ui-sans-serif,system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}
[data-theme="ddai"] .dms-logo{border-radius:50%}
[data-theme="ddai"] .dms-links{font-size:.8rem;opacity:.62}
[data-theme="ddai"] .dms-navcta{background:#04241A;color:#fff;font-weight:600}
[data-theme="ddai"][data-dark="1"] .dms-navcta{background:#4FD8A6;color:#02241A}
[data-theme="ddai"] .dms-hero{margin:12px 4% 0;padding:clamp(22px,4vw,44px);border-radius:26px;background:linear-gradient(160deg,#F2F7F4 0%,#E4EEE9 100%);min-height:clamp(210px,28vw,300px)}
[data-theme="ddai"][data-dark="1"] .dms-hero{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
[data-theme="ddai"] .dms-kick{font-size:.7rem;font-weight:600;letter-spacing:.24em;opacity:.55}
[data-theme="ddai"] .dms-h{font-family:Satoshi,ui-sans-serif,system-ui,sans-serif;font-weight:900;letter-spacing:-.045em;line-height:.95;max-width:11ch}
[data-theme="ddai"] .dms-p{opacity:.72;max-width:26ch}
[data-theme="ddai"] .dms-cta{background:#04241A;color:#fff;font-weight:600;height:42px}
[data-theme="ddai"][data-dark="1"] .dms-cta{background:#4FD8A6;color:#02241A}
[data-theme="ddai"] .dms-art i{display:none}
[data-theme="ddai"] .dms-art{--acc:#0B7A55;--acc2:#4FD8A6;--soft:#D6E8DF;--bg:#FFFFFF;--deepink:#04241A}
[data-theme="ddai"][data-dark="1"] .dms-art{--acc:#4FD8A6;--acc2:#66E9B9;--soft:rgba(255,255,255,.08);--bg:#0A4A33;--deepink:#E4EEE9}
[data-theme="ddai"] .dms-scene{width:52%;height:92%;top:4%;bottom:auto;right:2%}
[data-theme="ddai"] .dms-menu{margin:20px 4% 0;padding:6px 20px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(4,36,26,.08)}
[data-theme="ddai"][data-dark="1"] .dms-menu{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.1)}
[data-theme="ddai"] .dms-mh{padding-top:12px;font-weight:600;letter-spacing:.22em}
[data-theme="ddai"] .dms-menu li{border-top:1px solid rgba(4,36,26,.07)}
[data-theme="ddai"][data-dark="1"] .dms-menu li{border-top-color:rgba(255,255,255,.08)}
[data-theme="ddai"] .dms-menu li:first-child{border-top:0}
[data-theme="ddai"] .dms-menu li i{border-bottom:0}
[data-theme="ddai"] .dms-menu li span{color:var(--hi);font-weight:700}
[data-theme="ddai"] .dms-info{margin:14px 4% 0;gap:8px}
[data-theme="ddai"] .dms-info span{padding:6px 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(4,36,26,.08);opacity:1}
[data-theme="ddai"][data-dark="1"] .dms-info span{background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.1)}
@media (max-width:700px){[data-theme="ddai"] .dms-scene{width:64%;opacity:.35}[data-theme="ddai"] .dms-links{display:none}}