:root {
      --bg: #eef1f5;
      --panel: #fff;
      --ink: #14181d;
      --muted: #5b6673;
      --line: #e2e7ee;
      --navy: #004E64;
      --navy2: #0C7C99;
      --gold: #0C7C99;
      --cream: #EDEDC8;
      --pgreen: #2B3C19;
      --bean: #321116;
      --bgray: #857F74;
      --head: #004E64;
      --bar: #004E64;
      --dom: #0C7C99;
      --emrg: #0f8f74;
      --red: #c0492f;
      --intl: #EF3740;
      --green: #1c8f4a;
      --danger: #c0392b;
      /* validated categorical series colors (data-viz skill, light mode) */
      --c-dom: #2a78d6;
      --c-intl: #eb6834;
      --c-edu: #1baf7a;
      --text-secondary: #52514e;
    }

    :root[data-theme=dark] {
      --bg: #0e1620;
      --panel: #161f2b;
      --ink: #e7edf4;
      --muted: #95a6b7;
      --line: #28333f;
      --navy: #0A6E86;
      --navy2: #4FB3CF;
      --gold: #0C7C99;
      --cream: #EDEDC8;
      --pgreen: #2B3C19;
      --bean: #321116;
      --bgray: #857F74;
      --head: #d3e2f2;
      --dom: #3f78c2;
      --emrg: #2fa985;
      --red: #d8735c;
      --intl: #F0555C;
      --c-dom: #4a90e6;
      --c-intl: #f0824f;
      --c-edu: #33b98d;
      --text-secondary: #9aa8b6;
    }

    :root[data-theme=dark] .about h2,
    :root[data-theme=dark] .about h3,
    :root[data-theme=dark] .card h3.ctitle,
    :root[data-theme=dark] .tk-head h2,
    :root[data-theme=dark] .tile .n,
    :root[data-theme=dark] .chartcard h3,
    :root[data-theme=dark] .catrow .cv,
    :root[data-theme=dark] .statshead strong,
    :root[data-theme=dark] table.stbl td.tot,
    :root[data-theme=dark] .fplanwrap h3,
    :root[data-theme=dark] .emfrh,
    :root[data-theme=dark] .sigcard h3,
    :root[data-theme=dark] h4.sec,
    :root[data-theme=dark] .calhead button,
    :root[data-theme=dark] .bclear {
      color: var(--head)
    }

    :root[data-theme=dark] .calcell.has {
      background: #1e2c3a
    }

    :root[data-theme=dark] .calcell.has:hover {
      background: #26384a
    }

    :root[data-theme=dark] .catrow .bar {
      background: #1e2833
    }

    :root[data-theme=dark] .uscell {
      background: #1e2833
    }

    :root[data-theme=dark] .seg button {
      background: #1a2430
    }

    :root[data-theme=dark] table.stbl td.z {
      color: #4a5764
    }

    :root[data-theme=dark] .tbd.cat,
    :root[data-theme=dark] .egrp {
      background: #26333f;
      color: var(--navy2)
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background-color: var(--bg);
      background-image: linear-gradient(160deg, rgba(0, 78, 100, .07) 0%, rgba(0, 78, 100, 0) 38%, rgba(237, 237, 200, .18) 100%);
      background-attachment: fixed;
      background-repeat: no-repeat;
      color: var(--ink);
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.6
    }

    :root[data-theme=dark] body {
      background-image: linear-gradient(160deg, rgba(12, 124, 153, .12) 0%, rgba(0, 0, 0, 0) 42%, rgba(43, 60, 25, .18) 100%)
    }

    a {
      color: var(--navy2)
    }

    .top {
      background: var(--bar);
      color: #fff;
      padding: 16px 20px
    }

    .top .in {
      max-width: 1040px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .top img {
      height: 60px;
      filter: brightness(0) invert(1)
    }

    .top h1 {
      font-size: 1.3rem;
      margin: 0;
      font-weight: 800;
      letter-spacing: -.01em
    }

    .top .tag {
      display: block;
      color: #cfe0e6;
      font-size: .82rem;
      font-weight: 600;
      margin-top: 3px
    }

    .top .brandfallback {
      font-size: 1.7rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.01em
    }
    .top .brandfallback b { color: var(--cream); font-weight: 800 }

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

    .top .kicker {
      color: var(--cream);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: .64rem;
      margin-bottom: 2px
    }

    .top .topdate {
      margin-left: auto;
      align-self: center;
      text-align: right;
      color: #c7d6e6;
      font-size: .82rem;
      font-weight: 600;
      white-space: nowrap;
      padding-left: 12px
    }

    .top .topdate .dl {
      color: #9fb6cc;
      font-size: .6rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-weight: 800;
      display: block;
      margin-bottom: 1px
    }

    @media(max-width:560px) {
      .top .topdate {
        display: none
      }
    }

    nav.nav {
      background: #003a4c;
      position: sticky;
      top: 0;
      z-index: 40
    }

    .nav-in {
      max-width: 1040px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      padding: 0 12px
    }

    .navrow {
      display: flex;
      align-items: stretch;
      gap: 2px;
      flex-wrap: wrap
    }

    .navrow-top {
      align-items: center
    }

    .navrow-ref {
      border-top: 1px solid rgba(255, 255, 255, .10)
    }

    .navitem {
      background: none;
      border: none;
      color: #c3d3e2;
      font-size: .85rem;
      font-weight: 600;
      padding: 7px 13px;
      cursor: pointer;
      font-family: inherit;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .navitem:hover {
      background: rgba(255, 255, 255, .08);
      color: #fff
    }

    .navitem.active {
      color: #fff;
      box-shadow: inset 0 -3px 0 var(--gold)
    }

    /* The Brief, the hero of the page */
    .navitem.primary {
      margin: 4px 6px 4px 0;
      padding: 7px 16px;
      border-radius: 8px;
      background: var(--gold);
      color: #ffffff;
      font-size: .96rem;
      font-weight: 800;
      letter-spacing: .01em;
      box-shadow: 0 2px 8px rgba(12, 124, 153, .35)
    }

    .navitem.primary:hover {
      background: var(--gold);
      color: #ffffff;
      filter: brightness(1.07)
    }

    .navitem.primary.active {
      box-shadow: 0 2px 8px rgba(12, 124, 153, .35)
    }

    .navitem.cta {
      margin: 7px 4px 7px 0;
      padding: 8px 14px;
      border-radius: 8px;
      border: 1.5px solid var(--gold);
      color: #ffffff;
      font-weight: 700;
      font-size: .9rem
    }

    .navitem.cta:hover {
      background: rgba(12, 124, 153, .16);
      color: #fff
    }

    .navitem.cta.active {
      background: transparent;
      border-color: var(--gold);
      color: #ffffff;
      box-shadow: none
    }

    .livedot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ffffff;
      position: relative;
      flex: none
    }

    .livedot::after {
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      border: 1.5px solid rgba(21, 38, 58, .5);
      animation: pulse 1.8s ease-out infinite
    }

    @keyframes pulse {
      0% {
        transform: scale(.6);
        opacity: .9
      }

      100% {
        transform: scale(1.5);
        opacity: 0
      }
    }

    .navlabel {
      align-self: center;
      color: #7f97ad;
      font-size: .58rem;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-weight: 800;
      padding: 0 8px 0 2px
    }

    .navdiv {
      width: 1px;
      background: rgba(255, 255, 255, .14);
      margin: 11px 6px 11px 0
    }

    .navitem.navpushright {
      margin-left: auto
    }

    .navitem.themebtn {
      font-size: 1rem;
      padding: 7px 12px;
      line-height: 1
    }

    .navitem.ext {
      color: #9fb6cc;
      font-weight: 500;
      font-size: .8rem
    }

    .navrow-ref .navitem.ext {
      margin-left: 4px
    }

    .mkroll {
      display: inline-block;
      height: 1.2em;
      line-height: 1.2em;
      overflow: hidden;
      vertical-align: middle
    }

    .mkroll-in {
      display: flex;
      flex-direction: column;
      animation: mkroll 7s cubic-bezier(.7, 0, .3, 1) infinite
    }

    .mkroll-in > span {
      height: 1.2em;
      line-height: 1.2em;
      white-space: nowrap
    }

    .mkroll-in > span:nth-child(2) {
      color: var(--gold)
    }

    @keyframes mkroll {
      0%, 42% { transform: translateY(0) }
      50%, 92% { transform: translateY(-1.2em) }
      100% { transform: translateY(0) }
    }

    @media(prefers-reduced-motion: reduce) {
      .mkroll-in { animation: none }
    }

    @media(max-width:720px) {
      .navlabel {
        display: none
      }

      .navitem.themebtn {
        margin-left: auto
      }
    }

    /* Resources mega-menu */
    .navdrop { position: relative; display: inline-flex; align-items: center }
    .navdrop-btn .caret { font-size: .7rem; margin-left: 3px; transition: transform .15s ease; display: inline-block }
    .navdrop.open .navdrop-btn { background: rgba(255, 255, 255, .08); color: #fff }
    .navdrop.open .caret { transform: rotate(180deg) }
    .megamenu { position: absolute; top: 100%; right: 0; margin-top: 6px; background: #003a4c;
      border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
      padding: 16px 18px; display: none; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 20px; z-index: 60 }
    .navdrop.open .megamenu { display: grid }
    .megacol h5 { margin: 0 0 6px; color: #7f97ad; font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800 }
    .megaitem { display: flex; width: 100%; justify-content: flex-start; padding: 8px 10px; border-radius: 7px; font-size: .88rem }
    .megaitem:hover { background: rgba(255, 255, 255, .08); color: #fff }
    .megaitem.active { background: rgba(12, 124, 153, .18); color: #fff; box-shadow: inset 0 0 0 1px var(--gold) }
    @media(max-width:720px) {
      .navdrop { position: static }
      .megamenu { position: static; right: auto; width: 100%; grid-template-columns: 1fr 1fr; margin-top: 8px }
    }

    .wrap {
      max-width: 1040px;
      margin: 0 auto;
      padding: 14px 20px 60px
    }

    .layout {
      display: flex;
      gap: 26px;
      align-items: flex-start
    }

    main.main {
      flex: 1;
      min-width: 0
    }

    aside.side {
      width: 280px;
      flex: none;
      position: sticky;
      top: 70px
    }

    .layout.wide aside.side {
      display: none
    }

    @media(max-width:820px) {
      .layout {
        flex-direction: column;
        align-items: stretch
      }

      main.main {
        width: 100%;
        min-width: 0;
        max-width: 100%
      }

      aside.side {
        width: 100%;
        position: static;
        order: -1
      }
    }

    .digest {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 24px 26px;
      margin: 0 0 18px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .dhead {
      border-bottom: 2px solid var(--navy);
      padding-bottom: 12px;
      margin-bottom: 6px
    }

    .dhead .k {
      color: var(--gold);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: .64rem
    }

    .dhead h2 {
      margin: 3px 0 0;
      font-size: 1.3rem;
      font-weight: 800
    }

    .dhead .dd {
      color: var(--muted);
      font-size: .82rem;
      margin-top: 4px
    }

    h4.sec {
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--navy);
      margin: 20px 0 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--line);
      font-weight: 800
    }

    .post {
      margin: 12px 0
    }

    .cat {
      display: inline-block;
      font-size: .58rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 20px;
      color: #fff;
      margin-bottom: 6px
    }

    .cat.dom {
      background: var(--dom)
    }

    .cat.emrg {
      background: var(--emrg)
    }

    .cat.red {
      background: var(--red)
    }

    .cat.intl {
      background: var(--intl)
    }

    .post h5 {
      margin: 2px 0 4px;
      font-size: 1.01rem
    }

    .post h5 a {
      color: var(--ink);
      text-decoration: none
    }

    .post h5 a:hover {
      text-decoration: underline
    }

    .post p {
      margin: 4px 0 0;
      font-size: .92rem
    }

    .post .src {
      font-size: .73rem;
      color: var(--muted);
      margin-top: 6px
    }

    .about {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 26px 28px
    }

    .about h2 {
      margin: 0 0 10px;
      font-size: 1.35rem;
      color: var(--navy)
    }

    .about h3 {
      margin: 18px 0 6px;
      font-size: 1rem;
      color: var(--navy)
    }

    .about p {
      font-size: .95rem;
      margin: 8px 0
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px 16px;
      margin: 0 0 16px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .card h3.ctitle {
      margin: 0 0 10px;
      font-size: .82rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--navy)
    }

    .calhead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      font-weight: 700;
      font-size: .9rem
    }

    .calhead button {
      background: none;
      border: 1px solid var(--line);
      border-radius: 7px;
      width: 28px;
      height: 28px;
      cursor: pointer;
      color: var(--navy);
      font-size: 1rem
    }

    .calgrid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px
    }

    .caltoday {
      display: block;
      width: 100%;
      margin-top: 10px;
      background: none;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 0;
      cursor: pointer;
      color: var(--navy2);
      font-family: inherit;
      font-weight: 700;
      font-size: .82rem
    }

    .caltoday:hover {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff
    }

    .caldow {
      font-size: .64rem;
      color: var(--muted);
      text-align: center;
      padding: 4px 0;
      font-weight: 700
    }

    .calcell {
      position: relative;
      text-align: center;
      padding: 7px 0;
      font-size: .8rem;
      border-radius: 7px;
      color: var(--muted)
    }

    .calcell.empty {
      visibility: hidden
    }

    .calcell.has {
      color: var(--ink);
      font-weight: 700;
      cursor: pointer;
      background: #eef4fa
    }

    .calcell.has:hover {
      background: #dceaf6
    }

    .calcell.has .dot {
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold)
    }

    .calcell.sel {
      background: var(--navy);
      color: #fff
    }

    .calcell.sel .dot {
      background: #fff
    }

    /* Today's date: a gold ring so it's always identifiable, over any background. */
    .calcell.today {
      box-shadow: inset 0 0 0 2px var(--gold);
      color: var(--ink);
      font-weight: 700
    }

    .calcell.today.sel {
      color: #fff
    }

    .datefilter {
      font-size: .82rem;
      color: var(--muted);
      margin-top: 6px
    }

    .datefilter b {
      color: var(--ink)
    }

    .datefilter .clr {
      color: var(--navy2);
      cursor: pointer;
      font-weight: 700;
      margin-left: 6px
    }

    .tk-head h2 {
      margin: 0 0 4px;
      font-size: 1.5rem;
      color: var(--navy)
    }

    .tk-head p {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: .9rem
    }

    .tiles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 18px
    }

    @media(max-width:640px) {
      .tiles {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .tile {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px 18px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .tile .n {
      font-size: 1.7rem;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.1
    }

    .tile .l {
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--muted);
      margin-top: 4px;
      font-weight: 700
    }

    .chartcard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px 20px;
      margin-bottom: 18px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .chartcard h3 {
      margin: 0 0 4px;
      font-size: 1rem;
      color: var(--navy)
    }

    .chartcard .sub {
      font-size: .78rem;
      color: var(--muted);
      margin: 0 0 12px
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 12px;
      font-size: .78rem;
      color: var(--text-secondary)
    }

    .legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .legend i {
      width: 11px;
      height: 11px;
      border-radius: 3px;
      display: inline-block
    }

    svg .grid {
      stroke: var(--line);
      stroke-width: 1
    }

    svg .axlabel {
      fill: var(--muted);
      font-size: 11px
    }

    .catrow {
      display: grid;
      grid-template-columns: 170px 1fr 34px;
      align-items: center;
      gap: 10px;
      margin: 7px 0;
      font-size: .84rem
    }

    .catrow .cn {
      color: var(--ink);
      font-weight: 600;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .catrow .bar {
      display: flex;
      gap: 2px;
      background: #eef2f7;
      border-radius: 6px;
      height: 16px;
      overflow: hidden
    }

    .catrow .bar>i {
      display: block;
      height: 100%
    }

    .catrow .cv {
      font-weight: 800;
      color: var(--navy);
      text-align: right
    }

    .note {
      background: var(--panel);
      border: 1px solid var(--line);
      border-left: 3px solid var(--gold);
      border-radius: 10px;
      padding: 12px 16px;
      color: var(--muted);
      font-size: .85rem
    }

    .disclaimer {
      background: var(--panel);
      border: 1px solid var(--line);
      border-left: 3px solid var(--navy);
      border-radius: 10px;
      padding: 11px 16px;
      margin: 0 0 16px;
      color: var(--muted);
      font-size: .82rem;
      font-style: italic;
      line-height: 1.5
    }

    .note b {
      color: var(--ink)
    }

    .usmap {
      max-width: 720px;
      margin: 0 auto
    }

    .usmap svg {
      width: 100%;
      height: auto;
      display: block
    }

    .usst {
      stroke: #fff;
      stroke-width: 1;
      stroke-linejoin: round;
      transition: opacity .12s
    }

    .usst.empty {
      fill: #e7edf3
    }

    .usst:hover {
      opacity: .72
    }

    :root[data-theme=dark] .usst {
      stroke: #0e1620
    }

    :root[data-theme=dark] .usst.empty {
      fill: #22303d
    }

    .usnum {
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-weight: 800;
      font-size: 26px;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none
    }

    .uscallout {
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-weight: 800;
      font-size: 22px;
      fill: var(--ink);
      text-anchor: start;
      dominant-baseline: central;
      pointer-events: none
    }

    .uslead {
      stroke: #93a6b8;
      stroke-width: 1.2
    }

    .usleaddot {
      fill: #6b7f94
    }

    :root[data-theme=dark] .uslead {
      stroke: #4a5b6c
    }

    .maplegend {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 12px;
      font-size: .74rem;
      color: var(--muted)
    }

    .maplegend i {
      width: 16px;
      height: 12px;
      border-radius: 2px;
      display: inline-block
    }

    .statshead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 12px
    }

    .statshead strong {
      font-size: 1rem;
      color: var(--navy)
    }

    .segwrap {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .seg {
      display: inline-flex;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden
    }

    .seg button {
      background: #fff;
      border: none;
      padding: 6px 12px;
      font-size: .78rem;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      font-family: inherit
    }

    .seg button.on {
      background: var(--navy);
      color: #fff
    }

    .stbl-scroll {
      overflow-x: auto
    }

    table.stbl {
      border-collapse: collapse;
      width: 100%;
      font-size: .83rem;
      min-width: 560px
    }

    table.stbl th,
    table.stbl td {
      padding: 7px 10px;
      text-align: center;
      border-bottom: 1px solid var(--line);
      white-space: nowrap
    }

    table.stbl th {
      font-size: .66rem;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--muted);
      font-weight: 700
    }

    table.stbl th:first-child,
    table.stbl td.pd {
      text-align: left;
      font-weight: 700;
      color: var(--ink)
    }

    table.stbl td.z {
      color: #cbd4dd
    }

    table.stbl td.tot {
      font-weight: 800;
      color: var(--navy)
    }

    .tsearch {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 11px 14px;
      font-size: .95rem;
      font-family: inherit;
      margin-bottom: 12px
    }

    .tcount {
      color: var(--muted);
      font-size: .82rem;
      margin-bottom: 12px
    }

    .tchips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 20px
    }

    .tchip {
      background: var(--panel);
      border: 1px solid var(--line);
      color: var(--muted);
      border-radius: 20px;
      padding: 6px 13px;
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer
    }

    .tchip.on {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff
    }

    .tgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px
    }

    .tcard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .thead {
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .till {
      flex: none;
      width: 56px;
      height: 56px
    }

    .tcard h3 {
      margin: 0 0 4px;
      font-size: 1rem;
      line-height: 1.25
    }

    .tbadges {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 5px
    }

    .tbd {
      font-size: .57rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 20px
    }

    .tbd.cat {
      background: #eef3f8;
      color: var(--navy2)
    }

    .tbd.risk-high {
      background: var(--red);
      color: #fff
    }

    .tbd.risk-med {
      background: var(--gold);
      color: #fff
    }

    .tbd.risk-low {
      background: var(--emrg);
      color: #fff
    }

    .tdesc {
      font-size: .88rem;
      margin: 12px 0 0
    }

    .tdetail {
      margin-top: 12px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
      font-size: .83rem
    }

    .tlab {
      font-size: .6rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      font-weight: 800;
      margin-top: 9px
    }

    .tlab:first-child {
      margin-top: 0
    }

    .tdetail p {
      margin: 2px 0 0
    }

    .tfound {
      color: var(--navy2)
    }

    .flookup {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 6px
    }

    .flookup input {
      flex: 1;
      min-width: 220px;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 12px 14px;
      font-size: 1rem;
      font-family: inherit;
      background: var(--panel);
      color: var(--ink)
    }

    .flookup button {
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: 9px;
      padding: 12px 20px;
      font-weight: 700;
      font-size: .95rem;
      cursor: pointer
    }

    .freqhero {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px 20px;
      margin-bottom: 16px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .freqtypebar {
      border-bottom: 1px solid var(--line);
      padding-bottom: 16px;
      margin-bottom: 16px
    }

    .freqtypelbl {
      display: block;
      font-size: .8rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--gold);
      font-weight: 800;
      margin-bottom: 6px;
      animation: freqpulse 1.8s ease-in-out infinite
    }

    @keyframes freqpulse {
      0%, 100% { opacity: .55; text-shadow: 0 0 0 rgba(12, 124, 153, 0) }
      50%      { opacity: 1;   text-shadow: 0 0 12px rgba(12, 124, 153, .85) }
    }

    @media (prefers-reduced-motion: reduce) {
      .freqtypelbl { animation: none; opacity: 1 }
    }

    .freqbig {
      font-size: 2.1rem;
      font-weight: 800;
      color: var(--head);
      line-height: 1;
      font-variant-numeric: tabular-nums
    }

    .freqbig .u {
      font-size: 1rem;
      color: var(--muted);
      font-weight: 700;
      margin-left: 5px
    }

    .freqband {
      font-size: .9rem;
      color: var(--navy2);
      font-weight: 700;
      margin-top: 6px
    }

    .freqdial {
      position: relative;
      height: 64px;
      margin: 16px 0 4px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #cbb98a;
      box-shadow: inset 0 2px 6px rgba(90, 70, 30, .25)
    }

    .freqdial svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block
    }

    .freqslider {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      margin: 0;
      cursor: ew-resize
    }

    .freqslider:focus {
      outline: none
    }

    .freqslider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 5px;
      height: 64px;
      background: #c0392b;
      box-shadow: 0 0 5px rgba(192, 57, 47, .9);
      border-radius: 1px;
      cursor: ew-resize
    }

    .freqslider::-moz-range-thumb {
      width: 5px;
      height: 64px;
      background: #c0392b;
      border: none;
      border-radius: 1px;
      box-shadow: 0 0 5px rgba(192, 57, 47, .9);
      cursor: ew-resize
    }

    .freqends {
      display: flex;
      justify-content: space-between;
      font-size: .68rem;
      color: var(--muted);
      font-weight: 700
    }

    .fdwrap {
      margin-top: 14px
    }

    .fdtitle {
      font-size: .62rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      font-weight: 800;
      margin-bottom: 5px
    }

    .fdbar {
      position: relative;
      height: 22px;
      border-radius: 6px;
      background: linear-gradient(90deg, rgba(12, 124, 153, .16), rgba(12, 124, 153, .32));
      border: 1px solid var(--line);
      overflow: hidden
    }

    .fdmark {
      position: absolute;
      top: -3px;
      bottom: -3px;
      width: 3px;
      background: var(--head);
      border-radius: 2px;
      transform: translateX(-50%)
    }

    .fdmark::after {
      content: "";
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--gold);
      border: 1.5px solid var(--panel)
    }

    .fdends {
      display: flex;
      justify-content: space-between;
      font-size: .72rem;
      color: var(--muted);
      font-weight: 700;
      margin-top: 5px;
      font-variant-numeric: tabular-nums
    }

    .fovhint {
      font-size: .72rem;
      color: var(--muted);
      margin-top: 8px
    }

    .fhint {
      color: var(--muted);
      font-size: .8rem;
      margin-bottom: 18px
    }

    .fresult {
      margin-bottom: 24px
    }

    .frescard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-left: 4px solid var(--navy);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .frescard.warn {
      border-left-color: var(--gold)
    }

    .frf {
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      font-weight: 800
    }

    .frescard h3 {
      margin: 3px 0 2px;
      font-size: 1.1rem
    }

    .fsvc {
      font-size: .82rem;
      color: var(--navy2);
      font-weight: 700;
      margin-bottom: 8px
    }

    .frescard p {
      margin: 6px 0 0;
      font-size: .9rem
    }

    .flab {
      font-size: .62rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      font-weight: 800;
      margin-top: 8px
    }

    .ftscm {
      color: var(--gold);
      font-weight: 700
    }

    .fplanwrap {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px 20px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .fplanwrap h3 {
      margin: 0 0 2px;
      font-size: 1.05rem;
      color: var(--navy)
    }

    .fplanwrap .fsub {
      color: var(--muted);
      font-size: .8rem;
      margin: 0 0 14px
    }

    .flegend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 14px;
      font-size: .76rem;
      color: var(--muted)
    }

    .flegend span {
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .flegend i {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      display: inline-block
    }

    .fseg {
      cursor: pointer
    }

    .fseg:hover {
      opacity: .82
    }

    .esearch {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 11px 14px;
      font-size: .95rem;
      font-family: inherit;
      margin-bottom: 12px
    }

    .bsearch {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 10px 12px;
      font-size: .9rem;
      font-family: inherit;
      margin-bottom: 9px;
      box-sizing: border-box
    }

    .bclear {
      width: 100%;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--navy);
      border-radius: 9px;
      padding: 9px 14px;
      font-size: .88rem;
      font-family: inherit;
      cursor: pointer
    }

    .bclear:hover {
      background: var(--line)
    }

    .bcount {
      color: var(--muted);
      font-size: .8rem;
      margin-top: 9px
    }

    .ecount {
      color: var(--muted);
      font-size: .82rem;
      margin-bottom: 12px
    }

    .echips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 20px
    }

    .echip {
      background: var(--panel);
      border: 1px solid var(--line);
      color: var(--muted);
      border-radius: 20px;
      padding: 6px 13px;
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer
    }

    .echip.on {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff
    }

    .egrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 16px
    }

    .ecard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .ehead {
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .eill {
      flex: none;
      width: 58px;
      height: 58px
    }

    .ecard h3 {
      margin: 0 0 4px;
      font-size: 1.02rem;
      line-height: 1.25
    }

    .egrp {
      font-size: .57rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 20px;
      background: #eef3f8;
      color: var(--navy2)
    }

    .edesc {
      font-size: .89rem;
      margin: 12px 0 0
    }

    .edetail {
      margin-top: 12px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
      font-size: .84rem
    }

    .elab {
      font-size: .6rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      font-weight: 800;
      margin-top: 9px
    }

    .elab:first-child {
      margin-top: 0
    }

    .edetail p {
      margin: 2px 0 0
    }

    .egear {
      color: var(--navy2);
      font-weight: 600
    }

    .emfrh {
      font-size: 1.15rem;
      color: var(--navy);
      margin: 34px 0 4px
    }

    .emfrsub {
      color: var(--muted);
      font-size: .85rem;
      margin: 0 0 14px
    }

    .emfrgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 14px
    }

    .emfr {
      background: var(--panel);
      border: 1px solid var(--line);
      border-left: 4px solid var(--gold);
      border-radius: 12px;
      padding: 14px 16px
    }

    .emfr h4 {
      margin: 0 0 2px;
      font-size: .98rem
    }

    .emfr .loc {
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--muted);
      font-weight: 700
    }

    .sgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
      gap: 16px
    }

    .sigcard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05);
      display: flex;
      flex-direction: column
    }

    .sig {
      width: 100%;
      height: 154px;
      display: block;
      border: 1px solid var(--line);
      border-radius: 8px;
      margin-bottom: 11px;
      background: #f7fafd
    }

    .sglab {
      font-size: 8px;
      fill: var(--muted);
      font-family: inherit;
      letter-spacing: .03em
    }

    .sigtop {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px
    }

    .sigcard h3 {
      margin: 0;
      font-size: 1.02rem;
      line-height: 1.25;
      color: var(--navy)
    }

    .sigbadges {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-top: 6px
    }

    .sigmeta {
      color: var(--muted);
      font-size: .76rem;
      margin: 9px 0 0;
      line-height: 1.5
    }

    .sigmeta b {
      color: var(--navy2);
      font-weight: 700
    }

    .sigviz {
      margin: 0
    }

    .sigtogglewrap {
      display: flex;
      justify-content: flex-end;
      margin: -2px 0 10px
    }

    .sigtoggle {
      display: inline-flex;
      border: 1px solid var(--line);
      border-radius: 7px;
      overflow: hidden
    }

    .sgt {
      background: var(--panel);
      border: none;
      padding: 4px 11px;
      font-size: .7rem;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      font-family: inherit
    }

    .sgt.on {
      background: var(--navy);
      color: #fff
    }

    :root[data-theme=dark] .sgt {
      background: #1a2430
    }

    .emfr p {
      font-size: .85rem;
      margin: 6px 0 0
    }

    /* Know the Law */
    .lawdisc {
      background: rgba(12, 124, 153, .10);
      border: 1px solid var(--line);
      border-left: 4px solid var(--gold);
      border-radius: 10px;
      padding: 12px 16px;
      margin: 0 0 16px;
      font-size: .86rem;
      color: var(--ink);
      line-height: 1.55
    }

    .lawdisc b {
      color: var(--head)
    }

    .lawdisc-foot {
      background: var(--panel);
      border-left-color: var(--navy);
      color: var(--muted);
      font-size: .8rem;
      margin: 18px 0 0
    }

    .lawpick {
      background: var(--panel);
      border: 1px solid var(--line);
      border-left: 5px solid var(--gold);
      border-radius: 12px;
      padding: 20px 22px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(20, 40, 70, .08)
    }

    .lawpick label {
      display: block;
      font-size: 1.1rem;
      color: var(--head);
      font-weight: 800;
      margin-bottom: 10px
    }

    .lawpick select {
      width: 100%;
      max-width: 460px;
      border: 2px solid var(--navy);
      border-radius: 10px;
      padding: 15px 16px;
      font-size: 1.15rem;
      font-weight: 600;
      font-family: inherit;
      background: var(--panel);
      color: var(--ink);
      cursor: pointer
    }

    .lawpick select:focus {
      outline: none;
      border-color: var(--gold)
    }

    .lawintro {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px 20px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .lawintro p {
      margin: 0 0 10px;
      font-size: .92rem
    }

    .lawintro p:last-child {
      margin: 0
    }

    .lawpickhint {
      color: var(--muted);
      font-weight: 600
    }

    .lawstatehead h3 {
      font-size: 1.4rem;
      color: var(--head);
      margin: 2px 0 12px
    }

    .lawcard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .lawcardtop {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px
    }

    .lawicon {
      font-size: 1.5rem;
      flex: none;
      line-height: 1
    }

    .lawcard h4 {
      margin: 0;
      font-size: 1.02rem;
      color: var(--head)
    }

    .lawcard p {
      margin: 0;
      font-size: .92rem
    }

    .lawparty {
      display: inline-block;
      margin-top: 4px;
      font-size: .62rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-weight: 800;
      padding: 2px 9px;
      border-radius: 20px;
      color: #fff
    }

    .lp-one {
      background: var(--emrg)
    }

    .lp-all {
      background: #c0492f
    }

    .lp-mixed {
      background: #EF3740
    }

    .lawcardnote {
      color: var(--muted);
      font-size: .78rem;
      font-style: italic;
      margin-top: 4px
    }

    .lawcite {
      color: var(--navy2);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-color: rgba(40, 82, 124, .45);
      font-weight: 600
    }

    .lawcite:hover {
      text-decoration-color: var(--navy2)
    }

    /* Area Signal Survey */
    .svwrap { max-width: 1180px }
    .svbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: flex-end;
      background: var(--panel);
      border: 1px solid var(--line);
      border-left: 4px solid var(--gold);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 16px
    }
    .svfield { display: flex; flex-direction: column; gap: 5px }
    .svfield.grow { flex: 1 1 340px }
    .svfield label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
    .svfield input, .svfield select {
      padding: 10px 12px;
      border: 1.5px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
      color: var(--ink);
      font: inherit
    }
    .svfield input:focus, .svfield select:focus { outline: none; border-color: var(--navy2) }
    .svgo {
      padding: 10px 20px;
      background: var(--navy);
      color: #fff;
      border: 0;
      border-radius: 8px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap
    }
    .svgo:hover { background: var(--navy2) }
    .svgo:disabled { opacity: .6; cursor: default }
    .svhint { font-size: .78rem; color: var(--muted); margin: -6px 2px 14px }
    .svhint a { color: var(--navy2); cursor: pointer; text-decoration: underline }
    .svlayout { display: grid; grid-template-columns: 1fr; gap: 16px }
    @media (min-width: 900px) { .svlayout { grid-template-columns: 1.15fr 1fr } }
    #svmap {
      height: 460px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
      z-index: 0
    }
    .svmapwrap { position: relative }
    .svmaplegend {
      position: absolute;
      left: 10px;
      bottom: 10px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: .72rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
      max-width: 175px;
      z-index: 500
    }
    .svmaptools { position: absolute; top: 10px; right: 10px; z-index: 600 }
    .svmapbtn {
      background: var(--panel);
      color: var(--navy2);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 6px 11px;
      font: 600 .78rem system-ui, sans-serif;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
    }
    .svmapbtn:hover { border-color: var(--navy2) }
    .svmapwrap.svfullscreen {
      position: fixed;
      inset: 0;
      z-index: 4000;
      background: var(--panel);
      padding: 0
    }
    .svmapwrap.svfullscreen #svmap { height: 100vh !important; border-radius: 0; border: 0 }
    .svmaplegend .lg { display: flex; align-items: center; gap: 6px; margin: 2px 0 }
    .svmaplegend .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1.5px solid rgba(0, 0, 0, .25) }
    .svloc { font-weight: 700; color: var(--navy2); font-size: 1.02rem; margin-bottom: 2px }
    .svsub { color: var(--muted); font-size: .82rem; margin-bottom: 12px }
    .svbrief {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 14px
    }
    .svbrief .elab { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px }
    .svbrief p { margin: 0 0 8px; line-height: 1.55 }
    .svchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; align-items: center }
    .svchiplabel { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px }
    .svchip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      border-radius: 999px;
      background: var(--panel);
      border: 1px solid var(--line);
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      user-select: none
    }
    .svchip.off { opacity: .4 }
    .svchip .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, .2) }
    .svchip b { font-weight: 800 }
    .svgroup {
      border: 1px solid var(--line);
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
      background: var(--panel)
    }
    .svgrouphd {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 11px 14px;
      font-weight: 700;
      font-size: .92rem;
      color: var(--ink);
      background: rgba(30, 61, 92, .06);
      border: 0;
      border-bottom: 1px solid transparent;
      cursor: pointer;
      text-align: left;
      font-family: inherit
    }
    .svgrouphd:hover { background: rgba(30, 61, 92, .11) }
    [data-theme=dark] .svgrouphd { background: rgba(130, 180, 236, .08); color: var(--ink) }
    [data-theme=dark] .svgrouphd:hover { background: rgba(130, 180, 236, .14) }
    .svgrouphd .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, .25); flex: none }
    .svgrouphd .n { margin-left: auto; color: var(--muted); font-weight: 600; font-size: .82rem }
    .svgrouphd .chev { color: var(--muted); transition: transform .15s ease; font-size: .8rem }
    .svgroup.open .svgrouphd { border-bottom-color: var(--line) }
    .svgroup.open .svgrouphd .chev { transform: rotate(90deg) }
    .svgroupbody { display: none }
    .svgroup.open .svgroupbody { display: block }
    .svtblwrap { max-height: 380px; overflow: auto }
    /* Card-grid dashboard layout */
    .svtop { margin-top: 2px }
    .svtop > .svcard { margin-bottom: 14px }
    /* Masonry pack so short cards don't leave dead space */
    .svmasonry { column-width: 320px; column-gap: 14px }
    .svmasonry > .svcard { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 14px; display: inline-block; width: 100%; vertical-align: top }
    .svcard { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden }
    .svmapfilters { display: none }
    .svmapwrap.svfullscreen .svmapfilters {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
      position: absolute; top: 10px; left: 60px; right: 155px; z-index: 650;
      background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
      padding: 8px 10px; max-height: 44vh; overflow: auto;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .2)
    }
    .svcardhd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--line); background: rgba(30, 61, 92, .05) }
    [data-theme=dark] .svcardhd { background: rgba(130, 180, 236, .07) }
    .svcardhd .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1.5px solid rgba(0, 0, 0, .25) }
    .svcardhd .ttl { font-size: .9rem }
    .svcardhd .ttl.gold { color: var(--gold); text-transform: uppercase; letter-spacing: .04em; font-size: .78rem }
    .svcardhd .n { margin-left: auto; color: var(--muted); font-weight: 800; font-size: .85rem }
    .svcardbody { max-height: 340px; overflow: auto }
    .svcardbody.pad { padding: 10px 14px; max-height: none }
    .svbriefbody p { margin: 0 0 8px; line-height: 1.55 }
    .svbriefbody p:last-child { margin-bottom: 0 }
    .svrow { padding: 7px 14px; border-bottom: 1px solid var(--line) }
    .svrow:last-child { border-bottom: 0 }
    .svrowtop { display: flex; gap: 10px; align-items: baseline }
    .svrow .freq { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--navy2); white-space: nowrap; min-width: 82px }
    .svrow .ent { font-size: .83rem; flex: 1; word-break: break-word }
    .svrow .det { font-size: .72rem; color: var(--muted); margin-top: 2px }
    .svmapcard { padding: 0 }
    .svmapcard #svmap { border-radius: 0; border: 0 }
    .svreffooter { margin-top: 14px }
    .svreffooter .svcardhd { align-items: baseline }
    .svreffooter .svrefsub { margin-left: auto; color: var(--muted); font-weight: 600; font-size: .76rem; font-style: italic }
    .svrefintro { font-size: .82rem; color: var(--muted); line-height: 1.5; margin-bottom: 12px }
    .svrefcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px 22px }
    .svrefcoltitle { font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--navy2); margin: 4px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line) }
    .svtbl { width: 100%; border-collapse: collapse; font-size: .82rem }
    .svtbl th, .svtbl td { text-align: left; padding: 6px 14px; border-bottom: 1px solid var(--line); vertical-align: top }
    .svtbl th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700 }
    .svtbl tr:last-child td { border-bottom: 0 }
    .svtbl .freq { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy2); white-space: nowrap }
    .svtbl .mode { font-size: .7rem; color: var(--muted) }
    .svmore { padding: 8px 14px; font-size: .78rem; color: var(--muted); cursor: pointer }
    .svmore:hover { color: var(--navy2) }
    .svempty { padding: 30px; text-align: center; color: var(--muted) }
    .svnote { font-size: .76rem; color: var(--muted); font-style: italic; margin-top: 10px }
    .lfgroup { margin-top: 4px }
    .lfintro { padding: 10px 14px; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--line) }
    .lfwrap { padding: 6px 14px 12px }
    .lfblock { padding: 8px 0; border-bottom: 1px dashed var(--line) }
    .lfblock:last-child { border-bottom: 0 }
    .lfhd { font-size: .9rem }
    .lfhd b { color: var(--navy2) }
    .lffull { color: var(--muted); font-size: .78rem }
    .lfnote { font-size: .76rem; color: var(--muted); margin: 2px 0 6px }
    .lfchips { display: flex; flex-wrap: wrap; gap: 5px }
    .lfsub { font-size: .74rem; color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center }
    .lfchip { font-variant-numeric: tabular-nums; font-size: .74rem; font-weight: 700; color: var(--navy2); background: rgba(40,82,124,.08); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px }
    .lfchip.band { color: var(--gold); background: rgba(12,124,153,.1) }
    .lfgrp { padding: 4px 0 2px }
    .lfgrptitle { font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin: 10px 0 2px }
    .lfgrp.bug { background: rgba(12,124,153,.06); border: 1px solid rgba(12,124,153,.3); border-radius: 8px; padding: 4px 12px 8px; margin: 8px 0 }
    .lfgrp.bug .lfgrptitle { color: var(--gold) }
    [data-theme=dark] .lfchip { background: rgba(130,180,236,.1) }
    .svspin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: svspin .7s linear infinite; vertical-align: -2px }
    @keyframes svspin { to { transform: rotate(360deg) } }
    .leaflet-popup-content { font: 13px system-ui, sans-serif }
    .svpop b { color: var(--navy) }

    /* Am I a Target? assessment */
    .asswrap {
      max-width: 680px;
      margin: 0 auto
    }

    .assbar {
      height: 6px;
      border-radius: 4px;
      background: var(--line);
      overflow: hidden;
      margin-bottom: 8px
    }

    .assbarfill {
      height: 100%;
      background: var(--gold);
      transition: width .25s
    }

    .assstep {
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      font-weight: 800;
      margin-bottom: 10px
    }

    .asscard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 22px 24px;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05);
      margin-bottom: 14px
    }

    .assq {
      margin: 0 0 4px;
      font-size: 1.25rem;
      color: var(--head);
      line-height: 1.3
    }

    .asssub {
      color: var(--muted);
      font-size: .85rem;
      margin: 0 0 14px
    }

    .assopts {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-top: 12px
    }

    .assopt {
      text-align: left;
      background: var(--panel);
      border: 1.5px solid var(--line);
      border-radius: 10px;
      padding: 13px 15px;
      font-size: .95rem;
      font-family: inherit;
      color: var(--ink);
      cursor: pointer;
      transition: border-color .12s, background .12s
    }

    .assopt:hover {
      border-color: var(--navy2)
    }

    .assopt.sel {
      border-color: var(--navy);
      background: rgba(40, 82, 124, .10);
      font-weight: 600
    }

    .assnav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 18px
    }

    .assmulti {
      margin-top: 14px;
      background: rgba(12, 124, 153, .08);
      border-left: 3px solid var(--navy2);
      border-radius: 8px;
      padding: 9px 13px;
      color: var(--ink);
      font-size: .86rem;
      line-height: 1.5
    }
    .assmulti b { color: var(--navy2) }

    .assback {
      background: none;
      border: none;
      color: var(--muted);
      font-weight: 700;
      font-size: .9rem;
      cursor: pointer;
      font-family: inherit
    }

    .assnext {
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: 9px;
      padding: 11px 20px;
      font-weight: 700;
      font-size: .95rem;
      cursor: pointer;
      font-family: inherit
    }

    .assnext:disabled {
      opacity: .45;
      cursor: default
    }

    .assprivacy {
      text-align: center;
      color: var(--muted);
      font-size: .78rem;
      margin-top: 6px
    }

    .assresult {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 24px;
      text-align: center;
      margin-bottom: 14px;
      border-top: 5px solid var(--gold)
    }

    .assresult.tier-low {
      border-top-color: var(--emrg)
    }

    .assresult.tier-elevated {
      border-top-color: #e0a52e
    }

    .assresult.tier-high {
      border-top-color: #e8743a
    }

    .assresult.tier-critical {
      border-top-color: var(--red)
    }

    .assresult h2 {
      margin: 14px 0 8px;
      font-size: 1.3rem;
      color: var(--head)
    }

    .asstier {
      color: var(--gold)
    }

    .assblurb {
      color: var(--muted);
      font-size: .95rem;
      margin: 0 auto;
      max-width: 520px
    }

    .assgauge {
      position: relative;
      height: 14px;
      border-radius: 8px;
      background: var(--line);
      max-width: 360px;
      margin: 0 auto 4px;
      overflow: hidden
    }

    .assgaugefill {
      height: 100%;
      border-radius: 8px;
      transition: width .3s
    }

    .tier-low .assgaugefill {
      width: 25%;
      background: var(--emrg)
    }

    .tier-elevated .assgaugefill {
      width: 52%;
      background: #e0a52e
    }

    .tier-high .assgaugefill {
      width: 78%;
      background: #e8743a
    }

    .tier-critical .assgaugefill {
      width: 100%;
      background: var(--red)
    }

    .assgaugelabel {
      display: none
    }

    .assvec {
      border-top: 1px solid var(--line);
      padding: 11px 0
    }

    .assvec:first-of-type {
      border-top: none
    }

    .assvecname {
      font-weight: 700;
      color: var(--navy2);
      font-size: .95rem
    }

    .assvecdesc {
      color: var(--muted);
      font-size: .86rem;
      margin-top: 2px
    }

    .assrec {
      margin-top: 14px;
      background: rgba(12, 124, 153, .10);
      border-left: 3px solid var(--gold);
      border-radius: 8px;
      padding: 11px 14px;
      font-size: .9rem
    }

    .assrec a {
      font-weight: 700
    }

    .assleadcard {
      border: 2px solid var(--gold)
    }

    .assform {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .assrow {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .assrow>input {
      flex: 1;
      min-width: 150px
    }

    .assform input,
    .assform textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 13px;
      font-size: .95rem;
      font-family: inherit;
      background: var(--panel);
      color: var(--ink);
      box-sizing: border-box
    }

    .assform textarea {
      min-height: 70px;
      resize: vertical
    }

    .asssend {
      background: var(--gold);
      color: #ffffff;
      border: none;
      border-radius: 9px;
      padding: 13px;
      font-weight: 800;
      font-size: .98rem;
      cursor: pointer;
      font-family: inherit
    }

    .asssend:disabled {
      opacity: .6;
      cursor: default
    }

    .assformnote {
      color: var(--muted);
      font-size: .78rem;
      text-align: center
    }

    .assretake {
      text-align: center;
      margin-top: 6px
    }

    .assretake button {
      background: none;
      border: none;
      color: var(--navy2);
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      font-size: .88rem
    }

    .assintro {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      background: var(--panel);
      border: 1px solid var(--line);
      border-left: 4px solid var(--gold);
      border-radius: 10px;
      padding: 11px 16px;
      margin: 0 0 16px
    }

    .assintro-txt {
      font-size: .9rem;
      color: var(--ink)
    }

    .assintro-txt b {
      color: var(--head)
    }

    .assintro-btn {
      background: var(--gold);
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 8px 15px;
      font-weight: 800;
      font-size: .85rem;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap
    }

    .assintro-btn:hover {
      filter: brightness(1.06)
    }

    /* Services / Request a Sweep */
    .svcwrap {
      max-width: 820px;
      margin: 0 auto
    }

    .svchero {
      background: linear-gradient(150deg, var(--navy) 0%, var(--bar) 100%);
      color: #fff;
      border-radius: 16px;
      padding: 34px 30px;
      text-align: center;
      margin-bottom: 20px
    }

    .svchero .svckick {
      color: var(--gold);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: .66rem;
      margin-bottom: 8px
    }

    .svchero h2 {
      margin: 0 0 10px;
      font-size: 1.72rem;
      line-height: 1.2;
      color: #fff
    }

    .svchero p {
      margin: 0 auto 20px;
      max-width: 560px;
      color: #d5e2f0;
      font-size: .98rem
    }

    .svcherobtn {
      background: var(--gold);
      color: #ffffff;
      border: none;
      border-radius: 10px;
      padding: 14px 26px;
      font-weight: 800;
      font-size: 1.02rem;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 3px 12px rgba(12, 124, 153, .4)
    }

    .svcherobtn:hover {
      filter: brightness(1.07)
    }

    .svctrust {
      margin-top: 14px;
      color: #9fb6cc;
      font-size: .8rem
    }

    .svcsec {
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--navy);
      margin: 26px 0 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--line);
      font-weight: 800
    }

    .svcgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    @media(max-width:640px) {
      .svcgrid {
        grid-template-columns: 1fr
      }

      .svchero h2 {
        font-size: 1.4rem
      }
    }

    .svccard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 18px 19px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05)
    }

    .svccard .svcicon {
      font-size: 1.5rem;
      line-height: 1
    }

    .svccard h3 {
      margin: 9px 0 5px;
      font-size: 1.06rem;
      color: var(--head)
    }

    .svccard p {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: .88rem;
      flex: 1
    }

    .svclist {
      list-style: none;
      margin: 0 0 14px;
      padding: 0
    }

    .svclist li {
      position: relative;
      padding: 2px 0 2px 18px;
      font-size: .83rem;
      color: var(--ink)
    }

    .svclist li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--emrg);
      font-weight: 800
    }

    .svcbtn {
      background: none;
      border: 1.5px solid var(--navy2);
      color: var(--navy2);
      border-radius: 8px;
      padding: 9px 14px;
      font-weight: 700;
      font-size: .85rem;
      cursor: pointer;
      font-family: inherit;
      align-self: flex-start
    }

    .svcbtn:hover {
      background: var(--navy2);
      color: #fff
    }

    .svcwho {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .svcwho .whochip {
      background: rgba(40, 82, 124, .10);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 6px 13px;
      font-size: .84rem;
      font-weight: 600;
      color: var(--navy2)
    }

    .svcsteps {
      counter-reset: svcstep;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .svcstep {
      position: relative;
      padding: 2px 0 2px 42px;
      min-height: 30px
    }

    .svcstep::before {
      counter-increment: svcstep;
      content: counter(svcstep);
      position: absolute;
      left: 0;
      top: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--navy);
      color: #fff;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .9rem
    }

    .svcstep b {
      color: var(--head)
    }

    .svcstep p {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: .86rem
    }

    .svcformcard {
      background: var(--panel);
      border: 2px solid var(--emrg);
      border-radius: 14px;
      padding: 22px 24px;
      margin-top: 14px
    }

    .svcformcard h3 {
      margin: 0 0 4px;
      font-size: 1.15rem;
      color: var(--head)
    }

    .svcform label.fl {
      display: block;
      font-size: .7rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin: 10px 0 4px;
      font-weight: 800
    }

    .svcform select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 13px;
      font-size: .95rem;
      font-family: inherit;
      background: var(--panel);
      color: var(--ink)
    }

    .svcquote {
      background: rgba(12, 124, 153, .10);
      border-left: 3px solid var(--gold);
      border-radius: 8px;
      padding: 11px 14px;
      font-size: .86rem;
      margin: 14px 0
    }

    /* Educational History */
    .histwrap {
      max-width: 760px;
      margin: 0 auto
    }

    .histhead h2 {
      font-size: 1.5rem;
      color: var(--head);
      margin: 0 0 6px
    }

    .histintro {
      color: var(--muted);
      font-size: .95rem;
      margin: 0 0 8px;
      max-width: 660px
    }

    .histcard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 22px 24px;
      margin: 14px 0;
      box-shadow: 0 1px 3px rgba(20, 40, 70, .05);
      border-top: 4px solid var(--navy)
    }

    .histera {
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--gold);
      font-weight: 800
    }

    .histtitle {
      margin: 4px 0 2px;
      font-size: 1.3rem;
      color: var(--head)
    }

    .histhook {
      color: var(--navy2);
      font-style: italic;
      font-size: .98rem;
      margin-bottom: 12px
    }

    .histcard p {
      margin: 0 0 11px;
      font-size: .95rem;
      line-height: 1.7
    }

    .histvideo {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      border-radius: 10px;
      margin: 6px 0 14px;
      background: #000
    }

    .histvideo iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0
    }

    .histtake {
      background: rgba(12, 124, 153, .10);
      border-left: 3px solid var(--gold);
      border-radius: 8px;
      padding: 11px 14px;
      font-size: .9rem;
      margin: 6px 0 12px
    }

    .histtake span {
      display: block;
      font-size: .64rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 800;
      color: var(--gold);
      margin-bottom: 3px
    }

    .histsrc {
      font-size: .78rem;
      color: var(--muted)
    }

    .histsrc a {
      color: var(--navy2);
      text-decoration: none;
      font-weight: 600
    }

    /* Brief scope filter chips */
    .scopebar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 0 0 16px
    }

    .scopechip {
      background: var(--panel);
      border: 1.5px solid var(--line);
      color: var(--muted);
      border-radius: 999px;
      padding: 8px 16px;
      font-size: .9rem;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: border-color .12s, background .12s, color .12s
    }

    .scopechip:hover {
      border-color: var(--navy2);
      color: var(--navy2)
    }

    .scopechip.active {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff
    }

    .scopechip .scopen {
      font-size: .74rem;
      font-weight: 800;
      background: rgba(0, 0, 0, .10);
      color: inherit;
      border-radius: 999px;
      padding: 1px 8px;
      min-width: 20px;
      text-align: center
    }

    .scopechip.active .scopen {
      background: rgba(255, 255, 255, .22)
    }

    /* Presentation / big-screen news wall */
    .preswrap { max-width: 1040px; margin: 0 auto }
    .prescontrols { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px }
    .prestopics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px }
    .pchip { background: var(--panel); border: 1.5px solid var(--line); color: var(--muted); border-radius: 999px; padding: 8px 14px; font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 7px }
    .pchip:hover { border-color: var(--navy2) }
    .pchip.on { background: var(--navy); border-color: var(--navy); color: #fff }
    .pchip .psub { font-weight: 600; opacity: .8; font-size: .78rem }
    .pchip .pn { font-size: .72rem; font-weight: 800; background: rgba(0, 0, 0, .10); border-radius: 999px; padding: 1px 7px }
    .pchip.on .pn { background: rgba(255, 255, 255, .22) }
    .presopts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px }
    .popt-label { font-size: .8rem; color: var(--muted); font-weight: 700 }
    .popt { background: none; border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; font-family: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; color: var(--navy2) }
    .popt:hover { background: var(--navy); color: #fff; border-color: var(--navy) }
    .popt.on { background: var(--navy); color: #fff; border-color: var(--navy) }
    .popt-sep { width: 1px; height: 20px; background: var(--line) }
    .presopts select { border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; font-family: inherit; font-size: .82rem; background: var(--panel); color: var(--ink) }
    .presfs { margin-left: auto; background: var(--gold); color: #ffffff; border: none; border-radius: 8px; padding: 8px 16px; font-family: inherit; font-weight: 800; font-size: .85rem; cursor: pointer }
    .presfs:hover { filter: brightness(1.07) }
    .presstage { background: radial-gradient(1200px 500px at 80% -12%, #21486e 0, #0e2135 55%, #091826 100%); border-radius: 14px; overflow: hidden; height: 72vh; min-height: 520px; display: flex; flex-direction: column; position: relative; box-shadow: 0 8px 40px rgba(10, 25, 45, .25) }
    .preshead { display: flex; align-items: center; gap: 18px; padding: 18px 28px; border-bottom: 1px solid rgba(255, 255, 255, .10); flex: none }
    .presbrand { display: flex; align-items: center; gap: 11px }
    .preswm { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: .03em; color: #fff; white-space: nowrap }
    .preswm b { color: #d4a017 }
    .presdot { width: 12px; height: 12px; border-radius: 50%; background: #e0393b; position: relative; flex: none }
    .presdot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(224, 57, 59, .5); animation: prespulse 1.6s ease-out infinite }
    @keyframes prespulse { 0% { transform: scale(.55); opacity: .9 } 100% { transform: scale(1.7); opacity: 0 } }
    .prestag { color: #c7d6e6; font-size: 1.05rem; font-weight: 600 }
    .presqr { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #aebfd1; font-size: .78rem; font-weight: 700; text-align: right; line-height: 1.2 }
    .presqr img { width: 78px; height: 78px; border-radius: 8px; background: #fff; padding: 5px; display: block; flex: none }
    .presviewport { flex: 1; overflow: hidden; position: relative }
    .prestrack { padding: 20px 28px 0 }
    .pcard { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10); border-left: 4px solid #d4a017; border-radius: 12px; padding: 18px 22px; margin-bottom: 18px }
    .pcard .pcat { display: inline-block; color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 11px; border-radius: 20px; margin-bottom: 10px }
    .pcard h3 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.22; color: #fff; font-weight: 800 }
    .pcard p { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.5; color: #d7e2ee }
    .pcard .psrc { font-size: .8rem; color: #8fa6bd; font-weight: 700; text-transform: uppercase; letter-spacing: .03em }
    .presempty { flex: 1; display: flex; align-items: center; justify-content: center; color: #c7d6e6; font-size: 1.1rem; text-align: center; padding: 40px }
    .presstage.presfull { position: fixed; inset: 0; width: 100%; height: 100vh; z-index: 99999; border-radius: 0 }
    .presstage.presfull .preswm { font-size: 1.85rem }
    .presstage.presfull .prestag { font-size: 1.45rem }
    .presstage.presfull .pcard { padding: 24px 30px }
    .presstage.presfull .pcard h3 { font-size: 2.2rem }
    .presstage.presfull .pcard p { font-size: 1.5rem }
    .presstage.presfull .presqr img { width: 108px; height: 108px }
    .presclose { position: absolute; bottom: 16px; right: 18px; z-index: 3; background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; padding: 8px 14px; font-family: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; display: none }
    .presstage.presfull .presclose { display: block }

    /* Signal deep-dive modal */
    .sigcard { cursor: pointer; transition: box-shadow .12s, transform .12s }
    .sigcard:hover { box-shadow: 0 6px 22px rgba(20, 40, 70, .14); transform: translateY(-2px) }
    .sigmodal { position: fixed; inset: 0; z-index: 100000; background: rgba(9, 20, 33, .62); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 30px 16px }
    .sigmodal-panel { position: relative; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; width: 100%; max-width: 720px; padding: 24px 26px 28px; box-shadow: 0 20px 60px rgba(9, 20, 33, .5); margin: auto }
    .sigmodal-x { position: absolute; top: 12px; right: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); width: 34px; height: 34px; border-radius: 8px; font-size: 1rem; cursor: pointer; font-family: inherit }
    .sigmodal-x:hover { background: var(--navy); color: #fff; border-color: var(--navy) }
    .sdhead { padding-right: 40px; margin-bottom: 14px }
    .sdhead h2 { margin: 0; font-size: 1.5rem; color: var(--head) }
    .sdsub { color: var(--muted); font-size: .92rem; margin: 2px 0 8px; font-weight: 600 }
    .sdvizwrap { background: #0e2136; border: 1px solid var(--line); border-radius: 12px; padding: 6px; overflow: hidden }
    .sdvizwrap .sig { width: 100%; height: auto; display: block }
    .sdcontrols { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px }
    .sdtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden }
    .sdt { background: var(--panel); border: none; color: var(--muted); padding: 7px 14px; font-family: inherit; font-weight: 700; font-size: .82rem; cursor: pointer }
    .sdt.on { background: var(--navy); color: #fff }
    .sdrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
    .sdlab { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800 }
    .sdchips { display: inline-flex; gap: 6px; flex-wrap: wrap }
    .sdchip { background: var(--panel); border: 1.5px solid var(--line); color: var(--navy2); border-radius: 999px; padding: 6px 13px; font-family: inherit; font-weight: 700; font-size: .82rem; cursor: pointer }
    .sdchip.on { background: var(--gold); border-color: var(--gold); color: #ffffff }
    .sdocc { width: 100%; font-size: .84rem; color: var(--navy2); font-weight: 700; margin-top: 2px }
    .sdsection { margin-top: 18px }
    .sdsection .elab { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--gold); font-weight: 800; margin-bottom: 6px }
    .sdsection p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink) }
    .sdspecs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px }
    @media (max-width: 560px) { .sdspecs { grid-template-columns: 1fr } }
    .sdspec { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 6px }
    .sdk { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 800 }
    .sdv { font-size: .9rem; color: var(--ink); margin-top: 1px }
    .sdtscm p { background: rgba(12, 124, 153, .10); border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 13px }

    .foot {
      max-width: 1040px;
      margin: 0 auto;
      padding: 0 20px 30px;
      color: var(--muted);
      font-size: .78rem
    }

    .loading,
    .empty {
      color: var(--muted);
      text-align: center;
      padding: 34px 10px;
      font-style: italic
    }

    .foot .stafflink {
      color: var(--muted);
      text-decoration: none;
      font-weight: 600
    }

    .foot .stafflink:hover {
      color: var(--navy2)
    }

    .foot .footsep {
      margin: 0 6px;
      color: var(--muted)
    }


    /* ============================================================
       MoKan Group marketing system (Home, Gear, FAQ, Contact,
       company About, enriched Services, site footer)
       ============================================================ */
    .mk { max-width: 1100px; margin: 0 auto }
    .mk h2 { font-size: 1.85rem; line-height: 1.15; margin: 0 0 10px; color: var(--ink); letter-spacing: -.01em }
    .mk h3 { color: var(--ink) }
    .mk p { color: var(--ink); line-height: 1.7 }
    .mkkick { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; color: var(--gold); margin: 0 0 8px }
    .mklead { font-size: 1.06rem; color: var(--muted); max-width: 760px; line-height: 1.7 }
    .tm { font-size: .62em; vertical-align: super; color: var(--gold) }

    /* Hero */
    .mkhero { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line);
      background:
        radial-gradient(1100px 420px at 82% -10%, rgba(237,237,200,.16), transparent 60%),
        linear-gradient(135deg, var(--navy) 0%, #013a4c 55%, #00212b 100%);
      color: #fff; padding: 60px 48px; margin-bottom: 30px }
    :root[data-theme=dark] .mkhero { border-color: #24384d }
    .mkhero .mkkick { color: #EDEDC8 }
    .mkhero h1 { font-size: 2.75rem; line-height: 1.08; margin: 0 0 14px; letter-spacing: -.02em; color: #fff; max-width: 760px }
    .mkhero p { color: #d9e4ef; font-size: 1.12rem; max-width: 620px; margin: 0 0 26px }
    .mkhero .mktag { color: #EDEDC8; font-weight: 700; letter-spacing: .02em; margin-top: 22px; font-size: 1.02rem }
    .mkcta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
    .mkbtn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 13px 22px;
      font-weight: 800; font-size: .98rem; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform .06s ease, background .15s ease }
    .mkbtn:active { transform: translateY(1px) }
    .mkbtn-gold { background: var(--gold); color: #ffffff }
    .mkbtn-gold:hover { background: #0a6b83 }
    .mkbtn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.35) }
    .mkbtn-ghost:hover { background: rgba(255,255,255,.14) }
    .mkbtn-navy { background: var(--navy); color: #fff }
    .mkbtn-navy:hover { background: var(--navy2) }
    .mkbtn-line { background: transparent; color: var(--navy2); border-color: var(--line) }
    .mkbtn-line:hover { border-color: var(--navy2) }

    /* Sections */
    .mksec { margin: 40px 0 }
    .mksec-head { max-width: 780px; margin-bottom: 22px }
    .mkrule { height: 3px; width: 54px; background: var(--gold); border-radius: 2px; margin: 0 0 16px }

    /* Split (text + figure) */
    .mksplit { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center }
    .mksplit.rev .mkfig { order: -1 }
    .mkfig { margin: 0 }
    .mkfig img { width: 100%; height: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); display: block }
    .mkfig figcaption { color: var(--muted); font-size: .8rem; margin-top: 8px; font-style: italic }
    @media(max-width:760px){ .mksplit { grid-template-columns: 1fr } .mksplit.rev .mkfig { order: 0 } }

    /* Card grids */
    .mkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px }
    .mkcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; transition: border-color .15s ease, transform .08s ease }
    .mkcard:hover { border-color: var(--gold); transform: translateY(-2px) }
    .mkcard .mkico { font-size: 1.7rem; line-height: 1; margin-bottom: 10px }
    .mkcard h3 { margin: 0 0 8px; font-size: 1.08rem }
    .mkcard p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6 }

    /* Methods / who chips */
    .mkchips { display: flex; flex-wrap: wrap; gap: 10px }
    .mkchip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: .9rem; color: var(--ink) }
    .mkchip b { color: var(--navy2) }

    /* Partners / trusted tools */
    .mkpartners { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px }
    .mkpartner { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; text-decoration: none; transition: border-color .15s ease }
    .mkpartner:hover { border-color: var(--gold) }
    .mkpartner b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 3px }
    .mkpartner span { color: var(--muted); font-size: .84rem }
    .mkpartner .ar { color: var(--gold); font-weight: 700 }

    /* Testimonial / pull quote */
    .mkquote { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 26px 30px; margin: 8px 0 }
    .mkquote blockquote { margin: 0; font-size: 1.18rem; line-height: 1.6; color: var(--ink); font-weight: 500 }
    .mkquote cite { display: block; margin-top: 12px; color: var(--muted); font-style: normal; font-weight: 700; font-size: .9rem }

    /* Team */
    .mkteam { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px }
    .mkmember { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-align: center }
    .mkmember img { width: 104px; height: 104px; object-fit: cover; border-radius: 50%; border: 3px solid var(--gold); margin: 0 auto 12px; display: block }
    .mkmember .mkavatar { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy2)); border: 3px solid var(--gold) }
    .mkmember b { display: block; color: var(--ink); font-size: 1.05rem }
    .mkmember span { color: var(--gold); font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .06em }

    /* Gear items */
    .mkgear { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px }
    .mkgearcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column }
    .mkgearcard .mkgearimg { background: #0e1a26; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; overflow: hidden }
    .mkgearcard .mkgearimg img { width: 100%; height: 100%; object-fit: contain; padding: 14px }
    .mkgearcard .mkgearbody { padding: 18px 20px 22px }
    .mkgearcard .mkbrand { color: var(--gold); font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em }
    .mkgearcard h3 { margin: 4px 0 8px; font-size: 1.12rem }
    .mkgearcard p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6 }

    /* FAQ accordion */
    .mkfaq { max-width: 820px }
    .mkfaq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 10px; overflow: hidden }
    .mkfaq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 17px 20px; font-size: 1.02rem; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 14px }
    .mkfaq-q .mkfaq-x { color: var(--gold); font-size: 1.3rem; flex: none; transition: transform .2s ease }
    .mkfaq-item.open .mkfaq-x { transform: rotate(45deg) }
    .mkfaq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; color: var(--muted); line-height: 1.7 }
    .mkfaq-item.open .mkfaq-a { max-height: 420px }
    .mkfaq-a p { margin: 0; padding: 0 20px 18px; color: var(--muted) }

    /* Contact */
    .mkcontact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: start }
    @media(max-width:760px){ .mkcontact { grid-template-columns: 1fr } }
    .mkcontact-info .mkinfo-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line) }
    .mkcontact-info .mkinfo-row .mki { font-size: 1.3rem; flex: none }
    .mkcontact-info .mkinfo-row b { display: block; color: var(--ink) }
    .mkcontact-info .mkinfo-row a { color: var(--navy2); text-decoration: none; font-weight: 600 }
    .mkcontact-info .mkinfo-row span { display: block; color: var(--muted); font-size: .9rem }
    .mkcontact-info .mkinfo-row a { display: block }
    .mkformcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px }
    .mkformcard h3 { margin: 0 0 6px }
    .mkformcard .mkfrow { display: flex; gap: 12px }
    @media(max-width:520px){ .mkformcard .mkfrow { flex-direction: column } }
    .mkformcard input, .mkformcard textarea { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit }
    .mkformcard textarea { min-height: 120px; resize: vertical }
    .mkformcard .mknote { color: var(--muted); font-size: .82rem; margin-top: 8px }
    .ct-safety { background: rgba(12,124,153,.08); border-left: 3px solid var(--navy2); border-radius: 8px; padding: 12px 14px; color: var(--ink); font-size: .86rem; line-height: 1.55; margin: 0 0 16px }

    /* Stat strip */
    .mkstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 6px 0 }
    .mkstat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; text-align: center }
    .mkstat b { display: block; font-size: 1.7rem; color: var(--navy2); line-height: 1 }
    .mkstat span { color: var(--muted); font-size: .84rem; margin-top: 6px; display: block }

    /* CTA band */
    .mkband { background: linear-gradient(135deg, var(--navy), #013a4c); color: #fff; border-radius: 16px; padding: 40px 44px; text-align: center; margin: 40px 0 10px }
    .mkband h2 { color: #fff; margin-bottom: 8px }
    .mkband p { color: #d9e4ef; max-width: 620px; margin: 0 auto 22px }
    .mkband .mkcta { justify-content: center }

    /* Rich site footer */
    .siteftr { background: var(--panel); border-top: 3px solid var(--gold); margin-top: 30px }
    .siteftr-in { max-width: 1180px; margin: 0 auto; padding: 22px 22px 10px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px 40px }
    @media(max-width:820px){ .siteftr-in { grid-template-columns: 1fr 1fr } }
    @media(max-width:520px){ .siteftr-in { grid-template-columns: 1fr } }
    .siteftr h4 { color: var(--ink); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 6px }
    .siteftr a { display: block; color: var(--muted); text-decoration: none; padding: 2px 0; font-size: .84rem; cursor: pointer }
    .siteftr a:hover { color: var(--navy2) }
    .siteftr .ftr-brand img { height: 28px; margin-bottom: 6px }
    .siteftr .ftr-brand p { color: var(--muted); font-size: .8rem; line-height: 1.45; margin: 0 0 6px }
    .siteftr .ftr-tag { color: var(--gold); font-weight: 700; font-size: .8rem }
    .siteftr .ftr-contact b { color: var(--ink) }
    .siteftr-bottom { border-top: 1px solid var(--line); margin-top: 2px }
    .siteftr-bottom .in { max-width: 1180px; margin: 0 auto; padding: 9px 22px; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: center; color: var(--muted); font-size: .77rem }
    .siteftr-bottom a { display: inline; color: var(--muted); text-decoration: none }
    .siteftr-bottom a:hover { color: var(--navy2) }
    .siteftr-bottom .ftr-legal { white-space: nowrap }

    /* --- Unify older Services / Assess components with the marketing system --- */
    .svchero {
      background:
        radial-gradient(900px 360px at 82% -20%, rgba(237,237,200,.16), transparent 60%),
        linear-gradient(135deg, var(--navy) 0%, #013a4c 55%, #00212b 100%);
      border: 1px solid var(--line); border-radius: 18px; padding: 52px 40px
    }
    :root[data-theme=dark] .svchero { border-color: #24384d }
    .svchero h2 { font-size: 2.1rem; letter-spacing: -.01em }
    .svccard { border-radius: 14px; transition: border-color .15s ease, transform .08s ease }
    .svccard:hover { border-color: var(--gold); transform: translateY(-2px) }
    .svcsec {
      font-size: 1.35rem; text-transform: none; letter-spacing: -.01em; color: var(--ink);
      font-weight: 800; border-bottom: 0; padding: 0 0 0 14px; margin: 34px 0 16px; position: relative
    }
    .svcsec::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--gold) }
    .svcformcard { border: 1px solid var(--line); border-left: 4px solid var(--gold) }
    .svcbtn { transition: background .15s ease, color .15s ease }
    .assintro-btn, .svcherobtn { transition: filter .12s ease, transform .06s ease }
    .assintro-btn:active, .svcherobtn:active { transform: translateY(1px) }

    /* --- Home editorial (borderless) sections, instead of boxed cards --- */
    .mkfeatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 40px }
    .mkfeature { padding: 20px 0 4px; border-top: 2px solid var(--gold) }
    .mkfeature .fico { font-size: 1.55rem; line-height: 1; display: block; margin-bottom: 10px }
    .mkfeature h3 { margin: 0 0 7px; font-size: 1.12rem }
    .mkfeature p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65 }

    .mkcols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px }
    @media(max-width:700px){ .mkcols { grid-template-columns: 1fr; gap: 26px } }
    .mkcol h3 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin: 0 0 10px }
    .mkcol h3 .cico { font-size: 1.3rem }
    .mkcol p { margin: 0; color: var(--muted); line-height: 1.75 }

    .mkeng { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px }
    .mkengitem { border-top: 2px solid var(--gold); padding-top: 15px }
    .mkengitem b { display: block; color: var(--ink); font-size: 1.06rem; margin-bottom: 7px }
    .mkengitem p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6 }

    .mkpartnerline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px }
    .mkpartnerline a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: baseline; gap: 8px }
    .mkpartnerline a > span { color: var(--muted); font-weight: 500; font-size: .85rem }
    .mkpartnerline a:hover { color: var(--navy2) }
    .mkpartnerline .sep { color: var(--line); font-weight: 400 }

    .mktools { background: linear-gradient(135deg, #004E64, #013a4c); color: #fff; border-radius: 16px; padding: 36px 40px }
    .mktools .mkrule { background: var(--cream) }
    .mktools h2 { color: #fff; margin: 0 0 8px }
    .mktools .mklead { color: #cfe0e6; margin: 0 }
    .mktoolgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 30px; margin-top: 20px }
    .mktoolitem { display: block; text-decoration: none; color: #fff; padding: 15px 0 13px; border-top: 1px solid rgba(255,255,255,.20); cursor: pointer; transition: border-color .15s ease }
    .mktoolitem b { display: block; font-size: 1.04rem; margin-bottom: 4px; transition: color .15s ease }
    .mktoolitem span { color: #b7cdd4; font-size: .87rem; line-height: 1.5 }
    .mktoolitem:hover { border-top-color: var(--cream) }
    .mktoolitem:hover b { color: var(--cream) }

    /* --- Resources hub page --- */
    .rs-hero { background: linear-gradient(135deg, #004E64, #013a4c); color: #fff; border-radius: 18px; padding: 32px 36px; margin-bottom: 8px }
    .rs-hero .rs-kick { color: var(--cream); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; margin-bottom: 8px }
    .rs-hero h2 { color: #fff; margin: 0 0 10px; font-size: 1.85rem; letter-spacing: -.01em }
    .rs-hero-main p { color: #cfe0e6; max-width: 660px; margin: 0 0 22px; line-height: 1.65 }
    .rs-herolinks { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px }
    @media(max-width:760px){ .rs-herolinks { grid-template-columns: 1fr } }
    .rs-heroitem { display: block; text-decoration: none; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: background .15s ease, border-color .15s ease }
    .rs-heroitem:hover { background: rgba(255,255,255,.12); border-color: var(--cream) }
    .rs-heroitem b { display: flex; align-items: center; gap: 8px; font-size: 1.04rem; margin-bottom: 5px }
    .rs-heroitem span { color: #bcd2d9; font-size: .86rem; line-height: 1.5 }

    .rsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px }
    .rscard { cursor: pointer }
    .rscard h3 { margin: 0 0 7px; font-size: 1.1rem; color: var(--ink) }
    .rscard p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55 }

    /* --- Editorial opening (replaces the boxed hero) --- */
    .mkintro { max-width: 820px; padding: 26px 0 10px }
    .mkintro .mkkick { color: var(--navy2); margin-bottom: 12px }
    .mkintro h1 { font-size: 2.5rem; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 20px; color: var(--ink); font-weight: 800 }
    @media(max-width:640px){ .mkintro h1 { font-size: 1.95rem } }
    .mkintro-lead { font-size: 1.24rem; line-height: 1.55; color: var(--ink); margin: 0 0 18px }
    .mkintro p { font-size: 1.05rem; line-height: 1.75; color: var(--muted); margin: 0 0 16px }
    .mkintro p strong { color: var(--ink); font-weight: 700 }
    .mkintro-actions { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin-top: 24px }
    .mktextlink { color: var(--navy2); font-weight: 700; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 1.02rem }
    .mktextlink:hover { text-decoration: underline }
    .mktextlink.subtle { color: var(--muted); font-weight: 600; font-size: .96rem }
    .mkintro-hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0 0; clear: both }
    .mkdevice { margin: 30px auto 8px; max-width: 660px; text-align: center }
    .mkdevice img { width: 100%; height: auto; display: block }
    .mkdevice figcaption { color: var(--muted); font-size: .86rem; line-height: 1.55; margin: 14px auto 0; max-width: 560px }
    /* floated small inside the opening text so paragraphs wrap around it */
    .mkintro .mkdevice { float: left; width: 320px; max-width: 44%; margin: 2px 30px 14px 0 }
    .mkintro .mkdevice figcaption { font-size: .76rem; margin-top: 8px; max-width: none }
    @media(max-width:600px){
      .mkintro .mkdevice { float: none; width: 240px; margin: 6px auto 18px }
    }

    /* --- Starburst "sale sticker" linking to the Brief --- */
    .mknewtag {
      position: absolute; top: -8px; right: -4px; z-index: 6;
      width: 138px; height: 138px; box-sizing: border-box;
      transform: rotate(8deg); transform-origin: center;
      display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
      background: #FF3B47; color: #fff; text-decoration: none; cursor: pointer; padding: 0 16px;
      clip-path: polygon(50.0% 0.0%, 57.6% 11.7%, 69.1% 3.8%, 71.7% 17.6%, 85.4% 14.6%, 82.4% 28.3%, 96.2% 30.9%, 88.3% 42.4%, 100.0% 50.0%, 88.3% 57.6%, 96.2% 69.1%, 82.4% 71.7%, 85.4% 85.4%, 71.7% 82.4%, 69.1% 96.2%, 57.6% 88.3%, 50.0% 100.0%, 42.4% 88.3%, 30.9% 96.2%, 28.3% 82.4%, 14.6% 85.4%, 17.6% 71.7%, 3.8% 69.1%, 11.7% 57.6%, 0.0% 50.0%, 11.7% 42.4%, 3.8% 30.9%, 17.6% 28.3%, 14.6% 14.6%, 28.3% 17.6%, 30.9% 3.8%, 42.4% 11.7%);
      filter: drop-shadow(0 9px 16px rgba(0,0,0,.30));
      animation: mknudge 3.4s ease-in-out infinite
    }
    .mknewtag:hover { animation: none; transform: rotate(8deg) scale(1.06) }
    .mknewtag .nb { font-size: 1.15rem; font-weight: 900; letter-spacing: .01em; line-height: 1 }
    .mknewtag .nt { font-size: .74rem; font-weight: 800; line-height: 1.2; margin-top: 4px }
    @keyframes mknudge {
      0%, 90%, 100% { transform: rotate(8deg) scale(1) }
      95% { transform: rotate(8deg) scale(1.07) }
    }
    @media (prefers-reduced-motion: reduce) { .mknewtag { animation: none } }
    @media(max-width:760px){
      .mknewtag { position: static; transform: rotate(6deg); margin: 4px auto 22px; animation: none }
    }