/* ============================================================
   MentraNote — Blog / Resources stylesheet
   Self-contained, brand-aligned typography for long-form SEO
   content pages under /blog/. Loads AFTER the design-system
   tokens so it can reference the brand palette. Keep edits here
   (do not inline per-article styles) so the blog stays consistent.
   ============================================================ */

:root {
  --mn-ink: #0f1a2e;          /* body text on light */
  --mn-ink-soft: #425066;     /* secondary text */
  --mn-teal: #0e7c86;         /* brand accent (links/headings) */
  --mn-teal-deep: #0a5b63;
  --mn-amber: #F7BC45;        /* brand highlight */
  --mn-line: #e5e9f0;         /* hairlines */
  --mn-bg: #ffffff;
  --mn-bg-soft: #f6f8fb;      /* callouts, code */
  --mn-radius: 14px;
}

/* ---- Top bar ---- */
.mnb-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px;
  background: #0b1222; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mnb-topbar a { text-decoration: none; }
.mnb-brand { display: flex; align-items: center; gap: 10px; }
.mnb-brand img { height: 40px; width: auto; display: block; }
.mnb-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mnb-nav a { color: rgba(255,255,255,.82); font-size: 14.5px; font-weight: 600; }
.mnb-nav a:hover { color: #fff; }
.mnb-cta {
  background: var(--mn-amber); color: #1a1205 !important; font-weight: 800;
  padding: 9px 16px; border-radius: 10px; font-size: 14px;
}
.mnb-cta:hover { filter: brightness(1.04); }

/* ---- Article shell ---- */
.mnb-wrap {
  max-width: 760px; margin: 0 auto; padding: 40px 20px 72px;
  color: var(--mn-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17.5px; line-height: 1.72;
}
.mnb-breadcrumb { font-size: 13.5px; color: var(--mn-ink-soft); margin-bottom: 18px; }
.mnb-breadcrumb a { color: var(--mn-teal); text-decoration: none; }
.mnb-breadcrumb a:hover { text-decoration: underline; }
.mnb-eyebrow {
  text-transform: uppercase; letter-spacing: .09em; font-size: 12.5px;
  font-weight: 800; color: var(--mn-teal); margin-bottom: 10px;
}
.mnb-wrap h1 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: clamp(30px, 5vw, 42px); line-height: 1.12; letter-spacing: -.02em;
  color: var(--mn-ink); margin: 0 0 14px;
}
.mnb-meta { font-size: 14px; color: var(--mn-ink-soft); margin-bottom: 28px; }
.mnb-meta strong { color: var(--mn-ink); font-weight: 700; }
.mnb-wrap h2 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: clamp(22px, 3.4vw, 28px); letter-spacing: -.01em;
  color: var(--mn-ink); margin: 42px 0 12px; scroll-margin-top: 80px;
}
.mnb-wrap h3 { font-size: 20px; color: var(--mn-teal-deep); margin: 28px 0 8px; }
.mnb-wrap p { margin: 0 0 18px; }
.mnb-wrap a { color: var(--mn-teal); font-weight: 600; }
.mnb-wrap ul, .mnb-wrap ol { margin: 0 0 20px; padding-left: 24px; }
.mnb-wrap li { margin: 0 0 9px; }
.mnb-wrap strong { color: var(--mn-ink); }

.mnb-lead { font-size: 19.5px; color: var(--mn-ink-soft); line-height: 1.6; margin-bottom: 30px; }

/* ---- Callout / note ---- */
.mnb-note {
  background: var(--mn-bg-soft); border: 1px solid var(--mn-line);
  border-left: 4px solid var(--mn-teal); border-radius: var(--mn-radius);
  padding: 16px 18px; margin: 24px 0; font-size: 15.5px; color: var(--mn-ink-soft);
}
.mnb-note strong { color: var(--mn-teal-deep); }

/* ---- Comparison table ---- */
.mnb-table-wrap { overflow-x: auto; margin: 24px 0; }
.mnb-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.mnb-table th, .mnb-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--mn-line); vertical-align: top; }
.mnb-table th { background: var(--mn-bg-soft); font-weight: 700; color: var(--mn-ink); }

/* ---- FAQ ---- */
.mnb-faq { margin: 16px 0 8px; }
.mnb-faq details {
  border: 1px solid var(--mn-line); border-radius: 12px; padding: 4px 16px; margin-bottom: 10px; background: #fff;
}
.mnb-faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; color: var(--mn-ink); list-style: none; }
.mnb-faq summary::-webkit-details-marker { display: none; }
.mnb-faq summary::after { content: "+"; float: right; color: var(--mn-teal); font-weight: 800; }
.mnb-faq details[open] summary::after { content: "–"; }
.mnb-faq details p { margin: 0 0 14px; font-size: 15.5px; color: var(--mn-ink-soft); }

/* ---- Related / CTA ---- */
.mnb-cta-card {
  margin: 44px 0 0; padding: 26px 24px; border-radius: 18px;
  background: linear-gradient(135deg, #0e7c86, #0a5b63); color: #fff;
}
.mnb-cta-card h3 { color: #fff; margin: 0 0 8px; }
.mnb-cta-card p { color: rgba(255,255,255,.9); margin: 0 0 16px; }
.mnb-cta-card a.btn {
  display: inline-block; background: var(--mn-amber); color: #1a1205; font-weight: 800;
  padding: 11px 20px; border-radius: 11px; text-decoration: none;
}
.mnb-related { margin-top: 40px; border-top: 1px solid var(--mn-line); padding-top: 22px; }
.mnb-related h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--mn-ink-soft); }
.mnb-related ul { list-style: none; padding: 0; }
.mnb-related li { margin-bottom: 8px; }

.mnb-disclaimer { margin-top: 36px; font-size: 13px; color: #8a93a3; line-height: 1.6; }

/* ---- Blog index grid ---- */
.mnb-hero { max-width: 760px; margin: 0 auto; padding: 48px 20px 10px; text-align: center; }
.mnb-hero h1 { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: clamp(32px,5vw,46px); letter-spacing:-.02em; color: var(--mn-ink); margin: 0 0 12px; }
.mnb-hero p { font-size: 18px; color: var(--mn-ink-soft); max-width: 600px; margin: 0 auto; }
.mnb-grid { max-width: 940px; margin: 0 auto; padding: 30px 20px 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; }
.mnb-card { display: block; text-decoration: none; border: 1px solid var(--mn-line); border-radius: 18px; padding: 24px; background: #fff; transition: box-shadow .18s, transform .18s; }
.mnb-card:hover { box-shadow: 0 18px 40px -22px rgba(14,124,134,.5); transform: translateY(-2px); }
.mnb-card .tag { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--mn-teal); }
.mnb-card h2 { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 21px; line-height: 1.25; color: var(--mn-ink); margin: 8px 0 10px; }
.mnb-card p { font-size: 15px; color: var(--mn-ink-soft); margin: 0; }

/* ---- Footer ---- */
.mnb-footer { background: #0b1222; color: rgba(255,255,255,.7); font-size: 14px; }
.mnb-footer .inner { max-width: 940px; margin: 0 auto; padding: 30px 20px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.mnb-footer a { color: rgba(255,255,255,.8); text-decoration: none; margin-right: 18px; }
.mnb-footer a:hover { color: #fff; }

body.mnb-body { margin: 0; background: #fff; }

@media (max-width: 600px) {
  .mnb-nav { display: none; }
  .mnb-wrap { font-size: 16.5px; padding: 28px 18px 60px; }
}