/* MedMojo blog article template, logo v2 (30-SEP-2026). Linked by every page in /blog/
   except the index, after /assets/mm.css (tokens come from there). One reading design:
   haze header, centered ~720px column, Fraunces headings, navy CTA band. */

.article { background: #fff; }

/* ---------- header on the soft haze ---------- */
.article-header { padding: 56px 0 52px; }
.article-header::before { content: ""; position: absolute; inset: -20% -10% -20% 30%; z-index: 0; filter: blur(46px); pointer-events: none;
  background: radial-gradient(40% 50% at 70% 35%, rgba(127,217,190,.55), transparent 72%), radial-gradient(34% 42% at 92% 70%, rgba(86,170,196,.28), transparent 72%); }
.article-header-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 0 40px; }
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.breadcrumb a { color: #0D7E6E; text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: #9AA8B8; margin: 0 8px; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tag, .category-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0D7E6E; background: var(--tint-teal); padding: 6px 12px; border-radius: 999px; line-height: 1.3; }
.category-tag { margin-bottom: 20px; }
.tag-mission { color: var(--navy); background: var(--tint-navy); }
.article-header h1 { font-size: clamp(34px, 4.6vw, 50px); line-height: 1.12; margin: 0 0 22px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 15px; color: var(--muted); }
.article-meta strong { color: var(--navy); font-weight: 700; }

/* ---------- reading column ---------- */
.article-main { max-width: 800px; margin: 0 auto; padding: 56px 40px 88px; }
.article-body { font-size: 19px; line-height: 1.75; color: #2A3850; }
.article-body > * { margin-top: 0; }
.article-body p { margin: 0 0 1.25em; }
.article-body h2 { font-size: clamp(27px, 3vw, 33px); line-height: 1.2; margin: 1.9em 0 .6em; }
.article-body h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.3; margin: 1.6em 0 .5em; }
.article-body strong { color: var(--navy); font-weight: 700; }
.article-body em { color: #0D7E6E; font-style: normal; font-weight: 500; }
.article-body a, .article-main a:not(.mm-btn):not(.back-link) { color: #0D7E6E; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body a:hover { color: #0D7E6E; }

/* lists */
.article-body ul { list-style: none; margin: 0 0 1.5em; padding: 0; }
.article-body ul li { position: relative; padding: 0 0 0 30px; margin: 0 0 .75em; }
.article-body ul li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.article-body ul.weapon-list li { padding: 18px 20px 18px 50px; margin: 0 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.article-body ul.weapon-list li::before { left: 22px; top: calc(18px + .72em); }

/* callouts and quotes: teal rule on the mist tint */
.callout, .pull-quote, .gold-callout, .assessment-handoff { background: var(--mist); border-left: 4px solid var(--teal); border-radius: 0 14px 14px 0; padding: 22px 26px; margin: 2em 0; }
.callout p, .pull-quote p, .gold-callout p { margin: 0; }
.callout p + p { margin-top: .8em; }
.pull-quote p { font-family: var(--serif); font-weight: 600; font-size: 23px; line-height: 1.45; color: var(--navy); letter-spacing: -.005em; }
.gold-callout { border-left-color: var(--deep); background: linear-gradient(135deg, #EEF8F4, var(--mist)); }
.gold-callout .headline { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.35; color: var(--navy); margin: 0 0 14px; }
.gold-callout .headline + p { margin-top: 0; }

/* stats */
.stat-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 2em 0; }
.stat-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; text-align: center; box-shadow: var(--shadow); }
.stat-number { display: block; font-family: var(--serif); font-weight: 600; font-size: 38px; line-height: 1.1; color: #0D7E6E; margin-bottom: 8px; }
.stat-label { display: block; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* calculator rows */
.gold-callout .calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.gold-callout .calc-row:last-of-type { border-bottom: 0; }
.calc-value { font-family: var(--serif); font-weight: 600; font-size: 22px; color: #0D7E6E; white-space: nowrap; }
.calc-note { margin-top: 16px !important; font-size: 15px; color: var(--muted); line-height: 1.55; }

/* numbered advantages */
.article-body ul.advantages-list li { padding: 22px 24px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.article-body ul.advantages-list li::before { display: none; }
.adv-number { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0D7E6E; margin-bottom: 6px; }
.adv-title { font-family: var(--card-title); font-weight: 600; font-size: 19px; line-height: 1.35; color: var(--navy); margin-bottom: 8px; }
.adv-body { margin: 0 !important; font-size: 17px; }

/* tables */
.table-wrap { margin: 2em 0; border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: 3px solid #0D7E6E; outline-offset: 2px; } /* 11-OCT-2026 a11y: a scrolling table takes keyboard focus */
.data-table, .comparison-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.data-table th, .comparison-table th { background: var(--mist); color: var(--navy); text-align: left; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.data-table td, .comparison-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table tr:last-child td, .comparison-table tr:last-child td { border-bottom: 0; }
.data-table td:first-child, .comparison-table td:first-child { font-weight: 700; color: var(--navy); }
.comparison-table td.corporate { color: var(--navy); }
.comparison-table td.independent { color: #96600A; } /* 11-OCT-2026 a11y: var(--amber) was 4.46:1 */

/* ---------- closing CTA: navy band card ---------- */
.article-cta { position: relative; overflow: hidden; margin: 64px 0 0; padding: 48px 44px; border-radius: 24px; background: var(--band); color: #C3D0DC; text-align: left; }
.article-cta::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(380px 240px at 25% 30%, rgba(127,217,190,.14), transparent 70%); pointer-events: none; }
.article-cta > * { position: relative; }
.article-cta h3 { font-family: var(--serif); font-weight: 600; color: #fff; font-size: 34px; line-height: 1.15; letter-spacing: -.015em; margin: 0 0 12px; }
.article-cta p { color: #C3D0DC; font-size: 17px; line-height: 1.6; margin: 0 0 26px; max-width: 560px; }
.article-cta .mm-btn { color: #fff; text-decoration: none; }
.article-cta .sub-note { margin: 18px 0 0; font-size: 14.5px; color: #9FB0C2; }
.article-cta .sub-note a, .article-cta .assessment-handoff a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.article-cta .assessment-handoff { margin: 22px 0 0; padding: 16px 0 0; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.14); border-radius: 0; }
.article-cta .assessment-handoff p { margin: 0; font-size: 15px; color: #C3D0DC; }

.back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; font-weight: 700; font-size: 15.5px; color: #0D7E6E; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* ---------- phone ---------- */
@media (max-width: 700px) {
  .article-header { padding: 36px 0 34px; }
  .article-header-inner, .article-main { padding-left: 16px; padding-right: 16px; }
  .article-main { padding-top: 36px; padding-bottom: 64px; }
  .article-header h1 { font-size: 32px; }
  .article-body { font-size: 18px; }
  .article-body h2 { font-size: 26px; }
  .article-body h3 { font-size: 20px; }
  .pull-quote p { font-size: 20px; }
  .callout, .pull-quote, .gold-callout { padding: 18px 18px; }
  .stat-block { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-item { padding: 18px 12px; }
  .stat-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-number { font-size: 30px; }
  .stat-label { font-size: 14px; }
  .gold-callout .calc-row { font-size: 15.5px; }
  .calc-value { font-size: 19px; }
  .data-table, .comparison-table { font-size: 15px; }
  .data-table th, .comparison-table th, .data-table td, .comparison-table td { padding: 12px 12px; }
  .article-cta { padding: 34px 22px; border-radius: 20px; }
  .article-cta h3 { font-size: 28px; }
  .article-cta .mm-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-btn, .back-link { transition: none; }
  .mm-btn:hover { transform: none; }
}