/* ============================================================================
   CareLink — home page
   ----------------------------------------------------------------------------
   One rhythm down the page: warm light surfaces (cream ↔ white) with the same
   soft brand washes bookending it at the hero and the download call to action.
   The only dark surface on the page is the footer, which anchors the bottom.
   Page-specific composition only — anything reused elsewhere lives in
   components.css.
   ========================================================================== */

/* ── Shared decorative wash ───────────────────────────────────────────────
   Used by the two bookend bands so they read as a matched pair.
   ------------------------------------------------------------------------ */

.wash {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cl-cream) 0%, var(--cl-white) 100%);
}

/* Radial gradients rather than filled circles, so they fade out instead of
   drawing a hard edge across the band. */
.wash::before,
.wash::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.wash::before {
  bottom: -200px;
  left: -160px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(247, 154, 147, 0.3) 0%, rgba(247, 154, 147, 0) 68%);
}

.wash::after {
  top: -180px;
  right: -140px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(255, 168, 0, 0.22) 0%, rgba(255, 168, 0, 0) 68%);
}

.wash > * {
  position: relative;
  z-index: 1;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 104px);
  border-bottom: 1px solid var(--cl-border);
  text-align: center;
}

/* Scales with the viewport on phones instead of sitting at the 150px floor
   from 320px all the way to 750px, where the middle term finally overtook it. */
.hero__logo {
  width: clamp(140px, 40vw, 200px);
  margin: 0 auto var(--cl-space-6);
}

.hero__title {
  max-width: 16ch;
  margin-inline: auto;
}

/* Brand amber is unreadable as type on this band (1.7:1 on the cream end), so
   the highlight uses the text-safe step of the same hue — 3.6:1, clear of the
   large-text bar anywhere in the gradient. */
.hero__highlight {
  color: var(--cl-amber-deep);
}

.hero__lede {
  max-width: 62ch;
  margin: var(--cl-space-4) auto 0;
  font-size: clamp(1rem, 2vw, 1.125rem);
}

.hero__actions {
  display: flex;
  gap: var(--cl-space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--cl-space-6);
}

/* ── Screenshots ──────────────────────────────────────────────────────────── */

/* ── Device mockups ───────────────────────────────────────────────────────
   These are transparent PNGs of a device with its own moulded shadow, so the
   card treatment used elsewhere (border, radius, shadow) must not apply — it
   would draw a rectangle around the transparent bounds and a second shadow
   under the first. The images carry their own framing; CSS only places them.
   ------------------------------------------------------------------------ */

.screenshot-strip {
  display: flex;
  gap: var(--cl-space-4);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.screenshot-strip img {
  width: clamp(180px, 24vw, 260px);
}

/* Staggered so the three read as a group rather than a lineup: the outer two
   drop, the middle lifts and leads. Vertical offset only — the strip is
   centred, so nudging horizontally would fight the flex centring.

   Deliberately untransitioned. A transition here fires on first style
   resolution, so the devices slide into place on every page load, and a hover
   lift would advertise a click target these images do not have. The stagger is
   a resting arrangement, not an interaction. */
@media (min-width: 768px) {
  .screenshot-strip {
    /* Give the band back the room the offsets push into. */
    padding-block: var(--cl-space-4);
  }

  .screenshot-strip img:nth-child(odd) {
    transform: translateY(28px);
  }

  .screenshot-strip img:nth-child(even) {
    transform: translateY(-20px);
    width: clamp(196px, 26vw, 284px);
  }
}

/* ── Services ─────────────────────────────────────────────────────────────
   The same card component as the features grid, one density step tighter and
   marked with an amber dot instead of an icon tile — a denser list reading as
   part of the same family.
   ------------------------------------------------------------------------ */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--cl-space-4);
}

.service-card {
  padding: var(--cl-space-4) var(--cl-space-5);
}

.service-card h4 {
  display: flex;
  align-items: center;
  gap: var(--cl-space-2);
}

.service-card h4::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-amber);
}

.service-card p {
  font-size: 0.9375rem;
  margin: 0;
}

/* ── Download call to action ──────────────────────────────────────────────── */

/* Mirrors the hero: same washes, gradient flipped so the page warms up into
   the navy footer instead of cooling down. */
.cta {
  background: linear-gradient(180deg, var(--cl-white) 0%, var(--cl-cream) 100%);
  border-top: 1px solid var(--cl-border);
  text-align: center;
}

.store-badges {
  display: flex;
  gap: var(--cl-space-4);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--cl-space-6);
}

.store-badges img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  .hero__actions .btn {
    width: 100%;
    max-width: 280px;
  }
}