:root {
  color-scheme: light;
  --mm-bg: oklch(0.976 0.006 245);
  --mm-bg-elevated: oklch(0.992 0.004 245);
  --mm-bg-soft: oklch(0.948 0.009 245);
  --mm-bg-blue: oklch(0.944 0.028 248);
  --mm-text: oklch(0.185 0.012 245);
  --mm-text-muted: oklch(0.455 0.018 245);
  --mm-text-faint: oklch(0.61 0.014 245);
  --mm-border: oklch(0.875 0.011 245);
  --mm-border-strong: oklch(0.78 0.015 245);
  --mm-accent: oklch(0.61 0.18 254);
  --mm-accent-deep: oklch(0.49 0.17 254);
  --mm-accent-soft: oklch(0.93 0.042 254);
  --mm-green: oklch(0.58 0.11 155);
  --mm-green-soft: oklch(0.925 0.04 155);
  --mm-amber: oklch(0.67 0.12 75);
  --mm-amber-soft: oklch(0.935 0.044 75);
  --mm-shadow-ambient: 0 28px 70px -38px oklch(0.22 0.03 245 / 0.38);
  --mm-shadow-raised: 0 18px 48px -32px oklch(0.22 0.03 245 / 0.28);
  --step-0: clamp(1rem, 0.97rem + 0.14vw, 1.08rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.32vw, 1.35rem);
  --step-2: clamp(1.48rem, 1.32rem + 0.72vw, 1.9rem);
  --step-3: clamp(2rem, 1.64rem + 1.62vw, 3rem);
  --step-4: clamp(2.72rem, 2rem + 3.2vw, 4.8rem);
  --step-5: clamp(3.35rem, 2.25rem + 4.9vw, 5.8rem);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 7.5rem;
  --space-9: 10rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-heavy: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 4%, oklch(0.93 0.035 248 / 0.72), transparent 28rem),
    linear-gradient(180deg, var(--mm-bg-elevated), var(--mm-bg) 22rem, var(--mm-bg));
  color: var(--mm-text);
  font-family: "Geist", "Aptos", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

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

button,
select {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 5;
  transform: translateY(-150%);
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--mm-text);
  color: var(--mm-bg-elevated);
  transition: transform 520ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 4;
  padding: 1.1rem clamp(1rem, 2vw, 2rem) 0;
  pointer-events: none;
}

.nav-shell {
  width: min(1160px, 100%);
  margin: 0 auto;
  min-height: 4rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0.55rem 0.45rem 0.75rem;
  border: 1px solid oklch(0.86 0.012 245 / 0.72);
  border-radius: 999px;
  background: oklch(0.992 0.004 245 / 0.9);
  box-shadow: 0 18px 45px -34px oklch(0.18 0.03 245 / 0.45);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  font-weight: 710;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand-icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 0.8rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--mm-bg-elevated);
  box-shadow: 0 10px 22px -18px var(--mm-accent-deep);
}

.brand-icon img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  color: var(--mm-text-muted);
  font-size: 0.94rem;
}

.nav-links a,
.mobile-menu a,
.site-footer a {
  transition: color 360ms var(--ease-out), transform 360ms var(--ease-out);
}

.nav-links a:hover,
.site-footer a:hover {
  color: var(--mm-accent-deep);
}

.nav-links a.is-active,
.nav-links a[aria-current] {
  color: var(--mm-text);
}

.nav-links a.is-active::after,
.nav-links a[aria-current]::after {
  content: "";
  display: block;
  inline-size: 0.38rem;
  block-size: 0.38rem;
  margin: 0.25rem auto 0;
  border-radius: 999px;
  background: var(--mm-accent);
}

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.language-control select {
  min-width: 3.6rem;
  border: 1px solid var(--mm-border);
  border-radius: 999px;
  padding: 0.48rem 0.62rem;
  background: var(--mm-bg-elevated);
  color: var(--mm-text-muted);
  font-size: 0.85rem;
  outline: none;
}

.language-control.is-hidden {
  display: none;
}

.language-control select:focus-visible,
.button:focus-visible,
.nav-links a:focus-visible,
.mobile-menu a:focus-visible,
.text-link:focus-visible {
  outline: 3px solid oklch(0.73 0.12 254 / 0.36);
  outline-offset: 3px;
}

.menu-button {
  display: none;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--mm-bg-soft);
  color: var(--mm-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.menu-lines,
.menu-lines::before,
.menu-lines::after {
  display: block;
  inline-size: 1rem;
  block-size: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 520ms var(--ease-out), opacity 420ms var(--ease-out);
}

.menu-lines {
  position: relative;
}

.menu-lines::before,
.menu-lines::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.menu-lines::before {
  transform: translateY(-0.34rem);
}

.menu-lines::after {
  transform: translateY(0.34rem);
}

.menu-button[aria-expanded="true"] .menu-lines {
  transform: rotate(45deg);
}

.menu-button[aria-expanded="true"] .menu-lines::before {
  opacity: 0;
  transform: translateY(0);
}

.menu-button[aria-expanded="true"] .menu-lines::after {
  transform: translateY(0) rotate(90deg);
}

.mobile-menu {
  width: min(620px, calc(100% - 2rem));
  margin: 0.75rem auto 0;
  display: none;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: 1.7rem;
  background: oklch(0.992 0.004 245 / 0.95);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-raised);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.mobile-menu a {
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  color: var(--mm-text-muted);
}

.mobile-menu a:hover {
  background: var(--mm-bg-soft);
  color: var(--mm-text);
}

.mobile-menu.is-open {
  display: flex;
}

.section-pad {
  width: min(1220px, calc(100% - clamp(2rem, 6vw, 5rem)));
  margin-inline: auto;
  padding-block: clamp(5rem, 9vw, 9.5rem);
}

.hero {
  min-height: min(920px, calc(100dvh - 1rem));
  padding-block-start: clamp(5.8rem, 7vw, 7.5rem);
  padding-block-end: clamp(3.4rem, 5vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  margin: 0 0 1.2rem;
  padding: 0.24rem 0.72rem;
  border-radius: 999px;
  background: var(--mm-accent-soft);
  color: var(--mm-accent-deep);
  font-size: 0.7rem;
  font-weight: 740;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-block-start: 0;
}

h1 {
  margin-block-end: 1.5rem;
  max-width: 10ch;
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 720;
  text-wrap: balance;
}

h2 {
  margin-block-end: 1.1rem;
  max-width: 13ch;
  font-size: var(--step-4);
  line-height: 1.04;
  font-weight: 710;
  letter-spacing: 0;
  text-wrap: balance;
}

h3 {
  margin-block-end: 0.8rem;
  font-size: var(--step-2);
  line-height: 1.12;
  font-weight: 680;
  letter-spacing: 0;
  text-wrap: balance;
}

p,
li,
figcaption,
.button,
.nav-links a,
.mobile-menu a {
  overflow-wrap: break-word;
}

p,
figcaption {
  text-wrap: pretty;
}

.hero-lede,
.section-heading p,
.privacy-copy p,
.report-panel p,
.support-inner p,
.final-inner h2 + p {
  max-width: 65ch;
  color: var(--mm-text-muted);
}

.hero-lede {
  margin-block-end: 2rem;
  font-size: var(--step-1);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-block-end: 1.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
  min-height: 3.25rem;
  padding: 0.62rem 0.72rem 0.62rem 1.2rem;
  border-radius: 999px;
  font-weight: 710;
  max-width: 100%;
  transition:
    transform 520ms var(--ease-out),
    background 520ms var(--ease-out),
    color 520ms var(--ease-out),
    box-shadow 520ms var(--ease-out);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: scale(0.98);
}

.button-primary {
  color: oklch(0.985 0.006 245);
  background: var(--mm-accent);
  box-shadow: 0 18px 34px -24px var(--mm-accent-deep);
}

.button-primary:hover {
  background: var(--mm-accent-deep);
}

.button-secondary {
  padding-inline: 1.2rem;
  background: var(--mm-bg-soft);
  color: var(--mm-text);
  border: 1px solid oklch(0.86 0.012 245 / 0.72);
}

.button-small {
  min-height: 2.8rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.button-orb {
  inline-size: 2.1rem;
  block-size: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: oklch(0.985 0.006 245 / 0.16);
  transition: transform 520ms var(--ease-out), background 520ms var(--ease-out);
}

.button:hover .button-orb {
  transform: translate(2px, -1px) scale(1.04);
  background: oklch(0.985 0.006 245 / 0.24);
}

.button-orb svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--mm-text-muted);
}

.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.52rem 0.72rem;
  border-radius: 999px;
  background: oklch(0.992 0.004 245 / 0.72);
  border: 1px solid var(--mm-border);
  font-size: 0.9rem;
}

.trust-strip li::before {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 999px;
  background: var(--mm-green);
}

.hero-visual {
  position: relative;
  min-height: clamp(30rem, 50vw, 42rem);
}

.device-shell {
  display: block;
}

.device-core {
  display: contents;
}

.device-core img {
  inline-size: 100%;
}

.hero-ipad {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 3%;
  inline-size: min(82%, 45rem);
  transform: rotate(1.2deg);
}

.hero-phone {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 4%;
  inline-size: min(31%, 16rem);
  transform: rotate(-2deg);
}

.trust-band {
  width: min(1180px, calc(100% - clamp(2rem, 6vw, 5rem)));
  margin: clamp(-3rem, -4vw, -1.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0.7rem;
  border-radius: 2rem;
  background: var(--mm-bg-elevated);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-raised);
}

.trust-band div {
  padding: 1.2rem;
  border-radius: 1.45rem;
  background: var(--mm-bg-soft);
}

.trust-band strong,
.trust-band span {
  display: block;
}

.trust-band strong {
  margin-block-end: 0.2rem;
  font-size: 0.95rem;
}

.trust-band span {
  color: var(--mm-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.section-kicker,
.section-heading {
  margin-block-end: clamp(2.4rem, 5vw, 4rem);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.8fr);
  gap: 2rem;
  align-items: end;
}

.section-heading .eyebrow {
  grid-column: 1 / -1;
  justify-self: start;
  margin-block-end: 0;
}

.section-heading h2 {
  margin-block-end: 0;
}

.section-heading p {
  margin-block-end: 0.2rem;
}

.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.75fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.big-copy {
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--mm-text);
  max-width: 48ch;
}

.proof-list {
  display: grid;
  gap: 0.72rem;
}

.proof-list p {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 1.25rem;
  background: var(--mm-bg-elevated);
  border: 1px solid var(--mm-border);
  color: var(--mm-text-muted);
}

.feature-walkthrough {
  padding-block-start: clamp(5rem, 8vw, 8rem);
}

.feature-split {
  display: grid;
  grid-template-columns: minmax(18rem, 0.62fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-block: clamp(3rem, 7vw, 6rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 2.3rem;
  background: var(--mm-bg-elevated);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-raised);
}

.feature-split > div:first-child {
  padding: clamp(1rem, 3vw, 2.5rem);
}

.feature-split p {
  color: var(--mm-text-muted);
}

.feature-split-reverse {
  grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 0.48fr);
}

.feature-number {
  margin-block-end: 1.4rem;
  color: var(--mm-accent-deep);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.feature-device {
  inline-size: 100%;
}

.phone-feature {
  max-inline-size: 21rem;
  justify-self: center;
}

.small-note {
  margin-block-start: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: var(--mm-green-soft);
  color: oklch(0.35 0.07 155);
  font-size: 0.95rem;
}

.feature-mosaic {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-areas:
    "a b"
    "a c";
  gap: 1rem;
  margin-block: clamp(3rem, 7vw, 6rem);
}

.feature-tile {
  min-height: 17rem;
  padding: clamp(1.35rem, 3vw, 2.6rem);
  border-radius: 2rem;
  background: var(--mm-bg-elevated);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-raised);
}

.feature-tile:first-child {
  grid-area: a;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--mm-bg-blue);
}

.feature-tile-soft {
  grid-area: b;
}

.feature-tile-amber {
  grid-area: c;
  background: var(--mm-amber-soft);
}

.feature-tile p:not(.feature-number) {
  color: var(--mm-text-muted);
}

.report-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(16rem, 0.42fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
  padding: clamp(1.2rem, 4vw, 3rem);
  border-radius: 2.4rem;
  background:
    linear-gradient(140deg, var(--mm-bg-elevated), var(--mm-bg-blue));
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-ambient);
}

.report-panel h2 {
  max-width: 12ch;
}

.report-phone {
  max-inline-size: 19rem;
  justify-self: end;
}

.screenshot-rail {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(14rem, 0.7fr);
  gap: 1rem;
  align-items: start;
}

.gallery-item {
  margin: 0;
}

.gallery-item .device-shell {
  margin-block-end: 0.9rem;
}

.gallery-wide {
  grid-row: span 2;
}

.gallery-item figcaption {
  color: var(--mm-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.orientation-section {
  padding-block-start: clamp(4rem, 7vw, 7rem);
}

.orientation-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.62fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

.orientation-card {
  margin: 0;
}

.orientation-card img {
  inline-size: 100%;
  filter: drop-shadow(0 24px 34px oklch(0.22 0.025 245 / 0.18));
}

.orientation-card-landscape {
  align-self: center;
}

.orientation-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

.orientation-card figcaption {
  max-width: 54ch;
  margin-block-start: 0.75rem;
  color: var(--mm-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.language-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(16rem, 0.7fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-block-start: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.4rem, 4vw, 3rem);
  border-radius: 2rem;
  background: var(--mm-bg-elevated);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-raised);
}

.language-proof h3 {
  max-width: 16ch;
  margin-block: 0 0.8rem;
  font-size: var(--step-2);
  line-height: 1.1;
}

.language-proof p:last-child {
  margin: 0;
  color: var(--mm-text-muted);
  max-width: 62ch;
}

.language-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.language-list li {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: var(--mm-green-soft);
  color: oklch(0.35 0.07 155);
  font-weight: 720;
  white-space: nowrap;
}

.privacy-section {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(18rem, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.privacy-copy h2 {
  max-width: 12ch;
}

.text-link {
  display: inline-flex;
  margin-block-start: 0.8rem;
  color: var(--mm-accent-deep);
  font-weight: 720;
}

.privacy-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.privacy-points div {
  min-height: 11rem;
  padding: 1.3rem;
  border-radius: 1.6rem;
  background: var(--mm-bg-elevated);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-raised);
}

.privacy-points strong,
.privacy-points span {
  display: block;
}

.privacy-points strong {
  margin-block-end: 0.5rem;
}

.privacy-points span {
  color: var(--mm-text-muted);
}

.platform-section {
  padding-block-start: clamp(4rem, 7vw, 7rem);
}

.platform-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.platform-item {
  padding: 1.35rem;
  min-height: 14rem;
  border-radius: 1.7rem;
  background: var(--mm-bg-elevated);
  border: 1px solid var(--mm-border);
}

.platform-item span {
  display: inline-flex;
  margin-block-end: 2.5rem;
  color: var(--mm-accent-deep);
  font-size: var(--step-2);
  font-weight: 730;
}

.platform-item p {
  color: var(--mm-text-muted);
  margin: 0;
}

.support-preview {
  padding-block: clamp(4rem, 7vw, 7rem);
}

.support-inner,
.final-inner {
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: 2.5rem;
  background: var(--mm-bg-elevated);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-ambient);
}

.support-inner h2,
.final-inner h2 {
  max-width: 15ch;
}

.support-inner .button {
  margin-block-start: 1rem;
}

.final-inner {
  text-align: center;
  display: grid;
  justify-items: center;
  background:
    radial-gradient(circle at 50% 0%, oklch(0.93 0.045 254 / 0.7), transparent 30rem),
    var(--mm-bg-elevated);
}

.final-inner h2 {
  max-width: 18ch;
}

.site-footer {
  width: min(1220px, calc(100% - clamp(2rem, 6vw, 5rem)));
  margin-inline: auto;
  padding-block: 2rem 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  color: var(--mm-text-muted);
  border-top: 1px solid var(--mm-border);
}

.site-footer .brand-mark {
  color: var(--mm-text);
  margin-block-end: 0.8rem;
}

.site-footer p {
  max-width: 42ch;
  margin: 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 1rem;
}

.copyright {
  grid-column: 1 / -1;
  font-size: 0.9rem;
}

.subpage {
  padding-block-start: clamp(7rem, 10vw, 10rem);
}

.subpage-hero {
  width: min(980px, calc(100% - clamp(2rem, 6vw, 5rem)));
  margin-inline: auto;
  padding-block: clamp(5rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem);
}

.subpage-hero h1 {
  max-width: 13ch;
}

.subpage-hero p {
  max-width: 66ch;
  color: var(--mm-text-muted);
  font-size: var(--step-1);
}

.content-page {
  width: min(980px, calc(100% - clamp(2rem, 6vw, 5rem)));
  margin-inline: auto;
  padding-block: 1rem clamp(5rem, 8vw, 8rem);
}

.content-section {
  padding: clamp(1.4rem, 4vw, 2.5rem);
  margin-block-end: 1rem;
  border-radius: 1.8rem;
  background: var(--mm-bg-elevated);
  border: 1px solid var(--mm-border);
}

.content-section h2 {
  max-width: none;
  font-size: var(--step-2);
}

.content-section p,
.content-section li {
  color: var(--mm-text-muted);
}

.content-section ul {
  padding-inline-start: 1.2rem;
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal.will-reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 900ms var(--ease-heavy), transform 900ms var(--ease-heavy);
}

.js .reveal.will-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 120ms;
}

.reveal-delay-2 {
  transition-delay: 220ms;
}

@media (max-width: 980px) {
  .nav-shell {
    display: flex;
    justify-content: space-between;
  }

  .nav-links,
  .nav-actions {
    display: none;
  }

  .menu-button {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .hero,
  .problem-grid,
  .feature-split,
  .feature-split-reverse,
  .report-panel,
  .orientation-showcase,
  .language-proof,
  .privacy-section,
  .section-heading {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-block-start: 7rem;
  }

  h1 {
    max-width: 11ch;
  }

  .hero-visual {
    min-height: clamp(30rem, 82vw, 44rem);
  }

  .hero-ipad {
    inline-size: 88%;
  }

  .hero-phone {
    inline-size: 34%;
  }

  .trust-band,
  .platform-layout {
    grid-template-columns: 1fr;
  }

  .feature-mosaic {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c";
  }

  .report-phone {
    justify-self: center;
  }

  .privacy-points {
    grid-template-columns: 1fr;
  }

  .language-list {
    justify-content: start;
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  .hero {
    min-height: calc(100dvh - 1rem);
    padding-block-start: 5rem;
    padding-block-end: 4rem;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: center;
  }

  .hero-visual {
    min-height: clamp(24rem, 56vw, 32rem);
  }

  .hero-ipad {
    inline-size: 94%;
    inset-block-start: 10%;
  }

  .hero-phone {
    inline-size: min(35%, 12rem);
    inset-block-end: 10%;
  }

  h1 {
    max-width: 7.6ch;
    font-size: clamp(3rem, 7vw, 3.85rem);
  }

  .hero-lede {
    font-size: 1.02rem;
    line-height: 1.5;
  }

  .hero-actions {
    gap: 0.65rem;
  }

  .hero-actions .button-secondary {
    display: none;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding-inline: 0.75rem;
  }

  .nav-shell {
    inline-size: calc(100vw - 1.5rem);
    max-inline-size: calc(100vw - 1.5rem);
  }

  .section-pad,
  .trust-band,
  .site-footer,
  .subpage-hero,
  .content-page {
    width: min(100% - 1.5rem, 1220px);
    max-width: calc(100vw - 1.5rem);
  }

  .section-pad {
    padding-block: 3.6rem 4.5rem;
  }

  .hero {
    padding-block-start: 1.4rem;
    gap: 0.8rem;
  }

  .hero-copy,
  .hero-actions,
  .hero-lede {
    max-inline-size: calc(100vw - 1.5rem);
  }

  .hero-copy {
    position: relative;
    z-index: 2;
  }

  h1 {
    max-width: 8.8ch;
    font-size: clamp(2.45rem, 10.4vw, 2.9rem);
    line-height: 0.98;
    margin-block-end: 0.8rem;
  }

  .hero-lede {
    margin-block-end: 1rem;
    font-size: 0.95rem;
    line-height: 1.48;
  }

  .hero-actions {
    align-items: stretch;
    gap: 0.65rem;
    margin-block-end: 0;
  }

  .hero-actions .button,
  .final-inner .button {
    width: 100%;
  }

  .button {
    min-height: 2.9rem;
    padding-inline: 1rem;
    gap: 0.5rem;
  }

  .button-orb {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    flex: 0 0 auto;
  }

  .hero-visual {
    min-height: auto;
    margin-block-start: 1rem;
    overflow: visible;
  }

  .hero-ipad {
    display: none;
  }

  .hero-phone {
    position: relative;
    inline-size: min(58%, 16rem);
    margin-inline: auto;
    inset: auto;
    transform: rotate(-2deg);
  }

  .trust-strip li {
    flex: 1 1 calc(50% - 0.5rem);
  }

  .hero .trust-strip {
    display: none;
  }

  .screenshot-rail {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    padding-block-end: 0.6rem;
  }

  .gallery-item {
    min-width: min(86vw, 22rem);
    scroll-snap-align: start;
  }

  .gallery-wide {
    min-width: min(92vw, 34rem);
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    justify-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}