/* =========================================================
   Marketing pages — self-contained stylesheet.
   Design tokens are copied from client/src/styles.css :root so the marketing
   surface matches the app visually without coupling to the SPA bundle. If the
   app's tokens change, mirror the change here.
   ========================================================= */

:root {
  /* Warm palette — retheme to match the rn-* homepage (2026-06-13).
     Cream bg, warm-brown inks, warm-sand lines, ember accent. */
  --bg:           #FDFBF8;
  --bg-sunken:    #F7F1E6;
  --surface:      #FFFFFF;
  --surface-2:    #FAF6EF;

  --ink-1:        #1A1713;
  --ink-2:        #3A332A;
  --ink-3:        #6E6557;
  --ink-4:        #857862; /* darker than the homepage's #A89B87 — inner pages set real small text in ink-4, needs ≥4:1 on cream */

  --line-1:       #EFE6D8;
  --line-2:       #E2D5BF;
  --line-3:       #CDBCA0;

  --accent:       #D85A30;
  --accent-hover: #C04A22;
  --accent-soft:  #FBEBE2;
  --accent-ink:   #FFFFFF;

  --success:      #2F7A55;
  --warning:      #A86A12;
  --warning-soft: #F6E9D2;
  --danger:       #B23A2A;
  --danger-soft:  #F4DED9;

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(20,17,14,0.04), 0 1px 2px rgba(20,17,14,0.04);
  --shadow-2: 0 2px 8px rgba(20,17,14,0.06), 0 1px 2px rgba(20,17,14,0.04);
  --shadow-3: 0 12px 32px rgba(20,17,14,0.10), 0 2px 6px rgba(20,17,14,0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Layout ---------- */
.mk-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.mk-narrow { max-width: 760px; }

.mk-section { padding: 72px 0; }
.mk-section-alt { background: var(--bg-sunken); border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }

/* ---------- Brand wordmark (used by the rnx- Nav + Footer) ---------- */
.mk-brand { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Buttons ---------- */
.mk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--r-2);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; transition: all 120ms ease; cursor: pointer;
}
.mk-btn-lg { height: 46px; padding: 0 24px; font-size: 15px; border-radius: var(--r-3); }
.mk-btn-accent { background: var(--accent); color: var(--accent-ink); }
.mk-btn-accent:hover { background: var(--accent-hover); }
.mk-btn-outline { border-color: var(--line-2); color: var(--ink-1); background: var(--surface); }
.mk-btn-outline:hover { background: var(--surface-2); border-color: var(--line-3); }
.mk-btn-ghost { color: var(--ink-2); }
.mk-btn-ghost:hover { background: rgba(20,17,14,0.05); }

.mk-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Hero ---------- */
.mk-hero { padding: 96px 0 72px; }
.mk-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); padding: 4px 10px; border-radius: var(--r-pill);
  margin-bottom: 18px;
}
.mk-h1 {
  font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.035em;
  font-weight: 600; margin: 0 0 18px; max-width: 18ch;
}
.mk-lede { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--ink-3); margin: 0; max-width: 56ch; }

/* ---------- Headings & prose ---------- */
.mk-h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; margin: 0 0 24px; }
.mk-h3 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; margin: 0 0 8px; }
.mk-prose { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; }
.mk-prose:last-child { margin-bottom: 0; }
.mk-dim { color: var(--ink-4); }
.mk-mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }

/* ---------- Cards / grids ---------- */
.mk-card { background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-3); padding: 24px; }
.mk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mk-step { position: relative; }
.mk-step-num {
  display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 14px;
  border-radius: var(--r-pill); background: var(--ink-1); color: var(--bg);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}

/* ---------- Report preview ---------- */
.mk-report { padding: 0; overflow: hidden; box-shadow: var(--shadow-2); }
.mk-report-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--line-1);
}
.mk-report.cols-2 .mk-report-row { grid-template-columns: 2.4fr 1fr; }
.mk-report.cols-3 .mk-report-row { grid-template-columns: 1.2fr 1fr 1fr; }
.mk-report-row:last-child { border-bottom: none; }
.mk-report-head {
  background: var(--surface-2); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-4); font-weight: 500;
}
.mk-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 500;
}
.mk-pill-neutral { background: var(--bg-sunken); color: var(--ink-2); }
.mk-pill-warning { background: var(--warning-soft); color: var(--warning); }
.mk-pill-danger { background: var(--danger-soft); color: var(--danger); }
.mk-pill-success { background: #E6F0E3; color: var(--success); }

/* ---------- Report aside lists (distribution / quote sections) ---------- */
.mk-rpt-list { margin: 8px 0 0; padding-left: 18px; }
.mk-rpt-list li { font-size: 15px; line-height: 1.7; color: var(--ink-2); }


/* ---------- Guides / articles ---------- */
.mk-article-meta { font-size: 14px; margin: 0; }
.mk-callout { box-shadow: var(--shadow-1); border-left: 3px solid var(--accent); }
.mk-callout .mk-h3 { margin-bottom: 10px; }
.mk-callout .mk-btn { margin-top: 16px; }

/* ---------- Use-case hub cards ---------- */
.mk-usecase { transition: border-color 120ms, box-shadow 120ms, transform 120ms; display: block; }
.mk-usecase:hover { border-color: var(--line-3); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.mk-arrow { display: inline-block; margin-top: 12px; color: var(--accent); font-size: 14px; font-weight: 500; }

/* ---------- CTA band ---------- */
/* final CTA — the guide-design ".final" card, dark variant, shared site-wide */
.gd-final { text-align: center; background: var(--ink-1); padding: 76px 0; }
.gd-final h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.03em; font-weight: 600; margin: 0 auto; max-width: 720px; line-height: 1.1; text-wrap: balance; color: var(--bg); }
.gd-fcta { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.gd-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 12px; font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: transform .12s, box-shadow .15s, background .15s, border-color .15s; }
.gd-btn:active { transform: translateY(1px); }
.gd-btn.primary { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(216,90,48,.28); }
.gd-btn.primary:hover { box-shadow: 0 4px 16px rgba(216,90,48,.34); }
.gd-btn.ghost { background: transparent; color: var(--bg); border: 1px solid rgba(255,255,255,0.22); }
.gd-btn.ghost:hover { border-color: rgba(255,255,255,0.45); }

/* ---------- Related-links card label (used by RelatedLinks) ---------- */
.mk-related-kind { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-4); font-weight: 600; margin-bottom: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .mk-container { padding-left: 24px; padding-right: 24px; }
  .mk-grid, .mk-steps { grid-template-columns: 1fr; }
  .mk-report .mk-report-row { grid-template-columns: 1fr !important; gap: 6px; }
  .mk-report-head { display: none; }
  .mk-hero { padding: 64px 0 48px; }
  .mk-section { padding: 56px 0; }
}

/* =========================================================
   Home — "warm SaaS / data-viz / live demo hero" theme.
   Imported from the Claude Design export (first draft, 2026-06-13).
   Palette is intentionally warmer than the mk-* tokens above; home-only.
   Artboard constraints (fixed 1440px width) converted to fluid.
   ========================================================= */

.rn-root { width: 100%; background: #FDFBF8; color: #1A1713;
  font-family: 'Geist', system-ui, sans-serif; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  /* Home keeps its full-bleed landing layout (the hero reads better wide).
     --rn-gut is the shared side gutter, narrowing per breakpoint below. Inner
     pages stay centered via mk-container; the footer is the shared centered one. */
  --rn-gut: 64px; }
.rn-root a { cursor: pointer; text-decoration: none; color: inherit; }
.rn-mono { font-family: 'Geist Mono', monospace; }
.rn-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px;
  border-radius: 12px; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.rn-btn.primary { background: #D85A30; color: #fff; box-shadow: 0 2px 8px rgba(216,90,48,0.28); }
.rn-btn.soft { background: #F4EDE3; color: #1A1713; }
.rn-btn.dark-ghost { border: 1px solid rgba(255,255,255,0.22); color: #FDFBF8; }
.rn-hero { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 72px; padding: 72px var(--rn-gut) 88px; align-items: center; }
.rn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px;
  background: #F4EDE3; font-size: 13px; font-weight: 500; color: #6E6557; white-space: nowrap; }
.rn-pill b { color: #D85A30; font-weight: 600; }
.rn-h1 { font-size: 66px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; margin: 26px 0 0; }
.rn-h1 em { font-style: normal; color: #D85A30; }
.rn-sub { font-size: 18px; line-height: 1.6; color: #6E6557; max-width: 540px; margin: 24px 0 0; text-wrap: pretty; }
.rn-hero-cta { display: flex; gap: 14px; margin-top: 36px; }
.rn-hero-cta .rn-btn { height: 50px; padding: 0 26px; font-size: 15px; }
/* demo card */
.rn-demo { background: #fff; border: 1px solid #ECE3D6; border-radius: 20px; padding: 26px 28px;
  box-shadow: 0 24px 64px rgba(90,60,30,0.10), 0 4px 12px rgba(90,60,30,0.05); }
.rn-demo-head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6E6557;
  padding-bottom: 16px; border-bottom: 1px solid #F2EADD; }
.rn-demo-dot { width: 8px; height: 8px; border-radius: 50%; background: #4CAF7D;
  box-shadow: 0 0 0 4px rgba(76,175,125,0.15); }
.rn-demo-cost { margin-left: auto; font-size: 12px; color: #A89B87; }
.rn-demo-label { font-size: 10.5px; letter-spacing: 0.12em; font-weight: 600; color: #A89B87; }
.rn-demo-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rn-demo-angle { font-size: 10px; letter-spacing: 0.06em; font-weight: 600; text-transform: uppercase;
  color: #D85A30; background: #FBEBE2; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rn-demo-input { margin-top: 18px; background: #FAF6EF; border: 1px solid #EFE6D8; border-radius: 12px; padding: 14px 16px; }
.rn-demo-text { font-size: 15px; line-height: 1.5; margin-top: 6px; min-height: 46px; }
.rn-caret { display: inline-block; width: 2px; height: 16px; background: #D85A30; vertical-align: -2px;
  margin-left: 1px; animation: rn-blink 0.8s step-end infinite; }
@keyframes rn-blink { 50% { opacity: 0; } }
.rn-demo-stages { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rn-demo-stage { display: flex; align-items: center; gap: 12px; font-size: 13.5px; padding: 8px 12px;
  border-radius: 10px; color: #C9BCA8; transition: all 300ms ease; }
.rn-demo-stage.run { background: #FAF6EF; color: #6E6557; }
.rn-demo-stage.on { background: #FAF6EF; color: #1A1713; }
.rn-demo-check { width: 16px; text-align: center; color: #C9BCA8; }
.rn-demo-stage.on .rn-demo-check { color: #4CAF7D; }
.rn-demo-k { width: 70px; font-size: 12.5px; }
.rn-demo-v { color: #6E6557; font-size: 13px; white-space: nowrap; }
.rn-demo-result { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 18px;
  padding-top: 18px; border-top: 1px solid #F2EADD; opacity: 0.35; transition: opacity 400ms ease; }
.rn-demo-result.on { opacity: 1; }
.rn-demo-score { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-top: 8px; }
.rn-demo-score small { font-size: 17px; color: #C9BCA8; }
/* steps */
.rn-sec { padding: 92px var(--rn-gut); }
.rn-kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #D85A30; }
.rn-h2 { font-size: 42px; letter-spacing: -0.028em; font-weight: 600; line-height: 1.1; margin: 14px 0 0; }
.rn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; }
.rn-step { background: #fff; border: 1px solid #EFE6D8; border-radius: 18px; padding: 28px 26px; }
.rn-step .ic { width: 40px; height: 40px; border-radius: 12px; background: #FBEBE2; color: #D85A30;
  display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.rn-step h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 18px 0 8px; }
.rn-step p { font-size: 14px; line-height: 1.55; color: #6E6557; margin: 0; text-wrap: pretty; }
/* dark report band */
.rn-dark { background: #191510; color: #FDFBF8; padding: 92px var(--rn-gut); display: grid;
  grid-template-columns: 1fr 540px; gap: 80px; align-items: center; }
.rn-dark .rn-kicker { color: #F0997B; }
.rn-dark p.lead { font-size: 17px; line-height: 1.65; color: #B5A893; margin: 22px 0 0; max-width: 520px; text-wrap: pretty; }
.rn-dark .rn-btn { margin-top: 34px; }
.rn-chart { background: #211C15; border: 1px solid #322A20; border-radius: 20px; padding: 30px 32px; }
.rn-chart .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.rn-chart .t { font-size: 16px; font-weight: 600; }
.rn-chart .s { font-size: 12px; color: #8A7B65; }
.rn-brow { display: grid; grid-template-columns: 240px 1fr 44px; align-items: center; gap: 14px;
  padding: 10px 0; font-size: 13.5px; }
.rn-brow .track { height: 10px; border-radius: 999px; background: #322A20; overflow: hidden; display: block; }
.rn-brow .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F0997B, #D85A30); display: block; }
.rn-brow .pct { font-size: 12px; color: #8A7B65; text-align: right; }
.rn-chart .foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid #322A20;
  font-size: 12px; color: #8A7B65; display: flex; justify-content: space-between; }
/* testimonials */
.rn-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.rn-quote { background: #fff; border: 1px solid #EFE6D8; border-radius: 18px; padding: 28px; }
.rn-quote p { margin: 0; font-size: 15px; line-height: 1.6; color: #3A332A; }
.rn-quote .who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.rn-quote .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 12.5px; font-weight: 600; }
.rn-quote .nm { font-size: 13.5px; font-weight: 600; }
.rn-quote .rl { font-size: 12.5px; color: #A89B87; }
/* CTA */
.rn-cta { background: #191510; color: #FDFBF8; text-align: center; padding: 96px var(--rn-gut); }
.rn-cta h2 { font-size: 48px; letter-spacing: -0.03em; font-weight: 600; margin: 24px 0 14px; }
.rn-cta h2 em { font-style: normal; color: #F0997B; }
.rn-cta p { color: #B5A893; font-size: 16.5px; margin: 0 0 38px; }
.rn-cta .rn-btn { height: 50px; padding: 0 26px; font-size: 15px; }
/* footer: the home now uses the shared <Footer/> (rnx-foot) — see components.jsx */

/* Responsive (additions beyond the fixed-1440 design export) */
@media (max-width: 1280px) {
  .rn-root { --rn-gut: 48px; }
  .rn-hero { gap: 48px; padding-top: 56px; padding-bottom: 72px; }
  .rn-h1 { font-size: 54px; }
  .rn-dark { grid-template-columns: 1fr 460px; gap: 56px; padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 1080px) {
  .rn-root { --rn-gut: 24px; }
  .rn-hero { grid-template-columns: 1fr; gap: 44px; padding-top: 36px; padding-bottom: 56px; }
  .rn-h1 { font-size: 44px; }
  .rn-h2 { font-size: 32px; }
  .rn-sub { font-size: 16.5px; }
  .rn-sec { padding-top: 64px; padding-bottom: 64px; }
  .rn-steps { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
  .rn-dark { grid-template-columns: 1fr; gap: 44px; padding-top: 64px; padding-bottom: 64px; }
  .rn-chart { padding: 24px 22px; }
  .rn-brow { grid-template-columns: 132px 1fr 40px; }
  .rn-quotes { grid-template-columns: 1fr; margin-top: 36px; }
  .rn-cta { padding-top: 64px; padding-bottom: 64px; }
  .rn-cta h2 { font-size: 34px; }
}
@media (max-width: 560px) {
  .rn-h1 { font-size: 35px; }
  .rn-h2 { font-size: 27px; }
  .rn-pill { white-space: normal; text-align: center; }
  .rn-hero-cta { flex-direction: column; align-items: stretch; }
  .rn-hero-cta .rn-btn { justify-content: center; }
  .rn-steps { grid-template-columns: 1fr; }
  .rn-demo { padding: 20px 18px; }
  .rn-demo-v { white-space: normal; }
  .rn-demo-score { font-size: 36px; }
  .rn-brow { grid-template-columns: 1fr 44px; }
  .rn-brow > span:first-child { grid-column: 1 / -1; padding-bottom: 2px; }
  .rn-cta h2 { font-size: 28px; }
  .rn-cta p { font-size: 14.5px; }
}

/* ── Methodology — redesigned reference page (md-*, 2026-06-14) ─────────────
   Same warm palette as the rest of the site; structural/layout upgrade only.
   Rendered by MethodologyPage inside the shared mk- Nav/Footer + mk-container. */
.md-hero { padding: 56px 0 8px; max-width: 760px; }
.md-kick { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: #D85A30; }
.md-hero h1 { font-size: clamp(34px, 5vw, 50px); line-height: 1.05; letter-spacing: -0.035em;
  font-weight: 600; margin: 16px 0 0; color: #1A1713; }
.md-hero > p { font-size: 18.5px; line-height: 1.6; color: #6E6557; margin: 20px 0 0; max-width: 660px; }
.md-hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.md-sec { padding: 52px 0; border-top: 1px solid #ECE3D6; }
.md-sec > h2 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -0.025em; font-weight: 600;
  margin: 12px 0 0; max-width: 640px; line-height: 1.12; color: #1A1713; }
.md-lead { font-size: 16px; line-height: 1.65; color: #6E6557; max-width: 660px; margin: 16px 0 0; }

/* six steps */
.md-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.md-step { background: #fff; border: 1px solid #ECE3D6; border-radius: 16px; padding: 24px 22px; }
.md-step .n { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #D85A30;
  width: 36px; height: 36px; border-radius: 10px; background: #FBEBE2; display: grid; place-items: center; }
.md-step h3 { font-size: 16px; font-weight: 600; margin: 16px 0 7px; letter-spacing: -0.01em; color: #1A1713; }
.md-step p { font-size: 13.5px; line-height: 1.55; color: #6E6557; margin: 0; }

/* schema artifact */
.md-schema { background: #191510; color: #FDFBF8; border-radius: 20px; padding: 30px 34px; margin-top: 32px; }
.md-schema-top { display: flex; align-items: center; gap: 10px; padding-bottom: 18px;
  border-bottom: 1px solid #322A20; font-family: var(--font-mono); font-size: 12px; color: #B5A893; }
.md-schema-top .dot { width: 9px; height: 9px; border-radius: 50%; background: #4CAF7D; }
.md-schema-top .br { margin-left: auto; color: #A89B87; }
.md-field { display: grid; grid-template-columns: 230px 120px 1fr; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid #322A20; }
.md-field:last-child { border-bottom: none; }
.md-field .fk { font-family: var(--font-mono); font-size: 13.5px; color: #F0997B; }
.md-field .ft { font-family: var(--font-mono); font-size: 11.5px; color: #A89B87;
  border: 1px solid #322A20; border-radius: 6px; padding: 2px 8px; justify-self: start; white-space: nowrap; }
.md-field .fd { font-size: 13.5px; line-height: 1.5; color: #B5A893; }

/* cost table */
.md-tbl { border: 1px solid #ECE3D6; border-radius: 16px; overflow: hidden; margin-top: 30px; background: #fff; }
.md-tbl-h, .md-trow { display: grid; grid-template-columns: 1.6fr 1.3fr 1fr; gap: 16px; padding: 15px 22px; align-items: center; }
.md-tbl-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #A89B87; background: #FAF6EF; border-bottom: 1px solid #ECE3D6; }
.md-trow { border-bottom: 1px solid #F2EADD; font-size: 14.5px; }
.md-trow:last-child { border-bottom: none; }
.md-trow .stg { font-weight: 500; color: #1A1713; }
.md-trow .tm { font-family: var(--font-mono); font-size: 13px; color: #6E6557; }
.md-trow .ct { font-family: var(--font-mono); font-size: 13px; text-align: right; }
.md-trow .ct.free { color: #4CAF7D; }
.md-trow .ct.paid { color: #D85A30; }
.md-note { font-size: 13.5px; line-height: 1.6; color: #6E6557; margin: 18px 0 0; max-width: 720px; }

/* api resilience trio */
.md-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.md-trio .it { background: #fff; border: 1px solid #ECE3D6; border-radius: 16px; padding: 24px 22px; }
.md-trio .it h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 9px; color: #1A1713; }
.md-trio .it h3 .d { width: 7px; height: 7px; border-radius: 50%; background: #D85A30; flex: 0 0 auto; }
.md-trio .it p { font-size: 13.5px; line-height: 1.55; color: #6E6557; margin: 0; }

/* test cards */
.md-tests { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.md-test { background: #fff; border: 1px solid #ECE3D6; border-radius: 18px; padding: 28px; display: flex; flex-direction: column; }
.md-test .big { font-family: var(--font-mono); font-size: 44px; font-weight: 600; letter-spacing: -0.03em; color: #D85A30; line-height: 1; }
.md-test .big small { font-size: 18px; color: #A89B87; }
.md-test h3 { font-size: 16px; font-weight: 600; margin: 14px 0 8px; color: #1A1713; }
.md-test p { font-size: 13.5px; line-height: 1.55; color: #6E6557; margin: 0; }
.md-test a.lnk { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; color: #D85A30;
  display: inline-flex; align-items: center; gap: 6px; }
.md-caveat { font-size: 13.5px; line-height: 1.6; color: #6E6557; margin: 18px 0 0; max-width: 720px; }
.md-caveat b { color: #1A1713; }

/* author */
.md-author { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding: 16px 22px;
  background: #FAF6EF; border: 1px solid #EFE6D8; border-radius: 14px; }
.md-author .av { width: 42px; height: 42px; border-radius: 50%; background: #D85A30; color: #fff;
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 15px; flex: 0 0 auto; }
.md-author .txt { display: flex; flex-direction: column; gap: 3px; }
.md-author .nm { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #1A1713; }
.md-author .nm a { color: inherit; text-decoration: underline; text-decoration-color: rgba(216,90,48,.4); text-underline-offset: 2px; }
.md-author .rl { font-size: 13px; color: #6E6557; line-height: 1.3; }

/* keep reading */
.md-kr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.md-kr a { display: block; background: #fff; border: 1px solid #ECE3D6; border-radius: 14px; padding: 20px;
  transition: transform .14s, box-shadow .14s; }
.md-kr a:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(90, 60, 30, .08); }
.md-kr .kk { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #D85A30; }
.md-kr h4 { font-size: 14.5px; font-weight: 600; margin: 10px 0 6px; line-height: 1.25; color: #1A1713; }
.md-kr p { font-size: 12.5px; line-height: 1.5; color: #6E6557; margin: 0; }

@media (max-width: 860px) {
  .md-steps, .md-trio, .md-tests, .md-kr { grid-template-columns: 1fr; }
  .md-field { grid-template-columns: 1fr; gap: 4px; }
  .md-field .ft { margin: 2px 0; }
  .md-tbl-h, .md-trow { grid-template-columns: 1.4fr 1fr 0.8fr; padding: 13px 16px; gap: 10px; }
}

/* ── Use-cases index — redesigned (uc-*, 2026-06-14) ───────────────────────
   Outcome groups + flagship card + shared-pipeline strip. Same warm palette. */
.uc-hero { padding: 56px 0 14px; }
.uc-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.uc-hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; margin: 16px 0 0; color: #1A1713; }
.uc-hero h1 em { font-style: normal; color: #D85A30; }
.uc-hero > .uc-hero-grid > div > p { font-size: 18px; line-height: 1.6; color: #6E6557; max-width: 520px; margin: 20px 0 0; }
.uc-hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

/* shared pipeline strip */
.uc-pipe { background: #fff; border: 1px solid #ECE3D6; border-radius: 18px; padding: 26px 26px 22px; box-shadow: 0 14px 40px rgba(90, 60, 30, .07); }
.uc-pipe .ph { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #A89B87; margin-bottom: 18px; }
.uc-pipe-steps { display: flex; flex-direction: column; gap: 2px; }
.uc-pipe-step { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.uc-pipe-step:not(:last-child) { border-bottom: 1px solid #F2EADD; }
.uc-pipe-step .n { width: 26px; height: 26px; border-radius: 8px; background: #FBEBE2; color: #D85A30; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.uc-pipe-step .lab { font-size: 14px; font-weight: 500; color: #1A1713; }
.uc-pipe-step .sub { font-size: 12.5px; color: #6E6557; margin-left: auto; font-family: var(--font-mono); }

.uc-groups { margin-top: 46px; }
.uc-group { padding: 38px 0 6px; }
.uc-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.uc-group-head h2 { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; margin: 0; color: #1A1713; }
.uc-group-head .desc { font-size: 13.5px; color: #6E6557; }
.uc-group-head .ln { flex: 1; height: 1px; background: #ECE3D6; }

.uc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.uc-card { background: #fff; border: 1px solid #ECE3D6; border-radius: 16px; padding: 24px 22px 20px; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: transform .14s, box-shadow .14s, border-color .14s; position: relative; min-height: 188px; }
.uc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(90, 60, 30, .1); border-color: #EFE6D8; }
.uc-card .ic { width: 40px; height: 40px; border-radius: 12px; background: #F4EDE3; color: #D85A30; display: grid; place-items: center; margin-bottom: 16px; }
.uc-card h3 { font-size: 17.5px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.22; margin: 0 0 8px; color: #1A1713; }
.uc-card p { font-size: 13.5px; line-height: 1.5; color: #6E6557; margin: 0; }
.uc-card .out { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: #A89B87; }
.uc-card .out b { color: #D85A30; font-weight: 500; }
.uc-card .go { position: absolute; top: 24px; right: 22px; color: #A89B87; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.uc-card:hover .go { opacity: 1; transform: translateX(0); }

/* flagship */
.uc-flag { background: #191510; color: #FDFBF8; border-color: #191510; }
.uc-flag h3 { color: #FDFBF8; }
.uc-flag p { color: #B5A893; }
.uc-flag .ic { background: rgba(240, 153, 123, .16); color: #F0997B; }
.uc-flag .out { color: #B5A893; }
.uc-flag .out b { color: #F0997B; }
.uc-flag .pill { position: absolute; top: 22px; right: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: #F0997B; border: 1px solid #322A20; border-radius: 6px; padding: 3px 8px; }

.uc-cta { background: #191510; color: #FDFBF8; border-radius: 22px; text-align: center; padding: 64px 40px; margin: 72px 0 8px; }
.uc-cta h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.03em; font-weight: 600; margin: 0 0 12px; color: #FDFBF8; max-width: 22ch; margin-left: auto; margin-right: auto; }
.uc-cta h2 em { font-style: normal; color: #F0997B; }
.uc-cta p { color: #B5A893; font-size: 16px; margin: 0 0 28px; }
.uc-cta-btn { height: 50px; padding: 0 28px; }

@media (max-width: 860px) {
  .uc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .uc-cards { grid-template-columns: 1fr; }
  .uc-group-head { flex-wrap: wrap; gap: 6px 14px; }
  .uc-group-head .ln { display: none; }
}

/* ── Guides hub / library — redesigned (gl-*, 2026-06-14) ──────────────────
   Static + crawlable (all 148 links in the HTML); search/persona are JS-enhanced. */
.gl-hero { padding: 56px 0 8px; text-align: center; }
.gl-hero h1 { font-size: clamp(34px, 5vw, 50px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; margin: 16px 0 0; color: #1A1713; }
.gl-hero > p { font-size: 18px; line-height: 1.6; color: #6E6557; max-width: 600px; margin: 16px auto 0; }
.gl-search { position: relative; max-width: 560px; margin: 30px auto 0; }
.gl-search input { width: 100%; height: 54px; padding: 0 18px 0 48px; border-radius: 14px; border: 1px solid #ECE3D6;
  background: #fff; font-family: inherit; font-size: 16px; color: #1A1713; box-shadow: 0 2px 10px rgba(90, 60, 30, .05); }
.gl-search input:focus { outline: none; border-color: #D85A30; box-shadow: 0 0 0 4px rgba(216, 90, 48, .1); }
.gl-search input::placeholder { color: #A89B87; }
.gl-search .ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #A89B87; display: flex; }
.gl-search .clr { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: none; background: #F4EDE3;
  color: #6E6557; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; }
.gl-search .clr:hover { background: #EEE4D6; color: #1A1713; }
.gl-stat { font-family: var(--font-mono); font-size: 12.5px; color: #A89B87; margin-top: 16px; letter-spacing: .02em; }
.gl-stat b { color: #D85A30; font-weight: 500; }

/* persona router */
.gl-personas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px auto 0; max-width: 880px; }
.gl-persona { display: flex; flex-direction: column; gap: 2px; padding: 11px 18px; border-radius: 12px; border: 1px solid #ECE3D6;
  background: #fff; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s, background .15s, transform .12s; }
.gl-persona:hover { border-color: #A89B87; transform: translateY(-1px); }
.gl-persona.on { border-color: #D85A30; background: #FBEBE2; }
.gl-persona .pl { font-size: 14px; font-weight: 600; color: #1A1713; white-space: nowrap; }
.gl-persona .ph { font-size: 11.5px; color: #6E6557; white-space: nowrap; }

/* flat search-results view (built by JS from the in-page cluster cards) */
.gl-results-head { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #A89B87; margin: 22px 0 0; }
.gl-results { margin-top: 14px; }
.gl-guide .gr-cl { font-family: var(--font-mono); font-size: 11px; color: #D85A30; margin-top: 4px; }
.gl-guide mark { background: #FBEBE2; color: #D85A30; border-radius: 3px; padding: 0 1px; }

/* pillar tier */
.gl-pillars { margin-top: 52px; }
.gl-pillars-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 20px; }
.gl-pillar { background: #191510; color: #FDFBF8; border-radius: 16px; padding: 22px 20px 20px; display: flex; flex-direction: column;
  min-height: 184px; text-decoration: none; transition: transform .14s, box-shadow .14s; }
.gl-pillar:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(25, 21, 16, .22); }
.gl-pillar .num { font-family: var(--font-mono); font-size: 11px; color: #F0997B; letter-spacing: .1em; }
.gl-pillar h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin: 14px 0 8px; line-height: 1.2; color: #FDFBF8; }
.gl-pillar p { font-size: 12.5px; line-height: 1.5; color: #B5A893; margin: 0; }
.gl-pillar .go { margin-top: auto; padding-top: 14px; font-family: var(--font-mono); font-size: 11px; color: #F0997B; }

/* cluster directory */
/* two-column body: sticky category rail + clusters */
.gl-body { display: grid; grid-template-columns: 232px 1fr; gap: 48px; align-items: start; margin-top: 12px; }
.gl-rail { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.gl-rail-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #A89B87; margin: 0 0 12px; }
.gl-rail-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; color: #6E6557; padding: 7px 10px; border-radius: 8px; line-height: 1.3; transition: background .12s, color .12s; }
.gl-rail-link:hover { background: #F4EDE3; color: #1A1713; }
.gl-rail-link.on { color: #D85A30; font-weight: 500; }
.gl-rail-link .ct { font-family: var(--font-mono); font-size: 11px; color: #A89B87; }
.gl-clusters { min-width: 0; }
.gl-cluster { padding: 30px 0 34px; border-top: 1px solid #ECE3D6; scroll-margin-top: 84px; }
.gl-cluster:first-child { border-top: none; padding-top: 4px; }
.gl-cluster-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.gl-cluster-head h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: #1A1713; }
.gl-cluster-head .cnt { font-family: var(--font-mono); font-size: 12px; color: #A89B87; white-space: nowrap; }
.gl-cluster .blurb { font-size: 14.5px; line-height: 1.55; color: #6E6557; margin: 8px 0 0; max-width: 680px; }
.gl-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 18px; }
.gl-guide { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 11px; text-decoration: none;
  border: 1px solid transparent; transition: background .12s, border-color .12s; }
.gl-guide:hover { background: #fff; border-color: #ECE3D6; }
.gl-guide .gt { font-size: 14.5px; font-weight: 500; color: #1A1713; line-height: 1.3; }
.gl-guide .gd { font-size: 12.5px; color: #6E6557; line-height: 1.4; }

@media (max-width: 980px) {
  .gl-pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .gl-body { grid-template-columns: 1fr; gap: 0; }
  .gl-rail { display: none; }
}
@media (max-width: 680px) { .gl-pillars-grid, .gl-guides { grid-template-columns: 1fr; } }

/* ── Use-case detail — ported from the base "detail" design (ud-*, 2026-06-14)
   Hero + section shells reuse md-hero / md-sec / md-kick. */
.ud-problem { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.ud-problem h2 { font-size: 26px; letter-spacing: -0.02em; font-weight: 600; line-height: 1.15; margin: 12px 0 0; color: #1A1713; max-width: 360px; }
.ud-problem p { font-size: 16px; line-height: 1.7; color: #6E6557; margin: 0 0 16px; }
.ud-problem p:last-child { margin-bottom: 0; }

.ud-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.ud-step { background: #fff; border: 1px solid #ECE3D6; border-radius: 16px; padding: 24px 22px; }
.ud-step .n { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #D85A30; width: 36px; height: 36px;
  border-radius: 10px; background: #FBEBE2; display: grid; place-items: center; }
.ud-step h3 { font-size: 16px; font-weight: 600; margin: 16px 0 7px; letter-spacing: -0.01em; color: #1A1713; }
.ud-step p { font-size: 13.5px; line-height: 1.55; color: #6E6557; margin: 0; }

/* report artifact — dark 2-col panel (text + table) */
.ud-report { background: #191510; color: #FDFBF8; border-radius: 22px; padding: 40px; margin-top: 30px;
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; }
.ud-report .rk { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #F0997B; }
.ud-report .rp { font-size: 15px; line-height: 1.6; color: #B5A893; margin: 14px 0 0; max-width: 360px; }
.ud-tbl { background: #211C15; border: 1px solid #322A20; border-radius: 16px; overflow: hidden; }
.ud-tbl-h { display: grid; gap: 12px; padding: 13px 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #A89B87; border-bottom: 1px solid #322A20; }
.ud-row { display: grid; gap: 12px; padding: 15px 18px; align-items: center; border-bottom: 1px solid #322A20; font-size: 14px; color: #FDFBF8; }
.ud-row:last-child { border-bottom: none; }
.ud-row .tool { font-weight: 500; }
.ud-sent { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.ud-sent .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
/* report list-asides (WTP split, recurring needs, quote lists) */
.ud-aside { margin-top: 22px; }
.ud-aside h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: #1A1713; }
.ud-aside ul { margin: 0; padding-left: 18px; }
.ud-aside li { font-size: 14.5px; line-height: 1.7; color: #6E6557; }

/* illustrative example — light card, serif italic claim */
.ud-eg { background: #fff; border: 1px solid #ECE3D6; border-radius: 18px; padding: 30px 32px; margin-top: 30px; box-shadow: 0 12px 36px rgba(90, 60, 30, .06); }
.ud-eg .tag { font-family: var(--font-mono); font-size: 11px; color: #A89B87; letter-spacing: .04em; }
.ud-eg .claim { font-family: 'Newsreader', Georgia, serif; font-size: 24px; line-height: 1.35; font-style: italic; color: #1A1713; margin: 14px 0 26px; max-width: 720px; }
.ud-eg-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.ud-chip { font-family: var(--font-mono); font-size: 12px; color: #6E6557; background: #FAF6EF; border: 1px solid #EFE6D8; border-radius: 9px; padding: 7px 12px; }
.ud-chip b { color: #D85A30; font-weight: 500; }
.ud-eg-take { margin-top: 22px; padding-top: 20px; border-top: 1px solid #F2EADD; font-size: 15px; line-height: 1.6; color: #6E6557; max-width: 720px; }
.ud-eg-take b { color: #1A1713; }

/* why it works + under the hood — 4-col dotted */
.ud-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 32px; margin-top: 32px; }
.ud-why .it h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 9px; color: #1A1713; }
.ud-why .it h3 .d { width: 7px; height: 7px; border-radius: 50%; background: #D85A30; flex: 0 0 auto; }
.ud-why .it p { font-size: 13.5px; line-height: 1.55; color: #6E6557; margin: 0; }

/* FAQ — 2-col (section is the grid) */
.ud-faq { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; }
.ud-faq h2 { font-size: 28px; letter-spacing: -0.025em; font-weight: 600; margin: 12px 0 0; line-height: 1.12; color: #1A1713; }
.ud-faq-item { padding: 20px 0; border-top: 1px solid #ECE3D6; }
.ud-faq-item:last-child { border-bottom: 1px solid #ECE3D6; }
.ud-faq-item h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: #1A1713; }
.ud-faq-item p { font-size: 14.5px; line-height: 1.6; color: #6E6557; margin: 0; max-width: 600px; }

/* keep reading — 3-col */
.ud-kr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.ud-kr a { display: block; background: #fff; border: 1px solid #ECE3D6; border-radius: 14px; padding: 20px; transition: transform .14s, box-shadow .14s; }
.ud-kr a:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(90, 60, 30, .08); }
.ud-kr .kk { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #D85A30; }
.ud-kr h4 { font-size: 15px; font-weight: 600; margin: 10px 0 6px; line-height: 1.25; color: #1A1713; }
.ud-kr p { font-size: 13px; line-height: 1.5; color: #6E6557; margin: 0; }

@media (max-width: 900px) {
  .ud-steps, .ud-why { grid-template-columns: repeat(2, 1fr); }
  .ud-report { grid-template-columns: 1fr; gap: 28px; padding: 30px 26px; }
  .ud-problem, .ud-faq { grid-template-columns: 1fr; gap: 18px; }
  .ud-kr { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .ud-steps, .ud-why { grid-template-columns: 1fr; } }

/* ── Shared inner-page chrome — migrated nav + footer (rnx-, 2026-06-14) ──── */
.rnx-nav { position: sticky; top: 0; z-index: 50; background: rgba(253, 251, 248, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid #ECE3D6; }
.rnx-nav-in { display: flex; align-items: center; gap: 30px; height: 68px; }
.rnx-nav-wide { width: 100%; padding: 0 var(--rn-gut, 64px); }
.rnx-navlinks { display: flex; gap: 26px; margin-left: 8px; font-size: 14px; }
.rnx-navlinks a { color: #6E6557; padding: 6px 2px; transition: color .15s; white-space: nowrap; }
.rnx-navlinks a:hover { color: #1A1713; }
.rnx-navlinks a.on { color: #1A1713; font-weight: 500; text-decoration: underline;
  text-decoration-color: #D85A30; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.rnx-nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.rnx-nav .rn-btn { height: 38px; padding: 0 16px; font-size: 13.5px; }
.rn-btn.ghost { background: transparent; color: #1A1713; border: 1px solid #E2D5BF; }
.rn-btn.ghost:hover { border-color: #CDBCA0; }

.rnx-foot { border-top: 1px solid #ECE3D6; margin-top: 12px; padding: 56px 0 40px; background: #FDFBF8; }
.rnx-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; }
.rnx-foot-brand p { font-size: 14px; line-height: 1.6; color: #6E6557; max-width: 240px; margin: 14px 0 0; }
.rnx-foot-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #A89B87; margin: 0 0 16px; font-weight: 500; }
.rnx-foot-col a { display: block; font-size: 14px; color: #6E6557; padding: 5px 0; transition: color .15s; }
.rnx-foot-col a:hover { color: #D85A30; }
.rnx-foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid #ECE3D6; font-size: 13px; color: #A89B87; }
.rnx-foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.rnx-foot-social { display: flex; gap: 16px; }
.rnx-foot-legal a, .rnx-foot-social a { color: #A89B87; transition: color .15s; }
.rnx-foot-legal a:hover, .rnx-foot-social a:hover { color: #D85A30; }

/* mobile hamburger — accessible <button>, toggled by NAV_MENU_JS */
.rnx-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 40px; height: 40px; margin-left: auto; cursor: pointer; border: none; background: transparent; padding: 0; border-radius: 9px; }
.rnx-burger:focus-visible { outline: 2px solid #D85A30; outline-offset: 2px; }
.rnx-burger span { display: block; width: 22px; height: 2px; background: #1A1713; border-radius: 2px; margin: 0 auto;
  transition: transform .2s, opacity .2s; }
.rnx-mobile { display: none; flex-direction: column; gap: 4px; padding: 10px 24px 18px; background: #FDFBF8; border-bottom: 1px solid #ECE3D6; }
.rnx-mobile a:not(.rn-btn) { padding: 11px 4px; font-size: 15px; color: #1A1713; border-bottom: 1px solid #F2EADD; }
.rnx-mobile .rn-btn { margin-top: 10px; justify-content: center; }

@media (max-width: 760px) {
  .rnx-navlinks { display: none; }
  .rnx-nav-cta { display: none; }
  .rnx-burger { display: flex; }
  .rnx-nav.open .rnx-mobile { display: flex; }
  .rnx-nav.open .rnx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .rnx-nav.open .rnx-burger span:nth-child(2) { opacity: 0; }
  .rnx-nav.open .rnx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .rnx-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ── REVIEW switcher — floating preview helper (gated by REVIEW=1; never prod) ── */
.rnx-review { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; gap: 4px; padding: 7px 8px; border-radius: 999px;
  background: #211C15; box-shadow: 0 12px 34px rgba(25, 21, 16, .30); }
.rnx-review a { font-family: var(--font-mono); font-size: 13px; color: #D9CFC0; padding: 8px 14px; border-radius: 999px;
  white-space: nowrap; transition: background .15s, color .15s; }
.rnx-review a:hover { color: #fff; }
.rnx-review a.on { background: #D85A30; color: #fff; }
@media (max-width: 560px) {
  .rnx-review { gap: 2px; padding: 6px 8px; max-width: 94vw; overflow-x: auto; }
  .rnx-review a { padding: 7px 10px; font-size: 12px; }
}

/* ── Guide article pages (gd-*, 2026-06-14) — ported from the base design ───
   Reading scaffolding (progress + TOC + accordion) over the static article. */
#gd-prog { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #D85A30; z-index: 80; transition: width .08s linear; }
.gd-crumb { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: #A89B87; padding: 26px 0 0; flex-wrap: wrap; }
.gd-crumb a, .gd-crumb span { white-space: nowrap; }
.gd-crumb a:hover { color: #D85A30; }
.gd-crumb .sep { opacity: .6; }

.gd-hero { padding: 34px 0 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.gd-chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 7px 14px; border-radius: 8px; white-space: nowrap; }
.gd-hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; margin: 22px 0 0; max-width: 940px; text-wrap: balance; color: #1A1713; }
.gd-lead { font-size: 19px; line-height: 1.55; color: #6E6557; margin: 22px auto 0; max-width: 760px; text-wrap: balance; }
.gd-hero-cta { display: flex; gap: 12px; margin-top: 30px; justify-content: center; flex-wrap: wrap; }
.gd-byline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; padding-top: 22px; border-top: 1px solid #ECE3D6; font-family: var(--font-mono); font-size: 12.5px; color: #A89B87; }
.gd-byline b { color: #6E6557; font-weight: 500; }
.gd-byline span { white-space: nowrap; }
.gd-byline .dot { width: 3px; height: 3px; border-radius: 50%; background: #A89B87; }

.gd-doc { display: grid; grid-template-columns: 232px minmax(0, 720px); gap: 72px; justify-content: center; padding: 56px 0 0; }
.gd-toc { position: sticky; top: 96px; align-self: start; }
.gd-toc .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #A89B87; margin-bottom: 14px; }
.gd-toc a { display: block; font-size: 13.5px; line-height: 1.4; color: #6E6557; padding: 7px 0 7px 14px; border-left: 2px solid #ECE3D6; transition: color .15s, border-color .15s; }
.gd-toc a:hover { color: #1A1713; }
.gd-toc a.on { color: #D85A30; border-left-color: #D85A30; font-weight: 500; }

.gd-prose > section { scroll-margin-top: 92px; }
.gd-prose h2 { font-size: clamp(24px, 3.4vw, 29px); letter-spacing: -0.025em; font-weight: 600; line-height: 1.15; margin: 52px 0 0; color: #1A1713; }
.gd-prose > section:first-child h2 { margin-top: 0; }
.gd-prose h2 .num { font-family: var(--font-mono); font-size: 14px; color: #D85A30; font-weight: 500; margin-right: 12px; vertical-align: 2px; }
.gd-prose p { font-size: 17px; line-height: 1.72; color: #38322B; margin: 18px 0 0; }
.gd-prose p strong, .gd-prose li strong { color: #1A1713; font-weight: 600; }
.gd-prose ul { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.gd-prose ul li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.6; color: #38322B; }
.gd-prose ul li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: #D85A30; }
.gd-prose ul li b.t { color: #1A1713; font-weight: 600; }
.gd-note { font-size: 14px; line-height: 1.6; color: #6E6557; margin: 16px 0 0; }

/* comparison table */
.gd-ctable { margin: 30px 0 0; border: 1px solid #ECE3D6; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 36px rgba(90,60,30,.05); }
.gd-ctable .chead, .gd-ctable .crow { display: grid; gap: 16px; }
.gd-ctable .chead { padding: 14px 22px; background: #FAF6EF; border-bottom: 1px solid #ECE3D6; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #A89B87; }
.gd-ctable .crow { padding: 18px 22px; border-bottom: 1px solid #F2EADD; align-items: start; font-size: 14px; }
.gd-ctable .crow:last-child { border-bottom: none; }
.gd-ctable .ca { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: #1A1713; }
.gd-ctable .cs { font-size: 13.5px; line-height: 1.5; color: #6E6557; }
.gd-tone-danger { color: #B23A2A; } .gd-tone-warning { color: #A86A12; } .gd-tone-success { color: #2F7A55; } .gd-tone-neutral { color: #6E6557; }

/* numbered step rail */
.gd-steps { margin: 32px 0 0; position: relative; }
.gd-steps::before { content: ''; position: absolute; left: 17px; top: 12px; bottom: 12px; width: 2px; background: #ECE3D6; }
.gd-step { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 22px; padding: 0 0 26px; }
.gd-step:last-child { padding-bottom: 0; }
.gd-step .sn { width: 36px; height: 36px; border-radius: 11px; background: #FBEBE2; color: #D85A30; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 14px; position: relative; z-index: 1; }
.gd-step h3 { font-size: 17px; font-weight: 600; margin: 6px 0 0; letter-spacing: -0.01em; color: #1A1713; }
.gd-step p { font-size: 15.5px; line-height: 1.62; color: #6E6557; margin: 8px 0 0; }

/* serif pull-quote (supported; populated later) */
.gd-pull { margin: 36px 0 0; padding: 4px 0 4px 26px; border-left: 3px solid #D85A30; }
.gd-pull p { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 24px; line-height: 1.4; color: #1A1713; margin: 0; }

/* product callout (maps the guide's callout sections) */
.gd-callout { margin: 44px 0 0; background: #191510; color: #FDFBF8; border-radius: 22px; padding: 36px 38px; position: relative; overflow: hidden; }
.gd-callout .ck { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #F0997B; }
.gd-callout h3 { font-size: 22px; letter-spacing: -0.02em; font-weight: 600; margin: 12px 0 0; line-height: 1.2; max-width: 540px; color: #FDFBF8; }
.gd-callout p { font-size: 15px; line-height: 1.65; color: #B5A893; margin: 14px 0 0; max-width: 560px; }
.gd-callout .cbtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; height: 44px; padding: 0 20px; border-radius: 12px; background: #D85A30; color: #fff; font-size: 14.5px; font-weight: 500; }
.gd-callout .glow { position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(216,90,48,.22), transparent 70%); }

/* FAQ accordion */
.gd-faqpage { max-width: 760px; margin: 44px auto 0; }
.gd-faq { margin: 18px 0 0; }
.gd-faq-item { border-top: 1px solid #ECE3D6; }
.gd-faq-item:last-child { border-bottom: 1px solid #ECE3D6; }
.gd-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; padding: 20px 0; font-size: 17px; font-weight: 600; color: #1A1713; }
.gd-faq-q .pm { flex: none; width: 22px; height: 22px; position: relative; color: #D85A30; }
.gd-faq-q .pm::before, .gd-faq-q .pm::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; }
.gd-faq-q .pm::before { left: 4px; right: 4px; top: 10px; height: 2px; }
.gd-faq-q .pm::after { top: 4px; bottom: 4px; left: 10px; width: 2px; transition: opacity .2s; }
.gd-faq-item.open .gd-faq-q .pm::after { opacity: 0; }
.gd-faq-a { overflow: hidden; max-height: 0; transition: max-height .26s ease; }
.gd-faq-item.open .gd-faq-a { max-height: 600px; }
.gd-faq-a p { font-size: 15.5px; line-height: 1.65; color: #6E6557; margin: 0 0 22px; max-width: 640px; }

@media (max-width: 980px) {
  .gd-doc { grid-template-columns: 1fr; gap: 0; }
  .gd-toc { display: none; }
  .gd-ctable .chead { display: none; }
  .gd-ctable .crow { grid-template-columns: 1fr !important; gap: 6px; }
}