.dl { max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }

.dl-hero { display: grid; gap: 40px; padding-top: 24px; }
.dl-kicker { margin: 0 0 18px; color: var(--muted); font-size: 1rem; font-weight: 500; }
.dl-title { font-size: clamp(2.75rem, 1.5rem + 4.8vw, 5.25rem); font-weight: 350; line-height: 1; letter-spacing: -0.02em; margin: 0 0 24px; max-width: 11ch; }
.dl-lede { font-size: var(--t-lede); line-height: 1.5; margin: 0 0 32px; max-width: 36ch; }
@media (min-width: 960px) {
  .dl-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 56px; padding-top: 40px; }
}

.dl-stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.dl-store {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 210px; min-height: 66px; padding: 10px 22px;
  border-radius: 12px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; line-height: 1.25;
}
.dl-store-where { font: 400 1.375rem/1.15 var(--serif); font-optical-sizing: auto; }
.dl-store-when { font-size: var(--t-small); color: var(--muted); }
a.dl-store:hover { background: var(--vellum); }
.dl-store-soon { border-style: dashed; border-color: var(--muted); }
.dl-store-first { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dl-store-first .dl-store-when { color: var(--paper); }
a.dl-store-first:hover { background: var(--chlorophyll); border-color: var(--chlorophyll); color: var(--on-chlorophyll); }
a.dl-store-first:hover .dl-store-when { color: var(--on-chlorophyll); }
@media (max-width: 599px) { .dl-store { flex: 1 1 100%; } }

.dl-web { margin: 0 0 28px; max-width: 46ch; color: var(--muted); font-size: 1rem; }

.dl-qr { display: none; }
@media (min-width: 960px) {
  .dl-qr { display: flex; align-items: center; gap: 20px; max-width: 460px; padding-top: 24px; border-top: 1px solid var(--line); }
}
.dl-qr-code { flex: none; width: 116px; height: 116px; padding: 6px; border-radius: 8px; background: var(--plate); fill: var(--plate-ink); }
.dl-qr-text { margin: 0; max-width: 28ch; color: var(--muted); font-size: var(--t-small); }

.dl-specimen { position: relative; width: 100%; max-width: 640px; margin: 0; justify-self: center; container-type: inline-size; }
.dl-sheet { margin-left: 26cqi; width: 74cqi; border-radius: 3px; }
.dl-caption { margin-left: 26cqi; }
.dl-phone {
  position: absolute; left: 0; top: 7cqi; width: 50cqi; aspect-ratio: 9 / 19; padding: 1.5cqi;
  border-radius: 7.5cqi; background: var(--plate-ink);
  box-shadow: 0 0 0 1px var(--line), 0 3cqi 8cqi -2cqi color-mix(in srgb, var(--plate-ink) 45%, transparent);
}
.dl-phone::before {
  content: ""; position: absolute; z-index: 1; top: 3cqi; left: 50%; width: 13cqi; height: 3.6cqi;
  translate: -50% 0; border-radius: 2cqi; background: var(--plate-ink);
}

.ph-screen {
  display: flex; flex-direction: column; gap: 1.5cqi; height: 100%; overflow: hidden; padding-bottom: 3.2cqi;
  border-radius: 6cqi; background: var(--paper); color: var(--ink); font: 400 2.05cqi/1.4 var(--sans);
}
.ph-screen p, .ph-screen ol { margin: 0; }
.ph-screen > :not(.ph-photo) { margin-inline: 3.6cqi; }
.ph-photo { flex: none; height: 31cqi; background: var(--plate); }
.ph-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; mix-blend-mode: multiply; }
.ph-pill { align-self: flex-start; margin-top: 0.6cqi; padding: 0.5cqi 1.7cqi; border-radius: 99px; background: var(--amber-soft); color: var(--amber-ink); font-size: 1.75cqi; font-weight: 600; }
.ph-name { font: 400 4.4cqi/1.05 var(--serif); }
.ph-meta { margin-top: -0.9cqi; color: var(--muted); font-size: 1.8cqi; }
.ph-meta i { font-size: 1em; }
.ph-issue { font: 500 2.75cqi/1.2 var(--serif); }
.ph-change { padding: 1.6cqi 2cqi; border-radius: 1.8cqi; background: var(--vellum); }
.ph-fix { margin-top: 0.5cqi; color: var(--chlorophyll); font-size: 1.8cqi; font-weight: 600; }
.ph-steps { display: grid; gap: 1.2cqi; padding: 0; list-style: none; }
.ph-step { display: flex; align-items: flex-start; gap: 1.5cqi; }
.ph-num {
  flex: none; display: grid; place-items: center; width: 3.3cqi; height: 3.3cqi; border-radius: 50%;
  background: var(--chlorophyll); color: var(--on-chlorophyll); font-size: 1.75cqi; font-weight: 700; line-height: 1;
}
.ph-ask { margin-top: auto; padding: 1.4cqi 2.6cqi; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); }

.dl-callout {
  position: absolute; left: 58cqi; max-width: 38cqi; margin: 0; padding: 0.2em 0.45em;
  border-radius: 3px; background: color-mix(in srgb, var(--plate) 86%, transparent); color: var(--plate-ink);
  font: italic 400 max(0.8125rem, 2.5cqi)/1.25 var(--serif); font-optical-sizing: auto;
}
.dl-callout::before { content: ""; position: absolute; right: 100%; top: 0.75em; width: 10.8cqi; border-top: 1px solid var(--plate-ink); }
.dl-callout::after {
  content: ""; position: absolute; top: calc(0.75em - 4px); left: calc(-10.8cqi - 4px); width: 7px; height: 7px;
  border-radius: 50%; background: var(--plate); border: 1px solid var(--plate-ink);
}
.dl-callout-issue { top: 54cqi; }
.dl-callout-change { top: 66cqi; }
.dl-callout-steps { top: 82cqi; }

.dl-does { padding-top: 112px; }
.dl-diary { display: grid; gap: 24px; align-items: center; margin: 8px 0 64px; }
.dl-diary-text p { margin: 0; max-width: 44ch; color: var(--muted); }
@media (min-width: 960px) { .dl-diary { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.dl-promise-title { margin: 18px 0 8px; font: 400 var(--t-h3)/1.25 var(--serif); }
.dl-promise-lead { margin-top: 0; font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.15; }
.dl-promises { display: grid; gap: 48px; margin: 0; padding: 0; list-style: none; }
.dl-promise { padding-top: 20px; border-top: 1px solid var(--rule); }
.dl-promise p { margin: 0; max-width: 38ch; color: var(--muted); }
.dl-promise-art { width: 100%; max-width: 260px; }
@media (max-width: 759px) {
  .dl-promises { gap: 28px; }
  .dl-promise { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; align-content: start; }
  .dl-promise-art { grid-row: span 2; }
  .dl-promise-title { margin-top: 0; }
}
@media (min-width: 760px) { .dl-promises { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.dl-share { max-width: 70ch; margin: 56px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.dl-share strong { color: var(--ink); font-weight: 600; }

.dl-trust { margin-top: 112px; padding: 40px 24px; border-radius: 12px; background: var(--vellum); }
.dl-trust-list { display: grid; margin: 0; }
.dl-trust-item { padding: 18px 0; border-top: 1px solid var(--rule); }
.dl-trust-item dt { margin: 0 0 6px; font: 400 1.375rem/1.25 var(--serif); }
.dl-trust-item dd { margin: 0; max-width: 40ch; color: var(--muted); }
@media (min-width: 760px) {
  .dl-trust { padding: 48px 48px 40px; }
  .dl-trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

.dl-end { display: grid; gap: 24px; align-items: center; padding-top: 112px; }
.dl-end-art { max-width: 220px; }
.dl-end-text > p:not(.dl-end-web) { max-width: 40ch; margin: 0 0 24px; }
.dl-end-web { margin: 8px 0 0; }
@media (min-width: 900px) { .dl-end { grid-template-columns: 340px minmax(0, 1fr); gap: 64px; } .dl-end-art { max-width: 340px; } }