.type-d {
  /* One unit is one pixel in the 527px-wide design reference. */
  --d: calc(min(100vw, 460px) / 527);
  --d-payment-sky: #00ace8;
}
.type-d #app { max-width: 460px; margin-inline: auto; background: #f7f8f8; }
.d-home {
  background: linear-gradient(
    to bottom,
    var(--d-payment-sky),
    var(--d-payment-sky) calc(145 * var(--d)),
    #e2f4fb calc(395 * var(--d)),
    #f7f8f8 calc(560 * var(--d))
  );
  color: #15191d;
}
.d-home .a-status {
  height: calc(65 * var(--d));
  padding: calc(5 * var(--d)) calc(35 * var(--d)) 0 calc(60 * var(--d));
  background: transparent;
  color: #050b15;
  font-size: calc(24 * var(--d));
}
.d-home .d-header {
  height: calc(73 * var(--d));
  padding: 0 calc(23 * var(--d));
  background: transparent;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.d-header img { width: calc(140 * var(--d)); height: auto; }
.d-header-actions { display: flex; align-items: center; gap: calc(19 * var(--d)); }
.d-header .iconbtn { width: calc(37 * var(--d)); height: calc(42 * var(--d)); padding: 0; color: inherit; }
.d-header .iconbtn svg { width: calc(34 * var(--d)); height: calc(34 * var(--d)); stroke-width: 1.45; }
.d-support {
  color: white;
  background: #ffffff12;
  border: 3px double #f6fbff;
  border-radius: 99px;
  padding: calc(5 * var(--d)) calc(8 * var(--d));
  font-size: calc(16 * var(--d));
  white-space: nowrap;
}
.d-main { padding: 0 0 calc(135 * var(--d)); }
.d-greeting, .d-banner { margin-inline: calc(23 * var(--d)) calc(24 * var(--d)); }
.d-greeting {
  height: calc(70 * var(--d));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--d));
  color: white;
}
.d-greeting h1 { margin: 0; font-size: calc(26 * var(--d)); line-height: 1; font-weight: 550; white-space: nowrap; }
.d-greeting strong { font-weight: 800; }
.d-points {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex-shrink: 0;
  border: 1px solid #ffffffa6;
  border-radius: 99px;
  background: #ffffffa8;
  color: #004877;
  width: calc(110 * var(--d));
  height: calc(44 * var(--d));
  font-size: calc(21 * var(--d));
  font-weight: 650;
  white-space: nowrap;
}
.d-points::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, #fff9 50%, transparent 75%);
  transform: translateX(-110%);
  animation: d-points-sheen 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes d-points-sheen {
  0%, 38% { transform: translateX(-110%); }
  78%, 100% { transform: translateX(110%); }
}
.d-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: calc(15 * var(--d));
  width: calc(100% - 47 * var(--d));
  height: calc(165 * var(--d));
  padding: calc(24 * var(--d)) calc(29 * var(--d));
  border: 0;
  border-radius: calc(28 * var(--d));
  text-align: left;
  color: white;
  background:
    linear-gradient(90deg, #145495d9, #24598a8c 38%, transparent 72%),
    url('d-delivery.webp') center 72% / cover;
}
.d-banner span { font-size: calc(20 * var(--d)); line-height: 1.2; font-weight: 500; }
.d-banner strong { font-size: calc(26 * var(--d)); line-height: 1.37; font-weight: 680; }
.d-features {
  margin: calc(22 * var(--d)) calc(24 * var(--d)) 0 calc(27 * var(--d));
  display: grid;
  grid-template-columns: 232fr 225fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(17 * var(--d)) calc(18 * var(--d));
  height: calc(251 * var(--d));
}
.d-features button {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: calc(21 * var(--d));
  background: white;
  color: #151515;
  box-shadow: 0 calc(4 * var(--d)) calc(16 * var(--d)) #26324508;
  text-align: left;
  padding: calc(21 * var(--d));
  display: flex;
  align-items: flex-start;
}
.d-features button strong { position: relative; z-index: 1; font-size: calc(25 * var(--d)); line-height: 1.2; font-weight: 680; }
.d-features .d-payment { grid-row: span 2; background: var(--d-payment-sky); color: white; }
.d-features button > img { position: absolute; bottom: calc(-3 * var(--d)); right: calc(-1 * var(--d)); width: 48%; height: 84%; object-fit: contain; object-position: right bottom; }
.d-owner { position: absolute; left: 19%; right: 5%; top: 33%; bottom: calc(-4 * var(--d)); pointer-events: none; }
.d-owner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; animation-duration: 3.8s; }
@media (prefers-reduced-motion: reduce) {
  .d-owner img, .d-points::after { animation: none; }
}
.d-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  height: calc(170 * var(--d));
  padding-inline: calc(9 * var(--d));
}
.d-shortcuts button {
  border: 0;
  border-right: 1px solid #eef0f1;
  background: none;
  color: #63696b;
  display: grid;
  justify-items: center;
  gap: calc(10 * var(--d));
  font-size: calc(17 * var(--d));
  line-height: 1.2;
}
.d-shortcuts button:last-child { border-right: 0; }
.d-shortcuts svg { color: #1c2730; width: calc(44 * var(--d)); height: calc(44 * var(--d)); }
.d-history, .d-notices {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: white;
  color: #272a2c;
  text-align: left;
  padding: calc(22 * var(--d)) calc(34 * var(--d));
}
.d-history { min-height: calc(88 * var(--d)); font-size: calc(22 * var(--d)); font-weight: 500; }
.d-history strong { display: flex; align-items: center; gap: calc(10 * var(--d)); }
.d-history svg { width: calc(19 * var(--d)); height: calc(19 * var(--d)); }
.d-notices { position: relative; overflow: hidden; margin-top: calc(19 * var(--d)); min-height: calc(192 * var(--d)); }
.d-notices > span { display: grid; gap: calc(8 * var(--d)); z-index: 1; font-size: calc(20 * var(--d)); }
.d-notices strong { max-width: calc(290 * var(--d)); font-size: calc(25 * var(--d)); line-height: 1.2; }
.d-notices img { position: absolute; top: 50%; right: calc(29 * var(--d)); width: calc(166 * var(--d)); height: calc(164 * var(--d)); transform: translateY(-50%); object-fit: contain; }
.type-d .d-nav { max-width: 460px; padding: 0 calc(22 * var(--d)); justify-content: space-between; align-items: start; height: calc(109 * var(--d)); }
.type-d .d-nav a { height: calc(84 * var(--d)); width: 20%; padding: 0; display: grid; place-items: center; color: #2867a2; }
.type-d .d-nav a > svg { margin: 0; width: calc(37 * var(--d)); height: calc(37 * var(--d)); }
.type-d .d-nav .d-nav-pay {
  flex: 0 0 calc(84 * var(--d));
  width: calc(84 * var(--d));
  height: calc(84 * var(--d));
  aspect-ratio: 1;
  margin-top: calc(-42 * var(--d));
  border-radius: 50%;
  background: #2977ef;
  box-shadow: 0 0 0 calc(8 * var(--d)) #e1edf9b8, 0 4px 10px #2977ef49;
}
.d-nav-pay img { width: calc(42 * var(--d)); height: calc(42 * var(--d)); filter: invert(1); }
.d-avatar { width: calc(41 * var(--d)); height: calc(41 * var(--d)); border-radius: 50%; background: #edf6ff; object-fit: cover; }
.d-nav::after { content: ''; position: absolute; bottom: calc(7 * var(--d)); left: 32%; width: 36%; height: calc(6 * var(--d)); border-radius: 99px; background: #101010; pointer-events: none; }

@media (min-width: 701px) {
  .review-grid.a-only.with-d { max-width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Revision: remove the black iOS home-indicator line in D. */
.type-d .d-nav::after { display: none !important; content: none !important; }
/* Non-home destinations in D are intentionally blank white previews. */
.type-d #app:has(.d-blank-detail) { background: #fff !important; }
.d-blank-detail { min-height: 100dvh; background: #fff; }