/* ── Live product demo ─────────────────────────────────────────────────────
   The hero's app window and the "receipt to budget" story are built in HTML,
   not screenshots or video: sharp at any size, a few KB, and they move.
   Motion is transform/opacity only. demo.js drives the timed steps; scroll
   drift on the collage is a progressive enhancement (scroll-driven
   animations), so browsers without it simply show the cards still.
   ------------------------------------------------------------------------ */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --app-deep: #2E0068;
  --app-ink: #1C1B1A;
  --app-muted: #6E6A64;
  --app-page: #EEEDEA;
  --app-line: #E4E2DE;
  --app-paid: #2B0069;
  --app-topay: #74005E;
  --app-left: #ECE6F6;
  --app-kitchen: #536B88;
  --app-kitchen-2: #A9B6C8;
  --app-kitchen-3: #DCE2EA;
}

/* ── Hero stage ─────────────────────────────────────────────────────────── */
.demo {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 52px 40px 80px;
  font-family: var(--sans);
  color: var(--app-ink);
}

/* Collage: an outer wrapper enters on load, the inner card drifts on scroll,
   so the two animations never fight over the same property. */
.demo-card {
  position: absolute;
  z-index: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.demo.is-in .demo-card { opacity: 1; transform: none; }
.demo-card > div {
  rotate: var(--r, 0deg);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .14);
  overflow: hidden;
  background: #fff;
}
.demo-card img { display: block; width: 100%; height: auto; }

.demo-photo { --r: 5deg; top: 0; right: -34px; width: 30%; }
.demo-before { --r: -6deg; top: 38%; left: -44px; width: 24%; }
.demo-quote { --r: -4deg; bottom: 0; right: -24px; width: 26%; }
.demo-due { --r: 3deg; bottom: 18px; left: -20px; z-index: 2; }
.demo-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(17, 24, 39, .72); color: #fff;
  font: 600 11px/1 var(--sans); letter-spacing: .02em;
}
.demo-due > div { padding: 12px 14px; display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.demo-due b { display: block; font: 600 14px/1.25 var(--sans); }
.demo-due small { display: block; font: 400 12px/1.4 var(--sans); color: var(--app-muted); }
.demo-due .demo-date {
  display: grid; place-items: center; width: 40px; height: 44px; border-radius: 8px;
  background: #F3F0FA; color: var(--app-deep); font: 700 15px/1 var(--sans);
}
.demo-due .demo-date span { font: 600 10px/1 var(--sans); text-transform: uppercase; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .demo-card > div {
      animation: demo-drift linear both;
      animation-timeline: view();
      animation-range: exit -10% exit 70%;
    }
  }
}
@keyframes demo-drift {
  to { translate: var(--dx, 0) var(--dy, -60px); opacity: 0; }
}
.demo-photo { --dx: 60px; --dy: -90px; }
.demo-before { --dx: -70px; --dy: -40px; }
.demo-quote { --dx: 50px; --dy: 30px; }
.demo-due { --dx: -50px; --dy: 40px; }

/* ── App window ─────────────────────────────────────────────────────────── */
.dw {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  background: var(--app-page);
  border: 1px solid #DDDDF5;
  box-shadow: 0 30px 70px rgba(17, 24, 39, .18);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.demo.is-in .dw { opacity: 1; transform: none; }
.dw-chrome { display: flex; gap: 6px; padding: 10px 12px; background: #F7F6F4; border-bottom: 1px solid var(--app-line); }
.dw-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #D6D3CE; }
.dw-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--app-deep); color: #fff; font: 600 14px/1.2 var(--sans); }
.dw-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.dw-label { font: 500 11px/1 var(--sans); color: var(--app-muted); }
.dw-big { display: flex; align-items: baseline; gap: 8px; margin-top: -4px; }
.dw-big strong { font: 700 clamp(28px, 3.4vw, 38px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dw-big span, .dw-sub { font: 400 12px/1.3 var(--sans); color: var(--app-muted); }

/* Stacked layers scaled from the left, so the bar grows with a transform. */
.dw-stack { display: flex; gap: 4px; height: 26px; }
.dw-meter { position: relative; flex: 1; border-radius: 4px; overflow: hidden; background: var(--app-left); }
.dw-meter i {
  position: absolute; inset: 0; transform-origin: left center;
  transform: scaleX(var(--f)); transition: transform 900ms var(--ease-in-out);
}
.dw-meter .m-topay { background: var(--app-topay); }
.dw-meter .m-paid { background: var(--app-paid); }
.dw-buffer { width: 12%; border: 1.5px dashed #A9A39A; border-radius: 4px; }
.dw-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 11px/1.3 var(--sans); color: var(--app-muted); }
.dw-legend b { color: var(--app-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dw-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }

.dw-actions { display: flex; gap: 8px; }
.dw-btn { padding: 8px 12px; border-radius: 6px; border: 1px solid #CFCAC2; background: #fff; font: 600 12px/1 var(--sans); }
.dw-btn.is-primary { background: var(--app-deep); border-color: var(--app-deep); color: #fff; }
.dw-btn.is-pressed { transform: scale(0.96); transition: transform 120ms var(--ease-out); }

.dw-budget { background: #fff; border-radius: 10px; border: 1px solid var(--app-line); padding: 12px 14px 4px; }
.dw-budget-head { display: flex; align-items: center; gap: 8px; font: 700 14px/1.2 var(--sans); }
.dw-budget-head i { width: 10px; height: 10px; border-radius: 2px; background: var(--app-kitchen); }
.dw-budget .dw-sub { margin: 3px 0 9px; }
.dw-budget .dw-sub b { color: var(--app-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dw-budget .dw-meter { height: 12px; flex: none; background: var(--app-kitchen-3); }
.dw-budget .m-topay { background: var(--app-kitchen-2); }
.dw-budget .m-paid { background: var(--app-kitchen); }

.dw-rows { list-style: none; margin: 8px 0 0; padding: 0; }
.dw-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--app-line); font: 400 12.5px/1.3 var(--sans); }
.dw-row b { font-weight: 500; }
.dw-row small { color: var(--app-muted); font-size: 11px; }
.dw-row .amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dw-row .st { text-align: right; font-size: 11px; color: var(--app-muted); }

/* The new row opens with grid-template-rows (no transform equivalent for
   height; it runs once per page view, like an accordion). */
.dw-new { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--ease-out); }
.dw-new > div { overflow: hidden; }
.dw-new .dw-row { background: #F6F3FC; margin: 0 -14px; padding-left: 14px; padding-right: 14px; transition: background-color 1200ms ease 1500ms; }
.demo.is-adding .dw-new { grid-template-rows: 1fr; }
.demo.is-added .dw-new .dw-row { background-color: transparent; }
.dw-new .amt, .dw-new .st { opacity: 0; transform: translateY(4px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.demo.is-typed .dw-new .amt, .demo.is-typed .dw-new .st { opacity: 1; transform: none; }
.dw-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--app-deep); animation: dw-blink 1s steps(1) infinite; }
.demo.is-typed .dw-caret { display: none; }
@keyframes dw-blink { 50% { opacity: 0; } }

.dw-toast {
  position: absolute; z-index: 2; left: 50%; bottom: 14px;
  display: flex; gap: 8px; align-items: center; white-space: nowrap;
  padding: 9px 14px; border-radius: 8px; background: var(--app-deep); color: #fff;
  font: 500 12px/1 var(--sans);
  opacity: 0; transform: translate(-50%, 10px) scale(0.97);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.demo.is-toast .dw-toast { opacity: 1; transform: translate(-50%, 0); }

/* ── Story: receipt to budget ───────────────────────────────────────────── */
.story { padding: clamp(46px, 7vw, 84px) clamp(20px, 4.4vw, 56px); font-family: var(--sans); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); max-width: 1168px; margin: 0 auto; }
.story h2 { margin: 0 0 12px; font: 600 clamp(30px, 4vw, 46px)/1.08 var(--sans); letter-spacing: -.02em; }
.story-intro { margin: 0; max-width: 26em; font: 400 16px/1.65 var(--sans); color: #4B5563; }
.story-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 10px; max-width: 26em; opacity: .35; transition: opacity 400ms var(--ease-out); }
.story-copy { padding-bottom: 12vh; }
.story-step.is-active { opacity: 1; }
.story-step span { font: 600 13px/1 var(--sans); color: #4C4CBD; letter-spacing: .06em; }
.story-step h3 { margin: 0; font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--sans); letter-spacing: -.01em; }
.story-step p { margin: 0; font: 400 16px/1.65 var(--sans); color: #4B5563; }

.story-stage { position: sticky; top: 110px; align-self: start; height: min(560px, calc(100vh - 150px)); }
.sw {
  position: relative; height: 100%; border-radius: 14px; overflow: hidden;
  background: var(--app-page); border: 1px solid #DDDDF5; box-shadow: 0 30px 70px rgba(17, 24, 39, .14);
}
.sw .dw-head { gap: 8px; }
.sw-pill { padding: 3px 8px; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; font-size: 11px; font-weight: 500; }
.sw-body { position: absolute; inset: 41px 0 0; }

/* State 1: the photo, centred, with a scan line. 2: photo slides left,
   line items arrive. 3: they land in the Kitchen budget. */
.sw-photo {
  position: absolute; top: 6%; left: 50%; width: 46%;
  transform: translateX(-50%);
  transition: transform 700ms var(--ease-in-out);
  border-radius: 8px; overflow: hidden; background: #111; box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.sw-photo img { display: block; width: 100%; height: auto; }
.sw-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 28%;
  background: linear-gradient(180deg, rgba(76,76,189,0) 0%, rgba(142,144,255,.45) 100%);
  border-bottom: 2px solid #8E90FF;
  animation: sw-scan 1.8s var(--ease-in-out) infinite alternate;
}
@keyframes sw-scan { from { transform: translateY(-30%); } to { transform: translateY(290%); } }
.story[data-state="1"] .sw-photo { transform: translateX(-50%); }
.story:not([data-state="1"]) .sw-photo { transform: translateX(-102%); }
.story:not([data-state="1"]) .sw-scan { opacity: 0; transition: opacity 200ms ease; }

.sw-lines { position: absolute; top: 6%; right: 4%; width: 46%; display: flex; flex-direction: column; gap: 8px; }
.sw-merchant, .sw-line, .sw-done {
  background: #fff; border: 1px solid var(--app-line); border-radius: 8px; padding: 10px 12px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sw-merchant { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1.2 var(--sans); }
.sw-merchant small { padding: 3px 7px; border: 1px solid var(--app-line); border-radius: 4px; font: 500 10.5px/1 var(--sans); color: var(--app-muted); }
.sw-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font: 500 12px/1.3 var(--sans); }
.sw-line .amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.sw-chips { grid-column: 1 / -1; display: flex; gap: 6px; }
.sw-chips em { font-style: normal; padding: 3px 7px; border-radius: 4px; background: #F2F0EC; font-size: 10.5px; color: var(--app-muted); }
.sw-chips em.is-budget { background: #E8ECF2; color: #33465F; }
.story:not([data-state="1"]) .sw-merchant,
.story:not([data-state="1"]) .sw-line { opacity: 1; transform: none; }
.sw-lines > :nth-child(2) { transition-delay: 60ms; }
.sw-lines > :nth-child(3) { transition-delay: 120ms; }
.sw-lines > :nth-child(4) { transition-delay: 180ms; }

.sw-done { position: absolute; left: 6%; right: 6%; bottom: 6%; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.sw-done .dw-budget-head span { margin-left: auto; font: 600 12px/1 var(--sans); color: #1F7A4D; }
.sw-done .dw-meter { height: 12px; flex: none; background: var(--app-kitchen-3); }
.sw-done .m-topay { background: var(--app-kitchen-2); }
.sw-done .m-paid { background: var(--app-kitchen); }
.story[data-state="3"] .sw-done { opacity: 1; transform: none; }
.story[data-state="3"] .sw-line .is-budget { background: var(--app-kitchen); color: #fff; transition: background-color 300ms ease, color 300ms ease; }

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .demo-photo { right: -8px; }
  .demo-before { left: -14px; }
  .demo-quote { right: 0; }
  .demo-due { left: 0; }
}
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .story-copy { order: 2; }
  .story-stage { order: 1; top: 76px; z-index: 2; height: 42vh; min-height: 290px; margin-bottom: 24px; }
  .story-copy { padding-bottom: 30vh; }
  .story-step { min-height: 52vh; justify-content: flex-start; padding-top: 4vh; opacity: 1; }
}
/* Once the hero stacks to one column (landing.css, 960px) there is no room
   to collage: the window hides all but a sliver of each card, which reads as
   a glitch. Show the dashboard alone; the collage is a desktop flourish. */
@media (max-width: 960px) {
  .demo { padding: 8px 0 28px; }
  .demo-card { display: none; }
}
@media (max-width: 560px) {
  .dw-legend { font-size: 10.5px; }
  .sw-photo { width: 52%; }
  .sw-lines { width: 50%; right: 3%; }
  .sw-line { font-size: 11px; padding: 8px 9px; }
  .sw-chips { display: none; }
}

/* Gentler, not zero: keep the fades, drop the movement and the loop. */
@media (prefers-reduced-motion: reduce) {
  .demo-card, .dw, .sw-photo, .sw-merchant, .sw-line, .sw-done, .dw-toast, .dw-new .amt, .dw-new .st { transform: none !important; }
  .story:not([data-state="1"]) .sw-photo { transform: translateX(-102%) !important; }
  .story[data-state="1"] .sw-photo { transform: translateX(-50%) !important; }
  .dw-toast { transform: translateX(-50%) !important; }
  .sw-photo { transition: none; }
  .sw-scan, .dw-caret { animation: none; }
  .dw-meter i { transition-duration: 1ms; }
}

/* ── Devices: laptop for data entry, phone on site ─────────────────────────
   One composition sized in em, where 1em = 1% of the stage width (container
   query units), so it scales as a single picture at any width. The phone
   overlaps the laptop on desktop and sits larger below it on narrow screens.
   demo.js steps through the states; is-reset fades the screens out so the
   loop restarts without visibly undoing anything.
   ------------------------------------------------------------------------ */
.devices { padding: clamp(46px, 7vw, 84px) clamp(20px, 4.4vw, 56px); font-family: var(--sans); }
.devices-head { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.devices h2 { margin: 0 0 12px; font: 600 clamp(30px, 4vw, 46px)/1.08 var(--sans); letter-spacing: -.02em; }
.devices-head p { margin: 0; font: 400 16px/1.65 var(--sans); color: #4B5563; }
.devices-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; max-width: 880px; margin: clamp(24px, 3vw, 40px) auto 0; }
.devices-notes h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--sans); }
.devices-notes p { margin: 0; font: 400 15px/1.6 var(--sans); color: #4B5563; }

.dv { container-type: inline-size; max-width: 1000px; margin: 0 auto; }
.dv-stage { position: relative; font-size: 1cqw; height: 64em; }

/* Laptop */
.dv-laptop { position: absolute; left: 0; top: 0; width: 76em; }
.dv-lid { padding: 1.6em 1.6em 1.8em; border-radius: 2.2em 2.2em 0 0; background: #1F2430; box-shadow: 0 3em 6em rgba(17, 24, 39, .18); }
.dv-base { position: relative; height: 2.2em; margin: 0 -4em; border-radius: 0 0 2.4em 2.4em; background: linear-gradient(#D7D9DF, #B9BCC5); }
.dv-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 14em; height: .9em; transform: translateX(-50%); border-radius: 0 0 1em 1em; background: #A7AAB4; }
.dv-screen { position: relative; height: 44em; border-radius: .6em; overflow: hidden; background: var(--app-page); color: var(--app-ink); }
.dv-app, .dv-toast { font-size: 1.3em; }
.dv-app { display: grid; grid-template-columns: 3.4em 1fr; height: 100%; transition: opacity 300ms ease; }
.dv-side { background: #fff; border-right: 1px solid var(--app-line); display: flex; flex-direction: column; align-items: center; gap: 1.4em; padding-top: 1.6em; }
.dv-side i { width: 1.2em; height: 1.2em; border-radius: .25em; border: .14em solid #9C978F; }
.dv-side i.is-on { border-color: var(--app-deep); background: #ECE6F6; }
.dv-main { display: flex; flex-direction: column; min-width: 0; }
.dv-head { padding: .9em 1.4em; background: var(--app-deep); color: #fff; font-weight: 600; font-size: 1.05em; }
.dv-cols { display: grid; grid-template-columns: 1fr 19em; gap: 1.2em; padding: 1.2em 1.4em; flex: 1; min-height: 0; }
.dv-totals { display: flex; gap: 1.4em; margin-bottom: .8em; font-size: .9em; color: var(--app-muted); }
.dv-totals b { color: var(--app-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dv-list { background: #fff; border: 1px solid var(--app-line); border-radius: .7em; padding: 0 1.1em; }
.dv-row { display: grid; grid-template-columns: 1fr auto; gap: .1em 1em; padding: .8em 0; border-top: 1px solid var(--app-line); font-size: .92em; }
.dv-list > :first-child .dv-row, .dv-list > .dv-row:first-child { border-top: 0; }
.dv-row b { font-weight: 500; }
.dv-row small { color: var(--app-muted); font-size: .85em; }
.dv-row .amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dv-row .st { text-align: right; font-size: .85em; color: var(--app-muted); }

.dv-form { background: #fff; border: 1px solid var(--app-line); border-radius: .7em; padding: 1em 1.1em; display: flex; flex-direction: column; gap: .55em; font-size: .9em; }
.dv-form h4 { margin: 0 0 .2em; font-size: 1.05em; font-weight: 600; }
.dv-form label { color: var(--app-muted); font-size: .85em; }
.dv-field { min-height: 2.3em; padding: .5em .7em; border: 1px solid #CFCAC2; border-radius: .45em; background: #fff; white-space: nowrap; overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease; }
.dv-field.is-focus { border-color: var(--app-deep); box-shadow: 0 0 0 .2em rgba(46, 0, 104, .12); }
.dv-field .dv-caret { height: 1em; }
.dv-check { display: flex; gap: .5em; align-items: center; color: var(--app-muted); font-size: .9em; }
.dv-check i { width: 1em; height: 1em; border: .12em solid #A9A39A; border-radius: .2em; }
.dv-submit { margin-top: .3em; padding: .65em; border-radius: .45em; background: var(--app-deep); color: #fff; text-align: center; font-weight: 600; transition: transform 120ms var(--ease-out); }
.dv-submit.is-pressed { transform: scale(0.97); }

/* Phone */
.dv-phone { position: absolute; right: 0; top: 13em; width: 25em; padding: .9em; border-radius: 3.6em; background: #111827; box-shadow: 0 3em 6em rgba(17, 24, 39, .28); }
.dv-pscreen { position: relative; height: 48em; border-radius: 2.8em; overflow: hidden; background: var(--app-page); color: var(--app-ink); }
.dv-papp, .dv-banner, .dv-sheet { font-size: 1.25em; }
.dv-papp { height: 100%; transition: opacity 300ms ease; }
.dv-phead { padding: 2.6em 1.1em .8em; background: var(--app-deep); color: #fff; font-weight: 600; font-size: .95em; }
.dv-pbody { padding: 1em; display: flex; flex-direction: column; gap: .8em; }
.dv-left strong { display: block; font-size: 2em; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dv-left span { font-size: .8em; color: var(--app-muted); }
.dv-pbar { position: relative; height: .8em; border-radius: .3em; overflow: hidden; background: #DDE6E1; }
.dv-pbar i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--f)); transition: transform 900ms var(--ease-in-out); }
.dv-pbar .m-topay { background: #A3BFAF; }
.dv-pbar .m-paid { background: #4E7A62; }
.dv-plist { background: #fff; border: 1px solid var(--app-line); border-radius: .8em; padding: 0 .9em; }
.dv-plist .dv-row { font-size: .85em; }
.dv-cam { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; margin-left: .4em; border-radius: .5em; background: #F1EEF8; color: var(--app-deep); font-size: .9em; vertical-align: middle; transition: transform 120ms var(--ease-out); }
.dv-cam.is-pressed { transform: scale(0.9); }

/* New rows open once per cycle (grid rows: no transform equivalent for height). */
.dv-new { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--ease-out); }
.dv-new > div { overflow: hidden; }
.dv-new .dv-row { background: #F6F3FC; margin: 0 -1.1em; padding-left: 1.1em; padding-right: 1.1em; transition: background-color 1200ms ease 1600ms; }
.dv-plist .dv-new .dv-row { margin: 0 -.9em; padding-left: .9em; padding-right: .9em; }
.dv.s-added .dv-laptop .dv-new, .dv.s-synced .dv-phone .dv-new { grid-template-rows: 1fr; }
.dv.s-added .dv-laptop .dv-new .dv-row, .dv.s-synced .dv-phone .dv-new .dv-row { background-color: transparent; }

.dv-banner, .dv-toast {
  position: absolute; z-index: 3; left: 50%; display: flex; gap: .5em; align-items: center; white-space: nowrap;
  padding: .55em .9em; border-radius: .6em; background: #111827; color: #fff; font-weight: 500;
  opacity: 0; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.dv-banner { top: 2.6em; transform: translate(-50%, -.6em); }
.dv-toast { bottom: 1.2em; transform: translate(-50%, .6em); }
.dv.s-banner .dv-banner, .dv.s-toast .dv-toast { opacity: 1; transform: translate(-50%, 0); }

/* Note sheet: slides up over the phone like the app's bottom sheet. */
.dv-scrim { position: absolute; inset: 0; z-index: 3; background: rgba(17, 24, 39, .35); opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.dv.s-sheet .dv-scrim { opacity: 1; }
.dv-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: .5em;
  padding: 1.1em 1em 1.6em; border-radius: 1.2em 1.2em 0 0; background: #fff; box-shadow: 0 -1em 2em rgba(17,24,39,.15);
  transform: translateY(100%); transition: transform 450ms var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)); }
.dv.s-sheet .dv-sheet { transform: none; }
.dv-sheet b { font-size: 1.05em; }
.dv-sheet small { margin-top: -.4em; font-size: .8em; color: var(--app-muted); }
.dv-sheet .dv-field { white-space: normal; min-height: 4.6em; font-size: .9em; line-height: 1.4; }
.dv-sheet .dv-submit { font-size: .9em; }

/* The note line opens under its row on each device (grid rows, once per cycle). */
.dv-note { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--ease-out); }
.dv-note > span { overflow: hidden; display: block; padding-top: 0; font-size: .85em; font-style: italic; color: #5B5650;
  opacity: 0; transition: opacity 300ms var(--ease-out) 150ms; }
.dv-note i { font-style: normal; }
.dv.s-note .dv-phone .dv-note, .dv.s-back .dv-laptop .dv-note { grid-template-rows: 1fr; }
.dv.s-note .dv-phone .dv-note > span, .dv.s-back .dv-laptop .dv-note > span { opacity: 1; padding-top: .25em; }

.dv.is-reset .dv-app, .dv.is-reset .dv-papp { opacity: 0; }
.dv.is-instant, .dv.is-instant * { transition: none !important; }

/* Narrow: laptop across the top, phone larger and overlapping below it. */
@container (max-width: 640px) {
  .dv-stage { height: 128em; }
  .dv-laptop { width: 100%; }
  .dv-screen { height: 60em; }
  .dv-app, .dv-toast { font-size: 1.7em; }
  .dv-cols { grid-template-columns: 1fr; }
  .dv-form { order: -1; } /* the typing is the point; the list follows below */
  .dv-phone { top: 58em; right: 50%; transform: translateX(50%); width: 46em; padding: 1.6em; border-radius: 6.4em; }
  .dv-pscreen { height: 66em; border-radius: 5em; }
  .dv-papp, .dv-banner, .dv-sheet { font-size: 2.3em; }
}
@media (max-width: 700px) { .devices-notes { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .dv-sheet, .dv-scrim { display: none; }
  .dv-banner, .dv-toast { display: none; }
}