/* /digital-cards/ product page (page-digital-cards.php), 2026-10-31.
   Written phone first (the standard on every project since 2026-10-31): the base rules are the 390px
   phone; min-width queries add the tablet and desktop layouts. Same soft gold and navy as the cards
   pop-up and the order page, so moving between them feels like one place.
   Contrast (computed): navy on cream 15.4:1, gold ink on cream 6.2:1, white on button gold 5.6:1,
   light gold on navy 9.0:1. */

.dcp {
  --dcp-cream: #fbf3dd;
  --dcp-paper: #fffdf7;
  --dcp-navy: #0e1b39;
  --dcp-navy-2: #152a55;
  --dcp-ink-soft: rgba(14, 27, 57, 0.78);
  --dcp-gold: #a3721f;
  --dcp-gold-ink: #7a5213;   /* gold text on cream */
  --dcp-gold-lite: #e2b65a;  /* gold text on navy */
  --dcp-line: rgba(14, 27, 57, 0.13);
  --dcp-radius: 20px;
  --dcp-shadow: 0 1px 2px rgba(14, 27, 57, 0.06), 0 18px 40px -22px rgba(14, 27, 57, 0.35);
  --dcp-gut: max(16px, 5vw);
  background: var(--dcp-cream);
  color: var(--dcp-navy);
  font-size: 1.125rem;
  line-height: 1.6;
  position: relative;
  overflow-x: clip;
}
.dcp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--dcp-gut); }

/* ── Type ───────────────────────────── */
.dcp-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dcp-gold-ink);
}
.dcp-eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; }
.dcp-h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.2rem + 3vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  text-wrap: balance;
}
.dcp-p { margin: 0; color: var(--dcp-ink-soft); max-width: 40rem; }
.dcp-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }

/* ── Buttons ────────────────────────── */
.dcp-ctas { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; }
.dcp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 56px; padding: 0.9rem 1.6rem;
  border-radius: 999px; border: 2px solid transparent;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast), color var(--dur-fast);
}
.dcp-btn:hover { transform: translateY(-2px); }
.dcp-btn:active { transform: translateY(0) scale(0.98); }
.dcp-btn:focus-visible { outline: 3px solid var(--dcp-navy); outline-offset: 3px; }
.dcp-btn--gold {
  color: #fff;
  background: linear-gradient(180deg, #946619 0%, #7f5714 100%);
  box-shadow: 0 10px 24px -10px rgba(127, 87, 20, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.dcp-btn--gold:hover { box-shadow: 0 16px 32px -12px rgba(127, 87, 20, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22); color: #fff; }
.dcp-btn--navy { color: #fff; background: var(--dcp-navy); }
.dcp-btn--navy:hover { background: var(--dcp-navy-2); color: #fff; box-shadow: 0 12px 26px -12px rgba(14, 27, 57, 0.6); }
.dcp-btn--ghost { color: var(--dcp-navy); border-color: rgba(14, 27, 57, 0.28); background: rgba(255, 255, 255, 0.55); }
.dcp-btn--ghost:hover { border-color: var(--dcp-navy); background: #fff; color: var(--dcp-navy); }
.dcp-btn--ghost-light { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.dcp-btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }
.dcp-btn--ghost-light:focus-visible { outline-color: var(--dcp-gold-lite); }

/* ── Hero ───────────────────────────── */
.dcp-hero {
  padding: calc(var(--nav-h) + 2.25rem) 0 3.5rem;
  background:
    radial-gradient(60% 45% at 85% 20%, rgba(226, 182, 90, 0.35) 0%, transparent 70%),
    radial-gradient(50% 40% at 0% 100%, #fffaf0 0%, transparent 70%),
    var(--dcp-cream);
}
.dcp-hero__grid { display: grid; gap: 2.75rem; }
.dcp-hero__h {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.4rem + 4.6vw, 4.25rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
.dcp-hero__lead { margin: 0; font-size: 1.1875rem; color: var(--dcp-ink-soft); max-width: 34rem; }
/* Mr. Davis, 2026-10-31: the no-app line in bold, 2px larger than the sentence around it. */
.dcp-noapp { font-weight: 800; font-size: calc(1em + 2px); color: var(--dcp-navy); }
.dcp-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-weight: 600; }
.dcp-trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.dcp-trust svg, .dcp-lv__points svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: var(--dcp-gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

.dcp-hero__visual { position: relative; justify-self: center; width: min(68vw, 270px); padding: 0 6%; }
.dcp-phone {
  position: relative;
  aspect-ratio: 540 / 1169;
  padding: 10px;
  border-radius: 42px;
  background: linear-gradient(145deg, #23345e, #0b142c 60%);
  box-shadow: 0 0 0 1.5px rgba(226, 182, 90, 0.55), 0 40px 70px -28px rgba(14, 27, 57, 0.65), 0 12px 24px -12px rgba(14, 27, 57, 0.4);
  animation: dcp-float 7s ease-in-out infinite;
}
.dcp-phone__screen { position: relative; height: 100%; border-radius: 33px; overflow: hidden; background: #fff; }
.dcp-phone__screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; animation: dcp-cycle 16s infinite both;
}
.dcp-phone__screen img:nth-child(1) { animation-delay: 0s; }
.dcp-phone__screen img:nth-child(2) { animation-delay: 4s; }
.dcp-phone__screen img:nth-child(3) { animation-delay: 8s; }
.dcp-phone__screen img:nth-child(4) { animation-delay: 12s; }
@keyframes dcp-cycle { 0% { opacity: 0; transform: scale(1.03); } 4% { opacity: 1; transform: none; } 25% { opacity: 1; } 29% { opacity: 0; } 100% { opacity: 0; } }
@keyframes dcp-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(-0.5deg); } }

.dcp-bubble {
  position: absolute; z-index: 2; margin: 0;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.95rem; border-radius: 14px;
  background: #fff; color: var(--dcp-navy);
  font-size: 1rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(14, 27, 57, 0.5), 0 0 0 1px rgba(14, 27, 57, 0.06);
  animation: dcp-pop 16s infinite both;
}
.dcp-bubble svg { width: 20px; height: 20px; fill: none; stroke: var(--dcp-gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dcp-bubble--a { top: 18%; left: -6%; }
.dcp-bubble--b { top: 54%; right: -8%; animation-delay: 2s; }  /* clear of the Ask Professor Ai button */
@keyframes dcp-pop { 0%, 8% { opacity: 0; transform: translateY(8px) scale(0.96); } 12%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* ── Bands ──────────────────────────── */
.dcp-band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.dcp-what { background: var(--dcp-paper); border-block: 1px solid var(--dcp-line); }
.dcp-what__grid { display: grid; gap: 2rem; align-items: start; }
.dcp-who { padding: 1.5rem; border-radius: var(--dcp-radius); background: var(--dcp-cream); border: 1px solid var(--dcp-line); }
.dcp-who__h { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 700; }
.dcp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.dcp-chips li {
  padding: 0.5rem 0.9rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--dcp-line);
  font-size: 1rem; font-weight: 600;
}

/* Features: one column on phones, a bento grid on wider screens. */
.dcp-feat { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dcp-feat__item {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  border-radius: var(--dcp-radius);
  background: var(--dcp-paper); border: 1px solid var(--dcp-line);
  box-shadow: var(--dcp-shadow);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.dcp-feat__item:hover { transform: translateY(-4px); border-color: rgba(163, 114, 31, 0.45); box-shadow: 0 1px 2px rgba(14, 27, 57, 0.06), 0 26px 50px -24px rgba(14, 27, 57, 0.45); }
.dcp-feat__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 1rem;
  border-radius: 14px; background: var(--dcp-navy);
}
.dcp-feat__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--dcp-gold-lite); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dcp-feat__h { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.dcp-feat__item p { margin: 0; color: var(--dcp-ink-soft); }
.dcp-tag {
  position: absolute; top: 1.4rem; right: 1.2rem;
  padding: 0.25rem 0.65rem; border-radius: 999px;
  background: rgba(163, 114, 31, 0.12); color: var(--dcp-gold-ink);
  font-size: 1rem; font-weight: 700;
}

/* Comparison: navy band. Phones get stacked cards (each row a card); desktop gets a true table layout. */
.dcp-compare {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(226, 182, 90, 0.16) 0%, transparent 60%),
    var(--dcp-navy);
  color: #fff;
}
.dcp-head--light .dcp-eyebrow { color: var(--dcp-gold-lite); }
.dcp-head--light .dcp-p { color: rgba(255, 255, 255, 0.82); }
.dcp-cmp { display: grid; gap: 0.75rem; }
.dcp-cmp__row--head { display: none; }
.dcp-cmp__row {
  display: grid; gap: 0.6rem;
  padding: 1.15rem 1.2rem; border-radius: 16px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
}
.dcp-cmp__q { font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dcp-gold-lite); }
.dcp-cmp__them, .dcp-cmp__us { display: flex; gap: 0.6rem; align-items: flex-start; }
.dcp-cmp__them { color: rgba(255, 255, 255, 0.72); }
.dcp-cmp__us { color: #fff; font-weight: 600; }
.dcp-cmp svg { width: 22px; height: 22px; flex: none; margin-top: 0.15rem; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dcp-cmp__them svg { stroke: rgba(255, 255, 255, 0.45); }
.dcp-cmp__us svg { stroke: var(--dcp-gold-lite); }
.dcp-cmp__label { font-weight: 700; }

/* Film: the tall cut on phones (portrait, up to 767px), the wide cut everywhere else. preload="none" on both,
   so the hidden one never downloads. */
.dcp-film { background: var(--dcp-navy); color: #fff; }
.dcp-film__v { display: block; width: 100%; height: auto; border-radius: 20px; background: #0a1430;
  box-shadow: 0 0 0 1.5px rgba(226, 182, 90, 0.5), 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.dcp-film__v--wide { display: none; }
.dcp-film__v--tall { max-width: 420px; margin: 0 auto; aspect-ratio: 9 / 16; }
@media (min-width: 768px), (orientation: landscape) {
  .dcp-film__v--wide { display: block; aspect-ratio: 16 / 9; }
  .dcp-film__v--tall { display: none; }
}

/* Steps */
.dcp-steps__list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.dcp-steps__list li {
  counter-increment: step; position: relative;
  padding: 1.5rem 1.4rem 1.4rem 5rem;
  border-radius: var(--dcp-radius); background: var(--dcp-paper); border: 1px solid var(--dcp-line);
}
.dcp-steps__list li::before {
  content: counter(step);
  position: absolute; left: 1.3rem; top: 1.4rem;
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; background: var(--dcp-navy); color: var(--dcp-gold-lite);
  font-size: 1.2rem; font-weight: 800;
}
.dcp-steps__list h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.dcp-steps__list p { margin: 0; color: var(--dcp-ink-soft); }

/* Levels */
.dcp-levels { background: var(--dcp-paper); border-block: 1px solid var(--dcp-line); }
.dcp-lv { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.dcp-lv__card {
  position: relative; display: flex; flex-direction: column;
  padding: 2rem 1.5rem 1.6rem;
  border-radius: 24px; background: #fff; border: 1px solid var(--dcp-line);
  box-shadow: var(--dcp-shadow);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.dcp-lv__card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(14, 27, 57, 0.06), 0 30px 56px -26px rgba(14, 27, 57, 0.5); }
.dcp-lv__card--signature {
  background: linear-gradient(170deg, #fffaf0 0%, #fff 55%);
  border: 2px solid var(--dcp-gold);
}
.dcp-lv__badge {
  position: absolute; top: -0.85rem; left: 1.5rem;
  padding: 0.3rem 0.85rem; border-radius: 999px;
  background: var(--dcp-navy); color: var(--dcp-gold-lite);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.dcp-lv__name { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.dcp-lv__line { margin: 0.25rem 0 1.25rem; font-weight: 600; color: var(--dcp-gold-ink); }
.dcp-lv__points { display: grid; gap: 0.7rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.dcp-lv__points li { display: flex; gap: 0.6rem; align-items: flex-start; }
.dcp-lv__points svg { margin-top: 0.2rem; }
.dcp-lv__card .dcp-btn { margin-top: auto; }

/* Samples: swipe sideways on phones, a row of four on desktop. */
.dcp-smp {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%;
  gap: 1rem; margin: 0 calc(var(--dcp-gut) * -1); padding: 0.5rem var(--dcp-gut) 1.25rem;
  list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.dcp-smp > li { position: relative; scroll-snap-align: center; } /* keeps the hidden "opens in a new tab" text inside the swiper */
.dcp-smp__card {
  display: flex; flex-direction: column; gap: 0.2rem;
  color: var(--dcp-navy); text-decoration: none; text-align: center;
}
.dcp-smp__phone {
  display: block; margin-bottom: 0.9rem; padding: 7px;
  border-radius: 30px; background: #0b142c;
  box-shadow: 0 0 0 1px rgba(226, 182, 90, 0.4), 0 24px 44px -24px rgba(14, 27, 57, 0.6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.dcp-smp__phone img { display: block; width: 100%; height: auto; border-radius: 24px; }
.dcp-smp__card:hover .dcp-smp__phone { transform: translateY(-6px); box-shadow: 0 0 0 1.5px var(--dcp-gold-lite), 0 34px 56px -26px rgba(14, 27, 57, 0.7); }
.dcp-smp__card:focus-visible { outline: none; }
.dcp-smp__card:focus-visible .dcp-smp__phone { box-shadow: 0 0 0 3px var(--dcp-navy), 0 0 0 6px var(--dcp-gold-lite); }
.dcp-smp__card strong { font-size: 1.125rem; }
.dcp-smp__card > span:not(.dcp-smp__phone) { color: var(--dcp-ink-soft); font-size: 1rem; }
.dcp-smp__card .dcp-smp__open { color: var(--dcp-gold-ink); font-weight: 700; }

.dcp-looks__h { margin: 2.75rem 0 1rem; font-size: 1.375rem; font-weight: 700; text-align: center; }
.dcp-looks {
  display: grid; grid-auto-flow: column; grid-auto-columns: 34%; gap: 0.75rem;
  margin: 0 calc(var(--dcp-gut) * -1); padding: 0 var(--dcp-gut) 0.75rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.dcp-looks li { text-align: center; font-size: 1rem; font-weight: 600; scroll-snap-align: start; }
.dcp-looks img {
  display: block; width: 100%; height: auto; aspect-ratio: 540 / 760; object-fit: cover; object-position: top;
  margin-bottom: 0.35rem; border-radius: 12px; border: 1px solid var(--dcp-line);
  box-shadow: 0 10px 20px -14px rgba(14, 27, 57, 0.5);
}

/* FAQ */
.dcp-faq__list { display: grid; gap: 0.75rem; }
.dcp-faq__item { border-radius: 16px; background: var(--dcp-paper); border: 1px solid var(--dcp-line); transition: border-color var(--dur-fast), box-shadow var(--dur-base); }
.dcp-faq__item[open] { border-color: rgba(163, 114, 31, 0.5); box-shadow: var(--dcp-shadow); }
.dcp-faq__item summary {
  position: relative; list-style: none; cursor: pointer;
  min-height: 56px; padding: 1.05rem 3.5rem 1.05rem 1.25rem;
  font-size: 1.125rem; font-weight: 700; line-height: 1.4;
}
.dcp-faq__item summary::-webkit-details-marker { display: none; }
.dcp-faq__item summary::after {
  content: ''; position: absolute; right: 1.3rem; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 2.5px solid var(--dcp-gold); border-bottom: 2.5px solid var(--dcp-gold);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out);
}
.dcp-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.dcp-faq__item summary:hover { color: var(--dcp-gold-ink); }
.dcp-faq__item summary:focus-visible { outline: 3px solid var(--dcp-navy); outline-offset: 2px; border-radius: 16px; }
.dcp-faq__item p { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--dcp-ink-soft); }

/* Close */
.dcp-close {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  text-align: center; color: #fff;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(226, 182, 90, 0.22) 0%, transparent 65%),
    var(--dcp-navy);
}
.dcp-close__h {
  margin: 0 auto; max-width: 46rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ── Wider screens ──────────────────── */
@media (min-width: 560px) {
  .dcp-ctas { flex-direction: row; flex-wrap: wrap; }
  .dcp-ctas--center { justify-content: center; }
  .dcp-feat { grid-template-columns: repeat(2, 1fr); }
  .dcp-smp { grid-auto-columns: 44%; }
  .dcp-looks { grid-auto-columns: 22%; }
}
@media (min-width: 768px) {
  .dcp-lv { grid-template-columns: repeat(2, 1fr); align-items: stretch; }  /* four cards: 2 x 2 on tablets, a row of four on wide screens */
  .dcp-lv__card { padding: 2.25rem 1.6rem 1.75rem; }
  .dcp-steps__list { grid-template-columns: repeat(3, 1fr); }
  .dcp-steps__list li { padding: 5rem 1.5rem 1.6rem; }
  .dcp-steps__list li::before { top: 1.5rem; left: 1.5rem; }
  .dcp-cmp { gap: 0; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); }
  .dcp-cmp__row, .dcp-cmp__row--head {
    display: grid; grid-template-columns: 0.8fr 1fr 1.1fr; gap: 1.5rem; align-items: center;
    padding: 1.1rem 1.5rem; border-radius: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: none;
  }
  .dcp-cmp__row--head { border-top: 0; background: rgba(255, 255, 255, 0.06); font-weight: 700; }
  .dcp-cmp__row--head .dcp-cmp__us { color: var(--dcp-gold-lite); }
  .dcp-cmp__row .dcp-cmp__us { background: rgba(226, 182, 90, 0.08); margin: -1.1rem -1.5rem -1.1rem 0; padding: 1.1rem 1.5rem; align-self: stretch; align-items: center; }
  .dcp-cmp__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dcp-looks { grid-auto-flow: row; grid-template-columns: repeat(8, 1fr); margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 960px) {
  .dcp-hero { padding: calc(var(--nav-h) + 4rem) 0 5.5rem; }
  .dcp-hero__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 4rem; }
  .dcp-hero__visual { width: min(100%, 340px); }
  .dcp-what__grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  .dcp-feat { grid-template-columns: repeat(3, 1fr); }
  .dcp-lv { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .dcp-lv__card { padding: 2rem 1.25rem 1.5rem; }
  .dcp-smp { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0.5rem 0 0; overflow: visible; }
  .dcp-faq__wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start; }
  .dcp-faq__wrap .dcp-head { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .dcp-phone, .dcp-bubble { animation: none; }
  .dcp-bubble { opacity: 1; }
  .dcp-phone__screen img { animation: none; }
  .dcp-phone__screen img:first-child { opacity: 1; }
  .dcp-btn, .dcp-feat__item, .dcp-lv__card, .dcp-smp__phone { transition: none; }
}