/* How it works: a self-playing phone demo (7 Nov 2026, same pattern as Glisten's home demo).
   Six steps on a loop; tap a step to jump. Everything is prefixed dm- so it can't clash with the rest of the page.
   Uses the tokens from /brand.css and /studio/studio-dark.css. Reduced motion: no movement, every pane shows its finished state. */
.dm { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 6vw, 80px); align-items: center; }
.dm-left h2 { max-width: 16ch; margin: 12px 0 14px; }
.dm-sub { color: var(--muted); margin: 0 0 22px; }
.dm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dm-steps button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 13px 16px; border-radius: 14px; cursor: pointer; color: var(--muted); transition: background .3s, color .3s; }
.dm-steps button:hover { background: rgba(255,255,255,.035); }
.dm-steps button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.dm-n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 500 .78rem var(--mono); }
.dm-steps b { display: block; font: 600 1.08rem/1.35 var(--sans); color: inherit; padding-top: 3px; }
.dm-d, .dm-instead { display: none; }
.dm-steps [aria-current] { background: var(--card); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.dm-steps [aria-current] .dm-n { background: var(--coral); border-color: var(--coral); color: var(--on-coral); }
.dm-steps [aria-current] .dm-d { display: block; margin-top: 4px; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.dm-steps [aria-current] .dm-instead { display: block; margin-top: 8px; font: 500 .72rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--coral); }
.dm-cta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 22px; }
.dm-cta a:not(.btn) { color: var(--muted); font-size: .95rem; }

/* the phone */
.dm-wrap { justify-self: center; text-align: center; }
.dm-phone { position: relative; width: 300px; height: 610px; border-radius: 46px; background: #050505; padding: 11px; box-shadow: 0 0 0 1px #2a2d38, 0 50px 90px -30px rgba(0,0,0,.85); }
.dm-screen { position: relative; height: 100%; border-radius: 36px; background: var(--bg); color: var(--fg); overflow: hidden; text-align: left; font-size: 13px; line-height: 1.45; }
.dm-head { display: flex; align-items: center; gap: 10px; padding: 38px 16px 11px; border-bottom: 1px solid var(--line); }
.dm-head img { width: 28px; height: 28px; border-radius: 8px; }
.dm-head b { display: block; font: 600 14px var(--sans); white-space: nowrap; }
.dm-head small { color: var(--muted); font-size: 11px; }
.dm-tag { margin-left: auto; font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.dm-pane { display: none; padding: 14px 15px; }
.dm[data-step="0"] .dm-p0, .dm[data-step="1"] .dm-p1, .dm[data-step="2"] .dm-p2, .dm[data-step="3"] .dm-p3, .dm[data-step="4"] .dm-p4, .dm[data-step="5"] .dm-p5 { display: block; animation: dmIn .35s ease both; }
@keyframes dmIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes dmPop { from { opacity: 0; transform: scale(.88); } }
.dm-label { margin: 0 0 9px; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.dm-label b { color: var(--fg); font-weight: 500; }
.dm-note { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; }
.dm-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }

/* 1. product link */
.dm-field { padding: 11px 12px; font-size: 12.5px; min-height: 42px; white-space: nowrap; overflow: hidden; }
.dm-caret { display: inline-block; width: 2px; height: 14px; background: var(--coral); vertical-align: -2px; margin-left: 1px; animation: dmBlink 1s steps(1) infinite; }
@keyframes dmBlink { 50% { opacity: 0; } }
.dm-btn { margin: 10px 0 0; text-align: center; background: var(--coral-d); color: #fff; font-weight: 600; padding: 11px; border-radius: 999px; font-size: 13px; }
.dm-prod { display: flex; gap: 11px; align-items: center; margin-top: 12px; padding: 10px; animation: dmIn .45s ease both; animation-delay: 1.5s; }
.dm-prod img { width: 46px; height: 74px; object-fit: cover; border-radius: 8px; }
.dm-prod span { display: block; color: var(--muted); font-size: 11px; }
.dm-prod b { display: block; font-size: 13.5px; }
.dm-prod i { font-style: normal; display: inline-block; margin-top: 5px; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(76,195,138,.14); color: var(--good); }

/* 2. creators */
.dm-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dm-faces figure { margin: 0; position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); animation: dmPop .4s cubic-bezier(.2,.8,.2,1.2) both; animation-delay: calc(var(--d) * .12s); }
.dm-faces img { width: 100%; height: 100%; object-fit: cover; }
.dm-faces figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 10.5px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.dm-faces figcaption span { font: 500 8.5px var(--mono); letter-spacing: .08em; opacity: .8; margin-left: 3px; }
.dm[data-step="1"] .dm-pick { animation: dmPop .4s cubic-bezier(.2,.8,.2,1.2) both, dmSel .01s both 1.4s; }
@keyframes dmSel { to { box-shadow: 0 0 0 2px var(--coral); } }
.dm-pick::after { content: "✓"; position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: var(--coral); color: var(--on-coral); opacity: 0; animation: dmIn .3s ease both 1.4s; }
.dm[data-step="1"] .dm-pick::after { opacity: 1; }
.dm-or { margin: 11px 0 0; padding: 9px 11px; font-size: 12px; color: var(--muted); }

/* 3. the free sample */
.dm-making { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }
.dm-making li { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); animation: dmIn .3s ease both; animation-delay: calc(var(--d) * .45s); }
.dm-making li::before { content: "✓"; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; background: rgba(76,195,138,.16); color: var(--good); }
.dm-shot { position: relative; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 9 / 13; background: var(--card); animation: dmIn .5s ease both; animation-delay: 1.5s; }
.dm-shot img, .dm-shot video { width: 100%; height: 100%; object-fit: cover; }
.dm-ai { position: absolute; left: 8px; top: 8px; font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgba(10,11,15,.72); color: #fff; }
.dm-hook { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(10,11,15,.78); color: #fff; font-size: 11.5px; line-height: 1.4; }
.dm-hook span { display: block; font: 500 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--coral-hi); margin-bottom: 2px; }

/* 4. scripts to approve */
.dm-order { padding: 9px 11px; margin-bottom: 9px; display: flex; justify-content: space-between; font-size: 12px; }
.dm-order b { color: var(--fg); }
.dm-scripts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dm-scripts li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; font-size: 11.5px; line-height: 1.35; }
.dm-scripts li > span > span { font: 500 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
.dm-scripts em { font: 500 12px/1.35 var(--sans); font-style: normal; color: var(--fg); background: none; padding: 0; margin: 0; }
.dm-scripts b { font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.dm[data-step="3"] .dm-scripts b { animation: dmOk .01s both; animation-delay: calc(.6s + var(--d) * .38s); }
@keyframes dmOk { to { background: var(--good); border-color: var(--good); color: #08140d; } }

/* 5. finished ads */
.dm-p4 { padding-bottom: 0; }
.dm-p4 .dm-shot { aspect-ratio: 9 / 14; animation-delay: 0s; }
.dm-dots { display: flex; gap: 5px; justify-content: center; margin: 10px 0 0; }
.dm-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dm-dots i:first-child { background: var(--coral); width: 16px; border-radius: 3px; }
.dm-facts { position: absolute; right: 8px; top: 8px; font: 500 9px var(--mono); letter-spacing: .06em; padding: 3px 7px; border-radius: 999px; background: rgba(10,11,15,.72); color: #fff; }

/* 6. post anywhere */
.dm-files { padding: 10px 11px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 10px; }
.dm-files b { display: block; font-size: 13px; }
.dm-files span { color: var(--muted); font-size: 11px; }
.dm-files i { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: var(--coral-d); color: #fff; }
.dm-where { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dm-where li { display: flex; justify-content: space-between; align-items: center; padding: 10px 11px; font-size: 12.5px; animation: dmIn .35s ease both; animation-delay: calc(.3s + var(--d) * .3s); }
.dm-where b { font-size: 10px; word-spacing: 2px; font-weight: 600; color: var(--good); }
.dm-done { margin: 12px 0 0; text-align: center; font: 400 17px/1.25 var(--serif); animation: dmIn .5s ease both; animation-delay: 2s; }

.dm-cap { margin: 14px auto 0; max-width: 300px; font-size: .8rem; line-height: 1.5; color: var(--dim); }

@media (max-width: 880px) {
  .dm { grid-template-columns: 1fr; gap: 0; }
  .dm-left { display: contents; }
  .dm-left > .u-k, .dm-left > h2, .dm-left > .dm-sub { order: 0; }
  .dm-wrap { order: 1; margin: 4px 0 26px; }
  .dm-steps { order: 2; }
  .dm-cta { order: 3; }
  .dm-steps button { padding: 10px 12px; }
}
@media (max-width: 400px) {
  .dm-phone { width: 284px; height: 584px; }
  .dm-steps b { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dm *, .dm *::before, .dm *::after { animation: none !important; }
  .dm-caret { display: none; }
  .dm-pick { box-shadow: 0 0 0 2px var(--coral); }
  .dm-pick::after { opacity: 1; }
  .dm-scripts b { background: var(--good); border-color: var(--good); color: #08140d; }
}