/* Copied from reliasim-site wwwroot/css/site-chrome.css on 2026-11-06 for the ReliaStats pages
   (guide selector keyed on article.wrap.has-rail instead of the reliasim.com canonical).
   Canonical site header — ONE definition for every page on reliasim.com.
 *
 * The nav was defined per-page and had drifted: index carried seven links,
 * method six, the guides five, pricing/training/case-study three, and
 * conferences, license, privacy, signup and walkthrough had no header at all.
 * This file is the single source.
 *
 * Colours are LITERAL, and there is deliberately no :root block. An earlier
 * version declared the shared tokens here; because this sheet loads last it
 * overrode pages that define the same names for their own palette —
 * license.html sets --text for a light page, and its body copy turned pale
 * grey on white. The nav is a fixed dark bar and does not need to be themeable,
 * so it carries its own values and cannot leak into the page.
 */

/* Scoped to the page header. This selector was a bare `nav {}`, which caught
   every <nav> on the page — the moment a second one appeared (the article
   rail's contents list) it inherited a 64px sticky bar and landed on top of
   its neighbours. The header nav is a direct child of <body> on all 41 pages. */
body > nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(19,31,41,0.96); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(112,206,239,0.14);
  font-family: 'Montserrat', Arial, sans-serif;
  padding: 0 5vw; height: 64px;
  display: flex; align-items: center; gap: 8px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-brand img { height: 32px; }
.nav-links { display: flex; gap: 26px; flex: 1; justify-content: center; }
.nav-links a { font-size: 14px; white-space: nowrap; color: #D3DEE6; font-weight: 600; transition: color 0.15s; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a.primary { color: #70CEEF; }
.nav-links a.primary:hover { color: #fff; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-logo-link { display: flex; align-items: center; padding: 4px 8px; border-radius: 6px;
  border: 1px solid transparent; transition: border-color 0.15s, opacity 0.15s; opacity: 0.8; }
.nav-logo-link:hover { border-color: #36536B; opacity: 1; }
.nav-cta {
  background: #B43F3F; color: #fff; font-size: 14px; font-weight: 700;
  padding: 10px 18px; border-radius: 8px; border: none; font-family: 'Montserrat', Arial, sans-serif;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter 0.15s; flex-shrink: 0;
}
.nav-cta:hover { background: #CC4E4E; color: #fff; text-decoration: none; }
.nav-mobile-toggle { display: none; background: rgba(255,255,255,.06); border: 1px solid rgba(112,206,239,0.3); color: #fff !important; border-radius: 6px; color: inherit; font-size: 21px; line-height: 1; cursor: pointer; padding: 6px 12px; }

/* Tighten the gaps before the drawer takes over rather than wrap. */
@media (max-width: 1150px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 14px; }
}

@media (max-width: 768px) {
  .nav-mobile-toggle { display: block; margin-left: auto; }
  .nav-links { display: none !important; }
  .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(19,31,41,0.98);
    padding: 14px 5vw;
    gap: 12px;
    z-index: 90;
    border-bottom: 1px solid #36536B;
  }
}



/* ── Article rail ─────────────────────────────────────────────────────────
   Prose articles ran 1064px of unbroken text inside a 1440px window: a 74%
   column with ~188px of dead margin either side. The fix is a real second
   column, not a wider one. Contents and related links move into a sticky
   rail, so the page fills the viewport while the prose keeps a ~90-character
   measure. The rail is placed left by grid but comes AFTER the article in the
   markup, so screen readers and mobile both get the prose first. */
.wrap.has-rail {
  max-width: 1400px;
  padding-left: min(4vw, 40px);
  padding-right: min(4vw, 40px);
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 0 56px;
  align-items: start;
}
.wrap.has-rail > .article-body { grid-column: 2; grid-row: 1; min-width: 0; }
.wrap.has-rail > .article-rail {
  grid-column: 1; grid-row: 1;
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 24px;
  font-size: 14px; line-height: 1.6;
}

.article-rail .rail-h {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint, #B9C9D5); margin: 0 0 10px;
}
.article-rail nav { display: flex; flex-direction: column; gap: 7px; }
.article-rail nav a {
  color: var(--text-dim, #D3DEE6); text-decoration: none; padding-left: 11px;
  border-left: 2px solid var(--border, #36536B); line-height: 1.45;
  transition: color 0.15s, border-color 0.15s;
}
.article-rail nav a:hover { color: var(--text, #fff); border-left-color: var(--rail-mark, #70CEEF); text-decoration: none; }
.article-rail nav a.current { color: var(--text, #fff); border-left-color: var(--rail-mark, #70CEEF); }

.article-rail .rail-related { border-top: 1px solid var(--border, #36536B); padding-top: 20px; }
.article-rail .rail-related a { display: block; color: var(--text-dim, #D3DEE6); text-decoration: none; margin-bottom: 7px; }
.article-rail .rail-related a:hover { color: var(--blue, #70CEEF); text-decoration: none; }

.article-rail .rail-cta {
  display: block; text-align: center; background: #B43F3F; color: #fff;
  font-size: 14px; font-weight: 700; padding: 11px 16px;
  border-radius: 8px; text-decoration: none; transition: filter 0.15s;
}
.article-rail .rail-cta:hover { background: #CC4E4E; color: #fff; text-decoration: none; }

/* Below the rail's breakpoint the grid collapses. The article comes first in
   the markup, so it simply stacks above the links; the contents list is dead
   weight on a phone and is dropped. */
@media (max-width: 1080px) {
  .wrap.has-rail { display: block; max-width: 1180px; }
  .wrap.has-rail > .article-rail {
    position: static; margin-top: 44px; padding-top: 24px;
    border-top: 1px solid var(--border, #36536B);
  }
  .article-rail .rail-toc { display: none; }
  .article-rail .rail-related { border-top: none; padding-top: 0; }
}


/* ── Header nav: collapse point ───────────────────────────────────────────
   The collapse point is tied to the link count. v7.548 cut the bar from nine
   links to six (Sandbox, Capabilities, Case Studies, Industries, Learn,
   Pricing) plus the "Free line assessment" button. Measured at the 14px floor:
   logo 168 + six links 403 + five 18px gaps + button 190 + 10vw padding, so
   the row needs ~965px and the drawer takes over below 980. Add a link and
   this number must move (nine links needed 1100). This lives in
   the shared sheet rather than in each page's inline @media (max-width:768px),
   because those blocks also carry hero and footer rules that belong at 768. */
@media (max-width: 979px) {
  body > nav .nav-links { display: none !important; }
  body > nav .nav-mobile-toggle { display: block; margin-left: 12px; order: 3; }
  body > nav .nav-right { order: 2; }
  body > nav .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(19,31,41,0.98);
    padding: 14px 5vw;
    gap: 12px;
    z-index: 90;
    border-bottom: 1px solid #36536B;
    font-size: 14px;
  }
}


/* ── Case-study at-a-glance ───────────────────────────────────────────────
   The case studies are pure prose — the two shortest carried a single break
   in ~485 words, so the column read as one block. This strip sits under the
   lede: it breaks the page, and it gives a reader skimming for relevance the
   shape of the case (sector, the decision, what the model found, what it was
   worth) without making them read for it. Every value is drawn from the
   article's own text. */
.at-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px 28px;
  margin: 32px 0 40px;
  padding: 24px 26px;
  background: var(--bg2, #22384A);
  border: 1px solid var(--border, #36536B);
  border-left: 3px solid var(--rail-mark, #70CEEF);
  border-radius: 14px;
}
.at-glance > div { min-width: 0; }
.at-glance dt {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim, #D3DEE6); margin: 0 0 6px;
}
.at-glance dd {
  margin: 0; font-size: 16px; line-height: 1.5; color: var(--text, #fff);
}
@media (max-width: 620px) {
  .at-glance { grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ReliaSim brand layer (v7.512) — docs/brand-style-guide.md
   Navy booth ground, Montserrat, one accent (Sky), one action (Signal Red),
   speed-line bars and a halftone dot field. The role tokens live in
   site-tokens.css. This sheet loads after each page's own <style>, so rules
   here win at equal specificity. Page-specific layout stays in the page.

   Surfaces:  body.rs-app          tools (/sandbox, /kiosk): own fonts, no bands
              body.rs-read-white   article reads on a white band
              body.rs-read-mist    article reads on the Mist band
              (neither)            article reads on the navy ground
   Closers:   body.rs-closer-harbor | -halftone | -lightbox | -duotone
              restyle the page's .cta-box.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Type: Montserrat 700 display / 600 labels / 500 text ── */
body:not(.rs-app) { font-family: var(--font); font-weight: 500; }
body:not(.rs-app) button, body:not(.rs-app) input, body:not(.rs-app) select, body:not(.rs-app) textarea { font-family: var(--font); }
body:not(.rs-app) h1, body:not(.rs-app) h2, body:not(.rs-app) h3, body:not(.rs-app) h4 {
  font-family: var(--font) !important; font-weight: 700 !important;
}
body:not(.rs-app) h1, body:not(.rs-app) h2 { letter-spacing: -0.02em !important; }
h1 em, h2 em, h3 em, .hl-amber, .hl-green, .hl-blue, .hl-purple { font-style: normal !important; }
.hl-amber, .hl-green, .hl-blue, .hl-purple { color: var(--hl, var(--sky)) !important; }
body:not(.rs-app) strong, body:not(.rs-app) b { font-weight: 700; }
code, kbd, pre, .mono { font-family: var(--font-mono); }
footer { font-family: var(--font); }

/* ── Eyebrow: a plain uppercase label with a short Sky rule, never a pill ── */
.eyebrow, .eyebrow.green, .eyebrow.amber, .eyebrow.blue {
  display: inline-flex !important; align-items: center; gap: 10px;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; box-shadow: none !important;
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.12em !important;
  text-transform: uppercase; color: var(--eyebrow, var(--sky)) !important;
}
.eyebrow::before {
  content: ''; flex: none; width: 22px; height: 3px; border-radius: 2px;
  background: var(--eyebrow-mark, var(--sky));
}
.eyebrow .eyebrow-dot { display: none !important; }

/* ── Callouts: one accent rule ── */
.callout, .callout.green, .callout.amber, .callout.blue, .callout.red { border-left-color: var(--blue) !important; border-radius: 0 14px 14px 0; }

/* ── Buttons: one action style for every primary; outlines for the rest ── */
.btn { font-family: var(--font); font-weight: 700; border-radius: 8px !important; }
.btn-lg { border-radius: 8px !important; }
.btn-green, .btn-primary, .btn-action, .nav-cta, .article-rail .rail-cta, .rs-action,
.btn-green-solid, .btn-sm.green, .btn.primary, .btn-sm.primary {
  background: var(--action) !important; color: #fff !important; border: 0 !important;
  border-radius: 8px !important; filter: none !important;
}
.btn-green:hover, .btn-primary:hover, .btn-action:hover, .nav-cta:hover,
.article-rail .rail-cta:hover, .rs-action:hover, .btn-green-solid:hover, .btn-sm.green:hover, .btn.primary:hover, .btn-sm.primary:hover { background: var(--action-hi) !important; color: #fff !important; }
.btn-outline, .btn-outline-blue, .btn.outline, .btn-sm.outline, .btn.out {
  background: transparent !important; color: var(--blue) !important; border-radius: 8px !important;
  border: 1.5px solid var(--blue) !important; filter: none !important;
}
.btn-outline:hover, .btn-outline-blue:hover, .btn.outline:hover, .btn-sm.outline:hover, .btn.out:hover { background: rgba(112,206,239,0.10) !important; }
.btn-sm { border-radius: 8px !important; font-family: var(--font); }

/* ── Announcement ribbon ── */
.fws-strip { background: var(--action) !important; border-bottom: 0 !important; }
.fws-strip, .fws-strip * { font-family: var(--font); }
.fws-when { color: #fff !important; font-weight: 600; letter-spacing: 0.1em; font-size: 14px !important; font-family: var(--font) !important; }
.fws-text, .fws-text strong, .fws-text a, .fws-link { color: #fff !important; }
.fws-btn { background: #fff !important; color: var(--action) !important; border-radius: 8px !important; }
.fws-btn:hover { background: #FBEDED !important; filter: none !important; }

/* ── Footer: the deep ground step, white TM logo ── */
footer {
  --text: #EAF1F5; --text-dim: var(--on-ground-2); --text-faint: #B9C9D5; --border: #2B4152;
  background: var(--ground-deep) !important; border-top: 0 !important; color: var(--on-ground-2);
}
footer .footer-brand img { opacity: 1; }
footer .footer-col h4 { color: #fff; font-weight: 600; }
footer .footer-col li a, footer .footer-contact, footer .footer-contact a { color: var(--on-ground-2); }
footer .footer-col li a:hover, footer .footer-contact a:hover { color: var(--sky); }
footer .footer-bottom { color: #B9C9D5; }

/* ── Dark scopes re-assert the ground palette inside light pages ── */
body > nav, footer, .rs-hero, .rs-dark, .rs-band-ground, .rs-band-warm,
body.rs-closer-harbor .cta-box, body.rs-closer-halftone .cta-box, body.rs-closer-duotone .cta-box,
.rs-closer--harbor, .rs-closer--halftone, .rs-closer--duotone {
  --text: #EAF1F5; --text-dim: var(--on-ground-2); --text-faint: #B9C9D5;
  --bg0: var(--ground); --bg1: #182836; --bg2: var(--ground-2); --bg3: var(--ground-3);
  --border: #36536B; --border-lt: #44637D;
  --blue: var(--sky); --green: var(--sky); --amber: var(--sky); --purple: var(--sky); --blue-mid: var(--reliablue);
  --hl: var(--sky); --eyebrow: var(--sky); --eyebrow-mark: var(--sky); --rail-mark: var(--sky);
  color: var(--text);
}
/* Harbor grounds: Sky text is 4.1:1 there, so small accent text goes white */
.rs-band-warm, body.rs-closer-harbor .cta-box, .rs-closer--harbor {
  --blue: #fff; --hl: #fff; --eyebrow: #fff;
  --bg0: var(--warm); --bg1: var(--warm); --bg2: #22405A; --bg3: #284B66; --border: #3F7090; --border-lt: #4A7B9A;
  --text-dim: #E3EDF2; --text-faint: #D2E1E9;
}

/* ── Former light scopes, now slate bands (v7.548) ───────────────────────
   Amber, 2026-09-27: navy -> Mist/white meetings were stark and hard on the
   eyes. Every band that used to be light (Mist, white, the white/Mist reading
   bodies, the industries articles, the lightbox closer) now sits on slate
   #243B4D with the dark token set, the treatment the home page's
   .rs-band-slate introduced. Slate is <=1.4:1 from navy #1B2D3B, the hero's
   #15222D and Harbor #2C5977, so neighbouring bands step gently. Cards on it
   take the navy ground. The class names stay so no page needs editing; the
   light-only tokens (--ink, --band, --paper, --card-light, --harbor) are
   re-pointed inside the scope so page CSS written against them follows.
   Text: #EAF1F5 10:1, --text-dim 8.5:1, --text-faint lifted to #C4D2DC (7.5:1). */
.rs-light, .rs-band-mist, .rs-band-white, body.rs-read-white, body.rs-read-mist,
body.rs-closer-lightbox .cta-box, .rs-closer--lightbox,
html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) body {
  --text: #EAF1F5; --text-dim: var(--on-ground-2); --text-faint: #C4D2DC;
  --bg0: #243B4D; --bg1: #1F3445; --bg2: var(--ground); --bg3: var(--ground-2);
  --border: #3D5A72; --border-lt: #4A6A84;
  --blue: var(--sky); --green: var(--sky); --amber: var(--sky); --purple: var(--sky); --blue-mid: var(--reliablue);
  --hl: var(--sky); --eyebrow: var(--sky); --eyebrow-mark: var(--sky); --rail-mark: var(--sky);
  --ink: #EAF1F5; --ink-2: var(--on-ground-2);
  --band: #243B4D; --paper: #243B4D; --card-light: var(--ground);
  --harbor: var(--sky); --accent-band: var(--sky); --stroke: var(--reliablue);
  color: var(--text);
}
.rs-light, .rs-band-mist, .rs-band-white { background: #243B4D !important; border: 0 !important; }
body.rs-read-white, body.rs-read-mist,
html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) body { background: #243B4D !important; }
/* literal whites in article CSS were written for the dark page and stay correct */
body.rs-read-white .article-body a:not([class]), body.rs-read-mist .article-body a:not([class]),
.rs-band-mist p a:not([class]), .rs-band-white p a:not([class]) {
  color: var(--sky); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(112,206,239,0.5);
}
body.rs-read-white .article-body a:not([class]):hover, body.rs-read-mist .article-body a:not([class]):hover { color: #fff; text-decoration-color: currentColor; }
body.rs-read-white :is(.math, .callout, .verdict, .ask, .quote),
body.rs-read-mist :is(.math, .callout, .verdict, .ask, .quote) { background: var(--ground); box-shadow: none; border-color: #3D5A72; }
body.rs-read-white .verdict, body.rs-read-mist .verdict { background: transparent; }
body.rs-read-white td, body.rs-read-mist td { border-bottom-color: #3D5A72; }
body.rs-read-white .article-body img, body.rs-read-mist .article-body img { border-radius: 14px; }

/* ── Speed-line bars (booth graphic): rounded ReliaBlue pills in offset pairs
      running off the right edge, one Signal Red bar. Decorative only. ── */
.rs-bars {
  /* The SVGs slice from their left edge (xMinYMid slice), so each bar keeps its
     rounded nose and the container's right edge cuts them off at the page edge. */
  position: absolute; pointer-events: none; z-index: 0;
  background: url('/images/brand/speed-bars-right.svg') left center / 100% 100% no-repeat;
}
.rs-bars--right  { top: 50%; transform: translateY(-50%); height: min(640px, 92%); left: 50%; right: 0; }
.rs-bars--top    { top: 26px; left: 30%; right: 0; height: 118px;
                   background-image: url('/images/brand/speed-bars-strip-a.svg'); }
.rs-bars--bottom { bottom: 26px; left: 22%; right: 0; height: 118px;
                   background-image: url('/images/brand/speed-bars-strip-b.svg'); }
.rs-bars--closer { top: 12%; bottom: 12%; left: 58%; right: 0;
                   background-image: url('/images/brand/speed-bars-closer.svg'); }

/* halftone dot field fading in from the right edge */
.rs-dots::before, .rs-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle, rgba(74,154,196,0.55) 0 2.2px, transparent 2.8px) 0 0 / 14px 14px,
    radial-gradient(circle, rgba(74,154,196,0.35) 0 1.3px, transparent 1.8px) 7px 7px / 14px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, rgba(0,0,0,0.35) 62%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 34%, rgba(0,0,0,0.35) 62%, #000 100%);
}

/* ── Page heroes ─────────────────────────────────────────────────────────
   One header, six treatments. Each page picks one (see the brand guide's
   page map) so neighbours in the nav never share a hero and closer. */
.rs-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ground-grad) #1D3447; color: var(--text);
  padding: 68px 5vw 76px;
}
.rs-hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }
.rs-hero-copy { max-width: 640px; }
.rs-hero .eyebrow { margin-bottom: 18px !important; }
.rs-hero h1 {
  color: var(--head-on-ground) !important; font-size: clamp(32px, 4.4vw, 52px) !important; line-height: 1.1 !important;
  margin: 0 0 18px !important; text-wrap: balance; max-width: 22ch;
}
.rs-hero h1 em, .rs-hero h1 .hl-amber, .rs-hero h1 .hl-green, .rs-hero h1 .hl-blue { color: var(--sky) !important; }
.rs-hero .lede, .rs-hero p {
  color: var(--on-ground-2) !important; font-size: 18px !important; line-height: 1.65 !important;
  max-width: 62ch; margin: 0 0 14px !important;
}
.rs-hero p strong { color: #fff !important; }
.rs-hero p a:not([class]) { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(112,206,239,0.6); }
.rs-hero .lede:last-child, .rs-hero p:last-child { margin-bottom: 0 !important; }
.rs-hero-meta { margin-top: 16px; font-size: 14px; color: #B9C9D5; }
.rs-hero-meta a { color: #fff; }

/* split layouts */
.rs-hero--bars .rs-hero-copy { max-width: 620px; }
.rs-hero--photo-right .rs-hero-inner,
.rs-hero--screen .rs-hero-inner,
.rs-hero--gallery .rs-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center;
}
.rs-hero--photo-left .rs-hero-inner {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center;
}
.rs-hero--photo-left .rs-hero-visual { order: -1; }
.rs-hero-visual { position: relative; min-width: 0; }

/* pill-masked, duotoned line photo */
.rs-pill {
  position: relative; overflow: hidden; height: 380px;
  border-radius: 260px 14px 14px 260px;
  background: linear-gradient(135deg, #1D3447 0%, #2A95BA 62%, #70CEEF 100%);
  box-shadow: 0 24px 60px rgba(8,18,26,0.45);
}
.rs-pill--right { border-radius: 14px 260px 260px 14px; }
.rs-pill img, .rs-duo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.12) brightness(1.04); mix-blend-mode: luminosity; opacity: 0.95;
}

/* product screenshot frame: never masked, 14px corners */
.rs-screen {
  position: relative; border-radius: 14px; overflow: hidden; background: #0E1822;
  border: 1px solid rgba(112,206,239,0.28); box-shadow: 0 24px 60px rgba(8,18,26,0.5);
}
.rs-screen img { display: block; width: 100%; height: auto; }

/* two- or three-image gallery */
.rs-gallery { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: auto auto; gap: 14px; }
.rs-gallery figure { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px rgba(8,18,26,0.4); }
.rs-gallery figure:first-child { grid-row: 1 / span 2; }
.rs-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* centred text over the booth gradient, bars top and bottom */
.rs-hero--center { text-align: center; padding: 150px 5vw 168px; }
.rs-hero--center .rs-hero-copy { max-width: 820px; margin: 0 auto; }
.rs-hero--center h1 { margin-left: auto !important; margin-right: auto !important; }
.rs-hero--center .lede, .rs-hero--center p { margin-left: auto !important; margin-right: auto !important; }
.rs-hero--center.rs-hero--short { padding: 118px 5vw 132px; }
.rs-hero--center.rs-hero--short .rs-bars--top { height: 84px; top: 16px; }
.rs-hero--center.rs-hero--short .rs-bars--bottom { height: 84px; bottom: 16px; }

/* full-bleed duotone photo behind centred text */
.rs-hero--duotone { text-align: center; padding: 120px 5vw 132px; background: linear-gradient(135deg, #1D3447, #2A95BA); }
.rs-hero--duotone > .rs-duo { position: absolute; inset: 0; z-index: -2; }
.rs-hero--duotone::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(21,34,45,0.70) 0%, rgba(21,34,45,0.78) 100%);
}
.rs-hero--duotone::before { display: none; }
.rs-hero--duotone .rs-hero-copy { max-width: 820px; margin: 0 auto; }
.rs-hero--duotone h1, .rs-hero--duotone .lede, .rs-hero--duotone p { margin-left: auto !important; margin-right: auto !important; }

@media (max-width: 900px) {
  .rs-hero { padding: 44px 16px 150px; }
  .rs-hero--photo-right .rs-hero-inner, .rs-hero--photo-left .rs-hero-inner,
  .rs-hero--screen .rs-hero-inner, .rs-hero--gallery .rs-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .rs-hero--photo-left .rs-hero-visual { order: 0; }
  .rs-pill { height: 210px; border-radius: 140px 14px 14px 140px; }
  .rs-pill--right { border-radius: 14px 140px 140px 14px; }
  .rs-hero .rs-bars--right, .rs-hero .rs-bars--top { display: none; }
  .rs-hero .rs-bars--bottom, .rs-hero .rs-bars--phone, .rs-home-hero .rs-bars--phone {
    display: block; top: auto; bottom: 22px; left: 8%; right: 0; width: auto; height: 96px; transform: none;
    background-image: url('/images/brand/speed-bars-strip-b.svg');
  }
  .rs-hero--center, .rs-hero--duotone { padding: 56px 16px 150px; }
  .rs-hero h1 { font-size: clamp(30px, 8vw, 40px) !important; }
  .rs-hero .lede, .rs-hero p { font-size: 16px !important; }
  .rs-gallery { grid-template-columns: 1fr 1fr; }
  .rs-gallery figure:first-child { grid-column: 1 / span 2; grid-row: auto; }
}
.rs-bars--phone { display: none; }

/* ── Closers ─────────────────────────────────────────────────────────────
   The page's .cta-box takes one of four treatments. */
body.rs-closer-harbor .cta-box, .rs-closer--harbor {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--warm) !important; border: 0 !important; border-radius: 14px 14px 72px 14px !important;
  color: #fff; text-align: left !important; padding: 40px 40px 44px !important;
}
body.rs-closer-harbor .cta-box::after, .rs-closer--harbor::after {
  content: ''; position: absolute; top: 12%; bottom: 12%; left: 62%; right: 0; z-index: -1;
  background: url('/images/brand/speed-bars-closer.svg') left center / 100% 100% no-repeat;
}
body.rs-closer-harbor .cta-box > *, .rs-closer--harbor > * { max-width: 560px; }

body.rs-closer-halftone .cta-box, .rs-closer--halftone {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ground) !important; border: 1px solid #36536B !important; border-radius: 14px !important;
  color: #fff;
}
body.rs-closer-halftone .cta-box::before, .rs-closer--halftone::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle, rgba(74,154,196,0.6) 0 2.4px, transparent 3px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 0%, rgba(0,0,0,0.4) 35%, transparent 70%);
          mask-image: radial-gradient(ellipse at 100% 100%, #000 0%, rgba(0,0,0,0.4) 35%, transparent 70%);
}

body.rs-closer-lightbox .cta-box, .rs-closer--lightbox {
  background: #243B4D !important; border: 2px solid #2C5977 !important; border-radius: 14px !important;
  color: #EAF1F5; box-shadow: none !important;
}
body.rs-closer-lightbox .cta-box h3, .rs-closer--lightbox h3 { color: #fff !important; }
body.rs-closer-lightbox .cta-box p, .rs-closer--lightbox p { color: var(--on-ground-2) !important; }

body.rs-closer-duotone .cta-box, .rs-closer--duotone {
  position: relative; overflow: hidden; isolation: isolate; border: 0 !important; border-radius: 14px !important;
  background: linear-gradient(135deg, #1D3447 0%, #2A95BA 100%) !important; color: #fff;
}
body.rs-closer-duotone .cta-box::before, .rs-closer--duotone::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('/images/line-robot-arm.jpg') center 40% / cover no-repeat;
  filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; opacity: 0.55;
}
body.rs-closer-duotone .cta-box::after, .rs-closer--duotone::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(21,34,45,0.62);
}
body.rs-closer-harbor .cta-box h3, body.rs-closer-halftone .cta-box h3, body.rs-closer-duotone .cta-box h3,
.rs-closer--harbor h3, .rs-closer--halftone h3, .rs-closer--duotone h3 { color: #fff !important; }
body.rs-closer-harbor .cta-box p, body.rs-closer-halftone .cta-box p, body.rs-closer-duotone .cta-box p { color: var(--on-ground-2) !important; }
body.rs-closer-harbor .cta-box p { color: #E3EDF2 !important; }
@media (max-width: 760px) {
  body.rs-closer-harbor .cta-box, .rs-closer--harbor { padding: 28px 20px 96px !important; border-radius: 14px 14px 48px 14px !important; }
  body.rs-closer-harbor .cta-box::after, .rs-closer--harbor::after { top: auto; bottom: 12px; height: 76px; left: 12%; }
}

/* ── Cards on a band ── */
.rs-band-mist .rs-card, .rs-card {
  background: var(--ground); border: 1px solid #3D5A72; border-radius: 14px; box-shadow: none; color: #EAF1F5;
}

/* ── Line icons in circles (replace emoji) ── */
.rs-icon {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--icon, var(--sky)); display: inline-grid; place-items: center;
  font-size: 0 !important; line-height: 0; background: transparent !important;
}
.rs-icon svg {
  width: 22px; height: 22px; fill: none; stroke: var(--icon, var(--sky));
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.rs-band-warm .rs-icon { --icon: #fff; }

/* ── Quiet links: text with an arrow, used where pill chips used to pile up ── */
.rs-quiet-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 22px 0 0; padding: 0; list-style: none; }
.rs-quiet-links a { color: var(--on-ground-2); font-size: 16px; font-weight: 600; text-decoration: none; }
.rs-quiet-links a::after { content: ' \2192'; color: var(--sky); }
.rs-quiet-links a:hover { color: #fff; }
.rs-quiet-links b { color: var(--sky); font-weight: 700; }

/* ── Tables, rules and focus in the brand roles ── */
:focus-visible { outline-color: var(--sky); }

/* ── Logo: nav and footer sit on the navy ground, so they take the
      alternate-colour TM logo (white "Relia", red "Sim."). Pages that still
      reference the full-colour file get it swapped here: the <img> keeps its
      box and alt text, its own pixels move out of view and the white logo is
      drawn as its background. Same 900 x 171 viewBox, so the size is identical. */
body > nav img[src*="logo-reliasim-color"], footer img[src*="logo-reliasim-color"] {
  object-position: -9999px 0;
  background: url('/logo-reliasim-alt-tm.svg') left center / contain no-repeat;
}

/* ── Article groups restyled from here alone ─────────────────────────────
   guides/*, case-studies/* and industries/* share one article template. They
   are told apart by their canonical URL, so each group gets its own look
   without touching the pages:
     guides        navy ground, booth banner (blue bars), Harbor closer + red bar
     case studies  navy ground, raised navy reading card, booth banner with the red bar,
                   dark closer with a Harbor outline
     industries    Mist reading band, booth banner (blue bars)                */
html:has(article.wrap.has-rail) body,
html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) body,
html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) body { overflow-x: clip; }

html:has(article.wrap.has-rail) .wrap.has-rail,
html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .wrap.has-rail,
html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) .wrap.has-rail {
  position: relative; isolation: isolate; padding-top: 168px;
}
html:has(article.wrap.has-rail) .wrap.has-rail::before,
html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .wrap.has-rail::before,
html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) .wrap.has-rail::before {
  content: ''; position: absolute; z-index: -1; top: 0; height: 124px;
  left: calc(50% - 50vw); width: 100vw;
  background:
    url('/images/brand/speed-bars-strip-a.svg') right 0 center / min(62vw, 560px) 92px no-repeat,
    radial-gradient(circle, rgba(74,154,196,0.5) 0 2.2px, transparent 2.8px) 0 0 / 14px 14px,
    linear-gradient(162deg, #2C5977 0%, #22405A 45%, #15222D 100%);
  -webkit-mask-image: none; mask-image: none;
}
html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .wrap.has-rail::before {
  background:
    url('/images/brand/speed-bars-strip-b.svg') right 0 center / min(62vw, 560px) 92px no-repeat,
    linear-gradient(162deg, #2C5977 0%, #22405A 45%, #15222D 100%);
}
@media (max-width: 760px) {
  html:has(article.wrap.has-rail) .wrap.has-rail,
  html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .wrap.has-rail,
  html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) .wrap.has-rail { padding-top: 116px; }
  html:has(article.wrap.has-rail) .wrap.has-rail::before,
  html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .wrap.has-rail::before,
  html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) .wrap.has-rail::before {
    height: 84px; background-size: 70vw 64px, 14px 14px, auto;
  }
}

/* guides: Harbor closer with the one red bar */
html:has(article.wrap.has-rail) .cta-box {
  --text: #EAF1F5; --text-dim: #E3EDF2; --text-faint: #D2E1E9; --blue: #fff; --hl: #fff;
  --border: #3F7090; --border-lt: #4A7B9A;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--warm) !important; border: 0 !important; border-radius: 14px 14px 72px 14px !important;
  text-align: left !important; padding: 40px 40px 44px !important; color: #fff;
}
html:has(article.wrap.has-rail) .cta-box::after {
  content: ''; position: absolute; top: 12%; bottom: 12%; left: 62%; right: 0; z-index: -1;
  background: url('/images/brand/speed-bars-closer.svg') left center / 100% 100% no-repeat;
}
html:has(article.wrap.has-rail) .cta-box > * { max-width: 560px; }
html:has(article.wrap.has-rail) .cta-box h3 { color: #fff !important; }
html:has(article.wrap.has-rail) .cta-box p { color: #E3EDF2 !important; }
html:has(article.wrap.has-rail) .cta-box .btn.outline { color: #fff !important; border-color: var(--sky) !important; }
@media (max-width: 760px) {
  html:has(article.wrap.has-rail) .cta-box { padding: 28px 20px 100px !important; border-radius: 14px 14px 48px 14px !important; }
  html:has(article.wrap.has-rail) .cta-box::after { top: auto; bottom: 12px; height: 76px; left: 12%; }
}

/* case studies: the article reads on a raised navy card (no light slab on the
   dark ground: eye-comfort rule), closer outlined in Harbor */
html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .article-body {
  background: var(--ground-2); border: 1px solid var(--ground-3); border-radius: 14px; padding: 48px 52px 52px;
}
html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .article-body a:not([class]) {
  text-decoration: underline; text-underline-offset: 2px;
}
html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .article-body img { border-radius: 10px; }
html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .cta-box {
  background: var(--ground-3) !important; border: 2px solid var(--harbor) !important; border-radius: 14px !important; box-shadow: none !important;
}
html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .cta-box h3 { color: #fff !important; }
@media (max-width: 760px) {
  html:has(link[rel="canonical"][href*="reliasim.com/case-studies/"]) .article-body { padding: 28px 18px 32px; margin: 0 -2vw; }
}

/* industries: the page reads on the slate band (tokens in the slate scope above) */
html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) .article-body a:not([class]) {
  color: var(--sky); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(112,206,239,0.5);
}
html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) .callout,
html:has(link[rel="canonical"][href*="reliasim.com/industries/"]) .glist > * { background: var(--ground); box-shadow: none; border-color: #3D5A72; }

/* ── Eye comfort: v7.512 eased navy <-> light meetings with 120px gradients.
      v7.548 put every band on slate, so there is no light edge left to ease;
      the gradients and the extra padding they needed are gone. */
body.rs-read-white, body.rs-read-mist { overflow-x: clip; }

/* links in running text are underlined, so colour is never the only cue */
:is(article, main, section, .wrap, .content, .rs-hero) :is(p, li, dd, td) a:not([class]) {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.rs-hero .crumbs, .rs-hero .crumbs a { color: var(--on-ground-2) !important; font-size: 14px; }
.rs-hero .crumbs { margin-bottom: 18px !important; }

/* motion: the halftone and bars are static; anything that loops stops for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ── Phones: the header must fit 390px (logo 26px tall, tighter gutters) ── */
@media (max-width: 480px) {
  body > nav { padding: 0 16px !important; gap: 6px !important; }
  body > nav .nav-brand { min-width: 0; flex-shrink: 1; }
  body > nav .nav-brand img { height: 26px !important; width: auto; max-width: 100%; }
  body > nav .nav-cta { padding: 9px 12px !important; font-size: 14px; }
  body > nav .nav-right { gap: 8px; min-width: 0; }
  body > nav .nav-mobile-toggle { margin-left: 6px !important; padding: 6px 10px !important; }
  body > nav .nav-right > :not(.nav-cta) { display: none; }
}

/* ── Quiet text link: the one secondary action beside a red button ── */
.rs-textlink { color: var(--on-ground-2); font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(112,206,239,0.6); }
.rs-textlink:hover { color: #fff; text-decoration-color: currentColor; }

/* ── Section-level closers ── */
.rs-closer--harbor-band { position: relative; overflow: hidden; isolation: isolate; border-radius: 0 0 120px 0; }
.rs-closer--harbor-band > .rs-bars--closer { z-index: -1; }
.rs-closer--harbor-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(112,206,239,0.5) 0 1.6px, transparent 2.1px) 0 0 / 12px 12px;
  -webkit-mask-image: linear-gradient(270deg, transparent 55%, #000 100%); mask-image: linear-gradient(270deg, transparent 55%, #000 100%);
  opacity: 0.4;
}
.rs-duo-band { border-radius: 0 !important; }
.rs-closer--lightbox { padding: 44px 40px; max-width: 900px; margin: 0 auto; }
@media (max-width: 760px) {
  .rs-closer--harbor-band { border-radius: 0 0 56px 0; padding-bottom: 120px !important; }
  .rs-closer--harbor-band > .rs-bars--closer { top: auto; bottom: 16px; height: 80px; left: 10%; }
  .rs-closer--lightbox { padding: 28px 18px; }
}
@media (max-width: 900px) {
  .rs-hero::before, .rs-home-hero::before {
    -webkit-mask-image: linear-gradient(90deg, transparent 70%, #000 100%); mask-image: linear-gradient(90deg, transparent 70%, #000 100%);
  }
}

[hidden] { display: none !important; }
body > nav .nav-links { margin-left: 0; flex: 1; justify-content: center; gap: 26px; }
@media (max-width: 1250px) { body > nav .nav-links { gap: 18px; } }
body > nav .nav-links a { font-family: var(--font) !important; font-weight: 600 !important; text-decoration: none !important; }

/* links inside dark closers stay light (the reading-band link colour is Harbor) */
body.rs-closer-harbor .cta-box a:not([class]), body.rs-closer-halftone .cta-box a:not([class]),
body.rs-closer-duotone .cta-box a:not([class]) { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(112,206,239,0.7); }
body.rs-closer-duotone .cta-box, .rs-closer--duotone { background-color: #1D3447 !important; }
body.rs-closer-harbor .cta-box { background-color: var(--warm) !important; }


/* phones: wide article tables scroll inside the column instead of the page */
@media (max-width: 760px) {
  .article-body table:not(.scroll table):not(.math table) { display: block; overflow-x: auto; max-width: 100%; }
  .article-body .math { overflow-x: auto; max-width: 100%; }
}

/* Centred closers (.cta-section.rs-closer: home, pricing, /reliastats): the speed
   bars ran behind the centred headline on desktop. Keep them in the bottom-right
   corner, under the content, as on phones (Amber, 2026-09-25). */
.cta-section.rs-closer { padding-bottom: 120px; }
.cta-section.rs-closer > .rs-bars--closer { top: auto; bottom: 22px; height: 76px; left: 66%; right: 0; }
@media (max-width: 760px) {
  .cta-section.rs-closer > .rs-bars--closer { left: 30%; height: 64px; }
}

/* No one- or two-word last lines (Amber, 2026-09-25): headings balance their
   lines, running text avoids a short last line. Browsers without support wrap
   as before. */
h1, h2, h3, h4, .eyebrow, .cta-headline { text-wrap: balance; }
/* Paragraphs use pretty, never balance: balance shortens every line to even
   them out, which made intro paragraphs look narrow and cut off (Amber, 2026-09-27). */
p, li, dd, blockquote, figcaption, .lead, .rs-textlink { text-wrap: pretty; }

/* Long page titles (Amber, 2026-09-27): the italic subtitle after the <br> is a
   subtitle, not a second headline. Smaller, on its own line, same words. */
h1 > br + em.hl-amber { display: inline-block; margin-top: 0.3em; font-size: 0.6em; line-height: 1.25; }

/* "by ChiAha" endorsement on the logo line, just right of the logo (Amber,
   2026-09-29). At 1150px and below the nav is already tight (links run into
   it at ~1000px), so there it stacks under the logo and adds no width. */
nav .nav-brand { flex-direction: row; align-items: center; gap: 10px; }
nav .nav-by {
  font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; line-height: 1; color: #B9C9D5; white-space: nowrap;
  /* Centred, the text sits 4px above the wordmark's baseline; drop it so
     "by ChiAha" bottom-aligns with "ReliaSim" (Amber, 2026-09-30). */
  position: relative; top: 4px;
}
/* ChiAha trademark is pending, so ™ (not ®). */
nav .nav-by .tm { font-size: 0.7em; vertical-align: super; line-height: 0; margin-left: 1px; letter-spacing: 0; }
@media (max-width: 1150px) {
  nav .nav-brand { flex-direction: column; align-items: flex-start; gap: 3px; }
  nav .nav-by { padding-left: 2px; font-size: 12px; top: 0; }
}
nav .nav-by:hover { color: #fff; text-decoration: none; }