/* ============================================================
   DARTEE — GLOBAL COLOR + SPACING SYSTEM (loaded last)
   Locks one restrained palette, one vertical rhythm, one set of
   radii. Photography supplies the color; the UI frames it.
   No structural, copy or ordering changes.
   ============================================================ */

:root {
  /* --- locked palette --- */
  --d-cream:        #F4F0E6;
  --d-cream-soft:   #EAE4D8;
  --d-green:        #082A24;
  --d-pink:         #EC4D8B;
  --d-charcoal:     #222421;
  --d-body:         #4F554E;
  --d-muted:        #6F746C;
  --d-white:        #FCFBF7;
  --d-onGreen:      #F4F0E6;
  --d-onGreen-soft: rgba(244, 240, 230, .72);
  --d-hair:         rgba(8, 42, 36, .10);
  --d-hair-green:   rgba(244, 240, 230, .14);

  /* --- rhythm --- */
  --d-band: clamp(64px, 8vw, 116px);   /* standard section padding */
  --d-band-tight: clamp(48px, 6vw, 84px);
  --d-maxw: 1180px;
  --d-radius: 4px;                     /* editorial, not SaaS */

  /* remap legacy chapter/cro tokens onto the locked palette */
  --ch-cream: var(--d-cream);
  --ch-cream-deep: var(--d-cream-soft);
  --ch-green: var(--d-green);
  --ch-green-soft: #123c31;
  --ch-pink: var(--d-pink);
  --ch-body: var(--d-body);
  --ch-muted: var(--d-muted);
  --ch-onGreen: var(--d-onGreen);
  --ch-onGreen-soft: var(--d-onGreen-soft);
  --ch-hair: var(--d-hair);
  --ch-hair-green: var(--d-hair-green);

  --cro-cream: var(--d-cream);
  --cro-green: var(--d-green);
  --cro-pink: var(--d-pink);

  --gold: var(--d-pink);
  --gold-600: #c93a72;
  --paper: var(--d-white);
  --ink: var(--d-green);
  --ink-soft: var(--d-body);
}

/* ============================================================
   1. ENVIRONMENTS — cream is the default, green is punctuation
   ============================================================ */
.dartee-home .section.feat,
.dartee-home .wtdsec,
.dartee-home .munisec,
.dartee-home .collsec,
.dartee-home .marksec,
.dartee-home .section.founders,
.dartee-home .section.guarantee,
.dartee-home .kitsec,
.dartee-home .section.faq,
.dartee-home .section.emailcap,
.dartee-home .storysec,
.dartee-home .proofstrip {
  background-color: var(--d-cream) !important;
  color: var(--d-body);
}

/* deep-green moments only: warranty/Dart, closer, quote strip, video band */
.dartee-home .videoband,
.dartee-home .warsec,
.dartee-home .closer,
.dartee-home .dboys-quote {
  background-color: var(--d-green) !important;
  color: var(--d-onGreen);
}
.dartee-home .videoband__frame { background: var(--d-green) !important; }

/* brand story becomes a cream editorial chapter (green was over-used) */
.dartee-home .storysec { border-top: 1px solid var(--d-hair) !important; }
.dartee-home .storysec h2,
.dartee-home .storysec .storysec__title,
.dartee-home .storysec .storysec__accent,
.dartee-home .storysec .storysec__title span,
.dartee-home .storysec .storysec__cta { color: var(--d-green) !important; }
.dartee-home .storysec p { color: var(--d-body) !important; }
.dartee-home .storysec__eyebrow { color: var(--d-pink) !important; }
.dartee-home .storysec__cta { border-bottom-color: var(--d-hair) !important; }

.dartee-home .dboys-quote { border-top: 1px solid var(--d-hair-green) !important; }

/* ============================================================
   2. RHYTHM — one vertical cadence, one content width
   ============================================================ */
.dartee-home .section.feat,
.dartee-home .wtdsec,
.dartee-home .collsec,
.dartee-home .marksec,
.dartee-home .section.founders,
.dartee-home .section.guarantee,
.dartee-home .kitsec,
.dartee-home .section.faq,
.dartee-home .storysec,
.dartee-home .warsec,
.dartee-home .closer,
.dartee-home .section.emailcap {
  padding-top: var(--d-band) !important;
  padding-bottom: var(--d-band) !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.dartee-home .dboys-quote {
  padding-top: var(--d-band-tight) !important;
  padding-bottom: var(--d-band-tight) !important;
}
.dartee-home .section > .wrap,
.dartee-home .wtdsec__inner,
.dartee-home .munisec__inner { max-width: var(--d-maxw); }

/* full-bleed split campaign sections on desktop */
@media (min-width: 901px) {
  .dartee-home .munisec__inner,
  .dartee-home .wtdsec__inner { max-width: none !important; width: 100% !important; margin: 0 !important; }
}

/* no mechanical band edges between neighbouring cream chapters */
.dartee-home .section.feat,
.dartee-home .wtdsec,
.dartee-home .collsec,
.dartee-home .marksec,
.dartee-home .section.founders,
.dartee-home .section.guarantee,
.dartee-home .kitsec,
.dartee-home .section.faq { border-top: 0 !important; border-bottom: 0 !important; }
.dartee-home .proofstrip { border-bottom: 1px solid var(--d-hair) !important; }

/* ============================================================
   3. RADII — quiet frames, no dashboard cards
   ============================================================ */
.dartee-home .feat-card,
.dartee-home .feat-card__media,
.dartee-home .collsec__card,
.dartee-home .collsec__media,
.dartee-home .marksec__media,
.dartee-home .kitsec__card,
.dartee-home .kitsec__media,
.dartee-home .wtdsec__media,
.dartee-home .munisec__media,
.dartee-home .storysec__media,
.dartee-home .videoband__frame {
  border-radius: var(--d-radius) !important;
  box-shadow: none !important;
}
.dartee-home .lifesec,
.dartee-home .lifesec__media,
.dartee-home .wtdsec__media img,
.dartee-home .munisec__media img { border-radius: 0 !important; }
.dartee-home .feat-card,
.dartee-home .collsec__card,
.dartee-home .kitsec__card {
  background: transparent !important;
  border: 0 !important;
}

/* ============================================================
   4. TYPOGRAPHY COLOR HIERARCHY (max 3 colors per section)
   ============================================================ */
.dartee-home .section.feat h2,
.dartee-home .wtdsec__title,
.dartee-home .munisec__title,
.dartee-home .collsec h2,
.dartee-home .marksec h2,
.dartee-home .founders h2,
.dartee-home .guarantee h2,
.dartee-home .kitsec h2,
.dartee-home .faq h2,
.dartee-home .emailcap h2 { color: var(--d-green) !important; }

.dartee-home .warsec h2,
.dartee-home .closer h2,
.dartee-home .dboys-quote blockquote { color: var(--d-onGreen) !important; }
.dartee-home .warsec p, .dartee-home .warsec__sub { color: var(--d-onGreen-soft) !important; }
.dartee-home .warsec__cta, .dartee-home .closer__cta { color: var(--d-onGreen) !important; }
.dartee-home .warsec__cta:hover, .dartee-home .closer__cta:hover { color: var(--d-pink) !important; }

.dartee-home .section.feat p,
.dartee-home .collsec p,
.dartee-home .marksec p,
.dartee-home .founders p,
.dartee-home .guarantee p,
.dartee-home .kitsec p,
.dartee-home .faq p { color: var(--d-body) !important; }
.dartee-home .faq details p,
.dartee-home .founders figcaption,
.dartee-home .collsec__card p,
.dartee-home .kitsec__card p { color: var(--d-muted) !important; }

/* ============================================================
   5. PINK DISCIPLINE — eyebrows, hairlines, hovers only
   ============================================================ */
.dartee-home .eyebrow,
.dartee-home .munisec__eyebrow,
.dartee-home .wtdsec__eyebrow,
.dartee-home .marksec__eyebrow,
.dartee-home .kicker { color: var(--d-pink) !important; }

/* no pink fills or pink display type on cream */
.dartee-home .section.feat h2 span,
.dartee-home .collsec h2 span,
.dartee-home .kitsec h2 span,
.dartee-home .founders h2 span,
.dartee-home .guarantee h2 span,
.dartee-home .faq h2 span { color: inherit !important; }
.dartee-home .section.feat [class*="pill"],
.dartee-home .collsec [class*="pill"],
.dartee-home .kitsec [class*="pill"] { background: transparent !important; color: var(--d-green) !important; border-color: var(--d-hair) !important; }

/* CTAs: green on cream, cream on green, pink only on hover */
.dartee-home .section.feat .btn,
.dartee-home .collsec .btn,
.dartee-home .marksec .btn,
.dartee-home .kitsec .btn,
.dartee-home .guarantee .btn {
  border-radius: 2px !important;
  box-shadow: none !important;
}
.dartee-home .section.feat .btn--primary,
.dartee-home .collsec .btn--primary,
.dartee-home .marksec .btn--primary,
.dartee-home .kitsec .btn--primary {
  background: var(--d-green) !important;
  border-color: var(--d-green) !important;
  color: var(--d-cream) !important;
}
.dartee-home .section.feat .btn--primary:hover,
.dartee-home .collsec .btn--primary:hover,
.dartee-home .marksec .btn--primary:hover,
.dartee-home .kitsec .btn--primary:hover {
  background: var(--d-pink) !important;
  border-color: var(--d-pink) !important;
  color: var(--d-white) !important;
}

/* ============================================================
   6. PHOTOGRAPHY — never tinted, never fully darkened
   ============================================================ */
.dartee-home .lifesec__media img,
.dartee-home .wtdsec__media img,
.dartee-home .munisec__media img,
.dartee-home .storysec__media img,
.dartee-home .collsec__media img,
.dartee-home .marksec__media img,
.dartee-home .kitsec__media img {
  filter: none !important;
  mix-blend-mode: normal !important;
}
.dartee-home .munisec__media::after,
.dartee-home .wtdsec__media::after,
.dartee-home .storysec__media::after,
.dartee-home .collsec__media::after { background: none !important; }
/* localized legibility gradient only where copy sits on photography */
.dartee-home .lifesec__media::after {
  background: linear-gradient(100deg, rgba(8, 42, 36, .58) 0%, rgba(8, 42, 36, .30) 34%, rgba(8, 42, 36, 0) 62%) !important;
}

/* ============================================================
   7. MOBILE — same logic, more air, no extra cards
   ============================================================ */
@media (max-width: 900px) {
  :root { --d-band: 56px; --d-band-tight: 40px; }
  .dartee-home .section.feat,
  .dartee-home .wtdsec,
  .dartee-home .collsec,
  .dartee-home .marksec,
  .dartee-home .section.founders,
  .dartee-home .section.guarantee,
  .dartee-home .kitsec,
  .dartee-home .section.faq,
  .dartee-home .storysec,
  .dartee-home .warsec,
  .dartee-home .closer,
  .dartee-home .section.emailcap {
    padding-top: var(--d-band) !important;
    padding-bottom: var(--d-band) !important;
  }
.dartee-home .feat-card,
  .dartee-home .collsec__card,
  .dartee-home .kitsec__card,
  .dartee-home .marksec__media { background: transparent !important; border: 0 !important; box-shadow: none !important; }
}

/* ============================================================
   MOBILE FIX — remove the empty cream "page break" around the
   brand-story photo. The story chapter follows a dark-green
   warranty band, so a tight photo transition beats a 56px gap.
   ============================================================ */
@media (max-width: 900px) {
  .dartee-home .storysec {
    padding-top: 0 !important;
    padding-bottom: 24px !important;
  }
  .dartee-home .storysec__copy {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* ============================================================
   8. AUDIT FIXES — remove SaaS cards, restrain pink
   ============================================================ */
/* founders + review + faq surfaces: cream field, hairline only */
.dartee-home .founders .founders__card,
.dartee-home .founders__inner,
.dartee-home .guarantee .revcard,
.dartee-home .guarantee .review-card,
.dartee-home .faq details {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-top: 1px solid var(--d-hair) !important;
}
.dartee-home .founders .founders__card,
.dartee-home .founders__inner { border-top: 0 !important; }
.dartee-home .guarantee .revcard,
.dartee-home .guarantee .review-card { padding-left: 0 !important; padding-right: 0 !important; }

/* product media tiles sit on soft cream, never white/gray boxes */
.dartee-home .feat-card__media,
.dartee-home .marksec__media,
.dartee-home .kitsec__media { background: var(--d-cream-soft) !important; }

/* stars: green on cream, cream on green */
.dartee-home .section .stars,
.dartee-home .section .stars *,
.dartee-home .guarantee .stars,
.dartee-home .guarantee .stars * { color: var(--d-green) !important; }
.dartee-home .warsec .stars *,
.dartee-home .closer .stars * { color: var(--d-onGreen) !important; }

/* quick-buy chips + badges: green ink, no pink fills */
.dartee-home .feat-card .quickbuy,
.dartee-home .feat-card [class*="quick"] {
  background: var(--d-cream) !important;
  color: var(--d-green) !important;
  border: 1px solid var(--d-hair) !important;
}

/* second headline lines stop being pink */
.dartee-home .marksec h2 span,
.dartee-home .marksec__accent,
.dartee-home .warsec h2 span,
.dartee-home .warsec__accent,
.dartee-home .closer h2 span { color: inherit !important; }

/* eyebrows over photography read cream, not pink */
.dartee-home .lifesec__eyebrow,
.dartee-home .collsec__card .collsec__sub,
.dartee-home .collsec__card [class*="sub"],
.dartee-home .videoband [class*="eyebrow"] { color: var(--d-onGreen-soft) !important; }
.dartee-home .warsec__eyebrow { color: var(--d-onGreen-soft) !important; }

/* founders + judge.me review cards: cream field, hairline framing */
.dartee-home .founders-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.dartee-home .guarantee .jdgm-rev,
.dartee-home .guarantee .jdgm-rev-widget,
.dartee-home .guarantee .jdgm-all-reviews-widget .jdgm-rev {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--d-hair) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.dartee-home .reviews-summary .num { color: var(--d-green) !important; }
.dartee-home .reviews-cred__badge { color: var(--d-green) !important; }

/* muni headline: single green voice, pink stays in the eyebrow/rule */
.dartee-home .munisec__title span,
.dartee-home .munisec__accent,
.dartee-home .munisec__title em { color: var(--d-green) !important; }
.dartee-home .munisec p { color: var(--d-body) !important; }

/* fallback review cards (.review) flatten too */
.dartee-home .guarantee .review,
.dartee-home .guarantee .review-grid > .review {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--d-hair) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.dartee-home .guarantee .review .stars * { color: var(--d-green) !important; }

/* remove the cream break between the Muni photo and the Why Dartee photo */
@media (min-width: 981px) {
  .dartee-home .wtdsec { padding-top: 0 !important; }
}

/* ============================================================
   QUOTE BREAK — quiet cream rule strip between chapters
   ============================================================ */
.dartee-home .quotebreak {
  background: var(--d-cream, #F4F0E6);
  border-top: 1px solid var(--d-hair);
  border-bottom: 1px solid var(--d-hair);
  padding: 34px 0 36px;
}
.dartee-home .quotebreak .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.dartee-home .quotebreak__eyebrow {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--d-green, #082A24);
  opacity: .5;
  white-space: nowrap;
}
.dartee-home .quotebreak__quote {
  margin: 0;
  flex: 1 1 420px;
  text-align: right;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 34px);
  line-height: 1.22;
  color: var(--d-green, #082A24);
}
@media (max-width: 760px) {
  .dartee-home .quotebreak { display: none; }
}


/* STORY — photo connects flush to the band above; no cream gap */
.dartee-home .storysec {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: stretch !important;
}
.dartee-home .storysec__media {
  align-self: stretch !important;
  height: 100% !important;
  border-radius: 0 !important;
}