/* hero typography (v4)
 *
 * v4 (2026-09-24): the headline is "The first monitor combining multiple
 * European and Japanese second-hand marketplaces." with nothing in bold (only
 * "first" keeps its italic), the lede is one sentence, and the CTA row is
 * "Join today." (to the pricing) then "See features". The one rule added is
 * at the end: it keeps "See features" on phones. The <b> and lede-span rules
 * below are unused now and kept so an older bundle still renders correctly.
 *
 * v3 notes, still true for the size and the column:
 *
 * The headline is now marked up (`<i>` on "first", `<b>` on "Japanese" and
 * "European"), which the bundle renders through dangerouslySetInnerHTML from
 * the same three i18n dicts as before -- so de and fr carry their own emphasis
 * and the language switcher still works.
 *
 * Why the weights live here and not in the bundle's Tailwind classes: the
 * page's Tailwind output is a FROZEN build, so a utility it never emitted does
 * nothing at all. `font-semibold` was removed from the h1 and the whole weight
 * scale is set explicitly below instead. Everything on this page is
 * Helvetica Neue / Helvetica / Arial -- system faces -- so 400, 700 and a real
 * italic are all available with no webfont to load.
 *
 * The rest of the line is 400 on purpose (the owner asked to see it): against
 * a 400 line, the two bold words are the only thing the eye lands on, which is
 * the whole point of bolding them. At 600 everywhere they barely separated.
 * Size came down from clamp(2.2rem, 5.4vw, 3.8rem) because the sentence is now
 * 86 characters rather than 42 -- at the old size it ran to four lines inside
 * the hero's max-w-2xl column and pushed the buttons under the fold on a
 * laptop.
 *
 * The vw term is 4.4, not the 3.9 it started at: below about 1100px the clamp
 * stops being capped and the vw term is what sets the size, and 3.9vw put a
 * 768px tablet within a whisker of the 1.85rem floor -- a phone-sized headline
 * in a 672px column.
 *
 * The cap is 2.9rem (46.4px), down from 3.05rem (48.8px), because "all" became
 * "every". Swept size against column width at 1920/1440/1280/1024: in the
 * hero's 672px column the sentence sets in THREE lines at every size up to
 * 47px and FOUR at 48.8, where the extra line also splits "second-hand" across
 * the break. The alternative -- widening the column to 720px, which also
 * gives three -- was rejected: the hero's background scrim runs
 * `from-bg via-bg/88 to-bg/45` and is only dependable to about the halfway
 * mark, so text pushed past 50% of the viewport starts sitting on unmuted
 * photographs. Take the 2.4px off the type instead.
 */

.jpa-hero-h1 {
  font-weight: 400;
  font-size: clamp(1.85rem, 4.4vw, 2.9rem);
}
.jpa-hero-h1 i {
  font-style: italic;
}
.jpa-hero-h1 b {
  font-weight: 700;
}

/* The lede is two sentences and a feature list now. Slightly tighter than the
   16px body default so the block does not out-measure the headline above it,
   and a touch more line height because it is a long read. */
.jpa-hero-lede {
  font-size: 15.5px;
  line-height: 1.7;
}

/* The feature list is its own paragraph. The bundle renders the lede through
   dangerouslySetInnerHTML like the headline, and the dict string wraps the
   second sentence in a bare <span> -- a block span rather than a <br> so the
   break survives however the first sentence happens to wrap, and so it can
   carry the paragraph gap. All three languages have the span. */
.jpa-hero-lede span {
  display: block;
  margin-top: .62em;
}

/* v4. mobile-sections.v5.css hides every a[href="#features"] under 768px:
   it was written for the header's nav entry, which has no room on a phone.
   The hero's "See features" button is not that link and must stay; this
   restores exactly the display the button has everywhere else. */
@media (max-width: 768px) {
  .jpa-hero-cta a[href="#features"] { display: inline-flex !important; }
}