/* ============================================================
   Simplify Health — landing page
   Rebuilt to match Figma frame "Darker hero" (node 2:240)
   ============================================================ */

:root {
  /* Navy hero */
  --navy-1: #1a2150;
  --navy-2: #232d6e;
  --navy-3: #2e3a8c;

  /* Text */
  --ink: #1f262e;
  --body: #4a5560;
  --muted: #78909c;

  /* Brand */
  --primary: #5c6bc0;
  --primary-light: #7986cb;
  --primary-dark: #3949ab;
  --peach: #ffcdb2;
  --peach-dark: #ffb4a2;

  /* Surfaces */
  --bg: #fefdfb;
  --bg-product: #fff8f5;
  --bg-why: #f7f3ee;
  --shot-bg: #f5f7fa;
  --soft: #fff8f5;
  --border: #e8e4e1;
  --border-soft: #f0edea;

  /* Type */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: 32px;
}

/* Accent colored words inside headings */
.accent-peach {
  color: var(--peach);
}
.accent-indigo {
  color: var(--primary);
}
.accent-peach-italic {
  color: var(--peach);
  font-style: italic;
}

/* ============================================================
   Pill buttons
   ============================================================ */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--primary-dark);
  font-family: var(--sans);
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-pill--sm {
  padding: 12px 22px;
  font-size: 14.5px;
  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease;
}
/* blue gradient layer that fades in for the light state (over the white bg, under the text) */
.btn-pill--sm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(130.25deg, var(--primary) 0%, var(--primary-light) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.site-header.is-light .btn-pill--sm {
  color: #fff;
  box-shadow: 0 8px 10px rgba(92, 107, 192, 0.28);
}
.site-header.is-light .btn-pill--sm::before {
  opacity: 1;
}
.btn-pill--lg {
  padding: 16px 28px;
  font-size: 15.5px;
  box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2);
}
.btn-pill:hover {
  transform: translateY(-1px);
}
.btn-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(20, 26, 64, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* Light state once the hero has scrolled past (toggled in JS) */
.site-header.is-light {
  background: rgba(254, 253, 251, 0.95);
  border-bottom-color: #e8e4e1;
  box-shadow: 0 1px 0 0 rgba(40, 50, 70, 0.03);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.brand-mark {
  width: 173.6px; /* 80% of 217px */
  height: auto;
  transition: opacity 0.35s ease;
}
/* colored wordmark sits on top of the white one and crossfades in */
.brand-mark--color {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.site-header.is-light .brand-mark--white {
  opacity: 0;
}
.site-header.is-light .brand-mark--color {
  opacity: 1;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-weight: 500;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.35s ease;
}
.nav-links a:hover {
  color: #fff;
}
.site-header.is-light .nav-links a {
  color: var(--body);
}
.site-header.is-light .nav-links a:hover {
  color: var(--primary-dark);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 87px 0 72px;
  background:
    radial-gradient(58% 56% at 50% 0%, rgba(121, 134, 203, 0.35) 0%, rgba(121, 134, 203, 0) 70%),
    linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
}
.hero-blob {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.hero-blob--peach {
  width: 540px;
  height: 540px;
  top: -240px;
  right: -180px;
  background: radial-gradient(circle, rgba(255, 205, 178, 0.28) 0%, rgba(255, 205, 178, 0) 70%);
}
.hero-blob--peri {
  width: 480px;
  height: 480px;
  top: 220px;
  left: -260px;
  background: radial-gradient(circle, rgba(121, 134, 203, 0.4) 0%, rgba(121, 134, 203, 0) 70%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26.9px;
}
.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.95rem, 7.6vw, 78px);
  line-height: 1.05;
  letter-spacing: -1.716px;
  color: #fff;
  max-width: 18ch;
}
.hero-sub {
  margin: 0;
  max-width: 720px;
  font-weight: 500;
  font-size: 19px;
  line-height: 29.45px;
  color: rgba(255, 255, 255, 0.82);
}
.hero-cta {
  padding-top: 9px;
}

/* Hero stacked screenshots */
.hero-visual {
  position: relative;
  width: min(1120px, 100%);
  margin-top: 28px;
  aspect-ratio: 1120 / 520;
}
.shot-card {
  margin: 0;
  background: var(--shot-bg);
  border-radius: 16px;
  padding: 1px;
  overflow: hidden;
}
.hero-shot {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3);
}
.hero-shot img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}
.hero-shot--main {
  left: 0;
  top: 7.13%;
  width: 71.99%;
}
.hero-shot--float {
  left: 62%;
  top: 33.08%;
  width: 38%;
}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section {
  padding: 95px 0;
}
.section-product {
  background: var(--bg-product);
  padding-bottom: 120px;
}
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 17.4px;
}
.section-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.9px;
  color: var(--ink);
}
.section-lead {
  margin: 0;
  max-width: 700px;
  font-weight: 500;
  font-size: 18px;
  line-height: 27.9px;
  color: var(--body);
}

/* ============================================================
   Two surfaces
   ============================================================ */
.surfaces {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 48px;
  align-items: stretch;
  margin-top: 56px;
}
.surface-divider {
  background: var(--border);
  width: 1px;
}
.surface {
  display: flex;
  flex-direction: column;
}
.surface-title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 28px;
  line-height: 30.8px;
  letter-spacing: -0.504px;
  color: var(--ink);
}
.surface-sub {
  margin: 6px 0 0;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.surface-shot {
  margin-top: 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(40, 50, 70, 0.1), 0 2px 6px rgba(40, 50, 70, 0.05);
  aspect-ratio: 519.5 / 322.69;
  position: relative;
}
.surface-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}
.crop-mc {
  object-position: left center;
}
.crop-bc {
  object-position: top; /* keep the top of the image; crop only from the bottom */
}
.surface-strong {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 23.25px;
  font-weight: 500;
  color: var(--body);
}
.surface-strong strong {
  font-weight: 700;
  color: var(--ink);
}
.feature-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  font-size: 13.5px;
  line-height: 20.25px;
  color: var(--body);
}
.feature-list strong {
  font-weight: 700;
  color: var(--ink);
}
.check {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(92, 107, 192, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.check svg {
  width: 10px;
  height: 10px;
}

/* ============================================================
   Flywheel
   ============================================================ */
.flywheel-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 17.3px;
  margin-top: 56px;
  padding-top: 40px;
}
.flywheel-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.72px;
  color: var(--ink);
}
.flywheel {
  position: relative;
  width: min(1080px, 100%);
  margin: 30px auto 0;
  aspect-ratio: 1080 / 492;
}
.flywheel-arrows {
  position: absolute;
  top: 1.52%; /* 7.5px of 492 */
  left: 0;
  width: 100%;
  height: 103.66%; /* 510px of 492 — matches the SVG's native box, no squish */
  pointer-events: none;
}
/* On desktop the hub is invisible to layout; the disc positions itself.
   The vertical loop arrows are mobile-only. */
.fly-hub {
  display: contents;
}
.fly-arrows-v {
  display: none;
}
.fly-card {
  position: absolute;
  width: 32%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 25px;
  box-shadow: 0 2px 4px rgba(40, 50, 70, 0.04);
  z-index: 2;
}
.fly-card--employer {
  left: 0;
  top: 7.48%;
}
.fly-card--employee {
  left: 67.96%;
  top: 40.96%;
}
.fly-kicker {
  margin: 0 0 9.4px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 17.25px;
  letter-spacing: 1.84px;
  text-transform: uppercase;
  color: var(--primary);
}
.fly-card--employee .fly-kicker {
  color: var(--peach-dark);
}
.fly-card-title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: -0.432px;
  color: var(--ink);
}
.fly-card--employee .fly-card-title {
  letter-spacing: -0.108px;
}
.fly-card-body {
  margin: 9.4px 0 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 21.7px;
  color: var(--body);
}
.fly-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9.4px;
}
.fly-pills span {
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
  line-height: 17.25px;
  white-space: nowrap;
}
.fly-card--employer .fly-pills span {
  background: rgba(92, 107, 192, 0.1);
  border: 1px solid rgba(92, 107, 192, 0.22);
  color: var(--primary-dark);
}
.fly-card--employee .fly-pills span {
  background: var(--soft);
  border: 1px solid var(--border-soft);
  color: var(--body);
}

/* Center disc */
.fly-center {
  position: absolute;
  left: 50%;
  top: calc(50% + 4px);
  transform: translate(-50%, -50%);
  width: 23.15%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 18px 20px rgba(92, 107, 192, 0.3);
  display: grid;
  place-items: center;
  z-index: 3;
}
.fly-center::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 999px;
  border: 1px dashed rgba(92, 107, 192, 0.45);
}
.fly-center-inner {
  text-align: center;
  color: #fff;
  padding: 0 16px;
}
.fly-center-inner h4 {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.108px;
}
.fly-center-inner p {
  margin: 10px 0 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 20.3px;
  opacity: 0.88;
}

/* ============================================================
   Reach — meet employees where they already work
   ============================================================ */
.section-reach {
  background: var(--bg);
}
.section-reach .section-head {
  margin-bottom: 56px;
}
.reach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.reach-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 29px;
  display: flex;
  flex-direction: column;
}
.reach-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.reach-icon svg {
  width: 24px;
  height: 24px;
}
.reach-kicker {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 17.25px;
  letter-spacing: 1.84px;
  text-transform: uppercase;
  color: var(--primary);
}
.reach-title {
  margin: 0 0 9.4px;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.reach-body {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--body);
}
.reach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}
.reach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: rgba(92, 107, 192, 0.08);
  border: 1px solid rgba(92, 107, 192, 0.22);
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.reach-chip svg,
.reach-chip img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.reach-chip svg {
  color: var(--primary);
}
.reach-chip--plain {
  padding: 7px 12px;
  background: var(--soft);
  border-color: var(--border-soft);
  color: var(--body);
}
/* Brand-mark chips render their logo in its own colors */
.reach-chip--brand svg {
  color: inherit;
}
/* Brand PNGs ship with transparent padding around the mark — give them
   a touch more box so the visible logo reads at parity with the inline SVGs */
.reach-chip--brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-block: -8px;
}
.reach-a2a {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
  flex-wrap: wrap;
}
.reach-a2a-node {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.reach-a2a-node--indigo {
  background: rgba(92, 107, 192, 0.1);
  border: 1px solid rgba(92, 107, 192, 0.22);
  color: var(--primary-dark);
}
.reach-a2a-node--peach {
  background: var(--soft);
  border: 1px solid var(--border-soft);
  color: var(--body);
}
.reach-a2a-link {
  width: 56px;
  height: 26px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .reach-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* ============================================================
   Why Simplify
   ============================================================ */
.section-why {
  background: var(--bg-why);
  padding: 95px 0 96px;
}
.section-why .section-head {
  margin-bottom: 56px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.why-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 29px;
  display: flex;
  flex-direction: column;
  gap: 9.4px;
}
.why-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.why-icon img {
  width: 32px;
  height: 32px;
}
.why-icon svg {
  width: 22px;
  height: 22px;
}
.why-title {
  margin: 8.6px 0 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.why-body {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--body);
}

/* ============================================================
   Final CTA
   ============================================================ */
.cta-section {
  background: var(--bg);
  padding: 64px 0 100px;
}
.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 72px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19.3px;
  background: linear-gradient(134.92deg, var(--navy-3) 0%, var(--primary) 60%, var(--primary-light) 100%);
}
.cta-blob {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.cta-blob--peach {
  width: 480px;
  height: 480px;
  top: -200px;
  right: -200px;
  background: radial-gradient(circle, rgba(255, 205, 178, 0.35) 0%, rgba(255, 205, 178, 0) 70%);
}
.cta-blob--white {
  width: 460px;
  height: 460px;
  bottom: -240px;
  left: -120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
}
.cta-title {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 800px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 6.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.972px;
  color: #fff;
}
.cta-sub {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 620px;
  font-weight: 500;
  font-size: 17px;
  line-height: 26.35px;
  color: rgba(255, 255, 255, 0.85);
}
.cta-actions {
  position: relative;
  z-index: 1;
  padding-top: 16.7px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 57px 0 40px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.footer-brand img {
  width: 165.52px;
  height: auto;
}
.footer-brand p {
  margin: 13.5px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.footer-nav a {
  font-weight: 500;
  font-size: 15px;
  line-height: 22.5px;
  color: var(--body);
}
.footer-nav a:hover {
  color: var(--primary-dark);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 23px;
  border-top: 1px solid var(--border);
}
.footer-bottom span {
  font-size: 13px;
  line-height: 19.5px;
  color: var(--muted);
}
.footer-domain {
  font-weight: 600;
  color: var(--ink) !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .surfaces {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Vertical divider becomes a horizontal rule between the stacked surfaces */
  .surface-divider {
    width: 100%;
    height: 1px;
  }
  .surface-shot {
    max-width: 560px;
    width: 100%;
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  /* Flywheel stacks vertically */
  .flywheel {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 375px; /* Figma mobile frame width — arrows span this full width */
  }
  .flywheel-arrows {
    display: none;
  }
  /* opaque cards sit above the arrows so they cover the arrow tails; inset from the arrows */
  .fly-card {
    position: relative;
    z-index: 2;
    left: auto; /* clear desktop offsets */
    top: auto;
    transform: none;
    width: 100%;
    max-width: 345px; /* cards are narrower than the arrows, like Figma */
    margin-inline: auto;
  }
  /* hub holds the vertical loop arrows + disc (gap region between the cards) */
  .fly-hub {
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 375 / 405; /* keeps the gap proportional to width */
    margin: 0 auto;
  }
  /* arrows span the full flywheel width and overflow up/down so tails run behind the cards */
  .fly-arrows-v {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: -7.5%;
    height: 115.6%;
  }
  /* position:relative keeps the dashed ring around the disc; z-index lifts it over the arrows */
  .fly-center {
    position: relative;
    z-index: 2;
    left: auto; /* clear desktop offsets so the disc doesn't shift off-center */
    top: auto;
    transform: none;
    width: 60%; /* 225px on a 375px-wide flywheel */
    aspect-ratio: 1;
    margin: 0;
  }
  /* smaller headings on mobile (per request) */
  .fly-card-title {
    font-size: 20px;
    line-height: 1.2;
  }
  .fly-center-inner h4 {
    font-size: 20px;
    line-height: 1.15;
  }
  .why-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  .container {
    padding-inline: 20px;
  }
  .section,
  .section-why {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .section-product {
    padding-bottom: 80px;
  }
  .nav-links {
    display: none;
  }
  .brand img {
    width: 144px;
  }
  .hero {
    padding-top: 56px;
  }
  .hero-sub,
  .section-lead {
    font-size: 16px;
    line-height: 1.55;
  }
  /* Hero screenshots stack, with the companion card overlapping the dashboard */
  .hero-visual {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
  }
  .hero-shot {
    position: static;
    width: 100% !important;
  }
  .hero-shot--float {
    width: 72% !important;
    margin-left: auto;
    margin-top: -22%; /* pull up over the dashboard, like the desktop overlap */
    position: relative;
    left: auto; /* clear the desktop offset so it doesn't shoot off-screen */
    top: auto;
    z-index: 1;
  }

  /* Left-align footer nav on mobile */
  .footer-nav {
    align-items: flex-start;
  }
}