/* Which SECTIONS a phone gets. Standalone and additive, like the other files
   in this folder: nothing here restyles anything, it only decides what is on
   the page below 768px, so deleting the <link> restores the full page exactly.

   768px, not 560px, and deliberately the same breakpoint interface-mobile.v1
   uses for the tablet shot: those two are the same judgement about the same
   layout, and two numbers would drift the first time one was tuned.

   ---------------------------------------------------------------- #features
   The six feature cards are a DESKTOP composition. Each one is an animated
   illustration sitting above its copy in a three-column grid; stacked into one
   phone-width column they become six tall cards of motion that the reader
   scrolls past on the way to the pricing, and the animations are the most
   expensive thing on the page (see the notes on features-anim.v2.js and
   features-polish.v5.css, and the landing-fps work behind them).

   So this is not only a layout call: on a phone the section costs the most and
   earns the least. The product is still described above it by the hero and the
   #interface shot, and still sold below it by the pricing table, which is
   where a phone reader is going.

   `display:none` rather than removing it from the bundle, on purpose:
     - the anchor in the nav still resolves, so a "#features" link from
       anywhere does not 404 into a blank page;
     - a display:none subtree is not rendered, so the IntersectionObserver in
       features-anim.v2.js never fires for it and none of those loops ever
       start — which is the actual cost being saved, not just the pixels;
     - and it is one line to revert.

   The nav link is hidden with it. A menu entry that jumps to nothing is worse
   than no entry: it reads as a broken page rather than as a shorter one. */
@media (max-width: 768px) {
  #features {
    display: none !important;
  }

  /* The in-page nav entry that points at it. Matched by href so it keeps
     working if the label is translated -- the nav is en/de/fr and the German
     and French strings are not "Features". */
  a[href="#features"],
  a[href="/#features"] {
    display: none !important;
  }
}

/* ------------------------------------------------------------- sign in --
   v2. The nav's "Sign in" link is built as `hidden sm:block`, so Tailwind
   display:none's it below 640px -- and nothing else in the header restores
   it. There is no hamburger on this page, so the effect was that a phone
   visitor had no way to reach /login AT ALL: the only controls in the header
   are Discord, the language globe and the signup CTA.

   Matched by href rather than by class. The class is a Tailwind utility
   string composed at runtime, and `hidden` is shared by every other element
   the build chose to hide -- targeting it would have un-hidden all of them.
   The href is the one stable thing about this link.

   !important because it is overriding a utility class that is itself a plain
   `display:none`, at equal specificity and later in the cascade only by
   accident of load order. This is the case the flag exists for. */
@media (max-width: 639px) {
  header a[href="/login"] {
    display: inline-block !important;
  }
}

/* ------------------------------------------------------------- nav fit --
   v3. Restoring "Sign in" (v2) pushed the header over the edge on a phone:
   the row is wordmark + Sign in + Discord + the signup CTA + the language
   globe, and the CTA's label is a full sentence in every language
   ("Become a beta-tester." / "Beta-Tester werden." / "Devenez beta-testeur.").
   It overflowed and the bar started scrolling sideways.

   DISCORD IS THE ONE THAT GOES, and it is the only one that can:

     - the wordmark is the way home;
     - Sign in is what a paying member came for, and v2 exists because it was
       missing entirely;
     - the CTA is what the page is FOR;
     - the globe changes the language, which on a de/fr audience is not
       optional furniture.

   Discord loses nothing: the same invite is a button in the footer and a link
   inside the FAQ answer that mentions it, both of which a phone reader reaches
   by scrolling the page they are already on.

   Shortening the CTA instead was the obvious alternative and is not safe from
   here: the label comes from the i18n dictionary in the bundle, so a CSS
   `content` swap would hard-code one language into all three. That change
   belongs in the bundle, not in a stylesheet.

   Matched by href, like the Sign in rule above: the classes are Tailwind
   utilities shared with everything else in the row.

   THE TWO BUTTONS SHARE AN HREF. The signup CTA does not point at a signup
   page -- it points at the Discord invite, exactly like the icon button does
   (`href: tm` on both, in the bundle). So `a[href*="discord.gg"]` matches BOTH,
   and hiding on that alone removes the page's primary call to action on every
   phone. The two are told apart by `aria-label`, which only the icon button
   carries (the CTA's label is its own text); `target="_blank"` would work as
   well but is set on both in other places on the page. */
@media (max-width: 639px) {
  /* The icon button only -- the one whose accessible name has to be supplied
     because its content is an icon. */
  header a[href*="discord.gg"][aria-label] {
    display: none !important;
  }
  /* The CTA is the one WITHOUT an aria-label. It keeps its place; it just
     stops carrying desktop gutters on a 390px screen. */
  header a[href*="discord.gg"]:not([aria-label]) {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
}

/* --------------------------------------------------- nav fit, second pass --
   v5. Removing Discord (v4) was not enough: the language globe still hung a
   few pixels past the right edge, which let the page scroll sideways and
   painted the empty white strip beside it.

   Measured at 390px the row wanted roughly 447px:
     logo ~106  +  Anmelden ~85  +  CTA ~200  +  globe ~36  +  gaps ~20
   so about 60px had to come out. Rather than remove a fifth thing, all four
   give up a little:

     - the logo drops from 32px to 28px tall (~24px narrower);
     - "Sign in" and the CTA drop to 13px, which is still above the 12px floor
       where a label stops being comfortably tappable;
     - the CTA's gutters tighten;
     - the gaps close from .5rem to .3rem.

   The CTA's TEXT is untouched, deliberately. It is a full sentence in all
   three languages and it comes from the bundle's i18n dictionary, so a CSS
   `content` swap would hard-code one language for everyone -- and the root
   <html lang> is a fixed "en" here, so there is not even a hook to branch on.
   Shortening that label is a bundle change, not a stylesheet one.

   THE BACKSTOP. Fitting the row is the fix; `overflow-x: clip` is the
   guarantee. It stops the document scrolling sideways at all, so if a future
   translation or a wider CTA overruns again the symptom is a clipped edge
   rather than the whole page sliding and exposing that white strip. `clip`
   and NOT `hidden`: hidden makes the element a scroll container, which breaks
   the sticky header the page relies on. */
@media (max-width: 639px) {
  html, body { overflow-x: clip; }

  header a[aria-label="JPAccess home"] .jp-logo {
    height: 28px !important;
    max-width: 118px !important;
  }
  /* Sign in, and the CTA. Both are anchors in the right-hand group. */
  header a[href="/login"],
  header a[href*="discord.gg"]:not([aria-label]) {
    font-size: 13px !important;
  }
  header a[href*="discord.gg"]:not([aria-label]) {
    padding-left: .6rem !important;
    padding-right: .6rem !important;
  }
  /* The group that holds Sign in / CTA / globe. Tighter, and never allowed to
     wrap -- a wrapped nav is what pushed the hero down the page. */
  header .ml-auto {
    gap: .3rem !important;
    flex-wrap: nowrap !important;
    min-width: 0;
  }
  /* The globe must never be the thing that gets squeezed: it is the smallest
     control in the row and the only one that cannot shrink its label. */
  header .ml-auto > *:last-child { flex: none !important; }
}