/*
 * ShiftMed shell CSS (SPEC.md 5.1, 5.5 and 10.3). Shell classes start with .smx-, so uploaded
 * content can't collide with them. Element defaults (headings, links, focus, box sizing) apply
 * to the whole page, uploaded content included, but are scoped with :where(.smx-body), which
 * adds no specificity: an uploaded stylesheet's own a {}, h1 {} or * {} rules always win.
 * tests/unit/shell-css.test.ts enforces both forms. Colors and font stacks come only from the
 * var(--sm-...) tokens in tokens.css, which the layout loads first.
 *
 * Fonts are self-hosted (assets/fonts, SIL OFL 1.1, see the OFL-*.txt files there) and load
 * from this origin only. The url()s are relative, so they resolve under the same content-hashed
 * /static/<hash>/ path as this file. Subsets and ranges match Google Fonts: the latin-ext file
 * downloads only when a page uses one of its characters.
 */

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-400-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-500-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-500-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* SemiBold 600: the access page hero's rotator and second headline (issue 350). */
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-600-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/*
 * Metric-matched fallbacks (docs/decisions/327-font-fallback-metrics.md). With font-display: swap
 * the page first shows a fallback font and then swaps in the brand font, and text that takes more
 * or fewer lines moves everything below it (layout shift). Each face below is a font already on
 * the device, scaled with size-adjust so a line of English text is as wide as in the brand font at
 * that weight, and with the brand font's own ascent, descent and line gap. The overrides are
 * divided by size-adjust because size-adjust scales them too. Headlines fall back to Arial Narrow
 * (the brand fallback), or Liberation Sans Narrow, which has the same widths; where neither is
 * installed, to Arial or Liberation Sans. Body text falls back to Arial or Liberation Sans.
 * Weights 600 and 700 use the bold faces (Barlow Semi Condensed 600: issue 350).
 * --sm-font-head and --sm-font-body (tokens.css) list the fallbacks right after the brand family.
 * Nothing here downloads: local() only reads fonts already on the device.
 */
@font-face {
  font-family: "Barlow Semi Condensed Fallback Narrow";
  font-style: normal;
  font-weight: 400;
  src:
    local("Arial Narrow"), local("ArialNarrow"), local("Liberation Sans Narrow"),
    local("LiberationSansNarrow");
  size-adjust: 105.7%;
  ascent-override: 94.61%;
  descent-override: 18.92%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Barlow Semi Condensed Fallback Narrow";
  font-style: normal;
  font-weight: 500;
  src:
    local("Arial Narrow"), local("ArialNarrow"), local("Liberation Sans Narrow"),
    local("LiberationSansNarrow");
  size-adjust: 107.5%;
  ascent-override: 93.02%;
  descent-override: 18.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Barlow Semi Condensed Fallback Narrow";
  font-style: normal;
  font-weight: 600;
  src:
    local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Liberation Sans Narrow Bold"),
    local("LiberationSansNarrow-Bold");
  size-adjust: 100.9%;
  ascent-override: 99.11%;
  descent-override: 19.82%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Barlow Semi Condensed Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 86.7%;
  ascent-override: 115.34%;
  descent-override: 23.07%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Barlow Semi Condensed Fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 88.1%;
  ascent-override: 113.51%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Barlow Semi Condensed Fallback";
  font-style: normal;
  font-weight: 600;
  src:
    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
    local("LiberationSans-Bold");
  size-adjust: 82.8%;
  ascent-override: 120.77%;
  descent-override: 24.15%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Poppins Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 111.9%;
  ascent-override: 93.83%;
  descent-override: 31.28%;
  line-gap-override: 8.94%;
}

@font-face {
  font-family: "Poppins Fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 113.1%;
  ascent-override: 92.84%;
  descent-override: 30.95%;
  line-gap-override: 8.84%;
}

@font-face {
  font-family: "Poppins Fallback";
  font-style: normal;
  font-weight: 600;
  src:
    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
    local("LiberationSans-Bold");
  size-adjust: 105.8%;
  ascent-override: 99.24%;
  descent-override: 33.08%;
  line-gap-override: 9.45%;
}

@font-face {
  font-family: "Poppins Fallback";
  font-style: normal;
  font-weight: 700;
  src:
    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
    local("LiberationSans-Bold");
  size-adjust: 106.7%;
  ascent-override: 98.41%;
  descent-override: 32.8%;
  line-gap-override: 9.37%;
}

/* Page base: Poppins Medium body text in Charcoal on White. */
.smx-body {
  margin: 0;
  background: var(--sm-white);
  color: var(--sm-charcoal);
  font-family: var(--sm-font-body);
  font-weight: 500;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(.smx-body) *,
:where(.smx-body) *::before,
:where(.smx-body) *::after {
  box-sizing: border-box;
}

/* Headlines (h1 to h3): Barlow Semi Condensed Medium. */
:where(.smx-body) :is(h1, h2, h3) {
  margin: 0 0 0.5em;
  font-family: var(--sm-font-head);
  font-weight: 500;
  line-height: 1.15;
}

:where(.smx-body) h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}

:where(.smx-body) h2 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}

:where(.smx-body) h3 {
  font-size: clamp(1.375rem, 1.125rem + 1vw, 1.75rem);
}

/* Subheads (h4 to h6): Poppins Bold. */
:where(.smx-body) :is(h4, h5, h6) {
  margin: 0 0 0.5em;
  font-family: var(--sm-font-body);
  font-weight: 700;
  line-height: 1.3;
}

:where(.smx-body) a {
  color: var(--sm-purple);
  text-underline-offset: 0.15em;
}

/* Visible focus for keyboard users (WCAG 2.2 AA). */
:where(.smx-body) :focus-visible {
  outline: 3px solid var(--sm-purple);
  outline-offset: 2px;
}

.smx-container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: 2rem 1.25rem;
}

/* Colors here are repeated in the chrome guard below; change both. */
/*
 * The "Prepared for <prospect>" bar above microsite content (SPEC.md 13), styled as the deck's
 * content slide header (deck look, section 2): Lavender Wash, a decorative 6px Purple accent bar
 * at the left edge of its text, the Purple uppercase eyebrow "Prepared for" and the prospect name
 * in Barlow Semi Condensed 500. Text pairs: Purple and Charcoal on Lavender Wash.
 *
 * Positioned above the content (SPEC.md story 27, issue 397): an imported artifact's scope is a
 * positioned stacking context that comes later, so without a z-index its content, moved up by a
 * negative margin or offset, would paint over the bar. Below the sticky header (z-index 10).
 */
.smx-prepared {
  position: relative;
  z-index: 1;
  background: var(--sm-lavender-wash);
  font-size: var(--sm-text-small);
}

.smx-prepared .smx-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sm-space-12) var(--sm-space-24);
  padding-block: var(--sm-space-16);
}

.smx-prepared-text {
  min-width: 0;
  margin: 0;
  padding-inline-start: var(--sm-space-16);
  border-inline-start: 6px solid var(--sm-purple);
  color: var(--sm-purple);
  font-size: var(--sm-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--sm-tracking-eyebrow);
  line-height: var(--sm-leading-snug);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.smx-prepared-name {
  display: block;
  color: var(--sm-charcoal);
  font-family: var(--sm-font-head);
  font-size: var(--sm-text-h3);
  font-weight: 500;
  letter-spacing: normal;
  line-height: var(--sm-leading-heading);
  text-transform: none;
}

/* Colors here are repeated in the chrome guard below; change both. */
/*
 * "Your ShiftMed contact" (SPEC.md 13): a <details> disclosure. The card opens in the bar's flow,
 * below the button, so it never covers the page or the next focused control, and it is never
 * wider than the bar. The button is a small outline pill that fills Purple on hover and while the
 * card is open. Text pairs: Purple on Lavender Wash and White on Purple for the button, Charcoal
 * and Purple on the White card.
 */
.smx-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 100%;
  margin-left: auto;
}

.smx-contact-toggle {
  padding: var(--sm-space-4) var(--sm-space-16);
  border: 2px solid var(--sm-purple);
  border-radius: var(--sm-radius-pill);
  background: var(--sm-lavender-wash);
  color: var(--sm-purple);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition:
    background-color var(--sm-motion-base) var(--sm-ease),
    color var(--sm-motion-base) var(--sm-ease);
}

.smx-contact-toggle:hover,
.smx-contact[open] > .smx-contact-toggle {
  background: var(--sm-purple);
  color: var(--sm-white);
}

.smx-contact-toggle::-webkit-details-marker {
  display: none;
}

.smx-contact-card {
  width: min(22rem, 100%);
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--sm-lavender);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-white);
  box-shadow: var(--sm-shadow-card);
  overflow-wrap: anywhere;
}

.smx-contact-card p {
  margin: 0;
}

.smx-contact-name {
  font-weight: 700;
}

.smx-contact-card p + .smx-contact-line {
  margin-top: 0.5rem;
}

.smx-contact-label {
  font-weight: 700;
}

/* Colors here are repeated in the chrome guard below; change both. */
/*
 * The cross-page nav of a multi-page site (SPEC.md 13 and 5.5,
 * docs/decisions/73-cross-page-nav.md): a <details> disclosure, closed by default, so below
 * 62rem the links sit behind the "Site pages" toggle with no script. From 62rem, where the
 * browser can style ::details-content, the toggle is hidden and the links always show as a top
 * nav. Elsewhere it stays a disclosure, so every link is still reachable. The links are pill
 * tabs, like the live site's benefit pills (deck look, section 2): Purple on Lavender Wash with a
 * Lavender border, the current page White on Purple. They wrap onto more rows rather than scroll.
 * Text pairs: Purple on White (the toggle), Purple on Lavender Wash and White on Purple.
 */
.smx-pages {
  border-bottom: 1px solid var(--sm-gray-light);
  background: var(--sm-white);
}

.smx-pages-menu {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--sm-space-12) 1.25rem;
}

.smx-pages-toggle {
  display: inline-block;
  padding: 0.25rem 1rem;
  border: 2px solid var(--sm-purple);
  border-radius: var(--sm-radius-pill);
  color: var(--sm-purple);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

/* The pill has no disclosure triangle, as with the contact toggle: older WebKit draws one. */
.smx-pages-toggle::-webkit-details-marker {
  display: none;
}

.smx-pages-list {
  display: flex;
  flex-flow: row wrap;
  gap: var(--sm-space-8);
  margin: 0;
  padding: var(--sm-space-12) 0 0;
  list-style: none;
}

.smx-pages-list li {
  max-width: 100%;
}

.smx-pages-list a {
  display: inline-block;
  max-width: 100%;
  padding: var(--sm-space-4) var(--sm-space-16);
  border: 1px solid var(--sm-lavender);
  border-radius: var(--sm-radius-pill);
  background: var(--sm-lavender-wash);
  color: var(--sm-purple);
  font-size: var(--sm-text-small);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    background-color var(--sm-motion-base) var(--sm-ease),
    border-color var(--sm-motion-base) var(--sm-ease),
    color var(--sm-motion-base) var(--sm-ease);
}

.smx-pages-list a:hover {
  border-color: var(--sm-purple);
}

.smx-pages-list a[aria-current="page"] {
  border-color: var(--sm-purple);
  background: var(--sm-purple);
  color: var(--sm-white);
}

@media (min-width: 62rem) {
  @supports selector(::details-content) {
    .smx-pages-toggle {
      display: none;
    }

    .smx-pages-menu::details-content {
      content-visibility: visible;
    }

    .smx-pages-list {
      padding-top: 0;
    }
  }
}

/* The wrapper around uploaded microsite content (a custom element, inline by default). */
.smx-content {
  display: block;
}

/* Colors here are repeated in the chrome guard below; change both. */
/*
 * Site chrome (SPEC.md 5.3 and 5.5): the header and footer built from the chrome setting.
 * Desktop layout from 62rem (992 px, where the live site's Bootstrap nav expands); below that the
 * menus and buttons collapse behind the "Menu" toggler (see the media query further down).
 */
.smx-menu-list,
.smx-menu-items,
.smx-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.smx-header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid var(--sm-gray-light);
  background: var(--sm-white);
}

/*
 * Only the header row is sticky (deck look, section 2); the skip link comes before it. On a page
 * with the header, the browser keeps whatever it scrolls to (a focused control, an in-page anchor,
 * the skip link's target) at least 96px from the top, clear of the header (74 to 80px tall): WCAG
 * 2.2 2.4.11, technique C43. Admin pages have no header.
 */
:root:has(.smx-header) {
  scroll-padding-top: var(--sm-space-96);
}

/* Skip link: off screen until focused, then shown at the top left. */
.smx-skip-link {
  position: absolute;
  z-index: 20;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--sm-radius-sm);
  background: var(--sm-white);
  color: var(--sm-purple);
}

/*
 * The focus ring is Charcoal on the link's White background, framed by a White band, so it
 * contrasts on both sides whatever sits behind it.
 */
.smx-skip-link:focus-visible {
  outline-color: var(--sm-charcoal);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--sm-white);
}

.smx-skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.smx-mainnav,
.smx-footer-inner {
  display: flex;
  flex-wrap: wrap;
  max-width: 72rem;
  margin-inline: auto;
  padding: 0.5rem 1.25rem;
}

.smx-mainnav {
  align-items: center;
  gap: 1rem 1.5rem;
  padding-block: 1rem;
}

.smx-logo {
  display: inline-flex;
  flex: none;
}

/*
 * The official logo files (SPEC.md 5.2, issue 18, docs/decisions/18-official-logo.md), as
 * `<img>`. Each keeps the files' 300 by 95.64 viewBox ratio, so it is never stretched, at a fixed
 * width like the live site's logos: 141 px in the header and 167 px in the footer
 * (`--sm-logo-footer-width` in tokens.css; artwork 135 and 160 px wide, over the 100 px brand
 * minimum). The files have whitespace of their own around the artwork. With the header row's
 * 16 px padding, the 20 px page gutter and the 24 px gap beside it, and the footer's 32 px gaps,
 * the clear space on every side is at least the height of the "M" (17.5 px in the header, 20.7 px
 * in the footer); tests/e2e/logo.spec.ts measures it.
 *
 * Guarded against upload rules up to 0,1,1 (the `.smx-body` prefix makes these 0,2,0, as in the
 * chrome guard below; an upload stylesheet loads after this one): the image's display,
 * visibility, position and float; its width (the two rules after this one), height, min and max
 * sizes, aspect ratio and zoom; how the file fills its box (object-fit, object-position) and what
 * replaces it (`content`); margin, padding, border, border radius, outline, background and box
 * shadow; opacity, filters, backdrop filters, blend mode, clip path and mask; transforms
 * (including rotate, scale and translate) and any animation or transition. The boxes around the
 * logo are guarded too (the rules after `.smx-footer-brand`). Not guarded: rules above 0,1,1 or
 * with !important.
 */
.smx-body .smx-logo-img {
  display: block;
  position: static;
  float: none;
  visibility: visible;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 300 / 95.64;
  zoom: 1;
  object-fit: contain;
  object-position: center;
  content: normal;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  filter: none;
  backdrop-filter: none;
  mix-blend-mode: normal;
  clip-path: none;
  mask: none;
  transform: none;
  rotate: none;
  scale: none;
  translate: none;
  animation: none;
  transition: none;
}

.smx-body .smx-logo-header {
  width: 141px;
}

.smx-body .smx-logo-footer {
  width: var(--sm-logo-footer-width);
}

.smx-footer-brand {
  grid-column: 1 / -1;
}

/*
 * The boxes around the logo (issue 18 review). Opacity, visibility, filters, transforms, clipping,
 * masks, blend modes and zoom on an ancestor reach the logo however its own image is guarded,
 * so an upload's bare `a`, `div`, `header` or `footer` rules (up to 0,1,1, as above) could still
 * fade, hide, shrink or recolor it. These rules reset those properties on every box from the band
 * to the logo: the header, its logo row and the logo link, and the footer, its main grid and the
 * logo's wrapper. The link and the wrapper also keep their display, position and float, since
 * nothing else sets those on them. The header and the two rows keep their own display and position
 * rules (the header switches between sticky and static), which outrank bare element rules only.
 * Focus rings are unchanged: the chrome guard's `:focus-visible` outline (0,3,0) still wins, and
 * nothing here clips it. The page body itself isn't guarded: a rule on `body` fades the upload's
 * own content too.
 */
.smx-body
  :is(.smx-header, .smx-mainnav, .smx-logo, .smx-footer, .smx-footer-main, .smx-footer-brand) {
  visibility: visible;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  clip-path: none;
  mask: none;
  transform: none;
  rotate: none;
  scale: none;
  translate: none;
  zoom: 1;
}

.smx-body :is(.smx-logo, .smx-footer-brand) {
  position: static;
  float: none;
}

.smx-body .smx-logo {
  display: inline-flex;
}

.smx-body .smx-footer-brand {
  display: block;
}

.smx-menu-list,
.smx-legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.smx-menu {
  position: relative;
}

/*
 * Menu labels as live: Poppins 600 Charcoal, Purple on hover, focus and while open, with a
 * chevron drawn from two borders (decorative) instead of the disclosure triangle.
 */
.smx-menu-label {
  display: flex;
  align-items: center;
  gap: var(--sm-space-8);
  color: var(--sm-charcoal);
  font-size: var(--sm-text-small);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color var(--sm-motion-base) var(--sm-ease);
}

.smx-menu-label::-webkit-details-marker {
  display: none;
}

.smx-menu-label::after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  margin-top: -0.25rem;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: rotate(45deg);
}

.smx-menu[open] > .smx-menu-label::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}

.smx-menu-label:hover,
.smx-menu-label:focus-visible,
.smx-menu[open] > .smx-menu-label {
  color: var(--sm-purple);
}

.smx-menu-items {
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 14rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--sm-gray-light);
  border-radius: var(--sm-radius-12);
  background: var(--sm-white);
  box-shadow: var(--sm-shadow-raised);
  font-size: var(--sm-text-small);
}

.smx-menu-items a {
  color: var(--sm-charcoal);
  text-decoration: none;
  transition: color var(--sm-motion-base) var(--sm-ease);
}

.smx-menu-items a:hover,
.smx-menu-items a:focus-visible {
  color: var(--sm-purple);
  text-decoration: underline;
}

.smx-menu-items li + li,
.smx-footer-list li + li {
  margin-top: 0.375rem;
}

/* The panel the mobile toggler controls. On desktop it is just the rest of the nav row. */
.smx-nav-panel {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.smx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

/* Sign Up and Login: Purple text buttons, split by a thin rule as live. */
.smx-account-link {
  color: var(--sm-purple);
  font-size: var(--sm-text-small);
  font-weight: 600;
  text-decoration: none;
}

.smx-account-link:hover,
.smx-account-link:focus-visible {
  text-decoration: underline;
}

.smx-account-link + .smx-account-link {
  padding-left: 1rem;
  border-left: 1px solid var(--sm-gray-light);
}

/*
 * "Request Free Consultation": an outline pill, Purple border and text on White, filled Purple
 * on hover and focus and Purple Dark while pressed (White text on both).
 */
.smx-actions .smx-button {
  padding: var(--sm-space-8) var(--sm-space-24);
  border: 2px solid var(--sm-purple);
  background: var(--sm-white);
  color: var(--sm-purple);
  font-size: var(--sm-text-small);
  font-weight: 600;
  transition:
    color var(--sm-motion-base) var(--sm-ease),
    background-color var(--sm-motion-base) var(--sm-ease),
    border-color var(--sm-motion-base) var(--sm-ease);
}

.smx-actions .smx-button:hover,
.smx-actions .smx-button:focus-visible {
  background: var(--sm-purple);
  color: var(--sm-white);
}

.smx-actions .smx-button:active {
  border-color: var(--sm-purple-dark);
  background: var(--sm-purple-dark);
  color: var(--sm-white);
}

.smx-nav-toggle {
  display: none;
}

/* Three bars drawn in Purple, decorative only (the button's name is its "Menu" text). */
.smx-nav-toggle-icon {
  width: 1.125rem;
  height: 2px;
  background: var(--sm-purple);
  box-shadow:
    0 -6px 0 var(--sm-purple),
    0 6px 0 var(--sm-purple);
}

/*
 * Below 62rem: the toggler shows (once site-nav.js has removed its hidden attribute) and the
 * panel opens below the logo row as a full-width column. The menus open in place, pushing the
 * rest of the panel down, so nothing overlaps. Without the script the toggler stays hidden and
 * the panel stays open.
 */
@media (max-width: 61.98rem) {
  .smx-mainnav {
    column-gap: 1rem;
  }

  .smx-nav-toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    padding: 0.5rem 1rem;
    border: 2px solid var(--sm-purple);
    border-radius: var(--sm-radius-pill);
    background: var(--sm-white);
    color: var(--sm-purple);
    font: inherit;
    cursor: pointer;
  }

  .smx-nav-toggle:not([hidden])[aria-expanded="false"] + .smx-nav-panel {
    display: none;
  }

  /*
   * The open panel scrolls inside the sticky header, so its last link stays reachable on a short
   * screen. It doesn't wrap, so a capped height scrolls instead of starting a second column. Its
   * padding keeps focus rings inside the scroll box; the negative margins keep the links lined up
   * with the logo.
   */
  .smx-nav-toggle:not([hidden])[aria-expanded="true"] + .smx-nav-panel {
    flex-wrap: nowrap;
    flex-basis: calc(100% + 2 * var(--sm-space-8));
    max-height: calc(100dvh - var(--sm-space-96));
    margin-inline: calc(-1 * var(--sm-space-8));
    padding: var(--sm-space-8);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /*
   * Without the script the panel can't close, so the header scrolls away with the page. With the
   * panel open and focus past the header (in the main content or the footer), the tall header
   * scrolls away too, so it never covers the focused control (WCAG 2.2 2.4.11). A sticky element
   * keeps its place in the flow, so nothing else moves; focus back in the header sticks it again.
   */
  .smx-header:has(.smx-nav-toggle[hidden]),
  .smx-header:has(.smx-nav-toggle:not([hidden])[aria-expanded="true"]):has(~ :focus-within) {
    position: static;
  }

  .smx-nav-panel {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .smx-menu-list {
    flex-direction: column;
    gap: 0.75rem;
  }

  .smx-menu-items {
    position: static;
    min-width: 0;
    margin-top: 0.5rem;
    padding: 0 0 0 1rem;
    border: 0;
    box-shadow: none;
  }

  .smx-actions {
    margin-left: 0;
  }
}

/* Primary button: a Purple pill with White text. */
.smx-button {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-purple);
  color: var(--sm-white);
  font-family: var(--sm-font-body);
  font-weight: 500;
  text-decoration: none;
}

/* Colors here are repeated in the chrome guard below; change both. */
/*
 * Footer (deck look, section 4): a Gray Wash band as on the live shiftmed.com, with Charcoal text,
 * Poppins SemiBold column heads and Charcoal links that turn Purple on hover and focus. The focus
 * ring is the page's Purple one. Text pairs: Charcoal, Purple and Gray Text on Gray Wash, all in
 * tests/unit/text-color-pairs.ts. The groups stack in one column on phones, sit two to a row from
 * 36rem, and from 62rem "Get in touch" and the four menu columns share one row of five, as live.
 */
.smx-footer {
  background: var(--sm-gray-wash);
  color: var(--sm-charcoal);
  overflow-wrap: anywhere;
}

.smx-footer a {
  color: var(--sm-charcoal);
  text-underline-offset: 0.2em;
  transition: color var(--sm-motion-base) var(--sm-ease);
}

.smx-footer a:is(:hover, :focus-visible) {
  color: var(--sm-purple);
}

/* The menu columns' links are underlined only on hover and focus, as live. */
.smx-footer-columns a {
  text-decoration: none;
}

.smx-footer-columns a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

.smx-footer-inner {
  gap: var(--sm-space-32);
}

.smx-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--sm-space-48) var(--sm-space-32);
}

/* The nav's groups line up with the outer grid's columns. */
.smx-footer-columns {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--sm-space-32);
}

@media (min-width: 36rem) {
  .smx-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .smx-footer-main {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-block: var(--sm-space-64) var(--sm-space-48);
  }

  /*
   * The row of five assumes the chrome setting's four menu columns. With fewer, the row keeps
   * empty tracks; with more, the extra columns wrap onto the next row of the nav.
   */
  .smx-footer-columns {
    grid-column: span 4;
  }
}

.smx-footer-heading {
  margin: 0 0 var(--sm-space-12);
  font-family: var(--sm-font-body);
  font-size: var(--sm-text-body);
  font-weight: 600;
  line-height: var(--sm-leading-snug);
}

/* A link that wraps in a narrow column stays one box, with one focus ring around it. */
.smx-footer-list a {
  display: inline-block;
}

.smx-footer-group li + li {
  margin-top: var(--sm-space-8);
}

/* The menu columns' links are spaced out more, as live. */
.smx-footer-columns li + li {
  margin-top: var(--sm-space-16);
}

.smx-footer-legal {
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-space-12) var(--sm-space-32);
  border-top: 1px solid var(--sm-gray-light);
  padding-block: var(--sm-space-24);
  font-size: var(--sm-text-small);
}

.smx-legal-list li + li {
  margin-top: 0;
}

.smx-valid-through,
.smx-copyright {
  margin: 0;
}

.smx-copyright {
  color: var(--sm-gray-text);
}

/*
 * Chrome guard (issue 334, docs/decisions/334-prospect-colors.md). An upload may use its own
 * colors, and its stylesheet loads after this one, so a bare element or universal rule in it
 * (`a`, `*`, `:focus-visible`, `body a`: specificity up to 0,1,1) would win over a chrome rule of
 * the same or lower specificity, and over every color the chrome only inherits. These rules repeat
 * the chrome's colors with `.smx-body` in front, so each is at least 0,2,0 and outranks those
 * upload rules. They keep the order of the rules above, so the chrome's own hover, focus and open
 * states still win as before. First, every chrome element takes its text color from its region
 * and has no background or border color, background image or underline color of its own unless a
 * rule below gives it one.
 *
 * Guarded, against upload rules up to 0,1,1 and on screen only: text, link and underline colors,
 * backgrounds (color and image), border colors, and focus outlines and rings (box-shadow on focus).
 * Not guarded: !important rules; selectors that name the .smx- classes (the content lint warns
 * about these as shell selectors); selectors above 0,1,1, such as `a[href]:hover`; text-shadow,
 * and box-shadow other than on focus; pseudo-elements (::before, ::after, ::selection); outlines
 * from `:focus` without `:focus-visible`; and print. The guard's `var(--sm-*)` values can't be
 * redefined by an upload: the sanitizer renames any `--sm-*` name it sets (`reserved-tokens.ts`).
 */
@media screen {
  .smx-body :is(.smx-skip-link, .smx-header, .smx-prepared, .smx-pages, .smx-footer) {
    border-color: currentcolor;
    background-color: transparent;
    background-image: none;
    color: var(--sm-charcoal);
    text-decoration-color: currentcolor;
  }

  .smx-body :is(.smx-header, .smx-prepared, .smx-pages, .smx-footer) * {
    border-color: currentcolor;
    background-color: transparent;
    background-image: none;
    color: inherit;
    text-decoration-color: currentcolor;
  }

  .smx-body :is(.smx-skip-link, .smx-header, .smx-prepared, .smx-pages, .smx-footer):focus-visible,
  .smx-body :is(.smx-header, .smx-prepared, .smx-pages, .smx-footer) :focus-visible {
    outline: 3px solid var(--sm-purple);
    outline-offset: 2px;
    box-shadow: none;
  }

  .smx-body .smx-prepared {
    background-color: var(--sm-lavender-wash);
  }

  .smx-body .smx-prepared-text {
    border-color: var(--sm-purple);
    color: var(--sm-purple);
  }

  .smx-body .smx-prepared-name {
    color: var(--sm-charcoal);
  }

  .smx-body .smx-contact-toggle {
    border-color: var(--sm-purple);
    background-color: var(--sm-lavender-wash);
    color: var(--sm-purple);
  }

  .smx-body .smx-contact-toggle:hover,
  .smx-body .smx-contact[open] > .smx-contact-toggle {
    background-color: var(--sm-purple);
    color: var(--sm-white);
  }

  .smx-body .smx-contact-card {
    border-color: var(--sm-lavender);
    background-color: var(--sm-white);
  }

  /* The card's links take the page's link color, as they do without the guard. */
  .smx-body .smx-contact-card a {
    color: var(--sm-purple);
  }

  .smx-body .smx-pages {
    border-color: var(--sm-gray-light);
    background-color: var(--sm-white);
  }

  .smx-body .smx-pages-toggle {
    border-color: var(--sm-purple);
    color: var(--sm-purple);
  }

  .smx-body .smx-pages-list a {
    border-color: var(--sm-lavender);
    background-color: var(--sm-lavender-wash);
    color: var(--sm-purple);
  }

  .smx-body .smx-pages-list a:hover {
    border-color: var(--sm-purple);
  }

  .smx-body .smx-pages-list a[aria-current="page"] {
    border-color: var(--sm-purple);
    background-color: var(--sm-purple);
    color: var(--sm-white);
  }

  .smx-body .smx-header {
    border-color: var(--sm-gray-light);
    background-color: var(--sm-white);
  }

  .smx-body .smx-skip-link {
    background-color: var(--sm-white);
    color: var(--sm-purple);
  }

  .smx-body .smx-skip-link:focus-visible {
    outline-color: var(--sm-charcoal);
    outline-offset: 0;
    box-shadow: 0 0 0 6px var(--sm-white);
  }

  .smx-body .smx-menu-label {
    color: var(--sm-charcoal);
  }

  .smx-body .smx-menu-label:hover,
  .smx-body .smx-menu-label:focus-visible,
  .smx-body .smx-menu[open] > .smx-menu-label {
    color: var(--sm-purple);
  }

  .smx-body .smx-menu-items {
    border-color: var(--sm-gray-light);
    background-color: var(--sm-white);
  }

  .smx-body .smx-menu-items a {
    color: var(--sm-charcoal);
  }

  .smx-body .smx-menu-items a:hover,
  .smx-body .smx-menu-items a:focus-visible {
    color: var(--sm-purple);
  }

  .smx-body .smx-account-link {
    color: var(--sm-purple);
  }

  .smx-body .smx-account-link + .smx-account-link {
    border-color: var(--sm-gray-light);
  }

  .smx-body .smx-actions .smx-button {
    border-color: var(--sm-purple);
    background-color: var(--sm-white);
    color: var(--sm-purple);
  }

  .smx-body .smx-actions .smx-button:hover,
  .smx-body .smx-actions .smx-button:focus-visible {
    background-color: var(--sm-purple);
    color: var(--sm-white);
  }

  .smx-body .smx-actions .smx-button:active {
    border-color: var(--sm-purple-dark);
    background-color: var(--sm-purple-dark);
    color: var(--sm-white);
  }

  .smx-body .smx-nav-toggle-icon {
    background-color: var(--sm-purple);
  }

  /*
   * The toggler's "Menu" text (issue 354): an upload's bare span rule can't hide, move or shrink
   * it. The access header, which never shows an upload, hides it visually in access.css.
   */
  .smx-body .smx-nav-toggle-label {
    display: inline;
    position: static;
    font-size: inherit;
  }

  .smx-body .smx-footer {
    background-color: var(--sm-gray-wash);
    color: var(--sm-charcoal);
  }

  .smx-body .smx-footer a {
    color: var(--sm-charcoal);
  }

  .smx-body .smx-footer a:is(:hover, :focus-visible) {
    color: var(--sm-purple);
  }

  .smx-body .smx-footer-legal {
    border-color: var(--sm-gray-light);
  }

  .smx-body .smx-copyright {
    color: var(--sm-gray-text);
  }
}

@media screen and (max-width: 61.98rem) {
  .smx-body .smx-nav-toggle:not([hidden]) {
    border-color: var(--sm-purple);
    background-color: var(--sm-white);
    color: var(--sm-purple);
  }
}

/*
 * The access page's work email form (SPEC.md 6). The page itself is the homepage hero in
 * access.css (issue 351), which restyles the form there; these are its base rules.
 */
.smx-access-intro {
  margin: 0 0 2rem;
  font-size: 1.125rem;
}

/*
 * The continue offers for a returning device (story 9 part 3): one Purple pill link per granted
 * site, above the email form. A long title wraps inside the pill rather than overflowing.
 */
.smx-access-continue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.smx-access-continue-link {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.smx-access-other {
  margin: 1.5rem 0 1rem;
}

.smx-access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

/* The label wraps its text and the field, and takes the row's free width beside the button. */
.smx-access-field {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  min-width: 0;
}

.smx-access-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

/* The field's border is Charcoal, so its edge contrasts with White (WCAG 2.2 1.4.11). */
.smx-access-input {
  width: 100%;
  min-width: 0;
  padding: 0.625rem 1rem;
  border: 2px solid var(--sm-charcoal);
  border-radius: var(--sm-radius-sm);
  background: var(--sm-white);
  color: var(--sm-charcoal);
  font: inherit;
}

.smx-access-submit {
  flex: none;
  border: 0;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

.smx-access-error {
  margin-top: 0.75rem;
  font-weight: 700;
}

.smx-access-error:empty {
  margin-top: 0;
}

/*
 * The honeypot (SPEC.md 7.4): positioned off screen. The markup (tabindex="-1" and an aria-hidden
 * wrapper) keeps it out of the tab order and the accessibility tree.
 */
.smx-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * Markdown pages (SPEC.md 10.3, story 15). The pipeline writes the page header first, then the
 * section nav and the content. Everything after the header, and in a section band (see below), is
 * a centered reading column; the
 * column rules have zero specificity, or (0,0,1) for headings, so the upload's own rules, which
 * come later in the page, win. Blocks are wider. Text pairs: Charcoal on White and Light Gray,
 * Purple on White and Light Gray, White on Purple.
 */
.smx-page-header,
:where(.smx-page-header) ~ *,
:where(.smx-section) > * {
  width: min(48rem, calc(100% - 2.5rem));
  margin-inline: auto;
}

/*
 * Specificity (0,0,1), the same as the shell's heading defaults above, whose margins would
 * otherwise beat the column's centering.
 */
:where(.smx-page-header) ~ :is(h1, h2, h3, h4, h5, h6),
:where(.smx-section) > :is(h1, h2, h3, h4, h5, h6) {
  margin-inline: auto;
}

.smx-page-header {
  padding-top: 2rem;
}

/* The title when a hero block holds the page's H1: a paragraph that looks like the H1. */
.smx-page-title {
  margin: 0 0 0.5em;
  font-family: var(--sm-font-head);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 500;
  line-height: 1.15;
}

.smx-hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 28rem;
  margin-bottom: 1.5rem;
  border-radius: var(--sm-radius-card);
  object-fit: cover;
}

:where(.smx-page-header) ~ * :where(img) {
  max-width: 100%;
  height: auto;
}

.smx-section-nav {
  margin-block: 1rem 2rem;
  padding-block: 0.75rem;
  border-block: 1px solid var(--sm-gray-light);
}

.smx-section-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A task list item: its disabled checkbox stands in for the bullet. */
.smx-task {
  list-style: none;
}

.smx-task > input {
  margin: 0 0.5rem 0 -1.5rem;
}

/* The ShiftMed blocks: hero, stats, cards and cta. */
.smx-page-header ~ .smx-block,
.smx-section > .smx-block {
  width: min(72rem, calc(100% - 2.5rem));
  margin-block: 2.5rem;
}

.smx-block > :last-child {
  margin-bottom: 0;
}

.smx-hero,
.smx-cta {
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--sm-radius-card);
  overflow-wrap: anywhere;
}

/*
 * Hero (deck look, section 3): the live shiftmed.com hero. A White to Gray Warm to Lavender Wash
 * fade, a Barlow Semi Condensed 500 headline in Charcoal whose *emphasis* is Purple and upright
 * (the live two-tone headline), and pill buttons. Text pairs: Charcoal and Purple on each stop.
 */
.smx-hero {
  background: linear-gradient(
    to bottom,
    var(--sm-white),
    var(--sm-gray-warm),
    var(--sm-lavender-wash)
  );
}

.smx-hero :is(h1, h2) {
  font-family: var(--sm-font-head);
  font-weight: 500;
}

.smx-hero h1 em {
  color: var(--sm-purple);
  font-style: normal;
}

.smx-hero p {
  max-width: 40rem;
  font-size: 1.125rem;
}

/* Every link in a hero or cta block is a call to action: a pill button on its own line. */
.smx-block [data-smx-cta] {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 1rem;
  padding: 0.625rem 1.5rem;
  border-radius: var(--sm-radius-pill);
  font-family: var(--sm-font-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

/*
 * The hero's first CTA is the primary pill: Purple, Purple Dark on hover and press, with a Purple
 * Deep border on hover, as live. Every later CTA is the outline pill: a Purple border and text on
 * the fade, filled Purple on hover. Text pairs: White on Purple and Purple Dark, Purple on each
 * stop of the fade.
 */
.smx-hero [data-smx-cta] {
  border: 2px solid var(--sm-purple);
  background: var(--sm-purple);
  box-shadow: var(--sm-shadow-card);
  color: var(--sm-white);
  font-weight: 600;
  transition:
    background-color var(--sm-motion-base) var(--sm-ease),
    border-color var(--sm-motion-base) var(--sm-ease),
    color var(--sm-motion-base) var(--sm-ease);
}

/*
 * A CTA after another one in the same hero: in the same parent, or inside a later sibling of an
 * element that holds one, so a second link on the next line or in its own paragraph matches.
 * :where() keeps the specificity of the hero CTA rule above, so the print rules still win.
 */
.smx-hero :where([data-smx-cta], :has([data-smx-cta])) ~ [data-smx-cta],
.smx-hero :where([data-smx-cta], :has([data-smx-cta])) ~ * [data-smx-cta] {
  border-color: var(--sm-purple);
  background: transparent;
  box-shadow: none;
  color: var(--sm-purple);
}

/*
 * Hover and press, on screen only: these selectors outrank the print rules, so a pill hovered when
 * the page is printed would otherwise keep its screen colors.
 */
@media screen {
  .smx-hero [data-smx-cta]:hover {
    border-color: var(--sm-purple-deep);
    background: var(--sm-purple-dark);
  }

  .smx-hero [data-smx-cta]:active {
    border-color: var(--sm-purple-dark);
    background: var(--sm-purple-dark);
  }

  .smx-hero :where([data-smx-cta], :has([data-smx-cta])) ~ [data-smx-cta]:hover,
  .smx-hero :where([data-smx-cta], :has([data-smx-cta])) ~ * [data-smx-cta]:hover {
    border-color: var(--sm-purple);
    background: var(--sm-purple);
    color: var(--sm-white);
  }

  .smx-hero :where([data-smx-cta], :has([data-smx-cta])) ~ [data-smx-cta]:active,
  .smx-hero :where([data-smx-cta], :has([data-smx-cta])) ~ * [data-smx-cta]:active {
    border-color: var(--sm-purple-dark);
    background: var(--sm-purple-dark);
    color: var(--sm-white);
  }
}

/* On phones the hero's pills span the panel, as live. */
@media screen and (max-width: 47.98rem) {
  .smx-hero [data-smx-cta] {
    width: 100%;
    text-align: center;
  }
}

/*
 * Stats: KPI cards (deck look, section 3). Each stat is a White card with the card radius and the
 * soft shadow: a Purple Barlow Semi Condensed figure above a Charcoal Poppins label. Two cards a
 * row below 48rem, four from 48rem. A block with fewer stats than a row keeps the same card width
 * and sits centered; a fifth stat starts the next row.
 */
.smx-stats ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: var(--sm-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.smx-stats ul:has(> li:only-child) {
  grid-template-columns: minmax(0, calc((100% - var(--sm-space-16)) / 2));
}

.smx-stats li {
  padding: var(--sm-space-24) var(--sm-space-16);
  border-radius: var(--sm-radius-card);
  background: var(--sm-white);
  box-shadow: var(--sm-shadow-card);
  color: var(--sm-charcoal);
  overflow-wrap: anywhere;
}

.smx-stats li > span {
  display: block;
}

.smx-stats li > span:first-child {
  margin-bottom: var(--sm-space-4);
  color: var(--sm-purple);
  font-family: var(--sm-font-head);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
}

.smx-stats li > span:last-child {
  font-family: var(--sm-font-body);
  font-size: var(--sm-text-small);
  line-height: var(--sm-leading-snug);
}

@media (min-width: 48rem) {
  .smx-stats ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sm-space-24);
  }

  .smx-stats ul:has(> li:only-child) {
    grid-template-columns: minmax(0, calc((100% - 3 * var(--sm-space-24)) / 4));
  }

  .smx-stats ul:has(> li:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, calc((100% - 3 * var(--sm-space-24)) / 4)));
  }

  .smx-stats ul:has(> li:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, calc((100% - 3 * var(--sm-space-24)) / 4)));
  }
}

/* On paper a thin Light Gray border stands in for the shadow. */
@media print {
  .smx-stats li {
    border: 1px solid var(--sm-gray-light);
    box-shadow: none;
  }
}

/*
 * Cards (deck look, section 3): the live "how it works" cards. A Gray Warm panel in the blocks'
 * column (on a Gray Warm section band it blends in, so the selectors don't depend on where the
 * block sits) with the cards side by side where they fit: White, the card radius and the soft
 * shadow, an H3 in Barlow Semi Condensed 500, and a Teal check before each item of a list
 * in the card. The check is two empty pseudo-elements (a circle and a border-drawn tick), which
 * assistive technology doesn't read, and the list keeps its list semantics. `:::cards numbered`
 * numbers the cards from a CSS counter ("01", "02") in Purple Barlow Semi Condensed. Screen
 * readers read the number too: in a process, the order matters. A card's `::` tag is a Lavender
 * Wash pill with Purple 11px uppercase Poppins, floated to the card's top right, beside the
 * number. Text pairs: Charcoal and Purple on White (cards) and on Gray Warm (the band), Purple on
 * Lavender Wash (tags).
 */
.smx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--sm-space-24);
  padding: clamp(var(--sm-space-12), 0.5rem + 2vw, var(--sm-space-24));
  border-radius: var(--sm-radius-card);
  background: var(--sm-gray-warm);
  counter-reset: smx-card;
}

.smx-card {
  display: flow-root;
  padding: var(--sm-space-32) var(--sm-space-24);
  border-radius: var(--sm-radius-card);
  background: var(--sm-white);
  box-shadow: var(--sm-shadow-card);
  overflow-wrap: anywhere;
  counter-increment: smx-card;
}

.smx-card > :last-child {
  margin-bottom: 0;
}

/* Below the number and the tag, which float. */
.smx-card > :not(.smx-heading),
.smx-card > .smx-heading > :not(.smx-card-tag) {
  clear: both;
}

.smx-card h3 {
  font-size: var(--sm-text-h3);
  line-height: var(--sm-leading-heading);
}

.smx-cards-numbered > .smx-card::before {
  content: counter(smx-card, decimal-leading-zero);
  float: left;
  margin: 0 var(--sm-space-12) var(--sm-space-12) 0;
  color: var(--sm-purple);
  font-family: var(--sm-font-head);
  font-size: clamp(2.25rem, 1.75rem + 1vw, 2.75rem);
  font-weight: 500;
  line-height: 1;
}

.smx-card-tag {
  float: right;
  max-width: 100%;
  margin: 0 0 var(--sm-space-12);
  padding: var(--sm-space-4) var(--sm-space-12);
  border-radius: var(--sm-radius-pill);
  background: var(--sm-lavender-wash);
  color: var(--sm-purple);
  font-family: var(--sm-font-body);
  font-size: var(--sm-text-tag);
  font-weight: 600;
  letter-spacing: var(--sm-tracking-eyebrow);
  line-height: var(--sm-leading-snug);
  text-transform: uppercase;
}

.smx-cards-numbered .smx-card-tag {
  margin-top: var(--sm-space-8);
}

.smx-card > p + ul {
  padding-top: var(--sm-space-16);
  border-top: 1px solid var(--sm-gray-light);
}

.smx-card > ul {
  padding-left: 0;
  list-style: none;
}

.smx-card > ul > li {
  position: relative;
  padding-left: var(--sm-space-24);
}

.smx-card > ul > li + li {
  margin-top: var(--sm-space-8);
}

.smx-card > ul > li:not(.smx-task)::before,
.smx-card > ul > li:not(.smx-task)::after {
  content: "";
  position: absolute;
}

/* The tick, above the circle. */
.smx-card > ul > li:not(.smx-task)::before {
  z-index: 1;
  top: calc(0.8em - 0.375rem);
  left: 0.34375rem;
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid var(--sm-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.smx-card > ul > li:not(.smx-task)::after {
  top: calc(0.8em - 0.5rem);
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--sm-teal);
}

/* On paper: White, no shadow, the tag as a Purple outline and the tick in Purple, no circle. */
@media print {
  .smx-cards {
    background: var(--sm-white);
  }

  .smx-card {
    box-shadow: none;
  }

  .smx-card-tag {
    border: 1px solid var(--sm-purple);
    background: var(--sm-white);
  }

  .smx-card > ul > li:not(.smx-task)::before {
    border-color: var(--sm-purple);
  }

  .smx-card > ul > li:not(.smx-task)::after {
    display: none;
  }
}

/*
 * Cta: the live savings band. A full-bleed Purple to Purple Dark gradient (the dark hero's angle)
 * with its content in the blocks' column, White text and H2, White underlined links, a Teal pill
 * CTA with Charcoal text, and a White focus ring. These rules come after the shared hero and cta
 * rule and override its panel padding and radius. Text pairs: White on Purple and on Purple Dark,
 * Charcoal on Teal Bright and on Teal.
 */
.smx-cta {
  background: linear-gradient(160deg, var(--sm-purple), var(--sm-purple-dark));
  color: var(--sm-white);
}

.smx-page-header ~ .smx-cta {
  width: 100%;
  margin-block: var(--sm-space-48);
  padding-block: clamp(var(--sm-space-48), 2rem + 3vw, var(--sm-space-64));
  padding-inline: max(1.25rem, calc((100% - 72rem) / 2));
  border-radius: 0;
}

.smx-cta h2 {
  font-size: var(--sm-text-h2);
  font-weight: 400;
  line-height: var(--sm-leading-heading);
}

.smx-cta a {
  color: var(--sm-white);
}

.smx-cta [data-smx-cta] {
  padding: var(--sm-space-12) var(--sm-space-32);
  border: 2px solid var(--sm-teal);
  background: linear-gradient(var(--sm-teal-bright), var(--sm-teal));
  box-shadow: var(--sm-shadow-card);
  color: var(--sm-charcoal);
  font-weight: 600;
  transition: border-color var(--sm-motion-base) var(--sm-ease);
}

/* On screen only, so a pill hovered when printing still prints with the print border. */
@media screen {
  .smx-cta [data-smx-cta]:hover {
    border-color: var(--sm-teal-hover);
  }
}

.smx-cta :focus-visible,
.smx-hero-dark :focus-visible {
  outline-color: var(--sm-white);
}

/*
 * Dark hero (`:::hero dark`, deck look section 3): the deck's title slide in the savings band's
 * colors. A full-bleed Purple to Purple Dark gradient with two large White Faint circles (empty
 * pseudo-elements, so assistive technology never sees them), a White headline with Teal emphasis
 * and a short Teal rule, the CTA band's Teal pill first, then White outline pills that fill White
 * on hover, as the live band's pills. Text pairs: White and Teal on Purple and on Purple Dark,
 * Charcoal on Teal Bright and on Teal, and Purple on White (outline pill hover, print).
 */
.smx-hero-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sm-purple), var(--sm-purple-dark));
  color: var(--sm-white);
}

.smx-page-header ~ .smx-hero-dark {
  width: 100%;
  padding-block: clamp(var(--sm-space-48), 2rem + 3vw, var(--sm-space-96));
  padding-inline: max(1.25rem, calc((100% - 72rem) / 2));
  border-radius: 0;
}

.smx-hero-dark::before,
.smx-hero-dark::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: var(--sm-white-faint);
  pointer-events: none;
}

.smx-hero-dark::before {
  top: -10rem;
  right: -8rem;
  width: 28rem;
  height: 28rem;
}

.smx-hero-dark::after {
  bottom: -9rem;
  left: -6rem;
  width: 18rem;
  height: 18rem;
}

.smx-hero-dark h1 em {
  color: var(--sm-teal);
}

.smx-hero-dark h1::after {
  content: "";
  display: block;
  width: var(--sm-space-64);
  height: var(--sm-space-4);
  margin-top: var(--sm-space-16);
  border-radius: var(--sm-radius-pill);
  background: var(--sm-teal);
}

.smx-hero-dark a {
  color: var(--sm-white);
}

.smx-hero-dark [data-smx-cta] {
  border-color: var(--sm-teal);
  background: linear-gradient(var(--sm-teal-bright), var(--sm-teal));
  color: var(--sm-charcoal);
}

.smx-hero-dark :where([data-smx-cta], :has([data-smx-cta])) ~ [data-smx-cta],
.smx-hero-dark :where([data-smx-cta], :has([data-smx-cta])) ~ * [data-smx-cta] {
  border-color: var(--sm-white);
  background: transparent;
  color: var(--sm-white);
}

/* Screen only, after the light hero's hover rules, which set a Purple background. */
@media screen {
  .smx-hero-dark [data-smx-cta]:is(:hover, :active) {
    border-color: var(--sm-teal-hover);
    background: linear-gradient(var(--sm-teal-bright), var(--sm-teal));
  }

  .smx-hero-dark :where([data-smx-cta], :has([data-smx-cta])) ~ [data-smx-cta]:is(:hover, :active),
  .smx-hero-dark
    :where([data-smx-cta], :has([data-smx-cta]))
    ~ *
    [data-smx-cta]:is(:hover, :active) {
    border-color: var(--sm-white);
    background: var(--sm-white);
    color: var(--sm-purple);
  }
}

/*
 * Section bands (deck look, section 3): the pipeline wraps each top-level H2, with its eyebrow, and
 * what follows it up to the next one in a full-bleed `.smx-section`, as live, and picks its shade
 * (markdown-sections.ts): White, Gray Wash (`.smx-section-alt`), or the cards' Gray Warm for a
 * band that holds a cards block, heading included, between thin Light Gray rules, so it never
 * meets a Gray Wash band without an edge. Hero and cta blocks are never in a band, and a
 * full-bleed one meets the band next to it with no gap. On paper every band is White, with less
 * padding. Text pairs: Charcoal and Purple on White, Gray Wash and Gray Warm.
 */
.smx-page-header ~ .smx-section {
  width: 100%;
  padding-block: var(--sm-space-16);
}

.smx-page-header ~ .smx-section > :last-child {
  margin-bottom: 0;
}

/* The last band keeps the CTA band's gap above the Gray Wash footer. */
.smx-page-header ~ .smx-section:last-child {
  margin-bottom: var(--sm-space-48);
}

.smx-page-header ~ .smx-section + :is(.smx-cta, .smx-hero-dark) {
  margin-top: 0;
}

.smx-page-header ~ :is(.smx-cta, .smx-hero-dark):has(+ .smx-section) {
  margin-bottom: 0;
}

/* In its band the cards panel needs no inset or corners of its own, and on screen no fill. */
.smx-section-cards > .smx-cards {
  padding: 0;
  border-radius: 0;
}

@media screen {
  .smx-page-header ~ .smx-section {
    padding-block: clamp(var(--sm-space-48), 2rem + 3vw, var(--sm-space-64));
    background: var(--sm-white);
  }

  .smx-page-header ~ .smx-section-alt {
    background: var(--sm-gray-wash);
  }

  .smx-page-header ~ .smx-section-cards {
    border-block: 1px solid var(--sm-gray-light);
    background: var(--sm-gray-warm);
  }

  .smx-section-cards > .smx-cards {
    background: none;
  }
}

/*
 * Eyebrows (deck look, section 3): a `::` line above a `#` or `##` heading, grouped with it in an
 * hgroup. Poppins SemiBold at the eyebrow size and tracking, uppercased by CSS only (the text
 * stays as written, for screen readers and copying). Purple on the light page, hero fade, cards
 * and bands; Teal on the dark hero and the CTA band. Text pairs: Purple on White (page and
 * cards), Gray Warm, Lavender Wash and Gray Wash; Teal on Purple and on Purple Dark. The group
 * itself takes no margin, so it sits in the column as a heading does. Its heading's scroll margin
 * adds to the page's scroll padding, so an anchor jump to it leaves the eyebrow (about 25px with
 * its margin) clear of the sticky header too.
 */
.smx-heading > .smx-eyebrow {
  margin: 0 0 var(--sm-space-8);
  color: var(--sm-purple);
  font-family: var(--sm-font-body);
  font-size: var(--sm-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--sm-tracking-eyebrow);
  line-height: var(--sm-leading-snug);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.smx-heading > :is(h1, h2) {
  scroll-margin-top: var(--sm-space-32);
}

.smx-cta .smx-heading > .smx-eyebrow,
.smx-hero-dark .smx-heading > .smx-eyebrow {
  color: var(--sm-teal);
}

/*
 * Section accent (deck look, section 3): on screens from 62rem, where the header's desktop layout
 * starts, a decorative 6px Purple bar left of a band's own heading (its first child), spanning
 * its eyebrow and H2, like the "Prepared for" bar's. Headings in the CTA band or a dark hero,
 * which are never in a band, have none (a Purple bar on Purple would not show). An empty
 * pseudo-element, so assistive technology never sees it. Not printed.
 */
@media screen and (min-width: 62rem) {
  .smx-page-header ~ .smx-section > :is(h2, .smx-heading):first-child {
    position: relative;
  }

  .smx-page-header ~ .smx-section > :is(h2, .smx-heading):first-child::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(-1 * var(--sm-space-24));
    width: 6px;
    background: var(--sm-purple);
  }
}

/*
 * Print and save to PDF (SPEC.md 13, docs/decisions/245-lazy-images-and-print-stylesheet.md).
 * The header, the cross-page and in-page navs and the contact button are left out; the "Prepared
 * for" line, the content and the footer print in Charcoal on White, since browsers drop
 * backgrounds by default. A content link to an https page prints its URL after it, so the paper
 * copy still says where it goes; mailto:, tel:, in-page and relative links don't (their text says
 * enough, or the URL would mean nothing on paper). The upload's own colors are its own: only the
 * shell and the Markdown blocks are recolored.
 */
@media print {
  .smx-header,
  .smx-pages,
  .smx-section-nav,
  .smx-contact {
    display: none;
  }

  .smx-body,
  .smx-prepared,
  .smx-footer,
  .smx-hero,
  .smx-card,
  .smx-cta {
    background: var(--sm-white);
    color: var(--sm-charcoal);
  }

  .smx-prepared {
    border-bottom: 1px solid var(--sm-charcoal);
  }

  .smx-prepared-text {
    border-color: var(--sm-charcoal);
    color: var(--sm-charcoal);
  }

  .smx-footer {
    border-top: 1px solid var(--sm-charcoal);
  }

  .smx-footer a,
  .smx-cta a,
  .smx-stats li > span:first-child {
    color: var(--sm-charcoal);
  }

  .smx-card,
  .smx-cta {
    border: 1px solid var(--sm-gray-light);
  }

  .smx-block [data-smx-cta] {
    border: 1px solid var(--sm-charcoal);
    background: var(--sm-white);
    box-shadow: none;
    color: var(--sm-charcoal);
  }

  /*
   * The CTA band and the dark hero are dark bands, so they print as White with Purple text (deck
   * look acceptance), without the hero's circles, and their pills as Purple outlines with Purple
   * text. These override the Charcoal rules above.
   */
  .smx-cta,
  .smx-cta a,
  .smx-hero-dark,
  .smx-hero-dark a,
  .smx-hero-dark h1 em {
    color: var(--sm-purple);
  }

  .smx-cta .smx-heading > .smx-eyebrow,
  .smx-hero-dark .smx-heading > .smx-eyebrow {
    color: var(--sm-purple);
  }

  .smx-hero-dark::before,
  .smx-hero-dark::after {
    display: none;
  }

  .smx-hero-dark h1::after {
    background: var(--sm-purple);
  }

  .smx-cta [data-smx-cta],
  .smx-hero-dark [data-smx-cta] {
    border: 2px solid var(--sm-purple);
    background: var(--sm-white);
    box-shadow: none;
    color: var(--sm-purple);
    transition: none;
  }

  .smx-content a[href^="https:" i]::after {
    content: " (" attr(href) ")";
    overflow-wrap: anywhere;
  }

  .smx-content :is(img, figure, .smx-card, .smx-stats li, .smx-heading) {
    break-inside: avoid;
  }

  .smx-content :is(h1, h2, h3, h4, h5, h6) {
    break-after: avoid;
  }
}

/*
 * The first cascade layer. Reduced motion (deck look, section 5): transitions and animations on
 * the page, uploaded content included, finish at once. They still run, near instantly, so an
 * animation that ends in a visible state (a fade-in with `forwards`) still ends there. The
 * declarations are !important and sit in an anonymous cascade layer. Important declarations in a layer beat important ones outside any
 * layer, and among layers the first one declared wins; shell.css loads before every uploaded
 * stylesheet and no earlier stylesheet declares a layer, so this layer is first. It therefore
 * beats every uploaded rule, layered or not, !important or not. Only an !important style
 * attribute can still win.
 */
@layer {
  @media (prefers-reduced-motion: reduce) {
    .smx-body,
    .smx-body *,
    .smx-body *::before,
    .smx-body *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      animation-delay: 0s !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }
  }

  /*
   * The scope around an imported Claude artifact (SPEC.md story 27, step 10). Layout containment
   * makes it the containing block of the import's fixed and absolutely positioned content, so that
   * content is placed inside it, below the "Prepared for" bar, and its stacking context keeps the
   * import's z-index under the chrome. No paint containment, so dropdowns, tooltips and shadows
   * aren't clipped at its edges. In this first layer, !important beats every rule an import has.
   */
  .smx-content > .artifact-root {
    position: relative !important;
    contain: layout !important;
    isolation: isolate !important;
  }
}