/* =========================================================
   BASE
   ========================================================= */
:root {
  --pub-bg: #eef1f0;
  --pub-ink: #16262a;
  --pub-teal: #0e4a52;
  --pub-teal-dark: #0a373d;
  --pub-teal-light: #12707d;
  --pub-card: #ffffff;
  --pub-border: #d7dedd;
  --pub-crimson: #b23b2e;
  --pub-crimson-dark: #8f2e24;

  --off-bg: #fdf6ef;
  --off-hero: #f4ddc7;
  --off-navy: #182430;
  --off-navy-soft: #4b5563;
  --off-coral: #e15b48;
  --off-coral-dark: #c4432f;
  --off-line: #e7dccb;
  --off-card: #ffffff;
}

* { box-sizing: border-box; }

[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

img, video { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 8px 14px;
  z-index: 100;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* Consistent visible focus state everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   PUBLICATION FAMILY (advertorial + about)
   ========================================================= */
.pub-page {
  background: var(--pub-bg);
  color: var(--pub-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pub-serif {
  font-family: Georgia, "Times New Roman", Cambria, serif;
}

.pub-masthead {
  background: var(--pub-teal);
  color: #f4f7f6;
}

.pub-masthead__brand {
  font-family: Georgia, "Times New Roman", Cambria, serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pub-ribbon {
  background: #d9dfde;
  color: #3c4a4c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pub-breadcrumb {
  font-size: 13px;
  color: #57696b;
}
.pub-breadcrumb a { color: var(--pub-teal-light); }
.pub-breadcrumb a:hover { text-decoration: underline; }

.pub-h1 {
  font-family: Georgia, "Times New Roman", Cambria, serif;
  font-weight: 700;
  color: #14252a;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.pub-standfirst {
  font-family: Georgia, "Times New Roman", Cambria, serif;
  color: #23393d;
  line-height: 1.5;
}

.pub-byline {
  font-size: 13px;
  color: #57696b;
  border-top: 1px solid var(--pub-border);
  border-bottom: 1px solid var(--pub-border);
}

.pub-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3f2;
  color: var(--pub-teal);
  border: 1px solid var(--pub-border);
  transition: background 0.15s ease, transform 0.15s ease;
}
.pub-share-btn:hover { background: var(--pub-teal); color: #fff; transform: translateY(-1px); }

.pub-article {
  font-size: 17px;
  line-height: 1.7;
  color: #213437;
}
.pub-article p { margin: 0 0 1.1em; }
.pub-article strong { color: #0e2b2f; }

.pub-h2 {
  font-family: Georgia, "Times New Roman", Cambria, serif;
  font-weight: 700;
  color: #14252a;
  line-height: 1.2;
}

.pub-h3 {
  font-family: Georgia, "Times New Roman", Cambria, serif;
  font-weight: 700;
  color: #14252a;
}

.pub-card {
  background: var(--pub-card);
  border: 1px solid var(--pub-border);
  border-radius: 10px;
}

.pub-methodology {
  background: #f4f7f6;
  border: 1px solid var(--pub-border);
  border-left: 5px solid var(--pub-teal);
  border-radius: 8px;
}

.pub-rate-box {
  background: #fbf8ee;
  border: 1px solid #e7dcb8;
  border-radius: 10px;
}

.pub-rate-box__label {
  display: inline-block;
  background: var(--pub-teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}

.pub-rate-row {
  border-bottom: 1px dashed #d8cda0;
}
.pub-rate-row:last-child { border-bottom: none; }

.pub-callout {
  background: #eef8f7;
  border: 1px solid #b9dfda;
  border-radius: 10px;
}
.pub-callout__kicker {
  color: var(--pub-teal-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pub-entry {
  border-left: 3px solid var(--pub-teal-light);
}
.pub-entry__date {
  font-family: Georgia, "Times New Roman", Cambria, serif;
  font-weight: 700;
  color: var(--pub-teal-dark);
}

.pub-score-track {
  height: 10px;
  border-radius: 999px;
  background: #dfe6e5;
  overflow: hidden;
}
.pub-score-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pub-teal-light), var(--pub-teal));
}

.pub-table-wrap { overflow-x: auto; }
.pub-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.pub-table th, .pub-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--pub-border);
  font-size: 15px;
}
.pub-table th {
  background: #f4f7f6;
  font-family: Georgia, "Times New Roman", Cambria, serif;
}

.pub-verdict {
  background: var(--pub-teal-dark);
  color: #f4f7f6;
  border-radius: 14px;
}
.pub-verdict__score {
  font-family: Georgia, "Times New Roman", Cambria, serif;
  font-weight: 700;
}

/* Accent-borrowed CTA + button-row treatment (from GlucoWellness24 verdict box) */
.pub-cta-crimson {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pub-crimson);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 26px;
  transition: background 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 18px -8px rgba(178, 59, 46, 0.6);
}
.pub-cta-crimson:hover { background: var(--pub-crimson-dark); transform: translateY(-1px); }

.pub-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 24px;
  transition: background 0.18s ease, color 0.18s ease;
}
.pub-cta-outline:hover { background: #fff; color: var(--pub-teal-dark); }

.pub-sidebar-card img { border-radius: 8px 8px 0 0; }

.pub-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pub-teal-dark);
  background: #dff0ee;
  border-radius: 999px;
  padding: 4px 10px;
}

.pub-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
}

.pub-video-frame {
  border-radius: 10px;
  overflow: hidden;
  background: #0a2226;
}

/* =========================================================
   OFFER FAMILY (join + legal pages + contact)
   ========================================================= */
.off-page {
  background: var(--off-bg);
  color: var(--off-navy);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.off-nav__logo {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--off-navy);
}

.off-topbar {
  background: var(--off-navy);
  color: #f7ece1;
  font-size: 13px;
}

.off-hero {
  background: var(--off-hero);
}

.off-h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--off-navy);
  line-height: 1.05;
}

.off-h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--off-navy);
  line-height: 1.15;
}

.off-h3 {
  font-weight: 700;
  color: var(--off-navy);
}

.off-lede {
  color: var(--off-navy-soft);
  line-height: 1.6;
}

/* Primary CTA pill with trailing icon circle — from SupportNinja primary + reinforced by Jive accent */
.off-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--off-coral);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 8px 14px 26px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.off-cta:hover { background: var(--off-coral-dark); transform: translateY(-1px); }
.off-cta__icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  color: var(--off-coral);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.off-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  color: var(--off-navy);
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 22px;
  border: 2px solid var(--off-navy);
  transition: background 0.18s ease, color 0.18s ease;
}
.off-cta-ghost:hover { background: var(--off-navy); color: #fff; }

.off-section-alt {
  background: #eee3d3;
}

.off-section-dark {
  background: var(--off-navy);
  color: #f7ece1;
}

.off-card {
  background: var(--off-card);
  border: 1px solid var(--off-line);
  border-radius: 16px;
}

.off-package {
  background: var(--off-card);
  border: 2px solid var(--off-navy);
  border-radius: 20px;
}
.off-package--highlight {
  border-color: var(--off-coral);
  box-shadow: 0 18px 40px -20px rgba(225, 91, 72, 0.45);
}
.off-package__price {
  font-weight: 800;
  color: var(--off-navy);
}
.off-package__badge {
  display: inline-block;
  background: var(--off-coral);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 12px;
}

.off-addon {
  background: var(--off-card);
  border: 1px solid var(--off-line);
  border-radius: 14px;
}
.off-addon__price {
  font-weight: 800;
  color: var(--off-coral-dark);
}

.off-perk {
  background: var(--off-card);
  border: 1px solid var(--off-line);
  border-radius: 12px;
}
.off-perk__check {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #e7f3e9;
  color: #1f7a3d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.off-rate-table-wrap { overflow-x: auto; }
.off-rate-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
  background: #fff;
}
.off-rate-table caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 8px;
  color: var(--off-navy);
}
.off-rate-table th, .off-rate-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--off-line);
  font-size: 15px;
}
.off-rate-table th { background: #f7efe4; }
.off-rate-table--boxed {
  border: 2px solid var(--off-navy);
  border-radius: 14px;
  overflow: hidden;
}

/* Testimonial / quote card shape — borrowed from Jive accent */
.off-quote-card {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 45px -25px rgba(24, 36, 48, 0.35);
}
.off-quote-mark {
  font-family: Georgia, serif;
  color: var(--off-coral);
  line-height: 1;
}

.off-step {
  background: #fff;
  border: 1px solid var(--off-line);
  border-radius: 16px;
}
.off-step__num {
  font-weight: 800;
  color: var(--off-coral);
  font-family: Georgia, serif;
}

.off-limits {
  background: #fdf1e6;
  border: 1px solid #eecfa9;
  border-radius: 14px;
}

.off-video-frame {
  border-radius: 18px;
  overflow: hidden;
  background: #10181f;
}

.off-form-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--off-navy);
  margin-bottom: 6px;
}
.off-form-field input,
.off-form-field textarea {
  width: 100%;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid #cbb8a0;
  border-radius: 10px;
  background: #fff;
  color: var(--off-navy);
}
.off-form-field input:focus,
.off-form-field textarea:focus {
  outline: 3px solid #2563eb;
  outline-offset: 1px;
}

.off-checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--off-coral);
}

.off-success {
  background: #e7f3e9;
  border: 1px solid #a9d7b6;
  border-radius: 12px;
  color: #175028;
}

.off-mobile-nav {
  background: var(--off-bg);
  border-top: 1px solid var(--off-line);
}

.off-nav-link {
  color: var(--off-navy);
  font-weight: 600;
}
.off-nav-link:hover { color: var(--off-coral-dark); }

/* =========================================================
   SHARED: legal prose, disclaimer, footer
   ========================================================= */
.legal-prose h2 {
  font-weight: 800;
  color: var(--off-navy);
}
.legal-prose h3 {
  font-weight: 700;
  color: var(--off-navy);
}
.legal-prose p, .legal-prose li {
  color: #384656;
  line-height: 1.7;
}
.legal-prose ul { padding-left: 1.2em; }

.site-disclaimer {
  background: #f1eee6;
  border-top: 1px solid #ddd6c6;
  border-bottom: 1px solid #ddd6c6;
  color: #3a3f36;
  font-size: 14px;
  line-height: 1.6;
}
.site-disclaimer a { color: #0e4a52; font-weight: 600; text-decoration: underline; }

.site-footer {
  background: #12191f;
  color: #cfd7d6;
}
.site-footer a { color: #e8ece9; }
.site-footer a:hover { color: #ffffff; text-decoration: underline; }
.site-footer__company {
  font-size: 14px;
  line-height: 1.7;
  color: #b9c3c1;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 14px;
}
.site-footer__heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa19d;
}

/* =========================================================
   RESPONSIVE HELPERS
   ========================================================= */
.aspect-16-9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.aspect-16-9 video, .aspect-16-9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .pub-sticky { position: sticky; top: 96px; }
}