/* Marketing kit — responsive layout.
   Layout-level rules live here (not inline) so media queries can override them.
   Cosmetic one-offs stay inline in the JSX. */

html, body { overflow-x: hidden; }

/* Keep anchored sections clear of the sticky header */
#inside, #pricing, #guide { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }

/* ---- Landing ---- */
.mkt-hero {
  max-width: 1240px; margin: 0 auto; padding: 64px 32px 80px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center;
}
.mkt-hero-visual { position: relative; height: 460px; }
.mkt-float { display: flex; flex-direction: column; }
.mkt-card-icon { display: flex; align-items: center; justify-content: center; }
.mkt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mkt-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 880px; margin: 0 auto; }

/* ---- Nav / footer ---- */
.mkt-nav-links { display: flex; align-items: center; gap: 28px; }
.mkt-footer-grid {
  max-width: 1240px; margin: 0 auto; padding: 40px 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}

/* ---- Auth ---- */
.mkt-auth-grid { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.mkt-auth-form { padding: 40px 80px; display: flex; flex-direction: column; justify-content: center; background: var(--cream); }
.mkt-auth-brand { display: flex; flex-direction: column; justify-content: space-between; }

/* ---- Checkout ---- */
.mkt-checkout-layout {
  max-width: 1080px; margin: 0 auto; padding: 40px 32px 80px;
  display: flex; gap: 40px; align-items: flex-start;
}
.mkt-order-summary { width: 340px; flex: none; align-self: flex-start; position: sticky; top: 24px; }

/* ================= breakpoints ================= */

@media (max-width: 980px) {
  .mkt-hero { grid-template-columns: 1fr; gap: 48px; padding: 48px 24px 56px; }
  .mkt-hero-visual { height: 420px; max-width: 560px; }
  /* In single-column mode the visual spans the viewport, so the floating
     cards' negative offsets would clip at the screen edge and cover the
     card's caption — show the main card alone. */
  .mkt-float { display: none; }
  .mkt-auth-grid { grid-template-columns: 1fr; }
  .mkt-auth-brand { display: none; }
  .mkt-auth-form { padding: 110px 24px 48px; }
  .mkt-checkout-layout { flex-direction: column-reverse; padding: 28px 20px 60px; }
  .mkt-order-summary { width: 100%; position: static; }
}

@media (max-width: 800px) {
  .mkt-nav-links { display: none; }
  .mkt-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 32px 24px; }
}

@media (max-width: 640px) {
  .mkt-grid-2, .mkt-pricing-grid { grid-template-columns: 1fr; }
  .mkt-hero-visual { height: 350px; }
  /* The caption needs the lower half of the card on narrow screens */
  .mkt-hero-visual .mkt-card-icon { display: none; }
}

@media (max-width: 480px) {
  .mkt-footer-grid { grid-template-columns: 1fr; }
}