@charset "UTF-8";
/* ---------- Palette (malla-style cream + earthy multicolor) ---------- */
/* Base */
.ml {
  min-height: 100dvh;
  background: #F5F1EA;
  color: #2A1A0F;
  font-family: "Work Sans", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.serif {
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Entrance: a single CSS-only fade on the whole page, capped at 300ms.
   Deliberately NOT scroll- or JS-triggered — Facebook's in-app webview on
   mid-range Androids fires IntersectionObserver late or never, which used to
   leave paid visitors staring at a blank cream page. Content must be visible
   the moment Vue mounts. */
.ml {
  animation: mlFadeIn 0.3s ease-out;
}

@keyframes mlFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ---------- Nav ---------- */
.ml-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  max-width: 1280px;
  margin: 0 auto;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, padding 0.35s ease;
}
.ml-nav.blur {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(245, 241, 234, 0.78);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
@media (max-width: 640px) {
  .ml-nav {
    padding: 0.85rem 1rem;
  }
}

.ml-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: #2A1A0F;
}

.ml-logo {
  height: 34px;
  width: auto;
  display: block;
}

.ml-nav-links {
  /* Stays visible on phones too — the header used to collapse to a lone logo,
     leaving no persistent way to convert. Text links still hide below 820px;
     the Get Started pill survives at every width. */
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.6rem);
}

.ml-nav-link {
  color: #2A1A0F;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  display: none;
  transition: color 0.2s ease;
}
@media (min-width: 820px) {
  .ml-nav-link {
    display: inline;
  }
}
.ml-nav-link.muted {
  color: #4A3328;
}
.ml-nav-link:hover {
  color: #7FA8D6;
}

/* ---------- Pill button ---------- */
.ml-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.78rem 1.4rem;
  border-radius: 999px;
  background: #B5DCFF;
  color: #2A1A0F;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 18px -10px rgba(127, 168, 214, 0.6);
  will-change: transform;
}
.ml-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 26px -14px rgba(127, 168, 214, 0.7);
}
.ml-pill:active {
  transform: translateY(0);
}
.ml-pill:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ml-pill-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.ml-pill-outline {
  background: transparent;
  border: 1.5px solid rgba(42, 26, 15, 0.3);
  box-shadow: none;
}
.ml-pill-outline:hover {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

.ml-pill-cta {
  padding: 1rem 1.6rem;
  font-size: 1rem;
  width: 100%;
}

.ml-ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #2A1A0F;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.ml-ghost-link:hover {
  border-bottom-color: #2A1A0F;
}

/* ---------- Hero ---------- */
.ml-hero {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.75rem, 4.5vw, 3.5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 6vw, 5rem);
  text-align: center;
}
@media (max-width: 640px) {
  .ml-hero {
    padding-top: 1rem;
  }
}

.ml-eyebrow {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: #4A3328;
  margin: 0 0 1rem;
}
.ml-eyebrow .serif {
  color: #7A4F2D;
}
.ml-eyebrow {
  /* On phones the H1 carries the ad's message match on its own — the eyebrow
     costs ~50px of a very tight first fold. */
}
@media (max-width: 640px) {
  .ml-eyebrow {
    display: none;
  }
}

.ml-trust-row {
  margin: 1.1rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.2rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: #4A3328;
}
.ml-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.ml-trust-row svg {
  color: #5B7028;
  width: 15px;
  height: 15px;
  flex: none;
}

.ml-audience {
  margin: 1.75rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A7C70;
}

.ml-display {
  /* ~40% down from the original clamp(3rem, 8.4vw, 7.2rem) — the oversized
     three-line headline used to consume the entire first screen and pushed
     both CTAs below the fold on every viewport. */
  font-size: clamp(1.85rem, 5vw, 4.3rem);
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 1.1rem;
}
.ml-display > span {
  display: block;
  line-height: 1.08;
  margin-block: 0.02em;
}
.ml-display .serif {
  color: #7A4F2D;
  line-height: 1.18;
  margin-top: 0.08em;
}

.ml-lede {
  max-width: 640px;
  margin: 0 auto 1.4rem;
  color: #4A3328;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

.ml-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ml-hero-cta .ml-pill {
  font-family: inherit;
}
@media (max-width: 480px) {
  .ml-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin: 0 auto;
    gap: 0.6rem;
  }
}

/* Hero deco SVG leaves */
.ml-deco {
  position: absolute;
  width: 180px;
  height: 180px;
  pointer-events: none;
  opacity: 0.85;
  filter: blur(0.4px);
  animation: floatY 8s ease-in-out infinite;
  /* The compact mobile fold has no spare room — the leaves end up on top of
     the lede copy. */
}
@media (max-width: 640px) {
  .ml-deco {
    display: none;
  }
}

.ml-deco-leaf-1 {
  top: 6%;
  left: -40px;
  transform: rotate(-18deg);
  animation-delay: -1s;
}

.ml-deco-leaf-2 {
  top: 12%;
  right: -30px;
  transform: rotate(28deg);
  animation: floatY 10s ease-in-out -3s infinite;
}

.ml-deco-leaf-3 {
  bottom: -40px;
  left: 8%;
  width: 130px;
  height: 130px;
  transform: rotate(46deg);
  animation: floatY 12s ease-in-out -2s infinite;
}

@keyframes floatY {
  0%, 100% {
    transform: translateY(0) rotate(var(--r, 0deg));
  }
  50% {
    transform: translateY(-22px) rotate(var(--r, 0deg));
  }
}
/* Floating product peek card */
.ml-peek {
  margin: clamp(2rem, 6vw, 4rem) auto 0;
  max-width: 980px;
  position: relative;
}

.ml-peek-screen {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  box-shadow: 0 40px 80px -40px rgba(42, 26, 15, 0.35), 0 14px 36px -18px rgba(42, 26, 15, 0.18);
  overflow: hidden;
  text-align: left;
}

.ml-peek-chrome {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: #FBF8F2;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.ml-peek-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #E8E1D5;
}
.ml-peek-chrome span:nth-child(1) {
  background: #C97A4D;
  opacity: 0.65;
}
.ml-peek-chrome span:nth-child(2) {
  background: #A9B670;
  opacity: 0.65;
}
.ml-peek-chrome span:nth-child(3) {
  background: #7FA8D6;
  opacity: 0.65;
}

.ml-peek-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 280px;
}
@media (max-width: 640px) {
  .ml-peek-body {
    grid-template-columns: 1fr;
  }
}

.ml-peek-side {
  background: #FBF8F2;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  padding: 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
@media (max-width: 640px) {
  .ml-peek-side {
    display: none;
  }
}

.ml-peek-side-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  font-size: 0.85rem;
  color: #2A1A0F;
}
.ml-peek-side-row:first-child {
  background: rgba(127, 168, 214, 0.18);
  font-weight: 600;
}
.ml-peek-side-row.muted {
  color: #8A7C70;
}

.ml-peek-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #7FA8D6;
}
.ml-peek-dot.dot-2 {
  background: #5B7028;
}
.ml-peek-dot.dot-3 {
  background: #C97A4D;
}
.ml-peek-dot.dot-4 {
  background: #7A4F2D;
}
.ml-peek-dot.dot-5 {
  background: #8A7C70;
}

.ml-peek-main {
  padding: 1.25rem 1.5rem 1.6rem;
}

.ml-peek-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: #8A7C70;
  margin: 0 0 0.75rem;
}

.ml-peek-prompt {
  min-height: 56px;
  padding: 0.85rem 1rem;
  background: #F5F1EA;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  font-size: 1rem;
  color: #2A1A0F;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .ml-peek-prompt {
    font-size: 0.9rem;
    padding: 0.7rem 0.85rem;
  }
}

.ml-typer {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ml-typer-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: #2A1A0F;
  margin-left: 2px;
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
.ml-peek-suggest {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  font-size: 0.88rem;
  color: #4A3328;
}
.ml-peek-suggest:hover {
  background: #F5F1EA;
}
.ml-peek-suggest svg {
  color: #7FA8D6;
}

/* ---------- Marquee ---------- */
.ml-marquee {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.4);
  padding: 1rem 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.ml-marquee-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 55s linear infinite;
  will-change: transform;
}

.ml-marquee-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-size: 0.95rem;
  color: #4A3328;
  font-weight: 500;
}
.ml-marquee-pill svg {
  color: #7FA8D6;
  width: 18px;
  height: 18px;
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/* ---------- Replaces the stack ---------- */
.ml-replaces {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
  text-align: center;
}

.ml-replaces-inner {
  max-width: 960px;
  margin: 0 auto;
}

.ml-replaces-list {
  margin: 1.75rem 0 1.25rem;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 2.2;
  color: #8A7C70;
}
.ml-replaces-list > span:first-child {
  color: #4A3328;
  font-weight: 600;
  margin-right: 0.5rem;
}

.ml-replaces-item {
  display: inline-block;
  margin: 0 0.5rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: rgba(74, 51, 40, 0.05);
  text-decoration: line-through;
  text-decoration-color: rgba(201, 122, 77, 0.7);
  text-decoration-thickness: 1.5px;
}

.ml-replaces-sum {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #2A1A0F;
}
.ml-replaces-sum .serif {
  color: #7A4F2D;
}

/* ---------- Features ---------- */
.ml-features {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) clamp(4rem, 10vw, 8rem);
  max-width: 1280px;
  margin: 0 auto;
}

.ml-features-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.ml-features-lede {
  margin: 0.9rem 0 0;
  color: #4A3328;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ml-features-lede .serif {
  color: #7A4F2D;
}

.ml-section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8A7C70;
  margin: 0 0 0.75rem;
}

.ml-section-h2 {
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-weight: 700;
  margin: 0 0 1rem;
}
.ml-section-h2 .serif {
  color: #7A4F2D;
}

.ml-feature-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ml-feature-card {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: 32px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.ml-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -40px rgba(42, 26, 15, 0.35);
}
.ml-feature-card.reverse .ml-feature-copy {
  order: 2;
}
.ml-feature-card.reverse .ml-feature-shot {
  order: 1;
}
@media (max-width: 760px) {
  .ml-feature-card {
    grid-template-columns: 1fr;
  }
  .ml-feature-card.reverse .ml-feature-copy, .ml-feature-card.reverse .ml-feature-shot {
    order: initial;
  }
}

.ml-feature-card.tone-sky {
  background: linear-gradient(180deg, #EAF3FF 0%, #fff 60%);
}

.ml-feature-card.tone-moss {
  background: linear-gradient(180deg, #EEF1DF 0%, #fff 60%);
}

.ml-feature-card.tone-rust {
  background: linear-gradient(180deg, #FBE9DB 0%, #fff 60%);
}

.ml-feature-card.tone-sand {
  background: linear-gradient(180deg, #F5ECDB 0%, #fff 60%);
}

.ml-feature-copy {
  padding: clamp(1rem, 2vw, 2rem);
}

.ml-feature-tag {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A7C70;
  margin: 0 0 0.9rem;
}

.ml-feature-copy h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
  font-weight: 700;
  text-wrap: balance;
}

.ml-feature-copy p {
  font-size: 1rem;
  line-height: 1.55;
  color: #4A3328;
  margin: 0;
  text-wrap: pretty;
}

.ml-feature-shot {
  position: relative;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  padding: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.ml-feature-shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  box-shadow: 0 18px 40px -22px rgba(42, 26, 15, 0.35);
}

/* ---------- Signup ---------- */
.ml-signup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 4vw, 3rem);
}
@media (max-width: 860px) {
  .ml-signup {
    grid-template-columns: 1fr;
  }
}

.ml-signup-lede {
  color: #4A3328;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.ml-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}
.ml-check-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #4A3328;
  font-size: 1rem;
}
.ml-check-list li svg {
  color: #5B7028;
}

.ml-card {
  background: #fff;
  border-radius: 28px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 50px 80px -50px rgba(42, 26, 15, 0.35);
}

.ml-card-head {
  text-align: center;
  margin-bottom: 1.4rem;
}

.ml-card-head h3 {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
  letter-spacing: -0.015em;
  font-weight: 700;
}

.ml-card-head p {
  margin: 0;
  color: #8A7C70;
  font-size: 0.9rem;
}

.ml-plan-toggle {
  display: grid;
  grid-template-columns: repeat(var(--toggle-cols, 3), 1fr);
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 520px) {
  .ml-plan-toggle {
    grid-template-columns: 1fr;
  }
}
.ml-plan-toggle button {
  position: relative;
  padding: 0.85rem 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #F5F1EA;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}
.ml-plan-toggle button:hover {
  transform: translateY(-1px);
}
.ml-plan-toggle button.active {
  border-color: #7FA8D6;
  background: #fff;
  box-shadow: 0 6px 18px -10px rgba(127, 168, 214, 0.45);
}

.ml-plan-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.ml-plan-price {
  color: #4A3328;
  font-size: 0.95rem;
}
.ml-plan-price small {
  color: #8A7C70;
}

.ml-plan-badge {
  position: absolute;
  top: -8px;
  right: 10px;
  background: #B5DCFF;
  color: #2A1A0F;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.ml-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ml-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4A3328;
  margin-bottom: -0.2rem;
}

.ml-optional {
  color: #8A7C70;
  font-weight: 400;
  margin-left: 0.35rem;
}

input[type=email], input[type=password], input[type=text] {
  width: 100%;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #F5F1EA;
  font-size: 1rem;
  color: #2A1A0F;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
input[type=email]:focus, input[type=password]:focus, input[type=text]:focus {
  outline: none;
  background: #fff;
  border-color: #7FA8D6;
  box-shadow: 0 0 0 4px rgba(127, 168, 214, 0.18);
}

/* Affiliate code box in the signup card. The card body is centre-aligned on
   narrow viewports, so the field re-asserts left alignment for its label. */
.ml-affiliate-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Matches .ml-plan-toggle's 1.25rem above it, so the field sits on the
     card's rhythm instead of crowding the trial button. */
  margin: 0 0 1.25rem;
  text-align: left;
}
.ml-code-input {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ml-code-input::placeholder {
  letter-spacing: normal;
}

.ml-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.1rem 0;
  color: #8A7C70;
  font-size: 0.85rem;
}
.ml-or::before, .ml-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.ml-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #2A1A0F;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ml-google:hover {
  background: #F5F1EA;
}
.ml-google:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ml-google-icon {
  width: 18px;
  height: 18px;
}

.ml-email-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #F5F1EA;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  color: #4A3328;
  margin: 0;
  align-self: flex-start;
}

.ml-edit {
  background: transparent;
  border: 0;
  color: #7FA8D6;
  font-weight: 600;
  cursor: pointer;
  margin-left: 0.3rem;
  text-decoration: underline;
}

.ml-error {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  color: #b3261e;
}
.ml-error a {
  color: #7FA8D6;
  margin-left: 0.4rem;
}

.ml-fineprint {
  margin: 1.1rem 0 0;
  font-size: 0.78rem;
  color: #8A7C70;
  text-align: center;
  line-height: 1.5;
}

/* ---------- Pricing ---------- */
.ml-pricing {
  padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 4vw, 3rem);
  max-width: 1180px;
  margin: 0 auto;
}

.ml-pricing-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.ml-pricing-head .ml-section-eyebrow {
  display: block;
}

.ml-tier-grid {
  display: grid;
  grid-template-columns: repeat(var(--tier-cols, 3), minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .ml-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .ml-tier-grid {
    grid-template-columns: 1fr;
  }
}

.ml-tier {
  position: relative;
  background: #fff;
  border-radius: 28px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.ml-tier:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 60px -40px rgba(42, 26, 15, 0.35);
}
.ml-tier.featured {
  background: linear-gradient(180deg, #EAF3FF 0%, #fff 70%);
  border-color: rgba(127, 168, 214, 0.45);
}
.ml-tier h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.ml-tier ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  flex: 1;
}
.ml-tier ul li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #4A3328;
  font-size: 0.95rem;
}
.ml-tier ul li svg {
  color: #5B7028;
}

.ml-tier-badge {
  position: absolute;
  top: -10px;
  right: 18px;
  background: #B5DCFF;
  color: #2A1A0F;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.ml-tier-price {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ml-tier-price span {
  font-size: 1rem;
  color: #8A7C70;
  font-weight: 500;
  margin-left: 0.25rem;
}

/* ---------- FAQ ---------- */
.ml-faq {
  padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 4vw, 3rem);
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 860px) {
  .ml-faq {
    grid-template-columns: 1fr;
  }
}

.ml-faq-side-lede {
  color: #8A7C70;
  max-width: 32ch;
}

.ml-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ml-faq-row {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0 1.2rem;
  transition: background 0.3s ease;
}
.ml-faq-row summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2A1A0F;
}
.ml-faq-row summary::-webkit-details-marker {
  display: none;
}
.ml-faq-row p {
  padding: 0 0 1.1rem;
  margin: 0;
  color: #4A3328;
  line-height: 1.55;
  font-size: 0.98rem;
}
.ml-faq-row[open] {
  background: #F5F1EA;
}
.ml-faq-row[open] .ml-faq-icon {
  transform: rotate(45deg);
}

.ml-faq-icon {
  width: 24px;
  height: 24px;
  color: #8A7C70;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Final CTA ---------- */
.ml-final {
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem);
  max-width: 1180px;
  margin: 0 auto;
}

.ml-final-card {
  position: relative;
  text-align: center;
  background: linear-gradient(160deg, #EAF3FF 0%, #F5F1EA 60%, #FBE9DB 100%);
  border-radius: 36px;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.ml-final-card .ml-final-eyebrow {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 500;
  color: #4A3328;
  margin: 0 0 1rem;
  letter-spacing: -0.005em;
}
.ml-final-card .ml-final-eyebrow .serif {
  color: #7A4F2D;
}
.ml-final-card h2 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  font-weight: 700;
  margin: 0 0 1rem;
}
.ml-final-card h2 .serif {
  color: #7A4F2D;
}
.ml-final-card p {
  max-width: 540px;
  margin: 0 auto 2rem;
  color: #4A3328;
  font-size: 1.05rem;
  line-height: 1.55;
}

.ml-final-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ml-final-actions .ml-pill {
  font-family: inherit;
}
@media (max-width: 480px) {
  .ml-final-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin: 0 auto;
    gap: 0.6rem;
  }
}

/* ---------- Footer ---------- */
.ml-foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8A7C70;
  font-size: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ml-foot a {
  color: #4A3328;
  text-decoration: none;
}
.ml-foot a:hover {
  color: #7FA8D6;
}
.ml-foot {
  /* Clear the fixed bottom CTA bar on mobile. */
}
@media (max-width: 820px) {
  .ml-foot {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Sticky CTA — full-width bar on mobile, floating pill on desktop ---------- */
.ml-sticky-cta {
  position: fixed;
  z-index: 60;
  right: 1.5rem;
  bottom: 1.5rem;
}
.ml-sticky-cta .ml-pill {
  padding: 0.95rem 1.6rem;
  font-size: 1rem;
  font-family: inherit;
  box-shadow: 0 16px 38px -14px rgba(42, 26, 15, 0.55);
}
@media (max-width: 820px) {
  .ml-sticky-cta {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(245, 241, 234, 0.94);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -8px 24px -18px rgba(42, 26, 15, 0.4);
  }
  .ml-sticky-cta .ml-pill {
    width: 100%;
    padding: 0.95rem 1.4rem;
    box-shadow: none;
  }
}

/* ---------- Calendly modal ---------- */
.ml-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(42, 26, 15, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
@media (max-width: 640px) {
  .ml-modal {
    padding: 0;
    align-items: flex-end;
  }
}

.ml-modal-box {
  position: relative;
  width: min(1020px, 100%);
  height: min(720px, 92dvh);
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(42, 26, 15, 0.5);
}
@media (max-width: 640px) {
  .ml-modal-box {
    height: 94dvh;
    border-radius: 18px 18px 0 0;
  }
}

.ml-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #F5F1EA;
  color: #2A1A0F;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ml-modal-close svg {
  width: 22px;
  height: 22px;
}
.ml-modal-close:hover {
  background: #EBE6DC;
}

.ml-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Calendly injects its own wrapper + iframe — stretch them to the box. */
}
.ml-modal-body .calendly-inline-widget {
  width: 100%;
  height: 100%;
  min-width: 0 !important;
}
.ml-modal-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.ml-modal-loading {
  color: #8A7C70;
  font-size: 0.95rem;
  margin: 0;
}

.ml-modal-fallback {
  margin: 0;
  padding: 0.55rem 1rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.8rem;
  color: #8A7C70;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ml-modal-fallback a {
  color: #7FA8D6;
  text-decoration: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ml {
    animation: none;
  }
  .ml-deco {
    animation: none;
  }
  .ml-marquee-track {
    animation: none;
  }
  .ml-typer-cursor {
    animation: none;
  }
}

/* ==========================================================================
   Static-port adjustments
   --------------------------------------------------------------------------
   Everything above is pages/get-started.vue's <style> block compiled by sass.
   The rules below cover the places where the static page's markup differs
   from the Vue original, and only those.

   In the app, the plan switcher and the Google button are <button>s driving
   local state. Here there is no state to drive — each one is a link into
   app.supplementpractice.com — so the same styling is re-pointed at the
   anchor classes. Semantics stay correct (a thing that navigates is a link);
   only the selector changes.
   ========================================================================== */

.ml-plan-toggle .ml-plan-opt {
  position: relative;
  padding: 0.85rem 0.9rem;
  border-radius: 18px;
  border: 1px solid rgb(0 0 0 / 8%);
  background: #F5F1EA;
  text-align: left;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}

.ml-plan-toggle .ml-plan-opt:hover {
  transform: translateY(-1px);
  border-color: #7FA8D6;
  background: #fff;
  box-shadow: 0 6px 18px -10px rgb(127 168 214 / 45%);
}

/* The "or / book a demo" affordance keeps the Google-button shell. */
.ml-google { text-decoration: none; }

/* Tier and signup CTAs are anchors here, not submit buttons. */
a.ml-pill-cta { text-decoration: none; }

/* The hero prompt animates via JS in the app (a character-by-character
   typer). Static gets the finished string plus the blinking caret, so the
   card doesn't look mid-render to a first-time visitor. */
[data-ml-typer] { white-space: pre-wrap; }

@media (prefers-reduced-motion: reduce) {
  .ml-marquee-track { animation: none; }
  .ml-deco { animation: none; }
}

/* --------------------------------------------------------------------------
   Mobile navigation.

   In the app, this page is a single-purpose ad landing page, so .ml-nav-link
   is display:none below 820px — there is nowhere else to go. As the site
   homepage it carries real site navigation (Insights, About, Support), and
   hiding that on phones would strand mobile visitors on one page. The links
   wrap onto a second row instead.
   -------------------------------------------------------------------------- */
@media (max-width: 819px) {
  .ml-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.9rem;
  }

  .ml-nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    width: 100%;
  }

  .ml-nav-link {
    display: inline-flex;
    align-items: center;
    /* 44px tall touch targets without making the row look padded out. */
    min-height: 44px;
    font-size: 0.88rem;
  }
}

/* --------------------------------------------------------------------------
   Heading alignment.

   The Webflow export ships a bare `h3 { text-align: center }`, which loads
   before this file. No such rule exists in the app, so on /get-started the
   feature-card titles sit left while here they were centring against
   left-aligned body copy.

   `inherit` restores the app's behaviour exactly: headings take alignment
   from their container, so the deliberately-centred blocks (.ml-hero,
   .ml-pricing-head, .ml-card-head, .ml-final-card) still centre, and
   everything else reads left.
   -------------------------------------------------------------------------- */
.ml h1, .ml h2, .ml h3, .ml h4, .ml h5, .ml h6 {
  text-align: inherit;
}

/* --------------------------------------------------------------------------
   Modal visibility.

   In the app the modal is rendered with v-if, so "closed" means "not in the
   DOM". The static port keeps one modal element and toggles [hidden] — but
   `.ml-modal { display: flex }` above beats the UA's `[hidden] { display:
   none }`, so closing it emptied the box without hiding it and left a dead
   panel over the page. Specificity here (0,2,0) settles it without
   !important.
   -------------------------------------------------------------------------- */
.ml-modal[hidden] { display: none; }