/*
 * Shared styles for the static SEO marketing routes (#1216).
 *
 * These pages are served by Firebase Hosting as exact static files, which take
 * precedence over the SPA `**` catch-all rewrite, so they never boot Flutter
 * (the same mechanism #612 proved for /get; see docs/features/get-landing.md).
 *
 * The four BRAND colors below are the AppColors tokens from
 * lib/theme/app_colors.dart, and a drift guard
 * (test/release/seo_landing_pages_test.dart) parses both files and fails if
 * either side moves alone. Change a brand token in Dart and this file must
 * change in the same commit.
 *
 * The remaining hexes (--mdm-blue, --mdm-ink, --mdm-muted, --mdm-line,
 * --mdm-surface, --mdm-page, and the two :hover shades) are page-local and are
 * deliberately NOT AppColors tokens: these pages are a marketing surface, not
 * the app, and app_colors.dart has no neutral ramp for them. Nothing pins
 * those, which is stated here rather than implied away. --mdm-blue matches
 * web/get/index.html so the two static surfaces agree.
 *
 * Contrast, MEASURED in-browser against the WCAG AA floor (4.5:1 normal text,
 * 3:1 large), not estimated:
 *   ink        #2B3440 on white          12.59:1
 *   blue       #0E6E96 on white           5.69:1
 *   white      on blue #0E6E96            5.69:1
 *   muted      #5F6A75 on white           5.52:1
 *   onGreen    #06210F on green #1D9E75   5.03:1
 *   onGreen    #06210F on greenSurface   14.28:1
 *   greenFont  #1E7A40 on white           5.37:1
 *
 * TWO PAIRS ARE DELIBERATELY UNUSED:
 *   white     on the solid green fill is ~3.3:1. Never use it; that is why
 *             .mdm-btn-green labels are onGreen.
 *   greenFont on greenSurface measures 4.497:1, which FAILS the 4.5 floor for
 *             normal text by a hair. app_colors.dart pairs those two, and for
 *             larger app text that is fine, but the Pro card here sets small
 *             notes and check glyphs, so everything inside .mdm-plan-pro uses
 *             onGreen instead. Caught by measurement, not by eye.
 */

:root {
  /* AppColors.green - solid fill only, never a text color on white. */
  --mdm-green: #1d9e75;
  /* AppColors.greenFont - green text/icons on light surfaces. */
  --mdm-green-font: #1e7a40;
  /* AppColors.onGreen - the only text color permitted on the green fill. */
  --mdm-on-green: #06210f;
  /* AppColors.greenSurface - tonal green card background. */
  --mdm-green-surface: #dcf0e1;
  /* Primary blue, matching the app seed and web/get/index.html. */
  --mdm-blue: #0e6e96;

  --mdm-ink: #2b3440;
  --mdm-muted: #5f6a75;
  --mdm-line: #e3e8ee;
  --mdm-surface: #f5f8fa;
  --mdm-page: #ffffff;

  --mdm-radius: 14px;
  --mdm-maxw: 61rem;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background: var(--mdm-page);
  color: var(--mdm-ink);
  line-height: 1.55;
  font-size: 17px;
}

.mdm-shell {
  max-width: var(--mdm-maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Keyboard users must be able to see where they are. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--mdm-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.mdm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mdm-page);
  color: var(--mdm-blue);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  z-index: 10;
}
.mdm-skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.mdm-header {
  border-bottom: 1px solid var(--mdm-line);
  background: var(--mdm-page);
}

.mdm-header .mdm-shell {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

.mdm-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--mdm-blue);
  text-decoration: none;
  margin-right: auto;
}

.mdm-brand img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.mdm-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.mdm-nav a {
  color: var(--mdm-ink);
  text-decoration: none;
  font-size: 0.95rem;
  /* The hit box was the inline box, ~25px tall: one pixel over WCAG 2.5.8 and
     far under the 44px HIG target, sitting beside a correctly sized 44px CTA
     in the same component. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.mdm-nav a:hover {
  color: var(--mdm-blue);
  text-decoration: underline;
}

/* The active item was announced to assistive tech and invisible to everyone
   else. */
.mdm-nav a[aria-current="page"] {
  color: var(--mdm-blue);
  font-weight: 600;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.mdm-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 0.72rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  text-align: center;
}

.mdm-btn-primary {
  background: var(--mdm-blue);
  color: #ffffff;
}
.mdm-btn-primary:hover {
  background: #0b5c7e;
}

.mdm-btn-secondary {
  background: var(--mdm-page);
  color: var(--mdm-blue);
  border-color: var(--mdm-blue);
}
.mdm-btn-secondary:hover {
  background: #eef6fa;
}

/* Green fill: label uses onGreen, never white (white is ~3.3:1 on this fill). */
.mdm-btn-green {
  background: var(--mdm-green);
  color: var(--mdm-on-green);
}
.mdm-btn-green:hover {
  background: #17835f;
}

.mdm-btn-sm {
  padding: 0.5rem 1.1rem;
  font-size: 0.93rem;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.mdm-hero {
  padding: 3.25rem 0 2.5rem;
  text-align: center;
}

.mdm-hero h1 {
  font-size: clamp(1.85rem, 4.6vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  max-width: 26ch;
  margin: 0 auto;
  /* Progressive; browsers without it wrap normally. 22ch forced
     "for the whole / family", a one-word orphan line. */
  text-wrap: balance;
}

.mdm-lede {
  color: var(--mdm-muted);
  font-size: 1.08rem;
  max-width: 46ch;
  margin: 1rem auto 0;
  /* Centered explicitly: .mdm-hero sets text-align but .mdm-section does not,
     so this same class rendered centered in the hero and ragged-left in every
     closing section, under a centered h2 and above centered buttons. */
  text-align: center;
}

.mdm-cta-row {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.mdm-shot {
  margin: 2.5rem auto 0;
  width: min(280px, 74vw);
}

.mdm-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--mdm-radius);
  border: 1px solid var(--mdm-line);
  box-shadow: 0 10px 30px rgba(43, 52, 64, 0.11);
}

.mdm-shot figcaption {
  color: var(--mdm-muted);
  font-size: 0.83rem;
  margin-top: 0.7rem;
  text-align: center;
}

/* ── Value props ─────────────────────────────────────────────────────────── */

.mdm-section {
  padding: 2.75rem 0;
  border-top: 1px solid var(--mdm-line);
}

.mdm-section h2 {
  font-size: 1.45rem;
  text-align: center;
  margin-bottom: 1.75rem;
  text-wrap: balance;
}

.mdm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
}

.mdm-card {
  border: 1px solid var(--mdm-line);
  border-radius: var(--mdm-radius);
  padding: 1.3rem;
  background: var(--mdm-page);
}

.mdm-card h3 {
  font-size: 1.03rem;
  margin-bottom: 0.4rem;
}

.mdm-card p {
  color: var(--mdm-muted);
  font-size: 0.95rem;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */

.mdm-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1.15rem;
}

.mdm-plan {
  border: 1px solid var(--mdm-line);
  border-radius: var(--mdm-radius);
  padding: 1.6rem;
  background: var(--mdm-page);
  /* Let the feature list absorb the height difference so both CTAs land on one
     baseline. Free carries 7 bullets and Pro 6, so without this the free card
     stood 31px taller than the paid one on this page's money element. */
  display: flex;
  flex-direction: column;
}

.mdm-plan .mdm-feature-list {
  flex: 1;
}

.mdm-plan-pro {
  background: var(--mdm-green-surface);
  border-color: var(--mdm-green);
  border-width: 2px;
}

.mdm-plan h3 {
  font-size: 1.1rem;
  text-align: center;
}

.mdm-pill {
  display: inline-block;
  background: var(--mdm-green);
  color: var(--mdm-on-green);
  border-radius: 999px;
  padding: 0.24rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.mdm-price {
  text-align: center;
  margin: 0.85rem 0 0.15rem;
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mdm-price span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--mdm-muted);
}

/* Everything on the tonal-green Pro card uses onGreen, never greenFont: see
   the measured note in this file's header (greenFont on greenSurface is
   4.497:1 and misses the AA floor for normal text). */
.mdm-plan-pro .mdm-price span {
  color: var(--mdm-on-green);
}

.mdm-price-note {
  text-align: center;
  color: var(--mdm-muted);
  font-size: 0.92rem;
}

.mdm-plan-pro .mdm-price-note {
  color: var(--mdm-on-green);
}

.mdm-feature-list {
  margin: 1.25rem 0;
  display: grid;
  gap: 0.55rem;
}

.mdm-feature-list li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.96rem;
}

.mdm-feature-list li::before {
  content: "\2713";
  color: var(--mdm-green-font);
  font-weight: 700;
  flex: none;
}

.mdm-plan-pro .mdm-feature-list li::before {
  color: var(--mdm-on-green);
}

.mdm-plan .mdm-btn {
  display: block;
  width: 100%;
}

.mdm-fineprint {
  color: var(--mdm-muted);
  font-size: 0.86rem;
  text-align: center;
  margin-top: 1.5rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.mdm-footer {
  border-top: 1px solid var(--mdm-line);
  background: var(--mdm-surface);
  margin-top: 2.5rem;
  padding: 1.75rem 0;
}

.mdm-footer .mdm-shell {
  display: flex;
  gap: 0.6rem 1.4rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--mdm-muted);
}

.mdm-footer a {
  color: var(--mdm-muted);
  text-decoration: none;
}

.mdm-footer a:hover {
  color: var(--mdm-blue);
  text-decoration: underline;
}

/* The last conversion opportunity on the page was rendered identically to
   Privacy and Terms. */
.mdm-footer a[data-mdm-conversion] {
  color: var(--mdm-blue);
  font-weight: 600;
}

@media (max-width: 44rem) {
  .mdm-header .mdm-shell {
    justify-content: center;
    row-gap: 0.15rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  /* margin-right:auto stops doing anything once the row wraps, which left the
     CTA orphaned and left-aligned on a row of its own. */
  .mdm-brand {
    margin-right: 0;
  }
  .mdm-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}