/* ============================================================================
   NOVA FORM — landing.css

   Loaded only by layout/landing.liquid, so the storefront never pays for it.
   Consumes the same tokens as theme.css and adds nothing to :root — the
   landing page is a different arrangement of one design system, not a second
   design. That is the point being demonstrated.
   ========================================================================= */

/* ----- Header ------------------------------------------------------------- */
.landing-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.landing-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
}
.landing-header__logo { justify-self: start; }
.landing-header__cta { min-height: 40px; padding-inline: var(--space-sm); font-size: var(--text-xs); }

@media (min-width: 48em) {
  .landing-header__cta { min-height: var(--tap); padding-inline: var(--space-md); font-size: var(--text-sm); }
}

/* ----- Hero --------------------------------------------------------------
   Text before image in the DOM here, unlike the storefront hero: on a landing
   page the promise has to be the first thing read, and the image is support.
   The image is still eager and high priority — it is the LCP element. */
.landing-hero { padding-block: var(--space-lg) var(--space-section); }
.landing-hero__inner { display: grid; gap: var(--space-lg); align-items: center; }
.landing-hero__heading { font-size: var(--text-display); margin-bottom: var(--space-sm); }
.landing-hero__body { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 32ch; }

.landing-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-md);
}
.landing-hero__note { font-size: var(--text-xs); color: var(--color-text-muted); }

.landing-hero__media { border-radius: var(--radius-md); overflow: hidden; }
.landing-hero__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (min-width: 60em) {
  .landing-hero { padding-block: var(--space-section); }
  .landing-hero__inner { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .landing-hero__img { aspect-ratio: 1 / 1; }
}

/* ----- Problem / solution ------------------------------------------------- */
.split { display: grid; gap: var(--space-md); align-items: center; }
.split + .split { margin-top: var(--space-section); }
.split__media { border-radius: var(--radius-md); overflow: hidden; }
.split__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__heading { font-size: var(--text-2xl); }
.split__body { color: var(--color-text-muted); }

@media (min-width: 60em) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .split--left  .split__media   { order: 1; }
  .split--left  .split__content { order: 2; }
  .split--right .split__media   { order: 2; }
  .split--right .split__content { order: 1; }
}

/* ----- How it works ------------------------------------------------------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-lg);
  counter-reset: step;
}
.steps__item { display: grid; gap: var(--space-2xs); }
.steps__marker {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
}
.steps__title { font-size: var(--text-lg); margin: 0; }
.steps__body { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

@media (min-width: 48em) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
}

/* ----- Offer -------------------------------------------------------------
   Scroll target for every CTA on the page, so it gets scroll-margin to clear
   the sticky header. */
.landing-offer { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
.offer {
  display: grid; gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.offer__media { border-radius: var(--radius-sm); overflow: hidden; background: var(--color-band); }
.offer__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.offer__body { display: grid; gap: var(--space-xs); align-content: start; }
.offer__heading { font-size: var(--text-xl); margin: 0; }
.offer__product { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.offer__price { margin-block: var(--space-2xs); }
.offer__saving { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); }
.offer__copy { font-size: var(--text-sm); color: var(--color-text-muted); }
.offer__copy p { margin-bottom: var(--space-xs); }
.offer__reassurance { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }

@media (min-width: 48em) {
  .offer { grid-template-columns: 1fr 1.2fr; gap: var(--space-lg); padding: var(--space-lg); align-items: center; }
}

/* ----- Guarantee ---------------------------------------------------------- */
.guarantee__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-xs); }
.guarantee__icon { width: 32px; height: 32px; color: var(--color-accent); }
.guarantee__heading { font-size: var(--text-xl); margin: 0; }
.guarantee__body { color: var(--color-text-muted); max-width: 48ch; }

/* ----- Final CTA ---------------------------------------------------------- */
.landing-cta__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-sm); }
.landing-cta__heading { font-size: var(--text-2xl); margin: 0; }
.landing-cta__body { color: var(--color-text-muted); margin: 0; }
.landing-cta__btn { margin-top: var(--space-xs); }

/* Inverted panel. The CTA cannot stay green on a charcoal ground — it would
   be the only thing on the page that has to fight its background — so it
   flips to ivory, and the focus ring flips with it. */
.landing-cta--invert {
  background: var(--color-text);
  color: var(--color-bg);
}
.landing-cta--invert .landing-cta__body { color: color-mix(in srgb, var(--color-bg) 72%, transparent); }
.landing-cta--invert .btn {
  --btn-bg: var(--color-bg);
  --btn-fg: var(--color-text);
}
.landing-cta--invert .btn:hover { --btn-bg: var(--color-band); }
.landing-cta--invert .btn:focus-visible { outline-color: var(--color-bg); }

/* ----- Footer ------------------------------------------------------------- */
.landing-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-lg); }
.landing-footer__inner { display: grid; gap: var(--space-xs); justify-items: center; text-align: center; }
.landing-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-md); }
.landing-footer__links a { font-size: var(--text-sm); color: var(--color-text-muted); }
.landing-footer__copy,
.landing-footer__disclaimer { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }