/* X3 family marketing system — ported from the live X3 Fleet Safety product sites (benchmark: x3mvr.com / x3hazmat.com).
   True black, cyan #00B2FD, Archivo + Inter + JetBrains Mono, 92px nav, 72px logo, ticker under the hero,
   clean full-width sections, cyan CTA band, family footer. Everything is scoped under .x3m. */
@keyframes x3m-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes x3m-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

html:has(.x3m) { scroll-behavior: smooth; overflow-x: hidden; }
body:has(.x3m) { background: #000; overflow-x: hidden; }

.x3m {
  --void: #000000; --void2: #040506; --panel: #050607; --panel2: #090b0e; --card: #0A0C10; --line: #161b22; --line2: #242c37;
  --fg: #F4F8FE; --fg2: #D3DFEE; --fg3: #A9B9CD;
  --cyan: #00B2FD; --cyan2: #5AD1FF; --deep: #0090D6; --green: #34D399; --amber: #FBBF24; --red: #fb7185;
  --pad: clamp(20px, 4vw, 64px); --canvas: 1440px;
  --display: var(--x3-font-display), system-ui, sans-serif;
  --body: var(--x3-font-body), system-ui, sans-serif;
  --mono: var(--x3-font-tech), ui-monospace, monospace;
  background: var(--void); color: var(--fg); font-family: var(--body); -webkit-font-smoothing: antialiased; line-height: 1.6; min-height: 100vh;

  *, *::before, *::after { box-sizing: border-box; }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
  [id] { scroll-margin-top: 112px; }
  img { max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.08; color: #fff; text-wrap: balance; }

  .wrap { max-width: var(--canvas); margin: 0 auto; padding: 0 var(--pad); }
  .eyebrow { font: 700 11.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan2); }
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 14px 24px; font: 700 14px var(--body); cursor: pointer; border: 0; transition: .16s; white-space: nowrap; min-height: 44px; }
  .btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--cyan2); outline-offset: 3px; }
  .btn .ar { transition: transform .15s; }
  .btn:hover .ar { transform: translateX(3px); }
  .btn-primary { background: var(--cyan); color: #04121d; box-shadow: 0 12px 34px -12px rgba(0,178,253,.7); }
  .btn-primary:hover { background: var(--cyan2); transform: translateY(-1px); }
  .btn-gh { background: rgba(255,255,255,.04); color: #fff; border: 1px solid var(--line2); backdrop-filter: blur(6px); }
  .btn-gh:hover { border-color: var(--cyan); }
  .btn-sm { padding: 11px 18px; font-size: 13px; }

  /* Visually hidden until a keyboard user tabs to it. */
  .skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip:focus, .skip:focus-visible { position: fixed; left: 16px; top: 16px; z-index: 9999; width: auto; height: auto; overflow: visible; clip-path: none; padding: 10px 16px; border-radius: 8px; background: var(--cyan); color: #04121d; font-weight: 800; }

  /* banner + nav */
  .banner { display: block; background: linear-gradient(90deg, var(--cyan), var(--deep)); }
  .banner .in { max-width: var(--canvas); margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px var(--pad); }
  .banner .mk { height: 28px; width: 28px; flex: none; color: #04121d; }
  .banner .t { font: 800 18px/1 var(--body); letter-spacing: -.01em; color: #04121d; }
  .banner .s { font: 700 11px/1.45 var(--body); text-transform: uppercase; letter-spacing: .18em; color: #04121d; }
  .banner .more { margin-left: auto; font: 700 12.5px/1 var(--body); color: #04121d; white-space: nowrap; }
  @media (max-width: 640px) { .banner .more { display: none; } }

  .nav { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,.86); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
  .nav .in { max-width: var(--canvas); margin: 0 auto; height: 92px; display: flex; align-items: center; padding: 0 var(--pad); gap: 16px; }
  .brand { flex: none; display: block; }
  .brand img { height: 72px; width: auto; display: block; }
  .navlinks { flex: 1; display: flex; gap: clamp(16px, 2.2vw, 34px); justify-content: center; }
  .navlinks a { font: 600 16px var(--body); color: var(--fg); transition: color .15s; white-space: nowrap; }
  .navlinks a:hover { color: var(--cyan2); }
  .nav .right { margin-left: auto; display: flex; gap: 11px; align-items: center; }
  .menu { display: none; margin-left: auto; background: none; border: 1px solid var(--line2); border-radius: 10px; color: #fff; padding: 9px 14px; font: 700 13px var(--body); cursor: pointer; min-height: 44px; }
  .mnav { display: none; border-bottom: 1px solid var(--line); background: #000; }
  .mnav a { display: block; padding: 14px var(--pad); font: 600 16px var(--body); color: var(--fg); border-top: 1px solid var(--line); }
  .mnav.open { display: block; }
  @media (max-width: 1180px) { .navlinks { display: none; } .nav .right .btn-gh { display: none; } .menu { display: inline-flex; align-items: center; } .nav .right { margin-left: 0; } }
  @media (max-width: 560px) { .brand img { height: 56px; } .nav .in { height: 80px; gap: 10px; } .nav .right .btn-primary { padding: 10px 12px; font-size: 12.5px; } }
  @media (max-width: 400px) { .nav .right { display: none; } }

  /* hero — the photograph is shown whole; the text sits on a black veil over its quiet side */
  .hero { position: relative; background: #000; border-bottom: 1px solid var(--line); overflow: hidden; }
  /* One hero height on every product page, so the headline sits in the same place on all twelve.
     The photo fills that height and is shown whole (never cropped), anchored right; the words sit on a black veil over its quiet side. */
  .hero > img { position: absolute; top: 0; right: 0; display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: right center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); }
  .hero .ov { position: relative; z-index: 1; min-height: clamp(560px, calc(100vh - 138px), 760px); display: flex; align-items: flex-start; padding: clamp(56px, 9vh, 96px) 0 64px; background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.84) 30%, rgba(0,0,0,.4) 54%, rgba(0,0,0,.04) 74%), linear-gradient(0deg, #000 0%, transparent 16%); }
  .hero .in { max-width: var(--canvas); margin: 0 auto; padding: 0 var(--pad); width: 100%; }
  .hero .col { max-width: 660px; }
  .hpill { display: inline-flex; align-items: center; gap: 9px; background: rgba(10,15,23,.78); border: 1px solid var(--line2); border-radius: 999px; padding: 7px 14px 7px 8px; font: 600 12px var(--body); color: var(--fg2); }
  .hpill .b { font: 700 10px var(--body); letter-spacing: .06em; text-transform: uppercase; color: #04121d; background: var(--cyan); border-radius: 999px; padding: 4px 9px; }
  /* The pill holds the page's real h1 (what the product is); it looks exactly like the pill always did. */
  .hpill h1 { display: inline-flex; align-items: center; gap: 9px; margin: 0; font: inherit; color: inherit; letter-spacing: normal; line-height: inherit; text-wrap: initial; }
  /* On phones the name and descriptor are hidden from sight only: they stay in the h1 for search engines and screen readers. */
  @media (max-width: 640px) { .hpill .dsc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hpill { padding: 6px; } }
  /* The big headline is a styled paragraph, so the pill above it can be the h1. */
  .hl { font-family: var(--display); letter-spacing: -.02em; color: #fff; text-wrap: balance; }
  .hero .hl { font-size: clamp(34px, 3.9vw, 56px); font-weight: 900; margin: 16px 0 0; line-height: 1.05; }
  .hero .hl span { display: block; }
  .free { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--fg2); max-width: 40em; }
  .hero .lead { font-size: clamp(16px, 1.25vw, 18.5px); color: var(--fg); margin: 16px 0 22px; max-width: 36em; }
  .hcta { display: flex; gap: 12px; flex-wrap: wrap; }
  .hero .fine { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font: 600 13px/1.4 var(--body); color: var(--fg2); list-style: none; }
  /* Every item carries its own dot, so a wrapped line never starts with a stray separator. */
  .hero .fine li { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
  .hero .fine li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan2); flex: none; }
  @media (max-width: 1100px) {
    .hero > img { position: static; width: 100%; height: auto; max-width: 100%; object-fit: initial; -webkit-mask-image: none; mask-image: none; }
    .hero .ov { min-height: 0; background: none; padding: 26px 0 40px; }
    .hero .col { max-width: none; }
  }

  /* ticker */
  .ticker { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--void2); padding: 26px 0; }
  .tkhead { text-align: center; font: 800 12.5px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan2); margin-bottom: 16px; padding: 0 var(--pad); }
  .tkhead .dotp { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 9px; vertical-align: middle; animation: x3m-pulse 1.8s infinite; }
  @media (max-width: 480px) { .tkhead { font-size: 11px; letter-spacing: .12em; } }
  .tkwrap { position: relative; }
  .tkfade { position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none; }
  .tkfade.l { left: 0; background: linear-gradient(90deg, var(--void2), transparent); }
  .tkfade.r { right: 0; background: linear-gradient(270deg, var(--void2), transparent); }
  .tkrow { display: flex; gap: 14px; width: max-content; animation: x3m-marquee 70s linear infinite; list-style: none; }
  .ticker:hover .tkrow, .ticker:focus-within .tkrow { animation-play-state: paused; }
  .tkpill { display: inline-flex; align-items: center; gap: 11px; border: 1px solid var(--line2); background: var(--card); border-radius: 999px; padding: 11px 18px; white-space: nowrap; }
  .tkpill .c { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--cyan2); }
  .tkpill .t { font-size: 15px; color: var(--fg); }
  .tkpill .g { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

  /* sections — clean, full width, no framed panels */
  .sec { padding: clamp(64px, 7vw, 96px) 0; }
  .alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .h2 { font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; margin-top: 12px; }
  .sub { color: var(--fg2); font-size: clamp(15.5px, 1.15vw, 17px); margin-top: 14px; max-width: 44em; }
  .head.center { margin: 0 auto; text-align: center; max-width: 54em; }
  .head.center .sub { margin-left: auto; margin-right: auto; }
  .punch { margin: 28px 0 0; font-family: var(--display); font-weight: 800; font-size: 20px; color: #fff; max-width: 40em; line-height: 1.3; }
  .punch b { color: var(--cyan2); font-weight: 800; }
  .punch.center { text-align: center; margin: 40px auto 0; }
  .splitc { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
  .splitc.top { align-items: start; }
  .splitc.rev .ph { order: -1; }
  @media (max-width: 940px) { .splitc { grid-template-columns: 1fr; gap: 28px; } .splitc.rev .ph { order: 0; } }
  .ph img { width: 100%; height: auto; display: block; border-radius: 14px; }
  .ph.stick { position: sticky; top: 120px; align-self: start; }
  @media (max-width: 940px) { .ph.stick { position: static; } }

  /* intelligence dimensions — a ruled grid, not boxes */
  .dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 48px); margin-top: 36px; }
  @media (max-width: 900px) { .dims { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .dims { grid-template-columns: 1fr; } }
  .dims .d { padding: 20px 0 22px; border-top: 1px solid var(--line2); }
  .dims .d h3 { font: 800 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan2); }
  .dims .d p { font-size: 15.5px; color: var(--fg); margin-top: 8px; line-height: 1.5; }

  /* "See it" record view: a clean ruled layout, not a window or a box */
  .record { margin-top: 34px; border-top: 3px solid var(--stage, var(--cyan)); padding-top: 20px; }
  .rhead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; }
  .rhead .nm { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 1.6vw, 22px); color: #fff; line-height: 1.3; }
  .rhead .sub2 { font-size: 14px; color: var(--fg2); }
  .dstats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
  .dstat { padding: 18px 18px 18px 0; }
  .dstat + .dstat { padding-left: 20px; border-left: 1px solid var(--line2); }
  .dstat::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--cyan); margin-bottom: 12px; }
  .dstat.green::before { background: var(--green); } .dstat.amber::before { background: var(--amber); } .dstat.red::before { background: var(--red); }
  @media (max-width: 760px) {
    .dstats { grid-template-columns: 1fr 1fr; }
    .dstat:nth-child(odd) { padding-left: 0; border-left: 0; }
    .dstat:nth-child(n+3) { border-top: 1px solid var(--line2); }
  }
  .dstat .n { font-family: var(--display); font-weight: 900; font-size: 30px; color: #fff; line-height: 1; overflow-wrap: anywhere; }
  @media (max-width: 760px) { .dstat .n { font-size: 22px; } }
  .dstat .n.green { color: var(--green); } .dstat .n.cyan { color: var(--cyan2); } .dstat .n.amber { color: var(--amber); } .dstat .n.red { color: var(--red); }
  .dstat .l { font-size: 14px; color: var(--fg2); margin-top: 8px; line-height: 1.4; }
  .fixes { margin-top: 22px; }
  .fixes .k { font: 800 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
  .fixes ul { list-style: none; margin-top: 8px; }
  .fixes li { font-size: 15.5px; color: var(--fg); padding: 10px 0 10px 18px; border-top: 1px solid var(--line); position: relative; line-height: 1.5; }
  .fixes li::before { content: ""; position: absolute; left: 0; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
  .fixes li:first-child { border-top: 0; }
  .cap { margin-top: 18px; text-align: center; font: 600 13px var(--mono); letter-spacing: .02em; color: var(--cyan2); }
  .center-cta { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  /* workflow timeline */
  .tl { margin-top: 30px; border-left: 2px solid var(--line2); padding-left: 28px; display: flex; flex-direction: column; gap: 18px; max-width: 640px; list-style: none; }
  .tl li { position: relative; }
  .tl li::before { content: ""; position: absolute; left: -35px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(0,178,253,.16); }
  .tl .n { font: 700 11px var(--mono); color: var(--cyan2); }
  .tl h3 { font-size: 16.5px; font-weight: 800; margin: 2px 0 3px; }
  .tl p { font-size: 14.5px; color: var(--fg2); line-height: 1.5; }
  .tl.wide { max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 48px; border-left: 0; padding-left: 0; }
  .tl.wide li { border-left: 2px solid var(--line2); padding-left: 26px; }
  .tl.wide li::before { left: -8px; }

  /* the safety loop */
  .mtag { font-family: var(--display); line-height: 1.1; font-weight: 900; font-size: clamp(24px, 2.6vw, 34px); text-align: center; color: #fff; letter-spacing: -.01em; margin: 0; }
  .mtag b { color: var(--cyan2); }
  .loop { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 32px; list-style: none; }
  .loop > li { padding: 22px 16px 20px; text-align: center; border-left: 1px solid var(--line2); border-top: 3px solid rgba(0,178,253,.45); display: flex; flex-direction: column; }
  .loop > li:first-child { border-left: 0; }
  .loop > li.on { border-top-color: var(--cyan); background: linear-gradient(180deg, rgba(0,178,253,.2), rgba(0,178,253,.04) 70%); }
  .loop .n { font: 700 12px var(--mono); color: var(--cyan2); }
  .loop h3 { font-size: 19px; font-weight: 900; margin: 8px 0 6px; color: #fff; }
  .loop .q { font-size: 13.5px; color: var(--fg); line-height: 1.45; display: block; min-height: 3em; }
  .loop .prods { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line2); }
  .loop .prods a { font: 700 13px var(--body); color: var(--fg2); padding: 6px 4px; border-radius: 8px; min-height: 32px; display: flex; align-items: center; justify-content: center; }
  .loop .prods a:hover { color: #fff; background: rgba(0,178,253,.12); }
  .loop .prods a.self { color: #04121d; background: var(--cyan); }
  @media (max-width: 1100px) { .loop { grid-template-columns: repeat(3, 1fr); } .loop > li:nth-child(4) { border-left: 0; } .loop > li:nth-child(n+4) { border-top-width: 1px; } .loop > li.on:nth-child(n+4) { border-top: 3px solid var(--cyan); } }
  @media (max-width: 620px) { .loop { grid-template-columns: 1fr 1fr; } .loop > li { border-left: 1px solid var(--line2); } .loop > li:nth-child(odd) { border-left: 0; } .loop .q { min-height: 0; } }
  .handoffs { margin: 34px auto 0; max-width: 1040px; text-align: center; }
  .handoffs .lab { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg2); }
  .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; list-style: none; }
  .chips a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); background: rgba(4,7,12,.7); border-radius: 999px; padding: 10px 16px; font: 500 13.5px var(--body); color: var(--fg); min-height: 44px; text-align: left; }
  .chips a b { color: var(--cyan2); font-weight: 700; white-space: nowrap; }
  .chips a:hover { border-color: var(--cyan); }

  /* your part + outcome */
  .cncpt { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 32px; border-top: 1px solid var(--line2); }
  @media (max-width: 860px) { .cncpt { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .cncpt { grid-template-columns: 1fr; } }
  .cncpt .cc { padding: 22px 22px 8px 0; }
  .cncpt .cc + .cc { padding-left: 22px; border-left: 1px solid var(--line2); }
  @media (max-width: 860px) { .cncpt .cc:nth-child(3) { padding-left: 0; border-left: 0; } .cncpt .cc:nth-child(n+3) { border-top: 1px solid var(--line2); } }
  @media (max-width: 480px) { .cncpt .cc + .cc { padding-left: 0; border-left: 0; border-top: 1px solid var(--line2); } }
  .cncpt .cc h3 { font: 800 16px var(--display); color: #fff; letter-spacing: -.01em; line-height: 1.25; }
  .cncpt .cc p { font-size: 14.5px; color: var(--fg2); line-height: 1.55; margin-top: 7px; }
  .outcome { position: relative; text-align: center; border-top: 1px solid rgba(0,178,253,.35); background: radial-gradient(900px 380px at 50% 0%, rgba(0,178,253,.16), transparent 62%), #000; }
  .outcome .sub { margin-left: auto; margin-right: auto; color: var(--fg); }
  .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 34px auto 0; max-width: 980px; }
  @media (max-width: 700px) { .three { grid-template-columns: 1fr; } }
  .three h3 { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--cyan2); }
  .three p { font-size: 15px; color: var(--fg2); margin-top: 6px; }

  /* access */
  .access { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(32px, 5vw, 72px); margin: 38px auto 0; max-width: 1040px; align-items: stretch; }
  @media (max-width: 820px) { .access { grid-template-columns: 1fr; } }
  .pcard { position: relative; border-top: 3px solid var(--line2); padding: 26px 0 0; display: flex; flex-direction: column; }
  .pcard.lead { border-top-color: var(--cyan); }
  /* X3 Sentinel is an add-on, so its page leads with All 12. */
  .access.flip .pcard.lead { order: 2; border-top-color: var(--line2); }
  .access.flip .pcard:not(.lead) { border-top-color: var(--cyan); }
  .ptag { font: 700 10.5px var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--cyan2); margin-bottom: 8px; }
  .pamt { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3vw, 40px); color: #fff; line-height: 1.1; }
  .pcard .desc { color: var(--fg2); font-size: 15.5px; margin: 10px 0 16px; line-height: 1.55; }
  .plist { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
  .plist li { display: flex; gap: 9px; font-size: 15px; color: var(--fg); }
  .plist li::before { content: "\2713"; color: var(--cyan); font-weight: 800; flex: none; }
  .pcard .btn { width: 100%; margin-top: auto; }
  .pdisc { margin: 22px auto 0; font-size: 13.5px; color: var(--fg2); text-align: center; max-width: 62em; }
  .pdisc a { color: var(--cyan2); text-decoration: underline; text-underline-offset: 3px; }

  /* faq */
  .faqgrid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
  @media (max-width: 900px) { .faqgrid { grid-template-columns: 1fr; } }
  .faqside { position: sticky; top: 124px; }
  @media (max-width: 900px) { .faqside { position: static; } }
  .faq { display: flex; flex-direction: column; border-bottom: 1px solid var(--line2); }
  details { border-top: 1px solid var(--line2); }
  details[open] { border-top-color: var(--cyan); }
  summary { list-style: none; cursor: pointer; padding: 19px 0; display: flex; justify-content: space-between; gap: 14px; font: 600 17px var(--body); color: var(--fg); }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; color: var(--cyan); font-size: 20px; font-weight: 800; line-height: 1; }
  details[open] summary::after { content: "\2212"; }
  details .a { padding: 0 34px 20px 0; color: var(--fg2); font-size: 15.5px; line-height: 1.6; }

  /* cta band */
  .ctaband { background: linear-gradient(90deg, var(--cyan), var(--deep)); }
  .ctaband .in { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; max-width: var(--canvas); margin: 0 auto; padding: 44px var(--pad); }
  .ctaband .ctatext { max-width: 64ch; }
  .ctaband .eyebrow { color: #04121d; }
  .ctaband h2 { font-family: var(--display); font-weight: 800; color: #04121d; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; margin-top: 8px; }
  .ctaband p { color: #04121d; font-size: 15.5px; line-height: 1.55; margin-top: 9px; font-weight: 500; }
  .ctaband .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .ctaband .ctabtn { background: #fff; color: #04121d; box-shadow: 0 14px 34px -14px rgba(0,0,0,.55); }
  .ctaband .ctabtn:hover { background: #eaf6ff; transform: translateY(-1px); }
  .ctaband .ctagh { background: #04121d; color: #fff; }
  .ctaband .ctagh:hover { background: #0b2233; }

  /* footer */
  footer { border-top: 1px solid var(--line); padding: 56px 0 30px; background: var(--void); }
  .fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
  @media (max-width: 820px) { .fgrid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .fgrid { grid-template-columns: 1fr; } }
  .fcol h2 { font: 800 12px var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--cyan2); margin: 0 0 14px; }
  .fcol a { display: block; font-size: 14.5px; color: var(--fg2); padding: 6px 0; }
  .fcol a:hover { color: #fff; }
  .fcol a.self { color: var(--cyan2); font-weight: 700; }
  .fbrand img { height: 56px; width: auto; display: block; margin-bottom: 14px; }
  .fbrand p { font-size: 14px; color: var(--fg3); max-width: 38ch; line-height: 1.6; }
  .fbot { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 20px; color: var(--fg3); font-size: 12.5px; line-height: 1.7; max-width: 110ch; }
  .fbot b { color: var(--fg2); }

  /* portfolio: mosaic hero, stage rows */
  .phero { border-bottom: 1px solid var(--line); background: radial-gradient(1000px 520px at 82% 10%, rgba(0,178,253,.12), transparent 60%), #000; }
  .phero .in { max-width: var(--canvas); margin: 0 auto; padding: clamp(40px, 5vw, 72px) var(--pad); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
  @media (max-width: 1000px) { .phero .in { grid-template-columns: 1fr; } }
  .phero .hl { font-size: clamp(36px, 4.3vw, 62px); font-weight: 900; margin: 16px 0 0; line-height: 1.03; }
  .phero .hl span { display: block; }
  .phero .hl .c { color: var(--cyan2); }
  .phero .lead { font-size: clamp(16px, 1.25vw, 18.5px); color: var(--fg); margin: 18px 0 24px; max-width: 34em; }
  /* Six photos shown whole, each labelled underneath (never over the picture). */
  .mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; list-style: none; }
  @media (max-width: 640px) { .mosaic { grid-template-columns: 1fr 1fr; gap: 16px 12px; } }
  .mosaic li { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
  .mosaic img { display: block; width: 100%; height: auto; border-radius: 10px; }
  .mosaic .lb { align-self: flex-start; white-space: nowrap; font: 800 11.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }
  .mosaic .lb b { display: inline-block; margin-right: 6px; padding: 4px 7px; border-radius: 999px; color: #04121d; background: var(--cyan); font-weight: 800; }
  .stage { padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
  .stage:first-of-type { border-top: 0; }
  .stagehead { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .stagehead .n { font: 800 13px var(--mono); color: #04121d; background: var(--cyan); border-radius: 999px; padding: 6px 12px; }
  .stagehead h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 900; }
  .stagehead p { color: var(--fg2); font-size: 16px; flex: 1 1 320px; }
  .prows { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(22px, 2.6vw, 40px); margin-top: 28px; }
  .prow { display: flex; flex-direction: column; }
  /* Every product photo sits in the same 16:9 frame and is shown whole inside it, so a row lines up. */
  .prow .pic { display: block; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
  .prow .pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .prow .lg { height: 48px; width: auto; margin-top: 18px; align-self: flex-start; }
  .prow h4 { font: 800 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan2); margin-top: 12px; }
  .prow p { font-size: 15.5px; color: var(--fg); margin-top: 8px; line-height: 1.5; flex: 1; }
  .prow .lk { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
  .prows.one .prow { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(22px, 3vw, 48px); align-items: center; }
  .prows.one .prow .lg { margin-top: 0; }
  @media (max-width: 820px) { .prows.one .prow { grid-template-columns: 1fr; } }
}

/* ---------- colour: each step of the safety loop owns one colour, used the same way on every site ---------- */
.x3m {
  --c-know: #00B2FD; --c-find: #2DD4BF; --c-control: #FBBF24; --c-prepare: #A78BFA; --c-learn: #F472B6; --c-command: #34D399;
  --stage: var(--c-know);
}
.x3m[data-stage="find"] { --stage: var(--c-find); }
.x3m[data-stage="control"] { --stage: var(--c-control); }
.x3m[data-stage="prepare"] { --stage: var(--c-prepare); }
.x3m[data-stage="learn"] { --stage: var(--c-learn); }
.x3m[data-stage="command"] { --stage: var(--c-command); }

.x3m .hpill .st { font: 800 10px var(--body); letter-spacing: .08em; text-transform: uppercase; color: #04121d; background: var(--stage); border-radius: 999px; padding: 4px 9px; margin-left: 2px; white-space: nowrap; }
.x3m .hero .fine li::before { background: var(--stage); }

/* loop strip: one colour per step */
.x3m .loop > li { --lc: var(--c-know); border-top-color: color-mix(in srgb, var(--lc) 55%, transparent); }
.x3m .loop > li:nth-child(2) { --lc: var(--c-find); }
.x3m .loop > li:nth-child(3) { --lc: var(--c-control); }
.x3m .loop > li:nth-child(4) { --lc: var(--c-prepare); }
.x3m .loop > li:nth-child(5) { --lc: var(--c-learn); }
.x3m .loop > li:nth-child(6) { --lc: var(--c-command); }
.x3m .loop .n, .x3m .loop h3 { color: var(--lc); }
.x3m .loop > li.on { border-top: 3px solid var(--lc); background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 24%, transparent), color-mix(in srgb, var(--lc) 5%, transparent) 70%); }
.x3m .loop .prods a:hover { background: color-mix(in srgb, var(--lc) 16%, transparent); }
.x3m .loop .prods a.self { background: var(--lc); color: #04121d; }

/* the six "X3 Intelligence" points and the four "Your Part" items cycle through the family colours */
.x3m .dims .d { --dc: var(--c-know); border-top: 2px solid color-mix(in srgb, var(--dc) 60%, transparent); }
.x3m .dims .d:nth-child(6n+2) { --dc: var(--c-find); }
.x3m .dims .d:nth-child(6n+3) { --dc: var(--c-control); }
.x3m .dims .d:nth-child(6n+4) { --dc: var(--c-prepare); }
.x3m .dims .d:nth-child(6n+5) { --dc: var(--c-learn); }
.x3m .dims .d:nth-child(6n+6) { --dc: var(--c-command); }
.x3m .dims .d h3 { color: var(--dc); display: flex; align-items: center; gap: 9px; }
.x3m .dims .d h3::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--dc); flex: none; }
.x3m .cncpt .cc { --pc: var(--c-know); }
.x3m .cncpt .cc:nth-child(4n+2) { --pc: var(--c-find); }
.x3m .cncpt .cc:nth-child(4n+3) { --pc: var(--c-control); }
.x3m .cncpt .cc:nth-child(4n+4) { --pc: var(--c-command); }
.x3m .cncpt .cc h3 { display: flex; align-items: baseline; gap: 10px; }
.x3m .cncpt .cc h3::before { counter-increment: part; content: counter(part, decimal-leading-zero); font: 800 12px var(--mono); color: var(--pc); flex: none; }
.x3m .cncpt { counter-reset: part; border-top: 0; }
.x3m .cncpt .cc { border-top: 3px solid var(--pc); }
.x3m .three > div:nth-child(1) h3 { color: var(--c-know); }
.x3m .three > div:nth-child(2) h3 { color: var(--c-command); }
.x3m .three > div:nth-child(3) h3 { color: var(--c-control); }
.x3m .tl li::before { background: var(--stage); box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage) 18%, transparent); }
.x3m .tl .n { color: var(--stage); }
.x3m .tkpill:nth-child(6n+2) .g { background: var(--c-find); }
.x3m .tkpill:nth-child(6n+3) .g { background: var(--c-control); }
.x3m .tkpill:nth-child(6n+4) .g { background: var(--c-prepare); }
.x3m .tkpill:nth-child(6n+5) .g { background: var(--c-learn); }
.x3m .tkpill:nth-child(6n+6) .g { background: var(--c-know); }
.x3m .chips a { border-left: 3px solid var(--cc, var(--line2)); }
.x3m .chips a b { color: var(--cc, var(--cyan2)); }

/* portfolio: each step row and each tile in the picture grid carries its step colour */
.x3m .stage { --sc: var(--c-know); }
.x3m .stage:nth-of-type(2) { --sc: var(--c-find); }
.x3m .stage:nth-of-type(3) { --sc: var(--c-control); }
.x3m .stage:nth-of-type(4) { --sc: var(--c-prepare); }
.x3m .stage:nth-of-type(5) { --sc: var(--c-learn); }
.x3m .stage:nth-of-type(6) { --sc: var(--c-command); }
.x3m .stagehead .n { background: var(--sc); }
.x3m .stagehead h3 { border-bottom: 3px solid var(--sc); padding-bottom: 4px; }
.x3m .prow h4 { color: var(--sc); }
.x3m .mosaic li:nth-child(2) .lb b { background: var(--c-find); }
.x3m .mosaic li:nth-child(3) .lb b { background: var(--c-control); }
.x3m .mosaic li:nth-child(4) .lb b { background: var(--c-prepare); }
.x3m .mosaic li:nth-child(5) .lb b { background: var(--c-learn); }
.x3m .mosaic li:nth-child(6) .lb b { background: var(--c-command); }

/* background bands: a picture fills the section the way the hero does - shown whole, anchored right, words on the left */
.x3m .bgband { position: relative; overflow: hidden; background: #000; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: clamp(540px, 46vw, 780px); display: flex; align-items: center; }
.x3m .bgband > img.bg { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 22%, #000 46%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 22%, #000 46%); }
.x3m .bgband.photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.96) 34%, rgba(0,0,0,.7) 50%, rgba(0,0,0,.14) 66%, transparent 78%); }
.x3m .bgband.render::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.94) 36%, rgba(0,0,0,.5) 54%, transparent 72%); }
.x3m .bgband > .wrap { position: relative; z-index: 2; width: 100%; }
.x3m .bgband .col { max-width: min(660px, 54%); }
.x3m .bgband .dims { grid-template-columns: 1fr 1fr; margin-top: 28px; }
.x3m .three.stack { grid-template-columns: 1fr; gap: 16px; margin: 26px 0 0; max-width: none; text-align: left; }
.x3m .three.stack h3 { font-size: 20px; }
@media (max-width: 1100px) {
  .x3m .bgband { display: block; min-height: 0; padding-top: 0; }
  .x3m .bgband > img.bg { position: static; display: block; width: 100%; height: auto; -webkit-mask-image: none; mask-image: none; margin-bottom: 30px; }
  .x3m .bgband::before { display: none; }
  .x3m .bgband .col { max-width: none; }
}
@media (max-width: 560px) { .x3m .bgband .dims { grid-template-columns: 1fr; } }

/* extra picture slots (shown only once the image file exists) */
.x3m .ph.blend img { border-radius: 0; }
.x3m .intelgrid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.x3m .intelgrid .dims { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .x3m .intelgrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .x3m .intelgrid .dims { grid-template-columns: 1fr; } }
.x3m .partgrid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: center; margin-top: 30px; }
.x3m .partgrid .cncpt { grid-template-columns: 1fr 1fr; margin-top: 0; gap: 0 28px; }
.x3m .partgrid .cncpt .cc { padding: 18px 0 20px; }
.x3m .partgrid .cncpt .cc + .cc { padding-left: 0; border-left: 0; }
@media (max-width: 940px) { .x3m .partgrid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .x3m .partgrid .cncpt { grid-template-columns: 1fr; } }
.x3m .wide { margin: 34px auto 0; max-width: 1040px; }
.x3m .wide img { display: block; width: 100%; height: auto; border-radius: 14px; }
.x3m .samplegrid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: 34px; }
.x3m .samplegrid .ph img { border-radius: 12px; }
.x3m .samplegrid .record { margin-top: 0; }
.x3m .samplegrid .dstats { grid-template-columns: 1fr 1fr; }
.x3m .samplegrid .dstat:nth-child(odd) { padding-left: 0; border-left: 0; }
.x3m .samplegrid .dstat:nth-child(n+3) { border-top: 1px solid var(--line2); }
@media (max-width: 1000px) { .x3m .samplegrid { grid-template-columns: 1fr; } }
.x3m .faqpic { margin-top: 26px; max-width: 380px; }
.x3m .faqpic img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .x3m .faqpic { max-width: 260px; } }

@media (prefers-reduced-motion: reduce) {
  .x3m * { scroll-behavior: auto !important; transition: none !important; }
  .x3m .tkrow { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding: 0 var(--pad); }
  .x3m .tkrow [aria-hidden="true"] { display: none; }
  .x3m .tkhead .dotp { animation: none; }
  .x3m .tkfade { display: none; }
}

/* ---------- the dashboard's screens, listed on the product page ---------- */
.x3m .screens { margin-top: 44px; }
.x3m .screens h3 { font: 800 clamp(20px, 2vw, 26px)/1.2 var(--display); color: #fff; text-align: center; margin: 0 0 22px; }
.x3m .screens ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 6px 26px; }
.x3m .screens a { display: flex; gap: 14px; align-items: flex-start; padding: 14px 4px 14px 0; border-top: 1px solid var(--line2); color: inherit; text-decoration: none; }
.x3m .screens a:hover b { color: var(--cyan2); }
.x3m .screens .n { flex: none; font: 800 13px/1.6 var(--mono); color: var(--stage, var(--cyan)); letter-spacing: .06em; }
.x3m .screens b { display: block; font: 700 17px/1.3 var(--body); color: #fff; }
.x3m .screens small { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--fg2, #d3dfee); }

/* Pricing ladder and calculator */
.x3m .pricing { max-width: 1040px; margin: 30px auto 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.x3m .pricing-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.x3m .pricing-steps b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 2.8vw, 40px); color: var(--cyan); line-height: 1; }
.x3m .pricing-steps span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--fg2); }
.x3m .pricing-calc label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); margin-bottom: 8px; }
.x3m .pricing-calc input { width: 150px; min-height: 48px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line2); background: #000; color: #fff; font: 700 20px/1 var(--body); }
.x3m .pricing-calc input:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
.x3m .pricing-calc p { margin: 10px 0 0; font-size: 16px; color: var(--fg2); }
.x3m .pricing-calc a { color: var(--cyan); }
.x3m .pricing-calc p b { font-family: var(--display); font-weight: 900; font-size: 30px; color: #fff; margin-right: 6px; }
@media (max-width: 820px) { .x3m .pricing { grid-template-columns: 1fr; } .x3m .pricing-steps { grid-template-columns: 1fr; } }
/* On product pages the two price cards carry the prices, so only the calculator follows them. */
.x3m .pricing.solo { display: block; margin-top: 40px; padding: 24px 0; }
.x3m .pricing.solo .pricing-calc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.x3m .pricing.solo .pricing-calc label { margin: 0; }
.x3m .pricing.solo .pricing-calc > div { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.x3m .pricing.solo .pricing-calc p { margin: 0; }

/* ---------- the 404 page ---------- */
.x3m .nf { border-bottom: 1px solid var(--line); padding: clamp(72px, 12vh, 140px) 0; text-align: center; background: radial-gradient(900px 420px at 50% 0%, rgba(0,178,253,.14), transparent 62%), #000; }
.x3m .nf h1 { margin: 16px auto 0; max-width: 16em; font-weight: 900; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; }
.x3m .nf .sub { margin: 18px auto 0; max-width: 36em; }
.x3m .nf .hcta { justify-content: center; margin-top: 30px; }
.x3m[data-page="not-found"] main, .x3m[data-page="legal"] main { min-height: 50vh; }

/* ---------- phones: the main button sits above the fold, before the paragraph ---------- */
@media (max-width: 760px) {
  .x3m .hero .col, .x3m .phero .in > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
  .x3m .hero .col > .hcta, .x3m .phero .in > div:first-child > .hcta { order: 1; margin-top: 18px; }
  .x3m .hero .col > .free, .x3m .phero .in > div:first-child > .free { order: 2; }
  .x3m .hero .col > .lead, .x3m .phero .in > div:first-child > .lead { order: 3; margin: 18px 0 0; }
  .x3m .hero .col > .fine { order: 4; }
  .x3m .hero .hl { font-size: 32px; }
  .x3m .phero .hl { font-size: 34px; }
}
/* On phones the Ask X3 bubble waits until the visitor has scrolled past the hero (set by HeroWatch). */
@media (max-width: 760px) {
  .x3m:not([data-past-hero]) .x3ask:not(:has(.x3ask__window)) { display: none; }
}

/* ---------- X3 PPE and X3 Exposure: their photos are framed tight, so they sit zoomed out in black, whole ---------- */
@media (min-width: 1101px) {
  .x3m[data-product-id="ppe"] .hero > img, .x3m[data-product-id="exposure"] .hero > img {
    top: 9%; height: 82%; right: var(--pad);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 96%, transparent 100%), linear-gradient(0deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 96%, transparent 100%), linear-gradient(0deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-composite: intersect;
  }
}
@media (max-width: 1100px) {
  .x3m[data-product-id="ppe"] .hero > img, .x3m[data-product-id="exposure"] .hero > img { width: calc(100% - 2 * var(--pad)); margin: 22px auto 0; border-radius: 12px; }
}

/* ---------- free tools, listed on the portfolio and each product page: a ruled list, not boxes ---------- */
.x3m .toollist { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(24px, 3vw, 44px); }
.x3m .head.center + .toollist { margin-top: 34px; }
.x3m .toollist a { display: flex; flex-direction: column; gap: 6px; padding: 20px 0 22px; border-top: 2px solid color-mix(in srgb, var(--stage, var(--cyan)) 60%, transparent); height: 100%; }
.x3m .toollist .tc { font-size: 12.5px; font-weight: 700; color: var(--cyan2); }
.x3m .toollist b { font: 800 19px/1.25 var(--display); color: #fff; letter-spacing: -.01em; }
.x3m .toollist .tl1 { font-size: 15px; color: var(--fg2); line-height: 1.5; flex: 1; }
.x3m .toollist .go { margin-top: 6px; font: 700 14px var(--body); color: var(--cyan2); }
.x3m .toollist a:hover b { color: var(--cyan2); }
.x3m .ulink { color: var(--cyan2); text-decoration: underline; text-underline-offset: 3px; }
.x3m .pricing-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.x3m .pricing.solo .pricing-go { margin-top: 0; }
.x3m .pricing-calc .pricing-go .btn-primary { color: #04121d; }
.x3m .pricing-calc .pricing-go .btn-gh { color: #fff; }