/* =========================================================
   iDempiere by SCM Software Lab — Design System v2 (light)
   idempiere.scmsoftwarelab.com

   Visual language aligned with appsxpert.ai:
   white + #f8f9fb surfaces, hairline borders, Inter, small radii,
   uppercase CTAs, a 40px red rule under section headings, and navy
   reserved for the CTA panel and the copyright bar.

   Class names are unchanged from v1 — no page markup needs editing.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --red:        #EE0014;
  --red-600:    #CC0011;
  --red-soft:   #FFF5F5;

  --blue:       #056CB8;
  --blue-600:   #045795;
  --blue-soft:  #F0F4FF;

  --navy:       #0B1F4A;
  --navy-700:   #0E3065;
  --navy-900:   #0B0D1F;

  --green:      #2D9F4F;
  --orange:     #F77F00;

  /* Neutrals */
  --ink:        #010101;
  --ink-2:      #333333;
  --muted:      #5B6478;
  --muted-2:    #7C8496;
  --line:       #E7EBF0;
  --line-2:     #EFF2F6;
  --surface:    #FFFFFF;
  --surface-2:  #F8F9FB;
  --surface-3:  #F0F4FF;
  --footer-bg:  #F3F5F9;

  /* Status */
  --ok:         #2D9F4F;
  --warn:       #F77F00;
  --danger:     #EE0014;

  /* Type — one family, like the reference */
  --font-title: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* Fluid type scale */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --fs-h4:   clamp(1.0625rem, 0.5vw + 0.98rem, 1.25rem);
  --fs-h3:   clamp(1.25rem, 0.9vw + 1.05rem, 1.625rem);
  --fs-h2:   clamp(1.625rem, 1.9vw + 1.05rem, 2.375rem);
  --fs-h1:   clamp(1.9375rem, 3vw + 1.05rem, 3.125rem);

  /* Space */
  --gap:      1.5rem;
  --pad-sec:  clamp(3.25rem, 5.5vw, 5.75rem);
  --radius:   12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
  --radius-btn: 2px;

  /* Elevation — soft and low, never heavy */
  --sh-sm: 0 1px 2px rgba(11, 31, 74, .04);
  --sh:    0 2px 8px rgba(11, 31, 74, .05);
  --sh-md: 0 8px 28px rgba(11, 31, 74, .07);
  --sh-lg: 0 18px 48px rgba(11, 31, 74, .10);

  --header-h: 70px;
  --maxw: 1180px;
  --maxw-narrow: 760px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--ink);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -.032em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.028em; }
h3 { font-size: var(--fs-h3); letter-spacing: -.018em; }
h4 { font-size: var(--fs-h4); letter-spacing: -.012em; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--blue); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--navy); }

ul, ol { padding-left: 1.25rem; }
li + li { margin-top: .4em; }

code, kbd, pre { font-family: var(--font-mono); font-size: .875em; }
code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: .12em .38em;
  border-radius: 4px;
  color: var(--navy-700);
}
pre {
  background: var(--navy-900);
  color: #D8DEEA;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: .8125rem;
  line-height: 1.7;
}
pre code { background: none; padding: 0; color: inherit; border: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--red); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .wrap { padding-inline: 2rem; } }

.wrap-narrow { max-width: var(--maxw-narrow); margin-inline: auto; }

.section { padding-block: var(--pad-sec); }
.section-tight { padding-block: clamp(2.5rem, 4vw, 4rem); }

.section-alt  { background: var(--surface-2); }
.section-soft { background: var(--blue-soft); }

/* v1 used a navy band here. In the light system it becomes a tinted band
   so the page stays bright; the only dark blocks are .cta-band and the
   copyright bar. Text stays dark, so all inherited colours still read. */
.section-dark { background: var(--surface-3); color: var(--ink-2); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--ink); }
.section-dark a { color: var(--blue); }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 640px)  { .g-sm-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  {
  .g-2 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .g-4 { grid-template-columns: repeat(4, 1fr); } }

.split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
}
@media (min-width: 992px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-60-40 { grid-template-columns: 1.3fr 1fr; }
  .split-40-60 { grid-template-columns: 1fr 1.3fr; }
  .split-reverse > *:first-child { order: 2; }
}

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.75rem; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mt-4 { margin-top: 2.5rem; }
.mb-3 { margin-bottom: 1.75rem; }

/* ---------- 4. Type helpers ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-title);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .85rem;
}

.lead {
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: 1.68;
}

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* v1 gradient text — now a flat brand red, which reads better on white */
.grad-text { color: var(--red); }

.sec-head { max-width: 720px; margin-bottom: clamp(2rem, 3.5vw, 3.25rem); }
.sec-head.text-center { margin-inline: auto; }
.sec-head p { margin-top: 1rem; }

/* The reference's signature: a short red rule beneath the section heading */
.sec-head h2::after,
.sec-head h1::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--red);
  margin-top: 1.15rem;
}
.sec-head.text-center h2::after,
.sec-head.text-center h1::after { margin-inline: auto; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1.05rem 1.6rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
  text-align: center;
}

.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; }

.btn-dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-dark:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

.btn-ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-ghost:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Ghost buttons on the two dark surfaces that remain */
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.btn-sm { padding: .75rem 1.15rem; font-size: .75rem; }
.btn-lg { padding: 1.15rem 2rem; font-size: var(--fs-sm); }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }
.btn-row.text-center, .text-center .btn-row { justify-content: center; }

@media (max-width: 420px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* ---------- 6. Header / Nav ---------- */
.topbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 38px; flex-wrap: wrap;
}
.topbar a { color: var(--muted); }
.topbar a:hover { color: var(--navy); }
.topbar-links { display: flex; gap: 1.25rem; align-items: center; }
@media (max-width: 767px) { .topbar-tag { display: none; } .topbar-inner { justify-content: center; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: 0 1px 12px rgba(11,31,74,.07); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: -.02em;
}
.brand-sub {
  font-size: .625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
}

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
.nav-toggle[aria-expanded="true"] .ico-open  { display: none; }

.nav-menu { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { margin: 0; position: relative; }

.nav-link {
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding: .6rem .75rem;
  border-radius: 4px;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--blue); }
.nav-link.is-active { color: var(--blue); font-weight: 600; }
.nav-link.is-active::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -2px;
  height: 2px; background: var(--red);
}
.nav-link .caret { width: 11px; height: 11px; transition: transform .2s ease; opacity: .55; }
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-cta { display: flex; align-items: center; gap: .6rem; }

/* Desktop dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 285px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-lg);
  padding: .55rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  list-style: none;
}
.dropdown-wide { min-width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: .6rem .7rem;
  border-radius: 4px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-family: var(--font-title);
  font-weight: 500;
}
.dropdown a:hover { background: var(--surface-2); color: var(--blue); }
.dropdown a small { display: block; color: var(--muted-2); font-size: .75rem; font-weight: 400; margin-top: 1px; }
.dd-head {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted-2); font-weight: 700; padding: .7rem .7rem .35rem;
  grid-column: 1 / -1;
}
.dd-foot {
  grid-column: 1 / -1; margin-top: .35rem; padding-top: .5rem;
  border-top: 1px solid var(--line-2);
}
.dd-foot a { color: var(--red); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.dd-foot a:hover { color: var(--red-600); background: none; }

/* Mobile nav */
@media (max-width: 1023px) {
  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem 6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Slide vertically, not horizontally: an off-canvas panel translated to the
       right extends the document and creates a horizontal scrollbar. Upward
       overflow is never scrollable, so this stays clean. */
    transform: translateY(-100%);
    visibility: hidden;
    /* visibility flips instantly on open, and only after the slide-out on close */
    transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
    border-top: 1px solid var(--line);
  }
  .nav-menu.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }
  body.nav-open { overflow: hidden; }

  .nav-menu > li { border-bottom: 1px solid var(--line-2); }
  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem .25rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0;
  }
  .nav-link.is-active::after { display: none; }

  .dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 .75rem;
    min-width: 0; display: none; background: transparent;
  }
  .dropdown-wide { grid-template-columns: 1fr; }
  .dropdown.is-open { display: block; }
  .dropdown-wide.is-open { display: grid; }
  .dropdown a { padding: .6rem .25rem .6rem 1rem; border-left: 2px solid var(--line); border-radius: 0; }
  .dd-head { padding-left: .25rem; }

  .nav-cta { display: none; }
  .nav-menu .nav-mobile-cta { display: block; border: 0; margin-top: 1.25rem; }
  .nav-menu .nav-mobile-cta .btn { width: 100%; }
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-mobile-cta { display: none; }
}
@media (max-width: 1180px) and (min-width: 1024px) {
  .nav-link { padding: .6rem .5rem; font-size: .8125rem; }
  .nav-cta .btn { padding: .85rem 1.05rem; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--blue-soft) 0%, #F7F9FF 62%, #fff 100%);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.hero h1 { color: var(--ink); }
.hero h1::after {
  content: ""; display: block; width: 48px; height: 2px;
  background: var(--red); margin-top: 1.5rem;
}
.hero .lead { color: var(--muted); max-width: 58ch; margin-top: 1.5rem; }
.hero .lead strong { color: var(--ink); font-weight: 600; }
.hero .eyebrow { color: var(--blue); }

.hero-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  background: #fff;
}
.hero-media img { width: 100%; }

.hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  padding: .5rem .85rem;
  border-radius: 100px;
}
.hero-badge svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  background: linear-gradient(180deg, var(--blue-soft) 0%, #F8FAFF 100%);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  padding-block: clamp(2.25rem, 4vw, 3.75rem);
  overflow: hidden;
}
.page-hero h1 { color: var(--ink); margin-top: .35rem; }
.page-hero h1::after {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--red); margin-top: 1.35rem;
}
.page-hero .lead { color: var(--muted); max-width: 68ch; margin-top: 1.35rem; }
.page-hero .btn-row { margin-top: 2rem; }
.page-hero .eyebrow { margin-top: 1.25rem; margin-bottom: .25rem; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  list-style: none; padding: 0; margin: 0;
  font-size: var(--fs-xs); color: var(--muted-2);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.crumbs li[aria-current] { color: var(--ink-2); font-weight: 500; }
.crumbs .sep { opacity: .5; }

/* ---------- 8. Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.85rem;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
  height: 100%;
}
a.card, .card-link { display: block; color: inherit; }
a.card:hover, .card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: #D7DEE8;
  color: inherit;
}
.card h3, .card h4 { margin-bottom: .65rem; }
.card p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.card p + p { margin-top: .75rem; }

.card-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 1.15rem;
  border: 1px solid #DCE4F7;
}
.card-icon svg { width: 22px; height: 22px; }
.card-teal .card-icon { background: var(--red-soft); color: var(--red); border-color: #F8D9DC; }

.card-more {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.15rem;
  font-family: var(--font-title); font-weight: 600; font-size: var(--fs-xs);
  color: var(--red);
  text-transform: uppercase; letter-spacing: .05em;
}
.card-more svg { width: 14px; height: 14px; transition: transform .25s ease; }
a.card:hover .card-more svg, .card-hover:hover .card-more svg { transform: translateX(4px); }

.section-dark .card { background: #fff; border-color: var(--line); }

/* Module card grid (compact) */
.mod-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .mod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .mod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .mod-grid { grid-template-columns: repeat(4, 1fr); } }

.mod-card {
  display: flex; align-items: flex-start; gap: .9rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1.15rem;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.mod-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.mod-card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-md);
  border-color: #D7DEE8; color: inherit;
}
.mod-card:hover::after { transform: scaleX(1); }
.mod-card .mi {
  flex-shrink: 0; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 6px;
  background: var(--blue-soft); color: var(--blue);
}
.mod-card .mi svg { width: 18px; height: 18px; }
.mod-card b {
  display: block; font-family: var(--font-title); font-weight: 600;
  font-size: var(--fs-sm); color: var(--ink); line-height: 1.35;
}
.mod-card span { display: block; font-size: var(--fs-xs); color: var(--muted-2); margin-top: .2rem; line-height: 1.5; }

/* ---------- 9. Feature list / checks ---------- */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li {
  position: relative; padding-left: 1.85rem; margin-top: .85rem;
  font-size: var(--fs-sm); color: var(--muted);
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23EE0014'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 011.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/12px no-repeat;
}
.checks li strong { color: var(--ink); font-weight: 600; }

.checks-2 { columns: 1; }
@media (min-width: 720px) { .checks-2 { columns: 2; column-gap: 2.5rem; } .checks-2 li { break-inside: avoid; } }

/* Dark-surface variants kept for the CTA panel */
.cta-band .checks li { color: rgba(255,255,255,.82); }
.cta-band .checks li strong { color: #fff; }

/* ---------- 10. Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; padding: 1.85rem 1.25rem; text-align: center; }
.stat b {
  display: block; font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem); color: var(--navy); letter-spacing: -.035em;
  line-height: 1.1;
}
.stat span {
  display: block; margin-top: .4rem; font-size: var(--fs-xs); color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.section-dark .stat { background: #fff; }

/* ---------- 11. Tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; }
thead th {
  background: var(--surface-2); text-align: left; font-family: var(--font-title);
  font-weight: 600; color: var(--ink); padding: .95rem 1.15rem;
  border-bottom: 1px solid var(--line); white-space: nowrap; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .06em;
}
tbody td { padding: .95rem 1.15rem; border-bottom: 1px solid var(--line-2); color: var(--muted); vertical-align: top; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover th { background: var(--surface-2); }
tbody td strong, tbody th { color: var(--ink); font-weight: 600; }
tbody th { padding: .95rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line-2); font-family: var(--font-title); }
.tick { color: var(--green); font-weight: 700; }
.cross { color: var(--muted-2); }

/* ---------- 12. Accordion / FAQ ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.acc-item + .acc-item { border-top: 1px solid var(--line); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.25rem 1.35rem;
  font-family: var(--font-title); font-weight: 600; font-size: var(--fs-base); color: var(--ink);
  transition: background .2s ease;
}
.acc-btn:hover { background: var(--surface-2); }
.acc-btn .pm {
  flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); transition: transform .25s ease, background .25s ease, color .25s ease;
}
.acc-btn .pm svg { width: 13px; height: 13px; }
.acc-btn[aria-expanded="true"] .pm { transform: rotate(45deg); background: var(--red); border-color: var(--red); color: #fff; }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.acc-panel[data-open="true"] { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p, .acc-panel ul { padding: 0 1.35rem 1.35rem; color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.acc-panel ul { padding-left: 2.6rem; }

/* ---------- 13. Steps / timeline ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { position: relative; padding-left: 3.6rem; padding-bottom: 2rem; margin: 0; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--red);
  color: var(--red); font-family: var(--font-title); font-weight: 700; font-size: .9375rem;
}
.steps li::after {
  content: ""; position: absolute; left: 19.5px; top: 48px; bottom: 4px;
  width: 1px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3, .steps h4 { margin-bottom: .4rem; padding-top: .45rem; }
.steps p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

/* ---------- 14. CTA band — the one dark panel per page ---------- */
.cta-band {
  position: relative;
  background: var(--navy-700);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 4.5vw, 4rem);
  color: rgba(255,255,255,.82);
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 3px; background: var(--red);
}
.cta-band h2 { color: #fff; }
.cta-band h2::after { display: none; }
.cta-band .eyebrow { color: #9FB6D8; }
.cta-band p { margin: 1rem auto 0; max-width: 58ch; color: rgba(255,255,255,.78); }
.cta-band .btn-row { margin-top: 2.25rem; justify-content: center; }
.cta-band .btn-primary { background: var(--red); border-color: var(--red); }
.cta-band .btn-primary:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- 15. Logos ---------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem 3rem; }
.logos img { height: 32px; width: auto; opacity: .5; filter: grayscale(1); transition: opacity .25s, filter .25s; }
.logos img:hover { opacity: 1; filter: none; }

/* ---------- 16. Quote / testimonial ---------- */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; position: relative; height: 100%;
}
.quote::before {
  content: "\201C"; position: absolute; top: .5rem; right: 1.5rem;
  font-family: var(--font-serif); font-size: 4.5rem; line-height: 1;
  color: var(--red); opacity: .12;
}
.quote p {
  font-family: var(--font-serif);
  font-size: 1.0625rem; color: var(--ink); font-style: italic; line-height: 1.6;
}
.quote footer { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.quote .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); display: grid; place-items: center; color: #fff;
  font-family: var(--font-title); font-weight: 600; font-size: .875rem;
}
.quote cite { font-style: normal; font-family: var(--font-title); font-weight: 600; color: var(--ink); font-size: var(--fs-sm); display: block; }
.quote cite span { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted-2); }

/* ---------- 17. Callout ---------- */
.callout {
  border-left: 3px solid var(--red);
  background: var(--surface-2);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.callout strong { color: var(--ink); }
.callout-teal { border-left-color: var(--blue); background: var(--blue-soft); }
.callout-teal strong { color: var(--blue-600); }

/* ---------- 18. Pills / tags ---------- */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.pills li { margin: 0; }
.pill {
  display: inline-block; padding: .4rem .85rem; border-radius: 100px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 500; color: var(--muted); font-family: var(--font-title);
}
.pill-brand { background: var(--red-soft); border-color: #F8D9DC; color: var(--red); }

/* ---------- 19. Prose (article body) ---------- */
.prose { max-width: 76ch; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { margin-top: 2.75rem; }
.prose h3 { margin-top: 2rem; }
.prose h2 + p, .prose h3 + p { margin-top: .875rem; }
.prose ul, .prose ol { color: var(--muted); }
.prose li strong { color: var(--ink); }
.prose img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.prose figure { margin: 2rem 0; }
.prose figcaption { font-size: var(--fs-xs); color: var(--muted-2); text-align: center; margin-top: .75rem; }

/* Sticky sidebar layout for module/article pages */
.with-aside { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1024px) { .with-aside { grid-template-columns: minmax(0,1fr) 300px; align-items: start; } }
.aside-sticky { position: sticky; top: calc(var(--header-h) + 24px); }
.aside-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.5rem; }
.aside-box + .aside-box { margin-top: 1.25rem; }
.aside-box h4 { font-size: .9375rem; margin-bottom: .9rem; }
.aside-nav { list-style: none; padding: 0; margin: 0; }
.aside-nav li { margin: 0; }
.aside-nav a { display: block; padding: .45rem 0; font-size: var(--fs-sm); color: var(--muted); border-bottom: 1px solid var(--line); }
.aside-nav li:last-child a { border-bottom: 0; }
.aside-nav a:hover { color: var(--blue); padding-left: .35rem; }

/* ---------- 20. Forms ---------- */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-family: var(--font-title); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); margin-bottom: .45rem; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-sm);
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(5,108,184,.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-note { font-size: var(--fs-xs); color: var(--muted-2); margin-top: 1rem; }
.form-msg { margin-top: 1rem; font-size: var(--fs-sm); font-weight: 600; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--danger); }

/* ---------- 21. Footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--muted); font-size: var(--fs-sm); border-top: 1px solid var(--line); }
.footer-top { padding-block: clamp(3rem, 5vw, 4.5rem); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; } }

.footer-brand img { width: 42px; height: 42px; object-fit: contain; margin-bottom: 1rem; }
.footer-brand p { color: var(--muted); font-size: var(--fs-sm); max-width: 34ch; }

.footer-col h4 { color: var(--ink); font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1.1rem; font-weight: 700; }

/* Scoped away from .btn / .footer-cta. Unscoped, `.footer-col a` (0,1,1) beat
   `.btn-primary` (0,1,0) and painted the demo button's label muted grey on red
   at 1.31:1, with its padding flattened to zero. */
.footer-col a:not(.btn):not(.footer-cta) {
  display: block; color: var(--muted); padding: .3rem 0; font-size: var(--fs-sm);
}
.footer-col a:not(.btn):not(.footer-cta):hover {
  color: var(--blue); padding-left: .3rem; transition: padding-left .2s ease, color .2s ease;
}

/* Must carry the same :not() count as the `.footer-col a` rule above, or that
   rule's higher specificity forces display:block here — and since the reset
   makes <svg> a block, each icon would drop onto its own line. */
.footer-contact a:not(.btn):not(.footer-cta) { display: flex; align-items: center; gap: .6rem; }
.footer-contact svg { width: 15px; height: 15px; color: var(--red); flex-shrink: 0; }

/* --- Footer call to action --- */
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--red) 0%, #C1000F 100%);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(238,0,20,.6);
  transition: transform .25s ease, box-shadow .25s ease;
}
.footer-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(238,0,20,.75); color: #fff; }
.footer-cta strong {
  display: block;
  font-family: var(--font-title); font-weight: 600; font-size: var(--fs-sm);
  color: #fff; line-height: 1.3;
}
/* Full white, not a translucent white: at 82% alpha over this red the sub-line
   measured 3.28:1, below the 4.5:1 AA floor for small text. Hierarchy comes
   from size and weight instead. */
.footer-cta .fc-sub {
  display: block; margin-top: 2px;
  font-size: var(--fs-xs); font-weight: 400; color: #fff; line-height: 1.4;
}
.footer-cta .fc-arrow {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: transform .25s ease, background .25s ease;
}
.footer-cta .fc-arrow svg { width: 16px; height: 16px; color: #fff; }
.footer-cta:hover .fc-arrow { background: rgba(255,255,255,.3); transform: translateX(3px); }

.socials { display: flex; gap: .5rem; margin-top: 1.25rem; }
.socials a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: var(--muted);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.socials a:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; }

.footer-bottom { background: var(--navy-900); color: #8A93AC; padding-block: 1.35rem; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: var(--fs-xs); }
.footer-bottom a { color: #B4BCD0; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- 22. Scroll to top ---------- */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: #fff; border: 0; cursor: pointer;
  box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility .25s, background .25s;
}
.to-top:hover { background: var(--red); }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 19px; height: 19px; }

/* ---------- 23. Reveal on scroll ----------
   Progressive enhancement: the hidden state only exists once site.js has added
   .js-reveal to <html>. If JS is blocked or fails, every .reveal stays visible. */
.js-reveal .reveal:not(.in) { opacity: 0; transform: translateY(16px); }
.reveal { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal:not(.in) { opacity: 1; transform: none; }
}

/* ---------- 24. Device frames ---------- */
.phone {
  position: relative; margin-inline: auto; max-width: 300px;
  border: 10px solid var(--navy-900); border-radius: 38px;
  background: var(--navy-900); box-shadow: var(--sh-lg);
  overflow: hidden;
}
.phone::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 20px; background: var(--navy-900); border-radius: 0 0 12px 12px; z-index: 2;
}
.phone img { border-radius: 28px; width: 100%; }

.browser {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--sh-md); background: #fff;
}
.browser-bar {
  display: flex; align-items: center; gap: .4rem;
  background: var(--surface-2); padding: .7rem .9rem; border-bottom: 1px solid var(--line);
}
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D4D8E3; display: block; }
.browser-bar i:nth-child(1) { background: #FF5F57; }
.browser-bar i:nth-child(2) { background: #FEBC2E; }
.browser-bar i:nth-child(3) { background: #28C840; }
.browser-bar span {
  margin-left: .6rem; font-size: .6875rem; color: var(--muted-2);
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  padding: .2rem .7rem; font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =========================================================
   24c. Box-free section patterns

   The homepage was five boxed-card grids in a row. These give each section its
   own shape using rules and rhythm instead of borders on everything. Additive:
   .card is untouched, so the other pages are unaffected.
   ========================================================= */

/* --- Pillars: columns separated by hairlines, no boxes --- */
.pillars { display: grid; gap: 0; }
.pillar {
  display: block; color: inherit;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}
.pillar:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .pillar {
    padding: .5rem 2.75rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .pillar:first-child { border-left: 0; padding-left: 0; padding-top: .5rem; }
  .pillar:last-child { padding-right: 0; }
}
.pillar .pi { width: 30px; height: 30px; color: var(--red); margin-bottom: 1.25rem; }
.pillar .pi svg { width: 30px; height: 30px; stroke-width: 1.5; }
.pillar h3 { margin-bottom: .7rem; }
.pillar p { color: var(--muted); font-size: var(--fs-sm); }
.pillar .go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--red);
}
.pillar .go svg { width: 14px; height: 14px; transition: transform .25s ease; }
.pillar:hover h3 { color: var(--blue); }
.pillar:hover .go svg { transform: translateX(4px); }

/* --- Services: a navy band, cells divided by shared hairlines ---
   Six identical full-width rows on a pale band read as 800px of monotony. This
   is the page's one dark anchor (with the CTA panel and the copyright bar). The
   cells share their rules rather than each carrying a border, so it stays a
   single block rather than six cards. */
.section-navy {
  background:
    radial-gradient(900px 500px at 88% -10%, rgba(5,108,184,.22), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-900) 100%);
  color: rgba(255,255,255,.72);
}
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }
.section-navy .lead { color: rgba(255,255,255,.72); }
.section-navy .eyebrow { color: #7FB2E0; }
.section-navy .sec-head h2::after { background: var(--red); }

.svc-grid {
  display: grid;
  gap: 1px;
  background: rgba(255,255,255,.14);           /* shows through as the gridlines */
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (min-width: 700px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc-cell {
  position: relative;
  display: block;
  background: #0C2149;                          /* opaque, so the gap reads as a rule */
  padding: 2.25rem 1.85rem 2rem;
  color: inherit;
  transition: background .3s ease;
  isolation: isolate;
}
.svc-cell::after {
  content: "";
  position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.svc-cell:hover { background: #10294F; color: inherit; }
.svc-cell:hover::after { transform: scaleX(1); }

.svc-cell .si { display: block; color: var(--red); margin-bottom: 1.25rem; }
.svc-cell .si svg { width: 28px; height: 28px; stroke-width: 1.5; }
.svc-cell h3 { font-size: var(--fs-h4); margin-bottom: .6rem; }
.svc-cell p { color: rgba(255,255,255,.62); font-size: var(--fs-sm); margin: 0; }
.svc-cell .go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.35rem;
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: #fff;
}
.svc-cell .go svg { width: 14px; height: 14px; transition: transform .25s ease; }
.svc-cell:hover .go { color: #fff; }
.svc-cell:hover .go svg { transform: translateX(4px); }

.svc-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2rem;
}
.svc-foot p { color: rgba(255,255,255,.6); font-size: var(--fs-sm); margin: 0; }

/* --- Industry index: red rule per item, no card --- */
.ind-list { display: grid; gap: 2.25rem 3rem; }
@media (min-width: 640px)  { .ind-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ind-list { grid-template-columns: repeat(4, 1fr); } }
.ind-item { border-top: 1px solid var(--line); padding-top: 1.15rem; position: relative; }
.ind-item::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 32px; height: 2px; background: var(--red);
}
.ind-item h4 { margin-bottom: .55rem; }
.ind-item p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

/* --- Reasons: big numerals, hairline rows --- */
.reasons { border-top: 1px solid var(--line); }
.reason {
  display: grid; gap: .6rem 2.5rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
}
.reason .num {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1;
  color: #C9D2DE; letter-spacing: -.04em;
}
.reason h3 { margin: 0; }
.reason p { color: var(--muted); font-size: var(--fs-sm); margin: 0; max-width: 70ch; }
@media (min-width: 900px) {
  .reason { grid-template-columns: 90px minmax(240px, 340px) 1fr; align-items: start; }
  .reason .num { padding-top: .1rem; }
}

/* --- Borderless quotes, divided by rules --- */
.quotes { display: grid; gap: 2.5rem; }
.q-plain { padding: 0; border-top: 1px solid var(--line); padding-top: 2rem; }
.q-plain:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  .quotes { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .q-plain { border-top: 0; padding: 0 2.5rem; border-left: 1px solid var(--line); }
  .q-plain:first-child { border-left: 0; padding-left: 0; }
  .q-plain:last-child { padding-right: 0; }
}
.q-plain .mark {
  font-family: var(--font-serif); font-size: 3rem; line-height: .8;
  color: var(--red); opacity: .3; display: block; margin-bottom: .75rem;
}
.q-plain p {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.0625rem; line-height: 1.6; color: var(--ink);
}
.q-plain footer { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.q-plain cite {
  font-style: normal; font-family: var(--font-title); font-weight: 600;
  color: var(--ink); font-size: var(--fs-sm); display: block;
}
.q-plain cite span { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted-2); }
.q-plain .rule { width: 28px; height: 2px; background: var(--red); flex-shrink: 0; }

/* --- Card grids become one block of cells sharing their rules ---
   The interior pages carry ~480 boxed cards. Rather than rewrite their markup,
   any .grid holding cards collapses its gap to a 1px rule and lets the grid's
   own background show through as the divider. Same shared-hairline language as
   the homepage, no HTML changes.

   Guarded by @supports: where :has() is unavailable the cards simply keep their
   individual borders, which is the previous (still perfectly fine) look. */
@supports selector(:has(*)) {
  .grid:has(> .card) {
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .grid:has(> .card) > .card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: hidden;
  }
  /* the lift would tear the shared rules apart — tint the cell instead */
  .grid:has(> .card) > .card:hover,
  .grid:has(> .card) > a.card:hover,
  .grid:has(> .card) > .card-hover:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    background: var(--surface-2);
  }
  .grid:has(> .card) > a.card::after,
  .grid:has(> .card) > .card-hover::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--red);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .grid:has(> .card) > a.card:hover::after,
  .grid:has(> .card) > .card-hover:hover::after { transform: scaleX(1); }

  /* On the tinted band the cells still need to read as white surfaces. */
  .section-alt .grid:has(> .card) > .card:hover,
  .section-dark .grid:has(> .card) > .card:hover { background: #F4F6FB; }
}

/* --- Module tiles: drop the box, keep the hit area --- */
.mod-card { border-color: transparent; background: transparent; }
.mod-card::after { display: none; }
.mod-card:hover { background: #fff; border-color: var(--line); box-shadow: var(--sh); }

/* =========================================================
   24d. Media

   Split sections pair a text column with an image. Left alone the image keeps
   its own aspect ratio and ends up much shorter than the copy beside it, which
   leaves a ragged gap. `.split-stretch` + `.media-shot` make the image fill the
   column so its height tracks the text.

   Every <img> carries its true intrinsic width/height so the browser reserves
   the right box before the file loads (no layout shift).
   ========================================================= */

.split-stretch { align-items: stretch; }

/* Every image on this page is a diagram, logo or UI screenshot — never a photo.
   So `object-fit: cover` is wrong: it would bisect the iDempiere wordmark and
   crop labels off the module wheel. The panel stretches to the copy's height
   and the artwork is centred inside it at its own aspect ratio. */
.media-panel {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: clamp(260px, 26vw, 440px);
  padding: clamp(1.25rem, 2.4vw, 2.5rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(5,108,184,.05), transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, #F5F8FF 100%);
}
.media-panel img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* Decorative corner bracket in brand red. Sits on the wrapper, outside the
   image's overflow:hidden, so it reads as a frame rather than an overlay. */
.media-bracket { position: relative; }
.media-bracket::before {
  content: "";
  position: absolute; left: -14px; bottom: -14px;
  width: 96px; height: 96px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  pointer-events: none;
}
@media (max-width: 640px) { .media-bracket::before { display: none; } }

/* The hero graphic is a wide diagram (1.85:1), not a photo. Do NOT stretch it to
   the height of the copy: `cover` would crop its labels, and `contain` in a
   582px-tall panel strands a 209px image in white space. Instead give the media
   column more width so the diagram renders larger, and let it sit centred.
   Its frame — padding plus a soft gradient — is what makes it feel intentional. */
.hero-media {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 1.8vw, 1.75rem);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(5,108,184,.06), transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, #F5F8FF 100%);
}
.hero-media img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  max-width: 100%;
}
@media (min-width: 992px) {
  /* Even the split so the diagram gets ~25% more width than a 60/40 would give. */
  .hero .split-60-40 { grid-template-columns: 1.05fr 1fr; }
}

/* The screenshot is pre-cropped to the app viewport (its own browser toolbar and
   the taskbar were baked into the source file). Our .browser bar supplies the
   chrome, so show the image whole — no CSS crop. */
.browser img { width: 100%; height: auto; display: block; }

/* =========================================================
   24e. Module-page components
   Built for the 26 module pages: a fact row in the hero, an honest
   problem/outcome comparison, and a fit / not-a-fit panel.
   ========================================================= */

/* --- Fact pills under the page-hero heading --- */
.facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.75rem 0 0; }
.facts li { margin: 0; }
.facts span {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  padding: .5rem .85rem; border-radius: 100px;
}
.facts svg { width: 14px; height: 14px; color: var(--red); flex-shrink: 0; }
.facts code { background: none; border: 0; padding: 0; color: var(--blue); font-size: .8125rem; }

/* --- Two-column comparison: pain vs outcome, or fit vs not-a-fit --- */
.compare {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; } }

.compare-col { background: #fff; padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.compare-col > h3 {
  font-size: var(--fs-h4);
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1.25rem;
}
.compare-col > h3 svg { width: 20px; height: 20px; flex-shrink: 0; }
.compare-col p { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 1rem; }

.compare-col ul { list-style: none; padding: 0; margin: 0; }
.compare-col li {
  position: relative; padding-left: 1.9rem; margin-top: .85rem;
  font-size: var(--fs-sm); color: var(--muted);
}
.compare-col li strong { color: var(--ink); font-weight: 600; }
.compare-col li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 18px; height: 18px; border-radius: 50%;
  background-position: center; background-repeat: no-repeat; background-size: 11px;
}

/* Left column: what hurts today */
.is-pain > h3 { color: var(--ink); }
.is-pain > h3 svg { color: var(--red); }
.is-pain li::before {
  background-color: var(--red-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23EE0014'%3E%3Cpath fill-rule='evenodd' d='M4.3 4.3a1 1 0 011.4 0L10 8.6l4.3-4.3a1 1 0 111.4 1.4L11.4 10l4.3 4.3a1 1 0 01-1.4 1.4L10 11.4l-4.3 4.3a1 1 0 01-1.4-1.4L8.6 10 4.3 5.7a1 1 0 010-1.4z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Right column: what changes */
.is-gain { background: #F8FBF9; }
.is-gain > h3 svg { color: var(--green); }
.is-gain li::before {
  background-color: #E4F5EA;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232D9F4F'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 011.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Neutral variant for "not a fit" — grey, not alarming: a poor fit is not a fault */
.is-caution { background: var(--surface-2); }
.is-caution > h3 svg { color: var(--muted-2); }
.is-caution li::before {
  background-color: #E6E9EF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235B6478'%3E%3Cpath fill-rule='evenodd' d='M10 3a1 1 0 011 1v7a1 1 0 11-2 0V4a1 1 0 011-1zm0 12.5a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Related-module links already render as a cell block via .grid:has(> .card). */

/* ---------- 25. Utility ---------- */
.hide-sm { display: none; }
@media (min-width: 768px) { .hide-sm { display: block; } }
.rounded { border-radius: var(--radius); }
.shadow { box-shadow: var(--sh-md); }
.bordered { border: 1px solid var(--line); }
.full { width: 100%; }
.relative { position: relative; }
/* let one grid item span the whole row */
.span-all { grid-column: 1 / -1; }