:root {
  --bg: #16181B;
  --bg-alt: #1C1F23;
  --border: #2A2D31;
  --text: #F5F5F3;
  --text-muted: #C9C7C3;
  --text-faint: #A8A6A2;
  --text-dim: #8A8783;
  --text-dimmer: #6E6C69;
  --accent: #C4B8A0;
  --navy: #00447B;
  --font-display: 'Archivo', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --max-width: 1312px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.005em;
}

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

button, .btn {
  font-family: var(--font-body);
  cursor: pointer;
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Header --- */
.site-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 64px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  position: sticky;   /* stays at the top while the page scrolls */
  top: 0;
  z-index: 50;
  background: var(--bg);
  transition: min-height 0.2s ease, padding 0.2s ease;
}
/* After a little scrolling the header trims itself to save screen space */
.site-header.is-scrolled { min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
/* Jump links (and the skip link) land just below the sticky header, not under it */
html { scroll-padding-top: 80px; }
.site-logo img { height: 28px; width: auto; display: block; }
@media (max-width: 600px) { .site-logo img { height: 26px; } }
.site-nav { display: flex; align-items: center; gap: 32px; font-size: 15px; }
.site-nav a, .nav-dropdown-trigger { white-space: nowrap; } /* the full menu needs ~1103px; below 1120px
  it collapses to the hamburger, so links never need to wrap */
.nav-cta { flex-shrink: 0; }

/* --- Solutions dropdown --- */
.nav-dropdown { position: relative; display: flex; flex-direction: column; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font: inherit;
  font-size: 15px;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
}
.nav-dropdown-trigger:hover { color: var(--text); }
.nav-dropdown-trigger .chevron { font-size: 10px; transition: transform 0.2s ease; }
.nav-dropdown.is-open .nav-dropdown-trigger .chevron { transform: rotate(180deg); }
.nav-dropdown-panel {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  min-width: 200px;
  z-index: 30;
}
.nav-dropdown.is-open .nav-dropdown-panel { display: flex; }
.nav-dropdown-panel a { padding: 8px 12px; border-radius: 4px; font-size: 14px; }
.nav-dropdown-panel a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

@media (max-width: 1120px) {
  .nav-dropdown-panel {
    position: static;   /* expands inline within the mobile slide-out menu
                            instead of floating, since there's no room for
                            an absolutely-positioned panel on a phone */
    border: none;
    background: none;
    padding: 4px 0 4px 16px;
  }
}

/* Hamburger button - hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 20;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1120px) {
  .site-header { padding: 16px 24px; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: var(--header-h, 72px) 0 0 0;   /* starts exactly where the header ends (set by script) */
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px 24px;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    z-index: 15;
  }
  .site-nav.is-open { transform: translateX(0); }
  .nav-cta { margin-top: 8px; }
}

/* --- Hero --- */
.hero {
  padding: 64px;
  overflow: hidden;
}
.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* copy stays top-aligned so the H1 sits at the standard position */
  gap: 48px 56px;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 400px;
  max-width: 520px;
  min-width: 0;
}
.hero-copy h1 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.12; }
.nowrap { white-space: nowrap; }
.hero-sub { margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  border: 1px solid #3A3D42;
  border-radius: 4px;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}
.btn-outline:hover { border-color: var(--accent); color: var(--text); }

/* Product picture: loose files flow into one open loan file */
.hero-visual { flex: 1.5 1 560px; min-width: 0; align-self: center; display: flex; align-items: center; }
.hv-files { flex: 0 0 164px; display: flex; flex-direction: column; gap: 14px; }
.hv-file {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 64px; padding: 10px 12px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
  color: var(--accent); font-size: 13px; line-height: 1.35;
}
.hv-file svg { flex-shrink: 0; }
.hv-file span { color: var(--text); }
.hv-file:nth-child(even) { margin-left: 22px; }
.hv-links { flex: 0 0 56px; width: 56px; }
.hv-down { display: none; }
.hv-window { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 24px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }

@media (max-width: 900px) {
  .hero { padding: 48px 24px; }
}
@media (max-width: 780px) {
  .hero-visual { flex-direction: column; align-items: stretch; flex-basis: auto; width: 100%; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn, .hero-actions .btn-outline { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 220px; text-align: center; }
  .hero-visual { gap: 6px; }
  .hv-files { flex: none; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .hv-down { display: block; margin: 0 auto; }
  .hv-file { flex: 1 1 150px; }
  .hv-file:nth-child(even) { margin-left: 0; }
  .hv-links { display: none; }
}

/* --- Proof strip --- */
.proof-strip {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 64px;
}
.proof-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto; /* centers the stats instead of letting them spread edge-to-edge on ultrawide screens */
}
.proof-stat { text-align: center; flex: 1; min-width: 140px; }
.proof-stat .value { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--accent); }
.proof-stat .label { font-size: 15px; color: var(--text-faint); margin-top: 8px; }

/* --- Generic section --- */
.section {
  padding: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.section h2 { font-size: 32px; text-align: center; }
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* --- Card grids (How it works, Solutions, Resources) --- */
.card-grid { display: flex; gap: 24px; width: 100%; max-width: var(--max-width); flex-wrap: wrap; }
.card {
  flex: 1;
  min-width: 220px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text);
}
.card h3 { font-size: 20px; font-family: var(--font-display); font-weight: 700; }
.card p { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.eyebrow-label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* --- Simple centered page hero (Platform, and other interior pages) --- */
.platform-hero-section {
  padding: 64px;
  border-bottom: 1px solid var(--border); /* full-width divider marking the
    hero as a distinct zone from the cluster below it - both share the same
    background color, so without this they'd blend into one ambiguous
    blank area */
}
.platform-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.platform-hero h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.2; max-width: 820px;  text-wrap: balance; }
.platform-hero p { font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 700px; margin: 0; }

/* --- Cluster (icon + heading + copy, paired with a stat card) --- */
.cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  flex-wrap: wrap;
}
.cluster-text { flex: 1 1 420px; max-width: 500px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cluster-heading-row { display: flex; align-items: center; gap: 14px; }
.cluster-heading-row h2 { margin: 0; }
.cluster-text h2 { font-size: 26px; }
.cluster-text p { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 480px; }
.cluster-link { font-size: 14px; border-bottom: 1px solid var(--accent); width: fit-content; margin-top: 4px; }
.cluster-stat-wrap { flex: 0 1 220px; display: flex; justify-content: center; }
.cluster-stat {
  background: var(--bg-alt); /* opposite of the section's own background, for contrast */
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  width: 220px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cluster-stat .value { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--accent); }
.cluster-stat .caption { font-size: 13px; color: var(--text-faint); margin-top: 8px; }
.section--alt .cluster-stat { background: var(--bg); }

@media (max-width: 780px) {
  .cluster { flex-direction: column; justify-content: flex-start; gap: 20px; }
  .cluster-text {
    align-items: center;   /* centers the icon and the button/link box */
    text-align: center;    /* centers the heading and paragraph text */
    order: 1;               /* text always first on mobile, regardless of
                                which comes first in the source for the
                                desktop alternating layout */
    flex-grow: 0;           /* flex-grow:1 from the desktop rule was meant to
                                grow cluster-text horizontally in a row
                                layout; in mobile's column layout it instead
                                stretched height. */
    flex-basis: auto;      /* Same axis-flip problem: the desktop rule's
                                420px basis was meant as a starting WIDTH.
                                In column layout that becomes a minimum
                                HEIGHT instead, reserving space regardless
                                of actual content height - auto lets it
                                size to its real content. */
  }
  .cluster-text p { max-width: 100%; }
  .cluster-heading-row { flex-direction: column; gap: 10px; }
  .cluster-stat-wrap { order: 2; flex-basis: 180px; }
  .cluster-stat { width: 180px; height: 180px; padding: 12px; }
}

/* --- Feature icon row (icon + bold label, no card background) --- */
.section-lead { font-size: 18px; line-height: 1.6; text-wrap: pretty; text-align: center; max-width: 800px; margin: 0 auto; color: var(--text-muted); }
.feature-icons-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}
.feature-icon-item { flex: 1 1 180px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.feature-icon-item .label { font-size: 14px; font-weight: 600; }

/* --- Module page hero (two-column: text + illustration) --- */
.module-hero-section {
  border-bottom: 1px solid var(--border);
  background: #000000; /* matches the exact black sampled from the uploaded
    hero illustration's own (non-transparent) background, so the image's
    rectangular edge blends in rather than showing as a visible box */
}
/* Soft variant: the site's normal dark background, same as the home hero. Used where the
   illustration is transparent line-art rather than an uploaded image with its own black. */
.module-hero-section--soft { background: var(--bg); }
.module-hero {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 64px;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}
.module-hero-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.module-hero-copy h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; max-width: 560px; }
.module-hero-copy p { font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 500px; margin: 0; }
.module-hero-illustration { flex: 1 1 0; display: flex; align-items: center; justify-content: center; }
.module-hero-illustration-img { width: 100%; height: auto; display: block; }
/* Compact: caps a line-art drawing's size so it doesn't stretch the hero taller than its text */
.module-hero-illustration-img--compact { max-width: 400px; }

@media (max-width: 780px) {
  .module-hero { flex-direction: column; text-align: center; gap: 32px; padding: 48px 24px; }
  .module-hero-copy {
    align-items: center;
    flex-grow: 0;   /* axis-flip fix: flex-grow:1 is for desktop's row width,
                        not mobile's column height - see the same fix on
                        .cluster-text for the full explanation */
    flex-basis: auto;
  }
  .module-hero-copy h1, .module-hero-copy p { max-width: 100%; }
}

/* --- Module detail row: text + UI mockup card, alternating sides --- */
.module-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}
.module-row-text { flex: 1 1 420px; max-width: 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.module-row-text h2 { font-size: 28px; }
.module-row-text p { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.module-row-visual-wrap { flex: 0 1 460px; display: flex; justify-content: center; }

@media (max-width: 780px) {
  .module-row { flex-direction: column; justify-content: flex-start; gap: 24px; }
  .module-row-text {
    align-items: center;
    text-align: center;
    order: 1;         /* text always first on mobile, regardless of which
                          side it's visually on for desktop's alternating
                          layout */
    flex-grow: 0;      /* same axis-flip fix as .cluster-text */
    flex-basis: auto;
  }
  .module-row-text p { max-width: 100%; }
  .module-row-visual-wrap {
    order: 2;
    align-self: stretch; /* .module-row centers its children, which in column
      layout shrink-wrapped each card to its own content (255-345px wide on
      one page); stretch makes every card fill the available width */
    flex-basis: auto; /* the 460px basis was still reserving that much
      height even with flex-grow:0 - same axis-flip lesson as cluster-text,
      just not fully applied here the first time */
  }
}

/* --- Unified hero heading position ---
   Every hero (Home, Platform, and the module pages) starts its H1 the same distance below
   the header, so the heading doesn't jump as you move between pages. Two things used to
   move it: copy was vertically centered inside a hero whose height depended on that page's
   content, and the small eyebrow label sat in the flow above the H1 (Home has none).
   Now copy is top-aligned and the eyebrow hangs above the H1 without pushing it down. */
:root { --hero-pad-top: 100px; }
@media (max-width: 780px) { :root { --hero-pad-top: 84px; } }

.hero,
.platform-hero-section,
.module-hero { padding-top: var(--hero-pad-top); }

.module-hero-copy,
.platform-hero { position: relative; }
.module-hero-copy > .eyebrow-label,
.platform-hero > .eyebrow-label,
.hero-copy > .eyebrow-label {
  position: absolute;
  bottom: 100%;        /* sits directly above the H1 ... */
  margin-bottom: 20px; /* ... with the same 20px gap the module pages always had */
  left: 0;
  right: 0;
}

/* Desktop only: top-align the two columns. On phones the hero stacks in a column, where
   align-items controls horizontal placement, so it must stay centered there. */
@media (min-width: 781px) {
  .module-hero { align-items: flex-start; }
  .module-hero-illustration { align-self: center; }
}

/* --- UI mockup card primitives (reused across Mortgage, Commercial,
   Consumer, Deposits - anywhere a section shows a small interface
   preview rather than a simple stat) --- */
.mockup-card {
  width: 100%;
  max-width: 460px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section--alt .mockup-card { background: var(--bg); } /* opposite of the section's own background, for contrast */
.mockup-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

.mockup-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}
.section--alt .mockup-field-row { background: var(--bg-alt); }
.mockup-field-row .label { font-size: 13px; color: var(--text-faint); }
.mockup-field-row .value { font-size: 13px; }

.mockup-divider { height: 1px; background: var(--border); }

.mockup-result-row { display: flex; align-items: center; gap: 12px; }
.mockup-check-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mockup-result-row .title { font-weight: 600; font-size: 14px; }
.mockup-result-row .subtitle { font-size: 12px; color: var(--text-faint); }

.mockup-list-item {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--bg);
  font-size: 15px;
  color: var(--text);
}
.section--alt .mockup-list-item { background: var(--bg-alt); }
.mockup-list-item.is-muted { color: var(--text-faint); }

.mockup-steps { display: flex; align-items: flex-start; justify-content: space-between; } /* flex-start so a
  wrapped label under one dot can't push the other dots out of line */
.mockup-step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mockup-step .dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mockup-step .dot.is-complete { background: var(--accent); }
.mockup-step .dot.is-pending { border: 1.5px solid var(--text-dimmer); }
.mockup-step .step-label { font-size: 11px; color: var(--text-dimmer); }
.mockup-step .step-label.is-active { color: var(--text-faint); }
.mockup-step-line { flex: 1; min-width: 12px; height: 1px; margin-top: 11px; background: var(--border); } /* margin-top
  centers the line on the 22px dots; min-width stops it collapsing to nothing */
.mockup-step-line.is-complete { background: var(--accent); }

/* Very small phones only: four labelled steps can't fit across, so stack them vertically */
@media (max-width: 340px) {
  .mockup-steps { flex-direction: column; align-items: flex-start; gap: 0; }
  .mockup-step { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
  .mockup-step .step-label { font-size: 13px; }
  .mockup-step-line {
    flex: 0 0 auto;   /* flex-grow:1 from the desktop row would stretch these vertically (axis-flip) */
    min-width: 0;
    width: 1px;
    height: 14px;
    margin: 0 0 0 11px;   /* lines up under the center of the 22px dots */
  }
}

.mockup-doc-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section--alt .mockup-doc-box { background: var(--bg-alt); }
.mockup-doc-box .box-title { font-weight: 600; font-size: 13px; }
.mockup-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mockup-doc-row .name { font-size: 13px; min-width: 0; } /* min-width:0 lets a long label wrap
  rather than push into the status text */
.mockup-doc-row .status { font-size: 12px; flex-shrink: 0; white-space: nowrap; }
.mockup-doc-row .status.is-done { color: var(--accent); }
.mockup-doc-row .status.is-pending { color: var(--text-faint); }
.mockup-doc-row .status.is-overdue { color: var(--accent); font-weight: 600; } /* bold weight for
  emphasis, not a new alert color - matches the site's established exception-flagging convention */

/* Phones: sections had 64px of side padding at every width, which left UI mockup
   cards only ~265px wide on a 393px screen. 24px matches the module heroes. */
@media (max-width: 780px) {
  .section { padding: 48px 24px; }
}

.mockup-progress-row { display: flex; align-items: center; justify-content: space-between; }
.mockup-progress-row .task { font-size: 13px; }
.mockup-progress-row .state { font-size: 12px; }
.mockup-progress-row .state.is-done { color: var(--accent); }
.mockup-progress-row .state.is-progress { color: var(--text-faint); }
.mockup-progress-row .state.is-pending { color: var(--text-dimmer); }

/* --- Security page components --- */
.hero-icons { display: flex; gap: 32px; justify-content: center; margin-top: 8px; }

/* Wider mockup card, for table-style previews that need more room than the standard 460px */
@media (min-width: 781px) {
  .module-row-visual-wrap--wide { flex-basis: 660px; }
}
.module-row-visual-wrap--wide .mockup-card { max-width: 680px; }

/* Audit trail table. Desktop: one grid row per event. Narrow: each event collapses to
   "action ... status" with time / user / document on a small line beneath. */
.audit-table { display: flex; flex-direction: column; }
.audit-head,
.audit-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 84px 116px 72px;
  grid-template-areas: "time action user doc status";
  gap: 8px;
  align-items: center;
  padding: 10px;
}
.audit-head { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.audit-head .t { grid-area: time; }
.audit-head .a { grid-area: action; }
.audit-head .u { grid-area: user; }
.audit-head .d { grid-area: doc; }
.audit-head .s { grid-area: status; }
.audit-row { border-top: 1px solid var(--border); font-size: 13px; }
.audit-meta { display: contents; } /* on desktop its children are cells of the row grid */
.audit-time { grid-area: time; color: var(--text-faint); }
.audit-action { grid-area: action; display: flex; align-items: center; gap: 6px; }
.audit-user { grid-area: user; }
.audit-doc { grid-area: doc; }
.audit-status { grid-area: status; font-size: 12px; color: var(--accent); }
.audit-status.is-exception { font-weight: 600; } /* bold, not a new alert color - same convention as elsewhere */
.audit-status.is-resolved { color: var(--text-faint); }

@media (max-width: 1100px) {
  .audit-head { display: none; }
  .audit-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "action status" "meta meta";
    row-gap: 4px;
  }
  .audit-meta {
    display: flex;
    grid-area: meta;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 12px;
    color: var(--text-faint);
  }
  .audit-time, .audit-user, .audit-doc { grid-area: auto; }
}

/* Reporting dashboard preview: stat tiles + bar chart + (non-clickable) button */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 16px; }
.section--alt .stat-tile { background: var(--bg-alt); }
.stat-tile .value { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--accent); }
.stat-tile .label { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
@media (max-width: 1100px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 100px; padding: 0 4px; }
.bar-chart .bar { flex: 1; background: var(--border); border-radius: 3px 3px 0 0; }
.bar-chart .bar.is-highlight { background: var(--accent); }
.mockup-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #16181B;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
}

/* --- Demo request form --- */
[hidden] { display: none !important; }
.demo-layout { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; gap: 48px; width: 100%; max-width: var(--max-width); margin: 0 auto; }
.demo-layout--with-contact { grid-template-columns: minmax(0, 560px) minmax(0, 320px); }
@media (max-width: 900px) { .demo-layout--with-contact { grid-template-columns: minmax(0, 560px); } }
.form-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 32px; }
.form-field + .form-field { margin-top: 20px; }
.form-field label { display: block; font-size: 13px; color: var(--text-faint); margin-bottom: 6px; }
.form-field .optional { color: var(--text-dim); }
.form-field input,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px; /* 16px stops iPhones zooming the page when a field is focused */
  padding: 12px 14px;
}
.form-field textarea { resize: vertical; min-height: 112px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-dimmer); }
.form-field input:focus,
.form-field textarea:focus { border-color: var(--accent); outline: none; }
.form-field input:focus-visible,
.form-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-hp { display: none; } /* honeypot: invisible to people, bots fill it in */
.form-submit { margin-top: 24px; width: 100%; }
.form-submit:disabled { opacity: 0.6; cursor: default; }
.form-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); text-align: center; }
.demo-error { margin: 16px 0 0; font-size: 14px; color: var(--accent); font-weight: 600; }
.demo-success { display: none; text-align: center; }
.demo-success.is-visible,
.demo-success:target { display: block; } /* :target covers the no-JavaScript redirect back to #sent */
.demo-success:target + .form-card { display: none; }
.demo-success:focus { outline: none; }
.demo-success .mockup-check-circle { margin: 0 auto 16px; }
.demo-success h2 { margin: 0 0 8px; font-size: 24px; }
.demo-success p { margin: 0; color: var(--text-muted); }
.contact-list { display: flex; flex-direction: column; gap: 24px; align-self: start; padding-top: 8px; }
.contact-item { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; color: var(--text-muted); }
.contact-item svg { flex-shrink: 0; margin-top: 2px; }
.contact-item a { color: var(--text-muted); }
.contact-item a:hover { color: var(--text); }
.contact-item span { white-space: pre-line; }
@media (max-width: 780px) { .form-card { padding: 24px; } }

/* --- Long-form text pages (privacy policy and other markdown pages) --- */
.legal-updated { font-size: 14px; color: var(--text-dim); }
.prose { width: 100%; max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--text-muted); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 26px; text-align: left; margin: 48px 0 12px; color: var(--text); }
.prose h3 { font-size: 19px; text-align: left; margin: 32px 0 8px; color: var(--text); }
.prose h4 { font-size: 16px; text-align: left; margin: 24px 0 6px; color: var(--text); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose table { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--text); }
.prose strong { color: var(--text); }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 16px; color: var(--text-faint); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.prose th { color: var(--text); background: var(--bg-alt); }
.prose code { font-size: 0.9em; background: var(--bg-alt); padding: 2px 6px; border-radius: 4px; }

/* Desktop: headings in the text-and-visual rows line up with the paragraph and label beside them
   (the design had them left-aligned; the global centered h2 rule was overriding that).
   Phones keep the centered layout. */
@media (min-width: 781px) {
  .module-row-text h2 { text-align: left; }
}

/* --- Case studies --- */
.story-snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; width: 100%; max-width: 1000px; margin: 0 auto; }
.story-fact { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; }
.story-fact .label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.story-fact .value { font-size: 17px; line-height: 1.4; font-weight: 500; }
.story-fact--number .value { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.1; color: var(--accent); }
.story-fact--number .label { margin: 8px 0 0; }
.story-body { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 48px; }
.story-body h2 { text-align: left; margin: 0 0 12px; font-size: 26px; }
.story-body p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text-muted); }
.story-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.story-results li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.story-results .check { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-top: 2px; color: var(--accent); }
.story-body .story-back { font-size: 15px; }
.story-body .story-back a { color: var(--text-faint); }
.story-body .story-back a:hover { color: var(--text); }
.story-quote { width: 100%; max-width: 820px; margin: 0 auto; text-align: center; }
.story-quote .mark { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 0.6; color: var(--accent); }
.story-quote blockquote { margin: 24px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.35; color: var(--text); }
.story-quote--long blockquote { font-size: 22px; line-height: 1.5; }
.story-quote figcaption { margin-top: 28px; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 780px) { .story-quote blockquote { font-size: 24px; } .story-quote--long blockquote { font-size: 19px; } }
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 24px; width: 100%; max-width: 1200px; margin: 0 auto; }
.story-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; transition: border-color 0.2s ease; }
.story-card:hover { border-color: var(--accent); color: var(--text); }
.story-card h2, .story-card h3 { margin: 0; font-size: 22px; line-height: 1.25; text-align: left; }
.story-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font-size: 12px; color: var(--text-muted); border: 1px solid #3A3D42; border-radius: 999px; padding: 4px 12px; }
.story-card-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-faint); }
.story-card-foot .more { color: var(--accent); font-weight: 600; }
.engine-note { margin: 0; font-size: 15px; text-align: center; }
.engine-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* --- Home: product mock screens, three steps, security audit sample --- */
.ui-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ui-head > div { min-width: 0; }
.ui-pill { flex-shrink: 0; }
.ui-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
.ui-sub { margin-top: 4px; font-size: 13px; color: var(--text-faint); }
.ui-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--accent); border-radius: 999px; font-size: 12px; color: var(--accent); }
.ui-pill i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ui-prog { margin: 20px 0 18px; }
.ui-prog-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.ui-track { height: 6px; border-radius: 3px; background: var(--border); }
.ui-fill { height: 6px; border-radius: 3px; background: var(--accent); }
.ui-th { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.ui-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); }
.ui-row:last-child { border-bottom: 0; }
.ui-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-name svg { flex-shrink: 0; color: var(--text-faint); }
.ui-st { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 13px; white-space: nowrap; color: var(--text-muted); }
.ui-st svg { color: var(--text-faint); }
.ui-st--miss { padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--bg); font-weight: 600; }
.ui-st--miss svg { width: 14px; height: 14px; color: var(--bg); }
.ui-st--na { color: var(--text-dim); }

.how-top { width: 100%; max-width: var(--max-width); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: 48px; }
.how-top .eyebrow-label { margin-bottom: 16px; }
.how-top h2 { text-align: left; font-size: 40px; line-height: 1.2; margin: 0; }
.how-intro { flex: 1 1 360px; max-width: 460px; }
.how-intro p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.how-intro a { color: var(--accent); font-weight: 600; border-bottom: 1px solid var(--accent); }
.how-intro a:hover { color: var(--text); }
.how-steps { width: 100%; max-width: var(--max-width); display: flex; align-items: stretch; gap: 12px; }
.how-arrow { flex: 0 0 28px; align-self: center; color: var(--text-dim); }
.how-step { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 28px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.how-num { font-size: 12px; letter-spacing: 0.1em; color: var(--text-faint); }
.how-step h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.25; }
.how-step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.how-vis { margin-top: auto; padding-top: 16px; }
.how-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.how-chip { display: flex; align-items: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.how-chip svg { color: var(--accent); flex-shrink: 0; }
.how-down { display: block; margin: 0 auto; color: var(--text-dim); }
.ui-mini { box-sizing: border-box; padding: 16px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; }
.how-step .ui-mini { background: var(--bg); }
.ui-mt { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 10px; }
.ui-frow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ui-frow:last-child, .ui-crow:last-child, .ui-arow:last-child { border-bottom: 0; }
.ui-frow svg { color: var(--text-faint); flex-shrink: 0; }
.ui-crow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ui-cl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-cl svg { flex-shrink: 0; color: var(--text-faint); }
.ui-cl--warn svg { color: var(--accent); }
.ui-cv { flex-shrink: 0; color: var(--text-muted); }
@media (max-width: 1000px) {
  .how-steps { flex-direction: column; align-items: stretch; }
  .how-arrow { display: none; }
}

.sec-row { width: 100%; max-width: var(--max-width); display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; }
.sec-text { flex: 1 1 380px; min-width: 0; }
.sec-text h2 { text-align: left; font-size: 30px; line-height: 1.2; margin: 0 0 16px; }
.sec-text p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.sec-vis { flex: 1 1 420px; min-width: 0; }
.ui-arow { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ui-arow .tm { color: var(--text-faint); }
.ui-arow .us { color: var(--text-muted); }

/* cards take the opposite fill of the section they sit on */
.section--alt .card { background: var(--bg); }
.section:not(.section--alt) .story-card { background: var(--bg-alt); }

/* --- Footer --- */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 56px 64px 0;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: 40px;
}
.footer-brand { flex: 1.2 1 240px; display: flex; flex-direction: column; gap: 16px; }
.footer-brand img {
  height: 20px;
  width: auto;
  aspect-ratio: 2761 / 307; /* matches the logo SVG's own viewBox, so the
                               box can't get stretched wider than the
                               actual artwork by the flex column */
  align-self: flex-start;   /* opts out of the column's default "stretch",
                               which was the real cause of the drift: a
                               wider box + the SVG's own center-by-default
                               behavior was pushing the mark rightward */
  display: block;
}
.footer-brand p { font-size: 14px; line-height: 1.6; color: var(--text-faint); max-width: 280px; margin: 0; }
.footer-col { flex: 1 1 140px; display: flex; flex-direction: column; gap: 14px; }
.footer-col-title {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.footer-col a { font-size: 14px; color: var(--text-faint); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--border);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-dim);
}
.footer-bottom-links { display: flex; gap: 28px; }
.footer-bottom-links a { font-size: 13px; color: var(--text-dim); }
.footer-bottom-links a:hover { color: var(--text); }

@media (max-width: 900px) {
  .footer-top {
    flex-direction: column; /* forces a clean single-column stack instead
      of relying on flex-wrap's arithmetic, which was landing awkwardly at
      widths like 852px (iPhone 16 Pro landscape) - just enough room for
      2 of the 4 columns per row, producing a lopsided 2x2 grid */
  }
  .footer-brand {
    align-items: center;
    text-align: center;
    flex-grow: 0;    /* footer-brand's flex-grow:1.2 was meant to grow
      horizontally in the old row layout; in the new column layout it
      stretched the block's height instead, creating a large gap below
      the tagline */
    flex-basis: auto;
  }
  .footer-col { flex-grow: 0; flex-basis: auto; } /* same fix for the other
    three footer columns */
  .footer-brand img {
    align-self: center; /* the logo has an explicit align-self: flex-start
      set for desktop (a deliberate earlier fix for a different bug) -
      an explicit align-self always wins over the parent's align-items,
      so it has to be overridden directly here, not just on the parent */
  }
  .footer-brand p { text-align: center; }
  .footer-brand .btn {
    display: none; /* the CTA section directly above the footer already
      has a "Schedule a Demo" button - repeating it here is redundant on
      the narrower mobile layout where both sit close together */
  }
}

/* ================= Platform page ================= */
/* Hero picture: four layer tiles in flow on desktop and tablet, numbered list on phones */
.pf-flow { position: relative; flex: 1.5 1 560px; min-width: 0; padding-top: 8px; }
.pf-stream { position: absolute; left: 0; top: 0; width: 100%; height: 140px; pointer-events: none; }
.pf-tiles { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.pf-tcol { display: block; width: 126px; color: var(--text); }
.pf-tcol:hover { color: var(--text); }
.pf-tcol:hover .pf-tt { color: var(--accent); }
.pf-farr { margin-top: 60px; flex-shrink: 0; }
.pf-tn { display: block; margin-top: 14px; font-size: 12px; letter-spacing: 0.12em; color: var(--accent); }
.pf-tt { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--text); }
.pf-tc { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.pf-map { display: none; flex: 1 1 100%; box-sizing: border-box; padding: 24px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.pf-map-h { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.pf-mrow { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 14px 0; color: var(--text); }
.pf-mrow:hover { color: var(--text); }
.pf-mrow:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 62px; bottom: -14px; border-left: 1px dashed rgba(196, 184, 160, 0.6); }
.pf-mnum { position: relative; z-index: 1; width: 44px; height: 44px; border: 1px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--accent); background: var(--bg-alt); }
.pf-mt { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.pf-mc { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-faint); }
@media (max-width: 780px) { .pf-flow { display: none; } .pf-map { display: block; } }

/* Layer sections */
.pf-sec { scroll-margin-top: 0; }
.pf-row { width: 100%; max-width: var(--max-width); display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; }
.pf-txt { flex: 1 1 420px; min-width: 0; }
.pf-vis { flex: 1.15 1 460px; min-width: 0; }
.pf-txt .eyebrow-label, .pf-head .eyebrow-label { margin-bottom: 16px; letter-spacing: 0.12em; }
.pf-txt h2, .pf-head h2 { margin: 0 0 16px; font-size: 34px; line-height: 1.2; text-align: left; }
.pf-head { max-width: 760px; text-align: center; }
.pf-head h2 { text-align: center; }
.pf-lead { margin: 0 0 28px; font-size: 17px; line-height: 1.65; color: var(--text-muted); }
.pf-head .pf-lead { margin-bottom: 0; }
.pf-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
.pf-feat { display: flex; flex-direction: column; gap: 8px; }
.pf-ficon { width: 44px; height: 44px; border: 1px solid #3A3D42; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.pf-feat b { font-size: 15px; font-weight: 600; color: var(--text); }
.pf-feat span { font-size: 13px; line-height: 1.5; color: var(--text-faint); }
.pf-note { margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-faint); }
.pf-more { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--accent); }
.pf-note .pf-more:only-child { margin-top: 0; }
@media (min-width: 1001px) { .pf-row--rev { flex-direction: row-reverse; } }

/* Picture cards (opposite fill of their section) */
.pf-card { box-sizing: border-box; padding: 20px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.section--alt .pf-card { background: var(--bg); }
.pf-card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.pf-card-t { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.pf-chip { font-size: 12px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.pf-tag { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--text-muted); border: 1px solid #3A3D42; border-radius: 999px; padding: 2px 10px; }
.pf-tag--hot { border-color: var(--accent); color: var(--accent); }

/* 01 incoming documents */
.pf-irow { display: grid; grid-template-columns: 1fr 18px 1.4fr; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text); }
.pf-irow svg { color: var(--text-dim); }
.pf-from { color: var(--text-dim); word-break: break-word; }
.pf-to { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pf-to .pf-tag { margin-top: 0; }
.pf-srcs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.pf-gl { font-size: 12px; color: var(--text-faint); margin-right: 4px; }
.pf-src { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--text); }
.section--alt .pf-src { background: var(--bg-alt); }
.pf-src svg { color: var(--accent); }
.pf-req { margin-top: 14px; font-size: 13px; color: var(--text-faint); }

/* 02 applications pipeline */
.pf-scroll { overflow-x: auto; }
.pf-ptab { min-width: 480px; }
.pf-phead, .pf-prow { display: grid; grid-template-columns: 1.6fr 1.2fr 0.95fr 1.25fr; gap: 10px; align-items: center; }
.pf-phead { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.pf-prow { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pf-prow:last-child { border-bottom: 0; }
.pf-pname { font-weight: 600; color: var(--text); }
.pf-psub { margin-top: 2px; font-size: 12px; color: var(--text-faint); }
.pf-pbar { display: flex; align-items: center; gap: 8px; }
.pf-ptrack { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.pf-pfill { height: 6px; border-radius: 3px; background: var(--accent); }
.pf-ppct { width: 36px; text-align: right; font-size: 12px; color: var(--text-muted); }
.pf-own { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.pf-av { width: 26px; height: 26px; border: 1px solid #3A3D42; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.pf-pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border: 1px solid #3A3D42; border-radius: 999px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pf-pill svg { width: 14px; height: 14px; }
.pf-pill i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.pf-pill--ready { border-color: var(--accent); color: var(--accent); }
.pf-pill--need { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }

/* 03 activity feed + exam package */
.pf-tabs { display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.pf-tabs span { padding: 6px 0 10px; font-size: 13px; color: var(--text-faint); }
.pf-tabs .is-on { color: var(--text); border-bottom: 2px solid var(--accent); margin-bottom: -1px; }
.pf-arow { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); line-height: 1.45; }
.pf-tm { color: var(--text-faint); }
.pf-pkg { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; }
.section--alt .pf-pkg { background: var(--bg-alt); }
.pf-pkg b { display: block; font-size: 14px; color: var(--text); }
.pf-pkg span { font-size: 13px; color: var(--text-faint); }
.pf-pkg .pf-gen { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: 6px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 14px; }

/* 04 integration flow */
.pf-flowrow { width: 100%; max-width: var(--max-width); display: flex; align-items: stretch; gap: 12px; }
.pf-flowarrow { flex: 0 0 28px; align-self: center; color: var(--text-dim); }
.pf-fbox { flex: 1 1 220px; min-width: 0; padding: 20px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.pf-fbox--hot { border-color: var(--accent); }
.pf-ft { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 12px; text-align: center; }
.pf-fitem { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text); }
.pf-fitem svg { flex-shrink: 0; color: var(--text-faint); }
.pf-fbox--hot .pf-fitem svg { color: var(--accent); }
.pf-cx { width: 100%; max-width: var(--max-width); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 40px; margin-top: -12px; }
.pf-grp { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pf-grp .pf-gl { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.pf-c2 { padding: 6px 14px; border: 1px solid #3A3D42; border-radius: 999px; font-size: 13px; color: var(--text); }
@media (max-width: 1000px) {
  .pf-flowrow { flex-direction: column; }
  .pf-flowarrow { transform: rotate(90deg); }
  .pf-fbox { flex: 0 0 auto; }
}
@media (max-width: 780px) { .pf-txt h2, .pf-head h2 { font-size: 28px; } }

/* Phones: each application becomes a stacked row (name + status, then a full-width bar) */
@media (max-width: 780px) {
  .pf-ptab { min-width: 0; }
  .pf-phead, .pf-own { display: none; }
  .pf-prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "bar bar"; gap: 10px 12px; align-items: start; padding: 14px 0; }
  .pf-prow > :nth-child(1) { grid-area: name; }
  .pf-prow > :nth-child(2) { grid-area: bar; }
  .pf-prow > :nth-child(4) { grid-area: status; }
}

/* ================= Mortgage page ================= */
/* Hero picture: lender's file view with the borrower portal overlapping it */
.mg-hv { flex: 1.5 1 560px; min-width: 0; display: flex; align-items: flex-start; }
.mg-hv .hv-window { flex: 1 1 auto; padding: 22px; }
.mg-portal { flex: 0 0 232px; margin-left: -28px; margin-top: 84px; position: relative; z-index: 2; box-sizing: border-box; padding: 18px; background: var(--bg); border: 1px solid #3A3D42; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
@media (min-width: 781px) { .mg-hv .hv-window { padding-right: 46px; } }
.mg-tabs { display: flex; gap: 18px; margin-top: 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-faint); }
.mg-tabs span { padding-bottom: 9px; }
.mg-tabs .is-on { color: var(--text); border-bottom: 2px solid var(--accent); margin-bottom: -1px; }
.ui-st--pend { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); }
@media (max-width: 780px) {
  .mg-hv { flex-direction: column; }
  .mg-portal { flex: none; margin: 16px 0 0; }
  .mg-tabs { gap: 14px; flex-wrap: wrap; }
}

/* Product strip */
.mg-strip { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 36px 64px 12px; text-align: center; }
.mg-strip p { margin: 0 auto 18px; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.mg-prods { width: 100%; max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.mg-pitem { flex: 1 1 180px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 20px; color: var(--text-muted); font-size: 15px; border-bottom: 2px solid transparent; }
.mg-pitem svg { color: var(--accent); }
.mg-pitem.is-on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
@media (max-width: 780px) { .mg-strip { padding: 32px 24px 8px; } .mg-pitem { flex-basis: 140px; } }

/* Sections: wider picture column and a vertical feature list */
.pf-vis--wide { flex: 1.6 1 520px; }
.mg-row .pf-txt { flex: 1 1 340px; }
.mg-row .pf-vis--wide { flex: 2 1 640px; }
.mg-feats { display: flex; flex-direction: column; gap: 20px; }
.mg-feat { display: flex; align-items: flex-start; gap: 16px; }
.mg-feat .pf-ficon { flex-shrink: 0; }
.mg-feat b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.mg-feat span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--text-faint); }
.mg-card-s { margin: 4px 0 14px; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.mg-dim { color: var(--text-faint); }

/* 01 application + checklist */
.mg-steps { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.mg-stp { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-faint); }
.mg-stp b { width: 20px; height: 20px; border: 1px solid #3A3D42; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.mg-stp.is-on { color: var(--text); }
.mg-stp.is-on b { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.mg-app { display: flex; flex-wrap: wrap; gap: 20px; }
.mg-appf { flex: 1 1 290px; min-width: 0; }
.mg-appc { flex: 1 1 240px; min-width: 0; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.section--alt .mg-appc { background: var(--bg-alt); }
.mg-cl-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.mg-cl-h b { font-family: var(--font-display); font-size: 14px; color: var(--text); }
.mg-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mg-fld--full { grid-column: 1 / -1; }
.mg-fl { font-size: 11px; color: var(--text-faint); }
.mg-fi { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; padding: 0 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text); overflow: hidden; white-space: nowrap; }
.section--alt .mg-fi { background: var(--bg-alt); }
.mg-fi svg { flex-shrink: 0; color: var(--text-faint); }

/* 02 pipeline */
.mg-ptabs { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.mg-ptabs span { padding: 4px 0 10px; font-size: 13px; color: var(--text-faint); }
.mg-ptabs .is-on { color: var(--text); border-bottom: 2px solid var(--accent); margin-bottom: -1px; }
.mg-ptabs .mg-sp { flex: 1; padding: 0; }
.mg-ptabs .mg-ctl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #3A3D42; border-radius: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.mg-ptab { min-width: 590px; }
.mg-phead, .mg-prow { display: grid; grid-template-columns: 1.6fr 0.8fr 0.85fr 1.05fr 1.35fr 0.7fr; gap: 8px; align-items: center; }
.mg-phead { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.mg-prow { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.mg-prow:last-child { border-bottom: 0; }
.mg-pb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mg-ptype, .mg-pamt, .mg-pact { font-size: 12px; color: var(--text-muted); }
@media (max-width: 780px) {
  .mg-ptab { min-width: 0; }
  .mg-phead { display: none; }
  .mg-ptabs { gap: 14px; }
  .mg-ptabs .mg-sp { display: none; }
  .mg-prow { grid-template-columns: auto auto 1fr; grid-template-areas: "name name status" "type amt act" "bar bar bar"; gap: 8px 14px; align-items: center; padding: 14px 0; }
  .mg-prow > :nth-child(1) { grid-area: name; }
  .mg-prow > :nth-child(2) { grid-area: type; }
  .mg-prow > :nth-child(3) { grid-area: amt; }
  .mg-prow > :nth-child(4) { grid-area: bar; }
  .mg-prow > :nth-child(5) { grid-area: status; justify-self: end; }
  .mg-prow > :nth-child(6) { grid-area: act; justify-self: end; }
}

/* 03 prequalification */
.mg-pq { display: flex; flex-wrap: wrap; gap: 18px; }
.mg-pqf { flex: 1 1 260px; min-width: 0; }
.mg-pqr { flex: 1 1 230px; min-width: 0; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.mg-k { font-size: 12px; color: var(--text-faint); }
.mg-v { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--text); }
.mg-rng { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); }
.mg-disc { font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.mg-gbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 14px; padding: 0 20px; border-radius: 6px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 14px; }
@media (max-width: 1000px) { .mg-strip { padding: 32px 24px 8px; } }

/* ================= Commercial page ================= */
.cm-hv { flex: 1.5 1 560px; min-width: 0; }
.cm-hv .hv-window { padding: 22px; }
.cm-prog { display: flex; align-items: flex-end; gap: 16px; margin: 16px 0 12px; }
.cm-prog-bar { flex: 1; min-width: 0; }
.cm-prog-bar .ui-prog-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 7px; }
.cm-vr { padding: 6px 12px; border: 1px solid #3A3D42; border-radius: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; margin-bottom: -4px; }
.cm-chead, .cm-crow { display: grid; grid-template-columns: 2fr 1fr 1.15fr 0.7fr; gap: 10px; align-items: center; }
.cm-chead { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.cm-crow { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.cm-crow:last-child { border-bottom: 0; }
.cm-cat, .cm-add { font-size: 12px; color: var(--text-muted); }
@media (max-width: 780px) {
  .cm-chead .cm-cat, .cm-chead .cm-add, .cm-crow .cm-cat, .cm-crow .cm-add { display: none; }
  .cm-chead, .cm-crow { grid-template-columns: 1fr auto; }
  .cm-prog { flex-wrap: wrap; }
  .cm-prog-bar { flex: 1 1 100%; }
  .cm-vr { margin-bottom: 0; }
}

/* Loan type strip: icon beside label and descriptor */
.mg-pitem--row { flex: 1 1 190px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; text-align: left; padding: 18px 14px 20px; }
.mg-pitem--row b { display: block; font-size: 15px; font-weight: 600; color: var(--text-muted); }
.mg-pitem--row.is-on b { color: var(--text); }
.mg-pitem--row small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-faint); }
@media (max-width: 780px) { .mg-pitem--row { flex-basis: 100%; } }

/* 01 required documents + guidance */
.cm-bc { margin-bottom: 14px; font-size: 12px; color: var(--text-faint); }
.cm-rd { display: flex; flex-wrap: wrap; gap: 20px; }
.cm-rdl { flex: 1 1 340px; min-width: 0; }
.cm-progt { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 7px; }
.cm-rrow { display: grid; grid-template-columns: 1fr auto 62px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text); }
.cm-rrow:last-child { border-bottom: 0; }
.cm-rrow .cm-add { text-align: right; }
.cm-ubtn { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 10px; border-radius: 5px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 12px; }
.cm-gp { flex: 1 1 220px; min-width: 0; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; align-self: flex-start; }
.section--alt .cm-gp { background: var(--bg-alt); }
.cm-gt { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); }
.cm-gdoc { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.cm-gdoc svg { color: var(--accent); }
.cm-gtext { font-size: 12px; line-height: 1.55; color: var(--text-faint); }
.cm-gfmt { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text); }
.cm-gli { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.cm-gli i { width: 5px; height: 5px; margin-top: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.cm-glink { display: inline-block; margin-top: 14px; font-size: 12px; color: var(--text); border-bottom: 1px solid var(--accent); }

/* 02 annual reviews */
.pf-pill--due { border-color: var(--accent); color: var(--accent); }
.pf-pill--due i { background: var(--accent); }
.pf-pill--ns { color: var(--text-dim); border-color: var(--border); }
.cm-rvtab { min-width: 580px; }
.cm-rvhead, .cm-rvrow { display: grid; grid-template-columns: 1.55fr 0.7fr 0.95fr 1.05fr 1.2fr 1.05fr; gap: 8px; align-items: center; }
.cm-rvhead { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.cm-rvrow { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.cm-rvrow:last-child { border-bottom: 0; }
.cm-rvn { font-weight: 600; }
.cm-rq { display: flex; align-items: center; gap: 8px; }
.cm-rqn { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 780px) {
  .cm-rvtab { min-width: 0; }
  .cm-rvhead { display: none; }
  .cm-rvrow { grid-template-columns: auto auto 1fr; grid-template-areas: "name name status" "type amt date" "rq rq rq"; gap: 8px 14px; align-items: center; padding: 14px 0; }
  .cm-rvrow > :nth-child(1) { grid-area: name; }
  .cm-rvrow > :nth-child(2) { grid-area: type; }
  .cm-rvrow > :nth-child(3) { grid-area: amt; }
  .cm-rvrow > :nth-child(4) { grid-area: date; justify-self: end; }
  .cm-rvrow > :nth-child(5) { grid-area: status; justify-self: end; }
  .cm-rvrow > :nth-child(6) { grid-area: rq; }
}

/* 03 share flow */
.cm-share { width: 100%; max-width: var(--max-width); display: flex; align-items: stretch; gap: 12px; }
.cm-sarrow { flex: 0 0 28px; align-self: center; color: var(--text-dim); }
.cm-sc { min-width: 0; }
.cm-sc1 { flex: 1 1 250px; } .cm-sc2 { flex: 1 1 270px; } .cm-sc3 { flex: 1.5 1 340px; }
.cm-sh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cm-sh .pf-ficon { width: 38px; height: 38px; }
.cm-sh b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.cm-cfi { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text); }
.cm-cfi svg { color: var(--accent); flex-shrink: 0; }
.cm-sp { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.cm-sbtn { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 16px; padding: 0 16px; border-radius: 6px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 14px; }
.cm-ar { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.45; color: var(--text); }
.cm-ai { color: var(--text-faint); padding-top: 1px; }
.cm-at { margin-top: 2px; font-size: 11px; color: var(--text-faint); }
@media (max-width: 1000px) { .cm-share { flex-direction: column; } .cm-sarrow { transform: rotate(90deg); } .cm-sc { flex: 0 0 auto; } }

.cm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 10px; }
.cm-bar .mg-ctl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #3A3D42; border-radius: 6px; font-size: 12px; color: var(--text-muted); }
.cm-barsp { flex: 1; }

/* ================= Consumer page ================= */
.cs-hv { flex: 1.5 1 560px; min-width: 0; display: flex; align-items: flex-start; }
.cs-phone { flex: 0 0 226px; position: relative; z-index: 2; margin: 34px -34px 0 0; box-sizing: border-box; padding: 12px 14px 16px; background: var(--bg); border: 2px solid #3A3D42; border-radius: 30px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.cs-notch { width: 72px; height: 18px; border-radius: 10px; background: var(--border); margin: 0 auto 14px; }
.cs-brand { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--text); margin-bottom: 10px; }
.cs-ptitle { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); }
.cs-psteps { margin: 6px 0 8px; font-size: 11px; color: var(--text-faint); }
.cs-stpr { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.cs-si { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-sizing: border-box; }
.cs-si--ok { color: var(--accent); }
.cs-si--ok svg { width: 18px; height: 18px; }
.cs-si--cur { border: 2px solid var(--accent); }
.cs-si--dim { border: 1px solid #3A3D42; }
.cs-stt { font-size: 12px; font-weight: 600; color: var(--text); }
.cs-stt--dim { color: var(--text-dim); font-weight: 400; }
.cs-stsub { margin-top: 1px; font-size: 10.5px; color: var(--text-faint); }
.cs-sr { margin-left: auto; color: var(--text-faint); }
.cs-cont { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 12px; border-radius: 6px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 12.5px; }
.cs-hw { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 20px 20px 20px 54px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.cs-hw .ui-title { font-size: 16px; }
.cs-new { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 12px; white-space: nowrap; }
.cs-hhead, .cs-hrow { display: grid; grid-template-columns: 1.5fr 1fr 1.25fr; gap: 10px; align-items: center; }
.cs-hhead { margin-top: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.cs-hrow { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.cs-hrow:last-child { border-bottom: 0; }
@media (max-width: 780px) {
  .cs-hv { flex-direction: column; align-items: center; }
  .cs-phone { margin: 0 0 16px; flex: none; width: 226px; }
  .cs-hw { padding: 20px; width: 100%; }
  .cs-hhead { display: none; }
  .cs-hrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "bar bar"; gap: 10px 12px; padding: 13px 0; }
  .cs-hrow > :nth-child(1) { grid-area: name; }
  .cs-hrow > :nth-child(2) { grid-area: bar; }
  .cs-hrow > :nth-child(3) { grid-area: status; }
}

/* 01 upload phone + document card */
.cs-pair { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: flex-start; }
.cs-uphone { flex: 0 0 250px; box-sizing: border-box; padding: 12px 14px 16px; background: var(--bg); border: 2px solid #3A3D42; border-radius: 30px; }
.cs-uh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--text-muted); }
.cs-usubt { margin: 3px 0 10px; font-size: 11px; line-height: 1.45; color: var(--text-faint); }
.cs-urow { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--text); }
.cs-udoc { width: 28px; height: 28px; border: 1px solid #3A3D42; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.cs-un { min-width: 0; }
.cs-usub { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }
.cs-ust { font-size: 11px; padding: 2px 9px; border: 1px solid #3A3D42; border-radius: 6px; color: var(--text-muted); white-space: nowrap; }
.cs-ust--pend { border-color: var(--accent); color: var(--accent); }
.cs-ust--na { color: var(--text-dim); border-color: var(--border); }
.cs-ubtn { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 12px; border-radius: 5px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 11px; }
.cs-uhint { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; font-size: 11px; line-height: 1.45; color: var(--text-faint); }
.cs-uhint svg { color: var(--accent); flex-shrink: 0; width: 20px; height: 20px; }
.cs-dcard { flex: 0 0 232px; margin-top: 70px; box-sizing: border-box; padding: 16px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.cs-dch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.cs-dch svg { color: var(--accent); width: 20px; height: 20px; }
.cs-prev { box-sizing: border-box; height: 120px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); display: flex; gap: 12px; align-items: center; }
.cs-pph { width: 44px; height: 54px; border: 1px solid #3A3D42; border-radius: 6px; flex-shrink: 0; }
.cs-pln { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.cs-pln i { display: block; height: 5px; border-radius: 3px; background: var(--border); }
.cs-dmeta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px; color: var(--text); }
.cs-dmeta small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint); }
.cs-dmeta svg { color: var(--text-faint); }
@media (max-width: 780px) { .cs-dcard { margin-top: 0; } }

/* 02 applications table */
.cs-vtab { min-width: 580px; }
.cs-vhead, .cs-vrow { display: grid; grid-template-columns: 1.5fr 0.85fr 0.85fr 1.1fr 1.3fr 0.8fr; gap: 8px; align-items: center; }
.cs-vhead { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.cs-vrow { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.cs-vrow:last-child { border-bottom: 0; }
@media (max-width: 780px) {
  .cs-vtab { min-width: 0; }
  .cs-vhead { display: none; }
  .cs-vrow { grid-template-columns: auto auto 1fr; grid-template-areas: "name name status" "type amt act" "bar bar bar"; gap: 8px 14px; align-items: center; padding: 14px 0; }
  .cs-vrow > :nth-child(1) { grid-area: name; }
  .cs-vrow > :nth-child(2) { grid-area: type; }
  .cs-vrow > :nth-child(3) { grid-area: amt; }
  .cs-vrow > :nth-child(4) { grid-area: bar; }
  .cs-vrow > :nth-child(5) { grid-area: status; justify-self: end; }
  .cs-vrow > :nth-child(6) { grid-area: act; justify-self: end; }
}

/* 03 estimate */
.cs-est { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 12px; }
.cs-res { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 4px; }
.cs-rbox { flex: 1 1 180px; box-sizing: border-box; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.cs-rv { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--text); }
.cs-rk { margin-top: 4px; font-size: 12px; color: var(--text-faint); }
@media (max-width: 780px) { .cs-est { grid-template-columns: 1fr; } }

/* 04 how it works */
.cs-hows { width: 100%; max-width: 1100px; display: flex; align-items: flex-start; gap: 12px; }
.cs-how { flex: 1 1 200px; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cs-hic { width: 60px; height: 60px; border: 1px solid #3A3D42; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 6px; }
.cs-ht { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.cs-hc { font-size: 14px; line-height: 1.5; color: var(--text-faint); max-width: 220px; }
.cs-harr { flex: 0 0 28px; margin-top: 22px; color: var(--text-dim); }
@media (max-width: 1000px) { .cs-hows { flex-direction: column; align-items: center; } .cs-how { flex: 0 0 auto; } .cs-harr { transform: rotate(90deg); margin: 0; } }

/* ================= Deposits page ================= */
.dp-hv { flex: 1.5 1 560px; min-width: 0; display: flex; align-items: flex-start; }
.dp-win { flex: 1 1 auto; min-width: 0; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dp-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--bg); border-bottom: 1px solid var(--border); }
.dp-mark { width: 22px; height: 22px; border: 1.5px solid var(--accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.dp-mark svg { width: 14px; height: 14px; }
.dp-bname { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); }
.dp-body { padding: 18px 56px 22px 18px; }
.dp-body .mg-steps { padding-bottom: 12px; margin-bottom: 14px; gap: 6px 10px; }
.dp-ctitle { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.dp-csub { margin-top: 4px; font-size: 12px; color: var(--text-faint); }
.dp-choices { display: flex; gap: 12px; margin: 14px 0 16px; }
.dp-choice { flex: 1 1 0; min-width: 0; position: relative; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.dp-choice.is-on { border-color: var(--accent); }
.dp-ci { display: block; color: var(--accent); }
.dp-choice b { display: block; margin: 8px 0 4px; font-size: 13px; color: var(--text); }
.dp-cd { display: block; font-size: 11px; line-height: 1.45; color: var(--text-faint); }
.dp-ctick { position: absolute; right: 10px; top: 10px; color: var(--accent); }
.dp-contbtn { width: 120px; }
.dp-phone { flex: 0 0 218px; position: relative; z-index: 2; margin: 76px 0 0 -42px; box-sizing: border-box; padding: 12px 14px 16px; background: var(--bg); border: 2px solid #3A3D42; border-radius: 30px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.dp-psub { margin: 3px 0 10px; font-size: 11px; line-height: 1.45; color: var(--text-faint); }
.dp-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dp-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border: 1px solid #3A3D42; border-radius: 999px; font-size: 12.5px; color: var(--text-muted); }
.dp-tag svg { color: var(--accent); width: 14px; height: 14px; }
@media (max-width: 780px) {
  .dp-hv { flex-direction: column; align-items: center; }
  .dp-win { width: 100%; }
  .dp-body { padding: 18px; }
  .dp-phone { margin: 16px 0 0; }
}

/* Four-step strip */
.dp-strip { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 34px 64px; }
.dp-sr { width: 100%; max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 10px; }
.dp-ds { flex: 1 1 210px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.dp-dsn { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--accent); }
.dp-dsi { color: var(--text); flex-shrink: 0; display: flex; }
.dp-dst { font-size: 14.5px; font-weight: 600; color: var(--text); }
.dp-dsc { margin-top: 2px; font-size: 12.5px; color: var(--text-faint); }
.dp-sa { flex: 0 0 26px; color: var(--text-dim); }
@media (max-width: 1000px) { .dp-strip { padding: 30px 24px; } .dp-sa { display: none; } .dp-ds { flex-basis: 45%; } }
@media (max-width: 780px) { .dp-ds { flex-basis: 100%; } }

/* 01 application form */
.dp-fapp { display: flex; flex-wrap: wrap; gap: 20px; }
.dp-vsl { flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.dp-vsr { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 12px; color: var(--text-faint); }
.dp-vsr b { width: 20px; height: 20px; border: 1px solid #3A3D42; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.dp-vsr.is-on { background: var(--bg); color: var(--text); }
.dp-vsr.is-on b { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.dp-fform { flex: 1 1 300px; min-width: 0; }
.dp-f3 { display: grid; grid-template-columns: 1.2fr 0.7fr 0.8fr; gap: 12px; margin-top: 12px; }
@media (max-width: 1000px) { .dp-vsl { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 780px) { .dp-f3 { grid-template-columns: 1fr; } .dp-contact { grid-template-columns: 1fr; } }

/* 02 identification */
.dp-idpair { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: flex-start; }
.dp-idcol { flex: 0 0 232px; display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.dp-idc { box-sizing: border-box; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.dp-idh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12px; color: var(--text-muted); }
.dp-secure { box-sizing: border-box; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; text-align: center; }
.dp-lk { width: 44px; height: 44px; margin: 0 auto 10px; border: 1px solid #3A3D42; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.dp-secure b { display: block; font-size: 13.5px; color: var(--text); }
.dp-secure span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
@media (max-width: 780px) { .dp-idcol { margin-top: 0; } }

/* 03 handoff: boxes sit narrower than the page width */
.dp-flow { max-width: 1100px; margin-top: 4px; }

/* ================= Security page ================= */
.sc-aw { flex: 1.5 1 560px; min-width: 0; box-sizing: border-box; padding: 22px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.sc-aw .ui-title { font-size: 17px; }
.sc-sf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; }
.sc-ctl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid #3A3D42; border-radius: 6px; font-size: 12px; color: var(--text-muted); }
.sc-sp { flex: 1; }
.sc-sbar { display: flex; align-items: center; gap: 8px; min-height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 12px; color: var(--text-faint); flex: 1 1 160px; }
.section--alt .sc-sbar { background: var(--bg-alt); }
.sc-sbar svg { flex-shrink: 0; }
.sc-tl { position: relative; }
.sc-tl::before { content: ""; position: absolute; left: 100px; top: 22px; bottom: 22px; border-left: 1px dashed #3A3D42; }
.sc-trow { position: relative; display: grid; grid-template-columns: 74px 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text); }
.sc-tdt { font-size: 12px; color: var(--text-muted); line-height: 1.35; display: flex; flex-direction: column; }
.sc-tdm { color: var(--text-faint); }
.sc-ev { width: 30px; height: 30px; box-sizing: border-box; border: 1px solid #3A3D42; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: var(--bg-alt); position: relative; z-index: 1; }
.sc-ev--ex { border-color: var(--accent); color: var(--accent); }
.sc-ev--rs { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.sc-ttt { font-weight: 600; }
.sc-tts { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-faint); }
.sc-tg { display: inline-block; padding: 2px 10px; border: 1px solid #3A3D42; border-radius: 999px; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.sc-tg--ex { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.sc-tg--rs { border-color: var(--accent); color: var(--accent); }
@media (max-width: 780px) {
  .sc-aw { padding: 18px; }
  .sc-tl::before { display: none; }
  .sc-trow { grid-template-columns: 30px 1fr; grid-template-areas: "ev tx" ". dt" ". tag"; gap: 6px 12px; align-items: start; justify-self: stretch; }
  .sc-trow > .sc-ev { grid-area: ev; }
  .sc-trow > .sc-ttx { grid-area: tx; }
  .sc-trow > .sc-tdt { grid-area: dt; flex-direction: row; gap: 8px; }
  .sc-trow > .sc-tg { grid-area: tag; justify-self: start; }
  .sc-sp { display: none; }
}

/* 01 application activity table */
.sc-bc { margin-bottom: 12px; font-size: 12px; color: var(--text-faint); }
.sc-atab { min-width: 560px; }
.sc-athead, .sc-atrow { display: grid; grid-template-columns: 0.95fr 0.8fr 1.15fr 1.5fr 1.2fr; gap: 10px; align-items: center; }
.sc-athead { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.sc-atrow { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); line-height: 1.4; }
.sc-atrow:last-child { border-bottom: 0; }
.sc-adt, .sc-au, .sc-adet { color: var(--text-muted); }
.sc-arel { color: var(--text-faint); }
.sc-aact { display: flex; align-items: center; gap: 7px; }
.sc-aev { display: flex; color: var(--accent); }
@media (max-width: 780px) {
  .sc-atab { min-width: 0; }
  .sc-athead { display: none; }
  .sc-atrow { grid-template-columns: 1fr 1fr; grid-template-areas: "act act" "det det" "dt usr" "rel rel"; gap: 6px 12px; padding: 14px 0; }
  .sc-atrow > :nth-child(1) { grid-area: dt; }
  .sc-atrow > :nth-child(2) { grid-area: usr; justify-self: end; }
  .sc-atrow > :nth-child(3) { grid-area: act; font-weight: 600; }
  .sc-atrow > :nth-child(4) { grid-area: det; }
  .sc-atrow > :nth-child(5) { grid-area: rel; }
}

/* 02 file status overview */
.sc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 18px; }
.sc-kpi { padding: 12px 12px 10px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; }
.sc-kv { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--text); }
.sc-kl { margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.sc-ks { margin-top: 2px; font-size: 11px; color: var(--text-faint); }
.sc-sh { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin: 4px 0 12px; }
.sc-of { margin-bottom: 12px; }
.sc-of .pf-ptrack { margin-top: 6px; }
.sc-ofh { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text); }
.sc-ofm { font-size: 12px; color: var(--text-faint); text-align: right; }
.sc-pkg { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; }
.sc-pkg b { display: block; font-size: 14px; color: var(--text); }
.sc-pkg span { font-size: 13px; color: var(--text-faint); }
.sc-pkg .sc-gen { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: 6px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 14px; }
@media (max-width: 1000px) { .sc-kpis { grid-template-columns: repeat(2, 1fr); } }

/* 03 security controls */
.sc-nb { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; line-height: 1.55; color: var(--text-faint); }
.sc-nb svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.sc-crs { display: flex; flex-direction: column; }
.sc-cr { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border); }
.sc-cr:last-child { border-bottom: 1px solid var(--border); }
.sc-crt { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.sc-crd { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.sc-dl { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--accent); }
.sc-ctap { margin: 0 0 4px; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--text-muted); }

/* ---- Case studies: story page (csp-) and list page (csl-) ---- */
.csp-pic { flex: 1.4 1 480px; min-width: 0; margin: 0; }
.csp-pic img { display: block; width: 100%; height: auto; }
.csp-pic figcaption { margin-top: 8px; font-size: 12px; color: var(--text-dim); text-align: center; }
.csp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 1000px; margin: 0 auto; }
.csp-bc { padding: 32px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.csp-bc--after { border-color: var(--accent); }
.csp-tag { margin-bottom: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.csp-bc h2 { margin: 0 0 12px; text-align: left; font-size: 24px; line-height: 1.25; }
.csp-bc p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text-muted); }
.csp-wrap { width: 100%; max-width: 1100px; margin: 0 auto; }
.csp-h { margin: 0; text-align: center; }
.csp-sub { margin: 8px 0 28px; text-align: center; font-size: 15px; color: var(--text-faint); }
.csp-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.csp-oc { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.csp-oi { display: flex; color: var(--accent); }
.csp-oc p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text); }
.csp-also { margin: 36px 0 0; }
.csp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 14px 32px; }
.csp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: var(--text-muted); }
.csp-list .csp-oi { margin-top: 1px; flex-shrink: 0; }
.csp-alsot { margin-bottom: 14px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.csp-cta { justify-content: center; margin-top: 24px; }
@media (max-width: 780px) { .csp-ba { grid-template-columns: 1fr; } .csp-bc { padding: 24px; } }

.csl-trust { flex: 1 1 320px; max-width: 440px; box-sizing: border-box; padding: 24px 28px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; }
.csl-trust-t { margin-bottom: 18px; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.csl-trust-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; }
.csl-trust-v { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1.1; color: var(--accent); }
.csl-trust-l { margin-top: 6px; font-size: 14px; color: var(--text-faint); }
.csl-wrap { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 1200px; margin: 0 auto; }
.csl-feat { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; padding: 36px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none; transition: border-color 0.2s ease; }
.csl-feat:hover { border-color: var(--accent); color: var(--text); }
.csl-feat-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.csl-feat-copy h2 { margin: 0; text-align: left; font-size: 30px; line-height: 1.2; }
.csl-feat-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.csl-flag { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.csl-feat-pic img { display: block; width: 100%; height: auto; }
.csl-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.csl-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.csl-row { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 24px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; transition: background-color 0.2s ease; }
.csl-row:hover { background: rgba(255,255,255,0.02); color: var(--text); }
.csl-row h2 { margin: 0 0 4px; text-align: left; font-size: 20px; line-height: 1.25; }
.csl-row p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.csl-row .more { color: var(--accent); font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) { .csl-feat { grid-template-columns: 1fr; padding: 24px; gap: 24px; } .csl-feat-pic { order: -1; } .csl-cards { grid-template-columns: 1fr; } .csl-row { grid-template-columns: 1fr; gap: 12px; } }
.csp-logo { display: block; max-width: 180px; max-height: 44px; width: auto; height: auto; }


/* --- Keyboard focus: a visible ring on menu controls --- */
.nav-dropdown-trigger:focus-visible, .nav-toggle:focus-visible, .faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.nav-dropdown-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- Proof strip definitions note --- */
.proof-note { max-width: var(--max-width); margin: 24px auto 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.csl-trust-note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* --- Commercial: how annual reviews work --- */
.cm-how { width: 100%; max-width: var(--max-width); margin-top: 56px; }
.cm-how-h { margin: 0 0 20px; font-size: 22px; text-align: left; }
.cm-how-g { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cm-how-g li { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.cm-how-g b { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.3; }
.cm-how-g li > span:last-child { font-size: 15px; line-height: 1.6; color: var(--text-faint); }
.cm-how-n { width: 30px; height: 30px; border: 1px solid var(--accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--accent); }
@media (max-width: 1000px) { .cm-how-g { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cm-how-g { grid-template-columns: 1fr; } .cm-how { margin-top: 40px; } }

/* --- Platform FAQ --- */
.pf-faq { scroll-margin-top: 0; }
.pf-faq .pf-head { margin-bottom: 36px; }
.faq-list { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.faq-item[open] { border-color: rgba(196, 184, 160, 0.5); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.35; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--accent); transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 24px 22px; font-size: 16px; line-height: 1.7; color: var(--text-muted); }

/* --- Easier tapping on phones: menu and footer links get a taller touch area --- */
@media (max-width: 1120px) { .site-nav > a:not(.btn), .nav-dropdown-trigger { padding: 8px 0; } }
@media (max-width: 780px) {
  .footer-col { gap: 2px; }
  .footer-col a, .footer-bottom-links a { display: inline-block; padding: 8px 0; }
  .footer-bottom-links { gap: 20px; }
}

/* --- Skip link: appears only when a keyboard user tabs to it --- */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 18px; background: #FFFFFF; color: #0A0A12; border-radius: 8px; font-weight: 600; font-size: 15px; transition: top 0.15s ease; }
.skip-link:focus { top: 12px; color: #0A0A12; }
main:focus { outline: none; }

/* Demo form captcha: keeps the widget inside the card on narrow phones */
.demo-captcha { margin: 24px 0 8px; max-width: 100%; overflow-x: auto; min-height: 78px; }
#demo-captcha-error { margin: 0 0 16px; }
/* The captcha box is 303px wide; shrink it a little on small phones so it never needs side-scrolling */
@media (max-width: 420px) {
  .demo-captcha { overflow: hidden; min-height: 68px; }
  .demo-captcha .h-captcha { transform: scale(0.85); transform-origin: 0 0; }
}

/* Header menu: the page you are on stays highlighted (one unbroken line under the label) */
.site-nav a.is-current, .nav-dropdown-trigger.is-current { color: var(--text); position: relative; }
.site-nav > a.is-current::after, .nav-dropdown-trigger.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--accent);
}
.nav-dropdown-panel a.is-current { color: var(--text); }
/* Hero "Schedule a Demo" shows only where the header button is hidden (phones and small tablets) */
.hero-actions .cta-phone-only, .cta-phone-only { display: none; }
@media (max-width: 1120px) { .hero-actions .cta-phone-only, .cta-phone-only { display: inline-flex; } }

/* Cookie notice: small dismissible bar at the bottom of the screen */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; padding: 14px 18px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted, var(--text-dim)); flex: 1 1 auto; }
.cookie-bar a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-ok { flex: 0 0 auto; min-height: 40px; padding: 0 22px; border: 0; border-radius: 8px; cursor: pointer;
  background: #fff; color: #111; font: inherit; font-weight: 600; font-size: 14px; }
.cookie-ok:hover { background: var(--accent); }
.cookie-ok:focus-visible, .cookie-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) { .cookie-bar { flex-direction: column; align-items: stretch; gap: 12px; left: 12px; right: 12px; bottom: 12px; } }
@media print { .cookie-bar { display: none; } }