/* The welcome page (/), built as the basket's nota de venta: white slips with cut edges on a green ground, set
   in Gambarino and General Sans. One mid green does both the ground and the button, like a two-colour print.
   Everything is scoped to body.welcome, so no other page changes. No build step. */
body.welcome {
  --bg: #ffffff; --surface: #EEF3EE; --ink: #10231a; --muted: #5c6b61;
  --accent: #1F6E43; --accent-ink: #ffffff; --field-1: #1F6E43; --field-1-ink: #ffffff;
  --fg: var(--ink); --line: var(--surface); --sunk: var(--surface); --on-accent: var(--accent-ink);
  --font-display: "Gambarino", "Iowan Old Style", "Times New Roman", serif;
  --font-body: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.25rem, 1.4rem + 3.8vw, 4.75rem);
  --gl: clamp(16px, 2.2vw, 32px); --gr: clamp(16px, 2.2vw, 32px);
  --gap: clamp(72px, 6.5vw, 104px);
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-expo: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --t-press: 140ms; --t-hover: 180ms;
  background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.5 var(--font-body);
  font-kerning: normal; text-rendering: optimizeLegibility;
}
.welcome .col { max-width: none; padding-bottom: 0; }
.welcome main { display: grid; }
.welcome h1, .welcome h2, .welcome h3 { hyphens: none; }
.welcome h2 { font: 400 var(--step-head)/.95 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.welcome h3 { font: 500 var(--step-lead)/1.2 var(--font-body); }
.welcome p { max-width: 62ch; }
.welcome ::selection { background: var(--accent); color: var(--accent-ink); }
.welcome a { color: var(--accent); font-weight: 500; text-underline-offset: .18em; text-decoration-thickness: .07em; }
.w-field { padding: var(--gap) var(--gl); }
.w-field--ink { background: var(--field-1); color: var(--field-1-ink); }
.w-field--ink :focus-visible { outline-color: var(--field-1-ink); }
.w-field--surface { background: var(--surface); }

/* the app bar */
.welcome .appbar { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding-block: 14px; }
.welcome .wordmark { color: var(--field-1-ink); font: 400 calc(var(--step-lead) * 1.3)/1 var(--font-display); letter-spacing: 0; }
.welcome .lang { border: 0; border-radius: 0; }
.welcome .lang button { color: var(--field-1-ink); font-weight: 500; font-size: var(--step-small); }
.welcome .lang button[aria-pressed="true"] { background: var(--bg); color: var(--ink); }
.welcome .skip { border-radius: 0; }

/* buttons */
.welcome a.w-btn, .w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.w-btn:active { transform: scale(.97); }
.w-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
.welcome a:not(.w-btn):not(.wordmark) { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .w-btn:hover { background: var(--ink); }
  .w-field--ink .w-btn:hover { background: var(--bg); color: var(--ink); }
  .w-link:hover, .welcome a:not(.w-btn):hover { text-decoration-color: currentColor; }
  .w-qa summary:hover { color: var(--accent); }
}

/* 1. Hero: the slip centred over the dim market hall. */
.w-hero { position: relative; isolation: isolate; background: var(--field-1); display: grid; place-items: center; min-height: min(100svh, 720px); padding: clamp(64px, 8vw, 120px) var(--gl) var(--gap); }
.w-room { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.w-room img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
@media (prefers-reduced-motion: no-preference) {
  .w-room img { animation: w-drift 18s var(--ease-soft) both; }
  @keyframes w-drift { from { transform: scale(1.08); } to { transform: none; } }
}
.w-slip { position: relative; width: min(100%, 680px); background: var(--bg); color: var(--ink); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 28px; }
.w-slip__title { margin-left: -.03em; font: 400 var(--step-display)/.92 var(--font-display); letter-spacing: -.02em; text-wrap: balance; max-width: 14ch; }
.w-slip__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--step-lead); line-height: 1.2; font-weight: 500; }
.w-slip__lede { max-width: 48ch; }
.w-slip__foot { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
@media (max-width: 599px) {
  .w-slip { padding: 20px; gap: 20px; }
  .w-slip__foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .w-slip__foot .w-link { text-align: center; justify-content: center; }
}

/* 2. The price list: a menu sheet with zigzag edges. */
.w-menu { width: min(100%, 640px); margin-inline: auto; background: var(--bg); color: var(--ink); padding: 64px clamp(20px, 5vw, 48px) 72px; clip-path: polygon(0.00% 10px, 1.79% 0, 3.57% 10px, 5.36% 0, 7.14% 10px, 8.93% 0, 10.71% 10px, 12.50% 0, 14.29% 10px, 16.07% 0, 17.86% 10px, 19.64% 0, 21.43% 10px, 23.21% 0, 25.00% 10px, 26.79% 0, 28.57% 10px, 30.36% 0, 32.14% 10px, 33.93% 0, 35.71% 10px, 37.50% 0, 39.29% 10px, 41.07% 0, 42.86% 10px, 44.64% 0, 46.43% 10px, 48.21% 0, 50.00% 10px, 51.79% 0, 53.57% 10px, 55.36% 0, 57.14% 10px, 58.93% 0, 60.71% 10px, 62.50% 0, 64.29% 10px, 66.07% 0, 67.86% 10px, 69.64% 0, 71.43% 10px, 73.21% 0, 75.00% 10px, 76.79% 0, 78.57% 10px, 80.36% 0, 82.14% 10px, 83.93% 0, 85.71% 10px, 87.50% 0, 89.29% 10px, 91.07% 0, 92.86% 10px, 94.64% 0, 96.43% 10px, 98.21% 0, 100% 10px, 100% calc(100% - 10px), 98.21% 100%, 96.43% calc(100% - 10px), 94.64% 100%, 92.86% calc(100% - 10px), 91.07% 100%, 89.29% calc(100% - 10px), 87.50% 100%, 85.71% calc(100% - 10px), 83.93% 100%, 82.14% calc(100% - 10px), 80.36% 100%, 78.57% calc(100% - 10px), 76.79% 100%, 75.00% calc(100% - 10px), 73.21% 100%, 71.43% calc(100% - 10px), 69.64% 100%, 67.86% calc(100% - 10px), 66.07% 100%, 64.29% calc(100% - 10px), 62.50% 100%, 60.71% calc(100% - 10px), 58.93% 100%, 57.14% calc(100% - 10px), 55.36% 100%, 53.57% calc(100% - 10px), 51.79% 100%, 50.00% calc(100% - 10px), 48.21% 100%, 46.43% calc(100% - 10px), 44.64% 100%, 42.86% calc(100% - 10px), 41.07% 100%, 39.29% calc(100% - 10px), 37.50% 100%, 35.71% calc(100% - 10px), 33.93% 100%, 32.14% calc(100% - 10px), 30.36% 100%, 28.57% calc(100% - 10px), 26.79% 100%, 25.00% calc(100% - 10px), 23.21% 100%, 21.43% calc(100% - 10px), 19.64% 100%, 17.86% calc(100% - 10px), 16.07% 100%, 14.29% calc(100% - 10px), 12.50% 100%, 10.71% calc(100% - 10px), 8.93% 100%, 7.14% calc(100% - 10px), 5.36% 100%, 3.57% calc(100% - 10px), 1.79% 100%, 0.00% calc(100% - 10px)); }
.w-menu h2 { text-align: center; max-width: none; margin-bottom: 48px; }
.w-menu h3 { margin: 56px 0 24px; }
.w-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.w-rows li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "name dots val" "desc desc desc"; align-items: baseline; column-gap: 10px; row-gap: 8px; }
.w-row__name { grid-area: name; font-weight: 500; }
.w-dots { grid-area: dots; align-self: end; border-bottom: 3px dotted var(--ink); margin-bottom: .35em; min-width: 24px; }
.w-row__val { grid-area: val; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.w-row__desc { grid-area: desc; color: var(--muted); max-width: 44ch; }

/* 3. How it works: the day of one basket on a slip that holds while the four steps pass beside it. The steps
   set the slip's stage (s1 to s4) from welcome.js; without JS or under reduced motion the slip shows every stage at once. */
.w-how { display: grid; gap: 48px var(--gl); align-items: start; }
.w-how__text { display: grid; gap: 24px; align-content: start; }
.w-how__text h2 { max-width: 12ch; }
.w-how__text > p { max-width: 36ch; }
.w-pilot-times { display: grid; gap: 14px; align-content: start; }
.w-pilot-times h3 { font: 400 calc(var(--step-lead) * 1.3)/1.1 var(--font-display); }
.w-pilot-times ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 500; }
.r-art { margin: 0; width: min(100%, 520px); background: var(--bg); color: var(--ink); padding: 16px; }
.r-art svg { display: block; width: 100%; height: auto; max-height: 76svh; }
.r-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.r-steps li { display: grid; gap: 6px; align-content: start; }
.r-steps p { max-width: 36ch; }
@media (min-width: 700px) {
  .w-how { grid-template-columns: 1fr 1fr; grid-template-areas: "text art" "steps art" "pilot art"; }
  .r-route { display: contents; }
  .w-how__text { grid-area: text; } .r-steps { grid-area: steps; } .w-pilot-times { grid-area: pilot; }
  .r-art { grid-area: art; justify-self: center; }
}
@media (min-width: 900px) { .w-how { grid-template-columns: 5fr 1fr 5fr; grid-template-areas: "text . art" "steps . art" "pilot . art"; } }
@media (max-width: 699px) {
  .w-how { display: block; }
  .r-art { margin-top: 40px; padding: 12px; }
  .r-steps { margin-top: 32px; }
  .w-pilot-times { margin-top: 56px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .r-art { position: sticky; }
  .js .r-steps { gap: 0; }
  @media (min-width: 700px) { .js .r-art { top: clamp(24px, 50svh - 270px, 30vh); } .js .r-steps li { min-height: 48svh; padding-top: 8vh; } }
  @media (max-width: 699px) {
    .js .r-art { top: 0; z-index: 1; border-top: 8px solid var(--field-1); border-bottom: 16px solid var(--field-1); }
    .js .r-art svg { max-height: 40svh; }
    .js .r-steps li { min-height: 52svh; padding-top: 16px; }
  }
}

/* The drawing: one stroke, the page's four tones. */
.r-art svg * { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r-art text { font: 500 11px var(--font-body); fill: var(--ink); stroke: none; text-anchor: middle; }
.r-art .n { font-size: 10px; text-anchor: start; }
.r-art .i { font: 400 14px var(--font-display); fill: var(--bg); }
.r-art .f { fill: var(--bg); } .r-art .k { fill: var(--surface); } .r-art .g { fill: var(--accent); }
.r-art .m { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }
.r-art .d { stroke-dasharray: 0 8; stroke-width: 3; }
.r-art .t { stroke: var(--accent); stroke-width: 3; }
.r-art text.t { font-size: 9px; text-anchor: start; fill: var(--accent); stroke: none; }
.r-art :is(.r-s1, .r-s3, .r-s4) { transform-box: fill-box; transform-origin: center; }
.r-art .r-x { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .js .r-art :is(.r-s1, .r-s2, .r-s3, .r-s4, .r-cu) { opacity: 0; }
  .r-art.s1 .r-s1, .r-art.s3 .r-s3 { animation: r-pop 420ms var(--ease-out) calc(var(--i, 0) * 220ms) both; }
  .r-art.s2 .r-s2 { animation: r-hop 760ms var(--ease-out) calc(var(--i, 0) * 180ms) both; }
  .r-art.s4 .r-cu { animation: r-walk 2.8s linear both; }
  .r-art.s4 .r-bob { animation: r-bob 300ms ease-in-out 9; }
  .r-art.s4 .r-bag { animation: r-carry 2.8s linear both; }
  .r-art.s4 .r-s4 { animation: r-pop 420ms var(--ease-out) calc(2.9s + var(--i, 0) * 280ms) both; }
  .r-art.s4 .r-x { animation-name: r-strike; }
}
@keyframes r-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes r-hop { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 20% { opacity: 1; } 55% { transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .45 - 22px)); } 100% { opacity: 1; transform: none; } }
@keyframes r-strike { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes r-walk { 0% { opacity: 1; transform: translate(-180px, 0); } 63%, 68% { transform: translate(142px, 0); } 96%, 100% { opacity: 1; transform: translate(86px, 118px); } }
@keyframes r-carry { 0%, 68% { transform: none; } 96%, 100% { transform: translate(-56px, 118px); } }
@keyframes r-bob { 50% { transform: translateY(-2px); } }

/* 4. The letter with scalloped foot and tear-off strip. */
.w-about { display: grid; justify-items: center; }
.w-letter { width: min(100%, 680px); background: var(--bg); padding: clamp(24px, 5vw, 60px) clamp(24px, 5vw, 60px) clamp(48px, 6vw, 80px); clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 12.0px), 98.96% calc(100% - 6.0px), 97.92% calc(100% - 1.6px), 96.88% calc(100% - 0.0px), 95.83% calc(100% - 1.6px), 94.79% calc(100% - 6.0px), 93.75% calc(100% - 12.0px), 93.75% calc(100% - 12.0px), 92.71% calc(100% - 6.0px), 91.67% calc(100% - 1.6px), 90.62% calc(100% - 0.0px), 89.58% calc(100% - 1.6px), 88.54% calc(100% - 6.0px), 87.50% calc(100% - 12.0px), 87.50% calc(100% - 12.0px), 86.46% calc(100% - 6.0px), 85.42% calc(100% - 1.6px), 84.38% calc(100% - 0.0px), 83.33% calc(100% - 1.6px), 82.29% calc(100% - 6.0px), 81.25% calc(100% - 12.0px), 81.25% calc(100% - 12.0px), 80.21% calc(100% - 6.0px), 79.17% calc(100% - 1.6px), 78.12% calc(100% - 0.0px), 77.08% calc(100% - 1.6px), 76.04% calc(100% - 6.0px), 75.00% calc(100% - 12.0px), 75.00% calc(100% - 12.0px), 73.96% calc(100% - 6.0px), 72.92% calc(100% - 1.6px), 71.88% calc(100% - 0.0px), 70.83% calc(100% - 1.6px), 69.79% calc(100% - 6.0px), 68.75% calc(100% - 12.0px), 68.75% calc(100% - 12.0px), 67.71% calc(100% - 6.0px), 66.67% calc(100% - 1.6px), 65.62% calc(100% - 0.0px), 64.58% calc(100% - 1.6px), 63.54% calc(100% - 6.0px), 62.50% calc(100% - 12.0px), 62.50% calc(100% - 12.0px), 61.46% calc(100% - 6.0px), 60.42% calc(100% - 1.6px), 59.38% calc(100% - 0.0px), 58.33% calc(100% - 1.6px), 57.29% calc(100% - 6.0px), 56.25% calc(100% - 12.0px), 56.25% calc(100% - 12.0px), 55.21% calc(100% - 6.0px), 54.17% calc(100% - 1.6px), 53.12% calc(100% - 0.0px), 52.08% calc(100% - 1.6px), 51.04% calc(100% - 6.0px), 50.00% calc(100% - 12.0px), 50.00% calc(100% - 12.0px), 48.96% calc(100% - 6.0px), 47.92% calc(100% - 1.6px), 46.88% calc(100% - 0.0px), 45.83% calc(100% - 1.6px), 44.79% calc(100% - 6.0px), 43.75% calc(100% - 12.0px), 43.75% calc(100% - 12.0px), 42.71% calc(100% - 6.0px), 41.67% calc(100% - 1.6px), 40.62% calc(100% - 0.0px), 39.58% calc(100% - 1.6px), 38.54% calc(100% - 6.0px), 37.50% calc(100% - 12.0px), 37.50% calc(100% - 12.0px), 36.46% calc(100% - 6.0px), 35.42% calc(100% - 1.6px), 34.38% calc(100% - 0.0px), 33.33% calc(100% - 1.6px), 32.29% calc(100% - 6.0px), 31.25% calc(100% - 12.0px), 31.25% calc(100% - 12.0px), 30.21% calc(100% - 6.0px), 29.17% calc(100% - 1.6px), 28.12% calc(100% - 0.0px), 27.08% calc(100% - 1.6px), 26.04% calc(100% - 6.0px), 25.00% calc(100% - 12.0px), 25.00% calc(100% - 12.0px), 23.96% calc(100% - 6.0px), 22.92% calc(100% - 1.6px), 21.88% calc(100% - 0.0px), 20.83% calc(100% - 1.6px), 19.79% calc(100% - 6.0px), 18.75% calc(100% - 12.0px), 18.75% calc(100% - 12.0px), 17.71% calc(100% - 6.0px), 16.67% calc(100% - 1.6px), 15.62% calc(100% - 0.0px), 14.58% calc(100% - 1.6px), 13.54% calc(100% - 6.0px), 12.50% calc(100% - 12.0px), 12.50% calc(100% - 12.0px), 11.46% calc(100% - 6.0px), 10.42% calc(100% - 1.6px), 9.38% calc(100% - 0.0px), 8.33% calc(100% - 1.6px), 7.29% calc(100% - 6.0px), 6.25% calc(100% - 12.0px), 6.25% calc(100% - 12.0px), 5.21% calc(100% - 6.0px), 4.17% calc(100% - 1.6px), 3.12% calc(100% - 0.0px), 2.08% calc(100% - 1.6px), 1.04% calc(100% - 6.0px), 0.00% calc(100% - 12.0px)); display: grid; gap: 28px; }
.w-letter__body { display: grid; gap: 1em; }
.w-letter__body p { max-width: 56ch; }
.w-letter__sign { font: 400 var(--step-lead)/1.2 var(--font-display); display: grid; gap: 4px; }
.w-letter__role { font: 400 var(--step-small)/1.4 var(--font-body); color: var(--muted); }
.w-tear { width: min(100%, 680px); margin-top: 12px; background: var(--bg); padding: 16px clamp(20px, 4vw, 32px); border-top: 5px dotted var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; min-height: 72px; }
.w-tear p { max-width: 36ch; }

/* 5. For vendors: the heading, WhatsApp message, and her three points. */
.w-vend { padding: var(--gap) var(--gl); display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; align-items: start; }
.w-vend h2 { grid-column: 1 / 7; }
.w-vend__lede { grid-column: 7 / 13; font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; align-self: end; }
.w-wa { grid-column: 1 / 6; margin: 0; width: min(100%, 420px); display: grid; gap: 10px; }
.w-vend__points { grid-column: 7 / 13; display: grid; gap: 24px; align-content: start; }
.w-vend__points div { display: grid; gap: 6px; }
.w-vend__points p { max-width: 72ch; }
@media (max-width: 899px) {
  .w-vend h2, .w-vend__lede, .w-wa, .w-vend__points { grid-column: 1 / -1; }
}
/* WhatsApp-style message */
.w-wa figcaption { font-size: var(--step-small); color: var(--muted); }
.w-wa__chat { background: #e5ddd5; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ccc4b7' opacity='.4'/%3E%3C/svg%3E"); padding: 12px; border-radius: 8px; display: grid; gap: 8px; }
.w-wa__bubble { background: #dcf8c6; padding: 8px 10px 4px; border-radius: 8px 8px 8px 0; font-size: 15px; line-height: 1.4; display: grid; gap: 2px; position: relative; }
.w-wa__bubble p { max-width: none; margin: 0; }
.w-wa__from { font-size: 13px; font-weight: 500; color: #075e54; }
.w-wa__time { font-size: 11px; color: #667781; justify-self: end; margin-top: 2px; }
.w-wa__buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.w-wa__buttons span { flex: 1 1 auto; text-align: center; background: #ffffff; border-radius: 8px; padding: 10px; font-weight: 500; font-size: 14px; color: #00a884; }

/* 6. Questions beside a tall photograph, with a square one overlapping its corner. */
.w-faq { padding: var(--gap) var(--gl); display: grid; gap: 48px var(--gl); align-items: start; }
.w-faq__text { display: grid; gap: 28px; align-content: start; max-width: 720px; }
.w-faq__pics { position: relative; }
.w-faq__tall { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface); }
.w-faq__sq { position: absolute; width: 33%; height: auto; left: -40px; bottom: -40px; background: var(--surface); }
@media (min-width: 900px) {
  .w-faq { grid-template-columns: 5fr 7fr; }
  .w-faq__pics { margin-bottom: 80px; width: min(100%, 760px); justify-self: end; }
}
@media (max-width: 899px) {
  .w-faq__pics { order: -1; margin-bottom: 40px; width: calc(100% - 16px); }
  .w-faq__tall { aspect-ratio: 4 / 5; }
  .w-faq__sq { width: 38%; left: auto; right: -16px; bottom: -24px; }
}
.w-qa { display: grid; gap: 28px; }
.w-qa summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; font-size: var(--step-lead); font-weight: 500; cursor: pointer; list-style: none; }
.w-qa summary::-webkit-details-marker { display: none; }
.w-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-hover) var(--ease-out); }
.w-qa details[open] .w-chev { transform: rotate(180deg); }
.w-qa details p { margin-top: 12px; color: var(--muted); max-width: 52ch; }
.w-faq__acts { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
@media (max-width: 899px) { .w-faq__acts .w-btn { width: 100%; } }

/* 7. The visit card on a full-bleed photograph of a market hall. */
.w-visit { position: relative; display: grid; background: var(--surface); }
.w-visit__photo { display: block; width: 100%; height: 100svh; object-fit: cover; object-position: left center; background: var(--field-1); }
.w-card { position: absolute; top: calc(var(--gl) + 24px); right: var(--gl); width: 380px; background: var(--bg); padding: 32px 32px 0; display: grid; gap: 16px; }
.w-card h2 { font-size: calc(var(--step-lead) * 1.3); }
.w-card__btn { margin: 16px -32px 0; }
@media (max-width: 899px) {
  .w-visit__photo { height: min(70svh, 480px); }
  .w-card { position: relative; top: auto; right: auto; width: auto; margin: -96px var(--gl) var(--gap); padding: 24px 24px 0; }
  .w-card__btn { margin: 8px -24px 0; min-height: 56px; }
}

/* 8. The back of the slip: sign-off, links, a stamp and the printer's imprint with the photo credits. */
.w-foot { display: grid; justify-items: center; padding-bottom: 24px; }
.w-back { width: min(100%, 84%); background: var(--bg); color: var(--ink); padding: 48px clamp(24px, 4vw, 48px) 24px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "msg stamp" "msg links" "imprint imprint"; gap: 24px 40px; }
.w-stamp { grid-area: stamp; justify-self: end; width: 88px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.w-back__msg { grid-area: msg; display: grid; gap: 16px; align-content: start; }
.w-back__msg h2 { font-size: calc(var(--step-lead) * 1.3); }
.w-back__msg p { max-width: 40ch; }
.w-back__links { grid-area: links; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: var(--step-body); align-content: start; }
.w-back__links a { color: var(--ink); }
.w-back__imprint { grid-area: imprint; align-self: end; justify-self: center; max-width: 80ch; margin-top: 24px; text-align: center; font-size: var(--step-small); }
.w-back__imprint a { font-weight: 400; }
@media (max-width: 899px) {
  .w-back { width: 100%; grid-template-columns: 1fr auto; grid-template-areas: "msg stamp" "links links" "imprint imprint"; }
  .w-stamp { width: 64px; }
}

/* Entrances */
@media (prefers-reduced-motion: no-preference) {
  .js .welcome [data-reveal]:not([data-reveal="wide"]) { opacity: 0; transform: translateY(24px); }
  .js .welcome [data-reveal] { transition: opacity 700ms var(--ease-expo), transform 900ms var(--ease-expo); transition-delay: calc(var(--n, 0) * 80ms); }
  .js .welcome [data-reveal].is-in { opacity: 1; transform: none; }
  @media (min-width: 1100px) { .js .welcome [data-reveal="wide"] { opacity: 0; transform: translateY(24px); } }
}