:root {
    --blue: #2E4DF9;
    --blue-hover: #233BC1;
    --blue-deep: #001485;
    --blue-darker: #00104D;
    --blue-soft: #EEF1FF;
    --navy: #001485;
    --navy-deep: #00104D;
    --navy-soft: #2E4DF9;
    --ink: #2D2926;
    --muted: #5A6477;
    --line: #E6EAF0;
    --line-strong: #D6DBE3;
    --bg: #FFFFFF;
    --bg-soft: #F5F7FB;
    --bg-tint: #EFF3F9;
    --orange: #2E4DF9;
    --orange-deep: #233BC1;
    --orange-soft: #EEF1FF;
    --green: #2F7D5C;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
    font-feature-settings: 'ss01', 'cv11';
  }

  /* ===== CUSTOM CURSOR =====
     A native `cursor: url(svg)` image is rasterised once at its declared
     pixel size by the OS, so it can never be pixel-perfect crisp on a HiDPI
     screen (even image-set()'s multi-resolution hint isn't reliably honoured
     for `cursor` across browsers). A real DOM element rendered with normal
     CSS doesn't have that problem — it's drawn fresh at full display
     resolution like any other element — so the ring is a small fixed div
     (`.cursor-ring`, injected by synfo.js) that tracks the pointer, and the
     native cursor is hidden behind it. Fine-pointer/hover devices only —
     touch devices never see this and keep their normal behaviour. Help
     tooltips and the drag slider keep their native cursor on purpose (see
     the `!important` exceptions below), everything else is replaced. */
  @media (hover: hover) and (pointer: fine) {
    * { cursor: none !important; }
  }
  .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #000;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.95);
    pointer-events: none;
    /* Max int: must sit above every overlay, incl. the n8n chat window
       (z-index 9999, mounted later in the DOM so it would win a tie). */
    z-index: 2147483647;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .cursor-ring.is-visible { opacity: 1; }

  /* ===== SMOOTH SCROLL (Lenis) =====
     Vendored from lenis@1.3.26/dist/lenis.css — pasted here instead of a
     separate <link> so every page only needs the one shared stylesheet. */
  html.lenis,
  html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent],
  .lenis [data-lenis-prevent-wheel],
  .lenis [data-lenis-prevent-touch],
  .lenis [data-lenis-prevent-vertical],
  .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
  .lenis.lenis-autoToggle {
    transition-property: overflow;
    transition-duration: 1ms;
    transition-behavior: allow-discrete;
  }

  /* ===== NO TEXT SELECTION / CLICK-DRAG-TO-SCROLL =====
     Pairs with the pointerdown/pointermove drag-scroll handling in synfo.js
     — selection has to be off everywhere else, or dragging over body copy
     would highlight text instead of scrolling. Form fields keep normal
     selection so typing/editing still works, and images/svgs skip the
     native "ghost drag" browsers otherwise offer on press-and-drag. */
  html {
    -webkit-user-select: none;
    user-select: none;
  }
  input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }
  img, svg {
    -webkit-user-drag: none;
    user-drag: none;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 720px) { .container { padding: 0 20px; } }

  /* ===== NAV ===== */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 320ms ease,
                backdrop-filter 320ms ease,
                -webkit-backdrop-filter 320ms ease,
                border-color 320ms ease,
                box-shadow 320ms ease;
  }
  .topbar.is-scrolled {
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--line);
  }
  .nav { display: flex; align-items: center; gap: 40px; height: 76px; }
  .brand { display: inline-flex; align-items: center; flex: none; }
  .brand img {
    display: block;
    height: 56px; width: auto;
    transition: opacity 200ms ease, filter 320ms ease;
  }
  .brand:hover img { opacity: 0.8; }
  .topbar:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }

  .nav-links { display: flex; gap: 4px; flex: 1; align-items: center; }
  .nav-link, .nav-trigger {
    font: inherit;
    background: none; border: 0; cursor: pointer;
    font-size: 14.5px; color: var(--ink); font-weight: 500;
    padding: 10px 14px; border-radius: 8px;
    display: inline-flex; align-items: center;
    white-space: nowrap;
    transition: background 200ms ease, color 200ms ease;
  }
  .nav-link:hover, .nav-trigger:hover,
  .nav-item:hover .nav-trigger,
  .nav-item:focus-within .nav-trigger {
    color: var(--blue); background: var(--blue-soft);
  }
  .has-caret::after {
    content: ""; display: inline-block;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px,-2px);
    margin-left: 8px; opacity: 0.55;
    transition: transform 220ms ease;
  }
  .nav-item:hover .has-caret::after,
  .nav-item:focus-within .has-caret::after,
  .nav-item.is-open .has-caret::after {
    transform: rotate(225deg) translate(-2px,-2px);
    opacity: 0.85;
  }
  .nav-item { position: relative; }

  /* Initial transparent state — light text/logo/button on the hero */
  .topbar:not(.is-scrolled) .nav-link,
  .topbar:not(.is-scrolled) .nav-trigger,
  .topbar:not(.is-scrolled) .phone-link,
  .topbar:not(.is-scrolled) .portal-link {
    color: #fff;
  }
  .topbar:not(.is-scrolled) .nav-link:hover,
  .topbar:not(.is-scrolled) .nav-trigger:hover,
  .topbar:not(.is-scrolled) .nav-item:hover .nav-trigger,
  .topbar:not(.is-scrolled) .nav-item:focus-within .nav-trigger,
  .topbar:not(.is-scrolled) .phone-link:hover,
  .topbar:not(.is-scrolled) .portal-link:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
  }
  .topbar:not(.is-scrolled) .nav-cta .btn-primary {
    background: #fff;
    color: var(--blue-deep);
    border-color: #fff;
  }
  .topbar:not(.is-scrolled) .nav-cta .btn-primary:hover {
    background: var(--blue-soft);
    border-color: var(--blue-soft);
    color: var(--blue-deep);
  }

  .nav-cta { display: flex; gap: 8px; align-items: center; }
  .phone-link {
    font-size: 14px; font-weight: 600; color: var(--navy);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 8px;
    white-space: nowrap;
    transition: background 200ms ease, color 200ms ease;
  }
  .phone-link:hover { background: var(--blue-soft); color: var(--blue); }
  .phone-link svg { width: 14px; height: 14px; }
  .portal-link {
    font: inherit;
    background: none; border: 0; cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--navy);
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; border-radius: 8px;
    white-space: nowrap;
    transition: background 200ms ease, color 200ms ease;
  }
  .portal-link:hover { background: var(--blue-soft); color: var(--blue); }
  .portal-link svg { width: 14px; height: 14px; }

  /* Below ~1380px the topbar is too cramped to fit phone + portal text
     alongside the full nav-links, the audit button and the toggle, so
     collapse those two labels to icon-only while keeping the main menu
     intact. */
  @media (max-width: 1380px) {
    .phone-link span, .portal-link span { display: none; }
  }
  /* Below ~1140px the toggle's wide left margin starts to bite; shrink
     it down to a more modest gap so the cluster doesn't overflow. */
  @media (max-width: 1140px) {
    .theme-toggle { margin-left: 12px; }
  }
  /* Below 1080px the main nav swaps over to the hamburger / mobile sheet. */
  @media (max-width: 1080px) {
    .nav-links { display: none; }
  }

  /* ===== BUTTONS ===== */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: 999px;
    font-size: 14.5px; font-weight: 600;
    border: 1px solid transparent;
    transition: all 160ms ease;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
  .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); transform: translateY(-1px); }
  .btn-ghost { color: var(--ink); border-color: var(--line-strong); background: transparent; }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-light { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }
  .btn-light:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); }
  .btn-arrow { width: 14px; height: 14px; }

  /* ===== HERO ===== */
  .hero {
    --mx: 50%; --my: 30%;
    --grid-y: 0px;
    position: relative;
    background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
  }
  .hero::before {
    content: "";
    position: absolute; inset: -10%;
    background:
      radial-gradient(40% 38% at 75% 18%, rgba(120, 150, 255, 0.55), transparent 65%),
      radial-gradient(36% 34% at 12% 78%, rgba(0, 20, 133, 0.85), transparent 65%);
    filter: blur(8px);
    animation: heroDrift 28s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
  }
  .hero::after {
    content: "";
    position: absolute; inset: -15%;
    background:
      radial-gradient(30% 28% at 90% 80%, rgba(199, 208, 255, 0.32), transparent 70%),
      radial-gradient(28% 26% at 18% 12%, rgba(46, 77, 249, 0.4), transparent 70%);
    filter: blur(12px);
    animation: heroDrift2 36s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
  }
  .hero-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
    transform: translate3d(0, var(--grid-y), 0);
    will-change: transform;
    pointer-events: none;
    z-index: 0;
  }
  .hero-net {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 800ms ease;
  }
  .hero-net.is-on { opacity: 1; }
  .hero-spot {
    position: absolute; inset: 0;
    background: radial-gradient(360px 280px at var(--mx) var(--my), rgba(255,255,255,0.10), transparent 65%);
    transition: background 220ms ease-out;
    pointer-events: none;
    z-index: 1;
  }
  .hero-inner {
    position: relative; z-index: 2;
    padding: 144px 0 72px;
    text-align: center;
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 12.5px; font-weight: 500;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.02em;
    background: rgba(255,255,255,0.04);
  }
  .eyebrow .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ED28C; box-shadow: 0 0 0 0 rgba(78,210,140,0.6);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(78,210,140,0.6); }
    70% { box-shadow: 0 0 0 8px rgba(78,210,140,0); }
    100% { box-shadow: 0 0 0 0 rgba(78,210,140,0); }
  }
  .hero h1 {
    font-size: clamp(40px, 6.2vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 28px auto 24px;
    max-width: 18ch;
  }
  .hero h1 em {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic; font-weight: 400;
    color: #C7D0FF;
  }
  .hero .lede {
    max-width: 62ch; margin: 0 auto 28px;
    font-size: 18px; color: rgba(255,255,255,0.78);
    line-height: 1.6;
  }
  .hero-bullets {
    list-style: none; padding: 0; margin: 0 auto 36px;
    display: inline-flex; flex-wrap: wrap; gap: 14px 28px;
    justify-content: center; max-width: 920px;
  }
  .hero-bullets li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; color: rgba(255,255,255,0.9);
  }
  .hero-bullets li svg { width: 16px; height: 16px; color: var(--blue-soft); flex: none; }
  .hero-ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
  @keyframes heroDrift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    50%  { transform: translate3d(3%, 2%, 0) scale(1.06); }
    100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
  }
  @keyframes heroDrift2 {
    0%   { transform: translate3d(2%, 2%, 0) scale(1.04); }
    50%  { transform: translate3d(-3%, -2%, 0) scale(1); }
    100% { transform: translate3d(1%, -3%, 0) scale(1.08); }
  }
  .hero-inner > * {
    opacity: 0; transform: translateY(14px);
    animation: heroIn 900ms cubic-bezier(.2,.7,.2,1) forwards;
  }
  .hero-inner > .eyebrow      { animation-delay: 60ms; }
  .hero-inner > h1            { animation-delay: 180ms; }
  .hero-inner > .lede         { animation-delay: 320ms; }
  .hero-inner > .hero-bullets { animation-delay: 460ms; }
  .hero-inner > .hero-ctas    { animation-delay: 580ms; }
  .hero-inner > .logo-strip   { animation-delay: 760ms; }
  @keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) {
    .hero::before, .hero::after { animation: none; }
    .hero-grid { transform: none !important; }
    .hero-inner > * { animation: none; opacity: 1; transform: none; }
  }

  .logo-strip {
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .logo-strip p {
    font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.55); margin: 0 0 24px;
  }
  .logo-row {
    --gap: 88px;
    position: relative;
    overflow: hidden;
    /* fade to transparent at both edges */
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .logo-track {
    display: flex; gap: var(--gap);
    width: max-content;
    animation: logo-marquee 36s linear infinite;
    will-change: transform;
  }
  .logo-track:hover { animation-play-state: paused; }
  .logo-set {
    display: flex; align-items: center; gap: var(--gap);
    flex: none;
  }
  .logo-row .lg {
    display: flex; align-items: center; justify-content: center;
    height: 56px; flex: none;
  }
  .logo-row .lg img {
    max-height: 40px; width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.68;
    transition: opacity 220ms ease, transform 220ms ease;
  }
  .logo-row .lg:hover img { opacity: 1; transform: scale(1.04); }
  @keyframes logo-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-track { animation: none; }
    .logo-row {
      mask-image: none; -webkit-mask-image: none;
      overflow: hidden;
    }
  }
  @media (max-width: 720px) {
    .logo-row { --gap: 60px; }
    .logo-track { animation-duration: 28s; }
  }

  /* ===== STATS ===== */
  .stats { border-bottom: 1px solid var(--line); background: var(--bg); }
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 56px 0; }
  .stat { padding: 0 24px; border-left: 1px solid var(--line); }
  .stat:first-child { border-left: none; }
  .stat .num { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
  .stat .num small { font-size: 22px; color: var(--blue); margin-left: 2px; font-weight: 600; }
  .stat .lab { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.4; }
  @media (max-width: 760px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
    .stat { border-left: none; }
    .stat:nth-child(odd) { border-right: 1px solid var(--line); }
  }
  /* Word stats ("Certified", "End-to-end") are wider than a half-width
     column at 48px, so they were clipped at the viewport edge on phones. */
  @media (max-width: 560px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { padding: 0 16px; min-width: 0; }
    .stat .num { font-size: clamp(26px, 8vw, 40px); overflow-wrap: anywhere; }
  }

  /* ===== SECTIONS ===== */
  section.block { padding: 112px 0; }
  section.block.tight { padding: 88px 0; }
  section.dark {
    background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    color: #fff;
  }
  section.soft { background: var(--bg-soft); }
  .section-head { max-width: 720px; margin-bottom: 56px; }
  .section-head .kicker {
    font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--blue); font-weight: 600; margin-bottom: 14px;
  }
  .section-head h2 {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em;
    color: var(--navy); margin: 0 0 16px; font-weight: 700;
  }
  section.dark .section-head h2 { color: #fff; }
  .section-head p { font-size: 18px; color: var(--muted); margin: 0; line-height: 1.6; }
  section.dark .section-head p { color: rgba(255,255,255,0.72); }

  /* ===== AUDIENCE ===== */
  .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 860px) { .audience-grid { grid-template-columns: 1fr; } }
  .audience-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 40px 36px;
    overflow: hidden;
    transition: transform 1400ms ease-in-out, box-shadow 1400ms ease-in-out, border-color 1400ms ease-in-out;
  }
  .audience-card::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(700px 280px at 100% 0%, rgba(255,255,255,0.18), transparent 55%),
      linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    opacity: 0; transition: opacity 1400ms ease-in-out;
    pointer-events: none;
  }
  .audience-card > * { position: relative; z-index: 1; }
  .audience-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 24px 60px -18px rgba(46,77,249,0.45),
                0 0 0 1px rgba(46,77,249,0.4);
  }
  .audience-card:hover::before { opacity: 1; }
  .audience-card:hover h3, .audience-card:hover p,
  .audience-card:hover ul li, .audience-card:hover .cta { color: #fff; }
  .audience-card:hover p { color: rgba(255,255,255,0.82); }
  .audience-card:hover .tag { background: rgba(255,255,255,0.16); color: #fff; }
  .audience-card .tag {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    background: var(--blue-soft); color: var(--blue);
    margin-bottom: 18px;
    transition: background 1400ms ease-in-out, color 1400ms ease-in-out;
  }
  .audience-card h3 {
    font-size: 28px; line-height: 1.18; letter-spacing: -0.02em;
    margin: 0 0 12px; color: var(--navy); font-weight: 700;
    transition: color 1400ms ease-in-out;
  }
  .audience-card p {
    color: var(--muted); margin: 0 0 24px; font-size: 16px;
    transition: color 1400ms ease-in-out;
  }
  .audience-card .cta {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--navy); font-weight: 600; font-size: 14.5px;
    transition: color 1400ms ease-in-out;
  }
  .audience-card .cta svg { width: 14px; height: 14px; transition: transform 200ms ease; }
  .audience-card:hover .cta svg { transform: translateX(4px); }
  .audience-card ul {
    margin: 0 0 28px; padding: 0; list-style: none;
    display: grid; gap: 10px;
  }
  .audience-card ul li {
    font-size: 14.5px; color: var(--ink);
    display: flex; align-items: flex-start; gap: 10px;
    transition: color 1400ms ease-in-out;
  }
  .audience-card ul li::before {
    content: ""; flex: none; margin-top: 7px;
    width: 14px; height: 14px;
    background: var(--blue-soft);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='%232E4DF9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-position: center; background-repeat: no-repeat;
    transition: background-color 1400ms ease-in-out;
  }
  .audience-card:hover ul li::before {
    background-color: rgba(255,255,255,0.22);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }

  /* ===== MSA TIERS ===== */
  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
  @media (max-width: 980px) { .tiers { grid-template-columns: 1fr; } }
  .tier {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 36px 32px;
    display: flex; flex-direction: column;
    transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
  }
  .tier:hover {
    transform: translateY(-3px);
    border-color: var(--blue);
    box-shadow: 0 24px 60px -22px rgba(46,77,249,0.30);
  }
  .tier.popular {
    border-color: transparent;
    background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    color: #fff;
    box-shadow: 0 30px 70px -22px rgba(46,77,249,0.50),
                0 0 0 1px rgba(46,77,249,0.4);
    transform: translateY(-8px);
  }
  .tier.popular::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(700px 280px at 100% 0%, rgba(255,255,255,0.18), transparent 55%);
    border-radius: inherit; pointer-events: none;
  }
  .tier.popular > * { position: relative; z-index: 1; }
  .tier-ribbon {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: #fff; color: var(--blue);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
    box-shadow: 0 8px 24px -8px rgba(0,20,133,0.3);
  }
  .tier-name { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--navy); margin: 0 0 4px; }
  .tier.popular .tier-name { color: #fff; }
  .tier-focus {
    font-size: 13px; color: var(--blue); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px;
  }
  .tier.popular .tier-focus { color: #C7D0FF; }
  .tier-seats {
    display: inline-block; padding: 5px 12px; border-radius: 999px;
    background: var(--blue-soft); color: var(--blue);
    font-size: 13px; font-weight: 600; margin-bottom: 18px;
  }
  .tier.popular .tier-seats { background: rgba(255,255,255,0.16); color: #fff; }
  .tier-desc { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 0 24px; min-height: 70px; }
  .tier.popular .tier-desc { color: rgba(255,255,255,0.82); }
  .tier-pillstrip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
  .tier-pillstrip span {
    font-size: 12px; padding: 4px 10px; border-radius: 999px;
    background: var(--bg-soft); color: var(--ink); font-weight: 500;
  }
  .tier.popular .tier-pillstrip span { background: rgba(255,255,255,0.12); color: #fff; }
  .tier-cta { display: flex; gap: 10px; margin-bottom: 28px; }
  .tier-cta .btn { flex: 1; justify-content: center; }
  .tier.popular .btn-primary { background: #fff; color: var(--blue-deep); border-color: #fff; }
  .tier.popular .btn-primary:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
  .tier.popular .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.32); background: transparent; }
  .tier.popular .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
  .tier hr { border: 0; border-top: 1px solid var(--line); margin: 0 0 22px; }
  .tier.popular hr { border-top-color: rgba(255,255,255,0.14); }
  .tier-group-title {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin: 0 0 12px;
  }
  .tier.popular .tier-group-title { color: rgba(255,255,255,0.7); }
  .tier-features { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
  .tier-features li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--ink); line-height: 1.45;
  }
  .tier.popular .tier-features li { color: rgba(255,255,255,0.92); }
  .tier-features li::before {
    content: ""; flex: none; margin-top: 4px;
    width: 14px; height: 14px;
    background: var(--blue-soft); border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='%232E4DF9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-position: center; background-repeat: no-repeat;
  }
  .tier.popular .tier-features li::before {
    background-color: rgba(255,255,255,0.22);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
  .matrix-wrap { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 8px; overflow: hidden; }
  .matrix { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .matrix th, .matrix td { padding: 14px 18px; text-align: left; }
  .matrix thead th { font-weight: 700; color: var(--navy); font-size: 14px; border-bottom: 2px solid var(--line); background: var(--bg-soft); }
  .matrix thead th:first-child { border-top-left-radius: 12px; }
  .matrix thead th:last-child { border-top-right-radius: 12px; }
  .matrix thead th.popular {
    background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    color: #fff; position: relative;
  }
  .matrix thead th.popular::after {
    content: "Most popular";
    position: absolute; top: 10px; right: 14px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    background: rgba(255,255,255,0.16); padding: 3px 8px; border-radius: 999px;
  }
  .matrix tbody tr { border-bottom: 1px solid var(--line); }
  .matrix tbody tr:last-child { border-bottom: 0; }
  .matrix tbody tr:hover td { background: var(--blue-soft); }
  .matrix tbody td:not(:first-child) { text-align: center; width: 22%; }
  .matrix tbody td:first-child { color: var(--ink); font-weight: 500; }
  .matrix .grouprow td {
    background: var(--bg-soft); padding: 12px 18px;
    font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--blue-deep); font-weight: 700;
  }
  .matrix .check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--blue-soft); color: var(--blue);
  }
  .matrix .check svg { width: 12px; height: 12px; }
  .matrix .none { color: var(--line-strong); font-size: 18px; }
  /* ===== BASELINE PANEL =====
     "At a glance" / "What's included" card used across about, index and the
     service pages. Brand-blue gradient card (same stops as the chat header
     and CTA gradients) with white type, stacked header, and each item led
     by a white tick chip. Fixed colours (not var(--blue)) so white text
     keeps its contrast in dark mode, where --blue is brightened. */
  .baseline {
    margin-top: 36px;
    background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    border-radius: 16px;
    padding: 28px 32px 24px;
    color: #fff;
  }
  .baseline-head {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 18px; margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.22);
  }
  .baseline-head h4 { margin: 0; font-size: 20px; line-height: 1.3; color: #fff; letter-spacing: -0.015em; font-weight: 700; }
  .baseline-head span { font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.5; }
  .baseline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 28px; list-style: none; padding: 0; margin: 0; }
  @media (max-width: 780px) { .baseline-grid { grid-template-columns: 1fr 1fr; } }
  .baseline-grid li {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; color: #fff; padding: 0;
  }
  .baseline-grid li svg {
    width: 26px; height: 26px; padding: 7px; box-sizing: border-box;
    border-radius: 8px; background: #fff; color: #2E4DF9; flex: none;
  }

  /* Stacked variant: item name above its detail. Use when each row is a
     name/detail pair rather than a single feature line. */
  .baseline-grid.is-stack li { align-items: flex-start; }
  .baseline-grid.is-stack li svg { margin-top: 1px; }
  .baseline-grid.is-stack .bl-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .baseline-grid.is-stack .bl-meta strong {
    font-size: 14.5px; color: #fff; font-weight: 650; line-height: 1.35;
    letter-spacing: -0.005em;
  }
  .baseline-grid.is-stack .bl-meta span {
    font-size: 13.5px; color: rgba(255,255,255,0.8); font-weight: 400; line-height: 1.45;
  }

  /* ===== SERVICE CARDS (homepage) ===== */
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
  /* 2x2 variant — use when a section has exactly 4 cards and would otherwise
     orphan one tile in the default 3-col grid. */
  .svc-grid.is-2col { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 640px) { .svc-grid.is-2col { grid-template-columns: 1fr; } }

  /* ===== VALUES MANIFEST =====
     Editorial alternative to .svc cards. Use for short, principle-led lists
     (e.g. company values) where card chrome would feel heavy. Two-column,
     numbered, hairline-separated, compact body copy. */
  .values-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 56px;
    row-gap: 4px;
    margin-top: 4px;
  }
  @media (max-width: 780px) { .values-list { grid-template-columns: 1fr; column-gap: 0; } }
  .values-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
    padding: 26px 0 24px;
    border-top: 1px solid var(--line);
  }
  .values-num {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 42px;
    line-height: 0.9;
    color: var(--blue);
    font-weight: 400;
    letter-spacing: -0.01em;
    min-width: 44px;
  }
  .values-body h3 {
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 6px 0 8px;
    color: var(--navy);
    font-weight: 700;
  }
  .values-body p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
  }
  .svc {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 36px 32px;
    display: block;
    overflow: hidden;
    transition: transform 1400ms ease-in-out, box-shadow 1400ms ease-in-out, border-color 1400ms ease-in-out;
  }
  .svc::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(620px 260px at 100% 0%, rgba(255,255,255,0.18), transparent 55%),
      linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    opacity: 0; transition: opacity 1400ms ease-in-out;
    pointer-events: none;
  }
  .svc > * { position: relative; z-index: 1; }
  .svc:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 26px 60px -22px rgba(46,77,249,0.55),
                0 0 0 1px rgba(46,77,249,0.4);
  }
  .svc:hover::before { opacity: 1; }
  .svc:hover h3 { color: #fff; }
  .svc:hover p { color: rgba(255,255,255,0.82); }
  .svc:hover .svc-link { color: #fff; }
  .svc:hover .svc-link svg { transform: translateX(4px); }
  .svc-ico {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
    transition: background 1400ms ease-in-out, box-shadow 1400ms ease-in-out;
  }
  .svc:hover .svc-ico {
    background: rgba(255,255,255,0.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
  }
  .svc-ico svg { width: 26px; height: 26px; }
  .svc h3 {
    font-size: 22px; line-height: 1.25; letter-spacing: -0.015em;
    margin: 0 0 10px; color: var(--navy); font-weight: 700;
    transition: color 1400ms ease-in-out;
  }
  .svc p { color: var(--muted); margin: 0 0 18px; font-size: 15px; line-height: 1.55; transition: color 1400ms ease-in-out; }
  .svc-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--blue); font-weight: 600; font-size: 14.5px;
    transition: color 1400ms ease-in-out;
  }
  .svc-link svg { width: 14px; height: 14px; transition: transform 200ms ease; }
  .svc-allcta { margin-top: 36px; text-align: center; }

  /* ===== SERVICE CARD FLIP (.svc--flip) =====
     Modelled on the Kokonut UI "card flip" from kokonut-sandbox, rebuilt in
     vanilla CSS and the synfo blue palette.
     Resting face: blue gradient cover with a large service icon, title + one-line summary pinned to the bottom, small flip glyph.
     Hover / keyboard focus: 3D flip to a detail face with description,
     features that slide in one after another, and a CTA row.
     Touch and reduced-motion visitors never see the front face: they get
     the detail face as an ordinary static card, so nothing is hidden behind
     a gesture they can't perform. */
  .svc--flip::before { display: none; }
  .svc--flip .svc-face--front { display: none; }
  .svc--flip:hover h3 { color: var(--navy); }
  .svc--flip:hover p { color: var(--muted); }
  .svc--flip .svc-face--back h3 { margin-bottom: 8px; }
  .svc--flip .svc-face--back > p { margin-bottom: 20px; }

  .svc-feats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
  .svc-feats li {
    display: flex; align-items: center; gap: 9px;
    font-size: 14.5px; color: var(--ink); line-height: 1.35;
  }
  .svc-feats svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--blue); }

  .svc-cta { border-top: 1px solid var(--line); padding-top: 16px; margin-top: auto; }
  .svc-cta-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-radius: 12px;
    background: var(--bg-tint);
    font-size: 14.5px; font-weight: 600; color: var(--navy);
    transition: transform 300ms ease, background 300ms ease, color 300ms ease;
  }
  .svc-cta-row svg { width: 15px; height: 15px; color: var(--blue); transition: transform 300ms ease; }
  .svc--flip:hover .svc-cta-row,
  .svc--flip:focus-visible .svc-cta-row {
    background: linear-gradient(90deg, rgba(46,77,249,0.14), rgba(46,77,249,0.05) 60%, transparent);
    color: var(--blue);
  }
  .svc--flip:hover .svc-cta-row svg { transform: translateX(3px) scale(1.1); }

  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .svc--flip {
      padding: 0; min-height: 320px;
      background: transparent; border-color: transparent; overflow: visible;
      perspective: 2000px;
    }
    .svc--flip:hover { transform: none; box-shadow: none; border-color: transparent; }
    /* Narrower 3-col cards wrap the back-face copy onto extra lines */
    @media (max-width: 1240px) { .svc--flip { min-height: 340px; } }
    .svc--flip:focus-visible { outline: none; }
    .svc--flip:focus-visible .svc-face { box-shadow: 0 0 0 3px var(--blue); }

    .svc--flip .svc-flip {
      position: absolute; inset: 0;
      transform-style: preserve-3d;
      transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1);
    }
    .svc--flip:hover .svc-flip,
    .svc--flip:focus-visible .svc-flip { transform: rotateY(180deg); }

    .svc--flip .svc-face {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
      box-shadow: 0 1px 2px rgba(16,24,40,0.05);
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
      overflow: hidden;
      transition: box-shadow 500ms ease;
    }
    .svc--flip:hover .svc-face { box-shadow: 0 22px 48px -20px rgba(46,77,249,0.38); }
    .svc--flip .svc-face--front { transform: rotateY(0deg); }
    .svc--flip .svc-face--back { transform: rotateY(180deg); padding: 20px 22px 18px; }
    .svc--flip .svc-face--back .svc-ico { display: none; }
    .svc--flip .svc-face--back h3 { font-size: 18px; margin-bottom: 6px; }
    .svc--flip .svc-face--back > p { font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; }
    .svc--flip .svc-feats { gap: 6px; margin-bottom: 14px; }
    .svc--flip .svc-feats li { font-size: 13.5px; }
    .svc--flip .svc-cta { padding-top: 12px; }
    .svc--flip .svc-cta-row { padding: 9px 12px; font-size: 14px; }

    /* Large icon on the blue cover */
    .svc-cover-ico {
      position: absolute; left: 0; right: 0; top: 0; bottom: 84px;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none;
    }
    .svc-cover-ico .svc-ico {
      width: 80px; height: 80px; border-radius: 20px; margin: 0;
      transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-cover-ico .svc-ico svg { width: 38px; height: 38px; }
    .svc--flip:hover .svc-cover-ico .svc-ico { transform: scale(1.04); }

    .svc-front-foot {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 18px 22px;
      display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
    }
    .svc-front-foot h3 {
      font-size: 19px; margin: 0 0 5px;
      transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-front-foot .svc-sub {
      margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms;
    }
    .svc--flip:hover .svc-front-foot h3,
    .svc--flip:hover .svc-front-foot .svc-sub { transform: translateY(-4px); }
    .svc-flip-ico { position: relative; flex: 0 0 auto; width: 16px; height: 16px; margin-bottom: 4px; }
    .svc-flip-ico::before {
      content: ""; position: absolute; inset: -8px; border-radius: 8px;
      background: linear-gradient(135deg, rgba(46,77,249,0.2), rgba(46,77,249,0.1) 50%, transparent);
    }
    .svc-flip-ico svg { position: relative; width: 16px; height: 16px; color: var(--blue); }

    /* Blue cover: the resting face keeps the brand gradient the cards had
       before, with the orbs, icon and text switched to white on top of it. */
    .svc--flip .svc-face--front {
      border-color: transparent;
      background:
        radial-gradient(620px 260px at 100% 0%, rgba(255,255,255,0.18), transparent 55%),
        linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    }
    .svc--flip .svc-face--front .svc-ico {
      background: rgba(255,255,255,0.16);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
    }
    .svc--flip .svc-face--front h3,
    .svc--flip:hover .svc-face--front h3 { color: #fff; }
    .svc--flip .svc-face--front .svc-sub,
    .svc--flip:hover .svc-face--front .svc-sub { color: rgba(255,255,255,0.8); }
    .svc--flip .svc-face--front .svc-flip-ico::before { background: rgba(255,255,255,0.16); }
    .svc--flip .svc-face--front .svc-flip-ico svg { color: #fff; }

    /* Features slide in one after another once the card has turned */
    .svc--flip .svc-feats li {
      opacity: 0; transform: translateX(-10px);
      transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .svc--flip .svc-feats li:nth-child(1) { transition-delay: 150ms; }
    .svc--flip .svc-feats li:nth-child(2) { transition-delay: 200ms; }
    .svc--flip .svc-feats li:nth-child(3) { transition-delay: 250ms; }
    .svc--flip .svc-feats li:nth-child(4) { transition-delay: 300ms; }
    .svc--flip:hover .svc-feats li,
    .svc--flip:focus-visible .svc-feats li { opacity: 1; transform: none; }
  }


  /* ===== CAPABILITY TILES =====
     Compact, lower-key sibling of .svc. Use when a section needs to enumerate
     many capabilities without competing visually with hero .svc cards. Tinted
     icon (no gradient), tighter padding, restrained hover. */
  .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 980px) { .cap-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .cap-grid { grid-template-columns: 1fr; } }
  .cap-tile {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  }
  .cap-tile:hover {
    transform: translateY(-2px);
    border-color: var(--blue);
    box-shadow: 0 14px 32px -20px rgba(46,77,249,0.30);
  }
  .cap-ico {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--blue-soft);
    color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    transition: background 240ms ease, color 240ms ease;
  }
  .cap-tile:hover .cap-ico { background: var(--blue); color: #fff; }
  .cap-ico svg { width: 18px; height: 18px; }
  .cap-tile h3 {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--navy);
    font-weight: 700;
  }
  .cap-tile p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 12px;
    flex: 1;
  }
  .cap-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--blue);
    display: inline-flex; align-items: center; gap: 4px;
    letter-spacing: 0.01em;
  }
  .cap-link svg { width: 12px; height: 12px; transition: transform 200ms ease; }
  .cap-tile:hover .cap-link svg { transform: translateX(3px); }

  /* ===== RISK / TRUST ===== */
  .risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 980px) { .risk-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .risk-grid { grid-template-columns: 1fr; } }
  .risk-tile {
    background: #fff; border: 1px solid var(--line);
    border-radius: 16px; padding: 28px 28px 24px;
    transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  }
  .risk-tile:hover {
    transform: translateY(-3px);
    border-color: var(--blue);
    box-shadow: 0 18px 40px -22px rgba(46,77,249,0.30);
  }
  .risk-ico {
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--blue-soft); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
  }
  .risk-ico svg { width: 22px; height: 22px; }
  .risk-tile h4 {
    font-size: 17px; line-height: 1.3; letter-spacing: -0.01em;
    color: var(--navy); margin: 0 0 8px; font-weight: 700;
  }
  .risk-tile p { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.55; }

  /* ===== CASE STUDIES ===== */
  .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 980px) { .case-grid { grid-template-columns: 1fr; } }
  .cs {
    position: relative; background: #fff;
    border: 1px solid var(--line); border-radius: 18px;
    padding: 32px 30px 28px;
    display: flex; flex-direction: column;
    transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  }
  .cs:hover {
    transform: translateY(-3px); border-color: var(--blue);
    box-shadow: 0 22px 48px -22px rgba(46,77,249,0.28);
  }
  .cs-logo {
    font-size: 17px; font-weight: 800; letter-spacing: -0.015em;
    color: var(--navy); margin-bottom: 14px;
    padding-bottom: 14px; border-bottom: 1px solid var(--line);
  }
  .cs-tag {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    background: var(--blue-soft); color: var(--blue);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 14px;
  }
  .cs h3 {
    font-size: 19px; line-height: 1.32; letter-spacing: -0.012em;
    color: var(--navy); margin: 0 0 14px; font-weight: 700;
  }
  .cs p { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.55; }
  .cs-outcome {
    margin-top: auto; padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px;
  }
  .cs-outcome .stat-num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); line-height: 1; }
  .cs-outcome .stat-lab { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

  /* ===== TESTIMONIALS ===== */
  .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }
  .quote {
    margin: 0; background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 36px 36px 32px;
    position: relative;
  }
  .quote .quote-mark { width: 28px; height: 28px; color: var(--blue); opacity: 0.45; margin-bottom: 14px; }
  .quote blockquote {
    margin: 0 0 24px;
    font-size: 17px; line-height: 1.55;
    color: var(--ink); letter-spacing: -0.005em;
  }
  .quote figcaption {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--line); padding-top: 16px;
  }
  .quote .who { font-weight: 700; color: var(--navy); font-size: 15px; }
  .quote .role { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

  /* ===== WHY ===== */
  .why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
  @media (max-width: 900px) { .why { grid-template-columns: 1fr; gap: 28px; } }
  .why-item { border-top: 2px solid var(--blue-soft); padding-top: 24px; }
  .why-item h3 {
    font-size: 22px; letter-spacing: -0.015em; margin: 0 0 12px;
    color: var(--navy); font-weight: 700; line-height: 1.25;
  }
  .why-item p { color: var(--muted); font-size: 15.5px; margin: 0; }
  section.dark .why-item p { color: rgba(255,255,255,0.78); }
  section.dark .why-item h3 { color: #fff; }

  /* ===== CERTS ===== */
  .certs-strip {
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 48px 0;
  }
  .certs-inner { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; }
  @media (max-width: 780px) { .certs-inner { grid-template-columns: 1fr; gap: 24px; } }
  .certs-inner .label { font-size: 13px; color: var(--muted); line-height: 1.5; }
  .certs-inner .label strong { color: var(--navy); display: block; font-size: 16px; margin-bottom: 4px; }
  .certs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
  @media (max-width: 980px) { .certs { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 780px) { .certs { grid-template-columns: repeat(3, 1fr); } }
  .cert {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 12px;
    text-align: center;
    font-size: 12.5px; color: var(--ink); font-weight: 600;
    line-height: 1.3;
    transition: all 160ms ease;
  }
  .cert:hover { border-color: var(--navy); background: var(--bg-tint); }
  .cert .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--blue); display: inline-block; margin-bottom: 8px;
  }

  /* ===== INSIGHTS ===== */
  .insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  @media (max-width: 900px) { .insights { grid-template-columns: 1fr; } }
  .insight {
    border: 1px solid var(--line); border-radius: 16px;
    overflow: hidden; background: #fff;
    transition: all 200ms ease;
  }
  .insight:hover { border-color: var(--blue); transform: translateY(-2px); }
  .insight .img {
    aspect-ratio: 16 / 9;
    background: linear-gradient(225deg, #001485, #2E4DF9);
    position: relative;
  }
  .insight .img.alt-1 { background: linear-gradient(225deg, #001485, #2E4DF9); }
  .insight .img.alt-2 { background: linear-gradient(225deg, #2E4DF9, #233BC1); }
  .insight .img.alt-3 { background: linear-gradient(225deg, #00104D, #4831B0); }
  .insight .img::after {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  .insight .body { padding: 24px 24px 28px; }
  .insight .cat {
    font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--blue); font-weight: 600;
  }
  .insight h3 {
    font-size: 19px; line-height: 1.32; letter-spacing: -0.01em;
    margin: 10px 0 10px; color: var(--navy); font-weight: 600;
  }
  .insight p { color: var(--muted); font-size: 14.5px; margin: 0 0 16px; line-height: 1.55; }
  .insight .read { font-size: 13.5px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }

  /* ===== FINAL CTA ===== */
  .final-cta {
    background:
      radial-gradient(900px 400px at 100% 0%, rgba(46,77,249,0.55), transparent 60%),
      linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    color: #fff;
    border-radius: 28px;
    padding: 72px;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
    position: relative; overflow: hidden;
  }
  .final-cta::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 80% 50%, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 80% 50%, #000, transparent 70%);
  }
  @media (max-width: 880px) { .final-cta { grid-template-columns: 1fr; padding: 48px 32px; } }
  .final-cta h2 {
    font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.025em;
    margin: 0 0 16px; font-weight: 700; position: relative;
  }
  .final-cta p { color: rgba(255,255,255,0.78); margin: 0 0 28px; font-size: 17px; position: relative; }
  .final-ctas { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
  .final-cta .panel {
    position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    padding: 28px;
  }
  .panel .row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .panel .row:last-child { border-bottom: none; padding-bottom: 0; }
  .panel .row:first-child { padding-top: 0; }
  .panel .row .ic {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.08);
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
  }
  .panel .row .lab { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
  .panel .row .val { font-size: 15px; font-weight: 600; color: #fff; margin-top: 2px; }

  /* ===== FOOTER ===== */
  footer { background: #00104D; color: rgba(255,255,255,0.78); padding: 72px 0 32px; }
  .foot-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 48px;
    padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  @media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
  .foot-brand .b { display: inline-block; }
  .foot-brand .b img {
    display: block; height: 44px; width: auto;
    filter: brightness(0) invert(1);
  }
  .foot-brand p { color: rgba(255,255,255,0.6); font-size: 14px; max-width: 36ch; margin: 14px 0 24px; }
  .foot-contact { display: grid; gap: 10px; }
  .foot-contact > div {
    font-size: 14px; color: rgba(255,255,255,0.85);
    display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 12px;
  }
  .foot-contact > div a { color: inherit; transition: color 200ms ease; }
  .foot-contact > div a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .foot-contact > div span {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); font-weight: 600;
  }
  .foot-col h4 {
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.5); margin: 0 0 16px; font-weight: 600;
  }
  .foot-col a { display: block; padding: 6px 0; font-size: 14px; color: rgba(255,255,255,0.78); }
  .foot-col a:hover { color: var(--blue-soft); }
  .foot-bottom {
    padding-top: 28px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: rgba(255,255,255,0.55);
    flex-wrap: wrap; gap: 12px;
  }
  .foot-bottom .badges { display: flex; gap: 12px; align-items: center; }
  .badge-mini {
    font-size: 11.5px; padding: 4px 10px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
  }

  /* ===== Mega panel & Dropdowns (nav) ===== */
  .mega {
    position: absolute; top: calc(100% + 14px); left: -260px;
    width: 980px; background: #fff;
    border-radius: 16px;
    box-shadow:
      0 30px 80px -20px rgba(0,20,133,0.22),
      0 0 0 1px rgba(0,20,133,0.06);
    padding: 28px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
    z-index: 60;
  }
  .mega::before {
    content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
  }
  .nav-item:hover > .mega,
  .nav-item:focus-within > .mega,
  .nav-item.is-open > .mega {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .mega-grid { display: grid; grid-template-columns: 1fr 280px; gap: 28px; }
  .mega-eyebrow {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
    padding: 0 12px 12px; border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
  }
  .services-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
  .srv-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px; border-radius: 10px;
    transition: background 200ms ease;
  }
  .srv-item:hover { background: var(--blue-soft); }
  .srv-ico {
    flex: none;
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--bg-tint); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 200ms ease, color 200ms ease;
  }
  .srv-ico svg { width: 18px; height: 18px; }
  .srv-item:hover .srv-ico { background: var(--blue); color: #fff; }
  .srv-text { display: flex; flex-direction: column; min-width: 0; }
  .srv-title { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
  .srv-desc { font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
  .mega-col-popular { border-left: 1px solid var(--line); padding-left: 28px; }
  .pop-item {
    display: block;
    padding: 10px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 500; color: var(--ink);
    transition: background 200ms ease, color 200ms ease;
  }
  .pop-item:hover { background: var(--blue-soft); color: var(--blue); }
  .mega-cta {
    margin-top: 18px;
    background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    position: relative; overflow: hidden;
  }
  .mega-cta::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(300px 140px at 100% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
  }
  .mega-cta > * { position: relative; }
  .mega-cta-eyebrow {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 6px;
  }
  .mega-cta h4 {
    margin: 0 0 6px;
    font-size: 16px; line-height: 1.3; letter-spacing: -0.01em;
    font-weight: 700; color: #fff;
  }
  .mega-cta p {
    margin: 0 0 14px;
    font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.45;
  }
  .mega-cta .btn {
    background: #fff; color: var(--blue-deep); border-color: #fff;
    padding: 9px 14px; font-size: 13.5px;
  }
  .mega-cta .btn:hover { background: var(--blue-soft); border-color: var(--blue-soft); transform: translateY(-1px); }
  .drop {
    position: absolute; top: calc(100% + 14px); left: 0;
    width: 280px; background: #fff;
    border-radius: 14px;
    box-shadow:
      0 24px 60px -20px rgba(0,20,133,0.20),
      0 0 0 1px rgba(0,20,133,0.06);
    padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
    z-index: 60;
  }
  .drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nav-item:hover > .drop,
  .nav-item:focus-within > .drop,
  .nav-item.is-open > .drop {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .drop a { display: block; padding: 10px 12px; border-radius: 8px; transition: background 180ms ease; }
  .drop a:hover { background: var(--blue-soft); }
  .drop-title { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
  .drop a:hover .drop-title { color: var(--blue); }
  .drop-desc { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

  /* ===== MODAL ===== */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 18, 50, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    z-index: 200;
    opacity: 0; visibility: hidden;
    transition: opacity 280ms ease, visibility 280ms ease;
  }
  .modal-overlay.is-open { opacity: 1; visibility: visible; }
  .modal-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 36px 36px 28px;
    width: 420px; max-width: 100%;
    box-shadow: 0 30px 80px -16px rgba(0,20,133,0.30),
                0 0 0 1px rgba(0,20,133,0.05);
    transform: translateY(8px) scale(0.97);
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  }
  .modal-overlay.is-open .modal-card { transform: translateY(0) scale(1); }
  .modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: 0; border-radius: 8px;
    background: transparent; cursor: pointer;
    color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 160ms ease, color 160ms ease;
  }
  .modal-close:hover { background: var(--bg-soft); color: var(--ink); }
  .modal-close svg { width: 18px; height: 18px; }
  .modal-logo { margin-bottom: 18px; }
  .modal-logo img { height: 40px; width: auto; display: block; }
  [data-theme="dark"] .modal-logo img { filter: brightness(0) invert(1); }
  .modal-card h3 {
    font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
    color: var(--navy); margin: 0 0 8px;
  }
  .modal-card .modal-lede {
    font-size: 14.5px; color: var(--muted); margin: 0 0 24px; line-height: 1.5;
  }
  .login-form { display: flex; flex-direction: column; gap: 14px; }
  .login-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
  .login-field > span {
    font-size: 12.5px; font-weight: 600; color: var(--ink);
    letter-spacing: 0.01em;
  }
  .login-field input,
  .login-field select,
  .login-field textarea {
    font: inherit;
    width: 100%; box-sizing: border-box;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--ink);
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }
  .login-field textarea { min-height: 110px; resize: vertical; }
  .login-field input:focus,
  .login-field select:focus,
  .login-field textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(46,77,249,0.12);
  }
  .login-field .show-pass {
    position: absolute; right: 8px; bottom: 8px;
    width: 32px; height: 32px;
    border: 0; background: transparent; cursor: pointer;
    color: var(--muted); border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 160ms ease, background 160ms ease;
  }
  .login-field .show-pass:hover { color: var(--blue); background: var(--blue-soft); }
  .login-field .show-pass svg { width: 16px; height: 16px; }
  .login-extra {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px;
    margin-top: 4px;
  }
  .remember-me {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink); cursor: pointer;
    user-select: none;
  }
  .remember-me input { width: 16px; height: 16px; accent-color: var(--blue); }
  .login-submit {
    margin-top: 8px; width: 100%; justify-content: center;
    padding: 13px 16px; font-size: 15px;
  }
  .login-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 12px;
    color: var(--muted); font-size: 12px;
  }
  .login-divider::before, .login-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
  }
  .login-sso { display: grid; gap: 8px; }
  .login-sso .btn {
    background: #fff; color: var(--ink); border-color: var(--line-strong);
    justify-content: center; padding: 11px 14px; font-size: 14px;
  }
  .login-sso .btn:hover { background: var(--bg-soft); border-color: var(--ink); }
  .forgot-link {
    color: var(--blue); font-weight: 500;
  }
  .forgot-link:hover { text-decoration: underline; }
  .modal-foot {
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 13px; color: var(--muted);
  }
  .modal-foot a { color: var(--blue); font-weight: 500; }
  body.modal-open { overflow: hidden; }

  .modal-cta {
    width: 100%; justify-content: center;
    padding: 14px 18px;
    font-size: 15px;
    margin-bottom: 22px;
  }
  .modal-cta svg { transition: transform 200ms ease; }
  .modal-cta:hover svg { transform: translateX(3px); }

  .portal-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .portal-features li {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--ink); line-height: 1.4;
  }
  .portal-features li svg {
    width: 14px; height: 14px;
    color: var(--blue); flex: none;
    background: var(--blue-soft);
    border-radius: 50%;
    padding: 4px; box-sizing: content-box;
  }

/* ===== Inner-page hero (Managed IT plans, etc.) ===== */
.page-hero {
  background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
  color: #fff;
  padding: 184px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 320px at 80% 10%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(620px 280px at 12% 90%, rgba(0,20,133,0.6), transparent 65%);
  pointer-events: none;
}
.page-hero > .container { position: relative; }
.page-hero .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.page-hero .crumb a { color: rgba(255,255,255,0.85); }
.page-hero .crumb a:hover { color: #fff; }
.page-hero .crumb svg { width: 10px; height: 10px; opacity: 0.6; }
.page-hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 0 auto 18px; line-height: 1.08;
  max-width: 22ch;
}
.page-hero h1 em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  color: #C7D0FF;
}
.page-hero .sub {
  font-size: 18px; color: rgba(255,255,255,0.78);
  max-width: 60ch; margin: 0 auto 32px;
  line-height: 1.55;
}
.page-hero-ctas {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.page-hero .quick-stats {
  display: inline-flex; gap: 28px; flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.page-hero .quick-stats > div {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; color: rgba(255,255,255,0.78);
}
.page-hero .quick-stats strong {
  font-size: 22px; font-weight: 700; color: #fff;
  letter-spacing: -0.02em;
}

/* ===== FAQ ===== */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.faq-item[open] {
  border-color: var(--blue);
  box-shadow: 0 16px 32px -20px rgba(46,77,249,0.30);
}
.faq-item summary {
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px; font-weight: 400;
  color: var(--blue); flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 220ms ease, background 200ms ease, color 200ms ease;
}
.faq-item[open] summary::after { content: "−"; background: var(--blue); color: #fff; }
.faq-item .faq-body {
  padding: 0 24px 22px;
  font-size: 15px; color: var(--muted); line-height: 1.6;
}
.faq-item .faq-body p:first-child { margin-top: 0; }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* Small intro band used on inner pages */
.intro-band {
  background: var(--bg-soft);
  padding: 64px 0 56px;
}
.intro-band .container {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start;
}
@media (max-width: 880px) { .intro-band .container { grid-template-columns: 1fr; gap: 32px; } }
.intro-band h2 {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.02em; line-height: 1.18;
  color: var(--navy); margin: 0 0 14px; font-weight: 700;
}
.intro-band p {
  font-size: 16px; color: var(--muted); margin: 0 0 14px; line-height: 1.6;
}
.intro-band .intro-side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
}
.intro-band .intro-side h4 {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 12px; font-weight: 600;
}
.intro-band .intro-side ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.intro-band .intro-side li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; color: var(--ink); line-height: 1.45;
}
.intro-band .intro-side li svg {
  width: 14px; height: 14px; color: var(--blue); flex: none; margin-top: 4px;
}

/* ===== Inner-page hero (Managed IT plans, etc.) ===== */
.page-hero {
  background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
  color: #fff;
  padding: 184px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 320px at 80% 10%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(620px 280px at 12% 90%, rgba(0,20,133,0.6), transparent 65%);
  pointer-events: none;
}
.page-hero > .container { position: relative; }
.page-hero .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.page-hero .crumb a { color: rgba(255,255,255,0.85); }
.page-hero .crumb a:hover { color: #fff; }
.page-hero .crumb svg { width: 10px; height: 10px; opacity: 0.6; }
.page-hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 0 auto 18px; line-height: 1.08;
  max-width: 22ch;
}
.page-hero h1 em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  color: #C7D0FF;
}
.page-hero .sub {
  font-size: 18px; color: rgba(255,255,255,0.78);
  max-width: 60ch; margin: 0 auto 32px;
  line-height: 1.55;
}
.page-hero-ctas {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.page-hero .quick-stats {
  display: inline-flex; gap: 28px; flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.page-hero .quick-stats > div {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; color: rgba(255,255,255,0.78);
}
.page-hero .quick-stats strong {
  font-size: 22px; font-weight: 700; color: #fff;
  letter-spacing: -0.02em;
}

/* ===== FAQ ===== */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.faq-item[open] {
  border-color: var(--blue);
  box-shadow: 0 16px 32px -20px rgba(46,77,249,0.30);
}
.faq-item summary {
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px; font-weight: 400;
  color: var(--blue); flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 200ms ease, color 200ms ease;
}
.faq-item[open] summary::after { content: "−"; background: var(--blue); color: #fff; }
.faq-item .faq-body {
  padding: 0 24px 22px;
  font-size: 15px; color: var(--muted); line-height: 1.6;
}
.faq-item .faq-body p:first-child { margin-top: 0; }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* Small intro band used on inner pages */
.intro-band {
  background: var(--bg-soft);
  padding: 64px 0 56px;
}
.intro-band .container {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start;
}
@media (max-width: 880px) { .intro-band .container { grid-template-columns: 1fr; gap: 32px; } }
.intro-band h2 {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.02em; line-height: 1.18;
  color: var(--navy); margin: 0 0 14px; font-weight: 700;
}
.intro-band p {
  font-size: 16px; color: var(--muted); margin: 0 0 14px; line-height: 1.6;
}
.intro-band .intro-side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
}
.intro-band .intro-side h4 {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 12px; font-weight: 600;
}
.intro-band .intro-side ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.intro-band .intro-side li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; color: var(--ink); line-height: 1.45;
}
.intro-band .intro-side li svg {
  width: 14px; height: 14px; color: var(--blue); flex: none; margin-top: 4px;
}

/* ===== Inner-page hero modifier — shorter, breadcrumb-led ===== */
.hero.is-inner .hero-inner {
  padding: 168px 0 80px;
}
.hero.is-inner h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  max-width: 22ch;
  margin-top: 0;
}
.hero.is-inner .quick-stats {
  display: inline-flex;
  gap: 28px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero.is-inner .quick-stats > div {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; color: rgba(255,255,255,0.78);
}
.hero.is-inner .quick-stats strong {
  font-size: 22px; font-weight: 700; color: #fff;
  letter-spacing: -0.02em;
}

/* Crumb works inside .hero-inner now (not just legacy .page-hero) */
.hero-inner .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.hero-inner .crumb a { color: rgba(255,255,255,0.85); }
.hero-inner .crumb a:hover { color: #fff; }
.hero-inner .crumb svg { width: 10px; height: 10px; opacity: 0.6; }
.hero-inner .crumb span { color: #fff; }

/* ===== HAMBURGER + MOBILE NAV ===== */
.nav-burger {
  position: relative;
  display: none;
  width: 42px; height: 42px;
  background: transparent; border: 0;
  cursor: pointer;
  border-radius: 10px;
  align-items: center; justify-content: center;
  color: var(--ink);
  transition: background 200ms ease, color 200ms ease;
  flex: none;
}
.nav-burger:hover { background: var(--blue-soft); color: var(--blue); }
.topbar:not(.is-scrolled) .nav-burger { color: #fff; }
.topbar:not(.is-scrolled) .nav-burger:hover { background: rgba(255,255,255,0.12); color: #fff; }

.nav-burger span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1),
              top 320ms cubic-bezier(.2,.7,.2,1),
              opacity 200ms ease;
}
.nav-burger span:nth-child(1) { top: 13px; }
.nav-burger span:nth-child(2) { top: 20px; }
.nav-burger span:nth-child(3) { top: 27px; }
.nav-burger[aria-expanded="true"] { color: #fff; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-burger { display: inline-flex; }
  .nav-cta { display: none; }
}

.nav-mobile {
  position: fixed; inset: 0;
  background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
  color: #fff;
  z-index: 49;          /* under .topbar (z 50) so the burger stays clickable */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms ease;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; }
.nav-mobile-inner {
  min-height: 100%;
  padding: 100px 22px 28px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.m-nav { display: flex; flex-direction: column; }
.m-nav > a,
.m-nav details > summary {
  display: block;
  padding: 18px 4px;
  font-size: 19px; font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  cursor: pointer; list-style: none;
}
.m-nav details > summary::-webkit-details-marker { display: none; }
.m-nav details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.m-nav details > summary::after {
  content: "";
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
  background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
  transition: transform 280ms ease, background 200ms ease;
  flex: none;
}
.m-nav details[open] > summary::after {
  background: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001485' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>");
  background-size: 14px 14px;
  transform: rotate(180deg);
}
.m-nav-children {
  display: flex; flex-direction: column;
  padding: 4px 0 14px;
}
.m-nav-children a {
  display: block;
  padding: 12px 18px;
  font-size: 16px; font-weight: 500;
  color: rgba(255,255,255,0.88);
  border-radius: 8px;
}
.m-nav-children a:hover,
.m-nav-children a:focus { background: rgba(255,255,255,0.08); color: #fff; }
.m-nav-children .m-nav-divider {
  height: 1px; background: rgba(255,255,255,0.12);
  margin: 10px 12px;
}
.m-nav-foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-direction: column; gap: 10px;
}
.m-nav-foot a, .m-nav-foot button {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  font-size: 15.5px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer; text-align: left;
  width: 100%; box-sizing: border-box;
  font-family: inherit;
}
.m-nav-foot a:hover, .m-nav-foot button:hover {
  background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32);
}
.m-nav-foot svg { width: 18px; height: 18px; color: #C7D0FF; flex: none; }
.m-nav-foot .btn-primary {
  justify-content: center;
  background: #fff; color: var(--blue-deep); border-color: #fff;
  margin-top: 4px;
}
.m-nav-foot .btn-primary:hover { background: var(--blue-soft); border-color: var(--blue-soft); }

/* When the mobile nav is open, force the topbar transparent (over the gradient) */
.topbar.is-scrolled:has(.nav-burger[aria-expanded="true"]) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.topbar:has(.nav-burger[aria-expanded="true"]) .brand img { filter: brightness(0) invert(1); }

/* ===== MATRIX TABLE: horizontal scroll at narrow widths ===== */
@media (max-width: 760px) {
  .matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    border-radius: 14px;
  }
  .matrix { min-width: 620px; }
  .matrix th, .matrix td { padding: 12px 14px; }
  .matrix thead th.popular::after {
    top: 6px; right: 8px; font-size: 9px; padding: 2px 6px;
  }
}

/* ===== TIER CARDS: stack the CTA buttons on small phones ===== */
@media (max-width: 480px) {
  .tier-cta { flex-direction: column; gap: 8px; }
  .tier-cta .btn { width: 100%; padding: 11px 14px; }
}

/* ===== HERO INNER PADDING: tighter on small phones ===== */
@media (max-width: 560px) {
  .hero-inner { padding: 124px 0 56px; }
  .hero.is-inner .hero-inner { padding: 132px 0 56px; }
  .hero h1 { letter-spacing: -0.03em; }
  .hero-bullets {
    flex-direction: column; align-items: flex-start; text-align: left;
    margin: 0 auto 28px;
  }
}

/* ===== QUICK-STATS on plans page: stack at very narrow widths ===== */
@media (max-width: 480px) {
  .hero.is-inner .quick-stats {
    flex-direction: column; gap: 12px; align-items: flex-start;
    margin-top: 32px; padding-top: 22px;
  }
}

/* ===== FINAL CTA: tighter padding on phones ===== */
@media (max-width: 560px) {
  .final-cta { padding: 36px 24px; border-radius: 20px; }
  .final-cta h2 { font-size: 26px; }
}

/* ===== Baseline grid: single column on very narrow ===== */
@media (max-width: 480px) {
  .baseline { padding: 22px 20px; }
  .baseline-grid { grid-template-columns: 1fr; }
}

/* ===== Page hero h1 size brake ===== */
@media (max-width: 480px) {
  .hero.is-inner h1 { font-size: 30px; line-height: 1.12; }
}

/* ===== Expanded mega menu (Services) ===== */
.mega.mega--wide {
  /* break out of nav-item width — pin to viewport, centered, capped */
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translate(-50%, -8px);
  width: calc(100% - 32px);
  max-width: 1100px;
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 40px 100px -28px rgba(0,20,133,0.28),
    0 0 0 1px rgba(0,20,133,0.06);
  padding: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms ease;
  z-index: 60;
  overflow: hidden;
}
.nav-item:hover > .mega.mega--wide,
.nav-item:focus-within > .mega.mega--wide,
.nav-item.is-open > .mega.mega--wide {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}
/* hover bridge so cursor can move from trigger to panel */
.mega.mega--wide::before {
  content: ""; position: absolute;
  top: -20px; left: 0; right: 0; height: 20px;
}

.mega-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 28px 24px;
}
.mega-col {
  display: flex; flex-direction: column;
  padding: 0 6px;
}
.mega-col + .mega-col {
  border-left: 1px solid var(--line);
}
.mega-col-head {
  display: block;
  padding: 6px 12px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.mega-col-head h4 {
  margin: 0 0 4px;
  font-size: 13px; font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mega-col-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.mega-col-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.mega-col-list a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  transition: background 150ms ease;
}
.mega-col-list a:hover {
  background: var(--blue-soft);
}
.mega-col-list strong {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.mega-col-list a:hover strong { color: var(--blue); }
.mega-col-list span.desc {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}
.mega-col-list .new-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Bottom CTA strip */
.mega-cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 16px 32px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}
.mega-cta-row .mega-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-cta-row .mega-cta-eyebrow {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); font-weight: 700;
}
.mega-cta-row strong { font-size: 14.5px; color: var(--navy); font-weight: 700; }
.mega-cta-row .mega-cta-text > span { font-size: 12.5px; color: var(--muted); }
.mega-cta-row .btn { padding: 11px 18px; font-size: 13.5px; flex: none; }

/* Hide the old narrow mega rules from competing */
.mega.mega--wide .mega-grid { display: none; }

/* Below 1080 the desktop mega is replaced by the mobile nav anyway */
@media (max-width: 1080px) { .mega.mega--wide { display: none !important; } }

/* m-nav-group inside mobile nav children for grouping */
.m-nav-children .m-nav-group {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); font-weight: 700;
  padding: 16px 12px 6px; margin: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.m-nav-children .m-nav-group:first-child {
  border-top: none; padding-top: 6px;
}
.m-nav-children a .new-badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.22); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-left: 6px;
}

/* ===== Tier-aligned mega menu ===== */
.mega.mega--tiered .mega-tiered-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 260px;
  gap: 0;
  padding: 26px 8px;
}
.mega.mega--tiered .mega-col {
  padding: 0 22px;
  display: flex; flex-direction: column;
}
.mega.mega--tiered .mega-col + .mega-col {
  border-left: 1px solid var(--line);
}
.mega.mega--tiered .mega-col-head {
  padding: 4px 12px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  /* Explicit row tracks: tag-pill row, headline (1-2 lines), description (1-2 lines) */
  display: grid;
  grid-template-rows: 24px 36px 36px;
  row-gap: 4px;
  align-items: start;
}
.mega.mega--tiered .mega-col-head .tier-tag {
  justify-self: start;
  align-self: start;
  margin: 0;
}
.mega.mega--tiered .mega-col-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.25;
  align-self: start;
}
.mega.mega--tiered .mega-col-head p {
  margin: 0;
  font-size: 12.5px; line-height: 1.4;
  color: var(--muted);
  align-self: start;
}

/* Tier tag pill */
.tier-tag {
  display: inline-block;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.tier-tag--all        { background: var(--blue-soft); color: var(--blue-deep); }
.tier-tag--premium    { background: rgba(46,77,249,0.12); color: var(--blue); }
.tier-tag--enterprise { background: linear-gradient(225deg, #001485, #2E4DF9); color: #fff; }
.tier-tag--alacarte   { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); }

/* Sub-item list */
.mega.mega--tiered .mega-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.mega.mega--tiered .mega-col-list a {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  transition: background 150ms ease;
}
.mega.mega--tiered .mega-col-list a:hover,
.mega.mega--tiered .mega-col-list a:focus-visible {
  background: var(--blue-soft);
}

.mega.mega--tiered .mega-col-list strong {
  display: block;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink); line-height: 1.3;
  transition: color 150ms ease;
}
.mega.mega--tiered .mega-col-list a:hover strong,
.mega.mega--tiered .mega-col-list a:focus-visible strong { color: var(--blue); }

/* Descriptions stay out of the layout (nothing shifts on hover); they remain
   in the link's accessible name and synfo.js mirrors them into a tooltip. */
.mega.mega--tiered .mega-col-list .desc,
.mega-col-addon .addon-item .desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Simple list (Popular sidebar — no descriptions) */
.mega-col-list--simple a {
  padding: 10px 12px !important;
}
.mega-col-list--simple strong {
  font-size: 14px !important; font-weight: 500 !important;
  transition: color 420ms cubic-bezier(.16,1,.3,1);
}
.mega-col-list--simple a:hover strong,
.mega-col-list--simple a:focus-visible strong { color: var(--blue); }

/* Add-on block under Strategic Alignment Suite */
.mega-col-addon {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.mega-col-addon .addon-label {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 8px;
}
.mega-col-addon .addon-item {
  display: block;
  padding: 10px 14px; border-radius: 11px;
  background: linear-gradient(225deg, rgba(0,20,133,0.04), rgba(46,77,249,0.04));
  border: 1px dashed rgba(46,77,249,0.25);
  transition: background 150ms ease, border-color 150ms ease;
}
.mega-col-addon .addon-item:hover,
.mega-col-addon .addon-item:focus-visible {
  background: linear-gradient(225deg, rgba(0,20,133,0.11), rgba(46,77,249,0.11));
  border-color: rgba(46,77,249,0.55);
}
.mega-col-addon .addon-item strong {
  display: block;
  font-size: 13.5px; font-weight: 600;
  color: var(--blue-deep); line-height: 1.3;
}
/* Popular sidebar layout — CTA card at bottom */
.mega.mega--tiered .mega-col-popular {
  background: var(--bg-soft);
  margin: -26px -8px -26px 0;     /* pull edges out to bleed to panel edges */
  padding: 26px 22px;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.mega.mega--tiered .mega-col-popular .mega-col-head {
  padding-left: 0; padding-right: 0;
}
.mega.mega--tiered .mega-col-popular .mega-cta {
  margin-top: auto;
}

/* On narrower screens stack the popular sidebar below */
@media (max-width: 1080px) {
  .mega.mega--tiered .mega-tiered-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mega.mega--tiered .mega-col-popular {
    grid-column: 1 / -1;
    margin: 0; border-left: none; border-top: 1px solid var(--line);
  }
}

/* m-nav-children subheaders */
.m-nav-children .m-nav-subhead-tag {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-left: 8px;
}

/* ===== Specialist add-ons row (mega menu) ===== */
.mega-specialist {
  border-top: 1px solid var(--line);
  padding: 22px 30px 24px;
  background: var(--bg-soft);
}
.mega-specialist-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.mega-specialist-head h5 {
  margin: 0;
  font-size: 13px; font-weight: 700;
  color: var(--navy);
  display: flex; align-items: center; gap: 10px;
}
.mega-specialist-head h5 .tier-tag { margin-bottom: 0; }
.mega-specialist-head .sub {
  font-size: 12px; color: var(--muted);
  max-width: 56ch;
}
.mega-specialist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.mega-specialist-grid > a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 9px;
  transition: background 150ms ease;
}
.mega-specialist-grid > a:hover {
  background: #fff;
}
.mega-specialist-grid .sp-ico {
  flex: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  width: 32px; height: 32px; border-radius: 8px;
  background: #fff; color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
}
.mega-specialist-grid .sp-ico svg { width: 16px; height: 16px; }
.mega-specialist-grid > a:hover .sp-ico {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.mega-specialist-grid strong {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.mega-specialist-grid .desc {
  display: block;
  font-size: 11.5px; color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
@media (max-width: 1080px) {
  .mega-specialist-grid { grid-template-columns: 1fr 1fr; }
}

/* m-nav-foot/specialist styling for mobile add-ons grouping */
.m-nav-children .m-nav-group.is-addons {
  margin-top: 18px;
}

/* "View all à la carte" — compact CTA pill inside Popular sidebar */
.pop-allcta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 26px;
  padding: 7px 8px 7px 12px;
  border-radius: 999px;
  background: var(--blue-soft);
  border: 1px solid rgba(46,77,249,0.22);
  color: var(--blue-deep);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 320ms cubic-bezier(.16,1,.3,1),
    border-color 320ms cubic-bezier(.16,1,.3,1),
    color 320ms cubic-bezier(.16,1,.3,1),
    box-shadow 320ms cubic-bezier(.16,1,.3,1);
}
.pop-allcta:hover,
.pop-allcta:focus-visible {
  background: linear-gradient(225deg, var(--blue-deep), var(--blue));
  border-color: var(--blue-deep);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(46,77,249,0.5);
}
.pop-allcta-text { line-height: 1; }
.pop-allcta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  flex: none;
  transition:
    background 320ms cubic-bezier(.16,1,.3,1),
    color 320ms cubic-bezier(.16,1,.3,1),
    transform 320ms cubic-bezier(.16,1,.3,1);
}
.pop-allcta-arrow svg {
  width: 12px; height: 12px;
  transition: transform 320ms cubic-bezier(.16,1,.3,1);
}
.pop-allcta:hover .pop-allcta-arrow,
.pop-allcta:focus-visible .pop-allcta-arrow {
  background: #fff;
  color: var(--blue-deep);
}
.pop-allcta:hover .pop-allcta-arrow svg,
.pop-allcta:focus-visible .pop-allcta-arrow svg {
  transform: translateX(2px);
}
.m-nav-allcta {
  display: block; margin-top: 12px;
  padding: 12px 16px !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: rgba(255,255,255,0.9) !important;
  border-top: 1px solid rgba(255,255,255,0.14);
  text-align: center;
}

/* Align all column add-on tiles to the bottom of their columns */
.mega.mega--tiered .mega-col .mega-col-addon {
  margin-top: auto;
}

/* ===== Hybrid MSA tier card (full-width, alternative engagement) ===== */
.tier-hybrid {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}
.tier-hybrid::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #5B21B6, #4C1D95);
  border-radius: 20px 0 0 20px;
}
.tier-hybrid:hover {
  transform: translateY(-2px);
  border-color: #5B21B6;
  box-shadow: 0 24px 60px -22px rgba(76,29,149,0.25);
}
.tier-hybrid .tier-name { font-size: 24px; }
.tier-hybrid .tier-focus { color: #4C1D95; }
.tier-hybrid .tier-desc { margin-bottom: 20px; min-height: auto; }
.tier-hybrid .tier-pillstrip { margin-bottom: 22px; }
.tier-hybrid-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.tier-hybrid-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4C1D95;
  background: rgba(91,33,182,0.12);
  padding: 4px 10px; border-radius: 999px;
}
.tier-hybrid-right {
  display: flex; flex-direction: column; gap: 14px;
}
.tier-hybrid-right .tier-group-title { margin: 0 0 8px; }
.tier-hybrid-right ul { padding-left: 0; }
@media (max-width: 880px) {
  .tier-hybrid { grid-template-columns: 1fr; gap: 8px; padding: 28px 26px; }
}

/* ===== Comprehensive matrix improvements ===== */
.matrix-wrap--v2 {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
}
.matrix--v2 {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.matrix--v2 thead th {
  position: sticky; top: 0;
  background: #fff;
  z-index: 1;
}
.matrix--v2 thead th:first-child {
  padding: 18px 22px;
  background: var(--bg-soft);
  font-size: 13px; color: var(--navy); font-weight: 700;
  letter-spacing: -0.005em;
  border-bottom: 2px solid var(--line);
}
.matrix--v2 thead th:not(:first-child) {
  padding: 16px 12px;
  text-align: center;
  font-weight: 700;
  border-bottom: 2px solid var(--line);
  width: 18%;
}
.matrix--v2 .col-standard { background: var(--bg-soft); color: var(--navy); }
.matrix--v2 .col-premium {
  background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
  color: #fff;
  position: relative;
}
.matrix--v2 .col-premium::after {
  content: "Most popular";
  position: absolute; top: 8px; right: 10px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  padding: 3px 8px; border-radius: 999px;
}
.matrix--v2 .col-enterprise {
  background: #00104D; color: #fff;
}
.matrix--v2 .col-hybrid {
  background: linear-gradient(225deg, #5B21B6, #4C1D95);
  color: #fff;
  position: relative;
}
.matrix--v2 .col-hybrid::after {
  content: "Alt. model";
  position: absolute; top: 8px; right: 10px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255,255,255,0.22);
  padding: 3px 8px; border-radius: 999px;
}
.matrix--v2 .tier-name-h {
  display: block;
  font-size: 14px; font-weight: 700;
  line-height: 1.15;
}
.matrix--v2 .tier-name-sub {
  display: block;
  font-size: 10.5px; font-weight: 500;
  margin-top: 2px;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.matrix--v2 tbody tr {
  border-bottom: 1px solid var(--line);
}
.matrix--v2 tbody tr:last-child { border-bottom: 0; }
.matrix--v2 tbody td {
  padding: 11px 18px;
  vertical-align: middle;
}
.matrix--v2 tbody td:first-child {
  font-weight: 500; color: var(--ink);
}
.matrix--v2 tbody td:not(:first-child) {
  text-align: center;
}
.matrix--v2 tbody tr:hover td:not(.grouprow) {
  background: var(--blue-soft);
}
.matrix--v2 .grouprow {
  background: var(--bg-tint) !important;
}
.matrix--v2 .grouprow td {
  padding: 10px 22px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue-deep); font-weight: 700;
  background: var(--bg-tint);
}
.matrix--v2 .check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
}
.matrix--v2 .check svg { width: 12px; height: 12px; }
.matrix--v2 .none { color: var(--line-strong); font-size: 18px; }
.matrix--v2 .opt {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(91,33,182,0.16);
  color: #3B0764;
}

/* ===== Add-ons section ===== */
.addons-wrap {
  margin-top: 56px;
}
.addons-key {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-bottom: 24px;
  padding: 16px 22px;
  background: var(--bg-soft);
  border-radius: 14px;
  font-size: 13px; color: var(--muted);
}
.addons-key .key-pill {
  display: inline-flex; align-items: center; gap: 8px;
}
.addons-key .key-pill::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
}
.addons-key .key-pill--all::before     { background: #6BB591; }
.addons-key .key-pill--premium::before { background: var(--blue); }
.addons-key .key-pill--enterprise::before { background: #4831B0; }

.addons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .addons-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .addons-grid { grid-template-columns: 1fr; } }
.addon-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 20px;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.addon-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 18px 40px -22px rgba(46,77,249,0.20);
}
.addon-card::before {
  content: "";
  position: absolute; top: 0; left: 22px; right: 22px; height: 3px;
  border-radius: 0 0 3px 3px;
}
.addon-card--all::before        { background: #6BB591; }
.addon-card--premium::before    { background: var(--blue); }
.addon-card--enterprise::before { background: #4831B0; }
.addon-card .addon-tier {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  margin-bottom: 14px;
}
.addon-card--all .addon-tier        { background: rgba(107,181,145,0.14); color: #2F7D5C; }
.addon-card--premium .addon-tier    { background: var(--blue-soft); color: var(--blue); }
.addon-card--enterprise .addon-tier { background: rgba(72,49,176,0.12); color: #4831B0; }
.addon-card h4 {
  margin: 0 0 6px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--navy); line-height: 1.25;
}
.addon-card p {
  margin: 0;
  font-size: 13.5px; color: var(--muted); line-height: 1.5;
}

/* Matrix v2: shift Most popular / Alt. model pills above the tier name */
.matrix--v2 thead th { padding-top: 30px; position: relative; }
.matrix--v2 thead th.col-premium::after,
.matrix--v2 thead th.col-hybrid::after {
  top: 6px;
  left: 50%; right: auto;
  transform: translateX(-50%);
}
.matrix--v2 thead th:first-child { padding-top: 18px; }

/* Bigger padding-top so the absolute-positioned pills clear the tier names */
.matrix--v2 thead th { padding-top: 38px !important; }
.matrix--v2 thead th:first-child { padding-top: 18px !important; }
.matrix--v2 thead th.col-premium::after,
.matrix--v2 thead th.col-hybrid::after {
  top: 8px;
  font-size: 9px;
  padding: 2px 7px;
}

/* ===== Matrix v2 visual polish ===== */
.matrix-wrap--v2 {
  border-radius: 22px;
  box-shadow: 0 30px 60px -40px rgba(0,20,133,0.18);
}
/* Bigger, more elegant tier headers */
.matrix--v2 thead th { padding: 22px 14px 16px; }
.matrix--v2 thead th:first-child { padding: 22px 22px 16px; }
.matrix--v2 .tier-name-h { font-size: 16px; letter-spacing: -0.01em; }
.matrix--v2 .tier-name-sub { font-size: 10.5px; opacity: 0.7; }

/* Subtle Premium column tint on body cells */
.matrix--v2 tbody td:nth-child(3) {
  background: rgba(46,77,249,0.035);
}
.matrix--v2 tbody tr:hover td:nth-child(3) {
  background: rgba(46,77,249,0.10);
}

/* Group rows: brand-blue left accent + bigger */
.matrix--v2 .grouprow td {
  padding: 16px 24px;
  font-size: 11.5px;
  color: var(--navy);
  background: linear-gradient(90deg, rgba(46,77,249,0.22) 0%, rgba(46,77,249,0.07) 55%, #FFFFFF 100%);
  border-left: 3px solid var(--blue);
  position: relative;
}
.matrix--v2 .grouprow + tr td:first-child {
  border-top: 1px solid var(--line);
}

/* Subtle zebra striping on body rows for scan-ability */
.matrix--v2 tbody tr:not(.grouprow):nth-child(even) td {
  background: rgba(0,0,0,0.013);
}
.matrix--v2 tbody tr:not(.grouprow):nth-child(even) td:nth-child(3) {
  background: rgba(46,77,249,0.05);
}

/* Em-dash a bit more subtle (less visual weight on the many "not included" rows) */
.matrix--v2 .none { color: rgba(0,0,0,0.18); font-size: 16px; }

/* Hybrid callout below the matrix */
.hybrid-callout {
  margin: 22px 0 0;
  background: linear-gradient(135deg, rgba(91,33,182,0.10), rgba(76,29,149,0.08));
  border: 1px solid rgba(91,33,182,0.35);
  border-radius: 16px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: flex-start;
}
.hybrid-callout-ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(225deg, #5B21B6, #4C1D95);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.hybrid-callout-ico svg { width: 22px; height: 22px; }
.hybrid-callout strong {
  font-size: 16px; color: #8A4F12; font-weight: 700;
  display: block; margin-bottom: 4px;
}
.hybrid-callout p {
  margin: 0; font-size: 14px; color: #6F4716; line-height: 1.55;
}
@media (max-width: 560px) {
  .hybrid-callout { grid-template-columns: 1fr; }
}

/* Hybrid card icon */
.tier-hybrid {
  grid-template-columns: 64px 1.3fr 1fr;
  gap: 28px;
}
.tier-hybrid-ico {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(225deg, #5B21B6, #4C1D95);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  box-shadow: 0 12px 28px -10px rgba(76,29,149,0.45);
}
.tier-hybrid-ico svg { width: 30px; height: 30px; }
@media (max-width: 880px) {
  .tier-hybrid { grid-template-columns: 1fr; }
  .tier-hybrid-ico { width: 56px; height: 56px; margin-bottom: -8px; }
}

/* Add-on cards: subtle lift on the colored stripe */
.addon-card { padding-top: 24px; }
.addon-card::before { height: 4px; left: 0; right: 0; border-radius: 0; }

/* ===== Matrix: wider Feature column + tighter rows ===== */
.matrix--v2 { table-layout: fixed; }
.matrix--v2 thead th:first-child { width: 38%; }
.matrix--v2 thead th:not(:first-child) { width: 15.5%; }
.matrix--v2 tbody td { padding: 9px 18px; font-size: 14px; }
.matrix--v2 tbody td:first-child {
  padding-left: 22px;
  white-space: normal;
  line-height: 1.35;
}
.matrix--v2 .grouprow td { padding: 14px 22px; }
/* Smaller header padding so it doesn't dwarf rows */
.matrix--v2 thead th { padding: 24px 14px 18px !important; }
.matrix--v2 thead th:first-child { padding: 24px 22px 18px !important; }

/* ===== Add-on cards: site-matching pattern ===== */
/* Overwrite earlier stripe-based design */
.addons-grid > .addon-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 22px;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.addons-grid > .addon-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 22px 48px -24px rgba(46,77,249,0.28);
}
.addons-grid > .addon-card::before { display: none; }   /* kill the old top stripe */
.addons-grid > .addon-card .addon-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: background 220ms ease, color 220ms ease;
}
.addons-grid > .addon-card .addon-ico svg { width: 22px; height: 22px; }
.addons-grid > .addon-card:hover .addon-ico { background: var(--blue); color: #fff; }
.addons-grid > .addon-card h4 {
  margin: 0 0 8px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--navy); line-height: 1.25;
}
.addons-grid > .addon-card p {
  margin: 0 0 16px;
  font-size: 14px; color: var(--muted); line-height: 1.55;
  flex: 1;
}
.addon-tier-pill {
  display: inline-block; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.addon-tier-pill--all        { background: var(--blue-soft); color: var(--blue-deep); }
.addon-tier-pill--premium    { background: rgba(46,77,249,0.16); color: var(--blue); }
.addon-tier-pill--enterprise { background: linear-gradient(225deg, #001485, #2E4DF9); color: #fff; }

/* Dark mode: navy pill text and blue-on-blue icons disappear on the dark
   card face, so both go white (icon chip keeps its hover-to-blue state). */
[data-theme="dark"] .addon-tier-pill--all { background: rgba(255,255,255,0.10); color: #fff; }
[data-theme="dark"] .addons-grid > .addon-card .addon-ico { color: #fff; }

/* Hide the old .addon-tier text element (now using .addon-tier-pill) */
.addons-grid > .addon-card .addon-tier { display: none; }

/* Card footer: tier pill left, "Read more" badge bottom right */
.addon-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.addon-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  color: var(--blue);
  border: 1px solid rgba(46,77,249,0.25);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 320ms cubic-bezier(.16,1,.3,1);
}
.addon-more svg { width: 12px; height: 12px; transition: transform 220ms ease; }
.addon-card:hover .addon-more { background: var(--blue); border-color: var(--blue); color: #fff; }
.addon-card:hover .addon-more svg { transform: translateX(2px); }
.addon-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
[data-theme="dark"] .addon-more { color: #fff; border-color: rgba(255,255,255,0.28); }
.is-tilting .addon-more { transform: translateZ(14px); }

/* Vault page: synfo-branded vault panel under the feature grid */
.vault-brand {
  display: flex; align-items: center; gap: 20px;
  margin-top: 28px; padding: 22px 26px;
  border-radius: 16px;
  background: linear-gradient(225deg, #001485, #2E4DF9);
  color: #fff;
}
.vault-brand img { width: 64px; height: 64px; flex: none; border-radius: 50%; }
.vault-brand h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #fff; }
.vault-brand p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.86); }
@media (max-width: 560px) { .vault-brand { flex-direction: column; align-items: flex-start; } }

/* Update the add-ons key strip to match the new pill colours */
.addons-key {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.addons-key .key-pill--all::before        { background: var(--blue-soft); border: 1.5px solid var(--blue-deep); width: 12px; height: 12px; }
.addons-key .key-pill--premium::before    { background: rgba(46,77,249,0.16); border: 1.5px solid var(--blue); width: 12px; height: 12px; }
.addons-key .key-pill--enterprise::before { background: linear-gradient(225deg, #001485, #2E4DF9); border: none; width: 12px; height: 12px; }

/* Tier pills: no-wrap + smaller so they fit narrow columns cleanly */
.matrix--v2 thead th.col-premium::after,
.matrix--v2 thead th.col-hybrid::after {
  white-space: nowrap;
  font-size: 8.5px !important;
  padding: 3px 8px !important;
  letter-spacing: 0.08em !important;
  top: 8px !important;
}
.matrix--v2 thead th.col-premium::after { content: "Most popular"; }
.matrix--v2 thead th.col-hybrid::after  { content: "Alternative"; }

/* Slightly more top padding so pills always clear the tier name */
.matrix--v2 thead th.col-premium,
.matrix--v2 thead th.col-hybrid { padding-top: 36px !important; }

/* Hybrid column "Optional" pill — matches the Hybrid header amber */
.matrix--v2 .opt-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(91,33,182,0.16);
  color: #3B0764;
  border: 1px solid rgba(76,29,149,0.32);
  white-space: nowrap;
}

/* ===== Collapsible matrix group headers ===== */
.matrix--v2 .grouprow[data-group-toggle] {
  cursor: pointer;
  user-select: none;
}
.matrix--v2 .grouprow[data-group-toggle] td {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
}
.matrix--v2 .grouprow[data-group-toggle]:hover td {
  background: linear-gradient(90deg, rgba(46,77,249,0.32) 0%, rgba(46,77,249,0.10) 55%, #FFFFFF 100%) !important;
}
.matrix--v2 .grouprow[data-group-toggle]:focus { outline: none; }
.matrix--v2 .grouprow[data-group-toggle]:focus-visible td {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.matrix--v2 .group-toggle-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--blue);
  flex: none;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.matrix--v2 .group-toggle-arrow svg { width: 18px; height: 18px; }
.matrix--v2 .grouprow[aria-expanded="false"] .group-toggle-arrow {
  transform: rotate(-90deg);
}

.matrix--v2 .group-title-text { flex: 1; }
.matrix--v2 .group-count {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-transform: none;
}
.matrix--v2 .grouprow[aria-expanded="false"] .group-count {
  color: var(--blue);
  border-color: var(--blue-soft);
  background: var(--blue-soft);
}

/* ===== SPLIT CARDS (two-up comparison) =====
   Shared two-column comparison cards. First used page-locally on
   service-desk-noc (Service Desk vs NOC, which keeps its own green
   .is-247 variant inline); promoted here for cloud-hybrid (Windows 365
   vs Azure Virtual Desktop). Dark-mode surface is set in the dark block. */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 880px) { .split-grid { grid-template-columns: 1fr; } }
.split-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px 36px;
  overflow: hidden;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.split-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 24px 60px -22px rgba(46,77,249,0.30);
}
.split-card .badge-time {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue);
  font-size: 12.5px; font-weight: 600;
  margin-bottom: 16px;
}
.split-card .badge-time .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.split-card h3 {
  font-size: 26px; line-height: 1.18; letter-spacing: -0.02em;
  color: var(--navy); margin: 0 0 14px; font-weight: 700;
}
.split-card p { font-size: 15.5px; color: var(--muted); margin: 0 0 22px; line-height: 1.6; }
.split-card .feature-list { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.split-card .feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink); }
.split-card .feature-list li svg { width: 14px; height: 14px; flex: none; margin-top: 4px; color: var(--blue); }
.split-note { margin: 28px auto 0; max-width: 760px; text-align: center; font-size: 15px; color: var(--muted); line-height: 1.6; }
.split-note a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .split-card { padding: 30px 24px; } .split-card h3 { font-size: 22px; } }

/* ===== Group headers with per-tier summary cells =====
   Tables with data-groups-collapsed get their group header split by
   synfo.js into a title cell + one summary cell per tier (ticks copied
   from the group's rows), so the header stays readable while collapsed.
   The gradient moves from the cells to the row so it spans unbroken. */
table.matrix--v2 tr.grouprow.has-sum {
  background: linear-gradient(90deg, rgba(46,77,249,0.22) 0%, rgba(46,77,249,0.07) 55%, #FFFFFF 100%) !important;
}
table.matrix--v2 tr.grouprow.has-sum:hover {
  background: linear-gradient(90deg, rgba(46,77,249,0.32) 0%, rgba(46,77,249,0.10) 55%, #FFFFFF 100%) !important;
}
table.matrix--v2 tr.grouprow.has-sum[data-group-toggle] td,
table.matrix--v2 tr.grouprow.has-sum[data-group-toggle]:hover td {
  display: table-cell;
  vertical-align: middle;
  background: transparent !important;
  border-left: 0;
}
table.matrix--v2 tr.grouprow.has-sum[data-group-toggle] td.group-title-cell {
  border-left: 3px solid var(--blue);
}
table.matrix--v2 tr.grouprow.has-sum td.group-title-cell { letter-spacing: 0.1em; line-height: 1.9; }
/* One line where the 38% Feature column is wide enough; wraps below that */
@media (min-width: 1100px) {
  table.matrix--v2 tr.grouprow.has-sum td.group-title-cell { white-space: nowrap; }
}
table.matrix--v2 tr.grouprow.has-sum .group-title-cell > * { vertical-align: middle; }
table.matrix--v2 tr.grouprow.has-sum .group-toggle-arrow { margin-right: 10px; }
table.matrix--v2 tr.grouprow.has-sum .group-count { margin-left: 10px; display: inline-block; }
table.matrix--v2 tr.grouprow.has-sum td.group-sum {
  text-align: center;
  padding: 14px 18px;
  text-transform: none;
  letter-spacing: normal;
}
table.matrix--v2 tr.grouprow.has-sum td.group-sum > * { transition: opacity 200ms ease; }
table.matrix--v2 tr.grouprow.has-sum[aria-expanded="true"] td.group-sum > * { opacity: 0; }
.group-sum-partial {
  font-size: 11px; font-weight: 600; color: var(--muted);
}
[data-theme="dark"] table.matrix--v2 tr.grouprow.has-sum {
  background: linear-gradient(90deg, rgba(79,107,251,0.22) 0%, rgba(79,107,251,0.08) 55%, var(--surface) 100%) !important;
}
[data-theme="dark"] table.matrix--v2 tr.grouprow.has-sum:hover {
  background: linear-gradient(90deg, rgba(79,107,251,0.34) 0%, rgba(79,107,251,0.14) 55%, var(--surface-2) 100%) !important;
}

/* ===== Feature info tooltips (matrix) ===== */
.matrix--v2 tbody td:first-child {
  position: relative;
}
.matrix--v2 .feat-label {
  display: inline;
  vertical-align: middle;
}
.matrix--v2 .feat-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: -2px;
  border-radius: 999px;
  color: #98A4B6;
  cursor: help !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
  position: relative;
  outline: none;
}
.matrix--v2 .feat-info svg {
  width: 14px;
  height: 14px;
  display: block;
}
.matrix--v2 .feat-info:hover,
.matrix--v2 .feat-info:focus-visible {
  color: var(--blue);
  background: var(--blue-soft);
  transform: scale(1.08);
}
.matrix--v2 .feat-info:focus-visible {
  box-shadow: 0 0 0 2px rgba(46,77,249,0.25);
}

/* The tooltip card itself */
.matrix--v2 .feat-info::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  transform: translateY(4px);
  width: max-content;
  max-width: 280px;
  padding: 11px 14px;
  background: var(--navy, #0A1640);
  color: #fff;
  font-size: 12.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  border-radius: 10px;
  box-shadow: 0 14px 32px -10px rgba(10,22,64,0.45), 0 4px 10px -3px rgba(10,22,64,0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: normal;
}

/* The little arrow pointing down to the icon */
.matrix--v2 .feat-info::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--navy, #0A1640);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  z-index: 51;
  transition: opacity 180ms ease, transform 180ms ease;
}

.matrix--v2 .feat-info:hover::after,
.matrix--v2 .feat-info:focus-visible::after,
.matrix--v2 .feat-info:hover::before,
.matrix--v2 .feat-info:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.matrix--v2 .feat-info:hover::before,
.matrix--v2 .feat-info:focus-visible::before {
  transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* Edge handling: rows near the top of the table — flip tooltip below the icon */
.matrix--v2 tbody tr:nth-child(-n+3) .feat-info::after {
  bottom: auto;
  top: calc(100% + 12px);
}
.matrix--v2 tbody tr:nth-child(-n+3) .feat-info::before {
  bottom: auto;
  top: calc(100% + 6px);
}

/* Edge handling: first cell in a row, push tooltip right so it doesn't clip on the left */
.matrix--v2 .feat-info {
  /* default centred — fine in most cases */
}

/* Mobile: tap the icon shows the tooltip via :focus; constrain width */
@media (max-width: 640px) {
  .matrix--v2 .feat-info::after {
    max-width: 220px;
    font-size: 12px;
    padding: 10px 12px;
  }
}
line: none; }
.matrix--v2 .grouprow[data-group-toggle]:focus-visible td {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.matrix--v2 .group-toggle-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--blue);
  flex: none;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
.matrix--v2 .group-toggle-arrow svg { width: 18px; height: 18px; }
.matrix--v2 .grouprow[aria-expanded="false"] .group-toggle-arrow {
  transform: rotate(-90deg);
}
.matrix--v2 .group-title-text { flex: 1; }
.matrix--v2 .group-count {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-transform: none;
}
.matrix--v2 .grouprow[aria-expanded="false"] .group-count {
  color: var(--blue);
  border-color: var(--blue-soft);
  background: var(--blue-soft);
}

/* ===== Feature info tooltips (matrix) ===== */
.matrix--v2 tbody td:first-child { position: relative; }
.matrix--v2 .feat-label { display: inline; vertical-align: middle; }
.matrix--v2 .feat-info {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-left: 8px;
  vertical-align: -2px;
  border-radius: 999px;
  color: #98A4B6;
  cursor: help !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
  position: relative;
  outline: none;
}
.matrix--v2 .feat-info svg { width: 14px; height: 14px; display: block; }
.matrix--v2 .feat-info:hover,
.matrix--v2 .feat-info:focus-visible {
  color: var(--blue);
  background: var(--blue-soft);
  transform: scale(1.08);
}
.matrix--v2 .feat-info:focus-visible {
  box-shadow: 0 0 0 2px rgba(46,77,249,0.25);
}
.matrix--v2 .feat-info::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  transform: translateY(4px);
  width: max-content;
  max-width: 280px;
  padding: 11px 14px;
  background: var(--navy, #0A1640);
  color: #fff;
  font-size: 12.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  border-radius: 10px;
  box-shadow: 0 14px 32px -10px rgba(10,22,64,0.45), 0 4px 10px -3px rgba(10,22,64,0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: normal;
}
.matrix--v2 .feat-info::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--navy, #0A1640);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  z-index: 51;
  transition: opacity 180ms ease, transform 180ms ease;
}
.matrix--v2 .feat-info:hover::after,
.matrix--v2 .feat-info:focus-visible::after,
.matrix--v2 .feat-info:hover::before,
.matrix--v2 .feat-info:focus-visible::before { opacity: 1; }
.matrix--v2 .feat-info:hover::after,
.matrix--v2 .feat-info:focus-visible::after { transform: translateY(0); }
.matrix--v2 .feat-info:hover::before,
.matrix--v2 .feat-info:focus-visible::before { transform: translateX(-50%) translateY(0) rotate(45deg); }
.matrix--v2 tbody tr:nth-child(-n+3) .feat-info::after { bottom: auto; top: calc(100% + 12px); }
.matrix--v2 tbody tr:nth-child(-n+3) .feat-info::before { bottom: auto; top: calc(100% + 6px); }
@media (max-width: 640px) {
  .matrix--v2 .feat-info::after { max-width: 220px; font-size: 12px; padding: 10px 12px; }
}

/* ===================================================================
   À LA CARTE SERVICES PAGE
   =================================================================== */

/* ---- Tier-recommendation legend strip ---- */
.alc-key {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin: 22px auto 0;
  max-width: 720px;
}
.alc-key-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.alc-key-pill::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: none;
}
.alc-key-pill--all::before        { background: var(--blue-soft); border: 1.5px solid var(--blue-deep); }
.alc-key-pill--premium::before    { background: rgba(46,77,249,0.18); border: 1.5px solid var(--blue); }
.alc-key-pill--enterprise::before { background: linear-gradient(225deg, var(--blue-deep), var(--blue)); }

/* ---- Card grid ---- */
.alc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 980px) { .alc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .alc-grid { grid-template-columns: 1fr; } }

/* ---- Card ---- */
.alc-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 22px 18px;
  transition:
    transform 520ms cubic-bezier(.16,1,.3,1),
    box-shadow 520ms cubic-bezier(.16,1,.3,1),
    border-color 520ms cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
.alc-card::before {
  /* tier accent rail on the left */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--blue-soft);
  transition: background 520ms cubic-bezier(.16,1,.3,1), width 520ms cubic-bezier(.16,1,.3,1);
}
.alc-card--premium::before    { background: var(--blue); }
.alc-card--enterprise::before { background: linear-gradient(180deg, var(--blue-deep), var(--blue)); }

.alc-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 50px -22px rgba(0,20,133,0.32),
    0 6px 14px -6px rgba(0,20,133,0.12);
  border-color: rgba(46,77,249,0.25);
}
.alc-card:hover::before { width: 5px; }

.alc-card-ico {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  margin-bottom: 14px;
  transition: background 380ms cubic-bezier(.16,1,.3,1), color 380ms cubic-bezier(.16,1,.3,1), transform 520ms cubic-bezier(.16,1,.3,1);
}
.alc-card-ico svg { width: 22px; height: 22px; display: block; }
.alc-card:hover .alc-card-ico {
  background: linear-gradient(225deg, var(--blue-deep), var(--blue));
  color: #fff;
  transform: translateY(-1px);
}

.alc-card--premium .alc-card-ico    { background: rgba(46,77,249,0.12); }
.alc-card--enterprise .alc-card-ico { background: linear-gradient(225deg, rgba(0,20,133,0.10), rgba(46,77,249,0.12)); }

.alc-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.alc-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 18px;
  flex: 1;
}
.alc-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.alc-tier-pill {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.alc-tier-pill--all {
  background: var(--blue-soft);
  color: var(--blue-deep);
}
.alc-tier-pill--premium {
  background: rgba(46,77,249,0.12);
  color: var(--blue);
}
.alc-tier-pill--enterprise {
  background: linear-gradient(225deg, var(--blue-deep), var(--blue));
  color: #fff;
}

.alc-card-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
  transition: color 380ms cubic-bezier(.16,1,.3,1), gap 380ms cubic-bezier(.16,1,.3,1);
}
.alc-card-link svg { width: 14px; height: 14px; transition: transform 380ms cubic-bezier(.16,1,.3,1); }
.alc-card:hover .alc-card-link { gap: 8px; color: var(--blue-deep); }
.alc-card:hover .alc-card-link svg { transform: translateX(2px); }

/* ---- "What every engagement includes" feature row ---- */
.alc-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}
@media (max-width: 980px) { .alc-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .alc-features { grid-template-columns: 1fr; } }

.alc-feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
}
.alc-feature-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  margin-bottom: 14px;
}
.alc-feature-ico svg { width: 20px; height: 20px; }
.alc-feature h4 {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 700;
  color: var(--navy); line-height: 1.3;
}
.alc-feature p {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--muted);
}

/* ---- Final CTA band ---- */
.cta-band {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 52px 44px;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  /* soft radial accent in the corner */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.10), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.08), transparent 50%);
  pointer-events: none;
}
.cta-band .container { padding: 0; }
.cta-band-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cta-band-text h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.cta-band-text p {
  margin: 0;
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  max-width: 540px;
  line-height: 1.55;
}
.cta-band-cta {
  display: flex; gap: 10px;
  flex-wrap: wrap;
}
.cta-band .btn.btn-primary {
  background: #fff;
  color: var(--blue-deep);
}
.cta-band .btn.btn-primary:hover {
  background: var(--blue-soft);
  color: var(--blue-deep);
}
.cta-band .btn.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
}
.cta-band .btn.btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.7);
}
@media (max-width: 760px) {
  .cta-band-inner { grid-template-columns: 1fr; gap: 22px; }
  .cta-band { padding: 36px 28px; }
  .cta-band-text h2 { font-size: 24px; }
}

/* ===== À LA CARTE: deliverables list inside each card ===== */
.alc-card-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.alc-card-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
}
.alc-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background:
    linear-gradient(225deg, rgba(46,77,249,0.18), rgba(46,77,249,0.08));
  border: 1px solid rgba(46,77,249,0.28);
}
.alc-card-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid var(--blue);
  border-bottom: 1.6px solid var(--blue);
  transform: rotate(-45deg);
}

/* Without tier-pills the foot has only the Enquire link — right-align it */
.alc-card-foot {
  justify-content: flex-end;
}

/* Tier-coloured rail is no longer used — flatten the accent to a single brand colour */
.alc-card::before { background: var(--blue-soft); }
.alc-card:hover::before { background: var(--blue); }

/* ===================================================================
   3D tilt effect — shared by .addon-card, .alc-card, .tier, .tier-hybrid
   The JS in synfo.js applies the rotate transform; the CSS handles the
   shine overlay, depth shadow boost while tilting and content lift.
   =================================================================== */
.addon-card,
.alc-card,
.tier,
.tier-hybrid {
  /* Make sure the card has a stacking context for the shine overlay */
  position: relative;
  isolation: isolate;
}

.tilt-shine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 18%,
    rgba(255,255,255,0) 55%
  );
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.16,1,.3,1);
  z-index: 1;
}
.is-tilting .tilt-shine { opacity: 1; }

/* Make all card contents sit above the shine layer */
.addon-card > *,
.alc-card > *,
.tier > *,
.tier-hybrid > * {
  position: relative;
  z-index: 2;
}

/* While tilting, push a deeper shadow underneath so the lift reads */
.addon-card.is-tilting,
.alc-card.is-tilting,
.tier.is-tilting,
.tier-hybrid.is-tilting {
  box-shadow:
    0 32px 60px -22px rgba(0,20,133,0.40),
    0 12px 22px -10px rgba(0,20,133,0.20),
    0 0 0 1px rgba(46,77,249,0.15);
}

/* When the card is tilting, lift its icon chip / title slightly along Z so
   the parallax feels right (depth between layers). */
.is-tilting .addon-ico,
.is-tilting .alc-card-ico {
  transform: translateZ(28px);
}
.is-tilting .addon-card > h4,
.is-tilting .alc-card-title {
  transform: translateZ(18px);
}
.is-tilting .addon-card > p,
.is-tilting .alc-card-desc,
.is-tilting .alc-card-list {
  transform: translateZ(10px);
}
.is-tilting .addon-tier-pill,
.is-tilting .alc-card-foot {
  transform: translateZ(14px);
}
.addon-ico, .alc-card-ico,
.addon-card > h4, .alc-card-title,
.addon-card > p, .alc-card-desc, .alc-card-list,
.addon-tier-pill, .alc-card-foot {
  transition: transform 320ms cubic-bezier(.16,1,.3,1);
}

/* ===== À la carte: "starting list, not a limit" callout ===== */
.alc-more {
  margin-top: 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 26px 30px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(46,77,249,0.05), rgba(46,77,249,0.02)),
    #fff;
  border: 1.5px dashed rgba(46,77,249,0.32);
  position: relative;
  overflow: hidden;
}
.alc-more::before {
  /* very soft brand-blue glow in the corner for visual interest */
  content: "";
  position: absolute;
  inset: -40% auto auto -10%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(46,77,249,0.07), transparent 60%);
  pointer-events: none;
}
.alc-more > * { position: relative; z-index: 1; }

.alc-more-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border-radius: 14px;
  background: linear-gradient(225deg, var(--blue-deep), var(--blue));
  color: #fff;
  flex: none;
  box-shadow: 0 10px 24px -10px rgba(46,77,249,0.45);
}
.alc-more-ico svg { width: 26px; height: 26px; }

.alc-more-body h3 {
  margin: 0 0 6px;
  font-size: 19px; font-weight: 700;
  color: var(--navy); line-height: 1.25;
  letter-spacing: -0.01em;
}
.alc-more-body p {
  margin: 0;
  font-size: 14px; line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
}

.alc-more-cta { flex: none; }
.alc-more-cta .btn { white-space: nowrap; }

@media (max-width: 860px) {
  .alc-more {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 24px 22px;
    gap: 16px;
  }
  .alc-more-ico { width: 46px; height: 46px; }
  .alc-more-ico svg { width: 22px; height: 22px; }
  .alc-more-body h3 { font-size: 17px; }
  .alc-more-cta .btn { width: 100%; justify-content: center; }
}

/* ===================================================================
   SERVICE STATUS PAGE
   =================================================================== */

/* Status colour tokens — accessible but on-brand */
:root {
  --ok:        #10B981;   /* operational green */
  --ok-soft:   rgba(16,185,129,0.10);
  --deg:       #F59E0B;   /* amber */
  --deg-soft:  rgba(245,158,11,0.12);
  --out:       #DC2626;   /* red */
  --out-soft:  rgba(220,38,38,0.10);
  --maint:     #6366F1;   /* indigo for maintenance */
  --maint-soft: rgba(99,102,241,0.12);
}

/* ---- Overall status banner ---- */
.status-overall {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px -22px rgba(0,20,133,0.18);
  position: relative;
  overflow: hidden;
}
.status-overall::before {
  /* coloured rail at the left edge that reflects current state */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
}
.status-overall--ok::before  { background: linear-gradient(180deg, var(--ok), #34D399); }
.status-overall--deg::before { background: linear-gradient(180deg, var(--deg), #FBBF24); }
.status-overall--out::before { background: linear-gradient(180deg, var(--out), #F87171); }

.status-overall-left {
  display: flex; align-items: center; gap: 22px;
}
.status-overall-text h2 {
  margin: 0 0 4px;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.15;
}
.status-overall-text p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 640px;
}
.status-overall-right {
  display: flex; align-items: center; gap: 16px;
}
.status-overall-time {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
}
.status-overall-time-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.status-overall-time-value {
  font-size: 14px; font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Live ping dot (pulses) ---- */
.status-overall-ping {
  position: relative;
  width: 18px; height: 18px;
  flex: none;
}
.status-overall-ping > span {
  position: absolute; inset: 0;
  border-radius: 999px;
}
.status-overall-ping > span:nth-child(1) {
  background: var(--ok);
  z-index: 1;
}
.status-overall-ping > span:nth-child(2) {
  background: var(--ok);
  opacity: 0.45;
  animation: status-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
.status-overall--deg .status-overall-ping > span:nth-child(1) { background: var(--deg); }
.status-overall--deg .status-overall-ping > span:nth-child(2) { background: var(--deg); }
.status-overall--out .status-overall-ping > span:nth-child(1) { background: var(--out); }
.status-overall--out .status-overall-ping > span:nth-child(2) { background: var(--out); }
@keyframes status-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  60%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (max-width: 720px) {
  .status-overall { grid-template-columns: 1fr; gap: 18px; padding: 22px 24px; }
  .status-overall-right { justify-content: flex-start; }
  .status-overall-time { align-items: flex-start; }
  .status-overall-left { gap: 14px; }
  .status-overall-text h2 { font-size: 20px; }
}

/* ---- Service group ---- */
.status-group {
  margin-top: 52px;
}
.status-group:first-of-type { margin-top: 36px; }

.status-group-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.status-group-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--navy);
  font-weight: 700;
}
.status-group-count {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--bg-soft);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

/* ---- Service cards grid ---- */
.status-group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 760px) { .status-group-grid { grid-template-columns: 1fr; } }

/* ---- Individual service card ---- */
.status-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    transform 520ms cubic-bezier(.16,1,.3,1),
    box-shadow 520ms cubic-bezier(.16,1,.3,1),
    border-color 520ms cubic-bezier(.16,1,.3,1);
  position: relative;
}
.status-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -22px rgba(0,20,133,0.22);
  border-color: rgba(46,77,249,0.18);
}
.status-card--deg { border-color: rgba(245,158,11,0.35); }
.status-card--out { border-color: rgba(220,38,38,0.40); }

.status-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}
.status-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  flex: none;
}
.status-card-ico svg { width: 20px; height: 20px; }

.status-card-meta { min-width: 0; }
.status-card-name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--navy);
  line-height: 1.2;
}
.status-card-desc {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---- Status pill ---- */
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.status-pill-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.6);
}
.status-pill--ok    { background: var(--ok-soft);    color: #047857; }
.status-pill--deg   { background: var(--deg-soft);   color: #B45309; }
.status-pill--out   { background: var(--out-soft);   color: #B91C1C; }
.status-pill--maint { background: var(--maint-soft); color: #4338CA; }

/* ---- 90-day bar strip ---- */
.status-card-bars {
  display: grid;
  grid-template-columns: repeat(90, 1fr);
  gap: 1.5px;
  height: 28px;
  align-items: stretch;
}
.status-bar {
  border-radius: 1.5px;
  transition: transform 240ms ease, filter 240ms ease;
  cursor: help !important;
}
.status-bar--ok  { background: var(--ok);    }
.status-bar--deg { background: var(--deg);   }
.status-bar--out { background: var(--out);   }
.status-bar:hover { transform: scaleY(1.15); filter: brightness(1.15); }

/* ---- Card footer line: uptime, response time ---- */
.status-card-foot {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.005em;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
}
.status-card-foot strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.status-meta-divider { opacity: 0.5; }

/* ---- Recent incidents ---- */
.incident-list {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-top: 32px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.incident {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  position: relative;
  border-left: 4px solid var(--ok);
}
.incident--ok  { border-left-color: var(--ok);  }
.incident--deg { border-left-color: var(--deg); }
.incident--out { border-left-color: var(--out); }
.incident-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: none;
  margin-bottom: 6px;
}
.incident-date { color: var(--ink); }
.incident-dot {
  width: 3px; height: 3px; border-radius: 999px;
  background: var(--line-strong);
  display: inline-block;
}
.incident-service {
  color: var(--blue);
  font-weight: 700;
}
.incident-duration {
  margin-left: auto;
  background: var(--bg-soft);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.incident-title {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--navy);
  line-height: 1.3;
}
.incident-summary {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.status-history-footer {
  margin-top: 22px;
  display: flex; justify-content: center;
}

/* ---- Status legend + subscribe band ---- */
.status-bottom {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 880px) { .status-bottom { grid-template-columns: 1fr; } }

.status-legend {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 26px;
}
.status-legend h4 {
  margin: 0 0 12px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); font-weight: 700;
}
.status-legend ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.status-legend li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}
.status-legend .status-pill { flex: none; }

.status-subscribe { margin: 0; }

/* Footnote shown when a card's live fetch fails */
.status-fetch-note {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  font-size: 10.5px;
  font-style: italic;
  color: var(--muted);
  opacity: 0.75;
  border-top: 1px dotted var(--line);
}

/* ===================================================================
   STATUS TICKER — scrolling banner beneath the hero on the status page
   =================================================================== */
.status-ticker {
  background: linear-gradient(135deg, #001485 0%, #0B2199 50%, #2E4DF9 100%);
  color: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 10px -2px rgba(0,20,133,0.18);
}
.status-ticker::before,
.status-ticker::after {
  /* Subtle vignette so the chips fade in / out at the edges of the rail */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.status-ticker::before {
  left: 0;
  background: linear-gradient(90deg,
    rgba(0,20,133,0.95) 0%,
    rgba(0,20,133,0.35) 60%,
    rgba(0,20,133,0) 100%);
}
.status-ticker::after {
  right: 0;
  background: linear-gradient(270deg,
    rgba(46,77,249,0.95) 0%,
    rgba(46,77,249,0.35) 60%,
    rgba(46,77,249,0) 100%);
}
.status-ticker-rail {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  position: relative;
}

/* ---- "Live" label on the left ---- */
.status-ticker-label {
  display: inline-flex; align-items: center; gap: 9px;
  flex: none;
  padding: 0 22px 0 28px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(225deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  position: relative;
  z-index: 3;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.status-ticker-pulse {
  position: relative;
  width: 10px; height: 10px;
  flex: none;
}
.status-ticker-pulse > span {
  position: absolute; inset: 0;
  border-radius: 999px;
}
.status-ticker-pulse > span:nth-child(1) {
  background: #10B981;   /* green by default — JS swaps this when degraded */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}
.status-ticker-pulse > span:nth-child(2) {
  background: #10B981;
  opacity: 0.55;
  animation: ticker-pulse 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
[data-overall="deg"] .status-ticker-pulse > span:nth-child(1),
[data-overall="deg"] .status-ticker-pulse > span:nth-child(2) { background: #F59E0B; }
[data-overall="out"] .status-ticker-pulse > span:nth-child(1),
[data-overall="out"] .status-ticker-pulse > span:nth-child(2) { background: #EF4444; }
@keyframes ticker-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  60%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ---- Scrolling track ---- */
.status-ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.status-ticker-list {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  white-space: nowrap;
  animation: ticker-marquee 60s linear infinite;
  will-change: transform;
}
.status-ticker:hover .status-ticker-list {
  animation-play-state: paused;
}
@keyframes ticker-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Individual ticker chip ---- */
.status-ticker-item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  backdrop-filter: blur(4px);
  transition: background 280ms ease, border-color 280ms ease;
}
.status-ticker-item:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
}
.status-ticker-item strong {
  font-weight: 700;
  color: #fff;
}
.status-ticker-item-meta {
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  font-size: 11.5px;
  margin-left: 4px;
}
.status-ticker-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #10B981;
  box-shadow: 0 0 0 2.5px rgba(255,255,255,0.18);
  flex: none;
}
.status-ticker-item--ok  .status-ticker-dot { background: #10B981; }
.status-ticker-item--deg .status-ticker-dot { background: #F59E0B; }
.status-ticker-item--out .status-ticker-dot { background: #EF4444; }

/* Degraded items get a subtle amber edge so they read at a glance */
.status-ticker-item--deg {
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.45);
}
.status-ticker-item--out {
  background: rgba(239,68,68,0.22);
  border-color: rgba(239,68,68,0.55);
}

/* Tiny separator dot between sets of items so the loop reads naturally */
.status-ticker-sep {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.30);
  flex: none;
}

/* Mobile — tighter padding, smaller chips */
@media (max-width: 760px) {
  .status-ticker-label { padding: 0 14px; font-size: 10.5px; letter-spacing: 0.14em; }
  .status-ticker-rail { min-height: 46px; }
  .status-ticker-item { font-size: 11.5px; padding: 5px 11px 5px 10px; }
  .status-ticker-list { animation-duration: 45s; }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .status-ticker-list { animation: none; }
}

/* ===================================================================
   HERO STATUS PILL — sits above the H1, replaces the chunky banner
   =================================================================== */
.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 14px;
  margin: 0 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  text-decoration: none;
  color: #fff;
  position: relative;
  z-index: 2;
  transition:
    background 420ms cubic-bezier(.16,1,.3,1),
    border-color 420ms cubic-bezier(.16,1,.3,1),
    transform 420ms cubic-bezier(.16,1,.3,1);
}
.hero-status-pill:hover,
.hero-status-pill:focus-visible {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
  transform: translateX(2px);
}

/* Pulsing status dot — colour changes via data-overall attribute */
.hero-status-pulse {
  position: relative;
  width: 10px; height: 10px;
  flex: none;
}
.hero-status-pulse > span {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: #10B981;     /* default green */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.20);
}
.hero-status-pulse > span:nth-child(2) {
  box-shadow: none;
  opacity: 0.55;
  animation: hero-status-ping 1.9s cubic-bezier(.4,0,.6,1) infinite;
}
[data-overall="deg"] .hero-status-pulse > span { background: #F59E0B; }
[data-overall="out"] .hero-status-pulse > span { background: #EF4444; }
[data-overall="unknown"] .hero-status-pulse > span { background: #94A3B8; }
@keyframes hero-status-ping {
  0%   { transform: scale(1);   opacity: 0.55; }
  60%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Text block: state + freshness */
.hero-status-pill-text {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.hero-status-pill-text strong {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.hero-status-pill-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.62);
  white-space: nowrap;
}
.hero-status-pill-sub [data-relative-time] {
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
}

/* Trailing chevron — slides right on hover */
.hero-status-pill-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: rgba(255,255,255,0.6);
  transition: transform 420ms cubic-bezier(.16,1,.3,1), color 420ms cubic-bezier(.16,1,.3,1);
}
.hero-status-pill-arrow svg { width: 12px; height: 12px; }
.hero-status-pill:hover .hero-status-pill-arrow,
.hero-status-pill:focus-visible .hero-status-pill-arrow {
  color: #fff;
  transform: translateX(2px);
}

/* On mobile: drop the freshness sub-line so the pill stays one line */
@media (max-width: 540px) {
  .hero-status-pill { gap: 9px; padding: 7px 12px; margin-bottom: 12px; }
  .hero-status-pill-sub { display: none; }
  .hero-status-pill-text strong { font-size: 10.5px; letter-spacing: 0.12em; }
}

/* ===================================================================
   REMOTE SUPPORT PAGE
   =================================================================== */

/* ---- Join-session card (the main code-entry card) ---- */
.rs-card {
  background: #fff;
  border-radius: 22px;
  box-shadow:
    0 36px 80px -28px rgba(0,20,133,0.32),
    0 14px 30px -16px rgba(0,20,133,0.16),
    0 0 0 1px var(--line);
  overflow: hidden;
  position: relative;
}
.rs-card::before {
  /* Subtle brand-blue corner glow */
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(46,77,249,0.08), transparent 60%);
  pointer-events: none;
}
.rs-card-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
}
@media (max-width: 940px) {
  .rs-card-inner { grid-template-columns: 1fr; }
}
.rs-card-text {
  padding: 44px 48px 48px;
}
.rs-card-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.rs-card-text h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  font-weight: 700;
}
.rs-card-text > p {
  margin: 0 0 28px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 560px;
}

/* ---- Code input + submit ---- */
.rs-form { margin-top: 8px; }
.rs-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.rs-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
@media (max-width: 560px) {
  .rs-input-row { grid-template-columns: 1fr; }
}
.rs-input-row input {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--navy);
  background: var(--blue-soft);
  border: 1.5px solid rgba(46,77,249,0.22);
  border-radius: 14px;
  padding: 18px 22px;
  outline: none;
  transition: border-color 280ms ease, background 280ms ease, box-shadow 280ms ease;
}
.rs-input-row input::placeholder {
  color: rgba(46,77,249,0.40);
  letter-spacing: 0.10em;
  font-weight: 500;
}
.rs-input-row input:focus {
  border-color: var(--blue);
  background: #F4F6FF;
  box-shadow: 0 0 0 4px rgba(46,77,249,0.15);
}
.rs-submit {
  font-size: 16px !important;
  padding: 0 24px !important;
  white-space: nowrap;
  border-radius: 14px !important;
}
@media (max-width: 560px) {
  .rs-submit { padding: 16px 24px !important; justify-content: center; }
}
.rs-help {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.rs-help a { color: var(--blue); font-weight: 600; }
.rs-help a:hover { color: var(--blue-deep); }

/* ---- Side panel: "You stay in control" ---- */
.rs-card-side {
  padding: 44px 36px 48px;
  background: linear-gradient(225deg, var(--blue-deep) 0%, var(--blue) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.rs-card-side::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(300px 200px at 100% 0%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(220px 160px at 0% 100%, rgba(255,255,255,0.10), transparent 60%);
  pointer-events: none;
}
.rs-card-side h4 {
  position: relative; z-index: 1;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.rs-card-side ul {
  position: relative; z-index: 1;
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 16px;
}
.rs-card-side li {
  display: flex; gap: 14px; align-items: flex-start;
}
.rs-card-side li svg {
  width: 20px; height: 20px;
  color: rgba(255,255,255,0.85);
  flex: none;
  margin-top: 2px;
}
.rs-card-side li strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.rs-card-side li span {
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

/* ---- How it works steps ---- */
.rs-steps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: rsstep;
}
@media (max-width: 860px) { .rs-steps { grid-template-columns: 1fr; gap: 14px; } }

.rs-steps li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 28px 26px;
  position: relative;
  transition: transform 460ms cubic-bezier(.16,1,.3,1), box-shadow 460ms cubic-bezier(.16,1,.3,1);
}
.rs-steps li:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -22px rgba(0,20,133,0.20);
}
.rs-step-num {
  position: absolute;
  top: 18px; right: 22px;
  font-family: 'Instrument Serif', serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: rgba(46,77,249,0.16);
  letter-spacing: -0.04em;
}
.rs-step-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  margin-bottom: 16px;
}
.rs-step-ico svg { width: 22px; height: 22px; }
.rs-steps h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.rs-steps p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}
.rs-steps p a { color: var(--blue); font-weight: 600; }

/* ---- Alternative contact cards ---- */
.rs-alt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}
@media (max-width: 860px) { .rs-alt-grid { grid-template-columns: 1fr; } }

.rs-alt-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 24px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition:
    transform 420ms cubic-bezier(.16,1,.3,1),
    border-color 420ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms cubic-bezier(.16,1,.3,1);
}
.rs-alt-card:hover {
  transform: translateY(-3px);
  border-color: rgba(46,77,249,0.30);
  box-shadow: 0 22px 44px -22px rgba(0,20,133,0.22);
}
.rs-alt-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  margin-bottom: 10px;
  transition: background 420ms cubic-bezier(.16,1,.3,1), color 420ms cubic-bezier(.16,1,.3,1);
}
.rs-alt-card:hover .rs-alt-ico {
  background: linear-gradient(225deg, var(--blue-deep), var(--blue));
  color: #fff;
}
.rs-alt-ico svg { width: 20px; height: 20px; }
.rs-alt-card h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.rs-alt-card p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.rs-alt-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  transition: gap 320ms cubic-bezier(.16,1,.3,1);
}
.rs-alt-link svg { width: 14px; height: 14px; transition: transform 320ms cubic-bezier(.16,1,.3,1); }
.rs-alt-card:hover .rs-alt-link { gap: 8px; color: var(--blue-deep); }
.rs-alt-card:hover .rs-alt-link svg { transform: translateX(2px); }

/* ---- FAQ accordions ---- */
.rs-faq {
  max-width: 760px;
  margin: 32px auto 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.rs-faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  transition: border-color 280ms ease, box-shadow 280ms ease;
}
.rs-faq-item[open] {
  border-color: rgba(46,77,249,0.30);
  box-shadow: 0 10px 24px -16px rgba(0,20,133,0.18);
}
.rs-faq-item summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.rs-faq-item summary::-webkit-details-marker { display: none; }
.rs-faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--blue);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  transition: transform 280ms ease;
}
.rs-faq-item[open] summary::after { content: "−"; }
.rs-faq-item > div {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* ===================================================================
   REMOTE SUPPORT — simplified join card
   Replaces the earlier two-column .rs-card layout. Single white card,
   massive code input, trust signals as a compact 4-up strip beneath.
   =================================================================== */
.rs-join-section { padding-top: 56px; padding-bottom: 56px; }

.rs-join {
  max-width: 760px;
  margin: -120px auto 0;     /* pull up to overlap the hero band */
  background: #fff;
  border-radius: 22px;
  padding: 44px 44px 36px;
  box-shadow:
    0 36px 80px -28px rgba(0,20,133,0.32),
    0 14px 30px -16px rgba(0,20,133,0.16),
    0 0 0 1px var(--line);
  text-align: center;
  position: relative;
  z-index: 5;
}
.rs-join-title {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  font-weight: 700;
}
.rs-join-lede {
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 540px;
  margin-left: auto; margin-right: auto;
}

/* ---- The oversized input + submit row ---- */
.rs-join-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
@media (max-width: 560px) {
  .rs-join-form { grid-template-columns: 1fr; }
}

.rs-join-input {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--navy);
  text-align: center;
  background: var(--blue-soft);
  border: 2px solid rgba(46,77,249,0.20);
  border-radius: 14px;
  padding: 18px 22px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 280ms ease, background 280ms ease, box-shadow 280ms ease;
}
.rs-join-input::placeholder {
  color: rgba(46,77,249,0.32);
  letter-spacing: 0.18em;
  font-weight: 500;
}
.rs-join-input:focus {
  border-color: var(--blue);
  background: #F4F6FF;
  box-shadow: 0 0 0 5px rgba(46,77,249,0.16);
}

.rs-join-submit {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  padding: 0 26px !important;
  border-radius: 14px !important;
  white-space: nowrap;
  height: auto;
}
@media (max-width: 560px) {
  .rs-join-submit { padding: 16px 24px !important; justify-content: center; }
}

.rs-join-help {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.rs-join-help a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.rs-join-help a:hover { color: var(--blue-deep); text-decoration: underline; }

/* ---- Trust strip beneath the form ---- */
.rs-trust {
  list-style: none;
  margin: 32px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: left;
}
@media (max-width: 860px) { .rs-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rs-trust { grid-template-columns: 1fr; } }

.rs-trust li {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
}
.rs-trust li > svg {
  grid-row: 1 / span 2;       /* icon spans both rows of its cell */
  grid-column: 1;
  width: 18px; height: 18px;
  color: var(--blue);
  margin-top: 2px;
}
.rs-trust li > strong {
  grid-row: 1; grid-column: 2;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.rs-trust li > span {
  grid-row: 2; grid-column: 2;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ===== Remote support — post-submit "Connecting" state ===== */
.rs-join.is-connecting {
  text-align: center;
}
.rs-connecting {
  padding: 8px 0 4px;
}
.rs-connecting-spinner {
  width: 48px; height: 48px;
  margin: 0 auto 20px;
  border: 3px solid rgba(46,77,249,0.18);
  border-top-color: var(--blue);
  border-radius: 999px;
  animation: rs-spin 0.9s linear infinite;
}
@keyframes rs-spin { to { transform: rotate(360deg); } }
.rs-connecting h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.rs-connecting > p {
  margin: 0 auto 22px;
  max-width: 540px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.rs-connecting-steps {
  list-style: none;
  counter-reset: rsstep;
  margin: 0 auto 24px;
  padding: 0;
  max-width: 460px;
  text-align: left;
  display: flex; flex-direction: column;
  gap: 12px;
}
.rs-connecting-steps li {
  counter-increment: rsstep;
  position: relative;
  padding: 12px 14px 12px 56px;
  background: var(--blue-soft);
  border-radius: 12px;
  border: 1px solid rgba(46,77,249,0.18);
}
.rs-connecting-steps li::before {
  content: counter(rsstep);
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(225deg, var(--blue-deep), var(--blue));
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(46,77,249,0.5);
}
.rs-connecting-steps strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}
.rs-connecting-steps span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.rs-connecting-actions {
  display: flex; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
.rs-connecting-actions .btn { padding: 10px 18px; font-size: 13.5px; }

/* ===== Remote support — primary "Start support session" button ===== */
.rs-start-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 18px 32px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  border-radius: 14px !important;
  margin: 4px 0 8px;
  position: relative;
  box-shadow: 0 18px 36px -16px rgba(46,77,249,0.55);
  transition:
    transform 380ms cubic-bezier(.16,1,.3,1),
    box-shadow 380ms cubic-bezier(.16,1,.3,1) !important;
}
.rs-start-btn:hover,
.rs-start-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -16px rgba(46,77,249,0.65) !important;
}
.rs-start-btn svg {
  width: 18px; height: 18px;
  transition: transform 380ms cubic-bezier(.16,1,.3,1);
}
.rs-start-btn:hover svg,
.rs-start-btn:focus-visible svg { transform: translateX(3px); }

/* Pulsing dot on the left of the button */
.rs-start-btn-pulse {
  position: relative;
  width: 10px; height: 10px;
  flex: none;
}
.rs-start-btn-pulse > span {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
}
.rs-start-btn-pulse > span:nth-child(2) {
  opacity: 0.55;
  animation: rs-btn-ping 1.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes rs-btn-ping {
  0%   { transform: scale(1);   opacity: 0.55; }
  60%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ============================================================ */
/* ===== DARK MODE                                         ===== */
/* ============================================================ */
/* Toggled by a [data-theme="dark"] attribute on <html>, set    */
/* pre-paint by an inline script in <head> on each page to      */
/* prevent FOUC. The toggle button lives in .nav-cta and is     */
/* wired via the theme IIFE in synfo.js.                        */
/* ============================================================ */

/* Over-scroll / rubber-band canvas — browsers paint this area in the
   OS colour-scheme by default, which made the top-of-page bounce
   look dark even when our page was in light mode. Lock everything to
   our theme:
   1. Force color-scheme on :root (light is the explicit default;
      [data-theme="dark"] further down upgrades it to dark) — this
      controls scrollbar styling and the default canvas colour.
   2. Set an html background so any visible canvas matches the theme.
   3. Disable horizontal rubber-band/over-scroll so the area to the
      left/right of the page can't be revealed at all. */
:root { color-scheme: light; }
html {
  background: var(--bg);
  overscroll-behavior-x: none;
}
html, body {
  /* belt-and-braces: never allow the document to overflow horizontally,
     so the topbar can never sit "in front" of empty canvas space. */
  overflow-x: clip;
}
html, body { min-height: 100vh; }

/* Toggle button — shared chrome (renders in both light and dark) */
.theme-toggle {
  font: inherit;
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy);
  position: relative;
  flex: none;
  overflow: hidden;
  /* Pulled further to the right of the audit button — roughly an inch
     of extra breathing room on a typical desktop, scaling down to a
     small gap on phone-width viewports so the cluster doesn't burst. */
  margin-left: clamp(12px, 6vw, 88px);
  transition: background 220ms ease, border-color 220ms ease,
              color 220ms ease, transform 220ms ease,
              box-shadow 220ms ease;
}
.theme-toggle:hover {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: var(--blue);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-soft);
  border-color: var(--blue);
}
.theme-toggle .theme-icon {
  position: absolute;
  width: 18px; height: 18px;
  transition: transform 420ms cubic-bezier(.5,1.6,.3,1),
              opacity 220ms ease;
}
.theme-toggle .icon-sun {
  transform: rotate(-90deg) scale(0.35);
  opacity: 0;
}
.theme-toggle .icon-moon {
  transform: rotate(0) scale(1);
  opacity: 1;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  transform: rotate(0) scale(1);
  opacity: 1;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  transform: rotate(90deg) scale(0.35);
  opacity: 0;
}
/* Toggle treatment when topbar is transparent over a hero */
.topbar:not(.is-scrolled) .theme-toggle {
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}
.topbar:not(.is-scrolled) .theme-toggle:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.38);
  color: #fff;
}
.topbar:not(.is-scrolled) .theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle .theme-icon { transition: opacity 120ms linear; }
  .theme-toggle:hover { transform: none; }
}
@media (max-width: 1080px) {
  .theme-toggle { width: 36px; height: 36px; }
}

/* ----- Dark palette: deep navy charcoal, mono-blue retained ----- */
[data-theme="dark"] {
  --bg:           #080D1C;
  --bg-soft:      #0D1430;
  --bg-tint:      #101839;
  --surface:      #131A36;   /* primary card face */
  --surface-2:    #1A2247;   /* dropdowns, inputs, popovers */
  --surface-3:    #232C56;   /* hovered surface, raised chip */

  --ink:          #ECEFFB;
  --muted:        #9AA3C5;

  --line:         rgba(255,255,255,0.08);
  --line-strong:  rgba(255,255,255,0.16);

  --blue:         #4F6BFB;   /* slightly brighter for AAA on dark */
  --blue-hover:   #708AFC;
  --blue-soft:    rgba(79,107,251,0.16);

  /* keep --blue-deep / --blue-darker the same — they're used as text
     on white "popular" cards which stay white in dark mode */
  --blue-deep:    #001485;
  --blue-darker:  #00104D;

  /* --navy was doubling as "dark text" + "tooltip bg". Override to a
     light heading colour; the 4 tooltip rules are restored below. */
  --navy:         #ECEFFB;
  --navy-deep:    #FFFFFF;
  --navy-soft:    #4F6BFB;

  --orange:       #4F6BFB;
  --orange-deep:  #708AFC;
  --orange-soft:  rgba(79,107,251,0.16);

  --green:        #4ED28C;

  color-scheme: dark;
}

[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

/* Glass topbar when scrolled */
[data-theme="dark"] .topbar.is-scrolled {
  background: rgba(8,13,28,0.78);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
          backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .topbar.is-scrolled .brand img {
  filter: brightness(0) invert(1);
}
[data-theme="dark"] .topbar.is-scrolled .phone-link,
[data-theme="dark"] .topbar.is-scrolled .portal-link,
[data-theme="dark"] .topbar.is-scrolled .nav-link,
[data-theme="dark"] .topbar.is-scrolled .nav-trigger {
  color: var(--ink);
}
[data-theme="dark"] .topbar.is-scrolled .phone-link:hover,
[data-theme="dark"] .topbar.is-scrolled .portal-link:hover {
  background: var(--blue-soft);
  color: var(--blue);
}
[data-theme="dark"] .topbar.is-scrolled .nav-link:hover,
[data-theme="dark"] .topbar.is-scrolled .nav-trigger:hover,
[data-theme="dark"] .topbar.is-scrolled .nav-item:hover .nav-trigger,
[data-theme="dark"] .topbar.is-scrolled .nav-item:focus-within .nav-trigger {
  background: var(--blue-soft);
  color: var(--blue);
}

/* Card / surface backgrounds — flip every "background: #fff" to a token */
[data-theme="dark"] .audience-card,
[data-theme="dark"] .tier:not(.popular),
[data-theme="dark"] .tier-hybrid,
[data-theme="dark"] .matrix-wrap,
[data-theme="dark"] .svc,
[data-theme="dark"] .cap-tile,
[data-theme="dark"] .risk-tile,
[data-theme="dark"] .cs,
[data-theme="dark"] .quote,
[data-theme="dark"] .insight,
[data-theme="dark"] .mega,
[data-theme="dark"] .drop,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .alc-card,
[data-theme="dark"] .addon-card,
[data-theme="dark"] .split-card,
[data-theme="dark"] .channel-card,
[data-theme="dark"] .monitor-card,
[data-theme="dark"] .sla-wrap,
[data-theme="dark"] .intro-band .intro-side,
[data-theme="dark"] .value-card,
[data-theme="dark"] .vcard,
[data-theme="dark"] .testimonial,
[data-theme="dark"] .status-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] details.faq-item,
[data-theme="dark"] .news-card,
[data-theme="dark"] .cve-card,
[data-theme="dark"] .resource-card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .v-card,
[data-theme="dark"] .matrix-wrap--v2,
[data-theme="dark"] .alc-feature,
[data-theme="dark"] .status-overall,
[data-theme="dark"] .incident,
[data-theme="dark"] .rs-card,
[data-theme="dark"] .rs-alt-card,
[data-theme="dark"] .rs-faq-item,
[data-theme="dark"] .rs-join {
  background: var(--surface);
  border-color: var(--line);
}

/* Sticky table header in v2 matrix */
[data-theme="dark"] .matrix--v2 thead th {
  background: var(--bg-soft);
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

/* Small chips that sit on dark backgrounds — flip from white to surface-2 */
[data-theme="dark"] .matrix--v2 .group-count,
[data-theme="dark"] .alc-key-pill,
[data-theme="dark"] .addons-key,
[data-theme="dark"] .status-legend {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}

/* Numbered step tiles on the remote-support page */
[data-theme="dark"] .rs-steps li {
  background: var(--surface);
  border-color: var(--line);
}

/* Service status — overall banner gets a glow when ok */
[data-theme="dark"] .status-overall {
  box-shadow:
    0 24px 60px -28px rgba(0,0,0,0.75),
    0 1px 0 rgba(255,255,255,0.04) inset;
}

/* Text that used --blue-deep on a light surface — flip to bright blue so
   it remains readable on the new dark surface backgrounds */
[data-theme="dark"] .matrix .grouprow td,
[data-theme="dark"] .matrix--v2 .grouprow td,
[data-theme="dark"] .mega-col-addon .addon-item strong,
[data-theme="dark"] [class*="tier-tag"] {
  color: var(--blue-hover);
}

/* Accent pill that used a navy text colour on a blue-soft chip */
[data-theme="dark"] .nav-cta-tag,
[data-theme="dark"] .feature-pill,
[data-theme="dark"] .info-pill {
  color: var(--blue-hover);
}

/* Subtle band backgrounds keep working via token swap, but some hover
   states layered another rgba white — those still resolve fine.       */

/* Phone/portal/nav-link hovers in dark mode should keep blue-soft tint */
[data-theme="dark"] .phone-link:hover,
[data-theme="dark"] .portal-link:hover {
  background: var(--blue-soft);
  color: var(--blue);
}

/* Subtle inner highlight + deeper outer shadow for depth on dark */
[data-theme="dark"] .audience-card,
[data-theme="dark"] .tier:not(.popular),
[data-theme="dark"] .tier-hybrid,
[data-theme="dark"] .cs,
[data-theme="dark"] .quote,
[data-theme="dark"] .insight,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .mega,
[data-theme="dark"] .drop,
[data-theme="dark"] .split-card,
[data-theme="dark"] .alc-card,
[data-theme="dark"] .addon-card {
  box-shadow:
    0 24px 60px -28px rgba(0,0,0,0.75),
    0 1px 0 rgba(255,255,255,0.04) inset;
}

/* Card hover lift — stronger glow on dark */
[data-theme="dark"] .alc-card:hover,
[data-theme="dark"] .addon-card:hover,
[data-theme="dark"] .tier:not(.popular):hover,
[data-theme="dark"] .audience-card:hover,
[data-theme="dark"] .cs:hover,
[data-theme="dark"] .insight:hover {
  box-shadow:
    0 28px 64px -24px rgba(46,77,249,0.45),
    0 1px 0 rgba(255,255,255,0.06) inset;
  border-color: rgba(79,107,251,0.4);
}

/* Section bands — recreate the soft striping with dark tokens */
[data-theme="dark"] .strip:nth-of-type(odd)  { background: var(--bg); }
[data-theme="dark"] .strip:nth-of-type(even) { background: var(--bg-soft); }

/* Stats matrix header bg (uses --bg-soft) is already correct via the token swap.
   Tier ribbon and popular-tier white buttons intentionally stay white. */

/* Inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}
[data-theme="dark"] .filter-select,
[data-theme="dark"] .filter-input {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
[data-theme="dark"] .filter-reset {
  border-color: var(--line-strong);
  color: var(--muted);
}
[data-theme="dark"] .filter-reset:hover {
  color: var(--ink);
  border-color: var(--ink);
}
[data-theme="dark"] .login-sso .btn {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
[data-theme="dark"] .login-sso .btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* Footer — keep darker than --bg for grounding */
[data-theme="dark"] footer {
  background: #04081A;
  border-top: 1px solid var(--line);
}

/* Hero gradient is already dark — no change. But the network canvas
   stroke is drawn dynamically; the noise/glows behind it are fine. */

/* Topbar transparent-over-hero state already uses light tokens — fine */

/* Matrix tooltips restored to a dark surface (var(--navy) flipped) */
[data-theme="dark"] .matrix--v2 .feat-info::after,
[data-theme="dark"] .matrix--v2 .feat-info::before,
[data-theme="dark"] .matrix .feat-info::after,
[data-theme="dark"] .matrix .feat-info::before {
  background: #060A1A;
  color: #fff;
}

/* Headers that used to be navy on white now navy=light on dark — works.
   But the strong "headline" link colour on hover should brighten. */
[data-theme="dark"] .card-title a:hover { color: var(--blue-hover); }

/* News page — threat-intel inline-style overrides */
[data-theme="dark"] .ticker {
  background: linear-gradient(225deg, #060A1A 0%, #0D1430 100%);
}
[data-theme="dark"] .filter-select option { background: var(--surface-2); color: var(--ink); }
[data-theme="dark"] .chip-kev { background: #FFE45C; color: #2D2926; }
[data-theme="dark"] .pop-allcta .pop-allcta-arrow,
[data-theme="dark"] .pop-allcta:hover .pop-allcta-arrow {
  background: var(--surface-2);
}
[data-theme="dark"] .strip-allcta:hover { background: var(--blue-soft); }

/* Service-desk-noc inline-style overrides
   (.split-card, .sla-wrap already covered above) */
[data-theme="dark"] .split-card.is-247 .badge-time {
  background: rgba(78,210,140,0.18);
  color: #6EE3A4;
}
[data-theme="dark"] .channels-grid .channel,
[data-theme="dark"] .monitor-grid .monitor,
[data-theme="dark"] .steps-grid .step,
[data-theme="dark"] .itil-key-item {
  background: var(--surface);
  border-color: var(--line);
}

/* About / values page — intro-band and risk-grid handled via class names above */

/* Stats page status cards — keep state pill colours but surface adapts */
[data-theme="dark"] .status-card .status-history .bar {
  background: rgba(255,255,255,0.05);
}

/* Insight cards image overlay readability */
[data-theme="dark"] .insight-cat {
  color: #fff;
}

/* Buttons */
[data-theme="dark"] .btn-ghost {
  color: var(--ink);
  border-color: var(--line-strong);
  background: transparent;
}
[data-theme="dark"] .btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}

/* Eyebrow pill on light-section variants */
[data-theme="dark"] .eyebrow-light {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: var(--line);
}

/* Subtle nav hover background on dropdown panels in dark */
[data-theme="dark"] .mega a:hover,
[data-theme="dark"] .drop a:hover,
[data-theme="dark"] .mega-specialist-grid > a:hover {
  background: var(--surface-3);
  color: var(--ink);
}

/* Mobile nav already uses dark-friendly rgba whites — no override needed */

/* Login modal input focus ring tweak */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
}

/* Code / mono chips in threat-intel */
[data-theme="dark"] code,
[data-theme="dark"] .mono {
  background: var(--surface-2);
  color: var(--ink);
}

/* Tables in general get the surface treatment */
[data-theme="dark"] .matrix thead th {
  background: var(--bg-soft);
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}
[data-theme="dark"] .matrix tbody tr { border-color: var(--line); }

/* Selection */
[data-theme="dark"] ::selection {
  background: rgba(79,107,251,0.45);
  color: #fff;
}

/* ============================================================ */
/* ===== DARK MODE — polish pass                           ===== */
/* ============================================================ */
/* Bumped contrast on areas that blended into the dark surface. */
/* ============================================================ */

/* ----- Matrix ticks: solid blue chip with white check ----- */
[data-theme="dark"] .matrix .check,
[data-theme="dark"] .matrix--v2 .check {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset,
              0 4px 14px -6px rgba(79,107,251,0.55);
}
[data-theme="dark"] .matrix .check svg,
[data-theme="dark"] .matrix--v2 .check svg {
  color: #fff;
  stroke: #fff;
}

/* ----- Matrix "not included" em-dash: lighten dramatically ----- */
[data-theme="dark"] .matrix .none,
[data-theme="dark"] .matrix--v2 .none {
  color: rgba(255,255,255,0.38);
}

/* ----- Matrix grouprow gradient: replace the white end stop ----- */
[data-theme="dark"] .matrix--v2 .grouprow td {
  background: linear-gradient(
    90deg,
    rgba(79,107,251,0.22) 0%,
    rgba(79,107,251,0.08) 55%,
    var(--surface) 100%
  );
  color: var(--blue-hover);
}
[data-theme="dark"] .matrix--v2 .grouprow[data-group-toggle]:hover td {
  background: linear-gradient(
    90deg,
    rgba(79,107,251,0.34) 0%,
    rgba(79,107,251,0.14) 55%,
    var(--surface-2) 100%
  ) !important;
}

/* ----- Premium column tint + matrix row hover ----- */
[data-theme="dark"] .matrix--v2 tbody td:nth-child(3) {
  background: rgba(79,107,251,0.06);
}
[data-theme="dark"] .matrix--v2 tbody tr:hover td:not(.grouprow) {
  background: rgba(79,107,251,0.14);
}
[data-theme="dark"] .matrix--v2 tbody tr:hover td:nth-child(3) {
  background: rgba(79,107,251,0.22);
}
[data-theme="dark"] .matrix tbody tr:hover td {
  background: rgba(79,107,251,0.14);
}

/* ----- Zebra striping needs to show up on a dark surface ----- */
[data-theme="dark"] .matrix--v2 tbody tr:not(.grouprow):nth-child(even) td {
  background: rgba(255,255,255,0.02);
}
[data-theme="dark"] .matrix--v2 tbody tr:not(.grouprow):nth-child(even) td:nth-child(3) {
  background: rgba(79,107,251,0.10);
}

/* ----- Nav: link + dropdown hovers need real presence on dark ----- */
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-trigger:hover,
[data-theme="dark"] .nav-item:hover .nav-trigger,
[data-theme="dark"] .nav-item:focus-within .nav-trigger,
[data-theme="dark"] .topbar.is-scrolled .nav-link:hover,
[data-theme="dark"] .topbar.is-scrolled .nav-trigger:hover,
[data-theme="dark"] .topbar.is-scrolled .nav-item:hover .nav-trigger,
[data-theme="dark"] .topbar.is-scrolled .nav-item:focus-within .nav-trigger {
  background: rgba(79,107,251,0.20);
  color: #C5D0FF;
}
[data-theme="dark"] .topbar.is-scrolled .phone-link:hover,
[data-theme="dark"] .topbar.is-scrolled .portal-link:hover,
[data-theme="dark"] .phone-link:hover,
[data-theme="dark"] .portal-link:hover {
  background: rgba(79,107,251,0.20);
  color: #C5D0FF;
}

/* Mega-panel / drop-panel item hovers — stronger highlight on dark */
[data-theme="dark"] .mega a:hover,
[data-theme="dark"] .drop a:hover,
[data-theme="dark"] .mega-col-list a:hover,
[data-theme="dark"] .mega-specialist-grid > a:hover {
  background: rgba(79,107,251,0.18);
}
[data-theme="dark"] .mega-col-list a:hover strong,
[data-theme="dark"] .drop a:hover .drop-title {
  color: #C5D0FF;
}
[data-theme="dark"] .mega-col-list a:hover span.desc {
  color: var(--ink);
}
/* Tiered + simple lists set navy/blue hover titles with higher specificity
   than the rule above; navy is unreadable on the dark panel */
[data-theme="dark"] .mega.mega--tiered .mega-col-list a:hover strong,
[data-theme="dark"] .mega.mega--tiered .mega-col-list a:focus-visible strong,
[data-theme="dark"] .mega-col-list--simple a:focus-visible strong {
  color: #C5D0FF;
}
[data-theme="dark"] .mega.mega--tiered .mega-col-list a:focus-visible {
  background: rgba(79,107,251,0.18);
}
[data-theme="dark"] .mega.mega--tiered .mega-col-list a:hover .desc,
[data-theme="dark"] .mega.mega--tiered .mega-col-list a:focus-visible .desc {
  color: var(--ink);
}

/* Mega-panel addon items — boost the dashed-card background */
[data-theme="dark"] .mega-col-addon .addon-item {
  background: linear-gradient(225deg,
    rgba(79,107,251,0.10),
    rgba(79,107,251,0.04));
  border-color: rgba(79,107,251,0.40);
}
[data-theme="dark"] .mega-col-addon .addon-item:hover,
[data-theme="dark"] .mega-col-addon .addon-item:focus-visible {
  background: linear-gradient(225deg,
    rgba(79,107,251,0.22),
    rgba(79,107,251,0.10));
  border-color: rgba(79,107,251,0.70);
  box-shadow: 0 18px 36px -22px rgba(79,107,251,0.6);
}

/* Hybrid callout (purple gradient on light) — keep purple identity but
   warmer on the dark surface */
[data-theme="dark"] .hybrid-callout {
  background: linear-gradient(135deg,
    rgba(139,92,246,0.18),
    rgba(91,33,182,0.12));
  border-color: rgba(139,92,246,0.45);
}

/* Card borders — the default --line is rgba(255,255,255,0.08) which is
   very subtle. Bump card-specific borders a touch so cards have edges. */
[data-theme="dark"] .audience-card,
[data-theme="dark"] .tier:not(.popular),
[data-theme="dark"] .tier-hybrid,
[data-theme="dark"] .alc-card,
[data-theme="dark"] .addon-card,
[data-theme="dark"] .cs,
[data-theme="dark"] .quote,
[data-theme="dark"] .insight,
[data-theme="dark"] .split-card,
[data-theme="dark"] .matrix-wrap,
[data-theme="dark"] .matrix-wrap--v2,
[data-theme="dark"] .sla-wrap,
[data-theme="dark"] .rs-card,
[data-theme="dark"] .rs-alt-card,
[data-theme="dark"] .rs-faq-item,
[data-theme="dark"] .rs-join,
[data-theme="dark"] .status-card,
[data-theme="dark"] .status-overall,
[data-theme="dark"] .incident,
[data-theme="dark"] .news-card,
[data-theme="dark"] .cve-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .v-card,
[data-theme="dark"] .channel-card,
[data-theme="dark"] .monitor-card,
[data-theme="dark"] .alc-feature {
  border-color: rgba(255,255,255,0.10);
}

/* Inner-page hero breadcrumb separator + slash */
[data-theme="dark"] .breadcrumb {
  color: rgba(255,255,255,0.55);
}
[data-theme="dark"] .breadcrumb a {
  color: rgba(255,255,255,0.78);
}
[data-theme="dark"] .breadcrumb a:hover {
  color: #fff;
}

/* Faded section dividers — give the stats band underlines colour */
[data-theme="dark"] .stat {
  border-left-color: rgba(255,255,255,0.12);
}

/* FAQ chevron / details marker */
[data-theme="dark"] details summary::-webkit-details-marker { color: var(--ink); }
[data-theme="dark"] .faq-item summary,
[data-theme="dark"] details.faq-item summary {
  color: var(--ink);
}

/* Service-status — status pills retain their semantic colours, but the
   "All systems operational" pill in dark needs a confidence boost */
[data-theme="dark"] .status-overall--ok {
  background: linear-gradient(135deg,
    rgba(16,185,129,0.14),
    rgba(52,211,153,0.06)),
    var(--surface);
}

/* Tier "popular" card already uses a blue gradient; ensure inner
   element borders stay legible on dark */
[data-theme="dark"] .tier.popular .tier-pillstrip span {
  background: rgba(255,255,255,0.16);
}

/* Footer links — a touch brighter on the deepest dark background */
[data-theme="dark"] footer a { color: rgba(255,255,255,0.72); }
[data-theme="dark"] footer a:hover { color: #fff; }
[data-theme="dark"] footer h4, [data-theme="dark"] footer h5 { color: #fff; }

/* Insights card overlay readability (image gradient → headline) */
[data-theme="dark"] .insight .img::after {
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 100%);
}

/* Service-desk-noc — ticket-flow numbers + ITIL key text */
[data-theme="dark"] .channels-grid .channel:hover,
[data-theme="dark"] .monitor-grid .monitor:hover {
  border-color: rgba(79,107,251,0.45);
  box-shadow: 0 18px 40px -22px rgba(79,107,251,0.4);
}

/* Threat-intel filter row + search input field */
[data-theme="dark"] .filter-input {
  background: var(--surface-2);
}
[data-theme="dark"] .filter-search svg {
  color: var(--muted);
}

/* Burger menu open state on transparent topbar stays white — fine.
   Mobile sheet uses rgba whites — fine. */

/* Brand logo: even when topbar is at the very top (not scrolled, no
   hero, e.g. the threat-intel page which has no hero) we want it to
   read on the dark page background, not be inverted-then-invisible */
[data-theme="dark"] .topbar:not(.is-scrolled) .brand img {
  filter: brightness(0) invert(1);
}

/* Mega panel "View all" pill: navy (--blue-deep) text is unreadable on
   the dark panel, so lift it to white with a visible blue outline. */
[data-theme="dark"] .pop-allcta {
  color: #fff;
  border-color: rgba(79,107,251,0.40);
}
/* Mega panel "pop" allcta icon → keep a visible chip */
[data-theme="dark"] .pop-allcta-arrow {
  background: var(--surface-3);
  color: var(--ink);
}
[data-theme="dark"] .pop-allcta:hover .pop-allcta-arrow {
  background: var(--blue);
  color: #fff;
}

/* "Optional" pill in the matrix uses dark-purple text on faint-purple
   bg — invisible on dark. Lift to a readable purple. */
[data-theme="dark"] .matrix--v2 .opt,
[data-theme="dark"] .matrix--v2 .opt-badge {
  background: rgba(167,139,250,0.18);
  color: #C4B5FD;
  border-color: rgba(167,139,250,0.35);
}

/* Add-on tier pill ("All / Premium / Enterprise") uses dark-text-on-
   light-tint by default — boost in dark */
[data-theme="dark"] .tier-tag--all {
  background: rgba(107,181,145,0.18);
  color: #95D5B2;
}
[data-theme="dark"] .tier-tag--premium {
  background: rgba(79,107,251,0.20);
  color: #C5D0FF;
}
[data-theme="dark"] .tier-tag--enterprise {
  /* keeps the navy → blue gradient + white text from light mode */
  color: #fff;
}

/* Tier seats / tagline pill on the regular tier cards */
[data-theme="dark"] .tier-seats {
  background: rgba(79,107,251,0.18);
  color: #C5D0FF;
}

/* Audience-card tag pill (5–50 / 50–500 staff) */
[data-theme="dark"] .audience-card .tag {
  background: rgba(79,107,251,0.18);
  color: #C5D0FF;
}

/* Final-CTA band already uses navy gradient — works. But the white
   button needs to stay readable on the dark gradient: keep default. */

/* Tier-pillstrip (small feature chips inside a tier card) — boost */
[data-theme="dark"] .tier:not(.popular) .tier-pillstrip span {
  background: rgba(79,107,251,0.16);
  color: var(--ink);
}

/* News page severity chips — re-tune soft backgrounds for dark surface */
[data-theme="dark"] .chip-critical { background: rgba(220,38,38,0.20); color: #FCA5A5; }
[data-theme="dark"] .chip-high     { background: rgba(245,158,11,0.20); color: #FCD34D; }
[data-theme="dark"] .chip-medium   { background: rgba(180,123,0,0.22);  color: #FDE68A; }
[data-theme="dark"] .chip-low      { background: rgba(79,107,251,0.20); color: #C5D0FF; }
[data-theme="dark"] .chip-info     { background: rgba(148,163,184,0.20); color: #E2E8F0; }

/* News card category strip — the "purple" LOLRMM card uses a light-on-
   light wash that disappears on dark */
[data-theme="dark"] .card-lolrmm {
  background: linear-gradient(225deg, rgba(124,58,237,0.16), rgba(91,33,182,0.10));
  border-color: rgba(124,58,237,0.40);
}

/* SLA priority dots stay vibrant — already colour-fixed. The "Default
   (unset)" row uses inline #5A6477 — boost contrast */
[data-theme="dark"] .sla-priority .dot[style*="5A6477"] {
  background: #98A2C3 !important;
}

/* Service-status — ticker label glass band */
[data-theme="dark"] .status-ticker-label {
  background: linear-gradient(225deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.02));
}

/* Status-card "All systems operational" small pill at the top of the
   status hero — its bg uses a green tint; keep readable */
[data-theme="dark"] .status-pill,
[data-theme="dark"] .status-pill--ok {
  color: #6EE3A4;
}

/* Logo strip mask: works as-is (mask is alpha-only). */

/* Eyebrow chip on light section headers */
[data-theme="dark"] .eyebrow {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
}
/* Eyebrow chip when used on LIGHT (now dark) sections — the variant
   that sits on the page surface not the hero */
[data-theme="dark"] section:not(.hero) .eyebrow,
[data-theme="dark"] .eyebrow-light {
  background: var(--blue-soft);
  color: var(--blue-hover);
  border-color: var(--line-strong);
}

/* ============================================================ */
/* ===== N8N CHAT WIDGET — synfo brand integration         ===== */
/* ============================================================ */
/* The @n8n/chat embed reads CSS custom properties off :root for
   theming. Mapping its tokens onto our existing design system so
   the floating chat button, popup window, header, bubbles and
   input all match the synfo blue palette and dark mode. */

:root {
  /* Core palette */
  --chat--color-primary:               var(--blue);
  --chat--color-primary-shade-50:      var(--blue-hover);
  --chat--color-primary-shade-100:     var(--blue-deep);
  --chat--color-secondary:             var(--blue);
  --chat--color-secondary-shade-50:    var(--blue-hover);
  --chat--color-white:                 #ffffff;
  --chat--color-light:                 var(--bg-soft);
  --chat--color-light-shade-50:        var(--line);
  --chat--color-light-shade-100:       var(--line-strong);
  --chat--color-medium:                var(--muted);
  --chat--color-dark:                  var(--navy);
  --chat--color-disabled:              var(--line-strong);
  --chat--color-typing:                var(--muted);

  /* Layout */
  --chat--spacing:                     14px;
  --chat--border-radius:               18px;
  --chat--transition-duration:         180ms;

  /* Pop-up window */
  --chat--window--width:               380px;
  --chat--window--height:              600px;

  /* Header bar */
  --chat--header-height:               auto;
  --chat--header--padding:             12px 16px;
  --chat--header--background:          linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
  --chat--header--color:               #ffffff;
  --chat--header--border-top:          none;
  --chat--header--border-bottom:       none;
  --chat--heading--font-size:          17px;
  --chat--subtitle--font-size:         13px;
  --chat--subtitle--line-height:       1.45;

  /* Messages */
  --chat--message--font-size:          14.5px;
  --chat--message--padding:            10px 14px;
  --chat--message--border-radius:      14px;
  --chat--message-line-height:         1.55;
  --chat--message--bot--background:    var(--bg-soft);
  --chat--message--bot--color:         var(--ink);
  --chat--message--bot--border:        1px solid var(--line);
  --chat--message--user--background:   var(--blue);
  --chat--message--user--color:        #ffffff;
  --chat--message--user--border:       none;
  --chat--message--pre--background:    var(--bg-tint);

  /* Toggle button (the floating circular button) */
  --chat--toggle--background:          var(--blue);
  --chat--toggle--hover--background:   var(--blue-hover);
  --chat--toggle--active--background:  var(--blue-deep);
  --chat--toggle--color:               #ffffff;
  --chat--toggle--size:                58px;

  /* Input */
  --chat--input--background:           #ffffff;
  --chat--input--text-color:           var(--ink);
  --chat--input--border:               1px solid var(--line-strong);
  --chat--input--border-radius:        12px;
  --chat--input--placeholder--color:   var(--muted);
  --chat--input--send--button--background:        var(--blue);
  --chat--input--send--button--color:             #ffffff;
  --chat--input--send--button--background-hover:  var(--blue-hover);
  --chat--input--send--button--color-hover:       #ffffff;

  /* Body / surfaces */
  --chat--body--background:            #ffffff;
  --chat--body-padding:                18px;
}

/* Dark-mode token remap */
[data-theme="dark"] {
  --chat--color-light:                 var(--surface);
  --chat--color-light-shade-50:        var(--line);
  --chat--color-light-shade-100:       var(--line-strong);
  --chat--color-dark:                  var(--ink);

  --chat--header--background:          linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
  --chat--header--color:               #ffffff;

  --chat--message--bot--background:    var(--surface-2);
  --chat--message--bot--color:         var(--ink);
  --chat--message--bot--border:        1px solid var(--line);
  --chat--message--pre--background:    var(--bg-tint);

  --chat--input--background:           var(--surface-2);
  --chat--input--text-color:           var(--ink);
  --chat--input--border:               1px solid var(--line-strong);

  --chat--body--background:            var(--surface);
  --chat--footer--background:          var(--bg-soft);
  --chat--input--container--background: var(--bg-soft);
  --chat--input--background:           var(--surface-2);

  --chat--toggle--background:          var(--blue);
  --chat--toggle--hover--background:   var(--blue-hover);
}

/* Soften the floating toggle with a synfo-style glow */
#n8n-chat .chat-toggle,
#n8n-chat-toggle {
  box-shadow:
    0 12px 28px -10px rgba(46,77,249,0.55),
    0 2px 6px rgba(46,77,249,0.2);
}
[data-theme="dark"] #n8n-chat .chat-toggle,
[data-theme="dark"] #n8n-chat-toggle {
  box-shadow:
    0 14px 36px -8px rgba(79,107,251,0.55),
    0 2px 8px rgba(0,0,0,0.4);
}

/* ============================================================ */
/* ===== SYNFO SPACEMAN — animated chat assistant          ===== */
/* ============================================================ */
/* A cute astronaut character replaces the default n8n toggle.   */
/* The character has idle animations (float, blink, antenna      */
/* pulse) and a hover-only speech bubble. Clicking it triggers   */
/* the underlying n8n toggle (hidden) to open the chat.          */
/* ============================================================ */

/* Hide n8n's stock toggle — we replace it with our own astronaut.
   We keep it in the DOM (clickable via JS) but visually invisible. */
.chat-window-toggle,
#n8n-chat .chat-window-toggle,
#n8n-chat [class*="chat-window-toggle"] {
  display: none !important;
}

/* Floating astronaut button */
.synfo-astro {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 1000;
  width: 84px;
  height: 84px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 14px 26px rgba(46,77,249,0.45))
          drop-shadow(0 2px 6px rgba(0,20,133,0.25));
  animation: synfo-astro-float 4.5s ease-in-out infinite;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1),
              opacity 280ms ease,
              filter 240ms ease;
  -webkit-tap-highlight-color: transparent;
}
.synfo-astro svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.synfo-astro:hover {
  transform: translateY(-4px) scale(1.06);
  animation-play-state: paused;
  filter: drop-shadow(0 18px 32px rgba(46,77,249,0.55))
          drop-shadow(0 3px 8px rgba(0,20,133,0.3));
}
.synfo-astro:active {
  transform: translateY(-2px) scale(0.98);
}
.synfo-astro:focus-visible {
  outline: none;
}
.synfo-astro:focus-visible svg {
  filter: drop-shadow(0 0 0 3px rgba(79,107,251,0.6));
}

/* Gentle bobbing float */
@keyframes synfo-astro-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

/* Eye blink — both eyes share the animation, occasional */
.synfo-astro .astro-eye {
  transform-origin: center;
  animation: synfo-astro-blink 5.5s infinite;
}
@keyframes synfo-astro-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 97%      { transform: scaleY(0.1); }
}

/* Antenna pulse */
.synfo-astro .astro-antenna {
  animation: synfo-astro-antenna 1.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes synfo-astro-antenna {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}

/* Visor sparkle drift */
.synfo-astro .astro-sparkle {
  animation: synfo-astro-sparkle 3.2s ease-in-out infinite;
}
@keyframes synfo-astro-sparkle {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.35; }
}

/* Hover speech bubble */
.synfo-astro::before {
  content: 'Need a hand?';
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #ffffff;
  color: var(--ink);
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 22px -6px rgba(0,20,133,0.28),
              0 2px 4px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.synfo-astro::after {
  content: '';
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #ffffff;
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.synfo-astro:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.synfo-astro:hover::after {
  opacity: 1;
}
[data-theme="dark"] .synfo-astro::before {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
}
[data-theme="dark"] .synfo-astro::after {
  border-left-color: var(--surface-2);
}

/* Fade out when chat is open */
.synfo-astro.is-chat-open {
  opacity: 0;
  transform: scale(0.4) translateY(20px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .synfo-astro,
  .synfo-astro .astro-eye,
  .synfo-astro .astro-antenna,
  .synfo-astro .astro-sparkle { animation: none !important; }
}

@media (max-width: 640px) {
  .synfo-astro {
    width: 70px; height: 70px;
    bottom: 16px; right: 16px;
  }
}

/* ============================================================ */
/* ===== Chat window — restyled to match the design brief  ===== */
/* ============================================================ */

#n8n-chat .chat-window,
#n8n-chat-window {
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 70px -20px rgba(0,20,133,0.45),
              0 12px 28px -10px rgba(0,20,133,0.25) !important;
  border: 1px solid rgba(46,77,249,0.12);
}

/* Header — dark navy gradient with astronaut avatar */
#n8n-chat .chat-header,
#n8n-chat .chat-window-header,
#n8n-chat header {
  background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  /* Compact row: avatar (::before) on the left spanning both rows, title
     and subtitle stacked beside it. n8n's default is a tall flex column. */
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 1px;
  position: relative;
  overflow: hidden;
}
#n8n-chat .chat-header > * { grid-column: 2; }
/* Subtle starfield in the header */
#n8n-chat .chat-header::after,
#n8n-chat .chat-window-header::after,
#n8n-chat header::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(1.4px 1.4px at 32% 64%, rgba(255,255,255,0.7),  transparent 50%),
    radial-gradient(1px 1px   at 70% 14%, rgba(255,255,255,0.9),  transparent 50%),
    radial-gradient(1.2px 1.2px at 85% 60%, rgba(255,255,255,0.65), transparent 50%),
    radial-gradient(1px 1px   at 58% 88%, rgba(255,255,255,0.8),  transparent 50%);
  pointer-events: none;
  opacity: 0.55;
}

/* Astronaut avatar in the header — circular badge before the title */
#n8n-chat .chat-header::before,
#n8n-chat .chat-window-header::before,
#n8n-chat header::before {
  content: '';
  display: block;
  width: 36px; height: 36px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.96);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='54' r='40' fill='%23FFFFFF' stroke='rgba(0,20,133,0.2)' stroke-width='1.5'/><ellipse cx='36' cy='24' rx='13' ry='5.5' fill='%23FFFFFF'/><ellipse cx='50' cy='52' rx='30' ry='26' fill='%2306091A'/><ellipse cx='50' cy='51' rx='27' ry='23.5' fill='%230A1024'/><path d='M 26 41 Q 50 33 74 41' stroke='rgba(126,154,255,0.25)' stroke-width='1.5' fill='none'/><rect x='32' y='42' width='13' height='18' rx='6.5' fill='%233E9DFF' opacity='0.55'/><rect x='55' y='42' width='13' height='18' rx='6.5' fill='%233E9DFF' opacity='0.55'/><rect x='34' y='44' width='9' height='14' rx='4.5' fill='%237DD3FF'/><rect x='57' y='44' width='9' height='14' rx='4.5' fill='%237DD3FF'/><rect x='35.5' y='45.5' width='6' height='11' rx='3' fill='%23D6F0FF'/><rect x='58.5' y='45.5' width='6' height='11' rx='3' fill='%23D6F0FF'/><ellipse cx='37' cy='48' rx='1.6' ry='2.4' fill='%23FFFFFF'/><ellipse cx='60' cy='48' rx='1.6' ry='2.4' fill='%23FFFFFF'/></svg>");
  background-size: 86%;
  background-position: center;
  background-repeat: no-repeat;
  flex: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25),
              0 0 0 3px rgba(255,255,255,0.15);
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
}

/* Header title + subtitle */
#n8n-chat .chat-heading,
#n8n-chat .chat-window-heading {
  position: relative;
  z-index: 1;
  flex: 1;
}
#n8n-chat .chat-heading h1,
#n8n-chat .chat-window-header h1,
#n8n-chat header h1 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 2px !important;
  letter-spacing: -0.01em;
  color: #ffffff !important;
}
#n8n-chat .chat-header p,
#n8n-chat .chat-heading p,
#n8n-chat .chat-window-header p,
#n8n-chat header p {
  font-size: 12px !important;
  opacity: 0.92;
  margin: 0 !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.35;
}

/* Close button on header */
#n8n-chat .chat-close-button,
#n8n-chat [class*="close-button"] {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  position: relative;
  z-index: 1;
  transition: background 200ms ease;
}
#n8n-chat .chat-close-button:hover,
#n8n-chat [class*="close-button"]:hover {
  background: rgba(255,255,255,0.22) !important;
}

/* Body — light blue */
#n8n-chat .chat-body,
#n8n-chat .chat-messages-list,
#n8n-chat .chat-messages,
#n8n-chat [class*="messages"] {
  background: #E8F1FF !important;
  padding: 18px 16px !important;
}

/* Bot bubble */
#n8n-chat .chat-message-from-bot,
#n8n-chat .chat-message.bot,
#n8n-chat [class*="message-bot"],
#n8n-chat [class*="chat-message"][class*="bot"] {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-radius: 16px 16px 16px 6px !important;
  border: 1px solid rgba(46,77,249,0.10) !important;
  box-shadow: 0 4px 14px -4px rgba(0,20,133,0.12) !important;
  padding: 12px 16px !important;
}

/* User bubble */
#n8n-chat .chat-message-from-user,
#n8n-chat .chat-message.user,
#n8n-chat [class*="message-user"],
#n8n-chat [class*="chat-message"][class*="user"] {
  background: linear-gradient(225deg, #2E4DF9, #001485) !important;
  color: #ffffff !important;
  border-radius: 16px 16px 6px 16px !important;
  box-shadow: 0 4px 14px -4px rgba(46,77,249,0.45) !important;
  padding: 12px 16px !important;
}

/* Input area */
#n8n-chat .chat-input,
#n8n-chat .chat-input-wrapper,
#n8n-chat [class*="input-wrapper"],
#n8n-chat footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(0,20,133,0.08) !important;
  padding: 14px 14px !important;
}
#n8n-chat .chat-input textarea,
#n8n-chat textarea {
  background: #F5F7FB !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
#n8n-chat .chat-input textarea:focus,
#n8n-chat textarea:focus {
  outline: none !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(46,77,249,0.18) !important;
}
#n8n-chat .chat-input-send-button,
#n8n-chat .chat-inputs-controls button,
#n8n-chat button[class*="send"] {
  background: linear-gradient(225deg, #2E4DF9, #001485) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  box-shadow: 0 6px 16px -4px rgba(46,77,249,0.55) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}
#n8n-chat .chat-input-send-button:hover,
#n8n-chat button[class*="send"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px -4px rgba(46,77,249,0.65) !important;
}

/* DARK MODE — restyle chat surfaces */
[data-theme="dark"] #n8n-chat .chat-body,
[data-theme="dark"] #n8n-chat .chat-messages-list,
[data-theme="dark"] #n8n-chat .chat-messages,
[data-theme="dark"] #n8n-chat [class*="messages"] {
  background: var(--surface) !important;
}
[data-theme="dark"] #n8n-chat .chat-message-from-bot,
[data-theme="dark"] #n8n-chat .chat-message.bot,
[data-theme="dark"] #n8n-chat [class*="message-bot"] {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] #n8n-chat .chat-input,
[data-theme="dark"] #n8n-chat .chat-input-wrapper,
[data-theme="dark"] #n8n-chat [class*="input-wrapper"],
[data-theme="dark"] #n8n-chat .chat-inputs,
[data-theme="dark"] #n8n-chat .chat-footer,
[data-theme="dark"] #n8n-chat footer {
  background: var(--bg-soft) !important;
  border-top-color: var(--line) !important;
}
[data-theme="dark"] #n8n-chat .chat-input textarea,
[data-theme="dark"] #n8n-chat textarea {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line-strong) !important;
}
[data-theme="dark"] #n8n-chat .chat-window {
  border-color: var(--line) !important;
}

/* ===== MATRIX: reusable modifier — suppress the column pill =====
   .col-premium / .col-hybrid inject a "Most popular" / "Alt. model" pill via
   ::after. Add .no-pill when reusing the matrix component on a page where that
   label does not apply (e.g. the compliance audit vs programme comparison). */
.matrix--v2 thead th.col-premium.no-pill::after,
.matrix--v2 thead th.col-hybrid.no-pill::after { content: none; }

/* ===== INTRO BAND: kicker was only styled inside .section-head =====
   .intro-band is used as a standalone section on inner pages and carries its
   own .kicker, which previously rendered unstyled. Same treatment as the
   .section-head kicker so the eyebrow reads consistently across the site. */
.intro-band .kicker {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); font-weight: 600; margin-bottom: 14px;
}

/* ============================================================
   CALCULATOR COMPONENT  (.calc-*)
   ------------------------------------------------------------
   Reusable interactive-tool layout. Currently used by
   downtime-cost-calculator.html, built to be reused by any future
   calculator / assessment tool under Insights → Tools.

   Structure (maps 1:1 to a Gutenberg block group on migration):
     .calc-shell
       form.calc-panel            → the inputs
         .calc-fieldset           → one logical group of inputs
           .calc-fieldset-head    → icon + heading + sub
           .calc-field            → label + control + hint
       aside.calc-results         → sticky results panel
         .calc-headline           → the single big number
         .calc-tiles > .calc-tile → supporting figures

   Uses only existing :root tokens. No new design tokens.
   ============================================================ */

.calc-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 1080px) {
  .calc-shell { grid-template-columns: 1fr; }
}

/* ----- Panels ----- */
.calc-panel,
.calc-results {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 60px -40px rgba(0,20,133,0.28);
}
.calc-panel { padding: 8px 34px 34px; }
@media (max-width: 720px) {
  .calc-panel { padding: 4px 22px 26px; }
}

/* ----- Fieldsets ----- */
.calc-fieldset {
  border: 0;
  margin: 0;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.calc-fieldset:last-of-type { border-bottom: 0; padding-bottom: 8px; }
.calc-fieldset-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
.calc-fieldset-ico {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
}
.calc-fieldset-ico svg { width: 17px; height: 17px; }
.calc-fieldset-head legend,
.calc-fieldset-head .calc-legend {
  padding: 0;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.calc-fieldset-head .calc-legend-sub {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  line-height: 1.5;
}

/* ----- Fields ----- */
.calc-field { margin-top: 22px; }
.calc-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 620px) {
  .calc-row { grid-template-columns: 1fr; }
}
.calc-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 8px;
}
.calc-hint {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ----- Controls ----- */
.calc-control {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  padding: 13px 15px;
  outline: none;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.calc-control:hover { border-color: rgba(46,77,249,0.35); }
.calc-control:focus-visible,
.calc-control:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(46,77,249,0.14);
}
.calc-control::placeholder { color: var(--muted); font-weight: 400; }
select.calc-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6477' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.calc-control.is-invalid {
  border-color: #C0392B;
  background: rgba(192,57,43,0.05);
  box-shadow: 0 0 0 4px rgba(192,57,43,0.10);
}

/* Prefix for currency inputs */
.calc-prefixed { position: relative; }
.calc-prefixed .calc-prefix {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}
.calc-prefixed .calc-control { padding-left: 32px; }

/* ----- Range ----- */
.calc-range-wrap { display: flex; align-items: center; gap: 18px; }
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line-strong);
  outline: none;
  cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,20,133,0.35);
  cursor: grab !important;
  transition: transform 160ms ease;
}
.calc-range::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing !important; }
.calc-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,20,133,0.35);
  cursor: grab !important;
}
.calc-range:focus-visible { box-shadow: 0 0 0 4px rgba(46,77,249,0.16); }
.calc-range-value {
  flex: none;
  min-width: 74px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  background: var(--blue-soft);
  border: 1px solid rgba(46,77,249,0.20);
  border-radius: 10px;
  padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}

/* ----- Actions ----- */
.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.calc-error {
  margin: 14px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #C0392B;
}
.calc-error[hidden] { display: none; }

/* ----- Results panel ----- */
.calc-results { padding: 30px; }
/* Only pin the panel when the viewport is genuinely tall enough to hold it,
   otherwise the bottom tiles become unreachable while it is stuck. */
@media (min-width: 1081px) and (min-height: 1000px) {
  .calc-results { position: sticky; top: 100px; }
}
.calc-results-kicker {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 18px;
}
.calc-empty {
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  padding: 30px 24px;
  text-align: center;
}
.calc-empty-ico {
  width: 42px; height: 42px;
  margin: 0 auto 14px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
}
.calc-empty-ico svg { width: 20px; height: 20px; }
.calc-empty p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }

.calc-headline {
  border-radius: 16px;
  padding: 26px 24px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--blue-darker) 100%);
  color: #fff;
}
.calc-headline .calc-headline-lab {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.66);
}
.calc-headline .calc-headline-num {
  margin-top: 10px;
  font-size: clamp(34px, 4.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc-headline .calc-headline-sub {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
}

.calc-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 480px) {
  .calc-tiles { grid-template-columns: 1fr; }
}
.calc-tile {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 15px;
}
.calc-tile--wide { grid-column: 1 / -1; }
.calc-tile-lab {
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.35;
}
.calc-tile-num {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.calc-tile-num small {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--blue);
}
.calc-results-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* ----- Methodology list ----- */
.calc-method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 860px) {
  .calc-method { grid-template-columns: 1fr; }
}
.calc-method li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}
.calc-method h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.calc-method p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.calc-method code {
  display: inline-block;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid rgba(46,77,249,0.18);
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1.5;
}

/* ----- Disclaimer ----- */
.calc-disclaimer {
  margin-top: 26px;
  border-left: 3px solid var(--blue);
  background: var(--bg-soft);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}
.calc-disclaimer strong { color: var(--ink); }

/* ----- Dark theme ----- */
[data-theme="dark"] .calc-panel,
[data-theme="dark"] .calc-results,
[data-theme="dark"] .calc-method li {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,0.72);
}
[data-theme="dark"] .calc-control {
  background-color: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink);
}
[data-theme="dark"] .calc-control:focus,
[data-theme="dark"] .calc-control:focus-visible {
  background-color: var(--surface-3);
  border-color: var(--blue);
}
[data-theme="dark"] select.calc-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3C5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* the generic [data-theme="dark"] select rule uses the background shorthand,
     which resets repeat/position; restore them or the arrow tiles */
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
[data-theme="dark"] .calc-tile,
[data-theme="dark"] .calc-disclaimer { background: var(--surface-2); border-color: var(--line); }
[data-theme="dark"] .calc-range { background: var(--line-strong); }
[data-theme="dark"] .calc-range::-webkit-slider-thumb { border-color: var(--surface); }
[data-theme="dark"] .calc-range::-moz-range-thumb { border-color: var(--surface); }
[data-theme="dark"] .calc-headline {
  background: linear-gradient(150deg, #222E68 0%, #0E1533 100%);
  border: 1px solid var(--line-strong);
}
[data-theme="dark"] .calc-empty { border-color: var(--line-strong); }
[data-theme="dark"] .calc-error { color: #FF8A7A; }
[data-theme="dark"] .calc-control.is-invalid {
  border-color: #FF8A7A;
  background: rgba(255,138,122,0.08);
  box-shadow: 0 0 0 4px rgba(255,138,122,0.12);
}

/* ===================================================================
   Long-form content: blog articles, case studies, legal, knowledge base
   =================================================================== */
.prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--ink);
}
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 56px 0 16px;
}
.prose h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--blue); }
.prose h3 {
  font-size: 21px;
  line-height: 1.3;
  color: var(--navy);
  margin: 36px 0 10px;
}
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--blue); }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--blue-hover); }
.prose strong { color: var(--navy); }
.prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--blue);
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  line-height: 1.4;
  color: var(--navy);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 28px;
  font-size: 15.5px;
  line-height: 1.5;
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.prose th { background: var(--bg-soft); color: var(--navy); font-weight: 600; }
.prose .table-wrap { overflow-x: auto; margin: 8px 0 28px; }
.prose .table-wrap table { margin: 0; min-width: 520px; }
.prose code {
  font-size: 0.9em;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }

/* Highlighted aside: key takeaway, tip, warning */
.callout {
  margin: 32px 0;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--blue-soft);
  border: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.65;
}
.callout > :last-child { margin-bottom: 0; }
.callout-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

/* Article byline / date strip in the page hero */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  font-size: 14.5px;
  color: var(--muted);
}
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta strong { color: var(--ink); font-weight: 600; }
/* In the (blue, centred) page hero the meta line follows the lede */
.hero .article-meta { justify-content: center; color: rgba(255,255,255,0.78); }
.hero .article-meta strong { color: #fff; }

/* Blog posts: FAQ heading sits on the same 760px reading column as the
   article and the accordion below it */
.section-head.article-col { max-width: 760px; margin-left: auto; margin-right: auto; }

/* "Keep reading" block at the foot of articles: heading lines up with
   the full-width card row beneath it */
.related-head { margin: 0 0 28px; }

/* Blog listing: extra meta line on insight cards */
.insight .meta { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
/* Insight cards: "Read article" pinned to the bottom so it lines up
   across a row even when titles wrap to different lengths */
.insight { display: flex; flex-direction: column; }
.insight .body { flex: 1; display: flex; flex-direction: column; }
.insight .read { margin-top: auto; align-self: flex-start; }

/* Draft-only marker for facts awaiting confirmation. Visible on purpose
   so nothing unconfirmed can slip through to production unnoticed. */
mark.confirm {
  background: #FFF3BF;
  color: #5C4400;
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}
[data-theme="dark"] mark.confirm { background: rgba(255, 214, 102, 0.22); color: #FFE08A; }

/* ===== Team ===== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }
.person-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
}
.person-head { display: flex; align-items: center; gap: 18px; }
.person-avatar {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(225deg, #001485, #2E4DF9);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow: hidden;
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-name { margin: 0; font-size: 22px; color: var(--navy); line-height: 1.2; }
.person-role { display: block; margin-top: 4px; font-size: 14.5px; color: var(--blue); font-weight: 600; }
.person-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.person-links { display: flex; gap: 16px; margin-top: auto; font-size: 14.5px; font-weight: 600; }
.person-links a { color: var(--blue); }
[data-theme="dark"] .person-card { background: var(--surface); }

/* Risk tiles used as links (404 page, knowledge base category grid) */
a.risk-tile { display: block; color: inherit; text-decoration: none; transition: border-color 200ms ease, transform 200ms ease; }
a.risk-tile:hover { border-color: var(--blue); transform: translateY(-2px); }

/* ===================================================================
   Ticket email anatomy (existing-client.html #your-ticket)
   Mirrors the Autotask "ticket created" notification template: blue
   header, left-accent field rows, portal button, history panel. The
   email card keeps its light palette in dark mode, like the real email.
   =================================================================== */
.tk-layout {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}
@media (max-width: 1000px) { .tk-layout { grid-template-columns: 1fr; gap: 36px; } }

.tk-mock {
  background: #eef0f4;
  border-radius: 16px;
  padding: 6px 16px 22px;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  color: #2b2e36;
}
.tk-replyline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 0; font-size: 11px; color: #33363e;
}
.tk-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(20, 30, 70, 0.10);
}
.tk-head { background: #2E4DF9; padding: 22px 28px 26px; text-align: center; }
.tk-logo { height: 38px; width: auto; margin: 0 auto 14px; filter: brightness(0) invert(1); }
.tk-eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #b9c4ff; padding-bottom: 6px; }
.tk-num {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 24px; font-weight: bold; color: #fff; line-height: 1.25;
}
.tk-num .tk-pin { background: #fff; color: #2E4DF9; }
.tk-sub { font-size: 15px; color: #dbe1ff; padding-top: 6px; line-height: 1.4; }

.tk-body { padding: 26px 28px 8px; }
.tk-body p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: #2b2e36; }
.tk-fields { position: relative; display: grid; gap: 6px; margin: 4px 0 18px; }
.tk-field {
  background: #f3f5fb;
  border: 1px solid #dfe3f0;
  border-left: 4px solid #2E4DF9;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 13px; line-height: 1.5; color: #2b2e36;
}
.tk-label { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #33363e; }
.tk-cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 14px; }
.tk-btn {
  display: inline-block; background: #2E4DF9; color: #fff; border-radius: 6px;
  padding: 12px 30px; font-size: 14px; font-weight: bold;
}
.tk-body .tk-small { text-align: center; }
.tk-small { font-size: 12px; color: #33363e; }

.tk-hist { background: #f7f8fb; border-top: 1px solid #e2e5ee; padding: 20px 28px 24px; }
.tk-hist-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; color: #33363e;
}
.tk-hist-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.tk-hist-head .tk-small { font-weight: normal; letter-spacing: 0; text-transform: none; font-size: 11px; }
.tk-hist-note {
  margin-top: 10px; background: #fff; border: 1px solid #e2e5ee; border-radius: 6px;
  padding: 14px 16px; font-size: 12px; line-height: 1.65; color: #3a3f4a;
}
.tk-hist-foot { padding-top: 10px; font-size: 11px; color: #3a3f4a; }

/* Numbered markers, shared by the mock and the legend */
.tk-pin {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #2E4DF9; color: #fff;
  font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 700; line-height: 1;
  letter-spacing: 0; text-transform: none;
  box-shadow: 0 0 0 3px rgba(46, 77, 249, 0.18);
}
.tk-pin--side { position: absolute; top: -10px; right: -10px; z-index: 1; }

.tk-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
@media (min-width: 1001px) { .tk-legend { position: sticky; top: 110px; } }
.tk-legend li { display: flex; gap: 16px; align-items: flex-start; }
.tk-legend .tk-pin { width: 32px; height: 32px; font-size: 14px; }
.tk-legend h3 { margin: 3px 0 6px; font-size: 18px; color: var(--navy); line-height: 1.3; }
.tk-legend p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.tk-foot { margin: 40px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.tk-foot a { color: var(--blue); font-weight: 600; white-space: nowrap; }

@media (max-width: 560px) {
  .tk-mock { padding: 4px 8px 14px; margin: 0 -4px; }
  .tk-head, .tk-body, .tk-hist { padding-left: 18px; padding-right: 18px; }
  .tk-num { font-size: 19px; }
  .tk-btn { padding: 12px 20px; }
}

[data-theme="dark"] .tk-mock { background: #1b2140; }
[data-theme="dark"] .tk-replyline { color: #b9c4ff; }

/* ===================================================================
   SOC console (security-operations-centre.html #inside-the-soc)
   Illustrative analyst dashboard in HTML/SVG. Always a dark console,
   sitting on the blue section.dark gradient. Severity colours:
   b = blocked/info blue, a = amber, r = red, g = green, m = muted.
   =================================================================== */
.soc-sec .section-head .kicker { color: #b9c4ff; }
.soc-console {
  --c-bg: #070d24; --c-panel: #0c1433; --c-line: rgba(143, 162, 255, 0.14);
  --c-text: #e6eaff; --c-muted: #8791b8;
  --c-b: #6f86ff; --c-a: #f5a524; --c-r: #ff5d5d; --c-g: #2fd589; --c-v: #a78bfa; --c-m: #8791b8;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 8, 60, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
}
.soc-t--b { color: var(--c-b); } .soc-t--a { color: var(--c-a); } .soc-t--r { color: var(--c-r); }
.soc-t--g { color: var(--c-g); } .soc-t--v { color: var(--c-v); } .soc-t--m { color: var(--c-m); }
.soc-muted { color: var(--c-muted); }
.soc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* Top bar */
.soc-top {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px; border-bottom: 1px solid var(--c-line);
}
.soc-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.soc-brand img { height: 22px; width: auto; filter: brightness(0) invert(1); }
.soc-brand span { font-size: 13px; font-weight: 600; color: var(--c-muted); padding-left: 12px; border-left: 1px solid var(--c-line); }
.soc-search {
  display: flex; align-items: center; gap: 8px; width: 260px;
  padding: 7px 12px; border: 1px solid var(--c-line); border-radius: 8px; color: var(--c-muted);
}
.soc-search svg { width: 14px; height: 14px; }
.soc-live { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.soc-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--c-g); box-shadow: 0 0 0 0 rgba(47, 213, 137, .6); animation: socPulse 2s infinite; }
@keyframes socPulse { 70% { box-shadow: 0 0 0 8px rgba(47, 213, 137, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 213, 137, 0); } }
.soc-shift { display: flex; align-items: center; gap: 10px; color: var(--c-muted); white-space: nowrap; }
.soc-avatars { display: flex; }
.soc-avatars i {
  display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%;
  background: linear-gradient(225deg, #001485, #2E4DF9); border: 2px solid var(--c-bg);
  font-style: normal; font-size: 9px; font-weight: 700; color: #fff;
}
.soc-avatars i:first-child { margin-left: 0; }

/* Body */
.soc-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.soc-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px; border-right: 1px solid var(--c-line); color: var(--c-muted);
}
.soc-nav > span { padding: 7px 10px; border-radius: 7px; display: flex; justify-content: space-between; align-items: center; }
.soc-nav .is-on { background: rgba(111, 134, 255, 0.14); color: #fff; font-weight: 600; }
.soc-nav .soc-nav-h { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 14px 10px 6px; opacity: .7; }
.soc-nav .soc-nav-h:first-child { padding-top: 2px; }
.soc-nav b { background: var(--c-a); color: #1a1200; font-size: 10px; padding: 1px 7px; border-radius: 999px; }
.soc-nav-foot { margin-top: auto; padding: 12px 10px 2px; display: flex; align-items: center; gap: 8px; font-size: 11px; }
.soc-main { padding: 16px; display: grid; gap: 14px; min-width: 0; }

/* KPI tiles */
.soc-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.soc-kpi {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.soc-kpi-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.soc-kpi-ico svg { width: 16px; height: 16px; display: block; }
.soc-kpi-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-kpi-num { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin-top: 2px; }
.soc-kpi-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--c-muted); white-space: nowrap; overflow: hidden; }
.soc-kpi-meta .soc-dot { width: 6px; height: 6px; }
.soc-spark { width: 100%; height: 30px; margin-top: 4px; display: block; }

/* Panels */
.soc-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; }
.soc-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.soc-panel { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.soc-panel-h {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px;
}
.soc-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--c-muted); font-size: 11px; }
.soc-legend i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-left: 8px; }
.soc-legend i:first-child { margin-left: 0; }

/* Map */
.soc-map-art { position: relative; aspect-ratio: 1000 / 367; }
.soc-map-art img, .soc-map-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.soc-map-art img { opacity: .5; }
.soc-map { display: flex; flex-direction: column; }
.soc-map-art { margin: auto 0; }
.soc-arc-base { fill: none; stroke-width: 1; opacity: .22; }
.soc-map-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.soc-map-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.soc-map-stats b { font-size: 16px; color: #fff; white-space: nowrap; }
.soc-map-stats span { font-size: 10.5px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-arc { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 18 82; opacity: .9; animation: socArc 4.8s linear infinite; animation-delay: calc(var(--i) * -0.55s); }
.soc-arc--b { stroke: var(--c-b); } .soc-arc--a { stroke: var(--c-a); } .soc-arc--r { stroke: var(--c-r); }
@keyframes socArc { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.soc-src { fill: currentColor; }
.soc-site { fill: var(--c-g); }
.soc-site-ring { fill: none; stroke: var(--c-g); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: socRing 2.4s ease-out infinite; animation-delay: calc(var(--i) * 0.4s); }
@keyframes socRing { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }

/* Alert queue */
.soc-queue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.soc-alert { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--c-line); }
.soc-alert:last-child { border-bottom: 0; }
.soc-alert-ico { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.soc-alert-ico svg { width: 15px; height: 15px; }
.soc-bg--r { background: rgba(255, 93, 93, .15); color: var(--c-r); }
.soc-bg--a { background: rgba(245, 165, 36, .15); color: var(--c-a); }
.soc-bg--b { background: rgba(111, 134, 255, .15); color: var(--c-b); }
.soc-bg--g { background: rgba(47, 213, 137, .13); color: var(--c-g); }
.soc-alert-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.soc-alert-main strong { font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-alert-main span { color: var(--c-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-alert-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 11px; white-space: nowrap; }
.soc-sev { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.soc-sev .soc-dot { width: 6px; height: 6px; }
.soc-status { color: var(--c-text); }
.soc-status .soc-muted { font-size: 10.5px; }

/* Telemetry chart */
.soc-area { width: 100%; height: 120px; display: block; }
.soc-gridlines { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.soc-axis { display: flex; justify-content: space-between; color: var(--c-muted); font-size: 10px; margin-top: 6px; }

/* Triage funnel */
.soc-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.soc-funnel li {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; overflow: hidden; isolation: isolate;
  background: rgba(255, 255, 255, .03);
}
.soc-funnel li::before {
  content: ""; position: absolute; inset: 0; width: var(--w); z-index: -1; border-radius: 8px;
  background: linear-gradient(90deg, rgba(111, 134, 255, .42), rgba(111, 134, 255, .14));
}
.soc-funnel li span { color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-funnel b { color: #fff; font-size: 13px; }
.soc-funnel li.is-hot::before { background: linear-gradient(90deg, rgba(245, 165, 36, .55), rgba(245, 165, 36, .16)); }
.soc-funnel li.is-hot b { color: var(--c-a); }

/* Endpoint health */
.soc-health-body { display: flex; align-items: center; gap: 16px; }
.soc-donut { position: relative; width: 116px; flex: 0 0 116px; }
.soc-donut svg { width: 100%; display: block; }
.soc-donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.soc-donut-c b { font-size: 18px; color: #fff; }
.soc-donut-c span { font-size: 10px; color: var(--c-muted); }
.soc-health-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1 1 auto; min-width: 0; }
.soc-health-l li { display: flex; align-items: center; gap: 8px; color: var(--c-muted); }
.soc-health-l i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.soc-health-l b { margin-left: auto; color: var(--c-text); font-weight: 600; }

.soc-caption { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, 0.66); }

/* Responsive */
@media (max-width: 1180px) {
  .soc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soc-search { display: none; }
}
@media (max-width: 1000px) {
  .soc-body { grid-template-columns: 1fr; }
  .soc-nav { display: none; }
  .soc-row, .soc-row--3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .soc-top { flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; }
  .soc-brand { width: 100%; }
  .soc-shift { margin-left: auto; }
  .soc-main { padding: 10px; gap: 10px; }
  .soc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .soc-kpi-num { font-size: 19px; }
  .soc-alert:nth-child(n+5) { display: none; }
  .soc-map-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .soc-arc { animation: none; stroke-dasharray: none; opacity: .5; }
  .soc-site-ring, .soc-pulse { animation: none; }
}

/* ===================================================================
   SIEM dashboard (managed-siem.html #siem-dashboard)
   Unbranded, Grafana-style dashboard over Wazuh/Graylog-type data,
   matching the look of the SIEM stack we run. Always dark, sitting on
   the blue section.dark gradient. Panel colours use the Grafana
   classic palette (set inline from the generator).
   =================================================================== */
.sd-sec .section-head .kicker { color: #b9c4ff; }
.sd-dash {
  --d-bg: #111217; --d-panel: #181b1f; --d-line: rgba(204, 204, 220, 0.12);
  --d-text: #ccccdc; --d-muted: #8e8ea0; --d-strong: #f0f0f5;
  background: var(--d-bg);
  color: var(--d-text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 40px 90px -30px rgba(0, 8, 60, 0.75);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
}
.sd-dash code { font-family: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace; }

/* Top bar + variables */
.sd-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--d-line); }
.sd-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; color: var(--d-muted); font-size: 13px; }
.sd-crumb strong { color: var(--d-strong); font-weight: 600; }
.sd-crumb-ico svg { width: 16px; height: 16px; display: block; }
.sd-sep { opacity: .5; }
.sd-tools { display: flex; gap: 6px; }
.sd-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  border: 1px solid var(--d-line); border-radius: 4px; background: rgba(204, 204, 220, 0.04); white-space: nowrap;
}
.sd-btn svg { width: 13px; height: 13px; }
.sd-btn--icon { padding: 5px 7px; }
.sd-vars { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--d-line); }
.sd-var { display: inline-flex; border: 1px solid var(--d-line); border-radius: 4px; overflow: hidden; }
.sd-var b { font-weight: 500; color: #6e9fff; background: rgba(204, 204, 220, 0.06); padding: 5px 9px; border-right: 1px solid var(--d-line); }
.sd-var > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: var(--d-strong); }
.sd-var svg { width: 12px; height: 12px; color: var(--d-muted); }

/* Panel grid (24-column, like Grafana) */
.sd-grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.sd-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sd-bars { grid-column: span 16; }
.sd-levels { grid-column: span 8; }
.sd-incident { grid-column: span 14; }
.sd-mitre { grid-column: span 10; }
.sd-rules { grid-column: span 13; }
.sd-logs { grid-column: span 11; }

.sd-panel { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 4px; padding: 10px 12px 12px; min-width: 0; position: relative; }
.sd-ph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 500; color: var(--d-strong); margin-bottom: 10px; }
.sd-ph-sub { color: var(--d-muted); font-weight: 400; }

/* Stat panels */
.sd-stat { padding-bottom: 0; overflow: hidden; min-height: 92px; }
.sd-stat .sd-ph { margin-bottom: 2px; color: var(--d-text); }
.sd-stat-v { position: relative; z-index: 1; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.sd-stat-v small { font-size: 15px; font-weight: 500; margin-left: 1px; }
.sd-stat-bg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44px; }

/* Stacked bars */
.sd-bars-art { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
.sd-bars-art svg { width: 100%; height: 150px; display: block; }
.sd-yaxis { display: flex; flex-direction: column; justify-content: space-between; text-align: right; color: var(--d-muted); font-size: 10px; height: 150px; }
.sd-yaxis span { line-height: 1; }
.sd-gridlines { stroke: var(--d-line); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.sd-xaxis { display: flex; justify-content: space-between; color: var(--d-muted); font-size: 10px; margin: 5px 0 0 40px; }
.sd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; color: var(--d-text); }
.sd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sd-legend i { width: 14px; height: 4px; border-radius: 2px; }

/* Bar gauges */
.sd-gauges { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sd-gauges--tight { gap: 8px; }
.sd-gauges li { display: grid; grid-template-columns: minmax(0, 1fr) 46px; grid-template-areas: "l v" "b v"; column-gap: 10px; row-gap: 4px; align-items: center; }
.sd-g-l { grid-area: l; color: var(--d-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-g-bar { grid-area: b; height: 10px; background: rgba(204, 204, 220, 0.07); border-radius: 2px; overflow: hidden; }
.sd-g-bar span { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), var(--c)); }
.sd-gauges b { grid-area: v; text-align: right; font-size: 16px; font-weight: 600; color: var(--d-strong); }
.sd-gauges--tight li { grid-template-columns: 130px minmax(0, 1fr) 36px; grid-template-areas: "l b v"; }
.sd-gauges--tight b { font-size: 13px; }
.sd-gauges--tight .sd-g-bar { height: 14px; }
.sd-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--d-line); color: var(--d-muted); }
.sd-dot { width: 7px; height: 7px; border-radius: 50%; background: #F2495C; flex: 0 0 auto; }

/* Correlated incident */
.sd-badge { margin-left: auto; font-size: 11px; font-weight: 600; color: #fff; background: #C4162A; padding: 2px 8px; border-radius: 3px; }
.sd-inc-title { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin-bottom: 10px; border-left: 3px solid #F2495C; background: rgba(242, 73, 92, 0.08); border-radius: 0 4px 4px 0; }
.sd-inc-title strong { color: var(--d-strong); font-size: 13.5px; font-weight: 600; }
.sd-inc-title span { color: var(--d-muted); }
.sd-tl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 10px; }
.sd-tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--d-line); }
.sd-tl li { display: flex; gap: 12px; position: relative; }
.sd-tl-dot { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: var(--d-panel); border: 2px solid var(--c); }
.sd-tl-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sd-tl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-tl-top code { color: var(--d-muted); font-size: 11px; }
.sd-tag { font-size: 10.5px; padding: 0 6px; border-radius: 3px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.sd-lvl { font-size: 10.5px; color: var(--d-muted); }
.sd-tl-main strong { color: var(--d-strong); font-weight: 500; }
.sd-tl-main > span { color: var(--d-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sd-tech-h { margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--d-line); color: var(--d-muted); font-size: 11px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--d-line); border-radius: 3px; background: rgba(204, 204, 220, 0.04); color: var(--d-text); }
.sd-chips code { color: #6e9fff; font-size: 11px; }

/* Table */
.sd-table-wrap { overflow: hidden; }
.sd-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sd-table th { text-align: left; font-weight: 500; color: #6e9fff; padding: 6px 8px; border-bottom: 1px solid var(--d-line); white-space: nowrap; }
.sd-table td { padding: 7px 8px; border-bottom: 1px solid var(--d-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-table tbody tr:nth-child(odd) { background: rgba(204, 204, 220, 0.025); }
.sd-table tr:last-child td { border-bottom: 0; }
.sd-table th:nth-child(1) { width: 62px; } .sd-table th:nth-child(2) { width: 50px; }
.sd-table .sd-agent { width: 96px; } .sd-table .sd-num { width: 56px; text-align: right; }
.sd-table td code { color: var(--d-muted); }
.sd-desc { color: var(--d-strong); }
.sd-lvl-cell { display: inline-block; min-width: 26px; text-align: center; font-weight: 600; color: #111217; background: var(--c); border-radius: 3px; padding: 1px 4px; }

/* Log stream */
.sd-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 400; color: #73BF69; }
.sd-pulse { width: 7px; height: 7px; border-radius: 50%; background: #73BF69; animation: sdPulse 1.6s ease-in-out infinite; }
@keyframes sdPulse { 50% { opacity: .25; } }
.sd-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-size: 11px; }
.sd-log li { display: grid; grid-template-columns: 82px 40px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 3px; }
.sd-log li:nth-child(odd) { background: rgba(204, 204, 220, 0.03); }
.sd-log li:first-child { animation: sdFlash 3s ease-out infinite; }
@keyframes sdFlash { 0%, 15% { background: rgba(87, 148, 242, 0.18); } 100% { background: rgba(204, 204, 220, 0.03); } }
.sd-ts { color: var(--d-muted); }
.sd-src { color: var(--c); font-weight: 600; text-transform: uppercase; font-size: 10px; }
.sd-msg { color: var(--d-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sd-caption { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, 0.66); }

/* Responsive */
@media (max-width: 1180px) {
  .sd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-bars, .sd-levels, .sd-incident, .sd-mitre, .sd-rules, .sd-logs { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sd-top { flex-wrap: wrap; }
  .sd-crumb > span:nth-child(-n+4) { display: none; }
  .sd-vars .sd-var:nth-child(n+3) { display: none; }
  .sd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-stat-v { font-size: 24px; }
  .sd-table .sd-agent { display: none; }
  .sd-gauges--tight li { grid-template-columns: 110px minmax(0, 1fr) 32px; }
  .sd-log li { grid-template-columns: 40px minmax(0, 1fr); }
  .sd-log .sd-ts { display: none; }
  .sd-badge { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-pulse, .sd-log li:first-child { animation: none; }
}

/* ===== MATRIX: add-on column + "Recommended" pill =====
   .col-addon marks a column that only exists on top of another tier (e.g.
   Managed ISMS on top of Enterprise). It is styled lighter than the tier it
   depends on, so the tier reads as the primary option. Inside it, .is-inherited
   ticks (already covered by the base tier) are faded and .is-added ticks are
   solid. */
.matrix--v2 thead th.col-premium.pill-recommended::after { content: "Recommended"; }
.matrix--v2 .col-addon {
  background: var(--bg-soft); color: var(--navy);
  border-left: 2px dashed var(--line-strong);
}
.matrix--v2 .col-addon .tier-name-sub { color: var(--muted); }
.matrix--v2 tbody td:last-child:has(.is-inherited),
.matrix--v2 tbody td:last-child:has(.is-added) { border-left: 2px dashed var(--line); }
.matrix--v2 .check.is-inherited { opacity: 0.35; }
.matrix--v2 .check.is-added { background: var(--blue); color: #fff; }
[data-theme="dark"] .matrix--v2 .col-addon { background: rgba(255,255,255,0.04); color: #fff; }
[data-theme="dark"] .matrix--v2 thead th.col-premium.pill-recommended {
  background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%); color: #fff;
}

/* ===== DARK: icons coloured with --blue-deep =====
   --blue-deep stays #001485 in dark mode, so icons using it as their stroke
   colour vanish on dark cards. Match the .cap-ico convention (--blue, which
   brightens in dark) for every icon chip that used --blue-deep. */
[data-theme="dark"] .alc-card-ico,
[data-theme="dark"] .alc-feature-ico,
[data-theme="dark"] .status-card-ico,
[data-theme="dark"] .rs-step-ico,
[data-theme="dark"] .rs-alt-ico { color: var(--blue); }
[data-theme="dark"] .alc-card:hover .alc-card-ico,
[data-theme="dark"] .rs-alt-card:hover .rs-alt-ico { color: #fff; }
[data-theme="dark"] .rs-step-num { color: rgba(79,107,251,0.32); }
[data-theme="dark"] .alc-more {
  background: linear-gradient(135deg, rgba(79,107,251,0.10), rgba(79,107,251,0.03)), var(--surface);
  border-color: rgba(79,107,251,0.36);
}
[data-theme="dark"] .alc-card-list li::before {
  background: rgba(79,107,251,0.14);
  border-color: rgba(79,107,251,0.45);
}

/* ===== LOGO STRIP on light sections =====
   .logo-strip was built for the blue homepage hero and forces logos white.
   When it is reused inside a normal .block section (About page), render the
   logos dark in light mode and keep them white in dark mode. */
.block .logo-strip { border-top: 0; margin-top: 24px; padding-top: 0; }
.block .logo-row .lg img { filter: brightness(0); opacity: 0.55; }
.block .logo-row .lg:hover img { opacity: 0.9; }
[data-theme="dark"] .block .logo-row .lg img { filter: brightness(0) invert(1); opacity: 0.68; }
[data-theme="dark"] .block .logo-row .lg:hover img { opacity: 1; }

/* ===== DARK: CTA band primary button hover =====
   The white button's hover used --blue-soft, which is a translucent tint in
   dark mode, so the fill vanished on the blue band. Pin the light value. */
[data-theme="dark"] .cta-band .btn.btn-primary { background: #fff; color: var(--blue-deep); }
[data-theme="dark"] .cta-band .btn.btn-primary:hover { background: #EEF1FF; color: var(--blue-deep); }

/* ===== DARK: threat-intel page components =====
   news.js renders cards as .card (not .news-card, which the older dark
   overrides targeted), and the page's inline <style> hardcodes #fff on the
   filter bar, inputs, CVSS dial and source pills. */
[data-theme="dark"] .grid-cards .card,
[data-theme="dark"] .cve-card,
[data-theme="dark"] .cvss-dial-inner,
[data-theme="dark"] .source-pill { background: var(--surface); }
[data-theme="dark"] .filter-bar { background: rgba(8,13,28,0.94); }
[data-theme="dark"] .filter-search input,
[data-theme="dark"] .filter-select { background-color: var(--surface-2); border-color: var(--line-strong); }
[data-theme="dark"] .card-lolrmm-label { color: #C4B5FD; }
[data-theme="dark"] .strip-lolrmm .kicker,
[data-theme="dark"] .strip-lolrmm .strip-head h2 em,
[data-theme="dark"] .strip-lolrmm .strip-head a[href^="https://lolrmm.io"] { color: #A78BFA; }

/* ===== Form consent checkbox (book-an-audit) ===== */
.consent-field {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
  cursor: pointer;
}
.consent-field input {
  flex: none; width: 17px; height: 17px; margin: 2px 0 0;
  accent-color: var(--blue); cursor: pointer;
}
.consent-field a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ===== Book-an-audit form + trust column ===== */
.audit-join {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px;
  align-items: start; text-align: left; max-width: none;
}
/* Trust column follows the visitor while they scroll through the form. */
@media (min-width: 881px) {
  .audit-aside { position: sticky; top: 100px; }
}
@media (max-width: 880px) {
  .audit-join { grid-template-columns: 1fr; gap: 32px; }
}
/* Contact panel uses the final-cta .panel rows (white text), so give it the
   brand gradient card it expects instead of the white form card behind it. */
.audit-aside .panel {
  background: linear-gradient(225deg, #001485 0%, #2E4DF9 100%);
  color: #fff;
  border-radius: 18px;
  padding: 24px 26px;
}

/* ===== Enquiry form submit (book-an-audit) ===== */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-turnstile:empty { display: none; }
.enquiry-status {
  margin: 0; padding: 12px 14px; border-radius: 10px;
  font-size: 14px; line-height: 1.5; border: 1px solid var(--line);
}
.enquiry-status.is-pending { color: var(--muted); background: var(--bg-soft); }
.enquiry-status.is-ok { color: #0F6B3A; background: #E8F7EE; border-color: #B9E6CB; }
.enquiry-status.is-error { color: #9B1C1C; background: #FDECEC; border-color: #F5C2C2; }
[data-theme="dark"] .enquiry-status.is-ok { color: #6EE3A4; background: rgba(78,210,140,0.12); border-color: rgba(78,210,140,0.3); }
[data-theme="dark"] .enquiry-status.is-error { color: #FCA5A5; background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.3); }

#audit-form[hidden] { display: none; }
/* Confirmation panel that replaces the form after a successful send */
.enquiry-done {
  max-width: 560px; margin-top: 8px;
  padding: 28px 28px 24px; border-radius: 18px;
  background: #E8F7EE; border: 1px solid #B9E6CB; color: #0F6B3A;
  animation: enquiryDoneIn 520ms cubic-bezier(.16,1,.3,1) both;
}
.enquiry-done:focus { outline: none; }
.enquiry-done-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #2F7D5C; color: #fff; margin-bottom: 14px;
}
.enquiry-done-ico svg { width: 24px; height: 24px; }
.enquiry-done h3 { margin: 0 0 6px; font-size: 22px; color: #0F6B3A; }
.enquiry-done p { margin: 0; font-size: 15px; line-height: 1.55; color: #1E4D35; }
.enquiry-done-meta {
  margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid #B9E6CB;
  display: grid; gap: 8px;
}
.enquiry-done-meta div { display: flex; gap: 12px; font-size: 14px; }
.enquiry-done-meta dt { flex: 0 0 120px; color: #2F7D5C; font-weight: 600; }
.enquiry-done-meta dd { margin: 0; color: #1E4D35; word-break: break-word; }
.enquiry-done p.enquiry-done-help { margin-top: 16px; font-size: 14px; }
.enquiry-done-help a { color: #0F6B3A; font-weight: 600; }
@keyframes enquiryDoneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .enquiry-done { animation: none; } }
[data-theme="dark"] .enquiry-done { background: rgba(78,210,140,0.10); border-color: rgba(78,210,140,0.3); color: #6EE3A4; }
[data-theme="dark"] .enquiry-done-ico { background: #4ED28C; color: #0B1220; }
[data-theme="dark"] .enquiry-done h3,
[data-theme="dark"] .enquiry-done-help a { color: #6EE3A4; }
[data-theme="dark"] .enquiry-done p,
[data-theme="dark"] .enquiry-done-meta dd { color: var(--ink); }
[data-theme="dark"] .enquiry-done-meta { border-top-color: rgba(78,210,140,0.3); }
[data-theme="dark"] .enquiry-done-meta dt { color: #6EE3A4; }

/* ===== Datasheet pages (soc-datasheet, bcdr-datasheet) =====
   HTML versions of the PDF datasheets, built from shared components
   (risk-grid, baseline, split-grid). Tiles can carry a tick list, and
   the page prints cleanly as a datasheet: chrome, CTAs and animated
   hero layers are dropped, and cards keep together across pages. */
.risk-grid.is-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .risk-grid.is-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .risk-grid.is-4 { grid-template-columns: 1fr; } }
.risk-tile .feature-list { display: grid; gap: 8px; padding: 0; margin: 4px 0 0; list-style: none; }
.risk-tile .feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.risk-tile .feature-list li svg { width: 14px; height: 14px; flex: none; margin-top: 4px; color: var(--blue); }

@media print {
  .is-datasheet .topbar,
  .is-datasheet .m-nav,
  .is-datasheet footer,
  .is-datasheet .modal-overlay,
  .is-datasheet #n8n-chat,
  .is-datasheet .chat-window-toggle,
  .is-datasheet .synfo-astro,
  .is-datasheet .hero-grid,
  .is-datasheet .hero-net,
  .is-datasheet .hero-spot,
  .is-datasheet .hero-ctas,
  .is-datasheet .crumb,
  .is-datasheet section.block.tight { display: none !important; }
  .is-datasheet .hero.is-inner { padding: 40px 0 36px; }
  /* scroll reveals may not have fired below the fold: show everything */
  .is-datasheet main *, .is-datasheet section, .is-datasheet section * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .is-datasheet .block { padding: 28px 0; }
  .is-datasheet .risk-tile,
  .is-datasheet .split-card,
  .is-datasheet .baseline { break-inside: avoid; box-shadow: none; transform: none; }
  .is-datasheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Matrix v2: phone layout =====
   Fit the Feature column + every tier column inside the screen instead of
   a 620px table clipped by the wrapper (which hid all but the first tier).
   Tier sub-codes and header pills are dropped; everything else shrinks. */
@media (max-width: 640px) {
  .matrix-wrap--v2 { border-radius: 16px; overflow-x: auto; }
  .matrix.matrix--v2 { min-width: 0; table-layout: fixed; font-size: 12.5px; }
  .matrix--v2 thead th:first-child { width: 33%; }
  .matrix--v2 thead th:not(:first-child) { width: auto; }

  .matrix--v2 thead th,
  .matrix--v2 thead th.col-premium,
  .matrix--v2 thead th.col-hybrid { padding: 14px 2px 12px !important; }
  .matrix--v2 thead th:first-child { padding: 14px 8px 12px 12px !important; font-size: 12px; }
  .matrix--v2 .tier-name-h { font-size: 10.5px; letter-spacing: -0.03em; line-height: 1.2; white-space: normal; overflow-wrap: normal; }
  .matrix--v2 .tier-name-sub,
  .matrix--v2 thead th.col-premium::after,
  .matrix--v2 thead th.col-hybrid::after { display: none; }

  .matrix--v2 tbody td { padding: 9px 2px; font-size: 12.5px; }
  .matrix--v2 tbody td:first-child { padding: 9px 6px 9px 12px; line-height: 1.3; }
  .matrix--v2 .feat-info { margin-left: 3px; }

  .matrix--v2 .check { width: 20px; height: 20px; }
  .matrix--v2 .check svg { width: 11px; height: 11px; }
  .matrix--v2 .opt-badge,
  .matrix--v2 .opt { padding: 2px 4px; font-size: 7.5px; letter-spacing: 0.02em; }
  .group-sum-partial { font-size: 9.5px; }

  table.matrix--v2 tr.grouprow.has-sum td.group-title-cell,
  .matrix--v2 .grouprow td {
    padding: 12px 6px 12px 10px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    line-height: 1.35;
    white-space: normal;
  }
  table.matrix--v2 tr.grouprow.has-sum td.group-sum { padding: 12px 2px; }
  /* Full-width group rows (no summary cells): a flex <td> loses its colspan
     in a fixed-layout table and gets squeezed into the first column. */
  .matrix--v2 .grouprow[data-group-toggle]:not(.has-sum) td { display: table-cell; }
  .matrix--v2 .grouprow[data-group-toggle]:not(.has-sum) td > * { vertical-align: middle; }
  .matrix--v2 .grouprow[data-group-toggle]:not(.has-sum) .group-toggle-arrow { margin-right: 6px; }
  .matrix--v2 .grouprow[data-group-toggle]:not(.has-sum) .group-count { margin-left: 6px; }
  table.matrix--v2 tr.grouprow.has-sum .group-toggle-arrow { margin-right: 4px; }
  .matrix--v2 .group-toggle-arrow svg { width: 14px; height: 14px; }
  table.matrix--v2 tr.grouprow.has-sum .group-count {
    display: table; margin: 6px 0 0; font-size: 10px; padding: 2px 8px;
  }
}

/* ===== Matrix v2: calm style =====
   Neutral headers, flat grey group rows, solid ticks, plain "Optional" text.
   The only colour is the Premium (3rd) column: blue top edge + pill + a faint
   tint down the full height. Overrides the earlier gradient/coloured-header
   layers above, so it is scoped under `html .matrix-wrap--v2` to win. */
.matrix-wrap--v2 {
  --mx-surface: #FFFFFF;
  --mx-band: #F0F2F8;
  --mx-band-hover: #E8EBF4;
  --mx-hover: #F7F8FC;
  --mx-tint: rgba(46,77,249,0.045);
  --mx-tint-head: rgba(46,77,249,0.06);
  --mx-tint-hover: rgba(46,77,249,0.10);
  --mx-accent-ink: #2E4DF9;
  overflow: clip; /* clips the rounded corners without breaking the sticky header */
}
[data-theme="dark"] .matrix-wrap--v2 {
  --mx-surface: #131A36;
  --mx-band: #1A2247;
  --mx-band-hover: #232C56;
  --mx-hover: rgba(255,255,255,0.03);
  --mx-tint: rgba(79,107,251,0.08);
  --mx-tint-head: rgba(79,107,251,0.12);
  --mx-tint-hover: rgba(79,107,251,0.18);
  --mx-accent-ink: #8FA2FF;
}

/* Header: neutral for every tier, sticky under the fixed topbar */
html .matrix-wrap--v2 table.matrix--v2 thead th {
  position: sticky; top: 76px; z-index: 3;
  background: var(--mx-surface) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}
html .matrix-wrap--v2 table.matrix--v2 thead th:first-child { color: var(--navy) !important; }
html .matrix-wrap--v2 table.matrix--v2 thead th .tier-name-sub { color: var(--muted); opacity: 1; }
html .matrix-wrap--v2 table.matrix--v2 thead th.col-premium {
  background: linear-gradient(var(--mx-tint-head), var(--mx-tint-head)), var(--mx-surface) !important;
  box-shadow: inset 0 3px 0 var(--blue);
}
html .matrix-wrap--v2 table.matrix--v2 thead th.col-premium .tier-name-h { color: var(--mx-accent-ink); }
html .matrix-wrap--v2 table.matrix--v2 thead th.col-premium::after {
  background: var(--blue); color: #fff;
}
html .matrix-wrap--v2 table.matrix--v2 thead th.col-hybrid::after {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line-strong);
}

/* Body: no zebra, one Premium column tint, quiet hover */
html .matrix-wrap--v2 table.matrix--v2 tbody td { background: transparent !important; }
html .matrix-wrap--v2 table.matrix--v2 tbody tr:not(.grouprow):hover td { background: var(--mx-hover) !important; }

/* Group rows: flat band, sentence case, plain feature count */
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow,
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow.has-sum { background: var(--mx-band) !important; }
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow:hover,
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow.has-sum:hover { background: var(--mx-band-hover) !important; }
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow td,
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow:hover td {
  background: transparent !important;
  border-left: 0 !important;
  color: var(--ink) !important;
  text-transform: none;
  letter-spacing: normal !important;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4 !important; /* same at rest and on hover, so the row never changes height */
}
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow .group-toggle-arrow { color: var(--muted); }
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow .group-count { line-height: 1.4 !important; }
/* Full-width group rows (no summary cells): a flex <td> drops its colspan, so
   the band only covered the first column. Render as a normal cell instead. */
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow[data-group-toggle]:not(.has-sum) td {
  display: table-cell;
  background: var(--mx-band) !important;
}
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow[data-group-toggle]:not(.has-sum):hover td { background: var(--mx-band-hover) !important; }
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow[data-group-toggle]:not(.has-sum) td > * { vertical-align: middle; }
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow[data-group-toggle]:not(.has-sum) .group-toggle-arrow { display: inline-flex; margin-right: 10px; }
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow[data-group-toggle]:not(.has-sum) .group-count { margin-left: 10px; }
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow .group-count,
html .matrix-wrap--v2 table.matrix--v2 tr.grouprow[aria-expanded="false"] .group-count {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: var(--muted) !important;
  font-size: 12.5px; font-weight: 500; letter-spacing: normal;
}

/* Premium column tint, full height (after the resets above so it wins) */
html .matrix-wrap--v2 table.matrix--v2 tbody td:nth-child(3),
html .matrix-wrap--v2 table.matrix--v2 tbody tr.grouprow.has-sum[data-group-toggle] td:nth-child(3),
html .matrix-wrap--v2 table.matrix--v2 tbody tr.grouprow.has-sum[data-group-toggle]:hover td:nth-child(3) { background: var(--mx-tint) !important; }
html .matrix-wrap--v2 table.matrix--v2 tbody tr:hover td:nth-child(3) { background: var(--mx-tint-hover) !important; }

/* Cells: solid tick, light dash, plain "Optional" */
html .matrix-wrap--v2 table.matrix--v2 .check,
html .matrix-wrap--v2 table.matrix--v2 .check.is-added {
  width: auto; height: auto; border-radius: 0;
  background: none !important; color: var(--blue) !important;
}
html .matrix-wrap--v2 table.matrix--v2 .check { box-shadow: none; }
html .matrix-wrap--v2 table.matrix--v2 .check svg { width: 17px; height: 17px; color: var(--blue); stroke: currentColor; }
html .matrix-wrap--v2 table.matrix--v2 .none { color: var(--muted) !important; opacity: 0.45; font-size: 15px; }
html .matrix-wrap--v2 table.matrix--v2 .opt-badge,
html .matrix-wrap--v2 table.matrix--v2 .opt {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: var(--muted) !important;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
}

/* Tables with an add-on column (compliance page): frame the recommended
   column with the same dashed line on its left as the add-on has on its right */
html .matrix-wrap--v2 table.matrix--v2:has(.col-addon) thead th.col-premium { border-left: 2px dashed var(--line-strong); }
html .matrix-wrap--v2 table.matrix--v2:has(.col-addon) tbody tr:not(.grouprow) td:nth-child(3) { border-left: 2px dashed var(--line); }

/* Hybrid note under the plans matrix: neutral card, readable in both themes */
html .hybrid-callout {
  background: #FFFFFF;
  border: 1px solid var(--line);
}
html[data-theme="dark"] .hybrid-callout { background: var(--surface); border-color: var(--line); }
html .hybrid-callout strong { color: var(--ink); }
html .hybrid-callout p { color: var(--muted); }

@media (max-width: 640px) {
  html .matrix-wrap--v2 table.matrix--v2 thead th { position: static; }
  html .matrix-wrap--v2 table.matrix--v2 tr.grouprow td { font-size: 12.5px; }
  html .matrix-wrap--v2 table.matrix--v2 tr.grouprow .group-count { font-size: 11px; }
  html .matrix-wrap--v2 table.matrix--v2 .opt-badge,
  html .matrix-wrap--v2 table.matrix--v2 .opt { font-size: 10.5px; }
  html .matrix-wrap--v2 table.matrix--v2 .check svg { width: 15px; height: 15px; }
}

/* ===================================================================
   KNOWLEDGE BASE (generated pages: knowledge-base.html, kb/*.html,
   kb/topics/*.html; source in src/, behaviour in assets/js/kb.js)
   =================================================================== */
.kb-page {
  --kb-surface: #FFFFFF;
  --kb-surface-2: var(--bg-soft);
  --kb-hover: var(--bg-tint);
  --kb-mark: rgba(46,77,249,0.16);
}
[data-theme="dark"] .kb-page {
  --kb-surface: var(--surface);
  --kb-surface-2: var(--surface-2);
  --kb-hover: var(--surface-3);
  --kb-mark: rgba(79,107,251,0.32);
}
.kb-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ----- Hero variants ----- */
.kb-hero .hero-inner { padding-bottom: 64px; }
.kb-hero .crumb { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto 18px; }
.kb-hero--article .hero-inner { padding-bottom: 52px; }
.kb-hero--article h1 { font-size: clamp(32px, 4.2vw, 50px); max-width: 24ch; margin: 22px auto 16px; text-wrap: balance; }
.kb-hero--article .lede { margin-bottom: 22px; }
.kb-meta {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 18px; font-size: 13.5px; color: rgba(255,255,255,0.78);
}
.kb-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.kb-meta-item svg { width: 15px; height: 15px; }
.kb-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
}
.kb-topic-head { display: flex; align-items: center; gap: 18px; text-align: left; margin: 8px auto 28px; width: fit-content; max-width: 760px; }
.kb-topic-head h1 { margin: 0 0 6px; }
.kb-topic-head .lede { margin: 0; }
.kb-hero--topic .kb-topic-ico { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.kb-hero--topic .kb-topic-ico svg { width: 30px; height: 30px; }

/* ----- Search box ----- */
.kb-search {
  position: relative; display: flex; align-items: center;
  max-width: 640px; margin: 0 auto; text-align: left;
}
.kb-search input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--kb-surface);
  border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 13px 48px 13px 46px;
  box-shadow: 0 1px 2px rgba(0,20,133,0.04);
  -webkit-appearance: none; appearance: none;
}
.kb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kb-search input::placeholder { color: var(--muted); opacity: 0.85; }
.kb-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(46,77,249,0.18); }
.kb-search-ico { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.kb-search-key {
  position: absolute; right: 12px;
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; color: var(--muted);
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--kb-surface-2);
  pointer-events: none;
}
.kb-search input:focus ~ .kb-search-key { opacity: 0; }
.kb-search--lg { max-width: 720px; }
.kb-search--lg input { font-size: 17px; padding: 18px 56px 18px 54px; border-radius: 16px; border-color: transparent; box-shadow: 0 24px 48px -24px rgba(0,8,60,0.55); }
.kb-search--lg .kb-search-ico { left: 20px; width: 20px; height: 20px; }
.kb-search--lg .kb-search-key { right: 16px; }

/* Suggestion popover */
.kb-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  background: var(--kb-surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(0,20,133,0.30);
  padding: 6px; max-height: min(70vh, 520px); overflow-y: auto; text-align: left;
}
.kb-pop-item, .kb-pop-all {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none;
}
.kb-pop-item:hover, .kb-pop-item[aria-selected="true"],
.kb-pop-all:hover, .kb-pop-all[aria-selected="true"] { background: var(--kb-hover); }
.kb-pop-title { font-weight: 600; font-size: 14.5px; color: var(--navy); }
.kb-pop-meta { font-size: 12px; color: var(--muted); white-space: nowrap; align-self: center; }
.kb-pop-sum { grid-column: 1 / -1; font-size: 13px; color: var(--muted); line-height: 1.45; }
.kb-pop-all { display: block; font-size: 13.5px; font-weight: 600; color: var(--blue); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
.kb-pop-empty, .kb-pop-note { margin: 0; padding: 12px; font-size: 13.5px; color: var(--muted); }
.kb-pop-empty a { color: var(--blue); }
.kb-pop-note { padding-bottom: 4px; font-size: 12.5px; }
.kb-pop mark, .kb-list mark { background: var(--kb-mark); color: inherit; border-radius: 3px; padding: 0 1px; }

.kb-suggest {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
  margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,0.72);
}
.kb-suggest a {
  color: #fff; text-decoration: none; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
  transition: background 150ms ease;
}
.kb-suggest a:hover { background: rgba(255,255,255,0.2); }

/* ----- Results + article lists ----- */
.kb-results { padding-top: 56px; }
.kb-results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.kb-section-title { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; color: var(--navy); margin: 0; }
.kb-clear { font: inherit; font-size: 14px; font-weight: 600; color: var(--blue); background: none; border: 0; cursor: pointer; padding: 6px 0; }
.kb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kb-list-item {
  position: relative; display: grid; gap: 4px;
  padding: 18px 56px 18px 22px; border-radius: 14px;
  background: var(--kb-surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}
.kb-list-item:hover { border-color: var(--blue); }
.kb-list-title { font-size: 17px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.kb-list-sum { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.kb-list-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kb-list-arrow { position: absolute; right: 22px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); transition: color 150ms ease; }
.kb-list-item:hover .kb-list-arrow { color: var(--blue); }
.kb-list-count { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.kb-empty { padding: 28px; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--muted); }
.kb-empty p { margin: 0; }
.kb-empty a { color: var(--blue); }
.kb-empty-title { font-weight: 600; color: var(--ink); margin-bottom: 6px !important; }

/* ----- Urgent strip ----- */
.kb-urgent-wrap { padding-top: 40px; padding-bottom: 0; }
.kb-urgent {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  padding: 20px 24px; border-radius: 16px;
  background: var(--kb-surface); border: 1px solid var(--line);
  border-left: 4px solid #D45A10;
}
.kb-urgent-text { display: flex; align-items: flex-start; gap: 14px; flex: 1 1 420px; }
.kb-urgent-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(212,90,16,0.12); color: #D45A10; }
.kb-urgent-ico svg { width: 20px; height: 20px; }
.kb-urgent-title { margin: 0 0 2px; font-weight: 700; color: var(--navy); }
.kb-urgent p { margin: 0; font-size: 14.5px; color: var(--muted); }
.kb-urgent p a { color: var(--blue); font-weight: 600; }
.kb-urgent-links { display: flex; gap: 10px; flex-wrap: wrap; }

/* ----- Topic grid ----- */
.kb-topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .kb-topic-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .kb-topic-grid { grid-template-columns: 1fr; } }
.kb-topic-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: 18px;
  background: var(--kb-surface); border: 1px solid var(--line);
  transition: border-color 150ms ease;
}
.kb-topic-card:hover { border-color: var(--line-strong); }
.kb-topic-card-head { display: flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; }
.kb-topic-card-head:hover .kb-topic-name { color: var(--blue); }
.kb-topic-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue);
}
.kb-topic-ico svg { width: 21px; height: 21px; }
.kb-topic-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; flex: 1; transition: color 150ms ease; }
.kb-count {
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 2px 8px; border-radius: 999px; background: var(--kb-surface-2);
}
.kb-topic-desc { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.kb-topic-links { list-style: none; margin: 4px 0 0; padding: 10px 0 0; display: grid; gap: 2px; border-top: 1px solid var(--line); }
.kb-topic-links a {
  display: block; padding: 6px 0; font-size: 14.5px; color: var(--ink); text-decoration: none;
  transition: color 150ms ease;
}
.kb-topic-links a:hover { color: var(--blue); }
.kb-topic-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--blue); text-decoration: none; padding-top: 4px; }
.kb-topic-more svg { width: 14px; height: 14px; transition: transform 150ms ease; }
.kb-topic-more:hover svg { transform: translateX(2px); }

/* ----- Article cards ----- */
.kb-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kb-card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .kb-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .kb-card-grid { grid-template-columns: 1fr; } }
.kb-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: 16px; text-decoration: none;
  background: var(--kb-surface); border: 1px solid var(--line);
  transition: border-color 150ms ease;
}
.kb-card:hover { border-color: var(--blue); }
.kb-card-topic { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.kb-card-title { font-size: 16.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; line-height: 1.3; }
.kb-card-sum { font-size: 14px; color: var(--muted); line-height: 1.5; }
.kb-card-meta { font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 6px; }
.kb-card-grid--compact .kb-card { padding: 16px; }
.kb-card-grid--compact .kb-card-title { font-size: 15px; }
.kb-card-grid--compact .kb-card-sum { font-size: 13px; }

/* ----- Article / topic layout ----- */
.kb-article-wrap, .kb-topic-body { padding-top: 56px; }
.kb-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.kb-main { min-width: 0; max-width: 760px; }
.kb-side { min-width: 0; }
.kb-side-sticky { position: sticky; top: 100px; display: grid; gap: 28px; padding: 2px 2px 8px; }
.kb-side .kb-search input { font-size: 14px; padding: 10px 40px 10px 38px; border-radius: 10px; }
.kb-side .kb-search-ico { left: 12px; width: 16px; height: 16px; }
.kb-side .kb-search-key { right: 8px; padding: 3px 6px; font-size: 11px; }
.kb-side .kb-pop { right: auto; width: 420px; max-width: calc(100vw - 64px); }
.kb-side-label { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.kb-toc ol, .kb-topic-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.kb-toc a, .kb-topic-nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px; border-left: 2px solid var(--line);
  font-size: 13.5px; line-height: 1.4; color: var(--muted); text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}
.kb-toc a:hover, .kb-topic-nav a:hover { color: var(--ink); }
.kb-toc a.is-current { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }
.kb-topic-nav a[aria-current="page"] { color: var(--navy); border-left-color: var(--navy); font-weight: 600; }
[data-theme="dark"] .kb-topic-nav a[aria-current="page"] { color: var(--ink); border-left-color: var(--blue); }

/* Article body */
.kb-prose { max-width: none; font-size: 17px; }
.kb-prose h2 { font-size: clamp(23px, 2.4vw, 28px); margin: 48px 0 14px; scroll-margin-top: 100px; }
.kb-prose h3 { font-size: 19px; margin: 30px 0 8px; scroll-margin-top: 100px; }
.kb-prose ol li::marker { font-weight: 700; }
.kb-prose strong { font-weight: 600; color: var(--ink); }
.kb-callout {
  margin: 28px 0; padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  background: var(--kb-surface-2); font-size: 15.5px; line-height: 1.65;
}
.kb-callout p { margin: 0 0 10px; }
.kb-callout > :last-child { margin-bottom: 0; }
.kb-callout-title { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.kb-callout--tip { border-left-color: #1F7A4A; }
.kb-callout--tip .kb-callout-title { color: #1F7A4A; }
.kb-callout--important { border-left-color: var(--navy); }
.kb-callout--important .kb-callout-title { color: var(--navy); }
.kb-callout--warning { border-left-color: #D45A10; background: rgba(212,90,16,0.06); }
.kb-callout--warning .kb-callout-title { color: #B4470A; }
[data-theme="dark"] .kb-callout--tip { border-left-color: #4ED28C; }
[data-theme="dark"] .kb-callout--tip .kb-callout-title { color: #4ED28C; }
[data-theme="dark"] .kb-callout--important { border-left-color: var(--blue); }
[data-theme="dark"] .kb-callout--important .kb-callout-title { color: #8FA2FF; }
[data-theme="dark"] .kb-callout--warning { background: rgba(212,90,16,0.10); border-left-color: #F08A4B; }
[data-theme="dark"] .kb-callout--warning .kb-callout-title { color: #F5A06B; }

/* Feedback */
.kb-feedback {
  margin-top: 48px; padding: 22px 24px; border-radius: 16px;
  background: var(--kb-surface-2); border: 1px solid var(--line);
}
.kb-feedback-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.kb-feedback-q { margin: 0; font-weight: 600; color: var(--navy); }
.kb-feedback-btns { display: flex; gap: 8px; }
.kb-fb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 9px 16px; border-radius: 10px; cursor: pointer;
  background: var(--kb-surface); border: 1px solid var(--line-strong);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.kb-fb-btn svg { width: 16px; height: 16px; }
.kb-fb-btn:hover { border-color: var(--blue); }
.kb-fb-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.kb-feedback-form { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.kb-feedback-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.kb-feedback-form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); resize: vertical;
  background: var(--kb-surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px;
}
.kb-feedback-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(46,77,249,0.15); }
.kb-feedback-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kb-feedback-status { margin: 0; font-size: 13.5px; color: var(--muted); }
.kb-feedback-note { margin: 0; font-size: 13px; color: var(--muted); }
.kb-feedback-note a { color: var(--blue); }
.kb-feedback-done { margin: 0; font-weight: 600; color: var(--navy); }
.kb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.kb-related { margin-top: 48px; }
.kb-related .kb-section-title { font-size: 20px; margin-bottom: 14px; }

.kb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.kb-pager-link {
  display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; text-decoration: none;
  border: 1px solid var(--line); background: var(--kb-surface); transition: border-color 150ms ease;
}
.kb-pager-link:hover { border-color: var(--blue); }
.kb-pager-link--next { text-align: right; grid-column: 2; }
.kb-pager-dir { font-size: 12px; font-weight: 600; color: var(--muted); }
.kb-pager-title { font-size: 15px; font-weight: 600; color: var(--navy); }

/* ----- Responsive ----- */
@media (max-width: 1000px) {
  .kb-layout { grid-template-columns: 1fr; gap: 32px; }
  .kb-side-sticky { position: static; max-height: none; overflow: visible; }
  .kb-article-wrap .kb-side { order: -1; }
  .kb-article-wrap .kb-topic-nav { display: none; }
  .kb-article-wrap .kb-side .kb-search { display: none; }
  .kb-toc { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--kb-surface-2); }
  .kb-toc a { border-left: 0; padding-left: 0; }
  .kb-topic-body .kb-side { order: 2; }
  .kb-main { max-width: none; }
}
@media (max-width: 640px) {
  .kb-search-key { display: none; }
  .kb-search--lg input { font-size: 16px; padding: 15px 16px 15px 46px; }
  .kb-search--lg .kb-search-ico { left: 16px; }
  .kb-topic-head { flex-direction: column; text-align: center; gap: 12px; }
  .kb-list-item { padding: 16px 44px 16px 16px; }
  .kb-list-arrow { right: 16px; }
  .kb-pager { grid-template-columns: 1fr; }
  .kb-pager-link--next { grid-column: 1; }
  .kb-prose { font-size: 16.5px; }
  .kb-urgent-links .btn { flex: 1 1 auto; }
}