:root {
  --ink:#252620;
  --paper:#f5f4ef;
  --paper-2:#edeee8;
  --white:#fbfcf8;
  --text:#2a2c27;
  --muted:#62665e;
  --line:#d2d4cb;
  --lime:#a9ca79;
  --lime-dark:#526a35;
  --magenta:#9f2d63;
  --max:1220px;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:128px; }
body { margin:0; color:var(--text); background:var(--paper); font-family:Inter,Aptos,"Segoe UI",Arial,sans-serif; line-height:1.65; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.systems-skip { position:fixed; z-index:200; top:-70px; left:12px; padding:9px 13px; color:#fff; background:var(--ink); }
.systems-skip:focus { top:10px; }

.systems-header { position:sticky; z-index:100; top:0; height:72px; display:flex; align-items:center; gap:30px; padding:0 max(20px,calc((100% - var(--max))/2)); color:#fff; background:rgba(37,38,32,.98); border-bottom:1px solid #4c4d46; }
.systems-brand { display:flex; align-items:center; gap:9px; margin-right:auto; }
.systems-brand img { width:43px; height:43px; object-fit:contain; }
.systems-brand span { display:flex; flex-direction:column; letter-spacing:.23em; line-height:1; }
.systems-brand small { margin-bottom:4px; color:#b9bbb4; font-size:.47rem; }
.systems-brand strong { font-size:.85rem; letter-spacing:.25em; }
.systems-header nav { display:flex; align-items:center; gap:22px; color:#d1d3cc; font-size:.7rem; font-weight:800; }
.systems-header nav a:last-child { padding:10px 13px; color:var(--ink); background:var(--lime); }

.systems-hero { max-width:var(--max); display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:end; margin:auto; padding:92px 20px 78px; }
.systems-hero small,.system-copy>small,.demo-policy small,.systems-contact>small { color:var(--magenta); font-size:.6rem; font-weight:900; letter-spacing:.15em; }
.systems-hero h1 { max-width:730px; margin:20px 0 0; font-size:clamp(3.4rem,5.8vw,5.6rem); font-weight:550; letter-spacing:-.065em; line-height:.93; text-wrap:balance; }
.systems-hero>p { max-width:490px; margin:0; color:var(--muted); font-size:1.02rem; line-height:1.72; }

.systems-index { position:sticky; z-index:80; top:72px; display:grid; grid-template-columns:repeat(5,1fr); padding-inline:max(20px,calc((100% - var(--max))/2)); background:#e1e2dc; border-top:1px solid var(--line); border-bottom:1px solid #c6c8c0; }
.systems-index a { min-height:56px; display:grid; place-items:center; padding:8px 12px; border-right:1px solid #c6c8c0; color:#555950; font-size:.65rem; font-weight:850; text-align:center; transition:.18s; }
.systems-index a:first-child { border-left:1px solid #c6c8c0; }
.systems-index a:hover,.systems-index a.is-active { color:#fff; background:#464d43; }

.system-detail { scroll-margin-top:128px; max-width:var(--max); min-height:700px; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0; margin:0 auto; padding:102px 20px; border-bottom:1px solid var(--line); }
.system-detail--primary { max-width:none; min-height:760px; padding-inline:max(20px,calc((100% - var(--max))/2)); background:#e8ece2; border-top:0; }
.system-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:42px 58px; }
.system-copy h2 { max-width:560px; margin:18px 0 17px; font-size:clamp(2.9rem,4.7vw,4.65rem); font-weight:550; letter-spacing:-.06em; line-height:.94; text-wrap:balance; }
.system-copy .lead { margin:0 0 16px; color:#3b3f37; font-size:1.1rem; font-weight:680; line-height:1.45; }
.system-copy>p:not(.lead) { margin:0 0 12px; color:var(--muted); font-size:.83rem; line-height:1.68; }
.system-capabilities { width:100%; display:grid; grid-template-columns:1fr 1fr; margin-top:22px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.system-capabilities span { min-height:76px; display:flex; flex-direction:column; justify-content:center; padding:12px 15px; color:#666a61; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.68rem; line-height:1.42; }
.system-capabilities b { margin-bottom:3px; color:#31342e; font-size:.63rem; letter-spacing:.035em; }
.system-action { display:inline-flex; margin-top:27px; padding-bottom:5px; color:#30342d; border-bottom:1px solid currentColor; font-size:.73rem; font-weight:850; }

.system-media { min-height:580px; position:relative; overflow:hidden; background:#e0e1da; border:1px solid #cdd0c6; }
.system-media--video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.system-media--video::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(28,31,27,.36),transparent 52%); pointer-events:none; }
.system-media--video>span,.system-media--screenshot figcaption { position:absolute; z-index:2; left:17px; bottom:15px; padding:6px 8px; color:#fff; background:rgba(28,30,26,.82); font-size:.54rem; font-weight:850; letter-spacing:.1em; }

.system-media--biometric { display:flex; flex-direction:column; justify-content:center; padding:52px; background:#e7eadf; }
.system-media__eyebrow { margin-bottom:25px; color:var(--magenta); font-size:.58rem; font-weight:900; letter-spacing:.14em; }
.system-media--biometric ol { margin:0; padding:0; list-style:none; border-top:1px solid #bec4b5; }
.system-media--biometric li { display:grid; grid-template-columns:45px 1fr; gap:16px; align-items:center; min-height:80px; border-bottom:1px solid #bec4b5; }
.system-media--biometric li b { color:var(--lime-dark); font-size:.65rem; letter-spacing:.08em; }
.system-media--biometric li span { color:#33372f; font-size:1rem; font-weight:720; }
.system-media--biometric p { margin:24px 0 0; color:#6b7065; font-size:.67rem; font-weight:750; }

.system-media--roster { display:flex; flex-direction:column; justify-content:center; padding:46px; background:#e7e5dd; }
.system-media--roster header { display:flex; flex-direction:column; padding-bottom:21px; border-bottom:2px solid #343830; }
.system-media--roster header span { color:var(--magenta); font-size:.56rem; font-weight:900; letter-spacing:.14em; }
.system-media--roster header b { margin-top:6px; font-size:1.8rem; letter-spacing:-.035em; }
.roster-row { display:grid; grid-template-columns:23px 1fr auto; gap:13px; align-items:center; min-height:86px; border-bottom:1px solid #c5c5bd; }
.roster-row i { width:11px; height:11px; border-radius:50%; background:#9d9f98; }
.roster-row i.is-on { background:#6f9845; box-shadow:0 0 0 4px rgba(111,152,69,.12); }
.roster-row span { display:flex; flex-direction:column; color:#73766e; font-size:.66rem; }
.roster-row b { margin-bottom:2px; color:#33362f; font-size:.8rem; }
.roster-row em { color:#676b62; font-size:.55rem; font-style:normal; font-weight:900; letter-spacing:.08em; }
.system-media--roster footer { padding-top:18px; color:#666a61; font-size:.65rem; font-weight:750; }

.system-media--screenshot { display:grid; place-items:center; margin:0; padding:28px; background:#dfe1da; }
.system-media--screenshot img { width:100%; height:100%; max-height:540px; object-fit:contain; object-position:center; filter:saturate(.88) contrast(.98); box-shadow:0 13px 30px rgba(38,40,34,.13); }

.demo-policy { max-width:var(--max); display:grid; grid-template-columns:1fr 1fr; gap:90px; margin:auto; padding:96px 20px; }
.demo-policy h2 { max-width:580px; margin:19px 0 0; font-size:clamp(2.6rem,4.2vw,4.2rem); font-weight:550; letter-spacing:-.06em; line-height:.97; }
.demo-policy>div:last-child>p { margin-top:0; color:var(--muted); }
.demo-policy__compare { margin-top:28px; border-top:1px solid var(--line); }
.demo-policy__compare span { display:flex; flex-direction:column; padding:15px 0; color:#70746a; border-bottom:1px solid var(--line); font-size:.72rem; }
.demo-policy__compare b { margin-bottom:4px; color:var(--lime-dark); font-size:.58rem; letter-spacing:.11em; }

.systems-contact { padding:82px max(20px,calc((100% - var(--max))/2)); color:var(--ink); background:#dbe7c9; text-align:center; border-top:1px solid #bdcda5; }
.systems-contact h2 { max-width:930px; margin:18px auto 13px; font-size:clamp(2.9rem,5vw,5rem); font-weight:550; letter-spacing:-.065em; line-height:.94; text-wrap:balance; }
.systems-contact p { color:#626b57; }
.systems-contact a { display:inline-flex; margin-top:18px; padding:12px 16px; color:#fff; background:#343b30; font-size:.72rem; font-weight:850; }
.systems-footer { display:flex; align-items:center; gap:28px; padding:27px max(20px,calc((100% - var(--max))/2)); color:#b5b7b0; background:#20211d; font-size:.66rem; }
.systems-footer .systems-brand { color:#fff; }
.systems-footer>a:last-child { margin-left:auto; }
.systems-top { position:fixed; z-index:90; right:18px; bottom:18px; width:54px; height:54px; display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(10px) scale(.92); background:linear-gradient(145deg,rgba(255,255,252,.94),rgba(229,234,221,.9)); border:1px solid rgba(68,76,61,.2); border-radius:50%; box-shadow:0 7px 22px rgba(32,34,28,.16),inset 0 0 0 4px rgba(255,255,255,.35); backdrop-filter:blur(8px); transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.systems-top.is-visible { opacity:1; visibility:visible; transform:none; }
.systems-top.is-visible:hover { transform:translateY(-3px) scale(1.04); background:linear-gradient(145deg,#fff,#e5eed7); border-color:rgba(104,142,66,.42); box-shadow:0 10px 27px rgba(32,34,28,.19),inset 0 0 0 4px rgba(255,255,255,.48); }
.systems-top:focus-visible { outline:3px solid rgba(169,202,121,.58); outline-offset:3px; }
.systems-top img { width:38px; height:38px; object-fit:contain; transform:rotate(180deg); filter:drop-shadow(0 2px 3px rgba(32,34,28,.16)); }

@media (max-width:900px) {
  .systems-hero,.system-detail,.demo-policy { grid-template-columns:1fr; }
  .systems-hero { gap:35px; }
  .systems-index { overflow-x:auto; display:flex; padding-inline:0; }
  .systems-index a { min-width:165px; }
  .system-detail { min-height:0; padding-block:72px; }
  .system-detail--primary { padding-inline:20px; }
  .system-copy { padding:44px 20px; }
  .system-media { min-height:500px; }
  .system-detail:nth-of-type(odd) .system-media { order:0; }
  .system-detail:nth-of-type(odd) .system-copy { order:1; }
}

@media (max-width:570px) {
  .systems-header { padding-inline:14px; }
  .systems-header .systems-brand span,.systems-header nav a:first-child { display:none; }
  .systems-header nav { margin-left:auto; }
  .systems-hero { padding:60px 15px 50px; }
  .systems-hero h1 { font-size:3.65rem; }
  .system-detail { padding:54px 15px; }
  .system-detail--primary { padding-inline:15px; }
  .system-copy { padding:34px 2px; }
  .system-copy h2 { font-size:3.2rem; }
  .system-capabilities { grid-template-columns:1fr; }
  .system-media { min-height:390px; }
  .system-media--biometric,.system-media--roster { padding:27px; }
  .system-media--screenshot { min-height:300px; padding:12px; }
  .system-media--screenshot img { max-height:360px; }
  .demo-policy { padding:65px 15px; gap:35px; }
  .systems-contact { padding:65px 15px; }
  .systems-footer { align-items:flex-start; flex-direction:column; padding:25px 15px; }
  .systems-footer>a:last-child { margin-left:0; }
}
