/* =====================================================================
   Meaningful Planet — Colors & Type
   Single source of truth for brand tokens. Import this in any HTML:
     <link rel="stylesheet" href="colors_and_type.css" />
   ===================================================================== */

/* Self-hosted Figtree — brand-approved static files */
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-Light.ttf') format('truetype');        font-weight:300; font-style:normal;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-LightItalic.ttf') format('truetype');  font-weight:300; font-style:italic;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-Regular.ttf') format('truetype');      font-weight:400; font-style:normal;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-Italic.ttf') format('truetype');       font-weight:400; font-style:italic;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-Medium.ttf') format('truetype');       font-weight:500; font-style:normal;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-SemiBold.ttf') format('truetype');     font-weight:600; font-style:normal;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-Bold.ttf') format('truetype');         font-weight:700; font-style:normal;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-BoldItalic.ttf') format('truetype');   font-weight:700; font-style:italic;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-ExtraBold.ttf') format('truetype');    font-weight:800; font-style:normal;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-Black.ttf') format('truetype');        font-weight:900; font-style:normal;  font-display:swap; }
@font-face { font-family:'Figtree'; src:url('fonts/Figtree-BlackItalic.ttf') format('truetype');  font-weight:900; font-style:italic;  font-display:swap; }

/* Display serif + hub serif still loaded from Google Fonts — no brand files uploaded */
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- Core colors ---------- */
  --mp-deep-forest: #1e4136;   /* primary text & buttons */
  --mp-cream:       #eae8dd;   /* borders, dividers */
  --mp-bright-lime: #99efae;   /* accent circles, highlights */
  --mp-ember:       #cf4c00;   /* attention / warning — sparingly */
  --mp-charcoal:    #3e3e39;   /* secondary headings, icon text on light */
  --mp-warm-gray:   #74746c;   /* tertiary body, captions */
  --mp-warm-white:  #f9f8f4;   /* soft background */

  /* ---------- Extended / additional ---------- */
  --mp-moss:        #032D10;   /* deep dark green — high-contrast bgs */
  --mp-pine:        #256751;   /* mid-tone green — links, supporting UI */
  --mp-sapling:     #D2FF85;   /* vivid lime — CTAs on dark, data-viz */
  --mp-mist:        #C4F5DC;   /* pale mint — stat cards, info panels */
  --mp-chalk:       #F8F3EC;   /* warm neutral bg — email, alt sections */
  --mp-clay:        #D98042;   /* warm warning accent — very sparingly */
  /* Readable inks and tints derived from the accents above. Clay is the one
     warning colour in the platform; there is no amber family. */
  --mp-clay-ink:    #8a4b17;   /* clay text on a clay tint — passes AA */
  --mp-clay-tint:   rgba(217,128,66,0.14);
  --mp-clay-tint-soft: rgba(217,128,66,0.10);
  --mp-clay-line:   rgba(217,128,66,0.30);
  --mp-ember-ink:   #a53d00;   /* ember text on an ember tint */
  --mp-ember-tint:  rgba(207,76,0,0.10);
  --mp-sand-ink:    #5d5334;   /* sand text on a sand tint */
  --mp-sand-tint:   rgba(196,178,136,0.24);
  --warn-bg:        var(--mp-clay-tint);
  --warn-ink:       var(--mp-clay-ink);
  --focus-pine:     rgba(37,103,81,0.12);
  --mp-grove:       #021B11;   /* deepest dark — footers, overlays */

  /* ---------- Gradient-only stops ---------- */
  --mp-dark-teal:    #1b342c;
  --mp-deep-teal:    #2a5c4a;
  --mp-medium-teal:  #509a82;
  --mp-light-teal:   #94ceb7;

  /* ---------- Semantic foreground colors ---------- */
  --fg-1: var(--mp-deep-forest); /* primary text on light */
  --fg-2: var(--mp-charcoal);    /* secondary */
  --fg-3: var(--mp-warm-gray);   /* tertiary / muted body */
  --fg-on-dark-1: #ffffff;
  --fg-on-dark-2: var(--mp-cream);
  --fg-on-dark-3: rgba(255,255,255,0.6);

  /* ---------- Semantic backgrounds ---------- */
  --bg-1: #ffffff;                 /* primary page background */
  --bg-2: var(--mp-warm-white);    /* alternating section */
  --bg-3: var(--mp-chalk);         /* social proof / email body */
  --bg-dark-1: var(--mp-moss);     /* hero, feature banners */
  --bg-dark-2: var(--mp-grove);    /* footers */

  /* ---------- Semantic accents ---------- */
  --accent-on-light: var(--mp-deep-forest);
  --accent-on-dark:  var(--mp-sapling);
  --accent-highlight: var(--mp-bright-lime); /* circles, stat badges */
  --accent-mist:      var(--mp-mist);
  --accent-warn:      var(--mp-ember);

  /* ---------- Borders ---------- */
  --border-subtle: var(--mp-cream);
  --border-on-dark: rgba(255,255,255,0.12);
  --border-strong: rgba(30,65,54,0.2);

  /* ---------- Gradients ---------- */
  --grad-hero-dark:  linear-gradient(153.3deg, #1b342c 18.9%, #509a82 105.4%);
  --grad-feature-mint: linear-gradient(160.9deg, #99efae 7.3%, #94ceb7 109.8%);
  --grad-brand-line: linear-gradient(90deg, #256751 0%, #D2FF85 50%, #256751 100%);
  --grad-card-accent: linear-gradient(90deg, #256751 0%, #D2FF85 100%);

  /* ---------- Shadows ---------- */
  --shadow-card: 0 4.5px 9.3px rgba(35,45,92,0.04), 0 1.6px 3.4px rgba(35,45,92,0.02);
  --shadow-card-hover: 0 10px 24px rgba(35,45,92,0.08), 0 3px 6px rgba(35,45,92,0.04);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.04);

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;     /* buttons */
  --radius-xl: 20px;     /* cards */
  --radius-2xl: 24px;    /* large cards */
  --radius-rounded-section: 40px; /* breakout gradient sections */
  --radius-pill: 999px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Type ---------- */
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif-display: 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-serif-hub: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------- Icon ---------- */
  --icon-stroke: 1.75px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 28px;
  --icon-container: 52px; /* feature icon box */

  /* ---------- Container ---------- */
  --container-narrow: 700px;
  --container-default: 1000px;
  --container-wide: 1200px;
}

/* =====================================================================
   Base type
   ===================================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-1);
  background: var(--bg-1);
}

/* Website display headlines (PT Serif) — website only */
.mp-display,
h1.mp-display, h2.mp-display, h3.mp-display {
  font-family: var(--font-serif-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg-1);
}

/* Semantic heading scale (sans — the default inside Milo / emails / UI) */
h1, .mp-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
h2, .mp-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.25;
  color: var(--fg-1);
}
h3, .mp-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1.3;
  color: var(--fg-1);
}
h4, .mp-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1.35;
  color: var(--fg-1);
}

p, .mp-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-2);
}

.mp-body-sm { font-size: 15px; line-height: 1.6; color: var(--fg-3); }
.mp-caption {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.mp-label {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}
.mp-eyebrow {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
}

code, kbd, .mp-mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
}

/* =====================================================================
   Utility classes
   ===================================================================== */
.mp-card {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* ---------- CTAs (Title Case enforced) ----------
   All button labels MUST be written in Title Case.
   Belt-and-braces: text-transform:capitalize ensures even sentence-case copy
   renders with capital initials. Author copy in Title Case ("Get A Quote",
   "See Milo In Action") — don't rely on the transform alone, because words
   like "of/in/on" should stay lowercase in proper Title Case. */
.mp-btn-primary,
.mp-btn-secondary,
.mp-btn-on-dark-primary,
.mp-btn-on-dark-secondary {
  text-transform: capitalize;
  letter-spacing: 0.005em;
}

.mp-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold); font-size: 18px;
  background: var(--fg-1); color: #fff;
  border: none; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
}
.mp-btn-primary:hover { filter: brightness(1.1); }

.mp-btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold); font-size: 18px;
  background: transparent; color: var(--fg-1);
  border: 2px solid var(--border-strong); border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
}
.mp-btn-secondary:hover { background: rgba(30,65,54,0.05); }

.mp-btn-on-dark-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold); font-size: 18px;
  background: #fff; color: var(--fg-1);
  border: none; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
}
.mp-btn-on-dark-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold); font-size: 18px;
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.2); border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
}

.mp-icon-box {
  width: var(--icon-container); height: var(--icon-container);
  border-radius: 10px;
  background: rgba(27,52,44,0.1);
  color: var(--fg-1);
  display: inline-flex; align-items: center; justify-content: center;
}

.mp-stat-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--mp-bright-lime); color: var(--fg-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
}