/* ==========================================================================
   home.css — rules specific to the landing page (index.html)
   Depends on base.css tokens. Nothing here is needed by city pages.
   ========================================================================== */

/* Hero: text + product screenshot side by side, stacked on mobile */
.hero { padding: 56px 0 40px; }
.hero__inner { display: grid; gap: 40px; grid-template-columns: 1.1fr 1fr; align-items: center; }
.hero p.lead { font-size: 1.2rem; color: var(--muted); max-width: 540px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.hero__note { color: var(--muted); font-size: .9rem; }
.hero__visual { margin: 0; justify-self: center; text-align: center; }
.hero__caption { color: var(--muted); font-size: .85rem; margin-top: 14px; }

/* Simulated smartphone playing a screen recording of the guide (390x780 video).
   Pure CSS frame: dark bezel, rounded screen, notch drawn with ::before. */
.phone {
  position: relative; width: min(300px, 100%); aspect-ratio: 390 / 780; margin: 0 auto;
  padding: 12px; border-radius: 44px; background: #0a1f1a;
  box-shadow: var(--shadow), 0 0 0 2px rgba(255,255,255,.06) inset;
}
.phone::before {
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 96px; height: 24px; border-radius: 0 0 14px 14px; background: #0a1f1a;
}
.phone__screen, .phone__poster {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 32px; background: #08384d;
}
.phone__poster { display: none; }
@media (prefers-reduced-motion: reduce) {   /* show a still frame instead of the looping video */
  .phone__screen { display: none; }
  .phone__poster { display: block; }
}
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero { padding-top: 32px; }
  .phone { width: min(260px, 100%); }
}

/* Deployed guides */
.guide-card { display: grid; grid-template-columns: 200px 1fr; overflow: hidden; padding: 0; }
.guide-card img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__body { padding: 22px; }
.guide-card__body .btn { margin-top: 8px; }
@media (max-width: 600px) { .guide-card { grid-template-columns: 1fr; } .guide-card img { max-height: 180px; } }

/* Pricing */
.pricing { align-items: stretch; }
.price { display: flex; flex-direction: column; }
.price__amount { font-size: 2rem; font-weight: 800; color: var(--ink); margin: .2em 0; }
.price__amount small { font-size: .95rem; font-weight: 500; color: var(--muted); }
.price ul { padding-left: 1.1em; margin: 0 0 1em; color: var(--muted); font-size: .95rem; flex: 1; }
.price--featured { border-color: var(--brand); box-shadow: var(--shadow); position: relative; }
.price--featured::before {
  content: attr(data-badge);   /* text set per page: data-badge="…" */ position: absolute; top: -12px; left: 20px;
  background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em;
}

/* Partners: one sentence naming them (contractual mention) and a row of logo links.
   Logos keep their own colours (a grey filter would stay grey on touch screens).
   Wordmark-shaped logos get a smaller height. */
.partners { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.partners__text { max-width: 680px; color: var(--muted); margin-bottom: 20px; }
.logos { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; list-style: none; padding: 0; margin: 0; }
.logos a { display: inline-flex; align-items: center; }
.logos img { height: 52px; width: auto; }
.logos img.logo--wordmark { height: 26px; }
@media (max-width: 600px) {
  .logos { gap: 16px 28px; }
  .logos img { height: 44px; }
  .logos img.logo--wordmark { height: 24px; }
}

/* Contact block */
.contact { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; align-items: center; }
.contact__details { font-size: 1.05rem; }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } }