/* Marketing-site look for Rails pages a marketing link lands on: the
 * Remediate Now funnel (layouts/remediate_now) and the public pre-login pages
 * — sign-in, sign-up, forgot/reset password, resend confirmation, resend
 * unlock, MFA code (layouts/auth_marketing). Colors and type copy
 * adacomply-marketing/marketing-assets/design-system.css. The header and
 * footer styles live in marketing_site_chrome.css (generated). Every rule is
 * scoped to body.marketing-site so the app's own pages never change.
 * Sections: tokens, buttons, hero, page shell, mobile. */

/* Tokens */
body.marketing-site {
  --ms-brand: #233ac4;
  --ms-brand-dark: #182c9b;
  --ms-brand-light: #eef1fc;
  --ms-ink: #101b37;
  --ms-ink-soft: #49556d;
  --ms-muted: #5f6b80;
  --ms-bg: #f6f8fc;
  --ms-border: #dce2ed;
  --ms-accent: #ffc247;
  --ms-accent-hover: #ffd477;
  --ms-navy: #0d1836;
  --ms-radius: 16px;
  --ms-radius-sm: 8px;
  --ms-gutter: clamp(20px, 4vw, 48px);
  --ms-shadow: 0 12px 36px rgb(16 27 55 / 7%);
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.marketing-site :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--ms-brand); outline-offset: 3px;
}
/* A text box shows focus with a brand border and a soft halo, not the thick
 * ring above (Joseph, 2026-10-04). The brand border keeps well over 3:1
 * against white. The transparent outline still draws in Windows high
 * contrast mode. Checkboxes keep the thick ring. */
.marketing-site :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea):focus-visible {
  outline: 2px solid transparent; outline-offset: 0;
  border-width: 1px; border-color: var(--ms-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-brand) 18%, transparent);
}
/* Buttons */
.marketing-site :is(.ms-btn-primary, .rn-page .btn-primary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; height: auto; padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--ms-radius-sm);
  background: var(--ms-accent); color: var(--ms-ink);
  font-size: .9rem; font-weight: 700; line-height: 1.5; text-transform: none;
  text-decoration: none; white-space: nowrap; box-shadow: none;
  transition: background .16s, box-shadow .16s;
}
.marketing-site :is(.ms-btn-primary, .rn-page .btn-primary):hover {
  background: var(--ms-accent-hover); border-color: transparent; color: var(--ms-ink);
  box-shadow: 0 4px 12px rgb(16 27 55 / 8%);
}
.marketing-site :is(.ms-btn-ghost, .rn-page .btn-outline:not(.btn-error), .rn-page .btn-ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; height: auto; padding: 10px 20px;
  border: 1px solid var(--ms-border); border-radius: var(--ms-radius-sm);
  background: #fff; color: var(--ms-ink);
  font-size: .9rem; font-weight: 700; text-transform: none; text-decoration: none;
}
.marketing-site :is(.ms-btn-ghost, .rn-page .btn-outline:not(.btn-error), .rn-page .btn-ghost):hover {
  background: var(--ms-brand-light); border-color: #b8c3e5; color: var(--ms-brand-dark);
}
/* The app's .btn-primary paints with !important from --brand-primary, so the
 * gold is set through those variables, on the button only (the tag viewer
 * reads --brand-primary too). A white-label host keeps its own brand color. */
body.marketing-site:not(.is-white-label) .rn-page .btn-primary {
  --brand-primary: var(--ms-accent); --brand-primary-border: var(--ms-accent); --brand-primary-content: var(--ms-ink);
}
body.marketing-site:not(.is-white-label) .rn-page .btn-primary:hover { --brand-primary: var(--ms-accent-hover); }
.rn-page .btn-error.btn-outline { border-radius: var(--ms-radius-sm); text-transform: none; }
.rn-page .btn:disabled { opacity: .6; }

/* Navy intro band, same as the marketing site's topic pages */
.ms-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 56px var(--ms-gutter) 64px;
  background: radial-gradient(ellipse at 90% 10%, #203574 0%, transparent 60%), var(--ms-navy);
  border-top: 4px solid var(--ms-accent);
}
.ms-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
  background-size: 60px 60px;
}
.ms-hero-inner { position: relative; max-width: 1100px; margin: 0 auto; }
.ms-breadcrumb { margin-bottom: 16px; font-size: .85rem; color: rgb(255 255 255 / 60%); }
.ms-breadcrumb a { color: rgb(255 255 255 / 78%); text-decoration: none; }
.ms-breadcrumb a:hover { color: var(--ms-accent); }
.ms-breadcrumb span { margin: 0 6px; }
.ms-hero h1 {
  margin: 0 0 12px; color: #fff;
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.13; letter-spacing: -.04em;
}
.ms-hero-lede { max-width: 680px; margin: 0; color: rgb(255 255 255 / 82%); font-size: 1.1rem; }

/* Page shell */
.ms-main { max-width: 1100px; margin: -32px auto 0; padding: 0 var(--ms-gutter) 80px; position: relative; }

@media (max-width: 760px) {
  .ms-hero { padding-top: 40px; padding-bottom: 56px; }
}

/* White-label partner host: the partner's brand color replaces the navy and gold */
body.marketing-site.is-white-label {
  --ms-navy: var(--brand-primary, #0d1836);
  --ms-accent: var(--brand-primary, #ffc247);
  --ms-accent-hover: var(--brand-primary, #ffd477);
  --ms-brand: var(--brand-primary, #233ac4);
}
.is-white-label .ms-btn-primary,
.is-white-label .ms-btn-primary:hover { color: var(--brand-primary-content, #fff); }
.is-white-label .ms-btn-primary:hover { filter: brightness(1.08); }
.is-white-label .ms-hero { border-top-color: var(--brand-primary-border, transparent); }