/* Wedd landing page. Colours, type and spacing come from tokens.css (copied from design-tokens/). */

:root {
  --bead: var(--wd-fozdo-500);
  --band-kohl-bg: var(--wd-kohl-700);
  --line: var(--wd-text);
  --section-pad: var(--wd-space-16);
  --lh-body: var(--wd-lh-ar-md);
}
:root[lang="en"] { --lh-body: var(--wd-lh-en-md); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --band-kohl-bg: var(--wd-kohl-800); --bead: var(--wd-fozdo-400); }
}
:root[data-theme="dark"] { --band-kohl-bg: var(--wd-kohl-800); --bead: var(--wd-fozdo-400); }
@media (min-width: 48rem) { :root { --section-pad: var(--wd-space-24); } }

/* Only the active language is rendered (and read by screen readers). */
:root[lang="ar"] .en,
:root[lang="en"] .ar { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--wd-bg);
  color: var(--wd-text);
  font: var(--wd-weight-regular) var(--wd-text-md) / var(--lh-body) var(--wd-font-ui);
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: var(--wd-link); text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-inline-start: var(--wd-space-4); inset-block-start: -100px; z-index: 100;
  background: var(--wd-surface-inverse); color: var(--wd-text-inverse);
  padding: var(--wd-space-3) var(--wd-space-4); border-radius: var(--wd-radius-control);
  font-weight: var(--wd-weight-medium); text-decoration: none;
}
.skip:focus { inset-block-start: var(--wd-space-2); }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: 28px; height: 28px; stroke-width: 1.5; }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--wd-space-4); }
@media (min-width: 48rem) { .wrap { padding-inline: var(--wd-space-8); } }

/* ---------- Type ---------- */
.display { font-weight: var(--wd-weight-bold); text-wrap: balance; }
:root[lang="ar"] .display { font-family: var(--wd-font-display); }
.hero-title { font-size: var(--wd-text-4xl); line-height: var(--wd-lh-ar-4xl); }
:root[lang="en"] .hero-title { line-height: var(--wd-lh-en-4xl); font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); letter-spacing: -0.02em; }
.section-title { font-size: clamp(1.75rem, 2vw + 1.1rem, 2.5rem); line-height: var(--wd-lh-ar-3xl); }
:root[lang="en"] .section-title { line-height: var(--wd-lh-en-2xl); font-size: clamp(1.625rem, 1.6vw + 1.1rem, 2.25rem); letter-spacing: -0.01em; }
h3 { font-size: var(--wd-text-lg); line-height: var(--wd-lh-ar-lg); font-weight: var(--wd-weight-bold); }
:root[lang="en"] h3 { line-height: var(--wd-lh-en-lg); }
.lede { font-size: var(--wd-text-lg); line-height: var(--wd-lh-ar-md); color: var(--wd-text-muted); max-width: 32em; text-wrap: pretty; }
:root[lang="en"] .lede { line-height: 1.55; max-width: 34em; }
.small { font-size: var(--wd-text-sm); color: var(--wd-text-muted); }
.price { font-weight: var(--wd-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price small { font-size: 0.8em; font-weight: var(--wd-weight-medium); }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--wd-space-3); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wd-space-2);
  min-height: var(--wd-control-lg); padding-inline: var(--wd-space-5);
  border-radius: var(--wd-radius-control); border: 1px solid transparent;
  font: var(--wd-weight-medium) var(--wd-text-md) / 1.2 var(--wd-font-ui);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--wd-dur-fast) var(--wd-ease-standard), transform var(--wd-dur-instant) var(--wd-ease-standard);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--wd-primary); color: var(--wd-on-primary); }
.btn-primary:hover { background: var(--wd-primary-hover); }
.btn-secondary { background: var(--wd-surface); color: var(--wd-text); border-color: var(--wd-border-input); }
.btn-secondary:hover { background: var(--wd-surface-sunken); }
.btn-quiet { background: transparent; color: var(--wd-text); border-color: var(--wd-border-input); }
.btn-sm { min-height: 36px; padding-inline: var(--wd-space-3); font-size: var(--wd-text-sm); }

/* ---------- Chips (order status) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding-inline: 10px 12px;
  border-radius: var(--wd-radius-pill); font-size: var(--wd-text-sm); font-weight: var(--wd-weight-medium); line-height: 1.2; white-space: nowrap;
}
.chip .ico { width: 16px; height: 16px; }
.chip-warn { background: var(--wd-warning-bg); color: var(--wd-warning); }
.chip-info { background: var(--wd-info-bg); color: var(--wd-text); }
.chip-ok { background: var(--wd-success-bg); color: var(--wd-success); }
.chip-bead { background: var(--wd-accent); color: var(--wd-on-accent); }
.bead-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--wd-on-accent); flex: none; }
.chip-bead .bead-dot { background: var(--wd-on-accent); }

/* ---------- Header ---------- */
.site-head { padding-block: var(--wd-space-4); }
.head-row { display: flex; align-items: center; gap: var(--wd-space-4); }
.logo { display: inline-flex; color: var(--wd-text); border-radius: var(--wd-radius-sm); padding: 4px; margin-inline-start: -4px; }
.logo svg { height: 40px; width: auto; }
.head-nav { margin-inline-start: auto; display: none; }
.head-nav ul { display: flex; gap: var(--wd-space-1); }
.head-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--wd-space-3);
  color: var(--wd-text); text-decoration: none; font-weight: var(--wd-weight-medium); border-radius: var(--wd-radius-control);
}
.head-nav a:hover { background: var(--wd-surface-sunken); }
.head-tools { display: flex; align-items: center; gap: var(--wd-space-2); margin-inline-start: auto; }
@media (min-width: 52rem) {
  .head-nav { display: block; }
  .head-tools { margin-inline-start: var(--wd-space-2); padding-inline-start: var(--wd-space-4); border-inline-start: 1px solid var(--wd-border); }
}
.tool {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  border-radius: var(--wd-radius-control); border: 1px solid var(--wd-border-input); background: var(--wd-surface);
  color: var(--wd-text); cursor: pointer; font: var(--wd-weight-medium) var(--wd-text-sm) / 1 var(--wd-font-ui); text-decoration: none;
}
.tool:hover { background: var(--wd-surface-sunken); }
.tool[hidden] { display: none; }
.tool-text { padding-inline: var(--wd-space-3); }
.tool .ico-sun { display: none; }
.tool[aria-pressed="true"] .ico-sun { display: block; }
.tool[aria-pressed="true"] .ico-moon { display: none; }

/* ---------- Occasion chips: the mlabbes tints, which exist for exactly this ---------- */
.occasions { display: flex; flex-wrap: wrap; gap: var(--wd-space-2); max-width: 28rem; }
.occ {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-inline: 10px 14px;
  border-radius: var(--wd-radius-pill); color: var(--wd-on-occasion);
  font-size: var(--wd-text-sm); font-weight: var(--wd-weight-medium); line-height: 1.2; white-space: nowrap;
}
.occ .ico { width: 18px; height: 18px; }
.occ-butter { background: var(--wd-occasion-butter); }
.occ-lilac { background: var(--wd-occasion-lilac); }
.occ-mint { background: var(--wd-occasion-mint); }
.occ-peach { background: var(--wd-occasion-peach); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--wd-space-8) var(--section-pad); }
.hero-grid { display: grid; gap: var(--wd-space-8); align-items: center; }
.hero-copy { display: grid; gap: var(--wd-space-6); justify-items: start; }
.fact { display: inline-flex; align-items: center; gap: var(--wd-space-2); font-size: var(--wd-text-sm); color: var(--wd-text-muted); font-weight: var(--wd-weight-medium); }
@media (min-width: 60rem) {
  .hero { padding-block: var(--wd-space-12) var(--section-pad); }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--wd-space-16); }
}

/* Hero art: an order, tied to its note by the thread. Physical positions so the
   composition is identical in both directions; text inside still follows the language. */
.art {
  position: relative; width: 100%; max-width: 30rem; margin-inline: auto; aspect-ratio: 480 / 560;
  container-type: inline-size; direction: ltr;
}
.art > * { direction: inherit; }
.art-card, .art-note, .art-chip, .art-cash { position: absolute; }
:root[lang="ar"] .art-card, :root[lang="ar"] .art-note, :root[lang="ar"] .art-chip, :root[lang="ar"] .art-cash { direction: rtl; }
.art-thread { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--line); stroke-width: 2.5; stroke-linecap: round; }
.art-card {
  left: 4%; top: 11%; width: 62%;
  background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius-md);
  box-shadow: var(--wd-elev-2); overflow: hidden;
}
.art-photo {
  position: relative; aspect-ratio: 4 / 3; background: var(--wd-occasion-lilac); color: var(--wd-on-occasion);
  display: grid; place-items: center;
}
.art-photo svg { width: 42%; height: auto; fill: none; stroke: currentColor; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.art-photo .tag {
  position: absolute; inset-block-end: 6%; inset-inline-start: 5%;
  background: var(--wd-accent); color: var(--wd-on-accent); border-radius: var(--wd-radius-pill);
  font-size: max(11px, 2.5cqi); font-weight: var(--wd-weight-bold); padding: 0.2em 0.8em; line-height: 1.5;
}
.art-body { display: grid; gap: 0.2em; padding: 4.5cqi 5cqi 5cqi; font-size: max(12px, 3.2cqi); line-height: 1.4; }
.art-shop { color: var(--wd-text-muted); font-size: 0.85em; }
.art-title { font-size: 1.12em; }
.art-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; margin-block-start: 0.3em; }
.art-lead { display: inline-flex; align-items: center; gap: 0.3em; color: var(--wd-text-muted); font-size: 0.9em; }
.art-lead .ico { width: 1.1em; height: 1.1em; }
.art-chip {
  left: 54%; top: 4.5%;
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.9em;
  background: var(--wd-accent); color: var(--wd-on-accent); border-radius: var(--wd-radius-pill);
  font-size: max(12px, 3cqi); font-weight: var(--wd-weight-medium); line-height: 1.4; box-shadow: var(--wd-elev-1);
}
.art-chip .bead-dot { width: 0.6em; height: 0.6em; }
.art-note {
  left: 42%; top: 71%; width: 54%;
  background: var(--wd-occasion-butter); color: var(--wd-on-occasion); border-radius: var(--wd-radius-control);
  padding: 4cqi 5cqi 4.5cqi; box-shadow: var(--wd-elev-2); transform: rotate(-2.5deg);
  display: grid; gap: 0.6cqi;
}
.bead-pin {
  position: absolute; left: 50%; top: 0; width: 5cqi; height: 5cqi; translate: -50% -50%;
  border-radius: 50%; background: var(--bead); box-shadow: 0 0 0 2px var(--wd-bg);
}
.art-note-lbl { font-size: max(11px, 2.5cqi); line-height: 1.4; }
.art-note-txt { font: 700 max(20px, 6.4cqi) / 1.5 var(--wd-font-display); text-align: center; }
.art-cash {
  left: 4%; top: 77%;
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6em 1em;
  background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius-control);
  font-size: max(12px, 3cqi); font-weight: var(--wd-weight-medium); line-height: 1.3; box-shadow: var(--wd-elev-1);
}
.art-cash .ico { width: 1.3em; height: 1.3em; color: var(--wd-success); }

/* ---------- Section bands ---------- */
.band-plain, .band-kohl, .band-surface { padding-block: var(--section-pad); }
.band-plain { background: var(--wd-bg); }
#how { background: var(--wd-surface); border-block: 1px solid var(--wd-border); }
.band-rule { border-block-start: 1px solid var(--wd-border); }
.band-surface { background: var(--wd-surface); border-block-start: 1px solid var(--wd-border); }
.section-title + * { margin-block-start: var(--wd-space-4); }

/* ---------- How ordering works: a real sequence, so numbered ---------- */
#how .section-title { margin-block-end: var(--wd-space-10); }
.steps { display: grid; gap: var(--wd-space-8); counter-reset: none; }
.step { position: relative; display: grid; align-content: start; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--wd-space-4); row-gap: var(--wd-space-2); }
.step h3 { grid-column: 2; align-self: center; min-height: 44px; display: flex; align-items: center; }
.step p { grid-column: 2; color: var(--wd-text-muted); max-width: 30em; }
.step-n {
  grid-row: 1; grid-column: 1; position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); background: var(--wd-surface); font-weight: var(--wd-weight-bold); font-size: var(--wd-text-lg); line-height: 1;
}
.step-n--bead { background: var(--wd-accent); border-color: var(--wd-accent); color: var(--wd-on-accent); }
/* The thread joining the steps */
.step:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 21px; inset-block: 44px calc(-1 * var(--wd-space-8));
  border-inline-start: 2px solid var(--line);
}
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wd-space-8); }
  .step { grid-template-columns: minmax(0, 1fr); row-gap: var(--wd-space-3); }
  .step h3, .step p { grid-column: 1; }
  .step h3 { min-height: 0; margin-block-start: var(--wd-space-3); }
  .step:not(:last-child)::after {
    inset-block: 21px auto; inset-inline: 44px calc(-1 * var(--wd-space-8));
    border-inline-start: 0; border-block-start: 2px solid var(--line);
  }
}
.track { margin-block-start: var(--wd-space-12); padding-block-start: var(--wd-space-6); border-block-start: 1px solid var(--wd-border); display: grid; gap: var(--wd-space-3); }
.track-lbl { font-size: var(--wd-text-sm); color: var(--wd-text-muted); font-weight: var(--wd-weight-medium); }
.chips { display: flex; flex-wrap: wrap; gap: var(--wd-space-2); }

/* ---------- Sellers: the one kohl band ---------- */
.band-kohl {
  background: var(--band-kohl-bg); color: var(--wd-text);
  /* Dark semantic tokens locally, so text, buttons and focus stay legible on kohl. */
  --wd-text: #EDEEF8; --wd-text-muted: var(--wd-kohl-250); --wd-border: var(--wd-kohl-750);
  --wd-primary: var(--wd-fozdo-400); --wd-primary-hover: var(--wd-fozdo-300); --wd-on-primary: var(--wd-kohl-900);
  --wd-focus: var(--wd-kohl-300); --wd-link: var(--wd-kohl-300); --line: #EDEEF8;
}
.sell-grid { display: grid; gap: var(--wd-space-12); align-items: center; }
.sell-copy { display: grid; gap: var(--wd-space-6); justify-items: start; }
.sell-copy .section-title { max-width: 16em; }
.sell-copy .section-title + * { margin-block-start: 0; }
.points { display: grid; gap: var(--wd-space-5); }
.point dt { display: flex; align-items: center; gap: var(--wd-space-3); font-weight: var(--wd-weight-bold); font-size: var(--wd-text-lg); }
.point dt .ico { color: var(--bead); }
.point dd { color: var(--wd-text-muted); padding-inline-start: calc(20px + var(--wd-space-3)); max-width: 32em; }
.sell-copy .small { margin-block-start: calc(-1 * var(--wd-space-3)); }
@media (min-width: 60rem) { .sell-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--wd-space-16); } }

/* Portal sample: a light "screen" sitting on the kohl band, using the page theme's real tokens */
.portal {
  --wd-text: var(--p-text); --wd-text-muted: var(--p-muted); --wd-border: var(--p-border);
  --wd-primary: var(--p-primary); --wd-on-primary: var(--p-on-primary); --line: var(--p-text);
  --p-text: var(--wd-kohl-700); --p-muted: var(--wd-kohl-400); --p-border: var(--wd-kohl-200); --p-surface: var(--wd-white); --p-bg: var(--wd-kohl-50);
  --p-primary: var(--wd-kohl-700); --p-on-primary: var(--wd-white); --p-input: var(--wd-kohl-450);
  background: var(--p-bg); color: var(--wd-text); border-radius: var(--wd-radius-lg); padding: var(--wd-space-3);
  display: grid; gap: var(--wd-space-3); box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.45);
  width: 100%; max-width: 30rem; margin-inline: auto;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portal {
    --p-text: #EDEEF8; --p-muted: var(--wd-kohl-250); --p-border: var(--wd-kohl-750); --p-surface: var(--wd-kohl-800); --p-bg: var(--wd-kohl-900);
    --p-primary: var(--wd-fozdo-400); --p-on-primary: var(--wd-kohl-900); --p-input: var(--wd-kohl-350);
    box-shadow: none; border: 1px solid var(--wd-kohl-750);
  }
}
:root[data-theme="dark"] .portal {
  --p-text: #EDEEF8; --p-muted: var(--wd-kohl-250); --p-border: var(--wd-kohl-750); --p-surface: var(--wd-kohl-800); --p-bg: var(--wd-kohl-900);
  --p-primary: var(--wd-fozdo-400); --p-on-primary: var(--wd-kohl-900); --p-input: var(--wd-kohl-350);
  box-shadow: none; border: 1px solid var(--wd-kohl-750);
}
.portal-top { display: flex; align-items: center; gap: var(--wd-space-2); padding: var(--wd-space-1) var(--wd-space-2); font-size: var(--wd-text-sm); }
.portal-top span { margin-inline-start: auto; color: var(--wd-text-muted); }
.portal-mark { width: 24px; height: 24px; color: var(--wd-text); }
.order { background: var(--p-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius-md); padding: var(--wd-space-4); display: grid; gap: var(--wd-space-3); }
.order--mini { gap: var(--wd-space-1); padding-block: var(--wd-space-3); }
.order-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wd-space-2); }
.order-head b { font-size: var(--wd-text-md); }
.order-due, .order-item { font-size: var(--wd-text-sm); color: var(--wd-text-muted); }
.order-note { background: var(--wd-occasion-butter); color: var(--wd-on-occasion); border-radius: var(--wd-radius-control); padding: var(--wd-space-2) var(--wd-space-3) var(--wd-space-3); display: grid; gap: 2px; }
.order-note span { font-size: var(--wd-text-xs); }
.order-note strong { font-size: var(--wd-text-xl); line-height: 1.5; font-family: var(--wd-font-ui); }
.order-facts { display: grid; gap: var(--wd-space-2); font-size: var(--wd-text-sm); }
.order-facts div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--wd-space-2); }
.order-facts dt { color: var(--wd-text-muted); }
.order-actions { display: flex; flex-wrap: wrap; gap: var(--wd-space-2); }
.order-actions .btn { flex: 1 1 auto; }
.order-actions .btn-quiet { border-color: var(--p-input); }

/* ---------- Trust and FAQ: heading on the start side, content on the end ---------- */
.split { display: grid; gap: var(--wd-space-8); }
.split-head { display: grid; gap: var(--wd-space-4); align-content: start; }
.split-head .section-title + * { margin-block-start: 0; }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--wd-space-16); }
  .split-head { position: sticky; top: var(--wd-space-8); }
}
.trust { display: grid; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius-md); }
.trust li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--wd-space-4); padding: var(--wd-space-6); }
.trust li + li { border-block-start: 1px solid var(--wd-border); }
.trust .ico-lg { color: var(--wd-text); }
.trust h3 { margin-block-end: var(--wd-space-1); }
.trust p { color: var(--wd-text-muted); max-width: 34em; }
@media (max-width: 30rem) { .trust li { padding: var(--wd-space-5) var(--wd-space-4); } }

.faq { border-block-start: 1px solid var(--wd-border); }
.faq details { border-block-end: 1px solid var(--wd-border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4);
  min-height: 60px; padding-block: var(--wd-space-3); cursor: pointer; list-style: none;
  font-size: var(--wd-text-lg); font-weight: var(--wd-weight-medium); line-height: 1.5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--wd-link); }
.faq summary .ico { transition: transform var(--wd-dur-fast) var(--wd-ease-standard); color: var(--wd-text-muted); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq details p { padding-block-end: var(--wd-space-5); color: var(--wd-text-muted); max-width: 36em; }

/* ---------- Download / waitlist ---------- */
.dl { display: grid; gap: var(--wd-space-6); justify-items: start; }
.dl-icon { width: 72px; height: 72px; border-radius: 18px; }
.dl-copy { display: grid; gap: var(--wd-space-5); justify-items: start; }
.dl-copy .section-title + * { margin-block-start: 0; }
.stores { display: flex; flex-wrap: wrap; gap: var(--wd-space-3); }
.store {
  display: grid; min-width: 9.5rem; padding: var(--wd-space-2) var(--wd-space-4);
  border: 1px dashed var(--wd-border-input); border-radius: var(--wd-radius-control); line-height: 1.4;
}
.store-name { font-weight: var(--wd-weight-bold); }
.store-soon { font-size: var(--wd-text-xs); color: var(--wd-text-muted); }
@media (min-width: 48rem) {
  .dl { grid-template-columns: auto minmax(0, 1fr); gap: var(--wd-space-8); align-items: start; }
  .dl-icon { width: 96px; height: 96px; border-radius: 24px; }
}

/* ---------- Footer ---------- */
.site-foot { padding-block: var(--wd-space-12); border-block-start: 1px solid var(--wd-border); font-size: var(--wd-text-sm); color: var(--wd-text-muted); }
.foot-grid { display: grid; gap: var(--wd-space-6); }
.foot-brand { display: grid; gap: var(--wd-space-2); justify-items: start; color: var(--wd-text); }
.display-hand { font: 700 var(--wd-text-xl) / 1.5 var(--wd-font-display); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--wd-space-2) var(--wd-space-6); align-items: center; }
.foot-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--wd-link); }
@media (min-width: 48rem) {
  .foot-grid { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
  .foot-links { justify-content: flex-end; }
  .foot-copy { grid-column: 1 / -1; }
}

/* ---------- 404 ---------- */
.lost { padding-block: var(--wd-space-16) var(--wd-space-24); display: grid; gap: var(--wd-space-5); justify-items: start; }
.lost-art { width: 160px; height: auto; color: var(--wd-text); }