/* Demos page, motion layer (Oct 25, 2026). Sits on top of sgl.css. */
:root{--dc-water:#1fbfbe;--dc-water-2:#7fe3dc}

/* ---------- hero: the free audit, featured ---------- */
.dc-audit{margin-top:38px;max-width:620px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px 16px;align-items:center;padding:16px 18px;border-radius:22px;background:rgba(8,24,26,.55);border:1px solid rgba(243,239,227,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.dc-audit label{color:#d6e2dc;font-size:.98rem;line-height:1.4}
.dc-audit label b{color:#fff}
.dc-audit-row{grid-column:1/-1;display:flex;gap:8px}
.dc-audit input{flex:1;min-width:0;font:inherit;font-size:1rem;color:#f3efe3;background:rgba(255,255,255,.08);border:1.5px solid rgba(243,239,227,.22);border-radius:999px;padding:12px 18px}
.dc-audit input::placeholder{color:#9fb3ab}
.dc-audit input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 5px rgba(200,233,138,.14)}
.dc-audit .btn{flex:none}
.dc-audit-ring{position:relative;width:52px;height:52px}
.dc-audit-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dc-audit-ring circle{fill:none;stroke:rgba(243,239,227,.14);stroke-width:4}
.dc-audit-ring circle.fg{stroke:var(--lime);stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113;animation:dcRing 4s cubic-bezier(.2,.7,.2,1) infinite}
.dc-audit-ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 1rem var(--display);color:var(--lime)}
@keyframes dcRing{0%{stroke-dashoffset:113}55%,80%{stroke-dashoffset:22}100%{stroke-dashoffset:113}}
@media(max-width:560px){.dc-audit-row{flex-direction:column}.dc-audit .btn{justify-content:center}}

/* ---------- the studio ---------- */
.dc-studio{background:radial-gradient(55% 45% at 100% 10%,rgba(31,191,190,.12),transparent 60%),radial-gradient(45% 40% at 0% 70%,rgba(111,174,62,.12),transparent 60%),var(--paper)}
.dc-studio::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(15,38,32,.12) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(60% 50% at 70% 40%,#000,transparent)}
.studio-label{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.dc-live{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--ink);color:#e9f3ee;letter-spacing:.08em}
.dc-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(200,233,138,.6);animation:dcPulse 1.8s ease-out infinite}
@keyframes dcPulse{0%{box-shadow:0 0 0 0 rgba(200,233,138,.55)}100%{box-shadow:0 0 0 10px rgba(200,233,138,0)}}
/* tabs: icons and a lime pill that slides to the tab you pick */
.studio-tabs{isolation:isolate}
.studio-tabs .dc-pill{position:absolute;z-index:-1;top:8px;left:0;height:calc(100% - 16px);width:0;border-radius:999px;background:var(--lime);box-shadow:0 8px 24px -10px rgba(200,233,138,.8);transition:transform .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.studio-tabs.dc-ready [aria-selected="true"],.studio-tabs.dc-ready [aria-selected="true"]:hover{background:transparent;color:var(--ink)}
.studio-tabs svg.dc-ti{width:17px;height:17px;flex:none;opacity:.85}
.studio-tabs a{color:#f3efe3}
.studio-tabs a:hover{color:var(--lime)}
/* the demo card: a lit window with a live badge */
.dc-studio .card-ui{position:relative;isolation:isolate;border:0;box-shadow:0 0 0 1px rgba(15,38,32,.08),0 50px 100px -50px rgba(15,38,32,.55);padding-top:calc(clamp(22px,3vw,36px) + 30px);overflow:visible}
.dc-studio .card-ui::before{content:"";position:absolute;left:0;right:0;top:0;height:38px;border-radius:26px 26px 0 0;background:linear-gradient(180deg,#f3efe6,#fff);border-bottom:1px solid rgba(15,38,32,.06);background-image:radial-gradient(circle at 22px 19px,#e0a35c 4.5px,transparent 5px),radial-gradient(circle at 40px 19px,#c9c27a 4.5px,transparent 5px),radial-gradient(circle at 58px 19px,#8fbf73 4.5px,transparent 5px),linear-gradient(180deg,#f3efe6,#fff)}
.dc-studio .card-ui::after{content:"";position:absolute;inset:8% -6% -8% 10%;z-index:-1;border-radius:40px;background:radial-gradient(50% 50% at 50% 50%,rgba(31,191,190,.28),rgba(111,174,62,.14) 50%,transparent 75%);filter:blur(30px);animation:dcGlow 9s ease-in-out infinite alternate}
@keyframes dcGlow{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,-3%,0) scale(1.06)}}
.dc-badge{position:absolute;top:9px;right:14px;display:inline-flex;align-items:center;gap:7px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#2f6b4f}
.dc-badge i{width:7px;height:7px;border-radius:50%;background:#4fb37a;animation:dcPulse 1.8s ease-out infinite}
.dc-studio .panel:not([hidden]) .panel-copy>*{animation:dcUp .7s cubic-bezier(.16,.84,.24,1) both}
.dc-studio .panel:not([hidden]) .panel-copy>*:nth-child(2){animation-delay:.06s}
.dc-studio .panel:not([hidden]) .panel-copy>*:nth-child(3){animation-delay:.12s}
.dc-studio .panel:not([hidden]) .panel-copy>*:nth-child(4){animation-delay:.18s}
.dc-studio .panel:not([hidden]) .card-ui{animation:dcCard .8s cubic-bezier(.16,.84,.24,1) both}
@keyframes dcUp{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes dcCard{from{opacity:0;transform:translate3d(0,26px,0) scale(.98)}to{opacity:1;transform:none}}
.dc-studio .chip,.dc-studio .say-chips button{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,box-shadow .25s}
.dc-studio .chip:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(15,38,32,.45)}

/* ---------- real systems: pick a business, then a screen ---------- */
.dc-sys{background:radial-gradient(50% 50% at 100% 0%,rgba(31,191,190,.14),transparent 60%),radial-gradient(40% 50% at 0% 100%,rgba(111,174,62,.12),transparent 60%),var(--bg)}
.dc-sys .lede{color:#b9cbc6;max-width:34em}
.dc-cats{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(28px,3vw,40px) 0 22px}
.dc-cats button{display:inline-flex;align-items:center;gap:10px;font:700 .95rem var(--sans);color:#cfdcd7;padding:11px 16px 11px 18px;border-radius:999px;border:1.5px solid rgba(243,239,227,.16);background:rgba(255,255,255,.04);transition:background .25s,color .25s,border-color .25s}
.dc-cats button span{min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:grid;place-items:center;font-size:.78rem;background:rgba(255,255,255,.1)}
.dc-cats button:hover{color:#fff;border-color:rgba(243,239,227,.4)}
.dc-cats button[aria-selected=true]{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.dc-cats button[aria-selected=true] span{background:rgba(15,38,32,.14)}
.dc-show{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(20px,3vw,44px);align-items:start}
.dc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dc-list li[hidden]{display:none}
.dc-list li{animation:dcUp .5s cubic-bezier(.16,.84,.24,1) both}
.dc-list li:nth-child(n){animation-delay:calc(var(--k,0) * 55ms)}
.dc-item{position:relative;display:block;width:100%;text-align:left;padding:15px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#fff;overflow:hidden;transition:background .25s,border-color .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.dc-item b{display:block;font:700 1.08rem/1.2 var(--display);letter-spacing:-.02em}
.dc-item span{display:block;margin-top:4px;font-size:.88rem;color:#a9bdb7;line-height:1.4}
.dc-item:hover{background:rgba(255,255,255,.07);transform:translateX(4px)}
.dc-item[aria-current=true]{background:rgba(255,255,255,.1);border-color:rgba(200,233,138,.45)}
.dc-item[aria-current=true] b{color:var(--lime)}
.dc-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--dc-water),var(--lime))}
.dc-item[aria-current=true] .dc-bar{animation:dcProg var(--dur,7s) linear forwards}
.dc-show.paused .dc-item[aria-current=true] .dc-bar{animation-play-state:paused}
@keyframes dcProg{to{transform:scaleX(1)}}
.dc-stage{margin:0;position:sticky;top:110px}
.dc-frame{position:relative;display:block;width:100%;padding:0;border:0;border-radius:18px;overflow:hidden;background:#13302a;box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08);cursor:zoom-in}
.dc-frame .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#1b3c35}
.dc-frame .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.dc-frame .bar i:nth-child(1){background:#e0a35c}.dc-frame .bar i:nth-child(2){background:#c9c27a}.dc-frame .bar i:nth-child(3){background:#8fbf73}
.dc-url{margin-left:12px;flex:1;max-width:320px;font:500 12px var(--sans);font-style:normal;color:#b9cbc6;background:rgba(0,0,0,.22);padding:4px 12px;border-radius:999px;text-align:left}
.dc-view{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#f3efe6}
.dc-view img{position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:left top;will-change:transform;transition:opacity .5s ease}
.dc-view img.out{opacity:0}
.dc-zoom{position:absolute;right:14px;bottom:14px;font:700 12px var(--sans);padding:7px 12px;border-radius:999px;background:rgba(6,20,22,.75);color:#fff;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.dc-frame:hover .dc-zoom,.dc-frame:focus-visible .dc-zoom{opacity:1;transform:none}
.dc-stage figcaption{margin-top:16px}
.dc-stage figcaption strong{display:block;font:700 1.35rem var(--display);letter-spacing:-.03em;color:#fff}
.dc-stage figcaption span{color:#a9bdb7;font-size:.95rem}
@media(max-width:900px){
  .dc-show{grid-template-columns:1fr}
  .dc-stage{position:relative;top:auto;order:-1}
  .dc-list{grid-auto-flow:column;grid-auto-columns:minmax(220px,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .dc-list::-webkit-scrollbar{display:none}
  .dc-list li{scroll-snap-align:start}
  .dc-stage figcaption{display:none}
}

/* ---------- audit band: a sample score that counts up ---------- */
.dc-ring small{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#d9cbd5}
.dc-ring.dc-run .ab-fg{animation:none;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.dc-areas{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0}
.dc-areas li{font:600 12.5px var(--sans);padding:5px 11px;border-radius:999px;border:1px solid rgba(243,239,227,.22);color:#e8dde4;transition:background .35s,color .35s,border-color .35s}
.dc-areas li.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}

@media(prefers-reduced-motion:reduce){
  .dc-audit-ring circle.fg{animation:none;stroke-dashoffset:30}
  .dc-studio .card-ui::after,.dc-live i,.dc-badge i{animation:none}
  .dc-studio .panel .panel-copy>*,.dc-studio .panel .card-ui,.dc-list li{animation:none!important}
  .studio-tabs .dc-pill{transition:none}
}