/* Direction A — content pages (landings, FAQ, guide, support, magazine, 404).
   Loaded only by those templates, so global-looking selectors stay scoped. */

/* responsive-enhancements.css sets .container{max-width:100vw}; on wide screens
   content ran edge-to-edge. Keep full-bleed backgrounds, cap the reading column. */
main .container { max-width: 1240px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { main .container { padding-inline: 24px; } }

/* ---------- Landing pages (city / health areas / all groups) ---------- */
.da-landing { padding-block-end: 48px; }
.da-landing-hero { padding: 24px; margin-block-end: 16px; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--c-hero-from), var(--c-surface)); border: 1px solid var(--c-border); }
.da-landing-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 12px; border-radius: var(--r-fchip); background: var(--c-surface); color: var(--c-brand-text); font-size: 13px; font-weight: 700; max-width: 100%; }
.da-landing-eyebrow span { overflow-wrap: anywhere; }
.da-landing .da-landing-hero h1 { font-size: clamp(22px, 1.2rem + 1.4vw, 32px); }
.da-landing-lead { margin: 8px 0 0; max-width: 68ch; color: var(--c-text-2); font-size: 15px; line-height: 1.8; }
.da-landing-highlights { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.da-landing-highlights li { padding: 4px 10px; border-radius: var(--r-fchip); background: var(--c-brand-subtle); color: var(--c-on-brand-subtle); font-size: 12.5px; font-weight: 600; }
.da-landing-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-block-start: 16px; padding: 10px 20px; border-radius: var(--r-btn); background: var(--c-brand); color: var(--c-on-brand) !important; font-weight: 700; font-size: 14px; box-shadow: var(--c-cta-shadow); }
.da-landing-cta:hover { background: var(--c-brand-hover); }
.da-landing-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.da-landing-stats li { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text-2); font-size: 12.5px; line-height: 1.5; }
.da-landing-stats b { color: var(--c-text-strong); font-size: 18px; }
.da-landing-layout { display: grid; gap: 16px; }
.da-landing-main, .da-landing-aside { display: grid; gap: 16px; align-content: start; min-width: 0; }
.da-landing-card { min-width: 0; padding: 20px; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-border); }
.da-landing-card > h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; line-height: 1.5; }
.da-landing-aside .da-landing-card > h2 { font-size: 16px; }
.da-landing-card a { color: var(--c-brand-text); }
.da-landing-muted, .da-landing-card p { color: var(--c-text-2); line-height: 1.85; }
.da-landing-card p:last-child { margin-block-end: 0; }
.da-landing .da-landing-chips { margin-block-start: 0; }
.da-landing .da-filter-chip { min-height: 36px; height: auto; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.da-landing .da-filter-chip:hover { border-color: var(--c-brand); color: var(--c-brand-text); }
.da-landing .da-filter-chip[aria-current="page"] { background: var(--c-chip-on-bg); border-color: var(--c-chip-on-bg); color: var(--c-chip-on-c); }
.da-landing-more { margin: 12px 0 0; font-size: 13.5px; font-weight: 700; }
.da-landing-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.da-landing-list a { display: block; padding: 8px 10px; margin-inline: -10px; border-radius: var(--r-xs); font-size: 14px; font-weight: 600; line-height: 1.6; }
.da-landing-list a:hover { background: var(--c-surface-2); }
.da-landing-products { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.da-landing-product { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img text price" "img link link"; align-items: center; gap: 4px 12px; padding: 12px; border-radius: var(--r-md); background: var(--c-surface-2); }
.da-landing-product img { grid-area: img; width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-sm); background: var(--c-photo-well); }
.da-landing-product-text { grid-area: text; min-width: 0; }
.da-landing-product h3 { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.da-landing-product h3 a { color: var(--c-text-strong) !important; }
.da-landing-product small { display: block; color: var(--c-text-3); font-size: 12px; overflow-wrap: anywhere; }
.da-landing-price { grid-area: price; color: var(--c-text-strong); font-weight: 800; font-size: 15px; white-space: nowrap; }
.da-landing-product-link { grid-area: link; justify-self: start; font-size: 13px; font-weight: 700; }
.da-landing-faq .faq-item + .faq-item { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--c-border); }
.da-landing-faq h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.da-landing-groups { display: grid; gap: 12px; }
.da-group-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-border); }
.da-group-card h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.5; }
.da-group-card h2 a { color: var(--c-text-strong) !important; }
.da-group-card .da-group-en { margin: 0; color: var(--c-text-3); font-size: 12.5px; }
.da-group-card .da-group-desc { margin: 0; color: var(--c-text-2); font-size: 14px; line-height: 1.75; }
.da-group-card .da-group-samples { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.da-group-card .da-group-samples a { display: inline-block; padding: 4px 10px; border-radius: var(--r-chip); background: var(--c-surface-2); color: var(--c-text-2) !important; font-size: 12.5px; }
.da-group-card .da-group-samples a:hover { color: var(--c-brand-text) !important; }
.da-group-card .da-group-kw { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.da-group-card .da-group-kw li { padding: 2px 8px; border-radius: var(--r-fchip); background: var(--c-brand-subtle); color: var(--c-on-brand-subtle); font-size: 12px; }
.da-group-card .da-group-cta { margin-block-start: auto; padding-block-start: 4px; font-size: 13.5px; font-weight: 700; color: var(--c-brand-text) !important; }
.da-landing-label { margin: 4px 0 0; color: var(--c-text-3); font-size: 12.5px; font-weight: 600; }
@media (min-width: 640px) {
  .da-landing-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .da-landing-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .da-landing-hero { padding: 32px; }
  .da-landing-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
  .da-landing-card { padding: 24px; }
}
@media (min-width: 1200px) { .da-landing-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.da-landing-subhead { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--c-text-strong); }
@media (min-width: 768px) { .da-landing-split { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.da-area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.da-area-link { display: flex; align-items: flex-start; gap: 8px; height: 100%; padding: 12px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid transparent; color: var(--c-text) !important; font-size: 14px; font-weight: 700; line-height: 1.5; }
.da-area-link .da-icon { flex: none; margin-block-start: 2px; color: var(--c-brand-text); }
.da-area-link span { min-width: 0; overflow-wrap: anywhere; }
.da-area-link small { display: block; color: var(--c-text-3); font-size: 12px; font-weight: 500; }
.da-area-link:hover { border-color: var(--c-brand); }

/* ---------- Support ---------- */
/* Green chat CTA: keep white type (remint rules must not darken these). */
body .chat-cta-card {
  background: linear-gradient(135deg, #047857 0%, #03664A 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: var(--c-shadow-2) !important;
  border-radius: var(--r-xl) !important;
}
body .chat-cta-card .chat-cta-title,
body:has(.support-hero) .chat-cta-card .chat-cta-title {
  color: #FFFFFF !important;
  text-shadow: none !important;
}
body .chat-cta-card .chat-cta-description,
body:has(.support-hero) .chat-cta-card .chat-cta-description {
  color: rgba(255, 255, 255, 0.92) !important;
}
body .chat-cta-card .chat-cta-icon { color: #FFFFFF !important; }
body .chat-cta-card .chat-open-btn {
  background: #FFFFFF !important;
  color: #047857 !important;
  text-decoration: none !important;
  box-shadow: var(--c-shadow-1) !important;
  border-radius: var(--r-btn) !important;
}
body .chat-cta-card .chat-open-btn:hover {
  background: var(--c-brand-subtle) !important;
  color: var(--c-brand-text) !important;
  transform: none !important;
}
/* Avoid a pure-white "light island" on dark theme while keeping contrast. */
html[data-theme="dark"] body .chat-cta-card .chat-open-btn {
  background: var(--c-brand-subtle) !important;
  color: var(--c-brand-text) !important;
  border: 1px solid color-mix(in srgb, var(--c-brand) 45%, transparent);
}
body .chat-cta-card .live-support-stats {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
body .chat-cta-card .live-support-stats .stat strong { color: #FFFFFF !important; }
body .chat-cta-card::before,
body .chat-cta-card .chat-cta-icon { animation: none !important; }

/* Mint hero: replace outline-light (invisible on light) with brand CTAs */
.support-hero .btn-light,
.support-hero .btn.btn-light {
  background: var(--c-brand) !important;
  color: var(--c-on-brand) !important;
  border: 0 !important;
  border-radius: var(--r-btn) !important;
  box-shadow: var(--c-cta-shadow);
}
.support-hero .btn-outline-light,
.support-hero .btn.btn-outline-light {
  background: var(--c-surface) !important;
  color: var(--c-brand-text) !important;
  border: 1.5px solid var(--c-brand) !important;
  border-radius: var(--r-btn) !important;
}
.support-hero .btn-outline-light:hover {
  background: var(--c-brand-subtle) !important;
  color: var(--c-brand-text) !important;
}

/* ---------- Health magazine: article ---------- */
body .article-wrapper { background: var(--c-bg) !important; }
.article-wrapper .col-lg-8 { max-width: 760px; }
.article-wrapper .breadcrumb { font-size: 13px; flex-wrap: wrap; }
.article-wrapper .breadcrumb a { color: var(--c-text-2); text-decoration: none; }
.article-wrapper .breadcrumb-item.active { color: var(--c-text-3); }
.article-wrapper .article-title { color: var(--c-text-strong) !important; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem) !important; line-height: 1.45 !important; letter-spacing: -0.01em; }
html[dir="rtl"] .article-wrapper .article-title { letter-spacing: 0; line-height: 1.6 !important; }
.article-wrapper .article-fleet-lead { color: var(--c-text) !important; background: var(--c-brand-subtle) !important; border-color: transparent !important; border-radius: var(--r-md) !important; }
.article-wrapper header .text-muted { color: var(--c-text-3) !important; font-size: 13.5px; row-gap: 6px !important; }
.article-wrapper .article-content { max-width: 68ch; color: var(--c-text) !important; font-size: 1.0625rem !important; line-height: 1.9 !important; overflow-wrap: break-word; }
html[dir="rtl"] .article-wrapper .article-content { max-width: 64ch; font-size: 1.075rem !important; line-height: 2.05 !important; }
.article-wrapper .article-content p { margin-bottom: 1.15em; }
.article-wrapper .article-content h2 { color: var(--c-text-strong) !important; font-size: 1.35rem !important; line-height: 1.5; margin-top: 2.2rem !important; border-inline-start-color: var(--c-brand) !important; }
.article-wrapper .article-content h3 { color: var(--c-text-strong) !important; font-size: 1.15rem !important; }
.article-wrapper .article-content a { color: var(--c-brand-text) !important; text-underline-offset: 3px; }
.article-wrapper .article-content blockquote { background: var(--c-surface-2) !important; border-inline-start-color: var(--c-brand) !important; border-radius: var(--r-sm) !important; }
.article-wrapper .article-content th, .article-wrapper .article-content td { border-color: var(--c-border) !important; }
.article-wrapper .article-content table { display: block; overflow-x: auto; }
.article-wrapper .article-fleet-next { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; }
.article-wrapper .article-fleet-next p:first-child { color: var(--c-text-strong) !important; }
.article-wrapper .article-fleet-next p { color: var(--c-text-2) !important; }
.article-wrapper .border-top { border-color: var(--c-border) !important; }
.article-wrapper h3.h6, .article-wrapper section > h2.h5 { color: var(--c-text-strong); }
.article-wrapper .badge.bg-light { background: var(--c-surface) !important; color: var(--c-text-2) !important; border: 1px solid var(--c-border); font-weight: 600; }
.article-wrapper .card { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; }
.article-wrapper a.card:hover, .article-wrapper .blog-card:hover { border-color: var(--c-brand) !important; }
.article-wrapper .card .text-dark, .article-wrapper .card h4 { color: var(--c-text-strong) !important; }
.article-wrapper .card .text-primary { color: var(--c-brand-text) !important; }
.article-wrapper .card-text { color: var(--c-text-2) !important; }
.article-wrapper .card img.img-fluid { background: var(--c-photo-well); border-radius: var(--r-sm); }
.article-wrapper > svg[aria-hidden="true"] { display: none; }
/* Magazine body blocks — token surfaces so dark mode stays clinical calm */
.article-wrapper .article-content .mag-lead { color: var(--c-text) !important; border-inline-start-color: var(--c-brand) !important; }
.article-wrapper .article-content :is(h2.mag-h, .mag-block-title, .mag-tl-head, .mag-donut-center) { color: var(--c-text-strong) !important; }
.article-wrapper .article-content .mag-takeaways {
  background: var(--c-brand-subtle) !important;
  border-color: transparent !important;
  border-inline-start-color: var(--c-brand) !important;
  box-shadow: none !important;
}
.article-wrapper .article-content .mag-takeaways-title { color: var(--c-brand-text) !important; }
.article-wrapper .article-content :is(.mag-stat, .mag-barchart, .mag-donut-wrap, .mag-ladder-item, .mag-cc) {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  box-shadow: none !important;
}
.article-wrapper .article-content .mag-stat-label,
.article-wrapper .article-content .mag-donut-lab,
.article-wrapper .article-content .mag-bar-label { color: var(--c-text-2) !important; }
.article-wrapper .article-content .mag-bar-label b,
.article-wrapper .article-content .mag-cc li b { color: var(--c-text-strong) !important; }
.article-wrapper .article-content .mag-bar-track { background: var(--c-surface-2) !important; }
.article-wrapper .article-content .mag-sources {
  background: var(--c-surface-2) !important;
  border-color: var(--c-border) !important;
}
.article-wrapper .article-content .mag-sources li { color: var(--c-text-3) !important; }
.article-wrapper .article-content .mag-pros { background: var(--c-success-subtle) !important; border-color: transparent !important; }
.article-wrapper .article-content .mag-cons { background: var(--c-danger-subtle) !important; border-color: transparent !important; }
.article-wrapper .article-content .mag-quote {
  background: var(--c-accent-subtle) !important;
  border-color: transparent !important;
}
.article-wrapper .article-content .mag-quote blockquote p { color: var(--c-text) !important; }
.article-wrapper .article-content .mag-table-wrap { border-color: var(--c-border) !important; }
.article-wrapper .article-content .mag-table tbody th { color: var(--c-text-strong) !important; background: var(--c-surface-2) !important; }
.article-wrapper .article-content .mag-table tbody tr:nth-child(even) td { background: var(--c-surface) !important; }
.article-wrapper .article-content .mag-table tbody th,
.article-wrapper .article-content .mag-table tbody td { border-top-color: var(--c-border) !important; }

/* ---------- 404 ---------- */
body.error-404 #main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
  min-height: calc(100vh - var(--header-h) - 120px);
}
.pw-404 {
  background: var(--c-raised);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  box-shadow: var(--c-shadow-2);
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px);
  max-width: 640px;
  width: 100%;
  text-align: center;
}
html[data-theme="dark"] .pw-404 { border-color: var(--c-border); box-shadow: none; }
.pw-404__code {
  font-size: clamp(4rem, 12vw, 6.5rem);
  font-weight: 900;
  color: var(--c-brand);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--sp-4);
}
.pw-404__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-text-strong);
  margin-bottom: var(--sp-3);
  line-height: 1.4;
}
.pw-404__msg {
  font-size: var(--fs-md);
  color: var(--c-text-2);
  line-height: var(--lh-body);
  margin: 0 auto var(--sp-6);
  max-width: 48ch;
}
.pw-404__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.pw-404__actions .pw-btn,
.pw-404__actions a.pw-btn--primary,
.pw-404__actions a.pw-btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.pw-404__actions .pw-btn--primary {
  background: var(--c-brand);
  color: var(--c-on-brand);
  box-shadow: var(--c-cta-shadow);
  border: 0;
}
.pw-404__actions .pw-btn--secondary {
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.pw-404__links {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.pw-404__links-label {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}
.pw-404__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.pw-404__chips a {
  color: var(--c-on-accent-subtle);
  background: var(--c-accent-subtle);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.da-404-search { display: flex; align-items: center; gap: 8px; height: 52px; margin: 0 auto var(--sp-6); padding-inline: 14px 6px; max-width: 480px; border: 1px solid var(--c-border); border-radius: var(--r-search); background: var(--c-surface); color: var(--c-text-3); box-shadow: var(--c-search-shadow); }
.da-404-search:focus-within { outline: 3px solid var(--c-focus-ring); border-color: var(--c-brand); }
.da-404-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--c-text); font: inherit; font-size: 15px; }
.da-404-search button { flex: none; height: 40px; padding-inline: 16px; border: 0; border-radius: var(--r-btn); background: var(--c-brand); color: var(--c-on-brand); font: inherit; font-size: 14px; font-weight: 700; }
.da-404-search button:hover { background: var(--c-brand-hover); }
html[dir="rtl"] .pw-404__title { line-height: 1.55; letter-spacing: 0; }
html[dir="rtl"] .pw-404__msg { line-height: 1.95; }

/* ---------- Health magazine: list ---------- */
body .blog-wrapper { background: var(--c-bg) !important; }
.blog-wrapper .breadcrumb { font-size: 13px; }
.blog-wrapper .breadcrumb a { color: var(--c-text-2); text-decoration: none; }
.blog-wrapper .breadcrumb-item.active, .blog-wrapper .breadcrumb-item + .breadcrumb-item::before { color: var(--c-text-3); }
.blog-wrapper h1 { color: var(--c-text-strong) !important; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.blog-wrapper h1 .fas { color: var(--c-brand) !important; }
.blog-wrapper .lead { color: var(--c-text-2) !important; max-width: 62ch; margin-inline: auto; font-size: 1rem; line-height: 1.85; }
.blog-wrapper h2.h5 { color: var(--c-text-strong); }
.blog-wrapper .blog-card, .blog-wrapper .card { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; }
.blog-wrapper .blog-card:hover { border-color: var(--c-brand) !important; box-shadow: var(--c-shadow-1) !important; transform: translateY(-2px); }
.blog-wrapper .blog-card .card-title a, .blog-wrapper .blog-card .text-dark, .blog-wrapper .blog-card-title-link { color: var(--c-text-strong) !important; }
.blog-wrapper .blog-card .card-title a:hover { color: var(--c-brand-text) !important; }
.blog-wrapper .blog-excerpt, .blog-wrapper .card-text { color: var(--c-text-2) !important; }
.blog-wrapper .text-muted { color: var(--c-text-3) !important; }
.blog-wrapper .card-body a:not(.badge):not(.btn), .blog-wrapper .list-group-item { color: var(--c-text); }
.blog-wrapper .list-group-item { background: transparent; border-color: var(--c-border); }
.blog-wrapper .list-group-item:hover { background: var(--c-surface-2); color: var(--c-brand-text); }
.blog-wrapper .badge.bg-primary.bg-opacity-10 { background: var(--c-brand-subtle) !important; color: var(--c-on-brand-subtle) !important; }
.blog-wrapper .blog-tag:hover { background: var(--c-brand) !important; color: var(--c-on-brand) !important; }
.blog-wrapper .blog-empty-state {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: none !important;
}
.blog-wrapper .blog-empty-state h3 { color: var(--c-text-strong) !important; }
.blog-wrapper .blog-empty-state p { color: var(--c-text-2) !important; }
.blog-wrapper .blog-empty-icon {
  background: var(--c-brand-subtle) !important;
  color: var(--c-brand-text) !important;
}
.blog-wrapper .blog-empty-cta {
  background: var(--c-brand) !important;
  color: var(--c-on-brand) !important;
  border-radius: var(--r-btn) !important;
  box-shadow: var(--c-cta-shadow) !important;
}
.blog-wrapper .blog-empty-cta:hover { background: var(--c-brand-hover) !important; color: var(--c-on-brand) !important; }
.blog-wrapper .blog-films-head h2 { color: var(--c-text-strong) !important; }
.blog-wrapper .blog-films-head p { color: var(--c-text-2) !important; }
.blog-wrapper .blog-film-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
}
.blog-wrapper .blog-film-card:hover {
  border-color: var(--c-brand) !important;
  box-shadow: var(--c-shadow-1) !important;
}
.blog-wrapper .blog-film-copy h3 { color: var(--c-text-strong) !important; }
.blog-wrapper .blog-film-copy p { color: var(--c-text-2) !important; }
.blog-wrapper .blog-film-play:focus-visible { outline-color: var(--c-brand) !important; }
.blog-wrapper .blog-film-go { color: var(--c-brand-text) !important; }
@media (prefers-reduced-motion: reduce) {
  .blog-wrapper .blog-card:hover { transform: none; }
}

/* ---------- FAQ ---------- */
/* Fixed deep greens keep white hero text >=5:1 in both themes. */
body .hero-faq { background: linear-gradient(135deg, #047857 0%, #03664A 100%) !important; border-radius: 0 0 var(--r-xl) var(--r-xl); }
body .hero-faq h1, body .hero-faq .lead { color: #FFFFFF !important; }
body .hero-faq .lead { opacity: 0.94; max-width: 62ch; margin-inline: auto; line-height: 1.75; }
body .faq-card, body .sidebar-group { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg) !important; backdrop-filter: none !important; box-shadow: var(--c-shadow-1) !important; }
body .faq-question { color: var(--c-text-strong) !important; line-height: 1.65; gap: 12px; }
body .faq-question:hover { background: var(--c-surface-2) !important; }
body .faq-question .icon { color: var(--c-brand-text) !important; flex: none; }
body .faq-answer { color: var(--c-text-2) !important; line-height: 1.8; }
body .faq-answer.open { max-height: 1200px !important; }
body .faq-answer p, body .faq-card p, body .faq-card li { color: var(--c-text-2) !important; }
body .faq-card [style*="color:#666"],
body .faq-card [style*="color: #666"],
body .faq-card [style*="color:#555"],
body .faq-card [style*="color: #555"],
body .sidebar-group [style*="color:#666"],
body .sidebar-group [style*="color: #666"] { color: var(--c-text-2) !important; }
body .sidebar-group h3 { color: var(--c-text-strong) !important; }
body .sidebar-group a { color: var(--c-text) !important; }
body .sidebar-group a:hover { background: var(--c-surface-2) !important; color: var(--c-brand-text) !important; }
body .sidebar-group p { color: var(--c-text-2) !important; }
body .sidebar-group .badge { background: var(--c-brand) !important; color: var(--c-on-brand) !important; margin-inline-start: 8px; }
html[dir="rtl"] body .faq-question { line-height: 1.75; }
html[dir="rtl"] body .faq-answer { line-height: 1.95; }

/* ---------- Guide / support (light + dark remint) ---------- */
/* Legacy inline styles hard-code beige surfaces and #2d3748 headings.
   Remint beige islands to tokens. Keep the guide green help CTA branded. */

/* Page canvas (support/guide templates paint a warm gradient on body). */
body:has(.support-hero),
body:has(.guide-hero) {
  background: var(--c-bg) !important;
}
html[data-theme="dark"] body:has(.support-hero),
html[data-theme="dark"] body:has(.guide-hero) {
  background: var(--c-bg) !important;
}

/* Light-mode beige → clinical calm surfaces */
body:has(.support-hero) :is(.step-card, .timeline-content, .safety-card, .contact-item, .ticket-item, .accordion-item, .file-upload-wrapper),
body:has(.support-hero) .support-hero ~ .container .support-card,
body:has(.guide-hero) :is(.step-card, .timeline-content, .safety-card, .faq-card, .accordion-item) {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
  box-shadow: var(--c-shadow-1) !important;
  backdrop-filter: none !important;
}
body:has(.support-hero) .support-hero ~ .container :is(h2, h3, h4, h5, h6, .text-dark):not(.chat-cta-title),
body:has(.guide-hero) :is(.step-card, .timeline-content, .safety-card, .faq-card) :is(h2, h3, h4, h5, h6, strong, .text-dark) {
  color: var(--c-text-strong) !important;
}
body:has(.support-hero) .support-hero ~ .container :is(p, li, small, .text-muted):not(.chat-cta-description),
body:has(.guide-hero) :is(.step-card, .timeline-content, .safety-card, .faq-card) :is(p, li, small, .text-muted) {
  color: var(--c-text-2) !important;
}
body:has(.support-hero) .support-hero ~ .container :is(.text-primary, h5.text-primary, .fw-bold.text-primary) {
  color: var(--c-brand-text) !important;
}
body:has(.support-hero) .support-hero ~ .container :is(.form-control, .form-select) {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border-strong) !important;
}
/* Support / guide heroes: mint clinical band instead of cream gradient */
.support-hero, .guide-hero {
  background: linear-gradient(160deg, var(--c-hero-from), var(--c-surface)) !important;
  border-block-end: 1px solid var(--c-border);
}
.support-hero :is(h1, .hero-title),
.guide-hero :is(h1, .hero-title) {
  color: var(--c-text-strong) !important;
}
.support-hero :is(p, .lead, .hero-subtitle),
.guide-hero :is(p, .lead, .hero-subtitle) {
  color: var(--c-text-2) !important;
}

/* Coverage: brand-green hero (white type) + token cards */
.coverage-hero {
  background: linear-gradient(135deg, #047857 0%, #03664A 100%) !important;
  padding: 56px 0 48px;
  margin-block-end: 36px;
}
.coverage-hero h1 { color: #FFFFFF !important; font-weight: 800; }
.coverage-hero .coverage-kicker { color: rgba(255, 255, 255, 0.85) !important; }
.coverage-hero .coverage-lead { color: rgba(255, 255, 255, 0.92) !important; }
.coverage-nap, .coverage-region {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg);
  color: var(--c-text);
  box-shadow: var(--c-shadow-1);
}
.coverage-nap a { color: var(--c-brand-text) !important; font-weight: 600; }
.coverage-region h3 { color: var(--c-text-strong) !important; }
.coverage-hub, .coverage-faq dd { color: var(--c-text-2) !important; }
.coverage-faq dt { color: var(--c-text-strong) !important; }
/* Shipping + coverage body links — never Bootstrap blue on dark mint canvas */
body:has(.coverage-hero) main a,
body:has(.coverage-hero) .container > p a {
  color: var(--c-brand-text) !important;
  text-underline-offset: 3px;
}
body:has(.coverage-hero) main a:hover,
body:has(.coverage-hero) .container > p a:hover {
  color: var(--c-brand-hover) !important;
}

/* Legal layout: mint clinical hero + token related box */
body .legal-hero .btn-outline-success,
body .legal-related .btn-outline-success,
body .legal-aside-card .btn-outline-success,
body:has(.legal-hero) .btn-outline-success {
  background: var(--c-surface) !important;
  color: var(--c-brand-text) !important;
  border: 1.5px solid var(--c-brand) !important;
  border-radius: var(--r-btn) !important;
}
body .legal-hero .btn-success,
body .legal-related .btn-success,
body:has(.legal-hero) .btn-success {
  background: var(--c-brand) !important;
  color: var(--c-on-brand) !important;
  border-color: var(--c-brand) !important;
  border-radius: var(--r-btn) !important;
}
body:has(.legal-hero) main a:not(.btn) {
  color: var(--c-brand-text) !important;
}
body .legal-hero {
  background: linear-gradient(160deg, var(--c-hero-from), var(--c-surface)) !important;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
}
body .legal-hero :is(h1, .legal-title) { color: var(--c-text-strong) !important; }
body .legal-hero :is(p, .lead) { color: var(--c-text-2) !important; }
body .legal-related,
body .legal-aside-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
}
html[data-theme="dark"] .timeline-section,
html[data-theme="dark"] .faq-section {
  background: var(--c-bg) !important;
}

/* Beige cards — support-page .support-card only (not the guide green CTA). */
html[data-theme="dark"] :is(.step-card, .timeline-content, .safety-card, .faq-card, .contact-item, .ticket-item, .accordion-item, .file-upload-wrapper, .live-support-stats),
html[data-theme="dark"] .support-hero ~ .container .support-card {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Support headings: template sets h1–h6 / .text-dark to #2d3748 !important. */
html[data-theme="dark"] .support-hero ~ .container :is(h2, h3, h4, h5, h6, .text-dark, .card-body h5, .card-body h6),
html[data-theme="dark"] :is(.step-card, .timeline-content, .safety-card, .faq-card, .contact-item, .ticket-item, .accordion-item, .safety-content)
  :is(h2, h3, h4, h5, h6, strong, .text-dark) {
  color: var(--c-text-strong) !important;
}
html[data-theme="dark"] .support-hero ~ .container :is(.text-primary, h5.text-primary, .fw-bold.text-primary),
html[data-theme="dark"] .support-hero ~ .container .ticket-item .text-primary {
  color: var(--c-brand-text) !important;
}
html[data-theme="dark"] .support-hero ~ .container :is(p, li, small, .text-muted, .card-body p, .card-body small),
html[data-theme="dark"] :is(.step-card, .timeline-content, .safety-card, .faq-card, .contact-item, .ticket-item, .accordion-item, .safety-content)
  :is(p, li, small, .text-muted) {
  color: var(--c-text-2) !important;
}
html[data-theme="dark"] :is(.contact-item, .ticket-item):hover,
html[data-theme="dark"] .faq-question:hover {
  background: var(--c-surface-2) !important;
}
html[data-theme="dark"] .accordion-button {
  background: var(--c-surface) !important;
  color: var(--c-text-strong) !important;
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: var(--c-surface-2) !important;
  color: var(--c-text-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .accordion-body {
  color: var(--c-text-2) !important;
  background: var(--c-surface) !important;
}
html[data-theme="dark"] .support-hero ~ .container :is(.form-control, .form-select),
html[data-theme="dark"] .support-hero ~ .container .support-card :is(.form-control, .form-select) {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}

/* Guide green help card — keep brand gradient + light type in both themes. */
.guide-hero ~ .container .support-card {
  background: linear-gradient(135deg, #047857 0%, #03664A 100%) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.guide-hero ~ .container .support-card :is(h2, h3, h4, h5, h6, strong) {
  color: #FFFFFF !important;
}
.guide-hero ~ .container .support-card :is(p, li, small) {
  color: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="dark"] .guide-hero ~ .container .support-card {
  box-shadow: var(--c-cta-shadow) !important;
}

/* Live-support stats sit on the green chat CTA — keep readable, not flattened white. */
html[data-theme="dark"] .chat-cta-card .live-support-stats {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
html[data-theme="dark"] .chat-cta-card .live-support-stats .stat strong {
  color: #FFFFFF !important;
}

/* International shipping body: a calm reading card under the hero instead of
   loose paragraphs, with the FAQ as separated question blocks. */
.coverage-body { margin-top: -28px; position: relative; }
.coverage-body > p:first-child {
  padding: 22px 24px; border: 1px solid var(--c-border); border-radius: var(--r-lg, 20px);
  background: var(--c-surface); color: var(--c-text); font-size: 15.5px; line-height: 1.9;
}
.coverage-body > p:nth-child(2) { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.coverage-body > p:nth-child(2) a { font-weight: 700; color: var(--c-brand-text); text-decoration: none; }
.coverage-body > h2 { margin-top: 32px; font-size: 20px; font-weight: 800; color: var(--c-text-strong); }
.coverage-body .coverage-faq { display: grid; gap: 10px; margin: 0; }
.coverage-body .coverage-faq dt {
  margin: 0; padding: 16px 20px 4px; border: 1px solid var(--c-border); border-bottom: 0;
  border-radius: 16px 16px 0 0; background: var(--c-surface); font-size: 15px; font-weight: 700;
}
.coverage-body .coverage-faq dd {
  margin: -10px 0 0; padding: 0 20px 16px; border: 1px solid var(--c-border); border-top: 0;
  border-radius: 0 0 16px 16px; background: var(--c-surface); font-size: 14.5px; line-height: 1.85;
}

/* Support page, Clinical calm: one brand accent instead of rainbow gradients,
   a surface chat card instead of a saturated green slab, no shouting buttons. */
html body:has(.chat-cta-card) .chat-cta-card {
  background: var(--c-surface) !important; background-image: none !important; color: var(--c-text) !important;
  border: 1px solid var(--c-border) !important; box-shadow: none !important;
}
html body:has(.chat-cta-card) .chat-cta-card::before, .chat-cta-card::after { display: none !important; }
html body:has(.chat-cta-card) .chat-cta-card .chat-cta-icon { color: var(--c-brand-text) !important; background: transparent !important; }
html body:has(.chat-cta-card) .chat-cta-card .chat-cta-icon i { color: var(--c-brand-text) !important; }
html body:has(.chat-cta-card) .chat-cta-card .chat-cta-title { color: var(--c-text-strong) !important; }
html body:has(.chat-cta-card) .chat-cta-card p { color: var(--c-text-2) !important; }
html body:has(.chat-cta-card) .chat-cta-card .chat-open-btn { background: var(--c-brand) !important; color: var(--c-on-brand) !important; border: 0 !important; box-shadow: none !important; }
html body:has(.chat-cta-card) .chat-cta-card .chat-feature { background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important; box-shadow: none !important; }
html body:has(.chat-cta-card) .chat-cta-card .chat-feature-icon { color: var(--c-brand-text) !important; }
html body:has(.chat-cta-card) .chat-cta-card .chat-feature-title { color: var(--c-text-strong) !important; }
html body:has(.chat-cta-card) .chat-cta-card .chat-feature-desc { color: var(--c-text-2) !important; }
.contact-item .contact-icon { background: var(--c-brand-subtle) !important; color: var(--c-brand-text) !important; box-shadow: none !important; }
.contact-item .contact-icon i { color: var(--c-brand-text) !important; }
.contact-item :is(.btn-outline-primary, .btn-outline-info, .btn-outline-danger) {
  border-color: var(--c-border-strong, var(--c-border)) !important; color: var(--c-brand-text) !important; background: transparent !important;
}
.contact-item :is(.btn-outline-primary, .btn-outline-info, .btn-outline-danger):hover { background: var(--c-brand-subtle) !important; }
.alert-custom.alert-info { background: var(--c-brand-subtle) !important; border: 1px solid var(--c-border) !important; color: var(--c-text) !important; }
.alert-custom.alert-info i { color: var(--c-brand-text) !important; }
#contact-form .btn-primary { text-transform: none !important; letter-spacing: 0 !important; animation: none !important; }
#contact-form .text-primary, .support-card .text-primary { color: var(--c-brand-text) !important; }
html body:has(.chat-cta-card) .chat-cta-card .chat-cta-description { color: var(--c-text-2) !important; }
