/* =========================================================
   MaxTheMatch landing page (from the MEALMax v3 template)
   Tokens, layout, motion. Plus Jakarta Sans throughout.
   Breakpoints are container queries:
     mm  = page width, mmf = form card, mk = hero mockup
   Motion: .mm-anim (added by script only when the page really
   scrolls and reduced motion is off) hides .mm-rv items until
   they scroll into view (.is-in).
   ========================================================= */

.mm, .mmf {
  /* Palette: rose #D5668F (primary), peach #EF946A, gold #F0D368.
     Primary is light for white text (3.4:1, bold text only), so text ON it
     is white (--on-blue, as requested), and text/icons IN it on light grounds use the
     darker --blue-ink (5:1 on white). */
  --blue: #D5668F;
  --blue-hover: #C2507B;
  --on-blue: #FFFFFF; /* white on #D5668F, bold text only (3.4:1) */
  --blue-ink: #A8406A;
  --blue-soft: #FCEEF3;
  --blue-50: #FCEEF3;
  --blue-band: #FCEEF3;
  /* MaxMEALBoard tokens (Saasdesk-derived palette) */
  --navy: #2B2B46;
  --navy-deep: #232338;
  --body: #6A6A7A;
  --muted: #6A6A7A;
  --border: #F1E1E7;
  --border-strong: rgba(43, 43, 70, 0.15);
  --field: #8A8A99;
  --warm: #F0D368;
  --on-warm: #2B2B46;
  --pastel-orange: #FDF1EA;
  --pastel-yellow: #FDF6DA;
  --pastel-green: #E6FFF0;
  --pastel-purple: #E6E8FF;
  --pastel-pink: #F4D4EB;
  --ok: #12703F;
  --ok-soft: #E3F6EC;
  --late: #8F5300;
  --late-soft: #FFF1DC;
  --error: #C62828;
  --ph-bg: #EEF1F7;
  --ph-line: #B8C1D6;
  --ph-text: #4A5578;
  --shadow: 0 6px 20px rgba(27, 26, 45, 0.05);
  --shadow-hover: 0 5px 30px rgba(0, 0, 0, 0.10);
  --shadow-blue: 0 40px 80px -30px rgba(213, 102, 143, 0.45), 0 12px 24px -12px rgba(14, 26, 61, 0.14);
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  font-family: var(--font);
  color: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mm *, .mm *::before, .mm *::after,
.mmf *, .mmf *::before, .mmf *::after { box-sizing: border-box; }
.mm :focus-visible, .mmf :focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; border-radius: 8px; }
.mm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Page ---------- */
.mm { position: relative; container-type: inline-size; container-name: mm; background: #FFFFFF; min-height: 100vh; }
.mm-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; }
.mm-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 40px; }
.mm section { scroll-margin-top: 84px; }

/* Back-to-top button: appears once the page has scrolled past the hero.
   It sits outside .mm on purpose: .mm is a size container, which would
   pin position: fixed to the page instead of the window. */
.mm-totop {
  position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 0; cursor: pointer;
  background: #D5668F; color: #FFFFFF; box-shadow: 0 14px 30px -10px rgba(213, 102, 143, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.3s, background-color 0.2s;
}
.mm-totop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s, background-color 0.2s; }
.mm-totop:hover { background: #C2507B; }
.mm-totop:focus-visible { outline: 3px solid #2B2B46; outline-offset: 3px; }
.mm-totop .mm-ic { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); }
.mm-totop:hover .mm-ic { transform: translateY(-2px); }
@media (max-width: 600px) { .mm-totop { right: 16px; bottom: 16px; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .mm-totop, .mm-totop .mm-ic { transition: none !important; transform: none !important; } }
.mm-sentinel-2 { position: absolute; top: 0; left: 0; width: 1px; height: 700px; pointer-events: none; }
.mm-sec { padding-block: 120px; }
.mm-sec-tint { background: var(--blue-50); }
.mm-sec-warm { background: var(--pastel-orange); }
.mm-pc-orange, .mm-pc-yellow, .mm-pc-blue, .mm-pc-purple { border-color: transparent; box-shadow: none; }
.mm-card.mm-pc-orange, .mm-pc-orange { background: var(--pastel-orange); }
.mm-card.mm-pc-yellow, .mm-pc-yellow { background: var(--pastel-yellow); }
.mm-card.mm-pc-blue, .mm-pc-blue { background: var(--blue-soft); }
.mm-card.mm-pc-purple, .mm-pc-purple { background: var(--pastel-purple); }
.mm-pc-orange .mm-icbox, .mm-pc-yellow .mm-icbox, .mm-pc-blue .mm-icbox, .mm-pc-purple .mm-icbox { background: #FFFFFF; color: var(--navy); }
.mm-pc-orange.mm-hover:hover, .mm-pc-yellow.mm-hover:hover, .mm-pc-blue.mm-hover:hover, .mm-pc-purple.mm-hover:hover { border-color: transparent; }

/* ---------- Type ---------- */
.mm-h1 { margin: 0; color: var(--navy); font-size: 64px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.mm-h1 em {
  font-style: normal; color: var(--blue-ink); background: #FDF6DA;
  padding: 0 0.18em; border-radius: 10px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mm-h2 { margin: 0; color: var(--navy); font-size: 48px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.mm-h3 { margin: 0; color: var(--navy); font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.mm-p { margin: 0; font-size: 15.5px; color: var(--body); text-wrap: pretty; }
.mm-lead { margin: 0; font-size: 19px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.mm-fine { margin: 0; font-size: 14px; color: var(--muted); font-weight: 500; }
.mm-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 820px; margin: 0 auto; }
.mm-head .mm-lead { max-width: 640px; }
.mm-eyebrow {
  margin: 0; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 10px;
  background: var(--blue-soft); color: var(--blue-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Icons ---------- */
.mm-ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: block; }
.mm-icbox {
  width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue-ink);
}

/* ---------- Buttons ---------- */
/* Pill buttons. A .has-dot button carries a small dot on the left that
   grows into a circle with an arrow on hover. */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 10px;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.mm-btn.has-dot { padding-left: 8px; }
.mm-btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.mm-btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.mm-btn-lg.has-dot { padding-left: 10px; }
.mm-btn-block { width: 100%; }
.mm-dotc { position: relative; width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.mm-dotc::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 8px;
  transition: width 0.3s var(--ease), height 0.3s var(--ease);
}
.mm-dotc .mm-ic { position: relative; opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.3s var(--ease); stroke-width: 2.4; }
.mm-btn:hover .mm-dotc::before, .mm-btn:focus-visible .mm-dotc::before { width: 36px; height: 36px; }
.mm-btn:hover .mm-dotc .mm-ic, .mm-btn:focus-visible .mm-dotc .mm-ic { opacity: 1; transform: none; }
/* Primary = dark fill (template role); cyan appears in the hover dot.
   Accent = cyan fill with dark text, used for the form's submit. */
.mm-btn-primary { background: var(--navy); color: #FFFFFF; }
.mm-btn-primary:hover { background: var(--navy-deep); color: #FFFFFF; }
.mm-btn-primary .mm-dotc::before { background: var(--blue); }
.mm-btn-primary .mm-dotc { color: var(--navy); }
.mm-btn-accent { background: var(--blue); color: var(--on-blue); }
.mm-btn-accent:hover { background: var(--blue-hover); color: var(--on-blue); }
.mm-btn-accent .mm-dotc::before { background: #FFFFFF; }
.mm-btn-accent .mm-dotc { color: var(--blue); }
.mm-btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.mm-btn-secondary:hover { background: var(--navy); color: #FFFFFF; }
.mm-btn-secondary .mm-dotc::before { background: var(--navy); }
.mm-btn-secondary .mm-dotc { color: #FFFFFF; }
.mm-btn-secondary:hover .mm-dotc::before { background: var(--blue); }
.mm-btn-secondary:hover .mm-dotc { color: var(--navy); }
.mm-btn-white { background: #FFFFFF; color: var(--navy); }
.mm-btn-white:hover { background: var(--blue-soft); color: var(--navy); }

/* ---------- Cards ---------- */
.mm-card { background: #FFFFFF; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.mm-hover { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s; }
.mm-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.mm-rv > .mm-card { height: 100%; }

/* ---------- Image placeholders ---------- */
.mm-ph {
  width: 100%; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px; border-radius: 10px;
  background: var(--ph-bg); border: 1.5px dashed var(--ph-line); color: var(--ph-text);
  font-size: 13px; font-weight: 600; line-height: 1.4;
}

/* ---------- Motion ---------- */
@keyframes mm-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mm-rise { from { opacity: 0; transform: translateY(56px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes mm-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mm-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mm-load { animation: mm-up 0.7s var(--ease) both; }
.mm-l2 { animation-delay: 0.08s; }
.mm-l3 { animation-delay: 0.16s; }
.mm-l4 { animation-delay: 0.24s; }
.mm-l5 { animation-delay: 0.32s; }
.mm-load-late { animation: mm-rise 1s var(--ease) 0.4s both; }

.mm-anim .mm-rv { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.mm-anim .mm-rv.is-in { opacity: 1; transform: none; }
.mm-anim .mm-d1 { transition-delay: 90ms; }
.mm-anim .mm-d2 { transition-delay: 180ms; }
.mm-anim .mm-d3 { transition-delay: 270ms; }
.mm-anim .mm-d4 { transition-delay: 360ms; }
.mm-anim .mm-d5 { transition-delay: 450ms; }

.mm-par { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ---------- Nav ---------- */
/* Floating pill bar. The outer box keeps a fixed height (and an equal
   negative margin) so the page never jumps; only the inner bar shrinks. */
.mm-nav {
  position: sticky; top: 0; z-index: 40; height: 96px; margin-bottom: -96px;
  padding: 16px 24px 0; pointer-events: none; transition: padding 0.3s var(--ease);
}
.mm-nav-in {
  position: relative; pointer-events: auto; max-width: 1240px; margin: 0 auto; height: 68px; padding: 0 10px 0 24px;
  display: flex; align-items: center; gap: 28px; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s, height 0.3s var(--ease);
}
.mm-nav.is-scrolled { padding-top: 10px; }
.mm-nav.is-scrolled .mm-nav-in, .mm-nav.is-open .mm-nav-in {
  background: rgba(255, 255, 255, 0.97); border-color: var(--border);
  box-shadow: 0 12px 32px -14px rgba(14, 26, 61, 0.22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.mm-nav.is-scrolled .mm-nav-in { height: 58px; }
.mm-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-weight: 800; font-size: 21px; letter-spacing: -0.03em; }
.mm-logomark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--blue); color: var(--on-blue);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -6px rgba(213, 102, 143, 0.6);
}
.mm-logomark .mm-ic { stroke-width: 2.6; }
.mm-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.mm-navlink { color: var(--navy); text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 14px; border-radius: 10px; transition: background-color 0.25s, color 0.25s; }
.mm-navlink:hover { background: var(--blue-soft); color: var(--blue-ink); }
.mm-navact { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mm-burger {
  display: none; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center;
  background: #FFFFFF; color: var(--navy); border: 1px solid var(--border); cursor: pointer; padding: 0;
}
.mm-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; pointer-events: auto;
  background: #FFFFFF; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 30px 50px -24px rgba(14, 26, 61, 0.35);
  animation: mm-fade 0.3s var(--ease) both;
}
.mm-menu-in { display: flex; flex-direction: column; padding: 6px 20px 20px; }
.mm-menulink { display: flex; align-items: center; min-height: 54px; color: var(--navy); text-decoration: none; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--border); }
.mm-menu-in .mm-btn { margin-top: 18px; }

/* ---------- Hero ---------- */
/* Hero ground: soft rose to peach to gold. */
.mm-hero-sec { position: relative; overflow: hidden; padding-top: 96px; background: linear-gradient(160deg, #FBE3EC 0%, #FDEDE4 55%, #FBF3D6 100%); }
.mm-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 88px 0; }
.mm-hero-copy { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 920px; }
.mm-hero .mm-lead { font-size: 20px; max-width: 620px; }
.mm-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 5px; border-radius: 10px;
  background: #FFFFFF; border: 1px solid var(--border); box-shadow: var(--shadow);
  color: var(--navy); font-size: 14px; font-weight: 700;
}
.mm-pill-ic { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: var(--on-blue); }
.mm-pill-ic .mm-ic { stroke-width: 2.4; }
.mm-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.mm-hero-visual { position: relative; width: 100%; max-width: 1100px; margin-top: 72px; padding-bottom: 120px; }
.mm-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.mm-blob-1 { width: 520px; height: 420px; left: -6%; top: 6%; background: rgba(213, 102, 143, 0.20); }
.mm-blob-2 { width: 460px; height: 380px; right: -8%; top: 24%; background: rgba(239, 148, 106, 0.24); }
.mm-blob-3 { width: 380px; height: 260px; left: 32%; top: -4%; background: rgba(255, 255, 255, 0.9); }

/* Hero product mockup */
.mk-wrap { position: relative; z-index: 1; margin: 0; }
.mk {
  container-type: inline-size; container-name: mk;
  text-align: left; background: #FFFFFF; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: 0 50px 100px -40px rgba(14, 26, 61, 0.35), 0 20px 40px -24px rgba(213, 102, 143, 0.3);
  color: var(--navy); font-family: var(--font);
}
.mk-bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; background: #F7F9FD; border-bottom: 1px solid var(--border); }
.mk-dots { display: flex; gap: 7px; width: 60px; }
.mk-dots span { width: 11px; height: 11px; border-radius: 50%; background: #D7DEEC; }
.mk-url {
  flex: 1; max-width: 360px; margin: 0 auto; height: 28px; border-radius: 8px; background: #FFFFFF; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted);
}
.mk-bar-sp { width: 60px; }
.mk-app { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 0; }
.mk-side { border-right: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; background: #FBFCFF; }
.mk-org { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.mk-av { width: 30px; height: 30px; border-radius: 9px; background: var(--navy); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; }
.mk-nav { display: flex; flex-direction: column; gap: 4px; }
.mk-navi { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--body); }
.mk-navi.is-on { background: var(--blue-soft); color: var(--blue-ink); }
.mk-main { padding: 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.mk-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.mk-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.mk-actions { display: flex; gap: 8px; }
.mk-select, .mk-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; white-space: nowrap;
  font-size: 13px; font-weight: 600;
}
.mk-select { background: #FFFFFF; border: 1px solid var(--border-strong); color: var(--navy); }
.mk-btn { background: var(--blue); color: var(--on-blue); }
.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mk-kpi { border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; }
.mk-label { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--body); font-weight: 600; min-height: 34px; }
.mk-num { font-size: 28px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.mk-of { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mk-track { height: 6px; border-radius: 10px; background: #EDF1F8; overflow: hidden; }
.mk-fill { display: block; height: 100%; border-radius: 10px; background: var(--blue); }
.mk-fill-late { background: var(--warm); }
.mk-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.mk-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mk-pill .mm-ic { stroke-width: 2.6; }
.mk-ok { background: var(--ok-soft); color: var(--ok); }
.mk-late { background: var(--late-soft); color: var(--late); }
.mk-pct { font-size: 12px; font-weight: 700; color: var(--navy); }
.mk-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
.mk-panel { border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.mk-ptop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-ptitle { font-size: 13.5px; font-weight: 700; }
.mk-legend { display: flex; gap: 12px; font-size: 11.5px; font-weight: 600; color: var(--body); }
.mk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mk-sw { width: 9px; height: 9px; border-radius: 3px; }
.mk-sw-a { background: var(--blue); }
.mk-sw-b { background: #EF946A; }
.mk-sw-t { width: 14px; height: 0; border-top: 2px dashed var(--navy); border-radius: 0; }
.mk-bars { position: relative; height: 130px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; align-items: end; padding-bottom: 20px; }
.mk-target { position: absolute; left: 0; right: 0; bottom: calc(20px + 88%); border-top: 2px dashed var(--navy); }
.mk-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.mk-colbar { width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: var(--blue); }
.mk-colbar.is-now { background: var(--navy); }
.mk-mon { position: absolute; bottom: -20px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.mk-brk { display: flex; flex-direction: column; gap: 12px; }
.mk-brow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.mk-blbl { font-size: 11.5px; font-weight: 700; color: var(--body); }
.mk-bbars { display: flex; flex-direction: column; gap: 4px; }
.mk-b { display: block; height: 9px; border-radius: 0 5px 5px 0; }
.mk-b-a { background: var(--blue); }
.mk-b-b { background: #EF946A; }

@container mk (max-width: 860px) {
  .mk-app { grid-template-columns: minmax(0, 1fr); }
  .mk-side { display: none; }
}
@container mk (max-width: 640px) {
  .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-row { grid-template-columns: minmax(0, 1fr); }
  .mk-url, .mk-bar-sp { display: none; }
}
@container mk (max-width: 420px) {
  .mk-main { padding: 14px; gap: 12px; }
  .mk-title { font-size: 15px; }
  .mk-sub { font-size: 11px; }
  .mk-actions { width: 100%; }
  .mk-select, .mk-btn { height: 30px; font-size: 12px; padding: 0 10px; }
  .mk-kpis { gap: 8px; }
  .mk-kpi { padding: 10px; gap: 8px; }
  .mk-label { font-size: 11px; min-height: 30px; }
  .mk-num { font-size: 21px; }
  .mk-of { display: block; margin: 3px 0 0; font-size: 10.5px; }
  .mk-pill { font-size: 10.5px; padding: 0 6px; height: 20px; }
  .mk-pct { font-size: 11px; }
  .mk-bars { height: 104px; gap: 6px; }
  .mk-brk-panel { display: none; }
}

/* ---------- 3. Benefits ---------- */
.mm-oldway { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; }
.mm-oldway-lbl { font-size: 14px; font-weight: 700; color: var(--muted); }
.mm-old { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px; background: #F1F3F8; border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--body); }
.mm-oldarrow { color: #9AA4BF; }
.mm-benefits { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mm-benefit { padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; }
.mm-benefit .mm-icbox { margin-bottom: 8px; }

/* ---------- 4. Tabs ---------- */
/* Vertical tab list on the left: the active tab opens into a card with
   text, 3 ticks and a 5s progress bar; the image sits on the right. */
.mm-ftabs { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.mm-tablist { display: flex; flex-direction: column; gap: 10px; }
.mm-titem { position: relative; border-radius: 10px; border: 1px solid transparent; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; overflow: hidden; }
.mm-titem::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 1px; background: var(--border-strong); }
.mm-titem.is-on { background: #FFFFFF; border-color: var(--border); box-shadow: var(--shadow-hover); }
.mm-titem.is-on::after { display: none; }
.mm-tab {
  width: 100%; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 22px;
  border: 0; background: transparent; color: var(--navy); cursor: pointer; text-align: left;
  font: inherit; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; border-radius: 10px;
}
.mm-tab-ic {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: var(--blue-ink); border: 1px solid var(--border); transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.mm-tab:hover .mm-tab-ic { border-color: #EBC3D2; }
.mm-titem.is-on .mm-tab-ic { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.mm-tab-name { flex: 1; }
.mm-tab-chev { color: var(--muted); transition: transform 0.3s var(--ease); }
.mm-titem.is-on .mm-tab-chev { transform: rotate(180deg); color: var(--blue-ink); }
.mm-tabbody { padding: 0 24px 28px 76px; display: flex; flex-direction: column; gap: 14px; animation: mm-fade 0.45s var(--ease) both; }
.mm-tabbody .mm-p { font-size: 16.5px; }
.mm-tab-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(213, 102, 143, 0.12); }
.mm-tab-fill { display: block; width: 100%; height: 100%; background: var(--blue); transform-origin: left center; }
.mm-tab-fill.is-run { animation: mm-prog 5s linear both; }
.mm-tabmedia { position: relative; border-radius: 10px; padding: 28px; background: var(--blue-soft); overflow: hidden; isolation: isolate; }
.mm-tabmedia::before { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -80px; top: -100px; border-radius: 50%; background: rgba(213, 102, 143, 0.18); filter: blur(60px); }
.mm-tabmedia .mm-ph { background: rgba(255, 255, 255, 0.75); box-shadow: var(--shadow); animation: mm-fade 0.5s var(--ease) both; }
.mm-ticks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mm-ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 600; color: var(--navy); line-height: 1.45; }
.mm-tick { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: var(--on-blue); margin-top: 0; }
.mm-tick .mm-ic { stroke-width: 2.8; }

/* ---------- 5. Who it's for ---------- */
.mm-who { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mm-whophoto { margin: 56px 0 0; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.mm-whophoto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 60%; }
.mm-whophoto + .mm-who { margin-top: 24px; }
@media (max-width: 760px) { .mm-whophoto { margin-top: 40px; } .mm-whophoto img { aspect-ratio: 4 / 3; } }
.mm-whocard { padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; }
.mm-whocard .mm-icbox { margin-bottom: 8px; }

/* ---------- 6. Data protection ---------- */
.mm-band { background: var(--blue-band); }
.mm-dp { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mm-dp-item { display: flex; align-items: center; gap: 16px; padding: 22px 24px; font-size: 16.5px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.mm-dp-item .mm-tick { width: 32px; height: 32px; }

/* ---------- 7. Pricing ---------- */
.mm-toggle { display: inline-flex; padding: 5px; gap: 4px; border-radius: 10px; background: #F8EEF2; border: 1px solid var(--border); }
.mm-tog {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 10px;
  border: 0; background: transparent; color: var(--body); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.mm-tog:hover { color: var(--navy); }
.mm-tog[aria-pressed="true"] { background: #FFFFFF; color: var(--navy); box-shadow: 0 2px 8px -2px rgba(14, 26, 61, 0.18); }
.mm-save { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 10px; background: var(--warm); color: var(--on-warm); }
.mm-prices { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-top: 16px; }
.mm-plan { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 32px 26px 26px; }
.mm-plan-pop { background: var(--blue); border-color: var(--blue); color: var(--on-blue); box-shadow: var(--shadow-blue); }
.mm-plan-pop.mm-hover:hover { border-color: var(--blue); box-shadow: 0 46px 90px -30px rgba(213, 102, 143, 0.55), 0 12px 24px -12px rgba(14, 26, 61, 0.14); }
.mm-plan-pop .mm-plan-name, .mm-plan-pop .mm-amt { color: var(--on-blue); }
.mm-plan-pop .mm-per, .mm-plan-pop .mm-from, .mm-plan-pop .mm-checks li { color: var(--on-blue); }
.mm-plan-pop .mm-checks { border-color: rgba(255, 255, 255, 0.35); }
.mm-plan-pop .mm-checks .mm-ic { color: var(--on-blue); }
.mm-badge { position: absolute; top: -14px; left: 24px; padding: 5px 12px; border-radius: 10px; background: var(--warm); color: var(--on-warm); font-size: 12.5px; font-weight: 800; }
.mm-plan-name { margin: 0; color: var(--navy); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.mm-price { margin: 0; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; min-height: 58px; }
.mm-amt { color: var(--navy); font-size: 46px; line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; }
.mm-per, .mm-from { font-size: 15px; color: var(--muted); font-weight: 600; }
.mm-from { margin-right: 4px; }
.mm-checks { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.mm-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; font-weight: 500; color: var(--navy); }
.mm-checks .mm-ic { color: var(--blue-ink); margin-top: 3px; stroke-width: 2.6; }
.mm-plan .mm-btn { margin-top: auto; }
.mm-price-notes { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.mm-extra {
  margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 10px;
  background: var(--blue-50); border: 1px solid var(--border); font-size: 15.5px; font-weight: 600; color: var(--navy);
}
.mm-extra .mm-ic { color: var(--blue-ink); }

/* ---------- 8. FAQ ---------- */
.mm-faq { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
.mm-faq-col { display: flex; flex-direction: column; gap: 16px; }
.mm-qa { border-radius: 10px; background: #FFFFFF; border: 1px solid var(--border); box-shadow: var(--shadow); transition: border-color 0.2s, box-shadow 0.2s; }
.mm-qa:hover { border-color: var(--border-strong); }
.mm-qa-open { border-color: #EBC3D2; }
.mm-qh { margin: 0; }
.mm-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 72px; padding: 18px 22px; background: transparent; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  font: inherit; font-size: 17px; font-weight: 700; color: var(--navy);
}
.mm-plus {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue-ink); transition: transform 0.25s var(--ease), background-color 0.2s, color 0.2s;
}
.mm-q[aria-expanded="true"] .mm-plus { transform: rotate(45deg); background: var(--blue); color: var(--on-blue); }
.mm-a { margin: 0; padding: 0 70px 22px 22px; font-size: 16px; color: var(--body); animation: mm-fade 0.3s var(--ease) both; }

/* ---------- 9. CTA ---------- */
.mm-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center;
  padding: 64px; border-radius: 10px; background: var(--blue); color: var(--on-blue); box-shadow: var(--shadow-blue);
}
.mm-cta :focus-visible { outline-color: var(--on-blue); }
.mm-cta .mmf :focus-visible { outline-color: var(--blue-ink); }
.mm-cta-deco { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.mm-cta-d1 { width: 520px; height: 520px; left: -160px; bottom: -260px; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.04), 0 0 0 140px rgba(255, 255, 255, 0.03); }
.mm-cta-d2 { width: 360px; height: 360px; right: 18%; top: -200px; background: rgba(255, 255, 255, 0.35); filter: blur(70px); }
.mm-cta-copy { display: flex; flex-direction: column; gap: 20px; }
.mm-cta .mm-h2 { color: var(--on-blue); }
.mm-cta .mm-lead { color: var(--on-blue); font-size: 19px; }
.mm-cta-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mm-cta-list li { display: flex; align-items: center; gap: 12px; font-size: 16.5px; font-weight: 600; color: var(--on-blue); }
.mm-cta-list .mm-tick { background: #FFFFFF; color: var(--blue); }
.mm-cta-fine { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--on-blue); }

/* ---------- 10. Footer ---------- */
.mm-foot { background: var(--navy); color: rgba(255, 255, 255, 0.74); }
.mm-foot .mm-logo { color: #FFFFFF; }
.mm-foot .mm-p { color: rgba(255, 255, 255, 0.74); }
.mm-foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding-block: 80px 56px; }
.mm-foot-brand { display: flex; flex-direction: column; gap: 16px; max-width: 290px; }
.mm-foot-col { display: flex; flex-direction: column; gap: 4px; }
.mm-foot-h { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: #FFFFFF; letter-spacing: 0.08em; text-transform: uppercase; }
.mm-foot-col a {
  align-self: flex-start; color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0;
  transition: color 0.3s, transform 0.3s var(--ease);
}
.mm-foot-col a:hover { color: #FFFFFF; transform: translateX(6px); }
.mm-foot :focus-visible { outline-color: #FFFFFF; }
.mm-foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-block: 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 14px; font-weight: 500;
}
.mm-foot-bottom p { margin: 0; }
.mm-foot-small { display: flex; gap: 20px; }
.mm-foot-small a { color: rgba(255, 255, 255, 0.74); text-decoration: none; padding: 8px 0; }
.mm-foot-small a:hover { color: #FFFFFF; }

/* ---------- Demo form card ---------- */
.mmf {
  container-type: inline-size; container-name: mmf;
  background: #FFFFFF; border-radius: 10px; padding: 32px; color: var(--body);
  box-shadow: 0 30px 60px -24px rgba(14, 26, 61, 0.4); border: 1px solid var(--border);
}
.mmf-form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.mmf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mmf-full { grid-column: 1 / -1; }
.mmf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mmf-label { font-size: 14px; font-weight: 700; color: var(--navy); }
.mmf-in {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 10px;
  border: 1.5px solid var(--field); background: #FFFFFF; color: var(--navy);
  font: inherit; font-size: 16px; line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s;
}
.mmf-in:hover { border-color: var(--navy); }
.mmf-in::placeholder { color: var(--muted); opacity: 0.85; }
.mmf-in:focus { border-color: var(--blue-ink); outline: none; box-shadow: 0 0 0 4px rgba(213, 102, 143, 0.2); }
textarea.mmf-in { min-height: 100px; resize: vertical; }
.mmf-in[aria-invalid="true"] { border-color: var(--error); border-width: 2px; background: #FFF8F8; }
.mmf-in[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.16); }
.mmf-err { margin: 2px 0 0; display: flex; align-items: flex-start; gap: 6px; font-size: 14px; color: var(--error); font-weight: 600; }
.mmf-err .mm-ic { margin-top: 2px; }
.mmf-sel { position: relative; }
.mmf-sel select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.mmf-sel .mm-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.mmf-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mmf-when .mmf-sel { grid-column: 1 / -1; }
.mmf-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.mmf-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--navy); cursor: pointer; font-weight: 500; }
.mmf-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue-ink); flex-shrink: 0; }
.mmf-check a { color: var(--blue-ink); font-weight: 700; }
.mmf-ok { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; padding: 24px; }
.mmf-okmark {
  width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: var(--on-blue); box-shadow: 0 0 0 10px var(--blue-soft);
}
.mmf-okmark .mm-ic { stroke-width: 2.6; }
.mmf-okmsg { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 800; color: var(--navy); max-width: 380px; text-wrap: balance; }
@keyframes mmf-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.mmf-ok { animation: mmf-pop 0.4s var(--ease) both; }

@container mmf (max-width: 460px) {
  .mmf-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Laptop ---------- */
@container mm (max-width: 1180px) {
  .mm-h1 { font-size: 58px; }
  .mm-prices { gap: 14px; }
  .mm-plan { padding: 30px 20px 22px; }
  .mm-amt { font-size: 40px; }
  .mm-benefits, .mm-who { gap: 18px; }
}

/* ---------- Tablet ---------- */
@container mm (max-width: 960px) {
  .mm-links, .mm-login { display: none; }
  .mm-burger { display: inline-flex; }
  .mm-navact { gap: 12px; }
  .mm-menu { display: block; }
  .mm-sec { padding-block: 96px; }
  .mm-h1 { font-size: 52px; }
  .mm-h2 { font-size: 40px; }
  .mm-hero { padding-top: 64px; }
  .mm-hero-visual { margin-top: 56px; padding-bottom: 96px; }
  .mm-benefits, .mm-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-ftabs { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; }
  .mm-dp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
  .mm-faq { grid-template-columns: minmax(0, 1fr); }
  .mm-cta { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 44px; }
  .mm-foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-foot-brand { grid-column: 1 / -1; max-width: none; }
}

/* ---------- Phone ---------- */
@container mm (max-width: 600px) {
  .mm-wrap { padding-inline: 20px; }
  .mm-nav { height: 76px; margin-bottom: -76px; padding: 10px 12px 0; }
  .mm-nav.is-scrolled { padding-top: 8px; }
  .mm-nav-in { height: 58px; padding: 0 7px 0 16px; }
  .mm-nav.is-scrolled .mm-nav-in { height: 54px; }
  .mm-navcta { display: none; }
  .mm-logo { font-size: 19px; }
  .mm-hero-sec { padding-top: 76px; }
  .mm-hero { padding-top: 40px; }
  .mm-hero-copy { gap: 18px; }
  .mm-h1 { font-size: 38px; line-height: 1.1; letter-spacing: -0.03em; }
  .mm-h2 { font-size: 31px; }
  .mm-lead, .mm-hero .mm-lead { font-size: 17px; }
  .mm-ctas { flex-direction: column; width: 100%; }
  .mm-ctas .mm-btn { width: 100%; }
  .mm-hero-visual { margin-top: 44px; padding-bottom: 72px; }
  .mm-blob { filter: blur(50px); }
  .mm-blob-1 { width: 260px; height: 260px; }
  .mm-blob-2 { width: 240px; height: 240px; }
  .mm-blob-3 { width: 200px; height: 160px; }
  .mm-sec { padding-block: 72px; }
  .mm-head { gap: 14px; }
  .mm-oldway { flex-direction: column; gap: 6px; }
  .mm-oldarrow { transform: rotate(90deg); }
  .mm-benefits, .mm-who { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }
    .mm-benefit, .mm-whocard { padding: 22px; flex-direction: row; align-items: flex-start; gap: 16px; }
  .mm-benefit .mm-icbox, .mm-whocard .mm-icbox { margin: 0; width: 46px; height: 46px; }
  .mm-ftabs { margin-top: 36px; gap: 20px; }
  .mm-tab { min-height: 62px; padding: 10px 16px; font-size: 17px; gap: 12px; }
  .mm-tab-ic { width: 36px; height: 36px; }
  .mm-titem::after { left: 16px; right: 16px; }
  .mm-tabbody { padding: 0 18px 24px; }
  .mm-tabmedia { padding: 16px; border-radius: 10px; }
  .mm-ticks li { font-size: 15px; }
  .mm-dp { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 36px; }
  .mm-dp-item { padding: 16px 18px; font-size: 15.5px; }
  .mm-prices { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; }
  .mm-extra { border-radius: 10px; text-align: left; }
  .mm-faq { margin-top: 36px; gap: 12px; }
  .mm-faq-col { gap: 12px; }
  .mm-q { font-size: 16px; min-height: 62px; padding: 14px 16px; }
  .mm-a { padding: 0 16px 18px; font-size: 15.5px; }
  .mm-cta { padding: 28px 18px 18px; border-radius: 10px; gap: 28px; }
  .mmf { padding: 20px; border-radius: 10px; }
  .mm-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-block: 56px 36px; }
  .mm-foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reduced motion: no animation at all ---------- */
@media (prefers-reduced-motion: reduce) {
  .mm *, .mm *::before, .mm *::after, .mmf, .mmf * { animation: none !important; transition: none !important; }
  .mm-anim .mm-rv { opacity: 1; transform: none; }
  .mm-par { transform: none !important; }
  .mm-hover:hover { transform: none; }
}

/* =========================================================
   MaxTheMatch additions
   ========================================================= */
[hidden] { display: none !important; }
html { scroll-behavior: auto; }
body { margin: 0; background: #FFFFFF; }

/* Burger: one icon at a time */
.mm-burger .mm-ic-close { display: none; }
.mm-nav.is-open .mm-burger .mm-ic-close { display: block; }
.mm-nav.is-open .mm-burger .mm-ic-open { display: none; }

/* Hero mockup: match list */
.mk-list { display: flex; flex-direction: column; gap: 10px; }
.mk-li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #FFFFFF; }
.mk-face { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #F6C2D4, #FBD7C4 60%, #F8E8A8); filter: blur(2.5px); }
.mk-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-name { font-size: 13.5px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-tag { font-size: 11px; font-weight: 600; color: var(--body); background: #F1F3F8; border-radius: 6px; padding: 1px 7px; }
.mk-fit { font-size: 11.5px; font-weight: 800; color: var(--blue-ink); background: var(--blue-soft); border-radius: 10px; padding: 3px 9px; white-space: nowrap; }
.mk-stat { display: flex; flex-direction: column; gap: 12px; }
.mk-srow { display: grid; grid-template-columns: 74px minmax(0, 1fr) 26px; gap: 10px; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--body); }
.mk-sbar { height: 9px; border-radius: 0 5px 5px 0; background: var(--blue); display: block; }
.mk-sbar-ok { background: var(--ok); }
.mk-sbar-wait { background: var(--warm); }
.mk-sbar-no { background: #D7DEEC; }
.mk-snum { text-align: right; color: var(--navy); }
@container mk (max-width: 420px) {
  .mk-li { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 8px; gap: 8px; }
  .mk-face { width: 30px; height: 30px; }
  .mk-tags .mk-tag:nth-child(n+2) { display: none; }
}

/* 2. Problem */
.mm-pains { list-style: none; margin: 56px auto 0; padding: 0; max-width: 860px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mm-pains li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mm-pain { display: flex; align-items: center; gap: 16px; padding: 20px 22px; font-size: 16.5px; font-weight: 600; color: var(--navy); line-height: 1.45; }
.mm-x { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #FDE8E8; color: var(--error); }
.mm-x .mm-ic { stroke-width: 2.6; }
.mm-punch { margin: 48px 0 0; text-align: center; color: var(--navy); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.mm-punch span { color: var(--blue-ink); background: #FDF6DA; padding: 0 0.2em; border-radius: 8px; }

/* 3. Grow: 3 columns, last card is a call to action */
.mm-benefits-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-benefit-cta { background: var(--navy); border-color: var(--navy); justify-content: space-between; }
.mm-benefit-cta .mm-h3 { color: #FFFFFF; font-size: 22px; }
.mm-benefit-cta .mm-p { color: rgba(255, 255, 255, 0.78); }
.mm-benefit-cta .mm-btn { align-self: flex-start; }
.mm-benefit-cta.mm-hover:hover { border-color: var(--navy); }

/* 5. Privacy: list beside a before/after preview */
.mm-priv { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mm-priv .mm-dp { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pv-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.pv-label { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pv-photo { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; position: relative; background: linear-gradient(150deg, #F6C2D4 0%, #FBD7C4 50%, #F8E8A8 100%); }
.pv-photo::after { content: ""; position: absolute; inset: 22% 28% 0; border-radius: 50% 50% 0 0; background: rgba(43, 43, 70, 0.28); }
.pv-blur .pv-photo { filter: blur(9px); transform: scale(1.04); }
.pv-photo:has(img)::after { display: none; }
.pv-photo img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pv-photo-wrap { border-radius: 10px; overflow: hidden; }
.pv-name { margin: 0; font-size: 17px; font-weight: 800; color: var(--navy); }
.pv-meta { margin: 0; font-size: 14px; font-weight: 600; color: var(--body); }
.pv-rows { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.pv-rows li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.pv-rows .mm-ic { flex-shrink: 0; }
.pv-hidden { color: var(--muted) !important; }
.pv-hidden .mm-ic { color: var(--muted); }
.pv-shown .mm-ic { color: var(--ok); }
.pv-tag { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 10px; }
.pv-tag-wait { background: var(--late-soft); color: var(--late); }
.pv-tag-ok { background: var(--ok-soft); color: var(--ok); }

/* 7. Who: 3 columns */
.mm-who-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 8. Pricing */
.mm-price [data-period="year"] { display: none; }
.mm-prices.is-yearly .mm-price [data-period="month"] { display: none; }
.mm-prices.is-yearly .mm-price [data-period="year"] { display: inline; }
.mm-plan-desc { margin: -10px 0 0; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.mm-plan-pop .mm-plan-desc { color: var(--on-blue); }

/* 9. Free setup form */
.mmf-ok[hidden] { display: none; }
.mmf-alt { margin: 0; font-size: 14px; color: var(--body); }
.mmf-alt a { color: var(--blue-ink); font-weight: 700; }

/* 11. Final CTA */
.mm-final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 760px; margin: 0 auto; }

/* Image slots: replace each .mm-ph with an <img> when screenshots are ready */
.mm-tabmedia .mm-ph { aspect-ratio: 16 / 10; }

@container mm (max-width: 960px) {
  .mm-benefits-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-who-3 { grid-template-columns: minmax(0, 1fr); }
  .mm-priv { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mm-punch { font-size: 23px; }
}
@container mm (max-width: 600px) {
  .mm-pains { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 36px; }
  .mm-pain { padding: 16px 18px; font-size: 15.5px; }
  .mm-benefits-3 { grid-template-columns: minmax(0, 1fr); }
  .mm-benefit-cta { flex-direction: column; }
  .mm-priv { margin-top: 36px; }
  .pv { gap: 10px; }
  .pv-card { padding: 12px; gap: 10px; }
  .pv-name { font-size: 15px; }
  .pv-rows li { font-size: 12.5px; }
  .mm-punch { font-size: 20px; margin-top: 36px; }
}

/* Real screenshots dropped into image slots */
.mm-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: var(--shadow); animation: mm-fade 0.5s var(--ease) both; }

/* Hero: inside .mm-hero-copy, text on the left and a square photo on the right; mockup below */
.mm-hero-copy { max-width: none; width: 100%; flex-direction: row; align-items: center; gap: 56px; text-align: left; }
.mm-hero-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.mm-hero-text .mm-h1 { font-size: 56px; }
.mm-hero-text .mm-ctas { justify-content: flex-start; }
.mm-hero-photo { position: relative; flex: 0 0 auto; width: 440px; margin: 0; }
.mm-hero-photo::before { content: ""; position: absolute; inset: 20px -16px -16px 20px; border-radius: 16px; background: linear-gradient(150deg, #D5668F, #EF946A 60%, #F0D368); opacity: 0.85; }
.mm-hero-photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 60px -28px rgba(43, 43, 70, 0.45); }
.mm-hero-badge {
  position: absolute; left: -22px; bottom: 28px; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 16px 36px -14px rgba(43, 43, 70, 0.35);
  color: var(--navy); font-size: 15px; font-weight: 800;
}
.mm-hero-badge-ic { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: var(--on-blue); }
.mm-hero-badge-ic .mm-ic { stroke-width: 2.4; }
@container mm (max-width: 1180px) {
  .mm-hero-text .mm-h1 { font-size: 48px; }
  .mm-hero-photo { width: 380px; }
}
@container mm (max-width: 960px) {
  .mm-hero-copy { flex-direction: column; gap: 44px; text-align: center; }
  .mm-hero-text { align-items: center; }
  .mm-hero-text .mm-ctas { justify-content: center; }
  .mm-hero-photo { width: min(420px, calc(100% - 16px)); }
}
@container mm (max-width: 600px) {
  .mm-hero-text { gap: 18px; }
  .mm-hero-text .mm-h1 { font-size: 38px; }
  .mm-hero-photo::before { inset: 12px -10px -10px 12px; }
  .mm-hero-badge { left: 10px; bottom: 12px; font-size: 13px; padding: 7px 12px 7px 7px; }
  .mm-hero-badge-ic { width: 26px; height: 26px; }
}

/* How it works on tablet/phone: screenshot above the step list */
@container mm (max-width: 960px) {
  .mm-ftabs .mm-tabmedia { order: -1; }
}

/* Problem: photo on the left, pains stacked on the right */
.mm-prob { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mm-prob .mm-pains { margin: 0; max-width: none; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mm-prob-photo { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(43, 43, 70, 0.45); }
.mm-prob-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@container mm (max-width: 960px) {
  .mm-prob { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mm-prob-photo { max-width: 520px; width: 100%; margin: 0 auto; }
}
@container mm (max-width: 600px) {
  .mm-prob { margin-top: 36px; gap: 24px; }
  .mm-prob .mm-pains { gap: 10px; }
}

/* hCaptcha widget in the free setup form */
.mmf-captcha { display: flex; flex-direction: column; gap: 6px; min-height: 78px; }