/* ============================================================
   Landing page (index.html, sk.html, cs.html) — the hero with the app's
   launch animation, one evening with Amista, this week near you, why
   Amista, for organisers, get the app.
   Loaded after styles.css, which owns the tokens, nav, buttons and footer.
   The mock-ups (the hero's map and cards, the evening's cards, the feed)
   follow the app's light theme and its labels (app/lib/l10n/app_*.arb).
   ============================================================ */

.home { --nav-h: 76px; }
/* the nav floats over the hero: the hero slides up underneath it */
.home main > .hero:first-child { margin-top: calc(-1 * var(--nav-h)); }

/* stroke icons drawn by <use>: the symbol inherits from here, not from the sprite */
.ben-ic svg, .org-ic svg, .ui-goingbtn svg, .btn .arrow {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.btn .arrow { width: 18px; height: 18px; flex: none; }
.btn-lg { height: 58px; padding: 0 30px; font-size: 17px; }
.btn-white { background: #fff; color: var(--lagoon-text); box-shadow: 0 12px 26px -14px rgba(10,34,41,.6); }
.btn-white:hover { transform: translateY(-1px); background: var(--coal25); }
.btn-ghost-light { color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost-light:hover { border-color: #fff; }

.avs { display: inline-flex; flex: none; }
.avs img { display: block; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.avs img + img { margin-left: -9px; }

/* section heads */
.sec-head { max-width: 760px; margin-bottom: 64px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sec-head h2, .wk-head h2 {
  margin-top: 0; font-family: var(--display); font-weight: 500; color: var(--ink);
  font-size: clamp(34px, 4.8vw, 60px); line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance;
}
.sec-head p, .wk-head p { margin-top: 18px; font-size: 19px; line-height: 1.6; color: var(--body); max-width: 34em; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ============================================================
   Hero
   A stage measured in its own unit (--u = 1/1440 of its width, or
   1/390 on the portrait one), so the whole composition scales as one
   picture. Every animation runs once and ends on the element's own
   style: the resting frame needs no script and reduced motion just
   shows it.
   ============================================================ */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--lagoon); height: clamp(640px, 100svh, 980px); }
.hero-scene { position: absolute; inset: 0; }
.stage { position: absolute; container-type: inline-size; }
.stage-d {
  --u: calc(100cqw / 1440);
  right: 0; top: 50%; transform: translateY(-50%);
  width: max(100%, calc(clamp(640px, 100svh, 980px) * 1.6)); aspect-ratio: 1440 / 900;
}
.stage-m { --u: calc(100cqw / 390); display: none; }

.h-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  clip-path: circle(150% at 50% 52%); animation: h-map .8s .7s cubic-bezier(.25,.8,.25,1) backwards; }
@keyframes h-map { from { clip-path: circle(0% at 50% 52%); } }
.h-veil { position: absolute; inset: 0; animation: fade-in .5s 1.4s ease backwards;
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 32%, rgba(255,255,255,.5) 47%, rgba(255,255,255,0) 60%); }
/* "mist" — the wordmark's m i s t, melting away */
.h-mist { position: absolute; overflow: visible; fill: #fff; opacity: 0; animation: h-mist .4s .35s ease backwards; }
@keyframes h-mist { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(var(--u) * 5)); } }
/* the two "a"s: from the wordmark, turned tail-down into pins */
.h-a { position: absolute; transform-origin: var(--o); transform: var(--to);
  animation: h-a .75s .45s cubic-bezier(.6,0,.3,1.12) backwards; }
@keyframes h-a { from { transform: none; } }
.h-a svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--lagoon);
  filter: drop-shadow(0 calc(var(--u) * 8) calc(var(--u) * 10) rgba(18,23,29,.18)); animation: h-fill .3s .75s ease backwards; }
@keyframes h-fill { from { fill: #fff; filter: none; } }
/* the photo sits over the glyph and covers its counter, inside a lagoon ring */
.h-a img { position: absolute; z-index: 1; left: 14.15%; top: 13.75%; width: 66.1%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  transform: rotate(-49.92deg);
  animation: h-photo .32s 1.2s cubic-bezier(.3,1.4,.5,1) backwards; }
@keyframes h-photo { from { opacity: 0; transform: rotate(-49.92deg) scale(.4); } }
.h-shadow { position: absolute; border-radius: 50%; background: rgba(18,23,29,.28); filter: blur(3px); animation: fade-in .2s 1.15s backwards; }
.h-ring { position: absolute; border-radius: 50%; border: 2px solid var(--lagoon); opacity: 0; animation: h-ring 2.2s 1.4s ease-out infinite; }
@keyframes h-ring { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(2.8); opacity: 0; } }
/* the activity pins grow out of the map */
.h-pin { position: absolute; aspect-ratio: 203 / 250; transform-origin: 50% 100%;
  filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 8) rgba(18,23,29,.22));
  animation: h-pop .4s calc(1.35s + var(--d, 0s)) cubic-bezier(.3,1.5,.5,1) backwards; }
@keyframes h-pop { from { transform: scale(0); opacity: 0; } }
.h-pin svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--lagoon); }
.h-pin img { position: absolute; z-index: 1; left: 15%; top: 12.38%; width: 70%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.h-card {
  position: absolute; overflow: hidden; border-radius: calc(var(--u) * 24); background: #fff;
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) calc(var(--u) * -28) rgba(18,23,29,.45), 0 0 0 1px rgba(18,23,29,.05);
  animation: rise .6s 1.75s cubic-bezier(.2,.8,.2,1) backwards;
}
/* clear of the floating nav however the stage is cropped: the stage is centred
   on the hero, so its top (100cqw · 900/1440 − the hero's height) / 2 is cut off */
/* the stage is centred on the hero, so on a wide screen its top and bottom
   (100cqw · 900/1440 − the hero's height) / 2 each are cut off */
.stage-d {
  --crop: calc((100cqw * .625 - clamp(640px, 100svh, 980px)) / 2);
  --safe-top: calc(var(--crop) + var(--nav-h) + 12px);
  --safe-bot: calc(var(--crop) + clamp(640px, 100svh, 980px) - 14px);
  --card-top: max(calc(var(--u) * 130), calc(var(--crop) + var(--nav-h) + 24px));
}
/* each pin keeps its place unless that place is cut off or under the nav */
.stage-d .h-pin { top: clamp(var(--safe-top), calc(var(--u) * var(--y)), calc(var(--safe-bot) - var(--u) * var(--h))); }
.stage-d .h-card { top: var(--card-top); }
/* the pin under the card moves down with it */
.stage-d .h-pin-under { top: max(calc(var(--u) * 500), calc(var(--card-top) + var(--u) * 300)); }
.h-card > img { display: block; width: 100%; height: calc(var(--u) * 120); object-fit: cover; }
.h-card-b { display: flex; flex-direction: column; gap: calc(var(--u) * 4); padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 16); }
.h-card-when { font-size: calc(var(--u) * 12); font-weight: 700; letter-spacing: .06em; color: var(--lagoon-text); }
.h-card-t { font-family: var(--display); font-size: calc(var(--u) * 20); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.h-card-m { font-size: calc(var(--u) * 13); color: var(--meta); }
.h-card-f { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); }
.h-card-f .avs img { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.h-card-g { flex: 1; font-size: calc(var(--u) * 13); font-weight: 600; color: var(--body); }
.h-card-join { display: inline-flex; align-items: center; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 14); border-radius: 999px;
  background: var(--lagoon); color: #fff; font-size: calc(var(--u) * 13); font-weight: 700; }

.hero-copy { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; padding-top: var(--nav-h); }
.hero-copy .wrap { width: 100%; }
/* never under the pins: the leftmost stands at x 712 of the stage, which is
   anchored right and max(100vw, the hero's height × 1.6) wide */
.hero-text { max-width: min(600px, 44vw, 100vw - max(100vw, clamp(640px, 100svh, 980px) * 1.6) * .5056 - max(32px, (100vw - var(--maxw)) / 2 + 32px) - 40px); display: flex; flex-direction: column; align-items: flex-start; }
.hero-text > * { animation: rise .55s cubic-bezier(.2,.8,.2,1) backwards; }
/* the headline is there from the first frame: it is the page's largest
   paint, and holding it back for the intro held back LCP by 1.45 s (#394).
   The scene plays behind it; the rest of the copy still rises after. */
.hero-text > h1 { animation: none; }
.hero-text > :nth-child(2) { animation-delay: 1.55s; }
.hero-text > :nth-child(3) { animation-delay: 1.65s; }
.hero-text > :nth-child(4) { animation-delay: 1.75s; }
.hero h1 {
  margin-top: 0; font-family: var(--display); font-weight: 500; color: var(--ink);
  font-size: clamp(42px, 4.9vw, 74px); line-height: .98; letter-spacing: -0.045em; text-wrap: balance;
}
.hero-sub { margin-top: 24px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--body); max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .btn-ghost { background: rgba(255,255,255,.7); }

/* ============================================================
   One evening with Amista — a timeline down the middle
   ============================================================ */
.tl { padding: 128px 0 72px; }
.tl-list { list-style: none; position: relative; max-width: 1120px; margin: 0 auto; }
.tl-list::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, rgba(42,122,148,0), var(--lagoon) 8%, var(--lagoon) 92%, rgba(42,122,148,0));
}
.tl-stop {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  grid-template-areas: "text mark card"; align-items: center; min-height: 340px; padding: 28px 0;
}
.tl-stop:nth-child(even) { grid-template-areas: "card mark text"; }
.tl-text { grid-area: text; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.tl-stop:nth-child(even) .tl-text { align-items: flex-start; text-align: left; }
.tl-text h3 { font-family: var(--display); font-size: clamp(24px, 2.3vw, 31px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--lagoon); }
.tl-text p { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--body); max-width: 26em; }
.tl-mark { grid-area: mark; justify-self: center; width: 64px; height: 64px; border-radius: 50%; background: var(--page);
  display: flex; align-items: center; justify-content: center; }
.tl-mark svg { width: 38px; height: 47px; fill: var(--lagoon); }
.tl-card { grid-area: card; position: relative; overflow: hidden; border-radius: 28px; background: #fff;
  box-shadow: 0 30px 60px -36px rgba(18,23,29,.45), 0 0 0 1px rgba(18,23,29,.05); }

/* 17:02 — the map with a pin */
.ui-map { height: 280px; background: #F7F8F9; }
.ui-map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-filters { position: absolute; left: 20px; top: 18px; display: flex; gap: 8px; }
.ui-filters span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: 0 4px 12px -6px rgba(18,23,29,.3); }
.ui-filters .on { background: var(--lagoon); color: #fff; }
.ui-pin { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); }
.ui-pin-a { left: 54%; top: 66%; }
.ui-pin-b { left: 22%; top: 86%; }
.ui-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 15px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(18,23,29,.35); }
.ui-pin-a .ui-pill { height: 40px; padding: 0 14px 0 6px; border-radius: 20px; font-size: 13.5px;
  box-shadow: 0 10px 22px -10px rgba(18,23,29,.4), 0 0 0 3px rgba(42,122,148,.25); }
.ui-pill img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ui-pin i { position: relative; width: 2px; height: 12px; background: var(--ink); }
.ui-pin i::after { content: ""; position: absolute; left: -4.5px; bottom: -9px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 2.5px solid #fff; box-sizing: border-box; }

/* 17:05 — joined: who's going and the chat */
.ui-chat { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.ui-going { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ui-going .avs img { width: 28px; height: 28px; }
.bub { display: flex; align-items: flex-end; gap: 8px; }
.bub > img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.bub > span { padding: 11px 14px; border-radius: 18px 18px 18px 5px; background: var(--coal25); font-size: 14px; line-height: 1.4; color: var(--ink); }
.bub b { display: block; font-size: 11.5px; color: var(--violet); margin-bottom: 1px; }
.bub.me { flex-direction: row-reverse; }
.bub.me > span { border-radius: 18px 18px 5px 18px; background: var(--lagoon-text); color: #fff; }
.bub.me b { color: var(--lagoon-tint); }
.ui-goingbtn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 999px;
  background: var(--violet-wash); color: var(--violet); font-size: 15px; font-weight: 700; }
.ui-goingbtn svg { width: 16px; height: 16px; stroke-width: 2.6; }

/* 18:30 — together */
.ui-photo { height: 300px; }
.ui-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-now, .ui-there { position: absolute; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  background: rgba(255,255,255,.94); font-size: 13px; font-weight: 700; color: var(--ink); }
.ui-now { left: 16px; top: 16px; height: 34px; padding: 0 14px; }
.ui-now i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lagoon); }
.ui-now i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--lagoon); animation: h-ring 2.2s ease-out infinite; }
.ui-there { right: 16px; bottom: 16px; height: 40px; padding: 0 14px 0 6px; font-weight: 600; }
.ui-there .avs img { width: 26px; height: 26px; }

/* 21:10 — moments and the recap */
.ui-moments { padding: 14px; }
.ui-mom-hd { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; }
.ui-mom-hd b { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ink); }
.ui-recap { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--lagoon); color: #fff; font-size: 12.5px; font-weight: 700; }
.ui-recap svg { width: 13px; height: 13px; fill: currentColor; }
.ui-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: 18px; overflow: hidden; }
.ui-grid img { display: block; width: 100%; height: 100px; object-fit: cover; }

/* ============================================================
   This week near you — the live feed
   ============================================================ */
.wk { padding: 56px 0 72px; }
.wk-panel { position: relative; overflow: hidden; border-radius: 44px; background: var(--salt); padding: 64px 56px 0; }
.wk-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 28px 40px; }
.wk-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-filters button {
  height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rule); background: #fff;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--body); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.wk-filters button:hover { border-color: var(--coal300); color: var(--ink); }
.wk-filters button:active { transform: scale(.97); }
.wk-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.wk-filters button:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.wk-stage { position: relative; height: 640px; margin-top: 40px; }
.wk-src, .wk-cols {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 140px), transparent 100%); }
/* without script: a still masonry of the same cards */
.wk-src { list-style: none; height: 100%; overflow: hidden; columns: 4 220px; column-gap: 18px; }
.wk-src > li { break-inside: avoid; margin-bottom: 16px; }
.wk-ready .wk-src { display: none; }
.wk-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 18px; }
.wk-col { overflow: hidden; min-width: 0; }
.wk-track { display: flex; flex-direction: column; list-style: none; animation: wk-up var(--dur, 40s) linear var(--delay, 0s) infinite; animation-play-state: paused; }
.wk-track > li { margin-bottom: 16px; }
.wk-run .wk-track { animation-play-state: running; }
@keyframes wk-up { to { transform: translateY(-50%); } }

.fc-photo { overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--rule-soft); box-shadow: 0 14px 30px -24px rgba(18,23,29,.45); }
.fc-photo > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.fc-b { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.fc-when { align-self: flex-start; margin-bottom: 3px; padding: 3px 8px; border-radius: 8px; background: var(--accent-wash);
  font-size: 11.5px; font-weight: 700; color: var(--lagoon-text); }
.fc-t { font-family: var(--display); font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; color: var(--ink); }
.fc-m { font-size: 12.5px; color: var(--meta); }
.fc-left { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--danger); }
.fc-go { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: var(--body); }
.fc-go .avs img { width: 24px; height: 24px; }
.fc-chat { display: flex; align-items: flex-end; gap: 8px; }
.fc-chat > img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.fc-bub { padding: 11px 14px; border-radius: 18px 18px 18px 5px; background: #fff; border: 1px solid var(--rule-soft);
  box-shadow: 0 12px 26px -22px rgba(18,23,29,.45); font-size: 14px; line-height: 1.4; color: var(--ink); }
.fc-bub b { display: block; margin-bottom: 1px; font-size: 11.5px; color: var(--violet); }
.fc-chat.me { flex-direction: row-reverse; }
.fc-chat.me .fc-bub { border-radius: 18px 18px 5px 18px; background: var(--lagoon-text); border-color: var(--lagoon-text); color: #fff; }
.fc-chat.me .fc-bub b { color: var(--lagoon-tint); }
.fc-comm { display: flex; flex-direction: column; padding: 16px; border-radius: 22px; background: var(--lagoon-deep); color: #fff; }
.fc-comm small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lagoon-tint); }
.fc-comm b { margin-top: 5px; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.fc-comm span { margin-top: 2px; font-size: 12.5px; color: rgba(255,255,255,.78); }

.wk-toasts { position: absolute; z-index: 2; left: 50%; bottom: 28px; width: min(420px, calc(100% - 24px)); height: 60px; transform: translateX(-50%); }
.wk-toast { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 10px; border-radius: 999px;
  background: #fff; box-shadow: 0 24px 50px -22px rgba(18,23,29,.5), 0 0 0 1px rgba(18,23,29,.05);
  font-size: 14.5px; color: var(--body); opacity: 0; animation: wk-toast 12s cubic-bezier(.2,.8,.2,1) infinite; animation-play-state: paused; }
.wk-toast + .wk-toast { animation-delay: 6s; }
.wk-run .wk-toast { animation-play-state: running; }
.wk-toast b { color: var(--ink); }
.wk-toast > img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.wk-dot { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--accent-wash); display: flex; align-items: center; justify-content: center; }
.wk-dot i { width: 11px; height: 11px; border-radius: 50%; background: var(--lagoon); }
@keyframes wk-toast { 0%, 4% { opacity: 0; transform: translateY(14px) scale(.96); } 9%, 42% { opacity: 1; transform: none; } 47%, 100% { opacity: 0; transform: translateY(-8px); } }

/* ============================================================
   Why Amista
   ============================================================ */
.ben { padding: 72px 0; }
.ben-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 48px; }
.ben-grid li { display: flex; gap: 16px; }
.ben-ic { width: 48px; height: 48px; flex: none; border-radius: 16px; background: var(--accent-wash); color: var(--lagoon-text);
  display: flex; align-items: center; justify-content: center; }
.ben-ic svg { width: 24px; height: 24px; }
.ben-grid h3 { margin-top: 2px; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.ben-grid p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--body); }

/* ============================================================
   For organisers
   ============================================================ */
.org { padding: 56px 0; }
.org-panel {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center;
  overflow: hidden; border-radius: 40px; padding: 72px 64px; color: #fff;
  background:
    radial-gradient(80% 90% at 100% 0%, #3A8DA8 0%, transparent 60%),
    linear-gradient(160deg, var(--lagoon) 0%, var(--lagoon-text) 55%, var(--lagoon-deep) 100%);
}
.org h2 { margin-top: 0; font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; }
.org h2 .hl { color: var(--lagoon-tint); }
.org-lead { margin-top: 18px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 30em; }
.org-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 34px; }
.org-list li { display: flex; gap: 14px; }
.org-ic { width: 42px; height: 42px; flex: none; border-radius: 14px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; }
.org-ic svg { width: 21px; height: 21px; }
.org-list h3 { font-family: var(--display); font-size: 16.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.org-list p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.8); }
.org-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.org-art { position: relative; height: 460px; }
.ps { position: absolute; left: 50%; top: 50%; width: 280px; margin: -170px 0 0 -140px; border-radius: 24px; overflow: hidden; }
.ps img { display: block; width: 100%; object-fit: cover; }
.ps-back { height: 340px; background: var(--lagoon-deep); transform: translate(36px, -20px) rotate(10deg); }
.ps-back img { height: 100%; opacity: .5; mix-blend-mode: luminosity; }
.ps-front { margin-top: -180px; padding: 10px 10px 0; background: #fff; transform: translate(-20px, 6px) rotate(-6deg); box-shadow: 0 40px 60px -30px rgba(10,34,41,.75); }
.ps-front img { height: 250px; border-radius: 16px; }
.ps-front figcaption { padding: 12px 6px 14px; color: var(--ink); }
.ps-front figcaption b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: -.01em; }
.ps-front figcaption span { display: block; margin-top: 2px; font-size: 13px; color: var(--meta); }
.org-bubble { position: absolute; right: 0; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 260px;
  padding: 10px 16px 10px 10px; border-radius: 22px 22px 22px 6px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600;
  box-shadow: 0 24px 40px -22px rgba(10,34,41,.7); }
.org-bubble img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }

/* ============================================================
   Get the app
   ============================================================ */
.get { padding: 56px 0 100px; }
.get-panel { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 40px;
  border-radius: 40px; padding: 80px 64px; background: var(--ink); color: #fff; }
.get-panel::before { content: ""; position: absolute; right: -10%; top: -40%; width: 70%; height: 180%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(42,122,148,.45), transparent); }
.get-copy { position: relative; z-index: 1; }
.get h2 { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5.4vw, 68px); line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }
.get h2 .hl { color: var(--lagoon-tint); }
.get-copy > p { margin-top: 16px; font-size: 19px; color: rgba(255,255,255,.78); }
.get-row { display: flex; align-items: center; flex-wrap: wrap; gap: 24px 32px; margin-top: 34px; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 12px; min-width: 200px; height: 62px; padding: 0 24px; border-radius: 18px;
  background: #fff; color: var(--ink); text-decoration: none; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.store:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); }
.store svg { width: 24px; height: 24px; flex: none; }
.store > span { display: flex; flex-direction: column; }
.store small { font-size: 11.5px; line-height: 1.2; opacity: .7; }
.store b { font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.15; }
.get-qr { display: none; align-items: center; gap: 14px; max-width: 230px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.7); }
.get-qr.on { display: flex; }
.get-qr-code { width: 92px; height: 92px; flex: none; padding: 9px; border-radius: 16px; background: #fff; }
.get-qr-code svg { display: block; width: 100%; height: 100%; }
.get-art { position: relative; z-index: 1; width: 300px; height: 300px; flex: none; filter: drop-shadow(0 40px 50px rgba(0,0,0,.4)); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .wk-panel { padding: 52px 40px 0; }
  .org-panel { grid-template-columns: 1fr; padding: 60px 44px; }
  .org-art { height: 420px; }
  .org-list { max-width: 640px; }
}

/* below a laptop: the portrait hero — the map on top, the copy on a sheet under it */
@media (max-width: 1023px) {
  .hero { height: auto; overflow: visible; background: var(--page); }
  .hero-scene { position: relative; height: clamp(380px, 112vw, 600px); overflow: hidden; background: var(--lagoon); }
  .stage-d { display: none; }
  .stage-m { display: block; left: 50%; top: 40%; transform: translate(-50%, -40%);
    width: max(100%, calc(clamp(380px, 112vw, 600px) * 390 / 470)); aspect-ratio: 390 / 470; }
  .stage-m .h-map { clip-path: circle(150% at 50% 50%); animation-name: h-map-m; }
  .hero-copy { height: auto; margin-top: -30px; padding: 30px 0 8px; border-radius: 30px 30px 0 0; background: var(--page); }
  .hero-text { max-width: 640px; }
  .hero h1 { font-size: clamp(38px, 9.6vw, 64px); }
  .hero-sub { margin-top: 16px; }
  .hero-actions { margin-top: 26px; }
  .hero-text > :nth-child(2) { animation-delay: 1.18s; }
  .hero-text > :nth-child(3) { animation-delay: 1.26s; }
  .hero-text > :nth-child(4) { animation-delay: 1.34s; }
  .tl { padding-top: 88px; }
}
@keyframes h-map-m { from { clip-path: circle(0% at 50% 50%); } }
/* tablets: the wide composition above the copy, whole (no veil — the copy is below) */
@media (min-width: 600px) and (max-width: 1023px) {
  /* a little wider than the screen, cut on the left where the desktop keeps room for the copy */
  .hero-scene { height: calc(112vw * 900 / 1440); }
  .stage-d { display: block; right: 0; top: 0; transform: none; width: 112%; }
  .stage-d .h-veil { display: none; }
  .stage-d { --card-top: calc(var(--u) * 130); --safe-top: -100vh; --safe-bot: 200vh; }
  .stage-m { display: none; }
}

@media (max-width: 900px) {
  .ben-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .get-panel { flex-direction: column-reverse; align-items: flex-start; padding: 56px 40px; }
  .get-art { width: 140px; height: 140px; }
}

/* the timeline runs down the left on phones and small tablets */
@media (max-width: 860px) {
  .tl-list::before { left: 24px; }
  .tl-stop, .tl-stop:nth-child(even) {
    grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "mark text" ". card"; gap: 18px 16px;
    min-height: 0; padding: 22px 0; align-items: start;
  }
  .tl-text, .tl-stop:nth-child(even) .tl-text { align-items: flex-start; text-align: left; }
  .tl-mark { width: 48px; height: 48px; }
  .tl-mark svg { width: 28px; height: 35px; }
  .ui-map { height: 230px; }
  .ui-photo { height: 240px; }
}

@media (max-width: 720px) {
  .home { --nav-h: 68px; }
  .sec-head { margin-bottom: 40px; }
  .sec-head p, .wk-head p { font-size: 16.5px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .tl { padding: 72px 0 40px; }
  .tl-text p { font-size: 16px; }
  .wk { padding: 32px 0 48px; }
  .wk-panel { margin: 0 -8px; border-radius: 30px; padding: 38px 18px 0; }
  .wk-filters { gap: 6px; }
  .wk-filters button { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .wk-stage { height: 540px; margin-top: 28px; }
  .wk-cols { gap: 12px; }
  .wk-track > li, .wk-src > li { margin-bottom: 12px; }
  .fc-b { padding: 10px 11px 12px; }
  .fc-t { font-size: 15px; }
  .fc-bub { font-size: 13px; padding: 10px 12px; }
  .fc-comm b { font-size: 16px; }
  .wk-toast { font-size: 13px; gap: 10px; }
  .wk-toast > img, .wk-dot { width: 34px; height: 34px; }
  .ben { padding: 48px 0; }
  .ben-grid { grid-template-columns: 1fr; gap: 28px; }
  .org { padding: 40px 0; }
  .org-panel { margin: 0 -8px; border-radius: 30px; padding: 44px 22px; gap: 24px; }
  .org-list { grid-template-columns: 1fr; gap: 18px; }
  .org-actions .btn { flex: 1 1 auto; }
  .org-art { height: 380px; }
  .org-art .ps-back { transform: translate(24px, -14px) rotate(10deg) scale(.86); }
  .org-art .ps-front { transform: translate(-14px, -20px) rotate(-6deg) scale(.86); }
  .org-bubble { right: -4px; bottom: 0; max-width: 220px; font-size: 13px; }
  .get { padding: 40px 0 64px; }
  .get-panel { margin: 0 -8px; border-radius: 30px; padding: 44px 22px; }
  .stores { width: 100%; }
  .store { flex: 1 1 100%; }
}

@media (max-width: 380px) {
  .tl-stop, .tl-stop:nth-child(even) { grid-template-columns: 40px minmax(0, 1fr); gap: 16px 12px; }
  .tl-list::before { left: 20px; }
  .tl-mark { width: 40px; height: 40px; }
  .ui-chat { padding: 16px; }
  .bub > span { font-size: 13px; }
  .ui-grid img { height: 76px; }
}

@media (hover: none) {
  .store:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero *, .hero-text > * { animation: none !important; }
  .h-ring, .ui-now i::after { display: none; }
}