/* ════════════════════════════════════════════════════════
   JIL Site4 design system — CANONICAL institutional chrome
   Source of truth: jilsovereign.com homepage (homepage.html)
   Structure from JIL_SITE_4.html; palette = jil-tokens gold/navy
   (never mint). Nav/footer partials: header|footer-institutional.
   Legacy v2 nav/footer auto-follow via jil-header.css Site4 rules.
   Version: 20260812i
   ════════════════════════════════════════════════════════ */

:root {
      --navy: #0A0D10;
      --navy2: #102A43;
      --blue: #2563EB;
      --gold: #C9A227;
      --gold-primary: #C9A227;
      --gold-soft: #E4C35A;
      --gold-deep: #A87C1F;
      --gold-light: #F2D47A;
      --text-on-gold: #0B0F16;
      --sand: #f6f1e8;
      --ink: #0f172a;
      --muted: #5b6570;
      --line: rgba(255,255,255,0.14);
      --glow: rgba(201,162,39,0.35);
      --nav-bg: rgba(10,13,16,0.94);
    }
    /* Do NOT unscoped-reset * margin/padding — that flattens docs content
       spacing when this sheet is injected into /docs pages. Box-sizing only. */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body.site4-body {
      font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
      color: var(--ink);
      background: #fff;
      line-height: 1.55;
      margin: 0;
    }
    /* Nav links keep inherit; body content links must not turn navy-on-navy. */
    header.s4-header a { color: inherit; text-decoration: none; }
    /* Header bar uses class="wrap nav" on ONE div — keep horizontal inset here.
       Never set padding to "0.75rem 0" alone on .nav: that wiped left/right margin. */
    header.s4-header .wrap,
    header.s4-header .wrap.nav,
    .s4-footer .wrap,
    footer:has(.foot-top) > .wrap {
      width: min(1120px, 100%);
      max-width: 1120px;
      margin: 0 auto;
      padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
      padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
      box-sizing: border-box;
    }

    /* CRITICAL: only the Site4 chrome header — never bare `header` (docs pages
       use content heroes that must stay in-flow). */
    header.s4-header {
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: var(--nav-bg, rgba(10,13,16,0.94));
      border-bottom: 1px solid rgba(201,162,39,0.18);
    }
    header.s4-header .nav,
    header.s4-header .wrap.nav {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
      /* horizontal padding lives on .wrap — do not zero it here */
      gap: 0.75rem;
      flex-wrap: nowrap;
      min-height: 64px;
    }
    .logo {
      display: inline-flex; align-items: center; gap: 0.55rem;
      color: #fff; font-weight: 800; letter-spacing: 0.08em; font-size: 0.92rem;
      text-decoration: none;
      flex-shrink: 0;
      min-width: 0;
    }
    .logo .logo-mark {
      width: 56px; height: 56px; display: block; flex-shrink: 0;
      border-radius: 10px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    }
    .logo .logo-word { font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
    .nav-links {
      display: flex; gap: 1.05rem; flex-wrap: nowrap; align-items: center;
      flex: 1 1 auto; justify-content: flex-end; min-width: 0;
    }
    .nav-links a {
      color: #b7c9d8; text-decoration: none; font-size: 0.86rem; transition: color 0.15s;
      white-space: nowrap;
    }
    .nav-links a:hover { color: #fff; }
    .nav-cta {
      background: var(--gold); color: var(--text-on-gold, #0B0F16) !important; text-decoration: none;
      padding: 0.55rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 800;
      box-shadow: 0 0 0 1px rgba(201,162,39,0.35), 0 8px 24px rgba(201,162,39,0.22);
      flex-shrink: 0; white-space: nowrap;
    }
    .nav-cta:hover { filter: brightness(1.06); color: var(--text-on-gold, #0B0F16) !important; }

    /* --- Site4 mobile nav (hamburger + drawer) --- */
    .s4-nav-toggle {
      display: none;
      position: relative;
      width: 44px; height: 44px;
      margin: 0; padding: 0;
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      cursor: pointer;
      flex-shrink: 0;
      z-index: 60;
    }
    .s4-nav-toggle span {
      position: absolute; left: 11px; right: 11px;
      height: 2px; border-radius: 2px;
      background: #e8eef4;
      transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
    }
    .s4-nav-toggle span:nth-child(1) { top: 14px; }
    .s4-nav-toggle span:nth-child(2) { top: 21px; }
    .s4-nav-toggle span:nth-child(3) { top: 28px; }
    .s4-nav-toggle.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
    .s4-nav-toggle.open span:nth-child(2) { opacity: 0; }
    .s4-nav-toggle.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
    .s4-mobile-panel {
      display: none;
      background: #0A0D10;
      border-top: 1px solid rgba(201,162,39,0.22);
      padding: 0.75rem 1rem 1.25rem;
      box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    }
    .s4-mobile-panel[hidden] { display: none !important; }
    .s4-mobile-links {
      display: flex; flex-direction: column; gap: 0;
    }
    .s4-mobile-links a {
      display: block;
      padding: 0.9rem 0.35rem;
      color: #c9d9e6;
      text-decoration: none;
      font-size: 1rem; font-weight: 600;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .s4-mobile-links a:hover,
    .s4-mobile-links a:focus {
      color: #fff;
      background: rgba(201,162,39,0.08);
    }
    .s4-mobile-cta {
      display: block !important;
      text-align: center;
      margin-top: 1rem;
      width: 100%;
      box-sizing: border-box;
    }
    body.s4-nav-open { overflow: hidden; }

    @media (max-width: 900px) {
      header.s4-header .nav,
      header.s4-header .wrap.nav {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        min-height: 56px;
        gap: 0.5rem;
      }
      header.s4-header .logo .logo-mark { width: 44px; height: 44px; }
      header.s4-header .logo .logo-word { font-size: 0.85rem; letter-spacing: 0.06em; }
      header.s4-header .nav-links,
      .s4-nav-cta-desktop { display: none !important; }
      .s4-nav-toggle { display: inline-block; }
      .s4-mobile-panel:not([hidden]) { display: block; }
      /* i18n widget: keep compact on the bar */
      header.s4-header .jil-lang-selector,
      header.s4-header .jil-i18n-selector,
      header.s4-header .jil-i18n-wrap {
        margin-left: auto;
      }
    }
    @media (max-width: 420px) {
      header.s4-header .logo .logo-word { display: none; }
    }
    /* Lang selector on navy Site4 header */
    header.s4-header .jil-lang-selector,
    header.s4-header .jil-i18n-selector,
    body.site4-body header.s4-header .jil-lang-selector {
      color: #b7c9d8;
    }
    header .jil-lang-selector button,
    header .jil-lang-selector .jil-lang-trigger,
    body.site4-body header.s4-header #jil-lang-current {
      color: #e8eef4 !important;
      border-color: rgba(255,255,255,0.22);
    }

    .hero {
      /* Canonical JIL hero: graphite navy + gold glow (jil-tokens --gold / --navy) */
      background:
        radial-gradient(ellipse 900px 480px at 50% -10%, rgba(212,175,55,0.16) 0%, transparent 55%),
        radial-gradient(700px 360px at 12% 20%, rgba(201,162,39,0.12), transparent 50%),
        radial-gradient(600px 320px at 90% 80%, rgba(37,99,235,0.10), transparent 50%),
        linear-gradient(165deg, #0B1220 0%, #0F172A 48%, #111827 100%);
      color: #fff;
      padding: 5rem 0 4.25rem;
      overflow: hidden;
      position: relative;
    }
    .hero-kicker {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: #9ec0d6; margin-bottom: 1.2rem;
      border: 1px solid rgba(158,192,214,0.35);
      padding: 0.35rem 0.8rem; border-radius: 999px;
      background: rgba(255,255,255,0.04);
    }
    .hero-kicker i {
      width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
      box-shadow: 0 0 14px var(--glow); display: inline-block;
    }
    .hero h1 {
      font-size: clamp(2.2rem, 5.6vw, 3.7rem);
      line-height: 1.03; max-width: 14ch; font-weight: 800;
      margin-bottom: 1.15rem; letter-spacing: -0.03em;
    }
    .hero h1 span {
      display: block;
      background: linear-gradient(90deg, #F5E6A8, #D4AF37 45%, #A87C1F);
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }
    .hero-lead {
      font-size: 1.15rem; max-width: 36rem; color: #c9d9e6;
      margin-bottom: 1.7rem; line-height: 1.5;
    }
    .hero-lead + .hero-adapt { margin-top: -0.75rem; }
    .hero-adapt {
      font-size: 0.92rem; max-width: 42rem; color: #a9bdd0;
      margin: 0 0 0.85rem; line-height: 1.5;
    }
    .hero-track {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      margin: 0 0 1.35rem;
      min-width: 0;
    }
    .hero-track-label {
      flex: 0 0 auto;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #E4C35A;
      white-space: nowrap;
    }
    .hero-track-pills {
      display: flex;
      gap: 0.4rem;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      min-width: 0;
      padding-bottom: 0.1rem;
    }
    .hero-track-pills::-webkit-scrollbar { display: none; }
    .hero-track-pills .pill {
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: 0.68rem;
      color: #d8c98a;
      border-color: rgba(228,195,90,0.28);
      background: rgba(228,195,90,0.08);
    }
    @media (max-width: 640px) {
      .hero-track { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.85rem; }
    .btn {
      display: inline-block; text-decoration: none; font-weight: 750;
      padding: 0.9rem 1.3rem; border-radius: 10px; font-size: 0.96rem;
      transition: transform 0.15s, filter 0.15s, border-color 0.15s;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary {
      background: var(--gold); color: #0B0F16;
      box-shadow: 0 10px 30px rgba(201,162,39,0.28);
    }
    .btn-primary, .btn-primary:link, .btn-primary:visited, .btn-primary:hover {
      color: #0B0F16 !important;
      -webkit-text-fill-color: #0B0F16;
    }
    .btn-primary:hover { filter: brightness(1.06); }
    /* Default ghost = light-surface (dark ink). Dark surfaces re-declare below. */
    .btn-ghost {
      background: rgba(15,23,42,0.04); color: #102A43;
      border: 1px solid rgba(16,42,67,0.28);
    }
    .btn-ghost:hover { border-color: #102A43; background: rgba(15,23,42,0.08); }
    /* Ghost / outline on dark bands (hero, navy sections) */
    .hero .btn-ghost, .hero a.btn-ghost,
    .sting .btn-ghost, .cta-band .btn-ghost, .radv .btn-ghost,
    .quote-band .btn-ghost, .v2-hero .btn-ghost {
      background: rgba(255,255,255,0.04); color: #f8fafc;
      border: 1px solid rgba(255,255,255,0.35);
    }
    .hero .btn-ghost:hover, .hero a.btn-ghost:hover,
    .sting .btn-ghost:hover, .cta-band .btn-ghost:hover {
      border-color: #fff; background: rgba(255,255,255,0.10); color: #fff;
    }
    .pills { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.75rem; }
    .pill {
      font-size: 0.73rem; color: #d0e2ef; font-weight: 600;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.05);
      padding: 0.36rem 0.72rem; border-radius: 999px;
    }
    .hero-caps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.65rem;
      margin-top: 0.25rem;
    }
    @media (max-width: 800px) {
      .hero-caps { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 520px) {
      .hero-caps { grid-template-columns: 1fr; }
    }
    .hero-cap {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      padding: 0.85rem 0.9rem;
      transition: border-color 0.15s, background 0.15s;
    }
    .hero-cap:hover {
      border-color: rgba(228,195,90,0.45);
      background: rgba(201,162,39,0.08);
    }
    .hero-cap strong {
      display: block;
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #E4C35A;
      margin-bottom: 0.3rem;
      font-weight: 800;
    }
    .hero-cap span {
      display: block;
      font-size: 0.86rem;
      color: #c9d9e6;
      line-height: 1.35;
    }
    .hero h1 { max-width: 16ch !important; }

    .marquee {
      background: #0A0D10; color: #E4C35A;
      padding: 0.68rem 0; overflow: hidden; white-space: nowrap;
      border-top: 1px solid rgba(228,195,90,0.28);
      border-bottom: 1px solid rgba(228,195,90,0.28);
      font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em;
      position: relative;
    }
    /* Flex + max-content so -50% is a true seamless loop (inline-block was sticky) */
    .marquee-track {
      display: flex;
      flex-wrap: nowrap;
      width: max-content;
      gap: 0;
      animation: s4-marquee-scroll 38s linear infinite;
      will-change: transform;
      transform: translate3d(0, 0, 0);
    }
    .marquee-group {
      display: flex;
      flex-wrap: nowrap;
      flex-shrink: 0;
      align-items: center;
    }
    @keyframes s4-marquee-scroll {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(-50%, 0, 0); }
    }
    .marquee-group > span {
      display: inline-block;
      padding: 0 1.2rem;
      flex-shrink: 0;
    }
    .marquee .dot { color: #C9A227; margin: 0 0.35rem; }
    /* Keep ticker moving even when design-system sets animation-iteration-count:1 */
    @media (prefers-reduced-motion: reduce) {
      .marquee-track {
        animation: s4-marquee-scroll 90s linear infinite !important;
        animation-duration: 90s !important;
        animation-iteration-count: infinite !important;
      }
    }

    .shift {
      background: var(--sand);
      padding: 3.4rem 0;
    }
    .shift-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
    }
    @media (max-width: 800px) { .shift-grid { grid-template-columns: 1fr; } }
    .shift-card {
      border-radius: 18px; padding: 1.5rem 1.4rem;
      border: 1px solid #e5e0d6;
    }
    .shift-card.old { background: #fff; }
    .shift-card.next {
      background: #071a28; color: #fff; border-color: #102A43;
      box-shadow: 0 20px 50px rgba(15,23,42,0.2);
    }
    .shift-card .tag {
      font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
      font-weight: 800; margin-bottom: 0.5rem;
    }
    .shift-card.old .tag { color: #94a3b8; }
    .shift-card.next .tag { color: #E4C35A; }
    .shift-card h3 {
      font-size: 1.2rem; margin-bottom: 0.85rem; letter-spacing: -0.01em;
    }
    .shift-card.old h3 { color: var(--navy); }
    .shift-card ul { list-style: none; }
    .shift-card li {
      padding: 0.35rem 0 0.35rem 1.1rem; position: relative;
      font-size: 0.94rem;
    }
    .shift-card.old li { color: #475569; }
    .shift-card.next li { color: #c9d9e6; }
    .shift-card.old li::before { content: "–"; position: absolute; left: 0; color: #94a3b8; }
    .shift-card.next li::before { content: "→"; position: absolute; left: 0; color: #E4C35A; font-weight: 700; }

    .section-kicker {
      font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--blue); font-weight: 800; margin-bottom: 0.5rem;
    }
    .section-title {
      font-size: clamp(1.65rem, 3.3vw, 2.3rem); line-height: 1.12;
      color: var(--navy); margin-bottom: 0.6rem; max-width: 18ch;
      letter-spacing: -0.025em;
    }
    .section-sub { color: var(--muted); max-width: 42rem; margin-bottom: 1.85rem; font-size: 1.02rem; }

    .future { padding: 3.75rem 0; background: #fff; }
    .future-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    }
    @media (max-width: 900px) { .future-grid { grid-template-columns: 1fr; } }
    .future-card {
      border-radius: 16px; padding: 1.35rem 1.25rem;
      border: 1px solid #e5e7eb; background: #fafbfc;
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    }
    .future-card:hover {
      transform: translateY(-2px);
      border-color: #E4C35A;
      box-shadow: 0 14px 36px rgba(201,162,39,0.1);
    }
    .future-card .icon {
      font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--gold-deep); font-weight: 800; margin-bottom: 0.45rem;
    }
    .future-card h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 0.45rem; }
    .future-card p { font-size: 0.92rem; color: #475569; }

    .sting {
      background: #071a28; color: #fff; padding: 3.25rem 0;
    }
    .sting-inner {
      display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 2rem; align-items: center;
    }
    @media (max-width: 800px) { .sting-inner { grid-template-columns: 1fr; } }
    .sting h2 {
      font-size: clamp(1.55rem, 3.2vw, 2.1rem); line-height: 1.15;
      margin-bottom: 0.9rem; letter-spacing: -0.02em;
    }
    .sting p { color: #b7c9d7; font-size: 1.02rem; margin-bottom: 0.7rem; }
    .sting-stat {
      background: rgba(201,162,39,0.08);
      border: 1px solid rgba(228,195,90,0.3);
      border-radius: 16px; padding: 1.4rem 1.3rem;
    }
    .sting-stat .num {
      font-size: 2rem; font-weight: 800; color: #E4C35A;
      letter-spacing: -0.03em; margin-bottom: 0.35rem;
    }
    .sting-stat .lbl { font-size: 0.92rem; color: #c9d9e6; }

    .contrast { padding: 3.75rem 0; background: var(--sand); }
    .paths {
      display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch;
    }
    @media (max-width: 820px) {
      .paths { grid-template-columns: 1fr; }
      .paths .arrow { display: none; }
    }
    .path {
      border-radius: 18px; padding: 1.5rem 1.35rem; border: 1px solid #e5e7eb; background: #fff;
    }
    .path-new {
      background: linear-gradient(165deg, #FFFBEB 0%, #FEF9E7 100%);
      border-color: #E4C35A;
      box-shadow: 0 16px 40px rgba(201,162,39,0.12);
    }
    .path h3 { font-size: 1.05rem; margin-bottom: 0.8rem; color: var(--navy); }
    .path ul { list-style: none; }
    .path li {
      padding: 0.4rem 0 0.4rem 1.15rem; position: relative;
      font-size: 0.95rem; color: #334155;
    }
    .path-old li::before { content: "–"; position: absolute; left: 0; color: #94a3b8; font-weight: 700; }
    .path-new li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-deep); font-weight: 700; }
    .path .end {
      margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed #cbd5e1;
      font-size: 0.88rem; font-weight: 750;
    }
    .path-old .end { color: #64748b; }
    .path-new .end { color: var(--gold-deep); }
    .arrow { align-self: center; text-align: center; font-size: 1.7rem; color: #94a3b8; font-weight: 800; }

    .quote-band {
      background: #050f18; color: #fff; padding: 2.6rem 0; text-align: center;
    }
    .quote-band blockquote {
      font-size: clamp(1.2rem, 2.8vw, 1.75rem);
      font-weight: 800; line-height: 1.25; max-width: 20ch; margin: 0 auto;
      letter-spacing: -0.02em;
    }
    .quote-band blockquote span { color: #E4C35A; }
    .quote-band p { margin-top: 0.8rem; color: #8aa0b3; font-size: 0.92rem; }

    .radv {
      background:
        radial-gradient(700px 320px at 80% 0%, rgba(201,162,39,0.12), transparent 55%),
        #050f18;
      color: #fff;
      padding: 3.75rem 0;
    }
    .radv .section-kicker { color: #E4C35A; }
    .radv .section-title { color: #fff; max-width: 16ch; }
    .radv .section-sub { color: #a8bdcd; }
    .radv-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    }
    @media (max-width: 800px) { .radv-grid { grid-template-columns: 1fr; } }
    .radv-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px; padding: 1.3rem;
      transition: border-color 0.15s, background 0.15s;
    }
    .radv-card:hover {
      border-color: rgba(228,195,90,0.45);
      background: rgba(201,162,39,0.06);
    }
    .radv-card strong {
      display: block; color: #E4C35A; font-size: 0.76rem; letter-spacing: 0.08em;
      text-transform: uppercase; margin-bottom: 0.45rem;
    }
    .radv-card p { color: #d5e3ed; font-size: 0.95rem; }

    .products { padding: 3.75rem 0; background: #fff; }
    .dual {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.25rem;
    }
    @media (max-width: 750px) { .dual { grid-template-columns: 1fr; } }
    .prod {
      background: #fafbfc; border-radius: 18px; padding: 1.5rem;
      border: 1px solid #e5e7eb;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .prod:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(15,23,42,0.08); }
    .prod.creb { border-top: 5px solid #dc2626; }
    .prod.areb { border-top: 5px solid var(--gold-deep); }
    .prod .tag {
      font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
      font-weight: 800; margin-bottom: 0.4rem;
    }
    .prod.creb .tag { color: #dc2626; }
    .prod.areb .tag { color: var(--gold-deep); }
    .prod h3 { font-size: 1.2rem; color: var(--navy); margin-bottom: 0.5rem; }
    .prod p { color: #3d4650; font-size: 0.95rem; }
    .line {
      text-align: center; font-size: 1.05rem; font-weight: 800; color: var(--navy);
      margin-top: 0.35rem;
    }

    .how { padding: 3.75rem 0; background: var(--sand); }
    .steps { counter-reset: step; max-width: 740px; }
    .steps li {
      list-style: none; counter-increment: step;
      padding: 1.05rem 0 1.05rem 3.2rem; position: relative;
      border-bottom: 1px solid #e8e0d4;
    }
    .steps li:last-child { border-bottom: 0; }
    .steps li::before {
      content: counter(step);
      position: absolute; left: 0; top: 1rem;
      width: 2.15rem; height: 2.15rem; border-radius: 50%;
      background: var(--navy); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.85rem; font-weight: 800;
    }
    .steps strong { color: var(--navy); }

    .trust { padding: 2.75rem 0; background: #0b1722; }
    .trust-row {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem;
    }
    @media (max-width: 800px) { .trust-row { grid-template-columns: 1fr 1fr; } }
    .trust-item {
      background: rgba(255,255,255,0.04); border-radius: 14px; padding: 1.05rem 0.85rem;
      border: 1px solid rgba(255,255,255,0.08); text-align: center;
    }
    .trust-item strong { display: block; color: #E4C35A; font-size: 0.92rem; margin-bottom: 0.28rem; }
    .trust-item span { font-size: 0.8rem; color: #9db4c6; }

    .cta-band {
      background:
        radial-gradient(600px 280px at 20% 0%, rgba(201,162,39,0.25), transparent 60%),
        linear-gradient(135deg, #0B3D5C, #102A43);
      color: #fff; padding: 3.6rem 0; text-align: center;
    }
    .cta-band h2 {
      font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.65rem;
      letter-spacing: -0.02em;
    }
    .cta-band p { color: #CBD5E1; max-width: 36rem; margin: 0 auto 1.45rem; font-size: 1.02rem; }
    .cta-band .hero-actions { justify-content: center; }

    /* Institutional chrome footer only (has .foot-top). Bare <footer> on
       docs content pages must not inherit this dark slab. */
    footer:has(.foot-top),
    footer.s4-footer {
      background: #050f18; color: #8aa0b3; padding: 3rem 0 1.5rem; font-size: 0.84rem;
    }
    footer:has(.foot-top) a,
    footer.s4-footer a { color: #b7c9d8; text-decoration: none; }
    footer:has(.foot-top) a:hover,
    footer.s4-footer a:hover { color: #fff; }
    .foot-top {
      display: grid;
      grid-template-columns: 1.4fr repeat(4, 1fr);
      gap: 1.75rem 1.25rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    @media (max-width: 980px) {
      .foot-top { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
      .foot-top { grid-template-columns: 1fr; }
    }
    .foot-brand .foot-logo {
      display: inline-flex; align-items: center; gap: 0.55rem;
      margin-bottom: 0.75rem; color: #fff;
    }
    .foot-brand .foot-logo img {
      width: 52px; height: 52px; border-radius: 10px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    }
    .foot-brand strong {
      color: #fff; display: block; margin-bottom: 0.55rem; font-size: 0.92rem; letter-spacing: 0.06em;
    }
    .foot-brand p { line-height: 1.5; margin-bottom: 0.85rem; max-width: 26ch; }
    .foot-brand .phone { color: #E4C35A; font-weight: 700; }
    .foot-col strong {
      color: #fff; display: block; margin-bottom: 0.7rem; font-size: 0.82rem;
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .foot-col a {
      display: block; padding: 0.22rem 0; font-size: 0.84rem;
    }
    .foot-mid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      padding: 1.75rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    @media (max-width: 800px) {
      .foot-mid { grid-template-columns: 1fr; }
    }
    .foot-bottom {
      display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
      justify-content: space-between; align-items: center;
      padding-top: 1.25rem; font-size: 0.78rem; color: #7a8f9f;
    }
    .foot-bottom-links { display: flex; flex-wrap: wrap; gap: 0.85rem; }
    .foot-bottom-links a { color: #9db4c6; }
  
/* Hide legacy jil-nav if any residual markup appears */
body.site4-body .jil-nav { display: none !important; }
/* Print: hide Site4 chrome on print briefs */
@media print { header, footer { display: none !important; } }


/* ========== Legacy page bridge (editorial / v14 under Site4 chrome) ========== */
/* v2-hero → canonical JIL navy + gold */
body.site4-body .v2-hero,
body.site4-body section.v2-hero {
  background:
    radial-gradient(ellipse 900px 480px at 50% -10%, rgba(212,175,55,0.16), transparent 55%),
    linear-gradient(165deg, #0B1220 0%, #0F172A 50%, #111827 100%) !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(201,162,39,0.18);
  padding: 3.5rem 0 3rem !important;
}
body.site4-body .v2-hero .v2-hero-title,
body.site4-body .v2-hero h1 {
  color: #f8fafc !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  font-family: "Segoe UI", system-ui, sans-serif !important;
}
body.site4-body .v2-hero .v2-hero-title em,
body.site4-body .v2-hero h1 em {
  font-style: normal !important;
  background: linear-gradient(90deg, #F5E6A8, #D4AF37 45%, #A87C1F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
body.site4-body .v2-hero .v2-section-subtitle,
body.site4-body .v2-hero p {
  color: #c9d9e6 !important;
}
body.site4-body .v2-hero .v2-label,
body.site4-body .v2-hero .eyebrow {
  color: #9ec0d6 !important;
  border-color: rgba(158,192,214,0.35) !important;
}
body.site4-body .v2-container {
  width: min(1120px, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
}
/* Align Site4 with canonical jil-tokens gold */
body.site4-body {
  --gold: #C9A227;
  --gold-primary: #C9A227;
  --gold-soft: #E4C35A;
  --gold-deep: #A87C1F;
  --label-eyebrow: #7C5F18;
  --navy: #102A43;
  --navy-primary: #102A43;
}
body.site4-body .btn-primary,
body.site4-body a.btn-primary,
body.site4-body .btn-primary-lg,
body.site4-body .jil-btn--primary,
body.site4-body button.jil-btn--primary {
  display: inline-block;
  background: #C9A227 !important;
  color: #0B0F16 !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 750 !important;
  padding: 0.85rem 1.25rem !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(201,162,39,0.28);
}
body.site4-body .btn-primary:hover,
body.site4-body a.btn-primary:hover {
  filter: brightness(1.06);
}
body.site4-body .btn-outline,
body.site4-body a.btn-outline,
body.site4-body .btn-ghost {
  display: inline-block;
  background: rgba(15,23,42,0.04) !important;
  color: #102A43 !important;
  border: 1px solid rgba(11,61,92,0.28) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 0.85rem 1.25rem !important;
  text-decoration: none !important;
}
body.site4-body .editorial-hero,
body.site4-body .editorial-hero-section,
body.site4-body section.editorial-hero {
  background:
    radial-gradient(ellipse 900px 480px at 50% -10%, rgba(212,175,55,0.16), transparent 55%),
    linear-gradient(165deg, #0B1220 0%, #0F172A 50%, #111827 100%) !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(201,162,39,0.18);
  padding: 3.5rem 0 3rem !important;
}
body.site4-body .editorial-hero h1,
body.site4-body .editorial-hero .section-title,
body.site4-body .editorial-hero-section h1,
body.site4-body .editorial-hero-section .section-title {
  color: #f8fafc !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
body.site4-body .editorial-hero h1 em,
body.site4-body .editorial-hero .section-title em,
body.site4-body .editorial-hero-section h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #F5E6A8, #D4AF37 45%, #A87C1F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
body.site4-body .editorial-hero p,
body.site4-body .editorial-hero .hero-sub,
body.site4-body .editorial-hero .body-lg,
body.site4-body .editorial-hero-section p,
body.site4-body .editorial-hero-section .section-desc {
  color: #c9d9e6 !important;
}
body.site4-body .editorial-hero .section-marker,
body.site4-body .editorial-hero-section .section-marker {
  color: #9ec0d6 !important;
  border-color: rgba(158,192,214,0.35) !important;
}
body.site4-body .editorial-hero .btn-outline,
body.site4-body .editorial-hero a.btn-outline,
body.site4-body .editorial-hero-section .btn-outline {
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
}
body.site4-body .section-marker {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 800;
  color: #102A43;
}
/* Canonical gold CTAs */
body.site4-body .btn-gold,
body.site4-body a.hw-btn-gold,
body.site4-body .hw-btn-gold {
  background: #C9A227 !important;
  color: #0B0F16 !important;
  border-color: transparent !important;
}

/* ========== Sitewide body consistency (all site4-body pages) ========== */
body.site4-body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif !important;
  background: #fff !important;
  color: #0f172a !important;
}
/* Content shells: center the column AND keep a real left/right gutter.
   max-width alone left .wrap flush to the viewport edge (homepage body
   stuck to the left). Header uses .wrap.nav — excluded so chrome rules win. */
body.site4-body main,
body.site4-body .container,
body.site4-body .wrap:not(.nav) {
  max-width: 1120px;
  width: min(1120px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}
body.site4-body .container {
  width: min(1120px, calc(100% - 2rem));
  /* horizontal gutter already from padding above; keep width calc as belt */
}
/* Unify legacy section titles with Site4 */
body.site4-body .section-title,
body.site4-body h2.section-title,
body.site4-body .v2-section-title {
  font-family: "Segoe UI", system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #102A43 !important;
}
body.site4-body .section-desc,
body.site4-body .body-lg,
body.site4-body .lede {
  color: #5b6570 !important;
  line-height: 1.6 !important;
}
body.site4-body .section-marker,
body.site4-body .eyebrow,
body.site4-body .section-kicker {
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  color: #102A43 !important;
}
/* Cards */
body.site4-body .cap-card,
body.site4-body .card,
body.site4-body .pr-state,
body.site4-body .feature-card {
  border-radius: 14px !important;
  border: 1px solid #e5e0d6 !important;
  border-top: 3px solid #C9A227 !important;
  background: #fff !important;
}
body.site4-body .cap-card h3,
body.site4-body .cap-card h4,
body.site4-body .card h3 {
  color: #0f172a !important;
  font-family: inherit !important;
}
/* Gold callouts — canonical */
body.site4-body .callout.gold,
body.site4-body .callout {
  background: rgba(201,162,39,0.10) !important;
  border: 1px solid rgba(201,162,39,0.28) !important;
  border-radius: 12px !important;
  color: #0f172a !important;
}
body.site4-body a {
  color: inherit;
}
body.site4-body main a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost):not(.nav-cta):not(.jil-nav__dropdown-link) {
  color: #102A43;
}
/* Sticky header slightly lighter to match hero */
body.site4-body > header,
body.site4-body header.s4-header {
  background: rgba(10, 13, 16, 0.94) !important;
  border-bottom: 1px solid rgba(201,162,39,0.18) !important;
}
/* Soft sand bands for alternating sections when used */
body.site4-body .s4-band.alt,
body.site4-body section.alt-band {
  background: #f6f1e8;
}
/* Hide legacy gold underline decorations that clash */
body.site4-body .section-title em {
  font-style: normal !important;
  color: #A87C1F !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}
/* Docs-page padding shouldn't fight site4 */
body.site4-body.docs-page main {
  max-width: none;
  padding: 0;
}


/* ========== CONTRAST GUARANTEES (readable type + CTAs) ==========
   Rules:
   - Gold / warm fills → near-black text (#0B0F16), never white-on-gold
   - Dark navy surfaces → light text (#e8eef4 / #f8fafc)
   - Light page surfaces → dark ink (#0f172a / #102A43)
   - Ghost/outline → surface-aware (dark ink on light, light ink on dark)
   ================================================================== */

/* --- Gold primary CTAs: black-on-gold only --- */
body.site4-body .btn-primary,
body.site4-body a.btn-primary,
body.site4-body a.btn-primary:link,
body.site4-body a.btn-primary:visited,
body.site4-body a.btn-primary:hover,
body.site4-body a.btn-primary:active,
body.site4-body .btn-primary-lg,
body.site4-body a.btn-primary-lg,
body.site4-body .nav-cta,
body.site4-body a.nav-cta,
body.site4-body a.nav-cta:link,
body.site4-body a.nav-cta:visited,
body.site4-body a.nav-cta:hover,
body.site4-body .jil-btn--primary,
body.site4-body a.jil-btn--primary,
body.site4-body a.jil-btn--primary:link,
body.site4-body a.jil-btn--primary:visited,
body.site4-body a.jil-btn--primary:hover,
body.site4-body button.jil-btn--primary,
body.site4-body .btn-gold,
body.site4-body a.btn-gold,
body.site4-body a.hw-btn-gold,
body.site4-body .hw-btn-gold,
body.site4-body .jil-nav .jil-btn--primary,
body.site4-body .jil-nav__cta.jil-btn--primary {
  background: #C9A227 !important;
  background-color: #C9A227 !important;
  color: #0B0F16 !important;
  -webkit-text-fill-color: #0B0F16 !important;
  border-color: transparent !important;
  text-decoration: none !important;
}
body.site4-body .btn-primary:hover,
body.site4-body a.btn-primary:hover,
body.site4-body .nav-cta:hover,
body.site4-body a.nav-cta:hover,
body.site4-body .jil-btn--primary:hover {
  filter: brightness(1.05);
  color: #0B0F16 !important;
  -webkit-text-fill-color: #0B0F16 !important;
}

/* --- Light page body --- */
body.site4-body {
  background: #ffffff !important;
  color: #0f172a !important;
}
body.site4-body main,
body.site4-body .s4-band:not(.alt),
body.site4-body .future,
body.site4-body .products,
body.site4-body .shift,
body.site4-body .contrast,
body.site4-body .how,
body.site4-body .s4-band.alt {
  color: #0f172a;
}
body.site4-body .s4-band.alt,
body.site4-body section.alt-band,
body.site4-body .shift,
body.site4-body .contrast,
body.site4-body .how {
  /* sand bands stay light */
  color: #0f172a !important;
}

/* Outline / ghost on light surfaces: dark ink */
body.site4-body .btn-outline,
body.site4-body a.btn-outline,
body.site4-body a.btn-outline:link,
body.site4-body a.btn-outline:visited,
body.site4-body .btn-ghost,
body.site4-body a.btn-ghost,
body.site4-body a.btn-ghost:link,
body.site4-body a.btn-ghost:visited,
body.site4-body .jil-btn--ghost,
body.site4-body .jil-btn--outline,
body.site4-body a.jil-btn--ghost,
body.site4-body a.jil-btn--outline {
  color: #102A43 !important;
  -webkit-text-fill-color: #102A43 !important;
  background: #ffffff !important;
  border: 1px solid rgba(16, 42, 67, 0.32) !important;
  text-decoration: none !important;
}
body.site4-body .btn-outline:hover,
body.site4-body a.btn-outline:hover,
body.site4-body .btn-ghost:hover,
body.site4-body a.btn-ghost:hover {
  color: #0B0F16 !important;
  -webkit-text-fill-color: #0B0F16 !important;
  background: #f8fafc !important;
  border-color: #102A43 !important;
}

/* --- Dark surfaces: light text (never dark ink on navy) --- */
body.site4-body > header,
body.site4-body header.s4-header,
body.site4-body .hero,
body.site4-body section.hero,
body.site4-body .v2-hero,
body.site4-body section.v2-hero,
body.site4-body .editorial-hero,
body.site4-body .editorial-hero-section,
body.site4-body footer,
body.site4-body .sting,
body.site4-body .radv,
body.site4-body .cta-band,
body.site4-body .quote-band,
body.site4-body .marquee,
body.site4-body .trust,
body.site4-body .shift-card.next {
  color: #e8eef4 !important;
}
body.site4-body header.s4-header .logo,
body.site4-body header.s4-header .logo-word,
body.site4-body header.s4-header .nav-links a {
  color: #e8eef4 !important;
  -webkit-text-fill-color: unset;
}
body.site4-body header.s4-header .nav-links a { color: #b7c9d8 !important; }
body.site4-body header.s4-header .nav-links a:hover { color: #ffffff !important; }

body.site4-body .hero h1,
body.site4-body .hero .hero-lead,
body.site4-body .v2-hero h1,
body.site4-body .v2-hero .v2-hero-title,
body.site4-body .v2-hero p,
body.site4-body .sting h2,
body.site4-body .sting p,
body.site4-body .radv .section-title,
body.site4-body .radv .section-sub,
body.site4-body .cta-band h2,
body.site4-body .cta-band p,
body.site4-body footer,
body.site4-body footer p,
body.site4-body footer a {
  /* ensure no dark-on-dark from generic title rules */
}
body.site4-body .hero h1,
body.site4-body .v2-hero h1,
body.site4-body .v2-hero .v2-hero-title { color: #f8fafc !important; }
body.site4-body .hero .hero-lead,
body.site4-body .v2-hero p,
body.site4-body .v2-hero .v2-section-subtitle { color: #c9d9e6 !important; }
body.site4-body .sting h2,
body.site4-body .radv .section-title,
body.site4-body .cta-band h2,
body.site4-body .quote-band blockquote { color: #f8fafc !important; }
body.site4-body .sting p,
body.site4-body .radv .section-sub,
body.site4-body .cta-band p { color: #c9d9e6 !important; }
body.site4-body .radv .section-kicker { color: #E4C35A !important; }

/* Ghost/outline ON dark surfaces: light text on transparent dark */
body.site4-body .hero .btn-ghost,
body.site4-body .hero a.btn-ghost,
body.site4-body .hero .btn-outline,
body.site4-body .hero a.btn-outline,
body.site4-body .v2-hero .btn-ghost,
body.site4-body .v2-hero a.btn-ghost,
body.site4-body .v2-hero .btn-outline,
body.site4-body .editorial-hero .btn-ghost,
body.site4-body .editorial-hero .btn-outline,
body.site4-body .editorial-hero a.btn-outline,
body.site4-body .sting .btn-ghost,
body.site4-body .sting .btn-outline,
body.site4-body .sting a.btn-outline,
body.site4-body .cta-band .btn-ghost,
body.site4-body .cta-band .btn-outline,
body.site4-body .cta-band a.btn-outline,
body.site4-body .radv .btn-ghost,
body.site4-body .radv .btn-outline {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
}
body.site4-body .hero .btn-ghost:hover,
body.site4-body .hero a.btn-ghost:hover,
body.site4-body .cta-band .btn-outline:hover,
body.site4-body .sting a.btn-outline:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
  border-color: #ffffff !important;
}

/* Gold primary still dark text even inside hero */
body.site4-body .hero .btn-primary,
body.site4-body .hero a.btn-primary,
body.site4-body .cta-band .btn-primary,
body.site4-body .cta-band a.btn-primary,
body.site4-body .sting .btn-primary,
body.site4-body .v2-hero .btn-primary,
body.site4-body .v2-hero a.btn-primary {
  background: #C9A227 !important;
  color: #0B0F16 !important;
  -webkit-text-fill-color: #0B0F16 !important;
}

/* Section titles on light pages stay navy (don't inherit footer white) */
body.site4-body .future .section-title,
body.site4-body .products .section-title,
body.site4-body .how .section-title,
body.site4-body .shift .section-title,
body.site4-body .contrast .section-title,
body.site4-body .s4-band h2,
body.site4-body main h1,
body.site4-body main h2,
body.site4-body main h3 {
  color: #102A43 !important;
}
body.site4-body main p,
body.site4-body main li,
body.site4-body .s4-band p,
body.site4-body .s4-card p {
  color: #334155;
}
body.site4-body .s4-card h3,
body.site4-body .s4-card .tag {
  color: #0f172a;
}
body.site4-body .s4-card .tag { color: #102A43; }

/* Footer: light muted on dark navy */
body.site4-body footer { color: #9db4c6 !important; }
body.site4-body footer a { color: #c9d9e6 !important; }
body.site4-body footer a:hover { color: #ffffff !important; }
body.site4-body footer strong,
body.site4-body footer .foot-brand strong,
body.site4-body footer .foot-logo { color: #f8fafc !important; }
body.site4-body footer .phone { color: #E4C35A !important; }

/* Prevent generic title rule from darkening hero headings */
body.site4-body .hero .section-title,
body.site4-body .radv .section-title,
body.site4-body .sting .section-title {
  color: #f8fafc !important;
}

/* Form controls on light surfaces */
body.site4-body input,
body.site4-body select,
body.site4-body textarea {
  color: #0f172a;
  background: #ffffff;
  border-color: #d9e2ec;
}
body.site4-body input::placeholder,
body.site4-body textarea::placeholder {
  color: #64748b;
  opacity: 1;
}

/* Docs unlock / cards: dark on light */
body.site4-body .docs-unlock-card,
body.site4-body .docs-unlock-card h1,
body.site4-body .docs-unlock-card p,
body.site4-body .docs-unlock-card label {
  color: #0f172a;
}
body.site4-body .docs-unlock-card h1 { color: #102A43 !important; }
body.site4-body .docs-unlock-card p { color: #334155 !important; }
body.site4-body .docs-unlock-card .cta {
  background: #C9A227 !important;
  color: #0B0F16 !important;
  -webkit-text-fill-color: #0B0F16 !important;
}
body.site4-body .docs-unlock-card .cta.secondary {
  background: #ffffff !important;
  color: #102A43 !important;
  -webkit-text-fill-color: #102A43 !important;
  border: 1px solid rgba(16,42,67,0.28) !important;
}
body.site4-body .docs-unlock-card button[type=submit] {
  background: #102A43 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

/* Kill white text forced onto light gold from design-system inverse tokens */
body.site4-body [class*="btn"][style*="background"] {
  /* no-op: specificity anchor */
}


/* ========== SITE4 CHROME TEMPLATE (homepage is the source of truth) ==========
   Applied on every institutional page via body.site4-body.
   Sticky header owns the top. Breadcrumb sits UNDER the nav (document flow).
   No fixed-nav body padding that shoves chrome around.
   ========================================================================== */

/* --- Sticky header owns viewport top; cancel legacy fixed-nav body padding --- */
body.site4-body,
body.site4-body.has-breadcrumb {
  padding-top: 0 !important;
}
body.site4-body > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1100 !important;
}

/* --- Breadcrumb: in-flow under header (never fixed above the nav) --- */
body.site4-body .jil-breadcrumb {
  position: static !important;
  top: auto !important;
  inset: auto !important;
  width: 100% !important;
  z-index: 40 !important;
  background: #f6f1e8 !important;
  border-bottom: 1px solid #e5e0d6 !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}
body.site4-body .jil-breadcrumb__inner {
  max-width: 1120px !important;
  width: min(1120px, calc(100% - 2rem)) !important;
  margin: 0 auto !important;
  padding: 0.55rem 0 !important;
}
body.site4-body .jil-breadcrumb .jil-breadcrumb__link {
  color: #5b6570 !important;
}
body.site4-body .jil-breadcrumb .jil-breadcrumb__link:hover {
  color: #A87C1F !important;
}
body.site4-body .jil-breadcrumb__sep {
  color: #94a3b8 !important;
}
body.site4-body .jil-breadcrumb__current {
  color: #102A43 !important;
  font-weight: 700 !important;
}

/* --- Marquee ticker: JIL gold band (not mint/teal) --- */
body.site4-body .marquee,
.marquee {
  background: linear-gradient(90deg, #0B1220 0%, #102A43 50%, #0B1220 100%) !important;
  color: #F2D47A !important;
  border-top: 1px solid rgba(201,162,39,0.45) !important;
  border-bottom: 1px solid rgba(201,162,39,0.45) !important;
}
body.site4-body .marquee .dot,
.marquee .dot {
  color: #C9A227 !important;
}

/* --- Language switcher inside Site4 nav (dark bar) --- */
body.site4-body header.s4-header .nav {
  gap: 0.65rem;
}
body.site4-body header.s4-header .jil-i18n-wrap {
  flex: 0 0 auto;
  order: 3;
  z-index: 20;
}
body.site4-body header.s4-header .nav-cta {
  order: 4;
}
body.site4-body header.s4-header .jil-i18n-btn {
  color: #e8eef4 !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.7rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}
body.site4-body header.s4-header .jil-i18n-btn:hover {
  border-color: rgba(201,162,39,0.55) !important;
  background: rgba(201,162,39,0.12) !important;
  color: #F2D47A !important;
}
body.site4-body header.s4-header .jil-i18n-dropdown {
  background: #ffffff !important;
  border: 1px solid #e5e0d6 !important;
  z-index: 1200 !important;
}
body.site4-body header.s4-header .jil-i18n-dropdown a {
  color: #0f172a !important;
}
body.site4-body header.s4-header .jil-i18n-dropdown a:hover {
  background: #fbf7ee !important;
  color: #102A43 !important;
}
body.site4-body header.s4-header .jil-i18n-dropdown a.active {
  color: #A87C1F !important;
}
/* Hide floating fallback picker when Site4 nav is present */
body.site4-body #jil-i18n-fallback-picker {
  display: none !important;
}

/* --- June persona: compact bar under chrome --- */
body.site4-body .jil-persona-wrap {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.65rem 1rem !important;
}
body.site4-body .jil-persona {
  border-color: #e5e0d6 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}
body.site4-body .jil-persona-send {
  background: #C9A227 !important;
  color: #0B0F16 !important;
}
body.site4-body .jil-persona-send:hover {
  background: #E4C35A !important;
  color: #0B0F16 !important;
}

/* --- Homepage-like page sections for legacy editorial/docs pages --- */
body.site4-body.docs-page main,
body.site4-body .docs-page main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
body.site4-body .v2-hero,
body.site4-body section.v2-hero,
body.site4-body .phi-hero {
  /* already themed in contrast block; ensure light stats readable */
}
body.site4-body .phi-hero {
  background:
    radial-gradient(ellipse 900px 480px at 50% -10%, rgba(212,175,55,0.14), transparent 55%),
    linear-gradient(165deg, #0B1220 0%, #0F172A 50%, #111827 100%) !important;
  color: #e8eef4 !important;
  border-bottom: 1px solid rgba(201,162,39,0.2) !important;
}
body.site4-body .phi-hero h1 { color: #f8fafc !important; }
body.site4-body .phi-hero-sub { color: #c9d9e6 !important; }
body.site4-body .phi-hero-stat-value { color: #F2D47A !important; }
body.site4-body .phi-hero-stat-label {
  color: #9db4c6 !important; /* was near-white on light — unreadable on light heroes */
}
/* Proof cards: always dark ink on white tiles */
body.site4-body .phi-card,
body.site4-body a.phi-card {
  background: #ffffff !important;
  border: 1px solid #e5e0d6 !important;
  border-top: 3px solid #C9A227 !important;
  color: #0f172a !important;
}
body.site4-body .phi-card h3,
body.site4-body .phi-card .phi-card-number,
body.site4-body .phi-card-link {
  color: #102A43 !important;
}
body.site4-body .phi-card p,
body.site4-body .phi-card-highlights li {
  color: #475569 !important;
}
body.site4-body .phi-card-badge {
  color: #A87C1F !important;
  background: rgba(201,162,39,0.12) !important;
  border-color: rgba(201,162,39,0.35) !important;
}
body.site4-body .phi-card-highlights li::before {
  color: #C9A227 !important;
}
body.site4-body .phi-validation-banner,
body.site4-body .phi-assurance-map,
body.site4-body .phi-boundary,
body.site4-body .phi-bundle {
  background: #ffffff !important;
  color: #0f172a !important;
}
body.site4-body .phi-validation-inner h2,
body.site4-body .phi-validation-firm-name {
  color: #102A43 !important;
}
body.site4-body .phi-validation-inner p,
body.site4-body .phi-validation-firm-loc {
  color: #475569 !important;
}
body.site4-body .phi-validation-firm-badge {
  background: #C9A227 !important;
}
body.site4-body .phi-validation-points li {
  color: #334155 !important;
}
body.site4-body .phi-validation-points li::before {
  color: #C9A227 !important;
}

/* Products page cards → homepage card language */
body.site4-body .pr-card,
body.site4-body .pr-state,
body.site4-body .pr-layer {
  background: #ffffff !important;
  border-color: #e5e0d6 !important;
  color: #0f172a !important;
}
body.site4-body .pr-card h3,
body.site4-body .pr-state h3,
body.site4-body .pr-layer h4 {
  color: #102A43 !important;
}
body.site4-body .pr-card .cap,
body.site4-body .pr-state p,
body.site4-body .pr-layer p {
  color: #475569 !important;
}
body.site4-body .pr-badge.live,
body.site4-body .pr-status.live {
  background: rgba(201,162,39,0.12) !important;
  color: #A87C1F !important;
  border-color: #C9A227 !important;
}
body.site4-body .pr-card {
  border-top: 3px solid #C9A227 !important;
  border-radius: 14px !important;
}

/* Sample CREB / callouts: JIL gold not UPS brown */
body.site4-body .callout.gold,
body.site4-body .callout {
  background: rgba(201,162,39,0.10) !important;
  border: 1px solid rgba(201,162,39,0.35) !important;
  color: #0f172a !important;
}
body.site4-body .callout.gold strong,
body.site4-body .callout strong {
  color: #102A43 !important;
}
body.site4-body .creb-envelope dd span,
body.site4-body .creb-envelope dd code {
  background: rgba(201,162,39,0.12) !important;
  color: #7C5F18 !important; /* gold-brown readable on cream, not UPS brown */
}
body.site4-body .creb-envelope {
  color: #0f172a !important;
}
body.site4-body .creb-envelope h1,
body.site4-body .creb-envelope h2,
body.site4-body .creb-envelope h3 {
  color: #102A43 !important;
}

/* Generic light-tile rescue: any white/near-white card with inherited light text */
body.site4-body [class*="card"],
body.site4-body [class*="tile"],
body.site4-body .feature-card,
body.site4-body .cap-card {
  color: #0f172a;
}


/* ═══════════════════════════════════════════════════════════════════
   CONTRAST LAW — permanent NEVER-DO rules (do not weaken)
   ─────────────────────────────────────────────────────────────────
   These are brand/engineering invariants for every Site4 surface
   (jilsovereign.com, docs.jilsovereign.com, injected institutional
   chrome). Encode the ban as CSS so a later stylesheet cannot paint
   unreadable CTAs without deliberately removing this block.

   NEVER:
     ✗ Gold (#C9A227 / #E4C35A / #F2D47A) TEXT on gold FILL
     ✗ White / near-white TEXT on gold FILL
     ✗ Light ink on light-gold / cream buttons
     ✗ Dark navy TEXT on dark navy BACKGROUND
     ✗ Body link `a { color: gold }` winning over filled gold CTAs

   ALWAYS:
     ✓ Gold primary fill (#C9A227) → text #0B0F16 (near-black)
     ✓ Dark navy / graphite surfaces → text #e8eef4 / #f8fafc
     ✓ Light page surfaces → text #0f172a / #102A43
     ✓ Ghost/outline on dark → light border + light text
     ✓ Ghost/outline on light → navy border + navy text

   Covered controls: .nav-cta, .btn-primary*, .btn-gold, .cta*,
   .jil-btn--primary, .docs-session-btn.primary, .v14-btn-buy,
   .hw-btn-gold, and any [class*="btn"] sitting on gold fill.
   ═══════════════════════════════════════════════════════════════════ */

/* Gold FILL → black TEXT only (nuclear; last-in cascade on Site4 pages) */
html body.site4-body a.nav-cta,
html body.site4-body a.nav-cta:link,
html body.site4-body a.nav-cta:visited,
html body.site4-body a.nav-cta:hover,
html body.site4-body a.nav-cta:active,
html body.site4-body a.nav-cta:focus,
html body.site4-body .nav-cta,
html body.site4-body button.nav-cta,
html body.site4-body a.btn-primary,
html body.site4-body a.btn-primary:link,
html body.site4-body a.btn-primary:visited,
html body.site4-body a.btn-primary:hover,
html body.site4-body a.btn-primary:active,
html body.site4-body .btn-primary,
html body.site4-body a.btn-primary-lg,
html body.site4-body .btn-primary-lg,
html body.site4-body a.btn-gold,
html body.site4-body .btn-gold,
html body.site4-body a.cta-primary,
html body.site4-body .cta-primary,
html body.site4-body a.cta-gold,
html body.site4-body .cta-gold,
html body.site4-body a.cta:not(.secondary):not(.cta-secondary),
html body.site4-body .cta:not(.secondary):not(.cta-secondary),
html body.site4-body a.jil-btn--primary,
html body.site4-body .jil-btn--primary,
html body.site4-body a.jil-nav__cta,
html body.site4-body .jil-nav__cta,
html body.site4-body a.docs-session-btn.primary,
html body.site4-body .docs-session-btn.primary,
html body.site4-body a.v14-btn-buy,
html body.site4-body .v14-btn-buy,
html body.site4-body a.hw-btn-gold,
html body.site4-body .hw-btn-gold,
html body.site4-body a.v2-mobile-cta,
html body.site4-body .v2-mobile-cta {
  background: #C9A227 !important;
  background-color: #C9A227 !important;
  color: #0B0F16 !important;
  -webkit-text-fill-color: #0B0F16 !important;
  /* kill accidental gold/white text inheritance from bare `a` rules */
  text-decoration: none !important;
  text-shadow: none !important;
}

/* Explicit ban: never recolor gold-fill CTA text to gold or white */
html body.site4-body a.nav-cta[style*="color"],
html body.site4-body .nav-cta[style*="color"] {
  color: #0B0F16 !important;
  -webkit-text-fill-color: #0B0F16 !important;
}

/* Also lock when data-theme is editorial (docs unlock) even if body class races */
html[data-theme="sovereign-editorial"] a.nav-cta,
html[data-theme="sovereign-editorial"] a.nav-cta:link,
html[data-theme="sovereign-editorial"] a.nav-cta:visited,
html[data-theme="sovereign-editorial"] a.nav-cta:hover,
html[data-theme="sovereign-editorial"] .nav-cta,
html[data-theme="sovereign-editorial"] a.docs-session-btn.primary,
html[data-theme="sovereign-editorial"] .docs-session-btn.primary,
html[data-theme="sovereign-editorial"] a.cta:not(.secondary),
html[data-theme="sovereign-editorial"] .docs-unlock-card .cta:not(.secondary),
html[data-theme="sovereign-editorial"] .docs-unlock-card a.cta:not(.secondary) {
  background: #C9A227 !important;
  background-color: #C9A227 !important;
  color: #0B0F16 !important;
  -webkit-text-fill-color: #0B0F16 !important;
}

/* Docs host global: same lock without requiring site4-body (belt + suspenders) */
html a.nav-cta,
html a.nav-cta:link,
html a.nav-cta:visited,
html a.nav-cta:hover,
html a.nav-cta:active,
html .nav-cta {
  color: #0B0F16 !important;
  -webkit-text-fill-color: #0B0F16 !important;
}
/* Only force gold fill when the control is meant to be the gold pill CTA
   (class present). Do not paint every .nav-cta child. */
html a.nav-cta,
html .nav-cta {
  background: #C9A227 !important;
  background-color: #C9A227 !important;
}

/* Docs auto-hero paints a cream plate on the first container h1.
   Site4 editorial heroes are navy with white type. Strip the plate so
   the title stays on the navy band (white on cream was unreadable). */
body.site4-body .editorial-hero h1,
body.site4-body .editorial-hero .section-title,
body.site4-body .editorial-hero-section h1,
body.site4-body .editorial-hero-section .section-title {
  background: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 0 0.25rem !important;
  border-bottom: none !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
body.site4-body .editorial-hero h1::after,
body.site4-body .editorial-hero .section-title::after,
body.site4-body .editorial-hero-section h1::after,
body.site4-body .editorial-hero-section .section-title::after {
  content: none !important;
  display: none !important;
}