:root {
  color-scheme: light;
  --ink: #111b37;
  --muted: #4d5870;
  --blue: #2046d6;
  --line: #d9dfef;
  --paper: #f8faff;
  --night: #142457;
  --display: "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --body: "Aptos", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.65 var(--body); }
a { color: var(--blue); text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid #5c7dff; outline-offset: 5px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; }
.wrap { width: min(72rem, calc(100% - 3rem)); margin-inline: auto; }
.skip { position: fixed; left: 1rem; top: 1rem; z-index: 2; padding: .75rem; background: white; transform: translateY(-200%); }
.skip:focus { transform: translateY(0); }
.topbar, .footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; }
.topbar { border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-size: .96rem; font-weight: 820; white-space: nowrap; }
.brand img { display: block; }
.brand-accent { color: var(--blue); }
nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); }
nav a { color: var(--muted); font-size: .875rem; font-weight: 650; text-decoration: none; }
nav a:hover { color: var(--blue); text-decoration: underline; }
.app-link { border: 1px solid var(--line); border-radius: .45rem; padding: .5rem .75rem; color: var(--ink); white-space: nowrap; }
.app-link span { color: var(--blue); margin-left: .15rem; }
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(3rem, 7.6vw, 7rem); }
.eyebrow { color: var(--blue); font: 700 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.eyebrow > span { display: inline-block; width: .58rem; height: .58rem; margin-right: .45rem; background: var(--blue); transform: rotate(-14deg); }
.hero h1 { max-width: 12ch; margin-block: 1rem 1.25rem; font-size: clamp(2.8rem, 5.6vw, 5rem); letter-spacing: -.067em; }
.hero h1 em { color: var(--blue); font-style: normal; }
.lead { max-width: 48ch; color: var(--muted); font-size: 1.075rem; }
.button { display: inline-flex; align-items: center; gap: 1rem; padding: .72rem 1.1rem; margin-top: 1.5rem; background: var(--blue); color: white; border-radius: .45rem; text-decoration: none; font-weight: 700; }
.button:hover { background: #1836ac; }
.flow { padding: clamp(1.15rem, 3vw, 2.4rem); color: white; background-color: var(--night); background-image: linear-gradient(#849dff19 1px, transparent 1px), linear-gradient(90deg, #849dff19 1px, transparent 1px); background-size: 28px 28px; border-radius: .9rem; box-shadow: 0 1.1rem 2.8rem #14245724; }
.flow-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #d4e0ff; font: 650 .72rem/1.3 var(--mono); letter-spacing: .1em; }
.signal { display: flex; gap: .25rem; }
.signal i { width: .34rem; height: .34rem; background: #89a8ff; border-radius: 50%; }
.flow-steps { list-style: none; display: grid; gap: .8rem; margin: 1.15rem 0 0; padding: 0; }
.flow-steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; padding: .76rem .9rem; border: 1px solid #8097d686; border-radius: .5rem; background: #182b65; }
.flow-steps li + li::before { position: absolute; content: ""; top: -.85rem; left: 1.6rem; width: 1px; height: .85rem; background: #89a8ff; }
.flow-steps .flow-core { background: #2249dc; border-color: #7595ff; }
.step-id { color: #d3deff; font: .74rem var(--mono); }
.flow-steps strong, .flow-steps small { display: block; }
.flow-steps small { color: #e3eaff; font-size: .8rem; line-height: 1.35; }
.solutions { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 4rem); border-top: 1px solid var(--line); padding-block: clamp(2.2rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.55rem); letter-spacing: -.04em; margin-top: .5rem; }
.solution-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.solution-list article { border-top: 2px solid #abbaf0; padding-top: .9rem; }
.solution-list h3 { margin-bottom: .5rem; font-size: 1.1rem; }
.solution-list p, .company p, address { color: var(--muted); }
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; background: #ebf0ff; padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid #d3ddff; border-radius: .75rem; }
.contact h2 { margin-bottom: .8rem; }
.contact a { overflow-wrap: anywhere; }
address { font-style: normal; }
.portal-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .65rem; font-size: .9rem; font-weight: 650; }
.footer { margin-top: 1rem; padding-block: 1.6rem; }
.document-wrap { padding-block: 2.75rem; }
.document { max-width: 47rem; padding: clamp(1.2rem, 4.8vw, 3.4rem); border: 1px solid var(--line); border-radius: .7rem; background: white; }
.document h1 { font-size: clamp(2.05rem, 5vw, 3.35rem); letter-spacing: -.055em; margin: 1rem 0; }
.document h2 { margin: 1.7rem 0 .55rem; font-size: 1.32rem; letter-spacing: -.025em; }
.document p + p { margin-top: .8rem; }
.document ol { padding-left: 1.3rem; }
.document li + li { margin-top: .35rem; }
.document a { overflow-wrap: anywhere; }
@media (max-width: 53rem) {
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .hero h1 { max-width: 16ch; }
  .desktop-break { display: none; }
  .flow { width: min(100%, 33rem); }
  .solutions { grid-template-columns: 1fr; }
}
@media (max-width: 38rem) {
  .wrap { width: calc(100% - 2rem); }
  .topbar { gap: .6rem; }
  .nav-about { display: none; }
  .topbar nav { gap: .65rem; }
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.55rem); }
  .solution-list, .contact { grid-template-columns: 1fr; }
  .company { padding-top: 1rem; border-top: 1px solid #bac9f8; }
  .footer { align-items: flex-start; flex-direction: column; }
  .footer nav { flex-wrap: wrap; }
}