/*
 * The iPhone and Android page: `devicesPage` in `scripts/site-pages.ts`.
 *
 * Most of this file is one piece of choreography on a 14 second loop. A koi
 * swims across three phones, and the invoice writes itself onto each as it
 * passes; the Duo in the middle opens out like a book into the list beside
 * the invoice, pushing the other two aside; the invoice is stamped paid on
 * all three at once; then everything folds back and empties for the next lap.
 *
 * Every animation shares `--T`, and each one places its moment by keyframe
 * percentage rather than by delay, so nothing drifts out of step however long
 * the page is left open. Delays are used only for the small stagger inside a
 * moment (one line after another, one phone after another).
 *
 * The stage is sized in `em`, set from the viewport, so the whole thing scales
 * as one drawing. The base styles are the finished frame (Duo open, invoice
 * written, stamp down), which is what reduced motion gets: the animations only
 * ever hide things on the way to it.
 *
 * Nothing here is inline and nothing is loaded from elsewhere, so the strict
 * policy in `vercel.json` has nothing to refuse.
 */

.dv-hero { padding-bottom: 40px; }
.dv-hero h1 em { font-style: italic; color: var(--salmon); }
.dv-intro { max-width: 900px; }

/* ── the stage ────────────────────────────────────────────────────── */

.dv-stage {
  --T: 14s;
  --ease: cubic-bezier(.65, 0, .25, 1);
  --xc: 25em;  /* a side phone's distance from the middle, Duo closed */
  --xo: 33em;  /* and with it open */
  --scr: #F7F5F1;
  --bezel: #0A1013;
  position: relative;
  height: 52em;
  margin: 40px auto 0;
  font-size: min(10.5px, 1.02vw);
  font-family: var(--sans);
  color: var(--ink);
}

/* ── the water under the phones ── */

.dv-water {
  position: absolute;
  left: 50%; top: 40em;
  width: 90em; height: 10em;
  margin-left: -45em;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(143, 196, 218, .16), transparent 68%);
}
.dv-water i {
  position: absolute;
  left: 50%; top: 50%;
  width: 40em; height: 6em;
  margin: -3em 0 0 -20em;
  border-radius: 50%;
  border: 1px solid rgba(200, 220, 228, .28);
  animation: dv-ripple 6s linear infinite;
}
.dv-water i:nth-child(2) { animation-delay: -2s; }
.dv-water i:nth-child(3) { animation-delay: -4s; }

/* ── the phones ── */

.dv-phone {
  position: absolute;
  left: 50%; top: 5em;
  width: 19em; height: 40em;
  margin-left: -9.5em;
  z-index: 1;
  animation: var(--T) var(--ease) infinite both;
}
.dv-android { --side: -1; transform: translateX(calc(-1 * var(--xo))) rotate(-10deg); animation-name: dv-push-l; }
.dv-iphone  { --side:  1; transform: translateX(var(--xo)) rotate(10deg); animation-name: dv-push-r; }

.dv-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: .6em solid var(--bezel);
  border-radius: 3em;
  background: var(--scr);
  box-shadow:
    0 0 0 1px rgba(200, 220, 228, .22),
    0 3em 5em -1.5em rgba(0, 0, 0, .6);
}
.dv-android .dv-glass { border-radius: 2.2em; }
.dv-punch {
  position: absolute;
  left: 50%; top: .9em;
  width: 1.1em; height: 1.1em;
  margin-left: -.55em;
  border-radius: 50%;
  background: var(--bezel);
}
.dv-island {
  position: absolute;
  left: 50%; top: .8em;
  width: 5.6em; height: 1.6em;
  margin-left: -2.8em;
  border-radius: 1em;
  background: var(--bezel);
  z-index: 2;
}

/* The light that runs over a phone as the koi passes it. */
.dv-phone::before,
.dv-duo::before {
  content: "";
  position: absolute;
  inset: -3em;
  border-radius: 6em;
  background: radial-gradient(closest-side, rgba(240, 140, 121, .5), transparent);
  opacity: 0;
  animation: dv-halo var(--T) linear infinite both;
  pointer-events: none;
}
.dv-android::before { animation-delay: 1.3s; }
.dv-duo::before     { animation-delay: 2.6s; }
.dv-iphone::before  { animation-delay: 3.9s; }

/* ── the Duo ──
 *
 * Two leaves on a hinge down the middle. The right leaf never moves. The left
 * one turns 180 degrees about the hinge to lie on top of it, and the back of
 * that leaf is the outer display, so a closed Duo is the right half of the
 * open one with the cover showing. The whole device slides a quarter of its
 * width left while it is closed, so it stays in the middle of the stage.
 */
.dv-duo {
  position: absolute;
  left: 50%; top: 10em;
  width: 44em; height: 31em;
  margin-left: -22em;
  z-index: 3;
  perspective: 140em;
  animation: dv-duo var(--T) var(--ease) infinite both;
}
.dv-leaf {
  position: absolute;
  top: 0;
  width: 50%; height: 100%;
  transform-style: preserve-3d;
}
/* Above the right leaf, because the Duo itself is flat and so does not sort
   its leaves by depth: closed, the cover has to be painted last. */
.dv-leaf-l {
  z-index: 1;
  left: 0;
  transform-origin: 100% 50%;
  animation: dv-fold var(--T) var(--ease) infinite both;
}
.dv-leaf-r { right: 0; }

.dv-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--scr);
  border: .55em solid var(--bezel);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 3em 5em -1.5em rgba(0, 0, 0, .55);
}
.dv-inner-l {
  border-right: 0;
  border-radius: 2.4em 0 0 2.4em;
  box-shadow: inset -1px 0 0 rgba(16, 20, 24, .06), 0 3em 5em -1.5em rgba(0, 0, 0, .55);
}
.dv-inner-r {
  border-left: 0;
  border-radius: 0 2.4em 2.4em 0;
  /* the crease, felt more than seen */
  background: linear-gradient(90deg, rgba(16, 20, 24, .07), transparent 1.2em) var(--scr);
}
.dv-cover {
  border-radius: 2.4em;
  transform: rotateY(180deg) translateZ(.1em);
  box-shadow: 0 0 0 1px rgba(200, 220, 228, .22);
}

/* The 84 point strip down the open Duo's edge: clock, camera, side tab bar. */
.dv-strip {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 3.8em;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.4em 0 1.2em;
}
.dv-strip b { font-size: .95em; font-weight: 700; letter-spacing: -.01em; }
.dv-cam {
  width: 1.5em; height: 1.5em;
  margin-top: .5em;
  border-radius: 50%;
  border: .25em solid var(--ink);
}
.dv-tabs {
  display: flex;
  flex-direction: column;
  gap: .9em;
  margin-top: auto;
  padding: .9em .7em;
  border-radius: 2em;
  border: 1px solid rgba(16, 20, 24, .1);
  background: #fff;
}
.dv-tabs i { width: 1.1em; height: 1.1em; border-radius: .3em; background: rgba(16, 20, 24, .7); }
.dv-tabs i.on { background: var(--red); }

/* ── the invoice, in miniature ── */

.dv-doc {
  position: absolute;
  inset: 3.2em 1.3em auto;
  font-size: 1em;
  line-height: 1.25;
}
.dv-inner-r .dv-doc { inset: 2.4em 4.6em auto 1.6em; }
.dv-cover .dv-doc { inset-block-start: 3em; }

.dv-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.dv-no { font-family: var(--mono); font-size: 1.55em; font-weight: 500; letter-spacing: -.02em; }
.dv-terms {
  padding: .35em .6em;
  border-radius: .6em;
  background: #EFE3CF;
  color: #8A5A12;
  font-size: .78em;
  font-weight: 600;
  white-space: nowrap;
}
.dv-client {
  display: flex;
  align-items: center;
  gap: .8em;
  margin-top: 1.2em;
  padding: .8em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 .2em .8em -.3em rgba(16, 20, 24, .18);
  font-weight: 600;
  font-size: .95em;
}
.dv-client small {
  display: block;
  font-size: .7em;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
}
.dv-av {
  position: relative;
  flex: none;
  width: 2.6em; height: 2.6em;
  border-radius: 50%;
  background: var(--beni);
  overflow: hidden;
}
.dv-av::after {
  content: "";
  position: absolute;
  left: 12%; bottom: 10%;
  width: 48%; height: 48%;
  border-radius: 50% 50% 50% 2px;
  background: var(--card);
}
.dv-av-gold { background: #84581C; }
.dv-av-blue { background: var(--asagi); }

.dv-lines {
  list-style: none;
  margin: 1em 0 0;
  padding: 0 .8em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 .2em .8em -.3em rgba(16, 20, 24, .18);
}
.dv-lines li {
  display: flex;
  justify-content: space-between;
  gap: .6em;
  padding: .75em 0;
  font-size: .88em;
  font-weight: 600;
}
.dv-lines li + li { border-top: 1px solid rgba(16, 20, 24, .07); }
.dv-lines b, .dv-total b { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.dv-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1em;
  padding: 0 .3em;
  font-weight: 700;
}
.dv-total b { font-size: 1.35em; }

.dv-paid {
  position: absolute;
  right: .35em; top: 12em; /* in the stamp's own, larger em */
  padding: .15em .55em;
  border: .22em solid var(--asagi);
  border-radius: .5em;
  color: var(--asagi);
  font-size: 1.7em;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-12deg);
  background: rgba(247, 245, 241, .82);
  animation: dv-stamp var(--T) linear infinite both;
}
.dv-cover .dv-paid { display: none; }
.dv-inner-r .dv-paid { top: 11.6em; }
.dv-duo .dv-paid { animation-delay: .2s; }
.dv-iphone .dv-paid { animation-delay: .4s; }

/* Preview and Send, at the foot of the phone-sized screens. */
.dv-actions {
  position: absolute;
  left: 1.3em; right: 1.3em; bottom: 1.5em;
  display: flex;
  gap: .6em;
  font-size: .95em;
  font-weight: 700;
}
.dv-actions i, .dv-actions b {
  flex: 1;
  padding: .85em 0;
  border-radius: .9em;
  text-align: center;
  font-style: normal;
}
.dv-actions i { background: #fff; border: 1px solid rgba(16, 20, 24, .1); }
.dv-actions b { background: var(--ink); color: #fff; }
.dv-cover .dv-actions { bottom: 1.2em; }

/* A ring on the water under each phone, as it is paid. */
.dv-ring {
  position: absolute;
  left: 5%; right: 5%; bottom: -3.4em;
  height: 4.4em;
  border-radius: 50%;
  border: 1px solid rgba(240, 140, 121, .7);
  opacity: 0;
  animation: dv-ring var(--T) ease-out infinite both;
  pointer-events: none;
}
.dv-duo .dv-ring { animation-delay: .2s; }
.dv-iphone .dv-ring { animation-delay: .4s; }

/* The open Duo's list pane. */
.dv-list {
  position: absolute;
  inset: 2.4em 1em auto 1.6em;
  font-size: .92em;
}
.dv-list-head { display: flex; align-items: center; justify-content: space-between; }
.dv-list-head b { font-size: 2em; font-weight: 700; letter-spacing: -.02em; }
.dv-new {
  padding: .5em .8em;
  border-radius: .7em;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: .9em;
}
.dv-chips { display: flex; gap: .4em; margin-top: 1.1em; }
.dv-chips i {
  padding: .35em .8em;
  border-radius: 1em;
  border: 1px solid rgba(16, 20, 24, .12);
  background: #fff;
  font-style: normal;
  font-size: .85em;
}
.dv-chips i.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.dv-rows { list-style: none; margin: 1em 0 0; padding: 0; }
.dv-rows li {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-top: .6em;
  padding: .7em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 .2em .8em -.3em rgba(16, 20, 24, .18);
  font-weight: 600;
  font-size: .9em;
}
.dv-rows li.sel { box-shadow: 0 0 0 .18em var(--red), 0 .2em .8em -.3em rgba(16, 20, 24, .18); }
.dv-rows .dv-av { width: 2.3em; height: 2.3em; }
.dv-rows span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-rows small { display: block; font-family: var(--mono); font-weight: 400; font-size: .85em; color: var(--label); }
.dv-rows b { font-family: var(--mono); font-weight: 500; text-align: right; white-space: nowrap; }
.dv-rows em { display: block; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: .85em; color: #8A5A12; }
.dv-rows em.dv-row-paid { color: var(--asagi); animation: dv-flag var(--T) linear infinite both; }

/* ── writing it, a line at a time ── */

.dv-client, .dv-lines li, .dv-total, .dv-rows li, .dv-chips {
  animation: var(--T) linear infinite both;
  animation-delay: calc(var(--i, 0) * .16s);
}
.dv-lines li:nth-child(1) { --i: 1; }
.dv-lines li:nth-child(2) { --i: 2; }
.dv-lines li:nth-child(3) { --i: 3; }
.dv-total { --i: 5; }
.dv-rows li:nth-child(1) { --i: 1; }
.dv-rows li:nth-child(2) { --i: 2; }
.dv-rows li:nth-child(3) { --i: 3; }
.dv-rows li:nth-child(4) { --i: 4; }

.dv-android :is(.dv-client, .dv-lines li, .dv-total) { animation-name: dv-write-a; }
.dv-cover   :is(.dv-client, .dv-lines li, .dv-total) { animation-name: dv-write-b; }
.dv-iphone  :is(.dv-client, .dv-lines li, .dv-total) { animation-name: dv-write-c; }
.dv-inner-r :is(.dv-client, .dv-lines li, .dv-total),
.dv-inner-l :is(.dv-chips, .dv-rows li) { animation-name: dv-write-d; }

/* ── the koi ── */

.dv-lane {
  position: absolute;
  left: 0; right: 0;
  top: 37.5em;
  height: 6em;
  z-index: 5;
  pointer-events: none;
  animation: dv-swim var(--T) linear infinite both;
}
.dv-bob { width: 13em; animation: dv-bob 1.6s ease-in-out infinite alternate; }
.dv-fish {
  display: block;
  width: 13em; height: 5.2em;
  filter: drop-shadow(0 1.4em .9em rgba(0, 0, 0, .35));
}
.dv-tail {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: dv-wag .32s ease-in-out infinite alternate;
}

/* ── what is happening, in three words at a time ── */

.dv-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2em;
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: max(11px, 1.15em);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200, 220, 228, .78);
}
.dv-caption span { position: absolute; left: 0; right: 0; opacity: 0; animation: var(--T) linear infinite both; }
.dv-caption span:nth-child(1) { animation-name: dv-cap-1; }
.dv-caption span:nth-child(2) { animation-name: dv-cap-2; }
.dv-caption span:nth-child(3) { animation-name: dv-cap-3; }

.dv-pause {
  position: absolute;
  right: 0; bottom: -.3em;
  z-index: 6;
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid rgba(200, 220, 228, .24);
  background: rgba(200, 220, 228, .08);
  color: rgba(200, 220, 228, .85);
  font: 500 12.5px/1.2 var(--sans);
  cursor: pointer;
}
.dv-pause:hover { background: rgba(200, 220, 228, .18); color: var(--paper); }
.dv-pause:focus-visible { outline: 2px solid var(--salmon); outline-offset: 2px; }

.dv-stage.is-paused,
.dv-stage.is-paused * { animation-play-state: paused !important; }

/* ── the keyframes ────────────────────────────────────────────────── */

/*
 * The loop, in per cent of 14 seconds:
 *
 *    5 - 35  the koi swims left to right; the invoice writes itself onto
 *            Android (10), the closed Duo (19) and the iPhone (27)
 *   34 - 42  the Duo opens and the phones step aside
 *   43 - 46  the list and the invoice write themselves onto the open Duo
 *   58 - 63  paid, on all three
 *   82 - 92  everything empties and the Duo folds shut
 */

@keyframes dv-swim {
  0%, 5%   { transform: translateX(-14%); opacity: 0; }
  8%       { opacity: 1; }
  32%      { opacity: 1; }
  35%, 100% { transform: translateX(100%); opacity: 0; }
}
@keyframes dv-bob {
  from { transform: translateY(-.9em) rotate(-2deg); }
  to   { transform: translateY(.9em) rotate(2deg); }
}
@keyframes dv-wag {
  from { transform: rotate(-16deg); }
  to   { transform: rotate(16deg); }
}
@keyframes dv-halo {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  12%, 100% { opacity: 0; }
}

@keyframes dv-write-a {
  0%, 10%  { opacity: 0; clip-path: inset(0 100% 0 0); }
  13%, 86% { opacity: 1; clip-path: inset(0 0 0 0); }
  90%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes dv-write-b {
  0%, 19%  { opacity: 0; clip-path: inset(0 100% 0 0); }
  22%, 86% { opacity: 1; clip-path: inset(0 0 0 0); }
  90%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes dv-write-c {
  0%, 27%  { opacity: 0; clip-path: inset(0 100% 0 0); }
  30%, 86% { opacity: 1; clip-path: inset(0 0 0 0); }
  90%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes dv-write-d {
  0%, 42%  { opacity: 0; clip-path: inset(0 100% 0 0); }
  45%, 81% { opacity: 1; clip-path: inset(0 0 0 0); }
  84%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@keyframes dv-fold {
  0%, 34%  { transform: rotateY(180deg); }
  42%, 84% { transform: rotateY(0deg); }
  92%, 100% { transform: rotateY(180deg); }
}
@keyframes dv-duo {
  0%, 34%  { transform: translateX(-25%); }
  42%, 84% { transform: translateX(0); }
  92%, 100% { transform: translateX(-25%); }
}
@keyframes dv-push-l {
  0%, 34%  { transform: translateX(calc(-1 * var(--xc))) rotate(-7deg); }
  42%, 84% { transform: translateX(calc(-1 * var(--xo))) rotate(-10deg); }
  92%, 100% { transform: translateX(calc(-1 * var(--xc))) rotate(-7deg); }
}
@keyframes dv-push-r {
  0%, 34%  { transform: translateX(var(--xc)) rotate(7deg); }
  42%, 84% { transform: translateX(var(--xo)) rotate(10deg); }
  92%, 100% { transform: translateX(var(--xc)) rotate(7deg); }
}

@keyframes dv-stamp {
  0%, 58%  { opacity: 0; transform: rotate(-12deg) scale(1.9); }
  60.5%    { opacity: 1; transform: rotate(-12deg) scale(.92); }
  62%, 84% { opacity: 1; transform: rotate(-12deg) scale(1); }
  87%, 100% { opacity: 0; transform: rotate(-12deg) scale(1); }
}
@keyframes dv-flag {
  0%, 59%  { opacity: 0; }
  61%, 81% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes dv-ring {
  0%, 60%  { opacity: 0; transform: scale(.4); }
  62%      { opacity: 1; }
  76%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes dv-ripple {
  from { transform: scale(.3); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: scale(1.25); opacity: 0; }
}

@keyframes dv-cap-1 {
  0%, 4%   { opacity: 0; transform: translateY(.4em); }
  7%, 31%  { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-.4em); }
}
@keyframes dv-cap-2 {
  0%, 36%  { opacity: 0; transform: translateY(.4em); }
  39%, 55% { opacity: 1; transform: none; }
  58%, 100% { opacity: 0; transform: translateY(-.4em); }
}
@keyframes dv-cap-3 {
  0%, 59%  { opacity: 0; transform: translateY(.4em); }
  62%, 86% { opacity: 1; transform: none; }
  89%, 100% { opacity: 0; transform: translateY(-.4em); }
}

/* ── narrower screens ── */

@media (max-width: 759px) {
  .dv-stage {
    --xc: 19em;
    --xo: 25em;
    font-size: 1.28vw;
    margin-top: 28px;
    height: 50em;
  }
  /* In pixels, because the caption and the button set their own sizes. */
  .dv-caption { bottom: -10px; }
  .dv-pause { bottom: -58px; right: 50%; transform: translateX(50%); }
  .dv-hero { padding-bottom: 88px; }
}

/* ── no motion: the finished frame, held still ── */

@media (prefers-reduced-motion: reduce) {
  .dv-stage,
  .dv-stage * { animation: none !important; }
  .dv-lane, .dv-caption, .dv-pause, .dv-water i, .dv-ring { display: none; }
}

/* ── the three cards ──────────────────────────────────────────────── */

.dv-band {
  background: var(--paper);
  color: var(--ink);
  padding: 104px var(--pad) 112px;
}
.dv-band h2 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: -.02em;
}
.dv-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}
.dv-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px 32px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid rgba(16, 20, 24, .08);
  box-shadow: 0 24px 48px -36px rgba(16, 20, 24, .45);
}
.dv-card-duo { background: linear-gradient(160deg, #FBF9F6, #F4EEE6); }
.dv-glyph svg {
  display: block;
  height: 48px;
  width: auto;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
}
.dv-glyph svg .fill { fill: var(--red); stroke: none; }
.dv-glyph svg .crease { stroke-dasharray: 3 3; stroke: rgba(16, 20, 24, .4); }
.dv-card h3 {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
}
.dv-chip {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--label);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dv-chip.live { background: var(--red-dark); color: #fff; }
.dv-card p { margin: 18px 0 0; line-height: 1.6; color: rgba(16, 20, 24, .78); }
.dv-card ul { list-style: none; margin: 18px 0 0; padding: 0; }
.dv-card li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-top: 1px solid rgba(16, 20, 24, .08);
  font-size: 15px;
}
.dv-card li::before {
  content: "";
  position: absolute;
  left: 2px; top: 16px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
}

@media (max-width: 1080px) {
  .dv-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}