/* Generated from site.css and nav.css for older page layouts. */
:root { --nav-skin: light; }
#topnav, #sitefoot {
  --blue:#0D4FD3; --dark:#072259; --night:#04102B; --ink:#1C1A17;
  --white:#FFFFFF; --light:#F4F5F7; --line:#E3E5E9; --sub:#55565A;
  font-family:'Gotham','Helvetica Neue',Arial,sans-serif; font-weight:400;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}

/* css/site.css — the inner-page skin (about, platform, ai).
   These are platform.html's rules, kept in their original order: platform is the baseline,
   so wherever a page and this file overlap, this file wins and the page adds only what it
   alone needs. index.html keeps its own css/index.css. Gotham lives in css/fonts.css. */

  
  #topnav *, #sitefoot *{ box-sizing: border-box; }
  
  @media (prefers-reduced-motion: reduce) {  }
  
  /* Brand guide p.13: Line Space 1.2, Line Spacing -25 (= -0.025em) */
  #topnav h1, #sitefoot h1,
#topnav h2, #sitefoot h2,
#topnav h3, #sitefoot h3{ margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
  /* card-scale h3 (16–23px) sits next to 1.55 body copy, so it needs more air */
  #topnav h3, #sitefoot h3{ line-height: 1.4; }
  /* display-scale h3 keeps heading leading */
  #topnav .relay__hand h3, #sitefoot .relay__hand h3{ line-height: 1.2; }
  #topnav p, #sitefoot p{ margin: 0; }
  #topnav a, #sitefoot a{ color: var(--blue); }
  #topnav :focus-visible, #sitefoot :focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }
  #topnav .wrap, #sitefoot .wrap{ max-width: 1160px; margin: 0 auto; padding: 0 28px; }

  #topnav .eyebrow, #sitefoot .eyebrow{ font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }

  /* Buttons — brand guide p.17 */
  /* Height comes from min-height, not from vertical padding. The calendar
     icon is 18px against a 13px line-height, so padding-driven buttons grew
     to 56px with an icon and stayed 51px without one; min-height with no
     vertical padding pins every button to the same 52px whatever it holds. */
  #topnav .btn, #sitefoot .btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    text-decoration: none; text-align: center;
    font-size: 13px; font-weight: 700; letter-spacing: .01em; text-transform: none; line-height: 1;
    min-height: 52px; padding: 0 26px; border-radius: 0; white-space: nowrap;
    /* corner cut at the W's exact angle: 11.27 x 12.80 in the logotype = 48.6 deg */
    clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 13.636px), calc(100% - 11.88px) calc(100% + 1px), -1px calc(100% + 1px));
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }
  #topnav .btn, #sitefoot .btn{ position: relative; }
  /* Corner-cut polygons start 1px outside the box (-1px / 100% + 1px) rather than on its
     edge: a box at a fractional y lands its 1px top and bottom borders on a pixel row the
     clip edge only half covers, which rendered them at 50-80% strength next to full-strength
     side borders. Only the diagonal is meant to be clipped, and its line is unchanged, just
     extended 1px past both ends. */
  /* the corner cut removes part of the border run; this redraws the diagonal edge */
  /* The corner cut removes part of the border run, so the diagonal edge is
     redrawn here. It is an exact quad, not a rotated bar: two points on the
     cut itself, two mitred into the inner edges of the side and bottom
     borders. A rotated rectangle cannot mitre, which is what left visible
     nubs poking past both ends of the old stroke. */
  #topnav .btn-outline-white::after, #sitefoot .btn-outline-white::after,
#topnav .chip::after, #sitefoot .chip::after,
#topnav ul.certs li::after, #sitefoot ul.certs li::after,
#topnav .cap::after, #sitefoot .cap::after,
#topnav .foot-ai::after, #sitefoot .foot-ai::after,
#topnav .awards span::after, #sitefoot .awards span::after{
    content: ""; position: absolute; inset: -1px; pointer-events: none;
    background: var(--edge, transparent);
  }
  #topnav .btn-outline-white::after, #sitefoot .btn-outline-white::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 14.240px), calc(100% - 1.000px) calc(100% - 12.120px), calc(100% - 10.786px) calc(100% - 1.000px), calc(100% - 12.651px) calc(100% - 1.000px)); }
  #topnav .chip::after, #sitefoot .chip::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 10.735px), calc(100% - 1.000px) calc(100% - 8.628px), calc(100% - 7.780px) calc(100% - 1.000px), calc(100% - 9.653px) calc(100% - 1.000px)); }
  #topnav .btn .ar, #sitefoot .btn .ar{ transition: transform .18s ease; }
  #topnav .btn:hover .ar, #sitefoot .btn:hover .ar{ transform: translateX(4px); }
  #topnav .btn:focus-visible, #sitefoot .btn:focus-visible{ outline: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); }
  #topnav .btn-primary, #sitefoot .btn-primary{ background: var(--blue); color: var(--white); border: 1px solid var(--blue); }
  #topnav .btn-primary:hover, #sitefoot .btn-primary:hover{ background: var(--dark); border-color: var(--dark); }
  #topnav .btn-on-blue, #sitefoot .btn-on-blue{ background: var(--white); color: var(--blue); border: 1px solid var(--white); }
  #topnav .btn-on-blue:hover, #sitefoot .btn-on-blue:hover{ background: var(--dark); color: var(--white); border-color: var(--dark); }
  #topnav .btn-outline-white, #sitefoot .btn-outline-white{ background: rgba(255,255,255,0); color: var(--white); border: 1px solid rgba(255,255,255,.65); --edge: rgba(255,255,255,.65); }
  #topnav .btn-outline-white:hover, #sitefoot .btn-outline-white:hover{ --edge: var(--white); }
  #topnav .btn-outline-white:hover, #sitefoot .btn-outline-white:hover{ background: var(--white); color: var(--dark); border-color: var(--white); }
  #topnav .hero-link, #sitefoot .hero-link{
    display: inline-flex; align-items: center; min-height: 52px; padding: 0 6px;
    color: rgba(255,255,255,.8); font-size: 15px; font-weight: 500; text-decoration: none;
  }


  /* ---------- Nav: transparent over hero, solid on scroll ---------- */
  #topnav{
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: transparent; border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease;
  }
  #topnav .nav-in, #sitefoot .nav-in{ display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center;
    height: 84px; gap: 20px; max-width: 1320px; }
  #topnav .nav-right, #sitefoot .nav-right{ display: flex; align-items: center; gap: 16px; justify-self: end; }
  #topnav .logo, #sitefoot .logo{ display: inline-flex; align-items: center; justify-self: start; text-decoration: none; color: var(--white); transition: color .25s ease; }
  #topnav .logo svg, #sitefoot .logo svg{ height: 31px; width: auto; display: block; }   /* 26px until 2026-09-24: logo +20% */
  #topnav .nav-links, #sitefoot .nav-links{ display: flex; gap: 22px; justify-self: center; }
  #topnav .nav-links a, #sitefoot .nav-links a{ color: rgba(255,255,255,.85); text-decoration: none; font-size: 15.6px; font-weight: 500;   /* 12px until 2026-09-24: menu +30% */
    letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; transition: color .2s ease; }

  #topnav .nav-links a:hover, #sitefoot .nav-links a:hover{ color: var(--white); }
  #topnav.scrolled{ background: var(--white); border-bottom-color: var(--line); }
  #topnav.scrolled .logo{ color: var(--blue); }
  #topnav.scrolled .nav-links a{ color: var(--ink); }
  #topnav.scrolled .nav-links a:hover{ color: var(--blue); }
  @media (max-width: 1280px) {
    #topnav .nav-links, #sitefoot .nav-links{ gap: 16px; }
    #topnav .nav-links a, #sitefoot .nav-links a{ font-size: 15px; letter-spacing: .06em; }
    #topnav .nav-right, #sitefoot .nav-right{ gap: 12px; }
    #topnav .nav-cta .btn, #sitefoot .nav-cta .btn{ min-height: 46px; padding: 0 18px; font-size: 11.5px; }
  }
  @media (max-width: 1100px) {
    #topnav .nav-links, #sitefoot .nav-links{ display: none; }
    #topnav .nav-in, #sitefoot .nav-in{ grid-template-columns: 1fr auto; height: 68px; gap: 12px; }
    #topnav .nav-right, #sitefoot .nav-right{ gap: 10px; }
    #topnav .logo svg, #sitefoot .logo svg{ height: 26px; }
    #topnav .nav-cta .btn, #sitefoot .nav-cta .btn{ min-height: 44px; padding: 0 16px; font-size: 11px; }
  }

  /* ---------- Hero: night globe ---------- */
  #topnav #gl, #sitefoot #gl{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
  #topnav .hero-vig, #sitefoot .hero-vig{ position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(2,7,20,.5) 100%); }
  #topnav .hero-grn, #sitefoot .hero-grn{ position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
    mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* ---------- Hero: blue-hour signal field ---------- */
  #topnav header.hero, #sitefoot header.hero{
    position: relative; min-height: 96vh; display: flex; align-items: center;
    background: linear-gradient(180deg, #030B1F 0%, #061B45 62%, #072259 100%);
    overflow: hidden; color: var(--white);
  }
  #topnav .hero-media, #sitefoot .hero-media{ position: absolute; inset: 0; overflow: hidden; }
  #topnav .hero-media video, #sitefoot .hero-media video{
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.5) brightness(.72) contrast(1.06);
  }
  #topnav .hero-media .tint, #sitefoot .hero-media .tint{ position: absolute; inset: 0; background: var(--blue); opacity: .32; }
  @supports (mix-blend-mode: color) {
    #topnav .hero-media .tint, #sitefoot .hero-media .tint{ mix-blend-mode: color; opacity: .85; }
  }
  #topnav .hero-media .veil, #sitefoot .hero-media .veil{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(4,16,43,.60) 0%, rgba(7,34,89,.48) 55%, rgba(4,16,43,.80) 100%);
  }
  #topnav .hero-scrim, #sitefoot .hero-scrim{
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(3,11,31,.82) 0%, rgba(3,11,31,.55) 38%, rgba(3,11,31,0) 68%);
  }
  #topnav .hero-in, #sitefoot .hero-in{ position: relative; z-index: 2; padding: 140px 0 120px; max-width: 660px; }
  #topnav .hero .eyebrow, #sitefoot .hero .eyebrow{ display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.82); margin-bottom: 28px; }
  #topnav .spark, #sitefoot .spark{ width: 14px; height: 17px; flex: none; display: block;
    filter: drop-shadow(0 0 7px rgba(76,134,245,.55)); }
  #topnav .hero h1, #sitefoot .hero h1{ font-size: clamp(46px, 7.6vw, 92px); color: var(--white); }
  #topnav .hero-sub, #sitefoot .hero-sub{ margin-top: 30px; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 44ch; }
  #topnav .hero-ctas, #sitefoot .hero-ctas{ display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
  #topnav .scroll-cue, #sitefoot .scroll-cue{
    position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: 26px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: rgba(255,255,255,.6); font-size: 11.5px; letter-spacing: .04em; text-transform: none; font-weight: 500;
    text-decoration: none;
  }
  #topnav .scroll-cue, #sitefoot .scroll-cue{ text-shadow: 0 2px 14px rgba(2,7,20,.85); }
  #topnav .scroll-cue svg, #sitefoot .scroll-cue svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; animation: cue 2.2s ease-in-out infinite; }
  @keyframes cue { 0%,100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { #topnav .scroll-cue svg, #sitefoot .scroll-cue svg{ animation: none; } }
  @media (max-width: 640px) { #topnav .hero-in, #sitefoot .hero-in{ padding: 120px 0 110px; } #topnav .hero, #sitefoot .hero{ min-height: 86vh; } }

  /* ---------- Reveal system ---------- */
  #topnav .rv, #sitefoot .rv{ opacity: 0; transform: translateY(18px); transition: opacity .65s cubic-bezier(.2,.6,.2,1), transform .65s cubic-bezier(.2,.6,.2,1); }
  #topnav .rv.on, #sitefoot .rv.on{ opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { #topnav .rv, #sitefoot .rv{ opacity: 1; transform: none; transition: none; } }

  /* ---------- Trust ---------- */
  #topnav section.trust, #sitefoot section.trust{ padding: 88px 0 80px; border-bottom: 0; }
  #topnav .trust-label, #sitefoot .trust-label{ font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub); }
  #topnav .logo-row, #sitefoot .logo-row{ display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; margin-top: 30px; }
  #topnav .logo-row img, #sitefoot .logo-row img{ height: 28px; width: auto; max-width: 116px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: opacity .2s ease, filter .2s ease; }
  #topnav .logo-row img:hover, #sitefoot .logo-row img:hover{ filter: none; opacity: 1; }
  #topnav .trust-note, #sitefoot .trust-note{ margin-top: 26px; font-size: 12.5px; font-style: italic; color: var(--sub); max-width: 72ch; }

  /* ---------- Section heads ---------- */
  #topnav .sec-head, #sitefoot .sec-head{ max-width: 680px; }
  #topnav .sec-head h2, #sitefoot .sec-head h2{ font-size: clamp(32px, 4.6vw, 52px); margin-top: 16px; }
  #topnav .sec-head .lede, #sitefoot .sec-head .lede{ margin-top: 18px; font-size: 17px; color: var(--sub); line-height: 1.62; }

  /* ---------- Platform ---------- */
  #topnav section.platform, #sitefoot section.platform{ padding: 150px 0 0; }
  /* The platform as it actually is: one system diagram */
  #topnav .sys, #sitefoot .sys{ margin-top: 76px; }
  #topnav .sys-api, #sitefoot .sys-api{
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
    font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub);
    padding-bottom: 14px;
  }
  #topnav .sys-api span, #sitefoot .sys-api span{ color: var(--ink); }
  #topnav .sys-groups, #sitefoot .sys-groups{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
  #topnav .grp-head, #sitefoot .grp-head{ display: flex; align-items: baseline; gap: 12px; }
  #topnav .grp-head .gk, #sitefoot .grp-head .gk{ font-size: 13px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
  #topnav .grp-head h3, #sitefoot .grp-head h3{ font-size: 23px; letter-spacing: -0.015em; }
  #topnav .grp .tag, #sitefoot .grp .tag{ margin-top: 6px; font-size: 14px; color: var(--sub); line-height: 1.55; }
  #topnav .grp .blocks, #sitefoot .grp .blocks{ margin-top: 16px; border-bottom: 1px solid var(--line); }
  #topnav .grp .blocks span, #sitefoot .grp .blocks span{
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 9px 0; border-top: 1px solid var(--line);
    font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.45;
  }
  #topnav .grp .blocks small, #sitefoot .grp .blocks small{
    font-size: 12px; font-weight: 400; color: var(--sub); text-align: right;
    font-variant-numeric: tabular-nums; flex-shrink: 0;
  }
  #topnav .grp .more, #sitefoot .grp .more{ display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 500; text-decoration: none; }

  #topnav .sys-connect, #sitefoot .sys-connect{ display: grid; grid-template-columns: repeat(3, 1fr); height: 26px; margin-top: 8px; }
  #topnav .sys-connect i, #sitefoot .sys-connect i{ justify-self: center; width: 1px; background: #C9D2E4; }
  #topnav .sys-base, #sitefoot .sys-base{ display: grid; grid-template-columns: repeat(3, 1fr); background: var(--dark); border-radius: 10px; overflow: hidden; }
  #topnav .sys-base > div, #sitefoot .sys-base > div{ padding: 18px 20px; color: var(--white); font-size: 14px; font-weight: 500; text-align: center; transition: background-color .18s ease; }
  #topnav .sys-base > div + div, #sitefoot .sys-base > div + div{ border-left: 1px solid rgba(255,255,255,.16); }
  #topnav .sys-base .bk, #sitefoot .sys-base .bk{ display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; }
  #topnav .sys:has(.grp:nth-child(1):hover) .sys-base > div:nth-child(1), #sitefoot .sys:has(.grp:nth-child(1):hover) .sys-base > div:nth-child(1),
#topnav .sys:has(.grp:nth-child(2):hover) .sys-base > div:nth-child(2), #sitefoot .sys:has(.grp:nth-child(2):hover) .sys-base > div:nth-child(2),
#topnav .sys:has(.grp:nth-child(3):hover) .sys-base > div:nth-child(3), #sitefoot .sys:has(.grp:nth-child(3):hover) .sys-base > div:nth-child(3){ background: var(--blue); }
  @media (max-width: 880px) {
    #topnav .sys-groups, #sitefoot .sys-groups{ grid-template-columns: 1fr; gap: 36px; }
    #topnav .sys-connect, #sitefoot .sys-connect{ display: none; }
    #topnav .sys-base, #sitefoot .sys-base{ grid-template-columns: 1fr; margin-top: 28px; }
    #topnav .sys-base > div, #sitefoot .sys-base > div{ text-align: left; }
    #topnav .sys-base > div + div, #sitefoot .sys-base > div + div{ border-left: none; border-top: 1px solid rgba(255,255,255,.16); }
  }
  #topnav .platform-foot, #sitefoot .platform-foot{ margin-top: 36px; font-size: 15px; color: var(--sub); max-width: 74ch; }
  #topnav .platform-foot strong, #sitefoot .platform-foot strong{ color: var(--ink); font-weight: 700; }

  /* ---------- How it works: night section ---------- */
  #topnav section.record, #sitefoot section.record{
    margin-top: 150px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #051636 0%, #072259 58%, #051B45 100%);
    color: var(--white); padding: 128px 0 136px;
  }
  #topnav .record-glow, #sitefoot .record-glow{
    position: absolute; right: -160px; top: 8%; width: 720px; height: 720px; pointer-events: none;
    background: radial-gradient(circle, rgba(30,86,214,.28) 0%, rgba(30,86,214,0) 62%);
  }
  #topnav .record .eyebrow, #sitefoot .record .eyebrow{ color: rgba(255,255,255,.6); }
  #topnav .record h2, #sitefoot .record h2{ color: var(--white); }
  #topnav .record .lede, #sitefoot .record .lede{ color: rgba(255,255,255,.74); }
  #topnav .record-grid, #sitefoot .record-grid{ display: grid; grid-template-columns: 5fr 6fr; gap: 64px; margin-top: 68px; align-items: start; position: relative; }
  @media (max-width: 920px) { #topnav .record-grid, #sitefoot .record-grid{ grid-template-columns: 1fr; gap: 44px; } }
  #topnav .anno-item, #sitefoot .anno-item{ display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.15); }
  #topnav .anno-item:first-child, #sitefoot .anno-item:first-child{ border-top: none; padding-top: 0; }
  #topnav .anno-item .n, #sitefoot .anno-item .n{ font-weight: 700; font-size: 15px; color: rgba(255,255,255,.5); padding-top: 2px; }
  #topnav .anno-item h3, #sitefoot .anno-item h3{ font-size: 16.5px; letter-spacing: -0.01em; color: var(--white); }
  #topnav .anno-item p, #sitefoot .anno-item p{ margin-top: 5px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); }

  #topnav .rec-card, #sitefoot .rec-card{
    background: var(--white); border-radius: 16px; color: var(--ink); overflow: hidden;
    box-shadow: 0 40px 90px rgba(2,8,26,.55), 0 0 140px rgba(30,86,214,.22);
  }
  #topnav .rec-head, #sitefoot .rec-head{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
  #topnav .rec-head .t, #sitefoot .rec-head .t{ font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); }
  #topnav .rec-head .status, #sitefoot .rec-head .status{ font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--blue); text-transform: uppercase; }
  #topnav .rec-body, #sitefoot .rec-body{ padding: 10px 24px 18px; }
  #topnav .rec-row, #sitefoot .rec-row{ display: grid; grid-template-columns: 118px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
  #topnav .rec-row:last-child, #sitefoot .rec-row:last-child{ border-bottom: none; }
  #topnav .rec-row .rk, #sitefoot .rec-row .rk{ font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); padding-top: 3px; }
  #topnav .rec-row .rv2, #sitefoot .rec-row .rv2{ font-size: 14px; line-height: 1.55; }
  #topnav .rec-row .rv2 .fine, #sitefoot .rec-row .rv2 .fine{ color: var(--sub); font-size: 12.5px; }
  #topnav .rec-row .rv2 a, #sitefoot .rec-row .rv2 a{ font-weight: 500; text-decoration: none; }

  #topnav .rec-cap, #sitefoot .rec-cap{ margin-top: 14px; font-size: 12px; font-style: italic; color: rgba(255,255,255,.5); }

  /* ---------- Numbers ---------- */
  #topnav section.numbers, #sitefoot section.numbers{ padding: 150px 0 0; }
  #topnav .nums, #sitefoot .nums{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 64px; }
  @media (max-width: 900px) { #topnav .nums, #sitefoot .nums{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { #topnav .nums, #sitefoot .nums{ grid-template-columns: 1fr; } }
  #topnav .num, #sitefoot .num{ border-top: 2px solid var(--blue); padding-top: 18px; }
  #topnav .num .v, #sitefoot .num .v{ font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
  #topnav .num .v small, #sitefoot .num .v small{ font-size: 22px; font-weight: 700; color: var(--sub); }
  #topnav .num .l, #sitefoot .num .l{ margin-top: 8px; font-size: 15px; font-weight: 500; }
  #topnav .num .a, #sitefoot .num .a{ margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--sub); }
  #topnav .num .a a, #sitefoot .num .a a{ font-weight: 500; text-decoration: none; }

  #topnav .certs, #sitefoot .certs{ margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--sub); line-height: 1.8; }

  /* ---------- CTA ---------- */
  #topnav section.cta, #sitefoot section.cta{
    margin-top: 150px; position: relative; overflow: hidden; color: var(--white);
    background: linear-gradient(135deg, #0D4FD3 0%, #0A3CAB 78%, #093697 100%);
  }
  #topnav .cta-in, #sitefoot .cta-in{ position: relative; z-index: 1; padding: 96px 0; display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center; }
  @media (max-width: 820px) { #topnav .cta-in, #sitefoot .cta-in{ grid-template-columns: 1fr; padding: 74px 0; } }
  #topnav .cta h2, #sitefoot .cta h2{ color: var(--white); font-size: clamp(34px, 4.8vw, 54px); }
  #topnav .cta .lede, #sitefoot .cta .lede{ margin-top: 18px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 52ch; }
  #topnav .cta-side, #sitefoot .cta-side{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  #topnav .cta-contact, #sitefoot .cta-contact{ font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.85); }
  #topnav .cta-contact a, #sitefoot .cta-contact a{ color: var(--white); font-weight: 500; text-decoration: none; }

  #topnav .corner-motif, #sitefoot .corner-motif{ position: absolute; right: 0; bottom: 0; width: 230px; height: auto; pointer-events: none; }
  @media (max-width: 640px) { #topnav .corner-motif, #sitefoot .corner-motif{ width: 140px; } }

  /* ---------- Footer ---------- */
  #sitefoot{ background: var(--ink); color: rgba(255,255,255,.78); padding: 54px 0 46px; }
  #topnav .foot-top, #sitefoot .foot-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
  #topnav .foot-brand, #sitefoot .foot-brand{ display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  #topnav .foot-brand svg, #sitefoot .foot-brand svg{ height: 15px; width: auto; color: var(--white); }
  #topnav .foot-tag, #sitefoot .foot-tag{ font-size: 12.5px; color: rgba(255,255,255,.55); }
  #topnav .foot-links, #sitefoot .foot-links{ display: flex; gap: 26px; flex-wrap: wrap; }
  #topnav .foot-links a, #sitefoot .foot-links a{ color: rgba(255,255,255,.78); font-size: 13.5px; text-decoration: none; }
  #topnav .foot-links a:hover, #sitefoot .foot-links a:hover{ color: var(--white); }
  #topnav .foot-meta, #sitefoot .foot-meta{ margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; line-height: 1.8; color: rgba(255,255,255,.5); }

  /* ================= Copy-deck sections (added) ================= */
  #topnav .tint, #sitefoot .tint{ background: var(--light); }
  #topnav .sec-pad, #sitefoot .sec-pad{ padding: 130px 0; }
  #topnav .sec-pad-t, #sitefoot .sec-pad-t{ padding-top: 130px; }
  @media (max-width: 760px) { #topnav .sec-pad, #sitefoot .sec-pad{ padding: 88px 0; } #topnav .sec-pad-t, #sitefoot .sec-pad-t{ padding-top: 88px; } }
  #topnav .sec-head.wide, #sitefoot .sec-head.wide{ max-width: 820px; }
  #topnav .sec-head .sub2, #sitefoot .sec-head .sub2{ margin-top: 14px; font-size: 20px; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; line-height: 1.35; }
  #topnav .night .sec-head .sub2, #sitefoot .night .sec-head .sub2{ color: rgba(255,255,255,.9); }

  /* night wrapper reused by graph + signals */
  #topnav section.night, #sitefoot section.night{ position: relative; overflow: hidden; color: var(--white);
    background: linear-gradient(180deg, #051636 0%, #072259 58%, #051B45 100%); }
  #topnav section.night .eyebrow, #sitefoot section.night .eyebrow{ color: rgba(255,255,255,.62); }
  #topnav section.night h2, #sitefoot section.night h2,
#topnav section.night h3, #sitefoot section.night h3{ color: var(--white); }
  #topnav section.night .lede, #sitefoot section.night .lede{ color: rgba(255,255,255,.74); }
  #topnav .night-glow, #sitefoot .night-glow{ position: absolute; right: -160px; top: 6%; width: 720px; height: 720px; pointer-events: none;
    background: radial-gradient(circle, rgba(30,86,214,.28) 0%, rgba(30,86,214,0) 62%); }

  /* ---------- Graph Intelligence ---------- */
  #topnav .graph-grid, #sitefoot .graph-grid{ display: grid; grid-template-columns: 6fr 5fr; gap: 64px; margin-top: 64px; align-items: center; }
  @media (max-width: 920px) { #topnav .graph-grid, #sitefoot .graph-grid{ grid-template-columns: minmax(0, 1fr); gap: 40px; } #topnav .graph-grid .gviz, #sitefoot .graph-grid .gviz{ order: -1; } }
  /* an outline button under the graph measured 325px against a 264px column and pushed
     the whole grid off the screen; on phones every button in a stacked grid may wrap */
  @media (max-width: 600px) { #topnav .graph-grid .btn, #sitefoot .graph-grid .btn{ white-space: normal; max-width: 100%; line-height: 1.3; padding: 14px 20px; } }
  #topnav .gviz, #sitefoot .gviz{ position: relative; }
  /* the network sits on its own pool of shade, so the globe never competes with it */
  #topnav .gviz::before, #sitefoot .gviz::before{ content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
    background: radial-gradient(58% 54% at 50% 50%, rgba(3,11,31,.82) 0%, rgba(3,11,31,.42) 55%, rgba(3,11,31,0) 80%); }
  #topnav .gviz svg, #sitefoot .gviz svg{ width: 100%; height: auto; display: block; overflow: visible; }
  #topnav .gedge, #sitefoot .gedge{ stroke: rgba(255,255,255,.08); stroke-width: 1; fill: none; stroke-linecap: round;
    transition: stroke .45s ease, stroke-width .45s ease; }
  #topnav .gedge.on, #sitefoot .gedge.on{ stroke: #7FA9F8; stroke-width: 1.7; }
  #topnav .gpulse, #sitefoot .gpulse{ fill: #BFD4FF; opacity: 0; }
  #topnav .ghalo, #sitefoot .ghalo{ opacity: 0; transition: opacity .5s ease; }
  #topnav .gnode.on .ghalo, #sitefoot .gnode.on .ghalo{ opacity: 1; }
  #topnav .gping, #sitefoot .gping{ fill: none; stroke: #7FA9F8; stroke-width: 1.4; opacity: 0; }
  #topnav .gshape, #sitefoot .gshape{ fill: none; stroke: none;
    transition: stroke .3s ease, fill .3s ease; }
  #topnav .gnode.on .gshape, #sitefoot .gnode.on .gshape{ fill: none; stroke: none; }
  #topnav .gicon, #sitefoot .gicon{ stroke-width: 1.6; }
  #topnav .gicon, #sitefoot .gicon{ fill: none; stroke: rgba(255,255,255,.62); stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s ease; }
  #topnav .gnode.on .gicon, #sitefoot .gnode.on .gicon{ stroke: #EAF1FF; }
  #topnav .glabel, #sitefoot .glabel{ font-family: 'Gotham','Helvetica Neue',Arial,sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; text-anchor: middle; fill: rgba(255,255,255,.36);
    pointer-events: none; transition: fill .45s ease; }
  #topnav .gnode.on .glabel, #sitefoot .gnode.on .glabel{ fill: rgba(255,255,255,.95); }
  /* relationship tags: each lens narrates its own links */
  #topnav .gtag, #sitefoot .gtag{ opacity: 0; pointer-events: none; transition: opacity .5s ease; }
  #topnav .gtag.on, #sitefoot .gtag.on{ opacity: 1; }
  #topnav .gtag rect, #sitefoot .gtag rect{ fill: #041233; stroke: rgba(127,169,248,.42); stroke-width: 1; }
  #topnav .gtag text, #sitefoot .gtag text{ font-family: 'Gotham','Helvetica Neue',Arial,sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; fill: #BFD4FF; text-anchor: middle; }
  /* the high-risk alert: the system flags the entity each lens incriminates */
  #topnav .grisk, #sitefoot .grisk{ opacity: 0; pointer-events: none; transition: opacity .55s ease; }
  #topnav .gnode.risk .grisk, #sitefoot .gnode.risk .grisk{ opacity: 1; }
  #topnav .griskring, #sitefoot .griskring{ fill: none; stroke: #FF5C5C; stroke-width: 1.1; opacity: .45; }
  #topnav .gsonar, #sitefoot .gsonar{ fill: none; stroke: #FF5C5C; stroke-width: 1.1; opacity: 0;
    transform-box: fill-box; transform-origin: 50% 50%; }
  #topnav .gnode.risk .gsonar--1, #sitefoot .gnode.risk .gsonar--1{ animation: gsonar 3.4s cubic-bezier(.25,.6,.3,1) infinite; }
  #topnav .gnode.risk .gsonar--2, #sitefoot .gnode.risk .gsonar--2{ animation: gsonar 3.4s cubic-bezier(.25,.6,.3,1) 1.7s infinite; }
  @keyframes gsonar {
    0% { transform: scale(1); opacity: .42; }
    70% { opacity: .1; }
    100% { transform: scale(2.5); opacity: 0; }
  }
  #topnav .grisk-tag rect, #sitefoot .grisk-tag rect{ fill: #2B0E17; stroke: rgba(255,92,92,.55); stroke-width: 1; }
  #topnav .grisk-tag text, #sitefoot .grisk-tag text{ font-family: 'Gotham','Helvetica Neue',Arial,sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; fill: #FFB4B4; text-anchor: middle; }
  #topnav .grisk-dot, #sitefoot .grisk-dot{ fill: #FF5C5C; }
  @media (prefers-reduced-motion: reduce) {
    #topnav .gnode.risk .gsonar--1, #sitefoot .gnode.risk .gsonar--1,
#topnav .gnode.risk .gsonar--2, #sitefoot .gnode.risk .gsonar--2{ animation: none; }
  }
  #topnav .probing .gedge, #sitefoot .probing .gedge{ stroke: rgba(255,255,255,.045); }
  #topnav .probing .gedge.probe, #sitefoot .probing .gedge.probe{ stroke: #9DBEFF; stroke-width: 1.9; }
  #topnav .probing .gnode .gshape, #sitefoot .probing .gnode .gshape{ stroke: none; }
  #topnav .probing .gnode .gicon, #sitefoot .probing .gnode .gicon{ stroke: rgba(255,255,255,.28); }
  #topnav .probing .gnode .glabel, #sitefoot .probing .gnode .glabel{ fill: rgba(255,255,255,.22); }
  #topnav .probing .gnode .ghalo, #sitefoot .probing .gnode .ghalo{ opacity: 0; }
  #topnav .probing .gnode.probe .gshape, #sitefoot .probing .gnode.probe .gshape{ stroke: none; fill: none; }
  #topnav .probing .gnode.probe .gicon, #sitefoot .probing .gnode.probe .gicon{ stroke: #EAF1FF; }
  #topnav .probing .gnode.probe .glabel, #sitefoot .probing .gnode.probe .glabel{ fill: rgba(255,255,255,.95); }
  #topnav .probing .gnode.probe .ghalo, #sitefoot .probing .gnode.probe .ghalo{ opacity: 1; }
  #topnav .probing .gtag, #sitefoot .probing .gtag{ opacity: 0; transition-delay: 0ms !important; }
  #topnav .probing .gtag.probe, #sitefoot .probing .gtag.probe{ opacity: 1; }
  #topnav .probing .grisk, #sitefoot .probing .grisk{ opacity: 0; }
  #topnav .probing .gnode.risk.probe .grisk, #sitefoot .probing .gnode.risk.probe .grisk{ opacity: 1; }
  #topnav .probing .gpulse, #sitefoot .probing .gpulse{ opacity: 0 !important; }
  #topnav .gkey, #sitefoot .gkey{ margin-top: 18px; display: flex; gap: 22px; flex-wrap: wrap;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
  #topnav .gkey i, #sitefoot .gkey i{ display: inline-block; width: 7px; height: 7px; border: 1px solid rgba(255,255,255,.5); margin-right: 7px; }
  #topnav .gkey b:nth-child(2) i, #sitefoot .gkey b:nth-child(2) i{ border-radius: 50%; }
  #topnav .gkey b:nth-child(3) i, #sitefoot .gkey b:nth-child(3) i{ transform: rotate(45deg); }
  #topnav .lens, #sitefoot .lens{ display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    font-family: inherit; color: inherit; padding: 20px 0 20px 22px; position: relative;
    border-top: 1px solid rgba(255,255,255,.15); transition: padding-left .3s ease; }
  #topnav .lens:last-of-type, #sitefoot .lens:last-of-type{ border-bottom: 1px solid rgba(255,255,255,.15); }
  /* the marker echoes the chip cut into the W of the logotype.
     Its shape is constant — only the colour marks the active view. */
  #topnav .lens::before, #sitefoot .lens::before{ content: ""; position: absolute; left: 0; top: 26px; width: 9px; height: 11px;
    background: rgba(255,255,255,.28); transform: skewX(-18deg);
    transition: background-color .3s ease; }
  #topnav .lens[aria-selected="true"]::before, #sitefoot .lens[aria-selected="true"]::before{ background: #4C86F5; }
  #topnav .lens[aria-selected="true"], #sitefoot .lens[aria-selected="true"]{ padding-left: 30px; }
  #topnav .lens b, #sitefoot .lens b{ display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: rgba(255,255,255,.7); transition: color .3s ease; }
  #topnav .lens[aria-selected="true"] b, #sitefoot .lens[aria-selected="true"] b,
#topnav .lens:hover b, #sitefoot .lens:hover b{ color: var(--white); }
  #topnav .lens p, #sitefoot .lens p{ margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.55);
    max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, margin .4s ease; }
  #topnav .lens[aria-selected="true"] p, #sitefoot .lens[aria-selected="true"] p{ max-height: 90px; opacity: 1; margin-top: 7px; }

  /* ---------- Generic four/three column point grid ---------- */
  #topnav .pts, #sitefoot .pts{ display: grid; gap: 0 44px; margin-top: 56px; }
  #topnav .pts.c4, #sitefoot .pts.c4{ grid-template-columns: repeat(4, 1fr); }
  #topnav .pts.c3, #sitefoot .pts.c3{ grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 980px) { #topnav .pts.c4, #sitefoot .pts.c4{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { #topnav .pts.c4, #sitefoot .pts.c4,
#topnav .pts.c3, #sitefoot .pts.c3{ grid-template-columns: 1fr; } }
  #topnav .pt, #sitefoot .pt{ border-top: 2px solid var(--blue); padding: 20px 0 26px; }
  #topnav .pt h3, #sitefoot .pt h3{ font-size: 18px; letter-spacing: -0.015em; }
  #topnav .pt p, #sitefoot .pt p{ margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--sub); }
  #topnav section.night .pt, #sitefoot section.night .pt{ border-top-color: #4C86F5; }
  #topnav section.night .pt p, #sitefoot section.night .pt p{ color: rgba(255,255,255,.7); }

  /* ---------- Lifecycle rail ---------- */
  #topnav .rail, #sitefoot .rail{ margin-top: 60px; }
  #topnav .rail-track, #sitefoot .rail-track{ display: grid; grid-template-columns: repeat(6, 1fr); }
  #topnav .rail-track i, #sitefoot .rail-track i{ height: 9px; border-left: 1px solid var(--line); position: relative; }
  #topnav .rail-track i::before, #sitefoot .rail-track i::before{ content: ""; position: absolute; left: -4px; top: 0; width: 7px; height: 7px; background: var(--blue); transform: rotate(45deg); }
  #topnav .rail-cols, #sitefoot .rail-cols{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; padding-top: 22px; }
  #topnav .rail-col, #sitefoot .rail-col{ display: flex; flex-direction: column; }
  #topnav .rail-col h3, #sitefoot .rail-col h3{ margin-top: 8px; font-size: 19px; letter-spacing: -0.015em; }
  #topnav .rail-col p, #sitefoot .rail-col p{ margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--sub); }
  #topnav .rail-col .more, #sitefoot .rail-col .more{ margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 500; text-decoration: none; }

  @media (max-width: 980px) { #topnav .rail-cols, #sitefoot .rail-cols,
#topnav .rail-track, #sitefoot .rail-track{ grid-template-columns: repeat(3, 1fr); } #topnav .rail-cols, #sitefoot .rail-cols{ gap: 34px 24px; } }
  @media (max-width: 620px) { #topnav .rail-cols, #sitefoot .rail-cols{ grid-template-columns: 1fr; } #topnav .rail-track, #sitefoot .rail-track{ display: none; } }

  /* ---------- Capability cards ---------- */
  #topnav .caps, #sitefoot .caps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
  #topnav .cap, #sitefoot .cap{ position: relative; background: var(--white); border: 1px solid var(--line); --edge: var(--line);
    padding: 0; display: flex; flex-direction: column; transition: background-color .2s ease;
    /* free-standing tile, cut at the W's 48.6-degree angle like the buttons and chips */
    clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 15.138px), calc(100% - 13.179px) calc(100% + 1px), -1px calc(100% + 1px)); }
  /* the corner cut removes part of the border run; redraw the diagonal edge */
  /* 1.1px band at 1x (was 1.4px, which read heavier than the 1px straight borders); the 2x rule below keeps 1px */
  #topnav .cap::after, #sitefoot .cap::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 15.285px), calc(100% - 1.000px) calc(100% - 13.619px), calc(100% - 12.087px) calc(100% - 1.000px), calc(100% - 13.553px) calc(100% - 1.000px)); }
  #topnav .cap:hover, #sitefoot .cap:hover{ background: var(--light); }
  /* the abstract UI vignette: a small live panel across the top of the card */
  #topnav .cap .viz, #sitefoot .cap .viz{ display: block; border-bottom: 1px solid var(--line); background: rgba(3,11,31,.45);
    transition: border-color .3s ease; }
  #topnav .cap .viz svg, #sitefoot .cap .viz svg{ display: block; width: 100%; height: auto; }
  #topnav .cap h3, #sitefoot .cap h3{ margin: 22px 26px 0; font-size: 20px; letter-spacing: -0.015em; }
  #topnav .cap p, #sitefoot .cap p{ margin: 10px 26px 0; font-size: 14.5px; line-height: 1.6; color: var(--sub); }
  #topnav .cap .more, #sitefoot .cap .more{ margin: auto 26px 0; padding: 20px 0 24px; font-size: 13.5px; font-weight: 500; text-decoration: none; }

  @media (max-width: 980px) { #topnav .caps, #sitefoot .caps{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { #topnav .caps, #sitefoot .caps{ grid-template-columns: 1fr; gap: 18px; } }

  /* ---------- Integrate ---------- */
  #topnav .int-grid, #sitefoot .int-grid{ display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; margin-top: 8px; }
  @media (max-width: 920px) { #topnav .int-grid, #sitefoot .int-grid{ grid-template-columns: 1fr; gap: 36px; } }
  #topnav .chips, #sitefoot .chips{ display: flex; flex-wrap: wrap; gap: 10px; }
  #topnav .chip, #sitefoot .chip{ position: relative; border: 1px solid var(--line); padding: 12px 16px; font-size: 13.5px; font-weight: 500; color: var(--ink);
    --edge: var(--line);
    clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 10.125px), calc(100% - 8.889px) calc(100% + 1px), -1px calc(100% + 1px)); transition: border-color .2s ease, color .2s ease; }
  #topnav .chip:hover, #sitefoot .chip:hover{ border-color: var(--blue); color: var(--blue); --edge: var(--blue); }
  #topnav .chip.api, #sitefoot .chip.api{ background: var(--dark); border-color: var(--dark); color: var(--white); --edge: transparent; }

  /* ---------- Awards ---------- */
  #topnav .awards, #sitefoot .awards{ display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; margin-top: 34px;
    padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  #topnav .awards span, #sitefoot .awards span{ display: flex; align-items: center; justify-content: center; }
  #topnav .awards span img, #sitefoot .awards span img{ max-width: 132px; max-height: 52px; width: auto; height: auto;
    object-fit: contain; display: block; }
  #topnav .awards-note, #sitefoot .awards-note{ margin-top: 20px; font-size: 12.5px; font-style: italic; color: var(--sub); }

  /* ---------- FAQ ---------- */
  #topnav .faq, #sitefoot .faq{ margin-top: 52px; border-top: 1px solid var(--line); }
  #topnav .faq details, #sitefoot .faq details{ border-bottom: 1px solid var(--line); }
  #topnav .faq summary, #sitefoot .faq summary{ list-style: none; cursor: pointer; position: relative; padding: 24px 44px 24px 0;
    font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); transition: color .2s ease; }
  #topnav .faq summary::-webkit-details-marker, #sitefoot .faq summary::-webkit-details-marker{ display: none; }
  #topnav .faq summary:hover, #sitefoot .faq summary:hover{ color: var(--blue); }
  #topnav .faq summary::after, #sitefoot .faq summary::after{ content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
    border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
    transform: translateY(-70%) rotate(45deg); transition: transform .25s ease; }
  #topnav .faq details[open] summary::after, #sitefoot .faq details[open] summary::after{ transform: translateY(-30%) rotate(-135deg); }
  #topnav .faq .ans, #sitefoot .faq .ans{ padding: 0 120px 26px 0; font-size: 15px; line-height: 1.65; color: var(--sub); }
  #topnav .faq .ans p + p, #sitefoot .faq .ans p + p{ margin-top: 10px; }
  @media (max-width: 760px) { #topnav .faq .ans, #sitefoot .faq .ans{ padding-right: 0; } }


  /* =========================================================
     Centred hero · glass nav · language · section interactions
     ========================================================= */

  /* ---------- Hero: centred copy over a centred globe ---------- */
  #topnav header.hero, #sitefoot header.hero{ align-items: flex-start; min-height: 100vh; }
  #topnav .hero-in, #sitefoot .hero-in{ max-width: 900px; margin: 0 auto; text-align: center; padding: 136px 0 0; }
  #topnav .hero .eyebrow, #sitefoot .hero .eyebrow{ margin-bottom: 22px; }
  #topnav .hero h1, #sitefoot .hero h1{ font-size: clamp(34px, 4.6vw, 60px); line-height: 1.2; margin: 0 auto; max-width: 20ch; }
  #topnav .hero-sub, #sitefoot .hero-sub{ margin: 24px auto 0; max-width: 58ch; font-size: 18px; }
  #topnav .hero-ctas, #sitefoot .hero-ctas{ justify-content: center; margin-top: 32px; }
  #topnav .hero-strap, #sitefoot .hero-strap{ justify-content: center; margin-top: 30px; }
  @media (max-width: 900px) { #topnav .hero-in, #sitefoot .hero-in{ padding-top: 120px; } }
  @media (max-width: 640px) { #topnav .hero h1, #sitefoot .hero h1{ font-size: clamp(30px, 7.6vw, 40px); } #topnav .hero-sub, #sitefoot .hero-sub{ font-size: 16px; } }

  /* [nav: glass on scroll lives in css/nav.css] */

  /* ---------- Language selector ---------- */
  #topnav .lang, #sitefoot .lang{ position: relative; margin-left: 8px; }
  #topnav .lang-btn, #sitefoot .lang-btn{ display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.85);
    padding: 9px 8px; transition: color .2s ease; }
  #topnav .lang-btn svg, #sitefoot .lang-btn svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  #topnav .lang-btn .cv, #sitefoot .lang-btn .cv{ width: 11px; height: 11px; stroke-width: 2; transition: transform .2s ease; }
  #topnav .lang-btn[aria-expanded="true"] .cv, #sitefoot .lang-btn[aria-expanded="true"] .cv{ transform: rotate(180deg); }
  #topnav .lang-btn:hover, #sitefoot .lang-btn:hover{ color: var(--white); }
  #topnav.scrolled .lang-btn{ color: var(--ink); }
  #topnav.scrolled .lang-btn:hover{ color: var(--blue); }
  #topnav .lang-menu, #sitefoot .lang-menu{ position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; margin: 0; padding: 6px;
    list-style: none; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(7,34,89,.10);
    box-shadow: 0 18px 44px rgba(4,16,43,.18); opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s; }
  #topnav .lang.open .lang-menu, #sitefoot .lang.open .lang-menu{ opacity: 1; visibility: visible; transform: none; }
  #topnav .lang-menu li, #sitefoot .lang-menu li{ padding: 10px 12px; font-size: 14px; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 10px; }
  #topnav .lang-menu li:hover, #sitefoot .lang-menu li:hover,
#topnav .lang-menu li:focus-visible, #sitefoot .lang-menu li:focus-visible{ background: var(--light); color: var(--blue); outline: none; }
  #topnav .lang-menu li[aria-selected="true"]::after, #sitefoot .lang-menu li[aria-selected="true"]::after{ content: "✓"; margin-left: auto; color: var(--blue); font-weight: 700; }
  @media (max-width: 880px) { #topnav .lang, #sitefoot .lang{ margin-left: 0; } #topnav .lang-btn span, #sitefoot .lang-btn span{ display: none; } }

  /* ---------- Segmented control (shared) ---------- */
  #topnav .seg, #sitefoot .seg{ position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; margin-top: 38px; padding: 4px;
    border: 1px solid var(--line); background: var(--white); }
  #topnav .tint .seg, #sitefoot .tint .seg{ background: var(--white); }
  #topnav section.night .seg, #sitefoot section.night .seg{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
  #topnav .seg-b, #sitefoot .seg-b{ position: relative; z-index: 1; background: none; border: 0; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub);
    padding: 12px 20px; transition: color .2s ease; white-space: nowrap; }
  #topnav .seg-b em, #sitefoot .seg-b em{ font-style: normal; font-weight: 500; opacity: .6; margin-left: 5px; }
  #topnav .seg-b:hover, #sitefoot .seg-b:hover{ color: var(--ink); }
  #topnav .seg-b[aria-selected="true"], #sitefoot .seg-b[aria-selected="true"]{ color: var(--white); }
  #topnav section.night .seg-b, #sitefoot section.night .seg-b{ color: rgba(255,255,255,.6); }
  #topnav section.night .seg-b:hover, #sitefoot section.night .seg-b:hover{ color: var(--white); }
  #topnav .seg-pill, #sitefoot .seg-pill{ position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; background: var(--blue);
    transition: transform .32s cubic-bezier(.2,.7,.2,1), width .32s cubic-bezier(.2,.7,.2,1); }
  #topnav .seg.small .seg-b, #sitefoot .seg.small .seg-b{ padding: 10px 16px; font-size: 12px; }
  #topnav .seg.ghost, #sitefoot .seg.ghost{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); margin-top: 0; }
  #topnav .seg.ghost .seg-b, #sitefoot .seg.ghost .seg-b{ color: rgba(255,255,255,.72); padding: 10px 16px; font-size: 12px; }
  #topnav .seg.ghost .seg-b[aria-selected="true"], #sitefoot .seg.ghost .seg-b[aria-selected="true"]{ color: var(--blue); }
  #topnav .seg.ghost .seg-pill, #sitefoot .seg.ghost .seg-pill{ background: var(--white); }
  @media (max-width: 640px) { #topnav .seg, #sitefoot .seg{ display: flex; width: 100%; } #topnav .seg-b, #sitefoot .seg-b{ flex: 1; padding: 11px 8px; font-size: 11px; } }

  /* ---------- Trust marquee ---------- */
  #topnav .marquee, #sitefoot .marquee{ position: relative; margin-top: 30px; }
  #topnav .mq-mask, #sitefoot .mq-mask{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); }
  #topnav .mq-track, #sitefoot .mq-track{ display: flex; width: max-content; animation: mq 34s linear infinite; }
  #topnav .mq-set, #sitefoot .mq-set{ display: flex; align-items: center; gap: 70px; padding-right: 70px; margin-top: 0; }
  #topnav .marquee:hover .mq-track, #sitefoot .marquee:hover .mq-track,
#topnav .marquee:focus-within .mq-track, #sitefoot .marquee:focus-within .mq-track,
#topnav .marquee.paused .mq-track, #sitefoot .marquee.paused .mq-track{ animation-play-state: paused; }
  @keyframes mq { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { #topnav .mq-track, #sitefoot .mq-track{ animation: none; } }

  /* ---------- Patchwork stack diagram ---------- */
  #topnav .stack, #sitefoot .stack{ margin-top: 38px; }
  #topnav .stack-row, #sitefoot .stack-row{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  #topnav .node, #sitefoot .node{ border: 1px solid var(--line); background: var(--white); padding: 16px 12px; text-align: center;
    font-size: 13px; font-weight: 500; color: var(--ink);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s ease, opacity .3s ease; }
  #topnav .stack-link, #sitefoot .stack-link{ display: grid; grid-template-columns: repeat(5, 1fr); height: 26px; transition: opacity .3s ease; }
  #topnav .stack-link i, #sitefoot .stack-link i{ justify-self: center; width: 1px; background: #C9D2E4; }
  #topnav .stack-base, #sitefoot .stack-base{ background: var(--dark); color: var(--white); padding: 16px; text-align: center; font-size: 14px;
    font-weight: 500; transition: opacity .3s ease, transform .35s ease; }
  #topnav .stack-gaps, #sitefoot .stack-gaps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px;
    opacity: 0; height: 0; overflow: hidden; transition: opacity .3s ease; }
  #topnav .stack-gaps span, #sitefoot .stack-gaps span{ border-top: 2px solid #C0392B; padding-top: 10px; font-size: 13px; color: var(--sub); }
  #topnav .stack[data-state="apart"] .node:nth-child(1), #sitefoot .stack[data-state="apart"] .node:nth-child(1){ transform: translateY(-6px) rotate(-.6deg); }
  #topnav .stack[data-state="apart"] .node:nth-child(2), #sitefoot .stack[data-state="apart"] .node:nth-child(2){ transform: translateY(8px) rotate(.5deg); }
  #topnav .stack[data-state="apart"] .node:nth-child(3), #sitefoot .stack[data-state="apart"] .node:nth-child(3){ transform: translateY(-4px) rotate(.4deg); }
  #topnav .stack[data-state="apart"] .node:nth-child(4), #sitefoot .stack[data-state="apart"] .node:nth-child(4){ transform: translateY(10px) rotate(-.5deg); }
  #topnav .stack[data-state="apart"] .node:nth-child(5), #sitefoot .stack[data-state="apart"] .node:nth-child(5){ transform: translateY(-8px) rotate(.7deg); }
  #topnav .stack[data-state="apart"] .stack-link, #sitefoot .stack[data-state="apart"] .stack-link,
#topnav .stack[data-state="apart"] .stack-base, #sitefoot .stack[data-state="apart"] .stack-base{ opacity: .12; }
  #topnav .stack[data-state="apart"] .stack-gaps, #sitefoot .stack[data-state="apart"] .stack-gaps{ opacity: 1; height: auto; overflow: visible; }
  #topnav #patchPoints, #sitefoot #patchPoints{ transition: opacity .3s ease; }
  #topnav #patchPoints.dim, #sitefoot #patchPoints.dim{ opacity: .3; }
  @media (max-width: 760px) { #topnav .stack-row, #sitefoot .stack-row{ grid-template-columns: repeat(2, 1fr); } #topnav .stack-link, #sitefoot .stack-link{ display: none; }
    #topnav .stack-gaps, #sitefoot .stack-gaps{ grid-template-columns: 1fr; } }

  /* ---------- Lifecycle stepper ---------- */
  #topnav .rail-track, #sitefoot .rail-track{ position: relative; }
  #topnav .rail-fill, #sitefoot .rail-fill{ position: absolute; left: 0; top: 0; height: 100%; width: 0; border-left: 0;
    background: linear-gradient(90deg, rgba(13,79,211,.16), rgba(13,79,211,.04));
    transition: width .45s cubic-bezier(.2,.7,.2,1); }
  #topnav .rail-col, #sitefoot .rail-col{ cursor: pointer; padding: 0 12px 0 14px; margin-left: -14px; border-left: 2px solid transparent;
    transition: border-color .25s ease, opacity .25s ease; outline: none; }
  #topnav .rail-col:focus-visible, #sitefoot .rail-col:focus-visible{ outline: 2px solid var(--blue); outline-offset: 4px; }
  #topnav #railCols.engaged .rail-col, #sitefoot #railCols.engaged .rail-col{ opacity: .42; }
  #topnav #railCols.engaged .rail-col.active, #sitefoot #railCols.engaged .rail-col.active{ opacity: 1; border-left-color: var(--blue); }
  #topnav .rail-col.active h3, #sitefoot .rail-col.active h3{ color: var(--blue); }

  /* ---------- Capability filter ---------- */
  #topnav .cap, #sitefoot .cap{ transition: background-color .2s ease, opacity .3s ease, transform .3s ease; }
  #topnav .cap.hide, #sitefoot .cap.hide{ display: none; }

  /* ---------- AI toggle ---------- */
  #topnav .ai-line, #sitefoot .ai-line{ margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--sub); max-width: 74ch;
    transition: opacity .25s ease; }
  #topnav #aiPoints .pt, #sitefoot #aiPoints .pt{ transition: opacity .3s ease, border-color .3s ease; }
  #topnav #aiPoints[data-state="assist"] .pt[data-ai-role="decide"], #sitefoot #aiPoints[data-state="assist"] .pt[data-ai-role="decide"]{ opacity: .32; }
  #topnav #aiPoints[data-state="decide"] .pt[data-ai-role="assist"], #sitefoot #aiPoints[data-state="decide"] .pt[data-ai-role="assist"]{ opacity: .32; }
  #topnav #aiPoints[data-state="decide"] .pt[data-ai-role="decide"], #sitefoot #aiPoints[data-state="decide"] .pt[data-ai-role="decide"]{ border-top-color: var(--dark); }

  /* ---------- Signals ↔ record card ---------- */
  #topnav .anno-item, #sitefoot .anno-item{ cursor: pointer; padding-left: 14px; margin-left: -14px; border-left: 2px solid transparent;
    transition: border-color .25s ease, opacity .25s ease; outline: none; }
  #topnav .anno-item:focus-visible, #sitefoot .anno-item:focus-visible{ outline: 2px solid #4C86F5; outline-offset: 4px; }
  #topnav .record-grid.engaged .anno-item, #sitefoot .record-grid.engaged .anno-item{ opacity: .45; }
  #topnav .record-grid.engaged .anno-item.active, #sitefoot .record-grid.engaged .anno-item.active{ opacity: 1; border-left-color: #4C86F5; }
  #topnav .rec-row, #sitefoot .rec-row{ transition: background-color .3s ease, opacity .3s ease; }
  #topnav .rec-card.engaged .rec-row, #sitefoot .rec-card.engaged .rec-row{ opacity: .38; }
  #topnav .rec-card.engaged .rec-row.hit, #sitefoot .rec-card.engaged .rec-row.hit{ opacity: 1; background: rgba(13,79,211,.06); }

  /* ---------- Industries: photo ledger ----------
     Four hairline rows in the page's glass language. Each row leads with a
     photo tile that carries the industry name (titles at 60% of the H2 scale),
     followed by the description and an Explore unit. Hovering sweeps a
     translucent WIDTH Blue wash cut at the button angle and eases the photo.
     Placeholder imagery is cropped from the brand guide's own imagery board —
     replace each data URI with licensed photography before production. */
  #topnav .irows, #sitefoot .irows{ margin-top: 40px; border-top: 1px solid rgba(255,255,255,.16); }
  #topnav .irow, #sitefoot .irow{ position: relative; display: grid; align-items: center;
    grid-template-columns: clamp(220px, 25vw, 320px) minmax(0, 1fr) auto;
    gap: clamp(20px, 4vw, 56px); padding: clamp(11px, 1.5vw, 16px) clamp(14px, 1.8vw, 24px);
    border-bottom: 1px solid rgba(255,255,255,.16);
    text-decoration: none; color: var(--white); }
  #topnav .irow::before, #sitefoot .irow::before{ content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(13,79,211,0), rgba(13,79,211,.42) 18%, rgba(13,79,211,.08) 78%, rgba(13,79,211,0));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 12.3px) 100%, 0 100%);
    transition: opacity .3s ease; }
  #topnav .irow > *, #sitefoot .irow > *{ position: relative; }
  #topnav .irow-ph, #sitefoot .irow-ph{ overflow: hidden; aspect-ratio: 21 / 9; background: var(--night);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 10px) 100%, 0 100%); }
  #topnav .irow-ph img, #sitefoot .irow-ph img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.85); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  #topnav .irow-ph::after, #sitefoot .irow-ph::after{ content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(4,16,43,.44), rgba(4,16,43,.62)); }
  #topnav .irow-ph h3, #sitefoot .irow-ph h3{ position: absolute; z-index: 1; inset: 0; display: flex;
    align-items: center; justify-content: center; text-align: center; padding: 10px 16px;
    font-size: clamp(19px, 2.7vw, 30px); line-height: 1.12; color: var(--white); }
  #topnav .irow p, #sitefoot .irow p{ font-size: 15px; line-height: 1.62; max-width: 46ch; color: rgba(255,255,255,.72);
    transition: color .3s ease; }
  #topnav .irow-m, #sitefoot .irow-m{ justify-self: end; display: flex; align-items: center; gap: 10px; white-space: nowrap;
    font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.48); transition: color .3s ease; }
  #topnav .irow-m .ar, #sitefoot .irow-m .ar{ display: inline-block; font-size: 19px; line-height: 1; transition: transform .22s ease; }
  #topnav .irow:hover::before, #sitefoot .irow:hover::before,
#topnav .irow:focus-visible::before, #sitefoot .irow:focus-visible::before{ opacity: 1; }
  #topnav .irow:hover .irow-ph img, #sitefoot .irow:hover .irow-ph img,
#topnav .irow:focus-visible .irow-ph img, #sitefoot .irow:focus-visible .irow-ph img{ transform: scale(1.05); }
  #topnav .irow:hover p, #sitefoot .irow:hover p,
#topnav .irow:focus-visible p, #sitefoot .irow:focus-visible p{ color: rgba(255,255,255,.86); }
  #topnav .irow:hover .irow-m, #sitefoot .irow:hover .irow-m,
#topnav .irow:focus-visible .irow-m, #sitefoot .irow:focus-visible .irow-m{ color: var(--white); }
  #topnav .irow:hover .ar, #sitefoot .irow:hover .ar,
#topnav .irow:focus-visible .ar, #sitefoot .irow:focus-visible .ar{ transform: translateX(6px); }
  #topnav .irow:focus-visible, #sitefoot .irow:focus-visible{ outline-offset: -3px; }
  @media (max-width: 860px) {
    #topnav .irow, #sitefoot .irow{ grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 2px 26px; }
    #topnav .irow-ph, #sitefoot .irow-ph{ aspect-ratio: 21 / 9; }
    #topnav .irow-ph h3, #sitefoot .irow-ph h3{ font-size: clamp(21px, 6vw, 26px); }
    #topnav .irow p, #sitefoot .irow p{ max-width: none; }
    #topnav .irow-m, #sitefoot .irow-m{ justify-self: start; }
  }
  @media (prefers-reduced-motion: reduce) {
    #topnav .irow::before, #sitefoot .irow::before,
#topnav .irow-ph img, #sitefoot .irow-ph img,
#topnav .irow p, #sitefoot .irow p,
#topnav .irow-m, #sitefoot .irow-m,
#topnav .irow-m .ar, #sitefoot .irow-m .ar{ transition: none; }
    #topnav .irow:hover .irow-ph img, #sitefoot .irow:hover .irow-ph img,
#topnav .irow:focus-visible .irow-ph img, #sitefoot .irow:focus-visible .irow-ph img{ transform: none; }
  }


  /* ---------- Integrations / security filters ---------- */
  #topnav .chips, #sitefoot .chips{ margin-top: 26px; }
  #topnav .chip, #sitefoot .chip{ transition: border-color .2s ease, color .2s ease, opacity .3s ease; }
  #topnav .chip.hide, #sitefoot .chip.hide{ display: none; }
  #topnav .pt.hide, #sitefoot .pt.hide{ display: none; }
  #topnav .stat, #sitefoot .stat{ display: inline-block; margin-left: 8px; font-style: normal; font-size: 10px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; vertical-align: middle; }
  #topnav .s-certified, #sitefoot .s-certified{ background: rgba(13,79,211,.10); color: var(--blue); }
  #topnav .s-process, #sitefoot .s-process{ background: rgba(28,26,23,.08); color: var(--sub); }
  #topnav .s-supported, #sitefoot .s-supported{ background: rgba(7,34,89,.07); color: var(--dark); }

  /* ---------- Awards ---------- */
  #topnav .awards span, #sitefoot .awards span{ transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s ease; cursor: default; }
  #topnav .txt-toggle, #sitefoot .txt-toggle{ display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; background: none;
    border: 0; padding: 6px 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
  #topnav .txt-toggle .ar, #sitefoot .txt-toggle .ar{ transition: transform .25s ease; }
  #topnav .txt-toggle[aria-expanded="true"] .ar, #sitefoot .txt-toggle[aria-expanded="true"] .ar{ transform: rotate(180deg); }


  /* ---------- CTA office switcher ---------- */
  #topnav .office, #sitefoot .office{ width: 100%; }
  #topnav .cta-contact, #sitefoot .cta-contact{ margin-top: 16px; min-height: 66px; }
  #topnav #officeAddr, #sitefoot #officeAddr{ display: block; margin-top: 2px; }

  /* =========================================================
     Centred headline system
     ========================================================= */

  /* every section head is centred and measured */
  #topnav .sec-head, #sitefoot .sec-head,
#topnav .sec-head.wide, #sitefoot .sec-head.wide{ max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; }
  #topnav .sec-head h2, #sitefoot .sec-head h2{ margin-left: auto; margin-right: auto; }
  #topnav .sec-head .lede, #sitefoot .sec-head .lede,
#topnav .sec-head .sub2, #sitefoot .sec-head .sub2{ margin-left: auto; margin-right: auto; max-width: 78ch; }
  #topnav .sec-head .eyebrow, #sitefoot .sec-head .eyebrow{ justify-content: center; }

  /* controls and standalone buttons sit under a centred head */
  #topnav .seg, #sitefoot .seg{ display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
  #topnav .btn-row, #sitefoot .btn-row{ display: flex; justify-content: center; margin-top: 40px; }
  #topnav .ai-line, #sitefoot .ai-line{ margin-left: auto; margin-right: auto; text-align: center; }
  #topnav .txt-toggle, #sitefoot .txt-toggle{ margin-left: auto; margin-right: auto; }

  /* hero: sized for the two-line H1 */
  #topnav .hero h1, #sitefoot .hero h1{ font-size: clamp(34px, 4.5vw, 58px); max-width: none; letter-spacing: -0.03em; }
  #topnav .hero h1 br, #sitefoot .hero h1 br{ display: block; }
  #topnav .hero-sub, #sitefoot .hero-sub{ max-width: 54ch; }

  /* trust */
  #topnav section.trust .wrap > .trust-label, #sitefoot section.trust .wrap > .trust-label,
#topnav section.trust .wrap > p, #sitefoot section.trust .wrap > p{ text-align: center; }
  #topnav section.trust .wrap > p, #sitefoot section.trust .wrap > p{ margin-left: auto; margin-right: auto; }
  #topnav section.trust .certs, #sitefoot section.trust .certs{ text-align: center; }
  #topnav .marquee, #sitefoot .marquee{ display: flex; flex-direction: column; margin-top: 44px; }
  #topnav .mq-mask, #sitefoot .mq-mask{ order: 1; }

  /* patchwork diagram + integrations sit centred under their heads */
  #topnav .stack, #sitefoot .stack{ max-width: 1000px; margin-left: auto; margin-right: auto; }
  #topnav .chips, #sitefoot .chips{ justify-content: center; max-width: 860px; margin-left: auto; margin-right: auto; }

  /* awards */
  #topnav #awards .eyebrow, #sitefoot #awards .eyebrow{ display: flex; justify-content: center; }
  #topnav .awards, #sitefoot .awards{ justify-content: center; text-align: center; }
  #topnav .awards-note, #sitefoot .awards-note{ text-align: center; }

  /* faq: head centred, answers stay left for reading */
  #topnav .faq, #sitefoot .faq{ max-width: 900px; margin-left: auto; margin-right: auto; }
  #topnav .faq .ans, #sitefoot .faq .ans{ padding-right: 44px; }

  /* final CTA: one centred column */
  #topnav .cta-in, #sitefoot .cta-in{ grid-template-columns: 1fr; max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
  #topnav .cta .eyebrow, #sitefoot .cta .eyebrow{ justify-content: center; }
  #topnav .cta .lede, #sitefoot .cta .lede{ margin-left: auto; margin-right: auto; }
  #topnav .cta-side, #sitefoot .cta-side{ flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 8px; }
  #topnav .cta-side .office, #sitefoot .cta-side .office{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 12px; }
  #topnav .cta-side .seg.ghost, #sitefoot .cta-side .seg.ghost{ margin-left: auto; margin-right: auto; }
  #topnav .cta-contact, #sitefoot .cta-contact{ text-align: center; }

  /* graph + signals keep their two-column bodies, heads centred above */
  #topnav .graph-grid, #sitefoot .graph-grid,
#topnav .record-grid, #sitefoot .record-grid{ margin-top: 64px; }

  @media (max-width: 640px) {
    #topnav .hero h1, #sitefoot .hero h1{ font-size: clamp(28px, 7.4vw, 38px); }
    #topnav .seg, #sitefoot .seg{ width: 100%; }
  }

  /* [globe layer: removed — the globe treatment belongs to the homepage] */
  /* =========================================================
     Premium pass — material, rhythm and motion.
     No new copy: every change here is craft, not content.
     ========================================================= */

  /* --- type: a tighter, more deliberate ladder --- */
  #topnav .sec-head h2, #sitefoot .sec-head h2{ letter-spacing: -0.032em; line-height: 1.2; }
  #topnav .sec-head .sub2, #sitefoot .sec-head .sub2{ font-weight: 500; letter-spacing: -0.01em; }
  #topnav .sec-head .lede, #sitefoot .sec-head .lede{ max-width: 68ch; color: rgba(255,255,255,.62); font-size: 16.5px; }
  #topnav .eyebrow, #sitefoot .eyebrow{ font-size: 11px; letter-spacing: .22em; }
  #topnav .pt h3, #sitefoot .pt h3,
#topnav .cap h3, #sitefoot .cap h3,
#topnav .rail-col h3, #sitefoot .rail-col h3{ letter-spacing: -0.018em; }
  #topnav .stg, #sitefoot .stg{ font-variant-numeric: tabular-nums; }

  /* --- scroll progress in the nav --- */
  #topnav .progress, #sitefoot .progress{ position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
  #topnav .progress i, #sitefoot .progress i{ display: block; height: 100%; width: 0%; transform-origin: 0 50%;
    background: linear-gradient(90deg, #0D4FD3, #7FA9F8); box-shadow: 0 0 12px rgba(76,134,245,.7); }

  /* --- hero: the headline wipes up behind a mask --- */
  #topnav h1.mask, #sitefoot h1.mask{ overflow: visible; }
  #topnav h1.mask span, #sitefoot h1.mask span{ display: block; overflow: hidden; }
  #topnav h1.mask span i, #sitefoot h1.mask span i{ display: block; font-style: normal; transform: translateY(105%);
    animation: lineUp .95s cubic-bezier(.16,.84,.28,1) forwards; }
  #topnav h1.mask span:nth-child(1) i, #sitefoot h1.mask span:nth-child(1) i{ animation-delay: .12s; }
  #topnav h1.mask span:nth-child(2) i, #sitefoot h1.mask span:nth-child(2) i{ animation-delay: .24s; }
  @keyframes lineUp { to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { #topnav h1.mask span i, #sitefoot h1.mask span i{ animation: none; transform: none; } }

  /* --- trust: certification plaques --- */
  #topnav ul.certs, #sitefoot ul.certs{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin-top: 38px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.14); }
  #topnav ul.certs li, #sitefoot ul.certs li{ list-style: none; padding: 11px 18px; font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.18); background: rgba(6,20,50,.42);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 10.125px), calc(100% - 8.889px) calc(100% + 1px), -1px calc(100% + 1px));
    transition: color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1); }
  #topnav ul.certs li:hover, #sitefoot ul.certs li:hover{ color: #fff; border-color: rgba(126,169,248,.7); transform: translateY(-2px); }
  #topnav .logo-row img, #sitefoot .logo-row img{ transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
  #topnav .logo-row img:hover, #sitefoot .logo-row img:hover{ transform: scale(1.06); }

  /* --- cards: glass with a pointer-tracked highlight --- */
  #topnav .spot, #sitefoot .spot{ --mx: 50%; --my: 50%; }
  #topnav .cap, #sitefoot .cap,
#topnav .spot .pt, #sitefoot .spot .pt,
#topnav .awards.spot span, #sitefoot .awards.spot span{
    position: relative; isolation: isolate;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease, background-color .3s ease;
  }
  #topnav .cap::before, #sitefoot .cap::before,
#topnav .spot .pt::before, #sitefoot .spot .pt::before{
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
    background: radial-gradient(280px circle at var(--mx) var(--my), rgba(76,134,245,.20), transparent 70%);
  }
  #topnav .spot:hover .cap::before, #sitefoot .spot:hover .cap::before,
#topnav .spot:hover .pt::before, #sitefoot .spot:hover .pt::before{ opacity: 1; }
  #topnav .cap:hover, #sitefoot .cap:hover{ transform: translateY(-4px); }

  /* point cards get a rule that extends on approach */
  #topnav .pt, #sitefoot .pt{ border-top: 0; padding-top: 22px; }
  #topnav .pt::after, #sitefoot .pt::after{ content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 46px;
    background: #4C86F5; transition: width .45s cubic-bezier(.2,.7,.2,1), background-color .3s ease; }
  #topnav .pt:hover::after, #sitefoot .pt:hover::after{ width: 100%; }
  #topnav .spot .pt, #sitefoot .spot .pt{ padding-left: 0; }
  #topnav .pt h3, #sitefoot .pt h3{ transition: color .25s ease; }
  #topnav .pt:hover h3, #sitefoot .pt:hover h3{ color: #BFD4FF; }

  /* --- signals: a real sequence, numbered and threaded --- */
  #topnav .stages, #sitefoot .stages{ position: relative; }
  #topnav .stages .pt, #sitefoot .stages .pt{ padding-top: 26px; }
  #topnav .stg, #sitefoot .stg{ font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.45); transition: color .3s ease; }
  #topnav .stages .pt:hover .stg, #sitefoot .stages .pt:hover .stg{ color: #7FA9F8; }
  #topnav .stages .pt.lit::after, #sitefoot .stages .pt.lit::after{ width: 100%; }
  #topnav .stages .pt.lit .stg, #sitefoot .stages .pt.lit .stg{ color: #7FA9F8; }

  /* --- lifecycle: a travelling marker --- */
  #topnav .rail-track, #sitefoot .rail-track{ height: 11px; }
  #topnav .rail-track i::before, #sitefoot .rail-track i::before{ transition: background-color .3s ease, transform .3s ease; }
  #topnav .rail-col, #sitefoot .rail-col{ transition: border-color .25s ease, opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
  #topnav #railCols.engaged .rail-col.active, #sitefoot #railCols.engaged .rail-col.active{ transform: translateY(-3px); }

  #topnav .cap .more, #sitefoot .cap .more{ position: relative; }


  /* --- integrations: chips lift in sequence --- */
  #topnav .chip, #sitefoot .chip{ transition: border-color .25s ease, color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), background-color .25s ease; }
  #topnav .chip:hover, #sitefoot .chip:hover{ transform: translateY(-3px); }

  /* --- awards: logo plaques (white-mono, same treatment as the client marquee) --- */
  #topnav .awards, #sitefoot .awards{ display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; border: 0; padding: 0; }
  #topnav .awards span, #sitefoot .awards span{ width: 176px; min-height: 86px; padding: 17px 18px; opacity: 1;
    border: 1px solid rgba(255,255,255,.14); background: rgba(6,20,50,.38);
    clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 12.1px), calc(100% - 10.909px) calc(100% + 1px), -1px calc(100% + 1px)); }
  #topnav .awards span img, #sitefoot .awards span img{ filter: brightness(0) invert(1); opacity: .62; transition: opacity .25s ease; }
  #topnav .awards span:hover, #sitefoot .awards span:hover{ border-color: rgba(126,169,248,.6); transform: translateY(-3px); }
  #topnav .awards span:hover img, #sitefoot .awards span:hover img{ opacity: 1; }

  /* --- faq: smooth open, hairline highlight --- */
  #topnav .faq details, #sitefoot .faq details{ position: relative; transition: background-color .3s ease; }
  #topnav .faq details[open], #sitefoot .faq details[open]{ background: rgba(255,255,255,.035); }
  #topnav .faq details::before, #sitefoot .faq details::before{ content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
    background: #4C86F5; transition: width .5s cubic-bezier(.2,.7,.2,1); }
  #topnav .faq details[open]::before, #sitefoot .faq details[open]::before{ width: 100%; }
  #topnav .faq summary, #sitefoot .faq summary{ padding-left: 20px; padding-right: 56px; }
  #topnav .faq .ans, #sitefoot .faq .ans{ padding-left: 20px; }
  #topnav .faq summary::after, #sitefoot .faq summary::after{ right: 22px; }

  /* --- reveal: a considered stagger, not a single fade --- */
  #topnav .rv, #sitefoot .rv{ transform: translateY(26px); transition-duration: .85s;
    transition-timing-function: cubic-bezier(.16,.84,.28,1); }

  /* --- section separation without walls --- */
  #topnav section.sec-pad > .wrap, #sitefoot section.sec-pad > .wrap{ position: relative; }

  @media (prefers-reduced-motion: reduce) {
    #topnav .cap:hover, #sitefoot .cap:hover,
#topnav .awards span:hover, #sitefoot .awards span:hover,
#topnav .chip:hover, #sitefoot .chip:hover,
#topnav ul.certs li:hover, #sitefoot ul.certs li:hover{ transform: none; }
  }

  /* [floors + shot panel: removed — the globe treatment belongs to the homepage] */
  /* --- trust band: heading reads as a heading, logos at twice the size --- */
  /* trust now lives inside <header class="hero">, so the gap under the shot is
     this section's own padding-top; the hero's padding-bottom sits below the certs */
  #topnav section.trust, #sitefoot section.trust{ padding-top: var(--shot-gap); }
  /* the tilted frame's bottom edge projects downward (top-edge transform origin),
     eating into the gap below; give it back so shot-to-trust matches strap-to-shot */
  @media (min-width: 901px) { #topnav section.trust, #sitefoot section.trust{ padding-top: calc(var(--shot-gap) + 0.3vw); } }
  #topnav .trust-label, #sitefoot .trust-label{
    /* the divisor is the one-line fit constraint, not a style choice: it is the
       measured width-per-font-size of this string. Uppercase at 500 runs 28.5
       wide where bold mixed-case ran 23.1, so it moves with the other changes. */
    font-size: min(27.2px, calc((100vw - 64px) / 28.6));
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
    max-width: none;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
  }
  #topnav .trust-sub, #sitefoot .trust-sub{ font-size: 17px; line-height: 1.6; margin-top: 18px; max-width: 62ch;
    margin-left: auto; margin-right: auto; color: rgba(255,255,255,.78); }
  #topnav .logo-row img, #sitefoot .logo-row img{ height: 56px; max-width: 232px; opacity: .62; }
  #topnav .logo-row img:hover, #sitefoot .logo-row img:hover{ opacity: 1; }
  #topnav .mq-set, #sitefoot .mq-set{ gap: clamp(52px, 6vw, 96px); padding-right: clamp(52px, 6vw, 96px); }
  #topnav .marquee, #sitefoot .marquee{ margin-top: clamp(40px, 4.5vw, 64px); }
  /* breathing room under the logo strip (also stops the hover scale clipping) */
  #topnav .mq-mask, #sitefoot .mq-mask{ padding-bottom: 10px; }
  @media (max-width: 760px) {
    #topnav .logo-row img, #sitefoot .logo-row img{ height: 40px; max-width: 168px; }
  }
  /* below this the one-line size would drop under the subhead, so let it wrap */
  @media (max-width: 620px) {
    #topnav .trust-label, #sitefoot .trust-label{ white-space: normal; max-width: 20ch; font-size: 17.6px; }
  }

  /* --- Book a Demo: a calendar being clicked, on a seamless loop --- */
  #topnav .calico, #sitefoot .calico{ width: 18px; height: 18px; flex: none; overflow: visible; }
  #topnav .btn-primary .calico, #sitefoot .btn-primary .calico{ --calico-halo: var(--blue); }
  #topnav .btn-primary:hover .calico, #sitefoot .btn-primary:hover .calico{ --calico-halo: #fff; }
  #topnav .btn-on-blue .calico, #sitefoot .btn-on-blue .calico{ --calico-halo: #fff; }
  #topnav .btn-on-blue:hover .calico, #sitefoot .btn-on-blue:hover .calico{ --calico-halo: var(--dark); }
  #topnav .nav-cta .calico, #sitefoot .nav-cta .calico{ width: 15px; height: 15px; }
  #topnav .calico__day, #sitefoot .calico__day,
#topnav .calico__cur, #sitefoot .calico__cur{ transform-box: fill-box; transform-origin: 50% 50%; }
  #topnav .calico__day, #sitefoot .calico__day{ opacity: 0; animation: calDay 3.8s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .calico__cur, #sitefoot .calico__cur{ animation: calCur 3.8s cubic-bezier(.4,0,.2,1) infinite; }
  @keyframes calCur {
    0%, 6%    { transform: translate(7px, 7px); opacity: 0; }
    18%       { opacity: 1; }
    34%       { transform: translate(0, 0); opacity: 1; }
    40%       { transform: translate(1.4px, 1.4px) scale(.86); }
    46%       { transform: translate(0, 0) scale(1); }
    78%       { transform: translate(0, 0); opacity: 1; }
    92%, 100% { transform: translate(7px, 7px); opacity: 0; }
  }
  @keyframes calDay {
    0%, 40%   { opacity: 0; transform: scale(.5); }
    48%       { opacity: 1; transform: scale(1.12); }
    56%       { transform: scale(1); }
    78%       { opacity: 1; transform: scale(1); }
    92%, 100% { opacity: 0; transform: scale(.5); }
  }
  @media (prefers-reduced-motion: reduce) {
    #topnav .calico__cur, #sitefoot .calico__cur{ animation: none; }
    #topnav .calico__day, #sitefoot .calico__day{ animation: none; opacity: 1; }
  }

  /* [nav floating: removed — the globe treatment belongs to the homepage] */
  /* =========================================================
     Link hover: the arrow travels and the label lifts — no underlines
     ========================================================= */
  #topnav .more, #sitefoot .more,
#topnav .hero-link, #sitefoot .hero-link{
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    transition: opacity .25s ease;
  }
  #topnav .more, #sitefoot .more,
#topnav .hero-link, #sitefoot .hero-link,
#topnav .tl, #sitefoot .tl,
#topnav .txt-toggle, #sitefoot .txt-toggle,
#topnav .faq .ans a, #sitefoot .faq .ans a,
#topnav .cta-contact a, #sitefoot .cta-contact a{ opacity: 1; }
  #topnav .more .ar, #sitefoot .more .ar,
#topnav .hero-link .ar, #sitefoot .hero-link .ar,
#topnav .txt-toggle .ar, #sitefoot .txt-toggle .ar{
    display: inline-block;
    transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  }
  #topnav .more:hover, #sitefoot .more:hover,
#topnav .more:focus-visible, #sitefoot .more:focus-visible,
#topnav .hero-link:hover, #sitefoot .hero-link:hover,
#topnav .hero-link:focus-visible, #sitefoot .hero-link:focus-visible,
#topnav .tl:hover, #sitefoot .tl:hover,
#topnav .tl:focus-visible, #sitefoot .tl:focus-visible{ opacity: .8; }
  #topnav .more:hover .ar, #sitefoot .more:hover .ar,
#topnav .more:focus-visible .ar, #sitefoot .more:focus-visible .ar,
#topnav .hero-link:hover .ar, #sitefoot .hero-link:hover .ar,
#topnav .hero-link:focus-visible .ar, #sitefoot .hero-link:focus-visible .ar{ transform: translateX(5px); }
  /* the whole card lifts its link too, so the affordance reads from anywhere on the card */
  #topnav .cap:hover .more, #sitefoot .cap:hover .more{ opacity: .8; }
  #topnav .cap:hover .more .ar, #sitefoot .cap:hover .more .ar{ transform: translateX(5px); }
  #topnav .ind:hover .more, #sitefoot .ind:hover .more,
#topnav .rail-col:hover .more, #sitefoot .rail-col:hover .more{ opacity: .8; }
  #topnav .ind:hover .more .ar, #sitefoot .ind:hover .more .ar,
#topnav .rail-col:hover .more .ar, #sitefoot .rail-col:hover .more .ar{ transform: translateX(5px); }

  #topnav .txt-toggle, #sitefoot .txt-toggle{ transition: opacity .25s ease; }
  #topnav .txt-toggle:hover, #sitefoot .txt-toggle:hover,
#topnav .txt-toggle:focus-visible, #sitefoot .txt-toggle:focus-visible{ opacity: .8; }
  #topnav .txt-toggle:hover .ar, #sitefoot .txt-toggle:hover .ar{ transform: translateY(3px); }
  #topnav .txt-toggle[aria-expanded="true"]:hover .ar, #sitefoot .txt-toggle[aria-expanded="true"]:hover .ar{ transform: rotate(180deg) translateY(3px); }

  /* inline prose links keep a hairline, but it is always there — it never appears on hover */
  #topnav .faq .ans a, #sitefoot .faq .ans a,
#topnav .cta-contact a, #sitefoot .cta-contact a{ text-decoration: none; box-shadow: 0 1px 0 rgba(157,190,255,.45); transition: opacity .25s ease; }
  #topnav .faq .ans a:hover, #sitefoot .faq .ans a:hover,
#topnav .cta-contact a:hover, #sitefoot .cta-contact a:hover{ opacity: .8; }

  @media (prefers-reduced-motion: reduce) {
    #topnav .more .ar, #sitefoot .more .ar,
#topnav .hero-link .ar, #sitefoot .hero-link .ar,
#topnav .txt-toggle .ar, #sitefoot .txt-toggle .ar{ transition: none; }
  }

  /* =========================================================
     Certifications — quiet fine print. The customer logos lead here.
     ========================================================= */
  #topnav ul.certs, #sitefoot ul.certs{
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px clamp(22px, 3vw, 46px);
    max-width: 920px; margin: clamp(28px, 3.2vw, 44px) auto 0;
    padding: 0; border: 0; list-style: none;
  }
  #topnav ul.certs li, #sitefoot ul.certs li{
    display: inline-flex; flex-direction: row; align-items: center; text-align: left;
    gap: 9px; padding: 0; background: none; border: 0; clip-path: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    line-height: 1.3; color: rgba(255,255,255,.42);
    transition: none;
  }
  #topnav ul.certs li::after, #sitefoot ul.certs li::after{ display: none; }
  #topnav ul.certs li:hover, #sitefoot ul.certs li:hover{ color: rgba(255,255,255,.42); transform: none; }   /* no hover on these */
  #topnav .cert-label, #sitefoot .cert-label{ max-width: none; }

  #topnav .cert-ico, #sitefoot .cert-ico{ width: 22px; height: 22px; flex: none; display: block; }
  #topnav .cert-ico svg, #sitefoot .cert-ico svg{ width: 100%; height: 100%; display: block; overflow: visible; }
  #topnav .cert-ico .pl, #sitefoot .cert-ico .pl{ fill: #7FA9F8; opacity: .1; }
  #topnav .cert-ico .ln, #sitefoot .cert-ico .ln{ fill: none; stroke: rgba(157,190,255,.52); stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; }
  #topnav .cert-ico .dot, #sitefoot .cert-ico .dot{ fill: rgba(157,190,255,.52); }
  #topnav ul.certs li:hover .pl, #sitefoot ul.certs li:hover .pl{ opacity: .1; }
  #topnav ul.certs li:hover .ln, #sitefoot ul.certs li:hover .ln{ stroke: rgba(157,190,255,.52); }
  #topnav ul.certs li:hover .dot, #sitefoot ul.certs li:hover .dot{ fill: rgba(157,190,255,.52); }

  /* the logos are the point of this band, so let them sit brighter */
  #topnav .logo-row img, #sitefoot .logo-row img{ opacity: .78; }

  /* =========================================================
     Capability vignettes — each card opens with a small
     abstract UI panel that performs what its module does
     ========================================================= */
  #topnav .viz text, #sitefoot .viz text{ font-family: inherit; font-size: 7.5px; font-weight: 500; letter-spacing: .14em; fill: rgba(255,255,255,.42); }
  #topnav .viz .t2, #sitefoot .viz .t2{ font-size: 6.5px; letter-spacing: .1em; }
  #topnav .viz .wd, #sitefoot .viz .wd{ fill: rgba(255,255,255,.24); }
  #topnav .viz .ln, #sitefoot .viz .ln{ fill: none; stroke: rgba(255,255,255,.17); stroke-width: 1.2; }
  #topnav .viz .fl, #sitefoot .viz .fl{ fill: rgba(255,255,255,.035); }
  #topnav .viz .gr, #sitefoot .viz .gr{ fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1; }
  #topnav .viz .bl, #sitefoot .viz .bl{ fill: none; stroke: #4C86F5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  #topnav .viz .pl, #sitefoot .viz .pl{ stroke-dasharray: 1; }
  #topnav .viz .pop, #sitefoot .viz .pop{ transform-box: fill-box; transform-origin: 50% 50%; }

  /* onboarding: the identity scans, the record types itself in, verification lands */
  #topnav .viz--onb .scan, #sitefoot .viz--onb .scan{ stroke: #7FA9F8; stroke-width: 1.5; stroke-linecap: round;
    animation: vzScanY 5.6s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .viz--onb .ty, #sitefoot .viz--onb .ty{ fill: #4C86F5; opacity: .85; transform-box: fill-box; transform-origin: 0 50%;
    animation: vzType 5.6s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .viz--onb .ty2, #sitefoot .viz--onb .ty2{ animation-delay: .5s; }
  #topnav .viz--onb .ty3, #sitefoot .viz--onb .ty3{ animation-delay: 1s; }
  #topnav .viz--onb .vpill rect, #sitefoot .viz--onb .vpill rect{ fill: rgba(76,134,245,.14); stroke: #4C86F5; stroke-width: 1.2; }
  #topnav .viz--onb .vpill text, #sitefoot .viz--onb .vpill text{ fill: #9DBEFF; }
  #topnav .viz--onb .vpill, #sitefoot .viz--onb .vpill{ animation: vzVerify 5.6s cubic-bezier(.4,0,.2,1) infinite; }

  /* monitoring: the live line redraws, one reading breaches the limit, the alert answers */
  #topnav .viz--aml .rec, #sitefoot .viz--aml .rec{ fill: #E4715F; animation: vzBlink 1.6s ease-in-out infinite; }
  #topnav .viz--aml .th, #sitefoot .viz--aml .th{ stroke: rgba(228,113,95,.5); stroke-width: 1; stroke-dasharray: 4 4; }
  #topnav .viz--aml .thl, #sitefoot .viz--aml .thl{ fill: rgba(240,147,127,.55); }
  #topnav .viz--aml .trend, #sitefoot .viz--aml .trend{ animation: vzDraw 4.6s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .viz--aml .adot, #sitefoot .viz--aml .adot{ fill: #E4715F; animation: vzAlertIn 4.6s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .viz--aml .aring, #sitefoot .viz--aml .aring{ fill: none; stroke: #E4715F; stroke-width: 1.2; transform-box: fill-box;
    transform-origin: 50% 50%; animation: vzPing 4.6s ease-out 1.06s infinite; }
  #topnav .viz--aml .achip rect, #sitefoot .viz--aml .achip rect{ fill: rgba(228,113,95,.12); stroke: rgba(228,113,95,.75); stroke-width: 1; }
  #topnav .viz--aml .achip text, #sitefoot .viz--aml .achip text{ fill: #F0937F; }
  #topnav .viz--aml .achip, #sitefoot .viz--aml .achip{ animation: vzAlertIn 4.6s cubic-bezier(.4,0,.2,1) infinite; }

  /* fraud: a beam sweeps the signal field, one signal doesn't belong */
  #topnav .viz--fraud .beam line, #sitefoot .viz--fraud .beam line{ stroke: #7FA9F8; stroke-width: 1.5; }
  #topnav .viz--fraud .beam, #sitefoot .viz--fraud .beam{ animation: vzSweep 4.4s linear infinite; }
  #topnav .viz--fraud .sd, #sitefoot .viz--fraud .sd{ fill: rgba(255,255,255,.15); animation: vzGlow 4.4s linear infinite; animation-delay: var(--d, 0s); }
  #topnav .viz--fraud .an, #sitefoot .viz--fraud .an{ fill: #E4715F; }
  #topnav .viz--fraud .ab, #sitefoot .viz--fraud .ab{ fill: none; stroke: #E4715F; stroke-width: 1.4; stroke-linecap: round; }
  #topnav .viz--fraud .anom, #sitefoot .viz--fraud .anom{ animation: vzAnom 4.4s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .viz--fraud .anr, #sitefoot .viz--fraud .anr{ fill: none; stroke: #E4715F; stroke-width: 1.2; transform-box: fill-box;
    transform-origin: 50% 50%; animation: vzPing 4.4s ease-out 2.07s infinite; }

  /* case: an alert becomes a case, moves through review, closes with a decision */
  #topnav .viz--case .gc, #sitefoot .viz--case .gc{ fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.14); stroke-width: 1; }
  #topnav .viz--case .gk, #sitefoot .viz--case .gk{ fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  #topnav .viz--case .mc, #sitefoot .viz--case .mc{ fill: rgba(76,134,245,.16); stroke: #4C86F5; stroke-width: 1.3; }
  #topnav .viz--case .ml, #sitefoot .viz--case .ml{ stroke: rgba(255,255,255,.55); stroke-width: 1.2; stroke-linecap: round; }
  #topnav .viz--case .mcard, #sitefoot .viz--case .mcard{ animation: vzCase 6.4s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .viz--case .mk, #sitefoot .viz--case .mk{ animation: vzCheck 6.4s cubic-bezier(.4,0,.2,1) infinite; }

  /* transaction: value travels the corridor, pauses at screening, the score settles */
  #topnav .viz--kyt .ndot, #sitefoot .viz--kyt .ndot{ fill: rgba(157,190,255,.5); }
  #topnav .viz--kyt .corr, #sitefoot .viz--kyt .corr{ fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.3;
    stroke-dasharray: 3 6; stroke-linecap: round; animation: vzFlow 1.5s linear infinite; }
  #topnav .viz--kyt .gp, #sitefoot .viz--kyt .gp{ animation: vzGate 4.6s ease-in-out infinite; }
  #topnav .viz--kyt .gl, #sitefoot .viz--kyt .gl{ stroke: #7FA9F8; stroke-width: 1.5; stroke-linecap: round;
    animation: vzScanHold 4.6s ease-in-out infinite; }
  #topnav .viz--kyt .tdot, #sitefoot .viz--kyt .tdot{ fill: #7FA9F8; animation: vzDot 4.6s linear infinite; }
  #topnav .viz--kyt .rb, #sitefoot .viz--kyt .rb{ fill: rgba(255,255,255,.14); }
  #topnav .viz--kyt .rb1, #sitefoot .viz--kyt .rb1{ animation: vzBarA 4.6s ease-in-out infinite; }
  #topnav .viz--kyt .rb2, #sitefoot .viz--kyt .rb2{ animation: vzBarB 4.6s ease-in-out infinite; }
  #topnav .viz--kyt .bring, #sitefoot .viz--kyt .bring{ fill: none; stroke: #7FA9F8; stroke-width: 1.2; transform-box: fill-box;
    transform-origin: 50% 50%; animation: vzPing 4.6s ease-out 3.5s infinite; }

  /* graph: the network resolves outward, then the connection you'd miss lights up */
  #topnav .viz--graph .hub, #sitefoot .viz--graph .hub{ fill: rgba(76,134,245,.22); stroke: #4C86F5; stroke-width: 1.4; }
  #topnav .viz--graph .nd, #sitefoot .viz--graph .nd{ fill: #071730; stroke: rgba(255,255,255,.35); stroke-width: 1.2;
    transform-box: fill-box; transform-origin: 50% 50%; animation: icBeat 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
  #topnav .viz--graph .ed, #sitefoot .viz--graph .ed{ fill: none; stroke: rgba(157,190,255,.5); stroke-width: 1.2;
    animation: vzDraw 6s cubic-bezier(.4,0,.2,1) infinite; animation-delay: var(--d, 0s); }
  #topnav .viz--graph .hed, #sitefoot .viz--graph .hed{ fill: none; stroke: #E4715F; stroke-width: 1.5; stroke-linecap: round;
    animation: vzReveal 6s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .viz--graph .hn, #sitefoot .viz--graph .hn{ fill: rgba(228,113,95,.12); stroke: #E4715F; stroke-width: 1.4;
    animation: vzHot 6s ease-in-out infinite; }
  #topnav .viz--graph .hr, #sitefoot .viz--graph .hr{ fill: none; stroke: #E4715F; stroke-width: 1.2; transform-box: fill-box;
    transform-origin: 50% 50%; animation: vzPing 6s ease-out 3.3s infinite; }
  #topnav .viz--graph .hr2, #sitefoot .viz--graph .hr2{ animation-delay: 3.45s; }

  @keyframes vzDraw {
    0%        { stroke-dashoffset: 1; opacity: 0; }
    6%        { opacity: 1; }
    34%, 86%  { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes vzType {
    0%        { transform: scaleX(0); opacity: 1; }
    16%       { transform: scaleX(1); }
    88%       { transform: scaleX(1); opacity: 1; }
    96%, 100% { transform: scaleX(1); opacity: 0; }
  }
  @keyframes vzVerify {
    0%, 44%   { opacity: 0; transform: scale(.8); }
    50%       { opacity: 1; transform: scale(1.08); }
    55%, 86%  { opacity: 1; transform: scale(1); }
    94%, 100% { opacity: 0; transform: scale(1); }
  }
  @keyframes vzScanY {
    0%        { transform: translateY(0); opacity: 0; }
    6%        { opacity: .9; }
    38%       { transform: translateY(50px); opacity: .9; }
    46%, 100% { transform: translateY(50px); opacity: 0; }
  }
  @keyframes vzAlertIn {
    0%, 22%   { opacity: 0; transform: scale(.8); }
    27%       { opacity: 1; transform: scale(1.08); }
    31%, 84%  { opacity: 1; transform: scale(1); }
    92%, 100% { opacity: 0; transform: scale(1); }
  }
  @keyframes vzPing {
    0%   { opacity: .9; transform: scale(.4); }
    16%  { opacity: 0; transform: scale(2.1); }
    100% { opacity: 0; transform: scale(2.1); }
  }
  @keyframes vzBlink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
  @keyframes vzSweep {
    0%        { transform: translateX(0); opacity: 0; }
    4%        { opacity: 1; }
    64%       { transform: translateX(246px); opacity: 1; }
    70%, 100% { transform: translateX(246px); opacity: 0; }
  }
  @keyframes vzGlow {
    0%, 100% { fill: rgba(255,255,255,.15); }
    3%       { fill: #BFD4FF; }
    16%      { fill: rgba(127,169,248,.4); }
    30%      { fill: rgba(255,255,255,.15); }
  }
  @keyframes vzAnom {
    0%, 50%   { opacity: 0; transform: scale(.6); }
    56%       { opacity: 1; transform: scale(1.2); }
    60%, 84%  { opacity: 1; transform: scale(1); }
    92%, 100% { opacity: 0; transform: scale(1); }
  }
  @keyframes vzCase {
    0%        { opacity: 0; transform: translate(0, 0); }
    4%, 16%   { opacity: 1; transform: translate(0, 0); }
    26%, 42%  { transform: translate(97px, 0); }
    52%, 88%  { opacity: 1; transform: translate(194px, 0); }
    94%, 100% { opacity: 0; transform: translate(194px, 0); }
  }
  @keyframes vzCheck {
    0%, 56%   { stroke-dashoffset: 1; opacity: 0; }
    60%       { opacity: 1; }
    72%, 86%  { stroke-dashoffset: 0; opacity: 1; }
    94%, 100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes vzFlow { to { stroke-dashoffset: -18; } }
  @keyframes vzGate {
    0%, 28%   { stroke: rgba(255,255,255,.17); }
    34%, 52%  { stroke: #7FA9F8; }
    62%, 100% { stroke: rgba(255,255,255,.17); }
  }
  @keyframes vzScanHold {
    0%, 30%   { opacity: .25; }
    35%, 52%  { opacity: 1; }
    60%, 100% { opacity: .25; }
  }
  @keyframes vzDot {
    0%        { opacity: 0; }
    4%, 74%   { opacity: 1; }
    80%, 100% { opacity: 0; }
  }
  @keyframes vzBarA {
    0%, 36%   { fill: rgba(255,255,255,.14); }
    42%, 82%  { fill: #4C86F5; }
    90%, 100% { fill: rgba(255,255,255,.14); }
  }
  @keyframes vzBarB {
    0%, 42%   { fill: rgba(255,255,255,.14); }
    48%, 82%  { fill: #4C86F5; }
    90%, 100% { fill: rgba(255,255,255,.14); }
  }
  @keyframes vzReveal {
    0%, 46%   { stroke-dashoffset: 1; opacity: 0; }
    50%       { opacity: 1; }
    66%, 86%  { stroke-dashoffset: 0; opacity: 1; }
    94%, 100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes vzHot {
    0%, 52%   { opacity: 0; }
    58%, 84%  { opacity: 1; }
    92%, 100% { opacity: 0; }
  }

  @keyframes icDraw {                     /* draw in, hold, fade out, reset unseen */
    0%        { stroke-dashoffset: 1; opacity: 0; }
    8%        { opacity: 1; }
    30%, 80%  { stroke-dashoffset: 0; opacity: 1; }
    93%, 100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes icPop {
    0%, 26%   { opacity: 0; transform: scale(.4); }
    38%       { opacity: 1; transform: scale(1.25); }
    46%, 74%  { opacity: 1; transform: scale(1); }
    88%, 100% { opacity: 0; transform: scale(.4); }
  }
  @keyframes icBeat {
    0%, 62%, 100% { transform: scale(1); }
    72%           { transform: scale(1.18); }
    82%           { transform: scale(1); }
  }
  @keyframes icScan {
    0%        { opacity: 0; transform: translateY(0); }
    12%       { opacity: .85; }
    62%       { opacity: .85; transform: translateY(18px); }
    76%, 100% { opacity: 0; transform: translateY(18px); }
  }
  @keyframes icAlert {
    0%, 58%, 100% { opacity: .35; }
    70%, 86%      { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    #topnav .cap .viz svg *, #sitefoot .cap .viz svg *{ animation: none !important; stroke-dashoffset: 0 !important; }
    /* motion-only elements (beams, travel dots, pulse rings) have no static state */
    #topnav .cap .viz .vzm, #sitefoot .cap .viz .vzm{ display: none !important; }
    /* the case rests in CLOSED when it can't travel */
    #topnav .viz--case .mcard, #sitefoot .viz--case .mcard{ transform: translate(194px, 0); }
  }

  /* =========================================================
     Lifecycle step icons — one mark per stage of the rail
     ========================================================= */
  #topnav .rail-col .ri, #sitefoot .rail-col .ri{ width: 30px; height: 30px; color: var(--blue); display: block; margin-bottom: 20px;
    transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  #topnav .rail-col .ri svg, #sitefoot .rail-col .ri svg{ width: 100%; height: 100%; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  #topnav #railCols.engaged .rail-col.active .ri, #sitefoot #railCols.engaged .rail-col.active .ri{ transform: scale(1.08); color: #BFD4FF; }

  #topnav .ric [class^="ric-w"], #sitefoot .ric [class^="ric-w"],
#topnav .ric .ric-tick, #sitefoot .ric .ric-tick,
#topnav .ric .ric-stem, #sitefoot .ric .ric-stem,
#topnav .ric .ric-wave, #sitefoot .ric .ric-wave,
#topnav .ric .ric-arc, #sitefoot .ric .ric-arc{ stroke-dasharray: 1; }

  /* onboard: the record is opened, then verified */
  #topnav .ric--onboard .ric-tick, #sitefoot .ric--onboard .ric-tick{ animation: icDraw 4s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .ric--onboard .ric-badge, #sitefoot .ric--onboard .ric-badge{ transform-box: fill-box; transform-origin: 50% 50%;
    animation: icBeat 4s ease-in-out infinite; }

  /* screen: the list is read down, line by line */
  #topnav .ric--screen .ric-w1, #sitefoot .ric--screen .ric-w1{ animation: icDraw 3.8s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .ric--screen .ric-w2, #sitefoot .ric--screen .ric-w2{ animation: icDraw 3.8s cubic-bezier(.4,0,.2,1) .2s infinite; }
  #topnav .ric--screen .ric-lens, #sitefoot .ric--screen .ric-lens{ transform-box: fill-box; transform-origin: 50% 50%;
    animation: icBeat 3.8s ease-in-out .6s infinite; }

  /* monitor: activity keeps arriving */
  #topnav .ric--monitor .ric-wave, #sitefoot .ric--monitor .ric-wave{ animation: icDraw 3.4s cubic-bezier(.4,0,.2,1) infinite; }
  #topnav .ric--monitor .ric-base, #sitefoot .ric--monitor .ric-base{ opacity: .3; }

  /* detect: the outlier resolves in the centre of the sight */
  #topnav .ric--detect .ric-ring, #sitefoot .ric--detect .ric-ring{ transform-box: fill-box; transform-origin: 50% 50%;
    animation: icBeat 3.4s ease-in-out infinite; }
  #topnav .ric--detect .ric-hit, #sitefoot .ric--detect .ric-hit{ transform-box: fill-box; transform-origin: 50% 50%; opacity: 0;
    animation: icPop 3.4s cubic-bezier(.4,0,.2,1) infinite; }

  /* investigate: the case is opened and looked through */
  #topnav .ric--investigate .ric-lens, #sitefoot .ric--investigate .ric-lens{ transform-box: fill-box; transform-origin: 50% 50%;
    animation: icBeat 4s ease-in-out infinite; }
  #topnav .ric--investigate .ric-stem, #sitefoot .ric--investigate .ric-stem{ animation: icDraw 4s cubic-bezier(.4,0,.2,1) infinite; }

  /* review: the record keeps its time */
  #topnav .ric--review .ric-hand-m, #sitefoot .ric--review .ric-hand-m{ transform-box: view-box; transform-origin: 12px 12px;
    animation: ricSweep 7s linear infinite; }
  #topnav .ric--review .ric-hand-h, #sitefoot .ric--review .ric-hand-h{ transform-box: view-box; transform-origin: 12px 12px;
    animation: ricSweep 42s linear infinite; }
  @keyframes ricSweep { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    #topnav .rail-col .ri svg *, #sitefoot .rail-col .ri svg *{ animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
    #topnav .rail-col .ri, #sitefoot .rail-col .ri{ transition: none; }
  }

  /* =========================================================
     Patchwork — drag the divider to compare the two arrangements.
     Both panes hold the same five workflows and the same customer;
     what changes is whether they share one record or five.
     ========================================================= */
  #topnav .cmp, #sitefoot .cmp{ --pos: 50%; --foot: 80px; margin-top: clamp(34px, 4vw, 54px); }
  #topnav .cmp__stage, #sitefoot .cmp__stage{ position: relative; height: clamp(226px, 19vw, 254px);
    overflow: hidden; touch-action: pan-y; }
  #topnav .cmp__pane, #sitefoot .cmp__pane{ position: absolute; inset: 0; display: flex; flex-direction: column;
    padding-top: 18px; }        /* headroom: the raised boxes lift up to 11px */
  #topnav .cmp__pane--a, #sitefoot .cmp__pane--a{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  #topnav .cmp__pane--b, #sitefoot .cmp__pane--b{ clip-path: inset(0 0 0 var(--pos)); }

  #topnav .cmp__row, #sitefoot .cmp__row{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  /* icon and label centred as one unit inside the box */
  #topnav .cmp__row .node, #sitefoot .cmp__row .node{ display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 1px solid rgba(255,255,255,.18); background: rgba(6,20,50,.6);
    padding: 15px 12px; text-align: center; font-size: 13px; font-weight: 500; color: #fff;
    transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  #topnav .node-ico, #sitefoot .node-ico{ width: 18px; height: 18px; flex: none; display: block;
    fill: none; stroke: rgba(157,190,255,.72); stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; }
  /* the same five workflows, held apart */
  #topnav .cmp__row--apart .node:nth-child(1), #sitefoot .cmp__row--apart .node:nth-child(1){ transform: translateY(-9px) rotate(-1.4deg); }
  #topnav .cmp__row--apart .node:nth-child(2), #sitefoot .cmp__row--apart .node:nth-child(2){ transform: translateY(11px) rotate(1.1deg); }
  #topnav .cmp__row--apart .node:nth-child(3), #sitefoot .cmp__row--apart .node:nth-child(3){ transform: translateY(-5px) rotate(.9deg); }
  #topnav .cmp__row--apart .node:nth-child(4), #sitefoot .cmp__row--apart .node:nth-child(4){ transform: translateY(13px) rotate(-1.2deg); }
  #topnav .cmp__row--apart .node:nth-child(5), #sitefoot .cmp__row--apart .node:nth-child(5){ transform: translateY(-11px) rotate(1.5deg); }

  /* the costs and the blue box occupy the same bottom band, so the red rules
     and the top of the box sit on one line across the divider */
  #topnav .cmp__gaps, #sitefoot .cmp__gaps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto;
    min-height: var(--foot); align-content: start; }
  #topnav .cmp__gaps span, #sitefoot .cmp__gaps span{ border-top: 2px solid #77614D; padding-top: 11px;
    font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.7); }

  #topnav .cmp__risers, #sitefoot .cmp__risers{ display: grid; grid-template-columns: repeat(5, 1fr); flex: 1; margin: 12px 0 0; }
  #topnav .cmp__risers i, #sitefoot .cmp__risers i{ justify-self: center; width: 1px; background: rgba(126,169,248,.5); }

  /* the blue box: one platform under all five, its label centred.
     The pane is clipped at the divider, so the label is centred inside the
     part that is actually visible — otherwise the divider cuts it mid-word.
     The clamp keeps at least 320px of room before it stops tracking. */
  #topnav .cmp__base, #sitefoot .cmp__base{ position: relative; min-height: var(--foot); display: grid; place-content: center;
    background: var(--blue); border: 0;
    padding: 12px 18px; text-align: center; color: #fff;
    padding-left: clamp(18px, var(--pos), calc(100% - 260px));
    transition: padding-left .12s linear;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 15.8px) 100%, 0 100%); }
  /* once the pane is nearly closed there is no room left to centre into,
     so the label fades rather than being sliced by the divider */
  #topnav .cmp__base h3, #sitefoot .cmp__base h3,
#topnav .cmp__base p, #sitefoot .cmp__base p{ opacity: var(--b-text, 1); transition: opacity .15s linear; }
  #topnav .cmp__base h3, #sitefoot .cmp__base h3{ font-size: clamp(15px, 1.6vw, 19px); }
  #topnav .cmp__base p, #sitefoot .cmp__base p{ margin-top: 5px; font-size: 12.5px; color: rgba(255,255,255,.82); }

  #topnav .cmp__line, #sitefoot .cmp__line{ position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; z-index: 3;
    pointer-events: none; transform: translateX(-.5px);
    background: linear-gradient(180deg, rgba(126,169,248,0), rgba(126,169,248,.85) 14%,
                rgba(126,169,248,.85) 86%, rgba(126,169,248,0)); }
  #topnav .cmp__grip, #sitefoot .cmp__grip{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center;
    background: rgba(4,16,43,.88); border: 1px solid rgba(126,169,248,.55); color: #BFD4FF;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px -12px rgba(2,8,26,.9);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
  #topnav .cmp__grip svg, #sitefoot .cmp__grip svg{ width: 22px; height: 12px; }
  #topnav .cmp__stage:hover .cmp__grip, #sitefoot .cmp__stage:hover .cmp__grip,
#topnav .cmp.is-held .cmp__grip, #sitefoot .cmp.is-held .cmp__grip{
    transform: translate(-50%,-50%) scale(1.08); border-color: #9DBEFF; }

  /* a full-stage range input is the drag surface: keyboard and screen readers for free */
  #topnav .cmp__range, #sitefoot .cmp__range{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 4;
    -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; }
  #topnav .cmp__range:focus-visible, #sitefoot .cmp__range:focus-visible{ outline: 2px solid #9DBEFF; outline-offset: 3px; }
  #topnav .cmp__range::-webkit-slider-thumb, #sitefoot .cmp__range::-webkit-slider-thumb{ -webkit-appearance: none; width: 52px; height: 280px; cursor: ew-resize; }
  #topnav .cmp__range::-moz-range-thumb, #sitefoot .cmp__range::-moz-range-thumb{ width: 52px; height: 320px; border: 0; background: transparent; cursor: ew-resize; }
  #topnav .cmp__range::-moz-range-track, #sitefoot .cmp__range::-moz-range-track{ background: transparent; }

  #topnav .cmp__labels, #sitefoot .cmp__labels{ display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
  #topnav .cmp__lbl, #sitefoot .cmp__lbl{ font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: #fff; transition: opacity .25s ease; }

  /* A vertical divider through a two-column grid reads as one muddled table,
     and there is no room for five columns on a phone. So the two arrangements
     stack and each captions itself; the drag is a desktop affordance. */
  @media (max-width: 860px) {
    #topnav .cmp__stage, #sitefoot .cmp__stage{ height: auto; overflow: visible; }
    #topnav .cmp__pane, #sitefoot .cmp__pane,
#topnav .cmp__pane--a, #sitefoot .cmp__pane--a,
#topnav .cmp__pane--b, #sitefoot .cmp__pane--b{
      position: static; clip-path: none; padding-top: 0; }
    #topnav .cmp__pane--b, #sitefoot .cmp__pane--b{ margin-top: 32px; }
    #topnav .cmp__pane::before, #sitefoot .cmp__pane::before{ content: attr(data-label); display: block; margin-bottom: 14px;
      font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
      color: rgba(255,255,255,.72); }
    #topnav .cmp__line, #sitefoot .cmp__line,
#topnav .cmp__range, #sitefoot .cmp__range,
#topnav .cmp__labels, #sitefoot .cmp__labels,
#topnav .cmp__risers, #sitefoot .cmp__risers{ display: none; }
    #topnav .cmp__row, #sitefoot .cmp__row{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
    #topnav .cmp__row .node, #sitefoot .cmp__row .node{ font-size: 12px; padding: 13px 10px; gap: 8px; }
    #topnav .node-ico, #sitefoot .node-ico{ width: 16px; height: 16px; }
    #topnav .cmp__gaps, #sitefoot .cmp__gaps{ grid-template-columns: 1fr; gap: 8px; min-height: 0; margin-top: 18px; }
    #topnav .cmp__base, #sitefoot .cmp__base{ min-height: 0; margin-top: 18px; padding: 16px 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #topnav .cmp__row .node, #sitefoot .cmp__row .node,
#topnav .cmp__grip, #sitefoot .cmp__grip{ transition: none; }
  }

  /* these two grids are read-only reference — no hover treatment */
  #topnav #patchPoints .pt::after, #sitefoot #patchPoints .pt::after{ content: none; }        /* no rule above these four headings */
  #topnav #patchPoints .pt, #sitefoot #patchPoints .pt{ padding-top: 0; }
  #topnav #patchPoints .pt, #sitefoot #patchPoints .pt,
#topnav #secGrid .pt, #sitefoot #secGrid .pt{ position: relative; transition: none; }
  #topnav #patchPoints .pt::before, #sitefoot #patchPoints .pt::before,
#topnav #secGrid .pt::before, #sitefoot #secGrid .pt::before{ content: none; }
  #topnav #patchPoints .pt::after, #sitefoot #patchPoints .pt::after,
#topnav #secGrid .pt::after, #sitefoot #secGrid .pt::after{ transition: none; }
  #topnav #patchPoints .pt h3, #sitefoot #patchPoints .pt h3,
#topnav #secGrid .pt h3, #sitefoot #secGrid .pt h3{ transition: none; }
  #topnav #patchPoints .pt:hover::after, #sitefoot #patchPoints .pt:hover::after,
#topnav #secGrid .pt:hover::after, #sitefoot #secGrid .pt:hover::after{ width: 46px; }
  #topnav #patchPoints .pt:hover h3, #sitefoot #patchPoints .pt:hover h3,
#topnav #secGrid .pt:hover h3, #sitefoot #secGrid .pt:hover h3{ color: #fff; }

  /* --- the four points ---
     Measured: the longest title needs 223px on one line even at 16px, but a
     four-across grid leaves only 201px once the icon takes its gutter. Two
     titles therefore broke to two lines and two didn't, which left 39px of
     dead space under the short ones against 14px under the tall ones — and
     the body copy sat 42px to the left of the title it belonged to. Two
     columns fixes all three at once: every title clears one line with room
     to spare, every gap is identical, and the icon hangs in its own gutter
     with the title and body sharing a single left edge. */
  #topnav #patchPoints, #sitefoot #patchPoints{
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(34px, 4.4vw, 64px);
    row-gap: clamp(26px, 2.6vw, 36px);
    grid-template-rows: none;
  }
  #topnav #patchPoints .pt, #sitefoot #patchPoints .pt{
    display: grid; grid-template-columns: 26px 1fr; column-gap: 15px;
    padding: 0; align-content: start;
  }
  #topnav #patchPoints .pt h3, #sitefoot #patchPoints .pt h3{ grid-column: 2; align-self: center; }
  #topnav #patchPoints .pt p, #sitefoot #patchPoints .pt p{ grid-column: 2; margin-top: 9px; max-width: 50ch; }
  /* centred on the title's line rather than parked above it */
  #topnav .pt-ico, #sitefoot .pt-ico{ grid-column: 1; grid-row: 1; align-self: center; display: block;
    width: 26px; height: 26px;
    fill: none; stroke: #7FA9F8; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round; }
  /* one column before a pair gets too narrow to hold a title on one line */
  @media (max-width: 760px) {
    #topnav #patchPoints, #sitefoot #patchPoints{ grid-template-columns: 1fr; row-gap: 24px; }
  }

  /* =========================================================
     AI-Native — three things AI does, a threshold, one thing it doesn't.
     The layout carries the argument the headline makes.
     ========================================================= */
  #topnav .relay, #sitefoot .relay{ display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: 0; align-items: stretch; margin-top: clamp(38px, 4.4vw, 60px);
    --gap: clamp(24px, 3vw, 48px); --fh: clamp(70px, 7vw, 96px); }

  /* the left column takes the panel's own top inset, so both blocks of text
     start from the same optical line rather than one hugging the top */
  #topnav .relay__ai, #sitefoot .relay__ai{ position: relative; z-index: 2; display: flex; flex-direction: column;
    padding-right: var(--gap); padding-top: clamp(26px, 2.8vw, 34px); }
  /* the steps sit level with each other and centred against the panel opposite;
     the funnel keeps its own auto margin, so it stays pinned to the gate mark */
  #topnav .relay__steps, #sitefoot .relay__steps{ margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 36px); align-items: start; }
  /* measure capped so all three headings break to two balanced lines and the
     paragraphs below them start on the same baseline */
  #topnav .relay__step h3, #sitefoot .relay__step h3{ font-size: 17px; letter-spacing: -.015em; max-width: 13ch; }
  #topnav .relay__step p, #sitefoot .relay__step p{ margin-top: 9px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.66); }

  /* the signals narrow as they pass through */
  #topnav .relay__funnel, #sitefoot .relay__funnel{ display: block; margin-top: auto; height: var(--fh);
    width: calc(100% + var(--gap) * 2);
    margin-right: calc(-2 * var(--gap)); }
  #topnav .relay__funnel path, #sitefoot .relay__funnel path{ stroke-dasharray: 5 11; animation: relayFlow 2.6s linear infinite; }
  @keyframes relayFlow { to { stroke-dashoffset: -32; } }

  /* where the signals land: the panel's own edge is the threshold */
  #topnav .relay__mark, #sitefoot .relay__mark{ position: absolute; z-index: 3; right: calc(-1 * var(--gap));
    bottom: calc(var(--fh) / 2 - 5px); width: 11px; height: 11px;
    transform: translateX(50%) rotate(45deg); background: #9DBEFF;
    box-shadow: 0 0 0 5px rgba(126,169,248,.16), 0 0 18px rgba(126,169,248,.7); }

  /* the decision, given the weight of a destination — not a card, a terminus */
  #topnav .relay__hand, #sitefoot .relay__hand{ position: relative;
    margin-left: var(--gap);
    padding: clamp(26px, 2.8vw, 34px) clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 28px);
    display: grid; grid-template-rows: 1fr auto; gap: 24px;
    /* light arrives from the gate side and settles */
    background: linear-gradient(112deg, rgba(13,79,211,.34) 0%, rgba(9,32,80,.70) 44%, rgba(4,16,43,.76) 100%);
    border: 1px solid rgba(157,190,255,.22); border-left: 0;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 26px 64px -30px rgba(2,8,24,.95), inset 0 1px 0 rgba(255,255,255,.09);
    /* the W's own angle, at a size that reads as a cut rather than a glitch */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), calc(100% - 22px) 100%, 0 100%);
    --edge: rgba(157,190,255,.40); }
  /* the human side of the threshold, mirroring the gate opposite it */
  #topnav .relay__hand::before, #sitefoot .relay__hand::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, rgba(157,190,255,0), #9DBEFF 24%, #9DBEFF 76%, rgba(157,190,255,0)); }
  /* the clip eats part of the keyline; this redraws the diagonal at 48.6deg */
  #topnav .relay__hand::after, #sitefoot .relay__hand::after{ content: ""; position: absolute; inset: -1px;
    background: var(--edge); pointer-events: none;
    clip-path: polygon(calc(100% - 1.000px) calc(100% - 26.740px), calc(100% - 1.000px) calc(100% - 24.620px), calc(100% - 21.786px) calc(100% - 1.000px), calc(100% - 23.651px) calc(100% - 1.000px)); }

  #topnav .hand-body, #sitefoot .hand-body{ align-self: center; }
  #topnav .hand-tag, #sitefoot .hand-tag{ display: inline-flex; align-items: center; gap: 9px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9DBEFF; }
  #topnav .hand-tag::before, #sitefoot .hand-tag::before{ content: ""; width: 7px; height: 7px; transform: rotate(45deg);
    background: #9DBEFF; box-shadow: 0 0 0 3px rgba(126,169,248,.16); }
  #topnav .relay__hand h3, #sitefoot .relay__hand h3{ margin-top: 15px; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.028em; color: #fff; }
  #topnav .relay__hand p, #sitefoot .relay__hand p{ margin-top: 12px; font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.76); max-width: 34ch; }

  /* what stays on this side of the line, stated plainly */
  #topnav .hand-rec, #sitefoot .hand-rec{ align-self: end; display: flex; flex-wrap: wrap; gap: 8px 16px;
    padding: 15px 26px 0 0; border-top: 1px solid rgba(255,255,255,.13); }
  #topnav .hand-rec span, #sitefoot .hand-rec span{ display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
    color: rgba(255,255,255,.60); }
  #topnav .hand-rec span::before, #sitefoot .hand-rec span::before{ content: ""; width: 4px; height: 4px; transform: rotate(45deg); background: #4C86F5; }

  @media (max-width: 900px) {
    #topnav .relay, #sitefoot .relay{ grid-template-columns: minmax(0, 1fr); }
    #topnav .relay__ai, #sitefoot .relay__ai{ padding-right: 0; padding-top: 0; padding-bottom: 26px; }
    #topnav .relay__steps, #sitefoot .relay__steps{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
    #topnav .relay__step h3, #sitefoot .relay__step h3{ max-width: none; }
    #topnav .relay__funnel, #sitefoot .relay__funnel{ height: 56px; transform: rotate(90deg) scaleX(.55); transform-origin: center;
      margin: 6px auto; width: 140px; }
    #topnav .relay__mark, #sitefoot .relay__mark{ left: 50%; right: auto; bottom: 0;
      transform: translate(-50%, 50%) rotate(45deg); }
    #topnav .relay__hand, #sitefoot .relay__hand{ margin-left: 0; gap: 20px; }
    #topnav .relay__hand p, #sitefoot .relay__hand p{ max-width: none; }
    #topnav .hand-rec, #sitefoot .hand-rec{ gap: 8px 13px; padding-right: 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #topnav .relay__funnel path, #sitefoot .relay__funnel path{ animation: none; stroke-dasharray: none; }
  }

  /* =========================================================
     Signals to Decisions — a closed cycle, because stage 06
     feeds back into future monitoring. Not a list.
     ========================================================= */
  #topnav .cycle, #sitefoot .cycle{ margin-top: clamp(34px, 4vw, 56px); }
  #topnav .cyc-ring, #sitefoot .cyc-ring{ position: relative; width: min(620px, 100%); margin: 0 auto; aspect-ratio: 1; }
  #topnav .cyc-svg, #sitefoot .cyc-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  #topnav .cyc-track, #sitefoot .cyc-track{ fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1.2; }
  #topnav .cyc-arc, #sitefoot .cyc-arc{ fill: none; stroke: #7FA9F8; stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 600; stroke-dashoffset: 500;
    transform: rotate(-90deg); transform-origin: 280px 280px;
    transition: stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1); }
  #topnav .cyc-orbit, #sitefoot .cyc-orbit{ transform-origin: 280px 280px; animation: cycSpin 16s linear infinite; }
  #topnav .cyc-orbit circle, #sitefoot .cyc-orbit circle{ fill: #BFD4FF; }
  @keyframes cycSpin { to { transform: rotate(360deg); } }
  #topnav .cyc-dot, #sitefoot .cyc-dot{ fill: #07204F; stroke: rgba(255,255,255,.32); stroke-width: 1.4;
    transition: fill .4s ease, stroke .4s ease, r .4s cubic-bezier(.2,.7,.2,1); }
  #topnav .cyc-dot.is-on, #sitefoot .cyc-dot.is-on{ fill: #9DBEFF; stroke: #9DBEFF; r: 9; }

  /* the six stages sit radially around the ring */
  #topnav .cyc-lbl, #sitefoot .cyc-lbl{ position: absolute; background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; text-align: center; width: 168px; color: rgba(255,255,255,.6);
    transition: color .3s ease; }
  #topnav .cyc-lbl .cyc-n, #sitefoot .cyc-lbl .cyc-n{ display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em;
    color: rgba(255,255,255,.36); font-variant-numeric: tabular-nums; transition: color .3s ease; }
  #topnav .cyc-lbl .cyc-h, #sitefoot .cyc-lbl .cyc-h{ display: block; margin-top: 5px; font-size: 17px; font-weight: 700;
    letter-spacing: -.015em; color: inherit; }
  #topnav .cyc-lbl[aria-selected="true"], #sitefoot .cyc-lbl[aria-selected="true"]{ color: #fff; }
  #topnav .cyc-lbl[aria-selected="true"] .cyc-n, #sitefoot .cyc-lbl[aria-selected="true"] .cyc-n{ color: #7FA9F8; }
  #topnav .cyc-lbl:hover, #sitefoot .cyc-lbl:hover{ color: #fff; }
  #topnav .cyc-lbl:focus-visible, #sitefoot .cyc-lbl:focus-visible{ outline: 2px solid #9DBEFF; outline-offset: 6px; border-radius: 3px; }

  #topnav .cyc-lbl--0, #sitefoot .cyc-lbl--0{ left: 50%;    top: 12.5%;  transform: translate(-50%, -132%); }
  #topnav .cyc-lbl--1, #sitefoot .cyc-lbl--1{ left: 82.5%;  top: 31.25%; transform: translate(-14%, -108%); }
  #topnav .cyc-lbl--2, #sitefoot .cyc-lbl--2{ left: 82.5%;  top: 68.75%; transform: translate(-14%, 8%); }
  #topnav .cyc-lbl--3, #sitefoot .cyc-lbl--3{ left: 50%;    top: 87.5%;  transform: translate(-50%, 32%); }
  #topnav .cyc-lbl--4, #sitefoot .cyc-lbl--4{ left: 17.5%;  top: 68.75%; transform: translate(-86%, 8%); }
  #topnav .cyc-lbl--5, #sitefoot .cyc-lbl--5{ left: 17.5%;  top: 31.25%; transform: translate(-86%, -108%); }

  /* the reading sits inside the cycle */
  #topnav .cyc-core, #sitefoot .cyc-core{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 58%; text-align: center; }
  #topnav .cyc-core-n, #sitefoot .cyc-core-n{ display: block; font-size: clamp(40px, 5vw, 62px); font-weight: 700;
    letter-spacing: -.04em; line-height: 1; color: rgba(255,255,255,.14);
    font-variant-numeric: tabular-nums; }
  #topnav .cyc-core p, #sitefoot .cyc-core p{ position: absolute; left: 0; right: 0; margin-top: 18px;
    font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.78);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
  #topnav .cyc-core p.is-on, #sitefoot .cyc-core p.is-on{ opacity: 1; transform: none; position: relative; }

  #topnav .cyc-list, #sitefoot .cyc-list{ display: none; }

  @media (max-width: 900px) {
    /* a ring does not survive a phone, so the cycle becomes a spine */
    #topnav .cyc-ring, #sitefoot .cyc-ring{ display: none; }
    #topnav .cyc-list, #sitefoot .cyc-list{ display: block; list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
    #topnav .cyc-list::before, #sitefoot .cyc-list::before{ content: ""; position: absolute; left: 5px; top: 8px; bottom: 30px; width: 1px;
      background: linear-gradient(180deg, #7FA9F8, rgba(126,169,248,.15)); }
    #topnav .cyc-item, #sitefoot .cyc-item{ position: relative; padding-bottom: 26px; }
    #topnav .cyc-item::before, #sitefoot .cyc-item::before{ content: ""; position: absolute; left: -30px; top: 6px; width: 11px; height: 11px;
      border-radius: 50%; background: #07204F; border: 1.4px solid #7FA9F8; }
    #topnav .cyc-item .cyc-n, #sitefoot .cyc-item .cyc-n{ font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #7FA9F8; }
    #topnav .cyc-item h3, #sitefoot .cyc-item h3{ margin-top: 5px; font-size: 18px; }
    #topnav .cyc-item p, #sitefoot .cyc-item p{ margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.7); }
    #topnav .cyc-item:last-child::after, #sitefoot .cyc-item:last-child::after{ content: ""; position: absolute; left: -25px; top: 30px; bottom: 6px;
      width: 14px; border-left: 1px dashed rgba(126,169,248,.5);
      border-bottom: 1px dashed rgba(126,169,248,.5); border-bottom-left-radius: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #topnav .cyc-orbit, #sitefoot .cyc-orbit{ animation: none; }
    #topnav .cyc-arc, #sitefoot .cyc-arc,
#topnav .cyc-core p, #sitefoot .cyc-core p,
#topnav .cyc-dot, #sitefoot .cyc-dot{ transition: none; }
  }

  /* ---------- Hero supporting line ---------- */
  #topnav .hero-strap, #sitefoot .hero-strap{ margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
  #topnav .hero-strap span, #sitefoot .hero-strap span{ display: inline-flex; align-items: center; gap: 18px; }
  #topnav .hero-strap span::after, #sitefoot .hero-strap span::after{ content: ""; width: 5px; height: 5px; background: #4C86F5; transform: rotate(45deg); }
  #topnav .hero-strap span:last-child::after, #sitefoot .hero-strap span:last-child::after{ display: none; }
  /* Title case, matched to the .btn spec beside it — same 13px/700 and the
     same near-zero tracking, so the two labels sit on one optical line.
     The button still reads as primary because it carries the fill. */
  #topnav .hero-link, #sitefoot .hero-link{ color: var(--white); font-size: 13px; font-weight: 700;
    letter-spacing: .01em; text-transform: none;
    text-decoration: none; align-self: center; }


  /* =========================================================
     Lifecycle journey — one record travelling six stages.
     A continuous line runs the full row; the stage that holds
     the record opens wide, the rest fold into numbered spines.
     ========================================================= */
  #topnav .journey, #sitefoot .journey{ margin-top: 64px; position: relative; }
  #topnav .j-panels, #sitefoot .j-panels{ list-style: none; margin: 0; padding: 34px 0 0; position: relative;
    display: flex; gap: 10px; }

  /* the line the record travels — it bleeds past both ends: the
     lifecycle neither starts nor stops inside this section */
  #topnav .j-panels::before, #sitefoot .j-panels::before{ content: ""; position: absolute; left: -28px; right: -28px; top: 9px;
    height: 1px; background: rgba(255,255,255,.16); }
  #topnav .j-fill, #sitefoot .j-fill{ position: absolute; left: -28px; top: 8px; height: 2px; width: 0;
    background: linear-gradient(90deg, rgba(76,134,245,0), rgba(76,134,245,.85) 55%, #BFD4FF);
    box-shadow: 0 0 14px rgba(76,134,245,.7); pointer-events: none; }

  #topnav .j-panel, #sitefoot .j-panel{ position: relative; flex: 0 0 112px; min-width: 0; cursor: pointer; outline: none;
    transition: flex-grow .72s cubic-bezier(.22,.75,.18,1), flex-basis .72s cubic-bezier(.22,.75,.18,1),
                opacity .85s cubic-bezier(.16,.84,.28,1), transform .85s cubic-bezier(.16,.84,.28,1); }
  #topnav .j-panel.act, #sitefoot .j-panel.act{ flex: 1 1 0%; cursor: default; }

  /* stage node: the same diamond the track has always used —
     hollow ahead of the record, solid behind it, lit where it is */
  #topnav .j-node, #sitefoot .j-node{ position: absolute; top: -29px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
    transform: rotate(45deg); background: #04102B; border: 1.5px solid rgba(126,169,248,.55); z-index: 1;
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
  #topnav .j-panel.done .j-node, #sitefoot .j-panel.done .j-node{ background: #4C86F5; border-color: #4C86F5; }
  #topnav .j-panel.act .j-node, #sitefoot .j-panel.act .j-node{ background: #fff; border-color: #fff;
    box-shadow: 0 0 0 5px rgba(76,134,245,.22), 0 0 20px rgba(126,169,248,.9); }

  #topnav .j-card, #sitefoot .j-card{ position: relative; height: 100%; min-height: 396px; overflow: hidden;
    background: rgba(6,20,50,.5); border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background-color .5s ease, border-color .4s ease; }
  #topnav .j-panel:hover .j-card, #sitefoot .j-panel:hover .j-card,
#topnav .j-panel:focus-visible .j-card, #sitefoot .j-panel:focus-visible .j-card{ border-color: rgba(126,169,248,.5); }
  #topnav .j-panel:focus-visible .j-card, #sitefoot .j-panel:focus-visible .j-card{ box-shadow: inset 0 0 0 1px rgba(191,212,255,.9); }
  #topnav .j-panel.act .j-card, #sitefoot .j-panel.act .j-card{ background: linear-gradient(155deg, rgba(13,79,211,.30), rgba(6,20,50,.55) 62%);
    border-color: rgba(126,169,248,.6);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12.5px), calc(100% - 11px) 100%, 0 100%); }
  #topnav .j-panel.act .j-card::before, #sitefoot .j-panel.act .j-card::before{ content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(360px circle at 16% -4%, rgba(76,134,245,.28), transparent 68%); }
  /* redraw the diagonal edge the corner cut removes — same 48.6° as the W */
  #topnav .j-panel.act .j-card::after, #sitefoot .j-panel.act .j-card::after{ content: ""; position: absolute; inset: -1px; pointer-events: none;
    background: rgba(126,169,248,.6);
    clip-path: polygon(calc(100% - 1.000px) calc(100% - 14.240px), calc(100% - 1.000px) calc(100% - 12.120px), calc(100% - 10.786px) calc(100% - 1.000px), calc(100% - 12.651px) calc(100% - 1.000px)); }

  /* folded state: number, title read upward, mark */
  #topnav .j-spine, #sitefoot .j-spine{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    padding: 22px 0 20px; gap: 16px; opacity: 1; transition: opacity .3s ease .2s; }
  #topnav .j-num, #sitefoot .j-num{ font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: #7FA9F8;
    font-variant-numeric: tabular-nums; }
  #topnav .j-tag, #sitefoot .j-tag{ flex: 1; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 12.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(255,255,255,.78); }
  #topnav .journey .ri, #sitefoot .journey .ri{ display: block; }
  #topnav .journey .ri svg, #sitefoot .journey .ri svg{ width: 100%; height: 100%; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  #topnav .j-spine .ri, #sitefoot .j-spine .ri{ width: 21px; height: 21px; color: rgba(126,169,248,.75); }
  #topnav .j-panel.act .j-spine, #sitefoot .j-panel.act .j-spine{ opacity: 0; transition-delay: 0s; pointer-events: none; }
  #topnav .j-panel:not(.act):hover .j-num, #sitefoot .j-panel:not(.act):hover .j-num,
#topnav .j-panel:focus-visible .j-num, #sitefoot .j-panel:focus-visible .j-num{ color: #BFD4FF; }
  #topnav .j-panel:not(.act):hover .j-tag, #sitefoot .j-panel:not(.act):hover .j-tag{ color: #fff; }
  #topnav .j-num, #sitefoot .j-num,
#topnav .j-tag, #sitefoot .j-tag{ transition: color .25s ease; }

  /* open state: the stage itself */
  #topnav .j-body, #sitefoot .j-body{ position: absolute; inset: 0; padding: 32px 36px 28px; min-width: 448px;
    display: flex; flex-direction: column; align-items: flex-start;
    opacity: 0; visibility: hidden; transform: translateX(16px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s; }
  #topnav .j-panel.act .j-body, #sitefoot .j-panel.act .j-body{ opacity: 1; visibility: visible; transform: none;
    transition: opacity .55s ease .2s, transform .65s cubic-bezier(.16,.84,.28,1) .2s, visibility 0s; }
  #topnav .j-count, #sitefoot .j-count{ position: absolute; top: 30px; right: 32px; font-size: 12px; font-weight: 500;
    letter-spacing: .1em; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; }
  #topnav .j-body .ri, #sitefoot .j-body .ri{ width: 34px; height: 34px; color: #BFD4FF; margin-bottom: 24px; }
  #topnav .j-body h3, #sitefoot .j-body h3{ font-size: clamp(22px, 2.2vw, 28px); color: #fff; letter-spacing: -0.022em; margin: 0 0 12px; }
  #topnav .j-body p, #sitefoot .j-body p{ font-size: 15px; line-height: 1.68; color: rgba(255,255,255,.72); max-width: 52ch; }
  #topnav .j-body .more, #sitefoot .j-body .more{ margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 500; text-decoration: none; }
  #topnav .j-body .more .ar, #sitefoot .j-body .more .ar{ display: inline-block; transition: transform .18s ease; }
  #topnav .j-body .more:hover .ar, #sitefoot .j-body .more:hover .ar{ transform: translateX(5px); }

  /* the guided tour's clock: a hairline of time along the open stage */
  #topnav .j-time, #sitefoot .j-time{ position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    transform-origin: 0 50%; transform: scaleX(var(--t, 0));
    background: linear-gradient(90deg, rgba(76,134,245,0), rgba(76,134,245,.85));
    opacity: .9; transition: opacity .3s ease; }
  #topnav .journey.manual .j-time, #sitefoot .journey.manual .j-time,
#topnav .j-panel:not(.act) .j-time, #sitefoot .j-panel:not(.act) .j-time{ opacity: 0; }

  /* icons rest while folded and animate only on the open stage */
  #topnav .j-panel:not(.act) .ri svg *, #sitefoot .j-panel:not(.act) .ri svg *,
#topnav .j-spine .ri svg *, #sitefoot .j-spine .ri svg *{
    animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }

  @media (max-width: 1180px) {
    #topnav .j-panel, #sitefoot .j-panel{ flex-basis: 92px; }
    #topnav .j-body, #sitefoot .j-body{ min-width: 404px; padding: 28px 28px 24px; }
    #topnav .j-count, #sitefoot .j-count{ top: 26px; right: 26px; }
  }

  /* narrow screens: the same journey stood upright — every stage open,
     the record line running down the left margin */
  @media (max-width: 980px) {
    #topnav .j-panels, #sitefoot .j-panels{ display: block; padding: 4px 0 0; }
    #topnav .j-panels::before, #sitefoot .j-panels::before{ left: 15px; right: auto; top: 4px; bottom: 10px; width: 1px; height: auto; }
    #topnav .j-fill, #sitefoot .j-fill{ display: none; }
    #topnav .j-panel, #sitefoot .j-panel{ display: grid; grid-template-columns: 34px 1fr; padding: 0 0 34px; cursor: default; }
    #topnav .j-panel:last-child, #sitefoot .j-panel:last-child{ padding-bottom: 0; }
    #topnav .j-node, #sitefoot .j-node{ position: static; margin: 7px 0 0 11px; grid-column: 1;
      background: #4C86F5; border-color: #4C86F5; box-shadow: none; }
    #topnav .j-card, #sitefoot .j-card{ grid-column: 2; min-height: 0; overflow: visible; background: transparent; border: 0;
      -webkit-backdrop-filter: none; backdrop-filter: none; clip-path: none !important; }
    #topnav .j-card::before, #sitefoot .j-card::before,
#topnav .j-card::after, #sitefoot .j-card::after{ display: none; }
    #topnav .j-spine, #sitefoot .j-spine{ display: none; }
    #topnav .j-body, #sitefoot .j-body{ position: static; min-width: 0; padding: 0 0 0 8px;
      opacity: 1 !important; visibility: visible !important; transform: none !important; }
    #topnav .j-count, #sitefoot .j-count{ position: static; display: block; margin-bottom: 10px;
      font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: #7FA9F8; }
    #topnav .j-body .ri, #sitefoot .j-body .ri{ width: 26px; height: 26px; margin-bottom: 14px; }
    #topnav .j-body h3, #sitefoot .j-body h3{ font-size: 20px; }
    #topnav .j-body p, #sitefoot .j-body p{ font-size: 14px; }
    #topnav .j-body .more, #sitefoot .j-body .more{ margin-top: 0; padding-top: 14px; }
    #topnav .j-time, #sitefoot .j-time{ display: none; }
    #topnav .j-panel:not(.act) .ri svg *, #sitefoot .j-panel:not(.act) .ri svg *{ animation: none !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    #topnav .j-panel, #sitefoot .j-panel,
#topnav .j-card, #sitefoot .j-card,
#topnav .j-body, #sitefoot .j-body,
#topnav .j-spine, #sitefoot .j-spine,
#topnav .j-node, #sitefoot .j-node,
#topnav .j-fill, #sitefoot .j-fill{ transition: none !important; }
    #topnav .j-time, #sitefoot .j-time{ display: none; }
    #topnav .journey .ri svg *, #sitefoot .journey .ri svg *{ animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  }

  /* =========================================================
     Awards — a transparent band closing the security section.
     No plate, no plaques around the marks; the globe reads
     straight through them.

     Every mark keeps its own hue. The set is built three ways,
     so it needs three treatments rather than one blanket filter:
       · .badge  — a filled shape with type inside. Shown in true
                   colour, lifted just enough to clear the globe.
       · .light  — artwork that is already light. Left alone.
       · default — dark ink on transparent. invert + hue-rotate
                   flips it light while returning the hues, so a
                   green shield stays green instead of going white.
     ========================================================= */
  /* Now a closing sub-block of #security rather than its own section, so it
     carries its own separation instead of two stacked 130px section pads:
     a hairline and a measured gap, the same device the trust certs use. */
  #topnav .awards-band, #sitefoot .awards-band{
    background: none; filter: none; clip-path: none;
    text-align: center;
    margin-top: clamp(44px, 4.4vw, 62px);
    padding: clamp(30px, 3vw, 42px) 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  /* The band no longer has a section of its own, so it inherits #security's
     tint. It sits in the gradient's fade-out, which leaves the marks on a
     light floor rather than the full scrim the grid above them gets. */

  /* the eyebrow is the shared one, but this is the longest label on the page —
     .22em tracking stretches it into a thin ribbon. Back to the base .12em. */
  #topnav #awards .eyebrow, #sitefoot #awards .eyebrow{ justify-content: center; align-items: baseline; gap: 6px;
    letter-spacing: .12em; }

  /* the row: no plaques, no rules, no wrapping on desktop */
  #topnav .awards, #sitefoot .awards{
    --badge-lift: 1.22;                /* raise if a dark badge still sinks into the globe */
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
    gap: clamp(12px, 1.8vw, 30px);
    margin: clamp(26px, 2.8vw, 38px) 0 0;
    padding: 0; border: 0;
  }

  #topnav .awards span, #sitefoot .awards span{
    flex: 0 1 auto; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    width: auto; min-height: 0; padding: 0;
    background: none; border: 0; clip-path: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #topnav .awards span::after, #sitefoot .awards span::after{ display: none; }          /* no plaque, so no corner stroke */
  #topnav .awards span:hover, #sitefoot .awards span:hover{ transform: none; }

  #topnav .awards span img, #sitefoot .awards span img{
    height: clamp(36px, 3.9vw, 50px);
    width: auto; max-width: 100%; max-height: none;
    object-fit: contain; display: block;
    filter: invert(1) hue-rotate(180deg) saturate(1.1) brightness(1.06);
    opacity: .84;
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  #topnav .awards span img.abf, #sitefoot .awards span img.abf{ height: calc(clamp(36px, 3.9vw, 50px) * .7); }   /* the wide ABF mark sits at 70% */
  #topnav .awards span img.badge, #sitefoot .awards span img.badge{
    filter: brightness(var(--badge-lift)) saturate(1.06);
    opacity: .94;
  }
  #topnav .awards span img.light, #sitefoot .awards span img.light{
    filter: brightness(1.18) saturate(1.06);
    opacity: .9;
  }
  #topnav .awards span:hover img, #sitefoot .awards span:hover img{ opacity: 1; transform: scale(1.06); }

  #topnav .awards-note, #sitefoot .awards-note{
    margin-top: clamp(20px, 2.2vw, 28px); text-align: center;
    font-size: 12.5px; font-style: italic; color: rgba(255, 255, 255, .5);
  }

  /* below desktop the row breaks into even lines rather than squeezing.
     Eleven marks: 4 + 4 + 3, then 3 + 3 + 3 + 2 — never a single orphan. */
  @media (max-width: 1000px) {
    #topnav .awards, #sitefoot .awards{ flex-wrap: wrap; justify-content: center;
      gap: clamp(24px, 4vw, 34px) clamp(20px, 3.4vw, 34px); }
    #topnav .awards span, #sitefoot .awards span{ flex: 0 0 calc(25% - clamp(20px, 3.4vw, 34px) * 3 / 4); }
    #topnav .awards span img, #sitefoot .awards span img{ height: clamp(34px, 5vw, 44px); }
    #topnav .awards span img.abf, #sitefoot .awards span img.abf{ height: calc(clamp(34px, 5vw, 44px) * .7); }
  }
  @media (max-width: 620px) {
    #topnav .awards, #sitefoot .awards{ gap: 22px 16px; }
    #topnav .awards span, #sitefoot .awards span{ flex: 0 0 calc(33.333% - 11px); }
    #topnav .awards span img, #sitefoot .awards span img{ height: 40px; }
    #topnav .awards span img.abf, #sitefoot .awards span img.abf{ height: 28px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #topnav .awards span img, #sitefoot .awards span img{ transition: none; }
    #topnav .awards span:hover img, #sitefoot .awards span:hover img{ transform: none; }
  }

  /* [faq/patchwork glass: removed — the globe treatment belongs to the homepage] */
  /* =========================================================
     Footer — width.com's content, this page's visual language.
     Column heads carry the same growing blue rule the capability
     cards use; social and AI buttons take the corner notch that
     runs through the chips and plaques.
     ========================================================= */
  #sitefoot{ padding-top: clamp(72px, 7vw, 108px); padding-bottom: 40px; }

  /* A light glass pane, edge to edge — its top lands on the CTA pane's own
     boundary, so there is nothing to feather it into. The blur is kept low
     on purpose: past ~10px the globe's coastlines smear into a flat wash,
     so this softens the city lights just enough to sit text on top of them
     while the continents still read. Saturation is pushed up because blur
     drains colour and the lights go grey without it. */
  #sitefoot::before{
    background: linear-gradient(180deg,
      rgba(3, 11, 31, .38) 0%, rgba(3, 11, 31, .46) 45%, rgba(3, 11, 31, .54) 100%);
    -webkit-backdrop-filter: blur(7px) saturate(145%);
    backdrop-filter: blur(7px) saturate(145%);
  }
  /* without backdrop-filter the tint has to do all the work on its own */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #sitefoot::before{
      background: linear-gradient(180deg,
        rgba(3, 11, 31, .72) 0%, rgba(3, 11, 31, .80) 45%, rgba(3, 11, 31, .88) 100%);
    }
  }

  #topnav .foot-grid, #sitefoot .foot-grid{
    display: grid; grid-template-columns: minmax(300px, 1.05fr) 2.95fr;
    gap: clamp(40px, 5vw, 76px); align-items: start;
  }

  /* --- brand column --- */
  #topnav .foot-logo, #sitefoot .foot-logo{ display: inline-block; color: var(--white); }
  #topnav .foot-logo svg, #sitefoot .foot-logo svg{ height: 22px; width: auto; display: block; }
  #topnav .foot-tag, #sitefoot .foot-tag{ margin-top: 20px; max-width: 34ch; font-size: 15px; line-height: 1.55;
    color: rgba(255,255,255,.72); }
  #topnav .foot-tag b, #sitefoot .foot-tag b{ font-weight: 500; color: #6E9BF5; }

  #topnav .foot-contact, #sitefoot .foot-contact,
#topnav .foot-offices, #sitefoot .foot-offices,
#topnav .foot-social, #sitefoot .foot-social,
#topnav .foot-col ul, #sitefoot .foot-col ul{ list-style: none; margin: 0; padding: 0; }

  #topnav .foot-contact, #sitefoot .foot-contact{ margin-top: 26px; }
  #topnav .foot-contact li + li, #sitefoot .foot-contact li + li{ margin-top: 7px; }
  #topnav .foot-contact a, #sitefoot .foot-contact a{ color: rgba(255,255,255,.62); font-size: 14px; text-decoration: none;
    transition: color .22s ease; }
  #topnav .foot-contact a:hover, #sitefoot .foot-contact a:hover{ color: #fff; }

  /* Offices: each flag precedes a running address; wrapped lines align with the text. */
  #topnav .foot-offices, #sitefoot .foot-offices{ display: grid; gap: 12px; width: 100%; margin-top: 22px;
    color: rgba(255,255,255,.62); }
  #topnav .foot-offices li, #sitefoot .foot-offices li{ display: grid; grid-template-columns: 21px minmax(0, 1fr);
    column-gap: 10px; align-items: start; }
  #topnav .foot-offices .flag, #sitefoot .foot-offices .flag{ display: block; width: 21px; height: 14px; margin-top: 3px; }
  #topnav .foot-offices .adr, #sitefoot .foot-offices .adr{ min-width: 0; font-size: 13px; line-height: 1.6; }

  /* --- social + AI summary: the chip notch, not a pill --- */
  /* bare icons — the 40px box is tap target only, pulled left so the first
     icon optically aligns with the column above it */
  #topnav .foot-social, #sitefoot .foot-social{ display: flex; gap: 4px; margin: 26px 0 0 -10px; }
  #topnav .foot-social a, #sitefoot .foot-social a{
    display: grid; place-items: center; width: 40px; height: 40px;
    color: rgba(255,255,255,.6);
    border: 0; background: none; clip-path: none;
    transition: color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  #topnav .foot-social a svg, #sitefoot .foot-social a svg{ width: 20px; height: 20px; }
  #topnav .foot-social a:hover, #sitefoot .foot-social a:hover{ color: #fff; transform: translateY(-2px); }

  #topnav .foot-ai, #sitefoot .foot-ai{
    display: inline-flex; align-items: center; gap: 12px; margin-top: 24px;
    padding: 9px 14px 9px 16px;
    border: 1px solid rgba(255,255,255,.16); background: rgba(4,16,43,.45);
    clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 11.111px), calc(100% - 9.9px) calc(100% + 1px), -1px calc(100% + 1px));
    --edge: rgba(255,255,255,.16);
  }
  #topnav .foot-ai::after, #sitefoot .foot-ai::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 11.729px), calc(100% - 1.000px) calc(100% - 9.636px), calc(100% - 8.773px) calc(100% - 1.000px), calc(100% - 10.656px) calc(100% - 1.000px)); }
  #topnav .foot-ai-label, #sitefoot .foot-ai-label{ font-size: 13px; color: rgba(255,255,255,.78); white-space: nowrap; }
  #topnav .foot-ai a, #sitefoot .foot-ai a{ display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    color: rgba(255,255,255,.6); background: rgba(255,255,255,.07);
    transition: color .25s ease, background-color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
  #topnav .foot-ai a svg, #sitefoot .foot-ai a svg{ width: 14px; height: 14px; }
  #topnav .foot-ai a:hover, #sitefoot .foot-ai a:hover{ color: #fff; background: rgba(13,79,211,.6); transform: translateY(-2px); }

  /* --- link columns --- */
  #topnav .foot-nav, #sitefoot .foot-nav{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 26px; }
  #topnav .foot-col h3, #sitefoot .foot-col h3{
    margin: 0 0 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.92);
  }
  #topnav .foot-col li + li, #sitefoot .foot-col li + li{ margin-top: 11px; }
  #topnav .foot-col a, #sitefoot .foot-col a{ display: inline-block; font-size: 14px; color: rgba(255,255,255,.6);
    text-decoration: none; transition: color .22s ease, transform .22s ease; }
  #topnav .foot-col a:hover, #sitefoot .foot-col a:hover{ color: #fff; transform: translateX(3px); }

  /* --- bottom bar --- */
  #topnav .foot-meta, #sitefoot .foot-meta{
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 14px 28px; margin-top: clamp(46px, 5vw, 72px); padding-top: 22px;
    font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.5);
  }
  #topnav .foot-legal, #sitefoot .foot-legal{ display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
  #topnav .foot-legal a, #sitefoot .foot-legal a,
#topnav .foot-legal button, #sitefoot .foot-legal button{
    font: inherit; color: rgba(255,255,255,.5); background: none; border: 0; padding: 0;
    cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.22);
    text-underline-offset: 3px; text-decoration-thickness: 1px;
    transition: color .22s ease, text-decoration-color .22s ease;
  }
  #topnav .foot-legal a:hover, #sitefoot .foot-legal a:hover,
#topnav .foot-legal button:hover, #sitefoot .foot-legal button:hover{ color: #fff; text-decoration-color: rgba(157,190,255,.7); }

  @media (max-width: 1080px) {
    #topnav .foot-grid, #sitefoot .foot-grid{ grid-template-columns: 1fr; gap: 48px; }
    #topnav .foot-nav, #sitefoot .foot-nav{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 26px; }
  }
  @media (max-width: 620px) {
    #topnav .foot-nav, #sitefoot .foot-nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    #topnav .foot-tag, #sitefoot .foot-tag{ max-width: none; }
    #topnav .foot-meta, #sitefoot .foot-meta{ justify-content: flex-start; }
    #topnav .foot-legal, #sitefoot .foot-legal{ gap: 16px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #topnav .foot-col a, #sitefoot .foot-col a,
#topnav .foot-social a, #sitefoot .foot-social a,
#topnav .foot-ai a, #sitefoot .foot-ai a{ transition: color .22s ease; }
    #topnav .foot-col a:hover, #sitefoot .foot-col a:hover,
#topnav .foot-social a:hover, #sitefoot .foot-social a:hover,
#topnav .foot-ai a:hover, #sitefoot .foot-ai a:hover{ transform: none; }
  }

  /* No scrim on the trust band — the globe reads through at full strength.
     This sits after the <=760px overrides, and media queries add no
     specificity, so source order alone clears them on mobile too. */
  #topnav section.trust::before, #sitefoot section.trust::before{ background: transparent; }

  /* A soft wash over the foot of the hero so the nested trust block reads.
     It paints behind the hero's content, so it darkens the globe and not the
     copy. Tall enough to cover the whole trust band (464px desktop / 509px
     mobile) plus a lead-in, and it closes on exactly the value #graph opens
     with, so the two meet with no seam. */
  #topnav header.hero::after, #sitefoot header.hero::after{
    height: min(38%, 620px);
    bottom: 0;                        /* see the #graph note: no 1px overlap */
    background: linear-gradient(180deg,
      rgba(3, 11, 31, 0)   0%,
      rgba(3, 11, 31, .08) 18%,
      rgba(3, 11, 31, .34) 40%,
      rgba(3, 11, 31, .54) 66%,
      rgba(3, 11, 31, .66) 100%);
  }
  /* #graph is .night, whose body sits at .66 — it now opens flat on that value
     instead of ramping up from transparent, which is what caused the band.

     Both scrims overhang their box by 1px to avoid subpixel gaps, which made
     them stack on the single row at the join: 1-(.34*.34) = .88 instead of .66,
     drawn as a hairline. Dropping the two overhangs that face each other leaves
     them exactly adjacent. */
  #topnav #graph::before, #sitefoot #graph::before{
    top: 0;
    background: linear-gradient(180deg,
      rgba(3, 11, 31, .66) 0%,
      rgba(3, 11, 31, .66) 86%,
      rgba(3, 11, 31, 0) 100%);
  }

  /* the mobile scrims are heavier, so the handover value is heavier too.
     The #graph id rule above outranks the <=760px block, so restore it here. */
  @media (max-width: 760px) {
    #topnav header.hero::after, #sitefoot header.hero::after{
      background: linear-gradient(180deg,
        rgba(3, 11, 31, 0)   0%,
        rgba(3, 11, 31, .16) 14%,
        rgba(3, 11, 31, .48) 38%,
        rgba(3, 11, 31, .68) 64%,
        rgba(3, 11, 31, .78) 100%);
    }
    #topnav #graph::before, #sitefoot #graph::before{ background: rgba(3, 11, 31, .78); }
  }

  /* ISO 27001 badge above the Security section's eyebrow. The section head is
     already centred, so block + auto margins is all the centring it needs.
     If the badge turns out to be dark ink on transparent it will vanish on
     this dark section — the fix is a mono treatment:
       .sec-badge { filter: brightness(0) invert(1); opacity: .9; }
     Left off deliberately, since it would wreck an already-light badge. */
  #topnav .sec-badge, #sitefoot .sec-badge{
    display: block; margin: 0 auto 20px;
    height: clamp(54px, 5.6vw, 72px); width: auto;
  }

  /* Offset anchor jumps by the height of the fixed nav, so a linked
     section lands below the bar instead of behind it. */
  
  @media (max-width: 1100px) {  }   /* nav collapses here */
  /* The diagonal is rasterised, so on a 1x display a true 1px band lands pale
     and uneven next to the pixel-aligned straight borders. The base above is
     weighted to compensate; at 2x it rasterises cleanly and drops back to 1px. */
  @media (min-resolution: 1.5dppx) {
    #topnav .btn-outline-white::after, #sitefoot .btn-outline-white::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 13.634px), calc(100% - 1.000px) calc(100% - 12.120px), calc(100% - 10.786px) calc(100% - 1.000px), calc(100% - 12.118px) calc(100% - 1.000px)); }
    #topnav .chip::after, #sitefoot .chip::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 10.133px), calc(100% - 1.000px) calc(100% - 8.628px), calc(100% - 7.780px) calc(100% - 1.000px), calc(100% - 9.118px) calc(100% - 1.000px)); }
    #topnav ul.certs li::after, #sitefoot ul.certs li::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 10.133px), calc(100% - 1.000px) calc(100% - 8.628px), calc(100% - 7.780px) calc(100% - 1.000px), calc(100% - 9.118px) calc(100% - 1.000px)); }
    #topnav .cap::after, #sitefoot .cap::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 15.134px), calc(100% - 1.000px) calc(100% - 13.619px), calc(100% - 12.087px) calc(100% - 1.000px), calc(100% - 13.418px) calc(100% - 1.000px)); }
    #topnav .foot-ai::after, #sitefoot .foot-ai::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 11.131px), calc(100% - 1.000px) calc(100% - 9.636px), calc(100% - 8.773px) calc(100% - 1.000px), calc(100% - 10.118px) calc(100% - 1.000px)); }
    #topnav .awards span::after, #sitefoot .awards span::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 12.130px), calc(100% - 1.000px) calc(100% - 10.643px), calc(100% - 9.767px) calc(100% - 1.000px), calc(100% - 11.118px) calc(100% - 1.000px)); }
    #topnav .relay__hand::after, #sitefoot .relay__hand::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 26.134px), calc(100% - 1.000px) calc(100% - 24.620px), calc(100% - 21.786px) calc(100% - 1.000px), calc(100% - 23.118px) calc(100% - 1.000px)); }
    #topnav .j-panel.act .j-card::after, #sitefoot .j-panel.act .j-card::after{ clip-path: polygon(calc(100% - 1.000px) calc(100% - 13.634px), calc(100% - 1.000px) calc(100% - 12.120px), calc(100% - 10.786px) calc(100% - 1.000px), calc(100% - 12.118px) calc(100% - 1.000px)); }
  }

  /* =========================================================
     Platform subpage layer.
     The globe, and the dark treatment that existed to sit over
     it, belong to the homepage. Subpages return to the light
     system underneath: photo-style hero, editorial body, dark
     bands only where a component was built dark (lifecycle,
     graph, AI hand-off), blue CTA, solid dark footer.
     ========================================================= */

  /* --- typography: no orphans — a paragraph never ends on a lone word.
     text-wrap: pretty is a progressive enhancement (Chromium today);
     headings already balance via the base h1-h3 rule. --- */
  #topnav p, #sitefoot p,
#topnav .lede, #sitefoot .lede,
#topnav .sub2, #sitefoot .sub2,
#topnav .ans, #sitefoot .ans,
#topnav .aim, #sitefoot .aim{ text-wrap: pretty; }

  /* --- light restorations: rules the dark pass had rewritten --- */
  #topnav .sec-head .lede, #sitefoot .sec-head .lede{ color: var(--sub); }
  #topnav section.night .sec-head .lede, #sitefoot section.night .sec-head .lede{ color: rgba(255,255,255,.74); }
  #topnav .pt:hover h3, #sitefoot .pt:hover h3{ color: var(--blue); }
  #topnav section.night .pt:hover h3, #sitefoot section.night .pt:hover h3{ color: #BFD4FF; }
  #topnav .faq details[open], #sitefoot .faq details[open]{ background: rgba(13,79,211,.035); }
  #topnav section.night .ai-line, #sitefoot section.night .ai-line{ color: rgba(255,255,255,.7); }
  /* the vignette panels were semi-transparent so the globe could read
     through them; on a white card they need their own solid night */
  #topnav .cap .viz, #sitefoot .cap .viz{ background: linear-gradient(165deg, #0A2A6E 0%, #061C4C 55%, #041233 100%); }
  /* the footer's glass pane has no globe to sit over any more */
  #sitefoot{ background: linear-gradient(180deg, #04122E 0%, #04102B 100%); }
  /* no transparent bands left to bridge, so the CTA needs no run-up */
  #topnav section.cta, #sitefoot section.cta{ margin-top: 0; }

  /* the security grid kept a homepage hover that turned headings white;
     on paper the hover goes to brand blue like every other card */
  #topnav #secGrid .pt:hover h3, #sitefoot #secGrid .pt:hover h3{ color: var(--blue); }
  /* the media slot is a <figure>: strip the UA margin or the image
     insets 40px from the hero's edges */
  #topnav .hero-media, #sitefoot .hero-media{ margin: 0; }

  /* --- the patchwork comparison, carried over from the homepage ---
     Same device, same geometry, same drag; only the ink changes. It was
     drawn against the homepage's dark band, so on paper the tiles go
     white-on-line, the icons and divider take WIDTH Blue, and the blue
     base box stays exactly as it is. */
  #topnav .tint .cmp__row .node, #sitefoot .tint .cmp__row .node{ background: var(--white); border-color: var(--line); color: var(--ink); }
  #topnav .tint .node-ico, #sitefoot .tint .node-ico{ stroke: var(--blue); }
  #topnav .tint .cmp__gaps span, #sitefoot .tint .cmp__gaps span{ color: var(--sub); }
  #topnav .tint .cmp__risers i, #sitefoot .tint .cmp__risers i{ background: rgba(13,79,211,.4); }
  #topnav .tint .cmp__line, #sitefoot .tint .cmp__line{ background: linear-gradient(180deg, rgba(13,79,211,0), rgba(13,79,211,.7) 14%, rgba(13,79,211,.7) 86%, rgba(13,79,211,0)); }
  #topnav .tint .cmp__grip, #sitefoot .tint .cmp__grip{ background: var(--white); border-color: rgba(13,79,211,.5); color: var(--blue);
    box-shadow: 0 10px 26px -12px rgba(7,34,89,.4); }
  #topnav .tint .cmp__stage:hover .cmp__grip, #sitefoot .tint .cmp__stage:hover .cmp__grip,
#topnav .tint .cmp.is-held .cmp__grip, #sitefoot .tint .cmp.is-held .cmp__grip{ border-color: var(--blue); }
  #topnav .tint .cmp__lbl, #sitefoot .tint .cmp__lbl{ color: var(--ink); }
  #topnav .tint .cmp__range:focus-visible, #sitefoot .tint .cmp__range:focus-visible{ outline-color: var(--blue); }
  @media (max-width: 860px) { #topnav .tint .cmp__pane::before, #sitefoot .tint .cmp__pane::before{ color: var(--sub); } }
  /* the four takeaways keep the homepage's icon-gutter layout */
  #topnav #patchPoints .pt:hover h3, #sitefoot #patchPoints .pt:hover h3{ color: var(--ink); }

  /* --- tighter vertical rhythm: less air above every section eyebrow --- */
  #topnav .sec-pad, #sitefoot .sec-pad{ padding: 84px 0; }
  #topnav .sec-pad-t, #sitefoot .sec-pad-t{ padding-top: 84px; }
  @media (max-width: 760px) { #topnav .sec-pad, #sitefoot .sec-pad{ padding: 60px 0; } #topnav .sec-pad-t, #sitefoot .sec-pad-t{ padding-top: 60px; } }

  /* --- strictly no rules above card titles, anywhere on this page --- */
  #topnav .pt::after, #sitefoot .pt::after{ content: none; }
  #topnav .pt, #sitefoot .pt{ padding-top: 0; }

  /* --- icon-gutter point layout (the homepage patchwork treatment, as a
     reusable class): icon in its own 26px gutter, title on one line,
     title and body sharing a single left edge --- */
  #topnav .pts--ico, #sitefoot .pts--ico{ grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(34px, 4.4vw, 64px); row-gap: clamp(26px, 2.6vw, 36px); margin-top: 52px; }
  #topnav .pts--ico .pt, #sitefoot .pts--ico .pt{ display: grid; grid-template-columns: 26px 1fr; column-gap: 15px;
    padding: 0; align-content: start; }
  #topnav .pts--ico .pt h3, #sitefoot .pts--ico .pt h3{ grid-column: 2; align-self: center; }
  #topnav .pts--ico .pt p, #sitefoot .pts--ico .pt p{ grid-column: 2; margin-top: 9px; max-width: 50ch; }
  @media (max-width: 760px) { #topnav .pts--ico, #sitefoot .pts--ico{ grid-template-columns: 1fr; row-gap: 24px; } }
  #topnav .pt-ico, #sitefoot .pt-ico{ grid-column: 1; grid-row: 1; align-self: center; display: block;
    width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round; }
  #topnav section.night .pt-ico, #sitefoot section.night .pt-ico{ stroke: #7FA9F8; }

  /* --- the aim, set as a centred statement rather than a running line --- */
  #topnav .aim, #sitefoot .aim{ margin: clamp(44px, 5vw, 60px) auto 0; text-align: center; max-width: 36ch;
    font-size: clamp(20px, 2.3vw, 26px); font-weight: 500; letter-spacing: -0.015em;
    line-height: 1.4; color: var(--ink); }
  #topnav .aim-k, #sitefoot .aim-k{ display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
  #topnav section.night .aim, #sitefoot section.night .aim{ color: var(--white); }
  #topnav section.night .aim-k, #sitefoot section.night .aim-k{ color: #7FA9F8; }

  /* --- foundation: nothing drawn above the box — it separates by space --- */
  #topnav .sys-base, #sitefoot .sys-base{ margin-top: 30px; }
  #topnav .platform-foot, #sitefoot .platform-foot{ margin-left: auto; margin-right: auto; text-align: center; }

  /* --- subpage hero: image slot, centred copy, no full-viewport takeover ---
     The homepage keeps the globe and the 100vh statement; a subpage hero is
     a shorter banner over swappable photography. Copy inherits the site's
     centred hero type; only the height, anchor and shade differ. */
  /* header.hero carries (0,1,1) specificity, so the subpage variant must
     match it or the homepage's 100vh flex-start hero silently wins */
  #topnav header.hero--sub, #sitefoot header.hero--sub{ min-height: clamp(480px, 66vh, 700px); align-items: flex-end; }
  #topnav .hero--sub .hero-media img, #sitefoot .hero--sub .hero-media img,
#topnav .hero--sub .hero-media svg, #sitefoot .hero--sub .hero-media svg{ position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block; }
  #topnav .hero--sub .hero-in, #sitefoot .hero--sub .hero-in{ padding: 132px 0 100px; }
  @media (max-width: 640px) { #topnav .hero--sub .hero-in, #sitefoot .hero--sub .hero-in{ padding-bottom: 64px; } }
  /* desktop: the h1 sits 150px from the top of the page on every subpage. the
     hero is flex-end, so any slack between the copy and a min-height floor
     stacks above the h1 and shifts it down by a different amount per page —
     the floor is dropped here so the banner runs to its own content and the
     150px is the whole gap */
  @media (min-width: 901px) {
    #topnav header.hero--sub, #sitefoot header.hero--sub{ min-height: 0; }
    #topnav .hero--sub .hero-in, #sitefoot .hero--sub .hero-in{ padding-top: 150px; }
  }
  #topnav .hero--sub h1, #sitefoot .hero--sub h1{ font-size: clamp(38px, 4.9vw, 64px); }
  /* the phone clamp above loses to this rule on source order, so it is restated here:
     at 320px a 38px floor set five one-word lines */
  @media (max-width: 640px) { #topnav .hero--sub h1, #sitefoot .hero--sub h1{ font-size: clamp(28px, 8.4vw, 38px); } }
  /* this photograph is already blue hour: a moderate top shade under the nav,
     open through the middle, and weight at the base where the copy sits */
  #topnav .hero--sub .hero-media .veil, #sitefoot .hero--sub .hero-media .veil{ background: linear-gradient(180deg,
    rgba(3,11,31,.44) 0%, rgba(3,11,31,.20) 38%, rgba(4,16,43,.58) 100%); }
  #topnav .hero--sub .hero-scrim, #sitefoot .hero--sub .hero-scrim{ background: linear-gradient(180deg,
    rgba(3,11,31,0) 0%, rgba(3,11,31,.16) 52%, rgba(3,11,31,.5) 100%); }



  /* --- subbar: the strap chips and the hero's supporting line land
     here, on the first light surface — a subpage device the homepage
     doesn't use --- */
  #topnav .subbar, #sitefoot .subbar{ background: var(--white); border-bottom: 1px solid var(--line); }
  #topnav .subbar-in, #sitefoot .subbar-in{ display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 9px; padding: 20px 0 24px; }
  #topnav .subbar-chips, #sitefoot .subbar-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin: 0;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dark); }
  #topnav .subbar-chips span, #sitefoot .subbar-chips span{ display: inline-flex; align-items: center; gap: 18px; }
  #topnav .subbar-chips span::after, #sitefoot .subbar-chips span::after{ content: ""; width: 5px; height: 5px; background: var(--blue); transform: rotate(45deg); }
  #topnav .subbar-chips span:last-child::after, #sitefoot .subbar-chips span:last-child::after{ display: none; }
  #topnav .subbar-note, #sitefoot .subbar-note{ margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sub); max-width: 78ch; }

  /* --- lifecycle: seven stages, not six ---
     Six folded spines at 112px leave the open stage 372px against a
     448px body. Each spine gives up 16px so the seventh fits. */
  #topnav .journey--7 .j-panel, #sitefoot .journey--7 .j-panel{ flex-basis: 96px; }
  #topnav .journey--7 .j-panel.act, #sitefoot .journey--7 .j-panel.act{ flex-basis: 0%; }
  @media (max-width: 1180px) { #topnav .journey--7 .j-panel, #sitefoot .journey--7 .j-panel{ flex-basis: 76px; } }

  /* --- shared foundation diagram: four base cells under three groups --- */
  #topnav .sys-base, #sitefoot .sys-base{ grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 880px) { #topnav .sys-base, #sitefoot .sys-base{ grid-template-columns: 1fr; } }
  /* resolving a case draws on the rules and the history behind them */
  #topnav .sys:has(.grp:nth-child(3):hover) .sys-base > div:nth-child(4), #sitefoot .sys:has(.grp:nth-child(3):hover) .sys-base > div:nth-child(4){ background: var(--blue); }

  /* --- AI relay: four assists hand over to one decision --- */
  #topnav .relay--4 .relay__steps, #sitefoot .relay--4 .relay__steps{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
  #topnav .relay--4 .relay__step h3, #sitefoot .relay--4 .relay__step h3{ font-size: 16px; max-width: 12ch; }
  #topnav .relay--4 .relay__step p, #sitefoot .relay--4 .relay__step p{ font-size: 13.5px; }
  @media (max-width: 900px) { #topnav .relay--4 .relay__steps, #sitefoot .relay--4 .relay__steps{ grid-template-columns: minmax(0, 1fr); } }

  /* --- the signal ring, re-inked for a light band ---
     the component was drawn for the homepage's night; #flow is paper */
  #topnav .tint .cyc-track, #sitefoot .tint .cyc-track{ stroke: #D6DEEE; }
  #topnav .tint .cyc-arc, #sitefoot .tint .cyc-arc{ stroke: var(--blue); }
  #topnav .tint .cyc-orbit circle, #sitefoot .tint .cyc-orbit circle{ fill: var(--blue); }
  #topnav .tint .cyc-dot, #sitefoot .tint .cyc-dot{ fill: var(--white); stroke: #B9C6E4; }
  #topnav .tint .cyc-dot.is-on, #sitefoot .tint .cyc-dot.is-on{ fill: var(--blue); stroke: var(--blue); }
  #topnav .tint .cyc-lbl, #sitefoot .tint .cyc-lbl{ color: var(--sub); }
  #topnav .tint .cyc-lbl .cyc-n, #sitefoot .tint .cyc-lbl .cyc-n{ color: rgba(7,34,89,.38); }
  #topnav .tint .cyc-lbl:hover, #sitefoot .tint .cyc-lbl:hover,
#topnav .tint .cyc-lbl[aria-selected="true"], #sitefoot .tint .cyc-lbl[aria-selected="true"]{ color: var(--ink); }
  #topnav .tint .cyc-lbl[aria-selected="true"] .cyc-n, #sitefoot .tint .cyc-lbl[aria-selected="true"] .cyc-n{ color: var(--blue); }
  #topnav .tint .cyc-lbl:focus-visible, #sitefoot .tint .cyc-lbl:focus-visible{ outline-color: var(--blue); }
  #topnav .tint .cyc-core-n, #sitefoot .tint .cyc-core-n{ color: rgba(7,34,89,.12); }
  #topnav .tint .cyc-core p, #sitefoot .tint .cyc-core p{ color: var(--sub); }
  @media (max-width: 900px) {
    #topnav .tint .cyc-list::before, #sitefoot .tint .cyc-list::before{ background: linear-gradient(180deg, var(--blue), rgba(13,79,211,.12)); }
    #topnav .tint .cyc-item::before, #sitefoot .tint .cyc-item::before{ background: var(--white); border-color: var(--blue); }
    #topnav .tint .cyc-item .cyc-n, #sitefoot .tint .cyc-item .cyc-n{ color: var(--blue); }
    #topnav .tint .cyc-item p, #sitefoot .tint .cyc-item p{ color: var(--sub); }
    #topnav .tint .cyc-item:last-child::after, #sitefoot .tint .cyc-item:last-child::after{ border-color: rgba(13,79,211,.45); }
  }

  /* --- industries ledger, re-inked for paper --- */
  #topnav .tint .irows, #sitefoot .tint .irows{ border-top-color: var(--line); }
  #topnav .tint .irow, #sitefoot .tint .irow{ border-bottom-color: var(--line); color: var(--ink); }
  #topnav .tint .irow::before, #sitefoot .tint .irow::before{ background: linear-gradient(90deg, rgba(13,79,211,0), rgba(13,79,211,.10) 18%, rgba(13,79,211,.03) 78%, rgba(13,79,211,0)); }
  #topnav .tint .irow p, #sitefoot .tint .irow p{ color: var(--sub); }
  #topnav .tint .irow:hover p, #sitefoot .tint .irow:hover p,
#topnav .tint .irow:focus-visible p, #sitefoot .tint .irow:focus-visible p{ color: var(--ink); }
  #topnav .tint .irow-m, #sitefoot .tint .irow-m{ color: rgba(7,34,89,.45); }
  #topnav .tint .irow:hover .irow-m, #sitefoot .tint .irow:hover .irow-m,
#topnav .tint .irow:focus-visible .irow-m, #sitefoot .tint .irow:focus-visible .irow-m{ color: var(--blue); }

  /* --- operations on paper: the record reads as an actual document --- */
  #topnav .tint .anno-item, #sitefoot .tint .anno-item{ border-top-color: var(--line); }
  #topnav .tint .anno-item h3, #sitefoot .tint .anno-item h3{ color: var(--ink); }
  #topnav .tint .anno-item p, #sitefoot .tint .anno-item p{ color: var(--sub); }
  #topnav .tint .rec-card, #sitefoot .tint .rec-card{ box-shadow: 0 30px 70px -28px rgba(7,34,89,.35), 0 0 0 1px var(--line); }
  #topnav .tint .rec-cap, #sitefoot .tint .rec-cap{ color: var(--sub); }
  /* controls that hold at once, not stages in an order: the brand
     diamond instead of a step number */
  #topnav .anno-item .n i, #sitefoot .anno-item .n i{ display: block; width: 8px; height: 8px; margin-top: 7px;
    background: var(--blue); transform: rotate(45deg); }

  /* --- awards on light: the marks keep their own colours --- */
  #topnav .tint .awards-band, #sitefoot .tint .awards-band{ border-top: 0; padding-top: 0; }
  #topnav .tint .awards span img, #sitefoot .tint .awards span img,
#topnav .tint .awards span img.badge, #sitefoot .tint .awards span img.badge,
#topnav .tint .awards span img.light, #sitefoot .tint .awards span img.light{ filter: none; opacity: .88; }
  #topnav .tint .awards span:hover img, #sitefoot .tint .awards span:hover img{ opacity: 1; }
  #topnav .tint .awards-note, #sitefoot .tint .awards-note{ color: var(--sub); }

  /* --- WIDTH AI vignette: scattered evidence resolves into one summary,
     and the pill at the end is the analyst, not the model --- */
  #topnav .viz--ai .src, #sitefoot .viz--ai .src{ fill: rgba(255,255,255,.15); animation: vzGlow 5.2s linear infinite; animation-delay: var(--d, 0s); }
  #topnav .viz--ai .fd, #sitefoot .viz--ai .fd{ fill: none; stroke: rgba(157,190,255,.5); stroke-width: 1.2;
    animation: vzDraw 5.2s cubic-bezier(.4,0,.2,1) infinite; animation-delay: var(--d, 0s); }
  #topnav .viz--ai .core, #sitefoot .viz--ai .core{ fill: rgba(76,134,245,.22); stroke: #4C86F5; stroke-width: 1.4;
    transform-box: fill-box; transform-origin: 50% 50%; animation: icBeat 5.2s ease-in-out infinite; }
  #topnav .viz--ai .ty, #sitefoot .viz--ai .ty{ fill: #4C86F5; opacity: .85; transform-box: fill-box; transform-origin: 0 50%;
    animation: vzType 5.2s cubic-bezier(.4,0,.2,1) infinite; animation-delay: var(--d, 0s); }
  #topnav .viz--ai .hpill rect, #sitefoot .viz--ai .hpill rect{ fill: rgba(157,190,255,.12); stroke: #9DBEFF; stroke-width: 1.2; }
  #topnav .viz--ai .hpill text, #sitefoot .viz--ai .hpill text{ fill: #BFD4FF; }
  #topnav .viz--ai .hpill, #sitefoot .viz--ai .hpill{ animation: vzVerify 5.2s cubic-bezier(.4,0,.2,1) infinite; }
  @media (prefers-reduced-motion: reduce) {
    #topnav .viz--ai .src, #sitefoot .viz--ai .src,
#topnav .viz--ai .fd, #sitefoot .viz--ai .fd,
#topnav .viz--ai .core, #sitefoot .viz--ai .core,
#topnav .viz--ai .ty, #sitefoot .viz--ai .ty,
#topnav .viz--ai .hpill, #sitefoot .viz--ai .hpill{ animation: none; }
    #topnav .viz--ai .fd, #sitefoot .viz--ai .fd{ stroke-dashoffset: 0; }
  }

  /* =========================================================
     Primary nav — same structure as width.com: four dropdowns
     (Platform, Product, Solutions, Resources) plus About.
     ========================================================= */

  #topnav .nav-links, #sitefoot .nav-links{ gap: 2px; align-items: center; }
  #topnav .nav-item, #sitefoot .nav-item{ position: relative; display: flex; align-items: center; }

  /* the trigger has to match .nav-links a exactly, since one is a button
     and one is an anchor but they sit on the same optical line */
  #topnav .nav-trigger, #sitefoot .nav-trigger{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 11px; margin: 0; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 15.6px; font-weight: 500; line-height: 1;   /* 12px until 2026-09-24: menu +30% */
    letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
    color: rgba(255,255,255,.85); transition: color .2s ease;
  }
  #topnav .nav-flat, #sitefoot .nav-flat{ padding: 10px 11px; }
  #topnav .nav-trigger .cv, #sitefoot .nav-trigger .cv{ width: 10px; height: 10px; flex: none; fill: none;
    stroke: currentColor; stroke-width: 2.2; transition: transform .22s ease; opacity: .7; }
  #topnav .nav-item.open .nav-trigger .cv, #sitefoot .nav-item.open .nav-trigger .cv{ transform: rotate(180deg); }
  #topnav .nav-trigger:hover, #sitefoot .nav-trigger:hover,
#topnav .nav-item.open .nav-trigger, #sitefoot .nav-item.open .nav-trigger{ color: #fff; }
  #topnav:not(.scrolled) .nav-trigger{ color: rgba(255,255,255,.78); }
  #topnav:not(.scrolled) .nav-trigger:hover,
#topnav:not(.scrolled) .nav-item.open .nav-trigger{ color: #fff; }

  /* --- the panel --- */
  #topnav .nav-drop, #sitefoot .nav-drop{
    position: absolute; top: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 244px; padding: 10px;
    background: rgba(6,20,50,.94);
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 28px 64px -26px rgba(2,8,26,.92);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .22s;
  }
  /* bridges the 12px gap so the pointer can travel trigger → panel */
  #topnav .nav-drop::before, #sitefoot .nav-drop::before{ content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  #topnav .nav-item.open .nav-drop, #sitefoot .nav-item.open .nav-drop{
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%);
  }
  #topnav .nav-drop.wide, #sitefoot .nav-drop.wide{ min-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  #topnav .nav-drop-col, #sitefoot .nav-drop-col{ display: flex; flex-direction: column; }
  #topnav .nav-drop-title, #sitefoot .nav-drop-title{
    padding: 8px 12px 7px; font-size: 10px; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: rgba(255,255,255,.42);
  }

  /* dropdown links are sentence case and larger — they must beat the
     uppercase .nav-links a rule, which they do on source order at equal weight */
  #topnav .nav-links .nav-drop a{
    display: block; padding: 9px 12px;
    font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: rgba(255,255,255,.84); white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
  }
  #topnav .nav-links .nav-drop a:hover,
#topnav .nav-links .nav-drop a:focus-visible{
    background: rgba(255,255,255,.09); color: #fff; outline: none;
  }

  /* --- burger --- */
  #topnav .burger, #sitefoot .burger{
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0 9px; background: none; border: 0; cursor: pointer;
  }
  #topnav .burger span, #sitefoot .burger span{
    display: block; height: 1.6px; width: 100%; background: rgba(255,255,255,.85);
    transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
  }
  #topnav.menu-open .burger span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
  #topnav.menu-open .burger span:nth-child(2){ opacity: 0; }
  #topnav.menu-open .burger span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }

  /* --- mobile panel --- */
  #topnav .nav-panel, #sitefoot .nav-panel{
    position: fixed; left: 0; right: 0; top: 68px; bottom: 0; z-index: 59;
    background: rgba(4,16,43,.97);
    -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
    border-top: 1px solid rgba(255,255,255,.12);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 0 48px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .26s ease, transform .26s cubic-bezier(.2,.7,.2,1), visibility .26s;
  }
  #topnav.menu-open .nav-panel{ opacity: 1; visibility: visible; transform: none; }
  #topnav .mgroup, #sitefoot .mgroup{ border-bottom: 1px solid rgba(255,255,255,.10); }
  #topnav .mgroup-t, #sitefoot .mgroup-t{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 18px 2px; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #fff; text-align: left;
  }
  #topnav .mgroup-t .cv, #sitefoot .mgroup-t .cv{ width: 12px; height: 12px; flex: none; fill: none;
    stroke: currentColor; stroke-width: 2.2; opacity: .6; transition: transform .25s ease; }
  #topnav .mgroup.open .mgroup-t .cv, #sitefoot .mgroup.open .mgroup-t .cv{ transform: rotate(180deg); }
  /* A max-height accordion measured as 0px here even though the .open rule
     won on specificity, so this runs on display instead — no interpolated
     height to get stuck, and the reveal is carried by a keyframe. */
  #topnav .mgroup-p, #sitefoot .mgroup-p{ display: none; padding-bottom: 6px; }
  #topnav .mgroup.open .mgroup-p, #sitefoot .mgroup.open .mgroup-p{ display: block; animation: mgReveal .28s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes mgReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { #topnav .mgroup.open .mgroup-p, #sitefoot .mgroup.open .mgroup-p{ animation: none; } }
  #topnav .mgroup-p a, #sitefoot .mgroup-p a,
#topnav .mflat, #sitefoot .mflat{
    display: block; padding: 12px 2px; font-size: 15px; font-weight: 500;
    color: rgba(255,255,255,.78); text-decoration: none; letter-spacing: 0; text-transform: none;
  }
  #topnav .mgroup-p a:last-child, #sitefoot .mgroup-p a:last-child{ padding-bottom: 20px; }
  #topnav .mgroup-p a:hover, #sitefoot .mgroup-p a:hover,
#topnav .mflat:hover, #sitefoot .mflat:hover{ color: #fff; }
  #topnav .mgroup-p .nav-drop-title, #sitefoot .mgroup-p .nav-drop-title{ padding: 12px 2px 4px; }
  #topnav .mflat, #sitefoot .mflat{ padding: 18px 2px; font-size: 13px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #fff; }

  @media (max-width: 1100px) { #topnav .burger, #sitefoot .burger{ display: flex; } }
  /* the demo button already ran past the right edge at 390px; the burger
     makes it tighter, so the bar tightens with it */
  @media (max-width: 560px) {
    #topnav .nav-in, #sitefoot .nav-in{ gap: 8px; }
    #topnav .nav-right, #sitefoot .nav-right{ gap: 2px; }
    #topnav .burger, #sitefoot .burger{ width: 34px; padding: 0 6px; }
    #topnav .nav-cta .btn, #sitefoot .nav-cta .btn{ min-height: 40px; padding: 0 12px; font-size: 10.5px; letter-spacing: .01em; }
    #topnav .nav-cta .calico, #sitefoot .nav-cta .calico{ display: none; }
    #topnav .nav-panel, #sitefoot .nav-panel{ top: 68px; }
  }
  @media (min-width: 1101px) { #topnav .nav-panel, #sitefoot .nav-panel{ display: none; } }
  @media (max-width: 1280px) {
    #topnav .nav-trigger, #sitefoot .nav-trigger{ font-size: 15px; letter-spacing: .06em; padding: 10px 8px; }
    #topnav .nav-flat, #sitefoot .nav-flat{ padding: 10px 8px; }
  }
  /* the menu labels went up 30% on 2026-09-24; just above the burger breakpoint they only fit
     with tighter tracking and padding (at 1101 they ran 14px into the language button) */
  @media (min-width: 1101px) and (max-width: 1200px) {
    #topnav .nav-in, #sitefoot .nav-in{ grid-template-columns: auto minmax(0,1fr) auto; }   /* centre the menu between logo and buttons, not on the page */
    #topnav .nav-trigger, #sitefoot .nav-trigger{ letter-spacing: .03em; padding: 10px 5px; }
    #topnav .nav-flat, #sitefoot .nav-flat{ padding: 10px 5px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #topnav .nav-drop, #sitefoot .nav-drop,
#topnav .nav-panel, #sitefoot .nav-panel,
#topnav .mgroup-p, #sitefoot .mgroup-p,
#topnav .burger span, #sitefoot .burger span,
#topnav .nav-trigger .cv, #sitefoot .nav-trigger .cv{ transition: none; }
  }

  /* [nav: scrolled colours, menu-open bar and aria-current live in css/nav.css] */

  /* --- section heads without an eyebrow: the headline is the first thing, so it
     carries no top margin (no page carries an eyebrow any more) --- */
  #topnav .sec-head > h2:first-child, #sitefoot .sec-head > h2:first-child{ margin-top: 0; }

  /* --- the redrawn corner edges (::after, inset: -1px) must anchor to their own element.
     Unanchored, .foot-ai's edge measured against the full-width footer and forced a 1px
     horizontal scroll on every inner page; index.css already anchors it. Same fix here,
     and for the two other edge owners that were never positioned. --- */
  #topnav .foot-ai, #sitefoot .foot-ai,
#topnav ul.certs li, #sitefoot ul.certs li,
#topnav .awards span, #sitefoot .awards span{ position: relative; }

/* =========================================================
     Industries: four cards across, not four stacked rows (the home page layout,
     carried into the inner-page skin so platform, ai and about match it).
     The 860px rule already stacked each row's contents vertically,
     which is exactly the card shape — so this promotes that layout
     to every width and lays the four out on one line.
     ========================================================= */
  #topnav .irows, #sitefoot .irows{
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
    margin-top: clamp(32px, 3.4vw, 44px);
    border-top: 0;                     /* a rule belongs to a list, not a grid */
  }
  #topnav .irow, #sitefoot .irow{
    display: flex; flex-direction: column; align-items: stretch;
    gap: 14px; padding: 0 0 4px;
    border-bottom: 0;                  /* ditto the row separators */
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  #topnav .irow::before, #sitefoot .irow::before{ display: none; }     /* the sweep was sized for a full-width row */
  #topnav .irow:hover, #sitefoot .irow:hover,
#topnav .irow:focus-visible, #sitefoot .irow:focus-visible{ transform: translateY(-4px); }
  #topnav .irow-ph, #sitefoot .irow-ph{ aspect-ratio: 3 / 2; }
  #topnav .irow-ph h3, #sitefoot .irow-ph h3{ font-size: clamp(17px, 1.5vw, 23px); padding: 10px 12px; }
  #topnav .irow p, #sitefoot .irow p{ max-width: none; font-size: 14px; line-height: 1.6; }
  /* pushes every Explore onto the same baseline despite uneven copy */
  #topnav .irow-m, #sitefoot .irow-m{ justify-self: start; align-self: flex-start; margin-top: auto; padding-top: 2px; }

  @media (max-width: 1100px) { #topnav .irows, #sitefoot .irows{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px)  {
    #topnav .irows, #sitefoot .irows{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
    #topnav .irow-ph, #sitefoot .irow-ph{ aspect-ratio: 21 / 9; }
    #topnav .irow-ph h3, #sitefoot .irow-ph h3{ font-size: clamp(21px, 6vw, 26px); }
  }
  @media (prefers-reduced-motion: reduce) {
    #topnav .irow, #sitefoot .irow{ transition: none; }
    #topnav .irow:hover, #sitefoot .irow:hover,
#topnav .irow:focus-visible, #sitefoot .irow:focus-visible{ transform: none; }
  }

  /* --- industries cards: one motion curve for the whole hover, no lag, no flicker ---
     The lift, the photo zoom and the arrow share one easing with matched timing, so
     nothing catches up late; will-change keeps both transforms on the compositor; and a
     transparent 8px apron below each card keeps the pointer inside while the card lifts,
     so a hover at the bottom edge cannot flicker on and off. Opacity is kept in the
     transition so the reveal still fades in. --- */
  #topnav .irow, #sitefoot .irow{ transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .65s cubic-bezier(.2,.6,.2,1);
    will-change: transform; }
  #topnav .irow::after, #sitefoot .irow::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; }
  #topnav .irow-ph img, #sitefoot .irow-ph img{ transition: transform .9s cubic-bezier(.22,.61,.36,1); will-change: transform; backface-visibility: hidden; }
  #topnav .irow:hover .irow-ph img, #sitefoot .irow:hover .irow-ph img,
#topnav .irow:focus-visible .irow-ph img, #sitefoot .irow:focus-visible .irow-ph img{ transform: scale(1.04); }
  #topnav .irow-m .ar, #sitefoot .irow-m .ar{ transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  #topnav .irow p, #sitefoot .irow p,
#topnav .irow-m, #sitefoot .irow-m{ transition: color .3s ease; }
  @media (prefers-reduced-motion: reduce) {
    #topnav .irow, #sitefoot .irow,
#topnav .irow-ph img, #sitefoot .irow-ph img,
#topnav .irow-m .ar, #sitefoot .irow-m .ar,
#topnav .irow p, #sitefoot .irow p,
#topnav .irow-m, #sitefoot .irow-m{ transition: none; will-change: auto; }
  }

  /* --- Final CTA: copy left, buttons right (the home page layout) ---------------
     The subpage layer had centred this into a single column with the buttons under
     the text. The markup always had .cta-copy and .cta-side; this puts them back on
     one line, leaner: less vertical padding, one-sentence lede, one-line strap. --- */
  #topnav .cta-in, #sitefoot .cta-in{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: clamp(32px, 5vw, 80px);
    max-width: 1180px; text-align: left; padding: clamp(64px, 7vw, 84px) 0;
  }
  #topnav .cta-copy, #sitefoot .cta-copy{ container-type: inline-size; min-width: 0; }
  /* one line at any column width: the size is derived from the headline's own
     character count (--h2-chars, set by site.js; 32 is the home page's line), with a
     ~3% margin under the width a Gotham Bold line measures per px of font-size */
  #topnav .cta-copy h2, #sitefoot .cta-copy h2{
    margin-left: 0; margin-right: 0; max-width: none; white-space: nowrap;
    font-size: clamp(30px, 3.4vw, 43px);
    font-size: min(clamp(30px, 4.8vw, 54px), calc(176cqw / var(--h2-chars, 32)));
  }
  #topnav .cta .lede, #sitefoot .cta .lede{
    margin-left: 0; margin-right: 0; max-width: none;
    font-size: clamp(14px, 1.3vw, 17px);
    font-size: clamp(14px, 1.94cqw, 17px);
  }
  #topnav .cta-strap, #sitefoot .cta-strap{ margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.85); white-space: nowrap; }
  #topnav .cta-side, #sitefoot .cta-side{
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 14px; margin-top: 0; width: max-content;
  }
  #topnav .cta-side .btn, #sitefoot .cta-side .btn{ justify-content: center; }
  @media (max-width: 1000px) {
    #topnav .cta-in, #sitefoot .cta-in{ grid-template-columns: minmax(0, 1fr); gap: 34px; }
    #topnav .cta-side, #sitefoot .cta-side{ width: auto; align-items: flex-start; }
    #topnav .cta-side .btn, #sitefoot .cta-side .btn{ width: auto; }
  }
  @media (max-width: 600px) {
    #topnav .cta-copy h2, #sitefoot .cta-copy h2{ white-space: normal; font-size: clamp(28px, 7.6vw, 36px); }
    #topnav .cta .lede, #sitefoot .cta .lede{ font-size: 16px; }
    #topnav .cta-strap, #sitefoot .cta-strap{ white-space: normal; }
  }

  /* --- awards band as a trust strip: it now follows the section head directly, on
     paper. The dark-band treatment (hairline, inverted marks, white note) has nowhere
     left to apply on the inner pages, so the light treatment becomes the default, and
     the three stacked gaps above the marks (band margin + band padding + row margin)
     collapse into one measured gap. --- */
  #topnav .awards-band, #sitefoot .awards-band{ margin-top: clamp(32px, 3.4vw, 44px); padding-top: 0; border-top: 0; }
  #topnav .awards, #sitefoot .awards{ margin-top: 0; }
  #topnav .awards span img, #sitefoot .awards span img,
#topnav .awards span img.badge, #sitefoot .awards span img.badge,
#topnav .awards span img.light, #sitefoot .awards span img.light{ filter: none; opacity: .88; }
  #topnav .awards span:hover img, #sitefoot .awards span:hover img{ opacity: 1; }
  #topnav .awards-note, #sitefoot .awards-note{ margin-top: 18px; color: var(--sub); }

  /* --- #security head: badge on the left, copy on the right (the home page's sub-band
     layout). The badge is 50% larger, as on the home page; the head becomes a full-width
     two-column row with left-aligned copy released from the centred caps. Under 760px it
     stacks and centres again. --- */
  #topnav .sec-badge, #sitefoot .sec-badge{ height: clamp(81px, 8.4vw, 108px); }
  #topnav #security .sec-head, #sitefoot #security .sec-head{
    display: flex; align-items: center; justify-content: flex-start;
    gap: clamp(24px, 4vw, 56px); max-width: none; text-align: left;
  }
  #topnav #security .sec-head .sec-badge, #sitefoot #security .sec-head .sec-badge{ margin: 0; flex: 0 0 auto; }
  #topnav #security .sec-head-copy, #sitefoot #security .sec-head-copy{ flex: 1 1 auto; min-width: 0; }
  #topnav #security .sec-head h2, #sitefoot #security .sec-head h2,
#topnav #security .sec-head h3, #sitefoot #security .sec-head h3,
#topnav #security .sec-head .lede, #sitefoot #security .sec-head .lede{ margin-left: 0; margin-right: 0; max-width: none; }
  #topnav #security .sec-head-copy h2, #sitefoot #security .sec-head-copy h2,
#topnav #security .sec-head-copy h3, #sitefoot #security .sec-head-copy h3{ margin-top: 0; }
  /* the headline is the home page's sub-band heading, not a section H2: one line at any
     column width, the lede tucked 13px under it */
  #topnav #security .sec-head-copy h3, #sitefoot #security .sec-head-copy h3{ font-size: clamp(21px, 2.4vw, 30px); letter-spacing: -0.022em; line-height: 1.24; white-space: nowrap; }
  #topnav #security .sec-head .lede, #sitefoot #security .sec-head .lede{ margin-top: 13px; max-width: 64ch; }
  @media (max-width: 760px) {
    #topnav #security .sec-head, #sitefoot #security .sec-head{ display: block; text-align: center; }
    #topnav #security .sec-head .sec-badge, #sitefoot #security .sec-head .sec-badge{ margin: 0 auto 16px; }
    #topnav #security .sec-head h2, #sitefoot #security .sec-head h2,
#topnav #security .sec-head h3, #sitefoot #security .sec-head h3,
#topnav #security .sec-head .lede, #sitefoot #security .sec-head .lede{ margin-left: auto; margin-right: auto; }
    #topnav #security .sec-head-copy h3, #sitefoot #security .sec-head-copy h3{ white-space: normal; }
  }

  /* --- subbar strip: the 12px caps inherited the body's 1.55 line-height, which padded
     the strip to 64px with more air under the letters than above them. A caps-safe 1.2
     line box and even padding centre the row. On phones the chips wrap as flex items
     with their own 10px row gap, so the tighter line box does not close the rows up. --- */
  #topnav .subbar-in, #sitefoot .subbar-in{ padding: 20px 0; gap: 8px; }
  #topnav .subbar-chips, #sitefoot .subbar-chips{ line-height: 1.2; }

  /* =========================================================
     Mobile pass (2026-09-07): fixes found checking about, platform and ai
     at 320-390px. Shared components only; page-specific fixes live in
     css/about.css and css/ai.css.
     ========================================================= */

  /* --- subbar chips: a diamond that lands at the end of a wrapped line
     separates nothing, so under 760px the chips drop their diamonds and the
     gaps do the work. This was ai.css-only; about and platform wrapped with
     dangling diamonds. --- */
  @media (max-width: 760px) {
    #topnav .subbar-chips, #sitefoot .subbar-chips{ gap: 6px 14px; }
    #topnav .subbar-chips span, #sitefoot .subbar-chips span{ gap: 0; }
    #topnav .subbar-chips span::after, #sitefoot .subbar-chips span::after{ display: none; }
  }

  /* --- wide buttons: "Explore the WIDTH Platform" measures 331px and
     "Explore Developer Resources" 332px against a 319px column at 375px, so
     the label ran into the right padding and, at 320px, off the edge. On phones
     the label may wrap; the vertical padding keeps a two-line button readable
     (the base .btn has none — its 52px comes from min-height). --- */
  @media (max-width: 600px) {
    #topnav .cta-side .btn, #sitefoot .cta-side .btn,
#topnav .btn-row .btn, #sitefoot .btn-row .btn{
      white-space: normal; max-width: 100%; line-height: 1.3;
      padding: 14px 20px;
    }
  }

  /* --- lifecycle journey, stacked: .j-panel.act .j-card outranked the mobile
     .j-card reset, so stage 01 kept its desktop gradient panel while 02-07 sat
     on the plain band — a padding-less highlighted box behind the first stage.
     Every stage is open on a phone, so none of them carries the panel. --- */
  @media (max-width: 980px) {
    #topnav .j-panel.act .j-card, #sitefoot .j-panel.act .j-card{ background: transparent; }
  }

  /* --- case record: the 118px key column left 137px for the value at 375px
     (about fifteen characters a line) and overflowed the card at 320px. Key
     above value on small phones. --- */
  @media (max-width: 480px) {
    #topnav .rec-head, #sitefoot .rec-head{ flex-wrap: wrap; }
    #topnav .rec-row, #sitefoot .rec-row{ grid-template-columns: 1fr; gap: 3px; }
    #topnav .rec-row .rk, #sitefoot .rec-row .rk{ padding-top: 0; }
  }

  /* --- industries: the Explore line is nowrap; "Explore Professional Services"
     measures 296px and a 320px phone offers 264px. It may wrap when it must. --- */
  @media (max-width: 620px) {
    #topnav .irow-m, #sitefoot .irow-m{ white-space: normal; }
  }

  /* --- nav under 340px: logo + burger + language + demo button measure 342px,
     so the button ran off the right edge of a 320px screen --- */
  @media (max-width: 340px) {
    /* (the nav's own 340px tightening lives in css/nav.css) */
    /* the AI-summary chip measures 272px against a 264px column */
    #topnav .foot-ai, #sitefoot .foot-ai{ gap: 8px; padding: 9px 10px 9px 12px; }
  }

  /* --- hero secondary link on narrow phones: as a flex row the label wrapped to two centred
     lines and the arrow sat alone on the right. Inline text keeps the arrow with the last word. --- */
  @media (max-width: 400px) {
    #topnav .hero-link, #sitefoot .hero-link{ display: inline-block; text-align: center; line-height: 1.5; }
    #topnav .hero-link .ar, #sitefoot .hero-link .ar{ display: inline; margin-left: 6px; }
  }

  /* --- three icon-gutter points stayed three across at 768px, where each tile measured
     ~230px and every title wrapped; two across until the phone rule takes over at 760 --- */
  @media (max-width: 900px) and (min-width: 761px) { #topnav .pts--ico.c3, #sitefoot .pts--ico.c3{ grid-template-columns: repeat(2, 1fr); } }


  /* =========================================================
     Reason tiles, three or four across: the capability tile without its vignette. Written for
     about.html as .caps.c4 (css/about.css) and ported to aml-monitoring.html as .caps.c3; moved
     here on 2026-09-15 when bank.html became the third page to use them. No mark; the title
     sits at the foot of a shared title row, so the headline-to-body gap is the same on every
     card; body and link leading pulled in; every link is a two-line label (break authored in
     the markup) with its arrow on the right edge. The tiles share their rows (subgrid): title,
     body and link each sit on a common track, so the bodies start on one line across the row
     however many lines a title takes, and the link lands on the shared bottom track.
     ========================================================= */
  #topnav .caps.c3, #sitefoot .caps.c3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #topnav .caps.c4, #sitefoot .caps.c4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #topnav .caps.c3, #sitefoot .caps.c3,
#topnav .caps.c4, #sitefoot .caps.c4{ gap: clamp(16px, 1.8vw, 24px); }
  #topnav .caps.c3 .cap, #sitefoot .caps.c3 .cap,
#topnav .caps.c4 .cap, #sitefoot .caps.c4 .cap{ display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
  #topnav .caps.c3 .cap > *, #sitefoot .caps.c3 .cap > *,
#topnav .caps.c4 .cap > *, #sitefoot .caps.c4 .cap > *{ min-width: 0; }
  #topnav .caps.c3 .cap h3, #sitefoot .caps.c3 .cap h3,
#topnav .caps.c4 .cap h3, #sitefoot .caps.c4 .cap h3{ margin: 20px 24px 0; font-size: 19px; align-self: end; }
  #topnav .caps.c3 .cap p, #sitefoot .caps.c3 .cap p,
#topnav .caps.c4 .cap p, #sitefoot .caps.c4 .cap p{ margin: 8px 24px 0; line-height: 1.5; }
  #topnav .caps.c3 .cap .more, #sitefoot .caps.c3 .cap .more,
#topnav .caps.c4 .cap .more, #sitefoot .caps.c4 .cap .more{ margin: auto 24px 0; padding: 14px 0 18px; justify-content: space-between; gap: 12px; line-height: 1.35; }
  #topnav .caps.c3 .cap .more .ar, #sitefoot .caps.c3 .cap .more .ar,
#topnav .caps.c4 .cap .more .ar, #sitefoot .caps.c4 .cap .more .ar{ flex: 0 0 auto; }
  /* css/product.css paints .cap:hover with its own gradient on the product pages; these tiles keep the flat --light hover */
  #topnav .caps.c3 .cap:hover, #sitefoot .caps.c3 .cap:hover,
#topnav .caps.c4 .cap:hover, #sitefoot .caps.c4 .cap:hover{ background: var(--light); border-color: var(--line); }
  @media (max-width: 1100px) { #topnav .caps.c4, #sitefoot .caps.c4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 980px) { #topnav .caps.c3, #sitefoot .caps.c3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) { #topnav .caps.c3, #sitefoot .caps.c3,
#topnav .caps.c4, #sitefoot .caps.c4{ grid-template-columns: minmax(0, 1fr); } }

  /* =========================================================
     Footer on paper (2026-09-23) — the home page is white from the hero down, so its footer is
     the light grey band instead of night. footer.site.paper flips the colours; the layout above
     is untouched, and the inner pages keep the night footer until they take the class too.
     ========================================================= */
  #sitefoot.paper{ background: var(--light); color: var(--sub); }
  #sitefoot.paper::before{ display: none; }
  #sitefoot.paper .foot-logo{ color: var(--blue); }
  /* .foot-brand svg above paints every mark in the column white; on paper each mark takes its link's colour */
  #sitefoot.paper .foot-brand svg{ color: inherit; }
  #sitefoot.paper .foot-tag{ color: var(--sub); }
  #sitefoot.paper .foot-tag b{ color: var(--blue); }
  #sitefoot.paper .foot-offices,
#sitefoot.paper .foot-contact a,
#sitefoot.paper .foot-col a,
#sitefoot.paper .foot-social a,
#sitefoot.paper .foot-legal a,
#sitefoot.paper .foot-legal button,
#sitefoot.paper .foot-meta{ color: var(--sub); }
  #sitefoot.paper .foot-contact a:hover,
#sitefoot.paper .foot-col a:hover,
#sitefoot.paper .foot-social a:hover,
#sitefoot.paper .foot-legal a:hover,
#sitefoot.paper .foot-legal button:hover{ color: var(--blue); }
  #sitefoot.paper .foot-col h3{ color: var(--ink); }
  #sitefoot.paper .foot-ai{ border-color: var(--line); background: #fff; --edge: var(--line); }
  #sitefoot.paper .foot-ai-label{ color: var(--ink); }
  #sitefoot.paper .foot-ai a{ color: var(--sub); background: var(--light); }
  #sitefoot.paper .foot-ai a:hover{ color: #fff; background: var(--blue); }
  #sitefoot.paper .foot-meta{ border-top: 1px solid var(--line); }
  #sitefoot.paper .foot-legal a,
#sitefoot.paper .foot-legal button{ text-decoration-color: rgba(28,26,23,.25); }
  #sitefoot.paper .foot-legal a:hover,
#sitefoot.paper .foot-legal button:hover{ text-decoration-color: rgba(13,79,211,.5); }

  /* =========================================================
     CTA band — the approved home-page look on every page (2026-10-07). The markup is the one every
     page already has (.cta-copy: h2, lede, strap; .cta-side: two buttons); this block only restyles
     it: centred copy, the lighter brand-blue gradient of css/home.css's .cta--home, the strap as a
     closing line under the buttons, no corner motif. Delete this block to return to the copy-left /
     buttons-right band above. The home page's own .cta--home rules say the same thing.
     ========================================================= */
  #topnav section.cta, #sitefoot section.cta{ margin: 0; padding: clamp(84px, 9vw, 128px) 0; color: #fff;
    background: linear-gradient(120deg, #0D4FD3 0%, #1A5FE6 55%, #2F6FEA 100%); }
  #topnav section.cta::before, #sitefoot section.cta::before{ content: ""; position: absolute; inset: -20%; pointer-events: none;
    background: radial-gradient(40% 50% at 18% 20%, rgba(255,255,255,.18), transparent 60%),
                radial-gradient(36% 46% at 86% 82%, rgba(127,169,248,.38), transparent 60%); }
  #topnav section.cta::after, #sitefoot section.cta::after,
#topnav section.cta .corner-motif, #sitefoot section.cta .corner-motif{ display: none; }
  #topnav section.cta .cta-in, #sitefoot section.cta .cta-in{ display: flex; flex-direction: column; align-items: center; max-width: 860px; margin: 0 auto; padding: 0; text-align: center; gap: 0; }
  #topnav section.cta .cta-copy, #sitefoot section.cta .cta-copy{ display: contents; }                 /* its h2, lede and strap become items of the column, so the strap can close the band */
  #topnav section.cta .cta-copy h2, #sitefoot section.cta .cta-copy h2{ order: 1; margin: 0 auto; max-width: none; white-space: normal; text-wrap: balance;
    font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.032em; color: #fff; }
  #topnav section.cta .lede, #sitefoot section.cta .lede{ order: 2; max-width: 56ch; margin: 20px auto 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: rgba(255,255,255,.86); }
  #topnav section.cta .cta-side, #sitefoot section.cta .cta-side{ order: 3; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 12px; width: auto; margin: 34px 0 0; }
  #topnav section.cta .cta-side .btn, #sitefoot section.cta .cta-side .btn{ width: auto; }
  #topnav section.cta .cta-strap, #sitefoot section.cta .cta-strap{ order: 4; margin-top: 30px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.72); white-space: normal; }

  /* =========================================================
     WeChat card (2026-10-09) — the QR card the live about page carries, now on every page's footer in the light
     version: white card, hairline, the QR at 76px, "WeChat / Scan to connect with WIDTH." It sits between the social
     marks and the AI-summary chip. The night variant below is only there in case a footer ever loses .paper.
     ========================================================= */
  #topnav .foot-wechat, #sitefoot .foot-wechat{ display: flex; align-items: center; gap: 12px; width: max-content; max-width: 100%; margin: 18px 0 0;
    padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  #topnav .foot-wechat img, #sitefoot .foot-wechat img{ display: block; width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
  #topnav .foot-wechat strong, #sitefoot .foot-wechat strong{ display: block; margin-bottom: 3px; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink); }
  #topnav .foot-wechat span, #sitefoot .foot-wechat span{ display: block; max-width: 140px; font-size: 11.5px; line-height: 1.4; color: var(--sub); }
  #sitefoot:not(.paper) .foot-wechat{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.045); }
  #sitefoot:not(.paper) .foot-wechat img{ border: 0; padding: 4px; }
  #sitefoot:not(.paper) .foot-wechat strong{ color: #fff; }
  #sitefoot:not(.paper) .foot-wechat span{ color: rgba(255,255,255,.68); }


/* --- 2026-10-12: the pathfin.ai listing line under the award marks (about, platform) --- */
#topnav .awards-listed, #sitefoot .awards-listed{ font-style: normal; font-size: 14px; color: var(--ink); margin-top: 10px; }
#topnav .awards-listed a, #sitefoot .awards-listed a{ color: var(--blue); font-weight: 600; text-decoration: none; }
#topnav .awards-listed a:hover, #sitefoot .awards-listed a:hover{ text-decoration: underline; }
#topnav section.night .awards-listed, #sitefoot section.night .awards-listed{ color: rgba(255,255,255,.82); }
#topnav section.night .awards-listed a, #sitefoot section.night .awards-listed a{ color: #BFD4FF; }

/* =========================================================
   Footer social row (2026-10-13): WeChat sits in the row as a fourth mark and shows its QR on hover/focus/tap;
   the AI-summary chip loses its box and reads as one quiet line under the row. The old .foot-wechat card rules above
   are superseded by these (the card markup is gone from every page).
   ========================================================= */
#topnav .foot-social li, #sitefoot .foot-social li{ position: relative; }
#topnav .foot-social li.foot-wechat button, #sitefoot .foot-social li.foot-wechat button{ display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer;
  transition: color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
#topnav .foot-social li.foot-wechat button svg, #sitefoot .foot-social li.foot-wechat button svg{ width: 22px; height: 22px; }
#topnav .foot-social li.foot-wechat button:hover, #sitefoot .foot-social li.foot-wechat button:hover,
#topnav .foot-social li.foot-wechat button[aria-expanded="true"], #sitefoot .foot-social li.foot-wechat button[aria-expanded="true"]{ color: #fff; transform: translateY(-2px); }
#sitefoot.paper .foot-social li.foot-wechat button{ color: var(--sub); }
#sitefoot.paper .foot-social li.foot-wechat button:hover,
#sitefoot.paper .foot-social li.foot-wechat button[aria-expanded="true"]{ color: var(--blue); }
#topnav .foot-wechat-pop, #sitefoot .foot-wechat-pop{ position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5; display: grid; justify-items: center; gap: 4px; width: max-content; min-width: 200px; padding: 14px 18px 14px; border-radius: 0; background: #fff; border: 1px solid var(--line);
  clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 13px), calc(100% - 11.3px) calc(100% + 1px), -1px calc(100% + 1px));
  box-shadow: 0 18px 44px -18px rgba(4,16,43,.35); transform: translate(-50%, 6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
#topnav .foot-wechat-pop::after, #sitefoot .foot-wechat-pop::after{ display: none; }   /* the clip-path would cut the arrow; the card sits 10px above the mark instead */
#topnav .foot-wechat-pop img, #sitefoot .foot-wechat-pop img{ display: block; width: 120px; height: 120px; border-radius: 0; }
#topnav .foot-wechat-pop b, #sitefoot .foot-wechat-pop b{ display: block; margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ink); }
#topnav .foot-wechat-pop small, #sitefoot .foot-wechat-pop small{ display: block; font-size: 11.5px; line-height: 1.35; color: var(--sub); white-space: nowrap; }
#topnav .foot-social li.foot-wechat:hover .foot-wechat-pop, #sitefoot .foot-social li.foot-wechat:hover .foot-wechat-pop,
#topnav .foot-social li.foot-wechat:focus-within .foot-wechat-pop, #sitefoot .foot-social li.foot-wechat:focus-within .foot-wechat-pop,
#topnav .foot-social li.foot-wechat button[aria-expanded="true"] + .foot-wechat-pop, #sitefoot .foot-social li.foot-wechat button[aria-expanded="true"] + .foot-wechat-pop{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
@media (max-width: 760px) { #topnav .foot-wechat-pop, #sitefoot .foot-wechat-pop{ left: 0; transform: translate(0, 6px); } #topnav .foot-wechat-pop::after, #sitefoot .foot-wechat-pop::after{ left: 20px; }
  #topnav .foot-social li.foot-wechat:hover .foot-wechat-pop, #sitefoot .foot-social li.foot-wechat:hover .foot-wechat-pop,
#topnav .foot-social li.foot-wechat:focus-within .foot-wechat-pop, #sitefoot .foot-social li.foot-wechat:focus-within .foot-wechat-pop,
#topnav .foot-social li.foot-wechat button[aria-expanded="true"] + .foot-wechat-pop, #sitefoot .foot-social li.foot-wechat button[aria-expanded="true"] + .foot-wechat-pop{ transform: translate(0, 0); } }
/* the AI line */
#topnav .foot-ai, #sitefoot .foot-ai,
#sitefoot.paper .foot-ai{ display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; background: none; clip-path: none; --edge: transparent; }
#topnav .foot-ai::after, #sitefoot .foot-ai::after{ display: none; }
#topnav .foot-ai-label, #sitefoot .foot-ai-label,
#sitefoot.paper .foot-ai-label{ font-size: 12.5px; color: rgba(255,255,255,.6); }
#sitefoot.paper .foot-ai-label{ color: var(--sub); }
#topnav .foot-ai a, #sitefoot .foot-ai a,
#sitefoot.paper .foot-ai a{ width: 28px; height: 28px; background: none; color: rgba(255,255,255,.6); }
#sitefoot.paper .foot-ai a{ color: var(--sub); border: 1px solid var(--line); }
#topnav .foot-ai a:hover, #sitefoot .foot-ai a:hover,
#sitefoot.paper .foot-ai a:hover{ color: var(--blue); background: none; border-color: var(--blue); transform: none; }
#topnav .foot-ai a svg, #sitefoot .foot-ai a svg{ width: 13px; height: 13px; }

/* =========================================================
   Footer rhythm (2026-10-13, "reduce all the gap, make the footer premium"): the old .foot-wechat card rules still matched
   the new <li class="foot-wechat">, so the WeChat button sat in a white box; and the brand column was a loose stack.
   One tighter rhythm from the logo to the AI line, the social marks and the AI line as one compact group.
   ========================================================= */
#sitefoot{ padding-top: clamp(56px, 6vw, 80px); padding-bottom: 32px; }
#topnav .foot-grid, #sitefoot .foot-grid{ gap: 48px; }
#topnav .foot-tag, #sitefoot .foot-tag{ margin-top: 16px; }
#topnav .foot-contact, #sitefoot .foot-contact{ margin-top: 20px; }
#topnav .foot-contact li + li, #sitefoot .foot-contact li + li{ margin-top: 5px; }
#topnav .foot-offices, #sitefoot .foot-offices{ margin-top: 16px; gap: 8px; }
#topnav .foot-offices .adr, #sitefoot .foot-offices .adr{ line-height: 1.5; }
#topnav .foot-social, #sitefoot .foot-social{ margin: 18px 0 0 -10px; gap: 2px; }
#topnav .foot-social li.foot-wechat, #sitefoot .foot-social li.foot-wechat,
#sitefoot:not(.paper) .foot-social li.foot-wechat{ width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; display: block; }
#topnav .foot-ai, #sitefoot .foot-ai,
#sitefoot.paper .foot-ai{ margin-top: 6px; }
#topnav .foot-col h3, #sitefoot .foot-col h3{ margin-bottom: 14px; }
#topnav .foot-col li + li, #sitefoot .foot-col li + li{ margin-top: 9px; }
#topnav .foot-nav, #sitefoot .foot-nav{ gap: 28px 24px; }
#topnav .foot-meta, #sitefoot .foot-meta{ margin-top: 36px; padding-top: 18px; }
#sitefoot.paper .foot-meta{ border-top-color: var(--line); }
@media (max-width: 1000px) { #topnav .foot-grid, #sitefoot .foot-grid{ gap: 40px; } #topnav .foot-nav, #sitefoot .foot-nav{ gap: 30px 22px; } }
@media (max-width: 640px) { #sitefoot{ padding-top: 48px; } #topnav .foot-grid, #sitefoot .foot-grid{ gap: 36px; } #topnav .foot-nav, #sitefoot .foot-nav{ gap: 26px 18px; } #topnav .foot-meta, #sitefoot .foot-meta{ margin-top: 30px; } }

/* ============================== Digital onboarding promotion (2026-10-16) ==============================
   One look in three sizes: .promo (card with the key visual: the home page), .promo-line (one line: the pricing hero),
   .foot-promo (the top of every footer except the onboarding pages themselves). Light-blue chipped rectangle, sentence
   case, the price in blue, one link. Each block carries data-promo-until="2026-12-31"; js/site.js removes it after that day. */
#topnav .promo, #sitefoot .promo{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.6vw, 36px); max-width: 1080px; margin: clamp(36px, 4vw, 52px) auto 0; padding: clamp(14px, 1.6vw, 20px) clamp(22px, 3vw, 40px) clamp(14px, 1.6vw, 20px) clamp(14px, 1.8vw, 24px); background: linear-gradient(100deg, #E3ECFB 0%, #EEF3FC 100%); color: var(--ink); text-align: left;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 19.2px) 100%, 0 100%); }
#topnav .promo-kv, #sitefoot .promo-kv{ display: block; width: clamp(76px, 7.4vw, 108px); height: auto; }
#topnav .promo-copy, #sitefoot .promo-copy{ display: block; min-width: 0; }
#topnav .promo-k, #sitefoot .promo-k{ display: block; font-size: 13.5px; font-weight: 700; color: var(--blue); }
#topnav .promo-t, #sitefoot .promo-t{ display: block; margin-top: 4px; font-size: clamp(21px, 2vw, 27px); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; color: var(--ink); }
#topnav .promo-t b, #sitefoot .promo-t b{ font-weight: inherit; color: var(--blue); }
#topnav .promo-d, #sitefoot .promo-d{ display: block; margin-top: 6px; font-size: 14px; color: var(--sub); }
#topnav .promo .btn, #sitefoot .promo .btn{ white-space: nowrap; }
@media (max-width: 760px) { #topnav .promo, #sitefoot .promo{ grid-template-columns: auto minmax(0, 1fr); row-gap: 14px; } #topnav .promo .btn, #sitefoot .promo .btn{ grid-column: 1 / -1; justify-self: stretch; justify-content: center; } }

#topnav .promo-line, #sitefoot .promo-line{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; width: fit-content; max-width: 100%; margin: 30px auto 0; padding: 13px 22px; background: rgba(255,255,255,.12); color: #fff; font-size: 15px; line-height: 1.45; text-align: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 11.4px) 100%, 0 100%); }
#topnav .promo-line b, #sitefoot .promo-line b{ font-weight: 700; color: #B9D2FF; }
#topnav .promo-line a, #sitefoot .promo-line a{ color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
#topnav .promo-line .ar, #sitefoot .promo-line .ar,
#sitefoot .foot-promo .ar{ display: inline-block; transition: transform .18s ease; }
#topnav .promo-line a:hover .ar, #sitefoot .promo-line a:hover .ar,
#sitefoot .foot-promo a:hover .ar{ transform: translateX(4px); }

#sitefoot .foot-promo{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 0 0 clamp(36px, 4vw, 52px); padding: 16px clamp(18px, 2vw, 26px); background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 14px) 100%, 0 100%); }
#sitefoot .foot-promo p{ display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
#sitefoot .foot-promo p svg{ flex: none; width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#sitefoot .foot-promo b{ font-weight: 700; color: var(--blue); }
#sitefoot .foot-promo a{ font-size: 15px; font-weight: 700; color: var(--blue); text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) { #sitefoot .foot-promo p{ align-items: flex-start; } }


/* 2026-10-16: no capitals in the shared labels (boss: "capitalize太多") — the CTA strap and the footer column heads, every page */
#topnav section.cta .cta-strap, #sitefoot section.cta .cta-strap{ text-transform: none; letter-spacing: .02em; font-size: 13.5px; }
#sitefoot .foot-col h3{ text-transform: none; letter-spacing: .01em; font-size: 14px; }

/* ============================== CTA band headlines, 2026-10-20 ==============================
   User: "All CTA, if can, make the headline 1 liner, and then make it all white text for headline". One colour (no pale-blue
   phrase), the band's column widened to 1100px, and on desktop the headline refuses to wrap: it is sized to fit instead
   (each page's headline was shortened where 48px still overflowed). Phones wrap as before. */
#topnav section.cta .cta-copy h2, #sitefoot section.cta .cta-copy h2,
#topnav section.cta .cta-copy h2 b, #sitefoot section.cta .cta-copy h2 b,
#topnav .cta--home h2 b, #sitefoot .cta--home h2 b,
#topnav section.cta.cta--form .cta-copy h2 b, #sitefoot section.cta.cta--form .cta-copy h2 b{ color: #fff; }
#topnav section.cta .cta-in, #sitefoot section.cta .cta-in{ max-width: 1100px; }
@media (min-width: 1101px) {
  #topnav section.cta .cta-copy h2, #sitefoot section.cta .cta-copy h2{ white-space: nowrap; font-size: clamp(30px, 3.3vw, 48px); text-wrap: initial; }
  #topnav section.cta .cta-copy h2 br, #sitefoot section.cta .cta-copy h2 br{ display: none; }
  #topnav section.cta.cta--form .cta-copy h2, #sitefoot section.cta.cta--form .cta-copy h2{ white-space: normal; }   /* the onboarding contact band is two columns; its headline keeps wrapping */
}
#topnav section.cta .cta-copy h2 b, #sitefoot section.cta .cta-copy h2 b,
#topnav section.cta h2 b, #sitefoot section.cta h2 b,
#topnav .cta--home h2 b, #sitefoot .cta--home h2 b{ color: #fff !important; }   /* page sheets load after this file; the pale-blue phrase must lose everywhere */

/* ============================== footer line breaks, 2026-10-20 ==============================
   The phone number is gone from every footer. Tagline: the two blue phrases never split across lines. Addresses: one
   authored break each, at the comma before the city, so every line is a whole part of the address. Link columns: wide
   enough that no item wraps (Transaction Monitoring was the one that did). */
#topnav .foot-tag b, #sitefoot .foot-tag b{ white-space: nowrap; }
#topnav .foot-offices .adr br, #sitefoot .foot-offices .adr br{ display: block; }
#topnav .foot-col a, #sitefoot .foot-col a{ white-space: nowrap; }
@media (min-width: 1101px) { #topnav .foot-grid, #sitefoot .foot-grid{ grid-template-columns: minmax(280px, 300px) minmax(0, 1fr); column-gap: 48px; } #topnav .foot-nav, #sitefoot .foot-nav{ display: grid; grid-template-columns: repeat(5, max-content); justify-content: space-between; } }
@media (max-width: 640px) { #topnav .foot-col a, #sitefoot .foot-col a{ white-space: normal; } }

/* css/nav.css — the one navigation skin, loaded LAST on every page (index included).
   The bar's layout lives in the base rules that css/index.css and css/site.css share
   (nav.top, .nav-in, .nav-links, .nav-trigger, .nav-drop, .burger, .nav-panel …); those
   are identical on every page. This file carries every rule that used to differ between
   the home page and the inner pages — the scrolled surface, the link colours, the demo
   button, the language menu — so the bar looks and behaves the same wherever a reader
   lands. Scrolled, the bar is night glass over a dark band and white paper over a light one
   (the .paper block below; js/nav.js decides which). Change the bar here, once. */

/* ---------- the bar at the top of the page: type floating on the hero ---------- */
#topnav{
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
#topnav .logo{ color: #fff; }
#topnav .nav-links a,
#topnav .nav-trigger,
#topnav:not(.scrolled) .nav-trigger,
#topnav .lang-btn{ color: rgba(255,255,255,.84); }
#topnav .nav-links a:hover,
#topnav .nav-trigger:hover,
#topnav:not(.scrolled) .nav-trigger:hover,
#topnav .nav-item.open .nav-trigger,
#topnav:not(.scrolled) .nav-item.open .nav-trigger,
#topnav .lang-btn:hover{ color: #fff; }
#topnav .burger span{ background: rgba(255,255,255,.9); }

/* the demo button is brand blue in every state, on every page */
#topnav .nav-cta .btn,
#topnav.scrolled .nav-cta .btn{
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 10px 24px -14px rgba(13,79,211,.9);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  --calico-halo: var(--blue);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
#topnav .nav-cta .btn:hover,
#topnav.scrolled .nav-cta .btn:hover{ background: var(--dark); border-color: var(--dark); --calico-halo: var(--dark); }

/* ---------- scrolled over a dark band: one night glass bar ---------- */
#topnav.scrolled{
  background: rgba(4,16,43,.78);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: rgba(255,255,255,.12); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 40px -24px rgba(2,8,26,.9);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #topnav.scrolled{ background: rgba(4,16,43,.96); }
}
#topnav.scrolled .logo{ color: #fff; }
#topnav.scrolled .nav-links a,
#topnav.scrolled .nav-trigger,
#topnav.scrolled .lang-btn{ color: rgba(255,255,255,.88); }
#topnav.scrolled .nav-links a:hover,
#topnav.scrolled .nav-trigger:hover,
#topnav.scrolled .nav-item.open .nav-trigger,
#topnav.scrolled .lang-btn:hover{ color: #fff; }
#topnav.scrolled .burger span{ background: #fff; }

/* the page you are on */
#topnav .nav-links .nav-drop a[aria-current],
#topnav .nav-flat[aria-current],
#topnav .mgroup-p a[aria-current], #sitefoot .mgroup-p a[aria-current],
#topnav .mflat[aria-current], #sitefoot .mflat[aria-current]{ color: #fff; }
#topnav .nav-flat[aria-current]{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.5);
  text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- language menu: night glass, like the dropdowns ---------- */
#topnav .lang-menu, #sitefoot .lang-menu{ background: rgba(6,20,50,.94); border-color: rgba(255,255,255,.16);
  box-shadow: 0 28px 64px -26px rgba(2,8,26,.92); }
#topnav .lang-menu li, #sitefoot .lang-menu li{ color: rgba(255,255,255,.88); }
#topnav .lang-menu li:hover, #sitefoot .lang-menu li:hover,
#topnav .lang-menu li:focus-visible, #sitefoot .lang-menu li:focus-visible{ background: rgba(255,255,255,.10); color: #fff; }
#topnav .lang-menu li[aria-selected="true"]::after, #sitefoot .lang-menu li[aria-selected="true"]::after{ color: #7FA9F8; }

/* ---------- the open mobile panel is night, so the bar above it goes night too ---------- */
#topnav.menu-open,
#topnav.menu-open.scrolled{ background: rgba(4,16,43,.97); border-bottom-color: rgba(255,255,255,.12);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
#topnav.menu-open .logo,
#topnav.menu-open .lang-btn{ color: #fff; }
#topnav.menu-open .burger span{ background: #fff; }

/* ---------- over paper: ink type and the blue mark; scrolled, a white bar ----------
   js/nav.js reads --nav-skin from the band under the middle of the bar and puts .paper on the
   bar while that band is light, scrolled or not. The map of skins lives here, next to the bar it
   drives: a new dark band skin joins the dark list; a one-off band can say so inline
   (style="--nav-skin: dark"). Since 2026-09-23 index.html is white from the hero down
   (header.hero.hero--home, section.band, footer.site.paper are light), so its bar shows ink type
   and the blue mark before any scroll; the inner pages keep their dark heroes and the white type
   above. The surface (white glass, hairline, shadow) still waits for .scrolled. */

#topnav header.hero, #sitefoot header.hero,
#topnav section.night, #sitefoot section.night,
#topnav section.cta, #sitefoot section.cta,
#sitefoot{ --nav-skin: dark; }
#topnav header.hero.hero--home, #sitefoot header.hero.hero--home,
#topnav section.band, #sitefoot section.band,
#sitefoot.paper{ --nav-skin: light; }

/* the open mobile panel is night, so the bar above it stays night: hence :not(.menu-open) */
#topnav.scrolled.paper:not(.menu-open){
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(4,16,43,.02), 0 12px 40px -24px rgba(4,16,43,.35);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #topnav.scrolled.paper:not(.menu-open){ background: rgba(255,255,255,.98); }
}
#topnav.paper:not(.menu-open) .logo{ color: var(--blue); }          /* the blue mark, #0D4FD3 */
#topnav.paper:not(.menu-open) .nav-links a,
#topnav.paper:not(.menu-open) .nav-trigger,
#topnav.paper:not(.menu-open) .lang-btn{ color: rgba(28,26,23,.86); }  /* --ink */
#topnav.paper:not(.menu-open) .nav-links a:hover,
#topnav.paper:not(.menu-open) .nav-trigger:hover,
#topnav.paper:not(.menu-open) .nav-item.open .nav-trigger,
#topnav.paper:not(.menu-open) .lang-btn:hover{ color: var(--blue); }
#topnav.paper:not(.menu-open) .burger span{ background: var(--ink); }

/* the page you are on */
#topnav.paper:not(.menu-open) .nav-links .nav-drop a[aria-current],
#topnav.paper:not(.menu-open) .nav-flat[aria-current]{ color: var(--blue); }
#topnav.paper:not(.menu-open) .nav-flat[aria-current]{ text-decoration-color: rgba(13,79,211,.45); }

/* the dropdowns hang off a white bar, so they go paper with it */
#topnav.paper:not(.menu-open) .nav-drop{
  background: rgba(255,255,255,.97); border-color: var(--line);
  box-shadow: 0 28px 64px -26px rgba(4,16,43,.38);
}
#topnav.paper:not(.menu-open) .nav-drop-title{ color: var(--sub); }
#topnav.paper:not(.menu-open) .nav-links .nav-drop a{ color: var(--ink); }
#topnav.paper:not(.menu-open) .nav-links .nav-drop a:hover,
#topnav.paper:not(.menu-open) .nav-links .nav-drop a:focus-visible{ background: var(--light); color: var(--blue); }

/* and so does the language menu */
#topnav.paper:not(.menu-open) .lang-menu{ background: rgba(255,255,255,.98); border-color: var(--line);
  box-shadow: 0 28px 64px -26px rgba(4,16,43,.38); }
#topnav.paper:not(.menu-open) .lang-menu li{ color: var(--ink); }
#topnav.paper:not(.menu-open) .lang-menu li:hover,
#topnav.paper:not(.menu-open) .lang-menu li:focus-visible{ background: var(--light); color: var(--blue); }
#topnav.paper:not(.menu-open) .lang-menu li[aria-selected="true"]::after{ color: var(--blue); }

/* ---------- small screens ---------- */
/* logo + burger + language + demo button measure 342px, so the button ran off the
   right edge of a 320px screen (the home page never carried this rule) */
@media (max-width: 340px) {
  #topnav .nav-in, #sitefoot .nav-in{ gap: 8px; }                 /* the 28px page gutter stays: the logo lines up with the copy below */
  #topnav .logo svg, #sitefoot .logo svg{ height: 20px; }
  #topnav .burger, #sitefoot .burger{ width: 30px; padding: 0 4px; }
  #topnav .lang-btn, #sitefoot .lang-btn{ padding: 9px 4px; }
  #topnav .nav-cta .btn, #sitefoot .nav-cta .btn{ padding: 0 8px; font-size: 9.5px; letter-spacing: .01em; }
}
/* the panel starts under the 68px bar; keep it there at every phone width */
@media (max-width: 1100px) { #topnav .nav-panel, #sitefoot .nav-panel{ top: 68px; } }

@media (prefers-reduced-motion: reduce) {
  #topnav,
#topnav .nav-cta .btn{ transition: none; }
}

/* ---------- menu labels in title case (2026-10-09, user: "keep all navigation menu title case") ----------
   The markup has always been title case ("Platform", "Book a Demo"); the capitals came from text-transform in
   css/site.css. Removed here for the bar, its dropdown column heads and the phone menu, with the wide caps
   tracking brought back to normal and the size up a touch, since title case has a smaller x-height. ---------- */
#topnav .nav-links a,
#topnav .nav-trigger,
#topnav .nav-flat{ text-transform: none; letter-spacing: .005em; font-size: 16px; }
#topnav .nav-drop-title,
#topnav .mgroup-t,
#topnav .mflat{ text-transform: none; letter-spacing: .005em; }
@media (max-width: 1280px) { #topnav .nav-links a,
#topnav .nav-trigger,
#topnav .nav-flat{ font-size: 15.5px; letter-spacing: 0; } }
@media (max-width: 1200px) { #topnav .nav-links a,
#topnav .nav-trigger,
#topnav .nav-flat{ font-size: 15px; } }



/* The scoping root itself needs explicit sizing. Nav colour comes from
   nav.css, just as it does on index.html. */
#topnav .logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  text-decoration: none;
}
#topnav .logo svg { display: block; width: auto; height: 31px; }
#topnav.menu-open .logo { color: #fff; }
@media (max-width: 1100px) {
  #topnav .logo svg { height: 26px; }
}