/* ===========================================================================
   /assets/redesign-blog.css — component layer for the `blog-*` articles.

   109 articles reference this file. It had never been committed, so every one
   of them rendered as raw unstyled HTML in production — verified live on
   2026-08-01: body font fell back to "Times New Roman", .blog-hero had 0px
   padding, comparison tables collapsed to 235px, and the browser reported
   redesign-blog.css as a failed load.

   Those articles load exactly two stylesheets: redesign-base.css (which is
   almost entirely @font-face declarations for Hanken Grotesk and sets no page
   styles) and this file. There is no third sheet to inherit from and none to
   conflict with, so this file carries the whole base layer as well as the
   components.

   The markup is untouched: every selector below targets a class the articles
   already emit. Palette and type mirror /styles.css so the two blog
   generations look like one site. Dark-only by design.
   =========================================================================== */

:root {
  --bg: #0b0805;
  --bg-grad-top: #120d08;
  --panel: #18130c;
  --panel-strong: #1e1811;
  --ink: #ecedef;
  --muted: #9c9fa8;
  --line: #26221b;
  --accent: #c8a878;
  --accent-2: #e0c79a;
  --gold-ink: #1a1408;
  --measure: 68ch;
  --shell: 1120px;
  --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg-grad-top) 0%, var(--bg) 60%);
  background-attachment: fixed;
  font-family: "Hanken Grotesk", "Aptos", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

strong { color: #fff; font-weight: 600; }
em { color: var(--accent-2); font-style: italic; }

/* --- Navigation ---------------------------------------------------------- */

.ld-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
}

.ld-nav__logo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.ld-nav__logo:hover { color: var(--accent-2); text-decoration: none; }

.ld-nav__links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ld-nav__link {
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.ld-nav__link:hover { color: #fff; background: rgba(200, 168, 120, .12); text-decoration: none; }

.ld-nav__cta {
  padding: 9px 17px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--gold-ink);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.ld-nav__cta:hover { background: var(--accent-2); text-decoration: none; transform: translateY(-1px); }

/* --- Article shell ------------------------------------------------------- */

.blog-post {
  display: block;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 28px 72px;
}

.blog-hero { padding: 56px 0 34px; border-bottom: 1px solid var(--line); }

.blog-hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.blog-tag {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid rgba(200, 168, 120, .38);
  border-radius: 999px;
  background: rgba(200, 168, 120, .09);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.blog-hero h1 {
  margin: 0 0 22px;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: #fff;
  text-wrap: balance;
}

.blog-hero__sub {
  max-width: var(--measure);
  margin: 0;
  font-size: 19px;
  line-height: 1.62;
  color: #c3c6cc;
}

/* --- Body ---------------------------------------------------------------- */

.blog-body { max-width: var(--measure); padding-top: 8px; }

.blog-body h2 {
  margin: 52px 0 18px;
  font-size: clamp(23px, 2.7vw, 30px);
  line-height: 1.25;
  font-weight: 680;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}

.blog-body h3 {
  margin: 36px 0 14px;
  font-size: 20px;
  line-height: 1.32;
  font-weight: 640;
  color: var(--accent-2);
  text-wrap: balance;
}

.blog-body p { margin: 0 0 20px; }

.blog-body ul, .blog-body ol { margin: 0 0 22px; padding-left: 22px; }
.blog-body li { margin-bottom: 11px; }
.blog-body li::marker { color: var(--accent); }

.blog-body blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  color: #c3c6cc;
  font-style: italic;
}

.blog-body code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .88em;
  color: var(--accent-2);
}

.blog-note {
  margin: 26px 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 16px;
  color: #c3c6cc;
}

/* --- Tables -------------------------------------------------------------- */
/* Comparison tables are the reason several of these articles exist, so they
   get real styling — and they must never make the page scroll sideways. */

.blog-table, .pricing-compare {
  width: 100%;
  margin: 26px 0;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}

.blog-table thead, .pricing-compare thead { background: var(--panel-strong); }

.blog-table th, .pricing-compare th {
  padding: 13px 16px;
  text-align: left;
  font-weight: 640;
  font-size: 13px;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--accent-2);
  border-bottom: 1px solid var(--line);
}

.blog-table td, .pricing-compare td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: #d6d8dd;
}

.blog-table tbody tr:last-child td,
.pricing-compare tbody tr:last-child td { border-bottom: 0; }

.blog-table tbody tr:nth-child(even),
.pricing-compare tbody tr:nth-child(even) { background: rgba(255, 255, 255, .018); }

.blog-table td:first-child, .pricing-compare td:first-child { color: #fff; font-weight: 550; }

.table-note { margin: -12px 0 24px; font-size: 14px; color: var(--muted); }

/* --- Call-to-action panels ----------------------------------------------- */

.cta-box {
  margin: 40px 0;
  padding: 28px 30px;
  border: 1px solid rgba(200, 168, 120, .3);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--panel-strong) 0%, var(--panel) 100%);
}

.cta-box h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 660;
  color: #fff;
  letter-spacing: -0.012em;
}

.cta-box p { margin: 0 0 20px; color: #c3c6cc; font-size: 16px; }

.cta-box--secondary { border-color: var(--line); }

.cta-primary, .cta-secondary {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 650;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}

.cta-primary { background: var(--accent); color: var(--gold-ink); border: 1px solid var(--accent); }
.cta-primary:hover { background: var(--accent-2); text-decoration: none; transform: translateY(-1px); }

.cta-secondary { background: transparent; color: var(--accent-2); border: 1px solid rgba(200, 168, 120, .5); }
.cta-secondary:hover { background: rgba(200, 168, 120, .12); border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }

.cta-note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }

/* --- Disclosure ---------------------------------------------------------- */

.vendor-disclosure {
  margin: 44px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .022);
  font-size: 13.5px;
  line-height: 1.68;
  color: #8e9199;
}
.vendor-disclosure strong { color: var(--muted); }

/* --- Related reading ----------------------------------------------------- */

.blog-related { border-top: 1px solid var(--line); background: rgba(255, 255, 255, .015); }

.blog-related__inner { max-width: var(--shell); margin: 0 auto; padding: 44px 28px; }

.blog-related__title {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 640;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.blog-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 780px) { .blog-related__list { grid-template-columns: 1fr 1fr; gap: 12px 32px; } }

.blog-related__list li { margin: 0; }

.blog-related__list a {
  display: block;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: #d6d8dd;
  font-size: 15.5px;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.blog-related__list a:hover {
  border-color: rgba(200, 168, 120, .45);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* --- Footer -------------------------------------------------------------- */

.ld-footer { border-top: 1px solid var(--line); }

.ld-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 30px 28px 46px;
  font-size: 14px;
  color: var(--muted);
}

.ld-footer__inner p { margin: 0; }

.ld-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.ld-footer__links a { color: var(--muted); text-decoration: none; }
.ld-footer__links a:hover { color: var(--accent-2); text-decoration: underline; }

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 720px) {
  body { font-size: 16.5px; }

  .ld-nav { padding: 16px 18px; }
  .blog-post { padding: 0 18px 56px; }
  .blog-hero { padding: 38px 0 26px; }
  .blog-hero__sub { font-size: 17.5px; }
  .blog-body h2 { margin-top: 40px; }
  .cta-box { padding: 22px 20px; }
  .blog-related__inner, .ld-footer__inner { padding-left: 18px; padding-right: 18px; }

  /* Three-column comparison tables cannot fit — let the table scroll inside
     its own box rather than forcing the page body sideways. */
  .blog-table, .pricing-compare {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .blog-table td, .pricing-compare td { white-space: normal; min-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .ld-nav__cta:hover, .cta-primary:hover, .cta-secondary:hover,
  .blog-related__list a:hover { transform: none; }
}

/* ===== GEX THEMES (GENERATED - do not edit, run scripts/gen-themes.py) ===== */
/* -- theme dark -- */
html[data-theme="dark"] { --bg: #000000; --bg-grad-top: #050506; --panel: #0a0b0d; --panel-strong: #101114; --ink: #e8edf2; --muted: #8f97a3; --line: #1b1d22; --gold-ink: #050506; }
/* -- theme white -- */
html[data-theme="white"] { --bg: #faf8f4; --bg-grad-top: #f4f0e8; --panel: #ffffff; --panel-strong: #f7f3ec; --ink: #211d16; --muted: #6c675d; --line: #e3dccd; --accent: #9a7434; --accent-2: #b08a45; --gold-ink: #fdfbf7; }
html[data-theme="white"] strong { color: #211d16; }
html[data-theme="white"] .ld-nav__logo { color: #211d16; }
html[data-theme="white"] .ld-nav__link:hover { color: #211d16; }
html[data-theme="white"] .ld-nav__link:hover { background: rgba(154, 116, 52, .12); }
html[data-theme="white"] .blog-tag { background: rgba(154, 116, 52, .09); }
html[data-theme="white"] .blog-tag { border-color: rgba(154, 116, 52, .38); }
html[data-theme="white"] .blog-hero h1 { color: #211d16; }
html[data-theme="white"] .blog-hero__sub { color: #5a5548; }
html[data-theme="white"] .blog-body h2 { color: #211d16; }
html[data-theme="white"] .blog-body blockquote { color: #5a5548; }
html[data-theme="white"] .blog-note { color: #5a5548; }
html[data-theme="white"] .blog-table td, html[data-theme="white"] .pricing-compare td { color: #454c59; }
html[data-theme="white"] .blog-table td:first-child, html[data-theme="white"] .pricing-compare td:first-child { color: #211d16; }
html[data-theme="white"] .cta-box { border-color: rgba(154, 116, 52, .3); }
html[data-theme="white"] .cta-box h3 { color: #211d16; }
html[data-theme="white"] .cta-box p { color: #5a5548; }
html[data-theme="white"] .cta-secondary { border-color: rgba(154, 116, 52, .5); }
html[data-theme="white"] .cta-secondary:hover { background: rgba(154, 116, 52, .12); }
html[data-theme="white"] .vendor-disclosure { color: #63666d; }
html[data-theme="white"] .blog-related__list a { color: #454c59; }
html[data-theme="white"] .blog-related__list a:hover { border-color: rgba(154, 116, 52, .45); }
html[data-theme="white"] .blog-related__list a:hover { color: #211d16; }
/* ===== END GEX THEMES ===== */