/* ============================================================
   Lido Hoppers · lh-app.css
   The /app marketing landing page ("The Companion").
   Self-contained, scoped under .lh-app, built on the design
   tokens in colors_and_type.css. The site's brand header/footer
   (inc/chrome.php) wrap the page, so the handoff's own nav + footer
   are intentionally omitted here.
   Load order: colors_and_type.css -> brand.css -> ... -> lh-app.css
   ============================================================ */

.lh-app {
  background: var(--deck-white);
  font-family: var(--font-body);
  color: var(--deep-hull-navy);
  -webkit-font-smoothing: antialiased;
}
.lh-app * { box-sizing: border-box; }
.lh-app h1, .lh-app h2, .lh-app h3, .lh-app h4 {
  font-family: var(--font-headline);
  color: var(--deep-hull-navy);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.lh-app p { margin: 0; }
.lh-app a { text-decoration: none; }

.lh-app__inner { max-width: 1180px; margin: 0 auto; }

/* -- App-store buttons --------------------------------------
   The app is not in the stores yet, so these are presentational
   "coming soon" markers: non-interactive spans, not links. */
.lh-app__store-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lh-app__store-row--center { justify-content: center; }
.lh-store-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 18px 11px 16px;
  border-radius: var(--radius-md);
  background: var(--deep-hull-navy);
  color: #fff;
  border: 1.5px solid var(--deep-hull-navy);
}
.lh-store-btn .gl { font-size: 22px; line-height: 1; }
.lh-store-btn .tx { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.lh-store-btn .tx small { font-size: 10px; opacity: 0.78; font-family: var(--font-body); letter-spacing: 0.04em; }
.lh-store-btn .tx b { font-family: var(--font-headline); font-weight: 600; font-size: 15px; }
.lh-store-btn--light { background: #fff; color: var(--deep-hull-navy); border-color: var(--sand-300); }
/* "Coming soon" state: clearly inert. */
.lh-store-btn--soon { opacity: 0.62; cursor: default; }

/* -- Hero --------------------------------------------------- */
.lh-app__hero {
  background: var(--bliss-soft);
  padding: 56px 24px 0;
  overflow: hidden;
}
.lh-app__hero-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 24px; align-items: center;
}
.lh-app__hero-copy { padding-bottom: 64px; }
.lh-app__h1 {
  font-size: 50px; line-height: 1.05; margin: 18px 0 0;
  letter-spacing: -0.015em;
}
.lh-app__lead {
  font-size: 18px; color: var(--deep-hull-navy);
  margin-top: 18px; max-width: 30ch; line-height: 1.55;
}
.lh-app__hero-copy .lh-app__store-row { margin-top: 26px; }

.lh-app__phone-col { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.lh-app__phone {
  width: 300px; flex: none;
  border-radius: 40px; padding: 11px;
  background: linear-gradient(160deg, #2a3242, #11161f);
  box-shadow: var(--shadow-mascot);
  margin-bottom: -40px;          /* bleeds slightly into the next band */
}
.lh-app__screen {
  border-radius: 30px; overflow: hidden;
  background: #0E2238; height: 620px; position: relative;
}
.lh-app__screen img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

/* -- Features ----------------------------------------------- */
.lh-app__features { background: var(--deck-white); padding: 64px 24px; }
.lh-app__sec-head { text-align: center; max-width: 46ch; margin: 0 auto 36px; }
.lh-app__eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ocean-blue);
}
.lh-app__h2 { font-size: 32px; margin-top: 10px; }
.lh-app__feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lh-app__feat {
  background: #fff; border: 1px solid var(--sand-300);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms var(--ease-out);
}
.lh-app__feat:hover { box-shadow: var(--shadow-md); }
.lh-app__feat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
}
.lh-app__feat h4 { font-size: 17px; margin: 14px 0 6px; }
.lh-app__feat p { font-size: 14px; color: var(--charcoal-700); line-height: 1.5; }

/* -- Mascot / "built by cruisers" strip --------------------- */
.lh-app__mascot {
  background: var(--sand-100); padding: 48px 24px;
}
.lh-app__mascot-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
}
.lh-app__mascot-grid img { height: 120px; width: auto; display: block; }
.lh-app__caveat {
  font-family: var(--font-accent); font-size: 26px;
  color: var(--tropic-purple); line-height: 1;
}
.lh-app__mascot-copy p:last-child {
  font-size: 17px; color: var(--deep-hull-navy);
  margin-top: 8px; max-width: 52ch; line-height: 1.55;
}

/* -- Download CTA ------------------------------------------- */
.lh-app__cta { background: var(--frog-green); padding: 64px 24px; text-align: center; }
.lh-app__cta h2 { color: #fff; font-size: 30px; }
.lh-app__cta p { color: rgba(255,255,255,0.9); font-size: 17px; margin: 12px 0 24px; }

/* -- Responsive --------------------------------------------- */
@media (max-width: 900px) {
  .lh-app__hero { padding: 40px 20px 0; }
  .lh-app__hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .lh-app__hero-copy { padding-bottom: 24px; order: 1; }
  .lh-app__phone-col { order: 2; }
  .lh-app__h1 { font-size: 36px; }
  .lh-app__lead { max-width: none; }
  .lh-app__features { padding: 48px 20px; }
  .lh-app__feat-grid { grid-template-columns: 1fr; }
  .lh-app__mascot { padding: 36px 20px; }
  .lh-app__mascot-grid { grid-template-columns: 1fr; gap: 16px; text-align: center; justify-items: center; }
  .lh-app__mascot-copy p:last-child { max-width: none; }
  .lh-app__cta { padding: 48px 20px; }
}