:root {
  --demo-ink: #202820;
  --demo-accent: #d9eea4;
  --paper: #f7f6ee;
  font: 16px/1.55 system-ui, sans-serif;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
[data-theme] body.cda-demo {
  margin: 0;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--theme-page, var(--page));
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.55 system-ui, sans-serif;
}
a { color: inherit; }
:focus-visible { outline: 3px solid #347460; outline-offset: 4px; }
.skip { position: absolute; top: 0; left: 10px; background: white; padding: 10px; transform: translateY(-130%); z-index: 2; }
.skip:focus { transform: none; }
.wrap { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
.demo-bar { background: #15221b; color: #e8f1e7; padding: 12px clamp(16px, 4vw, 58px); display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .86rem; }
.demo-bar span { font-size: .66rem; letter-spacing: .13em; text-align: center; }
.demo-bar a, .sample-nav a { text-decoration: none; }
.demo-bar a:hover, .sample-nav a:hover { text-decoration: underline; }
.kicker { font-size: .72rem; font-weight: 760; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { line-height: .99; letter-spacing: -.055em; }
h1 { font-size: clamp(3rem, 8vw, 7rem); margin-bottom: .26em; }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); margin-bottom: .5em; }
.gallery-intro { padding: clamp(54px, 8vw, 108px) 0 34px; max-width: 850px; }
.gallery-intro em { font-family: Georgia, serif; font-weight: 400; color: var(--accent); }
.gallery-intro > p:last-child, .hero > div:first-child > p:not(.kicker) { font-size: 1.12rem; max-width: 53ch; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tile { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: 18px; overflow: hidden; border: 1px solid #20282026; text-decoration: none; background: #fffdf5; color: var(--demo-ink); }
.tile:hover { border-color: var(--demo-ink); box-shadow: 0 8px 22px #1a28151b; }
.tile-copy { padding: 21px; display: flex; align-items: flex-start; flex-direction: column; }
.tile h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); margin: 8px 0; }
.tile-action { margin-top: auto; font-weight: 750; }
.tile-action span { margin-left: .35rem; }
.art { position: relative; display: grid; place-items: center; isolation: isolate; overflow: hidden; min-height: 152px; background: var(--demo-ink); color: var(--demo-accent); }
.art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(125deg, transparent 0 14px, #ffffff0c 15px 16px), radial-gradient(ellipse at 76% 0%, #ffffff23, transparent 72%); }
.orbit { position: absolute; width: 63%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 49% 51% 58% 42%; transform: rotate(-24deg) scaleY(.67); opacity: .44; }
.orbit::before, .orbit::after { content: ''; position: absolute; inset: 13%; border: 1px solid currentColor; border-radius: 50%; transform: rotate(30deg) scale(1.28, .83); }
.orbit::after { inset: -10%; transform: rotate(52deg) scale(.72, 1.02); }
.art-symbol { font: 4.5rem/1 Georgia, serif; text-shadow: 0 6px 26px #0007; }
.art small { position: absolute; right: 12px; bottom: 9px; font-size: .62rem; letter-spacing: .13em; }
.sample-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-block: 21px; }
.wordmark { font-weight: 850; font-size: 1.34rem; letter-spacing: -.04em; }
.sample-nav nav { display: flex; flex-wrap: wrap; gap: 16px; }
.showcase { background: var(--demo-ink); color: var(--demo-accent); }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(20px, 5vw, 75px); padding-block: clamp(28px, 6vw, 88px); }
.hero h1 { font-size: clamp(3rem, 7vw, 6rem); }
.example-hair-salon h1, .example-bakery h1, .example-landscaping h1 { font-family: Georgia, serif; font-weight: 500; }
.example-hvac h1, .example-fitness h1, .example-auto-detailing h1 { text-transform: uppercase; font-weight: 900; }
.hero .art { min-height: 280px; aspect-ratio: 1.17; border: 1px solid #ffffff35; border-radius: 22px; }
.hero .art-symbol { font-size: clamp(5rem, 15vw, 13rem); }
.demo-button { display: inline-flex; align-items: center; gap: .45em; border: 1px solid transparent; border-radius: 9px; padding: 11px 16px; cursor: pointer; font: inherit; font-weight: 760; text-decoration: none; }
.demo-primary { color: var(--demo-ink); background: var(--demo-accent); }
.demo-primary:hover { border-color: currentColor; }
.section { padding-top: clamp(42px, 6vw, 76px); }
.offerings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.offerings article { padding: 20px; background: #fffdf5; border: 1px solid #20282022; border-radius: 12px; }
.offerings h3 { margin: .4em 0; font-size: 1.2rem; }
.offerings p { margin: 0; }
.try-panel { padding: clamp(20px, 5vw, 48px); border-radius: 18px; background: var(--demo-ink); color: var(--demo-accent); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.try-panel form { display: grid; align-content: start; gap: 10px; }
.try-panel form label { display: grid; gap: 3px; }
.try-panel :is(select,input) { width: 100%; min-height: 44px; background: #fffdf5; color: #18231c; border: 1px solid #879182; border-radius: 7px; padding: 7px 10px; font: inherit; }
.try-panel output:not(:empty) { display: block; border: 1px solid currentColor; border-radius: 8px; padding: 10px; }
.sample-footer, .gallery-footer { padding-block: 42px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.gallery-footer h2 { margin: 0; }
@media (max-width: 840px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .wrap { width: calc(100% - 32px); }
  .demo-bar span { display: none; }
  .hero, .gallery-grid, .offerings, .try-panel { grid-template-columns: 1fr; }
  .hero .art { min-height: 165px; aspect-ratio: 2.1; }
  .hero .art-symbol { font-size: 5rem; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }

/* The CDA theme carries across pages. Business colors remain in the sample artwork. */
.cda-demo .demo-bar {
  background: var(--theme-chrome, var(--surface));
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.cda-demo .gallery-intro {
  margin-block: clamp(28px, 5vw, 64px) 24px;
  padding: clamp(24px, 4vw, 48px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.cda-demo :is(.sample-nav, .section, .sample-footer, .gallery-footer) {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  border-radius: 14px;
  padding-inline: clamp(16px, 3vw, 32px);
  margin-block: 20px;
}
.cda-demo .section { padding-block: clamp(22px, 4vw, 42px); }
.cda-demo .offerings article { color: var(--demo-ink); }
.cda-demo .showcase {
  background: color-mix(in srgb, var(--demo-ink) 85%, transparent);
}
.cda-demo .demo-button:focus-visible { outline-color: var(--focus); }

.premium-example { padding-bottom: 24px; }
.store-products .demo-button { margin-top: 14px; }
.store-status { margin: 12px 0 0; }
.premium-controls { display: grid; gap: 12px; align-content: start; }
.premium-controls label { display: grid; gap: 4px; }
.premium-controls p:empty { display: none; }
.premium-controls form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.cart-line { padding: 8px 0; border-bottom: 1px solid currentColor; }
.cart-totals { margin: 0; padding-block: 6px; }
.cart-totals div { display: flex; justify-content: space-between; gap: 10px; padding-block: 3px; }
.cart-totals div:last-child { margin-top: 6px; padding-top: 7px; border-top: 1px solid currentColor; font-weight: 800; }
.cart-totals dd { margin: 0; }
.premium-controls button:disabled { opacity: .5; cursor: default; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.premium-sell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.premium-sell p:last-child { max-width: 62ch; margin-bottom: 0; }
@media (max-width: 420px) { .premium-controls form { grid-template-columns: 1fr; } }

.cda-demo .premium-gallery { width: 100%; margin-bottom: 18px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.premium-gallery p { margin-bottom: 6px; color: var(--muted); }
.premium-gallery div { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.premium-gallery a { color: var(--accent); font-weight: 750; }

/* Each demo includes the public-facing pages a customer expects, as linked sections. */
.cda-demo .business-story,
.cda-demo .business-faq,
.cda-demo .business-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 5vw, 62px);
}
.business-story p:last-child, .business-contact p:last-child { margin-bottom: 0; }
.business-process {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: clamp(12px, 3vw, 30px);
}
.business-process ol { margin: 0; padding: 0; list-style: none; }
.business-process li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; }
.business-process li .kicker { color: var(--accent); }
.business-faq details { border-bottom: 1px solid var(--border); padding-block: 13px; }
.business-faq summary { cursor: pointer; font-weight: 720; }
.business-faq details p { margin: 9px 0 0; }
.business-contact aside { border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.business-contact aside a { color: var(--accent); font-weight: 700; }
.example-barber .showcase .art,
.example-auto-detailing .showcase .art { border-radius: 4px; }
:is(.example-hair-salon,.example-bakery,.example-photography) .hero .art { border-radius: 46% 46% 14px 14px; }
:is(.example-hvac,.example-painting,.example-plumbing,.example-electrician,.example-roofing) .offerings article {
  border-inline-start: 5px solid var(--demo-accent);
  border-radius: 4px 12px 12px 4px;
}
@media (max-width: 620px) {
  .cda-demo :is(.business-story,.business-faq,.business-contact) { grid-template-columns: 1fr; }
}

.sample-nav .demo-menu-toggle { display: none; }
@media (max-width: 720px) {
  .sample-nav .demo-menu-toggle {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
    padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); background: var(--raised); font: inherit; cursor: pointer;
  }
  .demo-menu-icon {
    display: inline-block; width: 1rem; height: .75rem;
    border-block: 2px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  }
  .demo-menu-toggle[aria-expanded="false"] + nav { display: none; }
  .demo-menu-toggle + nav {
    flex: 1 0 100%; display: flex; flex-direction: column;
    align-items: stretch; gap: 4px; padding-block-start: .35rem;
    border-top: 1px solid var(--border);
  }
  .demo-menu-toggle + nav a {
    display: flex; align-items: center; gap: .35rem; min-height: 44px; padding: .45rem .65rem;
  }
}