/* 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. */

  :root {
    --blue: #0D4FD3;
    --dark: #072259;
    --night: #04102B;
    --ink: #1C1A17;
    --white: #FFFFFF;
    --light: #F4F5F7;
    --line: #E3E5E9;
    --sub: #55565A;
    /* breathing room above and below the hero product shot — both sides read
       from this, so they can't drift apart again */
    --shot-gap: clamp(48px, 5vw, 80px);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--white); color: var(--ink);
    font-family: 'Gotham', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400; font-size: 16px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  /* Brand guide p.13: Line Space 1.2, Line Spacing -25 (= -0.025em) */
  h1, h2, 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 */
  h3 { line-height: 1.4; }
  /* display-scale h3 keeps heading leading */
  .relay__hand h3 { line-height: 1.2; }
  p { margin: 0; }
  a { color: var(--blue); }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

  .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. */
  .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;
  }
  .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. */
  .btn-outline-white::after, .chip::after, ul.certs li::after,
  .cap::after, .foot-ai::after, .awards span::after {
    content: ""; position: absolute; inset: -1px; pointer-events: none;
    background: var(--edge, transparent);
  }
  .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)); }
  .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)); }
  .btn .ar { transition: transform .18s ease; }
  .btn:hover .ar { transform: translateX(4px); }
  .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); }
  .btn-primary { background: var(--blue); color: var(--white); border: 1px solid var(--blue); }
  .btn-primary:hover { background: var(--dark); border-color: var(--dark); }
  .btn-on-blue { background: var(--white); color: var(--blue); border: 1px solid var(--white); }
  .btn-on-blue:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }
  .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); }
  .btn-outline-white:hover { --edge: var(--white); }
  .btn-outline-white:hover { background: var(--white); color: var(--dark); border-color: var(--white); }
  .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 ---------- */
  nav.top {
    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;
  }
  .nav-in { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center;
    height: 84px; gap: 20px; max-width: 1320px; }
  .nav-right { display: flex; align-items: center; gap: 16px; justify-self: end; }
  .logo { display: inline-flex; align-items: center; justify-self: start; text-decoration: none; color: var(--white); transition: color .25s ease; }
  .logo svg { height: 31px; width: auto; display: block; }   /* 26px until 2026-09-24: logo +20% */
  .nav-links { display: flex; gap: 22px; justify-self: center; }
  .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; }

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

  /* ---------- Hero: night globe ---------- */
  #gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
  .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%); }
  .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 ---------- */
  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);
  }
  .hero-media { position: absolute; inset: 0; overflow: hidden; }
  .hero-media video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.5) brightness(.72) contrast(1.06);
  }
  .hero-media .tint { position: absolute; inset: 0; background: var(--blue); opacity: .32; }
  @supports (mix-blend-mode: color) {
    .hero-media .tint { mix-blend-mode: color; opacity: .85; }
  }
  .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%);
  }
  .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%);
  }
  .hero-in { position: relative; z-index: 2; padding: 140px 0 120px; max-width: 660px; }
  .hero .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.82); margin-bottom: 28px; }
  .spark { width: 14px; height: 17px; flex: none; display: block;
    filter: drop-shadow(0 0 7px rgba(76,134,245,.55)); }
  .hero h1 { font-size: clamp(46px, 7.6vw, 92px); color: var(--white); }
  .hero-sub { margin-top: 30px; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 44ch; }
  .hero-ctas { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
  .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;
  }
  .scroll-cue { text-shadow: 0 2px 14px rgba(2,7,20,.85); }
  .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) { .scroll-cue svg { animation: none; } }
  @media (max-width: 640px) { .hero-in { padding: 120px 0 110px; } .hero { min-height: 86vh; } }

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

  /* ---------- Trust ---------- */
  section.trust { padding: 88px 0 80px; border-bottom: 0; }
  .trust-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub); }
  .logo-row { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; margin-top: 30px; }
  .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; }
  .logo-row img:hover { filter: none; opacity: 1; }
  .trust-note { margin-top: 26px; font-size: 12.5px; font-style: italic; color: var(--sub); max-width: 72ch; }

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

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

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

  /* ---------- How it works: night section ---------- */
  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;
  }
  .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%);
  }
  .record .eyebrow { color: rgba(255,255,255,.6); }
  .record h2 { color: var(--white); }
  .record .lede { color: rgba(255,255,255,.74); }
  .record-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; margin-top: 68px; align-items: start; position: relative; }
  @media (max-width: 920px) { .record-grid { grid-template-columns: 1fr; gap: 44px; } }
  .anno-item { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.15); }
  .anno-item:first-child { border-top: none; padding-top: 0; }
  .anno-item .n { font-weight: 700; font-size: 15px; color: rgba(255,255,255,.5); padding-top: 2px; }
  .anno-item h3 { font-size: 16.5px; letter-spacing: -0.01em; color: var(--white); }
  .anno-item p { margin-top: 5px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); }

  .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);
  }
  .rec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
  .rec-head .t { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); }
  .rec-head .status { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--blue); text-transform: uppercase; }
  .rec-body { padding: 10px 24px 18px; }
  .rec-row { display: grid; grid-template-columns: 118px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .rec-row:last-child { border-bottom: none; }
  .rec-row .rk { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); padding-top: 3px; }
  .rec-row .rv2 { font-size: 14px; line-height: 1.55; }
  .rec-row .rv2 .fine { color: var(--sub); font-size: 12.5px; }
  .rec-row .rv2 a { font-weight: 500; text-decoration: none; }

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

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

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

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

  /* ---------- Footer ---------- */
  footer.site { background: var(--ink); color: rgba(255,255,255,.78); padding: 54px 0 46px; }
  .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
  .foot-brand { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .foot-brand svg { height: 15px; width: auto; color: var(--white); }
  .foot-tag { font-size: 12.5px; color: rgba(255,255,255,.55); }
  .foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
  .foot-links a { color: rgba(255,255,255,.78); font-size: 13.5px; text-decoration: none; }
  .foot-links a:hover { color: var(--white); }
  .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) ================= */
  .tint { background: var(--light); }
  .sec-pad { padding: 130px 0; }
  .sec-pad-t { padding-top: 130px; }
  @media (max-width: 760px) { .sec-pad { padding: 88px 0; } .sec-pad-t { padding-top: 88px; } }
  .sec-head.wide { max-width: 820px; }
  .sec-head .sub2 { margin-top: 14px; font-size: 20px; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; line-height: 1.35; }
  .night .sec-head .sub2 { color: rgba(255,255,255,.9); }

  /* night wrapper reused by graph + signals */
  section.night { position: relative; overflow: hidden; color: var(--white);
    background: linear-gradient(180deg, #051636 0%, #072259 58%, #051B45 100%); }
  section.night .eyebrow { color: rgba(255,255,255,.62); }
  section.night h2, section.night h3 { color: var(--white); }
  section.night .lede { color: rgba(255,255,255,.74); }
  .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 ---------- */
  .graph-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; margin-top: 64px; align-items: center; }
  @media (max-width: 920px) { .graph-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .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) { .graph-grid .btn { white-space: normal; max-width: 100%; line-height: 1.3; padding: 14px 20px; } }
  .gviz { position: relative; }
  /* the network sits on its own pool of shade, so the globe never competes with it */
  .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%); }
  .gviz svg { width: 100%; height: auto; display: block; overflow: visible; }
  .gedge { stroke: rgba(255,255,255,.08); stroke-width: 1; fill: none; stroke-linecap: round;
    transition: stroke .45s ease, stroke-width .45s ease; }
  .gedge.on { stroke: #7FA9F8; stroke-width: 1.7; }
  .gpulse { fill: #BFD4FF; opacity: 0; }
  .ghalo { opacity: 0; transition: opacity .5s ease; }
  .gnode.on .ghalo { opacity: 1; }
  .gping { fill: none; stroke: #7FA9F8; stroke-width: 1.4; opacity: 0; }
  .gshape { fill: none; stroke: none;
    transition: stroke .3s ease, fill .3s ease; }
  .gnode.on .gshape { fill: none; stroke: none; }
  .gicon { stroke-width: 1.6; }
  .gicon { fill: none; stroke: rgba(255,255,255,.62); stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s ease; }
  .gnode.on .gicon { stroke: #EAF1FF; }
  .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; }
  .gnode.on .glabel { fill: rgba(255,255,255,.95); }
  /* relationship tags: each lens narrates its own links */
  .gtag { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
  .gtag.on { opacity: 1; }
  .gtag rect { fill: #041233; stroke: rgba(127,169,248,.42); stroke-width: 1; }
  .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 */
  .grisk { opacity: 0; pointer-events: none; transition: opacity .55s ease; }
  .gnode.risk .grisk { opacity: 1; }
  .griskring { fill: none; stroke: #FF5C5C; stroke-width: 1.1; opacity: .45; }
  .gsonar { fill: none; stroke: #FF5C5C; stroke-width: 1.1; opacity: 0;
    transform-box: fill-box; transform-origin: 50% 50%; }
  .gnode.risk .gsonar--1 { animation: gsonar 3.4s cubic-bezier(.25,.6,.3,1) infinite; }
  .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; }
  }
  .grisk-tag rect { fill: #2B0E17; stroke: rgba(255,92,92,.55); stroke-width: 1; }
  .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; }
  .grisk-dot { fill: #FF5C5C; }
  @media (prefers-reduced-motion: reduce) {
    .gnode.risk .gsonar--1, .gnode.risk .gsonar--2 { animation: none; }
  }
  .probing .gedge { stroke: rgba(255,255,255,.045); }
  .probing .gedge.probe { stroke: #9DBEFF; stroke-width: 1.9; }
  .probing .gnode .gshape { stroke: none; }
  .probing .gnode .gicon { stroke: rgba(255,255,255,.28); }
  .probing .gnode .glabel { fill: rgba(255,255,255,.22); }
  .probing .gnode .ghalo { opacity: 0; }
  .probing .gnode.probe .gshape { stroke: none; fill: none; }
  .probing .gnode.probe .gicon { stroke: #EAF1FF; }
  .probing .gnode.probe .glabel { fill: rgba(255,255,255,.95); }
  .probing .gnode.probe .ghalo { opacity: 1; }
  .probing .gtag { opacity: 0; transition-delay: 0ms !important; }
  .probing .gtag.probe { opacity: 1; }
  .probing .grisk { opacity: 0; }
  .probing .gnode.risk.probe .grisk { opacity: 1; }
  .probing .gpulse { opacity: 0 !important; }
  .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); }
  .gkey i { display: inline-block; width: 7px; height: 7px; border: 1px solid rgba(255,255,255,.5); margin-right: 7px; }
  .gkey b:nth-child(2) i { border-radius: 50%; }
  .gkey b:nth-child(3) i { transform: rotate(45deg); }
  .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; }
  .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. */
  .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; }
  .lens[aria-selected="true"]::before { background: #4C86F5; }
  .lens[aria-selected="true"] { padding-left: 30px; }
  .lens b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: rgba(255,255,255,.7); transition: color .3s ease; }
  .lens[aria-selected="true"] b, .lens:hover b { color: var(--white); }
  .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; }
  .lens[aria-selected="true"] p { max-height: 90px; opacity: 1; margin-top: 7px; }

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

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

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

  /* ---------- Capability cards ---------- */
  .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
  .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 */
  .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)); }
  .cap:hover { background: var(--light); }
  /* the abstract UI vignette: a small live panel across the top of the card */
  .cap .viz { display: block; border-bottom: 1px solid var(--line); background: rgba(3,11,31,.45);
    transition: border-color .3s ease; }
  .cap .viz svg { display: block; width: 100%; height: auto; }
  .cap h3 { margin: 22px 26px 0; font-size: 20px; letter-spacing: -0.015em; }
  .cap p { margin: 10px 26px 0; font-size: 14.5px; line-height: 1.6; color: var(--sub); }
  .cap .more { margin: auto 26px 0; padding: 20px 0 24px; font-size: 13.5px; font-weight: 500; text-decoration: none; }

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

  /* ---------- Integrate ---------- */
  .int-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; margin-top: 8px; }
  @media (max-width: 920px) { .int-grid { grid-template-columns: 1fr; gap: 36px; } }
  .chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .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; }
  .chip:hover { border-color: var(--blue); color: var(--blue); --edge: var(--blue); }
  .chip.api { background: var(--dark); border-color: var(--dark); color: var(--white); --edge: transparent; }

  /* ---------- Awards ---------- */
  .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); }
  .awards span { display: flex; align-items: center; justify-content: center; }
  .awards span img { max-width: 132px; max-height: 52px; width: auto; height: auto;
    object-fit: contain; display: block; }
  .awards-note { margin-top: 20px; font-size: 12.5px; font-style: italic; color: var(--sub); }

  /* ---------- FAQ ---------- */
  .faq { margin-top: 52px; border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .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; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--blue); }
  .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; }
  .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
  .faq .ans { padding: 0 120px 26px 0; font-size: 15px; line-height: 1.65; color: var(--sub); }
  .faq .ans p + p { margin-top: 10px; }
  @media (max-width: 760px) { .faq .ans { padding-right: 0; } }


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

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

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

  /* ---------- Language selector ---------- */
  .lang { position: relative; margin-left: 8px; }
  .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; }
  .lang-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .lang-btn .cv { width: 11px; height: 11px; stroke-width: 2; transition: transform .2s ease; }
  .lang-btn[aria-expanded="true"] .cv { transform: rotate(180deg); }
  .lang-btn:hover { color: var(--white); }
  nav.top.scrolled .lang-btn { color: var(--ink); }
  nav.top.scrolled .lang-btn:hover { color: var(--blue); }
  .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; }
  .lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
  .lang-menu li { padding: 10px 12px; font-size: 14px; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 10px; }
  .lang-menu li:hover, .lang-menu li:focus-visible { background: var(--light); color: var(--blue); outline: none; }
  .lang-menu li[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--blue); font-weight: 700; }
  @media (max-width: 880px) { .lang { margin-left: 0; } .lang-btn span { display: none; } }

  /* ---------- Segmented control (shared) ---------- */
  .seg { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; margin-top: 38px; padding: 4px;
    border: 1px solid var(--line); background: var(--white); }
  .tint .seg { background: var(--white); }
  section.night .seg { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
  .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; }
  .seg-b em { font-style: normal; font-weight: 500; opacity: .6; margin-left: 5px; }
  .seg-b:hover { color: var(--ink); }
  .seg-b[aria-selected="true"] { color: var(--white); }
  section.night .seg-b { color: rgba(255,255,255,.6); }
  section.night .seg-b:hover { color: var(--white); }
  .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); }
  .seg.small .seg-b { padding: 10px 16px; font-size: 12px; }
  .seg.ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); margin-top: 0; }
  .seg.ghost .seg-b { color: rgba(255,255,255,.72); padding: 10px 16px; font-size: 12px; }
  .seg.ghost .seg-b[aria-selected="true"] { color: var(--blue); }
  .seg.ghost .seg-pill { background: var(--white); }
  @media (max-width: 640px) { .seg { display: flex; width: 100%; } .seg-b { flex: 1; padding: 11px 8px; font-size: 11px; } }

  /* ---------- Trust marquee ---------- */
  .marquee { position: relative; margin-top: 30px; }
  .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); }
  .mq-track { display: flex; width: max-content; animation: mq 34s linear infinite; }
  .mq-set { display: flex; align-items: center; gap: 70px; padding-right: 70px; margin-top: 0; }
  .marquee:hover .mq-track, .marquee:focus-within .mq-track, .marquee.paused .mq-track { animation-play-state: paused; }
  @keyframes mq { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

  /* ---------- Patchwork stack diagram ---------- */
  .stack { margin-top: 38px; }
  .stack-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .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; }
  .stack-link { display: grid; grid-template-columns: repeat(5, 1fr); height: 26px; transition: opacity .3s ease; }
  .stack-link i { justify-self: center; width: 1px; background: #C9D2E4; }
  .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; }
  .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; }
  .stack-gaps span { border-top: 2px solid #C0392B; padding-top: 10px; font-size: 13px; color: var(--sub); }
  .stack[data-state="apart"] .node:nth-child(1) { transform: translateY(-6px) rotate(-.6deg); }
  .stack[data-state="apart"] .node:nth-child(2) { transform: translateY(8px) rotate(.5deg); }
  .stack[data-state="apart"] .node:nth-child(3) { transform: translateY(-4px) rotate(.4deg); }
  .stack[data-state="apart"] .node:nth-child(4) { transform: translateY(10px) rotate(-.5deg); }
  .stack[data-state="apart"] .node:nth-child(5) { transform: translateY(-8px) rotate(.7deg); }
  .stack[data-state="apart"] .stack-link, .stack[data-state="apart"] .stack-base { opacity: .12; }
  .stack[data-state="apart"] .stack-gaps { opacity: 1; height: auto; overflow: visible; }
  #patchPoints { transition: opacity .3s ease; }
  #patchPoints.dim { opacity: .3; }
  @media (max-width: 760px) { .stack-row { grid-template-columns: repeat(2, 1fr); } .stack-link { display: none; }
    .stack-gaps { grid-template-columns: 1fr; } }

  /* ---------- Lifecycle stepper ---------- */
  .rail-track { position: relative; }
  .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); }
  .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; }
  .rail-col:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
  #railCols.engaged .rail-col { opacity: .42; }
  #railCols.engaged .rail-col.active { opacity: 1; border-left-color: var(--blue); }
  .rail-col.active h3 { color: var(--blue); }

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

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

  /* ---------- Signals ↔ record card ---------- */
  .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; }
  .anno-item:focus-visible { outline: 2px solid #4C86F5; outline-offset: 4px; }
  .record-grid.engaged .anno-item { opacity: .45; }
  .record-grid.engaged .anno-item.active { opacity: 1; border-left-color: #4C86F5; }
  .rec-row { transition: background-color .3s ease, opacity .3s ease; }
  .rec-card.engaged .rec-row { opacity: .38; }
  .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. */
  .irows { margin-top: 40px; border-top: 1px solid rgba(255,255,255,.16); }
  .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); }
  .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; }
  .irow > * { position: relative; }
  .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%); }
  .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); }
  .irow-ph::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(4,16,43,.44), rgba(4,16,43,.62)); }
  .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); }
  .irow p { font-size: 15px; line-height: 1.62; max-width: 46ch; color: rgba(255,255,255,.72);
    transition: color .3s ease; }
  .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; }
  .irow-m .ar { display: inline-block; font-size: 19px; line-height: 1; transition: transform .22s ease; }
  .irow:hover::before, .irow:focus-visible::before { opacity: 1; }
  .irow:hover .irow-ph img, .irow:focus-visible .irow-ph img { transform: scale(1.05); }
  .irow:hover p, .irow:focus-visible p { color: rgba(255,255,255,.86); }
  .irow:hover .irow-m, .irow:focus-visible .irow-m { color: var(--white); }
  .irow:hover .ar, .irow:focus-visible .ar { transform: translateX(6px); }
  .irow:focus-visible { outline-offset: -3px; }
  @media (max-width: 860px) {
    .irow { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 2px 26px; }
    .irow-ph { aspect-ratio: 21 / 9; }
    .irow-ph h3 { font-size: clamp(21px, 6vw, 26px); }
    .irow p { max-width: none; }
    .irow-m { justify-self: start; }
  }
  @media (prefers-reduced-motion: reduce) {
    .irow::before, .irow-ph img, .irow p, .irow-m, .irow-m .ar { transition: none; }
    .irow:hover .irow-ph img, .irow:focus-visible .irow-ph img { transform: none; }
  }


  /* ---------- Integrations / security filters ---------- */
  .chips { margin-top: 26px; }
  .chip { transition: border-color .2s ease, color .2s ease, opacity .3s ease; }
  .chip.hide { display: none; }
  .pt.hide { display: none; }
  .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; }
  .s-certified { background: rgba(13,79,211,.10); color: var(--blue); }
  .s-process   { background: rgba(28,26,23,.08); color: var(--sub); }
  .s-supported { background: rgba(7,34,89,.07); color: var(--dark); }

  /* ---------- Awards ---------- */
  .awards span { transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s ease; cursor: default; }
  .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); }
  .txt-toggle .ar { transition: transform .25s ease; }
  .txt-toggle[aria-expanded="true"] .ar { transform: rotate(180deg); }


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

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

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

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

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

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

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

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

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

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

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

  @media (max-width: 640px) {
    .hero h1 { font-size: clamp(28px, 7.4vw, 38px); }
    .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 --- */
  .sec-head h2 { letter-spacing: -0.032em; line-height: 1.2; }
  .sec-head .sub2 { font-weight: 500; letter-spacing: -0.01em; }
  .sec-head .lede { max-width: 68ch; color: rgba(255,255,255,.62); font-size: 16.5px; }
  .eyebrow { font-size: 11px; letter-spacing: .22em; }
  .pt h3, .cap h3, .rail-col h3 { letter-spacing: -0.018em; }
  .stg { font-variant-numeric: tabular-nums; }

  /* --- scroll progress in the nav --- */
  .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
  .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 --- */
  h1.mask { overflow: visible; }
  h1.mask span { display: block; overflow: hidden; }
  h1.mask span i { display: block; font-style: normal; transform: translateY(105%);
    animation: lineUp .95s cubic-bezier(.16,.84,.28,1) forwards; }
  h1.mask span:nth-child(1) i { animation-delay: .12s; }
  h1.mask span:nth-child(2) i { animation-delay: .24s; }
  @keyframes lineUp { to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { h1.mask span i { animation: none; transform: none; } }

  /* --- trust: certification plaques --- */
  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); }
  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); }
  ul.certs li:hover { color: #fff; border-color: rgba(126,169,248,.7); transform: translateY(-2px); }
  .logo-row img { transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
  .logo-row img:hover { transform: scale(1.06); }

  /* --- cards: glass with a pointer-tracked highlight --- */
  .spot { --mx: 50%; --my: 50%; }
  .cap, .spot .pt, .awards.spot span {
    position: relative; isolation: isolate;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease, background-color .3s ease;
  }
  .cap::before, .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%);
  }
  .spot:hover .cap::before, .spot:hover .pt::before { opacity: 1; }
  .cap:hover { transform: translateY(-4px); }

  /* point cards get a rule that extends on approach */
  .pt { border-top: 0; padding-top: 22px; }
  .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; }
  .pt:hover::after { width: 100%; }
  .spot .pt { padding-left: 0; }
  .pt h3 { transition: color .25s ease; }
  .pt:hover h3 { color: #BFD4FF; }

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

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

  .cap .more { position: relative; }


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

  /* --- awards: logo plaques (white-mono, same treatment as the client marquee) --- */
  .awards { display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; border: 0; padding: 0; }
  .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)); }
  .awards span img { filter: brightness(0) invert(1); opacity: .62; transition: opacity .25s ease; }
  .awards span:hover { border-color: rgba(126,169,248,.6); transform: translateY(-3px); }
  .awards span:hover img { opacity: 1; }

  /* --- faq: smooth open, hairline highlight --- */
  .faq details { position: relative; transition: background-color .3s ease; }
  .faq details[open] { background: rgba(255,255,255,.035); }
  .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); }
  .faq details[open]::before { width: 100%; }
  .faq summary { padding-left: 20px; padding-right: 56px; }
  .faq .ans { padding-left: 20px; }
  .faq summary::after { right: 22px; }

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

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

  @media (prefers-reduced-motion: reduce) {
    .cap:hover, .awards span:hover, .chip:hover, 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 */
  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) { section.trust { padding-top: calc(var(--shot-gap) + 0.3vw); } }
  .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;
  }
  .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); }
  .logo-row img { height: 56px; max-width: 232px; opacity: .62; }
  .logo-row img:hover { opacity: 1; }
  .mq-set { gap: clamp(52px, 6vw, 96px); padding-right: clamp(52px, 6vw, 96px); }
  .marquee { margin-top: clamp(40px, 4.5vw, 64px); }
  /* breathing room under the logo strip (also stops the hover scale clipping) */
  .mq-mask { padding-bottom: 10px; }
  @media (max-width: 760px) {
    .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) {
    .trust-label { white-space: normal; max-width: 20ch; font-size: 17.6px; }
  }

  /* --- Book a Demo: a calendar being clicked, on a seamless loop --- */
  .calico { width: 18px; height: 18px; flex: none; overflow: visible; }
  .btn-primary .calico { --calico-halo: var(--blue); }
  .btn-primary:hover .calico { --calico-halo: #fff; }
  .btn-on-blue .calico { --calico-halo: #fff; }
  .btn-on-blue:hover .calico { --calico-halo: var(--dark); }
  .nav-cta .calico { width: 15px; height: 15px; }
  .calico__day, .calico__cur { transform-box: fill-box; transform-origin: 50% 50%; }
  .calico__day { opacity: 0; animation: calDay 3.8s cubic-bezier(.4,0,.2,1) infinite; }
  .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) {
    .calico__cur { animation: none; }
    .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
     ========================================================= */
  .more, .hero-link {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    transition: opacity .25s ease;
  }
  .more, .hero-link, .tl, .txt-toggle, .faq .ans a, .cta-contact a { opacity: 1; }
  .more .ar, .hero-link .ar, .txt-toggle .ar {
    display: inline-block;
    transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  }
  .more:hover, .more:focus-visible,
  .hero-link:hover, .hero-link:focus-visible,
  .tl:hover, .tl:focus-visible { opacity: .8; }
  .more:hover .ar, .more:focus-visible .ar,
  .hero-link:hover .ar, .hero-link:focus-visible .ar { transform: translateX(5px); }
  /* the whole card lifts its link too, so the affordance reads from anywhere on the card */
  .cap:hover .more { opacity: .8; }
  .cap:hover .more .ar { transform: translateX(5px); }
  .ind:hover .more, .rail-col:hover .more { opacity: .8; }
  .ind:hover .more .ar, .rail-col:hover .more .ar { transform: translateX(5px); }

  .txt-toggle { transition: opacity .25s ease; }
  .txt-toggle:hover, .txt-toggle:focus-visible { opacity: .8; }
  .txt-toggle:hover .ar { transform: translateY(3px); }
  .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 */
  .faq .ans a, .cta-contact a { text-decoration: none; box-shadow: 0 1px 0 rgba(157,190,255,.45); transition: opacity .25s ease; }
  .faq .ans a:hover, .cta-contact a:hover { opacity: .8; }

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

  /* =========================================================
     Certifications — quiet fine print. The customer logos lead here.
     ========================================================= */
  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;
  }
  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;
  }
  ul.certs li::after { display: none; }
  ul.certs li:hover { color: rgba(255,255,255,.42); transform: none; }   /* no hover on these */
  .cert-label { max-width: none; }

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

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

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

  /* onboarding: the identity scans, the record types itself in, verification lands */
  .viz--onb .scan { stroke: #7FA9F8; stroke-width: 1.5; stroke-linecap: round;
    animation: vzScanY 5.6s cubic-bezier(.4,0,.2,1) infinite; }
  .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; }
  .viz--onb .ty2 { animation-delay: .5s; }
  .viz--onb .ty3 { animation-delay: 1s; }
  .viz--onb .vpill rect { fill: rgba(76,134,245,.14); stroke: #4C86F5; stroke-width: 1.2; }
  .viz--onb .vpill text { fill: #9DBEFF; }
  .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 */
  .viz--aml .rec { fill: #E4715F; animation: vzBlink 1.6s ease-in-out infinite; }
  .viz--aml .th { stroke: rgba(228,113,95,.5); stroke-width: 1; stroke-dasharray: 4 4; }
  .viz--aml .thl { fill: rgba(240,147,127,.55); }
  .viz--aml .trend { animation: vzDraw 4.6s cubic-bezier(.4,0,.2,1) infinite; }
  .viz--aml .adot { fill: #E4715F; animation: vzAlertIn 4.6s cubic-bezier(.4,0,.2,1) infinite; }
  .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; }
  .viz--aml .achip rect { fill: rgba(228,113,95,.12); stroke: rgba(228,113,95,.75); stroke-width: 1; }
  .viz--aml .achip text { fill: #F0937F; }
  .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 */
  .viz--fraud .beam line { stroke: #7FA9F8; stroke-width: 1.5; }
  .viz--fraud .beam { animation: vzSweep 4.4s linear infinite; }
  .viz--fraud .sd { fill: rgba(255,255,255,.15); animation: vzGlow 4.4s linear infinite; animation-delay: var(--d, 0s); }
  .viz--fraud .an { fill: #E4715F; }
  .viz--fraud .ab { fill: none; stroke: #E4715F; stroke-width: 1.4; stroke-linecap: round; }
  .viz--fraud .anom { animation: vzAnom 4.4s cubic-bezier(.4,0,.2,1) infinite; }
  .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 */
  .viz--case .gc { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.14); stroke-width: 1; }
  .viz--case .gk { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .viz--case .mc { fill: rgba(76,134,245,.16); stroke: #4C86F5; stroke-width: 1.3; }
  .viz--case .ml { stroke: rgba(255,255,255,.55); stroke-width: 1.2; stroke-linecap: round; }
  .viz--case .mcard { animation: vzCase 6.4s cubic-bezier(.4,0,.2,1) infinite; }
  .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 */
  .viz--kyt .ndot { fill: rgba(157,190,255,.5); }
  .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; }
  .viz--kyt .gp { animation: vzGate 4.6s ease-in-out infinite; }
  .viz--kyt .gl { stroke: #7FA9F8; stroke-width: 1.5; stroke-linecap: round;
    animation: vzScanHold 4.6s ease-in-out infinite; }
  .viz--kyt .tdot { fill: #7FA9F8; animation: vzDot 4.6s linear infinite; }
  .viz--kyt .rb { fill: rgba(255,255,255,.14); }
  .viz--kyt .rb1 { animation: vzBarA 4.6s ease-in-out infinite; }
  .viz--kyt .rb2 { animation: vzBarB 4.6s ease-in-out infinite; }
  .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 */
  .viz--graph .hub { fill: rgba(76,134,245,.22); stroke: #4C86F5; stroke-width: 1.4; }
  .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); }
  .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); }
  .viz--graph .hed { fill: none; stroke: #E4715F; stroke-width: 1.5; stroke-linecap: round;
    animation: vzReveal 6s cubic-bezier(.4,0,.2,1) infinite; }
  .viz--graph .hn { fill: rgba(228,113,95,.12); stroke: #E4715F; stroke-width: 1.4;
    animation: vzHot 6s ease-in-out infinite; }
  .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; }
  .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) {
    .cap .viz svg * { animation: none !important; stroke-dashoffset: 0 !important; }
    /* motion-only elements (beams, travel dots, pulse rings) have no static state */
    .cap .viz .vzm { display: none !important; }
    /* the case rests in CLOSED when it can't travel */
    .viz--case .mcard { transform: translate(194px, 0); }
  }

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

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

  /* onboard: the record is opened, then verified */
  .ric--onboard .ric-tick { animation: icDraw 4s cubic-bezier(.4,0,.2,1) infinite; }
  .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 */
  .ric--screen .ric-w1 { animation: icDraw 3.8s cubic-bezier(.4,0,.2,1) infinite; }
  .ric--screen .ric-w2 { animation: icDraw 3.8s cubic-bezier(.4,0,.2,1) .2s infinite; }
  .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 */
  .ric--monitor .ric-wave { animation: icDraw 3.4s cubic-bezier(.4,0,.2,1) infinite; }
  .ric--monitor .ric-base { opacity: .3; }

  /* detect: the outlier resolves in the centre of the sight */
  .ric--detect .ric-ring { transform-box: fill-box; transform-origin: 50% 50%;
    animation: icBeat 3.4s ease-in-out infinite; }
  .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 */
  .ric--investigate .ric-lens { transform-box: fill-box; transform-origin: 50% 50%;
    animation: icBeat 4s ease-in-out infinite; }
  .ric--investigate .ric-stem { animation: icDraw 4s cubic-bezier(.4,0,.2,1) infinite; }

  /* review: the record keeps its time */
  .ric--review .ric-hand-m { transform-box: view-box; transform-origin: 12px 12px;
    animation: ricSweep 7s linear infinite; }
  .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) {
    .rail-col .ri svg * { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
    .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.
     ========================================================= */
  .cmp { --pos: 50%; --foot: 80px; margin-top: clamp(34px, 4vw, 54px); }
  .cmp__stage { position: relative; height: clamp(226px, 19vw, 254px);
    overflow: hidden; touch-action: pan-y; }
  .cmp__pane { position: absolute; inset: 0; display: flex; flex-direction: column;
    padding-top: 18px; }        /* headroom: the raised boxes lift up to 11px */
  .cmp__pane--a { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .cmp__pane--b { clip-path: inset(0 0 0 var(--pos)); }

  .cmp__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  /* icon and label centred as one unit inside the box */
  .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); }
  .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 */
  .cmp__row--apart .node:nth-child(1) { transform: translateY(-9px) rotate(-1.4deg); }
  .cmp__row--apart .node:nth-child(2) { transform: translateY(11px) rotate(1.1deg); }
  .cmp__row--apart .node:nth-child(3) { transform: translateY(-5px) rotate(.9deg); }
  .cmp__row--apart .node:nth-child(4) { transform: translateY(13px) rotate(-1.2deg); }
  .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 */
  .cmp__gaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto;
    min-height: var(--foot); align-content: start; }
  .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); }

  .cmp__risers { display: grid; grid-template-columns: repeat(5, 1fr); flex: 1; margin: 12px 0 0; }
  .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. */
  .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 */
  .cmp__base h3, .cmp__base p { opacity: var(--b-text, 1); transition: opacity .15s linear; }
  .cmp__base h3 { font-size: clamp(15px, 1.6vw, 19px); }
  .cmp__base p { margin-top: 5px; font-size: 12.5px; color: rgba(255,255,255,.82); }

  .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)); }
  .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; }
  .cmp__grip svg { width: 22px; height: 12px; }
  .cmp__stage:hover .cmp__grip, .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 */
  .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; }
  .cmp__range:focus-visible { outline: 2px solid #9DBEFF; outline-offset: 3px; }
  .cmp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 52px; height: 280px; cursor: ew-resize; }
  .cmp__range::-moz-range-thumb { width: 52px; height: 320px; border: 0; background: transparent; cursor: ew-resize; }
  .cmp__range::-moz-range-track { background: transparent; }

  .cmp__labels { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
  .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) {
    .cmp__stage { height: auto; overflow: visible; }
    .cmp__pane, .cmp__pane--a, .cmp__pane--b {
      position: static; clip-path: none; padding-top: 0; }
    .cmp__pane--b { margin-top: 32px; }
    .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); }
    .cmp__line, .cmp__range, .cmp__labels, .cmp__risers { display: none; }
    .cmp__row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cmp__row .node { font-size: 12px; padding: 13px 10px; gap: 8px; }
    .node-ico { width: 16px; height: 16px; }
    .cmp__gaps { grid-template-columns: 1fr; gap: 8px; min-height: 0; margin-top: 18px; }
    .cmp__base { min-height: 0; margin-top: 18px; padding: 16px 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cmp__row .node, .cmp__grip { transition: none; }
  }

  /* these two grids are read-only reference — no hover treatment */
  #patchPoints .pt::after { content: none; }        /* no rule above these four headings */
  #patchPoints .pt { padding-top: 0; }
  #patchPoints .pt, #secGrid .pt { position: relative; transition: none; }
  #patchPoints .pt::before, #secGrid .pt::before { content: none; }
  #patchPoints .pt::after, #secGrid .pt::after { transition: none; }
  #patchPoints .pt h3, #secGrid .pt h3 { transition: none; }
  #patchPoints .pt:hover::after, #secGrid .pt:hover::after { width: 46px; }
  #patchPoints .pt:hover h3, #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. */
  #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;
  }
  #patchPoints .pt {
    display: grid; grid-template-columns: 26px 1fr; column-gap: 15px;
    padding: 0; align-content: start;
  }
  #patchPoints .pt h3 { grid-column: 2; align-self: center; }
  #patchPoints .pt p  { grid-column: 2; margin-top: 9px; max-width: 50ch; }
  /* centred on the title's line rather than parked above it */
  .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) {
    #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.
     ========================================================= */
  .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 */
  .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 */
  .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 */
  .relay__step h3 { font-size: 17px; letter-spacing: -.015em; max-width: 13ch; }
  .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 */
  .relay__funnel { display: block; margin-top: auto; height: var(--fh);
    width: calc(100% + var(--gap) * 2);
    margin-right: calc(-2 * var(--gap)); }
  .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 */
  .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 */
  .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 */
  .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 */
  .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)); }

  .hand-body { align-self: center; }
  .hand-tag { display: inline-flex; align-items: center; gap: 9px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9DBEFF; }
  .hand-tag::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg);
    background: #9DBEFF; box-shadow: 0 0 0 3px rgba(126,169,248,.16); }
  .relay__hand h3 { margin-top: 15px; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.028em; color: #fff; }
  .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 */
  .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); }
  .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); }
  .hand-rec span::before { content: ""; width: 4px; height: 4px; transform: rotate(45deg); background: #4C86F5; }

  @media (max-width: 900px) {
    .relay { grid-template-columns: minmax(0, 1fr); }
    .relay__ai { padding-right: 0; padding-top: 0; padding-bottom: 26px; }
    .relay__steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .relay__step h3 { max-width: none; }
    .relay__funnel { height: 56px; transform: rotate(90deg) scaleX(.55); transform-origin: center;
      margin: 6px auto; width: 140px; }
    .relay__mark { left: 50%; right: auto; bottom: 0;
      transform: translate(-50%, 50%) rotate(45deg); }
    .relay__hand { margin-left: 0; gap: 20px; }
    .relay__hand p { max-width: none; }
    .hand-rec { gap: 8px 13px; padding-right: 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .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.
     ========================================================= */
  .cycle { margin-top: clamp(34px, 4vw, 56px); }
  .cyc-ring { position: relative; width: min(620px, 100%); margin: 0 auto; aspect-ratio: 1; }
  .cyc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .cyc-track { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1.2; }
  .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); }
  .cyc-orbit { transform-origin: 280px 280px; animation: cycSpin 16s linear infinite; }
  .cyc-orbit circle { fill: #BFD4FF; }
  @keyframes cycSpin { to { transform: rotate(360deg); } }
  .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); }
  .cyc-dot.is-on { fill: #9DBEFF; stroke: #9DBEFF; r: 9; }

  /* the six stages sit radially around the ring */
  .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; }
  .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; }
  .cyc-lbl .cyc-h { display: block; margin-top: 5px; font-size: 17px; font-weight: 700;
    letter-spacing: -.015em; color: inherit; }
  .cyc-lbl[aria-selected="true"] { color: #fff; }
  .cyc-lbl[aria-selected="true"] .cyc-n { color: #7FA9F8; }
  .cyc-lbl:hover { color: #fff; }
  .cyc-lbl:focus-visible { outline: 2px solid #9DBEFF; outline-offset: 6px; border-radius: 3px; }

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

  /* the reading sits inside the cycle */
  .cyc-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 58%; text-align: center; }
  .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; }
  .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); }
  .cyc-core p.is-on { opacity: 1; transform: none; position: relative; }

  .cyc-list { display: none; }

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

  /* ---------- Hero supporting line ---------- */
  .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); }
  .hero-strap span { display: inline-flex; align-items: center; gap: 18px; }
  .hero-strap span::after { content: ""; width: 5px; height: 5px; background: #4C86F5; transform: rotate(45deg); }
  .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. */
  .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.
     ========================================================= */
  .journey { margin-top: 64px; position: relative; }
  .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 */
  .j-panels::before { content: ""; position: absolute; left: -28px; right: -28px; top: 9px;
    height: 1px; background: rgba(255,255,255,.16); }
  .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; }

  .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); }
  .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 */
  .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; }
  .j-panel.done .j-node { background: #4C86F5; border-color: #4C86F5; }
  .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); }

  .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; }
  .j-panel:hover .j-card, .j-panel:focus-visible .j-card { border-color: rgba(126,169,248,.5); }
  .j-panel:focus-visible .j-card { box-shadow: inset 0 0 0 1px rgba(191,212,255,.9); }
  .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%); }
  .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 */
  .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 */
  .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; }
  .j-num { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: #7FA9F8;
    font-variant-numeric: tabular-nums; }
  .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); }
  .journey .ri { display: block; }
  .journey .ri svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .j-spine .ri { width: 21px; height: 21px; color: rgba(126,169,248,.75); }
  .j-panel.act .j-spine { opacity: 0; transition-delay: 0s; pointer-events: none; }
  .j-panel:not(.act):hover .j-num, .j-panel:focus-visible .j-num { color: #BFD4FF; }
  .j-panel:not(.act):hover .j-tag { color: #fff; }
  .j-num, .j-tag { transition: color .25s ease; }

  /* open state: the stage itself */
  .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; }
  .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; }
  .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; }
  .j-body .ri { width: 34px; height: 34px; color: #BFD4FF; margin-bottom: 24px; }
  .j-body h3 { font-size: clamp(22px, 2.2vw, 28px); color: #fff; letter-spacing: -0.022em; margin: 0 0 12px; }
  .j-body p { font-size: 15px; line-height: 1.68; color: rgba(255,255,255,.72); max-width: 52ch; }
  .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; }
  .j-body .more .ar { display: inline-block; transition: transform .18s ease; }
  .j-body .more:hover .ar { transform: translateX(5px); }

  /* the guided tour's clock: a hairline of time along the open stage */
  .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; }
  .journey.manual .j-time, .j-panel:not(.act) .j-time { opacity: 0; }

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

  @media (max-width: 1180px) {
    .j-panel { flex-basis: 92px; }
    .j-body { min-width: 404px; padding: 28px 28px 24px; }
    .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) {
    .j-panels { display: block; padding: 4px 0 0; }
    .j-panels::before { left: 15px; right: auto; top: 4px; bottom: 10px; width: 1px; height: auto; }
    .j-fill { display: none; }
    .j-panel { display: grid; grid-template-columns: 34px 1fr; padding: 0 0 34px; cursor: default; }
    .j-panel:last-child { padding-bottom: 0; }
    .j-node { position: static; margin: 7px 0 0 11px; grid-column: 1;
      background: #4C86F5; border-color: #4C86F5; box-shadow: none; }
    .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; }
    .j-card::before, .j-card::after { display: none; }
    .j-spine { display: none; }
    .j-body { position: static; min-width: 0; padding: 0 0 0 8px;
      opacity: 1 !important; visibility: visible !important; transform: none !important; }
    .j-count { position: static; display: block; margin-bottom: 10px;
      font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: #7FA9F8; }
    .j-body .ri { width: 26px; height: 26px; margin-bottom: 14px; }
    .j-body h3 { font-size: 20px; }
    .j-body p { font-size: 14px; }
    .j-body .more { margin-top: 0; padding-top: 14px; }
    .j-time { display: none; }
    .j-panel:not(.act) .ri svg * { animation: none !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .j-panel, .j-card, .j-body, .j-spine, .j-node, .j-fill { transition: none !important; }
    .j-time { display: none; }
    .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. */
  .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. */
  #awards .eyebrow { justify-content: center; align-items: baseline; gap: 6px;
    letter-spacing: .12em; }

  /* the row: no plaques, no rules, no wrapping on desktop */
  .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;
  }

  .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;
  }
  .awards span::after { display: none; }          /* no plaque, so no corner stroke */
  .awards span:hover { transform: none; }

  .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);
  }
  .awards span img.abf { height: calc(clamp(36px, 3.9vw, 50px) * .7); }   /* the wide ABF mark sits at 70% */
  .awards span img.badge {
    filter: brightness(var(--badge-lift)) saturate(1.06);
    opacity: .94;
  }
  .awards span img.light {
    filter: brightness(1.18) saturate(1.06);
    opacity: .9;
  }
  .awards span:hover img { opacity: 1; transform: scale(1.06); }

  .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) {
    .awards { flex-wrap: wrap; justify-content: center;
      gap: clamp(24px, 4vw, 34px) clamp(20px, 3.4vw, 34px); }
    .awards span { flex: 0 0 calc(25% - clamp(20px, 3.4vw, 34px) * 3 / 4); }
    .awards span img { height: clamp(34px, 5vw, 44px); }
    .awards span img.abf { height: calc(clamp(34px, 5vw, 44px) * .7); }
  }
  @media (max-width: 620px) {
    .awards { gap: 22px 16px; }
    .awards span { flex: 0 0 calc(33.333% - 11px); }
    .awards span img { height: 40px; }
    .awards span img.abf { height: 28px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .awards span img { transition: none; }
    .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.
     ========================================================= */
  footer.site { 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. */
  footer.site::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))) {
    footer.site::before {
      background: linear-gradient(180deg,
        rgba(3, 11, 31, .72) 0%, rgba(3, 11, 31, .80) 45%, rgba(3, 11, 31, .88) 100%);
    }
  }

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

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

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

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

  /* Offices: each flag precedes a running address; wrapped lines align with the text. */
  .foot-offices { display: grid; gap: 12px; width: 100%; margin-top: 22px;
    color: rgba(255,255,255,.62); }
  .foot-offices li { display: grid; grid-template-columns: 21px minmax(0, 1fr);
    column-gap: 10px; align-items: start; }
  .foot-offices .flag { display: block; width: 21px; height: 14px; margin-top: 3px; }
  .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 */
  .foot-social { display: flex; gap: 4px; margin: 26px 0 0 -10px; }
  .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);
  }
  .foot-social a svg { width: 20px; height: 20px; }
  .foot-social a:hover { color: #fff; transform: translateY(-2px); }

  .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);
  }
  .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)); }
  .foot-ai-label { font-size: 13px; color: rgba(255,255,255,.78); white-space: nowrap; }
  .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); }
  .foot-ai a svg { width: 14px; height: 14px; }
  .foot-ai a:hover { color: #fff; background: rgba(13,79,211,.6); transform: translateY(-2px); }

  /* --- link columns --- */
  .foot-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 26px; }
  .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);
  }
  .foot-col li + li { margin-top: 11px; }
  .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; }
  .foot-col a:hover { color: #fff; transform: translateX(3px); }

  /* --- bottom bar --- */
  .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);
  }
  .foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
  .foot-legal a, .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;
  }
  .foot-legal a:hover, .foot-legal button:hover { color: #fff; text-decoration-color: rgba(157,190,255,.7); }

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

  @media (prefers-reduced-motion: reduce) {
    .foot-col a, .foot-social a, .foot-ai a { transition: color .22s ease; }
    .foot-col a:hover, .foot-social a:hover, .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. */
  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. */
  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. */
  #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) {
    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%);
    }
    #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. */
  .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. */
  html { scroll-padding-top: 84px; }
  @media (max-width: 1100px) { html { scroll-padding-top: 68px; } }   /* 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) {
    .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)); }
    .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)); }
    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)); }
    .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)); }
    .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)); }
    .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)); }
    .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)); }
    .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. --- */
  p, .lede, .sub2, .ans, .aim { text-wrap: pretty; }

  /* --- light restorations: rules the dark pass had rewritten --- */
  .sec-head .lede { color: var(--sub); }
  section.night .sec-head .lede { color: rgba(255,255,255,.74); }
  .pt:hover h3 { color: var(--blue); }
  section.night .pt:hover h3 { color: #BFD4FF; }
  .faq details[open] { background: rgba(13,79,211,.035); }
  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 */
  .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 */
  footer.site { background: linear-gradient(180deg, #04122E 0%, #04102B 100%); }
  /* no transparent bands left to bridge, so the CTA needs no run-up */
  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 */
  #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 */
  .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. */
  .tint .cmp__row .node { background: var(--white); border-color: var(--line); color: var(--ink); }
  .tint .node-ico { stroke: var(--blue); }
  .tint .cmp__gaps span { color: var(--sub); }
  .tint .cmp__risers i { background: rgba(13,79,211,.4); }
  .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)); }
  .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); }
  .tint .cmp__stage:hover .cmp__grip, .tint .cmp.is-held .cmp__grip { border-color: var(--blue); }
  .tint .cmp__lbl { color: var(--ink); }
  .tint .cmp__range:focus-visible { outline-color: var(--blue); }
  @media (max-width: 860px) { .tint .cmp__pane::before { color: var(--sub); } }
  /* the four takeaways keep the homepage's icon-gutter layout */
  #patchPoints .pt:hover h3 { color: var(--ink); }

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

  /* --- strictly no rules above card titles, anywhere on this page --- */
  .pt::after { content: none; }
  .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 --- */
  .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; }
  .pts--ico .pt { display: grid; grid-template-columns: 26px 1fr; column-gap: 15px;
    padding: 0; align-content: start; }
  .pts--ico .pt h3 { grid-column: 2; align-self: center; }
  .pts--ico .pt p { grid-column: 2; margin-top: 9px; max-width: 50ch; }
  @media (max-width: 760px) { .pts--ico { grid-template-columns: 1fr; row-gap: 24px; } }
  .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; }
  section.night .pt-ico { stroke: #7FA9F8; }

  /* --- the aim, set as a centred statement rather than a running line --- */
  .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); }
  .aim-k { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
  section.night .aim { color: var(--white); }
  section.night .aim-k { color: #7FA9F8; }

  /* --- foundation: nothing drawn above the box — it separates by space --- */
  .sys-base { margin-top: 30px; }
  .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 */
  header.hero--sub { min-height: clamp(480px, 66vh, 700px); align-items: flex-end; }
  .hero--sub .hero-media img,
  .hero--sub .hero-media svg { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block; }
  .hero--sub .hero-in { padding: 132px 0 100px; }
  @media (max-width: 640px) { .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) {
    header.hero--sub { min-height: 0; }
    .hero--sub .hero-in { padding-top: 150px; }
  }
  .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) { .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 */
  .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%); }
  .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 --- */
  .subbar { background: var(--white); border-bottom: 1px solid var(--line); }
  .subbar-in { display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 9px; padding: 20px 0 24px; }
  .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); }
  .subbar-chips span { display: inline-flex; align-items: center; gap: 18px; }
  .subbar-chips span::after { content: ""; width: 5px; height: 5px; background: var(--blue); transform: rotate(45deg); }
  .subbar-chips span:last-child::after { display: none; }
  .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. */
  .journey--7 .j-panel { flex-basis: 96px; }
  .journey--7 .j-panel.act { flex-basis: 0%; }
  @media (max-width: 1180px) { .journey--7 .j-panel { flex-basis: 76px; } }

  /* --- shared foundation diagram: four base cells under three groups --- */
  .sys-base { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 880px) { .sys-base { grid-template-columns: 1fr; } }
  /* resolving a case draws on the rules and the history behind them */
  .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 --- */
  .relay--4 .relay__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
  .relay--4 .relay__step h3 { font-size: 16px; max-width: 12ch; }
  .relay--4 .relay__step p { font-size: 13.5px; }
  @media (max-width: 900px) { .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 */
  .tint .cyc-track { stroke: #D6DEEE; }
  .tint .cyc-arc { stroke: var(--blue); }
  .tint .cyc-orbit circle { fill: var(--blue); }
  .tint .cyc-dot { fill: var(--white); stroke: #B9C6E4; }
  .tint .cyc-dot.is-on { fill: var(--blue); stroke: var(--blue); }
  .tint .cyc-lbl { color: var(--sub); }
  .tint .cyc-lbl .cyc-n { color: rgba(7,34,89,.38); }
  .tint .cyc-lbl:hover, .tint .cyc-lbl[aria-selected="true"] { color: var(--ink); }
  .tint .cyc-lbl[aria-selected="true"] .cyc-n { color: var(--blue); }
  .tint .cyc-lbl:focus-visible { outline-color: var(--blue); }
  .tint .cyc-core-n { color: rgba(7,34,89,.12); }
  .tint .cyc-core p { color: var(--sub); }
  @media (max-width: 900px) {
    .tint .cyc-list::before { background: linear-gradient(180deg, var(--blue), rgba(13,79,211,.12)); }
    .tint .cyc-item::before { background: var(--white); border-color: var(--blue); }
    .tint .cyc-item .cyc-n { color: var(--blue); }
    .tint .cyc-item p { color: var(--sub); }
    .tint .cyc-item:last-child::after { border-color: rgba(13,79,211,.45); }
  }

  /* --- industries ledger, re-inked for paper --- */
  .tint .irows { border-top-color: var(--line); }
  .tint .irow { border-bottom-color: var(--line); color: var(--ink); }
  .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)); }
  .tint .irow p { color: var(--sub); }
  .tint .irow:hover p, .tint .irow:focus-visible p { color: var(--ink); }
  .tint .irow-m { color: rgba(7,34,89,.45); }
  .tint .irow:hover .irow-m, .tint .irow:focus-visible .irow-m { color: var(--blue); }

  /* --- operations on paper: the record reads as an actual document --- */
  .tint .anno-item { border-top-color: var(--line); }
  .tint .anno-item h3 { color: var(--ink); }
  .tint .anno-item p { color: var(--sub); }
  .tint .rec-card { box-shadow: 0 30px 70px -28px rgba(7,34,89,.35), 0 0 0 1px var(--line); }
  .tint .rec-cap { color: var(--sub); }
  /* controls that hold at once, not stages in an order: the brand
     diamond instead of a step number */
  .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 --- */
  .tint .awards-band { border-top: 0; padding-top: 0; }
  .tint .awards span img,
  .tint .awards span img.badge,
  .tint .awards span img.light { filter: none; opacity: .88; }
  .tint .awards span:hover img { opacity: 1; }
  .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 --- */
  .viz--ai .src { fill: rgba(255,255,255,.15); animation: vzGlow 5.2s linear infinite; animation-delay: var(--d, 0s); }
  .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); }
  .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; }
  .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); }
  .viz--ai .hpill rect { fill: rgba(157,190,255,.12); stroke: #9DBEFF; stroke-width: 1.2; }
  .viz--ai .hpill text { fill: #BFD4FF; }
  .viz--ai .hpill { animation: vzVerify 5.2s cubic-bezier(.4,0,.2,1) infinite; }
  @media (prefers-reduced-motion: reduce) {
    .viz--ai .src, .viz--ai .fd, .viz--ai .core, .viz--ai .ty, .viz--ai .hpill { animation: none; }
    .viz--ai .fd { stroke-dashoffset: 0; }
  }

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

  .nav-links { gap: 2px; align-items: center; }
  .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 */
  .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;
  }
  .nav-flat { padding: 10px 11px; }
  .nav-trigger .cv { width: 10px; height: 10px; flex: none; fill: none;
    stroke: currentColor; stroke-width: 2.2; transition: transform .22s ease; opacity: .7; }
  .nav-item.open .nav-trigger .cv { transform: rotate(180deg); }
  .nav-trigger:hover, .nav-item.open .nav-trigger { color: #fff; }
  nav.top:not(.scrolled) .nav-trigger { color: rgba(255,255,255,.78); }
  nav.top:not(.scrolled) .nav-trigger:hover,
  nav.top:not(.scrolled) .nav-item.open .nav-trigger { color: #fff; }

  /* --- the panel --- */
  .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 */
  .nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav-item.open .nav-drop {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%);
  }
  .nav-drop.wide { min-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .nav-drop-col { display: flex; flex-direction: column; }
  .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 */
  nav.top .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;
  }
  nav.top .nav-links .nav-drop a:hover,
  nav.top .nav-links .nav-drop a:focus-visible {
    background: rgba(255,255,255,.09); color: #fff; outline: none;
  }

  /* --- burger --- */
  .burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0 9px; background: none; border: 0; cursor: pointer;
  }
  .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;
  }
  nav.top.menu-open .burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
  nav.top.menu-open .burger span:nth-child(2) { opacity: 0; }
  nav.top.menu-open .burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

  /* --- mobile panel --- */
  .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;
  }
  nav.top.menu-open .nav-panel { opacity: 1; visibility: visible; transform: none; }
  .mgroup { border-bottom: 1px solid rgba(255,255,255,.10); }
  .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;
  }
  .mgroup-t .cv { width: 12px; height: 12px; flex: none; fill: none;
    stroke: currentColor; stroke-width: 2.2; opacity: .6; transition: transform .25s ease; }
  .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. */
  .mgroup-p { display: none; padding-bottom: 6px; }
  .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) { .mgroup.open .mgroup-p { animation: none; } }
  .mgroup-p a, .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;
  }
  .mgroup-p a:last-child { padding-bottom: 20px; }
  .mgroup-p a:hover, .mflat:hover { color: #fff; }
  .mgroup-p .nav-drop-title { padding: 12px 2px 4px; }
  .mflat { padding: 18px 2px; font-size: 13px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #fff; }

  @media (max-width: 1100px) { .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) {
    .nav-in { gap: 8px; }
    .nav-right { gap: 2px; }
    .burger { width: 34px; padding: 0 6px; }
    .nav-cta .btn { min-height: 40px; padding: 0 12px; font-size: 10.5px; letter-spacing: .01em; }
    .nav-cta .calico { display: none; }
    .nav-panel { top: 68px; }
  }
  @media (min-width: 1101px) { .nav-panel { display: none; } }
  @media (max-width: 1280px) {
    .nav-trigger { font-size: 15px; letter-spacing: .06em; padding: 10px 8px; }
    .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) {
    .nav-in { grid-template-columns: auto minmax(0,1fr) auto; }   /* centre the menu between logo and buttons, not on the page */
    .nav-trigger { letter-spacing: .03em; padding: 10px 5px; }
    .nav-flat { padding: 10px 5px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-drop, .nav-panel, .mgroup-p, .burger span, .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) --- */
  .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. --- */
  .foot-ai, ul.certs li, .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.
     ========================================================= */
  .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 */
  }
  .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);
  }
  .irow::before { display: none; }     /* the sweep was sized for a full-width row */
  .irow:hover, .irow:focus-visible { transform: translateY(-4px); }
  .irow-ph { aspect-ratio: 3 / 2; }
  .irow-ph h3 { font-size: clamp(17px, 1.5vw, 23px); padding: 10px 12px; }
  .irow p { max-width: none; font-size: 14px; line-height: 1.6; }
  /* pushes every Explore onto the same baseline despite uneven copy */
  .irow-m { justify-self: start; align-self: flex-start; margin-top: auto; padding-top: 2px; }

  @media (max-width: 1100px) { .irows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px)  {
    .irows { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .irow-ph { aspect-ratio: 21 / 9; }
    .irow-ph h3 { font-size: clamp(21px, 6vw, 26px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .irow { transition: none; }
    .irow:hover, .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. --- */
  .irow { transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .65s cubic-bezier(.2,.6,.2,1);
    will-change: transform; }
  .irow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; }
  .irow-ph img { transition: transform .9s cubic-bezier(.22,.61,.36,1); will-change: transform; backface-visibility: hidden; }
  .irow:hover .irow-ph img, .irow:focus-visible .irow-ph img { transform: scale(1.04); }
  .irow-m .ar { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .irow p, .irow-m { transition: color .3s ease; }
  @media (prefers-reduced-motion: reduce) {
    .irow, .irow-ph img, .irow-m .ar, .irow p, .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. --- */
  .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;
  }
  .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 */
  .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)));
  }
  .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);
  }
  .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; }
  .cta-side {
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 14px; margin-top: 0; width: max-content;
  }
  .cta-side .btn { justify-content: center; }
  @media (max-width: 1000px) {
    .cta-in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .cta-side { width: auto; align-items: flex-start; }
    .cta-side .btn { width: auto; }
  }
  @media (max-width: 600px) {
    .cta-copy h2 { white-space: normal; font-size: clamp(28px, 7.6vw, 36px); }
    .cta .lede { font-size: 16px; }
    .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. --- */
  .awards-band { margin-top: clamp(32px, 3.4vw, 44px); padding-top: 0; border-top: 0; }
  .awards { margin-top: 0; }
  .awards span img, .awards span img.badge, .awards span img.light { filter: none; opacity: .88; }
  .awards span:hover img { opacity: 1; }
  .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. --- */
  .sec-badge { height: clamp(81px, 8.4vw, 108px); }
  #security .sec-head {
    display: flex; align-items: center; justify-content: flex-start;
    gap: clamp(24px, 4vw, 56px); max-width: none; text-align: left;
  }
  #security .sec-head .sec-badge { margin: 0; flex: 0 0 auto; }
  #security .sec-head-copy { flex: 1 1 auto; min-width: 0; }
  #security .sec-head h2, #security .sec-head h3, #security .sec-head .lede { margin-left: 0; margin-right: 0; max-width: none; }
  #security .sec-head-copy h2, #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 */
  #security .sec-head-copy h3 { font-size: clamp(21px, 2.4vw, 30px); letter-spacing: -0.022em; line-height: 1.24; white-space: nowrap; }
  #security .sec-head .lede { margin-top: 13px; max-width: 64ch; }
  @media (max-width: 760px) {
    #security .sec-head { display: block; text-align: center; }
    #security .sec-head .sec-badge { margin: 0 auto 16px; }
    #security .sec-head h2, #security .sec-head h3, #security .sec-head .lede { margin-left: auto; margin-right: auto; }
    #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. --- */
  .subbar-in { padding: 20px 0; gap: 8px; }
  .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) {
    .subbar-chips { gap: 6px 14px; }
    .subbar-chips span { gap: 0; }
    .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) {
    .cta-side .btn, .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) {
    .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) {
    .rec-head { flex-wrap: wrap; }
    .rec-row { grid-template-columns: 1fr; gap: 3px; }
    .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) {
    .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 */
    .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) {
    .hero-link { display: inline-block; text-align: center; line-height: 1.5; }
    .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) { .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.
     ========================================================= */
  .caps.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caps.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .caps.c3, .caps.c4 { gap: clamp(16px, 1.8vw, 24px); }
  .caps.c3 .cap, .caps.c4 .cap { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
  .caps.c3 .cap > *, .caps.c4 .cap > * { min-width: 0; }
  .caps.c3 .cap h3, .caps.c4 .cap h3 { margin: 20px 24px 0; font-size: 19px; align-self: end; }
  .caps.c3 .cap p, .caps.c4 .cap p { margin: 8px 24px 0; line-height: 1.5; }
  .caps.c3 .cap .more, .caps.c4 .cap .more { margin: auto 24px 0; padding: 14px 0 18px; justify-content: space-between; gap: 12px; line-height: 1.35; }
  .caps.c3 .cap .more .ar, .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 */
  .caps.c3 .cap:hover, .caps.c4 .cap:hover { background: var(--light); border-color: var(--line); }
  @media (max-width: 1100px) { .caps.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 980px) { .caps.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) { .caps.c3, .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.
     ========================================================= */
  footer.site.paper { background: var(--light); color: var(--sub); }
  footer.site.paper::before { display: none; }
  footer.site.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 */
  footer.site.paper .foot-brand svg { color: inherit; }
  footer.site.paper .foot-tag { color: var(--sub); }
  footer.site.paper .foot-tag b { color: var(--blue); }
  footer.site.paper .foot-offices,
  footer.site.paper .foot-contact a, footer.site.paper .foot-col a, footer.site.paper .foot-social a,
  footer.site.paper .foot-legal a, footer.site.paper .foot-legal button, footer.site.paper .foot-meta { color: var(--sub); }
  footer.site.paper .foot-contact a:hover, footer.site.paper .foot-col a:hover, footer.site.paper .foot-social a:hover,
  footer.site.paper .foot-legal a:hover, footer.site.paper .foot-legal button:hover { color: var(--blue); }
  footer.site.paper .foot-col h3 { color: var(--ink); }
  footer.site.paper .foot-ai { border-color: var(--line); background: #fff; --edge: var(--line); }
  footer.site.paper .foot-ai-label { color: var(--ink); }
  footer.site.paper .foot-ai a { color: var(--sub); background: var(--light); }
  footer.site.paper .foot-ai a:hover { color: #fff; background: var(--blue); }
  footer.site.paper .foot-meta { border-top: 1px solid var(--line); }
  footer.site.paper .foot-legal a, footer.site.paper .foot-legal button { text-decoration-color: rgba(28,26,23,.25); }
  footer.site.paper .foot-legal a:hover, footer.site.paper .foot-legal button:hover { text-decoration-color: rgba(13,79,211,.5); }