/* Murr Mall landing prototype: hero and shop directory */

:root {
  --paper:#f3ede1;
  --paper-deep:#e9e0cf;
  --card:#fffdf8;
  --ink:#221f1b;
  --ink-soft:#5e574d;
  --rule:rgba(34,31,27,.16);
  --green:#5f7d3c;
  --green-deep:#4d6830;
  --red:#cf2a2e;
  --pass:#a9bfc0;
  --heading-font:"Literata", Georgia, serif;
  --sign-font:Didot, "Playfair Display", "Literata", Georgia, serif;
  --body-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
/* "How it works" and the other in-page links glide rather than jump. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior:smooth; }
}
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body-font); font-size:17px; line-height:1.55;
  overflow-x:hidden;
}
/* Paper grain over everything, so the photo and the paintings share one surface. */
body::after {
  content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .32  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color:inherit; }
img { display:block; max-width:100%; height:auto; }
.defs { position:absolute; width:0; height:0; }

/* ---------- header ---------- */
.top {
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  max-width:1240px; margin:0 auto; padding:26px 32px 0;
}
.wordmark {
  font-family:var(--heading-font); font-weight:650; font-size:23px; letter-spacing:.01em;
  text-decoration:none;
}
.top-nav { display:flex; align-items:baseline; gap:28px; }
.top-link { font-size:15px; text-decoration:none; color:var(--ink-soft); }
.top-link:hover { color:var(--ink); }
.top-link-strong { color:var(--ink); border-bottom:1.5px solid var(--ink); padding-bottom:1px; }

/* ---------- hero ---------- */
.hero {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.06fr); align-items:center;
  gap:24px 40px; max-width:1240px; margin:0 auto; padding:44px 32px 64px;
}
.hero-copy { padding-top:36px; max-width:560px; }
.eyebrow {
  margin:0 0 22px; display:flex; align-items:center; gap:12px;
  font-family:var(--sign-font); font-size:13px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow::before { content:""; width:34px; height:1px; background:currentColor; }
h1 {
  margin:0; font-family:var(--heading-font); font-weight:600;
  font-size:clamp(42px, 5.5vw, 78px); line-height:1.02; letter-spacing:-.018em;
  text-wrap:balance;
}
.h1-accent { position:relative; display:inline-block; font-style:italic; font-weight:500; white-space:nowrap; }
.h1-stroke { position:absolute; left:-2%; bottom:-.16em; width:104%; height:.3em; overflow:visible; }
.h1-stroke path { fill:none; stroke:var(--red); stroke-width:6; stroke-linecap:round; }
.lede { margin:30px 0 0; max-width:31em; font-size:19px; line-height:1.55; color:var(--ink-soft); }
.cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:34px; }
.btn {
  display:inline-block; padding:15px 26px 16px; border-radius:999px;
  background:var(--green); color:#fff; font-weight:600; font-size:17px; text-decoration:none;
  box-shadow:0 2px 0 var(--green-deep); transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { background:var(--green-deep); }
.btn:active { transform:translateY(2px); box-shadow:0 0 0 var(--green-deep); }
.link-arrow { font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--ink); padding-bottom:2px; }
.link-arrow span { display:inline-block; transition:transform .2s ease; }
.link-arrow:hover span { transform:translateX(4px); }
.fineprint { margin:22px 0 0; font-size:14px; color:var(--ink-soft); }
:is(.btn, .link-arrow, .top-link, .wordmark):focus-visible { outline:2px solid var(--ink); outline-offset:4px; }

/* ---------- stage: photo, wishes and cats ---------- */
.stage { position:relative; aspect-ratio:1 / 1.12; container-type:inline-size; }

.pass { position:absolute; left:22%; top:24%; width:56%; margin:0; }
.pass-card { position:relative; aspect-ratio:1; }
.pass-card::before {
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--pass);
  box-shadow:0 1px 0 rgba(34,31,27,.08), 0 30px 40px -26px rgba(60,42,22,.5);
}
/* The photo is as wide as the circle and stands on its bottom. Everything above the
   circle's centre line shows, everything below is clipped to the circle, so the
   sweater's straight crop lines vanish and only the head rises out of it.
   62.5% = circle centre (1066 - 400) / 1066 for an 800 × 1066 image. */
.pass-photo {
  position:absolute; left:0; bottom:0; width:100%;
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 62.5%, #000 99.4%, transparent 100%), linear-gradient(#000, #000);
  mask-image:radial-gradient(circle closest-side at 50% 62.5%, #000 99.4%, transparent 100%), linear-gradient(#000, #000);
  -webkit-mask-size:100% 100%, 100% 62.5%; mask-size:100% 100%, 100% 62.5%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 0, 0 0; mask-position:0 0, 0 0;
}
.pass figcaption {
  margin-top:12px; text-align:center; font-family:var(--heading-font); font-style:italic;
  font-size:clamp(11px, 2.35cqw, 15px); color:var(--ink-soft);
}

.wish {
  position:absolute; z-index:3; display:grid; grid-template-columns:28% 1fr; align-items:center; gap:7%;
  width:max(34%, 168px); padding:1.4cqw 1.8cqw 1.4cqw 1.4cqw; border-radius:10px;
  background:var(--card); border:1px solid rgba(34,31,27,.1);
  box-shadow:0 1px 0 rgba(34,31,27,.08), 0 14px 22px -16px rgba(60,42,22,.55);
  transition:transform .25s ease;
}
.wish img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:6px; background:#fff; }
.wish b { display:block; font-size:clamp(10.5px, 1.95cqw, 13px); line-height:1.25; font-weight:600; }
.wish span { display:block; margin-top:3px; font-size:clamp(9.5px, 1.7cqw, 11.5px); color:var(--ink-soft); white-space:nowrap; }
.wish div { min-width:0; }
.wish i { display:block; margin-top:1px; font-style:normal; white-space:normal; }
.wish-a { right:6%; top:1%; transform:rotate(4deg); }
.wish-b { left:-3%; top:30%; transform:rotate(-5deg); }
.wish-c { right:-3%; top:27%; transform:rotate(-2.5deg); }
.wish:hover { transform:rotate(0deg) translateY(-3px); }
.stamp {
  position:absolute; right:6%; bottom:-22%; padding:.25em .7em; transform:rotate(-7deg);
  border:1.5px solid var(--red); border-radius:5px; background:var(--card); color:var(--red);
  font-style:normal; font-weight:700; font-size:clamp(9px, 1.6cqw, 11px); letter-spacing:.12em; text-transform:uppercase;
}

.ground { position:absolute; left:0; bottom:5.2%; width:100%; height:4%; overflow:visible; }
.ground path { fill:none; stroke:var(--ink); stroke-opacity:.22; stroke-width:7; stroke-linecap:round; }
.cat { position:absolute; z-index:2; user-select:none; -webkit-user-drag:none; transition:transform .18s ease; }
.cat:active { transform:translateY(-10px); }
/* Hero cats: one sheet of resting-loop frames each, ten to a row (see the script).
   The sheets are the app's loops cropped to the cat, so a frame is just the cat. */
.sprite-cat { background-repeat:no-repeat; background-size:1000% 500%; background-position:0 0; }
.cat-ginger { background-image:url("../assets/landing/cat-ginger-perch.webp"); aspect-ratio:261 / 189; }
.cat-black { background-image:url("../assets/landing/cat-black-idle.webp"); aspect-ratio:268 / 218; }
/* The art faces left; the ginger cat turns to face Anna. */
.cat-ginger { left:0; bottom:6.6%; width:32%; scale:-1 1; }
.cat-black { right:-3%; bottom:6.2%; width:38%; }

/* ---------- entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pass { animation:pass-in .8s cubic-bezier(.2,.8,.2,1) both; }
  .wish { animation:drop-in .6s cubic-bezier(.2,.8,.2,1) both; }
  .wish-a { animation-delay:.35s; }
  .wish-c { animation-delay:.5s; }
  .wish-b { animation-delay:.65s; }
  .cat-ginger { animation:sit-up .55s cubic-bezier(.3,1.4,.5,1) .7s both; }
  .cat-black { animation:walk-in 1.1s cubic-bezier(.2,.7,.2,1) .8s both; }
  .h1-stroke path { stroke-dasharray:320; stroke-dashoffset:320; animation:draw .7s ease .5s forwards; }
}
@keyframes pass-in { from { opacity:0; translate:0 24px; } }
@keyframes drop-in { from { opacity:0; translate:0 -18px; } }
@keyframes sit-up { from { opacity:0; translate:0 22px; } }
@keyframes walk-in { from { opacity:0; translate:70px 0; } }
@keyframes draw { to { stroke-dashoffset:0; } }

/* ---------- scroll reveal ---------- */
/* The page script adds .reveal-on (never with reduced motion) and marks each section
   part .reveal, then .is-in once it is on screen; --reveal-delay staggers neighbours. */
.reveal-on .reveal {
  opacity:0; translate:0 22px;
  transition:opacity .7s ease, translate .8s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--reveal-delay, 0s);
}
.reveal-on .reveal.is-in { opacity:1; translate:0 0; }
/* The step cats move a beat after their step: the ginger one stretches up to the
   shelf, the black one peeks out from behind the floor, the sleeper settles in. */
.reveal-on .step.is-in .step-cat {
  animation:.75s cubic-bezier(.3,1.35,.5,1) calc(var(--reveal-delay, 0s) + .3s) both;
  transform-origin:50% 100%;
}
.reveal-on .step.is-in .step-cat-reach { animation-name:cat-reach; }
.reveal-on .step.is-in .step-cat-peek { animation-name:cat-peek; }
.reveal-on .step.is-in .step-cat-sleep { animation-name:cat-settle; }
@keyframes cat-reach { from { transform:scaleY(.86); } }
@keyframes cat-peek { from { transform:translateY(34%); clip-path:inset(0 0 34% 0); } }
@keyframes cat-settle { 0% { transform:scale(1.05, .93); } 60% { transform:scale(.98, 1.02); } }

/* ---------- alternating section bands ---------- */
/* Every other section sits on a slightly deeper paper strip with hairlines above
   and below, running edge to edge behind the centred content. */
.band { position:relative; isolation:isolate; }
.band::before {
  content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:var(--paper-deep); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}

/* ---------- mall tour ---------- */
.tour {
  display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); align-items:center;
  gap:32px 64px; max-width:1240px; margin:0 auto; padding:96px 32px;
}
.tour h2 {
  margin:0; font-family:var(--heading-font); font-weight:600;
  font-size:clamp(32px, 3.6vw, 50px); line-height:1.08; letter-spacing:-.015em; text-wrap:balance;
}
.tour-text { margin:22px 0 30px; max-width:30em; color:var(--ink-soft); }
.btn-ink { background:var(--ink); box-shadow:0 2px 0 #000; }
.btn-ink:hover { background:#3a342d; }
.btn-ink:active { box-shadow:0 0 0 #000; }
.btn-ink span { display:inline-block; margin-left:4px; transition:transform .2s ease; }
.btn-ink:hover span { transform:translateX(4px); }
.tour .fineprint { margin-top:16px; }
/* A shop-window frame: dark wood edge, like the storefront headers in the mall. */
.tour-window { margin:0; }
.tour-video {
  display:block; width:100%; height:auto; aspect-ratio:10 / 7; object-fit:cover;
  border:7px solid #3b2a1c; border-radius:18px; background:#efe4cf;
  box-shadow:0 1px 0 rgba(34,31,27,.12), 0 34px 50px -30px rgba(60,42,22,.6);
}
.tour-window figcaption {
  margin-top:12px; text-align:center; font-family:var(--heading-font); font-style:italic;
  font-size:14px; color:var(--ink-soft);
}
/* Under the tour: where to watch more of the cats. */
.social-icon { flex:none; width:1.15em; height:1.15em; }
.tour-social { margin:6px 0 0; text-align:center; font-size:14px; color:var(--ink-soft); }
/* The links stay together, so the line breaks before them, never between. */
.tour-social-links { white-space:nowrap; }
/* The last link keeps its "and" when the links wrap on a narrow phone. */
.tour-social-last { white-space:nowrap; }
.tour-social a {
  display:inline-flex; align-items:center; gap:5px; vertical-align:bottom;
  color:var(--ink); font-weight:600; text-decoration:none;
  border-bottom:1.5px solid var(--rule); padding-bottom:1px; transition:border-color .15s ease;
}
.tour-social a:hover { border-bottom-color:var(--ink); }
.tour-social a:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

/* ---------- how it works: cats on circles ---------- */
.steps {
  max-width:1240px; margin:0 auto; padding:96px 32px;
}
.steps-head { max-width:640px; margin-bottom:44px; }
.steps h2 {
  margin:0; font-family:var(--heading-font); font-weight:600;
  font-size:clamp(32px, 3.6vw, 50px); line-height:1.08; letter-spacing:-.015em; text-wrap:balance;
}
.steps-list {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px;
  margin:0; padding:0; list-style:none; counter-reset:step;
}
.step { counter-increment:step; }
.step:nth-child(1) { --circle:#a9bfc0; --floor:#93abac; --edge:#7d9697; }
.step:nth-child(2) { --circle:#c3cfae; --floor:#acbb93; --edge:#96a67c; }
.step:nth-child(3) { --circle:#e6c2b3; --floor:#d7a997; --edge:#c69381; }
.step h3 {
  display:flex; align-items:baseline; gap:12px; margin:26px 0 8px;
  font-family:var(--heading-font); font-weight:600; font-size:23px; line-height:1.2;
}
.step h3::before {
  content:counter(step); font-style:italic; font-weight:500; font-size:44px; line-height:.8; color:var(--ink);
}
.step p { margin:0; color:var(--ink-soft); font-size:16.5px; }
.step .step-note { margin-top:10px; font-size:14.5px; font-style:italic; }
/* The same move as the hero photo: a figure on a circle, free to rise above it.
   The lower quarter is a floor with a thin edge, which every cat stands on. */
.step-window {
  position:relative; width:74%; aspect-ratio:1; margin:64px auto 0; border-radius:50%;
  background:linear-gradient(var(--circle) 0 76%, var(--edge) 76% calc(76% + 2px), var(--floor) calc(76% + 2px));
  box-shadow:0 30px 40px -28px rgba(60,42,22,.45);
}
.step-cat { position:absolute; z-index:1; left:50%; bottom:23.5%; translate:-50% 0; height:auto; }
.step-cat-reach { width:auto; height:104%; bottom:13%; }
.step-cat-peek { width:70%; bottom:17%; }
.step-cat-sleep { width:80%; bottom:14%; }

/* Closing call to action: a paw trail and the button, under the questions. */
.paw-trail { grid-column:1 / -1; width:100%; margin:28px auto 0; max-width:700px; color:var(--ink); opacity:.18; }
.paw-trail svg { display:block; width:100%; height:auto; fill:currentColor; }
.page-cta { grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.page-cta .fineprint { margin:0; }

/* ---------- questions and answers ---------- */
.faq {
  display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:32px 64px; align-items:start;
  max-width:1240px; margin:0 auto; padding:88px 32px 96px;
}
.faq h2 {
  margin:0; font-family:var(--heading-font); font-weight:600;
  font-size:clamp(32px, 3.6vw, 50px); line-height:1.08; letter-spacing:-.015em;
}
.faq-more { margin:18px 0 0; color:var(--ink-soft); }
.faq-more a { color:var(--ink); text-underline-offset:3px; }
.faq-cat { width:auto; height:150px; margin-top:28px; }
.faq-list { border-top:1px solid var(--rule); }
.faq-item { border-bottom:1px solid var(--rule); }
.faq-item summary {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 0; cursor:pointer; list-style:none;
  font-family:var(--heading-font); font-weight:600; font-size:20px; line-height:1.3;
}
.faq-item summary::-webkit-details-marker { display:none; }
/* A drawn plus that turns into a minus. */
.faq-item summary::after {
  content:""; flex:none; width:16px; height:16px;
  background:linear-gradient(var(--ink), var(--ink)) center / 16px 2px no-repeat,
             linear-gradient(var(--ink), var(--ink)) center / 2px 16px no-repeat;
  transition:transform .2s ease;
}
.faq-item[open] summary::after { background-size:16px 2px, 2px 0; }
.faq-item summary:hover { color:#000; }
.faq-item summary:focus-visible { outline:2px solid var(--ink); outline-offset:4px; border-radius:4px; }
.faq-item p { margin:-6px 0 22px; max-width:36em; color:var(--ink-soft); }

/* ---------- footer: out onto the night street ---------- */
.footer {
  --night:#131a29; --road:#1b2a43; --kerb:#56617b;
  --footer-text:#ece3cf; --footer-soft:#a7b1c4; --footer-gold:#e3cb93;
  background:linear-gradient(#202638, var(--night) 55%);
  color:var(--footer-text);
}
/* The skyline is capped at the content width and fades out at its sides; the kerb and
   road carry on to both edges underneath, so the fade shows no seam. */
.footer-city {
  --sky:56px; position:relative; overflow:hidden; padding-top:var(--sky);
  background:linear-gradient(transparent calc(var(--sky) + (100% - var(--sky)) * .854), var(--kerb) 0 calc(var(--sky) + (100% - var(--sky)) * .876), var(--road) 0);
}
.footer-city-inner { position:relative; max-width:1240px; margin:0 auto; }
.footer-skyline {
  width:100%; height:auto;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.footer-body {
  display:grid; grid-template-columns:minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap:32px 40px;
  position:relative; max-width:1240px; margin:0 auto; padding:8px 32px 40px; background:var(--road);
  box-shadow:0 0 0 100vmax var(--road); clip-path:inset(0 -100vmax);
}
.footer .wordmark { color:var(--footer-text); }
.footer-brand p { margin:10px 0 0; color:var(--footer-soft); max-width:22em; }
.footer-brand .footer-hours { margin-top:4px; font-family:var(--heading-font); font-style:italic; font-size:15px; }
/* Icons only, named by their labels and tooltips; each keeps a finger-sized target,
   pulled left so the first icon lines up with the text above. */
.footer-brand .footer-social { display:flex; flex-wrap:wrap; gap:4px; margin:14px 0 0 -11px; }
.footer-social a {
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  color:var(--footer-text); text-decoration:none; transition:color .15s ease;
}
.footer-social a:hover { color:var(--footer-gold); }
.footer-social .social-icon { width:22px; height:22px; }
.footer-col { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.footer-col h2 {
  margin:4px 0 6px; font-family:var(--sign-font); font-weight:600; font-size:13px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--footer-gold);
}
.footer-col a { color:var(--footer-text); text-decoration:none; font-size:15.5px; }
.footer-col a:hover { text-decoration:underline; text-underline-offset:3px; }
.footer :is(a):focus-visible { outline:2px solid var(--footer-gold); outline-offset:3px; }
.footer-bottom {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  max-width:1240px; margin:0 auto; padding:18px 32px 28px;
  border-top:1px solid rgba(236,227,207,.12); color:var(--footer-soft); font-size:14px;
  background:var(--road); box-shadow:0 0 0 100vmax var(--road); clip-path:inset(0 -100vmax);
}
/* The cat sits on the line above the copyright: the bottom edge of the links block. */
.footer-cat { position:absolute; bottom:0; width:auto; height:74px; }
.footer-cat-ginger { left:32px; }
.footer-cat-black { right:32px; height:82px; }

/* ---------- phones: the create button waits at the bottom ---------- */
/* Shown by the page script once the hero's buttons are scrolled away. */
.dock {
  position:fixed; z-index:40; left:0; right:0; bottom:max(16px, env(safe-area-inset-bottom));
  display:flex; justify-content:center; padding:0 20px; pointer-events:none;
  opacity:0; visibility:hidden; translate:0 24px;
  transition:opacity .25s ease, translate .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
}
.dock.is-shown { opacity:1; visibility:visible; translate:0 0; transition-delay:0s; }
.dock .btn {
  pointer-events:auto; width:100%; max-width:360px; text-align:center;
  box-shadow:0 2px 0 var(--green-deep), 0 16px 28px -12px rgba(34,31,27,.55);
}
@media (min-width: 901px) { .dock { display:none; } }
@media (prefers-reduced-motion: reduce) { .dock { translate:none; } }

/* ---------- legal pages (privacy, terms) ---------- */
.legal { max-width:720px; margin:0 auto; padding:72px 32px 96px; }
.legal h1 { font-size:clamp(28px, 5vw, 52px); }
.legal h2 {
  margin:48px 0 0; font-family:var(--heading-font); font-weight:600; font-size:24px;
  line-height:1.25; scroll-margin-top:24px;
}
.legal h3 { margin:28px 0 0; font-size:17px; }
.legal p, .legal li { line-height:1.6; }
.legal p { margin:14px 0 0; }
.legal ul { margin:14px 0 0; padding-left:1.25em; }
.legal li + li { margin-top:8px; }
.legal-updated { color:var(--ink-soft); font-size:15px; }
.legal-summary {
  margin:32px 0 0; padding:22px 26px 24px; border:1px solid var(--rule); border-radius:14px;
  background:var(--card);
}
.legal .legal-summary h2 { margin:0; font-size:20px; }
/* Details still to be filled in before launch: loud on purpose. */
.legal mark.todo { padding:0 .2em; border-radius:3px; background:#ffe08a; color:var(--ink); }
.legal .fineprint { margin-top:56px; }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .top { padding:20px 20px 0; }
  .top-nav { gap:20px; }
  .top-link-optional { display:none; }
  .hero { grid-template-columns:minmax(0, 1fr); padding:20px 20px 44px; gap:28px; }
  .stage { order:-1; }
  .hero-copy { padding-top:0; }
  .lede { font-size:17.5px; margin-top:24px; }
  .cta { margin-top:28px; }
  .stage { width:100%; max-width:560px; margin:0 auto; }
  .tour { grid-template-columns:minmax(0, 1fr); padding:64px 20px; gap:32px; }
  .tour-video { border-width:5px; border-radius:14px; }
  .steps { padding:64px 20px 72px; }
  .steps-head { margin-bottom:32px; }
  .steps-list { grid-template-columns:minmax(0, 1fr); gap:44px; max-width:460px; margin:0 auto; }
  .step-window { width:70%; }
  .paw-trail { display:none; }
  .page-cta { margin-top:24px; }
  .faq { grid-template-columns:minmax(0, 1fr); padding:56px 20px 64px; gap:24px; }
  .faq-cat { display:none; }
  .faq-item summary { font-size:18px; padding:18px 0; }
  .footer-city { --sky:40px; }
  /* A narrow screen shows a slice of the skyline: the slice with the landmarks,
     never past either end of the picture. */
  .footer-skyline {
    width:100%; height:max(212px, 31.25vw); object-fit:cover; object-position:50% 100%;
    -webkit-mask-image:none; mask-image:none;
  }
  [data-landing="ru"] .footer-skyline { object-position:4% 100%; }
  [data-landing="en"] .footer-skyline { object-position:31% 100%; }
  .footer-cat { height:62px; }
  .footer-cat-ginger { left:20px; }
  .footer-cat-black { right:20px; height:68px; }
  .footer-body { grid-template-columns:repeat(2, minmax(0, 1fr)); padding:8px 20px 88px; }
  .footer-brand { grid-column:1 / -1; }
  .footer-bottom { padding:16px 20px 24px; }
  .legal { padding:44px 20px 72px; }
  .legal h2 { margin-top:40px; font-size:21px; }
  .legal-summary { padding:18px 18px 20px; }
}
@media (max-width: 480px) {
  h1 { font-size:clamp(38px, 11.4vw, 46px); }
  .stage { aspect-ratio:1 / 1.22; }
  .pass { left:18%; top:24.6%; width:64%; }
  .pass figcaption { display:none; }
  .wish { width:max(31%, 152px); grid-template-columns:24% 1fr; gap:6%; padding:5px 8px 5px 5px; }
  .wish i { display:none; }
  .wish-a { right:5%; top:3%; }
  .wish-b { left:-3%; top:31%; }
  .wish-c { right:-3%; top:43%; }
  .stamp { bottom:-38%; }
  /* Four links barely fit a phone: they get a line of their own a size smaller, and
     on the narrowest screens may wrap between links, never inside one. */
  .tour-social { font-size:13px; }
  .tour-social-links { display:block; white-space:normal; }
}