/* Module pages (ERP and Document Intake) — everything not already in styles.css.
   Both module pages load this file: they are one layout, and keeping two copies
   of these rules in step by hand would be the surer way to let them drift.
   Document Intake adds only its numbered steps, in document-intake/intake.css.

   The nav, footer, buttons and reveal animations are shared.

   The page is a stack of light "paper" panels on the site's dark background,
   the same frame treatment About and Savings use, so the pages feel related.
   The shell/frame/inner names match about.css on purpose: it is one pattern,
   not two, and a reader who has seen one page can read the other. */

/* ── Header ────────────────────────────────────────────────────────────────── */
/* No photo hero on this page, so the nav sits in normal flow rather than
   floating over an image. 24px matches the gap the other sub-pages leave. */
.erp-header { padding: 24px; }
.erp-header .nav-wrap { position: static; transform: none; margin: 0 auto; }

/* ── Section shell ─────────────────────────────────────────────────────────── */
.erp-section { position: relative; }
.erp-shell { max-width: 1500px; margin: 0 auto; padding: 0 24px 24px; }
.erp-frame {
  position: relative; overflow: hidden;
  border: 1px solid rgba(45,42,38,0.08); border-radius: 30px;
  background:
    radial-gradient(circle at top center, rgba(168,138,109,0.06), transparent 22%),
    linear-gradient(180deg, #f2eee8 0%, #e8e2d9 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 24px 60px rgba(0,0,0,0.06);
}
/* The Document Intake panel is a cross-sell, not part of the ERP story, so it
   carries a warmer wash to read as a step sideways rather than the next point. */
.erp-frame-accent {
  background:
    radial-gradient(circle at top center, rgba(168,138,109,0.14), transparent 40%),
    linear-gradient(180deg, #efe9e0 0%, #e4dcd1 100%);
}
.erp-inner { position: relative; z-index: 1; padding: 84px 44px 76px; }
.erp-inner-tight { padding: 60px 44px 56px; }

.erp-head { max-width: 800px; margin: 0 auto 48px; text-align: center; }
.erp-kicker { margin: 0 0 16px; font-size: 11px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze-ink); }
.erp-title { margin: 0; font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height: 1.02; letter-spacing: -0.05em; color: var(--ink); }
/* The h1 carries the page; every h2 below it steps down a size so the hero
   stays the loudest thing on the page. */
.erp-title-sm { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.erp-lede { margin: 22px auto 0; max-width: 62ch; font-size: 16px; line-height: 1.8; color: var(--ink-soft); }

/* Buttons themselves are shared (.btn-primary / .btn-secondary in styles.css);
   this only centres the row, which the home page does not. */
.erp-cta-row { justify-content: center; margin-top: 30px; }

/* ── Prose blocks ──────────────────────────────────────────────────────────── */
/* 68ch is about 12 words a line, which is where long prose stops being tiring. */
.erp-prose { max-width: 68ch; margin: 0 auto; }
.erp-prose p { margin: 0 0 22px; font-size: 16px; line-height: 1.8; color: var(--ink-soft); }
.erp-prose p:last-child { margin-bottom: 0; }
/* The sentence a section is actually for gets the page's ink colour instead of
   the softer body grey. */
.erp-prose-close { font-size: 17px !important; color: var(--ink) !important; font-weight: 500; }
.erp-close { max-width: 68ch; margin: 40px auto 0; text-align: center; font-size: 16px; line-height: 1.8; color: var(--ink); }

/* ── Shared card furniture ─────────────────────────────────────────────────── */
.erp-card-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(168,138,109,0.26); background: rgba(168,138,109,0.10);
  color: var(--bronze-ink);
}

/* ── What it does ──────────────────────────────────────────────────────────── */
/* align-items: start keeps a three-line card from stretching to match a
   ten-line one sitting beside it. */
.erp-grid {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: stretch;
}
.erp-card {
  display: flex; flex-direction: column;
  padding: 28px 28px 30px;
  border: 1px solid rgba(45,42,38,0.10); border-radius: 22px;
  background: rgba(255,255,255,0.46);
}
.erp-card-head { display: flex; align-items: center; gap: 14px; }
.erp-card-title { margin: 0; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.erp-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* A bronze dash instead of a bullet, drawn with padding rather than list-style
   so the wrapped second line lines up under the first. */
.erp-list li {
  position: relative; padding-left: 18px;
  font-size: 15px; line-height: 1.7; color: var(--ink-soft);
}
.erp-list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 8px; height: 1px; background: var(--bronze-ink);
}

/* ── Who uses it ───────────────────────────────────────────────────────────── */
.erp-role-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.erp-role {
  padding: 28px 26px 30px; text-align: center;
  border: 1px solid rgba(45,42,38,0.10); border-radius: 22px;
  background: rgba(255,255,255,0.46);
}
.erp-role .erp-card-icon { margin: 0 auto; }
.erp-role-name { margin: 18px 0 0; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.erp-role-text { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

/* ── An assistant for every role ───────────────────────────────────────────── */
.erp-assistant-list { max-width: 900px; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; }
.erp-assistant-item {
  display: flex; gap: 18px; padding: 26px 28px;
  border: 1px solid rgba(45,42,38,0.10); border-radius: 22px;
  background: rgba(255,255,255,0.46);
}
.erp-assistant-lead { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.erp-assistant-text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-soft); }

/* ── Pricing block ─────────────────────────────────────────────────────────── */
/* Sits inside the "Getting started" panel as a bordered card, so the number is
   the one thing on that panel a skimming reader stops on. */
.erp-price {
  max-width: 68ch; margin: 44px auto 0; padding: 32px 30px 34px; text-align: center;
  border: 1px solid rgba(168,138,109,0.26); border-radius: 24px;
  background: rgba(255,255,255,0.56);
}
.erp-price-figure { margin: 0; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.erp-price-unit { font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }
.erp-price-text { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

/* ── Lead form on a light panel ────────────────────────────────────────────── */
/* The form's own colours in styles.css are built for the dark background it has
   on Home and Contact Us. The module pages are light "paper" panels, so the
   same markup needs the ink palette instead: dark text, and borders dark enough
   to draw a box. Only colour is overridden here — layout, spacing and the
   button stay shared, so the form is still one component. */
.erp-inner .lf-title { color: var(--ink); }
.erp-inner .lf-intro,
.erp-inner .lf-check { color: var(--ink-soft); }
.erp-inner .lf-field label { color: var(--ink-soft); }
.erp-inner .lf-note { color: var(--ink-soft); }
.erp-inner .lf-note a { color: var(--ink); }

.erp-inner .lf-field input,
.erp-inner .lf-field select {
  color: var(--ink);
  background-color: rgba(255,255,255,0.62);
  border-color: rgba(45,42,38,0.28);
}
.erp-inner .lf-field input::placeholder { color: rgba(45,42,38,0.74); }
.erp-inner .lf-field input:focus,
.erp-inner .lf-field select:focus {
  border-color: var(--bronze-ink);
  background-color: rgba(255,255,255,0.86);
}
/* The chevron is drawn in the stylesheet, so its colour has to be swapped with
   the rest of the palette or it disappears against the lighter field. */
.erp-inner .lf-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235f5850' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

/* ── Small screens ─────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .erp-shell { padding: 0 16px 16px; }
  .erp-inner { padding: 56px 22px 52px; }
  .erp-inner-tight { padding: 44px 22px 42px; }
  .erp-head { margin-bottom: 36px; }
  .erp-grid, .erp-role-grid { grid-template-columns: 1fr; }
  .erp-card { padding: 24px 20px 26px; }
  /* The icon above the text reads better than beside it once the card narrows. */
  .erp-assistant-item { flex-direction: column; gap: 14px; padding: 22px 20px; }
  .erp-price { padding: 26px 20px 28px; }
  /* Full-width buttons on a phone: a 14px-tall pill is a small tap target. */
  .erp-cta-row { flex-direction: column; align-items: stretch; }
  .erp-cta-row .btn-primary, .erp-cta-row .btn-secondary { justify-content: center; }
}

.erp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .erp-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .erp-grid-3 { grid-template-columns: 1fr; } }