/* ==========================================================================
   Textly homepage V2 (#211). Loaded by templates/index.html only; every other
   page keeps assets/styles.css. Nothing here may depend on styles.css.

   Layout of this file
     1. Tokens            colour, type, radii, shadows, containers (#213)
     2. Base              reset, focus ring, skip link, reduced motion
     3. Page scaffold     section stack, .block, .col
     4. Type helpers      .t-h1 … .t-label, fluid between 1024 and 1440
     5. Shared elements   button, store badge, QR card, trust item, step pill,
                          language switch, brand mark, phone frame (#214)
     6. Overlays          QR popover, consent banner, waitlist popup
     7. Sections          one delimited region per section, in page order.
                          A section ticket writes inside its own region only.

   Breakpoint: desktop layout from 1024 px, mobile below (#211 rule 2).
   Inter only, weights 400/500/600 (inter.css is the variable font).
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Colour: Figma "Color → calm/*", Light mode */
  --bg: #FAFAFB;
  --card: #FFFFFF;
  --line: #E9E8EF;
  --text: #17161D;
  --muted: #6E6B7A;
  --faint: #A3A1AE;
  --violet: #573CFA;
  --violet-hover: #4932D2;
  --violet-soft: #F2F0FF;
  --money: #0E9F6E;
  --money-soft: #E8F7F0;
  --flame: #EC6A1E;
  --yellow: #FFC93C;
  --yellow-soft: #FFF7DD;
  --ink: #17161D;
  --on-color: #FFFFFF;
  /* "onColor @NN%" in the tickets: rgb(255 255 255 / NN%), written inline,
     e.g. color: rgb(255 255 255 / 85%). */

  /* Type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Radii (mobile values are swapped in below 1024) */
  --r-block: 40px;     /* colour blocks: hero, in-app, privacy, CTA, footer */
  --r-card: 32px;      /* cards: brands, steps, catch */
  --r-inner: 24px;     /* visuals inside a card */
  --r-badge: 16px;     /* store badge, QR card */
  --r-pill: 999px;     /* pills and buttons */

  /* Shadows */
  --shadow-badge: 0 8px 24px rgb(23 22 29 / 10%);
  --shadow-phone: 0 24px 48px -10px rgb(13 5 51 / 25%);
  --shadow-phone-hero: 0 30px 60px -10px rgb(13 5 51 / 35%);
  --shadow-sticker: 0 10px 24px rgb(23 22 28 / 18%);
  --shadow-note: 0 16px 40px -8px rgb(20 13 64 / 22%);
  --shadow-compare: 0 20px 40px -12px rgb(51 26 204 / 25%);

  /* Page */
  --section-gap: 24px;
  --page-pad-b: 24px;

  /* Containers. --block-pad: side padding around a full colour block.
     --col: the 1200 content column (120 px side padding at 1440).
     --block-in: side padding of content inside a block on mobile. */
  --block-pad: 24px;
  --col: min(1200px, 100% - 2 * clamp(24px, 8.33vw, 120px));
  --block-in: 22px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1023.98px) {
  :root {
    --r-block: 28px;
    --r-card: 28px;
    --r-inner: 20px;
    --shadow-sticker: 0 8px 20px rgb(23 22 28 / 18%);
    --shadow-note: 0 12px 30px -8px rgb(20 13 64 / 22%);
    --section-gap: 16px;
    --page-pad-b: 8px;
    --block-pad: 8px;
  }
}


/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* the sticky header; #215 may tune it */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--yellow); color: var(--ink); }

/* The one focus ring: 2 px violet, 2 px away (#213, Web / Button). On violet
   or ink a section may switch it to white with --focus. */
:focus-visible {
  outline: 2px solid var(--focus, var(--violet));
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 50%; top: 8px; z-index: 200;
  transform: translate(-50%, -200%);
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-color);
  font-size: 14px; font-weight: 600;
}
.skip:focus { transform: translate(-50%, 0); }

/* SVG <symbol> sprites: in the document, never on screen */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   3. Page scaffold
   body.home stacks header, main and footer; main stacks the sections. Both
   use the same gap, so every block sits 24 px (16 px mobile) from the next.

   Two widths:
     .block  a full colour block (hero, in-app, privacy, CTA, footer):
             24 px from the viewport edge on desktop.
     .col    the 1200 content column for content and cards.
   On mobile both sit 8 px from the edge, and from 391 px they stop at 640
   and centre (#211 rule 2).
   ========================================================================== */

body.home {
  display: flex; flex-direction: column;
  gap: var(--section-gap);
  min-height: 100vh;
  padding-bottom: var(--page-pad-b);
}

.page {
  display: flex; flex-direction: column;
  gap: var(--section-gap);
}

.block, .col {
  width: calc(100% - 2 * var(--block-pad));
  margin-inline: auto;
}
.col { width: var(--col); }
.block { border-radius: var(--r-block); }

@media (max-width: 1023.98px) {
  .block, .col { width: min(640px, 100% - 2 * var(--block-pad)); }
}


/* ==========================================================================
   4. Type helpers
   Each role carries its mobile and desktop size as unitless numbers
   (--fs-m, --fs-d). The size is the mobile value below 1024, the desktop
   value from 1440, and scales linearly in between. A section whose ticket
   names a different pair overrides only the two numbers:

     <h2 class="t-h2" style="--fs-m:32">   or in its own region:
     .catch__h { --fs-m: 32; }
   ========================================================================== */

.t-h1, .t-h2l, .t-h2, .t-card, .t-lead, .t-body, .t-label {
  font-size: clamp(
    calc(var(--fs-m) * 1px),
    calc(var(--fs-m) * 1px + (var(--fs-d) - var(--fs-m)) * (100vw - 1024px) / 416),
    calc(var(--fs-d) * 1px));
}

/* Hero H1: 84/600/1.05/-3%, mobile 46 */
.t-h1    { --fs-m: 46; --fs-d: 84; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
/* Section H2 (large): 64/600/1.02/-3%, mobile 36/1.04 */
.t-h2l   { --fs-m: 36; --fs-d: 64; font-weight: 600; line-height: 1.02; letter-spacing: -.03em; }
/* Section H2: 56/600/1.05/-2%, mobile 32–36/1.05–1.08 per section (default 36) */
.t-h2    { --fs-m: 36; --fs-d: 56; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
/* Card title: 30/600/1.2/-1.5%, mobile 26 */
.t-card  { --fs-m: 26; --fs-d: 30; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
/* Lead: 19/400/1.5, mobile 16 */
.t-lead  { --fs-m: 16; --fs-d: 19; font-weight: 400; line-height: 1.5; }
/* Body: 16–17/400/1.5, mobile 15 (default desktop 16) */
.t-body  { --fs-m: 15; --fs-d: 16; font-weight: 400; line-height: 1.5; }
/* Small label, uppercase: 13/600/1.5, mobile 11–12 (default 12) */
.t-label { --fs-m: 12; --fs-d: 13; font-weight: 600; line-height: 1.5; text-transform: uppercase; }

@media (max-width: 1023.98px) {
  .t-h2l { line-height: 1.04; }
}

.t-muted { color: var(--muted); }


/* ==========================================================================
   5. Shared elements. Names follow the Figma components.
   ========================================================================== */

/* ---------- Web / Button (534:1243), primary ----------
   <a class="btn btn--l" href="…">Start earning</a>
   Sizes: --l large, --m medium, --s small. --sm is the alias the generated
   consent banner uses (build_pages.py writes "btn btn--primary btn--sm"). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  border: 0; border-radius: var(--r-pill);
  background: var(--violet); color: var(--on-color);
  font-size: 15px; font-weight: 600; line-height: 1.5;
  white-space: nowrap; text-align: center;
  transition: background-color .2s var(--ease);
}
.btn:hover { background: var(--violet-hover); }
.btn:focus-visible { outline: 2px solid var(--focus, var(--violet)); outline-offset: 2px; }
.btn--l { padding: 17px 28px; font-size: 16px; line-height: 1.2; }
.btn--m { padding: 13px 22px; font-size: 15px; line-height: 1.5; }
.btn--s, .btn--sm { padding: 10px 16px; font-size: 14px; line-height: 1.2; }

/* ---------- Web / Store badge (430:19351), Light ----------
   <a class="store" data-qr href="PLAY" rel="noopener" aria-label="{{…}}">
     <svg class="store__glyph" viewBox="0 0 24 26" aria-hidden="true"><use href="#i-play"></use></svg>
     <span class="store__txt"><span class="store__k">{{…store-k}}</span><span class="store__v">{{…store-v}}</span></span>
   </a> */
.store {
  display: inline-flex; align-items: center; gap: 13px;
  width: 178px; height: 60px;
  padding: 0 24px 0 20px;
  border-radius: var(--r-badge);
  background: var(--card); color: var(--text);
  box-shadow: var(--shadow-badge);
  flex: none;
}
.store__glyph { width: 26px; height: 28px; flex: none; }
.store__txt { display: grid; text-align: left; white-space: nowrap; }
.store__k {
  font-size: 11px; font-weight: 600; line-height: 1.2;
  letter-spacing: 1.44px; text-transform: uppercase;
  color: rgb(23 22 29 / 55%);
}
.store__v { font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.25px; }

/* ---------- Web / QR install card (534:1378), desktop only ----------
   The code is the same one the QR popover shows: the store link (#194).
   <div class="qrcard">
     <svg class="qrcard__code" viewBox="0 0 41 41" aria-hidden="true"><use href="#i-qr"></use></svg>
     <span class="qrcard__txt"><span class="qrcard__t">{{…qr-title}}</span><span class="qrcard__s">{{…qr-sub}}</span></span>
   </div> */
.qrcard {
  display: inline-flex; align-items: center; gap: 14px;
  min-width: 232px; height: 60px;
  padding: 4px 18px 4px 8px;
  /* min-width rather than width: FR, IT and ES (#196) run longer than the
     English the card was drawn for, and grow it instead of spilling. */
  border-radius: var(--r-badge);
  background: var(--card); color: var(--text);
  flex: none;
}
.qrcard__code { width: 52px; height: 52px; flex: none; color: var(--text); shape-rendering: crispEdges; }
.qrcard__txt { display: grid; white-space: nowrap; }
.qrcard__t { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); }
.qrcard__s { font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--muted); }
@media (max-width: 1023.98px) {
  .qrcard { display: none; }
}

/* ---------- Web / Trust item (534:1279) ----------
   <li class="trust"><span class="trust__tick" aria-hidden="true">✓</span><span class="trust__label">{{trust.free}}</span></li> */
.trust { display: inline-flex; align-items: center; gap: 7px; }
.trust__tick { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--yellow); flex: none; }
.trust__label { font-size: 14px; font-weight: 500; line-height: 1.3; color: rgb(255 255 255 / 85%); }
@media (max-width: 1023.98px) {
  .trust__tick { font-size: 12px; }
  .trust__label { font-size: 13px; }
}

/* ---------- Web / Step pill (534:1258) ----------
   <span class="pill">{{steps.1.pill}}</span> */
.pill {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--violet-soft); color: var(--violet);
  font-size: 13px; font-weight: 600; line-height: 1.4;
}

/* ---------- Web / Language switch (507:1985) ----------
   Looks only; the behaviour is #196.
   <button class="lang" type="button" aria-label="{{…}}"><span class="lang__code">EN</span><span class="lang__caret" aria-hidden="true">▾</span></button> */
.lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--text);
  line-height: 1.2;
}
.lang__code { font-size: 14px; font-weight: 600; color: var(--text); }
.lang__caret { font-size: 11px; font-weight: 500; color: var(--muted); }

/* ---------- Brand mark ----------
   <a class="brand" href="/" aria-label="{{brand.aria}}">
     <svg class="brand__mark" viewBox="40 40 600 600" aria-hidden="true"><use href="#i-brand"></use></svg>
     <span class="brand__name">Textly</span>
   </a>
   The mark's own corner radius is 140/600, i.e. 7.9 px at 34 (Figma 7.92). */
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); }
.brand__mark { width: 34px; height: 34px; flex: none; border-radius: 8px; }
.brand__name { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.64px; }

/* ---------- Phone frame (#214) ----------
   One component, sized by --w (the outer width); everything derives from it.
   <div class="phone" style="--w:250px">
     <img src="assets/screens/daily-survey-720.webp" srcset="… 720w, … 1080w"
          sizes="(min-width:1024px) 250px, 230px" width="360" height="800"
          loading="lazy" decoding="async" alt="{{screens.daily-survey.alt}}">
   </div>
   The hero phone adds .phone--hero for its deeper shadow. */
.phone {
  --w: 250px;
  --bezel: calc(var(--w) * .032);
  --radius: calc(var(--w) * .13);
  position: relative;
  width: var(--w);
  padding: var(--bezel);
  border-radius: var(--radius);
  background: #121217;
  box-shadow: var(--shadow-phone);
  flex: none;
}
.phone > img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 360 / 800;
  object-fit: cover;
  border-radius: calc(var(--radius) - var(--bezel));
}
/* the punch-hole camera, drawn over the screen */
.phone::after {
  content: "";
  position: absolute; z-index: 1;
  top: calc(var(--w) * .056);
  left: 50%;
  width: calc(var(--w) * .03); height: calc(var(--w) * .03);
  transform: translateX(-50%);
  border-radius: 50%;
  background: #0D0D0F;
}
.phone--hero { box-shadow: var(--shadow-phone-hero); }


/* ==========================================================================
   6. Overlays. Their markup is shared and must keep working:
      .qr   the QR popover behind every a[data-qr] on desktop (template script)
      .ck   the consent banner, written by build_pages.py (<!--CONSENT-->)
      .wl   the waitlist popup, written there too while WAITLIST_LIVE
   ========================================================================== */

/* ---------- QR popover ---------- */
.qr {
  position: fixed; z-index: 150;
  width: 268px; padding: 22px 22px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 4px 12px rgb(23 22 29 / 8%), 0 40px 80px -30px rgb(23 22 29 / 55%);
  text-align: center;
  transform-origin: top center;
  animation: qrIn .32s var(--ease) both;
}
.qr[hidden] { display: none; }
@keyframes qrIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.qr::before {
  content: ""; position: absolute; top: -7px; left: var(--arrow, 50%);
  width: 14px; height: 14px; margin-left: -7px;
  background: var(--card);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
/* Opened above its button (the footer badge at the end of the page) */
.qr--up { transform-origin: bottom center; animation-name: qrUp; }
@keyframes qrUp { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.qr--up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.qr__x {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; display: grid; place-items: center;
  padding: 0; background: none; border: 0; border-radius: 50%;
  color: var(--muted);
}
.qr__x:hover { background: var(--bg); color: var(--text); }
.qr__x svg { width: 15px; height: 15px; }
.qr__k {
  font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .1em;
  text-transform: uppercase; color: var(--violet);
}
.qr__box {
  margin: 14px auto 0; width: 176px; padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-badge);
}
.qr__code { width: 100%; height: auto; color: var(--text); shape-rendering: crispEdges; }
.qr__d { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.qr__link {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--violet);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Consent banner (#123) ---------- */
.ck {
  position: fixed; z-index: 80;
  left: 0; right: 0; bottom: 0;
  padding: 0 16px max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.ck[hidden] { display: none; }
/* The open mobile menu (html.hd-open, V2:header in app.js) sits below the
   banner (z 70 against 80) and keeps Tab inside the header, so on a small
   phone the banner would cover the drawer's button and could not be reached
   by keyboard. While the menu is open the banner steps aside; closing the
   menu brings it back as it was. */
html.hd-open .ck { display: none; }
/* The banner sits inside the footer, which turns the ring white (--focus on
   .ft). On the banner's white card it has to be violet again. */
.ck, .wl { --focus: var(--violet); }
.ck__in {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  max-width: 980px; margin-inline: auto;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-note);
}
.ck__txt { flex: 1 1 36ch; min-width: 0; }
.ck__h { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.ck__d { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ck__d a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.ck__act { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) {
  .ck__in { padding: 18px; }
  .ck__act { width: 100%; }
  .ck__act .btn { flex: 1 1 0; }
}

/* ---------- Waitlist popup (#73), only on the page while WAITLIST_LIVE ---------- */
.wl {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 16px;
}
.wl[hidden] { display: none; }
.wl__scrim { position: absolute; inset: 0; background: rgb(23 22 29 / 45%); backdrop-filter: blur(3px); }
.wl__panel {
  position: relative; width: min(460px, 100%);
  padding: clamp(24px, 4vw, 34px);
  background: var(--card);
  border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-note);
}
.wl__x {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--muted);
}
.wl__x:hover { background: var(--bg); color: var(--text); }
.wl__x svg { width: 17px; height: 17px; }
.wl__h { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; max-width: 18ch; }
.wl__d { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.wl__form { margin-top: 20px; }
.wl__lbl {
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.wl__row { display: flex; flex-wrap: wrap; gap: 10px; }
.wl__in {
  flex: 1 1 14ch; min-width: 0;
  padding: 12px 14px; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
}
.wl__in::placeholder { color: var(--faint); }
.wl__in:focus { outline: 2px solid var(--violet); outline-offset: 2px; background: var(--card); }
.wl__in[aria-invalid="true"] { border-color: var(--flame); }
.wl__go { flex: none; }
.wl__go[disabled] { opacity: .6; cursor: default; }
.wl__err { margin-top: 10px; font-size: 13px; color: var(--flame); }
.wl__fine { margin-top: 16px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.wl__fine a, .wl__app a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.wl__app { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted); }
.wl__done { text-align: center; padding: 8px 0 4px; }
.wl__doneh { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.wl__doned { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }
html.wl-open { overflow: hidden; }


/* ==========================================================================
   7. Sections, in page order. Each ticket writes inside its own region and
   prefixes its classes with the section name (.hd__…, .hero__…, .steps__…).
   Use the tokens and shared elements above; do not restyle them here, add a
   modifier in your region instead (e.g. .hero .store { … }).
   ========================================================================== */



/* ===== V2:header (#215) ===== */
/* Header, desktop nav, mobile menu. Root: header.hd#hdr (app.js toggles
   .is-stuck on #hdr when the page scrolls). The header is sticky and always
   the first thing in the viewport, so the open mobile menu needs no second
   bar: the scrim (fixed, --bg) covers the page behind the real bar, the
   drawer hangs below it, and the menu button turns into the close button. */

/* Room for the sticky header when a link jumps to a section. Not as
   scroll-padding on html: the header's own controls sit inside that band, so
   focusing one of them (Tab, or the menu moving focus) made the browser
   "reveal" it by scrolling the page to the top. */
html { scroll-padding-top: 0; }
.page [id] { scroll-margin-top: 115px; } /* 107 header + 8 */

.hd {
  position: sticky; top: 0; z-index: 70;
  padding: 20px 0;
}

/* Bar: card, 1 px line, pill, p 8/8/8/20, gap 32, 1200 wide at 1440 */
.hd__bar {
  position: relative;
  display: flex; align-items: center;
  gap: clamp(20px, 2.23vw, 32px);
  width: var(--col);
  margin-inline: auto;
  padding: 8px 8px 8px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.hd .brand { min-height: 44px; flex: none; }
.hd__spacer { flex: 1 1 0; min-width: 0; }
.hd__lang, .hd__cta { flex: none; }

/* Links: 15/500/1.5 text, hover violet; For creators 15/600 violet */
.hd__nav { display: flex; align-items: center; gap: clamp(20px, 2.23vw, 32px); flex: none; }
.hd__link {
  display: inline-flex; align-items: center;
  padding: 0; border: 0; background: none;
  font-size: 15px; font-weight: 500; line-height: 1.5;
  color: var(--text); white-space: nowrap;
  transition: color .15s var(--ease);
}
.hd__link:hover, .hd__btn[aria-expanded="true"] { color: var(--violet); }
.hd__link--creators { font-weight: 600; color: var(--violet); }
.hd__link--creators:hover { color: var(--violet-hover); }
.hd__caret { margin-left: 7px; } /* Figma: "Features␣␣▾", a separate glyph */

/* Features dropdown: today's four entries (app.js drives .nav__grp/.nav__btn) */
.hd__grp { position: relative; display: flex; }
.hd__dd {
  position: absolute; top: 100%; left: 50%; z-index: 1;
  transform: translateX(-50%);
  padding-top: 30px; /* clears the bar's lower edge */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), visibility .2s;
}
.hd__grp.is-open .hd__dd { opacity: 1; visibility: visible; pointer-events: auto; }
.hd__dd-in {
  width: 336px; padding: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  box-shadow: var(--shadow-note);
}
.hd__item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 12px 13px;
  border-radius: 16px;
  transition: background-color .15s;
}
.hd__item:hover { background: var(--bg); }
.hd__item i {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--violet-soft); color: var(--violet);
}
.hd__item i svg { width: 17px; height: 17px; }
.hd__item b { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); }
.hd__item small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.42; color: var(--muted); }

/* Mobile-only parts */
.hd__burger, .hd__scrim, .hd__drawer { display: none; }

@media (max-width: 1023.98px) {
  .page [id] { scroll-margin-top: 82px; } /* 70 header + 12 */

  .hd { padding: 12px 12px 0; }

  /* Bar: 366×58 at 390, p 6/6/6/16, gap 8; capped with the blocks at 640 */
  .hd__bar {
    width: min(640px, 100%);
    gap: 8px;
    padding: 6px 6px 6px 16px;
  }
  .hd__nav, .hd__lang { display: none; }
  /* Button Small in the mobile bar */
  .hd__cta { padding: 10px 16px; font-size: 14px; line-height: 1.2; }

  /* Menu button: 40×40 bg circle, two 16×2 bars 4 px apart */
  .hd__burger {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px;
    padding: 0; border: 0; border-radius: 50%;
    background: var(--bg); color: var(--text);
  }
  .hd__bars { display: grid; gap: 4px; }
  .hd__bars span {
    display: block; width: 16px; height: 2px; border-radius: 1px;
    background: currentColor;
    transition: transform .15s var(--ease), width .15s var(--ease);
  }

  /* Full-screen bg behind the bar while the menu is open */
  .hd__scrim {
    display: block;
    position: fixed; inset: 0; z-index: -1;
    background: var(--bg);
  }

  /* Drawer: card, 1 px line, r 24, p 4/20/20/20, 8 below the bar */
  .hd__drawer {
    display: block;
    position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    width: min(640px, 100% - 24px);
    margin-inline: auto;
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 20px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
  }
  .hd__scrim, .hd__drawer {
    opacity: 0; visibility: hidden;
    /* closing: hide after the fade; opening: visible at once, so the first
       link can take focus in the same frame */
    transition: opacity .15s var(--ease), visibility 0s linear .15s;
  }

  /* Rows: p 16/0, gap 12, 1 px line below; label 17/500/1.4, chevron 20/500 muted */
  .hd__row {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
  }
  .hd__row-t {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1 1 0; min-width: 0;
    font-size: 17px; font-weight: 500; line-height: 1.4;
  }
  .hd__chev { flex: none; font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--muted); }
  .hd__row:hover .hd__row-t { color: var(--violet); }
  .hd__row--creators { border-bottom: 0; }
  .hd__row--creators .hd__row-t { font-weight: 600; color: var(--violet); }
  .hd__row--creators .hd__chev { color: var(--violet); }
  .hd__row-s { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--muted); }

  /* Actions: p 20/0/0/0, gap 12; language switch + Large button filling the rest */
  .hd__acts { display: flex; align-items: center; gap: 12px; padding-top: 20px; }
  .hd__acts .lang { flex: none; }
  .hd__acts-cta { flex: 1 1 0; min-width: 0; }

  /* Open */
  .hd.is-open .hd__scrim, .hd.is-open .hd__drawer {
    opacity: 1; visibility: visible;
    transition: opacity .15s var(--ease), visibility 0s;
  }
  .hd.is-open .hd__cta { display: none; }
  .hd.is-open .hd__bars span { width: 18px; }
  .hd.is-open .hd__bars span:first-child { transform: translateY(3px) rotate(45deg); }
  .hd.is-open .hd__bars span:last-child { transform: translateY(-3px) rotate(-45deg); }
  /* Scroll lock on the viewport. body's own overflow-x: hidden stops
     propagating once html is not visible, which would turn body into the
     scroller of the sticky header and jump the page to the top; hand the
     clipping to html for as long as the menu is open. */
  html.hd-open { overflow: hidden; }
  html.hd-open body { overflow: visible; }
}

/* Scrolled (.is-stuck, app.js, as soon as the page leaves the top): the
   floating pill turns into a full-width bar of frosted glass. The pill's
   card and line move from .hd__bar to .hd itself. The header must not change
   the height it takes in the flow, or the page would jump at the switch, so
   the padding it gives up comes back as margin below it: 20+20 = 8+8+24 on
   desktop, 12+0 = 6+6+0 on mobile. */
.hd, .hd__bar {
  transition: padding .25s var(--ease), margin .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease);
}
.hd { border-bottom: 1px solid transparent; }
.hd.is-stuck {
  padding: 8px 0; margin-bottom: 24px;
  background: rgb(255 255 255 / 92%);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgb(24 20 46 / 6%);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hd.is-stuck {
    background: rgb(255 255 255 / 66%);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.hd.is-stuck .hd__bar { background: transparent; border-color: transparent; }
/* backdrop-filter makes .hd the containing block of its fixed children, so
   the open menu's full-screen scrim would shrink to the bar. The scrim
   covers the page with --bg anyway; the glass is not needed under it. */
.hd.is-stuck.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 1023.98px) {
  .hd.is-stuck { padding: 6px 12px; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hd__scrim, .hd__drawer, .hd__dd, .hd__bars span, .hd, .hd__bar { transition: none; }
}
/* ===== /V2:header ===== */



/* ===== V2:hero (#216) ===== */
/* Hero and proof strip. Root: section.hero. Phone: .phone.phone--hero.

   Desktop: section.hero is the violet block (1392 x 940 at 1440) and a
   two-column grid, so the copy never runs under the phone. Its padding is a
   share of the block width (96, 186, 88 of 1392) and its height follows
   the phone column (or the copy, when that is taller), so 1440 lands on the
   Figma coordinates and 1024-1439 scales them down; every value is capped at its 1440 size for wider screens. Inside,
   cqw are of the block's content box (1110 at 1440): the phone is 30cqw
   (333 at 1440, never below 250). The stage (.hero__stage) is exactly the
   phone's box: circles and stickers are positioned against it and stay on
   the phone at every width.

   Mobile: the section is transparent, .hero__in is the violet block and the
   proof strip (only with proof.enabled) is a white card below it.

   Stickers: Figma's rotation sign is the opposite of CSS. "-6 deg" in the
   ticket is rotate(6deg) here, "+8 deg" is rotate(-8deg); the positions are
   the Figma bounding boxes converted to the unrotated box, rotated about its
   centre. */

.hero {
  --focus: var(--on-color);
  container-type: inline-size;
  position: relative;
  color: var(--on-color);
}
.hero__in { position: relative; isolation: isolate; }
.hero__copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; }

.hero__h { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--on-color); }
.hero__em {
  display: block; width: fit-content;
  padding: 2px 13px 5px;
  border-radius: 18px;
  background: var(--yellow); color: var(--ink);
}
.hero__lead { max-width: 540px; font-size: 19px; font-weight: 600; line-height: 1.55; color: var(--on-color); text-wrap: wrap; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.hero__deco, .hero__circle {
  position: absolute; z-index: -1;
  border-radius: 50%;
  background: rgb(255 255 255 / 7%);
  pointer-events: none;
}
.hero__deco { display: none; }

.hero__stage { position: relative; }
.hero__phone { --w: var(--hero-w); }
.hero__phone > img { background: var(--card); }

.hero__sticker {
  position: absolute; z-index: 1;
  margin: 0;
  white-space: nowrap;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sticker);
  line-height: 1.2;
}
.hero__sticker--paid { background: var(--money); color: var(--on-color); transform: rotate(6deg); }
.hero__sticker-v, .hero__sticker--today { font-weight: 600; }
.hero__sticker-k { font-weight: 500; }
.hero__sticker--today { background: var(--yellow); color: var(--ink); transform: rotate(-8deg); }

.hero__proof { display: flex; }
.hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hero__stat-v { font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.hero__stat-k { font-weight: 400; line-height: 1.3; }

@media (min-width: 1024px) {
  /* The section is the grid; .hero__in steps aside (display: contents) so
     the proof strip, which sits outside it for the mobile card, can take the
     bottom of the copy column. The section's own padding cannot use its own
     cqw, so it is written against its containing block: the block is that
     width minus the two --block-pad. */
  .hero {
    --bw: calc(100% - 2 * var(--block-pad));
    --hero-w: clamp(250px, 30cqw, 333px);
    display: grid;
    grid-template-columns: minmax(0, 566px) auto;
    grid-template-rows: auto 1fr;
    justify-content: space-between;
    column-gap: 72px; /* wider than the paid sticker's overhang left of the phone */
    padding: min(var(--bw) * .06897, 96px) min(var(--bw) * .13362, 186px)
             min(var(--bw) * .06322, 88px) min(var(--bw) * .06897, 96px);
    isolation: isolate;
    overflow: hidden;
    background: var(--violet);
  }
  .hero__in { display: contents; }
  .hero__copy { grid-column: 1; grid-row: 1; gap: 28px; }

  .hero__stage {
    grid-column: 2; grid-row: 1 / 3; align-self: start;
    width: var(--hero-w);
    /* 26 above and 16 below the phone: with the 96/88 padding this is the
       940 block at 1440; a taller copy column grows it */
    margin-block: min(2.3426cqw, 26px) min(1.4414cqw, 16px);
  }
  /* 760 at (-113, -242) and 420 at (67, -62) from the phone's corner, at 333 */
  .hero__circle--l {
    width: calc(var(--hero-w) * 2.2823); height: calc(var(--hero-w) * 2.2823);
    left: calc(var(--hero-w) * -.3393); top: calc(var(--hero-w) * -.7267);
  }
  .hero__circle--s {
    width: calc(var(--hero-w) * 1.2613); height: calc(var(--hero-w) * 1.2613);
    left: calc(var(--hero-w) * .2012); top: calc(var(--hero-w) * -.1862);
  }
  /* box 227 x 61 at (-57.4, 605.7) and 114 x 46 at (266.2, 77.7) from the
     phone's corner, i.e. in per cent of the 333 x 714 phone */
  .hero__sticker--paid { left: -17.24%; top: 84.83%; padding: 10px 18px; }
  .hero__sticker--paid .hero__sticker-v { font-size: 34px; }
  .hero__sticker--paid .hero__sticker-k { font-size: 17px; }
  .hero__sticker--today { left: 79.92%; top: 10.88%; padding: 10px 18px; font-size: 22px; }

  .hero__proof {
    grid-column: 1; grid-row: 2; align-self: end; justify-self: start;
    width: max-content;
    /* 589 at 1440 is wider than the 566 column: it may run 24 px into the gap
       there, where the gap is wide, and stays inside the column below ~1410 */
    max-width: calc(100% + clamp(0px, 100cqw - 1086px, 24px));
    margin-top: 32px;
    border-radius: 20px;
    background: rgb(23 22 29 / 18%);
  }
  .hero__stat { padding: 14px clamp(16px, 2.5225cqw, 28px) 14px clamp(14px, 2.1622cqw, 24px); }
  .hero__stat-v { font-size: clamp(30px, 3.6036cqw, 40px); color: var(--on-color); }
  .hero__stat-k { font-size: 14px; color: rgb(255 255 255 / 75%); }
  .hero__short { display: none; }
}

@media (max-width: 1023.98px) {
  .hero { display: flex; flex-direction: column; gap: 8px; }
  .hero__in {
    overflow: hidden;
    display: flex; flex-direction: column; gap: 22px;
    padding: 40px 22px 0;
    border-radius: var(--r-block);
    background: var(--violet);
  }
  .hero__deco { display: block; left: -205px; top: 105px; width: 411px; height: 427px; background: rgb(255 255 255 / 6%); }
  .hero__copy { gap: 22px; }
  .hero__h { gap: 6px; }
  .hero__em { padding: 1px 7px 3px; border-radius: 10px; }
  .hero__lead { max-width: none; font-size: 16px; color: rgb(255 255 255 / 85%); }
  .hero__trust { flex-direction: column; gap: 6px; }

  .hero__stage { --hero-w: 260px; width: 330px; height: 420px; align-self: center; flex: none; } /* centred even when wider than a 320 screen */
  .hero__phone { position: absolute; left: 35px; top: 24px; }
  .hero__circle--l { display: none; }
  .hero__circle--s { left: -45px; top: 30px; width: 420px; height: 420px; }
  .hero__sticker--paid { left: 11.1px; top: 333.6px; padding: 8px 14px; }
  .hero__sticker--paid .hero__sticker-v { font-size: 28px; }
  .hero__sticker--paid .hero__sticker-k { font-size: 14px; }
  .hero__sticker--today { left: 237.2px; top: 86.2px; padding: 8px 14px; font-size: 18px; }

  .hero__proof {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line); border-radius: 22px;
    background: var(--card); color: var(--text);
  }
  .hero__stat { padding: 14px 0; align-items: center; text-align: center; }
  .hero__stat-v { font-size: 26px; color: var(--text); }
  .hero__stat-k { font-size: 12px; color: var(--muted); }
  .hero__long { display: none; }
}
/* ===== /V2:hero ===== */



/* ===== V2:brands (#217) ===== */
/* Brands card. Root: section.brands. Logo symbols: #lg-* in the slot. */
/* Figma 547:21908 (desktop) and 547:22028 (mobile). The logo wall is one
   box of 613.561 x 167.9 design px (320 wide on mobile, the same geometry at
   0.52); each glyph sits at its Figma position, as a share of that box, so
   the wall scales without reflowing. */
.brands { padding-block: 56px 32px; }

.brands__card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px;
  padding: 40px 56px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-card);
}

.brands__copy {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 1 420px; min-width: 340px;
}
/* Figma breaks after "favorite", not where balance would. */
.brands__h { --fs-d: 32; margin: 0; text-wrap: wrap; }
.brands__text { margin: 0; max-width: 380px; }

.brands__logos {
  position: relative;
  flex: 0 1 614px; min-width: 0;
  aspect-ratio: 613.561 / 167.9;
  margin: 0; padding: 0; list-style: none;
  color: var(--text);
}
.brands__logo {
  position: absolute;
  left: calc(var(--x) / 613.561 * 100%);
  top: calc(var(--y) / 167.9 * 100%);
  width: calc(var(--w) / 613.561 * 100%);
  height: calc(var(--h) / 167.9 * 100%);
}
.brands__logo svg {
  display: block; width: 100%; height: 100%;
  fill: currentColor; opacity: .82;
}
.brands__logo--adidas    { --x: 55.604;  --y: 6.901;   --w: 73.366;  --h: 50.598; }
.brands__logo--amazon    { --x: 253.431; --y: 16.101;  --w: 106.680; --h: 32.199; }
.brands__logo--meta      { --x: 461.339; --y: 20.126;  --w: 119.852; --h: 24.147; }
.brands__logo--spotify   { --x: 155.633; --y: 127.267; --w: 112.471; --h: 33.732; }
.brands__logo--northface { --x: 383.065; --y: 133.372; --w: 72.038;  --h: 33.217; }

@media (max-width: 1023.98px) {
  .brands { padding-block: 0; }
  .brands__card {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 10px;
    padding: 28px 22px;
  }
  .brands__copy { display: contents; }
  .brands__text { max-width: none; }
  .brands__logos { flex: none; width: min(320px, 100%); }
}
/* ===== /V2:brands ===== */



/* ===== V2:steps (#218) ===== */
/* How Textly works, and the 2× banner. Root: section.steps#how. */
.steps {
  display: flex; flex-direction: column; align-items: center;
  gap: 56px;
  padding: 96px 0 72px;
}
.steps__h { text-align: center; color: var(--text); }

/* Banner type: the same fluid rule as section 4 (mobile value below 1024,
   desktop value from 1440). */
.steps__big, .steps__simtitle, .steps__simbody {
  font-size: clamp(
    calc(var(--fs-m) * 1px),
    calc(var(--fs-m) * 1px + (var(--fs-d) - var(--fs-m)) * (100vw - 1024px) / 416),
    calc(var(--fs-d) * 1px));
}

/* ---------- Step cards ---------- */
.steps__track { width: 100%; }
.steps__track:focus-visible { outline-offset: -2px; border-radius: var(--r-card); }
/* The cards share two rows (#241): the text row is as tall as the longest
   text, so every visual and phone starts on the same line. */
.steps__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0 20px;
  height: 720px;
}
.steps__card {
  display: grid; grid-row: span 2; grid-template-rows: subgrid;
  row-gap: 14px;
  padding: 32px 24px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.steps__text { display: flex; flex-direction: column; gap: 12px; padding: 0 8px; }
.steps__title { color: var(--text); text-wrap: wrap; }   /* break as Figma does, not balanced */
.steps__visual {
  container-type: inline-size;
  min-height: 0;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 36px;
  border-radius: var(--r-inner);
  overflow: hidden;
}
.steps__visual--violet { background: var(--violet-soft); }
.steps__visual--yellow { background: var(--yellow-soft); }
.steps__visual--money  { background: var(--money-soft); }
/* 250 at 1440; narrower cards (1024-1439) shrink the phone with the visual */
.steps__visual .phone { --w: min(250px, 100cqw - 32px); }

.steps__hint { display: none; }

/* ---------- 2× banner ---------- */
.steps__sim {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 40px;
  width: 100%; min-height: 260px;
  padding: 40px 360px 40px 48px;
  border-radius: var(--r-card);
  background: var(--yellow); color: var(--ink);
}
.steps__big {
  --fs-m: 88; --fs-d: 120;
  flex: none;
  font-weight: 600; line-height: 1; letter-spacing: -.04em;
}
.steps__simtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.steps__simtitle { --fs-m: 24; --fs-d: 30; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.steps__simbody { --fs-m: 15; --fs-d: 17; font-weight: 400; line-height: 1.5; }
/* the phone sits 320 from the right edge (880 of 1200) and 34 from the top;
   the banner cuts it off at the bottom */
.steps__crop { position: absolute; left: calc(100% - 320px); top: 34px; }
.steps__crop .phone { --w: 260px; }

/* ---------- Mobile ---------- */
@media (max-width: 1023.98px) {
  .steps { gap: 12px; padding: 40px 0 0; }
  .steps__h { margin-bottom: 20px; }

  /* The track runs to the viewport edges, the cards start on the column's
     edge, and the next card peeks in from the right. */
  .steps__track {
    /* the column's gutter: 8 px, more once the column stops at 640 */
    --gut: max(var(--block-pad), (100vw - 640px) / 2);
    align-self: flex-start;
    width: 100vw;
    margin-left: calc(-1 * var(--gut));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .steps__track::-webkit-scrollbar { display: none; }
  .steps__track:focus-visible { border-radius: 0; }
  .steps__list {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    grid-auto-flow: column; grid-auto-columns: 300px;
    gap: 0 12px;
    height: auto;
    width: max-content;
    padding-inline: var(--gut);
  }
  .steps__card {
    row-gap: 20px;
    padding: 24px 16px 16px;
    scroll-snap-align: start;
  }
  .steps__text { gap: 10px; padding: 0 6px; }
  .steps__visual { height: 260px; padding-top: 28px; }
  .steps__visual .phone { --w: 230px; }

  .steps__hint {
    display: block;
    font-size: 13px; font-weight: 500; line-height: 1.25;
    color: var(--muted); text-align: center;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .steps__hint.is-gone { opacity: 0; visibility: hidden; }

  .steps__sim {
    flex-direction: column; align-items: stretch; gap: 10px;
    min-height: 0;
    padding: 28px 20px 0;
  }
  .steps__big { letter-spacing: -.03em; }
  .steps__crop {
    position: static;
    display: flex; justify-content: center; align-items: flex-start;
    height: 180px; padding-top: 10px;
    overflow: hidden;
  }
  .steps__crop .phone { --w: 240px; }

  .steps__cta { margin-top: 12px; }
}
/* ===== /V2:steps ===== */



/* ===== V2:inapp (#219) ===== */
/* Everything happens in one app. Root: section.inapp. */
/* Desktop: head, then three items in a row; each item ends in a crop box
   whose phone is cut by the block's bottom edge (the block has no bottom
   padding). Mobile: the items become a swipe track with snap. Each item
   carries a long and a short body; the one not shown is display: none, so a
   screen reader reads one. No JS. */
.inapp {
  /* 96 px side padding at 1440, 40 at 1024; the gap 48 at 1440, 24 at 1024 */
  --inapp-px: clamp(40px, 40px + 56 * (100vw - 1024px) / 416, 96px);
  --inapp-gap: clamp(24px, 24px + 24 * (100vw - 1024px) / 416, 48px);
  display: flex; flex-direction: column; align-items: center;
  gap: 56px;
  /* The Figma section around this block has p 24 (16 on mobile) on top of the
     page gap, so the block sits 48 px (32 px) from its neighbours. The section
     is the block here, so that padding becomes a margin. */
  margin-block: var(--section-gap);
  padding: 96px var(--inapp-px) 0;
  border-radius: 32px;
  background: var(--violet-soft);
  overflow: hidden;
}
.inapp__head {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  width: min(900px, 100%);
  text-align: center;
}
.inapp__h { color: var(--text); }
.inapp__sub { max-width: 560px; }

.inapp__track { width: 100%; }
.inapp__track:focus-visible { outline-offset: -2px; border-radius: inherit; }
.inapp__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
  column-gap: var(--inapp-gap);
}
.inapp__item { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.inapp__title {
  font-size: clamp(19px, 19px + 3 * (100vw - 1024px) / 416, 22px);
  font-weight: 600; line-height: 1.23;
  color: var(--text);
}
.inapp__body { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--muted); }
.inapp__body--m { display: none; }

/* 340 x 520, the phone (300) at (20, 28); scales with the column */
.inapp__crop {
  position: relative;
  width: 100%;
  aspect-ratio: 340 / 520;
  margin-top: auto; /* items of unequal text height still end flush */
  overflow: hidden;
}
.inapp__phone { position: absolute; left: 20px; top: 28px; --w: 300px; }
@supports (width: 1cqw) {
  .inapp__crop { container-type: inline-size; }
  .inapp__phone { left: 5.8824cqw; top: 8.2353cqw; --w: 88.2353cqw; }
}

@media (max-width: 1023.98px) {
  .inapp {
    align-items: stretch;
    gap: 28px;
    padding: 48px 0 0;
    border-radius: 24px;
  }
  .inapp__head {
    align-items: flex-start;
    gap: 10px;
    width: auto;
    padding-inline: var(--block-in);
    text-align: left;
  }
  .inapp__h { --fs-m: 32; line-height: 1.08; }
  .inapp__sub { max-width: none; }

  /* The swipe track: starts at the block's 22 px, runs to its right edge */
  .inapp__track {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--block-in);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .inapp__track::-webkit-scrollbar { display: none; }
  .inapp__items {
    display: flex;
    gap: 16px;
    width: max-content;
    padding-inline: var(--block-in);
  }
  .inapp__item { flex: 0 0 270px; gap: 8px; scroll-snap-align: start; }
  .inapp__title { font-size: 18px; line-height: 1.5; }
  .inapp__body { font-size: 14px; }
  .inapp__body--d { display: none; }
  .inapp__body--m { display: block; }

  /* 270 x 400, the phone (240) at (15, 14) */
  .inapp__crop { width: 270px; aspect-ratio: 270 / 400; container-type: normal; }
  .inapp__phone { left: 15px; top: 14px; --w: 240px; }
}
/* ===== /V2:inapp ===== */



/* ===== V2:catch (#220) ===== */
/* What's the catch? comparison. Root: section.catch. */
/* One semantic table. Desktop: a three-column table; the raised violet
   Textly column is one box (.catch__wrap::before) drawn behind the third
   column, 8 px taller than the table. Its width is the third column's
   share (362 of 1054), so rows align at every width. Mobile: the same table,
   displayed as stacked rows. */
.catch { padding-bottom: 72px; }
.catch__card {
  display: flex; flex-direction: column; gap: 48px;
  padding: 72px;
  border: 1px solid var(--line);
  border-radius: 40px;
  background: var(--card);
}
.catch__head { display: flex; gap: 64px; align-items: flex-start; }
.catch__h { flex: 0 0 calc(100% * 420 / 1054); min-width: 0; color: var(--text); text-wrap: wrap; }
.catch__text { --fs-m: 16; --fs-d: 20; flex: 1 1 0; min-width: 0; }

.catch__wrap { position: relative; padding-bottom: 8px; }
.catch__wrap::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: calc(100% * 362 / 1054);
  border-radius: 24px;
  background: var(--violet);
  box-shadow: var(--shadow-compare);
}
.catch__table {
  position: relative; /* above the violet box */
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  font-size: 17px; line-height: 1.5;
  text-align: left;
}
.catch__c1, .catch__c2 { width: calc(100% * 346 / 1054); }
.catch__c3 { width: calc(100% * 362 / 1054); }
.catch__table th, .catch__table td { vertical-align: middle; text-align: left; }
.catch__table thead tr { height: 76px; }
.catch__table thead th, .catch__table thead td {
  padding: 24px;
  font-size: 15px; font-weight: 600;
}
.catch__table thead .catch__typ { color: var(--muted); }
.catch__table thead .catch__tx { padding-inline: 32px; color: var(--on-color); }
.catch__table tbody tr { height: 72px; }
.catch__table tbody th, .catch__table tbody td {
  padding: 22px 24px;
  border-top: 1px solid var(--line);
}
.catch__label { font-weight: 500; color: var(--text); }
.catch__table tbody .catch__typ { font-weight: 400; color: var(--muted); }
/* Textly cells sit 8 px inside the box; their divider is inset to match. */
.catch__table tbody .catch__tx {
  padding-inline: 32px;
  border-top-color: transparent;
  background: linear-gradient(rgb(255 255 255 / 22%), rgb(255 255 255 / 22%))
              8px 0 / calc(100% - 16px) 1px no-repeat border-box;
  font-weight: 600; color: var(--on-color);
}

@media (max-width: 1023.98px) {
  .catch { padding-bottom: 0; }
  .catch__card { gap: 24px; padding: 36px 22px 24px; border-radius: 28px; }
  .catch__head { flex-direction: column; gap: 24px; }
  .catch__h { --fs-m: 34; flex: none; line-height: 1.08; text-wrap: balance; }
  .catch__text { flex: none; }

  .catch__wrap { padding-bottom: 0; }
  .catch__wrap::before { content: none; }
  .catch__table, .catch__table thead, .catch__table tbody { display: block; }
  .catch__table colgroup { display: none; }
  .catch__table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .catch__table thead tr { height: auto; padding-bottom: 10px; }
  .catch__table thead th, .catch__table thead td {
    padding: 0;
    font-size: 12px; line-height: 1.5;
  }
  .catch__table thead .catch__tx { padding: 0; color: var(--violet); }
  /* Hidden from view but kept in the row, so each value cell keeps the
     column header above it for a screen reader. */
  .catch__table .catch__corner {
    position: absolute; width: 1px; height: 1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  }
  .catch__table tbody tr {
    height: auto;
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }
  .catch__table tbody th, .catch__table tbody td { border-top: 0; }
  .catch__table tbody .catch__label {
    grid-column: 1 / -1;
    padding: 0;
    font-size: 11px; font-weight: 600; line-height: 1.5;
    text-transform: uppercase;
    color: var(--muted);
  }
  /* Grid items stretch, so the two value boxes in a row share one height. */
  .catch__table tbody .catch__typ, .catch__table tbody .catch__tx {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px; line-height: 1.5;
    vertical-align: top;
  }
  .catch__table tbody .catch__typ { background: var(--bg); }
  .catch__table tbody .catch__tx { background: var(--violet); }
}
/* ===== /V2:catch ===== */



/* ===== V2:privacy (#221) ===== */
/* Privacy section. Root: section.privacy#privacy.
   Desktop (1440): block 1392, ink, r 40, p 112/104; head 440 + gap 96 +
   lists 648 = 1184. Between 1024 and 1440 the side padding and the gap
   shrink linearly and the two columns keep their 440:648 ratio.
   Mobile: p 44/22, one column, chips hidden (the hero trust items say it). */
.privacy {
  display: grid;
  grid-template-columns: minmax(0, 440fr) minmax(0, 648fr);
  align-items: start;
  gap: clamp(56px, 56px + (100vw - 1024px) * 40 / 416, 96px);
  padding: 112px clamp(64px, 64px + (100vw - 1024px) * 40 / 416, 104px) 112px;
  background: var(--ink); color: var(--on-color);
  --focus: var(--on-color);
}

.privacy__head { display: flex; flex-direction: column; gap: 28px; }
.privacy__eyebrow { color: var(--yellow); }
/* Figma breaks "stay on your / phone."; the base rule balances h2s. */
.privacy__h { color: var(--on-color); text-wrap: wrap; }
.privacy__text { color: rgb(255 255 255 / 72%); }

.privacy__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.privacy__chip {
  padding: 10px 16px;
  border: 1px solid rgb(255 255 255 / 30%); border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; line-height: 1.5;
  color: var(--on-color);
}

.privacy__lists { display: flex; flex-direction: column; gap: 48px; }

.privacy__label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0;
}
.privacy__label::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-radius: 50%; background: currentColor;
}
.privacy__group--get .privacy__label { color: var(--money); }
.privacy__group--never .privacy__label { color: var(--flame); }

.privacy__row {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 18px 0;
  border-top: 1px solid rgb(255 255 255 / 14%);
  font-size: 18px; line-height: 1.5;
}
.privacy__glyph { flex: none; width: 16px; font-weight: 600; text-align: center; }
.privacy__txt { font-weight: 400; }
.privacy__group--get .privacy__glyph { color: var(--money); }
.privacy__group--get .privacy__txt { color: rgb(255 255 255 / 92%); }
.privacy__group--never .privacy__glyph { color: var(--flame); }
.privacy__group--never .privacy__txt { color: rgb(255 255 255 / 60%); }

@media (max-width: 1023.98px) {
  .privacy {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 44px 22px;
  }
  .privacy__head { gap: 18px; }
  .privacy__chips { display: none; }
  .privacy__lists { gap: 28px; }
  .privacy__label { gap: 8px; margin-bottom: 12px; font-size: 12px; }
  .privacy__row { gap: 14px; padding: 14px 0; font-size: 16px; }
  .privacy__glyph { width: 15px; }
}
/* ===== /V2:privacy ===== */



/* ===== V2:faq (#222) ===== */
/* FAQ. Root: section.faq#faq. Items are native <details>/<summary>. */
.faq {
  display: flex; align-items: flex-start; gap: 80px;
  padding-block: 96px;
}
.faq__head {
  flex: 0 1 400px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
}
.faq__h { --fs-m: 40; --fs-d: 64; }
.faq__list {
  flex: 0 1 720px; min-width: 0; margin-left: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.faq__item {
  padding: 4px 24px 4px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px;
  font-size: 17px; font-weight: 600; line-height: 27px; letter-spacing: -.31px;
  color: var(--text);
  list-style: none;
  cursor: pointer;
  border-radius: 12px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__chev {
  width: 18px; height: 18px; flex: none;
  color: var(--muted);
  transition: transform .15s var(--ease);
}
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a {
  padding: 0 46px 24px 4px;
  font-size: 16px; font-weight: 400; line-height: 26.7px;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .faq__chev { transition: none; }
}
@media (max-width: 1023.98px) {
  .faq {
    flex-direction: column; align-items: stretch; gap: 24px;
    padding: 40px 8px 24px; /* 16 px from the edge with the 8 px .col inset */
  }
  .faq__head { display: contents; }
  .faq__h { order: 1; }
  .faq__list { order: 2; flex: none; margin-left: 0; gap: 10px; }
  .faq__cta { order: 3; align-self: flex-start; }
  .faq__item { padding: 4px 16px 4px 20px; border-radius: 18px; }
}
/* ===== /V2:faq ===== */



/* ===== V2:cta (#223) ===== */
/* Final CTA with payout notifications. Root: section.cta#get.
   Desktop (from 1024): a row, copy left, notifications right (440 at 1440).
   The side padding, the gap and the notification column shrink between 1440
   and 1024, and "€2 today." is sized from the copy column's own width
   (container units), so it scales down there instead of wrapping. */
.cta {
  --focus: var(--on-color);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: center;
  gap: clamp(40px, calc(40px + 24 * (100vw - 1024px) / 416), 64px);
  padding: 104px clamp(48px, calc(48px + 48 * (100vw - 1024px) / 416), 96px);
  background: var(--violet);
  color: var(--on-color);
}

/* Decoration: two onColor ellipses at 25 % (Figma, block coordinates) */
.cta__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta__ring { position: absolute; border-radius: 50%; background: rgb(255 255 255 / 25%); }
.cta__ring--a { width: 620px; height: 461px; top: -89px; right: -108px; }  /* x 880 at 1392 */
.cta__ring--b { width: 420px; height: 312px; top: 268px; left: -200px; }

/* Copy */
.cta__copy {
  container-type: inline-size;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 28px;
}
.cta__h { display: flex; flex-direction: column; gap: 4px; font-weight: 600; text-wrap: nowrap; }
.cta__ha {
  font-size: clamp(40px, calc(40px + 24 * (100vw - 1024px) / 416), 64px);
  line-height: 1; letter-spacing: -.02em;
  color: var(--on-color);
}
/* 150 px at a 696 px column (623 px of text); 23.6cqi keeps it inside the
   column at any width, the vw clamp is the fallback without container units. */
.cta__hb {
  --big: 150px;
  font-size: clamp(76px, calc(76px + 74 * (100vw - 1024px) / 416), var(--big));
  line-height: .92; letter-spacing: -.05em;
  white-space: nowrap;
  color: var(--yellow);
}
@supports (font-size: 1cqi) {
  .cta__hb { font-size: min(var(--big), 23.6cqi); }
}
.cta__text {
  max-width: 470px;
  font-size: 19px; font-weight: 400; line-height: 1.5;
  color: rgb(255 255 255 / 82%);
}
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Notifications: an illustration (aria-hidden in the markup) */
.cta__notes {
  flex: none;
  width: clamp(380px, calc(380px + 60 * (100vw - 1024px) / 416), 440px);
  display: flex; flex-direction: column; gap: 14px;
}
.cta__note {
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: var(--card); color: var(--text);
  box-shadow: var(--shadow-note);
}
.cta__note--bank { margin-left: 40px; }
.cta__icon {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  font-size: 18px; font-weight: 600; line-height: 1;
}
.cta__note--payout .cta__icon { background: var(--violet); color: var(--on-color); }
.cta__note--bank .cta__icon { background: var(--money); color: var(--on-color); }
.cta__note--day3 .cta__icon { background: var(--yellow); color: var(--ink); }
.cta__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cta__meta { display: flex; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cta__app { font-weight: 500; }
.cta__time { margin-left: auto; font-weight: 400; white-space: nowrap; text-align: right; }
.cta__main { display: flex; align-items: center; gap: 12px; }
.cta__title { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text); }
.cta__main .cta__title { flex: 1 1 auto; min-width: 0; }
.cta__amount {
  margin-left: auto; flex: none;
  font-size: 22px; font-weight: 600; line-height: 1.5;
  color: var(--money); text-align: right; white-space: nowrap;
}
.cta__line { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--muted); }

/* Entrance: app.js adds .cta__notes--pre only when motion is allowed and the
   section is still below the fold, and removes it when the section scrolls
   in. Without JS (or with reduced motion) the cards are simply there. */
.cta__note { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.cta__note:nth-child(2) { transition-delay: .12s; }
.cta__note:nth-child(3) { transition-delay: .24s; }
.cta__notes--pre .cta__note { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .cta__note { transition: none; }
  .cta__notes--pre .cta__note { opacity: 1; transform: none; }
}

/* Mobile */
@media (max-width: 1023.98px) {
  .cta {
    flex-direction: column; align-items: stretch;
    gap: 28px;
    padding: 44px 22px 40px;
  }
  .cta__ring--a { width: 239px; height: 339px; top: -169px; right: -120px; left: auto; } /* x 255 at 374 */
  .cta__ring--b { width: 299px; height: 424px; top: 380px; left: -149px; }
  .cta__copy { flex: none; gap: 20px; }
  .cta__h { gap: 2px; }
  .cta__ha { font-size: 40px; }
  .cta__hb { --big: 76px; font-size: var(--big); }
  @supports (font-size: 1cqi) {
    .cta__hb { font-size: min(var(--big), 23.6cqi); }
  }
  .cta__text { max-width: none; font-size: 16px; }
  .cta__notes { width: auto; gap: 10px; }
  .cta__note { gap: 12px; padding: 14px; border-radius: 18px; }
  .cta__note--bank { margin-left: 24px; }
  .cta__note--day3 { display: none; }
  .cta__icon { width: 38px; height: 38px; border-radius: 10px; font-size: 16px; }
  .cta__body { gap: 1px; }
  .cta__meta { font-size: 12px; }
  .cta__title { font-size: 15px; }
  .cta__amount { font-size: 18px; }
  .cta__line { font-size: 13px; }
}
/* ===== /V2:cta ===== */



/* ===== V2:footer (#224) ===== */
/* Footer. Root: footer.ft. It keeps the <!--CONSENT--> marker inside. */
/* Desktop: brand column plus three link columns, then the divider, the
   copyright row and the trademark line. Mobile: Product and Support side by
   side, the Legal links as a headless inline row below the divider. */
.ft {
  --focus: var(--on-color);
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 76px 0 40px;
  color: rgb(255 255 255 / 82%);
}
.ft__in { max-width: 1180px; margin-inline: auto; padding: 0 64px; }
.ft__top { display: flex; align-items: flex-start; gap: 40px; }

.ft__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: 0 1 330px; min-width: 0; }
.ft .brand { min-height: 44px; margin-bottom: 3px; color: var(--on-color); }
.ft__tag { padding-top: 10px; font-size: 15px; line-height: 24px; color: rgb(255 255 255 / 82%); }
.ft .store { margin-top: 26px; }

.ft__col { flex: 1 1 0; min-width: max-content; }
.ft__h {
  font-size: 14px; font-weight: 600; line-height: 15px;
  letter-spacing: 1.36px; text-transform: uppercase;
  color: rgb(255 255 255 / 50%);
}
.ft__list { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; margin-top: 32px; }
.ft__list li { display: flex; }
.ft__list a, .ft__btn {
  display: inline-block;
  font-size: 15px; font-weight: 400; line-height: 25px;
  color: rgb(255 255 255 / 82%);
  transition: color .2s var(--ease);
}
.ft__btn { padding: 0; border: 0; background: none; text-align: left; }
.ft__list a:hover, .ft__btn:hover { color: var(--on-color); }

.ft__bottom {
  margin-top: 60px; padding-top: 25px;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 15px; line-height: 1.55;
  color: rgb(255 255 255 / 50%);
}
.ft__row { display: flex; justify-content: space-between; gap: 24px; }
.ft__tm { margin-top: 12px; }

@media (max-width: 1023.98px) {
  .ft { border-top: 0; padding: 40px 22px 32px; }
  .ft__in { max-width: none; padding: 0; }
  .ft__top { flex-wrap: wrap; gap: 28px 20px; }
  .ft__brand { flex: 1 0 100%; }
  .ft .brand { margin-bottom: 0; }
  .ft__tag { padding-top: 0; line-height: 1.5; }
  .ft .store { margin-top: 0; }

  .ft__col { flex: 0 0 152px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
  .ft__h { font-size: 12px; line-height: 1.5; letter-spacing: .08em; }
  .ft__list { gap: 10px; margin-top: 0; }
  .ft__list a, .ft__btn { line-height: 23px; }

  /* Legal: no heading, an inline row that wraps, below the divider */
  .ft__col--legal {
    flex: 1 0 100%;
    padding-top: 20px;
    border-top: 1px solid rgb(255 255 255 / 12%);
  }
  .ft__col--legal .ft__h {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .ft__col--legal .ft__list { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .ft__col--legal .ft__list a, .ft__col--legal .ft__btn { font-size: 14px; line-height: 21px; }

  .ft__bottom {
    margin-top: 10px; padding-top: 0; border-top: 0;
    font-size: 13px; line-height: 20px;
  }
  .ft__name { display: none; }
  .ft__tm { margin-top: 10px; }
}
/* ===== /V2:footer ===== */


/* ===== V2:motion ===== */
/* Motion for the homepage. The inline script in the head puts .mo on <html>
   only when the visitor allows motion; without it (no JS, reduced motion)
   nothing below applies and the page is the static design. Everything moves
   with opacity and the individual translate/scale properties, never with
   transform, so the rotations and offsets the sections set stay untouched
   and nothing reflows.

   Two kinds: the hero plays once on load (CSS only), the rest reveals on
   scroll. For those, app.js tags each element with [data-rv] and a stagger
   index --i, then adds .in when it scrolls into view. */

/* Hero, on load */
.mo .hero__h { animation: moUp .7s var(--ease) both; }
.mo .hero__em { animation: moWipe .8s cubic-bezier(.65, 0, .35, 1) both; }
.mo .hero__em:nth-of-type(1) { animation-delay: .15s; }
.mo .hero__em:nth-of-type(2) { animation-delay: .3s; }
.mo .hero__lead  { animation: moUp .7s var(--ease) .35s both; }
.mo .hero__cta   { animation: moUp .7s var(--ease) .45s both; }
.mo .hero__trust { animation: moUp .7s var(--ease) .55s both; }
.mo .hero__phone { animation: moRise 1s cubic-bezier(.2, .8, .2, 1) .2s both; }
.mo .hero__circle { animation: moGrow 1.4s var(--ease) both, moBreathe 9s ease-in-out 1.4s infinite; }
.mo .hero__circle--s { animation-delay: .15s, 1.6s; }
.mo .hero__sticker--today { animation: moPop .6s cubic-bezier(.34, 1.56, .64, 1) .9s both, moFloat 5s ease-in-out 1.5s infinite; }
.mo .hero__sticker--paid  { animation: moPop .6s cubic-bezier(.34, 1.56, .64, 1) 1.1s both, moFloat 6s ease-in-out 1.7s infinite reverse; }

/* On scroll */
.mo [data-rv] {
  opacity: 0; translate: 0 28px;
  transition: opacity .7s var(--ease), translate .8s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.mo [data-rv].in { opacity: 1; translate: none; }
.mo [data-rv="pop"] { translate: none; scale: .6; transition-property: opacity, scale; transition-timing-function: var(--ease), cubic-bezier(.34, 1.56, .64, 1); }
.mo [data-rv="pop"].in { scale: none; }
.mo [data-rv="side"] { translate: 40px 0; }
.mo [data-rv="side"].in { translate: none; }

/* Slow ambient movement in the final CTA */
.mo .cta__ring--a { animation: moDrift 14s ease-in-out infinite; }
.mo .cta__ring--b { animation: moDrift 17s ease-in-out infinite reverse; }

/* Hover lift on what can be pressed or tapped */
.mo .store, .mo .qrcard, .mo .btn { transition: background-color .2s var(--ease), translate .2s var(--ease), box-shadow .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .mo .store:hover, .mo .btn:hover { translate: 0 -2px; box-shadow: 0 8px 20px rgb(24 20 46 / 18%); }
  .mo .store:active, .mo .btn:active { translate: none; box-shadow: none; }
}

@keyframes moUp    { from { opacity: 0; translate: 0 24px; } }
@keyframes moWipe  { from { clip-path: inset(0 100% 0 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }
@keyframes moRise  { from { opacity: 0; translate: 0 60px; rotate: 4deg; } }
@keyframes moGrow  { from { opacity: 0; scale: .6; } }
@keyframes moBreathe { 50% { scale: 1.05; } }
@keyframes moPop   { from { opacity: 0; scale: .3; } }
@keyframes moFloat { 50% { translate: 0 -10px; } }
@keyframes moDrift { 50% { translate: -24px 18px; scale: 1.04; } }
/* ===== /V2:motion ===== */

/* ===== V2:lang (#196) ===== */
/* The menu behind the language switch (507:1985). In the header it drops
   down; in the mobile menu (.lsw--up) the switch sits at the bottom of the
   drawer, so it opens upwards. */
.lsw { position: relative; flex: none; }
.lsw__menu {
  position: absolute; z-index: 90; top: calc(100% + 8px); right: 0;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-badge);
}
.lsw__menu[hidden] { display: none; }
.lsw--up .lsw__menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }
.lsw__opt {
  display: block; padding: 10px 12px; border-radius: 10px;
  font-size: 15px; line-height: 1.3; color: var(--text); text-decoration: none;
}
.lsw__opt:hover, .lsw__opt:focus-visible { background: var(--violet-soft); }
.lsw__opt[aria-current="true"] { font-weight: 600; color: var(--violet); }
/* ===== /V2:lang ===== */

/* ===== V2:sticky (#195) ===== */
/* Web / Sticky install bar · Mobile (508:1974): 85 px at 390 including the
   28 px bottom inset. Phones only; app.js adds .is-on. Hidden bars keep
   visibility:hidden so the button is not reachable by Tab. */
.sticky { display: none; }
@media (max-width: 767.98px) {
  .sticky {
    display: block;
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    pointer-events: none;
  }
  .sticky__in {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px max(14px, env(safe-area-inset-bottom));
    background: var(--card);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 28px rgb(23 22 29 / 10%);
    translate: 0 110%; visibility: hidden;
    transition: translate .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s;
  }
  .sticky.is-on .sticky__in {
    translate: 0 0; visibility: visible;
    transition: translate .35s cubic-bezier(.2, .8, .2, 1);
  }
  .sticky__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; }
  .sticky__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .sticky__t { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); }
  .sticky__s { font-size: 13px; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky__cta { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky__in, .sticky.is-on .sticky__in { transition: none; }
}
/* ===== /V2:sticky ===== */