/* Design tokens — read from the source's own custom properties and theme CSS
   (www.memberspace.com: Astra 4.13.4 + Elementor 4.3.2, kit id 5), never from the px a
   value happens to compute to at 1440. Every colour/type/spacing value in components
   should reference a token here.

   Where they come from (public/index.html, the homepage snapshot):
   - .elementor-kit-5 { --e-global-color-* }         → --color-* (kit globals)
   - :root { --ast-global-color-0..8 }                → --ast-* (Astra globals)
   - astra-theme-css-inline-css                      → type scale, link colours, button base
   - elementor-frontend-inline-css (.e-con, kit)      → container widths, widget spacing
   - wp-custom-css                                    → h2 36px override

   Breakpoints (two systems, both live on the source):
   - Elementor: tablet ≤1024px, mobile ≤767px  (container widths, per-widget CSS)
   - Astra:     ≤1000px (header swaps to the mobile header at 1000.99; type steps down),
                ≤544px (second type step)
   CSS custom properties can't be used inside @media conditions, so components write the
   literal breakpoints — use exactly these four numbers. */
:root {
  /* ---- Colour: Elementor kit globals (verbatim names in comments) ---- */
  --color-primary: #222222; /* --e-global-color-primary */
  --color-secondary: #888888; /* --e-global-color-secondary */
  --color-text: #222222; /* --e-global-color-text */
  --color-accent: #c63882; /* --e-global-color-accent (kit) — note: Astra/buttons use #c73882 */
  --color-grey-dd: #dddddd; /* 32b236a */
  --color-grey-ee: #eeeeee; /* 5e130d8 */
  --color-grey-cc: #cccccc; /* e9152f8 */
  --color-blue: #2a7ff4; /* ae33118 */
  --color-yellow: #ecb92e; /* 8e4da02 */
  --color-cyan: #75e4eb; /* bd19af3 */
  --color-cyan-pale: #cfeef8; /* faf3e9b */
  --color-tint-blue: #e9f2fe; /* 63c1055 */
  --color-tint-pink: #fbeaf2; /* eb2d516 */
  --color-tint-yellow: #fdf8eb; /* 7b5e8a0 */
  --color-tint-cyan: #f2fcfd; /* fda38f1 */

  /* ---- Colour: Astra globals ---- */
  --ast-0: #c73882; /* brand pink — links, button base, big CTAs */
  --ast-1: #222222; /* headings/body text, button hover bg, link hover */
  --ast-2: #3a3a3a;
  --ast-3: #4b4f58;
  --ast-4: #f5f5f5;
  --ast-5: #ffffff;
  --ast-6: #f2f5f7;
  --ast-7: #424242;
  --ast-8: #000000;

  --color-page: #ffffff;
  --color-ink: var(--ast-1);
  --color-link: var(--ast-0);
  --color-link-hover: var(--ast-1);
  --color-cta: #c73882; /* big CTA button bg (per-widget, = --ast-0) */
  --color-cta-hover: #d84491; /* big CTA hover/focus bg */
  --color-border-button: #bbbbbb; /* "Learn more" / "See more stories" outline */

  /* ---- Type (Astra) ---- */
  --font-sans: "Lato", sans-serif;
  --root-size: 112.5%; /* html { font-size: 112.5% } → 1rem = 18px */
  --text-body: 1rem; /* 18px desktop; 17px (0.944444444444rem) at ≤1000px */
  --leading-body: 1.85714285714286; /* Astra main.css body line-height */
  --weight-body: 400;
  --weight-heading: 800; /* Astra h1–h6 (renders on Lato's 900 face: only 400 + 900 load) */
  /* Astra heading scale — desktop / ≤1000 / ≤544. Elementor heading widgets override per element. */
  --text-h1: 50px; /* 40px ≤1000, 36px ≤544; line-height 1.4em */
  --text-h2: 36px; /* wp-custom-css (Astra's own 45px/32/28 is overridden at every width); lh 1.3em */
  --text-h3: 32px; /* 26px ≤1000, 22px ≤544; lh 1.3em */
  --text-h4: 22px; /* 20px ≤1000, 18px ≤544; lh 1.2em */
  --text-h5: 18px; /* 17 / 15; lh 1.2em */
  --text-h6: 16px; /* 15 / 14; lh 1.25em */

  /* ---- Layout (Elementor) ---- */
  --container-max: 1300px; /* .e-con --container-max-width; 1024px ≤1024, 767px ≤767 */
  --container-pad: 10px; /* default e-con inline padding */
  --widgets-gap: 20px; /* .elementor-element --widgets-spacing */

  /* ---- Buttons (Astra base + Elementor per-widget) ---- */
  --button-radius: 3px;
  --button-pad: 10px 20px;
  --button-radius-cta: 10px;
  --button-pad-cta: 30px 35px;
  --button-radius-accent: 5px;

  /* ---- Modern landing pages (alternatives template, 2026-10) ----
     Native additions, not from the WordPress source: the comparison landing pages
     (src/components/alternatives/) use these for cards, sections and display type. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(34, 34, 34, 0.06), 0 8px 24px rgba(34, 34, 34, 0.07);
  --shadow-lift: 0 24px 60px rgba(34, 34, 34, 0.16);
  --section-space: clamp(64px, 9vw, 120px); /* vertical rhythm between landing-page bands */
  --content-narrow: 820px; /* reading width for headings, intros, FAQs */
  --text-display: clamp(38px, 5.4vw, 64px); /* the big landing-page headline */
  --text-eyebrow: 15px; /* small uppercase top line above a headline */
  --text-lede: clamp(19px, 1.6vw, 22px); /* intro paragraph under a headline */
  --color-ink-soft: var(--ast-3); /* secondary text on light backgrounds */
  --color-tint-pink-soft: #fefbfd; /* lighter than --color-tint-pink, so pink marks on it stay crisp */
  --color-navy: #081d30; /* brand dark navy (owner's pick, 2026-10-14) */
  --color-dark: var(--color-navy); /* dark band background */
  --color-blue-line: #adcffd; /* hairline under a light-blue hero (the /squarespace/ hero, e-section 3047f08b) */
  /* ---- Shared money-back guarantee callout (pricing + demo snapshots) ---- */
  --guarantee-gap: 16px;
  --guarantee-padding: 20px 24px;
  --guarantee-padding-mobile: 18px 16px;
  --guarantee-icon-size: 48px;
  --guarantee-icon-art-size: 30px;
  --guarantee-copy-gap: 4px;
  --guarantee-leading: 1.5;
  --guarantee-pricing-width: 700px;
  --guarantee-demo-width: 70%;
  --guarantee-demo-mobile-width: 334px;

  /* ---- Inline pricing questions ---- */
  --pricing-questions-text: 16px;

}

@media (max-width: 1024px) {
  :root {
    --container-max: 1024px;
  }
}
@media (max-width: 1000px) {
  :root {
    --text-body: 0.944444444444rem; /* 17px */
    --text-h1: 40px;
    --text-h3: 26px;
    --text-h4: 20px;
    --text-h5: 17px;
    --text-h6: 15px;
  }
}
@media (max-width: 767px) {
  :root {
    --container-max: 767px;
  }
}
@media (max-width: 544px) {
  :root {
    --text-h1: 36px;
    --text-h3: 22px;
    --text-h4: 18px;
    --text-h5: 15px;
    --text-h6: 14px;
  }
}


/* Shared HTML/CSS component for legacy snapshots and MoneyBackGuarantee.astro.
   Scoped classes avoid changing plan cards, video, or the embedded signup form. */
.ms-guarantee,
.ms-guarantee * {
  box-sizing: border-box;
}
.ms-guarantee {
  display: flex;
  align-items: center;
  gap: var(--guarantee-gap);
  padding: var(--guarantee-padding);
  border-radius: var(--radius-md);
  background: var(--color-tint-pink);
  color: var(--color-ink);
  font-family: inherit;
  text-align: left;
}
.ms-guarantee--pricing {
  width: min(var(--guarantee-pricing-width), 100%);
  margin: var(--widgets-gap) auto 0;
}
.ms-guarantee--demo {
  width: var(--guarantee-demo-width);
  margin: var(--widgets-gap) auto 0;
  align-self: center;
}
.ms-guarantee .ms-guarantee__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--guarantee-icon-size);
  width: var(--guarantee-icon-size);
  height: var(--guarantee-icon-size);
  border-radius: var(--radius-pill);
  background: var(--color-page);
  color: var(--color-accent);
}
.ms-guarantee .ms-guarantee__icon svg {
  display: block;
  width: var(--guarantee-icon-art-size);
  height: var(--guarantee-icon-art-size);
}
.ms-guarantee .ms-guarantee__copy {
  min-width: 0;
}
.ms-guarantee .ms-guarantee__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-h5);
  line-height: var(--guarantee-leading);
  font-family: inherit;
}
.ms-guarantee .ms-guarantee__title strong {
  font-weight: var(--weight-heading);
}
.ms-guarantee .ms-guarantee__text {
  margin: var(--guarantee-copy-gap) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-eyebrow);
  line-height: var(--guarantee-leading);
  font-family: inherit;
  font-weight: var(--weight-body);
}
@media (max-width: 767px) {
  .ms-guarantee {
    align-items: flex-start;
    padding: var(--guarantee-padding-mobile);
  }
  .ms-guarantee--demo {
    width: min(var(--guarantee-demo-mobile-width), calc(100% - var(--widgets-gap)));
  }
}