/* launch-home.css - the home page and, since ADS-V2.1, the /ads/ page (body class "home"; /ads/ adds launch-ads.css).
   Layered on launch-one.css. Same tokens: no new colours, no shadows, no gradients.
   v4 blocks (Apple-pattern story page, strip rebuilt 2026-10-13): hero, six journey cards (phone: swipe row; desktop:
   two-column grid) each with a small noun eyebrow, a framed lock-screen card, a three-item "Why Locol" strip, colophon,
   questions. H2 tint (<em>) is limited to "Eight" and "one". The hero H1 is tinted via html.hero-tint (shipped on). */

.home em { font-style: normal; color: var(--blue); }
.home main > section:not(.hero) h2 { text-wrap: balance; }

/* ------------------------------------------------------------------ hero */
.home .hero-eyebrow { margin-bottom: 18px; }
.home .hero { padding-bottom: clamp(72px, 12vw, 160px); }
.home .hero .request-fields { grid-template-columns: 1fr; }
.home .hero .signup { max-width: 560px; }
@media (min-width: 640px) {
  .home .hero .request-fields { grid-template-columns: 1.4fr auto; align-items: end; }
  .home .hero .request-fields .button { width: auto; }
}

/* Optional whole-H1 accent tint: add class "hero-tint" to <html>. Existing accent tokens only, a subtle two-stop gradient. */
html.hero-tint .home .hero h1 {
  background: linear-gradient(160deg, var(--blue-hover) 0%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ------------------------------------------------------------ highlights */
.home .highlights { padding-bottom: clamp(72px, 12vw, 180px); }
.home .hl-row {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  align-items: flex-start; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 4px var(--gutter) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.home .hl-row::-webkit-scrollbar { display: none; }
.home .hl-row:focus-visible { outline-offset: -3px; }
.home .hl-card {
  flex: 0 0 min(84vw, 340px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px 22px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); overflow: hidden;
}
.home .hl-title { font-size: clamp(1.625rem, 6.4vw, 2.125rem); line-height: 1.06; letter-spacing: -0.028em; }
.home .hl-sub { color: var(--soft); font-size: 1.0625rem; line-height: 1.4; }
/* Phone: every card is as tall as its own content (no stretched empty space under the sub). Desktop: see the grid below. */
.home .hl-object { margin: 0; padding-top: 10px; }
.home .hl-object img { width: 100%; height: auto; border: 1px solid var(--bezel); border-radius: 18px; background: var(--bg); }
.home .hl-object img.hl-shot { aspect-ratio: 800 / 876; object-fit: cover; object-position: 50% 0; }
.home .hl-object img.hl-map-shot { aspect-ratio: 800 / 1248; }
.home .hl-object img.hl-weather-shot { aspect-ratio: 800 / 1005; }
.home .hl-object img.hl-route-shot { aspect-ratio: 800 / 855; }
/* Composed mock of the group chat (card 3): a plan link preview and short replies. Generic bubbles, no phone chrome. */
.home .chat { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; aspect-ratio: 800 / 876; padding: 16px 14px; border: 1px solid var(--bezel); border-radius: 18px; background: var(--bg); }
.home .chat-day { color: var(--muted); font-size: 0.8125rem; font-weight: 600; text-align: center; }
.home .chat-out { display: flex; justify-content: flex-end; }
.home .chat-link { display: flex; flex-direction: column; gap: 6px; width: 92%; padding: 12px 14px 14px; border: 1px solid var(--field); border-radius: 20px; background: var(--surface); }
.home .chat-site { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.8125rem; }
.home .chat-site img { width: 18px; height: 18px; border-radius: 5px; }
.home .chat-title { color: var(--text); font: 700 1rem/1.25 var(--heading); letter-spacing: -0.02em; }
.home .chat-venue { color: var(--blue); font-size: 0.9375rem; }
.home .chat-in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.home .chat-in span { padding: 8px 15px; border-radius: 18px; background: var(--field); color: var(--text); font-size: 1rem; line-height: 1.3; }
/* Card 2 object: the eight categories as large pill chips (dark surface, 1px border, text colour). No image, no icons. */
.home .hl-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding-left: 0; }
.home .hl-chips li { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--field); border-radius: 999px; background: var(--bg); color: var(--text); font: 600 1.0625rem/1.2 var(--body); white-space: nowrap; }
/* Small noun eyebrow above each card's H2: the hero eyebrow's look, one step smaller. */
.home .hl-eyebrow { margin-bottom: -6px; color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ------------------------------------------------------------ lock screen */
/* Framed, not full-bleed: the Utrecht Live Activity capture sits in a contained card with the highlight cards' radius,
   border and side margin, centred, page background visible around it. The block keeps the page's big vertical room. */
.home .lock { padding-block: clamp(96px, 16vw, 200px); text-align: center; }
.home .lock-card { max-width: 420px; margin: 0 auto; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); overflow: hidden; }
.home .lock-image { width: 100%; }
.home .lock-image img { display: block; width: 100%; height: auto; }
.home .lock-copy { margin-top: clamp(56px, 9vw, 112px); }
.home .lock-copy .eyebrow { margin-bottom: 18px; }
.home .lock h2 { font-size: var(--display-l); line-height: 1; letter-spacing: -0.03em; max-width: 16ch; margin-inline: auto; }
.home .lock-sub { max-width: 30ch; margin: 22px auto 0; color: var(--soft); font-size: clamp(1.125rem, 2.2vw, 1.3125rem); line-height: 1.4; }
.home .lock-cta { margin-top: 36px; min-width: 260px; }

/* ------------------------------------------------------------------- why */
/* Three text-only cards in the highlight cards' family: bold line, one gray sentence. Stacked on phone, three columns on desktop. */
.home .why { padding-bottom: clamp(72px, 12vw, 160px); }
.home .why .eyebrow { margin-bottom: 18px; }
.home .why-grid { display: grid; grid-template-columns: 1fr; gap: 14px; list-style: none; padding-left: 0; }
.home .why-item { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.home .why-line { color: var(--text); font: 700 clamp(1.375rem, 4.6vw, 1.625rem)/1.12 var(--heading); letter-spacing: -0.025em; }
.home .why-text { color: var(--soft); font-size: 1.0625rem; line-height: 1.4; }
@media (min-width: 900px) {
  .home .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .home .why-item { padding: 30px 28px 32px; }
}

/* -------------------------------------------------------------- colophon */
.home .colophon { padding-block: clamp(72px, 12vw, 160px); border-top: 1px solid var(--border); }
.home .colophon .eyebrow { margin-bottom: 18px; }
.home .colophon h2 { font-size: var(--display-l); line-height: 1; letter-spacing: -0.03em; max-width: 16ch; }
.home .colophon .story-text { max-width: 30ch; margin-top: 0; }
.home .colophon-body { margin-top: 32px; }

/* ------------------------------------------------------------------- faq */
.home .faq h2 { font-size: clamp(1.75rem, 5vw, 2.75rem); }

@media (prefers-reduced-motion: reduce) { .home .hl-row { scroll-behavior: auto; } }

/* =========================================================== VARIANT A
   Large left-aligned type for the hero (the body class is still v-a). Desktop (>= 900px): the six cards
   sit in a two-column grid, because the category chips must stay large and wrap in two or three rows; phone keeps the swipe row. */
.v-a .hero h1 { max-width: 14ch; }
.v-a .hl-row { gap: 16px; }
@media (min-width: 900px) {
  .v-a .hl-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; overflow: visible; scroll-snap-type: none;
    padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  }
  .v-a .hl-card { flex: none; padding: 30px 28px 26px; }
  .v-a .hl-title { font-size: 2.375rem; }
  /* Each object fills the space under the sub and sits in the middle of it, so the two cards in a row read balanced
     whichever is taller. The tall Map crop is capped to a phone-like column so card 3 is no taller than its neighbour. */
  .v-a .hl-object { flex: 1; display: flex; align-items: center; justify-content: center; padding-top: 14px; }
  .v-a .hl-object img.hl-map-shot { max-width: 360px; }
  .v-a .hl-chips { align-content: center; justify-content: center; gap: 16px; }
  .v-a .hl-chips li { min-height: 72px; padding: 0 30px; font-size: 1.625rem; }
  .v-a .hl-chat { align-items: stretch; }
  .v-a .hl-chat .chat { flex: 1; aspect-ratio: auto; justify-content: center; gap: 24px; padding: 28px 26px; }
  .v-a .hl-chat .chat-day { font-size: 1rem; }
  .v-a .hl-chat .chat-link { gap: 10px; padding: 20px 22px 22px; border-radius: 24px; }
  .v-a .hl-chat .chat-site { font-size: 1rem; }
  .v-a .hl-chat .chat-title { font-size: 1.25rem; }
  .v-a .hl-chat .chat-venue { font-size: 1.25rem; }
  .v-a .hl-chat .chat-in { gap: 12px; }
  .v-a .hl-chat .chat-in span { padding: 12px 22px; border-radius: 24px; font-size: 1.375rem; }
}