/* the homepage's first screen */
/* --lk lives on the hero so the prints can keep their distance from the slogan it sizes */
.hero { --lk: clamp(2.6rem, 1.2rem + 3.9vw, 4.75rem); position: relative; min-height: calc(100svh - 84px); max-height: 980px; overflow: hidden; padding: 4vh var(--gutter) 0; text-align: center; }
.hero .copy { position: relative; z-index: 3; max-width: 980px; margin: 0 auto; }
.hero .sub { margin: 20px auto 0; max-width: 44ch; }
.hero .get { position: relative; margin: 30px auto 0; width: fit-content; }
.hero .free { margin: 12px auto 0; width: fit-content; }
.hero .sub { width: fit-content; }

/* The founders' trip photos, laid out the way desti's Google Play graphic lays them: a
   stacked pair on each side, running off the screen's edge by a clear 16% below 1580px (a
   print a few pixels from the edge is neither a bleed nor a margin). From 1580px
   each print is held about 60px (upper) and 30px (lower) from the slogan's widest line,
   which is 11.2 x --lk wide (measured on the render), so a wide screen never strands
   them in the corners; at 1580px that position is already 32px or more in.
   1.07 x --w is a print's rotated half-width plus half its width: the distance from
   its left edge to its inner extreme. */
.hero .k { --w: clamp(190px, 16.5vw, 252px); --rot: -7deg; z-index: 5; top: 22px;
  left: calc(50% - 5.6 * var(--lk) - 60px - 1.07 * var(--w)); }
.hero .i { --w: clamp(166px, 14vw, 214px); --rot: 5deg; z-index: 4; top: calc(22px + 1.2 * clamp(190px, 16.5vw, 252px) - 46px);
  left: calc(50% - 5.6 * var(--lk) - 30px - 1.07 * var(--w)); }
.hero .c { --w: clamp(180px, 15.6vw, 240px); --rot: 8deg; z-index: 5; top: 40px;
  right: calc(50% - 5.6 * var(--lk) - 60px - 1.07 * var(--w)); }
.hero .o { --w: clamp(176px, 13.4vw, 204px); --rot: -6deg; z-index: 4; top: calc(40px + 1.2 * clamp(180px, 15.6vw, 240px) - 40px);
  right: calc(50% - 5.6 * var(--lk) - 30px - 1.07 * var(--w)); }
@media (max-width: 1579px) { .hero .k, .hero .i { left: calc(var(--w) * -.16); } .hero .c, .hero .o { right: calc(var(--w) * -.16); } }
/* The upper print lies over the lower one, so the labels (at each print's foot) are never
   covered; a label sits on the side facing the slogan, so the edge a print runs off is photo. */
.hero .k .print__label, .hero .i .print__label { justify-content: flex-end; }
.hero .c .print__label, .hero .o .print__label { justify-content: flex-start; }
.hero .phone { position: relative; z-index: 2; margin: 46px auto 0; width: max-content; }
.hero .phone .iphone { --pw: 300px; }

/* The QR card, beside the button on a laptop: a laptop visitor can scan it with the
   phone the app is for. The earlier homepage's own file; it opens the same App Store page
   as the button (decoded 2026-11-04). It hangs off the button so the button stays centered. */
.qr { display: none; }
@media (min-width: 1024px) {
  /* a plain code, level with the button; its caption sits on the "Free on iPhone" line */
  .hero .qr { display: grid; justify-items: center; gap: 12px; position: absolute; left: calc(100% + 24px); top: 0; margin: 0; }
  .hero .qr img { width: 58px; height: 58px; }
  .hero .qr figcaption { font: 500 .875rem/1.2 var(--text); color: var(--sub); white-space: nowrap; }
}

/* A tablet keeps only the lower pair, beside the phone. The breakpoint is in em (1100px at the
   default text size) so a visitor who sets a larger default font, which grows the slogan, drops to
   this pair before the upper prints can reach the words. Osaka is a little wider than Ibiza so its
   score, at the label's right end, stays on screen inside the 16% bleed. */
@media (max-width: 68.75em) { .hero .k, .hero .c { display: none; } .hero .i, .hero .o { top: 47%; --w: 160px; } .hero .o { --w: 176px; } }
/* The upper pair is hidden from here down, so its photos are not fetched at all: each one's
   <picture> swaps in a one-pixel image at this same width. */
.print__photo picture { display: contents; }
/* Two prints beside a phone are small: their name and score shrink with them, so the score reads
   as a label on the photo rather than a badge over it. */
@media (max-width: 68.75em) { .hero .print__label b, .hero .print .chip { font-size: 15px; } }
@media (max-width: 760px) {
  .nav { height: 64px; } .nav__mark img { height: 24px; }
  /* The hero's own button sits right under the slogan on a phone, and the dock takes
     over once it scrolls away, so the nav keeps only the wordmark. */
  .nav__links { display: none; }
  .hero { --lk: 2.5rem; min-height: 0; max-height: none; padding: 18px 20px 0; }
  .hero .sub { font-size: 1.0625rem; margin-top: 14px; }
  .hero .get { margin-top: 22px; width: auto; } .hero .get .btn { width: 100%; }
  .hero .k, .hero .c { display: none; }
  /* The phone centered, a print on each side of it like the Play graphic's pairs. Each
     tilts so its top corner runs off the screen while its name and score stay on it,
     and its inner edge reaches no further than the phone's dark bezel. */
  .hero .phone { margin: 26px auto 0; height: 360px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .hero .phone .iphone { --pw: 206px; }
  .hero .i { display: block; --w: 100px; --rot: -8deg; z-index: 4; left: -4px; right: auto; top: auto; bottom: 176px; }
  .hero .o { display: block; --w: 100px; --rot: 7deg; z-index: 4; right: -4px; left: auto; top: auto; bottom: 118px; }
  /* a small print stacks its name over its score, so neither is cut */
  .hero .print__label { flex-direction: column; gap: 4px; }
  .hero .print__label b, .hero .print .chip { font-size: 12.5px; }
  .hero .i .print__label { align-items: flex-end; } .hero .o .print__label { align-items: flex-start; }
}
/* Below 380px the phone narrows so the two prints keep the same room. */
@media (max-width: 379px) { .hero .phone .iphone { --pw: 182px; } }  /* 360 to 379px */
/* Below 360px there is no room beside the phone: a print there reaches the app's own rank
   badges and thumbnails (measured at 340 and 344px, the Z Fold cover screen). */
@media (max-width: 359px) { .hero .i, .hero .o { display: none; } }
/* Windows High Contrast turns the page black; the code's light modules are transparent, so it
   gets its own white ground and quiet zone there (and only there). */
@media (forced-colors: active) { .hero .qr img { forced-color-adjust: none; background: #fff; box-shadow: 0 0 0 6px #fff; } }