/* Oxygen Mask Moments landing page.
   Ported from the "Oxygen Mask Moments" prototype. Every selector is a
   descendant of .omm-page so the shared Nav and Footer inherit nothing from
   here. The warm paper neutrals and the olive/teal/orange/red ramps are the
   Frankly design-system values the prototype used. */

.omm-page {
  --omm-paper: #f8f3ea;
  --omm-card: #fdfaf4;
  --omm-rule: #e3dcc9;
  --omm-ink: #141416;
  --omm-body: #3a3a3d;
  --omm-olive-50: #e2e4d6;
  --omm-olive-400: #6e7833;
  --omm-olive-800: #1a1b0f;
  --omm-teal-50: #e0f1f0;
  --omm-teal-100: #c3e3e1;
  --omm-teal-500: #549a96;
  --omm-teal-600: #3f7875;
  --omm-teal-700: #2a5350;
  --omm-orange-50: #f2e5d5;
  --omm-orange-400: #c7812a;
  --omm-orange-600: #7f5322;
  --omm-red-400: #ba4d26;
  --omm-red-500: #993e21;
  --omm-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --omm-gutter: max(clamp(20px, 6vw, 120px), calc((100% - var(--content-w)) / 2));

  background: var(--omm-paper);
  color: var(--omm-body);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.omm-page h1,
.omm-page h2,
.omm-page h3,
.omm-page p,
.omm-page dl,
.omm-page dd,
.omm-page ul {
  margin: 0;
}

.omm-page h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--omm-ink);
  text-wrap: balance;
}

.omm-page p {
  text-wrap: pretty;
}

/* ── Layout ── */

.omm-band {
  padding: clamp(72px, 9vw, 104px) var(--omm-gutter);
  scroll-margin-top: 80px;
}

.omm-band--lg {
  padding-block: clamp(72px, 10vw, 112px);
}

.omm-band--paper {
  background: var(--omm-card);
  border-block: 1px solid var(--omm-rule);
}

.omm-band--top-rule {
  border-bottom: 0;
}

.omm-band--teal {
  background: var(--omm-teal-50);
}

.omm-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 64px;
  align-items: center;
}

.omm-split--hero {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px;
}

.omm-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.omm-stack--sm {
  gap: 16px;
}

.omm-stack--lg {
  gap: 24px;
}

.omm-stack--lg2 {
  gap: 48px;
}

.omm-stack--xl {
  gap: 56px;
}

.omm-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

.omm-head--wide {
  max-width: 720px;
}

.omm-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--omm-teal-600);
}

.omm-eyebrow--pale {
  color: var(--omm-olive-50);
}

.omm-eyebrow--deep {
  color: var(--omm-teal-700);
}

.omm-body-lg {
  font-size: 18px;
  line-height: 1.65;
  max-width: 32em;
}

.omm-head .omm-body-lg {
  max-width: none;
}

.omm-rounded {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* ── Buttons ── */

.omm-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.omm-actions--center {
  justify-content: center;
}

.omm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--omm-paper);
  color: var(--omm-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms;
}

.omm-btn:hover {
  color: var(--omm-ink);
  text-decoration: none;
}

.omm-btn:focus-visible {
  outline: 3px solid var(--omm-paper);
  outline-offset: 3px;
}

.omm-btn--olive:hover {
  background: var(--omm-olive-50);
}

.omm-btn--teal:hover {
  background: var(--omm-teal-50);
}

/* ── Hero ── */

.omm-hero {
  background: var(--omm-olive-400);
  color: var(--omm-paper);
  padding-block: clamp(64px, 9vw, 88px) clamp(72px, 10vw, 96px);
}

.omm-hero h1 {
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--omm-paper);
  text-wrap: balance;
}

.omm-hero-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--omm-paper);
  max-width: 34em;
}

.omm-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(26, 27, 15, 0.35);
}

/* ── What's in a moment ── */

.omm-question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.omm-question {
  background: var(--omm-card);
  border: 2px solid var(--omm-ink);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.omm-question-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--omm-red-500);
}

.omm-question-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--omm-ink);
}

/* ── How it works ── */

.omm-inner {
  width: 100%;
}

.omm-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}

.omm-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 2px solid var(--omm-ink);
}

.omm-step-num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.omm-step-num--teal {
  color: var(--omm-teal-500);
}

.omm-step-num--orange {
  color: var(--omm-orange-400);
}

.omm-step-num--red {
  color: var(--omm-red-400);
}

.omm-step h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--omm-ink);
}

.omm-step p {
  font-size: 16px;
  line-height: 1.65;
}

/* ── School + home ── */

.omm-place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px;
}

.omm-place {
  background: var(--omm-card);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.omm-place h3 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--omm-ink);
}

.omm-place p {
  font-size: 16px;
  line-height: 1.65;
}

.omm-pill {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}

.omm-pill--teal {
  background: var(--omm-teal-100);
  color: var(--omm-teal-700);
}

.omm-pill--orange {
  background: var(--omm-orange-50);
  color: var(--omm-orange-600);
}

/* ── Library ── */

.omm-library-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.omm-library-head > p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 26em;
}

.omm-moment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

.omm-moment {
  background: var(--omm-card);
  border: 1px solid var(--omm-rule);
  border-radius: 20px;
  padding: 14px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    transform 200ms var(--omm-ease-out),
    border-color 200ms;
}

.omm-moment:hover {
  transform: translateY(-3px);
  border-color: var(--omm-ink);
}

@media (prefers-reduced-motion: reduce) {
  .omm-moment {
    transition: border-color 200ms;
  }

  .omm-moment:hover {
    transform: none;
  }
}

.omm-moment img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}

.omm-moment-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 6px;
}

.omm-moment h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--omm-ink);
}

.omm-moment p {
  font-size: 15px;
  line-height: 1.55;
}

.omm-more {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
}

.omm-more-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--omm-ink);
}

.omm-more ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.omm-more li {
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--omm-rule);
  background: var(--omm-card);
}

/* ── In the app ── */

.omm-app-img {
  border: 1px solid var(--omm-rule);
  box-shadow: 0 16px 32px rgba(20, 20, 22, 0.1);
}

.omm-facts > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--omm-rule);
}

.omm-facts > div:last-child {
  border-bottom: 1px solid var(--omm-rule);
}

.omm-facts dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--omm-ink);
}

.omm-facts dd {
  font-size: 16px;
  line-height: 1.55;
}

/* ── Closing CTA ── */

.omm-cta {
  background: var(--omm-teal-700);
  color: var(--omm-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.omm-cta h2 {
  max-width: 820px;
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 800;
  line-height: 1.06;
  color: var(--omm-paper);
}

.omm-cta p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--omm-teal-50);
  max-width: 34em;
}