/*
 * Dovelyne app showcase, v2 - /app/ and /app/guide/
 *
 * Self-contained: these pages render without the magazine theme stylesheet
 * (inc/app-showcase.php), so everything they need is here and nothing here can
 * leak into an article. Palette = the product's own tokens.
 *
 * MOTION CONTRACT
 *  - Every animation is transform / opacity / fill. Nothing animates layout.
 *  - Scenes only play while `.is-in` (set by IntersectionObserver), so the
 *    eight feature loops never all run at once on a phone.
 *  - `.dv-play` on the hero starts the opening choreography once.
 *  - The reduced-motion block at the end is the contract, not a courtesy: it
 *    pins every scene to its finished state and removes every loop.
 */

:root {
  --plum: #5d4e9c; --plum-2: #7a6bc0; --plum-soft: #e9e3fb; --lavender: #cdbff5;
  --peach: #f8cfb2; --peach-soft: #fbe8dc; --coral: #e0624e; --coral-soft: #fbdcd6;
  --mint: #a8dec6; --mint-deep: #2f8c68; --mint-soft: #ddf3ea;
  --sky: #bdd8f5; --sky-soft: #e3effb; --butter: #f5d98a; --butter-deep: #b98514; --butter-soft: #fbf0d1;
  --bg: #f7f2ec; --surface: #fffdfb; --surface-2: #f4eef2; --ink: #2b2634; --muted: #746d86; --border: #ece4e6;
  --grad-hero: linear-gradient(135deg, #5d4e9c 0%, #8a6fd0 58%, #c79bd8 100%);
  --grad-primary: linear-gradient(120deg, #5d4e9c, #7a6bc0);
  --grad-welcome: linear-gradient(120deg, #efe8fb 0%, #fbebdf 100%);
  --grad-night: linear-gradient(180deg, #2b2440 0%, #4a3d78 55%, #7a5aa8 100%);
  --radius: 22px; --radius-sm: 14px; --pill: 999px;
  --shadow: 0 1px 2px rgba(60, 40, 90, 0.05), 0 8px 24px rgba(60, 40, 90, 0.07);
  --shadow-float: 0 14px 36px rgba(60, 40, 90, 0.14);
  --shadow-deep: 0 30px 70px rgba(45, 28, 75, 0.28);
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --maxw: 1140px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --head-h: 68px;
}

/* ================================================================ base */

.dv-app * { box-sizing: border-box; }
.dv-app {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.dv-app img { max-width: 100%; display: block; }
.dv-app svg { width: 20px; height: 20px; flex: none; }
.dv-app h1, .dv-app h2, .dv-app h3, .dv-app h4 { margin: 0 0 0.5em; line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
.dv-app h1 { font-size: clamp(2.4rem, 1.3rem + 4vw, 4.4rem); letter-spacing: -0.035em; }
.dv-app h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); }
.dv-app h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }
.dv-app p { margin: 0 0 1em; }
.dv-app a { color: var(--plum); text-decoration: none; }
.dv-app a:hover { text-decoration: underline; }
.dv-app :focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 6px; }
.dv-wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.dv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dv-app .uw-skip { display: none; }
.dv-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--plum); color: #fff; padding: 10px 16px; border-radius: var(--pill); transition: top 0.2s var(--ease); }
.dv-skip:focus { top: 12px; text-decoration: none; }

/* ============================================================== header */

.dv-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 242, 236, 0.78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.dv-head.is-stuck { border-bottom-color: var(--border); background: rgba(247, 242, 236, 0.94); }
.dv-head-in { display: flex; align-items: center; gap: 18px; height: var(--head-h); }
.dv-app .dv-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 1.12rem; }
.dv-app .dv-brand:hover { text-decoration: none; }
.dv-brand svg { width: 30px; height: 30px; }
.dv-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.dv-nav a { padding: 9px 13px; border-radius: var(--pill); color: var(--muted); font-size: 0.95rem; font-weight: 600; }
.dv-nav a:hover { background: var(--plum-soft); color: var(--plum); text-decoration: none; }
@media (max-width: 860px) { .dv-nav .dv-nav-opt { display: none; } }

/* ============================================================= buttons */

.dv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px;
  border-radius: var(--pill); font-weight: 650; font-size: 1rem; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease); text-align: center; font-family: inherit;
}
.dv-btn:hover { text-decoration: none; transform: translateY(-2px); }
.dv-app .dv-btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 10px 26px rgba(93, 78, 156, 0.32); }
.dv-app .dv-btn-primary:hover { box-shadow: 0 16px 34px rgba(93, 78, 156, 0.4); }
.dv-app .dv-btn-ghost { background: var(--surface); color: var(--plum); border-color: var(--border); box-shadow: var(--shadow); }
.dv-app .dv-btn-ghost:hover { border-color: var(--lavender); }
.dv-app .dv-btn-light { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.dv-app .dv-btn-light:hover { background: rgba(255, 255, 255, 0.28); }
.dv-btn-sm { padding: 10px 18px; font-size: 0.93rem; }

/* ============================================================ hero world */

/* v4 composition: a real two-zone grid. LEFT = headline, lede and buttons. RIGHT = the stage (house + family + feature cards).
   The stage is a grid item, never positioned against the viewport, so the text column and the house can never overlap.
   Below 980px the zones stack: text first, house under it, the six cards as a tidy grid under the house. */
.dv-hero { position: relative; overflow: hidden; min-height: clamp(560px, calc(100vh - var(--head-h)), 800px); display: grid; align-items: center; padding-block: 18px 30px;
  background: linear-gradient(180deg, #efe6fb 0%, #f9ece6 48%, var(--bg) 100%); }
.dv-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 38% at 78% 18%, rgba(245, 217, 138, 0.5), transparent 70%), radial-gradient(45% 40% at 12% 30%, rgba(205, 191, 245, 0.5), transparent 70%); }

.dv-stage { position: relative; width: min(100%, 560px); margin: 8px auto 0; pointer-events: none; z-index: 1; }
.dv-scene { position: relative; aspect-ratio: 900 / 600; perspective: 1400px; }
/* .dv-app svg sizes every icon at (0,1,1); the scene-sized SVGs below must outrank
   it or they render as 20px dots (observed: the whole hero world vanished). */
.dv-app .dv-layer { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 900 / 620; overflow: visible; will-change: transform; }
/* the ground and clouds fade out toward the stage's left/right edges, so they never meet the text column as a hard edge */
.dv-layer-back { bottom: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.dv-layer-house { transform-style: preserve-3d; }
.dv-layer-front { bottom: 0; }
/* the house is a generated render, 80% of the stage width. It sits in its own box inside the layer so the family
   and the glows share its exact coordinates; every position below is a percentage of THIS box (x from the left, y from the top). */
.dv-layer-house .dv-house { position: absolute; left: 10%; right: 10%; bottom: 7%; aspect-ratio: 1600 / 1157; }
.dv-layer-house .dv-house > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(45, 28, 75, 0.26)); }
.dv-layer-house .dv-fig { position: absolute; width: auto !important; filter: drop-shadow(0 4px 5px rgba(45, 28, 75, 0.2)); transform-origin: 50% 100%; }
.dv-layer-house .dv-occ { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.dv-layer-house .dv-win { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(245, 217, 138, 0.9), rgba(245, 217, 138, 0.35) 55%, transparent); filter: blur(6px); }

/* The family. The cut-out PNGs have a little transparent padding, so these numbers were set against the visible pixels:
   "feet" = the y of the visible soles in house-% from the top; the image bottom edge sits that much lower (<= 1.6% of the figure's height).
   Figures whose feet are hidden by furniture (gran behind the sofa, parent behind the counter) are occluded by a clip of the render itself. */
.dv-fig.dv-kid    { left: 26.8%; bottom: 42.9%; height: 19%; }   /* bedroom: on the floor at the foot of the bed, soles at y 56.9% */
.dv-fig.dv-gran   { left: 62.6%; bottom: 42.04%; height: 18.5%; }   /* living room: STANDING beside the sofa (left of it), full body, soles on the floor at y 57%, tea in hand; no occluder */
.dv-fig.dv-parent { left: 12.3%; bottom: 10.3%; height: 24%; }   /* kitchen: behind the island counter, soles at y 89.5% (hidden) */
.dv-fig.dv-kid2   { left: 63%;   bottom: 6.0%;  height: 20%; }   /* dining room: on the floor beside the table, soles at y 93.8% */
.dv-fig.dv-dog    { left: 57%;   bottom: -0.9%; height: 9%; }    /* on the ground in front of the plinth, paws at y 100.8% */
/* soft contact shadows on the floor under the feet that are visible */
.dv-fsh { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(45, 28, 75, 0.38), rgba(45, 28, 75, 0)); transform-origin: 50% 50%; }
.dv-fsh-kid  { left: 25.6%; top: 56.2%; width: 11.4%; height: 1.9%; }
.dv-fsh-kid2 { left: 61.9%; top: 93.2%;   width: 10.2%; height: 1.9%; }
.dv-fsh-dog  { left: 55.8%; top: 100%;  width: 8%;    height: 1.6%; }

/* feature cards: six small UI cards, all OUTSIDE the house (sky above the roof, ground below it) so nothing covers a face, furniture or the roof */
.dv-chips { position: absolute; inset: 0; pointer-events: none; }
.dv-chip-ui {
  position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 11px;
  box-shadow: var(--shadow-float); font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--ink); line-height: 1.25;
  opacity: 0; transform: translateY(14px) scale(0.92); pointer-events: auto; will-change: transform, opacity; white-space: nowrap;
}
.dv-chip-ui small { display: block; font-weight: 500; color: var(--muted); font-size: 0.68rem; }
.dv-chip-ui svg { width: 16px; height: 16px; flex: none; }
.dv-chip-task   { left: 1%;  top: 2%;  color: var(--mint-deep); }
.dv-chip-chat   { left: 37%; top: 0.5%; color: #2d6ca8; }
.dv-chip-wallet { right: 1%; top: 2%;  color: var(--butter-deep); }
.dv-chip-cal    { left: 4%;  bottom: 1.5%; color: var(--plum); }
.dv-chip-basket { left: 35%; bottom: 0.5%; color: var(--coral); }
.dv-chip-meal   { right: 3%; bottom: 1.5%; color: #a8572d; }

/* the star flight across the stage: an HTML star on an offset path that the script sets from the real card positions */
.dv-flight { position: absolute; inset: 0; pointer-events: none; }
.dv-flight span { position: absolute; left: 0; top: 0; width: 16px; height: 16px; color: var(--butter-deep); opacity: 0;
  offset-path: var(--dv-path, path("M 160 40 C 320 -20, 560 -20, 720 40")); offset-rotate: 0deg; }
.dv-flight span svg { width: 16px; height: 16px; }

.dv-hero-copy { position: relative; z-index: 3; padding: 14px 0 8px; max-width: 560px; }

@media (min-width: 980px) {
  .dv-hero {
    grid-template-columns: max(20px, calc((100% - var(--maxw)) / 2)) minmax(0, clamp(340px, 40vw, 500px)) clamp(16px, 3vw, 52px) minmax(0, 1fr) clamp(8px, 1.4vw, 28px);
  }
  .dv-hero .dv-wrap { grid-column: 2; grid-row: 1; width: auto; margin: 0; position: static; }
  .dv-hero-copy { position: static; padding: 0; max-width: none; }
  .dv-hero .dv-stage { grid-column: 4; grid-row: 1; justify-self: end; align-self: center; width: min(100%, 900px); margin: 0; aspect-ratio: 900 / 700; }
  .dv-hero .dv-scene { position: absolute; inset: 0; aspect-ratio: auto; }
  .dv-app .dv-layer { bottom: 5.7%; }
  .dv-app .dv-layer-front, .dv-app .dv-layer-back { bottom: 5.7%; }
  .dv-app h1 { font-size: clamp(2.3rem, 0.9rem + 2.7vw, 3.9rem); }
}

/* below 980px: text, then the house, then the cards as a 2-column grid under it (nothing floats over the house) */
@media (max-width: 979px) {
  .dv-hero { align-items: start; grid-template-columns: minmax(0, 1fr); padding-block: 8px 24px; }
  .dv-hero .dv-wrap { order: 1; }
  .dv-hero .dv-stage { order: 2; width: min(100%, 620px); margin-top: 6px; }
  .dv-chips { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 20px 0; }
  .dv-chip-ui { position: static; white-space: normal; }
  .dv-flight { display: none; }
}
@media (max-width: 979px) { .dv-hero { padding-inline: 0; } .dv-stage { width: min(100% - 24px, 620px); } }
@media (max-width: 640px) { .dv-hero .dv-scroll-cue { display: none; } .dv-hero-note { margin-top: 12px; } .dv-hero-cta { margin-top: 20px; } }
@media (max-width: 560px) { .dv-chip-ui { font-size: 0.74rem; padding: 7px 9px; } .dv-chip-ui small { font-size: 0.66rem; } .dv-chips { margin-inline: 0; } }

/* sits in the copy column under the buttons at every width (v4: it used to be pinned to the hero's bottom centre, which put it over the stage) */
.dv-scroll-cue { position: relative; margin-top: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: var(--pill);
  background: rgba(255, 253, 251, 0.86); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--muted); font-size: 0.8rem; font-weight: 650; text-decoration: none; transition: opacity 0.35s var(--ease), translate 0.35s var(--ease); }
.dv-app a.dv-scroll-cue:hover { text-decoration: none; color: var(--plum); }
.dv-scroll-cue i { width: 18px; height: 28px; border: 2px solid var(--plum-2); border-radius: 10px; position: relative; display: block; }
.dv-scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 5px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--plum); animation: dv-wheel 1.6s ease-in-out infinite; }
.dv-scroll-cue.is-gone { opacity: 0; translate: 0 8px; pointer-events: none; }
@keyframes dv-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0.2; } 100% { transform: translateY(9px); opacity: 0; } }
.dv-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--plum);
  padding: 7px 15px 7px 9px; border-radius: var(--pill); font-size: 0.85rem; font-weight: 650; margin-bottom: 20px; box-shadow: var(--shadow); }
.dv-eyebrow b { background: var(--butter-soft); color: var(--butter-deep); padding: 3px 10px; border-radius: var(--pill); font-size: 0.78rem; }
.dv-hero-lede { font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.28rem); color: var(--muted); max-width: 30em; }
.dv-hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px; }
.dv-hero-note { margin-top: 16px; font-size: 0.92rem; color: var(--muted); }
.dv-hero-note strong { color: var(--ink); font-weight: 650; }
.dv-hero-copy > * { opacity: 0; transform: translateY(18px); }
.dv-play .dv-hero-copy > * { animation: dv-up 0.8s var(--ease) forwards; }
.dv-play .dv-hero-copy > :nth-child(2) { animation-delay: 0.1s; }
.dv-play .dv-hero-copy > :nth-child(3) { animation-delay: 0.2s; }
.dv-play .dv-hero-copy > :nth-child(4) { animation-delay: 0.3s; }
.dv-play .dv-hero-copy > :nth-child(5) { animation-delay: 0.4s; }

/* opening choreography */
.dv-layer-house .dv-house { opacity: 0; transform: translateY(40px) scale(0.96); transform-origin: 50% 100%; }
.dv-play .dv-layer-house .dv-house { animation: dv-house-in 1.1s var(--ease) 0.15s forwards; }
.dv-person { opacity: 0; transform-box: fill-box; transform-origin: center; }
.dv-layer-house .dv-person { transform-origin: 50% 100%; }
.dv-play .dv-person { animation: dv-pop 0.6s var(--ease-pop) forwards; }
.dv-play .dv-kid { animation-delay: 1s; } .dv-play .dv-parent { animation-delay: 1.15s; }
.dv-play .dv-gran { animation-delay: 1.3s; } .dv-play .dv-kid2 { animation-delay: 1.45s; }
.dv-play .dv-chip-ui { animation: dv-chip-in 0.7s var(--ease-pop) forwards; }
.dv-play .dv-chip-cal { animation-delay: 1.6s; } .dv-play .dv-chip-task { animation-delay: 2.1s; }
.dv-play .dv-chip-wallet { animation-delay: 2.5s; } .dv-play .dv-chip-basket { animation-delay: 3.3s; }
.dv-play .dv-chip-meal { animation-delay: 3.8s; } .dv-play .dv-chip-chat { animation-delay: 4.3s; }
.dv-play .dv-flight span { animation: dv-offset 1.4s var(--ease) 2.6s forwards; }
.dv-play .dv-flight span:nth-child(2) { animation-delay: 2.75s; } .dv-play .dv-flight span:nth-child(3) { animation-delay: 2.9s; }
.dv-play .dv-flight span:nth-child(4) { animation-delay: 3.05s; }
.dv-wallet-n { display: inline-block; min-width: 1.4em; }

/* ambient life, after the opening */
.dv-sun, .dv-sunglow, .dv-cloud, .dv-plant, .dv-dog, .dv-win, .dv-lamp, .dv-smoke, .dv-tail, .dv-house-sm { transform-box: fill-box; transform-origin: center; }
.dv-play .dv-sun, .dv-play .dv-sunglow { animation: dv-sun 7s ease-in-out infinite; }
.dv-play .dv-cloud-1 { animation: dv-drift 18s ease-in-out infinite alternate; }
.dv-play .dv-cloud-2 { animation: dv-drift 24s ease-in-out -6s infinite alternate; }
.dv-play .dv-cloud-3 { animation: dv-drift 14s ease-in-out -3s infinite alternate; }
.dv-play .dv-plant { animation: dv-sway 5.5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.dv-play .dv-plant-2 { animation-duration: 6.4s; animation-delay: -2s; }
.dv-play .dv-win { animation: dv-glow 5.5s ease-in-out infinite; }
.dv-play .dv-win.w2 { animation-delay: -2.7s; } .dv-play .dv-win.w3 { animation-delay: -1.3s; }
.dv-play .dv-lamp { animation: dv-lamp 4s ease-in-out infinite; }
.dv-play .dv-smoke { animation: dv-smoke 6s linear infinite; }
.dv-play .dv-tail { animation: dv-tail 0.9s ease-in-out infinite alternate; transform-origin: 100% 100%; }
.dv-play .dv-dog { animation: dv-bob 3s ease-in-out infinite; }
/* feet stay planted: every figure pops/breathes from its soles (transform-origin 50% 100%). Only the kid leaves the floor, and his shadow shrinks and returns with him. */
.dv-play .dv-person.dv-gran { animation: dv-pop 0.6s var(--ease-pop) 1.3s forwards, dv-breathe 5s ease-in-out 2s infinite; }
.dv-play .dv-person.dv-parent { animation: dv-pop 0.6s var(--ease-pop) 1.1s forwards, dv-breathe 4.6s ease-in-out 1.8s infinite; }
.dv-play .dv-person.dv-kid2 { animation: dv-pop 0.6s var(--ease-pop) 1.5s forwards, dv-breathe 4.2s ease-in-out 2.2s infinite; }
.dv-play .dv-kid.dv-person { animation: dv-pop 0.6s var(--ease-pop) 1s forwards, dv-jump 2.8s ease-in-out 2s infinite; }
.dv-play .dv-dog.dv-person { animation: dv-pop 0.6s var(--ease-pop) 1.6s forwards, dv-breathe 3.2s ease-in-out 2.4s infinite; }
.dv-fsh { opacity: 0; } .dv-play .dv-fsh { animation: dv-fade-in 0.6s ease 1.2s forwards; }
.dv-play .dv-fsh-kid { animation: dv-fade-in 0.6s ease 1.2s forwards, dv-jump-sh 2.8s ease-in-out 2s infinite; }

@keyframes dv-up { to { opacity: 1; transform: none; } }
@keyframes dv-house-in { to { opacity: 1; transform: none; } }
@keyframes dv-pop { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dv-chip-in { 0% { opacity: 0; transform: translateY(14px) scale(0.92); } 100% { opacity: 1; transform: none; } }
@keyframes dv-offset { 0% { offset-distance: 0%; opacity: 0; transform: scale(0.6); } 20% { opacity: 1; transform: scale(1.1); } 100% { offset-distance: 100%; opacity: 0; transform: scale(0.8); } }
@keyframes dv-sun { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes dv-drift { from { transform: translateX(-18px); } to { transform: translateX(22px); } }
@keyframes dv-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes dv-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes dv-lamp { 0%, 100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.18); } }
@keyframes dv-smoke { 0% { transform: translateY(0); opacity: 0.9; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes dv-tail { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes dv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes dv-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.02); } }
/* a clear hop and a soft landing: squash on touchdown, then rest on the floor for the second half of the cycle */
@keyframes dv-jump { 0% { transform: translateY(0) scale(1.03, 0.965); } 10% { transform: translateY(0) scale(1, 1); } 32% { transform: translateY(-7%) scale(0.99, 1.02); } 54% { transform: translateY(0) scale(1.03, 0.965); } 62%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes dv-jump-sh { 0%, 10%, 54%, 62%, 100% { transform: scale(1); opacity: 1; } 32% { transform: scale(0.72); opacity: 0.55; } }
@keyframes dv-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1, 1.012); } }
@keyframes dv-fade-in { to { opacity: 1; } }

/* ============================================================ sections */

.dv-sec { padding: clamp(40px, 5vw, 72px) 0; position: relative; }
.dv-sec-head { max-width: 44em; margin-bottom: clamp(22px, 3vw, 40px); }
.dv-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 700; color: var(--plum-2); margin-bottom: 10px; }
.dv-sec-head p { color: var(--muted); font-size: 1.05rem; }
.dv-rise { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.dv-rise.is-in { opacity: 1; transform: none; }
.dv-rise-2 { transition-delay: 0.1s; } .dv-rise-3 { transition-delay: 0.2s; }

/* A scene keeps .is-in once seen (so it never un-reveals when scrolled past)
   and gets .is-paused while off screen, which freezes every loop inside it. */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* shared pieces */
.dv-feat-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; box-shadow: var(--shadow); }
.dv-feat-icon svg { width: 24px; height: 24px; }
.dv-i-plum { background: var(--plum-soft); color: var(--plum); } .dv-i-mint { background: var(--mint-soft); color: var(--mint-deep); }
.dv-i-butter { background: var(--butter-soft); color: var(--butter-deep); } .dv-i-coral { background: var(--coral-soft); color: var(--coral); }
.dv-i-sky { background: var(--sky-soft); color: #2d6ca8; } .dv-i-peach { background: var(--peach-soft); color: #a8572d; }
.dv-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.dv-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 0.97rem; }
.dv-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--mint-deep); }
.dv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--pill); font-size: 0.72rem; font-weight: 650; }
.dv-chip-star { background: var(--butter-soft); color: var(--butter-deep); } .dv-chip-mint { background: var(--mint-soft); color: var(--mint-deep); }
.dv-chip-plum { background: var(--plum-soft); color: var(--plum); } .dv-chip-off { background: var(--surface-2); color: var(--muted); }
.dv-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex: none; display: grid; place-items: center; background: var(--surface); transition: background 0.3s, border-color 0.3s; }
.dv-check.is-done { background: var(--mint-deep); border-color: var(--mint-deep); }
.dv-check svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity 0.3s; }
.dv-check.is-done svg { opacity: 1; }
.dv-row { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 12px; background: var(--bg); margin-bottom: 8px; font-size: 0.9rem; }
.dv-row:last-child { margin-bottom: 0; }
.dv-row .dv-grow { flex: 1; min-width: 0; }
.dv-row small { display: block; color: var(--muted); font-size: 0.78rem; }
.dv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dv-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: 0.9rem; color: #fff; background: var(--c, var(--plum)); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c, var(--plum)); flex: none; }
.dv-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 16px; }
.dv-panel-h { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); font-weight: 650; font-size: 0.9rem; }
.dv-panel-h .dv-tl { display: flex; gap: 5px; margin-left: auto; }
.dv-panel-h .dv-tl i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); display: block; }

/* ------------------------------------------- scene 1: calendar week band */
.dv-scene-cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: clamp(16px, 2.5vw, 28px); overflow: hidden; position: relative; }
.dv-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-height: 240px; }
.dv-day { background: var(--bg); border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.dv-day b { font-size: 0.72rem; color: var(--muted); font-weight: 650; letter-spacing: 0.04em; }
.dv-day.is-today { background: var(--plum-soft); } .dv-day.is-today b { color: var(--plum); }
.dv-ev { font-size: 0.74rem; font-weight: 650; padding: 6px 8px; border-radius: 9px; color: var(--ink); background: var(--surface); border-left: 3px solid var(--c); opacity: 0; transform: translateY(10px) scale(0.95); display: flex; align-items: center; gap: 5px; }
.dv-ev svg { width: 12px; height: 12px; color: var(--muted); margin-left: auto; }
.dv-ev small { display: block; font-weight: 500; color: var(--muted); font-size: 0.66rem; }
.is-in .dv-ev { animation: dv-ev-in 8s var(--ease) infinite; animation-delay: calc(var(--i) * 0.28s); }
@keyframes dv-ev-in { 0% { opacity: 0; transform: translateY(10px) scale(0.95); } 8%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-6px); } }
.dv-week-people { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); align-items: center; }
.dv-week-people span { display: inline-flex; align-items: center; gap: 7px; }
.dv-week-people i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
@media (max-width: 700px) { .dv-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dv-day:nth-child(n+5) { display: none; } }

/* ------------------------------------------- scene 2: tasks stepper */
.dv-steps-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
@media (max-width: 900px) { .dv-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dv-steps-grid::before { content: ""; position: absolute; left: 6%; right: 6%; top: 36px; height: 4px; border-radius: 4px; background: var(--border); }
.dv-steps-grid::after { content: ""; position: absolute; left: 6%; top: 36px; height: 4px; border-radius: 4px; background: var(--grad-primary); width: 0; }
.is-in .dv-steps-grid::after { animation: dv-line 12s linear infinite; }
@media (max-width: 900px) { .dv-steps-grid::before, .dv-steps-grid::after { display: none; } }
@keyframes dv-line { 0% { width: 0; } 70%, 100% { width: 88%; } }
.dv-stage-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); position: relative; opacity: 0.45; transform: scale(0.97); transition: none; }
.is-in .dv-stage-card { animation: dv-stage 12s var(--ease) infinite; animation-delay: calc(var(--i) * 2.4s); }
@keyframes dv-stage { 0% { opacity: 0.45; transform: scale(0.97); } 6%, 30% { opacity: 1; transform: scale(1); box-shadow: var(--shadow-float); } 38%, 100% { opacity: 0.45; transform: scale(0.97); } }
.dv-stage-card .dv-step-n { position: absolute; top: 14px; left: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 3px solid var(--border); display: grid; place-items: center; font-weight: 750; color: var(--plum); box-shadow: var(--shadow); }
.dv-stage-art { height: 150px; border-radius: 16px; overflow: hidden; margin-bottom: 12px; background: var(--bg); display: grid; place-items: center; }
.dv-app .dv-stage-art .dv-art-svg { width: 100%; height: 100%; }
.dv-stage-card h4 { font-size: 1rem; margin: 0 0 4px; } .dv-stage-card p { color: var(--muted); font-size: 0.88rem; margin: 0; }
.dv-sock { transform-box: fill-box; transform-origin: center; }
.is-in .dv-sock { animation: dv-sock 12s var(--ease) infinite; }
.is-in .dv-sock-2 { animation-delay: 0.3s; } .is-in .dv-sock-3 { animation-delay: 0.6s; }
@keyframes dv-sock { 0%, 10% { opacity: 1; transform: none; } 18%, 100% { opacity: 0; transform: translateY(-22px) scale(0.5); } }
.dv-big-check { width: 120px; height: 120px; border-radius: 50%; background: var(--mint-soft); display: grid; place-items: center; color: var(--mint-deep); }
.dv-big-check svg { width: 56px; height: 56px; }
.is-in .dv-stage-2 .dv-big-check { animation: dv-pop 0.7s var(--ease-pop) 2.6s both; }
.dv-award { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0 10px; }
.dv-award > span { background: var(--surface); border-radius: 10px; padding: 8px 10px; font-size: 0.82rem; font-weight: 650; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); }
.dv-award .dv-chip { margin-left: auto; }
.is-in .dv-stage-3 .dv-award > span:first-child { animation: dv-pick 12s var(--ease) infinite; }
@keyframes dv-pick { 0%, 42% { background: var(--surface); } 50%, 100% { background: var(--mint-soft); border-color: var(--mint); } }
.dv-done-stars { display: flex; gap: 6px; color: var(--butter-deep); }
.dv-done-stars svg { width: 30px; height: 30px; opacity: 0.25; transform: scale(0.7); }
.is-in .dv-stage-4 .dv-done-stars svg { animation: dv-star-on 12s var(--ease) infinite; animation-delay: calc(7.4s + var(--i) * 0.18s); }
@keyframes dv-star-on { 0% { opacity: 0.25; transform: scale(0.7); } 4%, 30% { opacity: 1; transform: scale(1.1); } 36%, 100% { opacity: 0.25; transform: scale(0.7); } }

/* ------------------------------------------- scene 3: stars centre stage */
.dv-stars-stage { background: var(--grad-hero); color: #fff; border-radius: clamp(20px, 3vw, 34px); padding: clamp(24px, 4vw, 48px); position: relative; overflow: hidden; }
.dv-stars-stage::before { content: ""; position: absolute; inset: auto -20% -50% -20%; height: 90%; background: radial-gradient(50% 60% at 50% 50%, rgba(255, 255, 255, 0.22), transparent 70%); }
.dv-stars-stage > * { position: relative; }
.dv-stars-grid { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .dv-stars-grid { grid-template-columns: 1fr 1fr; } }
.dv-wallet-big { background: rgba(255, 255, 255, 0.96); color: var(--ink); border-radius: 26px; padding: 22px; box-shadow: var(--shadow-deep); position: relative; }
.dv-wallet-ring { width: 150px; height: 150px; border-radius: 50%; margin: 6px auto 12px; display: grid; place-items: center; background: conic-gradient(var(--butter) calc(var(--p, 0) * 1%), var(--butter-soft) 0); position: relative; }
.dv-wallet-ring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
.dv-wallet-ring strong { position: relative; z-index: 1; font-size: 2.3rem; letter-spacing: -0.03em; color: var(--butter-deep); display: flex; align-items: center; gap: 6px; }
.dv-wallet-ring strong svg { width: 26px; height: 26px; }
.is-in .dv-wallet-ring { animation: dv-ring 9s var(--ease) infinite; }
@keyframes dv-ring { 0%, 30% { --p: 48; } 45%, 100% { --p: 60; } }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.dv-wallet-big .dv-row { background: var(--bg); }
.dv-star-src { position: absolute; left: 22px; top: 22px; }
.dv-sflight { position: absolute; inset: 0; pointer-events: none; }
.dv-sflight span { position: absolute; width: 20px; height: 20px; color: var(--butter-deep); opacity: 0; left: 0; top: 0;
  offset-path: path("M 60 60 C 90 -10, 200 -10, 215 80"); offset-rotate: 0deg; }
.dv-sflight span svg { width: 20px; height: 20px; }
.is-in .dv-sflight span { animation: dv-offset 1.3s var(--ease) infinite; animation-duration: 9s; animation-name: dv-sfly; animation-delay: calc(2.4s + var(--i) * 0.16s); }
@keyframes dv-sfly { 0%, 26% { offset-distance: 0%; opacity: 0; transform: scale(0.5); } 30% { opacity: 1; transform: scale(1.1); } 42% { offset-distance: 100%; opacity: 0; transform: scale(0.8); } 100% { offset-distance: 100%; opacity: 0; } }
.dv-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-shop-card { background: rgba(255, 255, 255, 0.96); color: var(--ink); border-radius: 18px; padding: 14px; display: flex; gap: 12px; align-items: center; opacity: 0; transform: rotateY(60deg); transform-origin: left; }
.is-in .dv-shop-card { animation: dv-flip 9s var(--ease) infinite; animation-delay: calc(4.6s + var(--i) * 0.14s); }
@keyframes dv-flip { 0%, 48% { opacity: 0; transform: rotateY(60deg); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.dv-shop-card .dv-feat-icon { margin: 0; width: 40px; height: 40px; border-radius: 12px; }
.dv-shop-card b { display: block; font-size: 0.92rem; } .dv-shop-card small { color: var(--muted); font-size: 0.78rem; }
.dv-shop-card .dv-chip { margin-left: auto; }
.dv-shop-card.is-picked .dv-chip-req { opacity: 0; }
.is-in .dv-shop-card.is-picked .dv-chip-req { animation: dv-req 9s var(--ease) infinite; }
@keyframes dv-req { 0%, 72% { opacity: 0; } 78%, 92% { opacity: 1; } 100% { opacity: 0; } }
.dv-stars-copy h2, .dv-stars-copy .dv-kicker { color: #fff; } .dv-stars-copy .dv-kicker { opacity: 0.75; }
.dv-stars-copy p, .dv-stars-copy li { color: rgba(255, 255, 255, 0.86); } .dv-stars-copy .dv-list svg { color: var(--butter); }
.dv-app .dv-reward-art { width: min(44%, 210px); height: auto; margin-top: 10px; filter: drop-shadow(0 18px 30px rgba(30, 15, 60, 0.45)); }
.is-in .dv-reward-art { animation: dv-bob 5s ease-in-out infinite; }
.dv-app .dv-stage-art-reward { position: relative; }
.dv-app .dv-stage-art-reward > img { position: absolute; height: 86%; width: auto; left: 50%; top: 7%; transform: translateX(-50%); }
.dv-stage-art-reward .dv-done-stars { position: absolute; bottom: 8px; right: 10px; }

/* ------------------------------------------- scene 4: shopping pantry */
.dv-shop-scene { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .dv-shop-scene { grid-template-columns: 1.1fr 0.9fr; } }
.dv-pantry { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-float); aspect-ratio: 4 / 3; }
.dv-pantry > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-pantry .dv-pantry-svg { position: absolute; inset: 0; }
/* rendered groceries: each sits on a shelf and, in turn, hops down into the basket.
   `bottom` carries the drop (the basket mouth is ~14% up the render) so an item lands
   in the basket whichever shelf it left; transform only scales. */
.dv-app .dv-pitem-img { position: absolute; width: auto !important; filter: drop-shadow(0 6px 8px rgba(60, 40, 90, 0.3)); transform-origin: 50% 100%; }
.is-in .dv-pitem-img { animation: dv-hop-img 10s var(--ease) infinite; animation-delay: var(--delay, 0s); }
@keyframes dv-hop-img { 0% { bottom: var(--rest); transform: none; opacity: 1; } 8% { bottom: calc(var(--rest) + 5%); transform: scale(1.06); } 20% { bottom: 14%; transform: scale(0.55); opacity: 0; } 80% { bottom: 14%; transform: scale(0.55); opacity: 0; } 90%, 100% { bottom: var(--rest); transform: none; opacity: 1; } }
.dv-app .dv-pantry-svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(60, 40, 90, 0.25)); }
.dv-pitem { transform-box: fill-box; transform-origin: center; }
.is-in .dv-pitem[data-item="milk"] { animation: dv-hop 10s var(--ease) infinite; animation-delay: 0.6s; }
.is-in .dv-pitem[data-item="bread"] { animation: dv-hop 10s var(--ease) infinite; animation-delay: 1.5s; }
.is-in .dv-pitem[data-item="apples"] { animation: dv-hop 10s var(--ease) infinite; animation-delay: 2.4s; }
.is-in .dv-pitem[data-item="oats"] { animation: dv-hop 10s var(--ease) infinite; animation-delay: 3.3s; }
@keyframes dv-hop { 0% { transform: none; opacity: 1; } 8% { transform: translateY(-22px) scale(1.08); } 20% { transform: translateY(150px) scale(0.55); opacity: 0; } 80% { transform: translateY(150px) scale(0.55); opacity: 0; } 90%, 100% { transform: none; opacity: 1; } }
.dv-list-ui .dv-row { opacity: 0.55; }
.is-in .dv-list-ui .dv-row { animation: dv-tick 10s var(--ease) infinite; animation-delay: calc(0.9s + var(--i) * 0.9s); }
@keyframes dv-tick { 0%, 4% { opacity: 0.55; } 10%, 80% { opacity: 1; background: var(--mint-soft); } 90%, 100% { opacity: 0.55; background: var(--bg); } }
.is-in .dv-list-ui .dv-row .dv-check { animation: dv-tick-check 10s var(--ease) infinite; animation-delay: calc(0.9s + var(--i) * 0.9s); }
@keyframes dv-tick-check { 0%, 8% { background: var(--surface); border-color: var(--border); } 12%, 82% { background: var(--mint-deep); border-color: var(--mint-deep); } 90%, 100% { background: var(--surface); border-color: var(--border); } }
.is-in .dv-list-ui .dv-row .dv-check svg { animation: dv-tick-svg 10s var(--ease) infinite; animation-delay: calc(0.9s + var(--i) * 0.9s); }
@keyframes dv-tick-svg { 0%, 8% { opacity: 0; } 12%, 82% { opacity: 1; } 90%, 100% { opacity: 0; } }
.dv-price-pop { display: inline-flex; align-items: center; gap: 8px; background: var(--mint-soft); color: var(--mint-deep); border-radius: var(--pill); padding: 8px 14px; font-weight: 700; font-size: 0.9rem; margin-top: 12px; }

/* ------------------------------------------- scene 5: meals fan */
.dv-meals { position: relative; min-height: 300px; }
.dv-meal-fan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .dv-meal-fan { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dv-meal-card:nth-child(n+5) { display: none; } }
.dv-meal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px 10px; box-shadow: var(--shadow); min-height: 140px; display: flex; flex-direction: column; gap: 8px; transform: rotate(calc((var(--i) - 3) * 9deg)) translateY(calc(abs(var(--i) - 3) * 18px)); opacity: 0; }
.is-in .dv-meal-card { animation: dv-fan 11s var(--ease) infinite; animation-delay: calc(var(--i) * 0.08s); }
@keyframes dv-fan { 0% { opacity: 0; transform: rotate(calc((var(--i) - 3) * 9deg)) translateY(calc(abs(var(--i) - 3) * 18px)); } 10%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(14px); } }
.dv-meal-card b { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; } .dv-meal-card strong { font-size: 0.86rem; line-height: 1.25; }
.dv-meal-plate { width: 44px; height: 44px; border-radius: 50%; background: var(--c); margin: 2px 0; position: relative; }
.dv-meal-plate::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); opacity: 0.65; }
.dv-ingr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dv-ingr span { background: var(--surface); border: 1px solid var(--border); border-radius: var(--pill); padding: 6px 12px; font-size: 0.82rem; font-weight: 600; opacity: 0; transform: translateY(-16px); }
.is-in .dv-ingr span { animation: dv-ingr 11s var(--ease) infinite; animation-delay: calc(1.2s + var(--i) * 0.1s); }
@keyframes dv-ingr { 0%, 10% { opacity: 0; transform: translateY(-16px); } 16%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.dv-tray { margin-top: 10px; background: var(--mint-soft); border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: var(--mint-deep); font-weight: 650; opacity: 0; }
.is-in .dv-tray { animation: dv-ingr 11s var(--ease) infinite; animation-delay: 2.4s; }
.dv-tray svg { width: 20px; height: 20px; }

/* ------------------------------------------- scene 6: AI exchange */
.dv-ai { max-width: 620px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 18px; min-height: 330px; }
.dv-ai-input { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 14px; padding: 12px 14px; font-size: 0.95rem; min-height: 48px; }
.dv-ai-input svg { color: var(--plum); }
.dv-ai-type { flex: 1; } .dv-ai-type::after { content: "|"; color: var(--plum); animation: dv-caret 1s steps(2) infinite; }
@keyframes dv-caret { 50% { opacity: 0; } }
.dv-ai-think { display: inline-flex; gap: 5px; padding: 12px 14px; opacity: 0; }
.dv-ai-think i { width: 8px; height: 8px; border-radius: 50%; background: var(--plum-2); animation: dv-bob 0.9s ease-in-out infinite; }
.dv-ai-think i:nth-child(2) { animation-delay: 0.15s; } .dv-ai-think i:nth-child(3) { animation-delay: 0.3s; }
.dv-ai-draft { margin-top: 12px; border: 1px solid var(--lavender); border-radius: 16px; padding: 14px; background: var(--plum-soft); opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.dv-ai-draft.is-on { opacity: 1; transform: none; } .dv-ai-think.is-on { opacity: 1; }
.dv-ai-draft h4 { margin: 0 0 8px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; color: var(--plum); }
.dv-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dv-ai-actions span { padding: 8px 14px; border-radius: var(--pill); font-size: 0.85rem; font-weight: 650; background: var(--surface); border: 1px solid var(--border); }
.dv-ai-actions span.is-primary { background: var(--grad-primary); color: #fff; border-color: transparent; }
.dv-ai-actions span.is-hit { animation: dv-press 0.4s var(--ease); }
@keyframes dv-press { 50% { transform: scale(0.93); } }
.dv-ai-quota { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--muted); }
.dv-ai-quota b { color: var(--plum); }
.dv-ai-saved { display: none; align-items: center; gap: 8px; margin-top: 12px; color: var(--mint-deep); font-weight: 650; font-size: 0.9rem; }
.dv-ai-saved.is-on { display: flex; animation: dv-up 0.5s var(--ease) both; }

/* ------------------------------------------- scene 7: chat columns */
.dv-chat-scene { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .dv-chat-scene { grid-template-columns: 1.15fr 0.85fr; } .dv-chat-scene > :last-child { margin-top: 60px; } }
.dv-bubbles { display: grid; gap: 10px; }
.dv-bubble { max-width: 78%; padding: 10px 14px; border-radius: 18px; background: var(--bg); font-size: 0.92rem; opacity: 0; transform: translateY(10px) scale(0.96); display: flex; gap: 10px; align-items: flex-end; }
.dv-bubble.is-me { margin-left: auto; background: var(--plum); color: #fff; flex-direction: row-reverse; }
.dv-bubble small { display: block; font-size: 0.7rem; opacity: 0.7; margin-top: 3px; }
.dv-bubble .dv-avatar { width: 28px; height: 28px; font-size: 0.72rem; box-shadow: none; }
.is-in .dv-bubble { animation: dv-bubble 12s var(--ease) infinite; animation-delay: calc(var(--i) * 1.1s); }
@keyframes dv-bubble { 0% { opacity: 0; transform: translateY(10px) scale(0.96); } 6%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
/* the slide-in starts 30px to the right; without this clip that 30px pokes past
   the page edge on phones and tablets (measured: exactly 10px of overflow) */
.dv-notices { overflow: hidden; padding: 6px; margin: -6px; }
.dv-notice { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-float); font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; opacity: 0; transform: translateX(30px); }
.dv-notice small { display: block; color: var(--muted); font-weight: 500; font-size: 0.78rem; }
.is-in .dv-notice { animation: dv-notice 12s var(--ease) infinite; animation-delay: calc(2.5s + var(--i) * 1.6s); }
@keyframes dv-notice { 0%, 2% { opacity: 0; transform: translateY(12px); } 8%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.dv-lockrow { background: var(--plum-soft); color: var(--plum); border-radius: 12px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; font-size: 0.85rem; font-weight: 650; }

/* ------------------------------------------- scene 8: privacy radial */
.dv-priv { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .dv-priv { grid-template-columns: 1fr 1fr; } }
.dv-orbit { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 0 auto; }
.dv-orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--lavender); }
.dv-orbit::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; background: var(--grad-welcome); box-shadow: var(--shadow); }
.dv-orbit-core { position: absolute; inset: 24%; display: grid; place-items: center; text-align: center; z-index: 1; font-weight: 700; font-size: 0.95rem; }
.dv-orbit-core svg { width: 34px; height: 34px; color: var(--plum); }
.dv-orbit-core small { display: block; font-weight: 500; color: var(--muted); font-size: 0.78rem; }
.dv-orb { position: absolute; width: 64px; height: 64px; margin: -32px; left: calc(50% + var(--r) * cos(var(--a))); top: calc(50% + var(--r) * sin(var(--a))); display: grid; place-items: center; z-index: 2; }
.dv-orb .dv-avatar { width: 48px; height: 48px; }
.dv-orb i { position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: grid; place-items: center; color: var(--muted); font-style: normal; }
.dv-orb i svg { width: 12px; height: 12px; }
.dv-perm-table { display: grid; gap: 8px; }
.dv-perm { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 0.88rem; }
.dv-perm span { font-weight: 600; }
.dv-tog { width: 38px; height: 22px; border-radius: 11px; background: var(--border); position: relative; transition: background 0.3s var(--ease); }
.dv-tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.3s var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.dv-tog.is-on { background: var(--mint-deep); } .dv-tog.is-on::after { transform: translateX(16px); }
.is-in .dv-tog[data-flip] { animation: dv-tog 10s var(--ease) infinite; animation-delay: calc(var(--i) * 0.6s); }
.is-in .dv-tog[data-flip]::after { animation: dv-tog-knob 10s var(--ease) infinite; animation-delay: calc(var(--i) * 0.6s); }
@keyframes dv-tog { 0%, 40% { background: var(--border); } 48%, 100% { background: var(--mint-deep); } }
@keyframes dv-tog-knob { 0%, 40% { transform: none; } 48%, 100% { transform: translateX(16px); } }
.dv-perm-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; padding: 0 12px; font-size: 0.72rem; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
.dv-perm-head .dv-avatar { width: 30px; height: 30px; font-size: 0.72rem; box-shadow: none; }

/* ============================================================ day story */

.dv-story { position: relative; }
/* 50vh of scroll per beat (was 100vh): the sun still crosses, the beats still land, with half the travel */
.dv-story-track { position: relative; height: calc(var(--beats) * 50vh); }
.dv-story-stage { position: sticky; top: var(--head-h); height: min(calc(100vh - var(--head-h)), 640px); display: grid; align-items: center; overflow: hidden; padding: 24px 0; }
.dv-story-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #efe6fb, #fbe8dc); transition: background 1.2s var(--ease); }
.dv-story[data-beat="5"] .dv-story-sky, .dv-story[data-beat="6"] .dv-story-sky { background: var(--grad-night); }
.dv-story[data-beat="4"] .dv-story-sky { background: linear-gradient(180deg, #f8cfb2, #e0624e); }
.dv-story-sun { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 60px 20px rgba(245, 217, 138, 0.5); left: calc(8% + var(--prog, 0) * 84%);
  top: 24%; /* fallback for engines without CSS trig; the arc below wins where supported */
  top: calc(62% - sin(var(--prog, 0) * 3.14159rad) * 50%); transition: left 0.4s linear, top 0.4s linear, background 1s; }
.dv-story[data-beat="5"] .dv-story-sun, .dv-story[data-beat="6"] .dv-story-sun { background: var(--surface); box-shadow: 0 0 50px 14px rgba(255, 255, 255, 0.35); }
.dv-story-hills { position: absolute; left: -10%; right: -10%; bottom: -8%; height: 36%; background: radial-gradient(60% 100% at 20% 100%, var(--mint) 0, transparent 70%), radial-gradient(60% 100% at 85% 100%, var(--mint-soft) 0, transparent 70%); opacity: 0.9; }
.dv-story[data-beat="5"] .dv-story-hills, .dv-story[data-beat="6"] .dv-story-hills { filter: brightness(0.55) saturate(0.6); }
.dv-story-in { position: relative; display: grid; gap: clamp(18px, 3vw, 36px); }
@media (min-width: 900px) { .dv-story-in { grid-template-columns: 0.8fr 1.2fr; align-items: center; } }
.dv-story-head h2 { margin-bottom: 8px; } .dv-story-head .dv-kicker { margin-bottom: 8px; }
.dv-story[data-beat="5"] .dv-story-head, .dv-story[data-beat="6"] .dv-story-head { color: #fff; }
.dv-story[data-beat="5"] .dv-story-head .dv-kicker, .dv-story[data-beat="6"] .dv-story-head .dv-kicker { color: var(--lavender); }
.dv-story-head p { color: inherit; opacity: 0.8; max-width: 30em; }
.dv-beats { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dv-beat-btn { font: inherit; font-size: 0.85rem; font-weight: 650; border-radius: var(--pill); padding: 8px 13px; border: 1px solid rgba(60, 40, 90, 0.18); background: rgba(255, 255, 255, 0.6); color: var(--ink); cursor: pointer; transition: background 0.2s, color 0.2s; }
.dv-beat-btn[aria-current="step"] { background: var(--plum); color: #fff; border-color: transparent; }
.dv-story[data-beat="5"] .dv-beat-btn, .dv-story[data-beat="6"] .dv-beat-btn { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.dv-story[data-beat="5"] .dv-beat-btn[aria-current="step"], .dv-story[data-beat="6"] .dv-beat-btn[aria-current="step"] { background: #fff; color: var(--plum); }
.dv-story-card { background: var(--surface); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-deep); padding: clamp(16px, 2.4vw, 26px); min-height: clamp(340px, calc(100vh - var(--head-h) - 110px), 530px); position: relative; }
/* each beat pairs its UI with the matching render, so the card is full rather than a strip of rows in white space */
.dv-beat.is-on { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .dv-beat.is-on { grid-template-columns: 1.1fr 0.9fr; } }
.dv-beat-art { width: 100%; height: auto; max-height: 300px; object-fit: contain; border-radius: 18px; justify-self: center; filter: drop-shadow(0 14px 24px rgba(45, 28, 75, 0.2)); }
.dv-beat-art.is-photo { object-fit: cover; height: 100%; max-height: 320px; }
@media (max-width: 899px) { .dv-beat-art { max-height: 180px; } }
.dv-story-card .dv-row { font-size: 0.95rem; padding: 12px 13px; }
.dv-story-hint { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 0.85rem; font-weight: 650; color: inherit; opacity: 0.85; }
.dv-story-hint svg { width: 16px; height: 16px; animation: dv-nudge 1.6s ease-in-out infinite; }
.dv-story-hint b { font-weight: 750; background: rgba(255, 255, 255, 0.55); color: var(--plum); border-radius: var(--pill); padding: 2px 10px; }
.dv-story[data-beat="5"] .dv-story-hint b, .dv-story[data-beat="6"] .dv-story-hint b { background: rgba(255, 255, 255, 0.18); color: #fff; }
@keyframes dv-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.dv-beat { display: none; }
.dv-beat.is-on { display: block; animation: dv-up 0.55s var(--ease) both; }
.dv-beat-cap { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dv-beat-cap .dv-feat-icon { margin: 0; width: 38px; height: 38px; border-radius: 11px; } .dv-beat-cap .dv-feat-icon svg { width: 20px; height: 20px; }
.dv-beat-cap h3 { margin: 0; font-size: 1.1rem; } .dv-beat-cap small { color: var(--muted); }
.dv-beat-note { color: var(--muted); font-size: 0.92rem; margin: 14px 0 0; }
.dv-story-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(60, 40, 90, 0.12); }
.dv-story-prog i { display: block; height: 100%; background: var(--grad-primary); width: calc(var(--prog, 0) * 100%); }
.dv-beat .dv-stars-fly { position: relative; height: 56px; margin: 6px 0 2px; }
.dv-beat .dv-stars-fly svg { position: absolute; width: 22px; height: 22px; color: var(--butter-deep); opacity: 0; left: 0; top: 0;
  offset-path: path("M 8 44 C 60 -20, 150 -20, 220 10"); offset-rotate: 0deg; }
.dv-beat.is-on .dv-stars-fly svg { animation: dv-offset 1.5s var(--ease) forwards; }
.dv-beat.is-on .dv-stars-fly svg:nth-child(2) { animation-delay: 0.14s; } .dv-beat.is-on .dv-stars-fly svg:nth-child(3) { animation-delay: 0.28s; } .dv-beat.is-on .dv-stars-fly svg:nth-child(4) { animation-delay: 0.42s; }
.dv-wallet { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: var(--pill); background: var(--butter-soft); color: var(--butter-deep); font-weight: 700; }
.dv-wallet svg { width: 20px; height: 20px; }
.dv-story.is-static .dv-story-track { height: auto; }
.dv-story.is-static .dv-story-stage { position: relative; height: auto; top: auto; padding: 40px 0; }
.dv-story.is-static .dv-beat { display: block; margin-bottom: 18px; animation: none; }
.dv-story.is-static .dv-story-sun { display: none; }

/* ============================================================== trust */

.dv-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.dv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.dv-card h3 { font-size: 1.1rem; } .dv-card p { color: var(--muted); margin-bottom: 0; font-size: 0.97rem; }
.dv-card .dv-feat-icon { width: 40px; height: 40px; border-radius: 12px; } .dv-card .dv-feat-icon svg { width: 21px; height: 21px; }
.dv-cta { text-align: center; background: var(--grad-welcome); border: 1px solid var(--border); border-radius: clamp(20px, 3vw, 34px); padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px); position: relative; overflow: hidden; }
.dv-cta p { color: var(--muted); max-width: 34em; margin-inline: auto; } .dv-cta .dv-hero-cta { justify-content: center; }
.dv-app .dv-cta-art { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 62%; object-fit: cover; object-position: left center; pointer-events: none; opacity: 0.9;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
.dv-cta > :not(.dv-cta-art) { position: relative; }
@media (max-width: 760px) { .dv-app .dv-cta-art { max-width: 100%; opacity: 0.35; -webkit-mask-image: none; mask-image: none; } }

/* ============================================================== footer */

.dv-foot { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding: 46px 0 34px; margin-top: clamp(40px, 6vw, 80px); }
.dv-foot a { color: #fff; }
.dv-foot-in { display: flex; flex-wrap: wrap; gap: 20px 34px; align-items: center; }
.dv-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; font-size: 0.93rem; }
.dv-foot small { display: block; width: 100%; font-size: 0.85rem; opacity: 0.6; margin-top: 10px; }

/* =============================================================== guide */

.dv-guide-top { position: relative; overflow: hidden; background: var(--grad-welcome); padding: clamp(34px, 5vw, 66px) 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--border); }
.dv-guide-top-in { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .dv-guide-top-in { grid-template-columns: 1.1fr 0.9fr; } }
.dv-app .dv-guide-art { width: 100%; height: auto; max-width: 440px; margin-inline: auto; filter: drop-shadow(0 20px 40px rgba(60, 40, 90, 0.16)); }
.dv-app img.dv-guide-art { border-radius: 26px; display: block; }
.dv-play img.dv-guide-art { animation: dv-house-in 1s var(--ease) 0.2s both; opacity: 0; transform: translateY(30px); }
.dv-guide-grid { display: grid; gap: 34px; padding: clamp(28px, 4vw, 52px) 0; }
@media (min-width: 950px) { .dv-guide-grid { grid-template-columns: 250px 1fr; align-items: start; } }
.dv-toc { position: sticky; top: calc(var(--head-h) + 20px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.dv-toc h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; }
.dv-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dv-toc a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 0.93rem; color: var(--muted); font-weight: 550; }
.dv-toc a i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex: none; transition: background 0.2s, transform 0.2s; }
.dv-toc a:hover, .dv-toc a.is-here { background: var(--plum-soft); color: var(--plum); text-decoration: none; }
.dv-toc a.is-here i { background: var(--plum); transform: scale(1.3); }
@media (max-width: 949px) { .dv-toc { position: static; } }
.dv-doc { max-width: 46em; }
.dv-doc section { scroll-margin-top: calc(var(--head-h) + 22px); padding-bottom: 14px; }
.dv-doc section + section { margin-top: 42px; padding-top: 34px; border-top: 1px solid var(--border); }
.dv-doc h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); display: flex; align-items: center; gap: 12px; }
.dv-doc h2 .dv-feat-icon { margin: 0; width: 40px; height: 40px; border-radius: 12px; flex: none; } .dv-doc h2 .dv-feat-icon svg { width: 21px; height: 21px; }
.dv-doc h3 { font-size: 1.1rem; margin-top: 26px; }
.dv-doc ol, .dv-doc ul { padding-left: 1.25em; margin: 0 0 1em; } .dv-doc li { margin-bottom: 7px; } .dv-doc li::marker { color: var(--plum-2); }
.dv-note { background: var(--sky-soft); border: 1px solid #cfe2f7; border-left: 4px solid #5e9ad6; border-radius: var(--radius-sm); padding: 14px 16px; margin: 16px 0; font-size: 0.95rem; }
.dv-note.dv-warn { background: var(--butter-soft); border-color: #eedaa4; border-left-color: var(--butter-deep); }
.dv-note p:last-child { margin-bottom: 0; }
.dv-faq { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.dv-faq summary { padding: 15px 18px; cursor: pointer; font-weight: 650; list-style: none; display: flex; gap: 12px; align-items: center; }
.dv-faq summary::-webkit-details-marker { display: none; }
.dv-faq summary::after { content: "+"; margin-left: auto; color: var(--plum); font-size: 1.3rem; line-height: 1; }
.dv-faq[open] summary::after { content: "\2212"; }
.dv-faq .dv-faq-body { padding: 0 18px 16px; color: var(--muted); } .dv-faq .dv-faq-body p:last-child { margin-bottom: 0; }

/* diagrams and the interactive demo in the guide */
.dv-flow { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 16px 0 22px; position: relative; }
.dv-flow-step { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; text-align: center; font-size: 0.85rem; position: relative; box-shadow: var(--shadow); }
.dv-flow-step .dv-feat-icon { width: 40px; height: 40px; border-radius: 12px; margin: 0 auto 8px; }
.dv-flow-step b { display: block; font-size: 0.9rem; margin-bottom: 2px; } .dv-flow-step small { color: var(--muted); }
.dv-flow-step::after { content: ""; position: absolute; right: -12px; top: 50%; width: 0; height: 0; border: 6px solid transparent; border-left-color: var(--lavender); transform: translateY(-50%); }
.dv-flow-step:last-child::after { display: none; }
.dv-flow-step.is-who-child { border-top: 3px solid var(--coral); } .dv-flow-step.is-who-parent { border-top: 3px solid var(--plum); }
.dv-flow-key { display: flex; gap: 16px; font-size: 0.8rem; color: var(--muted); margin: -10px 0 18px; }
.dv-flow-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.dv-demo { background: var(--grad-welcome); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin: 18px 0 8px; }
.dv-demo h4 { margin: 0 0 4px; font-size: 1rem; } .dv-demo > p { color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; }
.dv-demo-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dv-demo-row .dv-btn { padding: 9px 16px; font-size: 0.88rem; }
.dv-demo-status { font-size: 0.9rem; font-weight: 600; margin-top: 10px; min-height: 1.4em; }
.dv-demo .dv-wallet { transition: transform 0.3s var(--ease-pop); } .dv-demo .dv-wallet.is-bump { transform: scale(1.12); }
.dv-shot { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin: 16px 0; }
.dv-shot figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 10px; }

/* ======================================================= v5 responsive repair
   Root cause of the phone clipping: single-column grids (.dv-stars-grid, .dv-shop-scene, ...) had NO template, so their implicit column
   was sized to the widest item's max-content (the 2-column reward shop) and the whole panel grew wider than the screen, where the
   rounded panel's overflow:hidden then cut the heading, bullets and wallet. Below the desktop breakpoints every one of these grids is now an
   explicit single column that can shrink (minmax(0,1fr)), and their children may shrink (min-width:0). Nothing is hidden with overflow-x. */
@media (max-width: 899px) {
  .dv-app .dv-stars-grid, .dv-app .dv-shop-scene, .dv-app .dv-chat-scene, .dv-app .dv-priv, .dv-app .dv-story-in, .dv-app .dv-beat.is-on, .dv-app .dv-guide-top-in, .dv-app .dv-bubbles, .dv-app .dv-perm-table { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 949px) { .dv-app .dv-guide-grid { grid-template-columns: minmax(0, 1fr); } }
.dv-app .dv-stars-grid > *, .dv-app .dv-shop-scene > *, .dv-app .dv-chat-scene > *, .dv-app .dv-priv > *, .dv-app .dv-story-in > *, .dv-app .dv-beat > *, .dv-app .dv-guide-top-in > *, .dv-app .dv-guide-grid > *, .dv-app .dv-shop > *, .dv-app .dv-week > *, .dv-app .dv-meal-fan > *, .dv-app .dv-steps-grid > * { min-width: 0; }
.dv-app .dv-stars-copy, .dv-app .dv-stars-copy * { overflow-wrap: break-word; }
.dv-app .dv-shop-card > div, .dv-app .dv-ev, .dv-app .dv-day span, .dv-app .dv-meal-card, .dv-app .dv-perm > * { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 700px) { .dv-app .dv-scene-cal { padding: 14px 12px; } .dv-app .dv-week { gap: 6px; } .dv-app .dv-day { padding: 8px 5px; } .dv-app .dv-day b { font-size: 0.66rem; } .dv-app .dv-ev { font-size: 0.7rem; padding: 5px 6px; } .dv-app .dv-ev small { font-size: 0.64rem; } }
@media (max-width: 560px) { .dv-app .dv-steps-grid { grid-template-columns: minmax(0, 1fr); } .dv-app .dv-award > span { flex-wrap: wrap; } }
@media (max-width: 479px) {
  .dv-app .dv-stars-stage { padding: 22px 16px; }
  .dv-app .dv-shop { grid-template-columns: minmax(0, 1fr); }
  .dv-app .dv-wallet-big { padding: 16px; }
  .dv-app .dv-perm, .dv-app .dv-perm-head { gap: 6px; padding-inline: 8px; }
}

/* day cards and meal cards: three columns on phones so a word such as "Swimming" or "traybake" is never broken mid-word */
@media (max-width: 479px) {
  .dv-app .dv-week { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dv-app .dv-day:nth-child(n+4) { display: none; }
  .dv-app .dv-meal-fan { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dv-app .dv-meal-card:nth-child(n+4) { display: none; }
}
/* the seven-step story lives in ONE sticky screen that clips its overflow, so on phones everything in it is compacted until the tallest beat fits */
@media (max-width: 899px) {
  .dv-app .dv-story-stage { padding: 10px 0; }
  .dv-app .dv-story-in { gap: 10px; }
  .dv-app .dv-story-head h2 { font-size: 1.45rem; margin-bottom: 4px; }
  .dv-app .dv-story-head .dv-kicker { margin-bottom: 4px; }
  .dv-app .dv-story-head p:not(.dv-story-hint) { display: none; }
  .dv-app .dv-story-hint { margin-top: 6px; }
  .dv-app .dv-beats { gap: 5px; margin-top: 8px; }
  .dv-app .dv-beat-btn { font-size: 0.74rem; padding: 5px 9px; }
  .dv-app .dv-story-card { min-height: 0; padding: 12px; }
  .dv-app .dv-beat.is-on { gap: 8px; }
  .dv-app .dv-beat-cap { margin-bottom: 8px; }
  .dv-app .dv-beat-art { max-height: 84px; }
  .dv-app .dv-beat-note { font-size: 0.82rem; margin-top: 8px; }
  .dv-app .dv-story-card .dv-row { font-size: 0.86rem; padding: 8px 10px; }
}

@media (max-width: 899px) and (max-height: 640px) {
  .dv-app .dv-beat-art { display: none; } .dv-app .dv-story-hint { display: none; } .dv-app .dv-story-head h2 { font-size: 1.25rem; }
  .dv-app .dv-beat-note { margin-top: 6px; font-size: 0.78rem; } .dv-app .dv-story-card { padding: 10px; }
}

/* the "Tidy the bedroom approved" tag is pinned over the ring's corner on a wide card; on phones the ring fills the width, so it flows above it instead of covering the ring */
@media (max-width: 899px) { .dv-app .dv-star-src { position: static; display: inline-flex; margin: 0 0 8px; max-width: 100%; } }

/* ======================================================= reduced motion */

@media (prefers-reduced-motion: reduce) {
  .dv-app *, .dv-app *::before, .dv-app *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .dv-rise, .dv-hero-copy > *, .dv-layer-house .dv-house, .dv-person, .dv-chip-ui, .dv-ev, .dv-stage-card, .dv-shop-card, .dv-meal-card, .dv-ingr span, .dv-tray, .dv-bubble, .dv-notice, .dv-ai-draft, .dv-ai-think, .dv-guide-art .dv-house-sm { opacity: 1 !important; transform: none !important; }
  .dv-flight, .dv-sflight, .dv-stars-fly { display: none; }
  .dv-check svg { opacity: 1; } .dv-list-ui .dv-row { opacity: 1; }
  .dv-wallet-ring { --p: 60; }
  .dv-tog[data-flip] { background: var(--mint-deep); } .dv-tog[data-flip]::after { transform: translateX(16px); }
  .dv-done-stars svg { opacity: 1; transform: none; }
  .dv-steps-grid::after { width: 88%; }
  .dv-sock { opacity: 0; }
  .dv-pitem-img { animation: none !important; transform: none !important; opacity: 1 !important; }
  .dv-ai-type::after { display: none; }
}