:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #e3e6ea;
  --text: #1c2330;
  --muted: #6b7280;
  --primary: #1f6feb;
  --primary-dark: #1758c4;
  --success: #0f9d58;
  --danger: #e11d48;
  --radius: 10px;

  /* Marketing palette. The landing and pricing pages used to carry a second,
     competing green/coral/yellow palette on top of the app's own blue tokens
     above, which is what made the marketing pages read as "too many colours".
     These are now aliases of the tokens already declared here, so the pages a
     visitor sees before signing up and the pages they see after use one system
     rather than two. Hues are down to two: --primary blue and --text navy. */
  --home-ink: var(--text);        /* navy: headings, card text, dark bands */
  --home-muted: var(--muted);     /* secondary copy */
  --home-accent: var(--primary);  /* blue: links, CTAs, kicker dot, accents */
  /* Same hue, darkened, for accent-coloured *text* sitting on the grey section
     background. --primary scores 4.25:1 there, which is under WCAG AA for the
     11-19px copy that uses it; --primary-dark scores 5.96:1. Decorative fills
     such as the kicker dot keep the brighter --home-accent. */
  --home-accent-text: var(--primary-dark);
  --home-cream: var(--bg);        /* alternating section background */
  --home-sand: var(--surface);    /* lighter band, for the pricing FAQ */
  /* Blue tint for text that sits on the navy band, where --primary itself is
     too dark to read. Same hue, so the hue count stays at two. */
  --home-on-navy: #9cc0ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.marketing {
  background: var(--surface);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.mkt-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  display: inline-grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff;
}

/* Header */
.mkt-header { border-bottom: 1px solid var(--border); background: #fff; position: sticky; top: 0; z-index: 20; }
.mkt-header .mkt-wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.mkt-nav { display: flex; align-items: center; gap: 14px; }
.mkt-nav > a:not(.button) { font-weight: 600; color: var(--text); }
.mkt-nav > a.active { color: var(--primary); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 9px; padding: 11px 20px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.button:hover { text-decoration: none; }
.button-primary { background: var(--primary); color: #fff; }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { background: #fff; color: var(--text); border-color: var(--border); }
.button-block { width: 100%; }
.button-sm { padding: 7px 14px; font-size: 14px; }

/* Shared section heading rhythm. Scoped to the two page wrappers so it cannot
   reach the auth templates, which load this file too. */
.landing-page h2, .pricing-page h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.5px;
}

/* Pricing */
.plan-grid-mkt {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  align-items: stretch; margin: 0 auto 26px; max-width: 720px;
}
.plan-card {
  background: #fff; border: 1px solid #dfe7e2; border-radius: 12px; padding: 26px;
  display: flex; flex-direction: column; color: var(--home-ink);
}
.plan-card h2 { margin: 0 0 2px; font-size: 21px; }
.plan-price { margin: 8px 0 2px; }
.plan-price strong { font-size: 30px; letter-spacing: -1px; color: var(--home-ink); }
.plan-features { list-style: none; margin: 16px 0; padding: 0; flex: 1; }
.plan-features li { padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.plan-card footer .button { width: 100%; }
.plan-featured {
  border: 2px solid var(--home-accent);
  box-shadow: 0 14px 34px -14px rgba(31, 111, 235, .45);
  position: relative;
}
.plan-featured::before {
  content: "MOST USED"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--home-accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .8px;
  padding: 3px 10px; border-radius: 999px;
}

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; text-align: left; }
.faq details {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px; margin-bottom: 10px;
}
.faq summary { font-weight: 600; cursor: pointer; }
.faq summary::marker { color: var(--home-accent); }
.faq p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; }

/* Auth */
.auth-body { background: var(--bg); }
.auth-logo { margin: 28px auto 8px; justify-content: center; display: flex; width: fit-content; }
.auth-shell { max-width: 460px; margin: 10px auto 60px; padding: 0 20px; }
.auth-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 30px; }
.auth-card h1 { font-size: 24px; margin: 0 0 18px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.auth-form input {
  font: inherit; color: var(--text); border: 1px solid #ccd2da; border-radius: 8px;
  padding: 10px 12px; background: #fff; width: 100%;
}
.auth-form input:focus { outline: 2px solid rgba(31, 111, 235, 0.25); border-color: var(--primary); }
.auth-form .button { margin-top: 6px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 42px; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 6px;
  color: #8792a0; line-height: 0; border-radius: 8px;
}
.password-toggle:hover { color: var(--text); }
.password-toggle svg { width: 18px; height: 18px; display: block; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.is-visible .icon-eye { display: none; }
.password-toggle.is-visible .icon-eye-off { display: block; }
.auth-foot-inline { text-align: center; margin-top: 16px; }
.auth-foot { text-align: center; margin-top: 16px; }
.demo-details { border: 1px dashed var(--border); border-radius: 10px; padding: 12px 16px; margin: 18px 0 0; }
.demo-details summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.demo-details p { margin: 8px 0 0; }
.demo-creds { font-family: Consolas, monospace; background: var(--bg); border-radius: 8px; padding: 8px 10px; }

/* Footer */
.mkt-footer { border-top: 1px solid var(--border); padding: 44px 0 26px; color: var(--muted); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-brand p { max-width: 250px; margin: 12px 0 0; font-size: 13px; line-height: 1.6; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h2 {
  margin: 0 0 3px; color: var(--home-ink);
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .7px;
}
.footer-col a { color: var(--muted); font-size: 13.5px; }
.footer-col a:hover { color: var(--home-accent); }
.footer-legal { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12.5px; }

/* Pricing feature matrix.
   .data-table lived only in app.css, which marketing pages never load, so the
   comparison table was rendering with no base rules. These stand alone now. */
.table-compare {
  width: 100%; border-collapse: collapse; margin-top: 22px; background: #fff;
  border: 1px solid #dfe7e2; border-radius: 10px; overflow: hidden;
}
.table-compare th, .table-compare td {
  padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 14.5px; text-align: left;
}
.table-compare thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); background: var(--home-cream); }
.table-compare th + th, .table-compare td + td { width: 110px; text-align: center; }
.table-compare tbody tr:last-child td { border-bottom: 0; }
.table-compare tbody tr:hover td { background: #fafbf9; }
.table-yes { color: var(--home-accent); font-weight: 600; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; }
.alert-error { background: #fdecef; color: var(--danger); border: 1px solid #f5c2cd; }
.alert-success { background: #e6f6ee; color: var(--success); border: 1px solid #bfe7d2; }

/* Landing page */
.landing-page { color: var(--home-ink); }
.home-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--home-cream);
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(28, 35, 48, .035) 40px), repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(28, 35, 48, .035) 40px);
}
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 52px;
  align-items: center;
  padding-top: 60px;
  padding-bottom: 38px;
}
.home-hero-copy { max-width: 490px; }
.home-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 17px;
  color: var(--home-accent-text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.home-kicker > span { width: 8px; height: 8px; background: var(--home-accent); border-radius: 2px; }
.home-hero h1 {
  margin: 0;
  color: var(--home-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
}
/* Hybrid H1: the brand keeps the 58px display treatment, the keyword sits
   directly beneath it in the same heading so it is not a separate h2. */
.home-h1-sub {
  display: block;
  margin-top: 10px;
  color: var(--home-accent-text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
.home-promise {
  margin: 16px 0 15px;
  color: var(--home-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1.08;
}
.home-intro { max-width: 450px; margin: 0; color: #50635e; font-size: 16px; line-height: 1.65; }
.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; margin: 25px 0 12px; }
.home-button { min-height: 48px; padding: 13px 19px; border-radius: 6px; background: var(--home-accent); color: #fff; }
.home-button:hover { background: #d95c42; }
.home-text-link { color: var(--home-accent-text); font-size: 14px; font-weight: 700; }
.home-text-link span { padding-left: 4px; }
.home-note { margin: 0; color: var(--home-muted); font-size: 12px; }
.ledger-preview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(28, 35, 48, .12);
  animation: ledger-enter .55s ease-out both;
}
@keyframes ledger-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ledger-topline { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ledger-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 6px; background: var(--home-accent); color: #fff; font-size: 11px; font-weight: 800; }
.ledger-product { color: var(--muted); font-size: 12px; font-weight: 700; }
.sample-tag { margin-left: auto; color: #8792a0; font-size: 9px; font-weight: 800; }
.ledger-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 21px 20px 15px; }
.ledger-heading > div { display: flex; flex-direction: column; gap: 5px; }
.ledger-caption { color: #8792a0; font-size: 9px; font-weight: 800; }
.ledger-heading strong { color: var(--home-ink); font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 600; }
.ledger-month { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; color: var(--muted); font-size: 10px; }
.ledger-month b { padding-left: 5px; color: var(--home-accent); }
.ledger-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px 19px; }
.ledger-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 13px; border-radius: 5px; }
/* The two summary tiles keep a green/amber wash because they encode collected
   versus still owed. That is information, not decoration, so it is the one
   deliberate exception to the two-hue rule. */
.ledger-stat-green { background: #edf5ef; }
.ledger-stat-yellow { background: #fff6df; }
.ledger-stat > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.ledger-stat strong { overflow-wrap: anywhere; color: var(--home-ink); font-size: 20px; line-height: 1.2; }
.ledger-stat small { color: #8792a0; font-size: 10px; }
.ledger-list-head { display: flex; justify-content: space-between; padding: 0 20px 8px; color: #8792a0; font-size: 9px; font-weight: 800; }
.ledger-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 20px; border-top: 1px solid var(--border); }
.ledger-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: var(--home-ink); font-size: 11px; font-weight: 800; background: #e2edfb; }
.ledger-client { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ledger-client strong { overflow: hidden; color: var(--home-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ledger-client span { color: var(--muted); font-size: 10px; }
.ledger-status { border-radius: 4px; padding: 4px 6px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.status-due { background: #fff3d3; color: #886513; }
.status-late { background: #ffebe6; color: #a14835; }
.status-paid { background: #e5f4e9; color: #26734f; }
.ledger-foot { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 12px 20px; background: var(--bg); color: var(--muted); font-size: 10px; }
.ledger-foot-mark { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #e2edfb; color: var(--home-accent); font-size: 10px; font-weight: 800; }
.hero-edge { display: flex; align-items: center; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 0 24px 16px; color: #8792a0; font-size: 9px; font-weight: 800; }
.hero-edge i { width: 28px; height: 1px; background: #ccd2da; }
.pain-section { padding: 86px 0 68px; background: var(--surface); }
.section-intro { max-width: 730px; margin-bottom: 35px; }
.section-intro h2, .workflow-heading h2, .plans-intro h2, .closing-inner h2 {
  margin: 0;
  color: var(--home-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 37px;
  font-weight: 600;
  line-height: 1.13;
}
.section-intro h2 em, .plans-intro h2 em { color: var(--home-accent); font-style: normal; }
/* The researched pain stat. Deliberately two lines maximum so it adds
   authority to the section without adding a block. */
.pain-stat {
  max-width: 620px;
  margin: 20px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--home-accent);
  color: #50635e;
  font-size: 16px;
  line-height: 1.6;
}
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.benefit { min-width: 0; padding-top: 16px; border-top: 1px solid #dce5df; }
.benefit-index { color: var(--home-accent); font-size: 11px; font-weight: 800; }
.benefit h3 { margin: 11px 0 7px; color: var(--home-ink); font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 600; }
.benefit p { max-width: 330px; margin: 0; color: var(--home-muted); font-size: 14px; line-height: 1.65; }
.workflow-section { padding: 94px 0 70px; background: var(--home-ink); color: #fff; }
.workflow-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
.workflow-heading h2 { color: #fff; font-size: 36px; }
.workflow-heading > p { max-width: 360px; margin: 16px 0 22px; color: #c5cfdd; font-size: 14px; line-height: 1.65; }
.workflow-section .home-text-link { color: var(--home-on-navy); }
.workflow-list { border-top: 1px solid rgba(255,255,255,.22); }
.workflow-step { display: grid; grid-template-columns: 35px minmax(0, 1fr) 24px; gap: 14px; align-items: center; min-height: 78px; border-bottom: 1px solid rgba(255,255,255,.22); }
.workflow-step > b { color: var(--home-on-navy); font-size: 11px; }
.workflow-step > div { display: flex; flex-direction: column; gap: 3px; }
.workflow-step strong { color: #fff; font-size: 15px; }
.workflow-step div span { color: #b9c3d1; font-size: 12px; }
.workflow-symbol { color: var(--home-on-navy); font-size: 18px; text-align: right; }
.plans-section { padding: 92px 0 68px; background: var(--home-cream); }
.plans-layout { display: grid; grid-template-columns: 1fr .95fr; gap: 60px; align-items: center; }
.plans-intro h2 { font-size: 34px; }
.plans-intro > p { max-width: 430px; margin: 15px 0 0; color: var(--home-muted); font-size: 14px; line-height: 1.65; }
.plan-summary { border-top: 1px solid var(--border); }
.plan-summary-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--border); }
.plan-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-free { background: var(--home-accent); }
.dot-pro { background: var(--home-ink); }
.plan-summary-row > div { display: flex; flex-direction: column; gap: 3px; }
.plan-summary-row strong { color: var(--home-ink); font-size: 14px; }
.plan-summary-row strong small { margin-left: 5px; color: var(--muted); font-size: 10px; font-weight: 600; }
.plan-summary-row > div span { color: #68756f; font-size: 11px; line-height: 1.45; }
.plan-summary-row > a { color: var(--home-accent-text); font-size: 12px; font-weight: 800; }
.plan-summary-pro > a { color: var(--home-ink); }
.plan-summary-foot { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.closing-section { padding: 52px 0 62px; background: var(--home-cream); }
.closing-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.closing-inner h2 { max-width: 580px; font-size: 37px; }
.closing-button { margin-top: 22px; border-radius: 6px; background: var(--home-accent); color: #fff; }
.closing-button:hover { background: var(--primary-dark); }
.landing-page .mkt-footer, .pricing-page .mkt-footer { border-color: #e3e9e4; }

/* FAQ section on the landing page. The questions come from FAQ_ITEMS in the
   marketing router, the same list that produces the FAQPage JSON-LD. */
.faq-section { padding: 86px 0 70px; background: var(--surface); }
.faq-section .section-intro { max-width: 620px; margin: 0 auto 32px; }
.faq-section .section-intro h2 { font-size: 33px; }
.faq-section .faq details { border-color: var(--border); }

/* Pricing page, rendered in the same blue/navy system as the landing page. */
.pricing-page { color: var(--home-ink); }
.pricing-hero { padding: 62px 0 40px; background: var(--home-cream); }
.pricing-hero h1 {
  margin: 0 auto;
  max-width: 620px;
  color: var(--home-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.14;
}
.pricing-sub { max-width: 520px; margin: 15px auto 0; color: var(--home-muted); font-size: 16.5px; line-height: 1.6; }
.pricing-plans { padding: 46px 0 20px; background: #fff; }
.pricing-foot-note { max-width: 520px; margin: 0 auto; line-height: 1.6; }
.pricing-compare { padding: 46px 0 60px; background: #fff; }
.pricing-compare h2 { margin: 0; font-size: 30px; }
.pricing-faq { padding: 56px 0 70px; background: var(--home-sand); }
.pricing-faq h2 { margin: 0 0 30px; font-size: 30px; }
.pricing-faq .faq details { border-color: #e4e0d2; }

@media (max-width: 900px) {
  .home-hero-grid { grid-template-columns: 1fr; gap: 27px; padding-top: 39px; padding-bottom: 25px; }
  .home-hero-copy { max-width: 600px; }
  .home-hero h1 { font-size: 48px; }
  .home-promise { font-size: 30px; }
  .ledger-preview { width: 100%; max-width: 590px; }
  .hero-edge { padding-bottom: 12px; }
  .workflow-layout, .plans-layout { grid-template-columns: 1fr; gap: 28px; }
  .workflow-heading h2, .plans-intro h2 { max-width: 540px; }
  .home-h1-sub { font-size: 19px; }
  .plan-grid-mkt { grid-template-columns: 1fr; max-width: 460px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 560px) {
  .home-hero-grid { gap: 12px; padding: 22px 18px 8px; }
  .home-kicker { margin-bottom: 10px; font-size: 10px; }
  .home-hero h1 { font-size: 36px; }
  .home-promise { margin: 7px 0 9px; font-size: 24px; }
  .home-intro { font-size: 13px; line-height: 1.42; }
  .home-actions { align-items: center; flex-direction: row; gap: 10px; margin: 12px 0 6px; }
  .home-button { min-height: 39px; padding: 10px 11px; font-size: 12px; white-space: nowrap; }
  .home-text-link { font-size: 11px; }
  .home-note { font-size: 10px; }
  .ledger-topline { padding: 8px 11px; }
  .ledger-mark { width: 24px; height: 24px; }
  .ledger-heading { align-items: flex-start; flex-direction: column; gap: 3px; padding: 10px 12px 9px; }
  .ledger-caption { font-size: 8px; }
  .ledger-heading strong { font-size: 15px; }
  .ledger-month { align-self: flex-end; margin-top: -25px; padding: 5px 6px; font-size: 9px; }
  .ledger-stats { gap: 6px; padding: 0 11px 9px; }
  .ledger-stat { gap: 2px; padding: 7px; }
  .ledger-stat > span, .ledger-stat small { font-size: 9px; }
  .ledger-stat strong { font-size: 15px; }
  .ledger-list-head { padding: 0 11px 5px; }
  .ledger-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; padding: 6px 11px; }
  .ledger-avatar { width: 23px; height: 23px; }
  .ledger-client strong { font-size: 9px; }
  .ledger-client span { font-size: 8px; }
  .ledger-status { padding: 3px 4px; font-size: 8px; }
  .ledger-foot { margin-top: 3px; padding: 7px 11px; font-size: 8px; }
  .hero-edge { padding-right: 18px; padding-left: 18px; }
  .pain-section, .workflow-section, .plans-section { padding-top: 48px; padding-bottom: 50px; }
  .section-intro h2, .workflow-heading h2, .plans-intro h2, .closing-inner h2 { font-size: 29px; }
  .benefit-grid { grid-template-columns: 1fr; gap: 22px; }
  .workflow-step { grid-template-columns: 28px minmax(0, 1fr) 18px; gap: 10px; min-height: 76px; }
  .workflow-step div span { font-size: 11px; }
  .plan-summary-row { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 9px; }
  .plan-summary-row > div span { max-width: 235px; }
  .closing-section { padding: 45px 0 54px; }
  .home-h1-sub { margin-top: 7px; font-size: 16px; }
  .pain-stat { margin-top: 14px; padding-left: 12px; font-size: 13.5px; line-height: 1.5; }
  .faq-section, .pricing-faq { padding-top: 44px; padding-bottom: 48px; }
  .faq-section .section-intro h2, .pricing-hero h1, .pricing-faq h2, .pricing-compare h2 { font-size: 26px; }
  .pricing-hero { padding: 40px 0 30px; }
  .pricing-sub { font-size: 14px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}