/* =========================================================
   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: 1040px; margin: 0 auto; padding: 0 24px; }
.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); }

/* ---------- Nav ---------- */
.mk-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(253,251,248,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-1);
}
.mk-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.mk-nav-links { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--ink-3); }
.mk-nav-links a:hover { color: var(--ink-1); }

.mk-brand { display: inline-flex; align-items: center; gap: 10px; }
.mk-brand-mark {
  width: 28px; height: 28px; background: var(--ink-1); color: var(--bg);
  border-radius: 7px; display: grid; place-items: center;
  font-size: 14px; font-weight: 600; letter-spacing: -0.04em;
}
.mk-brand-name { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.mk-brand-name em { font-style: normal; color: var(--accent); }

/* ---------- 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-section-intro { margin-top: -14px; margin-bottom: 28px; max-width: 68ch; }
.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;
}

.mk-benefit { box-shadow: var(--shadow-1); }

/* ---------- 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-aside { margin-top: 24px; }
.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); }

/* ---------- Illustrative example ---------- */
.mk-example { box-shadow: var(--shadow-2); }
.mk-example-claim { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--ink-1); }
.mk-example-scope {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line-1);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
}
.mk-example-scope .mk-dim { margin-right: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.mk-example-takeaway { margin-top: 12px; }

/* ---------- 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; }

/* ---------- FAQ ---------- */
.mk-faq { display: flex; flex-direction: column; gap: 4px; }
.mk-faq-item { padding: 20px 0; border-bottom: 1px solid var(--line-1); }
.mk-faq-item:last-child { border-bottom: none; }

/* ---------- 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 ---------- */
.mk-band { background: var(--ink-1); color: var(--bg); padding: 72px 0; }
.mk-band .mk-h2 { color: var(--bg); max-width: 22ch; }
.mk-band-inner .mk-btn-ghost { color: var(--bg); }
.mk-band-inner .mk-btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* ---------- Footer ---------- */
.mk-footer { background: var(--bg); border-top: 1px solid var(--line-1); padding: 56px 0; }
.mk-footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.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; }
.mk-footer-brand .mk-prose { margin-top: 12px; }
.mk-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-3); }
.mk-footer-col a:hover { color: var(--ink-1); }
.mk-footer-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); font-weight: 600; margin-bottom: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .mk-grid, .mk-steps { grid-template-columns: 1fr; }
  .mk-footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .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; }
.rn-root a { cursor: pointer; text-decoration: none; color: inherit; }
.rn-mono { font-family: 'Geist Mono', monospace; }
.rn-nav { display: flex; align-items: center; gap: 32px; padding: 0 64px; height: 80px; }
.rn-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.025em; }
.rn-links { display: flex; gap: 30px; margin-left: 24px; font-size: 14px; color: #6E6557; }
.rn-links a { white-space: nowrap; }
.rn-nav-cta { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.rn-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; 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 64px 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-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 64px; }
.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 64px; 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; }
/* FAQ */
.rn-faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; }
.rn-faq-item { padding: 22px 0; border-top: 1px solid #EFE6D8; }
.rn-faq-item:last-child { border-bottom: 1px solid #EFE6D8; }
.rn-faq-item h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 8px; display: flex; justify-content: space-between; }
.rn-faq-item h3 span.x { color: #C9BCA8; font-weight: 400; }
.rn-faq-item p { font-size: 14.5px; line-height: 1.6; color: #6E6557; margin: 0; max-width: 600px; text-wrap: pretty; }
/* CTA */
.rn-cta { background: #191510; color: #FDFBF8; text-align: center; padding: 96px 64px; }
.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 */
.rn-footer { border-top: 1px solid #EFE6D8; padding: 56px 64px 0; }
.rn-footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
.rn-footer-brand p { font-size: 13.5px; line-height: 1.6; color: #A89B87; margin: 16px 0 0; max-width: 260px; text-wrap: pretty; }
.rn-footer-h { display: block; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: #A89B87; margin-bottom: 14px; }
.rn-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: #6E6557; }
.rn-footer-col a:hover { color: #1A1713; }
.rn-foot { display: flex; align-items: center; justify-content: space-between; padding: 24px 0;
  border-top: 1px solid #EFE6D8; font-size: 13px; color: #A89B87; }
.rn-foot a { color: inherit; }
.rn-foot a:hover { color: #1A1713; }

/* Responsive (additions beyond the fixed-1440 design export) */
@media (max-width: 1280px) {
  .rn-hero { gap: 48px; padding: 56px 48px 72px; }
  .rn-h1 { font-size: 54px; }
  .rn-nav, .rn-sec, .rn-cta, .rn-footer { padding-left: 48px; padding-right: 48px; }
  .rn-dark { grid-template-columns: 1fr 460px; gap: 56px; padding: 80px 48px; }
}
@media (max-width: 1080px) {
  .rn-nav { padding: 0 24px; height: 68px; }
  .rn-links { display: none; }
  .rn-hero { grid-template-columns: 1fr; gap: 44px; padding: 36px 24px 56px; }
  .rn-h1 { font-size: 44px; }
  .rn-h2 { font-size: 32px; }
  .rn-sub { font-size: 16.5px; }
  .rn-sec { padding: 64px 24px; }
  .rn-steps { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
  .rn-dark { grid-template-columns: 1fr; gap: 44px; padding: 64px 24px; }
  .rn-chart { padding: 24px 22px; }
  .rn-brow { grid-template-columns: 132px 1fr 40px; }
  .rn-quotes { grid-template-columns: 1fr; margin-top: 36px; }
  .rn-faq { grid-template-columns: 1fr; gap: 28px; }
  .rn-faq-item p { max-width: none; }
  .rn-cta { padding: 64px 24px; }
  .rn-cta h2 { font-size: 34px; }
  .rn-footer { padding: 44px 24px 0; }
  .rn-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .rn-footer-brand { grid-column: 1 / -1; }
  .rn-foot { flex-wrap: wrap; gap: 10px; }
}
@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-nav-cta .rn-btn.soft { display: none; }
  .rn-nav-cta .rn-btn { height: 40px; padding: 0 16px; font-size: 13.5px; }
  .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; }
  .rn-footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .rn-foot { flex-direction: column; align-items: flex-start; }
}