/* ============================================================================
   BRAND TOKENS
   ----------------------------------------------------------------------------
   Defined here, not only in core.css, because the 18 pages that load this
   stylesheet (every /help article, plus alternatives, features, privacy,
   support and terms) do NOT load core.css.

   An undefined custom property does not fall back, it makes the whole
   declaration invalid. So `background: linear-gradient(180deg,
   var(--brand-light), ...)` produced NO background at all, and the button kept
   its `color: #FFFFFF`: white text on a white page, which is what the
   "email is written in white" report was.

   Values identical to core.css. If both load, they agree.
   ============================================================================ */
:root {
  --brand:        #11A166;
  --brand-deep:   #0B7C4F;
  --brand-light:  #1EBA7D;
  --brand-tint:   #E8F6EF;
  --brand-tint-2: #CFEBDE;
  --brand-rgb:    17, 161, 102;
}

/* =========================================================
   Crewty Blog — design system
   ---------------------------------------------------------
   Mirrors the landing site (/index, /affiliate, etc.) so the
   blog feels like part of the same product. Off-white canvas,
   dark text, brand orange. Inter + Inter Tight, no em dashes
   in copy, no AI-tinted boilerplate.
   ========================================================= */

:root {
  --canvas: #F5F5F5;
  --surface: #FFFFFF;
  --surface-soft: #FAFAFA;
  --surface-strong: #F0F0F0;

  --ink: #0F0C0F;
  --ink-soft: rgba(15, 12, 15, 0.72);
  --ink-mute: rgba(15, 12, 15, 0.55);
  --ink-faint: rgba(15, 12, 15, 0.38);
  --line: rgba(15, 12, 15, 0.10);
  --line-strong: rgba(15, 12, 15, 0.18);

  --blood: var(--brand);
  --blood-bright: var(--brand-light);
  --blood-deep: var(--blood);
  --blood-soft: rgba(var(--brand-rgb), 0.10);

  --f-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* The whole site is wrapped to about 1100px max for prose comfort.
   Wider when we use grids (post cards). */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; position: relative; }
.wrap--wide { max-width: 1240px; }
.wrap--prose { max-width: 760px; }

/* =========================================================
   NAV
   ========================================================= */
.b-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 245, 245, 0.84);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.b-nav__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; max-width: 1240px; margin: 0 auto;
  gap: 24px;
}
.b-nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 16px/1 var(--f-display);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.b-nav__brand img { width: 28px; height: 28px; border-radius: 6px; }
.b-nav__links { display: flex; gap: 22px; }
.b-nav__links a {
  font: 500 14px/1 var(--f-sans);
  color: var(--ink-soft);
  transition: color 0.18s ease;
  letter-spacing: -0.005em;
}
.b-nav__links a:hover, .b-nav__links a.active { color: var(--ink); }
.b-nav__cta { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .b-nav__links { display: none; }
}

/* =========================================================
   BUTTONS — mirror landing-page .btn family
   ========================================================= */
.b-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font: 500 14px/1 var(--f-sans);
  letter-spacing: -0.005em;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.b-btn:hover { background: rgba(15, 12, 15, 0.04); }
.b-btn--primary {
  color: #FFFFFF;
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand-deep) 100%);
  border-color: rgba(17, 161, 102, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(var(--brand-rgb), 0.30),
    0 10px 24px -12px rgba(17, 161, 102, 0.55);
}
.b-btn--primary:hover {
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand-deep) 100%);
  filter: brightness(0.97);
}
.b-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.b-btn--ghost:hover { background: rgba(15, 12, 15, 0.04); color: var(--ink); }
.b-btn .arrow { display: inline-flex; transition: transform 0.22s ease; }
.b-btn:hover .arrow { transform: translateX(3px); }

/* =========================================================
   EYEBROW chip
   ========================================================= */
.b-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blood-soft);
  color: var(--blood-deep);
  font: 700 11.5px/1 var(--f-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.b-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blood);
}

/* =========================================================
   BREADCRUMB
   ========================================================= */
.b-crumb {
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
.b-crumb__row {
  padding: 14px 32px;
  font: 400 13px/1 var(--f-sans);
  color: var(--ink-mute);
  max-width: 1240px; margin: 0 auto;
}
.b-crumb__row a { color: var(--ink-mute); transition: color 0.18s ease; }
.b-crumb__row a:hover { color: var(--ink); }
.b-crumb__row .sep { margin: 0 8px; color: var(--ink-faint); }
.b-crumb__row .now { color: var(--ink); font-weight: 500; }

/* =========================================================
   INDEX HERO
   ========================================================= */
.b-hero {
  padding: 96px 0 64px;
  text-align: center;
}
.b-hero .b-eyebrow { margin-bottom: 22px; }
.b-hero__title {
  font: 600 clamp(40px, 6vw, 64px)/1.05 var(--f-display);
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 18px;
}
.b-hero__title em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--blood-deep);
}
.b-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* =========================================================
   POST GRID (index)
   ========================================================= */
.b-list { padding: 24px 0 80px; }
.b-section-eyebrow {
  font: 700 11.5px/1 var(--f-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blood-deep);
  margin: 0 0 24px;
}

.b-featured {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.b-featured:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 20px 50px -30px rgba(15, 12, 15, 0.25);
}
.b-featured__media {
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.08) 0%, rgba(var(--brand-rgb), 0.02) 100%);
  display: flex; align-items: center; justify-content: center;
  min-height: 280px;
  padding: 32px;
  border-right: 1px solid var(--line);
}
.b-featured__media svg { width: 64px; height: 64px; color: var(--blood); opacity: 0.6; }
.b-featured__body { padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.b-featured__meta { display: flex; gap: 14px; font: 500 12.5px/1 var(--f-sans); color: var(--ink-mute); margin-bottom: 14px; }
.b-featured__meta .sep { color: var(--ink-faint); }
.b-featured__title {
  font: 600 clamp(24px, 3vw, 32px)/1.15 var(--f-display);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 14px;
}
.b-featured__excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.b-featured__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13.5px/1 var(--f-sans);
  color: var(--blood-deep);
}
.b-featured__cta svg { width: 16px; height: 16px; transition: transform 0.22s ease; }
.b-featured:hover .b-featured__cta svg { transform: translateX(3px); }
@media (max-width: 880px) {
  .b-featured { grid-template-columns: 1fr; }
  .b-featured__media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 200px; }
  .b-featured__body { padding: 28px; }
}

.b-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) { .b-grid { grid-template-columns: 1fr; } }

.b-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.b-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -22px rgba(15, 12, 15, 0.22);
}
.b-card__media {
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.08) 0%, rgba(var(--brand-rgb), 0.02) 100%);
  display: flex; align-items: center; justify-content: center;
  min-height: 160px;
  padding: 28px;
  border-bottom: 1px solid var(--line);
}
.b-card__media svg { width: 44px; height: 44px; color: var(--blood); opacity: 0.6; }
.b-card__body { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; }
.b-card__meta { display: flex; gap: 12px; font: 500 11.5px/1 var(--f-sans); color: var(--ink-mute); margin-bottom: 12px; }
.b-card__meta .sep { color: var(--ink-faint); }
.b-card__title {
  font: 600 19px/1.3 var(--f-display);
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 10px;
}
.b-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; flex: 1; }
.b-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--f-sans);
  color: var(--blood-deep);
}
.b-card__cta svg { width: 14px; height: 14px; transition: transform 0.22s ease; }
.b-card:hover .b-card__cta svg { transform: translateX(3px); }

.b-card--wide { grid-column: 1 / -1; flex-direction: row; }
.b-card--wide .b-card__media { min-height: 100%; flex: 0 0 38%; border-right: 1px solid var(--line); border-bottom: 0; }
.b-card--wide .b-card__body { flex: 1; padding: 30px; }
@media (max-width: 880px) {
  .b-card--wide { flex-direction: column; }
  .b-card--wide .b-card__media { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--line); min-height: 160px; }
  .b-card--wide .b-card__body { padding: 22px 24px; }
}

/* =========================================================
   ARTICLE PAGE
   ========================================================= */
.b-article { padding: 64px 0 80px; }

.b-article__head { max-width: 760px; margin: 0 auto 48px; padding: 0 32px; }
.b-article__meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font: 500 12.5px/1 var(--f-sans);
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.b-article__meta span { display: inline-flex; align-items: center; gap: 6px; }
.b-article__meta svg { width: 14px; height: 14px; color: var(--blood); }
.b-article__title {
  font: 600 clamp(34px, 5vw, 52px)/1.1 var(--f-display);
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 18px;
}
.b-article__title em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--blood-deep);
}
.b-article__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* The article body uses a custom "prose" zone. All the legacy Tailwind
   `prose`/`text-slate-700` etc. live inside it — but our CSS below is
   high-specificity enough to override the inline class names by virtue
   of cascade order (this stylesheet loads after Tailwind's CDN). */
.b-prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
}
.b-prose p { margin: 0 0 22px; color: var(--ink-soft); }
.b-prose strong { color: var(--ink); font-weight: 600; }
.b-prose em { font-style: italic; }
.b-prose a { color: var(--blood-deep); border-bottom: 1px solid rgba(17, 161, 102, 0.35); transition: border-color 0.18s ease; }
.b-prose a:hover { border-bottom-color: var(--blood-deep); }

.b-prose h2 {
  font: 600 clamp(24px, 3vw, 30px)/1.2 var(--f-display);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 56px 0 18px;
}
.b-prose h2 + p { margin-top: 0; }
.b-prose h3 {
  font: 600 21px/1.3 var(--f-display);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 38px 0 14px;
}
.b-prose h4 {
  font: 600 17px/1.3 var(--f-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 30px 0 12px;
}

.b-prose ul, .b-prose ol {
  margin: 0 0 22px;
  padding-left: 20px;
  color: var(--ink-soft);
}
.b-prose li { margin: 0 0 10px; }
.b-prose li strong { color: var(--ink); }
.b-prose ul { list-style: none; padding-left: 0; }
.b-prose ul > li { position: relative; padding-left: 22px; }
.b-prose ul > li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blood); opacity: 0.9;
}
.b-prose ol { counter-reset: olc; list-style: none; padding-left: 0; }
.b-prose ol > li { position: relative; padding-left: 32px; counter-increment: olc; }
.b-prose ol > li::before {
  content: counter(olc); position: absolute; left: 0; top: 0;
  font: 600 12px/22px var(--f-display);
  color: var(--blood-deep);
  width: 22px; height: 22px;
  text-align: center;
  background: var(--blood-soft);
  border-radius: 50%;
}

.b-prose blockquote {
  margin: 36px 0;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blood);
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.6;
}
.b-prose blockquote p { margin: 0 0 10px; color: var(--ink); font-weight: 500; }
.b-prose blockquote p:last-child { margin: 0; }
.b-prose blockquote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-top: 8px;
}

.b-prose hr {
  margin: 56px auto;
  border: 0;
  height: 1px;
  background: var(--line);
  max-width: 240px;
}

.b-prose code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, monospace;
  font-size: 14px;
  padding: 2px 6px;
  background: var(--surface-strong);
  border-radius: 5px;
  color: var(--ink);
}
.b-prose pre {
  margin: 24px 0;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.55;
}
.b-prose pre code { background: transparent; padding: 0; font-size: 13.5px; }

.b-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14.5px;
}
.b-prose th, .b-prose td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.b-prose th { font-weight: 600; color: var(--ink); background: var(--surface-soft); }
.b-prose td { color: var(--ink-soft); }

/* =========================================================
   CALLOUT cards inside articles
   ========================================================= */
.b-callout {
  margin: 40px 0;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex; gap: 18px; align-items: flex-start;
}
.b-callout__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 55%, var(--brand-deep) 100%);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.b-callout__icon svg { width: 18px; height: 18px; }
.b-callout__body p { margin: 0 0 8px; color: var(--ink); font-size: 14.5px; }
.b-callout__body p:last-child { margin: 0; color: var(--ink-soft); }

/* =========================================================
   END-OF-ARTICLE CTA
   ========================================================= */
.b-cta {
  padding: 72px 0 88px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--brand-rgb), 0.07), transparent 70%),
    var(--canvas);
  border-top: 1px solid var(--line);
}
.b-cta__inner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 52px 40px;
  text-align: center;
  max-width: 720px; margin: 0 auto;
  box-shadow: 0 20px 60px -30px rgba(15, 12, 15, 0.2);
}
.b-cta .b-eyebrow { margin-bottom: 18px; }
.b-cta__title {
  font: 600 clamp(26px, 3.5vw, 36px)/1.15 var(--f-display);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 14px;
}
.b-cta__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto 32px;
  max-width: 480px;
}
.b-cta__row { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.b-cta__fine { margin: 22px 0 0; font-size: 12px; color: var(--ink-faint); }

/* =========================================================
   NEWSLETTER box (index page)
   ========================================================= */
.b-news {
  padding: 64px 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(var(--brand-rgb), 0.06), transparent 70%),
    var(--canvas);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.b-news__title {
  font: 600 clamp(26px, 3.5vw, 32px)/1.2 var(--f-display);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 12px;
}
.b-news__lede { font-size: 15px; color: var(--ink-soft); margin: 0 auto 28px; max-width: 480px; }
.b-news__form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; }
.b-news__input {
  flex: 1; padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font: 400 14px/1 var(--f-sans); color: var(--ink);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.b-news__input:focus { border-color: var(--blood); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15); }
.b-news__input::placeholder { color: var(--ink-faint); }
.b-news__fine { font-size: 11.5px; color: var(--ink-faint); margin: 14px 0 0; }
.b-news__fine a { color: var(--ink-mute); border-bottom: 1px solid rgba(15, 12, 15, 0.2); }
@media (max-width: 580px) { .b-news__form { flex-direction: column; } }

/* =========================================================
   FOOTER
   ========================================================= */
.b-foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 40px 32px;
  color: var(--ink-mute);
  font-size: 13px;
}
.b-foot__row {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.b-foot__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.b-foot__brand img { width: 24px; height: 24px; border-radius: 5px; }
.b-foot__nav { display: flex; gap: 22px; flex-wrap: wrap; }
.b-foot__nav a { color: var(--ink-mute); transition: color 0.18s ease; }
.b-foot__nav a:hover { color: var(--ink); }
.b-foot__bar {
  max-width: 1240px; margin: 22px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  color: var(--ink-faint);
  font-size: 12px;
}

/* =========================================================
   Mobile menu
   ========================================================= */
.b-mob-toggle {
  display: none;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 8px;
  cursor: pointer; color: var(--ink);
}
.b-mob-toggle svg { width: 16px; height: 16px; }
.b-mob-sheet {
  display: none; flex-direction: column; gap: 4px;
  padding: 14px 32px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
.b-mob-sheet a {
  display: block; padding: 10px 0;
  font: 500 14px/1.2 var(--f-sans);
  color: var(--ink-soft);
}
.b-mob-sheet a.active { color: var(--ink); }
.b-mob-sheet .b-btn { margin-top: 8px; }
.b-mob-sheet.is-open { display: flex; }
@media (max-width: 760px) {
  .b-mob-toggle { display: inline-flex; }
  .b-nav__cta .b-btn--ghost { display: none; }
}

/* =========================================================================
   .m-page — marketing pages (/for/*, /compare/*, /alternatives, /features,
   /support). Existing pages use Tailwind via CDN with slate / orange utility
   classes. Rather than rewriting each page's body, this layer brand-aligns
   the existing structure by overriding the most-used Tailwind utilities so
   the legacy markup picks up our cream-canvas + dark-ink + brand-orange
   look without us touching every <div>.
   ========================================================================= */
.m-page { background: var(--canvas); color: var(--ink); }

.m-page section { padding: 64px 0; position: relative; }
.m-page section + section { border-top: 1px solid var(--line); }

/* Inner container override — Tailwind's max-w-7xl + max-w-4xl etc. all
   collapse to a single sane prose container. */
.m-page section > div {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
}
.m-page section > div > div { max-width: none; padding: 0; }

/* Dark hero sections (Tailwind .bg-slate-900) become brand-white hero */
.m-page section.bg-slate-900 {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
}
.m-page section.bg-slate-900 * { color: inherit !important; }
.m-page section.bg-slate-900 h1, .m-page section.bg-slate-900 h2 { color: var(--ink) !important; }
.m-page section.bg-slate-900 .text-slate-300,
.m-page section.bg-slate-900 .text-slate-400 { color: var(--ink-soft) !important; }
.m-page section.bg-slate-900 .text-brand { color: var(--blood-deep) !important; }
.m-page section.bg-slate-900 .bg-white\/10 {
  background: var(--blood-soft) !important;
  color: var(--blood-deep) !important;
}

/* Light grey wash sections — keep that wash to alternate rhythm */
.m-page section.bg-slate-50 { background: var(--surface-soft) !important; }
.m-page section.bg-white { background: var(--surface) !important; }

/* Typography overrides — Tailwind utility classes that produce headings
   and body text. All collapse to our Inter Tight + Inter on dark ink. */
.m-page h1 {
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: clamp(36px, 5.5vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
}
.m-page h2 {
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: clamp(24px, 3.2vw, 32px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
}
.m-page h3 {
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.012em !important;
  color: var(--ink) !important;
}
.m-page h4 { color: var(--ink) !important; }
.m-page p { color: var(--ink-soft) !important; line-height: 1.65 !important; }
.m-page p.text-slate-400, .m-page p.text-slate-500 { color: var(--ink-mute) !important; }

/* Brand orange text → our deep blood */
.m-page .text-brand,
.m-page .text-brand-light,
.m-page .text-brand-light,
.m-page .text-brand,
.m-page .text-brand-deep { color: var(--blood-deep) !important; }

/* Eyebrow pills (legacy .inline-block rounded-full chip) */
.m-page .inline-block.bg-brand\/10,
.m-page p.inline-block.bg-white\/10 {
  background: var(--blood-soft) !important;
  color: var(--blood-deep) !important;
  border: 0 !important;
  padding: 6px 14px !important;
  font: 700 11.5px/1 var(--f-sans) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
}

/* Cards — Tailwind .rounded-xl .border .border-slate-200 .bg-white */
.m-page .rounded-xl,
.m-page .rounded-2xl {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(15, 12, 15, 0.03) !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.m-page .rounded-xl:hover,
.m-page .rounded-2xl:hover {
  border-color: var(--line-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px -22px rgba(15, 12, 15, 0.22) !important;
}
/* Don't double-wrap the inner icon blocks */
.m-page .rounded-xl .rounded-lg,
.m-page .rounded-xl .rounded-full,
.m-page .rounded-2xl .rounded-lg,
.m-page .rounded-2xl .rounded-full {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 55%, var(--brand-deep) 100%) !important;
  color: white !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  border: 0 !important;
}
.m-page .rounded-xl .rounded-lg svg,
.m-page .rounded-xl .rounded-full svg,
.m-page .rounded-2xl .rounded-lg svg,
.m-page .rounded-2xl .rounded-full svg { color: white !important; }

/* Red error-tinted icon backgrounds (problems section) stay red but in our tone */
.m-page .bg-red-50 {
  background: rgba(220, 38, 38, 0.10) !important;
  color: #B91C1C !important;
}
.m-page .bg-red-50 svg { color: #B91C1C !important; }

/* Orange utility backgrounds → brand */
.m-page .bg-brand,
.m-page .bg-brand,
.m-page .bg-brand-deep {
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand-deep) 100%) !important;
  color: white !important;
}
.m-page .bg-brand-tint,
.m-page .bg-brand-tint {
  background: var(--blood-soft) !important;
  color: var(--blood-deep) !important;
}

/* Hyperlinks inside body text */
.m-page p a, .m-page li a {
  color: var(--blood-deep) !important;
  border-bottom: 1px solid rgba(17, 161, 102, 0.35);
}
.m-page p a:hover, .m-page li a:hover { border-bottom-color: var(--blood-deep); }

/* CTA buttons (Tailwind .bg-brand .text-white .px-8 .py-4 etc.) */
.m-page a.bg-brand,
.m-page a.bg-brand-deep,
.m-page a.bg-brand {
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand-deep) 100%) !important;
  color: white !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--brand-rgb), 0.30),
    0 10px 24px -12px rgba(17, 161, 102, 0.55) !important;
  border: 1px solid rgba(17, 161, 102, 0.55) !important;
}
.m-page a.bg-brand:hover,
.m-page a.bg-brand-deep:hover { filter: brightness(0.97) !important; }

/* Ghost buttons (Tailwind .border .text-slate-300 etc.) */
.m-page a.border.border-slate-600,
.m-page a.border.border-slate-300,
.m-page a.border.border-slate-200 {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}

/* FAQ-style accordion summary lines */
.m-page details summary { cursor: pointer; }
.m-page details summary h3 { display: inline; }

/* Lists */
.m-page ul li,
.m-page ol li { color: var(--ink-soft) !important; }
.m-page svg.text-green-500,
.m-page svg.text-emerald-500 { color: #059669 !important; }

/* Grids — Tailwind .grid + .gap-* — preserve. Cards inherit our card styling. */

/* Mobile menu in legacy pages — keep visually consistent */
.m-page nav { display: none !important; } /* hide legacy nav, we add our own shell */

/* ───────────────────────────────────────────────────────────────────────────
   COMPARE PAGE HERO — price strip
   ---------------------------------------------------------------------------
   The editorial theme re-skins the dark `bg-slate-900` hero into the light
   canvas, and does it with a blanket `* { color: inherit !important }`. Inside
   the price strip the inherited colour is the brand red, so BOTH prices, the
   "vs", and the labels all came out the same red. The result was an
   undifferentiated block where Crewty's price and the competitor's price were
   visually identical, which defeats the point of a comparison.

   Re-separate the two sides: Crewty keeps the brand colour, the competitor is
   neutral ink, supporting text is muted, and a hairline divides them.
   ─────────────────────────────────────────────────────────────────────────── */
.m-page section.bg-slate-900 .bg-white\/10.rounded-2xl {
  gap: 0;
  padding: 18px 10px;
  align-items: stretch;
  border: 1px solid var(--line);
}

/* Each side gets even width so the strip is symmetrical. Labels like
   "Housecall Pro starts at" are long, so keep them on one line and let the
   strip widen instead of squeezing the numbers. */
.m-page section.bg-slate-900 .bg-white\/10.rounded-2xl > .text-center {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 22px;
}
.m-page section.bg-slate-900 .bg-white\/10.rounded-2xl > .text-center > p:first-child {
  white-space: nowrap;
  margin-bottom: 2px;
}
.m-page section.bg-slate-900 .bg-white\/10.rounded-2xl > .text-center > p:last-child {
  white-space: nowrap;
  line-height: 1.1;
}

/* Crewty side keeps the brand colour. */
.m-page section.bg-slate-900 .bg-white\/10.rounded-2xl .text-brand {
  color: var(--blood-deep) !important;
}

/* Competitor price becomes neutral ink so the two are distinguishable. */
.m-page section.bg-slate-900 .bg-white\/10.rounded-2xl .text-white {
  color: var(--ink) !important;
}

/* Small caps labels and the "/mo" suffixes stay quiet. */
.m-page section.bg-slate-900 .bg-white\/10.rounded-2xl .text-slate-400 {
  color: var(--ink-soft) !important;
  opacity: 0.85;
}

/* The "vs" divider: muted, with a hairline on each side. */
.m-page section.bg-slate-900 .bg-white\/10.rounded-2xl .text-slate-600 {
  color: var(--ink-soft) !important;
  opacity: 0.55;
  align-self: center;
  padding: 0 4px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 46px;
  display: flex;
  align-items: center;
}

/* Below ~560px two prices plus a divider cannot sit side by side without the
   long labels wrapping into each other, so stack them and turn the "vs"
   divider from a vertical rule into a horizontal one. */
@media (max-width: 560px) {
  .m-page section.bg-slate-900 .bg-white\/10.rounded-2xl {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    padding: 16px 18px;
  }
  .m-page section.bg-slate-900 .bg-white\/10.rounded-2xl > .text-center {
    width: 100%;
    padding: 8px 0;
  }
  .m-page section.bg-slate-900 .bg-white\/10.rounded-2xl .text-slate-600 {
    width: 100%;
    min-height: 0;
    justify-content: center;
    padding: 4px 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
  }
  .m-page section.bg-slate-900 .bg-white\/10.rounded-2xl .text-3xl { font-size: 1.75rem; }
}