/* Income Launch · product: scan (AI matching theatre) + pick (the swipe deck of real products) */

/* ================= Scan ================= */
.scan { max-width: 920px; margin: 0 auto; }
.scan .q-head { margin-bottom: 26px; }
.scan .q-title.is-swap { animation: label-swap .4s var(--ease) both; }
.scan-grid { display: grid; gap: 20px; justify-items: center; }
.scan-stage { display: grid; justify-items: center; gap: 14px; }

/* The lens: real product photos crossfading under a soft sheen, two calm rings pulsing out */
.scan-orb { position: relative; width: 124px; height: 124px; flex: none; }
.scan-orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue-300); opacity: 0; animation: il-scan-ring 2.4s ease-out infinite; }
/* A shorter reach than the call card's ring (1.75): the outer ring stays clear of the title above the orb */
@keyframes il-scan-ring { from { transform: scale(1); opacity: .55; } to { transform: scale(1.38); opacity: 0; } }
.scan-orb .ring + .ring { animation-delay: 1.2s; }
.scan-lens {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, var(--blue-100) 58%, var(--blue-200) 100%);
  box-shadow: 0 0 0 6px var(--blue-50), 0 0 0 7px var(--blue-100), 0 18px 40px -18px rgba(34, 90, 234, .6);
}
.scan-lens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s var(--ease); }
.scan-lens img.is-on { opacity: 1; }
.scan-lens::after {
  content: ""; position: absolute; left: -20%; right: -20%; height: 46%; top: -46%; z-index: 2;
  background: linear-gradient(180deg, rgba(240, 244, 254, 0) 0%, rgba(240, 244, 254, .72) 50%, rgba(240, 244, 254, 0) 100%);
  animation: scan 2.2s linear infinite;
}
.scan-done {
  position: absolute; inset: 0; z-index: 3; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.5);
  transition: opacity .25s, transform .5s cubic-bezier(.2, 1.5, .4, 1);
}
.scan-done svg { width: 44%; height: 44%; stroke-width: 2.4; }
.scan.is-found .scan-done { opacity: 1; transform: none; }
.scan.is-found .ring, .scan.is-found .scan-lens::after { animation: none; opacity: 0; }

/* The odometer */
.scan-count { text-align: center; }
.scan-count b { display: block; font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.scan-count span { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--muted); }

/* Log lines: waiting → running (spinner) → done (blue check) */
.scan-log { width: 100%; max-width: 480px; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.scan-log li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start;
  padding: 11px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--muted);
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.scan-log li b { font-weight: 700; font-variant-numeric: tabular-nums; }
.scan-log li.is-run { color: var(--fg); border-color: var(--blue-200); box-shadow: 0 0 0 3px var(--blue-50); }
.scan-log li.is-done { color: var(--fg); }
.scan-log .st { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--on-primary); }
.scan-log .st svg { width: 13px; height: 13px; opacity: 0; stroke-width: 2.6; }
.scan-log li.is-run .st { border: 2px solid var(--blue-100); border-top-color: var(--primary); animation: spin .8s linear infinite; }
.scan-log li.is-done .st { background: var(--primary); border-color: var(--primary); animation: check-in .35s var(--ease); }
.scan-log li.is-done .st svg { opacity: 1; }

/* The lead's answers: faint placeholders that pop in blue as they are matched */
.scan-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.scan-chips .pill-soft { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--border); transition: background .3s, color .3s, box-shadow .3s; }
.scan-chips .pill-soft.is-in { background: var(--blue-50); color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-100); animation: il-chip-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes il-chip-pop { 40% { transform: scale(1.12); } }

/* Tray: matched products land here */
.scan-tray { margin: 22px auto 0; width: fit-content; max-width: 100%; padding: 14px 16px 16px; border-radius: var(--radius-lg); background: var(--surface-2); }
.scan-tray-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--fg-2); }
.scan-tray-h b { font-size: 17px; color: var(--primary); font-variant-numeric: tabular-nums; }
.scan-tray-h b.is-bump { animation: bump .4s var(--ease); }
.scan-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.scan-slots li { position: relative; width: 48px; height: 48px; border-radius: 12px; border: 1.5px dashed var(--border-strong); background: var(--surface); }
.scan-slots li.is-filled { border-color: transparent; background: transparent; }
.scan-slots img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 14px -8px rgba(49, 30, 23, .45); }
.scan-slots li.is-filled img { margin: -1.5px; width: calc(100% + 3px); height: calc(100% + 3px); }
.scan-slots li.is-more { border: 1.5px solid var(--blue-200); background: var(--blue-50); color: var(--blue-700); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

@media (min-width: 900px) {
  .scan .q-head { margin-bottom: 34px; }
  .scan-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 44px; }
  .scan-stage { justify-self: center; gap: 18px; }
  .scan-orb { width: 172px; height: 172px; }
  .scan-count b { font-size: 46px; }
  .scan-log { max-width: none; }
  .scan-tray { margin-top: 28px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 22px; padding: 14px 20px; }
  .scan-tray-h { margin: 0; display: grid; gap: 2px; justify-items: start; }
}
/* Phones: everything above the fold — lens beside the odometer, the tray of matches next (it stays clear of the CTA bar
   that slides in at the end), then the compact lines. The title keeps two lines of room so the found title never shifts. */
@media (max-width: 720px) {
  .scan { display: flex; flex-direction: column; }
  .scan-grid { display: contents; }
  .scan .q-head { margin-bottom: 18px; }
  .scan .eyebrow { margin-bottom: 6px; }
  .scan .q-title { font-size: 25px; min-height: 2.24em; }
  .scan .q-sub { display: none; }
  .scan-stage { order: 1; }
  .scan-tray { order: 2; }
  .scan-log { order: 3; }
  .scan-grid { gap: 12px; }
  .scan-stage { display: flex; align-items: center; justify-content: center; gap: 20px; }
  .scan-orb { width: 84px; height: 84px; }
  .scan-orb .scan-lens { box-shadow: 0 0 0 5px var(--blue-50), 0 0 0 6px var(--blue-100), 0 14px 30px -16px rgba(34, 90, 234, .6); }
  .scan-count { text-align: left; }
  .scan-count b { font-size: 32px; }
  .scan-count span { margin-top: 2px; }
  .scan-log { gap: 6px; }
  .scan-log li { padding: 7px 12px; font-size: 14px; column-gap: 10px; row-gap: 6px; }
  .scan-log .st { width: 22px; height: 22px; }
  .scan-chips { grid-column: 1 / -1; gap: 5px; }
  .scan-chips .pill-soft { padding: 4px 9px; }
  .scan-tray { margin: 14px 0 12px; width: auto; padding: 10px 12px 12px; }
  .scan-tray-h { margin-bottom: 8px; }
  .scan-slots { gap: 6px; }
  .scan-slots li { width: 40px; height: 40px; border-radius: 10px; }
  .scan-slots img { border-radius: 10px; }
}

/* ================= Pick: the swipe deck ================= */
.main[data-step="pick"] .q-head { margin-bottom: 22px; }
/* The deck paints above the side card so a flung card flies over it */
.pick { container: deck / inline-size; position: relative; z-index: 5; max-width: 760px; margin: 0 auto; }
.dk-bar, .dk-stack, .dk-actions { max-width: 440px; margin-left: auto; margin-right: auto; }

/* Counter + dots */
.dk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 22px; }
.dk-count { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.dk-count b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.dk-dots { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.dk-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--blue-100); transition: width .3s var(--ease), background .3s; }
.dk-dots i.is-done { background: var(--blue-300); }
.dk-dots i.is-on { width: 20px; background: var(--primary); }

/* The stack: every card shares one grid cell (height = the tallest), two cards peek out behind the top one */
.dk-stack { --lift: 0; position: relative; display: grid; padding-bottom: 20px; }
.dk-stack > .dk-card { grid-area: 1 / 1; }
.dk-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "head" "money" "why";
  align-content: start; gap: 14px; padding: 10px 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab;
  transform-origin: 50% 100%; transition: transform .42s var(--ease), box-shadow .3s, opacity .3s;
}
.dk-card[data-pos="0"] { z-index: 3; }
.dk-card[data-pos="1"] { z-index: 2; pointer-events: none; box-shadow: var(--shadow-sm); transform: translateY(calc(10px - 10px * var(--lift))) scale(calc(.955 + .045 * var(--lift))); }
.dk-card[data-pos="2"] { z-index: 1; pointer-events: none; box-shadow: none; transform: translateY(calc(20px - 10px * var(--lift))) scale(calc(.91 + .045 * var(--lift))); }
.dk-card[data-pos="out"] { z-index: 4; pointer-events: none; }
.dk-card.is-out { transition: transform .38s cubic-bezier(.45, 0, .85, .55); }
.dk-card.is-dragging, .dk-stack.is-dragging .dk-card { transition: none; }
.dk-card.is-dragging { cursor: grabbing; box-shadow: var(--shadow-lg); }
.dk-card.is-spring { transition: transform .5s cubic-bezier(.2, 1.35, .4, 1); }
.dk-card.is-new { animation: il-dk-in .45s var(--ease) both; }
.dk-card.is-chosen { box-shadow: 0 0 0 3px var(--primary), var(--shadow-lg); animation: pop .38s var(--ease); }
@keyframes il-dk-in { from { opacity: 0; } }

/* Hero: square photo on its low-quality placeholder, tap to flip through the gallery */
.dk-hero {
  grid-area: hero; position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden;
  background-color: var(--surface-2); background-position: center; background-size: cover; background-repeat: no-repeat; cursor: inherit; text-align: left;
}
.dk-hero img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transition: opacity .25s; }
.dk-hero img.is-swapping { opacity: .45; }
.dk-hero:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.dk-badges { position: absolute; left: 12px; top: 12px; right: 12px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.dk-badges .badge { background: rgba(255, 254, 250, .95); color: var(--fg); padding: 6px 10px; }
.dk-badges .badge svg { width: 14px; height: 14px; color: var(--primary); }
.dk-badges .badge svg.is-star { color: var(--star); }
.dk-match {
  display: inline-flex; align-items: center; gap: 6px; width: max-content;
  padding: 7px 13px 7px 11px; border-radius: var(--pill); background: var(--primary); color: var(--on-primary);
  font-size: 14px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 8px 18px -8px rgba(34, 90, 234, .75);
}
.dk-match svg { width: 15px; height: 15px; }
/* Caption (narrow cards): a soft scrim like the reveal portrait, match + name + profit in white */
.dk-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; justify-items: start; gap: 2px;
  padding: 72px 16px 14px; pointer-events: none; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(43, 29, 22, 0) 0%, rgba(43, 29, 22, .46) 46%, rgba(43, 29, 22, .74) 100%);
}
.dk-cap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 8px; }
.dk-cap-also { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-200); }
.dk-cap-also svg { width: 15px; height: 15px; }
.dk-cap-name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, .25); }
.dk-cap-sub { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.dk-pics { display: flex; gap: 5px; padding: 6px 8px; border-radius: var(--pill); background: rgba(43, 29, 22, .42); }
.dk-pics i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: background .2s; }
.dk-pics i.is-on { background: #FFFFFF; }

/* SKIP / SAVE stamps fade in with the drag (--skip / --save are set on the card, 0 → 1) */
.dk-stamp {
  position: absolute; top: 22%; z-index: 2; padding: 6px 16px; border: 3px solid currentColor; border-radius: 14px;
  background: rgba(255, 254, 250, .92); font-size: 28px; font-weight: 800; letter-spacing: .12em; line-height: 1.1;
  text-transform: uppercase; pointer-events: none; transition: opacity .2s;
}
.dk-stamp.is-save { left: 16px; color: var(--primary); opacity: var(--save, 0); transform: rotate(-12deg) scale(calc(.85 + .15 * var(--save, 0))); }
.dk-stamp.is-skip { right: 16px; color: var(--fg-2); opacity: var(--skip, 0); transform: rotate(12deg) scale(calc(.85 + .15 * var(--skip, 0))); }
.dk-card.is-dragging .dk-stamp { transition: none; }

/* Body */
.dk-head { grid-area: head; min-width: 0; padding: 0 6px; }
.dk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.dk-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dk-eyebrow svg { width: 15px; height: 15px; }
.dk-eyebrow.is-also { color: var(--blue-700); }
.dk-eb-also { display: none; }
/* On narrow cards the name is on the photo; the heading stays for screen readers */
.dk-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dk-tagline { margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.dk-reasons { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.dk-reasons .pill-soft { line-height: 1.3; }
.dk-reasons .pill-soft svg { stroke-width: 2.4; }

/* Money: supplier cost and your price side by side, profit per sale highlighted with its margin */
.dk-money { grid-area: money; margin: 0 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dk-m { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.dk-m dt { font-size: 14px; line-height: 1.3; color: var(--muted); }
.dk-m dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dk-m.is-profit { grid-column: 1 / -1; background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-100); }
.dk-m.is-profit dt { color: var(--blue-700); font-weight: 600; }
.dk-m.is-profit dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 22px; }
.dk-margin { font-size: 14px; font-weight: 700; letter-spacing: 0; padding: 4px 10px; border-radius: var(--pill); background: var(--surface); color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-200); white-space: nowrap; }

.dk-why { grid-area: why; margin: 0 6px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.dk-why svg { width: 18px; height: 18px; color: var(--primary); margin-top: 1px; }
.dk-why b { color: var(--fg); font-weight: 700; }

/* Skeleton while the catalogue loads */
.dk-card.is-skeleton { cursor: default; }
.dk-card.is-skeleton .dk-head { display: grid; gap: 10px; padding-bottom: 8px; }
.dk-card.is-skeleton .sk { display: block; border-radius: 8px; height: 16px; }
.dk-card.is-skeleton .sk-l { height: 26px; width: 70%; }
.dk-card.is-skeleton .sk-m { width: 90%; }
.dk-card.is-skeleton .sk-s { width: 45%; }

/* Actions under the card: undo · skip · save · shortlist (labels share one baseline) */
.dk-actions { display: flex; justify-content: center; align-items: flex-start; gap: 18px; margin-top: 2px; }
.dk-act { display: grid; justify-items: center; gap: 6px; min-width: 64px; font-size: 14px; font-weight: 600; color: var(--muted); touch-action: manipulation; }
.dk-circle {
  position: relative; width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--fg-2); box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.dk-circle svg { width: 26px; height: 26px; }
.dk-act:hover .dk-circle { transform: translateY(-2px); box-shadow: var(--shadow); }
.dk-act:active .dk-circle { transform: scale(.94); }
.dk-act:focus-visible { outline: none; }
.dk-act:focus-visible .dk-circle { box-shadow: 0 0 0 3px var(--ring); }
.dk-act.is-skip:hover .dk-circle { border-color: var(--fg-2); color: var(--fg); }
.dk-act.is-save .dk-circle { background: var(--blue-50); border-color: var(--blue-200); color: var(--primary); }
.dk-act.is-save:hover .dk-circle { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dk-act.is-save .dk-lbl { color: var(--blue-700); }
.dk-act.is-small { min-width: 56px; }
.dk-act.is-small .dk-circle { width: 48px; height: 48px; margin: 8px 0; }
.dk-act.is-small .dk-circle svg { width: 20px; height: 20px; }
.dk-act.is-list .dk-circle { color: var(--primary); }
.dk-act .n { position: absolute; top: -6px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 800; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.dk-act .n[hidden] { display: none; }
.dk-act[disabled] { cursor: default; color: var(--muted-2); }
.dk-act[disabled] .dk-circle { opacity: .5; transform: none; box-shadow: none; }
.dk-act.is-hit .dk-circle { animation: bump .4s var(--ease); }
.dk-act.is-save.is-hit .dk-circle svg path { fill: currentColor; }

/* Wide container (tablet, desktop next to the side card): photo left, story right, the numbers across the bottom */
@container deck (min-width: 640px) {
  .dk-bar, .dk-stack, .dk-actions { max-width: 760px; }
  .dk-card { grid-template-columns: 39% minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "hero head" "hero why" "money money"; gap: 14px 24px; padding: 14px; }
  .dk-hero { align-self: start; }
  .dk-cap { padding: 12px; background: none; }
  .dk-cap-row { margin: 0; }
  .dk-cap-name, .dk-cap-sub, .dk-cap-also { display: none; }
  .dk-eb-also { display: inline; }
  .dk-head { padding: 6px 4px 0 0; }
  .dk-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin-top: 6px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
  .dk-tagline { color: var(--muted); }
  .dk-why { margin: 0 4px 0 0; align-self: end; }
  .dk-money { margin: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
  .dk-m.is-profit { grid-column: auto; }
  .dk-stamp { font-size: 30px; }
}

/* Shortlist (after the deck, or from the shortlist button) */
.sl { max-width: 640px; margin: 0 auto; }
.sl-rows .row-label { font-size: 17px; }
.sl-actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; }
.sl-actions .btn-ghost { gap: 8px; }
.sl-actions .btn-link { min-height: 44px; }

/* Desktop and tablet: the buttons carry the instructions, so the deck fits above the CTA bar */
@media (min-width: 721px) {
  .dk-headwrap .q-sub { display: none; }
}
/* Phones: title only, pulled up under the store strip, so the photo, match and name sit above the CTA bar. Undo, Skip,
   Save and Shortlist ride just above the CTA bar (sticky), so swipe-and-compare is always in reach, not 500px down. */
@media (max-width: 720px) {
  .dk-headwrap { margin-top: -18px; }
  .dk-headwrap .eyebrow, .dk-headwrap .q-sub { display: none; }
  .main[data-step="pick"] .q-head { margin-bottom: 14px; }
  .main[data-step="pick"] .q-title { font-size: 25px; }
  .main[data-step="pick"] .q-sub { font-size: 15px; margin-top: 8px; }
  .dk-bar { margin-bottom: 10px; }
  .dk-stamp { font-size: 24px; padding: 5px 12px; }
  .dk-actions {
    position: sticky; z-index: 6; bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px));
    gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 8px;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0) 0%, var(--bg) 34%);
  }
  .dk-act { min-width: 52px; gap: 0; }
  .dk-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the buttons keep their aria-labels */
  .dk-circle { width: 56px; height: 56px; }
  .dk-act.is-small .dk-circle { width: 44px; height: 44px; margin: 6px 0; }
  .sl-actions .btn-ghost { width: 100%; }
}
/* Narrow cards (phones): a shorter photo, and the caption on a frosted card so it reads on any photo, light or dark */
@container deck (max-width: 639px) {
  .dk-hero { aspect-ratio: 5 / 4; }
  .dk-cap {
    left: 10px; right: 10px; bottom: 10px; padding: 10px 12px 11px; border-radius: 14px; color: var(--fg);
    background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm);
  }
  .dk-cap-row { position: absolute; left: 0; right: 0; top: -46px; padding: 0 2px; margin: 0; }
  .dk-cap-name { font-size: 20px; text-shadow: none; }
  .dk-cap-sub { color: var(--fg-2); font-weight: 600; }
  .dk-cap-also { color: var(--blue-700); }
  .dk-pics { background: rgba(43, 29, 22, .28); }
}