/* =====================================================================
   Mind Safety — Design System
   ---------------------------------------------------------------------
   Self-contained. Pages in the new system load THIS INSTEAD OF style.css.
   It does not depend on style.css and must never be loaded alongside it,
   because style.css sets its own body font, colours and container rules.

   Legacy pages (~60 templates) keep partials/psychosocial_header.html and
   style.css untouched — they are Phase 2.

   Palette discipline: navy for structure, ONE teal for action. Teal
   appears only on primary buttons, links, the active nav item and small
   accents. If a page reads as more than ~10% teal, something is wrong.
   ===================================================================== */

:root {
  /* Brand */
  --ms-navy-900: #0F2440;   /* headings, nav text, footer background */
  --ms-navy-700: #1B3A5C;   /* secondary headings, hover on navy */
  --ms-teal-600: #0D9488;   /* THE accent: primary CTAs, links, highlights */
  --ms-teal-700: #0F766E;   /* CTA hover */
  --ms-teal-050: #F0FDFA;   /* subtle tinted band */

  /* Neutrals */
  --ms-bg:       #FFFFFF;
  --ms-bg-alt:   #F8FAFC;
  --ms-border:   #E2E8F0;
  --ms-text:     #0F172A;
  --ms-text-2:   #475569;

  /* Shape & rhythm */
  --ms-radius:    10px;
  --ms-radius-sm: 6px;
  --ms-space:     1rem;
  --ms-maxw:      1120px;

  /* The single permitted shadow. Nothing heavier. */
  --ms-shadow:    0 4px 12px rgba(15, 36, 64, .08);

  --ms-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------
   RESET / BASE
   --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.ms {
  margin: 0;
  font-family: var(--ms-font);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ms-text);
  background: var(--ms-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Guard against any child forcing a sideways scroll on mobile. */
  overflow-x: hidden;
}

/* Base image rule. Deliberately NOT `body.ms img` — that scores (0,1,2)
   and silently beat component rules like .ms-nav__logo img (0,1,1),
   which made the logo render at its natural 800x350 and forced a
   350px-tall header plus horizontal overflow at every breakpoint. */
.ms img { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------------- */
.ms h1, .ms h2, .ms h3, .ms h4 {
  color: var(--ms-navy-900);
  margin: 0 0 .6em;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ms h1 { font-size: 2.6rem;  font-weight: 700; letter-spacing: -0.02em; }
.ms h2 { font-size: 1.8rem;  font-weight: 600; }
.ms h3 { font-size: 1.25rem; font-weight: 600; }
.ms h4 { font-size: 1.05rem; font-weight: 600; }

.ms p { margin: 0 0 1.1em; }
.ms p:last-child { margin-bottom: 0; }

.ms a {
  color: var(--ms-teal-600);
  text-decoration: none;
}
.ms a:hover { color: var(--ms-teal-700); text-decoration: underline; }

/* Body copy is never teal — links only. */
.ms-lede {
  font-size: 1.2rem;
  color: var(--ms-text-2);
  line-height: 1.65;
  max-width: 62ch;
}

.ms-muted { color: var(--ms-text-2); }

/* The only permitted all-caps: tiny section labels. */
.ms-eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ms-text-2);
  margin-bottom: .75rem;
}

.ms-h2-group { max-width: 68ch; margin-bottom: calc(var(--ms-space) * 2.5); }

/* ---------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------- */
.ms-container {
  width: 100%;
  max-width: var(--ms-maxw);
  margin: 0 auto;
  padding-inline: calc(var(--ms-space) * 1.5);
}

.ms-section { padding-block: calc(var(--ms-space) * 5); background: var(--ms-bg); }
.ms-section--alt { background: var(--ms-bg-alt); }
.ms-section--tint { background: var(--ms-teal-050); }
.ms-section--tight { padding-block: calc(var(--ms-space) * 3); }

/* The only permitted divider: a single hairline. */
.ms-section--ruled { border-top: 1px solid var(--ms-border); }

.ms-grid { display: grid; gap: calc(var(--ms-space) * 1.5); }
.ms-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ms-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ms-grid--split { grid-template-columns: 1.05fr .95fr; align-items: center;
                  gap: calc(var(--ms-space) * 3); }

/* ---------------------------------------------------------------
   BUTTONS — exactly two. No others.
   --------------------------------------------------------------- */
.ms-btn-primary,
.ms-btn-secondary {
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .75rem 1.5rem;
  border-radius: var(--ms-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ms-btn-primary {
  background: var(--ms-teal-600);
  color: #FFFFFF;
}
.ms-btn-primary:hover,
.ms-btn-primary:focus-visible {
  background: var(--ms-teal-700);
  color: #FFFFFF;
  text-decoration: none;
}

/* Most buttons are <a>. `.ms a { color: teal }` scores (0,1,1) and beat
   `.ms-btn-primary` (0,1,0), painting teal text on a teal background —
   the label was there but invisible. These selectors score (0,2,1) and
   cover every link state, including :visited. */
.ms a.ms-btn-primary,
.ms a.ms-btn-primary:link,
.ms a.ms-btn-primary:visited,
.ms a.ms-btn-primary:hover,
.ms a.ms-btn-primary:active,
.ms a.ms-btn-primary:focus,
.ms button.ms-btn-primary {
  color: #FFFFFF;
  text-decoration: none;
}
.ms a.ms-btn-primary:hover,
.ms a.ms-btn-primary:focus-visible {
  background: var(--ms-teal-700);
}

.ms a.ms-btn-secondary,
.ms a.ms-btn-secondary:link,
.ms a.ms-btn-secondary:visited,
.ms a.ms-btn-secondary:active,
.ms a.ms-btn-secondary:focus,
.ms button.ms-btn-secondary {
  color: var(--ms-navy-900);
  text-decoration: none;
}
.ms a.ms-btn-secondary:hover,
.ms a.ms-btn-secondary:focus-visible {
  background: var(--ms-navy-900);
  color: #FFFFFF;
}

.ms-btn-secondary {
  background: transparent;
  color: var(--ms-navy-900);
  border-color: var(--ms-navy-900);
}
.ms-btn-secondary:hover,
.ms-btn-secondary:focus-visible {
  background: var(--ms-navy-900);
  color: #FFFFFF;
  text-decoration: none;
}

.ms-btn-lg { padding: .9rem 1.85rem; font-size: 1.05rem; }

/* ---------------------------------------------------------------
   FOCUS — visible on every interactive element.
   --------------------------------------------------------------- */
.ms a:focus-visible,
.ms button:focus-visible,
.ms input:focus-visible,
.ms select:focus-visible,
.ms textarea:focus-visible,
.ms summary:focus-visible {
  outline: 3px solid var(--ms-teal-600);
  outline-offset: 2px;
  border-radius: var(--ms-radius-sm);
}
/* On navy the teal ring is low-contrast, so go white there. */
.ms-footer a:focus-visible,
.ms-btn-secondary:focus-visible {
  outline-color: #FFFFFF;
}
.ms-btn-secondary:focus-visible { outline-color: var(--ms-navy-900); }

/* ---------------------------------------------------------------
   CARDS
   --------------------------------------------------------------- */
.ms-card {
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: calc(var(--ms-space) * 1.75);
}

a.ms-card,
.ms-card--link { display: block; color: inherit; text-decoration: none; }

.ms-card--hover { transition: box-shadow .18s ease, transform .18s ease; }
.ms-card--hover:hover {
  box-shadow: var(--ms-shadow);
  transform: translateY(-2px);
  text-decoration: none;
}

.ms-card h3 { margin-bottom: .5rem; }
.ms-card p  { color: var(--ms-text-2); }

/* Pricing "best value": teal top rule + badge, NOT a teal card. */
.ms-card--featured {
  border-top: 3px solid var(--ms-teal-600);
  position: relative;
}

.ms-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ms-teal-700);
  background: var(--ms-teal-050);
  border: 1px solid rgba(13, 148, 136, .25);
  border-radius: 999px;
  padding: .25rem .7rem;
  margin-bottom: .85rem;
}

/* ---------------------------------------------------------------
   PRICE DISPLAY
   --------------------------------------------------------------- */
.ms-price {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ms-navy-900);
  line-height: 1;
  margin: .35rem 0 .2rem;
}
.ms-price small { font-size: .95rem; font-weight: 500; color: var(--ms-text-2); }

.ms-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.ms-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
  color: var(--ms-text-2);
}
/* Tick drawn in CSS — no icon font, no emoji. */
.ms-list li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .5em;
  width: .5rem;
  height: .28rem;
  border-left: 2px solid var(--ms-teal-600);
  border-bottom: 2px solid var(--ms-teal-600);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------
   NAV
   --------------------------------------------------------------- */
.ms-nav {
  background: var(--ms-bg);
  border-bottom: 1px solid var(--ms-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.ms-nav__inner {
  max-width: var(--ms-maxw);
  margin: 0 auto;
  padding: 0 calc(var(--ms-space) * 1.5);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space);
}

.ms-nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
/* (0,2,1) so the base image rule cannot flatten it. */
.ms .ms-nav__logo img {
  height: auto;
  max-height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
@media (min-width: 1200px) {
  .ms .ms-nav__logo img { max-height: 56px; }
}

.ms-nav__links {
  display: flex;
  align-items: center;
  gap: calc(var(--ms-space) * 1.5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ms-nav__links a {
  color: var(--ms-navy-900);
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;      /* "Free Sample" must never wrap to two lines */
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.ms-nav__links a:hover { color: var(--ms-teal-700); text-decoration: none; }

.ms-nav__links a[aria-current="page"] {
  color: var(--ms-teal-700);
  border-bottom-color: var(--ms-teal-600);
}

.ms-nav__actions {
  display: flex;
  align-items: center;
  gap: calc(var(--ms-space) * 1.1);
  flex: 0 0 auto;
}
.ms-nav__allowance {
  font-size: .9rem;
  color: var(--ms-text-2);
  white-space: nowrap;
  cursor: help;
}
.ms-nav__allowance strong { color: var(--ms-navy-900); }

.ms-nav__login {
  color: var(--ms-navy-900);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ms-nav__actions .ms-btn-primary { white-space: nowrap; }
.ms-nav__login:hover { color: var(--ms-teal-700); }

/* Hamburger — three plain rules, no icon font. */
.ms-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  cursor: pointer;
}
.ms-nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--ms-navy-900);
  border-radius: 2px;
}

.ms-nav__mobile { display: none; border-top: 1px solid var(--ms-border); }
.ms-nav__mobile.is-open { display: block; }
.ms-nav__mobile ul { list-style: none; margin: 0; padding: var(--ms-space) 0; }
.ms-nav__mobile li { padding: 0 calc(var(--ms-space) * 1.5); }
.ms-nav__mobile a {
  display: block;
  padding: .7rem 0;
  color: var(--ms-navy-900);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--ms-border);
}
.ms-nav__mobile li:last-child a { border-bottom: none; }
.ms-nav__mobile .ms-btn-primary,
.ms .ms-nav__mobile a.ms-btn-primary {
  display: block;
  margin: var(--ms-space) 0 .5rem;
  color: #FFFFFF;
  border-bottom: none;
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.ms-hero { padding-block: calc(var(--ms-space) * 5.5); background: var(--ms-bg); }
.ms-hero h1 { max-width: 18ch; }
.ms-hero .ms-lede { margin-bottom: calc(var(--ms-space) * 2); }
.ms-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ms-space); }
/* From 1024px up the hero column is wide enough for both CTAs, so keep
   them side by side rather than letting the pair wrap awkwardly. Below
   that they wrap, and below 560px they go full-width stacked. */
@media (min-width: 1024px) {
  .ms-hero__actions { flex-wrap: nowrap; }
}
.ms-hero__note { margin-top: 1.1rem; font-size: .92rem; color: var(--ms-text-2); }

/* ---------------------------------------------------------------
   DOCUMENT PREVIEWS — product proof, the main imagery
   --------------------------------------------------------------- */
.ms-doc {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-bg);
  overflow: hidden;
}
.ms-doc img { display: block; width: 100%; height: auto; }

.ms-doc--shadow { box-shadow: var(--ms-shadow); }

/* Stacked/rotated arrangement for hero depth. */
.ms-doc-stack { position: relative; padding-bottom: 8%; }
.ms-doc-stack .ms-doc { box-shadow: var(--ms-shadow); }
.ms-doc-stack__back {
  position: absolute;
  top: 6%;
  left: 10%;
  width: 74%;
  transform: rotate(-4deg);
  opacity: .92;
  z-index: 1;
}
.ms-doc-stack__front {
  position: relative;
  width: 84%;
  margin-left: auto;
  transform: rotate(2deg);
  z-index: 2;
}

.ms-doc-caption {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--ms-text-2);
  text-align: center;
}

/* ---------------------------------------------------------------
   TRUST / AUTHOR BLOCK
   --------------------------------------------------------------- */
.ms-author {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: calc(var(--ms-space) * 2);
  align-items: start;
}
/* (0,2,0): the base image rule's `height: auto` was turning this into a
   160x213 oval instead of a 160x160 circle. */
.ms .ms-author__photo {
  width: 160px;
  height: 160px;
  min-height: 160px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--ms-border);
  flex: 0 0 auto;
}
.ms-author__name { font-size: 1.15rem; font-weight: 600;
                   color: var(--ms-navy-900); margin: 0 0 .15rem; }
.ms-author__role { font-size: .9rem; color: var(--ms-text-2);
                   margin: 0 0 1rem; }

/* ---------------------------------------------------------------
   FORMS
   --------------------------------------------------------------- */
.ms-field { margin-bottom: calc(var(--ms-space) * 1.1); }
.ms-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ms-navy-900);
  margin-bottom: .35rem;
}
.ms-input,
.ms-select,
.ms-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ms-text);
  background: var(--ms-bg);
  padding: .7rem .85rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
}
.ms-input:focus,
.ms-select:focus,
.ms-textarea:focus {
  outline: none;
  border-color: var(--ms-teal-600);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .18);
}
.ms-help { font-size: .85rem; color: var(--ms-text-2); margin-top: .35rem; }

/* ---------------------------------------------------------------
   AUTH / FORM CARD  — login, signup, password, verification
   --------------------------------------------------------------- */
.ms-auth {
  display: flex;
  justify-content: center;
  padding-block: calc(var(--ms-space) * 4);
  background: var(--ms-bg-alt);
  min-height: 60vh;
}
.ms-auth__card {
  width: 100%;
  max-width: 480px;
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: calc(var(--ms-space) * 2.25);
}
.ms-auth__card--wide { max-width: 620px; }
.ms-auth__card h1 { font-size: 1.6rem; margin-bottom: .4rem; }
.ms-auth__sub {
  color: var(--ms-text-2);
  margin-bottom: calc(var(--ms-space) * 1.5);
}
.ms-auth__actions { margin-top: calc(var(--ms-space) * 1.5); }
.ms-auth__actions .ms-btn-primary { width: 100%; }
.ms-auth__alt {
  margin-top: calc(var(--ms-space) * 1.25);
  padding-top: var(--ms-space);
  border-top: 1px solid var(--ms-border);
  font-size: .92rem;
  color: var(--ms-text-2);
  text-align: center;
}
.ms-auth__steps {
  display: flex;
  gap: .5rem;
  margin-bottom: calc(var(--ms-space) * 1.5);
  font-size: .78rem;
  color: var(--ms-text-2);
}
.ms-auth__steps span { display: flex; align-items: center; gap: .4rem; }
.ms-auth__steps span::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ms-border);
}
.ms-auth__steps span.is-done::before { background: var(--ms-teal-600); }
.ms-auth__steps span.is-current { color: var(--ms-navy-900); font-weight: 600; }
.ms-auth__steps span.is-current::before { background: var(--ms-teal-600); }

/* Two-up field row inside an auth card */
.ms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-space); }
@media (max-width: 560px) { .ms-field-row { grid-template-columns: 1fr; } }

/* Code entry */
.ms-code-input {
  font-size: 1.6rem;
  letter-spacing: .5em;
  text-align: center;
  font-weight: 600;
}

/* ---------------------------------------------------------------
   FLASH MESSAGES
   --------------------------------------------------------------- */
.ms-flashes { margin-bottom: calc(var(--ms-space) * 1.25); }
.ms-flash {
  padding: .75rem 1rem;
  border-radius: var(--ms-radius-sm);
  border: 1px solid var(--ms-border);
  background: var(--ms-bg-alt);
  color: var(--ms-text);
  font-size: .95rem;
  margin-bottom: .6rem;
}
.ms-flash--success { border-color: rgba(13,148,136,.35); background: var(--ms-teal-050);
                     color: var(--ms-teal-700); }
.ms-flash--danger  { border-color: #FCA5A5; background: #FEF2F2; color: #991B1B; }
.ms-flash--warning { border-color: #FCD34D; background: #FFFBEB; color: #92400E; }
.ms-flash--info    { border-color: var(--ms-border); background: var(--ms-bg-alt);
                     color: var(--ms-text-2); }

/* ---------------------------------------------------------------
   PROSE  — long-form legal, policy and article body text
   --------------------------------------------------------------- */
.ms-prose { max-width: 76ch; }
.ms-prose h2 {
  font-size: 1.35rem;
  margin-top: calc(var(--ms-space) * 2.25);
  margin-bottom: .6rem;
}
.ms-prose h3 { font-size: 1.1rem; margin-top: calc(var(--ms-space) * 1.5); }
.ms-prose p,
.ms-prose li { color: var(--ms-text-2); }
.ms-prose ul,
.ms-prose ol { padding-left: 1.35rem; margin: 0 0 1.1em; }
.ms-prose li { margin-bottom: .45rem; }
.ms-prose strong { color: var(--ms-text); }
.ms-prose a { color: var(--ms-teal-700); text-decoration: underline; }
.ms-prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.ms-prose th, .ms-prose td {
  border: 1px solid var(--ms-border);
  padding: .6rem .75rem;
  text-align: left;
  font-size: .95rem;
}
.ms-prose th { background: var(--ms-bg-alt); color: var(--ms-navy-900); }
.ms-prose hr { border: 0; border-top: 1px solid var(--ms-border); margin: 2rem 0; }

/* ---------------------------------------------------------------
   FAQ / DISCLOSURE LIST
   --------------------------------------------------------------- */
.ms-faq { max-width: 76ch; }
.ms-faq__item {
  border-bottom: 1px solid var(--ms-border);
  padding: calc(var(--ms-space) * 1.1) 0;
}
.ms-faq__q {
  font-weight: 600;
  color: var(--ms-navy-900);
  font-size: 1.05rem;
  margin: 0 0 .5rem;
}
.ms-faq__a { color: var(--ms-text-2); margin: 0; }

/* ---------------------------------------------------------------
   ARTICLE BODY  — wraps legacy blog markup without editing it
   --------------------------------------------------------------- */
.ms-article {
  max-width: 74ch;
  margin: 0 auto;
  padding-block: calc(var(--ms-space) * 3);
  padding-inline: calc(var(--ms-space) * 1.5);
}
.ms-article h1 { font-size: 2.1rem; margin-bottom: .75rem; }
.ms-article h2 { font-size: 1.45rem; margin-top: calc(var(--ms-space) * 2.25); }
.ms-article h3 { font-size: 1.15rem; margin-top: calc(var(--ms-space) * 1.75); }
.ms-article p,
.ms-article li { color: var(--ms-text-2); font-size: 1.05rem; line-height: 1.7; }
.ms-article ul, .ms-article ol { padding-left: 1.35rem; margin: 0 0 1.2em; }
.ms-article li { margin-bottom: .5rem; }
.ms-article strong { color: var(--ms-text); }
.ms-article a { color: var(--ms-teal-700); text-decoration: underline; }
.ms-article img {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  margin: 1.5rem 0;
}
.ms-article blockquote {
  margin: 1.5rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--ms-teal-600);
  color: var(--ms-text-2);
}
.ms-article table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.ms-article th, .ms-article td {
  border: 1px solid var(--ms-border); padding: .6rem .75rem;
  text-align: left; font-size: .95rem;
}
.ms-article th { background: var(--ms-bg-alt); color: var(--ms-navy-900); }
@media (max-width: 560px) {
  .ms-article { padding-inline: var(--ms-space); }
  .ms-article h1 { font-size: 1.7rem; }
}

/* Article footer CTA */
.ms-article-cta {
  max-width: 74ch;
  margin: 0 auto calc(var(--ms-space) * 3);
  padding: calc(var(--ms-space) * 1.75);
  background: var(--ms-teal-050);
  border: 1px solid rgba(13, 148, 136, .25);
  border-radius: var(--ms-radius);
  text-align: center;
}
.ms-article-cta h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.ms-article-cta p { color: var(--ms-text-2); margin-bottom: 1.25rem; }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.ms-footer {
  background: var(--ms-navy-900);
  color: rgba(255, 255, 255, .7);
  padding-block: calc(var(--ms-space) * 3.5);
  font-size: .95rem;
}
.ms-footer h4 {
  color: #FFFFFF;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.ms-footer ul { list-style: none; margin: 0; padding: 0; }
.ms-footer li { margin-bottom: .55rem; }
.ms-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.ms-footer a:hover { color: #FFFFFF; text-decoration: underline; }

.ms-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--ms-space) * 2);
}
.ms-footer__bottom {
  margin-top: calc(var(--ms-space) * 2.5);
  padding-top: calc(var(--ms-space) * 1.5);
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
}
.ms-footer__bottom p { margin: 0 0 .5rem; }
.ms-footer__bottom p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   ACCESSIBILITY HELPERS
   --------------------------------------------------------------- */
.ms-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ms-navy-900);
  color: #FFFFFF;
  padding: .75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 var(--ms-radius-sm) 0;
}
.ms-skip-link:focus {
  left: 0;
  color: #FFFFFF;
  text-decoration: none;
}

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

/* ---------------------------------------------------------------
   RESPONSIVE — verified at 1280 / 768 / 375
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .ms-nav__links,
  .ms-nav__actions { display: none; }
  .ms-nav__toggle  { display: block; }

  .ms-grid--split,
  .ms-grid--3,
  .ms-grid--2 { grid-template-columns: 1fr; }

  .ms-hero { padding-block: calc(var(--ms-space) * 3.5); }
  .ms h1 { font-size: 2.1rem; }
  .ms h2 { font-size: 1.55rem; }

  .ms-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  body.ms { font-size: 1rem; }
  .ms h1 { font-size: 1.8rem; }
  .ms-lede { font-size: 1.05rem; }

  .ms-container { padding-inline: var(--ms-space); }
  .ms-section { padding-block: calc(var(--ms-space) * 3); }
  .ms-card { padding: calc(var(--ms-space) * 1.25); }

  .ms-hero__actions { flex-direction: column; align-items: stretch; }
  .ms-hero__actions .ms-btn-primary,
  .ms-hero__actions .ms-btn-secondary { width: 100%; }

  /* Stacked previews overlap badly on small screens — go flat. */
  .ms-doc-stack { padding-bottom: 0; }
  .ms-doc-stack__back { display: none; }
  .ms-doc-stack__front { width: 100%; margin: 0; transform: none; }

  .ms-author { grid-template-columns: 1fr; gap: var(--ms-space); }
  .ms-author__photo { width: 140px; height: 140px; }

  .ms-footer__cols { grid-template-columns: 1fr; gap: calc(var(--ms-space) * 1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .ms *, .ms *::before, .ms *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .ms-card--hover:hover { transform: none; }
}

/* ===============================================================
   INTAKE WIZARD — Psychosocial Risk Assessment
   Four steps: workplace, logo, hazards, review.
   =============================================================== */
.ms-wiz { max-width: 900px; }
.ms-wiz__head { margin-bottom: calc(var(--ms-space) * 1.5); }
.ms-wiz__head h1 { font-size: 1.9rem; margin: .25rem 0 .4rem; }

/* Stepper -------------------------------------------------------- */
.ms-wiz__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  list-style: none;
  margin: 0 0 calc(var(--ms-space) * 2);
  padding: 0;
  counter-reset: wizstep;
}
.ms-wiz__steps li {
  counter-increment: wizstep;
  font-size: .82rem;
  color: var(--ms-text-2);
  padding-top: .6rem;
  border-top: 3px solid var(--ms-border);
  display: flex;
  align-items: baseline;
  gap: .45rem;
}
.ms-wiz__steps li::before {
  content: counter(wizstep);
  font-weight: 700;
  font-size: .78rem;
  color: var(--ms-text-2);
}
.ms-wiz__steps li.is-done { border-top-color: var(--ms-teal-600); }
.ms-wiz__steps li.is-current {
  border-top-color: var(--ms-teal-600);
  color: var(--ms-navy-900);
  font-weight: 600;
}
.ms-wiz__steps li.is-current::before,
.ms-wiz__steps li.is-done::before { color: var(--ms-teal-700); }

/* Panels --------------------------------------------------------- */
.ms-wiz__panel h2 { font-size: 1.3rem; margin: 0 0 .3rem; }
.ms-wiz__panel > p.ms-lede { font-size: 1rem; margin-bottom: calc(var(--ms-space) * 1.5); }

.ms-wiz__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ms-space);
  margin-top: calc(var(--ms-space) * 2);
  padding-top: calc(var(--ms-space) * 1.25);
  border-top: 1px solid var(--ms-border);
}
.ms-wiz__bar .ms-muted { font-size: .85rem; margin: 0; }
.ms-wiz__save {
  font-size: .8rem;
  color: var(--ms-text-2);
  min-height: 1.2em;
}

/* Selectable tiles (industry) ------------------------------------ */
.ms-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.ms-tile {
  position: relative;
  display: block;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1rem;
  cursor: pointer;
  background: var(--ms-bg);
}
.ms-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ms-tile__name { display: block; font-weight: 600; color: var(--ms-navy-900); }
.ms-tile__desc { display: block; font-size: .82rem; color: var(--ms-text-2); margin-top: .2rem; }
.ms-tile:hover { border-color: var(--ms-navy-700); }
.ms-tile:has(input:checked) {
  border-color: var(--ms-teal-600);
  box-shadow: inset 0 0 0 1px var(--ms-teal-600);
  background: var(--ms-teal-050);
}
.ms-tile:has(input:focus-visible) { outline: 3px solid rgba(13,148,136,.35); outline-offset: 2px; }

/* Checkbox pills (work arrangements) ----------------------------- */
.ms-checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.ms-check {
  position: relative;
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  padding: .5rem .95rem;
  font-size: .9rem;
  cursor: pointer;
  background: var(--ms-bg);
}
.ms-check input { position: absolute; opacity: 0; pointer-events: none; }
.ms-check:has(input:checked) {
  border-color: var(--ms-teal-600);
  background: var(--ms-teal-050);
  color: var(--ms-navy-900);
  font-weight: 600;
}
.ms-check:has(input:focus-visible) { outline: 3px solid rgba(13,148,136,.35); outline-offset: 2px; }

/* Logo step ------------------------------------------------------ */
.ms-logo-panel { display: grid; grid-template-columns: 200px 1fr; gap: calc(var(--ms-space) * 1.5); align-items: start; }
.ms-logo-preview {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-bg-alt);
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ms-logo-preview img { max-width: 100%; max-height: 110px; }
.ms-logo-preview span { font-size: .85rem; color: var(--ms-text-2); text-align: center; }
.ms-logo-drop {
  border: 2px dashed var(--ms-border);
  border-radius: var(--ms-radius);
  padding: calc(var(--ms-space) * 1.5);
  text-align: center;
}
.ms-logo-drop.is-over { border-color: var(--ms-teal-600); background: var(--ms-teal-050); }

/* Hazard category cards ------------------------------------------ */
.ms-haz-list { display: grid; gap: .6rem; }
.ms-haz {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-bg);
  overflow: hidden;
}
.ms-haz.is-selected { border-color: var(--ms-teal-600); }
.ms-haz__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .9rem 1rem;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ms-text);
}
.ms-haz__head:focus-visible { outline: 3px solid rgba(13,148,136,.35); outline-offset: -3px; }
.ms-haz__icon { flex: none; width: 30px; height: 30px; }
.ms-haz__icon img { width: 30px; height: 30px; display: block; }
.ms-haz__text { flex: 1 1 auto; min-width: 0; }
.ms-haz__name { display: block; font-weight: 600; color: var(--ms-navy-900); }
.ms-haz__desc { display: block; font-size: .82rem; color: var(--ms-text-2); }
.ms-haz__count {
  flex: none;
  font-size: .78rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--ms-bg-alt);
  color: var(--ms-text-2);
  white-space: nowrap;
}
.ms-haz.is-selected .ms-haz__count { background: var(--ms-teal-050); color: var(--ms-teal-700); }
.ms-haz__chev { flex: none; color: var(--ms-text-2); transition: transform .15s ease; }
.ms-haz[open] .ms-haz__chev,
.ms-haz.is-open .ms-haz__chev { transform: rotate(180deg); }
.ms-haz__body { padding: 0 1rem 1rem; border-top: 1px solid var(--ms-border); }

/* Scenario rows -------------------------------------------------- */
.ms-scn {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: .7rem;
  align-items: start;
  padding: .8rem 0;
  border-bottom: 1px solid var(--ms-border);
}
.ms-scn:last-child { border-bottom: 0; }
.ms-scn input[type="checkbox"] { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--ms-teal-600); }
.ms-scn__text { font-size: .95rem; line-height: 1.45; }
.ms-scn__ctrls { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ms-scn__ctrls select {
  font-family: inherit;
  font-size: .82rem;
  padding: .3rem .45rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-bg);
  color: var(--ms-text);
}
.ms-scn__ctrls label { font-size: .72rem; color: var(--ms-text-2); }
.ms-scn:not(.is-on) .ms-scn__text { color: var(--ms-text-2); }
.ms-scn:not(.is-on) .ms-scn__ctrls { opacity: .45; }

/* Risk band pill ------------------------------------------------- */
.ms-band {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .22rem .5rem;
  border-radius: var(--ms-radius-sm);
  min-width: 72px;
  text-align: center;
}
.ms-band.is-L { background: #C7E6CE; color: #14361F; }
.ms-band.is-M { background: #FBE7A2; color: #4A3708; }
.ms-band.is-H { background: #F5B98A; color: #5A2708; }
.ms-band.is-E { background: #E08585; color: #4A0F0F; }

/* Review step ---------------------------------------------------- */
.ms-review { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); }
.ms-review__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--ms-border);
  font-size: .93rem;
}
.ms-review__row:last-child { border-bottom: 0; }
.ms-review__row dt { color: var(--ms-text-2); margin: 0; }
.ms-review__row dd { margin: 0; color: var(--ms-navy-900); }
.ms-review__cats { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ms-review__cats li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.ms-review__cats .ms-muted { margin: 0; }

.ms-callout {
  border: 1px solid var(--ms-border);
  border-left: 3px solid var(--ms-teal-600);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-bg-alt);
  padding: .9rem 1.1rem;
  font-size: .92rem;
}
.ms-callout--warn { border-left-color: #B45309; }
.ms-callout p:last-child { margin-bottom: 0; }

/* Progress ------------------------------------------------------- */
.ms-progress { max-width: 620px; margin: 0 auto; text-align: center; }
.ms-progress__track {
  height: 8px;
  border-radius: 999px;
  background: var(--ms-border);
  overflow: hidden;
  margin: calc(var(--ms-space) * 1.5) 0 .75rem;
}
.ms-progress__fill {
  height: 100%;
  width: 0;
  background: var(--ms-teal-600);
  border-radius: 999px;
  transition: width .4s ease;
}
.ms-progress__stage { font-size: .92rem; color: var(--ms-text-2); min-height: 1.4em; }
.ms-progress__list {
  list-style: none;
  margin: calc(var(--ms-space) * 1.5) 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: .3rem;
  max-height: 260px;
  overflow-y: auto;
}
.ms-progress__list li {
  font-size: .86rem;
  color: var(--ms-text-2);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ms-progress__list li.is-done { color: var(--ms-navy-900); }
.ms-progress__list li::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ms-border);
  flex: none;
}
.ms-progress__list li.is-done::before { background: var(--ms-teal-600); }

@media (max-width: 760px) {
  .ms-tiles { grid-template-columns: 1fr 1fr; }
  .ms-logo-panel { grid-template-columns: 1fr; }
  .ms-review__row { grid-template-columns: 1fr; gap: .15rem; }
}
@media (max-width: 560px) {
  .ms-wiz__head h1 { font-size: 1.5rem; }
  .ms-tiles { grid-template-columns: 1fr; }
  .ms-wiz__steps { grid-template-columns: repeat(4, 1fr); gap: .3rem; }
  .ms-wiz__steps li { font-size: 0; gap: 0; padding-top: .5rem; }
  .ms-wiz__steps li::before { font-size: .78rem; }
  .ms-scn { grid-template-columns: 22px 1fr; }
  .ms-scn__ctrls { grid-column: 2; justify-content: flex-start; }
  .ms-wiz__bar { flex-wrap: wrap; }
  .ms-haz__desc { display: none; }
}

/* ===============================================================
   HUB — the signed-in workspace at /psychological_safety
   =============================================================== */
.ms-hub__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--ms-space) * 2);
  align-items: end;
}
.ms-hub__head h1 { font-size: 1.9rem; margin: .25rem 0 .3rem; }
.ms-hub__head .ms-lede { margin: 0; font-size: 1rem; }

.ms-stats { display: flex; gap: 2rem; margin: 0; }
.ms-stat { text-align: right; }
.ms-stat dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ms-text-2);
  margin-bottom: .15rem;
}
.ms-stat dd {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ms-navy-900);
}
.ms-stat dd.ms-stat--text { font-size: 1rem; font-weight: 600; padding-top: .55rem; }

.ms-hub__h3 { font-size: 1.15rem; margin: 0 0 var(--ms-space); }
.ms-hub__card { display: flex; flex-direction: column; }
.ms-hub__card h3 { margin-top: .35rem; }
.ms-hub__card p { flex: 0 0 auto; }
.ms-hub__meta {
  font-size: .84rem;
  color: var(--ms-text-2);
  margin-top: auto;
  padding-top: .35rem;
}
.ms-hub__card .ms-btn-primary,
.ms-hub__card .ms-btn-secondary { align-self: flex-start; margin-top: .9rem; }

.ms-tool-strip { display: flex; flex-wrap: wrap; gap: .6rem; }
.ms-tool {
  display: inline-block;
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  padding: .55rem 1.05rem;
  font-size: .92rem;
  color: var(--ms-navy-900);
  text-decoration: none;
  background: var(--ms-bg);
}
.ms-tool:hover,
.ms-tool:focus-visible {
  border-color: var(--ms-teal-600);
  background: var(--ms-teal-050);
  color: var(--ms-teal-700);
}

.ms-hub__recent-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ms-space);
  margin-bottom: var(--ms-space);
}
.ms-hub__recent-head h2 { margin: 0; }
.ms-hub__recent-head a { font-size: .92rem; }

.ms-doclist { list-style: none; margin: 0; padding: 0;
              border: 1px solid var(--ms-border); border-radius: var(--ms-radius); }
.ms-doclist__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--ms-border);
}
.ms-doclist__row:last-child { border-bottom: 0; }
.ms-doclist__name { font-weight: 600; color: var(--ms-navy-900); }
.ms-doclist__date { font-size: .87rem; color: var(--ms-text-2); }
.ms-doclist__link { font-size: .9rem; }

@media (max-width: 760px) {
  .ms-hub__head { grid-template-columns: 1fr; align-items: start; }
  .ms-stats { justify-content: flex-start; gap: 1.6rem; }
  .ms-stat { text-align: left; }
  .ms-stat dd { font-size: 1.5rem; }
  .ms-doclist__row { grid-template-columns: 1fr auto; }
  .ms-doclist__date { grid-row: 2; grid-column: 1; }
}

/* The flagship card is a flex column, so its badge would otherwise stretch
   to the full card width. */
.ms-hub__card .ms-badge { align-self: flex-start; }

/* ===============================================================
   PROCEDURE WIZARD — component toggles and the role list
   =============================================================== */
.ms-comp__row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem 1rem;
}
.ms-comp__toggle { display: flex; align-items: center; }
.ms-comp__toggle input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--ms-teal-600);
}

.ms-rolelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ms-role {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: .85rem 1rem;
  background: var(--ms-bg);
}
.ms-role__head { color: var(--ms-navy-900); }
.ms-role__duty { margin: .2rem 0 0; font-size: .88rem; color: var(--ms-text-2); }
.ms-role__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: .7rem;
}
/* A class selector beats the user-agent [hidden] rule, so `display: grid`
   above would keep these visible while the element carries `hidden`. */
.ms-role__fields[hidden] { display: none; }
@media (max-width: 560px) {
  .ms-role__fields { grid-template-columns: 1fr; }
  .ms-comp__row { gap: .6rem; }
}

/* ===============================================================
   DOCUMENT STATE CARDS — the hub grid
   Four states, visually distinct at a glance:
     available   full colour, leads the page
     in_progress teal accent bar
     created     quiet, but never disabled
     not_owned   muted, with a price
   =============================================================== */
.ms-doccard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.25rem;
  background: var(--ms-bg);
}
.ms-doccard__head { display: flex; align-items: flex-start; gap: .6rem; }
.ms-doccard h3 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.ms-doccard p { margin: .45rem 0 0; font-size: .92rem; color: var(--ms-text-2); }
.ms-doccard__foot { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.ms-doccard__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ms-doccard__tick {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ms-teal-600);
  color: #fff;
}

/* available — the ones we want clicked */
.ms-doccard.is-available {
  border-color: var(--ms-navy-900);
  box-shadow: var(--ms-shadow);
}
.ms-doccard.is-available h3 { color: var(--ms-navy-900); }

/* in progress — same weight, teal edge */
.ms-doccard.is-in_progress {
  border-color: var(--ms-teal-600);
  box-shadow: inset 3px 0 0 var(--ms-teal-600);
}

/* created — quiet, still fully interactive */
.ms-doccard.is-created { background: var(--ms-bg-alt); }
.ms-doccard.is-created h3 { color: var(--ms-text-2); font-weight: 600; }
.ms-doccard.is-created p { color: var(--ms-text-2); }

/* not owned — clearly different from created: no tick, a price, muted */
.ms-doccard.is-not_owned { border-style: dashed; }
.ms-doccard.is-not_owned h3,
.ms-doccard.is-not_owned p { color: var(--ms-text-2); }
.ms-doccard.is-not_owned .ms-doccard__body { opacity: .72; }

/* state chips */
.ms-chip {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .28rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--ms-border);
  color: var(--ms-text-2);
  background: var(--ms-bg);
}
.ms-chip.is-ok { border-color: var(--ms-teal-600); color: var(--ms-teal-700); background: var(--ms-teal-050); }
.ms-chip.is-progress { border-color: var(--ms-teal-600); color: var(--ms-teal-700); }
.ms-chip.is-done { border-color: var(--ms-border); color: var(--ms-text-2); }
.ms-chip.is-locked { border-color: var(--ms-border); color: var(--ms-text-2); background: var(--ms-bg-alt); }

/* the position line inside a wizard */
.ms-wiz__chip {
  display: inline-block;
  font-size: .85rem;
  padding: .4rem .8rem;
  border-radius: var(--ms-radius-sm);
  background: var(--ms-teal-050);
  color: var(--ms-teal-700);
  border: 1px solid var(--ms-teal-600);
  margin-bottom: calc(var(--ms-space) * 1.25);
}
.ms-wiz__chip.is-warn {
  background: var(--ms-bg-alt);
  color: #7A4A08;
  border-color: #B45309;
}

@media (max-width: 560px) {
  .ms-doccard__actions { width: 100%; }
  .ms-doccard__actions .ms-btn-secondary { flex: 1 1 auto; text-align: center; }
}

/* ---------------------------------------------------------------
   SAMPLE PREVIEW — hero trigger and modal viewer
   ---------------------------------------------------------------
   View-only. The pages are watermarked images; there is no PDF
   behind them and nothing here downloads anything. Used by
   js/ms_preview.js on the homepage hero.
   --------------------------------------------------------------- */

/* The whole document stack is one button, so it needs the browser's
   button styling stripped and the block layout of the div it replaced. */
.ms-preview-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: zoom-in;
}
.ms-preview-trigger .ms-doc-stack,
.ms-preview-trigger .ms-doc,
.ms-preview-trigger picture { display: block; }
.ms-preview-trigger .ms-doc-stack { transition: transform .18s ease; }
/* The back page here is the risk matrix, and the point of showing it is that
   its heat map is visible. The shared stack offsets bury all but a sliver, so
   widen the reveal -- only for this trigger; the seven landing pages that use
   .ms-doc-stack keep their own arrangement. */
.ms-preview-trigger .ms-doc-stack__back { top: 4%; left: 0; width: 70%; }
.ms-preview-trigger .ms-doc-stack__front { width: 74%; }
.ms-preview-trigger .ms-doc-stack { padding-bottom: 3%; }
/* Below 560px the shared rules drop the back page and go full width. Both of
   those are single-class selectors, so the two-class rules above -- including
   the display:block that makes these spans behave like the divs they replaced
   -- would outrank them. Restate them at the same weight. */
@media (max-width: 560px) {
  .ms-preview-trigger .ms-doc-stack__back { display: none; }
  .ms-preview-trigger .ms-doc-stack__front { width: 100%; }
}
.ms-preview-trigger:hover .ms-doc-stack,
.ms-preview-trigger:focus-visible .ms-doc-stack { transform: translateY(-3px); }
.ms-preview-trigger:focus { outline: none; }
.ms-preview-trigger:focus-visible {
  outline: 3px solid var(--ms-teal-600);
  outline-offset: 6px;
  border-radius: var(--ms-radius);
}

.ms-preview-trigger__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem;
  padding: .45rem .95rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ms-navy-900);
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  box-shadow: var(--ms-shadow);
}
.ms-preview-trigger__chip svg { width: 16px; height: 16px; flex: none; }
.ms-preview-trigger:hover .ms-preview-trigger__chip,
.ms-preview-trigger:focus-visible .ms-preview-trigger__chip {
  border-color: var(--ms-teal-600);
  color: var(--ms-teal-700);
}

/* --- the viewer ------------------------------------------------ */
.ms-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.5rem, 3vw, 2rem);
}
/* A class selector beats the user-agent [hidden] rule, so restate it. */
.ms-preview[hidden] { display: none; }

.ms-preview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 36, 64, .82);
}

.ms-preview__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(940px, 100%);
  max-height: 100%;
  background: var(--ms-bg);
  border-radius: var(--ms-radius);
  box-shadow: 0 24px 60px rgba(15, 36, 64, .35);
  overflow: hidden;
}

.ms-preview__bar {
  display: flex;
  align-items: center;
  gap: var(--ms-space);
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--ms-border);
}
.ms-preview__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ms-navy-900);
}
.ms-preview__counter {
  margin: 0 0 0 auto;
  font-size: .9rem;
  color: var(--ms-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ms-preview__close,
.ms-preview__nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  background: var(--ms-bg);
  color: var(--ms-navy-900);
  cursor: pointer;
}
.ms-preview__close { width: 36px; height: 36px; }
.ms-preview__close:hover,
.ms-preview__nav:hover:not(:disabled) {
  border-color: var(--ms-teal-600);
  color: var(--ms-teal-700);
}
.ms-preview__nav:disabled { opacity: .35; cursor: default; }
.ms-preview__close svg { width: 16px; height: 16px; }
.ms-preview__nav svg { width: 18px; height: 18px; }

.ms-preview__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem;
  overflow-y: auto;
  background: var(--ms-bg-alt);
  touch-action: pan-y;
}

.ms-preview__figure {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}
.ms-preview__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 68vh;
  margin: 0 auto;
  border: 1px solid var(--ms-border);
  background: var(--ms-bg);
  box-shadow: var(--ms-shadow);
}
.ms-preview__caption {
  margin-top: .8rem;
  font-size: .95rem;
  color: var(--ms-text-2);
}

.ms-preview__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem var(--ms-space);
  padding: .85rem 1rem;
  border-top: 1px solid var(--ms-border);
}
.ms-preview__note {
  margin: 0;
  flex: 1 1 240px;
  font-size: .9rem;
  color: var(--ms-text-2);
}
.ms-preview__actions {
  display: flex;
  align-items: center;
  gap: var(--ms-space);
  margin-left: auto;
}
.ms-preview__actions form { margin: 0; }
.ms-preview__link { font-size: .92rem; color: var(--ms-text-2); }

body.ms-noscroll { overflow: hidden; }

/* Narrow screens: the arrows would starve the page image of width, so
   float them over its edges and let swiping do most of the work. */
@media (max-width: 640px) {
  .ms-preview__stage { padding: .6rem; }
  .ms-preview__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255, 255, 255, .93);
  }
  .ms-preview__nav--prev { left: .4rem; }
  .ms-preview__nav--next { right: .4rem; }
  .ms-preview__img { max-height: 54vh; }
  .ms-preview__footer { flex-direction: column; align-items: stretch; text-align: center; }
  .ms-preview__note { flex: 0 0 auto; }
  .ms-preview__actions { margin-left: 0; flex-direction: column; align-items: stretch; }
  .ms-preview__actions .ms-btn-primary { width: 100%; }
  /* Four lines of title is most of a phone's bar. The counter says where you
     are; the title stays in the accessibility tree for aria-labelledby. */
  .ms-preview__title {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ms-preview__counter { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-preview-trigger .ms-doc-stack { transition: none; }
}

/* ===============================================================
   POLICY WIZARD — the twelve policy cards
   ---------------------------------------------------------------
   Two columns from 720px up, because twelve single-file rows is a
   long scroll on a laptop and the choice is easier to make when the
   set is visible at once.
   =============================================================== */
.ms-polgrid,
.ms-pickgrid { display: grid; gap: .6rem; }
@media (min-width: 720px) {
.ms-polgrid,
.ms-pickgrid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.ms-pol,
.ms-pick {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-bg);
  overflow: hidden;
}
.ms-pol.is-selected,
.ms-pick.is-selected {
  border-color: var(--ms-teal-600);
  background: var(--ms-teal-050);
}

.ms-pol__row,
.ms-pick__row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  cursor: pointer;
}
.ms-pol__toggle,
.ms-pick__toggle { display: flex; align-items: center; }
.ms-pol__toggle input[type="checkbox"],
.ms-pick__toggle input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--ms-teal-600);
}
.ms-pol__icon,
.ms-pick__icon { flex: none; width: 28px; height: 28px; }
.ms-pol__icon img,
.ms-pick__icon img { width: 28px; height: 28px; display: block; }
.ms-pol__text,
.ms-pick__text { flex: 1 1 auto; min-width: 0; }
.ms-pol__name,
.ms-pick__name {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ms-navy-900);
}
.ms-pol__badge,
.ms-pick__badge {
  display: inline-block;
  margin-top: .25rem;
  font-size: .72rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--ms-bg);
  border: 1px solid var(--ms-teal-600);
  color: var(--ms-teal-700);
}
/* The badge is a class selector, so restate [hidden] or it stays visible
   on every card whatever the industry. */
.ms-pol__badge[hidden],
.ms-pick__badge[hidden] { display: none; }

.ms-pol__more,
.ms-pick__more {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--ms-border);
  border-radius: 999px;
  background: var(--ms-bg);
  color: var(--ms-text-2);
  cursor: pointer;
}
.ms-pol__more:hover,
.ms-pick__more:hover { border-color: var(--ms-teal-600); color: var(--ms-teal-700); }
.ms-pol__more svg,
.ms-pick__more svg { width: 15px; height: 15px; transition: transform .15s ease; }
.ms-pol__more[aria-expanded="true"] svg,
.ms-pick__more[aria-expanded="true"] svg { transform: rotate(180deg); }

.ms-pol__covers,
.ms-pick__covers {
  padding: .1rem .9rem .9rem 3.4rem;
  border-top: 1px solid var(--ms-border);
}
.ms-pol__covers[hidden],
.ms-pick__covers[hidden] { display: none; }
.ms-pol__covers p,
.ms-pick__covers p {
  margin: .55rem 0 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--ms-text-2);
}


/* ---------------------------------------------------------------
   The pick card, generalised. `.ms-pol*` is the Policy Set's original
   name for it; `.ms-pick*` is the same card for every other product
   that asks "which of these do you need?". The Incident Response Plan
   is the first to use the generic name; the remaining bonus tools
   should too. Both names answer to the rules above.
   --------------------------------------------------------------- */

/* A one-line description under the name, for a card with no disclosure. */
.ms-pick__desc {
  display: block;
  margin-top: .2rem;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ms-text-2);
}

/* Compact variant: the section list on the review step, where the cards
   are confirmation rather than the main choice. */
.ms-pickgrid--compact .ms-pick__row { padding: .55rem .75rem; }
.ms-pickgrid--compact .ms-pick__name { font-size: .9rem; }

/* The optional contacts block. Two columns from 560px, because these are
   short paired fields (a name and its number) and pairing them reads
   better than a single long column. */
.ms-contacts { display: grid; gap: var(--ms-space); }
@media (min-width: 560px) {
  .ms-contacts { grid-template-columns: 1fr 1fr; }
}

/* A disclosure on a wizard step, used for "the N sections of your plan". */
.ms-wiz__sections > summary {
  font-size: .92rem;
  color: var(--ms-teal-700);
  cursor: pointer;
  padding: .3rem 0;
}
.ms-wiz__sections > summary:focus-visible {
  outline: 3px solid rgba(13, 148, 136, .35);
  outline-offset: 2px;
  border-radius: var(--ms-radius-sm);
}
.ms-wiz__sections[open] > summary { margin-bottom: .75rem; }

/* A text button that reads as a link. Used for the select-all row, where
   three real buttons would carry more weight than the choice deserves. */
.ms-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .9rem;
  color: var(--ms-teal-700);
  text-decoration: underline;
  cursor: pointer;
}
.ms-linkbtn:hover { color: var(--ms-teal-600); }

@media (max-width: 560px) {
  .ms-pol__row { gap: .6rem; padding: .75rem .7rem; }
  .ms-pol__covers { padding-left: 2.9rem; }
}

/* The list of individual policy files on the policy wizard's done panel. */
.ms-polfiles {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  text-align: left;
  background: var(--ms-bg-alt);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
}
.ms-polfiles p { margin: 0 0 .8rem; font-size: .95rem; }
.ms-polfiles__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ms-polfiles__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: .92rem;
}
.ms-polfiles__list li:last-child { border-bottom: 0; }
.ms-polfiles__list .ms-muted {
  margin: 0;
  font-size: .8rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .ms-polfiles__list li { flex-direction: column; gap: .1rem; }
}

/* ==========================================================
   SAVED DOCS
   ==========================================================
   The page lists documents, so its unit is a row rather than a card: a
   title, who it was written for, its version and its date, and then the
   things you can do to it as labelled buttons. The previous page used four
   colour-only icon squares, one of which was a GET link that deleted a paid
   document on a single click. */

/* --- small and destructive buttons ------------------------------ */
/* Small enough to sit four to a row, still a comfortable tap target. */
.ms-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: .4rem .9rem;
  font-size: .85rem;
}

.ms-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1.4rem;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid #B91C1C;
  border-radius: var(--ms-radius-sm);
  background: var(--ms-bg);
  color: #B91C1C;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.ms-btn-danger:hover,
.ms-btn-danger:focus-visible {
  background: #B91C1C;
  color: #FFFFFF;
  text-decoration: none;
}
.ms-btn-danger:focus-visible { outline: 3px solid rgba(185, 28, 28, .35);
                               outline-offset: 2px; }

/* --- the stack of type cards ------------------------------------ */
.ms-savedstack { display: grid; gap: calc(var(--ms-space) * 1.25); }

.ms-savedstack__more {
  margin-top: calc(var(--ms-space) * 1.5);
  font-size: .92rem;
  color: var(--ms-text-2);
}

.ms-savedcard {
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: calc(var(--ms-space) * 1.25) calc(var(--ms-space) * 1.5);
}

.ms-savedcard__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .35rem;
}
.ms-savedcard__head h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ms-navy-900);
}
.ms-savedcard__empty {
  margin: .5rem 0 0;
  font-size: .92rem;
  color: var(--ms-text-2);
}

/* --- one saved document ----------------------------------------- */
.ms-savedlist { list-style: none; margin: .5rem 0 0; padding: 0; }

.ms-savedrow {
  padding: .95rem 0;
  border-top: 1px solid var(--ms-border);
}
.ms-savedrow:first-child { border-top: 0; padding-top: .5rem; }

.ms-savedrow__head {
  display: flex;
  align-items: center;
  gap: var(--ms-space);
  flex-wrap: wrap;
}
.ms-savedrow__main { flex: 1 1 15rem; min-width: 0; }

.ms-savedrow__title {
  margin: 0;
  font-weight: 600;
  color: var(--ms-navy-900);
  line-height: 1.35;
}
.ms-savedrow__meta {
  margin: .2rem 0 0;
  font-size: .85rem;
  color: var(--ms-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .55rem;
}
.ms-savedrow__meta span + span::before {
  content: "\00b7";
  margin-right: .55rem;
  color: var(--ms-border);
}

.ms-savedrow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.ms-savedrow__form { margin: 0; }

.ms-savedrow.is-missing .ms-savedrow__title { color: var(--ms-text-2); }
.ms-savedrow__note {
  margin: .55rem 0 0;
  font-size: .85rem;
  color: var(--ms-text-2);
  max-width: 60ch;
}

/* --- the policies inside a set, and earlier versions ------------- */
.ms-savedrow__sub { margin-top: .6rem; }
.ms-savedrow__sub > summary {
  font-size: .87rem;
  color: var(--ms-teal-700);
  cursor: pointer;
  padding: .2rem 0;
}
.ms-savedrow__sub > summary:focus-visible {
  outline: 3px solid rgba(13, 148, 136, .35);
  outline-offset: 2px;
  border-radius: var(--ms-radius-sm);
}

.ms-savedsub {
  list-style: none;
  margin: .5rem 0 0;
  padding: .3rem 0 .3rem 1rem;
  border-left: 2px solid var(--ms-border);
  display: grid;
  gap: .1rem;
}
.ms-savedsub > li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .4rem 0;
  font-size: .9rem;
  border-bottom: 1px solid var(--ms-border);
}
.ms-savedsub > li:last-child { border-bottom: 0; }
.ms-savedsub > li > a { white-space: nowrap; font-size: .87rem; }

/* Earlier versions are the same row, indented under the current one. */
.ms-savedlist--versions {
  margin: .5rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--ms-border);
}
.ms-savedrow--nested { padding: .7rem 0; }
.ms-savedrow--nested .ms-savedrow__title { font-size: .92rem; }

/* --- the delete confirm ------------------------------------------ */
.ms-confirm {
  width: min(30rem, calc(100vw - 2rem));
  padding: calc(var(--ms-space) * 1.5);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  box-shadow: 0 24px 60px rgba(15, 36, 64, .35);
  color: var(--ms-text);
  background: var(--ms-bg);
}
.ms-confirm::backdrop { background: rgba(15, 36, 64, .6); }

.ms-confirm__title {
  margin: 0 0 .6rem;
  font-size: 1.15rem;
  color: var(--ms-navy-900);
}
.ms-confirm__doc {
  margin: 0 0 .5rem;
  font-weight: 600;
  color: var(--ms-navy-900);
  overflow-wrap: anywhere;
}
.ms-confirm__body {
  margin: 0 0 calc(var(--ms-space) * 1.25);
  font-size: .92rem;
  color: var(--ms-text-2);
}
.ms-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .6rem;
}

@media (max-width: 560px) {
  .ms-savedcard { padding: var(--ms-space); }
  .ms-savedrow__actions { width: 100%; }
  .ms-savedrow__actions > a,
  .ms-savedrow__actions > form,
  .ms-savedrow__actions > form > button { flex: 1 1 auto; width: 100%; }
  .ms-savedsub > li { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .ms-confirm__actions > button { flex: 1 1 auto; }
}

/* ==========================================================
   WELLBEING ACTION PLAN — the adjustment picker and the
   privacy note.
   ==========================================================
   This is the only wizard that asks about a person, so it is the only one
   that needs a place to say who will read the answer. The note sits inline
   beside the box, not in a footer and not behind a link, because that is
   the moment somebody needs to know. */

.ms-privacy {
  border: 1px solid var(--ms-teal-600);
  border-left-width: 4px;
  border-radius: var(--ms-radius);
  background: var(--ms-teal-050);
  padding: var(--ms-space) calc(var(--ms-space) * 1.25);
  margin-bottom: .75rem;
}
.ms-privacy p { margin: 0; font-size: .92rem; color: var(--ms-text); }
.ms-privacy strong { color: var(--ms-navy-900); }

/* The agreed adjustments, grouped by focus area. */
.ms-adjust { display: grid; gap: var(--ms-space); }

.ms-adjust__area {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: calc(var(--ms-space) * .75) var(--ms-space) var(--ms-space);
  margin: 0;
}
.ms-adjust__area legend {
  padding: 0 .4rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ms-navy-900);
}
.ms-adjust__custom { margin-top: .6rem; }

/* Stacked check rows: these are sentences, not chips, so they get a line
   each rather than wrapping into a cloud. */
.ms-checks--stack { display: grid; gap: .35rem; }
.ms-check--wide {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  line-height: 1.4;
  padding: .5rem .7rem;
}
.ms-check--wide input {
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 17px;
  height: 17px;
  flex: none;
  margin-right: .6rem;
  accent-color: var(--ms-teal-600);
}
.ms-check--wide span { flex: 1 1 auto; }

/* ==========================================================
   RETURN TO WORK — restrictions and the schedule builder
   ==========================================================
   The schedule is the only place in the product family where the customer
   builds a table rather than picking from one. It has to be editable on a
   phone, so the numeric cells are narrow and the whole table scrolls inside
   its own container rather than pushing the page sideways. */

.ms-restrict { display: grid; gap: .35rem; }
.ms-restrict__row {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  padding: .1rem .35rem .35rem;
}
.ms-restrict__row.is-on {
  border-color: var(--ms-teal-600);
  background: var(--ms-teal-050);
}
.ms-restrict__row .ms-check--wide { border: 0; background: none; width: 100%; }
.ms-restrict__detail { margin: 0 .5rem .4rem 2.5rem; width: calc(100% - 3rem); }
.ms-restrict__detail[hidden] { display: none; }

.ms-sched { overflow-x: auto; }
.ms-sched__table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  margin-bottom: .5rem;
}
.ms-sched__table th {
  text-align: left;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ms-navy-900);
  padding: .4rem .5rem;
  border-bottom: 2px solid var(--ms-border);
  white-space: nowrap;
}
.ms-sched__table td {
  padding: .3rem .35rem;
  border-bottom: 1px solid var(--ms-border);
  vertical-align: middle;
}
.ms-sched__table td:first-child {
  width: 3.2rem;
  color: var(--ms-text-2);
  text-align: center;
}
.ms-sched__table .ms-input { padding: .4rem .5rem; font-size: .9rem; }
.ms-sched__num { width: 4.5rem; text-align: center; }

/* ---------------------------------------------------------------
   COMPLETE YOUR PACK
   One quiet card on the hub, for customers who already bought a
   single core document. Deliberately not a promotional banner: the
   tinted band and one primary button, at the same weight as the
   callouts around it. A customer who has already paid us once should
   not be shouted at.
   --------------------------------------------------------------- */
.ms-upgrade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--ms-border);
  border-left: 4px solid var(--ms-teal-600);
  border-radius: var(--ms-radius);
  background: var(--ms-teal-050);
}
.ms-upgrade__text { flex: 1 1 24rem; min-width: 0; }
.ms-upgrade__contents {
  margin: 0 0 .35rem;
  color: var(--ms-text);
}
.ms-upgrade__price {
  margin: 0;
  font-weight: 600;
  color: var(--ms-navy-900);
}
.ms-upgrade__cta { flex: 0 0 auto; margin: 0; }
.ms-upgrade__cta .ms-btn-primary { white-space: nowrap; }

@media (max-width: 640px) {
  .ms-upgrade { flex-direction: column; align-items: stretch; }
  .ms-upgrade__cta .ms-btn-primary { width: 100%; }
}

/* ---------------------------------------------------------------
   ALSO IN THE PACK — the subordinate tier on the Documents page
   ---------------------------------------------------------------
   Everything here is one step quieter than .ms-card above it, and
   that is the whole design. Smaller type, a hairline border, no
   shadow, no hover lift, no price and no button. The section has a
   single secondary CTA.

   The test for any change to this block: does it make a bonus tool
   compete with a core card? If so it is wrong.
   --------------------------------------------------------------- */
.ms-tier__h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.ms-tier__sub {
  margin: 0;
  color: var(--ms-text-2);
  font-size: .96rem;
}
.ms-tier__lead {
  margin: calc(var(--ms-space) * 1.75) 0 .8rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ms-text-2);
}

.ms-tier__icon {
  flex: none;
  display: block;
  opacity: .55;          /* muted: these are not the products in front */
}

/* The Policy Manual: a named Pack component, so a shade more room than
   the six, and full width. Still no button. */
.ms-tier__manual {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-bg-alt);
}
.ms-tier__manual h3 {
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  color: var(--ms-navy-900);
}
.ms-tier__manual p {
  margin: 0;
  font-size: .92rem;
  color: var(--ms-text-2);
}

.ms-tier__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* The SAME gap as .ms-grid--3 above, deliberately. A narrower gap makes
     each tile WIDER than the core card sitting above it, which is the one
     way a quiet tile can still out-measure a product card. Matching the
     gap puts the tiles on the same column rhythm and never past it. */
  gap: calc(var(--ms-space) * 1.5);
  grid-template-columns: repeat(3, 1fr);
}
.ms-tier__tile {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-bg);
}
.ms-tier__tile-text { min-width: 0; }
.ms-tier__tile h3 {
  margin: 0 0 .25rem;
  font-size: .96rem;
  line-height: 1.35;
  color: var(--ms-navy-900);
}
.ms-tier__tile p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ms-text-2);
}
/* A name that has a landing page behind it is a plain text link, never a
   button — a button here would be a second CTA competing with the one
   below and with the core cards above. */
.ms-tier__manual h3 a,
.ms-tier__tile h3 a { color: inherit; text-decoration: underline; }
.ms-tier__manual h3 a:hover,
.ms-tier__tile h3 a:hover { color: var(--ms-teal-700); }

.ms-tier__foot {
  margin: calc(var(--ms-space) * 1.5) 0 0;
  font-size: .86rem;
  color: var(--ms-text-2);
}
.ms-tier__cta { margin: .9rem 0 0; }

@media (max-width: 900px) {
  .ms-tier__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ms-tier__grid { grid-template-columns: 1fr; }
  .ms-tier__cta .ms-btn-secondary { display: block; text-align: center; }
}

/* ---------------------------------------------------------------
   YOUR STATE — the jurisdiction block on product landing pages
   ---------------------------------------------------------------
   A quiet reference list, not a feature grid. It exists because the
   buyer searches for "SafeWork NSW" and "WorkSafe Victoria" and the
   site never said either. Deliberately lighter than .ms-card so it
   reads as product detail rather than as another offer.
   --------------------------------------------------------------- */
.ms-state-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(4, 1fr);
}
.ms-state {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-bg-alt);
}
.ms-state__name {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ms-navy-900);
}
.ms-state__reg {
  font-size: .86rem;
  color: var(--ms-teal-700);
}
.ms-state__act {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--ms-text-2);
}
.ms-state__note { margin-top: 1.25rem; max-width: 78ch; font-size: .9rem; }

@media (max-width: 900px) { .ms-state-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ms-state-grid { grid-template-columns: 1fr; } }