/* =========================================================
   Marburg.Club — Landing page
   A light, pastel evolution of the existing Marburg.Club
   design system. Shapes, radii, buttons and card anatomy are
   carried over unchanged; only the surface palette moves from
   espresso-dark to the pastel rhythm of the wireframe.
   ========================================================= */

:root{
  /* ---- brand ---- */
  --green:       #258C7F;   /* brand green — accents, active, loyalty */
  --green-d:     #0E5F55;   /* primary button fill */
  --green-dd:    #08453D;   /* button hover / pressed */
  --green-l:     #3FA98D;
  --green-tint:  #E7F2EF;
  --green-line:  rgba(37,140,127,.24);

  /* ---- ink ---- */
  --ink:         #0C2C48;
  --ink-soft:    #4E6379;
  --ink-mute:    #606C79;   /* 4.5:1 on every surface below — it carries 12–13px labels */
  --paper:       #ffffff;
  --line:        #E5EAF1;
  --line-warm:   #EDE4D6;

  /* ---- section surfaces (the colour rhythm) ---- */
  --bg-hero:     #F8F9FE;
  --bg-lilac:    #F3F2FE;
  --bg-lav:      #EEEAF8;   /* the soft pale lavender the hero opens onto */
  --bg-cream:    #FCF8F2;
  --bg-blue:     #E9F0FD;
  --bg-lilac-2:  #EFECFE;
  --bg-cream-2:  #FCF6EE;
  --bg-cta:      #E4EDFD;
  --bg-neutral:  #FBFAF8;

  /* ---- accents: each one is a tint to sit on and an ink to sit in ---- */
  --acc-amber:   #E0A64B;   --tint-amber:  #FBEFDC;  --on-amber:  #92641C;
  --acc-orange:  #E08A4B;   --tint-orange: #FCEBDE;  --on-orange: #A2551D;
  --acc-sky:     #4B9BD6;   --tint-sky:    #E3F0FB;
  --acc-violet:  #6E63C9;   --tint-violet: #EFEBFB;  --on-violet: #5A4FB0;
  --acc-rose:    #DE6A6A;   --tint-rose:   #FBE6E6;
  --tint-mint:   #DCEBE5;   /* the numbered circles            */
  --tint-mint-2: #E3F1EC;   /* the second green tick tile      */
  --tint-lilac:  #E6E2F7;   /* the FAQ help mark               */
  --tint-lilac-2:#F1EEFB;   /* the step icon tiles             */
  --black:       #000000;   /* the store lock-ups, and only them */
  --black-h:     #0A0F16;

  /* ---- the hero sky, the one gradient in the system ---- */
  --sky-0: #CFE4F6;  --sky-1: #E8F1F8;  --sky-2: #F4F1F7;

  /* ---- structure (unchanged from the existing system) ---- */
  --maxw:      1320px;
  /* ---- radius scale, 4pt ---- */
  --r-xs:   4px;    /* hairline bars, the focus ring        */
  --r-sm:   8px;    /* small controls, the store lock-ups   */
  --r-md:  12px;    /* buttons, tags, chips-that-are-not-pills */
  --r-lg:  16px;    /* icon tiles, media thumbnails         */
  --r-xl:  20px;    /* panels: an open FAQ row, a step card */
  --r-2xl: 24px;    /* cards: places, the deck, the room    */
  --r-full: 999px;  /* pills and circles                    */
  /* the names the components already use, pointing at the scale */
  --radius:    var(--r-2xl);
  --radius-sm: var(--r-md);
  --radius-md: var(--r-xl);
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --shadow-card: 0 24px 54px -30px rgba(12,44,72,.34);
  --shadow-lift: 0 38px 78px -34px rgba(12,44,72,.40);
  --shadow-soft: 0 14px 34px -22px rgba(12,44,72,.30);

  --font:         'Archivo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --serif:        'Newsreader', Georgia, serif;
  --font-display: 'Bricolage Grotesque', 'Archivo', sans-serif;

  /* ---- 8pt spacing scale (unchanged) ---- */
  --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px;
  --space-sm: 16px;  --space-md: 24px;  --space-lg: 32px;
  --space-xl: 48px;  --space-2xl: 64px; --space-3xl: 96px;

  /* ---- one page rhythm ---- */
  --section-py: clamp(56px, 7vw, 104px);
  --head-gap:   16px;
  /* the section head rhythm, used by every section that has one:
     eyebrow → heading → lead → the block that follows → its CTA */
  --t-eyebrow:  24px;   /* eyebrow to heading   */
  --t-head:     28px;   /* heading to lead      */
  --t-lead:     36px;   /* lead to what follows */
  --t-item:     24px;   /* between list items   */
  --t-cta:      32px;   /* whatever precedes it → the CTA */
  --t-after-cta:24px;   /* CTA → the note under it            */

  /* ---- what a surface pads itself by ---- */
  --p-card:   8px;   /* a media card: the image sits in a thin frame */
  --p-panel: 16px;   /* a content panel                              */
  --p-panel-lg:20px; /* the roomier panels                           */
  --head-flow:  clamp(24px, 3vw, 36px);
  --gutter:     clamp(20px, 5vw, 96px);
  --col-gap:    clamp(36px, 5vw, 72px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  background:var(--bg-neutral);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:var(--green); color:var(--paper); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:var(--maxw); }  /* alias — one grid for the whole page */
.serif{ font-family:var(--serif); font-style:italic; font-weight:500; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.h1{
  font-family:var(--font-display);
  font-size:clamp(38px,5.4vw,62px);
  line-height:1.04;
  font-weight:700;
  letter-spacing:-.035em;
  color:var(--ink);
}
.h2{
  font-family:var(--font-display);
  font-size:clamp(30px,3.9vw,44px);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.032em;
  color:var(--ink);
  text-wrap:balance;
}
.h3{
  font-family:var(--font-display);
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.18; font-weight:700; letter-spacing:-.022em; color:var(--ink);
}
.lead{
  font-size:clamp(15.5px,1.35vw,17.5px);
  line-height:1.62;
  color:var(--ink-soft);
  margin-top:var(--head-gap);
  max-width:42ch;
}
.eyebrow{
  display:block;
  font-size:12px; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:var(--t-eyebrow);
}

/* =========================================================
   BUTTONS  (shape, size and rhythm preserved)
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--green-d); color:var(--paper);
  font-size:15px; font-weight:600; letter-spacing:.005em;
  padding:12px 24px; border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:transform .4s var(--ease-out), background .25s, box-shadow .35s, border-color .25s;
  will-change:transform;
}
.btn svg{ flex:none; }
.btn--primary{ box-shadow:0 14px 30px -16px rgba(14,95,85,.85); }
.btn--primary:hover{ background:var(--green-dd); transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(14,95,85,.9); }
.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:rgba(12,44,72,.18); box-shadow:none;
}
.btn--ghost:hover{ background:rgba(12,44,72,.05); transform:translateY(-2px); }
.btn--lg{ font-size:16px; padding:16px 28px; }
.btn--pill{ border-radius:var(--r-full); }

/* arrow that nudges on hover */
.btn__arrow{ transition:transform .35s var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ---- app-store badges — the official lock-ups: black pill, hairline
       outline, Apple mark on the left, Google Play in full colour ---- */
.stores{ display:flex; gap:12px; flex-wrap:wrap; }
.store{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--black); color:var(--paper);
  border:1px solid rgba(255,255,255,.34);
  border-radius:var(--r-sm); padding:8px 16px 8px 12px;
  transition:transform .4s var(--ease-out), box-shadow .35s, background .25s;
  box-shadow:0 14px 30px -18px rgba(12,24,40,.85);
}
.store:hover{ transform:translateY(-2px); background:var(--black-h); box-shadow:0 20px 38px -18px rgba(12,24,40,.9); }
.store__ic{ width:23px; height:23px; flex:none; }
.store__ic--play{ width:21px; height:21px; }
.store__txt{ display:block; line-height:1.14; }
.store__txt small{ display:block; font-size:9px; letter-spacing:.02em; text-transform:uppercase; opacity:.95; font-weight:400; }
.store__txt b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.012em; }

/* ---- chips / tags ---- */
.tag{
  display:inline-flex; align-items:center;
  background:var(--paper); border:1.5px solid var(--line);
  color:var(--ink-soft); border-radius:var(--r-full);
  padding:4px 12px; font-size:12px; font-weight:600; letter-spacing:.01em;
}

/* ---- icon tile (shared by offers, business, steps) ---- */
.itile{
  width:38px; height:38px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md);
  background:var(--green-tint); color:var(--green);
  border:1px solid var(--green-line);
}
.itile svg{ width:19px; height:19px; }
.itile--amber { background:var(--tint-amber); color:var(--acc-amber);  border-color:rgba(224,166,75,.26); }
.itile--orange{ background:var(--tint-orange); color:var(--acc-orange); border-color:rgba(224,138,75,.26); }
.itile--sky   { background:var(--tint-sky); color:var(--acc-sky);    border-color:rgba(75,155,214,.26); }
.itile--violet{ background:var(--tint-violet); color:var(--acc-violet); border-color:rgba(110,99,201,.26); }
.itile--rose  { background:var(--tint-rose); color:var(--acc-rose);   border-color:rgba(222,106,106,.26); }

/* =========================================================
   SECTION SHELL + COLOUR RHYTHM
   ========================================================= */
.section{ position:relative; padding-block:var(--section-py); }
.section--hero   { background:var(--bg-hero); }
.section--lilac  { background:var(--bg-lilac); }
.section--cream  { background:var(--bg-cream); }
.section--blue   { background:var(--bg-blue); }
.section--lilac2 { background:var(--bg-lilac-2); }
.section--cream2 { background:var(--bg-cream-2); }
.section--cta    { background:var(--bg-cta); }

/* soft blend between two adjacent surfaces */
.section__seam{
  position:absolute; left:0; right:0; top:0; height:96px;
  pointer-events:none; z-index:0;
}

/* Bleed a grid child out to the right viewport edge.
   Container is max-width:var(--maxw) + padding-inline:var(--gutter). */
.bleed-r{ margin-right:calc(-1 * ((100vw - min(var(--maxw), 100vw)) / 2 + var(--gutter))); }

/* split layout used by sections 03–07: copy left, visual right */
.split{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:var(--col-gap);
  align-items:center;
}
.split__copy{ max-width:440px; }
.split__copy .btn{ margin-top:var(--t-cta); }

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--green-d),var(--green-l));
  z-index:200; transition:width .1s linear;
}

/* =========================================================
   NAV
   ========================================================= */
.nav-wrap{ position:sticky; top:14px; z-index:120; padding-inline:clamp(14px,4vw,28px); }
.nav{
  display:flex; align-items:center; gap:20px;
  max-width:1320px; margin-inline:auto;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(26px) saturate(1.5); -webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(12,44,72,.08);
  border-radius:var(--radius-md); padding:8px 12px 8px 16px;
  box-shadow:0 16px 40px -30px rgba(12,44,72,.55), inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .3s, box-shadow .3s, border-color .3s;
}
.nav.is-scrolled{ background:rgba(255,255,255,.9); box-shadow:0 20px 46px -28px rgba(12,44,72,.5); }
.nav__brand{ display:flex; align-items:center; gap:8px; flex:none; }
.nav__mark{ width:34px; height:34px; flex:none; display:block; }
.nav__mark img{ width:100%; height:100%; object-fit:contain; }
.nav__name{ font-family:var(--font-display); font-size:17.5px; letter-spacing:-.03em; color:var(--ink); }
.nav__name b{ font-weight:700; }
.nav__name span{ font-weight:400; color:var(--ink-soft); }
.nav__mid{ display:flex; align-items:center; gap:24px; margin-left:clamp(16px,3vw,44px); margin-right:auto; font-size:14px; font-weight:500; }
.nav__link{ color:var(--ink-soft); transition:color .2s; position:relative; padding-block:4px; }
.nav__link::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1.5px;
  background:var(--green); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--ink); }
.nav__right{ display:flex; align-items:center; gap:10px; flex:none; }
.nav__icon{
  width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--ink-soft); transition:background .2s,color .2s;
}
.nav__icon:hover{ background:rgba(12,44,72,.06); color:var(--ink); }
.lang{ display:flex; align-items:center; gap:4px; padding:6px 8px 6px 10px; border-radius:var(--r-sm); font-size:12.5px; font-weight:700; color:var(--ink-soft); transition:background .2s; }
.lang:hover{ background:rgba(12,44,72,.06); }
.lang__btn{ font:inherit; color:inherit; }
.lang__btn.is-active{ color:var(--ink); }
.lang__sep{ opacity:.4; }
.nav__cta{ padding:12px 20px; font-size:14px; }
.nav__burger{ display:none; width:38px; height:34px; border-radius:var(--r-sm); flex-direction:column; justify-content:center; align-items:center; gap:4px; }
.nav__burger i{ display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease-out), opacity .2s; }

/* =========================================================
   01 · HERO — a four-second visual story

   Assets: every element comes from the Hero folder, untouched —
   the Marburg painting (0), the phone, the Offers / Rewards /
   Events tiles and the loyalty card. The three cloud planes are
   cut from that same painting, so the sky and the drifting
   clouds are literally the same watercolour.

   Hierarchy, and the animation protects it in this order:
     Phone      the hero
     Card       secondary
     Tiles      supporting
     Marburg    the environment
     Text       the closing message — it arrives last, never first

   Beats (js/landing.js drives them):
     .is-lit       0.00s  Marburg + clouds, alone; camera 1.00 → 1.02
     .is-open      0.50s  "Experience Marburg differently." enters …
                   0.75s  … and is left alone on screen to be read
     .is-clearing  2.05s  it lifts away, -20px, and is gone by 2.45s
                   2.45s  a beat of nothing: background and clouds only
     .is-building  2.65s  the phone rises — 800ms, settling not landing
                   3.50s  Offers, then Rewards 3.65, Events 3.80
                   4.05s  the loyalty card glides in from the right
     .is-final     4.40s  the closing headline, copy and stores
                   5.05s  everything is present — the hold
     .is-settled   6.05s  ambient drift; the clouds take the transition on

   The two texts never share the frame: the closing column is
   visibility:hidden until .is-final, and the opening line is gone
   from the layer — not merely transparent — from 2.45s.
   The clouds are outside all of this: they move from frame one and
   never stop, including through the hold.
   ========================================================= */
.hero{
  position:relative;
  margin-top:-62px; padding-top:96px;
  padding-bottom:clamp(64px,9vw,132px);
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,var(--sky-0) 0%,var(--sky-1) 55%,var(--sky-2) 100%);
  isolation:isolate;

  /* the whole composition scales from these two numbers */
  --phone-h:clamp(320px,46vh,446px);   /* the phone, and everything is relative to it */
  --tile:.295;                         /* tile height as a fraction of the phone */
  --card-w:calc(var(--phone-h) * .45); /* the card reads as secondary, never a second hero */
  --bridge:0;                          /* 0 → 1 as the reader leaves the hero */
}

/* ---------------------------------------------------------
   Marburg — the painting, filling the viewport, never cropped hard
   --------------------------------------------------------- */
.hero__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity .9s ease-out;
}
.hero.is-lit .hero__bg{ opacity:1; }
.hero__bg img{
  position:absolute; left:50%; top:50%;
  min-width:100%; min-height:100%;
  width:auto; height:auto;
  transform:translate(-50%,-50%) scale(1);
  transition:transform 7.5s cubic-bezier(.33,0,.35,1);
  will-change:transform;
}
@supports (object-fit:cover){
  .hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
}
/* the only camera move in the piece: 1.00 → 1.02 with a breath of parallax */
.hero.is-lit .hero__bg img{ transform:translate(-50.5%,-50%) scale(1.02); }
.hero.is-settled .hero__bg img{ animation:city-drift 120s ease-in-out infinite; }
@keyframes city-drift{
  0%,100%{ transform:translate(-50.5%,-50%) scale(1.02) }
  50%    { transform:translate(-49.4%,-50.3%) scale(1.035) }
}

/* ---------------------------------------------------------
   Clouds — three planes, each two seamless tiles wide.
   The track slides exactly one tile and repeats, so the drift
   is continuous and starts on the very first frame.
   --------------------------------------------------------- */
.hero__clouds{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.cl{ position:absolute; left:-4%; width:108%; }
.cl__track{ display:flex; width:200%; will-change:transform; }
.cl__track > picture{ display:block; width:50%; flex:none; }
.cl__track img{ display:block; width:100%; height:auto; }

/* distant — very soft, very slow */
.cl--far{ top:-2%;  opacity:.5;  filter:blur(1px); }
.cl--far  .cl__track{ animation:cloud-run 196s linear infinite; }
/* middle — clearly visible, still subtle */
.cl--mid{ top:9%;   opacity:.7; }
.cl--mid  .cl__track{ animation:cloud-run 124s linear infinite; }
/* lower — the mist that sits on the city and becomes the bridge */
.cl--near{
  bottom:-14%; opacity:.95;
  transform:translateY(calc(var(--bridge) * -10%));
  transition:transform .25s linear;
}
.cl--near .cl__track{ animation:cloud-run 76s linear infinite; }
@keyframes cloud-run{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

/* a soft light veil under the copy column so the message stays readable */
.hero__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(270deg,
    rgba(255,255,255,.98) 0%,  rgba(255,255,255,.97) 22%,
    rgba(255,255,255,.90) 34%, rgba(255,255,255,.62) 45%,
    rgba(255,255,255,.26) 56%, rgba(255,255,255,0)   70%);
  opacity:0; transition:opacity 1.4s ease-out;
}
.hero.is-lit .hero__veil{ opacity:1; }

/* the bottom bridge: mist thickens and lifts as the reader leaves */
.hero__mist{
  /* below the composition and the copy — it is the bridge out of the
     hero, not a wash over the message */
  position:absolute; left:0; right:0; bottom:0; height:clamp(150px,26vh,290px);
  z-index:3; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(250,249,254,.55) 46%,
    rgba(243,241,251,.9) 76%, var(--bg-lav) 100%);
  opacity:calc(.6 + var(--bridge) * .4);
  transform:translateY(calc(var(--bridge) * -9%));
  transition:opacity .25s linear, transform .25s linear;
}

/* ---------------------------------------------------------
   Layout — composition left, closing message right,
   with the spec's 70–100px of breathing room between them
   --------------------------------------------------------- */
.hero__inner{
  position:relative; z-index:4;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  column-gap:clamp(70px,7vw,100px);
  align-items:center;
  width:100%;
  min-height:min(70vh,620px);
}

/* ---------------------------------------------------------
   The composition — editorial, never symmetrical
   --------------------------------------------------------- */
.hero__scene{
  position:relative;
  height:calc(var(--phone-h) * 1.72);
  width:100%;
}
.hobj{ position:absolute; opacity:0; will-change:transform,opacity; }
.hobj img{ width:100%; height:auto; display:block; }

/* --- the phone: rises from below, then settles into its size ---
   Two nested transforms so the move and the growth can overlap the way
   the spec asks: it travels 1.00 → 1.65s, and only then grows into place. */
.hobj--phone{
  left:45%; top:50%;
  height:var(--phone-h); aspect-ratio:900/1345;
  z-index:2;
  filter:drop-shadow(0 34px 54px rgba(60,72,104,.26));
  transform:translate(-50%,-50%) translateY(80px) scale(.94);
  transition:opacity .6s ease-out, transform .8s cubic-bezier(.16,1,.3,1);
}
.hobj--phone > picture{ display:block; height:100%; }
.hobj--phone img{ height:100%; width:auto; }
.hobj--phone.is-in{ opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1); }

/* --- supporting tiles: they arrive small and visibly grow --- */
.hobj--tile{
  height:calc(var(--phone-h) * var(--tile));
  z-index:3;
  filter:drop-shadow(0 16px 28px rgba(60,72,104,.2));
  transform:translateY(20px) scale(.85);
  transition:opacity .42s ease-out, transform .5s cubic-bezier(.2,.78,.3,1);
}
.hobj--tile img{ height:100%; width:auto; }
.hobj--tile.is-in{ opacity:1; transform:translateY(0) scale(1); }

/* Offers upper-left · Rewards upper-right · Events lower-left — nothing touches */
.hobj--offer { left:0%;  top:9%;  }
.hobj--reward{ left:69%; top:4%;  }
.hobj--event { left:3%;  top:60%; }

/* --- the loyalty card: glides in from the right, a touch tilted --- */
.hobj--card{
  left:68%; top:52%;
  width:var(--card-w); z-index:4;
  filter:drop-shadow(0 22px 40px rgba(60,72,104,.26));
  transform:translateX(100px) translateY(10px) scale(.9) rotate(3deg);
  transition:opacity .56s ease-out, transform .6s cubic-bezier(.18,.86,.26,1);
}
.hobj--card.is-in{ opacity:1; transform:translateX(0) translateY(0) scale(1) rotate(-2deg); }

/* after the hold, the composition only breathes — the clouds do the moving */
.hero.is-settled .hobj--phone.is-in { animation:float-phone 19s ease-in-out infinite; }
.hero.is-settled .hobj--offer.is-in { animation:float-b 17s ease-in-out infinite; }
.hero.is-settled .hobj--reward.is-in{ animation:float-b 21s ease-in-out infinite reverse; }
.hero.is-settled .hobj--event.is-in { animation:float-b 23s ease-in-out infinite; }
.hero.is-settled .hobj--card.is-in  { animation:float-card 20s ease-in-out infinite; }
@keyframes float-phone{
  0%,100%{ transform:translate(-50%,-50%) translateY(0) }
  50%    { transform:translate(-50%,-50%) translateY(-6px) }
}
@keyframes float-b{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
@keyframes float-card{
  0%,100%{ transform:translateX(0) translateY(0) rotate(-2deg) }
  50%    { transform:translateX(0) translateY(-5px) rotate(-2.4deg) }
}

/* ---------------------------------------------------------
   The opening statement — a title card, not the headline.
   It holds the frame alone, then steps aside for the product.
   --------------------------------------------------------- */
.hero__open{
  position:absolute; inset:96px 0 0; z-index:6;
  display:grid; place-items:center; text-align:center;
  pointer-events:none; padding-inline:var(--gutter);
  opacity:0; visibility:hidden; transform:translateY(20px); filter:blur(6px);
  transition:opacity .6s ease-out, transform .62s cubic-bezier(.22,.7,.28,1),
             filter .62s ease-out, visibility 0s linear .6s;
}
.hero.is-open .hero__open{
  opacity:1; visibility:visible; transform:none; filter:blur(0);
  transition:opacity .6s ease-out, transform .62s cubic-bezier(.22,.7,.28,1),
             filter .62s ease-out, visibility 0s;
}
/* it does not fade to nearly-nothing and linger — it leaves the layer */
.hero.is-clearing .hero__open{
  opacity:0; visibility:hidden; transform:translateY(-20px); filter:blur(3px);
  transition:opacity .4s ease-in, transform .42s cubic-bezier(.3,.6,.3,1),
             filter .4s ease-in, visibility 0s linear .4s;
}
.hero__open h2{
  font-family:var(--font-display);
  font-size:clamp(34px,4.4vw,64px); font-weight:700;
  letter-spacing:-.034em; color:var(--ink); line-height:1.07;
  max-width:16ch; margin-inline:auto;
  text-shadow:0 2px 26px rgba(255,255,255,.9);
}
.hero__open p{
  margin-top:18px; font-size:clamp(12px,1.05vw,14px);
  letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--ink-soft);
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease-out .22s, transform .7s var(--ease-out) .22s;
}
.hero.is-open .hero__open p{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   The closing message — arrives only once the picture is built
   --------------------------------------------------------- */
/* The closing message does not exist until .is-final: not faded, not
   underneath the opening line — out of the frame and out of the tree.
   This is what kept "Everything Marburg has to offer." on screen from
   the first frame. */
.hero__copy{
  z-index:5; max-width:430px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(40px);
  transition:opacity .7s ease-out, transform .7s var(--ease-out), visibility 0s linear .7s;
}
.hero.is-final .hero__copy{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  transition:opacity .7s ease-out, transform .72s var(--ease-out), visibility 0s;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(30px,3.1vw,46px); line-height:1.08;
  font-weight:700; letter-spacing:-.036em; color:var(--ink);
}
.hero__title .ln{ display:block; }

/* the letters fall into orbit and settle — the motion ends, nothing loops */
.orb-w{ display:inline-block; white-space:nowrap; }
.orb-ch{ display:inline-block; will-change:transform,opacity,filter; }
[data-orbital]:not(.is-orbiting) .orb-ch{ opacity:0; }

.hero__lead{
  font-size:clamp(15px,1.25vw,17px); line-height:1.62; color:var(--ink-soft);
  margin-top:var(--t-head); max-width:34ch;
  opacity:0; transform:translateX(24px);
  transition:opacity .6s ease-out .16s, transform .68s var(--ease-out) .16s;
}
.hero__actions{
  margin-top:var(--t-cta);
  opacity:0; transform:translateX(24px);
  transition:opacity .6s ease-out .28s, transform .68s var(--ease-out) .28s;
}
.hero.is-final .hero__lead,
.hero.is-final .hero__actions{ opacity:1; transform:none; }

/* =========================================================
   02 · HOW IT WORKS
   The hero does not stop at a hard edge: the low cloud plane
   spills over a soft organic boundary and the lavender chapter
   opens underneath it. Calm from here — scroll reveals only.
   ========================================================= */
.journey{
  position:relative; isolation:isolate;
  margin-top:calc(-1 * clamp(90px,12vw,150px));
  padding:calc(clamp(90px,12vw,150px) + var(--section-py)) 0 var(--section-py);
}
.journey__edge{
  position:absolute; top:0; left:0; width:100%;
  height:clamp(90px,12vw,150px); z-index:0;
  fill:var(--bg-lav); display:block;
}
.journey::before{
  content:""; position:absolute; z-index:0;
  left:0; right:0; top:clamp(89px,12vw,149px); bottom:0;
  background:var(--bg-lav);
}
/* the clouds carry over the boundary and dissolve into the lavender */
.journey__mist{
  position:absolute; z-index:1; pointer-events:none;
  left:-4%; right:-4%; top:calc(-1 * clamp(120px,15vw,200px));
  height:clamp(300px,34vw,460px);
  background:url("../assets/hero/cloud-near.webp") repeat-x center top / auto 100%;
  opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 46%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 46%,transparent 100%);
  animation:cloud-run 150s linear infinite;
  background-size:auto 100%;
}
.journey__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  column-gap:clamp(48px,5vw,88px);
  align-items:center;
}
.journey__intro{ display:flex; flex-direction:column; align-items:flex-start; }
.journey__title{
  font-family:var(--serif);
  font-size:clamp(44px,5vw,72px); line-height:1.0;
  font-weight:500; letter-spacing:-.028em; color:var(--ink);
}
.journey__title .ln{ display:block; }
.journey__lead{
  margin-top:var(--t-head);
  font-size:18px; line-height:30px;
  color:var(--ink-soft); max-width:32ch;
}
.journey__intro .btn{ margin-top:var(--t-cta); }

/* --- the thread, and the four stops on it --- */
.steps{ position:relative; list-style:none; display:flex; flex-direction:column; gap:16px; }
.steps__thread{
  /* an <svg> with a viewBox keeps its intrinsic ratio, so top/bottom alone
     would stretch it past the last stop — pin the height instead */
  position:absolute; left:0; top:55px; width:56px; height:calc(100% - 110px); z-index:0;
  fill:none; stroke:rgba(12,44,72,.24); stroke-width:1.6;
  stroke-dasharray:1.5 8; stroke-linecap:round;
}
.step{ position:relative; z-index:1; display:grid; grid-template-columns:56px minmax(0,1fr); gap:20px; align-items:center; }
.step__no{
  justify-self:center;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  background:var(--paper); color:var(--ink-mute);
  border:1px solid rgba(12,44,72,.07);
  box-shadow:0 8px 20px -14px rgba(30,30,70,.5);
  transition:background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.step.is-active .step__no{
  background:var(--green-d); color:var(--paper); border-color:transparent;
  box-shadow:0 12px 26px -12px rgba(14,95,85,.6);
}
.step__card{
  display:grid; grid-template-columns:52px minmax(0,1fr) 170px;
  gap:16px; align-items:center;
  min-height:112px;
  padding:12px 12px 12px var(--p-panel);
  border-radius:var(--r-2xl);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 26px 50px -34px rgba(30,30,70,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:box-shadow .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.step.is-active .step__card{
  background:rgba(255,255,255,.96);
  box-shadow:0 34px 60px -34px rgba(30,30,70,.6);
}
.step__ic{
  width:48px; height:48px; border-radius:var(--r-lg);
  display:grid; place-items:center;
  background:var(--tint-lilac-2); color:var(--green-d);
  transition:background .45s var(--ease);
}
.step.is-active .step__ic{ background:var(--green-tint); }
.step__ic svg{ width:24px; height:24px; }
.step__body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.step__title{ font-family:var(--serif); font-size:clamp(18px,1.5vw,21px); font-weight:600; letter-spacing:-.012em; color:var(--ink); }
.step__desc{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
/* the shot sits whole inside its frame — contained, never cropped */
.step__shot{ width:170px; height:90px; border-radius:var(--r-lg); overflow:hidden; background:var(--paper); display:grid; place-items:center; }
.step__shot img{ width:100%; height:100%; object-fit:contain; display:block; }

/* =========================================================
   03 · DISCOVER
   The map is the backdrop now, not the subject: a quiet plan of
   Marburg under the whole section, with the copy on the left and
   the browse strip — filters, then three places — on the right.
   Lighter than the hero, by design.
   ========================================================= */
.discover{ position:relative; background:var(--bg-cream); overflow:hidden; isolation:isolate; }
.discover__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../assets/img/discover-bg.webp") no-repeat center / cover;
  opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%);
}
.discover .container{ position:relative; z-index:1; }
.discover__top{
  display:grid; grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  column-gap:clamp(48px,5vw,88px); align-items:center;
}
.discover__copy .h2 .ln{ display:block; }
.discover__copy .h2 em{ font-style:normal; color:var(--green-d); }
.discover__copy .lead{ margin-top:var(--t-head); font-size:18px; line-height:30px; max-width:30ch; }
.discover__copy .btn{ margin-top:var(--t-cta); }

.chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--r-full);
  background:rgba(255,255,255,.92); border:1px solid rgba(12,44,72,.06);
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  transition:background .25s, color .25s, border-color .25s;
}
.chip svg{ width:16px; height:16px; }
.chip:hover{ background:var(--paper); color:var(--ink); }
.chip.is-active{ background:var(--green-d); border-color:transparent; color:var(--paper); }

.places{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.place{
  display:flex; flex-direction:column;
  background:var(--paper); border-radius:var(--r-xl); padding:var(--p-card) var(--p-card) var(--p-panel);
  border:1px solid rgba(12,44,72,.05);
  box-shadow:0 22px 44px -34px rgba(30,40,70,.55);
  transition:transform .4s var(--ease-out), box-shadow .35s;
}
.place:hover{ transform:translateY(-5px); box-shadow:0 32px 56px -34px rgba(30,40,70,.6); }
.place__media{ position:relative; display:block; border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/10; }
.place__media img{ width:100%; height:100%; object-fit:cover; }
.place__open{
  position:absolute; top:8px; right:8px;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:var(--r-full);
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:11.5px; font-weight:600; color:var(--ink);
}
.place__open i{ width:6px; height:6px; border-radius:50%; background:var(--green); }
.place__body{ display:block; padding:12px 6px 0; }
.tag--sm{ padding:4px 10px; font-size:11px; border-width:1px; }
.place__body b{ display:block; margin-top:8px; font-family:var(--font-display); font-size:15.5px; font-weight:700; letter-spacing:-.018em; color:var(--ink); }
.place__meta{ display:flex; align-items:center; gap:4px; margin-top:6px; font-size:12.5px; color:var(--ink-soft); }
.place__meta svg{ width:14px; height:14px; flex:none; color:var(--green-d); }
.place__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.place__perk{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:var(--r-full);
  font-size:12px; font-weight:600;
  background:var(--tint-amber); color:var(--on-amber);
}
.place__perk svg{ width:14px; height:14px; }
.place__perk--orange{ background:var(--tint-orange); color:var(--on-orange); }
.place__perk--violet{ background:var(--tint-violet); color:var(--on-violet); }
.place__go{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--bg-blue); color:var(--ink);
  transition:background .25s, transform .35s var(--ease-out);
}
.place__go svg{ width:15px; height:15px; }
.place:hover .place__go{ background:var(--green-tint); transform:translateX(2px); }



/* =========================================================
   05 · YOUR LOYALTY CARD
   One card, two ways to carry it: in the app, or in your pocket.
   Same container, same rhythm and the same check list as the two
   pitch sections — this is not a component of its own.
   ========================================================= */
.loyalty{ background:var(--bg-neutral); overflow:hidden; }
.loyalty__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  column-gap:clamp(40px,4.6vw,80px); align-items:center;
}
.loyalty__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.loyalty__title{
  font-family:var(--font-display);
  font-size:clamp(21px,2.05vw,29px); line-height:1.26;
  font-weight:700; letter-spacing:-.026em; color:var(--ink);
  max-width:36ch; text-wrap:balance;
}
.loyalty__title .ln{ display:block; }
/* the close of the line turns to the serif, italic — the same move the
   rest of the page makes when a sentence hands off to its accent */
.loyalty__title em{
  font-family:var(--serif); font-style:italic; font-weight:600;
  letter-spacing:-.012em;
}
.loyalty__copy .pitch__lead{ margin-top:var(--t-head); font-size:16px; line-height:27px; max-width:44ch; }
.loyalty__copy .checks{ margin-top:var(--t-lead); gap:var(--t-item); }
.loyalty__copy .checks b{ font-size:15px; }
.loyalty__copy .checks small{ font-size:13.5px; }
.loyalty__copy .checks + .btn{ margin-top:var(--t-cta); }

.checks--round .checks__tick{ border-radius:var(--r-lg); background:var(--green-tint); color:var(--green-d); border-color:transparent; }
.checks--round .checks__tick--mint{ background:var(--tint-mint-2); }
.checks--round .checks__tick--lilac{ background:var(--tint-violet); color:var(--on-violet); }

.loyalty__visual{ width:100%; }   /* fills its column: the gap to the copy is the grid gap */
.loyalty__visual img{ width:100%; height:auto; }

/* =========================================================
   04 · OFFERS  ·  06 · EVENTS
   Three sections, one shape: a column of copy on one side and
   a single supplied visual on the other. No rails, no card
   carousels — the artwork carries the section.
   ========================================================= */
/* the shared shape of the two pitch sections: a ruled eyebrow, a
   display line that hands off to a green italic serif, a lead, three
   ticked promises and one button — with the artwork opposite */
.eyebrow--rule{ display:flex; align-items:center; gap:14px; }
.eyebrow--rule::before{ content:""; width:clamp(26px,3vw,42px); height:1.5px; background:currentColor; opacity:.5; }
.pitch__title{
  font-family:var(--font-display);
  font-size:clamp(30px,3.5vw,50px); line-height:1.06;
  font-weight:800; letter-spacing:-.032em;
  color:var(--ink);
}
.pitch__title .ln{ display:block; }
.pitch__title em{
  font-family:var(--serif); font-style:italic; font-weight:500;
  letter-spacing:-.015em; color:var(--green-d);
}
.pitch__lead{
  margin-top:var(--t-head);
  font-size:clamp(15px,1.2vw,17px); line-height:1.65; color:var(--ink-soft); max-width:46ch;
}
.checks{ list-style:none; display:flex; flex-direction:column; gap:var(--t-item); margin-top:var(--t-lead); }
.checks li{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; align-items:start; }
.checks__tick{
  width:34px; height:34px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--green-tint); color:var(--green-d); border:1px solid var(--green-line);
}
.checks__tick svg{ width:17px; height:17px; }
.checks b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.012em; color:var(--ink); }
.checks small{ display:block; margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
.checks + .btn{ margin-top:var(--t-cta); }

.offers{ background:var(--bg-blue); overflow:hidden; }
.offers__grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  column-gap:clamp(40px,4.6vw,88px); align-items:center;
}
.offers__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.offers__copy .btn{ margin-top:var(--t-cta); }
.offers__note{ margin-top:var(--t-after-cta); font-size:13.5px; line-height:1.6; color:var(--ink-mute); }

/* ---------------------------------------------------------
   The deck

   Three panels that arrive as one object — overlapped, tilted,
   slightly small — and open into the three steps when the section
   comes into view. Once. The motion is the whole idea of the
   section, so nothing else here moves.
   --------------------------------------------------------- */
.deck{
  list-style:none;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(12px,1.2vw,16px);
  align-items:stretch;
}
.deck__card{
  position:relative; z-index:var(--z);
  display:flex; flex-direction:column;
  padding:var(--p-card) var(--p-card) var(--p-panel);
  border-radius:var(--radius);
  background:var(--paper);
  border:1px solid rgba(12,44,72,.05);
  box-shadow:var(--shadow-card);
  transform-origin:50% 60%;
  /* closed: gathered at the middle, tilted, a touch small */
  transform:translateX(var(--x)) rotate(var(--r)) scale(.96);
  opacity:.84;
  transition:transform .82s cubic-bezier(.16,1,.3,1) var(--d,0s),
             opacity   .6s  ease-out                var(--d,0s);
}
.deck.is-in .deck__card{
  transform:translateX(0) rotate(var(--rf)) scale(1);
  opacity:1;
}
/* one box for all three, so the numbered rows share a line */
.deck__art{
  display:block; border-radius:calc(var(--radius) - 8px); overflow:hidden;
  background:var(--bg-neutral); aspect-ratio:1/1.12;
}
.deck__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.deck__head{ display:flex; align-items:center; gap:10px; margin:16px 6px 0; }
.deck__no{
  width:26px; height:26px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--tint-mint); color:var(--green-d);
  font-size:12.5px; font-weight:700;
}
.deck__head b{
  font-family:var(--font-display); font-size:16px; font-weight:700;
  letter-spacing:-.02em; color:var(--ink);
}
.deck__card small{
  display:block; margin:8px 6px 0;
  font-size:13px; line-height:1.55; color:var(--ink-soft);
}

/* --- events: the week, as the app shows it --- */
.events{ background:var(--bg-lilac-2); overflow:hidden; }
.events__grid{
  display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  column-gap:clamp(30px,4vw,64px); align-items:center;
}
.events__copy .h2 .ln{ display:block; }
.events__visual img{ width:100%; height:auto; }

/* =========================================================
   06 · FOR LOCAL BUSINESSES
   Copy · a ruled list of what the club does for a shop · the room
   itself, with the two numbers that matter floating over it.
   ========================================================= */
.biz{ background:var(--bg-cream-2); overflow:hidden; }
.biz__grid{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,.86fr) minmax(0,1.2fr);
  column-gap:clamp(28px,3.4vw,52px);
  align-items:center;
}
.biz__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.biz__title{
  font-family:var(--serif);
  font-size:clamp(38px,4.1vw,60px); line-height:1.02;
  font-weight:500; letter-spacing:-.026em; color:var(--ink);
}
.biz__title .ln{ display:block; }
.biz__lead{ margin-top:var(--t-head); font-size:clamp(15px,1.2vw,17px); line-height:1.62; color:var(--ink-soft); max-width:36ch; }
.biz__copy .btn{ margin-top:var(--t-cta); }
.biz__note{ margin-top:var(--t-after-cta); font-size:13px; color:var(--ink-mute); }

.biz__list{
  list-style:none; display:flex; flex-direction:column; gap:clamp(16px,2.2vw,24px);
  padding-left:clamp(22px,2.6vw,38px);
  border-left:1px solid rgba(12,44,72,.1);
}
.biz__item{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; align-items:start; }
.biz__body{ display:flex; flex-direction:column; gap:4px; }
.biz__item b{
  font-family:var(--font-display); font-size:16px; font-weight:700;
  letter-spacing:-.018em; color:var(--ink); line-height:1.24;
}
.biz__item b span{ display:block; }
.biz__item small{ font-size:13px; line-height:1.5; color:var(--ink-soft); }

/* the room */
.biz__visual{ position:relative; }
.biz__shot{
  position:relative; z-index:1;
  border-radius:140px var(--r-2xl) var(--r-2xl) 140px; overflow:hidden;
  aspect-ratio:4/3.1;
  box-shadow:var(--shadow-card); border:1px solid rgba(12,44,72,.05);
}
.biz__shot img{ width:100%; height:100%; object-fit:cover; }
.biz__leaf{
  position:absolute; z-index:2; top:-26px; right:-12px; width:clamp(58px,6vw,86px);
  color:var(--green-l); pointer-events:none;
}
.biz__ring{
  position:absolute; z-index:0; left:-34px; bottom:34px;
  width:clamp(90px,9vw,124px); aspect-ratio:1;
  border:1.5px dashed rgba(37,140,127,.4); border-radius:50%;
}
.biz__stat, .biz__pill{
  position:absolute; z-index:2;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 26px 48px -30px rgba(30,40,70,.55);
}
.biz__stat{
  left:clamp(-30px,-2vw,0px); top:9%;
  padding:var(--p-panel) var(--p-panel-lg); border-radius:var(--r-xl); max-width:230px;
}
.biz__stat small{ display:block; font-size:12.5px; color:var(--ink-soft); }
.biz__stat b{
  display:flex; align-items:center; gap:10px; margin-block:2px 4px;
  font-family:var(--font-display); font-size:clamp(28px,2.6vw,36px);
  font-weight:700; letter-spacing:-.03em; color:var(--ink);
}
.biz__stat-ic{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-tint); color:var(--green-d);
}
.biz__stat-ic svg{ width:14px; height:14px; }
.biz__stat em{ display:block; font-style:normal; font-size:12px; line-height:1.45; color:var(--ink-mute); }
.biz__pill{
  right:-16px; bottom:12%;
  display:flex; align-items:center; gap:12px;
  padding:var(--p-panel) var(--p-panel) var(--p-panel) 12px; border-radius:var(--r-lg);
  background:rgba(231,242,239,.95); border-color:rgba(37,140,127,.2);
  font-size:13.5px; line-height:1.35; font-weight:600; color:var(--ink);
}
.biz__pill-ic{
  width:34px; height:34px; border-radius:var(--r-sm); flex:none; display:grid; place-items:center;
  background:var(--paper); color:var(--green-d);
}
.biz__pill-ic svg{ width:18px; height:18px; }

/* =========================================================
   08 · FAQ
   A statement on the left with a help card under it; the rows on
   the right. The open row lifts onto its own soft panel, the rest
   stay hairline. Answers arrive letter by letter out of blur —
   BlurredStagger, from components/ui/text-reveal-faqs.tsx.
   ========================================================= */
.faq{ background:var(--bg-lilac-2); }
.faq__wrap{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
  column-gap:clamp(40px,6vw,110px); align-items:start;
}
.faq__head{ position:sticky; top:104px; }
.faq__title{
  font-family:var(--font-display);
  font-size:clamp(32px,3.4vw,46px); line-height:1.08;
  font-weight:700; letter-spacing:-.034em; color:var(--ink);
}
.faq__title .ln{ display:block; }
.faq__sub{ margin-top:var(--t-head); font-size:clamp(15px,1.25vw,17px); line-height:1.62; color:var(--ink-soft); max-width:34ch; }

.faq__help{
  display:flex; align-items:flex-start; gap:16px;
  margin-top:var(--t-lead);
  padding:var(--p-panel-lg) 24px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
}
.faq__help-ic{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--tint-lilac); color:var(--on-violet);
}
.faq__help-ic svg{ width:21px; height:21px; }
.faq__help-txt small{
  display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}
.faq__help-txt b{ display:block; margin-top:6px; font-size:16px; font-weight:700; letter-spacing:-.018em; color:var(--ink); }
.faq__help-txt a{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-size:14px; font-weight:600; color:var(--green-d);
  transition:gap .25s var(--ease-out);
}
.faq__help-txt a:hover{ gap:12px; }

.faq__list{ display:flex; flex-direction:column; }
/* a closed row is a rule, not a card: no radius, so the hairline stays
   straight instead of curling up at the ends */
.faq__item{
  border-bottom:1px solid rgba(12,44,72,.1);
  border-radius:0;
  padding-inline:clamp(16px,1.6vw,20px);
  transition:background .3s, box-shadow .3s, border-color .3s, border-radius .3s;
}
.faq__item[open]{
  background:rgba(255,255,255,.55);
  border-radius:var(--radius-md);
  border-bottom-color:transparent;
  box-shadow:0 24px 50px -40px rgba(30,40,70,.55);
}
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block:20px;
  font-family:var(--font-display);
  font-size:clamp(15.5px,1.3vw,17.5px); font-weight:700; letter-spacing:-.018em; color:var(--ink);
  transition:color .25s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--green-d); }
.faq__chev{ width:18px; height:18px; flex:none; color:var(--ink-mute); transition:transform .25s ease-out; }
.faq__item[open] .faq__chev{ transform:rotate(180deg); }
.faq__a{ padding-bottom:20px; }
.faq__a p{ font-size:15px; line-height:1.7; color:var(--ink-soft); max-width:58ch; }

/* the stagger: every character starts blurred and arrives on its own beat */
.stag{ display:inline-block; opacity:0; filter:blur(10px); transition:opacity .3s ease-out, filter .3s ease-out; }
.stag.is-in{ opacity:1; filter:blur(0); }

/* =========================================================
   09 · FINAL CTA
   ========================================================= */
.cta{ position:relative; background:var(--bg-cta); overflow:hidden; padding-block:var(--section-py); }
.cta__clouds{
  position:absolute; left:-4%; right:-4%; bottom:-8%; height:52%;
  background:url("../assets/hero/cloud-near.webp") repeat-x bottom center / auto 100%;
  opacity:.5; pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.6) 46%,transparent 100%);
          mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.6) 46%,transparent 100%);
  animation:cloud-run 170s linear infinite;
}
.cta__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) auto;
  column-gap:clamp(30px,3.4vw,56px);
  align-items:center;
}
.cta__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.cta__title{
  font-family:var(--font-display);
  font-size:clamp(32px,3.5vw,50px); line-height:1.06;
  font-weight:700; letter-spacing:-.035em; color:var(--ink);
}
.cta__title .ln{ display:block; }
.cta__lead{ margin-top:var(--t-head); font-size:16px; line-height:26px; color:var(--ink-soft); max-width:38ch; }
.cta__copy .stores{ margin-top:var(--t-cta); }
.cta__visual{ justify-self:center; width:74%; }   /* ~26% down */
.cta__visual img{ width:100%; height:auto; filter:drop-shadow(0 40px 60px rgba(40,44,78,.24)); }
.cta__aside{
  position:relative; align-self:center; justify-self:end;
  font-family:var(--serif); font-size:clamp(14px,1.1vw,16px);
  line-height:1.45; color:var(--ink-soft); white-space:nowrap;
}
.cta__aside .ln{ display:block; }
.cta__leaf{ display:block; width:26px; margin-top:12px; color:var(--green-l); opacity:.8; }

/* =========================================================
   FOOTER
   The closing signature: one compact band of links on the same
   container and rhythm as every section above, with the existing
   Marburg line-art sitting behind the lower half at 15% — quiet
   enough to read as part of the paper, not as a picture.
   ========================================================= */
.footer{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-neutral);
  border-top:1px solid var(--line);
  padding-top:64px;
}
.footer__art{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:64px; transform:translateX(-50%);
  width:clamp(560px,52vw,720px);
}
.footer__art picture{ display:contents; }
.footer__art img{ width:100%; height:auto; display:block; opacity:.24; filter:saturate(.45); }
.footer__inner{ position:relative; z-index:1; }

.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.78fr)) auto;
  column-gap:clamp(32px,4.4vw,72px); row-gap:32px;
  padding-bottom:64px;
}
.footer__brand{ display:flex; align-items:center; gap:10px; }
.footer__mark{ width:38px; height:38px; flex:none; display:block; }
.footer__mark img{ width:100%; height:100%; object-fit:contain; }
.footer__name{ font-family:var(--font-display); font-size:18px; letter-spacing:-.03em; }
.footer__name b{ font-weight:700; } .footer__name span{ font-weight:400; color:var(--ink-soft); }
.footer__blurb{ margin-top:16px; font-size:15px; line-height:26px; color:var(--ink-soft); max-width:28ch; }
.footer__app{
  display:inline-flex; align-items:center; gap:8px; margin-top:var(--t-cta);
  font-size:14.5px; font-weight:600; color:var(--ink);
  padding-bottom:6px; border-bottom:1.5px solid rgba(12,44,72,.2);
  transition:border-color .25s, gap .25s var(--ease-out), color .25s;
}
.footer__app:hover{ color:var(--green-d); border-color:var(--green-d); gap:12px; }
.footer__soc{ display:flex; gap:2px; margin-top:24px; margin-left:-8px; }
.footer__soc a{ width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--ink-mute); transition:background .2s,color .2s; }
.footer__soc a:hover{ background:rgba(12,44,72,.06); color:var(--ink); }

.footer__col{ display:flex; flex-direction:column; gap:12px; }
.footer__col h3{ font-size:15px; font-weight:600; letter-spacing:-.008em; color:var(--ink); margin-bottom:8px; }
.footer__col a{ font-size:14.5px; font-weight:400; color:var(--ink-soft); transition:color .2s; }
.footer__col a:hover{ color:var(--ink); }

/* language: compact and secondary, not a column of its own weight */
.footer__lang .lang{ padding:0; gap:6px; font-size:13.5px; }
.footer__lang .lang__btn{ font-size:13.5px; font-weight:400; color:var(--ink-mute); }
.footer__lang .lang__btn.is-active{ font-weight:600; color:var(--ink); }
.footer__lang .lang:hover{ background:none; }

.footer__legal{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:20px 24px;
  border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-mute);
}
.footer__made{ display:inline-flex; align-items:center; gap:8px; }
.footer__made svg{ width:13px; height:13px; color:var(--green); }

/* =========================================================
   SECTION ENTRANCE ANIMATION
   ========================================================= */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .8s ease-out var(--d,0s), transform .95s var(--ease-out) var(--d,0s);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1120px){
  .nav__mid{ display:none; }
  .nav__right{ margin-left:auto; }
  .nav__burger{ display:flex; }
  /* --- HERO, stacked ---
     The composition is not squeezed sideways; it is retold vertically:
     Marburg → phone → the three tiles → loyalty card → closing message.
     Same story, same beats, same order. */
  .hero{ --phone-h:clamp(300px,40vw,400px); --card-w:calc(var(--phone-h) * .7); min-height:0; }
  .hero__inner{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(26px,6vw,44px); min-height:0; text-align:left;
  }
  .hero__copy{ order:2; max-width:none; }
  /* the desktop composition, kept: the phone in the middle, Offers and
     Events to its left, Rewards and the card to its right */
  .hero__scene{
    order:1; height:auto;
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-rows:auto auto;
    justify-items:center; align-items:center;
    column-gap:clamp(16px,4vw,40px); row-gap:clamp(18px,3vw,32px);
  }
  .hobj{ position:static; }
  .hobj--phone{
    grid-column:2; grid-row:1 / span 2;
    height:var(--phone-h); width:auto; aspect-ratio:900/1345;
    transform:translateY(80px) scale(.88);
  }
  .hobj--phone.is-in{ transform:translateY(0) scale(1); }
  .hobj--offer { grid-column:1; grid-row:1; align-self:end; }
  .hobj--event { grid-column:1; grid-row:2; align-self:start; }
  .hobj--reward{ grid-column:3; grid-row:1; align-self:end; }
  .hobj--card  { grid-column:3; grid-row:2; align-self:start; width:min(var(--card-w),100%); }
  .hobj--tile{ height:calc(var(--phone-h) * .28); }
  /* the ambient float is written for absolute placement — drop it when stacked */
  .hero.is-settled .hobj.is-in{ animation:none; }
  .hero__veil{ background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.5) 40%,rgba(255,255,255,.12) 68%); }
  .hero__open{ inset:86px 0 auto; place-items:start center; padding-top:6vh; }
  .cl--far{ top:0; } .cl--mid{ top:12%; } .cl--near{ bottom:-10%; }

  .split, .cta__grid{ grid-template-columns:minmax(0,1fr) !important; gap:clamp(28px,5vw,44px); }
  .offers__grid, .events__grid, .loyalty__grid{ grid-template-columns:minmax(0,1fr); row-gap:clamp(26px,5vw,40px); }
  .discover__top{ grid-template-columns:minmax(0,1fr); row-gap:clamp(24px,4vw,34px); }
  .places{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .places > :nth-child(3){ display:none; }
  .mapbox{ aspect-ratio:16/10; }
  .faq__head{ position:static; }
  .split__copy{ max-width:none; }
  .bleed-r{ margin-right:0; }
  .cta__visual::after{ display:none; }

  .biz__grid{ grid-template-columns:minmax(0,1fr); row-gap:clamp(28px,5vw,42px); }
  .biz__list{ border-left:0; padding-left:0; }
  .biz__shot{ border-radius:var(--radius); aspect-ratio:16/10; }
  .biz__stat{ left:0; }
  .biz__pill{ right:0; }

  .faq__wrap{ grid-template-columns:minmax(0,1fr); row-gap:clamp(26px,4vw,38px); }

  .cta__grid{ grid-template-columns:minmax(0,1fr); row-gap:clamp(26px,5vw,40px); }
  .cta__visual{ justify-self:start; max-width:520px; }
  .cta__aside{ justify-self:start; display:flex; align-items:center; gap:14px; }
  .cta__aside .ln{ display:inline; }
  .cta__leaf{ margin-top:0; }

  .footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px; padding-bottom:40px; }
  .footer__brandcol{ grid-column:1 / -1; }
  .footer__art{ width:min(92vw,560px); bottom:72px; }

  .journey__grid{ grid-template-columns:minmax(0,1fr); row-gap:clamp(28px,5vw,42px); }
  .journey__title{ font-size:clamp(40px,10vw,60px); }
  .steps{ gap:12px; }
}

/* very small phones — the nav needs one fewer control to fit */
@media (max-width:400px){
  .nav{ gap:8px; padding:8px 8px 8px 12px; }
  .nav__icon{ display:none; }
  .nav__name{ font-size:16px; }
  .lang{ padding:6px 6px 6px 8px; }
}

@media (max-width:640px){
  :root{ --section-py:clamp(52px,11vw,72px); }
  .nav{ padding:8px 10px 8px 12px; }
  .nav__cta{ display:none; }
  .hero{ margin-top:-58px; padding-top:88px; }
  .places{ grid-template-columns:minmax(0,1fr); }
  .places > :nth-child(3){ display:flex; }
  .chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
    .mapbox{ aspect-ratio:4/3; }
  .stores .store{ padding:8px 16px 8px 12px; }
  .footer__inner{ gap:14px; }
  .footer__links{ margin-left:0; order:3; width:100%; gap:18px; flex-wrap:wrap; }
  .footer__right{ margin-left:auto; }
  .step{ grid-template-columns:40px minmax(0,1fr); gap:10px; }
  .steps__thread{ width:40px; }
  .step__no{ width:36px; height:36px; font-size:11px; }
  .step__card{ grid-template-columns:44px minmax(0,1fr); padding:12px 14px; border-radius:var(--r-xl); }
  .step__ic{ width:44px; height:44px; border-radius:var(--r-lg); }
  .step__shot{ display:none; }
}

/* mobile drawer */
@media (max-width:1120px){
  .nav.is-open .nav__mid{
    display:flex; position:absolute; left:0; right:0; top:calc(100% + 10px);
    flex-direction:column; align-items:flex-start; gap:6px;
    background:rgba(255,255,255,.96); backdrop-filter:blur(24px);
    border:1px solid rgba(12,44,72,.08); border-radius:var(--radius-md);
    padding:14px 18px; margin:0;
    box-shadow:0 24px 50px -28px rgba(12,44,72,.55);
  }
  .nav{ position:relative; }
  .nav.is-open .nav__mid .nav__link{ padding-block:8px; font-size:15px; }
}

/* =========================================================
   ACCESSIBILITY & INPUT — applies at every width

   Two things the desktop build never needed: a visible focus
   ring for keyboard users, and a tap contract for touch. Both
   are here rather than sprinkled through the sections, so the
   rules are impossible to lose in a refactor.
   ========================================================= */
:where(a, button, summary, [tabindex]):focus-visible{
  outline:3px solid var(--green-d);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.faq__item summary:focus-visible{ outline-offset:-3px; }

/* no 300ms tap delay, and no text selection fighting a drag */
a, button, summary, .chip, .lang__btn{ touch-action:manipulation; }

/* the page never scrolls sideways, at any width */
html{ overflow-x:clip; }
.journey{ overflow:hidden; }

/* the fixed nav and the page gutters clear the notch */
.container{ padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }


/* ---------------------------------------------------------
   TOUCH TARGETS — any coarse pointer, at any width

   Size is a property of the input device, not the viewport: an
   iPad in portrait is 768px wide and still a finger. These rules
   key off the pointer, so a tablet gets the same 44px contract a
   phone does without inheriting the phone layout.
   --------------------------------------------------------- */
@media (pointer:coarse), (max-width:820px){
  .nav__brand,
  .footer__brand{ min-height:44px; }
  .nav__icon,
  .nav__burger{ width:44px; height:44px; }
  .lang__btn,
  .footer__lang .lang__btn{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .chip{ min-height:44px; padding-block:10px; }
  .place__go{ width:44px; height:44px; }
  .footer__soc a{ width:44px; height:44px; }
  .footer__col a{ min-height:44px; display:flex; align-items:center; }
  .footer__app,
  .more__link,
  .faq__help-txt a{ min-height:44px; align-items:center; }
  .btn{ min-height:48px; }
  .store{ min-height:48px; }
  .faq__item summary{ min-height:56px; }
}

/* =========================================================
   MOBILE — 760px and down

   Touch first: every target is at least 44×44, body copy is
   16px so iOS never zooms on its own, and the spacing drops to
   the 8pt steps (8 / 16 / 24 / 32 / 48) rather than the wide
   desktop rhythm.
   ========================================================= */
@media (max-width:760px){

  :root{
    --section-py:48px;
    --gutter:20px;
    --head-flow:24px;
    --radius:18px;
    --t-eyebrow:20px; --t-head:24px; --t-lead:28px; --t-item:20px; --t-cta:28px; --t-after-cta:20px;
  }

  /* ---- nav: real targets, and a drawer you can hit ---- */
  .nav{ padding:8px 10px 8px 12px; gap:6px; }
  .nav__brand{ min-height:44px; }
  .nav__icon,
  .nav__burger{ width:44px; height:44px; }
  .lang{ padding:0; }
  .lang__btn{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .nav.is-open .nav__mid .nav__link{
    min-height:48px; display:flex; align-items:center;
    padding-block:0; font-size:16px; width:100%;
  }

  /* ---- hero ----
     The painting keeps the top of the frame; the copy gets paper
     under it. The composition is a deliberate three-row grid —
     phone, the three tiles, then the card — not a wrap that lands
     wherever it lands. */
  .hero{
    min-height:auto;
    margin-top:-58px;
    padding:104px 0 72px;
    --phone-h:clamp(240px,66vw,300px);
    --card-w:min(64%,230px);
  }
  .hero__inner{ row-gap:32px; }
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(255,255,255,.16) 0%, rgba(255,255,255,.5) 34%,
      rgba(255,255,255,.9) 58%, rgba(255,255,255,.97) 76%, #fff 100%);
  }
  .hero__scene{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    justify-items:center; align-items:center;
    grid-template-rows:none;
    gap:16px; row-gap:20px;
  }
  .hobj{ grid-row:auto; align-self:center; }
  .hobj--phone{ order:1; grid-column:1 / -1; }
  .hobj--offer { order:2; grid-column:auto; }
  .hobj--reward{ order:3; grid-column:auto; }
  .hobj--event { order:4; grid-column:auto; }
  .hobj--tile{ height:calc(var(--phone-h) * .26); }
  .hobj--card{ order:5; grid-column:1 / -1; width:var(--card-w); }
  /* the closing message gets its own paper, full-bleed and feathered at
     the top, so the painting never competes with the words */
  .hero__copy{ position:relative; max-width:none; }
  .hero__copy::before{
    content:""; position:absolute; z-index:-1;
    inset:-56px calc(-1 * var(--gutter)) -72px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 14%,
      #fff 26%, #fff 100%);
  }
  .hero__title{ font-size:clamp(30px,8.4vw,38px); }
  .hero__lead{ font-size:16px; line-height:26px; }
  .hero__open h2{ font-size:clamp(26px,7.6vw,34px); }
  .hero__mist{ height:96px; }

  /* the lavender chapter overlaps the hero much less on a phone, so the
     cloud bridge never washes over the store badges */
  .journey{ margin-top:-56px; padding-top:calc(56px + var(--section-py)); }
  .journey__edge{ height:56px; }
  .journey::before{ top:55px; }
  .journey__mist{ top:-64px; height:190px; opacity:.4; }

  /* store badges are primary CTAs here — give them the height */
  .stores{ gap:10px; }
  .store{ min-height:48px; padding:8px 16px 8px 12px; }

  /* ---- buttons ---- */
  .btn{ min-height:48px; padding:14px 22px; font-size:15px; }

  /* ---- how it works ---- */
  .journey__title{ font-size:clamp(38px,11vw,46px); }
  .journey__lead{ font-size:16px; line-height:27px; }
  .steps{ gap:12px; }
  .step{ grid-template-columns:36px minmax(0,1fr); gap:10px; }
  .steps__thread{ width:36px; top:48px; height:calc(100% - 96px); }
  .step__no{ width:34px; height:34px; font-size:11px; }
  .step__card{ grid-template-columns:44px minmax(0,1fr); min-height:0; padding:14px 16px; gap:14px; }
  .step__ic{ width:44px; height:44px; border-radius:var(--r-md); }
  .step__shot{ display:none; }
  .step__title{ font-size:18px; }
  .step__desc{ font-size:15px; line-height:1.5; }

  /* ---- discover: the filters become an edge-to-edge scroller ---- */
  .discover__top{ row-gap:28px; }
  .discover__copy .lead{ font-size:16px; line-height:27px; }
  .chips{
    flex-wrap:nowrap; overflow-x:auto; gap:8px; margin-bottom:20px;
    scroll-snap-type:x proximity; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gutter));
    padding-inline:var(--gutter); padding-block:2px 6px;
    scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:none; min-height:44px; padding:10px 16px; scroll-snap-align:start; }
    .places{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .place__body b{ font-size:17px; }
  .place__meta{ font-size:14px; }
  .place__perk{ min-height:34px; font-size:13px; }
  .place__go{ width:44px; height:44px; }
  

  /* ---- the two pitch sections ---- */
  .pitch__title{ font-size:clamp(28px,7.8vw,36px); }
  .pitch__lead{ font-size:16px; line-height:27px; }
  .checks li{ grid-template-columns:34px minmax(0,1fr); gap:12px; }
  .checks b{ font-size:16px; }
  .checks small{ font-size:15px; line-height:1.5; }
  /* the deck stacks and opens downward instead of sideways */
  .deck{ grid-template-columns:minmax(0,1fr); row-gap:16px; }
  .deck__card{ transform:translateY(var(--y,0)) rotate(var(--r)) scale(.96); }
  .deck.is-in .deck__card{ transform:translateY(0) rotate(var(--rf)) scale(1); }
  .deck__card:nth-child(1){ --y:58%; }
  .deck__card:nth-child(2){ --y:0%;  }
  .deck__card:nth-child(3){ --y:-58%; }
  .deck__card small{ font-size:15px; }
  .deck__head b{ font-size:17px; }

  /* ---- loyalty ---- */
  .loyalty__title{ font-size:clamp(24px,6.6vw,30px); max-width:none; }
  .loyalty__copy .pitch__lead{ font-size:16px; }
  .loyalty__visual{ width:100%; }

  /* ---- businesses ---- */
  .biz__title{ font-size:clamp(34px,9.6vw,42px); }
  .biz__lead{ margin-top:var(--t-head); font-size:16px; line-height:27px; }
  .biz__item small{ font-size:14.5px; }
  .biz__stat{ left:0; top:6%; max-width:200px; padding:12px 14px 12px; }
  .biz__pill{ right:0; bottom:8%; font-size:13px; }
  .biz__leaf{ display:none; }

  /* ---- faq ---- */
  .faq__wrap{ row-gap:28px; }
  .faq__title{ font-size:clamp(28px,7.6vw,34px); }
  .faq__sub{ font-size:16px; line-height:27px; }
  .faq__item{ padding-inline:0; }
  .faq__item[open]{ padding-inline:16px; }
  .faq__item summary{ min-height:56px; padding-block:16px; font-size:16px; }
  .faq__a p{ font-size:15.5px; }
  .faq__help{ padding:18px 18px 20px; }

  /* ---- final cta ---- */
  .cta__title{ font-size:clamp(28px,7.8vw,36px); }
  .cta__lead{ font-size:16px; line-height:27px; }
  .cta__visual{ width:100%; max-width:420px; justify-self:start; }
  .cta__aside{ display:none; }          /* decorative only — it does not earn the height */

  /* ---- footer ---- */
  .footer{ padding-top:40px; }
  .footer__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:28px; padding-bottom:32px; }
  .footer__brandcol{ grid-column:1 / -1; }
  .footer__brand{ min-height:44px; }
  .footer__blurb{ font-size:16px; line-height:27px; max-width:none; }
  .footer__app{ min-height:44px; align-items:center; font-size:16px; }
  .footer__soc{ gap:4px; margin-top:20px; }
  .footer__soc a{ width:44px; height:44px; }
  .footer__col{ gap:2px; }
  .footer__col h3{ font-size:16px; margin-bottom:6px; }
  .footer__col a{ font-size:16px; min-height:44px; display:flex; align-items:center; }
  .footer__lang{ grid-column:1 / -1; }
  .footer__lang .lang__btn{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; }
  .footer__art{ width:min(86vw,420px); bottom:80px; }
  .footer__legal{ font-size:13px; padding-block:16px calc(20px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------
   SMALL PHONES — 380px and down
   --------------------------------------------------------- */
@media (max-width:380px){
  :root{ --gutter:16px; }
  .nav__name{ font-size:15px; }
  .nav__icon{ display:none; }
  .hero{ --phone-h:clamp(220px,64vw,240px); }
  .footer__grid{ grid-template-columns:minmax(0,1fr); }
}

/* ---------------------------------------------------------
   LANDSCAPE PHONES — short viewports must not trap the hero
   --------------------------------------------------------- */
@media (max-width:900px) and (orientation:landscape){
  .hero{ min-height:auto; padding-top:92px; }
  .hero{ --phone-h:clamp(200px,62vh,260px); }
  .hero__scene{ grid-template-columns:repeat(5,auto); grid-template-rows:none; justify-content:center; }
  .hobj{ grid-row:auto; align-self:center; }
  .hobj--phone{ order:2; grid-column:auto; grid-row:auto; }
  .hobj--offer{ order:1; grid-column:auto; }
  .hobj--reward{ order:3; grid-column:auto; }
  .hobj--event{ order:4; grid-column:auto; }
  .hobj--card{ order:5; grid-column:auto; width:min(26vw,200px); }
}

/* =========================================================
   REDUCED MOTION — resolve everything to its final state
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .hero__lead, .hero__actions, .hero__copy{ opacity:1 !important; visibility:visible !important; transform:none !important; }
  .hero__bg, .hero__veil, .hero__clouds, .hero__mist{ opacity:1 !important; }
  .hero__bg img{ transform:translate(-50%,-50%) !important; }
  .orb-ch{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hobj{ opacity:1 !important; }
  .hobj--phone{ transform:translate(-50%,-50%) !important; }
  .hobj--tile{ transform:none !important; }
  .hobj--card{ transform:rotate(-2deg) !important; }
  .hero__open{ display:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* stacked hero: the phone is a grid item there, not centred by translate */
@media (max-width:1120px) and (prefers-reduced-motion: reduce){
  .hobj--phone{ transform:none !important; }
}