/* Matchcru brand layer. Official brand guide Option 1A "Flow mark":
   charcoal #1F2326, verdigris #43B3AE (primary), mint #A7E5DE, mint light #E6F7F4.
   Verdigris is never used for small text on light backgrounds (2.5:1); text links use
   --mc-verdigris-ink #217571 (5.5:1 on white). Buttons are verdigris with charcoal text (6.3:1). */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/website/fonts/nunito-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/website/fonts/nunito-sans-latin.woff2") format("woff2");
}

:root {
  --mc-charcoal: #1f2326;
  --mc-charcoal-2: #2b3135;
  --mc-verdigris: #43b3ae;
  --mc-verdigris-ink: #217571;
  --mc-mint: #a7e5de;
  --mc-mint-light: #e6f7f4;
  --mc-muted: #5a6669;
  /* Legacy variable names used by site.css, mapped onto the brand palette. */
  --teal: var(--mc-charcoal);
  --teal-2: var(--mc-charcoal-2);
  --mint: var(--mc-verdigris);
  --lime: var(--mc-verdigris);
  --cream: var(--mc-mint-light);
  --ink: var(--mc-charcoal);
  --muted: var(--mc-muted);
  --line: #cfe6e2;
}

body {
  background: #fff;
  color: var(--mc-charcoal);
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1, h2, h3, h4, .site-button, .site-nav-download, .store-button strong, .marquee {
  font-family: "Nunito", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1, h2 { font-weight: 900; letter-spacing: -0.02em; }
h3 { font-weight: 800; letter-spacing: -0.01em; }
.site-kicker, .eyebrow {
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* Small verdigris text on light backgrounds uses the darker, accessible ink. */
.site-kicker, .feature-card a, .section-heading > a, .breadcrumb, .legal-copy a, .article-grid small {
  color: var(--mc-verdigris-ink);
}
.feature-card.dark .site-kicker, .feature-card.dark a, .how-section .site-kicker,
.restore-hero .site-kicker, .restore-hero .breadcrumb, .site-footer a, .download-rally .site-kicker {
  color: inherit;
}
.restore-hero .site-kicker, .how-section .site-kicker { color: var(--mc-mint); }

/* Header: official side-by-side lockup on light. */
.site-header {
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid #d5e8e5;
}
.site-brand .brand-logo { display: block; width: auto; height: 40px; }
.site-header .site-brand sup { display: none; }
.site-rally, .marquee { color: var(--mc-charcoal); }
.site-nav-download { background: var(--mc-charcoal); color: #fff; }

/* Footer: charcoal with the stacked logo and tagline. */
.site-footer { background: var(--mc-charcoal); color: #cfdcda; }
.site-footer .footer-brand .site-brand { display: inline-block; }
.site-footer .brand-stacked { display: block; width: 200px; height: auto; margin-bottom: 14px; }
.site-footer strong { color: #fff; }
.site-footer a:hover { color: var(--mc-mint); }

/* Buttons: verdigris with charcoal text; dark buttons charcoal with white text. */
.site-button.lime { background: var(--mc-verdigris); color: var(--mc-charcoal); border-color: var(--mc-verdigris); }
.site-button.lime:hover { background: var(--mc-mint); border-color: var(--mc-mint); }
.site-button.dark-button { background: var(--mc-charcoal); color: #fff; }
.download-rally { background: var(--mc-mint-light); border-block: 1px solid #cfe6e2; }
.download-rally h2 { color: var(--mc-charcoal); }
.store-button { background: var(--mc-charcoal); color: #fff; }

/* ---------- Full-width layout ----------
   Every band runs edge to edge; content sits in one wide column (max 1360px)
   with side padding that scales from 20px (phone) to 64px (desktop). */
:root { --mc-max: 1360px; --mc-pad: clamp(20px, 5vw, 64px); --mc-band: clamp(64px, 7vw, 112px); }
.site-header, .site-rally, .site-section, .restore-hero, .restore-container, .download-rally, .site-footer,
.mc-hero-band, .legal-page {
  padding-inline: max(var(--mc-pad), calc((100% - var(--mc-max)) / 2));
}
.site-section { padding-block: var(--mc-band); }
.restore-container { width: 100%; max-width: none; margin: 0; padding-block: clamp(48px, 6vw, 88px); }
.restore-container .restore-container { padding-inline: 0; }
.legal-page { max-width: none; }
.legal-page > header, .legal-page > .legal-copy { max-width: 880px; }

/* Owner artwork has its words baked in: shown whole at its natural aspect ratio, never covered by text. */
.mc-banner, .mc-banner img { display: block; width: 100%; height: auto; }
.mc-banner img { background: var(--mc-mint-light); }
.mc-bleed { margin: 0; width: 100%; background: var(--mc-charcoal); }

/* Hero: full-bleed artwork, then a full-width charcoal band for the subtext and actions. */
.site-hero.mc-hero { display: block; min-height: 0; padding: 0; background: var(--mc-charcoal); overflow: visible; }
.site-hero.mc-hero::before, .site-hero.mc-hero::after { display: none; }
.mc-hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 48px;
  padding-block: clamp(28px, 3.5vw, 48px);
  background: var(--mc-charcoal);
  color: #fff;
}
.mc-hero-band > p { margin: 0; max-width: 760px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: #e6f7f4; }
.mc-hero-band .hero-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.mc-hero-band .hero-proof { grid-column: 1 / -1; margin: 0; color: #cfe6e2; }
.mc-hero-band .site-button.ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }

/* Alternating bands: white, mint light, charcoal, verdigris. */
.feature-intro { background: #fff; }
.home-ladders { background: var(--mc-mint-light); }
.how-section { background: var(--mc-charcoal); }
.story-preview { background: #fff; }
.journal-preview { background: var(--mc-mint-light); }
.download-rally {
  background: var(--mc-verdigris);
  border-block: 0;
  padding-block: clamp(56px, 6vw, 96px);
  align-items: center;
}
.download-rally h2, .download-rally p, .download-rally .site-kicker { color: var(--mc-charcoal); }
.marquee { border-block: 0; }

/* Feature cards fill the row: 4 across, 2x2 on tablet, stacked on phones. */
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.feature-grid .feature-card, .feature-grid .feature-card.wide { grid-column: auto; min-height: 340px; }
.feature-grid .feature-card.wide { background: var(--mc-mint-light); border-color: #cfe6e2; }
.region-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 1180px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .mc-hero-band { grid-template-columns: 1fr; }
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-rally { align-items: flex-start; }
}
@media (max-width: 640px) {
  .site-brand .brand-logo { height: 32px; }
  .feature-grid, .region-grid { grid-template-columns: 1fr; }
  .feature-grid .feature-card, .feature-grid .feature-card.wide { min-height: 0; }
  .mc-hero-band .hero-actions, .mc-hero-band .hero-actions .site-button { width: 100%; justify-content: center; }
  .site-footer .brand-stacked { width: 170px; }
}

/* Text on verdigris surfaces is always charcoal (6.3:1). */
.feature-card.lime-card, .feature-card.lime-card p, .feature-card.lime-card a, .feature-card.lime-card .feature-number,
.region-card:first-child, .region-card:first-child p, .region-card:first-child .eyebrow, .region-card:first-child span,
.moment-grid article:nth-child(2), .moment-grid article:nth-child(2) p, .feature-stat, .lime-card, .lime-card p, .lime-card a {
  color: var(--mc-charcoal);
}