/* =============================================================================
   overrides.css  —  phone + tablet layer, and the real piggy-bank art
   =============================================================================
   Loaded AFTER styles.css, so everything here wins.

   WHY IT IS A SEPARATE FILE: it was written while another job was appending to
   styles.css. Fold it into styles.css when convenient — nothing here depends on
   being in its own file. Order is all that matters.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. THINGS THAT WERE BROKEN ON A PHONE, REGARDLESS OF WIDTH
   ------------------------------------------------------------------------ */

/* Nothing should ever scroll sideways. `clip` instead of `hidden` because
   `hidden` on an ancestor silently kills the sticky nav. */
body { overflow-x: clip; }

/* German and French produce words no phone can fit — "Datenschutzerklärung",
   "Benachrichtige", "confidentialité". Let the big type break rather than
   push the page sideways. */
.display, .headline, .signup__heading, .faq__q, .appbox__head h3, .legal h1 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Hover lifts are a desktop pleasure and a touch-screen bug: tapping a card
   leaves it stuck in its hover state until you tap elsewhere. */
@media (hover: none) {
  .feature:hover,
  .tip:hover,
  .gallery figure:hover,
  .btn:hover { transform: none; box-shadow: none; }
  .btn:hover { box-shadow: 0 8px 30px rgba(30,155,255,0.25); }
  .gallery figure:hover { box-shadow: none; }
  .feature:hover { border-color: var(--line); background: var(--surface); }
  .tip:hover { background: var(--surface); }
}

/* Anything you tap needs to be reachable with a thumb. */
@media (pointer: coarse) {
  .nav__lang-item { min-width: 40px; min-height: 40px; display: inline-flex;
                    align-items: center; justify-content: center; }
  .footer__links a { display: inline-block; padding-block: 8px; }
}

/* Notches and rounded corners: keep content out from under them.
   max() keeps the normal .container side padding: a bare env() here won the
   cascade and set the nav and footer padding to 0 on every phone without a
   notch (and on every desktop) — the logo sat on the screen edge. */
.nav__inner, .footer__inner {
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* ---------------------------------------------------------------------------
   2. THE NAV  —  it had no mobile state at all
   ---------------------------------------------------------------------------
   styles.css simply hid .nav__links below 680px, which left a phone with no way
   to reach Features, Privacy, Our apps or FAQ. Four language chips made the bar
   tighter still. So: links + languages move into one panel behind a button.
   ------------------------------------------------------------------------ */

/* The wrapper is new markup (index.html); on a wide screen it is invisible
   glue that keeps the old row layout exactly as it was. */
.nav__menu { display: flex; align-items: center; gap: 24px; }

.nav__toggle {
  display: none;                      /* desktop: the links speak for themselves */
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; padding: 0;
  transition: border-color 0.2s, background 0.2s;
}
.nav__toggle:hover { border-color: rgba(255,255,255,0.28); }
.nav__toggle:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }

/* Three lines drawn from one element: the middle is the box, the outer two are
   its pseudo-elements, so the X is one transform away. */
.nav__burger, .nav__burger::before, .nav__burger::after {
  display: block; width: 19px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform 0.28s var(--ease), opacity 0.18s;
}
.nav__burger { position: relative; }
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; }
.nav__burger::before { top: -6px; }
.nav__burger::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__burger { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__burger::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav__toggle { display: inline-flex; }

  /* The panel. Fixed to the viewport rather than the header so an open menu
     cannot be scrolled away from underneath your thumb. */
  .nav__menu {
    position: fixed; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px max(var(--pad), env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom));
    background: rgba(10,10,10,0.97);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--line);
    /* Collapsed, but still in the layout so the transition has something to
       animate and so screen readers can be told about it honestly. */
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height 0.32s var(--ease), opacity 0.22s, visibility 0s 0.32s;
  }
  .nav__menu.is-open {
    max-height: calc(100svh - 72px); opacity: 1; visibility: visible;
    overflow-y: auto;
    transition: max-height 0.34s var(--ease), opacity 0.22s, visibility 0s;
  }

  /* .nav__links was display:none below 680px — undo that, it lives here now. */
  .nav__links { display: flex !important; flex-direction: column; gap: 0; }
  .nav__links a {
    display: block; padding: 15px 2px; font-size: 1.05rem; font-weight: 600;
    color: var(--text); border-bottom: 1px solid var(--line);
  }
  /* In the drop-down panel the section marker would sit on the divider line,
     so the current section is shown by a dot instead. */
  .nav__links a.is-current::after {
    left: auto; right: 2px; bottom: 50%; width: 6px; height: 6px;
    transform: translateY(50%); border-radius: 50%; animation: none;
  }

  .nav__lang { justify-content: flex-start; gap: 6px; padding: 16px 0 2px; }
  .nav__lang-item { padding: 9px 14px; font-size: 0.82rem; }

  .nav__inner { gap: 10px; }
  .nav__brand { font-size: 1rem; }
  #nav-cta { padding: 9px 14px; font-size: 0.84rem; }
}

/* At the very bottom of the range the brand word is what has to give. */
@media (max-width: 380px) {
  .nav__brand span { display: none; }
  .nav__brand { gap: 0; }
}

/* ---------------------------------------------------------------------------
   3. THE GALLERY  —  four full-width phone screenshots is 2,700px of scrolling
   ---------------------------------------------------------------------------
   Below 700px it becomes a swipeable row instead: you see one and a hint of the
   next, which is what tells you to swipe.
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  .gallery {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the screen edges so the row reads as continuous. */
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad); padding-bottom: 6px;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery figure { flex: 0 0 68%; scroll-snap-align: center; }
  .gallery img { aspect-ratio: 9 / 17; }
  .gallery figcaption { padding: 12px 14px; font-size: 0.88rem; }
}

/* Same trick for the app picker's tab strip, which already scrolled but gave
   no hint that it did. */
@media (max-width: 760px) {
  .appbox__tabs { scroll-snap-type: x proximity; gap: 6px; }
  .appbox__tab { scroll-snap-align: start; padding: 13px 15px; }
}

/* ---------------------------------------------------------------------------
   4. PHONE SPACING
   ------------------------------------------------------------------------ */
@media (max-width: 560px) {
  /* A full-width button is easier to hit than two half ones side by side. */
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__ctas .btn { width: 100%; }
  .hero__logo { width: 76px; height: 76px; margin-bottom: 1.4rem; }

  .trust__inner { justify-content: center; text-align: center; }
  .trust__badges { justify-content: center; gap: 12px 20px; }
  .trust__badges li { font-size: 0.9rem; }

  .feature { padding: 24px 20px; }
  .feature h3 { font-size: 1.18rem; }

  .faq__q { font-size: 1.05rem; padding: 18px 18px; }
  .faq__a-inner { padding: 0 18px 18px; font-size: 0.98rem; }

  .privacy__points li { padding: 15px 16px; }
  .signup { border-radius: 20px; }
  .share { flex-direction: column; }
  .share .btn { width: 100%; }

  .footer__inner { gap: 18px 24px; }
  .footer__links { gap: 18px; }
}

/* Landscape on a phone: 100svh sections leave no room for their own content,
   and the scroll hint lands on top of the buttons. */
@media (max-height: 520px) and (orientation: landscape) {
  .section--full { min-height: auto; padding-block: 64px; }
  .scroll-hint { display: none; }
  .nav__menu { top: 60px; }
}

/* ---------------------------------------------------------------------------
   5. TABLET
   ---------------------------------------------------------------------------
   The fluid grids mostly do the right thing here; these are the two that
   didn't. The QR stays hidden until 900px (styles.css) — correct, since a
   tablet user can just tap the button.
   ------------------------------------------------------------------------ */
@media (min-width: 700px) and (max-width: 1024px) {
  /* minmax(340px,1fr) gave one lonely column for most of this range. */
  .tips { grid-template-columns: 1fr 1fr; }
  .tip { padding: 24px 22px; }
  /* Keep the reading measure sane on a wide portrait tablet. */
  .section-intro, .lede { max-width: 62ch; }
}

/* ---------------------------------------------------------------------------
   6. THE PIGGY BANK  —  real artwork replacing the drawn SVG
   ---------------------------------------------------------------------------
   assets/piggy.webp and assets/coin.webp are transparent PNGs whose glow is baked
   into the alpha, so they sit on the dark page with nothing behind them.
   The drop zone is positioned over the pig's actual coin slot: the slot centre
   sits at 52% across and 17% down the pig image.
   ------------------------------------------------------------------------ */
.piggy__pig {
  right: 8px; bottom: 2px;
  width: 168px; height: 149px;        /* piggy.webp is 336x298 — same ratio */
}
.piggy__pig img { width: 100%; height: 100%; display: block; }

.piggy__coin { width: 44px; height: 44px; left: 14px; top: 66px; }
.piggy__coin img { width: 100%; height: 100%; display: block; pointer-events: none; }

/* Over the slot, and quiet until you actually pick the coin up. */
.piggy__zone {
  right: 56px; top: 16px; width: 54px; height: 54px;
  border-color: rgba(255,255,255,0.14); color: transparent;
}
.piggy.is-dragging .piggy__zone { color: var(--green); }

/* The old squash animation targeted an SVG group that no longer exists. */
.piggy.is-done .piggy__pig img {
  animation: piggyGulp 0.45s var(--ease);
  transform-origin: center bottom;
}

@media (max-width: 400px) {
  .piggy__stage { height: 158px; }
  .piggy__pig { width: 148px; height: 131px; }
  .piggy__zone { right: 48px; top: 12px; width: 48px; height: 48px; }
  .piggy__coin { top: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .piggy.is-done .piggy__pig img { animation: none; }
  .nav__menu, .nav__burger, .nav__burger::before, .nav__burger::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   7. REAL APP ICONS IN THE PICKER
   ---------------------------------------------------------------------------
   An app's icon can be artwork instead of an emoji. Both are laid out to the
   same box so a mixed list still lines up.
   ------------------------------------------------------------------------ */
.appbox__icon--img {
  width: 56px; height: 56px; border-radius: 14px; flex: none;
  display: block; object-fit: cover;
  background: var(--bg-2); border: 1px solid var(--line);
}
.appbox__tab-icon--img {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: block; object-fit: cover;
}

/* The install route for an app that has no web page to link to. */
.appbox__how {
  color: var(--muted-2); font-size: 0.92rem; line-height: 1.6;
  border-left: 2px solid rgba(30,155,255,0.45); padding-left: 14px;
}
.appbox__how strong { color: var(--text); font-weight: 700; }

@media (max-width: 560px) {
  .appbox__icon--img { width: 46px; height: 46px; border-radius: 12px; }
}