/* RevenuePrism brand tokens mapped onto the Industry design system.
   Loaded AFTER industry styles.css. Colors come from the brand pack;
   type, spacing, radius and component grammar stay Industry's. */

:root {
  --color-bg: #f7f9fc;
  --color-surface: #ffffff;
  --color-text: #0b2239;
  --color-accent: #2f6f9f;
  --color-accent-2: #2f6f9f;
  --color-divider: #d7e1ea;

  --color-neutral-100: #eef3f7;
  --color-neutral-200: #d7e1ea;
  --color-neutral-300: #c3d0db;
  --color-neutral-400: #8b9aa8;
  --color-neutral-500: #607285;
  --color-neutral-600: #4a5c6e;
  --color-neutral-700: #334a5e;
  --color-neutral-800: #1e3448;
  --color-neutral-900: #0b2239;

  --color-accent-100: #f1f6fa;
  --color-accent-200: #dceaf4;
  --color-accent-300: #bdd6e8;
  --color-accent-400: #8bb7d8;
  --color-accent-500: #5e92ba;
  --color-accent-600: #2f6f9f;
  --color-accent-700: #204d70;
  --color-accent-800: #183a55;
  --color-accent-900: #10283b;

  --color-accent-2-100: #f1f6fa;
  --color-accent-2-200: #dceaf4;
  --color-accent-2-300: #bdd6e8;
  --color-accent-2-400: #8bb7d8;
  --color-accent-2-500: #5e92ba;
  --color-accent-2-600: #2f6f9f;
  --color-accent-2-700: #204d70;
  --color-accent-2-800: #183a55;
  --color-accent-2-900: #10283b;

  --shadow-sm: 0 1px 2px rgba(11, 34, 57, 0.10);
  --shadow-md: 0 3px 12px rgba(11, 34, 57, 0.10);
  --shadow-lg: 0 18px 44px rgba(11, 34, 57, 0.16);

  --rp-action: #285f88;
  --rp-action-hover: #204d70;
}

:focus-visible { outline: 3px solid #8bb7d8; outline-offset: 2px; }

/* Action blue for solid buttons, per brand accessibility notes. */
.btn-primary { background: var(--rp-action); border-color: var(--rp-action); color: #fff; }
.btn-primary:hover { background: var(--rp-action-hover); border-color: var(--rp-action-hover); }
.btn-primary:active { background: #183a55; border-color: #183a55; }

/* Dark band scope — retints the Industry tokens so cards, rules and
   corner marks stay legible reversed out of #081723. */
.rp-dark {
  --color-text: #f5f8fb;
  --color-bg: #081723;
  --color-surface: #102535;
  --color-accent: #8bb7d8;
  --color-divider: rgba(139, 183, 216, 0.30);
  --color-accent-100: rgba(139, 183, 216, 0.14);
  --color-accent-800: #dceaf4;
  background: #081723;
  color: #f5f8fb;
}
.rp-dark .btn-primary { background: #8bb7d8; border-color: #8bb7d8; color: #081723; }
.rp-dark .btn-primary:hover { background: #bdd6e8; border-color: #bdd6e8; }
.rp-dark .btn-secondary { border-color: rgba(139, 183, 216, 0.45); color: #f5f8fb; }
.rp-dark .btn-secondary:hover { background: rgba(139, 183, 216, 0.14); }
.rp-dark .card-body { opacity: 0.92; color: #b5c6d3; }

/* Layout scaffolding — the only things inline styles cannot express. */
.rp-wrap { width: min(1180px, 100% - 48px); margin: 0 auto; }
.rp-wrap-narrow { width: min(900px, 100% - 48px); margin: 0 auto; }

.rp-grid-2, .rp-grid-3, .rp-grid-4, .rp-grid-5 { display: grid; gap: 20px; }
.rp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.rp-grid-5 { grid-template-columns: repeat(5, 1fr); }
.rp-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }

.rp-desktop { display: flex; }
.rp-mobile { display: none; }

/* Column ratios that only apply once there is room for two columns, so the
   stacked mobile order is never overridden. */
@media (min-width: 1001px) {
  .rp-split-alt { grid-template-columns: 0.95fr 1.05fr; }
  .rp-split-even { grid-template-columns: 1fr 1fr; }
}

/* Footer masthead */
.rp-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }

/* Stat row split by rules on desktop, by stacked rules on phones */
.rp-divided { display: grid; grid-template-columns: repeat(3, 1fr); }
.rp-divided > * { padding: 0 32px; border-right: 1px solid var(--color-divider); }
.rp-divided > *:first-child { padding-left: 0; }
.rp-divided > *:last-child { padding-right: 0; border-right: 0; }

/* ---------------------------------------------------------------- mobile */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
* { -webkit-tap-highlight-color: rgba(47, 111, 159, 0.18); }

/* iOS zooms the page when a focused input is under 16px. */
@supports (-webkit-touch-callout: none) {
  .input, input, textarea, select { font-size: 16px; }
}

@media (max-width: 1000px) {
  .rp-split { grid-template-columns: 1fr; gap: 36px; }
  .rp-grid-4, .rp-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .rp-desktop { display: none; }
  .rp-mobile { display: flex; }
  .rp-foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .rp-foot-grid > *:first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .rp-grid-2, .rp-grid-3, .rp-grid-4, .rp-grid-5 { grid-template-columns: 1fr; }
  .rp-wrap, .rp-wrap-narrow { width: calc(100% - 36px); }
  .rp-foot-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }

  .rp-divided { grid-template-columns: 1fr; gap: 26px; }
  .rp-divided > * { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .rp-divided > *:last-child { padding-bottom: 0; border-bottom: 0; }

  /* Touch targets: 44px minimum on every action. */
  .btn { min-height: 44px; }
  .btn-icon { min-width: 44px; min-height: 44px; }
  .rp-cta-stack { width: 100%; }
  .rp-cta-stack > .btn { width: 100%; justify-content: center; }

  .dialog { width: calc(100% - 24px) !important; }
}

/* Landscape phones: the demo modal must not run off a 375×812 screen. */
@media (max-height: 520px) {
  .dialog { max-height: calc(100vh - 24px); overflow-y: auto; }
}

@media print {
  header, footer, .dialog-backdrop { display: none; }
}