/* ==========================================================================
   Home hero: two phones in use, lit to sit in the coastal photograph.
   Left: the night before, notes typed into a notes app.
   Right: the next morning, the Elite Institute app being opened and used.
   The session is scripted in hero-phones.js; without it (or with reduced
   motion) both screens show their finished state.

   Performance: everything that moves animates transform or opacity only, so
   it stays on the compositor. No backdrop-filter, no live blur, no animated
   filters. .dvs--lite (set by the script on modest hardware) also drops the
   idle float.
   ========================================================================== */

.dvs {
  --dvgap: clamp(96px, 9vw, 190px);
  position: absolute; z-index: 1;
  top: calc(var(--nav-h, 72px) + 4vh);
  right: max(var(--pad, 24px), calc((100% - 1204px) / 2 - 16px));
  display: flex; align-items: flex-start; gap: var(--dvgap);
  font-size: min(1.45vh, .97vw, 15.5px);
  font-family: var(--font-body), system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  contain: layout style;
}
.dv { position: relative; margin: 0; }
/* the left phone stands further back, in the haze */
.dv--before { scale: .9; transform-origin: 50% 0; }
.dv--after { margin-top: 6em; }

/* ---- Device ---- */
.dv__body { position: relative; width: 19.5em; height: 40.5em; padding: .2em; border-radius: 3.45em; will-change: transform;
  /* natural titanium under the flat grey light of an overcast sky */
  background: linear-gradient(150deg, #D3D6DA 0%, #8E9399 13%, #BFC3C8 33%, #7A7F85 60%, #B1B5BA 84%, #8C9197 100%);
  box-shadow: 0 3.2em 5em -1.4em rgba(10,18,26,.58), 0 1.2em 2em -.8em rgba(10,18,26,.42), 0 0 0 .5px rgba(255,255,255,.22); }
.dv--before .dv__body { background: linear-gradient(150deg, #B9BDC2 0%, #7E838A 13%, #A8ACB2 33%, #6A6F75 60%, #9A9EA4 84%, #7B8086 100%);
  box-shadow: 0 2.6em 4.4em -1.4em rgba(10,18,26,.45), 0 1em 1.8em -.8em rgba(10,18,26,.32), 0 0 0 .5px rgba(255,255,255,.16); }
.dv__body::before, .dv__body::after { content: ''; position: absolute; width: .2em; border-radius: .2em; background: linear-gradient(90deg, #6E7379, #B8BCC1); }
.dv__body::before { left: -.17em; top: 7.4em; height: 2.3em; box-shadow: 0 3.4em 0 0 #9DA2A8, 0 6.3em 0 0 #9DA2A8; }
.dv__body::after { right: -.17em; top: 10.8em; height: 3.8em; }

.dv__screen { position: relative; height: 100%; overflow: hidden; isolation: isolate; border: .38em solid #040404; border-radius: 3.25em; background: #000; color: #F2F2F2; line-height: 1.3; }
/* glass: a soft reflection of the sky; on the far phone a trace of mist */
.dv__screen::after { content: ''; position: absolute; inset: 0; z-index: 90; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(224,234,244,.13) 0%, rgba(224,234,244,.04) 28%, rgba(224,234,244,0) 44%); }
.dv--before .dv__screen::after { background: linear-gradient(160deg, rgba(224,234,244,.13) 0%, rgba(224,234,244,.04) 28%, rgba(224,234,244,0) 44%), rgba(150,166,180,.09); }
.dv__screen::before { content: ''; position: absolute; z-index: 80; top: .6em; left: 50%; width: 6.3em; height: 1.85em; translate: -50% 0; border-radius: 1em; background: #000; }

.dv__status { position: absolute; z-index: 70; top: 0; left: 0; right: 0; height: 3.05em; display: flex; align-items: center; justify-content: space-between; padding: .3em 1.45em 0 2.1em; pointer-events: none; }
.dv__status > span:first-child { font-size: .8em; font-weight: 600; letter-spacing: -.01em; }
.dv__sys { display: flex; align-items: center; gap: .32em; }
.dv__sys svg { height: .78em; width: auto; }
.dv__sys svg:last-child { height: .86em; }

.dv__home { position: absolute; z-index: 85; bottom: .5em; left: 50%; width: 7.2em; height: .3em; translate: -50% 0; border-radius: 999px; background: rgba(255,255,255,.82); pointer-events: none; }
/* screen off: black glass. Waking fades the picture in, as a phone does */
.dv__off { position: absolute; inset: 0; z-index: 95; background: #000; opacity: 0; pointer-events: none; transition: opacity .8s cubic-bezier(.4,0,.2,1); }
.dv.is-off .dv__off { opacity: 1; transition-duration: .5s; }

/* the touch, as screen recordings show it */
.dv__touch { position: absolute; z-index: 88; left: 0; top: 0; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 .1em rgba(255,255,255,.6), 0 .3em 1em rgba(0,0,0,.28);
  transition: translate .62s cubic-bezier(.45,0,.2,1), opacity .25s ease, scale .14s ease; }
.dv__touch.is-on { opacity: 1; }
.dv__touch.is-down { scale: .8; }
.dv__touch.is-drag { transition: translate .55s cubic-bezier(.3,.5,.3,1), opacity .3s ease, scale .14s ease; }
.dv__touch.no-move { transition: opacity .25s ease, scale .14s ease; }

/* ---- Keyboard ---- */
.kb { position: absolute; z-index: 60; left: 0; right: 0; bottom: 0; height: 13.4em; padding: .55em .2em 0; background: #2C2C2F;
  translate: 0 100%; transition: translate .4s cubic-bezier(.32,.72,0,1); will-change: transform; }
.kb.is-up { translate: 0 0; }
.kb__row { display: flex; justify-content: center; gap: .26em; margin-top: .5em; }
.kb__row:first-child { margin-top: 0; }
.kb__k { position: relative; flex: 0 0 1.95em; height: 2.85em; display: grid; place-items: center; border-radius: .4em; font-size: .78em; font-weight: 400; color: #fff; background: #6A6A6E; box-shadow: 0 .08em 0 rgba(0,0,0,.45); }
.kb__k--fn { flex-basis: 2.75em; background: #46464A; }
.kb__k--w { flex-basis: 3.6em; background: #46464A; font-size: .66em; }
.kb__k--sp { flex: 1 1 auto; font-size: .66em; }
.kb__k.is-down { background: #A3A3A8; }
.kb__k:not(.kb__k--fn):not(.kb__k--sp):not(.kb__k--w).is-down::after { content: attr(data-k); position: absolute; left: 50%; bottom: 55%; width: 1.5em; height: 1.9em; translate: -50% 0;
  display: grid; place-items: center; border-radius: .35em; background: #8C8C91; font-size: 1.5em; box-shadow: 0 .2em .5em rgba(0,0,0,.4); }

/* ---- Notes app ---- */
.nt { position: absolute; inset: 0; padding: 3.3em 1.3em 1em; background: #000; }
.nt__bar { display: flex; justify-content: space-between; font-size: .8em; font-weight: 500; color: #E3B341; }
.nt__done { font-weight: 600; opacity: 0; transition: opacity .3s ease; }
.nt.is-edit .nt__done { opacity: 1; }
.nt__title { margin-top: .5em; font-size: 1.6em; font-weight: 700; letter-spacing: -.02em; }
.nt__date { margin-top: .15em; font-size: .64em; color: #8E8E93; }
.nt__list { display: grid; gap: .8em; margin: 1.1em 0 0; padding: 0; list-style: none; }
.nt__list li { display: flex; align-items: flex-start; gap: .6em; min-height: 1.15em; transition: opacity .3s ease; }
.nt__list li.is-wait { opacity: 0; }
.nt__list i { position: relative; flex: none; width: 1.05em; height: 1.05em; margin-top: .05em; border-radius: 50%; box-shadow: inset 0 0 0 .09em #636366; transition: background-color .35s ease, box-shadow .35s ease; }
.nt__list i::after { content: ''; position: absolute; left: .37em; top: .19em; width: .24em; height: .48em; border-right: .12em solid #fff; border-bottom: .12em solid #fff; rotate: 45deg; opacity: 0; scale: .3;
  transition: opacity .2s ease .1s, scale .45s cubic-bezier(.3,1.7,.5,1) .1s; }
.nt__list li.is-done i { background: #E3B341; box-shadow: none; }
.nt__list li.is-done i::after { opacity: 1; scale: 1; }
.nt__list span { font-size: .8em; line-height: 1.32; transition: color .5s ease; }
.nt__list li.is-done span { color: #8E8E93; }
.nt__p { margin-top: 1.5em; min-height: 1.1em; }
.nt__p span { font-size: .8em; color: #D1D1D6; }
.caret { display: inline-block; width: .1em; height: 1.05em; margin-left: .06em; vertical-align: -.16em; background: #E3B341; animation: dvcaret 1s steps(1) infinite; }
.ch__field .caret { background: #fff; }
@keyframes dvcaret { 50% { opacity: 0; } }

/* ---- Home screen ---- */
.hs { position: absolute; inset: 0; overflow: hidden; transition: scale .55s cubic-bezier(.32,.72,0,1); will-change: transform; }
.hs::after { content: ''; position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
.hs.is-behind { scale: .92; }
.hs.is-behind::after { opacity: .55; }
.hs__wall { position: absolute; inset: 0; background-size: cover; background-position: 62% 60%; }
.hs__wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,18,.42) 0%, rgba(10,14,18,.18) 45%, rgba(10,14,18,.5) 100%); }
.hs__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 4.55em; row-gap: 1.05em; padding: 4.3em .95em 0; }
.hs__app { display: flex; flex-direction: column; align-items: center; gap: .38em; }
.hs__ic { position: relative; display: block; flex: none; width: 3.3em; height: 3.3em; overflow: hidden; border-radius: .78em; box-shadow: 0 .18em .45em rgba(0,0,0,.22); }
.hs__ic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .04em rgba(255,255,255,.14); background: #000; opacity: 0; transition: opacity .12s ease; }
.hs__ic svg { display: block; width: 100%; height: 100%; }
.hs__ic.is-pressed::after { opacity: .4; }
.hs__ic--elite { display: grid; place-items: center; background: radial-gradient(120% 100% at 30% 15%, #2A2A2D 0%, #0B0B0C 60%); }
.hs__ic--elite img { width: 1.9em; height: 1.9em; }
.hs__lb { font-size: .56em; line-height: 1.2; color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* weather widget, 2 x 2 */
.hs__wx { grid-column: span 2; grid-row: span 2; justify-self: center; width: 7.55em; height: 7.55em; display: flex; flex-direction: column; padding: .85em .9em; border-radius: 1.3em;
  background: linear-gradient(180deg, #5E7E9E 0%, #3F5D7C 100%); box-shadow: 0 .18em .45em rgba(0,0,0,.22); color: #fff; }
.hs__wx b, .hs__wx small, .hs__wx span { display: block; }
.hs__wx > b:first-child { font-size: .66em; font-weight: 600; }
.hs__wx-t { margin-top: .05em; font-size: 2.1em; font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.hs__wx svg { width: 1.1em; height: 1.1em; margin-top: auto; }
.hs__wx span { margin-top: .2em; font-size: .58em; font-weight: 600; }
.hs__wx small { font-size: .54em; opacity: .85; }
.hs__dock { position: absolute; z-index: 1; left: .55em; right: .55em; bottom: .55em; height: 4.9em; display: flex; justify-content: space-around; align-items: center; border-radius: 2.2em;
  background: rgba(205,214,224,.24); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---- The Elite app ---- */
.dvapp { position: absolute; inset: 0; z-index: 20; overflow: hidden; background: #0B0B0C; border-radius: 4em; opacity: 0; scale: .14; pointer-events: none; will-change: transform, opacity;
  transition: scale .5s cubic-bezier(.32,.72,0,1), border-radius .5s cubic-bezier(.32,.72,0,1), opacity .2s ease .26s; }
.dvapp.is-open { opacity: 1; scale: 1; border-radius: 2.9em; transition: scale .55s cubic-bezier(.32,.72,0,1), border-radius .55s cubic-bezier(.32,.72,0,1), opacity .12s ease; }
.dvapp__splash { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: #0B0B0C; transition: opacity .4s ease; }
.dvapp__splash img { width: 3.4em; height: 3.4em; }
.dvapp.is-ready .dvapp__splash { opacity: 0; }

.pg { position: absolute; inset: 0; background: #0B0B0C; transition: translate .5s cubic-bezier(.32,.72,0,1); }
.pg--home::after { content: ''; position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.pg--home.is-under { translate: -28% 0; }
.pg--home.is-under::after { opacity: .45; }
.pg--chat { z-index: 2; translate: 100% 0; box-shadow: -1em 0 2em rgba(0,0,0,.35); will-change: transform; }
.pg--chat.is-on { translate: 0 0; }
.pg__view { position: absolute; inset: 0 0 4.7em; overflow: hidden; }
.pg__scroll { padding: 3.7em 1.1em 1.4em; transition: translate 1s cubic-bezier(.12,.9,.25,1); will-change: transform; }
.pg__scroll > * { opacity: 0; translate: 0 .9em; transition: opacity .45s ease, translate .6s cubic-bezier(.2,.8,.2,1); }
.dvapp.is-ready .pg__scroll > * { opacity: 1; translate: 0 0; }
.dvapp.is-ready .pg__scroll > :nth-child(2) { transition-delay: .05s; } .dvapp.is-ready .pg__scroll > :nth-child(3) { transition-delay: .1s; }
.dvapp.is-ready .pg__scroll > :nth-child(4) { transition-delay: .14s; } .dvapp.is-ready .pg__scroll > :nth-child(n+5) { transition-delay: .18s; }

.ap-head { display: flex; justify-content: space-between; align-items: center; }
.ap-hello { display: block; font-size: .66em; color: #8E8E93; }
.ap-name { display: block; margin-top: .05em; font-size: 1.22em; font-weight: 700; letter-spacing: -.02em; }
.ap-av { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #2C3E57; }
.ap-av b, .ap-ic--av { font-size: .7em; font-weight: 700; color: #DCE6F7; }
.ap-card { margin-top: 1.1em; padding: .95em 1em .85em; border-radius: 1.15em; background: #1C1C1E; }
.ap-card__top { display: flex; justify-content: space-between; align-items: center; }
.ap-card__id { font-size: .62em; color: #8E8E93; }
.ap-pill { padding: .3em .7em; border-radius: 999px; font-size: .56em; font-weight: 600; color: #9CC0F0; background: rgba(120,165,230,.14); }
.ap-card__title { display: block; margin-top: .45em; font-size: .9em; font-weight: 600; }
.ap-steps { display: flex; gap: .3em; margin-top: .75em; }
.ap-steps i { position: relative; flex: 1; height: .3em; overflow: hidden; border-radius: 999px; background: #2C2C2E; }
.ap-steps b { position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: 0 50%; scale: 0 1; transition: scale 1.8s cubic-bezier(.2,.8,.2,1); }
.ap-steps .is-on b { scale: 1 1; }
.ap-steps .is-half b { scale: .35 1; }
.ap-card__meta { display: block; margin-top: .55em; font-size: .6em; color: #8E8E93; }
.ap-h { margin: 1.35em .2em .45em; font-size: .64em; font-weight: 600; letter-spacing: 0; color: #8E8E93; }
.ap-list { padding: 0 .85em; border-radius: 1.15em; background: #1C1C1E; }
.ap-row { display: flex; align-items: center; gap: .65em; padding: .6em 0; }
.ap-row + .ap-row { box-shadow: 0 -1px 0 rgba(255,255,255,.07); }
.ap-ic { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #2C2C2E; color: #EDEDED; }
.ap-ic svg { width: 1.05em; height: 1.05em; }
.ap-ic.ap-ic--av { width: 2.85em; height: 2.85em; background: #2C3E57; }
.ap-tx { flex: 1; min-width: 0; }
.ap-tx b { display: block; font-size: .72em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tx small { display: block; margin-top: .2em; font-size: .58em; color: #8E8E93; }
.ap-st { position: relative; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; box-shadow: inset 0 0 0 .1em #3A3A3C; transition: background-color .3s ease, box-shadow .3s ease; }
.ap-st svg { position: absolute; inset: 0; margin: auto; width: .8em; height: .8em; color: #fff; opacity: 0; scale: .3; transition: opacity .2s ease, scale .5s cubic-bezier(.3,1.7,.5,1); }
.is-done > .ap-st { background: #30A46C; box-shadow: none; }
.is-done > .ap-st svg { opacity: 1; scale: 1; }
.is-run > .ap-st { box-shadow: inset 0 0 0 .13em rgba(255,255,255,.14); }
.is-run > .ap-st::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: .13em solid transparent; border-top-color: #fff; animation: dvspin .9s linear infinite; }
@keyframes dvspin { to { rotate: 1turn; } }
.ap-dot { flex: none; width: .55em; height: .55em; border-radius: 50%; background: #4C8DF6; transition: opacity .3s ease; }
.ap-dot.is-read { opacity: 0; }
.ap-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 4.7em; display: flex; justify-content: space-around; padding: .6em .4em 0; background: #0E0E0F; box-shadow: 0 -1px 0 rgba(255,255,255,.07); }
.ap-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25em; width: 3.6em; color: #6C6C70; }
.ap-tab svg { width: 1.35em; height: 1.35em; }
.ap-tab > span { font-size: .5em; font-weight: 500; }
.ap-tab.on { color: #fff; }
.ap-badge { position: absolute; top: -.35em; left: 55%; min-width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 999px; background: #E5484D; color: #fff; font-size: .5em; font-style: normal; font-weight: 700; transition: opacity .3s ease, scale .3s ease; }
.ap-badge.is-read { opacity: 0; scale: .5; }

/* ---- Chat ---- */
.ch__head { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .6em; padding: 3.2em .9em .7em .6em; background: #161618; box-shadow: 0 1px 0 rgba(255,255,255,.07); }
.ch__back { display: grid; place-items: center; width: 1.8em; height: 1.8em; color: #fff; }
.ch__back svg { width: 1.25em; height: 1.25em; }
.ch__head .ap-ic--av { width: 2.85em; height: 2.85em; }
.ch__who b { display: block; font-size: .74em; font-weight: 600; }
.ch__who small { display: block; font-size: .56em; color: #8E8E93; }
.ch__body, .ch__in { transition: translate .4s cubic-bezier(.32,.72,0,1); }
.ch__body { position: absolute; left: 0; right: 0; top: 6.6em; bottom: 4.4em; display: flex; flex-direction: column; justify-content: flex-end; gap: .45em; padding: .8em .85em .6em; }
.pg--chat.kb-on .ch__body, .pg--chat.kb-on .ch__in { translate: 0 -12.35em; }
.ch__day { align-self: center; margin-bottom: auto; padding-top: .2em; font-size: .56em; color: #8E8E93; }
.ch__b { display: none; max-width: 84%; margin: 0; padding: .6em .85em; border-radius: 1.15em; font-size: .68em; line-height: 1.38;
  opacity: 0; translate: 0 .8em; scale: .94; transform-origin: 0 100%; transition: opacity .3s ease, translate .45s cubic-bezier(.2,.9,.3,1.15), scale .45s cubic-bezier(.2,.9,.3,1.15); }
.ch__b.is-in { display: block; }
.ch__b.is-on { opacity: 1; translate: 0 0; scale: 1; }
.ch__b--in { align-self: flex-start; background: #262628; color: #EDEDED; border-bottom-left-radius: .4em; }
.ch__b--me { align-self: flex-end; background: #F2F2F2; color: #0B0B0C; border-bottom-right-radius: .4em; transform-origin: 100% 100%; }
.ch__typing { display: none; align-self: flex-start; gap: .28em; padding: .75em .9em; border-radius: 1.15em; border-bottom-left-radius: .4em; background: #262628; opacity: 0; transition: opacity .25s ease; }
.ch__typing.is-in { display: flex; }
.ch__typing.is-on { opacity: 1; }
.ch__typing i { width: .42em; height: .42em; border-radius: 50%; background: #8E8E93; animation: dvdot 1.2s ease-in-out infinite; }
.ch__typing i:nth-child(2) { animation-delay: .15s; } .ch__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dvdot { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -.15em; } }
.ch__receipt { display: none; align-self: flex-end; margin-top: -.15em; font-size: .52em; color: #8E8E93; opacity: 0; transition: opacity .3s ease; }
.ch__receipt.is-in { display: block; }
.ch__receipt.is-on { opacity: 1; }
.ch__in { position: absolute; z-index: 3; left: .7em; right: .7em; bottom: 1.5em; display: flex; align-items: center; gap: .45em; }
.ch__field { flex: 1; min-width: 0; min-height: 2.35em; display: flex; align-items: center; padding: .3em .85em; border-radius: 1.2em; background: #0B0B0C; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.ch__field > span { font-size: .68em; white-space: nowrap; overflow: hidden; }
.ch__ph { color: #6C6C70; }
.ch__field.has-text .ch__ph { display: none; }
.ch__field:not(.has-text) .ch__txt { display: none; }
.ch__send { flex: none; display: grid; place-items: center; width: 2.35em; height: 2.35em; border-radius: 50%; background: #2C2C2E; color: #6C6C70; transition: background-color .2s ease, color .2s ease; }
.ch__send svg { width: 1.15em; height: 1.15em; }
.ch__send.is-ready { background: #fff; color: #0B0B0C; }

/* ---- Notification banner ---- */
.dv__notif { position: absolute; z-index: 75; top: 3.1em; left: .55em; right: .55em; display: flex; align-items: center; gap: .65em; padding: .7em .8em; border-radius: 1.5em;
  background: rgba(46,46,50,.97); box-shadow: 0 .7em 1.8em rgba(0,0,0,.35); will-change: transform, opacity;
  opacity: 0; translate: 0 -170%; scale: .96; transition: translate .6s cubic-bezier(.32,.72,0,1), opacity .35s ease, scale .6s cubic-bezier(.32,.72,0,1); }
.dv__notif.is-show { opacity: 1; translate: 0 0; scale: 1; }
.dv__notif-ic { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .6em; background: #0A0A0A; box-shadow: inset 0 0 0 .06em rgba(255,255,255,.16); }
.dv__notif-ic img { width: 1.4em; height: 1.4em; }
.dv__notif-t { flex: 1; min-width: 0; display: grid; gap: .1em; }
.dv__notif-app { display: flex; justify-content: space-between; font-size: .5em; letter-spacing: .04em; color: rgba(255,255,255,.6); }
.dv__notif-app span + span { letter-spacing: 0; }
.dv__notif-t > b { font-size: .68em; font-weight: 600; }
.dv__notif-t > span:last-child { font-size: .64em; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Arrival: each phone rises out of the haze and settles, screen dark,
        then wakes. After that only a slow breath of movement. ---- */
@media (prefers-reduced-motion: no-preference) {
  .dv { animation: dvin 1.9s cubic-bezier(.16,.84,.24,1) .3s both; }
  .dv--after { animation-delay: .75s; }
  .dv__body { animation: dvfloat 7s ease-in-out 3s infinite alternate; }
  .dv--before .dv__body { animation-delay: 2.2s; }
  .dvs--lite .dv__body { animation: none; }
}
@keyframes dvin {
  0% { opacity: 0; translate: 0 70px; }
  35% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes dvfloat { from { translate: 0 0; } to { translate: 0 -8px; } }
.dvs.is-paused *, .dvs.is-paused *::before, .dvs.is-paused *::after { animation-play-state: paused !important; }
.dvs.no-anim *, .dvs.no-anim *::before, .dvs.no-anim *::after { transition: none !important; }

/* ---- Smaller screens ---- */
@media (max-width: 1023.98px) {
  .dvs { --dvgap: max(7vw, 20px); left: 0; right: 0; justify-content: center; top: calc(var(--nav-h, 64px) + 20px); font-size: min(2.05vw, 1.15vh, 11px); }
  .dv--after { margin-top: 4em; }
}
@media (max-width: 1023.98px) and (min-aspect-ratio: 4/3) { .dvs { display: none; } }
@media (max-width: 1023.98px) { .xhero { min-height: max(100svh, 860px); } }