/* shared.css — Hiring America first-draft site
 *
 * Single source of truth for brand tokens, layout primitives, and
 * responsive breakpoints. Every page imports this file.
 */

/* 2026-05-18: band--text-left|right modifier removed and all heroes
   centered to match /index. Reverses 842da19 (2026-05-14). Per Jim
   Ray's responsive-design feedback in
   10-projects/hawr-feedback/2026-05-18-watch-hero-photo-text-alignment.md.
   Felipe's original negative-space-side ask at
   10-projects/hawr-feedback/2026-05-12-partners-image-text-on-negative-space-side.md
   was preserved historically — resolution: field on that note documents
   the reversal. */

/* ----- Brand tokens ----- */
:root {
  --ha-navy:        #0F2D52;
  --ha-navy-700:    #1B3A66;
  --ha-navy-500:    #4F6B8E;
  --ha-navy-600:    #3F557A;  /* WCAG AA-passing navy for body text on white/paper */
  --ha-navy-100:    #D5DDE9;
  --ha-blue-50:     #EDF1F7;  /* very light navy tint — primary band tone */
  --ha-red:         #C8102E;
  /* Cool-white palette (replaced the warm beige tones 2026-05-05 per
     Jim's feedback that the previous warm tints read as beige next to
     the navy hero). The aliases below preserve the old token names so
     downstream rules don't have to change. */
  --ha-off-white:   #FFFFFF;  /* was #F7F4EE */
  --ha-paper:       #F8FAFC;  /* was #FDFBF6 — faint cool white for cards */
  --ha-cream:       #EDF1F7;  /* was #EFEADE — collapsed onto blue-50 */
  --line-1:         1px solid var(--ha-navy-100);
  --ha-rule:        4px;
  --ha-radius:      4px;       /* brand spec: cards/inputs use 4px */
  /* Default hero photography. Per brand-guidelines.md: hero photography
     uses a linear navy → navy/90% gradient from bottom to mid-height
     to protect white text. Pages can override --hero-image inline on
     a specific .band--navy section to use a different photo. */
  --hero-image:     url('/assets/heros/soldiers-559761_1920.jpg');
  --hero-overlay:   linear-gradient(180deg, rgba(15,45,82,0.55) 0%, rgba(15,45,82,0.92) 80%);

  --font-serif:     'Source Serif 4', Georgia, serif;
  --font-sans:      Arial, Helvetica, sans-serif;

  --shadow-1:       0 1px 3px rgba(15,45,82,0.08);
  --shadow-2:       0 6px 18px rgba(15,45,82,0.10);
  --shadow-sticky:  0 2px 8px rgba(15,45,82,0.12);

  --bp-tablet:      768px;
  --bp-desktop:     1024px;

  --header-h:       72px;
  --max-width:      1200px;
  --max-width-narrow: 880px;
}

/* ----- Accessibility primitives -----
 * Global focus-visible ring (WCAG 2.4.7), keyboard-revealed skip link
 * (WCAG 2.4.1), and a screen-reader-only utility for hidden labels.
 */
*:focus-visible {
  outline: 2px solid var(--ha-red);
  outline-offset: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ha-navy); color: var(--ha-off-white);
  padding: 12px 16px; text-decoration: underline;
  font-family: var(--font-sans); font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }
.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;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Sticky header is 72px tall; padding the scroll container ensures anchor
   jumps, .scrollIntoView(), and focus scrolls land below the header
   instead of behind it. Doesn't affect free user scrolling — that overlap
   is intrinsic to position:sticky. */
html { scroll-padding-top: 88px; }
body {
  background: var(--ha-blue-50);
  color: var(--ha-navy);
  font: 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a  { color: var(--ha-navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ha-red); }
button { font: inherit; cursor: pointer; }

/* ----- Typography ----- */
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ha-navy); margin: 0 0 12px; line-height: 1.2; }
h1 { font-size: 40px; font-weight: 700; }
h2 { font-size: 28px; font-weight: 700; }
h3 { font-size: 22px; font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }
.eyebrow {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ha-navy-600);
}
.rule {
  width: 32px; height: var(--ha-rule);
  background: var(--ha-red);
  margin: 14px 0;
  border: 0;
}

/* ----- Sticky header — off-white per brand, navy-100 hairline rule ----- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ha-off-white);
  border-bottom: var(--line-1);
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 20px;
  transition: box-shadow .15s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sticky); }
.site-header__inner {
  width: 100%; max-width: var(--max-width);
  margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.site-header__logo { margin-right: auto; }    /* pushes everything else right */
.site-header__logo img { height: 36px; }
.site-nav { display: flex; gap: 28px; align-items: center; }
.site-nav a {
  font: 700 13px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ha-navy);
  padding: 12px 0;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--ha-red); }
.site-header__search {
  background: transparent; border: 0; padding: 8px;
  color: var(--ha-navy);
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Hamburger toggle (only visible <= tablet) */
.site-header__hamburger { display: none; background: transparent; border: 0; padding: 10px; min-width: 44px; min-height: 44px; }
.site-header__hamburger span,
.site-header__hamburger span::before,
.site-header__hamburger span::after {
  display: block; width: 22px; height: 2px; background: var(--ha-navy);
  position: relative;
}
.site-header__hamburger span::before, .site-header__hamburger span::after {
  content: ''; position: absolute; left: 0;
}
.site-header__hamburger span::before { top: -7px; }
.site-header__hamburger span::after  { top: 7px; }

/* ----- Footer ----- */
.site-footer {
  background: var(--ha-navy);
  color: var(--ha-off-white);
  padding: 48px 20px 24px;
  margin-top: 64px;
}
.site-footer__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 36px;
}
.site-footer h4 {
  color: var(--ha-off-white);
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer a { color: var(--ha-off-white); text-decoration: none; }
.site-footer a:hover { color: var(--ha-red); }
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; }
.site-footer__nav li { margin-bottom: 8px; font-size: 14px; }
.site-footer__social { display: flex; gap: 14px; }
.site-footer__social a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(247,244,238,0.3);
}
.site-footer__social svg { width: 20px; height: 20px; fill: currentColor; }
.site-footer__legal {
  border-top: 1px solid rgba(247,244,238,0.2);
  margin-top: 32px; padding-top: 16px;
  font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
}

/* Footer newsletter signup — passive, always-visible signup block at
   the top of the footer. Shares the Mailchimp submission helper
   (newsletter-submit.js) with the first-visit modal. Renders as a
   full-bleed RED band above the navy About/Site/Follow Us columns,
   so it reads as a strong CTA distinct from the rest of the footer.
   Submit button keeps the white-outline-ghost-button pattern from
   .partners-hero-cta — still high-contrast on red. */
.footer-newsletter {
  background-color: var(--ha-red);
  /* Decorative white 5-point stars (HA logo silhouette) scattered across
     the red band at low opacity — subtle brand reinforcement, non-
     distracting. Inline SVG data URI so it's a single HTTP request.
     preserveAspectRatio="xMidYMid slice" keeps the star spacing
     proportional as the band stretches across viewport widths. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='xMidYMid slice'><defs><symbol id='s' viewBox='0 0 24 24'><path d='M12 2L14.4 9.36 22 9.36 15.81 13.85 18.18 21 12 16.51 5.82 21 8.19 13.85 2 9.36 9.6 9.36Z'/></symbol></defs><g fill='white' opacity='0.20'><use href='%23s' x='30' y='18' width='44' height='44'/><use href='%23s' x='110' y='95' width='22' height='22'/><use href='%23s' x='60' y='165' width='20' height='20'/><use href='%23s' x='180' y='175' width='30' height='30'/><use href='%23s' x='240' y='40' width='26' height='26'/><use href='%23s' x='320' y='130' width='22' height='22'/><use href='%23s' x='400' y='28' width='20' height='20'/><use href='%23s' x='460' y='180' width='24' height='24'/><use href='%23s' x='540' y='90' width='28' height='28'/><use href='%23s' x='620' y='30' width='18' height='18'/><use href='%23s' x='690' y='170' width='30' height='30'/><use href='%23s' x='760' y='90' width='22' height='22'/><use href='%23s' x='820' y='25' width='38' height='38'/><use href='%23s' x='890' y='160' width='24' height='24'/><use href='%23s' x='960' y='40' width='28' height='28'/><use href='%23s' x='1040' y='130' width='34' height='34'/><use href='%23s' x='1090' y='30' width='22' height='22'/><use href='%23s' x='1140' y='180' width='28' height='28'/></g></svg>");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* Negative horizontal margin breaks out of .site-footer's 20px
     padding so the red band reaches the viewport edges; the negative
     top margin pulls it up flush with the footer's top edge so the
     red band sits directly under the page content above. Internal
     padding re-applies horizontal gutters for content. */
  margin: -48px -20px 40px;
  padding: 32px 20px 36px;
}
.footer-newsletter__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.footer-newsletter__title {
  color: var(--ha-off-white);
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.footer-newsletter__desc {
  color: rgba(247,244,238,0.85);
  font: 14px/1.5 var(--font-sans);
  margin: 0 0 14px;
  max-width: 60ch;
}
.footer-newsletter__form {
  display: flex;
  gap: 12px;
  align-items: stretch;
  max-width: 520px;
  margin: 0;
}
.footer-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  font: 14px var(--font-sans);
  border: 1px solid rgba(247,244,238,0.3);
  background: var(--ha-off-white);
  color: var(--ha-navy);
}
.footer-newsletter__input:focus {
  border-color: var(--ha-red);
  box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.2);
}
.footer-newsletter__input:focus-visible {
  outline: 2px solid var(--ha-red);
  outline-offset: 2px;
  border-color: var(--ha-red);
}
.footer-newsletter__submit {
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--ha-off-white);
  color: var(--ha-off-white);
  font: 700 13px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  white-space: nowrap;
}
.footer-newsletter__submit:hover { background: var(--ha-off-white); color: var(--ha-navy); }
.footer-newsletter__submit:focus-visible { outline: 2px solid var(--ha-red); outline-offset: 2px; }
.footer-newsletter__submit[disabled] { opacity: 0.6; cursor: wait; }
.footer-newsletter__status {
  color: rgba(247,244,238,0.85);
  font: 13px/1.4 var(--font-sans);
  margin: 12px 0 0;
  min-height: 18px;
}
.footer-newsletter__status[data-state="error"] { color: var(--ha-red); }
@media (max-width: 720px) {
  .footer-newsletter__form { flex-direction: column; gap: 12px; max-width: 100%; }
  .footer-newsletter__submit { width: 100%; }
}

/* ----- Breakpoints ----- */
/* Tablet and below: hide horizontal nav, show hamburger */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--ha-paper);
    padding: 18px 20px;
    border-bottom: 1px solid var(--ha-navy);
    gap: 8px;
  }
  .site-header__hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
  body { font-size: 17px; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
}

/* Phone: tighter padding, smaller hero text */
@media (max-width: 480px) {
  .site-header { padding: 0 14px; }
  .site-header__logo img { height: 28px; }
  h1 { font-size: 28px; }
  .site-footer { padding: 36px 14px 20px; }
}

/* ----- Container -----
   2026-05-18: horizontal padding pass per Bethany Dameron's feedback in
   10-projects/hawr-feedback/2026-05-18-about-more-padding-on-sides.md.
   Q14 decision (Olivia 2026-05-18): audit found 0 opt-outs (every page
   already used .container or an equivalent max-width-1200 + 24px-padding
   wrapper). The complaint was the gutter value, not opt-outs. Widened
   to 48 / 32 / 24 (desktop / tablet / phone) so the content sits inside
   more generous breathing room at editorial reviewer-typical viewports
   (1024-1280). Mirrored at 7 other invocations that hard-code the
   gutter: .list-layout (list-page.css), .shorts-band__head (watch.html),
   .wall-section + .cta-strip (advice.html), .legal-page__inner
   (privacy.html + terms.html + build_legal.py), .partner-hero__inner
   inherits .container so no echo needed. No design-token (--max-width)
   change. */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 48px; }
.container--narrow { max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 48px; }
@media (max-width: 768px) { .container, .container--narrow { padding: 0 32px; } }
@media (max-width: 480px) { .container, .container--narrow { padding: 0 24px; } }

/* Section description - sits between the section h2 + red rule and
   the section's promo grid. Brand voice: short, action-oriented. */
.section-desc {
  margin: 0 0 22px;
  max-width: 60ch;
}

/* ----- Section bands — alternating page surfaces ----- */
.band             { padding: 56px 0; }
.band--alt        { background: var(--ha-blue-50); padding: 56px 0; }
.band--cream      { background: var(--ha-blue-50); padding: 56px 0; }  /* alias — old class still works */
.band--paper      { background: var(--ha-paper); padding: 56px 0; }
.band--white      { background: var(--ha-off-white); padding: 56px 0; }
.band--navy {
  /* Photo-backed hero per brand spec. Gradient overlay sits on top of
     the photo to protect white text. Pages can opt out by setting
     `--hero-image: none` on the section, or override with a different
     photo by setting `--hero-image: url(...)` inline. */
  background:
    var(--hero-overlay),
    var(--hero-image) center / cover no-repeat,
    var(--ha-navy);
  color: var(--ha-off-white);
  padding: 96px 0 80px;
}
.band--navy h1, .band--navy p {
  text-shadow: 0 2px 8px rgba(15,45,82,0.45);
}
.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4 { color: var(--ha-off-white); }
.band--navy h1    { font-size: 48px; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 18px; }
.band--navy p     { color: rgba(247,244,238,0.92); font-size: 18px; line-height: 1.55; }
.band--navy .eyebrow { color: var(--ha-red); margin-bottom: 14px; }
.band--navy .rule { background: var(--ha-red); width: 80px; margin: 0 0 28px; }
@media (max-width: 768px) {
  .band--navy { padding: 56px 0 48px; }
  .band--navy h1 { font-size: 36px; }
}
@media (max-width: 480px) {
  .band--navy { padding: 44px 0 36px; }
  .band--navy h1 { font-size: 30px; }
}

/* ----- Card primitive — per brand "Card anatomy" ----- */
.card {
  background: var(--ha-paper);
  border: var(--line-1);
  border-radius: var(--ha-radius);
  box-shadow: var(--shadow-2);
  display: block;
  text-decoration: none;
  color: var(--ha-navy);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
  overflow: hidden;
}
.card:hover {
  box-shadow: 0 12px 28px rgba(15,45,82,0.14);
  border-color: var(--ha-navy-500);
  transform: translateY(-1px);
}
.card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ha-navy-100);
}
.card__image--3-2 { aspect-ratio: 3 / 2; }
.card__image--16-10 { aspect-ratio: 16 / 10; }
.card__body { padding: 24px; }
.card__body--compact { padding: 18px 20px 20px; }
.card__eyebrow {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ha-red);
  margin-bottom: 8px;
}
.card__title {
  font: 700 20px/1.25 var(--font-serif);
  color: var(--ha-navy);
  margin: 0 0 10px;
}
.card__title--sm { font-size: 17px; line-height: 1.3; }
.card__meta {
  font: 13px/1.4 var(--font-sans);
  color: var(--ha-navy-600);
  margin-top: 8px;
}
.card__excerpt {
  font: 14px/1.5 var(--font-sans);
  color: var(--ha-navy);
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- Click-to-activate video pattern ----- */
.video-frame {
  position: relative;
  background: var(--ha-navy);
  aspect-ratio: 16 / 9;
  cursor: pointer;
  overflow: hidden;
}
.video-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ----- Thumbnail tint overlay -----
 * Translucent navy layer softens busy YouTube thumbnails (they often have
 * burned-in text) so multiple cards on a page don't compete for the eye.
 * Removed on hover so the focused card pops. Suppressed once an iframe
 * is inserted (i.e. video playing) so the player isn't tinted. */
.video-frame::after,
.card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(15, 45, 82, 0.32);
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1;
}
.video-frame:hover::after,
.card:hover .card__media::after,
.home-story:hover .card__media::after { opacity: 0; }
.video-frame:has(iframe)::after { display: none; }
.video-frame .play-badge { z-index: 2; }
.card__media { position: relative; overflow: hidden; }
.card__media .card__image { display: block; }
.video-frame .play-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  background: var(--ha-red);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  border: 0;
  pointer-events: none;
}
.video-frame .play-badge::before {
  content: ''; display: block;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---- Video modal — one-at-a-time playback site-wide ----
 * Backed by assets/video-modal.js. The modal is built lazily on the
 * first .video-frame click; closing it clears the iframe so audio
 * stops cleanly (advice 2026-05-04-simultaneous-videos-modal-suggestion).
 */
.ha-video-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ha-video-modal[hidden] { display: none; }
.ha-video-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(15,45,82,0.78);
  cursor: pointer;
}
.ha-video-modal__panel {
  position: relative;
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 48px);
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.ha-video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.ha-video-modal__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.ha-video-modal__close {
  position: absolute;
  top: -38px;
  right: 0;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  color: var(--ha-off-white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.ha-video-modal__close:hover { color: var(--ha-red); }
.ha-video-modal__close:focus-visible { outline: 2px solid var(--ha-red); outline-offset: 2px; }
body.ha-video-modal-open { overflow: hidden; }
@media (max-width: 768px) {
  .ha-video-modal { padding: 12px; }
  /* Bigger, higher-contrast close button on mobile — Jim flagged the
     desktop 32px transparent treatment as too small/hard to see at
     touch sizes. 44x44 meets WCAG 2.5.5 target-size; solid navy fill
     plus white border keeps it visible against any iframe content
     behind. */
  .ha-video-modal__close {
    top: -52px;
    width: 44px; height: 44px;
    background: var(--ha-navy);
    color: var(--ha-off-white);
    border: 2px solid var(--ha-off-white);
    border-radius: 50%;
  }
  .ha-video-modal__close svg { width: 22px; height: 22px; }
  .ha-video-modal__close:hover, .ha-video-modal__close:active {
    background: var(--ha-red);
    color: var(--ha-off-white);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Print / preview ----
 * Without a print stylesheet, browsers paginate the live page including
 * sticky-positioned chrome and the Usersnap widget, which produces a
 * spurious blank trailing page and inconsistent margins (the sticky
 * header forces a page break, the footer's grid leaves big gaps).
 * This block:
 *   - normalizes @page margins (0.5in all sides — fits Letter and A4)
 *   - hides interactive site chrome that has no place on paper
 *     (sticky header buttons, social SVGs, Usersnap widget, video
 *     play overlays)
 *   - drops sticky positioning so content flows naturally
 *   - suppresses background colors / shadows so ink isn't wasted
 *   - prevents bands and cards from being split mid-element
 */
@media print {
  @page { margin: 0.5in; }
  html, body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Drop interactive site chrome */
  .site-header__hamburger,
  .site-header__search,
  .site-footer__social,
  .search-modal,
  .article__back,
  .play-badge,
  .video-frame button,
  iframe[src*="usersnap"],
  div[id^="usersnap"],
  noscript { display: none !important; }
  /* Logo header stays but loses sticky so it doesn't push a blank page */
  .site-header { position: static !important; box-shadow: none !important; background: #fff !important; }
  body { font-size: 11pt; line-height: 1.5; }
  main, .container, .article, section, .band {
    max-width: 100% !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #000 !important;
  }
  /* Tight up bands so each one doesn't claim a fresh page */
  .band, .partner-band, .list-page-band { padding: 12pt 0 !important; }
  /* Avoid breaking inside cards / video frames / paragraphs */
  .card, .partner-band, .video-frame, .article__hero, .article__video,
  h1, h2, h3, h4, p, li, blockquote {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Headings shouldn't sit alone at the bottom of a page */
  h1, h2, h3, h4 { break-after: avoid-page; page-break-after: avoid; }
  /* Don't leak iframe video embeds to print */
  .video-frame iframe { display: none !important; }
}